{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "poll-widget-demo",
  "type": "registry:component",
  "registryDependencies": [
    "poll-widget"
  ],
  "files": [
    {
      "path": "registry/default/example/poll-widget-demo.tsx",
      "content": "\"use client\"\n\nimport { useCallback, useMemo, useState } from \"react\"\n\nimport { PollWidget } from \"../ui/poll-widget\"\n\nconst DEMO_OPTIONS = [\n  { id: \"speed\", label: \"Faster builds\" },\n  { id: \"dx\", label: \"Better DX\" },\n  { id: \"docs\", label: \"Clearer docs\" },\n] as const\n\nconst BASE_VOTES = { speed: 41, dx: 28, docs: 30 }\n\nfunction usePollState() {\n  const [votes, setVotes] = useState<Record<string, number>>(BASE_VOTES)\n  const [hasVoted, setHasVoted] = useState(false)\n\n  const onVote = useCallback((selectedIds: string[]) => {\n    setVotes((prev) => {\n      const next: Record<string, number> = { ...prev }\n      for (const id of selectedIds) {\n        next[id] = (next[id] ?? 0) + 1\n      }\n      return next\n    })\n    setHasVoted(true)\n  }, [])\n\n  return { votes, hasVoted, onVote }\n}\n\nexport default function PollWidgetDemo() {\n  return (\n    <div className=\"flex w-full max-w-lg flex-col gap-10 py-6\">\n      <InlineDemo />\n      <PopoverDemo />\n      <DialogDemo />\n    </div>\n  )\n}\n\nfunction InlineDemo() {\n  const { votes, hasVoted, onVote } = usePollState()\n  const options = useMemo(\n    () => DEMO_OPTIONS.map((o) => ({ id: o.id, label: o.label })),\n    []\n  )\n\n  return (\n    <div className=\"space-y-2\">\n      <h3 className=\"text-muted-foreground text-sm font-medium\">\n        Inline (default)\n      </h3>\n      <div className=\"border-border bg-card rounded-lg border p-4\">\n        <PollWidget\n          question=\"Which feature matters most?\"\n          description=\"Pick one, then submit to see results and success state.\"\n          options={options}\n          votes={votes}\n          hasVoted={hasVoted}\n          onVote={onVote}\n          mode=\"inline\"\n        >\n          <PollWidget.Content>\n            <PollWidget.Question />\n            <PollWidget.Options>\n              {options.map((opt) => (\n                <PollWidget.Option key={opt.id} value={opt.id}>\n                  <PollWidget.Indicator />\n                  <PollWidget.Label>{opt.label}</PollWidget.Label>\n                  <PollWidget.Percentage />\n                </PollWidget.Option>\n              ))}\n            </PollWidget.Options>\n            <PollWidget.Results />\n            <PollWidget.Submit />\n          </PollWidget.Content>\n        </PollWidget>\n      </div>\n    </div>\n  )\n}\n\nfunction PopoverDemo() {\n  const { votes, hasVoted, onVote } = usePollState()\n  const options = useMemo(\n    () => DEMO_OPTIONS.map((o) => ({ id: o.id, label: o.label })),\n    []\n  )\n\n  return (\n    <div className=\"space-y-2\">\n      <h3 className=\"text-muted-foreground text-sm font-medium\">\n        Popover mode\n      </h3>\n      <div className=\"border-border bg-card rounded-lg border p-4\">\n        <PollWidget\n          question=\"Vote from a popover\"\n          description=\"Opens in a popover when you click the trigger.\"\n          options={options}\n          votes={votes}\n          hasVoted={hasVoted}\n          onVote={onVote}\n          mode=\"popover\"\n        >\n          <PollWidget.Trigger label=\"Open poll\" />\n          <PollWidget.Content>\n            <PollWidget.Question />\n            <PollWidget.Options>\n              {options.map((opt) => (\n                <PollWidget.Option key={opt.id} value={opt.id}>\n                  <PollWidget.Indicator />\n                  <PollWidget.Label>{opt.label}</PollWidget.Label>\n                  <PollWidget.Percentage />\n                </PollWidget.Option>\n              ))}\n            </PollWidget.Options>\n            <PollWidget.Results />\n            <PollWidget.Submit />\n          </PollWidget.Content>\n        </PollWidget>\n      </div>\n    </div>\n  )\n}\n\nfunction DialogDemo() {\n  const { votes, hasVoted, onVote } = usePollState()\n  const options = useMemo(\n    () => DEMO_OPTIONS.map((o) => ({ id: o.id, label: o.label })),\n    []\n  )\n\n  return (\n    <div className=\"space-y-2\">\n      <h3 className=\"text-muted-foreground text-sm font-medium\">Dialog mode</h3>\n      <div className=\"border-border bg-card rounded-lg border p-4\">\n        <PollWidget\n          question=\"Vote in a dialog\"\n          description=\"Opens in a modal dialog when you click the trigger.\"\n          options={options}\n          votes={votes}\n          hasVoted={hasVoted}\n          onVote={onVote}\n          mode=\"dialog\"\n        >\n          <PollWidget.Trigger label=\"Open poll\" />\n          <PollWidget.Content>\n            <PollWidget.Question />\n            <PollWidget.Options>\n              {options.map((opt) => (\n                <PollWidget.Option key={opt.id} value={opt.id}>\n                  <PollWidget.Indicator />\n                  <PollWidget.Label>{opt.label}</PollWidget.Label>\n                  <PollWidget.Percentage />\n                </PollWidget.Option>\n              ))}\n            </PollWidget.Options>\n            <PollWidget.Results />\n            <PollWidget.Submit />\n          </PollWidget.Content>\n        </PollWidget>\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:component"
    }
  ]
}