{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "metal-button-demo",
  "type": "registry:component",
  "registryDependencies": [
    "metal-button"
  ],
  "files": [
    {
      "path": "registry/default/example/metal-button-demo.tsx",
      "content": "\"use client\"\n\nimport { useEffect, useId, useRef, useState, type ReactNode } from \"react\"\nimport { ArrowRight, Pause, Play, Sparkles, Wand2, Zap } from \"lucide-react\"\nimport type { MetalFxPreset } from \"metal-fx\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  MetalButton,\n  MetalIconButton,\n} from \"@/registry/default/ui/metal-button\"\n\nconst PRESET_ROW: { key: MetalFxPreset; label: string }[] = [\n  { key: \"chromatic\", label: \"Chromatic\" },\n  { key: \"silver\", label: \"Silver\" },\n  { key: \"gold\", label: \"Gold\" },\n]\n\nconst METAL_VARIANTS = [\"button\", \"circle\"] as const\n\nconst STRENGTH_ROW = [\n  { value: 0.5, label: \"50%\" },\n  { value: 0.75, label: \"75%\" },\n  { value: 0.9, label: \"90%\" },\n  { value: 1, label: \"100%\" },\n] 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=\"text-foreground text-sm font-semibold tracking-tight\">\n          {title}\n        </h3>\n        {description ? (\n          <p className=\"text-muted-foreground text-xs leading-relaxed text-pretty\">\n            {description}\n          </p>\n        ) : null}\n      </div>\n      {children}\n    </section>\n  )\n}\n\nexport default function MetalButtonDemo() {\n  const id = useId()\n  const chipRef = useRef<HTMLButtonElement>(null)\n  const [preset, setPreset] = useState<MetalFxPreset>(\"chromatic\")\n  const [metalPaused, setMetalPaused] = useState(false)\n  const [respectsReducedMotion, setRespectsReducedMotion] = useState(false)\n\n  const activePresetLabel =\n    PRESET_ROW.find((row) => row.key === preset)?.label ?? \"Chromatic\"\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 effectivePaused = metalPaused || 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=\"text-muted-foreground text-[11px] font-medium tracking-[0.2em] uppercase\">\n          Liquid metal\n        </p>\n        <h2 className=\"text-foreground text-xl font-semibold tracking-tight md:text-2xl\">\n          Button + animated metal ring\n        </h2>\n        <p className=\"text-muted-foreground mx-auto max-w-lg text-sm leading-relaxed text-pretty\">\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\">metalFxClassName</span> styles\n          the MetalFx wrapper. Use{\" \"}\n          <span className=\"text-foreground/90\">preset</span>,{\" \"}\n          <span className=\"text-foreground/90\">metalVariant</span>, and{\" \"}\n          <span className=\"text-foreground/90\">paused</span> to tune the effect.\n        </p>\n      </header>\n\n      <Section\n        description=\"Outline and secondary read well against the ring; default adds a stronger fill.\"\n        title=\"Button variants\"\n      >\n        <div className=\"flex flex-wrap items-center justify-center gap-3\">\n          <MetalButton preset={preset} type=\"button\" variant=\"default\">\n            Continue\n          </MetalButton>\n          <MetalButton preset={preset} type=\"button\" variant=\"outline\">\n            Outline\n          </MetalButton>\n          <MetalButton preset={preset} type=\"button\" variant=\"secondary\">\n            Secondary\n          </MetalButton>\n          <MetalButton preset={preset} type=\"button\" variant=\"ghost\">\n            Ghost\n          </MetalButton>\n        </div>\n      </Section>\n\n      <Section\n        description=\"metal-fx shares one WebGL palette for the whole page — pick a preset, then watch the ring update on the preview below.\"\n        title=\"Metal preset\"\n      >\n        <div className=\"flex flex-col items-center gap-4\">\n          <fieldset\n            aria-label=\"Metal preset\"\n            className=\"m-0 flex min-w-0 flex-wrap items-center justify-center gap-2 border-0 p-0\"\n          >\n            {PRESET_ROW.map(({ key, label }) => (\n              <Button\n                aria-pressed={preset === key}\n                key={key}\n                onClick={() => setPreset(key)}\n                size=\"sm\"\n                type=\"button\"\n                variant={preset === key ? \"default\" : \"outline\"}\n              >\n                {label}\n              </Button>\n            ))}\n          </fieldset>\n          <div className=\"flex w-full justify-center rounded-xl bg-neutral-950 px-6 py-8\">\n            <MetalButton\n              preset={preset}\n              theme=\"dark\"\n              type=\"button\"\n              variant=\"default\"\n            >\n              {activePresetLabel}\n            </MetalButton>\n          </div>\n        </div>\n      </Section>\n\n      <Section\n        description=\"button is a pill ring; circle uses a thicker ring suited to compact controls.\"\n        title=\"Metal variant\"\n      >\n        <div className=\"flex flex-wrap items-center justify-center gap-3\">\n          {METAL_VARIANTS.map((variant) => (\n            <MetalButton\n              key={variant}\n              metalVariant={variant}\n              preset={preset}\n              type=\"button\"\n              variant=\"outline\"\n            >\n              <span className=\"font-mono text-xs\">{variant}</span>\n            </MetalButton>\n          ))}\n        </div>\n      </Section>\n\n      <Section\n        description=\"Strength scales shader opacity and glow; the animation keeps running underneath.\"\n        title=\"Strength\"\n      >\n        <div className=\"flex flex-wrap items-center justify-center gap-3\">\n          {STRENGTH_ROW.map(({ value, label }) => (\n            <MetalButton\n              key={label}\n              preset={preset}\n              strength={value}\n              type=\"button\"\n              variant=\"outline\"\n            >\n              <span className=\"font-mono text-xs\">{label}</span>\n            </MetalButton>\n          ))}\n        </div>\n      </Section>\n\n      <Section\n        description=\"Icon buttons default to icon sizing and circle variant. The Wand icon disables the halo glow.\"\n        title=\"Icon buttons\"\n      >\n        <div className=\"flex flex-wrap items-center justify-center gap-3\">\n          <MetalIconButton\n            aria-label=\"Sparkles\"\n            preset={preset}\n            title=\"Sparkles\"\n            type=\"button\"\n            variant=\"outline\"\n          >\n            <Sparkles aria-hidden className=\"size-3.5\" />\n          </MetalIconButton>\n          <MetalIconButton\n            aria-label=\"Zap\"\n            preset={preset}\n            title=\"Zap\"\n            type=\"button\"\n            variant=\"secondary\"\n          >\n            <Zap aria-hidden className=\"size-3.5\" />\n          </MetalIconButton>\n          <MetalIconButton\n            aria-label=\"Wand\"\n            disableGlow\n            preset={preset}\n            title=\"Wand\"\n            type=\"button\"\n            variant=\"outline\"\n          >\n            <Wand2 aria-hidden className=\"size-3.5\" />\n          </MetalIconButton>\n        </div>\n      </Section>\n\n      <Section\n        description=\"Toggle the shader without hiding the button. Respects prefers-reduced-motion. Dark-mode reflections hit the chip ref.\"\n        title=\"Interactive\"\n      >\n        <div className=\"flex flex-col items-center gap-4 sm:flex-row sm:justify-center\">\n          <button\n            className=\"border-border bg-muted/50 text-muted-foreground rounded-full border px-3 py-1.5 text-xs\"\n            ref={chipRef}\n            type=\"button\"\n          >\n            Tools\n          </button>\n          <MetalButton\n            className=\"gap-2 pr-5 pl-6\"\n            paused={effectivePaused}\n            preset={preset}\n            reflectionTargets={[chipRef]}\n            type=\"button\"\n            variant=\"outline\"\n          >\n            Get started\n            <ArrowRight aria-hidden className=\"size-4 opacity-80\" />\n          </MetalButton>\n          <MetalIconButton\n            aria-label={effectivePaused ? \"Play metal\" : \"Pause metal\"}\n            aria-pressed={!metalPaused}\n            onClick={() => setMetalPaused((v) => !v)}\n            paused={effectivePaused}\n            preset={preset}\n            title={effectivePaused ? \"Play metal\" : \"Pause metal\"}\n            type=\"button\"\n            variant=\"secondary\"\n          >\n            {effectivePaused ? (\n              <Play aria-hidden className=\"size-3.5\" />\n            ) : (\n              <Pause aria-hidden className=\"size-3.5\" />\n            )}\n          </MetalIconButton>\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 — metal animation stays paused.\"\n            : \"Tip: pause freezes the ring on the last frame; the button stays clickable.\"}\n        </p>\n      </Section>\n    </div>\n  )\n}\n",
      "type": "registry:component"
    }
  ]
}