{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "liquid-metal-button",
  "title": "Liquid Metal Button",
  "dependencies": [
    "@paper-design/shaders-react"
  ],
  "registryDependencies": [
    "@fab-ui/button"
  ],
  "files": [
    {
      "path": "registry/default/ui/liquid-metal-button.tsx",
      "content": "'use client';\n\nimport { Button } from '@/registry/default/ui/button';\nimport { LiquidMetal, LiquidMetalProps } from '@paper-design/shaders-react';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@/lib/utils';\n\nconst buttonVariants = cva(\n  'relative flex items-center justify-center bg-transparent border-none cursor-pointer outline-none rounded-full overflow-hidden font-medium whitespace-nowrap text-primary',\n  {\n    variants: {\n      size: {\n        sm: 'min-w-28 h-9 px-4 text-xs',\n        md: 'min-w-35.5 h-11.5 px-5 text-sm',\n        lg: 'min-w-44 h-14 px-6 text-base',\n      },\n    },\n    defaultVariants: { size: 'md' },\n  }\n);\n\ntype ShaderProps = Omit<LiquidMetalProps, 'className' | 'style' | 'shape'>;\n\ntype LiquidMetalButtonProps = Omit<\n  React.ComponentProps<typeof Button>,\n  'variant' | 'size'\n> &\n  Partial<ShaderProps> &\n  VariantProps<typeof buttonVariants>;\n\nexport function LiquidMetalButton({\n  children,\n  size,\n  className,\n  ref,\n  speed = 0.6,\n  repetition = 4,\n  softness = 0.5,\n  shiftRed = 0.3,\n  shiftBlue = 0.3,\n  distortion = 0,\n  contour = 0,\n  angle = 45,\n  scale = 8,\n  offsetX = 0.1,\n  offsetY = -0.1,\n  ...props\n}: LiquidMetalButtonProps) {\n  return (\n    <Button\n      ref={ref}\n      data-slot='liquid-metal-button'\n      className={cn(buttonVariants({ size }), className)}\n      {...props}\n    >\n      <LiquidMetal\n        className='absolute inset-0 rounded-full'\n        shape='none'\n        speed={speed}\n        repetition={repetition}\n        softness={softness}\n        shiftRed={shiftRed}\n        shiftBlue={shiftBlue}\n        distortion={distortion}\n        contour={contour}\n        angle={angle}\n        scale={scale}\n        offsetX={offsetX}\n        offsetY={offsetY}\n      />\n      <div className='absolute inset-[calc(var(--spacing)*0.68)] rounded-full bg-primary-foreground inset-shadow-lg' />\n      <span className='relative'>{children}</span>\n    </Button>\n  );\n}\n",
      "type": "registry:ui"
    }
  ],
  "cssVars": {
    "theme": {
      "--inset-shadow-lg": "inset 0 10px 8px color-mix(in oklch, var(--background) 7%, transparent)"
    }
  },
  "type": "registry:ui"
}