4e:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 4f:T1580,'use client' import { useControllableState } from '@radix-ui/react-use-controllable-state' import { type LucideProps, StarIcon } from 'lucide-react' import type { KeyboardEvent, MouseEvent, ReactElement, ReactNode } from 'react' import { Children, cloneElement, createContext, useCallback, useContext, useEffect, useRef, useState, } from 'react' import { cn } from '@/lib/utils' 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 } const handleClick = useCallback( (event: MouseEvent) => { handleValueChange(event, index + 1) }, [handleValueChange, index], ) const handleMouseEnter = useCallback(() => { if (!readOnly) { setHoverValue(index + 1) } }, [readOnly, setHoverValue, index]) const handleFocus = useCallback(() => { setFocusedStar(index + 1) }, [setFocusedStar, index]) const handleBlur = useCallback(() => { setFocusedStar(null) }, [setFocusedStar]) 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 = 0, 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)} ref={containerRef} role="radiogroup" {...props} > {Children.map(children, (child, index) => { if (!child) { return null } return cloneElement(child as ReactElement, { index, }) })}

) } 4d:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L4e",null,{"files":[{"path":"src/components/ui/rating.tsx","content":"$4f","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]