{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "cosmic-button",
  "type": "registry:ui",
  "description": "Animated button/link with cosmic gradient border effect, renders as anchor or button",
  "files": [
    {
      "path": "registry/default/ui/cosmic-button.tsx",
      "content": "\"use client\"\n\nimport type { ComponentPropsWithoutRef } from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\n/**\n * Requires these keyframes and utilities in your CSS (e.g. global CSS or Tailwind):\n *\n * @keyframes cosmic-spin {\n *   from { transform: rotate(0deg); }\n *   to { transform: rotate(360deg); }\n * }\n * @keyframes cosmic-spin-slow {\n *   from { transform: rotate(0deg); }\n *   to { transform: rotate(-360deg); }\n * }\n * @utility animate-cosmic-spin {\n *   animation: cosmic-spin 3s linear infinite;\n * }\n * @utility animate-cosmic-spin-slow {\n *   animation: cosmic-spin-slow 5s linear infinite;\n * }\n */\n\nexport type CosmicButtonProps<E extends \"a\" | \"button\" = \"a\"> = {\n  /** The HTML element to render as. @default \"a\" */\n  as?: E\n} & ComponentPropsWithoutRef<E>\n\n/**\n * An animated button/link with a cosmic gradient border effect.\n * Renders as an anchor by default; use `as=\"button\"` for button behavior.\n *\n * @example\n * // As link (default)\n * <CosmicButton href=\"/about\">About</CosmicButton>\n *\n * @example\n * // As button\n * <CosmicButton as=\"button\" onClick={handleClick}>Submit</CosmicButton>\n */\nexport function CosmicButton<E extends \"a\" | \"button\" = \"a\">({\n  as,\n  className,\n  children,\n  ...props\n}: CosmicButtonProps<E>) {\n  const Element = as ?? \"a\"\n  const isAnchor = Element === \"a\"\n\n  const baseClassName = cn(\n    \"group/cosmic relative inline-flex min-h-11 min-w-11 items-center justify-center gap-3 rounded-[15px] p-[3px] transition-transform  \",\n    \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#adfa1b] focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-[#0c0912]\",\n    className\n  )\n\n  const content = (\n    <>\n      {/* Animated cosmic border - enlarges on hover */}\n      <span className=\"absolute inset-0 overflow-hidden rounded-[15px] transition-all duration-300 ease-out group-hover/cosmic:inset-[-3px] group-hover/cosmic:rounded-[15px]\">\n        <span className=\"absolute inset-[-200%] animate-cosmic-spin bg-[conic-gradient(from_0deg,#adfa1b,#c9ff63,#efffb7,#8cd413,#6f9f19,#92d61b,#adfa1b)] opacity-95\" />\n      </span>\n\n      {/* Noise/texture overlay on the border - enlarges on hover */}\n      <span className=\"absolute inset-0 overflow-hidden rounded-[15px] opacity-45 mix-blend-soft-light transition-all duration-300 ease-out group-hover/cosmic:inset-[-3px] group-hover/cosmic:rounded-[15px] dark:opacity-60 dark:mix-blend-overlay\">\n        <span className=\"absolute inset-[-200%] animate-cosmic-spin-slow bg-[conic-gradient(from_180deg,#efffb7_0%,transparent_30%,#adfa1b_50%,transparent_70%,#7fbf17_100%)]\" />\n      </span>\n\n      {/* Theme-aware inner background */}\n      <span className=\"relative z-10 flex items-center gap-3 rounded-[12px] bg-muted px-5 py-2.5 shadow-[inset_0_1px_0_rgba(255,255,255,0.72),inset_0_-1px_0_rgba(15,23,42,0.08),0_1px_1px_rgba(15,23,42,0.08),0_8px_24px_rgba(15,23,42,0.14)] transition-all duration-300 group-hover/cosmic:shadow-[inset_0_1px_0_rgba(255,255,255,0.82),inset_0_-1px_0_rgba(15,23,42,0.12),0_2px_6px_rgba(15,23,42,0.14),0_12px_34px_rgba(15,23,42,0.2)] dark:shadow-[inset_0_1px_0_rgba(255,255,255,0.12),inset_0_-1px_0_rgba(0,0,0,0.5),0_1px_1px_rgba(0,0,0,0.45),0_10px_28px_rgba(0,0,0,0.35)] dark:group-hover/cosmic:shadow-[inset_0_1px_0_rgba(255,255,255,0.16),inset_0_-1px_0_rgba(0,0,0,0.6),0_2px_6px_rgba(0,0,0,0.55),0_14px_34px_rgba(0,0,0,0.42)] active:scale-[0.98]\">\n        <span className=\"font-medium text-base tracking-wide text-foreground\">\n          {children ?? \"Placeholder text\"}\n        </span>\n      </span>\n    </>\n  )\n\n  if (isAnchor) {\n    const { href, rel, target, ...rest } =\n      props as ComponentPropsWithoutRef<\"a\">\n    return (\n      <a\n        className={baseClassName}\n        href={href ?? \"https://aisdkagents.com\"}\n        rel={rel ?? \"noopener noreferrer\"}\n        target={target ?? \"_blank\"}\n        {...rest}\n      >\n        {content}\n      </a>\n    )\n  }\n\n  return (\n    <button\n      className={baseClassName}\n      {...(props as ComponentPropsWithoutRef<\"button\">)}\n    >\n      {content}\n    </button>\n  )\n}\n",
      "type": "registry:ui"
    }
  ]
}