{
  "$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": [
    "@unlumen-ui/lib-get-strict-context",
    "@unlumen-ui/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/unlumen-ui/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/unlumen-ui/primitives/buttons/liquid.tsx"
    }
  ],
  "type": "registry:ui"
}