61: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 62: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 63:T1fb6,'use client'; import { mergeProps } from '@base-ui/react/merge-props'; import { useRender } from '@base-ui/react/use-render'; import { createContext, useCallback, useContext, useState } from 'react'; import { CheckIcon, LoaderCircleIcon } from '@/registry/ndeko/lib/icons'; import { cn } from '@/registry/ndeko/lib/utils'; type StepperOrientation = 'horizontal' | 'vertical'; type StepState = 'active' | 'completed' | 'inactive'; type StepperContextValue = { activeStep: number; setActiveStep: (step: number) => void; orientation: StepperOrientation; }; type StepItemContextValue = { step: number; state: StepState; isDisabled: boolean; isLoading: boolean; }; const StepperContext = createContext( undefined ); const StepItemContext = createContext( undefined ); function useStepper() { const context = useContext(StepperContext); if (!context) { throw new Error('useStepper must be used within a Stepper'); } return context; } function useStepItem() { const context = useContext(StepItemContext); if (!context) { throw new Error('useStepItem must be used within a StepperItem'); } return context; } type StepperProps = React.ComponentProps<'div'> & { defaultValue?: number; value?: number; onValueChange?: (value: number) => void; orientation?: StepperOrientation; }; function Stepper({ defaultValue = 0, value, onValueChange, orientation = 'horizontal', className, ...props }: StepperProps) { const [internalStep, setInternalStep] = useState(defaultValue); const isControlled = value !== undefined; const activeStep = value ?? internalStep; const setActiveStep = useCallback( (step: number) => { if (!isControlled) { setInternalStep(step); } onValueChange?.(step); }, [isControlled, onValueChange] ); return (

); } function stateOfStep(step: number, activeStep: number, completed: boolean) { const isBefore = step < activeStep; if (completed || isBefore) { return 'completed' as const; } if (step === activeStep) { return 'active' as const; } return 'inactive' as const; } type StepperItemProps = React.ComponentProps<'div'> & { step: number; completed?: boolean; disabled?: boolean; loading?: boolean; }; function StepperItem({ step, completed = false, disabled = false, loading = false, className, children, ...props }: StepperItemProps) { const { activeStep } = useStepper(); const state = stateOfStep(step, activeStep, completed); const isActive = step === activeStep; const isLoading = loading && isActive; return (

{children}

); } function StepperTrigger({ className, render, ...props }: useRender.ComponentProps<'button'>) { const { setActiveStep } = useStepper(); const { step, isDisabled } = useStepItem(); const defaultProps = { 'data-slot': 'stepper-trigger', type: 'button' as const, disabled: isDisabled, onClick: () => setActiveStep(step), className: cn( 'inline-flex items-center gap-3 rounded-full text-left outline-none focus-visible:z-10 focus-visible:ring-[3px] focus-visible:ring-ring/25 disabled:pointer-events-none disabled:opacity-50', 'transition-[scale] duration-150 ease-(--ease-out-strong) active:scale-[0.97]', className ), }; return useRender({ defaultTagName: 'button', render, props: mergeProps<'button'>(defaultProps, props), }); } const STEP_SWAP = 'transition-[scale,opacity,filter] duration-200 ease-(--ease-out-strong)'; const STEP_NUMBER = [ STEP_SWAP, 'group-data-loading/step:scale-60 group-data-loading/step:opacity-0 group-data-loading/step:blur-[2px]', 'group-data-[state=completed]/step:scale-60 group-data-[state=completed]/step:opacity-0 group-data-[state=completed]/step:blur-[2px]', ].join(' '); const STEP_CHECK = [ STEP_SWAP, 'absolute size-3.5 scale-60 opacity-0 blur-[2px]', 'group-data-[state=completed]/step:scale-100 group-data-[state=completed]/step:opacity-100 group-data-[state=completed]/step:blur-none', ].join(' '); const INDICATOR = [ 'relative flex size-6 shrink-0 items-center justify-center rounded-full text-xs font-medium tabular-nums', 'bg-foreground/[0.06] text-muted-foreground transition-colors duration-200', 'data-[state=active]:bg-primary data-[state=active]:text-primary-foreground', 'data-[state=completed]:bg-primary data-[state=completed]:text-primary-foreground', ].join(' '); function StepperIndicator({ className, children, ...props }: React.ComponentProps<'span'>) { const { state, step, isLoading } = useStepItem(); const hasCustomContent = children !== undefined; return ( {hasCustomContent && children} {!hasCustomContent && ( <> {step} {isLoading && ( )} )} ); } function StepperTitle({ className, ...props }: React.ComponentProps<'h3'>) { return (

); } function StepperDescription({ className, ...props }: React.ComponentProps<'p'>) { return (
); } const SEPARATOR = [ 'bg-foreground/10 relative m-0.5 rounded-full transition-colors duration-300', 'group-data-[orientation=horizontal]/stepper:h-0.5 group-data-[orientation=horizontal]/stepper:w-full group-data-[orientation=horizontal]/stepper:flex-1', 'group-data-[orientation=vertical]/stepper:h-12 group-data-[orientation=vertical]/stepper:w-0.5', ].join(' '); const SEPARATOR_FILL = [ 'after:bg-primary after:absolute after:inset-0 after:rounded-full after:transition-[scale] after:duration-200 after:ease-(--ease-out-strong)', 'group-data-[state=completed]/step:after:duration-300', 'group-data-[orientation=horizontal]/stepper:after:origin-left group-data-[orientation=horizontal]/stepper:rtl:after:origin-right', 'group-data-[orientation=horizontal]/stepper:after:scale-x-0 group-data-[orientation=horizontal]/stepper:group-data-[state=completed]/step:after:scale-x-100', 'group-data-[orientation=vertical]/stepper:after:origin-top', 'group-data-[orientation=vertical]/stepper:after:scale-y-0 group-data-[orientation=vertical]/stepper:group-data-[state=completed]/step:after:scale-y-100', ].join(' '); function StepperSeparator({ className, ...props }: React.ComponentProps<'div'>) { return (
); } export { Stepper, StepperDescription, StepperIndicator, StepperItem, StepperSeparator, StepperTitle, StepperTrigger, useStepItem, useStepper, }; 60:["$","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"}]]}]}]]}],["$","$L61",null,{"namespace":"@ndeko","registryDependencies":["https://ui.ndekocode.dev/r/theme.json","https://ui.ndekocode.dev/r/utils.json","https://ui.ndekocode.dev/r/icons.json"]}]]}],null]}],["$","$L62",null,{"files":[{"path":"registry/ndeko/ui/stepper.tsx","content":"$63","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]