@moontra/moonui 6.8.0 → 6.10.0

package/src/components/ui/command.tsx

@@ -26,13 +26,15 @@ const commandVariants = cva(
       },
       size: {
         sm: "min-h-[200px]",
-        default: "min-h-[300px]",
+        md: "min-h-[300px]",
         lg: "min-h-[400px]",
+        /** @deprecated `md` kullanın — #319 kanonik skala; aynı çıktıyı üretir. */
+        default: "min-h-[300px]",
       },
     },
     defaultVariants: {
       variant: "default",
-      size: "default",
+      size: "md",
     },
   }
 )
@@ -167,6 +169,18 @@ const CommandSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <CommandPrimitive.Separator
     ref={ref}
+    /**
+     * #308-6: cmdk, Separator'a `role="separator"` basıyor ve bu eleman
+     * `CommandList`'in (`role="listbox"`) çocuğu oluyor → listbox'ın izinli çocuğu
+     * yalnız `option`/`group` olduğu için axe `aria-required-children` (critical) veriyordu.
+     *
+     * `role` EZİLEMİYOR: cmdk 1.1.1 `{...props, "cmdk-separator":"", role:"separator"}`
+     * sırasıyla yazıyor, yani kendi rolü prop'lardan SONRA geliyor (kaynak doğrulandı).
+     * `aria-hidden` ise prop yayılımının içinde olduğu için geçiyor — ve ayraç zaten
+     * tümüyle dekoratif olduğundan erişilebilirlik ağacından çıkarılması DOĞRU davranış.
+     * Böylece listbox'ın sahiplendiği çocuklar arasında görünmez.
+     */
+    aria-hidden="true"
     className={cn("moonui-theme", "-mx-1 h-px bg-border", className)}
     {...props}
   />
@@ -219,4 +233,17 @@ export {
   CommandItem,
   CommandShortcut,
   CommandSeparator,
+}
+
+// #308-5: Sekiz Props interface'inin HİÇBİRİ export edilmiyordu → tüketici sarmalayıcı
+// yazarken tipi yeniden türetmek zorundaydı.
+export type {
+  CommandProps,
+  CommandDialogProps,
+  CommandInputProps,
+  CommandListProps,
+  CommandEmptyProps,
+  CommandGroupProps,
+  CommandSeparatorProps,
+  CommandItemProps,
 }

package/src/components/ui/date-picker.tsx

@@ -36,10 +36,12 @@ const datePickerVariants = cva(
         ghost: "hover:bg-accent hover:text-accent-foreground",
       },
       size: {
-        default: "h-10 px-4 py-2",
+        md: "h-10 px-4 py-2",
         sm: "h-8 px-3 text-sm",
         lg: "h-12 px-6 text-base",
         icon: "h-10 w-10",
+        /** @deprecated `md` kullanın — #319 kanonik skala; aynı çıktıyı üretir. */
+        default: "h-10 px-4 py-2",
       },
       state: {
         default: "",
@@ -50,7 +52,7 @@ const datePickerVariants = cva(
     },
     defaultVariants: {
       variant: "default",
-      size: "default",
+      size: "md",
       state: "default",
     },
   }

package/src/components/ui/dialog.tsx

@@ -73,12 +73,14 @@ const dialogContentVariants = cva(
             size: {
                 xs: "max-w-xs p-4",
                 sm: "max-w-sm p-5",
-                default: "max-w-lg p-6",
+                lg: "max-w-lg p-6",
                 md: "max-w-md p-6",
-                lg: "max-w-2xl p-7",
-                xl: "max-w-4xl p-8",
+                xl: "max-w-2xl p-7",
+                "2xl": "max-w-4xl p-8",
                 full: "max-w-[95vw] max-h-[95vh] p-6",
-            },
+                /** @deprecated `lg` kullanın — #319 kanonik skala; aynı çıktıyı üretir. */
+                default: "max-w-lg p-6",
+              },
             radius: {
                 none: "rounded-none",
                 sm: "rounded-md",
@@ -103,7 +105,7 @@ const dialogContentVariants = cva(
         },
         defaultVariants: {
             variant: "default",
-            size: "default",
+            size: "lg",
             radius: "default",
             animation: "default",
             position: "default",

package/src/components/ui/popover-pro.tsx

@@ -171,10 +171,12 @@ const popoverContentVariants = cva(
       },
       size: {
         sm: "w-56 p-3",
-        default: "w-72 p-4",
+        md: "w-72 p-4",
         lg: "w-96 p-6",
         xl: "w-[32rem] p-8",
-        auto: "w-auto p-4"
+        auto: "w-auto p-4",
+        /** @deprecated `md` kullanın — #319 kanonik skala; aynı çıktıyı üretir. */
+        default: "w-72 p-4",
       },
       overlayBlur: {
         none: "",
@@ -186,7 +188,7 @@ const popoverContentVariants = cva(
     },
     defaultVariants: {
       variant: "default",
-      size: "default",
+      size: "md",
       overlayBlur: "none"
     }
   }

package/src/components/ui/popover.tsx

@@ -25,8 +25,10 @@ const popoverContentVariants = cva(
       },
       size: {
         sm: "w-48 p-3",
-        default: "w-72 p-4",
+        md: "w-72 p-4",
         lg: "w-96 p-5",
+        /** @deprecated `md` kullanın — #319 kanonik skala; aynı çıktıyı üretir. */
+        default: "w-72 p-4",
       },
       side: {
         top: "data-[side=top]:slide-in-from-bottom-2",
@@ -56,7 +58,7 @@ const popoverContentVariants = cva(
     },
     defaultVariants: {
       variant: "default",
-      size: "default",
+      size: "md",
       radius: "default",
       shadow: "default",
     },

package/src/components/ui/progress.tsx

@@ -32,10 +32,12 @@ const progressVariants = cva(
       size: {
         xs: "h-1",
         sm: "h-1.5",
+        md: "h-2",
+        lg: "h-2.5",
+        xl: "h-3",
+        "2xl": "h-4",
+        /** @deprecated `md` kullanın — #319 kanonik skala; aynı çıktıyı üretir. */
         default: "h-2",
-        md: "h-2.5",
-        lg: "h-3",
-        xl: "h-4",
       },
       radius: {
         none: "rounded-none",
@@ -53,7 +55,7 @@ const progressVariants = cva(
     },
     defaultVariants: {
       variant: "default",
-      size: "default",
+      size: "md",
       radius: "full",
       animation: "default",
     },

package/src/components/ui/radio-group.tsx

@@ -24,14 +24,16 @@ const radioGroupItemVariants = cva(
       },
       size: {
         sm: "h-3.5 w-3.5",
+        md: "h-4 w-4",
+        lg: "h-5 w-5",
+        xl: "h-6 w-6",
+        /** @deprecated `md` kullanın — #319 kanonik skala; aynı çıktıyı üretir. */
         default: "h-4 w-4",
-        md: "h-5 w-5",
-        lg: "h-6 w-6",
       },
     },
     defaultVariants: {
       variant: "default",
-      size: "default",
+      size: "md",
     },
   }
 );

package/src/components/ui/scroll-area.tsx

@@ -5,16 +5,36 @@ import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
 
 import { cn } from "../../lib/utils"
 
+export interface ScrollAreaProps
+  extends React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> {
+  /**
+   * #308-1: Kaydırma alanının klavyeyle odaklanabilir olup olmayacağı. Varsayılan `true`
+   * — odaklanabilir içeriği olmayan bir kaydırma alanı aksi hâlde klavyeyle erişilemez
+   * (WCAG 2.1.1). Fazladan sekme durağı istenmeyen durumlarda `false`.
+   */
+  focusable?: boolean
+}
+
 const ScrollArea = React.forwardRef<
   React.ElementRef<typeof ScrollAreaPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
->(({ className, children, ...props }, ref) => (
+  ScrollAreaProps
+>(({ className, children, focusable = true, ...props }, ref) => (
   <ScrollAreaPrimitive.Root
     ref={ref}
     className={cn("relative overflow-hidden", className)}
     {...props}
   >
-    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+    {/*
+      #308-1: Viewport'a `tabIndex` VERİLMİYORDU ve bu davranış Radix'ten kalıtsal DEĞİL
+      (`@radix-ui/react-scroll-area` kaynağında tabIndex geçmiyor). Sonuç: içinde
+      odaklanabilir eleman bulunmayan bir ScrollArea klavyeyle HİÇ kaydırılamıyordu
+      (WCAG 2.1.1). Kaydırılabilir bölgenin odaklanabilir olması kanonik çözümdür;
+      ek sekme durağı istemeyen tüketici `focusable={false}` diyebilir.
+    */}
+    <ScrollAreaPrimitive.Viewport
+      tabIndex={focusable ? 0 : undefined}
+      className="h-full w-full rounded-[inherit]"
+    >
       {children}
     </ScrollAreaPrimitive.Viewport>
     <ScrollBar />

package/src/components/ui/skeleton.tsx

@@ -24,9 +24,11 @@ const skeletonVariants = cva(
         accent: "bg-accent",
       },
       size: {
-        default: "",
+        md: "",
         sm: "scale-90",
         lg: "scale-110",
+        /** @deprecated `md` kullanın — #319 kanonik skala; aynı çıktıyı üretir. */
+        default: "",
       },
       shape: {
         rect: "rounded-md",
@@ -41,7 +43,7 @@ const skeletonVariants = cva(
     },
     defaultVariants: {
       variant: "default",
-      size: "default",
+      size: "md",
       shape: "rect",
       animation: "pulse",
     },
@@ -144,10 +146,25 @@ export const Skeleton = React.forwardRef<HTMLDivElement, SkeletonProps>(
     }
 
     const SkeletonElement = useMotion ? motion.div : "div";
-    
+
     return (
       <SkeletonElement
         ref={ref}
+        /**
+         * #320: Skeleton hiçbir a11y işareti taşımıyordu — ne `aria-hidden`, ne `role`,
+         * ne `aria-busy`. Radix kullanmadığı için kalıtsal semantik de yok.
+         *
+         * Konvansiyon olarak `aria-hidden` seçildi (`role="status"` DEĞİL): tek bir yükleme
+         * durumu tipik olarak ONLARCA skeleton render eder (`SkeletonText` tek başına N satır
+         * basar) — her biri canlı bölge olsaydı ekran okuyucu aynı olayı N kez duyururdu.
+         * "Yükleniyor" duyurusunun sahibi `spinner.tsx:79-105` (`role="status"` +
+         * `aria-live="polite"` + `sr-only` etiket); skeleton onun görsel yer tutucusudur.
+         * Tüketici kapsayıcıya `aria-busy` koyarak durumu bildirir.
+         *
+         * Yalnız YER TUTUCU dalında: `isLoaded && children` dalı gerçek içerik döndürür ve
+         * yukarıda kasıtlı olarak işaretlenmemiştir.
+         */
+        aria-hidden="true"
         className={cn(
           "moonui-theme",
           skeletonVariants({ variant, size, shape, animation }),

package/src/components/ui/slider.tsx

@@ -18,13 +18,15 @@ const sliderVariants = cva(
     variants: {
       size: {
         sm: "h-5",
+        md: "h-6",
+        lg: "h-8",
+        xl: "h-10",
+        /** @deprecated `md` kullanın — #319 kanonik skala; aynı çıktıyı üretir. */
         default: "h-6",
-        md: "h-8",
-        lg: "h-10",
       },
     },
     defaultVariants: {
-      size: "default",
+      size: "md",
     },
   }
 )
@@ -84,14 +86,16 @@ const sliderThumbVariants = cva(
       },
       size: {
         sm: "h-3 w-3",
+        md: "h-4 w-4",
+        lg: "h-5 w-5",
+        xl: "h-6 w-6",
+        /** @deprecated `md` kullanın — #319 kanonik skala; aynı çıktıyı üretir. */
         default: "h-4 w-4",
-        md: "h-5 w-5",
-        lg: "h-6 w-6",
       },
     },
     defaultVariants: {
       variant: "primary",
-      size: "default",
+      size: "md",
     },
   }
 )

package/src/components/ui/table.tsx

@@ -46,13 +46,15 @@ const tableVariants = cva(
       },
       size: {
         sm: "text-xs",
-        default: "text-sm",
+        md: "text-sm",
         lg: "text-base",
+        /** @deprecated `md` kullanın — #319 kanonik skala; aynı çıktıyı üretir. */
+        default: "text-sm",
       },
     },
     defaultVariants: {
       variant: "default",
-      size: "default",
+      size: "md",
     },
   }
 );

package/src/components/ui/toggle-group.tsx

@@ -27,7 +27,10 @@ import { toggleVariants } from "./toggle"
 const ToggleGroupContext = React.createContext<
   VariantProps<typeof toggleVariants>
 >({
-  size: "default",
+  // #319: kanonik skalada `default` bir basamak ADI değil; `toggleVariants` artık `md`
+  // kullanıyor (aynı CSS: h-10 px-3). Context varsayılanı da ona hizalandı — aksi hâlde
+  // context, deprecated alias'ı item'lara yayardı.
+  size: "md",
   variant: "default",
 })
 

package/src/components/ui/toggle.tsx

@@ -16,14 +16,16 @@ const toggleVariants = cva(
           "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",
       },
       size: {
-        default: "h-10 px-3",
+        md: "h-10 px-3",
         sm: "h-9 px-2.5",
         lg: "h-11 px-5",
+        /** @deprecated `md` kullanın — #319 kanonik skala; aynı çıktıyı üretir. */
+        default: "h-10 px-3",
       },
     },
     defaultVariants: {
       variant: "default",
-      size: "default",
+      size: "md",
     },
   }
 )