{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "vote-control",
  "type": "registry:ui",
  "title": "Vote control",
  "description": "Upvote and downvote control with a score between two chevrons, aria-pressed states and click again to undo. Built in React for forums and feedback boards.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/vote-control.tsx",
      "type": "registry:ui",
      "target": "components/ui/vote-control.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { ChevronDownIcon, ChevronUpIcon } from \"lucide-react\"\nimport { cn } from \"@/lib/utils\"\n\nfunction VoteControl({\n  score = 0,\n  value,\n  onChange,\n  className,\n}: {\n  score?: number\n  value?: \"up\" | \"down\" | null\n  onChange?: (value: \"up\" | \"down\" | null) => void\n  className?: string\n}) {\n  return (\n    <div data-slot=\"vote-control\" className={cn(\"inline-flex flex-col items-center gap-0.5\", className)}>\n      <button\n        type=\"button\"\n        aria-label=\"Upvote\"\n        aria-pressed={value === \"up\"}\n        className={cn(\"rounded-md p-0.5 outline-none focus-visible:ring-2 focus-visible:ring-accent\", value === \"up\" ? \"text-accent\" : \"text-fg-muted hover:text-fg\")}\n        onClick={() => onChange?.(value === \"up\" ? null : \"up\")}\n      >\n        <ChevronUpIcon className=\"size-4\" />\n      </button>\n      <span className=\"text-xs font-medium tabular-nums text-fg\">{score}</span>\n      <button\n        type=\"button\"\n        aria-label=\"Downvote\"\n        aria-pressed={value === \"down\"}\n        className={cn(\"rounded-md p-0.5 outline-none focus-visible:ring-2 focus-visible:ring-accent\", value === \"down\" ? \"text-danger\" : \"text-fg-muted hover:text-fg\")}\n        onClick={() => onChange?.(value === \"down\" ? null : \"down\")}\n      >\n        <ChevronDownIcon className=\"size-4\" />\n      </button>\n    </div>\n  )\n}\nexport { VoteControl }\n"
    }
  ]
}