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:T1d43,"use client"; import * as React from "react"; import { AnimatePresence, motion, MotionConfig, useReducedMotion, type HTMLMotionProps, } from "motion/react"; import { Button } from "@/components/ui/button"; import { useElementHeight } from "@/hooks/use-element-height"; import { cn } from "@/lib/utils"; type MotionTransition = NonNullable["transition"]>; type StepDirection = -1 | 1; const useIsomorphicLayoutEffect = typeof window === "undefined" ? React.useEffect : React.useLayoutEffect; export type MultiStepItem = { id: string; content: React.ReactNode; }; export type MultiStepProps = Omit< HTMLMotionProps<"div">, | "animate" | "children" | "defaultValue" | "initial" | "onChange" | "transition" > & { steps: MultiStepItem[]; step?: number; defaultStep?: number; onStepChange?: (step: number) => void; /** Called when the primary action is pressed on the last step. */ onComplete?: () => void; backLabel?: React.ReactNode; continueLabel?: React.ReactNode; completeLabel?: React.ReactNode; disableBack?: boolean; disableContinue?: boolean; footer?: React.ReactNode; contentClassName?: string; innerClassName?: string; actionsClassName?: string; transition?: MotionTransition; }; export function MultiStep({ steps, step, defaultStep = 0, onStepChange, onComplete, backLabel = "Back", continueLabel = "Continue", completeLabel = "Done", disableBack, disableContinue, footer, className, contentClassName, innerClassName, actionsClassName, transition, ...props }: MultiStepProps) { const [uncontrolledStep, setUncontrolledStep] = React.useState(defaultStep); const [innerRef, height, measureHeight] = useElementHeight(); const shouldReduceMotion = useReducedMotion(); const selectedStep = clampStep(step ?? uncontrolledStep, steps.length); const isControlled = step !== undefined; const isFirstStep = selectedStep === 0; const isLastStep = selectedStep === steps.length - 1; const activeStep = steps[selectedStep]; const [transitionState, setTransitionState] = React.useState<{ step: number; direction: StepDirection; }>({ step: selectedStep, direction: 1 }); let direction = transitionState.direction; // Built-in actions update this state in the same event as the step. This // fallback only derives direction for externally driven controlled changes. if (transitionState.step !== selectedStep) { direction = selectedStep < transitionState.step ? -1 : 1; setTransitionState({ step: selectedStep, direction }); } // Measure the new step before paint so the content, footer projection, and // container height begin from the same animation frame. useIsomorphicLayoutEffect(() => { measureHeight(); }, [activeStep?.id, measureHeight]); const setStep = React.useCallback( (nextStep: number) => { const resolvedStep = clampStep(nextStep, steps.length); const nextDirection: StepDirection = resolvedStep < selectedStep ? -1 : 1; setTransitionState({ step: resolvedStep, direction: nextDirection, }); if (!isControlled) { setUncontrolledStep(resolvedStep); } onStepChange?.(resolvedStep); }, [isControlled, onStepChange, selectedStep, steps.length], ); const resolvedTransition: MotionTransition = shouldReduceMotion ? { duration: 0 } : (transition ?? { type: "spring", duration: 0.3, bounce: 0 }); const contentVariants = shouldReduceMotion ? reducedMotionStepVariants : stepVariants; if (!activeStep) { return null; } return ( {/* `contain: layout` scopes the per-frame reflow of the height animation to this element, so the layout cost stays bounded no matter how heavy a step's content is. This keeps the transition smooth on lower-powered / mobile devices; removing it can cause frame drops there. It does not affect the measured `auto` height. */}

{activeStep.content}

{footer !== undefined ? ( footer ) : ( )}

); } const stepVariants = { initial: (direction: StepDirection) => ({ x: `${110 * direction}%`, opacity: 0, }), active: { x: "0%", opacity: 1 }, exit: (direction: StepDirection) => ({ x: `${-110 * direction}%`, opacity: 0, }), }; const reducedMotionStepVariants = { initial: { opacity: 0 }, active: { opacity: 1 }, exit: { opacity: 0 }, }; function clampStep(step: number, stepCount: number) { if (stepCount <= 0) return 0; return Math.min(Math.max(step, 0), stepCount - 1); } 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","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"}]]}]}]]}],["$","$L50",null,{"namespace":"@ericts","registryDependencies":["button","https://ui.ericts.com/r/use-element-height.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/base/ui/multi-step.tsx","content":"$52","type":"registry:ui","target":"@ui/multi-step.tsx"}],"className":"h-[70svh] min-h-80"}]]}]