@moontra/moonui 3.3.0 → 4.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moontra/moonui",
-  "version": "3.3.0",
+  "version": "4.0.0",
   "description": "Premium React component library with modern design and customization",
   "author": "MoonUI",
   "license": "MIT",

package/src/components/ui/__tests__/alert.test.tsx

@@ -75,9 +75,9 @@ describe('Alert Components', () => {
       it('renders info variant correctly', () => {
         render(<Alert variant="info" data-testid="alert">Test</Alert>)
         const alert = screen.getByTestId('alert')
-        expect(alert).toHaveClass('bg-blue-500/10')
-        expect(alert).toHaveClass('text-blue-500')
-        expect(alert).toHaveClass('border-blue-500/30')
+        expect(alert).toHaveClass('bg-info/10')
+        expect(alert).toHaveClass('text-info')
+        expect(alert).toHaveClass('border-info/30')
       })
 
       it('uses default variant as default', () => {
@@ -222,7 +222,7 @@ describe('Alert Components', () => {
         const alert = screen.getByTestId('alert')
         const closeButton = alert.querySelector('button')
         expect(closeButton).toBeInTheDocument()
-        expect(closeButton).toHaveAttribute('aria-label', 'Kapat')
+        expect(closeButton).toHaveAttribute('aria-label', 'Close alert')
       })
 
       it('does not render close button when closable is true but onClose is not provided', () => {
@@ -281,7 +281,7 @@ describe('Alert Components', () => {
         render(<Alert closable onClose={handleClose} data-testid="alert">Test</Alert>)
         const alert = screen.getByTestId('alert')
         const closeButton = alert.querySelector('button')
-        expect(closeButton).toHaveAttribute('aria-label', 'Kapat')
+        expect(closeButton).toHaveAttribute('aria-label', 'Close alert')
       })
     })
   })

package/src/components/ui/__tests__/avatar.test.tsx

@@ -300,8 +300,8 @@ describe('Avatar Component', () => {
       <Avatar key="5"><AvatarFallback>A5</AvatarFallback></Avatar>,
     ]
 
-    it('renders all avatars when no limit is set', () => {
-      render(<AvatarGroup avatars={mockAvatars} />)
+    it('renders all avatars when no max is set', () => {
+      render(<AvatarGroup>{mockAvatars}</AvatarGroup>)
       expect(screen.getByText('A1')).toBeInTheDocument()
       expect(screen.getByText('A2')).toBeInTheDocument()
       expect(screen.getByText('A3')).toBeInTheDocument()
@@ -309,8 +309,8 @@ describe('Avatar Component', () => {
       expect(screen.getByText('A5')).toBeInTheDocument()
     })
 
-    it('limits avatars when limit is set', () => {
-      render(<AvatarGroup avatars={mockAvatars} limit={3} />)
+    it('limits avatars when max is set', () => {
+      render(<AvatarGroup max={3}>{mockAvatars}</AvatarGroup>)
       expect(screen.getByText('A1')).toBeInTheDocument()
       expect(screen.getByText('A2')).toBeInTheDocument()
       expect(screen.getByText('A3')).toBeInTheDocument()
@@ -318,31 +318,31 @@ describe('Avatar Component', () => {
       expect(screen.queryByText('A5')).not.toBeInTheDocument()
     })
 
-    it('shows remaining count when limit is exceeded', () => {
-      render(<AvatarGroup avatars={mockAvatars} limit={3} />)
+    it('shows remaining count when max is exceeded', () => {
+      render(<AvatarGroup max={3}>{mockAvatars}</AvatarGroup>)
       expect(screen.getByText('+2')).toBeInTheDocument()
     })
 
     it('applies custom className', () => {
-      render(<AvatarGroup avatars={mockAvatars} className="custom-group" />)
+      render(<AvatarGroup className="custom-group">{mockAvatars}</AvatarGroup>)
       const group = screen.getByText('A1').closest('.custom-group')
       expect(group).toBeInTheDocument()
     })
 
     it('forwards ref correctly', () => {
       const ref = React.createRef<HTMLDivElement>()
-      render(<AvatarGroup ref={ref} avatars={mockAvatars} />)
+      render(<AvatarGroup ref={ref}>{mockAvatars}</AvatarGroup>)
       expect(ref.current).toBeInstanceOf(HTMLDivElement)
     })
 
     it('applies custom overlap offset', () => {
-      render(<AvatarGroup avatars={mockAvatars} overlapOffset={-12} />)
+      render(<AvatarGroup overlapOffset={-12}>{mockAvatars}</AvatarGroup>)
       // This test verifies the component renders without error with custom offset
       expect(screen.getByText('A1')).toBeInTheDocument()
     })
 
-    it('handles empty avatars array', () => {
-      render(<AvatarGroup avatars={[]} data-testid="avatar-group" />)
+    it('handles empty children', () => {
+      render(<AvatarGroup data-testid="avatar-group" />)
       const group = screen.getByTestId('avatar-group')
       expect(group).toBeInTheDocument()
       expect(group).toHaveClass('flex')
@@ -351,7 +351,7 @@ describe('Avatar Component', () => {
 
     it('handles single avatar', () => {
       const singleAvatar = [<Avatar key="1"><AvatarFallback>SA</AvatarFallback></Avatar>]
-      render(<AvatarGroup avatars={singleAvatar} />)
+      render(<AvatarGroup>{singleAvatar}</AvatarGroup>)
       expect(screen.getByText('SA')).toBeInTheDocument()
       expect(screen.queryByText('+')).not.toBeInTheDocument()
     })

package/src/components/ui/__tests__/badge.test.tsx

@@ -357,8 +357,24 @@ describe('Badge Component', () => {
       
       const badge = screen.getByText('Focusable').parentElement!
       fireEvent.focus(badge)
-      
+
       expect(onFocus).toHaveBeenCalledTimes(1)
     })
   })
+
+  describe('forwardRef (#261)', () => {
+    it('ref kök elemana iletilir', () => {
+      // Regresyon: Badge düz `function Badge(...)` idi — batch'teki diğer 7
+      // bileşen forwardRef kullanırken Badge ref alamıyordu.
+      const ref = React.createRef<HTMLDivElement>()
+      render(<Badge ref={ref}>Etiket</Badge>)
+
+      expect(ref.current).toBeInstanceOf(HTMLDivElement)
+      expect(ref.current).toHaveTextContent('Etiket')
+    })
+
+    it('displayName tanımlı', () => {
+      expect(Badge.displayName).toBe('Badge')
+    })
+  })
 })

package/src/components/ui/__tests__/checkbox.test.tsx

@@ -193,22 +193,28 @@ describe('Checkbox Components', () => {
       it('renders indeterminate state correctly', () => {
         render(<Checkbox indeterminate data-testid="checkbox" />)
         const checkbox = screen.getByTestId('checkbox')
-        expect(checkbox).toHaveAttribute('aria-checked', 'false')
-        expect(checkbox).toHaveAttribute('data-state', 'unchecked')
+        // Radix'in "indeterminate" CheckedState'i `aria-checked="mixed"` üretir —
+        // ekran okuyucu "kısmen seçili" durumunu ancak böyle duyurabilir.
+        expect(checkbox).toHaveAttribute('aria-checked', 'mixed')
+        expect(checkbox).toHaveAttribute('data-state', 'indeterminate')
       })
 
       it('shows minus icon when indeterminate and checked', () => {
         render(<Checkbox indeterminate checked data-testid="checkbox" />)
         const checkbox = screen.getByTestId('checkbox')
-        // Even with checked=true, indeterminate overrides to false
-        expect(checkbox).toHaveAttribute('aria-checked', 'false')
-        expect(checkbox).toHaveAttribute('data-state', 'unchecked')
+        // indeterminate, checked'i ezer: durum "mixed" olur.
+        expect(checkbox).toHaveAttribute('aria-checked', 'mixed')
+        expect(checkbox).toHaveAttribute('data-state', 'indeterminate')
+        // Radix Indicator yalnızca checked VEYA indeterminate durumda render edilir.
+        // Eskiden state "unchecked" kaldığı için Minus ikonu hiç görünmüyordu —
+        // bu assertion o regresyonu bir daha geçirmez.
+        expect(checkbox.querySelector('svg')).toBeInTheDocument()
       })
 
       it('overrides checked state when indeterminate', () => {
         render(<Checkbox checked indeterminate data-testid="checkbox" />)
         const checkbox = screen.getByTestId('checkbox')
-        expect(checkbox).toHaveAttribute('aria-checked', 'false')
+        expect(checkbox).toHaveAttribute('aria-checked', 'mixed')
       })
 
       it('updates indeterminate state via prop', () => {
@@ -218,7 +224,7 @@ describe('Checkbox Components', () => {
 
         rerender(<Checkbox indeterminate={true} data-testid="checkbox" />)
         checkbox = screen.getByTestId('checkbox')
-        expect(checkbox).toHaveAttribute('aria-checked', 'false')
+        expect(checkbox).toHaveAttribute('aria-checked', 'mixed')
       })
     })
 
@@ -244,12 +250,10 @@ describe('Checkbox Components', () => {
           />
         )
         expect(screen.queryByTestId('custom-icon')).not.toBeInTheDocument()
-        
+
         const checkbox = screen.getByTestId('checkbox')
-        // Check that custom icon is not rendered
-        expect(screen.queryByTestId('custom-icon')).not.toBeInTheDocument()
-        // Indeterminate state should show as unchecked
-        expect(checkbox).toHaveAttribute('aria-checked', 'false')
+        // indeterminate, özel ikonu bastırır ve durumu "mixed" yapar.
+        expect(checkbox).toHaveAttribute('aria-checked', 'mixed')
       })
     })