@trackunit/react-components 3.8.7 → 3.8.9

package/index.cjs.js

@@ -3126,6 +3126,9 @@ const cvaInteractableItem = cssClassVarianceUtilities.cva({
 // used across the app. Class definitions are colocated with the component
 // so it can evolve independently — if a similar layout emerges elsewhere,
 // promote the shared parts deliberately rather than re-plumbing here.
+const cvaCardRoot = cssClassVarianceUtilities.cva({
+    base: ["min-w-0", "max-w-full"],
+});
 // Horizontal row: main cluster (image/thumbnail + text) + optional chevron.
 // `gap-2` (8px) is the space between connectivity (the right edge of the
 // text stack) and the chevron. Image-to-metadata spacing lives on
@@ -3490,9 +3493,9 @@ const IdentityCard = ({ title, subtitle, image, thumbnail, thumbnailColor = "inf
     return (jsxRuntime.jsx(Card, { className: isClickable
             ? cvaInteractableItem({
                 cursor: "pointer",
-                className: ["focus-visible:outline-native", className],
+                className: ["focus-visible:outline-native", cvaCardRoot({ className })],
             })
-            : className, "data-testid": dataTestId, onClick: onClick, ref: ref, style: style, ...clickableProps, children: jsxRuntime.jsxs("div", { className: cvaCardContentRow(), children: [jsxRuntime.jsxs("div", { className: cvaCardMain({ singleLine: isSingleLine }), children: [showImage ? (jsxRuntime.jsx("div", { className: cvaCardImage(), "data-testid": dataTestId ? `${dataTestId}-image` : undefined, style: imageSlotStyle, children: image })) : null, showThumbnail ? (jsxRuntime.jsx("div", { className: cvaCardThumbnail({
+            : cvaCardRoot({ className }), "data-testid": dataTestId, onClick: onClick, ref: ref, style: style, ...clickableProps, children: jsxRuntime.jsxs("div", { className: cvaCardContentRow(), children: [jsxRuntime.jsxs("div", { className: cvaCardMain({ singleLine: isSingleLine }), children: [showImage ? (jsxRuntime.jsx("div", { className: cvaCardImage(), "data-testid": dataTestId ? `${dataTestId}-image` : undefined, style: imageSlotStyle, children: image })) : null, showThumbnail ? (jsxRuntime.jsx("div", { className: cvaCardThumbnail({
                                 className: `text-${thumbnailColor} bg-${thumbnailBackground}`,
                             }), "data-testid": dataTestId ? `${dataTestId}-thumbnail` : undefined, children: thumbnail })) : null, jsxRuntime.jsxs("div", { className: cvaCardTextStack(), ref: textStackRef, children: [jsxRuntime.jsxs("div", { className: cvaCardIdentityGroup({ singleLine: isSingleLine }), "data-testid": dataTestId ? `${dataTestId}-identity-group` : undefined, children: [jsxRuntime.jsxs("div", { className: cvaCardTitleRow(), children: [jsxRuntime.jsx("div", { className: cvaCardTitleCluster(), children: jsxRuntime.jsx("h3", { className: cvaCardTitle(), "data-testid": dataTestId ? `${dataTestId}-title` : undefined, 
                                                         // Inline text-wrap defeats the unlayered global
@@ -3769,7 +3772,7 @@ const IdentityCardSkeleton = ({ hasImage = false, hasThumbnail = false, hasSubti
     // Mirror the loaded `IdentityCard` single-line rule so the skeleton →
     // loaded transition keeps the same vertical alignment against the image.
     const isSingleLine = !hasSubtitle && !hasStatusIndicators;
-    return (jsxRuntime.jsx(Card, { className: className, "data-testid": dataTestId, ref: ref, style: style, children: jsxRuntime.jsxs("div", { className: cvaCardContentRow(), children: [jsxRuntime.jsxs("div", { className: cvaCardMain({ singleLine: isSingleLine }), children: [hasImage ? (jsxRuntime.jsx("div", { className: cvaCardImage(), "data-testid": dataTestId ? `${dataTestId}-image` : undefined, style: imageSlotStyle, children: jsxRuntime.jsx(SkeletonBlock, { "data-testid": dataTestId ? `${dataTestId}-image-skeleton` : undefined, height: "100%", width: "100%" }) })) : null, showThumbnail ? (jsxRuntime.jsx("div", { className: cvaCardThumbnail(), "data-testid": dataTestId ? `${dataTestId}-thumbnail` : undefined, children: jsxRuntime.jsx(SkeletonBlock, { "data-testid": dataTestId ? `${dataTestId}-thumbnail-skeleton` : undefined, height: "100%", width: "100%" }) })) : null, jsxRuntime.jsxs("div", { className: cvaCardTextStack(), ref: textStackRef, children: [jsxRuntime.jsxs("div", { className: cvaCardIdentityGroup({ singleLine: isSingleLine }), "data-testid": dataTestId ? `${dataTestId}-identity-group` : undefined, children: [jsxRuntime.jsxs("div", { className: cvaCardTitleRow(), children: [jsxRuntime.jsx("div", { className: cvaCardTitleCluster(), children: jsxRuntime.jsx(SkeletonLabel, { "data-testid": dataTestId ? `${dataTestId}-title-skeleton` : undefined, textSize: "text-base", width: 140 }) }), hasConnectivity ? (jsxRuntime.jsx(SkeletonBlock, { "data-testid": dataTestId ? `${dataTestId}-connectivity-skeleton` : undefined, height: 14, width: 50 })) : null] }), hasSubtitle ? (jsxRuntime.jsx(SkeletonLabel, { "data-testid": dataTestId ? `${dataTestId}-subtitle-skeleton` : undefined, textSize: "text-xs", width: 180 })) : null] }), hasStatusIndicators ? (jsxRuntime.jsxs("div", { className: cvaCardStatusSkeletonRow(), "data-testid": dataTestId ? `${dataTestId}-status-skeleton` : undefined, children: [jsxRuntime.jsx(SkeletonBlock, { height: 14, width: 42 }), jsxRuntime.jsx(SkeletonBlock, { height: 14, width: 64 })] })) : null] })] }), hasChevron ? (jsxRuntime.jsx("div", { className: cvaCardChevron(), "data-testid": dataTestId ? `${dataTestId}-chevron` : undefined, children: jsxRuntime.jsx(Icon, { name: "ChevronRight", size: "medium" }) })) : null] }) }));
+    return (jsxRuntime.jsx(Card, { className: cvaCardRoot({ className }), "data-testid": dataTestId, ref: ref, style: style, children: jsxRuntime.jsxs("div", { className: cvaCardContentRow(), children: [jsxRuntime.jsxs("div", { className: cvaCardMain({ singleLine: isSingleLine }), children: [hasImage ? (jsxRuntime.jsx("div", { className: cvaCardImage(), "data-testid": dataTestId ? `${dataTestId}-image` : undefined, style: imageSlotStyle, children: jsxRuntime.jsx(SkeletonBlock, { "data-testid": dataTestId ? `${dataTestId}-image-skeleton` : undefined, height: "100%", width: "100%" }) })) : null, showThumbnail ? (jsxRuntime.jsx("div", { className: cvaCardThumbnail(), "data-testid": dataTestId ? `${dataTestId}-thumbnail` : undefined, children: jsxRuntime.jsx(SkeletonBlock, { "data-testid": dataTestId ? `${dataTestId}-thumbnail-skeleton` : undefined, height: "100%", width: "100%" }) })) : null, jsxRuntime.jsxs("div", { className: cvaCardTextStack(), ref: textStackRef, children: [jsxRuntime.jsxs("div", { className: cvaCardIdentityGroup({ singleLine: isSingleLine }), "data-testid": dataTestId ? `${dataTestId}-identity-group` : undefined, children: [jsxRuntime.jsxs("div", { className: cvaCardTitleRow(), children: [jsxRuntime.jsx("div", { className: cvaCardTitleCluster(), children: jsxRuntime.jsx(SkeletonLabel, { "data-testid": dataTestId ? `${dataTestId}-title-skeleton` : undefined, textSize: "text-base", width: 140 }) }), hasConnectivity ? (jsxRuntime.jsx(SkeletonBlock, { "data-testid": dataTestId ? `${dataTestId}-connectivity-skeleton` : undefined, height: 14, width: 50 })) : null] }), hasSubtitle ? (jsxRuntime.jsx(SkeletonLabel, { "data-testid": dataTestId ? `${dataTestId}-subtitle-skeleton` : undefined, textSize: "text-xs", width: 180 })) : null] }), hasStatusIndicators ? (jsxRuntime.jsxs("div", { className: cvaCardStatusSkeletonRow(), "data-testid": dataTestId ? `${dataTestId}-status-skeleton` : undefined, children: [jsxRuntime.jsx(SkeletonBlock, { height: 14, width: 42 }), jsxRuntime.jsx(SkeletonBlock, { height: 14, width: 64 })] })) : null] })] }), hasChevron ? (jsxRuntime.jsx("div", { className: cvaCardChevron(), "data-testid": dataTestId ? `${dataTestId}-chevron` : undefined, children: jsxRuntime.jsx(Icon, { name: "ChevronRight", size: "medium" }) })) : null] }) }));
 };
 
 const cvaBadge = cssClassVarianceUtilities.cva({

package/index.esm.js

@@ -3125,6 +3125,9 @@ const cvaInteractableItem = cva({
 // used across the app. Class definitions are colocated with the component
 // so it can evolve independently — if a similar layout emerges elsewhere,
 // promote the shared parts deliberately rather than re-plumbing here.
+const cvaCardRoot = cva({
+    base: ["min-w-0", "max-w-full"],
+});
 // Horizontal row: main cluster (image/thumbnail + text) + optional chevron.
 // `gap-2` (8px) is the space between connectivity (the right edge of the
 // text stack) and the chevron. Image-to-metadata spacing lives on
@@ -3489,9 +3492,9 @@ const IdentityCard = ({ title, subtitle, image, thumbnail, thumbnailColor = "inf
     return (jsx(Card, { className: isClickable
             ? cvaInteractableItem({
                 cursor: "pointer",
-                className: ["focus-visible:outline-native", className],
+                className: ["focus-visible:outline-native", cvaCardRoot({ className })],
             })
-            : className, "data-testid": dataTestId, onClick: onClick, ref: ref, style: style, ...clickableProps, children: jsxs("div", { className: cvaCardContentRow(), children: [jsxs("div", { className: cvaCardMain({ singleLine: isSingleLine }), children: [showImage ? (jsx("div", { className: cvaCardImage(), "data-testid": dataTestId ? `${dataTestId}-image` : undefined, style: imageSlotStyle, children: image })) : null, showThumbnail ? (jsx("div", { className: cvaCardThumbnail({
+            : cvaCardRoot({ className }), "data-testid": dataTestId, onClick: onClick, ref: ref, style: style, ...clickableProps, children: jsxs("div", { className: cvaCardContentRow(), children: [jsxs("div", { className: cvaCardMain({ singleLine: isSingleLine }), children: [showImage ? (jsx("div", { className: cvaCardImage(), "data-testid": dataTestId ? `${dataTestId}-image` : undefined, style: imageSlotStyle, children: image })) : null, showThumbnail ? (jsx("div", { className: cvaCardThumbnail({
                                 className: `text-${thumbnailColor} bg-${thumbnailBackground}`,
                             }), "data-testid": dataTestId ? `${dataTestId}-thumbnail` : undefined, children: thumbnail })) : null, jsxs("div", { className: cvaCardTextStack(), ref: textStackRef, children: [jsxs("div", { className: cvaCardIdentityGroup({ singleLine: isSingleLine }), "data-testid": dataTestId ? `${dataTestId}-identity-group` : undefined, children: [jsxs("div", { className: cvaCardTitleRow(), children: [jsx("div", { className: cvaCardTitleCluster(), children: jsx("h3", { className: cvaCardTitle(), "data-testid": dataTestId ? `${dataTestId}-title` : undefined, 
                                                         // Inline text-wrap defeats the unlayered global
@@ -3768,7 +3771,7 @@ const IdentityCardSkeleton = ({ hasImage = false, hasThumbnail = false, hasSubti
     // Mirror the loaded `IdentityCard` single-line rule so the skeleton →
     // loaded transition keeps the same vertical alignment against the image.
     const isSingleLine = !hasSubtitle && !hasStatusIndicators;
-    return (jsx(Card, { className: className, "data-testid": dataTestId, ref: ref, style: style, children: jsxs("div", { className: cvaCardContentRow(), children: [jsxs("div", { className: cvaCardMain({ singleLine: isSingleLine }), children: [hasImage ? (jsx("div", { className: cvaCardImage(), "data-testid": dataTestId ? `${dataTestId}-image` : undefined, style: imageSlotStyle, children: jsx(SkeletonBlock, { "data-testid": dataTestId ? `${dataTestId}-image-skeleton` : undefined, height: "100%", width: "100%" }) })) : null, showThumbnail ? (jsx("div", { className: cvaCardThumbnail(), "data-testid": dataTestId ? `${dataTestId}-thumbnail` : undefined, children: jsx(SkeletonBlock, { "data-testid": dataTestId ? `${dataTestId}-thumbnail-skeleton` : undefined, height: "100%", width: "100%" }) })) : null, jsxs("div", { className: cvaCardTextStack(), ref: textStackRef, children: [jsxs("div", { className: cvaCardIdentityGroup({ singleLine: isSingleLine }), "data-testid": dataTestId ? `${dataTestId}-identity-group` : undefined, children: [jsxs("div", { className: cvaCardTitleRow(), children: [jsx("div", { className: cvaCardTitleCluster(), children: jsx(SkeletonLabel, { "data-testid": dataTestId ? `${dataTestId}-title-skeleton` : undefined, textSize: "text-base", width: 140 }) }), hasConnectivity ? (jsx(SkeletonBlock, { "data-testid": dataTestId ? `${dataTestId}-connectivity-skeleton` : undefined, height: 14, width: 50 })) : null] }), hasSubtitle ? (jsx(SkeletonLabel, { "data-testid": dataTestId ? `${dataTestId}-subtitle-skeleton` : undefined, textSize: "text-xs", width: 180 })) : null] }), hasStatusIndicators ? (jsxs("div", { className: cvaCardStatusSkeletonRow(), "data-testid": dataTestId ? `${dataTestId}-status-skeleton` : undefined, children: [jsx(SkeletonBlock, { height: 14, width: 42 }), jsx(SkeletonBlock, { height: 14, width: 64 })] })) : null] })] }), hasChevron ? (jsx("div", { className: cvaCardChevron(), "data-testid": dataTestId ? `${dataTestId}-chevron` : undefined, children: jsx(Icon, { name: "ChevronRight", size: "medium" }) })) : null] }) }));
+    return (jsx(Card, { className: cvaCardRoot({ className }), "data-testid": dataTestId, ref: ref, style: style, children: jsxs("div", { className: cvaCardContentRow(), children: [jsxs("div", { className: cvaCardMain({ singleLine: isSingleLine }), children: [hasImage ? (jsx("div", { className: cvaCardImage(), "data-testid": dataTestId ? `${dataTestId}-image` : undefined, style: imageSlotStyle, children: jsx(SkeletonBlock, { "data-testid": dataTestId ? `${dataTestId}-image-skeleton` : undefined, height: "100%", width: "100%" }) })) : null, showThumbnail ? (jsx("div", { className: cvaCardThumbnail(), "data-testid": dataTestId ? `${dataTestId}-thumbnail` : undefined, children: jsx(SkeletonBlock, { "data-testid": dataTestId ? `${dataTestId}-thumbnail-skeleton` : undefined, height: "100%", width: "100%" }) })) : null, jsxs("div", { className: cvaCardTextStack(), ref: textStackRef, children: [jsxs("div", { className: cvaCardIdentityGroup({ singleLine: isSingleLine }), "data-testid": dataTestId ? `${dataTestId}-identity-group` : undefined, children: [jsxs("div", { className: cvaCardTitleRow(), children: [jsx("div", { className: cvaCardTitleCluster(), children: jsx(SkeletonLabel, { "data-testid": dataTestId ? `${dataTestId}-title-skeleton` : undefined, textSize: "text-base", width: 140 }) }), hasConnectivity ? (jsx(SkeletonBlock, { "data-testid": dataTestId ? `${dataTestId}-connectivity-skeleton` : undefined, height: 14, width: 50 })) : null] }), hasSubtitle ? (jsx(SkeletonLabel, { "data-testid": dataTestId ? `${dataTestId}-subtitle-skeleton` : undefined, textSize: "text-xs", width: 180 })) : null] }), hasStatusIndicators ? (jsxs("div", { className: cvaCardStatusSkeletonRow(), "data-testid": dataTestId ? `${dataTestId}-status-skeleton` : undefined, children: [jsx(SkeletonBlock, { height: 14, width: 42 }), jsx(SkeletonBlock, { height: 14, width: 64 })] })) : null] })] }), hasChevron ? (jsx("div", { className: cvaCardChevron(), "data-testid": dataTestId ? `${dataTestId}-chevron` : undefined, children: jsx(Icon, { name: "ChevronRight", size: "medium" }) })) : null] }) }));
 };
 
 const cvaBadge = cva({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "3.8.7",
+  "version": "3.8.9",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "migrations": "./migrations.json",
@@ -14,16 +14,16 @@
     "@floating-ui/react": "^0.26.25",
     "string-ts": "^2.0.0",
     "tailwind-merge": "^2.0.0",
-    "@trackunit/ui-design-tokens": "1.18.8",
-    "@trackunit/css-class-variance-utilities": "2.3.8",
-    "@trackunit/shared-utils": "1.19.8",
-    "@trackunit/ui-icons": "1.17.8",
+    "@trackunit/ui-design-tokens": "1.18.9",
+    "@trackunit/css-class-variance-utilities": "2.3.9",
+    "@trackunit/shared-utils": "1.19.9",
+    "@trackunit/ui-icons": "1.17.9",
     "es-toolkit": "^1.52.0",
     "@tanstack/react-virtual": "^3.14.13",
     "dequal": "^2.0.3",
     "fflate": "^0.8.3",
     "zod": "^3.25.76",
-    "@trackunit/i18n-library-translation": "2.8.9"
+    "@trackunit/i18n-library-translation": "2.8.10"
   },
   "peerDependencies": {
     "react": "^19.0.0",

package/src/components/AssetIdentity/IdentityCard.variants.d.ts

@@ -1,3 +1,9 @@
+export declare const cvaCardRoot: import("cva").CVAComponent<Omit<{
+    base: string[];
+}, "defaultVariants"> & {
+    variants: unknown;
+    defaultVariants: Omit<{}, never>;
+}, unknown>;
 export declare const cvaCardContentRow: import("cva").CVAComponent<Omit<{
     base: string[];
 }, "defaultVariants"> & {