@algodomain/smart-forms 0.1.9 → 0.1.11

package/dist/index.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
-var chunkDRMVY7TX_cjs = require('./chunk-DRMVY7TX.cjs');
-var chunkWUYS7DMR_cjs = require('./chunk-WUYS7DMR.cjs');
+var chunkTX7JD2XS_cjs = require('./chunk-TX7JD2XS.cjs');
+var chunkAEN4A4ST_cjs = require('./chunk-AEN4A4ST.cjs');
 var React3 = require('react');
 var reactToastify = require('react-toastify');
 var jsxRuntime = require('react/jsx-runtime');
@@ -79,7 +79,7 @@ var BaseSmartForm = ({
   onSuccess,
   onError,
   transformData,
-  className = "max-w-2xl mx-auto p-6 bg-white",
+  className = "p-6 bg-white",
   title,
   subTitle,
   logo,
@@ -119,7 +119,7 @@ var BaseSmartForm = ({
     queryParamsToInclude,
     submitDisabled
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(chunkWUYS7DMR_cjs.SmartFormProvider, { config, initialData, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className, children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(chunkAEN4A4ST_cjs.SmartFormProvider, { config, initialData, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className, children: [
     /* @__PURE__ */ jsxRuntime.jsx(ToastContainerWrapper, {}),
     /* @__PURE__ */ jsxRuntime.jsx(FormHeader, { title, subTitle, logo }),
     children,
@@ -127,15 +127,15 @@ var BaseSmartForm = ({
   ] }) });
 };
 var LoadingSpinner = ({ className = "h-4 w-4" }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: `animate-spin rounded-full border-b-2 border-current ${className}` });
-var SubmitButton = ({ onClick, disabled, isLoading, children, className }) => /* @__PURE__ */ jsxRuntime.jsx(chunkDRMVY7TX_cjs.Button, { onClick, disabled, className, children: isLoading ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+var SubmitButton = ({ onClick, disabled, isLoading, children, className }) => /* @__PURE__ */ jsxRuntime.jsx(chunkTX7JD2XS_cjs.Button, { onClick, disabled, className, children: isLoading ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
   /* @__PURE__ */ jsxRuntime.jsx(LoadingSpinner, {}),
   "Submitting..."
 ] }) : children });
-var DraftSaveButton = ({ onClick, disabled }) => /* @__PURE__ */ jsxRuntime.jsx(chunkDRMVY7TX_cjs.Button, { onClick, disabled, variant: "secondary", children: disabled ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+var DraftSaveButton = ({ onClick, disabled }) => /* @__PURE__ */ jsxRuntime.jsx(chunkTX7JD2XS_cjs.Button, { onClick, disabled, variant: "secondary", children: disabled ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
   /* @__PURE__ */ jsxRuntime.jsx(LoadingSpinner, {}),
   "Saving..."
 ] }) : "Save Draft" });
-var ResetButton = ({ onClick }) => /* @__PURE__ */ jsxRuntime.jsx(chunkDRMVY7TX_cjs.Button, { onClick, variant: "secondary", children: "Reset Form" });
+var ResetButton = ({ onClick }) => /* @__PURE__ */ jsxRuntime.jsx(chunkTX7JD2XS_cjs.Button, { onClick, variant: "secondary", children: "Reset Form" });
 var NavigationButtons = ({
   onPrevious,
   onNext,
@@ -149,7 +149,7 @@ var NavigationButtons = ({
   isLastTab = false,
   disabled = false
 }) => {
-  const { formData, config: formConfig } = chunkWUYS7DMR_cjs.useSmartForm();
+  const { formData, config: formConfig } = chunkAEN4A4ST_cjs.useSmartForm();
   const isSubmitDisabled = typeof formConfig.submitDisabled === "function" ? formConfig.submitDisabled(formData) : formConfig.submitDisabled || false;
   const hasResetButton = !!onReset;
   const hasDraftButton = config.allowSaveDraft && !!onSaveDraft;
@@ -159,7 +159,7 @@ var NavigationButtons = ({
   const isSingleButton = rightSectionButtons === 1 && !hasPreviousButton;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between items-center mt-8 pt-6 border-t border-gray-200", children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-4", children: onPrevious && /* @__PURE__ */ jsxRuntime.jsxs(
-      chunkDRMVY7TX_cjs.Button,
+      chunkTX7JD2XS_cjs.Button,
       {
         onClick: onPrevious,
         disabled: isFirstTab || disabled,
@@ -171,7 +171,7 @@ var NavigationButtons = ({
       }
     ) }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: isSingleButton ? "w-full" : "flex gap-4", children: [
-      onReset && /* @__PURE__ */ jsxRuntime.jsx(chunkDRMVY7TX_cjs.Button, { onClick: onReset, disabled, variant: "secondary", children: "Reset Form" }),
+      onReset && /* @__PURE__ */ jsxRuntime.jsx(chunkTX7JD2XS_cjs.Button, { onClick: onReset, disabled, variant: "secondary", children: "Reset Form" }),
       config.allowSaveDraft && onSaveDraft && /* @__PURE__ */ jsxRuntime.jsx(DraftSaveButton, { onClick: onSaveDraft, disabled: isDraftSaving || disabled }),
       isLastTab ? /* @__PURE__ */ jsxRuntime.jsxs(
         SubmitButton,
@@ -186,7 +186,7 @@ var NavigationButtons = ({
           ]
         }
       ) : onNext && /* @__PURE__ */ jsxRuntime.jsxs(
-        chunkDRMVY7TX_cjs.Button,
+        chunkTX7JD2XS_cjs.Button,
         {
           onClick: onNext,
           disabled,
@@ -208,7 +208,7 @@ var SimpleFormButtons = ({
   isDraftSaving,
   config
 }) => {
-  const { formData, config: formConfig } = chunkWUYS7DMR_cjs.useSmartForm();
+  const { formData, config: formConfig } = chunkAEN4A4ST_cjs.useSmartForm();
   const isSubmitDisabled = typeof formConfig.submitDisabled === "function" ? formConfig.submitDisabled(formData) : formConfig.submitDisabled || false;
   const hasResetButton = !!onReset;
   const hasDraftButton = config.allowSaveDraft && !!onSaveDraft;
@@ -234,7 +234,7 @@ var SimpleFormButtons = ({
   ] }) });
 };
 var SubmitButton2 = () => {
-  const { isLoading, isDraftSaving, submitForm, saveDraft, resetForm, config } = chunkWUYS7DMR_cjs.useSmartForm();
+  const { isLoading, isDraftSaving, submitForm, saveDraft, resetForm, config } = chunkAEN4A4ST_cjs.useSmartForm();
   const shouldShowReset = config.showReset || config.enableLocalStorage;
   return /* @__PURE__ */ jsxRuntime.jsx(
     SimpleFormButtons,
@@ -354,7 +354,7 @@ function MotionHighlight({ ref, ...props }) {
           {
             ref: localRef,
             "data-slot": "motion-highlight-container",
-            className: chunkWUYS7DMR_cjs.cn("relative", props?.containerClassName),
+            className: chunkAEN4A4ST_cjs.cn("relative", props?.containerClassName),
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(react.AnimatePresence, { initial: false, children: boundsState && /* @__PURE__ */ jsxRuntime.jsx(
                 react.motion.div,
@@ -382,7 +382,7 @@ function MotionHighlight({ ref, ...props }) {
                     }
                   },
                   transition,
-                  className: chunkWUYS7DMR_cjs.cn("bg-muted absolute z-0", className, activeClassNameState)
+                  className: chunkAEN4A4ST_cjs.cn("bg-muted absolute z-0", className, activeClassNameState)
                 }
               ) }),
               children2
@@ -510,16 +510,16 @@ function MotionHighlightItem({
   };
   const commonHandlers = hover ? {
     onMouseEnter: (e) => {
-      setActiveValue(childValue);
+      if (!isDisabled) setActiveValue(childValue);
       element.props.onMouseEnter?.(e);
     },
     onMouseLeave: (e) => {
-      setActiveValue(null);
+      if (!isDisabled) setActiveValue(null);
       element.props.onMouseLeave?.(e);
     }
   } : {
     onClick: (e) => {
-      setActiveValue(childValue);
+      if (!isDisabled) setActiveValue(childValue);
       element.props.onClick?.(e);
     }
   };
@@ -530,7 +530,7 @@ function MotionHighlightItem({
         {
           key: childValue,
           ref: localRef,
-          className: chunkWUYS7DMR_cjs.cn("relative", element.props.className),
+          className: chunkAEN4A4ST_cjs.cn("relative", element.props.className),
           ...getNonOverridingDataAttributes(element, {
             ...dataAttributes,
             "data-slot": "motion-highlight-item-container"
@@ -544,7 +544,7 @@ function MotionHighlightItem({
             {
               layoutId: `transition-background-${contextId}`,
               "data-slot": "motion-highlight",
-              className: chunkWUYS7DMR_cjs.cn("bg-muted absolute inset-0 z-0", contextClassName, activeClassName),
+              className: chunkAEN4A4ST_cjs.cn("bg-muted absolute inset-0 z-0", contextClassName, activeClassName),
               transition: itemTransition,
               initial: { opacity: 0 },
               animate: { opacity: 1 },
@@ -558,7 +558,7 @@ function MotionHighlightItem({
               ...dataAttributes
             }
           ) }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "motion-highlight-item", className: chunkWUYS7DMR_cjs.cn("relative z-[1]", className), ...dataAttributes, children })
+          /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "motion-highlight-item", className: chunkAEN4A4ST_cjs.cn("relative z-[1]", className), ...dataAttributes, children })
         ] })
       );
     }
@@ -576,7 +576,7 @@ function MotionHighlightItem({
     {
       ref: localRef,
       "data-slot": "motion-highlight-item-container",
-      className: chunkWUYS7DMR_cjs.cn(mode === "children" && "relative", className),
+      className: chunkAEN4A4ST_cjs.cn(mode === "children" && "relative", className),
       ...dataAttributes,
       ...props,
       ...commonHandlers,
@@ -586,7 +586,7 @@ function MotionHighlightItem({
           {
             layoutId: `transition-background-${contextId}`,
             "data-slot": "motion-highlight",
-            className: chunkWUYS7DMR_cjs.cn("bg-muted absolute inset-0 z-0", contextClassName, activeClassName),
+            className: chunkAEN4A4ST_cjs.cn("bg-muted absolute inset-0 z-0", contextClassName, activeClassName),
             transition: itemTransition,
             initial: { opacity: 0 },
             animate: { opacity: 1 },
@@ -601,7 +601,7 @@ function MotionHighlightItem({
           }
         ) }),
         React3__namespace.cloneElement(element, {
-          className: chunkWUYS7DMR_cjs.cn("relative z-[1]", element.props.className),
+          className: chunkAEN4A4ST_cjs.cn("relative z-[1]", element.props.className),
           ...getNonOverridingDataAttributes(element, {
             ...dataAttributes,
             "data-slot": "motion-highlight-item"
@@ -668,7 +668,7 @@ function Tabs({
           handleValueChange,
           registerTrigger
         },
-        children: /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "tabs", className: chunkWUYS7DMR_cjs.cn("flex flex-col gap-2", className), ...props, children: props.children })
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "tabs", className: chunkAEN4A4ST_cjs.cn("flex flex-col gap-2", className), ...props, children: props.children })
       }
     ) });
   }
@@ -676,7 +676,7 @@ function Tabs({
     TabsPrimitive__namespace.Root,
     {
       "data-slot": "tabs",
-      className: chunkWUYS7DMR_cjs.cn("flex flex-col gap-2", className),
+      className: chunkAEN4A4ST_cjs.cn("flex flex-col gap-2", className),
       ...props
     }
   ) });
@@ -698,7 +698,7 @@ function TabsList({
       MotionHighlight,
       {
         controlledItems: true,
-        className: chunkWUYS7DMR_cjs.cn("bg-background rounded-sm shadow-sm", activeClassName),
+        className: chunkAEN4A4ST_cjs.cn("bg-background rounded-sm shadow-sm", activeClassName),
         value: activeValue,
         transition,
         children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -706,7 +706,7 @@ function TabsList({
           {
             role: "tablist",
             "data-slot": "tabs-list",
-            className: chunkWUYS7DMR_cjs.cn(
+            className: chunkAEN4A4ST_cjs.cn(
               "bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",
               className
             ),
@@ -730,7 +730,7 @@ function TabsList({
     TabsPrimitive__namespace.List,
     {
       "data-slot": "tabs-list",
-      className: chunkWUYS7DMR_cjs.cn(
+      className: chunkAEN4A4ST_cjs.cn(
         "bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",
         className
       ),
@@ -816,7 +816,7 @@ function UnderlineTabsList({
       TabsPrimitive__namespace.List,
       {
         "data-slot": "tabs-list",
-        className: chunkWUYS7DMR_cjs.cn(
+        className: chunkAEN4A4ST_cjs.cn(
           "bg-background relative rounded-none border-b p-0",
           className
         ),
@@ -879,17 +879,19 @@ function TabsTrigger({
       onAnimationEnd,
       onAnimationIteration,
       onTransitionEnd,
+      disabled,
       ...motionButtonProps
     } = props;
-    return /* @__PURE__ */ jsxRuntime.jsx(MotionHighlightItem, { value: props.value, className: "size-full", children: /* @__PURE__ */ jsxRuntime.jsx(
+    return /* @__PURE__ */ jsxRuntime.jsx(MotionHighlightItem, { value: props.value, className: "size-full", disabled, children: /* @__PURE__ */ jsxRuntime.jsx(
       react.motion.button,
       {
         ref: localRef,
         "data-slot": "tabs-trigger",
         role: "tab",
-        onClick: () => handleValueChange(props.value),
+        onClick: () => !disabled && handleValueChange(props.value),
         "data-state": activeValue === props.value ? "active" : "inactive",
-        className: chunkWUYS7DMR_cjs.cn(
+        disabled,
+        className: chunkAEN4A4ST_cjs.cn(
           "ring-offset-background focus-visible:ring-ring data-[state=active]:text-foreground z-10 inline-flex size-full cursor-pointer items-center justify-center rounded-sm px-2 py-1 text-sm font-medium whitespace-nowrap transition-transform focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50",
           className
         ),
@@ -922,7 +924,7 @@ function TabsTrigger({
       {
         ref: localRef,
         "data-slot": "tabs-trigger",
-        className: chunkWUYS7DMR_cjs.cn(
+        className: chunkAEN4A4ST_cjs.cn(
           "bg-background dark:data-[state=active]:bg-background relative z-10 pl-10 pr-10 rounded-none border-0 data-[state=active]:shadow-none cursor-pointer",
           className
         ),
@@ -934,7 +936,7 @@ function TabsTrigger({
     TabsPrimitive__namespace.Trigger,
     {
       "data-slot": "tabs-trigger",
-      className: chunkWUYS7DMR_cjs.cn(
+      className: chunkAEN4A4ST_cjs.cn(
         "data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       ),
@@ -981,7 +983,7 @@ function TabsContent({
       {
         role: "tabpanel",
         "data-slot": "tabs-content",
-        className: chunkWUYS7DMR_cjs.cn("overflow-hidden", className),
+        className: chunkAEN4A4ST_cjs.cn("overflow-hidden", className),
         initial: { filter: "blur(0px)" },
         animate: { filter: isActive ? "blur(0px)" : "blur(2px)" },
         exit: { filter: "blur(0px)" },
@@ -1003,7 +1005,7 @@ function TabsContent({
     TabsPrimitive__namespace.Content,
     {
       "data-slot": "tabs-content",
-      className: chunkWUYS7DMR_cjs.cn("flex-1 outline-none", className),
+      className: chunkAEN4A4ST_cjs.cn("flex-1 outline-none", className),
       ...props
     }
   );
@@ -1083,6 +1085,7 @@ var MultiTabSmartForm = ({
   const [externalTabFields, setExternalTabFields] = React3.useState({});
   const [processingTab, setProcessingTab] = React3.useState(null);
   const [processingError, setProcessingError] = React3.useState(null);
+  const [maxUnlockedTab, setMaxUnlockedTab] = React3.useState(0);
   const { footerChildren, regularChildren } = React3.useMemo(() => {
     const childArray = React3__namespace.default.Children.toArray(children);
     const footerChildren2 = [];
@@ -1199,6 +1202,8 @@ var MultiTabSmartForm = ({
       processingError,
       setProcessingError,
       disableManualTabSwitch,
+      maxUnlockedTab,
+      setMaxUnlockedTab,
       children: regularChildren
     }
   ) }) });
@@ -1224,9 +1229,11 @@ var MultiTabFormContent = ({
   setProcessingTab,
   processingError,
   setProcessingError,
-  disableManualTabSwitch = false
+  disableManualTabSwitch = false,
+  maxUnlockedTab,
+  setMaxUnlockedTab
 }) => {
-  const { isLoading, isDraftSaving, submitForm, saveDraft, resetForm, validateFields, formData, validationRegistry, setErrors } = chunkWUYS7DMR_cjs.useSmartForm();
+  const { isLoading, isDraftSaving, submitForm, saveDraft, resetForm, validateFields, formData, validationRegistry, setErrors, getValidationErrorMessage } = chunkAEN4A4ST_cjs.useSmartForm();
   const debounce = (func, wait) => {
     let timeout;
     return function executedFunction(...args) {
@@ -1288,11 +1295,11 @@ var MultiTabFormContent = ({
     checkTabCompletion();
   }, [formData, validationRegistry, getCombinedTabFields, tabs, setCompletedTabs, setValidationErrorTabs]);
   const handleTabChangeWithErrorCheck = React3.useCallback((index) => {
-    if (disableManualTabSwitch && index > activeTab) {
+    if (disableManualTabSwitch && index > maxUnlockedTab) {
       return;
     }
     onTabChange(index);
-  }, [onTabChange, disableManualTabSwitch, activeTab]);
+  }, [onTabChange, disableManualTabSwitch, maxUnlockedTab]);
   const handleNextWithValidation = React3.useCallback(async () => {
     const currentTabFields = getCombinedTabFields(activeTab);
     if (currentTabFields.length > 0) {
@@ -1305,7 +1312,8 @@ var MultiTabFormContent = ({
             validation.parse(formData[field]);
           } catch (error) {
             if (error instanceof zod.z.ZodError) {
-              allErrors[field] = error.issues[0]?.message || `Invalid ${field}`;
+              const msg = error.issues[0]?.message ?? "";
+              allErrors[field] = getValidationErrorMessage(field, msg);
               isValid = false;
             }
           }
@@ -1329,6 +1337,7 @@ var MultiTabFormContent = ({
             }
             setProcessingTab(null);
             setProcessingError(null);
+            setMaxUnlockedTab((prev) => Math.max(prev, activeTab + 1));
             onNext();
           } catch (error) {
             setProcessingTab(null);
@@ -1336,6 +1345,7 @@ var MultiTabFormContent = ({
             setProcessingError(errorMessage);
           }
         } else {
+          setMaxUnlockedTab((prev) => Math.max(prev, activeTab + 1));
           onNext();
         }
       } else {
@@ -1369,6 +1379,7 @@ var MultiTabFormContent = ({
           }
           setProcessingTab(null);
           setProcessingError(null);
+          setMaxUnlockedTab((prev) => Math.max(prev, activeTab + 1));
           onNext();
         } catch (error) {
           setProcessingTab(null);
@@ -1376,10 +1387,11 @@ var MultiTabFormContent = ({
           setProcessingError(errorMessage);
         }
       } else {
+        setMaxUnlockedTab((prev) => Math.max(prev, activeTab + 1));
         onNext();
       }
     }
-  }, [activeTab, getCombinedTabFields, validateFields, onNext, setCompletedTabs, setValidationErrorTabs, validationRegistry, formData, tabCallbacks, setProcessingTab, setProcessingError]);
+  }, [activeTab, getCombinedTabFields, validateFields, onNext, setCompletedTabs, setValidationErrorTabs, validationRegistry, formData, tabCallbacks, setProcessingTab, setProcessingError, setMaxUnlockedTab, getValidationErrorMessage]);
   const handleSubmitWithValidation = React3.useCallback(async () => {
     const allErrors = {};
     let isValid = true;
@@ -1390,7 +1402,8 @@ var MultiTabFormContent = ({
           validation.parse(formData[field]);
         } catch (error) {
           if (error instanceof zod.z.ZodError) {
-            allErrors[field] = error.issues[0]?.message || `Invalid ${field}`;
+            const msg = error.issues[0]?.message ?? "";
+            allErrors[field] = getValidationErrorMessage(field, msg);
             isValid = false;
           }
         }
@@ -1426,7 +1439,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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
@@ -1443,8 +1456,8 @@ var MultiTabFormContent = ({
         animate: animateTabs,
         type: tabType,
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(TabsList, { className: `grid w-full mb-8`, style: { gridTemplateColumns: `repeat(${tabs.length}, 1fr)` }, children: tabs.map((tab, index) => {
-            const isFutureTab = disableManualTabSwitch && index > activeTab;
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full mb-8", children: /* @__PURE__ */ jsxRuntime.jsx(TabsList, { className: `grid w-full`, style: { gridTemplateColumns: `repeat(${tabs.length}, 1fr)` }, children: tabs.map((tab, index) => {
+            const isFutureTab = disableManualTabSwitch && index > maxUnlockedTab;
             return /* @__PURE__ */ jsxRuntime.jsxs(
               TabsTrigger,
               {
@@ -1463,7 +1476,7 @@ var MultiTabFormContent = ({
               },
               tab
             );
-          }) }),
+          }) }) }),
           React3__namespace.default.Children.map(children, (child, index) => {
             if (React3__namespace.default.isValidElement(child) && child.type === Tab) {
               const tabProps = child.props;
@@ -1471,14 +1484,7 @@ var MultiTabFormContent = ({
               const hasProcessingOverlay = tabCallbacks[index]?.processingOverlay;
               return /* @__PURE__ */ jsxRuntime.jsx(TabsContent, { value: tabProps.title, children: /* @__PURE__ */ jsxRuntime.jsx(TabIndexProvider, { tabIndex: index, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6 relative", children: [
                 tabProps.children,
-                isCurrentlyProcessing && hasProcessingOverlay && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "pointer-events-auto", children: tabCallbacks[index].processingOverlay })
-                  }
-                )
+                isCurrentlyProcessing && hasProcessingOverlay && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fixed inset-0 bg-black/70 z-50 flex items-center justify-center pointer-events-none", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-auto", children: tabCallbacks[index].processingOverlay }) })
               ] }) }) }, index);
             }
             return null;
@@ -1532,7 +1538,7 @@ var MultiTabFormContent = ({
 
 // src/hooks/useFormWrapper.ts
 var useFormWrapper = () => {
-  return chunkWUYS7DMR_cjs.useSmartForm();
+  return chunkAEN4A4ST_cjs.useSmartForm();
 };
 var useExternalFormRegistration = () => {
   const context = React3.useContext(ExternalFormContext);
@@ -1554,7 +1560,7 @@ var ExternalFieldProvider = ({
   children,
   registerField
 }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(chunkWUYS7DMR_cjs.FieldDetectionContext.Provider, { value: { registerField }, children });
+  return /* @__PURE__ */ jsxRuntime.jsx(chunkAEN4A4ST_cjs.FieldDetectionContext.Provider, { value: { registerField }, children });
 };
 
 // src/useAutoDetectFields.tsx
@@ -1648,20 +1654,33 @@ var SmartTextArea = ({
   dirName,
   form
 }) => {
-  const { formData } = chunkWUYS7DMR_cjs.useSmartForm();
-  const { value, error, onChange, fieldRef, registerValidation } = chunkWUYS7DMR_cjs.useFormField(field);
-  const fieldDetection = chunkWUYS7DMR_cjs.useFieldDetection();
+  const { formData } = chunkAEN4A4ST_cjs.useSmartForm();
+  const { value, error, onChange, fieldRef, registerValidation } = chunkAEN4A4ST_cjs.useFormField(field);
+  const fieldDetection = chunkAEN4A4ST_cjs.useFieldDetection();
   const hasRegistered = React3.useRef(false);
   const hasSetDefault = React3.useRef(false);
   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 = React3.useMemo(() => {
+    if (validation) return void 0;
+    const preprocess = (v) => v === void 0 || v === null ? "" : v;
+    if (minLength != null) {
+      return zod.z.preprocess(preprocess, zod.z.string().min(minLength, `${displayName} must be at least ${minLength} characters`));
+    }
+    if (required) {
+      return zod.z.preprocess(preprocess, zod.z.string().min(1, `${displayName} is required`));
+    }
+    return void 0;
+  }, [validation, minLength, required, displayName]);
+  const schemaToRegister = validation ?? builtinValidation;
   React3.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]);
   React3.useEffect(() => {
     if (fieldDetection?.registerField) {
       fieldDetection.registerField(field);
@@ -1698,21 +1717,21 @@ var SmartTextArea = ({
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex-1 min-w-0 ${className}`, children: [
     label && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-1", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(chunkWUYS7DMR_cjs.Label, { className: "text-sm font-medium text-foreground", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(chunkAEN4A4ST_cjs.Label, { className: "text-sm font-medium text-foreground", children: [
           label,
           " ",
           required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-destructive", children: "*" })
         ] }),
-        info && /* @__PURE__ */ jsxRuntime.jsx(chunkWUYS7DMR_cjs.TooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsxs(chunkWUYS7DMR_cjs.Tooltip, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(chunkWUYS7DMR_cjs.TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.InfoIcon, { className: "h-4 w-4 text-muted-foreground cursor-pointer" }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(chunkWUYS7DMR_cjs.TooltipContent, { children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "max-w-xs", children: info }) })
+        info && /* @__PURE__ */ jsxRuntime.jsx(chunkAEN4A4ST_cjs.TooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsxs(chunkAEN4A4ST_cjs.Tooltip, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(chunkAEN4A4ST_cjs.TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.InfoIcon, { className: "h-4 w-4 text-muted-foreground cursor-pointer" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(chunkAEN4A4ST_cjs.TooltipContent, { children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "max-w-xs", children: info }) })
         ] }) })
       ] }),
       subLabel && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground mt-1", children: subLabel })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
       /* @__PURE__ */ jsxRuntime.jsx(
-        chunkWUYS7DMR_cjs.Textarea,
+        chunkAEN4A4ST_cjs.Textarea,
         {
           ref: fieldRef,
           value: value || "",
@@ -1749,47 +1768,47 @@ var SmartTextArea = ({
 
 Object.defineProperty(exports, "SmartCheckbox", {
   enumerable: true,
-  get: function () { return chunkDRMVY7TX_cjs.SmartCheckbox; }
+  get: function () { return chunkTX7JD2XS_cjs.SmartCheckbox; }
 });
 Object.defineProperty(exports, "SmartCombobox", {
   enumerable: true,
-  get: function () { return chunkDRMVY7TX_cjs.SmartCombobox; }
+  get: function () { return chunkTX7JD2XS_cjs.SmartCombobox; }
 });
 Object.defineProperty(exports, "SmartDatePicker", {
   enumerable: true,
-  get: function () { return chunkDRMVY7TX_cjs.SmartDatePicker; }
+  get: function () { return chunkTX7JD2XS_cjs.SmartDatePicker; }
 });
 Object.defineProperty(exports, "SmartRadioGroup", {
   enumerable: true,
-  get: function () { return chunkDRMVY7TX_cjs.SmartRadioGroup; }
+  get: function () { return chunkTX7JD2XS_cjs.SmartRadioGroup; }
 });
 Object.defineProperty(exports, "SmartSelect", {
   enumerable: true,
-  get: function () { return chunkDRMVY7TX_cjs.SmartSelect; }
+  get: function () { return chunkTX7JD2XS_cjs.SmartSelect; }
 });
 Object.defineProperty(exports, "SmartTags", {
   enumerable: true,
-  get: function () { return chunkDRMVY7TX_cjs.SmartTags; }
+  get: function () { return chunkTX7JD2XS_cjs.SmartTags; }
 });
 Object.defineProperty(exports, "SmartFormProvider", {
   enumerable: true,
-  get: function () { return chunkWUYS7DMR_cjs.SmartFormProvider; }
+  get: function () { return chunkAEN4A4ST_cjs.SmartFormProvider; }
 });
 Object.defineProperty(exports, "SmartInput", {
   enumerable: true,
-  get: function () { return chunkWUYS7DMR_cjs.SmartInput; }
+  get: function () { return chunkAEN4A4ST_cjs.SmartInput; }
 });
 Object.defineProperty(exports, "useFieldDetection", {
   enumerable: true,
-  get: function () { return chunkWUYS7DMR_cjs.useFieldDetection; }
+  get: function () { return chunkAEN4A4ST_cjs.useFieldDetection; }
 });
 Object.defineProperty(exports, "useFormField", {
   enumerable: true,
-  get: function () { return chunkWUYS7DMR_cjs.useFormField; }
+  get: function () { return chunkAEN4A4ST_cjs.useFormField; }
 });
 Object.defineProperty(exports, "useSmartForm", {
   enumerable: true,
-  get: function () { return chunkWUYS7DMR_cjs.useSmartForm; }
+  get: function () { return chunkAEN4A4ST_cjs.useSmartForm; }
 });
 exports.BaseSmartForm = BaseSmartForm;
 exports.DraftSaveButton = DraftSaveButton;