{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "feature-poll-demo",
  "type": "registry:component",
  "registryDependencies": [
    "feature-poll"
  ],
  "files": [
    {
      "path": "registry/default/example/feature-poll-demo.tsx",
      "content": "\"use client\"\n\nimport { useState } from \"react\"\n\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\n\nimport { FeaturePoll } from \"../ui/feature-poll\"\n\nconst features = [\n  {\n    id: \"speed\",\n    label: \"Faster builds\",\n    description: \"Reduce compile and CI time\",\n  },\n  {\n    id: \"dx\",\n    label: \"Better DX\",\n    description: \"Improved tooling and workflows\",\n  },\n  {\n    id: \"docs\",\n    label: \"Clearer docs\",\n    description: \"More examples and guides\",\n  },\n  { id: \"a11y\", label: \"Accessibility\", description: \"Stronger a11y defaults\" },\n]\n\nfunction FeaturePollBasicExample() {\n  const [selected, setSelected] = useState<string>(\"\")\n\n  return (\n    <div className=\"w-full max-w-lg\">\n      <FeaturePoll.Root\n        onValueChange={(value) =>\n          setSelected(Array.isArray(value) ? (value[0] ?? \"\") : value)\n        }\n        value={selected}\n      >\n        <FeaturePoll.Header>\n          <FeaturePoll.Title>Which feature matters most?</FeaturePoll.Title>\n          <FeaturePoll.Description>\n            Pick one option to help us prioritize the roadmap.\n          </FeaturePoll.Description>\n        </FeaturePoll.Header>\n\n        <FeaturePoll.Options>\n          {features.map((feature) => (\n            <FeaturePoll.Option key={feature.id} value={feature.id}>\n              <FeaturePoll.Indicator />\n              <div className=\"flex flex-1 flex-col gap-0.5\">\n                <FeaturePoll.Label>{feature.label}</FeaturePoll.Label>\n                <span className=\"text-muted-foreground text-xs\">\n                  {feature.description}\n                </span>\n              </div>\n            </FeaturePoll.Option>\n          ))}\n        </FeaturePoll.Options>\n      </FeaturePoll.Root>\n    </div>\n  )\n}\n\nfunction FeaturePollWithResultsExample() {\n  const [selected, setSelected] = useState<string>(\"\")\n  const [hasVoted, setHasVoted] = useState(false)\n\n  const votes = {\n    speed: 42,\n    dx: 28,\n    docs: 30,\n    a11y: 18,\n  }\n\n  return (\n    <Card className=\"w-full max-w-lg\">\n      <CardHeader>\n        <CardTitle>Vote for the next release focus</CardTitle>\n        <CardDescription>\n          Results appear after you submit your vote.\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <FeaturePoll.Root\n          hasVoted={hasVoted}\n          onValueChange={(value) =>\n            setSelected(Array.isArray(value) ? (value[0] ?? \"\") : value)\n          }\n          showResults\n          value={selected}\n          votes={votes}\n        >\n          <FeaturePoll.Options>\n            {features.map((feature) => (\n              <FeaturePoll.Option key={feature.id} value={feature.id}>\n                <FeaturePoll.Indicator />\n                <div className=\"flex flex-1 items-center justify-between gap-2\">\n                  <FeaturePoll.Label>{feature.label}</FeaturePoll.Label>\n                  <FeaturePoll.Percentage />\n                </div>\n                <FeaturePoll.Progress />\n              </FeaturePoll.Option>\n            ))}\n          </FeaturePoll.Options>\n\n          <FeaturePoll.Footer />\n\n          {!hasVoted && (\n            <div className=\"pt-2\">\n              <Button\n                className=\"w-full\"\n                disabled={!selected}\n                onClick={() => setHasVoted(true)}\n              >\n                Submit Vote\n              </Button>\n            </div>\n          )}\n        </FeaturePoll.Root>\n      </CardContent>\n    </Card>\n  )\n}\n\nfunction FeaturePollMultipleExample() {\n  const [selected, setSelected] = useState<string[]>([])\n  const [hasVoted, setHasVoted] = useState(false)\n\n  const votes = {\n    speed: 42,\n    dx: 28,\n    docs: 30,\n    a11y: 18,\n  }\n\n  return (\n    <Card className=\"w-full max-w-lg\">\n      <CardHeader>\n        <CardTitle>Choose up to 2 priorities</CardTitle>\n        <CardDescription>\n          Select the features you want us to focus on next.\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <FeaturePoll.Root\n          hasVoted={hasVoted}\n          multiple\n          onValueChange={(value) => setSelected(value as string[])}\n          showResults\n          value={selected}\n          votes={votes}\n        >\n          <FeaturePoll.Options>\n            {features.map((feature) => (\n              <FeaturePoll.Option\n                disabled={\n                  !hasVoted &&\n                  selected.length >= 2 &&\n                  !selected.includes(feature.id)\n                }\n                key={feature.id}\n                value={feature.id}\n              >\n                <FeaturePoll.Indicator />\n                <FeaturePoll.Label>{feature.label}</FeaturePoll.Label>\n                <FeaturePoll.Percentage />\n              </FeaturePoll.Option>\n            ))}\n          </FeaturePoll.Options>\n\n          <FeaturePoll.Footer />\n\n          {!hasVoted && (\n            <div className=\"pt-2\">\n              <Button\n                className=\"w-full\"\n                disabled={selected.length === 0}\n                onClick={() => setHasVoted(true)}\n              >\n                Submit {selected.length > 0 && `(${selected.length} selected)`}\n              </Button>\n            </div>\n          )}\n        </FeaturePoll.Root>\n      </CardContent>\n    </Card>\n  )\n}\n\nexport default function FeaturePollDemo() {\n  return (\n    <div className=\"grid gap-8 md:grid-cols-1\">\n      <div className=\"space-y-4\">\n        <h3 className=\"text-lg font-semibold\">Basic</h3>\n        <FeaturePollBasicExample />\n      </div>\n      <div className=\"space-y-4\">\n        <h3 className=\"text-lg font-semibold\">With Results</h3>\n        <FeaturePollWithResultsExample />\n      </div>\n      <div className=\"space-y-4\">\n        <h3 className=\"text-lg font-semibold\">Multiple Selection</h3>\n        <FeaturePollMultipleExample />\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:component"
    }
  ]
}