{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "rating-group",
  "title": "Rating Group",
  "description": "A star rating component for user feedback.",
  "registryDependencies": [
    "toggle-group"
  ],
  "files": [
    {
      "path": "registry/rating-group/rating-group.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { StarIcon } from \"lucide-react\";\nimport { ToggleGroup, ToggleGroupItem } from \"@/components/ui/toggle-group\";\nimport { cn } from \"@/lib/utils\";\n\ninterface RatingGroupProps {\n  value?: string;\n  onValueChange?: (value: string) => void;\n  max?: number;\n  className?: string;\n  disabled?: boolean;\n  size?: \"default\" | \"sm\" | \"lg\";\n}\n\nfunction RatingGroup({\n  value = \"0\",\n  onValueChange,\n  max = 5,\n  className,\n  disabled = false,\n  size = \"default\",\n  ...props\n}: RatingGroupProps) {\n  const [hoveredValue, setHoveredValue] = React.useState<number | null>(null);\n  const currentValue = React.useMemo(() => parseInt(value || \"0\", 10), [value]);\n  const displayValue = hoveredValue ?? currentValue;\n\n  const starIndices = React.useMemo(\n    () => Array.from({ length: max }, (_, i) => i + 1),\n    [max],\n  );\n\n  const handleMouseEnter = React.useCallback(\n    (starValue: number) => {\n      if (!disabled) {\n        setHoveredValue(starValue);\n      }\n    },\n    [disabled],\n  );\n\n  const handleMouseLeave = React.useCallback(() => {\n    setHoveredValue(null);\n  }, []);\n\n  return (\n    <ToggleGroup\n      value={[value]}\n      onValueChange={(groupValue) =>\n        onValueChange?.(groupValue[groupValue.length - 1] || \"0\")\n      }\n      size={size}\n      className={cn(\"gap-0\", className)}\n      disabled={disabled}\n      onMouseLeave={handleMouseLeave}\n      {...props}\n    >\n      {starIndices.map((starIndex) => {\n        const starValue = starIndex.toString();\n        const isActive = starIndex <= displayValue;\n        return (\n          <ToggleGroupItem\n            key={starValue}\n            value={starValue}\n            aria-label={`${starIndex} star rating`}\n            className={cn(\n              \"relative border-0 bg-transparent p-0 hover:bg-transparent data-pressed:bg-transparent focus-visible:ring-0\",\n              \"hover:scale-110 focus-visible:scale-110 transition-transform ease-out\",\n              disabled && \"pointer-events-none opacity-50\",\n            )}\n            onMouseEnter={() => handleMouseEnter(starIndex)}\n            disabled={disabled}\n          >\n            <StarIcon\n              className={cn(\n                \"transition-colors ease-out\",\n                size === \"sm\" && \"size-4\",\n                size === \"default\" && \"size-5\",\n                size === \"lg\" && \"size-6\",\n                isActive\n                  ? \"fill-yellow-400 text-yellow-400\"\n                  : \"text-muted-foreground/50\",\n              )}\n            />\n          </ToggleGroupItem>\n        );\n      })}\n    </ToggleGroup>\n  );\n}\n\nexport { RatingGroup };\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:block"
}