@moontra/moonui-pro 2.8.0 → 2.8.2

package/dist/index.mjs

@@ -60056,16 +60056,61 @@ var FormWizardProvider = ({
   }, [stepData, currentStep, completedSteps, persistData, storageKey]);
   const validateCurrentStep = useCallback(async () => {
     const step = steps[currentStep];
+    if (typeof window !== "undefined") {
+      const stepElement = document.querySelector("[data-wizard-step-content]");
+      if (stepElement) {
+        const requiredInputs = stepElement.querySelectorAll("input[required], select[required], textarea[required]");
+        const emptyFields = [];
+        requiredInputs.forEach((input) => {
+          const htmlInput = input;
+          if (!htmlInput.value || htmlInput.value.trim() === "") {
+            const label = document.querySelector(`label[for="${htmlInput.id}"]`);
+            const fieldName = label ? label.textContent?.replace(" *", "") || "Field" : htmlInput.name || htmlInput.id || "Field";
+            emptyFields.push(fieldName);
+          }
+        });
+        const requiredCheckboxes = stepElement.querySelectorAll('input[type="checkbox"][required]');
+        requiredCheckboxes.forEach((checkbox) => {
+          const htmlCheckbox = checkbox;
+          if (!htmlCheckbox.checked) {
+            const label = document.querySelector(`label[for="${htmlCheckbox.id}"]`);
+            const fieldName = label ? label.textContent?.replace(" *", "") || "Checkbox" : htmlCheckbox.name || htmlCheckbox.id || "Checkbox";
+            emptyFields.push(fieldName);
+          }
+        });
+        if (emptyFields.length > 0) {
+          setError(`Please fill in the following required fields: ${emptyFields.join(", ")}`);
+          return false;
+        }
+      }
+    }
     if (!step.validation)
       return true;
     setIsLoading(true);
     setError(null);
     try {
-      const isValid = await step.validation();
-      if (!isValid) {
-        setError("Please complete all required fields before proceeding");
+      const result = await step.validation();
+      if (typeof result === "boolean") {
+        if (!result) {
+          setError("Please complete all required fields before proceeding");
+        }
+        return result;
+      }
+      if (typeof result === "object" && result !== null && "isValid" in result) {
+        const validationResult = result;
+        if (!validationResult.isValid) {
+          if (validationResult.error) {
+            setError(validationResult.error);
+          } else if (validationResult.errors && Array.isArray(validationResult.errors)) {
+            setError(validationResult.errors.join(", "));
+          } else {
+            setError("Please complete all required fields before proceeding");
+          }
+        }
+        return validationResult.isValid;
       }
-      return isValid;
+      setError("Invalid validation response");
+      return false;
     } catch (err) {
       setError(err instanceof Error ? err.message : "Validation failed");
       return false;
@@ -60193,55 +60238,129 @@ var FormWizardProgress = ({
   const { steps, currentStep, isStepCompleted, isStepAccessible, error: error42 } = useFormWizard();
   if (progressType === "linear") {
     return /* @__PURE__ */ jsx("div", { className: cn(
-      "relative",
-      orientation === "vertical" ? "flex flex-col space-y-8" : "flex items-center justify-between",
+      "relative w-full",
+      orientation === "vertical" ? "flex flex-col space-y-8" : "",
       className
-    ), children: steps.map((step, index2) => {
+    ), children: orientation === "horizontal" ? /* @__PURE__ */ jsx("div", { className: "relative w-full", children: /* @__PURE__ */ jsx("div", { className: "relative flex items-start justify-between w-full", children: steps.map((step, index2) => {
       const isActive2 = index2 === currentStep;
       const isCompleted = isStepCompleted(index2);
       const isAccessible = isStepAccessible(index2);
       const hasError = isActive2 && error42;
       const StepIcon = typeof step.icon === "function" ? step.icon({ isActive: isActive2, isCompleted }) : step.icon;
-      return /* @__PURE__ */ jsx(t__default.Fragment, { children: /* @__PURE__ */ jsxs("div", { className: cn(
-        "relative flex items-center",
-        orientation === "vertical" ? "w-full" : "flex-1"
-      ), children: [
-        /* @__PURE__ */ jsx(
-          motion.div,
-          {
-            initial: { scale: 0.8 },
-            animate: { scale: isActive2 ? 1.1 : 1 },
-            className: cn(
-              "relative z-20 flex items-center justify-center rounded-full border-2 transition-all duration-300",
-              stepIconPosition === "inside" ? "w-12 h-12" : "w-10 h-10",
-              isActive2 && "border-primary bg-primary text-primary-foreground shadow-lg",
-              isCompleted && !isActive2 && "border-primary bg-primary text-primary-foreground",
-              !isActive2 && !isCompleted && isAccessible && "border-muted-foreground/50 bg-background text-muted-foreground hover:border-muted-foreground",
-              !isAccessible && "border-muted bg-muted text-muted-foreground cursor-not-allowed opacity-50",
-              hasError && "border-destructive bg-destructive text-destructive-foreground"
-            ),
-            children: hasError ? errorStepIcon : isCompleted && !isActive2 ? completedStepIcon : isActive2 && activeStepIcon ? activeStepIcon : StepIcon ? /* @__PURE__ */ jsx("span", { className: "w-5 h-5 flex items-center justify-center", children: StepIcon }) : showStepNumbers ? /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: index2 + 1 }) : /* @__PURE__ */ jsx(Circle, { className: "w-4 h-4" })
-          }
-        ),
-        showStepTitles && /* @__PURE__ */ jsxs("div", { className: cn(
-          "absolute whitespace-nowrap",
-          orientation === "vertical" ? "left-16 top-1/2 -translate-y-1/2" : "top-full mt-2 left-1/2 -translate-x-1/2 text-center"
-        ), children: [
+      return /* @__PURE__ */ jsxs("div", { className: "relative flex-1 flex flex-col items-center", children: [
+        showStepTitles && /* @__PURE__ */ jsxs("div", { className: "text-center mb-3 min-h-[40px] px-2", children: [
           /* @__PURE__ */ jsx("p", { className: cn(
-            "text-sm font-medium transition-colors",
+            "text-sm font-semibold transition-colors",
             isActive2 && "text-primary",
             isCompleted && !isActive2 && "text-primary",
             !isActive2 && !isCompleted && "text-muted-foreground"
           ), children: step.title }),
           step.description && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-1", children: step.description })
         ] }),
-        index2 < steps.length - 1 && /* @__PURE__ */ jsx("div", { className: cn(
-          "absolute transition-all duration-500",
-          orientation === "vertical" ? "top-12 left-5 w-0.5 h-8" : "left-12 right-0 top-1/2 -translate-y-1/2 h-0.5",
-          isCompleted ? "bg-primary" : "bg-muted"
-        ) })
-      ] }) }, step.id);
-    }) });
+        /* @__PURE__ */ jsxs("div", { className: "relative flex items-center w-full", children: [
+          index2 < steps.length - 1 && /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "absolute left-1/2 w-full h-[2px]",
+              style: {
+                width: "calc(100% + 24px)",
+                marginLeft: "24px"
+              },
+              children: [
+                /* @__PURE__ */ jsx("div", { className: "h-full bg-gray-200 dark:bg-gray-700" }),
+                index2 < currentStep && /* @__PURE__ */ jsx(
+                  motion.div,
+                  {
+                    className: "absolute inset-0 bg-primary",
+                    initial: { scaleX: 0 },
+                    animate: { scaleX: 1 },
+                    transition: { duration: 0.5, delay: index2 * 0.1 },
+                    style: { transformOrigin: "left" }
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            motion.div,
+            {
+              initial: { scale: 0.8 },
+              animate: { scale: isActive2 ? 1.05 : 1 },
+              transition: { duration: 0.2 },
+              className: cn(
+                "relative z-10 flex items-center justify-center rounded-full transition-all duration-300 mx-auto",
+                "w-12 h-12 border-2",
+                isActive2 && "border-primary bg-primary text-primary-foreground shadow-lg shadow-primary/20",
+                isCompleted && !isActive2 && "border-primary bg-primary text-primary-foreground",
+                !isActive2 && !isCompleted && isAccessible && "border-gray-300 bg-background text-gray-500 hover:border-gray-400 dark:border-gray-600 dark:text-gray-400",
+                !isAccessible && "border-gray-200 bg-gray-50 text-gray-400 cursor-not-allowed dark:border-gray-700 dark:bg-gray-900 dark:text-gray-600",
+                hasError && "border-destructive bg-destructive text-destructive-foreground"
+              ),
+              children: hasError ? errorStepIcon : isCompleted && !isActive2 ? completedStepIcon : isActive2 && activeStepIcon ? activeStepIcon : StepIcon ? /* @__PURE__ */ jsx("span", { className: "w-5 h-5 flex items-center justify-center", children: StepIcon }) : showStepNumbers ? /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold", children: index2 + 1 }) : /* @__PURE__ */ jsx(Circle, { className: "w-4 h-4" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "mt-3", children: /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground font-medium", children: [
+          "Step ",
+          index2 + 1,
+          " of ",
+          steps.length
+        ] }) })
+      ] }, step.id);
+    }) }) }) : (
+      // Vertical orientation
+      /* @__PURE__ */ jsxs("div", { className: "relative pl-12", children: [
+        steps.length > 1 && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("div", { className: "absolute left-6 top-8 bottom-8 w-[2px] bg-gray-200 dark:bg-gray-700" }),
+          /* @__PURE__ */ jsx(
+            motion.div,
+            {
+              className: "absolute left-6 top-8 w-[2px] bg-primary",
+              initial: { height: 0 },
+              animate: {
+                height: `${currentStep / (steps.length - 1) * (100 - 16)}%`
+              },
+              transition: { duration: 0.5 }
+            }
+          )
+        ] }),
+        steps.map((step, index2) => {
+          const isActive2 = index2 === currentStep;
+          const isCompleted = isStepCompleted(index2);
+          const isAccessible = isStepAccessible(index2);
+          const hasError = isActive2 && error42;
+          const StepIcon = typeof step.icon === "function" ? step.icon({ isActive: isActive2, isCompleted }) : step.icon;
+          return /* @__PURE__ */ jsxs("div", { className: "relative flex items-center mb-8 last:mb-0", children: [
+            /* @__PURE__ */ jsx(
+              motion.div,
+              {
+                initial: { scale: 0.8 },
+                animate: { scale: isActive2 ? 1.05 : 1 },
+                className: cn(
+                  "absolute left-0 z-20 flex items-center justify-center rounded-full border-2 transition-all duration-300",
+                  "w-12 h-12",
+                  isActive2 && "border-primary bg-primary text-primary-foreground shadow-lg",
+                  isCompleted && !isActive2 && "border-primary bg-primary text-primary-foreground",
+                  !isActive2 && !isCompleted && isAccessible && "border-gray-300 bg-background text-gray-500 hover:border-gray-400",
+                  !isAccessible && "border-gray-200 bg-gray-50 text-gray-400 cursor-not-allowed",
+                  hasError && "border-destructive bg-destructive text-destructive-foreground"
+                ),
+                children: hasError ? errorStepIcon : isCompleted && !isActive2 ? completedStepIcon : isActive2 && activeStepIcon ? activeStepIcon : StepIcon ? /* @__PURE__ */ jsx("span", { className: "w-5 h-5 flex items-center justify-center", children: StepIcon }) : showStepNumbers ? /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold", children: index2 + 1 }) : /* @__PURE__ */ jsx(Circle, { className: "w-4 h-4" })
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: "ml-16", children: showStepTitles && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("p", { className: cn(
+                "text-sm font-semibold transition-colors",
+                isActive2 && "text-primary",
+                isCompleted && !isActive2 && "text-primary",
+                !isActive2 && !isCompleted && "text-muted-foreground"
+              ), children: step.title }),
+              step.description && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-1", children: step.description })
+            ] }) })
+          ] }, step.id);
+        })
+      ] })
+    ) });
   }
   if (progressType === "dots") {
     return /* @__PURE__ */ jsx("div", { className: cn("flex items-center justify-center space-x-2", className), children: steps.map((_, index2) => {
@@ -60265,28 +60384,28 @@ var FormWizardProgress = ({
   }
   if (progressType === "circular") {
     const progress = (currentStep + 1) / steps.length * 100;
-    const circumference = 2 * Math.PI * 40;
+    const circumference = 2 * Math.PI * 45;
     const strokeDashoffset = circumference - progress / 100 * circumference;
-    return /* @__PURE__ */ jsxs("div", { className: cn("relative w-32 h-32", className), children: [
-      /* @__PURE__ */ jsxs("svg", { className: "w-full h-full -rotate-90", children: [
+    return /* @__PURE__ */ jsxs("div", { className: cn("relative w-36 h-36 mx-auto", className), children: [
+      /* @__PURE__ */ jsxs("svg", { className: "w-full h-full -rotate-90", viewBox: "0 0 144 144", children: [
         /* @__PURE__ */ jsx(
           "circle",
           {
-            cx: "64",
-            cy: "64",
-            r: "40",
+            cx: "72",
+            cy: "72",
+            r: "45",
             fill: "none",
             stroke: "currentColor",
             strokeWidth: "8",
-            className: "text-muted"
+            className: "text-gray-200 dark:text-gray-700"
           }
         ),
         /* @__PURE__ */ jsx(
           motion.circle,
           {
-            cx: "64",
-            cy: "64",
-            r: "40",
+            cx: "72",
+            cy: "72",
+            r: "45",
             fill: "none",
             stroke: "currentColor",
             strokeWidth: "8",
@@ -60299,7 +60418,7 @@ var FormWizardProgress = ({
         )
       ] }),
       /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
-        /* @__PURE__ */ jsx("p", { className: "text-2xl font-bold", children: currentStep + 1 }),
+        /* @__PURE__ */ jsx("p", { className: "text-3xl font-bold", children: currentStep + 1 }),
         /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground", children: [
           "of ",
           steps.length
@@ -60345,7 +60464,7 @@ var FormWizardStep = ({
   animationType = "slide",
   animationDuration = 0.3
 }) => {
-  const { steps, currentStep, goToNext, goToPrevious, goToStep, updateStepData, stepData } = useFormWizard();
+  const { steps, currentStep, goToNext, goToPrevious, goToStep, updateStepData, stepData, error: error42 } = useFormWizard();
   const [direction, setDirection] = t__default.useState(0);
   const previousStep = t__default.useRef(currentStep);
   t__default.useEffect(() => {
@@ -60380,7 +60499,14 @@ var FormWizardStep = ({
         ease: "easeInOut"
       },
       className: cn("w-full", className),
-      children: content
+      "data-wizard-step-content": true,
+      children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+        error42 && /* @__PURE__ */ jsxs(MoonUIAlertPro, { variant: "error", children: [
+          /* @__PURE__ */ jsx(AlertCircle, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsx(MoonUIAlertDescriptionPro, { children: error42 })
+        ] }),
+        content
+      ] })
     },
     currentStep
   ) });
@@ -60523,23 +60649,20 @@ var MoonUIFormWizardPro = t__default.forwardRef(({
       persistData,
       storageKey,
       children: /* @__PURE__ */ jsxs("div", { ref, className: cn("w-full", className), children: [
-        showProgressBar && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(
-            FormWizardProgress,
-            {
-              className: progressClassName,
-              progressType,
-              orientation,
-              showStepNumbers,
-              showStepTitles,
-              stepIconPosition,
-              completedStepIcon,
-              activeStepIcon,
-              errorStepIcon
-            }
-          ),
-          /* @__PURE__ */ jsx(MoonUISeparatorPro, { className: "my-8" })
-        ] }),
+        showProgressBar && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
+          FormWizardProgress,
+          {
+            className: cn("mb-12", progressClassName),
+            progressType,
+            orientation,
+            showStepNumbers,
+            showStepTitles,
+            stepIconPosition,
+            completedStepIcon,
+            activeStepIcon,
+            errorStepIcon
+          }
+        ) }),
         /* @__PURE__ */ jsx(MoonUICardPro, { className: cn("border-0 shadow-none", contentClassName), children: /* @__PURE__ */ jsx(MoonUICardContentPro, { className: "p-0", children: /* @__PURE__ */ jsx(
           FormWizardStep,
           {
@@ -60548,11 +60671,10 @@ var MoonUIFormWizardPro = t__default.forwardRef(({
             animationDuration
           }
         ) }) }),
-        /* @__PURE__ */ jsx(MoonUISeparatorPro, { className: "my-8" }),
         /* @__PURE__ */ jsx(
           FormWizardNavigation,
           {
-            className: navigationClassName
+            className: cn("mt-8", navigationClassName)
           }
         )
       ] })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moontra/moonui-pro",
-  "version": "2.8.0",
+  "version": "2.8.2",
   "description": "Premium React components for MoonUI - Advanced UI library with 50+ pro components including performance, interactive, and gesture components",
   "type": "module",
   "main": "dist/index.mjs",

package/src/components/form-wizard/form-wizard-context.tsx

@@ -95,17 +95,76 @@ export const FormWizardProvider: React.FC<FormWizardProviderProps> = ({
 
   const validateCurrentStep = useCallback(async (): Promise<boolean> => {
     const step = steps[currentStep]
+    
+    // First check HTML5 validation for required fields
+    if (typeof window !== 'undefined') {
+      const stepElement = document.querySelector('[data-wizard-step-content]')
+      if (stepElement) {
+        const requiredInputs = stepElement.querySelectorAll('input[required], select[required], textarea[required]')
+        const emptyFields: string[] = []
+        
+        requiredInputs.forEach((input: Element) => {
+          const htmlInput = input as HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement
+          if (!htmlInput.value || htmlInput.value.trim() === '') {
+            const label = document.querySelector(`label[for="${htmlInput.id}"]`)
+            const fieldName = label ? (label.textContent?.replace(' *', '') || 'Field') : htmlInput.name || htmlInput.id || 'Field'
+            emptyFields.push(fieldName)
+          }
+        })
+        
+        // Check for required checkboxes
+        const requiredCheckboxes = stepElement.querySelectorAll('input[type="checkbox"][required]')
+        requiredCheckboxes.forEach((checkbox: Element) => {
+          const htmlCheckbox = checkbox as HTMLInputElement
+          if (!htmlCheckbox.checked) {
+            const label = document.querySelector(`label[for="${htmlCheckbox.id}"]`)
+            const fieldName = label ? (label.textContent?.replace(' *', '') || 'Checkbox') : htmlCheckbox.name || htmlCheckbox.id || 'Checkbox'
+            emptyFields.push(fieldName)
+          }
+        })
+        
+        if (emptyFields.length > 0) {
+          setError(`Please fill in the following required fields: ${emptyFields.join(', ')}`)
+          return false
+        }
+      }
+    }
+    
+    // Then run custom validation if provided
     if (!step.validation) return true
 
     setIsLoading(true)
     setError(null)
 
     try {
-      const isValid = await step.validation()
-      if (!isValid) {
-        setError("Please complete all required fields before proceeding")
+      const result = await step.validation()
+      
+      // Handle boolean return
+      if (typeof result === 'boolean') {
+        if (!result) {
+          setError("Please complete all required fields before proceeding")
+        }
+        return result
       }
-      return isValid
+      
+      // Handle object return {isValid: boolean, error?: string, errors?: string[]}
+      if (typeof result === 'object' && result !== null && 'isValid' in result) {
+        const validationResult = result as { isValid: boolean; error?: string; errors?: string[] }
+        if (!validationResult.isValid) {
+          if (validationResult.error) {
+            setError(validationResult.error)
+          } else if (validationResult.errors && Array.isArray(validationResult.errors)) {
+            setError(validationResult.errors.join(', '))
+          } else {
+            setError("Please complete all required fields before proceeding")
+          }
+        }
+        return validationResult.isValid
+      }
+      
+      // Invalid return type
+      setError("Invalid validation response")
+      return false
     } catch (err) {
       setError(err instanceof Error ? err.message : "Validation failed")
       return false

package/src/components/form-wizard/form-wizard-progress.tsx

@@ -35,90 +35,195 @@ export const FormWizardProgress: React.FC<FormWizardProgressProps> = ({
   if (progressType === 'linear') {
     return (
       <div className={cn(
-        "relative",
-        orientation === 'vertical' ? "flex flex-col space-y-8" : "flex items-center justify-between",
+        "relative w-full",
+        orientation === 'vertical' ? "flex flex-col space-y-8" : "",
         className
       )}>
-        {steps.map((step, index) => {
-          const isActive = index === currentStep
-          const isCompleted = isStepCompleted(index)
-          const isAccessible = isStepAccessible(index)
-          const hasError = isActive && error
-          
-          const StepIcon = typeof step.icon === 'function' 
-            ? step.icon({ isActive, isCompleted })
-            : step.icon
+        {orientation === 'horizontal' ? (
+          <div className="relative w-full">
+            {/* Steps Container with connecting lines */}
+            <div className="relative flex items-start justify-between w-full">
+              {steps.map((step, index) => {
+                const isActive = index === currentStep
+                const isCompleted = isStepCompleted(index)
+                const isAccessible = isStepAccessible(index)
+                const hasError = isActive && error
+                
+                const StepIcon = typeof step.icon === 'function' 
+                  ? step.icon({ isActive, isCompleted })
+                  : step.icon
 
-          return (
-            <React.Fragment key={step.id}>
-              <div className={cn(
-                "relative flex items-center",
-                orientation === 'vertical' ? "w-full" : "flex-1"
-              )}>
-                <motion.div
-                  initial={{ scale: 0.8 }}
-                  animate={{ scale: isActive ? 1.1 : 1 }}
-                  className={cn(
-                    "relative z-20 flex items-center justify-center rounded-full border-2 transition-all duration-300",
-                    stepIconPosition === 'inside' ? "w-12 h-12" : "w-10 h-10",
-                    isActive && "border-primary bg-primary text-primary-foreground shadow-lg",
-                    isCompleted && !isActive && "border-primary bg-primary text-primary-foreground",
-                    !isActive && !isCompleted && isAccessible && "border-muted-foreground/50 bg-background text-muted-foreground hover:border-muted-foreground",
-                    !isAccessible && "border-muted bg-muted text-muted-foreground cursor-not-allowed opacity-50",
-                    hasError && "border-destructive bg-destructive text-destructive-foreground"
-                  )}
-                >
-                  {hasError ? (
-                    errorStepIcon
-                  ) : isCompleted && !isActive ? (
-                    completedStepIcon
-                  ) : isActive && activeStepIcon ? (
-                    activeStepIcon
-                  ) : StepIcon ? (
-                    <span className="w-5 h-5 flex items-center justify-center">{StepIcon}</span>
-                  ) : showStepNumbers ? (
-                    <span className="text-sm font-medium">{index + 1}</span>
-                  ) : (
-                    <Circle className="w-4 h-4" />
-                  )}
-                </motion.div>
+                return (
+                  <div key={step.id} className="relative flex-1 flex flex-col items-center">
+                    {/* Step Title & Description - Above the circle */}
+                    {showStepTitles && (
+                      <div className="text-center mb-3 min-h-[40px] px-2">
+                        <p className={cn(
+                          "text-sm font-semibold transition-colors",
+                          isActive && "text-primary",
+                          isCompleted && !isActive && "text-primary",
+                          !isActive && !isCompleted && "text-muted-foreground"
+                        )}>
+                          {step.title}
+                        </p>
+                        {step.description && (
+                          <p className="text-xs text-muted-foreground mt-1">
+                            {step.description}
+                          </p>
+                        )}
+                      </div>
+                    )}
+
+                    {/* Step Circle Container with line */}
+                    <div className="relative flex items-center w-full">
+                      {/* Connecting Line - Positioned after each circle except the last */}
+                      {index < steps.length - 1 && (
+                        <div 
+                          className="absolute left-1/2 w-full h-[2px]"
+                          style={{ 
+                            width: 'calc(100% + 24px)',
+                            marginLeft: '24px'
+                          }}
+                        >
+                          <div className="h-full bg-gray-200 dark:bg-gray-700" />
+                          {index < currentStep && (
+                            <motion.div
+                              className="absolute inset-0 bg-primary"
+                              initial={{ scaleX: 0 }}
+                              animate={{ scaleX: 1 }}
+                              transition={{ duration: 0.5, delay: index * 0.1 }}
+                              style={{ transformOrigin: 'left' }}
+                            />
+                          )}
+                        </div>
+                      )}
+
+                      {/* Step Circle */}
+                      <motion.div
+                        initial={{ scale: 0.8 }}
+                        animate={{ scale: isActive ? 1.05 : 1 }}
+                        transition={{ duration: 0.2 }}
+                        className={cn(
+                          "relative z-10 flex items-center justify-center rounded-full transition-all duration-300 mx-auto",
+                          "w-12 h-12 border-2",
+                          isActive && "border-primary bg-primary text-primary-foreground shadow-lg shadow-primary/20",
+                          isCompleted && !isActive && "border-primary bg-primary text-primary-foreground",
+                          !isActive && !isCompleted && isAccessible && "border-gray-300 bg-background text-gray-500 hover:border-gray-400 dark:border-gray-600 dark:text-gray-400",
+                          !isAccessible && "border-gray-200 bg-gray-50 text-gray-400 cursor-not-allowed dark:border-gray-700 dark:bg-gray-900 dark:text-gray-600",
+                          hasError && "border-destructive bg-destructive text-destructive-foreground"
+                        )}
+                      >
+                        {hasError ? (
+                          errorStepIcon
+                        ) : isCompleted && !isActive ? (
+                          completedStepIcon
+                        ) : isActive && activeStepIcon ? (
+                          activeStepIcon
+                        ) : StepIcon ? (
+                          <span className="w-5 h-5 flex items-center justify-center">{StepIcon}</span>
+                        ) : showStepNumbers ? (
+                          <span className="text-sm font-semibold">{index + 1}</span>
+                        ) : (
+                          <Circle className="w-4 h-4" />
+                        )}
+                      </motion.div>
+                    </div>
 
-                {showStepTitles && (
-                  <div className={cn(
-                    "absolute whitespace-nowrap",
-                    orientation === 'vertical' 
-                      ? "left-16 top-1/2 -translate-y-1/2" 
-                      : "top-full mt-2 left-1/2 -translate-x-1/2 text-center"
-                  )}>
-                    <p className={cn(
-                      "text-sm font-medium transition-colors",
-                      isActive && "text-primary",
-                      isCompleted && !isActive && "text-primary",
-                      !isActive && !isCompleted && "text-muted-foreground"
-                    )}>
-                      {step.title}
-                    </p>
-                    {step.description && (
-                      <p className="text-xs text-muted-foreground mt-1">
-                        {step.description}
+                    {/* Step Label Below Circle */}
+                    <div className="mt-3">
+                      <p className="text-xs text-muted-foreground font-medium">
+                        Step {index + 1} of {steps.length}
                       </p>
-                    )}
+                    </div>
                   </div>
-                )}
+                )
+              })}
+            </div>
+          </div>
+        ) : (
+          // Vertical orientation
+          <div className="relative pl-12">
+            {/* Vertical Progress Line */}
+            {steps.length > 1 && (
+              <>
+                <div className="absolute left-6 top-8 bottom-8 w-[2px] bg-gray-200 dark:bg-gray-700" />
+                <motion.div
+                  className="absolute left-6 top-8 w-[2px] bg-primary"
+                  initial={{ height: 0 }}
+                  animate={{ 
+                    height: `${(currentStep / (steps.length - 1)) * (100 - 16)}%`
+                  }}
+                  transition={{ duration: 0.5 }}
+                />
+              </>
+            )}
 
-                {index < steps.length - 1 && (
-                  <div className={cn(
-                    "absolute transition-all duration-500",
-                    orientation === 'vertical' 
-                      ? "top-12 left-5 w-0.5 h-8" 
-                      : "left-12 right-0 top-1/2 -translate-y-1/2 h-0.5",
-                    isCompleted ? "bg-primary" : "bg-muted"
-                  )} />
-                )}
-              </div>
-            </React.Fragment>
-          )
-        })}
+            {steps.map((step, index) => {
+              const isActive = index === currentStep
+              const isCompleted = isStepCompleted(index)
+              const isAccessible = isStepAccessible(index)
+              const hasError = isActive && error
+              
+              const StepIcon = typeof step.icon === 'function' 
+                ? step.icon({ isActive, isCompleted })
+                : step.icon
+
+              return (
+                <div key={step.id} className="relative flex items-center mb-8 last:mb-0">
+                  {/* Step Circle */}
+                  <motion.div
+                    initial={{ scale: 0.8 }}
+                    animate={{ scale: isActive ? 1.05 : 1 }}
+                    className={cn(
+                      "absolute left-0 z-20 flex items-center justify-center rounded-full border-2 transition-all duration-300",
+                      "w-12 h-12",
+                      isActive && "border-primary bg-primary text-primary-foreground shadow-lg",
+                      isCompleted && !isActive && "border-primary bg-primary text-primary-foreground",
+                      !isActive && !isCompleted && isAccessible && "border-gray-300 bg-background text-gray-500 hover:border-gray-400",
+                      !isAccessible && "border-gray-200 bg-gray-50 text-gray-400 cursor-not-allowed",
+                      hasError && "border-destructive bg-destructive text-destructive-foreground"
+                    )}
+                  >
+                    {hasError ? (
+                      errorStepIcon
+                    ) : isCompleted && !isActive ? (
+                      completedStepIcon
+                    ) : isActive && activeStepIcon ? (
+                      activeStepIcon
+                    ) : StepIcon ? (
+                      <span className="w-5 h-5 flex items-center justify-center">{StepIcon}</span>
+                    ) : showStepNumbers ? (
+                      <span className="text-sm font-semibold">{index + 1}</span>
+                    ) : (
+                      <Circle className="w-4 h-4" />
+                    )}
+                  </motion.div>
+
+                  {/* Step Content */}
+                  <div className="ml-16">
+                    {showStepTitles && (
+                      <>
+                        <p className={cn(
+                          "text-sm font-semibold transition-colors",
+                          isActive && "text-primary",
+                          isCompleted && !isActive && "text-primary",
+                          !isActive && !isCompleted && "text-muted-foreground"
+                        )}>
+                          {step.title}
+                        </p>
+                        {step.description && (
+                          <p className="text-xs text-muted-foreground mt-1">
+                            {step.description}
+                          </p>
+                        )}
+                      </>
+                    )}
+                  </div>
+                </div>
+              )
+            })}
+          </div>
+        )}
       </div>
     )
   }
@@ -150,25 +255,25 @@ export const FormWizardProgress: React.FC<FormWizardProgressProps> = ({
 
   if (progressType === 'circular') {
     const progress = ((currentStep + 1) / steps.length) * 100
-    const circumference = 2 * Math.PI * 40 // radius = 40
+    const circumference = 2 * Math.PI * 45 // radius = 45
     const strokeDashoffset = circumference - (progress / 100) * circumference
 
     return (
-      <div className={cn("relative w-32 h-32", className)}>
-        <svg className="w-full h-full -rotate-90">
+      <div className={cn("relative w-36 h-36 mx-auto", className)}>
+        <svg className="w-full h-full -rotate-90" viewBox="0 0 144 144">
           <circle
-            cx="64"
-            cy="64"
-            r="40"
+            cx="72"
+            cy="72"
+            r="45"
             fill="none"
             stroke="currentColor"
             strokeWidth="8"
-            className="text-muted"
+            className="text-gray-200 dark:text-gray-700"
           />
           <motion.circle
-            cx="64"
-            cy="64"
-            r="40"
+            cx="72"
+            cy="72"
+            r="45"
             fill="none"
             stroke="currentColor"
             strokeWidth="8"
@@ -181,7 +286,7 @@ export const FormWizardProgress: React.FC<FormWizardProgressProps> = ({
         </svg>
         <div className="absolute inset-0 flex items-center justify-center">
           <div className="text-center">
-            <p className="text-2xl font-bold">{currentStep + 1}</p>
+            <p className="text-3xl font-bold">{currentStep + 1}</p>
             <p className="text-sm text-muted-foreground">of {steps.length}</p>
           </div>
         </div>

package/src/components/form-wizard/form-wizard-step.tsx

@@ -5,6 +5,8 @@ import { motion, AnimatePresence } from "framer-motion"
 import { cn } from "../../lib/utils"
 import { useFormWizard } from "./form-wizard-context"
 import { FormWizardProps } from "./types"
+import { Alert, AlertDescription } from "../ui/alert"
+import { AlertCircle } from "lucide-react"
 
 interface FormWizardStepProps {
   className?: string
@@ -49,7 +51,7 @@ export const FormWizardStep: React.FC<FormWizardStepProps> = ({
   animationType = 'slide',
   animationDuration = 0.3
 }) => {
-  const { steps, currentStep, goToNext, goToPrevious, goToStep, updateStepData, stepData } = useFormWizard()
+  const { steps, currentStep, goToNext, goToPrevious, goToStep, updateStepData, stepData, error } = useFormWizard()
   const [direction, setDirection] = React.useState(0)
   const previousStep = React.useRef(currentStep)
 
@@ -92,8 +94,17 @@ export const FormWizardStep: React.FC<FormWizardStepProps> = ({
           ease: "easeInOut"
         }}
         className={cn("w-full", className)}
+        data-wizard-step-content
       >
-        {content}
+        <div className="space-y-4">
+          {error && (
+            <Alert variant="error">
+              <AlertCircle className="h-4 w-4" />
+              <AlertDescription>{error}</AlertDescription>
+            </Alert>
+          )}
+          {content}
+        </div>
       </motion.div>
     </AnimatePresence>
   )

package/src/components/form-wizard/index.tsx

@@ -59,7 +59,7 @@ export const MoonUIFormWizardPro = React.forwardRef<HTMLDivElement, FormWizardPr
         {showProgressBar && (
           <>
             <FormWizardProgress
-              className={progressClassName}
+              className={cn("mb-12", progressClassName)}
               progressType={progressType}
               orientation={orientation}
               showStepNumbers={showStepNumbers}
@@ -69,7 +69,6 @@ export const MoonUIFormWizardPro = React.forwardRef<HTMLDivElement, FormWizardPr
               activeStepIcon={activeStepIcon}
               errorStepIcon={errorStepIcon}
             />
-            <Separator className="my-8" />
           </>
         )}
 
@@ -83,10 +82,8 @@ export const MoonUIFormWizardPro = React.forwardRef<HTMLDivElement, FormWizardPr
           </CardContent>
         </Card>
 
-        <Separator className="my-8" />
-
         <FormWizardNavigation
-          className={navigationClassName}
+          className={cn("mt-8", navigationClassName)}
         />
       </div>
     </FormWizardProvider>