{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "dependencies": [
    "@base-ui/react@1.8.0"
  ],
  "description": "A square icon-only button that takes its accessible name from a label prop.",
  "docs": "Two steps after installing: import the copied stylesheet once at your app entry — it lands at `styles/liquefy-ui.css` — or `@import` it from your global CSS *before* `tailwindcss`, so Tailwind utilities keep winning over component styles. Then wrap the tree in `<LiquefyProvider>`, which is where every component reads its tokens from. Every copied file already carries its own 'use client' directive. Full documentation: https://liquefy-ui.com/#/docs/installation",
  "files": [
    {
      "content": "'use client'\n\nimport { Button } from '@base-ui/react/button'\nimport { forwardRef, type ButtonHTMLAttributes, type ReactNode } from 'react'\nimport { useLiquefyConfig } from '@/lib/provider'\nimport { useLiquidStyles, type LiquidStyleProps } from '@/lib/styles-prop'\nimport { useLiquidGlass } from '@/hooks/use-liquid-glass'\n\nexport type LiquidIconButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & LiquidStyleProps & {\n  children: ReactNode\n  label: string\n  shape?: 'circle' | 'rounded'\n  size?: 'sm' | 'md' | 'lg'\n  tint?: string\n}\n\nexport const LiquidIconButton = forwardRef<HTMLButtonElement, LiquidIconButtonProps>(({\n  children,\n  className,\n  disabled,\n  label,\n  shape = 'rounded',\n  size = 'md',\n  style,\n  styles,\n  tint,\n  ...props\n}, forwardedRef) => {\n  const config = useLiquefyConfig()\n  const resolvedTint = tint ?? config.tint\n  const [elementRef, canvasRef] = useLiquidGlass(forwardedRef, {\n    bounce: 0.085,\n    disabled,\n    glow: config.glow,\n    intensity: config.intensity,\n    lens: config.lens && config.transparency,\n    lensStrength: config.refraction,\n    motion: config.motion,\n    ripple: config.ripple,\n    shimmer: config.shimmer,\n    sparkle: config.sparkle,\n    tilt: 3,\n    tint: resolvedTint,\n    webgl: config.webgl,\n    wobbliness: config.wobbliness,\n  })\n  const root = useLiquidStyles(['lq-button', 'lq-icon-button'], {\n    className,\n    style,\n    styles,\n    vars: { '--lq-button-tint': resolvedTint },\n  })\n\n  return (\n    <Button\n      aria-label={label}\n      className={root.className}\n      data-liquid-shape={shape}\n      data-liquid-size={size}\n      disabled={disabled}\n      ref={elementRef}\n      style={root.style}\n      title={label}\n      type=\"button\"\n      {...props}\n    >\n      <span aria-hidden=\"true\" className=\"lq-surface__edge\" />\n      {config.webgl && <canvas aria-hidden=\"true\" className=\"lq-surface__shader\" ref={canvasRef} />}\n      <span className=\"lq-button__content\">{children}</span>\n    </Button>\n  )\n})\n\nLiquidIconButton.displayName = 'LiquidIconButton'\n",
      "path": "registry/liquid-icon-button.tsx",
      "type": "registry:ui"
    }
  ],
  "name": "liquid-icon-button",
  "registryDependencies": [
    "https://liquefy-ui.com/r/liquefy-ui.json",
    "https://liquefy-ui.com/r/provider.json",
    "https://liquefy-ui.com/r/styles-prop.json",
    "https://liquefy-ui.com/r/use-liquid-glass.json"
  ],
  "title": "LiquidIconButton",
  "type": "registry:ui"
}