@eifi1/ui-kit 0.4.0

package/dist/tour/tour.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/tour/tour.tsx"],"sourcesContent":["import {\n  createContext,\n  useCallback,\n  useContext,\n  useEffect,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport type { CSSProperties, ReactNode } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { cn } from \"../lib/cn\";\nimport { Button } from \"../components/ui\";\n\nexport type TourPlacement = \"top\" | \"right\" | \"bottom\" | \"left\" | \"center\";\n\nexport interface TourStep {\n  /** CSS selector for the element to spotlight. Omit for a centered step\n   *  (welcome/finish). If the target isn't found/visible, the step centers. */\n  target?: string;\n  title: string;\n  body: ReactNode;\n  /** Extra footer content, e.g. a \"load sample data\" shortcut. */\n  action?: ReactNode;\n  /** Spotlight padding around the target, px (default 8). */\n  padding?: number;\n  /** Where the card sits relative to the target. Omit for auto placement\n   *  (below → above → centered). \"center\" ignores the target and centers on\n   *  screen. An explicit side flips to the opposite side if it would overflow,\n   *  then clamps into the viewport. */\n  placement?: TourPlacement;\n  /** Advance only when the user clicks the spotlighted target itself (not the\n   *  card's Next button). Requires `target`: the real control's own handler runs\n   *  first, then the tour steps forward on a microtask. The overlay stays\n   *  click-through to the target. */\n  awaitClick?: boolean;\n  /** Runs before the step is shown — e.g. navigate to a route, open a panel.\n   *  May be async; the step waits for it, then locates the target. */\n  beforeStep?: () => void | Promise<void>;\n}\n\nexport interface TourLabels {\n  next: string;\n  back: string;\n  skip: string;\n  done: string;\n  /** Shown in place of the Next button on an `awaitClick` step. */\n  awaitClickHint: string;\n  /** Step counter, e.g. (2, 7) => \"2 / 7\". */\n  step: (current: number, total: number) => string;\n}\n\nconst DEFAULT_LABELS: TourLabels = {\n  next: \"Next\",\n  back: \"Back\",\n  skip: \"Skip\",\n  done: \"Done\",\n  awaitClickHint: \"Click the highlighted element to continue\",\n  step: (c, t) => `${c} / ${t}`,\n};\n\ninterface StartOptions {\n  /** Stable id of the tour, surfaced as `activeId` so the app can mirror it to\n   *  the URL (deep-link / evaluation tracking) and record completion. */\n  id?: string;\n  /** Start at this step index instead of 0 (clamped) — for URL/deep-link resume. */\n  startIndex?: number;\n  /** Fires synchronously when the tour starts (e.g. enable a mock interceptor). */\n  onStart?: () => void;\n  onFinish?: () => void;\n  onSkip?: () => void;\n}\n\ninterface TourContextValue {\n  active: boolean;\n  /** Id of the running tour (from {@link StartOptions.id}), else null. */\n  activeId: string | null;\n  /** Start a tour with the given steps. */\n  start: (steps: TourStep[], opts?: StartOptions) => void;\n  /** End the current tour (no callbacks fire). */\n  stop: () => void;\n  /** Advance one step; past the last step it finishes the tour (fires onFinish). */\n  next: () => void;\n  /** Go back one step (no-op on the first). */\n  prev: () => void;\n  /** Jump to a step by index, clamped to range — e.g. for URL/deep-link resume. */\n  goToStep: (index: number) => void;\n  /** Current step (0-based; 0 while inactive). */\n  index: number;\n  /** Total steps (0 while inactive). */\n  total: number;\n}\n\nconst TourContext = createContext<TourContextValue | null>(null);\n\nexport function useTour(): TourContextValue {\n  const ctx = useContext(TourContext);\n  if (!ctx) throw new Error(\"useTour must be used within <TourProvider>\");\n  return ctx;\n}\n\n/**\n * The tour engine if it is there, `null` if it is not — for a control that is a\n * DECORATION rather than a participant.\n *\n * {@link useTour}'s throw is correct and stays: a component that runs a tour cannot do\n * its job without the provider, and failing loudly is how that gets fixed. But the\n * throw's blast radius is whatever error boundary is above it, and for a launcher in\n * the app shell that is the whole app.\n *\n * Keksdose feedback dev#524 is what that costs: an `@hb/ui` module was edited while a\n * dev server was running, vite re-evaluated it, and the module's freshly created\n * context object was no longer the one the mounted provider was providing. React's\n * `useContext` then answers `null` for a provider that is, structurally, right there —\n * and the top bar's tour menu took the entire shell down with it. **Build-time module\n * graphs cannot produce that**, so it is a development-only failure; a menu that\n * disappears for a second is the proportionate response to it either way.\n *\n * Only for controls that can honestly render nothing. If a component would show a\n * broken half of itself without the tour, it wants {@link useTour}.\n */\nexport function useTourOptional(): TourContextValue | null {\n  return useContext(TourContext);\n}\n\n/**\n * Provides the guided-tour engine: a dimmed spotlight overlay + step card driven\n * by a list of {@link TourStep}s. Domain-free — the app supplies the steps (copy,\n * selectors, per-step navigation, placement) and the translated {@link TourLabels}.\n * Mount once inside the router; start a tour from anywhere via {@link useTour},\n * which also exposes step control (`next`/`prev`/`goToStep`) and the current\n * `index`/`total` for URL mirroring, `awaitClick` and deep-link resume.\n */\nexport function TourProvider({\n  children,\n  labels,\n}: {\n  children: ReactNode;\n  labels?: Partial<TourLabels>;\n}) {\n  const merged: TourLabels = { ...DEFAULT_LABELS, ...labels };\n  const [steps, setSteps] = useState<TourStep[] | null>(null);\n  const [index, setIndex] = useState(0);\n  const [activeId, setActiveId] = useState<string | null>(null);\n  const optsRef = useRef<StartOptions>({});\n  // Live mirrors so the step-control callbacks can stay stable (identity-safe for\n  // consumers) while still reading the current steps/index.\n  const stepsRef = useRef<TourStep[] | null>(null);\n  stepsRef.current = steps;\n  const indexRef = useRef(0);\n  indexRef.current = index;\n  const active = !!steps && steps.length > 0;\n  const total = steps?.length ?? 0;\n\n  const start = useCallback((s: TourStep[], opts?: StartOptions) => {\n    optsRef.current = opts ?? {};\n    optsRef.current.onStart?.();\n    setIndex(Math.min(Math.max(0, opts?.startIndex ?? 0), Math.max(0, s.length - 1)));\n    setActiveId(opts?.id ?? null);\n    setSteps(s);\n  }, []);\n  const stop = useCallback(() => {\n    setSteps(null);\n    setActiveId(null);\n  }, []);\n  const finish = useCallback(() => {\n    optsRef.current.onFinish?.();\n    setSteps(null);\n    setActiveId(null);\n  }, []);\n  const skip = useCallback(() => {\n    optsRef.current.onSkip?.();\n    setSteps(null);\n    setActiveId(null);\n  }, []);\n\n  const goToStep = useCallback((i: number) => {\n    const len = stepsRef.current?.length ?? 0;\n    if (len === 0) return;\n    setIndex(Math.min(Math.max(0, i), len - 1));\n  }, []);\n  const next = useCallback(() => {\n    const len = stepsRef.current?.length ?? 0;\n    if (len === 0) return;\n    if (indexRef.current >= len - 1) finish();\n    else setIndex(indexRef.current + 1);\n  }, [finish]);\n  const prev = useCallback(() => {\n    if (indexRef.current > 0) setIndex(indexRef.current - 1);\n  }, []);\n\n  return (\n    <TourContext.Provider value={{ active, activeId, start, stop, next, prev, goToStep, index, total }}>\n      {children}\n      {active && (\n        <TourOverlay\n          steps={steps!}\n          index={index}\n          labels={merged}\n          onNext={next}\n          onPrev={prev}\n          onSkip={skip}\n        />\n      )}\n    </TourContext.Provider>\n  );\n}\n\ninterface Rect {\n  top: number;\n  left: number;\n  width: number;\n  height: number;\n}\n\nfunction isVisible(el: Element): boolean {\n  // A non-zero box already rules out display:none on the element or any ancestor\n  // (an unrendered element measures 0x0). We deliberately do NOT test\n  // offsetParent: it is null for position:fixed elements even when fully visible,\n  // which made the mobile bottom-nav bar (fixed) un-highlightable on mobile\n  // (feedback #313). visibility:hidden keeps a box, so check it explicitly.\n  const r = el.getBoundingClientRect();\n  if (r.width <= 0 || r.height <= 0) return false;\n  const style = getComputedStyle(el);\n  return style.visibility !== \"hidden\" && style.display !== \"none\";\n}\n\n// The first VISIBLE element matching the selector, not merely the first in DOM\n// order. This lets a step target the same control across layouts with one\n// combined selector — e.g. the desktop sidebar link AND the mobile bottom-bar\n// link — where the off-layout copy is present but `display:none` (feedback\n// #313). Returns null while none is visible so the finder keeps retrying.\nfunction queryVisibleTarget(selector: string): Element | null {\n  const els = document.querySelectorAll(selector);\n  for (const el of els) {\n    if (isVisible(el)) return el;\n  }\n  return null;\n}\n\nfunction sameRect(a: Rect | null, b: Rect | null): boolean {\n  if (a === b) return true;\n  if (!a || !b) return false;\n  return a.top === b.top && a.left === b.left && a.width === b.width && a.height === b.height;\n}\n\nfunction TourOverlay({\n  steps,\n  index,\n  labels,\n  onNext,\n  onPrev,\n  onSkip,\n}: {\n  steps: TourStep[];\n  index: number;\n  labels: TourLabels;\n  onNext: () => void;\n  onPrev: () => void;\n  onSkip: () => void;\n}) {\n  const step = steps[index];\n  const isFirst = index === 0;\n  const isLast = index === steps.length - 1;\n  const [rect, setRect] = useState<Rect | null>(null);\n  const [ready, setReady] = useState(false);\n\n  // Run beforeStep, then locate the target (retrying across route/render lag).\n  useEffect(() => {\n    let cancelled = false;\n    let raf = 0;\n    setReady(false);\n    setRect(null);\n    void (async () => {\n      await step.beforeStep?.();\n      if (cancelled) return;\n      if (!step.target) {\n        setReady(true);\n        return;\n      }\n      let tries = 0;\n      const find = () => {\n        if (cancelled) return;\n        const el = queryVisibleTarget(step.target!);\n        if (el) {\n          el.scrollIntoView({ block: \"center\", behavior: \"smooth\" });\n          const r = el.getBoundingClientRect();\n          setRect({ top: r.top, left: r.left, width: r.width, height: r.height });\n          setReady(true);\n          return;\n        }\n        if (tries++ < 45) raf = requestAnimationFrame(find);\n        else setReady(true); // give up → render centered\n      };\n      find();\n    })();\n    return () => {\n      cancelled = true;\n      cancelAnimationFrame(raf);\n    };\n  }, [index, step]);\n\n  // Follow the target as the page scrolls / reflows.\n  useEffect(() => {\n    if (!step.target) return;\n    const update = () => {\n      const el = queryVisibleTarget(step.target!);\n      if (el) {\n        const r = el.getBoundingClientRect();\n        const next = { top: r.top, left: r.left, width: r.width, height: r.height };\n        setRect((prev) => (sameRect(prev, next) ? prev : next));\n      }\n    };\n    window.addEventListener(\"scroll\", update, true);\n    window.addEventListener(\"resize\", update);\n    const id = window.setInterval(update, 250);\n    return () => {\n      window.removeEventListener(\"scroll\", update, true);\n      window.removeEventListener(\"resize\", update);\n      clearInterval(id);\n    };\n  }, [index, step]);\n\n  // awaitClick: advance when the *real* target is clicked. The overlay is\n  // click-through (pointer-events-none except the card) so the element's own\n  // handler runs first; we step forward on the next macrotask.\n  useEffect(() => {\n    if (!ready || !step.awaitClick || !step.target) return;\n    const el = queryVisibleTarget(step.target);\n    if (!el) return;\n    const onClick = () => window.setTimeout(() => onNext(), 0);\n    el.addEventListener(\"click\", onClick, { once: true });\n    return () => el.removeEventListener(\"click\", onClick);\n  }, [ready, index, step, onNext]);\n\n  // Keyboard: Esc skips, →/Enter advance, ← goes back. On awaitClick steps Enter\n  // is ignored (it would fire the target's click AND advance) — → stays as an\n  // escape hatch.\n  useEffect(() => {\n    const onKey = (e: KeyboardEvent) => {\n      if (e.key === \"Escape\") {\n        onSkip();\n      } else if (e.key === \"ArrowRight\") {\n        e.preventDefault();\n        onNext();\n      } else if (e.key === \"Enter\") {\n        if (step.awaitClick) return;\n        e.preventDefault();\n        onNext();\n      } else if (e.key === \"ArrowLeft\") {\n        if (!isFirst) onPrev();\n      }\n    };\n    document.addEventListener(\"keydown\", onKey);\n    return () => document.removeEventListener(\"keydown\", onKey);\n  }, [isFirst, step, onNext, onPrev, onSkip]);\n\n  if (!ready) return null;\n\n  const pad = step.padding ?? 8;\n  const spot: Rect | null = rect\n    ? { top: rect.top - pad, left: rect.left - pad, width: rect.width + pad * 2, height: rect.height + pad * 2 }\n    : null;\n\n  return createPortal(\n    <div className=\"pointer-events-none fixed inset-0 z-[60]\" role=\"dialog\" aria-modal=\"true\" aria-label={step.title}>\n      {spot ? (\n        <div\n          className=\"pointer-events-none fixed rounded-lg transition-all duration-200 ease-out\"\n          style={{\n            top: spot.top,\n            left: spot.left,\n            width: spot.width,\n            height: spot.height,\n            // A two-tone frame, not a single translucent ring.\n            //\n            // The old treatment was `ring-2 ring-white/80` over a 55% scrim, and it\n            // \"was barely visible\" on the app's blue-tinted surfaces. Two reasons,\n            // and a single ring can't fix either: at 55% the surround stays bright\n            // enough that the un-dimmed hole barely reads AS a hole, and a 80%-white\n            // ring sitting on the edge of a light card is white-on-near-white.\n            //\n            // So: an opaque white band immediately around the target, a dark keyline\n            // outside it, then the scrim. Whatever the target's own colour is, one of\n            // the two bands is always in contrast with it and the other is always in\n            // contrast with the dimmed surround — there is no background that can\n            // swallow both. The blurred layer between them softens the step so the\n            // frame reads as lighting rather than as a pasted-on rectangle.\n            boxShadow: [\n              \"0 0 0 3px rgba(255,255,255,0.98)\",\n              \"0 0 0 5px rgba(15,23,42,0.92)\",\n              \"0 0 18px 6px rgba(15,23,42,0.45)\",\n              \"0 0 0 9999px rgba(15,23,42,0.70)\",\n            ].join(\", \"),\n          }}\n        />\n      ) : (\n        <div className=\"pointer-events-auto fixed inset-0 bg-slate-900/70\" />\n      )}\n      <TourCard\n        step={step}\n        index={index}\n        total={steps.length}\n        labels={labels}\n        isFirst={isFirst}\n        isLast={isLast}\n        rect={spot}\n        onBack={onPrev}\n        onNext={onNext}\n        onSkip={onSkip}\n      />\n    </div>,\n    document.body,\n  );\n}\n\n/**\n * Card position (viewport px) for the given placement relative to the padded\n * spotlight `rect`. Omitted placement keeps the original auto behavior\n * (below → above → vertically centered); an explicit side flips to its opposite\n * if it would overflow, then clamps into the viewport. \"center\" (or no rect)\n * centers on screen.\n */\nfunction placeCard(\n  rect: Rect | null,\n  cw: number,\n  ch: number,\n  vw: number,\n  vh: number,\n  m: number,\n  placement?: TourPlacement,\n): { top: number; left: number } {\n  if (!rect || placement === \"center\") {\n    return { top: Math.max(m, (vh - ch) / 2), left: Math.max(m, (vw - cw) / 2) };\n  }\n  const clampX = (x: number) => Math.min(Math.max(m, x), Math.max(m, vw - cw - m));\n  const clampY = (y: number) => Math.min(Math.max(m, y), Math.max(m, vh - ch - m));\n  const centerX = clampX(rect.left + rect.width / 2 - cw / 2);\n  const centerY = clampY(rect.top + rect.height / 2 - ch / 2);\n  const belowTop = rect.top + rect.height + m;\n  const aboveTop = rect.top - ch - m;\n  const rightLeft = rect.left + rect.width + m;\n  const leftLeft = rect.left - cw - m;\n  const fitsBelow = belowTop + ch <= vh;\n  const fitsAbove = aboveTop >= 0;\n  const fitsRight = rightLeft + cw <= vw;\n  const fitsLeft = leftLeft >= 0;\n\n  switch (placement) {\n    case \"top\":\n      return { top: fitsAbove ? aboveTop : fitsBelow ? belowTop : clampY(aboveTop), left: centerX };\n    case \"bottom\":\n      return { top: fitsBelow ? belowTop : fitsAbove ? aboveTop : clampY(belowTop), left: centerX };\n    case \"right\":\n      return { top: centerY, left: fitsRight ? rightLeft : fitsLeft ? leftLeft : clampX(rightLeft) };\n    case \"left\":\n      return { top: centerY, left: fitsLeft ? leftLeft : fitsRight ? rightLeft : clampX(leftLeft) };\n    default:\n      if (fitsBelow) return { top: belowTop, left: centerX };\n      if (fitsAbove) return { top: aboveTop, left: centerX };\n      return { top: Math.max(m, (vh - ch) / 2), left: centerX };\n  }\n}\n\nfunction TourCard({\n  step,\n  index,\n  total,\n  labels,\n  isFirst,\n  isLast,\n  rect,\n  onBack,\n  onNext,\n  onSkip,\n}: {\n  step: TourStep;\n  index: number;\n  total: number;\n  labels: TourLabels;\n  isFirst: boolean;\n  isLast: boolean;\n  rect: Rect | null;\n  onBack: () => void;\n  onNext: () => void;\n  onSkip: () => void;\n}) {\n  const ref = useRef<HTMLDivElement>(null);\n  const [style, setStyle] = useState<CSSProperties>({ opacity: 0 });\n\n  useLayoutEffect(() => {\n    const card = ref.current;\n    if (!card) return;\n    setStyle(\n      placeCard(rect, card.offsetWidth, card.offsetHeight, window.innerWidth, window.innerHeight, 12, step.placement),\n    );\n  }, [rect, index, step.placement]);\n\n  return (\n    <div\n      ref={ref}\n      style={style}\n      className=\"pointer-events-auto fixed z-[61] w-80 max-w-[calc(100vw-1.5rem)] rounded-lg border border-slate-200 bg-white p-4 shadow-xl transition-all duration-200 ease-out dark:border-slate-700 dark:bg-slate-900\"\n    >\n      <div className=\"text-sm font-semibold text-slate-900 dark:text-slate-100\">{step.title}</div>\n      <div className=\"mt-1 text-sm leading-relaxed text-slate-600 dark:text-slate-300\">{step.body}</div>\n      {step.action && <div className=\"mt-3\">{step.action}</div>}\n      <div className=\"mt-4 space-y-2\">\n        <div className=\"flex items-center justify-between gap-2\">\n          <button\n            type=\"button\"\n            onClick={onSkip}\n            className=\"text-xs text-slate-400 hover:text-slate-600 dark:text-slate-500 dark:hover:text-slate-300\"\n          >\n            {labels.skip}\n          </button>\n          <div className=\"flex items-center gap-2\">\n            <span className=\"whitespace-nowrap text-xs tabular-nums text-slate-400 dark:text-slate-500\">\n              {labels.step(index + 1, total)}\n            </span>\n            {!isFirst && (\n              <Button variant=\"secondary\" onClick={onBack} className=\"px-2.5 py-1 text-xs\">\n                {labels.back}\n              </Button>\n            )}\n            {/* On an awaitClick step the Next button is replaced by a hint on its\n                own row below, so it doesn't cram the counter + buttons and wrap.\n                Only when the target was actually FOUND, though — `rect` is null\n                when the finder gave up, and the click listener early-returns on\n                the same absence. Keyed on `step.target` alone this hid the only\n                way forward on any step whose anchor happens not to be rendered\n                for this user (a guest sees no \"add account\" button), leaving the\n                undocumented ArrowRight key as the sole escape. */}\n            {!(step.awaitClick && step.target && rect) && (\n              <Button variant=\"brand\" onClick={onNext} className={cn(\"px-2.5 py-1 text-xs\")}>\n                {isLast ? labels.done : labels.next}\n              </Button>\n            )}\n          </div>\n        </div>\n        {step.awaitClick && step.target && rect && (\n          <div className=\"text-center text-xs italic text-slate-400 dark:text-slate-500\">\n            {labels.awaitClickHint}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/wizard/stepper-nav.d.ts

@@ -0,0 +1,30 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { UseWizardReturn, WizardLabels } from './types.js';
+
+/**
+ * The chrome around a wizard: the step indicator, the step content, and the
+ * Cancel / Back / Skip / Next / Finish bar — plus the cancel-confirmation
+ * dialog, because "are you sure you want to lose this" is part of the wizard's
+ * contract rather than something each app should re-decide.
+ *
+ * It is a component and not a set of parts for one reason: which button shows,
+ * and whether it is enabled, is a function of `wizard` state that was getting
+ * re-derived (and re-derived slightly differently) at every call site. Finish is
+ * gated on `canFinish`, Next and Skip on `nextBlocked`, and Skip only appears on
+ * an `optional` step that is not the last — that policy lives here now.
+ *
+ * The `<StepperNav>` is also what publishes {@link WizardContextProvider}, which
+ * is how a mounted step registers its own validator. A step's
+ * `useRhfWizardStep` / `useWizardStepValidate` therefore only works inside one.
+ */
+declare function StepperNav<TData extends Record<string, unknown>>({ wizard, children, title, description, className, labels, }: {
+    wizard: UseWizardReturn<TData>;
+    children: ReactNode;
+    title?: ReactNode;
+    description?: ReactNode;
+    className?: string;
+    labels?: Partial<WizardLabels>;
+}): react.JSX.Element;
+
+export { StepperNav };

package/dist/wizard/stepper-nav.js

@@ -0,0 +1,146 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId, useMemo } from "react";
+import { Check } from "lucide-react";
+import { cn } from "../lib/cn.js";
+import { Button } from "../components/ui.js";
+import { Modal } from "../components/modal.js";
+import { alertFrameClass } from "../components/alert-banner.js";
+import { WizardContextProvider } from "./wizard-context.js";
+import { resolveWizardLabels } from "./types.js";
+function StepperNav({
+  wizard,
+  children,
+  title,
+  description,
+  className,
+  labels
+}) {
+  const l = resolveWizardLabels(labels);
+  const cancelTitleId = useId();
+  const contextValue = useMemo(
+    () => ({
+      registerStepValidate: wizard.registerStepValidate,
+      setNextBlocked: wizard.setNextBlocked
+    }),
+    [wizard.registerStepValidate, wizard.setNextBlocked]
+  );
+  const canFinish = wizard.canFinish;
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-6", className), children: [
+    (title || description) && /* @__PURE__ */ jsxs("div", { children: [
+      title && /* @__PURE__ */ jsx("h1", { className: "text-2xl font-bold tracking-tight text-[var(--text-primary)]", children: title }),
+      description && /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-slate-500 dark:text-slate-400", children: description })
+    ] }),
+    /* @__PURE__ */ jsxs("nav", { "aria-label": l.steps, children: [
+      /* @__PURE__ */ jsx("ol", { className: "flex w-full items-center", children: wizard.steps.map((step, index) => {
+        const status = wizard.stepStatus(index);
+        const isLast = index === wizard.steps.length - 1;
+        return /* @__PURE__ */ jsxs("li", { className: cn("flex items-center", !isLast && "flex-1"), children: [
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: () => wizard.goToStep(index),
+              disabled: status === "upcoming",
+              "aria-current": status === "active" ? "step" : void 0,
+              className: cn(
+                "group flex flex-col items-center gap-1.5",
+                status === "upcoming" ? "cursor-default" : "cursor-pointer"
+              ),
+              children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: cn(
+                      "flex size-8 shrink-0 items-center justify-center rounded-full border-2 text-xs font-semibold transition-colors",
+                      status === "completed" && "border-[var(--brand)] bg-[var(--brand)] text-[var(--brand-contrast)]",
+                      status === "active" && "border-[var(--brand)] bg-[var(--bg-surface)] text-[var(--brand)]",
+                      status === "upcoming" && "border-slate-300 bg-[var(--bg-surface)] text-slate-400 dark:border-slate-600 dark:text-slate-500",
+                      status === "skipped" && "border-slate-300 bg-[var(--bg-surface-2)] text-slate-500 dark:border-slate-600 dark:text-slate-400"
+                    ),
+                    children: status === "completed" ? /* @__PURE__ */ jsx(Check, { className: "size-4" }) : index + 1
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: cn(
+                      "hidden text-xs font-medium md:block",
+                      status === "active" || status === "completed" ? "text-[var(--text-primary)]" : "text-slate-500 dark:text-slate-400"
+                    ),
+                    children: step.label
+                  }
+                )
+              ]
+            }
+          ),
+          !isLast && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "mx-2 h-0.5 flex-1",
+                status === "completed" ? "bg-[var(--brand)]" : "bg-[var(--border)]"
+              )
+            }
+          )
+        ] }, step.id);
+      }) }),
+      /* @__PURE__ */ jsxs("p", { className: "mt-2 text-center text-sm font-medium text-[var(--text-primary)] md:hidden", children: [
+        l.step(wizard.currentStepIndex + 1, wizard.steps.length),
+        " \u2014 ",
+        wizard.currentStep.label
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(WizardContextProvider, { value: contextValue, children: /* @__PURE__ */ jsx("div", { className: "min-h-[300px]", children }) }),
+    wizard.error && /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "alert",
+        className: cn(
+          "text-sm text-rose-900 dark:text-rose-100",
+          alertFrameClass("danger")
+        ),
+        children: wizard.error
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-t border-[var(--border)] pt-4", children: [
+      /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: wizard.cancel, children: l.cancel }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        !wizard.isFirstStep && /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: wizard.goBack, children: l.back }),
+        wizard.currentStep.optional && !wizard.isLastStep && /* @__PURE__ */ jsx(Button, { variant: "ghost", onClick: wizard.skip, disabled: wizard.nextBlocked, children: l.skip }),
+        wizard.isLastStep ? /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "brand",
+            "data-tour": "wizard-finish",
+            onClick: wizard.finish,
+            disabled: wizard.isSubmitting || !canFinish,
+            children: wizard.isSubmitting ? l.submitting : l.finish
+          }
+        ) : /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "brand",
+            "data-tour": "wizard-next",
+            onClick: wizard.goNext,
+            disabled: wizard.nextBlocked,
+            children: l.next
+          }
+        )
+      ] })
+    ] }),
+    wizard.showCancelDialog && /* @__PURE__ */ jsxs(Modal, { onClose: wizard.dismissCancel, labelledBy: cancelTitleId, className: "space-y-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+        /* @__PURE__ */ jsx("h2", { id: cancelTitleId, className: "text-lg font-semibold text-[var(--text-primary)]", children: l.cancelTitle }),
+        /* @__PURE__ */ jsx("p", { className: "text-sm text-slate-500 dark:text-slate-400", children: l.confirmCancel })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", children: [
+        /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: wizard.dismissCancel, children: l.cancelDismissLabel }),
+        /* @__PURE__ */ jsx(Button, { variant: "danger", onClick: wizard.confirmCancel, children: l.cancelConfirmLabel })
+      ] })
+    ] })
+  ] });
+}
+export {
+  StepperNav
+};
+//# sourceMappingURL=stepper-nav.js.map

package/dist/wizard/stepper-nav.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/wizard/stepper-nav.tsx"],"sourcesContent":["import { useId, useMemo } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { Check } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { Button } from \"../components/ui\";\nimport { Modal } from \"../components/modal\";\nimport { alertFrameClass } from \"../components/alert-banner\";\nimport { WizardContextProvider } from \"./wizard-context\";\nimport { resolveWizardLabels } from \"./types\";\nimport type { UseWizardReturn, WizardLabels } from \"./types\";\n\n/**\n * The chrome around a wizard: the step indicator, the step content, and the\n * Cancel / Back / Skip / Next / Finish bar — plus the cancel-confirmation\n * dialog, because \"are you sure you want to lose this\" is part of the wizard's\n * contract rather than something each app should re-decide.\n *\n * It is a component and not a set of parts for one reason: which button shows,\n * and whether it is enabled, is a function of `wizard` state that was getting\n * re-derived (and re-derived slightly differently) at every call site. Finish is\n * gated on `canFinish`, Next and Skip on `nextBlocked`, and Skip only appears on\n * an `optional` step that is not the last — that policy lives here now.\n *\n * The `<StepperNav>` is also what publishes {@link WizardContextProvider}, which\n * is how a mounted step registers its own validator. A step's\n * `useRhfWizardStep` / `useWizardStepValidate` therefore only works inside one.\n */\nexport function StepperNav<TData extends Record<string, unknown>>({\n  wizard,\n  children,\n  title,\n  description,\n  className,\n  labels,\n}: {\n  wizard: UseWizardReturn<TData>;\n  children: ReactNode;\n  title?: ReactNode;\n  description?: ReactNode;\n  className?: string;\n  labels?: Partial<WizardLabels>;\n}) {\n  const l = resolveWizardLabels(labels);\n  const cancelTitleId = useId();\n\n  const contextValue = useMemo(\n    () => ({\n      registerStepValidate: wizard.registerStepValidate,\n      setNextBlocked: wizard.setNextBlocked,\n    }),\n    [wizard.registerStepValidate, wizard.setNextBlocked],\n  );\n\n  // Finish is only valid once every step before the last has been completed or\n  // skipped (derived once in useWizard). Prevents a restored last-step index\n  // (empty data after a reload) from firing an empty submit.\n  const canFinish = wizard.canFinish;\n\n  return (\n    <div className={cn(\"flex flex-col gap-6\", className)}>\n      {(title || description) && (\n        <div>\n          {title && (\n            <h1 className=\"text-2xl font-bold tracking-tight text-[var(--text-primary)]\">\n              {title}\n            </h1>\n          )}\n          {description && (\n            <p className=\"mt-1 text-sm text-slate-500 dark:text-slate-400\">{description}</p>\n          )}\n        </div>\n      )}\n\n      {/* Step indicator */}\n      <nav aria-label={l.steps}>\n        <ol className=\"flex w-full items-center\">\n          {wizard.steps.map((step, index) => {\n            const status = wizard.stepStatus(index);\n            const isLast = index === wizard.steps.length - 1;\n\n            return (\n              <li key={step.id} className={cn(\"flex items-center\", !isLast && \"flex-1\")}>\n                <button\n                  type=\"button\"\n                  onClick={() => wizard.goToStep(index)}\n                  disabled={status === \"upcoming\"}\n                  aria-current={status === \"active\" ? \"step\" : undefined}\n                  className={cn(\n                    \"group flex flex-col items-center gap-1.5\",\n                    status === \"upcoming\" ? \"cursor-default\" : \"cursor-pointer\",\n                  )}\n                >\n                  {/* Circle */}\n                  <span\n                    className={cn(\n                      \"flex size-8 shrink-0 items-center justify-center rounded-full border-2 text-xs font-semibold transition-colors\",\n                      status === \"completed\" &&\n                        \"border-[var(--brand)] bg-[var(--brand)] text-[var(--brand-contrast)]\",\n                      status === \"active\" &&\n                        \"border-[var(--brand)] bg-[var(--bg-surface)] text-[var(--brand)]\",\n                      status === \"upcoming\" &&\n                        \"border-slate-300 bg-[var(--bg-surface)] text-slate-400 dark:border-slate-600 dark:text-slate-500\",\n                      status === \"skipped\" &&\n                        \"border-slate-300 bg-[var(--bg-surface-2)] text-slate-500 dark:border-slate-600 dark:text-slate-400\",\n                    )}\n                  >\n                    {status === \"completed\" ? <Check className=\"size-4\" /> : index + 1}\n                  </span>\n                  {/* Label — hidden on mobile, where the line below carries it */}\n                  <span\n                    className={cn(\n                      \"hidden text-xs font-medium md:block\",\n                      status === \"active\" || status === \"completed\"\n                        ? \"text-[var(--text-primary)]\"\n                        : \"text-slate-500 dark:text-slate-400\",\n                    )}\n                  >\n                    {step.label}\n                  </span>\n                </button>\n\n                {/* Connector line */}\n                {!isLast && (\n                  <div\n                    className={cn(\n                      \"mx-2 h-0.5 flex-1\",\n                      status === \"completed\" ? \"bg-[var(--brand)]\" : \"bg-[var(--border)]\",\n                    )}\n                  />\n                )}\n              </li>\n            );\n          })}\n        </ol>\n        {/* Mobile: the labels above are hidden, so name the current step here */}\n        <p className=\"mt-2 text-center text-sm font-medium text-[var(--text-primary)] md:hidden\">\n          {l.step(wizard.currentStepIndex + 1, wizard.steps.length)}\n          {\" — \"}\n          {wizard.currentStep.label}\n        </p>\n      </nav>\n\n      {/* Step content */}\n      <WizardContextProvider value={contextValue}>\n        <div className=\"min-h-[300px]\">{children}</div>\n      </WizardContextProvider>\n\n      {/* Submit error */}\n      {wizard.error && (\n        <div\n          role=\"alert\"\n          className={cn(\n            \"text-sm text-rose-900 dark:text-rose-100\",\n            alertFrameClass(\"danger\"),\n          )}\n        >\n          {wizard.error}\n        </div>\n      )}\n\n      {/* Navigation bar */}\n      <div className=\"flex items-center justify-between border-t border-[var(--border)] pt-4\">\n        <Button variant=\"secondary\" onClick={wizard.cancel}>\n          {l.cancel}\n        </Button>\n        <div className=\"flex items-center gap-2\">\n          {!wizard.isFirstStep && (\n            <Button variant=\"secondary\" onClick={wizard.goBack}>\n              {l.back}\n            </Button>\n          )}\n          {wizard.currentStep.optional && !wizard.isLastStep && (\n            <Button variant=\"ghost\" onClick={wizard.skip} disabled={wizard.nextBlocked}>\n              {l.skip}\n            </Button>\n          )}\n          {wizard.isLastStep ? (\n            <Button\n              variant=\"brand\"\n              data-tour=\"wizard-finish\"\n              onClick={wizard.finish}\n              disabled={wizard.isSubmitting || !canFinish}\n            >\n              {wizard.isSubmitting ? l.submitting : l.finish}\n            </Button>\n          ) : (\n            <Button\n              variant=\"brand\"\n              data-tour=\"wizard-next\"\n              onClick={wizard.goNext}\n              disabled={wizard.nextBlocked}\n            >\n              {l.next}\n            </Button>\n          )}\n        </div>\n      </div>\n\n      {/* Cancel confirmation */}\n      {wizard.showCancelDialog && (\n        <Modal onClose={wizard.dismissCancel} labelledBy={cancelTitleId} className=\"space-y-4\">\n          <div className=\"space-y-1.5\">\n            <h2 id={cancelTitleId} className=\"text-lg font-semibold text-[var(--text-primary)]\">\n              {l.cancelTitle}\n            </h2>\n            <p className=\"text-sm text-slate-500 dark:text-slate-400\">{l.confirmCancel}</p>\n          </div>\n          <div className=\"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end\">\n            <Button variant=\"secondary\" onClick={wizard.dismissCancel}>\n              {l.cancelDismissLabel}\n            </Button>\n            <Button variant=\"danger\" onClick={wizard.confirmCancel}>\n              {l.cancelConfirmLabel}\n            </Button>\n          </div>\n        </Modal>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/wizard/types.d.ts

@@ -0,0 +1,124 @@
+import { ReactNode } from 'react';
+
+type FieldErrors = Record<string, string>;
+type ValidateResult = boolean | {
+    ok: boolean;
+    errors?: FieldErrors;
+};
+interface WizardStepConfig {
+    /** Unique step identifier. */
+    id: string;
+    /**
+     * What the step is called in the indicator.
+     *
+     * A `ReactNode`, not a translation key: the engine never resolves strings.
+     * An app with i18n maps its own keys at the `useWizard` call — the same split
+     * `TourStep` and `DataTableLabels` already use.
+     */
+    label: ReactNode;
+    /** Whether the step can be skipped. */
+    optional?: boolean;
+    /**
+     * Validation gate before advancing.
+     * - Return `true` / `false` to just block.
+     * - Return `{ ok: false, errors: { fieldName: "message" } }` to also surface
+     *   per-field error messages via `wizard.fieldErrors`.
+     */
+    validate?: () => ValidateResult | Promise<ValidateResult>;
+}
+interface UseWizardOptions<TData extends Record<string, unknown>> {
+    steps: WizardStepConfig[];
+    initialData?: Partial<TData>;
+    onComplete?: (data: TData) => void | Promise<void>;
+    onCancel?: () => void;
+    /**
+     * Shown when a step blocks with no per-field detail — an RHF step surfacing
+     * its own inline messages, say — so the user learns why the wizard did not
+     * advance. Falls back to an English default.
+     */
+    missingRequiredMessage?: string;
+    /**
+     * How to surface {@link missingRequiredMessage}. Defaults to a `sonner` toast
+     * (an optional peer, imported only when this actually fires). Pass your own to
+     * route it somewhere else, or to a no-op to silence it.
+     */
+    onValidationFailed?: (message: string) => void;
+}
+type StepStatus = "upcoming" | "active" | "completed" | "skipped";
+interface UseWizardReturn<TData extends Record<string, unknown>> {
+    currentStepIndex: number;
+    currentStep: WizardStepConfig;
+    steps: WizardStepConfig[];
+    isFirstStep: boolean;
+    isLastStep: boolean;
+    /** True once every step before the last has been completed or skipped. */
+    canFinish: boolean;
+    goNext: () => Promise<void>;
+    goBack: () => void;
+    goToStep: (index: number) => void;
+    skip: () => void;
+    cancel: () => void;
+    finish: () => Promise<void>;
+    /** Register a validator for the mounted step (used by useRhfWizardStep). */
+    registerStepValidate: (fn: () => ValidateResult | Promise<ValidateResult>) => () => void;
+    /** True when the mounted step has blocked forward navigation (Next/Skip disabled). */
+    nextBlocked: boolean;
+    /** Set by the active step (via useWizardNextGate) to disable/enable Next+Skip. */
+    setNextBlocked: (blocked: boolean) => void;
+    stepStatus: (index: number) => StepStatus;
+    completedSteps: Set<number>;
+    data: TData;
+    updateData: (partial: Partial<TData>) => void;
+    isSubmitting: boolean;
+    error: string | null;
+    clearError: () => void;
+    fieldErrors: FieldErrors;
+    clearFieldErrors: () => void;
+    showCancelDialog: boolean;
+    confirmCancel: () => void;
+    dismissCancel: () => void;
+}
+interface SummaryItem {
+    label: ReactNode;
+    value: ReactNode;
+}
+interface SummarySection {
+    label: ReactNode;
+    /** Which step the section's edit button jumps back to. */
+    stepIndex: number;
+    items: SummaryItem[];
+}
+/**
+ * Every string the wizard chrome shows. All optional with English defaults, so a
+ * monolingual app can mount `StepperNav` bare; a translated app passes the whole
+ * object once (typically from a thin app-side wrapper).
+ */
+interface WizardLabels {
+    cancel: string;
+    back: string;
+    next: string;
+    skip: string;
+    finish: string;
+    /** Shown on Finish while `isSubmitting`. */
+    submitting: string;
+    /** `aria-label` for the step indicator's `<nav>`. */
+    steps: string;
+    /** The mobile "Step 2 of 5" line. */
+    step: (current: number, total: number) => string;
+    /** Heading of the cancel-confirmation dialog. */
+    cancelTitle: string;
+    /** Body of the cancel-confirmation dialog. */
+    confirmCancel: string;
+    /** Confirm button in the cancel dialog. */
+    cancelConfirmLabel: string;
+    /** Dismiss button in the cancel dialog ("keep editing"). */
+    cancelDismissLabel: string;
+    /** Heading above a {@link WizardSummary}. */
+    reviewTitle: string;
+    /** `aria-label` on a summary section's edit button. */
+    edit: string;
+}
+declare const DEFAULT_WIZARD_LABELS: WizardLabels;
+declare function resolveWizardLabels(labels?: Partial<WizardLabels>): WizardLabels;
+
+export { DEFAULT_WIZARD_LABELS, type FieldErrors, type StepStatus, type SummaryItem, type SummarySection, type UseWizardOptions, type UseWizardReturn, type ValidateResult, type WizardLabels, type WizardStepConfig, resolveWizardLabels };

package/dist/wizard/types.js

@@ -0,0 +1,24 @@
+const DEFAULT_WIZARD_LABELS = {
+  cancel: "Cancel",
+  back: "Back",
+  next: "Next",
+  skip: "Skip",
+  finish: "Finish",
+  submitting: "Creating\u2026",
+  steps: "Steps",
+  step: (current, total) => `Step ${current} of ${total}`,
+  cancelTitle: "Discard this form?",
+  confirmCancel: "Your entries will be lost.",
+  cancelConfirmLabel: "Discard",
+  cancelDismissLabel: "Keep editing",
+  reviewTitle: "Review",
+  edit: "Edit"
+};
+function resolveWizardLabels(labels) {
+  return labels ? { ...DEFAULT_WIZARD_LABELS, ...labels } : DEFAULT_WIZARD_LABELS;
+}
+export {
+  DEFAULT_WIZARD_LABELS,
+  resolveWizardLabels
+};
+//# sourceMappingURL=types.js.map

package/dist/wizard/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/wizard/types.ts"],"sourcesContent":["import type { ReactNode } from \"react\";\n\nexport type FieldErrors = Record<string, string>;\n\nexport type ValidateResult = boolean | { ok: boolean; errors?: FieldErrors };\n\nexport interface WizardStepConfig {\n  /** Unique step identifier. */\n  id: string;\n  /**\n   * What the step is called in the indicator.\n   *\n   * A `ReactNode`, not a translation key: the engine never resolves strings.\n   * An app with i18n maps its own keys at the `useWizard` call — the same split\n   * `TourStep` and `DataTableLabels` already use.\n   */\n  label: ReactNode;\n  /** Whether the step can be skipped. */\n  optional?: boolean;\n  /**\n   * Validation gate before advancing.\n   * - Return `true` / `false` to just block.\n   * - Return `{ ok: false, errors: { fieldName: \"message\" } }` to also surface\n   *   per-field error messages via `wizard.fieldErrors`.\n   */\n  validate?: () => ValidateResult | Promise<ValidateResult>;\n}\n\nexport interface UseWizardOptions<TData extends Record<string, unknown>> {\n  steps: WizardStepConfig[];\n  initialData?: Partial<TData>;\n  onComplete?: (data: TData) => void | Promise<void>;\n  onCancel?: () => void;\n  /**\n   * Shown when a step blocks with no per-field detail — an RHF step surfacing\n   * its own inline messages, say — so the user learns why the wizard did not\n   * advance. Falls back to an English default.\n   */\n  missingRequiredMessage?: string;\n  /**\n   * How to surface {@link missingRequiredMessage}. Defaults to a `sonner` toast\n   * (an optional peer, imported only when this actually fires). Pass your own to\n   * route it somewhere else, or to a no-op to silence it.\n   */\n  onValidationFailed?: (message: string) => void;\n}\n\nexport type StepStatus = \"upcoming\" | \"active\" | \"completed\" | \"skipped\";\n\nexport interface UseWizardReturn<TData extends Record<string, unknown>> {\n  // Navigation\n  currentStepIndex: number;\n  currentStep: WizardStepConfig;\n  steps: WizardStepConfig[];\n  isFirstStep: boolean;\n  isLastStep: boolean;\n  /** True once every step before the last has been completed or skipped. */\n  canFinish: boolean;\n  goNext: () => Promise<void>;\n  goBack: () => void;\n  goToStep: (index: number) => void;\n  skip: () => void;\n  cancel: () => void;\n  finish: () => Promise<void>;\n  /** Register a validator for the mounted step (used by useRhfWizardStep). */\n  registerStepValidate: (\n    fn: () => ValidateResult | Promise<ValidateResult>,\n  ) => () => void;\n  /** True when the mounted step has blocked forward navigation (Next/Skip disabled). */\n  nextBlocked: boolean;\n  /** Set by the active step (via useWizardNextGate) to disable/enable Next+Skip. */\n  setNextBlocked: (blocked: boolean) => void;\n\n  // Step state\n  stepStatus: (index: number) => StepStatus;\n  completedSteps: Set<number>;\n\n  // Data\n  data: TData;\n  updateData: (partial: Partial<TData>) => void;\n\n  // Loading / error\n  isSubmitting: boolean;\n  error: string | null;\n  clearError: () => void;\n\n  // Per-field validation errors (populated by the last failed goNext)\n  fieldErrors: FieldErrors;\n  clearFieldErrors: () => void;\n\n  // Cancel dialog\n  showCancelDialog: boolean;\n  confirmCancel: () => void;\n  dismissCancel: () => void;\n}\n\nexport interface SummaryItem {\n  label: ReactNode;\n  value: ReactNode;\n}\n\nexport interface SummarySection {\n  label: ReactNode;\n  /** Which step the section's edit button jumps back to. */\n  stepIndex: number;\n  items: SummaryItem[];\n}\n\n/**\n * Every string the wizard chrome shows. All optional with English defaults, so a\n * monolingual app can mount `StepperNav` bare; a translated app passes the whole\n * object once (typically from a thin app-side wrapper).\n */\nexport interface WizardLabels {\n  cancel: string;\n  back: string;\n  next: string;\n  skip: string;\n  finish: string;\n  /** Shown on Finish while `isSubmitting`. */\n  submitting: string;\n  /** `aria-label` for the step indicator's `<nav>`. */\n  steps: string;\n  /** The mobile \"Step 2 of 5\" line. */\n  step: (current: number, total: number) => string;\n  /** Heading of the cancel-confirmation dialog. */\n  cancelTitle: string;\n  /** Body of the cancel-confirmation dialog. */\n  confirmCancel: string;\n  /** Confirm button in the cancel dialog. */\n  cancelConfirmLabel: string;\n  /** Dismiss button in the cancel dialog (\"keep editing\"). */\n  cancelDismissLabel: string;\n  /** Heading above a {@link WizardSummary}. */\n  reviewTitle: string;\n  /** `aria-label` on a summary section's edit button. */\n  edit: string;\n}\n\nexport const DEFAULT_WIZARD_LABELS: WizardLabels = {\n  cancel: \"Cancel\",\n  back: \"Back\",\n  next: \"Next\",\n  skip: \"Skip\",\n  finish: \"Finish\",\n  submitting: \"Creating…\",\n  steps: \"Steps\",\n  step: (current, total) => `Step ${current} of ${total}`,\n  cancelTitle: \"Discard this form?\",\n  confirmCancel: \"Your entries will be lost.\",\n  cancelConfirmLabel: \"Discard\",\n  cancelDismissLabel: \"Keep editing\",\n  reviewTitle: \"Review\",\n  edit: \"Edit\",\n};\n\nexport function resolveWizardLabels(labels?: Partial<WizardLabels>): WizardLabels {\n  return labels ? { ...DEFAULT_WIZARD_LABELS, ...labels } : DEFAULT_WIZARD_LABELS;\n}\n"],"mappings":"AA2IO,MAAM,wBAAsC;AAAA,EACjD,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,OAAO;AAAA,EACP,MAAM,CAAC,SAAS,UAAU,QAAQ,OAAO,OAAO,KAAK;AAAA,EACrD,aAAa;AAAA,EACb,eAAe;AAAA,EACf,oBAAoB;AAAA,EACpB,oBAAoB;AAAA,EACpB,aAAa;AAAA,EACb,MAAM;AACR;AAEO,SAAS,oBAAoB,QAA8C;AAChF,SAAO,SAAS,EAAE,GAAG,uBAAuB,GAAG,OAAO,IAAI;AAC5D;","names":[]}

package/dist/wizard/use-wizard.d.ts

@@ -0,0 +1,6 @@
+import { UseWizardOptions, UseWizardReturn } from './types.js';
+import 'react';
+
+declare function useWizard<TData extends Record<string, unknown>>(options: UseWizardOptions<TData>): UseWizardReturn<TData>;
+
+export { useWizard };