@moontra/moonui 6.9.0 → 6.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moontra/moonui",
-  "version": "6.9.0",
+  "version": "6.11.0",
   "description": "Premium React component library with modern design and customization",
   "author": "MoonUI",
   "license": "MIT",

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

@@ -84,13 +84,13 @@ describe('Checkbox Components', () => {
       it('renders md size correctly', () => {
         render(<Checkbox size="md" data-testid="checkbox" />)
         const checkbox = screen.getByTestId('checkbox')
-        expect(checkbox).toHaveClass('h-5', 'w-5')
+        expect(checkbox).toHaveClass('h-4', 'w-4')
       })
 
       it('renders lg size correctly', () => {
         render(<Checkbox size="lg" data-testid="checkbox" />)
         const checkbox = screen.getByTestId('checkbox')
-        expect(checkbox).toHaveClass('h-6', 'w-6')
+        expect(checkbox).toHaveClass('h-5', 'w-5')
       })
 
       it('uses default size as default', () => {
@@ -538,7 +538,7 @@ describe('Checkbox Components', () => {
       
       const checkbox = screen.getByTestId('checkbox')
       expect(checkbox).toHaveClass('bg-transparent')
-      expect(checkbox).toHaveClass('h-6', 'w-6')
+      expect(checkbox).toHaveClass('h-5', 'w-5')
       expect(checkbox).toHaveClass('rounded-full')
       expect(checkbox).toHaveClass('transition-all')
       expect(checkbox).toHaveClass('custom-class')

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

@@ -197,7 +197,7 @@ describe('Collapsible Components', () => {
       )
 
       const trigger = screen.getByTestId('trigger')
-      expect(trigger).toHaveClass('text-base')
+      expect(trigger).toHaveClass('text-sm')
     })
 
     it('renders lg size correctly', () => {
@@ -211,7 +211,7 @@ describe('Collapsible Components', () => {
       )
 
       const trigger = screen.getByTestId('trigger')
-      expect(trigger).toHaveClass('text-lg')
+      expect(trigger).toHaveClass('text-base')
     })
 
     it('renders chevron icon', () => {
@@ -382,7 +382,7 @@ describe('Collapsible Components', () => {
       )
 
       const content = screen.getByTestId('content')
-      expect(content).toHaveClass('text-base')
+      expect(content).toHaveClass('text-sm')
     })
 
     it('renders lg size correctly', () => {
@@ -396,7 +396,7 @@ describe('Collapsible Components', () => {
       )
 
       const content = screen.getByTestId('content')
-      expect(content).toHaveClass('text-lg')
+      expect(content).toHaveClass('text-base')
     })
 
     it('renders content wrapper with padding', () => {
@@ -438,7 +438,7 @@ describe('Collapsible Components', () => {
     it('collapsibleContentVariants generates correct classes', () => {
       expect(collapsibleContentVariants()).toContain('overflow-hidden transition-all')
       expect(collapsibleContentVariants({ variant: 'outline' })).toContain('border')
-      expect(collapsibleContentVariants({ size: 'lg' })).toContain('text-lg')
+      expect(collapsibleContentVariants({ size: 'lg' })).toContain('text-base')
     })
   })
 

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

@@ -252,7 +252,7 @@ describe('Dialog Components', () => {
         </Dialog>
       )
       
-      expect(screen.getByTestId('content')).toHaveClass('max-w-2xl p-7')
+      expect(screen.getByTestId('content')).toHaveClass('max-w-lg p-6')
     })
 
     it('renders different radius variants', () => {
@@ -685,7 +685,7 @@ describe('Dialog Components', () => {
       const content = screen.getByTestId('dialog-content')
       expect(content).toHaveClass('custom-dialog')
       expect(content).toHaveClass('border-primary/20 dark:border-primary/30')
-      expect(content).toHaveClass('max-w-2xl p-7')
+      expect(content).toHaveClass('max-w-lg p-6')
       expect(content).toHaveClass('rounded-2xl')
       expect(content).toHaveClass('top-[5%]')
       expect(screen.getByTestId('dialog-title')).toHaveTextContent('Advanced Dialog')

package/src/components/ui/__tests__/preset-color-shadowing.test.ts

@@ -0,0 +1,71 @@
+/**
+ * Tailwind preset'inde RENK GÖLGELEME bekçisi.
+ *
+ * Gerçek olay: `theme.extend.borderColor` bloğu `success`/`warning`/`info`/`error`/`caution`'ı
+ * DÜZ STRING olarak tanımlıyordu. Tailwind bu düz değeri `theme.colors` altındaki İÇ İÇE
+ * nesnenin üzerine yazar → o beş isimde `border-*` ailesi için yalnız DEFAULT hayatta kalır,
+ * `border-success-subtle-foreground` gibi alt anahtarlar **hiç CSS üretmez**.
+ *
+ * Bu sessiz bir kusurdur: TypeScript görmez, jest render testi görmez (sınıf DOM'da vardır,
+ * yalnız karşılığı yoktur). #313/#314/#323'te toast'a eklenen üç kenarlık sınıfı tam bu yüzden
+ * ölü çıktı ve ancak deterministik bir Tailwind CLI probe'uyla yakalandı.
+ */
+import preset from '../../../../tailwind-preset.js'
+
+type ColorValue = string | Record<string, unknown>
+
+// DİKKAT: bu preset'te renkler `theme.colors` DEĞİL, `theme.extend.colors` altında.
+// (İlk yazımda yanlış yere baktım ve test kırmızı oldu — yapı varsayılmamalı, okunmalı.)
+const extend = (preset as any).theme?.extend as Record<string, unknown> | undefined
+const colors = extend?.colors as Record<string, ColorValue> | undefined
+
+/** `border-*`, `text-*`, `bg-*` … ailelerini besleyen, renk gölgeleyebilen extend anahtarları */
+const RENK_AILELERI = [
+  'borderColor',
+  'textColor',
+  'backgroundColor',
+  'ringColor',
+  'divideColor',
+  'outlineColor',
+  'fill',
+  'stroke',
+  'placeholderColor',
+  'accentColor',
+  'caretColor',
+]
+
+describe('tailwind preset — iç içe renk anahtarları gölgelenmiyor', () => {
+  it('preset okunabiliyor ve colors tanımlı (sessiz yeşil koruması)', () => {
+    expect(colors).toBeDefined()
+    // `destructive` iç içe nesne olmalı — tarayıcının canlı olduğunun kanıtı
+    expect(typeof colors!.destructive).toBe('object')
+  })
+
+  it('hiçbir renk ailesi extend\'i, iç içe bir `colors` girdisini DÜZ STRING ile ezmiyor', () => {
+    const ihlaller: string[] = []
+    for (const aile of RENK_AILELERI) {
+      const blok = extend?.[aile] as Record<string, ColorValue> | undefined
+      if (!blok || typeof blok !== 'object') continue
+      for (const [isim, deger] of Object.entries(blok)) {
+        const asil = colors?.[isim]
+        if (asil && typeof asil === 'object' && typeof deger === 'string') {
+          const kayipAnahtarlar = Object.keys(asil).filter((k) => k !== 'DEFAULT')
+          ihlaller.push(
+            `theme.extend.${aile}.${isim} düz string → colors.${isim}'in ` +
+              `[${kayipAnahtarlar.join(', ')}] alt anahtarları ${aile} için ÖLÜ`
+          )
+        }
+      }
+    }
+    expect(ihlaller).toEqual([])
+  })
+
+  it('semantik renklerin subtle alt anahtarları preset\'te tanımlı', () => {
+    for (const isim of ['destructive', 'success', 'warning', 'info']) {
+      const c = colors?.[isim] as Record<string, unknown> | undefined
+      expect(c).toBeDefined()
+      expect(c).toHaveProperty('subtle')
+      expect(c).toHaveProperty('subtle-foreground')
+    }
+  })
+})

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

@@ -122,19 +122,19 @@ describe('Progress Component', () => {
     it('renders md size correctly', () => {
       render(<Progress size="md" />)
       const progress = screen.getByRole('progressbar')
-      expect(progress).toHaveClass('h-2.5')
+      expect(progress).toHaveClass('h-2')
     })
 
     it('renders lg size correctly', () => {
       render(<Progress size="lg" />)
       const progress = screen.getByRole('progressbar')
-      expect(progress).toHaveClass('h-3')
+      expect(progress).toHaveClass('h-2.5')
     })
 
     it('renders xl size correctly', () => {
       render(<Progress size="xl" />)
       const progress = screen.getByRole('progressbar')
-      expect(progress).toHaveClass('h-4')
+      expect(progress).toHaveClass('h-3')
     })
   })
 
@@ -327,7 +327,7 @@ describe('Progress Component', () => {
       
       const progress = screen.getByRole('progressbar')
       expect(progress).toHaveClass('bg-success/20')
-      expect(progress).toHaveClass('h-3')
+      expect(progress).toHaveClass('h-2.5')
       expect(progress).toHaveClass('rounded-sm')
       expect(progress).toHaveClass('[&>div]:duration-300')
       

package/src/components/ui/__tests__/radio-group.test.tsx

@@ -199,7 +199,7 @@ describe('RadioGroup Components', () => {
       )
       
       const label = screen.getByDisplayValue('test').nextElementSibling
-      expect(label).toHaveClass('h-5', 'w-5')
+      expect(label).toHaveClass('h-4', 'w-4')
     })
 
     it('renders lg size correctly', () => {
@@ -210,7 +210,7 @@ describe('RadioGroup Components', () => {
       )
       
       const label = screen.getByDisplayValue('test').nextElementSibling
-      expect(label).toHaveClass('h-6', 'w-6')
+      expect(label).toHaveClass('h-5', 'w-5')
     })
 
     it('renders custom indicator when checked', () => {
@@ -466,8 +466,8 @@ describe('RadioGroup Components', () => {
       const filledItem = screen.getByDisplayValue('filled').nextElementSibling
       
       expect(defaultItem).toHaveClass('h-3.5', 'w-3.5', 'border-border', 'bg-background')
-      expect(outlineItem).toHaveClass('h-5', 'w-5', 'border-border', 'bg-transparent')
-      expect(filledItem).toHaveClass('h-6', 'w-6', 'border-primary', 'bg-primary/10')
+      expect(outlineItem).toHaveClass('h-4', 'w-4', 'border-border', 'bg-transparent')
+      expect(filledItem).toHaveClass('h-5', 'w-5', 'border-primary', 'bg-primary/10')
     })
 
     it('handles name attribute for form submission', () => {

package/src/components/ui/__tests__/semantic-token-usage.test.ts

@@ -0,0 +1,120 @@
+/**
+ * #313 / #314 / #323 — semantik durum varyantlarında ham palet bekçisi.
+ *
+ * Denetimin bulgusu: `destructive`/`success`/`warning`/`info` durum varyantları paketin
+ * kendi token'ları yerine ham Tailwind paletine (`bg-red-100 text-red-900`) düşmüştü.
+ * Sonuç görsel değil **işlevsel**: marka/tema özelleştirmesi bu varyantlara İŞLEMİYORDU —
+ * tüketici `--destructive`'i değiştirdiğinde menü item'ı ve toast eski kırmızıda kalıyordu.
+ *
+ * Çözüm `--*-subtle` token ailesiydi (düz `--destructive` "dolu zemin + açık metin" içindir;
+ * yumuşak tint + koyu metin için karşılığı yoktu). Bu test o dönüşümün geri gelmemesini korur.
+ *
+ * KAPSAM NOTU: kural yalnızca **durum varyantı** tanımlayan cva bloklarını hedefler.
+ * `premium` gibi DEKORATİF aksanlar (altın/gradient) kapsam dışıdır — bir "premium" rozetini
+ * `--warning`e bağlamak semantik olarak yanlış olurdu; onlar ayrı bir token ailesi ister.
+ */
+import * as fs from 'fs'
+import * as path from 'path'
+
+/** Ham Tailwind palet ailesi — semantik durumların yerine geçmemeli. */
+const HAM_PALET = /\b(?:bg|text|border|ring|from|to|via)-(red|green|yellow|orange|blue)-\d{2,3}\b/
+
+/** Durum varyantı adları — cva içinde bu anahtarların değerleri token kullanmalı. */
+const DURUM_ANAHTARLARI = ['destructive', 'success', 'warning', 'info', 'error']
+
+interface Ihlal {
+  file: string
+  line: number
+  anahtar: string
+  parca: string
+}
+
+function tara(root: string): Ihlal[] {
+  const files: string[] = []
+  ;(function walk(dir: string) {
+    if (!fs.existsSync(dir)) return
+    for (const e of fs.readdirSync(dir, { withFileTypes: true })) {
+      const p = path.join(dir, e.name)
+      if (e.isDirectory()) {
+        if (!/node_modules|__tests__|dist/.test(p)) walk(p)
+      } else if (/\.tsx?$/.test(e.name) && !/\.stories\./.test(e.name)) files.push(p)
+    }
+  })(root)
+
+  const ihlaller: Ihlal[] = []
+  for (const f of files) {
+    const src = fs.readFileSync(f, 'utf8')
+    for (const anahtar of DURUM_ANAHTARLARI) {
+      // `destructive: "…"` biçimindeki cva varyant girdisini yakala
+      const re = new RegExp(`\\n[ \\t]*${anahtar}:\\s*(["'])([\\s\\S]*?)\\1`, 'g')
+      for (const m of src.matchAll(re)) {
+        const deger = m[2]
+        const hit = deger.match(HAM_PALET)
+        if (hit) {
+          ihlaller.push({
+            file: path.relative(process.cwd(), f),
+            line: src.slice(0, m.index).split('\n').length + 1,
+            anahtar,
+            parca: hit[0],
+          })
+        }
+      }
+    }
+  }
+  return ihlaller
+}
+
+/**
+ * BİLİNEN KALAN İHLALLER — cırcır (ratchet) listesi.
+ *
+ * Bu PR (#313/#314/#323) menü + toast ailesini dönüştürdü. Bekçi kurulunca aynı desenin
+ * kütüphanede DAHA GENİŞ olduğu ortaya çıktı: 7 dosyada 21 ihlal daha. Onları bu PR'a
+ * çekmek kapsamı ilgisiz component'lere (dashboard widget'ları, timeline, avatar-pro…)
+ * yayardı; bu yüzden burada AÇIKÇA listeleniyorlar.
+ *
+ * Kural cırcır gibi çalışır: listedekiler tolere edilir, **yeni** ihlal kırmızı olur.
+ * Takip işi bu dosyaları dönüştürüp satırları buradan siler — liste boşalınca kural
+ * tam sıkı hale gelir.
+ */
+const BILINEN_KALANLAR: string[] = []
+
+const SRC_ROOT = path.resolve(__dirname, '../../..')
+const tumIhlaller = tara(SRC_ROOT)
+const ihlaller = tumIhlaller.filter(
+  (i) => !BILINEN_KALANLAR.some((b) => i.file.replace(/\\/g, '/').endsWith(b))
+)
+
+describe('#313/#314/#323 semantik durum varyantları token kullanır', () => {
+  it('tarayıcı gerçekten dosya buluyor (sessiz yeşil koruması)', () => {
+    // Regex/yol bozulursa test "0 ihlal" ile yeşil geçerdi. Bilinen bir durum
+    // varyantının var olduğunu doğrulayarak tarayıcının canlı olduğunu kanıtlıyoruz.
+    const toast = fs.readFileSync(
+      path.join(SRC_ROOT, 'components/ui/toast.tsx'),
+      'utf8'
+    )
+    expect(toast).toContain('success:')
+  })
+
+  it('durum varyantlarında ham Tailwind paleti YOK (bilinen kalanlar hariç)', () => {
+    const rapor = ihlaller.map((i) => `${i.file}:${i.line} → ${i.anahtar} içinde "${i.parca}"`)
+    expect(rapor).toEqual([])
+  })
+
+  it('cırcır listesi ÇALIŞIYOR — listelenen dosyalar gerçekten hâlâ ihlalli', () => {
+    // Bir dosya dönüştürüldüğünde bu test kırmızı olur ve satırı listeden silmeyi hatırlatır.
+    // Aksi hâlde liste sonsuza dek şişer ve kural sessizce gevşer.
+    const halaIhlalli = new Set(
+      tumIhlaller.map((i) => BILINEN_KALANLAR.find((b) => i.file.replace(/\\/g, '/').endsWith(b)))
+    )
+    const gereksizListelenen = BILINEN_KALANLAR.filter((b) => !halaIhlalli.has(b))
+    expect(gereksizListelenen).toEqual([])
+  })
+
+  it('toast success/warning/info gerçekten `--*-subtle` token\'larını kullanıyor', () => {
+    const toast = fs.readFileSync(path.join(SRC_ROOT, 'components/ui/toast.tsx'), 'utf8')
+    expect(toast).toContain('bg-success-subtle')
+    expect(toast).toContain('text-success-subtle-foreground')
+    expect(toast).toContain('bg-warning-subtle')
+    expect(toast).toContain('bg-info-subtle')
+  })
+})

package/src/components/ui/__tests__/size-scale-convention.test.ts

@@ -0,0 +1,189 @@
+/**
+ * #319 — `size` skalası konvansiyon bekçisi (free paket).
+ *
+ * Bu test bir component'i değil, **kütüphane genelindeki API tutarlılığını** koruyor.
+ * Denetim öncesi durum: 80 `size` varyant haritası, **23 farklı skala**; orta basamak kimi
+ * yerde `default`, kimi yerde `md`, **17 haritada İKİSİ BİRDEN ayrı basamak** olarak. Sonuç:
+ * `size="md"` bazı component'lerde çalışıyor, bazılarında sessizce varsayılana düşüyordu; ve
+ * `default` ile `md` **farklı** şeyler üretiyordu (ör. checkbox 16px vs 20px).
+ *
+ * Kanonik karar: `xs · sm · md · lg · xl · 2xl · 3xl · 4xl · 5xl`.
+ * `default` bir AD değil, bir varsayılan-işaretidir → CVA'da yeri `defaultVariants`.
+ * Geri uyum için `default` anahtarı **saf alias** olarak korunuyor (en az bir minor sürüm).
+ *
+ * Yeni bir component eklerken bu testin kırılması, skalanın sapmaya başladığı anlamına gelir.
+ */
+import * as fs from 'fs'
+import * as path from 'path'
+
+/** Sıralı boyut basamakları — kanonik skala. */
+const CANONICAL_STEPS = ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl']
+
+/**
+ * Boyut basamağı OLMAYAN, ama `size` ekseninde meşru olan özel değerler.
+ * Bunlar bir ölçek üzerinde yer tutmaz; ayrı bir davranış seçer.
+ */
+const SPECIAL_VALUES = ['icon', 'full', 'fullscreen', 'auto', 'responsive']
+
+/** Geriye dönük uyum için korunan, kaldırılması planlanan alias. */
+const DEPRECATED_ALIAS = 'default'
+
+const ALLOWED = new Set([...CANONICAL_STEPS, ...SPECIAL_VALUES, DEPRECATED_ALIAS])
+
+interface SizeMap {
+  file: string
+  line: number
+  entries: Array<[string, string]>
+  defaultVariant: string | null
+}
+
+function collectSizeMaps(root: string): SizeMap[] {
+  const files: string[] = []
+  ;(function walk(dir: string) {
+    for (const e of fs.readdirSync(dir, { withFileTypes: true })) {
+      const p = path.join(dir, e.name)
+      if (e.isDirectory()) {
+        if (!/node_modules|__tests__|dist/.test(p)) walk(p)
+      } else if (/\.tsx?$/.test(e.name) && !/\.stories\./.test(e.name)) {
+        files.push(p)
+      }
+    }
+  })(root)
+
+  const maps: SizeMap[] = []
+  for (const f of files) {
+    const src = fs.readFileSync(f, 'utf8')
+    const re = /\bsize:\s*\{/g
+    let m: RegExpExecArray | null
+    while ((m = re.exec(src))) {
+      // dengeli parantezle bloğu çıkar
+      let i = src.indexOf('{', m.index)
+      let depth = 0
+      let end = i
+      for (; end < src.length; end++) {
+        if (src[end] === '{') depth++
+        else if (src[end] === '}') {
+          depth--
+          if (depth === 0) break
+        }
+      }
+      const body = src.slice(i + 1, end)
+      const entries = [
+        ...body.matchAll(/\n[ \t]*(["']?)([A-Za-z0-9_]+)\1[ \t]*:[ \t]*(["'])([\s\S]*?)\3/g),
+      ].map((x) => [x[2], x[4].replace(/\s+/g, ' ').trim()] as [string, string])
+      if (!entries.length) {
+        re.lastIndex = end
+        continue
+      }
+      const dvBlock = src.slice(end).match(/defaultVariants:\s*\{([^}]*)\}/)
+      const dv = dvBlock?.[1].match(/\bsize\s*:\s*["']([^"']+)["']/)?.[1] ?? null
+      maps.push({
+        file: path.relative(process.cwd(), f),
+        line: src.slice(0, m.index).split('\n').length,
+        entries,
+        defaultVariant: dv,
+      })
+      re.lastIndex = end
+    }
+  }
+  return maps
+}
+
+const SRC_ROOT = path.resolve(__dirname, '../../..')
+const maps = collectSizeMaps(SRC_ROOT)
+
+describe('#319 size skalası konvansiyonu (free)', () => {
+  it('taranacak size haritası buldu (tarayıcının kendisi sessizce boşa düşmesin)', () => {
+    // Bu koruma olmadan, regex bozulduğunda tüm testler "0 harita" ile YEŞİL geçerdi.
+    expect(maps.length).toBeGreaterThan(20)
+  })
+
+  it('her size anahtarı kanonik sözlükte', () => {
+    const sapmalar = maps.flatMap((m) =>
+      m.entries
+        .map(([k]) => k)
+        .filter((k) => !ALLOWED.has(k))
+        .map((k) => `${m.file}:${m.line} → "${k}"`)
+    )
+    expect(sapmalar).toEqual([])
+  })
+
+  it('`default` yalnız SAF ALIAS olarak var — başka bir basamakla aynı değeri taşır', () => {
+    const ihlaller = maps
+      .filter((m) => m.entries.some(([k]) => k === DEPRECATED_ALIAS))
+      .filter((m) => {
+        const val = m.entries.find(([k]) => k === DEPRECATED_ALIAS)![1]
+        // aynı değeri taşıyan, `default` olmayan en az bir anahtar bulunmalı
+        return !m.entries.some(([k, v]) => k !== DEPRECATED_ALIAS && v === val)
+      })
+      .map((m) => `${m.file}:${m.line}`)
+    expect(ihlaller).toEqual([])
+  })
+
+  it('`defaultVariants.size` kanonik bir ada işaret eder, `default`a DEĞİL', () => {
+    const ihlaller = maps
+      .filter((m) => m.defaultVariant === DEPRECATED_ALIAS)
+      .map((m) => `${m.file}:${m.line}`)
+    expect(ihlaller).toEqual([])
+  })
+
+  /**
+   * Denetimin asıl bulgusu buydu: `default` ile `md` **ayrı basamaklar** olduğu için
+   * `size="default"` ve `size="md"` farklı şeyler üretiyordu (checkbox 16px vs 20px).
+   *
+   * Kural `default === md` DEĞİL — dialog'da `md` (max-w-md) varsayılandan küçüktü, orada
+   * `default` bilerek `lg`ye eşlendi. Doğru ve daha güçlü kural: `default`, component'in
+   * gerçekten varsayılan olarak ürettiği şeyin alias'ı olmalı. Böylece `size="default"`
+   * yazan tüketici, prop hiç vermemiş gibi bir sonuç alır.
+   */
+  it('`default`, `defaultVariants`ın işaret ettiği basamakla AYNI değeri üretir', () => {
+    const ihlaller = maps
+      .filter((m) => m.entries.some(([k]) => k === DEPRECATED_ALIAS))
+      .filter((m) => {
+        const aliasVal = m.entries.find(([k]) => k === DEPRECATED_ALIAS)![1]
+        const dvVal = m.entries.find(([k]) => k === m.defaultVariant)?.[1]
+        return dvVal === undefined || aliasVal !== dvVal
+      })
+      .map((m) => `${m.file}:${m.line} (default→"${m.defaultVariant}")`)
+    expect(ihlaller).toEqual([])
+  })
+
+  /**
+   * CVA DIŞI kaçış yolu. `AdvancedColorPicker` (pro) `size`'ı bir cva varyantı değil, elle
+   * yazılmış bir TS union + `sizeClasses` sözlüğü olarak tutuyordu — bu yüzden hem otomatik
+   * migrasyondan hem de yukarıdaki cva tabanlı kurallardan KAÇTI ve `"sm" | "default" | "lg"`
+   * olarak kaldı. Docs senkronu sırasında yakalandı; bu kural o boşluğu kapatır.
+   */
+  it('elle yazılmış `size?:` union tipleri de kanonik skalayı kullanır', () => {
+    const files: string[] = []
+    ;(function walk(dir: string) {
+      for (const e of fs.readdirSync(dir, { withFileTypes: true })) {
+        const p = path.join(dir, e.name)
+        if (e.isDirectory()) {
+          if (!/node_modules|__tests__|dist/.test(p)) walk(p)
+        } else if (/\.tsx?$/.test(e.name) && !/\.stories\./.test(e.name)) files.push(p)
+      }
+    })(SRC_ROOT)
+
+    const ihlaller: string[] = []
+    for (const f of files) {
+      const src = fs.readFileSync(f, 'utf8')
+      for (const m of src.matchAll(/\bsize\??\s*:\s*((?:"[a-zA-Z0-9_]+"\s*\|\s*)+"[a-zA-Z0-9_]+")/g)) {
+        const values = [...m[1].matchAll(/"([a-zA-Z0-9_]+)"/g)].map((x) => x[1])
+        const yer = `${path.relative(process.cwd(), f)}:${src.slice(0, m.index).split('\n').length}`
+
+        // (a) sözlük dışı bir değer
+        const disi = values.filter((v) => !ALLOWED.has(v))
+        if (disi.length) ihlaller.push(`${yer} → sözlük dışı: ${disi.join(', ')}`)
+
+        // (b) `default` ALIAS'tır: kanonik adın YERİNE geçemez, yanında durur.
+        //     `"sm" | "default" | "lg"` gibi bir union `md`yi hiç sunmadığı için ihlaldir —
+        //     color-picker tam olarak bu şekilde migrasyondan kaçmıştı.
+        if (values.includes(DEPRECATED_ALIAS) && !values.includes('md')) {
+          ihlaller.push(`${yer} → \`default\` var ama kanonik \`md\` YOK`)
+        }
+      }
+    }
+    expect(ihlaller).toEqual([])
+  })
+})

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

@@ -53,14 +53,14 @@ describe('Slider Component', () => {
       render(<Slider size="md" data-testid="slider" />)
       
       const sliderContainer = screen.getByTestId('slider').children[0] as HTMLElement
-      expect(sliderContainer).toHaveClass('h-8')
+      expect(sliderContainer).toHaveClass('h-6')
     })
 
     it('renders lg size correctly', () => {
       render(<Slider size="lg" data-testid="slider" />)
       
       const sliderContainer = screen.getByTestId('slider').children[0] as HTMLElement
-      expect(sliderContainer).toHaveClass('h-10')
+      expect(sliderContainer).toHaveClass('h-8')
     })
   })
 
@@ -180,14 +180,14 @@ describe('Slider Component', () => {
       render(<Slider thumbSize="md" data-testid="slider" />)
       
       const thumb = screen.getByRole('slider')
-      expect(thumb).toHaveClass('h-5', 'w-5')
+      expect(thumb).toHaveClass('h-4', 'w-4')
     })
 
     it('renders lg thumb size correctly', () => {
       render(<Slider thumbSize="lg" data-testid="slider" />)
       
       const thumb = screen.getByRole('slider')
-      expect(thumb).toHaveClass('h-6', 'w-6')
+      expect(thumb).toHaveClass('h-5', 'w-5')
     })
   })
 

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

@@ -146,9 +146,12 @@ describe('Toast Components', () => {
       const variants = [
         { variant: 'default', classes: ['bg-background', 'text-foreground'] },
         { variant: 'destructive', classes: ['bg-destructive', 'text-destructive-foreground'] },
-        { variant: 'success', classes: ['bg-green-50', 'text-green-900', 'border-green-200'] },
-        { variant: 'warning', classes: ['bg-orange-50', 'text-orange-900', 'border-orange-200'] },
-        { variant: 'info', classes: ['bg-blue-50', 'text-blue-900', 'border-blue-200'] },
+        // #323: bu üç varyant ham Tailwind paleti kullanıyordu (`bg-green-50` vb.) →
+        // marka/tema özelleştirmesi onlara İŞLEMİYORDU. Artık `--*-subtle` semantik
+        // token'ları. Kontrast korundu (8.70 / 8.83 / 9.52 — ölçüldü, bkz. changelog).
+        { variant: 'success', classes: ['bg-success-subtle', 'text-success-subtle-foreground'] },
+        { variant: 'warning', classes: ['bg-warning-subtle', 'text-warning-subtle-foreground'] },
+        { variant: 'info', classes: ['bg-info-subtle', 'text-info-subtle-foreground'] },
       ] as const
 
       variants.forEach(({ variant, classes }) => {

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

@@ -156,10 +156,14 @@ describe('Tooltip Components', () => {
       const variants = [
         { variant: 'default', className: 'bg-primary', textClassName: 'text-primary-foreground' },
         { variant: 'secondary', className: 'bg-secondary', textClassName: 'text-secondary-foreground' },
-        { variant: 'success', className: 'bg-green-500', textClassName: 'text-white' },
-        { variant: 'warning', className: 'bg-yellow-500', textClassName: 'text-white' },
+        // #313/#314/#323: bu üçü ham paletti ve KONTRASTI FELAKETTİ — ölçüldü:
+        // bg-green-500 + text-white = 2.28, bg-yellow-500 + text-white = 1.92 (AA 4.5).
+        // Semantik token'a geçince 4.67 / 8.18 oldu. Test eski (kırık) değerleri
+        // sabitliyordu; artık token çiftini doğruluyor.
+        { variant: 'success', className: 'bg-success', textClassName: 'text-success-foreground' },
+        { variant: 'warning', className: 'bg-warning', textClassName: 'text-warning-foreground' },
         { variant: 'destructive', className: 'bg-destructive', textClassName: 'text-destructive-foreground' },
-        { variant: 'info', className: 'bg-blue-500', textClassName: 'text-white' },
+        { variant: 'info', className: 'bg-info', textClassName: 'text-info-foreground' },
       ] as const
 
       variants.forEach(({ variant, className, textClassName }) => {
@@ -659,7 +663,7 @@ describe('Tooltip Components', () => {
 
         const tooltip = getTooltipContent()
         expect(tooltip).toBeInTheDocument()
-        expect(tooltip).toHaveClass('bg-green-500')
+        expect(tooltip).toHaveClass('bg-success')
         expect(tooltip).toHaveClass('text-base')
         expect(tooltip).toHaveClass('custom-tooltip')
         expect(tooltip).toHaveAttribute('data-side', 'bottom')

package/src/components/ui/alert.tsx

@@ -30,9 +30,11 @@ const alertVariants = cva(
             },
             size: {
                 sm: "py-2 text-xs",
-                default: "py-3 text-sm",
+                md: "py-3 text-sm",
                 lg: "py-4 text-base",
-            },
+                /** @deprecated `md` kullanın — #319 kanonik skala; aynı çıktıyı üretir. */
+                default: "py-3 text-sm",
+              },
             radius: {
                 none: "rounded-none",
                 sm: "rounded-sm",
@@ -46,7 +48,7 @@ const alertVariants = cva(
         },
         defaultVariants: {
             variant: "default",
-            size: "default",
+            size: "md",
             radius: "default",
             withClose: false,
         },