@algodomain/smart-forms 0.1.9 → 0.1.10

package/README.md

@@ -220,6 +220,7 @@ Multi-step form with tabs and progress tracking.
 |------|------|---------|-------------|
 | `animateTabs` | `boolean` | `false` | Enable tab transition animations |
 | `tabType` | `'underline' \| 'default'` | `'default'` | Tab styling variant |
+| `disableManualTabSwitch` | `boolean` | `false` | Prevent manual clicking on future tabs. Users can still navigate forward via Next button and go back to previous tabs. |
 
 **Tab Component Props:**
 
@@ -557,6 +558,7 @@ All form components (`SmartForm`, `MultiTabSmartForm`, `BaseSmartForm`) support
 | `showTabNumbers` | `boolean` | `true` | Show tab numbers (MultiTab only) |
 | `animateTabs` | `boolean` | `false` | Enable tab animations (MultiTab only) |
 | `tabType` | `'underline' \| 'default'` | `'default'` | Tab styling variant (MultiTab only) |
+| `disableManualTabSwitch` | `boolean` | `false` | Prevent manual clicking on future tabs (MultiTab only) |
 | `authentication` | `AuthenticationConfig` | - | Authentication configuration |
 | `includeQueryParams` | `boolean` | `false` | Include URL query parameters |
 | `queryParamsToInclude` | `string[]` | - | Filter specific query params |
@@ -678,6 +680,47 @@ All field components support these props:
 
 ## 🚀 Advanced Features
 
+### Disable Manual Tab Switching
+
+Control whether users can manually click on future tabs. When enabled, users must complete each step sequentially using the Next button, but can still go back to previous tabs.
+
+**Usage:**
+
+```tsx
+<MultiTabSmartForm
+  api="/api/submit"
+  disableManualTabSwitch={true}
+>
+  <Tab title="Step 1">
+    <SmartInput field="name" label="Name" required />
+  </Tab>
+  
+  <Tab title="Step 2">
+    <SmartInput field="email" label="Email" required />
+  </Tab>
+  
+  <Tab title="Step 3">
+    <SmartInput field="phone" label="Phone" required />
+  </Tab>
+</MultiTabSmartForm>
+```
+
+**Behavior:**
+- When `disableManualTabSwitch={true}`:
+  - Users **cannot** click on tabs ahead of the current tab
+  - Future tabs appear disabled (grayed out)
+  - Users **can** click on previous tabs to go back
+  - Users **can** navigate forward using the Next button (after validation)
+- When `disableManualTabSwitch={false}` (default):
+  - Users can freely click on any tab
+  - All tabs are clickable
+
+**Use Cases:**
+- Enforce sequential completion of multi-step forms
+- Ensure users complete each step before proceeding
+- Prevent skipping validation steps
+- Guide users through a structured workflow
+
 ### Tab Callbacks and Processing Overlays
 
 In MultiTabSmartForm, you can add custom logic before moving to the next tab using the `onNext` callback. This is useful for async operations like API calls or data processing.
@@ -1732,6 +1775,7 @@ export function JobApplicationForm() {
       showTabNumbers={true}
       animateTabs={true}
       tabType="underline"
+      disableManualTabSwitch={true}
       allowSaveDraft={true}
       enableLocalStorage={true}
       storageKey="job-application"

package/dist/index.cjs

@@ -79,7 +79,7 @@ var BaseSmartForm = ({
   onSuccess,
   onError,
   transformData,
-  className = "max-w-2xl mx-auto p-6 bg-white",
+  className = "p-6 bg-white",
   title,
   subTitle,
   logo,
@@ -510,16 +510,16 @@ function MotionHighlightItem({
   };
   const commonHandlers = hover ? {
     onMouseEnter: (e) => {
-      setActiveValue(childValue);
+      if (!isDisabled) setActiveValue(childValue);
       element.props.onMouseEnter?.(e);
     },
     onMouseLeave: (e) => {
-      setActiveValue(null);
+      if (!isDisabled) setActiveValue(null);
       element.props.onMouseLeave?.(e);
     }
   } : {
     onClick: (e) => {
-      setActiveValue(childValue);
+      if (!isDisabled) setActiveValue(childValue);
       element.props.onClick?.(e);
     }
   };
@@ -879,16 +879,18 @@ function TabsTrigger({
       onAnimationEnd,
       onAnimationIteration,
       onTransitionEnd,
+      disabled,
       ...motionButtonProps
     } = props;
-    return /* @__PURE__ */ jsxRuntime.jsx(MotionHighlightItem, { value: props.value, className: "size-full", children: /* @__PURE__ */ jsxRuntime.jsx(
+    return /* @__PURE__ */ jsxRuntime.jsx(MotionHighlightItem, { value: props.value, className: "size-full", disabled, children: /* @__PURE__ */ jsxRuntime.jsx(
       react.motion.button,
       {
         ref: localRef,
         "data-slot": "tabs-trigger",
         role: "tab",
-        onClick: () => handleValueChange(props.value),
+        onClick: () => !disabled && handleValueChange(props.value),
         "data-state": activeValue === props.value ? "active" : "inactive",
+        disabled,
         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
@@ -1083,6 +1085,7 @@ var MultiTabSmartForm = ({
   const [externalTabFields, setExternalTabFields] = React3.useState({});
   const [processingTab, setProcessingTab] = React3.useState(null);
   const [processingError, setProcessingError] = React3.useState(null);
+  const [maxUnlockedTab, setMaxUnlockedTab] = React3.useState(0);
   const { footerChildren, regularChildren } = React3.useMemo(() => {
     const childArray = React3__namespace.default.Children.toArray(children);
     const footerChildren2 = [];
@@ -1199,6 +1202,8 @@ var MultiTabSmartForm = ({
       processingError,
       setProcessingError,
       disableManualTabSwitch,
+      maxUnlockedTab,
+      setMaxUnlockedTab,
       children: regularChildren
     }
   ) }) });
@@ -1224,7 +1229,9 @@ var MultiTabFormContent = ({
   setProcessingTab,
   processingError,
   setProcessingError,
-  disableManualTabSwitch = false
+  disableManualTabSwitch = false,
+  maxUnlockedTab,
+  setMaxUnlockedTab
 }) => {
   const { isLoading, isDraftSaving, submitForm, saveDraft, resetForm, validateFields, formData, validationRegistry, setErrors } = chunkWUYS7DMR_cjs.useSmartForm();
   const debounce = (func, wait) => {
@@ -1288,11 +1295,11 @@ var MultiTabFormContent = ({
     checkTabCompletion();
   }, [formData, validationRegistry, getCombinedTabFields, tabs, setCompletedTabs, setValidationErrorTabs]);
   const handleTabChangeWithErrorCheck = React3.useCallback((index) => {
-    if (disableManualTabSwitch && index > activeTab) {
+    if (disableManualTabSwitch && index > maxUnlockedTab) {
       return;
     }
     onTabChange(index);
-  }, [onTabChange, disableManualTabSwitch, activeTab]);
+  }, [onTabChange, disableManualTabSwitch, maxUnlockedTab]);
   const handleNextWithValidation = React3.useCallback(async () => {
     const currentTabFields = getCombinedTabFields(activeTab);
     if (currentTabFields.length > 0) {
@@ -1329,6 +1336,7 @@ var MultiTabFormContent = ({
             }
             setProcessingTab(null);
             setProcessingError(null);
+            setMaxUnlockedTab((prev) => Math.max(prev, activeTab + 1));
             onNext();
           } catch (error) {
             setProcessingTab(null);
@@ -1336,6 +1344,7 @@ var MultiTabFormContent = ({
             setProcessingError(errorMessage);
           }
         } else {
+          setMaxUnlockedTab((prev) => Math.max(prev, activeTab + 1));
           onNext();
         }
       } else {
@@ -1369,6 +1378,7 @@ var MultiTabFormContent = ({
           }
           setProcessingTab(null);
           setProcessingError(null);
+          setMaxUnlockedTab((prev) => Math.max(prev, activeTab + 1));
           onNext();
         } catch (error) {
           setProcessingTab(null);
@@ -1376,10 +1386,11 @@ var MultiTabFormContent = ({
           setProcessingError(errorMessage);
         }
       } else {
+        setMaxUnlockedTab((prev) => Math.max(prev, activeTab + 1));
         onNext();
       }
     }
-  }, [activeTab, getCombinedTabFields, validateFields, onNext, setCompletedTabs, setValidationErrorTabs, validationRegistry, formData, tabCallbacks, setProcessingTab, setProcessingError]);
+  }, [activeTab, getCombinedTabFields, validateFields, onNext, setCompletedTabs, setValidationErrorTabs, validationRegistry, formData, tabCallbacks, setProcessingTab, setProcessingError, setMaxUnlockedTab]);
   const handleSubmitWithValidation = React3.useCallback(async () => {
     const allErrors = {};
     let isValid = true;
@@ -1443,8 +1454,8 @@ var MultiTabFormContent = ({
         animate: animateTabs,
         type: tabType,
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(TabsList, { className: `grid w-full mb-8`, style: { gridTemplateColumns: `repeat(${tabs.length}, 1fr)` }, children: tabs.map((tab, index) => {
-            const isFutureTab = disableManualTabSwitch && index > activeTab;
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full mb-8", children: /* @__PURE__ */ jsxRuntime.jsx(TabsList, { className: `grid w-full`, style: { gridTemplateColumns: `repeat(${tabs.length}, 1fr)` }, children: tabs.map((tab, index) => {
+            const isFutureTab = disableManualTabSwitch && index > maxUnlockedTab;
             return /* @__PURE__ */ jsxRuntime.jsxs(
               TabsTrigger,
               {
@@ -1463,7 +1474,7 @@ var MultiTabFormContent = ({
               },
               tab
             );
-          }) }),
+          }) }) }),
           React3__namespace.default.Children.map(children, (child, index) => {
             if (React3__namespace.default.isValidElement(child) && child.type === Tab) {
               const tabProps = child.props;