{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "button",
  "title": "Button",
  "description": "Glossy Aqua pill button with gel highlight, in blue, capsule and red.",
  "dependencies": [
    "@radix-ui/react-slot",
    "class-variance-authority"
  ],
  "files": [
    {
      "path": "registry/aqua/ui/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\nconst buttonVariants = cva(\n  \"relative inline-flex shrink-0 select-none items-center justify-center gap-2 overflow-hidden whitespace-nowrap rounded-full font-semibold tracking-[-0.01em] outline-none transition-[filter] before:pointer-events-none before:absolute before:left-[7%] before:right-[7%] before:top-[2px] before:h-[46%] before:rounded-full before:bg-[linear-gradient(180deg,rgba(255,255,255,0.95),rgba(255,255,255,0.08))] before:content-[''] hover:brightness-105 focus-visible:ring-[3px] focus-visible:ring-[var(--aqua-ring,#6cb0f7)]/70 active:translate-y-px active:brightness-95 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default:\n          \"border border-[var(--aqua-edge,#1c5fb8)] bg-[linear-gradient(180deg,var(--aqua-gel-hi,#b9dcff)_0%,var(--aqua-gel-light,#6cb0f7)_42%,var(--aqua-accent,#2f7de0)_50%,var(--aqua-gel-light,#4d9cf2)_78%,var(--aqua-gel-hi,#9fd7ff)_100%)] text-white shadow-[inset_0_1px_1px_rgba(255,255,255,0.75),inset_0_-3px_7px_rgba(255,255,255,0.6),0_1px_3px_rgba(20,60,130,0.35)] [text-shadow:0_-1px_1px_rgba(10,40,90,0.45)]\",\n        secondary:\n          \"border border-[#aeb3bc] bg-[linear-gradient(180deg,#fdfdfe_0%,#e4e7ec_48%,#d3d7de_52%,#eceef2_100%)] text-[#3a3f47] shadow-[inset_0_1px_1px_rgba(255,255,255,0.9),0_1px_2px_rgba(20,60,130,0.2)] before:opacity-60 [text-shadow:0_1px_0_rgba(255,255,255,0.8)]\",\n        destructive:\n          \"border border-[#a81f1f] bg-[linear-gradient(180deg,#ffc4c4_0%,#f7826c_42%,#e03a2f_50%,#f2604d_78%,#ffb09f_100%)] text-white shadow-[inset_0_1px_1px_rgba(255,255,255,0.75),inset_0_-3px_7px_rgba(255,255,255,0.5),0_1px_3px_rgba(130,20,20,0.35)] [text-shadow:0_-1px_1px_rgba(90,10,10,0.45)]\",\n      },\n      size: {\n        sm: \"px-5 py-[7px] text-sm\",\n        default: \"px-7 py-2.5 text-base\",\n        lg: \"px-8 py-[13px] text-xl\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction Button({\n  className,\n  variant,\n  size,\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"button\"> &\n  VariantProps<typeof buttonVariants> & {\n    asChild?: boolean\n  }) {\n  const Comp = asChild ? Slot : \"button\"\n\n  return (\n    <Comp\n      data-slot=\"button\"\n      className={cn(buttonVariants({ variant, size, className }))}\n      {...props}\n    />\n  )\n}\n\nexport { Button, buttonVariants }\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}