{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "soft-button",
  "title": "Soft Button",
  "description": "A glossy pill button with a small set of hand-tuned color styles and sizes.",
  "dependencies": [
    "@radix-ui/react-slot"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/clover-ui/soft-button.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { Slot, Slottable } from \"@radix-ui/react-slot\";\n\ntype SoftColor =\n  | \"red\"\n  | \"darkRed\"\n  | \"green\"\n  | \"lime\"\n  | \"blue\"\n  | \"purple\"\n  | \"orange\"\n  | \"yellow\"\n  | \"pink\"\n  | \"cyan\"\n  | \"white\"\n  | \"black\"\n  | \"teal\"\n  | \"indigo\"\n  | \"coral\"\n  | \"mint\"\n  | \"plum\";\n\ntype SizeVariant = \"sm\" | \"default\" | \"lg\";\n\ninterface SoftButtonProps\n  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, \"className\"> {\n  children: React.ReactNode;\n  color?: SoftColor;\n  size?: SizeVariant;\n  asChild?: boolean;\n  className?: string;\n}\n\nconst colorMap: Record<SoftColor, { background: string; foreground: string; glow: string }> = {\n  red: {\n    background: \"radial-gradient(120% 140% at 50% 0%, #ff6b6b 0%, #ff2d2d 42%, #c91515 100%)\",\n    foreground: \"#fff\",\n    glow: \"rgba(255, 45, 45, .34)\",\n  },\n  darkRed: {\n    background: \"radial-gradient(120% 140% at 50% 0%, #ff4545 0%, #e31212 42%, #850808 100%)\",\n    foreground: \"#fff\",\n    glow: \"rgba(227, 18, 18, .34)\",\n  },\n  green: {\n    background: \"radial-gradient(120% 140% at 50% 0%, #a8d96a 0%, #63a928 42%, #347012 100%)\",\n    foreground: \"#fff\",\n    glow: \"rgba(99, 169, 40, .28)\",\n  },\n  lime: {\n    background: \"radial-gradient(120% 140% at 50% 0%, #efff78 0%, #b8ed20 40%, #63ae00 100%)\",\n    foreground: \"#101500\",\n    glow: \"rgba(184, 237, 32, .32)\",\n  },\n  blue: {\n    background: \"radial-gradient(120% 140% at 50% 0%, #72c7ff 0%, #278ff0 42%, #1554aa 100%)\",\n    foreground: \"#fff\",\n    glow: \"rgba(39, 143, 240, .3)\",\n  },\n  purple: {\n    background: \"radial-gradient(120% 140% at 50% 0%, #d08cff 0%, #9c4cff 42%, #5a229e 100%)\",\n    foreground: \"#fff\",\n    glow: \"rgba(156, 76, 255, .3)\",\n  },\n  orange: {\n    background: \"radial-gradient(120% 140% at 50% 0%, #ffd080 0%, #ff922e 42%, #c95008 100%)\",\n    foreground: \"#241100\",\n    glow: \"rgba(255, 146, 46, .3)\",\n  },\n  yellow: {\n    background: \"radial-gradient(120% 140% at 50% 0%, #fff99a 0%, #ffdc32 42%, #c89100 100%)\",\n    foreground: \"#241b00\",\n    glow: \"rgba(255, 220, 50, .28)\",\n  },\n  pink: {\n    background: \"radial-gradient(120% 140% at 50% 0%, #ff9bdf 0%, #f04fbd 42%, #a81778 100%)\",\n    foreground: \"#fff\",\n    glow: \"rgba(240, 79, 189, .3)\",\n  },\n  cyan: {\n    background: \"radial-gradient(120% 140% at 50% 0%, #9dffff 0%, #28dce7 42%, #14828c 100%)\",\n    foreground: \"#062022\",\n    glow: \"rgba(40, 220, 231, .3)\",\n  },\n  white: {\n    background: \"radial-gradient(120% 140% at 50% 0%, #ffffff 0%, #f2f2f2 42%, #cdcdcd 100%)\",\n    foreground: \"#111111\",\n    glow: \"rgba(255, 255, 255, .3)\",\n  },\n  black: {\n    background: \"radial-gradient(120% 140% at 50% 0%, #555555 0%, #222222 42%, #000000 100%)\",\n    foreground: \"#fff\",\n    glow: \"rgba(0, 0, 0, .3)\",\n  },\n  teal: {\n    background: \"radial-gradient(120% 140% at 50% 0%, #6ee0c8 0%, #14a88e 42%, #0a6656 100%)\",\n    foreground: \"#fff\",\n    glow: \"rgba(20, 168, 142, .3)\",\n  },\n  indigo: {\n    background: \"radial-gradient(120% 140% at 50% 0%, #9aa4ff 0%, #5b5ff0 42%, #2c2a9e 100%)\",\n    foreground: \"#fff\",\n    glow: \"rgba(91, 95, 240, .3)\",\n  },\n  coral: {\n    background: \"radial-gradient(120% 140% at 50% 0%, #ffb09a 0%, #ff6f52 42%, #c43a22 100%)\",\n    foreground: \"#fff\",\n    glow: \"rgba(255, 111, 82, .3)\",\n  },\n  mint: {\n    background: \"radial-gradient(120% 140% at 50% 0%, #d4ffe6 0%, #7beeb0 42%, #2fae6c 100%)\",\n    foreground: \"#062414\",\n    glow: \"rgba(123, 238, 176, .3)\",\n  },\n  plum: {\n    background: \"radial-gradient(120% 140% at 50% 0%, #e28ad8 0%, #a8329b 42%, #5e1456 100%)\",\n    foreground: \"#fff\",\n    glow: \"rgba(168, 50, 155, .3)\",\n  },\n};\n\nconst sizeMap: Record<SizeVariant, string> = {\n  sm: \"h-9 px-5 text-sm\",\n  default: \"h-12 px-8 text-base\",\n  lg: \"h-16 px-12 text-xl\",\n};\n\nconst SoftButton = React.forwardRef<HTMLButtonElement, SoftButtonProps>(\n  ({ children, color = \"red\", size = \"default\", asChild = false, className, style, ...props }, ref) => {\n    const Comp = asChild ? Slot : \"button\";\n    const palette = colorMap[color];\n\n    return (\n      <Comp\n        ref={ref}\n        type={asChild ? undefined : \"button\"}\n        className={[\n          \"group relative inline-flex cursor-pointer items-center justify-center\",\n          \"gap-2 overflow-hidden whitespace-nowrap rounded-full font-semibold\",\n          \"transition-[filter,transform,box-shadow] duration-300 ease-out\",\n          \"active:translate-y-0 active:scale-[0.98] active:brightness-95\",\n          \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--soft-focus)] focus-visible:ring-offset-2 focus-visible:ring-offset-background\",\n          \"disabled:pointer-events-none disabled:opacity-50\",\n          \"[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0\",\n          sizeMap[size],\n          className,\n        ].join(\" \")}\n        style={{\n          ...style,\n          background: palette.background,\n          color: palette.foreground,\n          [\"--soft-glow\" as string]: palette.glow,\n          [\"--soft-focus\" as string]: palette.glow,\n        }}\n        {...props}\n      >\n        <span\n          aria-hidden\n          className=\"pointer-events-none absolute inset-[1px] rounded-[inherit] bg-[linear-gradient(180deg,rgba(255,255,255,.28),transparent_42%)] opacity-80 transition-opacity duration-300 group-hover:opacity-100\"\n        />\n        <span\n          aria-hidden\n          className=\"pointer-events-none absolute -inset-x-1/3 top-0 h-px bg-white/70 blur-sm transition-transform duration-500 group-hover:translate-x-1/3\"\n        />\n        {asChild ? (\n          <Slottable>{children}</Slottable>\n        ) : (\n          <span className=\"relative flex items-center gap-2\">{children}</span>\n        )}\n      </Comp>\n    );\n  },\n);\n\nSoftButton.displayName = \"SoftButton\";\n\nexport { SoftButton };\nexport type { SoftColor };\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}