@trackunit/react-components 1.9.20 → 1.9.23

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);
@@ -3579,7 +3577,7 @@ const ListLoadingIndicator = ({ type, hasThumbnail, thumbnailShape, hasDescripti
  */
 const List = ({ children, className, dataTestId, topSeparatorOnScroll = false, separator = "line", 
 // UseListResult properties
-containerRef, listRef, rows, getListItemProps, header, loadingIndicator, isScrolling, scrollOffset, 
+containerRef, listRef, rows, getListItemProps, header, loadingIndicator, shouldShowLoaderAtIndex, count, isScrolling, scrollOffset, 
 // Unused but part of UseListResult interface
 getTotalSize: _getTotalSize, getVirtualItems: _getVirtualItems, scrollToOffset: _scrollToOffset, scrollToIndex: _scrollToIndex, measure: _measure, }) => {
     return (jsxRuntime.jsx("div", { className: cvaListContainer({
@@ -3597,10 +3595,12 @@ getTotalSize: _getTotalSize, getVirtualItems: _getVirtualItems, scrollToOffset:
                         type: "skeleton",
                         ...DEFAULT_SKELETON_LIST_ITEM_PROPS,
                     };
-                    const hasHeader = rows.some(r => r.type === "header");
-                    const dataRowCount = rows.filter(r => r.type === "data").length;
-                    const loaderIndex = row.virtualRow.index - dataRowCount - (hasHeader ? 1 : 0);
-                    const shouldShowLoader = loadingConfig.type !== "none" && loaderIndex < (loadingConfig.initialLoadingCount ?? 10);
+                    // 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));
                 }
                 // Render header row
@@ -3612,6 +3612,11 @@ getTotalSize: _getTotalSize, getVirtualItems: _getVirtualItems, scrollToOffset:
             }) }) }));
 };
 
+const DEFAULT_LOADING_INDICATOR_CONFIG = {
+    type: "skeleton",
+    initialLoadingCount: 10,
+    scrollLoadingCount: 3,
+};
 /**
  * A hook for managing virtualized list state and behavior.
  *
@@ -3644,7 +3649,7 @@ getTotalSize: _getTotalSize, getVirtualItems: _getVirtualItems, scrollToOffset:
  * );
  * ```
  */
-const useList = ({ count, pagination, header, getItem, loadingIndicator, onRowClick, onChange, estimateItemSize, estimateHeaderSize, overscan, }) => {
+const useList = ({ count, pagination, header, getItem, loadingIndicator = DEFAULT_LOADING_INDICATOR_CONFIG, onRowClick, onChange, estimateItemSize, estimateHeaderSize, overscan, }) => {
     const containerRef = react.useRef(null);
     const listRef = react.useRef(null);
     const rowRefsMap = react.useRef(new Map());
@@ -3655,8 +3660,6 @@ const useList = ({ count, pagination, header, getItem, loadingIndicator, onRowCl
     const totalDataRows = dataStartIndex + dataCount;
     // Calculate how many loading rows we need
     const getLoadingRowsCount = react.useCallback(() => {
-        if (!loadingIndicator)
-            return 0;
         if (pagination?.isLoading === false)
             return 0;
         const { type: loadingIndicatorType } = loadingIndicator;
@@ -3677,15 +3680,49 @@ const useList = ({ count, pagination, header, getItem, loadingIndicator, onRowCl
             }
         }
     }, [loadingIndicator, pagination?.isLoading, pagination?.pageInfo]);
-    const totalRowCount = react.useMemo(() => totalDataRows + (pagination?.isLoading === true ? getLoadingRowsCount() : 0), [totalDataRows, pagination?.isLoading, getLoadingRowsCount]);
+    // 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;
+        let result;
+        switch (loadingIndicatorType) {
+            case "none":
+                result = false;
+                break;
+            case "spinner":
+                result = loaderIndex === 0;
+                break;
+            case "custom":
+            case "skeleton": {
+                const isInitialLoading = !pagination?.pageInfo;
+                const initialCount = loadingIndicator.initialLoadingCount ?? 10;
+                const scrollCount = loadingIndicator.scrollLoadingCount ?? 3;
+                const maxCount = isInitialLoading ? initialCount : scrollCount;
+                result = loaderIndex < maxCount;
+                break;
+            }
+            default: {
+                throw new Error(`${loadingIndicatorType} is not known`);
+            }
+        }
+        return result;
+    }, [loadingIndicator, 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;
+        const total = totalDataRows + loadingRows;
+        return total;
+    }, [totalDataRows, pagination?.isLoading, getLoadingRowsCount]);
     // Estimate size for all rows (header, data, loading)
     const estimateSize = react.useCallback((index) => {
         // Loading rows
         if (index >= totalDataRows) {
             const loaderIndex = index - totalDataRows;
-            const shouldShowLoader = pagination?.isLoading === true && loaderIndex < getLoadingRowsCount();
+            const shouldShowLoader = shouldShowLoaderAtIndex(loaderIndex);
+            const estimatedHeight = shouldShowLoader ? estimateItemSize(0) : 0;
             // Empty loader rows should be estimated at 0 height to prevent blank space
-            return shouldShowLoader ? estimateItemSize(0) : 0;
+            return estimatedHeight;
         }
         // Header row (if exists, it's always at index 0)
         if (hasHeader && index === 0) {
@@ -3695,15 +3732,7 @@ const useList = ({ count, pagination, header, getItem, loadingIndicator, onRowCl
         // Data rows - calculate the data index
         const dataIndex = index - dataStartIndex;
         return estimateItemSize(dataIndex);
-    }, [
-        estimateItemSize,
-        estimateHeaderSize,
-        totalDataRows,
-        pagination?.isLoading,
-        getLoadingRowsCount,
-        hasHeader,
-        dataStartIndex,
-    ]);
+    }, [estimateItemSize, estimateHeaderSize, totalDataRows, shouldShowLoaderAtIndex, hasHeader, dataStartIndex]);
     // Set up virtualization
     const virtualizer = useInfiniteScroll({
         pagination: pagination ?? noPagination,
@@ -3735,7 +3764,8 @@ const useList = ({ count, pagination, header, getItem, loadingIndicator, onRowCl
     }, []);
     // Transform virtual items into typed rows
     const rows = react.useMemo(() => {
-        return virtualizer.getVirtualItems().map((virtualRow) => {
+        const virtualItems = virtualizer.getVirtualItems();
+        return virtualItems.map((virtualRow) => {
             const { index } = virtualRow;
             // Determine row type
             const isLoaderRow = index >= totalDataRows;
@@ -3802,6 +3832,8 @@ const useList = ({ count, pagination, header, getItem, loadingIndicator, onRowCl
         getListItemProps,
         header,
         loadingIndicator,
+        shouldShowLoaderAtIndex,
+        count,
     };
 };
 

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);
@@ -3577,7 +3575,7 @@ const ListLoadingIndicator = ({ type, hasThumbnail, thumbnailShape, hasDescripti
  */
 const List = ({ children, className, dataTestId, topSeparatorOnScroll = false, separator = "line", 
 // UseListResult properties
-containerRef, listRef, rows, getListItemProps, header, loadingIndicator, isScrolling, scrollOffset, 
+containerRef, listRef, rows, getListItemProps, header, loadingIndicator, shouldShowLoaderAtIndex, count, isScrolling, scrollOffset, 
 // Unused but part of UseListResult interface
 getTotalSize: _getTotalSize, getVirtualItems: _getVirtualItems, scrollToOffset: _scrollToOffset, scrollToIndex: _scrollToIndex, measure: _measure, }) => {
     return (jsx("div", { className: cvaListContainer({
@@ -3595,10 +3593,12 @@ getTotalSize: _getTotalSize, getVirtualItems: _getVirtualItems, scrollToOffset:
                         type: "skeleton",
                         ...DEFAULT_SKELETON_LIST_ITEM_PROPS,
                     };
-                    const hasHeader = rows.some(r => r.type === "header");
-                    const dataRowCount = rows.filter(r => r.type === "data").length;
-                    const loaderIndex = row.virtualRow.index - dataRowCount - (hasHeader ? 1 : 0);
-                    const shouldShowLoader = loadingConfig.type !== "none" && loaderIndex < (loadingConfig.initialLoadingCount ?? 10);
+                    // 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));
                 }
                 // Render header row
@@ -3610,6 +3610,11 @@ getTotalSize: _getTotalSize, getVirtualItems: _getVirtualItems, scrollToOffset:
             }) }) }));
 };
 
+const DEFAULT_LOADING_INDICATOR_CONFIG = {
+    type: "skeleton",
+    initialLoadingCount: 10,
+    scrollLoadingCount: 3,
+};
 /**
  * A hook for managing virtualized list state and behavior.
  *
@@ -3642,7 +3647,7 @@ getTotalSize: _getTotalSize, getVirtualItems: _getVirtualItems, scrollToOffset:
  * );
  * ```
  */
-const useList = ({ count, pagination, header, getItem, loadingIndicator, onRowClick, onChange, estimateItemSize, estimateHeaderSize, overscan, }) => {
+const useList = ({ count, pagination, header, getItem, loadingIndicator = DEFAULT_LOADING_INDICATOR_CONFIG, onRowClick, onChange, estimateItemSize, estimateHeaderSize, overscan, }) => {
     const containerRef = useRef(null);
     const listRef = useRef(null);
     const rowRefsMap = useRef(new Map());
@@ -3653,8 +3658,6 @@ const useList = ({ count, pagination, header, getItem, loadingIndicator, onRowCl
     const totalDataRows = dataStartIndex + dataCount;
     // Calculate how many loading rows we need
     const getLoadingRowsCount = useCallback(() => {
-        if (!loadingIndicator)
-            return 0;
         if (pagination?.isLoading === false)
             return 0;
         const { type: loadingIndicatorType } = loadingIndicator;
@@ -3675,15 +3678,49 @@ const useList = ({ count, pagination, header, getItem, loadingIndicator, onRowCl
             }
         }
     }, [loadingIndicator, pagination?.isLoading, pagination?.pageInfo]);
-    const totalRowCount = useMemo(() => totalDataRows + (pagination?.isLoading === true ? getLoadingRowsCount() : 0), [totalDataRows, pagination?.isLoading, getLoadingRowsCount]);
+    // 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;
+        let result;
+        switch (loadingIndicatorType) {
+            case "none":
+                result = false;
+                break;
+            case "spinner":
+                result = loaderIndex === 0;
+                break;
+            case "custom":
+            case "skeleton": {
+                const isInitialLoading = !pagination?.pageInfo;
+                const initialCount = loadingIndicator.initialLoadingCount ?? 10;
+                const scrollCount = loadingIndicator.scrollLoadingCount ?? 3;
+                const maxCount = isInitialLoading ? initialCount : scrollCount;
+                result = loaderIndex < maxCount;
+                break;
+            }
+            default: {
+                throw new Error(`${loadingIndicatorType} is not known`);
+            }
+        }
+        return result;
+    }, [loadingIndicator, 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;
+        const total = totalDataRows + loadingRows;
+        return total;
+    }, [totalDataRows, pagination?.isLoading, getLoadingRowsCount]);
     // Estimate size for all rows (header, data, loading)
     const estimateSize = useCallback((index) => {
         // Loading rows
         if (index >= totalDataRows) {
             const loaderIndex = index - totalDataRows;
-            const shouldShowLoader = pagination?.isLoading === true && loaderIndex < getLoadingRowsCount();
+            const shouldShowLoader = shouldShowLoaderAtIndex(loaderIndex);
+            const estimatedHeight = shouldShowLoader ? estimateItemSize(0) : 0;
             // Empty loader rows should be estimated at 0 height to prevent blank space
-            return shouldShowLoader ? estimateItemSize(0) : 0;
+            return estimatedHeight;
         }
         // Header row (if exists, it's always at index 0)
         if (hasHeader && index === 0) {
@@ -3693,15 +3730,7 @@ const useList = ({ count, pagination, header, getItem, loadingIndicator, onRowCl
         // Data rows - calculate the data index
         const dataIndex = index - dataStartIndex;
         return estimateItemSize(dataIndex);
-    }, [
-        estimateItemSize,
-        estimateHeaderSize,
-        totalDataRows,
-        pagination?.isLoading,
-        getLoadingRowsCount,
-        hasHeader,
-        dataStartIndex,
-    ]);
+    }, [estimateItemSize, estimateHeaderSize, totalDataRows, shouldShowLoaderAtIndex, hasHeader, dataStartIndex]);
     // Set up virtualization
     const virtualizer = useInfiniteScroll({
         pagination: pagination ?? noPagination,
@@ -3733,7 +3762,8 @@ const useList = ({ count, pagination, header, getItem, loadingIndicator, onRowCl
     }, []);
     // Transform virtual items into typed rows
     const rows = useMemo(() => {
-        return virtualizer.getVirtualItems().map((virtualRow) => {
+        const virtualItems = virtualizer.getVirtualItems();
+        return virtualItems.map((virtualRow) => {
             const { index } = virtualRow;
             // Determine row type
             const isLoaderRow = index >= totalDataRows;
@@ -3800,6 +3830,8 @@ const useList = ({ count, pagination, header, getItem, loadingIndicator, onRowCl
         getListItemProps,
         header,
         loadingIndicator,
+        shouldShowLoaderAtIndex,
+        count,
     };
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "1.9.20",
+  "version": "1.9.23",
   "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.14",
+    "@trackunit/css-class-variance-utilities": "1.7.13",
+    "@trackunit/shared-utils": "1.9.13",
+    "@trackunit/ui-icons": "1.7.15",
+    "@trackunit/react-test-setup": "1.4.13",
     "@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

@@ -100,4 +100,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, isScrolling, scrollOffset, getTotalSize: _getTotalSize, getVirtualItems: _getVirtualItems, scrollToOffset: _scrollToOffset, scrollToIndex: _scrollToIndex, measure: _measure, }: ListProps<TItem>) => ReactElement;
+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;

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

@@ -121,16 +121,20 @@ export interface UseListResult<TItem> extends Pick<Virtualizer<HTMLDivElement, H
     /** Reference to attach to the list */
     listRef: RefObject<HTMLUListElement | null>;
     /** Array of row data to render */
-    rows: Array<ListRow<TItem>>;
+    readonly rows: ReadonlyArray<ListRow<TItem>>;
     /** Helper to create list item props for a given row */
-    getListItemProps: (row: ListRow<TItem>, options: {
+    readonly getListItemProps: (row: ListRow<TItem>, options: {
         className: string;
         onClick?: () => void;
     }) => VirtualizationListItemProps;
     /** Header element (if provided) */
-    header?: ReactElement;
+    readonly header?: ReactElement;
     /** Loading indicator configuration */
-    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;
 }
 /**
  * A hook for managing virtualized list state and behavior.

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;