@moontra/moonui-pro 2.20.0 → 2.20.2

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@moontra/moonui-pro",
-    "version": "2.20.0",
+    "version": "2.20.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",
@@ -30,7 +30,7 @@
     },
     "scripts": {
         "postinstall": "node scripts/postinstall.js",
-        "build": "tsup",
+        "build": "tsup && node scripts/postbuild.js",
         "build:dts": "tsup --dts",
         "dev": "tsup --watch --sourcemap",
         "clean": "rm -rf dist",
@@ -75,7 +75,6 @@
         "react-dom": ">=18.0.0 || ^19.0.0"
     },
     "dependencies": {
-        "@moontra/moonui": "^2.1.9",
         "@radix-ui/react-accordion": "^1.2.11",
         "@radix-ui/react-avatar": "^1.1.10",
         "@radix-ui/react-checkbox": "^1.3.2",
@@ -95,8 +94,10 @@
         "canvas-confetti": "^1.9.3",
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.1",
+        "cmdk": "^1.0.4",
         "date-fns": "^3.6.0",
         "framer-motion": "^11.11.17",
+        "fuse.js": "^7.0.0",
         "lucide-react": "^0.525.0",
         "react-beautiful-dnd": "^13.1.1",
         "react-colorful": "^5.6.1",

package/scripts/postbuild.js

@@ -0,0 +1,27 @@
+#!/usr/bin/env node
+
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+// Add 'use client' to the beginning of dist files
+const files = ['dist/index.mjs', 'dist/index.js'];
+
+files.forEach(file => {
+  const filePath = path.join(__dirname, '..', file);
+  
+  if (fs.existsSync(filePath)) {
+    let content = fs.readFileSync(filePath, 'utf8');
+    
+    if (!content.startsWith('"use client"') && !content.startsWith("'use client'")) {
+      content = '"use client";\n' + content;
+      fs.writeFileSync(filePath, content);
+      console.log(`✅ Added 'use client' to ${file}`);
+    } else {
+      console.log(`✔️ 'use client' already exists in ${file}`);
+    }
+  }
+});

package/src/components/advanced-chart/index.tsx

@@ -775,9 +775,13 @@ export function AdvancedChart({
                   animationBegin={index * 100}
                   shape={(props: any) => {
                     const isHovered = hoveredDataPoint === props.payload
+                    // Extract only the necessary props for the circle element
+                    const { cx, cy, fill } = props
                     return (
                       <circle
-                        {...props}
+                        cx={cx}
+                        cy={cy}
+                        fill={fill}
                         r={isHovered ? 6 : 4}
                         className="transition-all duration-200 hover:r-6"
                         onMouseEnter={() => setHoveredDataPoint(props.payload)}

package/src/components/advanced-forms/index.tsx

@@ -15,6 +15,7 @@ import { MoonUIBadgePro as Badge } from "../ui/badge"
 import { cn } from "../../lib/utils"
 import { Lock, Sparkles, CheckCircle, AlertCircle, Eye, EyeOff, Upload, X } from "lucide-react"
 import { useSubscription } from "../../hooks/use-subscription"
+import { MoonUIPhoneNumberInputPro as PhoneNumberInput } from "../phone-number-input"
 
 interface AdvancedFormField {
   name: string
@@ -31,6 +32,7 @@ interface AdvancedFormField {
   }
   description?: string
   defaultValue?: any
+  defaultCountry?: string // For phone number fields
 }
 
 interface AdvancedFormsProps {
@@ -61,6 +63,19 @@ const AdvancedFormsInternal: React.FC<AdvancedFormsProps> = ({
   const [isSubmitting, setIsSubmitting] = useState(false)
   const [showPasswords, setShowPasswords] = useState<Record<string, boolean>>({})
   const [uploadedFiles, setUploadedFiles] = useState<Record<string, File[]>>({})
+  const [phoneNumbers, setPhoneNumbers] = useState<Record<string, { country: string; number: string }>>(() => {
+    // Initialize phone numbers from default values
+    const initial: Record<string, { country: string; number: string }> = {}
+    fields.forEach(field => {
+      if (field.type === "tel" && field.defaultValue) {
+        initial[field.name] = {
+          country: field.defaultCountry || "US",
+          number: field.defaultValue
+        }
+      }
+    })
+    return initial
+  })
   
   const {
     register,
@@ -68,18 +83,72 @@ const AdvancedFormsInternal: React.FC<AdvancedFormsProps> = ({
     watch,
     formState: { errors, isValid, touchedFields },
     setValue,
-    getValues
+    getValues,
+    setError,
+    clearErrors
   } = useForm<any>({
     mode: "onChange",
     defaultValues: fields.reduce((acc, field) => ({
       ...acc,
-      [field.name]: field.defaultValue || (field.type === "checkbox" ? false : "")
+      [field.name]: field.defaultValue || (field.type === "checkbox" || field.type === "switch" ? false : "")
     }), {})
   })
 
   const watchedValues = watch()
-  const completedFields = Object.keys(touchedFields).length
-  const progress = fields.length > 0 ? (completedFields / fields.length) * 100 : 0
+  
+  // Calculate progress based on valid and filled fields
+  const calculateProgress = () => {
+    let validFields = 0
+    let totalFields = 0
+    
+    fields.forEach(field => {
+      const value = watchedValues[field.name]
+      const hasError = errors[field.name]
+      
+      // Only count required fields or optional fields that have been touched
+      if (!field.required && !touchedFields[field.name] && !value) {
+        return // Skip untouched optional fields
+      }
+      
+      totalFields++
+      
+      // Check if field has value and no errors
+      if (field.type === "checkbox" || field.type === "switch") {
+        if (!field.required || value === true) {
+          if (!hasError) validFields++
+        }
+      } else if (field.type === "file") {
+        if (!field.required || uploadedFiles[field.name]?.length > 0) {
+          if (!hasError) validFields++
+        }
+      } else {
+        if (value && !hasError && value.toString().trim() !== "") {
+          validFields++
+        }
+      }
+    })
+    
+    return totalFields > 0 ? (validFields / totalFields) * 100 : 0
+  }
+  
+  const progress = calculateProgress()
+  
+  // Check if all required fields are valid
+  const isFormValid = () => {
+    for (const field of fields) {
+      if (field.required) {
+        const value = watchedValues[field.name]
+        const hasError = errors[field.name]
+        
+        if (hasError) return false
+        
+        if (field.type === "checkbox" && value !== true) return false
+        if (field.type === "file" && (!uploadedFiles[field.name] || uploadedFiles[field.name].length === 0)) return false
+        if (!value || (typeof value === 'string' && value.trim() === '')) return false
+      }
+    }
+    return true
+  }
 
   const handleFormSubmit = async (data: any) => {
     setIsSubmitting(true)
@@ -144,7 +213,7 @@ const AdvancedFormsInternal: React.FC<AdvancedFormsProps> = ({
         </div>
 
         <div className="relative">
-          {field.type === "text" || field.type === "email" || field.type === "number" || field.type === "url" || field.type === "tel" && (
+          {(field.type === "text" || field.type === "email" || field.type === "number" || field.type === "url") && (
             <Input
               id={field.name}
               type={field.type}
@@ -163,12 +232,58 @@ const AdvancedFormsInternal: React.FC<AdvancedFormsProps> = ({
                 pattern: field.validation?.pattern ? {
                   value: field.validation.pattern,
                   message: "Invalid format"
+                } : field.type === "email" ? {
+                  value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
+                  message: "Please enter a valid email address"
+                } : field.type === "url" ? {
+                  value: /^https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)$/,
+                  message: "Please enter a valid URL"
                 } : undefined,
                 validate: field.validation?.custom
               })}
             />
           )}
 
+          {field.type === "tel" && (
+            <PhoneNumberInput
+              id={field.name}
+              placeholder={field.placeholder}
+              className={cn(error && "border-destructive")}
+              value={phoneNumbers[field.name] || undefined}
+              onChange={(phoneData: { country: string; number: string; fullNumber: string; isValid: boolean }) => {
+                // Update local state
+                setPhoneNumbers(prev => ({
+                  ...prev,
+                  [field.name]: { country: phoneData.country, number: phoneData.number }
+                }))
+                
+                // Update form value
+                setValue(field.name, phoneData.fullNumber)
+                clearErrors(field.name)
+                
+                // Check if required
+                if (field.required && !phoneData.fullNumber) {
+                  setError(field.name, { type: 'required', message: `${field.label} is required` })
+                }
+                
+                // Check custom validation
+                if (phoneData.fullNumber && field.validation?.custom) {
+                  const validationResult = field.validation.custom(phoneData.fullNumber)
+                  if (validationResult !== true) {
+                    setError(field.name, { type: 'custom', message: validationResult })
+                  }
+                }
+              }}
+              defaultCountry={field.defaultCountry || "US"}
+              showFlags={true}
+              showDialCode={true}
+              autoFormat={true}
+              validateOnChange={true}
+              showValidationIcon={true}
+              error={error?.message as string}
+            />
+          )}
+
           {field.type === "password" && (
             <div className="relative">
               <Input
@@ -181,7 +296,16 @@ const AdvancedFormsInternal: React.FC<AdvancedFormsProps> = ({
                   minLength: field.validation?.minLength ? {
                     value: field.validation.minLength,
                     message: `Minimum ${field.validation.minLength} characters required`
-                  } : undefined
+                  } : undefined,
+                  maxLength: field.validation?.maxLength ? {
+                    value: field.validation.maxLength,
+                    message: `Maximum ${field.validation.maxLength} characters allowed`
+                  } : undefined,
+                  pattern: field.validation?.pattern ? {
+                    value: field.validation.pattern,
+                    message: "Invalid format"
+                  } : undefined,
+                  validate: field.validation?.custom
                 })}
               />
               <Button
@@ -208,17 +332,29 @@ const AdvancedFormsInternal: React.FC<AdvancedFormsProps> = ({
               rows={3}
               {...register(field.name, {
                 required: field.required ? `${field.label} is required` : false,
+                minLength: field.validation?.minLength ? {
+                  value: field.validation.minLength,
+                  message: `Minimum ${field.validation.minLength} characters required`
+                } : undefined,
                 maxLength: field.validation?.maxLength ? {
                   value: field.validation.maxLength,
                   message: `Maximum ${field.validation.maxLength} characters allowed`
-                } : undefined
+                } : undefined,
+                validate: field.validation?.custom
               })}
             />
           )}
 
           {field.type === "select" && (
             <Select
-              onValueChange={(value) => setValue(field.name, value)}
+              onValueChange={(value) => {
+                setValue(field.name, value)
+                if (field.required && !value) {
+                  setError(field.name, { type: 'required', message: `${field.label} is required` })
+                } else {
+                  clearErrors(field.name)
+                }
+              }}
               defaultValue={field.defaultValue}
             >
               <SelectTrigger className={cn(error && "border-destructive")}>
@@ -238,10 +374,20 @@ const AdvancedFormsInternal: React.FC<AdvancedFormsProps> = ({
             <div className="flex items-center space-x-2">
               <Checkbox
                 id={field.name}
-                {...register(field.name)}
-                onCheckedChange={(checked: boolean) => setValue(field.name, checked)}
+                {...register(field.name, {
+                  required: field.required ? `${field.label} must be checked` : false
+                })}
+                onCheckedChange={(checked: boolean) => {
+                  setValue(field.name, checked)
+                  if (field.required && !checked) {
+                    setError(field.name, { type: 'required', message: `${field.label} must be checked` })
+                  } else {
+                    clearErrors(field.name)
+                  }
+                }}
+                defaultChecked={field.defaultValue}
               />
-              <Label htmlFor={field.name} className="text-sm">
+              <Label htmlFor={field.name} className="text-sm cursor-pointer">
                 {field.placeholder || "Check this option"}
               </Label>
             </div>
@@ -253,6 +399,7 @@ const AdvancedFormsInternal: React.FC<AdvancedFormsProps> = ({
                 id={field.name}
                 {...register(field.name)}
                 onCheckedChange={(checked: boolean) => setValue(field.name, checked)}
+                defaultChecked={field.defaultValue}
               />
               <Label htmlFor={field.name} className="text-sm">
                 {field.placeholder || "Toggle this option"}
@@ -328,7 +475,7 @@ const AdvancedFormsInternal: React.FC<AdvancedFormsProps> = ({
 
   return (
     <Card className={cn("w-full max-w-4xl", className)}>
-      <CardHeader>
+      <CardHeader className={cn(showProgress && "pb-0")}>
         <div className="flex items-center justify-between">
           <div>
             <CardTitle>{title}</CardTitle>
@@ -340,7 +487,7 @@ const AdvancedFormsInternal: React.FC<AdvancedFormsProps> = ({
         </div>
         
         {showProgress && (
-          <div className="space-y-2">
+          <div className="space-y-2 mt-4">
             <div className="flex justify-between text-sm">
               <span>Progress</span>
               <span>{Math.round(progress)}%</span>
@@ -357,7 +504,7 @@ const AdvancedFormsInternal: React.FC<AdvancedFormsProps> = ({
         )}
       </CardHeader>
       
-      <CardContent>
+      <CardContent className={cn(showProgress && "pt-8")}>
         <form onSubmit={handleSubmit(handleFormSubmit)} className="space-y-6">
           <div className={gridClassName}>
             {fields.map((field, index) => renderField(field, index))}
@@ -365,12 +512,24 @@ const AdvancedFormsInternal: React.FC<AdvancedFormsProps> = ({
           
           <div className="flex items-center justify-between pt-6">
             <div className="text-sm text-muted-foreground">
-              {completedFields}/{fields.length} fields completed
+              {(() => {
+                const requiredFields = fields.filter(f => f.required).length
+                const completedRequired = fields.filter(f => {
+                  if (!f.required) return false
+                  const value = watchedValues[f.name]
+                  const hasError = errors[f.name]
+                  if (hasError) return false
+                  if (f.type === "checkbox") return value === true
+                  if (f.type === "file") return uploadedFiles[f.name]?.length > 0
+                  return value && value.toString().trim() !== ""
+                }).length
+                return `${completedRequired}/${requiredFields} required fields completed`
+              })()}
             </div>
             
             <Button
               type="submit"
-              disabled={isSubmitting || !isValid}
+              disabled={isSubmitting || !isFormValid()}
               className="min-w-32"
             >
               {isSubmitting ? (

package/src/components/calendar/event-dialog.tsx

@@ -36,9 +36,10 @@ const EVENT_TYPES = [
 ] as const
 
 const PRESET_COLORS = [
-  '#3b82f6', '#10b981', '#f59e0b', '#8b5cf6', '#ef4444',
-  '#06b6d4', '#84cc16', '#f97316', '#ec4899', '#6366f1',
-  '#14b8a6', '#eab308', '#f43f5e', '#a855f7', '#22c55e',
+  '#3b82f6', '#10b981', '#f59e0b', '#8b5cf6',
+  '#ef4444', '#06b6d4', '#84cc16', '#f97316',
+  '#ec4899', '#6366f1', '#14b8a6', '#eab308',
+  '#f43f5e', '#a855f7', '#22c55e', '#64748b',
 ]
 
 export function EventDialog({
@@ -303,24 +304,28 @@ export function EventDialog({
                 <Palette className="w-4 h-4" />
                 Color
               </Label>
-              <div className="flex items-center gap-2">
-                <input
-                  type="color"
-                  value={formData.color}
-                  onChange={(e) => setFormData(prev => ({ ...prev, color: e.target.value }))}
-                  className="w-8 h-8 rounded border cursor-pointer"
-                />
-                <div className="flex gap-1">
+              <div className="space-y-2">
+                <div className="flex items-center gap-2">
+                  <input
+                    type="color"
+                    value={formData.color}
+                    onChange={(e) => setFormData(prev => ({ ...prev, color: e.target.value }))}
+                    className="w-8 h-8 rounded border cursor-pointer flex-shrink-0"
+                  />
+                  <span className="text-sm text-muted-foreground">Custom color</span>
+                </div>
+                <div className="grid grid-cols-8 gap-1">
                   {PRESET_COLORS.map((color) => (
                     <button
                       key={color}
                       type="button"
                       onClick={() => setFormData(prev => ({ ...prev, color }))}
                       className={cn(
-                        "w-6 h-6 rounded border-2 hover:scale-110 transition-transform",
-                        formData.color === color ? "border-foreground" : "border-transparent"
+                        "w-full aspect-square rounded border-2 hover:scale-110 transition-transform",
+                        formData.color === color ? "border-foreground shadow-sm" : "border-transparent"
                       )}
                       style={{ backgroundColor: color }}
+                      aria-label={`Select color ${color}`}
                     />
                   ))}
                 </div>