@reformer/cdk 1.0.0-beta.1

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

@@ -0,0 +1,98 @@
+import { CSSProperties, ReactNode } from 'react';
+/**
+ * Props for a navigation button (prev/next)
+ */
+export interface FormWizardButtonProps {
+    /** Click handler */
+    onClick: () => void;
+    /** Whether the button is disabled */
+    disabled: boolean;
+}
+/**
+ * Props for the submit button
+ */
+export interface FormWizardSubmitProps extends FormWizardButtonProps {
+    /** Whether form is currently submitting */
+    isSubmitting: boolean;
+}
+/**
+ * Render props passed to children function
+ */
+export interface FormWizardActionsRenderProps {
+    /** Props for the "Previous" button */
+    prev: FormWizardButtonProps;
+    /** Props for the "Next" button */
+    next: FormWizardButtonProps;
+    /** Props for the "Submit" button */
+    submit: FormWizardSubmitProps;
+    /** Whether current step is the first step */
+    isFirstStep: boolean;
+    /** Whether current step is the last step */
+    isLastStep: boolean;
+    /** Whether validation is in progress */
+    isValidating: boolean;
+    /** Whether form is submitting */
+    isSubmitting: boolean;
+}
+/**
+ * Render function type for headless mode
+ */
+type RenderFunction = (props: FormWizardActionsRenderProps) => ReactNode;
+/**
+ * Props for FormWizard.Actions component
+ */
+export interface FormWizardActionsProps {
+    /** Submit handler (called on last step) */
+    onSubmit?: () => void | Promise<void>;
+    /** 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 FormWizardActionsContextValue {
+    onSubmit?: () => void | Promise<void>;
+}
+/**
+ * Hook to access Actions context (onSubmit handler)
+ *
+ * Must be used within FormWizard.Actions component.
+ * Used internally by FormWizard.Submit.
+ */
+export declare function useFormWizardActions(): FormWizardActionsContextValue;
+/**
+ * `FormWizard.Actions` — контейнер кнопок навигации мастера. Поддерживает два режима:
+ * compound-children (`FormWizard.Prev`/`Next`/`Submit`) и render-props.
+ *
+ * Render-props получают: `prev`, `next`, `submit` (все с `onClick`/`disabled`),
+ * `isFirstStep`, `isLastStep`, `isValidating`, `isSubmitting`.
+ *
+ * @example Compound mode
+ * ```tsx
+ * <FormWizard.Actions onSubmit={handleSubmit}>
+ *   <FormWizard.Prev>Back</FormWizard.Prev>
+ *   <FormWizard.Next>Next</FormWizard.Next>
+ *   <FormWizard.Submit loadingText="Submitting...">Submit</FormWizard.Submit>
+ * </FormWizard.Actions>
+ * ```
+ *
+ * @example Render-props mode
+ * ```tsx
+ * <FormWizard.Actions onSubmit={handleSubmit}>
+ *   {({ prev, next, submit, isFirstStep, isLastStep }) => (
+ *     <div className="flex justify-between">
+ *       {!isFirstStep && <button onClick={prev.onClick} disabled={prev.disabled}>Back</button>}
+ *       {isLastStep
+ *         ? <button onClick={submit.onClick} disabled={submit.disabled}>{submit.isSubmitting ? '…' : 'Submit'}</button>
+ *         : <button onClick={next.onClick} disabled={next.disabled}>Next</button>}
+ *     </div>
+ *   )}
+ * </FormWizard.Actions>
+ * ```
+ */
+export declare function FormWizardActions({ onSubmit, children, className, style, }: FormWizardActionsProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace FormWizardActions {
+    var displayName: string;
+}
+export {};

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

@@ -0,0 +1,84 @@
+import { FormProxy } from '@reformer/core';
+/**
+ * Context value for FormWizard
+ * Shares navigation state and methods with child components
+ */
+export interface FormWizardContextValue<T extends Record<string, any>> {
+    /** Current step (1-based) */
+    currentStep: number;
+    /** Total number of steps */
+    totalSteps: number;
+    /** Completed steps */
+    completedSteps: number[];
+    /** Is this the first step */
+    isFirstStep: boolean;
+    /** Is this the last step */
+    isLastStep: boolean;
+    /** Is validation in progress */
+    isValidating: boolean;
+    /** Is form submitting */
+    isSubmitting: boolean;
+    /** Form instance */
+    form: FormProxy<T>;
+    /** Go to next step (with validation) */
+    goToNextStep: () => Promise<boolean>;
+    /** Go to previous step */
+    goToPreviousStep: () => void;
+    /** Go to specific step */
+    goToStep: (step: number) => boolean;
+}
+/**
+ * React context, который снабжает дочерние компоненты `FormWizard` (Step,
+ * Actions, Indicator, Progress) текущим состоянием мастера. Создаётся
+ * `FormWizard`. Читать через `useFormWizard()`.
+ *
+ * @example
+ * ```tsx
+ * import { FormWizardContext } from '@reformer/cdk/form-wizard';
+ *
+ * function CurrentStep() {
+ *   const ctx = useContext(FormWizardContext);
+ *   return <span>step {ctx?.currentStep}</span>;
+ * }
+ * ```
+ */
+export declare const FormWizardContext: import('react').Context<FormWizardContextValue<any> | null>;
+/**
+ * Хук для доступа к контексту {@link FormWizard} из любого потомка.
+ *
+ * Возвращает текущее состояние мастера (`currentStep`, `totalSteps`,
+ * `completedSteps`, `isFirstStep`, `isLastStep`, `isValidating`, `isSubmitting`,
+ * `form`) и методы навигации (`goToNextStep`, `goToPreviousStep`, `goToStep`).
+ * Бросает исключение, если вызван вне `<FormWizard>`.
+ *
+ * Для внешнего управления (вне дерева Wizard) используйте
+ * {@link FormWizardHandle} через `useRef`.
+ *
+ * @typeParam T - Тип корневой формы (`FormProxy<T>`).
+ * @returns Текущий {@link FormWizardContextValue}.
+ * @throws Error если используется вне `<FormWizard>`.
+ *
+ * @example Минимальное использование внутри custom-step
+ * ```tsx
+ * function MyStepComponent() {
+ *   const { currentStep, isLastStep } = useFormWizard();
+ *   return <p>Шаг {currentStep}{isLastStep && ' — последний'}</p>;
+ * }
+ * ```
+ *
+ * @example Условный рендер кнопки на основе isValidating + completedSteps
+ * ```tsx
+ * function ProgressBadge() {
+ *   const { currentStep, totalSteps, completedSteps, isValidating } =
+ *     useFormWizard<CreditApplication>();
+ *
+ *   if (isValidating) return <span>Проверяем шаг {currentStep}...</span>;
+ *   return (
+ *     <span>
+ *       Завершено {completedSteps.length} из {totalSteps}
+ *     </span>
+ *   );
+ * }
+ * ```
+ */
+export declare function useFormWizard<T extends Record<string, any>>(): FormWizardContextValue<T>;

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

@@ -0,0 +1,118 @@
+import { ComponentType, ReactNode } from 'react';
+import { FormProxy } from '@reformer/core';
+/**
+ * Step definition for the indicator
+ */
+export interface FormWizardIndicatorStep {
+    /** Step number (1-based) */
+    number: number;
+    /** Step title/label */
+    title: string;
+    /** Optional icon */
+    icon?: string;
+    /** Component to render for this step, or a ReactNode (pre-rendered element) */
+    component?: ComponentType<{
+        control: FormProxy<unknown>;
+    } & Record<string, unknown>> | ReactNode;
+}
+/**
+ * Enriched step with state information
+ */
+export interface FormWizardIndicatorStepWithState extends FormWizardIndicatorStep {
+    /** Whether this is the current step */
+    isCurrent: boolean;
+    /** Whether this step is completed */
+    isCompleted: boolean;
+    /** Whether user can navigate to this step */
+    canNavigate: boolean;
+}
+/**
+ * Render props passed to children function
+ */
+export interface FormWizardIndicatorRenderProps {
+    /** Steps with their current state */
+    steps: FormWizardIndicatorStepWithState[];
+    /** Navigate to a specific step */
+    goToStep: (step: number) => boolean;
+    /** Current step number */
+    currentStep: number;
+    /** Total number of steps */
+    totalSteps: number;
+    /** Completed step numbers */
+    completedSteps: number[];
+}
+/**
+ * Props for FormWizard.Indicator component
+ */
+export interface FormWizardIndicatorProps {
+    /** Step definitions */
+    steps: FormWizardIndicatorStep[];
+    /** Render function for custom UI */
+    children: (props: FormWizardIndicatorRenderProps) => ReactNode;
+}
+/**
+ * FormWizard.Indicator - Headless component for step indicator
+ *
+ * Provides step data with state for building custom step indicators.
+ * No default UI - you build exactly what you need.
+ *
+ * ## Render Props
+ * - `steps` - array of steps with state (`isCurrent`, `isCompleted`, `canNavigate`)
+ * - `goToStep` - function to navigate to a step
+ * - `currentStep` - current step number
+ * - `totalSteps` - total number of steps
+ * - `completedSteps` - array of completed step numbers
+ *
+ * @example Basic stepper
+ * ```tsx
+ * <FormWizard.Indicator steps={STEPS}>
+ *   {({ steps, goToStep }) => (
+ *     <nav className="flex gap-2">
+ *       {steps.map((step) => (
+ *         <button
+ *           key={step.number}
+ *           onClick={() => goToStep(step.number)}
+ *           disabled={!step.canNavigate}
+ *           className={cn(
+ *             'px-4 py-2 rounded',
+ *             step.isCurrent && 'bg-blue-500 text-white',
+ *             step.isCompleted && 'bg-green-100',
+ *             !step.canNavigate && 'opacity-50 cursor-not-allowed'
+ *           )}
+ *         >
+ *           {step.icon} {step.title}
+ *         </button>
+ *       ))}
+ *     </nav>
+ *   )}
+ * </FormWizard.Indicator>
+ * ```
+ *
+ * @example With progress line
+ * ```tsx
+ * <FormWizard.Indicator steps={STEPS}>
+ *   {({ steps, goToStep }) => (
+ *     <div className="flex items-center">
+ *       {steps.map((step, index) => (
+ *         <Fragment key={step.number}>
+ *           <StepCircle
+ *             active={step.isCurrent}
+ *             completed={step.isCompleted}
+ *             onClick={() => step.canNavigate && goToStep(step.number)}
+ *           >
+ *             {step.isCompleted ? '✓' : step.number}
+ *           </StepCircle>
+ *           {index < steps.length - 1 && (
+ *             <StepLine completed={step.isCompleted} />
+ *           )}
+ *         </Fragment>
+ *       ))}
+ *     </div>
+ *   )}
+ * </FormWizard.Indicator>
+ * ```
+ */
+export declare function FormWizardIndicator({ steps, children }: FormWizardIndicatorProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace FormWizardIndicator {
+    var displayName: string;
+}

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

@@ -0,0 +1,35 @@
+import { ButtonHTMLAttributes, ReactNode } from 'react';
+/**
+ * Props for FormWizard.Next component
+ */
+export interface FormWizardNextProps 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;
+}
+/**
+ * FormWizard.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
+ * <FormWizard.Actions>
+ *   <FormWizard.Next>Continue</FormWizard.Next>
+ * </FormWizard.Actions>
+ * ```
+ *
+ * @example With custom button (asChild)
+ * ```tsx
+ * <FormWizard.Next asChild>
+ *   <MyButton variant="primary">
+ *     Next <ArrowRight />
+ *   </MyButton>
+ * </FormWizard.Next>
+ * ```
+ */
+export declare const FormWizardNext: import('react').ForwardRefExoticComponent<FormWizardNextProps & import('react').RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1,35 @@
+import { ButtonHTMLAttributes, ReactNode } from 'react';
+/**
+ * Props for FormWizard.Prev component
+ */
+export interface FormWizardPrevProps 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;
+}
+/**
+ * FormWizard.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
+ * <FormWizard.Actions>
+ *   <FormWizard.Prev>Back</FormWizard.Prev>
+ * </FormWizard.Actions>
+ * ```
+ *
+ * @example With custom button (asChild)
+ * ```tsx
+ * <FormWizard.Prev asChild>
+ *   <MyButton variant="ghost">
+ *     <ArrowLeft /> Back
+ *   </MyButton>
+ * </FormWizard.Prev>
+ * ```
+ */
+export declare const FormWizardPrev: import('react').ForwardRefExoticComponent<FormWizardPrevProps & import('react').RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1,83 @@
+import { ReactNode } from 'react';
+/**
+ * Render props passed to children function
+ */
+export interface FormWizardProgressRenderProps {
+    /** Current step number (1-based) */
+    current: number;
+    /** Total number of steps */
+    total: number;
+    /** Completion percentage (0-100) */
+    percent: number;
+    /** Number of completed steps */
+    completedCount: number;
+    /** Whether on first step */
+    isFirstStep: boolean;
+    /** Whether on last step */
+    isLastStep: boolean;
+}
+/**
+ * Props for FormWizard.Progress component
+ */
+export interface FormWizardProgressProps {
+    /** Render function for custom UI */
+    children: (props: FormWizardProgressRenderProps) => ReactNode;
+}
+/**
+ * FormWizard.Progress - Headless component for progress display
+ *
+ * Provides progress data for building custom progress indicators.
+ * No default UI - you build exactly what you need.
+ *
+ * ## Render Props
+ * - `current` - current step number
+ * - `total` - total number of steps
+ * - `percent` - completion percentage (0-100)
+ * - `completedCount` - number of completed steps
+ * - `isFirstStep` - whether on first step
+ * - `isLastStep` - whether on last step
+ *
+ * @example Simple text progress
+ * ```tsx
+ * <FormWizard.Progress>
+ *   {({ current, total, percent }) => (
+ *     <div className="text-sm text-gray-600">
+ *       Step {current} of {total} ({percent}% complete)
+ *     </div>
+ *   )}
+ * </FormWizard.Progress>
+ * ```
+ *
+ * @example Progress bar
+ * ```tsx
+ * <FormWizard.Progress>
+ *   {({ percent, current, total }) => (
+ *     <div className="space-y-2">
+ *       <div className="flex justify-between text-sm">
+ *         <span>Step {current}/{total}</span>
+ *         <span>{percent}%</span>
+ *       </div>
+ *       <div className="h-2 bg-gray-200 rounded-full overflow-hidden">
+ *         <div
+ *           className="h-full bg-blue-500 transition-all"
+ *           style={{ width: `${percent}%` }}
+ *         />
+ *       </div>
+ *     </div>
+ *   )}
+ * </FormWizard.Progress>
+ * ```
+ *
+ * @example Circular progress
+ * ```tsx
+ * <FormWizard.Progress>
+ *   {({ percent }) => (
+ *     <CircularProgress value={percent} />
+ *   )}
+ * </FormWizard.Progress>
+ * ```
+ */
+export declare function FormWizardProgress({ children }: FormWizardProgressProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace FormWizardProgress {
+    var displayName: string;
+}

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

@@ -0,0 +1,55 @@
+import { ComponentType, ReactNode } from 'react';
+import { FormProxy } from '@reformer/core';
+/**
+ * Props for FormWizard.Step component
+ *
+ * Supports two usage patterns:
+ * 1. Component-based: `<FormWizard.Step component={Step1} control={form} />`
+ * 2. Children-based: `<FormWizard.Step>{children}</FormWizard.Step>`
+ */
+export interface FormWizardStepProps<T extends Record<string, any>> {
+    /** Component to render for this step (legacy API) */
+    component?: ComponentType<{
+        control: FormProxy<T>;
+    } & Record<string, unknown>>;
+    /** Form control to pass to the component (legacy API) */
+    control?: FormProxy<T>;
+    /** Children to render (new API - for use with selector-based wizard) */
+    children?: ReactNode;
+    /** Any additional props to pass to the component */
+    [key: string]: unknown;
+}
+/**
+ * Internal props that include the step index (set by parent FormWizard)
+ */
+export interface FormWizardStepInternalProps<T extends Record<string, any>> extends FormWizardStepProps<T> {
+    /** Step index (1-based), set internally by FormWizard */
+    _stepIndex?: number;
+}
+/**
+ * FormWizard.Step - renders a step component when it's the current step
+ *
+ * @example Component-based (legacy)
+ * ```tsx
+ * <FormWizard ref={navRef} form={form} config={config}>
+ *   <FormWizard.Step component={Step1} control={form} />
+ *   <FormWizard.Step component={Step2} control={form} extraProp="value" />
+ * </FormWizard>
+ * ```
+ *
+ * @example Children-based (new)
+ * ```tsx
+ * <FormWizard form={form} config={config}>
+ *   <FormWizard.Step>
+ *     <RenderNodeComponent node={step1Content} ... />
+ *   </FormWizard.Step>
+ *   <FormWizard.Step>
+ *     <RenderNodeComponent node={step2Content} ... />
+ *   </FormWizard.Step>
+ * </FormWizard>
+ * ```
+ */
+export declare function FormWizardStep<T extends Record<string, any>>({ component: Component, control, children, _stepIndex, ...restProps }: FormWizardStepInternalProps<T>): import("react/jsx-runtime").JSX.Element | null;
+export declare namespace FormWizardStep {
+    var displayName: string;
+}

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

@@ -0,0 +1,43 @@
+import { ButtonHTMLAttributes, ReactNode } from 'react';
+/**
+ * Props for FormWizard.Submit component
+ */
+export interface FormWizardSubmitProps 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;
+}
+/**
+ * FormWizard.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
+ * <FormWizard.Actions onSubmit={handleSubmit}>
+ *   <FormWizard.Submit>Submit</FormWizard.Submit>
+ * </FormWizard.Actions>
+ * ```
+ *
+ * @example With loading text
+ * ```tsx
+ * <FormWizard.Submit loadingText="Submitting...">
+ *   Submit Application
+ * </FormWizard.Submit>
+ * ```
+ *
+ * @example With custom button (asChild)
+ * ```tsx
+ * <FormWizard.Submit asChild loadingText={<Spinner />}>
+ *   <MyButton variant="success">Complete</MyButton>
+ * </FormWizard.Submit>
+ * ```
+ */
+export declare const FormWizardSubmit: import('react').ForwardRefExoticComponent<FormWizardSubmitProps & import('react').RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1,20 @@
+import { ReactNode, 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/components/form-wizard/Step.d.ts

@@ -0,0 +1,24 @@
+import { ReactNode } from 'react';
+/**
+ * Props для Step компонента
+ */
+export interface StepProps {
+    /** Заголовок шага (отображается в индикаторе) */
+    title: string;
+    /** Иконка шага (emoji или текст) */
+    icon?: string;
+    /** CSS класс */
+    className?: string;
+    /** Дочерние элементы */
+    children?: ReactNode;
+}
+/**
+ * Step - маркер-компонент для wizard-схемы
+ *
+ * Компонент просто рендерит children. Метаданные (title, icon) извлекаются
+ * wizard-компонентом из componentProps через useFormWizardSelectors.
+ */
+export declare function Step({ children }: StepProps): ReactNode;
+export declare namespace Step {
+    var displayName: string;
+}

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

@@ -0,0 +1,21 @@
+export { FormWizard } from './FormWizard';
+export { Step, type StepProps } from './Step';
+export { FormWizardStep } from './FormWizardStep';
+export { FormWizardIndicator } from './FormWizardIndicator';
+export { FormWizardActions, useFormWizardActions } from './FormWizardActions';
+export { FormWizardProgress } from './FormWizardProgress';
+export { FormWizardPrev } from './FormWizardPrev';
+export { FormWizardNext } from './FormWizardNext';
+export { FormWizardSubmit } from './FormWizardSubmit';
+export { Slot } from './Slot';
+export type { SlotProps } from './Slot';
+export { useFormWizard, FormWizardContext } from './FormWizardContext';
+export type { FormWizardHandle, FormWizardProps, FormWizardConfig } from './types';
+export type { FormWizardStepProps } from './FormWizardStep';
+export type { FormWizardContextValue } from './FormWizardContext';
+export type { FormWizardIndicatorProps, FormWizardIndicatorStep, FormWizardIndicatorStepWithState, FormWizardIndicatorRenderProps, } from './FormWizardIndicator';
+export type { FormWizardActionsProps, FormWizardActionsRenderProps, FormWizardButtonProps, FormWizardSubmitProps as FormWizardSubmitRenderProps, } from './FormWizardActions';
+export type { FormWizardPrevProps } from './FormWizardPrev';
+export type { FormWizardNextProps } from './FormWizardNext';
+export type { FormWizardSubmitProps } from './FormWizardSubmit';
+export type { FormWizardProgressProps, FormWizardProgressRenderProps } from './FormWizardProgress';