@algodomain/smart-forms 0.1.10 → 0.1.12

package/dist/index.d.cts

@@ -1,7 +1,7 @@
 import * as React$1 from 'react';
 import React__default, { ReactNode } from 'react';
-import { A as AuthenticationConfig, F as FormContextType } from './SmartFormProvider-BdyRQakk.cjs';
-export { b as FormConfig, S as SmartFormProvider, a as useFormField, u as useSmartForm } from './SmartFormProvider-BdyRQakk.cjs';
+import { A as AuthenticationConfig, F as FormContextType } from './SmartFormProvider-DtK3qRsV.cjs';
+export { b as FormConfig, S as SmartFormProvider, a as useFormField, u as useSmartForm } from './SmartFormProvider-DtK3qRsV.cjs';
 export { a as SmartCheckbox, d as SmartCombobox, k as SmartComboboxOption, j as SmartComboboxProps, e as SmartDatePicker, i as SmartDatePickerProps, S as SmartInput, g as SmartInputProps, b as SmartRadioGroup, c as SmartSelect, f as SmartTags } from './SmartTags-DEpmTDF5.cjs';
 import 'react/jsx-runtime';
 
@@ -200,7 +200,7 @@ interface SmartTextAreaProps {
     maxLength?: number;
     minLength?: number;
     name?: string;
-    dirName?: string;
+    dirname?: string;
     form?: string;
 }
 declare const SmartTextArea: React__default.FC<SmartTextAreaProps>;

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import * as React$1 from 'react';
 import React__default, { ReactNode } from 'react';
-import { A as AuthenticationConfig, F as FormContextType } from './SmartFormProvider-BdyRQakk.js';
-export { b as FormConfig, S as SmartFormProvider, a as useFormField, u as useSmartForm } from './SmartFormProvider-BdyRQakk.js';
+import { A as AuthenticationConfig, F as FormContextType } from './SmartFormProvider-DtK3qRsV.js';
+export { b as FormConfig, S as SmartFormProvider, a as useFormField, u as useSmartForm } from './SmartFormProvider-DtK3qRsV.js';
 export { a as SmartCheckbox, d as SmartCombobox, k as SmartComboboxOption, j as SmartComboboxProps, e as SmartDatePicker, i as SmartDatePickerProps, S as SmartInput, g as SmartInputProps, b as SmartRadioGroup, c as SmartSelect, f as SmartTags } from './SmartTags-DEpmTDF5.js';
 import 'react/jsx-runtime';
 
@@ -200,7 +200,7 @@ interface SmartTextAreaProps {
     maxLength?: number;
     minLength?: number;
     name?: string;
-    dirName?: string;
+    dirname?: string;
     form?: string;
 }
 declare const SmartTextArea: React__default.FC<SmartTextAreaProps>;

package/dist/index.js

@@ -1,7 +1,7 @@
-import { Button } from './chunk-4XK6HAJ2.js';
-export { SmartCheckbox, SmartCombobox, SmartDatePicker, SmartRadioGroup, SmartSelect, SmartTags } from './chunk-4XK6HAJ2.js';
-import { SmartFormProvider, useSmartForm, FieldDetectionContext, useFormField, useFieldDetection, Label, TooltipProvider, Tooltip, TooltipTrigger, TooltipContent, Textarea, cn } from './chunk-6VKQ7EMR.js';
-export { SmartFormProvider, SmartInput, useFieldDetection, useFormField, useSmartForm } from './chunk-6VKQ7EMR.js';
+import { Button } from './chunk-N3SIQIJR.js';
+export { SmartCheckbox, SmartCombobox, SmartDatePicker, SmartRadioGroup, SmartSelect, SmartTags } from './chunk-N3SIQIJR.js';
+import { SmartFormProvider, useSmartForm, FieldDetectionContext, useFormField, useFieldDetection, Label, TooltipProvider, Tooltip, TooltipTrigger, TooltipContent, Textarea, cn } from './chunk-DYTQTHGE.js';
+export { SmartFormProvider, SmartInput, useFieldDetection, useFormField, useSmartForm } from './chunk-DYTQTHGE.js';
 import * as React3 from 'react';
 import React3__default, { createContext, isValidElement, useContext, useState, useMemo, useCallback, useEffect, useRef } from 'react';
 import { ToastContainer, Bounce } from 'react-toastify';
@@ -640,6 +640,7 @@ function Tabs({
       if (!isControlled) setActiveValue(val);
       else props.onValueChange?.(val);
     };
+    const { onValueChange, ...divProps } = props;
     return /* @__PURE__ */ jsx(TabsConfigContext.Provider, { value: config, children: /* @__PURE__ */ jsx(
       TabsContext.Provider,
       {
@@ -648,7 +649,7 @@ function Tabs({
           handleValueChange,
           registerTrigger
         },
-        children: /* @__PURE__ */ jsx("div", { "data-slot": "tabs", className: cn("flex flex-col gap-2", className), ...props, children: props.children })
+        children: /* @__PURE__ */ jsx("div", { "data-slot": "tabs", className: cn("flex flex-col gap-2", className), ...divProps, children: props.children })
       }
     ) });
   }
@@ -1213,7 +1214,7 @@ var MultiTabFormContent = ({
   maxUnlockedTab,
   setMaxUnlockedTab
 }) => {
-  const { isLoading, isDraftSaving, submitForm, saveDraft, resetForm, validateFields, formData, validationRegistry, setErrors } = useSmartForm();
+  const { isLoading, isDraftSaving, submitForm, saveDraft, resetForm, validateFields, formData, validationRegistry, setErrors, getValidationErrorMessage } = useSmartForm();
   const debounce = (func, wait) => {
     let timeout;
     return function executedFunction(...args) {
@@ -1292,7 +1293,8 @@ var MultiTabFormContent = ({
             validation.parse(formData[field]);
           } catch (error) {
             if (error instanceof z.ZodError) {
-              allErrors[field] = error.issues[0]?.message || `Invalid ${field}`;
+              const msg = error.issues[0]?.message ?? "";
+              allErrors[field] = getValidationErrorMessage(field, msg);
               isValid = false;
             }
           }
@@ -1370,7 +1372,7 @@ var MultiTabFormContent = ({
         onNext();
       }
     }
-  }, [activeTab, getCombinedTabFields, validateFields, onNext, setCompletedTabs, setValidationErrorTabs, validationRegistry, formData, tabCallbacks, setProcessingTab, setProcessingError, setMaxUnlockedTab]);
+  }, [activeTab, getCombinedTabFields, validateFields, onNext, setCompletedTabs, setValidationErrorTabs, validationRegistry, formData, tabCallbacks, setProcessingTab, setProcessingError, setMaxUnlockedTab, getValidationErrorMessage]);
   const handleSubmitWithValidation = useCallback(async () => {
     const allErrors = {};
     let isValid = true;
@@ -1381,7 +1383,8 @@ var MultiTabFormContent = ({
           validation.parse(formData[field]);
         } catch (error) {
           if (error instanceof z.ZodError) {
-            allErrors[field] = error.issues[0]?.message || `Invalid ${field}`;
+            const msg = error.issues[0]?.message ?? "";
+            allErrors[field] = getValidationErrorMessage(field, msg);
             isValid = false;
           }
         }
@@ -1417,7 +1420,7 @@ var MultiTabFormContent = ({
         }, 100);
       }
     }
-  }, [submitForm, getCombinedTabFields, onTabChange, tabs.length, validationRegistry, formData, setErrors, setValidationErrorTabs]);
+  }, [submitForm, getCombinedTabFields, onTabChange, tabs.length, validationRegistry, formData, setErrors, setValidationErrorTabs, getValidationErrorMessage]);
   const activeTabValue = tabs[activeTab] || tabs[0] || "";
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs(
@@ -1462,14 +1465,7 @@ var MultiTabFormContent = ({
               const hasProcessingOverlay = tabCallbacks[index]?.processingOverlay;
               return /* @__PURE__ */ jsx(TabsContent, { value: tabProps.title, children: /* @__PURE__ */ jsx(TabIndexProvider, { tabIndex: index, children: /* @__PURE__ */ jsxs("div", { className: "space-y-6 relative", children: [
                 tabProps.children,
-                isCurrentlyProcessing && hasProcessingOverlay && /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    className: "absolute inset-0 bg-white/80 backdrop-blur-sm z-50 flex items-center justify-center pointer-events-none",
-                    style: { minHeight: "200px" },
-                    children: /* @__PURE__ */ jsx("div", { className: "pointer-events-auto", children: tabCallbacks[index].processingOverlay })
-                  }
-                )
+                isCurrentlyProcessing && hasProcessingOverlay && /* @__PURE__ */ jsx("div", { className: "fixed inset-0 bg-black/70 z-50 flex items-center justify-center pointer-events-none", children: /* @__PURE__ */ jsx("div", { className: "pointer-events-auto", children: tabCallbacks[index].processingOverlay }) })
               ] }) }) }, index);
             }
             return null;
@@ -1636,7 +1632,7 @@ var SmartTextArea = ({
   maxLength,
   minLength,
   name,
-  dirName,
+  dirname,
   form
 }) => {
   const { formData } = useSmartForm();
@@ -1647,12 +1643,25 @@ var SmartTextArea = ({
   const isDisabled = typeof disabled === "function" ? disabled(formData) : disabled || false;
   const isHidden = typeof hidden === "function" ? hidden(formData) : hidden || false;
   if (isHidden) return null;
+  const displayName = label || field;
+  const builtinValidation = useMemo(() => {
+    if (validation) return void 0;
+    const preprocess = (v) => v === void 0 || v === null ? "" : v;
+    if (minLength != null) {
+      return z.preprocess(preprocess, z.string().min(minLength, `${displayName} must be at least ${minLength} characters`));
+    }
+    if (required) {
+      return z.preprocess(preprocess, z.string().min(1, `${displayName} is required`));
+    }
+    return void 0;
+  }, [validation, minLength, required, displayName]);
+  const schemaToRegister = validation ?? builtinValidation;
   useEffect(() => {
-    if (validation && !hasRegistered.current) {
+    if (schemaToRegister && !hasRegistered.current) {
       hasRegistered.current = true;
-      registerValidation(field, validation);
+      registerValidation(field, schemaToRegister, { label: displayName });
     }
-  }, [validation, field, registerValidation]);
+  }, [schemaToRegister, field, registerValidation, displayName]);
   useEffect(() => {
     if (fieldDetection?.registerField) {
       fieldDetection.registerField(field);
@@ -1724,7 +1733,7 @@ var SmartTextArea = ({
           maxLength,
           minLength,
           name,
-          dirName,
+          dirName: dirname,
           form
         }
       ),