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

package/dist/FormNavigation-CGRjMcNs.js

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

package/dist/form-navigation.js

@@ -1,4 +1,4 @@
-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";
+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-CGRjMcNs.js";
 export {
   i as FormNavigation,
   t as FormNavigationActions,

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-Di3Mss2W.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-CGRjMcNs.js";
 export {
   o as FormArray,
   t as FormArrayAddButton,

package/package.json

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

package/dist/FormNavigation-Di3Mss2W.js

@@ -1,330 +0,0 @@
-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
-};