{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "holo-button",
  "title": "Holo Button",
  "description": "The signature CTA: an animated iridescent border on a plain button. Variants: holo, primary, outline, ghost. One holo element per viewport.",
  "dependencies": [
    "class-variance-authority",
    "@radix-ui/react-slot"
  ],
  "registryDependencies": [
    "@duck/theme"
  ],
  "files": [
    {
      "path": "registry/duck/ui/holo-button.tsx",
      "content": "import * as React from \"react\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\n/**\n * HoloButton — the signature CTA.\n *\n * Label typography is deliberately absent from these classes. Family, weight,\n * tracking, case and size come from --font-button / --weight-button /\n * --tracking-button / --case-button / --text-button*, which the theme reads in a\n * zero-specificity rule. A `text-sm font-semibold` here would be a utility, and\n * a theme whose CTA is mono uppercase 12px could not undo it from CSS — it would\n * need a class on every call site, and the font-size half could not be undone at\n * all. Any single call site still overrides all of it with a plain utility.\n */\nconst holoButtonVariants = cva(\n  [\n    \"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg\",\n    \"cursor-pointer select-none\",\n    \"transition-[background-color,box-shadow,transform,border-color] duration-300 ease-[var(--ease-duck)]\",\n    \"outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\",\n    \"disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50\",\n    \"[&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4\",\n  ],\n  {\n    variants: {\n      variant: {\n        /* The signature: animated iridescent border. One per viewport. */\n        holo: \"holo-border-animated text-foreground hover:duck-glow active:scale-[0.98]\",\n        /* Solid duck lime, the workhorse CTA. */\n        primary:\n          \"bg-primary text-primary-foreground hover:bg-primary/90 hover:duck-glow-primary active:scale-[0.98]\",\n        outline:\n          \"sticker border-border bg-transparent hover:border-primary hover:text-primary active:scale-[0.98]\",\n        ghost: \"hover:bg-secondary hover:text-secondary-foreground\",\n      },\n      size: {\n        default: \"h-10 px-5 py-2\",\n        sm: \"h-8 rounded-md px-3\",\n        lg: \"h-12 rounded-xl px-8\",\n        icon: \"size-10\",\n      },\n    },\n    defaultVariants: { variant: \"holo\", size: \"default\" },\n  }\n);\n\nexport interface HoloButtonProps\n  extends React.ComponentProps<\"button\">,\n    VariantProps<typeof holoButtonVariants> {\n  asChild?: boolean;\n}\n\nfunction HoloButton({\n  className,\n  variant = \"holo\",\n  size = \"default\",\n  asChild = false,\n  ...props\n}: HoloButtonProps) {\n  const Comp = asChild ? Slot : \"button\";\n  return (\n    <Comp\n      data-slot=\"holo-button\"\n      // The variant is the only thing a stylesheet cannot infer from the DOM,\n      // and it is the thing themes most want to hook: \"outline buttons get a\n      // faint fill on hover\" is one rule here and a class on every call site\n      // without it. data-size carries the typography step for the same reason.\n      data-variant={variant}\n      data-size={size}\n      className={cn(holoButtonVariants({ variant, size }), className)}\n      {...props}\n    />\n  );\n}\n\nexport { HoloButton, holoButtonVariants };\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}