@moontra/moonui 6.7.0 → 6.8.0

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/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,
+};