{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "rainbow-button",
  "title": "Rainbow Button",
  "description": "CTA cycling the brand ramp, with a matching glow beneath.",
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "src/components/velora/rainbow-button.tsx",
      "content": "import { cn } from \"@/lib/utils\";\n\ninterface RainbowButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Seconds for one full colour cycle */\n  speed?: number;\n  children: React.ReactNode;\n}\n\n/**\n * CTA with a colour ramp that cycles through the brand gradient and casts a\n * matching glow beneath it. Zero dependencies — the motion is one keyframe.\n */\nexport function RainbowButton({\n  speed = 4,\n  children,\n  className,\n  style,\n  ...props\n}: RainbowButtonProps) {\n  return (\n    <button\n      {...props}\n      data-slot=\"rainbow-button\"\n      style={{ \"--rainbow-duration\": `${speed}s`, ...style } as React.CSSProperties}\n      className={cn(\n        \"group/rainbow relative inline-flex h-11 cursor-pointer items-center justify-center rounded-xl px-6 text-sm font-medium text-brand-foreground transition-transform focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand active:scale-[0.98] disabled:pointer-events-none disabled:opacity-50\",\n        // The ramp itself, plus a blurred copy behind it for the glow.\n        \"motion-safe:animate-rainbow bg-[linear-gradient(90deg,var(--brand-from),var(--brand-via),var(--brand-to),var(--brand-via),var(--brand-from))] bg-[length:200%_100%]\",\n        \"before:absolute before:inset-x-3 before:-bottom-1 before:-z-10 before:h-full motion-safe:before:animate-rainbow before:bg-[linear-gradient(90deg,var(--brand-from),var(--brand-via),var(--brand-to),var(--brand-via),var(--brand-from))] before:bg-[length:200%_100%] before:blur-lg before:transition-opacity before:content-[''] before:opacity-60 hover:before:opacity-90\",\n        className\n      )}\n    >\n      {children}\n    </button>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/velora/rainbow-button.tsx"
    }
  ],
  "cssVars": {
    "theme": {
      "color-brand": "var(--brand)",
      "color-brand-from": "var(--brand-from)",
      "color-brand-via": "var(--brand-via)",
      "color-brand-to": "var(--brand-to)",
      "animate-rainbow": "rainbow var(--rainbow-duration, 4s) linear infinite"
    },
    "light": {
      "brand": "oklch(0.546 0.245 263)",
      "brand-from": "oklch(0.546 0.245 263)",
      "brand-via": "oklch(0.623 0.214 260)",
      "brand-to": "oklch(0.685 0.169 237)"
    },
    "dark": {
      "brand": "oklch(0.623 0.214 260)",
      "brand-from": "oklch(0.623 0.214 260)",
      "brand-via": "oklch(0.707 0.165 255)",
      "brand-to": "oklch(0.746 0.16 233)"
    }
  },
  "css": {
    "@keyframes rainbow": {
      "from": {
        "background-position": "0% 50%"
      },
      "to": {
        "background-position": "200% 50%"
      }
    }
  },
  "type": "registry:ui"
}