{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "feature-voting-demo",
  "type": "registry:component",
  "registryDependencies": [
    "feature-voting"
  ],
  "files": [
    {
      "path": "registry/default/example/feature-voting-demo.tsx",
      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { ArrowUp } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nimport { FeatureVoting, type FeatureVotingValue } from \"../ui/feature-voting\"\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\nfunction FeatureVotingExample() {\n  const [votes, setVotes] = useState<FeatureVotingValue>({\n    \"dark-mode\": 142,\n    \"keyboard-shortcuts\": 89,\n    \"export-pdf\": 67,\n    \"api-access\": 203,\n    \"mobile-app\": 156,\n  })\n\n  const [votedFeatures, setVotedFeatures] = useState<Set<string>>(\n    new Set([\"dark-mode\"])\n  )\n\n  return (\n    <div className=\"w-full max-w-md\">\n      <FeatureVoting.Root\n        className=\"flex flex-col gap-2\"\n        onValueChange={setVotes}\n        onVotedFeaturesChange={setVotedFeatures}\n        value={votes}\n        votedFeatures={votedFeatures}\n      >\n        <FeatureVoting.Group\n          className=\"flex flex-col gap-2\"\n          sortBy=\"votes-desc\"\n        >\n          {FEATURES.map((feature) => (\n            <FeatureVoting.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              <FeatureVoting.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                <FeatureVoting.Count className=\"text-xs font-medium tabular-nums\" />\n              </FeatureVoting.Trigger>\n\n              <div className=\"flex min-w-0 flex-col gap-0.5\">\n                <FeatureVoting.Title className=\"text-foreground text-sm font-medium text-balance\">\n                  {feature.title}\n                </FeatureVoting.Title>\n                <FeatureVoting.Description className=\"text-muted-foreground text-sm text-pretty\">\n                  {feature.description}\n                </FeatureVoting.Description>\n              </div>\n            </FeatureVoting.Item>\n          ))}\n        </FeatureVoting.Group>\n      </FeatureVoting.Root>\n    </div>\n  )\n}\n\nfunction FeatureVotingBasicExample() {\n  return (\n    <div className=\"w-full max-w-sm\">\n      <FeatureVoting.Root className=\"flex flex-col gap-2\">\n        <FeatureVoting.Item\n          className=\"border-border flex items-center justify-between gap-3 rounded-lg border p-3\"\n          value=\"dark-mode\"\n        >\n          <div className=\"flex min-w-0 flex-col gap-0.5\">\n            <FeatureVoting.Title className=\"text-sm font-medium\">\n              Dark mode\n            </FeatureVoting.Title>\n            <FeatureVoting.Description className=\"text-muted-foreground text-xs\">\n              System-aware dark theme\n            </FeatureVoting.Description>\n          </div>\n          <div className=\"flex items-center gap-2\">\n            <FeatureVoting.Count className=\"text-sm tabular-nums\" />\n            <FeatureVoting.Trigger className=\"rounded-md border px-2 py-1 text-sm\">\n              Vote\n            </FeatureVoting.Trigger>\n          </div>\n        </FeatureVoting.Item>\n\n        <FeatureVoting.Item\n          className=\"border-border flex items-center justify-between gap-3 rounded-lg border p-3\"\n          value=\"keyboard-shortcuts\"\n        >\n          <div className=\"flex min-w-0 flex-col gap-0.5\">\n            <FeatureVoting.Title className=\"text-sm font-medium\">\n              Keyboard shortcuts\n            </FeatureVoting.Title>\n            <FeatureVoting.Description className=\"text-muted-foreground text-xs\">\n              Customizable hotkeys\n            </FeatureVoting.Description>\n          </div>\n          <div className=\"flex items-center gap-2\">\n            <FeatureVoting.Count className=\"text-sm tabular-nums\" />\n            <FeatureVoting.Trigger className=\"rounded-md border px-2 py-1 text-sm\">\n              Vote\n            </FeatureVoting.Trigger>\n          </div>\n        </FeatureVoting.Item>\n      </FeatureVoting.Root>\n    </div>\n  )\n}\n\nfunction FeatureVotingSortedExample() {\n  return (\n    <div className=\"w-full max-w-sm\">\n      <FeatureVoting.Root\n        className=\"flex flex-col gap-2\"\n        defaultValue={{ a: 2, b: 5, c: 1 }}\n      >\n        <FeatureVoting.Group\n          className=\"flex flex-col gap-2\"\n          sortBy=\"votes-desc\"\n        >\n          {[\n            { id: \"a\", title: \"Option A\" },\n            { id: \"b\", title: \"Option B\" },\n            { id: \"c\", title: \"Option C\" },\n          ].map((feature) => (\n            <FeatureVoting.Item\n              className=\"border-border flex items-center justify-between gap-2 rounded-lg border p-3\"\n              key={feature.id}\n              value={feature.id}\n            >\n              <FeatureVoting.Title className=\"text-sm\">\n                {feature.title}\n              </FeatureVoting.Title>\n              <div className=\"flex items-center gap-2\">\n                <FeatureVoting.Count className=\"text-sm tabular-nums\" />\n                <FeatureVoting.Trigger className=\"rounded-md border px-2 py-1 text-sm\">\n                  Vote\n                </FeatureVoting.Trigger>\n              </div>\n            </FeatureVoting.Item>\n          ))}\n        </FeatureVoting.Group>\n      </FeatureVoting.Root>\n    </div>\n  )\n}\n\nexport default function FeatureVotingDemo() {\n  return (\n    <div className=\"flex w-full max-w-lg flex-col gap-10 py-6\">\n      <div className=\"space-y-4\">\n        <h3 className=\"text-lg font-semibold\">Sorted with vote counts</h3>\n        <div className=\"border-border bg-card rounded-lg border p-4\">\n          <FeatureVotingExample />\n        </div>\n      </div>\n      <div className=\"space-y-4\">\n        <h3 className=\"text-lg font-semibold\">Basic list</h3>\n        <FeatureVotingBasicExample />\n      </div>\n      <div className=\"space-y-4\">\n        <h3 className=\"text-lg font-semibold\">Sorted by votes</h3>\n        <FeatureVotingSortedExample />\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:component"
    }
  ]
}