@moontra/moonui 3.4.0 → 4.0.0

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 }