@saas-ui/forms 2.0.0-next.2 → 2.0.0-next.21

package/dist/yup/index.d.ts

@@ -1,10 +1,393 @@
-import * as _saas_ui_forms from '@saas-ui/forms';
-import { FieldProps, FormProps, CreateFormProps } from '@saas-ui/forms';
+import * as React$1 from 'react';
+import React$1__default from 'react';
+import * as react_hook_form from 'react-hook-form';
+import { FieldValues, FieldPath, UseFormProps, SubmitHandler, RegisterOptions, UseFormReturn, UseFieldArrayReturn, WatchObserver, SubmitErrorHandler } from 'react-hook-form';
+import { MaybeRenderProp } from '@chakra-ui/react-utils';
+import { UseStepperProps, UseStepperReturn } from '@saas-ui/core';
+import { HTMLChakraProps, TextareaProps, SwitchProps, CheckboxProps, FormControlProps, ResponsiveValue, InputProps, RadioGroupProps, MenuProps, SelectProps as SelectProps$1, UsePinInputProps, SystemProps, NumberInputProps as NumberInputProps$1, StackDirection, MenuItemOptionProps, ButtonProps, RadioProps } from '@chakra-ui/react';
+import { FocusableElement } from '@chakra-ui/utils';
+import * as _chakra_ui_system_dist_system_types from '@chakra-ui/system/dist/system.types';
 import * as yup from 'yup';
-import { AnyObjectSchema } from 'yup';
+import { ObjectSchema, InferType } from 'yup';
+import { FieldProps as FieldProps$1, GetFieldResolver, WithFields, FormProps as FormProps$1, CreateFormProps } from '@saas-ui/forms';
 import { yupResolver } from '@hookform/resolvers/yup';
 export { yupResolver } from '@hookform/resolvers/yup';
-import React from 'react';
+
+interface NumberInputOptions {
+    /**
+     * Hide the stepper.
+     */
+    hideStepper?: boolean;
+    /**
+     * Render a custom increment icon.
+     */
+    incrementIcon?: React$1.ReactNode;
+    /**
+     * Render a custom decrement icon.
+     */
+    decrementIcon?: React$1.ReactNode;
+}
+interface NumberInputProps extends NumberInputProps$1, NumberInputOptions {
+}
+
+interface PasswordOptions {
+    viewIcon?: React$1__default.ReactNode;
+    viewOffIcon?: React$1__default.ReactNode;
+    leftAddon?: React$1__default.ReactNode;
+}
+interface PasswordInputProps extends InputProps, PasswordOptions {
+}
+
+interface RadioOption extends Omit<RadioProps, 'value' | 'label'>, FieldOption {
+}
+type RadioOptions = FieldOptions<RadioOption>;
+interface RadioInputOptions {
+    options: RadioOptions;
+    spacing?: SystemProps['margin'];
+    direction?: StackDirection;
+}
+interface RadioInputProps extends Omit<RadioGroupProps, 'children'>, RadioInputOptions {
+}
+
+interface SelectOptions {
+    /**
+     * The name of the input field in a native form.
+     */
+    name: string;
+    /**
+     * The value of the select field.
+     */
+    value?: string | string[];
+    /**
+     * The initial value of the select field.
+     */
+    defaultValue?: string | string[];
+    /**
+     * The callback invoked when the value of the select field changes.
+     * @param value The value of the select field.
+     */
+    onChange?: (value: string | string[]) => void;
+    /**
+     * The placeholder text when there's no value.
+     */
+    placeholder?: string;
+    /**
+     * If `true`, the select will be disabled.
+     */
+    isDisabled?: boolean;
+    /**
+     * An array of options
+     * If you leave this empty the children prop will be rendered.
+     */
+    options?: FieldOptions<SelectOption>;
+    /**
+     * Enable multiple select.
+     */
+    multiple?: boolean;
+    /**
+     * The function used to render the value of the select field.
+     * @param value The value of the select field.
+     * @returns The rendered value.
+     */
+    renderValue?: (value: string | string[]) => React$1__default.ReactNode;
+}
+
+interface SelectProps extends Omit<MenuProps, 'children'>, SelectOptions {
+}
+interface SelectOption extends Omit<MenuItemOptionProps, 'value'>, FieldOption {
+}
+/**
+ * An option in a select list
+ *
+ * @see https://saas-ui.dev/docs/components/forms/select
+ */
+declare const SelectOption: _chakra_ui_system_dist_system_types.ComponentWithAs<"button", MenuItemOptionProps>;
+
+interface Option$1 {
+    value: string;
+    label?: string;
+}
+interface NativeSelectOptions {
+    options?: Option$1[];
+}
+interface NativeSelectProps extends SelectProps$1, NativeSelectOptions {
+}
+
+interface InputFieldProps extends InputProps {
+    type?: string;
+    leftAddon?: React$1.ReactNode;
+    rightAddon?: React$1.ReactNode;
+}
+interface NumberInputFieldProps extends NumberInputProps {
+    type: 'number';
+}
+interface PinFieldProps extends Omit<UsePinInputProps, 'type'> {
+    pinLength?: number;
+    pinType?: 'alphanumeric' | 'number';
+    spacing?: SystemProps['margin'];
+}
+declare const defaultFieldTypes: {
+    text: React$1.FC<InputFieldProps & BaseFieldProps<react_hook_form.FieldValues, string>>;
+    email: React$1.FC<InputFieldProps & BaseFieldProps<react_hook_form.FieldValues, string>>;
+    url: React$1.FC<InputFieldProps & BaseFieldProps<react_hook_form.FieldValues, string>>;
+    phone: React$1.FC<InputFieldProps & BaseFieldProps<react_hook_form.FieldValues, string>>;
+    number: React$1.FC<NumberInputFieldProps & BaseFieldProps<react_hook_form.FieldValues, string>>;
+    password: React$1.FC<PasswordInputProps & BaseFieldProps<react_hook_form.FieldValues, string>>;
+    textarea: React$1.FC<TextareaProps & BaseFieldProps<react_hook_form.FieldValues, string>>;
+    switch: React$1.FC<SwitchProps & BaseFieldProps<react_hook_form.FieldValues, string>>;
+    select: React$1.FC<SelectProps & BaseFieldProps<react_hook_form.FieldValues, string>>;
+    checkbox: React$1.FC<CheckboxProps & BaseFieldProps<react_hook_form.FieldValues, string>>;
+    radio: React$1.FC<RadioInputProps & BaseFieldProps<react_hook_form.FieldValues, string>>;
+    pin: React$1.FC<PinFieldProps & BaseFieldProps<react_hook_form.FieldValues, string>>;
+    'native-select': React$1.FC<NativeSelectProps & BaseFieldProps<react_hook_form.FieldValues, string>>;
+};
+type DefaultFields = typeof defaultFieldTypes;
+
+interface SubmitButtonProps extends ButtonProps {
+    /**
+     * Disable the submit button if the form is untouched.
+     *
+     * Change the default behavior by updating
+     * `SubmitButton.defaultProps.disableIfUntouched`
+     */
+    disableIfUntouched?: boolean;
+    /**
+     * Disable the submit button if the form is invalid.
+     *
+     * Change the default behavior by updating
+     * `SubmitButton.defaultProps.disableIfInvalid`
+     */
+    disableIfInvalid?: boolean;
+}
+
+type FieldOption = {
+    label?: string;
+    value: string;
+};
+type FieldOptions<TOption extends FieldOption = FieldOption> = Array<string> | Array<TOption>;
+type ValueOf<T> = T[keyof T];
+type ShallowMerge<A, B> = Omit<A, keyof B> & B;
+type Split<S extends string, D extends string> = string extends S ? string[] : S extends '' ? [] : S extends `${infer T}${D}${infer U}` ? [T, ...Split<U, D>] : [S];
+type MapPath<T extends string[]> = T extends [infer U, ...infer R] ? U extends string ? `${U extends `${number}` ? '$' : U}${R[0] extends string ? '.' : ''}${R extends string[] ? MapPath<R> : ''}` : '' : '';
+type TransformPath<T extends string> = MapPath<Split<T, '.'>>;
+type ArrayFieldPath<Name extends string> = Name extends string ? TransformPath<Name> : never;
+interface BaseFieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends Omit<FormControlProps, 'label' | 'type'> {
+    /**
+     * The field name
+     */
+    name: TName | ArrayFieldPath<TName>;
+    /**
+     * The field label
+     */
+    label?: string;
+    /**
+     * Hide the field label
+     */
+    hideLabel?: boolean;
+    /**
+     * Field help text
+     */
+    help?: string;
+    /**
+     * React hook form rules
+     */
+    rules?: Omit<RegisterOptions<TFieldValues, TName>, 'valueAsNumber' | 'valueAsDate' | 'setValueAs' | 'disabled'>;
+    /**
+     * Build-in types:
+     * text, number, password, textarea, select, native-select, checkbox, radio, switch, pin
+     *
+     * Will default to a text field if there is no matching type.
+     */
+    type?: string;
+    /**
+     * The input placeholder
+     */
+    placeholder?: string;
+}
+type MergeFieldProps<FieldDefs, TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = ValueOf<{
+    [K in keyof FieldDefs]: FieldDefs[K] extends React.FC<infer Props> ? {
+        type?: K;
+    } & ShallowMerge<Props, BaseFieldProps<TFieldValues, TName>> : never;
+}>;
+type FieldProps<TFieldValues extends FieldValues = FieldValues> = MergeFieldProps<DefaultFields, TFieldValues>;
+type DefaultFieldOverrides = {
+    submit?: SubmitButtonProps;
+    [key: string]: any;
+};
+
+type FieldResolver = {
+    getFields(): BaseFieldProps[];
+    getNestedFields(name: string): BaseFieldProps[];
+};
+
+interface DisplayIfProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> {
+    children: React$1.ReactElement;
+    name: TName;
+    defaultValue?: unknown;
+    isDisabled?: boolean;
+    isExact?: boolean;
+    condition?: (value: unknown, context: UseFormReturn<TFieldValues>) => boolean;
+}
+
+interface UseArrayFieldReturn extends UseFieldArrayReturn {
+    /**
+     * The array field name
+     */
+    name: string;
+    /**
+     * The default value for new items
+     */
+    defaultValue: Record<string, any>;
+    /**
+     * Min amount of items
+     */
+    min?: number;
+    /**
+     * Max amount of items
+     */
+    max?: number;
+}
+interface ArrayFieldOptions<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> {
+    /**
+     * The field name
+     */
+    name: TName;
+    /**
+     * Default value for new values in the array
+     */
+    defaultValue?: Record<string, any>;
+    /**
+     * Default key name for rows, change this if your data uses a different 'id' field
+     * @default "id"
+     */
+    keyName?: string;
+    min?: number;
+    max?: number;
+}
+interface ArrayFieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends ArrayFieldOptions<TFieldValues, TName>, Omit<BaseFieldProps<TFieldValues, TName>, 'name' | 'defaultValue' | 'children'> {
+    children: MaybeRenderProp<ArrayField[]>;
+}
+interface ArrayField {
+    id: string;
+    [key: string]: unknown;
+}
+/**
+ * The wrapper component that composes the default ArrayField functionality.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/forms/array-field
+ */
+declare const ArrayField: ((props: ArrayFieldProps & {
+    ref?: React$1.ForwardedRef<UseArrayFieldReturn>;
+}) => React$1.ReactElement) & {
+    displayName: string;
+};
+
+interface ObjectFieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends BaseFieldProps {
+    name: TName;
+    children: React$1.ReactNode;
+    columns?: ResponsiveValue<number>;
+    spacing?: ResponsiveValue<string | number>;
+}
+
+interface FormRenderContext<TFieldValues extends FieldValues = FieldValues, TContext extends object = object, TFieldTypes = FieldProps<TFieldValues>> extends UseFormReturn<TFieldValues, TContext> {
+    Field: React$1.FC<TFieldTypes & React$1.RefAttributes<FocusableElement>>;
+    DisplayIf: React$1.FC<DisplayIfProps<TFieldValues>>;
+    ArrayField: React$1.FC<ArrayFieldProps<TFieldValues> & React$1.RefAttributes<UseArrayFieldReturn>>;
+    ObjectField: React$1.FC<ObjectFieldProps<TFieldValues>>;
+}
+interface FormOptions<TSchema = unknown, TFieldValues extends FieldValues = FieldValues, TContext extends object = object, TFieldTypes = FieldProps<TFieldValues>> {
+    /**
+     * The form schema.
+     */
+    schema?: TSchema;
+    /**
+     * Triggers when any of the field change.
+     */
+    onChange?: WatchObserver<TFieldValues>;
+    /**
+     * The submit handler.
+     */
+    onSubmit: SubmitHandler<TFieldValues>;
+    /**
+     * Triggers when there are validation errors.
+     */
+    onError?: SubmitErrorHandler<TFieldValues>;
+    /**
+     * The Hook Form state ref.
+     */
+    formRef?: React$1.RefObject<UseFormReturn<TFieldValues, TContext>>;
+    /**
+     * The form children, can be a render prop or a ReactNode.
+     */
+    children?: MaybeRenderProp<FormRenderContext<TFieldValues, TContext, TFieldTypes>>;
+    /**
+     * The field resolver, used to resolve the fields from schemas.
+     */
+    fieldResolver?: FieldResolver;
+    /**
+     * Field overrides
+     */
+    fields?: DefaultFieldOverrides;
+}
+interface FormProps<TSchema = unknown, TFieldValues extends FieldValues = FieldValues, TContext extends object = object, TFieldTypes = FieldProps<TFieldValues>> extends UseFormProps<TFieldValues, TContext>, Omit<HTMLChakraProps<'form'>, 'children' | 'onChange' | 'onSubmit' | 'onError'>, FormOptions<TSchema, TFieldValues, TContext, TFieldTypes> {
+}
+
+type StepsOptions<TSchema, TName extends string = string> = {
+    /**
+     * The step name
+     */
+    name: TName;
+    /**
+     * Schema
+     */
+    schema?: TSchema;
+}[];
+interface FormStepOptions<TName extends string = string> {
+    /**
+     * The step name
+     */
+    name: TName;
+    /**
+     * Schema
+     */
+    schema?: any;
+    /**
+     * Hook Form Resolver
+     */
+    resolver?: any;
+}
+interface FormStepProps<TName extends string = string> extends FormStepOptions<TName>, Omit<HTMLChakraProps<'div'>, 'onSubmit'> {
+    onSubmit?: FormStepSubmitHandler;
+}
+type FormStepSubmitHandler<TFieldValues extends FieldValues = FieldValues> = (data: TFieldValues, stepper: UseStepperReturn) => Promise<void>;
+
+type StepName<T extends {
+    [k: number]: {
+        readonly name: string;
+    };
+}> = T[number]['name'];
+interface StepFormRenderContext<TSteps extends StepsOptions<any> = StepsOptions<any>, TFieldValues extends FieldValues = FieldValues, TContext extends object = object, TFieldTypes = FieldProps<TFieldValues>> extends UseStepFormReturn<TFieldValues> {
+    Field: React$1.FC<TFieldTypes & React$1.RefAttributes<FocusableElement>>;
+    FormStep: React$1.FC<FormStepProps<StepName<TSteps>>>;
+    DisplayIf: React$1.FC<DisplayIfProps<TFieldValues>>;
+    ArrayField: React$1.FC<ArrayFieldProps<TFieldValues> & React$1.RefAttributes<UseArrayFieldReturn>>;
+    ObjectField: React$1.FC<ObjectFieldProps<TFieldValues>>;
+}
+interface UseStepFormProps<TSteps extends StepsOptions<any> = StepsOptions<any>, TFieldValues extends FieldValues = FieldValues, TContext extends object = object, TFieldTypes = FieldProps<TFieldValues>> extends Omit<UseStepperProps, 'onChange'>, Omit<FormProps<any, TFieldValues, TContext, TFieldTypes>, 'children'> {
+    steps?: TSteps;
+    children: MaybeRenderProp<StepFormRenderContext<TSteps, TFieldValues, TContext, TFieldTypes>>;
+}
+interface UseStepFormReturn<TFieldValues extends FieldValues = FieldValues> extends UseStepperReturn {
+    getFormProps(): {
+        onSubmit: SubmitHandler<TFieldValues>;
+        schema?: any;
+        resolver?: any;
+    };
+    updateStep(step: any): void;
+    steps: Record<string, any>;
+}
+
+type AnyObjectSchema = ObjectSchema<any, any, any, ''> | ObjectSchema<any, any, any, 'd'> | ObjectSchema<any, any, any, 's'>;
 
 type Options = {
     min?: number;
@@ -16,26 +399,147 @@ type Options = {
  * @param schema The Yup schema
  * @returns {FieldProps[]}
  */
-declare const getFieldsFromSchema: (schema: AnyObjectSchema) => FieldProps[];
-declare const getNestedSchema: (schema: AnyObjectSchema, path: string) => any;
-declare const yupFieldResolver: (schema: AnyObjectSchema) => {
-    getFields(): FieldProps<_saas_ui_forms.FieldValues, string>[];
-    getNestedFields(name: string): FieldProps<_saas_ui_forms.FieldValues, string>[];
-};
-declare const yupForm: (schema: AnyObjectSchema, schemaOptions?: {}, resolverOptions?: {}) => {
-    schema: AnyObjectSchema;
-    resolver: <TFieldValues extends _saas_ui_forms.FieldValues, TContext>(values: TFieldValues, context: TContext | undefined, options: _saas_ui_forms.ResolverOptions<TFieldValues>) => Promise<_saas_ui_forms.ResolverResult<TFieldValues>>;
-    fieldResolver: {
-        getFields(): FieldProps<_saas_ui_forms.FieldValues, string>[];
-        getNestedFields(name: string): FieldProps<_saas_ui_forms.FieldValues, string>[];
-    };
-};
+declare const getFieldsFromSchema: (schema: AnyObjectSchema) => FieldProps$1[];
+declare const getNestedSchema: (schema: AnyObjectSchema, path: string) => AnyObjectSchema;
+declare const yupFieldResolver: GetFieldResolver;
 
 type ResolverArgs = Parameters<typeof yupResolver>;
-interface CreateYupFormProps extends CreateFormProps {
+interface CreateYupFormProps<FieldDefs> extends CreateFormProps<FieldDefs> {
     schemaOptions?: ResolverArgs[1];
     resolverOptions?: ResolverArgs[2];
 }
-declare const createYupForm: (options?: CreateYupFormProps) => <TSchema extends yup.AnyObjectSchema = yup.AnyObjectSchema, TContext extends object = object>(props: FormProps<yup.Asserts<TSchema>, TContext, TSchema>) => React.ReactElement;
+type YupFormType<FieldDefs, ExtraProps = object, ExtraOverrides = object, Type extends 'yup' = 'yup'> = (<TSchema extends AnyObjectSchema = AnyObjectSchema, TFieldValues extends InferType<TSchema> = InferType<TSchema>, // placeholder
+TContext extends object = object>(props: WithFields<FormProps$1<TFieldValues, TContext, TSchema>, FieldDefs, ExtraOverrides> & {
+    ref?: React$1__default.ForwardedRef<HTMLFormElement>;
+} & ExtraProps) => React$1__default.ReactElement) & {
+    displayName?: string;
+    id?: 'YupForm';
+};
+declare const createYupForm: <FieldDefs>(options?: CreateYupFormProps<FieldDefs> | undefined) => YupFormType<FieldDefs, object, object, "yup">;
+
+declare const Form: YupFormType<unknown, object, object, "yup">;
+declare const StepForm: (<TSteps extends {
+    name: string;
+    schema?: AnyObjectSchema | undefined;
+}[] = {
+    name: string;
+    schema?: AnyObjectSchema | undefined;
+}[], TFieldValues extends TSteps extends [infer Step, ...infer Rest] ? Step extends {
+    schema: AnyObjectSchema;
+} ? yup.Asserts<Step["schema"]> & (Rest extends {
+    name: string;
+    schema?: AnyObjectSchema | undefined;
+}[] ? Rest extends infer T ? T extends Rest ? T extends [infer Step, ...infer Rest] ? Step extends {
+    schema: AnyObjectSchema;
+} ? yup.Asserts<Step["schema"]> & (Rest extends {
+    name: string;
+    schema?: AnyObjectSchema | undefined;
+}[] ? Rest extends infer T_1 ? T_1 extends Rest ? T_1 extends [infer Step, ...infer Rest] ? Step extends {
+    schema: AnyObjectSchema;
+} ? yup.Asserts<Step["schema"]> & (Rest extends {
+    name: string;
+    schema?: AnyObjectSchema | undefined;
+}[] ? Rest extends infer T_2 ? T_2 extends Rest ? T_2 extends [infer Step, ...infer Rest] ? Step extends {
+    schema: AnyObjectSchema;
+} ? yup.Asserts<Step["schema"]> & (Rest extends {
+    name: string;
+    schema?: AnyObjectSchema | undefined;
+}[] ? Rest extends infer T_3 ? T_3 extends Rest ? T_3 extends [infer Step, ...infer Rest] ? Step extends {
+    schema: AnyObjectSchema;
+} ? yup.Asserts<Step["schema"]> & (Rest extends {
+    name: string;
+    schema?: AnyObjectSchema | undefined;
+}[] ? Rest extends infer T_4 ? T_4 extends Rest ? T_4 extends [infer Step, ...infer Rest] ? Step extends {
+    schema: AnyObjectSchema;
+} ? yup.Asserts<Step["schema"]> & (Rest extends {
+    name: string;
+    schema?: AnyObjectSchema | undefined;
+}[] ? Rest extends infer T_5 ? T_5 extends Rest ? T_5 extends [infer Step, ...infer Rest] ? Step extends {
+    schema: AnyObjectSchema;
+} ? yup.Asserts<Step["schema"]> & (Rest extends {
+    name: string;
+    schema?: AnyObjectSchema | undefined;
+}[] ? Rest extends infer T_6 ? T_6 extends Rest ? T_6 extends [infer Step, ...infer Rest] ? Step extends {
+    schema: AnyObjectSchema;
+} ? yup.Asserts<Step["schema"]> & (Rest extends {
+    name: string;
+    schema?: AnyObjectSchema | undefined;
+}[] ? Rest extends infer T_7 ? T_7 extends Rest ? T_7 extends [infer Step, ...infer Rest] ? Step extends {
+    schema: AnyObjectSchema;
+} ? yup.Asserts<Step["schema"]> & (Rest extends {
+    name: string;
+    schema?: AnyObjectSchema | undefined;
+}[] ? Rest extends infer T_8 ? T_8 extends Rest ? T_8 extends [infer Step, ...infer Rest] ? Step extends {
+    schema: AnyObjectSchema;
+} ? yup.Asserts<Step["schema"]> & (Rest extends {
+    name: string;
+    schema?: AnyObjectSchema | undefined;
+}[] ? Rest extends infer T_9 ? T_9 extends Rest ? T_9 extends [infer Step, ...infer Rest] ? Step extends {
+    schema: AnyObjectSchema;
+} ? yup.Asserts<Step["schema"]> & (Rest extends {
+    name: string;
+    schema?: AnyObjectSchema | undefined;
+}[] ? any : object) : object : object : never : never : object) : object : object : never : never : object) : object : object : never : never : object) : object : object : never : never : object) : object : object : never : never : object) : object : object : never : never : object) : object : object : never : never : object) : object : object : never : never : object) : object : object : never : never : object) : object : object : never : never : object) : object : object = TSteps extends [infer Step, ...infer Rest] ? Step extends {
+    schema: AnyObjectSchema;
+} ? yup.Asserts<Step["schema"]> & (Rest extends {
+    name: string;
+    schema?: AnyObjectSchema | undefined;
+}[] ? Rest extends infer T_10 ? T_10 extends Rest ? T_10 extends [infer Step, ...infer Rest] ? Step extends {
+    schema: AnyObjectSchema;
+} ? yup.Asserts<Step["schema"]> & (Rest extends {
+    name: string;
+    schema?: AnyObjectSchema | undefined;
+}[] ? Rest extends infer T_11 ? T_11 extends Rest ? T_11 extends [infer Step, ...infer Rest] ? Step extends {
+    schema: AnyObjectSchema;
+} ? yup.Asserts<Step["schema"]> & (Rest extends {
+    name: string;
+    schema?: AnyObjectSchema | undefined;
+}[] ? Rest extends infer T_12 ? T_12 extends Rest ? T_12 extends [infer Step, ...infer Rest] ? Step extends {
+    schema: AnyObjectSchema;
+} ? yup.Asserts<Step["schema"]> & (Rest extends {
+    name: string;
+    schema?: AnyObjectSchema | undefined;
+}[] ? Rest extends infer T_13 ? T_13 extends Rest ? T_13 extends [infer Step, ...infer Rest] ? Step extends {
+    schema: AnyObjectSchema;
+} ? yup.Asserts<Step["schema"]> & (Rest extends {
+    name: string;
+    schema?: AnyObjectSchema | undefined;
+}[] ? Rest extends infer T_14 ? T_14 extends Rest ? T_14 extends [infer Step, ...infer Rest] ? Step extends {
+    schema: AnyObjectSchema;
+} ? yup.Asserts<Step["schema"]> & (Rest extends {
+    name: string;
+    schema?: AnyObjectSchema | undefined;
+}[] ? Rest extends infer T_15 ? T_15 extends Rest ? T_15 extends [infer Step, ...infer Rest] ? Step extends {
+    schema: AnyObjectSchema;
+} ? yup.Asserts<Step["schema"]> & (Rest extends {
+    name: string;
+    schema?: AnyObjectSchema | undefined;
+}[] ? Rest extends infer T_16 ? T_16 extends Rest ? T_16 extends [infer Step, ...infer Rest] ? Step extends {
+    schema: AnyObjectSchema;
+} ? yup.Asserts<Step["schema"]> & (Rest extends {
+    name: string;
+    schema?: AnyObjectSchema | undefined;
+}[] ? Rest extends infer T_17 ? T_17 extends Rest ? T_17 extends [infer Step, ...infer Rest] ? Step extends {
+    schema: AnyObjectSchema;
+} ? yup.Asserts<Step["schema"]> & (Rest extends {
+    name: string;
+    schema?: AnyObjectSchema | undefined;
+}[] ? Rest extends infer T_18 ? T_18 extends Rest ? T_18 extends [infer Step, ...infer Rest] ? Step extends {
+    schema: AnyObjectSchema;
+} ? yup.Asserts<Step["schema"]> & (Rest extends {
+    name: string;
+    schema?: AnyObjectSchema | undefined;
+}[] ? Rest extends infer T_19 ? T_19 extends Rest ? T_19 extends [infer Step, ...infer Rest] ? Step extends {
+    schema: AnyObjectSchema;
+} ? yup.Asserts<Step["schema"]> & (Rest extends {
+    name: string;
+    schema?: AnyObjectSchema | undefined;
+}[] ? any : object) : object : object : never : never : object) : object : object : never : never : object) : object : object : never : never : object) : object : object : never : never : object) : object : object : never : never : object) : object : object : never : never : object) : object : object : never : never : object) : object : object : never : never : object) : object : object : never : never : object) : object : object : never : never : object) : object : object, TContext extends object = object>(props: UseStepFormProps<TSteps, TFieldValues, TContext, FieldProps<TFieldValues>> & {
+    steps: TSteps;
+    ref?: React$1.ForwardedRef<HTMLFormElement> | undefined;
+}) => React$1.ReactElement<any, string | React$1.JSXElementConstructor<any>>) & {
+    displayName?: string | undefined;
+    id?: string | undefined;
+};
 
-export { Options, createYupForm, getFieldsFromSchema, getNestedSchema, yupFieldResolver, yupForm };
+export { AnyObjectSchema, Form, Options, StepForm, YupFormType, createYupForm, getFieldsFromSchema, getNestedSchema, yupFieldResolver };

package/dist/yup/index.js

@@ -68,28 +68,40 @@ var yupFieldResolver = (schema) => {
     }
   };
 };
-var yupForm = (schema, schemaOptions = {}, resolverOptions = {}) => {
-  return {
-    schema,
-    resolver: yup.yupResolver(schema, schemaOptions, resolverOptions),
-    fieldResolver: yupFieldResolver(schema)
-  };
-};
 var createYupForm = (options) => {
-  return forms.createForm({
+  const YupForm = forms.createForm({
+    resolver: (schema) => yup.yupResolver(schema, options == null ? void 0 : options.schemaOptions, options == null ? void 0 : options.resolverOptions),
+    fieldResolver: yupFieldResolver,
+    ...options
+  });
+  YupForm.displayName = "YupForm";
+  YupForm.id = "YupForm";
+  return YupForm;
+};
+var createYupStepForm = (options) => {
+  const YupStepForm = forms.createStepForm({
     resolver: (schema) => yup.yupResolver(schema, options == null ? void 0 : options.schemaOptions, options == null ? void 0 : options.resolverOptions),
+    fieldResolver: yupFieldResolver,
     ...options
   });
+  YupStepForm.displayName = "YupStepForm";
+  YupStepForm.id = "YupStepForm";
+  return YupStepForm;
 };
 
+// yup/src/index.ts
+var Form2 = createYupForm();
+var StepForm = createYupStepForm();
+
 Object.defineProperty(exports, 'yupResolver', {
   enumerable: true,
   get: function () { return yup.yupResolver; }
 });
+exports.Form = Form2;
+exports.StepForm = StepForm;
 exports.createYupForm = createYupForm;
 exports.getFieldsFromSchema = getFieldsFromSchema;
 exports.getNestedSchema = getNestedSchema;
 exports.yupFieldResolver = yupFieldResolver;
-exports.yupForm = yupForm;
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.js.map

package/dist/yup/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../yup/src/yup-resolver.ts","../../yup/src/create-yup-form.tsx"],"names":[],"mappings":";AAAA,SAAS,aAA8B;AACvC,SAAS,mBAAmB;AAY5B,IAAM,UAAU,CAAC,UAAe;AAbhC;AAcE,OAAI,WAAM,KAAK,SAAX,mBAAiB,MAAM;AACzB,WAAO,MAAM,KAAK,KAAK;AAAA,EACzB;AAEA,UAAQ,MAAM,MAAM;AAAA,IAClB,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AAAA,IACL;AACE,aAAO;AAAA,EACX;AACF;AAEA,IAAM,iBAAiB,CAAC,OAAY,SAAiB;AAjCrD;AAkCE,aAAW,QAAQ,MAAM,OAAO;AAC9B,SAAI,UAAK,YAAL,mBAAc,OAAO;AAAO,aAAO,KAAK,QAAQ,OAAO;AAAA,EAC7D;AACF;AAQO,IAAM,sBAAsB,CAAC,WAA0C;AAC5E,QAAM,SAAS,CAAC;AAEhB,MAAI,eAAoC,CAAC;AACzC,MAAI,OAAO,SAAS,SAAS;AAE3B,mBAAe,OAAO,UAAU;AAAA,EAClC,OAAO;AACL,mBAAe,OAAO;AAAA,EACxB;AAEA,aAAW,QAAQ,cAAc;AAC/B,UAAM,QAAQ,aAAa;AAE3B,UAAM,UAAmB,CAAC;AAC1B,QAAI,MAAM,SAAS,SAAS;AAC1B,cAAQ,MAAM,eAAe,OAAO,KAAK;AACzC,cAAQ,MAAM,eAAe,OAAO,KAAK;AAAA,IAC3C;AAEA,WAAO,KAAK;AAAA,MACV;AAAA,MACA,OAAO,MAAM,KAAK,SAAS;AAAA,MAC3B,MAAM,QAAQ,KAAK;AAAA,MACnB,GAAG;AAAA,IACL,CAAC;AAAA,EACH;AACA,SAAO;AACT;AAEO,IAAM,kBAAkB,CAAC,QAAyB,SAAiB;AACxE,SAAO,MAAM,QAAQ,IAAI;AAC3B;AAEO,IAAM,mBAAmB,CAAC,WAA4B;AAC3D,SAAO;AAAA,IACL,YAAY;AACV,aAAO,oBAAoB,MAAM;AAAA,IACnC;AAAA,IACA,gBAAgB,MAAc;AAC5B,aAAO,oBAAoB,gBAAgB,QAAQ,IAAI,CAAC;AAAA,IAC1D;AAAA,EACF;AACF;AAEO,IAAM,UAAU,CACrB,QACA,gBAAgB,CAAC,GACjB,kBAAkB,CAAC,MAChB;AACH,SAAO;AAAA,IACL;AAAA,IACA,UAAU,YAAY,QAAQ,eAAe,eAAe;AAAA,IAC5D,eAAe,iBAAiB,MAAM;AAAA,EACxC;AACF;;;ACpGA,SAAS,kBAA8C;AAWhD,IAAM,gBAAgB,CAAC,YAAiC;AAC7D,SAAO,WAAW;AAAA,IAChB,UAAU,CAAC,WACT,YAAY,QAAQ,mCAAS,eAAe,mCAAS,eAAe;AAAA,IACtE,GAAG;AAAA,EACL,CAAC;AAMH","sourcesContent":["import { reach, AnyObjectSchema } from 'yup'\nimport { yupResolver } from '@hookform/resolvers/yup'\n\nimport { FieldProps } from '@saas-ui/forms'\n\nexport { yupResolver }\n\nexport type Options = {\n  min?: number\n  max?: number\n}\n\n// @TODO get proper typings for the schema fields\nconst getType = (field: any) => {\n  if (field.spec.meta?.type) {\n    return field.spec.meta.type\n  }\n\n  switch (field.type) {\n    case 'array':\n      return 'array'\n    case 'object':\n      return 'object'\n    case 'number':\n      return 'number'\n    case 'date':\n      return 'date'\n    case 'string':\n    default:\n      return 'text'\n  }\n}\n\nconst getArrayOption = (field: any, name: string) => {\n  for (const test of field.tests) {\n    if (test.OPTIONS?.params[name]) return test.OPTIONS.params[name]\n  }\n}\n\n/**\n * A helper function to render forms automatically based on a Yup schema\n *\n * @param schema The Yup schema\n * @returns {FieldProps[]}\n */\nexport const getFieldsFromSchema = (schema: AnyObjectSchema): FieldProps[] => {\n  const fields = []\n\n  let schemaFields: Record<string, any> = {}\n  if (schema.type === 'array') {\n    /* @ts-ignore this is actually valid */\n    schemaFields = schema.innerType.fields\n  } else {\n    schemaFields = schema.fields\n  }\n\n  for (const name in schemaFields) {\n    const field = schemaFields[name]\n\n    const options: Options = {}\n    if (field.type === 'array') {\n      options.min = getArrayOption(field, 'min')\n      options.max = getArrayOption(field, 'max')\n    }\n\n    fields.push({\n      name,\n      label: field.spec.label || name,\n      type: getType(field),\n      ...options,\n    })\n  }\n  return fields\n}\n\nexport const getNestedSchema = (schema: AnyObjectSchema, path: string) => {\n  return reach(schema, path)\n}\n\nexport const yupFieldResolver = (schema: AnyObjectSchema) => {\n  return {\n    getFields() {\n      return getFieldsFromSchema(schema)\n    },\n    getNestedFields(name: string) {\n      return getFieldsFromSchema(getNestedSchema(schema, name))\n    },\n  }\n}\n\nexport const yupForm = (\n  schema: AnyObjectSchema,\n  schemaOptions = {},\n  resolverOptions = {}\n) => {\n  return {\n    schema,\n    resolver: yupResolver(schema, schemaOptions, resolverOptions),\n    fieldResolver: yupFieldResolver(schema),\n  }\n}\n","import { createForm, CreateFormProps, FormProps } from '@saas-ui/forms'\nimport { yupResolver } from './yup-resolver'\nimport * as yup from 'yup'\nimport React from 'react'\ntype ResolverArgs = Parameters<typeof yupResolver>\n\nexport interface CreateYupFormProps extends CreateFormProps {\n  schemaOptions?: ResolverArgs[1]\n  resolverOptions?: ResolverArgs[2]\n}\n\nexport const createYupForm = (options?: CreateYupFormProps) => {\n  return createForm({\n    resolver: (schema) =>\n      yupResolver(schema, options?.schemaOptions, options?.resolverOptions),\n    ...options,\n  }) as <\n    TSchema extends yup.AnyObjectSchema = yup.AnyObjectSchema,\n    TContext extends object = object\n  >(\n    props: FormProps<yup.InferType<TSchema>, TContext, TSchema>\n  ) => React.ReactElement\n}\n"]}
+{"version":3,"sources":["../../yup/src/yup-resolver.ts","../../yup/src/create-yup-form.ts","../../yup/src/create-yup-step-form.ts","../../yup/src/index.ts"],"names":["Form"],"mappings":";AAAA,SAAS,aAAa;AACtB,SAAS,mBAAmB;AAa5B,IAAM,UAAU,CAAC,UAAe;AAdhC;AAeE,OAAI,WAAM,KAAK,SAAX,mBAAiB,MAAM;AACzB,WAAO,MAAM,KAAK,KAAK;AAAA,EACzB;AAEA,UAAQ,MAAM,MAAM;AAAA,IAClB,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AAAA,IACL;AACE,aAAO;AAAA,EACX;AACF;AAEA,IAAM,iBAAiB,CAAC,OAAY,SAAiB;AAlCrD;AAmCE,aAAW,QAAQ,MAAM,OAAO;AAC9B,SAAI,UAAK,YAAL,mBAAc,OAAO;AAAO,aAAO,KAAK,QAAQ,OAAO,IAAI;AAAA,EACjE;AACF;AAQO,IAAM,sBAAsB,CAAC,WAA0C;AAC5E,QAAM,SAAS,CAAC;AAEhB,MAAI,eAAoC,CAAC;AACzC,MAAI,OAAO,SAAS,SAAS;AAE3B,mBAAe,OAAO,UAAU;AAAA,EAClC,OAAO;AACL,mBAAe,OAAO;AAAA,EACxB;AAEA,aAAW,QAAQ,cAAc;AAC/B,UAAM,QAAQ,aAAa,IAAI;AAE/B,UAAM,UAAmB,CAAC;AAC1B,QAAI,MAAM,SAAS,SAAS;AAC1B,cAAQ,MAAM,eAAe,OAAO,KAAK;AACzC,cAAQ,MAAM,eAAe,OAAO,KAAK;AAAA,IAC3C;AAEA,WAAO,KAAK;AAAA,MACV;AAAA,MACA,OAAO,MAAM,KAAK,SAAS;AAAA,MAC3B,MAAM,QAAQ,KAAK;AAAA,MACnB,GAAG;AAAA,IACL,CAAC;AAAA,EACH;AACA,SAAO;AACT;AAEO,IAAM,kBAAkB,CAAC,QAAyB,SAAiB;AACxE,SAAO,MAAM,QAAQ,IAAI;AAC3B;AAEO,IAAM,mBAAqC,CAAC,WAA4B;AAC7E,SAAO;AAAA,IACL,YAAY;AACV,aAAO,oBAAoB,MAAM;AAAA,IACnC;AAAA,IACA,gBAAgB,MAAc;AAC5B,aAAO,oBAAoB,gBAAgB,QAAQ,IAAI,CAAC;AAAA,IAC1D;AAAA,EACF;AACF;;;ACzFA;AAAA,EACE;AAAA,OAKK;AAoCA,IAAM,gBAAgB,CAC3B,YACG;AACH,QAAM,UAAU,WAAW;AAAA,IACzB,UAAU,CAAC,WACT,YAAY,QAAQ,mCAAS,eAAe,mCAAS,eAAe;AAAA,IACtE,eAAe;AAAA,IACf,GAAG;AAAA,EACL,CAAC;AAED,UAAQ,cAAc;AACtB,UAAQ,KAAK;AAEb,SAAO;AACT;;;ACxDA;AAAA,EAME;AAAA,OAIK;AA4CA,IAAM,oBAAoB,CAC/B,YACG;AACH,QAAM,cAAc,eAA8B;AAAA,IAChD,UAAU,CAAC,WACT,YAAY,QAAQ,mCAAS,eAAe,mCAAS,eAAe;AAAA,IACtE,eAAe;AAAA,IACf,GAAG;AAAA,EACL,CAAC;AAED,cAAY,cAAc;AAC1B,cAAY,KAAK;AAEjB,SAAO;AACT;;;AC9DO,IAAMA,QAAO,cAAc;AAE3B,IAAM,WAAW,kBAAkB","sourcesContent":["import { reach } from 'yup'\nimport { yupResolver } from '@hookform/resolvers/yup'\n\nimport { FieldProps, GetFieldResolver } from '@saas-ui/forms'\nimport { AnyObjectSchema } from './types'\n\nexport { yupResolver }\n\nexport type Options = {\n  min?: number\n  max?: number\n}\n\n// @TODO get proper typings for the schema fields\nconst getType = (field: any) => {\n  if (field.spec.meta?.type) {\n    return field.spec.meta.type\n  }\n\n  switch (field.type) {\n    case 'array':\n      return 'array'\n    case 'object':\n      return 'object'\n    case 'number':\n      return 'number'\n    case 'date':\n      return 'date'\n    case 'string':\n    default:\n      return 'text'\n  }\n}\n\nconst getArrayOption = (field: any, name: string) => {\n  for (const test of field.tests) {\n    if (test.OPTIONS?.params[name]) return test.OPTIONS.params[name]\n  }\n}\n\n/**\n * A helper function to render forms automatically based on a Yup schema\n *\n * @param schema The Yup schema\n * @returns {FieldProps[]}\n */\nexport const getFieldsFromSchema = (schema: AnyObjectSchema): FieldProps[] => {\n  const fields = []\n\n  let schemaFields: Record<string, any> = {}\n  if (schema.type === 'array') {\n    /* @ts-ignore this is actually valid */\n    schemaFields = schema.innerType.fields\n  } else {\n    schemaFields = schema.fields\n  }\n\n  for (const name in schemaFields) {\n    const field = schemaFields[name]\n\n    const options: Options = {}\n    if (field.type === 'array') {\n      options.min = getArrayOption(field, 'min')\n      options.max = getArrayOption(field, 'max')\n    }\n\n    fields.push({\n      name,\n      label: field.spec.label || name,\n      type: getType(field),\n      ...options,\n    })\n  }\n  return fields\n}\n\nexport const getNestedSchema = (schema: AnyObjectSchema, path: string) => {\n  return reach(schema, path) as AnyObjectSchema\n}\n\nexport const yupFieldResolver: GetFieldResolver = (schema: AnyObjectSchema) => {\n  return {\n    getFields() {\n      return getFieldsFromSchema(schema)\n    },\n    getNestedFields(name: string) {\n      return getFieldsFromSchema(getNestedSchema(schema, name))\n    },\n  }\n}\n","import {\n  createForm,\n  CreateFormProps,\n  FormProps,\n  WithFields,\n  FieldValues,\n} from '@saas-ui/forms'\nimport { yupFieldResolver, yupResolver } from './yup-resolver'\nimport { InferType } from 'yup'\nimport React from 'react'\nimport { AnyObjectSchema } from './types'\n\ntype ResolverArgs = Parameters<typeof yupResolver>\n\nexport interface CreateYupFormProps<FieldDefs>\n  extends CreateFormProps<FieldDefs> {\n  schemaOptions?: ResolverArgs[1]\n  resolverOptions?: ResolverArgs[2]\n}\n\nexport type YupFormType<\n  FieldDefs,\n  ExtraProps = object,\n  ExtraOverrides = object,\n  Type extends 'yup' = 'yup'\n> = (<\n  TSchema extends AnyObjectSchema = AnyObjectSchema,\n  TFieldValues extends InferType<TSchema> = InferType<TSchema>, // placeholder\n  TContext extends object = object\n>(\n  props: WithFields<\n    FormProps<TFieldValues, TContext, TSchema>,\n    FieldDefs,\n    ExtraOverrides\n  > & {\n    ref?: React.ForwardedRef<HTMLFormElement>\n  } & ExtraProps\n) => React.ReactElement) & {\n  displayName?: string\n  id?: 'YupForm'\n}\n\nexport const createYupForm = <FieldDefs>(\n  options?: CreateYupFormProps<FieldDefs>\n) => {\n  const YupForm = createForm({\n    resolver: (schema: any) =>\n      yupResolver(schema, options?.schemaOptions, options?.resolverOptions),\n    fieldResolver: yupFieldResolver,\n    ...options,\n  })\n\n  YupForm.displayName = 'YupForm'\n  YupForm.id = 'YupForm'\n\n  return YupForm as YupFormType<FieldDefs>\n}\n","import {\n  createForm,\n  CreateFormProps,\n  FormProps,\n  WithFields,\n  FieldValues,\n  createStepForm,\n  StepsOptions,\n  UseStepFormProps,\n  Form,\n} from '@saas-ui/forms'\nimport { yupFieldResolver, yupResolver } from './yup-resolver'\nimport { InferType, object, string } from 'yup'\nimport React from 'react'\nimport { AnyObjectSchema } from './types'\n\ntype ResolverArgs = Parameters<typeof yupResolver>\n\nexport interface CreateYupFormProps<FieldDefs>\n  extends CreateFormProps<FieldDefs> {\n  schemaOptions?: ResolverArgs[1]\n  resolverOptions?: ResolverArgs[2]\n}\n\ntype InferStepType<T extends Required<StepsOptions<AnyObjectSchema>>> =\n  T extends [infer Step, ...infer Rest]\n    ? Step extends { schema: AnyObjectSchema }\n      ? InferType<Step['schema']> &\n          (Rest extends Required<StepsOptions<AnyObjectSchema>>\n            ? InferStepType<Rest>\n            : object)\n      : object\n    : object\n\ntype YupStepFormType<\n  FieldDefs,\n  ExtraProps = object,\n  ExtraOverrides = object\n> = (<\n  TSteps extends Required<StepsOptions<AnyObjectSchema>> = Required<\n    StepsOptions<AnyObjectSchema>\n  >,\n  TFieldValues extends InferStepType<TSteps> = InferStepType<TSteps>,\n  TContext extends object = object\n>(\n  props: UseStepFormProps<TSteps, TFieldValues, TContext> & {\n    steps: TSteps\n    ref?: React.ForwardedRef<HTMLFormElement>\n  }\n) => React.ReactElement) & {\n  displayName?: string\n  id?: string\n}\n\nexport const createYupStepForm = <FieldDefs>(\n  options?: CreateYupFormProps<FieldDefs>\n) => {\n  const YupStepForm = createStepForm<any, any, any>({\n    resolver: (schema: any) =>\n      yupResolver(schema, options?.schemaOptions, options?.resolverOptions),\n    fieldResolver: yupFieldResolver,\n    ...options,\n  })\n\n  YupStepForm.displayName = 'YupStepForm'\n  YupStepForm.id = 'YupStepForm'\n\n  return YupStepForm as YupStepFormType<FieldDefs>\n}\n","export * from './yup-resolver'\nexport { createYupForm, type YupFormType } from './create-yup-form'\nexport type { AnyObjectSchema } from './types'\nimport { createYupForm } from './create-yup-form'\nimport { createYupStepForm } from './create-yup-step-form'\n\nexport const Form = createYupForm()\n\nexport const StepForm = createYupStepForm()\n"]}