52: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"] 53: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"] 54:T1be2,"use client"; import { Progress as ProgressPrimitive } from "@base-ui/react/progress"; import { cn } from "@/lib/utils"; import { motion, useReducedMotion } from "motion/react"; import { type ComponentProps, createContext, useContext, useRef } from "react"; import { EASE_IN_OUT, LOOP_CLASS, LOOP_REPEAT_DELAY, loopTransition, SPRING_DEFAULT, useLoopInView, } from "@/components/smoothui/lib/animation"; export type ProgressSize = "sm" | "md" | "lg"; export interface ProgressProps { /** Accessible name when there is no visible `label` */ "aria-label"?: string; /** Optional CSS class for the root */ className?: string; /** Visible label rendered above the track */ label?: string; /** Maximum value (default 100) */ max?: number; /** Minimum value (default 0) */ min?: number; /** Show the formatted value next to the label */ showValue?: boolean; /** Track height: `sm`, `md` (default) or `lg` */ size?: ProgressSize; /** Current value. Pass `null` for an indeterminate bar. */ value: number | null; } export type ProgressRootProps = Omit< ComponentProps, "className" > & { className?: string }; export type ProgressTrackProps = Omit< ComponentProps, "className" > & { className?: string; size?: ProgressSize }; export type ProgressIndicatorProps = Omit< ComponentProps, "className" | "render" > & { className?: string }; export type ProgressLabelProps = Omit< ComponentProps, "className" > & { className?: string }; export type ProgressValueProps = Omit< ComponentProps, "className" > & { className?: string }; const TRACK_SIZE: Record = { lg: "h-3", md: "h-2", sm: "h-1", }; const INDETERMINATE_WIDTH = "40%"; const INDETERMINATE_DURATION = 1.4; const FULL_PERCENT = 100; /** Normalized 0–100 percentage, or `null` when indeterminate. */ const toPercent = (value: number | null, min: number, max: number) => { if (value === null || max <= min) { return null; } const ratio = ((value - min) / (max - min)) * FULL_PERCENT; return Math.min(FULL_PERCENT, Math.max(0, ratio)); }; const ProgressPercentContext = createContext(null); /** * Progress root — groups label, value, and track. * Renders `role="progressbar"` with value semantics from Base UI. */ export const ProgressRoot = ({ className, max = FULL_PERCENT, min = 0, value, ...props }: ProgressRootProps) => ( ); export const ProgressTrack = ({ className, size = "md", ...props }: ProgressTrackProps) => ( ); /** * Animated fill. Determinate: full-width bar clipped via `translateX` so * rounded caps stay circular. Indeterminate: a sliding bar. Both are * transform-only; reduced motion is instant / static. */ export const ProgressIndicator = ({ className, ...props }: ProgressIndicatorProps) => { const percent = useContext(ProgressPercentContext); const shouldReduceMotion = useReducedMotion(); const indicatorRef = useRef(null); // The track clips the sliding bar, so watch the track, not the bar. const inView = useLoopInView(indicatorRef, { observeParent: true }); const isIndeterminate = percent === null; const isLooping = isIndeterminate && !shouldReduceMotion && inView; let animate: { opacity?: number; transform: string | string[] }; let initial: { opacity?: number; transform: string } | false = false; let transition: object = SPRING_DEFAULT; if (isIndeterminate) { if (shouldReduceMotion) { // Full bar at low opacity — a static 40%-wide bar reads as determinate animate = { opacity: 0.4, transform: "translateX(0%)" }; initial = { opacity: 0.4, transform: "translateX(0%)" }; transition = { duration: 0 }; } else if (inView) { animate = { transform: ["translateX(-100%)", "translateX(250%)"] }; initial = { transform: "translateX(-100%)" }; transition = loopTransition( { duration: INDETERMINATE_DURATION, ease: EASE_IN_OUT }, LOOP_REPEAT_DELAY.progress ); } else { // Off screen: rest at the start instead of looping unseen. animate = { transform: "translateX(-100%)" }; initial = { transform: "translateX(-100%)" }; transition = { duration: 0 }; } } else { // translateX keeps rounded ends; scaleX would squash them into ellipses animate = { transform: `translateX(${(percent ?? 0) - FULL_PERCENT}%)`, }; if (shouldReduceMotion) { transition = { duration: 0 }; } } return ( } {...props} /> ); }; export const ProgressLabel = ({ className, ...props }: ProgressLabelProps) => ( ); export const ProgressValue = ({ className, ...props }: ProgressValueProps) => ( ); /** * SmoothUI Progress — Base UI twin (default). * Convenience API; use the compound parts for custom layouts. */ export default function Progress({ "aria-label": ariaLabel, className, label, max, min, showValue = false, size = "md", value, }: ProgressProps) { const hasHeader = Boolean(label) || (showValue && value !== null); return ( {hasHeader ? (

{label ? {label} : } {showValue && value !== null ? : null}

) : null} ); } 51:["$","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","@base-ui/react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40base-ui%2Freact","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":"@base-ui/react"}]]}]}],["$","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"}]]}]}]]}],["$","$L52",null,{"namespace":"@smoothui","registryDependencies":["https://smoothui.dev/r/lib.json","https://smoothui.dev/r/tokens.json"]}]]}],null]}],["$","$L53",null,{"files":[{"path":"index.tsx","content":"$54","type":"registry:ui","target":"components/smoothui/progress/index.tsx"}],"className":"h-[70svh] min-h-80"}]]}]