@moontra/moonui-pro 2.8.2 → 2.8.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moontra/moonui-pro",
-  "version": "2.8.2",
+  "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/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(' ')
-}