@moontra/moonui 6.15.0 → 6.17.0

package/package.json

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

package/src/components/ui/__tests__/primary-subtle-token.test.ts

@@ -0,0 +1,95 @@
+/**
+ * #354 — `--primary-subtle` token çifti ve kontrast değişmezi.
+ *
+ * BULGU: pro Sidebar'ın aktif öğesi `bg-primary/10 text-primary` kullanıyordu.
+ * Light temada bu bileşim **4.28:1** veriyor (WCAG AA metin için 4.5 ister) ve
+ * docs kabuğu bu Sidebar'ı kullandığı için ihlal HER sayfada basılıyordu.
+ * Dark tarafta `--primary` neredeyse beyaz olduğu için sorun yoktu (15.73:1).
+ *
+ * KÖK NEDEN: #313/#314/#323'te kurulan `--*-subtle` ailesi (yumuşak tint + koyu
+ * metin) `destructive/success/warning/info` için vardı ama **primary EKSİKTİ** —
+ * bu yüzden Sidebar ham `primary/10` kompozisyonuna düşmüştü.
+ *
+ * Bu test hem token'ların VARLIĞINI hem de KONTRAST oranlarını sabitler: değer
+ * değiştirilirse ve oran 4.5'in altına düşerse kırmızı olur.
+ */
+import * as fs from 'fs'
+import * as path from 'path'
+
+const KOK = path.resolve(__dirname, '../../..')
+const tokens = fs.readFileSync(path.join(KOK, 'styles/tokens.css'), 'utf8')
+const preset = fs.readFileSync(path.resolve(KOK, '../tailwind-preset.js'), 'utf8')
+
+/** "H S% L%" biçimindeki token değerini oku (light = :root, dark = .dark bloğu) */
+function tokenOku(ad: string, blok: 'light' | 'dark'): string | null {
+  const kaynak =
+    blok === 'dark'
+      ? tokens.slice(tokens.indexOf('.dark'))
+      : tokens.slice(0, tokens.indexOf('.dark'))
+  return kaynak.match(new RegExp(`--${ad}:\\s*([^;]+);`))?.[1].trim() ?? null
+}
+
+function hslToRgb(h: number, s: number, l: number): [number, number, number] {
+  h /= 360
+  s /= 100
+  l /= 100
+  const f = (n: number) => {
+    const k = (n + h * 12) % 12
+    const a = s * Math.min(l, 1 - l)
+    return l - a * Math.max(-1, Math.min(k - 3, Math.min(9 - k, 1)))
+  }
+  return [Math.round(255 * f(0)), Math.round(255 * f(8)), Math.round(255 * f(4))]
+}
+
+function bagilParlaklik([r, g, b]: [number, number, number]): number {
+  const c = (v: number) => {
+    const x = v / 255
+    return x <= 0.03928 ? x / 12.92 : Math.pow((x + 0.055) / 1.055, 2.4)
+  }
+  return 0.2126 * c(r) + 0.7152 * c(g) + 0.0722 * c(b)
+}
+
+function kontrast(a: string, b: string): number {
+  const ayrıştır = (v: string): [number, number, number] => {
+    const [h, s, l] = v.split(/\s+/).map((x) => parseFloat(x))
+    return hslToRgb(h, s, l)
+  }
+  const la = bagilParlaklik(ayrıştır(a))
+  const lb = bagilParlaklik(ayrıştır(b))
+  const [hi, lo] = la > lb ? [la, lb] : [lb, la]
+  return (hi + 0.05) / (lo + 0.05)
+}
+
+describe('#354 --primary-subtle token çifti', () => {
+  it('hesaplayıcı DOĞRU — bilinen bir çift beklenen oranı veriyor', () => {
+    // Sessiz-yeşil koruması: kontrast fonksiyonu bozulursa aşağıdaki testler
+    // anlamsız sayılarla yeşil geçebilir. `--info-subtle` çifti tokens.css'te
+    // 9.52:1 diye belgelenmiş; hesaplayıcı onu yeniden üretmeli.
+    const oran = kontrast(tokenOku('info-subtle', 'light')!, tokenOku('info-subtle-foreground', 'light')!)
+    expect(oran).toBeGreaterThan(9.3)
+    expect(oran).toBeLessThan(9.7)
+  })
+
+  it.each(['light', 'dark'] as const)('%s temada token çifti TANIMLI', (blok) => {
+    expect(tokenOku('primary-subtle', blok)).toBeTruthy()
+    expect(tokenOku('primary-subtle-foreground', blok)).toBeTruthy()
+  })
+
+  it.each(['light', 'dark'] as const)('%s temada kontrast WCAG AA (4.5:1) geçiyor', (blok) => {
+    const oran = kontrast(tokenOku('primary-subtle', blok)!, tokenOku('primary-subtle-foreground', blok)!)
+    expect(oran).toBeGreaterThanOrEqual(4.5)
+  })
+
+  it('light zemin, bugünkü `primary/10` görünümünü KORUYOR', () => {
+    // Zemin değişirse aktif öğenin görünümü değişir; bu bilinçli bir karar olmalı.
+    // #e7f0fe = beyaz üstüne %10 primary.
+    expect(tokenOku('primary-subtle', 'light')).toBe('217 92% 95%')
+  })
+
+  it('preset sınıfları ÜRETİYOR (token tanımlamak yetmez)', () => {
+    // Bu oturumda `theme.extend.borderColor`ın nested renkleri GÖLGELEDİĞİ ve
+    // sınıfın sessizce hiç CSS üretmediği görülmüştü (#313/#314/#323).
+    expect(preset).toContain('hsl(var(--primary-subtle) / <alpha-value>)')
+    expect(preset).toContain('hsl(var(--primary-subtle-foreground) / <alpha-value>)')
+  })
+})

package/src/components/ui/__tests__/select-trigger-name.test.tsx

@@ -0,0 +1,65 @@
+/**
+ * #340 — `SelectTrigger` erişilebilir ad taşır.
+ *
+ * BULGUNUN İNCELİĞİ: docs'ta hiçbir tetikleyici etiketsiz değildi — hepsinde
+ * `<SelectValue placeholder="Select a theme" />` vardı ve metin ekranda GÖRÜNÜYORDU.
+ * Yine de axe 10 `button-name` ihlali sayıyordu. Sebebi axe'ın açıklaması verdi:
+ *
+ *   "Element does not have inner text that is visible to screen readers"
+ *
+ * `SelectPrimitive.Trigger` `role="combobox"` render eder ve ARIA'da bu rol
+ * **"name from author"**dur — erişilebilir ad İÇERİKTEN GELMEZ. Yani görünür metin
+ * gözle okunur ama ekran okuyucuya hiç ad taşımaz.
+ *
+ * Sonuç: `aria-label` verilmeyen HER MoonUI Select adsızdı. Bu bir docs örneği
+ * kusuru değil, component yüzeyiydi.
+ */
+import * as React from 'react'
+import { render, screen } from '@testing-library/react'
+import '@testing-library/jest-dom'
+
+import { Select, SelectTrigger, SelectValue } from '../select'
+
+const kur = (props: React.ComponentProps<typeof SelectTrigger> = {}) =>
+  render(
+    <Select>
+      <SelectTrigger {...props}>
+        <SelectValue placeholder="Select a theme" />
+      </SelectTrigger>
+    </Select>
+  )
+
+describe('#340 SelectTrigger erişilebilir ad', () => {
+  it('ad verilmezse GÖRÜNÜR içerik ada bağlanır', () => {
+    kur()
+    // `role="combobox"` içerikten ad almadığı için component `aria-labelledby`
+    // ile açıkça bağlamak zorunda.
+    expect(screen.getByRole('combobox')).toHaveAccessibleName('Select a theme')
+  })
+
+  it('tüketicinin `aria-label`i KAZANIR', () => {
+    kur({ 'aria-label': 'Theme selector' })
+    expect(screen.getByRole('combobox')).toHaveAccessibleName('Theme selector')
+  })
+
+  it('tüketicinin `aria-labelledby`si KORUNUR (ezilmez)', () => {
+    render(
+      <>
+        <span id="dis-etiket">Appearance</span>
+        <Select>
+          <SelectTrigger aria-labelledby="dis-etiket">
+            <SelectValue placeholder="Select a theme" />
+          </SelectTrigger>
+        </Select>
+      </>
+    )
+    expect(screen.getByRole('combobox')).toHaveAccessibleName('Appearance')
+  })
+
+  it('rol gerçekten `combobox` — bu testin varsayımı ayakta', () => {
+    // Radix rolü değiştirirse (ör. `button`) ad-içerikten-gelir kuralı geçerli olur
+    // ve bu bekçinin gerekçesi düşer. O zaman bilinçli gözden geçirilmeli.
+    kur()
+    expect(screen.getByRole('combobox')).toBeInTheDocument()
+  })
+})

package/src/components/ui/select.tsx

@@ -100,7 +100,24 @@ export interface SelectTriggerProps extends React.ComponentPropsWithoutRef<typeo
 const SelectTrigger = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Trigger>,
   SelectTriggerProps
->(({ className, children, variant, size, error, success, loading, leftIcon, rightIcon, ...props }, ref) => (
+>(({ className, children, variant, size, error, success, loading, leftIcon, rightIcon, ...props }, ref) => {
+  /**
+   * #340: `SelectPrimitive.Trigger` `role="combobox"` render eder. ARIA'da bu rol
+   * **"name from author"**dur — yani erişilebilir ad İÇERİKTEN GELMEZ. Tetikleyicinin
+   * içindeki görünür metin ("Select a theme") gözle okunur ama ekran okuyucuya HİÇ
+   * ad taşımaz; axe bunu `button-name` (critical) sayar.
+   *
+   * Sonuç: `aria-label` verilmeyen HER MoonUI Select adsızdı — docs örneği değil,
+   * component yüzeyi. Bu yüzden tetikleyicinin görünür içeriğine bir id verilip
+   * `aria-labelledby` ile ona bağlanıyor: ad, kullanıcının GÖRDÜĞÜ metin olur.
+   *
+   * Tüketici kendi `aria-label`/`aria-labelledby`sini verdiyse ona dokunulmaz.
+   */
+  const icerikId = React.useId()
+  const adVerilmis =
+    props["aria-label"] != null || props["aria-labelledby"] != null
+
+  return (
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
@@ -119,8 +136,9 @@ const SelectTrigger = React.forwardRef<
     data-error={error ? true : undefined}
     data-success={success ? true : undefined}
     data-loading={loading ? true : undefined}
+    aria-labelledby={adVerilmis ? props["aria-labelledby"] : icerikId}
   >
-    <div className="flex items-center flex-1 gap-2">
+    <div id={icerikId} className="flex items-center flex-1 gap-2">
       {leftIcon && (
         <span className="flex items-center justify-center text-muted-foreground">
           {leftIcon}
@@ -143,7 +161,8 @@ const SelectTrigger = React.forwardRef<
       </SelectPrimitive.Icon>
     )}
   </SelectPrimitive.Trigger>
-))
+  )
+})
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
 
 /**

package/src/styles/tokens.css

@@ -199,6 +199,17 @@
   --info-subtle: 214 100% 97%;
   --info-subtle-foreground: 224 64% 33%;             /* 9.52:1 */
 
+  /* #354: `primary` ailesi bu listede EKSİKTİ. Pro Sidebar'ın aktif öğesi
+     "primary metin + primary/10 zemin" deseni kullanıyordu; light temada bu
+     4.28:1 veriyor (gereken 4.5) — yani docs kabuğu her sayfada bir WCAG AA
+     ihlali basıyordu. Dark tarafta `--primary` neredeyse beyaz olduğu için
+     sorun yoktu (15.73:1, ölçüldü).
+
+     Zemin, bugünkü `primary/10` bileşiminin BİREBİR HSL karşılığı (beyaz üstüne
+     %10 primary = #e7f0fe) → görünüm DEĞİŞMEZ, yalnız metin koyulaşır. */
+  --primary-subtle: 217 92% 95%;
+  --primary-subtle-foreground: 217.2 91.2% 40%;      /* 6.21:1 */
+
   --primary-50: 240 249 255;
 
   /* Tailwind preset'i rounded-lg/md/sm'yi var(--radius)'a bagliyor.
@@ -474,6 +485,12 @@
   --warning-subtle-foreground: 34 100% 92%;          /* 14.43:1 */
   --info-subtle: 217 80% 13%;
   --info-subtle-foreground: 214 95% 93%;             /* 14.11:1 */
+
+  /* #354: koyu temada mevcut görünüm KORUNUYOR — bugünkü bileşimin birebir
+     karşılığı (near-white/10 near-black üstüne). Dark zaten geçiyordu; buradaki
+     amaç token ailesini tamamlamak, dark'ın rengini değiştirmek değil. */
+  --primary-subtle: 225 18% 13%;
+  --primary-subtle-foreground: 210 40% 98%;          /* 15.73:1 */
   --border: 216 34% 17%;
   /* #284: koyu temada form kontrolü kenarlığı 1.36 idi -> 40% ile ~3.1.
      Not: --input switch.tsx:27'de kapalı track ZEMİNİ olarak da kullanılıyor;

package/tailwind-preset.js

@@ -76,6 +76,13 @@ module.exports = {
         primary: {
           DEFAULT: "hsl(var(--primary) / <alpha-value>)",
           foreground: "hsl(var(--primary-foreground) / <alpha-value>)",
+          // #354: `primary` yumuşak-ton yüzeyi — `bg-primary-subtle` +
+          // `text-primary-subtle-foreground`. Aile destructive/success/warning/
+          // info için vardı, primary EKSİKTİ ve pro Sidebar'ın aktif öğesi bu
+          // yüzden ham `primary/10` kompozisyonuna düşüp light temada 4.28:1
+          // veriyordu.
+          subtle: "hsl(var(--primary-subtle) / <alpha-value>)",
+          "subtle-foreground": "hsl(var(--primary-subtle-foreground) / <alpha-value>)",
         },
         secondary: {
           DEFAULT: "hsl(var(--secondary) / <alpha-value>)",