@moontra/moonui 6.19.0 → 6.19.2

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

@@ -1,5 +1,6 @@
 import React from 'react'
 import { render, screen, fireEvent } from '@testing-library/react'
+import { renderToStaticMarkup } from 'react-dom/server'
 import '@testing-library/jest-dom'
 import {
   Table,
@@ -101,19 +102,21 @@ describe('Table Components', () => {
         render(
           <Table variant="striped" data-testid="table">
             <TableBody data-testid="tbody">
-              <TableRow>
+              <TableRow data-testid="row">
                 <TableCell>Test</TableCell>
               </TableRow>
             </TableBody>
           </Table>
         )
-        
+
         const table = screen.getByTestId('table')
         expect(table).toHaveClass('dark:text-gray-200')
-        
-        // TableBody should have the striped class applied
+
         const tbody = screen.getByTestId('tbody')
         expect(tbody).toHaveClass('[&_tr:last-child]:border-0')
+
+        // #444: zebra SATIR düzeyinde uygulanır — tbody'de değil.
+        expect(screen.getByTestId('row')).toHaveClass('odd:bg-muted/50')
       })
 
       it('renders card variant correctly', () => {
@@ -761,21 +764,232 @@ describe('Table Components', () => {
       render(
         <Table variant="striped" data-testid="table">
           <TableBody data-testid="tbody">
-            <TableRow>
+            <TableRow data-testid="row-1">
               <TableCell>Row 1</TableCell>
             </TableRow>
-            <TableRow>
+            <TableRow data-testid="row-2">
               <TableCell>Row 2</TableCell>
             </TableRow>
           </TableBody>
         </Table>
       )
-      
+
       const table = screen.getByTestId('table')
       expect(table).toHaveClass('dark:text-gray-200')
-      
+
       const tbody = screen.getByTestId('tbody')
       expect(tbody).toHaveClass('[&_tr:last-child]:border-0')
+
+      // #444: her gövde satırı zebra sınıfını taşır; boyamayı `:nth-child(odd)` seçer.
+      expect(screen.getByTestId('row-1')).toHaveClass('odd:bg-muted/50')
+      expect(screen.getByTestId('row-2')).toHaveClass('odd:bg-muted/50')
+    })
+  })
+
+  /**
+   * #444 — `variant="striped"` HİÇ uygulanmıyordu.
+   *
+   * Kök neden: `Table`, çocuklarını gezip `child.type === "tbody"` diye STRING
+   * karşılaştırıyordu; `TableBody` bir `forwardRef` nesnesi olduğu için koşul daima
+   * false'tu. İkinci kusur: hedeflenen `even:[&>tr]:bg-muted/50` sınıfı tbody'nin
+   * kendi kardeş sırasına bakıyordu, satırlara değil.
+   *
+   * Bu blok "sessiz eşitliği" kilitler: striped çıktısı default'tan GERÇEKTEN
+   * farklı olmalı. Aşağıdaki testler düzeltme geri alındığında kırmızıya döner.
+   */
+  describe('Striped Variant (#444)', () => {
+    const rows = (
+      <>
+        <TableRow>
+          <TableCell>Row 1</TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell>Row 2</TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell>Row 3</TableCell>
+        </TableRow>
+      </>
+    )
+
+    const markupFor = (variant: 'default' | 'striped') =>
+      renderToStaticMarkup(
+        <Table variant={variant}>
+          <TableBody>{rows}</TableBody>
+        </Table>
+      )
+
+    it('produces markup that actually differs from the default variant', () => {
+      const striped = markupFor('striped')
+      const plain = markupFor('default')
+
+      // #444'ün ta kendisi: bu iki çıktı eskiden BİREBİR aynıydı.
+      expect(striped).not.toBe(plain)
+      expect(striped).toContain('odd:bg-muted/50')
+      expect(plain).not.toContain('odd:bg-muted/50')
+    })
+
+    it('never emits the old tbody-level selector', () => {
+      // Eski (çalışmayan) desen: tbody'nin kardeş sırasına bakan `even:` seçicisi.
+      expect(markupFor('striped')).not.toContain('even:[&>tr]:bg-muted/50')
+    })
+
+    it('applies the zebra class to rows, not to the tbody', () => {
+      render(
+        <Table variant="striped">
+          <TableBody data-testid="tbody">
+            <TableRow data-testid="row-1">
+              <TableCell>Row 1</TableCell>
+            </TableRow>
+            <TableRow data-testid="row-2">
+              <TableCell>Row 2</TableCell>
+            </TableRow>
+          </TableBody>
+        </Table>
+      )
+
+      expect(screen.getByTestId('tbody').className).not.toMatch(/bg-muted/)
+      expect(screen.getByTestId('row-1')).toHaveClass('odd:bg-muted/50')
+      expect(screen.getByTestId('row-2')).toHaveClass('odd:bg-muted/50')
+    })
+
+    it('does not stripe rows in non-striped variants', () => {
+      const { rerender } = render(
+        <Table variant="default">
+          <TableBody>
+            <TableRow data-testid="row">
+              <TableCell>Row</TableCell>
+            </TableRow>
+          </TableBody>
+        </Table>
+      )
+      expect(screen.getByTestId('row')).not.toHaveClass('odd:bg-muted/50')
+
+      rerender(
+        <Table variant="bordered">
+          <TableBody>
+            <TableRow data-testid="row">
+              <TableCell>Row</TableCell>
+            </TableRow>
+          </TableBody>
+        </Table>
+      )
+      expect(screen.getByTestId('row')).not.toHaveClass('odd:bg-muted/50')
+    })
+
+    it('leaves header and footer rows unstriped', () => {
+      render(
+        <Table variant="striped">
+          <TableHeader>
+            <TableRow data-testid="header-row">
+              <TableHead>Name</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            <TableRow data-testid="body-row">
+              <TableCell>John</TableCell>
+            </TableRow>
+          </TableBody>
+          <TableFooter>
+            <TableRow data-testid="footer-row">
+              <TableCell>Total</TableCell>
+            </TableRow>
+          </TableFooter>
+        </Table>
+      )
+
+      expect(screen.getByTestId('body-row')).toHaveClass('odd:bg-muted/50')
+      // Başlık satırı ve `bg-primary` zeminli altbilgi satırı zebraya girmez.
+      expect(screen.getByTestId('header-row')).not.toHaveClass('odd:bg-muted/50')
+      expect(screen.getByTestId('footer-row')).not.toHaveClass('odd:bg-muted/50')
+    })
+
+    it('reaches rows through fragments, .map() and wrapper components', () => {
+      // Eski `React.Children.map` + tip karşılaştırması bu yapıların hiçbirinde
+      // çalışamazdı; bağlam tabanlı çözüm derinlikten bağımsızdır.
+      const RowGroup = ({ items }: { items: string[] }) => (
+        <>
+          {items.map((item) => (
+            <TableRow key={item} data-testid={`row-${item}`}>
+              <TableCell>{item}</TableCell>
+            </TableRow>
+          ))}
+        </>
+      )
+
+      render(
+        <Table variant="striped">
+          <TableBody>
+            <RowGroup items={['a', 'b']} />
+          </TableBody>
+        </Table>
+      )
+
+      expect(screen.getByTestId('row-a')).toHaveClass('odd:bg-muted/50')
+      expect(screen.getByTestId('row-b')).toHaveClass('odd:bg-muted/50')
+    })
+
+    it('also stripes rows placed inside a raw <tbody>', () => {
+      render(
+        <Table variant="striped">
+          <tbody>
+            <TableRow data-testid="row">
+              <TableCell>Row</TableCell>
+            </TableRow>
+          </tbody>
+        </Table>
+      )
+
+      expect(screen.getByTestId('row')).toHaveClass('odd:bg-muted/50')
+    })
+
+    it('keeps hover feedback distinguishable from the stripe', () => {
+      render(
+        <Table variant="striped">
+          <TableBody>
+            <TableRow data-testid="row">
+              <TableCell>Row</TableCell>
+            </TableRow>
+          </TableBody>
+        </Table>
+      )
+
+      const row = screen.getByTestId('row')
+      // Varsayılan hover (`bg-muted/50`) şeritle AYNI renk olurdu → görünmez hover.
+      expect(row).toHaveClass('hover:bg-accent')
+      expect(row).not.toHaveClass('hover:bg-muted/50')
+    })
+
+    it('keeps the selected state distinct from the stripe colour', () => {
+      render(
+        <Table variant="striped">
+          <TableBody>
+            <TableRow data-testid="row" data-state="selected">
+              <TableCell>Row</TableCell>
+            </TableRow>
+          </TableBody>
+        </Table>
+      )
+
+      const row = screen.getByTestId('row')
+      // Şerit `bg-muted/50`, seçili `bg-muted` — tam opaklık BİLEREK şeritte
+      // kullanılmadı, yoksa seçili satır seçilmemişten ayırt edilemezdi.
+      expect(row).toHaveClass('data-[state=selected]:bg-muted')
+      expect(row).toHaveClass('odd:bg-muted/50')
+    })
+
+    it('still lets consumer classes win over the stripe', () => {
+      render(
+        <Table variant="striped">
+          <TableBody>
+            <TableRow className="bg-red-500" data-testid="row">
+              <TableCell>Row</TableCell>
+            </TableRow>
+          </TableBody>
+        </Table>
+      )
+
+      expect(screen.getByTestId('row')).toHaveClass('bg-red-500', 'odd:bg-muted/50')
     })
   })
 

package/src/components/ui/progress.tsx

@@ -84,8 +84,31 @@ const progressIndicatorVariants = cva(
         // Regresyon: __tests__/progress-secondary-contrast.test.ts
         secondary: "bg-[rgb(var(--secondary-500))]",
         success: "bg-success",
-        warning: "bg-warning",
-        error: "bg-error",
+        // #424 (#372'nin kardeşi): dolgu `bg-warning`/`bg-error` idi — track
+        // (`bg-warning/20` · `bg-error/20`) AYNI token'ın alfalı hâli olduğundan
+        // LIGHT temada ayrım kayboluyordu: warning 1.83 · error 2.89 (eşik 3:1,
+        // WCAG 1.4.11). DARK tema zaten temizdi (warning 6.97 · error 4.46).
+        //
+        // KÖK NEDEN: `--warning` ve `--error` tokens.css'te `.dark` bloğunda
+        // EZİLMİYOR — iki temada aynı renk. Kardeşleri `--success` (light 29% →
+        // dark 36%) ve `--primary` tema-uyarlanabilir olduğu için eşiği geçiyor;
+        // bu iki aile o uyarlamadan yoksun kaldığı için light'ta kalıyor.
+        //
+        // ÇÖZÜM: eksik tema-uyarlamasını component düzeyinde ver — light'ta
+        // skalanın -700 kademesine in, dark'ta semantik token'a DOKUNMA.
+        // Tema-KÖR bir -700 ataması dark'ı kırardı (docs kartında warning 2.50 ✗
+        // · error 2.23 ✗); `dark:` ayrımı tam olarak bunu önler ve dark render'ı
+        // bit-bit aynı bırakır. Aynı desen badge.tsx:51-63'te zaten kullanılıyor.
+        // Track alfaları BİLEREK `/20` kaldı: altı varyantın tamamı o konvansiyonu
+        // paylaşıyor ve alfayı düşürmek track↔zemin ayrımını zayıflatırdı
+        // (warning 1.162 → 1.081). Ölçülen sonuç — warning: light 4.24 ✓ /
+        // dark 6.97 ✓ (docs kartı #111827: 5.77) · error: light 4.95 ✓ /
+        // dark 4.46 ✓ (docs kartı 3.82). Skala token'ları RGB üçlüsüdür
+        // (semantiklerin HSL'inden farklı) → `rgb(var(--x-700))` kompozisyonu;
+        // `bg-warning-700` YAZILMADI, preset o sınıfı üretmez (#307 ölü-sınıf).
+        // Regresyon: __tests__/progress-warning-error-contrast.test.ts
+        warning: "bg-[rgb(var(--warning-700))] dark:bg-warning",
+        error: "bg-[rgb(var(--error-700))] dark:bg-error",
       },
       animation: {
         default: "transition-all duration-500",

package/src/components/ui/slider.tsx

@@ -72,10 +72,70 @@ const sliderRangeVariants = cva(
         // tüketici --secondary-500'ü ezerek özelleştirebilir.
         // Regresyon: __tests__/slider-secondary-contrast.test.ts
         secondary: "bg-[rgb(var(--secondary-500))]",
-        accent: "bg-accent",
+        // #448 (#389/#407'nin `accent` kardeşi — ama ÇÖZÜM SINIFI farklı): range
+        // `bg-accent`, track `bg-accent/20` idi — aynı yüzey token'ının iki alfası.
+        // `--accent` HER İKİ temada da kusurluydu (warning/error'dan ağır: onlar
+        // yalnız light'ta kusurluydu): A ekseni light 1.123 · dark 1.303 · gerçek
+        // docs kartı (#111827) 1.162. Eşik 3:1 (WCAG 1.4.11 non-text).
+        //
+        // KÖK NEDEN: `--accent` bir YÜZEY token'ı — `hover:bg-accent` tinti olarak
+        // tasarlanmış ve iki temada da kendi zeminine BİTİŞİK duruyor (light
+        // rgb(235,239,245) beyaz üstünde, dark rgb(29,40,58) rgb(3,7,17) üstünde).
+        // Dolgu/kenarlık rolüne yapısal olarak uygun değil; bu yüzden track'i
+        // değiştirerek onarmak da MÜMKÜN DEĞİL (light'ta accent'ten 3:1 uzakta
+        // duran daha açık bir yüzey yok).
+        //
+        // #389'un tek-orta-ton kademe araması AYNEN uygulanamadı: tokens.css'te
+        // `--accent-50 … --accent-950` skalası YOK (skalası olan aileler:
+        // primary/secondary/success/warning/error/brand/brand-accent).
+        // `bg-accent-foreground` de elendi — `--accent-foreground` iki temada da
+        // `--primary` ile BİREBİR aynı değer (varyant primary klonuna dönerdi) ve
+        // 7 tema preset'inin 2'sinde beyaz (Creative/Nature), yani tek başına
+        // dolgu olamaz.
+        //
+        // ÇÖZÜM: sistemin TEK nötr skalası olan slate (`--secondary-*`) — `--accent`
+        // ile aynı hue ailesi (216° ↔ 215°), üstelik light temada `--accent` ile
+        // `--secondary` BİREBİR aynı token değerini taşıyor. Tema-kör tek kademe
+        // SEÇİLEMEDİ: bu ailede iki temayı birden geçen tek kademe 500'dür, o da
+        // `secondary` varyantının kendi rengi (ΔE*ab = 0.0 — iki varyant klon olurdu).
+        // Bu yüzden #442'nin `dark:` ayrımı deseni kullanıldı, tema başına ayrı kademe.
+        // Tam tarama (11 kademe × 2 tema × 3 zemin × 2 eksen): DARK'ta eşiği geçen VE
+        // kardeş varyantlardan ayırt edilebilen (ΔE*ab ≥ 10) TEK kademe 400
+        // (500 = secondary klonu · ≤300 `default`/`primary` ile çakışıyor · ≥600 eşiğin
+        // altında). LIGHT'ta {600,700,800} uygun; 700 kardeş ayrımını maksimize eder
+        // (ΔE 21.2 · 600→12.7 · 800→14.9).
+        // Ölçülen — A: light 1.123 → 10.081 ✓ · dark 1.303 → 7.533 ✓ · docs kartı
+        // 1.162 → 6.717 ✓. Track `bg-accent/20` DEĞİŞMEDİ (yedi varyantın ortak deseni).
+        // Regresyon: __tests__/slider-accent-contrast.test.ts
+        accent: "bg-[rgb(var(--secondary-700))] dark:bg-[rgb(var(--secondary-400))]",
         success: "bg-success",
-        warning: "bg-warning",
-        error: "bg-error",
+        // #442 (#424/PR #440'ın slider ikizi): range `bg-warning`/`bg-error` idi —
+        // track (`bg-warning/20` · `bg-error/20`) AYNI token'ın alfalı hâli olduğundan
+        // LIGHT temada ayrım kayboluyordu: warning 1.835 · error 2.893 (eşik 3:1,
+        // WCAG 1.4.11 non-text). DARK tema zaten temizdi (warning 6.97 · error 4.46).
+        //
+        // KÖK NEDEN: `--warning` ve `--error` tokens.css'in `.dark` bloğunda
+        // EZİLMİYOR — iki temada aynı renk. Kardeşleri tema-uyarlanabilir olduğu
+        // için geçiyor (`--success` light %29 → dark %36; ölçüm: success A ekseni
+        // light 3.73 / dark 4.83). Bu iki aile o uyarlamadan yoksun.
+        //
+        // ÇÖZÜM: eksik tema-uyarlamasını component düzeyinde ver — light'ta skalanın
+        // -700 kademesine in, dark'ta semantik token'a DOKUNMA (dark render bit-bit
+        // aynı kalır, regresyon yüzeyi sıfır). Tema-KÖR bir -700 ataması dark'ı
+        // kırardı: gerçek docs kartı (#111827) üstünde warning 2.499 ✗ · error 2.232 ✗.
+        // Tam skala taraması (11 kademe × 2 aile × 3 zemin × 2 tema) track `/20` iken
+        // iki temayı birden geçen kademe kümesini BOŞ buluyor → `dark:` ayrımı ZORUNLU;
+        // #389'un tek-orta-ton (`--secondary-500`) çözümü burada uygulanamaz, çünkü
+        // orada `--secondary` temaya göre değişiyordu. Aynı `dark:` deseni badge.tsx:51-63
+        // ve progress.tsx:110-111'de zaten kullanılıyor.
+        // Ölçülen sonuç — warning: light 1.835 → 4.235 ✓ · error: light 2.893 → 4.950 ✓
+        // (dark değişmedi: 6.97 / 4.46; docs kartı 5.77 / 3.82).
+        // Skala token'ları RGB üçlüsüdür (semantiklerin HSL'inden farklı) →
+        // `rgb(var(--x-700))` kompozisyonu; `bg-warning-700` YAZILMADI, preset bu
+        // ailelere sayısal skala açmıyor (#307 ölü-sınıf tuzağı).
+        // Regresyon: __tests__/slider-warning-error-contrast.test.ts
+        warning: "bg-[rgb(var(--warning-700))] dark:bg-warning",
+        error: "bg-[rgb(var(--error-700))] dark:bg-error",
       },
     },
     defaultVariants: {
@@ -103,10 +163,36 @@ const sliderThumbVariants = cva(
         // aynı kademe: tutamaç ve dolgu tek renkte okunur.
         // Regresyon: __tests__/slider-secondary-contrast.test.ts
         secondary: "border-[rgb(var(--secondary-500))] bg-background",
-        accent: "border-accent bg-background",
+        // #448 EKSEN B (range'den FARKLI eksen: bileşen↔sayfa-zemini) — tutamacın
+        // dolgusu `bg-background`, yani zeminin kendisi; ayırt edilebilirliğini
+        // YALNIZ kenarlık taşır → non-text UI bileşeni, WCAG 1.4.11 ≥3:1.
+        // `border-accent` iki temada da kayboluyordu: light 1.154 · dark 1.359 ·
+        // gerçek docs kartı 1.197. Range ile AYNI kademeler seçildi — #407'nin
+        // gerekçesi burada da geçerli: "tutamaç ve dolgu tek renkte okunur".
+        // Ölçülen — light 1.154 → 10.355 ✓ · dark 1.359 → 7.857 ✓ · docs kartı
+        // 1.197 → 6.919 ✓.
+        // Regresyon: __tests__/slider-accent-contrast.test.ts
+        accent: "border-[rgb(var(--secondary-700))] dark:border-[rgb(var(--secondary-400))] bg-background",
         success: "border-success bg-background",
-        warning: "border-warning bg-background",
-        error: "border-error bg-background",
+        // #442 EKSEN B (range'den FARKLI eksen: bileşen↔sayfa-zemini) — #407'de
+        // `secondary` için açılan eksenin warning/error karşılığı. Tutamacın dolgusu
+        // `bg-background`, yani zeminin kendisi; ayırt edilebilirliği YALNIZ kenarlık
+        // taşır → non-text UI bileşeni, WCAG 1.4.11 ≥3:1.
+        // ÖLÇÜLEN (eski değerler): warning light **2.133 ✗** · error light 3.781 ✓;
+        // dark ikisi de rahat geçiyordu (9.45 / 5.33).
+        //
+        // `warning` KUSURLUYDU, düzeltildi. `error` bu eksende zaten geçiyordu ama
+        // yine de aynı ifadeye çekildi: range light'ta -700'e indiği için kenarlık
+        // `border-error`da bırakılsaydı LIGHT temada dolgu rgb(185,28,28), tutamaç
+        // rgb(239,67,67) olurdu — düzeltmenin KENDİSİ iki-tonlu bir görünüm üretirdi.
+        // #407'nin gerekçesi birebir geçerli: "tutamaç ve dolgu tek renkte okunur".
+        // Değişim kontrastı düşürmüyor, artırıyor: error light 3.781 → 6.470.
+        // Dark'ta `dark:border-*` semantik token'ı koruduğu için render bit-bit aynı.
+        // Ölçülen sonuç — warning: light 2.133 → 4.923 ✓ · error: light 3.781 → 6.470 ✓
+        // (dark değişmedi: 9.45 / 5.33; docs kartı 8.32 / 4.69).
+        // Regresyon: __tests__/slider-warning-error-contrast.test.ts
+        warning: "border-[rgb(var(--warning-700))] dark:border-warning bg-background",
+        error: "border-[rgb(var(--error-700))] dark:border-error bg-background",
       },
       size: {
         sm: "h-3 w-3",

package/src/components/ui/switch.tsx

@@ -34,12 +34,51 @@ const switchVariants = cva(
         md: "h-6 w-11",
         lg: "h-7 w-14",
       },
+      // #454 — checked track'in İKİ ekseni de ölçüldü (eşik 3:1, WCAG 1.4.11
+      // non-text UI). Switch'te bu iki eksen AYNI sayıyı verir, çünkü thumb
+      // `bg-background` taşır (switchThumbVariants tabanı):
+      //   A) checked track ↔ sayfa/kart zemini  → kontrol "açık" okunuyor mu?
+      //   B) thumb ↔ checked track              → tutamacın KONUMU görülüyor mu?
+      // Ölçüm zeminleri: `--background` · `--card` · docs kabuğunun gerçek koyu
+      // kartı (#111827). Regresyon: __tests__/switch-variant-contrast.test.tsx
       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",
+        primary: "data-[state=checked]:bg-primary",   // light 4.920 · dark 19.256 ✓
+        success: "data-[state=checked]:bg-success",   // light 4.904 · dark  6.043 ✓
+        // #454 kardeş kusuru (#424/PR #440 progress · #442/PR #446 slider ile AYNI
+        // sınıf, üçüncü component): `--warning` tokens.css'in `.dark` bloğunda
+        // EZİLMİYOR, yani iki temada da aynı turuncu. Dark'ta zemin koyu olduğu
+        // için geçiyor (9.446), LIGHT'ta beyaz üstünde 2.133 ✗ — açık temada
+        // checked warning switch'in tutamacı da kayboluyordu (B ekseni 2.133).
+        // ÇÖZÜM (emsalle birebir aynı şekil): eksik tema-uyarlamasını component
+        // düzeyinde ver — light'ta skalanın -700 kademesine in, dark'ta semantik
+        // token'a DOKUNMA (dark render bit-bit aynı kalır, regresyon yüzeyi sıfır).
+        // Light'ta eşiği geçen kademe kümesi {700,800,900,950}; en açık olanı
+        // seçildi (turuncu kimliğini en çok koruyan). Ölçülen: 2.133 → 4.923 ✓.
+        warning:
+          "data-[state=checked]:bg-[rgb(var(--warning-700))] dark:data-[state=checked]:bg-warning",
+        destructive: "data-[state=checked]:bg-error", // light 3.781 · dark 5.328 ✓ (dokunulmadı)
+        // #454 asıl kusuru: `secondary` varyantı `bg-accent` kullanıyordu — ADI
+        // `secondary`, TOKEN'ı `accent`. `--accent` bir YÜZEY token'ı (`hover:bg-accent`
+        // tinti) ve iki temada da kendi zeminine bitişik: light rgb(235,239,245)
+        // beyaz üstünde 1.154 · dark rgb(29,40,58) 1.359 · docs kartı 1.197.
+        // Yani checked switch hem sayfadan hem de kendi tutamacından ayrışmıyordu:
+        // "açık" durum GÖRÜNMÜYORDU (switch'in tek işi durumu göstermek).
+        //
+        // AD ↔ TOKEN KARARI: varyant kendi ailesine, `--secondary-*` slate skalasına
+        // bağlandı. `bg-secondary` (semantik) BİLEREK seçilmedi — light'ta `--accent`
+        // ile BİREBİR aynı değer (1.154), dark'ta daha da kötü (1.007). Skala
+        // taraması (11 kademe × 2 tema × 3 zemin × 2 eksen + kardeş ΔE*ab ≥ 10 klon
+        // filtresi): light {500,600,700,800,900,950} · dark {300,400,500} → iki
+        // temayı birden geçen TEK kademe **500**, yani `dark:` ayrımına gerek yok.
+        // #448'in slider'daki 700/400 ayrımı burada GEREKMEZ ve İSTENMEZ: orada 500
+        // elenmişti çünkü slider'ın `secondary` varyantı zaten o rengi kullanıyordu
+        // (ΔE = 0.0 → klon). Switch'in `accent` adlı bir varyantı YOK, dolayısıyla
+        // 500 serbest ve kardeşlerden ayrık (ΔE: primary 69.5/51.6 · success
+        // 63.6/74.8 · warning 96.0 · destructive 85.0 — hepsi ≥ 10).
+        // Yan fayda: slider'ın `secondary` varyantı da #389/PR #406'da aynı kademeye
+        // sabitlenmişti → aynı varyant adı artık iki component'te aynı rengi veriyor.
+        // Ölçülen: A/B light 1.154 → 4.759 ✓ · dark 1.359 → 4.234 ✓ · kart 1.197 → 3.728 ✓.
+        secondary: "data-[state=checked]:bg-[rgb(var(--secondary-500))]",
       },
     },
     defaultVariants: {

package/src/components/ui/table.tsx

@@ -26,6 +26,51 @@ interface TableSortContextValue {
 
 const TableSortContext = React.createContext<TableSortContextValue | null>(null);
 
+/**
+ * Zebra (striped) bağlamı (#444).
+ *
+ * ESKİ HÂLİ İKİ AYRI NEDENLE ÇALIŞMIYORDU:
+ *  1. `Table`, çocuklarını gezip `child.type === "tbody"` diye STRING
+ *     karşılaştırıyordu. `TableBody` bir `React.forwardRef` nesnesidir; bu koşul
+ *     hiçbir zaman doğru olmaz → `striped` sınıfı HİÇ eklenmiyordu (ölçüldü:
+ *     `variant="striped"` çıktısı `variant="default"` ile birebir aynıydı).
+ *  2. Koşul düzelse bile hedeflenen sınıf yanlıştı: `even:[&>tr]:bg-muted/50`
+ *     içindeki `even:` tbody'nin KENDİ kardeş sırasına bakar (tek tbody varsa hiç
+ *     eşleşmez), satırlara değil.
+ *
+ * Artık `Table` yalnızca bir bayrak YAYINLAR; zebra sınıfını `TableRow` kendi
+ * üstüne koyar. Böylece eleman-tipi karşılaştırması tamamen kalkar: satırlar
+ * fragment, `.map()`, ara sarmalayıcı bir component ya da düz `<tbody>` içinden
+ * gelse de çalışır. `TableHeader`/`TableFooter` bayrağı `false`'a çevirir —
+ * başlık satırı ve `bg-primary` zeminli altbilgi satırı çizgilenmemelidir.
+ */
+const TableStripedContext = React.createContext(false);
+
+/**
+ * Zebra + etkileşim yüzeyleri (#444) — ölçülmüş değerler, tokens.css'e dokunulmadan.
+ *
+ * `odd:bg-muted/50` → satır düzeyi zebra. `:nth-child(odd)` satırın kendi
+ * kardeş sırasına bakar, yani gerçekten 1./3./5. GÖVDE SATIRI boyanır.
+ *
+ * `hover:bg-accent` → zebra açıkken ZORUNLU: `TableRow`'un varsayılan hover'ı
+ * zaten `bg-muted/50`, yani şeritle AYNI renk; override olmasa çizgili satırlarda
+ * hover geri bildirimi görünmez olurdu. `--accent` bu tasarım sisteminin kanonik
+ * etkileşim yüzeyidir (button ghost/outline, dropdown item aynı token'ı kullanır).
+ * `cn()` = twMerge olduğu için `hover:bg-muted/50` ile çakışma CSS sırasına değil,
+ * deterministik olarak sona yazılan sınıfa göre çözülür.
+ *
+ * `bg-muted` (tam opaklık) BİLEREK seçilmedi: `data-[state=selected]:bg-muted` ile
+ * birebir aynı renk olurdu ve çizgili tabloda seçili satır seçilmemişten
+ * ayırt edilemezdi. Ölçülen CIE L* değerleri (zemin → şerit → seçili → hover):
+ *   açık tema : 100 → 98.06 → 96.12 → 94.09   (şerit ΔL* 1.94, kontrast 1.05:1)
+ *   koyu tema :  1.89 →  9.61 → 18.96 → 16.06 (şerit ΔL* 7.72, kontrast 1.17:1)
+ * Dört yüzey de her iki temada ayrı; hover her satır paritesinde görünür değişir.
+ * WCAG 1.4.11'in 3:1 eşiği zebraya UYGULANMAZ — şerit dekoratif bir tarama
+ * yardımıdır, içeriği anlamak için gerekli bir grafik ya da UI bileşeni değildir
+ * (veri hücre metninde; metin kontrastı her iki temada AA üstünde kalır).
+ */
+const STRIPED_ROW_CLASSES = "odd:bg-muted/50 hover:bg-accent";
+
 /** asc → desc → null → asc döngüsü */
 function nextSortDirection(current: SortDirection): SortDirection {
   if (current === "asc") return "desc";
@@ -114,9 +159,10 @@ const Table = React.forwardRef<
   onRowSelectionChange: _onRowSelectionChange,
   disableRowSelection: _disableRowSelection,
   getRowId: _getRowId,
-  ...props 
+  children,
+  ...props
 }, ref) => {
-  // Apply striped styles to the tbody via a class name
+  // #444: zebra bir bayrak olarak yayınlanır; sınıfı TableRow kendi üstüne koyar.
   const striped = variant === "striped";
 
   // #321: sıralama prop'ları alt başlıklara bağlam üzerinden ulaşır
@@ -124,21 +170,7 @@ const Table = React.forwardRef<
     () => ({ sortColumn, sortDirection, onSortChange }),
     [sortColumn, sortDirection, onSortChange]
   );
-  
-  // Çocukları güvenli bir şekilde işle ve tip kontrollerini doğru yap
-  const childrenWithProps = React.Children.map(props.children, (child) => {
-    if (React.isValidElement(child)) {
-      if (child.type === "tbody") {
-        // Tip güvenliği için props'ları düzgün şekilde ele alıyoruz
-        const tbodyProps = child.props as Record<string, unknown>;
-        return React.cloneElement(child as React.ReactElement<React.HTMLAttributes<HTMLTableSectionElement>>, {
-          className: cn(tbodyProps.className as string | undefined, striped && "even:[&>tr]:bg-muted/50")
-        });
-      }
-    }
-    return child;
-  });
-  
+
   return (
     <div className="relative w-full overflow-auto">
       {/* Yükleniyor durumu için overlay */}
@@ -149,19 +181,20 @@ const Table = React.forwardRef<
       )}
       
       <TableSortContext.Provider value={sortContextValue}>
-        <table
-          ref={ref}
-          className={cn(
-            tableVariants({ variant, size }),
-            loading && "opacity-70",
-            className
-          )}
-          {...props}
-        >
-          {childrenWithProps}
-        </table>
+        <TableStripedContext.Provider value={striped}>
+          <table
+            ref={ref}
+            className={cn(
+              tableVariants({ variant, size }),
+              loading && "opacity-70",
+              className
+            )}
+            {...props}
+          >
+            {children}
+          </table>
+        </TableStripedContext.Provider>
       </TableSortContext.Provider>
-      
     </div>
   );
 });
@@ -170,8 +203,11 @@ Table.displayName = "Table";
 const TableHeader = React.forwardRef<
   HTMLTableSectionElement,
   React.HTMLAttributes<HTMLTableSectionElement>
->(({ className, ...props }, ref) => (
-  <thead ref={ref} className={cn("moonui-theme", "[&_tr]:border-b", className)} {...props} />
+>(({ className, children, ...props }, ref) => (
+  <thead ref={ref} className={cn("moonui-theme", "[&_tr]:border-b", className)} {...props}>
+    {/* #444: başlık satırı zebraya dahil değildir */}
+    <TableStripedContext.Provider value={false}>{children}</TableStripedContext.Provider>
+  </thead>
 ));
 TableHeader.displayName = "TableHeader";
 
@@ -218,28 +254,37 @@ TableBody.displayName = "TableBody";
 const TableFooter = React.forwardRef<
   HTMLTableSectionElement,
   React.HTMLAttributes<HTMLTableSectionElement>
->(({ className, ...props }, ref) => (
+>(({ className, children, ...props }, ref) => (
   <tfoot
     ref={ref}
     className={cn("moonui-theme", "bg-primary text-primary-foreground font-medium", className)}
     {...props}
-  />
+  >
+    {/* #444: altbilginin kendi `bg-primary` zemini var; şerit onu bozmamalı */}
+    <TableStripedContext.Provider value={false}>{children}</TableStripedContext.Provider>
+  </tfoot>
 ));
 TableFooter.displayName = "TableFooter";
 
 const TableRow = React.forwardRef<
   HTMLTableRowElement,
   React.HTMLAttributes<HTMLTableRowElement>
->(({ className, ...props }, ref) => (
-  <tr
-    ref={ref}
-    className={cn(
-      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
-      className
-    )}
-    {...props}
-  />
-));
+>(({ className, ...props }, ref) => {
+  // #444: zebra bayrağı Table'dan gelir; TableHeader/TableFooter içinde false'tur.
+  const striped = React.useContext(TableStripedContext);
+
+  return (
+    <tr
+      ref={ref}
+      className={cn(
+        "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+        striped && STRIPED_ROW_CLASSES,
+        className
+      )}
+      {...props}
+    />
+  );
+});
 TableRow.displayName = "TableRow";
 
 interface TableHeadProps extends React.ThHTMLAttributes<HTMLTableCellElement> {