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:T1d19,"use client"; import { CheckIcon } from "blode-icons-react"; import { cva } from "class-variance-authority"; import { Children, createContext, isValidElement, useContext } from "react"; import type * as React from "react"; import { cn } from "@/lib/utils"; type StepperOrientation = "horizontal" | "vertical"; // Same vocabulary as `ProgressItemState` in progress-list.tsx, exposed on the same // `data-state` attribute, so a consumer styles both components with one selector. type StepState = "completed" | "current" | "pending"; interface StepperContextValue { count: number; orientation: StepperOrientation; value: number; } const StepperContext = createContext(null); // A step carries only its position. Everything else about it — completed or not, last or // not — follows from the root, so there is no second context object to keep in sync. const StepIndexContext = createContext(null); const resolveState = (index: number, value: number): StepState => { if (index < value) { return "completed"; } return index === value ? "current" : "pending"; }; const useStepper = (): StepperContextValue => { const context = useContext(StepperContext); if (!context) { throw new Error("Stepper parts must be used within a "); } return context; }; const useStep = () => { const { count, value } = useStepper(); const index = useContext(StepIndexContext); if (index === null) { throw new Error("Step parts must be used within a "); } return { index, isLast: index === count - 1, state: resolveState(index, value) }; }; const stateDescriptions: Record = { completed: "completed", current: "current step", pending: "not started", }; export interface StepperProps extends Omit, "children"> { /** The steps of the flow — one `` per step */ children: React.ReactNode; /** Layout direction (default: "horizontal") */ orientation?: StepperOrientation; /** Zero-based index of the active step. Steps before it are completed */ value: number; } const Stepper = ({ children, className, orientation = "horizontal", value, ...props }: StepperProps) => { // oxlint-disable-next-line react/no-react-children -- index assignment only; children are never cloned or mutated const items = Children.toArray(children); return ( // oxlint-disable-next-line react/jsx-no-constructed-context-values -- the React Compiler memoises this; a manual useMemo here trips PreserveManualMemo instead

{child}

); }; export interface StepProps extends React.ComponentProps<"li"> { /** Position of this step, when it is not a direct child of `` */ index?: number; } const Step = ({ children, className, index: indexProp, ...props }: StepProps) => { const { count, orientation, value } = useStepper(); const positionalIndex = useContext(StepIndexContext); const index = indexProp ?? positionalIndex ?? 0; const state = resolveState(index, value); return (

sits next to the 32px indicator, so it carries the 6px // offset that optically centres its 20px line on the circle. Inside // that offset is the container's padding instead. "group/step flex [&>[data-slot=step-label]]:mt-1.5", orientation === "horizontal" ? "min-w-0 flex-1 items-start gap-2 last:flex-none" : "relative gap-3 pb-6 last:pb-0", className, )} data-slot="step" data-state={state} {...props} > Step {index + 1} of {count}, {stateDescriptions[state]}. {children}

); }; const stepIndicatorVariants = cva( "flex size-8 shrink-0 items-center justify-center rounded-full border font-medium text-sm tabular-figures transition-[background-color,border-color,box-shadow,color] duration-150 ease-out [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0", { defaultVariants: { state: "pending", }, variants: { state: { completed: "border-primary bg-primary text-primary-foreground", current: "border-primary bg-background text-foreground ring-2 ring-primary/25", pending: "border-border bg-background text-muted-foreground", }, }, }, ); const StepIndicator = ({ children, className, ...props }: React.ComponentProps<"span">) => { const { index, state } = useStep(); let content: React.ReactNode = ; if (children) { content = children; } else if (state !== "completed") { content = index + 1; } return ( ); }; const StepContent = ({ className, ...props }: React.ComponentProps<"span">) => ( ); const stepLabelVariants = cva("font-medium text-sm", { defaultVariants: { state: "pending", }, variants: { state: { completed: "text-foreground", current: "text-foreground", pending: "text-muted-foreground", }, }, }); const StepLabel = ({ className, ...props }: React.ComponentProps<"span">) => { const { state } = useStep(); return ( ); }; const StepDescription = ({ className, ...props }: React.ComponentProps<"span">) => ( ); const StepSeparator = ({ className, ...props }: React.ComponentProps<"span">) => { const { orientation } = useStepper(); const { isLast, state } = useStep(); if (isLast) { return null; } return ( ); }; export { Step, StepContent, StepDescription, StepIndicator, StepLabel, StepSeparator, Stepper }; 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","blode-icons-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/blode-icons-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":"blode-icons-react"}]]}]}],["$","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"}]]}]}]]}],["$","$L50",null,{"namespace":"@blode","registryDependencies":[]}]]}],null]}],["$","$L51",null,{"files":[{"path":"ui/stepper.tsx","content":"$52","type":"registry:ui","target":""}],"className":"h-[70svh] min-h-80"}]]}]