@saas-ui/forms 0.3.4 → 0.5.2

package/dist/index.modern.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.modern.js","sources":["../src/display-field.tsx","../src/field.tsx","../src/resolvers/yup.ts","../src/layout.tsx","../src/utils.ts","../src/use-array-field.tsx","../src/array-field.tsx","../src/object-field.tsx","../src/fields.tsx","../src/form.tsx","../src/submit-button.tsx","../src/auto-form.tsx","../src/display-if.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useFormContext } from 'react-hook-form'\n\nimport {\n  Text,\n  FormControl,\n  FormControlProps,\n  FormLabel,\n} from '@chakra-ui/react'\n\nimport { FieldProps } from './field'\n\nexport interface DisplayFieldProps\n  extends FormControlProps,\n    Omit<FieldProps, 'type' | 'label'> {}\n\nexport const DisplayField: React.FC<DisplayFieldProps> = ({\n  name,\n  label,\n  placeholder,\n  ...props\n}) => {\n  const { getValues } = useFormContext()\n\n  return (\n    <FormControl {...props}>\n      {label ? <FormLabel htmlFor={name}>{label}</FormLabel> : null}\n      <Text fontSize=\"md\">{getValues(name)}</Text>\n    </FormControl>\n  )\n}\n","import * as React from 'react'\nimport {\n  useFormContext,\n  FormState,\n  Controller,\n  get,\n  RegisterOptions,\n  FieldValues,\n  FieldPath,\n} from 'react-hook-form'\n\nimport {\n  forwardRef,\n  Box,\n  FormControl,\n  FormControlProps,\n  FormLabel,\n  FormHelperText,\n  FormErrorMessage,\n  Input,\n  Textarea,\n  Checkbox,\n  Switch,\n  useMergeRefs,\n} from '@chakra-ui/react'\n\nimport { NumberInput } from '@saas-ui/number-input'\nimport { PasswordInput } from '@saas-ui/password-input'\nimport { RadioInput } from '@saas-ui/radio'\nimport { PinInput } from '@saas-ui/pin-input'\nimport { Select, NativeSelect } from '@saas-ui/select'\n\nexport interface Option {\n  value: string\n  label?: string\n  [key: string]: unknown\n}\n\nexport type FieldRules = Pick<\n  RegisterOptions,\n  'required' | 'min' | 'max' | 'maxLength' | 'minLength' | 'pattern'\n>\n\nexport type FieldTypes =\n  | 'text'\n  | 'number'\n  | 'password'\n  | 'textarea'\n  | 'select'\n  | 'native-select'\n  | 'checkbox'\n  | 'radio'\n  | 'switch'\n  | 'pin'\n  | string\n\nexport interface FieldProps<\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n> extends Omit<FormControlProps, 'label' | 'type'> {\n  /**\n   * The field name\n   */\n  name: TName\n  /**\n   * The field label\n   */\n  label?: string\n  /**\n   * Hide the field label\n   */\n  hideLabel?: boolean\n  /**\n   * Field help text\n   */\n  help?: string\n  /**\n   * React hook form rules\n   */\n  rules?: Omit<\n    RegisterOptions<TFieldValues, TName>,\n    'valueAsNumber' | 'valueAsDate' | 'setValueAs' | 'disabled'\n  >\n  /**\n   * Options used for selects and radio fields\n   */\n  options?: Option[]\n  /**\n   * The field type\n   * Build-in types:\n   * - text\n   * - number\n   * - password\n   * - textarea\n   * - select\n   * - native-select\n   * - checkbox\n   * - radio\n   * - switch\n   * - pin\n   *\n   * Will default to a text field if there is no matching type.\n   * @default 'text'\n   */\n  type?: FieldTypes\n  /**\n   * The input placeholder\n   */\n  placeholder?: string\n}\n\nconst inputTypes: Record<FieldTypes, any> = {}\n\nconst defaultInputType = 'text'\n\nconst getInput = (type: string) => {\n  return inputTypes[type] || inputTypes[defaultInputType]\n}\n\nconst getError = (name: string, formState: FormState<{ [x: string]: any }>) => {\n  return get(formState.errors, name)\n}\n\nconst isTouched = (\n  name: string,\n  formState: FormState<{ [x: string]: any }>\n) => {\n  return get(formState.touchedFields, name)\n}\n\nexport const BaseField: React.FC<FieldProps> = (props) => {\n  const { name, label, help, variant, hideLabel, children, ...controlProps } =\n    props\n\n  const { formState } = useFormContext()\n\n  const error = getError(name, formState)\n\n  return (\n    <FormControl variant={variant} {...controlProps} isInvalid={!!error}>\n      {label && !hideLabel ? (\n        <FormLabel variant={variant}>{label}</FormLabel>\n      ) : null}\n      <Box>\n        {children}\n        {help && !error?.message ? (\n          <FormHelperText>{help}</FormHelperText>\n        ) : null}\n        {error?.message && (\n          <FormErrorMessage>{error?.message}</FormErrorMessage>\n        )}\n      </Box>\n    </FormControl>\n  )\n}\nexport const Field = forwardRef(\n  <TFieldValues extends FieldValues = FieldValues>(\n    props: FieldProps<TFieldValues> & {\n      [key: string]: unknown // Make sure attributes of custom components work. Need to change this to a global typedef at some point.\n    },\n    ref: React.ForwardedRef<typeof FormControl>\n  ) => {\n    const { type = defaultInputType } = props\n    const InputComponent = getInput(type)\n\n    return <InputComponent ref={ref} {...props} />\n  }\n) as <TFieldValues extends FieldValues>(\n  props: FieldProps<TFieldValues> & {\n    [key: string]: unknown\n  } & {\n    ref?: React.ForwardedRef<typeof FormControl>\n  }\n) => React.ReactElement\n\ninterface CreateFieldProps {\n  displayName: string\n  hideLabel?: boolean\n  BaseField: React.FC<any>\n}\n\nconst createField = (\n  InputComponent: React.FC<any>,\n  { displayName, hideLabel, BaseField }: CreateFieldProps\n) => {\n  const Field = forwardRef<FieldProps, typeof FormControl>((props, ref) => {\n    const {\n      name,\n      label,\n      help,\n      isDisabled,\n      isInvalid,\n      isReadOnly,\n      isRequired,\n      rules,\n      variant,\n      ...inputProps\n    } = props\n\n    const inputRules = {\n      required: isRequired,\n      ...rules,\n    }\n\n    return (\n      <BaseField\n        name={name}\n        label={label}\n        help={help}\n        hideLabel={hideLabel}\n        isDisabled={isDisabled}\n        isInvalid={isInvalid}\n        isReadOnly={isReadOnly}\n        isRequired={isRequired}\n        variant={variant}\n      >\n        <InputComponent\n          ref={ref}\n          name={name}\n          label={label}\n          rules={inputRules}\n          {...inputProps}\n        />\n      </BaseField>\n    )\n  })\n  Field.displayName = displayName\n\n  return Field\n}\n\nexport const withControlledInput = (InputComponent: any) => {\n  return forwardRef<FieldProps, typeof InputComponent>(\n    ({ name, rules, ...inputProps }, ref) => {\n      const { control } = useFormContext()\n\n      return (\n        <Controller\n          name={name}\n          control={control}\n          rules={rules}\n          render={({ field: { ref: _ref, ...field } }) => (\n            <InputComponent\n              {...field}\n              {...inputProps}\n              ref={useMergeRefs(ref, _ref)}\n            />\n          )}\n        />\n      )\n    }\n  )\n}\n\nexport const withUncontrolledInput = (InputComponent: any) => {\n  return forwardRef<FieldProps, typeof InputComponent>(\n    ({ name, rules, ...inputProps }, ref) => {\n      const { register } = useFormContext()\n\n      const { ref: _ref, ...field } = register(name, rules)\n\n      return (\n        <InputComponent\n          {...field}\n          {...inputProps}\n          ref={useMergeRefs(ref, _ref)}\n        />\n      )\n    }\n  )\n}\n\nexport interface RegisterFieldTypeOptions {\n  isControlled?: boolean\n  hideLabel?: boolean\n  BaseField?: React.FC<any>\n}\n\n/**\n * Register a new field type\n * @param type The name for this field in kebab-case, eg `email` or `array-field`\n * @param component The React component\n * @param options\n * @param options.isControlled Set this to true if this is a controlled field.\n * @param options.hideLabel Hide the field label, for example for checkbox or switch field.\n */\nexport const registerFieldType = (\n  type: string,\n  component: React.FC<any>,\n  options?: RegisterFieldTypeOptions\n) => {\n  let InputComponent\n  if (options?.isControlled) {\n    InputComponent = withControlledInput(component)\n  } else {\n    InputComponent = withUncontrolledInput(component)\n  }\n\n  const Field = createField(InputComponent, {\n    displayName: `${type\n      .split('-')\n      .map((part) => part.charAt(0).toUpperCase() + part.slice(1))\n      .join('')}Field`,\n    hideLabel: options?.hideLabel,\n    BaseField: options?.BaseField || BaseField,\n  })\n\n  inputTypes[type] = Field\n\n  return Field\n}\n\n// @todo Consider not registering all fields by default to lower the package size and computations.\n// Not all types may be required in a project.\nexport const InputField = registerFieldType('text', Input)\nexport const NumberInputField = registerFieldType('number', NumberInput, {\n  isControlled: true,\n})\nexport const PasswordInputFIeld = registerFieldType('password', PasswordInput)\nexport const TextareaField = registerFieldType('textarea', Textarea)\nexport const SwitchField = registerFieldType(\n  'switch',\n  forwardRef(({ label, ...props }: { label?: string }, ref) => {\n    return (\n      <Switch ref={ref} {...props}>\n        {label}\n      </Switch>\n    )\n  }),\n  {\n    isControlled: true,\n    hideLabel: true,\n  }\n)\nexport const SelectField = registerFieldType('select', Select, {\n  isControlled: true,\n})\nexport const CheckboxField = registerFieldType(\n  'checkbox',\n  forwardRef(({ label, ...props }: { label?: string }, ref) => {\n    return (\n      <Checkbox ref={ref} {...props}>\n        {label}\n      </Checkbox>\n    )\n  }),\n  {\n    hideLabel: true,\n  }\n)\nexport const RadioField = registerFieldType('radio', RadioInput, {\n  isControlled: true,\n})\nexport const PinField = registerFieldType('pin', PinInput, {\n  isControlled: true,\n})\nexport const NativeSelectField = registerFieldType(\n  'native-select',\n  NativeSelect,\n  { isControlled: true }\n)\n","import { SchemaOf, AnySchema, reach } from 'yup'\nexport { yupResolver } from '@hookform/resolvers/yup'\n\nimport { FieldProps } from '../field'\n\n// @TODO get proper typings for the schema fields\n\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\ntype Options = {\n  min?: number\n  max?: number\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 = (\n  schema: SchemaOf<AnySchema>\n): 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: SchemaOf<AnySchema>, path: string) => {\n  return reach(schema, path)\n}\n","import * as React from 'react'\n\nimport { chakra, SimpleGrid, SimpleGridProps, useTheme } from '@chakra-ui/react'\n\nexport type FormLayoutProps = SimpleGridProps\n\ninterface FormLayoutItemProps {\n  children: React.ReactNode\n}\n\nconst FormLayoutItem: React.FC<FormLayoutItemProps> = ({ children }) => {\n  return <chakra.div>{children}</chakra.div>\n}\n\n/**\n * FormLayout\n *\n * Renders form items in a `SimpleGrid`\n * @see https://chakra-ui.com/docs/layout/simple-grid\n */\nexport const FormLayout = ({ children, ...props }: FormLayoutProps) => {\n  const theme = useTheme()\n\n  const defaultProps = theme.components?.FormLayout?.defaultProps ?? {\n    spacing: 4,\n  }\n\n  const gridProps = {\n    ...defaultProps,\n    ...props,\n  }\n\n  return (\n    <SimpleGrid {...gridProps}>\n      {React.Children.map(children, (child) => {\n        if (React.isValidElement(child)) {\n          return <FormLayoutItem>{child}</FormLayoutItem>\n        }\n        return child\n      })}\n    </SimpleGrid>\n  )\n}\n","import * as React from 'react'\n\nexport const mapNestedFields = (name: string, children: React.ReactNode) => {\n  return React.Children.map(children, (child) => {\n    if (React.isValidElement(child) && child.props.name) {\n      return React.cloneElement(child, {\n        ...child.props,\n        name: `${name}.${child.props.name}`,\n      })\n    }\n    return child\n  })\n}\n","import * as React from 'react'\nimport {\n  useFieldArray,\n  useFormContext,\n  UseFieldArrayReturn,\n} from 'react-hook-form'\n\nimport { createContext } from '@chakra-ui/react-utils'\n\nexport interface UseArrayFieldReturn extends UseFieldArrayReturn {\n  /**\n   * The array field name\n   */\n  name: string\n  /**\n   * The default value for new items\n   */\n  defaultValue: Record<string, any>\n  /**\n   * Min amount of items\n   */\n  min?: number\n  /**\n   * Max amount of items\n   */\n  max?: number\n}\n\nexport const [ArrayFieldProvider, useArrayFieldContext] =\n  createContext<UseArrayFieldReturn>({\n    name: 'ArrayFieldContext',\n  })\n\nexport interface UseArrayFieldRowReturn {\n  /**\n   * Name of the array field including the index, eg 'field.0'\n   */\n  name: string\n  /**\n   * The field index\n   */\n  index: number\n  /**\n   * Remove this array item\n   */\n  remove: () => void\n  /**\n   * True if this is the first item\n   */\n  isFirst: boolean\n  /**\n   * True if this is the last item\n   */\n  isLast: boolean\n}\n\nexport const [ArrayFieldRowProvider, useArrayFieldRowContext] =\n  createContext<UseArrayFieldRowReturn>({\n    name: 'ArrayFieldRowContext',\n  })\n\nexport interface ArrayFieldOptions {\n  /**\n   * The field name\n   */\n  name: string\n  /**\n   * Default value for new values in the array\n   */\n  defaultValue?: Record<string, any>\n  /**\n   * Default key name for rows, change this if your data uses 'id'\n   * @default \"id\"\n   */\n  keyName?: string\n  min?: number\n  max?: number\n}\n\nexport const useArrayField = ({\n  name,\n  defaultValue = {},\n  keyName,\n  min,\n  max,\n}: ArrayFieldOptions) => {\n  const { control } = useFormContext()\n  const context = useFieldArray({\n    control,\n    name,\n    keyName,\n  })\n\n  return {\n    ...context,\n    name,\n    defaultValue,\n    min,\n    max,\n  }\n}\n\nexport interface UseArrayFieldRowProps {\n  index: number\n}\n\nexport const useArrayFieldRow = ({ index }: UseArrayFieldRowProps) => {\n  const { clearErrors } = useFormContext()\n  const { name, remove, fields } = useArrayFieldContext()\n\n  React.useEffect(() => {\n    // reset errors, to make sure min/max errors reset correctly\n    clearErrors(name)\n  }, [])\n\n  return {\n    index,\n    isFirst: index === 0,\n    isLast: index === fields.length - 1,\n    name: `${name}.${index}`,\n    remove: React.useCallback(() => {\n      clearErrors(name)\n      remove(index)\n    }, [index]),\n  }\n}\n\nexport const useArrayFieldRemoveButton = () => {\n  const { isFirst, remove } = useArrayFieldRowContext()\n  const { min, fields } = useArrayFieldContext()\n\n  const isDisabled = isFirst && !!(min && fields.length <= min)\n\n  return {\n    onClick: () => remove(),\n    isDisabled,\n  }\n}\n\nexport const useArrayFieldAddButton = () => {\n  const { append, defaultValue, max, fields } = useArrayFieldContext()\n\n  const isDisabled = !!(max && fields.length >= max)\n\n  return {\n    onClick: () =>\n      append(defaultValue, {\n        shouldFocus: false,\n      }),\n    isDisabled,\n  }\n}\n","import * as React from 'react'\n\nimport { chakra, ResponsiveValue } from '@chakra-ui/system'\n\nimport { AddIcon, MinusIcon } from '@chakra-ui/icons'\nimport { IconButton, ButtonProps } from '@saas-ui/button'\n\nimport { FormLayout } from './layout'\nimport { BaseField, FieldProps } from './field'\n\nimport { mapNestedFields } from './utils'\n\nimport {\n  useArrayField,\n  useArrayFieldRow,\n  useArrayFieldContext,\n  ArrayFieldProvider,\n  ArrayFieldOptions,\n  ArrayFieldRowProvider,\n  useArrayFieldRowContext,\n  useArrayFieldRemoveButton,\n  useArrayFieldAddButton,\n} from './use-array-field'\n\ninterface ArrayField {\n  id: string\n  [key: string]: unknown\n}\n\ninterface ArrayFieldRowProps {\n  /**\n   * Amount of field columns\n   */\n  columns?: ResponsiveValue<number>\n  /**\n   * Spacing between fields\n   */\n  spacing?: ResponsiveValue<string | number>\n  /**\n   * The array index\n   */\n  index: number\n}\n\nexport const ArrayFieldRow: React.FC<ArrayFieldRowProps> = ({\n  children,\n  columns,\n  spacing,\n  index,\n}) => {\n  return (\n    <ArrayFieldRowContainer index={index}>\n      <ArrayFieldRowFields columns={columns} spacing={spacing}>\n        {children}\n      </ArrayFieldRowFields>\n      <ArrayFieldRemoveButton />\n    </ArrayFieldRowContainer>\n  )\n}\n\nexport interface ArrayFieldRowFieldsProps {\n  /**\n   * Amount of field columns\n   */\n  columns?: ResponsiveValue<number>\n  /**\n   * Spacing between fields\n   */\n  spacing?: ResponsiveValue<string | number>\n}\n\nexport const ArrayFieldRowFields: React.FC<ArrayFieldRowFieldsProps> = ({\n  children,\n  columns,\n  spacing,\n  ...layoutProps\n}) => {\n  const { name } = useArrayFieldRowContext()\n  return (\n    <FormLayout\n      flex=\"1\"\n      columns={columns}\n      gridGap={spacing}\n      mr=\"2\"\n      {...layoutProps}\n    >\n      {mapNestedFields(name, children)}\n    </FormLayout>\n  )\n}\n\nexport const ArrayFieldRowContainer: React.FC<ArrayFieldRowProps> = ({\n  children,\n  index,\n}) => {\n  const context = useArrayFieldRow({ index })\n\n  const styles = {\n    display: 'flex',\n    flexDirection: 'row',\n    alignItems: 'flex-end',\n    width: '100%',\n    mb: 4,\n  }\n\n  return (\n    <ArrayFieldRowProvider value={context}>\n      <chakra.div __css={styles}>{children}</chakra.div>\n    </ArrayFieldRowProvider>\n  )\n}\n\nexport const ArrayFieldRemoveButton: React.FC<ButtonProps> = (props) => {\n  return (\n    <IconButton\n      icon={<MinusIcon />}\n      aria-label=\"Remove row\"\n      {...useArrayFieldRemoveButton()}\n      {...props}\n    />\n  )\n}\n\nexport const ArrayFieldAddButton: React.FC<ButtonProps> = (props) => {\n  return (\n    <IconButton\n      icon={<AddIcon />}\n      aria-label=\"Add row\"\n      float=\"right\"\n      {...useArrayFieldAddButton()}\n      {...props}\n    />\n  )\n}\n\nexport interface ArrayFieldProps\n  extends ArrayFieldOptions,\n    Omit<FieldProps, 'defaultValue'> {}\n\nexport const ArrayField: React.FC<ArrayFieldProps> = (props) => {\n  const { children, ...containerProps } = props\n\n  return (\n    <ArrayFieldContainer {...containerProps}>\n      <ArrayFieldRows>\n        {(fields: ArrayField[]) => (\n          <>\n            {fields.map(({ id }, index: number) => (\n              <ArrayFieldRow key={id} index={index}>\n                {children}\n              </ArrayFieldRow>\n            ))}\n          </>\n        )}\n      </ArrayFieldRows>\n      <ArrayFieldAddButton />\n    </ArrayFieldContainer>\n  )\n}\n\nexport interface ArrayFieldRowsProps {\n  children: (fields: ArrayField[]) => React.ReactElement | null\n}\n\nexport const ArrayFieldRows = ({\n  children,\n}: ArrayFieldRowsProps): React.ReactElement | null => {\n  const { fields } = useArrayFieldContext()\n  return children(fields)\n}\n\nexport const ArrayFieldContainer: React.FC<ArrayFieldProps> = ({\n  name,\n  defaultValue,\n  keyName,\n  min,\n  max,\n  children,\n  ...fieldProps\n}) => {\n  const context = useArrayField({\n    name,\n    defaultValue,\n    keyName,\n    min,\n    max,\n  })\n\n  return (\n    <ArrayFieldProvider value={context}>\n      <BaseField name={name} {...fieldProps}>\n        {children}\n      </BaseField>\n    </ArrayFieldProvider>\n  )\n}\n","import * as React from 'react'\nimport {\n  FormControl,\n  FormLabel,\n  FormLabelProps,\n  ResponsiveValue,\n  useStyles,\n} from '@chakra-ui/react'\n\nimport { FormLayout } from './layout'\nimport { FieldProps } from './field'\n\nimport { mapNestedFields } from './utils'\n\nexport interface ObjectFieldProps extends FieldProps {\n  name: string\n  children: React.ReactNode\n  columns?: ResponsiveValue<number>\n  spacing?: ResponsiveValue<string | number>\n}\n\nexport const FormLegend = (props: FormLabelProps) => {\n  const styles = useStyles()\n  return <FormLabel as=\"legend\" sx={styles.legend} {...props} />\n}\n\nexport const ObjectField: React.FC<ObjectFieldProps> = (props) => {\n  const { name, label, hideLabel, children, columns, spacing, ...fieldProps } =\n    props\n\n  return (\n    <FormControl name={name} as=\"fieldset\" {...fieldProps}>\n      <FormLegend display={hideLabel ? 'none' : 'block'}>{label}</FormLegend>\n      <FormLayout columns={columns} gridGap={spacing}>\n        {mapNestedFields(name, children)}\n      </FormLayout>\n    </FormControl>\n  )\n}\n","import * as React from 'react'\nimport { getFieldsFromSchema, getNestedSchema } from './resolvers/yup'\n\nimport { FormLayout } from './layout'\nimport { Field, FieldProps } from './field'\n\nimport { ArrayField } from './array-field'\nimport { ObjectField } from './object-field'\n\nexport interface FieldsProps {\n  schema: any\n}\n\nconst getNestedFields = (schema: any, name: string) => {\n  return getFieldsFromSchema(getNestedSchema(schema, name)).map(\n    ({ name, type, ...nestedFieldProps }: FieldProps): React.ReactNode => (\n      <Field key={name} name={name} type={type} {...nestedFieldProps} />\n    )\n  )\n}\n\nexport const Fields: React.FC<FieldsProps> = ({ schema, ...props }) => {\n  return (\n    <FormLayout {...props}>\n      {getFieldsFromSchema(schema).map(\n        ({\n          name,\n          type,\n          defaultValue,\n          ...fieldProps\n        }: FieldProps): React.ReactNode => {\n          if (type === 'array') {\n            return (\n              <ArrayField name={name} {...fieldProps}>\n                {getNestedFields(schema, name)}\n              </ArrayField>\n            )\n          } else if (type === 'object') {\n            return (\n              <ObjectField name={name} {...fieldProps}>\n                {getNestedFields(schema, name)}\n              </ObjectField>\n            )\n          }\n\n          return <Field key={name} name={name} type={type} {...fieldProps} />\n        }\n      )}\n    </FormLayout>\n  )\n}\n","import * as React from 'react'\n\nimport { chakra, HTMLChakraProps, forwardRef } from '@chakra-ui/react'\n\nimport {\n  useForm,\n  FormProvider,\n  UseFormProps,\n  UseFormReturn,\n  FieldValues,\n  SubmitHandler,\n  SubmitErrorHandler,\n} from 'react-hook-form'\n\nimport { yupResolver } from './resolvers/yup'\n\nexport type { UseFormReturn }\n\ninterface FormOptions<TFieldValues extends FieldValues = FieldValues> {\n  /**\n   * The form schema, currently supports Yup schema only.\n   */\n  schema?: any\n  /**\n   * The submit handler.\n   */\n  onSubmit: SubmitHandler<TFieldValues>\n  /**\n   * Triggers when there are validation errors.\n   */\n  onError?: SubmitErrorHandler<TFieldValues>\n  /**\n   * Ref on the HTMLFormElement.\n   */\n  formRef?: React.MutableRefObject<HTMLFormElement>\n}\n\nexport interface FormProps<TFieldValues extends FieldValues = FieldValues>\n  extends UseFormProps<TFieldValues>,\n    Omit<HTMLChakraProps<'form'>, 'onSubmit' | 'onError'>,\n    FormOptions<TFieldValues> {}\n\n/**\n * @todo Figure out how to pass down FieldValues to all Field components,\n * if at all possible.\n */\nexport const Form = forwardRef(\n  <TFieldValues extends FieldValues = FieldValues>(\n    props: FormProps<TFieldValues>,\n    ref: React.ForwardedRef<UseFormReturn<TFieldValues>>\n  ) => {\n    const {\n      mode = 'all',\n      resolver,\n      reValidateMode,\n      shouldFocusError,\n      shouldUnregister,\n      shouldUseNativeValidation,\n      criteriaMode,\n      delayError,\n      schema,\n      defaultValues,\n      onSubmit,\n      onError,\n      formRef,\n      children,\n      ...rest\n    } = props\n\n    const form = {\n      mode,\n      resolver,\n      defaultValues,\n      reValidateMode,\n      shouldFocusError,\n      shouldUnregister,\n      shouldUseNativeValidation,\n      criteriaMode,\n      delayError,\n    }\n\n    // @todo remove yup dependency and just use resolver prop?\n    if (schema) {\n      form.resolver = yupResolver(schema)\n    }\n\n    const methods = useForm<TFieldValues>(form)\n    const { handleSubmit } = methods\n\n    // This exposes the useForm api through the forwareded ref\n    React.useImperativeHandle(ref, () => methods, [ref, methods])\n\n    return (\n      <FormProvider {...methods}>\n        <chakra.form\n          ref={formRef}\n          onSubmit={handleSubmit(onSubmit, onError)}\n          {...rest}\n        >\n          {children}\n        </chakra.form>\n      </FormProvider>\n    )\n  }\n) as <TFieldValues extends FieldValues>(\n  props: FormProps<TFieldValues> & {\n    ref?: React.ForwardedRef<UseFormReturn<TFieldValues>>\n  }\n) => React.ReactElement\n","import * as React from 'react'\n\nimport { useFormContext } from 'react-hook-form'\n\nimport { Button, ButtonProps } from '@saas-ui/button'\n\nimport { forwardRef } from '@chakra-ui/system'\n\nexport interface SubmitButtonProps extends ButtonProps {\n  /**\n   * Disable the submit button if the form is untouched.\n   *\n   * Change the default behavior by updating\n   * `SubmitButton.defaultProps.disableIfUntouched`\n   */\n  disableIfUntouched?: boolean\n  /**\n   * Disable the submit button if the form is invalid.\n   *\n   * Change the default behavior by updating\n   * `SubmitButton.defaultProps.disableIfInvalid`\n   */\n  disableIfInvalid?: boolean\n}\n\nexport const SubmitButton = forwardRef<SubmitButtonProps, 'button'>(\n  (props, ref) => {\n    const { children, disableIfUntouched, disableIfInvalid, ...rest } = props\n    const { formState } = useFormContext()\n\n    const isDisabled =\n      (disableIfUntouched && !formState.isDirty) ||\n      (disableIfInvalid && !formState.isValid)\n\n    return (\n      <Button\n        type=\"submit\"\n        isLoading={formState.isSubmitting}\n        isPrimary\n        ref={ref}\n        isDisabled={isDisabled}\n        {...rest}\n      >\n        {children}\n      </Button>\n    )\n  }\n)\n\nSubmitButton.defaultProps = {\n  label: 'Submit',\n  disableIfUntouched: false,\n  disableIfInvalid: false,\n}\n","import * as React from 'react'\nimport { FieldValues, UseFormReturn } from 'react-hook-form'\nimport { forwardRef } from '@chakra-ui/react'\n\nimport { Form, FormProps } from './form'\n\nimport { FormLayout } from './layout'\nimport { Fields } from './fields'\nimport { SubmitButton } from './submit-button'\n\ninterface AutoFormOptions {\n  schema: any\n  submitLabel?: false | string\n}\n\nexport interface AutoFormProps<TFieldValues extends FieldValues>\n  extends Omit<FormProps<TFieldValues>, 'schema'>,\n    AutoFormOptions {}\n\nexport const AutoForm = forwardRef(\n  <TFieldValues extends FieldValues = FieldValues>(\n    props: AutoFormProps<TFieldValues>,\n    ref: React.ForwardedRef<UseFormReturn<TFieldValues>>\n  ) => {\n    const { schema, submitLabel = 'Submit', ...rest } = props\n    return (\n      <Form {...rest} schema={schema} ref={ref}>\n        <FormLayout>\n          {<Fields schema={schema} />}\n          {submitLabel && <SubmitButton label={submitLabel} />}\n        </FormLayout>\n      </Form>\n    )\n  }\n) as <TFieldValues extends FieldValues>(\n  props: AutoFormProps<TFieldValues> & {\n    ref?: React.ForwardedRef<UseFormReturn<TFieldValues>>\n  }\n) => React.ReactElement\n","import * as React from 'react'\nimport {\n  useFormContext,\n  useWatch,\n  FieldValues,\n  UseFormReturn,\n} from 'react-hook-form'\n\nexport interface DisplayIfProps<TFieldValues> {\n  children: React.ReactElement\n  name: string\n  defaultValue?: unknown\n  isDisabled?: boolean\n  isExact?: boolean\n  condition?: (value: unknown, context: UseFormReturn<TFieldValues>) => boolean\n}\n\nexport const DisplayIf = <TFieldValues extends FieldValues = FieldValues>({\n  children,\n  name,\n  defaultValue,\n  isDisabled,\n  isExact,\n  condition = (value) => !!value,\n}: DisplayIfProps<TFieldValues>) => {\n  const value = useWatch({\n    name,\n    defaultValue,\n    disabled: isDisabled,\n    exact: isExact,\n  })\n  const context = useFormContext<TFieldValues>()\n  return condition(value, context) ? children : null\n}\n"],"names":["DisplayField","_ref","name","label","props","getValues","useFormContext","React","FormControl","FormLabel","htmlFor","Text","fontSize","inputTypes","defaultInputType","BaseField","help","variant","hideLabel","children","controlProps","formState","error","get","errors","getError","isInvalid","Box","message","FormHelperText","FormErrorMessage","Field","forwardRef","ref","type","InputComponent","getInput","withControlledInput","rules","inputProps","control","Controller","render","_ref3","field","useMergeRefs","withUncontrolledInput","register","registerFieldType","component","options","isControlled","displayName","isDisabled","isReadOnly","isRequired","inputRules","required","createField","split","map","part","charAt","toUpperCase","slice","join","InputField","Input","NumberInputField","NumberInput","PasswordInputFIeld","PasswordInput","TextareaField","Textarea","SwitchField","Switch","SelectField","Select","CheckboxField","Checkbox","RadioField","RadioInput","PinField","PinInput","NativeSelectField","NativeSelect","getType","spec","meta","_field$spec$meta","getArrayOption","test","tests","OPTIONS","_test$OPTIONS","params","getFieldsFromSchema","schema","fields","schemaFields","innerType","min","max","push","FormLayoutItem","chakra","div","FormLayout","gridProps","useTheme","components","_theme$components","_theme$components$For2","defaultProps","spacing","SimpleGrid","Children","child","isValidElement","mapNestedFields","cloneElement","ArrayFieldProvider","useArrayFieldContext","createContext","ArrayFieldRowProvider","useArrayFieldRowContext","useArrayField","defaultValue","keyName","useFieldArray","useArrayFieldRow","index","clearErrors","remove","useEffect","isFirst","isLast","length","useCallback","useArrayFieldRemoveButton","onClick","useArrayFieldAddButton","append","shouldFocus","ArrayFieldRow","columns","ArrayFieldRowContainer","ArrayFieldRowFields","ArrayFieldRemoveButton","layoutProps","flex","gridGap","mr","context","value","__css","display","flexDirection","alignItems","width","mb","IconButton","icon","MinusIcon","ArrayFieldAddButton","AddIcon","float","ArrayField","containerProps","ArrayFieldContainer","ArrayFieldRows","id","key","_ref2","fieldProps","FormLegend","styles","useStyles","as","sx","legend","ObjectField","getNestedFields","path","reach","getNestedSchema","nestedFieldProps","Fields","Form","mode","resolver","reValidateMode","shouldFocusError","shouldUnregister","shouldUseNativeValidation","criteriaMode","delayError","defaultValues","onSubmit","onError","formRef","rest","form","yupResolver","methods","useForm","handleSubmit","useImperativeHandle","FormProvider","SubmitButton","disableIfUntouched","disableIfInvalid","Button","isLoading","isSubmitting","isPrimary","isDirty","isValid","AutoForm","submitLabel","DisplayIf","isExact","condition","useWatch","disabled","exact"],"mappings":"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"}
+{"version":3,"file":"index.modern.js","sources":["../src/display-field.tsx","../src/field.tsx","../src/resolvers/yup.ts","../src/layout.tsx","../src/utils.ts","../src/use-array-field.tsx","../src/array-field.tsx","../src/object-field.tsx","../src/fields.tsx","../src/form.tsx","../src/submit-button.tsx","../src/auto-form.tsx","../src/display-if.tsx","../../saas-ui-stepper/dist/index.modern.js","../src/use-step-form.tsx","../src/step-form.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useFormContext } from 'react-hook-form'\n\nimport {\n  Text,\n  FormControl,\n  FormControlProps,\n  FormLabel,\n} from '@chakra-ui/react'\n\nimport { FieldProps } from './field'\n\nexport interface DisplayFieldProps\n  extends FormControlProps,\n    Omit<FieldProps, 'type' | 'label'> {}\n\nexport const DisplayField: React.FC<DisplayFieldProps> = ({\n  name,\n  label,\n  placeholder,\n  ...props\n}) => {\n  return (\n    <FormControl {...props}>\n      {label ? <FormLabel htmlFor={name}>{label}</FormLabel> : null}\n      <Text fontSize=\"md\">\n        <FormValue name={name} />\n      </Text>\n    </FormControl>\n  )\n}\n\nexport const FormValue: React.FC<{ name: string }> = ({ name }) => {\n  const { getValues } = useFormContext()\n  return getValues(name) || null\n}\n","import * as React from 'react'\nimport {\n  useFormContext,\n  FormState,\n  Controller,\n  get,\n  RegisterOptions,\n  FieldValues,\n  FieldPath,\n} from 'react-hook-form'\n\nimport {\n  forwardRef,\n  Box,\n  FormControl,\n  FormControlProps,\n  FormLabel,\n  FormHelperText,\n  FormErrorMessage,\n  Input,\n  Textarea,\n  Checkbox,\n  Switch,\n  useMergeRefs,\n} from '@chakra-ui/react'\n\nimport { NumberInput } from '@saas-ui/number-input'\nimport { PasswordInput } from '@saas-ui/password-input'\nimport { RadioInput } from '@saas-ui/radio'\nimport { PinInput } from '@saas-ui/pin-input'\nimport { Select, NativeSelect } from '@saas-ui/select'\n\nexport interface Option {\n  value: string\n  label?: string\n  [key: string]: unknown\n}\n\nexport type FieldRules = Pick<\n  RegisterOptions,\n  'required' | 'min' | 'max' | 'maxLength' | 'minLength' | 'pattern'\n>\n\nexport type FieldTypes =\n  | 'text'\n  | 'number'\n  | 'password'\n  | 'textarea'\n  | 'select'\n  | 'native-select'\n  | 'checkbox'\n  | 'radio'\n  | 'switch'\n  | 'pin'\n  | string\n\nexport interface FieldProps<\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n> extends Omit<FormControlProps, 'label' | 'type'> {\n  /**\n   * The field name\n   */\n  name: TName\n  /**\n   * The field label\n   */\n  label?: string\n  /**\n   * Hide the field label\n   */\n  hideLabel?: boolean\n  /**\n   * Field help text\n   */\n  help?: string\n  /**\n   * React hook form rules\n   */\n  rules?: Omit<\n    RegisterOptions<TFieldValues, TName>,\n    'valueAsNumber' | 'valueAsDate' | 'setValueAs' | 'disabled'\n  >\n  /**\n   * Options used for selects and radio fields\n   */\n  options?: Option[]\n  /**\n   * The field type\n   * Build-in types:\n   * - text\n   * - number\n   * - password\n   * - textarea\n   * - select\n   * - native-select\n   * - checkbox\n   * - radio\n   * - switch\n   * - pin\n   *\n   * Will default to a text field if there is no matching type.\n   * @default 'text'\n   */\n  type?: FieldTypes\n  /**\n   * The input placeholder\n   */\n  placeholder?: string\n}\n\nconst inputTypes: Record<FieldTypes, any> = {}\n\nconst defaultInputType = 'text'\n\nconst getInput = (type: string) => {\n  return inputTypes[type] || inputTypes[defaultInputType]\n}\n\nconst getError = (name: string, formState: FormState<{ [x: string]: any }>) => {\n  return get(formState.errors, name)\n}\n\nconst isTouched = (\n  name: string,\n  formState: FormState<{ [x: string]: any }>\n) => {\n  return get(formState.touchedFields, name)\n}\n\nexport const BaseField: React.FC<FieldProps> = (props) => {\n  const { name, label, help, variant, hideLabel, children, ...controlProps } =\n    props\n\n  const { formState } = useFormContext()\n\n  const error = getError(name, formState)\n\n  return (\n    <FormControl variant={variant} {...controlProps} isInvalid={!!error}>\n      {label && !hideLabel ? (\n        <FormLabel variant={variant}>{label}</FormLabel>\n      ) : null}\n      <Box>\n        {children}\n        {help && !error?.message ? (\n          <FormHelperText>{help}</FormHelperText>\n        ) : null}\n        {error?.message && (\n          <FormErrorMessage>{error?.message}</FormErrorMessage>\n        )}\n      </Box>\n    </FormControl>\n  )\n}\nexport const Field = forwardRef(\n  <TFieldValues extends FieldValues = FieldValues>(\n    props: FieldProps<TFieldValues> & {\n      [key: string]: unknown // Make sure attributes of custom components work. Need to change this to a global typedef at some point.\n    },\n    ref: React.ForwardedRef<typeof FormControl>\n  ) => {\n    const { type = defaultInputType } = props\n    const InputComponent = getInput(type)\n\n    return <InputComponent ref={ref} {...props} />\n  }\n) as <TFieldValues extends FieldValues>(\n  props: FieldProps<TFieldValues> & {\n    [key: string]: unknown\n  } & {\n    ref?: React.ForwardedRef<typeof FormControl>\n  }\n) => React.ReactElement\n\ninterface CreateFieldProps {\n  displayName: string\n  hideLabel?: boolean\n  BaseField: React.FC<any>\n}\n\nconst createField = (\n  InputComponent: React.FC<any>,\n  { displayName, hideLabel, BaseField }: CreateFieldProps\n) => {\n  const Field = forwardRef<FieldProps, typeof FormControl>((props, ref) => {\n    const {\n      name,\n      label,\n      help,\n      isDisabled,\n      isInvalid,\n      isReadOnly,\n      isRequired,\n      rules,\n      variant,\n      ...inputProps\n    } = props\n\n    const inputRules = {\n      required: isRequired,\n      ...rules,\n    }\n\n    return (\n      <BaseField\n        name={name}\n        label={label}\n        help={help}\n        hideLabel={hideLabel}\n        isDisabled={isDisabled}\n        isInvalid={isInvalid}\n        isReadOnly={isReadOnly}\n        isRequired={isRequired}\n        variant={variant}\n      >\n        <InputComponent\n          ref={ref}\n          name={name}\n          label={label}\n          rules={inputRules}\n          {...inputProps}\n        />\n      </BaseField>\n    )\n  })\n  Field.displayName = displayName\n\n  return Field\n}\n\nexport const withControlledInput = (InputComponent: any) => {\n  return forwardRef<FieldProps, typeof InputComponent>(\n    ({ name, rules, ...inputProps }, ref) => {\n      const { control } = useFormContext()\n\n      return (\n        <Controller\n          name={name}\n          control={control}\n          rules={rules}\n          render={({ field: { ref: _ref, ...field } }) => (\n            <InputComponent\n              {...field}\n              {...inputProps}\n              ref={useMergeRefs(ref, _ref)}\n            />\n          )}\n        />\n      )\n    }\n  )\n}\n\nexport const withUncontrolledInput = (InputComponent: any) => {\n  return forwardRef<FieldProps, typeof InputComponent>(\n    ({ name, rules, ...inputProps }, ref) => {\n      const { register } = useFormContext()\n\n      const { ref: _ref, ...field } = register(name, rules)\n\n      return (\n        <InputComponent\n          {...field}\n          {...inputProps}\n          ref={useMergeRefs(ref, _ref)}\n        />\n      )\n    }\n  )\n}\n\nexport interface RegisterFieldTypeOptions {\n  isControlled?: boolean\n  hideLabel?: boolean\n  BaseField?: React.FC<any>\n}\n\n/**\n * Register a new field type\n * @param type The name for this field in kebab-case, eg `email` or `array-field`\n * @param component The React component\n * @param options\n * @param options.isControlled Set this to true if this is a controlled field.\n * @param options.hideLabel Hide the field label, for example for checkbox or switch field.\n */\nexport const registerFieldType = (\n  type: string,\n  component: React.FC<any>,\n  options?: RegisterFieldTypeOptions\n) => {\n  let InputComponent\n  if (options?.isControlled) {\n    InputComponent = withControlledInput(component)\n  } else {\n    InputComponent = withUncontrolledInput(component)\n  }\n\n  const Field = createField(InputComponent, {\n    displayName: `${type\n      .split('-')\n      .map((part) => part.charAt(0).toUpperCase() + part.slice(1))\n      .join('')}Field`,\n    hideLabel: options?.hideLabel,\n    BaseField: options?.BaseField || BaseField,\n  })\n\n  inputTypes[type] = Field\n\n  return Field\n}\n\n// @todo Consider not registering all fields by default to lower the package size and computations.\n// Not all types may be required in a project.\nexport const InputField = registerFieldType('text', Input)\nexport const NumberInputField = registerFieldType('number', NumberInput, {\n  isControlled: true,\n})\nexport const PasswordInputFIeld = registerFieldType('password', PasswordInput)\nexport const TextareaField = registerFieldType('textarea', Textarea)\nexport const SwitchField = registerFieldType(\n  'switch',\n  forwardRef(({ label, ...props }: { label?: string }, ref) => {\n    return (\n      <Switch ref={ref} {...props}>\n        {label}\n      </Switch>\n    )\n  }),\n  {\n    isControlled: true,\n    hideLabel: true,\n  }\n)\nexport const SelectField = registerFieldType('select', Select, {\n  isControlled: true,\n})\nexport const CheckboxField = registerFieldType(\n  'checkbox',\n  forwardRef(({ label, ...props }: { label?: string }, ref) => {\n    return (\n      <Checkbox ref={ref} {...props}>\n        {label}\n      </Checkbox>\n    )\n  }),\n  {\n    hideLabel: true,\n  }\n)\nexport const RadioField = registerFieldType('radio', RadioInput, {\n  isControlled: true,\n})\nexport const PinField = registerFieldType('pin', PinInput, {\n  isControlled: true,\n})\nexport const NativeSelectField = registerFieldType(\n  'native-select',\n  NativeSelect,\n  { isControlled: true }\n)\n","import { SchemaOf, AnySchema, reach } from 'yup'\nexport { yupResolver } from '@hookform/resolvers/yup'\n\nimport { FieldProps } from '../field'\n\n// @TODO get proper typings for the schema fields\n\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\ntype Options = {\n  min?: number\n  max?: number\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 = (\n  schema: SchemaOf<AnySchema>\n): 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: SchemaOf<AnySchema>, path: string) => {\n  return reach(schema, path)\n}\n","import * as React from 'react'\n\nimport { chakra, SimpleGrid, SimpleGridProps, useTheme } from '@chakra-ui/react'\n\nexport type FormLayoutProps = SimpleGridProps\n\ninterface FormLayoutItemProps {\n  children: React.ReactNode\n}\n\nconst FormLayoutItem: React.FC<FormLayoutItemProps> = ({ children }) => {\n  return <chakra.div>{children}</chakra.div>\n}\n\n/**\n * FormLayout\n *\n * Renders form items in a `SimpleGrid`\n * @see https://chakra-ui.com/docs/layout/simple-grid\n */\nexport const FormLayout = ({ children, ...props }: FormLayoutProps) => {\n  const theme = useTheme()\n\n  const defaultProps = theme.components?.FormLayout?.defaultProps ?? {\n    spacing: 4,\n  }\n\n  const gridProps = {\n    ...defaultProps,\n    ...props,\n  }\n\n  return (\n    <SimpleGrid {...gridProps}>\n      {React.Children.map(children, (child) => {\n        if (React.isValidElement(child)) {\n          return <FormLayoutItem>{child}</FormLayoutItem>\n        }\n        return child\n      })}\n    </SimpleGrid>\n  )\n}\n","import * as React from 'react'\n\nexport const mapNestedFields = (name: string, children: React.ReactNode) => {\n  return React.Children.map(children, (child) => {\n    if (React.isValidElement(child) && child.props.name) {\n      return React.cloneElement(child, {\n        ...child.props,\n        name: `${name}.${child.props.name}`,\n      })\n    }\n    return child\n  })\n}\n","import * as React from 'react'\nimport {\n  useFieldArray,\n  useFormContext,\n  UseFieldArrayReturn,\n} from 'react-hook-form'\n\nimport { createContext } from '@chakra-ui/react-utils'\n\nexport interface UseArrayFieldReturn extends UseFieldArrayReturn {\n  /**\n   * The array field name\n   */\n  name: string\n  /**\n   * The default value for new items\n   */\n  defaultValue: Record<string, any>\n  /**\n   * Min amount of items\n   */\n  min?: number\n  /**\n   * Max amount of items\n   */\n  max?: number\n}\n\nexport const [ArrayFieldProvider, useArrayFieldContext] =\n  createContext<UseArrayFieldReturn>({\n    name: 'ArrayFieldContext',\n  })\n\nexport interface UseArrayFieldRowReturn {\n  /**\n   * Name of the array field including the index, eg 'field.0'\n   */\n  name: string\n  /**\n   * The field index\n   */\n  index: number\n  /**\n   * Remove this array item\n   */\n  remove: () => void\n  /**\n   * True if this is the first item\n   */\n  isFirst: boolean\n  /**\n   * True if this is the last item\n   */\n  isLast: boolean\n}\n\nexport const [ArrayFieldRowProvider, useArrayFieldRowContext] =\n  createContext<UseArrayFieldRowReturn>({\n    name: 'ArrayFieldRowContext',\n  })\n\nexport interface ArrayFieldOptions {\n  /**\n   * The field name\n   */\n  name: string\n  /**\n   * Default value for new values in the array\n   */\n  defaultValue?: Record<string, any>\n  /**\n   * Default key name for rows, change this if your data uses a different 'id' field\n   * @default \"id\"\n   */\n  keyName?: string\n  min?: number\n  max?: number\n}\n\nexport const useArrayField = ({\n  name,\n  defaultValue = {},\n  keyName,\n  min,\n  max,\n}: ArrayFieldOptions) => {\n  const { control } = useFormContext()\n  const context = useFieldArray({\n    control,\n    name,\n    keyName,\n  })\n\n  return {\n    ...context,\n    name,\n    defaultValue,\n    min,\n    max,\n  }\n}\n\nexport interface UseArrayFieldRowProps {\n  index: number\n}\n\nexport const useArrayFieldRow = ({ index }: UseArrayFieldRowProps) => {\n  const { clearErrors } = useFormContext()\n  const { name, remove, fields } = useArrayFieldContext()\n\n  React.useEffect(() => {\n    // reset errors, to make sure min/max errors reset correctly\n    clearErrors(name)\n  }, [])\n\n  return {\n    index,\n    isFirst: index === 0,\n    isLast: index === fields.length - 1,\n    name: `${name}.${index}`,\n    remove: React.useCallback(() => {\n      clearErrors(name)\n      remove(index)\n    }, [index]),\n  }\n}\n\nexport const useArrayFieldRemoveButton = () => {\n  const { isFirst, remove } = useArrayFieldRowContext()\n  const { min, fields } = useArrayFieldContext()\n\n  const isDisabled = isFirst && !!(min && fields.length <= min)\n\n  return {\n    onClick: () => remove(),\n    isDisabled,\n  }\n}\n\nexport const useArrayFieldAddButton = () => {\n  const { append, defaultValue, max, fields } = useArrayFieldContext()\n\n  const isDisabled = !!(max && fields.length >= max)\n\n  return {\n    onClick: () =>\n      append(defaultValue, {\n        shouldFocus: false,\n      }),\n    isDisabled,\n  }\n}\n","import * as React from 'react'\n\nimport { chakra, ResponsiveValue } from '@chakra-ui/system'\n\nimport { AddIcon, MinusIcon } from '@chakra-ui/icons'\nimport { IconButton, ButtonProps } from '@saas-ui/button'\n\nimport { FormLayout } from './layout'\nimport { BaseField, FieldProps } from './field'\n\nimport { mapNestedFields } from './utils'\n\nimport {\n  useArrayField,\n  useArrayFieldRow,\n  useArrayFieldContext,\n  ArrayFieldProvider,\n  ArrayFieldOptions,\n  ArrayFieldRowProvider,\n  useArrayFieldRowContext,\n  useArrayFieldRemoveButton,\n  useArrayFieldAddButton,\n  UseArrayFieldReturn,\n} from './use-array-field'\n\ninterface ArrayField {\n  id: string\n  [key: string]: unknown\n}\n\ninterface ArrayFieldRowProps {\n  /**\n   * Amount of field columns\n   */\n  columns?: ResponsiveValue<number>\n  /**\n   * Spacing between fields\n   */\n  spacing?: ResponsiveValue<string | number>\n  /**\n   * The array index\n   */\n  index: number\n}\n\nexport const ArrayFieldRow: React.FC<ArrayFieldRowProps> = ({\n  children,\n  columns,\n  spacing,\n  index,\n}) => {\n  return (\n    <ArrayFieldRowContainer index={index}>\n      <ArrayFieldRowFields columns={columns} spacing={spacing}>\n        {children}\n      </ArrayFieldRowFields>\n      <ArrayFieldRemoveButton />\n    </ArrayFieldRowContainer>\n  )\n}\n\nexport interface ArrayFieldRowFieldsProps {\n  /**\n   * Amount of field columns\n   */\n  columns?: ResponsiveValue<number>\n  /**\n   * Spacing between fields\n   */\n  spacing?: ResponsiveValue<string | number>\n}\n\nexport const ArrayFieldRowFields: React.FC<ArrayFieldRowFieldsProps> = ({\n  children,\n  columns,\n  spacing,\n  ...layoutProps\n}) => {\n  const { name } = useArrayFieldRowContext()\n  return (\n    <FormLayout\n      flex=\"1\"\n      columns={columns}\n      gridGap={spacing}\n      mr=\"2\"\n      {...layoutProps}\n    >\n      {mapNestedFields(name, children)}\n    </FormLayout>\n  )\n}\n\nexport const ArrayFieldRowContainer: React.FC<ArrayFieldRowProps> = ({\n  children,\n  index,\n}) => {\n  const context = useArrayFieldRow({ index })\n\n  const styles = {\n    display: 'flex',\n    flexDirection: 'row',\n    alignItems: 'flex-end',\n    width: '100%',\n    mb: 4,\n  }\n\n  return (\n    <ArrayFieldRowProvider value={context}>\n      <chakra.div __css={styles}>{children}</chakra.div>\n    </ArrayFieldRowProvider>\n  )\n}\n\nexport const ArrayFieldRemoveButton: React.FC<ButtonProps> = (props) => {\n  return (\n    <IconButton\n      icon={<MinusIcon />}\n      aria-label=\"Remove row\"\n      {...useArrayFieldRemoveButton()}\n      {...props}\n    />\n  )\n}\n\nexport const ArrayFieldAddButton: React.FC<ButtonProps> = (props) => {\n  return (\n    <IconButton\n      icon={<AddIcon />}\n      aria-label=\"Add row\"\n      float=\"right\"\n      {...useArrayFieldAddButton()}\n      {...props}\n    />\n  )\n}\n\nexport interface ArrayFieldProps\n  extends ArrayFieldOptions,\n    Omit<FieldProps, 'defaultValue'> {}\n\nexport const ArrayField = React.forwardRef(\n  (props: ArrayFieldProps, ref: React.ForwardedRef<UseArrayFieldReturn>) => {\n    const { children, ...containerProps } = props\n\n    return (\n      <ArrayFieldContainer ref={ref} {...containerProps}>\n        <ArrayFieldRows>\n          {(fields: ArrayField[]) => (\n            <>\n              {fields.map(({ id }, index: number) => (\n                <ArrayFieldRow key={id} index={index}>\n                  {children}\n                </ArrayFieldRow>\n              ))}\n            </>\n          )}\n        </ArrayFieldRows>\n        <ArrayFieldAddButton />\n      </ArrayFieldContainer>\n    )\n  }\n)\n\nexport interface ArrayFieldRowsProps {\n  children: (fields: ArrayField[]) => React.ReactElement | null\n}\n\nexport const ArrayFieldRows = ({\n  children,\n}: ArrayFieldRowsProps): React.ReactElement | null => {\n  const { fields } = useArrayFieldContext()\n  return children(fields)\n}\n\nexport const ArrayFieldContainer = React.forwardRef(\n  (\n    {\n      name,\n      defaultValue,\n      keyName,\n      min,\n      max,\n      children,\n      ...fieldProps\n    }: ArrayFieldProps,\n    ref: React.ForwardedRef<UseArrayFieldReturn>\n  ) => {\n    const context = useArrayField({\n      name,\n      defaultValue,\n      keyName,\n      min,\n      max,\n    })\n\n    // This exposes the useArrayField api through the forwarded ref\n    React.useImperativeHandle(ref, () => context, [ref, context])\n\n    return (\n      <ArrayFieldProvider value={context}>\n        <BaseField name={name} {...fieldProps}>\n          {children}\n        </BaseField>\n      </ArrayFieldProvider>\n    )\n  }\n)\n","import * as React from 'react'\nimport {\n  FormControl,\n  FormLabel,\n  FormLabelProps,\n  ResponsiveValue,\n  useStyles,\n} from '@chakra-ui/react'\n\nimport { FormLayout } from './layout'\nimport { FieldProps } from './field'\n\nimport { mapNestedFields } from './utils'\n\nexport interface ObjectFieldProps extends FieldProps {\n  name: string\n  children: React.ReactNode\n  columns?: ResponsiveValue<number>\n  spacing?: ResponsiveValue<string | number>\n}\n\nexport const FormLegend = (props: FormLabelProps) => {\n  const styles = useStyles()\n  return <FormLabel as=\"legend\" sx={styles.legend} {...props} />\n}\n\nexport const ObjectField: React.FC<ObjectFieldProps> = (props) => {\n  const { name, label, hideLabel, children, columns, spacing, ...fieldProps } =\n    props\n\n  return (\n    <FormControl name={name} as=\"fieldset\" {...fieldProps}>\n      <FormLegend display={hideLabel ? 'none' : 'block'}>{label}</FormLegend>\n      <FormLayout columns={columns} gridGap={spacing}>\n        {mapNestedFields(name, children)}\n      </FormLayout>\n    </FormControl>\n  )\n}\n","import * as React from 'react'\nimport { getFieldsFromSchema, getNestedSchema } from './resolvers/yup'\n\nimport { FormLayout } from './layout'\nimport { Field, FieldProps } from './field'\n\nimport { ArrayField } from './array-field'\nimport { ObjectField } from './object-field'\n\nexport interface FieldsProps {\n  schema: any\n}\n\nconst getNestedFields = (schema: any, name: string) => {\n  return getFieldsFromSchema(getNestedSchema(schema, name)).map(\n    ({ name, type, ...nestedFieldProps }: FieldProps): React.ReactNode => (\n      <Field key={name} name={name} type={type} {...nestedFieldProps} />\n    )\n  )\n}\n\nexport const Fields: React.FC<FieldsProps> = ({ schema, ...props }) => {\n  return (\n    <FormLayout {...props}>\n      {getFieldsFromSchema(schema).map(\n        ({\n          name,\n          type,\n          defaultValue,\n          ...fieldProps\n        }: FieldProps): React.ReactNode => {\n          if (type === 'array') {\n            return (\n              <ArrayField name={name} {...fieldProps}>\n                {getNestedFields(schema, name)}\n              </ArrayField>\n            )\n          } else if (type === 'object') {\n            return (\n              <ObjectField name={name} {...fieldProps}>\n                {getNestedFields(schema, name)}\n              </ObjectField>\n            )\n          }\n\n          return <Field key={name} name={name} type={type} {...fieldProps} />\n        }\n      )}\n    </FormLayout>\n  )\n}\n","import * as React from 'react'\n\nimport { chakra, HTMLChakraProps, forwardRef } from '@chakra-ui/react'\n\nimport {\n  useForm,\n  FormProvider,\n  UseFormProps,\n  UseFormReturn,\n  FieldValues,\n  SubmitHandler,\n  SubmitErrorHandler,\n} from 'react-hook-form'\n\nimport { yupResolver } from './resolvers/yup'\n\nexport type { UseFormReturn }\n\ninterface FormOptions<TFieldValues extends FieldValues = FieldValues> {\n  /**\n   * The form schema, currently supports Yup schema only.\n   */\n  schema?: any\n  /**\n   * The submit handler.\n   */\n  onSubmit: SubmitHandler<TFieldValues>\n  /**\n   * Triggers when there are validation errors.\n   */\n  onError?: SubmitErrorHandler<TFieldValues>\n  /**\n   * Ref on the HTMLFormElement.\n   */\n  formRef?: React.MutableRefObject<HTMLFormElement>\n}\n\nexport interface FormProps<TFieldValues extends FieldValues = FieldValues>\n  extends UseFormProps<TFieldValues>,\n    Omit<HTMLChakraProps<'form'>, 'onSubmit' | 'onError'>,\n    FormOptions<TFieldValues> {}\n\n/**\n * @todo Figure out how to pass down FieldValues to all Field components,\n * if at all possible.\n */\nexport const Form = forwardRef(\n  <TFieldValues extends FieldValues = FieldValues>(\n    props: FormProps<TFieldValues>,\n    ref: React.ForwardedRef<UseFormReturn<TFieldValues>>\n  ) => {\n    const {\n      mode = 'all',\n      resolver,\n      reValidateMode,\n      shouldFocusError,\n      shouldUnregister,\n      shouldUseNativeValidation,\n      criteriaMode,\n      delayError,\n      schema,\n      defaultValues,\n      onSubmit,\n      onError,\n      formRef,\n      children,\n      ...rest\n    } = props\n\n    const form = {\n      mode,\n      resolver,\n      defaultValues,\n      reValidateMode,\n      shouldFocusError,\n      shouldUnregister,\n      shouldUseNativeValidation,\n      criteriaMode,\n      delayError,\n    }\n\n    // @todo remove yup dependency and just use resolver prop?\n    if (schema) {\n      form.resolver = yupResolver(schema)\n    }\n\n    const methods = useForm<TFieldValues>(form)\n    const { handleSubmit } = methods\n\n    // This exposes the useForm api through the forwarded ref\n    React.useImperativeHandle(ref, () => methods, [ref, methods])\n\n    return (\n      <FormProvider {...methods}>\n        <chakra.form\n          ref={formRef}\n          onSubmit={handleSubmit(onSubmit, onError)}\n          {...rest}\n        >\n          {children}\n        </chakra.form>\n      </FormProvider>\n    )\n  }\n) as <TFieldValues extends FieldValues>(\n  props: FormProps<TFieldValues> & {\n    ref?: React.ForwardedRef<UseFormReturn<TFieldValues>>\n  }\n) => React.ReactElement\n","import * as React from 'react'\n\nimport { useFormContext } from 'react-hook-form'\n\nimport { Button, ButtonProps } from '@saas-ui/button'\n\nimport { forwardRef } from '@chakra-ui/system'\n\nexport interface SubmitButtonProps extends ButtonProps {\n  /**\n   * Disable the submit button if the form is untouched.\n   *\n   * Change the default behavior by updating\n   * `SubmitButton.defaultProps.disableIfUntouched`\n   */\n  disableIfUntouched?: boolean\n  /**\n   * Disable the submit button if the form is invalid.\n   *\n   * Change the default behavior by updating\n   * `SubmitButton.defaultProps.disableIfInvalid`\n   */\n  disableIfInvalid?: boolean\n}\n\nexport const SubmitButton = forwardRef<SubmitButtonProps, 'button'>(\n  (props, ref) => {\n    const { children, disableIfUntouched, disableIfInvalid, ...rest } = props\n    const { formState } = useFormContext()\n\n    const isDisabled =\n      (disableIfUntouched && !formState.isDirty) ||\n      (disableIfInvalid && !formState.isValid)\n\n    return (\n      <Button\n        type=\"submit\"\n        isLoading={formState.isSubmitting}\n        isPrimary\n        ref={ref}\n        isDisabled={isDisabled}\n        {...rest}\n      >\n        {children}\n      </Button>\n    )\n  }\n)\n\nSubmitButton.defaultProps = {\n  label: 'Submit',\n  disableIfUntouched: false,\n  disableIfInvalid: false,\n}\n","import * as React from 'react'\nimport { FieldValues, UseFormReturn } from 'react-hook-form'\nimport { forwardRef } from '@chakra-ui/react'\n\nimport { Form, FormProps } from './form'\n\nimport { FormLayout } from './layout'\nimport { Fields } from './fields'\nimport { SubmitButton } from './submit-button'\n\ninterface AutoFormOptions {\n  schema: any\n  submitLabel?: false | string\n}\n\nexport interface AutoFormProps<TFieldValues extends FieldValues>\n  extends Omit<FormProps<TFieldValues>, 'schema'>,\n    AutoFormOptions {}\n\nexport const AutoForm = forwardRef(\n  <TFieldValues extends FieldValues = FieldValues>(\n    props: AutoFormProps<TFieldValues>,\n    ref: React.ForwardedRef<UseFormReturn<TFieldValues>>\n  ) => {\n    const { schema, submitLabel = 'Submit', ...rest } = props\n    return (\n      <Form {...rest} schema={schema} ref={ref}>\n        <FormLayout>\n          {<Fields schema={schema} />}\n          {submitLabel && <SubmitButton label={submitLabel} />}\n        </FormLayout>\n      </Form>\n    )\n  }\n) as <TFieldValues extends FieldValues>(\n  props: AutoFormProps<TFieldValues> & {\n    ref?: React.ForwardedRef<UseFormReturn<TFieldValues>>\n  }\n) => React.ReactElement\n","import * as React from 'react'\nimport {\n  useFormContext,\n  useWatch,\n  FieldValues,\n  UseFormReturn,\n} from 'react-hook-form'\n\nexport interface DisplayIfProps<TFieldValues> {\n  children: React.ReactElement\n  name: string\n  defaultValue?: unknown\n  isDisabled?: boolean\n  isExact?: boolean\n  condition?: (value: unknown, context: UseFormReturn<TFieldValues>) => boolean\n}\n\nexport const DisplayIf = <TFieldValues extends FieldValues = FieldValues>({\n  children,\n  name,\n  defaultValue,\n  isDisabled,\n  isExact,\n  condition = (value) => !!value,\n}: DisplayIfProps<TFieldValues>) => {\n  const value = useWatch({\n    name,\n    defaultValue,\n    disabled: isDisabled,\n    exact: isExact,\n  })\n  const context = useFormContext<TFieldValues>()\n  return condition(value, context) ? children : null\n}\n","import*as e from\"react\";import{forwardRef as t,useMultiStyleConfig as s,omitThemingProps as r,StylesProvider as n,chakra as a,useStyles as i}from\"@chakra-ui/system\";import{Icon as c,CheckIcon as p}from\"@chakra-ui/icons\";import{Collapse as l}from\"@saas-ui/collapse\";import{getChildrenOfType as o,getChildOfType as m}from\"@saas-ui/react-utils\";import{cx as u,__DEV__ as d}from\"@chakra-ui/utils\";import{createContext as f}from\"@chakra-ui/react-utils\";function v(){return v=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var s=arguments[t];for(var r in s)Object.prototype.hasOwnProperty.call(s,r)&&(e[r]=s[r])}return e},v.apply(this,arguments)}function S(e,t){if(null==e)return{};var s,r,n={},a=Object.keys(e);for(r=0;r<a.length;r++)t.indexOf(s=a[r])>=0||(n[s]=e[s]);return n}const[_,N]=f({name:\"StepperContext\",errorMessage:\"useStepperContext: `context` is undefined. Seems you forgot to wrap stepper components in `<Stepper />`\"});function h(t){const{step:s}=t,[r,n]=e.useState(-1),a=e.useRef([]),[,i]=e.useState(Date.now()),c=e.useCallback(e=>{const t=[...a.current];-1===t.indexOf(e)&&t.push(e),a.current=t,i(Date.now())},[a,i]),p=e=>{const t=a.current.indexOf(e);-1!==t&&n(t)};return e.useLayoutEffect(()=>{\"string\"==typeof s?p(s):\"number\"==typeof s?n(s):-1===r&&n(0)},[s]),{stepsRef:a,activeStep:a.current[r],activeIndex:r,isFirstStep:0===r,isLastStep:r===a.current.length-1,isCompleted:r>=a.current.length,setIndex:n,setStep:p,nextStep:()=>{n(r+1)},prevStep:()=>{n(r-1)},registerStep:c,unregisterStep:e=>{a.current=a.current.slice(a.current.indexOf(e),1)}}}function x(t){const{name:s,isActive:r,isCompleted:n}=t,{registerStep:a,unregisterStep:i,activeStep:c}=N();return e.useEffect(()=>{if(s)return a(s),()=>{i(s)}},[]),{isActive:s?c===s:r,isCompleted:n}}function y({label:e=\"Back\"}={}){const{isFirstStep:t,prevStep:s}=N();return{isDisabled:t,onClick:s,label:e}}function C({label:e=\"Next\",submitLabel:t=\"Submit\"}={}){const{isLastStep:s,isCompleted:r,nextStep:n}=N();return{isDisabled:r,onClick:n,label:s?t:e}}const E=[\"children\",\"orientation\"],g=[\"children\",\"orientation\",\"stepComponent\"],b=[\"children\",\"isOpen\"],k=[\"icon\",\"isActive\",\"isCompleted\",\"className\"],A=[\"title\",\"icon\",\"isActive\",\"isCompleted\"],O=[\"isActive\"],D=t((t,i)=>{const c=s(\"Stepper\",t),p=r(t),{children:l,orientation:o}=p,m=S(p,E),d=h(t),f=v({display:\"flex\",flexDirection:\"column\"},c.container);/*#__PURE__*/return e.createElement(n,{value:c},/*#__PURE__*/e.createElement(_,{value:d},/*#__PURE__*/e.createElement(a.div,v({ref:i,__css:f},m,{className:u(\"saas-stepper__container\",t.className)}),/*#__PURE__*/e.createElement(I,{orientation:o},l))))});d&&(D.displayName=\"Stepper\");const I=t=>{var s,r;const{children:n,orientation:c,stepComponent:p}=t,l=S(t,g),d=i(),{activeIndex:f}=N(),_=v({display:\"flex\",flexDirection:\"row\",alignItems:\"center\"},d.steps),h=\"vertical\"===c,x=p||L,y=o(n,x),C=y.reduce((t,s,r,n)=>(t.push(/*#__PURE__*/e.createElement(x,v({key:r},s.props,{icon:s.props.icon||r+1,isActive:f===r,isCompleted:s.props.isCompleted||f>r}))),\"vertical\"===c&&t.push(/*#__PURE__*/e.createElement(w,{isOpen:f===r},s.props.children)),r<n.length-1&&t.push(/*#__PURE__*/e.createElement(F,{key:`separator-${r}`,isActive:r<f})),t),[]),E=m(n,T),b=f>=y.length?E:h?null:/*#__PURE__*/e.createElement(w,null,null==(s=y[f])||null==(r=s.props)?void 0:r.children);/*#__PURE__*/return e.createElement(e.Fragment,null,/*#__PURE__*/e.createElement(a.div,v({__css:_},l,{className:u(\"saas-stepper__steps\",t.className)}),C),b)};d&&(I.displayName=\"StepperSteps\");const w=t=>{const{children:s,isOpen:r=!0}=t,n=S(t,b),c=i();/*#__PURE__*/return e.createElement(a.div,v({__css:c.content},n,{className:u(\"saas-stepper__content\",t.className)}),/*#__PURE__*/e.createElement(l,{in:r},s))};d&&(w.displayName=\"StepperContent\");const j=t=>{const{icon:s,isCompleted:r,className:n}=t,l=S(t,k),o=v({display:\"flex\",alignItems:\"center\",justifyContent:\"center\",borderRadius:\"full\",fontSize:\"1em\",me:2},i().icon);let m;return m=r?/*#__PURE__*/e.createElement(c,{as:p}):s,/*#__PURE__*/e.createElement(a.div,v({__css:o},l,{className:u(\"saas-stepper__icon\",n)}),m)};d&&(j.displayName=\"StepperIcon\");const L=t=>{const{title:s,icon:r,isActive:n,isCompleted:c}=t,p=S(t,A),l=x(t),o=v({display:\"flex\",alignItems:\"center\",flexDirection:\"row\"},i().step);/*#__PURE__*/return e.createElement(a.div,v({__css:o,\"data-active\":l.isActive,\"data-completed\":l.isCompleted},p,{className:u(\"saas-stepper__step\",t.className)}),/*#__PURE__*/e.createElement(j,{icon:r,isActive:n,isCompleted:c}),s&&/*#__PURE__*/e.createElement(R,null,s))};d&&(L.displayName=\"StepperStep\");const F=t=>{const{isActive:s}=t,r=S(t,O),n=v({flex:1,borderTopWidth:\"1px\",mx:2},i().separator);/*#__PURE__*/return e.createElement(a.div,v({\"data-active\":s},r,{className:u(\"saas-stepper__separator\",t.className),__css:n}))};d&&(F.displayName=\"StepperSeparator\");const R=t=>{const s=i();/*#__PURE__*/return e.createElement(a.p,v({},t,{__css:s.title,className:u(\"saas-stepper__title\",t.className)}))};d&&(R.displayName=\"StepperStepTitle\");const T=t=>{const s=i();/*#__PURE__*/return e.createElement(a.div,v({__css:s.completed},t,{className:u(\"saas-stepper__completed\",t.className)}))};d&&(T.displayName=\"StepperCompleted\");export{D as Stepper,T as StepperCompleted,w as StepperContent,j as StepperIcon,_ as StepperProvider,F as StepperSeparator,L as StepperStep,R as StepperStepTitle,I as StepperSteps,C as useNext,y as usePrev,x as useStep,h as useStepper,N as useStepperContext};\n//# sourceMappingURL=index.modern.js.map\n","import * as React from 'react'\nimport { FieldValues, SubmitHandler } from 'react-hook-form'\nimport { createContext } from '@chakra-ui/react-utils'\nimport {\n  useStepper,\n  useStep,\n  UseStepperProps,\n  UseStepperReturn,\n} from '@saas-ui/stepper'\n\nexport interface StepState {\n  name: string\n  schema?: any\n  isActive?: boolean\n  isCompleted?: boolean\n}\n\nexport interface StepFormContext extends UseStepperReturn {\n  updateStep(state: StepState): void\n  steps: Record<string, StepState>\n}\n\nexport const [StepFormProvider, useStepFormContext] =\n  createContext<StepFormContext>({\n    name: 'StepFormContext',\n    errorMessage:\n      'useStepFormContext: `context` is undefined. Seems you forgot to wrap step form components in `<StepForm />`',\n  })\n\nimport { FormProps } from './form'\n\nexport interface UseStepFormProps<\n  TFieldValues extends FieldValues = FieldValues\n> extends UseStepperProps,\n    FormProps<TFieldValues> {}\n\nexport function useStepForm<TFieldValues extends FieldValues = FieldValues>(\n  props: UseStepFormProps<TFieldValues>\n) {\n  const stepper = useStepper(props)\n\n  const { activeStep, isLastStep, nextStep } = stepper\n\n  const [steps, updateSteps] = React.useState({})\n\n  const onSubmitStep: SubmitHandler<TFieldValues> = React.useCallback(\n    async (data) => {\n      if (isLastStep) {\n        return props\n          .onSubmit?.(data)\n          .then(() => {\n            const step = steps[activeStep]\n            updateStep({\n              ...step,\n              isCompleted: true,\n            })\n          })\n          .then(nextStep) // Show completed step\n      }\n\n      nextStep()\n    },\n    [activeStep, isLastStep]\n  )\n\n  const getFormProps = React.useCallback(\n    (props) => {\n      const step = steps[activeStep]\n      return {\n        onSubmit: onSubmitStep,\n        schema: step?.schema,\n      }\n    },\n    [steps, onSubmitStep, activeStep]\n  )\n\n  const updateStep = React.useCallback(\n    (step) => {\n      updateSteps((steps) => {\n        return {\n          ...steps,\n          [step.name]: step,\n        }\n      })\n    },\n    [steps]\n  )\n\n  return {\n    getFormProps,\n    updateStep,\n    steps,\n    ...stepper,\n  }\n}\n\nexport type UseStepFormReturn = ReturnType<typeof useStepForm>\n\nexport interface UseFormStepProps {\n  name: string\n  schema?: any\n}\n\nexport function useFormStep(props: UseFormStepProps): StepState {\n  const { name, schema } = props\n  const step = useStep({ name })\n\n  const { steps, updateStep } = useStepFormContext()\n\n  React.useEffect(() => {\n    updateStep({ name, schema })\n  }, [name, schema])\n\n  return {\n    ...step,\n    ...(steps[name] || { name, schema }),\n  }\n}\n","import * as React from 'react'\n\nimport { FieldValues, UseFormReturn } from 'react-hook-form'\n\nimport {\n  chakra,\n  HTMLChakraProps,\n  useMultiStyleConfig,\n  StylesProvider,\n} from '@chakra-ui/system'\n\nimport { callAllHandlers, runIfFn, cx, __DEV__ } from '@chakra-ui/utils'\n\nimport {\n  StepperProvider,\n  StepperSteps,\n  StepperStepsProps,\n  StepperStep,\n  useStepperContext,\n} from '@saas-ui/stepper'\nimport { Button, ButtonProps } from '@saas-ui/button'\n\nimport { Form, FormProps } from './form'\nimport { SubmitButton } from './submit-button'\n\nimport {\n  useStepForm,\n  useFormStep,\n  StepFormProvider,\n  UseStepFormProps,\n} from './use-step-form'\n\nexport interface StepFormProps<TFieldValues extends FieldValues = FieldValues>\n  extends UseStepFormProps<TFieldValues>,\n    FormProps<TFieldValues> {}\n\nexport const StepForm = React.forwardRef(\n  <TFieldValues extends FieldValues = FieldValues>(\n    props: StepFormProps<TFieldValues>,\n    ref: React.ForwardedRef<UseFormReturn<TFieldValues>>\n  ) => {\n    const { children, onSubmit, ...rest } = props\n\n    const stepper = useStepForm<TFieldValues>(props)\n\n    const { getFormProps, ...ctx } = stepper\n\n    const context = React.useMemo(() => ctx, [ctx])\n\n    return (\n      <StepperProvider value={context}>\n        <StepFormProvider value={context}>\n          <Form ref={ref} {...rest} {...getFormProps(props)}>\n            {runIfFn(children, stepper)}\n          </Form>\n        </StepFormProvider>\n      </StepperProvider>\n    )\n  }\n) as <TFieldValues extends FieldValues>(\n  props: FormProps<TFieldValues> & {\n    ref?: React.ForwardedRef<UseFormReturn<TFieldValues>>\n  }\n) => React.ReactElement\n\nexport interface FormStepOptions {\n  /**\n   * The step name\n   */\n  name: string\n  /**\n   * Schema\n   */\n  schema?: any\n}\n\nexport const FormStepper: React.FC<StepperStepsProps> = (props) => {\n  const styles = useMultiStyleConfig('Stepper', props)\n\n  const { children } = props\n\n  const elements = React.Children.map(children, (child) => {\n    if (React.isValidElement(child) && child?.type === FormStep) {\n      const { isCompleted } = useFormStep(child.props) // Register this step\n      return (\n        <StepperStep\n          name={child.props.name}\n          title={child.props.title}\n          isCompleted={isCompleted}\n        >\n          {child.props.children}\n        </StepperStep>\n      )\n    }\n    return child\n  })\n\n  return (\n    <StylesProvider value={styles}>\n      <StepperSteps mb=\"4\" {...props}>\n        {elements}\n      </StepperSteps>\n    </StylesProvider>\n  )\n}\n\nexport interface FormStepProps\n  extends FormStepOptions,\n    HTMLChakraProps<'div'> {}\n\nexport const FormStep: React.FC<FormStepProps> = (props) => {\n  const { name, schema, children, className, ...rest } = props\n  const step = useFormStep({ name, schema })\n\n  const { isActive } = step\n\n  return isActive ? (\n    <chakra.div {...rest} className={cx('saas-form__step', className)}>\n      {children}\n    </chakra.div>\n  ) : null\n}\n\nif (__DEV__) {\n  FormStep.displayName = 'FormStep'\n}\n\nexport const PrevButton: React.FC<ButtonProps> = (props) => {\n  const { isFirstStep, isCompleted, prevStep } = useStepperContext()\n\n  return (\n    <Button\n      isDisabled={isFirstStep || isCompleted}\n      label=\"Back\"\n      {...props}\n      className={cx('saas-form__prev-button', props.className)}\n      onClick={callAllHandlers(props.onClick, prevStep)}\n    />\n  )\n}\n\nif (__DEV__) {\n  PrevButton.displayName = 'PrevButton'\n}\n\nexport interface NextButtonProps extends ButtonProps {\n  submitLabel?: string\n}\n\nexport const NextButton: React.FC<NextButtonProps> = (props) => {\n  const { label = 'Next', submitLabel = 'Complete', ...rest } = props\n  const { isLastStep, isCompleted } = useStepperContext()\n\n  return (\n    <SubmitButton\n      isDisabled={isCompleted}\n      label={isLastStep || isCompleted ? submitLabel : label}\n      {...rest}\n      className={cx('saas-form__next-button', props.className)}\n    />\n  )\n}\n\nif (__DEV__) {\n  NextButton.displayName = 'NextButton'\n}\n"],"names":["DisplayField","_ref","name","label","props","React","FormControl","FormLabel","htmlFor","Text","fontSize","FormValue","getValues","useFormContext","inputTypes","defaultInputType","BaseField","help","variant","hideLabel","children","controlProps","formState","error","get","errors","getError","isInvalid","Box","message","FormHelperText","FormErrorMessage","Field","forwardRef","ref","type","InputComponent","getInput","withControlledInput","rules","inputProps","control","Controller","render","_ref3","field","useMergeRefs","withUncontrolledInput","register","registerFieldType","component","options","isControlled","displayName","isDisabled","isReadOnly","isRequired","inputRules","required","createField","split","map","part","charAt","toUpperCase","slice","join","InputField","Input","NumberInputField","NumberInput","PasswordInputFIeld","PasswordInput","TextareaField","Textarea","SwitchField","Switch","SelectField","Select","CheckboxField","Checkbox","RadioField","RadioInput","PinField","PinInput","NativeSelectField","NativeSelect","getType","spec","meta","_field$spec$meta","getArrayOption","test","tests","OPTIONS","_test$OPTIONS","params","getFieldsFromSchema","schema","fields","schemaFields","innerType","min","max","push","FormLayoutItem","chakra","div","FormLayout","gridProps","useTheme","components","_theme$components","_theme$components$For2","defaultProps","spacing","SimpleGrid","Children","child","isValidElement","mapNestedFields","cloneElement","ArrayFieldProvider","useArrayFieldContext","createContext","ArrayFieldRowProvider","useArrayFieldRowContext","useArrayField","defaultValue","keyName","useFieldArray","useArrayFieldRow","index","clearErrors","remove","useEffect","isFirst","isLast","length","useCallback","useArrayFieldRemoveButton","onClick","useArrayFieldAddButton","append","shouldFocus","ArrayFieldRow","columns","ArrayFieldRowContainer","ArrayFieldRowFields","ArrayFieldRemoveButton","layoutProps","flex","gridGap","mr","context","value","__css","display","flexDirection","alignItems","width","mb","IconButton","icon","MinusIcon","ArrayFieldAddButton","AddIcon","float","ArrayField","containerProps","ArrayFieldContainer","ArrayFieldRows","id","key","fieldProps","useImperativeHandle","FormLegend","styles","useStyles","as","sx","legend","ObjectField","getNestedFields","path","reach","getNestedSchema","nestedFieldProps","Fields","_ref2","Form","mode","resolver","reValidateMode","shouldFocusError","shouldUnregister","shouldUseNativeValidation","criteriaMode","delayError","defaultValues","onSubmit","onError","formRef","rest","form","yupResolver","methods","useForm","handleSubmit","FormProvider","SubmitButton","disableIfUntouched","disableIfInvalid","Button","isLoading","isSubmitting","isPrimary","isDirty","isValid","AutoForm","submitLabel","DisplayIf","isExact","condition","useWatch","disabled","exact","StepperProvider","useStepperContext","errorMessage","useStepper","step","activeIndex","setIndex","useState","stepsRef","useRef","onUpdate","Date","now","registerStep","newSteps","current","indexOf","setStep","i","useLayoutEffect","activeStep","isFirstStep","isLastStep","isCompleted","nextStep","prevStep","unregisterStep","useStep","isActive","StepFormProvider","useStepFormContext","useStepForm","stepper","steps","updateSteps","onSubmitStep","async","data","then","updateStep","getFormProps","useFormStep","StepForm","ctx","useMemo","runIfFn","FormStepper","useMultiStyleConfig","elements","FormStep","StepperStep","title","StylesProvider","StepperSteps","className","cx","__DEV__","PrevButton","callAllHandlers","NextButton"],"mappings":"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"}

package/dist/step-form.d.ts

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { FieldValues, UseFormReturn } from 'react-hook-form';
+import { HTMLChakraProps } from '@chakra-ui/system';
+import { StepperStepsProps } from '@saas-ui/stepper';
+import { ButtonProps } from '@saas-ui/button';
+import { FormProps } from './form';
+import { UseStepFormProps } from './use-step-form';
+export interface StepFormProps<TFieldValues extends FieldValues = FieldValues> extends UseStepFormProps<TFieldValues>, FormProps<TFieldValues> {
+}
+export declare const StepForm: <TFieldValues extends FieldValues>(props: FormProps<TFieldValues> & {
+    ref?: React.ForwardedRef<UseFormReturn<TFieldValues, object>> | undefined;
+}) => React.ReactElement;
+export interface FormStepOptions {
+    /**
+     * The step name
+     */
+    name: string;
+    /**
+     * Schema
+     */
+    schema?: any;
+}
+export declare const FormStepper: React.FC<StepperStepsProps>;
+export interface FormStepProps extends FormStepOptions, HTMLChakraProps<'div'> {
+}
+export declare const FormStep: React.FC<FormStepProps>;
+export declare const PrevButton: React.FC<ButtonProps>;
+export interface NextButtonProps extends ButtonProps {
+    submitLabel?: string;
+}
+export declare const NextButton: React.FC<NextButtonProps>;
+//# sourceMappingURL=step-form.d.ts.map

package/dist/step-form.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"step-form.d.ts","sourceRoot":"","sources":["../src/step-form.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAE5D,OAAO,EAEL,eAAe,EAGhB,MAAM,mBAAmB,CAAA;AAI1B,OAAO,EAGL,iBAAiB,EAGlB,MAAM,kBAAkB,CAAA;AACzB,OAAO,EAAU,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAErD,OAAO,EAAQ,SAAS,EAAE,MAAM,QAAQ,CAAA;AAGxC,OAAO,EAIL,gBAAgB,EACjB,MAAM,iBAAiB,CAAA;AAExB,MAAM,WAAW,aAAa,CAAC,YAAY,SAAS,WAAW,GAAG,WAAW,CAC3E,SAAQ,gBAAgB,CAAC,YAAY,CAAC,EACpC,SAAS,CAAC,YAAY,CAAC;CAAG;AAE9B,eAAO,MAAM,QAAQ;;MA2BhB,MAAM,YAAY,CAAA;AAEvB,MAAM,WAAW,eAAe;IAC9B;;OAEG;IACH,IAAI,EAAE,MAAM,CAAA;IACZ;;OAEG;IACH,MAAM,CAAC,EAAE,GAAG,CAAA;CACb;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA4BnD,CAAA;AAED,MAAM,WAAW,aACf,SAAQ,eAAe,EACrB,eAAe,CAAC,KAAK,CAAC;CAAG;AAE7B,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAW5C,CAAA;AAMD,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAY5C,CAAA;AAMD,MAAM,WAAW,eAAgB,SAAQ,WAAW;IAClD,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAYhD,CAAA"}

package/dist/use-array-field.d.ts

@@ -52,7 +52,7 @@ export interface ArrayFieldOptions {
      */
     defaultValue?: Record<string, any>;
     /**
-     * Default key name for rows, change this if your data uses 'id'
+     * Default key name for rows, change this if your data uses a different 'id' field
      * @default "id"
      */
     keyName?: string;

package/dist/use-step-form.d.ts

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import { FieldValues, SubmitHandler } from 'react-hook-form';
+import { UseStepperProps, UseStepperReturn } from '@saas-ui/stepper';
+export interface StepState {
+    name: string;
+    schema?: any;
+    isActive?: boolean;
+    isCompleted?: boolean;
+}
+export interface StepFormContext extends UseStepperReturn {
+    updateStep(state: StepState): void;
+    steps: Record<string, StepState>;
+}
+export declare const StepFormProvider: React.Provider<StepFormContext>, useStepFormContext: () => StepFormContext;
+import { FormProps } from './form';
+export interface UseStepFormProps<TFieldValues extends FieldValues = FieldValues> extends UseStepperProps, FormProps<TFieldValues> {
+}
+export declare function useStepForm<TFieldValues extends FieldValues = FieldValues>(props: UseStepFormProps<TFieldValues>): {
+    stepsRef: React.MutableRefObject<string[]>;
+    activeStep: string;
+    activeIndex: number;
+    isFirstStep: boolean;
+    isLastStep: boolean;
+    isCompleted: boolean;
+    setIndex: React.Dispatch<React.SetStateAction<number>>;
+    setStep: (name: string) => void;
+    nextStep: () => void;
+    prevStep: () => void;
+    registerStep: (name: string) => void;
+    unregisterStep: (name: string) => void;
+    getFormProps: (props: any) => {
+        onSubmit: SubmitHandler<TFieldValues>;
+        schema: any;
+    };
+    updateStep: (step: any) => void;
+    steps: {};
+};
+export declare type UseStepFormReturn = ReturnType<typeof useStepForm>;
+export interface UseFormStepProps {
+    name: string;
+    schema?: any;
+}
+export declare function useFormStep(props: UseFormStepProps): StepState;
+//# sourceMappingURL=use-step-form.d.ts.map

package/dist/use-step-form.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-step-form.d.ts","sourceRoot":"","sources":["../src/use-step-form.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAE5D,OAAO,EAGL,eAAe,EACf,gBAAgB,EACjB,MAAM,kBAAkB,CAAA;AAEzB,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,MAAM,CAAA;IACZ,MAAM,CAAC,EAAE,GAAG,CAAA;IACZ,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB;AAED,MAAM,WAAW,eAAgB,SAAQ,gBAAgB;IACvD,UAAU,CAAC,KAAK,EAAE,SAAS,GAAG,IAAI,CAAA;IAClC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAA;CACjC;AAED,eAAO,MAAO,gBAAgB,mCAAE,kBAAkB,uBAK9C,CAAA;AAEJ,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AAElC,MAAM,WAAW,gBAAgB,CAC/B,YAAY,SAAS,WAAW,GAAG,WAAW,CAC9C,SAAQ,eAAe,EACrB,SAAS,CAAC,YAAY,CAAC;CAAG;AAE9B,wBAAgB,WAAW,CAAC,YAAY,SAAS,WAAW,GAAG,WAAW,EACxE,KAAK,EAAE,gBAAgB,CAAC,YAAY,CAAC;;;;;;;;;;;;;;;;;;;EAyDtC;AAED,oBAAY,iBAAiB,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAA;AAE9D,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,MAAM,CAAA;IACZ,MAAM,CAAC,EAAE,GAAG,CAAA;CACb;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,SAAS,CAc9D"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saas-ui/forms",
-  "version": "0.3.4",
+  "version": "0.5.2",
   "description": "Theme and components agnostic SaasProvider",
   "source": "src/index.ts",
   "exports": {
@@ -64,14 +64,16 @@
   "dependencies": {
     "@chakra-ui/icons": "^1.1.1",
     "@chakra-ui/react-utils": "^1.2.1",
+    "@chakra-ui/utils": "^1.10.4",
     "@hookform/resolvers": "^2.8.3",
-    "@saas-ui/button": "0.2.1",
-    "@saas-ui/input-right-button": "0.2.1",
-    "@saas-ui/number-input": "0.2.2",
-    "@saas-ui/password-input": "0.2.2",
-    "@saas-ui/pin-input": "0.2.1",
-    "@saas-ui/radio": "0.2.1",
-    "@saas-ui/select": "0.2.2",
+    "@saas-ui/button": "0.3.0",
+    "@saas-ui/input-right-button": "0.3.0",
+    "@saas-ui/number-input": "0.3.0",
+    "@saas-ui/password-input": "0.3.0",
+    "@saas-ui/pin-input": "0.3.0",
+    "@saas-ui/radio": "0.3.0",
+    "@saas-ui/react-utils": "0.1.0",
+    "@saas-ui/select": "0.3.0",
     "react-hook-form": "^7.22.0"
   },
   "peerDependencies": {

package/src/array-field.tsx

@@ -20,6 +20,7 @@ import {
   useArrayFieldRowContext,
   useArrayFieldRemoveButton,
   useArrayFieldAddButton,
+  UseArrayFieldReturn,
 } from './use-array-field'
 
 interface ArrayField {
@@ -137,26 +138,28 @@ export interface ArrayFieldProps
   extends ArrayFieldOptions,
     Omit<FieldProps, 'defaultValue'> {}
 
-export const ArrayField: React.FC<ArrayFieldProps> = (props) => {
-  const { children, ...containerProps } = props
-
-  return (
-    <ArrayFieldContainer {...containerProps}>
-      <ArrayFieldRows>
-        {(fields: ArrayField[]) => (
-          <>
-            {fields.map(({ id }, index: number) => (
-              <ArrayFieldRow key={id} index={index}>
-                {children}
-              </ArrayFieldRow>
-            ))}
-          </>
-        )}
-      </ArrayFieldRows>
-      <ArrayFieldAddButton />
-    </ArrayFieldContainer>
-  )
-}
+export const ArrayField = React.forwardRef(
+  (props: ArrayFieldProps, ref: React.ForwardedRef<UseArrayFieldReturn>) => {
+    const { children, ...containerProps } = props
+
+    return (
+      <ArrayFieldContainer ref={ref} {...containerProps}>
+        <ArrayFieldRows>
+          {(fields: ArrayField[]) => (
+            <>
+              {fields.map(({ id }, index: number) => (
+                <ArrayFieldRow key={id} index={index}>
+                  {children}
+                </ArrayFieldRow>
+              ))}
+            </>
+          )}
+        </ArrayFieldRows>
+        <ArrayFieldAddButton />
+      </ArrayFieldContainer>
+    )
+  }
+)
 
 export interface ArrayFieldRowsProps {
   children: (fields: ArrayField[]) => React.ReactElement | null
@@ -169,28 +172,36 @@ export const ArrayFieldRows = ({
   return children(fields)
 }
 
-export const ArrayFieldContainer: React.FC<ArrayFieldProps> = ({
-  name,
-  defaultValue,
-  keyName,
-  min,
-  max,
-  children,
-  ...fieldProps
-}) => {
-  const context = useArrayField({
-    name,
-    defaultValue,
-    keyName,
-    min,
-    max,
-  })
-
-  return (
-    <ArrayFieldProvider value={context}>
-      <BaseField name={name} {...fieldProps}>
-        {children}
-      </BaseField>
-    </ArrayFieldProvider>
-  )
-}
+export const ArrayFieldContainer = React.forwardRef(
+  (
+    {
+      name,
+      defaultValue,
+      keyName,
+      min,
+      max,
+      children,
+      ...fieldProps
+    }: ArrayFieldProps,
+    ref: React.ForwardedRef<UseArrayFieldReturn>
+  ) => {
+    const context = useArrayField({
+      name,
+      defaultValue,
+      keyName,
+      min,
+      max,
+    })
+
+    // This exposes the useArrayField api through the forwarded ref
+    React.useImperativeHandle(ref, () => context, [ref, context])
+
+    return (
+      <ArrayFieldProvider value={context}>
+        <BaseField name={name} {...fieldProps}>
+          {children}
+        </BaseField>
+      </ArrayFieldProvider>
+    )
+  }
+)

package/src/display-field.tsx

@@ -20,12 +20,17 @@ export const DisplayField: React.FC<DisplayFieldProps> = ({
   placeholder,
   ...props
 }) => {
-  const { getValues } = useFormContext()
-
   return (
     <FormControl {...props}>
       {label ? <FormLabel htmlFor={name}>{label}</FormLabel> : null}
-      <Text fontSize="md">{getValues(name)}</Text>
+      <Text fontSize="md">
+        <FormValue name={name} />
+      </Text>
     </FormControl>
   )
 }
+
+export const FormValue: React.FC<{ name: string }> = ({ name }) => {
+  const { getValues } = useFormContext()
+  return getValues(name) || null
+}

package/src/form.tsx

@@ -87,7 +87,7 @@ export const Form = forwardRef(
     const methods = useForm<TFieldValues>(form)
     const { handleSubmit } = methods
 
-    // This exposes the useForm api through the forwareded ref
+    // This exposes the useForm api through the forwarded ref
     React.useImperativeHandle(ref, () => methods, [ref, methods])
 
     return (

package/src/index.ts

@@ -9,6 +9,8 @@ export * from './array-field'
 export * from './use-array-field'
 export * from './object-field'
 export * from './display-if'
+export * from './step-form'
+export * from './use-step-form'
 
 export * from '@saas-ui/input-right-button'