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:T3f05,"use client"; import { blur, duration, ease } from "@/lib/motion"; import { cn } from "@/lib/utils"; import { motion, useReducedMotion } from "motion/react"; import { Slot } from "radix-ui"; import { type ComponentProps, createContext, type MouseEvent, useCallback, useContext, useEffect, useMemo, useState, } from "react"; /* * Stepper: progress through the steps of a task (owner's roadmap, 2026-10-16), such as a checkout or a setup. * shadcn has none, so the parts are ours, named the shadcn way: Stepper (an ordered list), StepperItem, * StepperTrigger, StepperIndicator, StepperTitle, StepperDescription and StepperSeparator. * - State: `value` is the current step, from 1; the steps before it are completed, and a value past the last * step marks them all done. Controlled or not (value / defaultValue / onValueChange), horizontal or vertical. * - Motion (the crafted part, .agents/rules/motion.md): progress travels along the line. Moving on, the step you * leave swaps its number for a check that draws itself in (Checkbox's check), the line to the next step fills * (scaleX, or scaleY when vertical, on an eased tween: duration.slow, ease-in-out, never a spring), and the next * step takes the ring as the fill arrives. Jumping several steps fills each line in turn. Going back plays it * backwards: the ring leaves, the lines empty towards the step you picked, and as the emptying reaches it, its * check erases and its number comes back through the blur. * - Fills and colours only fade; the number comes and goes through the blur; the ring grows into place as it * fades in. Nothing moves on first paint, and with reduced motion it all changes at once. * - Keyboard and screen readers: each step is a button (or, with asChild, a link) in the tab order, named by its * title; the current one has aria-current="step". It's an `ol`, so it's read as a list of so many steps. */ type StepState = "completed" | "active" | "inactive"; type Orientation = "horizontal" | "vertical"; /** One line's fill. Each step along the way waits for the line before it. */ const LEG = duration.slow; type StepperContextValue = { value: number; /** The step the last change came from, while its progress is still travelling; then the same as value */ from: number; orientation: Orientation; reduce: boolean; setValue: (step: number) => void; }; const StepperContext = createContext(null); function useStepper(part: string) { const context = useContext(StepperContext); if (!context) throw new Error(`${part} must be used inside Stepper`); return context; } type StepperItemContextValue = { step: number; state: StepState; disabled: boolean; /** Seconds until this step's indicator changes: when the travelling progress reaches it */ delay: number; /** Seconds until the line after this step starts filling or emptying */ lineDelay: number; }; const StepperItemContext = createContext(null); function useStepperItem(part: string) { const context = useContext(StepperItemContext); if (!context) throw new Error(`${part} must be used inside StepperItem`); return context; } /** A number of legs, in seconds (to the millisecond, so 3 × 0.35 is 1.05) */ const legs = (count: number) => Math.round(count * LEG * 1000) / 1000; /** When a step changes and when the line after it moves, as progress travels from `from` to `to` */ function timingOf(step: number, from: number, to: number) { if (to > from) { return { delay: step >= from && step <= to ? legs(step - from) : 0, lineDelay: step >= from && step < to ? legs(step - from) : 0, }; } if (to < from) { return { delay: step >= to && step <= from ? legs(from - step) : 0, lineDelay: step >= to && step < from ? legs(from - 1 - step) : 0, }; } return { delay: 0, lineDelay: 0 }; } export type StepperProps = Omit, "defaultValue" | "onChange"> & { /** The current step, from 1, when you control it. Past the last step, every step is done */ value?: number; /** The current step at first */ defaultValue?: number; /** Called with the step a trigger was pressed for */ onValueChange?: (value: number) => void; orientation?: Orientation; }; /** The steps of a task, in order. Give it a name with aria-label ("Checkout") */ function Stepper({ value, defaultValue = 1, onValueChange, orientation = "horizontal", className, ...props }: StepperProps) { const [uncontrolled, setUncontrolled] = useState(defaultValue); const current = value ?? uncontrolled; const reduce = useReducedMotion() ?? false; // Where the last change came from, so progress can travel from there. Once it has arrived, `from` catches up // and every delay is 0 again, so hovering a step never waits. const [shown, setShown] = useState(current); const [from, setFrom] = useState(current); if (current !== shown) { setShown(current); setFrom(shown); } useEffect(() => { if (from === current) return; const timer = setTimeout(() => setFrom(current), (Math.abs(current - from) + 1) * LEG * 1000); return () => clearTimeout(timer); }, [from, current]); const setValue = useCallback( (step: number) => { if (value === undefined) setUncontrolled(step); onValueChange?.(step); }, [value, onValueChange], ); const context = useMemo( () => ({ value: current, from: reduce ? current : from, orientation, reduce, setValue }), [current, from, orientation, reduce, setValue], ); return (

); } export type StepperTriggerProps = ComponentProps<"button"> & { /** Render the single child instead of a button, for example a link to the step's page */ asChild?: boolean; }; /** * Goes to its step. Holds the indicator, the title and the description, laid out in two columns. The current * step's trigger has aria-current="step". */ function StepperTrigger({ className, asChild = false, onClick, style, ...props }: StepperTriggerProps) { const { setValue, reduce } = useStepper("StepperTrigger"); const { step, state, disabled, delay } = useStepperItem("StepperTrigger"); const Comp = asChild ? Slot.Root : "button"; return ( ) => { onClick?.(event); if (event.defaultPrevented) return; if (disabled) { // A disabled link mustn't navigate either event.preventDefault(); return; } setValue(step); }} className={cn( // Two columns: the indicator, spanning both rows, then the title over the description "group/trigger grid cursor-pointer items-start justify-items-start gap-x-2 rounded-md text-start", "transition-opacity duration-(--duration-base) ease-out", "outline-ring focus-visible:outline-(length:--focus-ring-width) focus-visible:outline-offset-(--focus-ring-offset)", "disabled:pointer-events-none disabled:opacity-(--opacity-disabled) aria-disabled:pointer-events-none aria-disabled:opacity-(--opacity-disabled)", className, )} // A step that becomes reachable brightens as the progress arrives style={{ transitionDelay: `${reduce ? 0 : delay}s`, ...style }} {...props} /> ); } /** The same check as Checkbox, Copy Button and Loading Button */ const CHECK = "M5 12.5l4.5 4.5L19 7.5"; export type StepperIndicatorProps = ComponentProps<"span">; /** * The step's circle: its number, a check once it's done, and a ring round the current one. Pass children (an * icon) to show them instead of the number and the check. Hidden from screen readers: the title names the step. */ function StepperIndicator({ className, children, style, ...props }: StepperIndicatorProps) { const { reduce } = useStepper("StepperIndicator"); const { step, state, delay } = useStepperItem("StepperIndicator"); const done = state === "completed"; const active = state === "active"; const wait = reduce ? 0 : delay; return ( svg]:size-3.5", className, )} style={{ transitionDelay: `${wait}s`, ...style }} {...props} > {/* The ring round the current step grows into place as it fades in */} {children ?? ( <> {/* The number lifts away through the blur as the check draws in, and comes back the same way */} )} ); } /** The step's name, beside the indicator. Muted until the progress reaches it */ function StepperTitle({ className, style, ...props }: ComponentProps<"span">) { const { reduce } = useStepper("StepperTitle"); const { state, delay } = useStepperItem("StepperTitle"); return ( ); } /** A line under the title */ function StepperDescription({ className, ...props }: ComponentProps<"span">) { return ( ); } /** * The line to the next step. It fills when this step is done, and empties the way it came. Hidden in the last * step, so it can be written in every item. */ function StepperSeparator({ className, ...props }: ComponentProps<"div">) { const { orientation, reduce } = useStepper("StepperSeparator"); const { state, lineDelay } = useStepperItem("StepperSeparator"); const filled = state === "completed"; const horizontal = orientation === "horizontal"; return (

); } export { Stepper, StepperDescription, StepperIndicator, StepperItem, StepperSeparator, StepperTitle, StepperTrigger, }; 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@^14.0.0",{"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@^14.0.0"}]]}]}],["$","li","radix-ui@^1.7.0",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/radix-ui","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":"radix-ui@^1.7.0"}]]}]}]]}],["$","$L50",null,{"namespace":"@fewtone","registryDependencies":["https://ui.fewtone.com/r/tokens.json","https://ui.fewtone.com/r/motion.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/fewtone/ui/stepper.tsx","content":"$52","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]