@trackunit/react-components 1.14.6 → 1.14.12

package/index.cjs.js

@@ -1834,21 +1834,74 @@ 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))) }));
 };
 
+const VALID_SIZE_KEYS = [
+    "xs",
+    "sm",
+    "base",
+    "lg",
+    "xl",
+    "2xl",
+    "3xl",
+    "4xl",
+    "5xl",
+    "6xl",
+    "7xl",
+    "8xl",
+    "9xl",
+];
 /**
- * Generates a random width percentage string for skeleton loading components.
+ * Extract the size key from a text size string (e.g., "text-base" → "base").
  *
- * @param {object} params - The parameter object
- * @param {number} params.min - Minimum percentage value (e.g., 30 for 30%)
- * @param {number} params.max - Maximum percentage value (e.g., 80 for 80%)
- * @returns {string} A percentage string (e.g., "65%")
+ * @param value - The text size string to parse
+ * @returns {fontSizeKeys | null} The extracted size key or null if invalid
  */
-const getResponsiveRandomWidthPercentage = ({ min, max }) => {
-    const randomWidth = Math.floor(Math.random() * (max - min + 1)) + min;
-    return `${randomWidth}%`;
+const extractSizeKey = (value) => {
+    if (!value.startsWith("text-")) {
+        return null;
+    }
+    const sizeKey = value.replace("text-", "");
+    return VALID_SIZE_KEYS.find(key => key === sizeKey) ?? null;
+};
+/**
+ * Calculate the height value based on the height prop and variant.
+ *
+ * @param height - The height value (number, CSS length, or text size key)
+ * @param variant - The skeleton variant ("text" or "block")
+ * @returns {string} The calculated CSS height value
+ */
+const getHeightValue = (height, variant) => {
+    if (typeof height === "number") {
+        return `${height}px`;
+    }
+    const sizeKey = extractSizeKey(height);
+    if (sizeKey) {
+        // Text variant: use font-size × 0.7 to approximate cap-height
+        // Block variant: use full line-height (for when text size keys are passed to block variant)
+        return `calc(var(--font-size-${sizeKey}) * 0.7)` ;
+    }
+    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";
 };
 
-const cvaSkeletonContainer = cssClassVarianceUtilities.cvaMerge(["flex", "flex-col"]);
-const cvaSkeletonLine = cssClassVarianceUtilities.cvaMerge([
+const cvaSkeleton = cssClassVarianceUtilities.cvaMerge([
     "relative",
     "overflow-hidden",
     "rounded-lg",
@@ -1875,32 +1928,28 @@ const cvaSkeletonLine = cssClassVarianceUtilities.cvaMerge([
 ]);
 
 /**
- * Display placeholder lines before the data gets loaded to reduce load-time frustration.
- * All width values are automatically constrained using CSS min() function to prevent overflow.
+ * Display a single placeholder line for text content before data gets loaded to reduce load-time frustration.
+ *
+ * Reduces height and adds vertical margins to match the visual space text occupies within its line-height.
+ * Uses text-size keys (text-xs, text-sm, text-base, etc.) for height to match actual text elements.
+ *
+ * For multiple text lines, use SkeletonLines component instead.
+ * For shape-based elements (images, badges, buttons), use SkeletonBlock component instead.
  */
-const SkeletonLines = react.memo(({ lines = 1, height = "0.75rem", width = "100%", gap = 10, maxWidth = "100%", className, "data-testid": dataTestId, }) => {
-    const gapStyle = typeof gap === "number" ? `${gap}px` : gap;
-    return (jsxRuntime.jsx("div", { "aria-label": `Loading ${lines} ${lines === 1 ? "item" : "items"}`, className: cvaSkeletonContainer({ className }), "data-testid": dataTestId, role: "status", style: { gap: gapStyle }, children: Array.from({ length: lines }, (_, index) => (jsxRuntime.jsx("div", { className: cvaSkeletonLine(), "data-testid": dataTestId ? `${dataTestId}-${index}` : `skeleton-lines-${index}`, "data-type": "loading-skeleton-line", style: {
-                width: getDimension({ dimension: width, index, direction: "width", maxWidth }),
-                height: getDimension({ dimension: height, index, direction: "height" }),
-            } }, index))) }));
+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: {
+            width: flexibleWidth ? "100%" : widthValue,
+            maxWidth: flexibleWidth ? widthValue : undefined,
+            height: heightValue,
+            marginTop: marginValue,
+            marginBottom: marginValue,
+        }, children: children }));
 });
-const getDimension = (params) => {
-    const { dimension, index } = params;
-    let value;
-    if (Array.isArray(dimension)) {
-        const dimValue = dimension[index] ?? dimension[0] ?? "100%";
-        value = typeof dimValue === "number" ? `${dimValue}px` : dimValue;
-    }
-    else {
-        value = typeof dimension === "number" ? `${dimension}px` : dimension;
-    }
-    // For width values, wrap in min() to ensure max container width
-    if (params.direction === "width") {
-        return `min(${value}, ${params.maxWidth})`;
-    }
-    return value;
-};
+SkeletonLabel.displayName = "SkeletonLabel";
 
 const cvaContainerStyles = cssClassVarianceUtilities.cvaMerge([
     "flex",
@@ -1993,7 +2042,7 @@ const EmptyState = ({ description, altText, image = "SEARCH_DOCUMENT", customIma
                 return SearchDocumentSVG;
         }
     }, [image]);
-    return (jsxRuntime.jsx("div", { className: cvaContainerStyles({ className }), "data-testid": dataTestId ?? "empty-state", children: loading ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Spinner, { centering: "centered", "data-testid": "spinner" }), jsxRuntime.jsx(SkeletonLines, { "data-testid": "skeleton-lines", width: 50 })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [customImageSrc !== null && customImageSrc !== undefined ? (typeof customImageSrc === "string" ? (jsxRuntime.jsx("img", { alt: altText, className: cvaImgStyles(), height: 200, src: customImageSrc, width: 200 })) : (customImageSrc)) : (typeof ImageSource !== "undefined" && (jsxRuntime.jsx(ImageSource, { "data-testid": "empty-state-image", height: 200, width: 200 }, image))), description !== undefined && description !== "" ? (jsxRuntime.jsx(Text, { align: "center", size: "large", children: description })) : null, jsxRuntime.jsxs("div", { className: "mt-4 grid gap-3", children: [jsxRuntime.jsxs("div", { className: "flex gap-3", children: [secondaryAction ? (jsxRuntime.jsx(Button, { "data-testid": "empty-state-secondary-button", disabled: secondaryAction.disabled, onClick: secondaryAction.onClick, variant: "secondary", children: secondaryAction.to ? (jsxRuntime.jsx(reactRouter.Link, { params: secondaryAction.to.parameters, to: secondaryAction.to.pathname, children: secondaryAction.title })) : (secondaryAction.title) })) : null, primaryAction ? (jsxRuntime.jsx(Button, { "data-testid": "empty-state-primary-button", disabled: primaryAction.disabled, onClick: primaryAction.onClick, children: primaryAction.to ? (jsxRuntime.jsx(reactRouter.Link, { params: primaryAction.to.parameters, to: primaryAction.to.pathname, children: primaryAction.title })) : (primaryAction.title) })) : null] }), additionalHelpAction?.to ? (jsxRuntime.jsx(Button, { asChild: true, "data-testid": "empty-state-additional-button", disabled: additionalHelpAction.disabled, onClick: additionalHelpAction.onClick, suffix: jsxRuntime.jsx(Icon, { name: "ArrowTopRightOnSquare", size: "small" }), variant: "ghost", children: jsxRuntime.jsx(reactRouter.Link, { params: additionalHelpAction.to.parameters, target: additionalHelpAction.to.target, to: additionalHelpAction.to.pathname, children: additionalHelpAction.title }) })) : null] })] })) }));
+    return (jsxRuntime.jsx("div", { className: cvaContainerStyles({ className }), "data-testid": dataTestId ?? "empty-state", children: loading ? (jsxRuntime.jsxs("div", { className: "flex w-full flex-col items-center gap-4", children: [jsxRuntime.jsx(Spinner, { centering: "centered", "data-testid": "spinner" }), jsxRuntime.jsx(SkeletonLabel, { textSize: "text-base", width: "clamp(20%, 200px, 80%)" })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [customImageSrc !== null && customImageSrc !== undefined ? (typeof customImageSrc === "string" ? (jsxRuntime.jsx("img", { alt: altText, className: cvaImgStyles(), height: 200, src: customImageSrc, width: 200 })) : (customImageSrc)) : (typeof ImageSource !== "undefined" && (jsxRuntime.jsx(ImageSource, { "data-testid": "empty-state-image", height: 200, width: 200 }, image))), description !== undefined && description !== "" ? (jsxRuntime.jsx(Text, { align: "center", size: "large", children: description })) : null, jsxRuntime.jsxs("div", { className: "mt-4 grid gap-3", children: [jsxRuntime.jsxs("div", { className: "flex gap-3", children: [secondaryAction ? (jsxRuntime.jsx(Button, { "data-testid": "empty-state-secondary-button", disabled: secondaryAction.disabled, onClick: secondaryAction.onClick, variant: "secondary", children: secondaryAction.to ? (jsxRuntime.jsx(reactRouter.Link, { params: secondaryAction.to.parameters, to: secondaryAction.to.pathname, children: secondaryAction.title })) : (secondaryAction.title) })) : null, primaryAction ? (jsxRuntime.jsx(Button, { "data-testid": "empty-state-primary-button", disabled: primaryAction.disabled, onClick: primaryAction.onClick, children: primaryAction.to ? (jsxRuntime.jsx(reactRouter.Link, { params: primaryAction.to.parameters, to: primaryAction.to.pathname, children: primaryAction.title })) : (primaryAction.title) })) : null] }), additionalHelpAction?.to ? (jsxRuntime.jsx(Button, { asChild: true, "data-testid": "empty-state-additional-button", disabled: additionalHelpAction.disabled, onClick: additionalHelpAction.onClick, suffix: jsxRuntime.jsx(Icon, { name: "ArrowTopRightOnSquare", size: "small" }), variant: "ghost", children: jsxRuntime.jsx(reactRouter.Link, { params: additionalHelpAction.to.parameters, target: additionalHelpAction.to.target, to: additionalHelpAction.to.pathname, children: additionalHelpAction.title }) })) : null] })] })) }));
 };
 
 const cvaEmptyValue = cssClassVarianceUtilities.cvaMerge(["text-neutral-400"]);
@@ -3932,9 +3981,189 @@ const cvaKPITrendPercentage = cssClassVarianceUtilities.cvaMerge([""], {
  * @param {KPIProps} props - The props for the KPI component
  * @returns {ReactElement} KPI component
  */
-const KPI = ({ title, value, loading = false, unit, className, "data-testid": dataTestId, tooltipLabel, variant = "default", style, ...rest }) => {
+const KPI = ({ title, value, unit, className, "data-testid": dataTestId, tooltipLabel, variant = "default", style, ...rest }) => {
     const isSmallVariant = variant === "small";
-    return (jsxRuntime.jsx(Tooltip, { className: "min-w-8 shrink-0", "data-testid": dataTestId ? `${dataTestId}-tooltip` : undefined, disabled: tooltipLabel === undefined || tooltipLabel === "", label: tooltipLabel, placement: "bottom", children: jsxRuntime.jsxs("div", { className: cvaKPI({ variant, className }), "data-testid": dataTestId, style: style, ...rest, children: [loading ? (jsxRuntime.jsx(SkeletonLines, { className: tailwindMerge.twMerge("flex", "items-center", "flex-row", isSmallVariant ? "h-4" : "h-5"), "data-testid": dataTestId ? `${dataTestId}-title-loading` : undefined, height: isSmallVariant ? uiDesignTokens.themeFontSize.xs : uiDesignTokens.themeFontSize.sm, lines: 1, width: "80%" })) : (jsxRuntime.jsx(Text, { className: tailwindMerge.twMerge("truncate", "whitespace-nowrap"), "data-testid": dataTestId ? `${dataTestId}-title` : undefined, size: isSmallVariant ? "small" : "medium", subtle: true, weight: isSmallVariant ? "normal" : "bold", children: title })), jsxRuntime.jsx("div", { className: tailwindMerge.twMerge("truncate", "whitespace-nowrap"), children: loading ? (jsxRuntime.jsx(SkeletonLines, { className: "flex h-7 flex-row items-center", "data-testid": dataTestId ? `${dataTestId}-value-loading` : undefined, height: uiDesignTokens.themeFontSize.base, lines: 1, width: "100%" })) : (jsxRuntime.jsxs(Text, { className: "truncate whitespace-nowrap text-lg font-medium", "data-testid": dataTestId ? `${dataTestId}-value` : undefined, size: isSmallVariant ? "small" : "large", type: "div", weight: isSmallVariant ? "bold" : "thick", children: [value, " ", unit] })) })] }) }));
+    return (jsxRuntime.jsx(Tooltip, { className: "min-w-8 shrink-0", "data-testid": dataTestId ? `${dataTestId}-tooltip` : undefined, disabled: tooltipLabel === undefined || tooltipLabel === "", label: tooltipLabel, placement: "bottom", children: jsxRuntime.jsxs("div", { className: cvaKPI({ variant, className }), "data-testid": dataTestId, style: style, ...rest, children: [jsxRuntime.jsx(Text, { className: tailwindMerge.twMerge("truncate", "whitespace-nowrap"), "data-testid": dataTestId ? `${dataTestId}-title` : undefined, size: isSmallVariant ? "small" : "medium", subtle: true, weight: isSmallVariant ? "normal" : "bold", children: title }), jsxRuntime.jsx("div", { className: tailwindMerge.twMerge("truncate", "whitespace-nowrap"), children: jsxRuntime.jsxs(Text, { className: "truncate whitespace-nowrap text-lg font-medium", "data-testid": dataTestId ? `${dataTestId}-value` : undefined, size: isSmallVariant ? "small" : "large", type: "div", weight: isSmallVariant ? "bold" : "thick", children: [value, " ", unit] }) })] }) }));
+};
+
+/**
+ * Display a single placeholder block for shape-based elements before data gets loaded to reduce load-time frustration.
+ *
+ * Fills the full height for images, badges, buttons, avatars, and other shape-based elements.
+ * Uses numbers or CSS length values for height.
+ *
+ * For text content, use SkeletonLabel component instead.
+ * For multiple text lines, use SkeletonLines component instead.
+ */
+const SkeletonBlock = react.memo((props) => {
+    const { width = "100%", height = 16, flexibleWidth = false, className, "data-testid": dataTestId, children } = props;
+    const widthValue = typeof width === "number" ? `${width}px` : width;
+    const heightValue = typeof height === "number" ? `${height}px` : height;
+    return (jsxRuntime.jsx("div", { "aria-label": "Loading", className: cvaSkeleton({ className }), "data-testid": dataTestId, role: "status", style: {
+            width: flexibleWidth ? "100%" : widthValue,
+            maxWidth: flexibleWidth ? widthValue : undefined,
+            height: heightValue,
+        }, children: children }));
+});
+SkeletonBlock.displayName = "SkeletonBlock";
+
+/**
+ * Generates a random width percentage string for skeleton loading components.
+ *
+ * @param {object} params - The parameter object
+ * @param {number} params.min - Minimum percentage value (e.g., 30 for 30%)
+ * @param {number} params.max - Maximum percentage value (e.g., 80 for 80%)
+ * @returns {string} A percentage string (e.g., "65%")
+ */
+const getResponsiveRandomWidthPercentage = ({ min, max }) => {
+    const randomWidth = Math.floor(Math.random() * (max - min + 1)) + min;
+    return `${randomWidth}%`;
+};
+
+/**
+ * Preset configurations for common skeleton patterns.
+ */
+const PRESET_CONFIGURATIONS = {
+    "short-paragraph": [
+        { textSize: "text-base", width: "100%" },
+        { textSize: "text-base", width: "100%" },
+        { textSize: "text-base", width: "60%" },
+    ],
+    paragraph: [
+        { textSize: "text-base", width: "100%" },
+        { textSize: "text-base", width: "100%" },
+        { textSize: "text-base", width: "95%" },
+        { textSize: "text-base", width: "90%" },
+        { textSize: "text-base", width: "65%" },
+    ],
+    "long-paragraph": [
+        { textSize: "text-base", width: "100%" },
+        { textSize: "text-base", width: "100%" },
+        { textSize: "text-base", width: "98%" },
+        { textSize: "text-base", width: "95%" },
+        { textSize: "text-base", width: "92%" },
+        { textSize: "text-base", width: "88%" },
+        { textSize: "text-base", width: "85%" },
+        { textSize: "text-base", width: "60%" },
+    ],
+    "title-paragraph": [
+        { textSize: "text-2xl", width: "65%" },
+        { textSize: "text-base", width: "100%" },
+        { textSize: "text-base", width: "95%" },
+        { textSize: "text-base", width: "70%" },
+    ],
+    "heading-text": [
+        { textSize: "text-xl", width: "60%" },
+        { textSize: "text-base", width: "100%" },
+        { textSize: "text-base", width: "100%" },
+        { textSize: "text-base", width: "90%" },
+        { textSize: "text-base", width: "65%" },
+    ],
+    article: [
+        { textSize: "text-3xl", width: "70%" },
+        { textSize: "text-sm", width: "40%" },
+        { textSize: "text-base", width: "100%" },
+        { textSize: "text-base", width: "100%" },
+        { textSize: "text-base", width: "95%" },
+        { textSize: "text-base", width: "90%" },
+        { textSize: "text-base", width: "65%" },
+    ],
+};
+
+const cvaSkeletonContainer = cssClassVarianceUtilities.cvaMerge(["flex", "flex-col"]);
+cssClassVarianceUtilities.cvaMerge([
+    "relative",
+    "overflow-hidden",
+    "rounded-lg",
+    // Gradient background
+    "bg-gradient-to-r",
+    "from-gray-200/80",
+    "via-gray-300/60",
+    "to-gray-200/80",
+    // Pulse animation
+    "animate-pulse",
+    // Shimmer overlay
+    "before:absolute",
+    "before:inset-0",
+    "before:bg-gradient-to-r",
+    "before:from-transparent",
+    "before:via-white/50",
+    "before:to-transparent",
+    "before:opacity-0",
+    "before:animate-pulse",
+    // Smooth transitions for accessibility
+    "transition-all",
+    "duration-300",
+    "ease-in-out",
+]);
+
+/**
+ * Display multiple placeholder lines before data gets loaded to reduce load-time frustration.
+ *
+ * Supports three modes:
+ * - **Uniform mode** (default): Display identical lines using `count` prop
+ * - **Custom mode**: Display customized lines with per-line configuration using `variant="custom"` and `lines` prop
+ * - **Preset mode**: Display common patterns using `variant="preset"` and `preset` name
+ *
+ * Built on top of the [SkeletonLabel](?path=/docs/components-loading-states-skeletonlabel--docs) component for text-specific margins and sizing.
+ *
+ * @example
+ * // Uniform lines (simple mode)
+ * <SkeletonLines count={3} textSize="text-base" variant="uniform" />
+ * @example
+ * // Custom lines (advanced mode)
+ * <SkeletonLines
+ *   variant="custom"
+ *   lines={[
+ *     { textSize: "text-lg", width: "100%" },
+ *     { textSize: "text-base", width: "95%" },
+ *     { textSize: "text-base", width: "70%" }
+ *   ]}
+ * />
+ * @example
+ * // Preset lines (quick patterns)
+ * <SkeletonLines variant="preset" preset="title-paragraph" />
+ */
+const SkeletonLines = react.memo((props) => {
+    const { className, "data-testid": dataTestId } = props;
+    // Generate line configs based on variant
+    let lineConfigs;
+    if (props.variant === "preset") {
+        // TypeScript now knows props is PresetSkeletonLinesProps
+        lineConfigs = PRESET_CONFIGURATIONS[props.preset];
+    }
+    else if (props.variant === "custom") {
+        // TypeScript now knows props is CustomSkeletonLinesProps
+        lineConfigs = props.lines;
+    }
+    else {
+        // TypeScript now knows props is UniformSkeletonLinesProps
+        lineConfigs = Array.from({ length: props.count }, () => ({
+            textSize: props.textSize,
+            width: props.width,
+            flexibleWidth: props.flexibleWidth,
+            className: props.lineClassName,
+        }));
+    }
+    const lineCount = lineConfigs.length;
+    return (jsxRuntime.jsx("div", { "aria-label": `Loading ${lineCount} ${lineCount === 1 ? "item" : "items"}`, className: cvaSkeletonContainer({ className }), "data-testid": dataTestId, "data-variant": props.variant, role: "status", ...(props.variant === "preset" && { "data-preset": props.preset }), children: lineConfigs.map((config, index) => (jsxRuntime.jsx(SkeletonLabel, { className: config.className, "data-testid": dataTestId ? `${dataTestId}-${index}` : undefined, flexibleWidth: config.flexibleWidth ?? true, textSize: config.textSize ?? "text-base", width: config.width ?? "100%" }, index))) }));
+});
+SkeletonLines.displayName = "SkeletonLines";
+
+/**
+ * Skeleton loading indicator that mimics the KPI component structure.
+ * Uses the same layout, spacing, and visual hierarchy as KPI.
+ */
+const KPISkeleton = ({ variant = "default", className, "data-testid": dataTestId, style, ...rest }) => {
+    const isSmallVariant = variant === "small";
+    // Generate stable random widths once and never change them
+    const lineWidths = react.useMemo(() => {
+        return {
+            title: getResponsiveRandomWidthPercentage({ min: 60, max: 85 }),
+            value: getResponsiveRandomWidthPercentage({ min: 70, max: 100 }),
+        };
+    }, []);
+    return (jsxRuntime.jsxs("div", { className: cvaKPI({ variant, className }), "data-testid": dataTestId, style: style, ...rest, children: [jsxRuntime.jsx("div", { className: tailwindMerge.twMerge("flex", "items-center", "flex-row", isSmallVariant ? "h-4" : "h-5"), children: jsxRuntime.jsx(SkeletonLabel, { "data-testid": dataTestId ? `${dataTestId}-title-loading` : undefined, textSize: isSmallVariant ? "text-xs" : "text-sm", width: lineWidths.title }) }), jsxRuntime.jsx("div", { className: tailwindMerge.twMerge("truncate", "whitespace-nowrap", "flex h-7 flex-row items-center"), children: jsxRuntime.jsx(SkeletonLabel, { "data-testid": dataTestId ? `${dataTestId}-value-loading` : undefined, textSize: isSmallVariant ? "text-xs" : "text-lg", width: lineWidths.value }) })] }));
 };
 
 /**
@@ -4090,6 +4319,8 @@ const cvaKPICard = cssClassVarianceUtilities.cvaMerge([
         isActive: false,
     },
 });
+const cvaKPICardBody = cssClassVarianceUtilities.cvaMerge(["grid", "gap-2", "px-3", "pb-2", "pt-3"]);
+const cvaKPICardHeader = cssClassVarianceUtilities.cvaMerge(["grid", "grid-cols-[1fr_auto]", "justify-between", "gap-2"]);
 const cvaKPIIconContainer = cssClassVarianceUtilities.cvaMerge(["flex", "items-center", "justify-center", "w-7", "h-7", "rounded-md", "text-white"], {
     variants: {
         iconColor: {
@@ -4108,15 +4339,23 @@ const cvaKPIIconContainer = cssClassVarianceUtilities.cvaMerge(["flex", "items-c
  * @param {KPICardProps} props - The props for the KPICard component
  * @returns {ReactElement} KPICard component
  */
-const KPICard = ({ isActive = false, onClick, className, "data-testid": dataTestId, children, iconName = undefined, iconColor = "info", loading = false, notice, valueBar, trends, unit, ...rest }) => {
-    const isClickable = Boolean(onClick !== undefined && loading !== true);
+const KPICard = ({ isActive = false, onClick, className, "data-testid": dataTestId, children, iconName = undefined, iconColor = "info", notice, valueBar, trends, unit, ...rest }) => {
+    const isClickable = Boolean(onClick !== undefined);
     return (jsxRuntime.jsx(Card, { className: cvaKPICard({
             isClickable,
             isActive,
             className,
-        }), "data-testid": dataTestId ? dataTestId : undefined, onClick: onClick, children: jsxRuntime.jsxs(CardBody, { className: "grid gap-2 px-3 pb-2 pt-3", gap: "none", padding: "none", children: [jsxRuntime.jsxs("div", { className: "grid grid-cols-[1fr_auto] justify-between gap-2", children: [jsxRuntime.jsx(KPI, { ...rest, className: "p-0", "data-testid": dataTestId ? `${dataTestId}-kpi` : undefined, loading: loading, unit: unit }), iconName ? (jsxRuntime.jsx("div", { className: cvaKPIIconContainer({ iconColor }), children: jsxRuntime.jsx(Icon, { name: iconName, size: "small", type: "solid" }) })) : null] }), trends !== undefined && trends.length > 0 ? (loading ? (jsxRuntime.jsx(SkeletonLines, { className: "h-4", "data-testid": dataTestId ? `${dataTestId}-trend-indicator-loading` : undefined, height: uiDesignTokens.themeFontSize.xs, lines: 1, width: "100%" })) : (jsxRuntime.jsx(TrendIndicators, { "data-testid": dataTestId ? `${dataTestId}-trend-indicators` : undefined, trends: trends }))) : null, valueBar !== undefined ? (loading ? (jsxRuntime.jsx(SkeletonLines, { className: "h-4", "data-testid": dataTestId ? `${dataTestId}-value-bar-loading` : undefined, gap: 0, height: uiDesignTokens.themeFontSize.xs, lines: 1, width: "100%" })) : (jsxRuntime.jsx(ValueBar, { className: "h-2", "data-testid": dataTestId ? `${dataTestId}-value-bar` : undefined, ...valueBar }))) : null, notice !== undefined ? (loading ? (jsxRuntime.jsx(SkeletonLines, { className: "h-4", "data-testid": dataTestId ? `${dataTestId}-notice-loading` : undefined, gap: 0, height: uiDesignTokens.themeFontSize.xs, lines: 1, width: "100%" })) : (
+        }), "data-testid": dataTestId ? dataTestId : undefined, onClick: onClick, children: jsxRuntime.jsxs(CardBody, { className: cvaKPICardBody(), gap: "none", padding: "none", children: [jsxRuntime.jsxs("div", { className: cvaKPICardHeader(), children: [jsxRuntime.jsx(KPI, { ...rest, className: "p-0", "data-testid": dataTestId ? `${dataTestId}-kpi` : undefined, unit: unit }), iconName ? (jsxRuntime.jsx("div", { className: cvaKPIIconContainer({ iconColor }), children: jsxRuntime.jsx(Icon, { name: iconName, size: "small", type: "solid" }) })) : null] }), trends !== undefined && trends.length > 0 ? (jsxRuntime.jsx(TrendIndicators, { "data-testid": dataTestId ? `${dataTestId}-trend-indicators` : undefined, trends: trends })) : null, valueBar !== undefined ? (jsxRuntime.jsx(ValueBar, { className: "h-2", "data-testid": dataTestId ? `${dataTestId}-value-bar` : undefined, ...valueBar })) : null, notice !== undefined ? (
                 // NOTE: Can't use Notice component here due to the non-flexible text styling options
-                jsxRuntime.jsxs("div", { className: "flex items-center gap-1 truncate", "data-testid": dataTestId ? `${dataTestId}-notice` : undefined, children: [notice.iconName ? (jsxRuntime.jsx(Icon, { color: notice.iconColor, "data-testid": dataTestId ? `${dataTestId}-notice-icon` : undefined, name: notice.iconName, size: "small" })) : null, jsxRuntime.jsx(Text, { className: "truncate text-neutral-900", "data-testid": dataTestId ? `${dataTestId}-notice-label` : undefined, size: "small", children: notice.label })] }))) : null, children] }) }));
+                jsxRuntime.jsxs("div", { className: "flex items-center gap-1 truncate", "data-testid": dataTestId ? `${dataTestId}-notice` : undefined, children: [notice.iconName ? (jsxRuntime.jsx(Icon, { color: notice.iconColor, "data-testid": dataTestId ? `${dataTestId}-notice-icon` : undefined, name: notice.iconName, size: "small" })) : null, jsxRuntime.jsx(Text, { className: "truncate text-neutral-900", "data-testid": dataTestId ? `${dataTestId}-notice-label` : undefined, size: "small", children: notice.label })] })) : null, children] }) }));
+};
+
+/**
+ * Skeleton loading indicator that mimics the KPICard component structure.
+ * Uses the same layout, spacing, and visual hierarchy as KPICard.
+ */
+const KPICardSkeleton = ({ hasIcon = false, hasTrends = false, hasValueBar = false, hasNotice = false, children, className, "data-testid": dataTestId, style, ...rest }) => {
+    return (jsxRuntime.jsx(Card, { className: cvaKPICard({ className }), "data-testid": dataTestId, style: style, ...rest, children: jsxRuntime.jsxs(CardBody, { className: cvaKPICardBody(), gap: "none", padding: "none", children: [jsxRuntime.jsxs("div", { className: cvaKPICardHeader(), children: [jsxRuntime.jsx(KPISkeleton, { className: "p-0", "data-testid": dataTestId ? `${dataTestId}-kpi` : undefined }), hasIcon ? (jsxRuntime.jsx(SkeletonBlock, { "data-testid": dataTestId ? `${dataTestId}-icon-loading` : undefined, height: 28, width: 28 })) : null] }), hasTrends ? (jsxRuntime.jsx(SkeletonLabel, { "data-testid": dataTestId ? `${dataTestId}-trend-indicator-loading` : undefined, textSize: "text-xs", width: "100%" })) : null, hasValueBar ? (jsxRuntime.jsx(SkeletonLabel, { "data-testid": dataTestId ? `${dataTestId}-value-bar-loading` : undefined, textSize: "text-xs", width: "100%" })) : null, hasNotice ? (jsxRuntime.jsx(SkeletonLabel, { "data-testid": dataTestId ? `${dataTestId}-notice-loading` : undefined, textSize: "text-xs", width: "100%" })) : null, children] }) }));
 };
 
 const cvaListContainer = cssClassVarianceUtilities.cvaMerge(["overflow-y-auto", "overflow-x-hidden", "h-full"], {
@@ -4159,124 +4398,6 @@ const cvaListItem$1 = cssClassVarianceUtilities.cvaMerge(["absolute", "top-0", "
     },
 });
 
-const cvaSkeleton = cssClassVarianceUtilities.cvaMerge([
-    "relative",
-    "overflow-hidden",
-    "rounded-lg",
-    // Gradient background
-    "bg-gradient-to-r",
-    "from-gray-200/80",
-    "via-gray-300/60",
-    "to-gray-200/80",
-    // Pulse animation
-    "animate-pulse",
-    // Shimmer overlay
-    "before:absolute",
-    "before:inset-0",
-    "before:bg-gradient-to-r",
-    "before:from-transparent",
-    "before:via-white/50",
-    "before:to-transparent",
-    "before:opacity-0",
-    "before:animate-pulse",
-    // Smooth transitions for accessibility
-    "transition-all",
-    "duration-300",
-    "ease-in-out",
-]);
-
-const VALID_SIZE_KEYS = [
-    "xs",
-    "sm",
-    "base",
-    "lg",
-    "xl",
-    "2xl",
-    "3xl",
-    "4xl",
-    "5xl",
-    "6xl",
-    "7xl",
-    "8xl",
-    "9xl",
-];
-/**
- * Extract the size key from a text size string (e.g., "text-base" → "base").
- *
- * @param value - The text size string to parse
- * @returns {fontSizeKeys | null} The extracted size key or null if invalid
- */
-const extractSizeKey = (value) => {
-    if (!value.startsWith("text-")) {
-        return null;
-    }
-    const sizeKey = value.replace("text-", "");
-    return VALID_SIZE_KEYS.find(key => key === sizeKey) ?? null;
-};
-/**
- * Calculate the height value based on the height prop and variant.
- *
- * @param height - The height value (number, CSS length, or text size key)
- * @param variant - The skeleton variant ("text" or "block")
- * @returns {string} The calculated CSS height value
- */
-const getHeightValue = (height, variant) => {
-    if (typeof height === "number") {
-        return `${height}px`;
-    }
-    const sizeKey = extractSizeKey(height);
-    if (sizeKey) {
-        // Text variant: use font-size × 0.7 to approximate cap-height
-        // Block variant: use full line-height (for when text size keys are passed to block variant)
-        return variant === "text" ? `calc(var(--font-size-${sizeKey}) * 0.7)` : `var(--line-height-${sizeKey})`;
-    }
-    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";
-};
-/**
- * Display a single placeholder line before data gets loaded to reduce load-time frustration.
- *
- * Use `variant="text"` with text-size keys for text placeholders.
- * Use `variant="block"` with numbers/CSS for images, badges, buttons, and other shape-based elements.
- * Pass children to create custom skeleton layouts.
- */
-const Skeleton = react.memo((props) => {
-    const { width = "100%", className, "data-testid": dataTestId, children } = props;
-    const variant = props.variant ?? "text";
-    const height = props.height ?? (variant === "text" ? "text-base" : 16);
-    const flexibleWidth = props.flexibleWidth ?? variant === "text";
-    const widthValue = typeof width === "number" ? `${width}px` : width;
-    const isTextVariant = variant === "text";
-    const heightValue = getHeightValue(height, variant);
-    const marginValue = isTextVariant ? getMarginValue(height) : undefined;
-    return (jsxRuntime.jsx("div", { "aria-label": "Loading", className: cvaSkeleton({ className }), "data-testid": dataTestId, role: "status", style: {
-            width: flexibleWidth ? "100%" : widthValue,
-            maxWidth: flexibleWidth ? widthValue : undefined,
-            height: heightValue,
-            marginTop: marginValue,
-            marginBottom: marginValue,
-        }, children: children }));
-});
-Skeleton.displayName = "Skeleton";
-
 const cvaListItem = cssClassVarianceUtilities.cvaMerge(["py-3", "px-4", "min-h-14", "w-full", "flex", "justify-between", "items-center"]);
 const cvaMainInformationClass = cssClassVarianceUtilities.cvaMerge(["grid", "items-center", "text-sm", "gap-2"], {
     variants: {
@@ -4325,7 +4446,7 @@ const ListItemSkeleton = ({ hasThumbnail = DEFAULT_SKELETON_LIST_ITEM_PROPS.hasT
             details: getResponsiveRandomWidthPercentage({ min: 25, max: 45 }),
         };
     }, []);
-    return (jsxRuntime.jsxs("div", { className: cvaListItem({ className: "w-full" }), children: [jsxRuntime.jsxs("div", { className: cvaMainInformationClass({ hasThumbnail, className: "w-full" }), children: [hasThumbnail ? (jsxRuntime.jsx("div", { className: cvaThumbnailContainer({ className: "bg-gray-200" }), children: jsxRuntime.jsx("div", { className: tailwindMerge.twMerge("bg-gray-300", thumbnailShape === "circle" ? "rounded-full" : "rounded"), style: { width: 20, height: 20 } }) })) : null, jsxRuntime.jsxs("div", { className: cvaTextContainer(), children: [jsxRuntime.jsx("div", { className: cvaTitleRow(), children: jsxRuntime.jsx(Skeleton, { height: "text-sm", width: lineWidths.title }) }), hasDescription ? (jsxRuntime.jsx("div", { className: cvaDescriptionRow(), children: jsxRuntime.jsx(Skeleton, { height: "text-xs", width: lineWidths.description }) })) : null, hasMeta ? (jsxRuntime.jsx("div", { className: cvaMetaRow(), children: jsxRuntime.jsx(Skeleton, { height: "text-xs", width: lineWidths.meta }) })) : null] })] }), hasDetails ? (jsxRuntime.jsx("div", { className: cvaDetailsContainer(), children: jsxRuntime.jsx(Skeleton, { height: "text-sm", width: lineWidths.details }) })) : null] }));
+    return (jsxRuntime.jsxs("div", { className: cvaListItem({ className: "w-full" }), children: [jsxRuntime.jsxs("div", { className: cvaMainInformationClass({ hasThumbnail, className: "w-full" }), children: [hasThumbnail ? (jsxRuntime.jsx("div", { className: cvaThumbnailContainer({ className: "bg-gray-200" }), children: jsxRuntime.jsx("div", { className: tailwindMerge.twMerge("bg-gray-300", thumbnailShape === "circle" ? "rounded-full" : "rounded"), style: { width: 20, height: 20 } }) })) : null, jsxRuntime.jsxs("div", { className: cvaTextContainer(), children: [jsxRuntime.jsx("div", { className: cvaTitleRow(), children: jsxRuntime.jsx(SkeletonLabel, { textSize: "text-sm", width: lineWidths.title }) }), hasDescription ? (jsxRuntime.jsx("div", { className: cvaDescriptionRow(), children: jsxRuntime.jsx(SkeletonLabel, { textSize: "text-xs", width: lineWidths.description }) })) : null, hasMeta ? (jsxRuntime.jsx("div", { className: cvaMetaRow(), children: jsxRuntime.jsx(SkeletonLabel, { textSize: "text-xs", width: lineWidths.meta }) })) : null] })] }), hasDetails ? (jsxRuntime.jsx("div", { className: cvaDetailsContainer(), children: jsxRuntime.jsx(SkeletonLabel, { textSize: "text-sm", width: lineWidths.details }) })) : null] }));
 };
 
 /**
@@ -5232,9 +5353,12 @@ const PageContent = ({ className, children, "data-testid": dataTestId, layout, }
     return (jsxRuntime.jsx("div", { className: cvaPageContent({ className, layout }), "data-testid": dataTestId ? dataTestId : "page-content", children: children }));
 };
 
-const LoadingContent = () => (jsxRuntime.jsx("div", { className: "flex flex-row items-center gap-3", "data-testid": "kpi-card-loading-content", children: jsxRuntime.jsx("div", { className: "w-full", children: jsxRuntime.jsx(SkeletonLines, { gap: 3, height: [16, 25], lines: 2, width: [50, 40] }) }) }));
+const LoadingContent = () => (jsxRuntime.jsx("div", { className: "flex flex-row items-center", "data-testid": "kpi-card-loading-content", children: jsxRuntime.jsx("div", { className: "w-full", children: jsxRuntime.jsx(SkeletonLines, { lines: [
+                { textSize: "text-xs", width: 50 },
+                { textSize: "text-lg", width: 40 },
+            ], variant: "custom" }) }) }));
 /**
- * The PageHeaderKpiMetrics component is used to render the KPI metrics in the PageHeader component.
+ * Renders KPI metrics in the PageHeader component.
  *
  * @param {object} props - The props for the PageHeaderKpiMetrics component
  * @param {Array<PageHeaderKpiMetricsType>} props.kpiMetrics - The KPI metrics to render
@@ -5473,7 +5597,7 @@ const Pagination = ({ previousPage, nextPage, canPreviousPage = false, canNextPa
         onPageChange?.({ from, to, description });
     }, [page, onPageChange, previousPage, nextPage]);
     if (loading) {
-        return (jsxRuntime.jsx("div", { className: cvaPagination({ className }), children: jsxRuntime.jsx(SkeletonLines, { height: 16, width: 150 }) }));
+        return (jsxRuntime.jsx("div", { className: cvaPagination({ className }), children: jsxRuntime.jsx(SkeletonLabel, { textSize: "text-sm", width: 150 }) }));
     }
     return (jsxRuntime.jsxs("div", { className: cvaPagination({ className }), "data-testid": dataTestId, children: [jsxRuntime.jsx(IconButton, { "data-testid": "prev-page", disabled: cursorBase ? !canPreviousPage || false : page !== undefined && page <= 0, icon: jsxRuntime.jsx(Icon, { name: "ChevronLeft", size: "small" }), onClick: () => handlePageChange("prev"), size: "small", variant: "ghost-neutral" }), !cursorBase && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: cvaPaginationText(), "data-testid": "current-page", children: currentPage }), jsxRuntime.jsx("div", { className: cvaPaginationText(), "data-testid": "page-count", children: pageCount !== null && pageCount !== undefined && getTranslatedCount ? getTranslatedCount(pageCount) : null })] })), jsxRuntime.jsx(IconButton, { "data-testid": "next-page", disabled: cursorBase
                     ? !canNextPage || false
@@ -5712,7 +5836,7 @@ const PreferenceCardSkeleton = ({ hasIcon = DEFAULT_SKELETON_PREFERENCE_CARD_PRO
             description: getRandomWidth(160, 240),
         };
     }, []);
-    return (jsxRuntime.jsxs("div", { className: cvaPreferenceCard(), children: [hasInput ? (jsxRuntime.jsx("div", { className: cvaInputContainer({ itemPlacement: "center" }), children: jsxRuntime.jsx(Skeleton, { height: 20, variant: "block", width: 20 }) })) : null, jsxRuntime.jsx("div", { className: cvaContentWrapper(), children: jsxRuntime.jsx(GridAreas, { ...gridAreas, className: cvaContentContainer({ itemPlacement: "center" }), children: slots => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [hasIcon ? (jsxRuntime.jsx("div", { ...slots.icon, children: jsxRuntime.jsx(Skeleton, { className: cvaIconBackground({ disabled: false }), height: 32, variant: "block", width: 32 }) })) : null, jsxRuntime.jsxs("div", { ...slots.information, className: "min-w-0 flex-1", children: [jsxRuntime.jsx("div", { className: "grid min-w-0 grid-cols-[1fr_auto] items-center gap-2", children: jsxRuntime.jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [jsxRuntime.jsx(Skeleton, { height: "text-sm", width: lineWidths.title }), hasTitleTag ? jsxRuntime.jsx(TagSkeleton, { size: "small" }) : null] }) }), jsxRuntime.jsx(Skeleton, { height: "text-xs", width: lineWidths.description })] }), hasCardTag ? (jsxRuntime.jsx("div", { ...slots.cardTag, className: "justify-self-end", children: jsxRuntime.jsx(TagSkeleton, { size: "medium" }) })) : null] })) }) })] }));
+    return (jsxRuntime.jsxs("div", { className: cvaPreferenceCard(), children: [hasInput ? (jsxRuntime.jsx("div", { className: cvaInputContainer({ itemPlacement: "center" }), children: jsxRuntime.jsx(SkeletonBlock, { height: 20, width: 20 }) })) : null, jsxRuntime.jsx("div", { className: cvaContentWrapper(), children: jsxRuntime.jsx(GridAreas, { ...gridAreas, className: cvaContentContainer({ itemPlacement: "center" }), children: slots => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [hasIcon ? (jsxRuntime.jsx("div", { ...slots.icon, children: jsxRuntime.jsx(SkeletonBlock, { className: cvaIconBackground({ disabled: false }), height: 32, width: 32 }) })) : null, jsxRuntime.jsxs("div", { ...slots.information, className: "min-w-0 flex-1", children: [jsxRuntime.jsx("div", { className: "grid min-w-0 grid-cols-[1fr_auto] items-center gap-2", children: jsxRuntime.jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [jsxRuntime.jsx(SkeletonLabel, { textSize: "text-sm", width: lineWidths.title }), hasTitleTag ? jsxRuntime.jsx(TagSkeleton, { size: "small" }) : null] }) }), jsxRuntime.jsx(SkeletonLabel, { textSize: "text-xs", width: lineWidths.description })] }), hasCardTag ? (jsxRuntime.jsx("div", { ...slots.cardTag, className: "justify-self-end", children: jsxRuntime.jsx(TagSkeleton, { size: "medium" }) })) : null] })) }) })] }));
 };
 /**
  * Simple tag skeleton for use within PreferenceCardSkeleton.
@@ -5721,7 +5845,7 @@ const PreferenceCardSkeleton = ({ hasIcon = DEFAULT_SKELETON_PREFERENCE_CARD_PRO
 const TagSkeleton = ({ size }) => {
     const width = react.useMemo(() => getRandomWidth(40, 64), []);
     const height = size === "small" ? 18 : 24;
-    return jsxRuntime.jsx(Skeleton, { className: "rounded-full", height: height, variant: "block", width: width });
+    return jsxRuntime.jsx(SkeletonBlock, { className: "rounded-full", height: height, width: width });
 };
 
 function useConfirmExit(confirmExit, when = true) {
@@ -7194,6 +7318,8 @@ exports.IconButton = IconButton;
 exports.Indicator = Indicator;
 exports.KPI = KPI;
 exports.KPICard = KPICard;
+exports.KPICardSkeleton = KPICardSkeleton;
+exports.KPISkeleton = KPISkeleton;
 exports.List = List;
 exports.ListItem = ListItem;
 exports.MenuDivider = MenuDivider;
@@ -7221,7 +7347,8 @@ exports.Prompt = Prompt;
 exports.ROLE_CARD = ROLE_CARD;
 exports.SectionHeader = SectionHeader;
 exports.Sidebar = Sidebar;
-exports.Skeleton = Skeleton;
+exports.SkeletonBlock = SkeletonBlock;
+exports.SkeletonLabel = SkeletonLabel;
 exports.SkeletonLines = SkeletonLines;
 exports.Spacer = Spacer;
 exports.Spinner = Spinner;