@algodomain/smart-forms 0.1.0

package/dist/index.js

@@ -0,0 +1,821 @@
+import { Button } from './chunk-6WAEAWTD.js';
+export { SmartCheckbox, SmartDatePicker, SmartRadioGroup, SmartSelect, SmartTags } from './chunk-6WAEAWTD.js';
+import { SmartFormProvider, useSmartForm, FieldDetectionContext, cn } from './chunk-IG4XDQMV.js';
+export { SmartFormProvider, SmartInput, useFieldDetection, useFormField, useSmartForm } from './chunk-IG4XDQMV.js';
+import React3, { createContext, isValidElement, useContext, useState, useMemo, useCallback, useRef, useEffect } 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 { z } from 'zod';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+
+var ToastContainerWrapper = () => /* @__PURE__ */ jsx(
+  ToastContainer,
+  {
+    position: "top-center",
+    autoClose: 2e3,
+    newestOnTop: false,
+    closeOnClick: true,
+    rtl: false,
+    pauseOnFocusLoss: true,
+    draggable: true,
+    pauseOnHover: true,
+    theme: "light",
+    transition: Bounce
+  }
+);
+var FormHeader = ({ title, subTitle, logo }) => {
+  if (!title && !subTitle && !logo) return null;
+  return /* @__PURE__ */ jsx("div", { className: "mb-4 border-b border-gray-200 pb-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center space-x-4", children: [
+    logo && /* @__PURE__ */ jsx("div", { className: "flex-shrink-0", children: logo }),
+    (title || subTitle) && /* @__PURE__ */ jsxs("div", { className: logo ? "text-left" : "text-center", children: [
+      title && /* @__PURE__ */ jsx("h1", { className: "text-xl font-bold text-gray-800", children: title }),
+      subTitle && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm", children: subTitle })
+    ] })
+  ] }) });
+};
+var Section = ({ text }) => {
+  return /* @__PURE__ */ jsxs("div", { className: "relative my-6", children: [
+    /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center", children: /* @__PURE__ */ jsx("div", { className: "w-full border-t border-gray-300" }) }),
+    /* @__PURE__ */ jsx("div", { className: "relative flex justify-center text-sm", children: /* @__PURE__ */ jsx("span", { className: "bg-white px-2 text-gray-500", children: text }) })
+  ] });
+};
+var Footer = ({ children, className = "" }) => {
+  return /* @__PURE__ */ jsx("div", { className: `mt-4 pt-4 border-t border-gray-200 ${className}`, children });
+};
+var BaseSmartForm = ({
+  children,
+  api,
+  method = "POST",
+  submitButtonText = "Submit",
+  submitButtonIcon,
+  allowSaveDraft = false,
+  saveDraftApi,
+  enableLocalStorage = false,
+  storageKey,
+  logFormData = false,
+  onSuccess,
+  onError,
+  transformData,
+  className = "max-w-2xl mx-auto p-6 bg-white",
+  title,
+  subTitle,
+  logo,
+  footer,
+  initialData = {},
+  showReset = false,
+  showProgressBar = true,
+  showTabNumbers = true,
+  authentication
+}) => {
+  const config = {
+    api,
+    method,
+    submitButtonText,
+    submitButtonIcon,
+    allowSaveDraft,
+    saveDraftApi,
+    enableLocalStorage,
+    storageKey,
+    logFormData,
+    onSuccess,
+    onError,
+    transformData,
+    className,
+    title,
+    subTitle,
+    logo,
+    footer,
+    showReset,
+    showProgressBar,
+    showTabNumbers,
+    authentication
+  };
+  return /* @__PURE__ */ jsx(SmartFormProvider, { config, initialData, children: /* @__PURE__ */ jsxs("div", { className, children: [
+    /* @__PURE__ */ jsx(ToastContainerWrapper, {}),
+    /* @__PURE__ */ jsx(FormHeader, { title, subTitle, logo }),
+    children,
+    footer && /* @__PURE__ */ jsx("div", { className: "mt-4 pt-4 border-t border-gray-200", children: footer })
+  ] }) });
+};
+var LoadingSpinner = ({ className = "h-4 w-4" }) => /* @__PURE__ */ jsx("div", { className: `animate-spin rounded-full border-b-2 border-current ${className}` });
+var SubmitButton = ({ onClick, disabled, children, className }) => /* @__PURE__ */ jsx(Button, { onClick, disabled, className, children: disabled ? /* @__PURE__ */ jsxs(Fragment, { children: [
+  /* @__PURE__ */ jsx(LoadingSpinner, {}),
+  "Submitting..."
+] }) : children });
+var DraftSaveButton = ({ onClick, disabled }) => /* @__PURE__ */ jsx(Button, { onClick, disabled, variant: "secondary", children: disabled ? /* @__PURE__ */ jsxs(Fragment, { children: [
+  /* @__PURE__ */ jsx(LoadingSpinner, {}),
+  "Saving..."
+] }) : "Save Draft" });
+var ResetButton = ({ onClick }) => /* @__PURE__ */ jsx(Button, { onClick, variant: "secondary", children: "Reset Form" });
+var NavigationButtons = ({
+  onPrevious,
+  onNext,
+  onSubmit,
+  onSaveDraft,
+  onReset,
+  isLoading,
+  isDraftSaving,
+  config,
+  isFirstTab = false,
+  isLastTab = false
+}) => {
+  const hasResetButton = !!onReset;
+  const hasDraftButton = config.allowSaveDraft && !!onSaveDraft;
+  const hasSubmitOrNextButton = isLastTab || !!onNext;
+  const rightSectionButtons = [hasResetButton, hasDraftButton, hasSubmitOrNextButton].filter(Boolean).length;
+  const hasPreviousButton = !!onPrevious;
+  const isSingleButton = rightSectionButtons === 1 && !hasPreviousButton;
+  return /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center mt-8 pt-6 border-t border-gray-200", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex gap-4", children: onPrevious && /* @__PURE__ */ jsxs(
+      Button,
+      {
+        onClick: onPrevious,
+        disabled: isFirstTab,
+        variant: "secondary",
+        children: [
+          /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" }),
+          "Previous"
+        ]
+      }
+    ) }),
+    /* @__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 }),
+      isLastTab ? /* @__PURE__ */ jsxs(
+        SubmitButton,
+        {
+          onClick: onSubmit,
+          disabled: isLoading,
+          className: isSingleButton ? "w-full" : "",
+          children: [
+            config.submitButtonIcon,
+            config.submitButtonText || "Submit"
+          ]
+        }
+      ) : onNext && /* @__PURE__ */ jsxs(
+        Button,
+        {
+          onClick: onNext,
+          className: isSingleButton ? "w-full" : "",
+          children: [
+            "Next",
+            /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" })
+          ]
+        }
+      )
+    ] })
+  ] });
+};
+var SimpleFormButtons = ({
+  onSubmit,
+  onSaveDraft,
+  onReset,
+  isLoading,
+  isDraftSaving,
+  config
+}) => {
+  const hasResetButton = !!onReset;
+  const hasDraftButton = config.allowSaveDraft && !!onSaveDraft;
+  const hasSubmitButton = true;
+  const totalButtons = [hasResetButton, hasDraftButton, hasSubmitButton].filter(Boolean).length;
+  const isSingleButton = totalButtons === 1;
+  return /* @__PURE__ */ jsx("div", { className: "flex justify-end mt-8 pt-6 border-t border-gray-200", children: /* @__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 }),
+    /* @__PURE__ */ jsxs(
+      SubmitButton,
+      {
+        onClick: onSubmit,
+        disabled: isLoading,
+        className: isSingleButton ? "w-full" : "",
+        children: [
+          config.submitButtonIcon,
+          config.submitButtonText || "Submit"
+        ]
+      }
+    )
+  ] }) });
+};
+var SubmitButton2 = () => {
+  const { isLoading, isDraftSaving, submitForm, saveDraft, resetForm, config } = useSmartForm();
+  const shouldShowReset = config.showReset || config.enableLocalStorage;
+  return /* @__PURE__ */ jsx(
+    SimpleFormButtons,
+    {
+      onSubmit: submitForm,
+      onSaveDraft: config.allowSaveDraft ? saveDraft : void 0,
+      onReset: shouldShowReset ? resetForm : void 0,
+      isLoading,
+      isDraftSaving,
+      config
+    }
+  );
+};
+var SmartForm = (props) => {
+  const { children, ...otherProps } = props;
+  const childArray = React3.Children.toArray(children);
+  const footerChildren = [];
+  const regularChildren = [];
+  childArray.forEach((child) => {
+    if (isValidElement(child) && child.type === Footer) {
+      footerChildren.push(child);
+    } else {
+      regularChildren.push(child);
+    }
+  });
+  return /* @__PURE__ */ jsxs(BaseSmartForm, { ...otherProps, children: [
+    /* @__PURE__ */ jsx("div", { className: "space-y-6", children: regularChildren }),
+    /* @__PURE__ */ jsx(SubmitButton2, {}),
+    footerChildren.length > 0 && /* @__PURE__ */ jsx("div", { className: "space-y-4", children: footerChildren })
+  ] });
+};
+function Tabs({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    TabsPrimitive.Root,
+    {
+      "data-slot": "tabs",
+      className: cn("flex flex-col gap-2", className),
+      ...props
+    }
+  );
+}
+function TabsList({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    TabsPrimitive.List,
+    {
+      "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
+    }
+  );
+}
+function TabsTrigger({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    TabsPrimitive.Trigger,
+    {
+      "data-slot": "tabs-trigger",
+      className: 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
+      ),
+      ...props
+    }
+  );
+}
+function TabsContent({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    TabsPrimitive.Content,
+    {
+      "data-slot": "tabs-content",
+      className: cn("flex-1 outline-none", className),
+      ...props
+    }
+  );
+}
+var TabIndexContext = React3.createContext(null);
+var useTabIndex = () => {
+  const context = useContext(TabIndexContext);
+  return context;
+};
+var TabIndexProvider = ({
+  children,
+  tabIndex
+}) => {
+  return /* @__PURE__ */ jsx(TabIndexContext.Provider, { value: { tabIndex }, children });
+};
+var ExternalFormContext = createContext(null);
+var Tab = ({ children }) => {
+  return /* @__PURE__ */ jsx(Fragment, { children });
+};
+var NavigationButtonsWrapper = ({
+  activeTab,
+  totalTabs,
+  onPrevious,
+  onNext,
+  onSubmit,
+  onSaveDraft,
+  onReset,
+  isLoading,
+  isDraftSaving,
+  config
+}) => {
+  const isLastTab = activeTab === totalTabs - 1;
+  const isFirstTab = activeTab === 0;
+  return /* @__PURE__ */ jsx(
+    NavigationButtons,
+    {
+      onPrevious,
+      onNext,
+      onSubmit,
+      onSaveDraft,
+      onReset,
+      isLoading,
+      isDraftSaving,
+      config,
+      isFirstTab,
+      isLastTab
+    }
+  );
+};
+var MultiTabSmartForm = ({
+  children,
+  showProgressBar = true,
+  showTabNumbers = true,
+  ...baseProps
+}) => {
+  const [activeTab, setActiveTab] = useState(0);
+  const [tabFields, setTabFields] = useState([]);
+  const [completedTabs, setCompletedTabs] = useState(/* @__PURE__ */ new Set());
+  const [validationErrorTabs, setValidationErrorTabs] = useState(/* @__PURE__ */ new Set());
+  const [externalTabFields, setExternalTabFields] = useState({});
+  const { footerChildren, regularChildren } = useMemo(() => {
+    const childArray = React3.Children.toArray(children);
+    const footerChildren2 = [];
+    const regularChildren2 = [];
+    childArray.forEach((child) => {
+      if (isValidElement(child) && child.type === Footer) {
+        footerChildren2.push(child);
+      } else {
+        regularChildren2.push(child);
+      }
+    });
+    return { footerChildren: footerChildren2, regularChildren: regularChildren2 };
+  }, [children]);
+  const tabs = [];
+  React3.Children.forEach(regularChildren, (child) => {
+    if (React3.isValidElement(child) && child.type === Tab) {
+      const props = child.props;
+      if (props.title) {
+        tabs.push(props.title);
+      }
+    }
+  });
+  const findSmartInputs = useCallback((children2) => {
+    const fields = [];
+    React3.Children.forEach(children2, (child) => {
+      if (React3.isValidElement(child)) {
+        const fieldProps = child.props;
+        if (fieldProps && typeof fieldProps === "object" && "field" in fieldProps && fieldProps.field) {
+          fields.push(fieldProps.field);
+        } else if (child.props && typeof child.props === "object" && "children" in child.props) {
+          const nestedFields = findSmartInputs(child.props.children);
+          fields.push(...nestedFields);
+        }
+      }
+    });
+    return fields;
+  }, []);
+  const registerTabFields = useCallback((tabIndex, fields) => {
+    setExternalTabFields((prev) => ({
+      ...prev,
+      [tabIndex]: fields
+    }));
+  }, []);
+  React3.useEffect(() => {
+    const fields = [];
+    React3.Children.forEach(regularChildren, (child) => {
+      if (React3.isValidElement(child) && child.type === Tab) {
+        const tabFieldsInTab = findSmartInputs(child.props.children);
+        fields.push(tabFieldsInTab);
+      }
+    });
+    setTabFields(fields);
+  }, [regularChildren, findSmartInputs]);
+  const getCombinedTabFields = useCallback((tabIndex) => {
+    const internalFields = tabFields[tabIndex] || [];
+    const externalFields = externalTabFields[tabIndex] || [];
+    return [...internalFields, ...externalFields];
+  }, [tabFields, externalTabFields]);
+  const config = {
+    ...baseProps,
+    showProgressBar,
+    showTabNumbers
+  };
+  const handleTabChange = useCallback((index) => {
+    setActiveTab(index);
+  }, []);
+  const handlePrevious = useCallback(() => {
+    if (activeTab > 0) {
+      setActiveTab(activeTab - 1);
+    }
+  }, [activeTab]);
+  const handleNext = useCallback(() => {
+    if (activeTab < tabs.length - 1) {
+      setActiveTab(activeTab + 1);
+    }
+  }, [activeTab, tabs.length]);
+  const externalFormContextValue = useMemo(() => ({
+    registerTabFields,
+    currentTabIndex: activeTab
+  }), [registerTabFields, activeTab]);
+  return /* @__PURE__ */ jsx(BaseSmartForm, { ...baseProps, children: /* @__PURE__ */ jsx(ExternalFormContext.Provider, { value: externalFormContextValue, children: /* @__PURE__ */ jsx(
+    MultiTabFormContent,
+    {
+      activeTab,
+      tabs,
+      getCombinedTabFields,
+      config,
+      onTabChange: handleTabChange,
+      onPrevious: handlePrevious,
+      onNext: handleNext,
+      completedTabs,
+      setCompletedTabs,
+      validationErrorTabs,
+      setValidationErrorTabs,
+      footerChildren,
+      children: regularChildren
+    }
+  ) }) });
+};
+var MultiTabFormContent = ({
+  activeTab,
+  tabs,
+  getCombinedTabFields,
+  config,
+  onTabChange,
+  onPrevious,
+  onNext,
+  completedTabs,
+  setCompletedTabs,
+  validationErrorTabs,
+  setValidationErrorTabs,
+  footerChildren,
+  children
+}) => {
+  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) {
+      const later = () => {
+        clearTimeout(timeout);
+        func(...args);
+      };
+      clearTimeout(timeout);
+      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(() => {
+    const checkTabCompletion = debounce(() => {
+      tabs.forEach((_, tabIndex) => {
+        const tabFieldsInTab = getCombinedTabFields(tabIndex);
+        if (tabFieldsInTab.length === 0) {
+          setCompletedTabs((prev) => {
+            const newSet = new Set(prev);
+            newSet.delete(tabIndex);
+            return newSet;
+          });
+          return;
+        }
+        let allFieldsValid = true;
+        let hasAnyValue = false;
+        for (const field of tabFieldsInTab) {
+          const validation = validationRegistry[field];
+          const fieldValue = formData[field];
+          if (fieldValue !== void 0 && fieldValue !== null && fieldValue !== "") {
+            hasAnyValue = true;
+          }
+          if (validation) {
+            try {
+              validation.parse(fieldValue);
+            } catch (error) {
+              if (error instanceof z.ZodError) {
+                allFieldsValid = false;
+                break;
+              }
+            }
+          }
+        }
+        if (hasAnyValue && allFieldsValid) {
+          setCompletedTabs((prev) => /* @__PURE__ */ new Set([...prev, tabIndex]));
+          setValidationErrorTabs((prev) => {
+            const newSet = new Set(prev);
+            newSet.delete(tabIndex);
+            return newSet;
+          });
+        } else {
+          setCompletedTabs((prev) => {
+            const newSet = new Set(prev);
+            newSet.delete(tabIndex);
+            return newSet;
+          });
+        }
+      });
+    }, 300);
+    checkTabCompletion();
+  }, [formData, validationRegistry, getCombinedTabFields, tabs, setCompletedTabs, setValidationErrorTabs]);
+  const handleTabChangeWithErrorCheck = useCallback((index) => {
+    onTabChange(index);
+  }, [onTabChange]);
+  const handleNextWithValidation = useCallback(() => {
+    const currentTabFields = getCombinedTabFields(activeTab);
+    if (currentTabFields.length > 0) {
+      const allErrors = {};
+      let isValid = true;
+      for (const field of currentTabFields) {
+        const validation = validationRegistry[field];
+        if (validation) {
+          try {
+            validation.parse(formData[field]);
+          } catch (error) {
+            if (error instanceof z.ZodError) {
+              allErrors[field] = error.issues[0]?.message || `Invalid ${field}`;
+              isValid = false;
+            }
+          }
+        }
+      }
+      if (isValid) {
+        setCompletedTabs((prev) => /* @__PURE__ */ new Set([...prev, activeTab]));
+        setValidationErrorTabs((prev) => {
+          const newSet = new Set(prev);
+          newSet.delete(activeTab);
+          return newSet;
+        });
+        onNext();
+      } else {
+        setCompletedTabs((prev) => {
+          const newSet = new Set(prev);
+          newSet.delete(activeTab);
+          return newSet;
+        });
+        setValidationErrorTabs((prev) => /* @__PURE__ */ new Set([...prev, activeTab]));
+        validateFields(currentTabFields);
+        const firstErrorField = currentTabFields.find((field) => allErrors[field]);
+        if (firstErrorField) {
+          setTimeout(() => {
+            const element = document.querySelector(`[data-field="${firstErrorField}"]`);
+            if (element) {
+              element.scrollIntoView({ behavior: "smooth", block: "center" });
+              element.focus();
+            }
+          }, 50);
+        }
+      }
+    } else {
+      onNext();
+    }
+  }, [activeTab, getCombinedTabFields, validateFields, onNext, setCompletedTabs, setValidationErrorTabs, validationRegistry, formData]);
+  const handleSubmitWithValidation = useCallback(async () => {
+    const allErrors = {};
+    let isValid = true;
+    let firstErrorTabIndex = -1;
+    for (const [field, validation] of Object.entries(validationRegistry)) {
+      if (validation && typeof validation.parse === "function") {
+        try {
+          validation.parse(formData[field]);
+        } catch (error) {
+          if (error instanceof z.ZodError) {
+            allErrors[field] = error.issues[0]?.message || `Invalid ${field}`;
+            isValid = false;
+          }
+        }
+      }
+    }
+    setErrors(allErrors);
+    if (isValid) {
+      await submitForm();
+    } else {
+      setValidationErrorTabs(/* @__PURE__ */ new Set());
+      for (let tabIndex = 0; tabIndex < tabs.length; tabIndex++) {
+        const tabFieldsInTab = getCombinedTabFields(tabIndex);
+        const hasErrorsInTab = tabFieldsInTab.some((field) => allErrors[field]);
+        if (hasErrorsInTab) {
+          setValidationErrorTabs((prev) => /* @__PURE__ */ new Set([...prev, tabIndex]));
+          if (firstErrorTabIndex === -1) {
+            firstErrorTabIndex = tabIndex;
+          }
+        }
+      }
+      if (firstErrorTabIndex !== -1) {
+        onTabChange(firstErrorTabIndex);
+        setTimeout(() => {
+          const tabFieldsInTab = getCombinedTabFields(firstErrorTabIndex);
+          const firstErrorField = tabFieldsInTab.find((field) => allErrors[field]);
+          if (firstErrorField) {
+            const element = document.querySelector(`[data-field="${firstErrorField}"]`);
+            if (element) {
+              element.scrollIntoView({ behavior: "smooth", block: "center" });
+              element.focus();
+            }
+          }
+        }, 100);
+      }
+    }
+  }, [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;
+              },
+              className: "space-y-6",
+              style: { minHeight: maxContentHeight > 0 ? `${maxContentHeight}px` : void 0 },
+              children: tabProps.children
+            }
+          ) }) }, 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
+            }
+          ) }, `hidden-${index}`);
+        }
+        return null;
+      }) })
+    ] }),
+    /* @__PURE__ */ jsx(
+      NavigationButtonsWrapper,
+      {
+        activeTab,
+        totalTabs: tabs.length,
+        onPrevious,
+        onNext: handleNextWithValidation,
+        onSubmit: handleSubmitWithValidation,
+        onSaveDraft: config.allowSaveDraft ? saveDraft : void 0,
+        onReset: config.showReset || config.enableLocalStorage ? resetForm : void 0,
+        isLoading,
+        isDraftSaving,
+        config
+      }
+    ),
+    footerChildren.length > 0 && /* @__PURE__ */ jsx("div", { className: "space-y-4", children: footerChildren }),
+    config.showProgressBar && /* @__PURE__ */ jsxs("div", { className: "mt-6", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-sm text-muted-foreground mb-2", children: [
+        /* @__PURE__ */ jsx("span", { children: "Progress" }),
+        /* @__PURE__ */ jsxs("span", { children: [
+          Math.round((activeTab + 1) / tabs.length * 100),
+          "%"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "w-full bg-muted rounded-full h-2", children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "bg-primary h-2 rounded-full transition-all duration-300",
+          style: { width: `${(activeTab + 1) / tabs.length * 100}%` }
+        }
+      ) })
+    ] })
+  ] });
+};
+
+// src/hooks/useFormWrapper.ts
+var useFormWrapper = () => {
+  return useSmartForm();
+};
+var useExternalFormRegistration = () => {
+  const context = useContext(ExternalFormContext);
+  if (!context) {
+    throw new Error("useExternalFormRegistration must be used within a MultiTabSmartForm");
+  }
+  return context;
+};
+var useExternalFormFields = (fields, tabIndex) => {
+  const { registerTabFields } = useExternalFormRegistration();
+  const stableFields = useMemo(() => fields, [fields.join(",")]);
+  useEffect(() => {
+    if (stableFields.length > 0) {
+      registerTabFields(tabIndex, stableFields);
+    }
+  }, [stableFields, tabIndex, registerTabFields]);
+};
+var ExternalFieldProvider = ({
+  children,
+  registerField
+}) => {
+  return /* @__PURE__ */ jsx(FieldDetectionContext.Provider, { value: { registerField }, children });
+};
+
+// src/useAutoDetectFields.tsx
+var useAutoDetectFields = (tabIndex) => {
+  const { registerTabFields } = useExternalFormRegistration();
+  const hasRegistered = useRef(false);
+  const detectedFields = useRef(/* @__PURE__ */ new Set());
+  const registerField = useCallback((fieldName) => {
+    detectedFields.current.add(fieldName);
+    if (!hasRegistered.current) {
+      const fieldsArray = Array.from(detectedFields.current);
+      registerTabFields(tabIndex, fieldsArray);
+      hasRegistered.current = true;
+    }
+  }, [tabIndex, registerTabFields]);
+  return { registerField, ExternalFieldProvider };
+};
+var useExternalTab = () => {
+  const { registerTabFields } = useExternalFormRegistration();
+  const tabIndexContext = useTabIndex();
+  const detectedFields = useRef(/* @__PURE__ */ new Set());
+  const registrationTimeout = useRef(null);
+  const hasRegistered = useRef(false);
+  const tabIndex = tabIndexContext?.tabIndex ?? 0;
+  const registerField = useCallback((fieldName) => {
+    detectedFields.current.add(fieldName);
+    if (registrationTimeout.current) {
+      clearTimeout(registrationTimeout.current);
+    }
+    registrationTimeout.current = setTimeout(() => {
+      if (!hasRegistered.current) {
+        const fieldsArray = Array.from(detectedFields.current);
+        if (fieldsArray.length > 0) {
+          registerTabFields(tabIndex, fieldsArray);
+          hasRegistered.current = true;
+        }
+      }
+    }, 200);
+  }, [tabIndex, registerTabFields]);
+  useEffect(() => {
+    const forceRegistrationTimeout = setTimeout(() => {
+      if (!hasRegistered.current) {
+        const fieldsArray = Array.from(detectedFields.current);
+        if (fieldsArray.length > 0) {
+          registerTabFields(tabIndex, fieldsArray);
+          hasRegistered.current = true;
+        }
+      }
+    }, 1e3);
+    return () => {
+      clearTimeout(forceRegistrationTimeout);
+      if (registrationTimeout.current) {
+        clearTimeout(registrationTimeout.current);
+      }
+    };
+  }, [tabIndex, registerTabFields]);
+  return { registerField, ExternalFieldProvider };
+};
+var FormFieldGroup = ({
+  children,
+  className = ""
+}) => {
+  return /* @__PURE__ */ jsx("div", { className: `flex flex-wrap gap-2 md:gap-4 mb-4 ${className}`, children });
+};
+
+export { BaseSmartForm, DraftSaveButton, ExternalFieldProvider, Footer, FormFieldGroup, FormHeader, LoadingSpinner, MultiTabSmartForm, NavigationButtons, ResetButton, Section, SimpleFormButtons, SmartForm, SubmitButton, Tab, TabIndexProvider, ToastContainerWrapper, useAutoDetectFields, useExternalFormFields, useExternalFormRegistration, useExternalTab, useFormWrapper, useTabIndex };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map