@moontra/moonui-pro 2.8.1 → 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;
@@ -60196,47 +60241,46 @@ var FormWizardProgress = ({
       "relative w-full",
       orientation === "vertical" ? "flex flex-col space-y-8" : "",
       className
-    ), 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"
-          }
-        }
-      ),
-      /* @__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 })
-          ] }),
+    ), 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__ */ 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-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__ */ 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,
             {
@@ -60244,7 +60288,7 @@ var FormWizardProgress = ({
               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",
+                "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",
@@ -60254,16 +60298,16 @@ var FormWizardProgress = ({
               ),
               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);
-      }) })
-    ] }) : (
+          )
+        ] }),
+        /* @__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: [
@@ -60420,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(() => {
@@ -60455,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
   ) });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moontra/moonui-pro",
-  "version": "2.8.1",
+  "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

@@ -41,31 +41,7 @@ export const FormWizardProgress: React.FC<FormWizardProgressProps> = ({
       )}>
         {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" }}
-            />
-
-            {/* Steps Container */}
+            {/* Steps Container with connecting lines */}
             <div className="relative flex items-start justify-between w-full">
               {steps.map((step, index) => {
                 const isActive = index === currentStep
@@ -78,7 +54,7 @@ export const FormWizardProgress: React.FC<FormWizardProgressProps> = ({
                   : step.icon
 
                 return (
-                  <div key={step.id} className="relative flex flex-col items-center">
+                  <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">
@@ -98,35 +74,60 @@ export const FormWizardProgress: React.FC<FormWizardProgressProps> = ({
                       </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" />
+                    {/* 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>
                       )}
-                    </motion.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>
 
                     {/* Step Label Below Circle */}
                     <div className="mt-3">

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>
   )