{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "vote-tally-demo",
  "type": "registry:component",
  "registryDependencies": [
    "vote-tally"
  ],
  "files": [
    {
      "path": "registry/default/example/vote-tally-demo.tsx",
      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { ArrowUp } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nimport { VoteTally, type VoteTallyValue } from \"../ui/vote-tally\"\n\n/* -----------------------------------------------------------------------------\n * Example: Styled Vote Tally Widget\n * Demonstrates usage of the headless VoteTally primitive\n * -------------------------------------------------------------------------- */\n\nconst FEATURES = [\n  {\n    id: \"dark-mode\",\n    title: \"Dark Mode\",\n    description: \"Add system-wide dark mode support with automatic detection\",\n  },\n  {\n    id: \"keyboard-shortcuts\",\n    title: \"Keyboard Shortcuts\",\n    description: \"Customizable keyboard shortcuts for power users\",\n  },\n  {\n    id: \"export-pdf\",\n    title: \"Export to PDF\",\n    description: \"Export documents and reports as PDF files\",\n  },\n  {\n    id: \"api-access\",\n    title: \"API Access\",\n    description: \"Public API for third-party integrations\",\n  },\n  {\n    id: \"mobile-app\",\n    title: \"Mobile App\",\n    description: \"Native iOS and Android applications\",\n  },\n] as const\n\nexport function VoteTallyExample() {\n  const [votes, setVotes] = useState<VoteTallyValue>({\n    \"dark-mode\": 142,\n    \"keyboard-shortcuts\": 89,\n    \"export-pdf\": 67,\n    \"api-access\": 203,\n    \"mobile-app\": 156,\n  })\n\n  const [votedItems, setVotedItems] = useState<Set<string>>(\n    new Set([\"dark-mode\"])\n  )\n\n  return (\n    <div className=\"w-full max-w-md\">\n      <VoteTally.Root\n        className=\"flex flex-col gap-2\"\n        onValueChange={setVotes}\n        onVotedItemsChange={setVotedItems}\n        value={votes}\n        votedItems={votedItems}\n      >\n        <VoteTally.Group className=\"flex flex-col gap-2\" sortBy=\"votes-desc\">\n          {FEATURES.map((feature) => (\n            <VoteTally.Item\n              className={cn(\n                \"border-border bg-background flex items-start gap-3 rounded-lg border p-3\",\n                \"data-voted:bg-muted\",\n                \"data-disabled:cursor-not-allowed data-disabled:opacity-50\"\n              )}\n              key={feature.id}\n              value={feature.id}\n            >\n              <VoteTally.Trigger\n                className={cn(\n                  \"flex shrink-0 flex-col items-center gap-0.5 rounded-md border px-2 py-1.5\",\n                  \"border-border bg-background text-muted-foreground\",\n                  \"hover:bg-muted hover:text-foreground\",\n                  \"focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none\",\n                  \"data-[state=voted]:bg-muted data-[state=voted]:text-foreground\",\n                  \"disabled:pointer-events-none disabled:opacity-50\"\n                )}\n              >\n                <ArrowUp aria-hidden className=\"size-4\" />\n                <VoteTally.Count className=\"text-xs font-medium tabular-nums\" />\n              </VoteTally.Trigger>\n\n              <div className=\"flex min-w-0 flex-col gap-0.5\">\n                <VoteTally.Title className=\"text-foreground text-sm font-medium text-balance\">\n                  {feature.title}\n                </VoteTally.Title>\n                <VoteTally.Description className=\"text-muted-foreground text-sm text-pretty\">\n                  {feature.description}\n                </VoteTally.Description>\n              </div>\n            </VoteTally.Item>\n          ))}\n        </VoteTally.Group>\n      </VoteTally.Root>\n    </div>\n  )\n}\n\n/* -----------------------------------------------------------------------------\n * Example: Minimal/Compact variant\n * -------------------------------------------------------------------------- */\n\nexport function VoteTallyCompact() {\n  return (\n    <div className=\"w-full max-w-sm\">\n      <VoteTally.Root\n        className=\"flex flex-col gap-1\"\n        defaultValue={{\n          \"feature-a\": 12,\n          \"feature-b\": 8,\n          \"feature-c\": 24,\n        }}\n      >\n        {[\n          { id: \"feature-a\", title: \"Inline editing\" },\n          { id: \"feature-b\", title: \"Batch operations\" },\n          { id: \"feature-c\", title: \"Auto-save drafts\" },\n        ].map((feature) => (\n          <VoteTally.Item\n            className={cn(\n              \"flex items-center justify-between gap-2 rounded px-2 py-1.5\",\n              \"hover:bg-muted\",\n              \"data-voted:bg-muted\"\n            )}\n            key={feature.id}\n            value={feature.id}\n          >\n            <VoteTally.Title className=\"text-foreground text-sm\">\n              {feature.title}\n            </VoteTally.Title>\n\n            <VoteTally.Trigger\n              className={cn(\n                \"flex items-center gap-1 rounded px-1.5 py-0.5 text-xs\",\n                \"text-muted-foreground hover:text-foreground\",\n                \"data-[state=voted]:text-foreground data-[state=voted]:font-medium\"\n              )}\n            >\n              <ArrowUp aria-hidden className=\"size-3\" />\n              <VoteTally.Count className=\"tabular-nums\" />\n            </VoteTally.Trigger>\n          </VoteTally.Item>\n        ))}\n      </VoteTally.Root>\n    </div>\n  )\n}\n\nexport default function VoteTallyDemo() {\n  return (\n    <div className=\"flex w-full max-w-lg flex-col gap-10 py-6\">\n      <div className=\"border-border bg-card rounded-lg border p-4\">\n        <VoteTallyExample />\n      </div>\n      <div className=\"border-border bg-card rounded-lg border p-4\">\n        <VoteTallyCompact />\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:component"
    }
  ]
}