{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "star-rating",
  "title": "Star Rating",
  "description": "An interactive star rating component.",
  "dependencies": [
    "lucide-react",
    "motion",
    "clsx",
    "tailwind-merge"
  ],
  "registryDependencies": [
    "https://optics.agusmayol.com.ar/r/utils.json"
  ],
  "files": [
    {
      "path": "registry/optics/star-rating.jsx",
      "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport { Star } from \"lucide-react\";\nimport { motion } from \"motion/react\";\nimport { cn } from \"@/registry/optics/lib/utils\";\n\nexport function StarRating({\n\ttotalStars = 5,\n\tdefaultValue = 0,\n\tonRate = undefined,\n\tsize = \"md\",\n\tclassName = \"\",\n\tdisabled = false,\n}) {\n\tconst [rating, setRating] = useState(defaultValue);\n\tconst [hover, setHover] = useState(0);\n\n\tconst handleRating = (star) => {\n\t\tif (disabled) return;\n\t\tsetRating(star);\n\t\tonRate?.(star);\n\t};\n\n\tconst starSizes = {\n\t\tsm: \"h-4 w-4\",\n\t\tmd: \"h-6 w-6\",\n\t\tlg: \"h-8 w-8\",\n\t};\n\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(\n\t\t\t\t\"flex items-center gap-2\",\n\t\t\t\tdisabled && \"opacity-50\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t>\n\t\t\t{Array.from({ length: totalStars }, (_, index) => index + 1).map(\n\t\t\t\t(star) => (\n\t\t\t\t\t<motion.button\n\t\t\t\t\t\tkey={star}\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\"relative focus-visible:outline-none focus-visible:ring-2\",\n\t\t\t\t\t\t\t\"focus-visible:ring-ring focus-visible:ring-offset-2\",\n\t\t\t\t\t\t\tdisabled && \"cursor-not-allowed\",\n\t\t\t\t\t\t)}\n\t\t\t\t\t\tonClick={() => handleRating(star)}\n\t\t\t\t\t\tonMouseEnter={() => !disabled && setHover(star)}\n\t\t\t\t\t\tonMouseLeave={() => !disabled && setHover(0)}\n\t\t\t\t\t\twhileHover={!disabled ? { scale: 1.3, rotate: -10 } : undefined}\n\t\t\t\t\t\twhileTap={!disabled ? { scale: 0.9, rotate: 15 } : undefined}\n\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t>\n\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\"transition-colors duration-300\",\n\t\t\t\t\t\t\t\t(hover || rating) >= star\n\t\t\t\t\t\t\t\t\t? \"text-yellow-400 dark:text-yellow-300\"\n\t\t\t\t\t\t\t\t\t: \"text-muted\",\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\tinitial={{ scale: 1 }}\n\t\t\t\t\t\t\tanimate={{\n\t\t\t\t\t\t\t\tscale: (hover || rating) >= star ? 1.2 : 1,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\ttransition={{\n\t\t\t\t\t\t\t\tduration: 0.3,\n\t\t\t\t\t\t\t\tease: \"easeOut\",\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Star\n\t\t\t\t\t\t\t\tclassName={cn(starSizes[size], \"fill-current stroke-[1.5px]\")}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</motion.div>\n\t\t\t\t\t</motion.button>\n\t\t\t\t),\n\t\t\t)}\n\t\t</div>\n\t);\n}\n\nStarRating.displayName = \"StarRating\";\n",
      "type": "registry:component",
      "target": "components/optics/star-rating.jsx"
    }
  ],
  "type": "registry:component"
}