@moontra/moonui-pro 2.8.1 → 2.8.3

package/package.json

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

package/src/components/index.ts

@@ -89,8 +89,6 @@ export * from "./sidebar"
 // Form Wizard
 export * from "./form-wizard"
 
-// Multi-Step Form
-export * from "./multi-step-form"
 
 // Quiz Form
 export * from "./quiz-form"

package/src/components/multi-step-form/index.tsx

@@ -1,223 +0,0 @@
-"use client"
-
-import React from "react"
-import { useForm, FormProvider, UseFormReturn, FieldValues, DefaultValues } from "react-hook-form"
-import { zodResolver } from "@hookform/resolvers/zod"
-import { z } from "zod"
-import { MoonUIFormWizardPro, FormWizardProps, WizardStep } from "../form-wizard"
-import { Alert, AlertDescription } from "../ui/alert"
-import { AlertCircle } from "lucide-react"
-
-export interface MultiStepFormField {
-  name: string
-  label: string
-  type: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'textarea' | 'select' | 'checkbox' | 'radio' | 'switch' | 'file' | 'date' | 'time' | 'datetime'
-  placeholder?: string
-  description?: string
-  required?: boolean
-  validation?: z.ZodSchema<any>
-  options?: Array<{ value: string; label: string }>
-  defaultValue?: any
-  disabled?: boolean
-  autoComplete?: string
-  min?: number | string
-  max?: number | string
-  step?: number | string
-  pattern?: string
-  multiple?: boolean
-  accept?: string
-}
-
-export interface MultiStepFormStep extends Omit<WizardStep, 'content' | 'validation'> {
-  fields: MultiStepFormField[]
-  schema?: z.ZodSchema<any>
-  submitLabel?: string
-}
-
-export interface MultiStepFormProps<TFormData extends FieldValues = FieldValues> extends Omit<FormWizardProps, 'steps'> {
-  steps: MultiStepFormStep[]
-  onSubmit: (data: TFormData) => void | Promise<void>
-  defaultValues?: DefaultValues<TFormData>
-  showErrorSummary?: boolean
-  fieldClassName?: string
-  labelClassName?: string
-  errorClassName?: string
-  descriptionClassName?: string
-  renderField?: (field: MultiStepFormField, form: UseFormReturn<TFormData>) => React.ReactNode
-}
-
-function createStepSchema(fields: MultiStepFormField[]): z.ZodSchema<any> {
-  const shape: Record<string, z.ZodSchema<any>> = {}
-
-  fields.forEach(field => {
-    if (field.validation) {
-      shape[field.name] = field.validation
-    } else {
-      let schema: z.ZodSchema<any> = z.any()
-
-      switch (field.type) {
-        case 'email':
-          schema = z.string().email('Invalid email address')
-          break
-        case 'number':
-          schema = z.number()
-          if (field.min !== undefined) schema = (schema as z.ZodNumber).min(Number(field.min))
-          if (field.max !== undefined) schema = (schema as z.ZodNumber).max(Number(field.max))
-          break
-        case 'url':
-          schema = z.string().url('Invalid URL')
-          break
-        case 'tel':
-          schema = z.string().regex(/^\+?[1-9]\d{1,14}$/, 'Invalid phone number')
-          break
-        case 'checkbox':
-        case 'switch':
-          schema = z.boolean()
-          break
-        default:
-          schema = z.string()
-          if (field.min !== undefined) schema = (schema as z.ZodString).min(Number(field.min))
-          if (field.max !== undefined) schema = (schema as z.ZodString).max(Number(field.max))
-          if (field.pattern) schema = (schema as z.ZodString).regex(new RegExp(field.pattern))
-      }
-
-      if (!field.required) {
-        schema = schema.optional()
-      }
-
-      shape[field.name] = schema
-    }
-  })
-
-  return z.object(shape)
-}
-
-export function MoonUIMultiStepFormPro<TFormData extends FieldValues = FieldValues>({
-  steps,
-  onSubmit,
-  defaultValues,
-  showErrorSummary = true,
-  fieldClassName,
-  labelClassName,
-  errorClassName,
-  descriptionClassName,
-  renderField,
-  ...wizardProps
-}: MultiStepFormProps<TFormData>) {
-  // Create combined schema from all steps
-  const combinedSchema = React.useMemo(() => {
-    const shape: Record<string, z.ZodSchema<any>> = {}
-    
-    steps.forEach(step => {
-      const stepSchema = step.schema || createStepSchema(step.fields)
-      if (stepSchema instanceof z.ZodObject) {
-        Object.assign(shape, stepSchema.shape)
-      }
-    })
-    
-    return z.object(shape)
-  }, [steps])
-
-  const form = useForm<TFormData>({
-    resolver: zodResolver(combinedSchema) as any,
-    defaultValues,
-    mode: 'onChange'
-  })
-
-  const wizardSteps: WizardStep[] = steps.map((step, stepIndex) => ({
-    ...step,
-    validation: async () => {
-      // Validate only the fields in the current step
-      const currentStepFields = step.fields.map(f => f.name)
-      const result = await form.trigger(currentStepFields as any)
-      return result
-    },
-    content: ({ updateStepData }) => {
-      const errors = form.formState.errors
-      const stepErrors = step.fields
-        .map(field => errors[field.name])
-        .filter(Boolean)
-
-      return (
-        <FormProvider {...form}>
-          <form className="space-y-6">
-            {showErrorSummary && stepErrors.length > 0 && (
-              <Alert variant="error">
-                <AlertCircle className="h-4 w-4" />
-                <AlertDescription>
-                  Please fix the errors below before proceeding.
-                </AlertDescription>
-              </Alert>
-            )}
-
-            {step.fields.map(field => {
-              if (renderField) {
-                return <div key={field.name}>{renderField(field, form)}</div>
-              }
-
-              // Default field rendering
-              return (
-                <div key={field.name} className={fieldClassName}>
-                  <label
-                    htmlFor={field.name}
-                    className={cn(
-                      "block text-sm font-medium",
-                      labelClassName
-                    )}
-                  >
-                    {field.label}
-                    {field.required && <span className="text-destructive ml-1">*</span>}
-                  </label>
-
-                  {field.description && (
-                    <p className={cn("text-sm text-muted-foreground mt-1", descriptionClassName)}>
-                      {field.description}
-                    </p>
-                  )}
-
-                  <div className="mt-2">
-                    {/* Field rendering would go here - simplified for brevity */}
-                    <input
-                      {...form.register(field.name as any)}
-                      id={field.name}
-                      type={field.type}
-                      placeholder={field.placeholder}
-                      disabled={field.disabled}
-                      className="w-full px-3 py-2 border rounded-md"
-                    />
-                  </div>
-
-                  {errors[field.name] && (
-                    <p className={cn("text-sm text-destructive mt-1", errorClassName)}>
-                      {errors[field.name]?.message as string}
-                    </p>
-                  )}
-                </div>
-              )
-            })}
-          </form>
-        </FormProvider>
-      )
-    }
-  }))
-
-  const handleComplete = async (stepData: Record<string, any>) => {
-    const isValid = await form.trigger()
-    if (isValid) {
-      await onSubmit(form.getValues())
-    }
-  }
-
-  return (
-    <MoonUIFormWizardPro
-      {...wizardProps}
-      steps={wizardSteps}
-      onComplete={handleComplete}
-    />
-  )
-}
-
-// Utility function for better imports
-function cn(...classes: (string | undefined | false)[]) {
-  return classes.filter(Boolean).join(' ')
-}