@trackunit/react-components 1.22.27 → 1.22.29

package/index.cjs.js

@@ -1,6 +1,7 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var tailwindMerge = require('tailwind-merge');
 var sharedUtils = require('@trackunit/shared-utils');
 var react = require('react');
 var uiDesignTokens = require('@trackunit/ui-design-tokens');
@@ -15,7 +16,6 @@ var reactSlot = require('@radix-ui/react-slot');
 var reactRouter = require('@tanstack/react-router');
 var esToolkit = require('es-toolkit');
 var react$1 = require('@floating-ui/react');
-var tailwindMerge = require('tailwind-merge');
 var reactVirtual = require('@tanstack/react-virtual');
 var reactHelmetAsync = require('react-helmet-async');
 var reactTabs = require('@radix-ui/react-tabs');
@@ -359,7 +359,7 @@ const buildLibraryHref = (slug) => {
  * A component used to display the package name and version in the Storybook docs.
  * The package-name tag links to the matching section on the "Libraries" overview page.
  */
-const PackageNameStoryComponent = ({ packageJSON }) => {
+const PackageNameStoryComponent = ({ packageJSON, className, "data-testid": dataTestId, style, ref, }) => {
     const name = packageJSON?.name;
     const slug = name ? toLibrarySlug(name) : undefined;
     const href = slug ? buildLibraryHref(slug) : undefined;
@@ -373,7 +373,7 @@ const PackageNameStoryComponent = ({ packageJSON }) => {
         if (top)
             top.location.href = href;
     };
-    return (jsxRuntime.jsxs("div", { className: "flex gap-2", children: [href ? (jsxRuntime.jsx("a", { "aria-label": `Learn more about ${name}`, className: "no-underline", href: href, onClick: onClick, target: "_top", title: `Learn more about ${name}`, children: jsxRuntime.jsx(Tag, { color: "neutral", children: name }) })) : (jsxRuntime.jsx(Tag, { color: "neutral", children: name })), packageJSON?.version ? jsxRuntime.jsxs(Tag, { color: "neutral", children: ["v", packageJSON.version] }) : null] }));
+    return (jsxRuntime.jsxs("div", { className: tailwindMerge.twMerge("flex gap-2", className), "data-testid": dataTestId, ref: ref, style: style, children: [href ? (jsxRuntime.jsx("a", { "aria-label": `Learn more about ${name}`, className: "no-underline", href: href, onClick: onClick, target: "_top", title: `Learn more about ${name}`, children: jsxRuntime.jsx(Tag, { color: "neutral", children: name }) })) : (jsxRuntime.jsx(Tag, { color: "neutral", children: name })), packageJSON?.version ? jsxRuntime.jsxs(Tag, { color: "neutral", children: ["v", packageJSON.version] }) : null] }));
 };
 
 const docs = {
@@ -1558,15 +1558,16 @@ const Breadcrumb = ({ className, "data-testid": dataTestId, breadcrumbItems, onC
  *
  * @param {BreadcrumbContainerProps} props - The props for the BreadcrumbContainer component
  */
-const BreadcrumbContainer = ({ "data-testid": dataTestId, breadcrumbItems, }) => {
+const BreadcrumbContainer = ({ className, "data-testid": dataTestId, breadcrumbItems, style, ref, }) => {
     const { isMd: isMediumScreen, isXs: isSmallScreen } = useViewportBreakpoints();
+    const sharedContainerProps = { className, "data-testid": dataTestId, ref, style };
     if (isMediumScreen) {
-        return jsxRuntime.jsx(BreadcrumbForMediumScreen, { breadcrumbItems: breadcrumbItems, "data-testid": `mediumScreen-${dataTestId}` });
+        return (jsxRuntime.jsx("div", { ...sharedContainerProps, children: jsxRuntime.jsx(BreadcrumbForMediumScreen, { breadcrumbItems: breadcrumbItems, "data-testid": `mediumScreen-${dataTestId}` }) }));
     }
     if (isSmallScreen) {
-        return jsxRuntime.jsx(BreadcrumbForSmallScreen, { breadcrumbItems: breadcrumbItems, "data-testid": `smallScreen-${dataTestId}` });
+        return (jsxRuntime.jsx("div", { ...sharedContainerProps, children: jsxRuntime.jsx(BreadcrumbForSmallScreen, { breadcrumbItems: breadcrumbItems, "data-testid": `smallScreen-${dataTestId}` }) }));
     }
-    return jsxRuntime.jsx(BreadcrumbForLargeScreen, { breadcrumbItems: breadcrumbItems, "data-testid": `largeScreen-${dataTestId}` });
+    return (jsxRuntime.jsx("div", { ...sharedContainerProps, children: jsxRuntime.jsx(BreadcrumbForLargeScreen, { breadcrumbItems: breadcrumbItems, "data-testid": `largeScreen-${dataTestId}` }) }));
 };
 
 /**
@@ -1592,8 +1593,8 @@ const BreadcrumbContainer = ({ "data-testid": dataTestId, breadcrumbItems, }) =>
  * @param {StarButtonProps} props - The props for the StarButton component
  * @returns {ReactElement} StarButton component
  */
-const StarButton = ({ starred, onClick, ref }) => {
-    return (jsxRuntime.jsx("div", { "data-test-id": "starred-filter", onClick: onClick, ref: ref, children: jsxRuntime.jsx(Icon, { color: starred ? "primary" : "neutral", name: "Star", size: "medium" }) }));
+const StarButton = ({ starred, onClick, className, "data-testid": dataTestId, style, ref, }) => {
+    return (jsxRuntime.jsx("div", { className: className, "data-testid": dataTestId ?? "starred-filter", onClick: onClick, ref: ref, style: style, children: jsxRuntime.jsx(Icon, { color: starred ? "primary" : "neutral", name: "Star", size: "medium" }) }));
 };
 
 const cvaCard = cssClassVarianceUtilities.cvaMerge([
@@ -3685,9 +3686,10 @@ function createGrid() {
  * }
  * ```
  */
-function GridAreas({ slots, css, containerProps, validationRef, className, style, children, asChild = false, }) {
+function GridAreas({ slots, css, containerProps, validationRef, className, "data-testid": dataTestId, ref, style, children, asChild = false, }) {
     const Comp = asChild ? reactSlot.Slot : "div";
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("style", { children: css }), jsxRuntime.jsx(Comp, { ref: validationRef, ...containerProps, className: tailwindMerge.twMerge("@container grid", className), style: style, children: children(slots) })] }));
+    const mergedRef = useMergeRefs([validationRef, ref]);
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("style", { children: css }), jsxRuntime.jsx(Comp, { ...containerProps, className: tailwindMerge.twMerge("@container grid", className), "data-testid": dataTestId, ref: mergedRef, style: style, children: children(slots) })] }));
 }
 
 /**
@@ -5666,15 +5668,16 @@ const ListLoadingIndicator = ({ type, hasThumbnail, thumbnailShape, hasDescripti
  * );
  * ```
  */
-const List = ({ children, className, "data-testid": dataTestId, style, 
+const List = ({ children, className, "data-testid": dataTestId, style, ref, 
 // UseListResult properties
 containerRef, listRef, rows, getListItemProps, header, loadingIndicator, shouldShowLoaderAtIndex, count, isScrolling, separator, topSeparatorOnScroll, isAtTop, contentFillsContainer, 
 // Unused but part of UseListResult interface (can be used from parent)
 scrollOffset: _scrollOffset, getTotalSize: _getTotalSize, getVirtualItems: _getVirtualItems, scrollToOffset: _scrollToOffset, scrollToIndex: _scrollToIndex, measure: _measure, }) => {
+    const mergedContainerRef = useMergeRefs([containerRef, ref]);
     return (jsxRuntime.jsx("div", { className: cvaListContainer({
             withTopSeparator: topSeparatorOnScroll && !isAtTop,
             className,
-        }), "data-is-scrolling": isScrolling, "data-testid": dataTestId, ref: containerRef, style: style, children: jsxRuntime.jsx("ul", { className: cvaList(), ref: listRef, children: rows.map(row => {
+        }), "data-is-scrolling": isScrolling, "data-testid": dataTestId, ref: mergedContainerRef, style: style, children: jsxRuntime.jsx("ul", { className: cvaList(), ref: listRef, children: rows.map(row => {
                 // Generate list item props with clean separator styling
                 const listItemProps = getListItemProps(row, {
                     className: cvaListItem$1({
@@ -6216,8 +6219,8 @@ const cvaMenuListItem = cssClassVarianceUtilities.cvaMerge("max-w-full");
  * ```
  * @returns {ReactElement} MenuDivider component
  */
-const MenuDivider = ({ style }) => {
-    return jsxRuntime.jsx("div", { className: cvaMenuListDivider(), "data-testid": "menu-divider", style: style });
+const MenuDivider = ({ className, style, "data-testid": dataTestId, ref }) => {
+    return (jsxRuntime.jsx("div", { className: cvaMenuListDivider({ className }), "data-testid": dataTestId ?? "menu-divider", ref: ref, style: style }));
 };
 
 /**
@@ -6890,9 +6893,13 @@ function ActionRenderer({ action, isMenuItem = false, externalOnClick }) {
  * @param {Array<PageHeaderSecondaryActionType>} props.actions - The secondary actions to render
  * @param {boolean} [props.hasPrimaryAction] - Whether there is a primary action present
  * @param {boolean} [props.groupActions] - Whether to group actions in a More Menu regardless of action count
+ * @param {string} [props.className] - A custom class name for the action container
+ * @param {string} [props."data-testid"] - An ID used to locate the container in tests
+ * @param {object} [props.style] - Inline styles for the action container
+ * @param {unknown} [props.ref] - Ref for the action container element
  * @returns {ReactElement | null} PageHeaderSecondaryActions component
  */
-const PageHeaderSecondaryActions = ({ actions, hasPrimaryAction = false, groupActions = false, }) => {
+const PageHeaderSecondaryActions = ({ actions, hasPrimaryAction = false, groupActions = false, className, "data-testid": dataTestId, style, ref, }) => {
     const enabledActions = react.useMemo(() => actions.filter(action => action.hidden === false || action.hidden === undefined), [actions]);
     // If there are no enabled actions, don't render anything
     if (enabledActions.length === 0) {
@@ -6909,10 +6916,10 @@ const PageHeaderSecondaryActions = ({ actions, hasPrimaryAction = false, groupAc
                 return [danger, [...others, action]];
             }
         }, [[], []]);
-        return (jsxRuntime.jsx(MoreMenu, { "data-testid": "secondary-actions-more-menu", iconButtonProps: { size: "small", variant: "secondary" }, children: close => (jsxRuntime.jsxs(MenuList, { className: "min-w-[160px]", children: [otherActions.map((action, index) => (jsxRuntime.jsx(ActionRenderer, { action: action, externalOnClick: close, isMenuItem: true }, `${action.actionText}-${index}`))), dangerActions.length > 0 ? jsxRuntime.jsx(MenuDivider, {}) : null, dangerActions.map((action, index) => (jsxRuntime.jsx(ActionRenderer, { action: action, externalOnClick: close, isMenuItem: true }, `${action.actionText}-${index}`)))] })) }));
+        return (jsxRuntime.jsx("div", { className: className, "data-testid": dataTestId, ref: ref, style: style, children: jsxRuntime.jsx(MoreMenu, { "data-testid": "secondary-actions-more-menu", iconButtonProps: { size: "small", variant: "secondary" }, children: close => (jsxRuntime.jsxs(MenuList, { className: "min-w-[160px]", children: [otherActions.map((action, index) => (jsxRuntime.jsx(ActionRenderer, { action: action, externalOnClick: close, isMenuItem: true }, `${action.actionText}-${index}`))), dangerActions.length > 0 ? jsxRuntime.jsx(MenuDivider, {}) : null, dangerActions.map((action, index) => (jsxRuntime.jsx(ActionRenderer, { action: action, externalOnClick: close, isMenuItem: true }, `${action.actionText}-${index}`)))] })) }) }));
     }
     // Otherwise, render them inline as buttons
-    return (jsxRuntime.jsx("div", { className: "flex flex-row items-center gap-2", children: enabledActions
+    return (jsxRuntime.jsx("div", { className: tailwindMerge.twMerge("flex flex-row items-center gap-2", className), "data-testid": dataTestId, ref: ref, style: style, children: enabledActions
             .toSorted((a, b) => {
             if (a.variant === "secondary" && b.variant === "secondary-danger") {
                 return 1;
@@ -9900,6 +9907,10 @@ const cvaTab = cssClassVarianceUtilities.cvaMerge([
  * ### When not to use
  * Do not use Tab outside of a `TabList`/`Tabs` context. For standalone buttons, use `Button`.
  *
+ * ### `data-testid` and `asChild`
+ * `data-testid` is applied to the rendered element. When `asChild` is used and the child already
+ * defines its own `data-testid`, the child's value wins so consumers can label the actual DOM node.
+ *
  * @example Tab with icon and badge suffix
  * ```tsx
  * import { Tabs, TabList, Tab, TabContent, Badge } from "@trackunit/react-components";
@@ -9922,14 +9933,15 @@ const cvaTab = cssClassVarianceUtilities.cvaMerge([
  */
 const Tab = ({ value, isFullWidth = false, iconName = undefined, "data-testid": dataTestId, className, children, suffix, asChild = false, appendTabStylesToChildIfAsChild = true, ref, ...rest }) => {
     const renderContent = () => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [iconName !== undefined ? jsxRuntime.jsx(Icon, { name: iconName, size: "small" }) : null, react.isValidElement(children) ? children.props.children : children, suffix] }));
-    const commonProps = {
+    const sharedProps = {
         className: appendTabStylesToChildIfAsChild ? cvaTab({ className, isFullWidth }) : className,
         ...rest,
     };
     return (jsxRuntime.jsx(reactTabs.Trigger, { asChild: true, ref: ref, value: value, children: asChild && typeof children !== "string" ? (react.cloneElement(children, {
-            ...commonProps,
+            ...sharedProps,
+            "data-testid": children.props["data-testid"] ?? dataTestId,
             children: renderContent(),
-        })) : (jsxRuntime.jsx("button", { ...commonProps, "data-testid": dataTestId, children: renderContent() })) }));
+        })) : (jsxRuntime.jsx("button", { ...sharedProps, "data-testid": dataTestId, children: renderContent() })) }));
 };
 
 /**
@@ -10373,13 +10385,13 @@ const getValueTextVariant = (size, sum, segments, total) => {
  * SegmentedValueBar displays multiple colored segments on a bar to visualize values relative to a total.
  * Supports optional tooltips per segment, showing value and optionally a label.
  */
-const SegmentedValueBar = ({ segments, total, size = "small", showValue = false, displayValue, unit, valueColor, showTooltip = false, tooltipUnit, valueWidth, className, "data-testid": dataTestId, style, }) => {
+const SegmentedValueBar = ({ segments, total, size = "small", showValue = false, displayValue, unit, valueColor, showTooltip = false, tooltipUnit, valueWidth, className, "data-testid": dataTestId, ref, style, }) => {
     const computedSegments = computeSegments(segments, total);
     const sum = total > 0 ? computeSum(segments) : 0;
     const valueText = formatValue(displayValue ?? sum, unit);
     const canShowValue = showValue && size !== "extraSmall";
     const valueTextClassName = cvaSegmentedValueBarText({ size: getValueTextVariant(size, sum, segments, total) });
-    return (jsxRuntime.jsxs("span", { className: valueBarContainerClassName, "data-testid": dataTestId, style: style, children: [jsxRuntime.jsx("div", { "aria-label": valueText, className: cvaSegmentedValueBar({ className, size }), "data-testid": dataTestId ? `${dataTestId}-track` : undefined, children: computedSegments.map((segment, index) => {
+    return (jsxRuntime.jsxs("span", { className: valueBarContainerClassName, "data-testid": dataTestId, ref: ref, style: style, children: [jsxRuntime.jsx("div", { "aria-label": valueText, className: cvaSegmentedValueBar({ className, size }), "data-testid": dataTestId ? `${dataTestId}-track` : undefined, children: computedSegments.map((segment, index) => {
                     const tooltipLabel = segment.label
                         ? `${segment.label}: ${formatValue(segment.value, tooltipUnit ?? unit)}`
                         : formatValue(segment.value, tooltipUnit ?? unit);

package/index.esm.js

@@ -1,4 +1,5 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { twMerge } from 'tailwind-merge';
 import { objectKeys, uuidv4, parseTailwindArbitraryValue, objectEntries, nonNullable, objectValues, filterByMultiple } from '@trackunit/shared-utils';
 import { useRef, useMemo, useEffect, useState, useLayoutEffect, useCallback, createElement, createContext, useContext, isValidElement, cloneElement, Fragment as Fragment$1, memo, forwardRef, useId, useReducer, Children } from 'react';
 import { rentalStatusPalette, sitesPalette, utilizationPalette, activityPalette, criticalityPalette, generalPalette, intentPalette, themeScreenSizeAsNumber, themeContainerSize, color } from '@trackunit/ui-design-tokens';
@@ -13,7 +14,6 @@ import { Slot, Slottable } from '@radix-ui/react-slot';
 import { Link, useBlocker, useNavigate, useLocation, useRouter, useSearch } from '@tanstack/react-router';
 import { isEqual, omit } from 'es-toolkit';
 import { useFloating, offset, flip, shift, size, autoUpdate, useClick, useDismiss, useHover as useHover$1, safePolygon, useRole, useInteractions, FloatingPortal, useMergeRefs as useMergeRefs$1, FloatingFocusManager, arrow, useTransitionStatus, FloatingArrow } from '@floating-ui/react';
-import { twMerge } from 'tailwind-merge';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import { HelmetProvider, Helmet } from 'react-helmet-async';
 import { Trigger, Content as Content$1, List as List$1, Root } from '@radix-ui/react-tabs';
@@ -357,7 +357,7 @@ const buildLibraryHref = (slug) => {
  * A component used to display the package name and version in the Storybook docs.
  * The package-name tag links to the matching section on the "Libraries" overview page.
  */
-const PackageNameStoryComponent = ({ packageJSON }) => {
+const PackageNameStoryComponent = ({ packageJSON, className, "data-testid": dataTestId, style, ref, }) => {
     const name = packageJSON?.name;
     const slug = name ? toLibrarySlug(name) : undefined;
     const href = slug ? buildLibraryHref(slug) : undefined;
@@ -371,7 +371,7 @@ const PackageNameStoryComponent = ({ packageJSON }) => {
         if (top)
             top.location.href = href;
     };
-    return (jsxs("div", { className: "flex gap-2", children: [href ? (jsx("a", { "aria-label": `Learn more about ${name}`, className: "no-underline", href: href, onClick: onClick, target: "_top", title: `Learn more about ${name}`, children: jsx(Tag, { color: "neutral", children: name }) })) : (jsx(Tag, { color: "neutral", children: name })), packageJSON?.version ? jsxs(Tag, { color: "neutral", children: ["v", packageJSON.version] }) : null] }));
+    return (jsxs("div", { className: twMerge("flex gap-2", className), "data-testid": dataTestId, ref: ref, style: style, children: [href ? (jsx("a", { "aria-label": `Learn more about ${name}`, className: "no-underline", href: href, onClick: onClick, target: "_top", title: `Learn more about ${name}`, children: jsx(Tag, { color: "neutral", children: name }) })) : (jsx(Tag, { color: "neutral", children: name })), packageJSON?.version ? jsxs(Tag, { color: "neutral", children: ["v", packageJSON.version] }) : null] }));
 };
 
 const docs = {
@@ -1556,15 +1556,16 @@ const Breadcrumb = ({ className, "data-testid": dataTestId, breadcrumbItems, onC
  *
  * @param {BreadcrumbContainerProps} props - The props for the BreadcrumbContainer component
  */
-const BreadcrumbContainer = ({ "data-testid": dataTestId, breadcrumbItems, }) => {
+const BreadcrumbContainer = ({ className, "data-testid": dataTestId, breadcrumbItems, style, ref, }) => {
     const { isMd: isMediumScreen, isXs: isSmallScreen } = useViewportBreakpoints();
+    const sharedContainerProps = { className, "data-testid": dataTestId, ref, style };
     if (isMediumScreen) {
-        return jsx(BreadcrumbForMediumScreen, { breadcrumbItems: breadcrumbItems, "data-testid": `mediumScreen-${dataTestId}` });
+        return (jsx("div", { ...sharedContainerProps, children: jsx(BreadcrumbForMediumScreen, { breadcrumbItems: breadcrumbItems, "data-testid": `mediumScreen-${dataTestId}` }) }));
     }
     if (isSmallScreen) {
-        return jsx(BreadcrumbForSmallScreen, { breadcrumbItems: breadcrumbItems, "data-testid": `smallScreen-${dataTestId}` });
+        return (jsx("div", { ...sharedContainerProps, children: jsx(BreadcrumbForSmallScreen, { breadcrumbItems: breadcrumbItems, "data-testid": `smallScreen-${dataTestId}` }) }));
     }
-    return jsx(BreadcrumbForLargeScreen, { breadcrumbItems: breadcrumbItems, "data-testid": `largeScreen-${dataTestId}` });
+    return (jsx("div", { ...sharedContainerProps, children: jsx(BreadcrumbForLargeScreen, { breadcrumbItems: breadcrumbItems, "data-testid": `largeScreen-${dataTestId}` }) }));
 };
 
 /**
@@ -1590,8 +1591,8 @@ const BreadcrumbContainer = ({ "data-testid": dataTestId, breadcrumbItems, }) =>
  * @param {StarButtonProps} props - The props for the StarButton component
  * @returns {ReactElement} StarButton component
  */
-const StarButton = ({ starred, onClick, ref }) => {
-    return (jsx("div", { "data-test-id": "starred-filter", onClick: onClick, ref: ref, children: jsx(Icon, { color: starred ? "primary" : "neutral", name: "Star", size: "medium" }) }));
+const StarButton = ({ starred, onClick, className, "data-testid": dataTestId, style, ref, }) => {
+    return (jsx("div", { className: className, "data-testid": dataTestId ?? "starred-filter", onClick: onClick, ref: ref, style: style, children: jsx(Icon, { color: starred ? "primary" : "neutral", name: "Star", size: "medium" }) }));
 };
 
 const cvaCard = cvaMerge([
@@ -3683,9 +3684,10 @@ function createGrid() {
  * }
  * ```
  */
-function GridAreas({ slots, css, containerProps, validationRef, className, style, children, asChild = false, }) {
+function GridAreas({ slots, css, containerProps, validationRef, className, "data-testid": dataTestId, ref, style, children, asChild = false, }) {
     const Comp = asChild ? Slot : "div";
-    return (jsxs(Fragment, { children: [jsx("style", { children: css }), jsx(Comp, { ref: validationRef, ...containerProps, className: twMerge("@container grid", className), style: style, children: children(slots) })] }));
+    const mergedRef = useMergeRefs([validationRef, ref]);
+    return (jsxs(Fragment, { children: [jsx("style", { children: css }), jsx(Comp, { ...containerProps, className: twMerge("@container grid", className), "data-testid": dataTestId, ref: mergedRef, style: style, children: children(slots) })] }));
 }
 
 /**
@@ -5664,15 +5666,16 @@ const ListLoadingIndicator = ({ type, hasThumbnail, thumbnailShape, hasDescripti
  * );
  * ```
  */
-const List = ({ children, className, "data-testid": dataTestId, style, 
+const List = ({ children, className, "data-testid": dataTestId, style, ref, 
 // UseListResult properties
 containerRef, listRef, rows, getListItemProps, header, loadingIndicator, shouldShowLoaderAtIndex, count, isScrolling, separator, topSeparatorOnScroll, isAtTop, contentFillsContainer, 
 // Unused but part of UseListResult interface (can be used from parent)
 scrollOffset: _scrollOffset, getTotalSize: _getTotalSize, getVirtualItems: _getVirtualItems, scrollToOffset: _scrollToOffset, scrollToIndex: _scrollToIndex, measure: _measure, }) => {
+    const mergedContainerRef = useMergeRefs([containerRef, ref]);
     return (jsx("div", { className: cvaListContainer({
             withTopSeparator: topSeparatorOnScroll && !isAtTop,
             className,
-        }), "data-is-scrolling": isScrolling, "data-testid": dataTestId, ref: containerRef, style: style, children: jsx("ul", { className: cvaList(), ref: listRef, children: rows.map(row => {
+        }), "data-is-scrolling": isScrolling, "data-testid": dataTestId, ref: mergedContainerRef, style: style, children: jsx("ul", { className: cvaList(), ref: listRef, children: rows.map(row => {
                 // Generate list item props with clean separator styling
                 const listItemProps = getListItemProps(row, {
                     className: cvaListItem$1({
@@ -6214,8 +6217,8 @@ const cvaMenuListItem = cvaMerge("max-w-full");
  * ```
  * @returns {ReactElement} MenuDivider component
  */
-const MenuDivider = ({ style }) => {
-    return jsx("div", { className: cvaMenuListDivider(), "data-testid": "menu-divider", style: style });
+const MenuDivider = ({ className, style, "data-testid": dataTestId, ref }) => {
+    return (jsx("div", { className: cvaMenuListDivider({ className }), "data-testid": dataTestId ?? "menu-divider", ref: ref, style: style }));
 };
 
 /**
@@ -6888,9 +6891,13 @@ function ActionRenderer({ action, isMenuItem = false, externalOnClick }) {
  * @param {Array<PageHeaderSecondaryActionType>} props.actions - The secondary actions to render
  * @param {boolean} [props.hasPrimaryAction] - Whether there is a primary action present
  * @param {boolean} [props.groupActions] - Whether to group actions in a More Menu regardless of action count
+ * @param {string} [props.className] - A custom class name for the action container
+ * @param {string} [props."data-testid"] - An ID used to locate the container in tests
+ * @param {object} [props.style] - Inline styles for the action container
+ * @param {unknown} [props.ref] - Ref for the action container element
  * @returns {ReactElement | null} PageHeaderSecondaryActions component
  */
-const PageHeaderSecondaryActions = ({ actions, hasPrimaryAction = false, groupActions = false, }) => {
+const PageHeaderSecondaryActions = ({ actions, hasPrimaryAction = false, groupActions = false, className, "data-testid": dataTestId, style, ref, }) => {
     const enabledActions = useMemo(() => actions.filter(action => action.hidden === false || action.hidden === undefined), [actions]);
     // If there are no enabled actions, don't render anything
     if (enabledActions.length === 0) {
@@ -6907,10 +6914,10 @@ const PageHeaderSecondaryActions = ({ actions, hasPrimaryAction = false, groupAc
                 return [danger, [...others, action]];
             }
         }, [[], []]);
-        return (jsx(MoreMenu, { "data-testid": "secondary-actions-more-menu", iconButtonProps: { size: "small", variant: "secondary" }, children: close => (jsxs(MenuList, { className: "min-w-[160px]", children: [otherActions.map((action, index) => (jsx(ActionRenderer, { action: action, externalOnClick: close, isMenuItem: true }, `${action.actionText}-${index}`))), dangerActions.length > 0 ? jsx(MenuDivider, {}) : null, dangerActions.map((action, index) => (jsx(ActionRenderer, { action: action, externalOnClick: close, isMenuItem: true }, `${action.actionText}-${index}`)))] })) }));
+        return (jsx("div", { className: className, "data-testid": dataTestId, ref: ref, style: style, children: jsx(MoreMenu, { "data-testid": "secondary-actions-more-menu", iconButtonProps: { size: "small", variant: "secondary" }, children: close => (jsxs(MenuList, { className: "min-w-[160px]", children: [otherActions.map((action, index) => (jsx(ActionRenderer, { action: action, externalOnClick: close, isMenuItem: true }, `${action.actionText}-${index}`))), dangerActions.length > 0 ? jsx(MenuDivider, {}) : null, dangerActions.map((action, index) => (jsx(ActionRenderer, { action: action, externalOnClick: close, isMenuItem: true }, `${action.actionText}-${index}`)))] })) }) }));
     }
     // Otherwise, render them inline as buttons
-    return (jsx("div", { className: "flex flex-row items-center gap-2", children: enabledActions
+    return (jsx("div", { className: twMerge("flex flex-row items-center gap-2", className), "data-testid": dataTestId, ref: ref, style: style, children: enabledActions
             .toSorted((a, b) => {
             if (a.variant === "secondary" && b.variant === "secondary-danger") {
                 return 1;
@@ -9898,6 +9905,10 @@ const cvaTab = cvaMerge([
  * ### When not to use
  * Do not use Tab outside of a `TabList`/`Tabs` context. For standalone buttons, use `Button`.
  *
+ * ### `data-testid` and `asChild`
+ * `data-testid` is applied to the rendered element. When `asChild` is used and the child already
+ * defines its own `data-testid`, the child's value wins so consumers can label the actual DOM node.
+ *
  * @example Tab with icon and badge suffix
  * ```tsx
  * import { Tabs, TabList, Tab, TabContent, Badge } from "@trackunit/react-components";
@@ -9920,14 +9931,15 @@ const cvaTab = cvaMerge([
  */
 const Tab = ({ value, isFullWidth = false, iconName = undefined, "data-testid": dataTestId, className, children, suffix, asChild = false, appendTabStylesToChildIfAsChild = true, ref, ...rest }) => {
     const renderContent = () => (jsxs(Fragment, { children: [iconName !== undefined ? jsx(Icon, { name: iconName, size: "small" }) : null, isValidElement(children) ? children.props.children : children, suffix] }));
-    const commonProps = {
+    const sharedProps = {
         className: appendTabStylesToChildIfAsChild ? cvaTab({ className, isFullWidth }) : className,
         ...rest,
     };
     return (jsx(Trigger, { asChild: true, ref: ref, value: value, children: asChild && typeof children !== "string" ? (cloneElement(children, {
-            ...commonProps,
+            ...sharedProps,
+            "data-testid": children.props["data-testid"] ?? dataTestId,
             children: renderContent(),
-        })) : (jsx("button", { ...commonProps, "data-testid": dataTestId, children: renderContent() })) }));
+        })) : (jsx("button", { ...sharedProps, "data-testid": dataTestId, children: renderContent() })) }));
 };
 
 /**
@@ -10371,13 +10383,13 @@ const getValueTextVariant = (size, sum, segments, total) => {
  * SegmentedValueBar displays multiple colored segments on a bar to visualize values relative to a total.
  * Supports optional tooltips per segment, showing value and optionally a label.
  */
-const SegmentedValueBar = ({ segments, total, size = "small", showValue = false, displayValue, unit, valueColor, showTooltip = false, tooltipUnit, valueWidth, className, "data-testid": dataTestId, style, }) => {
+const SegmentedValueBar = ({ segments, total, size = "small", showValue = false, displayValue, unit, valueColor, showTooltip = false, tooltipUnit, valueWidth, className, "data-testid": dataTestId, ref, style, }) => {
     const computedSegments = computeSegments(segments, total);
     const sum = total > 0 ? computeSum(segments) : 0;
     const valueText = formatValue(displayValue ?? sum, unit);
     const canShowValue = showValue && size !== "extraSmall";
     const valueTextClassName = cvaSegmentedValueBarText({ size: getValueTextVariant(size, sum, segments, total) });
-    return (jsxs("span", { className: valueBarContainerClassName, "data-testid": dataTestId, style: style, children: [jsx("div", { "aria-label": valueText, className: cvaSegmentedValueBar({ className, size }), "data-testid": dataTestId ? `${dataTestId}-track` : undefined, children: computedSegments.map((segment, index) => {
+    return (jsxs("span", { className: valueBarContainerClassName, "data-testid": dataTestId, ref: ref, style: style, children: [jsx("div", { "aria-label": valueText, className: cvaSegmentedValueBar({ className, size }), "data-testid": dataTestId ? `${dataTestId}-track` : undefined, children: computedSegments.map((segment, index) => {
                     const tooltipLabel = segment.label
                         ? `${segment.label}: ${formatValue(segment.value, tooltipUnit ?? unit)}`
                         : formatValue(segment.value, tooltipUnit ?? unit);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "1.22.27",
+  "version": "1.22.29",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {

package/src/common/PackageNameStoryComponent.d.ts

@@ -1,5 +1,8 @@
 import { ReactElement } from "react";
-interface PackageNameStoryComponentProps {
+import { CommonProps } from "./CommonProps";
+import { Refable } from "./Refable";
+import type { Styleable } from "./Styleable";
+interface PackageNameStoryComponentProps extends CommonProps, Styleable, Refable<HTMLDivElement> {
     packageJSON?: {
         name?: string;
         version?: string;
@@ -9,5 +12,5 @@ interface PackageNameStoryComponentProps {
  * A component used to display the package name and version in the Storybook docs.
  * The package-name tag links to the matching section on the "Libraries" overview page.
  */
-export declare const PackageNameStoryComponent: ({ packageJSON }: PackageNameStoryComponentProps) => ReactElement;
+export declare const PackageNameStoryComponent: ({ packageJSON, className, "data-testid": dataTestId, style, ref, }: PackageNameStoryComponentProps) => ReactElement;
 export {};

package/src/components/Breadcrumb/Breadcrumb.d.ts

@@ -42,4 +42,4 @@ export declare const Breadcrumb: ({ className, "data-testid": dataTestId, breadc
  *
  * @param {BreadcrumbContainerProps} props - The props for the BreadcrumbContainer component
  */
-export declare const BreadcrumbContainer: ({ "data-testid": dataTestId, breadcrumbItems, }: BreadcrumbContainerProps) => ReactElement;
+export declare const BreadcrumbContainer: ({ className, "data-testid": dataTestId, breadcrumbItems, style, ref, }: BreadcrumbContainerProps) => ReactElement;

package/src/components/Breadcrumb/utils/types.d.ts

@@ -1,7 +1,7 @@
 import { MouseEventHandler, ReactElement } from "react";
 import { CommonProps } from "../../../common/CommonProps";
-import type { Styleable } from "../../../common/Styleable";
 import { Refable } from "../../../common/Refable";
+import type { Styleable } from "../../../common/Styleable";
 export interface BreadcrumbItemProps {
     /** The display text for this breadcrumb item. */
     label: string;
@@ -19,7 +19,7 @@ export interface BreadcrumbProps extends CommonProps, Styleable, Refable<HTMLDiv
      */
     onClickBack: MouseEventHandler<HTMLButtonElement>;
 }
-export interface BreadcrumbContainerProps extends CommonProps, Styleable {
+export interface BreadcrumbContainerProps extends CommonProps, Styleable, Refable<HTMLDivElement> {
     breadcrumbItems: Array<ReactElement<BreadcrumbItemProps>>;
 }
 export interface BreadcrumbItemRenderProps extends CommonProps, Styleable {

package/src/components/GridAreas/GridAreas.d.ts

@@ -1,4 +1,6 @@
 import { ReactNode } from "react";
+import { CommonProps } from "../../common/CommonProps";
+import { Refable } from "../../common/Refable";
 import type { Styleable } from "../../common/Styleable";
 import { GridAreasResult, SlotProps } from "./types";
 /**
@@ -6,7 +8,7 @@ import { GridAreasResult, SlotProps } from "./types";
  *
  * Spread the result from useGridAreas() onto this component.
  */
-export type GridAreasProps<TAreaName extends string> = GridAreasResult<TAreaName> & Styleable & {
+export type GridAreasProps<TAreaName extends string> = GridAreasResult<TAreaName> & CommonProps & Styleable & Refable<HTMLElement> & {
     /** Additional CSS classes to apply to the grid container */
     className?: string;
     /** Render prop that receives the slots object */
@@ -93,4 +95,4 @@ export type GridAreasProps<TAreaName extends string> = GridAreasResult<TAreaName
  * }
  * ```
  */
-export declare function GridAreas<TAreaName extends string>({ slots, css, containerProps, validationRef, className, style, children, asChild, }: GridAreasProps<TAreaName>): ReactNode;
+export declare function GridAreas<TAreaName extends string>({ slots, css, containerProps, validationRef, className, "data-testid": dataTestId, ref, style, children, asChild, }: GridAreasProps<TAreaName>): ReactNode;

package/src/components/Highlight/Highlight.d.ts

@@ -1,9 +1,10 @@
-import { ReactElement, ReactNode, Ref } from "react";
+import { ReactElement, ReactNode } from "react";
 import { CommonProps } from "../../common/CommonProps";
-import type { Styleable } from "../../common/Styleable";
+import { Refable } from "../../common/Refable";
 import { Size } from "../../common/Size";
+import type { Styleable } from "../../common/Styleable";
 export type HighlightSize = Extract<Size, "small" | "medium">;
-export interface HighlightProps extends CommonProps, Styleable {
+export interface HighlightProps extends CommonProps, Styleable, Refable<HTMLDivElement> {
     /**
      * The size of the highlight. Allowed values: "small" (text-xs), "medium" (text-sm).
      */
@@ -16,10 +17,6 @@ export interface HighlightProps extends CommonProps, Styleable {
      * The content of the highlight. Accepts any valid React children (text, numbers, elements).
      */
     children?: ReactNode;
-    /**
-     * A ref for the component
-     */
-    ref?: Ref<HTMLDivElement>;
 }
 /**
  * Highlight draws visual attention to data values that may require user action, monitoring, or investigation.

package/src/components/List/List.d.ts

@@ -1,9 +1,10 @@
 import { ReactElement } from "react";
 import { CommonProps } from "../../common/CommonProps";
+import { Refable } from "../../common/Refable";
 import type { Styleable } from "../../common/Styleable";
 import { UseListResult, VirtualizationListItemProps } from "./useList";
 export type { VirtualizationListItemProps } from "./useList";
-export interface ListProps<TItem = unknown> extends CommonProps, Styleable, UseListResult<TItem> {
+export interface ListProps<TItem = unknown> extends CommonProps, Styleable, Refable<HTMLDivElement>, UseListResult<TItem> {
     /**
      * Function that renders each list item. Must spread `listItemProps` onto your element
      * and use the provided `key` prop for React's reconciliation.
@@ -92,4 +93,4 @@ export interface ListProps<TItem = unknown> extends CommonProps, Styleable, UseL
  * );
  * ```
  */
-export declare const List: <TItem = unknown>({ children, className, "data-testid": dataTestId, style, containerRef, listRef, rows, getListItemProps, header, loadingIndicator, shouldShowLoaderAtIndex, count, isScrolling, separator, topSeparatorOnScroll, isAtTop, contentFillsContainer, scrollOffset: _scrollOffset, getTotalSize: _getTotalSize, getVirtualItems: _getVirtualItems, scrollToOffset: _scrollToOffset, scrollToIndex: _scrollToIndex, measure: _measure, }: ListProps<TItem>) => ReactElement;
+export declare const List: <TItem = unknown>({ children, className, "data-testid": dataTestId, style, ref, containerRef, listRef, rows, getListItemProps, header, loadingIndicator, shouldShowLoaderAtIndex, count, isScrolling, separator, topSeparatorOnScroll, isAtTop, contentFillsContainer, scrollOffset: _scrollOffset, getTotalSize: _getTotalSize, getVirtualItems: _getVirtualItems, scrollToOffset: _scrollToOffset, scrollToIndex: _scrollToIndex, measure: _measure, }: ListProps<TItem>) => ReactElement;

package/src/components/ListItem/ListItem.d.ts

@@ -1,14 +1,13 @@
 import { VariantProps } from "@trackunit/css-class-variance-utilities";
 import type { MappedOmit } from "@trackunit/shared-utils";
 import { tailwindPalette, ThemeColors } from "@trackunit/ui-design-tokens";
-import { MouseEventHandler, ReactElement, ReactNode, Ref } from "react";
+import { MouseEventHandler, ReactElement, ReactNode } from "react";
 import { CommonProps } from "../../common/CommonProps";
+import { Refable } from "../../common/Refable";
 import type { Styleable } from "../../common/Styleable";
 import { cvaListItem } from "./ListItem.variants";
 type ThemeColorShades = `${keyof (typeof tailwindPalette)[keyof typeof tailwindPalette]}`;
-export type ListItemVirtualizationProps = {
-    /** @internal */
-    ref?: Ref<HTMLLIElement>;
+export type ListItemVirtualizationProps = Refable<HTMLLIElement> & {
     /** @internal */
     tabIndex?: number;
     /** @internal */
@@ -16,7 +15,7 @@ export type ListItemVirtualizationProps = {
     /** @internal */
     className?: string;
 };
-export interface ListItemProps extends CommonProps, Styleable, ListItemVirtualizationProps, MappedOmit<VariantProps<typeof cvaListItem>, "className"> {
+export interface ListItemProps extends CommonProps, Styleable, Refable<HTMLLIElement>, ListItemVirtualizationProps, MappedOmit<VariantProps<typeof cvaListItem>, "className"> {
     /**The main text line of the ListItem */
     title: string | ReactElement<CommonProps>;
     /**Optional description for the ListItem. Can be used for descriptions, metadata, or other important details. */

package/src/components/Menu/MenuDivider/MenuDivider.d.ts

@@ -1,6 +1,8 @@
 import { ReactElement } from "react";
+import { CommonProps } from "../../../common/CommonProps";
+import { Refable } from "../../../common/Refable";
 import type { Styleable } from "../../../common/Styleable";
-export type MenuDividerProps = Styleable;
+export type MenuDividerProps = CommonProps & Styleable & Refable<HTMLDivElement>;
 /**
  * MenuDivider renders a horizontal line to visually separate groups of items within a MenuList.
  *
@@ -25,4 +27,4 @@ export type MenuDividerProps = Styleable;
  * ```
  * @returns {ReactElement} MenuDivider component
  */
-export declare const MenuDivider: ({ style }: MenuDividerProps) => ReactElement;
+export declare const MenuDivider: ({ className, style, "data-testid": dataTestId, ref }: MenuDividerProps) => ReactElement;

package/src/components/PageHeader/components/PageHeaderSecondaryActions.d.ts

@@ -1,11 +1,14 @@
 import { ReactElement } from "react";
+import { CommonProps } from "../../../common/CommonProps";
+import { Refable } from "../../../common/Refable";
+import type { Styleable } from "../../../common/Styleable";
 import { PageHeaderSecondaryActionType } from "../types";
-export type PageHeaderSecondaryActionsProps = {
+export type PageHeaderSecondaryActionsProps = CommonProps & Styleable & Refable<HTMLDivElement> & {
     actions: Array<PageHeaderSecondaryActionType>;
     hasPrimaryAction?: boolean;
     groupActions?: boolean;
 };
-type ActionRendererProps = {
+type ActionRendererProps = CommonProps & Styleable & Refable & {
     action: PageHeaderSecondaryActionType;
     /**
      * Indicates if we should render a MenuItem or Button.
@@ -32,7 +35,11 @@ export declare function ActionRenderer({ action, isMenuItem, externalOnClick }:
  * @param {Array<PageHeaderSecondaryActionType>} props.actions - The secondary actions to render
  * @param {boolean} [props.hasPrimaryAction] - Whether there is a primary action present
  * @param {boolean} [props.groupActions] - Whether to group actions in a More Menu regardless of action count
+ * @param {string} [props.className] - A custom class name for the action container
+ * @param {string} [props."data-testid"] - An ID used to locate the container in tests
+ * @param {object} [props.style] - Inline styles for the action container
+ * @param {unknown} [props.ref] - Ref for the action container element
  * @returns {ReactElement | null} PageHeaderSecondaryActions component
  */
-export declare const PageHeaderSecondaryActions: ({ actions, hasPrimaryAction, groupActions, }: PageHeaderSecondaryActionsProps) => ReactElement | null;
+export declare const PageHeaderSecondaryActions: ({ actions, hasPrimaryAction, groupActions, className, "data-testid": dataTestId, style, ref, }: PageHeaderSecondaryActionsProps) => ReactElement | null;
 export {};

package/src/components/Portal/Portal.d.ts

@@ -1,6 +1,9 @@
 import { FloatingPortalProps } from "@floating-ui/react";
 import { ReactElement } from "react";
-export type PortalProps = FloatingPortalProps;
+import { CommonProps } from "../../common/CommonProps";
+import { Refable } from "../../common/Refable";
+import type { Styleable } from "../../common/Styleable";
+export type PortalProps = FloatingPortalProps & CommonProps & Styleable & Refable<HTMLDivElement>;
 /**
  * Portal renders its children into a separate DOM node, outside the normal React tree hierarchy.
  * By default, content is portalled into a z-index-isolated `div#portal-container` in the document body.
@@ -38,4 +41,4 @@ export type PortalProps = FloatingPortalProps;
  * @param {PortalProps} props - The props for the Portal component
  * @returns {ReactElement} Portal component
  */
-export declare const Portal: (props: FloatingPortalProps) => ReactElement;
+export declare const Portal: (props: PortalProps) => ReactElement;

package/src/components/Sheet/sheet-types.d.ts

@@ -1,5 +1,7 @@
 import type { UseFloatingReturn } from "@floating-ui/react";
-import type { ReactNode, Ref, RefObject } from "react";
+import type { ReactNode, RefObject } from "react";
+import type { CommonProps } from "../../common/CommonProps";
+import type { Refable } from "../../common/Refable";
 import type { Styleable } from "../../common/Styleable";
 import type { UseOverlayDismissibleProps } from "../../overlay-dismissible/types";
 /**
@@ -146,7 +148,7 @@ export type UseSheetSnapReturn = {
  * actually reads. Consumers spread the hook return (`{...sheet}`) and
  * TypeScript allows extra properties on spread expressions.
  */
-export type SheetProps = Styleable & {
+export type SheetProps = CommonProps & Styleable & Refable<HTMLDivElement> & {
     readonly isOpen: boolean;
     /** Unified sheet state from useSheetSnap. */
     readonly state: SheetState;
@@ -163,7 +165,6 @@ export type SheetProps = Styleable & {
      * Sheet skips its own focus trap and dismiss — the parent owns those.
      */
     readonly floatingUi?: SheetFloatingUiProps;
-    readonly ref?: Ref<HTMLDivElement>;
     /** Horizontal positioning of the sheet. */
     readonly anchor?: SheetAnchor;
     /** Enable/disable drag-to-snap between levels. Default: true. */
@@ -197,10 +198,6 @@ export type SheetProps = Styleable & {
      * mode shows only `persistentContent`.
      */
     readonly persistentContent?: ReactNode;
-    /** Custom class name. */
-    readonly className?: string;
-    /** Test ID for the sheet. */
-    readonly "data-testid"?: string;
     /** Sheet content. */
     readonly children?: ReactNode;
     /** Called after the close CSS transition completes (transitionend on transform). */

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

@@ -1,20 +1,17 @@
 import { TabsTriggerProps } from "@radix-ui/react-tabs";
 import { IconName } from "@trackunit/ui-icons";
 import { ReactElement, ReactNode } from "react";
+import { CommonProps } from "../../common/CommonProps";
 import { Refable } from "../../common/Refable";
-export interface TabChildProps {
+import type { Styleable } from "../../common/Styleable";
+export interface TabChildProps extends CommonProps {
     children?: ReactNode;
-    className?: string;
 }
-export interface TabProps extends TabsTriggerProps, Refable<HTMLButtonElement> {
+export interface TabProps extends TabsTriggerProps, CommonProps, Styleable, Refable<HTMLButtonElement> {
     /**
      * Specifies whether the tab should occupy the full width of its container.
      */
     isFullWidth?: boolean;
-    /**
-     * A data-testid attribute for testing purposes.
-     */
-    "data-testid"?: string;
     /**
      * The text content of the tab.
      */
@@ -51,6 +48,10 @@ export interface TabProps extends TabsTriggerProps, Refable<HTMLButtonElement> {
  * ### When not to use
  * Do not use Tab outside of a `TabList`/`Tabs` context. For standalone buttons, use `Button`.
  *
+ * ### `data-testid` and `asChild`
+ * `data-testid` is applied to the rendered element. When `asChild` is used and the child already
+ * defines its own `data-testid`, the child's value wins so consumers can label the actual DOM node.
+ *
  * @example Tab with icon and badge suffix
  * ```tsx
  * import { Tabs, TabList, Tab, TabContent, Badge } from "@trackunit/react-components";

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

@@ -1,8 +1,10 @@
 import { TabsContentProps } from "@radix-ui/react-tabs";
 import { IconName } from "@trackunit/ui-icons";
 import { ReactElement, ReactNode } from "react";
+import { CommonProps } from "../../common/CommonProps";
 import { Refable } from "../../common/Refable";
-export interface TabContentProps extends TabsContentProps, Refable<HTMLDivElement> {
+import type { Styleable } from "../../common/Styleable";
+export interface TabContentProps extends TabsContentProps, CommonProps, Styleable, Refable<HTMLDivElement> {
     /**
      * A custom class name to be attached to the content wrapper element.
      */

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

@@ -1,20 +1,14 @@
 import { TabsListProps } from "@radix-ui/react-tabs";
 import { ReactElement } from "react";
+import { CommonProps } from "../../common/CommonProps";
 import { Refable } from "../../common/Refable";
+import type { Styleable } from "../../common/Styleable";
 import { TabContentProps } from "./TabContent";
-export interface TabListProps extends TabsListProps, Refable<HTMLDivElement> {
+export interface TabListProps extends TabsListProps, CommonProps, Styleable, Refable<HTMLDivElement> {
     /**
      * The child elements to be displayed within the Tabs component.
      */
     children: Array<ReactElement<TabContentProps>>;
-    /**
-     * A custom class name to be attached to root element
-     */
-    className?: string;
-    /**
-     * An ID that can be used in tests to locate the component.
-     */
-    "data-testid"?: string;
     /**
      * If set to true, automatically scrolls the active tab into view when changed.
      *

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

@@ -1,7 +1,9 @@
 import { TabsProps as TabsRootProps } from "@radix-ui/react-tabs";
 import { ReactElement, ReactNode } from "react";
+import { CommonProps } from "../../common/CommonProps";
 import { Refable } from "../../common/Refable";
-export interface TabsProps extends TabsRootProps, Refable<HTMLDivElement> {
+import type { Styleable } from "../../common/Styleable";
+export interface TabsProps extends TabsRootProps, CommonProps, Styleable, Refable<HTMLDivElement> {
     /**
      * If set to true, forces the content of all tabs to render even if not selected.
      */
@@ -14,14 +16,6 @@ export interface TabsProps extends TabsRootProps, Refable<HTMLDivElement> {
      * The child elements to be displayed within the Tabs component.
      */
     children: ReactNode;
-    /**
-     * A custom class name to be attached to root element
-     */
-    className?: string;
-    /**
-     * An ID that can be used in tests to locate the component.
-     */
-    "data-testid"?: string;
 }
 /**
  * Tabs group different but related content, allowing users to navigate views without leaving the page.

package/src/components/Tag/Tag.d.ts

@@ -1,11 +1,12 @@
 import { ActivityColors, CriticalityColors, GeneralColors, IntentColors } from "@trackunit/ui-design-tokens";
-import { MouseEventHandler, ReactElement, ReactNode, Ref } from "react";
+import { MouseEventHandler, ReactElement, ReactNode } from "react";
 import { CommonProps } from "../../common/CommonProps";
-import type { Styleable } from "../../common/Styleable";
+import { Refable } from "../../common/Refable";
 import { Size } from "../../common/Size";
+import type { Styleable } from "../../common/Styleable";
 export type TagSize = Extract<Size, "small" | "medium">;
 export type TagColors = IntentColors | GeneralColors | CriticalityColors | ActivityColors;
-export interface TagProps extends CommonProps, Styleable {
+export interface TagProps extends CommonProps, Styleable, Refable<HTMLDivElement> {
     /**
      * The color of the tag.
      *
@@ -31,10 +32,6 @@ export interface TagProps extends CommonProps, Styleable {
      * Is the tag disabled.
      */
     disabled?: boolean;
-    /**
-     * A ref for the component
-     */
-    ref?: Ref<HTMLDivElement>;
     /**
      * The icon to display. Only supported for medium size.
      */

package/src/components/ValueBar/SegmentedValueBar.d.ts

@@ -1,8 +1,9 @@
 import { ReactElement } from "react";
 import { CommonProps } from "../../common/CommonProps";
+import { Refable } from "../../common/Refable";
 import type { Styleable } from "../../common/Styleable";
 import type { SegmentedValueBarSize, ValueBarSegment } from "./SegmentedValueBarTypes";
-export interface SegmentedValueBarProps extends CommonProps, Styleable {
+export interface SegmentedValueBarProps extends CommonProps, Styleable, Refable<HTMLSpanElement> {
     /**
      * Array of segments to display. Each segment has a numeric value and a color and optionally a label.
      * Segments render in the order they are provided; the component does not sort or reorder them.
@@ -50,4 +51,4 @@ export interface SegmentedValueBarProps extends CommonProps, Styleable {
  * SegmentedValueBar displays multiple colored segments on a bar to visualize values relative to a total.
  * Supports optional tooltips per segment, showing value and optionally a label.
  */
-export declare const SegmentedValueBar: ({ segments, total, size, showValue, displayValue, unit, valueColor, showTooltip, tooltipUnit, valueWidth, className, "data-testid": dataTestId, style, }: SegmentedValueBarProps) => ReactElement;
+export declare const SegmentedValueBar: ({ segments, total, size, showValue, displayValue, unit, valueColor, showTooltip, tooltipUnit, valueWidth, className, "data-testid": dataTestId, ref, style, }: SegmentedValueBarProps) => ReactElement;

package/src/components/buttons/Button/Button.d.ts

@@ -1,8 +1,9 @@
 import type { MappedOmit } from "@trackunit/shared-utils";
-import { ReactElement, ReactNode, Ref } from "react";
+import { ReactElement, ReactNode } from "react";
+import { Refable } from "../../../common/Refable";
 import { Size } from "../../../common/Size";
 import { ButtonCommonProps, ButtonType } from "../shared/ButtonProps";
-export interface ButtonProps extends MappedOmit<ButtonCommonProps, "size"> {
+export interface ButtonProps extends MappedOmit<ButtonCommonProps, "size">, Refable<HTMLButtonElement> {
     /**
      * Child nodes. Can be used to pass in text to be displayed on the button.
      */
@@ -35,10 +36,6 @@ export interface ButtonProps extends MappedOmit<ButtonCommonProps, "size"> {
      * The name of the button
      */
     name?: string;
-    /**
-     * A ref for the component
-     */
-    ref?: Ref<HTMLButtonElement>;
     /**
      * The size of the button
      */

package/src/components/buttons/IconButton/IconButton.d.ts

@@ -1,8 +1,9 @@
 import type { MappedOmit } from "@trackunit/shared-utils";
-import { ComponentType, JSX, ReactElement, ReactNode, Ref } from "react";
+import { ComponentType, JSX, ReactElement, ReactNode } from "react";
+import { Refable } from "../../../common/Refable";
 import { Size } from "../../../common/Size";
 import { ButtonCommonProps } from "../shared/ButtonProps";
-export interface IconButtonProps extends MappedOmit<ButtonCommonProps, "size"> {
+export interface IconButtonProps extends MappedOmit<ButtonCommonProps, "size">, Refable<HTMLButtonElement> {
     /**
      * The icon to display.
      */
@@ -17,10 +18,6 @@ export interface IconButtonProps extends MappedOmit<ButtonCommonProps, "size"> {
      * The size of the button. Defaults to "medium".
      */
     size?: Size;
-    /**
-     * A ref for the component
-     */
-    ref?: Ref<HTMLButtonElement>;
 }
 /**
  * Buttons are clickable elements that are used to trigger actions. They communicate calls to action to the user and allow users to interact with pages in a variety of ways. The Icon Button is a version of the standard Button component without the text label.

package/src/components/buttons/StarButton/StarButton.d.ts

@@ -1,6 +1,8 @@
 import { MouseEventHandler, ReactElement } from "react";
+import { CommonProps } from "../../../common/CommonProps";
 import { Refable } from "../../../common/Refable";
-interface StarButtonProps extends Refable<HTMLDivElement> {
+import type { Styleable } from "../../../common/Styleable";
+interface StarButtonProps extends CommonProps, Styleable, Refable<HTMLDivElement> {
     /**
      * Whether the item is currently starred/favorited. Controls the icon color (primary when starred, neutral when not).
      */
@@ -33,5 +35,5 @@ interface StarButtonProps extends Refable<HTMLDivElement> {
  * @param {StarButtonProps} props - The props for the StarButton component
  * @returns {ReactElement} StarButton component
  */
-export declare const StarButton: ({ starred, onClick, ref }: StarButtonProps) => ReactElement;
+export declare const StarButton: ({ starred, onClick, className, "data-testid": dataTestId, style, ref, }: StarButtonProps) => ReactElement;
 export {};