50:I[707087,["/_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"],"RegistryDependencies"] 51: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"] 52:T1792,"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, }); })}

); }; 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@radix-ui/react-use-controllable-state",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40radix-ui%2Freact-use-controllable-state","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@radix-ui/react-use-controllable-state"}]]}]}],["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L50",null,{"namespace":"@kibo-ui","registryDependencies":[]}]]}],null]}],["$","$L51",null,{"files":[{"path":"index.tsx","content":"$52","type":"registry:ui","target":"components/kibo-ui/rating/index.tsx"}],"className":"h-[70svh] min-h-80"}]]}]