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:T17d4,"use client"; import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"; import { cva } from "class-variance-authority"; import { StarIcon } from "lucide-react"; import { useState, type ComponentProps } from "react"; import { cn } from "@/registry/default/lib/utils"; const ratingVariants = cva("inline-flex w-fit items-center", { variants: { size: { sm: "gap-0.5 [&_[data-slot=rating-star]]:size-4", default: "gap-0.5 [&_[data-slot=rating-star]]:size-5", lg: "gap-1 [&_[data-slot=rating-star]]:size-6", }, }, defaultVariants: { size: "default", }, }); type RatingSize = "sm" | "default" | "lg"; const defaultValueLabel = (value: number, max: number) => `${value} out of ${max}`; const defaultStarLabel = (stars: number) => `${stars} ${stars === 1 ? "star" : "stars"}`; /** * One star. `fill` goes from 0 to 1: the filled copy is clipped to that * share of the width, over an empty star. Both copies carry `data-filled` * so their colours can be changed from the Rating's className. */ function Star({ fill, className }: { fill: number; className?: string }) { return ( = 1 ? "full" : fill > 0 ? "partial" : "empty"} className={cn("relative inline-flex shrink-0", className)} > ); } interface RatingProps extends Omit< ComponentProps<"div">, "defaultValue" | "onChange" | "dir" | "children" > { /** Number of stars picked (controlled). Read-only ratings can be fractional, like 4.5. */ value?: number; /** Number of stars picked at first (uncontrolled). */ defaultValue?: number; onValueChange?: (value: number) => void; /** Number of stars. */ max?: number; /** Show the value without letting it change. */ readOnly?: boolean; disabled?: boolean; required?: boolean; size?: RatingSize; /** Submits the value with a form under this name. */ name?: string; dir?: "ltr" | "rtl"; /** Accessible name of the rating. */ "aria-label"?: string; /** Read-only: how the value is read to screen readers. */ getValueLabel?: (value: number, max: number) => string; /** Interactive: the accessible name of each star. */ starLabel?: (stars: number) => string; } /** * Stars for giving or showing a score. Interactive, it is a radio group * with one radio per star: Tab reaches it, arrow keys change the score, * and each star is read as "3 stars"; pointing at a star previews it * (`data-hovered`). With `readOnly` it is a single image read as * "Rating: 4.5 out of 5", and fractional values fill part of a star. * Filled stars use `text-warning`, empty ones `text-muted-foreground/40`; * restyle them with `[&_[data-filled=true]]:text-primary` on the Rating. * Nothing moves, so there is nothing to reduce for reduced motion. * * @example * * */ function Rating({ value: valueProp, defaultValue = 0, onValueChange, max = 5, readOnly = false, disabled, required, size = "default", name, dir, "aria-label": label = "Rating", getValueLabel = defaultValueLabel, starLabel = defaultStarLabel, className, ...props }: RatingProps) { const [internal, setInternal] = useState(defaultValue); const [hovered, setHovered] = useState(null); const count = Math.max(1, Math.floor(max)); const value = Math.min(Math.max(valueProp ?? internal, 0), count); const stars = Array.from({ length: count }, (_, index) => index + 1); if (readOnly) { return (

{stars.map((star) => ( ))}

); } const picked = Math.round(value); const shown = hovered ?? picked; const change = (next: string) => { const number = Number(next); if (valueProp === undefined) setInternal(number); onValueChange?.(number); }; return ( 0 ? String(picked) : ""} onValueChange={change} orientation="horizontal" loop={false} disabled={disabled} required={required} name={name} dir={dir} className={cn(ratingVariants({ size }), className)} onPointerLeave={() => setHovered(null)} {...props} > {stars.map((star) => ( { if (event.pointerType === "mouse" && !disabled) setHovered(star); }} > ))} ); } export { Rating, ratingVariants, type RatingProps, type RatingSize }; 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-radio-group@^1.4.7",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40radix-ui%2Freact-radio-group","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-radio-group@^1.4.7"}]]}]}],["$","li","class-variance-authority@^0.7.1",{"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@^0.7.1"}]]}]}],["$","li","lucide-react@^1.48.0",{"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@^1.48.0"}]]}]}]]}],["$","$L50",null,{"namespace":"@corsair-ui","registryDependencies":["@corsair-ui/utils"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/default/ui/rating.tsx","content":"$52","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]