{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "rating",
  "type": "registry:ui",
  "title": "Rating",
  "description": "Star rating input rendered as a radiogroup, with one labelled radio per star, a configurable max, disabled state, and controlled or uncontrolled value in React.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/rating.tsx",
      "type": "registry:ui",
      "target": "components/ui/rating.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { StarIcon } from \"lucide-react\"\nimport { cn } from \"@/lib/utils\"\n\ntype RatingProps = {\n  value?: number\n  defaultValue?: number\n  onChange?: (value: number) => void\n  max?: number\n  disabled?: boolean\n  className?: string\n  \"aria-label\"?: string\n}\n\nfunction Rating({\n  value,\n  defaultValue = 0,\n  onChange,\n  max = 5,\n  disabled,\n  className,\n  ...a11y\n}: RatingProps) {\n  const [internal, setInternal] = React.useState(defaultValue)\n  const current = value ?? internal\n  const set = (n: number) => {\n    if (value === undefined) setInternal(n)\n    onChange?.(n)\n  }\n  return (\n    <div\n      data-slot=\"rating\"\n      role=\"radiogroup\"\n      aria-label={a11y[\"aria-label\"] ?? \"Rating\"}\n      className={cn(\"inline-flex items-center gap-0.5\", className)}\n    >\n      {Array.from({ length: max }, (_, i) => {\n        const n = i + 1\n        const on = n <= current\n        return (\n          <button\n            key={n}\n            type=\"button\"\n            role=\"radio\"\n            aria-checked={n === current}\n            aria-label={`${n} star${n === 1 ? \"\" : \"s\"}`}\n            disabled={disabled}\n            className={cn(\n              \"rounded-md p-0.5 outline-none focus-visible:ring-2 focus-visible:ring-accent\",\n              disabled && \"opacity-50\"\n            )}\n            onClick={() => set(n)}\n          >\n            <StarIcon\n              className={cn(\n                \"size-4\",\n                on ? \"fill-warning text-warning\" : \"text-fg-subtle\"\n              )}\n            />\n          </button>\n        )\n      })}\n    </div>\n  )\n}\nexport { Rating }\n"
    }
  ]
}