@algodomain/smart-forms 0.1.7 → 0.1.9

package/dist/index.js

@@ -1,13 +1,15 @@
-import { Button } from './chunk-UFRJXDAI.js';
-export { SmartCheckbox, SmartCombobox, SmartDatePicker, SmartRadioGroup, SmartSelect, SmartTags } from './chunk-UFRJXDAI.js';
-import { SmartFormProvider, useSmartForm, FieldDetectionContext, cn } from './chunk-RHECLW3K.js';
-export { SmartFormProvider, SmartInput, useFieldDetection, useFormField, useSmartForm } from './chunk-RHECLW3K.js';
-import React3, { createContext, isValidElement, useContext, useState, useMemo, useCallback, useRef, useEffect } from 'react';
+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 * as React3 from 'react';
+import React3__default, { createContext, isValidElement, useContext, useState, useMemo, useCallback, useEffect, useRef } from 'react';
 import { ToastContainer, Bounce } from 'react-toastify';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { ChevronLeft, ChevronRight, Check, X } from 'lucide-react';
+import { ChevronLeft, ChevronRight, Check, X, InfoIcon } from 'lucide-react';
 import { z } from 'zod';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
+import { motion, AnimatePresence } from 'motion/react';
 
 var ToastContainerWrapper = () => /* @__PURE__ */ jsx(
   ToastContainer,
@@ -124,7 +126,8 @@ var NavigationButtons = ({
   isDraftSaving,
   config,
   isFirstTab = false,
-  isLastTab = false
+  isLastTab = false,
+  disabled = false
 }) => {
   const { formData, config: formConfig } = useSmartForm();
   const isSubmitDisabled = typeof formConfig.submitDisabled === "function" ? formConfig.submitDisabled(formData) : formConfig.submitDisabled || false;
@@ -139,7 +142,7 @@ var NavigationButtons = ({
       Button,
       {
         onClick: onPrevious,
-        disabled: isFirstTab,
+        disabled: isFirstTab || disabled,
         variant: "secondary",
         children: [
           /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" }),
@@ -148,13 +151,13 @@ var NavigationButtons = ({
       }
     ) }),
     /* @__PURE__ */ jsxs("div", { className: isSingleButton ? "w-full" : "flex gap-4", children: [
-      onReset && /* @__PURE__ */ jsx(ResetButton, { onClick: onReset }),
-      config.allowSaveDraft && onSaveDraft && /* @__PURE__ */ jsx(DraftSaveButton, { onClick: onSaveDraft, disabled: isDraftSaving }),
+      onReset && /* @__PURE__ */ jsx(Button, { onClick: onReset, disabled, variant: "secondary", children: "Reset Form" }),
+      config.allowSaveDraft && onSaveDraft && /* @__PURE__ */ jsx(DraftSaveButton, { onClick: onSaveDraft, disabled: isDraftSaving || disabled }),
       isLastTab ? /* @__PURE__ */ jsxs(
         SubmitButton,
         {
           onClick: onSubmit,
-          disabled: isLoading || isSubmitDisabled,
+          disabled: isLoading || isSubmitDisabled || disabled,
           isLoading,
           className: isSingleButton ? "w-full" : "",
           children: [
@@ -166,6 +169,7 @@ var NavigationButtons = ({
         Button,
         {
           onClick: onNext,
+          disabled,
           className: isSingleButton ? "w-full" : "",
           children: [
             "Next",
@@ -226,7 +230,7 @@ var SubmitButton2 = () => {
 };
 var SmartForm = (props) => {
   const { children, ...otherProps } = props;
-  const childArray = React3.Children.toArray(children);
+  const childArray = React3__default.Children.toArray(children);
   const footerChildren = [];
   const regularChildren = [];
   childArray.forEach((child) => {
@@ -242,23 +246,466 @@ var SmartForm = (props) => {
     footerChildren.length > 0 && /* @__PURE__ */ jsx("div", { className: "space-y-4", children: footerChildren })
   ] });
 };
+var MotionHighlightContext = React3.createContext(void 0);
+function useMotionHighlight() {
+  const context = React3.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.useRef(null);
+  React3.useImperativeHandle(ref, () => localRef.current);
+  const [activeValue, setActiveValue] = React3.useState(value ?? defaultValue ?? null);
+  const [boundsState, setBoundsState] = React3.useState(null);
+  const [activeClassNameState, setActiveClassNameState] = React3.useState("");
+  const safeSetActiveValue = React3.useCallback(
+    (id2) => {
+      setActiveValue((prev) => prev === id2 ? prev : id2);
+      if (id2 !== activeValue) onValueChange?.(id2);
+    },
+    [activeValue, onValueChange]
+  );
+  const safeSetBounds = React3.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.useCallback(() => {
+    setBoundsState((prev) => prev === null ? prev : null);
+  }, []);
+  React3.useEffect(() => {
+    if (value !== void 0) setActiveValue(value);
+    else if (defaultValue !== void 0) setActiveValue(defaultValue);
+  }, [value, defaultValue]);
+  const id = React3.useId();
+  React3.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.useCallback(
+    (children2) => {
+      if (mode === "parent") {
+        return /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref: localRef,
+            "data-slot": "motion-highlight-container",
+            className: cn("relative", props?.containerClassName),
+            children: [
+              /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: boundsState && /* @__PURE__ */ jsx(
+                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: cn("bg-muted absolute z-0", className, activeClassNameState)
+                }
+              ) }),
+              children2
+            ]
+          }
+        );
+      }
+      return children2;
+    },
+    [mode, props, boundsState, transition, exitDelay, className, activeClassNameState]
+  );
+  return /* @__PURE__ */ 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.Children.map(children, (child, index) => /* @__PURE__ */ 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.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.useRef(null);
+  React3.useImperativeHandle(ref, () => localRef.current);
+  React3.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.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.cloneElement(
+        element,
+        {
+          key: childValue,
+          ref: localRef,
+          className: cn("relative", element.props.className),
+          ...getNonOverridingDataAttributes(element, {
+            ...dataAttributes,
+            "data-slot": "motion-highlight-item-container"
+          }),
+          ...commonHandlers,
+          ...props
+        },
+        /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: isActive && !isDisabled && /* @__PURE__ */ jsx(
+            motion.div,
+            {
+              layoutId: `transition-background-${contextId}`,
+              "data-slot": "motion-highlight",
+              className: 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__ */ jsx("div", { "data-slot": "motion-highlight-item", className: cn("relative z-[1]", className), ...dataAttributes, children })
+        ] })
+      );
+    }
+    return React3.cloneElement(element, {
+      ref: localRef,
+      ...getNonOverridingDataAttributes(element, {
+        ...dataAttributes,
+        "data-slot": "motion-highlight-item"
+      }),
+      ...commonHandlers
+    });
+  }
+  return enabled ? /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: localRef,
+      "data-slot": "motion-highlight-item-container",
+      className: cn(mode === "children" && "relative", className),
+      ...dataAttributes,
+      ...props,
+      ...commonHandlers,
+      children: [
+        mode === "children" && /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: isActive && !isDisabled && /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            layoutId: `transition-background-${contextId}`,
+            "data-slot": "motion-highlight",
+            className: 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.cloneElement(element, {
+          className: cn("relative z-[1]", element.props.className),
+          ...getNonOverridingDataAttributes(element, {
+            ...dataAttributes,
+            "data-slot": "motion-highlight-item"
+          })
+        })
+      ]
+    },
+    childValue
+  ) : children;
+}
+var TabsConfigContext = React3.createContext({});
+function useTabsConfig() {
+  return React3.useContext(TabsConfigContext);
+}
+var TabsContext = React3.createContext(void 0);
+function useTabs() {
+  const context = React3.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__ */ jsx(
+  const config = React3.useMemo(() => ({ animate, type }), [animate, type]);
+  if (type === "default" && animate) {
+    const [activeValue, setActiveValue] = React3.useState(
+      props.defaultValue ?? void 0
+    );
+    const triggersRef = React3.useRef(/* @__PURE__ */ new Map());
+    const initialSet = React3.useRef(false);
+    const isControlled = props.value !== void 0;
+    React3.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__ */ jsx(TabsConfigContext.Provider, { value: config, children: /* @__PURE__ */ jsx(
+      TabsContext.Provider,
+      {
+        value: {
+          activeValue: props.value ?? activeValue,
+          handleValueChange,
+          registerTrigger
+        },
+        children: /* @__PURE__ */ jsx("div", { "data-slot": "tabs", className: cn("flex flex-col gap-2", className), ...props, children: props.children })
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsx(TabsConfigContext.Provider, { value: config, children: /* @__PURE__ */ jsx(
     TabsPrimitive.Root,
     {
       "data-slot": "tabs",
       className: 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__ */ jsx(
+      MotionHighlight,
+      {
+        controlledItems: true,
+        className: cn("bg-background rounded-sm shadow-sm", activeClassName),
+        value: activeValue,
+        transition,
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            role: "tablist",
+            "data-slot": "tabs-list",
+            className: 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__ */ jsx(
+      UnderlineTabsList,
+      {
+        className,
+        ...props
+      }
+    );
+  }
   return /* @__PURE__ */ jsx(
     TabsPrimitive.List,
     {
@@ -271,10 +718,198 @@ function TabsList({
     }
   );
 }
+var UnderlineTabsContext = React3.createContext(void 0);
+function useUnderlineTabs() {
+  const context = React3.useContext(UnderlineTabsContext);
+  if (!context) {
+    return { registerTrigger: () => {
+    }, activeValue: void 0 };
+  }
+  return context;
+}
+function UnderlineTabsList({
+  children,
+  className,
+  ...props
+}) {
+  const { animate } = useTabsConfig();
+  const tabRefs = React3.useRef([]);
+  const [underlineStyle, setUnderlineStyle] = React3.useState({ left: 0, width: 0 });
+  const listRef = React3.useRef(null);
+  const registerTrigger = React3.useCallback((index, element) => {
+    tabRefs.current[index] = element;
+  }, []);
+  const updateUnderline = React3.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.useLayoutEffect(() => {
+    updateUnderline();
+  }, [updateUnderline]);
+  React3.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.useMemo(
+    () => ({ registerTrigger, activeValue: void 0 }),
+    [registerTrigger]
+  );
+  return /* @__PURE__ */ jsx(UnderlineTabsContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs("div", { ref: listRef, className: "relative", children: [
+    /* @__PURE__ */ jsx(
+      TabsPrimitive.List,
+      {
+        "data-slot": "tabs-list",
+        className: cn(
+          "bg-background relative rounded-none border-b p-0",
+          className
+        ),
+        ...props,
+        children
+      }
+    ),
+    animate && /* @__PURE__ */ jsx(
+      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__ */ 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.useRef(null);
+    React3.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__ */ jsx(MotionHighlightItem, { value: props.value, className: "size-full", children: /* @__PURE__ */ jsx(
+      motion.button,
+      {
+        ref: localRef,
+        "data-slot": "tabs-trigger",
+        role: "tab",
+        onClick: () => handleValueChange(props.value),
+        "data-state": activeValue === props.value ? "active" : "inactive",
+        className: 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.useState(-1);
+    const localRef = React3.useRef(null);
+    React3.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__ */ jsx(
+      TabsPrimitive.Trigger,
+      {
+        ref: localRef,
+        "data-slot": "tabs-trigger",
+        className: 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__ */ jsx(
     TabsPrimitive.Trigger,
     {
@@ -287,10 +922,63 @@ 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.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__ */ jsx(
+      motion.div,
+      {
+        role: "tabpanel",
+        "data-slot": "tabs-content",
+        className: 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__ */ jsx(
     TabsPrimitive.Content,
     {
@@ -300,7 +988,7 @@ function TabsContent({
     }
   );
 }
-var TabIndexContext = React3.createContext(null);
+var TabIndexContext = React3__default.createContext(null);
 var useTabIndex = () => {
   const context = useContext(TabIndexContext);
   return context;
@@ -325,30 +1013,47 @@ var NavigationButtonsWrapper = ({
   onReset,
   isLoading,
   isDraftSaving,
-  config
+  config,
+  isProcessing = false,
+  processingError = null
 }) => {
   const isLastTab = activeTab === totalTabs - 1;
   const isFirstTab = activeTab === 0;
-  return /* @__PURE__ */ 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__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      NavigationButtons,
+      {
+        onPrevious: handlePrevious,
+        onNext: handleNext,
+        onSubmit: handleSubmit,
+        onSaveDraft: handleSaveDraft,
+        onReset: handleReset,
+        isLoading,
+        isDraftSaving,
+        config,
+        isFirstTab,
+        isLastTab,
+        disabled: isProcessing
+      }
+    ),
+    processingError && /* @__PURE__ */ 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] = useState(0);
@@ -356,8 +1061,10 @@ var MultiTabSmartForm = ({
   const [completedTabs, setCompletedTabs] = useState(/* @__PURE__ */ new Set());
   const [validationErrorTabs, setValidationErrorTabs] = useState(/* @__PURE__ */ new Set());
   const [externalTabFields, setExternalTabFields] = useState({});
+  const [processingTab, setProcessingTab] = useState(null);
+  const [processingError, setProcessingError] = useState(null);
   const { footerChildren, regularChildren } = useMemo(() => {
-    const childArray = React3.Children.toArray(children);
+    const childArray = React3__default.Children.toArray(children);
     const footerChildren2 = [];
     const regularChildren2 = [];
     childArray.forEach((child) => {
@@ -370,8 +1077,8 @@ var MultiTabSmartForm = ({
     return { footerChildren: footerChildren2, regularChildren: regularChildren2 };
   }, [children]);
   const tabs = [];
-  React3.Children.forEach(regularChildren, (child) => {
-    if (React3.isValidElement(child) && child.type === Tab) {
+  React3__default.Children.forEach(regularChildren, (child) => {
+    if (React3__default.isValidElement(child) && child.type === Tab) {
       const props = child.props;
       if (props.title) {
         tabs.push(props.title);
@@ -380,8 +1087,8 @@ var MultiTabSmartForm = ({
   });
   const findSmartInputs = useCallback((children2) => {
     const fields = [];
-    React3.Children.forEach(children2, (child) => {
-      if (React3.isValidElement(child)) {
+    React3__default.Children.forEach(children2, (child) => {
+      if (React3__default.isValidElement(child)) {
         const fieldProps = child.props;
         if (fieldProps && typeof fieldProps === "object" && "field" in fieldProps && fieldProps.field) {
           fields.push(fieldProps.field);
@@ -399,10 +1106,10 @@ var MultiTabSmartForm = ({
       [tabIndex]: fields
     }));
   }, []);
-  React3.useEffect(() => {
+  React3__default.useEffect(() => {
     const fields = [];
-    React3.Children.forEach(regularChildren, (child) => {
-      if (React3.isValidElement(child) && child.type === Tab) {
+    React3__default.Children.forEach(regularChildren, (child) => {
+      if (React3__default.isValidElement(child) && child.type === Tab) {
         const tabFieldsInTab = findSmartInputs(child.props.children);
         fields.push(tabFieldsInTab);
       }
@@ -414,6 +1121,19 @@ var MultiTabSmartForm = ({
     const externalFields = externalTabFields[tabIndex] || [];
     return [...internalFields, ...externalFields];
   }, [tabFields, externalTabFields]);
+  const tabCallbacks = useMemo(() => {
+    const callbacks = [];
+    React3__default.Children.forEach(regularChildren, (child) => {
+      if (React3__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,
@@ -451,6 +1171,14 @@ var MultiTabSmartForm = ({
       validationErrorTabs,
       setValidationErrorTabs,
       footerChildren,
+      animateTabs,
+      tabType,
+      tabCallbacks,
+      processingTab,
+      setProcessingTab,
+      processingError,
+      setProcessingError,
+      disableManualTabSwitch,
       children: regularChildren
     }
   ) }) });
@@ -468,11 +1196,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 } = useSmartForm();
-  const [maxContentHeight, setMaxContentHeight] = useState(0);
-  const contentRefs = useRef([]);
   const debounce = (func, wait) => {
     let timeout;
     return function executedFunction(...args) {
@@ -484,27 +1218,7 @@ var MultiTabFormContent = ({
       timeout = setTimeout(later, wait);
     };
   };
-  React3.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.useEffect(() => {
+  React3__default.useEffect(() => {
     const checkTabCompletion = debounce(() => {
       tabs.forEach((_, tabIndex) => {
         const tabFieldsInTab = getCombinedTabFields(tabIndex);
@@ -554,9 +1268,12 @@ var MultiTabFormContent = ({
     checkTabCompletion();
   }, [formData, validationRegistry, getCombinedTabFields, tabs, setCompletedTabs, setValidationErrorTabs]);
   const handleTabChangeWithErrorCheck = useCallback((index) => {
+    if (disableManualTabSwitch && index > activeTab) {
+      return;
+    }
     onTabChange(index);
-  }, [onTabChange]);
-  const handleNextWithValidation = useCallback(() => {
+  }, [onTabChange, disableManualTabSwitch, activeTab]);
+  const handleNextWithValidation = useCallback(async () => {
     const currentTabFields = getCombinedTabFields(activeTab);
     if (currentTabFields.length > 0) {
       const allErrors = {};
@@ -581,7 +1298,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);
@@ -602,9 +1338,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 = useCallback(async () => {
     const allErrors = {};
     let isValid = true;
@@ -654,55 +1409,70 @@ var MultiTabFormContent = ({
   }, [submitForm, getCombinedTabFields, onTabChange, tabs.length, validationRegistry, formData, setErrors, setValidationErrorTabs]);
   const activeTabValue = tabs[activeTab] || tabs[0] || "";
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(Tabs, { value: activeTabValue, onValueChange: (value) => {
-      const newIndex = tabs.indexOf(value);
-      if (newIndex !== -1) {
-        handleTabChangeWithErrorCheck(newIndex);
-      }
-    }, className: "w-full", children: [
-      /* @__PURE__ */ jsx(TabsList, { className: `grid w-full mb-8`, style: { gridTemplateColumns: `repeat(${tabs.length}, 1fr)` }, children: tabs.map((tab, index) => /* @__PURE__ */ jsxs(TabsTrigger, { value: tab, className: "flex items-center gap-2", children: [
-        config.showTabNumbers && /* @__PURE__ */ jsxs("span", { children: [
-          index + 1,
-          "."
-        ] }),
-        tab,
-        completedTabs.has(index) && /* @__PURE__ */ jsx(Check, { className: "h-4 w-4 text-green-600" }),
-        validationErrorTabs.has(index) && /* @__PURE__ */ jsx(X, { className: "h-4 w-4 text-red-600" })
-      ] }, tab)) }),
-      React3.Children.map(children, (child, index) => {
-        if (React3.isValidElement(child) && child.type === Tab) {
-          const tabProps = child.props;
-          return /* @__PURE__ */ jsx(TabsContent, { value: tabProps.title, children: /* @__PURE__ */ jsx(TabIndexProvider, { tabIndex: index, children: /* @__PURE__ */ jsx(
-            "div",
-            {
-              ref: (el) => {
-                contentRefs.current[index] = el;
+    /* @__PURE__ */ 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__ */ 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__ */ jsxs(
+              TabsTrigger,
+              {
+                value: tab,
+                disabled: isFutureTab,
+                className: `flex items-center gap-2 ${isFutureTab ? "opacity-50 cursor-not-allowed" : ""}`,
+                children: [
+                  config.showTabNumbers && /* @__PURE__ */ jsxs("span", { children: [
+                    index + 1,
+                    "."
+                  ] }),
+                  tab,
+                  completedTabs.has(index) && /* @__PURE__ */ jsx(Check, { className: "h-4 w-4 text-green-600" }),
+                  validationErrorTabs.has(index) && /* @__PURE__ */ jsx(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__default.Children.map(children, (child, index) => {
+            if (React3__default.isValidElement(child) && child.type === Tab) {
+              const tabProps = child.props;
+              const isCurrentlyProcessing = processingTab === index;
+              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 })
+                  }
+                )
+              ] }) }) }, index);
             }
-          ) }) }, index);
-        }
-        return null;
-      }),
-      /* @__PURE__ */ jsx("div", { style: { position: "absolute", left: "-9999px", top: "-9999px", visibility: "hidden" }, children: React3.Children.map(children, (child, index) => {
-        if (React3.isValidElement(child) && child.type === Tab) {
-          const tabProps = child.props;
-          return /* @__PURE__ */ jsx(TabIndexProvider, { tabIndex: index, children: /* @__PURE__ */ jsx(
-            "div",
-            {
-              ref: (el) => {
-                contentRefs.current[index] = el;
-              },
-              className: "space-y-6",
-              children: tabProps.children
+            return null;
+          }),
+          /* @__PURE__ */ jsx("div", { style: { position: "absolute", left: "-9999px", top: "-9999px", visibility: "hidden" }, children: React3__default.Children.map(children, (child, index) => {
+            if (React3__default.isValidElement(child) && child.type === Tab) {
+              const tabProps = child.props;
+              return /* @__PURE__ */ jsx(TabIndexProvider, { tabIndex: index, children: /* @__PURE__ */ jsx("div", { className: "space-y-6", children: tabProps.children }) }, `hidden-${index}`);
             }
-          ) }, `hidden-${index}`);
-        }
-        return null;
-      }) })
-    ] }),
+            return null;
+          }) })
+        ]
+      }
+    ),
     /* @__PURE__ */ jsx(
       NavigationButtonsWrapper,
       {
@@ -715,7 +1485,9 @@ var MultiTabFormContent = ({
         onReset: config.showReset || config.enableLocalStorage ? resetForm : void 0,
         isLoading,
         isDraftSaving,
-        config
+        config,
+        isProcessing: processingTab === activeTab,
+        processingError
       }
     ),
     footerChildren.length > 0 && /* @__PURE__ */ jsx("div", { className: "space-y-4", children: footerChildren }),
@@ -827,7 +1599,134 @@ var FormFieldGroup = ({
 }) => {
   return /* @__PURE__ */ 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 } = useSmartForm();
+  const { value, error, onChange, fieldRef, registerValidation } = useFormField(field);
+  const fieldDetection = useFieldDetection();
+  const hasRegistered = useRef(false);
+  const hasSetDefault = useRef(false);
+  const isDisabled = typeof disabled === "function" ? disabled(formData) : disabled || false;
+  const isHidden = typeof hidden === "function" ? hidden(formData) : hidden || false;
+  if (isHidden) return null;
+  useEffect(() => {
+    if (validation && !hasRegistered.current) {
+      hasRegistered.current = true;
+      registerValidation(field, validation);
+    }
+  }, [validation, field, registerValidation]);
+  useEffect(() => {
+    if (fieldDetection?.registerField) {
+      fieldDetection.registerField(field);
+    }
+  }, [field, fieldDetection]);
+  useEffect(() => {
+    if (defaultValue !== void 0 && !hasSetDefault.current && (value === void 0 || value === null || value === "")) {
+      onChange(defaultValue);
+      hasSetDefault.current = true;
+    }
+  }, [defaultValue, value, onChange]);
+  const prevSyncValue = useRef(syncValue);
+  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__ */ jsxs("div", { className: `flex-1 min-w-0 ${className}`, children: [
+    label && /* @__PURE__ */ jsxs("div", { className: "mb-1", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+        /* @__PURE__ */ jsxs(Label, { className: "text-sm font-medium text-foreground", children: [
+          label,
+          " ",
+          required && /* @__PURE__ */ jsx("span", { className: "text-destructive", children: "*" })
+        ] }),
+        info && /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+          /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(InfoIcon, { className: "h-4 w-4 text-muted-foreground cursor-pointer" }) }),
+          /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { className: "max-w-xs", children: info }) })
+        ] }) })
+      ] }),
+      subLabel && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-1", children: subLabel })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx(
+        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__ */ jsx("div", { className: "absolute bottom-2 right-2 pointer-events-none", children: /* @__PURE__ */ 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__ */ jsx("p", { className: "text-destructive text-sm mt-1", children: error })
+  ] });
+};
 
-export { BaseSmartForm, DraftSaveButton, ExternalFieldProvider, Footer, FormFieldGroup, FormHeader, LoadingSpinner, MultiTabSmartForm, NavigationButtons, ResetButton, Section, SimpleFormButtons, SmartForm, SubmitButton, Tab, TabIndexProvider, ToastContainerWrapper, useAutoDetectFields, useExternalFormFields, useExternalFormRegistration, useExternalTab, useFormWrapper, useTabIndex };
+export { BaseSmartForm, DraftSaveButton, ExternalFieldProvider, Footer, FormFieldGroup, FormHeader, LoadingSpinner, MultiTabSmartForm, NavigationButtons, ResetButton, Section, SimpleFormButtons, SmartForm, SmartTextArea, SubmitButton, Tab, TabIndexProvider, ToastContainerWrapper, useAutoDetectFields, useExternalFormFields, useExternalFormRegistration, useExternalTab, useFormWrapper, useTabIndex };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map