@trackunit/react-components 1.9.13 → 1.9.18

package/index.cjs.js

@@ -32,7 +32,7 @@ const cvaIcon = cssClassVarianceUtilities.cvaMerge(["aspect-square", "inline-gri
     variants: {
         color: {
             primary: "text-primary-600",
-            secondary: "text-secondary-400",
+            secondary: "text-neutral-400",
             neutral: "text-neutral-400",
             info: "text-info-600",
             success: "text-success-600",
@@ -201,7 +201,7 @@ const cvaTag = cssClassVarianceUtilities.cvaMerge([
         },
         color: {
             primary: ["bg-primary-100", "text-primary-700"],
-            secondary: ["bg-secondary-100", "text-secondary-700"],
+            secondary: ["bg-neutral-100", "text-neutral-700"],
             neutral: ["bg-neutral-200", "text-neutral-700"],
             black: ["bg-neutral-100", "text-neutral-700"],
             white: ["bg-white", "text-neutral-600"],
@@ -222,7 +222,7 @@ const cvaTag = cssClassVarianceUtilities.cvaMerge([
         },
         border: {
             none: "border-none",
-            default: "outline-secondary-300 border-none outline outline-1 -outline-offset-1",
+            default: "border-none outline outline-1 -outline-offset-1 outline-neutral-300",
         },
     },
     defaultVariants: {
@@ -410,7 +410,7 @@ const cvaSpinner = cssClassVarianceUtilities.cvaMerge(["bg-transparent", "rounde
         },
         mode: {
             dark: ["border-white/[0.32]", "border-b-white/75"],
-            light: ["border-slate-900/25", "border-b-slate-900/50"],
+            light: ["border-neutral-900/25", "border-b-neutral-900/50"],
         },
     },
     defaultVariants: {
@@ -428,7 +428,7 @@ const cvaSpinnerContainer = cssClassVarianceUtilities.cvaMerge(["box-border", "p
         },
         mode: {
             dark: ["text-white/75"],
-            light: ["text-slate-900/50"],
+            light: ["text-neutral-900/50"],
         },
     },
     defaultVariants: {
@@ -1828,7 +1828,7 @@ const useBreadcrumbItemsToRender = (breadcrumbItems) => {
     const breadCrumbItemsToJSX = breadcrumbItems.map((item, index, array) => {
         const isLast = index === array.length - 1;
         if (!isLast) {
-            return (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Button, { asChild: true, size: "small", variant: "ghost-neutral", children: jsxRuntime.jsx(reactRouter.Link, { to: item.to, children: item.label }) }), jsxRuntime.jsx(Icon, { className: "text-secondary-300", name: "Slash", size: "small" })] }, index));
+            return (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Button, { asChild: true, size: "small", variant: "ghost-neutral", children: jsxRuntime.jsx(reactRouter.Link, { to: item.to, children: item.label }) }), jsxRuntime.jsx(Icon, { className: "text-neutral-300", name: "Slash", size: "small" })] }, index));
         }
         return (jsxRuntime.jsx(Text, { className: "text-nowrap", size: "small", children: item.label }, index));
     });
@@ -1895,7 +1895,7 @@ const cvaCard = cssClassVarianceUtilities.cvaMerge([
         fullHeight: false,
     },
 });
-const cvaCardFooterDensityContainer = cssClassVarianceUtilities.cvaMerge(["flex", "border-t", "border-secondary-200", "justify-end", "flex-row"], {
+const cvaCardFooterDensityContainer = cssClassVarianceUtilities.cvaMerge(["flex", "border-t", "border-neutral-200", "justify-end", "flex-row"], {
     variants: {
         border: {
             default: "",
@@ -1918,7 +1918,7 @@ const cvaCardFooterDensityContainer = cssClassVarianceUtilities.cvaMerge(["flex"
 });
 const cvaCardHeader = cssClassVarianceUtilities.cvaMerge(["flex", "justify-between", "flex-1"]);
 const cvaCardHeaderHeadingContainer = cssClassVarianceUtilities.cvaMerge(["flex", "gap-4", "items-center"]);
-const cvaCardHeaderDensityContainer = cssClassVarianceUtilities.cvaMerge(["flex", "border-b", "border-secondary-200"], {
+const cvaCardHeaderDensityContainer = cssClassVarianceUtilities.cvaMerge(["flex", "border-b", "border-neutral-200"], {
     variants: {
         border: {
             default: "",
@@ -2076,7 +2076,7 @@ const cvaCollapse = cssClassVarianceUtilities.cvaMerge([
     "block",
     "border",
     "border-solid",
-    "border-secondary-300",
+    "border-neutral-300",
     "rounded-md",
     "overflow-hidden",
     "bg-white",
@@ -2087,14 +2087,14 @@ const cvaCollapseHeader = cssClassVarianceUtilities.cvaMerge([
     "justify-between",
     "cursor-pointer",
     "bg-white",
-    "hover:bg-secondary-100",
+    "hover:bg-neutral-100",
     "px-3",
     "gap-4",
     "py-1.5",
     "transition-all",
 ], {
     variants: {
-        expanded: { true: ["border-secondary-200", "border-b", "border-solid"], false: "" },
+        expanded: { true: ["border-neutral-200", "border-b", "border-solid"], false: "" },
     },
 });
 const cvaCollapseLabelContainer = cssClassVarianceUtilities.cvaMerge(["flex", "items-center", "w-full", "justify-between"]);
@@ -2231,7 +2231,7 @@ const CopyableText = ({ text, alternativeText, dataTestId, className }) => {
     return (jsxRuntime.jsx("span", { className: cvaCopyableText({ animating, className }), "data-testid": dataTestId, onAnimationEnd: () => setAnimating(false), onClick: handleOnClick, title: value, children: text }));
 };
 
-const cvaDetailsList = cssClassVarianceUtilities.cvaMerge(["flex", "w-full", "min-w-0", "items-center", "truncate", "text-xs", "text-gray-600", "font-medium"], {
+const cvaDetailsList = cssClassVarianceUtilities.cvaMerge(["flex", "w-full", "min-w-0", "items-center", "truncate", "text-xs", "text-neutral-600", "font-medium"], {
     variants: {
         density: {
             default: "pt-0",
@@ -2296,20 +2296,30 @@ const cvaSkeletonLine = cssClassVarianceUtilities.cvaMerge([
 
 /**
  * Display placeholder lines before the data gets loaded to reduce load-time frustration.
+ * All width values are automatically constrained using CSS min() function to prevent overflow.
  */
-const SkeletonLines = react.memo(({ lines = 1, height = "0.75rem", width = "100%", margin = 10, className, dataTestId }) => {
-    const gapStyle = typeof margin === "number" ? `${margin}px` : margin;
+const SkeletonLines = react.memo(({ lines = 1, height = "0.75rem", width = "100%", gap = 10, maxWidth = "100%", className, dataTestId, }) => {
+    const gapStyle = typeof gap === "number" ? `${gap}px` : gap;
     return (jsxRuntime.jsx("div", { "aria-label": `Loading ${lines} ${lines === 1 ? "item" : "items"}`, className: cvaSkeletonContainer({ className }), "data-testid": dataTestId, role: "status", style: { gap: gapStyle }, children: Array.from({ length: lines }, (_, index) => (jsxRuntime.jsx("div", { className: cvaSkeletonLine(), "data-testid": dataTestId ? `${dataTestId}-${index}` : `skeleton-lines-${index}`, "data-type": "loading-skeleton-line", style: {
-                width: getDimension(width, index),
-                height: getDimension(height, index),
+                width: getDimension({ dimension: width, index, direction: "width", maxWidth }),
+                height: getDimension({ dimension: height, index, direction: "height" }),
             } }, index))) }));
 });
-const getDimension = (dimension, index) => {
+const getDimension = (params) => {
+    const { dimension, index } = params;
+    let value;
     if (Array.isArray(dimension)) {
-        const value = dimension[index] ?? dimension[0] ?? "100%";
-        return typeof value === "number" ? `${value}px` : value;
+        const dimValue = dimension[index] ?? dimension[0] ?? "100%";
+        value = typeof dimValue === "number" ? `${dimValue}px` : dimValue;
     }
-    return typeof dimension === "number" ? `${dimension}px` : dimension;
+    else {
+        value = typeof dimension === "number" ? `${dimension}px` : dimension;
+    }
+    // For width values, wrap in min() to ensure max container width
+    if (params.direction === "width") {
+        return `min(${value}, ${params.maxWidth})`;
+    }
+    return value;
 };
 
 const cvaContainerStyles = cssClassVarianceUtilities.cvaMerge([
@@ -2592,7 +2602,7 @@ const HorizontalOverflowScroller = ({ className, dataTestId, children, onScrollS
             behavior: "smooth",
         });
     };
-    return (jsxRuntime.jsxs(ZStack, { className: cvaHorizontalOverflowScrollerAndIndicatorsContainer({ className }), children: [jsxRuntime.jsx("div", { className: cvaHorizontalOverflowScroller({ className }), "data-testid": dataTestId, ref: containerRef, children: childrenArray.map((child, index) => (jsxRuntime.jsx(react.Fragment, { children: child }, index))) }), isScrollable && !isAtBeginning ? (jsxRuntime.jsx(OverflowIndicator, { dataTestId: `${dataTestId}-left-indicator`, direction: "left", onClickScroll: handleScrollLeft })) : null, isScrollable && !isAtEnd ? (jsxRuntime.jsx(OverflowIndicator, { dataTestId: `${dataTestId}-right-indicator`, direction: "right", onClickScroll: handleScrollRight })) : null] }));
+    return (jsxRuntime.jsxs(ZStack, { className: cvaHorizontalOverflowScrollerAndIndicatorsContainer({ className }), children: [jsxRuntime.jsx("div", { className: cvaHorizontalOverflowScroller(), "data-testid": dataTestId, ref: containerRef, children: childrenArray.map((child, index) => (jsxRuntime.jsx(react.Fragment, { children: child }, index))) }), isScrollable && !isAtBeginning ? (jsxRuntime.jsx(OverflowIndicator, { dataTestId: `${dataTestId}-left-indicator`, direction: "left", onClickScroll: handleScrollLeft })) : null, isScrollable && !isAtEnd ? (jsxRuntime.jsx(OverflowIndicator, { dataTestId: `${dataTestId}-right-indicator`, direction: "right", onClickScroll: handleScrollRight })) : null] }));
 };
 
 const PADDING = 12;
@@ -2907,11 +2917,11 @@ const PopoverTrigger = function PopoverTrigger({ children, renderButton = false,
 };
 
 const cvaTooltipContainer = cssClassVarianceUtilities.cvaMerge(["flex", "leading-5"]);
-const cvaTooltipIcon = cssClassVarianceUtilities.cvaMerge(["flex", "h-max", "w-fit", "text-slate-300", "transition", "hover:cursor-pointer", "hover:text-slate-400"], {
+const cvaTooltipIcon = cssClassVarianceUtilities.cvaMerge(["flex", "h-max", "w-fit", "text-neutral-300", "transition", "hover:cursor-pointer", "hover:text-neutral-400"], {
     variants: {
         color: {
             light: "hover:text-white",
-            dark: "hover:text-slate-400",
+            dark: "hover:text-neutral-400",
         },
         defaultVariants: {
             color: "dark",
@@ -3042,7 +3052,7 @@ const cvaIndicatorPing = cssClassVarianceUtilities.cvaMerge(["animate-ping-sm",
     variants: {
         color: {
             primary: "bg-primary-600",
-            secondary: "bg-secondary-600",
+            secondary: "bg-neutral-600",
             neutral: "bg-neutral-600",
             info: "bg-info-600",
             success: "bg-success-600",
@@ -3085,7 +3095,7 @@ const cvaIndicatorIconBackground = cssClassVarianceUtilities.cvaMerge(["rounded-
     variants: {
         color: {
             primary: "bg-primary-100 text-primary-600",
-            secondary: "bg-secondary-100 text-secondary-600",
+            secondary: "bg-neutral-100 text-neutral-600",
             neutral: "bg-neutral-100 text-neutral-600",
             info: "bg-info-100 text-info-600",
             success: "bg-success-100 text-success-600",
@@ -3199,7 +3209,7 @@ const cvaKPIValueContainer = cssClassVarianceUtilities.cvaMerge(["truncate", "wh
     },
 });
 
-const LoadingContent$1 = () => (jsxRuntime.jsx("div", { className: "flex h-11 flex-row items-center gap-3", "data-testid": "kpi-card-loading-content", children: jsxRuntime.jsx("div", { className: "w-full", children: jsxRuntime.jsx(SkeletonLines, { height: [14, 18], lines: 2, margin: "3", width: [80, 60] }) }) }));
+const LoadingContent$1 = () => (jsxRuntime.jsx("div", { className: "flex h-11 flex-row items-center gap-3", "data-testid": "kpi-card-loading-content", children: jsxRuntime.jsx("div", { className: "w-full", children: jsxRuntime.jsx(SkeletonLines, { gap: 3, height: [14, 18], lines: 2, width: [80, 60] }) }) }));
 /**
  * The KPI component is used to display KPIs.
  *
@@ -3231,7 +3241,7 @@ const cvaKPICard = cssClassVarianceUtilities.cvaMerge([
             withTrends: ["min-h-[94px]"],
         },
         isClickable: {
-            true: ["hover:bg-slate-50", "component-card-border"],
+            true: ["hover:bg-neutral-50", "component-card-border"],
             false: [],
         },
         isActive: {
@@ -3561,7 +3571,7 @@ const cvaMenuList = cssClassVarianceUtilities.cvaMerge([
     "z-popover",
     "bg-white",
     "border",
-    "border-slate-300",
+    "border-neutral-300",
     "grid",
     "min-w-[200px]",
     "max-w-[300px]",
@@ -3574,7 +3584,7 @@ const cvaMenuList = cssClassVarianceUtilities.cvaMerge([
         },
     },
 });
-const cvaMenuListDivider = cssClassVarianceUtilities.cvaMerge(["mx-[-4px]", "my-1", "min-h-px", "bg-slate-300"]);
+const cvaMenuListDivider = cssClassVarianceUtilities.cvaMerge(["mx-[-4px]", "my-1", "min-h-px", "bg-neutral-300"]);
 const cvaMenuListMultiSelect = cssClassVarianceUtilities.cvaMerge("hover:!bg-blue-200");
 const cvaMenuListItem = cssClassVarianceUtilities.cvaMerge("max-w-full");
 
@@ -3655,9 +3665,9 @@ const cvaMenuItemLabel = cssClassVarianceUtilities.cvaMerge(["flex-grow", "trunc
     },
 });
 const cvaMenuItemPrefix = cssClassVarianceUtilities.cvaMerge([
-    "text-secondary-400",
-    "hover:text-secondary-500",
-    "focus:text-secondary-500",
+    "text-neutral-400",
+    "hover:text-neutral-500",
+    "focus:text-neutral-500",
     "h-min",
     "leading-[0]",
     "flex",
@@ -3665,7 +3675,7 @@ const cvaMenuItemPrefix = cssClassVarianceUtilities.cvaMerge([
 ], {
     variants: {
         selected: {
-            true: "text-secondary-600",
+            true: "text-neutral-600",
             false: "",
         },
         variant: {
@@ -3673,7 +3683,7 @@ const cvaMenuItemPrefix = cssClassVarianceUtilities.cvaMerge([
             danger: ["text-danger-600", "hover:text-danger-700", "focus:bg-danger-200", "focus:text-danger-800"],
         },
         disabled: {
-            true: "text-secondary opacity-50",
+            true: "text-neutral opacity-50",
             false: "",
         },
     },
@@ -3682,10 +3692,10 @@ const cvaMenuItemPrefix = cssClassVarianceUtilities.cvaMerge([
         disabled: false,
     },
 });
-const cvaMenuItemSuffix = cssClassVarianceUtilities.cvaMerge(["text-secondary-400", "text-sm", "flex", "items-center"], {
+const cvaMenuItemSuffix = cssClassVarianceUtilities.cvaMerge(["text-neutral-400", "text-sm", "flex", "items-center"], {
     variants: {
         selected: {
-            true: "text-secondary-600",
+            true: "text-neutral-600",
             false: "",
         },
         variant: {
@@ -3693,7 +3703,7 @@ const cvaMenuItemSuffix = cssClassVarianceUtilities.cvaMerge(["text-secondary-40
             danger: ["text-danger-600", "hover:text-danger-700", "focus:bg-danger-200", "focus:text-danger-800"],
         },
         disabled: {
-            true: "text-secondary opacity-50",
+            true: "text-neutral opacity-50",
             false: "",
         },
     },
@@ -3732,7 +3742,7 @@ const MenuItem = ({ className, dataTestId, label, children, selected = false, fo
                 e.stopPropagation();
             }
             onClick?.(e);
-        }, onKeyDown: handleKeyDown, role: "menuitem", tabIndex: disabled ? -1 : (tabIndex ?? 0), children: [prefix !== null && prefix !== undefined ? (jsxRuntime.jsx("div", { className: cvaMenuItemPrefix({ selected, variant, disabled }), "data-testid": dataTestId ? `${dataTestId}-prefix` : "menu-item-prefix", children: prefix })) : null, children !== null && children !== undefined && typeof children !== "string" ? (children) : (jsxRuntime.jsxs("div", { className: cvaMenuItemLabel({ variant, disabled }), "data-testid": dataTestId ? `${dataTestId}-label` : "menu-item-label", children: [optionPrefix !== null && optionPrefix !== undefined ? optionPrefix : null, children ?? label, optionLabelDescription !== undefined && optionLabelDescription !== "" ? (jsxRuntime.jsxs("span", { className: "text-secondary-400 ml-1", children: ["(", optionLabelDescription, ")"] })) : null] })), suffix !== null && suffix !== undefined ? (jsxRuntime.jsx("div", { className: cvaMenuItemSuffix({ selected, variant, disabled }), "data-testid": dataTestId ? `${dataTestId}-suffix` : "menu-item-suffix", children: suffix })) : null] }));
+        }, onKeyDown: handleKeyDown, role: "menuitem", tabIndex: disabled ? -1 : (tabIndex ?? 0), children: [prefix !== null && prefix !== undefined ? (jsxRuntime.jsx("div", { className: cvaMenuItemPrefix({ selected, variant, disabled }), "data-testid": dataTestId ? `${dataTestId}-prefix` : "menu-item-prefix", children: prefix })) : null, children !== null && children !== undefined && typeof children !== "string" ? (children) : (jsxRuntime.jsxs("div", { className: cvaMenuItemLabel({ variant, disabled }), "data-testid": dataTestId ? `${dataTestId}-label` : "menu-item-label", children: [optionPrefix !== null && optionPrefix !== undefined ? optionPrefix : null, children ?? label, optionLabelDescription !== undefined && optionLabelDescription !== "" ? (jsxRuntime.jsxs("span", { className: "ml-1 text-neutral-400", children: ["(", optionLabelDescription, ")"] })) : null] })), suffix !== null && suffix !== undefined ? (jsxRuntime.jsx("div", { className: cvaMenuItemSuffix({ selected, variant, disabled }), "data-testid": dataTestId ? `${dataTestId}-suffix` : "menu-item-suffix", children: suffix })) : null] }));
 };
 
 /**
@@ -3798,7 +3808,7 @@ const cvaMoreMenu = cssClassVarianceUtilities.cvaMerge(["p-0"]);
  */
 const MoreMenu = ({ className, dataTestId, popoverProps, iconProps = {
     size: "medium",
-    className: "text-secondary-400",
+    className: "text-neutral-400",
 }, iconButtonProps = {
     size: "medium",
     circular: false,
@@ -3902,7 +3912,7 @@ const PageContent = ({ className, children, dataTestId, layout }) => {
     return (jsxRuntime.jsx("div", { className: cvaPageContent({ className, layout }), "data-testid": dataTestId ? dataTestId : "page-content", children: children }));
 };
 
-const LoadingContent = () => (jsxRuntime.jsx("div", { className: "flex flex-row items-center gap-3", "data-testid": "kpi-card-loading-content", children: jsxRuntime.jsx("div", { className: "w-full", children: jsxRuntime.jsx(SkeletonLines, { height: [16, 25], lines: 2, margin: "3", width: [50, 40] }) }) }));
+const LoadingContent = () => (jsxRuntime.jsx("div", { className: "flex flex-row items-center gap-3", "data-testid": "kpi-card-loading-content", children: jsxRuntime.jsx("div", { className: "w-full", children: jsxRuntime.jsx(SkeletonLines, { gap: 3, height: [16, 25], lines: 2, width: [50, 40] }) }) }));
 /**
  * The PageHeaderKpiMetrics component is used to render the KPI metrics in the PageHeader component.
  *
@@ -3917,7 +3927,7 @@ const PageHeaderKpiMetrics = ({ kpiMetrics }) => {
             if (kpi.loading === true) {
                 return jsxRuntime.jsx(LoadingContent, {}, `${kpi}-${index}`);
             }
-            return (jsxRuntime.jsxs("div", { className: "flex flex-col text-nowrap text-left", children: [jsxRuntime.jsx("span", { className: "text-xs text-slate-500", children: kpi.header }), jsxRuntime.jsxs("div", { className: "flex flex-row items-center gap-1", children: [jsxRuntime.jsx("span", { className: "text-lg font-medium text-slate-900", children: kpi.value }), kpi.unit ? jsxRuntime.jsx("span", { className: "text-xs text-slate-900", children: kpi.unit }) : null] })] }, `${kpi}-${index}`));
+            return (jsxRuntime.jsxs("div", { className: "flex flex-col text-nowrap text-left", children: [jsxRuntime.jsx("span", { className: "text-xs text-neutral-500", children: kpi.header }), jsxRuntime.jsxs("div", { className: "flex flex-row items-center gap-1", children: [jsxRuntime.jsx("span", { className: "text-lg font-medium text-neutral-900", children: kpi.value }), kpi.unit ? jsxRuntime.jsx("span", { className: "text-xs text-neutral-900", children: kpi.unit }) : null] })] }, `${kpi}-${index}`));
         }) }));
 };
 
@@ -3983,13 +3993,13 @@ const PageHeaderSecondaryActions = ({ actions, hasPrimaryAction = false, }) => {
 const cvaPageHeaderContainer = cssClassVarianceUtilities.cvaMerge(["bg-white", "tu-page-header"], {
     variants: {
         withBorder: {
-            true: ["border-b", "border-b-secondary-200"],
+            true: ["border-b", "border-b-neutral-200"],
             false: "",
         },
     },
 });
 const cvaPageHeader = cssClassVarianceUtilities.cvaMerge(["box-border", "py-4", "px-6", "flex", "items-center", "gap-y-1"]);
-const cvaPageHeaderHeading = cssClassVarianceUtilities.cvaMerge(["text-slate-900", "text-xl", "font-semibold", "truncate"]);
+const cvaPageHeaderHeading = cssClassVarianceUtilities.cvaMerge(["text-neutral-900", "text-xl", "font-semibold", "truncate"]);
 
 /**
  * The PageHeaderTitle component is used to display the title of the page header.
@@ -4311,7 +4321,7 @@ const cvaTabList = cssClassVarianceUtilities.cvaMerge([
     "flex",
     "flex-row",
     "border-b",
-    "border-b-secondary-200",
+    "border-b-neutral-200",
     "overflow-auto",
     "no-scrollbar",
 ]);
@@ -4334,13 +4344,13 @@ const cvaTab = cssClassVarianceUtilities.cvaMerge([
     "hover:border-b-transparent",
     "data-[state=active]:border-b-primary-600",
     "data-[state=active]:font-semibold",
-    "data-[state=active]:text-secondary-900",
+    "data-[state=active]:text-neutral-900",
     "data-[state=inactive]:font-medium",
-    "data-[state=inactive]:text-secondary-700",
-    "data-[state=inactive]:hover:text-secondary-900",
+    "data-[state=inactive]:text-neutral-700",
+    "data-[state=inactive]:hover:text-neutral-900",
     "disabled:cursor-not-allowed",
-    "data-[state=active]disabled:text-secondary-400",
-    "data-[state=inactive]:disabled:text-secondary-400",
+    "data-[state=active]disabled:text-neutral-400",
+    "data-[state=inactive]:disabled:text-neutral-400",
 ], {
     variants: {
         isFullWidth: {
@@ -4379,12 +4389,13 @@ const TabContent = ({ className, dataTestId, children, ...rest }) => {
 /**
  * Wrapper for radix tab list component.
  */
-const TabList = ({ className, dataTestId, children, ...rest }) => {
+const TabList = ({ className, dataTestId, children, autoScrollToActive = true, ...rest }) => {
     const listRef = react.useRef(null);
     react.useEffect(() => {
         const element = listRef.current;
-        if (!element)
+        if (!element) {
             return;
+        }
         const handleWheel = (event) => {
             const canScrollHorizontally = element.scrollWidth > element.clientWidth;
             if (canScrollHorizontally) {
@@ -4400,6 +4411,24 @@ const TabList = ({ className, dataTestId, children, ...rest }) => {
             element.removeEventListener("wheel", handleWheel);
         };
     }, []);
+    // Auto-scroll active tab into view when enabled
+    react.useLayoutEffect(() => {
+        if (!autoScrollToActive) {
+            return;
+        }
+        const element = listRef.current;
+        if (!element)
+            return;
+        // Find the active tab using a radix UI build in selector
+        const activeTab = element.querySelector('[aria-selected="true"]');
+        if (activeTab && typeof activeTab.scrollIntoView === "function") {
+            activeTab.scrollIntoView({
+                behavior: "instant",
+                block: "nearest",
+                inline: "center",
+            });
+        }
+    }, [autoScrollToActive]);
     return (jsxRuntime.jsx(reactTabs.List, { className: cvaTabList({ className }), "data-testid": dataTestId, ref: listRef, ...rest, children: children }));
 };
 
@@ -4584,7 +4613,7 @@ const cvaValueBar = cssClassVarianceUtilities.cvaMerge([
     "w-full",
     "overflow-hidden",
     "rounded",
-    "bg-slate-100",
+    "bg-neutral-100",
     "appearance-none",
     "[&::-webkit-progress-bar]:bg-transparent",
     "[&::-webkit-progress-value]:bg-current",

package/index.esm.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
-import { useRef, useMemo, useEffect, useState, useCallback, createElement, useReducer, forwardRef, Fragment, memo, Children, isValidElement, cloneElement, createContext, useContext } from 'react';
+import { useRef, useMemo, useEffect, useState, useCallback, createElement, useReducer, forwardRef, Fragment, memo, Children, isValidElement, cloneElement, createContext, useContext, useLayoutEffect } from 'react';
 import { objectKeys, uuidv4, objectEntries, objectValues, nonNullable } from '@trackunit/shared-utils';
 import { intentPalette, generalPalette, criticalityPalette, activityPalette, utilizationPalette, sitesPalette, rentalStatusPalette, themeScreenSizeAsNumber, color } from '@trackunit/ui-design-tokens';
 import { iconNames } from '@trackunit/ui-icons';
@@ -30,7 +30,7 @@ const cvaIcon = cvaMerge(["aspect-square", "inline-grid", "relative", "shrink-0"
     variants: {
         color: {
             primary: "text-primary-600",
-            secondary: "text-secondary-400",
+            secondary: "text-neutral-400",
             neutral: "text-neutral-400",
             info: "text-info-600",
             success: "text-success-600",
@@ -199,7 +199,7 @@ const cvaTag = cvaMerge([
         },
         color: {
             primary: ["bg-primary-100", "text-primary-700"],
-            secondary: ["bg-secondary-100", "text-secondary-700"],
+            secondary: ["bg-neutral-100", "text-neutral-700"],
             neutral: ["bg-neutral-200", "text-neutral-700"],
             black: ["bg-neutral-100", "text-neutral-700"],
             white: ["bg-white", "text-neutral-600"],
@@ -220,7 +220,7 @@ const cvaTag = cvaMerge([
         },
         border: {
             none: "border-none",
-            default: "outline-secondary-300 border-none outline outline-1 -outline-offset-1",
+            default: "border-none outline outline-1 -outline-offset-1 outline-neutral-300",
         },
     },
     defaultVariants: {
@@ -408,7 +408,7 @@ const cvaSpinner = cvaMerge(["bg-transparent", "rounded-full", "border-2", "bord
         },
         mode: {
             dark: ["border-white/[0.32]", "border-b-white/75"],
-            light: ["border-slate-900/25", "border-b-slate-900/50"],
+            light: ["border-neutral-900/25", "border-b-neutral-900/50"],
         },
     },
     defaultVariants: {
@@ -426,7 +426,7 @@ const cvaSpinnerContainer = cvaMerge(["box-border", "p-0.5", "overflow-hidden"],
         },
         mode: {
             dark: ["text-white/75"],
-            light: ["text-slate-900/50"],
+            light: ["text-neutral-900/50"],
         },
     },
     defaultVariants: {
@@ -1826,7 +1826,7 @@ const useBreadcrumbItemsToRender = (breadcrumbItems) => {
     const breadCrumbItemsToJSX = breadcrumbItems.map((item, index, array) => {
         const isLast = index === array.length - 1;
         if (!isLast) {
-            return (jsxs("div", { children: [jsx(Button, { asChild: true, size: "small", variant: "ghost-neutral", children: jsx(Link, { to: item.to, children: item.label }) }), jsx(Icon, { className: "text-secondary-300", name: "Slash", size: "small" })] }, index));
+            return (jsxs("div", { children: [jsx(Button, { asChild: true, size: "small", variant: "ghost-neutral", children: jsx(Link, { to: item.to, children: item.label }) }), jsx(Icon, { className: "text-neutral-300", name: "Slash", size: "small" })] }, index));
         }
         return (jsx(Text, { className: "text-nowrap", size: "small", children: item.label }, index));
     });
@@ -1893,7 +1893,7 @@ const cvaCard = cvaMerge([
         fullHeight: false,
     },
 });
-const cvaCardFooterDensityContainer = cvaMerge(["flex", "border-t", "border-secondary-200", "justify-end", "flex-row"], {
+const cvaCardFooterDensityContainer = cvaMerge(["flex", "border-t", "border-neutral-200", "justify-end", "flex-row"], {
     variants: {
         border: {
             default: "",
@@ -1916,7 +1916,7 @@ const cvaCardFooterDensityContainer = cvaMerge(["flex", "border-t", "border-seco
 });
 const cvaCardHeader = cvaMerge(["flex", "justify-between", "flex-1"]);
 const cvaCardHeaderHeadingContainer = cvaMerge(["flex", "gap-4", "items-center"]);
-const cvaCardHeaderDensityContainer = cvaMerge(["flex", "border-b", "border-secondary-200"], {
+const cvaCardHeaderDensityContainer = cvaMerge(["flex", "border-b", "border-neutral-200"], {
     variants: {
         border: {
             default: "",
@@ -2074,7 +2074,7 @@ const cvaCollapse = cvaMerge([
     "block",
     "border",
     "border-solid",
-    "border-secondary-300",
+    "border-neutral-300",
     "rounded-md",
     "overflow-hidden",
     "bg-white",
@@ -2085,14 +2085,14 @@ const cvaCollapseHeader = cvaMerge([
     "justify-between",
     "cursor-pointer",
     "bg-white",
-    "hover:bg-secondary-100",
+    "hover:bg-neutral-100",
     "px-3",
     "gap-4",
     "py-1.5",
     "transition-all",
 ], {
     variants: {
-        expanded: { true: ["border-secondary-200", "border-b", "border-solid"], false: "" },
+        expanded: { true: ["border-neutral-200", "border-b", "border-solid"], false: "" },
     },
 });
 const cvaCollapseLabelContainer = cvaMerge(["flex", "items-center", "w-full", "justify-between"]);
@@ -2229,7 +2229,7 @@ const CopyableText = ({ text, alternativeText, dataTestId, className }) => {
     return (jsx("span", { className: cvaCopyableText({ animating, className }), "data-testid": dataTestId, onAnimationEnd: () => setAnimating(false), onClick: handleOnClick, title: value, children: text }));
 };
 
-const cvaDetailsList = cvaMerge(["flex", "w-full", "min-w-0", "items-center", "truncate", "text-xs", "text-gray-600", "font-medium"], {
+const cvaDetailsList = cvaMerge(["flex", "w-full", "min-w-0", "items-center", "truncate", "text-xs", "text-neutral-600", "font-medium"], {
     variants: {
         density: {
             default: "pt-0",
@@ -2294,20 +2294,30 @@ const cvaSkeletonLine = cvaMerge([
 
 /**
  * Display placeholder lines before the data gets loaded to reduce load-time frustration.
+ * All width values are automatically constrained using CSS min() function to prevent overflow.
  */
-const SkeletonLines = memo(({ lines = 1, height = "0.75rem", width = "100%", margin = 10, className, dataTestId }) => {
-    const gapStyle = typeof margin === "number" ? `${margin}px` : margin;
+const SkeletonLines = memo(({ lines = 1, height = "0.75rem", width = "100%", gap = 10, maxWidth = "100%", className, dataTestId, }) => {
+    const gapStyle = typeof gap === "number" ? `${gap}px` : gap;
     return (jsx("div", { "aria-label": `Loading ${lines} ${lines === 1 ? "item" : "items"}`, className: cvaSkeletonContainer({ className }), "data-testid": dataTestId, role: "status", style: { gap: gapStyle }, children: Array.from({ length: lines }, (_, index) => (jsx("div", { className: cvaSkeletonLine(), "data-testid": dataTestId ? `${dataTestId}-${index}` : `skeleton-lines-${index}`, "data-type": "loading-skeleton-line", style: {
-                width: getDimension(width, index),
-                height: getDimension(height, index),
+                width: getDimension({ dimension: width, index, direction: "width", maxWidth }),
+                height: getDimension({ dimension: height, index, direction: "height" }),
             } }, index))) }));
 });
-const getDimension = (dimension, index) => {
+const getDimension = (params) => {
+    const { dimension, index } = params;
+    let value;
     if (Array.isArray(dimension)) {
-        const value = dimension[index] ?? dimension[0] ?? "100%";
-        return typeof value === "number" ? `${value}px` : value;
+        const dimValue = dimension[index] ?? dimension[0] ?? "100%";
+        value = typeof dimValue === "number" ? `${dimValue}px` : dimValue;
     }
-    return typeof dimension === "number" ? `${dimension}px` : dimension;
+    else {
+        value = typeof dimension === "number" ? `${dimension}px` : dimension;
+    }
+    // For width values, wrap in min() to ensure max container width
+    if (params.direction === "width") {
+        return `min(${value}, ${params.maxWidth})`;
+    }
+    return value;
 };
 
 const cvaContainerStyles = cvaMerge([
@@ -2590,7 +2600,7 @@ const HorizontalOverflowScroller = ({ className, dataTestId, children, onScrollS
             behavior: "smooth",
         });
     };
-    return (jsxs(ZStack, { className: cvaHorizontalOverflowScrollerAndIndicatorsContainer({ className }), children: [jsx("div", { className: cvaHorizontalOverflowScroller({ className }), "data-testid": dataTestId, ref: containerRef, children: childrenArray.map((child, index) => (jsx(Fragment, { children: child }, index))) }), isScrollable && !isAtBeginning ? (jsx(OverflowIndicator, { dataTestId: `${dataTestId}-left-indicator`, direction: "left", onClickScroll: handleScrollLeft })) : null, isScrollable && !isAtEnd ? (jsx(OverflowIndicator, { dataTestId: `${dataTestId}-right-indicator`, direction: "right", onClickScroll: handleScrollRight })) : null] }));
+    return (jsxs(ZStack, { className: cvaHorizontalOverflowScrollerAndIndicatorsContainer({ className }), children: [jsx("div", { className: cvaHorizontalOverflowScroller(), "data-testid": dataTestId, ref: containerRef, children: childrenArray.map((child, index) => (jsx(Fragment, { children: child }, index))) }), isScrollable && !isAtBeginning ? (jsx(OverflowIndicator, { dataTestId: `${dataTestId}-left-indicator`, direction: "left", onClickScroll: handleScrollLeft })) : null, isScrollable && !isAtEnd ? (jsx(OverflowIndicator, { dataTestId: `${dataTestId}-right-indicator`, direction: "right", onClickScroll: handleScrollRight })) : null] }));
 };
 
 const PADDING = 12;
@@ -2905,11 +2915,11 @@ const PopoverTrigger = function PopoverTrigger({ children, renderButton = false,
 };
 
 const cvaTooltipContainer = cvaMerge(["flex", "leading-5"]);
-const cvaTooltipIcon = cvaMerge(["flex", "h-max", "w-fit", "text-slate-300", "transition", "hover:cursor-pointer", "hover:text-slate-400"], {
+const cvaTooltipIcon = cvaMerge(["flex", "h-max", "w-fit", "text-neutral-300", "transition", "hover:cursor-pointer", "hover:text-neutral-400"], {
     variants: {
         color: {
             light: "hover:text-white",
-            dark: "hover:text-slate-400",
+            dark: "hover:text-neutral-400",
         },
         defaultVariants: {
             color: "dark",
@@ -3040,7 +3050,7 @@ const cvaIndicatorPing = cvaMerge(["animate-ping-sm", "absolute", "inline-flex",
     variants: {
         color: {
             primary: "bg-primary-600",
-            secondary: "bg-secondary-600",
+            secondary: "bg-neutral-600",
             neutral: "bg-neutral-600",
             info: "bg-info-600",
             success: "bg-success-600",
@@ -3083,7 +3093,7 @@ const cvaIndicatorIconBackground = cvaMerge(["rounded-full", "items-center", "ju
     variants: {
         color: {
             primary: "bg-primary-100 text-primary-600",
-            secondary: "bg-secondary-100 text-secondary-600",
+            secondary: "bg-neutral-100 text-neutral-600",
             neutral: "bg-neutral-100 text-neutral-600",
             info: "bg-info-100 text-info-600",
             success: "bg-success-100 text-success-600",
@@ -3197,7 +3207,7 @@ const cvaKPIValueContainer = cvaMerge(["truncate", "whitespace-nowrap"], {
     },
 });
 
-const LoadingContent$1 = () => (jsx("div", { className: "flex h-11 flex-row items-center gap-3", "data-testid": "kpi-card-loading-content", children: jsx("div", { className: "w-full", children: jsx(SkeletonLines, { height: [14, 18], lines: 2, margin: "3", width: [80, 60] }) }) }));
+const LoadingContent$1 = () => (jsx("div", { className: "flex h-11 flex-row items-center gap-3", "data-testid": "kpi-card-loading-content", children: jsx("div", { className: "w-full", children: jsx(SkeletonLines, { gap: 3, height: [14, 18], lines: 2, width: [80, 60] }) }) }));
 /**
  * The KPI component is used to display KPIs.
  *
@@ -3229,7 +3239,7 @@ const cvaKPICard = cvaMerge([
             withTrends: ["min-h-[94px]"],
         },
         isClickable: {
-            true: ["hover:bg-slate-50", "component-card-border"],
+            true: ["hover:bg-neutral-50", "component-card-border"],
             false: [],
         },
         isActive: {
@@ -3559,7 +3569,7 @@ const cvaMenuList = cvaMerge([
     "z-popover",
     "bg-white",
     "border",
-    "border-slate-300",
+    "border-neutral-300",
     "grid",
     "min-w-[200px]",
     "max-w-[300px]",
@@ -3572,7 +3582,7 @@ const cvaMenuList = cvaMerge([
         },
     },
 });
-const cvaMenuListDivider = cvaMerge(["mx-[-4px]", "my-1", "min-h-px", "bg-slate-300"]);
+const cvaMenuListDivider = cvaMerge(["mx-[-4px]", "my-1", "min-h-px", "bg-neutral-300"]);
 const cvaMenuListMultiSelect = cvaMerge("hover:!bg-blue-200");
 const cvaMenuListItem = cvaMerge("max-w-full");
 
@@ -3653,9 +3663,9 @@ const cvaMenuItemLabel = cvaMerge(["flex-grow", "truncate", "text-black", "font-
     },
 });
 const cvaMenuItemPrefix = cvaMerge([
-    "text-secondary-400",
-    "hover:text-secondary-500",
-    "focus:text-secondary-500",
+    "text-neutral-400",
+    "hover:text-neutral-500",
+    "focus:text-neutral-500",
     "h-min",
     "leading-[0]",
     "flex",
@@ -3663,7 +3673,7 @@ const cvaMenuItemPrefix = cvaMerge([
 ], {
     variants: {
         selected: {
-            true: "text-secondary-600",
+            true: "text-neutral-600",
             false: "",
         },
         variant: {
@@ -3671,7 +3681,7 @@ const cvaMenuItemPrefix = cvaMerge([
             danger: ["text-danger-600", "hover:text-danger-700", "focus:bg-danger-200", "focus:text-danger-800"],
         },
         disabled: {
-            true: "text-secondary opacity-50",
+            true: "text-neutral opacity-50",
             false: "",
         },
     },
@@ -3680,10 +3690,10 @@ const cvaMenuItemPrefix = cvaMerge([
         disabled: false,
     },
 });
-const cvaMenuItemSuffix = cvaMerge(["text-secondary-400", "text-sm", "flex", "items-center"], {
+const cvaMenuItemSuffix = cvaMerge(["text-neutral-400", "text-sm", "flex", "items-center"], {
     variants: {
         selected: {
-            true: "text-secondary-600",
+            true: "text-neutral-600",
             false: "",
         },
         variant: {
@@ -3691,7 +3701,7 @@ const cvaMenuItemSuffix = cvaMerge(["text-secondary-400", "text-sm", "flex", "it
             danger: ["text-danger-600", "hover:text-danger-700", "focus:bg-danger-200", "focus:text-danger-800"],
         },
         disabled: {
-            true: "text-secondary opacity-50",
+            true: "text-neutral opacity-50",
             false: "",
         },
     },
@@ -3730,7 +3740,7 @@ const MenuItem = ({ className, dataTestId, label, children, selected = false, fo
                 e.stopPropagation();
             }
             onClick?.(e);
-        }, onKeyDown: handleKeyDown, role: "menuitem", tabIndex: disabled ? -1 : (tabIndex ?? 0), children: [prefix !== null && prefix !== undefined ? (jsx("div", { className: cvaMenuItemPrefix({ selected, variant, disabled }), "data-testid": dataTestId ? `${dataTestId}-prefix` : "menu-item-prefix", children: prefix })) : null, children !== null && children !== undefined && typeof children !== "string" ? (children) : (jsxs("div", { className: cvaMenuItemLabel({ variant, disabled }), "data-testid": dataTestId ? `${dataTestId}-label` : "menu-item-label", children: [optionPrefix !== null && optionPrefix !== undefined ? optionPrefix : null, children ?? label, optionLabelDescription !== undefined && optionLabelDescription !== "" ? (jsxs("span", { className: "text-secondary-400 ml-1", children: ["(", optionLabelDescription, ")"] })) : null] })), suffix !== null && suffix !== undefined ? (jsx("div", { className: cvaMenuItemSuffix({ selected, variant, disabled }), "data-testid": dataTestId ? `${dataTestId}-suffix` : "menu-item-suffix", children: suffix })) : null] }));
+        }, onKeyDown: handleKeyDown, role: "menuitem", tabIndex: disabled ? -1 : (tabIndex ?? 0), children: [prefix !== null && prefix !== undefined ? (jsx("div", { className: cvaMenuItemPrefix({ selected, variant, disabled }), "data-testid": dataTestId ? `${dataTestId}-prefix` : "menu-item-prefix", children: prefix })) : null, children !== null && children !== undefined && typeof children !== "string" ? (children) : (jsxs("div", { className: cvaMenuItemLabel({ variant, disabled }), "data-testid": dataTestId ? `${dataTestId}-label` : "menu-item-label", children: [optionPrefix !== null && optionPrefix !== undefined ? optionPrefix : null, children ?? label, optionLabelDescription !== undefined && optionLabelDescription !== "" ? (jsxs("span", { className: "ml-1 text-neutral-400", children: ["(", optionLabelDescription, ")"] })) : null] })), suffix !== null && suffix !== undefined ? (jsx("div", { className: cvaMenuItemSuffix({ selected, variant, disabled }), "data-testid": dataTestId ? `${dataTestId}-suffix` : "menu-item-suffix", children: suffix })) : null] }));
 };
 
 /**
@@ -3796,7 +3806,7 @@ const cvaMoreMenu = cvaMerge(["p-0"]);
  */
 const MoreMenu = ({ className, dataTestId, popoverProps, iconProps = {
     size: "medium",
-    className: "text-secondary-400",
+    className: "text-neutral-400",
 }, iconButtonProps = {
     size: "medium",
     circular: false,
@@ -3900,7 +3910,7 @@ const PageContent = ({ className, children, dataTestId, layout }) => {
     return (jsx("div", { className: cvaPageContent({ className, layout }), "data-testid": dataTestId ? dataTestId : "page-content", children: children }));
 };
 
-const LoadingContent = () => (jsx("div", { className: "flex flex-row items-center gap-3", "data-testid": "kpi-card-loading-content", children: jsx("div", { className: "w-full", children: jsx(SkeletonLines, { height: [16, 25], lines: 2, margin: "3", width: [50, 40] }) }) }));
+const LoadingContent = () => (jsx("div", { className: "flex flex-row items-center gap-3", "data-testid": "kpi-card-loading-content", children: jsx("div", { className: "w-full", children: jsx(SkeletonLines, { gap: 3, height: [16, 25], lines: 2, width: [50, 40] }) }) }));
 /**
  * The PageHeaderKpiMetrics component is used to render the KPI metrics in the PageHeader component.
  *
@@ -3915,7 +3925,7 @@ const PageHeaderKpiMetrics = ({ kpiMetrics }) => {
             if (kpi.loading === true) {
                 return jsx(LoadingContent, {}, `${kpi}-${index}`);
             }
-            return (jsxs("div", { className: "flex flex-col text-nowrap text-left", children: [jsx("span", { className: "text-xs text-slate-500", children: kpi.header }), jsxs("div", { className: "flex flex-row items-center gap-1", children: [jsx("span", { className: "text-lg font-medium text-slate-900", children: kpi.value }), kpi.unit ? jsx("span", { className: "text-xs text-slate-900", children: kpi.unit }) : null] })] }, `${kpi}-${index}`));
+            return (jsxs("div", { className: "flex flex-col text-nowrap text-left", children: [jsx("span", { className: "text-xs text-neutral-500", children: kpi.header }), jsxs("div", { className: "flex flex-row items-center gap-1", children: [jsx("span", { className: "text-lg font-medium text-neutral-900", children: kpi.value }), kpi.unit ? jsx("span", { className: "text-xs text-neutral-900", children: kpi.unit }) : null] })] }, `${kpi}-${index}`));
         }) }));
 };
 
@@ -3981,13 +3991,13 @@ const PageHeaderSecondaryActions = ({ actions, hasPrimaryAction = false, }) => {
 const cvaPageHeaderContainer = cvaMerge(["bg-white", "tu-page-header"], {
     variants: {
         withBorder: {
-            true: ["border-b", "border-b-secondary-200"],
+            true: ["border-b", "border-b-neutral-200"],
             false: "",
         },
     },
 });
 const cvaPageHeader = cvaMerge(["box-border", "py-4", "px-6", "flex", "items-center", "gap-y-1"]);
-const cvaPageHeaderHeading = cvaMerge(["text-slate-900", "text-xl", "font-semibold", "truncate"]);
+const cvaPageHeaderHeading = cvaMerge(["text-neutral-900", "text-xl", "font-semibold", "truncate"]);
 
 /**
  * The PageHeaderTitle component is used to display the title of the page header.
@@ -4309,7 +4319,7 @@ const cvaTabList = cvaMerge([
     "flex",
     "flex-row",
     "border-b",
-    "border-b-secondary-200",
+    "border-b-neutral-200",
     "overflow-auto",
     "no-scrollbar",
 ]);
@@ -4332,13 +4342,13 @@ const cvaTab = cvaMerge([
     "hover:border-b-transparent",
     "data-[state=active]:border-b-primary-600",
     "data-[state=active]:font-semibold",
-    "data-[state=active]:text-secondary-900",
+    "data-[state=active]:text-neutral-900",
     "data-[state=inactive]:font-medium",
-    "data-[state=inactive]:text-secondary-700",
-    "data-[state=inactive]:hover:text-secondary-900",
+    "data-[state=inactive]:text-neutral-700",
+    "data-[state=inactive]:hover:text-neutral-900",
     "disabled:cursor-not-allowed",
-    "data-[state=active]disabled:text-secondary-400",
-    "data-[state=inactive]:disabled:text-secondary-400",
+    "data-[state=active]disabled:text-neutral-400",
+    "data-[state=inactive]:disabled:text-neutral-400",
 ], {
     variants: {
         isFullWidth: {
@@ -4377,12 +4387,13 @@ const TabContent = ({ className, dataTestId, children, ...rest }) => {
 /**
  * Wrapper for radix tab list component.
  */
-const TabList = ({ className, dataTestId, children, ...rest }) => {
+const TabList = ({ className, dataTestId, children, autoScrollToActive = true, ...rest }) => {
     const listRef = useRef(null);
     useEffect(() => {
         const element = listRef.current;
-        if (!element)
+        if (!element) {
             return;
+        }
         const handleWheel = (event) => {
             const canScrollHorizontally = element.scrollWidth > element.clientWidth;
             if (canScrollHorizontally) {
@@ -4398,6 +4409,24 @@ const TabList = ({ className, dataTestId, children, ...rest }) => {
             element.removeEventListener("wheel", handleWheel);
         };
     }, []);
+    // Auto-scroll active tab into view when enabled
+    useLayoutEffect(() => {
+        if (!autoScrollToActive) {
+            return;
+        }
+        const element = listRef.current;
+        if (!element)
+            return;
+        // Find the active tab using a radix UI build in selector
+        const activeTab = element.querySelector('[aria-selected="true"]');
+        if (activeTab && typeof activeTab.scrollIntoView === "function") {
+            activeTab.scrollIntoView({
+                behavior: "instant",
+                block: "nearest",
+                inline: "center",
+            });
+        }
+    }, [autoScrollToActive]);
     return (jsx(List$1, { className: cvaTabList({ className }), "data-testid": dataTestId, ref: listRef, ...rest, children: children }));
 };
 
@@ -4582,7 +4611,7 @@ const cvaValueBar = cvaMerge([
     "w-full",
     "overflow-hidden",
     "rounded",
-    "bg-slate-100",
+    "bg-neutral-100",
     "appearance-none",
     "[&::-webkit-progress-bar]:bg-transparent",
     "[&::-webkit-progress-value]:bg-current",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "1.9.13",
+  "version": "1.9.18",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -16,12 +16,12 @@
     "@floating-ui/react": "^0.26.25",
     "string-ts": "^2.0.0",
     "tailwind-merge": "^2.0.0",
-    "@trackunit/ui-design-tokens": "1.7.8",
-    "@trackunit/css-class-variance-utilities": "1.7.8",
-    "@trackunit/shared-utils": "1.9.8",
-    "@trackunit/ui-icons": "1.7.10",
-    "@trackunit/react-table-pagination": "1.7.8",
-    "@trackunit/react-test-setup": "1.4.8",
+    "@trackunit/ui-design-tokens": "1.7.10",
+    "@trackunit/css-class-variance-utilities": "1.7.10",
+    "@trackunit/shared-utils": "1.9.10",
+    "@trackunit/ui-icons": "1.7.12",
+    "@trackunit/react-table-pagination": "1.7.10",
+    "@trackunit/react-test-setup": "1.4.10",
     "@tanstack/react-router": "1.114.29",
     "es-toolkit": "^1.39.10"
   },

package/src/components/SkeletonLines/SkeletonLines.d.ts

@@ -1,5 +1,9 @@
 import { CommonProps } from "../../common/CommonProps";
-type SkeletonDimension = number | string | Array<number | string>;
+type SizeUnit = "px" | "%" | "rem" | "em";
+type SizeValue = `${number}${SizeUnit}` | "inherit" | (string & {});
+type GapUnit = "px" | "rem" | "em";
+type GapValue = `${number}${GapUnit}` | "inherit";
+type SkeletonDimension = number | SizeValue | Array<number | SizeValue>;
 export interface SkeletonLinesProps extends CommonProps {
     /**
      * The number of lines to display.
@@ -11,15 +15,22 @@ export interface SkeletonLinesProps extends CommonProps {
     height?: SkeletonDimension;
     /**
      * The width of each line. Can be a number, string, or an array of numbers/strings.
+     * All width values are automatically wrapped in min(width, maxWidth) to prevent overflow.
      */
     width?: SkeletonDimension;
     /**
-     * Gap between skeleton lines in pixels.
+     * Gap between skeleton lines.
      */
-    margin?: number | string;
+    gap?: number | GapValue;
+    /**
+     * Maximum width percentage to constrain skeleton lines. Defaults to "100%".
+     * Used in CSS min() function: min(width, maxWidth). Examples: "80%", "120%", "50%"
+     */
+    maxWidth?: `${number}%`;
 }
 /**
  * Display placeholder lines before the data gets loaded to reduce load-time frustration.
+ * All width values are automatically constrained using CSS min() function to prevent overflow.
  */
 export declare const SkeletonLines: import("react").NamedExoticComponent<SkeletonLinesProps>;
 export {};

package/src/components/SkeletonLines/skeleton-utils.d.ts

@@ -9,4 +9,4 @@
 export declare const getResponsiveRandomWidthPercentage: ({ min, max }: {
     min: number;
     max: number;
-}) => string;
+}) => `${number}%`;

package/src/components/Tabs/TabList.d.ts

@@ -14,8 +14,14 @@ export interface TabListProps extends TabsListProps {
      * An ID that can be used in tests to locate the component.
      */
     dataTestId?: string;
+    /**
+     * If set to true, automatically scrolls the active tab into view when changed.
+     *
+     * @default true
+     */
+    autoScrollToActive?: boolean;
 }
 /**
  * Wrapper for radix tab list component.
  */
-export declare const TabList: ({ className, dataTestId, children, ...rest }: TabListProps) => ReactElement;
+export declare const TabList: ({ className, dataTestId, children, autoScrollToActive, ...rest }: TabListProps) => ReactElement;