Rating Group Advanced

1"use client";
2 
3import * as React from "react";
4import { StarIcon, HeartIcon } from "lucide-react";
5import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
6import { cn } from "@/lib/utils";
7 
8interface RatingGroupAdvancedProps {
9  value?: string;
10  onValueChange?: (value: string) => void;
11  max?: number;
12  className?: string;
13  disabled?: boolean;
14  readOnly?: boolean;
15  size?: "sm" | "default" | "lg";
16  variant?: "star" | "heart";
17  allowHalf?: boolean;
18  emptyIcon?: React.ComponentType<{ className?: string }>;
19  filledIcon?: React.ComponentType<{ className?: string }>;
20  colors?: {
21    filled?: string;
22    empty?: string;
23    hover?: string;
24  };
25  allowClear?: boolean;
26}
27 
28const defaultColors = {
29  filled: "fill-yellow-400 text-yellow-400",
30  empty: "text-muted-foreground/50",
31  hover: "text-yellow-300",
32};
33 
34const iconVariants = {
35  star: StarIcon,
36  heart: HeartIcon,
37};
38 
39function RatingGroupAdvanced({
40  value = "0",
41  onValueChange,
42  max = 5,
43  className,
44  disabled = false,
45  readOnly = false,
46  size = "default",
47  variant = "star",
48  allowHalf = false,
49  emptyIcon,
50  filledIcon,
51  colors = defaultColors,
52  allowClear = false,
53  ...props
54}: RatingGroupAdvancedProps) {
55  const [hoveredValue, setHoveredValue] = React.useState<number | null>(null);
56 
57  const currentValue = React.useMemo(() => parseFloat(value || "0"), [value]);
58  const displayValue = hoveredValue ?? currentValue;
59 
60  const EmptyIcon = emptyIcon || iconVariants[variant];
61  const FilledIcon = filledIcon || iconVariants[variant];
62 
63  const indices = React.useMemo(
64    () => Array.from({ length: max }, (_, i) => i + 1),
65    [max],
66  );
67 
68  const handleMouseEnter = React.useCallback(
69    (starValue: number, isHalf?: boolean) => {
70      if (!disabled && !readOnly) {
71        const finalValue = allowHalf && isHalf ? starValue - 0.5 : starValue;
72        setHoveredValue(finalValue);
73      }
74    },
75    [disabled, readOnly, allowHalf],
76  );
77 
78  const handleMouseLeave = React.useCallback(() => {
79    setHoveredValue(null);
80  }, []);
81 
82  const handleClick = React.useCallback(
83    (starValue: number, isHalf?: boolean) => {
84      if (!disabled && !readOnly && onValueChange) {
85        const finalValue = allowHalf && isHalf ? starValue - 0.5 : starValue;
86        const newValue =
87          allowClear && currentValue === finalValue
88            ? "0"
89            : finalValue.toString();
90        onValueChange(newValue);
91      }
92    },
93// … truncated