{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "rating",
  "title": "Rating",
  "description": "Star, heart or thumbs-up rating input in three sizes.",
  "dependencies": [
    "lucide-react"
  ],
  "files": [
    {
      "path": "components/ui/rating.tsx",
      "content": "'use client'\n\nimport * as React from 'react'\nimport { Star, Heart, ThumbsUp } from 'lucide-react'\nimport { cn } from '@/lib/utils'\n\nexport interface RatingProps {\n  value: number\n  onChange?: (value: number) => void\n  max?: number\n  icon?: 'star' | 'heart' | 'thumbsUp'\n  size?: 'sm' | 'md' | 'lg'\n  readOnly?: boolean\n  className?: string\n  style?: React.CSSProperties\n}\n\nconst iconMap = {\n  star: Star,\n  heart: Heart,\n  thumbsUp: ThumbsUp,\n}\n\nconst sizeMap = {\n  sm: 'w-4 h-4',\n  md: 'w-6 h-6',\n  lg: 'w-8 h-8',\n}\n\nexport const Rating = React.forwardRef<HTMLDivElement, RatingProps>(\n  (\n    {\n      value,\n      onChange,\n      max = 5,\n      icon = 'star',\n      size = 'md',\n      readOnly = false,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const [hoverValue, setHoverValue] = React.useState<number | null>(null)\n    const Icon = iconMap[icon]\n\n    const handleMouseEnter = (index: number) => {\n      if (!readOnly) {\n        setHoverValue(index)\n      }\n    }\n\n    const handleMouseLeave = () => {\n      setHoverValue(null)\n    }\n\n    const handleClick = (index: number) => {\n      if (!readOnly && onChange) {\n        onChange(index)\n      }\n    }\n\n    return (\n      <div ref={ref} className={cn('flex items-center', className)} {...props}>\n        {[...Array(max)].map((_, index) => {\n          const filled = (hoverValue !== null ? hoverValue : value) > index\n\n          return (\n            <Icon\n              key={index}\n              className={cn(\n                sizeMap[size],\n                'cursor-pointer transition-colors',\n                filled ? 'text-yellow-400 fill-yellow-400' : 'text-gray-300',\n                readOnly && 'cursor-default',\n              )}\n              onMouseEnter={() => handleMouseEnter(index + 1)}\n              onMouseLeave={handleMouseLeave}\n              onClick={() => handleClick(index + 1)}\n              aria-hidden={readOnly}\n              role={readOnly ? undefined : 'button'}\n              tabIndex={readOnly ? -1 : 0}\n              aria-label={`Rate ${index + 1} out of ${max}`}\n            />\n          )\n        })}\n      </div>\n    )\n  },\n)\n\nRating.displayName = 'Rating'\n",
      "type": "registry:ui"
    }
  ],
  "categories": [
    "input"
  ],
  "type": "registry:ui"
}