@moontra/moonui 3.4.0 → 4.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moontra/moonui",
-  "version": "3.4.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__/select.test.tsx

@@ -138,8 +138,10 @@ describe('Select Components', () => {
         <SelectTrigger variant="standard">Content</SelectTrigger>
       )
 
+      // Varyantlar artık ham `gray-*` yerine semantik token'lara bağlı
+      // (issue #263/#268: tema ve karanlık mod hardcoded paleti etkileyemiyordu).
       let trigger = screen.getByTestId('select-trigger')
-      expect(trigger).toHaveClass('border border-gray-300')
+      expect(trigger).toHaveClass('border border-input')
 
       rerender(<SelectTrigger variant="outline">Content</SelectTrigger>)
       trigger = screen.getByTestId('select-trigger')
@@ -147,7 +149,7 @@ describe('Select Components', () => {
 
       rerender(<SelectTrigger variant="ghost">Content</SelectTrigger>)
       trigger = screen.getByTestId('select-trigger')
-      expect(trigger).toHaveClass('border-none bg-gray-100')
+      expect(trigger).toHaveClass('border-none bg-muted')
 
       rerender(<SelectTrigger variant="underline">Content</SelectTrigger>)
       trigger = screen.getByTestId('select-trigger')
@@ -702,4 +704,24 @@ describe('Select Components', () => {
       expect(trigger).toHaveAttribute('data-success', 'true')
     })
   })
+
+  describe('Erişilebilirlik — error durumu (#268)', () => {
+    it('error verildiğinde aria-invalid set edilir', () => {
+      // Regresyon: `error` yalnızca görsel `border-error` + `data-error` üretiyordu;
+      // yardımcı teknolojiye hiç duyurulmuyordu (Input/Textarea aynı kavramda
+      // `aria-invalid` set ediyor).
+      render(<SelectTrigger error>Content</SelectTrigger>)
+      expect(screen.getByTestId('select-trigger')).toHaveAttribute('aria-invalid', 'true')
+    })
+
+    it('error verilmediğinde aria-invalid basılmaz', () => {
+      render(<SelectTrigger>Content</SelectTrigger>)
+      expect(screen.getByTestId('select-trigger')).not.toHaveAttribute('aria-invalid')
+    })
+
+    it('error string olarak da verilebilir', () => {
+      render(<SelectTrigger error="Zorunlu alan">Content</SelectTrigger>)
+      expect(screen.getByTestId('select-trigger')).toHaveAttribute('aria-invalid', 'true')
+    })
+  })
 })

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

@@ -83,8 +83,8 @@ describe('Switch Component', () => {
       expect(switchElement).toHaveClass('data-[state=checked]:bg-warning')
     })
 
-    it('renders danger variant correctly', () => {
-      render(<Switch variant="danger" data-testid="switch" />)
+    it('renders destructive variant correctly', () => {
+      render(<Switch variant="destructive" data-testid="switch" />)
       const switchElement = screen.getByTestId('switch')
       expect(switchElement).toHaveClass('data-[state=checked]:bg-error')
     })
@@ -331,7 +331,7 @@ describe('Switch Component', () => {
         <Switch
           loading
           size="sm"
-          variant="danger"
+          variant="destructive"
           leftIcon={<span>Left</span>}
           description="Loading switch"
           data-testid="switch"
@@ -369,4 +369,37 @@ describe('Switch Component', () => {
       expect(switchElement).toBeInTheDocument()
     })
   })
+
+  describe('description ↔ aria-describedby bağı (#271)', () => {
+    it('description verildiğinde switch ile programatik olarak ilişkilendirilir', () => {
+      // Regresyon: description düz <span> olarak render ediliyor ama Root'a
+      // hiç bağlanmıyordu — ekran okuyucu açıklamayı switch ile ilişkilendiremiyordu.
+      render(<Switch description="Bildirimleri aç" data-testid="switch" />)
+
+      const el = screen.getByTestId('switch')
+      const describedBy = el.getAttribute('aria-describedby')
+      expect(describedBy).toBeTruthy()
+
+      const descEl = document.getElementById(describedBy!)
+      expect(descEl).toHaveTextContent('Bildirimleri aç')
+    })
+
+    it('description yoksa aria-describedby basılmaz', () => {
+      render(<Switch data-testid="switch" />)
+      expect(screen.getByTestId('switch')).not.toHaveAttribute('aria-describedby')
+    })
+
+    it('tüketicinin kendi aria-describedby değeri korunur', () => {
+      render(
+        <>
+          <span id="dis">Harici açıklama</span>
+          <Switch description="Dahili" aria-describedby="dis" data-testid="switch" />
+        </>
+      )
+
+      const describedBy = screen.getByTestId('switch').getAttribute('aria-describedby')!
+      expect(describedBy.split(' ')).toContain('dis')
+      expect(describedBy.split(' ').length).toBe(2)
+    })
+  })
 })

package/src/components/ui/alert.tsx

@@ -23,7 +23,10 @@ const alertVariants = cva(
                 success: "bg-success/10 text-success border-success/30",
                 warning: "bg-warning/10 text-warning border-warning/30",
                 error: "bg-destructive/10 text-destructive border-destructive/30",
-                info: "bg-blue-500/10 text-blue-500 border-blue-500/30",
+                // `--info` token'ı (tokens.css) blue-500 ile birebir aynı değeri
+                // taşır → görsel değişiklik yok, ancak varyant artık temaya ve
+                // karanlık moda duyarlı. Kardeş varyantlarla simetrik.
+                info: "bg-info/10 text-info border-info/30",
             },
             size: {
                 sm: "py-2 text-xs",
@@ -114,7 +117,7 @@ const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
                     <button
                         onClick={onClose}
                         className="absolute right-3 top-3 inline-flex h-6 w-6 items-center justify-center rounded-full opacity-70 transition-opacity hover:opacity-100"
-                        aria-label="Kapat"
+                        aria-label="Close alert"
                     >
                         <X className="h-4 w-4" />
                     </button>

package/src/components/ui/avatar.tsx

@@ -85,16 +85,28 @@ const AvatarFallback = React.forwardRef<
 AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
 
 // Avatar Group Component for displaying multiple avatars
-interface AvatarGroupProps extends React.HTMLAttributes<HTMLDivElement> {
-  limit?: number;
-  avatars: React.ReactNode[];
+//
+// KIRICI (issue #260): prop sözleşmesi `limit`/`avatars: ReactNode[]` idi;
+// pro paketteki kardeşi (`MoonUIAvatarGroupPro`) ise `max`/`children` kullanıyordu
+// — aynı bileşen ailesi için iki farklı API. Standart React deseni (children)
+// kanonik kabul edilip free tarafı pro'ya hizalandı.
+//
+// Geçiş:  <AvatarGroup limit={3} avatars={[<Avatar/>, <Avatar/>]} />
+//     →   <AvatarGroup max={3}><Avatar/><Avatar/></AvatarGroup>
+export interface AvatarGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Gösterilecek en fazla avatar sayısı; kalanlar "+N" olarak özetlenir. */
+  max?: number;
+  /** Avatar bileşenleri. */
+  children?: React.ReactNode;
+  /** Avatar'lar arası üst üste binme miktarı (px, negatif). */
   overlapOffset?: number;
 }
 
 const AvatarGroup = React.forwardRef<HTMLDivElement, AvatarGroupProps>(
-  ({ className, limit, avatars, overlapOffset = -8, ...props }, ref) => {
-    const visibleAvatars = limit ? avatars.slice(0, limit) : avatars;
-    const remainingCount = limit ? Math.max(0, avatars.length - limit) : 0;
+  ({ className, max, children, overlapOffset = -8, ...props }, ref) => {
+    const childrenArray = React.Children.toArray(children);
+    const visibleAvatars = max ? childrenArray.slice(0, max) : childrenArray;
+    const remainingCount = max ? Math.max(0, childrenArray.length - max) : 0;
 
     return (
       <div

package/src/components/ui/badge.tsx

@@ -21,11 +21,15 @@ const badgeVariants = cva(
   {
     variants: {
       variant: {
+        // KIRICI (issue #261): önceden ham `gray-900`/`white` kullanılıyordu;
+        // aynı varyant pro pakette token'lıydı → free ve pro `primary` için
+        // farklı renk üretiyordu. Artık token'a bağlı (tema/karanlık moda duyarlı).
+        // `primary` VARSAYILAN varyant olduğu için görünür bir renk değişimidir.
         primary: [
-          "border-transparent bg-gray-900 text-white",
-          "hover:bg-gray-800 dark:hover:bg-gray-700",
-          "focus-visible:ring-gray-500/30 dark:focus-visible:ring-gray-400/40",
-          "dark:bg-gray-700 dark:text-gray-50 dark:shadow-inner dark:shadow-gray-950/10",
+          "border-transparent bg-primary text-primary-foreground",
+          "hover:bg-primary/90",
+          "focus-visible:ring-primary/30 dark:focus-visible:ring-primary/40",
+          "dark:bg-primary/90 dark:shadow-inner dark:shadow-primary/10",
         ],
         secondary: [
           "border-transparent bg-secondary text-secondary-foreground",
@@ -127,7 +131,7 @@ export interface BadgeProps
  * @param props.rightIcon - Badge'in sağında görüntülenecek ikon
  * @param props.noAutoSpacing - Otomatik spacing'i devre dışı bırak
  */
-function Badge({
+const Badge = React.forwardRef<HTMLDivElement, BadgeProps>(({
   className,
   variant,
   size,
@@ -141,7 +145,7 @@ function Badge({
   noAutoSpacing,
   children,
   ...props
-}: BadgeProps) {
+}, ref) => {
   // Auto-assign icons and content for special variants
   let autoLeftIcon = leftIcon;
   let autoChildren = children;
@@ -169,14 +173,15 @@ function Badge({
   }
 
   return (
-    <div 
+    <div
+      ref={ref}
       className={cn(
-        "moonui-theme", 
-        badgeVariants({ variant, size, radius }), 
+        "moonui-theme",
+        badgeVariants({ variant, size, radius }),
         // Remove auto-spacing if noAutoSpacing is true
         noAutoSpacing && "mr-0 mb-0",
         className
-      )} 
+      )}
       data-removable={removable ? "" : undefined}
       {...props}
     >
@@ -234,6 +239,8 @@ function Badge({
       )}
     </div>
   );
-}
+});
+
+Badge.displayName = "Badge";
 
 export { Badge, badgeVariants };

package/src/components/ui/index.ts

@@ -34,6 +34,7 @@ export {
 
 export type {
     AvatarProps as MoonUIAvatarProps,
+    AvatarGroupProps as MoonUIAvatarGroupProps,
 } from "./avatar";
 
 // Badge
@@ -340,6 +341,11 @@ export {
     SelectScrollDownButton as MoonUISelectScrollDownButton,
 } from "./select";
 
+export type {
+    SelectTriggerProps as MoonUISelectTriggerProps,
+    SelectItemProps as MoonUISelectItemProps,
+} from "./select";
+
 // Separator
 export { Separator as MoonUISeparator } from "./separator";
 

package/src/components/ui/select.tsx

@@ -3,6 +3,7 @@
 import * as React from "react"
 import * as SelectPrimitive from "@radix-ui/react-select"
 import { Check, ChevronDown, ChevronUp, Loader2 } from "lucide-react"
+import { cva } from "class-variance-authority"
 
 import { cn } from "../../lib/utils"
 
@@ -24,7 +25,51 @@ const SelectValue = SelectPrimitive.Value
 type SelectTriggerVariant = "standard" | "outline" | "ghost" | "underline";
 type SelectTriggerSize = "sm" | "md" | "lg";
 
-interface SelectTriggerProps extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> {
+/**
+ * Trigger varyantları `cva()` ile yönetilir (kütüphane geneli desen). Önceden
+ * `variant === "x" && "..."` manuel zincirlemesi kullanılıyor ve tüm renkler ham
+ * `gray-*` paletiyle yazılıyordu — tema/karanlık mod bu değerleri etkileyemiyordu.
+ * Artık semantik token'lara bağlı (`border-input`, `bg-background`, `bg-muted`…).
+ */
+const selectTriggerVariants = cva(
+  [
+    "flex w-full items-center justify-between gap-1 rounded-md transition-all duration-200",
+    "disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+    "focus-visible:outline-none text-foreground",
+  ],
+  {
+    variants: {
+      variant: {
+        standard:
+          "border border-input bg-background hover:border-ring focus-visible:ring-2 focus-visible:ring-primary/30 focus-visible:border-primary",
+        outline:
+          "border border-input bg-transparent hover:border-ring focus-visible:ring-2 focus-visible:ring-primary/30 focus-visible:border-primary",
+        ghost:
+          "border-none bg-muted hover:bg-muted/80 focus-visible:ring-2 focus-visible:ring-primary/30",
+        underline:
+          "border-t-0 border-l-0 border-r-0 border-b border-input rounded-none px-0 bg-transparent hover:border-ring focus-visible:ring-0 focus-visible:border-b-2 focus-visible:border-primary",
+      },
+      size: {
+        sm: "h-8 text-xs px-2",
+        md: "h-10 text-sm px-3",
+        lg: "h-12 text-base px-4",
+      },
+      state: {
+        none: "",
+        error: "border-error focus-visible:ring-error/30 focus-visible:border-error",
+        success:
+          "border-success focus-visible:ring-success/30 focus-visible:border-success",
+      },
+    },
+    defaultVariants: {
+      variant: "standard",
+      size: "md",
+      state: "none",
+    },
+  }
+)
+
+export interface SelectTriggerProps extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> {
   /** Visual variant */
   variant?: SelectTriggerVariant;
   /** Size */
@@ -44,45 +89,36 @@ interface SelectTriggerProps extends React.ComponentPropsWithoutRef<typeof Selec
 const SelectTrigger = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Trigger>,
   SelectTriggerProps
->(({ className, children, variant = "standard", size = "md", error, success, loading, leftIcon, rightIcon, ...props }, ref) => (
+>(({ className, children, variant, size, error, success, loading, leftIcon, rightIcon, ...props }, ref) => (
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      /* Base styles */
-      "flex w-full items-center justify-between gap-1 rounded-md transition-all duration-200",
-      "disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
-      "focus-visible:outline-none",
-      /* Error state */
-      error && "border-error focus-visible:ring-error/30 focus-visible:border-error",
-      /* Success state */
-      success && "border-success focus-visible:ring-success/30 focus-visible:border-success",
-      /* Size variants */
-      size === "sm" && "h-8 text-xs px-2",
-      size === "md" && "h-10 text-sm px-3",
-      size === "lg" && "h-12 text-base px-4",
-      /* Visual variants */
-      variant === "standard" && "border border-gray-300 dark:border-gray-700 bg-background dark:bg-gray-800/80 dark:shadow-inner dark:shadow-gray-950/10 dark:text-gray-200 hover:border-gray-400 dark:hover:border-gray-600 focus-visible:ring-2 focus-visible:ring-primary/30 dark:focus-visible:ring-primary/20 focus-visible:border-primary dark:focus-visible:border-primary/80",
-      variant === "outline" && "border border-gray-300 dark:border-gray-700 bg-transparent dark:text-gray-200 hover:border-gray-400 dark:hover:border-gray-600 focus-visible:ring-2 focus-visible:ring-primary/30 dark:focus-visible:ring-primary/20 focus-visible:border-primary dark:focus-visible:border-primary/80",
-      variant === "ghost" && "border-none bg-gray-100 dark:bg-gray-800 dark:shadow-inner dark:shadow-gray-950/10 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 focus-visible:ring-2 focus-visible:ring-primary/30 dark:focus-visible:ring-primary/20",
-      variant === "underline" && "border-t-0 border-l-0 border-r-0 border-b border-gray-300 dark:border-gray-600 rounded-none px-0 dark:text-gray-200 dark:bg-transparent hover:border-gray-400 dark:hover:border-gray-500 focus-visible:ring-0 focus-visible:border-b-2 focus-visible:border-primary dark:focus-visible:border-primary/80",
+      selectTriggerVariants({
+        variant,
+        size,
+        state: error ? "error" : success ? "success" : "none",
+      }),
       className
     )}
     {...props}
     disabled={props.disabled || loading}
+    // `error` görsel olarak işaretleniyordu ama yardımcı teknolojiye hiç
+    // duyurulmuyordu; Input/Textarea aynı kavramda `aria-invalid` set ediyor.
+    aria-invalid={error ? true : undefined}
     data-error={error ? true : undefined}
     data-success={success ? true : undefined}
     data-loading={loading ? true : undefined}
   >
     <div className="flex items-center flex-1 gap-2">
       {leftIcon && (
-        <span className="flex items-center justify-center text-gray-500 dark:text-gray-400">
+        <span className="flex items-center justify-center text-muted-foreground">
           {leftIcon}
         </span>
       )}
       {loading ? (
         <div className="flex items-center gap-2">
-          <Loader2 className="h-3.5 w-3.5 animate-spin text-muted-foreground dark:text-gray-400" />
-          <span className="text-muted-foreground dark:text-gray-400">Loading...</span>
+          <Loader2 className="h-3.5 w-3.5 animate-spin text-muted-foreground" />
+          <span className="text-muted-foreground">Loading...</span>
         </div>
       ) : children}
     </div>
@@ -198,7 +234,7 @@ SelectLabel.displayName = SelectPrimitive.Label.displayName
 type SelectItemVariant = "default" | "subtle" | "destructive" | "success" | "warning";
 type SelectItemSize = "sm" | "md" | "lg";
 
-interface SelectItemProps extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item> {
+export interface SelectItemProps extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item> {
   /** Visual variant */
   variant?: SelectItemVariant;
   /** Size */