@moontra/moonui-pro 2.19.0 → 2.20.0

package/src/components/file-upload/file-upload.test.tsx

@@ -1,6 +1,7 @@
 import { render, screen, fireEvent, waitFor } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { FileUpload } from './index'
+import React from 'react'
+import MoonUIFileUploadPro from './index'
 
 // Mock FileReader
 const mockFileReader = {
@@ -19,13 +20,13 @@ const createMockFile = (name: string, size: number, type: string) => {
   return file
 }
 
-describe('FileUpload', () => {
+describe('MoonUIFileUploadPro', () => {
   beforeEach(() => {
     jest.clearAllMocks()
   })
 
   it('renders without crashing', () => {
-    render(<FileUpload />)
+    render(<MoonUIFileUploadPro />)
     
     expect(screen.getByText('File Upload')).toBeInTheDocument()
     expect(screen.getByText('Drag and drop files here, or click to select')).toBeInTheDocument()
@@ -33,7 +34,7 @@ describe('FileUpload', () => {
 
   it('renders with custom title and description', () => {
     render(
-      <FileUpload
+      <MoonUIFileUploadPro
         accept="image/*"
         maxSize={5}
         multiple
@@ -46,7 +47,7 @@ describe('FileUpload', () => {
 
   it('handles file selection', async () => {
     const mockOnUpload = jest.fn()
-    render(<FileUpload onUpload={mockOnUpload} />)
+    render(<MoonUIFileUploadPro onUpload={mockOnUpload} />)
     
     const file = createMockFile('test.jpg', 1024, 'image/jpeg')
     const input = screen.getByRole('button', { hidden: true }) // Hidden file input
@@ -60,7 +61,7 @@ describe('FileUpload', () => {
 
   it('validates file size', () => {
     const mockOnUpload = jest.fn()
-    render(<FileUpload onUpload={mockOnUpload} maxSize={1} />)
+    render(<MoonUIFileUploadPro onUpload={mockOnUpload} maxSize={1} />)
     
     const file = createMockFile('large-file.jpg', 2 * 1024 * 1024, 'image/jpeg') // 2MB
     const input = screen.getByRole('button', { hidden: true })
@@ -77,9 +78,9 @@ describe('FileUpload', () => {
   it('validates file type', () => {
     const mockOnUpload = jest.fn()
     render(
-      <FileUpload
+      <MoonUIFileUploadPro
         onUpload={mockOnUpload}
-        allowedTypes={['image/jpeg', 'image/png']}
+        allowedMimeTypes={['image/jpeg', 'image/png']}
       />
     )
     
@@ -96,7 +97,7 @@ describe('FileUpload', () => {
 
   it('handles multiple files', async () => {
     const mockOnUpload = jest.fn()
-    render(<FileUpload onUpload={mockOnUpload} multiple />)
+    render(<MoonUIFileUploadPro onUpload={mockOnUpload} multiple />)
     
     const files = [
       createMockFile('file1.jpg', 1024, 'image/jpeg'),
@@ -113,7 +114,7 @@ describe('FileUpload', () => {
 
   it('respects maxFiles limit', () => {
     const mockOnUpload = jest.fn()
-    render(<FileUpload onUpload={mockOnUpload} maxFiles={2} />)
+    render(<MoonUIFileUploadPro onUpload={mockOnUpload} maxFiles={2} />)
     
     const files = [
       createMockFile('file1.jpg', 1024, 'image/jpeg'),
@@ -132,7 +133,7 @@ describe('FileUpload', () => {
 
   it('handles drag and drop', () => {
     const mockOnUpload = jest.fn()
-    render(<FileUpload onUpload={mockOnUpload} />)
+    render(<MoonUIFileUploadPro onUpload={mockOnUpload} />)
     
     const dropZone = screen.getByText('Drag and drop files here, or click to select').closest('div')
     const file = createMockFile('test.jpg', 1024, 'image/jpeg')
@@ -152,7 +153,7 @@ describe('FileUpload', () => {
 
   it('handles file removal', async () => {
     const mockOnRemove = jest.fn()
-    render(<FileUpload onRemove={mockOnRemove} />)
+    render(<MoonUIFileUploadPro onRemove={mockOnRemove} />)
     
     const file = createMockFile('test.jpg', 1024, 'image/jpeg')
     const input = screen.getByRole('button', { hidden: true })
@@ -171,7 +172,7 @@ describe('FileUpload', () => {
 
   it('shows progress during upload', async () => {
     const mockOnUpload = jest.fn().mockResolvedValue(undefined)
-    render(<FileUpload onUpload={mockOnUpload} />)
+    render(<MoonUIFileUploadPro onUpload={mockOnUpload} />)
     
     const file = createMockFile('test.jpg', 1024, 'image/jpeg')
     const input = screen.getByRole('button', { hidden: true })
@@ -185,7 +186,7 @@ describe('FileUpload', () => {
 
   it('handles upload success', async () => {
     const mockOnUpload = jest.fn().mockResolvedValue(undefined)
-    render(<FileUpload onUpload={mockOnUpload} />)
+    render(<MoonUIFileUploadPro onUpload={mockOnUpload} />)
     
     const file = createMockFile('test.jpg', 1024, 'image/jpeg')
     const input = screen.getByRole('button', { hidden: true })
@@ -199,7 +200,7 @@ describe('FileUpload', () => {
 
   it('handles upload error', async () => {
     const mockOnUpload = jest.fn().mockRejectedValue(new Error('Upload failed'))
-    render(<FileUpload onUpload={mockOnUpload} />)
+    render(<MoonUIFileUploadPro onUpload={mockOnUpload} />)
     
     const file = createMockFile('test.jpg', 1024, 'image/jpeg')
     const input = screen.getByRole('button', { hidden: true })
@@ -213,28 +214,28 @@ describe('FileUpload', () => {
   })
 
   it('is disabled when disabled prop is true', () => {
-    render(<FileUpload disabled />)
+    render(<MoonUIFileUploadPro disabled />)
     
     const dropZone = screen.getByText('Drag and drop files here, or click to select').closest('div')
     expect(dropZone).toHaveClass('cursor-not-allowed')
   })
 
   it('applies custom className', () => {
-    render(<FileUpload className="custom-upload" />)
+    render(<MoonUIFileUploadPro className="custom-upload" />)
     
     const container = screen.getByText('File Upload').closest('div')
     expect(container).toHaveClass('custom-upload')
   })
 
   it('formats file sizes correctly', () => {
-    render(<FileUpload />)
+    render(<MoonUIFileUploadPro />)
     
     // This would be tested through the file display after upload
     // The formatFileSize function should be tested separately
   })
 
   it('displays correct file icons', () => {
-    render(<FileUpload />)
+    render(<MoonUIFileUploadPro />)
     
     // This would be tested through the file display after upload
     // The getFileIcon function should be tested separately

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

@@ -85,7 +85,7 @@ export const FormWizardProgress: React.FC<FormWizardProgressProps> = ({
                             marginLeft: '24px'
                           }}
                         >
-                          <div className="h-full bg-gray-200 dark:bg-gray-700" />
+                          <div className="h-full bg-border" />
                           {index < currentStep && (
                             <motion.div
                               className="absolute inset-0 bg-primary"
@@ -108,8 +108,8 @@ export const FormWizardProgress: React.FC<FormWizardProgressProps> = ({
                           "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",
+                          !isActive && !isCompleted && isAccessible && "border-border bg-background text-muted-foreground hover:border-accent",
+                          !isAccessible && "border-border/50 bg-muted text-muted-foreground/50 cursor-not-allowed",
                           hasError && "border-destructive bg-destructive text-destructive-foreground"
                         )}
                       >
@@ -146,7 +146,7 @@ export const FormWizardProgress: React.FC<FormWizardProgressProps> = ({
             {/* Vertical Progress Line */}
             {steps.length > 1 && (
               <>
-                <div className="absolute left-6 top-8 bottom-8 w-[2px] bg-gray-200 dark:bg-gray-700" />
+                <div className="absolute left-6 top-8 bottom-8 w-[2px] bg-border" />
                 <motion.div
                   className="absolute left-6 top-8 w-[2px] bg-primary"
                   initial={{ height: 0 }}
@@ -179,8 +179,8 @@ export const FormWizardProgress: React.FC<FormWizardProgressProps> = ({
                       "w-12 h-12",
                       isActive && "border-primary bg-primary text-primary-foreground shadow-lg",
                       isCompleted && !isActive && "border-primary bg-primary text-primary-foreground",
-                      !isActive && !isCompleted && isAccessible && "border-gray-300 bg-background text-gray-500 hover:border-gray-400",
-                      !isAccessible && "border-gray-200 bg-gray-50 text-gray-400 cursor-not-allowed",
+                      !isActive && !isCompleted && isAccessible && "border-border bg-background text-muted-foreground hover:border-accent",
+                      !isAccessible && "border-border/50 bg-muted text-muted-foreground/50 cursor-not-allowed",
                       hasError && "border-destructive bg-destructive text-destructive-foreground"
                     )}
                   >
@@ -268,7 +268,7 @@ export const FormWizardProgress: React.FC<FormWizardProgressProps> = ({
             fill="none"
             stroke="currentColor"
             strokeWidth="8"
-            className="text-gray-200 dark:text-gray-700"
+            className="text-border"
           />
           <motion.circle
             cx="72"