{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "progress-demo",
  "title": "Progress: Bar, segments and indeterminate",
  "description": "All three styles driven by one value.",
  "dependencies": [],
  "registryDependencies": [
    "https://ui.cuelark.com/r/button.json",
    "https://ui.cuelark.com/r/progress.json"
  ],
  "files": [
    {
      "path": "src/registry/cuelark/examples/progress-demo.tsx",
      "content": "import * as React from \"react\";\n\nimport { Button } from \"@/registry/cuelark/ui/button\";\nimport { Progress } from \"@/registry/cuelark/ui/progress\";\n\nexport default function ProgressDemo() {\n  const [value, setValue] = React.useState(35);\n  return (\n    <div className=\"grid w-full max-w-sm gap-6\">\n      <div className=\"grid gap-2\">\n        <div className=\"flex justify-between text-sm\">\n          <span>Uploading</span>\n          <span className=\"font-mono text-muted-foreground tabular-nums\">{value}%</span>\n        </div>\n        <Progress value={value} aria-label=\"Upload progress\" />\n      </div>\n      <Progress value={value} segments={12} size=\"lg\" aria-label=\"Storage used\" />\n      <Progress value={null} size=\"sm\" aria-label=\"Loading\" />\n      <div className=\"flex gap-2\">\n        <Button size=\"sm\" variant=\"secondary\" onClick={() => setValue((v) => Math.max(0, v - 15))}>\n          −15\n        </Button>\n        <Button size=\"sm\" variant=\"secondary\" onClick={() => setValue((v) => Math.min(100, v + 15))}>\n          +15\n        </Button>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "categories": [
    "progress",
    "example"
  ],
  "type": "registry:component"
}