@saas-ui/forms 3.0.0-alpha.2 → 3.0.0-alpha.21

package/dist/index.mjs

@@ -1,9 +1,10 @@
 'use client'
 
 // src/create-form.tsx
-import { forwardRef as forwardRef7, useMemo as useMemo2 } from "react";
+import { forwardRef as forwardRef7, useMemo as useMemo3 } from "react";
 
 // src/default-fields.tsx
+import { useMemo } from "react";
 import {
   Input,
   Stack,
@@ -29,7 +30,7 @@ import { callAll, mergeRefs, splitProps as splitProps2 } from "@saas-ui/core/uti
 import { Controller } from "react-hook-form";
 
 // src/base-field.tsx
-import { Box, Field } from "@chakra-ui/react";
+import { Field } from "@chakra-ui/react";
 import { splitProps } from "@saas-ui/core/utils";
 import { get } from "react-hook-form";
 
@@ -69,35 +70,38 @@ var isTouched = (name, formState) => {
   return get(formState.touchedFields, name);
 };
 var useBaseField = (props) => {
-  const [fieldProps] = splitProps(props, ["name", "label", "help", "hideLabel"]);
-  const [controlProps] = splitProps(props, [
-    // 'id',
-    // 'orientation',
-    // 'disabled',
-    // 'invalid',
-    // 'readOnly',
-    // 'required',
+  const [fieldProps, rootProps] = 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__ */ jsxs(Field.Root, { invalid: isInvalid, ...props, children: [
-    label && !hideLabel ? /* @__PURE__ */ jsx2(Field.Label, { children: label }) : null,
-    /* @__PURE__ */ jsxs(Box, { width: "full", children: [
-      props.children,
-      help && !(error == null ? void 0 : error.message) ? /* @__PURE__ */ jsx2(Field.HelperText, { children: help }) : null,
-      (error == null ? void 0 : error.message) && /* @__PURE__ */ jsx2(Field.ErrorText, { children: error == null ? void 0 : error.message })
-    ] })
+  return /* @__PURE__ */ jsxs(Field.Root, { invalid: isInvalid, ...rootProps, children: [
+    label && !hideLabel ? /* @__PURE__ */ jsxs(Field.Label, { children: [
+      label,
+      " ",
+      /* @__PURE__ */ jsx2(Field.RequiredIndicator, {})
+    ] }) : null,
+    props.children,
+    help && !(error == null ? void 0 : error.message) ? /* @__PURE__ */ jsx2(Field.HelperText, { children: help }) : null,
+    (error == null ? void 0 : error.message) && /* @__PURE__ */ jsx2(Field.ErrorText, { children: error == null ? void 0 : error.message })
   ] });
 };
 BaseField.displayName = "BaseField";
@@ -123,37 +127,34 @@ import { jsx as jsx4 } from "react/jsx-runtime";
 var _createField = (InputComponent, { displayName, hideLabel, getBaseField: getBaseFieldProp }) => {
   const Field3 = 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 } = React3.useMemo(
+    const { props: extraProps, Component } = React3.useMemo(
       () => getBaseField(),
       [getBaseField]
     );
-    const [, inputProps] = splitProps2(
+    const rootProps = {
+      name: props.name,
+      label: props.label,
+      disabled: props.disabled,
+      invalid: props.invalid,
+      readOnly: props.readOnly,
+      required: props.required
+    };
+    const [baseFieldProps, inputProps] = splitProps2(
       props,
-      [
-        "children",
-        "name",
-        "label",
-        "required",
-        "disabled",
-        "invalid",
-        "readOnly",
-        "help",
-        "hideLabel"
-      ].concat(extraProps)
+      ["orientation", "help", "hideLabel"].concat(extraProps)
     );
-    return /* @__PURE__ */ jsx4(BaseField2, { name, hideLabel, ...props, children: /* @__PURE__ */ jsx4(
+    return /* @__PURE__ */ jsx4(Component, { ...rootProps, ...baseFieldProps, children: /* @__PURE__ */ jsx4(
       InputComponent,
       {
         ref,
         id,
-        name,
         label: hideLabel ? label : void 0,
         ...inputProps,
         rules: inputRules
@@ -219,8 +220,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;
@@ -230,7 +231,15 @@ var createField = (component, options) => {
 import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
 var InputField = createField(
   ({ type = "text", startElement, endElement, size, ...rest }, ref) => {
-    return /* @__PURE__ */ jsx5(InputGroup, { startElement, endElement, children: /* @__PURE__ */ jsx5(Input, { type, size, ...rest, ref }) });
+    return /* @__PURE__ */ jsx5(
+      InputGroup,
+      {
+        startElement,
+        endElement,
+        width: "full",
+        children: /* @__PURE__ */ jsx5(Input, { type, size, ...rest, ref })
+      }
+    );
   }
 );
 var NumberInputField = createField((props, ref) => /* @__PURE__ */ jsx5(NumberInput, { ...props, ref }), {
@@ -254,22 +263,28 @@ var SelectField = createField(
       options,
       placeholder,
       onChange,
-      onValueChange,
       onBlur,
+      multiple = false,
+      value: valueProp,
       ...rest
     } = props;
-    const collection = createListCollection({
-      items: options
-    });
+    const collection = useMemo(
+      () => createListCollection({
+        items: options
+      }),
+      [options]
+    );
+    const value = multiple ? [...valueProp != null ? valueProp : []] : valueProp ? [valueProp] : [];
     return /* @__PURE__ */ jsxs2(
       Select.Root,
       {
         ref,
         collection,
         onValueChange: (details) => {
-          onChange(details.value);
+          onChange(multiple ? details.value : details.value[0]);
         },
         onInteractOutside: () => onBlur(),
+        value,
         ...rest,
         children: [
           /* @__PURE__ */ jsx5(Select.Trigger, { ...triggerProps, children: /* @__PURE__ */ jsx5(Select.ValueText, { placeholder }) }),
@@ -376,7 +391,7 @@ var objectFieldResolver = (schema) => {
 };
 
 // src/form.tsx
-import React10, { forwardRef as forwardRef6 } from "react";
+import React11, { forwardRef as forwardRef6 } from "react";
 import { chakra as chakra2 } from "@chakra-ui/react";
 import { cx as cx2, runIfFn } from "@saas-ui/core/utils";
 import {
@@ -384,7 +399,7 @@ import {
 } from "react-hook-form";
 
 // src/array-field.tsx
-import React6, { forwardRef as forwardRef3 } from "react";
+import React7, { forwardRef as forwardRef3 } from "react";
 import { Button, chakra } from "@chakra-ui/react";
 import { MinusIcon, PlusIcon } from "@saas-ui/react/icons";
 
@@ -397,9 +412,9 @@ import {
 import { cx } from "@saas-ui/core/utils";
 import { jsx as jsx6 } from "react/jsx-runtime";
 var FormLayout = forwardRef2(
-  ({ children, rowGap = 4, ...props }, ref) => {
+  ({ children, gap = 4, ...props }, ref) => {
     const recipe = useRecipe({
-      key: "formLayout"
+      key: "suiFormLayout"
     });
     const [variantProps, gridProps] = recipe.splitVariantProps(props);
     const styles = recipe(variantProps);
@@ -411,7 +426,7 @@ var FormLayout = forwardRef2(
         className: cx("sui-form-layout", props.className),
         css: [
           {
-            rowGap
+            gap
           },
           styles,
           props.css
@@ -424,7 +439,7 @@ var FormLayout = forwardRef2(
 FormLayout.displayName = "FormLayout";
 
 // src/use-array-field.tsx
-import * as React4 from "react";
+import * as React5 from "react";
 import { createContext as createContext2 } from "@saas-ui/core/utils";
 import {
   useFieldArray
@@ -459,7 +474,7 @@ var useArrayField = ({
 var useArrayFieldRow = ({ index }) => {
   const { clearErrors } = useFormContext();
   const { name, remove, fields } = useArrayFieldContext();
-  React4.useEffect(() => {
+  React5.useEffect(() => {
     clearErrors(name);
   }, []);
   return {
@@ -467,7 +482,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])
@@ -494,17 +509,17 @@ var useArrayFieldAddButton = () => {
 };
 
 // src/utils.ts
-import * as React5 from "react";
+import * as React6 from "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}`
       });
@@ -585,7 +600,7 @@ var ArrayFieldRows = ({
   return children(fields);
 };
 ArrayFieldRows.displayName = "ArrayFieldRows";
-var ArrayFieldContainer = React6.forwardRef(
+var ArrayFieldContainer = React7.forwardRef(
   ({
     name,
     defaultValue,
@@ -603,14 +618,14 @@ var ArrayFieldContainer = React6.forwardRef(
       min: min || (overrides == null ? void 0 : overrides.min),
       max: max || (overrides == null ? void 0 : overrides.max)
     });
-    React6.useImperativeHandle(ref, () => context, [ref, context]);
+    React7.useImperativeHandle(ref, () => context, [ref, context]);
     return /* @__PURE__ */ jsx7(ArrayFieldProvider, { value: context, children: /* @__PURE__ */ jsx7(BaseField, { name, ...fieldProps, ...overrides, children }) });
   }
 );
 ArrayFieldContainer.displayName = "ArrayFieldContainer";
 
 // src/display-if.tsx
-import * as React7 from "react";
+import * as React8 from "react";
 import {
   useWatch
 } from "react-hook-form";
@@ -623,8 +638,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 = useWatch({
     name,
     defaultValue,
@@ -633,7 +648,7 @@ var DisplayIf = ({
   });
   const context = useFormContext();
   const matches = condition(value, context);
-  React7.useEffect(() => {
+  React8.useEffect(() => {
     if (!initializedRef.current) {
       initializedRef.current = true;
       return;
@@ -647,10 +662,10 @@ var DisplayIf = ({
 DisplayIf.displayName = "DisplayIf";
 
 // src/field.tsx
-import * as React8 from "react";
+import * as React9 from "react";
 import { jsx as jsx8 } from "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);
@@ -660,7 +675,7 @@ var Field2 = React8.forwardRef(
 );
 
 // src/fields.tsx
-import * as React9 from "react";
+import * as React10 from "react";
 
 // src/object-field.tsx
 import { Field as FieldPrimivite } from "@chakra-ui/react";
@@ -713,10 +728,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);
@@ -834,8 +849,8 @@ var Form = forwardRef6(
     };
     const methods = useForm(form);
     const { handleSubmit } = methods;
-    React10.useImperativeHandle(formRef, () => methods, [formRef, methods]);
-    React10.useEffect(() => {
+    React11.useImperativeHandle(formRef, () => methods, [formRef, methods]);
+    React11.useEffect(() => {
       let subscription;
       if (onChange) {
         subscription = methods.watch(onChange);
@@ -894,7 +909,7 @@ function createForm({
         fieldResolver: fieldResolverProp,
         ...rest
       } = props;
-      const fieldsContext = useMemo2(
+      const fieldsContext = useMemo3(
         () => ({
           fields: { ...defaultFieldTypes, ...fields },
           getBaseField