@saas-ui/forms 3.0.0-next.5 → 3.0.0-next.51

package/dist/index.js

@@ -77,8 +77,7 @@ __export(index_exports, {
   useForm: () => useForm2,
   useFormContext: () => useFormContext,
   useFormState: () => import_react_hook_form10.useFormState,
-  useWatch: () => import_react_hook_form10.useWatch,
-  useZodForm: () => useZodForm
+  useWatch: () => import_react_hook_form10.useWatch
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -89,7 +88,7 @@ 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 = require("@saas-ui/react/input");
+var import_input_group = require("@saas-ui/react/input-group");
 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");
@@ -162,8 +161,8 @@ var useBaseField = (props) => {
 };
 var BaseField = (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, ...rootProps, children: [
+  const isInvalid = !!error || rootProps.invalid;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react.Field.Root, { ...rootProps, invalid: isInvalid, children: [
     label && !hideLabel ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react.Field.Label, { children: [
       label,
       " ",
@@ -195,7 +194,7 @@ var useField = (type, fallback) => {
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var _createField = (InputComponent, { displayName, hideLabel, getBaseField: getBaseFieldProp }) => {
   const Field3 = (0, import_react3.forwardRef)((props, ref) => {
-    const { id, label, required, rules } = props;
+    const { id, required, rules } = props;
     const inputRules = {
       required,
       ...rules
@@ -218,16 +217,15 @@ var _createField = (InputComponent, { displayName, hideLabel, getBaseField: getB
       props,
       ["orientation", "help", "hideLabel"].concat(extraProps)
     );
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Component, { ...rootProps, ...baseFieldProps, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-      InputComponent,
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      Component,
       {
-        ref,
-        id,
-        label: hideLabel ? label : void 0,
-        ...inputProps,
-        rules: inputRules
+        ...rootProps,
+        ...baseFieldProps,
+        hideLabel: hideLabel ?? baseFieldProps.hideLabel,
+        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(InputComponent, { ref, id, ...inputProps, rules: inputRules })
       }
-    ) });
+    );
   });
   Field3.displayName = displayName;
   return Field3;
@@ -299,7 +297,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.InputGroup,
+      import_input_group.InputGroup,
       {
         startElement,
         endElement,
@@ -365,10 +363,22 @@ var SelectField = createField(
   }
 );
 var CheckboxField = createField(
-  ({ label, type, ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_checkbox.Checkbox, { ref, ...props, children: label });
+  ({ label, type, onChange, value, ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      import_checkbox.Checkbox,
+      {
+        ref,
+        checked: value,
+        onCheckedChange: ({ checked }) => {
+          onChange?.(checked);
+        },
+        ...props,
+        children: label
+      }
+    );
   },
   {
+    isControlled: true,
     hideLabel: true
   }
 );
@@ -994,34 +1004,53 @@ function createForm({
 // src/use-form.tsx
 var import_react15 = require("react");
 var import_react16 = require("@chakra-ui/react");
-var import_zod = require("@hookform/resolvers/zod");
+var import_standard_schema = require("@hookform/resolvers/standard-schema");
 var import_utils10 = require("@saas-ui/core/utils");
 var import_react_hook_form8 = require("react-hook-form");
 var import_jsx_runtime14 = require("react/jsx-runtime");
-function useForm2(props = {}) {
-  const form = (0, import_react_hook_form8.useForm)(props);
-  const FormComponent = (0, import_react15.forwardRef)(
-    function FormComponent2(props2, ref) {
-      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Form2, { ...props2, form, ref });
-    }
+function useForm2(props) {
+  const { onSubmit, onInvalid, resolver, ...rest } = props;
+  const form = (0, import_react_hook_form8.useForm)({
+    ...rest,
+    resolver: props.schema ? (0, import_standard_schema.standardSchemaResolver)(
+      props.schema
+    ) : resolver
+  });
+  const stableOnSubmit = (0, import_react16.useCallbackRef)(
+    (data) => onSubmit(data),
+    [onSubmit]
   );
-  return {
-    ...form,
-    Form: FormComponent,
-    Field: Field2,
-    DisplayIf,
-    ArrayField,
-    ObjectField
-  };
+  const stableOnInvalid = (0, import_react16.useCallbackRef)(
+    (errors) => onInvalid?.(errors),
+    [onInvalid]
+  );
+  return (0, import_react15.useMemo)(() => {
+    const extendedForm = form;
+    extendedForm.submit = form.handleSubmit(stableOnSubmit, stableOnInvalid);
+    extendedForm.Form = function FormAPI(props2) {
+      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        Form2,
+        {
+          ...props2,
+          form,
+          onSubmit: props2.onSubmit ?? extendedForm.submit
+        }
+      );
+    };
+    extendedForm.Field = Field2;
+    extendedForm.DisplayIf = DisplayIf;
+    extendedForm.ArrayField = ArrayField;
+    extendedForm.ObjectField = ObjectField;
+    return extendedForm;
+  }, [form]);
 }
 var Form2 = (0, import_react15.forwardRef)(
   function Form3(props, ref) {
-    const { children, form, onSubmit, onError, ...rest } = props;
+    const { children, form, ...rest } = props;
     return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(FormProvider, { ...form, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       import_react16.chakra.form,
       {
         ref,
-        onSubmit: form.handleSubmit(onSubmit, onError),
         ...rest,
         className: (0, import_utils10.cx)("sui-form", props.className),
         children: props.children
@@ -1029,13 +1058,6 @@ var Form2 = (0, import_react15.forwardRef)(
     ) });
   }
 );
-function useZodForm(props) {
-  const { schema, ...rest } = props;
-  return useForm2({
-    resolver: (0, import_zod.zodResolver)(schema),
-    ...rest
-  });
-}
 
 // src/display-field.tsx
 var import_react17 = require("@chakra-ui/react");
@@ -1122,7 +1144,6 @@ var Form4 = createForm();
   useForm,
   useFormContext,
   useFormState,
-  useWatch,
-  useZodForm
+  useWatch
 });
 //# sourceMappingURL=index.js.map