eidos-ui 3.0.0 → 3.1.0

package/dist/{chunk-RAZRQ57B.js → chunk-74MBKLYI.js}

@@ -3,7 +3,8 @@ import {
 } from "./chunk-KBG77JHC.js";
 
 // src/components/Tabs/Tabs.component.tsx
-import React, { useState, useRef, useContext, useLayoutEffect } from "react";
+import React, { useState, useRef, useContext, useEffect, useLayoutEffect } from "react";
+import { ChevronLeft, ChevronRight } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 var TabsContext = React.createContext(null);
 var useTabsContext = () => {
@@ -93,12 +94,23 @@ var Tabs = ({
   size = "md",
   color = "primary",
   fullWidth = false,
+  scrollButtons = "auto",
   className = "",
   children
 }) => {
   const isControlled = value !== void 0;
   const [localValue, setLocalValue] = useState(defaultValue ?? "");
   const activeValue = isControlled ? value : localValue;
+  const tabChildren = [];
+  const panelChildren = [];
+  React.Children.forEach(children, (child) => {
+    if (!React.isValidElement(child)) return;
+    if (child.type === Tab) {
+      tabChildren.push(child);
+    } else if (child.type === TabPanel) {
+      panelChildren.push(child);
+    }
+  });
   const listRef = useRef(null);
   const indicatorRef = useRef(null);
   const hasPositioned = useRef(false);
@@ -120,28 +132,73 @@ var Tabs = ({
       hasPositioned.current = true;
     }
   }, [activeValue, variant, fullWidth]);
+  useLayoutEffect(() => {
+    const list = listRef.current;
+    if (!list) return;
+    const activeTab = list.querySelector('[aria-selected="true"]');
+    if (!activeTab) return;
+    const left = activeTab.offsetLeft;
+    const right = left + activeTab.offsetWidth;
+    if (left < list.scrollLeft) {
+      list.scrollLeft = left;
+    } else if (right > list.scrollLeft + list.clientWidth) {
+      list.scrollLeft = right - list.clientWidth;
+    }
+  }, [activeValue]);
+  const [scrollState, setScrollState] = useState({ canScrollPrev: false, canScrollNext: false });
+  const hasScrollButtons = scrollButtons !== "none";
+  useEffect(() => {
+    if (!hasScrollButtons) return;
+    const list = listRef.current;
+    if (!list) return;
+    const update = () => {
+      const maxScroll = list.scrollWidth - list.clientWidth;
+      const canScrollPrev = list.scrollLeft > 1;
+      const canScrollNext = list.scrollLeft < maxScroll - 1;
+      setScrollState(
+        (previous) => previous.canScrollPrev === canScrollPrev && previous.canScrollNext === canScrollNext ? previous : { canScrollPrev, canScrollNext }
+      );
+    };
+    update();
+    list.addEventListener("scroll", update, { passive: true });
+    const observer = new ResizeObserver(update);
+    observer.observe(list);
+    Array.from(list.children).forEach((child) => observer.observe(child));
+    return () => {
+      list.removeEventListener("scroll", update);
+      observer.disconnect();
+    };
+  }, [hasScrollButtons, tabChildren.length, size, variant, fullWidth]);
+  const scrollByStep = (direction) => {
+    const list = listRef.current;
+    if (!list) return;
+    const step = list.clientWidth * 0.8;
+    const reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    list.scrollBy({ left: direction * step, behavior: reducedMotion ? "auto" : "smooth" });
+  };
   const onSelect = (newValue) => {
     if (!isControlled) {
       setLocalValue(newValue);
     }
     onChange?.(newValue);
   };
-  const tabChildren = [];
-  const panelChildren = [];
-  React.Children.forEach(children, (child) => {
-    if (!React.isValidElement(child)) return;
-    if (child.type === Tab) {
-      tabChildren.push(child);
-    } else if (child.type === TabPanel) {
-      panelChildren.push(child);
-    }
-  });
   const rootClasses = ["eidos-tabs", `eidos-tabs--${variant}`, `eidos-tabs--${color}`, className].filter(Boolean).join(" ");
   const listClasses = [
     "eidos-tabs-list",
     `eidos-tabs-list--${size}`,
-    fullWidth && "eidos-tabs-list--fullWidth"
+    fullWidth && "eidos-tabs-list--fullWidth",
+    // With buttons, they are the affordance - a native scrollbar underneath
+    // them is redundant, and on a space-taking one it would also sit over the
+    // `line` variant's rule.
+    hasScrollButtons && "eidos-tabs-list--hideScrollbar"
   ].filter(Boolean).join(" ");
+  const showPrevButton = hasScrollButtons && scrollState.canScrollPrev;
+  const showNextButton = hasScrollButtons && scrollState.canScrollNext;
+  const scrollButtonClasses = (direction) => [
+    "eidos-tabs-scroll-button",
+    `eidos-tabs-scroll-button--${direction}`,
+    `eidos-tabs-scroll-button--${size}`
+  ].join(" ");
   const contextValue = {
     activeValue,
     onSelect,
@@ -152,9 +209,33 @@ var Tabs = ({
     listRef
   };
   return /* @__PURE__ */ jsx(TabsContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs("div", { className: rootClasses, children: [
-    /* @__PURE__ */ jsxs("div", { ref: listRef, className: listClasses, role: "tablist", children: [
-      tabChildren,
-      variant === "line" && /* @__PURE__ */ jsx("span", { ref: indicatorRef, className: "eidos-tabs-indicator", "aria-hidden": "true" })
+    /* @__PURE__ */ jsxs("div", { className: "eidos-tabs-bar", children: [
+      showPrevButton && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: scrollButtonClasses("prev"),
+          onClick: () => scrollByStep(-1),
+          tabIndex: -1,
+          "aria-hidden": "true",
+          children: /* @__PURE__ */ jsx(ChevronLeft, { className: "eidos-tabs-scroll-button-icon" })
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { ref: listRef, className: listClasses, role: "tablist", children: [
+        tabChildren,
+        variant === "line" && /* @__PURE__ */ jsx("span", { ref: indicatorRef, className: "eidos-tabs-indicator", "aria-hidden": "true" })
+      ] }),
+      showNextButton && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: scrollButtonClasses("next"),
+          onClick: () => scrollByStep(1),
+          tabIndex: -1,
+          "aria-hidden": "true",
+          children: /* @__PURE__ */ jsx(ChevronRight, { className: "eidos-tabs-scroll-button-icon" })
+        }
+      )
     ] }),
     /* @__PURE__ */ jsx("div", { className: "eidos-tabs-panels", children: panelChildren })
   ] }) });
@@ -166,4 +247,4 @@ export {
   TabPanel,
   Tabs
 };
-//# sourceMappingURL=chunk-RAZRQ57B.js.map
+//# sourceMappingURL=chunk-74MBKLYI.js.map

package/dist/chunk-74MBKLYI.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Tabs/Tabs.component.tsx"],"sourcesContent":["import React, { useState, useRef, useContext, useEffect, useLayoutEffect } from 'react';\nimport { ChevronLeft, ChevronRight } from 'lucide-react';\nimport { renderIcon } from '../../utils';\nimport type { TabsProps, TabProps, TabPanelProps, TabsContextValue } from './Tabs.types';\n\n// ============================================================================\n// CONTEXT\n// ============================================================================\n\nconst TabsContext = React.createContext<TabsContextValue | null>(null);\n\nconst useTabsContext = (): TabsContextValue => {\n  const ctx = useContext(TabsContext);\n  if (!ctx) throw new Error('Tab/TabPanel must be used inside <Tabs>');\n  return ctx;\n};\n\n// ============================================================================\n// TAB - individual tab trigger button\n// Defined before Tabs so Tabs can use `child.type === Tab` for child separation.\n// ============================================================================\n\nexport const Tab: React.FC<TabProps> = ({\n  value,\n  children,\n  disabled = false,\n  icon,\n  className = '',\n}) => {\n  const { activeValue, onSelect, size, fullWidth, listRef } = useTabsContext();\n  const isActive = activeValue === value;\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLButtonElement>) => {\n    const list = listRef.current;\n    if (!list) return;\n\n    const allTabs = Array.from(\n      list.querySelectorAll('[role=\"tab\"]:not([disabled])'),\n    ) as HTMLElement[];\n    const currentIndex = allTabs.indexOf(e.currentTarget);\n    if (currentIndex === -1) return;\n\n    let targetIndex = -1;\n    if (e.key === 'ArrowRight') targetIndex = (currentIndex + 1) % allTabs.length;\n    else if (e.key === 'ArrowLeft')\n      targetIndex = (currentIndex - 1 + allTabs.length) % allTabs.length;\n    else if (e.key === 'Home') targetIndex = 0;\n    else if (e.key === 'End') targetIndex = allTabs.length - 1;\n\n    if (targetIndex !== -1) {\n      e.preventDefault();\n      allTabs[targetIndex].focus();\n    }\n  };\n\n  const tabClasses = [\n    'eidos-tab',\n    `eidos-tab--${size}`,\n    isActive && 'eidos-tab--active',\n    disabled && 'eidos-tab--disabled',\n    fullWidth && 'eidos-tab--fullWidth',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <button\n      id={`eidos-tab-${value}`}\n      role=\"tab\"\n      aria-selected={isActive}\n      aria-controls={`eidos-tabpanel-${value}`}\n      tabIndex={isActive ? 0 : -1}\n      disabled={disabled}\n      className={tabClasses}\n      onClick={() => !disabled && onSelect(value)}\n      onKeyDown={handleKeyDown}\n      type=\"button\"\n    >\n      {icon && <span className=\"eidos-tab-icon\">{renderIcon(icon, 'eidos-tab-icon-svg')}</span>}\n      <span className=\"eidos-tab-label\">{children}</span>\n    </button>\n  );\n};\n\nTab.displayName = 'Tab';\n\n// ============================================================================\n// TAB PANEL - content region shown when its value matches the active tab\n// Defined before Tabs for the same `child.type === TabPanel` check.\n// ============================================================================\n\nexport const TabPanel: React.FC<TabPanelProps> = ({ value, children, className = '' }) => {\n  const { activeValue } = useTabsContext();\n  const isActive = activeValue === value;\n\n  if (!isActive) return null;\n\n  return (\n    <div\n      id={`eidos-tabpanel-${value}`}\n      role=\"tabpanel\"\n      aria-labelledby={`eidos-tab-${value}`}\n      tabIndex={0}\n      className={['eidos-tab-panel', className].filter(Boolean).join(' ')}\n    >\n      {children}\n    </div>\n  );\n};\n\nTabPanel.displayName = 'TabPanel';\n\n// ============================================================================\n// TABS - root container; provides context, separates tab/panel children\n// ============================================================================\n\nexport const Tabs: React.FC<TabsProps> = ({\n  value,\n  defaultValue,\n  onChange,\n  variant = 'line',\n  size = 'md',\n  color = 'primary',\n  fullWidth = false,\n  scrollButtons = 'auto',\n  className = '',\n  children,\n}) => {\n  const isControlled = value !== undefined;\n  const [localValue, setLocalValue] = useState(defaultValue ?? '');\n  const activeValue = isControlled ? value! : localValue;\n\n  // Separate Tab and TabPanel children so the list and panels render in\n  // distinct DOM regions, regardless of how the consumer orders them.\n  const tabChildren: React.ReactElement[] = [];\n  const panelChildren: React.ReactElement[] = [];\n\n  React.Children.forEach(children, (child) => {\n    if (!React.isValidElement(child)) return;\n    if (child.type === Tab) {\n      tabChildren.push(child);\n    } else if (child.type === TabPanel) {\n      panelChildren.push(child);\n    }\n  });\n\n  const listRef = useRef<HTMLDivElement>(null);\n  const indicatorRef = useRef<HTMLSpanElement>(null);\n  // Tracks whether the indicator has been positioned at least once so we can\n  // skip the CSS transition on the very first render and avoid it animating\n  // from the top-left corner to the initial tab.\n  const hasPositioned = useRef(false);\n\n  useLayoutEffect(() => {\n    if (variant !== 'line') return;\n    const list = listRef.current;\n    const indicator = indicatorRef.current;\n    if (!list || !indicator) return;\n\n    const activeTab = list.querySelector('[aria-selected=\"true\"]') as HTMLElement | null;\n    if (!activeTab) return;\n\n    // Suppress the CSS transition on the initial paint so the indicator snaps\n    // into place rather than sliding from 0.\n    if (!hasPositioned.current) {\n      indicator.style.transition = 'none';\n    }\n\n    indicator.style.left = `${activeTab.offsetLeft}px`;\n    indicator.style.width = `${activeTab.offsetWidth}px`;\n\n    if (!hasPositioned.current) {\n      // Force a synchronous reflow so the browser commits the no-transition\n      // position before we re-enable the transition for future clicks.\n      void indicator.offsetWidth;\n      indicator.style.transition = '';\n      hasPositioned.current = true;\n    }\n  }, [activeValue, variant, fullWidth]);\n\n  // The list scrolls horizontally when the strip is wider than its container,\n  // so an activated tab can sit outside the scrollport - reachable by keyboard\n  // (`End`) or by a controlled `value` change, but invisible. `scrollLeft` is\n  // adjusted directly rather than via `scrollIntoView`, which walks the whole\n  // ancestor chain and would scroll the page vertically when the strip is below\n  // the fold.\n  useLayoutEffect(() => {\n    const list = listRef.current;\n    if (!list) return;\n\n    const activeTab = list.querySelector('[aria-selected=\"true\"]') as HTMLElement | null;\n    if (!activeTab) return;\n\n    const left = activeTab.offsetLeft;\n    const right = left + activeTab.offsetWidth;\n\n    if (left < list.scrollLeft) {\n      list.scrollLeft = left;\n    } else if (right > list.scrollLeft + list.clientWidth) {\n      list.scrollLeft = right - list.clientWidth;\n    }\n  }, [activeValue]);\n\n  // Whether either end of the strip has content hidden past it. Drives both\n  // the presence of the scroll buttons (neither end scrollable = the strip\n  // fits, so no buttons) and their disabled state at the extremes.\n  const [scrollState, setScrollState] = useState({ canScrollPrev: false, canScrollNext: false });\n  const hasScrollButtons = scrollButtons !== 'none';\n\n  useEffect(() => {\n    if (!hasScrollButtons) return;\n    const list = listRef.current;\n    if (!list) return;\n\n    const update = () => {\n      const maxScroll = list.scrollWidth - list.clientWidth;\n      // 1px of tolerance: fractional layout widths leave a sub-pixel remainder\n      // at either end that would otherwise keep a button enabled for a scroll\n      // that can no longer move anything.\n      const canScrollPrev = list.scrollLeft > 1;\n      const canScrollNext = list.scrollLeft < maxScroll - 1;\n      setScrollState((previous) =>\n        previous.canScrollPrev === canScrollPrev && previous.canScrollNext === canScrollNext\n          ? previous\n          : { canScrollPrev, canScrollNext },\n      );\n    };\n\n    update();\n    list.addEventListener('scroll', update, { passive: true });\n\n    // The list's own box stays the same width when a tab's label reflows or a\n    // font finishes loading, so the tabs have to be observed as well as the\n    // container - only their sizes tell us the strip started overflowing.\n    const observer = new ResizeObserver(update);\n    observer.observe(list);\n    Array.from(list.children).forEach((child) => observer.observe(child));\n\n    return () => {\n      list.removeEventListener('scroll', update);\n      observer.disconnect();\n    };\n  }, [hasScrollButtons, tabChildren.length, size, variant, fullWidth]);\n\n  const scrollByStep = (direction: -1 | 1) => {\n    const list = listRef.current;\n    if (!list) return;\n\n    // A step just short of a full page keeps a tab of context on screen, the\n    // same way a paged scrollbar click does.\n    const step = list.clientWidth * 0.8;\n    const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n    list.scrollBy({ left: direction * step, behavior: reducedMotion ? 'auto' : 'smooth' });\n  };\n\n  const onSelect = (newValue: string) => {\n    if (!isControlled) {\n      setLocalValue(newValue);\n    }\n    onChange?.(newValue);\n  };\n\n  const rootClasses = ['eidos-tabs', `eidos-tabs--${variant}`, `eidos-tabs--${color}`, className]\n    .filter(Boolean)\n    .join(' ');\n\n  const listClasses = [\n    'eidos-tabs-list',\n    `eidos-tabs-list--${size}`,\n    fullWidth && 'eidos-tabs-list--fullWidth',\n    // With buttons, they are the affordance - a native scrollbar underneath\n    // them is redundant, and on a space-taking one it would also sit over the\n    // `line` variant's rule.\n    hasScrollButtons && 'eidos-tabs-list--hideScrollbar',\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  // Each button exists only while its own direction has somewhere to go: none\n  // at all when the strip fits, and none at the end you have reached. A\n  // disabled button would be pointing at nothing. They are positioned\n  // absolutely, so appearing and disappearing never moves the tabs.\n  const showPrevButton = hasScrollButtons && scrollState.canScrollPrev;\n  const showNextButton = hasScrollButtons && scrollState.canScrollNext;\n\n  const scrollButtonClasses = (direction: 'prev' | 'next') =>\n    [\n      'eidos-tabs-scroll-button',\n      `eidos-tabs-scroll-button--${direction}`,\n      `eidos-tabs-scroll-button--${size}`,\n    ].join(' ');\n\n  const contextValue: TabsContextValue = {\n    activeValue,\n    onSelect,\n    variant,\n    size,\n    color,\n    fullWidth,\n    listRef,\n  };\n\n  return (\n    <TabsContext.Provider value={contextValue}>\n      <div className={rootClasses}>\n        {/* The buttons are siblings of the tab list, never children of it:\n            `role=\"tablist\"` only accepts tabs. They are also hidden from\n            assistive tech and skipped by Tab, because they are a pointer\n            affordance for something the keyboard already does - arrow keys\n            move between tabs and scroll the active one into view. */}\n        <div className=\"eidos-tabs-bar\">\n          {showPrevButton && (\n            <button\n              type=\"button\"\n              className={scrollButtonClasses('prev')}\n              onClick={() => scrollByStep(-1)}\n              tabIndex={-1}\n              aria-hidden=\"true\"\n            >\n              <ChevronLeft className=\"eidos-tabs-scroll-button-icon\" />\n            </button>\n          )}\n\n          <div ref={listRef} className={listClasses} role=\"tablist\">\n            {tabChildren}\n            {variant === 'line' && (\n              <span ref={indicatorRef} className=\"eidos-tabs-indicator\" aria-hidden=\"true\" />\n            )}\n          </div>\n\n          {showNextButton && (\n            <button\n              type=\"button\"\n              className={scrollButtonClasses('next')}\n              onClick={() => scrollByStep(1)}\n              tabIndex={-1}\n              aria-hidden=\"true\"\n            >\n              <ChevronRight className=\"eidos-tabs-scroll-button-icon\" />\n            </button>\n          )}\n        </div>\n\n        <div className=\"eidos-tabs-panels\">{panelChildren}</div>\n      </div>\n    </TabsContext.Provider>\n  );\n};\n\nTabs.displayName = 'Tabs';\n"],"mappings":"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","names":[]}

package/dist/{chunk-VHQTDITV.cjs → chunk-KQD7CQ4Z.cjs}

@@ -4,6 +4,7 @@ var _chunkGEHL4LKKcjs = require('./chunk-GEHL4LKK.cjs');
 
 // src/components/Tabs/Tabs.component.tsx
 var _react = require('react'); var _react2 = _interopRequireDefault(_react);
+var _lucidereact = require('lucide-react');
 var _jsxruntime = require('react/jsx-runtime');
 var TabsContext = _react2.default.createContext(null);
 var useTabsContext = () => {
@@ -93,12 +94,23 @@ var Tabs = ({
   size = "md",
   color = "primary",
   fullWidth = false,
+  scrollButtons = "auto",
   className = "",
   children
 }) => {
   const isControlled = value !== void 0;
   const [localValue, setLocalValue] = _react.useState.call(void 0, _nullishCoalesce(defaultValue, () => ( "")));
   const activeValue = isControlled ? value : localValue;
+  const tabChildren = [];
+  const panelChildren = [];
+  _react2.default.Children.forEach(children, (child) => {
+    if (!_react2.default.isValidElement(child)) return;
+    if (child.type === Tab) {
+      tabChildren.push(child);
+    } else if (child.type === TabPanel) {
+      panelChildren.push(child);
+    }
+  });
   const listRef = _react.useRef.call(void 0, null);
   const indicatorRef = _react.useRef.call(void 0, null);
   const hasPositioned = _react.useRef.call(void 0, false);
@@ -120,28 +132,73 @@ var Tabs = ({
       hasPositioned.current = true;
     }
   }, [activeValue, variant, fullWidth]);
+  _react.useLayoutEffect.call(void 0, () => {
+    const list = listRef.current;
+    if (!list) return;
+    const activeTab = list.querySelector('[aria-selected="true"]');
+    if (!activeTab) return;
+    const left = activeTab.offsetLeft;
+    const right = left + activeTab.offsetWidth;
+    if (left < list.scrollLeft) {
+      list.scrollLeft = left;
+    } else if (right > list.scrollLeft + list.clientWidth) {
+      list.scrollLeft = right - list.clientWidth;
+    }
+  }, [activeValue]);
+  const [scrollState, setScrollState] = _react.useState.call(void 0, { canScrollPrev: false, canScrollNext: false });
+  const hasScrollButtons = scrollButtons !== "none";
+  _react.useEffect.call(void 0, () => {
+    if (!hasScrollButtons) return;
+    const list = listRef.current;
+    if (!list) return;
+    const update = () => {
+      const maxScroll = list.scrollWidth - list.clientWidth;
+      const canScrollPrev = list.scrollLeft > 1;
+      const canScrollNext = list.scrollLeft < maxScroll - 1;
+      setScrollState(
+        (previous) => previous.canScrollPrev === canScrollPrev && previous.canScrollNext === canScrollNext ? previous : { canScrollPrev, canScrollNext }
+      );
+    };
+    update();
+    list.addEventListener("scroll", update, { passive: true });
+    const observer = new ResizeObserver(update);
+    observer.observe(list);
+    Array.from(list.children).forEach((child) => observer.observe(child));
+    return () => {
+      list.removeEventListener("scroll", update);
+      observer.disconnect();
+    };
+  }, [hasScrollButtons, tabChildren.length, size, variant, fullWidth]);
+  const scrollByStep = (direction) => {
+    const list = listRef.current;
+    if (!list) return;
+    const step = list.clientWidth * 0.8;
+    const reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    list.scrollBy({ left: direction * step, behavior: reducedMotion ? "auto" : "smooth" });
+  };
   const onSelect = (newValue) => {
     if (!isControlled) {
       setLocalValue(newValue);
     }
     _optionalChain([onChange, 'optionalCall', _ => _(newValue)]);
   };
-  const tabChildren = [];
-  const panelChildren = [];
-  _react2.default.Children.forEach(children, (child) => {
-    if (!_react2.default.isValidElement(child)) return;
-    if (child.type === Tab) {
-      tabChildren.push(child);
-    } else if (child.type === TabPanel) {
-      panelChildren.push(child);
-    }
-  });
   const rootClasses = ["eidos-tabs", `eidos-tabs--${variant}`, `eidos-tabs--${color}`, className].filter(Boolean).join(" ");
   const listClasses = [
     "eidos-tabs-list",
     `eidos-tabs-list--${size}`,
-    fullWidth && "eidos-tabs-list--fullWidth"
+    fullWidth && "eidos-tabs-list--fullWidth",
+    // With buttons, they are the affordance - a native scrollbar underneath
+    // them is redundant, and on a space-taking one it would also sit over the
+    // `line` variant's rule.
+    hasScrollButtons && "eidos-tabs-list--hideScrollbar"
   ].filter(Boolean).join(" ");
+  const showPrevButton = hasScrollButtons && scrollState.canScrollPrev;
+  const showNextButton = hasScrollButtons && scrollState.canScrollNext;
+  const scrollButtonClasses = (direction) => [
+    "eidos-tabs-scroll-button",
+    `eidos-tabs-scroll-button--${direction}`,
+    `eidos-tabs-scroll-button--${size}`
+  ].join(" ");
   const contextValue = {
     activeValue,
     onSelect,
@@ -152,9 +209,33 @@ var Tabs = ({
     listRef
   };
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TabsContext.Provider, { value: contextValue, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: rootClasses, children: [
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { ref: listRef, className: listClasses, role: "tablist", children: [
-      tabChildren,
-      variant === "line" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { ref: indicatorRef, className: "eidos-tabs-indicator", "aria-hidden": "true" })
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "eidos-tabs-bar", children: [
+      showPrevButton && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "button",
+        {
+          type: "button",
+          className: scrollButtonClasses("prev"),
+          onClick: () => scrollByStep(-1),
+          tabIndex: -1,
+          "aria-hidden": "true",
+          children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.ChevronLeft, { className: "eidos-tabs-scroll-button-icon" })
+        }
+      ),
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { ref: listRef, className: listClasses, role: "tablist", children: [
+        tabChildren,
+        variant === "line" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { ref: indicatorRef, className: "eidos-tabs-indicator", "aria-hidden": "true" })
+      ] }),
+      showNextButton && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "button",
+        {
+          type: "button",
+          className: scrollButtonClasses("next"),
+          onClick: () => scrollByStep(1),
+          tabIndex: -1,
+          "aria-hidden": "true",
+          children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.ChevronRight, { className: "eidos-tabs-scroll-button-icon" })
+        }
+      )
     ] }),
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "eidos-tabs-panels", children: panelChildren })
   ] }) });
@@ -166,4 +247,4 @@ Tabs.displayName = "Tabs";
 
 
 exports.Tab = Tab; exports.TabPanel = TabPanel; exports.Tabs = Tabs;
-//# sourceMappingURL=chunk-VHQTDITV.cjs.map
+//# sourceMappingURL=chunk-KQD7CQ4Z.cjs.map

package/dist/chunk-KQD7CQ4Z.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/runner/work/eidos-ui/eidos-ui/dist/chunk-KQD7CQ4Z.cjs","../src/components/Tabs/Tabs.component.tsx"],"names":[],"mappings":"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","file":"/home/runner/work/eidos-ui/eidos-ui/dist/chunk-KQD7CQ4Z.cjs","sourcesContent":[null,"import React, { useState, useRef, useContext, useEffect, useLayoutEffect } from 'react';\nimport { ChevronLeft, ChevronRight } from 'lucide-react';\nimport { renderIcon } from '../../utils';\nimport type { TabsProps, TabProps, TabPanelProps, TabsContextValue } from './Tabs.types';\n\n// ============================================================================\n// CONTEXT\n// ============================================================================\n\nconst TabsContext = React.createContext<TabsContextValue | null>(null);\n\nconst useTabsContext = (): TabsContextValue => {\n  const ctx = useContext(TabsContext);\n  if (!ctx) throw new Error('Tab/TabPanel must be used inside <Tabs>');\n  return ctx;\n};\n\n// ============================================================================\n// TAB - individual tab trigger button\n// Defined before Tabs so Tabs can use `child.type === Tab` for child separation.\n// ============================================================================\n\nexport const Tab: React.FC<TabProps> = ({\n  value,\n  children,\n  disabled = false,\n  icon,\n  className = '',\n}) => {\n  const { activeValue, onSelect, size, fullWidth, listRef } = useTabsContext();\n  const isActive = activeValue === value;\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLButtonElement>) => {\n    const list = listRef.current;\n    if (!list) return;\n\n    const allTabs = Array.from(\n      list.querySelectorAll('[role=\"tab\"]:not([disabled])'),\n    ) as HTMLElement[];\n    const currentIndex = allTabs.indexOf(e.currentTarget);\n    if (currentIndex === -1) return;\n\n    let targetIndex = -1;\n    if (e.key === 'ArrowRight') targetIndex = (currentIndex + 1) % allTabs.length;\n    else if (e.key === 'ArrowLeft')\n      targetIndex = (currentIndex - 1 + allTabs.length) % allTabs.length;\n    else if (e.key === 'Home') targetIndex = 0;\n    else if (e.key === 'End') targetIndex = allTabs.length - 1;\n\n    if (targetIndex !== -1) {\n      e.preventDefault();\n      allTabs[targetIndex].focus();\n    }\n  };\n\n  const tabClasses = [\n    'eidos-tab',\n    `eidos-tab--${size}`,\n    isActive && 'eidos-tab--active',\n    disabled && 'eidos-tab--disabled',\n    fullWidth && 'eidos-tab--fullWidth',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <button\n      id={`eidos-tab-${value}`}\n      role=\"tab\"\n      aria-selected={isActive}\n      aria-controls={`eidos-tabpanel-${value}`}\n      tabIndex={isActive ? 0 : -1}\n      disabled={disabled}\n      className={tabClasses}\n      onClick={() => !disabled && onSelect(value)}\n      onKeyDown={handleKeyDown}\n      type=\"button\"\n    >\n      {icon && <span className=\"eidos-tab-icon\">{renderIcon(icon, 'eidos-tab-icon-svg')}</span>}\n      <span className=\"eidos-tab-label\">{children}</span>\n    </button>\n  );\n};\n\nTab.displayName = 'Tab';\n\n// ============================================================================\n// TAB PANEL - content region shown when its value matches the active tab\n// Defined before Tabs for the same `child.type === TabPanel` check.\n// ============================================================================\n\nexport const TabPanel: React.FC<TabPanelProps> = ({ value, children, className = '' }) => {\n  const { activeValue } = useTabsContext();\n  const isActive = activeValue === value;\n\n  if (!isActive) return null;\n\n  return (\n    <div\n      id={`eidos-tabpanel-${value}`}\n      role=\"tabpanel\"\n      aria-labelledby={`eidos-tab-${value}`}\n      tabIndex={0}\n      className={['eidos-tab-panel', className].filter(Boolean).join(' ')}\n    >\n      {children}\n    </div>\n  );\n};\n\nTabPanel.displayName = 'TabPanel';\n\n// ============================================================================\n// TABS - root container; provides context, separates tab/panel children\n// ============================================================================\n\nexport const Tabs: React.FC<TabsProps> = ({\n  value,\n  defaultValue,\n  onChange,\n  variant = 'line',\n  size = 'md',\n  color = 'primary',\n  fullWidth = false,\n  scrollButtons = 'auto',\n  className = '',\n  children,\n}) => {\n  const isControlled = value !== undefined;\n  const [localValue, setLocalValue] = useState(defaultValue ?? '');\n  const activeValue = isControlled ? value! : localValue;\n\n  // Separate Tab and TabPanel children so the list and panels render in\n  // distinct DOM regions, regardless of how the consumer orders them.\n  const tabChildren: React.ReactElement[] = [];\n  const panelChildren: React.ReactElement[] = [];\n\n  React.Children.forEach(children, (child) => {\n    if (!React.isValidElement(child)) return;\n    if (child.type === Tab) {\n      tabChildren.push(child);\n    } else if (child.type === TabPanel) {\n      panelChildren.push(child);\n    }\n  });\n\n  const listRef = useRef<HTMLDivElement>(null);\n  const indicatorRef = useRef<HTMLSpanElement>(null);\n  // Tracks whether the indicator has been positioned at least once so we can\n  // skip the CSS transition on the very first render and avoid it animating\n  // from the top-left corner to the initial tab.\n  const hasPositioned = useRef(false);\n\n  useLayoutEffect(() => {\n    if (variant !== 'line') return;\n    const list = listRef.current;\n    const indicator = indicatorRef.current;\n    if (!list || !indicator) return;\n\n    const activeTab = list.querySelector('[aria-selected=\"true\"]') as HTMLElement | null;\n    if (!activeTab) return;\n\n    // Suppress the CSS transition on the initial paint so the indicator snaps\n    // into place rather than sliding from 0.\n    if (!hasPositioned.current) {\n      indicator.style.transition = 'none';\n    }\n\n    indicator.style.left = `${activeTab.offsetLeft}px`;\n    indicator.style.width = `${activeTab.offsetWidth}px`;\n\n    if (!hasPositioned.current) {\n      // Force a synchronous reflow so the browser commits the no-transition\n      // position before we re-enable the transition for future clicks.\n      void indicator.offsetWidth;\n      indicator.style.transition = '';\n      hasPositioned.current = true;\n    }\n  }, [activeValue, variant, fullWidth]);\n\n  // The list scrolls horizontally when the strip is wider than its container,\n  // so an activated tab can sit outside the scrollport - reachable by keyboard\n  // (`End`) or by a controlled `value` change, but invisible. `scrollLeft` is\n  // adjusted directly rather than via `scrollIntoView`, which walks the whole\n  // ancestor chain and would scroll the page vertically when the strip is below\n  // the fold.\n  useLayoutEffect(() => {\n    const list = listRef.current;\n    if (!list) return;\n\n    const activeTab = list.querySelector('[aria-selected=\"true\"]') as HTMLElement | null;\n    if (!activeTab) return;\n\n    const left = activeTab.offsetLeft;\n    const right = left + activeTab.offsetWidth;\n\n    if (left < list.scrollLeft) {\n      list.scrollLeft = left;\n    } else if (right > list.scrollLeft + list.clientWidth) {\n      list.scrollLeft = right - list.clientWidth;\n    }\n  }, [activeValue]);\n\n  // Whether either end of the strip has content hidden past it. Drives both\n  // the presence of the scroll buttons (neither end scrollable = the strip\n  // fits, so no buttons) and their disabled state at the extremes.\n  const [scrollState, setScrollState] = useState({ canScrollPrev: false, canScrollNext: false });\n  const hasScrollButtons = scrollButtons !== 'none';\n\n  useEffect(() => {\n    if (!hasScrollButtons) return;\n    const list = listRef.current;\n    if (!list) return;\n\n    const update = () => {\n      const maxScroll = list.scrollWidth - list.clientWidth;\n      // 1px of tolerance: fractional layout widths leave a sub-pixel remainder\n      // at either end that would otherwise keep a button enabled for a scroll\n      // that can no longer move anything.\n      const canScrollPrev = list.scrollLeft > 1;\n      const canScrollNext = list.scrollLeft < maxScroll - 1;\n      setScrollState((previous) =>\n        previous.canScrollPrev === canScrollPrev && previous.canScrollNext === canScrollNext\n          ? previous\n          : { canScrollPrev, canScrollNext },\n      );\n    };\n\n    update();\n    list.addEventListener('scroll', update, { passive: true });\n\n    // The list's own box stays the same width when a tab's label reflows or a\n    // font finishes loading, so the tabs have to be observed as well as the\n    // container - only their sizes tell us the strip started overflowing.\n    const observer = new ResizeObserver(update);\n    observer.observe(list);\n    Array.from(list.children).forEach((child) => observer.observe(child));\n\n    return () => {\n      list.removeEventListener('scroll', update);\n      observer.disconnect();\n    };\n  }, [hasScrollButtons, tabChildren.length, size, variant, fullWidth]);\n\n  const scrollByStep = (direction: -1 | 1) => {\n    const list = listRef.current;\n    if (!list) return;\n\n    // A step just short of a full page keeps a tab of context on screen, the\n    // same way a paged scrollbar click does.\n    const step = list.clientWidth * 0.8;\n    const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n    list.scrollBy({ left: direction * step, behavior: reducedMotion ? 'auto' : 'smooth' });\n  };\n\n  const onSelect = (newValue: string) => {\n    if (!isControlled) {\n      setLocalValue(newValue);\n    }\n    onChange?.(newValue);\n  };\n\n  const rootClasses = ['eidos-tabs', `eidos-tabs--${variant}`, `eidos-tabs--${color}`, className]\n    .filter(Boolean)\n    .join(' ');\n\n  const listClasses = [\n    'eidos-tabs-list',\n    `eidos-tabs-list--${size}`,\n    fullWidth && 'eidos-tabs-list--fullWidth',\n    // With buttons, they are the affordance - a native scrollbar underneath\n    // them is redundant, and on a space-taking one it would also sit over the\n    // `line` variant's rule.\n    hasScrollButtons && 'eidos-tabs-list--hideScrollbar',\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  // Each button exists only while its own direction has somewhere to go: none\n  // at all when the strip fits, and none at the end you have reached. A\n  // disabled button would be pointing at nothing. They are positioned\n  // absolutely, so appearing and disappearing never moves the tabs.\n  const showPrevButton = hasScrollButtons && scrollState.canScrollPrev;\n  const showNextButton = hasScrollButtons && scrollState.canScrollNext;\n\n  const scrollButtonClasses = (direction: 'prev' | 'next') =>\n    [\n      'eidos-tabs-scroll-button',\n      `eidos-tabs-scroll-button--${direction}`,\n      `eidos-tabs-scroll-button--${size}`,\n    ].join(' ');\n\n  const contextValue: TabsContextValue = {\n    activeValue,\n    onSelect,\n    variant,\n    size,\n    color,\n    fullWidth,\n    listRef,\n  };\n\n  return (\n    <TabsContext.Provider value={contextValue}>\n      <div className={rootClasses}>\n        {/* The buttons are siblings of the tab list, never children of it:\n            `role=\"tablist\"` only accepts tabs. They are also hidden from\n            assistive tech and skipped by Tab, because they are a pointer\n            affordance for something the keyboard already does - arrow keys\n            move between tabs and scroll the active one into view. */}\n        <div className=\"eidos-tabs-bar\">\n          {showPrevButton && (\n            <button\n              type=\"button\"\n              className={scrollButtonClasses('prev')}\n              onClick={() => scrollByStep(-1)}\n              tabIndex={-1}\n              aria-hidden=\"true\"\n            >\n              <ChevronLeft className=\"eidos-tabs-scroll-button-icon\" />\n            </button>\n          )}\n\n          <div ref={listRef} className={listClasses} role=\"tablist\">\n            {tabChildren}\n            {variant === 'line' && (\n              <span ref={indicatorRef} className=\"eidos-tabs-indicator\" aria-hidden=\"true\" />\n            )}\n          </div>\n\n          {showNextButton && (\n            <button\n              type=\"button\"\n              className={scrollButtonClasses('next')}\n              onClick={() => scrollByStep(1)}\n              tabIndex={-1}\n              aria-hidden=\"true\"\n            >\n              <ChevronRight className=\"eidos-tabs-scroll-button-icon\" />\n            </button>\n          )}\n        </div>\n\n        <div className=\"eidos-tabs-panels\">{panelChildren}</div>\n      </div>\n    </TabsContext.Provider>\n  );\n};\n\nTabs.displayName = 'Tabs';\n"]}

package/dist/index.cjs

@@ -8,7 +8,7 @@ var _chunk6A2ZKVSTcjs = require('./chunk-6A2ZKVST.cjs');
 
 
 
-var _chunkVHQTDITVcjs = require('./chunk-VHQTDITV.cjs');
+var _chunkKQD7CQ4Zcjs = require('./chunk-KQD7CQ4Z.cjs');
 
 
 var _chunk442U3W6Rcjs = require('./chunk-442U3W6R.cjs');
@@ -291,5 +291,5 @@ require('./chunk-DZUJEN5N.cjs');
 
 
 
-exports.Accordion = _chunkSDEKANNLcjs.Accordion; exports.AccordionItem = _chunkSDEKANNLcjs.AccordionItem; exports.Alert = _chunkB5G5XVFJcjs.Alert; exports.Avatar = _chunkQ3GNKF74cjs.Avatar; exports.AvatarGroup = _chunkQ3GNKF74cjs.AvatarGroup; exports.Badge = _chunk3ETWFS2Ncjs.Badge; exports.Breadcrumb = _chunk5O73AALPcjs.Breadcrumb; exports.Button = _chunkAPK5OQRVcjs.Button; exports.ButtonGroup = _chunk2ROKOO22cjs.ButtonGroup; exports.Calendar = _chunk6HUHH6Y4cjs.Calendar; exports.Card = _chunkV5RS3JZNcjs.Card; exports.Checkbox = _chunkIJ4DXG7Dcjs.Checkbox; exports.Chip = _chunkTRLBYA5Gcjs.Chip; exports.ColorPicker = _chunk5BX4Q76Dcjs.ColorPicker; exports.Combobox = _chunkWUBQJVB7cjs.Combobox; exports.CommandPalette = _chunk3EPND5M2cjs.CommandPalette; exports.ContextMenu = _chunkLFWPQYWXcjs.ContextMenu; exports.DataGrid = _chunkSKTDGCWJcjs.DataGrid; exports.DatePicker = _chunk6HUHH6Y4cjs.DatePicker; exports.Divider = _chunk366R4GKRcjs.Divider; exports.Drawer = _chunkLUL6RZ4Mcjs.Drawer; exports.Dropdown = _chunkFRUOA2QUcjs.Dropdown; exports.DropdownProvider = _chunkFRUOA2QUcjs.DropdownProvider; exports.EmptyState = _chunkKV3V2CPHcjs.EmptyState; exports.FONT_ACCEPT = _chunkU5FHQ73Ucjs.FONT_ACCEPT; exports.FileUpload = _chunk3CXULV4Gcjs.FileUpload; exports.Footer = _chunkPTBBY4ZXcjs.Footer; exports.Header = _chunkZ4SLV6WGcjs.Header; exports.IconButton = _chunkAPK5OQRVcjs.IconButton; exports.InlineEdit = _chunkN2IGZIEXcjs.InlineEdit; exports.Input = _chunk5VM2256Wcjs.Input; exports.Kbd = _chunkKVIL4EP4cjs.Kbd; exports.Menu = _chunkDAXZRNNOcjs.Menu; exports.MenuPanel = _chunkDAXZRNNOcjs.MenuPanel; exports.Modal = _chunkD5IY2HUVcjs.Modal; exports.Navigation = _chunkGT22EGJPcjs.Navigation; exports.NumberInput = _chunkQF2RAUPBcjs.NumberInput; exports.OTPInput = _chunkFKXKBJUIcjs.OTPInput; exports.PageLayout = _chunkG77YR73Rcjs.PageLayout; exports.Pagination = _chunkAXBYJ2OYcjs.Pagination; exports.Pill = _chunkEQ6BNPTLcjs.Pill; exports.Popover = _chunk3E7TKBQIcjs.Popover; exports.Progress = _chunkV2S6XWIQcjs.Progress; exports.Radio = _chunkQQIALSTXcjs.Radio; exports.RadioGroup = _chunkQQIALSTXcjs.RadioGroup; exports.SegmentedControl = _chunkAAA6TR5Icjs.SegmentedControl; exports.Select = _chunkKJZUYC4Xcjs.Select; exports.Skeleton = _chunkIYWAZEFIcjs.Skeleton; exports.Slider = _chunkOZZHOEN5cjs.Slider; exports.SnackbarContainer = _chunkEZME5CLKcjs.SnackbarContainer; exports.SnackbarProvider = _chunkEZME5CLKcjs.SnackbarProvider; exports.Spinner = _chunkTROYIUDHcjs.Spinner; exports.SplitButton = _chunkSKEWTQJ7cjs.SplitButton; exports.Stepper = _chunkHFZ5FKRGcjs.Stepper; exports.Switch = _chunkIXZMKIV5cjs.Switch; exports.Tab = _chunkVHQTDITVcjs.Tab; exports.TabPanel = _chunkVHQTDITVcjs.TabPanel; exports.Table = _chunkGGSII6Y2cjs.Table; exports.TableFiltersDropdown = _chunkLIFUHQH5cjs.TableFiltersDropdown; exports.Tabs = _chunkVHQTDITVcjs.Tabs; exports.TagInput = _chunk442U3W6Rcjs.TagInput; exports.Textarea = _chunkRHOT7AEIcjs.Textarea; exports.ThemeEditor = _chunkSE7MWOC7cjs.ThemeEditor; exports.ThemeProvider = _chunkU5FHQ73Ucjs.ThemeProvider; exports.TimeInput = _chunk6HUHH6Y4cjs.TimeInput; exports.Timeline = _chunkZMDZGL5Acjs.Timeline; exports.Toolbar = _chunkGR2PMCVNcjs.Toolbar; exports.Tooltip = _chunkZ5U4NJTWcjs.Tooltip; exports.TreeView = _chunkXKQMEVODcjs.TreeView; exports.VirtualList = _chunk6A2ZKVSTcjs.VirtualList; exports.defaultTheme = _chunkU5FHQ73Ucjs.defaultTheme; exports.familyNameFromFile = _chunkU5FHQ73Ucjs.familyNameFromFile; exports.isFontAvailable = _chunkU5FHQ73Ucjs.isFontAvailable; exports.isFontStackAvailable = _chunkU5FHQ73Ucjs.isFontStackAvailable; exports.registerFontFace = _chunkU5FHQ73Ucjs.registerFontFace; exports.registerFontFile = _chunkU5FHQ73Ucjs.registerFontFile; exports.renderIcon = _chunkGEHL4LKKcjs.renderIcon; exports.toFontStack = _chunkU5FHQ73Ucjs.toFontStack; exports.useDropdownContext = _chunkFRUOA2QUcjs.useDropdownContext; exports.useSnackbar = _chunkEZME5CLKcjs.useSnackbar; exports.useSnackbarContext = _chunkEZME5CLKcjs.useSnackbarContext; exports.useTheme = _chunkU5FHQ73Ucjs.useTheme;
+exports.Accordion = _chunkSDEKANNLcjs.Accordion; exports.AccordionItem = _chunkSDEKANNLcjs.AccordionItem; exports.Alert = _chunkB5G5XVFJcjs.Alert; exports.Avatar = _chunkQ3GNKF74cjs.Avatar; exports.AvatarGroup = _chunkQ3GNKF74cjs.AvatarGroup; exports.Badge = _chunk3ETWFS2Ncjs.Badge; exports.Breadcrumb = _chunk5O73AALPcjs.Breadcrumb; exports.Button = _chunkAPK5OQRVcjs.Button; exports.ButtonGroup = _chunk2ROKOO22cjs.ButtonGroup; exports.Calendar = _chunk6HUHH6Y4cjs.Calendar; exports.Card = _chunkV5RS3JZNcjs.Card; exports.Checkbox = _chunkIJ4DXG7Dcjs.Checkbox; exports.Chip = _chunkTRLBYA5Gcjs.Chip; exports.ColorPicker = _chunk5BX4Q76Dcjs.ColorPicker; exports.Combobox = _chunkWUBQJVB7cjs.Combobox; exports.CommandPalette = _chunk3EPND5M2cjs.CommandPalette; exports.ContextMenu = _chunkLFWPQYWXcjs.ContextMenu; exports.DataGrid = _chunkSKTDGCWJcjs.DataGrid; exports.DatePicker = _chunk6HUHH6Y4cjs.DatePicker; exports.Divider = _chunk366R4GKRcjs.Divider; exports.Drawer = _chunkLUL6RZ4Mcjs.Drawer; exports.Dropdown = _chunkFRUOA2QUcjs.Dropdown; exports.DropdownProvider = _chunkFRUOA2QUcjs.DropdownProvider; exports.EmptyState = _chunkKV3V2CPHcjs.EmptyState; exports.FONT_ACCEPT = _chunkU5FHQ73Ucjs.FONT_ACCEPT; exports.FileUpload = _chunk3CXULV4Gcjs.FileUpload; exports.Footer = _chunkPTBBY4ZXcjs.Footer; exports.Header = _chunkZ4SLV6WGcjs.Header; exports.IconButton = _chunkAPK5OQRVcjs.IconButton; exports.InlineEdit = _chunkN2IGZIEXcjs.InlineEdit; exports.Input = _chunk5VM2256Wcjs.Input; exports.Kbd = _chunkKVIL4EP4cjs.Kbd; exports.Menu = _chunkDAXZRNNOcjs.Menu; exports.MenuPanel = _chunkDAXZRNNOcjs.MenuPanel; exports.Modal = _chunkD5IY2HUVcjs.Modal; exports.Navigation = _chunkGT22EGJPcjs.Navigation; exports.NumberInput = _chunkQF2RAUPBcjs.NumberInput; exports.OTPInput = _chunkFKXKBJUIcjs.OTPInput; exports.PageLayout = _chunkG77YR73Rcjs.PageLayout; exports.Pagination = _chunkAXBYJ2OYcjs.Pagination; exports.Pill = _chunkEQ6BNPTLcjs.Pill; exports.Popover = _chunk3E7TKBQIcjs.Popover; exports.Progress = _chunkV2S6XWIQcjs.Progress; exports.Radio = _chunkQQIALSTXcjs.Radio; exports.RadioGroup = _chunkQQIALSTXcjs.RadioGroup; exports.SegmentedControl = _chunkAAA6TR5Icjs.SegmentedControl; exports.Select = _chunkKJZUYC4Xcjs.Select; exports.Skeleton = _chunkIYWAZEFIcjs.Skeleton; exports.Slider = _chunkOZZHOEN5cjs.Slider; exports.SnackbarContainer = _chunkEZME5CLKcjs.SnackbarContainer; exports.SnackbarProvider = _chunkEZME5CLKcjs.SnackbarProvider; exports.Spinner = _chunkTROYIUDHcjs.Spinner; exports.SplitButton = _chunkSKEWTQJ7cjs.SplitButton; exports.Stepper = _chunkHFZ5FKRGcjs.Stepper; exports.Switch = _chunkIXZMKIV5cjs.Switch; exports.Tab = _chunkKQD7CQ4Zcjs.Tab; exports.TabPanel = _chunkKQD7CQ4Zcjs.TabPanel; exports.Table = _chunkGGSII6Y2cjs.Table; exports.TableFiltersDropdown = _chunkLIFUHQH5cjs.TableFiltersDropdown; exports.Tabs = _chunkKQD7CQ4Zcjs.Tabs; exports.TagInput = _chunk442U3W6Rcjs.TagInput; exports.Textarea = _chunkRHOT7AEIcjs.Textarea; exports.ThemeEditor = _chunkSE7MWOC7cjs.ThemeEditor; exports.ThemeProvider = _chunkU5FHQ73Ucjs.ThemeProvider; exports.TimeInput = _chunk6HUHH6Y4cjs.TimeInput; exports.Timeline = _chunkZMDZGL5Acjs.Timeline; exports.Toolbar = _chunkGR2PMCVNcjs.Toolbar; exports.Tooltip = _chunkZ5U4NJTWcjs.Tooltip; exports.TreeView = _chunkXKQMEVODcjs.TreeView; exports.VirtualList = _chunk6A2ZKVSTcjs.VirtualList; exports.defaultTheme = _chunkU5FHQ73Ucjs.defaultTheme; exports.familyNameFromFile = _chunkU5FHQ73Ucjs.familyNameFromFile; exports.isFontAvailable = _chunkU5FHQ73Ucjs.isFontAvailable; exports.isFontStackAvailable = _chunkU5FHQ73Ucjs.isFontStackAvailable; exports.registerFontFace = _chunkU5FHQ73Ucjs.registerFontFace; exports.registerFontFile = _chunkU5FHQ73Ucjs.registerFontFile; exports.renderIcon = _chunkGEHL4LKKcjs.renderIcon; exports.toFontStack = _chunkU5FHQ73Ucjs.toFontStack; exports.useDropdownContext = _chunkFRUOA2QUcjs.useDropdownContext; exports.useSnackbar = _chunkEZME5CLKcjs.useSnackbar; exports.useSnackbarContext = _chunkEZME5CLKcjs.useSnackbarContext; exports.useTheme = _chunkU5FHQ73Ucjs.useTheme;
 //# sourceMappingURL=index.cjs.map

package/dist/index.css

@@ -113,6 +113,8 @@
   --navigation-collapsed-width: 64px;
   --footer-height: 60px;
   --badge-offset: 0.3em;
+  --scrollbar-size: 10px;
+  --scrollbar-thumb: var(--primary-color);
   --z-index-drawer: 1200;
   --z-index-modal: 1300;
   --z-index-dropdown: 1400;
@@ -134,6 +136,11 @@
 
 html,
 body {
+  /* `100%`, not `100vh`: on mobile `100vh` resolves against the *large*
+     viewport, so a full-height app shell ends up taller than what is actually
+     visible and its bottom chrome hides behind the browser UI. `height: 100%`
+     on `html` already resolves against the viewport, and on `body` against
+     `html`, so this is the same thing on desktop without that bug. */
   height: 100%;
   font-family: var(--font-family-primary);
   -webkit-font-smoothing: antialiased;
@@ -141,7 +148,6 @@ body {
   font-feature-settings: "cv02", "cv03", "cv04", "cv11";
   font-size: 14px;
   line-height: 1.4;
-  margin-bottom: var(--spacing-sm);
   color: var(--dark-color);
 }
 
@@ -224,6 +230,44 @@ svg.lucide {
   height: 1em;
 }
 
+/* Scrollbars, WebKit/Blink (Chrome, Brave, Edge, Safari).
+   Both dimensions are needed: `width` is the thickness of a *vertical* bar
+   only, so setting it alone left every horizontal scroller (`pre`, the
+   Table/DataGrid wrappers, Tabs' strip) at the OS default thickness.
+   Overridable through the `--scrollbar-*` tokens - see `variables.scss`. */
+*::-webkit-scrollbar {
+  width: var(--scrollbar-size);
+  height: var(--scrollbar-size);
+}
+
+*::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+*::-webkit-scrollbar-thumb {
+  background-color: var(--scrollbar-thumb);
+  /* A scrollbar thumb takes no `padding`, so a transparent border plus
+     `background-clip: padding-box` is what insets the visible bar from the
+     track - the clip does nothing on its own. The thumb still hit-tests over
+     its whole border box, so this keeps a slim look without shrinking the
+     target to something un-grabbable. */
+  border: 3px solid transparent;
+  background-clip: padding-box;
+  border-radius: var(--scrollbar-size);
+}
+
+/* Firefox, which supports neither the pseudo-elements above nor an inset
+   thumb - `scrollbar-width`/`scrollbar-color` is its ceiling. Gated behind a
+   Firefox-only `@supports` test on purpose: the standard properties take
+   precedence over the pseudo-elements wherever both are supported, so
+   applying them unconditionally would replace the styling above in Chromium
+   with this coarser version. */
+@supports (scrollbar-width: auto) and (-moz-appearance: none) {
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: var(--scrollbar-thumb) transparent;
+  }
+}
 .eidos-accordion {
   display: flex;
   flex-direction: column;
@@ -1307,6 +1351,7 @@ svg.lucide {
   align-items: center;
   cursor: pointer;
   width: fit-content;
+  position: relative;
 }
 .eidos-checkbox-wrapper--disabled {
   cursor: not-allowed;
@@ -5073,6 +5118,7 @@ kbd.eidos-cmd-kbd {
   display: inline-flex;
   flex-direction: column;
   gap: var(--spacing-xs);
+  position: relative;
 }
 .eidos-number-input--fullWidth {
   width: 100%;
@@ -5698,6 +5744,7 @@ kbd.eidos-cmd-kbd {
   align-items: center;
   cursor: pointer;
   width: fit-content;
+  position: relative;
 }
 .eidos-radio-wrapper--disabled {
   cursor: not-allowed;
@@ -6903,6 +6950,7 @@ kbd.eidos-cmd-kbd {
   align-items: center;
   gap: var(--spacing-sm);
   cursor: pointer;
+  position: relative;
 }
 .eidos-switch-wrapper--disabled {
   cursor: not-allowed;
@@ -7804,13 +7852,21 @@ kbd.eidos-cmd-kbd {
   flex-direction: column;
 }
 .eidos-tabs--line .eidos-tabs-list {
-  border-bottom: 2px solid var(--gray-200);
+  padding-bottom: 2px;
+  box-shadow: inset 0 -2px 0 var(--gray-200);
   position: relative;
   gap: 0;
 }
 .eidos-tabs--line .eidos-tab {
   border-radius: 0;
 }
+.eidos-tabs--enclosed .eidos-tabs-bar {
+  background: var(--gray-100);
+  border-radius: var(--border-radius-md);
+}
+.eidos-tabs--enclosed .eidos-tabs-scroll-button:hover {
+  background: var(--gray-200);
+}
 .eidos-tabs--enclosed .eidos-tabs-list {
   background: var(--gray-100);
   border-radius: var(--border-radius-md);
@@ -7828,6 +7884,9 @@ kbd.eidos-cmd-kbd {
   gap: var(--spacing-xs);
 }
 .eidos-tabs--pills .eidos-tab {
+  height: auto;
+  padding-block: var(--spacing-sm);
+  min-height: 24px;
   border-radius: 9999px;
 }
 .eidos-tabs--pills .eidos-tab--active {
@@ -7835,15 +7894,89 @@ kbd.eidos-cmd-kbd {
   color: var(--primary-contrast);
 }
 
+.eidos-tabs-bar {
+  display: flex;
+  align-items: stretch;
+  min-width: 0;
+  position: relative;
+}
+
+.eidos-tabs-scroll-button {
+  background: none;
+  border: none;
+  padding: 0;
+  margin: 0;
+  font: inherit;
+  cursor: pointer;
+}
+.eidos-tabs-scroll-button:focus {
+  outline: none;
+}
+.eidos-tabs-scroll-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 1;
+  padding: var(--spacing-sm);
+  background: rgb(var(--white-rgb), 0.9);
+  border: 1px solid var(--gray-200);
+  border-radius: var(--border-radius-sm);
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
+  color: var(--gray-500);
+  transition: color 0.2s ease, background-color 0.2s ease;
+}
+.eidos-tabs-scroll-button--prev {
+  left: 0;
+}
+.eidos-tabs-scroll-button--next {
+  right: 0;
+}
+.eidos-tabs-scroll-button:hover {
+  color: var(--gray-700);
+  background: var(--gray-100);
+}
+.eidos-tabs-scroll-button--sm {
+  font-size: var(--font-size-xs);
+}
+.eidos-tabs-scroll-button--md {
+  font-size: var(--font-size-sm);
+}
+.eidos-tabs-scroll-button--lg {
+  font-size: var(--font-size-base);
+}
+
+.eidos-tabs-scroll-button-icon {
+  width: 1.25em;
+  height: 1.25em;
+}
+
 .eidos-tabs-list {
   display: flex;
   align-items: center;
   overflow-x: auto;
   min-width: 0;
 }
+.eidos-tabs-list--sm {
+  height: var(--component-size-sm);
+}
+.eidos-tabs-list--md {
+  height: var(--component-size-md);
+}
+.eidos-tabs-list--lg {
+  height: var(--component-size-lg);
+}
 .eidos-tabs-list--fullWidth .eidos-tab {
   flex: 1;
 }
+.eidos-tabs-list--hideScrollbar {
+  scrollbar-width: none;
+}
+.eidos-tabs-list--hideScrollbar::-webkit-scrollbar {
+  display: none;
+}
 
 .eidos-tab {
   background: none;
@@ -7864,24 +7997,22 @@ kbd.eidos-cmd-kbd {
   white-space: nowrap;
   color: var(--gray-500);
   font-weight: var(--font-weight-medium);
+  line-height: 1;
   transition: all 0.2s ease;
   border-radius: 0;
-  will-change: transform;
+  height: 100%;
 }
 .eidos-tab--sm {
   font-size: var(--font-size-xs);
-  padding: var(--spacing-xs) var(--spacing-sm);
-  height: var(--component-size-sm);
+  padding-inline: var(--spacing-sm);
 }
 .eidos-tab--md {
   font-size: var(--font-size-sm);
-  padding: var(--spacing-xs) var(--spacing-md);
-  height: var(--component-size-md);
+  padding-inline: var(--spacing-md);
 }
 .eidos-tab--lg {
   font-size: var(--font-size-base);
-  padding: var(--spacing-sm) var(--spacing-md);
-  height: var(--component-size-lg);
+  padding-inline: var(--spacing-md);
 }
 .eidos-tab:hover:not(.eidos-tab--disabled):not(.eidos-tab--active) {
   color: var(--gray-700);
@@ -7912,7 +8043,7 @@ kbd.eidos-cmd-kbd {
   color: var(--primary-contrast);
 }
 .eidos-tabs--primary .eidos-tab:focus-visible {
-  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.3);
+  box-shadow: inset 0 0 0 2px rgba(var(--primary-rgb), 0.5);
 }
 
 .eidos-tabs--secondary .eidos-tab--active {
@@ -7926,7 +8057,7 @@ kbd.eidos-cmd-kbd {
   color: var(--secondary-contrast);
 }
 .eidos-tabs--secondary .eidos-tab:focus-visible {
-  box-shadow: 0 0 0 3px rgba(var(--secondary-rgb), 0.3);
+  box-shadow: inset 0 0 0 2px rgba(var(--secondary-rgb), 0.5);
 }
 
 .eidos-tabs--success .eidos-tab--active {
@@ -7940,7 +8071,7 @@ kbd.eidos-cmd-kbd {
   color: var(--success-contrast);
 }
 .eidos-tabs--success .eidos-tab:focus-visible {
-  box-shadow: 0 0 0 3px rgba(var(--success-rgb), 0.3);
+  box-shadow: inset 0 0 0 2px rgba(var(--success-rgb), 0.5);
 }
 
 .eidos-tabs--danger .eidos-tab--active {
@@ -7954,7 +8085,7 @@ kbd.eidos-cmd-kbd {
   color: var(--danger-contrast);
 }
 .eidos-tabs--danger .eidos-tab:focus-visible {
-  box-shadow: 0 0 0 3px rgba(var(--danger-rgb), 0.3);
+  box-shadow: inset 0 0 0 2px rgba(var(--danger-rgb), 0.5);
 }
 
 .eidos-tabs--warning .eidos-tab--active {
@@ -7968,7 +8099,7 @@ kbd.eidos-cmd-kbd {
   color: var(--warning-contrast);
 }
 .eidos-tabs--warning .eidos-tab:focus-visible {
-  box-shadow: 0 0 0 3px rgba(var(--warning-rgb), 0.3);
+  box-shadow: inset 0 0 0 2px rgba(var(--warning-rgb), 0.5);
 }
 
 .eidos-tabs--info .eidos-tab--active {
@@ -7982,12 +8113,16 @@ kbd.eidos-cmd-kbd {
   color: var(--info-contrast);
 }
 .eidos-tabs--info .eidos-tab:focus-visible {
-  box-shadow: 0 0 0 3px rgba(var(--info-rgb), 0.3);
+  box-shadow: inset 0 0 0 2px rgba(var(--info-rgb), 0.5);
+}
+
+.eidos-tabs--pills .eidos-tab--active:focus-visible {
+  box-shadow: inset 0 0 0 2px currentColor;
 }
 
 .eidos-tabs-indicator {
   position: absolute;
-  bottom: -2px;
+  bottom: 0;
   left: 0;
   width: 0;
   height: 2px;
@@ -8611,6 +8746,7 @@ kbd.eidos-cmd-kbd {
   align-items: center;
   gap: var(--spacing-xs);
   flex: 0 0 auto;
+  position: relative;
   margin-left: auto;
 }
 .eidos-theme-editor-row--wide > .eidos-theme-editor-row__control {
@@ -9048,16 +9184,18 @@ kbd.eidos-cmd-kbd {
 }
 .eidos-pagelayout__content {
   grid-area: content;
-  display: grid;
-  grid-template-rows: minmax(50px, auto) 1fr auto;
+  display: flex;
+  flex-direction: column;
   background-color: var(--gray-50);
   min-height: 0;
   min-width: 0;
+  overflow: auto;
+}
+.eidos-pagelayout__header, .eidos-pagelayout__footer {
+  flex: 0 0 auto;
 }
 .eidos-pagelayout__body {
-  overflow: auto;
-  min-height: 0;
-  min-width: 0;
+  flex: 1 0 auto;
 }
 .eidos-pagelayout__footer.eidos-footer--copyright {
   padding: var(--spacing-md) var(--spacing-xl);

package/dist/index.js

@@ -8,7 +8,7 @@ import {
   Tab,
   TabPanel,
   Tabs
-} from "./chunk-RAZRQ57B.js";
+} from "./chunk-74MBKLYI.js";
 import {
   TagInput
 } from "./chunk-R4PU2TBM.js";

package/dist/tabs/index.cjs

@@ -2,12 +2,12 @@
 
 
 
-var _chunkVHQTDITVcjs = require('../chunk-VHQTDITV.cjs');
+var _chunkKQD7CQ4Zcjs = require('../chunk-KQD7CQ4Z.cjs');
 require('../chunk-GEHL4LKK.cjs');
 require('../chunk-DZUJEN5N.cjs');
 
 
 
 
-exports.Tab = _chunkVHQTDITVcjs.Tab; exports.TabPanel = _chunkVHQTDITVcjs.TabPanel; exports.Tabs = _chunkVHQTDITVcjs.Tabs;
+exports.Tab = _chunkKQD7CQ4Zcjs.Tab; exports.TabPanel = _chunkKQD7CQ4Zcjs.TabPanel; exports.Tabs = _chunkKQD7CQ4Zcjs.Tabs;
 //# sourceMappingURL=index.cjs.map

package/dist/tabs/index.d.cts

@@ -3,6 +3,16 @@ import { I as IconType } from '../renderIcon-C2lEMMzb.cjs';
 import { C as ComponentSizeProps } from '../sizes-DM6Rrrgq.cjs';
 
 type TabsColorProps = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';
+/**
+ * How an overflowing tab strip is scrolled.
+ *
+ * - `auto` - previous/next buttons appear only while the strip overflows, and
+ *   the native scrollbar is hidden because the buttons are the affordance.
+ * - `none` - no buttons; the strip keeps its native scrollbar.
+ *
+ * Native scrolling (touch swipe, trackpad, shift+wheel) works either way.
+ */
+type TabsScrollButtonsProps = 'auto' | 'none';
 interface TabsProps {
     value?: string;
     defaultValue?: string;
@@ -11,6 +21,7 @@ interface TabsProps {
     size?: ComponentSizeProps;
     color?: TabsColorProps;
     fullWidth?: boolean;
+    scrollButtons?: TabsScrollButtonsProps;
     className?: string;
     children: React__default.ReactNode;
 }

package/dist/tabs/index.d.ts

@@ -3,6 +3,16 @@ import { I as IconType } from '../renderIcon-C2lEMMzb.js';
 import { C as ComponentSizeProps } from '../sizes-DM6Rrrgq.js';
 
 type TabsColorProps = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';
+/**
+ * How an overflowing tab strip is scrolled.
+ *
+ * - `auto` - previous/next buttons appear only while the strip overflows, and
+ *   the native scrollbar is hidden because the buttons are the affordance.
+ * - `none` - no buttons; the strip keeps its native scrollbar.
+ *
+ * Native scrolling (touch swipe, trackpad, shift+wheel) works either way.
+ */
+type TabsScrollButtonsProps = 'auto' | 'none';
 interface TabsProps {
     value?: string;
     defaultValue?: string;
@@ -11,6 +21,7 @@ interface TabsProps {
     size?: ComponentSizeProps;
     color?: TabsColorProps;
     fullWidth?: boolean;
+    scrollButtons?: TabsScrollButtonsProps;
     className?: string;
     children: React__default.ReactNode;
 }

package/dist/tabs/index.js

@@ -2,7 +2,7 @@ import {
   Tab,
   TabPanel,
   Tabs
-} from "../chunk-RAZRQ57B.js";
+} from "../chunk-74MBKLYI.js";
 import "../chunk-KBG77JHC.js";
 import "../chunk-5WRI5ZAA.js";
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eidos-ui",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "description": "A modern React component library with TypeScript and SCSS",
   "type": "module",
   "main": "./dist/index.cjs",

package/dist/chunk-RAZRQ57B.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/Tabs/Tabs.component.tsx"],"sourcesContent":["import React, { useState, useRef, useContext, useLayoutEffect } from 'react';\nimport { renderIcon } from '../../utils';\nimport type { TabsProps, TabProps, TabPanelProps, TabsContextValue } from './Tabs.types';\n\n// ============================================================================\n// CONTEXT\n// ============================================================================\n\nconst TabsContext = React.createContext<TabsContextValue | null>(null);\n\nconst useTabsContext = (): TabsContextValue => {\n  const ctx = useContext(TabsContext);\n  if (!ctx) throw new Error('Tab/TabPanel must be used inside <Tabs>');\n  return ctx;\n};\n\n// ============================================================================\n// TAB - individual tab trigger button\n// Defined before Tabs so Tabs can use `child.type === Tab` for child separation.\n// ============================================================================\n\nexport const Tab: React.FC<TabProps> = ({\n  value,\n  children,\n  disabled = false,\n  icon,\n  className = '',\n}) => {\n  const { activeValue, onSelect, size, fullWidth, listRef } = useTabsContext();\n  const isActive = activeValue === value;\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLButtonElement>) => {\n    const list = listRef.current;\n    if (!list) return;\n\n    const allTabs = Array.from(\n      list.querySelectorAll('[role=\"tab\"]:not([disabled])'),\n    ) as HTMLElement[];\n    const currentIndex = allTabs.indexOf(e.currentTarget);\n    if (currentIndex === -1) return;\n\n    let targetIndex = -1;\n    if (e.key === 'ArrowRight') targetIndex = (currentIndex + 1) % allTabs.length;\n    else if (e.key === 'ArrowLeft')\n      targetIndex = (currentIndex - 1 + allTabs.length) % allTabs.length;\n    else if (e.key === 'Home') targetIndex = 0;\n    else if (e.key === 'End') targetIndex = allTabs.length - 1;\n\n    if (targetIndex !== -1) {\n      e.preventDefault();\n      allTabs[targetIndex].focus();\n    }\n  };\n\n  const tabClasses = [\n    'eidos-tab',\n    `eidos-tab--${size}`,\n    isActive && 'eidos-tab--active',\n    disabled && 'eidos-tab--disabled',\n    fullWidth && 'eidos-tab--fullWidth',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <button\n      id={`eidos-tab-${value}`}\n      role=\"tab\"\n      aria-selected={isActive}\n      aria-controls={`eidos-tabpanel-${value}`}\n      tabIndex={isActive ? 0 : -1}\n      disabled={disabled}\n      className={tabClasses}\n      onClick={() => !disabled && onSelect(value)}\n      onKeyDown={handleKeyDown}\n      type=\"button\"\n    >\n      {icon && <span className=\"eidos-tab-icon\">{renderIcon(icon, 'eidos-tab-icon-svg')}</span>}\n      <span className=\"eidos-tab-label\">{children}</span>\n    </button>\n  );\n};\n\nTab.displayName = 'Tab';\n\n// ============================================================================\n// TAB PANEL - content region shown when its value matches the active tab\n// Defined before Tabs for the same `child.type === TabPanel` check.\n// ============================================================================\n\nexport const TabPanel: React.FC<TabPanelProps> = ({ value, children, className = '' }) => {\n  const { activeValue } = useTabsContext();\n  const isActive = activeValue === value;\n\n  if (!isActive) return null;\n\n  return (\n    <div\n      id={`eidos-tabpanel-${value}`}\n      role=\"tabpanel\"\n      aria-labelledby={`eidos-tab-${value}`}\n      tabIndex={0}\n      className={['eidos-tab-panel', className].filter(Boolean).join(' ')}\n    >\n      {children}\n    </div>\n  );\n};\n\nTabPanel.displayName = 'TabPanel';\n\n// ============================================================================\n// TABS - root container; provides context, separates tab/panel children\n// ============================================================================\n\nexport const Tabs: React.FC<TabsProps> = ({\n  value,\n  defaultValue,\n  onChange,\n  variant = 'line',\n  size = 'md',\n  color = 'primary',\n  fullWidth = false,\n  className = '',\n  children,\n}) => {\n  const isControlled = value !== undefined;\n  const [localValue, setLocalValue] = useState(defaultValue ?? '');\n  const activeValue = isControlled ? value! : localValue;\n\n  const listRef = useRef<HTMLDivElement>(null);\n  const indicatorRef = useRef<HTMLSpanElement>(null);\n  // Tracks whether the indicator has been positioned at least once so we can\n  // skip the CSS transition on the very first render and avoid it animating\n  // from the top-left corner to the initial tab.\n  const hasPositioned = useRef(false);\n\n  useLayoutEffect(() => {\n    if (variant !== 'line') return;\n    const list = listRef.current;\n    const indicator = indicatorRef.current;\n    if (!list || !indicator) return;\n\n    const activeTab = list.querySelector('[aria-selected=\"true\"]') as HTMLElement | null;\n    if (!activeTab) return;\n\n    // Suppress the CSS transition on the initial paint so the indicator snaps\n    // into place rather than sliding from 0.\n    if (!hasPositioned.current) {\n      indicator.style.transition = 'none';\n    }\n\n    indicator.style.left = `${activeTab.offsetLeft}px`;\n    indicator.style.width = `${activeTab.offsetWidth}px`;\n\n    if (!hasPositioned.current) {\n      // Force a synchronous reflow so the browser commits the no-transition\n      // position before we re-enable the transition for future clicks.\n      void indicator.offsetWidth;\n      indicator.style.transition = '';\n      hasPositioned.current = true;\n    }\n  }, [activeValue, variant, fullWidth]);\n\n  const onSelect = (newValue: string) => {\n    if (!isControlled) {\n      setLocalValue(newValue);\n    }\n    onChange?.(newValue);\n  };\n\n  // Separate Tab and TabPanel children so the list and panels render in\n  // distinct DOM regions, regardless of how the consumer orders them.\n  const tabChildren: React.ReactElement[] = [];\n  const panelChildren: React.ReactElement[] = [];\n\n  React.Children.forEach(children, (child) => {\n    if (!React.isValidElement(child)) return;\n    if (child.type === Tab) {\n      tabChildren.push(child);\n    } else if (child.type === TabPanel) {\n      panelChildren.push(child);\n    }\n  });\n\n  const rootClasses = ['eidos-tabs', `eidos-tabs--${variant}`, `eidos-tabs--${color}`, className]\n    .filter(Boolean)\n    .join(' ');\n\n  const listClasses = [\n    'eidos-tabs-list',\n    `eidos-tabs-list--${size}`,\n    fullWidth && 'eidos-tabs-list--fullWidth',\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const contextValue: TabsContextValue = {\n    activeValue,\n    onSelect,\n    variant,\n    size,\n    color,\n    fullWidth,\n    listRef,\n  };\n\n  return (\n    <TabsContext.Provider value={contextValue}>\n      <div className={rootClasses}>\n        <div ref={listRef} className={listClasses} role=\"tablist\">\n          {tabChildren}\n          {variant === 'line' && (\n            <span ref={indicatorRef} className=\"eidos-tabs-indicator\" aria-hidden=\"true\" />\n          )}\n        </div>\n        <div className=\"eidos-tabs-panels\">{panelChildren}</div>\n      </div>\n    </TabsContext.Provider>\n  );\n};\n\nTabs.displayName = 'Tabs';\n"],"mappings":"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","names":[]}

package/dist/chunk-VHQTDITV.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["/home/runner/work/eidos-ui/eidos-ui/dist/chunk-VHQTDITV.cjs","../src/components/Tabs/Tabs.component.tsx"],"names":[],"mappings":"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","file":"/home/runner/work/eidos-ui/eidos-ui/dist/chunk-VHQTDITV.cjs","sourcesContent":[null,"import React, { useState, useRef, useContext, useLayoutEffect } from 'react';\nimport { renderIcon } from '../../utils';\nimport type { TabsProps, TabProps, TabPanelProps, TabsContextValue } from './Tabs.types';\n\n// ============================================================================\n// CONTEXT\n// ============================================================================\n\nconst TabsContext = React.createContext<TabsContextValue | null>(null);\n\nconst useTabsContext = (): TabsContextValue => {\n  const ctx = useContext(TabsContext);\n  if (!ctx) throw new Error('Tab/TabPanel must be used inside <Tabs>');\n  return ctx;\n};\n\n// ============================================================================\n// TAB - individual tab trigger button\n// Defined before Tabs so Tabs can use `child.type === Tab` for child separation.\n// ============================================================================\n\nexport const Tab: React.FC<TabProps> = ({\n  value,\n  children,\n  disabled = false,\n  icon,\n  className = '',\n}) => {\n  const { activeValue, onSelect, size, fullWidth, listRef } = useTabsContext();\n  const isActive = activeValue === value;\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLButtonElement>) => {\n    const list = listRef.current;\n    if (!list) return;\n\n    const allTabs = Array.from(\n      list.querySelectorAll('[role=\"tab\"]:not([disabled])'),\n    ) as HTMLElement[];\n    const currentIndex = allTabs.indexOf(e.currentTarget);\n    if (currentIndex === -1) return;\n\n    let targetIndex = -1;\n    if (e.key === 'ArrowRight') targetIndex = (currentIndex + 1) % allTabs.length;\n    else if (e.key === 'ArrowLeft')\n      targetIndex = (currentIndex - 1 + allTabs.length) % allTabs.length;\n    else if (e.key === 'Home') targetIndex = 0;\n    else if (e.key === 'End') targetIndex = allTabs.length - 1;\n\n    if (targetIndex !== -1) {\n      e.preventDefault();\n      allTabs[targetIndex].focus();\n    }\n  };\n\n  const tabClasses = [\n    'eidos-tab',\n    `eidos-tab--${size}`,\n    isActive && 'eidos-tab--active',\n    disabled && 'eidos-tab--disabled',\n    fullWidth && 'eidos-tab--fullWidth',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <button\n      id={`eidos-tab-${value}`}\n      role=\"tab\"\n      aria-selected={isActive}\n      aria-controls={`eidos-tabpanel-${value}`}\n      tabIndex={isActive ? 0 : -1}\n      disabled={disabled}\n      className={tabClasses}\n      onClick={() => !disabled && onSelect(value)}\n      onKeyDown={handleKeyDown}\n      type=\"button\"\n    >\n      {icon && <span className=\"eidos-tab-icon\">{renderIcon(icon, 'eidos-tab-icon-svg')}</span>}\n      <span className=\"eidos-tab-label\">{children}</span>\n    </button>\n  );\n};\n\nTab.displayName = 'Tab';\n\n// ============================================================================\n// TAB PANEL - content region shown when its value matches the active tab\n// Defined before Tabs for the same `child.type === TabPanel` check.\n// ============================================================================\n\nexport const TabPanel: React.FC<TabPanelProps> = ({ value, children, className = '' }) => {\n  const { activeValue } = useTabsContext();\n  const isActive = activeValue === value;\n\n  if (!isActive) return null;\n\n  return (\n    <div\n      id={`eidos-tabpanel-${value}`}\n      role=\"tabpanel\"\n      aria-labelledby={`eidos-tab-${value}`}\n      tabIndex={0}\n      className={['eidos-tab-panel', className].filter(Boolean).join(' ')}\n    >\n      {children}\n    </div>\n  );\n};\n\nTabPanel.displayName = 'TabPanel';\n\n// ============================================================================\n// TABS - root container; provides context, separates tab/panel children\n// ============================================================================\n\nexport const Tabs: React.FC<TabsProps> = ({\n  value,\n  defaultValue,\n  onChange,\n  variant = 'line',\n  size = 'md',\n  color = 'primary',\n  fullWidth = false,\n  className = '',\n  children,\n}) => {\n  const isControlled = value !== undefined;\n  const [localValue, setLocalValue] = useState(defaultValue ?? '');\n  const activeValue = isControlled ? value! : localValue;\n\n  const listRef = useRef<HTMLDivElement>(null);\n  const indicatorRef = useRef<HTMLSpanElement>(null);\n  // Tracks whether the indicator has been positioned at least once so we can\n  // skip the CSS transition on the very first render and avoid it animating\n  // from the top-left corner to the initial tab.\n  const hasPositioned = useRef(false);\n\n  useLayoutEffect(() => {\n    if (variant !== 'line') return;\n    const list = listRef.current;\n    const indicator = indicatorRef.current;\n    if (!list || !indicator) return;\n\n    const activeTab = list.querySelector('[aria-selected=\"true\"]') as HTMLElement | null;\n    if (!activeTab) return;\n\n    // Suppress the CSS transition on the initial paint so the indicator snaps\n    // into place rather than sliding from 0.\n    if (!hasPositioned.current) {\n      indicator.style.transition = 'none';\n    }\n\n    indicator.style.left = `${activeTab.offsetLeft}px`;\n    indicator.style.width = `${activeTab.offsetWidth}px`;\n\n    if (!hasPositioned.current) {\n      // Force a synchronous reflow so the browser commits the no-transition\n      // position before we re-enable the transition for future clicks.\n      void indicator.offsetWidth;\n      indicator.style.transition = '';\n      hasPositioned.current = true;\n    }\n  }, [activeValue, variant, fullWidth]);\n\n  const onSelect = (newValue: string) => {\n    if (!isControlled) {\n      setLocalValue(newValue);\n    }\n    onChange?.(newValue);\n  };\n\n  // Separate Tab and TabPanel children so the list and panels render in\n  // distinct DOM regions, regardless of how the consumer orders them.\n  const tabChildren: React.ReactElement[] = [];\n  const panelChildren: React.ReactElement[] = [];\n\n  React.Children.forEach(children, (child) => {\n    if (!React.isValidElement(child)) return;\n    if (child.type === Tab) {\n      tabChildren.push(child);\n    } else if (child.type === TabPanel) {\n      panelChildren.push(child);\n    }\n  });\n\n  const rootClasses = ['eidos-tabs', `eidos-tabs--${variant}`, `eidos-tabs--${color}`, className]\n    .filter(Boolean)\n    .join(' ');\n\n  const listClasses = [\n    'eidos-tabs-list',\n    `eidos-tabs-list--${size}`,\n    fullWidth && 'eidos-tabs-list--fullWidth',\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const contextValue: TabsContextValue = {\n    activeValue,\n    onSelect,\n    variant,\n    size,\n    color,\n    fullWidth,\n    listRef,\n  };\n\n  return (\n    <TabsContext.Provider value={contextValue}>\n      <div className={rootClasses}>\n        <div ref={listRef} className={listClasses} role=\"tablist\">\n          {tabChildren}\n          {variant === 'line' && (\n            <span ref={indicatorRef} className=\"eidos-tabs-indicator\" aria-hidden=\"true\" />\n          )}\n        </div>\n        <div className=\"eidos-tabs-panels\">{panelChildren}</div>\n      </div>\n    </TabsContext.Provider>\n  );\n};\n\nTabs.displayName = 'Tabs';\n"]}