{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "rating-stars",
  "title": "Rating Stars",
  "description": "Stars rating component with customizable color, depending on average rating.",
  "files": [
    {
      "path": "registry/components/rating-stars/index.tsx",
      "content": "'use client';\n\nimport * as React from 'react';\n\nimport { cn } from '@/lib/utils';\n\ninterface RatingStarsProps extends React.HTMLAttributes<HTMLDivElement> {\n  rating: number;\n  maxRating?: number;\n}\n\nexport const RatingStars = React.forwardRef<HTMLDivElement, RatingStarsProps>(\n  ({ rating, maxRating = 5, className, ...props }, ref) => {\n    const filledStars = Math.floor(rating);\n    const fractionalPart = rating - filledStars;\n    const emptyStars = maxRating - filledStars - (fractionalPart > 0 ? 1 : 0);\n\n    return (\n      <div\n        className={cn('flex items-center gap-2', className)}\n        ref={ref}\n        {...props}\n      >\n        <div className=\"flex items-center\">\n          {[...Array(filledStars)].map((_, index) => (\n            <svg\n              key={`filled-${index}`}\n              className=\"size-4 text-inherit\"\n              fill=\"currentColor\"\n              viewBox=\"0 0 20 20\"\n            >\n              <path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.286 3.957a1 1 0 00.95.69h4.162c.969 0 1.371 1.24.588 1.81l-3.37 2.448a1 1 0 00-.364 1.118l1.287 3.957c.3.921-.755 1.688-1.54 1.118l-3.37-2.448a1 1 0 00-1.175 0l-3.37 2.448c-.784.57-1.838-.197-1.54-1.118l1.287-3.957a1 1 0 00-.364-1.118L2.05 9.384c-.783-.57-.38-1.81.588-1.81h4.162a1 1 0 00.95-.69l1.286-3.957z\" />\n            </svg>\n          ))}\n          {fractionalPart > 0 && (\n            <svg\n              className=\"size-4 text-inherit\"\n              fill=\"currentColor\"\n              viewBox=\"0 0 20 20\"\n            >\n              <defs>\n                <linearGradient id=\"half\">\n                  <stop\n                    offset={`${fractionalPart * 100}%`}\n                    stopColor=\"currentColor\"\n                  />\n                  <stop\n                    offset={`${fractionalPart * 100}%`}\n                    stopColor=\"rgb(209 213 219)\"\n                  />\n                </linearGradient>\n              </defs>\n              <path\n                d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.286 3.957a1 1 0 00.95.69h4.162c.969 0 1.371 1.24.588 1.81l-3.37 2.448a1 1 0 00-.364 1.118l1.287 3.957c.3.921-.755 1.688-1.54 1.118l-3.37-2.448a1 1 0 00-1.175 0l-3.37 2.448c-.784.57-1.838-.197-1.54-1.118l1.287-3.957a1 1 0 00-.364-1.118L2.05 9.384c-.783-.57-.38-1.81.588-1.81h4.162a1 1 0 00.95-.69l1.286-3.957z\"\n                fill=\"url(#half)\"\n              />\n            </svg>\n          )}\n          {[...Array(emptyStars)].map((_, index) => (\n            <svg\n              key={`empty-${index}`}\n              className=\"size-4 text-gray-300\"\n              fill=\"currentColor\"\n              viewBox=\"0 0 20 20\"\n            >\n              <path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.286 3.957a1 1 0 00.95.69h4.162c.969 0 1.371 1.24.588 1.81l-3.37 2.448a1 1 0 00-.364 1.118l1.287 3.957c.3.921-.755 1.688-1.54 1.118l-3.37-2.448a1 1 0 00-1.175 0l-3.37 2.448c-.784.57-1.838-.197-1.54-1.118l1.287-3.957a1 1 0 00-.364-1.118L2.05 9.384c-.783-.57-.38-1.81.588-1.81h4.162a1 1 0 00.95-.69l1.286-3.957z\" />\n            </svg>\n          ))}\n        </div>\n        <p className=\"sr-only\">{rating}</p>\n      </div>\n    );\n  },\n);\nRatingStars.displayName = 'RatingStars';\n",
      "type": "registry:ui",
      "target": "components/systaliko-ui/rating-stars.tsx"
    }
  ],
  "type": "registry:ui"
}