4c: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4d:I[544296,["/_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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"ItemStyles"] 4e:I[34002,["/_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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"CodeEditor"] 4f: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 50:T1e45,"use client"; import * as React from "react"; import { cva } from "class-variance-authority"; import { cn } from "@/lib/utils"; import { Button, type ButtonProps } from "@/components/ui/button"; import { AnimatedIcon } from "@/components/ui/animated-icon"; import { useFlowGroup } from "@/lib/cojeev-motion/use-flow"; import { useMorph } from "@/lib/cojeev-motion/use-morph"; import { useChoreography } from "@/lib/cojeev-motion/choreography"; export type StepperPresentation = "rail" | "ledger" | "compact"; const StepperContext = React.createContext<{ value: number; count: number; labels?: string[]; presentation?: StepperPresentation; change: (value: number) => void; } | null>(null); export function useStepper() { const context = React.useContext(StepperContext); if (!context) throw new Error("Stepper parts must be inside Stepper"); return context; } export type StepperProps = React.ComponentProps<"div"> & { value?: number; defaultValue?: number; count: number; labels?: string[]; /** Optional composition; omitted callers retain the original vertical/horizontal list. */ presentation?: StepperPresentation; onValueChange?: (value: number) => void; }; export function Stepper({ value, defaultValue = 1, count, labels, presentation, onValueChange, children, ...props }: StepperProps) { const { quiet } = useChoreography(); const [local, setLocal] = React.useState(defaultValue); const total = Math.max(1, Math.floor(Number.isFinite(count) ? count : 1)); const current = Math.min( total, Math.max( 1, Math.floor(Number.isFinite(value ?? local) ? (value ?? local) : 1), ), ); const change = (next: number) => { if (!Number.isFinite(next)) return; next = Math.min(total, Math.max(1, Math.floor(next))); if (value === undefined) setLocal(next); if (next !== current) onValueChange?.(next); }; return (

{children}

); } export const stepperVariants = cva( "v-stepper-flow grid gap-0 m-0 p-0 list-none [counter-reset:none]", ); export type StepperListProps = React.ComponentProps<"ol"> & { orientation?: "vertical" | "horizontal"; }; export function StepperList({ ref, className, orientation = "vertical", ...props }: StepperListProps) { const context = React.useContext(StepperContext); const flowRef = useFlowGroup(ref); return (

); } export type StepperIndicatorProps = React.ComponentProps<"span"> & { step: number; }; export function StepperIndicator({ step, ref, className, children, ...props }: StepperIndicatorProps) { const context = useStepper(); const morphRef = useMorph("buttons", ref); return ( {children ?? (step < context.value ? ( ) : ( step ))} ); } export type StepperTitleProps = React.ComponentProps<"span">; export function StepperTitle({ className, ...props }: StepperTitleProps) { return ( ); } export type StepperTriggerProps = ButtonProps & { step: number; /** Explicitly permit navigation to unfinished steps. Validation stays with the caller. */ allowFuture?: boolean; }; export function StepperTrigger({ step, allowFuture = false, disabled, onClick, ...props }: StepperTriggerProps) { const context = useStepper(); const blocked = !Number.isInteger(step) || step < 1 || step > context.count || (!allowFuture && step > context.value); return ( ); } export type StepperNextProps = ButtonProps; export function StepperNext({ onClick, children, disabled, ...props }: StepperNextProps) { const context = useStepper(); return ( ); } export type StepperStatusProps = React.ComponentProps<"span">; export function StepperStatus({ className, children, ...props }: StepperStatusProps) { const context = useStepper(); return ( {children ?? `Stage ${context.value} of ${context.count}${context.labels?.[context.value - 1] ? ` · ${context.labels[context.value - 1]}` : ""}`} ); } 51:T2f7e,@layer cojeev-states { [data-slot="stepper"] > li::marker { content: none; } [data-slot="stepper-item"] + [data-slot="stepper-item"]::before { content: ""; position: absolute; left: 18.25px; top: -9px; height: 18px; width: 1.5px; background: var(--v-edge); } [data-slot="stepper-indicator"] { transition: background var(--t-element) var(--enter), box-shadow var(--t-element) var(--enter), color var(--t-element); } [data-slot="stepper-indicator"] .v-icon { width: 17px; height: 17px; } [data-slot="stepper-title"] { transition: color var(--t-element); } [data-slot="stepper-item"].-done .v-step__n { background: var(--v-olive); box-shadow: none; color: var(--v-on-accent); } [data-slot="stepper-item"].-done .v-step__t { color: var(--v-text); } [data-slot="stepper-item"].-done + [data-slot="stepper-item"]::before { background: var(--v-olive); } [data-slot="stepper"]:not(.v-glide) [data-slot="stepper-item"].-on .v-step__n { background: var(--v-pink); box-shadow: none; color: var(--v-on-accent); } [data-slot="stepper-item"].-on .v-step__t { color: var(--v-text); font-weight: 600; letter-spacing: -0.005em; } /* The ordered steps keep their reading order in either presentation. */ [data-slot="stepper"][data-orientation="horizontal"] { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0; } [data-slot="stepper"][data-orientation="horizontal"] > [data-slot="stepper-item"] { grid-template-columns: minmax(0, 1fr); grid-template-rows: 38px auto; align-content: start; justify-items: center; gap: 10px; padding: 8px 6px; min-width: 0; } [data-slot="stepper"][data-orientation="horizontal"] [data-slot="stepper-title"] { grid-column: 1; text-align: center; font-size: var(--fs-control); overflow-wrap: anywhere; } [data-slot="stepper"][data-orientation="horizontal"] > [data-slot="stepper-item"]::before, [data-slot="stepper"][data-orientation="horizontal"] > [data-slot="stepper-item"]::after { content: ""; position: absolute; left: auto; inset-inline-start: calc(50% + 24px); top: 26px; width: calc(100% - 48px); height: 2px; border-radius: 2px; background: var(--v-edge); } [data-slot="stepper"][data-orientation="horizontal"] > [data-slot="stepper-item"]::after { background: var(--v-olive); transform: scaleX(0); transform-origin: left; transition: transform var(--t-element) var(--enter); } [data-slot="stepper"][data-orientation="horizontal"] > [data-slot="stepper-item"].-done::after { transform: scaleX(1); } [data-slot="stepper"][data-orientation="horizontal"] > [data-slot="stepper-item"]:last-child::before, [data-slot="stepper"][data-orientation="horizontal"] > [data-slot="stepper-item"]:last-child::after { content: none; } [data-slot="stepper"][data-orientation="horizontal"]:dir(rtl) > [data-slot="stepper-item"]::after { transform-origin: right; } @media (prefers-reduced-motion: reduce) { [data-slot="stepper"][data-orientation="horizontal"] > [data-slot="stepper-item"]::after { transition-duration: 0s; } } /* A draft has one active stage, with three different ways to see its context. */ .v-stepper-example { width: 100%; min-width: 0; max-width: 840px; margin-inline: auto; display: grid; gap: 24px; padding-inline: 8px; box-sizing: border-box; color: var(--v-text); } .v-stepper-example__intro > p { font-size: 12px; color: var(--v-text-2); margin: 0 0 8px; } .v-stepper-example__intro > h3 { margin: 0 0 10px; font: 500 clamp(24px, 3vw, 30px) / 1.25 var(--font-display); } .v-stepper-example__layout { display: grid; gap: 24px; min-width: 0; } [data-slot="stepper-provider"][data-presentation] [data-slot="stepper-item"] { display: block; padding: 0; min-width: 0; } [data-slot="stepper-provider"][data-presentation] [data-slot="stepper-trigger"] { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 12px; row-gap: 4px; align-content: center; align-items: center; justify-items: start; min-height: 60px; width: 100%; height: auto; white-space: normal; text-align: start; padding: 8px; border-radius: 12px; background: transparent; box-shadow: none; color: var(--v-text-2); opacity: 1; } [data-slot="stepper-provider"][data-presentation] [data-slot="stepper-trigger"]:hover:not(:disabled) { background: color-mix(in oklab, var(--v-blue) 10%, var(--v-canvas)); } [data-slot="stepper-provider"][data-presentation] [data-slot="stepper-trigger"]:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; } [data-slot="stepper-provider"][data-presentation] [data-slot="stepper-indicator"] { --mfill: var(--v-pink); grid-row: 1 / 3; width: 44px; height: 44px; border-radius: 14px 14px 20px 14px; } [data-slot="stepper-provider"][data-presentation] [data-slot="stepper-indicator"]:has(> svg.v-morph) { background: transparent; box-shadow: none; } [data-slot="stepper-provider"][data-presentation] [data-slot="stepper-title"] { grid-column: 2; grid-row: 1; font-size: 14px; text-align: start; color: inherit; } .v-stepper-example__checkpoint-detail { grid-column: 2; grid-row: 2; font: 400 11px/1.5 var(--font-body); color: var(--v-text-2); } [data-slot="stepper-provider"][data-presentation] .-on [data-slot="stepper-title"] { color: var(--v-text); } [data-slot="stepper-provider"][data-presentation] [data-slot="stepper-item"]::before, [data-slot="stepper-provider"][data-presentation] [data-slot="stepper-item"]::after { pointer-events: none; } [data-slot="stepper-provider"][data-presentation="rail"] [data-slot="stepper-trigger"] { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 10px; padding: 8px 4px; } [data-slot="stepper-provider"][data-presentation="rail"] [data-slot="stepper-indicator"] { grid-row: 1; grid-column: 1; } [data-slot="stepper-provider"][data-presentation="rail"] [data-slot="stepper-title"] { grid-row: 2; grid-column: 1; text-align: center; } [data-slot="stepper-provider"][data-presentation="rail"] .v-stepper-example__checkpoint-detail { display: none; } [data-slot="stepper-provider"][data-presentation="rail"] [data-slot="stepper-item"]::before, [data-slot="stepper-provider"][data-presentation="rail"] [data-slot="stepper-item"]::after { top: 30px; } .v-stepper-example__workspace { display: grid; gap: 28px; min-width: 0; padding: clamp(16px, 3vw, 28px); border: 1px solid var(--v-border); border-radius: min(var(--v-control-radius, 24px), 24px); background: var(--v-canvas); } .v-stepper-example [data-step-panel] { display: grid; gap: 24px; min-width: 0; } .v-stepper-example [data-step-panel][hidden] { display: none; } .v-stepper-example__stage-title { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: 16px; } .v-stepper-example__stage-title p { font-size: 12px; color: var(--v-text-2); margin: 0 0 6px; } .v-stepper-example__stage-title h4 { font: 500 clamp(20px, 2.2vw, 25px) / 1.3 var(--font-display); margin: 0; } .v-stepper-example__stage-title h4:focus { outline: none; } .v-stepper-example__stage-title h4:focus-visible { outline: 2px solid var(--ring); outline-offset: 4px; } .v-stepper-example__number { display: grid; place-items: center; width: 48px; height: 60px; border-radius: 6px 6px 22px 6px; background: var(--v-yellow); color: var(--v-on-accent); font: 500 22px/1 var(--font-display); font-variant-numeric: tabular-nums; } .v-stepper-example__workspace [role="radiogroup"] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .v-stepper-example__summary { margin: 0; display: grid; gap: 0; } .v-stepper-example__summary > div { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 16px; padding: 16px 0; border-bottom: 1px dashed var(--v-border); } .v-stepper-example__summary dt { color: var(--v-text-2); font-size: 13px; } .v-stepper-example__summary dd { margin: 0; font-size: 16px; overflow-wrap: anywhere; } .v-stepper-example__actions { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; } .v-stepper-example__actions .v-btn { min-height: 44px; } .v-stepper-example__ending { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; } .v-stepper-example__ending p { flex: 1 1 180px; font-size: 12px; line-height: 1.6; color: var(--v-text-2); margin: 0; } [data-slot="stepper-provider"][data-presentation="ledger"] .v-stepper-example__layout { grid-template-columns: minmax(170px, 0.7fr) minmax(0, 1.6fr); gap: 20px; } [data-slot="stepper-provider"][data-presentation="ledger"] [data-slot="stepper"] { align-content: start; gap: 20px; } [data-slot="stepper-provider"][data-presentation="ledger"] [data-slot="stepper-item"] + [data-slot="stepper-item"]::before { inset-inline-start: 29px; top: -20px; height: 20px; } [data-slot="stepper-provider"][data-presentation="ledger"] .v-stepper-example__workspace { border-radius: 8px 24px 24px 8px; border-inline-start: 3px solid var(--v-blue); } [data-slot="stepper-provider"][data-presentation="compact"] .v-stepper-example__layout { gap: 12px; } [data-slot="stepper-provider"][data-presentation="compact"] [data-slot="stepper"] { gap: 8px; } [data-slot="stepper-provider"][data-presentation="compact"] [data-slot="stepper-item"]::before, [data-slot="stepper-provider"][data-presentation="compact"] [data-slot="stepper-item"]::after { content: none; } [data-slot="stepper-provider"][data-presentation="compact"] [data-slot="stepper-trigger"] { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 5px; gap: 10px; min-height: 44px; padding: 6px 0; border-radius: 6px; } [data-slot="stepper-progress-mark"] { display: none; } [data-slot="stepper-provider"][data-presentation="compact"] [data-slot="stepper-progress-mark"] { display: block; grid-column: 1; grid-row: 2; width: 100%; height: 5px; border-radius: 5px; background: var(--v-border); pointer-events: none; } [data-slot="stepper-provider"][data-presentation="compact"] .-on [data-slot="stepper-progress-mark"] { background: var(--v-pink); } [data-slot="stepper-provider"][data-presentation="compact"] .-done [data-slot="stepper-progress-mark"] { background: var(--v-olive); } [data-slot="stepper-provider"][data-presentation="compact"] [data-slot="stepper-indicator"], [data-slot="stepper-provider"][data-presentation="compact"] .v-stepper-example__checkpoint-detail { display: none; } [data-slot="stepper-provider"][data-presentation="compact"] [data-slot="stepper-title"] { grid-column: 1; grid-row: 1; font-size: 12px; } [data-slot="stepper-provider"][data-presentation="compact"] .v-stepper-example__workspace { border: none; border-top: 1px solid var(--v-border); border-radius: 0; background: transparent; padding: 16px 0 0; } [data-slot="stepper-provider"][data-motion="off"] [data-slot="stepper-indicator"], [data-slot="stepper-provider"][data-motion="off"] [data-slot="stepper-title"], [data-slot="stepper-provider"][data-motion="off"] [data-slot="stepper-item"]::after { transition: none; } @media (max-width: 640px) { [data-slot="stepper-provider"][data-presentation="ledger"] .v-stepper-example__layout { grid-template-columns: minmax(0, 1fr); } [data-slot="stepper-provider"][data-presentation="ledger"] [data-slot="stepper"] { gap: 8px; } [data-slot="stepper-provider"][data-presentation="ledger"] [data-slot="stepper-item"] + [data-slot="stepper-item"]::before { top: -8px; height: 8px; } .v-stepper-example__workspace [role="radiogroup"] { grid-template-columns: minmax(0, 1fr); } .v-stepper-example__stage-title { grid-template-columns: 40px minmax(0, 1fr); gap: 12px; } .v-stepper-example__number { width: 40px; height: 52px; } .v-stepper-example__summary > div { grid-template-columns: 1fr; gap: 6px; } } } 4b:["$","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","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"}]]}]}]]}],["$","$L4c",null,{"namespace":"@000h-cojeev","registryDependencies":["https://000h.cojeev.com/r/cojeev.json","https://000h.cojeev.com/r/button.json","https://000h.cojeev.com/r/animated-icon.json"]}]]}],["$","$L4d",null,{"children":["$","div",null,{"className":"@container","children":["$","div",null,{"className":"grid grid-cols-1 gap-4 @xl:grid-cols-2","children":[null,null,null,["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"CSS"}],["$","div",null,{"children":["$","$L4e",null,{"lang":"css","copyButton":true,"writing":false,"className":"rounded-none w-full max-h-80","header":false,"children":"@import \"@/styles/cojeev/stepper.css\" {\n\n}"}]}]]}]]}]}]}]]}],["$","$L4f",null,{"files":[{"path":"registry/cojeev/ui/stepper.tsx","content":"$50","type":"registry:ui"},{"path":"registry/cojeev/styles/stepper.css","content":"$51","type":"registry:file","target":"styles/cojeev/stepper.css"}],"className":"h-[70svh] min-h-80"}]]}]