@moontra/moonui 6.18.0 → 6.19.1

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

@@ -58,11 +58,49 @@ const sliderRangeVariants = cva(
       variant: {
         default: "bg-foreground",
         primary: "bg-primary",
-        secondary: "bg-secondary",
+        // #389 (#372'nin birebir ardılı): range `bg-secondary` idi — track'in
+        // (`bg-secondary/20`) AYNI yüzey token'ına basıyordu; %20 alfa track ile
+        // tam dolgu iki temada da ~1.0 oranında kalıyor, dolu kısım görünmüyordu
+        // (light rgb(235,239,245) → 1.12 · dark rgb(2,8,23) → 1.01).
+        // `bg-secondary-foreground` BİLEREK seçilmedi: light'ta --primary ile aynı
+        // hue/sat'ta yalnız ΔL=%2 (fill↔fill 1.07), dark'ta birebir --primary
+        // değeri (210 40% 98%) — secondary varyantı primary klonuna dönerdi.
+        // `--secondary-500` (tokens.css slate skalası, RGB üçlüsü) iki temada da
+        // track'e ≥3:1 (WCAG 1.4.11) veren TEK kademe: light 4.63, dark 4.23
+        // (gerçek kart #111827 üstünde 3.83; 400 light'ta 2.50 ✗, 600 dark'ta
+        // 2.66 ✗). Skala :root'ta tanımlı olduğundan tema değişiminde sabittir;
+        // tüketici --secondary-500'ü ezerek özelleştirebilir.
+        // Regresyon: __tests__/slider-secondary-contrast.test.ts
+        secondary: "bg-[rgb(var(--secondary-500))]",
         accent: "bg-accent",
         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: {
@@ -78,11 +116,39 @@ const sliderThumbVariants = cva(
       variant: {
         default: "border-foreground bg-background",
         primary: "border-primary bg-background",
-        secondary: "border-secondary bg-background",
+        // #407 (P2, #389'un range eksenine EK ayrı eksen): tutamacın kenarlığı
+        // `border-secondary`, dolgusu `bg-background` idi. Bu bileşen↔sayfa-zemini
+        // ekseni: `--secondary` light'ta neredeyse beyaz (rgb(235,239,245)), dark'ta
+        // `--background` ile neredeyse aynı → kenarlık 1.15 (light) / 1.01 (dark)
+        // oranında kalıyor, secondary slider'ın tutamacı zeminde kayboluyordu.
+        // #389'da bilerek kapsam dışıydı (mevcut kusuru testle "doğru" ilan etmemek için).
+        // Non-text UI bileşeni → WCAG 1.4.11 ≥3:1. Skala taraması bu eksende de TEK
+        // kademe bırakıyor — `--secondary-500`: light 4.76, dark 4.23 (gerçek kart
+        // #111827 üstünde 3.73); 400 light'ta 2.56 ✗, 600 dark'ta 2.66 ✗. Range ile
+        // 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",
         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/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> {

package/dist/chunk-VXDFZPDA.global.js

@@ -1,33 +0,0 @@
-'use client';
-
-/** @license MoonUI v1.0.0 - MIT License - https://moonui.dev */
-var B=Object.create;var $=Object.defineProperty;var z=Object.getOwnPropertyDescriptor;var H=Object.getOwnPropertyNames;var W=Object.getPrototypeOf,Y=Object.prototype.hasOwnProperty;var me=(e=>typeof require<"u"?require:typeof Proxy<"u"?new Proxy(e,{get:(t,r)=>(typeof require<"u"?require:t)[r]}):e)(function(e){if(typeof require<"u")return require.apply(this,arguments);throw Error('Dynamic require of "'+e+'" is not supported')});var d=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports);var G=(e,t,r,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of H(t))!Y.call(e,o)&&o!==r&&$(e,o,{get:()=>t[o],enumerable:!(n=z(t,o))||n.enumerable});return e};var he=(e,t,r)=>(r=e!=null?B(W(e)):{},G(t||!e||!e.__esModule?$(r,"default",{value:e,enumerable:!0}):r,e));var b=(e,t,r)=>{if(!t.has(e))throw TypeError("Cannot "+r)};var Se=(e,t,r)=>(b(e,t,"read from private field"),r?r.call(e):t.get(e)),Ee=(e,t,r)=>{if(t.has(e))throw TypeError("Cannot add the same private member more than once");t instanceof WeakSet?t.add(e):t.set(e,r)},ke=(e,t,r,n)=>(b(e,t,"write to private field"),n?n.call(e,r):t.set(e,r),r);var V=d(u=>{"use strict";var y=Symbol.for("react.element"),J=Symbol.for("react.portal"),K=Symbol.for("react.fragment"),Q=Symbol.for("react.strict_mode"),X=Symbol.for("react.profiler"),Z=Symbol.for("react.provider"),ee=Symbol.for("react.context"),te=Symbol.for("react.forward_ref"),re=Symbol.for("react.suspense"),ne=Symbol.for("react.memo"),oe=Symbol.for("react.lazy"),j=Symbol.iterator;function ue(e){return e===null||typeof e!="object"?null:(e=j&&e[j]||e["@@iterator"],typeof e=="function"?e:null)}var x={isMounted:function(){return!1},enqueueForceUpdate:function(){},enqueueReplaceState:function(){},enqueueSetState:function(){}},P=Object.assign,g={};function p(e,t,r){this.props=e,this.context=t,this.refs=g,this.updater=r||x}p.prototype.isReactComponent={};p.prototype.setState=function(e,t){if(typeof e!="object"&&typeof e!="function"&&e!=null)throw Error("setState(...): takes an object of state variables to update or a function which returns an object of state variables.");this.updater.enqueueSetState(this,e,t,"setState")};p.prototype.forceUpdate=function(e){this.updater.enqueueForceUpdate(this,e,"forceUpdate")};function I(){}I.prototype=p.prototype;function E(e,t,r){this.props=e,this.context=t,this.refs=g,this.updater=r||x}var k=E.prototype=new I;k.constructor=E;P(k,p.prototype);k.isPureReactComponent=!0;var O=Array.isArray,q=Object.prototype.hasOwnProperty,R={current:null},N={key:!0,ref:!0,__self:!0,__source:!0};function D(e,t,r){var n,o={},i=null,s=null;if(t!=null)for(n in t.ref!==void 0&&(s=t.ref),t.key!==void 0&&(i=""+t.key),t)q.call(t,n)&&!N.hasOwnProperty(n)&&(o[n]=t[n]);var f=arguments.length-2;if(f===1)o.children=r;else if(1<f){for(var c=Array(f),a=0;a<f;a++)c[a]=arguments[a+2];o.children=c}if(e&&e.defaultProps)for(n in f=e.defaultProps,f)o[n]===void 0&&(o[n]=f[n]);return{$$typeof:y,type:e,key:i,ref:s,props:o,_owner:R.current}}function ie(e,t){return{$$typeof:y,type:e.type,key:t,ref:e.ref,props:e.props,_owner:e._owner}}function w(e){return typeof e=="object"&&e!==null&&e.$$typeof===y}function se(e){var t={"=":"=0",":":"=2"};return"$"+e.replace(/[=:]/g,function(r){return t[r]})}var C=/\/+/g;function S(e,t){return typeof e=="object"&&e!==null&&e.key!=null?se(""+e.key):t.toString(36)}function v(e,t,r,n,o){var i=typeof e;(i==="undefined"||i==="boolean")&&(e=null);var s=!1;if(e===null)s=!0;else switch(i){case"string":case"number":s=!0;break;case"object":switch(e.$$typeof){case y:case J:s=!0}}if(s)return s=e,o=o(s),e=n===""?"."+S(s,0):n,O(o)?(r="",e!=null&&(r=e.replace(C,"$&/")+"/"),v(o,t,r,"",function(a){return a})):o!=null&&(w(o)&&(o=ie(o,r+(!o.key||s&&s.key===o.key?"":(""+o.key).replace(C,"$&/")+"/")+e)),t.push(o)),1;if(s=0,n=n===""?".":n+":",O(e))for(var f=0;f<e.length;f++){i=e[f];var c=n+S(i,f);s+=v(i,t,r,c,o)}else if(c=ue(e),typeof c=="function")for(e=c.call(e),f=0;!(i=e.next()).done;)i=i.value,c=n+S(i,f++),s+=v(i,t,r,c,o);else if(i==="object")throw t=String(e),Error("Objects are not valid as a React child (found: "+(t==="[object Object]"?"object with keys {"+Object.keys(e).join(", ")+"}":t)+"). If you meant to render a collection of children, use an array instead.");return s}function _(e,t,r){if(e==null)return e;var n=[],o=0;return v(e,n,"","",function(i){return t.call(r,i,o++)}),n}function ce(e){if(e._status===-1){var t=e._result;t=t(),t.then(function(r){(e._status===0||e._status===-1)&&(e._status=1,e._result=r)},function(r){(e._status===0||e._status===-1)&&(e._status=2,e._result=r)}),e._status===-1&&(e._status=0,e._result=t)}if(e._status===1)return e._result.default;throw e._result}var l={current:null},m={transition:null},fe={ReactCurrentDispatcher:l,ReactCurrentBatchConfig:m,ReactCurrentOwner:R};function T(){throw Error("act(...) is not supported in production builds of React.")}u.Children={map:_,forEach:function(e,t,r){_(e,function(){t.apply(this,arguments)},r)},count:function(e){var t=0;return _(e,function(){t++}),t},toArray:function(e){return _(e,function(t){return t})||[]},only:function(e){if(!w(e))throw Error("React.Children.only expected to receive a single React element child.");return e}};u.Component=p;u.Fragment=K;u.Profiler=X;u.PureComponent=E;u.StrictMode=Q;u.Suspense=re;u.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED=fe;u.act=T;u.cloneElement=function(e,t,r){if(e==null)throw Error("React.cloneElement(...): The argument must be a React element, but you passed "+e+".");var n=P({},e.props),o=e.key,i=e.ref,s=e._owner;if(t!=null){if(t.ref!==void 0&&(i=t.ref,s=R.current),t.key!==void 0&&(o=""+t.key),e.type&&e.type.defaultProps)var f=e.type.defaultProps;for(c in t)q.call(t,c)&&!N.hasOwnProperty(c)&&(n[c]=t[c]===void 0&&f!==void 0?f[c]:t[c])}var c=arguments.length-2;if(c===1)n.children=r;else if(1<c){f=Array(c);for(var a=0;a<c;a++)f[a]=arguments[a+2];n.children=f}return{$$typeof:y,type:e.type,key:o,ref:i,props:n,_owner:s}};u.createContext=function(e){return e={$$typeof:ee,_currentValue:e,_currentValue2:e,_threadCount:0,Provider:null,Consumer:null,_defaultValue:null,_globalName:null},e.Provider={$$typeof:Z,_context:e},e.Consumer=e};u.createElement=D;u.createFactory=function(e){var t=D.bind(null,e);return t.type=e,t};u.createRef=function(){return{current:null}};u.forwardRef=function(e){return{$$typeof:te,render:e}};u.isValidElement=w;u.lazy=function(e){return{$$typeof:oe,_payload:{_status:-1,_result:e},_init:ce}};u.memo=function(e,t){return{$$typeof:ne,type:e,compare:t===void 0?null:t}};u.startTransition=function(e){var t=m.transition;m.transition={};try{e()}finally{m.transition=t}};u.unstable_act=T;u.useCallback=function(e,t){return l.current.useCallback(e,t)};u.useContext=function(e){return l.current.useContext(e)};u.useDebugValue=function(){};u.useDeferredValue=function(e){return l.current.useDeferredValue(e)};u.useEffect=function(e,t){return l.current.useEffect(e,t)};u.useId=function(){return l.current.useId()};u.useImperativeHandle=function(e,t,r){return l.current.useImperativeHandle(e,t,r)};u.useInsertionEffect=function(e,t){return l.current.useInsertionEffect(e,t)};u.useLayoutEffect=function(e,t){return l.current.useLayoutEffect(e,t)};u.useMemo=function(e,t){return l.current.useMemo(e,t)};u.useReducer=function(e,t,r){return l.current.useReducer(e,t,r)};u.useRef=function(e){return l.current.useRef(e)};u.useState=function(e){return l.current.useState(e)};u.useSyncExternalStore=function(e,t,r){return l.current.useSyncExternalStore(e,t,r)};u.useTransition=function(){return l.current.useTransition()};u.version="18.3.1"});var U=d(($e,L)=>{"use strict";L.exports=V()});var F=d(h=>{"use strict";var le=U(),ae=Symbol.for("react.element"),pe=Symbol.for("react.fragment"),ye=Object.prototype.hasOwnProperty,de=le.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,_e={key:!0,ref:!0,__self:!0,__source:!0};function A(e,t,r){var n,o={},i=null,s=null;r!==void 0&&(i=""+r),t.key!==void 0&&(i=""+t.key),t.ref!==void 0&&(s=t.ref);for(n in t)ye.call(t,n)&&!_e.hasOwnProperty(n)&&(o[n]=t[n]);if(e&&e.defaultProps)for(n in t=e.defaultProps,t)o[n]===void 0&&(o[n]=t[n]);return{$$typeof:ae,type:e,key:i,ref:s,props:o,_owner:de.current}}h.Fragment=pe;h.jsx=A;h.jsxs=A});var ve=d((je,M)=>{"use strict";M.exports=F()});export{me as a,d as b,he as c,Se as d,Ee as e,ke as f,U as g,ve as h};
-/*! Bundled license information:
-
-react/cjs/react.production.min.js:
-  (**
-   * @license React
-   * react.production.min.js
-   *
-   * Copyright (c) Facebook, Inc. and its affiliates.
-   *
-   * This source code is licensed under the MIT license found in the
-   * LICENSE file in the root directory of this source tree.
-   *)
-
-react/cjs/react-jsx-runtime.production.min.js:
-  (**
-   * @license React
-   * react-jsx-runtime.production.min.js
-   *
-   * Copyright (c) Facebook, Inc. and its affiliates.
-   *
-   * This source code is licensed under the MIT license found in the
-   * LICENSE file in the root directory of this source tree.
-   *)
-*/
-
-if (typeof window !== 'undefined' && !window.React) {
-    console.warn('MoonUI: React not found. Please include React and ReactDOM before MoonUI.');
-}
-//# sourceMappingURL=chunk-VXDFZPDA.global.js.map