2c:I[522016,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/0cxdppusfso3e.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],""] 2d:I[406394,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/0cxdppusfso3e.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"BlockTabs"] 2e:I[966139,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/0cxdppusfso3e.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"PreviewFrame"] 2f:I[967833,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/0cxdppusfso3e.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"CodeView"] 30:T30e5,"use client"; import * as React from "react"; import { IconCheck } from "@tabler/icons-react"; import { cva } from "class-variance-authority"; import { cn } from "@/lib/utils"; import { useControllable } from "../_shared/use-nav"; type StepIcon = React.ComponentType<{ className?: string; stroke?: number }>; export type StepperOrientation = "horizontal" | "vertical"; /** `numbered`: step numbers. `icon`: each step's icon. `bullet`: small dots, for timelines. */ export type StepperVariant = "numbered" | "icon" | "bullet"; export type StepperSize = "sm" | "default" | "lg"; export type StepperColor = "primary" | "success" | "info" | "warning" | "error"; /** Which steps a press can jump to. `completed`: steps before the current one. `all`: any step. */ export type StepperClickable = "completed" | "all" | false; export type StepperStep = { title: React.ReactNode; description?: React.ReactNode; /** Trailing meta line such as a timestamp. */ meta?: React.ReactNode; icon?: StepIcon; disabled?: boolean; }; type StepState = "completed" | "active" | "upcoming"; type RootCtx = { value: number; count: number; orientation: StepperOrientation; variant: StepperVariant; size: StepperSize; clickable: StepperClickable; completedIcon?: React.ReactNode; select: (index: number) => void; }; const RootContext = React.createContext(null); const IndexContext = React.createContext(0); function useRoot() { const ctx = React.useContext(RootContext); if (!ctx) throw new Error("Stepper parts must be used inside ."); return ctx; } /** Token variable per color. The foreground on a filled indicator is the page background, which reads on every hue in both themes. */ const COLORS: Record = { primary: { fill: "var(--primary)", on: "var(--primary-foreground)" }, success: { fill: "var(--success)", on: "var(--background)" }, info: { fill: "var(--info)", on: "var(--background)" }, warning: { fill: "var(--warning)", on: "var(--background)" }, error: { fill: "var(--error)", on: "var(--background)" }, }; const SIZES = { sm: { ind: "1.5rem", bullet: "0.875rem", text: "text-xs", line: "0.9375rem" }, default: { ind: "2rem", bullet: "1rem", text: "text-sm", line: "1.25rem" }, lg: { ind: "2.5rem", bullet: "1.25rem", text: "text-base", line: "1.5rem" }, } as const; const indicator = cva( "relative z-10 inline-flex size-(--ind) shrink-0 items-center justify-center rounded-full border font-medium tabular-nums transition-[background-color,border-color,color,box-shadow,scale] duration-200 ease-out motion-reduce:transition-none", { variants: { state: { completed: "border-(--stepper-fill) bg-(--stepper-fill) text-(--stepper-on)", active: "border-(--stepper-fill) bg-background text-foreground shadow-[0_0_0_3px_color-mix(in_oklch,var(--stepper-fill)_16%,transparent)]", upcoming: "border-border bg-background text-muted-foreground", }, bullet: { true: "", false: "" }, }, compoundVariants: [ { bullet: true, state: "active", class: "border-[3px] shadow-none" }, { bullet: true, state: "upcoming", class: "border-2" }, ], defaultVariants: { state: "upcoming", bullet: false }, }, ); export type StepperProps = { /** Data-driven steps. Pass `StepperItem` children instead for full control. */ steps?: StepperStep[]; children?: React.ReactNode; /** Zero-based index of the current step. A value equal to the step count marks every step complete. */ value?: number; defaultValue?: number; onValueChange?: (value: number) => void; orientation?: StepperOrientation; variant?: StepperVariant; size?: StepperSize; color?: StepperColor; /** Defaults to `completed` when `onValueChange` is given, otherwise the stepper is display only. */ clickable?: StepperClickable; /** Shown in place of the number or icon on completed steps. Defaults to a check. */ completedIcon?: React.ReactNode; "aria-label"?: string; className?: string; }; /** * A progress stepper. Steps before `value` are completed, the step at `value` is active. Lines fill with a * transform and nothing moves on first paint. */ export function Stepper({ steps, children, value, defaultValue = 0, onValueChange, orientation = "horizontal", variant = "numbered", size = "default", color = "primary", clickable, completedIcon, className, ...aria }: StepperProps) { const [current, setCurrent] = useControllable(value, defaultValue, onValueChange); const items = steps ? steps.map((step, i) => ) : React.Children.toArray(children); const count = items.length; const resolved: StepperClickable = clickable ?? (onValueChange || value === undefined ? "completed" : false); const [ready, setReady] = React.useState(false); React.useEffect(() => { let second = 0; const first = requestAnimationFrame(() => { second = requestAnimationFrame(() => setReady(true)); }); return () => { cancelAnimationFrame(first); cancelAnimationFrame(second); }; }, []); const palette = COLORS[color]; const dims = SIZES[size]; const horizontal = orientation === "horizontal"; return (

{item}

); } function stateOf(index: number, value: number): StepState { return index < value ? "completed" : index === value ? "active" : "upcoming"; } /** One step: trigger (indicator plus text) and the line to the next step. */ export function StepperItem({ title, description, meta, icon, disabled, className }: StepperStep & { className?: string }) { const root = useRoot(); const index = React.useContext(IndexContext); const state = stateOf(index, root.value); const last = index === root.count - 1; const horizontal = root.orientation === "horizontal"; const canPress = !disabled && ((root.clickable === "completed" && state === "completed") || (root.clickable === "all" && state !== "active")); const body = ( <> ); const triggerClass = cn( "flex min-w-0 text-start outline-none", horizontal ? "w-full flex-col items-center gap-2 text-center" : "w-full gap-3", canPress && "cursor-pointer rounded-lg focus-visible:ring-3 focus-visible:ring-ring/50 active:not-disabled:scale-[0.99] motion-reduce:active:scale-100 transition-[scale] duration-150 ease-out", ); return (

{canPress ? ( ) : (

{body}

)} {last ? null : }

); } export function StepperIndicator({ state, index, icon: Icon, className, }: { state: StepState; index: number; icon?: StepIcon; className?: string; }) { const { variant, completedIcon, orientation } = useRoot(); const bullet = variant === "bullet"; let content: React.ReactNode = null; if (!bullet) { if (state === "completed") content = completedIcon ?? ; else if (variant === "icon" && Icon) content = ; else content = index + 1; } return ( ); } function StepperText({ title, description, meta, }: Pick) { const { orientation } = useRoot(); const horizontal = orientation === "horizontal"; return ( {title} {meta && !horizontal ? ( {meta} ) : null} {description ? ( {description} ) : null} {meta && horizontal ? ( {meta} ) : null} ); } /** The line to the next step. Its fill scales in when the step before it completes. */ export function StepperSeparator({ completed }: { completed: boolean }) { const { orientation } = useRoot(); const horizontal = orientation === "horizontal"; return ( ); } 31:T137e,"use client"; import { useCallback, useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react"; const noop = () => () => {}; /** False on the server and during hydration, true afterwards. */ export function useMounted(): boolean { return useSyncExternalStore(noop, () => true, () => false); } /** True on Apple platforms, where the modifier key is Cmd. Server and first client render say Mac. */ export function useIsMac(): boolean { return useSyncExternalStore( noop, () => /Mac|iPhone|iPad/.test(navigator.platform), () => true, ); } const listeners = new Set<() => void>(); function subscribeStorage(notify: () => void) { listeners.add(notify); window.addEventListener("storage", notify); return () => { listeners.delete(notify); window.removeEventListener("storage", notify); }; } function readRaw(key: string | undefined): string | null { if (!key) return null; try { return window.localStorage.getItem(key); } catch { return null; } } function writeStorage(key: string, value: unknown) { try { window.localStorage.setItem(key, JSON.stringify(value)); } catch { /* private mode or quota: the state still works in memory */ } listeners.forEach((notify) => notify()); } /** * State that survives reloads when `key` is given. The server and the hydrating render see `initial`; the stored * value arrives right after, and `ready` turns true two frames later so callers can keep transitions off until * the restored value has painted. Without a key it is plain state. */ export function usePersistedState( key: string | undefined, initial: T, ): [value: T, setValue: (next: T) => void, ready: boolean] { const [local, setLocal] = useState(initial); const [ready, setReady] = useState(!key); const raw = useSyncExternalStore( subscribeStorage, () => readRaw(key), () => null, ); const stored = useMemo(() => { if (raw === null) return undefined; try { return JSON.parse(raw) as T; } catch { return undefined; } }, [raw]); useEffect(() => { if (!key) return; let second = 0; const first = requestAnimationFrame(() => { second = requestAnimationFrame(() => setReady(true)); }); return () => { cancelAnimationFrame(first); cancelAnimationFrame(second); }; }, [key]); const set = useCallback( (next: T) => { setLocal(next); if (key) writeStorage(key, next); }, [key], ); return [key && stored !== undefined ? stored : local, set, ready]; } /** Controlled or uncontrolled value, Base UI naming. */ export function useControllable( value: T | undefined, defaultValue: T, onChange?: (next: T) => void, ): [T, (next: T) => void] { const [inner, setInner] = useState(defaultValue); const controlled = value !== undefined; const current = controlled ? value : inner; const onChangeRef = useRef(onChange); useEffect(() => { onChangeRef.current = onChange; }); const set = useCallback( (next: T) => { if (!controlled) setInner(next); onChangeRef.current?.(next); }, [controlled], ); return [current, set]; } type ShortcutOptions = { /** `window`: any time. `within`: only while the element holds focus or the pointer. */ scope?: "window" | "within"; /** Element used by `within`. */ scopeRef?: React.RefObject; /** Also swallow these Cmd/Ctrl+key combos before other listeners see them. */ swallow?: string[]; }; /** * Cmd/Ctrl + key. Runs in the capture phase so it can claim a combo (for example, to replace the Kobra * sidebar's built-in Cmd/Ctrl+B with another key). A key of `false` disables the shortcut. */ export function useModShortcut( key: string | false | undefined, handler: () => void, { scope = "window", scopeRef, swallow = [] }: ShortcutOptions = {}, ) { const handlerRef = useRef(handler); useEffect(() => { handlerRef.current = handler; }); useEffect(() => { const wanted = key ? key.toLowerCase() : undefined; const onKeyDown = (event: KeyboardEvent) => { if (!(event.metaKey || event.ctrlKey) || event.altKey || event.shiftKey) return; const pressed = event.key.toLowerCase(); if (swallow.includes(pressed) && pressed !== wanted) { event.stopPropagation(); return; } if (!wanted || pressed !== wanted) return; if (scope === "within") { const node = scopeRef?.current; if (!node || !(node.contains(document.activeElement) || node.matches(":hover"))) return; } event.preventDefault(); event.stopPropagation(); handlerRef.current(); }; window.addEventListener("keydown", onKeyDown, true); return () => window.removeEventListener("keydown", onKeyDown, true); // swallow is compared by content // eslint-disable-next-line react-hooks/exhaustive-deps }, [key, scope, scopeRef, swallow.join("|")]); } 32:T16d0,"use client"; import { useState } from "react"; import { IconSparkles } from "@tabler/icons-react"; import { Button } from "@/components/ui/button"; import { checkoutSteps, checkoutStepsIcons, onboardingSteps, trackingSteps, trialSteps, } from "../_fixtures"; import { DemoPage, DemoSection } from "../_shared/demo-kit"; import { Stepper, type StepperProps } from "./stepper"; function Panel({ children, className }: { children: React.ReactNode; className?: string }) { return

{children}

; } function Controls({ value, count, onChange }: { value: number; count: number; onChange: (v: number) => void }) { return (

Step {Math.min(value + 1, count)} of {count}

); } /** A controlled stepper with Back and Next. Completed steps can be pressed to go back. */ function Driven({ steps, initial = 1, ...props }: { steps: StepperProps["steps"]; initial?: number } & Omit) { const [value, setValue] = useState(initial); return (

); } export function StepperDemo() { const plain = checkoutSteps.map(({ title }) => ({ title })); return (

({ title, description }))} orientation="vertical" defaultValue={1} aria-label="Numbered, vertical" /> ({ title }))} orientation="vertical" variant="bullet" defaultValue={2} aria-label="Bullets, vertical" />

} aria-label="Custom completed icon" /> ); } export default StepperDemo; 33:T7eb,import type { BlockMeta } from "../../../lib/block-meta"; export const stepperMeta: BlockMeta = { slug: "stepper", title: "Stepper", description: "Progress stepper with numbered, icon and bullet indicators, horizontal and vertical layouts, controlled value with clickable completed steps, and tracking, onboarding and trial timelines.", group: "navigation", kobraDeps: [], files: ["blocks/navigation/stepper/stepper.tsx", "blocks/navigation/_shared/use-nav.ts"], props: [ { name: "steps", type: "{ title; description?; meta?; icon?; disabled? }[]", description: "Data-driven steps. Pass StepperItem children for full control." }, { name: "value", type: "number", description: "Zero-based current step. A value equal to the step count marks everything complete." }, { name: "defaultValue", type: "number", default: "0", description: "Uncontrolled initial step." }, { name: "onValueChange", type: "(value: number) => void", description: "Called when a completed step is pressed. Without it the stepper is display only (unless uncontrolled)." }, { name: "orientation", type: "'horizontal' | 'vertical'", default: "'horizontal'", description: "Layout axis." }, { name: "variant", type: "'numbered' | 'icon' | 'bullet'", default: "'numbered'", description: "Indicator style." }, { name: "size", type: "'sm' | 'default' | 'lg'", default: "'default'", description: "Indicator and text size." }, { name: "color", type: "'primary' | 'success' | 'info' | 'warning' | 'error'", default: "'primary'", description: "Token color for completed and active steps." }, { name: "clickable", type: "'completed' | 'all' | false", description: "Which steps can be pressed. Defaults to completed when a change handler exists." }, { name: "completedIcon", type: "ReactNode", description: "Replaces the check on completed steps." }, { name: "className", type: "string", description: "Root only." }, ], tags: ["steps", "progress", "timeline", "wizard", "app-ui"], status: "ready", }; 23:["$","article",null,{"className":"grid gap-6","children":[["$","header",null,{"className":"grid gap-3","children":[["$","nav",null,{"aria-label":"breadcrumb","data-slot":"breadcrumb","className":"","children":["$","ol",null,{"data-slot":"breadcrumb-list","className":"flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground","children":[["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","$L2c",null,{"href":"/","data-slot":"breadcrumb-link","className":"transition-colors hover:text-foreground","children":"Kobra Commerce"}]}],["$","li",null,{"data-slot":"breadcrumb-separator","role":"presentation","aria-hidden":"true","className":"[&>svg]:size-3.5","children":["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"tabler-icon tabler-icon-chevron-right rtl:-scale-x-100","children":["$undefined",["$","path","svg-0",{"d":"M9 6l6 6l-6 6"}],"$undefined"]}]}],["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","$L2c",null,{"href":"/#navigation","data-slot":"breadcrumb-link","className":"transition-colors hover:text-foreground","children":"Navigation"}]}],["$","li",null,{"data-slot":"breadcrumb-separator","role":"presentation","aria-hidden":"true","className":"[&>svg]:size-3.5","children":["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"tabler-icon tabler-icon-chevron-right rtl:-scale-x-100","children":["$undefined",["$","path","svg-0",{"d":"M9 6l6 6l-6 6"}],"$undefined"]}]}],["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","span",null,{"data-slot":"breadcrumb-page","role":"link","aria-disabled":"true","aria-current":"page","className":"font-normal text-foreground","children":"Stepper"}]}]]}]}],["$","div",null,{"className":"flex flex-wrap items-center gap-3","children":[["$","h1",null,{"className":"text-2xl font-bold","children":"Stepper"}],["$","span",null,{"data-slot":"badge","data-variant":"green","className":"group/badge t-label relative isolate inline-flex w-fit shrink-0 items-center justify-center gap-1 rounded-full border border-transparent py-0.5 font-medium [--surface-calm:0.5] whitespace-nowrap transition-ring before:pointer-events-none before:absolute before:inset-0 before:-z-10 before:rounded-[inherit] before:border before:border-transparent before:transition-[scale,background-color,border-color] before:duration-150 before:ease-out focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 motion-reduce:before:transition-none has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [a,button]:active:before:scale-[0.97] motion-reduce:[a,button]:active:before:scale-100 [&>svg]:pointer-events-none [&>svg]:size-3! t-surface t-surface-success text-[var(--badge-green-fg)] h-5 px-1.5 text-xs","children":"Ready"}]]}],["$","p",null,{"className":"max-w-[65ch] text-sm text-muted-foreground","children":"Progress stepper with numbered, icon and bullet indicators, horizontal and vertical layouts, controlled value with clickable completed steps, and tracking, onboarding and trial timelines."}]]}],["$","$L2d",null,{"preview":["$","$L2e",null,{"slug":"stepper","group":"navigation","minHeight":640,"fixedHeight":"$undefined"}],"code":["$","$L2f",null,{"files":[{"path":"blocks/navigation/stepper/stepper.tsx","code":"$30"},{"path":"blocks/navigation/_shared/use-nav.ts","code":"$31"},{"path":"blocks/navigation/stepper/demo.tsx","code":"$32"},{"path":"blocks/navigation/stepper/meta.ts","code":"$33"}]}],"props":"$L34"}],"$L35"]}]