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: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]), ); } 55:T1805,"use client"; import { forwardRef, useRef, useState, useEffect, useMemo } from "react"; import { cn } from "@/lib/utils"; import { type ProgressProps, type ProgressStep, useProgressHelpers, ProgressContainer, StepLabel, WithTooltip, } from "./progress"; const STEP_SIZE = 32; const STEP_GAP = 4; const CONNECTOR_HEIGHT = 4; export type ProgressNumberedProps = ProgressProps & { highlightCurrent?: boolean; steps?: ProgressStep[] | number; }; function getVisibleIndices( total: number, maxSlots: number, activeIdx: number, ): number[] | null { if (total <= maxSlots) return null; const active = Math.max(0, Math.min(total - 1, activeIdx)); const pinned = new Set([0, total - 1, active]); for (let d = 1; pinned.size < maxSlots; d++) { if (active - d >= 0) pinned.add(active - d); if (pinned.size < maxSlots && active + d < total) pinned.add(active + d); if (active - d < 0 && active + d >= total) break; } const sorted = Array.from(pinned).sort((a, b) => a - b); const countEllipses = (arr: number[]) => arr.reduce( (count, value, i) => i > 0 && value - arr[i - 1] > 1 ? count + 1 : count, 0, ); while (sorted.length + countEllipses(sorted) > maxSlots && sorted.length > 2) { let worstIndex = -1; let worstDistance = -1; for (let i = 1; i < sorted.length - 1; i++) { const distance = Math.abs(sorted[i] - active); if (distance > worstDistance) { worstDistance = distance; worstIndex = i; } } if (worstIndex === -1) break; sorted.splice(worstIndex, 1); } return sorted; } export const ProgressNumbered = forwardRef( ( { className, value = 0, animated = true, highlightCurrent = false, filledClassName, unfilledClassName, currentClassName, steps, }, ref, ) => { const stepCount = Array.isArray(steps) ? steps.length : typeof steps === "number" ? steps : 4; const stepsArray = Array.isArray(steps) ? steps : undefined; const hasLabels = stepsArray?.some((s) => s.label) ?? false; const innerRef = useRef(null); const [containerWidth, setContainerWidth] = useState(null); useEffect(() => { const el = innerRef.current; if (!el) return; const update = () => setContainerWidth(el.offsetWidth); update(); const observer = new ResizeObserver(update); observer.observe(el); return () => observer.disconnect(); }, []); const { transitionClass, getStepState, getStateClasses } = useProgressHelpers({ value, stepCount, highlightCurrent, animated, filledClassName, unfilledClassName, currentClassName, }); const activeIdx = Math.max( 0, Math.min(stepCount - 1, Math.round((value * stepCount) / 100) - 1), ); const maxSlots = containerWidth !== null ? Math.floor((containerWidth + STEP_GAP) / (STEP_SIZE + STEP_GAP)) : stepCount; const visibleIndices = useMemo( () => getVisibleIndices(stepCount, maxSlots, activeIdx), [stepCount, maxSlots, activeIdx], ); const isCollapsed = visibleIndices !== null; const renderConnector = (fromIndex: number) => { const { isFilled } = getStepState(fromIndex + 1); return (

); }; const renderStep = (index: number, step?: ProgressStep) => { const { isFilled, isCurrent } = getStepState(index); return (

{index + 1}

{!isCollapsed && }

); }; const renderContent = () => { if (!isCollapsed) { const elements = []; for (let i = 0; i < stepCount; i++) { elements.push(renderStep(i, stepsArray?.[i])); if (i < stepCount - 1) { elements.push(renderConnector(i)); } } return elements; } return visibleIndices.flatMap((idx, i) => { const prev = visibleIndices[i - 1]; const hasGap = i > 0 && idx - prev > 1; const elements = []; if (i > 0) { if (hasGap) { elements.push(

…

, ); } else { elements.push(renderConnector(prev)); } } elements.push(renderStep(idx, stepsArray?.[idx])); return elements; }); }; return (

{renderContent()}

); }, ); ProgressNumbered.displayName = "ProgressNumbered";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":[null,["$","$L52",null,{"namespace":"@turbopills-ui","registryDependencies":["tooltip"]}]]}],null]}],["$","$L53",null,{"files":[{"path":"registry/turbopills/ui/progress/progress.tsx","content":"$54","type":"registry:component","target":"components/turbopills/ui/progress/progress.tsx"},{"path":"registry/turbopills/ui/progress/progress-numbered.tsx","content":"$55","type":"registry:component","target":"components/turbopills/ui/progress/progress-numbered.tsx"}],"className":"h-[70svh] min-h-80"}]]}]