@trackunit/react-table-base-components 2.6.48 → 2.6.49

package/index.cjs.js

@@ -128,7 +128,7 @@ const ButtonCell = ({ children, className, "data-testid": dataTestId, iconColor
     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([""]);
+const cvaCheckboxCell = cssClassVarianceUtilities.cva({ base: [""] });
 
 /**
  * CheckboxCell renders a read-only checkbox inside a table cell. The checkbox reflects a boolean value
@@ -153,17 +153,14 @@ 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",
-    "min-w-0",
-    "max-w-full",
-    "overflow-hidden",
-]);
-const cvaMultiRowTableCell = cssClassVarianceUtilities.cvaMerge(["flex", "justify-start", "min-w-0", "max-w-full"]);
-const cvaMainRowText = cssClassVarianceUtilities.cvaMerge(["overflow-hidden", "text-ellipsis", "text-sm"]);
-const cvaSecondaryRowText = cssClassVarianceUtilities.cvaMerge(["overflow-hidden", "text-ellipsis", "text-neutral-500", "text-xs"]);
+const cvaMultiRowTableCellSection = cssClassVarianceUtilities.cva({
+    base: ["flex", "flex-col", "justify-center", "min-w-0", "max-w-full", "overflow-hidden"],
+});
+const cvaMultiRowTableCell = cssClassVarianceUtilities.cva({ base: ["flex", "justify-start", "min-w-0", "max-w-full"] });
+const cvaMainRowText = cssClassVarianceUtilities.cva({ base: ["overflow-hidden", "text-ellipsis", "text-sm"] });
+const cvaSecondaryRowText = cssClassVarianceUtilities.cva({
+    base: ["overflow-hidden", "text-ellipsis", "text-neutral-500", "text-xs"],
+});
 
 /**
  * MultiRowTableCell renders two stacked rows inside a single table cell — a primary `main` row
@@ -191,7 +188,7 @@ const MultiRowTableCell = ({ main, secondary, "data-testid": dataTestId, classNa
     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"]);
+const cvaCopyableCell = cssClassVarianceUtilities.cva({ base: ["overflow-hidden", "w-fit"] });
 
 /**
  * CopyableCell renders a table cell with click-to-copy functionality.
@@ -235,9 +232,9 @@ const CopyableCell = ({ text, secondary, "data-testid": dataTestId, className, s
     return (jsxRuntime.jsx(reactComponents.CopyableText, { className: cvaCopyableCell({ className }), copiedLabel: copiedLabel, copyLabel: copyLabel, "data-testid": dataTestId, style: style, text: text }));
 };
 
-const cvaDateTimeCell = cssClassVarianceUtilities.cvaMerge([""]);
-const cvaDateTime$1 = cssClassVarianceUtilities.cvaMerge(["slashed-zero", "text-sm", "text-ellipsis"]);
-const cvaDateTimeSince$1 = cssClassVarianceUtilities.cvaMerge(["slashed-zero", "text-neutral-500", "text-xs", "text-ellipsis"]);
+const cvaDateTimeCell = cssClassVarianceUtilities.cva({ base: [""] });
+const cvaDateTime$1 = cssClassVarianceUtilities.cva({ base: ["slashed-zero", "text-sm", "text-ellipsis"] });
+const cvaDateTimeSince$1 = cssClassVarianceUtilities.cva({ base: ["slashed-zero", "text-neutral-500", "text-xs", "text-ellipsis"] });
 
 /**
  * The `<DateTimeCell>` component renders a formatted date/time in a table cell.
@@ -319,7 +316,7 @@ const TimeSince = ({ date, timeZone, locale }) => {
     return timeSince ? jsxRuntime.jsx("p", { className: cvaDateTimeSince$1(), children: timeSince }) : null;
 };
 
-const cvaHighlightCell = cssClassVarianceUtilities.cvaMerge(["flex", "gap-2"]);
+const cvaHighlightCell = cssClassVarianceUtilities.cva({ base: ["flex", "gap-2"] });
 
 /**
  * HighlightCell renders one or more colored highlight badges inside a table cell. Each highlight
@@ -353,7 +350,8 @@ const HighlightCell = ({ className, highlights, "data-testid": dataTestId, ref,
             ...(typeof highlight === "string" ? { children: highlight } : highlight) }, index))) }));
 };
 
-const cvaIdentityCell = cssClassVarianceUtilities.cvaMerge(["grid", "items-center", "text-sm", "gap-2"], {
+const cvaIdentityCell = cssClassVarianceUtilities.cva({
+    base: ["grid", "items-center", "text-sm", "gap-2"],
     variants: {
         hasThumbnail: {
             true: "grid-cols-[min-content_1fr]",
@@ -511,7 +509,7 @@ const IndicatorCell = ({ withBackground = false, weight = "normal", ref, ...rest
     return jsxRuntime.jsx(reactComponents.Indicator, { ref: ref, weight: weight, withBackground: withBackground, ...rest });
 };
 
-const cvaLinkCell = cssClassVarianceUtilities.cvaMerge(["text-sm"]);
+const cvaLinkCell = cssClassVarianceUtilities.cva({ base: ["text-sm"] });
 
 /**
  * The `<LinkCell>` component renders a clickable link in a table cell.
@@ -630,8 +628,10 @@ const ListTooltip = ({ items, "data-testid": dataTestId, getLabel, getKey, loadi
         }) }));
 };
 
-const cvaMultiValueTextCellWrapper = cssClassVarianceUtilities.cvaMerge(["flex", "flex-row", "items-center", "gap-1", "overflow-hidden"]);
-const cvaMultiValueTextCellTooltip = cssClassVarianceUtilities.cvaMerge(["whitespace-no-wrap", "overflow-hidden", "text-ellipsis"]);
+const cvaMultiValueTextCellWrapper = cssClassVarianceUtilities.cva({
+    base: ["flex", "flex-row", "items-center", "gap-1", "overflow-hidden"],
+});
+const cvaMultiValueTextCellTooltip = cssClassVarianceUtilities.cva({ base: ["whitespace-no-wrap", "overflow-hidden", "text-ellipsis"] });
 
 /**
  * The `<MultiValueTextCell>` component is used for displaying the text values with multiple values in a table cell. First element is displayed as a text, the rest of the values are displayed as a number. Icon can be passed as an optional prop.
@@ -679,7 +679,7 @@ const NoticeCell = ({ ref, tooltipLabel, ...rest }) => {
     return (jsxRuntime.jsx(reactComponents.Tooltip, { disabled: !tooltipLabel, label: tooltipLabel, children: jsxRuntime.jsx(reactComponents.Notice, { ref: ref, ...rest }) }));
 };
 
-const cvaNumberCell = cssClassVarianceUtilities.cvaMerge(["flex", "gap-1", "slashed-zero", "text-sm", "text-ellipsis"]);
+const cvaNumberCell = cssClassVarianceUtilities.cva({ base: ["flex", "gap-1", "slashed-zero", "text-sm", "text-ellipsis"] });
 
 /**
  * The `<NumberCell>` component is used for displaying numbers with optional units in a table cell.
@@ -732,9 +732,9 @@ const NumberCell = ({ value = "", unit, className, "data-testid": dataTestId, re
     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([""]);
-const cvaDateTime = cssClassVarianceUtilities.cvaMerge(["slashed-zero", "text-sm", "text-ellipsis"]);
-const cvaDateTimeSince = cssClassVarianceUtilities.cvaMerge(["slashed-zero", "text-neutral-500", "text-xs", "text-ellipsis"]);
+const cvaPlainDateCell = cssClassVarianceUtilities.cva({ base: [""] });
+const cvaDateTime = cssClassVarianceUtilities.cva({ base: ["slashed-zero", "text-sm", "text-ellipsis"] });
+const cvaDateTimeSince = cssClassVarianceUtilities.cva({ base: ["slashed-zero", "text-neutral-500", "text-xs", "text-ellipsis"] });
 
 /**
  * PlainDateCell renders a `Temporal.PlainDate` inside a table cell as a formatted date string.
@@ -801,24 +801,25 @@ const ResizeHandle = ({ isResizing = false, "data-testid": dataTestId, onMouseDo
     };
     return (jsxRuntime.jsx("div", { className: cvaResizeHandel({ isResizing, className }), "data-testid": dataTestId, onMouseDown: onMouseDown, role: "separator", ...rest }));
 };
-const cvaResizeHandel = cssClassVarianceUtilities.cvaMerge([
-    "absolute",
-    "cursor-ew-resize",
-    "z-2",
-    "h-full",
-    "w-2",
-    "top-0",
-    "right-[-3px]",
-    "flex",
-    "items-center",
-    "after:block",
-    "after:left-[calc(50%-2px)]",
-    "after:h-full",
-    "after:z-[1]",
-    "after:absolute",
-    "after:w-0.5",
-    "after:hover:bg-info-500",
-], {
+const cvaResizeHandel = cssClassVarianceUtilities.cva({
+    base: [
+        "absolute",
+        "cursor-ew-resize",
+        "z-2",
+        "h-full",
+        "w-2",
+        "top-0",
+        "right-[-3px]",
+        "flex",
+        "items-center",
+        "after:block",
+        "after:left-[calc(50%-2px)]",
+        "after:h-full",
+        "after:z-[1]",
+        "after:absolute",
+        "after:w-0.5",
+        "after:hover:bg-info-500",
+    ],
     variants: {
         isResizing: {
             true: ["opacity-1"],
@@ -1005,28 +1006,29 @@ const IconWithLoader = ({ action, size }) => {
 const SortIndicator = ({ sortingState = false, "data-testid": dataTestId, className, ref, ...rest }) => {
     return (jsxRuntime.jsx("div", { className: cvaSortIndicator({ sortingState, className }), "data-testid": dataTestId, ref: ref, role: "separator", ...rest }));
 };
-const cvaSortIndicator = cssClassVarianceUtilities.cvaMerge([
-    "before:block",
-    "before:h-1",
-    "before:absolute",
-    "before:top-[13px]",
-    "before:w-1",
-    "before:content-['_']",
-    "before:border-4",
-    "before:border-solid",
-    "before:border-transparent",
-    "after:block",
-    "after:h-1",
-    "after:absolute",
-    "after:w-1",
-    "after:top-[18px]",
-    "after:content-['_']",
-    "after:border-4",
-    "after:border-solid",
-    "after:border-transparent",
-    "before:border-b-neutral-300",
-    "after:border-t-neutral-300",
-], {
+const cvaSortIndicator = cssClassVarianceUtilities.cva({
+    base: [
+        "before:block",
+        "before:h-1",
+        "before:absolute",
+        "before:top-[13px]",
+        "before:w-1",
+        "before:content-['_']",
+        "before:border-4",
+        "before:border-solid",
+        "before:border-transparent",
+        "after:block",
+        "after:h-1",
+        "after:absolute",
+        "after:w-1",
+        "after:top-[18px]",
+        "after:content-['_']",
+        "after:border-4",
+        "after:border-solid",
+        "after:border-transparent",
+        "before:border-b-neutral-300",
+        "after:border-t-neutral-300",
+    ],
     variants: {
         sortingState: {
             asc: ["before:border-b-neutral-400 after:hidden"],
@@ -1049,9 +1051,9 @@ const cvaSortIndicator = cssClassVarianceUtilities.cvaMerge([
 const TableRoot = ({ "data-testid": dataTestId, className, children, ...rest }) => {
     return (jsxRuntime.jsx("table", { className: cvaTableRoot({ className }), "data-testid": dataTestId, ...rest, children: children }));
 };
-const cvaTableRoot = cssClassVarianceUtilities.cvaMerge(["border-spacing-0", "min-w-full", "border-collapse", "grid-rows-min-fr", "grid"]);
+const cvaTableRoot = cssClassVarianceUtilities.cva({ base: ["border-spacing-0", "min-w-full", "border-collapse", "grid-rows-min-fr", "grid"] });
 
-const cvaTagsCell = cssClassVarianceUtilities.cvaMerge(["flex", "gap-2"]);
+const cvaTagsCell = cssClassVarianceUtilities.cva({ base: ["flex", "gap-2"] });
 
 /**
  * The `<TagsCell>` component renders a list of tags in a table cell.
@@ -1137,19 +1139,21 @@ const Td = ({ "data-testid": dataTestId, className, children, ref, ...rest }) =>
                 .map((child, index) => (react.isValidElement(child) ? react.cloneElement(child, { key: index }) : child))
             : children }));
 };
-const cvaTd = cssClassVarianceUtilities.cvaMerge([
-    "overflow-hidden",
-    "border-r",
-    "border-neutral-200",
-    "align-middle",
-    "text-ellipsis",
-    "whitespace-nowrap",
-    "py-table-spacing",
-    "px-4",
-]);
+const cvaTd = cssClassVarianceUtilities.cva({
+    base: [
+        "overflow-hidden",
+        "border-r",
+        "border-neutral-200",
+        "align-middle",
+        "text-ellipsis",
+        "whitespace-nowrap",
+        "py-table-spacing",
+        "px-4",
+    ],
+});
 
-const cvaTextCell = cssClassVarianceUtilities.cvaMerge(["truncate", "text-sm"]);
-const cvaTextCellTooltip = cssClassVarianceUtilities.cvaMerge(["grid"]);
+const cvaTextCell = cssClassVarianceUtilities.cva({ base: ["truncate", "text-sm"] });
+const cvaTextCellTooltip = cssClassVarianceUtilities.cva({ base: ["grid"] });
 
 /**
  * The `<TextCell>` component is used for displaying text in a table cell.
@@ -1234,29 +1238,33 @@ const Th = ({ "data-testid": dataTestId, className, children, ref, ...rest }) =>
                     .map((child, index) => (react.isValidElement(child) ? react.cloneElement(child, { key: index }) : child))
                 : children }) }));
 };
-const cvaTh = cssClassVarianceUtilities.cvaMerge([
-    "hover:bg-neutral-200",
-    "text-sm",
-    "border-r",
-    "border-neutral-200",
-    "overflow-hidden",
-    "font-medium",
-    "whitespace-nowrap",
-    "h-[46px]",
-    "p-0",
-]);
-const cvaChildrenContainer = cssClassVarianceUtilities.cvaMerge([
-    "w-full",
-    "min-w-0",
-    "flex",
-    "items-center",
-    "overflow-hidden",
-    "text-ellipsis",
-    "whitespace-nowrap",
-    "pl-4",
-    "py-table-spacing",
-    "pr-2",
-]);
+const cvaTh = cssClassVarianceUtilities.cva({
+    base: [
+        "hover:bg-neutral-200",
+        "text-sm",
+        "border-r",
+        "border-neutral-200",
+        "overflow-hidden",
+        "font-medium",
+        "whitespace-nowrap",
+        "h-[46px]",
+        "p-0",
+    ],
+});
+const cvaChildrenContainer = cssClassVarianceUtilities.cva({
+    base: [
+        "w-full",
+        "min-w-0",
+        "flex",
+        "items-center",
+        "overflow-hidden",
+        "text-ellipsis",
+        "whitespace-nowrap",
+        "pl-4",
+        "py-table-spacing",
+        "pr-2",
+    ],
+});
 
 /**
  * The Thead is a wrapper for the thead html element.
@@ -1271,7 +1279,8 @@ const cvaChildrenContainer = cssClassVarianceUtilities.cvaMerge([
 const Thead = ({ "data-testid": dataTestId, className, children, sticky = true, ref, ...rest }) => {
     return (jsxRuntime.jsx("thead", { className: cvaThead({ sticky, className }), "data-testid": dataTestId, ref: ref, ...rest, children: children }));
 };
-const cvaThead = cssClassVarianceUtilities.cvaMerge(["bg-neutral-100", "text-left"], {
+const cvaThead = cssClassVarianceUtilities.cva({
+    base: ["bg-neutral-100", "text-left"],
     variants: {
         sticky: {
             true: ["sticky", "top-0"],
@@ -1296,7 +1305,8 @@ const cvaThead = cssClassVarianceUtilities.cvaMerge(["bg-neutral-100", "text-lef
 const Tr = ({ "data-testid": dataTestId, className, children, layout = "default", ref, ...rest }) => {
     return (jsxRuntime.jsx("tr", { className: cvaTr({ layout, className }), "data-testid": dataTestId, ref: ref, role: "row", ...rest, children: children }));
 };
-const cvaTr = cssClassVarianceUtilities.cvaMerge(["w-full", "h-max", "border-b", "border-neutral-200"], {
+const cvaTr = cssClassVarianceUtilities.cva({
+    base: ["w-full", "h-max", "border-b", "border-neutral-200"],
     variants: {
         layout: {
             default: "",

package/index.esm.js

@@ -3,7 +3,7 @@ import { registerTranslations, useNamespaceTranslation } from '@trackunit/i18n-l
 import { Button, Icon, CopyableText, Highlight, Heading, ExternalLink, DetailsList, Indicator, Spinner, Tooltip, Text, Tag, Notice, IconButton, MoreMenu, MenuContent, MenuItem, MenuDivider, useMergeRefs } from '@trackunit/react-components';
 import { twMerge } from 'tailwind-merge';
 import { Checkbox } from '@trackunit/react-form-components';
-import { cvaMerge } from '@trackunit/css-class-variance-utilities';
+import { cva } from '@trackunit/css-class-variance-utilities';
 import { formatDateUtil, timeSinceAuto, timeSinceInDays, Temporal } from '@trackunit/date-and-time-utils';
 import { useTimezone, useLocale, useHourCycle } from '@trackunit/react-date-and-time-hooks';
 import { useMemo, useState, useEffect, isValidElement, cloneElement } from 'react';
@@ -126,7 +126,7 @@ const ButtonCell = ({ children, className, "data-testid": dataTestId, iconColor
     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([""]);
+const cvaCheckboxCell = cva({ base: [""] });
 
 /**
  * CheckboxCell renders a read-only checkbox inside a table cell. The checkbox reflects a boolean value
@@ -151,17 +151,14 @@ 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",
-    "min-w-0",
-    "max-w-full",
-    "overflow-hidden",
-]);
-const cvaMultiRowTableCell = cvaMerge(["flex", "justify-start", "min-w-0", "max-w-full"]);
-const cvaMainRowText = cvaMerge(["overflow-hidden", "text-ellipsis", "text-sm"]);
-const cvaSecondaryRowText = cvaMerge(["overflow-hidden", "text-ellipsis", "text-neutral-500", "text-xs"]);
+const cvaMultiRowTableCellSection = cva({
+    base: ["flex", "flex-col", "justify-center", "min-w-0", "max-w-full", "overflow-hidden"],
+});
+const cvaMultiRowTableCell = cva({ base: ["flex", "justify-start", "min-w-0", "max-w-full"] });
+const cvaMainRowText = cva({ base: ["overflow-hidden", "text-ellipsis", "text-sm"] });
+const cvaSecondaryRowText = cva({
+    base: ["overflow-hidden", "text-ellipsis", "text-neutral-500", "text-xs"],
+});
 
 /**
  * MultiRowTableCell renders two stacked rows inside a single table cell — a primary `main` row
@@ -189,7 +186,7 @@ const MultiRowTableCell = ({ main, secondary, "data-testid": dataTestId, classNa
     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"]);
+const cvaCopyableCell = cva({ base: ["overflow-hidden", "w-fit"] });
 
 /**
  * CopyableCell renders a table cell with click-to-copy functionality.
@@ -233,9 +230,9 @@ const CopyableCell = ({ text, secondary, "data-testid": dataTestId, className, s
     return (jsx(CopyableText, { className: cvaCopyableCell({ className }), copiedLabel: copiedLabel, copyLabel: copyLabel, "data-testid": dataTestId, style: style, text: text }));
 };
 
-const cvaDateTimeCell = cvaMerge([""]);
-const cvaDateTime$1 = cvaMerge(["slashed-zero", "text-sm", "text-ellipsis"]);
-const cvaDateTimeSince$1 = cvaMerge(["slashed-zero", "text-neutral-500", "text-xs", "text-ellipsis"]);
+const cvaDateTimeCell = cva({ base: [""] });
+const cvaDateTime$1 = cva({ base: ["slashed-zero", "text-sm", "text-ellipsis"] });
+const cvaDateTimeSince$1 = cva({ base: ["slashed-zero", "text-neutral-500", "text-xs", "text-ellipsis"] });
 
 /**
  * The `<DateTimeCell>` component renders a formatted date/time in a table cell.
@@ -317,7 +314,7 @@ const TimeSince = ({ date, timeZone, locale }) => {
     return timeSince ? jsx("p", { className: cvaDateTimeSince$1(), children: timeSince }) : null;
 };
 
-const cvaHighlightCell = cvaMerge(["flex", "gap-2"]);
+const cvaHighlightCell = cva({ base: ["flex", "gap-2"] });
 
 /**
  * HighlightCell renders one or more colored highlight badges inside a table cell. Each highlight
@@ -351,7 +348,8 @@ const HighlightCell = ({ className, highlights, "data-testid": dataTestId, ref,
             ...(typeof highlight === "string" ? { children: highlight } : highlight) }, index))) }));
 };
 
-const cvaIdentityCell = cvaMerge(["grid", "items-center", "text-sm", "gap-2"], {
+const cvaIdentityCell = cva({
+    base: ["grid", "items-center", "text-sm", "gap-2"],
     variants: {
         hasThumbnail: {
             true: "grid-cols-[min-content_1fr]",
@@ -509,7 +507,7 @@ const IndicatorCell = ({ withBackground = false, weight = "normal", ref, ...rest
     return jsx(Indicator, { ref: ref, weight: weight, withBackground: withBackground, ...rest });
 };
 
-const cvaLinkCell = cvaMerge(["text-sm"]);
+const cvaLinkCell = cva({ base: ["text-sm"] });
 
 /**
  * The `<LinkCell>` component renders a clickable link in a table cell.
@@ -628,8 +626,10 @@ const ListTooltip = ({ items, "data-testid": dataTestId, getLabel, getKey, loadi
         }) }));
 };
 
-const cvaMultiValueTextCellWrapper = cvaMerge(["flex", "flex-row", "items-center", "gap-1", "overflow-hidden"]);
-const cvaMultiValueTextCellTooltip = cvaMerge(["whitespace-no-wrap", "overflow-hidden", "text-ellipsis"]);
+const cvaMultiValueTextCellWrapper = cva({
+    base: ["flex", "flex-row", "items-center", "gap-1", "overflow-hidden"],
+});
+const cvaMultiValueTextCellTooltip = cva({ base: ["whitespace-no-wrap", "overflow-hidden", "text-ellipsis"] });
 
 /**
  * The `<MultiValueTextCell>` component is used for displaying the text values with multiple values in a table cell. First element is displayed as a text, the rest of the values are displayed as a number. Icon can be passed as an optional prop.
@@ -677,7 +677,7 @@ const NoticeCell = ({ ref, tooltipLabel, ...rest }) => {
     return (jsx(Tooltip, { disabled: !tooltipLabel, label: tooltipLabel, children: jsx(Notice, { ref: ref, ...rest }) }));
 };
 
-const cvaNumberCell = cvaMerge(["flex", "gap-1", "slashed-zero", "text-sm", "text-ellipsis"]);
+const cvaNumberCell = cva({ base: ["flex", "gap-1", "slashed-zero", "text-sm", "text-ellipsis"] });
 
 /**
  * The `<NumberCell>` component is used for displaying numbers with optional units in a table cell.
@@ -730,9 +730,9 @@ const NumberCell = ({ value = "", unit, className, "data-testid": dataTestId, re
     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([""]);
-const cvaDateTime = cvaMerge(["slashed-zero", "text-sm", "text-ellipsis"]);
-const cvaDateTimeSince = cvaMerge(["slashed-zero", "text-neutral-500", "text-xs", "text-ellipsis"]);
+const cvaPlainDateCell = cva({ base: [""] });
+const cvaDateTime = cva({ base: ["slashed-zero", "text-sm", "text-ellipsis"] });
+const cvaDateTimeSince = cva({ base: ["slashed-zero", "text-neutral-500", "text-xs", "text-ellipsis"] });
 
 /**
  * PlainDateCell renders a `Temporal.PlainDate` inside a table cell as a formatted date string.
@@ -799,24 +799,25 @@ const ResizeHandle = ({ isResizing = false, "data-testid": dataTestId, onMouseDo
     };
     return (jsx("div", { className: cvaResizeHandel({ isResizing, className }), "data-testid": dataTestId, onMouseDown: onMouseDown, role: "separator", ...rest }));
 };
-const cvaResizeHandel = cvaMerge([
-    "absolute",
-    "cursor-ew-resize",
-    "z-2",
-    "h-full",
-    "w-2",
-    "top-0",
-    "right-[-3px]",
-    "flex",
-    "items-center",
-    "after:block",
-    "after:left-[calc(50%-2px)]",
-    "after:h-full",
-    "after:z-[1]",
-    "after:absolute",
-    "after:w-0.5",
-    "after:hover:bg-info-500",
-], {
+const cvaResizeHandel = cva({
+    base: [
+        "absolute",
+        "cursor-ew-resize",
+        "z-2",
+        "h-full",
+        "w-2",
+        "top-0",
+        "right-[-3px]",
+        "flex",
+        "items-center",
+        "after:block",
+        "after:left-[calc(50%-2px)]",
+        "after:h-full",
+        "after:z-[1]",
+        "after:absolute",
+        "after:w-0.5",
+        "after:hover:bg-info-500",
+    ],
     variants: {
         isResizing: {
             true: ["opacity-1"],
@@ -1003,28 +1004,29 @@ const IconWithLoader = ({ action, size }) => {
 const SortIndicator = ({ sortingState = false, "data-testid": dataTestId, className, ref, ...rest }) => {
     return (jsx("div", { className: cvaSortIndicator({ sortingState, className }), "data-testid": dataTestId, ref: ref, role: "separator", ...rest }));
 };
-const cvaSortIndicator = cvaMerge([
-    "before:block",
-    "before:h-1",
-    "before:absolute",
-    "before:top-[13px]",
-    "before:w-1",
-    "before:content-['_']",
-    "before:border-4",
-    "before:border-solid",
-    "before:border-transparent",
-    "after:block",
-    "after:h-1",
-    "after:absolute",
-    "after:w-1",
-    "after:top-[18px]",
-    "after:content-['_']",
-    "after:border-4",
-    "after:border-solid",
-    "after:border-transparent",
-    "before:border-b-neutral-300",
-    "after:border-t-neutral-300",
-], {
+const cvaSortIndicator = cva({
+    base: [
+        "before:block",
+        "before:h-1",
+        "before:absolute",
+        "before:top-[13px]",
+        "before:w-1",
+        "before:content-['_']",
+        "before:border-4",
+        "before:border-solid",
+        "before:border-transparent",
+        "after:block",
+        "after:h-1",
+        "after:absolute",
+        "after:w-1",
+        "after:top-[18px]",
+        "after:content-['_']",
+        "after:border-4",
+        "after:border-solid",
+        "after:border-transparent",
+        "before:border-b-neutral-300",
+        "after:border-t-neutral-300",
+    ],
     variants: {
         sortingState: {
             asc: ["before:border-b-neutral-400 after:hidden"],
@@ -1047,9 +1049,9 @@ const cvaSortIndicator = cvaMerge([
 const TableRoot = ({ "data-testid": dataTestId, className, children, ...rest }) => {
     return (jsx("table", { className: cvaTableRoot({ className }), "data-testid": dataTestId, ...rest, children: children }));
 };
-const cvaTableRoot = cvaMerge(["border-spacing-0", "min-w-full", "border-collapse", "grid-rows-min-fr", "grid"]);
+const cvaTableRoot = cva({ base: ["border-spacing-0", "min-w-full", "border-collapse", "grid-rows-min-fr", "grid"] });
 
-const cvaTagsCell = cvaMerge(["flex", "gap-2"]);
+const cvaTagsCell = cva({ base: ["flex", "gap-2"] });
 
 /**
  * The `<TagsCell>` component renders a list of tags in a table cell.
@@ -1135,19 +1137,21 @@ const Td = ({ "data-testid": dataTestId, className, children, ref, ...rest }) =>
                 .map((child, index) => (isValidElement(child) ? cloneElement(child, { key: index }) : child))
             : children }));
 };
-const cvaTd = cvaMerge([
-    "overflow-hidden",
-    "border-r",
-    "border-neutral-200",
-    "align-middle",
-    "text-ellipsis",
-    "whitespace-nowrap",
-    "py-table-spacing",
-    "px-4",
-]);
+const cvaTd = cva({
+    base: [
+        "overflow-hidden",
+        "border-r",
+        "border-neutral-200",
+        "align-middle",
+        "text-ellipsis",
+        "whitespace-nowrap",
+        "py-table-spacing",
+        "px-4",
+    ],
+});
 
-const cvaTextCell = cvaMerge(["truncate", "text-sm"]);
-const cvaTextCellTooltip = cvaMerge(["grid"]);
+const cvaTextCell = cva({ base: ["truncate", "text-sm"] });
+const cvaTextCellTooltip = cva({ base: ["grid"] });
 
 /**
  * The `<TextCell>` component is used for displaying text in a table cell.
@@ -1232,29 +1236,33 @@ const Th = ({ "data-testid": dataTestId, className, children, ref, ...rest }) =>
                     .map((child, index) => (isValidElement(child) ? cloneElement(child, { key: index }) : child))
                 : children }) }));
 };
-const cvaTh = cvaMerge([
-    "hover:bg-neutral-200",
-    "text-sm",
-    "border-r",
-    "border-neutral-200",
-    "overflow-hidden",
-    "font-medium",
-    "whitespace-nowrap",
-    "h-[46px]",
-    "p-0",
-]);
-const cvaChildrenContainer = cvaMerge([
-    "w-full",
-    "min-w-0",
-    "flex",
-    "items-center",
-    "overflow-hidden",
-    "text-ellipsis",
-    "whitespace-nowrap",
-    "pl-4",
-    "py-table-spacing",
-    "pr-2",
-]);
+const cvaTh = cva({
+    base: [
+        "hover:bg-neutral-200",
+        "text-sm",
+        "border-r",
+        "border-neutral-200",
+        "overflow-hidden",
+        "font-medium",
+        "whitespace-nowrap",
+        "h-[46px]",
+        "p-0",
+    ],
+});
+const cvaChildrenContainer = cva({
+    base: [
+        "w-full",
+        "min-w-0",
+        "flex",
+        "items-center",
+        "overflow-hidden",
+        "text-ellipsis",
+        "whitespace-nowrap",
+        "pl-4",
+        "py-table-spacing",
+        "pr-2",
+    ],
+});
 
 /**
  * The Thead is a wrapper for the thead html element.
@@ -1269,7 +1277,8 @@ const cvaChildrenContainer = cvaMerge([
 const Thead = ({ "data-testid": dataTestId, className, children, sticky = true, ref, ...rest }) => {
     return (jsx("thead", { className: cvaThead({ sticky, className }), "data-testid": dataTestId, ref: ref, ...rest, children: children }));
 };
-const cvaThead = cvaMerge(["bg-neutral-100", "text-left"], {
+const cvaThead = cva({
+    base: ["bg-neutral-100", "text-left"],
     variants: {
         sticky: {
             true: ["sticky", "top-0"],
@@ -1294,7 +1303,8 @@ const cvaThead = cvaMerge(["bg-neutral-100", "text-left"], {
 const Tr = ({ "data-testid": dataTestId, className, children, layout = "default", ref, ...rest }) => {
     return (jsx("tr", { className: cvaTr({ layout, className }), "data-testid": dataTestId, ref: ref, role: "row", ...rest, children: children }));
 };
-const cvaTr = cvaMerge(["w-full", "h-max", "border-b", "border-neutral-200"], {
+const cvaTr = cva({
+    base: ["w-full", "h-max", "border-b", "border-neutral-200"],
     variants: {
         layout: {
             default: "",

package/package.json

@@ -1,20 +1,20 @@
 {
   "name": "@trackunit/react-table-base-components",
-  "version": "2.6.48",
+  "version": "2.6.49",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
     "node": ">=24.x"
   },
   "dependencies": {
-    "@trackunit/react-components": "2.13.0",
-    "@trackunit/ui-icons": "1.14.28",
-    "@trackunit/react-form-components": "2.6.48",
-    "@trackunit/css-class-variance-utilities": "1.14.29",
-    "@trackunit/date-and-time-utils": "1.14.30",
-    "@trackunit/react-date-and-time-hooks": "2.6.46",
-    "@trackunit/shared-utils": "1.16.32",
-    "@trackunit/i18n-library-translation": "2.4.41",
+    "@trackunit/react-components": "2.13.1",
+    "@trackunit/ui-icons": "1.14.29",
+    "@trackunit/react-form-components": "2.6.49",
+    "@trackunit/css-class-variance-utilities": "2.0.0",
+    "@trackunit/date-and-time-utils": "1.14.31",
+    "@trackunit/react-date-and-time-hooks": "2.6.47",
+    "@trackunit/shared-utils": "1.16.33",
+    "@trackunit/i18n-library-translation": "2.4.42",
     "tailwind-merge": "^2.0.0"
   },
   "peerDependencies": {

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

@@ -1 +1,6 @@
-export declare const cvaCheckboxCell: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const cvaCheckboxCell: import("cva").CVAComponent<Omit<{
+    base: string[];
+}, "defaultVariants"> & {
+    variants: unknown;
+    defaultVariants: Omit<{}, never>;
+}, unknown>;

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

@@ -1 +1,6 @@
-export declare const cvaCopyableCell: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const cvaCopyableCell: import("cva").CVAComponent<Omit<{
+    base: string[];
+}, "defaultVariants"> & {
+    variants: unknown;
+    defaultVariants: Omit<{}, never>;
+}, unknown>;

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

@@ -1,3 +1,18 @@
-export declare const cvaDateTimeCell: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
-export declare const cvaDateTime: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
-export declare const cvaDateTimeSince: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const cvaDateTimeCell: import("cva").CVAComponent<Omit<{
+    base: string[];
+}, "defaultVariants"> & {
+    variants: unknown;
+    defaultVariants: Omit<{}, never>;
+}, unknown>;
+export declare const cvaDateTime: import("cva").CVAComponent<Omit<{
+    base: string[];
+}, "defaultVariants"> & {
+    variants: unknown;
+    defaultVariants: Omit<{}, never>;
+}, unknown>;
+export declare const cvaDateTimeSince: import("cva").CVAComponent<Omit<{
+    base: string[];
+}, "defaultVariants"> & {
+    variants: unknown;
+    defaultVariants: Omit<{}, never>;
+}, unknown>;

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

@@ -1 +1,6 @@
-export declare const cvaHighlightCell: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const cvaHighlightCell: import("cva").CVAComponent<Omit<{
+    base: string[];
+}, "defaultVariants"> & {
+    variants: unknown;
+    defaultVariants: Omit<{}, never>;
+}, unknown>;

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

@@ -1,3 +1,22 @@
-export declare const cvaIdentityCell: (props?: ({
-    hasThumbnail?: boolean | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const cvaIdentityCell: import("cva").CVAComponent<Omit<{
+    base: string[];
+    variants: {
+        hasThumbnail: {
+            true: string;
+            false: string;
+        };
+    };
+}, "defaultVariants"> & {
+    variants: {
+        hasThumbnail: {
+            true: string;
+            false: string;
+        };
+    };
+    defaultVariants: Omit<{}, never>;
+}, {
+    hasThumbnail: {
+        true: string;
+        false: string;
+    };
+}>;

package/src/components/LinkCell/LinkCell.variants.d.ts

@@ -1 +1,6 @@
-export declare const cvaLinkCell: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const cvaLinkCell: import("cva").CVAComponent<Omit<{
+    base: string[];
+}, "defaultVariants"> & {
+    variants: unknown;
+    defaultVariants: Omit<{}, never>;
+}, unknown>;

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

@@ -1,4 +1,24 @@
-export declare const cvaMultiRowTableCellSection: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
-export declare const cvaMultiRowTableCell: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
-export declare const cvaMainRowText: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
-export declare const cvaSecondaryRowText: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const cvaMultiRowTableCellSection: import("cva").CVAComponent<Omit<{
+    base: string[];
+}, "defaultVariants"> & {
+    variants: unknown;
+    defaultVariants: Omit<{}, never>;
+}, unknown>;
+export declare const cvaMultiRowTableCell: import("cva").CVAComponent<Omit<{
+    base: string[];
+}, "defaultVariants"> & {
+    variants: unknown;
+    defaultVariants: Omit<{}, never>;
+}, unknown>;
+export declare const cvaMainRowText: import("cva").CVAComponent<Omit<{
+    base: string[];
+}, "defaultVariants"> & {
+    variants: unknown;
+    defaultVariants: Omit<{}, never>;
+}, unknown>;
+export declare const cvaSecondaryRowText: import("cva").CVAComponent<Omit<{
+    base: string[];
+}, "defaultVariants"> & {
+    variants: unknown;
+    defaultVariants: Omit<{}, never>;
+}, unknown>;

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

@@ -1,2 +1,12 @@
-export declare const cvaMultiValueTextCellWrapper: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
-export declare const cvaMultiValueTextCellTooltip: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const cvaMultiValueTextCellWrapper: import("cva").CVAComponent<Omit<{
+    base: string[];
+}, "defaultVariants"> & {
+    variants: unknown;
+    defaultVariants: Omit<{}, never>;
+}, unknown>;
+export declare const cvaMultiValueTextCellTooltip: import("cva").CVAComponent<Omit<{
+    base: string[];
+}, "defaultVariants"> & {
+    variants: unknown;
+    defaultVariants: Omit<{}, never>;
+}, unknown>;

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

@@ -1 +1,6 @@
-export declare const cvaNumberCell: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const cvaNumberCell: import("cva").CVAComponent<Omit<{
+    base: string[];
+}, "defaultVariants"> & {
+    variants: unknown;
+    defaultVariants: Omit<{}, never>;
+}, unknown>;

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

@@ -1,3 +1,18 @@
-export declare const cvaPlainDateCell: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
-export declare const cvaDateTime: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
-export declare const cvaDateTimeSince: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const cvaPlainDateCell: import("cva").CVAComponent<Omit<{
+    base: string[];
+}, "defaultVariants"> & {
+    variants: unknown;
+    defaultVariants: Omit<{}, never>;
+}, unknown>;
+export declare const cvaDateTime: import("cva").CVAComponent<Omit<{
+    base: string[];
+}, "defaultVariants"> & {
+    variants: unknown;
+    defaultVariants: Omit<{}, never>;
+}, unknown>;
+export declare const cvaDateTimeSince: import("cva").CVAComponent<Omit<{
+    base: string[];
+}, "defaultVariants"> & {
+    variants: unknown;
+    defaultVariants: Omit<{}, never>;
+}, unknown>;

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

@@ -1 +1,6 @@
-export declare const cvaTagsCell: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const cvaTagsCell: import("cva").CVAComponent<Omit<{
+    base: string[];
+}, "defaultVariants"> & {
+    variants: unknown;
+    defaultVariants: Omit<{}, never>;
+}, unknown>;

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

@@ -1,2 +1,12 @@
-export declare const cvaTextCell: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
-export declare const cvaTextCellTooltip: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const cvaTextCell: import("cva").CVAComponent<Omit<{
+    base: string[];
+}, "defaultVariants"> & {
+    variants: unknown;
+    defaultVariants: Omit<{}, never>;
+}, unknown>;
+export declare const cvaTextCellTooltip: import("cva").CVAComponent<Omit<{
+    base: string[];
+}, "defaultVariants"> & {
+    variants: unknown;
+    defaultVariants: Omit<{}, never>;
+}, unknown>;