{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "rich-button",
  "title": "Rich Button",
  "description": "A button component with rich styling and color variants.",
  "dependencies": [
    "@radix-ui/react-slot"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/spell-ui/rich-button.tsx",
      "content": "import * as React from \"react\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { cn } from \"@/lib/utils\";\n\ntype Color =\n  | \"default\"\n  | \"blue\"\n  | \"purple\"\n  | \"pink\"\n  | \"red\"\n  | \"orange\"\n  | \"yellow\"\n  | \"green\"\n  | \"teal\"\n  | \"cyan\"\n  | \"indigo\"\n  | \"violet\"\n  | \"rose\"\n  | \"amber\"\n  | \"lime\"\n  | \"sky\"\n  | \"slate\"\n  | \"gray\"\n  | \"zinc\"\n  | \"neutral\"\n  | \"stone\"\n  | \"fuchsia\"\n  | \"emerald\";\n\ntype SizeVariant = \"sm\" | \"default\" | \"lg\";\n\ninterface RichButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  children: React.ReactNode;\n  color?: Color;\n  size?: SizeVariant;\n  className?: string;\n  asChild?: boolean;\n}\n\nconst colorMap: Record<Color, string> = {\n  default:\n    \"from-zinc-900/85 to-zinc-900 dark:from-zinc-100/85 dark:to-zinc-100\",\n  emerald: \"from-emerald-600/85 to-emerald-600 dark:from-emerald-600/75\",\n  blue: \"from-blue-600/85 to-blue-600 dark:from-blue-600/75\",\n  purple: \"from-purple-600/85 to-purple-600 dark:from-purple-600/75\",\n  pink: \"from-pink-600/85 to-pink-600 dark:from-pink-600/75\",\n  red: \"from-red-600/85 to-red-600 dark:from-red-600/75\",\n  orange: \"from-orange-600/85 to-orange-600 dark:from-orange-600/75\",\n  yellow: \"from-yellow-600/85 to-yellow-600 dark:from-yellow-600/75\",\n  green: \"from-green-600/85 to-green-600 dark:from-green-600/75\",\n  teal: \"from-teal-600/85 to-teal-600 dark:from-teal-600/75\",\n  cyan: \"from-cyan-600/85 to-cyan-600 dark:from-cyan-600/75\",\n  indigo: \"from-indigo-600/85 to-indigo-600 dark:from-indigo-600/75\",\n  violet: \"from-violet-600/85 to-violet-600 dark:from-violet-600/75\",\n  rose: \"from-rose-600/85 to-rose-600 dark:from-rose-600/75\",\n  amber: \"from-amber-600/85 to-amber-600 dark:from-amber-600/75\",\n  lime: \"from-lime-600/85 to-lime-600 dark:from-lime-600/75\",\n  sky: \"from-sky-600/85 to-sky-600 dark:from-sky-600/75\",\n  slate: \"from-slate-600/85 to-slate-600 dark:from-slate-600/75\",\n  gray: \"from-gray-600/85 to-gray-600 dark:from-gray-600/75\",\n  zinc: \"from-zinc-700/85 to-zinc-700 dark:from-zinc-700/75\",\n  neutral: \"from-neutral-600/85 to-neutral-600 dark:from-neutral-600/75\",\n  stone: \"from-stone-600/85 to-stone-600 dark:from-stone-600/75\",\n  fuchsia: \"from-fuchsia-600/85 to-fuchsia-600 dark:from-fuchsia-600/75\",\n};\n\nconst textShadowMap: Record<Color, string> = {\n  default:\n    \"[text-shadow:0_1px_0_rgb(0,0,0)] dark:[text-shadow:0_1px_0_rgb(255,255,255)]\",\n  emerald: \"[text-shadow:0_1px_0_var(--color-emerald-800)]\",\n  blue: \"[text-shadow:0_1px_0_var(--color-blue-800)]\",\n  purple: \"[text-shadow:0_1px_0_var(--color-purple-800)]\",\n  pink: \"[text-shadow:0_1px_0_var(--color-pink-800)]\",\n  red: \"[text-shadow:0_1px_0_var(--color-red-800)]\",\n  orange: \"[text-shadow:0_1px_0_var(--color-orange-800)]\",\n  yellow: \"[text-shadow:0_1px_0_var(--color-yellow-800)]\",\n  green: \"[text-shadow:0_1px_0_var(--color-green-800)]\",\n  teal: \"[text-shadow:0_1px_0_var(--color-teal-800)]\",\n  cyan: \"[text-shadow:0_1px_0_var(--color-cyan-800)]\",\n  indigo: \"[text-shadow:0_1px_0_var(--color-indigo-800)]\",\n  violet: \"[text-shadow:0_1px_0_var(--color-violet-800)]\",\n  rose: \"[text-shadow:0_1px_0_var(--color-rose-800)]\",\n  amber: \"[text-shadow:0_1px_0_var(--color-amber-800)]\",\n  lime: \"[text-shadow:0_1px_0_var(--color-lime-800)]\",\n  sky: \"[text-shadow:0_1px_0_var(--color-sky-800)]\",\n  slate: \"[text-shadow:0_1px_0_var(--color-slate-800)]\",\n  gray: \"[text-shadow:0_1px_0_var(--color-gray-800)]\",\n  zinc: \"[text-shadow:0_1px_0_var(--color-zinc-800)]\",\n  neutral: \"[text-shadow:0_1px_0_var(--color-neutral-800)]\",\n  stone: \"[text-shadow:0_1px_0_var(--color-stone-800)]\",\n  fuchsia: \"[text-shadow:0_1px_0_var(--color-fuchsia-800)]\",\n};\n\nconst sizeMap: Record<SizeVariant, string> = {\n  sm: \"h-8 rounded-md gap-1.5 px-3 text-sm\",\n  default: \"h-9 px-4 py-2 text-sm rounded-md\",\n  lg: \"h-10 rounded-md px-6 text-base\",\n};\n\nconst RichButton = React.forwardRef<HTMLButtonElement, RichButtonProps>(\n  (\n    {\n      children,\n      color = \"default\",\n      size = \"default\",\n      className,\n      asChild = false,\n      ...props\n    },\n    ref,\n  ) => {\n    const Comp = asChild ? Slot : \"button\";\n    const colorClasses = colorMap[color];\n    const textShadowClasses = textShadowMap[color];\n    const sizeClasses = sizeMap[size];\n    const textColor = color === \"default\"\n      ? \"text-white dark:text-zinc-900\"\n      : \"text-white\";\n\n    return (\n      <Comp\n        ref={ref}\n        className={cn(\n          \"cursor-pointer inline-flex items-center justify-center gap-2 whitespace-nowrap font-medium focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 inset-shadow-2xs inset-shadow-white/25 bg-linear-to-b dark:bg-linear-to-t border border-zinc-950/35 shadow-md shadow-zinc-950/20 ring-0 transition-[filter] duration-200 hover:brightness-110 active:brightness-95 dark:border-0 dark:border-zinc-950/50\",\n          colorClasses,\n          sizeClasses,\n          textColor,\n          className,\n        )}\n        {...props}\n      >\n        {asChild\n          ? children\n          : typeof children === \"string\"\n          ? (\n            <span className={cn(\"relative\", textShadowClasses)}>\n              {children}\n            </span>\n          )\n          : (\n            <div\n              className={cn(\n                \"relative flex items-center gap-2\",\n                textShadowClasses,\n              )}\n            >\n              {children}\n            </div>\n          )}\n      </Comp>\n    );\n  },\n);\n\nRichButton.displayName = \"RichButton\";\n\nexport { RichButton };\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}