@trackunit/react-components 1.9.21 → 1.9.24

package/index.cjs.js

@@ -32,7 +32,6 @@ const cvaIcon = cssClassVarianceUtilities.cvaMerge(["aspect-square", "inline-gri
     variants: {
         color: {
             primary: "text-primary-600",
-            secondary: "text-neutral-400",
             neutral: "text-neutral-400",
             info: "text-info-600",
             success: "text-success-600",
@@ -201,7 +200,6 @@ const cvaTag = cssClassVarianceUtilities.cvaMerge([
         },
         color: {
             primary: ["bg-primary-100", "text-primary-700"],
-            secondary: ["bg-neutral-100", "text-neutral-700"],
             neutral: ["bg-neutral-200", "text-neutral-700"],
             black: ["bg-neutral-100", "text-neutral-700"],
             white: ["bg-white", "text-neutral-600"],
@@ -274,7 +272,7 @@ Tag.displayName = "Tag";
  * A component used to display the package name and version in the Storybook docs.
  */
 const PackageNameStoryComponent = ({ packageJSON }) => {
-    return (jsxRuntime.jsxs("div", { className: "flex gap-2", children: [jsxRuntime.jsx(Tag, { color: "secondary", children: packageJSON?.name }), jsxRuntime.jsxs(Tag, { color: "secondary", children: ["v", packageJSON?.version] })] }));
+    return (jsxRuntime.jsxs("div", { className: "flex gap-2", children: [jsxRuntime.jsx(Tag, { color: "neutral", children: packageJSON?.name }), jsxRuntime.jsxs(Tag, { color: "neutral", children: ["v", packageJSON?.version] })] }));
 };
 
 /**
@@ -1937,7 +1935,7 @@ const BreadcrumbForMediumScreen = ({ dataTestId, breadcrumbItems }) => {
     const [expanded, setExpanded] = react.useState(false);
     const getReducedArray = react.useCallback(() => {
         let reducedArrayElements = [];
-        const collapsibleButton = (jsxRuntime.jsxs("div", { className: cvaBreadcrumbItem(), children: [jsxRuntime.jsx(IconButton, { dataTestId: `collapsibleButton-${dataTestId}`, icon: jsxRuntime.jsx(Icon, { name: "EllipsisHorizontal", size: "small" }), onClick: () => setExpanded(true), size: "small", variant: "ghost-neutral" }), jsxRuntime.jsx(Icon, { color: "secondary", name: "Slash", size: "small" })] }));
+        const collapsibleButton = (jsxRuntime.jsxs("div", { className: cvaBreadcrumbItem(), children: [jsxRuntime.jsx(IconButton, { dataTestId: `collapsibleButton-${dataTestId}`, icon: jsxRuntime.jsx(Icon, { name: "EllipsisHorizontal", size: "small" }), onClick: () => setExpanded(true), size: "small", variant: "ghost-neutral" }), jsxRuntime.jsx(Icon, { color: "neutral", name: "Slash", size: "small" })] }));
         const firstBreadcrumbItem = breadcrumbItems[0];
         if (firstBreadcrumbItem && breadcrumbItems.length > 3) {
             const lastTwoBreadcrumbItem = breadcrumbItems.slice(-2);
@@ -3426,7 +3424,31 @@ const cvaCardBodyDensityContainer = cssClassVarianceUtilities.cvaMerge(["grid",
     },
 });
 
-const cvaListItem$1 = cssClassVarianceUtilities.cvaMerge(["py-3", "px-4", "min-h-14", "w-full", "flex", "justify-between", "items-center"]);
+const cvaListContainer = cssClassVarianceUtilities.cvaMerge(["overflow-y-auto", "overflow-x-hidden", "h-full"], {
+    variants: {
+        withTopSeparator: {
+            true: ["border-t", "border-neutral-200", "transition-colors duration-200 ease-in"],
+            false: ["border-t", "border-transparent", "transition-colors duration-200 ease-in"],
+        },
+    },
+    defaultVariants: {
+        withTopSeparator: false,
+    },
+});
+const cvaList = cssClassVarianceUtilities.cvaMerge(["relative"]);
+const cvaListItem$1 = cssClassVarianceUtilities.cvaMerge(["absolute", "top-0", "left-0", "w-full"], {
+    variants: {
+        separator: {
+            line: ["border-b", "border-neutral-200"],
+            none: "",
+        },
+    },
+    defaultVariants: {
+        separator: "none",
+    },
+});
+
+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: {
         hasThumbnail: {
@@ -3466,33 +3488,9 @@ const ListItemSkeleton = ({ hasThumbnail = DEFAULT_SKELETON_LIST_ITEM_PROPS.hasT
             details: getResponsiveRandomWidthPercentage({ min: 25, max: 45 }),
         };
     });
-    return (jsxRuntime.jsxs("div", { className: cvaListItem$1({ 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: "grid-rows-min-fr grid w-full items-center gap-1 text-sm", children: [jsxRuntime.jsx(SkeletonLines, { height: "0.875em", lines: 1, width: lineWidths.title }), hasDescription ? jsxRuntime.jsx(SkeletonLines, { height: "0.75em", lines: 1, width: lineWidths.description }) : null, hasMeta ? jsxRuntime.jsx(SkeletonLines, { height: "0.75em", lines: 1, width: lineWidths.meta }) : null] })] }), hasDetails ? (jsxRuntime.jsx("div", { className: "pl-2 text-sm", children: jsxRuntime.jsx(SkeletonLines, { height: "0.875em", lines: 1, 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: "grid-rows-min-fr grid w-full items-center gap-1 text-sm", children: [jsxRuntime.jsx(SkeletonLines, { height: "0.875em", lines: 1, width: lineWidths.title }), hasDescription ? jsxRuntime.jsx(SkeletonLines, { height: "0.75em", lines: 1, width: lineWidths.description }) : null, hasMeta ? jsxRuntime.jsx(SkeletonLines, { height: "0.75em", lines: 1, width: lineWidths.meta }) : null] })] }), hasDetails ? (jsxRuntime.jsx("div", { className: "pl-2 text-sm", children: jsxRuntime.jsx(SkeletonLines, { height: "0.875em", lines: 1, width: lineWidths.details }) })) : null] }));
 };
 
-const cvaListContainer = cssClassVarianceUtilities.cvaMerge(["overflow-y-auto", "overflow-x-hidden", "h-full"], {
-    variants: {
-        withTopSeparator: {
-            true: ["border-t", "border-neutral-200", "transition-colors duration-200 ease-in"],
-            false: ["border-t", "border-transparent", "transition-colors duration-200 ease-in"],
-        },
-    },
-    defaultVariants: {
-        withTopSeparator: false,
-    },
-});
-const cvaList = cssClassVarianceUtilities.cvaMerge(["relative"]);
-const cvaListItem = cssClassVarianceUtilities.cvaMerge(["absolute", "top-0", "left-0", "w-full"], {
-    variants: {
-        separator: {
-            line: ["[&:not(:last-child)]:border-b", "border-neutral-200"],
-            none: "",
-        },
-    },
-    defaultVariants: {
-        separator: "none",
-    },
-});
-
 /**
  *
  */
@@ -3577,9 +3575,9 @@ const ListLoadingIndicator = ({ type, hasThumbnail, thumbnailShape, hasDescripti
  * );
  * ```
  */
-const List = ({ children, className, dataTestId, topSeparatorOnScroll = false, separator = "line", 
+const List = ({ children, className, dataTestId, 
 // UseListResult properties
-containerRef, listRef, rows, getListItemProps, header, loadingIndicator, shouldShowLoaderAtIndex, count, isScrolling, scrollOffset, 
+containerRef, listRef, rows, getListItemProps, header, loadingIndicator, shouldShowLoaderAtIndex, count, isScrolling, scrollOffset, separator, topSeparatorOnScroll, 
 // Unused but part of UseListResult interface
 getTotalSize: _getTotalSize, getVirtualItems: _getVirtualItems, scrollToOffset: _scrollToOffset, scrollToIndex: _scrollToIndex, measure: _measure, }) => {
     return (jsxRuntime.jsx("div", { className: cvaListContainer({
@@ -3588,22 +3586,18 @@ getTotalSize: _getTotalSize, getVirtualItems: _getVirtualItems, scrollToOffset:
         }), "data-is-scrolling": isScrolling, "data-testid": dataTestId, ref: containerRef, children: jsxRuntime.jsx("ul", { className: cvaList(), ref: listRef, children: rows.map(row => {
                 // Generate list item props with separator styling
                 const listItemProps = getListItemProps(row, {
-                    className: cvaListItem({ separator }),
+                    className: cvaListItem$1({ separator }),
                 });
                 const key = row.virtualRow.key;
                 // Render loading row
                 if (row.type === "loader") {
-                    const loadingConfig = loadingIndicator ?? {
-                        type: "skeleton",
-                        ...DEFAULT_SKELETON_LIST_ITEM_PROPS,
-                    };
                     // Use the total data count from useList, not visible rows (which are virtualized)
                     const hasHeaderRow = !!header;
                     const dataStartIndex = hasHeaderRow ? 1 : 0;
                     const totalDataRows = dataStartIndex + count;
                     const loaderIndex = row.virtualRow.index - totalDataRows;
                     const shouldShowLoader = shouldShowLoaderAtIndex(loaderIndex);
-                    return (jsxRuntime.jsx("li", { ...listItemProps, children: shouldShowLoader ? jsxRuntime.jsx(ListLoadingIndicator, { ...loadingConfig }) : null }, key));
+                    return (jsxRuntime.jsx("li", { ...listItemProps, children: shouldShowLoader ? jsxRuntime.jsx(ListLoadingIndicator, { ...loadingIndicator }) : null }, key));
                 }
                 // Render header row
                 if (row.type === "header") {
@@ -3651,10 +3645,12 @@ const DEFAULT_LOADING_INDICATOR_CONFIG = {
  * );
  * ```
  */
-const useList = ({ count, pagination, header, getItem, loadingIndicator = DEFAULT_LOADING_INDICATOR_CONFIG, onRowClick, onChange, estimateItemSize, estimateHeaderSize, overscan, }) => {
+const useList = ({ count, pagination, header, getItem, loadingIndicator = DEFAULT_LOADING_INDICATOR_CONFIG, onRowClick, onChange, estimateItemSize, estimateHeaderSize, overscan, separator = "line", topSeparatorOnScroll = false, }) => {
     const containerRef = react.useRef(null);
     const listRef = react.useRef(null);
     const rowRefsMap = react.useRef(new Map());
+    // Resolve loading indicator once to avoid unnecessary re-renders
+    const resolvedLoadingIndicator = react.useMemo(() => getResolvedLoadingIndicator(loadingIndicator), [loadingIndicator]);
     // Calculate total count including header
     const hasHeader = Boolean(header);
     const dataStartIndex = hasHeader ? 1 : 0;
@@ -3664,7 +3660,7 @@ const useList = ({ count, pagination, header, getItem, loadingIndicator = DEFAUL
     const getLoadingRowsCount = react.useCallback(() => {
         if (pagination?.isLoading === false)
             return 0;
-        const { type: loadingIndicatorType } = loadingIndicator;
+        const { type: loadingIndicatorType } = resolvedLoadingIndicator;
         switch (loadingIndicatorType) {
             case "none":
                 return 0;
@@ -3673,20 +3669,20 @@ const useList = ({ count, pagination, header, getItem, loadingIndicator = DEFAUL
             case "custom":
             case "skeleton": {
                 const isInitialLoading = !pagination?.pageInfo;
-                const initialCount = loadingIndicator.initialLoadingCount ?? 10;
-                const scrollCount = loadingIndicator.scrollLoadingCount ?? 3;
+                const initialCount = resolvedLoadingIndicator.initialLoadingCount ?? 10;
+                const scrollCount = resolvedLoadingIndicator.scrollLoadingCount ?? 3;
                 return isInitialLoading ? initialCount : scrollCount;
             }
             default: {
                 throw new Error(`${loadingIndicatorType} is not known`);
             }
         }
-    }, [loadingIndicator, pagination?.isLoading, pagination?.pageInfo]);
+    }, [resolvedLoadingIndicator, pagination?.isLoading, pagination?.pageInfo]);
     // Helper to determine if a specific loader index should be shown
     const shouldShowLoaderAtIndex = react.useCallback((loaderIndex) => {
         if (pagination?.isLoading === false)
             return false;
-        const { type: loadingIndicatorType } = loadingIndicator;
+        const { type: loadingIndicatorType } = resolvedLoadingIndicator;
         let result;
         switch (loadingIndicatorType) {
             case "none":
@@ -3698,8 +3694,8 @@ const useList = ({ count, pagination, header, getItem, loadingIndicator = DEFAUL
             case "custom":
             case "skeleton": {
                 const isInitialLoading = !pagination?.pageInfo;
-                const initialCount = loadingIndicator.initialLoadingCount ?? 10;
-                const scrollCount = loadingIndicator.scrollLoadingCount ?? 3;
+                const initialCount = resolvedLoadingIndicator.initialLoadingCount ?? 10;
+                const scrollCount = resolvedLoadingIndicator.scrollLoadingCount ?? 3;
                 const maxCount = isInitialLoading ? initialCount : scrollCount;
                 result = loaderIndex < maxCount;
                 break;
@@ -3709,7 +3705,7 @@ const useList = ({ count, pagination, header, getItem, loadingIndicator = DEFAUL
             }
         }
         return result;
-    }, [loadingIndicator, pagination?.isLoading, pagination?.pageInfo]);
+    }, [resolvedLoadingIndicator, pagination?.isLoading, pagination?.pageInfo]);
     const totalRowCount = react.useMemo(() => {
         // Only add the exact number of loading rows we want to show
         const loadingRows = pagination?.isLoading === true ? getLoadingRowsCount() : 0;
@@ -3833,11 +3829,19 @@ const useList = ({ count, pagination, header, getItem, loadingIndicator = DEFAUL
         rows,
         getListItemProps,
         header,
-        loadingIndicator,
+        loadingIndicator: resolvedLoadingIndicator,
         shouldShowLoaderAtIndex,
         count,
+        separator,
+        topSeparatorOnScroll,
     };
 };
+const getResolvedLoadingIndicator = (loadingIndicator) => {
+    if (typeof loadingIndicator === "function") {
+        return loadingIndicator(DEFAULT_LOADING_INDICATOR_CONFIG);
+    }
+    return loadingIndicator;
+};
 
 // Height constants (in pixels) - based on ListItem.variants.ts styling
 const MIN_ITEM_HEIGHT = 56; // min-h-14 = 56px (minimum height for ListItem)
@@ -3955,7 +3959,7 @@ const cvaInteractableItem = cssClassVarianceUtilities.cvaMerge("", {
  * @returns {Element}  ListItem component
  */
 const ListItem = ({ className, dataTestId, onClick, details, title, description, meta, thumbnail, thumbnailColor = "info-600", thumbnailBackground = "info-100", ...rest }) => {
-    const baseClass = cvaListItem$1({ className });
+    const baseClass = cvaListItem({ className });
     const interactableItemClass = onClick ? tailwindMerge.twMerge(baseClass, cvaInteractableItem({ cursor: "pointer" })) : baseClass;
     return (jsxRuntime.jsxs("li", { className: interactableItemClass, "data-testid": dataTestId, onClick: onClick, ...rest, children: [jsxRuntime.jsxs("div", { className: cvaMainInformationClass({ hasThumbnail: !!thumbnail }), children: [thumbnail ? (jsxRuntime.jsx("div", { className: cvaThumbnailContainer({
                             className: `text-${thumbnailColor} bg-${thumbnailBackground}`,
@@ -5229,7 +5233,7 @@ exports.cvaIndicatorPing = cvaIndicatorPing;
 exports.cvaInteractableItem = cvaInteractableItem;
 exports.cvaList = cvaList;
 exports.cvaListContainer = cvaListContainer;
-exports.cvaListItem = cvaListItem;
+exports.cvaListItem = cvaListItem$1;
 exports.cvaMenuItem = cvaMenuItem;
 exports.cvaMenuItemLabel = cvaMenuItemLabel;
 exports.cvaMenuItemPrefix = cvaMenuItemPrefix;

package/index.esm.js

@@ -30,7 +30,6 @@ const cvaIcon = cvaMerge(["aspect-square", "inline-grid", "relative", "shrink-0"
     variants: {
         color: {
             primary: "text-primary-600",
-            secondary: "text-neutral-400",
             neutral: "text-neutral-400",
             info: "text-info-600",
             success: "text-success-600",
@@ -199,7 +198,6 @@ const cvaTag = cvaMerge([
         },
         color: {
             primary: ["bg-primary-100", "text-primary-700"],
-            secondary: ["bg-neutral-100", "text-neutral-700"],
             neutral: ["bg-neutral-200", "text-neutral-700"],
             black: ["bg-neutral-100", "text-neutral-700"],
             white: ["bg-white", "text-neutral-600"],
@@ -272,7 +270,7 @@ Tag.displayName = "Tag";
  * A component used to display the package name and version in the Storybook docs.
  */
 const PackageNameStoryComponent = ({ packageJSON }) => {
-    return (jsxs("div", { className: "flex gap-2", children: [jsx(Tag, { color: "secondary", children: packageJSON?.name }), jsxs(Tag, { color: "secondary", children: ["v", packageJSON?.version] })] }));
+    return (jsxs("div", { className: "flex gap-2", children: [jsx(Tag, { color: "neutral", children: packageJSON?.name }), jsxs(Tag, { color: "neutral", children: ["v", packageJSON?.version] })] }));
 };
 
 /**
@@ -1935,7 +1933,7 @@ const BreadcrumbForMediumScreen = ({ dataTestId, breadcrumbItems }) => {
     const [expanded, setExpanded] = useState(false);
     const getReducedArray = useCallback(() => {
         let reducedArrayElements = [];
-        const collapsibleButton = (jsxs("div", { className: cvaBreadcrumbItem(), children: [jsx(IconButton, { dataTestId: `collapsibleButton-${dataTestId}`, icon: jsx(Icon, { name: "EllipsisHorizontal", size: "small" }), onClick: () => setExpanded(true), size: "small", variant: "ghost-neutral" }), jsx(Icon, { color: "secondary", name: "Slash", size: "small" })] }));
+        const collapsibleButton = (jsxs("div", { className: cvaBreadcrumbItem(), children: [jsx(IconButton, { dataTestId: `collapsibleButton-${dataTestId}`, icon: jsx(Icon, { name: "EllipsisHorizontal", size: "small" }), onClick: () => setExpanded(true), size: "small", variant: "ghost-neutral" }), jsx(Icon, { color: "neutral", name: "Slash", size: "small" })] }));
         const firstBreadcrumbItem = breadcrumbItems[0];
         if (firstBreadcrumbItem && breadcrumbItems.length > 3) {
             const lastTwoBreadcrumbItem = breadcrumbItems.slice(-2);
@@ -3424,7 +3422,31 @@ const cvaCardBodyDensityContainer = cvaMerge(["grid", "grid-cols-[1fr_auto]"], {
     },
 });
 
-const cvaListItem$1 = cvaMerge(["py-3", "px-4", "min-h-14", "w-full", "flex", "justify-between", "items-center"]);
+const cvaListContainer = cvaMerge(["overflow-y-auto", "overflow-x-hidden", "h-full"], {
+    variants: {
+        withTopSeparator: {
+            true: ["border-t", "border-neutral-200", "transition-colors duration-200 ease-in"],
+            false: ["border-t", "border-transparent", "transition-colors duration-200 ease-in"],
+        },
+    },
+    defaultVariants: {
+        withTopSeparator: false,
+    },
+});
+const cvaList = cvaMerge(["relative"]);
+const cvaListItem$1 = cvaMerge(["absolute", "top-0", "left-0", "w-full"], {
+    variants: {
+        separator: {
+            line: ["border-b", "border-neutral-200"],
+            none: "",
+        },
+    },
+    defaultVariants: {
+        separator: "none",
+    },
+});
+
+const cvaListItem = cvaMerge(["py-3", "px-4", "min-h-14", "w-full", "flex", "justify-between", "items-center"]);
 const cvaMainInformationClass = cvaMerge(["grid", "items-center", "text-sm", "gap-2"], {
     variants: {
         hasThumbnail: {
@@ -3464,33 +3486,9 @@ const ListItemSkeleton = ({ hasThumbnail = DEFAULT_SKELETON_LIST_ITEM_PROPS.hasT
             details: getResponsiveRandomWidthPercentage({ min: 25, max: 45 }),
         };
     });
-    return (jsxs("div", { className: cvaListItem$1({ 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-gray-300", thumbnailShape === "circle" ? "rounded-full" : "rounded"), style: { width: 20, height: 20 } }) })) : null, jsxs("div", { className: "grid-rows-min-fr grid w-full items-center gap-1 text-sm", children: [jsx(SkeletonLines, { height: "0.875em", lines: 1, width: lineWidths.title }), hasDescription ? jsx(SkeletonLines, { height: "0.75em", lines: 1, width: lineWidths.description }) : null, hasMeta ? jsx(SkeletonLines, { height: "0.75em", lines: 1, width: lineWidths.meta }) : null] })] }), hasDetails ? (jsx("div", { className: "pl-2 text-sm", children: jsx(SkeletonLines, { height: "0.875em", lines: 1, width: lineWidths.details }) })) : null] }));
+    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-gray-300", thumbnailShape === "circle" ? "rounded-full" : "rounded"), style: { width: 20, height: 20 } }) })) : null, jsxs("div", { className: "grid-rows-min-fr grid w-full items-center gap-1 text-sm", children: [jsx(SkeletonLines, { height: "0.875em", lines: 1, width: lineWidths.title }), hasDescription ? jsx(SkeletonLines, { height: "0.75em", lines: 1, width: lineWidths.description }) : null, hasMeta ? jsx(SkeletonLines, { height: "0.75em", lines: 1, width: lineWidths.meta }) : null] })] }), hasDetails ? (jsx("div", { className: "pl-2 text-sm", children: jsx(SkeletonLines, { height: "0.875em", lines: 1, width: lineWidths.details }) })) : null] }));
 };
 
-const cvaListContainer = cvaMerge(["overflow-y-auto", "overflow-x-hidden", "h-full"], {
-    variants: {
-        withTopSeparator: {
-            true: ["border-t", "border-neutral-200", "transition-colors duration-200 ease-in"],
-            false: ["border-t", "border-transparent", "transition-colors duration-200 ease-in"],
-        },
-    },
-    defaultVariants: {
-        withTopSeparator: false,
-    },
-});
-const cvaList = cvaMerge(["relative"]);
-const cvaListItem = cvaMerge(["absolute", "top-0", "left-0", "w-full"], {
-    variants: {
-        separator: {
-            line: ["[&:not(:last-child)]:border-b", "border-neutral-200"],
-            none: "",
-        },
-    },
-    defaultVariants: {
-        separator: "none",
-    },
-});
-
 /**
  *
  */
@@ -3575,9 +3573,9 @@ const ListLoadingIndicator = ({ type, hasThumbnail, thumbnailShape, hasDescripti
  * );
  * ```
  */
-const List = ({ children, className, dataTestId, topSeparatorOnScroll = false, separator = "line", 
+const List = ({ children, className, dataTestId, 
 // UseListResult properties
-containerRef, listRef, rows, getListItemProps, header, loadingIndicator, shouldShowLoaderAtIndex, count, isScrolling, scrollOffset, 
+containerRef, listRef, rows, getListItemProps, header, loadingIndicator, shouldShowLoaderAtIndex, count, isScrolling, scrollOffset, separator, topSeparatorOnScroll, 
 // Unused but part of UseListResult interface
 getTotalSize: _getTotalSize, getVirtualItems: _getVirtualItems, scrollToOffset: _scrollToOffset, scrollToIndex: _scrollToIndex, measure: _measure, }) => {
     return (jsx("div", { className: cvaListContainer({
@@ -3586,22 +3584,18 @@ getTotalSize: _getTotalSize, getVirtualItems: _getVirtualItems, scrollToOffset:
         }), "data-is-scrolling": isScrolling, "data-testid": dataTestId, ref: containerRef, children: jsx("ul", { className: cvaList(), ref: listRef, children: rows.map(row => {
                 // Generate list item props with separator styling
                 const listItemProps = getListItemProps(row, {
-                    className: cvaListItem({ separator }),
+                    className: cvaListItem$1({ separator }),
                 });
                 const key = row.virtualRow.key;
                 // Render loading row
                 if (row.type === "loader") {
-                    const loadingConfig = loadingIndicator ?? {
-                        type: "skeleton",
-                        ...DEFAULT_SKELETON_LIST_ITEM_PROPS,
-                    };
                     // Use the total data count from useList, not visible rows (which are virtualized)
                     const hasHeaderRow = !!header;
                     const dataStartIndex = hasHeaderRow ? 1 : 0;
                     const totalDataRows = dataStartIndex + count;
                     const loaderIndex = row.virtualRow.index - totalDataRows;
                     const shouldShowLoader = shouldShowLoaderAtIndex(loaderIndex);
-                    return (jsx("li", { ...listItemProps, children: shouldShowLoader ? jsx(ListLoadingIndicator, { ...loadingConfig }) : null }, key));
+                    return (jsx("li", { ...listItemProps, children: shouldShowLoader ? jsx(ListLoadingIndicator, { ...loadingIndicator }) : null }, key));
                 }
                 // Render header row
                 if (row.type === "header") {
@@ -3649,10 +3643,12 @@ const DEFAULT_LOADING_INDICATOR_CONFIG = {
  * );
  * ```
  */
-const useList = ({ count, pagination, header, getItem, loadingIndicator = DEFAULT_LOADING_INDICATOR_CONFIG, onRowClick, onChange, estimateItemSize, estimateHeaderSize, overscan, }) => {
+const useList = ({ count, pagination, header, getItem, loadingIndicator = DEFAULT_LOADING_INDICATOR_CONFIG, onRowClick, onChange, estimateItemSize, estimateHeaderSize, overscan, separator = "line", topSeparatorOnScroll = false, }) => {
     const containerRef = useRef(null);
     const listRef = useRef(null);
     const rowRefsMap = useRef(new Map());
+    // Resolve loading indicator once to avoid unnecessary re-renders
+    const resolvedLoadingIndicator = useMemo(() => getResolvedLoadingIndicator(loadingIndicator), [loadingIndicator]);
     // Calculate total count including header
     const hasHeader = Boolean(header);
     const dataStartIndex = hasHeader ? 1 : 0;
@@ -3662,7 +3658,7 @@ const useList = ({ count, pagination, header, getItem, loadingIndicator = DEFAUL
     const getLoadingRowsCount = useCallback(() => {
         if (pagination?.isLoading === false)
             return 0;
-        const { type: loadingIndicatorType } = loadingIndicator;
+        const { type: loadingIndicatorType } = resolvedLoadingIndicator;
         switch (loadingIndicatorType) {
             case "none":
                 return 0;
@@ -3671,20 +3667,20 @@ const useList = ({ count, pagination, header, getItem, loadingIndicator = DEFAUL
             case "custom":
             case "skeleton": {
                 const isInitialLoading = !pagination?.pageInfo;
-                const initialCount = loadingIndicator.initialLoadingCount ?? 10;
-                const scrollCount = loadingIndicator.scrollLoadingCount ?? 3;
+                const initialCount = resolvedLoadingIndicator.initialLoadingCount ?? 10;
+                const scrollCount = resolvedLoadingIndicator.scrollLoadingCount ?? 3;
                 return isInitialLoading ? initialCount : scrollCount;
             }
             default: {
                 throw new Error(`${loadingIndicatorType} is not known`);
             }
         }
-    }, [loadingIndicator, pagination?.isLoading, pagination?.pageInfo]);
+    }, [resolvedLoadingIndicator, pagination?.isLoading, pagination?.pageInfo]);
     // Helper to determine if a specific loader index should be shown
     const shouldShowLoaderAtIndex = useCallback((loaderIndex) => {
         if (pagination?.isLoading === false)
             return false;
-        const { type: loadingIndicatorType } = loadingIndicator;
+        const { type: loadingIndicatorType } = resolvedLoadingIndicator;
         let result;
         switch (loadingIndicatorType) {
             case "none":
@@ -3696,8 +3692,8 @@ const useList = ({ count, pagination, header, getItem, loadingIndicator = DEFAUL
             case "custom":
             case "skeleton": {
                 const isInitialLoading = !pagination?.pageInfo;
-                const initialCount = loadingIndicator.initialLoadingCount ?? 10;
-                const scrollCount = loadingIndicator.scrollLoadingCount ?? 3;
+                const initialCount = resolvedLoadingIndicator.initialLoadingCount ?? 10;
+                const scrollCount = resolvedLoadingIndicator.scrollLoadingCount ?? 3;
                 const maxCount = isInitialLoading ? initialCount : scrollCount;
                 result = loaderIndex < maxCount;
                 break;
@@ -3707,7 +3703,7 @@ const useList = ({ count, pagination, header, getItem, loadingIndicator = DEFAUL
             }
         }
         return result;
-    }, [loadingIndicator, pagination?.isLoading, pagination?.pageInfo]);
+    }, [resolvedLoadingIndicator, pagination?.isLoading, pagination?.pageInfo]);
     const totalRowCount = useMemo(() => {
         // Only add the exact number of loading rows we want to show
         const loadingRows = pagination?.isLoading === true ? getLoadingRowsCount() : 0;
@@ -3831,11 +3827,19 @@ const useList = ({ count, pagination, header, getItem, loadingIndicator = DEFAUL
         rows,
         getListItemProps,
         header,
-        loadingIndicator,
+        loadingIndicator: resolvedLoadingIndicator,
         shouldShowLoaderAtIndex,
         count,
+        separator,
+        topSeparatorOnScroll,
     };
 };
+const getResolvedLoadingIndicator = (loadingIndicator) => {
+    if (typeof loadingIndicator === "function") {
+        return loadingIndicator(DEFAULT_LOADING_INDICATOR_CONFIG);
+    }
+    return loadingIndicator;
+};
 
 // Height constants (in pixels) - based on ListItem.variants.ts styling
 const MIN_ITEM_HEIGHT = 56; // min-h-14 = 56px (minimum height for ListItem)
@@ -3953,7 +3957,7 @@ const cvaInteractableItem = cvaMerge("", {
  * @returns {Element}  ListItem component
  */
 const ListItem = ({ className, dataTestId, onClick, details, title, description, meta, thumbnail, thumbnailColor = "info-600", thumbnailBackground = "info-100", ...rest }) => {
-    const baseClass = cvaListItem$1({ className });
+    const baseClass = cvaListItem({ className });
     const interactableItemClass = onClick ? twMerge(baseClass, cvaInteractableItem({ cursor: "pointer" })) : baseClass;
     return (jsxs("li", { className: interactableItemClass, "data-testid": dataTestId, onClick: onClick, ...rest, children: [jsxs("div", { className: cvaMainInformationClass({ hasThumbnail: !!thumbnail }), children: [thumbnail ? (jsx("div", { className: cvaThumbnailContainer({
                             className: `text-${thumbnailColor} bg-${thumbnailBackground}`,
@@ -5147,4 +5151,4 @@ const cvaClickable = cvaMerge([
     },
 });
 
-export { ActionRenderer, Alert, Badge, Breadcrumb, BreadcrumbContainer, Button, Card, CardBody, CardFooter, CardHeader, Collapse, CompletionStatusIndicator, CopyableText, DetailsList, EmptyState, EmptyValue, ExternalLink, Heading, Highlight, HorizontalOverflowScroller, Icon, IconButton, Indicator, KPI, KPICard, List, ListItem, MenuDivider, MenuItem, MenuList, MoreMenu, Notice, PackageNameStoryComponent, Page, PageContent, PageHeader, PageHeaderKpiMetrics, PageHeaderSecondaryActions, PageHeaderTitle, Pagination, Polygon, Popover, PopoverContent, PopoverTitle, PopoverTrigger, Portal, Prompt, ROLE_CARD, SectionHeader, Sidebar, SkeletonLines, Spacer, Spinner, StarButton, Tab, TabContent, TabList, Tabs, Tag, Text, ToggleGroup, Tooltip, ValueBar, ZStack, cvaButton, cvaButtonPrefixSuffix, cvaButtonSpinner, cvaButtonSpinnerContainer, cvaClickable, cvaContainerStyles, cvaIconButton, cvaImgStyles, cvaIndicator, cvaIndicatorIcon, cvaIndicatorIconBackground, cvaIndicatorLabel, cvaIndicatorPing, cvaInteractableItem, cvaList, cvaListContainer, cvaListItem, cvaMenuItem, cvaMenuItemLabel, cvaMenuItemPrefix, cvaMenuItemStyle, cvaMenuItemSuffix, cvaPageHeader, cvaPageHeaderContainer, cvaPageHeaderHeading, cvaToggleGroup, cvaToggleGroupWithSlidingBackground, cvaToggleItem, cvaToggleItemContent, cvaToggleItemText, cvaZStackContainer, cvaZStackItem, defaultPageSize, docs, getDevicePixelRatio, getResponsiveRandomWidthPercentage, getValueBarColorByValue, iconColorNames, iconPalette, noPagination, useClickOutside, useContainerBreakpoints, useContinuousTimeout, useDebounce, useDevicePixelRatio, useElevatedReducer, useElevatedState, useGeometry, useHover, useInfiniteScroll, useIsFirstRender, useIsFullscreen, useIsTextTruncated, useList, useListItemHeight, useModifierKey, useOverflowItems, usePopoverContext, usePrompt, useRelayPagination, useResize, useScrollDetection, useSelfUpdatingRef, useStable, useTimeout, useViewportBreakpoints, useWatch, useWindowActivity };
+export { ActionRenderer, Alert, Badge, Breadcrumb, BreadcrumbContainer, Button, Card, CardBody, CardFooter, CardHeader, Collapse, CompletionStatusIndicator, CopyableText, DetailsList, EmptyState, EmptyValue, ExternalLink, Heading, Highlight, HorizontalOverflowScroller, Icon, IconButton, Indicator, KPI, KPICard, List, ListItem, MenuDivider, MenuItem, MenuList, MoreMenu, Notice, PackageNameStoryComponent, Page, PageContent, PageHeader, PageHeaderKpiMetrics, PageHeaderSecondaryActions, PageHeaderTitle, Pagination, Polygon, Popover, PopoverContent, PopoverTitle, PopoverTrigger, Portal, Prompt, ROLE_CARD, SectionHeader, Sidebar, SkeletonLines, Spacer, Spinner, StarButton, Tab, TabContent, TabList, Tabs, Tag, Text, ToggleGroup, Tooltip, ValueBar, ZStack, cvaButton, cvaButtonPrefixSuffix, cvaButtonSpinner, cvaButtonSpinnerContainer, cvaClickable, cvaContainerStyles, cvaIconButton, cvaImgStyles, cvaIndicator, cvaIndicatorIcon, cvaIndicatorIconBackground, cvaIndicatorLabel, cvaIndicatorPing, cvaInteractableItem, cvaList, cvaListContainer, cvaListItem$1 as cvaListItem, cvaMenuItem, cvaMenuItemLabel, cvaMenuItemPrefix, cvaMenuItemStyle, cvaMenuItemSuffix, cvaPageHeader, cvaPageHeaderContainer, cvaPageHeaderHeading, cvaToggleGroup, cvaToggleGroupWithSlidingBackground, cvaToggleItem, cvaToggleItemContent, cvaToggleItemText, cvaZStackContainer, cvaZStackItem, defaultPageSize, docs, getDevicePixelRatio, getResponsiveRandomWidthPercentage, getValueBarColorByValue, iconColorNames, iconPalette, noPagination, useClickOutside, useContainerBreakpoints, useContinuousTimeout, useDebounce, useDevicePixelRatio, useElevatedReducer, useElevatedState, useGeometry, useHover, useInfiniteScroll, useIsFirstRender, useIsFullscreen, useIsTextTruncated, useList, useListItemHeight, useModifierKey, useOverflowItems, usePopoverContext, usePrompt, useRelayPagination, useResize, useScrollDetection, useSelfUpdatingRef, useStable, useTimeout, useViewportBreakpoints, useWatch, useWindowActivity };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "1.9.21",
+  "version": "1.9.24",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -16,11 +16,11 @@
     "@floating-ui/react": "^0.26.25",
     "string-ts": "^2.0.0",
     "tailwind-merge": "^2.0.0",
-    "@trackunit/ui-design-tokens": "1.7.12",
-    "@trackunit/css-class-variance-utilities": "1.7.12",
-    "@trackunit/shared-utils": "1.9.12",
-    "@trackunit/ui-icons": "1.7.14",
-    "@trackunit/react-test-setup": "1.4.12",
+    "@trackunit/ui-design-tokens": "1.7.15",
+    "@trackunit/css-class-variance-utilities": "1.7.14",
+    "@trackunit/shared-utils": "1.9.14",
+    "@trackunit/ui-icons": "1.7.16",
+    "@trackunit/react-test-setup": "1.4.14",
     "@tanstack/react-router": "1.114.29",
     "es-toolkit": "^1.39.10",
     "@tanstack/react-virtual": "3.13.12"

package/src/components/Icon/Icon.d.ts

@@ -172,18 +172,6 @@ export declare const iconPalette: {
         readonly 800: "30 64 175";
         readonly 900: "30 58 138";
     };
-    SECONDARY: {
-        readonly 50: "248 250 252";
-        readonly 100: "241 245 249";
-        readonly 200: "226 232 240";
-        readonly 300: "203 213 225";
-        readonly 400: "148 163 184";
-        readonly 500: "100 116 139";
-        readonly 600: "71 85 105";
-        readonly 700: "51 65 85";
-        readonly 800: "30 41 59";
-        readonly 900: "15 23 42";
-    };
     NEUTRAL: {
         readonly 50: "249 250 251";
         readonly 100: "243 244 246";
@@ -251,7 +239,7 @@ export declare const iconPalette: {
         readonly 900: "127 29 29";
     };
 };
-export declare const iconColorNames: ("info" | "success" | "warning" | "danger" | "primary" | "secondary" | "neutral" | "black" | "white" | "good" | "low" | "critical" | "working" | "idle" | "stopped" | "unknown" | "moving" | "active" | "excessive_usage" | "unused" | "utilized" | "heavily_utilized" | "unknown_utilization" | "site_area" | "site_classic_poi" | "site_classic_zone" | "site_depot" | "site_work_place" | "site_construction_site" | "site_unknown" | "on_rent" | "returned" | "available" | "pickup_ready" | "transfer" | "in_repair" | "other_rental_status")[];
+export declare const iconColorNames: ("info" | "success" | "warning" | "danger" | "primary" | "neutral" | "black" | "white" | "good" | "low" | "critical" | "working" | "idle" | "stopped" | "unknown" | "moving" | "active" | "excessive_usage" | "unused" | "utilized" | "heavily_utilized" | "unknown_utilization" | "site_area" | "site_classic_poi" | "site_classic_zone" | "site_depot" | "site_work_place" | "site_construction_site" | "site_unknown" | "on_rent" | "returned" | "available" | "pickup_ready" | "transfer" | "in_repair" | "other_rental_status")[];
 type IconPropsSmall = {
     size?: "small";
     type?: "solid";

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

@@ -1,5 +1,5 @@
 export declare const cvaIcon: (props?: ({
-    color?: "default" | "primary" | "secondary" | "neutral" | "info" | "success" | "warning" | "danger" | "good" | "low" | "critical" | "working" | "idle" | "moving" | "active" | "excessive_usage" | "stopped" | "unknown" | "black" | "white" | "unused" | "utilized" | "heavily_utilized" | "unknown_utilization" | "site_area" | "site_classic_poi" | "site_classic_zone" | "site_depot" | "site_work_place" | "site_construction_site" | "site_unknown" | "on_rent" | "returned" | "available" | "pickup_ready" | "transfer" | "in_repair" | "other_rental_status" | null | undefined;
+    color?: "default" | "primary" | "neutral" | "info" | "success" | "warning" | "danger" | "good" | "low" | "critical" | "working" | "idle" | "moving" | "active" | "excessive_usage" | "stopped" | "unknown" | "black" | "white" | "unused" | "utilized" | "heavily_utilized" | "unknown_utilization" | "site_area" | "site_classic_poi" | "site_classic_zone" | "site_depot" | "site_work_place" | "site_construction_site" | "site_unknown" | "on_rent" | "returned" | "available" | "pickup_ready" | "transfer" | "in_repair" | "other_rental_status" | null | undefined;
     size?: "small" | "medium" | "large" | null | undefined;
     fontSize?: boolean | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

package/src/components/List/List.d.ts

@@ -1,9 +1,6 @@
-import { VariantProps } from "@trackunit/css-class-variance-utilities";
 import { ReactElement } from "react";
 import { CommonProps } from "../../common/CommonProps";
-import { cvaListItem } from "./List.variants";
 import { UseListResult, VirtualizationListItemProps } from "./useList";
-type Separator = NonNullable<VariantProps<typeof cvaListItem>["separator"]>;
 export type { VirtualizationListItemProps } from "./useList";
 export interface ListProps<TItem = unknown> extends CommonProps, UseListResult<TItem> {
     /**
@@ -26,14 +23,6 @@ export interface ListProps<TItem = unknown> extends CommonProps, UseListResult<T
         item: TItem | undefined;
         index: number;
     }) => ReactElement | null;
-    /**
-     * Separator style between list items.
-     */
-    separator?: Separator;
-    /**
-     * Show a top separator when the list is scrolled.
-     */
-    topSeparatorOnScroll?: boolean;
 }
 /**
  * A performant virtualized list component with infinite scrolling support.
@@ -100,4 +89,4 @@ export interface ListProps<TItem = unknown> extends CommonProps, UseListResult<T
  * );
  * ```
  */
-export declare const List: <TItem = unknown>({ children, className, dataTestId, topSeparatorOnScroll, separator, containerRef, listRef, rows, getListItemProps, header, loadingIndicator, shouldShowLoaderAtIndex, count, isScrolling, scrollOffset, getTotalSize: _getTotalSize, getVirtualItems: _getVirtualItems, scrollToOffset: _scrollToOffset, scrollToIndex: _scrollToIndex, measure: _measure, }: ListProps<TItem>) => ReactElement;
+export declare const List: <TItem = unknown>({ children, className, dataTestId, containerRef, listRef, rows, getListItemProps, header, loadingIndicator, shouldShowLoaderAtIndex, count, isScrolling, scrollOffset, separator, topSeparatorOnScroll, getTotalSize: _getTotalSize, getVirtualItems: _getVirtualItems, scrollToOffset: _scrollToOffset, scrollToIndex: _scrollToIndex, measure: _measure, }: ListProps<TItem>) => ReactElement;

package/src/components/List/useList.d.ts

@@ -2,6 +2,9 @@ import type { VirtualItem, Virtualizer } from "@tanstack/react-virtual";
 import { ReactElement, RefObject } from "react";
 import { RelayPagination } from "../../hooks";
 import { ListLoadingIndicatorProps } from "./ListLoadingIndicator";
+declare const DEFAULT_LOADING_INDICATOR_CONFIG: Extract<ListLoadingIndicatorProps, {
+    type: "skeleton";
+}>;
 /**
  * Props that must be spread onto list items for proper virtualization.
  * These handle positioning, measurement, accessibility, and interaction.
@@ -12,7 +15,7 @@ export interface VirtualizationListItemProps {
     /** CSS classes for list styling and separators */
     className: string;
     /** Element ref for virtualization measurement and setting positioning transform styles */
-    ref?: (node: HTMLLIElement | null) => void;
+    ref: (node: HTMLLIElement | null) => void;
     /** Click handler for row-level interactions */
     onClick?: () => void;
     /** Data attribute for accessibility and debugging */
@@ -45,7 +48,7 @@ export interface UseListOptions<TItem = unknown> {
     /**
      * Loading indicator configuration for pagination loading.
      */
-    loadingIndicator?: ListLoadingIndicatorProps;
+    loadingIndicator?: ListLoadingIndicatorProps | ((defaultLoadingIndicator: typeof DEFAULT_LOADING_INDICATOR_CONFIG) => ListLoadingIndicatorProps);
     /**
      * Callback fired when a row is clicked.
      */
@@ -97,6 +100,14 @@ export interface UseListOptions<TItem = unknown> {
      * Higher values reduce blank areas during fast scrolling but increase memory usage.
      */
     overscan?: number;
+    /**
+     * Separator style between list items.
+     */
+    separator?: "none" | "line";
+    /**
+     * Show a top separator when the list is scrolled.
+     */
+    topSeparatorOnScroll?: boolean;
 }
 export type ListRowType = "header" | "data" | "loader";
 export type ListRow<TItem> = {
@@ -130,11 +141,15 @@ export interface UseListResult<TItem> extends Pick<Virtualizer<HTMLDivElement, H
     /** Header element (if provided) */
     readonly header?: ReactElement;
     /** Loading indicator configuration */
-    readonly loadingIndicator?: ListLoadingIndicatorProps;
+    readonly loadingIndicator: ListLoadingIndicatorProps;
     /** Helper to determine if a specific loader index should be shown */
     readonly shouldShowLoaderAtIndex: (loaderIndex: number) => boolean;
     /** Total number of data items (for consistent calculations) */
     readonly count: number;
+    /** Separator style between list items */
+    readonly separator: "none" | "line";
+    /** Show a top separator when the list is scrolled */
+    readonly topSeparatorOnScroll: boolean;
 }
 /**
  * A hook for managing virtualized list state and behavior.
@@ -168,4 +183,5 @@ export interface UseListResult<TItem> extends Pick<Virtualizer<HTMLDivElement, H
  * );
  * ```
  */
-export declare const useList: <TItem = unknown>({ count, pagination, header, getItem, loadingIndicator, onRowClick, onChange, estimateItemSize, estimateHeaderSize, overscan, }: UseListOptions<TItem>) => UseListResult<TItem>;
+export declare const useList: <TItem = unknown>({ count, pagination, header, getItem, loadingIndicator, onRowClick, onChange, estimateItemSize, estimateHeaderSize, overscan, separator, topSeparatorOnScroll, }: UseListOptions<TItem>) => UseListResult<TItem>;
+export {};

package/src/components/ListItem/ListItem.d.ts

@@ -1,11 +1,21 @@
 import { VariantProps } from "@trackunit/css-class-variance-utilities";
 import { MappedOmit } from "@trackunit/shared-utils";
 import { tailwindPalette, ThemeColors } from "@trackunit/ui-design-tokens";
-import { CSSProperties, MouseEventHandler, ReactElement, ReactNode, Ref } from "react";
+import { MouseEventHandler, ReactElement, ReactNode, Ref } from "react";
 import { CommonProps } from "../../common/CommonProps";
 import { cvaListItem } from "./ListItem.variants";
 type ThemeColorShades = `${keyof (typeof tailwindPalette)[keyof typeof tailwindPalette]}`;
-export interface ListItemProps extends CommonProps, MappedOmit<VariantProps<typeof cvaListItem>, "className"> {
+export type ListItemVirtualizationProps = {
+    /** @internal */
+    ref?: Ref<HTMLLIElement>;
+    /** @internal */
+    tabIndex?: number;
+    /** @internal */
+    "data-index"?: number;
+    /** @internal */
+    className?: string;
+};
+export interface ListItemProps extends CommonProps, ListItemVirtualizationProps, MappedOmit<VariantProps<typeof cvaListItem>, "className"> {
     /**The main text line of the ListItem */
     title: string | ReactElement<CommonProps>;
     /**Optional description for the ListItem. Can be used for descriptions, metadata, or other important details. */
@@ -24,14 +34,6 @@ export interface ListItemProps extends CommonProps, MappedOmit<VariantProps<type
      * If asset image is chosen as thumbnail, make the thumbnailBackground "white".
      */
     thumbnailBackground?: `${ThemeColors}-${ThemeColorShades}` | `${ThemeColors}`;
-    /** @internal */
-    style?: CSSProperties;
-    /** @internal */
-    ref?: Ref<HTMLLIElement>;
-    /** @internal */
-    tabIndex?: number;
-    /** @internal */
-    "data-index"?: number;
 }
 /**
  *   The ListItem is designed to present a concise set of items for quick scanning and navigation. It supports multiple content types and actions, and its flexible layout allows for customization based on the type of data being shown - assets, events, users, etc.

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

@@ -1,7 +1,7 @@
 export declare const cvaTag: (props?: ({
     size?: "small" | "medium" | null | undefined;
     layout?: "default" | "containsDismiss" | "containsIcon" | null | undefined;
-    color?: "primary" | "secondary" | "neutral" | "black" | "white" | "info" | "success" | "warning" | "danger" | "good" | "low" | "critical" | "working" | "stopped" | "idle" | "unknown" | "moving" | "active" | "excessive_usage" | null | undefined;
+    color?: "primary" | "neutral" | "black" | "white" | "info" | "success" | "warning" | "danger" | "good" | "low" | "critical" | "working" | "stopped" | "idle" | "unknown" | "moving" | "active" | "excessive_usage" | null | undefined;
     border?: "default" | "none" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export declare const cvaTagText: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;