{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pop-button",
  "title": "Pop Button",
  "description": "A playful 3D-style button with push-down animation effect.",
  "dependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/spell-ui/pop-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\nexport interface PopButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  color?: Color;\n  size?: SizeVariant;\n  children: React.ReactNode;\n  asChild?: boolean;\n}\n\nconst PopButton = React.forwardRef<HTMLButtonElement, PopButtonProps>(\n  (\n    { className, color = \"default\", size = \"default\", children, asChild = false, ...props },\n    ref,\n  ) => {\n    const Comp = asChild ? Slot : \"button\";\n\n    const baseClasses =\n      \"font-pop inline-flex select-none transition-all items-center justify-center whitespace-nowrap rounded-xl ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 text-primary-foreground active:border-b-2 active:scale-y-95 border-x-2 border-t-2 border-b-4 origin-bottom\";\n\n    const colors: Record<Color, string> = {\n      default:\n        \"bg-white hover:bg-gray-50 border-neutral-300 text-neutral-900 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:border-neutral-600 dark:text-neutral-100\",\n      blue: \"bg-blue-500 hover:bg-blue-600 border-blue-800 text-white\",\n      purple: \"bg-purple-500 hover:bg-purple-600 border-purple-800 text-white\",\n      pink: \"bg-pink-500 hover:bg-pink-600 border-pink-800 text-white\",\n      red: \"bg-red-500 hover:bg-red-600 border-red-800 text-white\",\n      orange: \"bg-orange-500 hover:bg-orange-600 border-orange-800 text-white\",\n      yellow: \"bg-yellow-500 hover:bg-yellow-600 border-yellow-800 text-white\",\n      green: \"bg-green-500 hover:bg-green-600 border-green-800 text-white\",\n      teal: \"bg-teal-500 hover:bg-teal-600 border-teal-800 text-white\",\n      cyan: \"bg-cyan-500 hover:bg-cyan-600 border-cyan-800 text-white\",\n      indigo: \"bg-indigo-500 hover:bg-indigo-600 border-indigo-800 text-white\",\n      violet: \"bg-violet-500 hover:bg-violet-600 border-violet-800 text-white\",\n      rose: \"bg-rose-500 hover:bg-rose-600 border-rose-800 text-white\",\n      amber: \"bg-amber-500 hover:bg-amber-600 border-amber-800 text-white\",\n      lime: \"bg-lime-500 hover:bg-lime-600 border-lime-800 text-white\",\n      sky: \"bg-sky-500 hover:bg-sky-600 border-sky-800 text-white\",\n      slate: \"bg-slate-500 hover:bg-slate-600 border-slate-800 text-white\",\n      gray: \"bg-gray-500 hover:bg-gray-600 border-gray-800 text-white\",\n      zinc: \"bg-zinc-500 hover:bg-zinc-600 border-zinc-800 text-white\",\n      neutral:\n        \"bg-neutral-500 hover:bg-neutral-600 border-neutral-800 text-white\",\n      stone: \"bg-stone-500 hover:bg-stone-600 border-stone-800 text-white\",\n      fuchsia:\n        \"bg-fuchsia-500 hover:bg-fuchsia-600 border-fuchsia-800 text-white\",\n      emerald:\n        \"bg-emerald-500 hover:bg-emerald-600 border-emerald-800 text-white\",\n    };\n\n    const sizes = {\n      sm: \"h-9 px-2 py-1 text-sm\",\n      default: \"h-10 px-4 py-2\",\n      lg: \"h-14 px-8 py-3 text-lg\",\n    };\n\n    return (\n      <Comp\n        ref={ref}\n        className={cn(\n          baseClasses,\n          colors[color],\n          sizes[size],\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </Comp>\n    );\n  },\n);\n\nPopButton.displayName = \"PopButton\";\n\nexport { PopButton };\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}