@trackunit/react-components 1.8.8 → 1.8.10

package/index.cjs.js

@@ -2132,6 +2132,29 @@ const CopyableText = ({ text, alternativeText, dataTestId, className }) => {
     return (jsxRuntime.jsx("span", { className: cvaCopyableText({ animating, className }), "data-testid": dataTestId, onAnimationEnd: () => setAnimating(false), onClick: handleOnClick, title: value, children: text }));
 };
 
+const cvaDetailsList = cssClassVarianceUtilities.cvaMerge(["flex", "w-full", "min-w-0", "items-center", "truncate", "text-xs", "text-gray-600", "font-medium"], {
+    variants: {
+        density: {
+            default: "pt-0",
+            compact: "pt-1",
+        },
+    },
+});
+const cvaDetailsListItem = cssClassVarianceUtilities.cvaMerge(["last:truncate"]);
+
+/**
+ * Renders a one-line list of details separated by a Slash icon.
+ *
+ * @param {object} props - Component props.
+ * @param {string[]} props.details - Values to render.
+ * @param {string} [props.className] - Optional CSS class for customization.
+ * @param {"compact" | "default"} [props.density="default"] - Visual density of the list.
+ * @returns {ReactElement} The details list element.
+ */
+const DetailsList = ({ details, className, density = "default" }) => {
+    return (jsxRuntime.jsx("div", { className: cvaDetailsList({ className, density }), children: details.map((value, index, array) => (jsxRuntime.jsxs(react.Fragment, { children: [jsxRuntime.jsx("span", { className: cvaDetailsListItem({ className }), children: value }), index < array.length - 1 && (jsxRuntime.jsx("div", { className: "mx-0.5 flex items-center", children: jsxRuntime.jsx(Icon, { className: "w-4 text-neutral-300", color: "neutral", name: "Slash", size: "small" }) }))] }, index))) }));
+};
+
 const cvaSkeletonLine = cssClassVarianceUtilities.cvaMerge([
     "rounded-md",
     "h-3",
@@ -3024,36 +3047,6 @@ const cvaCardBodyDensityContainer = cssClassVarianceUtilities.cvaMerge(["grid",
     },
 });
 
-const cvaMenuList = cssClassVarianceUtilities.cvaMerge([
-    "shadow",
-    "rounded-lg",
-    "z-popover",
-    "bg-white",
-    "border",
-    "border-slate-300",
-    "grid",
-    "min-w-[200px]",
-    "max-w-[300px]",
-    "p-1",
-], {
-    variants: {
-        stickyHeader: {
-            true: "grid-rows-min-fr grid overflow-y-hidden",
-            false: "",
-        },
-    },
-});
-const cvaMenuListDivider = cssClassVarianceUtilities.cvaMerge(["mx-[-4px]", "my-1", "min-h-px", "bg-slate-300"]);
-const cvaMenuListMultiSelect = cssClassVarianceUtilities.cvaMerge("hover:!bg-blue-200");
-const cvaMenuListItem = cssClassVarianceUtilities.cvaMerge("max-w-full");
-
-/**
- * The MenuDivider component is used to separate items in a menu list.
- */
-const MenuDivider = () => {
-    return jsxRuntime.jsx("div", { className: cvaMenuListDivider(), "data-testid": "menu-divider" });
-};
-
 /**
  * Applies standardized interaction-related styles to an element.
  *
@@ -3115,6 +3108,75 @@ const cvaInteractableItem = cssClassVarianceUtilities.cvaMerge("", {
     },
 });
 
+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: {
+            true: "grid-cols-min-fr",
+            false: "grid-cols-1",
+        },
+    },
+});
+const cvaThumbnailContainer = cssClassVarianceUtilities.cvaMerge([
+    "flex",
+    "h-8",
+    "w-8",
+    "items-center",
+    "justify-center",
+    "overflow-hidden",
+    "rounded-md",
+]);
+
+/**
+ *   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.
+ *
+ * @param { ListItemProps} props - The props for the ListItem component
+ * @returns {Element}  ListItem component
+ */
+const ListItem = ({ className, dataTestId, onClick, details, title, description, meta, thumbnail, thumbnailColor = "info-600", thumbnailBackground = "info-100", }) => {
+    const baseClass = cvaListItem({ className });
+    const interactableItemClass = onClick ? tailwindMerge.twMerge(baseClass, cvaInteractableItem({ cursor: "pointer" })) : baseClass;
+    return (jsxRuntime.jsxs("div", { className: interactableItemClass, "data-testid": dataTestId, onClick: onClick, children: [jsxRuntime.jsxs("div", { className: cvaMainInformationClass({ hasThumbnail: !!thumbnail }), children: [thumbnail ? (jsxRuntime.jsx("div", { className: cvaThumbnailContainer({
+                            className: `text-${thumbnailColor} bg-${thumbnailBackground}`,
+                        }), children: thumbnail })) : null, jsxRuntime.jsxs("div", { className: "grid-rows-min-fr grid items-center text-sm", children: [jsxRuntime.jsx("div", { className: "gap-responsive-space-sm flex w-full min-w-0 items-center text-sm", children: typeof title === "string" ? (jsxRuntime.jsx(Text, { className: "truncate", dataTestId: dataTestId ? `${dataTestId}-title` : undefined, weight: "bold", children: title })) : (react.cloneElement(title, {
+                                    className: tailwindMerge.twMerge(title.props.className, "neutral-900 text-sm font-medium truncate"),
+                                    dataTestId: !title.props.dataTestId && dataTestId ? `${dataTestId}-title` : undefined,
+                                })) }), description ? (jsxRuntime.jsx("div", { className: "gap-responsive-space-sm flex w-full min-w-0 items-center", children: typeof description === "string" ? (jsxRuntime.jsx(Text, { className: "truncate text-xs text-neutral-500", dataTestId: dataTestId ? `${dataTestId}-description` : undefined, weight: "bold", children: description })) : (react.cloneElement(description, {
+                                    className: tailwindMerge.twMerge(description.props.className, "text-neutral-500 text-xs font-medium truncate"),
+                                    dataTestId: !description.props.dataTestId && dataTestId ? `${dataTestId}-description` : undefined,
+                                })) })) : null, meta ? (jsxRuntime.jsx("div", { className: "gap-responsive-space-sm flex w-full min-w-0 items-center pt-0.5", children: jsxRuntime.jsx(Text, { className: "truncate text-xs text-neutral-400", dataTestId: dataTestId ? `${dataTestId}-meta` : undefined, weight: "bold", children: meta }) })) : null] })] }), jsxRuntime.jsxs("div", { className: "flex items-center gap-0.5 pl-2", children: [details, onClick ? jsxRuntime.jsx(Icon, { color: "neutral", name: "ChevronRight", size: "medium" }) : null] })] }));
+};
+
+const cvaMenuList = cssClassVarianceUtilities.cvaMerge([
+    "shadow",
+    "rounded-lg",
+    "z-popover",
+    "bg-white",
+    "border",
+    "border-slate-300",
+    "grid",
+    "min-w-[200px]",
+    "max-w-[300px]",
+    "p-1",
+], {
+    variants: {
+        stickyHeader: {
+            true: "grid-rows-min-fr grid overflow-y-hidden",
+            false: "",
+        },
+    },
+});
+const cvaMenuListDivider = cssClassVarianceUtilities.cvaMerge(["mx-[-4px]", "my-1", "min-h-px", "bg-slate-300"]);
+const cvaMenuListMultiSelect = cssClassVarianceUtilities.cvaMerge("hover:!bg-blue-200");
+const cvaMenuListItem = cssClassVarianceUtilities.cvaMerge("max-w-full");
+
+/**
+ * The MenuDivider component is used to separate items in a menu list.
+ */
+const MenuDivider = () => {
+    return jsxRuntime.jsx("div", { className: cvaMenuListDivider(), "data-testid": "menu-divider" });
+};
+
 /**
  * Extends the cvaInteractableItem variant in order to set the padding, width, height, cursor, and other styles particular to the MenuItem component.
  * The cvaInteractableItem variant is used to set the standardized styles that change through interaction with the element (background color, hover, focus, and disabled).
@@ -4310,6 +4372,7 @@ exports.CardHeader = CardHeader;
 exports.Collapse = Collapse;
 exports.CompletionStatusIndicator = CompletionStatusIndicator;
 exports.CopyableText = CopyableText;
+exports.DetailsList = DetailsList;
 exports.EmptyState = EmptyState;
 exports.EmptyValue = EmptyValue;
 exports.ExternalLink = ExternalLink;
@@ -4320,6 +4383,7 @@ exports.IconButton = IconButton;
 exports.Indicator = Indicator;
 exports.KPI = KPI;
 exports.KPICard = KPICard;
+exports.ListItem = ListItem;
 exports.MenuDivider = MenuDivider;
 exports.MenuItem = MenuItem;
 exports.MenuList = MenuList;

package/index.esm.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useRef, useMemo, useEffect, useState, useCallback, createElement, useReducer, memo, forwardRef, createContext, useContext, isValidElement, cloneElement, Children } from 'react';
+import { useRef, useMemo, useEffect, useState, useCallback, createElement, useReducer, Fragment as Fragment$1, memo, forwardRef, createContext, useContext, isValidElement, cloneElement, Children } from 'react';
 import { objectKeys, uuidv4, objectEntries, objectValues, nonNullable } from '@trackunit/shared-utils';
 import { intentPalette, generalPalette, criticalityPalette, activityPalette, utilizationPalette, sitesPalette, rentalStatusPalette, themeScreenSizeAsNumber, color } from '@trackunit/ui-design-tokens';
 import { iconNames } from '@trackunit/ui-icons';
@@ -2130,6 +2130,29 @@ const CopyableText = ({ text, alternativeText, dataTestId, className }) => {
     return (jsx("span", { className: cvaCopyableText({ animating, className }), "data-testid": dataTestId, onAnimationEnd: () => setAnimating(false), onClick: handleOnClick, title: value, children: text }));
 };
 
+const cvaDetailsList = cvaMerge(["flex", "w-full", "min-w-0", "items-center", "truncate", "text-xs", "text-gray-600", "font-medium"], {
+    variants: {
+        density: {
+            default: "pt-0",
+            compact: "pt-1",
+        },
+    },
+});
+const cvaDetailsListItem = cvaMerge(["last:truncate"]);
+
+/**
+ * Renders a one-line list of details separated by a Slash icon.
+ *
+ * @param {object} props - Component props.
+ * @param {string[]} props.details - Values to render.
+ * @param {string} [props.className] - Optional CSS class for customization.
+ * @param {"compact" | "default"} [props.density="default"] - Visual density of the list.
+ * @returns {ReactElement} The details list element.
+ */
+const DetailsList = ({ details, className, density = "default" }) => {
+    return (jsx("div", { className: cvaDetailsList({ className, density }), children: details.map((value, index, array) => (jsxs(Fragment$1, { children: [jsx("span", { className: cvaDetailsListItem({ className }), children: value }), index < array.length - 1 && (jsx("div", { className: "mx-0.5 flex items-center", children: jsx(Icon, { className: "w-4 text-neutral-300", color: "neutral", name: "Slash", size: "small" }) }))] }, index))) }));
+};
+
 const cvaSkeletonLine = cvaMerge([
     "rounded-md",
     "h-3",
@@ -3022,36 +3045,6 @@ const cvaCardBodyDensityContainer = cvaMerge(["grid", "grid-cols-[1fr_auto]"], {
     },
 });
 
-const cvaMenuList = cvaMerge([
-    "shadow",
-    "rounded-lg",
-    "z-popover",
-    "bg-white",
-    "border",
-    "border-slate-300",
-    "grid",
-    "min-w-[200px]",
-    "max-w-[300px]",
-    "p-1",
-], {
-    variants: {
-        stickyHeader: {
-            true: "grid-rows-min-fr grid overflow-y-hidden",
-            false: "",
-        },
-    },
-});
-const cvaMenuListDivider = cvaMerge(["mx-[-4px]", "my-1", "min-h-px", "bg-slate-300"]);
-const cvaMenuListMultiSelect = cvaMerge("hover:!bg-blue-200");
-const cvaMenuListItem = cvaMerge("max-w-full");
-
-/**
- * The MenuDivider component is used to separate items in a menu list.
- */
-const MenuDivider = () => {
-    return jsx("div", { className: cvaMenuListDivider(), "data-testid": "menu-divider" });
-};
-
 /**
  * Applies standardized interaction-related styles to an element.
  *
@@ -3113,6 +3106,75 @@ const cvaInteractableItem = cvaMerge("", {
     },
 });
 
+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: {
+            true: "grid-cols-min-fr",
+            false: "grid-cols-1",
+        },
+    },
+});
+const cvaThumbnailContainer = cvaMerge([
+    "flex",
+    "h-8",
+    "w-8",
+    "items-center",
+    "justify-center",
+    "overflow-hidden",
+    "rounded-md",
+]);
+
+/**
+ *   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.
+ *
+ * @param { ListItemProps} props - The props for the ListItem component
+ * @returns {Element}  ListItem component
+ */
+const ListItem = ({ className, dataTestId, onClick, details, title, description, meta, thumbnail, thumbnailColor = "info-600", thumbnailBackground = "info-100", }) => {
+    const baseClass = cvaListItem({ className });
+    const interactableItemClass = onClick ? twMerge(baseClass, cvaInteractableItem({ cursor: "pointer" })) : baseClass;
+    return (jsxs("div", { className: interactableItemClass, "data-testid": dataTestId, onClick: onClick, children: [jsxs("div", { className: cvaMainInformationClass({ hasThumbnail: !!thumbnail }), children: [thumbnail ? (jsx("div", { className: cvaThumbnailContainer({
+                            className: `text-${thumbnailColor} bg-${thumbnailBackground}`,
+                        }), children: thumbnail })) : null, jsxs("div", { className: "grid-rows-min-fr grid items-center text-sm", children: [jsx("div", { className: "gap-responsive-space-sm flex w-full min-w-0 items-center text-sm", children: typeof title === "string" ? (jsx(Text, { className: "truncate", dataTestId: dataTestId ? `${dataTestId}-title` : undefined, weight: "bold", children: title })) : (cloneElement(title, {
+                                    className: twMerge(title.props.className, "neutral-900 text-sm font-medium truncate"),
+                                    dataTestId: !title.props.dataTestId && dataTestId ? `${dataTestId}-title` : undefined,
+                                })) }), description ? (jsx("div", { className: "gap-responsive-space-sm flex w-full min-w-0 items-center", children: typeof description === "string" ? (jsx(Text, { className: "truncate text-xs text-neutral-500", dataTestId: dataTestId ? `${dataTestId}-description` : undefined, weight: "bold", children: description })) : (cloneElement(description, {
+                                    className: twMerge(description.props.className, "text-neutral-500 text-xs font-medium truncate"),
+                                    dataTestId: !description.props.dataTestId && dataTestId ? `${dataTestId}-description` : undefined,
+                                })) })) : null, meta ? (jsx("div", { className: "gap-responsive-space-sm flex w-full min-w-0 items-center pt-0.5", children: jsx(Text, { className: "truncate text-xs text-neutral-400", dataTestId: dataTestId ? `${dataTestId}-meta` : undefined, weight: "bold", children: meta }) })) : null] })] }), jsxs("div", { className: "flex items-center gap-0.5 pl-2", children: [details, onClick ? jsx(Icon, { color: "neutral", name: "ChevronRight", size: "medium" }) : null] })] }));
+};
+
+const cvaMenuList = cvaMerge([
+    "shadow",
+    "rounded-lg",
+    "z-popover",
+    "bg-white",
+    "border",
+    "border-slate-300",
+    "grid",
+    "min-w-[200px]",
+    "max-w-[300px]",
+    "p-1",
+], {
+    variants: {
+        stickyHeader: {
+            true: "grid-rows-min-fr grid overflow-y-hidden",
+            false: "",
+        },
+    },
+});
+const cvaMenuListDivider = cvaMerge(["mx-[-4px]", "my-1", "min-h-px", "bg-slate-300"]);
+const cvaMenuListMultiSelect = cvaMerge("hover:!bg-blue-200");
+const cvaMenuListItem = cvaMerge("max-w-full");
+
+/**
+ * The MenuDivider component is used to separate items in a menu list.
+ */
+const MenuDivider = () => {
+    return jsx("div", { className: cvaMenuListDivider(), "data-testid": "menu-divider" });
+};
+
 /**
  * Extends the cvaInteractableItem variant in order to set the padding, width, height, cursor, and other styles particular to the MenuItem component.
  * The cvaInteractableItem variant is used to set the standardized styles that change through interaction with the element (background color, hover, focus, and disabled).
@@ -4295,4 +4357,4 @@ const cvaClickable = cvaMerge([
     },
 });
 
-export { ActionRenderer, Alert, Badge, Breadcrumb, BreadcrumbContainer, Button, Card, CardBody, CardFooter, CardHeader, Collapse, CompletionStatusIndicator, CopyableText, EmptyState, EmptyValue, ExternalLink, Heading, Highlight, Icon, IconButton, Indicator, KPI, KPICard, 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, VirtualizedList, ZStack, cvaButton, cvaButtonPrefixSuffix, cvaButtonSpinner, cvaButtonSpinnerContainer, cvaClickable, cvaContainerStyles, cvaIconButton, cvaImgStyles, cvaIndicator, cvaIndicatorIcon, cvaIndicatorIconBackground, cvaIndicatorLabel, cvaIndicatorPing, cvaInteractableItem, cvaMenuItem, cvaMenuItemLabel, cvaMenuItemPrefix, cvaMenuItemStyle, cvaMenuItemSuffix, cvaPageHeader, cvaPageHeaderContainer, cvaPageHeaderHeading, cvaToggleGroup, cvaToggleGroupWithSlidingBackground, cvaToggleItem, cvaToggleItemContent, cvaToggleItemText, cvaVirtualizedList, cvaVirtualizedListContainer, cvaVirtualizedListItem, cvaZStackContainer, cvaZStackItem, docs, getDevicePixelRatio, getValueBarColorByValue, iconColorNames, iconPalette, useClickOutside, useContainerBreakpoints, useContinuousTimeout, useDebounce, useDevicePixelRatio, useElevatedReducer, useElevatedState, useGeometry, useHover, useIsFirstRender, useIsFullscreen, useIsTextTruncated, useModifierKey, useOverflowItems, usePopoverContext, usePrompt, useResize, useScrollDetection, useSelfUpdatingRef, useTimeout, useViewportBreakpoints, useWatch, useWindowActivity };
+export { ActionRenderer, Alert, Badge, Breadcrumb, BreadcrumbContainer, Button, Card, CardBody, CardFooter, CardHeader, Collapse, CompletionStatusIndicator, CopyableText, DetailsList, EmptyState, EmptyValue, ExternalLink, Heading, Highlight, Icon, IconButton, Indicator, KPI, KPICard, 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, VirtualizedList, ZStack, cvaButton, cvaButtonPrefixSuffix, cvaButtonSpinner, cvaButtonSpinnerContainer, cvaClickable, cvaContainerStyles, cvaIconButton, cvaImgStyles, cvaIndicator, cvaIndicatorIcon, cvaIndicatorIconBackground, cvaIndicatorLabel, cvaIndicatorPing, cvaInteractableItem, cvaMenuItem, cvaMenuItemLabel, cvaMenuItemPrefix, cvaMenuItemStyle, cvaMenuItemSuffix, cvaPageHeader, cvaPageHeaderContainer, cvaPageHeaderHeading, cvaToggleGroup, cvaToggleGroupWithSlidingBackground, cvaToggleItem, cvaToggleItemContent, cvaToggleItemText, cvaVirtualizedList, cvaVirtualizedListContainer, cvaVirtualizedListItem, cvaZStackContainer, cvaZStackItem, docs, getDevicePixelRatio, getValueBarColorByValue, iconColorNames, iconPalette, useClickOutside, useContainerBreakpoints, useContinuousTimeout, useDebounce, useDevicePixelRatio, useElevatedReducer, useElevatedState, useGeometry, useHover, useIsFirstRender, useIsFullscreen, useIsTextTruncated, useModifierKey, useOverflowItems, usePopoverContext, usePrompt, useResize, useScrollDetection, useSelfUpdatingRef, useTimeout, useViewportBreakpoints, useWatch, useWindowActivity };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "1.8.8",
+  "version": "1.8.10",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {

package/src/components/DetailsList/DetailsList.d.ts

@@ -0,0 +1,17 @@
+import { ReactElement } from "react";
+interface DetailsListProps {
+    details: Array<string>;
+    className?: string;
+    density?: "compact" | "default";
+}
+/**
+ * Renders a one-line list of details separated by a Slash icon.
+ *
+ * @param {object} props - Component props.
+ * @param {string[]} props.details - Values to render.
+ * @param {string} [props.className] - Optional CSS class for customization.
+ * @param {"compact" | "default"} [props.density="default"] - Visual density of the list.
+ * @returns {ReactElement} The details list element.
+ */
+export declare const DetailsList: ({ details, className, density }: DetailsListProps) => ReactElement;
+export {};

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

@@ -0,0 +1,4 @@
+export declare const cvaDetailsList: (props?: ({
+    density?: "default" | "compact" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const cvaDetailsListItem: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;

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

@@ -0,0 +1,33 @@
+import { VariantProps } from "@trackunit/css-class-variance-utilities";
+import { MappedOmit } from "@trackunit/shared-utils";
+import { tailwindPalette, ThemeColors } from "@trackunit/ui-design-tokens";
+import { MouseEventHandler, ReactElement, ReactNode } 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"> {
+    /**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. */
+    description?: string | ReactElement<CommonProps>;
+    /**Tertiary information. Can be used for timestamps or other less important details. */
+    meta?: string;
+    /**Optional thumbnail for the ListItem. Can be used to display an image or icon. */
+    thumbnail?: ReactElement;
+    /**Makes the items interactive. Can be used to navigate to a different page when an item is clicked. */
+    onClick?: MouseEventHandler<HTMLDivElement>;
+    /**Details can be used to nest a component on the right side of the ListItem (can be used to display a tag, icon, highlight, text, etc.)   */
+    details?: ReactNode;
+    /**If an icon is chosen as thumbnail, use this to set the color of the icon. */
+    thumbnailColor?: `${ThemeColors}-${ThemeColorShades}` | `${ThemeColors}`;
+    /**If an icon is chosen as thumbnail, use this to set the background color of the icon. */
+    thumbnailBackground?: `${ThemeColors}-${ThemeColorShades}` | `${ThemeColors}`;
+}
+/**
+ *   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.
+ *
+ * @param { ListItemProps} props - The props for the ListItem component
+ * @returns {Element}  ListItem component
+ */
+export declare const ListItem: ({ className, dataTestId, onClick, details, title, description, meta, thumbnail, thumbnailColor, thumbnailBackground, }: ListItemProps) => ReactElement;
+export {};

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

@@ -0,0 +1,5 @@
+export declare const cvaListItem: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaMainInformationClass: (props?: ({
+    hasThumbnail?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const cvaThumbnailContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;

package/src/components/index.d.ts

@@ -6,6 +6,7 @@ export * from "./Card";
 export * from "./Collapse";
 export * from "./CompletionStatusIndicator/CompletionStatusIndicator";
 export * from "./CopyableText";
+export * from "./DetailsList/DetailsList";
 export * from "./EmptyState/EmptyState";
 export * from "./EmptyState/EmptyState.variants";
 export * from "./EmptyValue/EmptyValue";
@@ -16,6 +17,7 @@ export * from "./Icon/Icon";
 export * from "./Indicator";
 export * from "./KPI/KPI";
 export * from "./KPICard/KPICard";
+export * from "./ListItem/ListItem";
 export * from "./Menu";
 export * from "./Notice";
 export * from "./Page";