{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "feedback-thumbs",
  "type": "registry:ui",
  "title": "Feedback thumbs",
  "description": "Thumbs up and thumbs down buttons for rating an answer or article. Uses aria-pressed, toggles off on a second click, and works controlled or uncontrolled.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/feedback-thumbs.tsx",
      "type": "registry:ui",
      "target": "components/ui/feedback-thumbs.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { cn } from \"@/lib/utils\"\nimport { ThumbsDownIcon, ThumbsUpIcon } from \"lucide-react\"\n\nfunction FeedbackThumbs({\n  value,\n  onChange,\n  className,\n}: {\n  value?: \"up\" | \"down\" | null\n  onChange?: (v: \"up\" | \"down\" | null) => void\n  className?: string\n}) {\n  const [inner, setInner] = React.useState<\"up\" | \"down\" | null>(null)\n  const v = value !== undefined ? value : inner\n  const setV = (next: \"up\" | \"down\" | null) => {\n    onChange?.(next)\n    if (value === undefined) setInner(next)\n  }\n  return (\n    <div data-slot=\"feedback-thumbs\" className={cn(\"inline-flex items-center gap-1 rounded-xl border border-border bg-surface p-1 shadow-highlight\", className)}>\n      <button\n        type=\"button\"\n        aria-pressed={v === \"up\"}\n        aria-label=\"Helpful\"\n        onClick={() => setV(v === \"up\" ? null : \"up\")}\n        className={cn(\"inline-flex size-8 items-center justify-center rounded-lg outline-none focus-visible:ring-2 focus-visible:ring-accent\", v === \"up\" ? \"bg-accent/15 text-accent\" : \"text-fg-muted hover:text-fg\")}\n      >\n        <ThumbsUpIcon className=\"size-4\" />\n      </button>\n      <button\n        type=\"button\"\n        aria-pressed={v === \"down\"}\n        aria-label=\"Not helpful\"\n        onClick={() => setV(v === \"down\" ? null : \"down\")}\n        className={cn(\"inline-flex size-8 items-center justify-center rounded-lg outline-none focus-visible:ring-2 focus-visible:ring-accent\", v === \"down\" ? \"bg-danger/15 text-danger\" : \"text-fg-muted hover:text-fg\")}\n      >\n        <ThumbsDownIcon className=\"size-4\" />\n      </button>\n    </div>\n  )\n}\nexport { FeedbackThumbs }\n"
    }
  ]
}