@saas-ui/forms 3.0.0-alpha.12 → 3.0.0-alpha.13

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @saas-ui/forms
 
+## 3.0.0-alpha.13
+
+### Major Changes
+
+- b51aff9: BREAKING: getBaseField should now return props and Component
+
+### Patch Changes
+
+- b51aff9: Improved prop handling of base field
+- Updated dependencies [b51aff9]
+- Updated dependencies [b51aff9]
+  - @saas-ui/react@3.0.0-alpha.13
+
 ## 3.0.0-alpha.12
 
 ### Patch Changes

package/dist/index.d.mts

@@ -46,7 +46,10 @@ declare const TextareaField: React__default.FC<Omit<BaseFieldProps<react_hook_fo
 interface SwitchFieldProps extends SwitchProps {
     type: 'switch';
 }
-interface SelectFieldProps extends Omit<Select.RootProps<FieldOption>, 'collection'> {
+interface SelectFieldProps<Multiple extends boolean = boolean> extends Omit<Select.RootProps<FieldOption>, 'collection' | 'value' | 'multiple' | 'onChange' | 'onValueChange'> {
+    multiple?: Multiple;
+    value?: Multiple extends true ? Array<string> : string;
+    onChange?: (value: Multiple extends true ? Array<string> : string) => void;
     options: FieldOptions;
     placeholder?: string;
     triggerProps?: Select.TriggerProps;
@@ -80,7 +83,7 @@ declare const defaultFieldTypes: {
     checkbox: React__default.FC<Omit<BaseFieldProps<react_hook_form.FieldValues, string>, keyof CheckboxFieldProps> & CheckboxFieldProps>;
     radio: React__default.FC<Omit<BaseFieldProps<react_hook_form.FieldValues, string>, keyof RadioFieldProps> & RadioFieldProps>;
     password: React__default.FC<Omit<BaseFieldProps<react_hook_form.FieldValues, string>, keyof PasswordInputProps> & PasswordInputProps>;
-    select: React__default.FC<Omit<BaseFieldProps<react_hook_form.FieldValues, string>, keyof SelectFieldProps> & SelectFieldProps>;
+    select: React__default.FC<Omit<BaseFieldProps<react_hook_form.FieldValues, string>, keyof SelectFieldProps<boolean>> & SelectFieldProps<boolean>>;
     switch: React__default.FC<Omit<BaseFieldProps<react_hook_form.FieldValues, string>, keyof SwitchFieldProps> & SwitchFieldProps>;
     textarea: React__default.FC<Omit<BaseFieldProps<react_hook_form.FieldValues, string>, keyof TextareaFieldProps> & TextareaFieldProps>;
 };
@@ -336,8 +339,14 @@ interface BaseFieldProps<TFieldValues extends FieldValues = FieldValues, TName e
     children?: React.ReactNode;
 }
 type GetBaseField<TProps extends object = object> = () => {
-    extraProps: string[];
-    BaseField: React.FC<Omit<BaseFieldProps, 'name'> & {
+    /**
+     * Extra props to pass to the component
+     */
+    props: Array<Extract<keyof TProps, string>>;
+    /**
+     * The component to render
+     */
+    Component: React.FC<Omit<BaseFieldProps, 'name'> & {
         name: string;
         children: React.ReactNode;
     } & TProps>;
@@ -529,9 +538,9 @@ interface FieldsProps<TSchema = any> {
 }
 declare const AutoFields: React$1.FC<FieldsProps>;
 
-interface FieldsContextValue {
-    fields: Record<string, React__default.FC<any>>;
-    getBaseField?: GetBaseField<any>;
+interface FieldsContextValue<TFields = any, TBaseFieldProps extends object = object> {
+    fields: Record<string, React__default.FC<TFields>>;
+    getBaseField?: GetBaseField<TBaseFieldProps>;
 }
 declare const FieldsProvider: React__default.FC<{
     value: FieldsContextValue;
@@ -581,17 +590,21 @@ interface WatchFieldProps<Value = unknown, TFieldValues extends FieldValues = Fi
 declare const WatchField: <Value = unknown, TFieldValues extends FieldValues = FieldValues, TContext extends object = object>(props: WatchFieldProps<Value, TFieldValues, TContext>) => React$1.ReactElement<any, string | React$1.JSXElementConstructor<any>> | null;
 
 declare const useBaseField: (props: BaseFieldProps) => {
-    controlProps: Pick<BaseFieldProps<react_hook_form.FieldValues, string>, never>;
+    rootProps: Omit<BaseFieldProps<react_hook_form.FieldValues, string>, "name" | "label" | "hideLabel" | "help" | "rules" | "type" | "placeholder" | "children">;
     error: any;
     touched: any;
     name: string;
     label?: string | undefined;
     hideLabel?: boolean | undefined;
     help?: string | undefined;
+    rules?: Omit<react_hook_form.RegisterOptions<react_hook_form.FieldValues, string>, "disabled" | "setValueAs" | "valueAsNumber" | "valueAsDate"> | undefined;
+    type?: string | undefined;
+    placeholder?: string | undefined;
+    children?: React$1.ReactNode;
 };
 /**
  * The default BaseField component
- * Composes the Chakra UI FormControl component, with FormLabel, FormHelperText and FormErrorMessage.
+ * Composes the Chakra UI Field component, with Label, HelperText and ErrorText.
  */
 declare const BaseField: React$1.FC<BaseFieldProps>;
 

package/dist/index.d.ts

@@ -46,7 +46,10 @@ declare const TextareaField: React__default.FC<Omit<BaseFieldProps<react_hook_fo
 interface SwitchFieldProps extends SwitchProps {
     type: 'switch';
 }
-interface SelectFieldProps extends Omit<Select.RootProps<FieldOption>, 'collection'> {
+interface SelectFieldProps<Multiple extends boolean = boolean> extends Omit<Select.RootProps<FieldOption>, 'collection' | 'value' | 'multiple' | 'onChange' | 'onValueChange'> {
+    multiple?: Multiple;
+    value?: Multiple extends true ? Array<string> : string;
+    onChange?: (value: Multiple extends true ? Array<string> : string) => void;
     options: FieldOptions;
     placeholder?: string;
     triggerProps?: Select.TriggerProps;
@@ -80,7 +83,7 @@ declare const defaultFieldTypes: {
     checkbox: React__default.FC<Omit<BaseFieldProps<react_hook_form.FieldValues, string>, keyof CheckboxFieldProps> & CheckboxFieldProps>;
     radio: React__default.FC<Omit<BaseFieldProps<react_hook_form.FieldValues, string>, keyof RadioFieldProps> & RadioFieldProps>;
     password: React__default.FC<Omit<BaseFieldProps<react_hook_form.FieldValues, string>, keyof PasswordInputProps> & PasswordInputProps>;
-    select: React__default.FC<Omit<BaseFieldProps<react_hook_form.FieldValues, string>, keyof SelectFieldProps> & SelectFieldProps>;
+    select: React__default.FC<Omit<BaseFieldProps<react_hook_form.FieldValues, string>, keyof SelectFieldProps<boolean>> & SelectFieldProps<boolean>>;
     switch: React__default.FC<Omit<BaseFieldProps<react_hook_form.FieldValues, string>, keyof SwitchFieldProps> & SwitchFieldProps>;
     textarea: React__default.FC<Omit<BaseFieldProps<react_hook_form.FieldValues, string>, keyof TextareaFieldProps> & TextareaFieldProps>;
 };
@@ -336,8 +339,14 @@ interface BaseFieldProps<TFieldValues extends FieldValues = FieldValues, TName e
     children?: React.ReactNode;
 }
 type GetBaseField<TProps extends object = object> = () => {
-    extraProps: string[];
-    BaseField: React.FC<Omit<BaseFieldProps, 'name'> & {
+    /**
+     * Extra props to pass to the component
+     */
+    props: Array<Extract<keyof TProps, string>>;
+    /**
+     * The component to render
+     */
+    Component: React.FC<Omit<BaseFieldProps, 'name'> & {
         name: string;
         children: React.ReactNode;
     } & TProps>;
@@ -529,9 +538,9 @@ interface FieldsProps<TSchema = any> {
 }
 declare const AutoFields: React$1.FC<FieldsProps>;
 
-interface FieldsContextValue {
-    fields: Record<string, React__default.FC<any>>;
-    getBaseField?: GetBaseField<any>;
+interface FieldsContextValue<TFields = any, TBaseFieldProps extends object = object> {
+    fields: Record<string, React__default.FC<TFields>>;
+    getBaseField?: GetBaseField<TBaseFieldProps>;
 }
 declare const FieldsProvider: React__default.FC<{
     value: FieldsContextValue;
@@ -581,17 +590,21 @@ interface WatchFieldProps<Value = unknown, TFieldValues extends FieldValues = Fi
 declare const WatchField: <Value = unknown, TFieldValues extends FieldValues = FieldValues, TContext extends object = object>(props: WatchFieldProps<Value, TFieldValues, TContext>) => React$1.ReactElement<any, string | React$1.JSXElementConstructor<any>> | null;
 
 declare const useBaseField: (props: BaseFieldProps) => {
-    controlProps: Pick<BaseFieldProps<react_hook_form.FieldValues, string>, never>;
+    rootProps: Omit<BaseFieldProps<react_hook_form.FieldValues, string>, "name" | "label" | "hideLabel" | "help" | "rules" | "type" | "placeholder" | "children">;
     error: any;
     touched: any;
     name: string;
     label?: string | undefined;
     hideLabel?: boolean | undefined;
     help?: string | undefined;
+    rules?: Omit<react_hook_form.RegisterOptions<react_hook_form.FieldValues, string>, "disabled" | "setValueAs" | "valueAsNumber" | "valueAsDate"> | undefined;
+    type?: string | undefined;
+    placeholder?: string | undefined;
+    children?: React$1.ReactNode;
 };
 /**
  * The default BaseField component
- * Composes the Chakra UI FormControl component, with FormLabel, FormHelperText and FormErrorMessage.
+ * Composes the Chakra UI Field component, with Label, HelperText and ErrorText.
  */
 declare const BaseField: React$1.FC<BaseFieldProps>;
 

package/dist/index.js

@@ -82,10 +82,11 @@ __export(src_exports, {
 module.exports = __toCommonJS(src_exports);
 
 // src/create-form.tsx
-var import_react13 = require("react");
+var import_react14 = require("react");
 
 // src/default-fields.tsx
-var import_react4 = require("@chakra-ui/react");
+var import_react4 = require("react");
+var import_react5 = require("@chakra-ui/react");
 var import_checkbox = require("@saas-ui/react/checkbox");
 var import_input_group = require("@saas-ui/react/input-group");
 var import_number_input = require("@saas-ui/react/number-input");
@@ -138,30 +139,35 @@ var isTouched = (name, formState) => {
   return (0, import_react_hook_form2.get)(formState.touchedFields, name);
 };
 var useBaseField = (props) => {
-  const [fieldProps] = (0, import_utils.splitProps)(props, ["name", "label", "help", "hideLabel"]);
-  const [controlProps] = (0, import_utils.splitProps)(props, [
-    // 'id',
-    // 'orientation',
-    // 'disabled',
-    // 'invalid',
-    // 'readOnly',
-    // 'required',
+  const [fieldProps, rootProps] = (0, import_utils.splitProps)(props, [
+    "name",
+    "label",
+    "help",
+    "hideLabel",
+    "placeholder",
+    "rules",
+    "type",
+    "children"
   ]);
   const { formState } = useFormContext();
   const error = getError(fieldProps.name, formState);
   const touched = isTouched(fieldProps.name, formState);
   return {
     ...fieldProps,
-    controlProps,
+    rootProps,
     error,
     touched
   };
 };
 var BaseField = (props) => {
-  const { label, help, hideLabel, error } = useBaseField(props);
+  const { rootProps, label, hideLabel, help, error } = useBaseField(props);
   const isInvalid = !!error;
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react.Field.Root, { invalid: isInvalid, ...props, children: [
-    label && !hideLabel ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react.Field.Label, { children: label }) : null,
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react.Field.Root, { invalid: isInvalid, ...rootProps, children: [
+    label && !hideLabel ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react.Field.Label, { children: [
+      label,
+      " ",
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react.Field.RequiredIndicator, {})
+    ] }) : null,
     /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react.Box, { width: "full", children: [
       props.children,
       help && !(error == null ? void 0 : error.message) ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react.Field.HelperText, { children: help }) : null,
@@ -192,37 +198,34 @@ var import_jsx_runtime4 = require("react/jsx-runtime");
 var _createField = (InputComponent, { displayName, hideLabel, getBaseField: getBaseFieldProp }) => {
   const Field3 = (0, import_react3.forwardRef)((props, ref) => {
     var _a;
-    const { id, name, label, isRequired, rules } = props;
+    const { id, label, required, rules } = props;
     const inputRules = {
-      required: isRequired,
+      required,
       ...rules
     };
     const fieldContext = useFieldsContext();
     const getBaseField = (_a = fieldContext == null ? void 0 : fieldContext.getBaseField) != null ? _a : getBaseFieldProp;
-    const { extraProps, BaseField: BaseField2 } = import_react3.default.useMemo(
+    const { props: extraProps, Component } = import_react3.default.useMemo(
       () => getBaseField(),
       [getBaseField]
     );
-    const [, inputProps] = (0, import_utils2.splitProps)(
+    const rootProps = {
+      name: props.name,
+      label: props.label,
+      disabled: props.disabled,
+      invalid: props.invalid,
+      readOnly: props.readOnly,
+      required: props.required
+    };
+    const [baseFieldProps, inputProps] = (0, import_utils2.splitProps)(
       props,
-      [
-        "children",
-        "name",
-        "label",
-        "required",
-        "disabled",
-        "invalid",
-        "readOnly",
-        "help",
-        "hideLabel"
-      ].concat(extraProps)
+      ["orientation", "help", "hideLabel"].concat(extraProps)
     );
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(BaseField2, { name, hideLabel, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Component, { ...rootProps, ...baseFieldProps, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       InputComponent,
       {
         ref,
         id,
-        name,
         label: hideLabel ? label : void 0,
         ...inputProps,
         rules: inputRules
@@ -288,8 +291,8 @@ var createField = (component, options) => {
     displayName: `${(_a = component.displayName) != null ? _a : "Custom"}Field`,
     hideLabel: options == null ? void 0 : options.hideLabel,
     getBaseField: () => ({
-      extraProps: [],
-      BaseField
+      props: [],
+      Component: BaseField
     })
   });
   return Field3;
@@ -299,14 +302,14 @@ var createField = (component, options) => {
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var InputField = createField(
   ({ type = "text", startElement, endElement, size, ...rest }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_input_group.InputGroup, { startElement, endElement, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react4.Input, { type, size, ...rest, ref }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_input_group.InputGroup, { startElement, endElement, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react5.Input, { type, size, ...rest, ref }) });
   }
 );
 var NumberInputField = createField((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_number_input.NumberInput, { ...props, ref }), {
   isControlled: true
 });
 var PasswordInputField = createField(({ type = "password", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_password_input.PasswordInput, { ref, ...props }));
-var TextareaField = createField((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react4.Textarea, { ...props, ref }));
+var TextareaField = createField((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react5.Textarea, { ...props, ref }));
 var SwitchField = createField(
   ({ type, value, ...rest }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_switch.Switch, { checked: !!value, ...rest, ref });
@@ -323,22 +326,28 @@ var SelectField = createField(
       options,
       placeholder,
       onChange,
-      onValueChange,
       onBlur,
+      multiple = false,
+      value: valueProp,
       ...rest
     } = props;
-    const collection = (0, import_react4.createListCollection)({
-      items: options
-    });
+    const collection = (0, import_react4.useMemo)(
+      () => (0, import_react5.createListCollection)({
+        items: options
+      }),
+      [options]
+    );
+    const value = multiple ? [...valueProp != null ? valueProp : []] : valueProp ? [valueProp] : [];
     return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
       import_select.Select.Root,
       {
         ref,
         collection,
         onValueChange: (details) => {
-          onChange(details.value);
+          onChange(multiple ? details.value : details.value[0]);
         },
         onInteractOutside: () => onBlur(),
+        value,
         ...rest,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_select.Select.Trigger, { ...triggerProps, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_select.Select.ValueText, { placeholder }) }),
@@ -370,7 +379,7 @@ var RadioField = createField(
           onChange == null ? void 0 : onChange(value);
         },
         ...rest,
-        children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react4.Stack, { flexDirection, gap, children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_radio.Radio, { value: option.value, children: option.label || option.value }, option.value)) })
+        children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react5.Stack, { flexDirection, gap, children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_radio.Radio, { value: option.value, children: option.label || option.value }, option.value)) })
       }
     );
   },
@@ -445,37 +454,37 @@ var objectFieldResolver = (schema) => {
 };
 
 // src/form.tsx
-var import_react11 = __toESM(require("react"));
-var import_react12 = require("@chakra-ui/react");
+var import_react12 = __toESM(require("react"));
+var import_react13 = require("@chakra-ui/react");
 var import_utils9 = require("@saas-ui/core/utils");
 var import_react_hook_form7 = require("react-hook-form");
 
 // src/array-field.tsx
-var import_react7 = __toESM(require("react"));
-var import_react8 = require("@chakra-ui/react");
+var import_react8 = __toESM(require("react"));
+var import_react9 = require("@chakra-ui/react");
 var import_icons = require("@saas-ui/react/icons");
 
 // src/form-layout.tsx
-var import_react5 = require("react");
-var import_react6 = require("@chakra-ui/react");
+var import_react6 = require("react");
+var import_react7 = require("@chakra-ui/react");
 var import_utils4 = require("@saas-ui/core/utils");
 var import_jsx_runtime6 = require("react/jsx-runtime");
-var FormLayout = (0, import_react5.forwardRef)(
-  ({ children, rowGap = 4, ...props }, ref) => {
-    const recipe = (0, import_react6.useRecipe)({
+var FormLayout = (0, import_react6.forwardRef)(
+  ({ children, gap = 4, ...props }, ref) => {
+    const recipe = (0, import_react7.useRecipe)({
       key: "formLayout"
     });
     const [variantProps, gridProps] = recipe.splitVariantProps(props);
     const styles = recipe(variantProps);
     return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-      import_react6.SimpleGrid,
+      import_react7.SimpleGrid,
       {
         ref,
         ...gridProps,
         className: (0, import_utils4.cx)("sui-form-layout", props.className),
         css: [
           {
-            rowGap
+            gap
           },
           styles,
           props.css
@@ -488,7 +497,7 @@ var FormLayout = (0, import_react5.forwardRef)(
 FormLayout.displayName = "FormLayout";
 
 // src/use-array-field.tsx
-var React4 = __toESM(require("react"));
+var React5 = __toESM(require("react"));
 var import_utils5 = require("@saas-ui/core/utils");
 var import_react_hook_form4 = require("react-hook-form");
 var [ArrayFieldProvider, useArrayFieldContext] = (0, import_utils5.createContext)({
@@ -521,7 +530,7 @@ var useArrayField = ({
 var useArrayFieldRow = ({ index }) => {
   const { clearErrors } = useFormContext();
   const { name, remove, fields } = useArrayFieldContext();
-  React4.useEffect(() => {
+  React5.useEffect(() => {
     clearErrors(name);
   }, []);
   return {
@@ -529,7 +538,7 @@ var useArrayFieldRow = ({ index }) => {
     isFirst: index === 0,
     isLast: index === fields.length - 1,
     name: `${name}.${index}`,
-    remove: React4.useCallback(() => {
+    remove: React5.useCallback(() => {
       clearErrors(name);
       remove(index);
     }, [index])
@@ -556,17 +565,17 @@ var useArrayFieldAddButton = () => {
 };
 
 // src/utils.ts
-var React5 = __toESM(require("react"));
+var React6 = __toESM(require("react"));
 var mapNestedFields = (name, children) => {
-  return React5.Children.map(children, (child) => {
-    if (React5.isValidElement(child) && child.props.name) {
+  return React6.Children.map(children, (child) => {
+    if (React6.isValidElement(child) && child.props.name) {
       let childName = child.props.name;
       if (childName.includes(".")) {
         childName = childName.replace(/^.*\.(.*)/, "$1");
       } else if (childName.includes(".$")) {
         childName = childName.replace(/^.*\.\$(.*)/, "$1");
       }
-      return React5.cloneElement(child, {
+      return React6.cloneElement(child, {
         ...child.props,
         name: `${name}.${childName}`
       });
@@ -609,16 +618,16 @@ var ArrayFieldRowContainer = ({
     width: "100%",
     mb: 4
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ArrayFieldRowProvider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react8.chakra.div, { ...rest, css: styles, children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ArrayFieldRowProvider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react9.chakra.div, { ...rest, css: styles, children }) });
 };
 ArrayFieldRowContainer.displayName = "ArrayFieldRowContainer";
 var ArrayFieldRemoveButton = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react8.Button, { "aria-label": "Remove row", ...useArrayFieldRemoveButton(), ...props, children: props.children || /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_icons.MinusIcon, {}) });
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react9.Button, { "aria-label": "Remove row", ...useArrayFieldRemoveButton(), ...props, children: props.children || /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_icons.MinusIcon, {}) });
 };
 ArrayFieldRemoveButton.displayName = "ArrayFieldRemoveButton";
 var ArrayFieldAddButton = (props) => {
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-    import_react8.Button,
+    import_react9.Button,
     {
       "aria-label": "Add row",
       float: "right",
@@ -629,7 +638,7 @@ var ArrayFieldAddButton = (props) => {
   );
 };
 ArrayFieldAddButton.displayName = "ArrayFieldAddButton";
-var ArrayField = (0, import_react7.forwardRef)(
+var ArrayField = (0, import_react8.forwardRef)(
   (props, ref) => {
     const { children, ...containerProps } = props;
     const rowFn = typeof children === "function" ? children : (fields) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, { children: fields.map(({ id }, index) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ArrayFieldRow, { index, children }, id)) || null });
@@ -647,7 +656,7 @@ var ArrayFieldRows = ({
   return children(fields);
 };
 ArrayFieldRows.displayName = "ArrayFieldRows";
-var ArrayFieldContainer = import_react7.default.forwardRef(
+var ArrayFieldContainer = import_react8.default.forwardRef(
   ({
     name,
     defaultValue,
@@ -665,14 +674,14 @@ var ArrayFieldContainer = import_react7.default.forwardRef(
       min: min || (overrides == null ? void 0 : overrides.min),
       max: max || (overrides == null ? void 0 : overrides.max)
     });
-    import_react7.default.useImperativeHandle(ref, () => context, [ref, context]);
+    import_react8.default.useImperativeHandle(ref, () => context, [ref, context]);
     return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ArrayFieldProvider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(BaseField, { name, ...fieldProps, ...overrides, children }) });
   }
 );
 ArrayFieldContainer.displayName = "ArrayFieldContainer";
 
 // src/display-if.tsx
-var React7 = __toESM(require("react"));
+var React8 = __toESM(require("react"));
 var import_react_hook_form5 = require("react-hook-form");
 var DisplayIf = ({
   children,
@@ -683,8 +692,8 @@ var DisplayIf = ({
   condition = (value) => !!value,
   onToggle
 }) => {
-  const initializedRef = React7.useRef(false);
-  const matchesRef = React7.useRef(false);
+  const initializedRef = React8.useRef(false);
+  const matchesRef = React8.useRef(false);
   const value = (0, import_react_hook_form5.useWatch)({
     name,
     defaultValue,
@@ -693,7 +702,7 @@ var DisplayIf = ({
   });
   const context = useFormContext();
   const matches = condition(value, context);
-  React7.useEffect(() => {
+  React8.useEffect(() => {
     if (!initializedRef.current) {
       initializedRef.current = true;
       return;
@@ -707,10 +716,10 @@ var DisplayIf = ({
 DisplayIf.displayName = "DisplayIf";
 
 // src/field.tsx
-var React8 = __toESM(require("react"));
+var React9 = __toESM(require("react"));
 var import_jsx_runtime8 = require("react/jsx-runtime");
 var defaultInputType = "text";
-var Field2 = React8.forwardRef(
+var Field2 = React9.forwardRef(
   (props, ref) => {
     const { type = defaultInputType, name } = props;
     const overrides = useFieldProps(name);
@@ -720,14 +729,14 @@ var Field2 = React8.forwardRef(
 );
 
 // src/fields.tsx
-var React9 = __toESM(require("react"));
+var React10 = __toESM(require("react"));
 
 // src/object-field.tsx
-var import_react9 = require("@chakra-ui/react");
+var import_react10 = require("@chakra-ui/react");
 var import_utils7 = require("@saas-ui/core/utils");
 var import_jsx_runtime9 = require("react/jsx-runtime");
 var FormLegend = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react9.Field.Label, { as: "legend", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react10.Field.Label, { as: "legend", ...props });
 };
 var ObjectField = (props) => {
   const {
@@ -741,7 +750,7 @@ var ObjectField = (props) => {
   } = props;
   const { hideLabel, columns, gap, ...overrides } = useFieldProps(name);
   const hidden = hideLabelProp || hideLabel;
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react9.Field.Root, { as: "fieldset", ...fieldProps, ...overrides, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react10.Field.Root, { as: "fieldset", ...fieldProps, ...overrides, children: [
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(FormLegend, { "data-hidden": (0, import_utils7.dataAttr)(hidden), children: label }),
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(FormLayout, { columns: columnsProp || columns, gridGap: gapProp || gap, children: mapNestedFields(name, children) })
   ] });
@@ -773,10 +782,10 @@ var AutoFields = ({
   const context = useFormContext();
   const schema = schemaProp || context.schema;
   const fieldResolver = fieldResolverProp || context.fieldResolver;
-  const resolver = React9.useMemo(() => fieldResolver, [schema, fieldResolver]);
-  const fields = React9.useMemo(() => resolver == null ? void 0 : resolver.getFields(), [resolver]);
+  const resolver = React10.useMemo(() => fieldResolver, [schema, fieldResolver]);
+  const fields = React10.useMemo(() => resolver == null ? void 0 : resolver.getFields(), [resolver]);
   const form = useFormContext();
-  React9.useEffect(() => {
+  React10.useEffect(() => {
     var _a;
     if (focusFirstField && ((_a = fields == null ? void 0 : fields[0]) == null ? void 0 : _a.name)) {
       form.setFocus(fields[0].name);
@@ -807,11 +816,11 @@ var AutoFields = ({
 AutoFields.displayName = "Fields";
 
 // src/submit-button.tsx
-var import_react10 = require("react");
+var import_react11 = require("react");
 var import_button = require("@saas-ui/react/button");
 var import_react_hook_form6 = require("react-hook-form");
 var import_jsx_runtime11 = require("react/jsx-runtime");
-var SubmitButton = (0, import_react10.forwardRef)(
+var SubmitButton = (0, import_react11.forwardRef)(
   (props, ref) => {
     const {
       variant = "glass",
@@ -853,7 +862,7 @@ SubmitButton.displayName = "SubmitButton";
 
 // src/form.tsx
 var import_jsx_runtime12 = require("react/jsx-runtime");
-var Form = (0, import_react11.forwardRef)(
+var Form = (0, import_react12.forwardRef)(
   (props, ref) => {
     const {
       mode = "all",
@@ -894,8 +903,8 @@ var Form = (0, import_react11.forwardRef)(
     };
     const methods = (0, import_react_hook_form7.useForm)(form);
     const { handleSubmit } = methods;
-    import_react11.default.useImperativeHandle(formRef, () => methods, [formRef, methods]);
-    import_react11.default.useEffect(() => {
+    import_react12.default.useImperativeHandle(formRef, () => methods, [formRef, methods]);
+    import_react12.default.useEffect(() => {
       let subscription;
       if (onChange) {
         subscription = methods.watch(onChange);
@@ -917,7 +926,7 @@ var Form = (0, import_react11.forwardRef)(
         fieldResolver,
         fields,
         children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-          import_react12.chakra.form,
+          import_react13.chakra.form,
           {
             ref,
             onSubmit: handleSubmit(onSubmit, onError),
@@ -946,7 +955,7 @@ function createForm({
   fields,
   getBaseField
 } = {}) {
-  const DefaultForm = (0, import_react13.forwardRef)(
+  const DefaultForm = (0, import_react14.forwardRef)(
     (props, ref) => {
       const {
         schema,
@@ -954,7 +963,7 @@ function createForm({
         fieldResolver: fieldResolverProp,
         ...rest
       } = props;
-      const fieldsContext = (0, import_react13.useMemo)(
+      const fieldsContext = (0, import_react14.useMemo)(
         () => ({
           fields: { ...defaultFieldTypes, ...fields },
           getBaseField
@@ -978,16 +987,16 @@ function createForm({
 }
 
 // src/display-field.tsx
-var import_react14 = require("@chakra-ui/react");
+var import_react15 = require("@chakra-ui/react");
 var import_jsx_runtime14 = require("react/jsx-runtime");
 var DisplayField = ({
   name,
   label,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_react14.Field.Root, { ...props, children: [
-    label ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react14.Field.Label, { htmlFor: name, children: label }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react14.Text, { fontSize: "md", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(FormValue, { name }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_react15.Field.Root, { ...props, children: [
+    label ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react15.Field.Label, { htmlFor: name, children: label }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react15.Text, { fontSize: "md", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(FormValue, { name }) })
   ] });
 };
 DisplayField.displayName = "DisplayField";