@algodomain/smart-forms 0.1.7 → 0.1.9

package/dist/index.cjs

@@ -1,15 +1,14 @@
 'use strict';
 
-var chunkNVGQPR3P_cjs = require('./chunk-NVGQPR3P.cjs');
-var chunkWIBCOQPP_cjs = require('./chunk-WIBCOQPP.cjs');
+var chunkDRMVY7TX_cjs = require('./chunk-DRMVY7TX.cjs');
+var chunkWUYS7DMR_cjs = require('./chunk-WUYS7DMR.cjs');
 var React3 = require('react');
 var reactToastify = require('react-toastify');
 var jsxRuntime = require('react/jsx-runtime');
 var lucideReact = require('lucide-react');
 var zod = require('zod');
 var TabsPrimitive = require('@radix-ui/react-tabs');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+var react = require('motion/react');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -29,7 +28,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React3__default = /*#__PURE__*/_interopDefault(React3);
+var React3__namespace = /*#__PURE__*/_interopNamespace(React3);
 var TabsPrimitive__namespace = /*#__PURE__*/_interopNamespace(TabsPrimitive);
 
 var ToastContainerWrapper = () => /* @__PURE__ */ jsxRuntime.jsx(
@@ -120,7 +119,7 @@ var BaseSmartForm = ({
     queryParamsToInclude,
     submitDisabled
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(chunkWIBCOQPP_cjs.SmartFormProvider, { config, initialData, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className, children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(chunkWUYS7DMR_cjs.SmartFormProvider, { config, initialData, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className, children: [
     /* @__PURE__ */ jsxRuntime.jsx(ToastContainerWrapper, {}),
     /* @__PURE__ */ jsxRuntime.jsx(FormHeader, { title, subTitle, logo }),
     children,
@@ -128,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(chunkNVGQPR3P_cjs.Button, { onClick, disabled, className, children: isLoading ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+var SubmitButton = ({ onClick, disabled, isLoading, children, className }) => /* @__PURE__ */ jsxRuntime.jsx(chunkDRMVY7TX_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(chunkNVGQPR3P_cjs.Button, { onClick, disabled, variant: "secondary", children: disabled ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+var DraftSaveButton = ({ onClick, disabled }) => /* @__PURE__ */ jsxRuntime.jsx(chunkDRMVY7TX_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(chunkNVGQPR3P_cjs.Button, { onClick, variant: "secondary", children: "Reset Form" });
+var ResetButton = ({ onClick }) => /* @__PURE__ */ jsxRuntime.jsx(chunkDRMVY7TX_cjs.Button, { onClick, variant: "secondary", children: "Reset Form" });
 var NavigationButtons = ({
   onPrevious,
   onNext,
@@ -147,9 +146,10 @@ var NavigationButtons = ({
   isDraftSaving,
   config,
   isFirstTab = false,
-  isLastTab = false
+  isLastTab = false,
+  disabled = false
 }) => {
-  const { formData, config: formConfig } = chunkWIBCOQPP_cjs.useSmartForm();
+  const { formData, config: formConfig } = chunkWUYS7DMR_cjs.useSmartForm();
   const isSubmitDisabled = typeof formConfig.submitDisabled === "function" ? formConfig.submitDisabled(formData) : formConfig.submitDisabled || false;
   const hasResetButton = !!onReset;
   const hasDraftButton = config.allowSaveDraft && !!onSaveDraft;
@@ -159,10 +159,10 @@ 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(
-      chunkNVGQPR3P_cjs.Button,
+      chunkDRMVY7TX_cjs.Button,
       {
         onClick: onPrevious,
-        disabled: isFirstTab,
+        disabled: isFirstTab || disabled,
         variant: "secondary",
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { className: "h-4 w-4" }),
@@ -171,13 +171,13 @@ var NavigationButtons = ({
       }
     ) }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: isSingleButton ? "w-full" : "flex gap-4", children: [
-      onReset && /* @__PURE__ */ jsxRuntime.jsx(ResetButton, { onClick: onReset }),
-      config.allowSaveDraft && onSaveDraft && /* @__PURE__ */ jsxRuntime.jsx(DraftSaveButton, { onClick: onSaveDraft, disabled: isDraftSaving }),
+      onReset && /* @__PURE__ */ jsxRuntime.jsx(chunkDRMVY7TX_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,
         {
           onClick: onSubmit,
-          disabled: isLoading || isSubmitDisabled,
+          disabled: isLoading || isSubmitDisabled || disabled,
           isLoading,
           className: isSingleButton ? "w-full" : "",
           children: [
@@ -186,9 +186,10 @@ var NavigationButtons = ({
           ]
         }
       ) : onNext && /* @__PURE__ */ jsxRuntime.jsxs(
-        chunkNVGQPR3P_cjs.Button,
+        chunkDRMVY7TX_cjs.Button,
         {
           onClick: onNext,
+          disabled,
           className: isSingleButton ? "w-full" : "",
           children: [
             "Next",
@@ -207,7 +208,7 @@ var SimpleFormButtons = ({
   isDraftSaving,
   config
 }) => {
-  const { formData, config: formConfig } = chunkWIBCOQPP_cjs.useSmartForm();
+  const { formData, config: formConfig } = chunkWUYS7DMR_cjs.useSmartForm();
   const isSubmitDisabled = typeof formConfig.submitDisabled === "function" ? formConfig.submitDisabled(formData) : formConfig.submitDisabled || false;
   const hasResetButton = !!onReset;
   const hasDraftButton = config.allowSaveDraft && !!onSaveDraft;
@@ -233,7 +234,7 @@ var SimpleFormButtons = ({
   ] }) });
 };
 var SubmitButton2 = () => {
-  const { isLoading, isDraftSaving, submitForm, saveDraft, resetForm, config } = chunkWIBCOQPP_cjs.useSmartForm();
+  const { isLoading, isDraftSaving, submitForm, saveDraft, resetForm, config } = chunkWUYS7DMR_cjs.useSmartForm();
   const shouldShowReset = config.showReset || config.enableLocalStorage;
   return /* @__PURE__ */ jsxRuntime.jsx(
     SimpleFormButtons,
@@ -249,7 +250,7 @@ var SubmitButton2 = () => {
 };
 var SmartForm = (props) => {
   const { children, ...otherProps } = props;
-  const childArray = React3__default.default.Children.toArray(children);
+  const childArray = React3__namespace.default.Children.toArray(children);
   const footerChildren = [];
   const regularChildren = [];
   childArray.forEach((child) => {
@@ -265,28 +266,471 @@ var SmartForm = (props) => {
     footerChildren.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-4", children: footerChildren })
   ] });
 };
+var MotionHighlightContext = React3__namespace.createContext(void 0);
+function useMotionHighlight() {
+  const context = React3__namespace.useContext(MotionHighlightContext);
+  if (!context) {
+    throw new Error("useMotionHighlight must be used within a MotionHighlightProvider");
+  }
+  return context;
+}
+function MotionHighlight({ ref, ...props }) {
+  const {
+    children,
+    value,
+    defaultValue,
+    onValueChange,
+    className,
+    transition = { type: "spring", stiffness: 350, damping: 35 },
+    hover = false,
+    enabled = true,
+    controlledItems,
+    disabled = false,
+    exitDelay = 0.2,
+    mode = "children"
+  } = props;
+  const localRef = React3__namespace.useRef(null);
+  React3__namespace.useImperativeHandle(ref, () => localRef.current);
+  const [activeValue, setActiveValue] = React3__namespace.useState(value ?? defaultValue ?? null);
+  const [boundsState, setBoundsState] = React3__namespace.useState(null);
+  const [activeClassNameState, setActiveClassNameState] = React3__namespace.useState("");
+  const safeSetActiveValue = React3__namespace.useCallback(
+    (id2) => {
+      setActiveValue((prev) => prev === id2 ? prev : id2);
+      if (id2 !== activeValue) onValueChange?.(id2);
+    },
+    [activeValue, onValueChange]
+  );
+  const safeSetBounds = React3__namespace.useCallback(
+    (bounds) => {
+      if (!localRef.current) return;
+      const boundsOffset = props?.boundsOffset ?? {
+        top: 0,
+        left: 0,
+        width: 0,
+        height: 0
+      };
+      const containerRect = localRef.current.getBoundingClientRect();
+      const newBounds = {
+        top: bounds.top - containerRect.top + (boundsOffset.top ?? 0),
+        left: bounds.left - containerRect.left + (boundsOffset.left ?? 0),
+        width: bounds.width + (boundsOffset.width ?? 0),
+        height: bounds.height + (boundsOffset.height ?? 0)
+      };
+      setBoundsState((prev) => {
+        if (prev && prev.top === newBounds.top && prev.left === newBounds.left && prev.width === newBounds.width && prev.height === newBounds.height) {
+          return prev;
+        }
+        return newBounds;
+      });
+    },
+    [props]
+  );
+  const clearBounds = React3__namespace.useCallback(() => {
+    setBoundsState((prev) => prev === null ? prev : null);
+  }, []);
+  React3__namespace.useEffect(() => {
+    if (value !== void 0) setActiveValue(value);
+    else if (defaultValue !== void 0) setActiveValue(defaultValue);
+  }, [value, defaultValue]);
+  const id = React3__namespace.useId();
+  React3__namespace.useEffect(() => {
+    if (mode !== "parent") return;
+    const container = localRef.current;
+    if (!container) return;
+    const onScroll = () => {
+      if (!activeValue) return;
+      const activeEl = container.querySelector(`[data-value="${activeValue}"][data-highlight="true"]`);
+      if (activeEl) safeSetBounds(activeEl.getBoundingClientRect());
+    };
+    container.addEventListener("scroll", onScroll, { passive: true });
+    return () => container.removeEventListener("scroll", onScroll);
+  }, [mode, activeValue, safeSetBounds]);
+  const render = React3__namespace.useCallback(
+    (children2) => {
+      if (mode === "parent") {
+        return /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            ref: localRef,
+            "data-slot": "motion-highlight-container",
+            className: chunkWUYS7DMR_cjs.cn("relative", props?.containerClassName),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(react.AnimatePresence, { initial: false, children: boundsState && /* @__PURE__ */ jsxRuntime.jsx(
+                react.motion.div,
+                {
+                  "data-slot": "motion-highlight",
+                  animate: {
+                    top: boundsState.top,
+                    left: boundsState.left,
+                    width: boundsState.width,
+                    height: boundsState.height,
+                    opacity: 1
+                  },
+                  initial: {
+                    top: boundsState.top,
+                    left: boundsState.left,
+                    width: boundsState.width,
+                    height: boundsState.height,
+                    opacity: 0
+                  },
+                  exit: {
+                    opacity: 0,
+                    transition: {
+                      ...transition,
+                      delay: (transition?.delay ?? 0) + (exitDelay ?? 0)
+                    }
+                  },
+                  transition,
+                  className: chunkWUYS7DMR_cjs.cn("bg-muted absolute z-0", className, activeClassNameState)
+                }
+              ) }),
+              children2
+            ]
+          }
+        );
+      }
+      return children2;
+    },
+    [mode, props, boundsState, transition, exitDelay, className, activeClassNameState]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    MotionHighlightContext.Provider,
+    {
+      value: {
+        mode,
+        activeValue,
+        setActiveValue: safeSetActiveValue,
+        id,
+        hover,
+        className,
+        transition,
+        disabled,
+        enabled,
+        exitDelay,
+        setBounds: safeSetBounds,
+        clearBounds,
+        activeClassName: activeClassNameState,
+        setActiveClassName: setActiveClassNameState,
+        forceUpdateBounds: props?.forceUpdateBounds
+      },
+      children: enabled ? controlledItems ? render(children) : render(
+        React3__namespace.Children.map(children, (child, index) => /* @__PURE__ */ jsxRuntime.jsx(MotionHighlightItem, { className: props?.itemsClassName, children: child }, index))
+      ) : children
+    }
+  );
+}
+function getNonOverridingDataAttributes(element, dataAttributes) {
+  return Object.keys(dataAttributes).reduce((acc, key) => {
+    if (element.props[key] === void 0) {
+      acc[key] = dataAttributes[key];
+    }
+    return acc;
+  }, {});
+}
+function MotionHighlightItem({
+  ref,
+  children,
+  id,
+  value,
+  className,
+  transition,
+  disabled = false,
+  activeClassName,
+  exitDelay,
+  asChild = false,
+  forceUpdateBounds,
+  ...props
+}) {
+  const itemId = React3__namespace.useId();
+  const {
+    activeValue,
+    setActiveValue,
+    mode,
+    setBounds,
+    clearBounds,
+    hover,
+    enabled,
+    className: contextClassName,
+    transition: contextTransition,
+    id: contextId,
+    disabled: contextDisabled,
+    exitDelay: contextExitDelay,
+    forceUpdateBounds: contextForceUpdateBounds,
+    setActiveClassName
+  } = useMotionHighlight();
+  const element = children;
+  const childValue = id ?? value ?? element.props?.["data-value"] ?? element.props?.id ?? itemId;
+  const isActive = activeValue === childValue;
+  const isDisabled = disabled === void 0 ? contextDisabled : disabled;
+  const itemTransition = transition ?? contextTransition;
+  const localRef = React3__namespace.useRef(null);
+  React3__namespace.useImperativeHandle(ref, () => localRef.current);
+  React3__namespace.useEffect(() => {
+    if (mode !== "parent") return;
+    let rafId;
+    let previousBounds = null;
+    const shouldUpdateBounds = forceUpdateBounds === true || contextForceUpdateBounds && forceUpdateBounds !== false;
+    const updateBounds = () => {
+      if (!localRef.current) return;
+      const bounds = localRef.current.getBoundingClientRect();
+      if (shouldUpdateBounds) {
+        if (previousBounds && previousBounds.top === bounds.top && previousBounds.left === bounds.left && previousBounds.width === bounds.width && previousBounds.height === bounds.height) {
+          rafId = requestAnimationFrame(updateBounds);
+          return;
+        }
+        previousBounds = bounds;
+        rafId = requestAnimationFrame(updateBounds);
+      }
+      setBounds(bounds);
+    };
+    if (isActive) {
+      updateBounds();
+      setActiveClassName(activeClassName ?? "");
+    } else if (!activeValue) clearBounds();
+    if (shouldUpdateBounds) return () => cancelAnimationFrame(rafId);
+  }, [
+    mode,
+    isActive,
+    activeValue,
+    setBounds,
+    clearBounds,
+    activeClassName,
+    setActiveClassName,
+    forceUpdateBounds,
+    contextForceUpdateBounds
+  ]);
+  if (!React3__namespace.isValidElement(children)) return children;
+  const dataAttributes = {
+    "data-active": isActive ? "true" : "false",
+    "aria-selected": isActive,
+    "data-disabled": isDisabled,
+    "data-value": childValue,
+    "data-highlight": true
+  };
+  const commonHandlers = hover ? {
+    onMouseEnter: (e) => {
+      setActiveValue(childValue);
+      element.props.onMouseEnter?.(e);
+    },
+    onMouseLeave: (e) => {
+      setActiveValue(null);
+      element.props.onMouseLeave?.(e);
+    }
+  } : {
+    onClick: (e) => {
+      setActiveValue(childValue);
+      element.props.onClick?.(e);
+    }
+  };
+  if (asChild) {
+    if (mode === "children") {
+      return React3__namespace.cloneElement(
+        element,
+        {
+          key: childValue,
+          ref: localRef,
+          className: chunkWUYS7DMR_cjs.cn("relative", element.props.className),
+          ...getNonOverridingDataAttributes(element, {
+            ...dataAttributes,
+            "data-slot": "motion-highlight-item-container"
+          }),
+          ...commonHandlers,
+          ...props
+        },
+        /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(react.AnimatePresence, { initial: false, children: isActive && !isDisabled && /* @__PURE__ */ jsxRuntime.jsx(
+            react.motion.div,
+            {
+              layoutId: `transition-background-${contextId}`,
+              "data-slot": "motion-highlight",
+              className: chunkWUYS7DMR_cjs.cn("bg-muted absolute inset-0 z-0", contextClassName, activeClassName),
+              transition: itemTransition,
+              initial: { opacity: 0 },
+              animate: { opacity: 1 },
+              exit: {
+                opacity: 0,
+                transition: {
+                  ...itemTransition,
+                  delay: (itemTransition?.delay ?? 0) + (exitDelay ?? contextExitDelay ?? 0)
+                }
+              },
+              ...dataAttributes
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "motion-highlight-item", className: chunkWUYS7DMR_cjs.cn("relative z-[1]", className), ...dataAttributes, children })
+        ] })
+      );
+    }
+    return React3__namespace.cloneElement(element, {
+      ref: localRef,
+      ...getNonOverridingDataAttributes(element, {
+        ...dataAttributes,
+        "data-slot": "motion-highlight-item"
+      }),
+      ...commonHandlers
+    });
+  }
+  return enabled ? /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: localRef,
+      "data-slot": "motion-highlight-item-container",
+      className: chunkWUYS7DMR_cjs.cn(mode === "children" && "relative", className),
+      ...dataAttributes,
+      ...props,
+      ...commonHandlers,
+      children: [
+        mode === "children" && /* @__PURE__ */ jsxRuntime.jsx(react.AnimatePresence, { initial: false, children: isActive && !isDisabled && /* @__PURE__ */ jsxRuntime.jsx(
+          react.motion.div,
+          {
+            layoutId: `transition-background-${contextId}`,
+            "data-slot": "motion-highlight",
+            className: chunkWUYS7DMR_cjs.cn("bg-muted absolute inset-0 z-0", contextClassName, activeClassName),
+            transition: itemTransition,
+            initial: { opacity: 0 },
+            animate: { opacity: 1 },
+            exit: {
+              opacity: 0,
+              transition: {
+                ...itemTransition,
+                delay: (itemTransition?.delay ?? 0) + (exitDelay ?? contextExitDelay ?? 0)
+              }
+            },
+            ...dataAttributes
+          }
+        ) }),
+        React3__namespace.cloneElement(element, {
+          className: chunkWUYS7DMR_cjs.cn("relative z-[1]", element.props.className),
+          ...getNonOverridingDataAttributes(element, {
+            ...dataAttributes,
+            "data-slot": "motion-highlight-item"
+          })
+        })
+      ]
+    },
+    childValue
+  ) : children;
+}
+var TabsConfigContext = React3__namespace.createContext({});
+function useTabsConfig() {
+  return React3__namespace.useContext(TabsConfigContext);
+}
+var TabsContext = React3__namespace.createContext(void 0);
+function useTabs() {
+  const context = React3__namespace.useContext(TabsContext);
+  if (!context) {
+    throw new Error("useTabs must be used within a TabsProvider");
+  }
+  return context;
+}
 function Tabs({
   className,
+  animate = false,
+  type = "default",
   ...props
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  const config = React3__namespace.useMemo(() => ({ animate, type }), [animate, type]);
+  if (type === "default" && animate) {
+    const [activeValue, setActiveValue] = React3__namespace.useState(
+      props.defaultValue ?? void 0
+    );
+    const triggersRef = React3__namespace.useRef(/* @__PURE__ */ new Map());
+    const initialSet = React3__namespace.useRef(false);
+    const isControlled = props.value !== void 0;
+    React3__namespace.useEffect(() => {
+      if (!isControlled && activeValue === void 0 && triggersRef.current.size > 0 && !initialSet.current) {
+        const firstTab = Array.from(triggersRef.current.keys())[0];
+        setActiveValue(firstTab);
+        initialSet.current = true;
+      }
+    }, [activeValue, isControlled]);
+    const registerTrigger = (value, node) => {
+      if (node) {
+        triggersRef.current.set(value, node);
+        if (!isControlled && activeValue === void 0 && !initialSet.current) {
+          setActiveValue(value);
+          initialSet.current = true;
+        }
+      } else {
+        triggersRef.current.delete(value);
+      }
+    };
+    const handleValueChange = (val) => {
+      if (!isControlled) setActiveValue(val);
+      else props.onValueChange?.(val);
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(TabsConfigContext.Provider, { value: config, children: /* @__PURE__ */ jsxRuntime.jsx(
+      TabsContext.Provider,
+      {
+        value: {
+          activeValue: props.value ?? activeValue,
+          handleValueChange,
+          registerTrigger
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "tabs", className: chunkWUYS7DMR_cjs.cn("flex flex-col gap-2", className), ...props, children: props.children })
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(TabsConfigContext.Provider, { value: config, children: /* @__PURE__ */ jsxRuntime.jsx(
     TabsPrimitive__namespace.Root,
     {
       "data-slot": "tabs",
-      className: chunkWIBCOQPP_cjs.cn("flex flex-col gap-2", className),
+      className: chunkWUYS7DMR_cjs.cn("flex flex-col gap-2", className),
       ...props
     }
-  );
+  ) });
 }
 function TabsList({
   className,
+  activeClassName,
+  transition = {
+    type: "spring",
+    stiffness: 200,
+    damping: 25
+  },
   ...props
 }) {
+  const { animate, type } = useTabsConfig();
+  if (type === "default" && animate) {
+    const { activeValue } = useTabs();
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      MotionHighlight,
+      {
+        controlledItems: true,
+        className: chunkWUYS7DMR_cjs.cn("bg-background rounded-sm shadow-sm", activeClassName),
+        value: activeValue,
+        transition,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            role: "tablist",
+            "data-slot": "tabs-list",
+            className: chunkWUYS7DMR_cjs.cn(
+              "bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",
+              className
+            ),
+            ...props,
+            children: props.children
+          }
+        )
+      }
+    );
+  }
+  if (type === "underline") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      UnderlineTabsList,
+      {
+        className,
+        ...props
+      }
+    );
+  }
   return /* @__PURE__ */ jsxRuntime.jsx(
     TabsPrimitive__namespace.List,
     {
       "data-slot": "tabs-list",
-      className: chunkWIBCOQPP_cjs.cn(
+      className: chunkWUYS7DMR_cjs.cn(
         "bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",
         className
       ),
@@ -294,15 +738,203 @@ function TabsList({
     }
   );
 }
+var UnderlineTabsContext = React3__namespace.createContext(void 0);
+function useUnderlineTabs() {
+  const context = React3__namespace.useContext(UnderlineTabsContext);
+  if (!context) {
+    return { registerTrigger: () => {
+    }, activeValue: void 0 };
+  }
+  return context;
+}
+function UnderlineTabsList({
+  children,
+  className,
+  ...props
+}) {
+  const { animate } = useTabsConfig();
+  const tabRefs = React3__namespace.useRef([]);
+  const [underlineStyle, setUnderlineStyle] = React3__namespace.useState({ left: 0, width: 0 });
+  const listRef = React3__namespace.useRef(null);
+  const registerTrigger = React3__namespace.useCallback((index, element) => {
+    tabRefs.current[index] = element;
+  }, []);
+  const updateUnderline = React3__namespace.useCallback(() => {
+    const activeElement = tabRefs.current.find((el) => {
+      if (!el) return false;
+      return el.getAttribute("data-state") === "active";
+    });
+    if (activeElement && listRef.current) {
+      const listRect = listRef.current.getBoundingClientRect();
+      const activeRect = activeElement.getBoundingClientRect();
+      const left = activeRect.left - listRect.left;
+      const width = activeRect.width;
+      setUnderlineStyle({ left, width });
+    }
+  }, []);
+  React3__namespace.useLayoutEffect(() => {
+    updateUnderline();
+  }, [updateUnderline]);
+  React3__namespace.useEffect(() => {
+    if (!listRef.current) return;
+    const observers = [];
+    const setupObservers = () => {
+      observers.forEach((obs) => obs.disconnect());
+      observers.length = 0;
+      tabRefs.current.forEach((el) => {
+        if (el) {
+          const observer = new MutationObserver(() => {
+            updateUnderline();
+          });
+          observer.observe(el, { attributes: true, attributeFilter: ["data-state"] });
+          observers.push(observer);
+        }
+      });
+    };
+    setupObservers();
+    const listObserver = new MutationObserver(() => {
+      setupObservers();
+      updateUnderline();
+    });
+    if (listRef.current) {
+      listObserver.observe(listRef.current, {
+        childList: true,
+        subtree: true
+      });
+      observers.push(listObserver);
+    }
+    return () => {
+      observers.forEach((obs) => obs.disconnect());
+    };
+  }, [updateUnderline]);
+  const contextValue = React3__namespace.useMemo(
+    () => ({ registerTrigger, activeValue: void 0 }),
+    [registerTrigger]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(UnderlineTabsContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: listRef, className: "relative", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      TabsPrimitive__namespace.List,
+      {
+        "data-slot": "tabs-list",
+        className: chunkWUYS7DMR_cjs.cn(
+          "bg-background relative rounded-none border-b p-0",
+          className
+        ),
+        ...props,
+        children
+      }
+    ),
+    animate && /* @__PURE__ */ jsxRuntime.jsx(
+      react.motion.div,
+      {
+        className: "bg-primary absolute bottom-0 z-20 h-0.5",
+        layoutId: "underline",
+        style: {
+          left: underlineStyle.left,
+          width: underlineStyle.width
+        },
+        transition: {
+          type: "spring",
+          stiffness: 400,
+          damping: 40
+        }
+      }
+    ),
+    !animate && underlineStyle.width > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "bg-primary absolute bottom-0 z-20 h-0.5 transition-all duration-200",
+        style: {
+          left: underlineStyle.left,
+          width: underlineStyle.width
+        }
+      }
+    )
+  ] }) });
+}
 function TabsTrigger({
   className,
   ...props
 }) {
+  const { animate, type } = useTabsConfig();
+  if (type === "default" && animate) {
+    const { activeValue, handleValueChange, registerTrigger } = useTabs();
+    const localRef = React3__namespace.useRef(null);
+    React3__namespace.useEffect(() => {
+      if (props.value) {
+        registerTrigger(props.value, localRef.current);
+        return () => registerTrigger(props.value, null);
+      }
+    }, [props.value, registerTrigger]);
+    const {
+      onDrag,
+      onDragStart,
+      onDragEnd,
+      onDragEnter,
+      onDragExit,
+      onDragLeave,
+      onDragOver,
+      onDrop,
+      onAnimationStart,
+      onAnimationEnd,
+      onAnimationIteration,
+      onTransitionEnd,
+      ...motionButtonProps
+    } = props;
+    return /* @__PURE__ */ jsxRuntime.jsx(MotionHighlightItem, { value: props.value, className: "size-full", children: /* @__PURE__ */ jsxRuntime.jsx(
+      react.motion.button,
+      {
+        ref: localRef,
+        "data-slot": "tabs-trigger",
+        role: "tab",
+        onClick: () => handleValueChange(props.value),
+        "data-state": activeValue === props.value ? "active" : "inactive",
+        className: chunkWUYS7DMR_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
+        ),
+        ...motionButtonProps,
+        children: props.children
+      }
+    ) });
+  }
+  if (type === "underline") {
+    const { registerTrigger } = useUnderlineTabs();
+    const [index, setIndex] = React3__namespace.useState(-1);
+    const localRef = React3__namespace.useRef(null);
+    React3__namespace.useEffect(() => {
+      if (localRef.current && localRef.current.parentElement) {
+        const siblings = Array.from(localRef.current.parentElement.children);
+        const idx = siblings.indexOf(localRef.current);
+        if (idx >= 0) {
+          setIndex(idx);
+          registerTrigger(idx, localRef.current);
+        }
+      }
+      return () => {
+        if (index >= 0) {
+          registerTrigger(index, null);
+        }
+      };
+    }, [registerTrigger, index]);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      TabsPrimitive__namespace.Trigger,
+      {
+        ref: localRef,
+        "data-slot": "tabs-trigger",
+        className: chunkWUYS7DMR_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
+        ),
+        ...props
+      }
+    );
+  }
   return /* @__PURE__ */ jsxRuntime.jsx(
     TabsPrimitive__namespace.Trigger,
     {
       "data-slot": "tabs-trigger",
-      className: chunkWIBCOQPP_cjs.cn(
+      className: chunkWUYS7DMR_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
       ),
@@ -310,20 +942,73 @@ function TabsTrigger({
     }
   );
 }
+var visitedTabsSet = /* @__PURE__ */ new Set();
 function TabsContent({
   className,
   ...props
 }) {
+  const { animate, type } = useTabsConfig();
+  if (type === "default" && animate) {
+    const { activeValue } = useTabs();
+    const isActive = activeValue === props.value;
+    const value = props.value;
+    React3__namespace.useEffect(() => {
+      if (value && isActive) {
+        visitedTabsSet.add(value);
+      }
+    }, [value, isActive]);
+    const shouldRender = visitedTabsSet.has(value) || isActive;
+    if (!shouldRender) {
+      return null;
+    }
+    const {
+      onDrag,
+      onDragStart,
+      onDragEnd,
+      onDragEnter,
+      onDragExit,
+      onDragLeave,
+      onDragOver,
+      onDrop,
+      onAnimationStart,
+      onAnimationEnd,
+      onAnimationIteration,
+      onTransitionEnd,
+      ...motionDivProps
+    } = props;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      react.motion.div,
+      {
+        role: "tabpanel",
+        "data-slot": "tabs-content",
+        className: chunkWUYS7DMR_cjs.cn("overflow-hidden", className),
+        initial: { filter: "blur(0px)" },
+        animate: { filter: isActive ? "blur(0px)" : "blur(2px)" },
+        exit: { filter: "blur(0px)" },
+        transition: { type: "spring", stiffness: 300, damping: 20 },
+        style: {
+          visibility: isActive ? "visible" : "hidden",
+          position: isActive ? "static" : "absolute",
+          width: isActive ? "100%" : "0",
+          height: isActive ? "auto" : "0",
+          overflow: isActive ? "visible" : "hidden"
+        },
+        "aria-hidden": !isActive,
+        ...motionDivProps,
+        children: props.children
+      }
+    );
+  }
   return /* @__PURE__ */ jsxRuntime.jsx(
     TabsPrimitive__namespace.Content,
     {
       "data-slot": "tabs-content",
-      className: chunkWIBCOQPP_cjs.cn("flex-1 outline-none", className),
+      className: chunkWUYS7DMR_cjs.cn("flex-1 outline-none", className),
       ...props
     }
   );
 }
-var TabIndexContext = React3__default.default.createContext(null);
+var TabIndexContext = React3__namespace.default.createContext(null);
 var useTabIndex = () => {
   const context = React3.useContext(TabIndexContext);
   return context;
@@ -348,30 +1033,47 @@ var NavigationButtonsWrapper = ({
   onReset,
   isLoading,
   isDraftSaving,
-  config
+  config,
+  isProcessing = false,
+  processingError = null
 }) => {
   const isLastTab = activeTab === totalTabs - 1;
   const isFirstTab = activeTab === 0;
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    NavigationButtons,
-    {
-      onPrevious,
-      onNext,
-      onSubmit,
-      onSaveDraft,
-      onReset,
-      isLoading,
-      isDraftSaving,
-      config,
-      isFirstTab,
-      isLastTab
-    }
-  );
+  const handlePrevious = isProcessing ? () => {
+  } : onPrevious;
+  const handleNext = isProcessing ? () => {
+  } : onNext;
+  const handleSubmit = isProcessing ? () => {
+  } : onSubmit;
+  const handleSaveDraft = isProcessing ? void 0 : onSaveDraft;
+  const handleReset = isProcessing ? void 0 : onReset;
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      NavigationButtons,
+      {
+        onPrevious: handlePrevious,
+        onNext: handleNext,
+        onSubmit: handleSubmit,
+        onSaveDraft: handleSaveDraft,
+        onReset: handleReset,
+        isLoading,
+        isDraftSaving,
+        config,
+        isFirstTab,
+        isLastTab,
+        disabled: isProcessing
+      }
+    ),
+    processingError && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4 p-3 bg-red-50 border border-red-200 rounded-md text-red-700 text-sm", children: processingError })
+  ] });
 };
 var MultiTabSmartForm = ({
   children,
   showProgressBar = true,
   showTabNumbers = true,
+  animateTabs = false,
+  tabType = "default",
+  disableManualTabSwitch = false,
   ...baseProps
 }) => {
   const [activeTab, setActiveTab] = React3.useState(0);
@@ -379,8 +1081,10 @@ var MultiTabSmartForm = ({
   const [completedTabs, setCompletedTabs] = React3.useState(/* @__PURE__ */ new Set());
   const [validationErrorTabs, setValidationErrorTabs] = React3.useState(/* @__PURE__ */ new Set());
   const [externalTabFields, setExternalTabFields] = React3.useState({});
+  const [processingTab, setProcessingTab] = React3.useState(null);
+  const [processingError, setProcessingError] = React3.useState(null);
   const { footerChildren, regularChildren } = React3.useMemo(() => {
-    const childArray = React3__default.default.Children.toArray(children);
+    const childArray = React3__namespace.default.Children.toArray(children);
     const footerChildren2 = [];
     const regularChildren2 = [];
     childArray.forEach((child) => {
@@ -393,8 +1097,8 @@ var MultiTabSmartForm = ({
     return { footerChildren: footerChildren2, regularChildren: regularChildren2 };
   }, [children]);
   const tabs = [];
-  React3__default.default.Children.forEach(regularChildren, (child) => {
-    if (React3__default.default.isValidElement(child) && child.type === Tab) {
+  React3__namespace.default.Children.forEach(regularChildren, (child) => {
+    if (React3__namespace.default.isValidElement(child) && child.type === Tab) {
       const props = child.props;
       if (props.title) {
         tabs.push(props.title);
@@ -403,8 +1107,8 @@ var MultiTabSmartForm = ({
   });
   const findSmartInputs = React3.useCallback((children2) => {
     const fields = [];
-    React3__default.default.Children.forEach(children2, (child) => {
-      if (React3__default.default.isValidElement(child)) {
+    React3__namespace.default.Children.forEach(children2, (child) => {
+      if (React3__namespace.default.isValidElement(child)) {
         const fieldProps = child.props;
         if (fieldProps && typeof fieldProps === "object" && "field" in fieldProps && fieldProps.field) {
           fields.push(fieldProps.field);
@@ -422,10 +1126,10 @@ var MultiTabSmartForm = ({
       [tabIndex]: fields
     }));
   }, []);
-  React3__default.default.useEffect(() => {
+  React3__namespace.default.useEffect(() => {
     const fields = [];
-    React3__default.default.Children.forEach(regularChildren, (child) => {
-      if (React3__default.default.isValidElement(child) && child.type === Tab) {
+    React3__namespace.default.Children.forEach(regularChildren, (child) => {
+      if (React3__namespace.default.isValidElement(child) && child.type === Tab) {
         const tabFieldsInTab = findSmartInputs(child.props.children);
         fields.push(tabFieldsInTab);
       }
@@ -437,6 +1141,19 @@ var MultiTabSmartForm = ({
     const externalFields = externalTabFields[tabIndex] || [];
     return [...internalFields, ...externalFields];
   }, [tabFields, externalTabFields]);
+  const tabCallbacks = React3.useMemo(() => {
+    const callbacks = [];
+    React3__namespace.default.Children.forEach(regularChildren, (child) => {
+      if (React3__namespace.default.isValidElement(child) && child.type === Tab) {
+        const props = child.props;
+        callbacks.push({
+          onNext: props.onNext,
+          processingOverlay: props.processingOverlay
+        });
+      }
+    });
+    return callbacks;
+  }, [regularChildren]);
   const config = {
     ...baseProps,
     showProgressBar,
@@ -474,6 +1191,14 @@ var MultiTabSmartForm = ({
       validationErrorTabs,
       setValidationErrorTabs,
       footerChildren,
+      animateTabs,
+      tabType,
+      tabCallbacks,
+      processingTab,
+      setProcessingTab,
+      processingError,
+      setProcessingError,
+      disableManualTabSwitch,
       children: regularChildren
     }
   ) }) });
@@ -491,11 +1216,17 @@ var MultiTabFormContent = ({
   validationErrorTabs,
   setValidationErrorTabs,
   footerChildren,
-  children
+  children,
+  animateTabs,
+  tabType,
+  tabCallbacks,
+  processingTab,
+  setProcessingTab,
+  processingError,
+  setProcessingError,
+  disableManualTabSwitch = false
 }) => {
-  const { isLoading, isDraftSaving, submitForm, saveDraft, resetForm, validateFields, formData, validationRegistry, setErrors } = chunkWIBCOQPP_cjs.useSmartForm();
-  const [maxContentHeight, setMaxContentHeight] = React3.useState(0);
-  const contentRefs = React3.useRef([]);
+  const { isLoading, isDraftSaving, submitForm, saveDraft, resetForm, validateFields, formData, validationRegistry, setErrors } = chunkWUYS7DMR_cjs.useSmartForm();
   const debounce = (func, wait) => {
     let timeout;
     return function executedFunction(...args) {
@@ -507,27 +1238,7 @@ var MultiTabFormContent = ({
       timeout = setTimeout(later, wait);
     };
   };
-  React3__default.default.useEffect(() => {
-    const calculateMaxHeight = () => {
-      let maxHeight = 0;
-      contentRefs.current.forEach((ref) => {
-        if (ref) {
-          const height = ref.scrollHeight;
-          maxHeight = Math.max(maxHeight, height);
-        }
-      });
-      if (maxHeight > 0) {
-        setMaxContentHeight(maxHeight);
-      }
-    };
-    const timeoutId = setTimeout(calculateMaxHeight, 100);
-    window.addEventListener("resize", calculateMaxHeight);
-    return () => {
-      clearTimeout(timeoutId);
-      window.removeEventListener("resize", calculateMaxHeight);
-    };
-  }, [children, activeTab]);
-  React3__default.default.useEffect(() => {
+  React3__namespace.default.useEffect(() => {
     const checkTabCompletion = debounce(() => {
       tabs.forEach((_, tabIndex) => {
         const tabFieldsInTab = getCombinedTabFields(tabIndex);
@@ -577,9 +1288,12 @@ var MultiTabFormContent = ({
     checkTabCompletion();
   }, [formData, validationRegistry, getCombinedTabFields, tabs, setCompletedTabs, setValidationErrorTabs]);
   const handleTabChangeWithErrorCheck = React3.useCallback((index) => {
+    if (disableManualTabSwitch && index > activeTab) {
+      return;
+    }
     onTabChange(index);
-  }, [onTabChange]);
-  const handleNextWithValidation = React3.useCallback(() => {
+  }, [onTabChange, disableManualTabSwitch, activeTab]);
+  const handleNextWithValidation = React3.useCallback(async () => {
     const currentTabFields = getCombinedTabFields(activeTab);
     if (currentTabFields.length > 0) {
       const allErrors = {};
@@ -604,7 +1318,26 @@ var MultiTabFormContent = ({
           newSet.delete(activeTab);
           return newSet;
         });
-        onNext();
+        const currentTabCallback = tabCallbacks[activeTab];
+        if (currentTabCallback?.onNext) {
+          try {
+            setProcessingTab(activeTab);
+            setProcessingError(null);
+            const result = currentTabCallback.onNext();
+            if (result instanceof Promise) {
+              await result;
+            }
+            setProcessingTab(null);
+            setProcessingError(null);
+            onNext();
+          } catch (error) {
+            setProcessingTab(null);
+            const errorMessage = error instanceof Error ? error.message : "An error occurred while processing";
+            setProcessingError(errorMessage);
+          }
+        } else {
+          onNext();
+        }
       } else {
         setCompletedTabs((prev) => {
           const newSet = new Set(prev);
@@ -625,9 +1358,28 @@ var MultiTabFormContent = ({
         }
       }
     } else {
-      onNext();
+      const currentTabCallback = tabCallbacks[activeTab];
+      if (currentTabCallback?.onNext) {
+        try {
+          setProcessingTab(activeTab);
+          setProcessingError(null);
+          const result = currentTabCallback.onNext();
+          if (result instanceof Promise) {
+            await result;
+          }
+          setProcessingTab(null);
+          setProcessingError(null);
+          onNext();
+        } catch (error) {
+          setProcessingTab(null);
+          const errorMessage = error instanceof Error ? error.message : "An error occurred while processing";
+          setProcessingError(errorMessage);
+        }
+      } else {
+        onNext();
+      }
     }
-  }, [activeTab, getCombinedTabFields, validateFields, onNext, setCompletedTabs, setValidationErrorTabs, validationRegistry, formData]);
+  }, [activeTab, getCombinedTabFields, validateFields, onNext, setCompletedTabs, setValidationErrorTabs, validationRegistry, formData, tabCallbacks, setProcessingTab, setProcessingError]);
   const handleSubmitWithValidation = React3.useCallback(async () => {
     const allErrors = {};
     let isValid = true;
@@ -677,55 +1429,70 @@ var MultiTabFormContent = ({
   }, [submitForm, getCombinedTabFields, onTabChange, tabs.length, validationRegistry, formData, setErrors, setValidationErrorTabs]);
   const activeTabValue = tabs[activeTab] || tabs[0] || "";
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(Tabs, { value: activeTabValue, onValueChange: (value) => {
-      const newIndex = tabs.indexOf(value);
-      if (newIndex !== -1) {
-        handleTabChangeWithErrorCheck(newIndex);
-      }
-    }, className: "w-full", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(TabsList, { className: `grid w-full mb-8`, style: { gridTemplateColumns: `repeat(${tabs.length}, 1fr)` }, children: tabs.map((tab, index) => /* @__PURE__ */ jsxRuntime.jsxs(TabsTrigger, { value: tab, className: "flex items-center gap-2", children: [
-        config.showTabNumbers && /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-          index + 1,
-          "."
-        ] }),
-        tab,
-        completedTabs.has(index) && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-4 w-4 text-green-600" }),
-        validationErrorTabs.has(index) && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-4 w-4 text-red-600" })
-      ] }, tab)) }),
-      React3__default.default.Children.map(children, (child, index) => {
-        if (React3__default.default.isValidElement(child) && child.type === Tab) {
-          const tabProps = child.props;
-          return /* @__PURE__ */ jsxRuntime.jsx(TabsContent, { value: tabProps.title, children: /* @__PURE__ */ jsxRuntime.jsx(TabIndexProvider, { tabIndex: index, children: /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              ref: (el) => {
-                contentRefs.current[index] = el;
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      Tabs,
+      {
+        value: activeTabValue,
+        onValueChange: (value) => {
+          const newIndex = tabs.indexOf(value);
+          if (newIndex !== -1) {
+            handleTabChangeWithErrorCheck(newIndex);
+          }
+        },
+        className: "w-full",
+        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;
+            return /* @__PURE__ */ jsxRuntime.jsxs(
+              TabsTrigger,
+              {
+                value: tab,
+                disabled: isFutureTab,
+                className: `flex items-center gap-2 ${isFutureTab ? "opacity-50 cursor-not-allowed" : ""}`,
+                children: [
+                  config.showTabNumbers && /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+                    index + 1,
+                    "."
+                  ] }),
+                  tab,
+                  completedTabs.has(index) && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-4 w-4 text-green-600" }),
+                  validationErrorTabs.has(index) && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-4 w-4 text-red-600" })
+                ]
               },
-              className: "space-y-6",
-              style: { minHeight: maxContentHeight > 0 ? `${maxContentHeight}px` : void 0 },
-              children: tabProps.children
+              tab
+            );
+          }) }),
+          React3__namespace.default.Children.map(children, (child, index) => {
+            if (React3__namespace.default.isValidElement(child) && child.type === Tab) {
+              const tabProps = child.props;
+              const isCurrentlyProcessing = processingTab === index;
+              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 })
+                  }
+                )
+              ] }) }) }, index);
             }
-          ) }) }, index);
-        }
-        return null;
-      }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { style: { position: "absolute", left: "-9999px", top: "-9999px", visibility: "hidden" }, children: React3__default.default.Children.map(children, (child, index) => {
-        if (React3__default.default.isValidElement(child) && child.type === Tab) {
-          const tabProps = child.props;
-          return /* @__PURE__ */ jsxRuntime.jsx(TabIndexProvider, { tabIndex: index, children: /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              ref: (el) => {
-                contentRefs.current[index] = el;
-              },
-              className: "space-y-6",
-              children: tabProps.children
+            return null;
+          }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { style: { position: "absolute", left: "-9999px", top: "-9999px", visibility: "hidden" }, children: React3__namespace.default.Children.map(children, (child, index) => {
+            if (React3__namespace.default.isValidElement(child) && child.type === Tab) {
+              const tabProps = child.props;
+              return /* @__PURE__ */ jsxRuntime.jsx(TabIndexProvider, { tabIndex: index, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-6", children: tabProps.children }) }, `hidden-${index}`);
             }
-          ) }, `hidden-${index}`);
-        }
-        return null;
-      }) })
-    ] }),
+            return null;
+          }) })
+        ]
+      }
+    ),
     /* @__PURE__ */ jsxRuntime.jsx(
       NavigationButtonsWrapper,
       {
@@ -738,7 +1505,9 @@ var MultiTabFormContent = ({
         onReset: config.showReset || config.enableLocalStorage ? resetForm : void 0,
         isLoading,
         isDraftSaving,
-        config
+        config,
+        isProcessing: processingTab === activeTab,
+        processingError
       }
     ),
     footerChildren.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-4", children: footerChildren }),
@@ -763,7 +1532,7 @@ var MultiTabFormContent = ({
 
 // src/hooks/useFormWrapper.ts
 var useFormWrapper = () => {
-  return chunkWIBCOQPP_cjs.useSmartForm();
+  return chunkWUYS7DMR_cjs.useSmartForm();
 };
 var useExternalFormRegistration = () => {
   const context = React3.useContext(ExternalFormContext);
@@ -785,7 +1554,7 @@ var ExternalFieldProvider = ({
   children,
   registerField
 }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(chunkWIBCOQPP_cjs.FieldDetectionContext.Provider, { value: { registerField }, children });
+  return /* @__PURE__ */ jsxRuntime.jsx(chunkWUYS7DMR_cjs.FieldDetectionContext.Provider, { value: { registerField }, children });
 };
 
 // src/useAutoDetectFields.tsx
@@ -850,50 +1619,177 @@ var FormFieldGroup = ({
 }) => {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `flex flex-wrap gap-2 md:gap-4 mb-4 ${className}`, children });
 };
+var SmartTextArea = ({
+  field,
+  label,
+  rows = 4,
+  placeholder,
+  validation,
+  className = "",
+  required = false,
+  defaultValue,
+  syncValue,
+  info,
+  subLabel,
+  disabled,
+  hidden,
+  charSize,
+  autoFocus,
+  autoComplete,
+  autoCorrect,
+  autoCapitalize,
+  spellCheck,
+  readOnly,
+  wrap,
+  cols,
+  maxLength,
+  minLength,
+  name,
+  dirName,
+  form
+}) => {
+  const { formData } = chunkWUYS7DMR_cjs.useSmartForm();
+  const { value, error, onChange, fieldRef, registerValidation } = chunkWUYS7DMR_cjs.useFormField(field);
+  const fieldDetection = chunkWUYS7DMR_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;
+  React3.useEffect(() => {
+    if (validation && !hasRegistered.current) {
+      hasRegistered.current = true;
+      registerValidation(field, validation);
+    }
+  }, [validation, field, registerValidation]);
+  React3.useEffect(() => {
+    if (fieldDetection?.registerField) {
+      fieldDetection.registerField(field);
+    }
+  }, [field, fieldDetection]);
+  React3.useEffect(() => {
+    if (defaultValue !== void 0 && !hasSetDefault.current && (value === void 0 || value === null || value === "")) {
+      onChange(defaultValue);
+      hasSetDefault.current = true;
+    }
+  }, [defaultValue, value, onChange]);
+  const prevSyncValue = React3.useRef(syncValue);
+  React3.useEffect(() => {
+    if (syncValue !== void 0 && syncValue !== prevSyncValue.current) {
+      onChange(syncValue);
+      prevSyncValue.current = syncValue;
+    }
+  }, [syncValue, onChange]);
+  const getPlaceholder = () => {
+    if (placeholder) return placeholder;
+    if (!label) return `Enter ${field}`;
+    return `Enter ${label.toLowerCase()}`;
+  };
+  const currentLength = value ? String(value).length : 0;
+  const maxChars = charSize || maxLength;
+  const showCharCount = maxChars !== void 0;
+  const handleChange = (e) => {
+    const newValue = e.target.value;
+    if (charSize && newValue.length > charSize) {
+      return;
+    }
+    onChange(newValue);
+  };
+  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: [
+          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 }) })
+        ] }) })
+      ] }),
+      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,
+        {
+          ref: fieldRef,
+          value: value || "",
+          onChange: handleChange,
+          className: `w-full ${error ? "border-destructive" : ""} ${showCharCount ? "pb-8" : ""}`,
+          placeholder: getPlaceholder(),
+          rows,
+          "data-field": field,
+          disabled: isDisabled,
+          autoFocus,
+          autoComplete,
+          autoCorrect,
+          autoCapitalize,
+          spellCheck,
+          readOnly,
+          wrap,
+          cols,
+          maxLength,
+          minLength,
+          name,
+          dirName,
+          form
+        }
+      ),
+      showCharCount && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-2 right-2 pointer-events-none", children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: `text-xs bg-background/80 px-1.5 py-0.5 rounded ${currentLength > (maxChars || 0) ? "text-destructive" : currentLength > (maxChars || 0) * 0.9 ? "text-yellow-600" : "text-muted-foreground"}`, children: [
+        currentLength,
+        "/",
+        maxChars
+      ] }) })
+    ] }),
+    error && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-destructive text-sm mt-1", children: error })
+  ] });
+};
 
 Object.defineProperty(exports, "SmartCheckbox", {
   enumerable: true,
-  get: function () { return chunkNVGQPR3P_cjs.SmartCheckbox; }
+  get: function () { return chunkDRMVY7TX_cjs.SmartCheckbox; }
 });
 Object.defineProperty(exports, "SmartCombobox", {
   enumerable: true,
-  get: function () { return chunkNVGQPR3P_cjs.SmartCombobox; }
+  get: function () { return chunkDRMVY7TX_cjs.SmartCombobox; }
 });
 Object.defineProperty(exports, "SmartDatePicker", {
   enumerable: true,
-  get: function () { return chunkNVGQPR3P_cjs.SmartDatePicker; }
+  get: function () { return chunkDRMVY7TX_cjs.SmartDatePicker; }
 });
 Object.defineProperty(exports, "SmartRadioGroup", {
   enumerable: true,
-  get: function () { return chunkNVGQPR3P_cjs.SmartRadioGroup; }
+  get: function () { return chunkDRMVY7TX_cjs.SmartRadioGroup; }
 });
 Object.defineProperty(exports, "SmartSelect", {
   enumerable: true,
-  get: function () { return chunkNVGQPR3P_cjs.SmartSelect; }
+  get: function () { return chunkDRMVY7TX_cjs.SmartSelect; }
 });
 Object.defineProperty(exports, "SmartTags", {
   enumerable: true,
-  get: function () { return chunkNVGQPR3P_cjs.SmartTags; }
+  get: function () { return chunkDRMVY7TX_cjs.SmartTags; }
 });
 Object.defineProperty(exports, "SmartFormProvider", {
   enumerable: true,
-  get: function () { return chunkWIBCOQPP_cjs.SmartFormProvider; }
+  get: function () { return chunkWUYS7DMR_cjs.SmartFormProvider; }
 });
 Object.defineProperty(exports, "SmartInput", {
   enumerable: true,
-  get: function () { return chunkWIBCOQPP_cjs.SmartInput; }
+  get: function () { return chunkWUYS7DMR_cjs.SmartInput; }
 });
 Object.defineProperty(exports, "useFieldDetection", {
   enumerable: true,
-  get: function () { return chunkWIBCOQPP_cjs.useFieldDetection; }
+  get: function () { return chunkWUYS7DMR_cjs.useFieldDetection; }
 });
 Object.defineProperty(exports, "useFormField", {
   enumerable: true,
-  get: function () { return chunkWIBCOQPP_cjs.useFormField; }
+  get: function () { return chunkWUYS7DMR_cjs.useFormField; }
 });
 Object.defineProperty(exports, "useSmartForm", {
   enumerable: true,
-  get: function () { return chunkWIBCOQPP_cjs.useSmartForm; }
+  get: function () { return chunkWUYS7DMR_cjs.useSmartForm; }
 });
 exports.BaseSmartForm = BaseSmartForm;
 exports.DraftSaveButton = DraftSaveButton;
@@ -908,6 +1804,7 @@ exports.ResetButton = ResetButton;
 exports.Section = Section;
 exports.SimpleFormButtons = SimpleFormButtons;
 exports.SmartForm = SmartForm;
+exports.SmartTextArea = SmartTextArea;
 exports.SubmitButton = SubmitButton;
 exports.Tab = Tab;
 exports.TabIndexProvider = TabIndexProvider;