51: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"] 52: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"] 53:Tb65,"use client"; import * as React from "react"; import { cn } from "@/lib/utils"; import { Tooltip, TooltipContent, TooltipTrigger, } from "@/components/ui/tooltip"; export interface ProgressStep { label?: string; tooltip?: string; } export interface ProgressProps { value?: number; animated?: boolean; filledClassName?: string; unfilledClassName?: string; currentClassName?: string; className?: string; } export function useProgressHelpers({ value = 0, stepCount, highlightCurrent = false, animated = true, filledClassName, unfilledClassName, currentClassName, }: { value?: number; stepCount: number; highlightCurrent?: boolean; animated?: boolean; filledClassName?: string; unfilledClassName?: string; currentClassName?: string; }) { const transitionClass = animated ? "transition-all duration-500" : ""; const clampedValue = Math.min(Math.max(value, 0), 100); const getStepState = (index: number) => { const midpoint = ((index + 0.5) / stepCount) * 100; const isFilled = value >= midpoint; const nextMidpoint = ((index + 1.5) / stepCount) * 100; const isCurrent = isFilled && value < nextMidpoint; return { isFilled, isCurrent }; }; const getStateClasses = (isFilled: boolean, isCurrent: boolean) => { if (isCurrent) { return cn( "bg-primary", highlightCurrent ? "ring-2 ring-primary/70" : "", currentClassName, ); } return isFilled ? cn("bg-primary", filledClassName) : cn("bg-muted", unfilledClassName); }; return { transitionClass, clampedValue, getStepState, getStateClasses, }; } export function StepLabel({ label }: { label?: string }) { if (!label) return null; return ( {label} ); } export function WithTooltip({ children, tooltip, }: { children: React.ReactElement; tooltip?: string; }) { if (!tooltip) return children; return ( {children} {tooltip} ); } export const ProgressContainer = React.forwardRef< HTMLDivElement, { children: React.ReactNode; hasLabels: boolean; } >(({ children, hasLabels }, ref) => { return (

{children}

); }); ProgressContainer.displayName = "ProgressContainer"; export function renderStepsArray( count: number, steps: ProgressStep[] | undefined, renderItem: (index: number, step?: ProgressStep) => React.ReactNode, ) { return Array.from({ length: count }, (_, index) => renderItem(index, steps?.[index]), ); } 54:Td03,"use client"; import { forwardRef } from "react"; import * as ProgressPrimitive from "@radix-ui/react-progress"; import { cn } from "@/lib/utils"; import { type ProgressProps, type ProgressStep, useProgressHelpers, ProgressContainer, StepLabel, WithTooltip, renderStepsArray, } from "./progress"; export type ProgressStretchProps = ProgressProps & { highlightCurrent?: boolean; cellGap?: number; currentWeight?: number; collapsedWeight?: number; steps?: ProgressStep[] | number; }; export const ProgressStretch = forwardRef( ( { className, value = 0, animated = true, highlightCurrent = false, filledClassName, unfilledClassName, currentClassName, cellGap = 4, currentWeight = 8, collapsedWeight = 1, steps, }, ref, ) => { const effectiveStepCount = Array.isArray(steps) ? steps.length : typeof steps === "number" ? steps : 4; const hasLabels = Array.isArray(steps) ? steps.some((s) => s.label) : false; const { transitionClass, getStepState, getStateClasses } = useProgressHelpers({ value, stepCount: effectiveStepCount, highlightCurrent, animated, filledClassName, unfilledClassName, currentClassName, }); const hasCurrentCell = Array.from( { length: effectiveStepCount }, (_, i) => i, ).some((i) => getStepState(i).isCurrent); const minCellWidth = 8; return (

{renderStepsArray( effectiveStepCount, Array.isArray(steps) ? steps : undefined, (index, step) => { const { isFilled, isCurrent } = getStepState(index); const flexValue = hasCurrentCell ? isCurrent ? `${currentWeight} 1 0` : `${collapsedWeight} 1 ${minCellWidth}px` : `1 1 0`; return (

); }, )}

); }, ); ProgressStretch.displayName = "ProgressStretch";50:["$","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-progress",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40radix-ui%2Freact-progress","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-progress"}]]}]}]]}],["$","$L51",null,{"namespace":"@turbopills-ui","registryDependencies":["tooltip"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"registry/turbopills/ui/progress/progress.tsx","content":"$53","type":"registry:component","target":"components/turbopills/ui/progress/progress.tsx"},{"path":"registry/turbopills/ui/progress/progress-stretch.tsx","content":"$54","type":"registry:component","target":"components/turbopills/ui/progress/progress-stretch.tsx"}],"className":"h-[70svh] min-h-80"}]]}]