{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "border-beam-button-demo",
  "type": "registry:component",
  "registryDependencies": [
    "border-beam-button"
  ],
  "files": [
    {
      "path": "registry/default/example/border-beam-button-demo.tsx",
      "content": "\"use client\"\n\nimport { useEffect, useId, useState, type ReactNode } from \"react\"\nimport type { BorderBeamColorVariant } from \"border-beam\"\nimport { ArrowRight, Pause, Play, Sparkles, Wand2, Zap } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  BorderBeamButton,\n  BorderBeamIconButton,\n} from \"@/registry/default/ui/border-beam-button\"\n\nconst COLOR_ROW: { key: BorderBeamColorVariant; label: string }[] = [\n  { key: \"colorful\", label: \"Colorful\" },\n  { key: \"ocean\", label: \"Ocean\" },\n  { key: \"sunset\", label: \"Sunset\" },\n  { key: \"mono\", label: \"Mono\" },\n]\n\nconst BEAM_SIZES = [\"sm\", \"md\", \"line\"] as const\n\nfunction Section({\n  title,\n  description,\n  children,\n}: {\n  title: string\n  description?: string\n  children: ReactNode\n}) {\n  return (\n    <section className=\"space-y-4\">\n      <div className=\"space-y-1\">\n        <h3 className=\"font-semibold text-foreground text-sm tracking-tight\">\n          {title}\n        </h3>\n        {description ? (\n          <p className=\"text-pretty text-muted-foreground text-xs leading-relaxed\">\n            {description}\n          </p>\n        ) : null}\n      </div>\n      {children}\n    </section>\n  )\n}\n\nexport default function BorderBeamButtonDemo() {\n  const id = useId()\n  const [beamActive, setBeamActive] = useState(true)\n  const [respectsReducedMotion, setRespectsReducedMotion] = useState(false)\n\n  useEffect(() => {\n    const mq = window.matchMedia(\"(prefers-reduced-motion: reduce)\")\n    const sync = () => setRespectsReducedMotion(mq.matches)\n    sync()\n    mq.addEventListener(\"change\", sync)\n    return () => mq.removeEventListener(\"change\", sync)\n  }, [])\n\n  const effectiveActive = beamActive && !respectsReducedMotion\n\n  return (\n    <div className=\"mx-auto w-full max-w-3xl space-y-10 px-4 py-8 md:px-6\">\n      <header className=\"space-y-2 text-center\">\n        <p className=\"font-medium text-[11px] text-muted-foreground uppercase tracking-[0.2em]\">\n          Border beam\n        </p>\n        <h2 className=\"font-semibold text-foreground text-xl tracking-tight md:text-2xl\">\n          Button + traveling glow\n        </h2>\n        <p className=\"mx-auto max-w-lg text-pretty text-muted-foreground text-sm leading-relaxed\">\n          <span className=\"text-foreground/90\">className</span> targets the\n          shadcn <span className=\"text-foreground/90\">Button</span>;{\" \"}\n          <span className=\"text-foreground/90\">borderBeamClassName</span> styles\n          the beam wrapper. Use{\" \"}\n          <span className=\"text-foreground/90\">colorVariant</span>,{\" \"}\n          <span className=\"text-foreground/90\">beamSize</span>, and{\" \"}\n          <span className=\"text-foreground/90\">active</span> to tune the effect.\n        </p>\n      </header>\n\n      <div className=\"\">\n        <Section\n          description=\"Outline and secondary read well against the beam; default adds a stronger fill.\"\n          title=\"Button variants\"\n        >\n          <div className=\"flex flex-wrap items-center justify-center gap-3\">\n            <BorderBeamButton type=\"button\" variant=\"default\">\n              Continue\n            </BorderBeamButton>\n            <BorderBeamButton type=\"button\" variant=\"outline\">\n              Outline\n            </BorderBeamButton>\n            <BorderBeamButton type=\"button\" variant=\"secondary\">\n              Secondary\n            </BorderBeamButton>\n            <BorderBeamButton type=\"button\" variant=\"ghost\">\n              Ghost\n            </BorderBeamButton>\n          </div>\n        </Section>\n      </div>\n\n      <div className=\"\">\n        <Section\n          description=\"Same outline button; swap the beam palette.\"\n          title=\"Beam color\"\n        >\n          <div className=\"flex flex-wrap items-center justify-center gap-3\">\n            {COLOR_ROW.map(({ key, label }) => (\n              <BorderBeamButton\n                colorVariant={key}\n                key={key}\n                type=\"button\"\n                variant=\"outline\"\n              >\n                {label}\n              </BorderBeamButton>\n            ))}\n          </div>\n        </Section>\n      </div>\n\n      <div className=\"\">\n        <Section\n          description=\"sm keeps a tight glow on controls; md is fuller; line is a bottom traveling accent.\"\n          title=\"Beam size\"\n        >\n          <div className=\"flex flex-wrap items-center justify-center gap-3\">\n            {BEAM_SIZES.map((size) => (\n              <BorderBeamButton\n                beamSize={size}\n                key={size}\n                type=\"button\"\n                variant=\"outline\"\n              >\n                <span className=\"font-mono text-xs\">{size}</span>\n              </BorderBeamButton>\n            ))}\n          </div>\n        </Section>\n      </div>\n\n      <div className=\"\">\n        <Section\n          description=\"Icon buttons default to icon sizing; pair with lucide icons.\"\n          title=\"Icon buttons\"\n        >\n          <div className=\"flex flex-wrap items-center justify-center gap-3\">\n            <BorderBeamIconButton\n              aria-label=\"Sparkles\"\n              colorVariant=\"sunset\"\n              title=\"Sparkles\"\n              type=\"button\"\n              variant=\"outline\"\n            >\n              <Sparkles aria-hidden className=\"size-3.5\" />\n            </BorderBeamIconButton>\n            <BorderBeamIconButton\n              aria-label=\"Zap\"\n              colorVariant=\"ocean\"\n              title=\"Zap\"\n              type=\"button\"\n              variant=\"secondary\"\n            >\n              <Zap aria-hidden className=\"size-3.5\" />\n            </BorderBeamIconButton>\n            <BorderBeamIconButton\n              aria-label=\"Wand\"\n              colorVariant=\"mono\"\n              staticColors\n              title=\"Wand\"\n              type=\"button\"\n              variant=\"outline\"\n            >\n              <Wand2 aria-hidden className=\"size-3.5\" />\n            </BorderBeamIconButton>\n          </div>\n        </Section>\n      </div>\n\n      <div className=\"\">\n        <Section\n          description=\"Toggle the beam without hiding the button. Respects prefers-reduced-motion.\"\n          title=\"Interactive\"\n        >\n          <div className=\"flex flex-col items-center gap-4 sm:flex-row sm:justify-center\">\n            <BorderBeamButton\n              active={effectiveActive}\n              className=\"gap-2 pr-5 pl-6\"\n              colorVariant=\"colorful\"\n              type=\"button\"\n              variant=\"outline\"\n            >\n              Get started\n              <ArrowRight aria-hidden className=\"size-4 opacity-80\" />\n            </BorderBeamButton>\n            <BorderBeamIconButton\n              aria-label={effectiveActive ? \"Pause beam\" : \"Play beam\"}\n              aria-pressed={beamActive}\n              colorVariant=\"ocean\"\n              onClick={() => setBeamActive((v) => !v)}\n              title={effectiveActive ? \"Pause beam\" : \"Play beam\"}\n              type=\"button\"\n              variant=\"secondary\"\n            >\n              {effectiveActive ? (\n                <Pause aria-hidden className=\"size-3.5\" />\n              ) : (\n                <Play aria-hidden className=\"size-3.5\" />\n              )}\n            </BorderBeamIconButton>\n          </div>\n          <p\n            className={cn(\n              \"text-center text-xs\",\n              respectsReducedMotion\n                ? \"text-amber-600 dark:text-amber-400\"\n                : \"text-muted-foreground\"\n            )}\n            id={`${id}-hint`}\n          >\n            {respectsReducedMotion\n              ? \"Reduced motion is on — beam animation stays off.\"\n              : \"Tip: pause leaves the button fully clickable; the glow stops.\"}\n          </p>\n        </Section>\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:component"
    }
  ]
}