@moontra/moonui 6.8.0 → 6.10.0

package/src/components/ui/__tests__/quality-group-de.test.tsx

@@ -0,0 +1,159 @@
+/**
+ * Grup D+E — #320 skeleton, #308 bundle (free tarafı).
+ *
+ * Her test, düzeltme geri alındığında kırmızıya dönecek biçimde yazıldı; canary ile
+ * doğrulandı (bkz. changelog).
+ */
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import '@testing-library/jest-dom'
+
+import { Skeleton, SkeletonText } from '../skeleton'
+import { ScrollArea } from '../scroll-area'
+import {
+  Command,
+  CommandInput,
+  CommandList,
+  CommandGroup,
+  CommandItem,
+  CommandSeparator,
+} from '../command'
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+} from '../carousel'
+
+// cmdk seçili öğeyi görünür alana kaydırır; jsdom `scrollIntoView` implement etmez.
+// Ortam eksiği — test edilen davranışla ilgisi yok.
+beforeAll(() => {
+  if (!Element.prototype.scrollIntoView) {
+    Element.prototype.scrollIntoView = function scrollIntoView() {}
+  }
+})
+
+describe('#320 skeleton — a11y konvansiyonu', () => {
+  it('yer tutucu erişilebilirlik ağacından çıkarılır', () => {
+    const { container } = render(<Skeleton data-testid="sk" />)
+    expect(container.querySelector('[data-testid="sk"]')).toHaveAttribute('aria-hidden', 'true')
+  })
+
+  it('N skeleton, N canlı bölge ÜRETMEZ (role="status" seçilmemesinin gerekçesi)', () => {
+    const { container } = render(<SkeletonText lines={5} />)
+    // Tek yükleme durumu onlarca skeleton basar; her biri canlı bölge olsaydı ekran
+    // okuyucu aynı olayı N kez duyururdu. Duyurunun sahibi spinner'dır.
+    expect(container.querySelectorAll('[role="status"]')).toHaveLength(0)
+    expect(container.querySelectorAll('[aria-live]')).toHaveLength(0)
+  })
+
+  it('isLoaded && children dalı GERÇEK içerik → gizlenmez', () => {
+    render(
+      <Skeleton isLoaded data-testid="loaded">
+        <span>gerçek içerik</span>
+      </Skeleton>
+    )
+    const el = screen.getByTestId('loaded')
+    expect(el).not.toHaveAttribute('aria-hidden')
+    expect(screen.getByText('gerçek içerik')).toBeInTheDocument()
+  })
+})
+
+describe('#308-1 scroll-area — klavye erişimi', () => {
+  it('viewport varsayılan olarak odaklanabilir (WCAG 2.1.1)', () => {
+    const { container } = render(
+      <ScrollArea className="h-20">
+        <p>odaklanabilir eleman içermeyen içerik</p>
+      </ScrollArea>
+    )
+    const viewport = container.querySelector('[data-radix-scroll-area-viewport]')
+    expect(viewport).not.toBeNull()
+    expect(viewport).toHaveAttribute('tabindex', '0')
+  })
+
+  it('focusable={false} ile sekme durağı kaldırılabilir', () => {
+    const { container } = render(
+      <ScrollArea focusable={false} className="h-20">
+        <p>içerik</p>
+      </ScrollArea>
+    )
+    expect(container.querySelector('[data-radix-scroll-area-viewport]'))
+      .not.toHaveAttribute('tabindex')
+  })
+})
+
+describe('#308-2 carousel — slayt duyurusu', () => {
+  it('aria-live durum bölgesi var ve atomik', () => {
+    const { container } = render(
+      <Carousel>
+        <CarouselContent>
+          <CarouselItem>1</CarouselItem>
+          <CarouselItem>2</CarouselItem>
+        </CarouselContent>
+      </Carousel>
+    )
+    const live = container.querySelector('[aria-live="polite"]')
+    expect(live).not.toBeNull()
+    expect(live).toHaveAttribute('aria-atomic', 'true')
+    expect(live).toHaveClass('sr-only')
+  })
+
+  /**
+   * Duyuru METNİNİN biçimi (`"Slide 2 of 5"`) burada DOĞRULANMIYOR — kasıtlı.
+   * jsdom'da her eleman sıfır boyutlu olduğu için embla'nın `scrollSnapList()` sonucu
+   * güvenilmez: tek item'lı carousel'de 1 snap, üç item'lıda 0 snap raporlandı. Bu sayıya
+   * dayanan bir assert, ürünü değil jsdom'un düzen eksikliğini sabitlerdi.
+   * Biçim ve slayt değişiminde güncellenme GERÇEK TARAYICIDA doğrulandı (bkz. changelog).
+   */
+  it('slayt sayısı BİLİNMİYORKEN boş duyuru basmaz', () => {
+    // Embla init olmadan (`total === 0`) metin boş kalmalı — aksi hâlde ekran okuyucuya
+    // "Slide 0 of 0" gider. Slayt İÇERMEYEN carousel bu durumu doğrudan üretir.
+    const { container } = render(
+      <Carousel>
+        <CarouselContent />
+      </Carousel>
+    )
+    expect(container.querySelector('[aria-live="polite"]')!.textContent).toBe('')
+  })
+})
+
+describe('#308-5/6 command', () => {
+  it('separator erişilebilirlik ağacından çıkarılır (listbox çocuk kuralı)', () => {
+    const { container } = render(
+      <Command>
+        <CommandInput placeholder="ara" />
+        <CommandList>
+          <CommandGroup heading="A">
+            <CommandItem value="bir">Bir</CommandItem>
+          </CommandGroup>
+          <CommandSeparator data-testid="sep" alwaysRender />
+          <CommandGroup heading="B">
+            <CommandItem value="iki">İki</CommandItem>
+          </CommandGroup>
+        </CommandList>
+      </Command>
+    )
+
+    const sep = container.querySelector('[data-testid="sep"]')
+    expect(sep).not.toBeNull()
+    // cmdk `role="separator"` basar ve prop'lardan SONRA yazdığı için ezilemez;
+    // `aria-hidden` ile ağaçtan çıkarılır → listbox'ın sahiplendiği çocuk olmaktan çıkar.
+    expect(sep).toHaveAttribute('aria-hidden', 'true')
+  })
+
+  it('listbox\'ın gizlenmemiş çocuğu separator DEĞİL', () => {
+    const { container } = render(
+      <Command>
+        <CommandList>
+          <CommandGroup heading="A">
+            <CommandItem value="bir">Bir</CommandItem>
+          </CommandGroup>
+          <CommandSeparator alwaysRender />
+        </CommandList>
+      </Command>
+    )
+    const listbox = container.querySelector('[role="listbox"]')!
+    const gorunurCocuklar = Array.from(listbox.querySelectorAll('[role="separator"]'))
+      .filter((el) => el.getAttribute('aria-hidden') !== 'true')
+    expect(gorunurCocuklar).toHaveLength(0)
+  })
+})

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__/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/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,
         },

package/src/components/ui/avatar.tsx

@@ -11,13 +11,14 @@ const avatarVariants = cva(
   {
     variants: {
       size: {
-        default: "h-10 w-10",
         xs: "h-6 w-6",
         sm: "h-8 w-8",
         md: "h-10 w-10",
         lg: "h-12 w-12",
         xl: "h-16 w-16",
         "2xl": "h-20 w-20",
+        /** @deprecated `md` kullanın — #319 kanonik skala; aynı çıktıyı üretir. */
+        default: "h-10 w-10",
       },
       radius: {
         default: "rounded-full",
@@ -34,7 +35,7 @@ const avatarVariants = cva(
       }
     },
     defaultVariants: {
-      size: "default",
+      size: "md",
       radius: "default",
       variant: "default"
     },

package/src/components/ui/breadcrumb.tsx

@@ -17,14 +17,16 @@ const breadcrumbVariants = cva(
         ghost: "text-foreground/60 transition-colors",
       },
       size: {
-        default: "text-sm",
+        md: "text-sm",
         sm: "text-xs",
         lg: "text-base",
+        /** @deprecated `md` kullanın — #319 kanonik skala; aynı çıktıyı üretir. */
+        default: "text-sm",
       },
     },
     defaultVariants: {
       variant: "default",
-      size: "default",
+      size: "md",
     },
   }
 );

package/src/components/ui/card.tsx

@@ -35,10 +35,12 @@ const cardVariants = cva(
         glass: "border border-white/20 bg-white/10 backdrop-blur-md dark:border-gray-700/30 dark:bg-gray-800/10",
       },
       size: {
-        default: "",
+        md: "",
         sm: "",
         lg: "",
         xl: "",
+        /** @deprecated `md` kullanın — #319 kanonik skala; aynı çıktıyı üretir. */
+        default: "",
       },
       radius: {
         default: "rounded-lg",
@@ -54,7 +56,7 @@ const cardVariants = cva(
     },
     defaultVariants: {
       variant: "default",
-      size: "default",
+      size: "md",
       radius: "default",
     },
   }

package/src/components/ui/carousel.tsx

@@ -89,12 +89,25 @@ const Carousel = React.forwardRef<HTMLDivElement, CarouselProps>(
     );
     const [canScrollPrev, setCanScrollPrev] = React.useState(false);
     const [canScrollNext, setCanScrollNext] = React.useState(false);
+    /**
+     * #308-2: `aria-roledescription="carousel"/"slide"` doğru set edilmişti ama slayt
+     * DEĞİŞİMİNİ duyuran hiçbir şey yoktu — klavye/buton ile ilerleyen ekran-okuyucu
+     * kullanıcısı hangi slaytta olduğunu öğrenemiyordu. Embla'nın zaten dinlenen "select"
+     * olayına bağlı bir `aria-live="polite"` durum bölgesi eklendi.
+     */
+    const [slideState, setSlideState] = React.useState<{ current: number; total: number }>(
+      { current: 0, total: 0 }
+    );
 
     // Embla "select" olayında ileri/geri butonlarının durumunu güncelle
     const onSelect = React.useCallback((emblaApi: CarouselApi) => {
       if (!emblaApi) return;
       setCanScrollPrev(emblaApi.canScrollPrev());
       setCanScrollNext(emblaApi.canScrollNext());
+      setSlideState({
+        current: emblaApi.selectedScrollSnap() + 1,
+        total: emblaApi.scrollSnapList().length,
+      });
     }, []);
 
     const scrollPrev = React.useCallback(() => {
@@ -164,6 +177,17 @@ const Carousel = React.forwardRef<HTMLDivElement, CarouselProps>(
           {...props}
         >
           {children}
+          {/*
+            #308-2: Görsel olarak gizli durum bölgesi. `aria-live="polite"` sayesinde slayt
+            değişimi (buton, klavye ya da sürükleme fark etmeksizin) duyurulur; `aria-atomic`
+            metnin tamamının okunmasını sağlar. Slayt sayısı henüz bilinmiyorken (ilk render,
+            embla init olmadan) hiçbir şey basılmaz — boş duyuru üretmemek için.
+          */}
+          <div aria-live="polite" aria-atomic="true" className="sr-only">
+            {slideState.total > 0
+              ? `Slide ${slideState.current} of ${slideState.total}`
+              : ""}
+          </div>
         </div>
       </CarouselContext.Provider>
     );

package/src/components/ui/checkbox.tsx

@@ -26,9 +26,11 @@ const checkboxVariants = cva(
       },
       size: {
         sm: "h-3.5 w-3.5",
+        md: "h-4 w-4",
+        lg: "h-5 w-5",
+        xl: "h-6 w-6",
+        /** @deprecated `md` kullanın — #319 kanonik skala; aynı çıktıyı üretir. */
         default: "h-4 w-4",
-        md: "h-5 w-5",
-        lg: "h-6 w-6",
       },
       radius: {
         none: "rounded-none",
@@ -46,7 +48,7 @@ const checkboxVariants = cva(
     },
     defaultVariants: {
       variant: "default",
-      size: "default",
+      size: "md",
       radius: "default",
       animation: "default",
     },

package/src/components/ui/collapsible.tsx

@@ -27,14 +27,16 @@ const collapsibleTriggerVariants = cva(
       },
       size: {
         sm: "text-xs py-2 px-3",
+        md: "text-sm py-3 px-4",
+        lg: "text-base py-4 px-4",
+        xl: "text-lg py-5 px-5",
+        /** @deprecated `md` kullanın — #319 kanonik skala; aynı çıktıyı üretir. */
         default: "text-sm py-3 px-4",
-        md: "text-base py-4 px-4",
-        lg: "text-lg py-5 px-5",
       },
     },
     defaultVariants: {
       variant: "default",
-      size: "default",
+      size: "md",
     },
   }
 )
@@ -85,14 +87,16 @@ const collapsibleContentVariants = cva(
       },
       size: {
         sm: "text-xs",
+        md: "text-sm",
+        lg: "text-base",
+        xl: "text-lg",
+        /** @deprecated `md` kullanın — #319 kanonik skala; aynı çıktıyı üretir. */
         default: "text-sm",
-        md: "text-base",
-        lg: "text-lg",
       },
     },
     defaultVariants: {
       variant: "default",
-      size: "default",
+      size: "md",
     },
   }
 )

package/src/components/ui/color-picker.tsx

@@ -27,10 +27,12 @@ const colorPickerVariants = cva(
   {
     variants: {
       size: {
-        default: "h-10 w-10",
+        md: "h-10 w-10",
         sm: "h-8 w-8",
         lg: "h-12 w-12",
         xl: "h-16 w-16",
+        /** @deprecated `md` kullanın — #319 kanonik skala; aynı çıktıyı üretir. */
+        default: "h-10 w-10",
       },
       shape: {
         square: "rounded-md",
@@ -39,7 +41,7 @@ const colorPickerVariants = cva(
       },
     },
     defaultVariants: {
-      size: "default",
+      size: "md",
       shape: "square",
     },
   }
@@ -563,7 +565,8 @@ export interface SimpleColorPickerProps {
   onChange?: (color: string) => void;
   colors?: string[];
   className?: string;
-  size?: "sm" | "default" | "lg";
+  /** #319: kanonik skala; `default` `md`nin deprecated alias'ıdır. */
+  size?: "sm" | "md" | "lg" | "default";
 }
 
 export function SimpleColorPicker({
@@ -571,12 +574,15 @@ export function SimpleColorPicker({
   onChange,
   colors = defaultPresets.slice(0, 10),
   className,
-  size = "default",
+  // #319: varsayılan kanonik ada çekildi (aynı CSS: h-8 w-8)
+  size = "md",
 }: SimpleColorPickerProps) {
   const sizeClasses = {
     sm: "h-6 w-6",
-    default: "h-8 w-8",
+    md: "h-8 w-8",
     lg: "h-10 w-10",
+    /** @deprecated `md` kullanın — #319 kanonik skala; aynı çıktıyı üretir. */
+    default: "h-8 w-8",
   };
 
   return (