{
  "name": "star-rating-basic",
  "type": "registry:component",
  "dependencies": [
    "lucide-react"
  ],
  "files": [
    {
      "type": "registry:component",
      "content": "\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport { Star } from \"lucide-react\";\nimport * as React from \"react\";\n\ninterface StarRatingBasicProps {\n  value: number;\n  onChange?: (value: number) => void;\n  className?: string;\n  iconSize?: number;\n  maxStars?: number;\n  readOnly?: boolean;\n  color?: string;\n}\n\nconst StarIcon = React.memo(\n  ({\n    iconSize,\n    index,\n    isInteractive,\n    onClick,\n    onMouseEnter,\n    style,\n  }: {\n    index: number;\n    style: React.CSSProperties;\n    iconSize: number;\n    onClick: () => void;\n    onMouseEnter: () => void;\n    isInteractive: boolean;\n  }) => (\n    <Star\n      key={index}\n      size={iconSize}\n      fill={style.fill}\n      color={style.color}\n      onClick={onClick}\n      onMouseEnter={onMouseEnter}\n      className={cn(\n        \"transition-colors duration-200\",\n        isInteractive && \"cursor-pointer hover:scale-110\"\n      )}\n      style={style}\n    />\n  )\n);\nStarIcon.displayName = \"StarIcon\";\n\nconst StarRating_Basic = ({\n  className,\n  color = \"#e4c616\",\n  iconSize = 24,\n  maxStars = 5,\n  onChange,\n  readOnly = false,\n  value,\n}: StarRatingBasicProps) => {\n  const [hoverRating, setHoverRating] = React.useState<number | null>(null);\n\n  const handleStarClick = React.useCallback(\n    (index: number) => {\n      if (readOnly || !onChange) return;\n      const newRating = index + 1;\n      onChange(newRating);\n    },\n    [readOnly, onChange]\n  );\n\n  const handleStarHover = React.useCallback(\n    (index: number) => {\n      if (!readOnly) {\n        setHoverRating(index + 1);\n      }\n    },\n    [readOnly]\n  );\n\n  const handleMouseLeave = React.useCallback(() => {\n    if (!readOnly) {\n      setHoverRating(null);\n    }\n  }, [readOnly]);\n\n  const getStarStyle = React.useCallback(\n    (index: number) => {\n      const ratingToUse =\n        !readOnly && hoverRating !== null ? hoverRating : value;\n      return {\n        color: ratingToUse > index ? color : \"gray\",\n        fill: ratingToUse > index ? color : \"transparent\",\n      } as React.CSSProperties;\n    },\n    [readOnly, hoverRating, value, color]\n  );\n\n  const stars = React.useMemo(() => {\n    return Array.from({ length: maxStars }).map((_, index) => {\n      const style = getStarStyle(index);\n      return (\n        <StarIcon\n          key={index}\n          index={index}\n          style={style}\n          iconSize={iconSize}\n          onClick={() => handleStarClick(index)}\n          onMouseEnter={() => handleStarHover(index)}\n          isInteractive={!readOnly}\n        />\n      );\n    });\n  }, [\n    maxStars,\n    getStarStyle,\n    iconSize,\n    handleStarClick,\n    handleStarHover,\n    readOnly,\n  ]);\n\n  return (\n    <div\n      className={cn(\"flex items-center gap-x-0.5\", className)}\n      onMouseLeave={handleMouseLeave}\n    >\n      {stars}\n    </div>\n  );\n};\n\nexport default StarRating_Basic;\n",
      "path": "/components/commerce-ui/components/star-rating/basic/star-rating-basic.tsx",
      "target": "components/commerce-ui/star-rating-basic.tsx"
    }
  ]
}