@trackunit/react-components 2.4.2-alpha-90b6c9b97dd.0 → 2.4.3-alpha-d785aff3531.0

package/index.cjs.js

@@ -5586,6 +5586,93 @@ const KPICardSkeleton = ({ hasIcon = false, hasTrends = false, hasValueBar = fal
     return (jsxRuntime.jsx(Card, { className: cvaKPICard({ className }), "data-testid": dataTestId, ref: ref, style: style, ...rest, children: jsxRuntime.jsxs(CardBody, { className: cvaKPICardBody(), gap: "none", padding: "none", children: [jsxRuntime.jsxs("div", { className: cvaKPICardHeader(), children: [jsxRuntime.jsx(KPISkeleton, { className: "p-0", "data-testid": dataTestId ? `${dataTestId}-kpi` : undefined }), hasIcon ? (jsxRuntime.jsx(SkeletonBlock, { "data-testid": dataTestId ? `${dataTestId}-icon-loading` : undefined, height: 28, width: 28 })) : null] }), hasTrends ? (jsxRuntime.jsx(SkeletonLabel, { "data-testid": dataTestId ? `${dataTestId}-trend-indicator-loading` : undefined, textSize: "text-xs", width: "100%" })) : null, hasValueBar ? (jsxRuntime.jsx(SkeletonLabel, { "data-testid": dataTestId ? `${dataTestId}-value-bar-loading` : undefined, textSize: "text-xs", width: "100%" })) : null, hasNotice ? (jsxRuntime.jsx(SkeletonLabel, { "data-testid": dataTestId ? `${dataTestId}-notice-loading` : undefined, textSize: "text-xs", width: "100%" })) : null, children] }) }));
 };
 
+const cvaLabeledValue = cssClassVarianceUtilities.cvaMerge(["flex", "text-sm"], {
+    variants: {
+        orientation: {
+            horizontal: ["flex-row", "items-start", "gap-6"],
+            vertical: ["flex-col"],
+        },
+    },
+    defaultVariants: {
+        orientation: "horizontal",
+    },
+});
+const cvaLabeledValueLabel = cssClassVarianceUtilities.cvaMerge(["font-medium", "text-neutral-500"], {
+    variants: {
+        orientation: {
+            horizontal: ["min-w-[40%]", "max-w-[40%]"],
+            vertical: ["mb-1"],
+        },
+    },
+    defaultVariants: {
+        orientation: "horizontal",
+    },
+});
+const cvaLabeledValueValue = cssClassVarianceUtilities.cvaMerge(["min-w-0", "font-medium", "text-neutral-900"]);
+const cvaLabeledValueList = cssClassVarianceUtilities.cvaMerge(["flex", "flex-col", "gap-4"]);
+const cvaLabeledValueTooltip = cssClassVarianceUtilities.cvaMerge(["ml-1", "inline-flex", "align-sub"]);
+
+/**
+ * LabeledValue displays a single piece of labeled information, pairing a descriptive label with its corresponding value.
+ * It provides a consistent way to present metadata, properties, or key details across cards, detail views, and side
+ * panels, making information easy to scan and compare.
+ *
+ * ### When to use
+ * Use LabeledValue to display a labelled value in a detail panel, card, or side panel. Compose several with `LabeledValueList`.
+ *
+ * ### When not to use
+ * Do not use LabeledValue for a slash-separated inline list of metadata — use `DetailsList` instead. Do not use for tabular data with many rows and columns — use a table.
+ *
+ * @example Side-by-side labeled value
+ * ```tsx
+ * import { LabeledValue } from "@trackunit/react-components";
+ *
+ * const Detail = () => <LabeledValue label="Model" value="CAT 320" />;
+ * ```
+ * @param {LabeledValueProps} props - The props for the LabeledValue component
+ * @returns {ReactElement} LabeledValue component
+ */
+const LabeledValue = ({ label, labelTooltip, value, orientation = "horizontal", className, "data-testid": dataTestId, style, ref, }) => {
+    const renderValue = () => {
+        const valueIsEmpty = value === null || value === undefined || value === "" || typeof value === "boolean";
+        if (valueIsEmpty) {
+            return jsxRuntime.jsx(EmptyValue, { "data-testid": dataTestId ? `${dataTestId}-empty` : undefined });
+        }
+        return value;
+    };
+    return (jsxRuntime.jsxs("div", { className: cvaLabeledValue({ className, orientation }), "data-testid": dataTestId, ref: ref, style: style, children: [jsxRuntime.jsxs("div", { className: cvaLabeledValueLabel({ orientation }), "data-testid": dataTestId ? `${dataTestId}-label` : undefined, children: [jsxRuntime.jsx("span", { children: label }), labelTooltip !== undefined ? jsxRuntime.jsx("span", { className: cvaLabeledValueTooltip(), children: labelTooltip }) : null] }), jsxRuntime.jsx("div", { className: cvaLabeledValueValue(), "data-testid": dataTestId ? `${dataTestId}-value` : undefined, children: renderValue() })] }));
+};
+
+/**
+ * LabeledValueList renders a configurable set of side-by-side `LabeledValue`s from a data array, laid out in a responsive grid.
+ * It is the data-driven counterpart to `LabeledValue`, suited to detail sections such as an asset-details or contract summary panel.
+ *
+ * ### When to use
+ * Use LabeledValueList to render a section of labelled values from data.
+ *
+ * ### When not to use
+ * Do not use LabeledValueList for a single pair — use `LabeledValue` directly.
+ *
+ * @example An asset-details section
+ * ```tsx
+ * import { LabeledValueList } from "@trackunit/react-components";
+ *
+ * const AssetDetails = () => (
+ *   <LabeledValueList
+ *     items={[
+ *       { label: "Model", value: "CAT 320" },
+ *       { label: "Serial number", value: "SN-00142" },
+ *     ]}
+ *   />
+ * );
+ * ```
+ * @param {LabeledValueListProps} props - The props for the LabeledValueList component
+ * @returns {ReactElement} LabeledValueList component
+ */
+const LabeledValueList = ({ items, orientation = "horizontal", className, "data-testid": dataTestId, style, ref, }) => {
+    return (jsxRuntime.jsx("div", { className: cvaLabeledValueList({ className }), "data-testid": dataTestId, ref: ref, style: style, children: items.map((item, index) => (jsxRuntime.jsx(LabeledValue, { orientation: orientation, ...item }, item["data-testid"] ?? `${item.label}-${index}`))) }));
+};
+
 const cvaListContainer = cssClassVarianceUtilities.cvaMerge(["overflow-y-auto", "overflow-x-hidden", "h-full"], {
     variants: {
         withTopSeparator: {
@@ -13386,6 +13473,8 @@ exports.KPI = KPI;
 exports.KPICard = KPICard;
 exports.KPICardSkeleton = KPICardSkeleton;
 exports.KPISkeleton = KPISkeleton;
+exports.LabeledValue = LabeledValue;
+exports.LabeledValueList = LabeledValueList;
 exports.List = List;
 exports.ListItem = ListItem;
 exports.MAX_HASH_LENGTH = MAX_HASH_LENGTH;

package/index.esm.js

@@ -5584,6 +5584,93 @@ const KPICardSkeleton = ({ hasIcon = false, hasTrends = false, hasValueBar = fal
     return (jsx(Card, { className: cvaKPICard({ className }), "data-testid": dataTestId, ref: ref, style: style, ...rest, children: jsxs(CardBody, { className: cvaKPICardBody(), gap: "none", padding: "none", children: [jsxs("div", { className: cvaKPICardHeader(), children: [jsx(KPISkeleton, { className: "p-0", "data-testid": dataTestId ? `${dataTestId}-kpi` : undefined }), hasIcon ? (jsx(SkeletonBlock, { "data-testid": dataTestId ? `${dataTestId}-icon-loading` : undefined, height: 28, width: 28 })) : null] }), hasTrends ? (jsx(SkeletonLabel, { "data-testid": dataTestId ? `${dataTestId}-trend-indicator-loading` : undefined, textSize: "text-xs", width: "100%" })) : null, hasValueBar ? (jsx(SkeletonLabel, { "data-testid": dataTestId ? `${dataTestId}-value-bar-loading` : undefined, textSize: "text-xs", width: "100%" })) : null, hasNotice ? (jsx(SkeletonLabel, { "data-testid": dataTestId ? `${dataTestId}-notice-loading` : undefined, textSize: "text-xs", width: "100%" })) : null, children] }) }));
 };
 
+const cvaLabeledValue = cvaMerge(["flex", "text-sm"], {
+    variants: {
+        orientation: {
+            horizontal: ["flex-row", "items-start", "gap-6"],
+            vertical: ["flex-col"],
+        },
+    },
+    defaultVariants: {
+        orientation: "horizontal",
+    },
+});
+const cvaLabeledValueLabel = cvaMerge(["font-medium", "text-neutral-500"], {
+    variants: {
+        orientation: {
+            horizontal: ["min-w-[40%]", "max-w-[40%]"],
+            vertical: ["mb-1"],
+        },
+    },
+    defaultVariants: {
+        orientation: "horizontal",
+    },
+});
+const cvaLabeledValueValue = cvaMerge(["min-w-0", "font-medium", "text-neutral-900"]);
+const cvaLabeledValueList = cvaMerge(["flex", "flex-col", "gap-4"]);
+const cvaLabeledValueTooltip = cvaMerge(["ml-1", "inline-flex", "align-sub"]);
+
+/**
+ * LabeledValue displays a single piece of labeled information, pairing a descriptive label with its corresponding value.
+ * It provides a consistent way to present metadata, properties, or key details across cards, detail views, and side
+ * panels, making information easy to scan and compare.
+ *
+ * ### When to use
+ * Use LabeledValue to display a labelled value in a detail panel, card, or side panel. Compose several with `LabeledValueList`.
+ *
+ * ### When not to use
+ * Do not use LabeledValue for a slash-separated inline list of metadata — use `DetailsList` instead. Do not use for tabular data with many rows and columns — use a table.
+ *
+ * @example Side-by-side labeled value
+ * ```tsx
+ * import { LabeledValue } from "@trackunit/react-components";
+ *
+ * const Detail = () => <LabeledValue label="Model" value="CAT 320" />;
+ * ```
+ * @param {LabeledValueProps} props - The props for the LabeledValue component
+ * @returns {ReactElement} LabeledValue component
+ */
+const LabeledValue = ({ label, labelTooltip, value, orientation = "horizontal", className, "data-testid": dataTestId, style, ref, }) => {
+    const renderValue = () => {
+        const valueIsEmpty = value === null || value === undefined || value === "" || typeof value === "boolean";
+        if (valueIsEmpty) {
+            return jsx(EmptyValue, { "data-testid": dataTestId ? `${dataTestId}-empty` : undefined });
+        }
+        return value;
+    };
+    return (jsxs("div", { className: cvaLabeledValue({ className, orientation }), "data-testid": dataTestId, ref: ref, style: style, children: [jsxs("div", { className: cvaLabeledValueLabel({ orientation }), "data-testid": dataTestId ? `${dataTestId}-label` : undefined, children: [jsx("span", { children: label }), labelTooltip !== undefined ? jsx("span", { className: cvaLabeledValueTooltip(), children: labelTooltip }) : null] }), jsx("div", { className: cvaLabeledValueValue(), "data-testid": dataTestId ? `${dataTestId}-value` : undefined, children: renderValue() })] }));
+};
+
+/**
+ * LabeledValueList renders a configurable set of side-by-side `LabeledValue`s from a data array, laid out in a responsive grid.
+ * It is the data-driven counterpart to `LabeledValue`, suited to detail sections such as an asset-details or contract summary panel.
+ *
+ * ### When to use
+ * Use LabeledValueList to render a section of labelled values from data.
+ *
+ * ### When not to use
+ * Do not use LabeledValueList for a single pair — use `LabeledValue` directly.
+ *
+ * @example An asset-details section
+ * ```tsx
+ * import { LabeledValueList } from "@trackunit/react-components";
+ *
+ * const AssetDetails = () => (
+ *   <LabeledValueList
+ *     items={[
+ *       { label: "Model", value: "CAT 320" },
+ *       { label: "Serial number", value: "SN-00142" },
+ *     ]}
+ *   />
+ * );
+ * ```
+ * @param {LabeledValueListProps} props - The props for the LabeledValueList component
+ * @returns {ReactElement} LabeledValueList component
+ */
+const LabeledValueList = ({ items, orientation = "horizontal", className, "data-testid": dataTestId, style, ref, }) => {
+    return (jsx("div", { className: cvaLabeledValueList({ className }), "data-testid": dataTestId, ref: ref, style: style, children: items.map((item, index) => (jsx(LabeledValue, { orientation: orientation, ...item }, item["data-testid"] ?? `${item.label}-${index}`))) }));
+};
+
 const cvaListContainer = cvaMerge(["overflow-y-auto", "overflow-x-hidden", "h-full"], {
     variants: {
         withTopSeparator: {
@@ -13357,4 +13444,4 @@ const useWindowActivity = ({ onFocus, onBlur, skip = false } = { onBlur: undefin
  */
 setupLibraryTranslations();
 
-export { Alert, Badge, Breadcrumb, Button, Card, CardBody, CardFooter, CardHeader, Collapse, CompletionStatusIndicator, CopyableText, DEFAULT_SKELETON_PREFERENCE_CARD_PROPS, DetailsList, EmptyState, EmptyValue, ExternalLink, GridAreas, Heading, Highlight, HorizontalOverflowScroller, Icon, IconButton, Indicator, KPI, KPICard, KPICardSkeleton, KPISkeleton, List, ListItem, MAX_HASH_LENGTH, MAX_URL_LENGTH, MenuDivider, MenuItem, MenuList, MoreMenu, Notice, PackageNameStoryComponent, Page, PageContent, PageHeader, PageHeaderKpiMetrics, PageHeaderSecondaryActions, PageHeaderTitle, Pagination, Polygon, Popover, PopoverContent, PopoverTitle, PopoverTrigger, Portal, PreferenceCard, PreferenceCardSkeleton, Prompt, ROLE_CARD, SHEET_TRANSITION_DURATION, SHEET_TRANSITION_DURATION_MS, SHEET_TRANSITION_EASING, SectionHeader, SegmentedValueBar, Sheet, Sidebar, SkeletonBlock, SkeletonLabel, SkeletonLines, Spacer, Spinner, StarButton, Tab, TabContent, TabList, Tabs, Tag, Text, ToggleGroup, Tooltip, TrendIndicator, TrendIndicators, ValueBar, ZStack, createGrid, cvaButton, cvaButtonPrefixSuffix, cvaButtonSpinner, cvaButtonSpinnerContainer, cvaClickable, cvaContainerStyles, cvaContentContainer, cvaContentWrapper, cvaDescriptionCard, cvaIconBackground, cvaIconButton, cvaImgStyles, cvaIndicator, cvaIndicatorIcon, cvaIndicatorIconBackground, cvaIndicatorLabel, cvaIndicatorPing, cvaInputContainer, cvaInteractableItem, cvaList, cvaListContainer, cvaListItem$1 as cvaListItem, cvaMenu, cvaMenuItem, cvaMenuItemLabel, cvaMenuItemPrefix, cvaMenuItemStyle, cvaMenuItemSuffix, cvaMenuList, cvaMenuListDivider, cvaMenuListItem, cvaMenuListMultiSelect, cvaPageHeader, cvaPageHeaderContainer, cvaPageHeaderHeading, cvaPreferenceCard, cvaTitleCard, cvaToggleGroup, cvaToggleGroupWithSlidingBackground, cvaToggleItem, cvaToggleItemContent, cvaToggleItemText, cvaZStackContainer, cvaZStackItem, defaultPageSize, docs, getDevicePixelRatio, getValueBarColorByValue, iconColorNames, iconPalette, noPagination, preferenceCardGrid, storageSerializer, useBidirectionalScroll, useClickOutside, useContainerBreakpoints, useContinuousTimeout, useCopyToClipboard, useCursorUrlSync, useCustomEncoding, useDebounce, useDevicePixelRatio, useElevatedReducer, useElevatedState, useGridAreas, useHashParamSync, useHover, useInfiniteScroll, useIsFirstRender, useIsFullscreen, useIsTextTruncated, useKeyboardShortcut, useList, useListItemHeight, useLocalStorage, useLocalStorageReducer, useMeasure, useMergeRefs, useModifierKey, useOverflowBorder, useOverflowItems, usePersistedState, usePopoverContext, usePrevious, usePrompt, useRandomCSSLengths, useRelayPagination, useResize, useScrollBlock, useScrollDetection, useSearchParamSync, useSelfUpdatingRef, useSessionStorage, useSessionStorageReducer, useSheet, useSheetSnap, useStorageKey, useTextSearch, useTimeout, useViewportBreakpoints, useWatch, useWindowActivity };
+export { Alert, Badge, Breadcrumb, Button, Card, CardBody, CardFooter, CardHeader, Collapse, CompletionStatusIndicator, CopyableText, DEFAULT_SKELETON_PREFERENCE_CARD_PROPS, DetailsList, EmptyState, EmptyValue, ExternalLink, GridAreas, Heading, Highlight, HorizontalOverflowScroller, Icon, IconButton, Indicator, KPI, KPICard, KPICardSkeleton, KPISkeleton, LabeledValue, LabeledValueList, List, ListItem, MAX_HASH_LENGTH, MAX_URL_LENGTH, MenuDivider, MenuItem, MenuList, MoreMenu, Notice, PackageNameStoryComponent, Page, PageContent, PageHeader, PageHeaderKpiMetrics, PageHeaderSecondaryActions, PageHeaderTitle, Pagination, Polygon, Popover, PopoverContent, PopoverTitle, PopoverTrigger, Portal, PreferenceCard, PreferenceCardSkeleton, Prompt, ROLE_CARD, SHEET_TRANSITION_DURATION, SHEET_TRANSITION_DURATION_MS, SHEET_TRANSITION_EASING, SectionHeader, SegmentedValueBar, Sheet, Sidebar, SkeletonBlock, SkeletonLabel, SkeletonLines, Spacer, Spinner, StarButton, Tab, TabContent, TabList, Tabs, Tag, Text, ToggleGroup, Tooltip, TrendIndicator, TrendIndicators, ValueBar, ZStack, createGrid, cvaButton, cvaButtonPrefixSuffix, cvaButtonSpinner, cvaButtonSpinnerContainer, cvaClickable, cvaContainerStyles, cvaContentContainer, cvaContentWrapper, cvaDescriptionCard, cvaIconBackground, cvaIconButton, cvaImgStyles, cvaIndicator, cvaIndicatorIcon, cvaIndicatorIconBackground, cvaIndicatorLabel, cvaIndicatorPing, cvaInputContainer, cvaInteractableItem, cvaList, cvaListContainer, cvaListItem$1 as cvaListItem, cvaMenu, cvaMenuItem, cvaMenuItemLabel, cvaMenuItemPrefix, cvaMenuItemStyle, cvaMenuItemSuffix, cvaMenuList, cvaMenuListDivider, cvaMenuListItem, cvaMenuListMultiSelect, cvaPageHeader, cvaPageHeaderContainer, cvaPageHeaderHeading, cvaPreferenceCard, cvaTitleCard, cvaToggleGroup, cvaToggleGroupWithSlidingBackground, cvaToggleItem, cvaToggleItemContent, cvaToggleItemText, cvaZStackContainer, cvaZStackItem, defaultPageSize, docs, getDevicePixelRatio, getValueBarColorByValue, iconColorNames, iconPalette, noPagination, preferenceCardGrid, storageSerializer, useBidirectionalScroll, useClickOutside, useContainerBreakpoints, useContinuousTimeout, useCopyToClipboard, useCursorUrlSync, useCustomEncoding, useDebounce, useDevicePixelRatio, useElevatedReducer, useElevatedState, useGridAreas, useHashParamSync, useHover, useInfiniteScroll, useIsFirstRender, useIsFullscreen, useIsTextTruncated, useKeyboardShortcut, useList, useListItemHeight, useLocalStorage, useLocalStorageReducer, useMeasure, useMergeRefs, useModifierKey, useOverflowBorder, useOverflowItems, usePersistedState, usePopoverContext, usePrevious, usePrompt, useRandomCSSLengths, useRelayPagination, useResize, useScrollBlock, useScrollDetection, useSearchParamSync, useSelfUpdatingRef, useSessionStorage, useSessionStorageReducer, useSheet, useSheetSnap, useStorageKey, useTextSearch, useTimeout, useViewportBreakpoints, useWatch, useWindowActivity };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "2.4.2-alpha-90b6c9b97dd.0",
+  "version": "2.4.3-alpha-d785aff3531.0",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "migrations": "./migrations.json",
@@ -14,17 +14,17 @@
     "@floating-ui/react": "^0.26.25",
     "string-ts": "^2.0.0",
     "tailwind-merge": "^2.0.0",
-    "@trackunit/ui-design-tokens": "1.13.91-alpha-90b6c9b97dd.0",
-    "@trackunit/css-class-variance-utilities": "1.13.92-alpha-90b6c9b97dd.0",
-    "@trackunit/shared-utils": "1.15.95-alpha-90b6c9b97dd.0",
-    "@trackunit/ui-icons": "1.13.93-alpha-90b6c9b97dd.0",
+    "@trackunit/ui-design-tokens": "1.13.92-alpha-d785aff3531.0",
+    "@trackunit/css-class-variance-utilities": "1.13.93-alpha-d785aff3531.0",
+    "@trackunit/shared-utils": "1.15.96-alpha-d785aff3531.0",
+    "@trackunit/ui-icons": "1.13.94-alpha-d785aff3531.0",
     "es-toolkit": "^1.39.10",
     "@tanstack/react-virtual": "^3.14.3",
     "dequal": "^2.0.3",
     "fflate": "^0.8.2",
     "superjson": "^2.2.6",
     "zod": "^3.25.76",
-    "@trackunit/i18n-library-translation": "2.2.7-alpha-90b6c9b97dd.0"
+    "@trackunit/i18n-library-translation": "2.2.8-alpha-d785aff3531.0"
   },
   "peerDependencies": {
     "react": "^19.0.0",

package/src/components/Card/Card.d.ts

@@ -1,9 +1,9 @@
-import { InputHTMLAttributes, MouseEventHandler, ReactElement, ReactNode } from "react";
+import { HTMLAttributes, MouseEventHandler, ReactElement, ReactNode } from "react";
 import { CommonProps } from "../../common/CommonProps";
-import type { Styleable } from "../../common/Styleable";
 import { Refable } from "../../common/Refable";
+import type { Styleable } from "../../common/Styleable";
 export declare const ROLE_CARD = "region";
-export interface CardProps extends CommonProps, Styleable, Refable<HTMLDivElement>, InputHTMLAttributes<HTMLDivElement> {
+export interface CardProps extends CommonProps, Styleable, Refable<HTMLDivElement>, HTMLAttributes<HTMLDivElement> {
     /**
      * Whether the card should have full height or not.
      */

package/src/components/LabeledValue/LabeledValue.d.ts

@@ -0,0 +1,45 @@
+import { ReactElement, ReactNode } from "react";
+import { CommonProps } from "../../common/CommonProps";
+import { Refable } from "../../common/Refable";
+import type { Styleable } from "../../common/Styleable";
+export type LabeledValueOrientation = "horizontal" | "vertical";
+export interface LabeledValueProps extends CommonProps, Styleable, Refable<HTMLDivElement> {
+    /**
+     * The label (the "key" of the key/value pair).
+     */
+    label: string;
+    /**
+     * Optional content rendered next to the label, typically a help `Tooltip` describing the field.
+     */
+    labelTooltip?: ReactNode;
+    /**
+     * The value shown. Renders an `EmptyValue` dash when null, undefined, an empty string, or a
+     * boolean (booleans are not directly renderable — format them to a string before passing).
+     */
+    value?: ReactNode;
+    /**
+     * Layout of the pair. `horizontal` (default) renders label and value side-by-side; `vertical` stacks the value under the label.
+     */
+    orientation?: LabeledValueOrientation;
+}
+/**
+ * LabeledValue displays a single piece of labeled information, pairing a descriptive label with its corresponding value.
+ * It provides a consistent way to present metadata, properties, or key details across cards, detail views, and side
+ * panels, making information easy to scan and compare.
+ *
+ * ### When to use
+ * Use LabeledValue to display a labelled value in a detail panel, card, or side panel. Compose several with `LabeledValueList`.
+ *
+ * ### When not to use
+ * Do not use LabeledValue for a slash-separated inline list of metadata — use `DetailsList` instead. Do not use for tabular data with many rows and columns — use a table.
+ *
+ * @example Side-by-side labeled value
+ * ```tsx
+ * import { LabeledValue } from "@trackunit/react-components";
+ *
+ * const Detail = () => <LabeledValue label="Model" value="CAT 320" />;
+ * ```
+ * @param {LabeledValueProps} props - The props for the LabeledValue component
+ * @returns {ReactElement} LabeledValue component
+ */
+export declare const LabeledValue: ({ label, labelTooltip, value, orientation, className, "data-testid": dataTestId, style, ref, }: LabeledValueProps) => ReactElement;

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

@@ -0,0 +1,9 @@
+export declare const cvaLabeledValue: (props?: ({
+    orientation?: "horizontal" | "vertical" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const cvaLabeledValueLabel: (props?: ({
+    orientation?: "horizontal" | "vertical" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const cvaLabeledValueValue: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const cvaLabeledValueList: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const cvaLabeledValueTooltip: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;

package/src/components/LabeledValue/LabeledValueList.d.ts

@@ -0,0 +1,42 @@
+import { ReactElement } from "react";
+import { CommonProps } from "../../common/CommonProps";
+import { Refable } from "../../common/Refable";
+import type { Styleable } from "../../common/Styleable";
+import { LabeledValueOrientation, LabeledValueProps } from "./LabeledValue";
+export interface LabeledValueListProps extends CommonProps, Styleable, Refable<HTMLDivElement> {
+    /**
+     * The labeled values to render. Each item accepts the full `LabeledValue` props.
+     */
+    items: Array<LabeledValueProps>;
+    /**
+     * Layout of each pair, forwarded to every `LabeledValue` (unless the item sets its own). Defaults to `horizontal`.
+     */
+    orientation?: LabeledValueOrientation;
+}
+/**
+ * LabeledValueList renders a configurable set of side-by-side `LabeledValue`s from a data array, laid out in a responsive grid.
+ * It is the data-driven counterpart to `LabeledValue`, suited to detail sections such as an asset-details or contract summary panel.
+ *
+ * ### When to use
+ * Use LabeledValueList to render a section of labelled values from data.
+ *
+ * ### When not to use
+ * Do not use LabeledValueList for a single pair — use `LabeledValue` directly.
+ *
+ * @example An asset-details section
+ * ```tsx
+ * import { LabeledValueList } from "@trackunit/react-components";
+ *
+ * const AssetDetails = () => (
+ *   <LabeledValueList
+ *     items={[
+ *       { label: "Model", value: "CAT 320" },
+ *       { label: "Serial number", value: "SN-00142" },
+ *     ]}
+ *   />
+ * );
+ * ```
+ * @param {LabeledValueListProps} props - The props for the LabeledValueList component
+ * @returns {ReactElement} LabeledValueList component
+ */
+export declare const LabeledValueList: ({ items, orientation, className, "data-testid": dataTestId, style, ref, }: LabeledValueListProps) => ReactElement;

package/src/index.d.ts

@@ -44,6 +44,8 @@ export * from "./components/KPICard/components/TrendIndicator/TrendIndicator";
 export * from "./components/KPICard/components/TrendIndicators";
 export * from "./components/KPICard/KPICard";
 export * from "./components/KPICard/KPICardSkeleton";
+export * from "./components/LabeledValue/LabeledValue";
+export * from "./components/LabeledValue/LabeledValueList";
 export * from "./components/List/List";
 export * from "./components/List/List.variants";
 export * from "./components/List/useList";