@moontra/moonui 6.14.0 → 6.15.0

package/package.json

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

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

@@ -287,14 +287,34 @@ describe('Alert Components', () => {
   })
 
   describe('AlertTitle Component', () => {
-    it('renders correctly with default props', () => {
+    /**
+     * #345: bu assertion eskiden `H5` bekliyordu — yani KUSURU KORUYORDU.
+     *
+     * Bir component'in belge başlık SEVİYESİNİ dayatması yanlıştır: doğru seviye
+     * component'in sayfada nereye konduğuna bağlıdır. Sabit `h5`, docs alert
+     * sayfasında H1 → H2 → H5 sıçraması üretiyordu (10 `heading-order` ihlali) ve
+     * tüketicinin bunu düzeltmesi imkânsızdı.
+     *
+     * Varsayılan artık `div`: bir uyarının başlığı belge ana hattına ait değildir,
+     * `Alert` zaten `role="alert"` ile duyurulur. Görsel çıktı DEĞİŞMEDİ (aşağıdaki
+     * "has correct default styling" testi bunu doğruluyor).
+     */
+    it('varsayılanda başlık DEĞİL, düz kap render eder', () => {
       render(<AlertTitle data-testid="alert-title">Alert Title</AlertTitle>)
       const title = screen.getByTestId('alert-title')
       expect(title).toBeInTheDocument()
-      expect(title.tagName).toBe('H5')
+      expect(title.tagName).toBe('DIV')
       expect(title).toHaveTextContent('Alert Title')
     })
 
+    it('`as` ile sayfaya uyan başlık seviyesi seçilebilir', () => {
+      render(<AlertTitle as="h3" data-testid="alert-title">Alert Title</AlertTitle>)
+      const title = screen.getByTestId('alert-title')
+      expect(title.tagName).toBe('H3')
+      // Görsel sınıflar `as`ten bağımsız korunur.
+      expect(title).toHaveClass('font-semibold', 'mb-1')
+    })
+
     it('applies custom className', () => {
       render(<AlertTitle className="custom-title" data-testid="alert-title">Title</AlertTitle>)
       const title = screen.getByTestId('alert-title')
@@ -311,8 +331,15 @@ describe('Alert Components', () => {
     })
 
     it('forwards ref correctly', () => {
-      const ref = React.createRef<HTMLParagraphElement>()
+      const ref = React.createRef<HTMLElement>()
       render(<AlertTitle ref={ref} data-testid="alert-title">Title</AlertTitle>)
+      // Varsayılan artık `div` → HTMLHeadingElement DEĞİL.
+      expect(ref.current).toBeInstanceOf(HTMLDivElement)
+    })
+
+    it('`as` verildiğinde ref O elemente işaret eder', () => {
+      const ref = React.createRef<HTMLElement>()
+      render(<AlertTitle as="h3" ref={ref} data-testid="alert-title">Title</AlertTitle>)
       expect(ref.current).toBeInstanceOf(HTMLHeadingElement)
     })
 

package/src/components/ui/__tests__/heading-level-policy.test.tsx

@@ -0,0 +1,71 @@
+/**
+ * #345 — başlık SEVİYESİ component'in değil, TÜKETİCİNİN kararıdır.
+ *
+ * Doğru seviye, component'in sayfada nereye konduğuna bağlıdır; bunu yalnız
+ * tüketici bilir. Sabit seviye, tüketicinin düzeltemeyeceği `heading-order`
+ * sıçramaları üretir — docs alert sayfasında tam olarak bu oldu (10 ihlal).
+ *
+ * İki component'te İKİ FARKLI karar verildi, çünkü durumları farklı:
+ *
+ * - `AlertTitle` → varsayılan `div`e ÇEKİLDİ. Bir uyarının başlığı belge ana
+ *   hattına ait değildir; `Alert` zaten `role="alert"` ile duyurulur ve başlık
+ *   o duyurunun parçası olarak okunur.
+ * - `CardTitle` → varsayılan `h3` KORUNDU. Bir kart çoğu zaman gerçekten bir
+ *   bölümdür ve `CardTitle` kütüphanenin her yerinde kullanılıyor; varsayılanı
+ *   çevirmek geniş bir kırılma yüzeyi olurdu. `as` yalnız kapıyı açar.
+ *
+ * Ortak değişmez: `as` ne olursa olsun GÖRSEL ÇIKTI AYNIDIR.
+ */
+import * as React from 'react'
+import { render, screen } from '@testing-library/react'
+import '@testing-library/jest-dom'
+
+import { AlertTitle } from '../alert'
+import { CardTitle } from '../card'
+
+describe('#345 AlertTitle — varsayılan başlık DEĞİL', () => {
+  it('varsayılan `div`', () => {
+    render(<AlertTitle data-testid="t">Başlık</AlertTitle>)
+    expect(screen.getByTestId('t').tagName).toBe('DIV')
+  })
+
+  it('`as` ile başlık seviyesine yükseltilebilir', () => {
+    render(<AlertTitle as="h2" data-testid="t">Başlık</AlertTitle>)
+    expect(screen.getByTestId('t').tagName).toBe('H2')
+  })
+
+  it('görsel sınıflar `as`ten BAĞIMSIZ', () => {
+    const { unmount } = render(<AlertTitle data-testid="t">B</AlertTitle>)
+    const varsayilan = screen.getByTestId('t').className
+    unmount()
+    render(<AlertTitle as="h2" data-testid="t">B</AlertTitle>)
+    expect(screen.getByTestId('t').className).toBe(varsayilan)
+  })
+})
+
+describe('#345 CardTitle — varsayılan KORUNDU', () => {
+  it('varsayılan hâlâ `h3` (kırıcı değişiklik YOK)', () => {
+    // Bu assertion bilinçli: CardTitle'ın varsayılanını çevirmek geniş bir
+    // kırılma yüzeyi olurdu. Değişirse bu bilinçli bir karar olmalı.
+    render(<CardTitle data-testid="t">Başlık</CardTitle>)
+    expect(screen.getByTestId('t').tagName).toBe('H3')
+  })
+
+  it('`as` ile sayfaya uyan seviye seçilebilir', () => {
+    render(<CardTitle as="h2" data-testid="t">Başlık</CardTitle>)
+    expect(screen.getByTestId('t').tagName).toBe('H2')
+  })
+
+  it('salt-görsel başlık için `as="div"`', () => {
+    render(<CardTitle as="div" data-testid="t">Başlık</CardTitle>)
+    expect(screen.getByTestId('t').tagName).toBe('DIV')
+  })
+
+  it('görsel sınıflar `as`ten BAĞIMSIZ', () => {
+    const { unmount } = render(<CardTitle data-testid="t">B</CardTitle>)
+    const varsayilan = screen.getByTestId('t').className
+    unmount()
+    render(<CardTitle as="div" data-testid="t">B</CardTitle>)
+    expect(screen.getByTestId('t').className).toBe(varsayilan)
+  })
+})

package/src/components/ui/alert.tsx

@@ -130,20 +130,40 @@ const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
 );
 Alert.displayName = "Alert";
 
-const AlertTitle = React.forwardRef<
-    HTMLParagraphElement,
-    React.HTMLAttributes<HTMLHeadingElement>
->(({ className, ...props }, ref) => (
-    <h5
-        ref={ref}
-        className={cn(
-            "moonui-theme",
-            "font-semibold leading-tight tracking-tight mb-1",
-            className
-        )}
-        {...props}
-    />
-));
+export interface AlertTitleProps
+    extends React.HTMLAttributes<HTMLHeadingElement> {
+    /**
+     * Render edilecek element. Varsayılan `"div"`.
+     *
+     * #345: Eskiden sabit `<h5>` idi. Bir component'in belge başlık SEVİYESİNİ
+     * dayatması yanlıştır — doğru seviye, component'in sayfada nereye konduğuna
+     * bağlıdır ve bunu yalnız tüketici bilir. Sabit `h5`, docs alert sayfasında
+     * H1 → H2 → H5 sıçraması üretiyordu (10 `heading-order` ihlali) ve tüketici
+     * bunu düzeltemiyordu.
+     *
+     * Varsayılanın `div` olması ayrıca semantik olarak daha doğru: bir uyarının
+     * başlığı belge ANA HATTINA ait değildir; `Alert` zaten `role="alert"` ile
+     * duyurulur ve başlık o duyurunun parçası olarak okunur.
+     *
+     * Başlık semantiği gerçekten isteniyorsa sayfaya uyan seviye verilir:
+     * `<AlertTitle as="h3">`. Görsel çıktı her iki durumda da AYNIDIR.
+     */
+    as?: React.ElementType;
+}
+
+const AlertTitle = React.forwardRef<HTMLHeadingElement, AlertTitleProps>(
+    ({ className, as: Comp = "div", ...props }, ref) => (
+        <Comp
+            ref={ref}
+            className={cn(
+                "moonui-theme",
+                "font-semibold leading-tight tracking-tight mb-1",
+                className
+            )}
+            {...props}
+        />
+    )
+);
 AlertTitle.displayName = "AlertTitle";
 
 const AlertDescription = React.forwardRef<

package/src/components/ui/card.tsx

@@ -158,16 +158,32 @@ const CardHeader = React.forwardRef<
 });
 CardHeader.displayName = "CardHeader";
 
-const CardTitle = React.forwardRef<
-  HTMLHeadingElement,
-  React.HTMLAttributes<HTMLHeadingElement>
->(({ className, ...props }, ref) => (
-  <h3
-    ref={ref}
-    className={cn("moonui-theme", "text-lg font-semibold leading-none tracking-tight", className)}
-    {...props}
-  />
-));
+export interface CardTitleProps
+  extends React.HTMLAttributes<HTMLHeadingElement> {
+  /**
+   * Render edilecek element. Varsayılan `"h3"` — DEĞİŞMEDİ.
+   *
+   * #345: `AlertTitle`ın aksine burada varsayılan bilerek korundu. Bir kart
+   * çoğu zaman gerçekten bir bölümdür ve başlığının belge ana hattında olması
+   * doğrudur; ayrıca `CardTitle` kütüphanenin her yerinde kullanılıyor.
+   *
+   * Ama seviye SABİT olduğu için, kart bir H1'in hemen altına konduğunda
+   * `heading-order` sıçraması oluşabiliyor ve tüketici bunu düzeltemiyordu.
+   * `as` o kapıyı açar: `<CardTitle as="h2">` ya da salt-görsel bir başlık için
+   * `<CardTitle as="div">`. Görsel çıktı her durumda aynıdır.
+   */
+  as?: React.ElementType;
+}
+
+const CardTitle = React.forwardRef<HTMLHeadingElement, CardTitleProps>(
+  ({ className, as: Comp = "h3", ...props }, ref) => (
+    <Comp
+      ref={ref}
+      className={cn("moonui-theme", "text-lg font-semibold leading-none tracking-tight", className)}
+      {...props}
+    />
+  )
+);
 CardTitle.displayName = "CardTitle";
 
 const CardDescription = React.forwardRef<

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

@@ -200,6 +200,13 @@ export const DatePicker = React.forwardRef<HTMLDivElement, DatePickerProps>(func
 
   return (
     <div ref={ref} className="moonui-theme">
+      {/* #345: temizle kontrolü tetikleyici <button>ın İÇİNDEydi ve kendisi de
+          role="button" + tabIndex taşıyordu — hem `nested-interactive` (ARIA'da bir
+          button başka etkileşimli öğe içeremez) hem de geçersiz HTML (interactive
+          content model). #332'de tabs-pro kapat butonunda uygulanan desenle KARDEŞ
+          konuma alındı ve gerçek <button> oldu: rol taklidi, elle yazılmış Enter/Space
+          işleyicisi ve tabIndex artık gereksiz — tarayıcı hepsini kendisi verir. */}
+      <div className="relative">
       <Popover open={open} onOpenChange={setOpen}>
       <PopoverTrigger asChild>
         <Button
@@ -207,6 +214,9 @@ export const DatePicker = React.forwardRef<HTMLDivElement, DatePickerProps>(func
           className={cn(
             datePickerVariants({ variant, size, state }),
             !displayValue && "text-muted-foreground",
+            // #345: temizle butonu artık MUTLAK konumlu bir kardeş — uzun tarih
+            // metninin altına girmemesi için sağda yer ayrılıyor.
+            allowClear && displayValue && !readOnly && !disabled && "pr-9",
             className
           )}
           disabled={disabled || readOnly}
@@ -228,41 +238,6 @@ export const DatePicker = React.forwardRef<HTMLDivElement, DatePickerProps>(func
               {iconPosition === "right" && iconElement}
             </motion.div>
           </AnimatePresence>
-          {allowClear && displayValue && !readOnly && !disabled && (
-            <motion.div
-              initial={{ opacity: 0, scale: 0.8 }}
-              animate={{ opacity: 1, scale: 1 }}
-              exit={{ opacity: 0, scale: 0.8 }}
-              whileHover={{ scale: 1.1 }}
-              whileTap={{ scale: 0.9 }}
-              className="ml-2 h-4 w-4 shrink-0 opacity-50 hover:opacity-100 transition-opacity cursor-pointer"
-              onClick={handleClear}
-              role="button"
-              tabIndex={0}
-              onKeyDown={(e) => {
-                if (e.key === 'Enter' || e.key === ' ') {
-                  e.preventDefault();
-                  handleClear(e);
-                }
-              }}
-            >
-              <span className="sr-only">Clear date</span>
-              <svg
-                width="15"
-                height="15"
-                viewBox="0 0 15 15"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z"
-                  fill="currentColor"
-                  fillRule="evenodd"
-                  clipRule="evenodd"
-                />
-              </svg>
-            </motion.div>
-          )}
         </Button>
       </PopoverTrigger>
       <PopoverContent 
@@ -297,7 +272,32 @@ export const DatePicker = React.forwardRef<HTMLDivElement, DatePickerProps>(func
           )}
         </motion.div>
       </PopoverContent>
-    </Popover>
+      </Popover>
+      {allowClear && displayValue && !readOnly && !disabled && (
+        <button
+          type="button"
+          onClick={handleClear}
+          aria-label="Clear date"
+          className="absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 shrink-0 opacity-50 hover:opacity-100 transition-opacity"
+        >
+          <svg
+            width="15"
+            height="15"
+            viewBox="0 0 15 15"
+            fill="none"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z"
+              fill="currentColor"
+              fillRule="evenodd"
+              clipRule="evenodd"
+            />
+          </svg>
+        </button>
+      )}
+      </div>
     </div>
   );
 });