{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "description": "The primary action control: WebGL rim light, jelly press spring and a loading state.",
  "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 { forwardRef, type ButtonHTMLAttributes, type ReactNode } from 'react'\nimport { LiquidSpinner } from '@/components/ui/liquid-progress'\nimport { useLiquefyConfig } from '@/lib/provider'\nimport { useLiquidStyles, type LiquidStyleProps } from '@/lib/styles-prop'\nimport { useLiquidGlass } from '@/hooks/use-liquid-glass'\n\nexport type LiquidButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & LiquidStyleProps & {\n  children: ReactNode\n  iconAfter?: ReactNode\n  iconBefore?: ReactNode\n  isLoading?: boolean\n  lens?: boolean\n  size?: 'sm' | 'md' | 'lg'\n  tint?: string\n  webgl?: boolean\n}\n\nconst spinnerSizes = { lg: 22, md: 19, sm: 16 } as const\n\nexport const LiquidButton = forwardRef<HTMLButtonElement, LiquidButtonProps>(({\n  children,\n  className,\n  disabled,\n  iconAfter,\n  iconBefore,\n  isLoading = false,\n  lens,\n  size = 'md',\n  style,\n  styles,\n  tint,\n  webgl,\n  ...props\n}, forwardedRef) => {\n  const config = useLiquefyConfig()\n  const resolvedTint = tint ?? config.tint\n  const resolvedWebgl = webgl ?? config.webgl\n  // Edge refraction folds the backdrop around the bezel; on control-sized\n  // elements that reads as a mirrored fill, so buttons keep it opt-in.\n  const resolvedLens = lens ?? false\n  const isDisabled = disabled || isLoading\n  const [elementRef, canvasRef] = useLiquidGlass(forwardedRef, {\n    bounce: 0.075,\n    disabled: isDisabled,\n    intensity: config.intensity,\n    lens: resolvedLens && config.transparency,\n    motion: config.motion,\n    tilt: 2.4,\n    tint: resolvedTint,\n    webgl: resolvedWebgl,\n    wobbliness: config.wobbliness,\n  })\n  const root = useLiquidStyles('lq-button', {\n    className,\n    style,\n    styles,\n    vars: { '--lq-button-tint': resolvedTint },\n  })\n\n  return (\n    <button\n      aria-busy={isLoading || undefined}\n      className={root.className}\n      data-liquid-size={size}\n      data-loading={isLoading}\n      disabled={isDisabled}\n      ref={elementRef}\n      style={root.style}\n      type=\"button\"\n      {...props}\n    >\n      <span aria-hidden=\"true\" className=\"lq-surface__edge\" />\n      {resolvedWebgl && <canvas aria-hidden=\"true\" className=\"lq-surface__shader\" ref={canvasRef} />}\n      {isLoading && (\n        <span aria-hidden=\"true\" className=\"lq-button__spinner\">\n          <LiquidSpinner size={spinnerSizes[size]} thickness={2.4} tint={resolvedTint} />\n        </span>\n      )}\n      <span className=\"lq-button__content\">\n        {iconBefore && <span className=\"lq-button__icon\" data-position=\"before\">{iconBefore}</span>}\n        <span>{children}</span>\n        {iconAfter && <span className=\"lq-button__icon\" data-position=\"after\">{iconAfter}</span>}\n      </span>\n    </button>\n  )\n})\n\nLiquidButton.displayName = 'LiquidButton'\n",
      "path": "registry/liquid-button.tsx",
      "type": "registry:ui"
    }
  ],
  "name": "liquid-button",
  "registryDependencies": [
    "https://liquefy-ui.com/r/liquefy-ui.json",
    "https://liquefy-ui.com/r/liquid-progress.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": "LiquidButton",
  "type": "registry:ui"
}