'use client'; import { cn } from '@/lib/utils'; import { useControllableState } from '@radix-ui/react-use-controllable-state'; import { type LucideProps, StarIcon } from 'lucide-react'; import { Children, cloneElement, createContext, useCallback, useContext, useEffect, useRef, useState, } from 'react'; import type { KeyboardEvent, MouseEvent, ReactElement, ReactNode } from 'react'; type RatingContextValue = { value: number; readOnly: boolean; hoverValue: number | null; focusedStar: number | null; handleValueChange: ( event: MouseEvent | KeyboardEvent, value: number ) => void; handleKeyDown: (event: KeyboardEvent) => void; setHoverValue: (value: number | null) => void; setFocusedStar: (value: number | null) => void; }; const RatingContext = createContext(null); const useRating = () => { const context = useContext(RatingContext); if (!context) { throw new Error('useRating must be used within a Rating component'); } return context; }; export type RatingButtonProps = LucideProps & { index?: number; icon?: ReactElement; }; export const RatingButton = ({ index: providedIndex, size = 20, className, icon = , }: RatingButtonProps) => { const { value, readOnly, hoverValue, focusedStar, handleValueChange, handleKeyDown, setHoverValue, setFocusedStar, } = useRating(); const index = providedIndex ?? 0; const isActive = index < (hoverValue ?? focusedStar ?? value ?? 0); let tabIndex = -1; if (!readOnly) { tabIndex = value === index + 1 ? 0 : -1; } return ( ); }; export type RatingProps = { defaultValue?: number; value?: number; onChange?: ( event: MouseEvent | KeyboardEvent, value: number ) => void; onValueChange?: (value: number) => void; readOnly?: boolean; className?: string; children?: ReactNode; }; export const Rating = ({ value: controlledValue, onValueChange: controlledOnValueChange, defaultValue, onChange, readOnly = false, className, children, ...props }: RatingProps) => { const [hoverValue, setHoverValue] = useState(null); const [focusedStar, setFocusedStar] = useState(null); const containerRef = useRef(null); const [value, onValueChange] = useControllableState({ defaultProp: defaultValue, prop: controlledValue, onChange: controlledOnValueChange, }); const handleValueChange = useCallback( ( event: MouseEvent | KeyboardEvent, newValue: number ) => { if (!readOnly) { onChange?.(event, newValue); onValueChange?.(newValue); } }, [readOnly, onChange, onValueChange] ); const handleKeyDown = useCallback( (event: KeyboardEvent) => { if (readOnly) { return; } const total = Children.count(children); let newValue = focusedStar !== null ? focusedStar : (value ?? 0); switch (event.key) { case 'ArrowRight': if (event.shiftKey || event.metaKey) { newValue = total; } else { newValue = Math.min(total, newValue + 1); } break; case 'ArrowLeft': if (event.shiftKey || event.metaKey) { newValue = 1; } else { newValue = Math.max(1, newValue - 1); } break; default: return; } event.preventDefault(); setFocusedStar(newValue); handleValueChange(event, newValue); }, [focusedStar, value, children, readOnly, handleValueChange] ); useEffect(() => { if (focusedStar !== null && containerRef.current) { const buttons = containerRef.current.querySelectorAll('button'); buttons[focusedStar - 1]?.focus(); } }, [focusedStar]); const contextValue: RatingContextValue = { value: value ?? 0, readOnly, hoverValue, focusedStar, handleValueChange, handleKeyDown, setHoverValue, setFocusedStar, }; return (

setHoverValue(null)} {...props} > {Children.map(children, (child, index) => { if (!child) { return null; } return cloneElement(child as ReactElement, { index, }); })}

); };