@moontra/moonui-pro 2.20.2 → 2.20.4

package/src/components/floating-action-button/index.tsx

@@ -1,206 +0,0 @@
-"use client"
-
-import React, { useState } from "react"
-import { motion, AnimatePresence } from "framer-motion"
-import { Plus, X, Lock, Sparkles } from "lucide-react"
-import { cn } from "../../lib/utils"
-import { Card, CardContent } from "../ui/card"
-import { Button } from "../ui/button"
-import { useSubscription } from "../../hooks/use-subscription"
-
-export interface FloatingActionButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  actions?: Array<{
-    icon: React.ReactNode
-    label: string
-    onClick: () => void
-  }>
-  position?: "bottom-right" | "bottom-left" | "top-right" | "top-left"
-  size?: "sm" | "default" | "lg"
-}
-
-const FloatingActionButtonInternal = React.forwardRef<HTMLButtonElement, FloatingActionButtonProps>(
-  ({ 
-    actions = [],
-    position = "bottom-right", 
-    size = "default",
-    className,
-    children,
-    onClick,
-    ...props 
-  }, ref) => {
-    const [isOpen, setIsOpen] = useState(false)
-
-    const sizeClasses = {
-      sm: "h-10 w-10",
-      default: "h-12 w-12",
-      lg: "h-14 w-14"
-    }
-
-    const positionClasses = {
-      "bottom-right": "bottom-4 right-4",
-      "bottom-left": "bottom-4 left-4",
-      "top-right": "top-4 right-4",
-      "top-left": "top-4 left-4"
-    }
-
-    const actionPositions = {
-      "bottom-right": { x: -60, y: 0 },
-      "bottom-left": { x: 60, y: 0 },
-      "top-right": { x: -60, y: 0 },
-      "top-left": { x: 60, y: 0 }
-    }
-
-    const handleMainClick = (e: React.MouseEvent<HTMLButtonElement>) => {
-      if (actions.length > 0) {
-        setIsOpen(!isOpen)
-      } else if (onClick) {
-        onClick(e)
-      }
-    }
-
-    return (
-      <div className={cn("fixed z-50", positionClasses[position])}>
-        {/* Action buttons */}
-        <AnimatePresence>
-          {isOpen && actions.length > 0 && (
-            <div className="absolute">
-              {actions.map((action, index) => (
-                <motion.div
-                  key={index}
-                  initial={{ 
-                    scale: 0, 
-                    opacity: 0,
-                    x: 0,
-                    y: 0
-                  }}
-                  animate={{ 
-                    scale: 1, 
-                    opacity: 1,
-                    x: actionPositions[position].x,
-                    y: actionPositions[position].y * (index + 1) - 10
-                  }}
-                  exit={{ 
-                    scale: 0, 
-                    opacity: 0,
-                    x: 0,
-                    y: 0
-                  }}
-                  transition={{ 
-                    delay: index * 0.05,
-                    type: "spring",
-                    stiffness: 200,
-                    damping: 15
-                  }}
-                  className="absolute flex items-center gap-2"
-                  style={{
-                    transform: `translate(${position.includes('right') ? '0' : '0'}, ${position.includes('bottom') ? '0' : '0'})`
-                  }}
-                >
-                  {/* Label */}
-                  <motion.div
-                    initial={{ opacity: 0, scale: 0.8 }}
-                    animate={{ opacity: 1, scale: 1 }}
-                    exit={{ opacity: 0, scale: 0.8 }}
-                    transition={{ delay: (index + 1) * 0.05 }}
-                    className={cn(
-                      "px-2 py-1 bg-background/90 backdrop-blur-sm text-sm font-medium rounded-md shadow-sm border whitespace-nowrap",
-                      position.includes('right') ? 'mr-2' : 'ml-2'
-                    )}
-                  >
-                    {action.label}
-                  </motion.div>
-                  
-                  {/* Action button */}
-                  <button
-                    onClick={() => {
-                      action.onClick()
-                      setIsOpen(false)
-                    }}
-                    className={cn(
-                      "inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground shadow-lg hover:bg-primary/90 transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
-                      sizeClasses[size]
-                    )}
-                  >
-                    {action.icon}
-                  </button>
-                </motion.div>
-              ))}
-            </div>
-          )}
-        </AnimatePresence>
-
-        {/* Main FAB */}
-        <motion.button
-          ref={ref}
-          className={cn(
-            "inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground shadow-lg hover:bg-primary/90 transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
-            sizeClasses[size],
-            className
-          )}
-          onClick={handleMainClick}
-          whileHover={{ scale: 1.1 }}
-          whileTap={{ scale: 0.9 }}
-          animate={{ rotate: isOpen ? 45 : 0 }}
-          transition={{ duration: 0.2 }}
-        >
-          {children || (actions.length > 0 ? <Plus className="h-5 w-5" /> : <Plus className="h-5 w-5" />)}
-        </motion.button>
-
-        {/* Backdrop */}
-        <AnimatePresence>
-          {isOpen && (
-            <motion.div
-              initial={{ opacity: 0 }}
-              animate={{ opacity: 1 }}
-              exit={{ opacity: 0 }}
-              className="fixed inset-0 z-[-1]"
-              onClick={() => setIsOpen(false)}
-            />
-          )}
-        </AnimatePresence>
-      </div>
-    )
-  }
-)
-
-FloatingActionButtonInternal.displayName = "FloatingActionButtonInternal"
-
-export const FloatingActionButton = React.forwardRef<HTMLButtonElement, FloatingActionButtonProps>(
-  ({ className, ...props }, ref) => {
-    // Check if we're in docs mode or have pro access
-    const { hasProAccess, isLoading } = useSubscription()
-    
-    // In docs mode, always show the component
-    
-    // If not in docs mode and no pro access, show upgrade prompt
-    if (!isLoading && !hasProAccess) {
-      return (
-        <Card className={cn("w-fit", className)}>
-          <CardContent className="py-6 text-center">
-            <div className="space-y-4">
-              <div className="rounded-full bg-purple-100 dark:bg-purple-900/30 p-3 w-fit mx-auto">
-                <Lock className="h-6 w-6 text-purple-600 dark:text-purple-400" />
-              </div>
-              <div>
-                <h3 className="font-semibold text-sm mb-2">Pro Feature</h3>
-                <p className="text-muted-foreground text-xs mb-4">
-                  Floating Action Button is available exclusively to MoonUI Pro subscribers.
-                </p>
-                <a href="/pricing">
-                  <Button size="sm">
-                    <Sparkles className="mr-2 h-4 w-4" />
-                    Upgrade to Pro
-                  </Button>
-                </a>
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-      )
-    }
-
-    return <FloatingActionButtonInternal className={className} ref={ref} {...props} />
-  }
-)
-
-FloatingActionButton.displayName = "FloatingActionButton"

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

@@ -1,335 +0,0 @@
-"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]
-    
-    // Check if automatic validation should be performed
-    const shouldValidateFields = step.requiredFields !== false
-    
-    // First check HTML5 validation for required fields if enabled
-    if (shouldValidateFields && typeof window !== 'undefined') {
-      const stepElement = document.querySelector('[data-wizard-step-content]')
-      if (stepElement) {
-        // If requiredFields is an array, only check those specific fields
-        if (Array.isArray(step.requiredFields)) {
-          const emptyFields: string[] = []
-          
-          step.requiredFields.forEach((fieldName) => {
-            const field = stepElement.querySelector(`[name="${fieldName}"], [id="${fieldName}"]`)
-            if (field) {
-              const htmlField = field as HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement
-              if (field.tagName === 'INPUT' && (field as HTMLInputElement).type === 'checkbox') {
-                if (!(field as HTMLInputElement).checked) {
-                  emptyFields.push(fieldName)
-                }
-              } else if (!htmlField.value || htmlField.value.trim() === '') {
-                emptyFields.push(fieldName)
-              }
-            }
-          })
-          
-          if (emptyFields.length > 0) {
-            setError(`Please fill in the following required fields: ${emptyFields.join(', ')}`)
-            return false
-          }
-        } else {
-          // Default behavior: check all required fields
-          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 result = await step.validation()
-      
-      // Handle boolean return
-      if (typeof result === 'boolean') {
-        if (!result) {
-          setError("Please complete all required fields before proceeding")
-        }
-        return result
-      }
-      
-      // 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
-    } 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

@@ -1,118 +0,0 @@
-"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>
-  )
-}