{
  "name": "face-rating-gradient",
  "type": "registry:component",
  "dependencies": [
    "lucide-react",
    "tinycolor2"
  ],
  "files": [
    {
      "type": "registry:component",
      "content": "\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport {\n  AngryIcon,\n  FrownIcon,\n  LaughIcon,\n  MehIcon,\n  SmileIcon,\n} from \"lucide-react\";\nimport * as React from \"react\";\nimport tinycolor from \"tinycolor2\";\n\ninterface FaceRatingGradientProps {\n  value: number;\n  onChange: (value: number) => void;\n  className?: string;\n  iconSize?: number;\n  baseColor?: string;\n}\n\nconst FaceRating_Gradient = ({\n  baseColor = \"#22c55e\", // Default green color\n  className,\n  iconSize = 24,\n  onChange,\n  value,\n}: FaceRatingGradientProps) => {\n  const generateColorGradient = (baseColor: string, steps: number) => {\n    const color = tinycolor(baseColor);\n    const hsl = color.toHsl();\n\n    return Array.from({ length: steps }, (_, i) => {\n      const lightness = hsl.l - i * 0.1;\n      return tinycolor({ ...hsl, l: Math.max(0.2, lightness) }).toHexString();\n    }).reverse();\n  };\n\n  const colors = generateColorGradient(baseColor, 5);\n\n  const handleIconClick = (index: number) => {\n    const newRating = index + 1;\n    onChange(newRating);\n  };\n\n  const isActive = (index: number) => {\n    return index < value;\n  };\n\n  const icons = [\n    <AngryIcon\n      key=\"angry\"\n      size={iconSize}\n      color={isActive(0) ? colors[0] : \"gray\"}\n      onClick={() => handleIconClick(0)}\n      className=\"transition-transform duration-200 hover:scale-110\"\n      style={{ cursor: \"pointer\" }}\n    />,\n    <FrownIcon\n      key=\"frown\"\n      size={iconSize}\n      color={isActive(1) ? colors[1] : \"gray\"}\n      onClick={() => handleIconClick(1)}\n      className=\"transition-transform duration-200 hover:scale-110\"\n      style={{ cursor: \"pointer\" }}\n    />,\n    <MehIcon\n      key=\"meh\"\n      size={iconSize}\n      color={isActive(2) ? colors[2] : \"gray\"}\n      onClick={() => handleIconClick(2)}\n      className=\"transition-transform duration-200 hover:scale-110\"\n      style={{ cursor: \"pointer\" }}\n    />,\n    <SmileIcon\n      key=\"smile\"\n      size={iconSize}\n      color={isActive(3) ? colors[3] : \"gray\"}\n      onClick={() => handleIconClick(3)}\n      className=\"transition-transform duration-200 hover:scale-110\"\n      style={{ cursor: \"pointer\" }}\n    />,\n    <LaughIcon\n      key=\"laugh\"\n      size={iconSize}\n      color={isActive(4) ? colors[4] : \"gray\"}\n      onClick={() => handleIconClick(4)}\n      className=\"transition-transform duration-200 hover:scale-110\"\n      style={{ cursor: \"pointer\" }}\n    />,\n  ];\n\n  return (\n    <div className={cn(\"flex items-center gap-x-0.5\", className)}>{icons}</div>\n  );\n};\n\nexport default FaceRating_Gradient;\n",
      "path": "/components/commerce-ui/components/face-rating/gradient/face-rating-gradient.tsx",
      "target": "components/commerce-ui/face-rating-gradient.tsx"
    }
  ]
}