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:T1ad5,"use client"; import * as React from "react"; import { motion, useReducedMotion, useSpring, useTransform } from "motion/react"; import { cva, type VariantProps } from "class-variance-authority"; import { cn } from "@/lib/utils"; const richProgressVariants = cva("flex w-full max-w-xl flex-col gap-1.5 select-none", { variants: { color: { default: "text-foreground", blue: "text-blue-500", purple: "text-purple-500", pink: "text-pink-500", red: "text-red-600", orange: "text-orange-500", yellow: "text-yellow-500", green: "text-green-500", teal: "text-teal-500", cyan: "text-cyan-500", indigo: "text-indigo-500", violet: "text-violet-500", rose: "text-rose-500", amber: "text-amber-500", lime: "text-lime-500", sky: "text-sky-500", emerald: "text-emerald-500", }, }, defaultVariants: { color: "default", }, }); const knobVariants = cva( [ "pointer-events-none absolute top-1/2 -translate-x-1/2 -translate-y-1/2", "bg-background dark:bg-foreground ring-border ring-1", ], { variants: { knob: { circle: "rounded-full", square: "rounded-none", }, size: { sm: "size-3.5", default: "size-4.5", lg: "size-5", }, }, defaultVariants: { knob: "square", size: "default", }, }, ); const trackHeights = { sm: "h-1", default: "h-1.5", lg: "h-2" } as const; export type RichProgressColor = NonNullable["color"]>; export type RichProgressSize = keyof typeof trackHeights; export type RichProgressKnob = NonNullable["knob"]>; export interface RichProgressProps { value: number; onChange?: (value: number) => void; label?: string; color?: RichProgressColor; size?: RichProgressSize; showValue?: boolean; valueLabel?: string; knob?: RichProgressKnob | boolean; className?: string; trackClassName?: string; fillClassName?: string; } const spring = { stiffness: 520, damping: 42, mass: 0.5 }; const RichProgress = ({ value, onChange, label, color = "default", size = "default", showValue = true, valueLabel, knob = "square", className, trackClassName, fillClassName, }: RichProgressProps) => { const reduceMotion = useReducedMotion(); const clamped = Math.min(100, Math.max(0, value)); const knobShape: RichProgressKnob | null = knob === true ? "square" : knob === false ? null : knob; const trackRef = React.useRef(null); const draggingRef = React.useRef(false); const [dragging, setDragging] = React.useState(false); const springValue = useSpring(clamped, spring); React.useEffect(() => { if (reduceMotion) springValue.jump(clamped); else springValue.set(clamped); }, [clamped, reduceMotion, springValue]); const width = useTransform(springValue, (v) => `${v}%`); const updateFromPointer = (clientX: number) => { const track = trackRef.current; if (!track || !onChange) return; const rect = track.getBoundingClientRect(); if (rect.width === 0) return; const percentage = ((clientX - rect.left) / rect.width) * 100; onChange(Math.round(Math.min(100, Math.max(0, percentage)))); }; const endDrag = (event: React.PointerEvent) => { draggingRef.current = false; setDragging(false); if (event.currentTarget.hasPointerCapture(event.pointerId)) { event.currentTarget.releasePointerCapture(event.pointerId); } }; const formattedValue = clamped.toFixed(2).replace(/\.?0+$/, "") || "0"; const motionTransition = reduceMotion ? { duration: 0 } : { type: "spring" as const, ...spring }; return (

{(label || showValue) && (

{label && {label}} {showValue && ( {valueLabel ?? formattedValue} )}

)}

{ if (!onChange || event.button !== 0) return; draggingRef.current = true; setDragging(true); event.currentTarget.setPointerCapture(event.pointerId); updateFromPointer(event.clientX); }} onPointerMove={(event) => { if (draggingRef.current) updateFromPointer(event.clientX); }} onPointerUp={endDrag} onPointerCancel={endDrag} onKeyDown={(event) => { if (!onChange) return; const moves: Record = { ArrowRight: clamped + 1, ArrowUp: clamped + 1, ArrowLeft: clamped - 1, ArrowDown: clamped - 1, PageUp: clamped + 10, PageDown: clamped - 10, Home: 0, End: 100, }; if (!(event.key in moves)) return; event.preventDefault(); onChange(Math.min(100, Math.max(0, moves[event.key]))); }} className={cn( "relative w-full touch-none py-2 outline-none", onChange && "cursor-pointer", "focus-visible:ring-ring focus-visible:ring-offset-background focus-visible:ring-2 focus-visible:ring-offset-2", )} >

{knobShape && ( )}

); }; RichProgress.displayName = "RichProgress"; export { RichProgress, richProgressVariants, knobVariants }; 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","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","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":"motion"}]]}]}],["$","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"}]]}]}]]}],["$","$L50",null,{"namespace":"@clover-ui","registryDependencies":[]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/clover-ui/rich-progress.tsx","content":"$52","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]