@trackunit/react-components 1.16.7 → 1.16.9

package/index.cjs.js

@@ -2166,6 +2166,43 @@ const getMarginValue = (height) => {
     }
     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.
+ */
+const makeCSSLength = (value, unit) => {
+    return `${value}${unit}`;
+};
+/**
+ * Generates a random CSS length value.
+ *
+ * Note: For React components, prefer `useRandomCSSLengths` hook to ensure stable values across re-renders.
+ *
+ * @param params - The parameters object
+ * @param params.min - Minimum numeric value
+ * @param params.max - Maximum numeric value
+ * @param params.unit - CSS unit (defaults to "%")
+ * @returns {CSSLength} A CSS length string (e.g., "65%", "120px", "4rem")
+ */
+const getRandomCSSLength = ({ min, max, unit = "%", }) => {
+    const randomValue = Math.floor(Math.random() * (max - min + 1)) + min;
+    return makeCSSLength(randomValue, unit);
+};
+/**
+ * React hook that generates stable random CSS length values for skeleton loading components.
+ *
+ * Values are memoized and only regenerate when count, min, max, or unit changes.
+ *
+ * @param params - The parameters object
+ * @param params.count - Number of random lengths to generate
+ * @param params.min - Minimum numeric value
+ * @param params.max - Maximum numeric value
+ * @param params.unit - CSS unit (defaults to "%")
+ * @returns {Array<CSSLength>} Array of CSS length strings (e.g., ["65%", "42%", "78%"])
+ */
+const useRandomCSSLengths = ({ count, min, max, unit = "%", }) => {
+    return react.useMemo(() => Array.from({ length: count }, () => getRandomCSSLength({ min, max, unit })), [count, min, max, unit]);
+};
 
 const cvaSkeleton = cssClassVarianceUtilities.cvaMerge([
     "relative",
@@ -4409,19 +4446,6 @@ const KPI = ({ title, value, unit, className, "data-testid": dataTestId, tooltip
     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] }) })] }) }));
 };
 
-/**
- * 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}%`;
-};
-
 /**
  * Skeleton loading indicator that mimics the KPI component structure.
  * Uses the same layout, spacing, and visual hierarchy as KPI.
@@ -4429,13 +4453,8 @@ const getResponsiveRandomWidthPercentage = ({ min, max }) => {
 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 }) })] }));
+    const [titleWidth, valueWidth] = useRandomCSSLengths({ count: 2, min: 60, 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: titleWidth }) }), 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: valueWidth }) })] }));
 };
 
 /**
@@ -4776,15 +4795,12 @@ const DEFAULT_SKELETON_LIST_ITEM_PROPS = {
  */
 const ListItemSkeleton = ({ hasThumbnail = DEFAULT_SKELETON_LIST_ITEM_PROPS.hasThumbnail, thumbnailShape = "circle", hasDescription = DEFAULT_SKELETON_LIST_ITEM_PROPS.hasDescription, hasMeta = DEFAULT_SKELETON_LIST_ITEM_PROPS.hasMeta, hasDetails = DEFAULT_SKELETON_LIST_ITEM_PROPS.hasDetails, }) => {
     // Generate stable random widths once and never change them
-    const lineWidths = react.useMemo(() => {
-        return {
-            title: getResponsiveRandomWidthPercentage({ min: 60, max: 85 }),
-            description: getResponsiveRandomWidthPercentage({ min: 45, max: 70 }),
-            meta: getResponsiveRandomWidthPercentage({ min: 30, max: 55 }),
-            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-neutral-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] }));
+    const [titleWidth, descriptionWidth, metaWidth, detailsWidth] = useRandomCSSLengths({
+        count: 4,
+        min: 25,
+        max: 85,
+    });
+    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-neutral-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: titleWidth }) }), hasDescription ? (jsxRuntime.jsx("div", { className: cvaDescriptionRow(), children: jsxRuntime.jsx(SkeletonLabel, { textSize: "text-xs", width: descriptionWidth }) })) : null, hasMeta ? (jsxRuntime.jsx("div", { className: cvaMetaRow(), children: jsxRuntime.jsx(SkeletonLabel, { textSize: "text-xs", width: metaWidth }) })) : null] })] }), hasDetails ? (jsxRuntime.jsx("div", { className: cvaDetailsContainer(), children: jsxRuntime.jsx(SkeletonLabel, { textSize: "text-sm", width: detailsWidth }) })) : null] }));
 };
 
 /**
@@ -8463,7 +8479,6 @@ exports.cvaZStackItem = cvaZStackItem;
 exports.defaultPageSize = defaultPageSize;
 exports.docs = docs;
 exports.getDevicePixelRatio = getDevicePixelRatio;
-exports.getResponsiveRandomWidthPercentage = getResponsiveRandomWidthPercentage;
 exports.getValueBarColorByValue = getValueBarColorByValue;
 exports.iconColorNames = iconColorNames;
 exports.iconPalette = iconPalette;
@@ -8496,6 +8511,7 @@ exports.useOverflowItems = useOverflowItems;
 exports.usePopoverContext = usePopoverContext;
 exports.usePrevious = usePrevious;
 exports.usePrompt = usePrompt;
+exports.useRandomCSSLengths = useRandomCSSLengths;
 exports.useRelayPagination = useRelayPagination;
 exports.useResize = useResize;
 exports.useScrollBlock = useScrollBlock;

package/index.esm.js

@@ -2164,6 +2164,43 @@ const getMarginValue = (height) => {
     }
     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.
+ */
+const makeCSSLength = (value, unit) => {
+    return `${value}${unit}`;
+};
+/**
+ * Generates a random CSS length value.
+ *
+ * Note: For React components, prefer `useRandomCSSLengths` hook to ensure stable values across re-renders.
+ *
+ * @param params - The parameters object
+ * @param params.min - Minimum numeric value
+ * @param params.max - Maximum numeric value
+ * @param params.unit - CSS unit (defaults to "%")
+ * @returns {CSSLength} A CSS length string (e.g., "65%", "120px", "4rem")
+ */
+const getRandomCSSLength = ({ min, max, unit = "%", }) => {
+    const randomValue = Math.floor(Math.random() * (max - min + 1)) + min;
+    return makeCSSLength(randomValue, unit);
+};
+/**
+ * React hook that generates stable random CSS length values for skeleton loading components.
+ *
+ * Values are memoized and only regenerate when count, min, max, or unit changes.
+ *
+ * @param params - The parameters object
+ * @param params.count - Number of random lengths to generate
+ * @param params.min - Minimum numeric value
+ * @param params.max - Maximum numeric value
+ * @param params.unit - CSS unit (defaults to "%")
+ * @returns {Array<CSSLength>} Array of CSS length strings (e.g., ["65%", "42%", "78%"])
+ */
+const useRandomCSSLengths = ({ count, min, max, unit = "%", }) => {
+    return useMemo(() => Array.from({ length: count }, () => getRandomCSSLength({ min, max, unit })), [count, min, max, unit]);
+};
 
 const cvaSkeleton = cvaMerge([
     "relative",
@@ -4407,19 +4444,6 @@ const KPI = ({ title, value, unit, className, "data-testid": dataTestId, tooltip
     return (jsx(Tooltip, { className: "min-w-8 shrink-0", "data-testid": dataTestId ? `${dataTestId}-tooltip` : undefined, disabled: tooltipLabel === undefined || tooltipLabel === "", label: tooltipLabel, placement: "bottom", children: jsxs("div", { className: cvaKPI({ variant, className }), "data-testid": dataTestId, style: style, ...rest, children: [jsx(Text, { className: twMerge("truncate", "whitespace-nowrap"), "data-testid": dataTestId ? `${dataTestId}-title` : undefined, size: isSmallVariant ? "small" : "medium", subtle: true, weight: isSmallVariant ? "normal" : "bold", children: title }), jsx("div", { className: twMerge("truncate", "whitespace-nowrap"), children: 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] }) })] }) }));
 };
 
-/**
- * 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}%`;
-};
-
 /**
  * Skeleton loading indicator that mimics the KPI component structure.
  * Uses the same layout, spacing, and visual hierarchy as KPI.
@@ -4427,13 +4451,8 @@ const getResponsiveRandomWidthPercentage = ({ min, max }) => {
 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 = useMemo(() => {
-        return {
-            title: getResponsiveRandomWidthPercentage({ min: 60, max: 85 }),
-            value: getResponsiveRandomWidthPercentage({ min: 70, max: 100 }),
-        };
-    }, []);
-    return (jsxs("div", { className: cvaKPI({ variant, className }), "data-testid": dataTestId, style: style, ...rest, children: [jsx("div", { className: twMerge("flex", "items-center", "flex-row", isSmallVariant ? "h-4" : "h-5"), children: jsx(SkeletonLabel, { "data-testid": dataTestId ? `${dataTestId}-title-loading` : undefined, textSize: isSmallVariant ? "text-xs" : "text-sm", width: lineWidths.title }) }), jsx("div", { className: twMerge("truncate", "whitespace-nowrap", "flex h-7 flex-row items-center"), children: jsx(SkeletonLabel, { "data-testid": dataTestId ? `${dataTestId}-value-loading` : undefined, textSize: isSmallVariant ? "text-xs" : "text-lg", width: lineWidths.value }) })] }));
+    const [titleWidth, valueWidth] = useRandomCSSLengths({ count: 2, min: 60, max: 100 });
+    return (jsxs("div", { className: cvaKPI({ variant, className }), "data-testid": dataTestId, style: style, ...rest, children: [jsx("div", { className: twMerge("flex", "items-center", "flex-row", isSmallVariant ? "h-4" : "h-5"), children: jsx(SkeletonLabel, { "data-testid": dataTestId ? `${dataTestId}-title-loading` : undefined, textSize: isSmallVariant ? "text-xs" : "text-sm", width: titleWidth }) }), jsx("div", { className: twMerge("truncate", "whitespace-nowrap", "flex h-7 flex-row items-center"), children: jsx(SkeletonLabel, { "data-testid": dataTestId ? `${dataTestId}-value-loading` : undefined, textSize: isSmallVariant ? "text-xs" : "text-lg", width: valueWidth }) })] }));
 };
 
 /**
@@ -4774,15 +4793,12 @@ const DEFAULT_SKELETON_LIST_ITEM_PROPS = {
  */
 const ListItemSkeleton = ({ hasThumbnail = DEFAULT_SKELETON_LIST_ITEM_PROPS.hasThumbnail, thumbnailShape = "circle", hasDescription = DEFAULT_SKELETON_LIST_ITEM_PROPS.hasDescription, hasMeta = DEFAULT_SKELETON_LIST_ITEM_PROPS.hasMeta, hasDetails = DEFAULT_SKELETON_LIST_ITEM_PROPS.hasDetails, }) => {
     // Generate stable random widths once and never change them
-    const lineWidths = useMemo(() => {
-        return {
-            title: getResponsiveRandomWidthPercentage({ min: 60, max: 85 }),
-            description: getResponsiveRandomWidthPercentage({ min: 45, max: 70 }),
-            meta: getResponsiveRandomWidthPercentage({ min: 30, max: 55 }),
-            details: getResponsiveRandomWidthPercentage({ min: 25, max: 45 }),
-        };
-    }, []);
-    return (jsxs("div", { className: cvaListItem({ className: "w-full" }), children: [jsxs("div", { className: cvaMainInformationClass({ hasThumbnail, className: "w-full" }), children: [hasThumbnail ? (jsx("div", { className: cvaThumbnailContainer({ className: "bg-gray-200" }), children: jsx("div", { className: twMerge("bg-neutral-300", thumbnailShape === "circle" ? "rounded-full" : "rounded"), style: { width: 20, height: 20 } }) })) : null, jsxs("div", { className: cvaTextContainer(), children: [jsx("div", { className: cvaTitleRow(), children: jsx(SkeletonLabel, { textSize: "text-sm", width: lineWidths.title }) }), hasDescription ? (jsx("div", { className: cvaDescriptionRow(), children: jsx(SkeletonLabel, { textSize: "text-xs", width: lineWidths.description }) })) : null, hasMeta ? (jsx("div", { className: cvaMetaRow(), children: jsx(SkeletonLabel, { textSize: "text-xs", width: lineWidths.meta }) })) : null] })] }), hasDetails ? (jsx("div", { className: cvaDetailsContainer(), children: jsx(SkeletonLabel, { textSize: "text-sm", width: lineWidths.details }) })) : null] }));
+    const [titleWidth, descriptionWidth, metaWidth, detailsWidth] = useRandomCSSLengths({
+        count: 4,
+        min: 25,
+        max: 85,
+    });
+    return (jsxs("div", { className: cvaListItem({ className: "w-full" }), children: [jsxs("div", { className: cvaMainInformationClass({ hasThumbnail, className: "w-full" }), children: [hasThumbnail ? (jsx("div", { className: cvaThumbnailContainer({ className: "bg-gray-200" }), children: jsx("div", { className: twMerge("bg-neutral-300", thumbnailShape === "circle" ? "rounded-full" : "rounded"), style: { width: 20, height: 20 } }) })) : null, jsxs("div", { className: cvaTextContainer(), children: [jsx("div", { className: cvaTitleRow(), children: jsx(SkeletonLabel, { textSize: "text-sm", width: titleWidth }) }), hasDescription ? (jsx("div", { className: cvaDescriptionRow(), children: jsx(SkeletonLabel, { textSize: "text-xs", width: descriptionWidth }) })) : null, hasMeta ? (jsx("div", { className: cvaMetaRow(), children: jsx(SkeletonLabel, { textSize: "text-xs", width: metaWidth }) })) : null] })] }), hasDetails ? (jsx("div", { className: cvaDetailsContainer(), children: jsx(SkeletonLabel, { textSize: "text-sm", width: detailsWidth }) })) : null] }));
 };
 
 /**
@@ -8339,4 +8355,4 @@ const useWindowActivity = ({ onFocus, onBlur, skip = false } = { onBlur: undefin
     return useMemo(() => ({ focused }), [focused]);
 };
 
-export { ActionRenderer, Alert, Badge, Breadcrumb, BreadcrumbContainer, Button, Card, CardBody, CardFooter, CardHeader, Collapse, CompletionStatusIndicator, CopyableText, DEFAULT_SKELETON_PREFERENCE_CARD_PROPS, DetailsList, EmptyState, EmptyValue, ExternalLink, GridAreas, Heading, Highlight, HorizontalOverflowScroller, Icon, IconButton, Indicator, KPI, KPICard, KPICardSkeleton, KPISkeleton, List, ListItem, MenuDivider, MenuItem, MenuList, MoreMenu, Notice, PackageNameStoryComponent, Page, PageContent, PageHeader, PageHeaderKpiMetrics, PageHeaderSecondaryActions, PageHeaderTitle, Pagination, Polygon, Popover, PopoverContent, PopoverTitle, PopoverTrigger, Portal, PreferenceCard, PreferenceCardSkeleton, Prompt, ROLE_CARD, SectionHeader, Sidebar, SkeletonBlock, SkeletonLabel, SkeletonLines, Spacer, Spinner, StarButton, Tab, TabContent, TabList, Tabs, Tag, Text, ToggleGroup, Tooltip, TrendIndicator, TrendIndicators, ValueBar, ZStack, createGrid, cvaButton, cvaButtonPrefixSuffix, cvaButtonSpinner, cvaButtonSpinnerContainer, cvaClickable, cvaContainerStyles, cvaContentContainer, cvaContentWrapper, cvaDescriptionCard, cvaIconBackground, cvaIconButton, cvaImgStyles, cvaIndicator, cvaIndicatorIcon, cvaIndicatorIconBackground, cvaIndicatorLabel, cvaIndicatorPing, cvaInputContainer, cvaInteractableItem, cvaList, cvaListContainer, cvaListItem$1 as cvaListItem, cvaMenu, cvaMenuItem, cvaMenuItemLabel, cvaMenuItemPrefix, cvaMenuItemStyle, cvaMenuItemSuffix, cvaMenuList, cvaMenuListDivider, cvaMenuListItem, cvaMenuListMultiSelect, cvaPageHeader, cvaPageHeaderContainer, cvaPageHeaderHeading, cvaPreferenceCard, cvaTitleCard, cvaToggleGroup, cvaToggleGroupWithSlidingBackground, cvaToggleItem, cvaToggleItemContent, cvaToggleItemText, cvaZStackContainer, cvaZStackItem, defaultPageSize, docs, getDevicePixelRatio, getResponsiveRandomWidthPercentage, getValueBarColorByValue, iconColorNames, iconPalette, noPagination, preferenceCardGrid, useClickOutside, useContainerBreakpoints, useContinuousTimeout, useCopyToClipboard, useCustomEncoding, useDebounce, useDevicePixelRatio, useElevatedReducer, useElevatedState, useGridAreas, useHover, useInfiniteScroll, useIsFirstRender, useIsFullscreen, useIsTextTruncated, useKeyboardShortcut, useList, useListItemHeight, useLocalStorage, useLocalStorageReducer, useMeasure, useMergeRefs, useModifierKey, useOverflowItems, usePopoverContext, usePrevious, usePrompt, useRelayPagination, useResize, useScrollBlock, useScrollDetection, useSelfUpdatingRef, useTextSearch, useTimeout, useViewportBreakpoints, useWatch, useWindowActivity };
+export { ActionRenderer, Alert, Badge, Breadcrumb, BreadcrumbContainer, Button, Card, CardBody, CardFooter, CardHeader, Collapse, CompletionStatusIndicator, CopyableText, DEFAULT_SKELETON_PREFERENCE_CARD_PROPS, DetailsList, EmptyState, EmptyValue, ExternalLink, GridAreas, Heading, Highlight, HorizontalOverflowScroller, Icon, IconButton, Indicator, KPI, KPICard, KPICardSkeleton, KPISkeleton, List, ListItem, MenuDivider, MenuItem, MenuList, MoreMenu, Notice, PackageNameStoryComponent, Page, PageContent, PageHeader, PageHeaderKpiMetrics, PageHeaderSecondaryActions, PageHeaderTitle, Pagination, Polygon, Popover, PopoverContent, PopoverTitle, PopoverTrigger, Portal, PreferenceCard, PreferenceCardSkeleton, Prompt, ROLE_CARD, SectionHeader, Sidebar, SkeletonBlock, SkeletonLabel, SkeletonLines, Spacer, Spinner, StarButton, Tab, TabContent, TabList, Tabs, Tag, Text, ToggleGroup, Tooltip, TrendIndicator, TrendIndicators, ValueBar, ZStack, createGrid, cvaButton, cvaButtonPrefixSuffix, cvaButtonSpinner, cvaButtonSpinnerContainer, cvaClickable, cvaContainerStyles, cvaContentContainer, cvaContentWrapper, cvaDescriptionCard, cvaIconBackground, cvaIconButton, cvaImgStyles, cvaIndicator, cvaIndicatorIcon, cvaIndicatorIconBackground, cvaIndicatorLabel, cvaIndicatorPing, cvaInputContainer, cvaInteractableItem, cvaList, cvaListContainer, cvaListItem$1 as cvaListItem, cvaMenu, cvaMenuItem, cvaMenuItemLabel, cvaMenuItemPrefix, cvaMenuItemStyle, cvaMenuItemSuffix, cvaMenuList, cvaMenuListDivider, cvaMenuListItem, cvaMenuListMultiSelect, cvaPageHeader, cvaPageHeaderContainer, cvaPageHeaderHeading, cvaPreferenceCard, cvaTitleCard, cvaToggleGroup, cvaToggleGroupWithSlidingBackground, cvaToggleItem, cvaToggleItemContent, cvaToggleItemText, cvaZStackContainer, cvaZStackItem, defaultPageSize, docs, getDevicePixelRatio, getValueBarColorByValue, iconColorNames, iconPalette, noPagination, preferenceCardGrid, useClickOutside, useContainerBreakpoints, useContinuousTimeout, useCopyToClipboard, useCustomEncoding, useDebounce, useDevicePixelRatio, useElevatedReducer, useElevatedState, useGridAreas, useHover, useInfiniteScroll, useIsFirstRender, useIsFullscreen, useIsTextTruncated, useKeyboardShortcut, useList, useListItemHeight, useLocalStorage, useLocalStorageReducer, useMeasure, useMergeRefs, useModifierKey, useOverflowItems, usePopoverContext, usePrevious, usePrompt, useRandomCSSLengths, useRelayPagination, useResize, useScrollBlock, useScrollDetection, useSelfUpdatingRef, useTextSearch, useTimeout, useViewportBreakpoints, useWatch, useWindowActivity };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "1.16.7",
+  "version": "1.16.9",
   "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.26",
-    "@trackunit/css-class-variance-utilities": "1.11.26",
-    "@trackunit/shared-utils": "1.13.26",
-    "@trackunit/ui-icons": "1.11.25",
+    "@trackunit/ui-design-tokens": "1.11.27",
+    "@trackunit/css-class-variance-utilities": "1.11.27",
+    "@trackunit/shared-utils": "1.13.27",
+    "@trackunit/ui-icons": "1.11.26",
     "@tanstack/react-router": "1.114.29",
     "es-toolkit": "^1.39.10",
     "@tanstack/react-virtual": "3.13.12",

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

@@ -1,5 +1,6 @@
 import { fontSizeKeys } from "@trackunit/ui-design-tokens";
 export type CSSLength = `${number}px` | `${number}rem` | `${number}em` | `${number}ch` | `${number}ex` | `${number}%`;
+export type CSSLengthUnit = "px" | "rem" | "em" | "ch" | "ex" | "%";
 export type TextSizeKey = `text-${fontSizeKeys}`;
 export type SkeletonVariant = "text" | "block";
 export declare const VALID_SIZE_KEYS: ReadonlyArray<fontSizeKeys>;
@@ -26,3 +27,37 @@ export declare const getHeightValue: (height: TextSizeKey | number | string, var
  * @returns {string} The calculated CSS margin value
  */
 export declare const getMarginValue: (height: TextSizeKey | number | string) => string;
+/**
+ * Generates a random CSS length value.
+ *
+ * Note: For React components, prefer `useRandomCSSLengths` hook to ensure stable values across re-renders.
+ *
+ * @param params - The parameters object
+ * @param params.min - Minimum numeric value
+ * @param params.max - Maximum numeric value
+ * @param params.unit - CSS unit (defaults to "%")
+ * @returns {CSSLength} A CSS length string (e.g., "65%", "120px", "4rem")
+ */
+export declare const getRandomCSSLength: ({ min, max, unit, }: {
+    min: number;
+    max: number;
+    unit?: CSSLengthUnit;
+}) => CSSLength;
+/**
+ * React hook that generates stable random CSS length values for skeleton loading components.
+ *
+ * Values are memoized and only regenerate when count, min, max, or unit changes.
+ *
+ * @param params - The parameters object
+ * @param params.count - Number of random lengths to generate
+ * @param params.min - Minimum numeric value
+ * @param params.max - Maximum numeric value
+ * @param params.unit - CSS unit (defaults to "%")
+ * @returns {Array<CSSLength>} Array of CSS length strings (e.g., ["65%", "42%", "78%"])
+ */
+export declare const useRandomCSSLengths: ({ count, min, max, unit, }: {
+    count: number;
+    min: number;
+    max: number;
+    unit?: CSSLengthUnit;
+}) => Array<CSSLength>;

package/src/components/SkeletonLines/SkeletonLines.d.ts

@@ -1,8 +1,6 @@
 import { StringWithAutocompleteOptions } from "@trackunit/shared-utils";
-import { fontSizeKeys } from "@trackunit/ui-design-tokens";
 import { CommonProps } from "../../common/CommonProps";
-type CSSLength = `${number}px` | `${number}rem` | `${number}em` | `${number}ch` | `${number}ex` | `${number}%`;
-type TextSizeKey = `text-${fontSizeKeys}`;
+import { CSSLength, TextSizeKey } from "../Skeleton/Skeleton.helpers";
 /**
  * Preset configurations for common skeleton patterns.
  */

package/src/index.d.ts

@@ -78,11 +78,12 @@ export * from "./components/Prompt/Prompt";
 export * from "./components/SectionHeader/SectionHeader";
 export * from "./components/Sidebar/Sidebar";
 export * from "./components/Sidebar/useOverflowItems";
+export { useRandomCSSLengths } from "./components/Skeleton/Skeleton.helpers";
+export type { CSSLength, CSSLengthUnit } from "./components/Skeleton/Skeleton.helpers";
 export { SkeletonBlock } from "./components/Skeleton/SkeletonBlock/SkeletonBlock";
 export type { SkeletonBlockProps } from "./components/Skeleton/SkeletonBlock/SkeletonBlock";
 export { SkeletonLabel } from "./components/Skeleton/SkeletonLabel/SkeletonLabel";
 export type { SkeletonLabelProps } from "./components/Skeleton/SkeletonLabel/SkeletonLabel";
-export * from "./components/SkeletonLines/skeleton-utils";
 export * from "./components/SkeletonLines/SkeletonLines";
 export * from "./components/Spacer/Spacer";
 export * from "./components/Spinner/Spinner";

package/src/components/SkeletonLines/skeleton-utils.d.ts

@@ -1,12 +0,0 @@
-/**
- * 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%")
- */
-export declare const getResponsiveRandomWidthPercentage: ({ min, max }: {
-    min: number;
-    max: number;
-}) => `${number}%`;