{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "choice-poll-demo",
  "type": "registry:component",
  "registryDependencies": [
    "choice-poll"
  ],
  "files": [
    {
      "path": "registry/default/example/choice-poll-demo.tsx",
      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport {\n  Database01Icon,\n  DropboxIcon,\n  Github01Icon,\n  GoogleIcon,\n  NotionIcon,\n  SlackIcon,\n} from \"@hugeicons/core-free-icons\"\nimport { HugeiconsIcon } from \"@hugeicons/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 { ChoicePoll } from \"../ui/choice-poll\"\n\n/* -----------------------------------------------------------------------------\n * Integration options data\n * -------------------------------------------------------------------------- */\n\nconst integrations = [\n  {\n    id: \"slack\",\n    label: \"Slack\",\n    description: \"Team communication and notifications\",\n    icon: SlackIcon,\n  },\n  {\n    id: \"notion\",\n    label: \"Notion\",\n    description: \"Documentation and knowledge base\",\n    icon: NotionIcon,\n  },\n  {\n    id: \"github\",\n    label: \"GitHub\",\n    description: \"Code repositories and CI/CD\",\n    icon: Github01Icon,\n  },\n  {\n    id: \"google-drive\",\n    label: \"Google Drive\",\n    description: \"File storage and collaboration\",\n    icon: GoogleIcon,\n  },\n  {\n    id: \"dropbox\",\n    label: \"Dropbox\",\n    description: \"Cloud file storage\",\n    icon: DropboxIcon,\n  },\n  {\n    id: \"supabase\",\n    label: \"Supabase\",\n    description: \"Database and authentication\",\n    icon: Database01Icon,\n  },\n]\n\n/* -----------------------------------------------------------------------------\n * Basic Example - Single Selection\n * -------------------------------------------------------------------------- */\n\nfunction ChoicePollBasicExample() {\n  const [selected, setSelected] = useState<string>(\"\")\n  const [hasVoted, setHasVoted] = useState(false)\n\n  const votes = {\n    slack: 234,\n    notion: 189,\n    github: 156,\n    \"google-drive\": 98,\n  }\n\n  const handleVote = () => {\n    setHasVoted(true)\n  }\n\n  return (\n    <Card className=\"w-full max-w-lg\">\n      <CardHeader>\n        <CardTitle>Vote for Next Integration</CardTitle>\n        <CardDescription>\n          Help us prioritize which integration to build next\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChoicePoll.Root\n          hasVoted={hasVoted}\n          onValueChange={(v) =>\n            setSelected(Array.isArray(v) ? (v[0] ?? \"\") : v)\n          }\n          showResults\n          value={selected}\n          votes={votes}\n        >\n          <ChoicePoll.Options>\n            {integrations.slice(0, 4).map((integration) => (\n              <ChoicePoll.Option key={integration.id} value={integration.id}>\n                <ChoicePoll.Indicator />\n                <HugeiconsIcon\n                  className=\"text-muted-foreground h-5 w-5\"\n                  icon={integration.icon}\n                />\n                <div className=\"flex flex-1 items-center justify-between gap-2\">\n                  <ChoicePoll.Label>{integration.label}</ChoicePoll.Label>\n                  <ChoicePoll.Percentage />\n                </div>\n              </ChoicePoll.Option>\n            ))}\n          </ChoicePoll.Options>\n\n          <ChoicePoll.Footer />\n\n          {!hasVoted && (\n            <div className=\"pt-2\">\n              <Button\n                className=\"w-full\"\n                disabled={!selected}\n                onClick={handleVote}\n              >\n                Submit Vote\n              </Button>\n            </div>\n          )}\n        </ChoicePoll.Root>\n      </CardContent>\n    </Card>\n  )\n}\n\n/* -----------------------------------------------------------------------------\n * With Results Example\n * -------------------------------------------------------------------------- */\n\nfunction ChoicePollWithResultsExample() {\n  const [selected, setSelected] = useState<string>(\"\")\n  const [hasVoted, setHasVoted] = useState(false)\n\n  const votes = {\n    slack: 100,\n    notion: 189,\n    github: 256,\n    \"google-drive\": 98,\n  }\n\n  const handleVote = () => {\n    setHasVoted(true)\n  }\n\n  return (\n    <Card className=\"w-full max-w-lg\">\n      <CardHeader>\n        <CardTitle>Vote for Next Integration</CardTitle>\n        <CardDescription>\n          Help us prioritize which integration to build next\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChoicePoll.Root\n          hasVoted={hasVoted}\n          onValueChange={(v) =>\n            setSelected(Array.isArray(v) ? (v[0] ?? \"\") : v)\n          }\n          showResults\n          value={selected}\n          votes={votes}\n        >\n          <ChoicePoll.Options>\n            {integrations.slice(0, 4).map((integration) => (\n              <ChoicePoll.Option key={integration.id} value={integration.id}>\n                <ChoicePoll.Indicator />\n                <HugeiconsIcon\n                  className=\"text-muted-foreground h-5 w-5\"\n                  icon={integration.icon}\n                />\n                <div className=\"flex flex-1 items-center justify-between gap-2\">\n                  <ChoicePoll.Label>{integration.label}</ChoicePoll.Label>\n                  <ChoicePoll.Percentage />\n                </div>\n              </ChoicePoll.Option>\n            ))}\n          </ChoicePoll.Options>\n\n          <ChoicePoll.Footer />\n\n          {!hasVoted && (\n            <div className=\"pt-2\">\n              <Button\n                className=\"w-full\"\n                disabled={!selected}\n                onClick={handleVote}\n              >\n                Submit Vote\n              </Button>\n            </div>\n          )}\n        </ChoicePoll.Root>\n      </CardContent>\n    </Card>\n  )\n}\n\n/* -----------------------------------------------------------------------------\n * Multiple Selection Example\n * -------------------------------------------------------------------------- */\n\nfunction ChoicePollMultipleExample() {\n  const [selected, setSelected] = useState<string[]>([])\n  const [hasVoted, setHasVoted] = useState(false)\n\n  const votes = {\n    slack: 100,\n    notion: 189,\n    github: 256,\n    \"google-drive\": 198,\n    dropbox: 98,\n    supabase: 156,\n  }\n\n  const handleVote = () => {\n    setHasVoted(true)\n  }\n\n  return (\n    <Card className=\"w-full max-w-lg\">\n      <CardHeader>\n        <CardTitle>Choose Your Top Integrations</CardTitle>\n        <CardDescription>\n          Select up to 3 integrations you'd like us to prioritize\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChoicePoll.Root\n          hasVoted={hasVoted}\n          multiple\n          onValueChange={(val) => setSelected(val as string[])}\n          showResults\n          value={selected}\n          votes={votes}\n        >\n          <ChoicePoll.Options>\n            {integrations.map((integration) => (\n              <ChoicePoll.Option\n                disabled={\n                  !hasVoted &&\n                  selected.length >= 3 &&\n                  !selected.includes(integration.id)\n                }\n                key={integration.id}\n                value={integration.id}\n              >\n                <ChoicePoll.Indicator />\n                <HugeiconsIcon\n                  className=\"text-muted-foreground h-5 w-5\"\n                  icon={integration.icon}\n                />\n                <div className=\"flex flex-1 flex-col gap-0.5\">\n                  <ChoicePoll.Label>{integration.label}</ChoicePoll.Label>\n                  <span className=\"text-muted-foreground text-xs\">\n                    {integration.description}\n                  </span>\n                </div>\n                <ChoicePoll.Percentage />\n              </ChoicePoll.Option>\n            ))}\n          </ChoicePoll.Options>\n\n          <ChoicePoll.Footer />\n\n          {!hasVoted && (\n            <div className=\"pt-2\">\n              <Button\n                className=\"w-full\"\n                disabled={selected.length === 0}\n                onClick={handleVote}\n              >\n                Submit {selected.length > 0 && `(${selected.length} selected)`}\n              </Button>\n            </div>\n          )}\n        </ChoicePoll.Root>\n      </CardContent>\n    </Card>\n  )\n}\n\n/* -----------------------------------------------------------------------------\n * Compact Inline Example\n * -------------------------------------------------------------------------- */\n\nfunction ChoicePollCompactExample() {\n  const [selected, setSelected] = useState<string>(\"\")\n\n  return (\n    <div className=\"w-full max-w-sm\">\n      <ChoicePoll.Root\n        onValueChange={(v) => setSelected(Array.isArray(v) ? (v[0] ?? \"\") : v)}\n        value={selected}\n      >\n        <ChoicePoll.Header>\n          <ChoicePoll.Title className=\"text-base\">Quick Poll</ChoicePoll.Title>\n          <ChoicePoll.Description>\n            Which feature would you like next?\n          </ChoicePoll.Description>\n        </ChoicePoll.Header>\n\n        <ChoicePoll.Options className=\"gap-1.5\">\n          <ChoicePoll.Option className=\"p-3\" value=\"dark-mode\">\n            <ChoicePoll.Indicator />\n            <ChoicePoll.Label className=\"text-sm\">Dark Mode</ChoicePoll.Label>\n          </ChoicePoll.Option>\n          <ChoicePoll.Option className=\"p-3\" value=\"mobile-app\">\n            <ChoicePoll.Indicator />\n            <ChoicePoll.Label className=\"text-sm\">Mobile App</ChoicePoll.Label>\n          </ChoicePoll.Option>\n          <ChoicePoll.Option className=\"p-3\" value=\"api\">\n            <ChoicePoll.Indicator />\n            <ChoicePoll.Label className=\"text-sm\">API Access</ChoicePoll.Label>\n          </ChoicePoll.Option>\n        </ChoicePoll.Options>\n      </ChoicePoll.Root>\n    </div>\n  )\n}\n\n/* -----------------------------------------------------------------------------\n * Combined Demo\n * -------------------------------------------------------------------------- */\n\nexport default function ChoicePollDemo() {\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\">Single Selection</h3>\n        <ChoicePollBasicExample />\n      </div>\n      <div className=\"space-y-4\">\n        <h3 className=\"text-lg font-semibold\">With Results</h3>\n        <ChoicePollWithResultsExample />\n      </div>\n      <div className=\"space-y-4\">\n        <h3 className=\"text-lg font-semibold\">Multiple Selection</h3>\n        <ChoicePollMultipleExample />\n      </div>\n      <div className=\"space-y-4\">\n        <h3 className=\"text-lg font-semibold\">Compact</h3>\n        <ChoicePollCompactExample />\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:component"
    }
  ]
}