@moontra/moonui-pro 2.7.3 → 2.8.1

package/dist/index.mjs

@@ -60193,55 +60193,130 @@ 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) => {
-      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" })
+    ), children: orientation === "horizontal" ? /* @__PURE__ */ jsxs("div", { className: "relative w-full", children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "absolute left-6 right-6 h-[2px] bg-gray-200 dark:bg-gray-700",
+          style: {
+            top: showStepTitles ? "80px" : "24px"
           }
-        ),
-        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: [
-          /* @__PURE__ */ jsx("p", { className: cn(
-            "text-sm font-medium 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 })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        motion.div,
+        {
+          className: "absolute left-6 h-[2px] bg-primary",
+          style: {
+            top: showStepTitles ? "80px" : "24px",
+            right: `${100 - currentStep / (steps.length - 1) * 100}%`
+          },
+          initial: { right: "100%" },
+          animate: {
+            right: steps.length > 1 ? `${100 - currentStep / (steps.length - 1) * 100}%` : "100%"
+          },
+          transition: { duration: 0.5, ease: "easeInOut" }
+        }
+      ),
+      /* @__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__ */ jsxs("div", { className: "relative 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-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 })
+          ] }),
+          /* @__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",
+                "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 }
+            }
+          )
         ] }),
-        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);
-    }) });
+        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 +60340,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 +60374,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
@@ -60523,23 +60598,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 +60620,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.7.3",
+  "version": "2.8.1",
   "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-progress.tsx

@@ -35,90 +35,194 @@ 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">
+            {/* Progress Line Background - Positioned absolutely */}
+            <div 
+              className="absolute left-6 right-6 h-[2px] bg-gray-200 dark:bg-gray-700" 
+              style={{ 
+                top: showStepTitles ? '80px' : '24px' 
+              }}
+            />
+            
+            {/* Progress Line Fill */}
+            <motion.div
+              className="absolute left-6 h-[2px] bg-primary"
+              style={{ 
+                top: showStepTitles ? '80px' : '24px',
+                right: `${100 - ((currentStep / (steps.length - 1)) * 100)}%`
+              }}
+              initial={{ right: '100%' }}
+              animate={{ 
+                right: steps.length > 1 
+                  ? `${100 - ((currentStep / (steps.length - 1)) * 100)}%` 
+                  : '100%'
+              }}
+              transition={{ duration: 0.5, ease: "easeInOut" }}
+            />
 
-          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>
+            {/* Steps Container */}
+            <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
 
-                {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}
-                      </p>
+                return (
+                  <div key={step.id} className="relative 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 */}
+                    <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",
+                        "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>
+
+                    {/* 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 +254,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 +285,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/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>