@saas-ui/forms 1.5.3 → 2.0.0-next.0

package/dist/index.mjs

@@ -0,0 +1,1140 @@
+import * as React8 from 'react';
+import React8__default, { useState } from 'react';
+import { __DEV__, cx, runIfFn, callAllHandlers, get as get$1 } from '@chakra-ui/utils';
+import { useForm, FormProvider, useFormContext, Controller, useFieldArray, useWatch, get } from 'react-hook-form';
+export { Controller, FormProvider, appendErrors, useController, useFieldArray, useForm, useFormContext, useFormState, useWatch } from 'react-hook-form';
+import { forwardRef, NumberInput as NumberInput$1, NumberInputField, NumberInputStepper, NumberIncrementStepper, NumberDecrementStepper, InputRightElement, Button, InputGroup, Input, RadioGroup, Stack, Radio, useMultiStyleConfig, MenuButton, omitThemingProps, useFormControl, Menu, chakra, MenuList, MenuOptionGroup, MenuItemOption, Select as Select$1, Switch, Checkbox, HStack, PinInput, FormControl, FormLabel, Text, Box, FormHelperText, FormErrorMessage, useMergeRefs, Textarea, PinInputField, useTheme, SimpleGrid, useStyleConfig } from '@chakra-ui/react';
+import { ViewIcon, ViewOffIcon, ChevronDownIcon, MinusIcon, AddIcon } from '@chakra-ui/icons';
+import { createContext } from '@chakra-ui/react-utils';
+import { StepperProvider, useStepper, useStep, useStepperContext, StepperStep, StepperContainer, StepperSteps } from '@saas-ui/core';
+
+// src/display-field.tsx
+var DisplayField = ({
+  name,
+  label,
+  placeholder,
+  ...props
+}) => {
+  return /* @__PURE__ */ React8.createElement(FormControl, {
+    ...props
+  }, label ? /* @__PURE__ */ React8.createElement(FormLabel, {
+    htmlFor: name
+  }, label) : null, /* @__PURE__ */ React8.createElement(Text, {
+    fontSize: "md"
+  }, /* @__PURE__ */ React8.createElement(FormValue, {
+    name
+  })));
+};
+if (__DEV__) {
+  DisplayField.displayName = "DisplayField";
+}
+var FormValue = ({ name }) => {
+  const { getValues } = useFormContext();
+  return getValues(name) || null;
+};
+if (__DEV__) {
+  FormValue.displayName = "FormValue";
+}
+var NumberInput = forwardRef((props, ref) => {
+  const { hideStepper, incrementIcon, decrementIcon, ...rest } = props;
+  return /* @__PURE__ */ React8.createElement(NumberInput$1, {
+    ...rest,
+    ref
+  }, /* @__PURE__ */ React8.createElement(NumberInputField, null), !hideStepper && /* @__PURE__ */ React8.createElement(NumberInputStepper, null, /* @__PURE__ */ React8.createElement(NumberIncrementStepper, {
+    children: incrementIcon
+  }), /* @__PURE__ */ React8.createElement(NumberDecrementStepper, {
+    children: decrementIcon
+  })));
+});
+NumberInput.defaultProps = {
+  hideStepper: false
+};
+if (__DEV__) {
+  NumberInput.displayName = "NumberInput";
+}
+var InputRightButton = forwardRef(
+  (props, ref) => {
+    return /* @__PURE__ */ React8.createElement(InputRightElement, {
+      w: "auto",
+      px: "1",
+      py: "1",
+      alignItems: "stretch"
+    }, /* @__PURE__ */ React8.createElement(Button, {
+      ref,
+      height: "auto",
+      ...props
+    }));
+  }
+);
+InputRightButton.id = "InputRightElement";
+InputRightButton.displayName = "InputRightButton";
+
+// src/password-input/password-input.tsx
+var PasswordInput = forwardRef(
+  (props, ref) => {
+    const {
+      viewIcon,
+      viewOffIcon,
+      autoComplete,
+      w,
+      width,
+      size,
+      variant,
+      ...inputProps
+    } = props;
+    const [show, setShow] = useState(false);
+    const handleClick = () => setShow(!show);
+    const label = show ? "Hide password" : "Show password";
+    let icon;
+    if (show) {
+      icon = viewIcon || /* @__PURE__ */ React8__default.createElement(ViewIcon, null);
+    } else {
+      icon = viewOffIcon || /* @__PURE__ */ React8__default.createElement(ViewOffIcon, null);
+    }
+    const groupProps = {
+      width: w || width,
+      size,
+      variant
+    };
+    return /* @__PURE__ */ React8__default.createElement(InputGroup, {
+      ...groupProps
+    }, /* @__PURE__ */ React8__default.createElement(Input, {
+      ...inputProps,
+      ref,
+      type: show ? "text" : "password",
+      autoComplete: show ? "off" : autoComplete
+    }), /* @__PURE__ */ React8__default.createElement(InputRightButton, {
+      onClick: handleClick,
+      "aria-label": label,
+      variant: "ghost"
+    }, icon));
+  }
+);
+if (__DEV__) {
+  PasswordInput.displayName = "PasswordInput";
+}
+var RadioInput = forwardRef(
+  ({ options, spacing, direction, ...props }, ref) => {
+    const { onBlur, onChange, ...groupProps } = props;
+    return /* @__PURE__ */ React8.createElement(RadioGroup, {
+      onChange,
+      ...groupProps
+    }, /* @__PURE__ */ React8.createElement(Stack, {
+      spacing,
+      direction
+    }, options.map(({ value, label, ...radioProps }, i) => {
+      return /* @__PURE__ */ React8.createElement(Radio, {
+        key: i,
+        onBlur,
+        value,
+        ref,
+        ...radioProps
+      }, label || value);
+    })));
+  }
+);
+if (__DEV__) {
+  RadioInput.displayName = "RadioInput";
+}
+var SelectButton = forwardRef((props, ref) => {
+  const styles = useMultiStyleConfig("Input", props);
+  const focusStyles = styles.field._focusVisible;
+  const height = styles.field.h || styles.field.height;
+  const buttonStyles = {
+    fontWeight: "normal",
+    textAlign: "left",
+    color: "inherit",
+    _active: {
+      bg: "transparent"
+    },
+    minH: height,
+    _focus: focusStyles,
+    _expanded: focusStyles,
+    ...styles.field,
+    h: "auto"
+  };
+  return /* @__PURE__ */ React8.createElement(MenuButton, {
+    as: Button,
+    ...props,
+    ref,
+    sx: buttonStyles
+  });
+});
+if (__DEV__) {
+  SelectButton.displayName = "SelectButton";
+}
+var Select = forwardRef((props, ref) => {
+  const {
+    name,
+    options,
+    children,
+    onChange,
+    defaultValue,
+    value,
+    placeholder,
+    isDisabled,
+    leftIcon,
+    rightIcon = /* @__PURE__ */ React8.createElement(ChevronDownIcon, null),
+    multiple,
+    size,
+    variant,
+    menuListProps,
+    renderValue = (value2) => value2 == null ? void 0 : value2.join(", "),
+    ...rest
+  } = props;
+  const menuProps = omitThemingProps(rest);
+  const [currentValue, setCurrentValue] = React8.useState(value || defaultValue);
+  const controlProps = useFormControl({ name });
+  const handleChange = (value2) => {
+    setCurrentValue(value2);
+    onChange == null ? void 0 : onChange(value2);
+  };
+  const buttonProps = {
+    isDisabled,
+    leftIcon,
+    rightIcon,
+    size,
+    variant
+  };
+  const getDisplayValue = React8.useCallback(
+    (value2) => {
+      if (!options) {
+        return value2;
+      }
+      for (const option of options) {
+        if (option.label && option.value === value2) {
+          return option.label;
+        }
+      }
+      return value2;
+    },
+    [options]
+  );
+  const displayValue = currentValue ? (Array.isArray(currentValue) ? currentValue : [currentValue]).map(
+    getDisplayValue
+  ) : [];
+  return /* @__PURE__ */ React8.createElement(Menu, {
+    ...menuProps,
+    closeOnSelect: !multiple
+  }, /* @__PURE__ */ React8.createElement(chakra.div, {
+    className: cx("sui-select")
+  }, /* @__PURE__ */ React8.createElement(SelectButton, {
+    ref,
+    ...buttonProps
+  }, renderValue(displayValue) || placeholder), /* @__PURE__ */ React8.createElement(MenuList, {
+    maxH: "60vh",
+    overflowY: "auto",
+    ...menuListProps
+  }, /* @__PURE__ */ React8.createElement(MenuOptionGroup, {
+    defaultValue: defaultValue || value,
+    onChange: handleChange,
+    type: multiple ? "checkbox" : "radio"
+  }, options ? options.map(({ value: value2, label, ...rest2 }, i) => /* @__PURE__ */ React8.createElement(MenuItemOption, {
+    key: i,
+    value: value2,
+    ...rest2
+  }, label || value2)) : children)), /* @__PURE__ */ React8.createElement(chakra.input, {
+    ...controlProps,
+    name,
+    type: "hidden",
+    value: currentValue,
+    className: "saas-select__input"
+  })));
+});
+if (__DEV__) {
+  Select.displayName = "Select";
+}
+var NativeSelect = forwardRef(
+  ({ options, children, ...props }, ref) => {
+    return /* @__PURE__ */ React8.createElement(Select$1, {
+      ref,
+      ...props
+    }, children || (options == null ? void 0 : options.map(({ value, label }) => {
+      return /* @__PURE__ */ React8.createElement("option", {
+        key: value,
+        value
+      }, label || value);
+    })));
+  }
+);
+if (__DEV__) {
+  NativeSelect.displayName = "NativeSelect";
+}
+
+// src/field.tsx
+var inputTypes = {};
+var defaultInputType = "text";
+var getInput = (type) => {
+  return inputTypes[type] || inputTypes[defaultInputType];
+};
+var getError = (name, formState) => {
+  return get(formState.errors, name);
+};
+var BaseField = (props) => {
+  const { name, label, help, hideLabel, children, ...controlProps } = props;
+  const { formState } = useFormContext();
+  const error = getError(name, formState);
+  return /* @__PURE__ */ React8.createElement(FormControl, {
+    ...controlProps,
+    isInvalid: !!error
+  }, label && !hideLabel ? /* @__PURE__ */ React8.createElement(FormLabel, null, label) : null, /* @__PURE__ */ React8.createElement(Box, null, children, help && !(error == null ? void 0 : error.message) ? /* @__PURE__ */ React8.createElement(FormHelperText, null, help) : null, (error == null ? void 0 : error.message) && /* @__PURE__ */ React8.createElement(FormErrorMessage, null, error == null ? void 0 : error.message)));
+};
+if (__DEV__) {
+  BaseField.displayName = "BaseField";
+}
+var Field = React8.forwardRef(
+  (props, ref) => {
+    const { type = defaultInputType } = props;
+    const InputComponent = getInput(type);
+    return /* @__PURE__ */ React8.createElement(InputComponent, {
+      ref,
+      ...props
+    });
+  }
+);
+var createField = (InputComponent, { displayName, hideLabel, BaseField: BaseField2 }) => {
+  const Field2 = forwardRef((props, ref) => {
+    const {
+      id,
+      name,
+      label,
+      help,
+      isDisabled,
+      isInvalid,
+      isReadOnly,
+      isRequired,
+      rules,
+      ...inputProps
+    } = props;
+    const inputRules = {
+      required: isRequired,
+      ...rules
+    };
+    return /* @__PURE__ */ React8.createElement(BaseField2, {
+      id,
+      name,
+      label,
+      help,
+      hideLabel,
+      isDisabled,
+      isInvalid,
+      isReadOnly,
+      isRequired
+    }, /* @__PURE__ */ React8.createElement(InputComponent, {
+      ref,
+      id,
+      name,
+      label: hideLabel ? label : void 0,
+      rules: inputRules,
+      ...inputProps
+    }));
+  });
+  Field2.displayName = displayName;
+  return Field2;
+};
+var withControlledInput = (InputComponent) => {
+  return forwardRef(
+    ({ name, rules, ...inputProps }, ref) => {
+      const { control } = useFormContext();
+      return /* @__PURE__ */ React8.createElement(Controller, {
+        name,
+        control,
+        rules,
+        render: ({ field: { ref: _ref, ...field } }) => /* @__PURE__ */ React8.createElement(InputComponent, {
+          ...field,
+          ...inputProps,
+          onChange: callAllHandlers(inputProps.onChange, field.onChange),
+          onBlur: callAllHandlers(inputProps.onBlur, field.onBlur),
+          ref: useMergeRefs(ref, _ref)
+        })
+      });
+    }
+  );
+};
+var withUncontrolledInput = (InputComponent) => {
+  return forwardRef(
+    ({ name, rules, ...inputProps }, ref) => {
+      const { register } = useFormContext();
+      const { ref: _ref, ...field } = register(name, rules);
+      return /* @__PURE__ */ React8.createElement(InputComponent, {
+        ...field,
+        ...inputProps,
+        onChange: callAllHandlers(inputProps.onChange, field.onChange),
+        onBlur: callAllHandlers(inputProps.onBlur, field.onBlur),
+        ref: useMergeRefs(ref, _ref)
+      });
+    }
+  );
+};
+var registerFieldType = (type, component, options) => {
+  let InputComponent;
+  if (options == null ? void 0 : options.isControlled) {
+    InputComponent = withControlledInput(component);
+  } else {
+    InputComponent = withUncontrolledInput(component);
+  }
+  const Field2 = createField(InputComponent, {
+    displayName: `${type.split("-").map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join("")}Field`,
+    hideLabel: options == null ? void 0 : options.hideLabel,
+    BaseField: (options == null ? void 0 : options.BaseField) || BaseField
+  });
+  inputTypes[type] = Field2;
+  return Field2;
+};
+var InputField = registerFieldType(
+  "text",
+  forwardRef(({ type = "text", leftAddon, rightAddon, size, ...rest }, ref) => {
+    const input = /* @__PURE__ */ React8.createElement(Input, {
+      type,
+      size,
+      ...rest,
+      ref
+    });
+    if (leftAddon || rightAddon) {
+      return /* @__PURE__ */ React8.createElement(InputGroup, {
+        size
+      }, leftAddon, input, rightAddon);
+    }
+    return input;
+  })
+);
+var NumberInputField2 = registerFieldType(
+  "number",
+  NumberInput,
+  {
+    isControlled: true
+  }
+);
+var PasswordInputField = registerFieldType(
+  "password",
+  forwardRef((props, ref) => /* @__PURE__ */ React8.createElement(PasswordInput, {
+    ref,
+    ...props
+  }))
+);
+var TextareaField = registerFieldType(
+  "textarea",
+  Textarea
+);
+var SwitchField = registerFieldType(
+  "switch",
+  forwardRef(({ type, value, ...rest }, ref) => {
+    return /* @__PURE__ */ React8.createElement(Switch, {
+      isChecked: !!value,
+      ...rest,
+      ref
+    });
+  }),
+  {
+    isControlled: true
+  }
+);
+var SelectField = registerFieldType("select", Select, {
+  isControlled: true
+});
+var CheckboxField = registerFieldType(
+  "checkbox",
+  forwardRef(({ label, type, ...props }, ref) => {
+    return /* @__PURE__ */ React8.createElement(Checkbox, {
+      ref,
+      ...props
+    }, label);
+  }),
+  {
+    hideLabel: true
+  }
+);
+var RadioField = registerFieldType(
+  "radio",
+  RadioInput,
+  {
+    isControlled: true
+  }
+);
+var NativeSelectField = registerFieldType(
+  "native-select",
+  NativeSelect,
+  { isControlled: true }
+);
+var PinField = registerFieldType(
+  "pin",
+  forwardRef((props, ref) => {
+    const { pinLength = 4, pinType, spacing, ...inputProps } = props;
+    const inputs = [];
+    for (let i = 0; i < pinLength; i++) {
+      inputs.push(/* @__PURE__ */ React8.createElement(PinInputField, {
+        key: i,
+        ref
+      }));
+    }
+    return /* @__PURE__ */ React8.createElement(HStack, {
+      spacing
+    }, /* @__PURE__ */ React8.createElement(PinInput, {
+      ...inputProps,
+      type: pinType
+    }, inputs));
+  }),
+  {
+    isControlled: true
+  }
+);
+var mapFields = (schema) => schema && Object.entries(schema).map(([name, { items, label, title, ...field }]) => {
+  return {
+    ...field,
+    name,
+    label: label || title || name
+  };
+});
+var objectFieldResolver = (schema) => {
+  const getFields = () => {
+    return mapFields(schema);
+  };
+  const getNestedFields = (name) => {
+    var _a;
+    const field = get$1(schema, name);
+    if (!field)
+      return [];
+    if (((_a = field.items) == null ? void 0 : _a.type) === "object") {
+      return mapFields(field.items.properties);
+    } else if (field.type === "object") {
+      return mapFields(field.properties);
+    }
+    return [field.items];
+  };
+  return { getFields, getNestedFields };
+};
+
+// src/form.tsx
+var Form = forwardRef(
+  (props, ref) => {
+    var _a;
+    const {
+      mode = "all",
+      resolver,
+      reValidateMode,
+      shouldFocusError,
+      shouldUnregister,
+      shouldUseNativeValidation,
+      criteriaMode,
+      delayError,
+      schema,
+      defaultValues,
+      values,
+      context,
+      resetOptions,
+      onChange,
+      onSubmit,
+      onError,
+      formRef,
+      children,
+      ...rest
+    } = props;
+    const form = {
+      mode,
+      resolver,
+      defaultValues,
+      values,
+      reValidateMode,
+      shouldFocusError,
+      shouldUnregister,
+      shouldUseNativeValidation,
+      criteriaMode,
+      delayError,
+      context,
+      resetOptions
+    };
+    if (schema && !resolver) {
+      form.resolver = (_a = Form.getResolver) == null ? void 0 : _a.call(Form, schema);
+    }
+    const methods = useForm(form);
+    const { handleSubmit } = methods;
+    React8.useImperativeHandle(formRef, () => methods, [formRef, methods]);
+    React8.useEffect(() => {
+      let subscription;
+      if (onChange) {
+        subscription = methods.watch(onChange);
+      }
+      return () => subscription == null ? void 0 : subscription.unsubscribe();
+    }, [methods, onChange]);
+    const Field2 = React8.useMemo(
+      () => (props2) => /* @__PURE__ */ React8.createElement(Field, {
+        ...props2
+      }),
+      []
+    );
+    return /* @__PURE__ */ React8.createElement(FormProvider, {
+      ...methods
+    }, /* @__PURE__ */ React8.createElement(chakra.form, {
+      ref,
+      onSubmit: handleSubmit(onSubmit, onError),
+      ...rest,
+      className: cx("sui-form", props.className)
+    }, runIfFn(children, {
+      Field: Field2,
+      ...methods
+    })));
+  }
+);
+Form.getFieldResolver = objectFieldResolver;
+Form.displayName = "Form";
+function createForm({ resolver }) {
+  const CreateForm = (props) => {
+    const { schema, ...rest } = props;
+    return /* @__PURE__ */ React8.createElement(Form, {
+      resolver: resolver == null ? void 0 : resolver(props.schema),
+      ...rest
+    });
+  };
+  return CreateForm;
+}
+var FormLayoutItem = ({ children }) => {
+  return /* @__PURE__ */ React8.createElement(chakra.div, null, children);
+};
+if (__DEV__) {
+  FormLayoutItem.displayName = "FormLayoutItem";
+}
+var FormLayout = ({ children, ...props }) => {
+  var _a, _b, _c;
+  const theme = useTheme();
+  const defaultProps = (_c = (_b = (_a = theme.components) == null ? void 0 : _a.FormLayout) == null ? void 0 : _b.defaultProps) != null ? _c : {
+    spacing: 4
+  };
+  const gridProps = {
+    ...defaultProps,
+    ...props
+  };
+  return /* @__PURE__ */ React8.createElement(SimpleGrid, {
+    ...gridProps,
+    className: cx("sui-form__layout", props.className)
+  }, React8.Children.map(children, (child) => {
+    if (React8.isValidElement(child)) {
+      return /* @__PURE__ */ React8.createElement(FormLayoutItem, null, child);
+    }
+    return child;
+  }));
+};
+if (__DEV__) {
+  FormLayout.displayName = "FormLayout";
+}
+var mapNestedFields = (name, children) => {
+  return React8.Children.map(children, (child) => {
+    if (React8.isValidElement(child) && child.props.name) {
+      return React8.cloneElement(child, {
+        ...child.props,
+        name: `${name}.${child.props.name}`
+      });
+    }
+    return child;
+  });
+};
+var [ArrayFieldProvider, useArrayFieldContext] = createContext({
+  name: "ArrayFieldContext"
+});
+var [ArrayFieldRowProvider, useArrayFieldRowContext] = createContext({
+  name: "ArrayFieldRowContext"
+});
+var useArrayField = ({
+  name,
+  defaultValue = {},
+  keyName,
+  min,
+  max
+}) => {
+  const { control } = useFormContext();
+  const context = useFieldArray({
+    control,
+    name,
+    keyName
+  });
+  return {
+    ...context,
+    name,
+    defaultValue,
+    min,
+    max
+  };
+};
+var useArrayFieldRow = ({ index }) => {
+  const { clearErrors } = useFormContext();
+  const { name, remove, fields } = useArrayFieldContext();
+  React8.useEffect(() => {
+    clearErrors(name);
+  }, []);
+  return {
+    index,
+    isFirst: index === 0,
+    isLast: index === fields.length - 1,
+    name: `${name}.${index}`,
+    remove: React8.useCallback(() => {
+      clearErrors(name);
+      remove(index);
+    }, [index])
+  };
+};
+var useArrayFieldRemoveButton = () => {
+  const { isFirst, remove } = useArrayFieldRowContext();
+  const { min, fields } = useArrayFieldContext();
+  const isDisabled = isFirst && !!(min && fields.length <= min);
+  return {
+    onClick: () => remove(),
+    isDisabled
+  };
+};
+var useArrayFieldAddButton = () => {
+  const { append, defaultValue, max, fields } = useArrayFieldContext();
+  const isDisabled = !!(max && fields.length >= max);
+  return {
+    onClick: () => append(defaultValue, {
+      shouldFocus: false
+    }),
+    isDisabled
+  };
+};
+
+// src/array-field.tsx
+var ArrayFieldRow = ({
+  children,
+  index,
+  ...rowFieldsProps
+}) => {
+  return /* @__PURE__ */ React8.createElement(ArrayFieldRowContainer, {
+    index
+  }, /* @__PURE__ */ React8.createElement(ArrayFieldRowFields, {
+    ...rowFieldsProps
+  }, children), /* @__PURE__ */ React8.createElement(ArrayFieldRemoveButton, null));
+};
+if (__DEV__) {
+  ArrayFieldRow.displayName = "ArrayFieldRow";
+}
+var ArrayFieldRowFields = ({
+  children,
+  ...layoutProps
+}) => {
+  const { name } = useArrayFieldRowContext();
+  return /* @__PURE__ */ React8.createElement(FormLayout, {
+    flex: "1",
+    mr: "2",
+    ...layoutProps
+  }, mapNestedFields(name, children));
+};
+if (__DEV__) {
+  ArrayFieldRowFields.displayName = "ArrayFieldRowFields";
+}
+var ArrayFieldRowContainer = ({
+  children,
+  index
+}) => {
+  const context = useArrayFieldRow({ index });
+  const styles = {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "flex-end",
+    width: "100%",
+    mb: 4
+  };
+  return /* @__PURE__ */ React8.createElement(ArrayFieldRowProvider, {
+    value: context
+  }, /* @__PURE__ */ React8.createElement(chakra.div, {
+    __css: styles
+  }, children));
+};
+if (__DEV__) {
+  ArrayFieldRowContainer.displayName = "ArrayFieldRowContainer";
+}
+var ArrayFieldRemoveButton = (props) => {
+  return /* @__PURE__ */ React8.createElement(Button, {
+    "aria-label": "Remove row",
+    ...useArrayFieldRemoveButton(),
+    ...props
+  }, props.children || /* @__PURE__ */ React8.createElement(MinusIcon, null));
+};
+if (__DEV__) {
+  ArrayFieldRemoveButton.displayName = "ArrayFieldRemoveButton";
+}
+var ArrayFieldAddButton = (props) => {
+  return /* @__PURE__ */ React8.createElement(Button, {
+    "aria-label": "Add row",
+    float: "right",
+    ...useArrayFieldAddButton(),
+    ...props
+  }, props.children || /* @__PURE__ */ React8.createElement(AddIcon, null));
+};
+if (__DEV__) {
+  ArrayFieldAddButton.displayName = "ArrayFieldAddButton";
+}
+var ArrayField = forwardRef(
+  (props, ref) => {
+    const { children, ...containerProps } = props;
+    return /* @__PURE__ */ React8.createElement(ArrayFieldContainer, {
+      ref,
+      ...containerProps
+    }, /* @__PURE__ */ React8.createElement(ArrayFieldRows, null, (fields) => /* @__PURE__ */ React8.createElement(React8.Fragment, null, fields.map(({ id }, index) => /* @__PURE__ */ React8.createElement(ArrayFieldRow, {
+      key: id,
+      index
+    }, children)))), /* @__PURE__ */ React8.createElement(ArrayFieldAddButton, null));
+  }
+);
+if (__DEV__) {
+  ArrayField.displayName = "ArrayField";
+}
+var ArrayFieldRows = ({
+  children
+}) => {
+  const { fields } = useArrayFieldContext();
+  return children(fields);
+};
+if (__DEV__) {
+  ArrayFieldRows.displayName = "ArrayFieldRows";
+}
+var ArrayFieldContainer = React8.forwardRef(
+  ({
+    name,
+    defaultValue,
+    keyName,
+    min,
+    max,
+    children,
+    ...fieldProps
+  }, ref) => {
+    const context = useArrayField({
+      name,
+      defaultValue,
+      keyName,
+      min,
+      max
+    });
+    React8.useImperativeHandle(ref, () => context, [ref, context]);
+    return /* @__PURE__ */ React8.createElement(ArrayFieldProvider, {
+      value: context
+    }, /* @__PURE__ */ React8.createElement(BaseField, {
+      name,
+      ...fieldProps
+    }, children));
+  }
+);
+if (__DEV__) {
+  ArrayFieldContainer.displayName = "ArrayFieldContainer";
+}
+var FormLegend = (props) => {
+  const styles = useStyleConfig("SuiFormLegend");
+  return /* @__PURE__ */ React8.createElement(FormLabel, {
+    as: "legend",
+    sx: styles,
+    ...props
+  });
+};
+var ObjectField = (props) => {
+  const { name, label, hideLabel, children, columns, spacing, ...fieldProps } = props;
+  return /* @__PURE__ */ React8.createElement(FormControl, {
+    name,
+    as: "fieldset",
+    ...fieldProps
+  }, /* @__PURE__ */ React8.createElement(FormLegend, {
+    display: hideLabel ? "none" : "block"
+  }, label), /* @__PURE__ */ React8.createElement(FormLayout, {
+    columns,
+    gridGap: spacing
+  }, mapNestedFields(name, children)));
+};
+if (__DEV__) {
+  ObjectField.displayName = "ObjectField";
+}
+var mapNestedFields2 = (resolver, name) => {
+  var _a;
+  return (_a = resolver.getNestedFields(name)) == null ? void 0 : _a.map(
+    ({ name: name2, type, ...nestedFieldProps }, i) => /* @__PURE__ */ React8.createElement(Field, {
+      key: name2 || i,
+      name: name2,
+      type,
+      ...nestedFieldProps
+    })
+  );
+};
+var Fields = ({
+  schema,
+  fieldResolver,
+  focusFirstField,
+  ...props
+}) => {
+  const resolver = React8.useMemo(
+    () => fieldResolver || Form.getFieldResolver(schema),
+    [schema, fieldResolver]
+  );
+  const fields = React8.useMemo(() => resolver.getFields(), [resolver]);
+  const form = useFormContext();
+  React8.useEffect(() => {
+    var _a;
+    if (focusFirstField && ((_a = fields[0]) == null ? void 0 : _a.name)) {
+      form.setFocus(fields[0].name);
+    }
+  }, [schema, fieldResolver, focusFirstField]);
+  return /* @__PURE__ */ React8.createElement(FormLayout, {
+    ...props
+  }, fields.map(
+    ({
+      name,
+      type,
+      defaultValue,
+      ...fieldProps
+    }) => {
+      if (type === "array") {
+        return /* @__PURE__ */ React8.createElement(ArrayField, {
+          key: name,
+          name,
+          ...fieldProps
+        }, mapNestedFields2(resolver, name));
+      } else if (type === "object") {
+        return /* @__PURE__ */ React8.createElement(ObjectField, {
+          key: name,
+          name,
+          ...fieldProps
+        }, mapNestedFields2(resolver, name));
+      }
+      return /* @__PURE__ */ React8.createElement(Field, {
+        key: name,
+        name,
+        type,
+        ...fieldProps
+      });
+    }
+  ));
+};
+Fields.displayName = "Fields";
+var SubmitButton = forwardRef(
+  (props, ref) => {
+    const {
+      children = "Submit",
+      disableIfUntouched,
+      disableIfInvalid,
+      isDisabled: isDisabledProp,
+      isLoading,
+      ...rest
+    } = props;
+    const { formState } = useFormContext();
+    const isDisabled = disableIfUntouched && !formState.isDirty || disableIfInvalid && !formState.isValid || isDisabledProp;
+    return /* @__PURE__ */ React8.createElement(Button, {
+      ...rest,
+      ref,
+      type: "submit",
+      isLoading: formState.isSubmitting || isLoading,
+      isDisabled
+    }, children);
+  }
+);
+SubmitButton.defaultProps = {
+  variant: "primary",
+  disableIfUntouched: false,
+  disableIfInvalid: false
+};
+SubmitButton.displayName = "SubmitButton";
+
+// src/auto-form.tsx
+var AutoForm = forwardRef(
+  (props, ref) => {
+    const {
+      schema,
+      submitLabel = "Submit",
+      fieldResolver,
+      children,
+      ...rest
+    } = props;
+    return /* @__PURE__ */ React8.createElement(Form, {
+      ...rest,
+      schema,
+      ref
+    }, /* @__PURE__ */ React8.createElement(FormLayout, null, /* @__PURE__ */ React8.createElement(Fields, {
+      schema,
+      fieldResolver
+    }), submitLabel && /* @__PURE__ */ React8.createElement(SubmitButton, null, submitLabel), children));
+  }
+);
+AutoForm.displayName = "AutoForm";
+var DisplayIf = ({
+  children,
+  name,
+  defaultValue,
+  isDisabled,
+  isExact,
+  condition = (value) => !!value
+}) => {
+  const value = useWatch({
+    name,
+    defaultValue,
+    disabled: isDisabled,
+    exact: isExact
+  });
+  const context = useFormContext();
+  return condition(value, context) ? children : null;
+};
+if (__DEV__) {
+  DisplayIf.displayName = "DisplayIf";
+}
+var [StepFormProvider, useStepFormContext] = createContext({
+  name: "StepFormContext",
+  errorMessage: "useStepFormContext: `context` is undefined. Seems you forgot to wrap step form components in `<StepForm />`"
+});
+function useStepForm(props) {
+  const { onChange, ...rest } = props;
+  const stepper = useStepper(rest);
+  const { activeStep, isLastStep, nextStep } = stepper;
+  const [steps, updateSteps] = React8.useState({});
+  const onSubmitStep = React8.useCallback(
+    async (data) => {
+      var _a, _b;
+      try {
+        const step = steps[activeStep];
+        if (isLastStep) {
+          await ((_a = props.onSubmit) == null ? void 0 : _a.call(props, data));
+          updateStep({
+            ...step,
+            isCompleted: true
+          });
+          nextStep();
+          return;
+        }
+        await ((_b = step.onSubmit) == null ? void 0 : _b.call(step, data, stepper));
+        nextStep();
+      } catch (e) {
+      }
+    },
+    [steps, activeStep, isLastStep]
+  );
+  const getFormProps = React8.useCallback(() => {
+    const step = steps[activeStep];
+    return {
+      onSubmit: onSubmitStep,
+      schema: step == null ? void 0 : step.schema,
+      resolver: step == null ? void 0 : step.resolver
+    };
+  }, [steps, onSubmitStep, activeStep]);
+  const updateStep = React8.useCallback(
+    (step) => {
+      updateSteps((steps2) => {
+        return {
+          ...steps2,
+          [step.name]: step
+        };
+      });
+    },
+    [steps]
+  );
+  return {
+    getFormProps,
+    updateStep,
+    steps,
+    ...stepper
+  };
+}
+function useFormStep(props) {
+  const { name, schema, resolver, onSubmit } = props;
+  const step = useStep({ name });
+  const { steps, updateStep } = useStepFormContext();
+  React8.useEffect(() => {
+    updateStep({ name, schema, resolver, onSubmit });
+  }, [name, schema]);
+  return {
+    ...step,
+    ...steps[name] || { name, schema }
+  };
+}
+
+// src/step-form.tsx
+var StepForm = React8.forwardRef(
+  (props, ref) => {
+    const { children, ...rest } = props;
+    const stepper = useStepForm(props);
+    const { getFormProps, ...ctx } = stepper;
+    const context = React8.useMemo(() => ctx, [ctx]);
+    return /* @__PURE__ */ React8.createElement(StepperProvider, {
+      value: context
+    }, /* @__PURE__ */ React8.createElement(StepFormProvider, {
+      value: context
+    }, /* @__PURE__ */ React8.createElement(Form, {
+      ref,
+      ...rest,
+      ...getFormProps()
+    }, runIfFn(children, stepper))));
+  }
+);
+var FormStepper = (props) => {
+  const { activeIndex, setIndex } = useStepperContext();
+  const { children, orientation, variant, colorScheme, size, ...rest } = props;
+  const elements = React8.Children.map(children, (child) => {
+    if (React8.isValidElement(child) && (child == null ? void 0 : child.type) === FormStep) {
+      const { isCompleted } = useFormStep(child.props);
+      return /* @__PURE__ */ React8.createElement(StepperStep, {
+        name: child.props.name,
+        title: child.props.title,
+        isCompleted,
+        ...rest
+      }, child.props.children);
+    }
+    return child;
+  });
+  const onChange = React8.useCallback((i) => {
+    setIndex(i);
+  }, []);
+  return /* @__PURE__ */ React8.createElement(StepperContainer, {
+    orientation,
+    step: activeIndex,
+    variant,
+    colorScheme,
+    size,
+    onChange
+  }, /* @__PURE__ */ React8.createElement(StepperSteps, {
+    mb: "4",
+    ...props
+  }, elements));
+};
+var FormStep = (props) => {
+  const { name, schema, resolver, children, className, onSubmit, ...rest } = props;
+  const step = useFormStep({ name, schema, resolver, onSubmit });
+  const { isActive } = step;
+  return isActive ? /* @__PURE__ */ React8.createElement(chakra.div, {
+    ...rest,
+    className: cx("sui-form__step", className)
+  }, children) : null;
+};
+if (__DEV__) {
+  FormStep.displayName = "FormStep";
+}
+var PrevButton = (props) => {
+  const { isFirstStep, isCompleted, prevStep } = useStepperContext();
+  return /* @__PURE__ */ React8.createElement(Button, {
+    isDisabled: isFirstStep || isCompleted,
+    label: "Back",
+    ...props,
+    className: cx("sui-form__prev-button", props.className),
+    onClick: callAllHandlers(props.onClick, prevStep)
+  });
+};
+if (__DEV__) {
+  PrevButton.displayName = "PrevButton";
+}
+var NextButton = (props) => {
+  const { label = "Next", submitLabel = "Complete", ...rest } = props;
+  const { isLastStep, isCompleted } = useStepperContext();
+  return /* @__PURE__ */ React8.createElement(SubmitButton, {
+    ...rest,
+    isDisabled: isCompleted,
+    className: cx("sui-form__next-button", props.className)
+  }, isLastStep || isCompleted ? submitLabel : label);
+};
+if (__DEV__) {
+  NextButton.displayName = "NextButton";
+}
+var WatchField = (props) => {
+  const { name, defaultValue, isDisabled, isExact } = props;
+  const form = useFormContext();
+  const field = useWatch({
+    name,
+    defaultValue,
+    disabled: isDisabled,
+    exact: isExact
+  });
+  return props.children(field, form) || null;
+};
+
+export { ArrayField, ArrayFieldAddButton, ArrayFieldContainer, ArrayFieldProvider, ArrayFieldRemoveButton, ArrayFieldRow, ArrayFieldRowContainer, ArrayFieldRowFields, ArrayFieldRowProvider, ArrayFieldRows, AutoForm, BaseField, CheckboxField, DisplayField, DisplayIf, Field, Fields, Form, FormLayout, FormLegend, FormStep, FormStepper, FormValue, InputField, InputRightButton, NativeSelect, NativeSelectField, NextButton, NumberInputField2 as NumberInputField, ObjectField, PasswordInput, PasswordInputField, PinField, PrevButton, RadioField, Select, SelectField, StepForm, StepFormProvider, SubmitButton, SwitchField, TextareaField, WatchField, createForm, objectFieldResolver, registerFieldType, useArrayField, useArrayFieldAddButton, useArrayFieldContext, useArrayFieldRemoveButton, useArrayFieldRow, useArrayFieldRowContext, useFormStep, useStepForm, useStepFormContext, withControlledInput, withUncontrolledInput };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=index.mjs.map