@reformer/cdk 1.0.0-beta.1

package/dist/components/form-wizard/types.d.ts

@@ -0,0 +1,108 @@
+import { ReactNode } from 'react';
+import { FormProxy, ValidationSchemaFn } from '@reformer/core';
+/**
+ * Configuration for multi-step form navigation
+ * Note: totalSteps is inferred from children count
+ */
+export interface FormWizardConfig<T extends Record<string, any>> {
+    /** Validation schemas per step (1-based indexing) */
+    stepValidations: Record<number, ValidationSchemaFn<T>>;
+    /** Full validation schema for submit */
+    fullValidation: ValidationSchemaFn<T>;
+}
+/**
+ * Handle для внешнего управления {@link FormWizard} через `useRef`.
+ *
+ * Используется, когда submit/навигация инициируется снаружи дерева Wizard:
+ * шапка страницы, breadcrumbs, side-effect от API. Получают через
+ * `useRef<FormWizardHandle<T>>(null)` и передают в `<FormWizard ref={...}>`.
+ *
+ * - `goToNextStep()` / `submit()` запускают валидацию текущего шага / всей
+ *   формы соответственно.
+ * - `goToStep(n)` возвращает `false`, если предыдущий шаг не в `completedSteps`
+ *   (защита от пропуска валидации) либо `n` вне диапазона `[1; totalSteps]`.
+ * - `submit()` возвращает `R | null`. `null` — форма не прошла `fullValidation`.
+ *
+ * @typeParam T - Тип значения корневой формы (`FormProxy<T>`).
+ *
+ * @example «Сохранить и выйти» поверх wizard
+ * ```tsx
+ * import { useRef } from 'react';
+ * import { FormWizard, type FormWizardHandle } from '@reformer/cdk/form-wizard';
+ *
+ * function Page({ form, config }: Props) {
+ *   const navRef = useRef<FormWizardHandle<CreditApplication>>(null);
+ *
+ *   const handleSaveAndExit = async () => {
+ *     const saved = await navRef.current?.submit((values) => api.saveDraft(values));
+ *     if (saved) router.push('/dashboard');
+ *   };
+ *
+ *   return (
+ *     <>
+ *       <header>
+ *         <button onClick={handleSaveAndExit}>Сохранить и выйти</button>
+ *       </header>
+ *       <FormWizard ref={navRef} form={form} config={config}>
+ *         <FormWizard.Step component={Step1} control={form} />
+ *         <FormWizard.Step component={Step2} control={form} />
+ *       </FormWizard>
+ *     </>
+ *   );
+ * }
+ * ```
+ *
+ * @example Программный переход на шаг с проверкой доступности
+ * ```tsx
+ * const handleClickContacts = () => {
+ *   const ok = navRef.current?.goToStep(3);
+ *   if (!ok) toast('Сначала заполните предыдущие шаги');
+ * };
+ *
+ * // Или с явной валидацией текущего шага:
+ * const moveOn = async () => {
+ *   const valid = await navRef.current?.validateCurrentStep();
+ *   if (!valid) return;
+ *   await navRef.current?.goToNextStep();
+ * };
+ * ```
+ */
+export interface FormWizardHandle<T extends Record<string, any>> {
+    /** Form instance — используется в RenderBehaviorFn для доступа к форме через ref */
+    form: FormProxy<T>;
+    /** Current step (1-based) */
+    currentStep: number;
+    /** Completed steps */
+    completedSteps: number[];
+    /** Validate current step */
+    validateCurrentStep: () => Promise<boolean>;
+    /** Go to next step (with validation) */
+    goToNextStep: () => Promise<boolean>;
+    /** Go to previous step */
+    goToPreviousStep: () => void;
+    /** Go to specific step */
+    goToStep: (step: number) => boolean;
+    /** Submit form (with full validation) */
+    submit: <R>(onSubmit: (values: T) => Promise<R> | R) => Promise<R | null>;
+    /** Is this the first step */
+    isFirstStep: boolean;
+    /** Is this the last step */
+    isLastStep: boolean;
+    /** Is validation in progress */
+    isValidating: boolean;
+}
+/**
+ * Props for FormWizard component
+ */
+export interface FormWizardProps<T extends Record<string, any>> {
+    /** Form instance */
+    form: FormProxy<T>;
+    /** Step configuration (validation schemas) */
+    config: FormWizardConfig<T>;
+    /** Children (Step components, Indicator, Actions, Progress, or any ReactNode) */
+    children?: ReactNode;
+    /** Callback when step changes */
+    onStepChange?: (step: number) => void;
+    /** Scroll to top on step change */
+    scrollToTop?: boolean;
+}

package/dist/form-array.d.ts

@@ -0,0 +1,2 @@
+export * from './components/form-array/index'
+export {}

package/dist/form-array.js

@@ -0,0 +1,15 @@
+import { F as o, b as t, g as m, e as s, d as e, h as y, f as A, a as F, c as n, u, i as x, j as C } from "./FormArray-CBT-1kKN.js";
+export {
+  o as FormArray,
+  t as FormArrayAddButton,
+  m as FormArrayContext,
+  s as FormArrayCount,
+  e as FormArrayEmpty,
+  y as FormArrayItemContext,
+  A as FormArrayItemIndex,
+  F as FormArrayList,
+  n as FormArrayRemoveButton,
+  u as useFormArray,
+  x as useFormArrayContext,
+  C as useFormArrayItemContext
+};

package/dist/form-field.d.ts

@@ -0,0 +1,2 @@
+export * from './components/form-field/index'
+export {}

package/dist/form-field.js

@@ -0,0 +1,12 @@
+import { F as e, f as r, c as s, e as a, d as i, b as l, a as d, u as m, g as t } from "./useFormField-DV396Bxa.js";
+export {
+  e as FormField,
+  r as FormFieldContext,
+  s as FormFieldControl,
+  a as FormFieldDescription,
+  i as FormFieldError,
+  l as FormFieldLabel,
+  d as FormFieldRoot,
+  m as useFormField,
+  t as useFormFieldContext
+};

package/dist/form-wizard.d.ts

@@ -0,0 +1,2 @@
+export * from './components/form-wizard/index'
+export {}

package/dist/form-wizard.js

@@ -0,0 +1,22 @@
+import { F as e, c as d, e as F, b as z, h as W, g as n, d as p, a as u, i as x, u as S, f as c } from "./FormWizard-DLDm4FJM.js";
+import { jsx as a, Fragment as o } from "react/jsx-runtime";
+import { S as g } from "./Slot-YDt2BEtP.js";
+function s({ children: r }) {
+  return /* @__PURE__ */ a(o, { children: r });
+}
+s.displayName = "Step";
+export {
+  e as FormWizard,
+  d as FormWizardActions,
+  F as FormWizardContext,
+  z as FormWizardIndicator,
+  W as FormWizardNext,
+  n as FormWizardPrev,
+  p as FormWizardProgress,
+  u as FormWizardStep,
+  x as FormWizardSubmit,
+  g as Slot,
+  s as Step,
+  S as useFormWizard,
+  c as useFormWizardActions
+};

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+export { FormArray, FormArrayList, FormArrayAddButton, FormArrayRemoveButton, FormArrayEmpty, FormArrayCount, FormArrayItemIndex, useFormArray, FormArrayContext, FormArrayItemContext, useFormArrayContext, useFormArrayItemContext, } from './components/form-array';
+export type { FormArrayHandle, FormArrayItem, UseFormArrayReturn, FormArrayRootProps, FormArrayListProps, FormArrayItemRenderProps, FormArrayAddButtonProps, FormArrayRemoveButtonProps, FormArrayEmptyProps, FormArrayCountProps, FormArrayItemIndexProps, FormArrayContextValue, FormArrayItemContextValue, } from './components/form-array';
+export { FormField, FormFieldRoot, FormFieldLabel, FormFieldControl, FormFieldError, FormFieldDescription, useFormField, FormFieldContext, useFormFieldContext, } from './components/form-field';
+export type { FormFieldIds, FormFieldContextValue, FormFieldRootProps, FormFieldLabelProps, FormFieldControlProps, FormFieldErrorProps, FormFieldDescriptionProps, UseFormFieldReturn, UseFormFieldState, UseFormFieldLabelProps, UseFormFieldControlProps, UseFormFieldErrorProps, UseFormFieldDescriptionProps, } from './components/form-field';
+export { FormWizard, FormWizardStep, FormWizardIndicator, FormWizardActions, FormWizardProgress, useFormWizard, FormWizardContext, } from './components/form-wizard';
+export type { FormWizardHandle, FormWizardProps, FormWizardConfig, FormWizardStepProps, FormWizardContextValue, FormWizardIndicatorProps, FormWizardIndicatorStep, FormWizardIndicatorStepWithState, FormWizardIndicatorRenderProps, FormWizardActionsProps, FormWizardActionsRenderProps, FormWizardButtonProps, FormWizardSubmitProps, FormWizardProgressProps, FormWizardProgressRenderProps, } from './components/form-wizard';

package/dist/index.js

@@ -0,0 +1,33 @@
+import { F as a, b as F, g as s, e, d as m, h as t, f as d, a as i, c as n, u as A, i as y, j as u } from "./FormArray-CBT-1kKN.js";
+import { F as x, f as C, c as z, e as W, d as c, b as p, a as f, u as I, g as b } from "./useFormField-DV396Bxa.js";
+import { F as B, c as E, e as L, b as R, d as h, a as j, u as v } from "./FormWizard-DLDm4FJM.js";
+export {
+  a as FormArray,
+  F as FormArrayAddButton,
+  s as FormArrayContext,
+  e as FormArrayCount,
+  m as FormArrayEmpty,
+  t as FormArrayItemContext,
+  d as FormArrayItemIndex,
+  i as FormArrayList,
+  n as FormArrayRemoveButton,
+  x as FormField,
+  C as FormFieldContext,
+  z as FormFieldControl,
+  W as FormFieldDescription,
+  c as FormFieldError,
+  p as FormFieldLabel,
+  f as FormFieldRoot,
+  B as FormWizard,
+  E as FormWizardActions,
+  L as FormWizardContext,
+  R as FormWizardIndicator,
+  h as FormWizardProgress,
+  j as FormWizardStep,
+  A as useFormArray,
+  y as useFormArrayContext,
+  u as useFormArrayItemContext,
+  I as useFormField,
+  b as useFormFieldContext,
+  v as useFormWizard
+};

package/dist/useFormField-DV396Bxa.js

@@ -0,0 +1,232 @@
+import { jsx as p, jsxs as S, Fragment as P } from "react/jsx-runtime";
+import { createContext as T, useContext as V, useId as q, useMemo as v, forwardRef as g } from "react";
+import { useFormControl as E } from "@reformer/core";
+import { S as C } from "./Slot-YDt2BEtP.js";
+const $ = T(null);
+function w() {
+  const r = V($);
+  if (!r)
+    throw new Error(
+      "FormField.* components must be used within <FormField.Root>. Wrap your field with <FormField.Root control={control}>."
+    );
+  return r;
+}
+function y({
+  control: r,
+  children: a,
+  id: s,
+  hasDescription: d = !1
+}) {
+  const e = q(), i = s ?? e, c = v(
+    () => ({
+      controlId: `control-${i}`,
+      labelId: `label-${i}`,
+      descriptionId: `desc-${i}`,
+      errorId: `error-${i}`
+    }),
+    [i]
+  ), o = E(r), t = v(() => {
+    const {
+      value: u,
+      errors: l,
+      pending: n,
+      disabled: I,
+      valid: F,
+      invalid: b,
+      touched: h,
+      shouldShowError: m,
+      componentProps: x
+    } = o;
+    return {
+      value: u,
+      errors: l,
+      pending: n,
+      disabled: I,
+      valid: F,
+      invalid: b,
+      touched: h,
+      shouldShowError: m,
+      error: m ? l[0]?.message : void 0,
+      label: x.label,
+      required: !!x.required,
+      componentProps: x,
+      control: r,
+      ids: c,
+      hasDescription: d
+    };
+  }, [o, r, c, d]);
+  return /* @__PURE__ */ p($.Provider, { value: t, children: a });
+}
+y.displayName = "FormField.Root";
+const k = g(
+  ({ asChild: r = !1, children: a, forceRender: s = !1, ...d }, e) => {
+    const { label: i, required: c, ids: o } = w(), t = a ?? i;
+    return !t && !s ? null : /* @__PURE__ */ S(r ? C : "label", { ref: e, id: o.labelId, htmlFor: r ? void 0 : o.controlId, ...d, children: [
+      t,
+      c && /* @__PURE__ */ p("span", { "aria-hidden": "true", children: " *" })
+    ] });
+  }
+);
+k.displayName = "FormField.Label";
+const A = g(
+  ({ asChild: r = !1, children: a, ...s }, d) => {
+    const {
+      control: e,
+      value: i,
+      disabled: c,
+      shouldShowError: o,
+      errors: t,
+      required: u,
+      ids: l,
+      hasDescription: n,
+      componentProps: I
+    } = w(), F = [
+      n ? l.descriptionId : null,
+      o && t.length > 0 ? l.errorId : null
+    ].filter(Boolean).join(" ") || void 0, b = {
+      id: l.controlId,
+      "aria-labelledby": l.labelId,
+      "aria-invalid": o ? !0 : void 0,
+      "aria-describedby": F,
+      "aria-errormessage": o && t.length > 0 ? l.errorId : void 0,
+      "aria-required": u ? !0 : void 0
+    };
+    if (a || r)
+      return /* @__PURE__ */ p(C, { ref: d, ...b, ...s, children: a });
+    const h = e.component;
+    return /* @__PURE__ */ p(
+      h,
+      {
+        ref: d,
+        ...I,
+        ...b,
+        ...s,
+        value: i,
+        disabled: c,
+        onChange: (m) => e.setValue(m),
+        onBlur: () => e.markAsTouched()
+      }
+    );
+  }
+);
+A.displayName = "FormField.Control";
+const B = g(
+  ({ asChild: r = !1, multi: a = !1, render: s, children: d, ...e }, i) => {
+    const { shouldShowError: c, errors: o, ids: t } = w();
+    if (!c || o.length === 0) return null;
+    const u = r ? C : "p";
+    return s ? /* @__PURE__ */ p(P, { children: o.map((l, n) => /* @__PURE__ */ p(
+      u,
+      {
+        id: n === 0 ? t.errorId : void 0,
+        role: "alert",
+        ...e,
+        children: s(l, n)
+      },
+      l.code ?? n
+    )) }) : a ? /* @__PURE__ */ p(P, { children: o.map((l, n) => /* @__PURE__ */ p(
+      u,
+      {
+        id: n === 0 ? t.errorId : void 0,
+        role: "alert",
+        ...e,
+        children: l.message
+      },
+      l.code ?? n
+    )) }) : /* @__PURE__ */ p(u, { ref: i, id: t.errorId, role: "alert", ...e, children: d ?? o[0].message });
+  }
+);
+B.displayName = "FormField.Error";
+const R = g(
+  ({ asChild: r = !1, children: a, ...s }, d) => {
+    const { ids: e } = w();
+    return /* @__PURE__ */ p(r ? C : "p", { ref: d, id: e.descriptionId, ...s, children: a });
+  }
+);
+R.displayName = "FormField.Description";
+const f = y;
+f.Root = y;
+f.Label = k;
+f.Control = A;
+f.Error = B;
+f.Description = R;
+function U(r, a) {
+  const s = q(), d = a ?? s, e = v(
+    () => ({
+      controlId: `control-${d}`,
+      labelId: `label-${d}`,
+      descriptionId: `desc-${d}`,
+      errorId: `error-${d}`
+    }),
+    [d]
+  ), i = E(r);
+  return v(() => {
+    const {
+      value: c,
+      errors: o,
+      pending: t,
+      disabled: u,
+      valid: l,
+      invalid: n,
+      touched: I,
+      shouldShowError: F,
+      componentProps: b
+    } = i, h = !!b.required;
+    return {
+      ids: e,
+      labelProps: {
+        id: e.labelId,
+        htmlFor: e.controlId
+      },
+      controlProps: {
+        id: e.controlId,
+        value: c,
+        disabled: u,
+        "aria-labelledby": e.labelId,
+        "aria-invalid": F ? !0 : void 0,
+        "aria-errormessage": F && o.length > 0 ? e.errorId : void 0,
+        "aria-required": h ? !0 : void 0,
+        onChange: (m) => r.setValue(m),
+        onBlur: () => r.markAsTouched()
+      },
+      errorProps: {
+        id: e.errorId,
+        role: "alert"
+      },
+      descriptionProps: {
+        id: e.descriptionId
+      },
+      state: {
+        value: c,
+        errors: o,
+        error: F ? o[0]?.message : void 0,
+        isPending: t,
+        isDisabled: u,
+        isValid: l,
+        isInvalid: n,
+        isTouched: I,
+        shouldShowError: F,
+        label: b.label,
+        required: h,
+        componentProps: b
+      },
+      actions: {
+        setValue: (m) => r.setValue(m),
+        markAsTouched: () => r.markAsTouched(),
+        markAsUntouched: () => r.markAsUntouched(),
+        reset: (m) => r.reset(m)
+      }
+    };
+  }, [i, r, e]);
+}
+export {
+  f as F,
+  y as a,
+  k as b,
+  A as c,
+  B as d,
+  R as e,
+  $ as f,
+  w as g,
+  U as u
+};