@saas-ui/forms 3.0.0-next.0 → 3.0.0-next.10

package/CHANGELOG.md

@@ -1,5 +1,78 @@
 # @saas-ui/forms
 
+## 3.0.0-next.10
+
+### Patch Changes
+
+- Updated dependencies
+  - @saas-ui/react@3.0.0-next.10
+
+## 3.0.0-next.9
+
+### Patch Changes
+
+- Updated dependencies
+  - @saas-ui/react@3.0.0-next.9
+
+## 3.0.0-next.8
+
+### Patch Changes
+
+- Updated dependencies
+  - @saas-ui/react@3.0.0-next.8
+
+## 3.0.0-next.7
+
+### Patch Changes
+
+- Updated dependencies
+  - @saas-ui/react@3.0.0-next.7
+
+## 3.0.0-next.6
+
+### Patch Changes
+
+- Updated dependencies
+  - @saas-ui/react@3.0.0-next.6
+
+## 3.0.0-next.5
+
+### Patch Changes
+
+- Updated dependencies
+  - @saas-ui/react@3.0.0-next.5
+
+## 3.0.0-next.4
+
+### Patch Changes
+
+- Updated dependencies [e86d242]
+  - @saas-ui/react@3.0.0-next.4
+
+## 3.0.0-next.3
+
+### Patch Changes
+
+- Updated dependencies [860649d]
+  - @saas-ui/react@3.0.0-next.3
+  - @saas-ui/core@3.0.0-next.1
+
+## 3.0.0-next.2
+
+### Patch Changes
+
+- Updated dependencies [ec22a57]
+- Updated dependencies [928abff]
+- Updated dependencies [26f5452]
+  - @saas-ui/react@3.0.0-next.2
+
+## 3.0.0-next.1
+
+### Patch Changes
+
+- Updated dependencies [f13c1ce]
+  - @saas-ui/react@3.0.0-next.1
+
 ## 3.0.0-next.0
 
 ### Major Changes

package/dist/index.d.mts

@@ -9,7 +9,7 @@ import { CheckboxProps } from '@saas-ui/react/checkbox';
 import { NumberInputProps } from '@saas-ui/react/number-input';
 import { PasswordInputProps } from '@saas-ui/react/password-input';
 import { PinInputProps } from '@saas-ui/react/pin-input';
-import { RadioGroupProps } from '@saas-ui/react/radio';
+import { RadioGroup } from '@saas-ui/react/radio-group';
 import { Select } from '@saas-ui/react/select';
 import { SwitchProps } from '@saas-ui/react/switch';
 import * as react_jsx_runtime from 'react/jsx-runtime';
@@ -61,7 +61,7 @@ interface CheckboxFieldProps extends CheckboxProps {
     type: 'checkbox';
     label?: string;
 }
-interface RadioFieldProps extends RadioGroupProps {
+interface RadioFieldProps extends RadioGroup.RootProps {
     type: 'radio';
     options: FieldOptions;
     flexDirection?: SystemStyleObject['flexDirection'];

package/dist/index.d.ts

@@ -9,7 +9,7 @@ import { CheckboxProps } from '@saas-ui/react/checkbox';
 import { NumberInputProps } from '@saas-ui/react/number-input';
 import { PasswordInputProps } from '@saas-ui/react/password-input';
 import { PinInputProps } from '@saas-ui/react/pin-input';
-import { RadioGroupProps } from '@saas-ui/react/radio';
+import { RadioGroup } from '@saas-ui/react/radio-group';
 import { Select } from '@saas-ui/react/select';
 import { SwitchProps } from '@saas-ui/react/switch';
 import * as react_jsx_runtime from 'react/jsx-runtime';
@@ -61,7 +61,7 @@ interface CheckboxFieldProps extends CheckboxProps {
     type: 'checkbox';
     label?: string;
 }
-interface RadioFieldProps extends RadioGroupProps {
+interface RadioFieldProps extends RadioGroup.RootProps {
     type: 'radio';
     options: FieldOptions;
     flexDirection?: SystemStyleObject['flexDirection'];

package/dist/index.js

@@ -89,11 +89,12 @@ var import_react14 = require("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_input = require("@saas-ui/react/input");
 var import_number_input = require("@saas-ui/react/number-input");
 var import_password_input = require("@saas-ui/react/password-input");
 var import_pin_input = require("@saas-ui/react/pin-input");
 var import_radio = require("@saas-ui/react/radio");
+var import_radio_group = require("@saas-ui/react/radio-group");
 var import_select = require("@saas-ui/react/select");
 var import_switch = require("@saas-ui/react/switch");
 
@@ -121,10 +122,9 @@ var useFormContext = () => {
   };
 };
 var useFieldProps = (name) => {
-  var _a;
-  const parsedName = name == null ? void 0 : name.replace(/\.[0-9]/g, ".$");
+  const parsedName = name?.replace(/\.[0-9]/g, ".$");
   const context = useFormContext();
-  return ((_a = context == null ? void 0 : context.fields) == null ? void 0 : _a[parsedName]) || {};
+  return context?.fields?.[parsedName] || {};
 };
 var FormProvider = (props) => {
   const { children, fieldResolver, schema, fields, ...rest } = props;
@@ -170,8 +170,8 @@ var BaseField = (props) => {
       /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react.Field.RequiredIndicator, {})
     ] }) : null,
     props.children,
-    help && !(error == null ? void 0 : error.message) ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react.Field.HelperText, { children: help }) : null,
-    (error == null ? void 0 : error.message) && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react.Field.ErrorText, { children: error == null ? void 0 : error.message })
+    help && !error?.message ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react.Field.HelperText, { children: help }) : null,
+    error?.message && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react.Field.ErrorText, { children: error?.message })
   ] });
 };
 BaseField.displayName = "BaseField";
@@ -187,23 +187,21 @@ var useFieldsContext = () => {
   return import_react2.default.useContext(FieldsContext);
 };
 var useField = (type, fallback) => {
-  var _a;
   const context = import_react2.default.useContext(FieldsContext);
-  return ((_a = context == null ? void 0 : context.fields) == null ? void 0 : _a[type]) || fallback;
+  return context?.fields?.[type] || fallback;
 };
 
 // src/create-field.tsx
 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, label, required, rules } = props;
     const inputRules = {
       required,
       ...rules
     };
     const fieldContext = useFieldsContext();
-    const getBaseField = (_a = fieldContext == null ? void 0 : fieldContext.getBaseField) != null ? _a : getBaseFieldProp;
+    const getBaseField = fieldContext?.getBaseField ?? getBaseFieldProp;
     const { props: extraProps, Component } = import_react3.default.useMemo(
       () => getBaseField(),
       [getBaseField]
@@ -279,16 +277,15 @@ var withUncontrolledInput = (InputComponent) => {
   );
 };
 var createField = (component, options) => {
-  var _a;
   let InputComponent;
-  if (options == null ? void 0 : options.isControlled) {
+  if (options?.isControlled) {
     InputComponent = withControlledInput((0, import_react3.forwardRef)(component));
   } else {
     InputComponent = withUncontrolledInput((0, import_react3.forwardRef)(component));
   }
   const Field3 = _createField(InputComponent, {
-    displayName: `${(_a = component.displayName) != null ? _a : "Custom"}Field`,
-    hideLabel: options == null ? void 0 : options.hideLabel,
+    displayName: `${component.displayName ?? "Custom"}Field`,
+    hideLabel: options?.hideLabel,
     getBaseField: () => ({
       props: [],
       Component: BaseField
@@ -302,7 +299,7 @@ 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,
+      import_input.InputGroup,
       {
         startElement,
         endElement,
@@ -344,7 +341,7 @@ var SelectField = createField(
       }),
       [options]
     );
-    const value = multiple ? [...valueProp != null ? valueProp : []] : valueProp ? [valueProp] : [];
+    const value = multiple ? [...valueProp ?? []] : valueProp ? [valueProp] : [];
     return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
       import_select.Select.Root,
       {
@@ -379,11 +376,11 @@ var RadioField = createField(
   (props, ref) => {
     const { options, onChange, flexDirection = "column", gap, ...rest } = props;
     return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-      import_radio.RadioGroup,
+      import_radio_group.RadioGroup.Root,
       {
         ref,
         onValueChange: ({ value }) => {
-          onChange == null ? void 0 : onChange(value);
+          onChange?.(value);
         },
         ...rest,
         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)) })
@@ -397,7 +394,7 @@ var RadioField = createField(
 var PinField = createField(
   (props, ref) => {
     const { pinType, value: valueProp, onChange, ...inputProps } = props;
-    const value = (valueProp == null ? void 0 : valueProp.split("")) || [];
+    const value = valueProp?.split("") || [];
     return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       import_pin_input.PinInput,
       {
@@ -447,10 +444,9 @@ var objectFieldResolver = (schema) => {
     return mapFields(schema);
   };
   const getNestedFields = (name) => {
-    var _a;
     const field = (0, import_utils3.get)(schema, name);
     if (!field) return [];
-    if (((_a = field.items) == null ? void 0 : _a.type) === "object") {
+    if (field.items?.type === "object") {
       return mapFields(field.items.properties);
     } else if (field.type === "object") {
       return mapFields(field.properties);
@@ -575,15 +571,19 @@ var useArrayFieldAddButton = () => {
 var React6 = __toESM(require("react"));
 var mapNestedFields = (name, children) => {
   return React6.Children.map(children, (child) => {
-    if (React6.isValidElement(child) && child.props.name) {
-      let childName = child.props.name;
+    if (React6.isValidElement(child)) {
+      const props = child.props;
+      if (!props.name) {
+        return child;
+      }
+      let childName = props.name;
       if (childName.includes(".")) {
         childName = childName.replace(/^.*\.(.*)/, "$1");
       } else if (childName.includes(".$")) {
         childName = childName.replace(/^.*\.\$(.*)/, "$1");
       }
       return React6.cloneElement(child, {
-        ...child.props,
+        ...props,
         name: `${name}.${childName}`
       });
     }
@@ -678,8 +678,8 @@ var ArrayFieldContainer = import_react8.default.forwardRef(
       name,
       defaultValue,
       keyName,
-      min: min || (overrides == null ? void 0 : overrides.min),
-      max: max || (overrides == null ? void 0 : overrides.max)
+      min: min || overrides?.min,
+      max: max || overrides?.max
     });
     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 }) });
@@ -716,7 +716,7 @@ var DisplayIf = ({
     }
     if (matchesRef.current === matches) return;
     matchesRef.current = matches;
-    onToggle == null ? void 0 : onToggle(matches, context);
+    onToggle?.(matches, context);
   }, [value]);
   return matches ? children : null;
 };
@@ -730,7 +730,7 @@ var Field2 = React9.forwardRef(
   (props, ref) => {
     const { type = defaultInputType, name } = props;
     const overrides = useFieldProps(name);
-    const InputComponent = useField((overrides == null ? void 0 : overrides.type) || type, InputField);
+    const InputComponent = useField(overrides?.type || type, InputField);
     return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(InputComponent, { ref, ...props, ...overrides });
   }
 );
@@ -767,8 +767,7 @@ ObjectField.displayName = "ObjectField";
 // src/fields.tsx
 var import_jsx_runtime10 = require("react/jsx-runtime");
 var mapNestedFields2 = (resolver, name) => {
-  var _a;
-  return (_a = resolver.getNestedFields(name)) == null ? void 0 : _a.map(
+  return resolver.getNestedFields(name)?.map(
     ({ name: name2, type, ...nestedFieldProps }, i) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       Field2,
       {
@@ -790,18 +789,17 @@ var AutoFields = ({
   const schema = schemaProp || context.schema;
   const fieldResolver = fieldResolverProp || context.fieldResolver;
   const resolver = React10.useMemo(() => fieldResolver, [schema, fieldResolver]);
-  const fields = React10.useMemo(() => resolver == null ? void 0 : resolver.getFields(), [resolver]);
+  const fields = React10.useMemo(() => resolver?.getFields(), [resolver]);
   const form = useFormContext();
   React10.useEffect(() => {
-    var _a;
-    if (focusFirstField && ((_a = fields == null ? void 0 : fields[0]) == null ? void 0 : _a.name)) {
+    if (focusFirstField && fields?.[0]?.name) {
       form.setFocus(fields[0].name);
     }
   }, [schema, fieldResolver, focusFirstField]);
   if (!resolver) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(FormLayout, { ...props, children: fields == null ? void 0 : fields.map(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(FormLayout, { ...props, children: fields?.map(
     ({ name, type, ...fieldProps }) => {
       if (type === "array") {
         return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ArrayField, { name, ...fieldProps, children: mapNestedFields2(resolver, name) }, name);
@@ -846,8 +844,8 @@ var SubmitButton = (0, import_react11.forwardRef)(
       disableIfInvalid: disableIfInvalidOverride,
       ...fieldProps
     } = field;
-    const disableIfUntouched = disableIfUntouchedOverride != null ? disableIfUntouchedOverride : disableIfUntouchedProp;
-    const disableIfInvalid = disableIfInvalidOverride != null ? disableIfInvalidOverride : disableIfInvalidProp;
+    const disableIfUntouched = disableIfUntouchedOverride ?? disableIfUntouchedProp;
+    const disableIfInvalid = disableIfInvalidOverride ?? disableIfInvalidProp;
     const isDisabled = disableIfUntouched && !formState.isDirty || disableIfInvalid && !formState.isValid || disabledProp;
     return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       import_button.Button,
@@ -916,13 +914,13 @@ var Form = (0, import_react12.forwardRef)(
       if (onChange) {
         subscription = methods.watch(onChange);
       }
-      return () => subscription == null ? void 0 : subscription.unsubscribe();
+      return () => subscription?.unsubscribe();
     }, [methods, onChange]);
     let _children = children;
     if (!_children && fieldResolver) {
       _children = /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(FormLayout, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(AutoFields, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SubmitButton, { ...fields == null ? void 0 : fields.submit })
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SubmitButton, { ...fields?.submit })
       ] });
     }
     return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
@@ -981,8 +979,8 @@ function createForm({
         Form,
         {
           ref,
-          resolver: resolverProp != null ? resolverProp : resolver == null ? void 0 : resolver(props.schema),
-          fieldResolver: fieldResolverProp != null ? fieldResolverProp : fieldResolver == null ? void 0 : fieldResolver(schema),
+          resolver: resolverProp ?? resolver?.(props.schema),
+          fieldResolver: fieldResolverProp ?? fieldResolver?.(schema),
           ...rest
         }
       ) });