@saas-ui/forms 2.5.1 → 2.5.2

package/dist/index.mjs

@@ -56,7 +56,20 @@ FormValue.displayName = "FormValue";
 import * as React6 from "react";
 
 // src/fields-context.tsx
-import React5 from "react";
+import React2 from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var FieldsContext = React2.createContext(null);
+var FieldsProvider = (props) => {
+  return /* @__PURE__ */ jsx3(FieldsContext.Provider, { value: props.value, children: props.children });
+};
+var useFieldsContext = () => {
+  return React2.useContext(FieldsContext);
+};
+var useField = (type, fallback) => {
+  var _a;
+  const context = React2.useContext(FieldsContext);
+  return ((_a = context == null ? void 0 : context.fields) == null ? void 0 : _a[type]) || fallback;
+};
 
 // src/default-fields.tsx
 import {
@@ -82,15 +95,15 @@ import {
   InputGroup
 } from "@chakra-ui/react";
 import { ChevronDownIcon, ChevronUpIcon } from "@saas-ui/core";
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-var Input = forwardRef((props, ref) => /* @__PURE__ */ jsx3(NumberInputField, { ref, ...props }));
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+var Input = forwardRef((props, ref) => /* @__PURE__ */ jsx4(NumberInputField, { ref, ...props }));
 Input.displayName = "NumberInputField";
 Input.id = "Input";
 var NumberInput = forwardRef((props, ref) => {
   const {
     hideStepper = false,
-    incrementIcon = /* @__PURE__ */ jsx3(ChevronUpIcon, {}),
-    decrementIcon = /* @__PURE__ */ jsx3(ChevronDownIcon, {}),
+    incrementIcon = /* @__PURE__ */ jsx4(ChevronUpIcon, {}),
+    decrementIcon = /* @__PURE__ */ jsx4(ChevronDownIcon, {}),
     leftAddon,
     rightAddon,
     placeholder,
@@ -101,12 +114,12 @@ var NumberInput = forwardRef((props, ref) => {
   return /* @__PURE__ */ jsxs2(ChakraNumberInput, { ...rest, ref, children: [
     /* @__PURE__ */ jsxs2(InputGroup, { children: [
       leftAddon,
-      /* @__PURE__ */ jsx3(Input, { ...fieldProps }),
+      /* @__PURE__ */ jsx4(Input, { ...fieldProps }),
       rightAddon
     ] }),
     !hideStepper && !rightAddon ? /* @__PURE__ */ jsxs2(NumberInputStepper, { children: [
-      /* @__PURE__ */ jsx3(NumberIncrementStepper, { children: incrementIcon }),
-      /* @__PURE__ */ jsx3(NumberDecrementStepper, { children: decrementIcon })
+      /* @__PURE__ */ jsx4(NumberIncrementStepper, { children: incrementIcon }),
+      /* @__PURE__ */ jsx4(NumberDecrementStepper, { children: decrementIcon })
     ] }) : null
   ] });
 });
@@ -123,17 +136,17 @@ import {
   forwardRef as forwardRef2,
   InputRightElement as InputRightElement2
 } from "@chakra-ui/react";
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { jsx as jsx5 } from "react/jsx-runtime";
 var InputRightButton = forwardRef2(
   (props, ref) => {
-    return /* @__PURE__ */ jsx4(InputRightElement2, { w: "auto", px: "1", py: "1", alignItems: "stretch", children: /* @__PURE__ */ jsx4(Button, { ref, height: "auto", ...props }) });
+    return /* @__PURE__ */ jsx5(InputRightElement2, { w: "auto", px: "1", py: "1", alignItems: "stretch", children: /* @__PURE__ */ jsx5(Button, { ref, height: "auto", ...props }) });
   }
 );
 InputRightButton.id = "InputRightElement";
 InputRightButton.displayName = "InputRightButton";
 
 // src/password-input/password-input.tsx
-import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
 var PasswordInput = forwardRef3(
   (props, ref) => {
     const {
@@ -152,9 +165,9 @@ var PasswordInput = forwardRef3(
     const label = show ? "Hide password" : "Show password";
     let icon;
     if (show) {
-      icon = viewIcon || /* @__PURE__ */ jsx5(ViewIcon, {});
+      icon = viewIcon || /* @__PURE__ */ jsx6(ViewIcon, {});
     } else {
-      icon = viewOffIcon || /* @__PURE__ */ jsx5(ViewOffIcon, {});
+      icon = viewOffIcon || /* @__PURE__ */ jsx6(ViewOffIcon, {});
     }
     const groupProps = {
       width: w || width,
@@ -163,7 +176,7 @@ var PasswordInput = forwardRef3(
     };
     return /* @__PURE__ */ jsxs3(InputGroup2, { ...groupProps, children: [
       leftAddon,
-      /* @__PURE__ */ jsx5(
+      /* @__PURE__ */ jsx6(
         Input2,
         {
           ...inputProps,
@@ -172,7 +185,7 @@ var PasswordInput = forwardRef3(
           autoComplete: show ? "off" : autoComplete
         }
       ),
-      /* @__PURE__ */ jsx5(
+      /* @__PURE__ */ jsx6(
         InputRightButton,
         {
           onClick: handleClick,
@@ -195,17 +208,17 @@ import {
 } from "@chakra-ui/react";
 
 // src/utils.ts
-import * as React3 from "react";
+import * as React4 from "react";
 var mapNestedFields = (name, children) => {
-  return React3.Children.map(children, (child) => {
-    if (React3.isValidElement(child) && child.props.name) {
+  return React4.Children.map(children, (child) => {
+    if (React4.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 React3.cloneElement(child, {
+      return React4.cloneElement(child, {
         ...child.props,
         name: `${name}.${childName}`
       });
@@ -226,13 +239,13 @@ var mapOptions = (options) => {
 };
 
 // src/radio/radio-input.tsx
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 var RadioInput = forwardRef4(
   ({ options: optionsProp, spacing, direction, ...props }, ref) => {
     const { onBlur, onChange, ...groupProps } = props;
     const options = mapOptions(optionsProp);
-    return /* @__PURE__ */ jsx6(RadioGroup, { onChange, ...groupProps, children: /* @__PURE__ */ jsx6(Stack, { spacing, direction, children: options.map(({ value, label, ...radioProps }, i) => {
-      return /* @__PURE__ */ jsx6(
+    return /* @__PURE__ */ jsx7(RadioGroup, { onChange, ...groupProps, children: /* @__PURE__ */ jsx7(Stack, { spacing, direction, children: options.map(({ value, label, ...radioProps }, i) => {
+      return /* @__PURE__ */ jsx7(
         Radio,
         {
           onBlur,
@@ -272,7 +285,7 @@ import {
   useFormControl
 } from "@chakra-ui/react";
 import { createContext as createContext2 } from "@chakra-ui/react-utils";
-import React4 from "react";
+import React5 from "react";
 var [SelectStylesProvider, useSelectStyles] = createStylesContext("SuiSelect");
 var [SelectProvider, useSelectContext] = createContext2({
   strict: true
@@ -295,14 +308,14 @@ var useSelect = (props) => {
     onChange
   });
   const controlProps = useFormControl({ name });
-  const options = React4.useMemo(
+  const options = React5.useMemo(
     () => optionsProp && mapOptions(optionsProp),
     [optionsProp]
   );
   const handleChange = (value2) => {
     setCurrentValue(value2);
   };
-  const getDisplayValue = React4.useCallback(
+  const getDisplayValue = React5.useCallback(
     (value2) => {
       if (!options) {
         return value2;
@@ -316,7 +329,7 @@ var useSelect = (props) => {
     },
     [options]
   );
-  const displayValue = React4.useMemo(
+  const displayValue = React5.useMemo(
     () => currentValue ? (Array.isArray(currentValue) ? currentValue : [currentValue]).map(
       getDisplayValue
     ) : [],
@@ -337,7 +350,7 @@ var useSelect = (props) => {
 };
 
 // src/select/select.tsx
-import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
 var SelectButton = forwardRef5(
   (props, ref) => {
     var _a, _b, _c, _d, _e;
@@ -359,7 +372,7 @@ var SelectButton = forwardRef5(
       onBlur,
       onFocus
     } = context || {};
-    const { rightIcon = /* @__PURE__ */ jsx7(ChevronDownIcon2, {}), ...rest } = props;
+    const { rightIcon = /* @__PURE__ */ jsx8(ChevronDownIcon2, {}), ...rest } = props;
     const focusStyles = (_a = styles.field) == null ? void 0 : _a._focusVisible;
     const readOnlyStyles = (_b = styles.field) == null ? void 0 : _b._readOnly;
     const invalid = (_c = styles.field) == null ? void 0 : _c._invalid;
@@ -382,7 +395,7 @@ var SelectButton = forwardRef5(
       ...props.sx
     };
     const buttonProps = useMenuButton(rest, ref);
-    return /* @__PURE__ */ jsx7(
+    return /* @__PURE__ */ jsx8(
       Button2,
       {
         ...buttonProps,
@@ -396,7 +409,7 @@ var SelectButton = forwardRef5(
         "data-focus": dataAttr(isFocused),
         "data-required": dataAttr(isRequired),
         rightIcon,
-        children: /* @__PURE__ */ jsx7(
+        children: /* @__PURE__ */ jsx8(
           chakra.span,
           {
             __css: {
@@ -421,9 +434,9 @@ var Select = forwardRef5((props, ref) => {
   const menuProps = omitThemingProps(rest);
   const context = useSelect(props);
   const { value, controlProps } = context;
-  return /* @__PURE__ */ jsx7(SelectProvider, { value: context, children: /* @__PURE__ */ jsx7(SelectStylesProvider, { value: styles, children: /* @__PURE__ */ jsx7(Menu, { ...menuProps, closeOnSelect: !multiple, children: /* @__PURE__ */ jsxs4(chakra.div, { className: cx("sui-select"), children: [
+  return /* @__PURE__ */ jsx8(SelectProvider, { value: context, children: /* @__PURE__ */ jsx8(SelectStylesProvider, { value: styles, children: /* @__PURE__ */ jsx8(Menu, { ...menuProps, closeOnSelect: !multiple, children: /* @__PURE__ */ jsxs4(chakra.div, { className: cx("sui-select"), children: [
     children,
-    /* @__PURE__ */ jsx7(
+    /* @__PURE__ */ jsx8(
       chakra.input,
       {
         ...controlProps,
@@ -438,21 +451,21 @@ var Select = forwardRef5((props, ref) => {
 });
 var SelectList = (props) => {
   const { defaultValue, value, options, multiple, onChange } = useSelectContext();
-  return /* @__PURE__ */ jsx7(MenuList, { maxH: "100vh", overflowY: "auto", ...props, children: /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx8(MenuList, { maxH: "100vh", overflowY: "auto", ...props, children: /* @__PURE__ */ jsx8(
     MenuOptionGroup,
     {
       defaultValue: defaultValue || value,
       value,
       onChange,
       type: multiple ? "checkbox" : "radio",
-      children: options ? options.map(({ value: value2, label, ...rest }, i) => /* @__PURE__ */ jsx7(SelectOption, { value: value2, ...rest, children: label || value2 }, i)) : props.children
+      children: options ? options.map(({ value: value2, label, ...rest }, i) => /* @__PURE__ */ jsx8(SelectOption, { value: value2, ...rest, children: label || value2 }, i)) : props.children
     }
   ) });
 };
 Select.displayName = "Select";
 var SelectOption = forwardRef5(
   (props, ref) => {
-    return /* @__PURE__ */ jsx7(MenuItemOption, { ref, ...props });
+    return /* @__PURE__ */ jsx8(MenuItemOption, { ref, ...props });
   }
 );
 SelectOption.id = "MenuItemOption";
@@ -463,11 +476,11 @@ import {
   forwardRef as forwardRef6,
   Select as ChakraSelect
 } from "@chakra-ui/react";
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx9 } from "react/jsx-runtime";
 var NativeSelect = forwardRef6(
   ({ options, children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx8(ChakraSelect, { ref, ...props, children: children || (options == null ? void 0 : options.map(({ value, label }) => {
-      return /* @__PURE__ */ jsx8("option", { value, children: label || value }, value);
+    return /* @__PURE__ */ jsx9(ChakraSelect, { ref, ...props, children: children || (options == null ? void 0 : options.map(({ value, label }) => {
+      return /* @__PURE__ */ jsx9("option", { value, children: label || value }, value);
     })) });
   }
 );
@@ -477,7 +490,7 @@ NativeSelect.displayName = "NativeSelect";
 import { Controller } from "react-hook-form";
 import { forwardRef as forwardRef7, useMergeRefs } from "@chakra-ui/react";
 import { callAllHandlers } from "@chakra-ui/utils";
-import { splitProps as splitProps2 } from "@saas-ui/core/utils";
+import { splitProps as splitProps2 } from "@saas-ui/core";
 
 // src/base-field.tsx
 import { get } from "react-hook-form";
@@ -489,7 +502,7 @@ import {
   FormErrorMessage
 } from "@chakra-ui/react";
 import { splitProps } from "@saas-ui/core";
-import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
 var getError = (name, formState) => {
   return get(formState.errors, name);
 };
@@ -518,18 +531,18 @@ var useBaseField = (props) => {
 var BaseField = (props) => {
   const { controlProps, label, help, hideLabel, error } = useBaseField(props);
   return /* @__PURE__ */ jsxs5(FormControl2, { ...controlProps, isInvalid: !!error, children: [
-    label && !hideLabel ? /* @__PURE__ */ jsx9(FormLabel2, { children: label }) : null,
+    label && !hideLabel ? /* @__PURE__ */ jsx10(FormLabel2, { children: label }) : null,
     /* @__PURE__ */ jsxs5(Box, { children: [
       props.children,
-      help && !(error == null ? void 0 : error.message) ? /* @__PURE__ */ jsx9(FormHelperText, { children: help }) : null,
-      (error == null ? void 0 : error.message) && /* @__PURE__ */ jsx9(FormErrorMessage, { children: error == null ? void 0 : error.message })
+      help && !(error == null ? void 0 : error.message) ? /* @__PURE__ */ jsx10(FormHelperText, { children: help }) : null,
+      (error == null ? void 0 : error.message) && /* @__PURE__ */ jsx10(FormErrorMessage, { children: error == null ? void 0 : error.message })
     ] })
   ] });
 };
 BaseField.displayName = "BaseField";
 
 // src/create-field.tsx
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 var _createField = (InputComponent, { displayName, hideLabel, getBaseField: getBaseFieldProp }) => {
   const Field2 = forwardRef7((props, ref) => {
     var _a;
@@ -554,7 +567,7 @@ var _createField = (InputComponent, { displayName, hideLabel, getBaseField: getB
         "help"
       ].concat(extraProps)
     );
-    return /* @__PURE__ */ jsx10(BaseField2, { ...props, children: /* @__PURE__ */ jsx10(
+    return /* @__PURE__ */ jsx11(BaseField2, { ...props, children: /* @__PURE__ */ jsx11(
       InputComponent,
       {
         ref,
@@ -574,13 +587,13 @@ var withControlledInput = (InputComponent) => {
     ({ name, rules, ...inputProps }, ref) => {
       const { control } = useFormContext();
       const onChange = inputProps.onChange;
-      return /* @__PURE__ */ jsx10(
+      return /* @__PURE__ */ jsx11(
         Controller,
         {
           name,
           control,
           rules,
-          render: ({ field: { ref: _ref, ...field } }) => /* @__PURE__ */ jsx10(
+          render: ({ field: { ref: _ref, ...field } }) => /* @__PURE__ */ jsx11(
             InputComponent,
             {
               ...field,
@@ -601,7 +614,7 @@ var withUncontrolledInput = (InputComponent) => {
       const { register } = useFormContext();
       const { ref: _ref, ...field } = register(name, rules);
       const onChange = inputProps.onChange;
-      return /* @__PURE__ */ jsx10(
+      return /* @__PURE__ */ jsx11(
         InputComponent,
         {
           ...field,
@@ -634,10 +647,10 @@ var createField = (component, options) => {
 };
 
 // src/default-fields.tsx
-import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
 var InputField = createField(
   forwardRef8(({ type = "text", leftAddon, rightAddon, size, ...rest }, ref) => {
-    const input = /* @__PURE__ */ jsx11(Input3, { type, size, ...rest, ref });
+    const input = /* @__PURE__ */ jsx12(Input3, { type, size, ...rest, ref });
     if (leftAddon || rightAddon) {
       return /* @__PURE__ */ jsxs6(InputGroup3, { size, children: [
         leftAddon,
@@ -655,12 +668,12 @@ var NumberInputField2 = createField(
   }
 );
 var PasswordInputField = createField(
-  forwardRef8((props, ref) => /* @__PURE__ */ jsx11(PasswordInput, { ref, ...props }))
+  forwardRef8((props, ref) => /* @__PURE__ */ jsx12(PasswordInput, { ref, ...props }))
 );
 var TextareaField = createField(Textarea);
 var SwitchField = createField(
   forwardRef8(({ type, value, ...rest }, ref) => {
-    return /* @__PURE__ */ jsx11(Switch, { isChecked: !!value, ...rest, ref });
+    return /* @__PURE__ */ jsx12(Switch, { isChecked: !!value, ...rest, ref });
   }),
   {
     isControlled: true
@@ -670,8 +683,8 @@ var SelectField = createField(
   forwardRef8((props, ref) => {
     const { buttonProps, listProps, ...rest } = props;
     return /* @__PURE__ */ jsxs6(Select, { ref, ...rest, children: [
-      /* @__PURE__ */ jsx11(SelectButton, { ...buttonProps }),
-      /* @__PURE__ */ jsx11(SelectList, { ...listProps })
+      /* @__PURE__ */ jsx12(SelectButton, { ...buttonProps }),
+      /* @__PURE__ */ jsx12(SelectList, { ...listProps })
     ] });
   }),
   {
@@ -680,7 +693,7 @@ var SelectField = createField(
 );
 var CheckboxField = createField(
   forwardRef8(({ label, type, ...props }, ref) => {
-    return /* @__PURE__ */ jsx11(Checkbox, { ref, ...props, children: label });
+    return /* @__PURE__ */ jsx12(Checkbox, { ref, ...props, children: label });
   }),
   {
     hideLabel: true
@@ -700,9 +713,9 @@ var PinField = createField(
     const { pinLength = 4, pinType, spacing, ...inputProps } = props;
     const inputs = [];
     for (let i = 0; i < pinLength; i++) {
-      inputs.push(/* @__PURE__ */ jsx11(PinInputField, { ref }, i));
+      inputs.push(/* @__PURE__ */ jsx12(PinInputField, { ref }, i));
     }
-    return /* @__PURE__ */ jsx11(HStack, { spacing, children: /* @__PURE__ */ jsx11(PinInput, { ...inputProps, type: pinType, children: inputs }) });
+    return /* @__PURE__ */ jsx12(HStack, { spacing, children: /* @__PURE__ */ jsx12(PinInput, { ...inputProps, type: pinType, children: inputs }) });
   }),
   {
     isControlled: true
@@ -724,28 +737,6 @@ var defaultFieldTypes = {
   "native-select": NativeSelectField
 };
 
-// src/fields-context.tsx
-import { jsx as jsx12 } from "react/jsx-runtime";
-var FieldsContext = React5.createContext(null);
-var FieldsProvider = (props) => {
-  const fields = { ...defaultFieldTypes, ...props.value.fields };
-  return /* @__PURE__ */ jsx12(
-    FieldsContext.Provider,
-    {
-      value: { fields, getBaseField: props.value.getBaseField },
-      children: props.children
-    }
-  );
-};
-var useFieldsContext = () => {
-  return React5.useContext(FieldsContext);
-};
-var useField = (type) => {
-  var _a;
-  const context = React5.useContext(FieldsContext);
-  return ((_a = context == null ? void 0 : context.fields) == null ? void 0 : _a[type]) || InputField;
-};
-
 // src/field.tsx
 import { jsx as jsx13 } from "react/jsx-runtime";
 var defaultInputType = "text";
@@ -753,7 +744,7 @@ var Field = React6.forwardRef(
   (props, ref) => {
     const { type = defaultInputType, name } = props;
     const overrides = useFieldProps(name);
-    const InputComponent = useField((overrides == null ? void 0 : overrides.type) || type);
+    const InputComponent = useField((overrides == null ? void 0 : overrides.type) || type, InputField);
     return /* @__PURE__ */ jsx13(InputComponent, { ref, ...props, ...overrides });
   }
 );
@@ -1503,7 +1494,11 @@ function createForm({
         fieldResolver: fieldResolverProp,
         ...rest
       } = props;
-      return /* @__PURE__ */ jsx21(FieldsProvider, { value: { fields, getBaseField }, children: /* @__PURE__ */ jsx21(
+      const fieldsContext = {
+        fields: { ...defaultFieldTypes, ...fields },
+        getBaseField
+      };
+      return /* @__PURE__ */ jsx21(FieldsProvider, { value: fieldsContext, children: /* @__PURE__ */ jsx21(
         Form,
         {
           ref,
@@ -1540,7 +1535,14 @@ function createStepForm({
     });
     const { getFormProps, ...ctx } = stepper;
     const context = useMemo2(() => ctx, [ctx]);
-    return /* @__PURE__ */ jsx22(StepperProvider, { value: context, children: /* @__PURE__ */ jsx22(StepFormProvider, { value: context, children: /* @__PURE__ */ jsx22(FieldsProvider, { value: { fields, getBaseField }, children: /* @__PURE__ */ jsx22(Form, { ref, ...rest, ...getFormProps(), children: runIfFn2(children, {
+    const fieldsContext = {
+      fields: {
+        ...defaultFieldTypes,
+        ...fields
+      },
+      getBaseField
+    };
+    return /* @__PURE__ */ jsx22(StepperProvider, { value: context, children: /* @__PURE__ */ jsx22(StepFormProvider, { value: context, children: /* @__PURE__ */ jsx22(FieldsProvider, { value: fieldsContext, children: /* @__PURE__ */ jsx22(Form, { ref, ...rest, ...getFormProps(), children: runIfFn2(children, {
       ...stepper,
       Field,
       FormStep,