{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "ratings",
  "type": "registry:ui",
  "title": "Ratings",
  "description": "Displays a static rating visualization with customizable stars and styling",
  "dependencies": [
    "react"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/react/ui/ratings.tsx",
      "content": "import React from \"react\";\n\ninterface RatingsProps {\n  rating?: number;\n  maxRating?: number;\n  iconCount?: number;\n  iconSize?: string;\n  icon?: string;\n  className?: string;\n  ariaLabel?: string;\n}\n\nexport const Ratings: React.FC<RatingsProps> = ({\n  rating = 2.5,\n  maxRating = 5,\n  iconCount = 5,\n  iconSize = \"24px\",\n  icon = \"url(\\\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2 2 20 20'%3E%3Cpath d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/%3E%3C/svg%3E\\\")\",\n  className,\n  ariaLabel,\n}) => {\n  const ratingPercentage = Math.max(0, Math.min(rating / maxRating, 1));\n\n  const defaultAriaLabel = `Rating: ${rating} out of ${maxRating}`;\n  const finalAriaLabel = ariaLabel || defaultAriaLabel;\n\n  const styles: React.CSSProperties = {\n    \"--rating-icon-count\": iconCount,\n    \"--rating-icon-size\": iconSize,\n    \"--rating-percentage\": ratingPercentage,\n    \"--rating-icon\": icon,\n  } as React.CSSProperties;\n\n  return (\n    <div\n      className={`${className} rating wrapper`}\n      style={styles as React.CSSProperties}\n      role=\"meter\"\n      aria-label={finalAriaLabel}\n      aria-valuemin={0}\n      aria-valuemax={maxRating}\n      aria-valuenow={rating}\n    ></div>\n  );\n};\n\nexport default Ratings;\n",
      "type": "registry:ui",
      "target": "react/ui/ratings.tsx"
    }
  ]
}