@trackunit/react-table-base-components 1.24.1 → 1.24.3

package/index.cjs.js

@@ -122,8 +122,8 @@ const setupLibraryTranslations = () => {
  * @param {ButtonCellProps} props - The props for the ButtonCell component
  * @returns {ReactElement} ButtonCell component
  */
-const ButtonCell = ({ children, className, "data-testid": dataTestId, iconColor = "primary", iconName = undefined, variant = "ghost-neutral", ...rest }) => {
-    return (jsxRuntime.jsx(reactComponents.Button, { prefix: iconName ? jsxRuntime.jsx(reactComponents.Icon, { color: iconColor, name: iconName, size: "small", type: "solid" }) : null, ...rest, className: tailwindMerge.twMerge("px-2 text-sm font-normal text-black hover:text-black", className), "data-testid": `button-cell-${dataTestId}`, variant: variant, children: children }));
+const ButtonCell = ({ children, className, "data-testid": dataTestId, iconColor = "primary", iconName = undefined, style, variant = "ghost-neutral", ...rest }) => {
+    return (jsxRuntime.jsx(reactComponents.Button, { prefix: iconName ? jsxRuntime.jsx(reactComponents.Icon, { color: iconColor, name: iconName, size: "small", type: "solid" }) : null, ...rest, className: tailwindMerge.twMerge("px-2 text-sm font-normal text-black hover:text-black", className), "data-testid": `button-cell-${dataTestId}`, style: style, variant: variant, children: children }));
 };
 
 const cvaCheckboxCell = cssClassVarianceUtilities.cvaMerge([""]);
@@ -147,8 +147,8 @@ const cvaCheckboxCell = cssClassVarianceUtilities.cvaMerge([""]);
  * @param {CheckboxCellProps} props - The props for the CheckboxCell component
  * @returns {ReactElement} CheckboxCell component
  */
-const CheckboxCell = ({ checked, className, "data-testid": dataTestId }) => {
-    return (jsxRuntime.jsx("div", { className: cvaCheckboxCell({ className }), "data-testid": dataTestId, children: jsxRuntime.jsx(reactFormComponents.Checkbox, { checked: checked, readOnly: true }) }));
+const CheckboxCell = ({ checked, className, "data-testid": dataTestId, style }) => {
+    return (jsxRuntime.jsx("div", { className: cvaCheckboxCell({ className }), "data-testid": dataTestId, style: style, children: jsxRuntime.jsx(reactFormComponents.Checkbox, { checked: checked, readOnly: true }) }));
 };
 
 const cvaMultiRowTableCellSection = cssClassVarianceUtilities.cvaMerge(["flex", "flex-col", "justify-center", "overflow-hidden"]);
@@ -178,8 +178,8 @@ const cvaSecondaryRowText = cssClassVarianceUtilities.cvaMerge(["overflow-hidden
  * @param {MultiRowTableCellProps} props - The props for the MultiRowTableCell component
  * @returns {ReactElement} MultiRowTableCell component
  */
-const MultiRowTableCell = ({ main, secondary, "data-testid": dataTestId, className, }) => {
-    return (jsxRuntime.jsx("div", { className: cvaMultiRowTableCell({ className }), children: jsxRuntime.jsxs("section", { className: cvaMultiRowTableCellSection(), "data-testid": dataTestId, children: [typeof main === "string" ? jsxRuntime.jsx("div", { className: cvaMainRowText(), children: main }) : main, typeof secondary === "string" && secondary !== "" ? (jsxRuntime.jsx("div", { className: cvaSecondaryRowText(), children: secondary })) : (secondary)] }) }));
+const MultiRowTableCell = ({ main, secondary, "data-testid": dataTestId, className, style, }) => {
+    return (jsxRuntime.jsx("div", { className: cvaMultiRowTableCell({ className }), style: style, children: jsxRuntime.jsxs("section", { className: cvaMultiRowTableCellSection(), "data-testid": dataTestId, children: [typeof main === "string" ? jsxRuntime.jsx("div", { className: cvaMainRowText(), children: main }) : main, typeof secondary === "string" && secondary !== "" ? (jsxRuntime.jsx("div", { className: cvaSecondaryRowText(), children: secondary })) : (secondary)] }) }));
 };
 
 const cvaCopyableCell = cssClassVarianceUtilities.cvaMerge(["overflow-hidden", "w-fit"]);
@@ -216,14 +216,14 @@ const cvaCopyableCell = cssClassVarianceUtilities.cvaMerge(["overflow-hidden", "
  * @param {CopyableCellProps} props - The props for the CopyableCell component
  * @returns {ReactElement} CopyableCell component
  */
-const CopyableCell = ({ text, secondary, "data-testid": dataTestId, className, }) => {
+const CopyableCell = ({ text, secondary, "data-testid": dataTestId, className, style, }) => {
     const [t] = useTranslation();
     const copyLabel = t("copyableCell.copy");
     const copiedLabel = t("copyableCell.copied");
     if (secondary !== undefined) {
-        return (jsxRuntime.jsx(MultiRowTableCell, { className: cvaCopyableCell({ className }), "data-testid": dataTestId, main: jsxRuntime.jsx(reactComponents.CopyableText, { className: "self-start", copiedLabel: copiedLabel, copyLabel: copyLabel, text: text }), secondary: jsxRuntime.jsx(reactComponents.CopyableText, { className: "self-start", copiedLabel: copiedLabel, copyLabel: copyLabel, size: "xs", text: secondary.text }) }));
+        return (jsxRuntime.jsx(MultiRowTableCell, { className: cvaCopyableCell({ className }), "data-testid": dataTestId, main: jsxRuntime.jsx(reactComponents.CopyableText, { className: "self-start", copiedLabel: copiedLabel, copyLabel: copyLabel, text: text }), secondary: jsxRuntime.jsx(reactComponents.CopyableText, { className: "self-start", copiedLabel: copiedLabel, copyLabel: copyLabel, size: "xs", text: secondary.text }), style: style }));
     }
-    return (jsxRuntime.jsx(reactComponents.CopyableText, { className: cvaCopyableCell({ className }), copiedLabel: copiedLabel, copyLabel: copyLabel, "data-testid": dataTestId, text: text }));
+    return (jsxRuntime.jsx(reactComponents.CopyableText, { className: cvaCopyableCell({ className }), copiedLabel: copiedLabel, copyLabel: copyLabel, "data-testid": dataTestId, style: style, text: text }));
 };
 
 const cvaDateTimeCell = cssClassVarianceUtilities.cvaMerge([""]);
@@ -286,12 +286,12 @@ const cvaDateTimeSince$1 = cssClassVarianceUtilities.cvaMerge(["slashed-zero", "
  * @param {DateTimeCellProps} props - The props for the DateTimeCell component
  * @returns {ReactElement} DateTimeCell component
  */
-const DateTimeCell = ({ format, timeZone, locale, date, withTimeSince = true, className, "data-testid": dataTestId, }) => {
+const DateTimeCell = ({ format, timeZone, locale, date, withTimeSince = true, className, "data-testid": dataTestId, style, }) => {
     if (!date) {
         return null;
     }
     const formattedDate = dateAndTimeUtils.formatDateUtil(date, format, timeZone, locale);
-    return (jsxRuntime.jsxs("div", { className: cvaDateTimeCell({ className }), "data-testid": dataTestId, children: [jsxRuntime.jsx("p", { className: cvaDateTime$1(), children: formattedDate }), withTimeSince ? jsxRuntime.jsx(TimeSince, { date: date, locale: locale, timeZone: timeZone }) : null] }));
+    return (jsxRuntime.jsxs("div", { className: cvaDateTimeCell({ className }), "data-testid": dataTestId, style: style, children: [jsxRuntime.jsx("p", { className: cvaDateTime$1(), children: formattedDate }), withTimeSince ? jsxRuntime.jsx(TimeSince, { date: date, locale: locale, timeZone: timeZone }) : null] }));
 };
 const TimeSince = ({ date, timeZone, locale }) => {
     const timeSince = react.useMemo(() => {
@@ -332,8 +332,8 @@ const cvaHighlightCell = cssClassVarianceUtilities.cvaMerge(["flex", "gap-2"]);
  * @param {HighlightCellProps} props - The props for the HighlightCell component
  * @returns {ReactElement} HighlightCell component
  */
-const HighlightCell = ({ className, highlights, "data-testid": dataTestId, ref }) => {
-    return (jsxRuntime.jsx("div", { className: cvaHighlightCell({ className }), "data-testid": dataTestId, ref: ref, children: highlights.map((highlight, index) => (jsxRuntime.jsx(reactComponents.Highlight, { color: "warning",
+const HighlightCell = ({ className, highlights, "data-testid": dataTestId, ref, style }) => {
+    return (jsxRuntime.jsx("div", { className: cvaHighlightCell({ className }), "data-testid": dataTestId, ref: ref, style: style, children: highlights.map((highlight, index) => (jsxRuntime.jsx(reactComponents.Highlight, { color: "warning",
             size: "medium",
             "data-testid": `${dataTestId}-${index}`,
             ...(typeof highlight === "string" ? { children: highlight } : highlight) }, index))) }));
@@ -420,14 +420,14 @@ const cvaIdentityCell = cssClassVarianceUtilities.cvaMerge(["grid", "items-cente
  * @param {IdentityCellProps} props - The props for the IdentityCell component
  * @returns {ReactElement} IdentityCell component
  */
-const IdentityCell = ({ link, className, "data-testid": dataTestId, ref, title, details = [], thumbnail, }) => {
+const IdentityCell = ({ link, className, "data-testid": dataTestId, ref, style, title, details = [], thumbnail, }) => {
     const [href, setHref] = react.useState(undefined);
     react.useEffect(() => {
         if (link) {
             void link.href().then(setHref);
         }
     }, [link]);
-    return (jsxRuntime.jsxs("div", { className: cvaIdentityCell({ className, hasThumbnail: thumbnail !== undefined && thumbnail !== null }), "data-testid": dataTestId, ref: ref, children: [thumbnail !== undefined && thumbnail !== null ? (jsxRuntime.jsx("div", { className: "mr-1 flex h-8 w-8 items-center justify-center overflow-hidden rounded-md", children: thumbnail })) : null, jsxRuntime.jsxs("div", { className: "grid grid-rows-[min-content_auto] items-center text-sm", children: [jsxRuntime.jsx("div", { className: "gap-responsive-space-sm flex w-full min-w-0 items-center truncate text-sm", children: jsxRuntime.jsx(reactComponents.Heading, { className: "truncate text-sm", "data-testid": dataTestId ? `${dataTestId}-name` : undefined, variant: "tertiary", children: !link ? (jsxRuntime.jsx("span", { className: "truncate", children: title })) : (jsxRuntime.jsx(reactComponents.ExternalLink, { className: "truncate", color: "neutral", href: href ?? "", onClick: async (e) => {
+    return (jsxRuntime.jsxs("div", { className: cvaIdentityCell({ className, hasThumbnail: thumbnail !== undefined && thumbnail !== null }), "data-testid": dataTestId, ref: ref, style: style, children: [thumbnail !== undefined && thumbnail !== null ? (jsxRuntime.jsx("div", { className: "mr-1 flex h-8 w-8 items-center justify-center overflow-hidden rounded-md", children: thumbnail })) : null, jsxRuntime.jsxs("div", { className: "grid grid-rows-[min-content_auto] items-center text-sm", children: [jsxRuntime.jsx("div", { className: "gap-responsive-space-sm flex w-full min-w-0 items-center truncate text-sm", children: jsxRuntime.jsx(reactComponents.Heading, { className: "truncate text-sm", "data-testid": dataTestId ? `${dataTestId}-name` : undefined, variant: "tertiary", children: !link ? (jsxRuntime.jsx("span", { className: "truncate", children: title })) : (jsxRuntime.jsx(reactComponents.ExternalLink, { className: "truncate", color: "neutral", href: href ?? "", onClick: async (e) => {
                                     // Allow Cmd/Ctrl+Click, Shift+Click, or middle-click to open in new tab
                                     const hasModifierKey = e.ctrlKey || e.metaKey || e.shiftKey;
                                     const isMiddleClick = e.button === 1;
@@ -575,7 +575,7 @@ const LinkCell = ({ link, type, className, ref, ...rest }) => {
  * @param {ListTooltipProps<TItem>} props Component props.
  * @returns {ReactNode} Tooltip list markup.
  */
-const ListTooltip = ({ items, "data-testid": dataTestId, getLabel, getKey, loading = false, }) => {
+const ListTooltip = ({ items, "data-testid": dataTestId, getLabel, getKey, loading = false, style, }) => {
     const toDisplay = (item, index) => {
         if (getLabel) {
             return getLabel(item, index);
@@ -607,7 +607,7 @@ const ListTooltip = ({ items, "data-testid": dataTestId, getLabel, getKey, loadi
     if (loading) {
         return jsxRuntime.jsx(reactComponents.Spinner, { centering: "centered", mode: "dark" });
     }
-    return (jsxRuntime.jsx("ul", { className: "list-inside !ps-1 pl-1", "data-testid": dataTestId, children: items.map((item, index) => {
+    return (jsxRuntime.jsx("ul", { className: "list-inside !ps-1 pl-1", "data-testid": dataTestId, style: style, children: items.map((item, index) => {
             const label = toDisplay(item, index);
             if (label === "" || label === null || label === undefined) {
                 return null;
@@ -626,12 +626,12 @@ const cvaMultiValueTextCellTooltip = cssClassVarianceUtilities.cvaMerge(["whites
  * @param {MultiValueTextCellProps} props - The props for the MultiValueTextCell component
  * @returns {ReactElement} MultiValueTextCell component
  */
-const MultiValueTextCell = ({ content, count, countTooltip, icon, iconTooltip, "data-testid": dataTestId, className, onMouseEnter, ref, }) => {
+const MultiValueTextCell = ({ content, count, countTooltip, icon, iconTooltip, "data-testid": dataTestId, className, onMouseEnter, ref, style, }) => {
     const [isTooltipVisible, setIsTooltipVisible] = react.useState(false);
     const updateTooltipVisibility = (element) => {
         setIsTooltipVisible(element ? element.scrollWidth > element.clientWidth : false);
     };
-    return count !== null && count !== undefined && count > 0 ? (jsxRuntime.jsxs("div", { className: cvaMultiValueTextCellWrapper({ className }), "data-testid": dataTestId, ref: ref, children: [icon ? (jsxRuntime.jsx(reactComponents.Tooltip, { "data-testid": dataTestId ? `${dataTestId}-icon-tooltip` : undefined, disabled: !iconTooltip, label: iconTooltip ?? "", placement: "bottom", children: jsxRuntime.jsx("span", { className: "inline-flex items-center", children: icon }) })) : null, jsxRuntime.jsx("span", { className: cvaMultiValueTextCellTooltip(), ref: elementRef => updateTooltipVisibility(elementRef), children: jsxRuntime.jsx(reactComponents.Tooltip, { "data-testid": dataTestId ? `${dataTestId}-content-tooltip` : undefined, disabled: !isTooltipVisible, label: content ?? "", placement: "bottom", children: jsxRuntime.jsx(reactComponents.Text, { className: "inline", children: content ?? "" }) }) }), count > 1 ? (jsxRuntime.jsx(reactComponents.Tooltip, { "data-testid": dataTestId ? `${dataTestId}-count-tooltip` : undefined, disabled: countTooltip === undefined || countTooltip === null, label: countTooltip ?? "", placement: "bottom", children: jsxRuntime.jsxs(reactComponents.Tag, { className: "inline", color: "neutral", onMouseEnter: onMouseEnter, size: "small", children: ["+", count - 1] }) })) : null] })) : null;
+    return count !== null && count !== undefined && count > 0 ? (jsxRuntime.jsxs("div", { className: cvaMultiValueTextCellWrapper({ className }), "data-testid": dataTestId, ref: ref, style: style, children: [icon ? (jsxRuntime.jsx(reactComponents.Tooltip, { "data-testid": dataTestId ? `${dataTestId}-icon-tooltip` : undefined, disabled: !iconTooltip, label: iconTooltip ?? "", placement: "bottom", children: jsxRuntime.jsx("span", { className: "inline-flex items-center", children: icon }) })) : null, jsxRuntime.jsx("span", { className: cvaMultiValueTextCellTooltip(), ref: elementRef => updateTooltipVisibility(elementRef), children: jsxRuntime.jsx(reactComponents.Tooltip, { "data-testid": dataTestId ? `${dataTestId}-content-tooltip` : undefined, disabled: !isTooltipVisible, label: content ?? "", placement: "bottom", children: jsxRuntime.jsx(reactComponents.Text, { className: "inline", children: content ?? "" }) }) }), count > 1 ? (jsxRuntime.jsx(reactComponents.Tooltip, { "data-testid": dataTestId ? `${dataTestId}-count-tooltip` : undefined, disabled: countTooltip === undefined || countTooltip === null, label: countTooltip ?? "", placement: "bottom", children: jsxRuntime.jsxs(reactComponents.Tag, { className: "inline", color: "neutral", onMouseEnter: onMouseEnter, size: "small", children: ["+", count - 1] }) })) : null] })) : null;
 };
 
 /**
@@ -707,8 +707,8 @@ const cvaNumberCell = cssClassVarianceUtilities.cvaMerge(["flex", "gap-1", "slas
  * @param {NumberCellProps} props - The props for the NumberCell component.
  * @returns {ReactElement} A React JSX element representing the NumberCell component.
  */
-const NumberCell = ({ value = "", unit, className, "data-testid": dataTestId, ref }) => {
-    return (jsxRuntime.jsxs("div", { className: cvaNumberCell({ className }), "data-testid": dataTestId, ref: ref, children: [jsxRuntime.jsx("span", { children: value }), value !== null && value !== "" && unit !== undefined && unit !== null && unit !== "" ? jsxRuntime.jsx("span", { children: unit }) : null] }));
+const NumberCell = ({ value = "", unit, className, "data-testid": dataTestId, ref, style }) => {
+    return (jsxRuntime.jsxs("div", { className: cvaNumberCell({ className }), "data-testid": dataTestId, ref: ref, style: style, children: [jsxRuntime.jsx("span", { children: value }), value !== null && value !== "" && unit !== undefined && unit !== null && unit !== "" ? (jsxRuntime.jsx("span", { children: unit })) : null] }));
 };
 
 const cvaPlainDateCell = cssClassVarianceUtilities.cvaMerge([""]);
@@ -739,12 +739,12 @@ const cvaDateTimeSince = cssClassVarianceUtilities.cvaMerge(["slashed-zero", "te
  * @param {PlainDateCellProps} props - The props for the PlainDateCell component
  * @returns {ReactElement} PlainDateCell component
  */
-const PlainDateCell = ({ locale, date, withDaysSince = true, className, "data-testid": dataTestId, ref, }) => {
+const PlainDateCell = ({ locale, date, withDaysSince = true, className, "data-testid": dataTestId, ref, style, }) => {
     if (!date) {
         return null;
     }
     const formattedDate = dateAndTimeUtils.formatDateUtil(date.toZonedDateTime("UTC"), sharedUtils.DateTimeFormat.DATE_SHORT, "UTC", locale);
-    return (jsxRuntime.jsxs("div", { className: cvaPlainDateCell({ className }), "data-testid": dataTestId, ref: ref, children: [jsxRuntime.jsx("p", { className: cvaDateTime(), children: formattedDate }), withDaysSince ? jsxRuntime.jsx(DaysSince, { date: date, locale: locale }) : null] }));
+    return (jsxRuntime.jsxs("div", { className: cvaPlainDateCell({ className }), "data-testid": dataTestId, ref: ref, style: style, children: [jsxRuntime.jsx("p", { className: cvaDateTime(), children: formattedDate }), withDaysSince ? jsxRuntime.jsx(DaysSince, { date: date, locale: locale }) : null] }));
 };
 const DaysSince = ({ date, locale }) => {
     let timeSince = null;
@@ -916,7 +916,7 @@ const cvaResizeHandel = cssClassVarianceUtilities.cvaMerge([
  * @param {RowActionsProps} props - The properties for the component.
  * @returns {ReactElement} A React component rendering the row actions.
  */
-const RowActions = ({ actions }) => {
+const RowActions = ({ actions, style }) => {
     const selectedActions = actions.filter(action => action.isSelected);
     const normalActions = actions.filter(action => (action.isVisible ?? true) && action.variant !== "danger");
     const dangerActions = actions.filter(action => (action.isVisible ?? true) && action.variant === "danger");
@@ -929,9 +929,9 @@ const RowActions = ({ actions }) => {
             (action.isVisible ?? true) && (jsxRuntime.jsx(reactComponents.Button, { disabled: action.disabled || action.loading, onClick: event => {
                 event.stopPropagation();
                 action.onClick(event);
-            }, prefix: jsxRuntime.jsx(IconWithLoader, { action: action, size: "small" }), size: "small", variant: "secondary", children: action.label })));
+            }, prefix: jsxRuntime.jsx(IconWithLoader, { action: action, size: "small" }), size: "small", style: style, variant: "secondary", children: action.label })));
     }
-    return (jsxRuntime.jsxs("div", { className: "flex items-center", "data-testid": "row-actions", children: [selectedActions.map((action, index) => (jsxRuntime.jsx(reactComponents.IconButton, { className: "mr-2", icon: action.iconName ? jsxRuntime.jsx(reactComponents.Icon, { name: action.iconName, size: "small" }) : undefined, onClick: event => {
+    return (jsxRuntime.jsxs("div", { className: "flex items-center", "data-testid": "row-actions", style: style, children: [selectedActions.map((action, index) => (jsxRuntime.jsx(reactComponents.IconButton, { className: "mr-2", icon: action.iconName ? jsxRuntime.jsx(reactComponents.Icon, { name: action.iconName, size: "small" }) : undefined, onClick: event => {
                     event.stopPropagation();
                     action.onClick(event);
                 }, size: "small", variant: "ghost-neutral" }, `selected-action-${index}`))), jsxRuntime.jsx(reactComponents.MoreMenu, { customButton: jsxRuntime.jsx(reactComponents.IconButton, { icon: jsxRuntime.jsx(reactComponents.Icon, { name: "EllipsisHorizontal", size: "medium" }), onClick: event => event.stopPropagation(), size: "small", variant: "ghost-neutral" }), children: close => (jsxRuntime.jsxs(reactComponents.MenuList, { children: [normalActions.map((action, index) => (jsxRuntime.jsx(reactComponents.MenuItem, { disabled: action.disabled || action.loading, label: action.label, onClick: event => {
@@ -1078,8 +1078,8 @@ const cvaTagsCell = cssClassVarianceUtilities.cvaMerge(["flex", "gap-2"]);
  * @param {TagsCellProps} props - The props for the TagsCell component
  * @returns {ReactElement} TagsCell component
  */
-const TagsCell = ({ className, tags, "data-testid": dataTestId, ref }) => {
-    return (jsxRuntime.jsx("div", { className: cvaTagsCell({ className }), "data-testid": dataTestId, ref: ref, children: tags.map((tag, index) => (jsxRuntime.jsx(reactComponents.Tag, { color: "primary",
+const TagsCell = ({ className, tags, "data-testid": dataTestId, ref, style }) => {
+    return (jsxRuntime.jsx("div", { className: cvaTagsCell({ className }), "data-testid": dataTestId, ref: ref, style: style, children: tags.map((tag, index) => (jsxRuntime.jsx(reactComponents.Tag, { color: "primary",
             "data-testid": `${dataTestId}-${index}`,
             ...(typeof tag === "string" ? { children: tag } : tag) }, index))) }));
 };
@@ -1172,13 +1172,13 @@ const cvaTextCellTooltip = cssClassVarianceUtilities.cvaMerge(["grid"]);
  * @param {TextCellProps} props - The props for the TextCell component
  * @returns {ReactElement} TextCell component
  */
-const TextCell = ({ content = "", className, "data-testid": dataTestId, ref }) => {
+const TextCell = ({ content = "", className, "data-testid": dataTestId, ref, style }) => {
     const [isTooltipVisible, setIsTooltipVisible] = react.useState(false);
     const updateTooltipVisibility = (element) => {
         setIsTooltipVisible(element ? element.scrollWidth > element.clientWidth : false);
     };
     const mergedRef = reactComponents.useMergeRefs([ref, (elementRef) => updateTooltipVisibility(elementRef)]);
-    return (jsxRuntime.jsx(reactComponents.Tooltip, { disabled: !isTooltipVisible, label: content, placement: "bottom", children: jsxRuntime.jsx("div", { className: cvaTextCellTooltip(), children: jsxRuntime.jsx("span", { className: cvaTextCell({ className }), "data-testid": dataTestId, ref: mergedRef, children: content }) }) }));
+    return (jsxRuntime.jsx(reactComponents.Tooltip, { disabled: !isTooltipVisible, label: content, placement: "bottom", children: jsxRuntime.jsx("div", { className: cvaTextCellTooltip(), children: jsxRuntime.jsx("span", { className: cvaTextCell({ className }), "data-testid": dataTestId, ref: mergedRef, style: style, children: content }) }) }));
 };
 
 /**

package/index.esm.js

@@ -120,8 +120,8 @@ const setupLibraryTranslations = () => {
  * @param {ButtonCellProps} props - The props for the ButtonCell component
  * @returns {ReactElement} ButtonCell component
  */
-const ButtonCell = ({ children, className, "data-testid": dataTestId, iconColor = "primary", iconName = undefined, variant = "ghost-neutral", ...rest }) => {
-    return (jsx(Button, { prefix: iconName ? jsx(Icon, { color: iconColor, name: iconName, size: "small", type: "solid" }) : null, ...rest, className: twMerge("px-2 text-sm font-normal text-black hover:text-black", className), "data-testid": `button-cell-${dataTestId}`, variant: variant, children: children }));
+const ButtonCell = ({ children, className, "data-testid": dataTestId, iconColor = "primary", iconName = undefined, style, variant = "ghost-neutral", ...rest }) => {
+    return (jsx(Button, { prefix: iconName ? jsx(Icon, { color: iconColor, name: iconName, size: "small", type: "solid" }) : null, ...rest, className: twMerge("px-2 text-sm font-normal text-black hover:text-black", className), "data-testid": `button-cell-${dataTestId}`, style: style, variant: variant, children: children }));
 };
 
 const cvaCheckboxCell = cvaMerge([""]);
@@ -145,8 +145,8 @@ const cvaCheckboxCell = cvaMerge([""]);
  * @param {CheckboxCellProps} props - The props for the CheckboxCell component
  * @returns {ReactElement} CheckboxCell component
  */
-const CheckboxCell = ({ checked, className, "data-testid": dataTestId }) => {
-    return (jsx("div", { className: cvaCheckboxCell({ className }), "data-testid": dataTestId, children: jsx(Checkbox, { checked: checked, readOnly: true }) }));
+const CheckboxCell = ({ checked, className, "data-testid": dataTestId, style }) => {
+    return (jsx("div", { className: cvaCheckboxCell({ className }), "data-testid": dataTestId, style: style, children: jsx(Checkbox, { checked: checked, readOnly: true }) }));
 };
 
 const cvaMultiRowTableCellSection = cvaMerge(["flex", "flex-col", "justify-center", "overflow-hidden"]);
@@ -176,8 +176,8 @@ const cvaSecondaryRowText = cvaMerge(["overflow-hidden", "text-ellipsis", "text-
  * @param {MultiRowTableCellProps} props - The props for the MultiRowTableCell component
  * @returns {ReactElement} MultiRowTableCell component
  */
-const MultiRowTableCell = ({ main, secondary, "data-testid": dataTestId, className, }) => {
-    return (jsx("div", { className: cvaMultiRowTableCell({ className }), children: jsxs("section", { className: cvaMultiRowTableCellSection(), "data-testid": dataTestId, children: [typeof main === "string" ? jsx("div", { className: cvaMainRowText(), children: main }) : main, typeof secondary === "string" && secondary !== "" ? (jsx("div", { className: cvaSecondaryRowText(), children: secondary })) : (secondary)] }) }));
+const MultiRowTableCell = ({ main, secondary, "data-testid": dataTestId, className, style, }) => {
+    return (jsx("div", { className: cvaMultiRowTableCell({ className }), style: style, children: jsxs("section", { className: cvaMultiRowTableCellSection(), "data-testid": dataTestId, children: [typeof main === "string" ? jsx("div", { className: cvaMainRowText(), children: main }) : main, typeof secondary === "string" && secondary !== "" ? (jsx("div", { className: cvaSecondaryRowText(), children: secondary })) : (secondary)] }) }));
 };
 
 const cvaCopyableCell = cvaMerge(["overflow-hidden", "w-fit"]);
@@ -214,14 +214,14 @@ const cvaCopyableCell = cvaMerge(["overflow-hidden", "w-fit"]);
  * @param {CopyableCellProps} props - The props for the CopyableCell component
  * @returns {ReactElement} CopyableCell component
  */
-const CopyableCell = ({ text, secondary, "data-testid": dataTestId, className, }) => {
+const CopyableCell = ({ text, secondary, "data-testid": dataTestId, className, style, }) => {
     const [t] = useTranslation();
     const copyLabel = t("copyableCell.copy");
     const copiedLabel = t("copyableCell.copied");
     if (secondary !== undefined) {
-        return (jsx(MultiRowTableCell, { className: cvaCopyableCell({ className }), "data-testid": dataTestId, main: jsx(CopyableText, { className: "self-start", copiedLabel: copiedLabel, copyLabel: copyLabel, text: text }), secondary: jsx(CopyableText, { className: "self-start", copiedLabel: copiedLabel, copyLabel: copyLabel, size: "xs", text: secondary.text }) }));
+        return (jsx(MultiRowTableCell, { className: cvaCopyableCell({ className }), "data-testid": dataTestId, main: jsx(CopyableText, { className: "self-start", copiedLabel: copiedLabel, copyLabel: copyLabel, text: text }), secondary: jsx(CopyableText, { className: "self-start", copiedLabel: copiedLabel, copyLabel: copyLabel, size: "xs", text: secondary.text }), style: style }));
     }
-    return (jsx(CopyableText, { className: cvaCopyableCell({ className }), copiedLabel: copiedLabel, copyLabel: copyLabel, "data-testid": dataTestId, text: text }));
+    return (jsx(CopyableText, { className: cvaCopyableCell({ className }), copiedLabel: copiedLabel, copyLabel: copyLabel, "data-testid": dataTestId, style: style, text: text }));
 };
 
 const cvaDateTimeCell = cvaMerge([""]);
@@ -284,12 +284,12 @@ const cvaDateTimeSince$1 = cvaMerge(["slashed-zero", "text-neutral-500", "text-x
  * @param {DateTimeCellProps} props - The props for the DateTimeCell component
  * @returns {ReactElement} DateTimeCell component
  */
-const DateTimeCell = ({ format, timeZone, locale, date, withTimeSince = true, className, "data-testid": dataTestId, }) => {
+const DateTimeCell = ({ format, timeZone, locale, date, withTimeSince = true, className, "data-testid": dataTestId, style, }) => {
     if (!date) {
         return null;
     }
     const formattedDate = formatDateUtil(date, format, timeZone, locale);
-    return (jsxs("div", { className: cvaDateTimeCell({ className }), "data-testid": dataTestId, children: [jsx("p", { className: cvaDateTime$1(), children: formattedDate }), withTimeSince ? jsx(TimeSince, { date: date, locale: locale, timeZone: timeZone }) : null] }));
+    return (jsxs("div", { className: cvaDateTimeCell({ className }), "data-testid": dataTestId, style: style, children: [jsx("p", { className: cvaDateTime$1(), children: formattedDate }), withTimeSince ? jsx(TimeSince, { date: date, locale: locale, timeZone: timeZone }) : null] }));
 };
 const TimeSince = ({ date, timeZone, locale }) => {
     const timeSince = useMemo(() => {
@@ -330,8 +330,8 @@ const cvaHighlightCell = cvaMerge(["flex", "gap-2"]);
  * @param {HighlightCellProps} props - The props for the HighlightCell component
  * @returns {ReactElement} HighlightCell component
  */
-const HighlightCell = ({ className, highlights, "data-testid": dataTestId, ref }) => {
-    return (jsx("div", { className: cvaHighlightCell({ className }), "data-testid": dataTestId, ref: ref, children: highlights.map((highlight, index) => (jsx(Highlight, { color: "warning",
+const HighlightCell = ({ className, highlights, "data-testid": dataTestId, ref, style }) => {
+    return (jsx("div", { className: cvaHighlightCell({ className }), "data-testid": dataTestId, ref: ref, style: style, children: highlights.map((highlight, index) => (jsx(Highlight, { color: "warning",
             size: "medium",
             "data-testid": `${dataTestId}-${index}`,
             ...(typeof highlight === "string" ? { children: highlight } : highlight) }, index))) }));
@@ -418,14 +418,14 @@ const cvaIdentityCell = cvaMerge(["grid", "items-center", "text-sm", "gap-2"], {
  * @param {IdentityCellProps} props - The props for the IdentityCell component
  * @returns {ReactElement} IdentityCell component
  */
-const IdentityCell = ({ link, className, "data-testid": dataTestId, ref, title, details = [], thumbnail, }) => {
+const IdentityCell = ({ link, className, "data-testid": dataTestId, ref, style, title, details = [], thumbnail, }) => {
     const [href, setHref] = useState(undefined);
     useEffect(() => {
         if (link) {
             void link.href().then(setHref);
         }
     }, [link]);
-    return (jsxs("div", { className: cvaIdentityCell({ className, hasThumbnail: thumbnail !== undefined && thumbnail !== null }), "data-testid": dataTestId, ref: ref, children: [thumbnail !== undefined && thumbnail !== null ? (jsx("div", { className: "mr-1 flex h-8 w-8 items-center justify-center overflow-hidden rounded-md", children: thumbnail })) : null, jsxs("div", { className: "grid grid-rows-[min-content_auto] items-center text-sm", children: [jsx("div", { className: "gap-responsive-space-sm flex w-full min-w-0 items-center truncate text-sm", children: jsx(Heading, { className: "truncate text-sm", "data-testid": dataTestId ? `${dataTestId}-name` : undefined, variant: "tertiary", children: !link ? (jsx("span", { className: "truncate", children: title })) : (jsx(ExternalLink, { className: "truncate", color: "neutral", href: href ?? "", onClick: async (e) => {
+    return (jsxs("div", { className: cvaIdentityCell({ className, hasThumbnail: thumbnail !== undefined && thumbnail !== null }), "data-testid": dataTestId, ref: ref, style: style, children: [thumbnail !== undefined && thumbnail !== null ? (jsx("div", { className: "mr-1 flex h-8 w-8 items-center justify-center overflow-hidden rounded-md", children: thumbnail })) : null, jsxs("div", { className: "grid grid-rows-[min-content_auto] items-center text-sm", children: [jsx("div", { className: "gap-responsive-space-sm flex w-full min-w-0 items-center truncate text-sm", children: jsx(Heading, { className: "truncate text-sm", "data-testid": dataTestId ? `${dataTestId}-name` : undefined, variant: "tertiary", children: !link ? (jsx("span", { className: "truncate", children: title })) : (jsx(ExternalLink, { className: "truncate", color: "neutral", href: href ?? "", onClick: async (e) => {
                                     // Allow Cmd/Ctrl+Click, Shift+Click, or middle-click to open in new tab
                                     const hasModifierKey = e.ctrlKey || e.metaKey || e.shiftKey;
                                     const isMiddleClick = e.button === 1;
@@ -573,7 +573,7 @@ const LinkCell = ({ link, type, className, ref, ...rest }) => {
  * @param {ListTooltipProps<TItem>} props Component props.
  * @returns {ReactNode} Tooltip list markup.
  */
-const ListTooltip = ({ items, "data-testid": dataTestId, getLabel, getKey, loading = false, }) => {
+const ListTooltip = ({ items, "data-testid": dataTestId, getLabel, getKey, loading = false, style, }) => {
     const toDisplay = (item, index) => {
         if (getLabel) {
             return getLabel(item, index);
@@ -605,7 +605,7 @@ const ListTooltip = ({ items, "data-testid": dataTestId, getLabel, getKey, loadi
     if (loading) {
         return jsx(Spinner, { centering: "centered", mode: "dark" });
     }
-    return (jsx("ul", { className: "list-inside !ps-1 pl-1", "data-testid": dataTestId, children: items.map((item, index) => {
+    return (jsx("ul", { className: "list-inside !ps-1 pl-1", "data-testid": dataTestId, style: style, children: items.map((item, index) => {
             const label = toDisplay(item, index);
             if (label === "" || label === null || label === undefined) {
                 return null;
@@ -624,12 +624,12 @@ const cvaMultiValueTextCellTooltip = cvaMerge(["whitespace-no-wrap", "overflow-h
  * @param {MultiValueTextCellProps} props - The props for the MultiValueTextCell component
  * @returns {ReactElement} MultiValueTextCell component
  */
-const MultiValueTextCell = ({ content, count, countTooltip, icon, iconTooltip, "data-testid": dataTestId, className, onMouseEnter, ref, }) => {
+const MultiValueTextCell = ({ content, count, countTooltip, icon, iconTooltip, "data-testid": dataTestId, className, onMouseEnter, ref, style, }) => {
     const [isTooltipVisible, setIsTooltipVisible] = useState(false);
     const updateTooltipVisibility = (element) => {
         setIsTooltipVisible(element ? element.scrollWidth > element.clientWidth : false);
     };
-    return count !== null && count !== undefined && count > 0 ? (jsxs("div", { className: cvaMultiValueTextCellWrapper({ className }), "data-testid": dataTestId, ref: ref, children: [icon ? (jsx(Tooltip, { "data-testid": dataTestId ? `${dataTestId}-icon-tooltip` : undefined, disabled: !iconTooltip, label: iconTooltip ?? "", placement: "bottom", children: jsx("span", { className: "inline-flex items-center", children: icon }) })) : null, jsx("span", { className: cvaMultiValueTextCellTooltip(), ref: elementRef => updateTooltipVisibility(elementRef), children: jsx(Tooltip, { "data-testid": dataTestId ? `${dataTestId}-content-tooltip` : undefined, disabled: !isTooltipVisible, label: content ?? "", placement: "bottom", children: jsx(Text, { className: "inline", children: content ?? "" }) }) }), count > 1 ? (jsx(Tooltip, { "data-testid": dataTestId ? `${dataTestId}-count-tooltip` : undefined, disabled: countTooltip === undefined || countTooltip === null, label: countTooltip ?? "", placement: "bottom", children: jsxs(Tag, { className: "inline", color: "neutral", onMouseEnter: onMouseEnter, size: "small", children: ["+", count - 1] }) })) : null] })) : null;
+    return count !== null && count !== undefined && count > 0 ? (jsxs("div", { className: cvaMultiValueTextCellWrapper({ className }), "data-testid": dataTestId, ref: ref, style: style, children: [icon ? (jsx(Tooltip, { "data-testid": dataTestId ? `${dataTestId}-icon-tooltip` : undefined, disabled: !iconTooltip, label: iconTooltip ?? "", placement: "bottom", children: jsx("span", { className: "inline-flex items-center", children: icon }) })) : null, jsx("span", { className: cvaMultiValueTextCellTooltip(), ref: elementRef => updateTooltipVisibility(elementRef), children: jsx(Tooltip, { "data-testid": dataTestId ? `${dataTestId}-content-tooltip` : undefined, disabled: !isTooltipVisible, label: content ?? "", placement: "bottom", children: jsx(Text, { className: "inline", children: content ?? "" }) }) }), count > 1 ? (jsx(Tooltip, { "data-testid": dataTestId ? `${dataTestId}-count-tooltip` : undefined, disabled: countTooltip === undefined || countTooltip === null, label: countTooltip ?? "", placement: "bottom", children: jsxs(Tag, { className: "inline", color: "neutral", onMouseEnter: onMouseEnter, size: "small", children: ["+", count - 1] }) })) : null] })) : null;
 };
 
 /**
@@ -705,8 +705,8 @@ const cvaNumberCell = cvaMerge(["flex", "gap-1", "slashed-zero", "text-sm", "tex
  * @param {NumberCellProps} props - The props for the NumberCell component.
  * @returns {ReactElement} A React JSX element representing the NumberCell component.
  */
-const NumberCell = ({ value = "", unit, className, "data-testid": dataTestId, ref }) => {
-    return (jsxs("div", { className: cvaNumberCell({ className }), "data-testid": dataTestId, ref: ref, children: [jsx("span", { children: value }), value !== null && value !== "" && unit !== undefined && unit !== null && unit !== "" ? jsx("span", { children: unit }) : null] }));
+const NumberCell = ({ value = "", unit, className, "data-testid": dataTestId, ref, style }) => {
+    return (jsxs("div", { className: cvaNumberCell({ className }), "data-testid": dataTestId, ref: ref, style: style, children: [jsx("span", { children: value }), value !== null && value !== "" && unit !== undefined && unit !== null && unit !== "" ? (jsx("span", { children: unit })) : null] }));
 };
 
 const cvaPlainDateCell = cvaMerge([""]);
@@ -737,12 +737,12 @@ const cvaDateTimeSince = cvaMerge(["slashed-zero", "text-neutral-500", "text-xs"
  * @param {PlainDateCellProps} props - The props for the PlainDateCell component
  * @returns {ReactElement} PlainDateCell component
  */
-const PlainDateCell = ({ locale, date, withDaysSince = true, className, "data-testid": dataTestId, ref, }) => {
+const PlainDateCell = ({ locale, date, withDaysSince = true, className, "data-testid": dataTestId, ref, style, }) => {
     if (!date) {
         return null;
     }
     const formattedDate = formatDateUtil(date.toZonedDateTime("UTC"), DateTimeFormat.DATE_SHORT, "UTC", locale);
-    return (jsxs("div", { className: cvaPlainDateCell({ className }), "data-testid": dataTestId, ref: ref, children: [jsx("p", { className: cvaDateTime(), children: formattedDate }), withDaysSince ? jsx(DaysSince, { date: date, locale: locale }) : null] }));
+    return (jsxs("div", { className: cvaPlainDateCell({ className }), "data-testid": dataTestId, ref: ref, style: style, children: [jsx("p", { className: cvaDateTime(), children: formattedDate }), withDaysSince ? jsx(DaysSince, { date: date, locale: locale }) : null] }));
 };
 const DaysSince = ({ date, locale }) => {
     let timeSince = null;
@@ -914,7 +914,7 @@ const cvaResizeHandel = cvaMerge([
  * @param {RowActionsProps} props - The properties for the component.
  * @returns {ReactElement} A React component rendering the row actions.
  */
-const RowActions = ({ actions }) => {
+const RowActions = ({ actions, style }) => {
     const selectedActions = actions.filter(action => action.isSelected);
     const normalActions = actions.filter(action => (action.isVisible ?? true) && action.variant !== "danger");
     const dangerActions = actions.filter(action => (action.isVisible ?? true) && action.variant === "danger");
@@ -927,9 +927,9 @@ const RowActions = ({ actions }) => {
             (action.isVisible ?? true) && (jsx(Button, { disabled: action.disabled || action.loading, onClick: event => {
                 event.stopPropagation();
                 action.onClick(event);
-            }, prefix: jsx(IconWithLoader, { action: action, size: "small" }), size: "small", variant: "secondary", children: action.label })));
+            }, prefix: jsx(IconWithLoader, { action: action, size: "small" }), size: "small", style: style, variant: "secondary", children: action.label })));
     }
-    return (jsxs("div", { className: "flex items-center", "data-testid": "row-actions", children: [selectedActions.map((action, index) => (jsx(IconButton, { className: "mr-2", icon: action.iconName ? jsx(Icon, { name: action.iconName, size: "small" }) : undefined, onClick: event => {
+    return (jsxs("div", { className: "flex items-center", "data-testid": "row-actions", style: style, children: [selectedActions.map((action, index) => (jsx(IconButton, { className: "mr-2", icon: action.iconName ? jsx(Icon, { name: action.iconName, size: "small" }) : undefined, onClick: event => {
                     event.stopPropagation();
                     action.onClick(event);
                 }, size: "small", variant: "ghost-neutral" }, `selected-action-${index}`))), jsx(MoreMenu, { customButton: jsx(IconButton, { icon: jsx(Icon, { name: "EllipsisHorizontal", size: "medium" }), onClick: event => event.stopPropagation(), size: "small", variant: "ghost-neutral" }), children: close => (jsxs(MenuList, { children: [normalActions.map((action, index) => (jsx(MenuItem, { disabled: action.disabled || action.loading, label: action.label, onClick: event => {
@@ -1076,8 +1076,8 @@ const cvaTagsCell = cvaMerge(["flex", "gap-2"]);
  * @param {TagsCellProps} props - The props for the TagsCell component
  * @returns {ReactElement} TagsCell component
  */
-const TagsCell = ({ className, tags, "data-testid": dataTestId, ref }) => {
-    return (jsx("div", { className: cvaTagsCell({ className }), "data-testid": dataTestId, ref: ref, children: tags.map((tag, index) => (jsx(Tag, { color: "primary",
+const TagsCell = ({ className, tags, "data-testid": dataTestId, ref, style }) => {
+    return (jsx("div", { className: cvaTagsCell({ className }), "data-testid": dataTestId, ref: ref, style: style, children: tags.map((tag, index) => (jsx(Tag, { color: "primary",
             "data-testid": `${dataTestId}-${index}`,
             ...(typeof tag === "string" ? { children: tag } : tag) }, index))) }));
 };
@@ -1170,13 +1170,13 @@ const cvaTextCellTooltip = cvaMerge(["grid"]);
  * @param {TextCellProps} props - The props for the TextCell component
  * @returns {ReactElement} TextCell component
  */
-const TextCell = ({ content = "", className, "data-testid": dataTestId, ref }) => {
+const TextCell = ({ content = "", className, "data-testid": dataTestId, ref, style }) => {
     const [isTooltipVisible, setIsTooltipVisible] = useState(false);
     const updateTooltipVisibility = (element) => {
         setIsTooltipVisible(element ? element.scrollWidth > element.clientWidth : false);
     };
     const mergedRef = useMergeRefs([ref, (elementRef) => updateTooltipVisibility(elementRef)]);
-    return (jsx(Tooltip, { disabled: !isTooltipVisible, label: content, placement: "bottom", children: jsx("div", { className: cvaTextCellTooltip(), children: jsx("span", { className: cvaTextCell({ className }), "data-testid": dataTestId, ref: mergedRef, children: content }) }) }));
+    return (jsx(Tooltip, { disabled: !isTooltipVisible, label: content, placement: "bottom", children: jsx("div", { className: cvaTextCellTooltip(), children: jsx("span", { className: cvaTextCell({ className }), "data-testid": dataTestId, ref: mergedRef, style: style, children: content }) }) }));
 };
 
 /**

package/package.json

@@ -1,19 +1,19 @@
 {
   "name": "@trackunit/react-table-base-components",
-  "version": "1.24.1",
+  "version": "1.24.3",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
     "node": ">=24.x"
   },
   "dependencies": {
-    "@trackunit/react-components": "1.24.1",
+    "@trackunit/react-components": "1.24.2",
     "@trackunit/ui-icons": "1.13.1",
-    "@trackunit/react-form-components": "1.25.1",
+    "@trackunit/react-form-components": "1.25.3",
     "@trackunit/css-class-variance-utilities": "1.13.1",
     "@trackunit/date-and-time-utils": "1.13.1",
     "@trackunit/shared-utils": "1.15.1",
-    "@trackunit/i18n-library-translation": "1.21.1",
+    "@trackunit/i18n-library-translation": "1.21.2",
     "tailwind-merge": "^2.0.0"
   },
   "peerDependencies": {

package/src/components/ButtonCell/ButtonCell.d.ts

@@ -1,7 +1,7 @@
-import { ButtonCommonProps, IconColors, Refable } from "@trackunit/react-components";
+import { ButtonCommonProps, IconColors, Refable, type Styleable } from "@trackunit/react-components";
 import { IconName } from "@trackunit/ui-icons";
 import { ReactNode } from "react";
-export interface ButtonCellProps extends ButtonCommonProps, Refable<HTMLButtonElement> {
+export interface ButtonCellProps extends ButtonCommonProps, Refable<HTMLButtonElement>, Styleable {
     /**
      * The content to display inside the button, typically the action text.
      */
@@ -89,4 +89,4 @@ export interface ButtonCellProps extends ButtonCommonProps, Refable<HTMLButtonEl
  * @param {ButtonCellProps} props - The props for the ButtonCell component
  * @returns {ReactElement} ButtonCell component
  */
-export declare const ButtonCell: ({ children, className, "data-testid": dataTestId, iconColor, iconName, variant, ...rest }: ButtonCellProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ButtonCell: ({ children, className, "data-testid": dataTestId, iconColor, iconName, style, variant, ...rest }: ButtonCellProps) => import("react/jsx-runtime").JSX.Element;

package/src/components/CheckboxCell/CheckboxCell.d.ts

@@ -1,5 +1,5 @@
-import { CommonProps } from "@trackunit/react-components";
-export interface CheckboxCellProps extends CommonProps {
+import { CommonProps, type Styleable } from "@trackunit/react-components";
+export interface CheckboxCellProps extends CommonProps, Styleable {
     checked: boolean;
 }
 /**
@@ -21,4 +21,4 @@ export interface CheckboxCellProps extends CommonProps {
  * @param {CheckboxCellProps} props - The props for the CheckboxCell component
  * @returns {ReactElement} CheckboxCell component
  */
-export declare const CheckboxCell: ({ checked, className, "data-testid": dataTestId }: CheckboxCellProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CheckboxCell: ({ checked, className, "data-testid": dataTestId, style }: CheckboxCellProps) => import("react/jsx-runtime").JSX.Element;

package/src/components/CopyableCell/CopyableCell.d.ts

@@ -1,7 +1,7 @@
-import { CommonProps, type CopyableTextProps } from "@trackunit/react-components";
+import { CommonProps, type CopyableTextProps, type Styleable } from "@trackunit/react-components";
 import type { ReactElement } from "react";
 type CopyableCellSecondary = Pick<CopyableTextProps, "text">;
-export interface CopyableCellProps extends CommonProps, Pick<CopyableTextProps, "text"> {
+export interface CopyableCellProps extends CommonProps, Pick<CopyableTextProps, "text">, Styleable {
     /**
      * When provided, renders a multi-line cell with a secondary row below the primary.
      * The secondary row is independently copyable.
@@ -40,5 +40,5 @@ export interface CopyableCellProps extends CommonProps, Pick<CopyableTextProps,
  * @param {CopyableCellProps} props - The props for the CopyableCell component
  * @returns {ReactElement} CopyableCell component
  */
-export declare const CopyableCell: ({ text, secondary, "data-testid": dataTestId, className, }: CopyableCellProps) => ReactElement;
+export declare const CopyableCell: ({ text, secondary, "data-testid": dataTestId, className, style, }: CopyableCellProps) => ReactElement;
 export {};

package/src/components/DateTimeCell/DateTimeCell.d.ts

@@ -1,6 +1,6 @@
 import { TemporalFormat } from "@trackunit/date-and-time-utils";
-import { CommonProps, Refable } from "@trackunit/react-components";
-export interface DateTimeCellProps extends CommonProps, Refable<HTMLDivElement> {
+import { CommonProps, Refable, type Styleable } from "@trackunit/react-components";
+export interface DateTimeCellProps extends CommonProps, Refable<HTMLDivElement>, Styleable {
     /**
      * The date to render.
      * If not provided, the component will not render.
@@ -86,7 +86,7 @@ export interface DateTimeCellProps extends CommonProps, Refable<HTMLDivElement>
  * @param {DateTimeCellProps} props - The props for the DateTimeCell component
  * @returns {ReactElement} DateTimeCell component
  */
-export declare const DateTimeCell: ({ format, timeZone, locale, date, withTimeSince, className, "data-testid": dataTestId, }: DateTimeCellProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const DateTimeCell: ({ format, timeZone, locale, date, withTimeSince, className, "data-testid": dataTestId, style, }: DateTimeCellProps) => import("react/jsx-runtime").JSX.Element | null;
 export interface TimeSinceProps extends Pick<DateTimeCellProps, "date" | "timeZone" | "locale"> {
     date: Date;
 }

package/src/components/HighlightCell/HighlightCell.d.ts

@@ -43,4 +43,4 @@ export interface HighlightCellProps extends CommonProps, HTMLAttributes<HTMLTabl
  * @param {HighlightCellProps} props - The props for the HighlightCell component
  * @returns {ReactElement} HighlightCell component
  */
-export declare const HighlightCell: ({ className, highlights, "data-testid": dataTestId, ref }: HighlightCellProps) => import("react/jsx-runtime").JSX.Element;
+export declare const HighlightCell: ({ className, highlights, "data-testid": dataTestId, ref, style }: HighlightCellProps) => import("react/jsx-runtime").JSX.Element;

package/src/components/IdentityCell/IdentityCell.d.ts

@@ -1,6 +1,6 @@
-import { CommonProps, Refable } from "@trackunit/react-components";
+import { CommonProps, Refable, type Styleable } from "@trackunit/react-components";
 import { ReactElement, ReactNode } from "react";
-export interface IdentityCellProps extends CommonProps, Refable<HTMLDivElement> {
+export interface IdentityCellProps extends CommonProps, Refable<HTMLDivElement>, Styleable {
     className?: string;
     "data-testid"?: string;
     /** The main title or name to display */
@@ -89,4 +89,4 @@ export interface IdentityCellProps extends CommonProps, Refable<HTMLDivElement>
  * @param {IdentityCellProps} props - The props for the IdentityCell component
  * @returns {ReactElement} IdentityCell component
  */
-export declare const IdentityCell: ({ link, className, "data-testid": dataTestId, ref, title, details, thumbnail, }: IdentityCellProps) => ReactElement;
+export declare const IdentityCell: ({ link, className, "data-testid": dataTestId, ref, style, title, details, thumbnail, }: IdentityCellProps) => ReactElement;

package/src/components/ImageCell/ImageCell.d.ts

@@ -1,5 +1,5 @@
-import { CommonProps, Refable } from "@trackunit/react-components";
-export interface ImageCellProps extends CommonProps, Refable<HTMLImageElement> {
+import { CommonProps, Refable, type Styleable } from "@trackunit/react-components";
+export interface ImageCellProps extends CommonProps, Refable<HTMLImageElement>, Styleable {
     /**
      * The URL of the image to be displayed.
      */

package/src/components/MultiRowTableCell/MultiRowTableCell.d.ts

@@ -1,6 +1,6 @@
-import { CommonProps } from "@trackunit/react-components";
+import { CommonProps, type Styleable } from "@trackunit/react-components";
 import { ReactNode } from "react";
-export interface MultiRowTableCellProps extends CommonProps {
+export interface MultiRowTableCellProps extends CommonProps, Styleable {
     /**
      * Main row of the cell.
      */
@@ -32,4 +32,4 @@ export interface MultiRowTableCellProps extends CommonProps {
  * @param {MultiRowTableCellProps} props - The props for the MultiRowTableCell component
  * @returns {ReactElement} MultiRowTableCell component
  */
-export declare const MultiRowTableCell: ({ main, secondary, "data-testid": dataTestId, className, }: MultiRowTableCellProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MultiRowTableCell: ({ main, secondary, "data-testid": dataTestId, className, style, }: MultiRowTableCellProps) => import("react/jsx-runtime").JSX.Element;

package/src/components/MultiValueTextCell/ListTooltip.d.ts

@@ -1,10 +1,11 @@
+import { type Styleable } from "@trackunit/react-components";
 import { Key, ReactNode } from "react";
 /**
  * Props for a generic tooltip list component.
  *
  * @template TItem Element type of the list.
  */
-export type ListTooltipProps<TItem = unknown> = {
+export type ListTooltipProps<TItem = unknown> = Styleable & {
     /** Items to render inside the tooltip. */
     items: Array<TItem>;
     /** Data test id for testing. */
@@ -31,4 +32,4 @@ export type ListTooltipProps<TItem = unknown> = {
  * @param {ListTooltipProps<TItem>} props Component props.
  * @returns {ReactNode} Tooltip list markup.
  */
-export declare const ListTooltip: <TItem = unknown>({ items, "data-testid": dataTestId, getLabel, getKey, loading, }: ListTooltipProps<TItem>) => import("react/jsx-runtime").JSX.Element;
+export declare const ListTooltip: <TItem = unknown>({ items, "data-testid": dataTestId, getLabel, getKey, loading, style, }: ListTooltipProps<TItem>) => import("react/jsx-runtime").JSX.Element;

package/src/components/MultiValueTextCell/MultiValueTextCell.d.ts

@@ -1,6 +1,6 @@
-import { CommonProps, Refable } from "@trackunit/react-components";
+import { CommonProps, Refable, type Styleable } from "@trackunit/react-components";
 import { MouseEventHandler, ReactElement, ReactNode } from "react";
-export interface MultiValueTextCellProps extends CommonProps, Refable<HTMLDivElement> {
+export interface MultiValueTextCellProps extends CommonProps, Refable<HTMLDivElement>, Styleable {
     /**
      * Icon rendered to the left of the text.
      * Provides visual context for the primary value.
@@ -42,4 +42,4 @@ export interface MultiValueTextCellProps extends CommonProps, Refable<HTMLDivEle
  * @param {MultiValueTextCellProps} props - The props for the MultiValueTextCell component
  * @returns {ReactElement} MultiValueTextCell component
  */
-export declare const MultiValueTextCell: ({ content, count, countTooltip, icon, iconTooltip, "data-testid": dataTestId, className, onMouseEnter, ref, }: MultiValueTextCellProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const MultiValueTextCell: ({ content, count, countTooltip, icon, iconTooltip, "data-testid": dataTestId, className, onMouseEnter, ref, style, }: MultiValueTextCellProps) => import("react/jsx-runtime").JSX.Element | null;

package/src/components/NumberCell/NumberCell.d.ts

@@ -1,5 +1,5 @@
-import { CommonProps, Refable } from "@trackunit/react-components";
-export interface NumberCellProps extends CommonProps, Refable<HTMLDivElement> {
+import { CommonProps, Refable, type Styleable } from "@trackunit/react-components";
+export interface NumberCellProps extends CommonProps, Refable<HTMLDivElement>, Styleable {
     /**
      * The numeric value to be displayed.
      * This can be either a string or a number.
@@ -65,4 +65,4 @@ export interface NumberCellProps extends CommonProps, Refable<HTMLDivElement> {
  * @param {NumberCellProps} props - The props for the NumberCell component.
  * @returns {ReactElement} A React JSX element representing the NumberCell component.
  */
-export declare const NumberCell: ({ value, unit, className, "data-testid": dataTestId, ref }: NumberCellProps) => import("react/jsx-runtime").JSX.Element;
+export declare const NumberCell: ({ value, unit, className, "data-testid": dataTestId, ref, style }: NumberCellProps) => import("react/jsx-runtime").JSX.Element;

package/src/components/PlainDateCell/PlainDateCell.d.ts

@@ -1,6 +1,6 @@
 import { Temporal } from "@trackunit/date-and-time-utils";
-import { CommonProps, Refable } from "@trackunit/react-components";
-export interface PlainDateCellProps extends CommonProps, Refable<HTMLDivElement> {
+import { CommonProps, Refable, type Styleable } from "@trackunit/react-components";
+export interface PlainDateCellProps extends CommonProps, Refable<HTMLDivElement>, Styleable {
     /**
      * The PlainDate to render.
      * If not provided, the component will not render.
@@ -43,7 +43,7 @@ export interface PlainDateCellProps extends CommonProps, Refable<HTMLDivElement>
  * @param {PlainDateCellProps} props - The props for the PlainDateCell component
  * @returns {ReactElement} PlainDateCell component
  */
-export declare const PlainDateCell: ({ locale, date, withDaysSince, className, "data-testid": dataTestId, ref, }: PlainDateCellProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const PlainDateCell: ({ locale, date, withDaysSince, className, "data-testid": dataTestId, ref, style, }: PlainDateCellProps) => import("react/jsx-runtime").JSX.Element | null;
 export interface DaysSinceProps extends Pick<PlainDateCellProps, "date" | "locale"> {
     date: Temporal.PlainDate;
 }

package/src/components/RowActions/RowActions.d.ts

@@ -1,4 +1,4 @@
-import { MenuItemVariant } from "@trackunit/react-components";
+import { MenuItemVariant, type Styleable } from "@trackunit/react-components";
 import { IconName } from "@trackunit/ui-icons";
 import { MouseEventHandler } from "react";
 export type Action = {
@@ -19,7 +19,7 @@ export type Action = {
     /** Controls visibility of the action. Defaults to true if not specified */
     isVisible?: boolean | null;
 };
-export interface RowActionsProps {
+export interface RowActionsProps extends Styleable {
     /**
      * Array of actions to display. Single actions render as a button,
      * multiple actions render as a dropdown menu with selected actions as icon buttons.
@@ -136,4 +136,4 @@ export interface RowActionsProps {
  * @param {RowActionsProps} props - The properties for the component.
  * @returns {ReactElement} A React component rendering the row actions.
  */
-export declare const RowActions: ({ actions }: RowActionsProps) => false | import("react/jsx-runtime").JSX.Element | null | undefined;
+export declare const RowActions: ({ actions, style }: RowActionsProps) => false | import("react/jsx-runtime").JSX.Element | null | undefined;

package/src/components/TagsCell/TagsCell.d.ts

@@ -61,4 +61,4 @@ export interface TagsCellProps extends CommonProps, HTMLAttributes<HTMLTableSect
  * @param {TagsCellProps} props - The props for the TagsCell component
  * @returns {ReactElement} TagsCell component
  */
-export declare const TagsCell: ({ className, tags, "data-testid": dataTestId, ref }: TagsCellProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TagsCell: ({ className, tags, "data-testid": dataTestId, ref, style }: TagsCellProps) => import("react/jsx-runtime").JSX.Element;

package/src/components/TextCell/TextCell.d.ts

@@ -1,6 +1,6 @@
-import { CommonProps, Refable } from "@trackunit/react-components";
+import { CommonProps, Refable, type Styleable } from "@trackunit/react-components";
 import { ReactElement } from "react";
-export interface TextCellProps extends CommonProps, Refable<HTMLSpanElement> {
+export interface TextCellProps extends CommonProps, Refable<HTMLSpanElement>, Styleable {
     /**
      * The text or React element to display in the cell.
      * When text overflows the cell width, it will be truncated with an ellipsis
@@ -51,4 +51,4 @@ export interface TextCellProps extends CommonProps, Refable<HTMLSpanElement> {
  * @param {TextCellProps} props - The props for the TextCell component
  * @returns {ReactElement} TextCell component
  */
-export declare const TextCell: ({ content, className, "data-testid": dataTestId, ref }: TextCellProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TextCell: ({ content, className, "data-testid": dataTestId, ref, style }: TextCellProps) => import("react/jsx-runtime").JSX.Element;