{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "buttons-liquid",
  "type": "registry:ui",
  "title": "Liquid Button",
  "description": "A button that fills with color from the bottom on hover.",
  "dependencies": [
    "@animate-ui/react",
    "cn",
    "motion"
  ],
  "files": [
    {
      "path": "registry/buttons/liquid/index.tsx",
      "type": "registry:ui",
      "target": "@components/animate-ui/buttons/liquid.tsx",
      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type HTMLMotionProps, type Transition } from 'motion/react';\n\nimport { Slot, type WithAsChild } from '@animate-ui/react/primitives/slot';\nimport {\n  motionTokens,\n  ReducedMotionConfig,\n  useShouldReduceMotion,\n  useTempoTransition,\n} from '@animate-ui/react/utils/motion';\nimport { cn } from 'cn';\n\nconst HOVER_TRANSITION: Transition = {\n  transform: { duration: 0.3, ease: 'easeOut' },\n  '--liquid-button-fill-width': { duration: 0 },\n  '--liquid-button-fill-height': { duration: 0 },\n  '--liquid-button-delay': { duration: 0 },\n};\n\nconst DEFAULT_TRANSITION: Transition = {\n  transform: motionTokens.spring.press,\n  default: { duration: 0.3, ease: [0.25, 0.1, 0.35, 1] },\n};\n\ntype LiquidButtonProps = WithAsChild<\n  HTMLMotionProps<'button'> & {\n    delay?: string;\n    fillHeight?: string;\n    hoverScale?: number;\n    tapScale?: number;\n  }\n>;\n\nfunction LiquidButton(props: LiquidButtonProps) {\n  return (\n    <ReducedMotionConfig>\n      <LiquidButtonContent {...props} />\n    </ReducedMotionConfig>\n  );\n}\n\nfunction LiquidButtonContent({\n  delay = '0.3s',\n  fillHeight = '3px',\n  hoverScale = 1,\n  tapScale = motionTokens.scale.press,\n  asChild = false,\n  transition,\n  style,\n  className,\n  ...props\n}: LiquidButtonProps) {\n  const reduce = useShouldReduceMotion();\n  const hoverTransition = useTempoTransition(HOVER_TRANSITION);\n  const defaultTransition = useTempoTransition(DEFAULT_TRANSITION);\n  const Component = asChild ? Slot : motion.button;\n\n  return (\n    <Component\n      initial={reduce ? undefined : { transform: 'scale(1)' }}\n      whileTap={reduce ? undefined : { transform: `scale(${tapScale})` }}\n      whileHover={{\n        ...(reduce || hoverScale === 1\n          ? null\n          : { transform: `scale(${hoverScale})` }),\n        '--liquid-button-fill-width': '100%',\n        '--liquid-button-fill-height': '100%',\n        '--liquid-button-delay': delay,\n        transition: hoverTransition,\n      }}\n      transition={transition ?? defaultTransition}\n      data-slot=\"liquid-button\"\n      className={cn(\n        'inline-flex h-10 items-center justify-center gap-2 overflow-hidden rounded-lg px-4 text-sm font-medium whitespace-nowrap text-primary outline-none [--liquid-button-background-color:var(--muted)] [--liquid-button-color:var(--primary)] hover:text-primary-foreground focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50',\n        className,\n      )}\n      style={\n        {\n          '--liquid-button-fill-width': '-1%',\n          '--liquid-button-fill-height': fillHeight,\n          '--liquid-button-delay': '0s',\n          background:\n            'linear-gradient(var(--liquid-button-color) 0 0) no-repeat calc(200% - var(--liquid-button-fill-width, -1%)) 100% / 200% var(--liquid-button-fill-height, 0.2em)',\n          backgroundColor: 'var(--liquid-button-background-color)',\n          transition: `background ${delay} var(--liquid-button-delay, 0s), color ${delay} ${delay}, background-position ${delay} calc(${delay} - var(--liquid-button-delay, 0s))`,\n          ...style,\n        } as React.CSSProperties\n      }\n      {...props}\n    />\n  );\n}\n\nexport { LiquidButton, type LiquidButtonProps };\n"
    }
  ]
}