@trackunit/react-components 3.1.7 → 3.2.0

package/src/components/AssetIdentity/IdentityCardSkeleton.d.ts

@@ -0,0 +1,95 @@
+import { ReactElement } from "react";
+import { CommonProps } from "../../common/CommonProps";
+import { Refable } from "../../common/Refable";
+import type { Styleable } from "../../common/Styleable";
+export interface IdentityCardSkeletonProps extends CommonProps, Styleable, Refable<HTMLDivElement> {
+    /**
+     * When true, renders an image slot with a size-matched skeleton block. The
+     * slot's height tracks the rendered text stack at a 14:9 aspect ratio
+     * (168/108, matching `AssetPageHeader`) — same measurement approach as
+     * the loaded `IdentityCard` so the skeleton → loaded transition doesn't
+     * jump.
+     *
+     * Mutually exclusive with `hasThumbnail` — `hasImage` wins if both
+     * are true (mirrors the loaded card's slot precedence).
+     *
+     * @default false
+     */
+    hasImage?: boolean;
+    /**
+     * When true, renders a 44×44 rounded-md skeleton badge in the thumbnail
+     * slot — the loading counterpart to the loaded card's `thumbnail` prop.
+     * Use for non-asset entities (sites, customers, users, …).
+     *
+     * Mutually exclusive with `hasImage` — `hasImage` wins if both are true.
+     *
+     * @default false
+     */
+    hasThumbnail?: boolean;
+    /**
+     * When true, renders a subtitle skeleton line under the title. Kept on by
+     * default so `<IdentityCardSkeleton />` with no props renders the
+     * canonical compact identity card shape (title + subtitle).
+     *
+     * @default true
+     */
+    hasSubtitle?: boolean;
+    /**
+     * When true, renders a status-row skeleton (two chip placeholders) under
+     * the identity group.
+     *
+     * @default false
+     */
+    hasStatusIndicators?: boolean;
+    /**
+     * When true, renders a right-side connectivity skeleton on the title row.
+     *
+     * @default false
+     */
+    hasConnectivity?: boolean;
+    /**
+     * When true, renders the same right-side `ChevronRight` as a clickable
+     * `IdentityCard` — the icon is known up front, so it is not skeletoned.
+     * Keeps the skeleton → loaded transition from jumping.
+     *
+     * @default false
+     */
+    hasChevron?: boolean;
+}
+/**
+ * IdentityCardSkeleton is the loading placeholder paired with
+ * `IdentityCard`. It renders per-slot skeleton blocks (title +
+ * optional subtitle / status indicators / image / thumbnail / connectivity)
+ * inside the same `Card` shell so the skeleton → loaded
+ * transition is visually stable. When `hasChevron` is on, the real
+ * `ChevronRight` is shown — that icon does not depend on loaded data.
+ *
+ * The slot toggles (`hasImage`, `hasThumbnail`, `hasSubtitle`,
+ * `hasStatusIndicators`, `hasConnectivity`, `hasChevron`) are the skeleton
+ * counterparts to the loaded `IdentityCard`'s slot props / `onClick` —
+ * flip on the slots you'll render once the data resolves.
+ *
+ * ### When to use
+ * Use `IdentityCardSkeleton` in place of `IdentityCard` while
+ * the referenced entity's data is being fetched.
+ *
+ * ### When not to use
+ * Do not use for generic text loading — use `SkeletonLabel` /
+ * `SkeletonBlock` directly. Do not use to represent partial data (some
+ * fields loaded, others not); render `IdentityCard` with the fields
+ * you have and omit the rest.
+ *
+ * @example Compact card (title + subtitle)
+ * ```tsx
+ * import { IdentityCardSkeleton } from "@trackunit/react-components";
+ *
+ * const Loading = () => <IdentityCardSkeleton />;
+ * ```
+ * @example Clickable card with image + status + connectivity
+ * ```tsx
+ * <IdentityCardSkeleton hasImage hasStatusIndicators hasConnectivity hasChevron />
+ * ```
+ * @param {IdentityCardSkeletonProps} props - The props for the IdentityCardSkeleton component
+ * @returns {ReactElement} IdentityCardSkeleton component
+ */
+export declare const IdentityCardSkeleton: ({ hasImage, hasThumbnail, hasSubtitle, hasStatusIndicators, hasConnectivity, hasChevron, className, "data-testid": dataTestId, style, ref, }: IdentityCardSkeletonProps) => ReactElement;

package/src/components/AssetIdentity/useIdentityImageSize.d.ts

@@ -0,0 +1,32 @@
+import { type RefCallback } from "react";
+export declare const IDENTITY_MIN_IMAGE_HEIGHT_PX = 44;
+export declare const IDENTITY_IMAGE_ASPECT_RATIO: number;
+export type IdentityImageSize = {
+    readonly height: number;
+    readonly width: number;
+};
+export type IdentityImageSizeResult = {
+    readonly imageSize: IdentityImageSize | null;
+    readonly textStackRef: RefCallback<HTMLDivElement>;
+};
+/**
+ * Measures the rendered text-stack height and returns matching image
+ * dimensions at a 14:9 (168/108) aspect ratio, clamped to the identity
+ * minimum so title-only identities keep a reasonable image footprint. Kept
+ * as a shared hook so the loaded `IdentityCard` and its `IdentityCardSkeleton`
+ * cannot drift out of sync — the skeleton → loaded transition would jump
+ * if the two measurements diverged.
+ *
+ * Measured in `useLayoutEffect` so the image slot is sized before the
+ * browser paints. `useMeasure` is the usual choice here, but it observes
+ * in `useEffect` (after paint), which would flash the unsized
+ * `aspect-[14/9]` fallback for a frame.
+ *
+ * Attach `textStackRef` to the text-stack container; subsequent layout
+ * changes (title text, subtitle wrap, status row toggling on/off)
+ * re-measure automatically.
+ *
+ * @param enabled - When false, the hook is inert (no measurement). Use this
+ *   to gate on `showImage` / `hasImage`.
+ */
+export declare const useIdentityImageSize: (enabled: boolean) => IdentityImageSizeResult;

package/src/components/Indicator/Indicator.d.ts

@@ -1,8 +1,8 @@
 import { ActivityColors, CriticalityColors, GeneralColors, IntentColors, RentalStatusColors, SitesColors, UtilizationColors } from "@trackunit/ui-design-tokens";
-import { ReactElement } from "react";
+import { 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 interface IndicatorProps extends CommonProps, Styleable, Refable<HTMLDivElement> {
     /**
      * The icon to be rendered inside the indicator component
@@ -21,9 +21,9 @@ export interface IndicatorProps extends CommonProps, Styleable, Refable<HTMLDivE
      */
     weight?: "normal" | "medium";
     /**
-     * A text label to be displayed next to the indicator
+     * Content displayed next to the indicator. String labels are capitalized; custom content retains its own casing.
      */
-    label?: string;
+    label?: ReactNode;
     /**
      * A boolean parameter to display or hide icon background, default value is true
      */

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

@@ -11,8 +11,11 @@ export declare const cvaIndicatorIcon: import("cva").CVAComponent<Omit<{
     defaultVariants: Omit<{}, never>;
 }, unknown>;
 export declare const cvaIndicatorLabel: import("cva").CVAComponent<Omit<{
-    base: string[];
     variants: {
+        content: {
+            text: string;
+            custom: null;
+        };
         size: {
             small: string;
             medium: string;
@@ -27,12 +30,17 @@ export declare const cvaIndicatorLabel: import("cva").CVAComponent<Omit<{
         };
     };
     defaultVariants: {
+        content: "text";
         size: "medium";
         weight: "medium";
         background: "visible";
     };
 }, "defaultVariants"> & {
     variants: {
+        content: {
+            text: string;
+            custom: null;
+        };
         size: {
             small: string;
             medium: string;
@@ -46,12 +54,17 @@ export declare const cvaIndicatorLabel: import("cva").CVAComponent<Omit<{
             hidden: string;
         };
     };
-    defaultVariants: Omit<{}, "size" | "weight" | "background"> & {
+    defaultVariants: Omit<{}, "content" | "size" | "weight" | "background"> & {
+        content: "text";
         size: "medium";
         weight: "medium";
         background: "visible";
     };
 }, {
+    content: {
+        text: string;
+        custom: null;
+    };
     size: {
         small: string;
         medium: string;

package/src/index.d.ts

@@ -7,6 +7,8 @@ export * from "./common/Size";
 export * from "./common/StorybookProps";
 export type { Styleable } from "./common/Styleable";
 export * from "./components/Alert/Alert";
+export * from "./components/AssetIdentity/IdentityCard";
+export * from "./components/AssetIdentity/IdentityCardSkeleton";
 export * from "./components/Badge/Badge";
 export * from "./components/Breadcrumb/Breadcrumb";
 export * from "./components/buttons/Button/Button";