{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "halo-badge-demo",
  "type": "registry:component",
  "registryDependencies": [
    "halo-badge"
  ],
  "files": [
    {
      "path": "registry/default/example/halo-badge-demo.tsx",
      "content": "\"use client\"\n\nimport { useState } from \"react\"\n\nimport { HaloBadge } from \"@/registry/default/ui/halo-badge\"\n\nexport default function HaloBadgeDemo() {\n  const [count, setCount] = useState(3)\n\n  return (\n    <main className=\"flex w-full flex-col items-center justify-center\">\n      <div className=\"w-full max-w-md space-y-10\">\n        <section className=\"space-y-3\">\n          <h2 className=\"font-semibold text-foreground text-lg tracking-tight\">\n            Counts & layout\n          </h2>\n          <p className=\"text-pretty text-muted-foreground text-sm\">\n            Tabular figures keep digit width steady when the count changes; the\n            label can animate when its text updates.\n          </p>\n          <div className=\"flex flex-wrap items-center gap-3\">\n            <HaloBadge tabularNums variant=\"secondary\">\n              {count}\n            </HaloBadge>\n            <button\n              className=\"rounded-md border border-border px-3 py-1.5 font-medium text-foreground text-sm fine-hover:hover:bg-muted\"\n              onClick={() => setCount((c) => (c >= 99 ? 1 : c + 7))}\n              type=\"button\"\n            >\n              Bump count\n            </button>\n          </div>\n        </section>\n\n        <section className=\"space-y-3\">\n          <h2 className=\"font-semibold text-foreground text-lg tracking-tight\">\n            Live & variants\n          </h2>\n          <p className=\"text-pretty text-muted-foreground text-sm\">\n            Live mode shows a leading status dot with a gentle pulse; reduced\n            motion preferences shorten or remove the animation.\n          </p>\n          <div className=\"flex flex-wrap items-center gap-2\">\n            <HaloBadge live variant=\"outline\">\n              Live\n            </HaloBadge>\n            <HaloBadge variant=\"default\">New</HaloBadge>\n            <HaloBadge variant=\"destructive\">Action</HaloBadge>\n            <HaloBadge layout={false} variant=\"ghost\">\n              Static label\n            </HaloBadge>\n          </div>\n        </section>\n      </div>\n    </main>\n  )\n}\n",
      "type": "registry:component"
    }
  ]
}