@moontra/moonui 3.3.0 → 4.0.0

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 */

package/src/components/ui/slider.tsx

@@ -97,7 +97,7 @@ const sliderThumbVariants = cva(
 )
 
 // Custom type definition for component properties
-type SliderBaseProps = {
+export type SliderBaseProps = {
   /**
    * Track variant
    */
@@ -161,7 +161,7 @@ type SliderBaseProps = {
 }
 
 // Merge HTML properties without defaultValue conflicts
-type SliderProps = SliderBaseProps & Omit<React.HTMLAttributes<HTMLDivElement>, 'defaultValue'>
+export type SliderProps = SliderBaseProps & Omit<React.HTMLAttributes<HTMLDivElement>, 'defaultValue'>
 
 const Slider = React.forwardRef<
   HTMLDivElement,
@@ -280,6 +280,59 @@ const Slider = React.forwardRef<
     document.addEventListener('mouseup', handleMouseUp);
   };
 
+  // Klavyeyle değer değiştirme (WCAG 2.1.1 Keyboard).
+  //
+  // Thumb'lar `role="slider"` + `aria-valuenow` + `tabIndex=0` taşıyıp
+  // odaklanabiliyordu, ancak hiçbir klavye handler'ı yoktu: bileşen ARIA
+  // sözleşmesinde slider olduğunu duyuruyor ama yalnızca fareyle çalışıyordu.
+  // Tuş eşlemesi Radix Slider davranışını izler.
+  const handleThumbKeyDown = (index: number) => (event: React.KeyboardEvent) => {
+    if (disabled) return;
+
+    const largeStep = step * 10;
+    const current = sliderValue[index];
+    let next: number;
+
+    switch (event.key) {
+      case "ArrowRight":
+      case "ArrowUp":
+        next = current + step;
+        break;
+      case "ArrowLeft":
+      case "ArrowDown":
+        next = current - step;
+        break;
+      case "PageUp":
+        next = current + largeStep;
+        break;
+      case "PageDown":
+        next = current - largeStep;
+        break;
+      case "Home":
+        next = min;
+        break;
+      case "End":
+        next = max;
+        break;
+      default:
+        return;
+    }
+
+    // Yalnızca yukarıdaki tuşlarda varsayılan davranışı engelle (sayfa kaydırma).
+    event.preventDefault();
+
+    // Çoklu thumb'da komşu değerleri aşma; tek thumb'da min/max sınırları geçerli.
+    const lowerBound = index > 0 ? sliderValue[index - 1] : min;
+    const upperBound =
+      index < sliderValue.length - 1 ? sliderValue[index + 1] : max;
+    const bounded = Math.max(lowerBound, Math.min(upperBound, next));
+
+    const newValues = [...sliderValue];
+    newValues[index] = bounded;
+    // handleValueChange, step hassasiyetine göre yuvarlamayı zaten uyguluyor.
+    handleValueChange(newValues);
+  };
+
   return (
     <div className="w-full" ref={ref} {...props}>
       {showValueLabel && (
@@ -332,6 +385,7 @@ const Slider = React.forwardRef<
               cursor: disabled ? 'not-allowed' : 'pointer',
             }}
             onMouseDown={handleThumbMouseDown(i)}
+            onKeyDown={handleThumbKeyDown(i)}
             aria-label={`Thumb ${i + 1}`}
             tabIndex={disabled ? -1 : 0}
             role="slider"

package/src/components/ui/switch.tsx

@@ -2,11 +2,68 @@
 
 import * as React from "react"
 import * as SwitchPrimitives from "@radix-ui/react-switch"
+import { cva } from "class-variance-authority"
 
 import { cn } from "../../lib/utils"
 
 type SwitchSize = "sm" | "md" | "lg";
-type SwitchVariant = "primary" | "success" | "warning" | "danger" | "secondary";
+type SwitchVariant = "primary" | "success" | "warning" | "destructive" | "secondary";
+
+/**
+ * Boyut ve renk varyantları `cva()` ile yönetilir (kütüphane geneli desen).
+ * Önceden `size === "x" && "..."` biçiminde manuel zincirleme kullanılıyordu;
+ * `defaultVariants` yoktu ve varsayılanlar destructuring'de gizliydi.
+ */
+const switchVariants = cva(
+  [
+    "peer relative inline-flex shrink-0 cursor-pointer items-center rounded-full",
+    "border-2 border-transparent transition-colors",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+    "focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+    "disabled:cursor-not-allowed disabled:opacity-50",
+    // Kapalı durum token'a bağlı; `--input` karanlık modda kendi değerini taşır.
+    // (Önceden ayrıca `dark:data-[state=unchecked]:bg-gray-700/70` hardcode'u
+    // vardı ve token'ı eziyordu — kaldırıldı.)
+    "data-[state=unchecked]:bg-input",
+    "dark:focus-visible:ring-primary/40",
+  ],
+  {
+    variants: {
+      size: {
+        sm: "h-4 w-8",
+        md: "h-6 w-11",
+        lg: "h-7 w-14",
+      },
+      variant: {
+        primary: "data-[state=checked]:bg-primary",
+        success: "data-[state=checked]:bg-success",
+        warning: "data-[state=checked]:bg-warning",
+        destructive: "data-[state=checked]:bg-error",
+        secondary: "data-[state=checked]:bg-accent",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+      variant: "primary",
+    },
+  }
+)
+
+const switchThumbVariants = cva(
+  "pointer-events-none block rounded-full bg-background shadow-lg ring-0 transition-transform",
+  {
+    variants: {
+      size: {
+        sm: "h-3 w-3 data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0",
+        md: "h-5 w-5 data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0",
+        lg: "h-6 w-6 data-[state=checked]:translate-x-7 data-[state=unchecked]:translate-x-0",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+    },
+  }
+)
 
 export interface SwitchProps extends React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root> {
   /** Switch boyutu */
@@ -26,58 +83,58 @@ export interface SwitchProps extends React.ComponentPropsWithoutRef<typeof Switc
 const Switch = React.forwardRef<
   React.ElementRef<typeof SwitchPrimitives.Root>,
   SwitchProps
->(({ className, size = "md", variant = "primary", loading, leftIcon, rightIcon, description, ...props }, ref) => (
-  <div className="moonui-theme inline-flex items-center gap-2">
-    {leftIcon && <span className="text-muted-foreground">{leftIcon}</span>}
-    <SwitchPrimitives.Root
-      className={cn(
-        "peer relative inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 dark:data-[state=unchecked]:bg-gray-700/70 dark:focus-visible:ring-primary/40 dark:focus-visible:ring-offset-gray-950",
-        
-        // Boyutlar
-        size === "sm" && "h-4 w-8",
-        size === "md" && "h-6 w-11", 
-        size === "lg" && "h-7 w-14",
-        
-        // Varyantlar (checked durumunda)
-        variant === "primary" && "data-[state=checked]:bg-primary",
-        variant === "success" && "data-[state=checked]:bg-success",
-        variant === "warning" && "data-[state=checked]:bg-warning",
-        variant === "danger" && "data-[state=checked]:bg-error",
-        variant === "secondary" && "data-[state=checked]:bg-accent",
-        
-        // Unchecked durumu
-        "data-[state=unchecked]:bg-input",
-        
-        // Loading durumu
-        loading && "opacity-80 cursor-wait",
-        
-        className
-      )}
-      disabled={loading || props.disabled}
-      {...props}
-      ref={ref}
-    >
-      {loading ? (
-        <div className="absolute inset-0 flex items-center justify-center">
-          <div className="h-3 w-3 animate-spin rounded-full border-2 border-gray-300 border-t-primary"></div>
-        </div>
-      ) : null}
-      
-      <SwitchPrimitives.Thumb
+>(({
+  className,
+  size,
+  variant,
+  loading,
+  leftIcon,
+  rightIcon,
+  description,
+  "aria-describedby": ariaDescribedBy,
+  ...props
+}, ref) => {
+  // `description` görsel olarak render ediliyordu ama switch ile hiçbir
+  // programatik bağı yoktu — ekran okuyucu açıklamayı okuyamıyordu.
+  // Stabil bir id üretilip `aria-describedby` ile bağlanır; tüketicinin
+  // kendi verdiği `aria-describedby` korunur.
+  const reactId = React.useId()
+  const descriptionId = description ? `${reactId}-description` : undefined
+  const describedBy =
+    [ariaDescribedBy, descriptionId].filter(Boolean).join(" ") || undefined
+
+  return (
+    <div className="moonui-theme inline-flex items-center gap-2">
+      {leftIcon && <span className="text-muted-foreground">{leftIcon}</span>}
+      <SwitchPrimitives.Root
         className={cn(
-          "pointer-events-none block rounded-full bg-background shadow-lg ring-0 transition-transform",
-          // Boyuta göre thumb boyutları
-          size === "sm" && "h-3 w-3 data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0",
-          size === "md" && "h-5 w-5 data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0",
-          size === "lg" && "h-6 w-6 data-[state=checked]:translate-x-7 data-[state=unchecked]:translate-x-0",
+          switchVariants({ size, variant }),
+          loading && "opacity-80 cursor-wait",
+          className
         )}
-      />
-    </SwitchPrimitives.Root>
-    {rightIcon && <span className="text-muted-foreground">{rightIcon}</span>}
-    {description && <span className="text-sm text-muted-foreground">{description}</span>}
-  </div>
-))
+        disabled={loading || props.disabled}
+        aria-describedby={describedBy}
+        {...props}
+        ref={ref}
+      >
+        {loading ? (
+          <div className="absolute inset-0 flex items-center justify-center">
+            <div className="h-3 w-3 animate-spin rounded-full border-2 border-muted border-t-primary" />
+          </div>
+        ) : null}
+
+        <SwitchPrimitives.Thumb className={cn(switchThumbVariants({ size }))} />
+      </SwitchPrimitives.Root>
+      {rightIcon && <span className="text-muted-foreground">{rightIcon}</span>}
+      {description && (
+        <span id={descriptionId} className="text-sm text-muted-foreground">
+          {description}
+        </span>
+      )}
+    </div>
+  )
+})
 Switch.displayName = SwitchPrimitives.Root.displayName
 
-export { Switch }
+export { Switch, switchVariants }
 export type { SwitchSize, SwitchVariant }

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

@@ -48,6 +48,10 @@ const ToggleGroup = React.forwardRef<
     ref={ref}
     className={cn(
       "moonui-theme inline-flex items-center justify-center gap-1",
+      // Radix roving-focus kök elemana `data-orientation` yazar; dikey yerleşim
+      // buna bağlanır. Yatay/tanımsız durumda taban sınıflar geçerli kalır —
+      // yani mevcut render değişmez. Kardeş `button-group` ile desen paritesi.
+      "data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch data-[orientation=vertical]:justify-start",
       className
     )}
     {...props}