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:T38d5,"use client"; import { useCallback, useEffect, useMemo, useRef, useState } from "react"; import type { KeyboardEvent, ReactNode } from "react"; import { AnimatePresence, motion, useReducedMotion } from "motion/react"; const EASE = [0.23, 1, 0.32, 1] as const; const EXIT_EASE = [0.4, 0, 1, 1] as const; const RAIL = { type: "spring", stiffness: 520, damping: 40, mass: 0.5 } as const; const CROSSFADE = { type: "spring", stiffness: 260, damping: 34, mass: 0.8 } as const; export type WizardDirection = 1 | -1; export type UseWizardOptions = { total: number; index?: number; defaultIndex?: number; onIndexChange?: (index: number, direction: WizardDirection) => void; onComplete?: () => void; }; export type UseWizardReturn = { index: number; direction: WizardDirection; furthest: number; total: number; isFirst: boolean; isLast: boolean; next: () => void; back: () => void; goTo: (index: number) => void; }; function clampIndex(value: number, total: number) { if (total < 1) return 0; return Math.max(0, Math.min(total - 1, Math.trunc(value))); } export function useWizard({ total, index, defaultIndex = 0, onIndexChange, onComplete, }: UseWizardOptions): UseWizardReturn { const [internal, setInternal] = useState(() => clampIndex(defaultIndex, total)); const current = clampIndex(index ?? internal, total); const [seen, setSeen] = useState<{ index: number; direction: WizardDirection }>({ index: current, direction: 1, }); if (seen.index !== current) { setSeen({ index: current, direction: current > seen.index ? 1 : -1 }); } const [furthest, setFurthest] = useState(current); if (furthest < current) setFurthest(current); const emit = useRef(onIndexChange); emit.current = onIndexChange; const finish = useRef(onComplete); finish.current = onComplete; const controlled = index !== undefined; const goTo = useCallback( (to: number) => { const target = clampIndex(to, total); if (target === current) return; const direction: WizardDirection = target > current ? 1 : -1; if (!controlled) setInternal(target); emit.current?.(target, direction); }, [controlled, current, total], ); const next = useCallback(() => { if (current >= total - 1) { finish.current?.(); return; } goTo(current + 1); }, [current, goTo, total]); const back = useCallback(() => goTo(current - 1), [current, goTo]); return { index: current, direction: seen.direction, furthest: Math.min(furthest, Math.max(total - 1, 0)), total, isFirst: current === 0, isLast: current === total - 1, next, back, goTo, }; } export type WizardStep = { id: string; label: string; content: ReactNode; }; export type WizardStepsProps = { steps: WizardStep[]; index?: number; defaultIndex?: number; onIndexChange?: (index: number, direction: WizardDirection) => void; onComplete?: () => void; complete?: boolean; height?: number; backLabel?: string; nextLabel?: string; finishLabel?: string; completeLabel?: string; completeHint?: string; label?: string; className?: string; }; export function WizardSteps({ steps, index, defaultIndex = 0, onIndexChange, onComplete, complete = false, height = 184, backLabel = "Back", nextLabel = "Next", finishLabel = "Finish", completeLabel = "All set", completeHint = "Step back to change anything", label = "Steps", className = "", }: WizardStepsProps) { const wizard = useWizard({ total: steps.length, index, defaultIndex, onIndexChange, onComplete, }); const reduced = useReducedMotion(); const listRef = useRef(null); const viewportRef = useRef(null); const intent = useRef<"list" | "panel" | null>(null); const { index: at, direction, furthest, total, isFirst, isLast, next, back, goTo } = wizard; useEffect(() => { const move = intent.current; intent.current = null; if (move === "list") { listRef.current ?.querySelector('button[data-current="true"]') ?.focus(); return; } if (move === "panel") viewportRef.current?.focus({ preventScroll: true }); }, [at]); const variants = useMemo( () => ({ enter: (d: WizardDirection) => (reduced ? { opacity: 0 } : { opacity: 0, x: d * 22 }), center: reduced ? { opacity: 1 } : { opacity: 1, x: 0 }, exit: (d: WizardDirection) => reduced ? { opacity: 0, transition: { duration: 0 } } : { opacity: 0, x: d * -22, transition: { duration: 0.14, ease: EXIT_EASE }, }, }), [reduced], ); const panelTransition = reduced ? { duration: 0 } : CROSSFADE; const onStepKeyDown = (e: KeyboardEvent) => { let target = at; if (e.key === "ArrowRight" || e.key === "ArrowDown") target = at + 1; else if (e.key === "ArrowLeft" || e.key === "ArrowUp") target = at - 1; else if (e.key === "Home") target = 0; else if (e.key === "End") target = furthest; else return; e.preventDefault(); target = Math.min(clampIndex(target, total), furthest); if (target === at) return; intent.current = "list"; goTo(target); }; const step = steps[at]; if (!step) return null; const position = `Step ${at + 1} of ${total}: ${step.label}`; return (

{position}

{steps.map((s, i) => ( {s.label} ))}

{done ? ( ) : ( i + 1 )}

{i <= furthest ? ( ) : ( {`Step ${i + 1} of ${total}: ${s.label}`} {tile} )} {i < total - 1 ? ( ) : null}

{complete ? (

{completeLabel}

{completeHint}

) : ( step.content )}

{isFirst ? null : ( { intent.current = "panel"; back(); }} className="h-9 rounded-[9px] border border-stone-200 bg-white px-3 text-[13px] font-medium text-stone-700 outline-none transition-[border-color,box-shadow] duration-150 hover:border-stone-300 focus-visible:border-[#4568FF] focus-visible:shadow-[0_1px_2px_rgba(28,25,23,0.08),0_10px_20px_-14px_rgba(69,104,255,0.6)] dark:border-white/[0.16] dark:bg-[#1D1D1A] dark:text-stone-200 dark:hover:border-white/20 dark:focus-visible:border-[#93B0FF] dark:focus-visible:shadow-[0_10px_20px_-14px_rgba(147,176,255,0.5)]" > {backLabel} )} {complete ? null : ( { if (!isLast) intent.current = "panel"; next(); }} initial={{ opacity: 0, scale: 0.96 }} animate={{ opacity: 1, scale: 1 }} exit={{ opacity: 0, scale: 0.96, transition: reduced ? { duration: 0 } : { duration: 0.14, ease: EXIT_EASE }, }} transition={reduced ? { duration: 0 } : CROSSFADE} className="ml-auto grid h-9 place-items-center rounded-[9px] bg-stone-800 px-3.5 text-[13px] font-medium text-white outline-none focus-visible:shadow-[inset_0_0_0_1.5px_#93B0FF] dark:bg-stone-100 dark:text-stone-900 dark:focus-visible:shadow-[inset_0_0_0_1.5px_#4568FF]" > {finishLabel.length > nextLabel.length ? finishLabel : nextLabel} {nextLabel} {finishLabel} )}

); } 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","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"}]]}]}]]}],["$","$L51",null,{"namespace":"@interior","registryDependencies":[]}]]}],null]}],["$","$L52",null,{"files":[{"path":"registry/interior/wizard-steps.tsx","content":"$53","type":"registry:ui","target":"components/interior/wizard-steps.tsx"}],"className":"h-[70svh] min-h-80"}]]}]