{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "rating-input",
  "type": "registry:ui",
  "title": "Rating Input",
  "description": "Interactive star rating input that allows users to select a rating level",
  "dependencies": [
    "react"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/react/ui/rating-input.tsx",
      "content": "import React, { useState, useRef, useEffect } from \"react\";\nimport type { InputHTMLAttributes, ChangeEvent } from \"react\";\n\ninterface RatingInputProps\n  extends Omit<\n    InputHTMLAttributes<HTMLInputElement>,\n    \"onChange\" | \"value\" | \"type\" | \"defaultValue\"\n  > {\n  numberOfOptions?: number;\n  defaultValue?: number | null;\n  value?: number | null;\n  onChange?: (value: number | null) => void;\n  className?: string;\n}\n\nexport const RatingInput: React.FC<RatingInputProps> = ({\n  id = \"rating-input\",\n  name = \"rating\",\n  disabled = false,\n  required,\n  numberOfOptions = 5,\n  defaultValue,\n  value,\n  className = \"\",\n  onChange,\n  ...restProps\n}) => {\n  const calculateDefaultValue = () => {\n    if (value !== undefined) return value;\n    if (defaultValue !== undefined) return defaultValue;\n    return null;\n  };\n\n  const [selectedRating, setSelectedRating] = useState<number | null>(\n    calculateDefaultValue()\n  );\n\n  useEffect(() => {\n    if (value !== undefined && value !== selectedRating) {\n      setSelectedRating(value);\n    }\n  }, [value]);\n\n  const radioGroupRef = useRef<HTMLDivElement>(null);\n\n  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n    const newValue = parseInt(e.target.value, 10);\n    setSelectedRating(newValue);\n    onChange && onChange(newValue);\n  };\n\n  return (\n    <div\n      className={`rating-input skin-primary wrapper [--rating-icon-size:32px] ${className}`}\n      ref={radioGroupRef}\n      role=\"radiogroup\"\n      aria-required={required ? \"true\" : \"false\"}\n    >\n      {Array.from({ length: numberOfOptions }, (_, index) => {\n        const ratingValue = index + 1;\n        const optionId = `${id}-${ratingValue}`;\n\n        return (\n          <input\n            key={optionId}\n            type=\"radio\"\n            id={optionId}\n            name={name}\n            value={ratingValue}\n            checked={selectedRating === ratingValue}\n            onChange={handleChange}\n            aria-label={`${ratingValue} ${\n              ratingValue === 1 ? \"star\" : \"stars\"\n            }`}\n            disabled={disabled}\n            required={required && selectedRating === null}\n            {...restProps}\n          />\n        );\n      })}\n    </div>\n  );\n};\n\nexport default RatingInput;\n",
      "type": "registry:ui",
      "target": "react/ui/rating-input.tsx"
    }
  ]
}