@trackunit/react-components 1.10.96 → 1.10.99

package/index.cjs.js

@@ -1209,75 +1209,62 @@ const cvaCard = cssClassVarianceUtilities.cvaMerge([
         fullHeight: false,
     },
 });
-const cvaCardFooterDensityContainer = cssClassVarianceUtilities.cvaMerge(["flex", "border-t", "border-neutral-200", "justify-end", "flex-row"], {
+const cvaCardFooterContainerRoot = cssClassVarianceUtilities.cvaMerge(["flex", "border-t", "border-neutral-200", "justify-end", "flex-row"], {
     variants: {
         border: {
             default: "",
             borderless: "border-t-0",
         },
-        density: {
-            none: "",
-            dense: "gap-1 p-2",
-            compact: "gap-3 p-3",
-            comfortable: "gap-4 p-4",
-            kpi: "gap-3 px-3 pb-2 pt-3",
-            spacious: "gap-4 p-6",
-            auto: "component-card-spacing @sm:component-card-spacing-sm @md:component-card-spacing-md",
+        padding: {
+            none: "p-0",
+            default: "p-4",
         },
     },
     defaultVariants: {
         border: "default",
-        density: "auto",
+        padding: "default",
     },
 });
+const cvaCardFooterContainer = cssClassVarianceUtilities.cvaMerge(["justify-self-end", "grid", "auto-cols-max", "grid-flow-col", "gap-2"]);
 const cvaCardHeader = cssClassVarianceUtilities.cvaMerge(["flex", "justify-between", "flex-1"]);
 const cvaCardHeaderHeadingContainer = cssClassVarianceUtilities.cvaMerge(["flex", "gap-4", "items-center"]);
-const cvaCardHeaderDensityContainer = cssClassVarianceUtilities.cvaMerge(["flex", "border-b", "border-neutral-200"], {
+const cvaCardHeaderContainer = cssClassVarianceUtilities.cvaMerge(["flex", "border-b", "border-neutral-200"], {
     variants: {
         border: {
             default: "",
             borderless: "border-b-0",
         },
-        density: {
-            none: "",
-            dense: "gap-1 p-2",
-            compact: "gap-3 p-3",
-            comfortable: "gap-4 p-4",
-            kpi: "gap-3 px-3 pb-2 pt-3",
-            spacious: "gap-4 p-6",
-            auto: "component-card-spacing @sm:component-card-spacing-sm @md:component-card-spacing-md",
+        padding: {
+            none: "p-0",
+            default: "p-4",
         },
     },
     defaultVariants: {
         border: "default",
-        density: "auto",
+        padding: "default",
     },
 });
-const cvaCardBodyDensityContainer$1 = cssClassVarianceUtilities.cvaMerge(["flex", "flex-grow", "overflow-auto"], {
+const cvaCardBodyContainer$1 = cssClassVarianceUtilities.cvaMerge(["flex", "flex-grow", "overflow-auto"], {
     variants: {
-        disableGap: {
-            true: "gap-0",
-            false: "",
-        },
         direction: {
             row: "flex-row",
             "row-reverse": "flex-row-reverse",
             column: "flex-col",
             "column-reverse": "flex-col-reverse",
         },
-        density: {
-            none: "",
-            dense: "gap-1 p-2",
-            compact: "gap-3 p-3",
-            comfortable: "gap-4 p-4",
-            spacious: "gap-4 p-6",
-            auto: "component-card-spacing @sm:component-card-spacing-sm @md:component-card-spacing-md",
+        padding: {
+            none: "p-0",
+            default: "p-4",
+        },
+        gap: {
+            none: "gap-0",
+            default: "gap-4",
         },
     },
     defaultVariants: {
-        disableGap: false,
         direction: "column",
-        density: "auto",
+        padding: "default",
+        gap: "default",
     },
 });
 
@@ -1290,7 +1277,7 @@ const ROLE_CARD = "region";
  * @returns {ReactElement} Card component
  */
 const Card = react.forwardRef(function Card({ children, onClick, fullHeight = false, onMouseEnter, onMouseLeave, className, "data-testid": dataTestId, ...rest }, ref) {
-    return (jsxRuntime.jsx("div", { className: cvaCard({ fullHeight, clickable: Boolean(onClick), className }), "data-testid": dataTestId, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, ref: ref, role: ROLE_CARD, ...rest, children: children }));
+    return (jsxRuntime.jsx("div", { className: cvaCard({ fullHeight, clickable: Boolean(onClick), className }), "data-card": true, "data-testid": dataTestId, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, ref: ref, role: ROLE_CARD, ...rest, children: children }));
 });
 
 /**
@@ -1301,8 +1288,13 @@ const Card = react.forwardRef(function Card({ children, onClick, fullHeight = fa
  * @param {CardBodyProps} props - The props for the CardBody component
  * @returns {ReactElement} CardBody component
  */
-const CardBody = ({ density = "auto", children, "data-testid": dataTestId, className, direction = "column", disableGap = false, id, }) => {
-    return (jsxRuntime.jsx("div", { className: cvaCardBodyDensityContainer$1({ density, disableGap, className, direction }), "data-testid": dataTestId, id: id, children: children }));
+const CardBody = ({ children, "data-testid": dataTestId, className, direction = "column", gap = "default", padding = "default", id, }) => {
+    return (jsxRuntime.jsx("div", { className: cvaCardBodyContainer$1({
+            gap,
+            padding,
+            className,
+            direction,
+        }), "data-card-body": true, "data-testid": dataTestId, id: id, children: children }));
 };
 
 /**
@@ -1313,12 +1305,12 @@ const CardBody = ({ density = "auto", children, "data-testid": dataTestId, class
  * @param {CardFooterProps} props - The props for the CardFooter component
  * @returns {ReactElement} CardFooter component
  */
-const CardFooter = ({ "data-testid": dataTestId, className, children, density = "auto", hideSeparator = false, }) => {
-    return (jsxRuntime.jsx("div", { className: cvaCardFooterDensityContainer({
-            density,
+const CardFooter = ({ "data-testid": dataTestId, className, children, padding = "default", hideSeparator = false, }) => {
+    return (jsxRuntime.jsx("div", { className: cvaCardFooterContainerRoot({
             border: hideSeparator ? "borderless" : "default",
+            padding,
             className,
-        }), "data-testid": dataTestId, children: children }));
+        }), "data-card-footer": true, "data-testid": dataTestId, children: jsxRuntime.jsx("div", { className: cvaCardFooterContainer(), children: children }) }));
 };
 
 const cvaHeading = cssClassVarianceUtilities.cvaMerge(["m-0", "leading-normal", "text-black"], {
@@ -1378,12 +1370,12 @@ const Heading = ({ variant = "primary", inverted = false, subtle = false, classN
  * @param {CardHeaderProps} props - The props for the CardHeader component
  * @returns {ReactElement} CardHeader component
  */
-const CardHeader = ({ heading, headingVariant = "secondary", subHeading, onClose, "data-testid": dataTestId, className, children, accessories, actions, density = "auto", hideSeparator = false, }) => {
-    return (jsxRuntime.jsx("div", { className: cvaCardHeaderDensityContainer({
-            density,
+const CardHeader = ({ heading, headingVariant = "secondary", subHeading, onClose, "data-testid": dataTestId, className, children, accessories, actions, padding = "default", hideSeparator = false, }) => {
+    return (jsxRuntime.jsx("div", { className: cvaCardHeaderContainer({
             border: hideSeparator ? "borderless" : "default",
+            padding,
             className,
-        }), "data-testid": dataTestId, children: jsxRuntime.jsxs("div", { className: cvaCardHeader(), children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs("div", { className: cvaCardHeaderHeadingContainer(), children: [jsxRuntime.jsx(Heading, { className: "self-center", variant: headingVariant, children: heading }), accessories] }), subHeading !== null && subHeading !== undefined ? (jsxRuntime.jsx(Heading, { subtle: true, variant: "subtitle", children: subHeading })) : null, children] }), jsxRuntime.jsxs("div", { className: "flex place-items-center gap-x-2 gap-y-1", children: [actions, onClose ? (jsxRuntime.jsx(IconButton, { className: "!h-min", "data-testid": "card-header-close-button", icon: jsxRuntime.jsx(Icon, { name: "XMark", size: "small" }), onClick: onClose, variant: "ghost-neutral" })) : null] })] }) }));
+        }), "data-card-header": true, "data-testid": dataTestId, children: jsxRuntime.jsxs("div", { className: cvaCardHeader(), children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs("div", { className: cvaCardHeaderHeadingContainer(), children: [jsxRuntime.jsx(Heading, { className: "self-center", variant: headingVariant, children: heading }), accessories] }), subHeading !== null && subHeading !== undefined ? (jsxRuntime.jsx(Heading, { subtle: true, variant: "subtitle", children: subHeading })) : null, children] }), jsxRuntime.jsxs("div", { className: "flex place-items-center gap-x-2 gap-y-1", children: [actions, onClose ? (jsxRuntime.jsx(IconButton, { className: "!h-min", "data-testid": "card-header-close-button", icon: jsxRuntime.jsx(Icon, { name: "XMark", size: "small" }), onClick: onClose, variant: "ghost-neutral" })) : null] })] }) }));
 };
 
 const cvaClickable = cssClassVarianceUtilities.cvaMerge([
@@ -1779,12 +1771,8 @@ const CopyableText = ({ text, alternativeText, "data-testid": dataTestId, classN
     return (jsxRuntime.jsx("span", { className: cvaCopyableText({ animating, className }), "data-testid": dataTestId, onAnimationEnd: () => setAnimating(false), onClick: handleOnClick, title: value, children: text }));
 };
 
-const cvaDetailsList = cssClassVarianceUtilities.cvaMerge(["flex", "w-full", "min-w-0", "items-center", "truncate", "text-xs", "text-neutral-600", "font-medium"], {
+const cvaDetailsList = cssClassVarianceUtilities.cvaMerge(["flex", "w-full", "min-w-0", "items-center", "truncate", "text-xs", "text-neutral-600", "font-medium", "pt-0"], {
     variants: {
-        density: {
-            default: "pt-0",
-            compact: "pt-1",
-        },
         hasLink: {
             true: "pl-1",
         },
@@ -1801,12 +1789,11 @@ const cvaDetailsListItem = cssClassVarianceUtilities.cvaMerge(["last:truncate"])
  * @param {object} props - Component props.
  * @param {string[]} props.details - Values to render.
  * @param {string} [props.className] - Optional CSS class for customization.
- * @param {"compact" | "default"} [props.density="default"] - Visual density of the list.
  * @param {boolean} [props.hasLink=false] - Whether the parent component contains a link.
  * @returns {ReactElement} The details list element.
  */
-const DetailsList = ({ details, className, density = "default", hasLink = false, }) => {
-    return (jsxRuntime.jsx("div", { className: cvaDetailsList({ className, density, hasLink }), children: details.map((value, index, array) => (jsxRuntime.jsxs(react.Fragment, { children: [jsxRuntime.jsx("span", { className: cvaDetailsListItem({ className }), children: value }), index < array.length - 1 && (jsxRuntime.jsx("div", { className: "mx-0.5 flex items-center", children: jsxRuntime.jsx(Icon, { className: "w-4 text-neutral-300", color: "neutral", name: "Slash", size: "small" }) }))] }, index))) }));
+const DetailsList = ({ details, className, hasLink = false }) => {
+    return (jsxRuntime.jsx("div", { className: cvaDetailsList({ className, hasLink }), children: details.map((value, index, array) => (jsxRuntime.jsxs(react.Fragment, { children: [jsxRuntime.jsx("span", { className: cvaDetailsListItem({ className }), children: value }), index < array.length - 1 && (jsxRuntime.jsx("div", { className: "mx-0.5 flex items-center", children: jsxRuntime.jsx(Icon, { className: "w-4 text-neutral-300", color: "neutral", name: "Slash", size: "small" }) }))] }, index))) }));
 };
 
 /**
@@ -3227,7 +3214,7 @@ const cvaKPIIconContainer = cssClassVarianceUtilities.cvaMerge(["flex", "items-c
         },
     },
 });
-const cvaCardBodyDensityContainer = cssClassVarianceUtilities.cvaMerge(["grid", "grid-cols-[1fr_auto]", "px-3", "pb-2", "pt-3"], {
+const cvaCardBodyContainer = cssClassVarianceUtilities.cvaMerge(["grid", "grid-cols-[1fr_auto]", "px-3", "pb-2", "pt-3"], {
     variants: {
         iconName: {
             true: "gap-2",
@@ -3248,7 +3235,7 @@ const KPICard = ({ isActive = false, onClick, className, "data-testid": dataTest
             isClickable,
             isActive,
             className,
-        }), "data-testid": dataTestId ? dataTestId : undefined, onClick: onClick, children: jsxRuntime.jsxs(CardBody, { className: cvaCardBodyDensityContainer({ iconName: Boolean(iconName) }), density: "none", children: [jsxRuntime.jsx(KPI, { ...rest, className: "p-0", "data-testid": dataTestId ? `${dataTestId}-kpi` : undefined, loading: loading }), iconName ? (jsxRuntime.jsx("div", { className: cvaKPIIconContainer({ iconColor }), children: jsxRuntime.jsx(Icon, { name: iconName, size: "small", type: "solid" }) })) : null, children] }) }));
+        }), "data-testid": dataTestId ? dataTestId : undefined, onClick: onClick, children: jsxRuntime.jsxs(CardBody, { className: cvaCardBodyContainer({ iconName: Boolean(iconName) }), gap: "none", padding: "none", children: [jsxRuntime.jsx(KPI, { ...rest, className: "p-0", "data-testid": dataTestId ? `${dataTestId}-kpi` : undefined, loading: loading }), iconName ? (jsxRuntime.jsx("div", { className: cvaKPIIconContainer({ iconColor }), children: jsxRuntime.jsx(Icon, { name: iconName, size: "small", type: "solid" }) })) : null, children] }) }));
 };
 
 const cvaListContainer = cssClassVarianceUtilities.cvaMerge(["overflow-y-auto", "overflow-x-hidden", "h-full"], {

package/index.esm.js

@@ -1207,75 +1207,62 @@ const cvaCard = cvaMerge([
         fullHeight: false,
     },
 });
-const cvaCardFooterDensityContainer = cvaMerge(["flex", "border-t", "border-neutral-200", "justify-end", "flex-row"], {
+const cvaCardFooterContainerRoot = cvaMerge(["flex", "border-t", "border-neutral-200", "justify-end", "flex-row"], {
     variants: {
         border: {
             default: "",
             borderless: "border-t-0",
         },
-        density: {
-            none: "",
-            dense: "gap-1 p-2",
-            compact: "gap-3 p-3",
-            comfortable: "gap-4 p-4",
-            kpi: "gap-3 px-3 pb-2 pt-3",
-            spacious: "gap-4 p-6",
-            auto: "component-card-spacing @sm:component-card-spacing-sm @md:component-card-spacing-md",
+        padding: {
+            none: "p-0",
+            default: "p-4",
         },
     },
     defaultVariants: {
         border: "default",
-        density: "auto",
+        padding: "default",
     },
 });
+const cvaCardFooterContainer = cvaMerge(["justify-self-end", "grid", "auto-cols-max", "grid-flow-col", "gap-2"]);
 const cvaCardHeader = cvaMerge(["flex", "justify-between", "flex-1"]);
 const cvaCardHeaderHeadingContainer = cvaMerge(["flex", "gap-4", "items-center"]);
-const cvaCardHeaderDensityContainer = cvaMerge(["flex", "border-b", "border-neutral-200"], {
+const cvaCardHeaderContainer = cvaMerge(["flex", "border-b", "border-neutral-200"], {
     variants: {
         border: {
             default: "",
             borderless: "border-b-0",
         },
-        density: {
-            none: "",
-            dense: "gap-1 p-2",
-            compact: "gap-3 p-3",
-            comfortable: "gap-4 p-4",
-            kpi: "gap-3 px-3 pb-2 pt-3",
-            spacious: "gap-4 p-6",
-            auto: "component-card-spacing @sm:component-card-spacing-sm @md:component-card-spacing-md",
+        padding: {
+            none: "p-0",
+            default: "p-4",
         },
     },
     defaultVariants: {
         border: "default",
-        density: "auto",
+        padding: "default",
     },
 });
-const cvaCardBodyDensityContainer$1 = cvaMerge(["flex", "flex-grow", "overflow-auto"], {
+const cvaCardBodyContainer$1 = cvaMerge(["flex", "flex-grow", "overflow-auto"], {
     variants: {
-        disableGap: {
-            true: "gap-0",
-            false: "",
-        },
         direction: {
             row: "flex-row",
             "row-reverse": "flex-row-reverse",
             column: "flex-col",
             "column-reverse": "flex-col-reverse",
         },
-        density: {
-            none: "",
-            dense: "gap-1 p-2",
-            compact: "gap-3 p-3",
-            comfortable: "gap-4 p-4",
-            spacious: "gap-4 p-6",
-            auto: "component-card-spacing @sm:component-card-spacing-sm @md:component-card-spacing-md",
+        padding: {
+            none: "p-0",
+            default: "p-4",
+        },
+        gap: {
+            none: "gap-0",
+            default: "gap-4",
         },
     },
     defaultVariants: {
-        disableGap: false,
         direction: "column",
-        density: "auto",
+        padding: "default",
+        gap: "default",
     },
 });
 
@@ -1288,7 +1275,7 @@ const ROLE_CARD = "region";
  * @returns {ReactElement} Card component
  */
 const Card = forwardRef(function Card({ children, onClick, fullHeight = false, onMouseEnter, onMouseLeave, className, "data-testid": dataTestId, ...rest }, ref) {
-    return (jsx("div", { className: cvaCard({ fullHeight, clickable: Boolean(onClick), className }), "data-testid": dataTestId, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, ref: ref, role: ROLE_CARD, ...rest, children: children }));
+    return (jsx("div", { className: cvaCard({ fullHeight, clickable: Boolean(onClick), className }), "data-card": true, "data-testid": dataTestId, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, ref: ref, role: ROLE_CARD, ...rest, children: children }));
 });
 
 /**
@@ -1299,8 +1286,13 @@ const Card = forwardRef(function Card({ children, onClick, fullHeight = false, o
  * @param {CardBodyProps} props - The props for the CardBody component
  * @returns {ReactElement} CardBody component
  */
-const CardBody = ({ density = "auto", children, "data-testid": dataTestId, className, direction = "column", disableGap = false, id, }) => {
-    return (jsx("div", { className: cvaCardBodyDensityContainer$1({ density, disableGap, className, direction }), "data-testid": dataTestId, id: id, children: children }));
+const CardBody = ({ children, "data-testid": dataTestId, className, direction = "column", gap = "default", padding = "default", id, }) => {
+    return (jsx("div", { className: cvaCardBodyContainer$1({
+            gap,
+            padding,
+            className,
+            direction,
+        }), "data-card-body": true, "data-testid": dataTestId, id: id, children: children }));
 };
 
 /**
@@ -1311,12 +1303,12 @@ const CardBody = ({ density = "auto", children, "data-testid": dataTestId, class
  * @param {CardFooterProps} props - The props for the CardFooter component
  * @returns {ReactElement} CardFooter component
  */
-const CardFooter = ({ "data-testid": dataTestId, className, children, density = "auto", hideSeparator = false, }) => {
-    return (jsx("div", { className: cvaCardFooterDensityContainer({
-            density,
+const CardFooter = ({ "data-testid": dataTestId, className, children, padding = "default", hideSeparator = false, }) => {
+    return (jsx("div", { className: cvaCardFooterContainerRoot({
             border: hideSeparator ? "borderless" : "default",
+            padding,
             className,
-        }), "data-testid": dataTestId, children: children }));
+        }), "data-card-footer": true, "data-testid": dataTestId, children: jsx("div", { className: cvaCardFooterContainer(), children: children }) }));
 };
 
 const cvaHeading = cvaMerge(["m-0", "leading-normal", "text-black"], {
@@ -1376,12 +1368,12 @@ const Heading = ({ variant = "primary", inverted = false, subtle = false, classN
  * @param {CardHeaderProps} props - The props for the CardHeader component
  * @returns {ReactElement} CardHeader component
  */
-const CardHeader = ({ heading, headingVariant = "secondary", subHeading, onClose, "data-testid": dataTestId, className, children, accessories, actions, density = "auto", hideSeparator = false, }) => {
-    return (jsx("div", { className: cvaCardHeaderDensityContainer({
-            density,
+const CardHeader = ({ heading, headingVariant = "secondary", subHeading, onClose, "data-testid": dataTestId, className, children, accessories, actions, padding = "default", hideSeparator = false, }) => {
+    return (jsx("div", { className: cvaCardHeaderContainer({
             border: hideSeparator ? "borderless" : "default",
+            padding,
             className,
-        }), "data-testid": dataTestId, children: jsxs("div", { className: cvaCardHeader(), children: [jsxs("div", { children: [jsxs("div", { className: cvaCardHeaderHeadingContainer(), children: [jsx(Heading, { className: "self-center", variant: headingVariant, children: heading }), accessories] }), subHeading !== null && subHeading !== undefined ? (jsx(Heading, { subtle: true, variant: "subtitle", children: subHeading })) : null, children] }), jsxs("div", { className: "flex place-items-center gap-x-2 gap-y-1", children: [actions, onClose ? (jsx(IconButton, { className: "!h-min", "data-testid": "card-header-close-button", icon: jsx(Icon, { name: "XMark", size: "small" }), onClick: onClose, variant: "ghost-neutral" })) : null] })] }) }));
+        }), "data-card-header": true, "data-testid": dataTestId, children: jsxs("div", { className: cvaCardHeader(), children: [jsxs("div", { children: [jsxs("div", { className: cvaCardHeaderHeadingContainer(), children: [jsx(Heading, { className: "self-center", variant: headingVariant, children: heading }), accessories] }), subHeading !== null && subHeading !== undefined ? (jsx(Heading, { subtle: true, variant: "subtitle", children: subHeading })) : null, children] }), jsxs("div", { className: "flex place-items-center gap-x-2 gap-y-1", children: [actions, onClose ? (jsx(IconButton, { className: "!h-min", "data-testid": "card-header-close-button", icon: jsx(Icon, { name: "XMark", size: "small" }), onClick: onClose, variant: "ghost-neutral" })) : null] })] }) }));
 };
 
 const cvaClickable = cvaMerge([
@@ -1777,12 +1769,8 @@ const CopyableText = ({ text, alternativeText, "data-testid": dataTestId, classN
     return (jsx("span", { className: cvaCopyableText({ animating, className }), "data-testid": dataTestId, onAnimationEnd: () => setAnimating(false), onClick: handleOnClick, title: value, children: text }));
 };
 
-const cvaDetailsList = cvaMerge(["flex", "w-full", "min-w-0", "items-center", "truncate", "text-xs", "text-neutral-600", "font-medium"], {
+const cvaDetailsList = cvaMerge(["flex", "w-full", "min-w-0", "items-center", "truncate", "text-xs", "text-neutral-600", "font-medium", "pt-0"], {
     variants: {
-        density: {
-            default: "pt-0",
-            compact: "pt-1",
-        },
         hasLink: {
             true: "pl-1",
         },
@@ -1799,12 +1787,11 @@ const cvaDetailsListItem = cvaMerge(["last:truncate"]);
  * @param {object} props - Component props.
  * @param {string[]} props.details - Values to render.
  * @param {string} [props.className] - Optional CSS class for customization.
- * @param {"compact" | "default"} [props.density="default"] - Visual density of the list.
  * @param {boolean} [props.hasLink=false] - Whether the parent component contains a link.
  * @returns {ReactElement} The details list element.
  */
-const DetailsList = ({ details, className, density = "default", hasLink = false, }) => {
-    return (jsx("div", { className: cvaDetailsList({ className, density, hasLink }), children: details.map((value, index, array) => (jsxs(Fragment, { children: [jsx("span", { className: cvaDetailsListItem({ className }), children: value }), index < array.length - 1 && (jsx("div", { className: "mx-0.5 flex items-center", children: jsx(Icon, { className: "w-4 text-neutral-300", color: "neutral", name: "Slash", size: "small" }) }))] }, index))) }));
+const DetailsList = ({ details, className, hasLink = false }) => {
+    return (jsx("div", { className: cvaDetailsList({ className, hasLink }), children: details.map((value, index, array) => (jsxs(Fragment, { children: [jsx("span", { className: cvaDetailsListItem({ className }), children: value }), index < array.length - 1 && (jsx("div", { className: "mx-0.5 flex items-center", children: jsx(Icon, { className: "w-4 text-neutral-300", color: "neutral", name: "Slash", size: "small" }) }))] }, index))) }));
 };
 
 /**
@@ -3225,7 +3212,7 @@ const cvaKPIIconContainer = cvaMerge(["flex", "items-center", "justify-center",
         },
     },
 });
-const cvaCardBodyDensityContainer = cvaMerge(["grid", "grid-cols-[1fr_auto]", "px-3", "pb-2", "pt-3"], {
+const cvaCardBodyContainer = cvaMerge(["grid", "grid-cols-[1fr_auto]", "px-3", "pb-2", "pt-3"], {
     variants: {
         iconName: {
             true: "gap-2",
@@ -3246,7 +3233,7 @@ const KPICard = ({ isActive = false, onClick, className, "data-testid": dataTest
             isClickable,
             isActive,
             className,
-        }), "data-testid": dataTestId ? dataTestId : undefined, onClick: onClick, children: jsxs(CardBody, { className: cvaCardBodyDensityContainer({ iconName: Boolean(iconName) }), density: "none", children: [jsx(KPI, { ...rest, className: "p-0", "data-testid": dataTestId ? `${dataTestId}-kpi` : undefined, loading: loading }), iconName ? (jsx("div", { className: cvaKPIIconContainer({ iconColor }), children: jsx(Icon, { name: iconName, size: "small", type: "solid" }) })) : null, children] }) }));
+        }), "data-testid": dataTestId ? dataTestId : undefined, onClick: onClick, children: jsxs(CardBody, { className: cvaCardBodyContainer({ iconName: Boolean(iconName) }), gap: "none", padding: "none", children: [jsx(KPI, { ...rest, className: "p-0", "data-testid": dataTestId ? `${dataTestId}-kpi` : undefined, loading: loading }), iconName ? (jsx("div", { className: cvaKPIIconContainer({ iconColor }), children: jsx(Icon, { name: iconName, size: "small", type: "solid" }) })) : null, children] }) }));
 };
 
 const cvaListContainer = cvaMerge(["overflow-y-auto", "overflow-x-hidden", "h-full"], {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "1.10.96",
+  "version": "1.10.99",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -14,10 +14,10 @@
     "@floating-ui/react": "^0.26.25",
     "string-ts": "^2.0.0",
     "tailwind-merge": "^2.0.0",
-    "@trackunit/ui-design-tokens": "1.7.119",
-    "@trackunit/css-class-variance-utilities": "1.7.119",
-    "@trackunit/shared-utils": "1.9.119",
-    "@trackunit/ui-icons": "1.7.120",
+    "@trackunit/ui-design-tokens": "1.7.121",
+    "@trackunit/css-class-variance-utilities": "1.7.121",
+    "@trackunit/shared-utils": "1.9.121",
+    "@trackunit/ui-icons": "1.7.122",
     "@tanstack/react-router": "1.114.29",
     "es-toolkit": "^1.39.10",
     "@tanstack/react-virtual": "3.13.12",

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

@@ -2,18 +2,19 @@ export declare const cvaCard: (props?: ({
     clickable?: boolean | null | undefined;
     fullHeight?: boolean | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-export declare const cvaCardFooterDensityContainer: (props?: ({
+export declare const cvaCardFooterContainerRoot: (props?: ({
     border?: "default" | "borderless" | null | undefined;
-    density?: "none" | "dense" | "compact" | "comfortable" | "kpi" | "spacious" | "auto" | null | undefined;
+    padding?: "default" | "none" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const cvaCardFooterContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
 export declare const cvaCardHeader: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
 export declare const cvaCardHeaderHeadingContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
-export declare const cvaCardHeaderDensityContainer: (props?: ({
+export declare const cvaCardHeaderContainer: (props?: ({
     border?: "default" | "borderless" | null | undefined;
-    density?: "none" | "dense" | "compact" | "comfortable" | "kpi" | "spacious" | "auto" | null | undefined;
+    padding?: "default" | "none" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-export declare const cvaCardBodyDensityContainer: (props?: ({
-    disableGap?: boolean | null | undefined;
+export declare const cvaCardBodyContainer: (props?: ({
     direction?: "row" | "row-reverse" | "column" | "column-reverse" | null | undefined;
-    density?: "none" | "dense" | "compact" | "comfortable" | "spacious" | "auto" | null | undefined;
+    padding?: "default" | "none" | null | undefined;
+    gap?: "default" | "none" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

package/src/components/Card/CardBody.d.ts

@@ -1,19 +1,18 @@
 import { ReactElement, ReactNode } from "react";
 import { CommonProps } from "../../common/CommonProps";
-import { Density } from "../../common/Density";
 export interface CardBodyProps extends CommonProps {
-    /**
-     * Sets gap, padding and margin.
-     */
-    density?: Density;
     /**
      * Sets flex direction
      */
     direction?: "row" | "row-reverse" | "column" | "column-reverse";
     /**
-     * Set gap to be 0px (not preferable)
+     * Controls inner padding of the body. Uses design tokens.
+     */
+    padding?: "none" | "default";
+    /**
+     * Set gap size between child elements
      */
-    disableGap?: boolean;
+    gap?: "none" | "default";
     /**
      * Child elements to render in the body
      */
@@ -31,4 +30,4 @@ export interface CardBodyProps extends CommonProps {
  * @param {CardBodyProps} props - The props for the CardBody component
  * @returns {ReactElement} CardBody component
  */
-export declare const CardBody: ({ density, children, "data-testid": dataTestId, className, direction, disableGap, id, }: CardBodyProps) => ReactElement;
+export declare const CardBody: ({ children, "data-testid": dataTestId, className, direction, gap, padding, id, }: CardBodyProps) => ReactElement;

package/src/components/Card/CardFooter.d.ts

@@ -1,19 +1,18 @@
 import { ReactElement, ReactNode } from "react";
 import { CommonProps } from "../../common/CommonProps";
-import { Density } from "../../common/Density";
 export interface CardFooterProps extends CommonProps {
-    /**
-     * Sets gap, padding and margin.
-     */
-    density?: Density;
     /**
      * Element to render in the footer
      */
     children?: ReactNode | null;
     /**
-     * Wether or not a seperator line should be rendered
+     * Whether a separator line should be rendered
      */
     hideSeparator?: boolean;
+    /**
+     * Controls inner padding
+     */
+    padding?: "none" | "default";
 }
 /**
  * A simple footer intended to use with Cards and Modals.
@@ -23,4 +22,4 @@ export interface CardFooterProps extends CommonProps {
  * @param {CardFooterProps} props - The props for the CardFooter component
  * @returns {ReactElement} CardFooter component
  */
-export declare const CardFooter: ({ "data-testid": dataTestId, className, children, density, hideSeparator, }: CardFooterProps) => ReactElement;
+export declare const CardFooter: ({ "data-testid": dataTestId, className, children, padding, hideSeparator, }: CardFooterProps) => ReactElement;

package/src/components/Card/CardHeader.d.ts

@@ -1,6 +1,5 @@
 import { MouseEventHandler, ReactElement, ReactNode } from "react";
 import { CommonProps } from "../../common/CommonProps";
-import { Density } from "../../common/Density";
 import { HeadingVariant } from "../Heading/Heading";
 export interface CardHeaderProps extends CommonProps {
     /**
@@ -21,23 +20,26 @@ export interface CardHeaderProps extends CommonProps {
      */
     accessories?: ReactNode;
     /**
-     * Sets gap, padding and margin.
+     * Whether a separator line should be rendered
      */
-    density?: Density;
+    hideSeparator?: boolean;
     /**
-     * Whether or not a separator line should be rendered
+     * @deprecated Use `actions` to render a custom close button and handle its `onClick` instead.
+     * Function to call when the close button is clicked.
      */
-    hideSeparator?: boolean;
-    /** Function to call when the close button is clicked */
     onClose?: MouseEventHandler<HTMLButtonElement>;
     /**
-     * Children to render in the header
+     * Children to render in the header.
      */
     children?: ReactNode | null;
     /**
      * For buttons or other actions to render in the header
      */
     actions?: ReactNode | null;
+    /**
+     * Controls inner padding
+     */
+    padding?: "none" | "default";
 }
 /**
  * Header for Cards.
@@ -45,4 +47,4 @@ export interface CardHeaderProps extends CommonProps {
  * @param {CardHeaderProps} props - The props for the CardHeader component
  * @returns {ReactElement} CardHeader component
  */
-export declare const CardHeader: ({ heading, headingVariant, subHeading, onClose, "data-testid": dataTestId, className, children, accessories, actions, density, hideSeparator, }: CardHeaderProps) => ReactElement;
+export declare const CardHeader: ({ heading, headingVariant, subHeading, onClose, "data-testid": dataTestId, className, children, accessories, actions, padding, hideSeparator, }: CardHeaderProps) => ReactElement;

package/src/components/DetailsList/DetailsList.d.ts

@@ -2,7 +2,6 @@ import { ReactElement } from "react";
 interface DetailsListProps {
     details: Array<string>;
     className?: string;
-    density?: "compact" | "default";
     hasLink?: boolean;
 }
 /**
@@ -11,9 +10,8 @@ interface DetailsListProps {
  * @param {object} props - Component props.
  * @param {string[]} props.details - Values to render.
  * @param {string} [props.className] - Optional CSS class for customization.
- * @param {"compact" | "default"} [props.density="default"] - Visual density of the list.
  * @param {boolean} [props.hasLink=false] - Whether the parent component contains a link.
  * @returns {ReactElement} The details list element.
  */
-export declare const DetailsList: ({ details, className, density, hasLink, }: DetailsListProps) => ReactElement;
+export declare const DetailsList: ({ details, className, hasLink }: DetailsListProps) => ReactElement;
 export {};

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

@@ -1,5 +1,4 @@
 export declare const cvaDetailsList: (props?: ({
-    density?: "default" | "compact" | null | undefined;
     hasLink?: boolean | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export declare const cvaDetailsListItem: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;

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

@@ -5,6 +5,6 @@ export declare const cvaKPICard: (props?: ({
 export declare const cvaKPIIconContainer: (props?: ({
     iconColor?: "success" | "warning" | "danger" | "info" | "neutral" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-export declare const cvaCardBodyDensityContainer: (props?: ({
+export declare const cvaCardBodyContainer: (props?: ({
     iconName?: boolean | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

package/src/index.d.ts

@@ -1,7 +1,6 @@
 export * from "./common/AllOrNone";
 export * from "./common/AriaProps";
 export * from "./common/CommonProps";
-export * from "./common/Density";
 export * from "./common/PackageNameStoryComponent";
 export * from "./common/Size";
 export * from "./common/StorybookProps";

package/src/common/Density.d.ts

@@ -1 +0,0 @@
-export type Density = "none" | "dense" | "compact" | "comfortable" | "spacious" | "auto";