@reformer/cdk 1.0.0-beta.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Alexandr Bukhtatyy
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,96 @@
+# @reformer/cdk
+
+Headless UI components for `@reformer/core` - build accessible, fully customizable form interfaces.
+
+## Features
+
+- **Headless** - No default styles, complete design freedom
+- **Compound Components** - Declarative, composable API
+- **Render Props** - Full control over rendering
+- **TypeScript** - Fully typed with generics support
+- **Tree-shakable** - Import only what you need
+
+## Installation
+
+```bash
+npm install @reformer/cdk @reformer/core
+```
+
+## Components
+
+### FormArray
+
+Manage dynamic form arrays with add/remove functionality.
+
+```tsx
+import { FormArray } from '@reformer/cdk/form-array';
+
+<FormArray.Root control={form.items}>
+  <FormArray.Empty>
+    <p>No items yet</p>
+  </FormArray.Empty>
+
+  <FormArray.List>
+    {({ control, index, remove }) => (
+      <div>
+        <span>Item #{index + 1}</span>
+        <ItemForm control={control} />
+        <button onClick={remove}>Remove</button>
+      </div>
+    )}
+  </FormArray.List>
+
+  <FormArray.AddButton>Add Item</FormArray.AddButton>
+</FormArray.Root>;
+```
+
+### FormWizard
+
+Build multi-step form wizards with validation.
+
+```tsx
+import { FormWizard } from '@reformer/cdk/form-wizard';
+
+<FormWizard form={form} config={config}>
+  <FormWizard.Indicator steps={STEPS}>
+    {({ steps, goToStep }) => (
+      <nav>
+        {steps.map((step) => (
+          <button
+            key={step.number}
+            onClick={() => goToStep(step.number)}
+            disabled={!step.canNavigate}
+          >
+            {step.title}
+          </button>
+        ))}
+      </nav>
+    )}
+  </FormWizard.Indicator>
+
+  <FormWizard.Step component={Step1} control={form} />
+  <FormWizard.Step component={Step2} control={form} />
+
+  <FormWizard.Actions onSubmit={handleSubmit}>
+    {({ prev, next, submit, isFirstStep, isLastStep }) => (
+      <div>
+        {!isFirstStep && <button {...prev}>Back</button>}
+        {!isLastStep ? <button {...next}>Next</button> : <button {...submit}>Submit</button>}
+      </div>
+    )}
+  </FormWizard.Actions>
+</FormWizard>;
+```
+
+## Hooks
+
+For full customization, use the hooks directly:
+
+```tsx
+import { useFormArray } from '@reformer/cdk/form-array';
+import { useFormWizard } from '@reformer/cdk/form-wizard';
+```
+
+## License
+
+MIT

package/dist/FormArray-CBT-1kKN.js

@@ -0,0 +1,120 @@
+import { jsx as n, Fragment as u } from "react/jsx-runtime";
+import { useMemo as C, createContext as d, useContext as y, createElement as x, forwardRef as c, useImperativeHandle as I } from "react";
+import { useFormControl as E } from "@reformer/core";
+import { S as A } from "./Slot-YDt2BEtP.js";
+function R(r) {
+  const { length: t } = E(r);
+  return {
+    items: C(
+      () => r.map((o, e) => ({
+        control: o,
+        index: e,
+        id: o.id ?? e,
+        remove: () => r.removeAt(e)
+      })),
+      [r, t]
+    ),
+    length: t,
+    isEmpty: t === 0,
+    add: (o) => r.push(o),
+    clear: () => r.clear(),
+    insert: (o, e) => r.insert(o, e)
+  };
+}
+const F = d(null), p = d(null);
+function i() {
+  const r = y(F);
+  if (!r)
+    throw new Error(
+      "FormArray.* components must be used within FormArray.Root or RenderSchema FormArray"
+    );
+  return r;
+}
+function f() {
+  const r = y(p);
+  if (!r)
+    throw new Error(
+      "FormArray.Item* components must be used within FormArray.List or item template"
+    );
+  return r;
+}
+function w({
+  children: r,
+  className: t,
+  as: m = "div"
+}) {
+  const { items: o } = i(), e = o.map((s) => /* @__PURE__ */ n(p.Provider, { value: s, children: r(s) }, s.id));
+  return t ? x(m, { className: t }, e) : /* @__PURE__ */ n(u, { children: e });
+}
+function B({ children: r, initialValue: t, asChild: m = !1, ...o }, e) {
+  const { add: s } = i();
+  return /* @__PURE__ */ n(
+    m ? A : "button",
+    {
+      ref: e,
+      type: m ? void 0 : "button",
+      onClick: () => s(t),
+      ...o,
+      children: r
+    }
+  );
+}
+const l = c(B);
+l.displayName = "FormArray.AddButton";
+const b = l, v = c(
+  ({ children: r, asChild: t = !1, ...m }, o) => {
+    const { remove: e } = f();
+    return /* @__PURE__ */ n(t ? A : "button", { ref: o, type: t ? void 0 : "button", onClick: e, ...m, children: r });
+  }
+);
+v.displayName = "FormArray.RemoveButton";
+function g({ children: r }) {
+  const { isEmpty: t } = i();
+  return t ? /* @__PURE__ */ n(u, { children: r }) : null;
+}
+function S({ render: r }) {
+  const { length: t } = i();
+  return r ? /* @__PURE__ */ n(u, { children: r(t) }) : /* @__PURE__ */ n(u, { children: t });
+}
+function L({ render: r }) {
+  const { index: t } = f();
+  return r ? /* @__PURE__ */ n(u, { children: r(t) }) : /* @__PURE__ */ n(u, { children: t + 1 });
+}
+function j({ control: r, children: t }, m) {
+  const o = R(r);
+  return I(
+    m,
+    () => ({
+      add: o.add,
+      clear: o.clear,
+      insert: o.insert,
+      removeAt: (e) => r.removeAt(e),
+      length: o.length,
+      isEmpty: o.isEmpty,
+      at: (e) => r.at(e)
+    }),
+    [o, r]
+  ), /* @__PURE__ */ n(F.Provider, { value: { ...o, control: r }, children: t });
+}
+const h = c(j), a = h;
+a.Root = h;
+a.List = w;
+a.AddButton = b;
+a.RemoveButton = v;
+a.Empty = g;
+a.Count = S;
+a.ItemIndex = L;
+export {
+  a as F,
+  w as a,
+  b,
+  v as c,
+  g as d,
+  S as e,
+  L as f,
+  F as g,
+  p as h,
+  i,
+  f as j,
+  R as u
+};

package/dist/FormWizard-DLDm4FJM.js

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

package/dist/Slot-YDt2BEtP.js

@@ -0,0 +1,27 @@
+import { forwardRef as r, Children as i, isValidElement as c, cloneElement as d } from "react";
+function a(l, s) {
+  const n = { ...l };
+  for (const e of Object.keys(s)) {
+    const t = l[e], o = s[e];
+    e.startsWith("on") && typeof t == "function" && typeof o == "function" ? n[e] = (...f) => {
+      o(...f), t(...f);
+    } : e === "className" && typeof t == "string" && typeof o == "string" ? n[e] = [o, t].filter(Boolean).join(" ") : e === "style" && typeof t == "object" && typeof o == "object" ? n[e] = { ...o, ...t } : e === "disabled" ? n[e] = !!t || !!o : o !== void 0 && (n[e] = o);
+  }
+  return n;
+}
+const p = r(
+  ({ children: l, ...s }, n) => {
+    const e = i.only(l);
+    if (!c(e))
+      return null;
+    const t = e.props, o = a(s, t), f = e.ref;
+    return d(e, {
+      ...o,
+      ref: n || f
+    });
+  }
+);
+p.displayName = "Slot";
+export {
+  p as S
+};