{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "halo-button-demo",
  "type": "registry:component",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "halo-button"
  ],
  "files": [
    {
      "path": "registry/default/example/halo-button-demo.tsx",
      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { Loader2 } from \"lucide-react\"\n\nimport { HaloButton } from \"@/registry/default/ui/halo-button\"\n\n/** How long the demo keeps `isLoading` true; wire your real mutation the same way. */\nconst MOCK_LOADING_MS = 2400\n\nexport default function HaloButtonDemo() {\n  const [loading, setLoading] = useState(false)\n  const [isContinueLoading, setIsContinueLoading] = useState(false)\n\n  function simulateAsync() {\n    setLoading(true)\n    window.setTimeout(() => setLoading(false), 2200)\n  }\n\n  return (\n    <div\n      className=\"mx-auto max-w-3xl space-y-8 px-4 py-2\"\n      id=\"halo-button-section\"\n    >\n      <div className=\"space-y-3 rounded-xl border bg-muted/30 p-6\">\n        <p className=\"font-medium text-muted-foreground text-sm\">\n          Default (translucent)\n        </p>\n        <div className=\"flex flex-wrap items-center gap-4\">\n          <HaloButton type=\"button\">Continue</HaloButton>\n          <HaloButton translucent={false} type=\"button\">\n            Solid surface\n          </HaloButton>\n        </div>\n      </div>\n\n      <div className=\"space-y-3 rounded-xl border bg-muted/30 p-6\">\n        <p className=\"font-medium text-muted-foreground text-sm\">\n          Loading state (async)\n        </p>\n        <p className=\"text-muted-foreground text-xs\">\n          Guard the click while loading, then clear after your mutation (here{\" \"}\n          <code className=\"rounded bg-muted px-1 py-0.5 font-mono text-[0.7rem]\">\n            MOCK_LOADING_MS\n          </code>\n          ).\n        </p>\n        <div className=\"dark flex min-h-[120px] flex-col items-center justify-center rounded-lg bg-background p-8 ring-1 ring-border/60\">\n          <div className=\"w-full max-w-2xl\">\n            <HaloButton\n              isLoading={isContinueLoading}\n              loadingText=\"Working on it…\"\n              onClick={() => {\n                if (isContinueLoading) {\n                  return\n                }\n                setIsContinueLoading(true)\n                window.setTimeout(\n                  () => setIsContinueLoading(false),\n                  MOCK_LOADING_MS\n                )\n              }}\n              type=\"button\"\n            >\n              Continue\n            </HaloButton>\n          </div>\n        </div>\n      </div>\n\n      <div className=\"space-y-3 rounded-xl border bg-muted/30 p-6\">\n        <p className=\"font-medium text-muted-foreground text-sm\">Loading</p>\n        <p className=\"text-muted-foreground text-xs\">\n          <code className=\"rounded bg-muted px-1 py-0.5 font-mono text-[0.7rem]\">\n            isLoading\n          </code>{\" \"}\n          shows{\" \"}\n          <code className=\"rounded bg-muted px-1 py-0.5 font-mono text-[0.7rem]\">\n            loadingText\n          </code>{\" \"}\n          and disables the control.\n        </p>\n        <div className=\"flex flex-wrap items-center gap-4\">\n          <HaloButton\n            isLoading={loading}\n            loadingCharDurationSec={0.22}\n            loadingStaggerSec={0.028}\n            loadingText=\"Processing…\"\n            onClick={simulateAsync}\n            type=\"button\"\n          >\n            Save\n          </HaloButton>\n        </div>\n      </div>\n\n      <div className=\"space-y-3 rounded-xl border bg-muted/30 p-6\">\n        <p className=\"font-medium text-muted-foreground text-sm\">\n          Non-string children\n        </p>\n        <p className=\"text-muted-foreground text-xs\">\n          Stagger applies only when the label is a string.\n        </p>\n        <div className=\"flex flex-wrap items-center gap-4\">\n          <HaloButton type=\"button\">\n            <span className=\"inline-flex items-center gap-2\">\n              <Loader2 aria-hidden className=\"size-4 opacity-70\" />\n              With icon\n            </span>\n          </HaloButton>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:component"
    }
  ]
}