@trackunit/react-components 1.16.13 → 1.17.0

package/index.cjs.js

@@ -2147,25 +2147,6 @@ const getHeightValue = (height, variant) => {
     }
     return height;
 };
-/**
- * Calculate the vertical margin value for text variant to align with text baseline.
- * Formula: (line-height - cap-height) / 2, where cap-height = font-size × 0.7
- *
- * @param height - The height value (number, CSS length, or text size key)
- * @returns {string} The calculated CSS margin value
- */
-const getMarginValue = (height) => {
-    if (typeof height === "string") {
-        const sizeKey = extractSizeKey(height);
-        if (sizeKey) {
-            // margin = (line-height - cap-height) / 2
-            // cap-height = font-size × 0.7
-            // For large text sizes, this may be negative, which matches how actual text extends beyond its line-height box
-            return `calc((var(--line-height-${sizeKey}) - var(--font-size-${sizeKey}) * 0.7) / 2)`;
-        }
-    }
-    return "0";
-};
 /**
  * Type-safe helper to construct a CSSLength from a number and unit.
  * Uses a generic to preserve the specific unit type in the return type.
@@ -2209,7 +2190,7 @@ const cvaSkeleton = cssClassVarianceUtilities.cvaMerge([
     "overflow-hidden",
     "rounded-lg",
     // Gradient background
-    "bg-gradient-to-r",
+    "bg-linear-to-r",
     "from-neutral-200/80",
     "via-neutral-300/60",
     "to-neutral-200/80",
@@ -2218,7 +2199,7 @@ const cvaSkeleton = cssClassVarianceUtilities.cvaMerge([
     // Shimmer overlay
     "before:absolute",
     "before:inset-0",
-    "before:bg-gradient-to-r",
+    "before:bg-linear-to-r",
     "before:from-transparent",
     "before:via-white/50",
     "before:to-transparent",
@@ -2228,7 +2209,25 @@ const cvaSkeleton = cssClassVarianceUtilities.cvaMerge([
     "transition-all",
     "duration-300",
     "ease-in-out",
-]);
+], {
+    variants: {
+        textSize: {
+            "text-xs": ["my-[calc((var(--line-height-xs)-var(--font-size-xs)*0.7)/2)]"],
+            "text-sm": ["my-[calc((var(--line-height-sm)-var(--font-size-sm)*0.7)/2)]"],
+            "text-base": ["my-[calc((var(--line-height-base)-var(--font-size-base)*0.7)/2)]"],
+            "text-lg": ["my-[calc((var(--line-height-lg)-var(--font-size-lg)*0.7)/2)]"],
+            "text-xl": ["my-[calc((var(--line-height-xl)-var(--font-size-xl)*0.7)/2)]"],
+            "text-2xl": ["my-[calc((var(--line-height-2xl)-var(--font-size-2xl)*0.7)/2)]"],
+            "text-3xl": ["my-[calc((var(--line-height-3xl)-var(--font-size-3xl)*0.7)/2)]"],
+            "text-4xl": ["my-[calc((var(--line-height-4xl)-var(--font-size-4xl)*0.7)/2)]"],
+            "text-5xl": ["my-[calc((var(--line-height-5xl)-var(--font-size-5xl)*0.7)/2)]"],
+            "text-6xl": ["my-[calc((var(--line-height-6xl)-var(--font-size-6xl)*0.7)/2)]"],
+            "text-7xl": ["my-[calc((var(--line-height-7xl)-var(--font-size-7xl)*0.7)/2)]"],
+            "text-8xl": ["my-[calc((var(--line-height-8xl)-var(--font-size-8xl)*0.7)/2)]"],
+            "text-9xl": ["my-[calc((var(--line-height-9xl)-var(--font-size-9xl)*0.7)/2)]"],
+        },
+    },
+});
 
 /**
  * Display a single placeholder line for text content before data gets loaded to reduce load-time frustration.
@@ -2243,13 +2242,10 @@ const SkeletonLabel = react.memo((props) => {
     const { width = "100%", textSize = "text-base", flexibleWidth = true, className, "data-testid": dataTestId, children, } = props;
     const widthValue = typeof width === "number" ? `${width}px` : width;
     const heightValue = getHeightValue(textSize);
-    const marginValue = getMarginValue(textSize);
-    return (jsxRuntime.jsx("div", { "aria-label": "Loading", className: cvaSkeleton({ className }), "data-testid": dataTestId, role: "status", style: {
+    return (jsxRuntime.jsx("div", { "aria-label": "Loading", className: cvaSkeleton({ textSize, className }), "data-testid": dataTestId, role: "status", style: {
             width: flexibleWidth ? "100%" : widthValue,
             maxWidth: flexibleWidth ? widthValue : undefined,
             height: heightValue,
-            marginTop: marginValue,
-            marginBottom: marginValue,
         }, children: children }));
 });
 SkeletonLabel.displayName = "SkeletonLabel";
@@ -4540,12 +4536,12 @@ const getScore = (value, min, max, zeroScoreAllowed) => {
  */
 const getDefaultFillColor = (score) => {
     if (score < 0.3) {
-        return uiDesignTokens.color("DANGER", 500, "CSS");
+        return uiDesignTokens.color("DANGER", 500, "HEX");
     }
     if (score >= 0.6) {
-        return uiDesignTokens.color("SUCCESS", 600, "CSS");
+        return uiDesignTokens.color("SUCCESS", 600, "HEX");
     }
-    return uiDesignTokens.color("WARNING", 300, "CSS");
+    return uiDesignTokens.color("WARNING", 300, "HEX");
 };
 /**
  * Helper function to get custom color used by the ValueBar
@@ -5372,7 +5368,7 @@ const cvaMenuList = cssClassVarianceUtilities.cvaMerge([
     "p-1",
     "gap-y-0.5",
     "grid",
-    "max-h-[max(40dvh,var(--spacing-64))]",
+    "max-h-[max(40dvh_var(--spacing-64))]",
     "overflow-y-auto",
 ]);
 const cvaMenuListDivider = cssClassVarianceUtilities.cvaMerge(["mx-[-4px]", "my-0.5", "min-h-px", "bg-neutral-300"]);
@@ -6833,7 +6829,7 @@ const cvaToggleGroupWithSlidingBackground = cssClassVarianceUtilities.cvaMerge([
                 "before:bottom-0.5",
                 "before:left-[var(--sliding-left)]",
                 "before:w-[var(--sliding-width)]",
-                "before:transition-[left,width]",
+                "before:transition-[left_width]",
                 "before:duration-[var(--transition-duration)]",
                 "before:ease-out",
                 "before:rounded",

package/index.esm.js

@@ -2145,25 +2145,6 @@ const getHeightValue = (height, variant) => {
     }
     return height;
 };
-/**
- * Calculate the vertical margin value for text variant to align with text baseline.
- * Formula: (line-height - cap-height) / 2, where cap-height = font-size × 0.7
- *
- * @param height - The height value (number, CSS length, or text size key)
- * @returns {string} The calculated CSS margin value
- */
-const getMarginValue = (height) => {
-    if (typeof height === "string") {
-        const sizeKey = extractSizeKey(height);
-        if (sizeKey) {
-            // margin = (line-height - cap-height) / 2
-            // cap-height = font-size × 0.7
-            // For large text sizes, this may be negative, which matches how actual text extends beyond its line-height box
-            return `calc((var(--line-height-${sizeKey}) - var(--font-size-${sizeKey}) * 0.7) / 2)`;
-        }
-    }
-    return "0";
-};
 /**
  * Type-safe helper to construct a CSSLength from a number and unit.
  * Uses a generic to preserve the specific unit type in the return type.
@@ -2207,7 +2188,7 @@ const cvaSkeleton = cvaMerge([
     "overflow-hidden",
     "rounded-lg",
     // Gradient background
-    "bg-gradient-to-r",
+    "bg-linear-to-r",
     "from-neutral-200/80",
     "via-neutral-300/60",
     "to-neutral-200/80",
@@ -2216,7 +2197,7 @@ const cvaSkeleton = cvaMerge([
     // Shimmer overlay
     "before:absolute",
     "before:inset-0",
-    "before:bg-gradient-to-r",
+    "before:bg-linear-to-r",
     "before:from-transparent",
     "before:via-white/50",
     "before:to-transparent",
@@ -2226,7 +2207,25 @@ const cvaSkeleton = cvaMerge([
     "transition-all",
     "duration-300",
     "ease-in-out",
-]);
+], {
+    variants: {
+        textSize: {
+            "text-xs": ["my-[calc((var(--line-height-xs)-var(--font-size-xs)*0.7)/2)]"],
+            "text-sm": ["my-[calc((var(--line-height-sm)-var(--font-size-sm)*0.7)/2)]"],
+            "text-base": ["my-[calc((var(--line-height-base)-var(--font-size-base)*0.7)/2)]"],
+            "text-lg": ["my-[calc((var(--line-height-lg)-var(--font-size-lg)*0.7)/2)]"],
+            "text-xl": ["my-[calc((var(--line-height-xl)-var(--font-size-xl)*0.7)/2)]"],
+            "text-2xl": ["my-[calc((var(--line-height-2xl)-var(--font-size-2xl)*0.7)/2)]"],
+            "text-3xl": ["my-[calc((var(--line-height-3xl)-var(--font-size-3xl)*0.7)/2)]"],
+            "text-4xl": ["my-[calc((var(--line-height-4xl)-var(--font-size-4xl)*0.7)/2)]"],
+            "text-5xl": ["my-[calc((var(--line-height-5xl)-var(--font-size-5xl)*0.7)/2)]"],
+            "text-6xl": ["my-[calc((var(--line-height-6xl)-var(--font-size-6xl)*0.7)/2)]"],
+            "text-7xl": ["my-[calc((var(--line-height-7xl)-var(--font-size-7xl)*0.7)/2)]"],
+            "text-8xl": ["my-[calc((var(--line-height-8xl)-var(--font-size-8xl)*0.7)/2)]"],
+            "text-9xl": ["my-[calc((var(--line-height-9xl)-var(--font-size-9xl)*0.7)/2)]"],
+        },
+    },
+});
 
 /**
  * Display a single placeholder line for text content before data gets loaded to reduce load-time frustration.
@@ -2241,13 +2240,10 @@ const SkeletonLabel = memo((props) => {
     const { width = "100%", textSize = "text-base", flexibleWidth = true, className, "data-testid": dataTestId, children, } = props;
     const widthValue = typeof width === "number" ? `${width}px` : width;
     const heightValue = getHeightValue(textSize);
-    const marginValue = getMarginValue(textSize);
-    return (jsx("div", { "aria-label": "Loading", className: cvaSkeleton({ className }), "data-testid": dataTestId, role: "status", style: {
+    return (jsx("div", { "aria-label": "Loading", className: cvaSkeleton({ textSize, className }), "data-testid": dataTestId, role: "status", style: {
             width: flexibleWidth ? "100%" : widthValue,
             maxWidth: flexibleWidth ? widthValue : undefined,
             height: heightValue,
-            marginTop: marginValue,
-            marginBottom: marginValue,
         }, children: children }));
 });
 SkeletonLabel.displayName = "SkeletonLabel";
@@ -4538,12 +4534,12 @@ const getScore = (value, min, max, zeroScoreAllowed) => {
  */
 const getDefaultFillColor = (score) => {
     if (score < 0.3) {
-        return color("DANGER", 500, "CSS");
+        return color("DANGER", 500, "HEX");
     }
     if (score >= 0.6) {
-        return color("SUCCESS", 600, "CSS");
+        return color("SUCCESS", 600, "HEX");
     }
-    return color("WARNING", 300, "CSS");
+    return color("WARNING", 300, "HEX");
 };
 /**
  * Helper function to get custom color used by the ValueBar
@@ -5370,7 +5366,7 @@ const cvaMenuList = cvaMerge([
     "p-1",
     "gap-y-0.5",
     "grid",
-    "max-h-[max(40dvh,var(--spacing-64))]",
+    "max-h-[max(40dvh_var(--spacing-64))]",
     "overflow-y-auto",
 ]);
 const cvaMenuListDivider = cvaMerge(["mx-[-4px]", "my-0.5", "min-h-px", "bg-neutral-300"]);
@@ -6831,7 +6827,7 @@ const cvaToggleGroupWithSlidingBackground = cvaMerge([], {
                 "before:bottom-0.5",
                 "before:left-[var(--sliding-left)]",
                 "before:w-[var(--sliding-width)]",
-                "before:transition-[left,width]",
+                "before:transition-[left_width]",
                 "before:duration-[var(--transition-duration)]",
                 "before:ease-out",
                 "before:rounded",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "1.16.13",
+  "version": "1.17.0",
   "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.11.30",
-    "@trackunit/css-class-variance-utilities": "1.11.30",
-    "@trackunit/shared-utils": "1.13.30",
-    "@trackunit/ui-icons": "1.11.29",
+    "@trackunit/ui-design-tokens": "1.11.31",
+    "@trackunit/css-class-variance-utilities": "1.11.31",
+    "@trackunit/shared-utils": "1.13.31",
+    "@trackunit/ui-icons": "1.11.30",
     "@tanstack/react-router": "1.114.29",
     "es-toolkit": "^1.39.10",
     "@tanstack/react-virtual": "3.13.12",

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

@@ -1 +1,3 @@
-export declare const cvaSkeleton: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaSkeleton: (props?: ({
+    textSize?: "text-xs" | "text-sm" | "text-base" | "text-lg" | "text-xl" | "text-2xl" | "text-3xl" | "text-4xl" | "text-5xl" | "text-6xl" | "text-7xl" | "text-8xl" | "text-9xl" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;