@refraction-ui/react 0.19.1 → 0.20.0

package/dist/react-wizard.js

@@ -0,0 +1,337 @@
+import {
+  cn,
+  cva
+} from "./chunk-ZF3OHCGV.js";
+
+// ../react-wizard/dist/index.js
+import * as React from "react";
+
+// ../wizard/dist/index.js
+function getStepState(steps, currentIndex) {
+  return steps.map((step, index) => {
+    let status;
+    if (index < currentIndex) {
+      status = "complete";
+    } else if (index === currentIndex) {
+      status = "current";
+    } else {
+      status = "upcoming";
+    }
+    return { step, status, index };
+  });
+}
+function getNextIndex(currentIndex, count) {
+  if (count <= 0) return currentIndex;
+  return Math.min(currentIndex + 1, count - 1);
+}
+function getPrevIndex(currentIndex) {
+  return Math.max(currentIndex - 1, 0);
+}
+function canAdvance(currentIndex, count) {
+  if (count <= 0) return false;
+  return currentIndex < count - 1;
+}
+function createWizard(props = {}) {
+  const { currentIndex = 0, count = 0, orientation = "vertical" } = props;
+  const ariaProps = {
+    role: "group"
+  };
+  const dataAttributes = {
+    "data-step": String(currentIndex),
+    "data-orientation": orientation
+  };
+  if (count > 0) {
+    dataAttributes["data-count"] = String(count);
+  }
+  return { ariaProps, dataAttributes };
+}
+var wizardVariants = cva({
+  base: "flex gap-8",
+  variants: {
+    orientation: {
+      vertical: "flex-row",
+      horizontal: "flex-col"
+    }
+  },
+  defaultVariants: {
+    orientation: "vertical"
+  }
+});
+var wizardRailVariants = cva({
+  base: "flex shrink-0",
+  variants: {
+    orientation: {
+      vertical: "flex-col gap-0",
+      horizontal: "flex-row items-center gap-0"
+    }
+  },
+  defaultVariants: {
+    orientation: "vertical"
+  }
+});
+var wizardStepItemVariants = cva({
+  base: "flex items-center gap-3 relative",
+  variants: {
+    orientation: {
+      vertical: "flex-row",
+      horizontal: "flex-col"
+    },
+    status: {
+      complete: "",
+      current: "",
+      upcoming: ""
+    }
+  },
+  defaultVariants: {
+    orientation: "vertical",
+    status: "upcoming"
+  }
+});
+var wizardStepIndicatorVariants = cva({
+  base: [
+    "relative z-10 flex size-8 shrink-0 items-center justify-center",
+    "rounded-full border-2 text-xs font-semibold transition-colors"
+  ].join(" "),
+  variants: {
+    status: {
+      complete: "border-primary bg-primary text-primary-foreground",
+      current: "border-primary bg-background text-primary",
+      upcoming: "border-border bg-background text-muted-foreground"
+    }
+  },
+  defaultVariants: {
+    status: "upcoming"
+  }
+});
+var wizardStepLabelVariants = cva({
+  base: "text-sm font-medium transition-colors",
+  variants: {
+    status: {
+      complete: "text-foreground",
+      current: "text-foreground",
+      upcoming: "text-muted-foreground"
+    }
+  },
+  defaultVariants: {
+    status: "upcoming"
+  }
+});
+var wizardStepOptionalClass = "text-xs text-muted-foreground";
+var wizardConnectorVariants = cva({
+  base: "shrink-0 transition-colors",
+  variants: {
+    orientation: {
+      vertical: "mx-4 w-0.5 flex-1 min-h-[1.5rem]",
+      horizontal: "my-4 h-0.5 flex-1 min-w-[1.5rem]"
+    },
+    complete: {
+      true: "bg-primary",
+      false: "bg-border"
+    }
+  },
+  defaultVariants: {
+    orientation: "vertical",
+    complete: "false"
+  }
+});
+var wizardContentClass = "flex min-w-0 flex-1 flex-col";
+var wizardFooterClass = "mt-6 flex items-center gap-3";
+var wizardPrimaryButtonVariants = cva({
+  base: [
+    "inline-flex items-center justify-center rounded-md px-4 py-2 text-sm font-medium",
+    "bg-primary text-primary-foreground transition-colors",
+    "hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2",
+    "focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+    "disabled:pointer-events-none disabled:opacity-50"
+  ].join(" ")
+});
+var wizardSecondaryButtonVariants = cva({
+  base: [
+    "inline-flex items-center justify-center rounded-md px-4 py-2 text-sm font-medium",
+    "border border-input bg-background text-foreground transition-colors",
+    "hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2",
+    "focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+    "disabled:pointer-events-none disabled:opacity-50"
+  ].join(" ")
+});
+
+// ../react-wizard/dist/index.js
+import { jsx, jsxs } from "react/jsx-runtime";
+var WizardContext = React.createContext(null);
+function useWizardContext() {
+  const ctx = React.useContext(WizardContext);
+  if (!ctx) throw new Error("useWizardContext must be used inside <Wizard>");
+  return ctx;
+}
+var Wizard = React.forwardRef(
+  function Wizard2({
+    steps,
+    step: stepProp,
+    defaultStep = 0,
+    onStepChange,
+    onComplete,
+    orientation = "vertical",
+    nextLabel = "Next",
+    backLabel = "Back",
+    completeLabel = "Complete",
+    skipLabel = "Skip",
+    children,
+    className,
+    ...props
+  }, ref) {
+    const isControlled = stepProp !== void 0;
+    const [internal, setInternal] = React.useState(defaultStep);
+    const currentIndex = isControlled ? stepProp : internal;
+    const advance = React.useCallback(() => {
+      if (!canAdvance(currentIndex, steps.length)) {
+        onComplete?.();
+        return;
+      }
+      const next = getNextIndex(currentIndex, steps.length);
+      if (!isControlled) setInternal(next);
+      onStepChange?.(next);
+    }, [currentIndex, steps.length, isControlled, onStepChange, onComplete]);
+    const back = React.useCallback(() => {
+      if (currentIndex === 0) return;
+      const prev = getPrevIndex(currentIndex);
+      if (!isControlled) setInternal(prev);
+      onStepChange?.(prev);
+    }, [currentIndex, isControlled, onStepChange]);
+    const skip = React.useCallback(() => {
+      advance();
+    }, [advance]);
+    const stepStates = React.useMemo(
+      () => getStepState(steps, currentIndex),
+      [steps, currentIndex]
+    );
+    const isLastStep = currentIndex === steps.length - 1;
+    const currentStep = steps[currentIndex];
+    const isOptional = currentStep?.optional ?? false;
+    const api = createWizard({
+      currentIndex,
+      count: steps.length,
+      orientation
+    });
+    return /* @__PURE__ */ jsx(WizardContext.Provider, { value: { currentIndex, steps, orientation }, children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(wizardVariants({ orientation }), className),
+        ...api.ariaProps,
+        ...api.dataAttributes,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(
+            "nav",
+            {
+              "aria-label": "Progress",
+              className: wizardRailVariants({ orientation }),
+              children: stepStates.map((state, i) => {
+                const isLast = i === stepStates.length - 1;
+                return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+                  /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      className: wizardStepItemVariants({
+                        orientation,
+                        status: state.status
+                      }),
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          "span",
+                          {
+                            "aria-current": state.status === "current" ? "step" : void 0,
+                            className: wizardStepIndicatorVariants({ status: state.status }),
+                            children: state.status === "complete" ? /* @__PURE__ */ jsx(CheckIcon, {}) : /* @__PURE__ */ jsx("span", { children: state.index + 1 })
+                          }
+                        ),
+                        /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+                          /* @__PURE__ */ jsx(
+                            "span",
+                            {
+                              className: wizardStepLabelVariants({ status: state.status }),
+                              children: state.step.label
+                            }
+                          ),
+                          state.step.optional && /* @__PURE__ */ jsx("span", { className: wizardStepOptionalClass, children: "(Optional)" })
+                        ] })
+                      ]
+                    }
+                  ),
+                  !isLast && /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      "aria-hidden": "true",
+                      className: wizardConnectorVariants({
+                        orientation,
+                        complete: state.status === "complete" ? "true" : "false"
+                      })
+                    }
+                  )
+                ] }, state.step.id);
+              })
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: wizardContentClass, children: [
+            /* @__PURE__ */ jsx("div", { className: "flex-1", children: typeof children === "function" ? children(currentIndex) : children }),
+            /* @__PURE__ */ jsxs("div", { className: wizardFooterClass, children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  disabled: currentIndex === 0,
+                  className: wizardSecondaryButtonVariants(),
+                  onClick: back,
+                  children: backLabel
+                }
+              ),
+              isOptional && /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: wizardSecondaryButtonVariants(),
+                  onClick: skip,
+                  children: skipLabel
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: wizardPrimaryButtonVariants(),
+                  onClick: advance,
+                  children: isLastStep ? completeLabel : nextLabel
+                }
+              )
+            ] })
+          ] })
+        ]
+      }
+    ) });
+  }
+);
+function useWizard() {
+  return useWizardContext();
+}
+function CheckIcon() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      "aria-hidden": "true",
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2.5,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className: "size-4",
+      children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" })
+    }
+  );
+}
+export {
+  Wizard,
+  useWizard
+};
+//# sourceMappingURL=react-wizard.js.map

package/dist/react-wizard.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../wizard/src/wizard.ts", "../../wizard/src/wizard.styles.ts", "../../react-wizard/src/wizard.tsx"],
+  "sourcesContent": ["import type { AccessibilityProps } from '@refraction-ui/shared'\n\n/** A single step in a wizard flow. */\nexport interface WizardStep {\n  /** Unique identifier for the step. */\n  id: string\n  /** Human-readable label shown in the step rail. */\n  label: string\n  /** When true the user may skip this step. */\n  optional?: boolean\n}\n\n/** The resolved status of a step relative to the current position. */\nexport type WizardStepStatus = 'complete' | 'current' | 'upcoming'\n\n/** A step enriched with its resolved status and position. */\nexport interface WizardStepState {\n  step: WizardStep\n  status: WizardStepStatus\n  index: number\n}\n\n/** Orientation of the step rail. */\nexport type WizardOrientation = 'vertical' | 'horizontal'\n\nexport interface WizardProps {\n  /** Controlled current step index (0-based). */\n  currentIndex?: number\n  /** Total number of steps. */\n  count?: number\n  /** Orientation of the step rail. */\n  orientation?: WizardOrientation\n}\n\nexport interface WizardAPI {\n  /** ARIA attributes to spread on the root element. */\n  ariaProps: Partial<AccessibilityProps>\n  /** Data attributes for styling hooks. */\n  dataAttributes: Record<string, string>\n}\n\n/**\n * Derive the status of every step from the current position.\n *\n * Steps before `currentIndex` are `'complete'`, the step at `currentIndex` is\n * `'current'`, and every step after is `'upcoming'`.\n */\nexport function getStepState(\n  steps: WizardStep[],\n  currentIndex: number,\n): WizardStepState[] {\n  return steps.map((step, index) => {\n    let status: WizardStepStatus\n    if (index < currentIndex) {\n      status = 'complete'\n    } else if (index === currentIndex) {\n      status = 'current'\n    } else {\n      status = 'upcoming'\n    }\n    return { step, status, index }\n  })\n}\n\n/**\n * Returns the next step index, clamped to the last step so the wizard never\n * advances past the final step.\n */\nexport function getNextIndex(currentIndex: number, count: number): number {\n  if (count <= 0) return currentIndex\n  return Math.min(currentIndex + 1, count - 1)\n}\n\n/**\n * Returns the previous step index, clamped to 0 so the wizard never goes\n * behind the first step.\n */\nexport function getPrevIndex(currentIndex: number): number {\n  return Math.max(currentIndex - 1, 0)\n}\n\n/**\n * Whether the wizard can advance from `currentIndex`.\n *\n * Returns `false` when already on the last step.\n */\nexport function canAdvance(currentIndex: number, count: number): boolean {\n  if (count <= 0) return false\n  return currentIndex < count - 1\n}\n\n/**\n * Fractional progress through the wizard (0 when on step 0, 1 when the final\n * step is complete). Returns 0 for empty wizards.\n *\n * `wizardProgress(0, 4)` → 0   (just started)\n * `wizardProgress(3, 4)` → 0.75\n * `wizardProgress(4, 4)` → 1   (done)\n */\nexport function wizardProgress(currentIndex: number, count: number): number {\n  if (count <= 0) return 0\n  return Math.min(currentIndex / count, 1)\n}\n\n/**\n * Build the framework-agnostic root props for a wizard component.\n *\n * Returns `role=\"group\"` plus `data-step` / `data-orientation` attributes so\n * adapters can spread them onto their container without duplicating logic.\n */\nexport function createWizard(props: WizardProps = {}): WizardAPI {\n  const { currentIndex = 0, count = 0, orientation = 'vertical' } = props\n\n  const ariaProps: Partial<AccessibilityProps> = {\n    role: 'group',\n  }\n\n  const dataAttributes: Record<string, string> = {\n    'data-step': String(currentIndex),\n    'data-orientation': orientation,\n  }\n\n  if (count > 0) {\n    dataAttributes['data-count'] = String(count)\n  }\n\n  return { ariaProps, dataAttributes }\n}\n", "import { cva } from '@refraction-ui/shared'\n\n/**\n * Root container that holds the step rail and the content/footer area\n * side-by-side (vertical) or stacked (horizontal).\n */\nexport const wizardVariants = cva({\n  base: 'flex gap-8',\n  variants: {\n    orientation: {\n      vertical: 'flex-row',\n      horizontal: 'flex-col',\n    },\n  },\n  defaultVariants: {\n    orientation: 'vertical',\n  },\n})\n\n/**\n * The step rail — the ordered list of step indicators.\n * Vertical: a narrow column on the left. Horizontal: a row across the top.\n */\nexport const wizardRailVariants = cva({\n  base: 'flex shrink-0',\n  variants: {\n    orientation: {\n      vertical: 'flex-col gap-0',\n      horizontal: 'flex-row items-center gap-0',\n    },\n  },\n  defaultVariants: {\n    orientation: 'vertical',\n  },\n})\n\n/**\n * A single step item in the rail. The `status` variant drives colour so\n * adapters never inline these classes.\n */\nexport const wizardStepItemVariants = cva({\n  base: 'flex items-center gap-3 relative',\n  variants: {\n    orientation: {\n      vertical: 'flex-row',\n      horizontal: 'flex-col',\n    },\n    status: {\n      complete: '',\n      current: '',\n      upcoming: '',\n    },\n  },\n  defaultVariants: {\n    orientation: 'vertical',\n    status: 'upcoming',\n  },\n})\n\n/**\n * The circular step indicator (the number/check badge on the rail).\n * `status` variant applies the appropriate background and text treatment.\n */\nexport const wizardStepIndicatorVariants = cva({\n  base: [\n    'relative z-10 flex size-8 shrink-0 items-center justify-center',\n    'rounded-full border-2 text-xs font-semibold transition-colors',\n  ].join(' '),\n  variants: {\n    status: {\n      complete: 'border-primary bg-primary text-primary-foreground',\n      current: 'border-primary bg-background text-primary',\n      upcoming: 'border-border bg-background text-muted-foreground',\n    },\n  },\n  defaultVariants: {\n    status: 'upcoming',\n  },\n})\n\n/** The label text next to / below the step indicator. */\nexport const wizardStepLabelVariants = cva({\n  base: 'text-sm font-medium transition-colors',\n  variants: {\n    status: {\n      complete: 'text-foreground',\n      current: 'text-foreground',\n      upcoming: 'text-muted-foreground',\n    },\n  },\n  defaultVariants: {\n    status: 'upcoming',\n  },\n})\n\n/** \"(Optional)\" sub-label shown beneath the step label. */\nexport const wizardStepOptionalClass = 'text-xs text-muted-foreground'\n\n/**\n * The connector line drawn between two adjacent step indicators.\n * Positioned absolutely so the indicator sits on top of it.\n */\nexport const wizardConnectorVariants = cva({\n  base: 'shrink-0 transition-colors',\n  variants: {\n    orientation: {\n      vertical: 'mx-4 w-0.5 flex-1 min-h-[1.5rem]',\n      horizontal: 'my-4 h-0.5 flex-1 min-w-[1.5rem]',\n    },\n    complete: {\n      true: 'bg-primary',\n      false: 'bg-border',\n    },\n  },\n  defaultVariants: {\n    orientation: 'vertical',\n    complete: 'false',\n  },\n})\n\n/** The main content area to the right (vertical) or below (horizontal) the rail. */\nexport const wizardContentClass = 'flex min-w-0 flex-1 flex-col'\n\n/** Footer row that holds the Back / Skip / Next-or-Complete buttons. */\nexport const wizardFooterClass = 'mt-6 flex items-center gap-3'\n\n/** The primary action button (Next / Complete). */\nexport const wizardPrimaryButtonVariants = cva({\n  base: [\n    'inline-flex items-center justify-center rounded-md px-4 py-2 text-sm font-medium',\n    'bg-primary text-primary-foreground transition-colors',\n    'hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2',\n    'focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background',\n    'disabled:pointer-events-none disabled:opacity-50',\n  ].join(' '),\n})\n\n/** The secondary action button (Back / Skip). */\nexport const wizardSecondaryButtonVariants = cva({\n  base: [\n    'inline-flex items-center justify-center rounded-md px-4 py-2 text-sm font-medium',\n    'border border-input bg-background text-foreground transition-colors',\n    'hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2',\n    'focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background',\n    'disabled:pointer-events-none disabled:opacity-50',\n  ].join(' '),\n})\n", "import * as React from 'react'\nimport {\n  createWizard,\n  getStepState,\n  getNextIndex,\n  getPrevIndex,\n  canAdvance,\n  wizardVariants,\n  wizardRailVariants,\n  wizardStepItemVariants,\n  wizardStepIndicatorVariants,\n  wizardStepLabelVariants,\n  wizardStepOptionalClass,\n  wizardConnectorVariants,\n  wizardContentClass,\n  wizardFooterClass,\n  wizardPrimaryButtonVariants,\n  wizardSecondaryButtonVariants,\n  type WizardStep,\n  type WizardOrientation,\n} from '@refraction-ui/wizard'\nimport { cn } from '@refraction-ui/shared'\n\nexport type { WizardStep, WizardOrientation }\n\n// ---------------------------------------------------------------------------\n// Context\n// ---------------------------------------------------------------------------\n\ninterface WizardContextValue {\n  currentIndex: number\n  steps: WizardStep[]\n  orientation: WizardOrientation\n}\n\nconst WizardContext = React.createContext<WizardContextValue | null>(null)\n\nfunction useWizardContext(): WizardContextValue {\n  const ctx = React.useContext(WizardContext)\n  if (!ctx) throw new Error('useWizardContext must be used inside <Wizard>')\n  return ctx\n}\n\n// ---------------------------------------------------------------------------\n// Props\n// ---------------------------------------------------------------------------\n\nexport interface WizardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'children'> {\n  /** Step definitions for the rail. */\n  steps: WizardStep[]\n  /** Controlled current step index (0-based). */\n  step?: number\n  /** Initial step index for uncontrolled usage. */\n  defaultStep?: number\n  /** Called when the current step changes (Back/Next). */\n  onStepChange?: (index: number) => void\n  /** Called when the user completes the final step. */\n  onComplete?: () => void\n  /** Orientation of the step rail. Default `'vertical'`. */\n  orientation?: WizardOrientation\n  /** Label for the Next button. */\n  nextLabel?: React.ReactNode\n  /** Label for the Back button. */\n  backLabel?: React.ReactNode\n  /** Label for the button on the final step. */\n  completeLabel?: React.ReactNode\n  /** Label for the Skip button (shown on optional steps only). */\n  skipLabel?: React.ReactNode\n  /**\n   * Content for the active step. Either pass a render prop that receives the\n   * current step index, or plain children shown for every step.\n   */\n  children?: React.ReactNode | ((currentIndex: number) => React.ReactNode)\n}\n\n// ---------------------------------------------------------------------------\n// Wizard\n// ---------------------------------------------------------------------------\n\n/**\n * Wizard — a multi-step flow orchestration component.\n *\n * Renders a step rail (vertical by default) alongside the active step content\n * and a footer with Back / Skip (optional steps) / Next-or-Complete actions.\n * Supports controlled (`step` / `onStepChange`) and uncontrolled\n * (`defaultStep`) usage. Logic and styles come from the headless\n * `@refraction-ui/wizard` core.\n *\n * @example\n * ```tsx\n * <Wizard steps={steps} onComplete={handleComplete}>\n *   {(index) => <StepContent stepIndex={index} />}\n * </Wizard>\n * ```\n */\nexport const Wizard = React.forwardRef<HTMLDivElement, WizardProps>(\n  function Wizard(\n    {\n      steps,\n      step: stepProp,\n      defaultStep = 0,\n      onStepChange,\n      onComplete,\n      orientation = 'vertical',\n      nextLabel = 'Next',\n      backLabel = 'Back',\n      completeLabel = 'Complete',\n      skipLabel = 'Skip',\n      children,\n      className,\n      ...props\n    },\n    ref,\n  ) {\n    const isControlled = stepProp !== undefined\n    const [internal, setInternal] = React.useState(defaultStep)\n    const currentIndex = isControlled ? stepProp : internal\n\n    const advance = React.useCallback(() => {\n      if (!canAdvance(currentIndex, steps.length)) {\n        onComplete?.()\n        return\n      }\n      const next = getNextIndex(currentIndex, steps.length)\n      if (!isControlled) setInternal(next)\n      onStepChange?.(next)\n    }, [currentIndex, steps.length, isControlled, onStepChange, onComplete])\n\n    const back = React.useCallback(() => {\n      if (currentIndex === 0) return\n      const prev = getPrevIndex(currentIndex)\n      if (!isControlled) setInternal(prev)\n      onStepChange?.(prev)\n    }, [currentIndex, isControlled, onStepChange])\n\n    const skip = React.useCallback(() => {\n      advance()\n    }, [advance])\n\n    const stepStates = React.useMemo(\n      () => getStepState(steps, currentIndex),\n      [steps, currentIndex],\n    )\n\n    const isLastStep = currentIndex === steps.length - 1\n    const currentStep = steps[currentIndex]\n    const isOptional = currentStep?.optional ?? false\n\n    const api = createWizard({\n      currentIndex,\n      count: steps.length,\n      orientation,\n    })\n\n    return (\n      <WizardContext.Provider value={{ currentIndex, steps, orientation }}>\n        <div\n          ref={ref}\n          className={cn(wizardVariants({ orientation }), className)}\n          {...api.ariaProps}\n          {...api.dataAttributes}\n          {...props}\n        >\n          {/* Step Rail */}\n          <nav\n            aria-label=\"Progress\"\n            className={wizardRailVariants({ orientation })}\n          >\n            {stepStates.map((state, i) => {\n              const isLast = i === stepStates.length - 1\n              return (\n                <React.Fragment key={state.step.id}>\n                  <div\n                    className={wizardStepItemVariants({\n                      orientation,\n                      status: state.status,\n                    })}\n                  >\n                    <span\n                      aria-current={state.status === 'current' ? 'step' : undefined}\n                      className={wizardStepIndicatorVariants({ status: state.status })}\n                    >\n                      {state.status === 'complete' ? (\n                        <CheckIcon />\n                      ) : (\n                        <span>{state.index + 1}</span>\n                      )}\n                    </span>\n                    <div className=\"flex flex-col\">\n                      <span\n                        className={wizardStepLabelVariants({ status: state.status })}\n                      >\n                        {state.step.label}\n                      </span>\n                      {state.step.optional && (\n                        <span className={wizardStepOptionalClass}>(Optional)</span>\n                      )}\n                    </div>\n                  </div>\n                  {!isLast && (\n                    <div\n                      aria-hidden=\"true\"\n                      className={wizardConnectorVariants({\n                        orientation,\n                        complete: state.status === 'complete' ? 'true' : 'false',\n                      })}\n                    />\n                  )}\n                </React.Fragment>\n              )\n            })}\n          </nav>\n\n          {/* Content + Footer */}\n          <div className={wizardContentClass}>\n            <div className=\"flex-1\">\n              {typeof children === 'function' ? children(currentIndex) : children}\n            </div>\n\n            <div className={wizardFooterClass}>\n              <button\n                type=\"button\"\n                disabled={currentIndex === 0}\n                className={wizardSecondaryButtonVariants()}\n                onClick={back}\n              >\n                {backLabel}\n              </button>\n\n              {isOptional && (\n                <button\n                  type=\"button\"\n                  className={wizardSecondaryButtonVariants()}\n                  onClick={skip}\n                >\n                  {skipLabel}\n                </button>\n              )}\n\n              <button\n                type=\"button\"\n                className={wizardPrimaryButtonVariants()}\n                onClick={advance}\n              >\n                {isLastStep ? completeLabel : nextLabel}\n              </button>\n            </div>\n          </div>\n        </div>\n      </WizardContext.Provider>\n    )\n  },\n)\n\n// ---------------------------------------------------------------------------\n// useWizard hook (for children that need context access)\n// ---------------------------------------------------------------------------\n\n/**\n * Access wizard state from within a child component rendered inside `<Wizard>`.\n */\nexport function useWizard(): WizardContextValue {\n  return useWizardContext()\n}\n\n// ---------------------------------------------------------------------------\n// Internal icons (no external dep — SVG inline)\n// ---------------------------------------------------------------------------\n\nfunction CheckIcon() {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2.5}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      className=\"size-4\"\n    >\n      <polyline points=\"20 6 9 17 4 12\" />\n    </svg>\n  )\n}\n"],
+  "mappings": "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",
+  "names": ["Wizard"]
+}

package/dist/styles.css

@@ -61,6 +61,10 @@
   --success-foreground: 0 0% 100%;
   --warning: 38 92% 50%;
   --warning-foreground: 240 10% 10%;
+  /* #3B82F6 (Tailwind blue-500). The Flutter package's info token is #2196F3
+     (Material blue) — a deliberate small cross-framework delta. */
+  --info: 217 91% 60%;
+  --info-foreground: 0 0% 100%;
 
   --border: 240 6% 92%;
   --input: 240 6% 92%;
@@ -269,6 +273,9 @@
   --success-foreground: 0 0% 98%;
   --warning: 38 92% 50%;
   --warning-foreground: 240 10% 4%;
+  /* Lightened from 60% (light) to 65% lightness for contrast on dark surfaces */
+  --info: 217 91% 65%;
+  --info-foreground: 0 0% 98%;
 
   --border: 240 5% 16%;
   --input: 240 5% 16%;

package/dist/theme.js

@@ -1,5 +1,5 @@
 'use client';
-import { devWarn } from './chunk-4A4BW3GR.js';
+import { devWarn } from './chunk-Y2FNNAIL.js';
 import * as React2 from 'react';
 
 // ../theme/dist/index.js

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@refraction-ui/react",
-  "version": "0.19.1",
+  "version": "0.20.0",
   "description": "All Refraction UI React components in one package — headless, accessible, zero-dependency",
   "type": "module",
   "main": "./dist/index.js",
@@ -28,7 +28,7 @@
     "dist"
   ],
   "scripts": {
-    "build": "tsup && cp src/styles.css dist/styles.css && node ./scripts/embed-internal-types.mjs && node ./scripts/ensure-use-client.mjs",
+    "build": "tsup && node ./scripts/build-esm-split.mjs && cp src/styles.css dist/styles.css && node ./scripts/embed-internal-types.mjs && node ./scripts/ensure-use-client.mjs",
     "dev": "tsup --watch",
     "test": "vitest run --passWithNoTests",
     "test:watch": "vitest",
@@ -151,6 +151,7 @@
     "@refraction-ui/react-skip-to-content": "workspace:*",
     "@refraction-ui/react-slide-viewer": "workspace:*",
     "@refraction-ui/react-slider": "workspace:*",
+    "@refraction-ui/react-slot": "workspace:*",
     "@refraction-ui/react-slot-picker": "workspace:*",
     "@refraction-ui/react-social-auth-button": "workspace:*",
     "@refraction-ui/react-sortable-list": "workspace:*",