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:T24ef,import * as React from 'react' import { cn } from '@/lib/utils' // ── Icons ──────────────────────────────────────────────────────────────────── function StarIcon({ filled, half, gradientId }: { filled: boolean; half?: boolean; gradientId: string }) { return ( ) } function HeartIcon({ filled }: { filled: boolean }) { return ( ) } function CircleIcon({ filled }: { filled: boolean }) { return ( ) } // ── Types ──────────────────────────────────────────────────────────────────── type IconType = 'star' | 'heart' | 'circle' type SizeVariant = 'sm' | 'md' | 'lg' | 'xl' interface RatingProps extends Omit, 'onChange' | 'defaultValue'> { /** Controlled value */ value?: number /** Uncontrolled default value */ defaultValue?: number /** Maximum number of icons (default 5) */ max?: number /** Precision: 1 for whole, 0.5 for half stars */ precision?: number /** Icon type */ icon?: IconType /** Size variant */ size?: SizeVariant /** Disable interactions */ readOnly?: boolean /** Disable completely */ disabled?: boolean /** Called when value changes */ onChange?: (value: number) => void /** Called when hover value changes (null = mouse left) */ onHoverChange?: (value: number | null) => void className?: string } const sizeClasses: Record = { sm: '[&_svg]:h-4 [&_svg]:w-4', md: '[&_svg]:h-5 [&_svg]:w-5', lg: '[&_svg]:h-6 [&_svg]:w-6', xl: '[&_svg]:h-8 [&_svg]:w-8', } const iconLabel: Record = { star: 'stars', heart: 'hearts', circle: 'circles', } // "1 stars" reads wrong in an accessible name. Vue's Rating already singularises. const iconLabelFor = (icon: IconType, count: number) => count === 1 ? iconLabel[icon].slice(0, -1) : iconLabel[icon] // ── Component ──────────────────────────────────────────────────────────────── export const Rating = React.forwardRef(function Rating( { value: controlledValue, defaultValue = 0, max = 5, precision = 1, icon = 'star', size = 'md', readOnly = false, disabled = false, onChange, onHoverChange, className, ...props }, ref ) { const isControlled = controlledValue !== undefined const [internalValue, setInternalValue] = React.useState(defaultValue) // Unique gradient id per instance so multiple ratings don't share/clobber the // half-star definition (duplicate DOM ids). const gradientId = `rating-half-${React.useId().replace(/:/g, '')}` const currentValue = isControlled ? controlledValue! : internalValue const setValue = (next: number) => { if (!isControlled) setInternalValue(next) onChange?.(next) } const interactive = !readOnly && !disabled const groupRef = React.useRef(null) /** * Move DOM focus onto whichever star now holds the roving tabindex. * * Without this the focus ring stopped tracking the value after the first * arrow press, and Tab-ing back re-entered at a different star than the one * that looked focused — the classic broken roving-tabindex symptom. */ const focusActiveStar = (next: number) => { const index = Math.min(Math.max(Math.ceil(next), 1), max) const stars = groupRef.current?.querySelectorAll('button') stars?.[index - 1]?.focus() } const handleKeyDown = (e: React.KeyboardEvent) => { if (!interactive) return const step = precision let next = currentValue if (e.key === 'ArrowRight' || e.key === 'ArrowUp') { next = Math.min(max, currentValue + step) e.preventDefault() } else if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') { next = Math.max(0, currentValue - step) e.preventDefault() } else if (e.key === 'Home') { next = 0 e.preventDefault() } else if (e.key === 'End') { next = max e.preventDefault() } else { return } setValue(next) // The roving tabindex moves with the value; DOM focus has to follow it. focusActiveStar(next) } const handleMouseLeave = () => { onHoverChange?.(null) } const handleStarMouseMove = (_e: React.MouseEvent, starIndex: number) => { if (!interactive) return onHoverChange?.(starIndex) } const handleStarClick = (starIndex: number) => { if (!interactive) return setValue(starIndex) } const valueText = icon === 'heart' ? `${currentValue} out of ${max} hearts` : icon === 'circle' ? `${currentValue} out of ${max} circles` : `${currentValue} out of ${max} stars` function renderIcon(index: number) { const filled = index <= currentValue const half = !filled && index - 0.5 <= currentValue && precision === 0.5 if (icon === 'heart') return if (icon === 'circle') return return } return ( // role="group" of toggle buttons (roving tabindex), not role="slider": a // focusable slider wrapping focusable buttons is a nested-interactive // violation (axe). Arrow keys still work — keydown bubbles from the stars.

{ groupRef.current = node if (typeof ref === 'function') ref(node) else if (ref) ref.current = node }} role="group" aria-label={`Rating: ${valueText}`} // A read-only rating is still meaningful content, so expose it as // read-only rather than removing it from the a11y tree entirely. aria-readonly={readOnly || undefined} aria-disabled={disabled || undefined} onKeyDown={handleKeyDown} onMouseLeave={handleMouseLeave} {...props} className={cn( 'flex items-center gap-0.5 outline-none', sizeClasses[size], disabled && 'opacity-50 pointer-events-none', className )} > {Array.from({ length: max }, (_, i) => { const starIndex = i + 1 // Roving tabindex: exactly one star must be tabbable. Clamp first — // an out-of-range value would match no star and make the whole group // unreachable by keyboard. const activeIndex = Math.min(Math.max(Math.ceil(currentValue), 1), max) const isFocusable = interactive && starIndex === activeIndex return ( ) })}

) }) Rating.displayName = 'Rating' 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","class-variance-authority",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/class-variance-authority","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":"class-variance-authority"}]]}]}],["$","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":"@boldkit","registryDependencies":["@boldkit/utils"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/default/ui/rating.tsx","content":"$52","type":"registry:ui","target":"components/ui/rating.tsx"}],"className":"h-[70svh] min-h-80"}]]}]