@moontra/moonui 6.7.0 → 6.9.0

package/src/components/ui/breadcrumb.tsx

@@ -1,6 +1,7 @@
 "use client"
 
 import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
 import { ChevronRight, MoreHorizontal } from "lucide-react";
 import { cva, type VariantProps } from "class-variance-authority";
 
@@ -31,10 +32,24 @@ const breadcrumbVariants = cva(
 interface BreadcrumbProps
   extends React.HTMLAttributes<HTMLElement>,
     VariantProps<typeof breadcrumbVariants> {
+  /**
+   * Alt `BreadcrumbSeparator`'ların varsayılan ayracı. #309: bu prop tipte tanımlıydı ama
+   * component gövdesinde HİÇ okunmuyordu → `{...props}` ile `<nav>`'a sızıyor, React
+   * bilinmeyen-öznitelik uyarısı basıyordu. Artık context ile alt ayraçlara iniyor;
+   * ayracın kendi `children`/`icon` prop'u bunu ezer.
+   */
   separator?: React.ReactNode;
+  /**
+   * @deprecated Hiçbir zaman uygulanmadı — kaynakta okunmuyordu ve `<nav>`'a sızıyordu
+   * (#309'da sızıntı kesildi, davranış eklenmedi). Ev ikonu için ilk `BreadcrumbItem`
+   * içine ikonu doğrudan koyun; işaretleme kararı tüketiciye ait olmalı.
+   */
   showHomeIcon?: boolean;
 }
 
+/** #309: kök `separator`'ı alt `BreadcrumbSeparator`'lara taşıyan tek kaynak. */
+const BreadcrumbSeparatorContext = React.createContext<React.ReactNode>(undefined);
+
 interface BreadcrumbListProps extends React.HTMLAttributes<HTMLOListElement> {
   collapsed?: boolean;
   collapsedWidth?: number;
@@ -57,13 +72,17 @@ interface BreadcrumbEllipsisProps extends React.HTMLAttributes<HTMLSpanElement>
 }
 
 const Breadcrumb = React.forwardRef<HTMLElement, BreadcrumbProps>(
-  ({ className, variant, size, ...props }, ref) => (
-    <nav
-      ref={ref}
-      className={cn("moonui-theme", breadcrumbVariants({ variant, size }), className)}
-      aria-label="breadcrumb"
-      {...props}
-    />
+  // #309: `separator` ve `showHomeIcon` ESKİDEN destructure EDİLMİYORDU → `{...props}` ile
+  // `<nav>`'a öznitelik olarak basılıyor, React uyarı veriyordu. İkisi de artık ayrılıyor.
+  ({ className, variant, size, separator, showHomeIcon: _showHomeIcon, ...props }, ref) => (
+    <BreadcrumbSeparatorContext.Provider value={separator}>
+      <nav
+        ref={ref}
+        className={cn("moonui-theme", breadcrumbVariants({ variant, size }), className)}
+        aria-label="breadcrumb"
+        {...props}
+      />
+    </BreadcrumbSeparatorContext.Provider>
   )
 );
 Breadcrumb.displayName = "Breadcrumb";
@@ -109,27 +128,34 @@ const BreadcrumbList = React.forwardRef<HTMLOListElement, BreadcrumbListProps>(
 BreadcrumbList.displayName = "BreadcrumbList";
 
 const BreadcrumbItem = React.forwardRef<HTMLLIElement, BreadcrumbItemProps>(
-  ({ className, isCurrent, href, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? React.Fragment : href ? "a" : "span";
-    const itemProps = asChild ? {} : href ? { href } : {};
+  ({ className, isCurrent, href, asChild = false, children, ...props }, ref) => {
+    // #309: `asChild` eskiden `React.Fragment`'e düşüyordu. Fragment yalnız `key` ve
+    // `children` kabul eder → aşağıdaki `className` sessizce KAYBOLUYOR ve React
+    // geliştirme modunda geçersiz-prop uyarısı basıyordu. Radix `Slot` prop'ları tek
+    // çocuğa birleştirir (className/style dahil) → hem stil hem a11y korunur.
+    const Comp = asChild ? Slot : href ? "a" : "span";
+    const itemProps = !asChild && href ? { href } : {};
 
     return (
       <li
         ref={ref}
         className={cn("moonui-theme", "inline-flex items-center gap-1.5", className)}
-        aria-current={isCurrent ? "page" : undefined}
         {...props}
       >
-        <Comp 
+        <Comp
+          // #309: `aria-current` eskiden yalnız sarmalayıcı <li>'deydi; APG breadcrumb
+          // deseni onu geçerli sayfayı temsil eden ELEMANDA ister. İkisinde birden
+          // bulunması çift duyuruya yol açacağı için <li>'den taşındı (kaldırılmadı).
+          aria-current={isCurrent ? "page" : undefined}
           className={cn(
             "transition-colors duration-200 hover:text-foreground",
-            isCurrent 
-              ? "font-medium text-foreground" 
+            isCurrent
+              ? "font-medium text-foreground"
               : "text-muted-foreground hover:text-foreground hover:underline hover:underline-offset-4 hover:decoration-muted-foreground/30"
           )}
           {...itemProps}
         >
-          {props.children}
+          {children}
         </Comp>
       </li>
     );
@@ -140,30 +166,51 @@ BreadcrumbItem.displayName = "BreadcrumbItem";
 const BreadcrumbSeparator = ({
   children,
   className,
+  icon,
   ...props
-}: BreadcrumbSeparatorProps) => (
-  <span
-    role="presentation"
-    aria-hidden="true"
-    className={cn("moonui-theme", "text-muted-foreground opacity-70", className)}
-    {...props}
-  >
-    {children || <ChevronRight className="h-3.5 w-3.5" />}
-  </span>
-);
+}: BreadcrumbSeparatorProps) => {
+  // #309: kök `<Breadcrumb separator={…}>` değeri; yerel `children`/`icon` bunu ezer.
+  const rootSeparator = React.useContext(BreadcrumbSeparatorContext);
+
+  return (
+    // Ayraç tümüyle dekoratiftir → `aria-hidden` burada DOĞRU (ellipsis'in aksine içinde
+    // ekran-okuyucuya ait metin yok).
+    <span
+      role="presentation"
+      aria-hidden="true"
+      className={cn("moonui-theme", "text-muted-foreground opacity-70", className)}
+      {...props}
+    >
+      {/* #309: `icon` prop'u tipte tanımlıydı ama HİÇ OKUNMUYORDU → `{...props}` ile
+          DOM'a sızıyor, React bilinmeyen-öznitelik uyarısı basıyordu. Artık `children`
+          verilmediğinde ayraç ikonu olarak kullanılıyor. */}
+      {children || icon || rootSeparator || <ChevronRight className="h-3.5 w-3.5" />}
+    </span>
+  );
+};
 BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
 
 const BreadcrumbEllipsis = ({
   className,
+  icon,
   ...props
 }: BreadcrumbEllipsisProps) => (
+  // #309: `aria-hidden="true"` ESKİDEN BU ELEMANDAYDI → alt ağacın tamamı, içindeki
+  // `sr-only` "More pages" metni DAHİL, erişilebilirlik ağacından düşüyordu; yani metin
+  // hiçbir zaman duyurulmuyordu (eleman kendi amacını geçersiz kılıyordu). Gizleme artık
+  // yalnız dekoratif ikonda.
+  //
+  // `role="presentation"` KASITLI olarak korundu: span'in zaten örtük rolü yok, dolayısıyla
+  // zararsız ve alt ağacı GİZLEMEZ (aria-hidden'ın aksine) — kusur yalnız aria-hidden'dı.
   <span
     role="presentation"
-    aria-hidden="true"
     className={cn("moonui-theme", "flex items-center text-muted-foreground hover:text-foreground/80 transition-colors duration-200", className)}
     {...props}
   >
-    <MoreHorizontal className="h-4 w-4" />
+    <span aria-hidden="true" className="flex items-center">
+      {/* #309: `icon` prop'u — ayraçtaki ile aynı ölü-prop kusuru. */}
+      {icon || <MoreHorizontal className="h-4 w-4" />}
+    </span>
     <span className="sr-only">More pages</span>
   </span>
 );
@@ -206,4 +253,15 @@ export {
   BreadcrumbPage,
   BreadcrumbSeparator,
   BreadcrumbEllipsis,
+  breadcrumbVariants,
+};
+
+// #309: Props interface'lerinin hiçbiri export edilmiyordu → tüketici sarmalayıcı
+// yazarken tipi yeniden türetmek zorunda kalıyordu.
+export type {
+  BreadcrumbProps,
+  BreadcrumbListProps,
+  BreadcrumbItemProps,
+  BreadcrumbSeparatorProps,
+  BreadcrumbEllipsisProps,
 };

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/command.tsx

@@ -167,6 +167,18 @@ const CommandSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <CommandPrimitive.Separator
     ref={ref}
+    /**
+     * #308-6: cmdk, Separator'a `role="separator"` basıyor ve bu eleman
+     * `CommandList`'in (`role="listbox"`) çocuğu oluyor → listbox'ın izinli çocuğu
+     * yalnız `option`/`group` olduğu için axe `aria-required-children` (critical) veriyordu.
+     *
+     * `role` EZİLEMİYOR: cmdk 1.1.1 `{...props, "cmdk-separator":"", role:"separator"}`
+     * sırasıyla yazıyor, yani kendi rolü prop'lardan SONRA geliyor (kaynak doğrulandı).
+     * `aria-hidden` ise prop yayılımının içinde olduğu için geçiyor — ve ayraç zaten
+     * tümüyle dekoratif olduğundan erişilebilirlik ağacından çıkarılması DOĞRU davranış.
+     * Böylece listbox'ın sahiplendiği çocuklar arasında görünmez.
+     */
+    aria-hidden="true"
     className={cn("moonui-theme", "-mx-1 h-px bg-border", className)}
     {...props}
   />
@@ -219,4 +231,17 @@ export {
   CommandItem,
   CommandShortcut,
   CommandSeparator,
+}
+
+// #308-5: Sekiz Props interface'inin HİÇBİRİ export edilmiyordu → tüketici sarmalayıcı
+// yazarken tipi yeniden türetmek zorundaydı.
+export type {
+  CommandProps,
+  CommandDialogProps,
+  CommandInputProps,
+  CommandListProps,
+  CommandEmptyProps,
+  CommandGroupProps,
+  CommandSeparatorProps,
+  CommandItemProps,
 }

package/src/components/ui/pagination.tsx

@@ -5,13 +5,16 @@ import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react"
 import { cn } from "../../lib/utils"
 import { ButtonProps, buttonVariants } from "./button"
 
-const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
-  <nav
-    role="navigation"
-    aria-label="pagination"
-    className={cn("moonui-theme", "mx-auto flex w-full justify-center", className)}
-    {...props}
-  />
+const Pagination = React.forwardRef<HTMLElement, React.ComponentProps<"nav">>(
+  ({ className, ...props }, ref) => (
+    <nav
+      ref={ref}
+      role="navigation"
+      aria-label="pagination"
+      className={cn("moonui-theme", "mx-auto flex w-full justify-center", className)}
+      {...props}
+    />
+  )
 )
 Pagination.displayName = "Pagination"
 
@@ -40,71 +43,85 @@ type PaginationLinkProps = {
 } & Partial<Pick<ButtonProps, "size">> &
   React.ComponentProps<"a">
 
-const PaginationLink = ({
-  className,
-  isActive,
-  size = "icon",
-  ...props
-}: PaginationLinkProps) => (
-  <a
-    aria-current={isActive ? "page" : undefined}
-    className={cn(
-      buttonVariants({
-        variant: isActive ? "outline" : "ghost",
-        size,
-      }),
-      className
-    )}
-    {...props}
-  />
+const PaginationLink = React.forwardRef<HTMLAnchorElement, PaginationLinkProps>(
+  ({ className, isActive, size = "icon", ...props }, ref) => (
+    <a
+      ref={ref}
+      aria-current={isActive ? "page" : undefined}
+      className={cn(
+        buttonVariants({
+          variant: isActive ? "outline" : "ghost",
+          size,
+        }),
+        className
+      )}
+      {...props}
+    />
+  )
 )
 PaginationLink.displayName = "PaginationLink"
 
-const PaginationPrevious = ({
-  className,
-  ...props
-}: React.ComponentProps<typeof PaginationLink>) => (
+/**
+ * #315: "Previous"/"Next" etiketleri KOŞULSUZ render ediliyordu ve component'te hiçbir
+ * responsive affordance yoktu. 375px'te ölçüm: nav clientWidth=229 / scrollWidth=317
+ * (88px iç taşma) → ata zincirindeki `overflow-hidden` etiketi kırpıyor, kullanıcı
+ * "Previous" yerine "vious" görüyordu. Etiket artık `sm` altında gizleniyor; erişilebilir
+ * ad `aria-label` ile korunduğu için ekran-okuyucu deneyimi DEĞİŞMİYOR.
+ */
+const paginationLabelClass = "hidden sm:inline"
+
+const PaginationPrevious = React.forwardRef<
+  HTMLAnchorElement,
+  React.ComponentProps<typeof PaginationLink>
+>(({ className, ...props }, ref) => (
   <PaginationLink
+    ref={ref}
     aria-label="Go to previous page"
     size="md"
     className={cn("moonui-theme", "gap-1 pl-2.5", className)}
     {...props}
   >
     <ChevronLeft className="h-4 w-4" />
-    <span>Previous</span>
+    <span className={paginationLabelClass}>Previous</span>
   </PaginationLink>
-)
+))
 PaginationPrevious.displayName = "PaginationPrevious"
 
-const PaginationNext = ({
-  className,
-  ...props
-}: React.ComponentProps<typeof PaginationLink>) => (
+const PaginationNext = React.forwardRef<
+  HTMLAnchorElement,
+  React.ComponentProps<typeof PaginationLink>
+>(({ className, ...props }, ref) => (
   <PaginationLink
+    ref={ref}
     aria-label="Go to next page"
     size="md"
     className={cn("moonui-theme", "gap-1 pr-2.5", className)}
     {...props}
   >
-    <span>Next</span>
+    <span className={paginationLabelClass}>Next</span>
     <ChevronRight className="h-4 w-4" />
   </PaginationLink>
-)
+))
 PaginationNext.displayName = "PaginationNext"
 
-const PaginationEllipsis = ({
-  className,
-  ...props
-}: React.ComponentProps<"span">) => (
+const PaginationEllipsis = React.forwardRef<
+  HTMLSpanElement,
+  React.ComponentProps<"span">
+>(({ className, ...props }, ref) => (
+  // #315: `aria-hidden` ESKİDEN BU ELEMANDAYDI → içindeki `sr-only` "More pages" metni
+  // erişilebilirlik ağacından düşüyor, hiç duyurulmuyordu. Gizleme artık yalnız dekoratif
+  // ikonda. (breadcrumb.tsx'te birebir aynı çakışma vardı — aynı PR'da düzeltildi.)
   <span
-    aria-hidden
+    ref={ref}
     className={cn("moonui-theme", "flex h-9 w-9 items-center justify-center", className)}
     {...props}
   >
-    <MoreHorizontal className="h-4 w-4" />
+    <span aria-hidden="true" className="flex items-center">
+      <MoreHorizontal className="h-4 w-4" />
+    </span>
     <span className="sr-only">More pages</span>
   </span>
-)
+))
 PaginationEllipsis.displayName = "PaginationEllipsis"
 
 export {
@@ -115,4 +132,7 @@ export {
   PaginationLink,
   PaginationNext,
   PaginationPrevious,
-}
+}
+
+// #315: Props tiplerinin hiçbiri export edilmiyordu.
+export type { PaginationLinkProps }

package/src/components/ui/scroll-area.tsx

@@ -5,16 +5,36 @@ import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
 
 import { cn } from "../../lib/utils"
 
+export interface ScrollAreaProps
+  extends React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> {
+  /**
+   * #308-1: Kaydırma alanının klavyeyle odaklanabilir olup olmayacağı. Varsayılan `true`
+   * — odaklanabilir içeriği olmayan bir kaydırma alanı aksi hâlde klavyeyle erişilemez
+   * (WCAG 2.1.1). Fazladan sekme durağı istenmeyen durumlarda `false`.
+   */
+  focusable?: boolean
+}
+
 const ScrollArea = React.forwardRef<
   React.ElementRef<typeof ScrollAreaPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
->(({ className, children, ...props }, ref) => (
+  ScrollAreaProps
+>(({ className, children, focusable = true, ...props }, ref) => (
   <ScrollAreaPrimitive.Root
     ref={ref}
     className={cn("relative overflow-hidden", className)}
     {...props}
   >
-    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+    {/*
+      #308-1: Viewport'a `tabIndex` VERİLMİYORDU ve bu davranış Radix'ten kalıtsal DEĞİL
+      (`@radix-ui/react-scroll-area` kaynağında tabIndex geçmiyor). Sonuç: içinde
+      odaklanabilir eleman bulunmayan bir ScrollArea klavyeyle HİÇ kaydırılamıyordu
+      (WCAG 2.1.1). Kaydırılabilir bölgenin odaklanabilir olması kanonik çözümdür;
+      ek sekme durağı istemeyen tüketici `focusable={false}` diyebilir.
+    */}
+    <ScrollAreaPrimitive.Viewport
+      tabIndex={focusable ? 0 : undefined}
+      className="h-full w-full rounded-[inherit]"
+    >
       {children}
     </ScrollAreaPrimitive.Viewport>
     <ScrollBar />

package/src/components/ui/skeleton.tsx

@@ -144,10 +144,25 @@ export const Skeleton = React.forwardRef<HTMLDivElement, SkeletonProps>(
     }
 
     const SkeletonElement = useMotion ? motion.div : "div";
-    
+
     return (
       <SkeletonElement
         ref={ref}
+        /**
+         * #320: Skeleton hiçbir a11y işareti taşımıyordu — ne `aria-hidden`, ne `role`,
+         * ne `aria-busy`. Radix kullanmadığı için kalıtsal semantik de yok.
+         *
+         * Konvansiyon olarak `aria-hidden` seçildi (`role="status"` DEĞİL): tek bir yükleme
+         * durumu tipik olarak ONLARCA skeleton render eder (`SkeletonText` tek başına N satır
+         * basar) — her biri canlı bölge olsaydı ekran okuyucu aynı olayı N kez duyururdu.
+         * "Yükleniyor" duyurusunun sahibi `spinner.tsx:79-105` (`role="status"` +
+         * `aria-live="polite"` + `sr-only` etiket); skeleton onun görsel yer tutucusudur.
+         * Tüketici kapsayıcıya `aria-busy` koyarak durumu bildirir.
+         *
+         * Yalnız YER TUTUCU dalında: `isLoaded && children` dalı gerçek içerik döndürür ve
+         * yukarıda kasıtlı olarak işaretlenmemiştir.
+         */
+        aria-hidden="true"
         className={cn(
           "moonui-theme",
           skeletonVariants({ variant, size, shape, animation }),

package/src/components/ui/tabs.tsx

@@ -9,22 +9,52 @@ import { cn } from "../../lib/utils";
 /* -------------------------------------------------------------------------------------------------
  * Tabs Root
  * -----------------------------------------------------------------------------------------------*/
+type TabsOrientation = "horizontal" | "vertical";
+
+/**
+ * #322: Yönelim için TEK KAYNAK.
+ *
+ * Eskiden üç ayrı yol vardı ve birbirini eziyordu:
+ *  1. Root `vertical` prop'undan `orientation` hesaplıyor, ARDINDAN `{...props}` yayıyordu
+ *     → tüketicinin (ya da Radix'in kalıtsal) `orientation` prop'u `vertical`'ı SESSİZCE
+ *     eziyordu.
+ *  2. `TabsList`/`TabsTrigger` kendi `orientation` prop'unu yalnız CVA sınıfına veriyor,
+ *     Root'tan hiç beslenmiyordu → klavye yönü dikey, görünüm yatay kalabiliyordu.
+ *
+ * Artık Root çözülmüş yönelimi context ile dağıtıyor; alt component'ler kendi prop'unu
+ * verirse o kazanır (yerel ezme kasıtlı olarak korundu).
+ */
+const TabsOrientationContext = React.createContext<TabsOrientation>("horizontal");
+
 interface TabsProps extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root> {
-  /** Mobil görünümde dikey düzen için */
+  /**
+   * @deprecated `orientation="vertical"` kullanın — pro `MoonUITabsPro` ile aynı ad ve
+   * tip. `vertical` yalnız `orientation` verilmediğinde dikkate alınır.
+   */
   vertical?: boolean;
 }
 
 const Tabs = React.forwardRef<
   React.ElementRef<typeof TabsPrimitive.Root>,
   TabsProps
->(({ vertical = false, ...props }, ref) => (
-  <TabsPrimitive.Root
-    ref={ref}
-    className={cn("moonui-theme", props.className)}
-    orientation={vertical ? "vertical" : "horizontal"}
-    {...props}
-  />
-));
+>(({ vertical = false, orientation, className, ...props }, ref) => {
+  const resolvedOrientation: TabsOrientation =
+    orientation ?? (vertical ? "vertical" : "horizontal");
+
+  return (
+    <TabsOrientationContext.Provider value={resolvedOrientation}>
+      <TabsPrimitive.Root
+        ref={ref}
+        // #322: `className` eskiden destructure EDİLMİYORDU; `cn("moonui-theme", …)`
+        // hesaplanıp ardından `{...props}` yayıldığı için tüketici `className` verdiğinde
+        // hesaplanan değer tümüyle eziliyor ve `moonui-theme` tema kapsamı düşüyordu.
+        className={cn("moonui-theme", className)}
+        orientation={resolvedOrientation}
+        {...props}
+      />
+    </TabsOrientationContext.Provider>
+  );
+});
 
 Tabs.displayName = TabsPrimitive.Root.displayName;
 
@@ -77,10 +107,14 @@ const TabsList = React.forwardRef<
   TabsListProps
 >(({ className, variant, orientation, fullWidth, scrollable, ...props }, ref) => {
   // scrollable prop'unu DOM'a geçirmemek için destructure ediyoruz
+  // #322: yönelim Root'tan context ile geliyor; yerel prop verilirse o kazanır.
+  const contextOrientation = React.useContext(TabsOrientationContext);
+  const resolvedOrientation = orientation ?? contextOrientation;
+
   return (
     <TabsPrimitive.List
       ref={ref}
-      className={cn("moonui-theme", tabsListVariants({ variant, orientation, fullWidth, scrollable, className }))}
+      className={cn("moonui-theme", tabsListVariants({ variant, orientation: resolvedOrientation, fullWidth, scrollable, className }))}
       {...props}
     />
   );
@@ -152,14 +186,19 @@ const TabsTrigger = React.forwardRef<
   fadeTabs = false,
   orientation,
   fullWidth,
-  children, 
-  ...props 
-}, ref) => (
+  children,
+  ...props
+}, ref) => {
+  // #322: yönelim Root'tan context ile geliyor; yerel prop verilirse o kazanır.
+  const contextOrientation = React.useContext(TabsOrientationContext);
+  const resolvedOrientation = orientation ?? contextOrientation;
+
+  return (
   <TabsPrimitive.Trigger
     ref={ref}
     className={cn(
       "moonui-theme",
-      tabsTriggerVariants({ variant, size, orientation, fullWidth }),
+      tabsTriggerVariants({ variant, size, orientation: resolvedOrientation, fullWidth }),
       fadeTabs && "data-[state=inactive]:opacity-60",
       className
     )}
@@ -176,7 +215,8 @@ const TabsTrigger = React.forwardRef<
       <span className="ml-2">{badge}</span>
     )}
   </TabsPrimitive.Trigger>
-));
+  );
+});
 
 TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
 
@@ -207,4 +247,14 @@ const TabsContent = React.forwardRef<
 
 TabsContent.displayName = TabsPrimitive.Content.displayName;
 
-export { Tabs, TabsList, TabsTrigger, TabsContent };
+export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants, tabsTriggerVariants };
+
+// #322: Props interface'lerinin hiçbiri export edilmiyordu (pro tarafı `MoonUITabsProProps`
+// ve `TabItem`'ı export ediyor — asimetriydi).
+export type {
+  TabsProps,
+  TabsListProps,
+  TabsTriggerProps,
+  TabsContentProps,
+  TabsOrientation,
+};