{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "halo-progress-demo",
  "type": "registry:component",
  "registryDependencies": [
    "halo-progress"
  ],
  "files": [
    {
      "path": "registry/default/example/halo-progress-demo.tsx",
      "content": "\"use client\"\n\nimport { useEffect, useState } from \"react\"\n\nimport { HaloProgress } from \"@/registry/default/ui/halo-progress\"\n\nexport default function HaloProgressDemo() {\n  const [pct, setPct] = useState(0)\n\n  useEffect(() => {\n    if (pct >= 100) {\n      return\n    }\n    const id = window.setInterval(() => {\n      setPct((p) => Math.min(100, p + 2))\n    }, 120)\n    return () => window.clearInterval(id)\n  }, [pct])\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            Determinate\n          </h2>\n          <p className=\"text-pretty text-muted-foreground text-sm\">\n            Shows a known completion percentage with an optional label and\n            numeric value — suited to uploads and other bounded tasks.\n          </p>\n          <HaloProgress\n            label=\"Uploading\"\n            showValue\n            value={pct === 100 ? 100 : pct}\n          />\n          <div className=\"flex gap-2\">\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={() => setPct(0)}\n              type=\"button\"\n            >\n              Reset\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            Indeterminate\n          </h2>\n          <p className=\"text-pretty text-muted-foreground text-sm\">\n            Use when the duration is unknown: the bar loops until the task\n            finishes or you switch to a determinate value.\n          </p>\n          <HaloProgress value={null} />\n        </section>\n      </div>\n    </main>\n  )\n}\n",
      "type": "registry:component"
    }
  ]
}