{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "primitives-buttons-liquid",
  "title": "Liquid Button",
  "description": "A button that fills on hover.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "@odysseyui/lib-get-strict-context",
    "@odysseyui/primitives-animate-slot"
  ],
  "files": [
    {
      "path": "registry/primitives/buttons/liquid/index.tsx",
      "content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type HTMLMotionProps } from 'motion/react';\n\nimport { Slot, type WithAsChild } from '@/components/odyssey/primitives/animate/slot';\n\ntype LiquidButtonProps = WithAsChild<\n  HTMLMotionProps<'button'> & {\n    delay?: string;\n    fillHeight?: string;\n    hoverScale?: number;\n    tapScale?: number;\n  }\n>;\n\nfunction LiquidButton({\n  delay = '0.3s',\n  fillHeight = '3px',\n  hoverScale = 1.05,\n  tapScale = 0.95,\n  asChild = false,\n  ...props\n}: LiquidButtonProps) {\n  const Component = asChild ? Slot : motion.button;\n\n  return (\n    <Component\n      whileTap={{ scale: tapScale }}\n      whileHover={{\n        scale: hoverScale,\n        '--liquid-button-fill-width': '100%',\n        '--liquid-button-fill-height': '100%',\n        '--liquid-button-delay': delay,\n        transition: {\n          '--liquid-button-fill-width': { duration: 0 },\n          '--liquid-button-fill-height': { duration: 0 },\n          '--liquid-button-delay': { duration: 0 },\n        },\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        } as React.CSSProperties\n      }\n      {...props}\n    />\n  );\n}\n\nexport { LiquidButton, type LiquidButtonProps };\n",
      "type": "registry:ui",
      "target": "components/odysseyui/primitives/buttons/liquid.tsx"
    }
  ],
  "type": "registry:ui"
}