@trackunit/react-components 1.22.27 → 1.23.2

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 = {
@@ -1348,6 +1348,19 @@ const Badge = ({ color = "primary", size = "default", compact = false, className
     return (jsxRuntime.jsx("span", { className: cvaBadge({ color, size, className, compact, isSingleChar }), "data-testid": dataTestId, ref: ref, style: style, children: compact ? null : displayedCount }));
 };
 
+const cvaBreadcrumb = cssClassVarianceUtilities.cvaMerge(["my-4", "flex", "place-items-center"]);
+const cvaBreadcrumbItem = cssClassVarianceUtilities.cvaMerge(["flex", "items-center"]);
+const cvaBreadcrumbForLargeScreen = cssClassVarianceUtilities.cvaMerge(["flex", "flex-nowrap", "items-center"]);
+const cvaBreadcrumbForMediumScreen = cssClassVarianceUtilities.cvaMerge(["flex", "items-center"], {
+    variants: {
+        expanded: {
+            true: "flex-wrap",
+            false: "flex-nowrap",
+        },
+    },
+    defaultVariants: { expanded: false },
+});
+
 /**
  * Maps size keys to their corresponding state property names.
  */
@@ -1445,19 +1458,6 @@ const useViewportBreakpoints = (options = {}) => {
     return viewportSize;
 };
 
-const cvaBreadcrumb = cssClassVarianceUtilities.cvaMerge(["my-4", "flex", "place-items-center"]);
-const cvaBreadcrumbItem = cssClassVarianceUtilities.cvaMerge(["flex", "items-center"]);
-const cvaBreadcrumbForLargeScreen = cssClassVarianceUtilities.cvaMerge(["flex", "flex-nowrap", "items-center"]);
-const cvaBreadcrumbForMediumScreen = cssClassVarianceUtilities.cvaMerge(["flex", "items-center"], {
-    variants: {
-        expanded: {
-            true: "flex-wrap",
-            false: "flex-nowrap",
-        },
-    },
-    defaultVariants: { expanded: false },
-});
-
 /**
  * BreadcrumbItem is a helper component that renders the individual breadcrumb item.
  */
@@ -1500,6 +1500,23 @@ const BreadcrumbForSmallScreen = ({ "data-testid": dataTestId, breadcrumbItems,
     return (jsxRuntime.jsx("div", { className: className, "data-testid": dataTestId, style: style, children: lastBreadcrumbItem.map((item, index) => (jsxRuntime.jsx(BreadcrumbItem, { "data-testid": `breadcrumbItem-${dataTestId}`, item: item }, `breadcrumbItem-${index}`))) }));
 };
 
+/**
+ * BreadcrumbContainer is a helper component that renders the breadcrumb items based on the screen size.
+ *
+ * @param {BreadcrumbContainerProps} props - The props for the BreadcrumbContainer component
+ */
+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("div", { ...sharedContainerProps, children: jsxRuntime.jsx(BreadcrumbForMediumScreen, { breadcrumbItems: breadcrumbItems, "data-testid": `mediumScreen-${dataTestId}` }) }));
+    }
+    if (isSmallScreen) {
+        return (jsxRuntime.jsx("div", { ...sharedContainerProps, children: jsxRuntime.jsx(BreadcrumbForSmallScreen, { breadcrumbItems: breadcrumbItems, "data-testid": `smallScreen-${dataTestId}` }) }));
+    }
+    return (jsxRuntime.jsx("div", { ...sharedContainerProps, children: jsxRuntime.jsx(BreadcrumbForLargeScreen, { breadcrumbItems: breadcrumbItems, "data-testid": `largeScreen-${dataTestId}` }) }));
+};
+
 /**
  * useBreadcrumbItemsToRender is a custom hook that takes an array of BreadcrumbItemProps and returns an array of React.ReactElement
  */
@@ -1553,21 +1570,6 @@ const Breadcrumb = ({ className, "data-testid": dataTestId, breadcrumbItems, onC
     const breadCrumbItemsToJSX = useBreadcrumbItemsToRender(breadcrumbItems);
     return (jsxRuntime.jsxs("div", { className: cvaBreadcrumb({ className }), "data-testid": dataTestId, ref: ref, style: style, children: [jsxRuntime.jsx(IconButton, { "data-testid": `backButton-${dataTestId}`, icon: jsxRuntime.jsx(Icon, { name: "ArrowLeft", size: "small" }), onClick: onClickBack, size: "small", variant: "ghost-neutral" }), jsxRuntime.jsx("div", { children: jsxRuntime.jsx(BreadcrumbContainer, { breadcrumbItems: breadCrumbItemsToJSX, "data-testid": dataTestId }) })] }));
 };
-/**
- * BreadcrumbContainer is a helper component that renders the breadcrumb items based on the screen size.
- *
- * @param {BreadcrumbContainerProps} props - The props for the BreadcrumbContainer component
- */
-const BreadcrumbContainer = ({ "data-testid": dataTestId, breadcrumbItems, }) => {
-    const { isMd: isMediumScreen, isXs: isSmallScreen } = useViewportBreakpoints();
-    if (isMediumScreen) {
-        return jsxRuntime.jsx(BreadcrumbForMediumScreen, { breadcrumbItems: breadcrumbItems, "data-testid": `mediumScreen-${dataTestId}` });
-    }
-    if (isSmallScreen) {
-        return jsxRuntime.jsx(BreadcrumbForSmallScreen, { breadcrumbItems: breadcrumbItems, "data-testid": `smallScreen-${dataTestId}` });
-    }
-    return jsxRuntime.jsx(BreadcrumbForLargeScreen, { breadcrumbItems: breadcrumbItems, "data-testid": `largeScreen-${dataTestId}` });
-};
 
 /**
  * StarButton renders a clickable star icon for toggling favorite/starred state.
@@ -1592,8 +1594,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 +3687,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 +5669,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 +6220,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 }));
 };
 
 /**
@@ -6883,6 +6887,7 @@ function ActionRenderer({ action, isMenuItem = false, externalOnClick }) {
     // Finally, wrap with Link if `to` is provided
     return to !== undefined && to !== "" ? (jsxRuntime.jsx(reactRouter.Link, { target: target, to: to, children: wrappedWithTooltip })) : (wrappedWithTooltip);
 }
+
 /**
  * The PageHeaderSecondaryActions component is used to render the secondary actions in the PageHeader component.
  *
@@ -6890,9 +6895,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 +6918,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 +9909,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 +9935,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 +10387,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);
@@ -12476,11 +12490,9 @@ const useWindowActivity = ({ onFocus, onBlur, skip = false } = { onBlur: undefin
     return react.useMemo(() => ({ focused }), [focused]);
 };
 
-exports.ActionRenderer = ActionRenderer;
 exports.Alert = Alert;
 exports.Badge = Badge;
 exports.Breadcrumb = Breadcrumb;
-exports.BreadcrumbContainer = BreadcrumbContainer;
 exports.Button = Button;
 exports.Card = Card;
 exports.CardBody = CardBody;

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 = {
@@ -1346,6 +1346,19 @@ const Badge = ({ color = "primary", size = "default", compact = false, className
     return (jsx("span", { className: cvaBadge({ color, size, className, compact, isSingleChar }), "data-testid": dataTestId, ref: ref, style: style, children: compact ? null : displayedCount }));
 };
 
+const cvaBreadcrumb = cvaMerge(["my-4", "flex", "place-items-center"]);
+const cvaBreadcrumbItem = cvaMerge(["flex", "items-center"]);
+const cvaBreadcrumbForLargeScreen = cvaMerge(["flex", "flex-nowrap", "items-center"]);
+const cvaBreadcrumbForMediumScreen = cvaMerge(["flex", "items-center"], {
+    variants: {
+        expanded: {
+            true: "flex-wrap",
+            false: "flex-nowrap",
+        },
+    },
+    defaultVariants: { expanded: false },
+});
+
 /**
  * Maps size keys to their corresponding state property names.
  */
@@ -1443,19 +1456,6 @@ const useViewportBreakpoints = (options = {}) => {
     return viewportSize;
 };
 
-const cvaBreadcrumb = cvaMerge(["my-4", "flex", "place-items-center"]);
-const cvaBreadcrumbItem = cvaMerge(["flex", "items-center"]);
-const cvaBreadcrumbForLargeScreen = cvaMerge(["flex", "flex-nowrap", "items-center"]);
-const cvaBreadcrumbForMediumScreen = cvaMerge(["flex", "items-center"], {
-    variants: {
-        expanded: {
-            true: "flex-wrap",
-            false: "flex-nowrap",
-        },
-    },
-    defaultVariants: { expanded: false },
-});
-
 /**
  * BreadcrumbItem is a helper component that renders the individual breadcrumb item.
  */
@@ -1498,6 +1498,23 @@ const BreadcrumbForSmallScreen = ({ "data-testid": dataTestId, breadcrumbItems,
     return (jsx("div", { className: className, "data-testid": dataTestId, style: style, children: lastBreadcrumbItem.map((item, index) => (jsx(BreadcrumbItem, { "data-testid": `breadcrumbItem-${dataTestId}`, item: item }, `breadcrumbItem-${index}`))) }));
 };
 
+/**
+ * BreadcrumbContainer is a helper component that renders the breadcrumb items based on the screen size.
+ *
+ * @param {BreadcrumbContainerProps} props - The props for the BreadcrumbContainer component
+ */
+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("div", { ...sharedContainerProps, children: jsx(BreadcrumbForMediumScreen, { breadcrumbItems: breadcrumbItems, "data-testid": `mediumScreen-${dataTestId}` }) }));
+    }
+    if (isSmallScreen) {
+        return (jsx("div", { ...sharedContainerProps, children: jsx(BreadcrumbForSmallScreen, { breadcrumbItems: breadcrumbItems, "data-testid": `smallScreen-${dataTestId}` }) }));
+    }
+    return (jsx("div", { ...sharedContainerProps, children: jsx(BreadcrumbForLargeScreen, { breadcrumbItems: breadcrumbItems, "data-testid": `largeScreen-${dataTestId}` }) }));
+};
+
 /**
  * useBreadcrumbItemsToRender is a custom hook that takes an array of BreadcrumbItemProps and returns an array of React.ReactElement
  */
@@ -1551,21 +1568,6 @@ const Breadcrumb = ({ className, "data-testid": dataTestId, breadcrumbItems, onC
     const breadCrumbItemsToJSX = useBreadcrumbItemsToRender(breadcrumbItems);
     return (jsxs("div", { className: cvaBreadcrumb({ className }), "data-testid": dataTestId, ref: ref, style: style, children: [jsx(IconButton, { "data-testid": `backButton-${dataTestId}`, icon: jsx(Icon, { name: "ArrowLeft", size: "small" }), onClick: onClickBack, size: "small", variant: "ghost-neutral" }), jsx("div", { children: jsx(BreadcrumbContainer, { breadcrumbItems: breadCrumbItemsToJSX, "data-testid": dataTestId }) })] }));
 };
-/**
- * BreadcrumbContainer is a helper component that renders the breadcrumb items based on the screen size.
- *
- * @param {BreadcrumbContainerProps} props - The props for the BreadcrumbContainer component
- */
-const BreadcrumbContainer = ({ "data-testid": dataTestId, breadcrumbItems, }) => {
-    const { isMd: isMediumScreen, isXs: isSmallScreen } = useViewportBreakpoints();
-    if (isMediumScreen) {
-        return jsx(BreadcrumbForMediumScreen, { breadcrumbItems: breadcrumbItems, "data-testid": `mediumScreen-${dataTestId}` });
-    }
-    if (isSmallScreen) {
-        return jsx(BreadcrumbForSmallScreen, { breadcrumbItems: breadcrumbItems, "data-testid": `smallScreen-${dataTestId}` });
-    }
-    return jsx(BreadcrumbForLargeScreen, { breadcrumbItems: breadcrumbItems, "data-testid": `largeScreen-${dataTestId}` });
-};
 
 /**
  * StarButton renders a clickable star icon for toggling favorite/starred state.
@@ -1590,8 +1592,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 +3685,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 +5667,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 +6218,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 }));
 };
 
 /**
@@ -6881,6 +6885,7 @@ function ActionRenderer({ action, isMenuItem = false, externalOnClick }) {
     // Finally, wrap with Link if `to` is provided
     return to !== undefined && to !== "" ? (jsx(Link, { target: target, to: to, children: wrappedWithTooltip })) : (wrappedWithTooltip);
 }
+
 /**
  * The PageHeaderSecondaryActions component is used to render the secondary actions in the PageHeader component.
  *
@@ -6888,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 = 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 +6916,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 +9907,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 +9933,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 +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 (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);
@@ -12474,4 +12488,4 @@ const useWindowActivity = ({ onFocus, onBlur, skip = false } = { onBlur: undefin
     return useMemo(() => ({ focused }), [focused]);
 };
 
-export { ActionRenderer, Alert, Badge, Breadcrumb, BreadcrumbContainer, Button, Card, CardBody, CardFooter, CardHeader, Collapse, CompletionStatusIndicator, CopyableText, DEFAULT_SKELETON_PREFERENCE_CARD_PROPS, DetailsList, EmptyState, EmptyValue, ExternalLink, GridAreas, Heading, Highlight, HorizontalOverflowScroller, Icon, IconButton, Indicator, KPI, KPICard, KPICardSkeleton, KPISkeleton, List, ListItem, MAX_URL_LENGTH, MenuDivider, MenuItem, MenuList, MoreMenu, Notice, PackageNameStoryComponent, Page, PageContent, PageHeader, PageHeaderKpiMetrics, PageHeaderSecondaryActions, PageHeaderTitle, Pagination, Polygon, Popover, PopoverContent, PopoverTitle, PopoverTrigger, Portal, PreferenceCard, PreferenceCardSkeleton, Prompt, ROLE_CARD, SHEET_TRANSITION_DURATION, SHEET_TRANSITION_DURATION_MS, SHEET_TRANSITION_EASING, SectionHeader, SegmentedValueBar, Sheet, Sidebar, SkeletonBlock, SkeletonLabel, SkeletonLines, Spacer, Spinner, StarButton, Tab, TabContent, TabList, Tabs, Tag, Text, ToggleGroup, Tooltip, TrendIndicator, TrendIndicators, ValueBar, ZStack, createGrid, cvaButton, cvaButtonPrefixSuffix, cvaButtonSpinner, cvaButtonSpinnerContainer, cvaClickable, cvaContainerStyles, cvaContentContainer, cvaContentWrapper, cvaDescriptionCard, cvaIconBackground, cvaIconButton, cvaImgStyles, cvaIndicator, cvaIndicatorIcon, cvaIndicatorIconBackground, cvaIndicatorLabel, cvaIndicatorPing, cvaInputContainer, cvaInteractableItem, cvaList, cvaListContainer, cvaListItem$1 as cvaListItem, cvaMenu, cvaMenuItem, cvaMenuItemLabel, cvaMenuItemPrefix, cvaMenuItemStyle, cvaMenuItemSuffix, cvaMenuList, cvaMenuListDivider, cvaMenuListItem, cvaMenuListMultiSelect, cvaPageHeader, cvaPageHeaderContainer, cvaPageHeaderHeading, cvaPreferenceCard, cvaTitleCard, cvaToggleGroup, cvaToggleGroupWithSlidingBackground, cvaToggleItem, cvaToggleItemContent, cvaToggleItemText, cvaZStackContainer, cvaZStackItem, defaultPageSize, docs, getDevicePixelRatio, getValueBarColorByValue, iconColorNames, iconPalette, noPagination, preferenceCardGrid, storageSerializer, useBidirectionalScroll, useClickOutside, useContainerBreakpoints, useContinuousTimeout, useCopyToClipboard, useCursorUrlSync, useCustomEncoding, useDebounce, useDevicePixelRatio, useElevatedReducer, useElevatedState, useGridAreas, useHover, useInfiniteScroll, useIsFirstRender, useIsFullscreen, useIsTextTruncated, useKeyboardShortcut, useList, useListItemHeight, useLocalStorage, useLocalStorageReducer, useMeasure, useMergeRefs, useModifierKey, useOverflowBorder, useOverflowItems, usePersistedState, usePopoverContext, usePrevious, usePrompt, useRandomCSSLengths, useRelayPagination, useResize, useScrollBlock, useScrollDetection, useSearchParamSync, useSelfUpdatingRef, useSessionStorage, useSessionStorageReducer, useSheet, useSheetSnap, useStorageKey, useTextSearch, useTimeout, useViewportBreakpoints, useWatch, useWindowActivity };
+export { Alert, Badge, Breadcrumb, Button, Card, CardBody, CardFooter, CardHeader, Collapse, CompletionStatusIndicator, CopyableText, DEFAULT_SKELETON_PREFERENCE_CARD_PROPS, DetailsList, EmptyState, EmptyValue, ExternalLink, GridAreas, Heading, Highlight, HorizontalOverflowScroller, Icon, IconButton, Indicator, KPI, KPICard, KPICardSkeleton, KPISkeleton, List, ListItem, MAX_URL_LENGTH, MenuDivider, MenuItem, MenuList, MoreMenu, Notice, PackageNameStoryComponent, Page, PageContent, PageHeader, PageHeaderKpiMetrics, PageHeaderSecondaryActions, PageHeaderTitle, Pagination, Polygon, Popover, PopoverContent, PopoverTitle, PopoverTrigger, Portal, PreferenceCard, PreferenceCardSkeleton, Prompt, ROLE_CARD, SHEET_TRANSITION_DURATION, SHEET_TRANSITION_DURATION_MS, SHEET_TRANSITION_EASING, SectionHeader, SegmentedValueBar, Sheet, Sidebar, SkeletonBlock, SkeletonLabel, SkeletonLines, Spacer, Spinner, StarButton, Tab, TabContent, TabList, Tabs, Tag, Text, ToggleGroup, Tooltip, TrendIndicator, TrendIndicators, ValueBar, ZStack, createGrid, cvaButton, cvaButtonPrefixSuffix, cvaButtonSpinner, cvaButtonSpinnerContainer, cvaClickable, cvaContainerStyles, cvaContentContainer, cvaContentWrapper, cvaDescriptionCard, cvaIconBackground, cvaIconButton, cvaImgStyles, cvaIndicator, cvaIndicatorIcon, cvaIndicatorIconBackground, cvaIndicatorLabel, cvaIndicatorPing, cvaInputContainer, cvaInteractableItem, cvaList, cvaListContainer, cvaListItem$1 as cvaListItem, cvaMenu, cvaMenuItem, cvaMenuItemLabel, cvaMenuItemPrefix, cvaMenuItemStyle, cvaMenuItemSuffix, cvaMenuList, cvaMenuListDivider, cvaMenuListItem, cvaMenuListMultiSelect, cvaPageHeader, cvaPageHeaderContainer, cvaPageHeaderHeading, cvaPreferenceCard, cvaTitleCard, cvaToggleGroup, cvaToggleGroupWithSlidingBackground, cvaToggleItem, cvaToggleItemContent, cvaToggleItemText, cvaZStackContainer, cvaZStackItem, defaultPageSize, docs, getDevicePixelRatio, getValueBarColorByValue, iconColorNames, iconPalette, noPagination, preferenceCardGrid, storageSerializer, useBidirectionalScroll, useClickOutside, useContainerBreakpoints, useContinuousTimeout, useCopyToClipboard, useCursorUrlSync, useCustomEncoding, useDebounce, useDevicePixelRatio, useElevatedReducer, useElevatedState, useGridAreas, useHover, useInfiniteScroll, useIsFirstRender, useIsFullscreen, useIsTextTruncated, useKeyboardShortcut, useList, useListItemHeight, useLocalStorage, useLocalStorageReducer, useMeasure, useMergeRefs, useModifierKey, useOverflowBorder, useOverflowItems, usePersistedState, usePopoverContext, usePrevious, usePrompt, useRandomCSSLengths, useRelayPagination, useResize, useScrollBlock, useScrollDetection, useSearchParamSync, useSelfUpdatingRef, useSessionStorage, useSessionStorageReducer, useSheet, useSheetSnap, useStorageKey, useTextSearch, useTimeout, useViewportBreakpoints, useWatch, useWindowActivity };

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "@trackunit/react-components",
-  "version": "1.22.27",
+  "version": "1.23.2",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
+  "migrations": "./migrations.json",
   "engines": {
     "node": ">=24.x"
   },
@@ -13,10 +14,10 @@
     "@floating-ui/react": "^0.26.25",
     "string-ts": "^2.0.0",
     "tailwind-merge": "^2.0.0",
-    "@trackunit/ui-design-tokens": "1.11.115",
-    "@trackunit/css-class-variance-utilities": "1.11.118",
-    "@trackunit/shared-utils": "1.13.118",
-    "@trackunit/ui-icons": "1.11.114",
+    "@trackunit/ui-design-tokens": "1.12.1",
+    "@trackunit/css-class-variance-utilities": "1.12.1",
+    "@trackunit/shared-utils": "1.14.1",
+    "@trackunit/ui-icons": "1.12.2",
     "es-toolkit": "^1.39.10",
     "@tanstack/react-virtual": "3.13.12",
     "dequal": "^2.0.3",

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

@@ -1,5 +1,5 @@
 import { ReactElement } from "react";
-import { BreadcrumbContainerProps, BreadcrumbProps } from "./utils/types";
+import { BreadcrumbProps } from "./utils/types";
 /**
  * The breadcrumb component shows a user's location in a website or application. Breadcrumbs are particularly useful when a large amount of content is organized in a hierarchical manner. They streamline navigation, minimize the steps required to revisit previous pages, and offer contextual insights to the users.
  *
@@ -37,9 +37,3 @@ import { BreadcrumbContainerProps, BreadcrumbProps } from "./utils/types";
  * @returns {ReactElement} Breadcrumb component
  */
 export declare const Breadcrumb: ({ className, "data-testid": dataTestId, breadcrumbItems, onClickBack, style, ref, }: BreadcrumbProps) => ReactElement;
-/**
- * BreadcrumbContainer is a helper component that renders the breadcrumb items based on the screen size.
- *
- * @param {BreadcrumbContainerProps} props - The props for the BreadcrumbContainer component
- */
-export declare const BreadcrumbContainer: ({ "data-testid": dataTestId, breadcrumbItems, }: BreadcrumbContainerProps) => ReactElement;

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

@@ -0,0 +1,8 @@
+import { ReactElement } from "react";
+import { BreadcrumbContainerProps } from "./utils/types";
+/**
+ * BreadcrumbContainer is a helper component that renders the breadcrumb items based on the screen size.
+ *
+ * @param {BreadcrumbContainerProps} props - The props for the BreadcrumbContainer component
+ */
+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/ActionRenderer.d.ts

@@ -0,0 +1,25 @@
+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 ActionRendererProps = CommonProps & Styleable & Refable & {
+    action: PageHeaderSecondaryActionType;
+    /**
+     * Indicates if we should render a MenuItem or Button.
+     * If `isMenuItem` is true, we render `MenuItem`, otherwise we render `Button`.
+     */
+    isMenuItem?: boolean;
+    /**
+     * Because sometimes in a menu, you want to close the menu after clicking.
+     * If `externalOnClick` is provided, we'll call it after the action callback.
+     */
+    externalOnClick?: () => void;
+};
+/**
+ * The ActionRenderer component is used to render the action in the PageHeaderSecondaryActions component.
+ *
+ * @param {ActionRendererProps} props - The props for the ActionRenderer component
+ * @returns {ReactElement} ActionRenderer component
+ */
+export declare function ActionRenderer({ action, isMenuItem, externalOnClick }: ActionRendererProps): ReactElement;

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

@@ -1,30 +1,13 @@
 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 = {
-    action: PageHeaderSecondaryActionType;
-    /**
-     * Indicates if we should render a MenuItem or Button.
-     * If `isMenuItem` is true, we render `MenuItem`, otherwise we render `Button`.
-     */
-    isMenuItem?: boolean;
-    /**
-     * Because sometimes in a menu, you want to close the menu after clicking.
-     * If `externalOnClick` is provided, we’ll call it after the action callback.
-     */
-    externalOnClick?: () => void;
-};
-/**
- * The ActionRenderer component is used to render the action in the PageHeaderSecondaryActions component.
- *
- * @param {ActionRendererProps} props - The props for the ActionRenderer component
- * @returns {ReactElement} ActionRenderer component
- */
-export declare function ActionRenderer({ action, isMenuItem, externalOnClick }: ActionRendererProps): ReactElement;
 /**
  * The PageHeaderSecondaryActions component is used to render the secondary actions in the PageHeader component.
  *
@@ -32,7 +15,10 @@ 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 {};
+export declare const PageHeaderSecondaryActions: ({ actions, hasPrimaryAction, groupActions, className, "data-testid": dataTestId, style, ref, }: PageHeaderSecondaryActionsProps) => ReactElement | null;

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 {};