@moontra/moonui-pro 2.6.0 → 2.6.2

package/package.json

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

@@ -0,0 +1,248 @@
+"use client"
+
+import React, { createContext, useContext, useState, useCallback, useEffect } from "react"
+import { WizardContextValue, WizardStep, FormWizardProps } from "./types"
+
+const FormWizardContext = createContext<WizardContextValue | null>(null)
+
+export const useFormWizard = () => {
+  const context = useContext(FormWizardContext)
+  if (!context) {
+    throw new Error("useFormWizard must be used within a FormWizardProvider")
+  }
+  return context
+}
+
+interface FormWizardProviderProps {
+  children: React.ReactNode
+  steps: WizardStep[]
+  initialStep?: number
+  onStepChange?: FormWizardProps['onStepChange']
+  onComplete?: FormWizardProps['onComplete']
+  validateOnStepChange?: boolean
+  allowBackNavigation?: boolean
+  allowStepSkip?: boolean
+  autoSave?: boolean
+  autoSaveDelay?: number
+  onAutoSave?: FormWizardProps['onAutoSave']
+  persistData?: boolean
+  storageKey?: string
+}
+
+export const FormWizardProvider: React.FC<FormWizardProviderProps> = ({
+  children,
+  steps,
+  initialStep = 0,
+  onStepChange,
+  onComplete,
+  validateOnStepChange = true,
+  allowBackNavigation = true,
+  allowStepSkip = false,
+  autoSave = false,
+  autoSaveDelay = 2000,
+  onAutoSave,
+  persistData = false,
+  storageKey = "form-wizard-data"
+}) => {
+  const [currentStep, setCurrentStep] = useState(initialStep)
+  const [stepData, setStepData] = useState<Record<string, any>>({})
+  const [completedSteps, setCompletedSteps] = useState<Set<number>>(new Set())
+  const [isLoading, setIsLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  // Load persisted data on mount
+  useEffect(() => {
+    if (persistData && typeof window !== 'undefined') {
+      const savedData = localStorage.getItem(storageKey)
+      if (savedData) {
+        try {
+          const parsed = JSON.parse(savedData)
+          setStepData(parsed.stepData || {})
+          setCurrentStep(parsed.currentStep || 0)
+          setCompletedSteps(new Set(parsed.completedSteps || []))
+        } catch (e) {
+          console.error("Failed to load persisted wizard data:", e)
+        }
+      }
+    }
+  }, [persistData, storageKey])
+
+  // Auto-save functionality
+  useEffect(() => {
+    if (!autoSave || !onAutoSave) return
+
+    const timeoutId = setTimeout(() => {
+      const currentStepData = stepData[steps[currentStep].id]
+      if (currentStepData) {
+        onAutoSave(steps[currentStep].id, currentStepData)
+      }
+    }, autoSaveDelay)
+
+    return () => clearTimeout(timeoutId)
+  }, [stepData, currentStep, autoSave, autoSaveDelay, onAutoSave, steps])
+
+  // Persist data when it changes
+  useEffect(() => {
+    if (persistData && typeof window !== 'undefined') {
+      const dataToSave = {
+        stepData,
+        currentStep,
+        completedSteps: Array.from(completedSteps)
+      }
+      localStorage.setItem(storageKey, JSON.stringify(dataToSave))
+    }
+  }, [stepData, currentStep, completedSteps, persistData, storageKey])
+
+  const validateCurrentStep = useCallback(async (): Promise<boolean> => {
+    const step = steps[currentStep]
+    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")
+      }
+      return isValid
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Validation failed")
+      return false
+    } finally {
+      setIsLoading(false)
+    }
+  }, [currentStep, steps])
+
+  const updateStepData = useCallback((stepId: string, data: any) => {
+    setStepData(prev => ({
+      ...prev,
+      [stepId]: { ...prev[stepId], ...data }
+    }))
+    setError(null)
+  }, [])
+
+  const goToStep = useCallback(async (stepIndex: number) => {
+    if (stepIndex < 0 || stepIndex >= steps.length) return
+    if (stepIndex === currentStep) return
+
+    const targetStep = steps[stepIndex]
+    const isDisabled = typeof targetStep.isDisabled === 'function' 
+      ? targetStep.isDisabled(currentStep, steps)
+      : targetStep.isDisabled
+
+    if (isDisabled) return
+
+    // Validate current step if moving forward
+    if (validateOnStepChange && stepIndex > currentStep) {
+      const isValid = await validateCurrentStep()
+      if (!isValid) return
+    }
+
+    // Call exit handler for current step
+    const currentStepObj = steps[currentStep]
+    if (currentStepObj.onExit) {
+      await currentStepObj.onExit()
+    }
+
+    // Update completed steps
+    if (stepIndex > currentStep) {
+      setCompletedSteps(prev => new Set([...prev, currentStep]))
+    }
+
+    // Call enter handler for new step
+    if (targetStep.onEnter) {
+      await targetStep.onEnter()
+    }
+
+    const previousStep = currentStep
+    setCurrentStep(stepIndex)
+    onStepChange?.(stepIndex, previousStep)
+  }, [currentStep, steps, validateOnStepChange, validateCurrentStep, onStepChange])
+
+  const goToNext = useCallback(() => {
+    goToStep(currentStep + 1)
+  }, [currentStep, goToStep])
+
+  const goToPrevious = useCallback(() => {
+    if (!allowBackNavigation) return
+    goToStep(currentStep - 1)
+  }, [currentStep, goToStep, allowBackNavigation])
+
+  const completeWizard = useCallback(async () => {
+    const isValid = await validateCurrentStep()
+    if (!isValid) return
+
+    setCompletedSteps(prev => new Set([...prev, currentStep]))
+    
+    if (onComplete) {
+      setIsLoading(true)
+      try {
+        await onComplete(stepData)
+        
+        // Clear persisted data after successful completion
+        if (persistData && typeof window !== 'undefined') {
+          localStorage.removeItem(storageKey)
+        }
+      } catch (err) {
+        setError(err instanceof Error ? err.message : "Failed to complete wizard")
+      } finally {
+        setIsLoading(false)
+      }
+    }
+  }, [currentStep, stepData, validateCurrentStep, onComplete, persistData, storageKey])
+
+  const resetWizard = useCallback(() => {
+    setCurrentStep(0)
+    setStepData({})
+    setCompletedSteps(new Set())
+    setError(null)
+    
+    if (persistData && typeof window !== 'undefined') {
+      localStorage.removeItem(storageKey)
+    }
+  }, [persistData, storageKey])
+
+  const isStepCompleted = useCallback((stepIndex: number) => {
+    return completedSteps.has(stepIndex)
+  }, [completedSteps])
+
+  const isStepAccessible = useCallback((stepIndex: number) => {
+    if (stepIndex === 0) return true
+    if (allowStepSkip) return true
+    
+    // Check if all previous steps are completed
+    for (let i = 0; i < stepIndex; i++) {
+      if (!completedSteps.has(i) && !steps[i].isOptional) {
+        return false
+      }
+    }
+    
+    return true
+  }, [completedSteps, allowStepSkip, steps])
+
+  const value: WizardContextValue = {
+    steps,
+    currentStep,
+    stepData,
+    isLoading,
+    error,
+    goToNext,
+    goToPrevious,
+    goToStep,
+    updateStepData: (data: any) => updateStepData(steps[currentStep].id, data),
+    validateCurrentStep,
+    completeWizard,
+    resetWizard,
+    isStepCompleted,
+    isStepAccessible,
+    canGoNext: currentStep < steps.length - 1,
+    canGoPrevious: allowBackNavigation && currentStep > 0
+  }
+
+  return (
+    <FormWizardContext.Provider value={value}>
+      {children}
+    </FormWizardContext.Provider>
+  )
+}

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

@@ -0,0 +1,118 @@
+"use client"
+
+import React from "react"
+import { motion } from "framer-motion"
+import { ChevronLeft, ChevronRight, Check, Loader2 } from "lucide-react"
+import { Button } from "../ui/button"
+import { cn } from "../../lib/utils"
+import { useFormWizard } from "./form-wizard-context"
+
+interface FormWizardNavigationProps {
+  className?: string
+  showStepIndicator?: boolean
+  previousText?: string
+  nextText?: string
+  completeText?: string
+  loadingText?: string
+  onPreviousClick?: () => void
+  onNextClick?: () => void
+  onCompleteClick?: () => void
+}
+
+export const FormWizardNavigation: React.FC<FormWizardNavigationProps> = ({
+  className,
+  showStepIndicator = true,
+  previousText = "Previous",
+  nextText = "Next",
+  completeText = "Complete",
+  loadingText = "Processing...",
+  onPreviousClick,
+  onNextClick,
+  onCompleteClick
+}) => {
+  const {
+    steps,
+    currentStep,
+    isLoading,
+    canGoNext,
+    canGoPrevious,
+    goToNext,
+    goToPrevious,
+    completeWizard
+  } = useFormWizard()
+
+  const isLastStep = currentStep === steps.length - 1
+  const currentStepObj = steps[currentStep]
+
+  const handlePrevious = () => {
+    onPreviousClick?.()
+    goToPrevious()
+  }
+
+  const handleNext = () => {
+    if (isLastStep) {
+      onCompleteClick?.()
+      completeWizard()
+    } else {
+      onNextClick?.()
+      goToNext()
+    }
+  }
+
+  return (
+    <div className={cn("flex items-center justify-between", className)}>
+      <div className="flex items-center gap-2">
+        <Button
+          type="button"
+          variant="outline"
+          onClick={handlePrevious}
+          disabled={!canGoPrevious || isLoading}
+          className={cn(
+            "transition-all duration-200",
+            !canGoPrevious && "invisible"
+          )}
+        >
+          <ChevronLeft className="w-4 h-4 mr-1" />
+          {previousText}
+        </Button>
+
+        {showStepIndicator && (
+          <motion.div
+            initial={{ opacity: 0, scale: 0.9 }}
+            animate={{ opacity: 1, scale: 1 }}
+            className="px-3 py-1 text-sm text-muted-foreground"
+          >
+            Step {currentStep + 1} of {steps.length}
+            {currentStepObj.isOptional && (
+              <span className="ml-1 text-xs">(Optional)</span>
+            )}
+          </motion.div>
+        )}
+      </div>
+
+      <Button
+        type="button"
+        onClick={handleNext}
+        disabled={isLoading || (!canGoNext && !isLastStep)}
+        className="min-w-[120px]"
+      >
+        {isLoading ? (
+          <>
+            <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+            {loadingText}
+          </>
+        ) : isLastStep ? (
+          <>
+            <Check className="w-4 h-4 mr-2" />
+            {completeText}
+          </>
+        ) : (
+          <>
+            {nextText}
+            <ChevronRight className="w-4 h-4 ml-1" />
+          </>
+        )}
+      </Button>
+    </div>
+  )
+}

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

@@ -0,0 +1,193 @@
+"use client"
+
+import React from "react"
+import { motion } from "framer-motion"
+import { CheckCircle, Circle, XCircle } from "lucide-react"
+import { cn } from "../../lib/utils"
+import { useFormWizard } from "./form-wizard-context"
+import { FormWizardProps } from "./types"
+
+interface FormWizardProgressProps {
+  className?: string
+  progressType?: FormWizardProps['progressType']
+  orientation?: FormWizardProps['orientation']
+  showStepNumbers?: boolean
+  showStepTitles?: boolean
+  stepIconPosition?: FormWizardProps['stepIconPosition']
+  completedStepIcon?: React.ReactNode
+  activeStepIcon?: React.ReactNode
+  errorStepIcon?: React.ReactNode
+}
+
+export const FormWizardProgress: React.FC<FormWizardProgressProps> = ({
+  className,
+  progressType = 'linear',
+  orientation = 'horizontal',
+  showStepNumbers = true,
+  showStepTitles = true,
+  stepIconPosition = 'top',
+  completedStepIcon = <CheckCircle className="w-5 h-5" />,
+  activeStepIcon,
+  errorStepIcon = <XCircle className="w-5 h-5" />
+}) => {
+  const { steps, currentStep, isStepCompleted, isStepAccessible, error } = useFormWizard()
+
+  if (progressType === 'linear') {
+    return (
+      <div className={cn(
+        "relative",
+        orientation === 'vertical' ? "flex flex-col space-y-8" : "flex items-center justify-between",
+        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
+
+          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>
+
+                {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>
+                    )}
+                  </div>
+                )}
+
+                {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>
+          )
+        })}
+      </div>
+    )
+  }
+
+  if (progressType === 'dots') {
+    return (
+      <div className={cn("flex items-center justify-center space-x-2", className)}>
+        {steps.map((_, index) => {
+          const isActive = index === currentStep
+          const isCompleted = isStepCompleted(index)
+          
+          return (
+            <motion.div
+              key={index}
+              initial={{ scale: 0.8 }}
+              animate={{ scale: isActive ? 1.2 : 1 }}
+              className={cn(
+                "rounded-full transition-all duration-300",
+                isActive ? "w-3 h-3 bg-primary" : "w-2 h-2",
+                isCompleted && !isActive && "bg-primary/60",
+                !isActive && !isCompleted && "bg-muted"
+              )}
+            />
+          )
+        })}
+      </div>
+    )
+  }
+
+  if (progressType === 'circular') {
+    const progress = ((currentStep + 1) / steps.length) * 100
+    const circumference = 2 * Math.PI * 40 // radius = 40
+    const strokeDashoffset = circumference - (progress / 100) * circumference
+
+    return (
+      <div className={cn("relative w-32 h-32", className)}>
+        <svg className="w-full h-full -rotate-90">
+          <circle
+            cx="64"
+            cy="64"
+            r="40"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="8"
+            className="text-muted"
+          />
+          <motion.circle
+            cx="64"
+            cy="64"
+            r="40"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="8"
+            strokeDasharray={circumference}
+            initial={{ strokeDashoffset: circumference }}
+            animate={{ strokeDashoffset }}
+            className="text-primary"
+            transition={{ duration: 0.5 }}
+          />
+        </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-sm text-muted-foreground">of {steps.length}</p>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  return null
+}

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

@@ -0,0 +1,100 @@
+"use client"
+
+import React from "react"
+import { motion, AnimatePresence } from "framer-motion"
+import { cn } from "../../lib/utils"
+import { useFormWizard } from "./form-wizard-context"
+import { FormWizardProps } from "./types"
+
+interface FormWizardStepProps {
+  className?: string
+  animationType?: FormWizardProps['animationType']
+  animationDuration?: number
+}
+
+const animations = {
+  slide: {
+    initial: (direction: number) => ({
+      x: direction > 0 ? 1000 : -1000,
+      opacity: 0
+    }),
+    animate: {
+      x: 0,
+      opacity: 1
+    },
+    exit: (direction: number) => ({
+      x: direction < 0 ? 1000 : -1000,
+      opacity: 0
+    })
+  },
+  fade: {
+    initial: { opacity: 0 },
+    animate: { opacity: 1 },
+    exit: { opacity: 0 }
+  },
+  scale: {
+    initial: { opacity: 0, scale: 0.8 },
+    animate: { opacity: 1, scale: 1 },
+    exit: { opacity: 0, scale: 0.8 }
+  },
+  none: {
+    initial: {},
+    animate: {},
+    exit: {}
+  }
+}
+
+export const FormWizardStep: React.FC<FormWizardStepProps> = ({
+  className,
+  animationType = 'slide',
+  animationDuration = 0.3
+}) => {
+  const { steps, currentStep, goToNext, goToPrevious, goToStep, updateStepData, stepData } = useFormWizard()
+  const [direction, setDirection] = React.useState(0)
+  const previousStep = React.useRef(currentStep)
+
+  React.useEffect(() => {
+    setDirection(currentStep > previousStep.current ? 1 : -1)
+    previousStep.current = currentStep
+  }, [currentStep])
+
+  const currentStepObj = steps[currentStep]
+  const isFirstStep = currentStep === 0
+  const isLastStep = currentStep === steps.length - 1
+
+  const stepContentProps = {
+    currentStep,
+    totalSteps: steps.length,
+    goToNext,
+    goToPrevious,
+    goToStep,
+    isFirstStep,
+    isLastStep,
+    stepData: stepData[currentStepObj.id] || {},
+    updateStepData: (data: any) => updateStepData(currentStepObj.id, data)
+  }
+
+  const content = typeof currentStepObj.content === 'function'
+    ? currentStepObj.content(stepContentProps)
+    : currentStepObj.content
+
+  return (
+    <AnimatePresence mode="wait" custom={direction}>
+      <motion.div
+        key={currentStep}
+        custom={direction}
+        variants={animations[animationType]}
+        initial="initial"
+        animate="animate"
+        exit="exit"
+        transition={{
+          duration: animationDuration,
+          ease: "easeInOut"
+        }}
+        className={cn("w-full", className)}
+      >
+        {content}
+      </motion.div>
+    </AnimatePresence>
+  )
+}