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:T2be3,/* eslint-disable react-refresh/only-export-components */ import * as React from 'react' import { cva, type VariantProps } from 'class-variance-authority' import { cn } from '@/lib/utils' import { Check } from 'lucide-react' // Context interface StepperContextValue { activeStep: number setActiveStep: (step: number) => void totalSteps: number orientation: 'horizontal' | 'vertical' } const StepperContext = React.createContext(null) function useStepperContext() { const context = React.useContext(StepperContext) if (!context) { throw new Error('Stepper components must be used within a ') } return context } // Step variants const stepVariants = cva( 'flex items-center justify-center border-3 border-foreground font-bold transition duration-200', { variants: { state: { completed: 'bg-success text-success-foreground shadow-[4px_4px_0px_hsl(var(--shadow-color))]', active: 'bg-primary text-primary-foreground shadow-[4px_4px_0px_hsl(var(--shadow-color))] scale-110', upcoming: 'bg-muted text-muted-foreground', }, size: { sm: 'h-8 w-8 text-sm', md: 'h-10 w-10', lg: 'h-12 w-12 text-lg', }, }, defaultVariants: { state: 'upcoming', size: 'md', }, } ) /** * Depth-first count of descendants. * * Items are normally nested inside , so scanning only the root's * direct children finds zero of them — which made `totalSteps` 0 and left * `isLast` permanently false, so a wizard could never be completed. */ function countStepperItems(children: React.ReactNode): number { let count = 0 React.Children.forEach(children, (child) => { if (!React.isValidElement(child)) return if ((child.type as { _isBoldKitStepperItem?: boolean })._isBoldKitStepperItem === true) { count++ return } count += countStepperItems((child.props as { children?: React.ReactNode }).children) }) return count } // Stepper Root export interface StepperProps extends React.HTMLAttributes { activeStep?: number onStepChange?: (step: number) => void orientation?: 'horizontal' | 'vertical' /** Overrides the automatic count — for dynamic or virtualized steps. */ totalSteps?: number } const Stepper = React.forwardRef( ( { activeStep: controlledActiveStep, onStepChange, orientation = 'horizontal', totalSteps: totalStepsProp, className, children, ...props }, ref ) => { const [uncontrolledActiveStep, setUncontrolledActiveStep] = React.useState(0) const isControlled = controlledActiveStep !== undefined const activeStep = isControlled ? controlledActiveStep : uncontrolledActiveStep const setActiveStep = React.useCallback( (step: number) => { if (!isControlled) { setUncontrolledActiveStep(step) } onStepChange?.(step) }, [isControlled, onStepChange] ) // Count total steps from children, at any nesting depth. const totalSteps = totalStepsProp ?? countStepperItems(children) return (

{children}

) } ) Stepper.displayName = 'Stepper' // Stepper List (container for triggers) export type StepperListProps = React.HTMLAttributes const StepperList = React.forwardRef( ({ className, children, ...props }, ref) => { const { orientation } = useStepperContext() return (

{children}

) } ) StepperList.displayName = 'StepperList' // Stepper Item (wrapper for a single step) interface StepperItemContextValue { index: number triggerId: string } const StepperItemContext = React.createContext(null) function useStepperItemContext() { const context = React.useContext(StepperItemContext) if (!context) { throw new Error('StepperItem components must be used within a ') } return context } export interface StepperItemProps extends React.HTMLAttributes { index: number } const StepperItem = React.forwardRef( ({ index, className, children, ...props }, ref) => { const { orientation } = useStepperContext() const triggerId = `stepper-trigger-${index}` return (

{children}

) } ) StepperItem.displayName = 'StepperItem' ;(StepperItem as typeof StepperItem & { _isBoldKitStepperItem: boolean })._isBoldKitStepperItem = true // Stepper Trigger (the clickable step indicator) export interface StepperTriggerProps extends React.ButtonHTMLAttributes, VariantProps { showStepNumber?: boolean } const StepperTrigger = React.forwardRef( ({ size, showStepNumber = true, className, children, ...props }, ref) => { const { activeStep, setActiveStep } = useStepperContext() const { index, triggerId } = useStepperItemContext() const state: 'completed' | 'active' | 'upcoming' = index < activeStep ? 'completed' : index === activeStep ? 'active' : 'upcoming' return ( ) } ) StepperTrigger.displayName = 'StepperTrigger' // Stepper Separator (line between steps) export type StepperSeparatorProps = React.HTMLAttributes const StepperSeparator = React.forwardRef( ({ className, ...props }, ref) => { const { activeStep, orientation } = useStepperContext() // Optional on purpose: a separator is just as valid *between* items inside // as it is inside one, and that's the composition the docs // show. Outside an item there's no index to compare, so it renders in the // un-completed style rather than throwing. const itemContext = React.useContext(StepperItemContext) const isCompleted = itemContext != null && itemContext.index < activeStep return (

) } ) StepperSeparator.displayName = 'StepperSeparator' // Stepper Content (panel for each step) export interface StepperContentProps extends React.HTMLAttributes { index: number } const StepperContent = React.forwardRef( ({ index, className, children, ...props }, ref) => { const { activeStep } = useStepperContext() if (index !== activeStep) { return null } return (

{children}

) } ) StepperContent.displayName = 'StepperContent' // Stepper Actions (prev/next buttons helper) export interface StepperActionsProps extends React.HTMLAttributes { onComplete?: () => void prevLabel?: string nextLabel?: string completeLabel?: string } const StepperActions = React.forwardRef( ( { onComplete, prevLabel = 'Previous', nextLabel = 'Next', completeLabel = 'Complete', className, children, ...props }, ref ) => { const { activeStep, setActiveStep, totalSteps } = useStepperContext() const isFirst = activeStep === 0 const isLast = activeStep === totalSteps - 1 const handlePrev = () => { if (!isFirst) { setActiveStep(activeStep - 1) } } const handleNext = () => { if (isLast) { onComplete?.() } else { setActiveStep(activeStep + 1) } } return (

{children || ( <> )}

) } ) StepperActions.displayName = 'StepperActions' export { Stepper, StepperList, StepperItem, StepperTrigger, StepperSeparator, StepperContent, StepperActions, stepVariants, useStepperContext, } 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","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"}]]}]}],["$","li","lucide-react",{"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"}]]}]}]]}],["$","$L50",null,{"namespace":"@boldkit","registryDependencies":["@boldkit/utils"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/default/ui/stepper.tsx","content":"$52","type":"registry:ui","target":"components/ui/stepper.tsx"}],"className":"h-[70svh] min-h-80"}]]}]