@moontra/moonui 6.27.0 → 6.29.0

package/dist/index.mjs

@@ -108,14 +108,22 @@ var alertVariants = cva(
     variants: {
       variant: {
         default: "bg-background text-foreground border-border",
-        primary: "bg-primary/10 text-primary border-primary/30",
-        success: "bg-success/10 text-success border-success/30",
-        warning: "bg-warning/10 text-warning-subtle-foreground border-warning/30",
-        error: "bg-destructive/10 text-destructive border-destructive/30",
+        // KONTRAST (açık tema): metin rengi ham `text-X` DEĞİL,
+        // `text-X-subtle-foreground` olmalı. `bg-X/10 + text-X` deseni
+        // açık temada ölçülen 4.11–4.45 veriyor ve WCAG AA eşiğini
+        // (4.5) geçmiyor. `-subtle-foreground` token'ları aynı yüzey
+        // için 8.20–9.52 sağlıyor (tokens.css'te oranlar yazılı) ve
+        // `bg-X-subtle`, `bg-X/10` ile AYNI görünümü verir
+        // (tokens.css:217) → görsel kimlik değişmez, yalnız metin
+        // koyulaşır. `warning` bu düzeltmeyi zaten taşıyordu.
+        primary: "bg-primary-subtle text-primary-subtle-foreground border-primary/30",
+        success: "bg-success-subtle text-success-subtle-foreground border-success/30",
+        warning: "bg-warning-subtle text-warning-subtle-foreground border-warning/30",
+        error: "bg-destructive-subtle text-destructive-subtle-foreground border-destructive/30",
         // `--info` token'ı (tokens.css) blue-500 ile birebir aynı değeri
         // taşır → görsel değişiklik yok, ancak varyant artık temaya ve
         // karanlık moda duyarlı. Kardeş varyantlarla simetrik.
-        info: "bg-info/10 text-info border-info/30"
+        info: "bg-info-subtle text-info-subtle-foreground border-info/30"
       },
       size: {
         sm: "py-2 text-xs",
@@ -224,7 +232,12 @@ var AlertDescription = React12.forwardRef(({ className, ...props }, ref) => /* @
     ref,
     className: cn(
       "moonui-theme",
-      "text-sm leading-5 text-muted-foreground",
+      // KONTRAST: sabit `text-muted-foreground` (#606f85) renkli varyant
+      // yüzeylerinde 4.31–4.48 veriyordu — başlık düzelse bile açıklama
+      // satırı eşiğin altında kalıyordu. `text-current` varyantın
+      // `-subtle-foreground` rengini miras alır; hiyerarşi renk yerine
+      // ağırlıkla (başlık `font-semibold`) ve hafif opaklıkla korunur.
+      "text-sm leading-5 text-current opacity-90",
       className
     ),
     ...props
@@ -421,12 +434,36 @@ var badgeVariants = cva(
           "focus-visible:ring-gray-400/30 dark:focus-visible:ring-gray-500/40",
           "dark:bg-gray-700/50 dark:text-gray-50 dark:shadow-inner dark:shadow-gray-950/10"
         ],
+        // #708 kalem 3: `outline` varyantı TÜKETİCİYİ EZİYORDU — #715'in `button`da
+        // kapattığı deliğin birebir aynısı. `cn()` = `twMerge(clsx(...))`; tüketici
+        // `className="text-white"` yazınca twMerge ÖNEKSİZ `text-foreground`u eler,
+        // ama `dark:text-gray-100` AYRI modifier grubu olduğu için ELENMEZ ve koyu
+        // temada özgüllükle kazanır: (0,2,0) > (0,1,0).
+        //
+        // Ölçülen sonuç (docs "PRO" rozeti, `from-brand-600 to-brand-accent-600`
+        // gradyanı üstünde, `text-xs` = küçük metin → AA 4.5:1):
+        //   light  beyaz    → en kötü uç 4.60  ✓   (tüketicinin istediği renk)
+        //   dark   gray-100 → en kötü uç 4.18  ✗   (varyantın dayattığı renk)
+        // A18-V 10/10 sayfada ölçtü; axe bunu `violations`a HİÇ yazmıyor (gradyan
+        // zemin → `incomplete` kovası), bu yüzden 11 koşu boyunca görülmedi.
+        //
+        // #715'in AYRIMI satır satır uygulandı:
+        //   · `dark:bg-transparent`   → öneksiz `bg-transparent` zaten aşağıda ve
+        //     `outline`da başka `bg-*` yok (sıralama guard'ı da değil) → SAF TEKRAR,
+        //     kaldırıldı.
+        //   · `dark:text-gray-100`    → öneksiz ikizinden (`--foreground` dark =
+        //     rgb(225,231,239)) FARKLI bir değere gidiyordu, ama fark rozetin kendi
+        //     okunurluğunda ölçülemeyecek kadar küçük (koyu kart üstünde 15.0 → 13.5;
+        //     ikisi de AA'nın çok üstünde) ve karşılığında tüketicinin AA'yı GEÇEN
+        //     `text-white`ını eziyordu → kaldırıldı.
+        //   · `dark:backdrop-blur-sm` → öneksiz ikizi yok, koyu-temaya özgü gerçek
+        //     bir efekt → KORUNDU.
         outline: [
           "border-gray-200 dark:border-gray-600",
           "bg-transparent text-foreground",
           "hover:border-gray-300 dark:hover:border-gray-500",
           "focus-visible:ring-gray-400/30 dark:focus-visible:ring-gray-500/40",
-          "dark:text-gray-100 dark:bg-transparent dark:backdrop-blur-sm"
+          "dark:backdrop-blur-sm"
         ],
         // #544: `bg-error` (= --error, #ef4343) beyaz metinle 3.78 veriyordu (AA 4.5 ister),
         // `dark:bg-error/90` ise gerçek koyu kart (#111827) üstünde 4.43 ile kalıyordu.
@@ -781,11 +818,68 @@ var buttonVariants = cva(
   {
     variants: {
       variant: {
+        // #715 Dal 1 — GEREKSİZ `dark:` TEKRARI KALDIRILDI.
+        // `--primary` ve `--primary-foreground` `.dark` bloğunda ZATEN farklı değer
+        // alıyor (tokens.css:129/137 ↔ :545/546), yani öneksiz `bg-primary
+        // text-primary-foreground` iki temada da doğru çifti veriyor. `dark:` ikizi
+        // hiçbir şey KAZANDIRMIYOR, yalnız özgüllüğü şişiriyordu:
+        //   .dark\:text-primary-foreground:is(.dark *)  → (0,2,0)
+        //   tüketicinin  text-white                     → (0,1,0)
+        // `cn()` = twMerge: tüketici `text-white` yazınca twMerge öneksiz
+        // `text-primary-foreground`u ELER ama `dark:` ikizi AYRI modifier grubu
+        // olduğu için KALIR → koyu temada metin sessizce dark
+        // `--primary-foreground`a (222.2 47.4% 1.2% = rgb(2,2,5)) düşüyordu.
+        // Ölçüldü: beyaz metin beklerken 1.28:1 (docs/click-animations gradyan
+        // butonları). Öneksiz satır kaldığı için TEMA DAVRANIŞI DEĞİŞMEZ.
+        // Kardeş presedans: #533/#646 badge'de `dark:bg-primary/90`ı aynı gerekçeyle
+        // kaldırdı; button'a o turda uğranmamıştı.
+        //
+        // #715 Dal 3 — `primary`nin hover/active ALFA kompoziti AA altındaydı;
+        // `destructive`in (Dal 2) birebir aynı kusuru. `/90` ve `/80` zemini BEYAZLA
+        // karıştırıp rengi AÇIYOR, metin ise sabit `--primary-foreground` (#f8fafc):
+        //   resting  bg-primary      #1067f4 → 4.70 ✓  (#442: geçiyor → DOKUNULMADI)
+        //   hover    bg-primary/90   #2876f5 → 4.01 ✗
+        //   active   bg-primary/80   #4085f6 → 3.40 ✗
+        // Koyu tema ZATEN geçiyor (near-white zemin + near-black metin: 19.80 /
+        // 15.96 / 12.50) → düzeltmenin onu bozmaması ŞART.
+        //
+        // ⚠️ Dal 2'nin çözümü (alfa yerine opak `error-NNN` kademesi) BURADA
+        // UYGULANAMAZ — `primary`nin skala ailesi YANLIŞ HUE'DA:
+        //   --primary        217.2 91.2% 51%  = #1067f4  (blue,  h≈217)
+        //   --primary-700    3 105 161        = #0369a1  (sky,   h≈199)
+        // `--primary-50…950` (tokens.css:15-25) Tailwind SKY paleti; `--primary`nin
+        // koyusu DEĞİL, başka bir renk. Üstüne preset o kademeleri hiçbir utility'ye
+        // bağlamıyor → `bg-primary-700` bugün HİÇ CSS ÜRETMEYEN ölü sınıf (#713).
+        // Ölçülen adaylar ve RET gerekçeleri:
+        //   · preset'e sky kademelerini bağla → açık temada 5.67 ✓, AMA (a) görünür
+        //     hue kayması, (b) `bg-primary-600` (3.91 ✗) "primary'nin koyusu" sanılan
+        //     yanıltıcı public API, (c) öneksiz sınıf koyu temada DA uygulanır ve
+        //     near-black metinle 3.49'a ÇÖKER. → RET
+        //   · `bg-blue-700` (6.41 ✓) → token'ı by-pass eder; tüketici `--primary`yi
+        //     override edince hover mavide takılı kalır. → RET
+        //   · `bg-primary-subtle-foreground` (#0950c3, 6.81 ✓, doğru hue, sınıf ZATEN
+        //     üretiliyor) → FOREGROUND rolündeki token'ı ZEMİN yapmak iki rolü
+        //     birbirine kilitler. → RET
+        // SEÇİLEN: koyu tonu `--primary`nin KENDİSİNDEN türet (`color-mix`, siyaha
+        // doğru). Tek öneksiz sınıf iki temada da doğru sonuç verir ve tüketici
+        // `--primary`yi değiştirdiğinde hover/active KENDİLİĞİNDEN uyar —
+        // tokens.css:120-128'in bilinçle koruduğu sözleşme bozulmaz.
+        // GERÇEK TARAYICIDA ÖLÇÜLDÜ (headless Chrome 140, piksel örneklemesi):
+        //   hover   85% + black  açık #0e57cf → 6.11 ✓ | koyu #d3d4d6 → 13.97 ✓
+        //   active  75% + black  açık #0c4db7 → 7.27 ✓ | koyu #babbbd → 10.79 ✓
+        // (Testteki kanal-bazlı model 1/255 yuvarlama farkıyla #0e58cf → 6.05 der;
+        // ikisi de eşiğin çok üstünde. `color-mix` gerçekten ÇÖZÜLÜYOR — tarayıcı
+        // `color(srgb 0.053652 0.342337 0.813348)` döndürüyor, yani sınıf ölü değil.)
+        // `dark:` GUARD GEREKMEZ: Dal 1'den sonra dizide hiç `dark:bg-*` yok; tek
+        // rakip öneksiz `bg-primary` (0,1,0) ve `hover:`/`active:` (0,2,0) onu yener.
+        // `[color:…]` ETİKETİ BİLEREK yazıldı: sınıfın renk olarak tanınmasını hem
+        // Tailwind'in hem twMerge'ün tip ÇIKARIMINA bırakmaz. (Etiketsiz form da
+        // bugün doğru çalışıyor — ikisi de deterministik probe'la ölçüldü — ama
+        // #715'in tamamı "sessizce yanlış sınıflandırılan sınıf" hikâyesidir.)
         primary: [
           "bg-primary text-primary-foreground",
-          "dark:bg-primary dark:text-primary-foreground",
-          "hover:bg-primary/90 dark:hover:bg-primary/90",
-          "active:bg-primary/80 dark:active:bg-primary/80",
+          "hover:bg-[color:color-mix(in_srgb,hsl(var(--primary))_85%,black)]",
+          "active:bg-[color:color-mix(in_srgb,hsl(var(--primary))_75%,black)]",
           "shadow-sm hover:shadow-md",
           "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
           "transition-all duration-200"
@@ -799,12 +893,18 @@ var buttonVariants = cva(
           "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
           "shadow-sm hover:shadow-md"
         ],
+        // #715 Dal 1 — `outline`ın DÖRT `dark:` satırı da aynı token'ın tekrarıydı
+        // (`--background`/`--foreground`/`--input`/`--accent(-foreground)` hepsi
+        // `.dark` bloğunda tanımlı) → kaldırıldı. Kaskad davranışı korunuyor:
+        // Tailwind 3.4.17 çıktısında `hover:`/`active:` kuralları `dark:`ten ÖNCE
+        // yazılıyor, yani rakip `dark:bg-background` (0,2,0) gitmeden `hover:bg-accent`
+        // (0,2,0) koyu temada kaybederdi — bu yüzden satırlar TEK TEK değil,
+        // varyant bazında BÜTÜN olarak kaldırıldı.
         outline: [
           "bg-background text-foreground",
-          "dark:bg-background dark:text-foreground",
-          "border border-input dark:border-input",
-          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent dark:hover:text-accent-foreground",
-          "active:bg-accent/80 dark:active:bg-accent/80",
+          "border border-input",
+          "hover:bg-accent hover:text-accent-foreground",
+          "active:bg-accent/80",
           "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
           "transition-all duration-200"
         ],
@@ -825,11 +925,34 @@ var buttonVariants = cva(
         // Not: `dark:bg-destructive` KALDIRILDI, yanına eklenmedi — iki `dark:bg-*`
         // utility'si aynı anda yazılırsa hangisinin kazanacağını sınıf dizgesi sırası
         // DEĞİL Tailwind'in kendi iç sıralaması belirler.
+        //
+        // #715 Dal 2 — #544 yalnız RESTING durumu ölçmüştü; alfa harmanlı DURUM
+        // dalları sayılmadı. Açık temada `/90` ve `/80` zemini BEYAZLA karıştırıp
+        // rengi AÇIYOR, yani AA'yı düşürüyor (metin sabit `--destructive-foreground`
+        // #f8fafc):
+        //   resting  bg-destructive        #e11313  → 4.66 ✓ (#544'ün ölçtüğü)
+        //   hover    bg-destructive/90     #e42b2b  → 4.29 ✗  (axe: 4.28, serious)
+        //   active   bg-destructive/80     #e74242  → 3.82 ✗
+        // Çözüm koyu dalın ZATEN kullandığı yaklaşım: alfa yerine opak `error`
+        // kademesi. Açık dal da aynı kademelere bağlandı:
+        //   hover    bg-error-700          #b91c1c  → 6.18 ✓
+        //   active   bg-error-800          #991b1b  → 7.94 ✓
+        // Yan fayda: durum ilerlemesi artık tutarlı KOYULAŞIYOR (e11313 → b91c1c →
+        // 991b1b); alfa sürümünde active, hover'dan DAHA AÇIK oluyordu.
+        // `--destructive` token'ına ve resting sınıfına DOKUNULMADI (#442).
+        //
+        // ⚠️ `dark:hover:`/`dark:active:` ikizleri öneksiziyle aynı değeri taşısa da
+        // KALDIRILAMAZ — `dark:bg-error-600` (resting, farklı değer) hâlâ gerekli ve
+        // Tailwind 3.4.17 `dark:`i `hover:`ten SONRA yazıyor (aynı özgüllük, 0,2,0):
+        //   .hover\:bg-error-700:hover  <  .dark\:bg-error-600:is(.dark *)
+        // Öneki atarsak koyu temada hover, resting rengine geri düşer. `dark:hover:`
+        // (0,3,0) bu sıralamayı yener. Bu, Dal 1'deki "gereksiz tekrar"dan farklıdır:
+        // burada satırın ÖLÇÜLEBİLİR bir işlevi var.
         destructive: [
           "bg-destructive text-destructive-foreground",
-          "dark:bg-error-600 dark:text-destructive-foreground",
-          "hover:bg-destructive/90 dark:hover:bg-error-700",
-          "active:bg-destructive/80 dark:active:bg-error-800",
+          "dark:bg-error-600",
+          "hover:bg-error-700 dark:hover:bg-error-700",
+          "active:bg-error-800 dark:active:bg-error-800",
           "shadow-sm hover:shadow-md",
           "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
           "transition-all duration-200"
@@ -840,10 +963,38 @@ var buttonVariants = cva(
           // dokunulmadı (#442 kuralı: geçen yüzeyde regresyon riski açma).
           // Dolgu opak `success` skalasına bağlandı: -600 hâlâ 3.15, ölçümle geçen
           // en açık kademe -700 (4.79).
+          // #715 Dal 1: `dark:text-success-foreground` gereksiz tekrardı (aynı token,
+          // `.dark` bloğunda tanımlı) → kaldırıldı. `dark:bg-success-700` FARKLI bir
+          // değere işaret ettiği için KALDI.
+          //
+          // #715 Dal 3 — AÇIK temanın hover/active alfası da AA altındaydı
+          // (metin sabit `--success-foreground` #f8fafc, zemin beyaz):
+          //   resting  bg-success      #12823b → 4.69 ✓ (#442 → DOKUNULMADI)
+          //   hover    bg-success/90   #2a8f4f → 3.90 ✗
+          //   active   bg-success/80   #419b62 → 3.30 ✗
+          // Burada `destructive`in çözümü AYNEN geçerli, çünkü `--success-NNN`
+          // skalası `--success` ile AYNI hue'da (#15803d ↔ #12823b) — `primary`den
+          // ayrıldığı nokta tam da bu. Açık dal, KOYU dalın zaten kullandığı
+          // kademelere bağlandı (tek kaynak, tutarlı ilerleme):
+          //   hover   bg-success-800  #166534 → 6.81 ✓
+          //   active  bg-success-900  #14532d → 8.71 ✓
+          // -700 (4.79) BİLEREK seçilmedi: hem eşiğe fazla yakın hem de `bg-success`
+          // ile neredeyse aynı renk (#15803d ↔ #12823b) — hover geri bildirimi
+          // görünmez olurdu.
+          //
+          // ⚠️ `dark:hover:`/`dark:active:` ikizleri artık öneksiziyle AYNI değeri
+          // taşıyor ama KALDIRILAMAZ — `destructive`teki sıralama guard'ının aynısı.
+          // Tailwind 3.4.17 çıktısı (deterministik CLI probe'uyla doğrulandı) `dark:`i
+          // `hover:`ten SONRA yazıyor ve ikisi de (0,2,0):
+          //   .hover\:bg-success-800:hover  <  .dark\:bg-success-700:is(.dark *)
+          // `dark:hover:` (0,3,0) bu sıralamayı yener. GERÇEK TARAYICIDA KANITLANDI:
+          // guard'sız ikinci bir buton üretilip koyu temada hover'landığında zemin
+          // rgb(21,128,61)'de KALDI (= resting/-700, hover HİÇ uygulanmadı);
+          // guard'lı buton rgb(22,101,52)'ye (-800) geçti.
           "bg-success text-success-foreground",
-          "dark:bg-success-700 dark:text-success-foreground",
-          "hover:bg-success/90 dark:hover:bg-success-800",
-          "active:bg-success/80 dark:active:bg-success-900",
+          "dark:bg-success-700",
+          "hover:bg-success-800 dark:hover:bg-success-800",
+          "active:bg-success-900 dark:active:bg-success-900",
           "shadow-sm hover:shadow-md",
           "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
           "transition-all duration-200"
@@ -893,7 +1044,10 @@ var buttonVariants = cva(
           // üretiyor, `--primary-foreground` ise koyu — ikisi birbirini yiyordu.
           // #354'ün sidebar'da kanıtlanmış çözümü: subtle token ÇİFTİ (zemin+metin
           // birlikte tanımlı, koyu temada koyu zemin + açık metin).
-          "dark:bg-primary-subtle dark:text-primary-subtle-foreground",
+          // #715 Dal 1: bu çift ARTIK yukarıdaki öneksiz satırdan geliyor —
+          // `dark:bg-primary-subtle dark:text-primary-subtle-foreground` aynı token'ın
+          // tekrarıydı, kaldırıldı (#686'nın çözümü aynen KORUNUYOR, yalnız tek
+          // yerden yazılıyor). Hover/active dalları FARKLI alfa taşıdığı için KALDI.
           "dark:hover:bg-primary/30 dark:active:bg-primary/40",
           "transition-colors duration-200"
         ],
@@ -6645,9 +6799,9 @@ var SelectItem = React12.forwardRef(({ className, children, variant = "default",
       /* Color variants */
       variant === "default" && "focus:bg-accent focus:text-accent-foreground dark:focus:bg-gray-700 dark:focus:text-gray-100",
       variant === "subtle" && "focus:bg-gray-100 dark:focus:bg-gray-800 focus:text-foreground dark:focus:text-gray-200",
-      variant === "destructive" && "text-error dark:text-red-400 focus:bg-error/10 dark:focus:bg-red-900/20 focus:text-error dark:focus:text-red-300",
-      variant === "success" && "text-success focus:bg-success/10 focus:text-success",
-      variant === "warning" && "text-warning-700 dark:text-warning-500 focus:bg-warning/10 focus:text-warning-700 dark:focus:text-warning-500",
+      variant === "destructive" && "text-destructive-subtle-foreground focus:bg-destructive-subtle focus:text-destructive-subtle-foreground",
+      variant === "success" && "text-success-subtle-foreground focus:bg-success-subtle focus:text-success-subtle-foreground",
+      variant === "warning" && "text-warning-subtle-foreground focus:bg-warning-subtle focus:text-warning-subtle-foreground",
       className
     ),
     ...props,