ai-design-system 0.1.115 → 0.1.116

package/components/composites/DocumentTabBar/DocumentTabBar.tsx

@@ -5,10 +5,11 @@
  * Displays open documents as closeable tabs with dirty indicators.
  */
 
-import React from 'react'
+import React, { useCallback, useEffect, useRef, useState } from 'react'
 import { Tabs, TabsList, TabsTrigger, Button, ScrollArea } from '@/components/primitives'
 import { Icon } from '@/components/primitives/Icon'
 import { cn } from '@/lib/utils'
+
 export interface DocumentFile {
   id: string
   name: string
@@ -50,6 +51,12 @@ export interface DocumentTabBarProps {
    * Callback to open/toggle the file explorer (e.g. mobile drawer)
    */
   onToggleExplorer?: () => void
+
+  /**
+   * Whether to show navigation scroll arrows when tabs overflow
+   * @default true
+   */
+  showScrollArrows?: boolean
 }
 
 /**
@@ -62,13 +69,103 @@ export interface DocumentTabBarProps {
  * - Close button (X)
  * 
  * Features:
- * - Scrollable when tabs overflow horizontally
+ * - Scrollable when tabs overflow horizontally with multi-device support
+ * - Mouse wheel vertical-to-horizontal scroll translation
+ * - Auto-scroll active tab into view
+ * - Overflow indicators (edge gradients & navigation chevrons)
  * - Accessible tab navigation via Radix UI Tabs
  * - Close button to remove tabs
  * - Dirty state indicator
  */
 export const DocumentTabBar = React.memo<DocumentTabBarProps>(
-  ({ tabs, activeTabId, onTabSelect, onTabClose, onToggleExplorer, className }) => {
+  ({
+    tabs,
+    activeTabId,
+    onTabSelect,
+    onTabClose,
+    onToggleExplorer,
+    className,
+    showScrollArrows = true,
+  }) => {
+    const scrollContainerRef = useRef<HTMLDivElement>(null)
+    const [canScrollLeft, setCanScrollLeft] = useState(false)
+    const [canScrollRight, setCanScrollRight] = useState(false)
+
+    const getViewport = useCallback((): HTMLElement | null => {
+      return (
+        scrollContainerRef.current?.querySelector<HTMLElement>(
+          '[data-slot="scroll-area-viewport"]'
+        ) ?? null
+      )
+    }, [])
+
+    const updateScrollState = useCallback(() => {
+      const viewport = getViewport()
+      if (!viewport) return
+      const { scrollLeft, scrollWidth, clientWidth } = viewport
+      setCanScrollLeft(scrollLeft > 2)
+      setCanScrollRight(scrollLeft + clientWidth < scrollWidth - 2)
+    }, [getViewport])
+
+    useEffect(() => {
+      const viewport = getViewport()
+      if (!viewport) return
+
+      updateScrollState()
+      viewport.addEventListener('scroll', updateScrollState, { passive: true })
+
+      const resizeObserver = new ResizeObserver(() => {
+        updateScrollState()
+      })
+      resizeObserver.observe(viewport)
+
+      return () => {
+        viewport.removeEventListener('scroll', updateScrollState)
+        resizeObserver.disconnect()
+      }
+    }, [getViewport, updateScrollState, tabs])
+
+    // Convert mouse wheel vertical scroll to horizontal scroll
+    const handleWheel = useCallback(
+      (e: React.WheelEvent) => {
+        if (e.deltaY === 0) return
+        const viewport = getViewport()
+        if (viewport) {
+          viewport.scrollLeft += e.deltaY
+        }
+      },
+      [getViewport]
+    )
+
+    // Auto-scroll active tab into view
+    useEffect(() => {
+      if (!activeTabId || !scrollContainerRef.current) return
+      const activeEl = scrollContainerRef.current.querySelector<HTMLElement>(
+        '[data-state="active"]'
+      )
+      if (activeEl) {
+        activeEl.scrollIntoView({
+          behavior: 'smooth',
+          block: 'nearest',
+          inline: 'nearest',
+        })
+      }
+    }, [activeTabId, tabs])
+
+    const handleScrollLeft = useCallback(() => {
+      const viewport = getViewport()
+      if (viewport) {
+        viewport.scrollBy({ left: -200, behavior: 'smooth' })
+      }
+    }, [getViewport])
+
+    const handleScrollRight = useCallback(() => {
+      const viewport = getViewport()
+      if (viewport) {
+        viewport.scrollBy({ left: 200, behavior: 'smooth' })
+      }
+    }, [getViewport])
+
     if (tabs.length === 0 && !onToggleExplorer) {
       return null
     }
@@ -76,7 +173,7 @@ export const DocumentTabBar = React.memo<DocumentTabBarProps>(
     return (
       <div
         className={cn(
-          'flex items-center border-b border-border bg-background',
+          'flex items-center border-b border-border bg-background relative',
           className
         )}
         data-slot="document-tab-bar"
@@ -92,67 +189,114 @@ export const DocumentTabBar = React.memo<DocumentTabBarProps>(
             <Icon name="folder" size="xs" />
           </Button>
         )}
+
         {tabs.length > 0 && (
-          <ScrollArea className="flex-1">
-            <Tabs
-              value={activeTabId || tabs[0]?.id}
-              onValueChange={onTabSelect}
-              className="h-auto flex-1"
-            >
-            <TabsList className="h-10 rounded-none border-none bg-transparent p-0 w-full justify-start gap-0">
-              {tabs.map((tab) => (
+          <div
+            ref={scrollContainerRef}
+            onWheel={handleWheel}
+            className="flex-1 min-w-0 flex items-center relative"
+          >
+            {showScrollArrows && canScrollLeft && (
+              <Button
+                variant="ghost"
+                size="icon-sm"
+                onClick={handleScrollLeft}
+                className="h-10 w-7 shrink-0 rounded-none border-r border-border/50 text-muted-foreground hover:text-foreground transition-colors z-10"
+                aria-label="Scroll tabs left"
+              >
+                <Icon name="chevron-left" size="xs" />
+              </Button>
+            )}
+
+            <div className="flex-1 min-w-0 relative h-10">
+              {canScrollLeft && (
                 <div
-                  key={tab.id}
-                  className="flex items-center border-r border-border/50 last:border-r-0"
+                  className="pointer-events-none absolute left-0 top-0 bottom-0 w-5 bg-gradient-to-r from-background to-transparent z-10"
+                  aria-hidden="true"
+                />
+              )}
+
+              <ScrollArea orientation="horizontal" className="w-full h-10">
+                <Tabs
+                  value={activeTabId || tabs[0]?.id}
+                  onValueChange={onTabSelect}
+                  className="h-auto flex-1"
                 >
-                  <TabsTrigger
-                    value={tab.id}
-                    className={cn(
-                      'data-[state=inactive]:bg-muted/20 data-[state=inactive]:text-muted-foreground',
-                      'rounded-none border-b-2 border-transparent data-[state=active]:border-primary',
-                      'px-2.5 sm:px-3 py-2 text-xs sm:text-sm font-medium whitespace-nowrap',
-                      'flex items-center gap-1.5 sm:gap-2 h-10',
-                      'focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-0',
-                      'transition-colors'
-                    )}
-                  >
-                    <div className="flex items-center gap-1.5 sm:gap-2">
-                      {/* Dirty indicator */}
-                      {tab.isDirty && (
-                        <Icon
-                          name="circle"
-                          className="size-2 fill-primary text-primary"
-                          aria-label="unsaved changes"
-                        />
-                      )}
-                      {/* Tab name */}
-                      <span className="truncate max-w-[120px] sm:max-w-[200px]">{tab.name}</span>
-                    </div>
-                  </TabsTrigger>
-
-                  {/* Close button */}
-                  <Button
-                    variant="ghost"
-                    size="icon-sm"
-                    onClick={(e) => {
-                      e.stopPropagation()
-                      onTabClose?.(tab.id)
-                    }}
-                    className={cn(
-                      'h-8 w-8 mr-0.5',
-                      'hover:bg-destructive/10 hover:text-destructive',
-                      'focus-visible:ring-2 focus-visible:ring-ring',
-                      'transition-colors'
-                    )}
-                    aria-label={`Close ${tab.name}`}
-                  >
-                    <Icon name="x" size="xs" />
-                  </Button>
-                </div>
-              ))}
-            </TabsList>
-          </Tabs>
-        </ScrollArea>
+                  <TabsList className="h-10 rounded-none border-none bg-transparent p-0 w-full justify-start gap-0">
+                    {tabs.map((tab) => (
+                      <div
+                        key={tab.id}
+                        className="flex items-center shrink-0 border-r border-border/50 last:border-r-0"
+                      >
+                        <TabsTrigger
+                          value={tab.id}
+                          className={cn(
+                            'data-[state=inactive]:bg-muted/20 data-[state=inactive]:text-muted-foreground',
+                            'rounded-none border-b-2 border-transparent data-[state=active]:border-primary',
+                            'px-2.5 sm:px-3 py-2 text-xs sm:text-sm font-medium whitespace-nowrap',
+                            'flex items-center gap-1.5 sm:gap-2 h-10',
+                            'focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-0',
+                            'transition-colors'
+                          )}
+                        >
+                          <div className="flex items-center gap-1.5 sm:gap-2">
+                            {/* Dirty indicator */}
+                            {tab.isDirty && (
+                              <Icon
+                                name="circle"
+                                className="size-2 fill-primary text-primary"
+                                aria-label="unsaved changes"
+                              />
+                            )}
+                            {/* Tab name */}
+                            <span className="truncate max-w-[120px] sm:max-w-[200px]">{tab.name}</span>
+                          </div>
+                        </TabsTrigger>
+
+                        {/* Close button */}
+                        <Button
+                          variant="ghost"
+                          size="icon-sm"
+                          onClick={(e) => {
+                            e.stopPropagation()
+                            onTabClose?.(tab.id)
+                          }}
+                          className={cn(
+                            'h-8 w-8 mr-0.5',
+                            'hover:bg-destructive/10 hover:text-destructive',
+                            'focus-visible:ring-2 focus-visible:ring-ring',
+                            'transition-colors'
+                          )}
+                          aria-label={`Close ${tab.name}`}
+                        >
+                          <Icon name="x" size="xs" />
+                        </Button>
+                      </div>
+                    ))}
+                  </TabsList>
+                </Tabs>
+              </ScrollArea>
+
+              {canScrollRight && (
+                <div
+                  className="pointer-events-none absolute right-0 top-0 bottom-0 w-5 bg-gradient-to-l from-background to-transparent z-10"
+                  aria-hidden="true"
+                />
+              )}
+            </div>
+
+            {showScrollArrows && canScrollRight && (
+              <Button
+                variant="ghost"
+                size="icon-sm"
+                onClick={handleScrollRight}
+                className="h-10 w-7 shrink-0 rounded-none border-l border-border/50 text-muted-foreground hover:text-foreground transition-colors z-10"
+                aria-label="Scroll tabs right"
+              >
+                <Icon name="chevron-right" size="xs" />
+              </Button>
+            )}
+          </div>
         )}
       </div>
     )
@@ -160,3 +304,4 @@ export const DocumentTabBar = React.memo<DocumentTabBarProps>(
 )
 
 DocumentTabBar.displayName = 'DocumentTabBar'
+

package/components/composites/DocumentTabBar/index.ts

@@ -1,2 +1,2 @@
 export { DocumentTabBar } from './DocumentTabBar'
-export type { DocumentTabBarProps } from './DocumentTabBar'
+export type { DocumentTabBarProps, DocumentFile } from './DocumentTabBar'

package/components/composites/index.ts

@@ -75,7 +75,7 @@ export type { ModeToggleProps } from './ModeToggle'
 
 // DocumentTabBar Composite
 export { DocumentTabBar } from './DocumentTabBar'
-export type { DocumentTabBarProps } from './DocumentTabBar'
+export type { DocumentTabBarProps, DocumentFile } from './DocumentTabBar'
 
 // DefaultSwitcher Composite
 export { DefaultSwitcher } from './DefaultSwitcher'

package/components/ui/scroll-area.tsx

@@ -5,11 +5,17 @@ import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
 
 import { cn } from "@/lib/utils"
 
+export interface ScrollAreaProps
+  extends React.ComponentProps<typeof ScrollAreaPrimitive.Root> {
+  orientation?: "vertical" | "horizontal" | "both"
+}
+
 function ScrollArea({
   className,
   children,
+  orientation = "vertical",
   ...props
-}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
+}: ScrollAreaProps) {
   return (
     <ScrollAreaPrimitive.Root
       data-slot="scroll-area"
@@ -22,7 +28,12 @@ function ScrollArea({
       >
         {children}
       </ScrollAreaPrimitive.Viewport>
-      <ScrollBar />
+      {(orientation === "vertical" || orientation === "both") && (
+        <ScrollBar orientation="vertical" />
+      )}
+      {(orientation === "horizontal" || orientation === "both") && (
+        <ScrollBar orientation="horizontal" className="h-1.5 border-t border-t-transparent" />
+      )}
       <ScrollAreaPrimitive.Corner />
     </ScrollAreaPrimitive.Root>
   )

package/dist/index.cjs

@@ -4996,10 +4996,12 @@ Confirmation2.displayName = "Confirmation";
 function ScrollArea(_a) {
   var _b = _a, {
     className,
-    children
+    children,
+    orientation = "vertical"
   } = _b, props = __objRest(_b, [
     "className",
-    "children"
+    "children",
+    "orientation"
   ]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     ScrollAreaPrimitive__namespace.Root,
@@ -5016,7 +5018,8 @@ function ScrollArea(_a) {
             children
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx(ScrollBar, {}),
+        (orientation === "vertical" || orientation === "both") && /* @__PURE__ */ jsxRuntime.jsx(ScrollBar, { orientation: "vertical" }),
+        (orientation === "horizontal" || orientation === "both") && /* @__PURE__ */ jsxRuntime.jsx(ScrollBar, { orientation: "horizontal", className: "h-1.5 border-t border-t-transparent" }),
         /* @__PURE__ */ jsxRuntime.jsx(ScrollAreaPrimitive__namespace.Corner, {})
       ]
     })
@@ -11058,8 +11061,81 @@ var ModeToggle = React3__namespace.memo(({ className }) => {
 });
 ModeToggle.displayName = "ModeToggle";
 var DocumentTabBar = React3__namespace.default.memo(
-  ({ tabs, activeTabId, onTabSelect, onTabClose, onToggleExplorer, className }) => {
+  ({
+    tabs,
+    activeTabId,
+    onTabSelect,
+    onTabClose,
+    onToggleExplorer,
+    className,
+    showScrollArrows = true
+  }) => {
     var _a;
+    const scrollContainerRef = React3.useRef(null);
+    const [canScrollLeft, setCanScrollLeft] = React3.useState(false);
+    const [canScrollRight, setCanScrollRight] = React3.useState(false);
+    const getViewport = React3.useCallback(() => {
+      var _a2, _b;
+      return (_b = (_a2 = scrollContainerRef.current) == null ? void 0 : _a2.querySelector(
+        '[data-slot="scroll-area-viewport"]'
+      )) != null ? _b : null;
+    }, []);
+    const updateScrollState = React3.useCallback(() => {
+      const viewport = getViewport();
+      if (!viewport) return;
+      const { scrollLeft, scrollWidth, clientWidth } = viewport;
+      setCanScrollLeft(scrollLeft > 2);
+      setCanScrollRight(scrollLeft + clientWidth < scrollWidth - 2);
+    }, [getViewport]);
+    React3.useEffect(() => {
+      const viewport = getViewport();
+      if (!viewport) return;
+      updateScrollState();
+      viewport.addEventListener("scroll", updateScrollState, { passive: true });
+      const resizeObserver = new ResizeObserver(() => {
+        updateScrollState();
+      });
+      resizeObserver.observe(viewport);
+      return () => {
+        viewport.removeEventListener("scroll", updateScrollState);
+        resizeObserver.disconnect();
+      };
+    }, [getViewport, updateScrollState, tabs]);
+    const handleWheel = React3.useCallback(
+      (e) => {
+        if (e.deltaY === 0) return;
+        const viewport = getViewport();
+        if (viewport) {
+          viewport.scrollLeft += e.deltaY;
+        }
+      },
+      [getViewport]
+    );
+    React3.useEffect(() => {
+      if (!activeTabId || !scrollContainerRef.current) return;
+      const activeEl = scrollContainerRef.current.querySelector(
+        '[data-state="active"]'
+      );
+      if (activeEl) {
+        activeEl.scrollIntoView({
+          behavior: "smooth",
+          block: "nearest",
+          inline: "nearest"
+        });
+      }
+    }, [activeTabId, tabs]);
+    const handleScrollLeft = React3.useCallback(() => {
+      const viewport = getViewport();
+      if (viewport) {
+        viewport.scrollBy({ left: -200, behavior: "smooth" });
+      }
+    }, [getViewport]);
+    const handleScrollRight = React3.useCallback(() => {
+      const viewport = getViewport();
+      if (viewport) {
+        viewport.scrollBy({ left: 200, behavior: "smooth" });
+      }
+    }, [getViewport]);
     if (tabs.length === 0 && !onToggleExplorer) {
       return null;
     }
@@ -11067,7 +11143,7 @@ var DocumentTabBar = React3__namespace.default.memo(
       "div",
       {
         className: cn(
-          "flex items-center border-b border-border bg-background",
+          "flex items-center border-b border-border bg-background relative",
           className
         ),
         "data-slot": "document-tab-bar",
@@ -11083,67 +11159,115 @@ var DocumentTabBar = React3__namespace.default.memo(
               children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "folder", size: "xs" })
             }
           ),
-          tabs.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(ScrollArea2, { className: "flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(
-            Tabs2,
+          tabs.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
             {
-              value: activeTabId || ((_a = tabs[0]) == null ? void 0 : _a.id),
-              onValueChange: onTabSelect,
-              className: "h-auto flex-1",
-              children: /* @__PURE__ */ jsxRuntime.jsx(TabsList, { className: "h-10 rounded-none border-none bg-transparent p-0 w-full justify-start gap-0", children: tabs.map((tab) => /* @__PURE__ */ jsxRuntime.jsxs(
-                "div",
-                {
-                  className: "flex items-center border-r border-border/50 last:border-r-0",
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      TabsTrigger,
-                      {
-                        value: tab.id,
-                        className: cn(
-                          "data-[state=inactive]:bg-muted/20 data-[state=inactive]:text-muted-foreground",
-                          "rounded-none border-b-2 border-transparent data-[state=active]:border-primary",
-                          "px-2.5 sm:px-3 py-2 text-xs sm:text-sm font-medium whitespace-nowrap",
-                          "flex items-center gap-1.5 sm:gap-2 h-10",
-                          "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-0",
-                          "transition-colors"
-                        ),
-                        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5 sm:gap-2", children: [
-                          tab.isDirty && /* @__PURE__ */ jsxRuntime.jsx(
-                            Icon,
-                            {
-                              name: "circle",
-                              className: "size-2 fill-primary text-primary",
-                              "aria-label": "unsaved changes"
-                            }
-                          ),
-                          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate max-w-[120px] sm:max-w-[200px]", children: tab.name })
-                        ] })
-                      }
-                    ),
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      Button2,
-                      {
-                        variant: "ghost",
-                        size: "icon-sm",
-                        onClick: (e) => {
-                          e.stopPropagation();
-                          onTabClose == null ? void 0 : onTabClose(tab.id);
+              ref: scrollContainerRef,
+              onWheel: handleWheel,
+              className: "flex-1 min-w-0 flex items-center relative",
+              children: [
+                showScrollArrows && canScrollLeft && /* @__PURE__ */ jsxRuntime.jsx(
+                  Button2,
+                  {
+                    variant: "ghost",
+                    size: "icon-sm",
+                    onClick: handleScrollLeft,
+                    className: "h-10 w-7 shrink-0 rounded-none border-r border-border/50 text-muted-foreground hover:text-foreground transition-colors z-10",
+                    "aria-label": "Scroll tabs left",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "chevron-left", size: "xs" })
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0 relative h-10", children: [
+                  canScrollLeft && /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      className: "pointer-events-none absolute left-0 top-0 bottom-0 w-5 bg-gradient-to-r from-background to-transparent z-10",
+                      "aria-hidden": "true"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(ScrollArea2, { orientation: "horizontal", className: "w-full h-10", children: /* @__PURE__ */ jsxRuntime.jsx(
+                    Tabs2,
+                    {
+                      value: activeTabId || ((_a = tabs[0]) == null ? void 0 : _a.id),
+                      onValueChange: onTabSelect,
+                      className: "h-auto flex-1",
+                      children: /* @__PURE__ */ jsxRuntime.jsx(TabsList, { className: "h-10 rounded-none border-none bg-transparent p-0 w-full justify-start gap-0", children: tabs.map((tab) => /* @__PURE__ */ jsxRuntime.jsxs(
+                        "div",
+                        {
+                          className: "flex items-center shrink-0 border-r border-border/50 last:border-r-0",
+                          children: [
+                            /* @__PURE__ */ jsxRuntime.jsx(
+                              TabsTrigger,
+                              {
+                                value: tab.id,
+                                className: cn(
+                                  "data-[state=inactive]:bg-muted/20 data-[state=inactive]:text-muted-foreground",
+                                  "rounded-none border-b-2 border-transparent data-[state=active]:border-primary",
+                                  "px-2.5 sm:px-3 py-2 text-xs sm:text-sm font-medium whitespace-nowrap",
+                                  "flex items-center gap-1.5 sm:gap-2 h-10",
+                                  "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-0",
+                                  "transition-colors"
+                                ),
+                                children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5 sm:gap-2", children: [
+                                  tab.isDirty && /* @__PURE__ */ jsxRuntime.jsx(
+                                    Icon,
+                                    {
+                                      name: "circle",
+                                      className: "size-2 fill-primary text-primary",
+                                      "aria-label": "unsaved changes"
+                                    }
+                                  ),
+                                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate max-w-[120px] sm:max-w-[200px]", children: tab.name })
+                                ] })
+                              }
+                            ),
+                            /* @__PURE__ */ jsxRuntime.jsx(
+                              Button2,
+                              {
+                                variant: "ghost",
+                                size: "icon-sm",
+                                onClick: (e) => {
+                                  e.stopPropagation();
+                                  onTabClose == null ? void 0 : onTabClose(tab.id);
+                                },
+                                className: cn(
+                                  "h-8 w-8 mr-0.5",
+                                  "hover:bg-destructive/10 hover:text-destructive",
+                                  "focus-visible:ring-2 focus-visible:ring-ring",
+                                  "transition-colors"
+                                ),
+                                "aria-label": `Close ${tab.name}`,
+                                children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "x", size: "xs" })
+                              }
+                            )
+                          ]
                         },
-                        className: cn(
-                          "h-8 w-8 mr-0.5",
-                          "hover:bg-destructive/10 hover:text-destructive",
-                          "focus-visible:ring-2 focus-visible:ring-ring",
-                          "transition-colors"
-                        ),
-                        "aria-label": `Close ${tab.name}`,
-                        children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "x", size: "xs" })
-                      }
-                    )
-                  ]
-                },
-                tab.id
-              )) })
+                        tab.id
+                      )) })
+                    }
+                  ) }),
+                  canScrollRight && /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      className: "pointer-events-none absolute right-0 top-0 bottom-0 w-5 bg-gradient-to-l from-background to-transparent z-10",
+                      "aria-hidden": "true"
+                    }
+                  )
+                ] }),
+                showScrollArrows && canScrollRight && /* @__PURE__ */ jsxRuntime.jsx(
+                  Button2,
+                  {
+                    variant: "ghost",
+                    size: "icon-sm",
+                    onClick: handleScrollRight,
+                    className: "h-10 w-7 shrink-0 rounded-none border-l border-border/50 text-muted-foreground hover:text-foreground transition-colors z-10",
+                    "aria-label": "Scroll tabs right",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "chevron-right", size: "xs" })
+                  }
+                )
+              ]
             }
-          ) })
+          )
         ]
       }
     );