@reformer/ui 1.0.0-beta.3 → 1.0.0-beta.4

package/dist/FormNavigation-Di3Mss2W.js

@@ -0,0 +1,330 @@
+import { jsx as p, Fragment as A } from "react/jsx-runtime";
+import { createContext as M, useContext as U, useMemo as Y, forwardRef as y, Children as D, isValidElement as j, cloneElement as L, useState as E, useCallback as F, useImperativeHandle as tt } from "react";
+import { validateForm as G } from "@reformer/core/validators";
+const H = M(null);
+function g() {
+  const t = U(H);
+  if (!t)
+    throw new Error("useFormNavigation must be used within FormNavigation");
+  return t;
+}
+function I({
+  component: t,
+  control: n,
+  _stepIndex: s,
+  ...e
+}) {
+  const { currentStep: i } = g();
+  return s === void 0 || i !== s ? null : /* @__PURE__ */ p(t, { control: n, ...e });
+}
+I.displayName = "FormNavigation.Step";
+function O({ steps: t, children: n }) {
+  if (typeof n != "function")
+    throw new Error(
+      "FormNavigation.Indicator requires children as a render function. Example: <FormNavigation.Indicator steps={STEPS}>{({ steps }) => <YourUI />}</FormNavigation.Indicator>"
+    );
+  const { currentStep: s, totalSteps: e, completedSteps: i, goToStep: r } = g(), c = {
+    steps: t.map((o) => ({
+      ...o,
+      isCurrent: s === o.number,
+      isCompleted: i.includes(o.number),
+      canNavigate: o.number === 1 || i.includes(o.number - 1)
+    })),
+    goToStep: r,
+    currentStep: s,
+    totalSteps: e,
+    completedSteps: i
+  };
+  return /* @__PURE__ */ p(A, { children: n(c) });
+}
+O.displayName = "FormNavigation.Indicator";
+const $ = M(null);
+function et() {
+  const t = U($);
+  if (!t)
+    throw new Error(
+      "FormNavigation.Prev/Next/Submit must be used within FormNavigation.Actions. Wrap your navigation buttons with <FormNavigation.Actions>."
+    );
+  return t;
+}
+function ot(t) {
+  return typeof t == "function";
+}
+function z({
+  onSubmit: t,
+  children: n,
+  className: s,
+  style: e
+}) {
+  const { isFirstStep: i, isLastStep: r, isValidating: a, isSubmitting: c, goToNextStep: o, goToPreviousStep: m } = g(), d = Y(() => ({ onSubmit: t }), [t]);
+  if (ot(n)) {
+    const v = a || c;
+    return /* @__PURE__ */ p(A, { children: n({
+      prev: {
+        onClick: m,
+        disabled: v
+      },
+      next: {
+        onClick: () => o(),
+        disabled: v
+      },
+      submit: {
+        onClick: () => t?.(),
+        disabled: v,
+        isSubmitting: c
+      },
+      isFirstStep: i,
+      isLastStep: r,
+      isValidating: a,
+      isSubmitting: c
+    }) });
+  }
+  return /* @__PURE__ */ p($.Provider, { value: d, children: s || e ? /* @__PURE__ */ p("div", { className: s, style: e, children: n }) : /* @__PURE__ */ p(A, { children: n }) });
+}
+z.displayName = "FormNavigation.Actions";
+function J({ children: t }) {
+  if (typeof t != "function")
+    throw new Error(
+      "FormNavigation.Progress requires children as a render function. Example: <FormNavigation.Progress>{({ current, total }) => <YourUI />}</FormNavigation.Progress>"
+    );
+  const { currentStep: n, totalSteps: s, completedSteps: e, isFirstStep: i, isLastStep: r } = g(), a = {
+    current: n,
+    total: s,
+    percent: Math.round(n / s * 100),
+    completedCount: e.length,
+    isFirstStep: i,
+    isLastStep: r
+  };
+  return /* @__PURE__ */ p(A, { children: t(a) });
+}
+J.displayName = "FormNavigation.Progress";
+function it(t, n) {
+  const s = { ...t };
+  for (const e of Object.keys(n)) {
+    const i = t[e], r = n[e];
+    e.startsWith("on") && typeof i == "function" && typeof r == "function" ? s[e] = (...a) => {
+      r(...a), i(...a);
+    } : e === "className" && typeof i == "string" && typeof r == "string" ? s[e] = [r, i].filter(Boolean).join(" ") : e === "style" && typeof i == "object" && typeof r == "object" ? s[e] = { ...r, ...i } : e === "disabled" ? s[e] = !!i || !!r : r !== void 0 && (s[e] = r);
+  }
+  return s;
+}
+const k = y(
+  ({ children: t, ...n }, s) => {
+    const e = D.only(t);
+    if (!j(e))
+      return null;
+    const i = e.props, r = it(n, i), a = e.ref;
+    return L(e, {
+      ...r,
+      ref: s || a
+    });
+  }
+);
+k.displayName = "Slot";
+const K = y(
+  ({ children: t, asChild: n = !1, disabled: s, ...e }, i) => {
+    const { goToPreviousStep: r, isFirstStep: a, isValidating: c, isSubmitting: o } = g();
+    return /* @__PURE__ */ p(
+      n ? k : "button",
+      {
+        ref: i,
+        type: n ? void 0 : "button",
+        onClick: r,
+        disabled: s || (a || c || o),
+        "data-first-step": a || void 0,
+        ...e,
+        children: t
+      }
+    );
+  }
+);
+K.displayName = "FormNavigation.Prev";
+const Q = y(
+  ({ children: t, asChild: n = !1, disabled: s, ...e }, i) => {
+    const { goToNextStep: r, isLastStep: a, isValidating: c, isSubmitting: o } = g();
+    return /* @__PURE__ */ p(
+      n ? k : "button",
+      {
+        ref: i,
+        type: n ? void 0 : "button",
+        onClick: () => r(),
+        disabled: s || (a || c || o),
+        "data-last-step": a || void 0,
+        ...e,
+        children: t
+      }
+    );
+  }
+);
+Q.displayName = "FormNavigation.Next";
+const X = y(
+  ({ children: t, asChild: n = !1, disabled: s, loadingText: e, ...i }, r) => {
+    const { isLastStep: a, isValidating: c, isSubmitting: o } = g(), { onSubmit: m } = et();
+    return /* @__PURE__ */ p(
+      n ? k : "button",
+      {
+        ref: r,
+        type: n ? void 0 : "submit",
+        onClick: () => m?.(),
+        disabled: s || (!a || c || o),
+        "data-submitting": o || void 0,
+        "data-not-last-step": !a || void 0,
+        ...i,
+        children: o && e ? e : t
+      }
+    );
+  }
+);
+X.displayName = "FormNavigation.Submit";
+function nt({ form: t, config: n, children: s, onStepChange: e, scrollToTop: i = !0 }, r) {
+  const a = (u) => {
+    let l = 0;
+    return D.forEach(u, (f) => {
+      if (j(f))
+        if (f.type === I)
+          l += 1;
+        else {
+          const q = f.props;
+          q.children && (l += a(q.children));
+        }
+    }), l;
+  }, c = a(s), [o, m] = E(1), [d, v] = E([]), [N, S] = E(!1), R = t.submitting.value, h = F(async () => {
+    const u = n.stepValidations[o];
+    if (!u)
+      return console.warn(`No validation schema for step ${o}`), !0;
+    S(!0);
+    try {
+      return await G(t, u);
+    } finally {
+      S(!1);
+    }
+  }, [t, o, n.stepValidations]), P = F(async () => {
+    if (!await h())
+      return t.markAsTouched(), !1;
+    if (d.includes(o) || v((l) => [...l, o]), o < c) {
+      const l = o + 1;
+      m(l), e?.(l), i && window.scrollTo({ top: 0, behavior: "smooth" });
+    }
+    return !0;
+  }, [
+    h,
+    o,
+    d,
+    c,
+    t,
+    e,
+    i
+  ]), w = F(() => {
+    if (o > 1) {
+      const u = o - 1;
+      m(u), e?.(u), i && window.scrollTo({ top: 0, behavior: "smooth" });
+    }
+  }, [o, e, i]), x = F(
+    (u) => (u === 1 || d.includes(u - 1)) && u >= 1 && u <= c ? (m(u), e?.(u), i && window.scrollTo({ top: 0, behavior: "smooth" }), !0) : !1,
+    [d, c, e, i]
+  ), T = F(
+    async (u) => {
+      S(!0);
+      try {
+        return await G(t, n.fullValidation) ? t.submit(u) : (t.markAsTouched(), null);
+      } finally {
+        S(!1);
+      }
+    },
+    [t, n.fullValidation]
+  ), C = o === 1, V = o === c;
+  tt(
+    r,
+    () => ({
+      currentStep: o,
+      completedSteps: d,
+      validateCurrentStep: h,
+      goToNextStep: P,
+      goToPreviousStep: w,
+      goToStep: x,
+      submit: T,
+      isFirstStep: C,
+      isLastStep: V,
+      isValidating: N
+    }),
+    [
+      o,
+      d,
+      h,
+      P,
+      w,
+      x,
+      T,
+      C,
+      V,
+      N
+    ]
+  );
+  const Z = Y(
+    () => ({
+      // State
+      currentStep: o,
+      totalSteps: c,
+      completedSteps: d,
+      isFirstStep: C,
+      isLastStep: V,
+      isValidating: N,
+      isSubmitting: R,
+      form: t,
+      // Navigation methods
+      goToNextStep: P,
+      goToPreviousStep: w,
+      goToStep: x
+    }),
+    [
+      o,
+      c,
+      d,
+      C,
+      V,
+      N,
+      R,
+      t,
+      P,
+      w,
+      x
+    ]
+  );
+  let W = 0;
+  const B = (u) => D.map(u, (l) => {
+    if (!j(l))
+      return l;
+    const f = l.props;
+    return l.type === I ? (W += 1, L(l, {
+      ...f,
+      _stepIndex: W
+      // 1-based indexing
+    })) : typeof f.children == "function" ? l : f.children ? L(l, {
+      ...f,
+      children: B(f.children)
+    }) : l;
+  }), _ = B(s);
+  return /* @__PURE__ */ p(H.Provider, { value: Z, children: _ });
+}
+const st = y(nt), b = st;
+b.Step = I;
+b.Indicator = O;
+b.Actions = z;
+b.Progress = J;
+b.Prev = K;
+b.Next = Q;
+b.Submit = X;
+export {
+  b as F,
+  k as S,
+  I as a,
+  O as b,
+  z as c,
+  J as d,
+  H as e,
+  et as f,
+  K as g,
+  Q as h,
+  X as i,
+  g as u
+};

package/dist/form-navigation/FormNavigation.d.ts

@@ -2,6 +2,9 @@ import { FormNavigationStep } from './FormNavigationStep';
 import { FormNavigationIndicator } from './FormNavigationIndicator';
 import { FormNavigationActions } from './FormNavigationActions';
 import { FormNavigationProgress } from './FormNavigationProgress';
+import { FormNavigationPrev } from './FormNavigationPrev';
+import { FormNavigationNext } from './FormNavigationNext';
+import { FormNavigationSubmit } from './FormNavigationSubmit';
 import type { FormNavigationHandle, FormNavigationProps } from './types';
 declare const FormNavigationBase: <T extends Record<string, any>>(props: FormNavigationProps<T> & {
     ref?: React.ForwardedRef<FormNavigationHandle<T>>;
@@ -11,6 +14,9 @@ type FormNavigationComponent = typeof FormNavigationBase & {
     Indicator: typeof FormNavigationIndicator;
     Actions: typeof FormNavigationActions;
     Progress: typeof FormNavigationProgress;
+    Prev: typeof FormNavigationPrev;
+    Next: typeof FormNavigationNext;
+    Submit: typeof FormNavigationSubmit;
 };
 export declare const FormNavigation: FormNavigationComponent;
 export {};

package/dist/form-navigation/FormNavigationActions.d.ts

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import { type CSSProperties, type ReactNode } from 'react';
 /**
  * Props for a navigation button (prev/next)
  */
@@ -34,31 +34,48 @@ export interface FormNavigationActionsRenderProps {
     /** Whether form is submitting */
     isSubmitting: boolean;
 }
+/**
+ * Render function type for headless mode
+ */
+type RenderFunction = (props: FormNavigationActionsRenderProps) => ReactNode;
 /**
  * Props for FormNavigation.Actions component
  */
 export interface FormNavigationActionsProps {
     /** Submit handler (called on last step) */
     onSubmit?: () => void | Promise<void>;
-    /** Render function for custom UI */
-    children: (props: FormNavigationActionsRenderProps) => ReactNode;
+    /** Children: render function (headless) or ReactNode (compound components) */
+    children: ReactNode | RenderFunction;
+    /** Optional className for wrapper (compound mode only) */
+    className?: string;
+    /** Optional style for wrapper (compound mode only) */
+    style?: CSSProperties;
+}
+interface FormNavigationActionsContextValue {
+    onSubmit?: () => void | Promise<void>;
 }
 /**
- * FormNavigation.Actions - Headless component for navigation buttons
+ * Hook to access Actions context (onSubmit handler)
  *
- * Provides all necessary props and state for building custom navigation UI.
- * No default UI - you build exactly what you need.
+ * Must be used within FormNavigation.Actions component.
+ * Used internally by FormNavigation.Submit.
+ */
+export declare function useFormNavigationActions(): FormNavigationActionsContextValue;
+/**
+ * FormNavigation.Actions - Container for navigation buttons
  *
- * ## Render Props
- * - `prev` - props for Previous button (`onClick`, `disabled`)
- * - `next` - props for Next button (`onClick`, `disabled`)
- * - `submit` - props for Submit button (`onClick`, `disabled`, `isSubmitting`)
- * - `isFirstStep` - hide prev button on first step
- * - `isLastStep` - show submit instead of next on last step
- * - `isValidating` - show loading state during validation
- * - `isSubmitting` - show loading state during submission
+ * Supports two modes:
+ *
+ * ## 1. Compound Components Mode (recommended for simple cases)
+ * ```tsx
+ * <FormNavigation.Actions onSubmit={handleSubmit}>
+ *   <FormNavigation.Prev>Back</FormNavigation.Prev>
+ *   <FormNavigation.Next>Next</FormNavigation.Next>
+ *   <FormNavigation.Submit loadingText="Submitting...">Submit</FormNavigation.Submit>
+ * </FormNavigation.Actions>
+ * ```
  *
- * @example Basic usage
+ * ## 2. Render Props Mode (for complex/custom layouts)
  * ```tsx
  * <FormNavigation.Actions onSubmit={handleSubmit}>
  *   {({ prev, next, submit, isFirstStep, isLastStep }) => (
@@ -83,31 +100,17 @@ export interface FormNavigationActionsProps {
  * </FormNavigation.Actions>
  * ```
  *
- * @example With custom button component
- * ```tsx
- * <FormNavigation.Actions onSubmit={handleSubmit}>
- *   {({ prev, next, submit, isFirstStep, isLastStep, isValidating }) => (
- *     <ActionBar>
- *       <ActionBar.Left>
- *         {!isFirstStep && <IconButton icon="arrow-left" {...prev} />}
- *       </ActionBar.Left>
- *       <ActionBar.Right>
- *         {isLastStep ? (
- *           <PrimaryButton {...submit} loading={submit.isSubmitting}>
- *             Submit Application
- *           </PrimaryButton>
- *         ) : (
- *           <PrimaryButton {...next} loading={isValidating}>
- *             Continue
- *           </PrimaryButton>
- *         )}
- *       </ActionBar.Right>
- *     </ActionBar>
- *   )}
- * </FormNavigation.Actions>
- * ```
+ * ## Render Props (headless mode)
+ * - `prev` - props for Previous button (`onClick`, `disabled`)
+ * - `next` - props for Next button (`onClick`, `disabled`)
+ * - `submit` - props for Submit button (`onClick`, `disabled`, `isSubmitting`)
+ * - `isFirstStep` - hide prev button on first step
+ * - `isLastStep` - show submit instead of next on last step
+ * - `isValidating` - show loading state during validation
+ * - `isSubmitting` - show loading state during submission
  */
-export declare function FormNavigationActions({ onSubmit, children }: FormNavigationActionsProps): import("react/jsx-runtime").JSX.Element;
+export declare function FormNavigationActions({ onSubmit, children, className, style, }: FormNavigationActionsProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace FormNavigationActions {
     var displayName: string;
 }
+export {};

package/dist/form-navigation/FormNavigationNext.d.ts

@@ -0,0 +1,35 @@
+import { type ButtonHTMLAttributes, type ReactNode } from 'react';
+/**
+ * Props for FormNavigation.Next component
+ */
+export interface FormNavigationNextProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'> {
+    /** Button content */
+    children: ReactNode;
+    /** Render as child element (merge props into child) */
+    asChild?: boolean;
+    /** Additional disabled state (merged with automatic via OR) */
+    disabled?: boolean;
+}
+/**
+ * FormNavigation.Next - Next step button component
+ *
+ * Renders a button that validates current step and navigates to the next.
+ * Automatically disabled on the last step, during validation, or during submission.
+ *
+ * @example Basic usage
+ * ```tsx
+ * <FormNavigation.Actions>
+ *   <FormNavigation.Next>Continue</FormNavigation.Next>
+ * </FormNavigation.Actions>
+ * ```
+ *
+ * @example With custom button (asChild)
+ * ```tsx
+ * <FormNavigation.Next asChild>
+ *   <MyButton variant="primary">
+ *     Next <ArrowRight />
+ *   </MyButton>
+ * </FormNavigation.Next>
+ * ```
+ */
+export declare const FormNavigationNext: import("react").ForwardRefExoticComponent<FormNavigationNextProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/form-navigation/FormNavigationPrev.d.ts

@@ -0,0 +1,35 @@
+import { type ButtonHTMLAttributes, type ReactNode } from 'react';
+/**
+ * Props for FormNavigation.Prev component
+ */
+export interface FormNavigationPrevProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'> {
+    /** Button content */
+    children: ReactNode;
+    /** Render as child element (merge props into child) */
+    asChild?: boolean;
+    /** Additional disabled state (merged with automatic via OR) */
+    disabled?: boolean;
+}
+/**
+ * FormNavigation.Prev - Previous step button component
+ *
+ * Renders a button that navigates to the previous step.
+ * Automatically disabled on the first step, during validation, or during submission.
+ *
+ * @example Basic usage
+ * ```tsx
+ * <FormNavigation.Actions>
+ *   <FormNavigation.Prev>Back</FormNavigation.Prev>
+ * </FormNavigation.Actions>
+ * ```
+ *
+ * @example With custom button (asChild)
+ * ```tsx
+ * <FormNavigation.Prev asChild>
+ *   <MyButton variant="ghost">
+ *     <ArrowLeft /> Back
+ *   </MyButton>
+ * </FormNavigation.Prev>
+ * ```
+ */
+export declare const FormNavigationPrev: import("react").ForwardRefExoticComponent<FormNavigationPrevProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/form-navigation/FormNavigationSubmit.d.ts

@@ -0,0 +1,43 @@
+import { type ButtonHTMLAttributes, type ReactNode } from 'react';
+/**
+ * Props for FormNavigation.Submit component
+ */
+export interface FormNavigationSubmitProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'> {
+    /** Button content */
+    children: ReactNode;
+    /** Render as child element (merge props into child) */
+    asChild?: boolean;
+    /** Additional disabled state (merged with automatic via OR) */
+    disabled?: boolean;
+    /** Content to show during submission (replaces children) */
+    loadingText?: ReactNode;
+}
+/**
+ * FormNavigation.Submit - Form submission button component
+ *
+ * Renders a button that submits the form on the last step.
+ * Automatically disabled when not on the last step, during validation, or during submission.
+ * Shows `loadingText` content during submission if provided.
+ *
+ * @example Basic usage
+ * ```tsx
+ * <FormNavigation.Actions onSubmit={handleSubmit}>
+ *   <FormNavigation.Submit>Submit</FormNavigation.Submit>
+ * </FormNavigation.Actions>
+ * ```
+ *
+ * @example With loading text
+ * ```tsx
+ * <FormNavigation.Submit loadingText="Submitting...">
+ *   Submit Application
+ * </FormNavigation.Submit>
+ * ```
+ *
+ * @example With custom button (asChild)
+ * ```tsx
+ * <FormNavigation.Submit asChild loadingText={<Spinner />}>
+ *   <MyButton variant="success">Complete</MyButton>
+ * </FormNavigation.Submit>
+ * ```
+ */
+export declare const FormNavigationSubmit: import("react").ForwardRefExoticComponent<FormNavigationSubmitProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/form-navigation/Slot.d.ts

@@ -0,0 +1,20 @@
+import { type ReactNode, type HTMLAttributes } from 'react';
+export interface SlotProps extends HTMLAttributes<HTMLElement> {
+    children?: ReactNode;
+}
+/**
+ * Slot component for asChild pattern.
+ *
+ * Renders its child element and merges props from the Slot into the child.
+ * Used to allow custom components to be rendered in place of default elements.
+ *
+ * @example
+ * ```tsx
+ * // Instead of rendering a button, renders MyButton with merged props
+ * <Slot onClick={handleClick} disabled={true}>
+ *   <MyButton className="custom">Click me</MyButton>
+ * </Slot>
+ * // Result: <MyButton onClick={handleClick} disabled={true} className="custom">Click me</MyButton>
+ * ```
+ */
+export declare const Slot: import("react").ForwardRefExoticComponent<SlotProps & import("react").RefAttributes<HTMLElement>>;

package/dist/form-navigation/index.d.ts

@@ -1,12 +1,20 @@
 export { FormNavigation } from './FormNavigation';
 export { FormNavigationStep } from './FormNavigationStep';
 export { FormNavigationIndicator } from './FormNavigationIndicator';
-export { FormNavigationActions } from './FormNavigationActions';
+export { FormNavigationActions, useFormNavigationActions } from './FormNavigationActions';
 export { FormNavigationProgress } from './FormNavigationProgress';
+export { FormNavigationPrev } from './FormNavigationPrev';
+export { FormNavigationNext } from './FormNavigationNext';
+export { FormNavigationSubmit } from './FormNavigationSubmit';
+export { Slot } from './Slot';
+export type { SlotProps } from './Slot';
 export { useFormNavigation, FormNavigationContext } from './FormNavigationContext';
 export type { FormNavigationHandle, FormNavigationProps, FormNavigationConfig } from './types';
 export type { FormNavigationStepProps } from './FormNavigationStep';
 export type { FormNavigationContextValue } from './FormNavigationContext';
 export type { FormNavigationIndicatorProps, FormNavigationIndicatorStep, FormNavigationIndicatorStepWithState, FormNavigationIndicatorRenderProps, } from './FormNavigationIndicator';
-export type { FormNavigationActionsProps, FormNavigationActionsRenderProps, FormNavigationButtonProps, FormNavigationSubmitProps, } from './FormNavigationActions';
+export type { FormNavigationActionsProps, FormNavigationActionsRenderProps, FormNavigationButtonProps, FormNavigationSubmitProps as FormNavigationSubmitRenderProps, } from './FormNavigationActions';
+export type { FormNavigationPrevProps } from './FormNavigationPrev';
+export type { FormNavigationNextProps } from './FormNavigationNext';
+export type { FormNavigationSubmitProps } from './FormNavigationSubmit';
 export type { FormNavigationProgressProps, FormNavigationProgressRenderProps, } from './FormNavigationProgress';

package/dist/form-navigation.js

@@ -1,10 +1,15 @@
-import { F as i, c as t, e as r, b as s, d as n, a as g, u as m } from "./FormNavigation-3rg4tJyl.js";
+import { F as i, c as t, e as s, b as r, h as n, g, d as m, a as v, i as F, S as N, u as e, f as c } from "./FormNavigation-Di3Mss2W.js";
 export {
   i as FormNavigation,
   t as FormNavigationActions,
-  r as FormNavigationContext,
-  s as FormNavigationIndicator,
-  n as FormNavigationProgress,
-  g as FormNavigationStep,
-  m as useFormNavigation
+  s as FormNavigationContext,
+  r as FormNavigationIndicator,
+  n as FormNavigationNext,
+  g as FormNavigationPrev,
+  m as FormNavigationProgress,
+  v as FormNavigationStep,
+  F as FormNavigationSubmit,
+  N as Slot,
+  e as useFormNavigation,
+  c as useFormNavigationActions
 };

package/dist/index.js

@@ -1,5 +1,5 @@
 import { F as o, b as t, g as s, e as m, d as e, h as F, f as i, a as n, c as A, u as y, i as g, j as u } from "./FormArray-K2YVvq1u.js";
-import { F as x, c as N, e as d, b as C, d as I, a as c, u as p } from "./FormNavigation-3rg4tJyl.js";
+import { F as x, c as N, e as d, b as C, d as I, a as c, u as p } from "./FormNavigation-Di3Mss2W.js";
 export {
   o as FormArray,
   t as FormArrayAddButton,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reformer/ui",
-  "version": "1.0.0-beta.3",
+  "version": "1.0.0-beta.4",
   "description": "Headless UI components for @reformer/core - form arrays, multi-step wizards, and more",
   "type": "module",
   "main": "./dist/index.js",

package/dist/FormNavigation-3rg4tJyl.js

@@ -1,227 +0,0 @@
-import { jsx as f, Fragment as C } from "react/jsx-runtime";
-import { createContext as $, useContext as z, forwardRef as J, useState as V, useCallback as m, useImperativeHandle as K, useMemo as O, Children as L, isValidElement as U, cloneElement as W } from "react";
-import { validateForm as Y } from "@reformer/core/validators";
-const G = $(null);
-function P() {
-  const e = z(G);
-  if (!e)
-    throw new Error("useFormNavigation must be used within FormNavigation");
-  return e;
-}
-function x({
-  component: e,
-  control: i,
-  _stepIndex: a,
-  ...s
-}) {
-  const { currentStep: o } = P();
-  return a === void 0 || o !== a ? null : /* @__PURE__ */ f(e, { control: i, ...s });
-}
-x.displayName = "FormNavigation.Step";
-function M({ steps: e, children: i }) {
-  if (typeof i != "function")
-    throw new Error(
-      "FormNavigation.Indicator requires children as a render function. Example: <FormNavigation.Indicator steps={STEPS}>{({ steps }) => <YourUI />}</FormNavigation.Indicator>"
-    );
-  const { currentStep: a, totalSteps: s, completedSteps: o, goToStep: u } = P(), c = {
-    steps: e.map((t) => ({
-      ...t,
-      isCurrent: a === t.number,
-      isCompleted: o.includes(t.number),
-      canNavigate: t.number === 1 || o.includes(t.number - 1)
-    })),
-    goToStep: u,
-    currentStep: a,
-    totalSteps: s,
-    completedSteps: o
-  };
-  return /* @__PURE__ */ f(C, { children: i(c) });
-}
-M.displayName = "FormNavigation.Indicator";
-function j({ onSubmit: e, children: i }) {
-  if (typeof i != "function")
-    throw new Error(
-      "FormNavigation.Actions requires children as a render function. Example: <FormNavigation.Actions>{({ prev, next }) => <YourUI />}</FormNavigation.Actions>"
-    );
-  const { isFirstStep: a, isLastStep: s, isValidating: o, isSubmitting: u, goToNextStep: p, goToPreviousStep: c } = P(), t = o || u;
-  return /* @__PURE__ */ f(C, { children: i({
-    prev: {
-      onClick: c,
-      disabled: t
-    },
-    next: {
-      onClick: () => p(),
-      disabled: t
-    },
-    submit: {
-      onClick: () => e?.(),
-      disabled: t,
-      isSubmitting: u
-    },
-    isFirstStep: a,
-    isLastStep: s,
-    isValidating: o,
-    isSubmitting: u
-  }) });
-}
-j.displayName = "FormNavigation.Actions";
-function B({ children: e }) {
-  if (typeof e != "function")
-    throw new Error(
-      "FormNavigation.Progress requires children as a render function. Example: <FormNavigation.Progress>{({ current, total }) => <YourUI />}</FormNavigation.Progress>"
-    );
-  const { currentStep: i, totalSteps: a, completedSteps: s, isFirstStep: o, isLastStep: u } = P(), p = {
-    current: i,
-    total: a,
-    percent: Math.round(i / a * 100),
-    completedCount: s.length,
-    isFirstStep: o,
-    isLastStep: u
-  };
-  return /* @__PURE__ */ f(C, { children: e(p) });
-}
-B.displayName = "FormNavigation.Progress";
-function Q({ form: e, config: i, children: a, onStepChange: s, scrollToTop: o = !0 }, u) {
-  const p = (n) => {
-    let r = 0;
-    return L.forEach(n, (l) => {
-      if (U(l))
-        if (l.type === x)
-          r += 1;
-        else {
-          const q = l.props;
-          q.children && (r += p(q.children));
-        }
-    }), r;
-  }, c = p(a), [t, v] = V(1), [d, D] = V([]), [g, S] = V(!1), E = e.submitting.value, N = m(async () => {
-    const n = i.stepValidations[t];
-    if (!n)
-      return console.warn(`No validation schema for step ${t}`), !0;
-    S(!0);
-    try {
-      return await Y(e, n);
-    } finally {
-      S(!1);
-    }
-  }, [e, t, i.stepValidations]), F = m(async () => {
-    if (!await N())
-      return e.markAsTouched(), !1;
-    if (d.includes(t) || D((r) => [...r, t]), t < c) {
-      const r = t + 1;
-      v(r), s?.(r), o && window.scrollTo({ top: 0, behavior: "smooth" });
-    }
-    return !0;
-  }, [
-    N,
-    t,
-    d,
-    c,
-    e,
-    s,
-    o
-  ]), h = m(() => {
-    if (t > 1) {
-      const n = t - 1;
-      v(n), s?.(n), o && window.scrollTo({ top: 0, behavior: "smooth" });
-    }
-  }, [t, s, o]), b = m(
-    (n) => (n === 1 || d.includes(n - 1)) && n >= 1 && n <= c ? (v(n), s?.(n), o && window.scrollTo({ top: 0, behavior: "smooth" }), !0) : !1,
-    [d, c, s, o]
-  ), A = m(
-    async (n) => {
-      S(!0);
-      try {
-        return await Y(e, i.fullValidation) ? e.submit(n) : (e.markAsTouched(), null);
-      } finally {
-        S(!1);
-      }
-    },
-    [e, i.fullValidation]
-  ), w = t === 1, y = t === c;
-  K(
-    u,
-    () => ({
-      currentStep: t,
-      completedSteps: d,
-      validateCurrentStep: N,
-      goToNextStep: F,
-      goToPreviousStep: h,
-      goToStep: b,
-      submit: A,
-      isFirstStep: w,
-      isLastStep: y,
-      isValidating: g
-    }),
-    [
-      t,
-      d,
-      N,
-      F,
-      h,
-      b,
-      A,
-      w,
-      y,
-      g
-    ]
-  );
-  const H = O(
-    () => ({
-      // State
-      currentStep: t,
-      totalSteps: c,
-      completedSteps: d,
-      isFirstStep: w,
-      isLastStep: y,
-      isValidating: g,
-      isSubmitting: E,
-      form: e,
-      // Navigation methods
-      goToNextStep: F,
-      goToPreviousStep: h,
-      goToStep: b
-    }),
-    [
-      t,
-      c,
-      d,
-      w,
-      y,
-      g,
-      E,
-      e,
-      F,
-      h,
-      b
-    ]
-  );
-  let k = 0;
-  const T = (n) => L.map(n, (r) => {
-    if (!U(r))
-      return r;
-    const l = r.props;
-    return r.type === x ? (k += 1, W(r, {
-      ...l,
-      _stepIndex: k
-      // 1-based indexing
-    })) : typeof l.children == "function" ? r : l.children ? W(r, {
-      ...l,
-      children: T(l.children)
-    }) : r;
-  }), R = T(a);
-  return /* @__PURE__ */ f(G.Provider, { value: H, children: R });
-}
-const X = J(Q), I = X;
-I.Step = x;
-I.Indicator = M;
-I.Actions = j;
-I.Progress = B;
-export {
-  I as F,
-  x as a,
-  M as b,
-  j as c,
-  B as d,
-  G as e,
-  P as u
-};