@elabs-ai/components-ui 4.1.0 → 5.0.0

package/dist/chunk-35DUHYPC.js

@@ -0,0 +1,59 @@
+"use client";
+import {
+  toggleVariants
+} from "./chunk-RM5JIUVW.js";
+import {
+  cn
+} from "./chunk-KBNWM27Q.js";
+
+// src/components/toggle-group/toggle-group.tsx
+import {
+  createContext,
+  forwardRef,
+  useContext
+} from "react";
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
+import "class-variance-authority";
+import { jsx } from "react/jsx-runtime";
+var ToggleGroupContext = createContext({
+  size: "default",
+  variant: "default"
+});
+var ToggleGroup = forwardRef(function ToggleGroup2({ className, variant, size, children, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    ToggleGroupPrimitive.Root,
+    {
+      ref,
+      className: cn(
+        "flex items-center gap-1",
+        // Segmented groups carry the TabsList track (recessed muted fill);
+        // the raised active segment comes from the item variant.
+        variant === "segmented" && "gap-0 rounded-lg bg-muted p-1 text-muted-foreground",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(ToggleGroupContext.Provider, { value: { variant, size }, children })
+    }
+  );
+});
+var ToggleGroupItem = forwardRef(function ToggleGroupItem2({ className, children, variant, size, ...props }, ref) {
+  const ctx = useContext(ToggleGroupContext);
+  return /* @__PURE__ */ jsx(
+    ToggleGroupPrimitive.Item,
+    {
+      ref,
+      className: cn(
+        toggleVariants({ variant: ctx.variant ?? variant, size: ctx.size ?? size }),
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+});
+
+export {
+  ToggleGroup,
+  ToggleGroupItem
+};
+//# sourceMappingURL=chunk-35DUHYPC.js.map

package/dist/chunk-35DUHYPC.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/toggle-group/toggle-group.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  createContext,\n  forwardRef,\n  useContext,\n  type ComponentPropsWithoutRef,\n  type ElementRef,\n} from \"react\";\nimport * as ToggleGroupPrimitive from \"@radix-ui/react-toggle-group\";\nimport { type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"../../lib/cn\";\nimport { toggleVariants } from \"../toggle\";\n\ntype ToggleVariantProps = VariantProps<typeof toggleVariants>;\nconst ToggleGroupContext = createContext<ToggleVariantProps>({\n  size: \"default\",\n  variant: \"default\",\n});\n\nexport const ToggleGroup = forwardRef<\n  ElementRef<typeof ToggleGroupPrimitive.Root>,\n  ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> & ToggleVariantProps\n>(function ToggleGroup({ className, variant, size, children, ...props }, ref) {\n  return (\n    <ToggleGroupPrimitive.Root\n      ref={ref}\n      className={cn(\n        \"flex items-center gap-1\",\n        // Segmented groups carry the TabsList track (recessed muted fill);\n        // the raised active segment comes from the item variant.\n        variant === \"segmented\" && \"gap-0 rounded-lg bg-muted p-1 text-muted-foreground\",\n        className,\n      )}\n      {...props}\n    >\n      <ToggleGroupContext.Provider value={{ variant, size }}>\n        {children}\n      </ToggleGroupContext.Provider>\n    </ToggleGroupPrimitive.Root>\n  );\n});\n\nexport const ToggleGroupItem = forwardRef<\n  ElementRef<typeof ToggleGroupPrimitive.Item>,\n  ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> & ToggleVariantProps\n>(function ToggleGroupItem({ className, children, variant, size, ...props }, ref) {\n  const ctx = useContext(ToggleGroupContext);\n  return (\n    <ToggleGroupPrimitive.Item\n      ref={ref}\n      className={cn(\n        toggleVariants({ variant: ctx.variant ?? variant, size: ctx.size ?? size }),\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </ToggleGroupPrimitive.Item>\n  );\n});\n"],"mappings":";;;;;;;;;AAEA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAGK;AACP,YAAY,0BAA0B;AACtC,OAAkC;AA0B5B;AArBN,IAAM,qBAAqB,cAAkC;AAAA,EAC3D,MAAM;AAAA,EACN,SAAS;AACX,CAAC;AAEM,IAAM,cAAc,WAGzB,SAASA,aAAY,EAAE,WAAW,SAAS,MAAM,UAAU,GAAG,MAAM,GAAG,KAAK;AAC5E,SACE;AAAA,IAAsB;AAAA,IAArB;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT;AAAA;AAAA;AAAA,QAGA,YAAY,eAAe;AAAA,QAC3B;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEJ,8BAAC,mBAAmB,UAAnB,EAA4B,OAAO,EAAE,SAAS,KAAK,GACjD,UACH;AAAA;AAAA,EACF;AAEJ,CAAC;AAEM,IAAM,kBAAkB,WAG7B,SAASC,iBAAgB,EAAE,WAAW,UAAU,SAAS,MAAM,GAAG,MAAM,GAAG,KAAK;AAChF,QAAM,MAAM,WAAW,kBAAkB;AACzC,SACE;AAAA,IAAsB;AAAA,IAArB;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT,eAAe,EAAE,SAAS,IAAI,WAAW,SAAS,MAAM,IAAI,QAAQ,KAAK,CAAC;AAAA,QAC1E;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ,CAAC;","names":["ToggleGroup","ToggleGroupItem"]}

package/dist/chunk-35ZTVB35.js

@@ -0,0 +1,76 @@
+"use client";
+import {
+  Spinner
+} from "./chunk-ITFDGFOT.js";
+import {
+  useLocale
+} from "./chunk-EJQYE4MY.js";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle
+} from "./chunk-EKY3A5LO.js";
+import {
+  buttonVariants
+} from "./chunk-VA2OONPE.js";
+import {
+  cn
+} from "./chunk-KBNWM27Q.js";
+
+// src/components/confirm-dialog/confirm-dialog.tsx
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function ConfirmDialog({
+  open,
+  onOpenChange,
+  title,
+  description,
+  confirmLabel,
+  cancelLabel,
+  onConfirm,
+  onCancel,
+  tone = "default",
+  loading = false,
+  children,
+  className
+}) {
+  const { t } = useLocale();
+  function handleConfirm(event) {
+    event.preventDefault();
+    if (loading) return;
+    onConfirm();
+  }
+  return /* @__PURE__ */ jsx(AlertDialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(AlertDialogContent, { "data-slot": "confirm-dialog", className, children: [
+    /* @__PURE__ */ jsxs(AlertDialogHeader, { children: [
+      /* @__PURE__ */ jsx(AlertDialogTitle, { "data-slot": "confirm-dialog-title", children: title }),
+      /* @__PURE__ */ jsx(AlertDialogDescription, { "data-slot": "confirm-dialog-description", children: description })
+    ] }),
+    children,
+    /* @__PURE__ */ jsxs(AlertDialogFooter, { children: [
+      /* @__PURE__ */ jsx(AlertDialogCancel, { "data-slot": "confirm-dialog-cancel", onClick: onCancel, children: cancelLabel ?? t("ui.confirmDialog.cancel") }),
+      /* @__PURE__ */ jsxs(
+        AlertDialogAction,
+        {
+          "data-slot": "confirm-dialog-confirm",
+          className: cn(tone === "destructive" && buttonVariants({ variant: "destructive" })),
+          "aria-busy": loading || void 0,
+          onClick: handleConfirm,
+          children: [
+            loading ? /* @__PURE__ */ jsx(Spinner, { className: "text-current", label: t("loading") }) : null,
+            confirmLabel ?? t("ui.confirmDialog.confirm")
+          ]
+        }
+      )
+    ] })
+  ] }) });
+}
+
+export {
+  ConfirmDialog
+};
+//# sourceMappingURL=chunk-35ZTVB35.js.map

package/dist/chunk-35ZTVB35.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/confirm-dialog/confirm-dialog.tsx"],"sourcesContent":["\"use client\";\n\nimport { type MouseEvent, type ReactNode } from \"react\";\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n} from \"../alert-dialog\";\nimport { buttonVariants } from \"../button\";\nimport { cn } from \"../../lib/cn\";\nimport { useLocale } from \"../locale-provider\";\nimport { Spinner } from \"../spinner\";\n\nexport interface ConfirmDialogProps {\n  /** Controlled open state — the app owns it. */\n  open: boolean;\n  /** Fires on cancel, Escape, and any other Radix dismissal. */\n  onOpenChange: (open: boolean) => void;\n  /** What is about to happen, as a question or a statement. */\n  title: ReactNode;\n  /**\n   * The consequence, spelled out. **Required**: `AlertDialogContent` is\n   * inaccessible to screen-reader users without a description (Radix warns), and\n   * a confirmation whose only text is its title cannot state what is at stake.\n   */\n  description: ReactNode;\n  /**\n   * The confirm action's label. States the CONSEQUENCE (\"Delete skill\"), never\n   * \"OK\" — a label that names the outcome is the last chance to catch a mistake.\n   * Defaults to a generic \"Confirm\", which you should almost always replace.\n   */\n  confirmLabel?: ReactNode;\n  /** The safe action's label. Defaults to \"Cancel\". */\n  cancelLabel?: ReactNode;\n  /** Runs when the confirm action is activated. */\n  onConfirm: () => void;\n  /** Runs when the safe action is activated (in addition to `onOpenChange`). */\n  onCancel?: () => void;\n  /** Visual tone of the CONFIRM action only. The dialog chrome never changes. */\n  tone?: \"default\" | \"destructive\";\n  /**\n   * The confirm request is in flight: the action swaps its label for a spinner\n   * and reports `aria-busy`. It deliberately stays ENABLED\n   * (`.claude/rules/interaction-guidelines.md`, Forms — a submit is never\n   * pre-disabled); repeat activations are ignored while it is set.\n   */\n  loading?: boolean;\n  /** Extra body content between the description and the actions. */\n  children?: ReactNode;\n  className?: string;\n}\n\n/**\n * A destructive/irreversible confirmation (#341).\n *\n * Built on `AlertDialog`, not `Dialog`, and that is the entire point of it\n * existing as a named component rather than a recipe: `AlertDialogContent`\n * prevents its own open-autofocus and focuses the mounted `AlertDialogCancel`\n * instead, so **initial focus lands on the safe action** — but only if a Cancel\n * is actually mounted, which a hand-rolled confirmation routinely forgets (and a\n * plain `Dialog` cannot do at all). `ConfirmDialog` always renders one, so the\n * wrong choice is unrepresentable. It also inherits `AlertDialog`'s refusal to\n * dismiss on an outside click.\n *\n * Cancel is FIRST in the DOM so assistive tech reads the safe action first;\n * `AlertDialogFooter`'s `flex-col-reverse sm:flex-row sm:justify-end` still\n * paints the confirm action bottom-right on every breakpoint.\n *\n * **Confirming does not close the dialog** — `onConfirm` fires and the app sets\n * `open={false}` when it is ready (immediately for a synchronous action, after\n * the request for an async one, which is what makes `loading` coherent).\n * Cancelling closes through `onOpenChange(false)` as usual.\n *\n * ```tsx\n * <ConfirmDialog\n *   open={open}\n *   onOpenChange={setOpen}\n *   tone=\"destructive\"\n *   title={`Delete ${skill.name}?`}\n *   description={`Removing it also deletes its ${skill.runs} saved runs. This cannot be undone.`}\n *   confirmLabel={`Delete ${skill.name}`}\n *   onConfirm={() => { deleteSkill(); setOpen(false); }}\n * />\n * ```\n */\nexport function ConfirmDialog({\n  open,\n  onOpenChange,\n  title,\n  description,\n  confirmLabel,\n  cancelLabel,\n  onConfirm,\n  onCancel,\n  tone = \"default\",\n  loading = false,\n  children,\n  className,\n}: ConfirmDialogProps) {\n  const { t } = useLocale();\n\n  function handleConfirm(event: MouseEvent<HTMLButtonElement>) {\n    // Radix's Action is a `Dialog.Close`; preventing the default stops it\n    // closing so the app stays in charge of `open` (and an in-flight request\n    // keeps its spinner on screen).\n    event.preventDefault();\n    if (loading) return;\n    onConfirm();\n  }\n\n  return (\n    <AlertDialog open={open} onOpenChange={onOpenChange}>\n      <AlertDialogContent data-slot=\"confirm-dialog\" className={className}>\n        <AlertDialogHeader>\n          <AlertDialogTitle data-slot=\"confirm-dialog-title\">{title}</AlertDialogTitle>\n          <AlertDialogDescription data-slot=\"confirm-dialog-description\">\n            {description}\n          </AlertDialogDescription>\n        </AlertDialogHeader>\n        {children}\n        <AlertDialogFooter>\n          <AlertDialogCancel data-slot=\"confirm-dialog-cancel\" onClick={onCancel}>\n            {cancelLabel ?? t(\"ui.confirmDialog.cancel\")}\n          </AlertDialogCancel>\n          <AlertDialogAction\n            data-slot=\"confirm-dialog-confirm\"\n            className={cn(tone === \"destructive\" && buttonVariants({ variant: \"destructive\" }))}\n            aria-busy={loading || undefined}\n            onClick={handleConfirm}\n          >\n            {/* `text-current` so the spinner inherits the action's foreground\n                token instead of `Spinner`'s muted default, which would drop\n                below 3:1 on a filled button. */}\n            {loading ? <Spinner className=\"text-current\" label={t(\"loading\")} /> : null}\n            {confirmLabel ?? t(\"ui.confirmDialog.confirm\")}\n          </AlertDialogAction>\n        </AlertDialogFooter>\n      </AlertDialogContent>\n    </AlertDialog>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAEA,OAAgD;AAoHxC,SACE,KADF;AA5BD,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,UAAU;AAAA,EACV;AAAA,EACA;AACF,GAAuB;AACrB,QAAM,EAAE,EAAE,IAAI,UAAU;AAExB,WAAS,cAAc,OAAsC;AAI3D,UAAM,eAAe;AACrB,QAAI,QAAS;AACb,cAAU;AAAA,EACZ;AAEA,SACE,oBAAC,eAAY,MAAY,cACvB,+BAAC,sBAAmB,aAAU,kBAAiB,WAC7C;AAAA,yBAAC,qBACC;AAAA,0BAAC,oBAAiB,aAAU,wBAAwB,iBAAM;AAAA,MAC1D,oBAAC,0BAAuB,aAAU,8BAC/B,uBACH;AAAA,OACF;AAAA,IACC;AAAA,IACD,qBAAC,qBACC;AAAA,0BAAC,qBAAkB,aAAU,yBAAwB,SAAS,UAC3D,yBAAe,EAAE,yBAAyB,GAC7C;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,aAAU;AAAA,UACV,WAAW,GAAG,SAAS,iBAAiB,eAAe,EAAE,SAAS,cAAc,CAAC,CAAC;AAAA,UAClF,aAAW,WAAW;AAAA,UACtB,SAAS;AAAA,UAKR;AAAA,sBAAU,oBAAC,WAAQ,WAAU,gBAAe,OAAO,EAAE,SAAS,GAAG,IAAK;AAAA,YACtE,gBAAgB,EAAE,0BAA0B;AAAA;AAAA;AAAA,MAC/C;AAAA,OACF;AAAA,KACF,GACF;AAEJ;","names":[]}

package/dist/chunk-36VULFFV.js

@@ -0,0 +1,2 @@
+"use client";
+//# sourceMappingURL=chunk-36VULFFV.js.map

package/dist/chunk-36VULFFV.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/chunk-3B7W334A.js

@@ -0,0 +1,229 @@
+"use client";
+import {
+  Button
+} from "./chunk-VA2OONPE.js";
+import {
+  cn
+} from "./chunk-KBNWM27Q.js";
+
+// src/components/wizard/wizard.tsx
+import {
+  createContext,
+  forwardRef,
+  use,
+  useCallback,
+  useEffect,
+  useId,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { cva } from "class-variance-authority";
+import { Check } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var WizardContext = createContext(null);
+function useWizard() {
+  const ctx = use(WizardContext);
+  if (!ctx) throw new Error("Wizard subcomponents must be used inside <Wizard>.");
+  return ctx;
+}
+var wizardVariants = cva("flex gap-6", {
+  variants: {
+    orientation: {
+      horizontal: "flex-col",
+      vertical: "flex-row"
+    }
+  },
+  defaultVariants: {
+    orientation: "horizontal"
+  }
+});
+var Wizard = forwardRef(function Wizard2({
+  steps,
+  step: stepProp,
+  defaultStep = 0,
+  onStepChange,
+  orientation = "horizontal",
+  className,
+  children,
+  ...props
+}, ref) {
+  const baseId = useId();
+  const isControlled = stepProp !== void 0;
+  const [internalStep, setInternalStep] = useState(defaultStep);
+  const [validating, setValidating] = useState(false);
+  const activeValidator = useRef(void 0);
+  const count = steps.length;
+  const step = Math.min(isControlled ? stepProp ?? 0 : internalStep, Math.max(0, count - 1));
+  const commit = useCallback(
+    (next2) => {
+      const clamped = Math.min(Math.max(0, next2), Math.max(0, count - 1));
+      if (!isControlled) setInternalStep(clamped);
+      onStepChange?.(clamped);
+    },
+    [isControlled, onStepChange, count]
+  );
+  const goTo = useCallback(
+    (index) => {
+      if (index <= step) {
+        commit(index);
+      }
+    },
+    [step, commit]
+  );
+  const next = useCallback(() => {
+    const validator = activeValidator.current;
+    const advance = () => commit(step + 1);
+    if (!validator) {
+      advance();
+      return;
+    }
+    const result = validator();
+    if (typeof result === "boolean") {
+      if (result) advance();
+      return;
+    }
+    setValidating(true);
+    result.then((ok) => {
+      if (ok) advance();
+    }).finally(() => setValidating(false));
+  }, [step, commit]);
+  const prev = useCallback(() => commit(step - 1), [step, commit]);
+  const setActiveValidator = useCallback((validator) => {
+    activeValidator.current = validator;
+  }, []);
+  const ctx = useMemo(
+    () => ({
+      baseId,
+      step,
+      steps,
+      count,
+      isFirst: step === 0,
+      isLast: step === count - 1,
+      validating,
+      goTo,
+      next,
+      prev,
+      setActiveValidator,
+      orientation: orientation ?? "horizontal"
+    }),
+    [baseId, step, steps, count, validating, goTo, next, prev, setActiveValidator, orientation]
+  );
+  return /* @__PURE__ */ jsx(WizardContext, { value: ctx, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      "data-slot": "wizard",
+      className: cn(wizardVariants({ orientation }), className),
+      ...props,
+      children
+    }
+  ) });
+});
+var WizardSteps = forwardRef(function WizardSteps2({ className, ...props }, ref) {
+  const { baseId, step, steps, orientation, goTo } = useWizard();
+  return /* @__PURE__ */ jsx(
+    "ol",
+    {
+      ref,
+      className: cn(
+        "flex gap-2",
+        orientation === "vertical" ? "flex-col" : "flex-row flex-wrap items-center",
+        className
+      ),
+      ...props,
+      children: steps.map((meta, index) => {
+        const isActive = index === step;
+        const isComplete = index < step;
+        const isClickable = index <= step;
+        return /* @__PURE__ */ jsxs(
+          "li",
+          {
+            id: `${baseId}-step-${index}`,
+            "aria-current": isActive ? "step" : void 0,
+            className: cn("flex items-center gap-2", orientation === "horizontal" && "min-w-0"),
+            children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  disabled: !isClickable,
+                  onClick: () => goTo(index),
+                  "aria-label": isComplete ? `${meta.title} \u2014 completed` : void 0,
+                  className: cn(
+                    "flex size-7 shrink-0 items-center justify-center rounded-full border text-meta font-medium tabular-nums",
+                    "focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+                    isActive && "border-primary bg-primary text-primary-foreground",
+                    // #399 — the step NUMBER is text on a `/10` wash, not plate ink
+                    // and not a mark: `-text` rung. The border keeps the fill rung.
+                    isComplete && "border-primary bg-primary/10 text-primary-text",
+                    !isActive && !isComplete && "border-border-strong text-muted-foreground",
+                    isClickable ? "cursor-pointer" : "cursor-default"
+                  ),
+                  children: isComplete ? /* @__PURE__ */ jsx(Check, { className: "size-4", "aria-hidden": "true" }) : index + 1
+                }
+              ),
+              /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-col", children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: cn(
+                      "truncate text-body font-medium",
+                      isActive ? "text-foreground" : "text-muted-foreground"
+                    ),
+                    children: meta.title
+                  }
+                ),
+                meta.description && /* @__PURE__ */ jsx("span", { className: "truncate text-meta text-muted-foreground", children: meta.description })
+              ] })
+            ]
+          },
+          meta.id
+        );
+      })
+    }
+  );
+});
+var WizardStep = forwardRef(function WizardStep2({ step, validate, className, children, ...props }, ref) {
+  const { step: activeStep, baseId, setActiveValidator } = useWizard();
+  const isActive = step === activeStep;
+  const regionRef = useRef(null);
+  useEffect(() => {
+    if (!isActive) return;
+    setActiveValidator(validate);
+    regionRef.current?.focus();
+    return () => setActiveValidator(void 0);
+  }, [isActive, validate, setActiveValidator]);
+  if (!isActive) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: (node) => {
+        regionRef.current = node;
+        if (typeof ref === "function") ref(node);
+        else if (ref) ref.current = node;
+      },
+      role: "group",
+      "aria-labelledby": `${baseId}-step-${step}`,
+      tabIndex: -1,
+      className: cn("min-w-0 flex-1 focus-ring", className),
+      ...props,
+      children
+    }
+  );
+});
+var WizardNav = forwardRef(function WizardNav2({ backLabel = "Back", nextLabel = "Next", finishLabel = "Finish", onFinish, className, ...props }, ref) {
+  const { isFirst, isLast, validating, next, prev } = useWizard();
+  return /* @__PURE__ */ jsxs("div", { ref, className: cn("flex items-center justify-between gap-2", className), ...props, children: [
+    /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", onClick: prev, disabled: isFirst, children: backLabel }),
+    isLast ? /* @__PURE__ */ jsx(Button, { type: "button", onClick: onFinish, children: finishLabel }) : /* @__PURE__ */ jsx(Button, { type: "button", onClick: next, disabled: validating, children: validating ? "Checking\u2026" : nextLabel })
+  ] });
+});
+
+export {
+  Wizard,
+  WizardSteps,
+  WizardStep,
+  WizardNav
+};
+//# sourceMappingURL=chunk-3B7W334A.js.map

package/dist/chunk-3B7W334A.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/wizard/wizard.tsx"],"sourcesContent":["\"use client\";\n// a2ui.exposed: no\n\nimport {\n  createContext,\n  forwardRef,\n  use,\n  useCallback,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n  type HTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { Check } from \"lucide-react\";\nimport { cn } from \"../../lib/cn\";\nimport { Button } from \"../button\";\n\n// ---------------------------------------------------------------------------\n// Types & context\n// ---------------------------------------------------------------------------\n\nexport interface WizardStepMeta {\n  /** Stable id for the step. */\n  id: string;\n  /** Title shown in the step indicator. */\n  title: string;\n  /** Optional supporting text shown under the title. */\n  description?: string;\n}\n\n/** A step validator — return false (or a rejected/`false` promise) to block advance. */\nexport type WizardValidator = () => boolean | Promise<boolean>;\n\ninterface WizardContextValue {\n  baseId: string;\n  step: number;\n  steps: WizardStepMeta[];\n  count: number;\n  isFirst: boolean;\n  isLast: boolean;\n  validating: boolean;\n  goTo: (index: number) => void;\n  next: () => void;\n  prev: () => void;\n  setActiveValidator: (validator: WizardValidator | undefined) => void;\n  orientation: \"horizontal\" | \"vertical\";\n}\n\nconst WizardContext = createContext<WizardContextValue | null>(null);\n\nfunction useWizard(): WizardContextValue {\n  const ctx = use(WizardContext);\n  if (!ctx) throw new Error(\"Wizard subcomponents must be used inside <Wizard>.\");\n  return ctx;\n}\n\nconst wizardVariants = cva(\"flex gap-6\", {\n  variants: {\n    orientation: {\n      horizontal: \"flex-col\",\n      vertical: \"flex-row\",\n    },\n  },\n  defaultVariants: {\n    orientation: \"horizontal\",\n  },\n});\n\n// ---------------------------------------------------------------------------\n// Wizard (Provider / root)\n// ---------------------------------------------------------------------------\n\nexport interface WizardProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\">, VariantProps<typeof wizardVariants> {\n  /** The ordered step metadata used to render the indicator. */\n  steps: WizardStepMeta[];\n  /** Controlled active step index. */\n  step?: number;\n  /** Uncontrolled initial step index. Default 0. */\n  defaultStep?: number;\n  /** Called whenever the active step changes. */\n  onStepChange?: (step: number) => void;\n  children?: ReactNode;\n}\n\n/**\n * Wizard — a multi-step flow with a step indicator, per-step validation gating,\n * and Back/Next/Finish navigation.\n *\n * Controlled via `step`/`onStepChange`; uncontrolled via `defaultStep`. State is\n * lifted into the provider and exposed to `WizardSteps`/`WizardStep`/`WizardNav`\n * via context. `Next` runs the active step's `validate` (sync or async) before\n * advancing and stays enabled until validation runs.\n */\nexport const Wizard = forwardRef<HTMLDivElement, WizardProps>(function Wizard(\n  {\n    steps,\n    step: stepProp,\n    defaultStep = 0,\n    onStepChange,\n    orientation = \"horizontal\",\n    className,\n    children,\n    ...props\n  },\n  ref,\n) {\n  const baseId = useId();\n  const isControlled = stepProp !== undefined;\n  const [internalStep, setInternalStep] = useState(defaultStep);\n  const [validating, setValidating] = useState(false);\n  const activeValidator = useRef<WizardValidator | undefined>(undefined);\n\n  const count = steps.length;\n  const step = Math.min(isControlled ? (stepProp ?? 0) : internalStep, Math.max(0, count - 1));\n\n  const commit = useCallback(\n    (next: number) => {\n      const clamped = Math.min(Math.max(0, next), Math.max(0, count - 1));\n      if (!isControlled) setInternalStep(clamped);\n      onStepChange?.(clamped);\n    },\n    [isControlled, onStepChange, count],\n  );\n\n  const goTo = useCallback(\n    (index: number) => {\n      // Backward / same navigation never requires validation.\n      if (index <= step) {\n        commit(index);\n      }\n    },\n    [step, commit],\n  );\n\n  const next = useCallback(() => {\n    const validator = activeValidator.current;\n    const advance = () => commit(step + 1);\n    if (!validator) {\n      advance();\n      return;\n    }\n    const result = validator();\n    if (typeof result === \"boolean\") {\n      if (result) advance();\n      return;\n    }\n    setValidating(true);\n    result\n      .then((ok) => {\n        if (ok) advance();\n      })\n      .finally(() => setValidating(false));\n  }, [step, commit]);\n\n  const prev = useCallback(() => commit(step - 1), [step, commit]);\n\n  const setActiveValidator = useCallback((validator: WizardValidator | undefined) => {\n    activeValidator.current = validator;\n  }, []);\n\n  const ctx = useMemo<WizardContextValue>(\n    () => ({\n      baseId,\n      step,\n      steps,\n      count,\n      isFirst: step === 0,\n      isLast: step === count - 1,\n      validating,\n      goTo,\n      next,\n      prev,\n      setActiveValidator,\n      orientation: orientation ?? \"horizontal\",\n    }),\n    [baseId, step, steps, count, validating, goTo, next, prev, setActiveValidator, orientation],\n  );\n\n  return (\n    <WizardContext value={ctx}>\n      <div\n        ref={ref}\n        data-slot=\"wizard\"\n        className={cn(wizardVariants({ orientation }), className)}\n        {...props}\n      >\n        {children}\n      </div>\n    </WizardContext>\n  );\n});\n\n// ---------------------------------------------------------------------------\n// WizardSteps (the indicator)\n// ---------------------------------------------------------------------------\n\nexport type WizardStepsProps = HTMLAttributes<HTMLOListElement>;\n\n/** WizardSteps — the ordered step indicator. Reads steps from context. */\nexport const WizardSteps = forwardRef<HTMLOListElement, WizardStepsProps>(function WizardSteps(\n  { className, ...props },\n  ref,\n) {\n  const { baseId, step, steps, orientation, goTo } = useWizard();\n  return (\n    <ol\n      ref={ref}\n      className={cn(\n        \"flex gap-2\",\n        orientation === \"vertical\" ? \"flex-col\" : \"flex-row flex-wrap items-center\",\n        className,\n      )}\n      {...props}\n    >\n      {steps.map((meta, index) => {\n        const isActive = index === step;\n        const isComplete = index < step;\n        const isClickable = index <= step;\n        return (\n          <li\n            key={meta.id}\n            id={`${baseId}-step-${index}`}\n            aria-current={isActive ? \"step\" : undefined}\n            className={cn(\"flex items-center gap-2\", orientation === \"horizontal\" && \"min-w-0\")}\n          >\n            <button\n              type=\"button\"\n              disabled={!isClickable}\n              onClick={() => goTo(index)}\n              // The completed state renders only a checkmark glyph (hidden\n              // from AT below) — with no text content, the button would\n              // otherwise have no accessible name at all.\n              aria-label={isComplete ? `${meta.title} — completed` : undefined}\n              className={cn(\n                \"flex size-7 shrink-0 items-center justify-center rounded-full border text-meta font-medium tabular-nums\",\n                \"focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\",\n                isActive && \"border-primary bg-primary text-primary-foreground\",\n                // #399 — the step NUMBER is text on a `/10` wash, not plate ink\n                // and not a mark: `-text` rung. The border keeps the fill rung.\n                isComplete && \"border-primary bg-primary/10 text-primary-text\",\n                !isActive && !isComplete && \"border-border-strong text-muted-foreground\",\n                isClickable ? \"cursor-pointer\" : \"cursor-default\",\n              )}\n            >\n              {isComplete ? <Check className=\"size-4\" aria-hidden=\"true\" /> : index + 1}\n            </button>\n            <span className=\"flex min-w-0 flex-col\">\n              <span\n                className={cn(\n                  \"truncate text-body font-medium\",\n                  isActive ? \"text-foreground\" : \"text-muted-foreground\",\n                )}\n              >\n                {meta.title}\n              </span>\n              {meta.description && (\n                <span className=\"truncate text-meta text-muted-foreground\">{meta.description}</span>\n              )}\n            </span>\n          </li>\n        );\n      })}\n    </ol>\n  );\n});\n\n// ---------------------------------------------------------------------------\n// WizardStep (per-step content + validator)\n// ---------------------------------------------------------------------------\n\nexport interface WizardStepProps extends HTMLAttributes<HTMLDivElement> {\n  /** This step's index (0-based) — must match its position in `steps`. */\n  step: number;\n  /** Run before advancing past this step. Return false to block. */\n  validate?: WizardValidator;\n}\n\n/**\n * WizardStep — renders its children only when it is the active step, and\n * registers its `validate` with the wizard while active. Receives focus on\n * activation for keyboard users.\n */\nexport const WizardStep = forwardRef<HTMLDivElement, WizardStepProps>(function WizardStep(\n  { step, validate, className, children, ...props },\n  ref,\n) {\n  const { step: activeStep, baseId, setActiveValidator } = useWizard();\n  const isActive = step === activeStep;\n  const regionRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    if (!isActive) return;\n    setActiveValidator(validate);\n    // Move focus to the newly-revealed step for keyboard users.\n    regionRef.current?.focus();\n    return () => setActiveValidator(undefined);\n  }, [isActive, validate, setActiveValidator]);\n\n  if (!isActive) return null;\n\n  return (\n    <div\n      ref={(node) => {\n        regionRef.current = node;\n        if (typeof ref === \"function\") ref(node);\n        else if (ref) ref.current = node;\n      }}\n      role=\"group\"\n      aria-labelledby={`${baseId}-step-${step}`}\n      tabIndex={-1}\n      // Programmatically focused on step change (`regionRef.current?.focus()`\n      // above) — `focus-ring` gives that a visible indicator instead of\n      // silently discarding the browser's default outline (mirrors\n      // `DialogBody`'s same tabIndex={-1}-container precedent).\n      className={cn(\"min-w-0 flex-1 focus-ring\", className)}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n});\n\n// ---------------------------------------------------------------------------\n// WizardNav (Back / Next / Finish)\n// ---------------------------------------------------------------------------\n\nexport interface WizardNavProps extends HTMLAttributes<HTMLDivElement> {\n  backLabel?: string;\n  nextLabel?: string;\n  finishLabel?: string;\n  /** Called when Finish is pressed on the last step. */\n  onFinish?: () => void;\n}\n\n/** WizardNav — Back / Next (or Finish on the last step) controls. */\nexport const WizardNav = forwardRef<HTMLDivElement, WizardNavProps>(function WizardNav(\n  { backLabel = \"Back\", nextLabel = \"Next\", finishLabel = \"Finish\", onFinish, className, ...props },\n  ref,\n) {\n  const { isFirst, isLast, validating, next, prev } = useWizard();\n  return (\n    <div ref={ref} className={cn(\"flex items-center justify-between gap-2\", className)} {...props}>\n      <Button type=\"button\" variant=\"outline\" onClick={prev} disabled={isFirst}>\n        {backLabel}\n      </Button>\n      {isLast ? (\n        <Button type=\"button\" onClick={onFinish}>\n          {finishLabel}\n        </Button>\n      ) : (\n        <Button type=\"button\" onClick={next} disabled={validating}>\n          {validating ? \"Checking…\" : nextLabel}\n        </Button>\n      )}\n    </div>\n  );\n});\n"],"mappings":"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","names":["Wizard","next","WizardSteps","WizardStep","WizardNav"]}