@trackunit/react-components 1.17.16 → 1.17.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "1.17.16",
+  "version": "1.17.20",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -14,10 +14,10 @@
     "@floating-ui/react": "^0.26.25",
     "string-ts": "^2.0.0",
     "tailwind-merge": "^2.0.0",
-    "@trackunit/ui-design-tokens": "1.11.42",
-    "@trackunit/css-class-variance-utilities": "1.11.42",
-    "@trackunit/shared-utils": "1.13.42",
-    "@trackunit/ui-icons": "1.11.41",
+    "@trackunit/ui-design-tokens": "1.11.43",
+    "@trackunit/css-class-variance-utilities": "1.11.43",
+    "@trackunit/shared-utils": "1.13.43",
+    "@trackunit/ui-icons": "1.11.42",
     "@tanstack/react-router": "1.114.29",
     "es-toolkit": "^1.39.10",
     "@tanstack/react-virtual": "3.13.12",

package/src/common/Refable.d.ts

@@ -0,0 +1,5 @@
+import { Ref } from "react";
+export interface Refable<TElement extends Element = HTMLElement> {
+    /** Ref forwarded to the root DOM element */
+    ref?: Ref<TElement>;
+}

package/src/components/Alert/Alert.d.ts

@@ -1,5 +1,6 @@
 import { MouseEventHandler, ReactElement, ReactNode } from "react";
 import { CommonProps } from "../../common/CommonProps";
+import { Refable } from "../../common/Refable";
 export type AlertColors = "info" | "success" | "warning" | "danger" | "neutral";
 export type AlertActionType = "primary" | "secondary";
 export type AlertAction = {
@@ -7,7 +8,7 @@ export type AlertAction = {
     onClick: MouseEventHandler<HTMLButtonElement>;
     loading?: boolean;
 };
-export interface AlertProps extends CommonProps {
+export interface AlertProps extends CommonProps, Refable<HTMLDivElement> {
     /**
      * Child nodes.
      */
@@ -108,4 +109,4 @@ export interface AlertProps extends CommonProps {
  * @param {AlertProps} props - The props for the Alert component
  * @returns {ReactElement} Alert component
  */
-export declare const Alert: ({ color, title, className, children, primaryAction, secondaryAction, onClickClose, "data-testid": dataTestId, autoScroll, actionsInline, }: AlertProps) => ReactElement;
+export declare const Alert: ({ color, title, className, children, primaryAction, secondaryAction, onClickClose, "data-testid": dataTestId, autoScroll, actionsInline, ref, }: AlertProps) => ReactElement;

package/src/components/Badge/Badge.d.ts

@@ -1,9 +1,10 @@
 import { ThemeColors } from "@trackunit/ui-design-tokens";
 import { ReactElement } from "react";
 import { CommonProps } from "../../common/CommonProps";
+import { Refable } from "../../common/Refable";
 type BadgeColors = Extract<ThemeColors, "primary" | "danger" | "warning" | "neutral">;
 type BadgeSize = "default" | "condensed";
-interface BaseBadgeProps extends CommonProps {
+interface BaseBadgeProps extends CommonProps, Refable<HTMLSpanElement> {
     /**
      * The color of the badge.
      */
@@ -69,5 +70,5 @@ export type BadgeProps = BaseBadgeProps;
  * @param {BadgeProps} props - The props for the Badge component
  * @returns {ReactElement} Badge component
  */
-export declare const Badge: ({ color, size, compact, className, count, max, hideZero, "data-testid": dataTestId, }: BadgeProps) => ReactElement | null;
+export declare const Badge: ({ color, size, compact, className, count, max, hideZero, "data-testid": dataTestId, ref, }: BadgeProps) => ReactElement | null;
 export {};

package/src/components/Breadcrumb/Breadcrumb.d.ts

@@ -36,7 +36,7 @@ import { BreadcrumbContainerProps, BreadcrumbProps } from "./utils/types";
  * @param {BreadcrumbProps} props - The props for the Breadcrumb component
  * @returns {ReactElement} Breadcrumb component
  */
-export declare const Breadcrumb: ({ className, "data-testid": dataTestId, breadcrumbItems, onClickBack, }: BreadcrumbProps) => ReactElement;
+export declare const Breadcrumb: ({ className, "data-testid": dataTestId, breadcrumbItems, onClickBack, ref, }: BreadcrumbProps) => ReactElement;
 /**
  * BreadcrumbContainer is a helper component that renders the breadcrumb items based on the screen size.
  *

package/src/components/Breadcrumb/utils/types.d.ts

@@ -1,12 +1,13 @@
 import { MouseEventHandler, ReactElement } from "react";
 import { CommonProps } from "../../../common/CommonProps";
+import { Refable } from "../../../common/Refable";
 export interface BreadcrumbItemProps {
     /** The display text for this breadcrumb item. */
     label: string;
     /** The route path this breadcrumb item links to. */
     to: string;
 }
-export interface BreadcrumbProps extends CommonProps {
+export interface BreadcrumbProps extends CommonProps, Refable<HTMLDivElement> {
     /**
      * The ordered list of breadcrumb items representing the navigation hierarchy.
      * The last item is rendered as plain text (the current page), all preceding items are rendered as clickable links.

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

@@ -1,7 +1,8 @@
-import { InputHTMLAttributes, MouseEventHandler, ReactNode } from "react";
+import { InputHTMLAttributes, MouseEventHandler, ReactElement, ReactNode } from "react";
 import { CommonProps } from "../../common/CommonProps";
+import { Refable } from "../../common/Refable";
 export declare const ROLE_CARD = "region";
-export interface CardProps extends CommonProps, InputHTMLAttributes<HTMLDivElement> {
+export interface CardProps extends CommonProps, Refable<HTMLDivElement>, InputHTMLAttributes<HTMLDivElement> {
     /**
      * Whether the card should have full height or not.
      */
@@ -70,4 +71,7 @@ export interface CardProps extends CommonProps, InputHTMLAttributes<HTMLDivEleme
  * @param {CardProps} props - The props for the Card component
  * @returns {ReactElement} Card component
  */
-export declare const Card: import("react").ForwardRefExoticComponent<CardProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const Card: {
+    ({ children, onClick, fullHeight, onMouseEnter, onMouseLeave, className, "data-testid": dataTestId, ref, ...rest }: CardProps): ReactElement;
+    displayName: string;
+};

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

@@ -1,6 +1,7 @@
 import { ReactElement, ReactNode } from "react";
 import { CommonProps } from "../../common/CommonProps";
-export interface CardBodyProps extends CommonProps {
+import { Refable } from "../../common/Refable";
+export interface CardBodyProps extends CommonProps, Refable<HTMLDivElement> {
     /**
      * Sets flex direction
      */
@@ -30,4 +31,4 @@ export interface CardBodyProps extends CommonProps {
  * @param {CardBodyProps} props - The props for the CardBody component
  * @returns {ReactElement} CardBody component
  */
-export declare const CardBody: ({ children, "data-testid": dataTestId, className, direction, gap, padding, id, }: CardBodyProps) => ReactElement;
+export declare const CardBody: ({ children, "data-testid": dataTestId, className, direction, gap, padding, id, ref, }: CardBodyProps) => ReactElement;

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

@@ -1,6 +1,7 @@
 import { ReactElement, ReactNode } from "react";
 import { CommonProps } from "../../common/CommonProps";
-export interface CardFooterProps extends CommonProps {
+import { Refable } from "../../common/Refable";
+export interface CardFooterProps extends CommonProps, Refable<HTMLDivElement> {
     /**
      * Element to render in the footer
      */
@@ -22,4 +23,4 @@ export interface CardFooterProps extends CommonProps {
  * @param {CardFooterProps} props - The props for the CardFooter component
  * @returns {ReactElement} CardFooter component
  */
-export declare const CardFooter: ({ "data-testid": dataTestId, className, children, padding, hideSeparator, }: CardFooterProps) => ReactElement;
+export declare const CardFooter: ({ "data-testid": dataTestId, className, children, padding, hideSeparator, ref, }: CardFooterProps) => ReactElement;

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

@@ -1,7 +1,8 @@
 import { MouseEventHandler, ReactElement, ReactNode } from "react";
 import { CommonProps } from "../../common/CommonProps";
+import { Refable } from "../../common/Refable";
 import { HeadingVariant } from "../Heading/Heading";
-export interface CardHeaderProps extends CommonProps {
+export interface CardHeaderProps extends CommonProps, Refable<HTMLDivElement> {
     /**
      * The text to show in the Cards main heading
      */
@@ -47,4 +48,4 @@ export interface CardHeaderProps extends CommonProps {
  * @param {CardHeaderProps} props - The props for the CardHeader component
  * @returns {ReactElement} CardHeader component
  */
-export declare const CardHeader: ({ heading, headingVariant, subHeading, onClickClose, "data-testid": dataTestId, className, children, accessories, actions, padding, hideSeparator, }: CardHeaderProps) => ReactElement;
+export declare const CardHeader: ({ heading, headingVariant, subHeading, onClickClose, "data-testid": dataTestId, className, children, accessories, actions, padding, hideSeparator, ref, }: CardHeaderProps) => ReactElement;

package/src/components/Collapse/Collapse.d.ts

@@ -1,6 +1,7 @@
 import { MouseEvent, ReactElement, ReactNode } from "react";
 import { CommonProps } from "../../common/CommonProps";
-export interface CollapseProps extends CommonProps {
+import { Refable } from "../../common/Refable";
+export interface CollapseProps extends CommonProps, Refable<HTMLDivElement> {
     id: string;
     /**
      * Visual variant of the collapse component.
@@ -83,4 +84,4 @@ export interface CollapseProps extends CommonProps {
  * @param {CollapseProps} props - The props for the Collapse component
  * @returns {ReactElement} Collapse component
  */
-export declare const Collapse: ({ id, variant, initialExpanded, onToggle, label, children, className, headerClassName, headerAddon, "data-testid": dataTestId, animate, extraPadding, }: CollapseProps) => ReactElement;
+export declare const Collapse: ({ id, variant, initialExpanded, onToggle, label, children, className, headerClassName, headerAddon, "data-testid": dataTestId, animate, extraPadding, ref, }: CollapseProps) => ReactElement;

package/src/components/CopyableText/CopyableText.d.ts

@@ -1,6 +1,7 @@
 import { ReactElement } from "react";
 import { CommonProps } from "../../common/CommonProps";
-export interface CopyableTextProps extends CommonProps {
+import { Refable } from "../../common/Refable";
+export interface CopyableTextProps extends CommonProps, Refable<HTMLSpanElement> {
     /**
      * The text shown in the ui.
      * By default this is also the text that gets copied when component is clicked.
@@ -18,4 +19,4 @@ export interface CopyableTextProps extends CommonProps {
  * @param {CopyableTextProps} props - The props for the CopyableText component
  * @returns {ReactElement} CopyableText component
  */
-export declare const CopyableText: ({ text, alternativeText, "data-testid": dataTestId, className, }: CopyableTextProps) => ReactElement;
+export declare const CopyableText: ({ text, alternativeText, "data-testid": dataTestId, className, ref, }: CopyableTextProps) => ReactElement;

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

@@ -1,5 +1,6 @@
 import { ReactElement } from "react";
-interface DetailsListProps {
+import { Refable } from "../../common/Refable";
+interface DetailsListProps extends Refable<HTMLDivElement> {
     details: Array<string>;
     className?: string;
     hasLink?: boolean;
@@ -11,7 +12,8 @@ interface DetailsListProps {
  * @param {string[]} props.details - Values to render.
  * @param {string} [props.className] - Optional CSS class for customization.
  * @param {boolean} [props.hasLink=false] - Whether the parent component contains a link.
+ * @param [props.ref] - Ref forwarded to the root element.
  * @returns {ReactElement} The details list element.
  */
-export declare const DetailsList: ({ details, className, hasLink }: DetailsListProps) => ReactElement;
+export declare const DetailsList: ({ details, className, hasLink, ref }: DetailsListProps) => ReactElement;
 export {};

package/src/components/EmptyState/EmptyState.d.ts

@@ -1,5 +1,6 @@
 import { MouseEventHandler, ReactElement, ReactNode } from "react";
 import { CommonProps } from "../../common/CommonProps";
+import { Refable } from "../../common/Refable";
 type EmptyStateImage = "WORKER_WITH_SIGN" | "ROAD_BLOCK" | "BUILDING_ERROR" | "WALL_CONSTRUCTION" | "PHONE_LOCK_SECURITY" | "SEARCH_DOCUMENT";
 type EmptyStateButtonAction = {
     disabled?: boolean;
@@ -11,7 +12,7 @@ type EmptyStateButtonAction = {
         target?: string;
     };
 };
-export interface EmptyStateProps extends CommonProps {
+export interface EmptyStateProps extends CommonProps, Refable<HTMLDivElement> {
     description?: string;
     altText?: string;
     image?: EmptyStateImage;

package/src/components/EmptyValue/EmptyValue.d.ts

@@ -1,6 +1,7 @@
 import { ReactElement } from "react";
 import { CommonProps } from "../../common/CommonProps";
-export type EmptyValueProps = CommonProps;
+import { Refable } from "../../common/Refable";
+export type EmptyValueProps = CommonProps & Refable<HTMLDivElement>;
 /**
  *  The EmptyValue component renders a consistent "–" symbol to represent empty, null, undefined, or not applicable values in tables.
  *

package/src/components/ExternalLink/ExternalLink.d.ts

@@ -1,6 +1,7 @@
 import { MouseEventHandler, ReactElement, ReactNode } from "react";
 import { CommonProps } from "../../common/CommonProps";
-export interface ExternalLinkProps extends CommonProps {
+import { Refable } from "../../common/Refable";
+export interface ExternalLinkProps extends CommonProps, Refable<HTMLAnchorElement> {
     /**
      * The URL to which users are redirected
      */
@@ -33,4 +34,4 @@ export interface ExternalLinkProps extends CommonProps {
  * @param {ExternalLinkProps} props - The props for the external link component
  * @returns {ReactElement} External Link component
  */
-export declare const ExternalLink: ({ rel, target, href, className, children, title, "data-testid": dataTestId, onClick, color, }: ExternalLinkProps) => ReactElement;
+export declare const ExternalLink: ({ rel, target, href, className, children, title, "data-testid": dataTestId, onClick, color, ref, }: ExternalLinkProps) => ReactElement;

package/src/components/Heading/Heading.d.ts

@@ -1,7 +1,8 @@
 import { ReactElement, ReactNode } from "react";
 import { CommonProps } from "../../common/CommonProps";
+import { Refable } from "../../common/Refable";
 export type HeadingVariant = "primary" | "secondary" | "tertiary" | "subtitle";
-export interface HeadingProps extends CommonProps {
+export interface HeadingProps extends CommonProps, Refable<HTMLHeadingElement> {
     /**
      * Child Nodes.
      */
@@ -25,4 +26,4 @@ export interface HeadingProps extends CommonProps {
  * @param {HeadingProps} props - The props for the Heading component
  * @returns {ReactElement} Heading component
  */
-export declare const Heading: ({ variant, inverted, subtle, className, "data-testid": dataTestId, ...rest }: HeadingProps) => ReactElement;
+export declare const Heading: ({ variant, inverted, subtle, className, "data-testid": dataTestId, ref, ...rest }: HeadingProps) => ReactElement;

package/src/components/HorizontalOverflowScroller/HorizontalOverflowScroller.d.ts

@@ -1,7 +1,8 @@
 import { ReactElement, ReactNode } from "react";
 import { CommonProps } from "../../common/CommonProps";
+import { Refable } from "../../common/Refable";
 import { Styleable } from "../../common/Styleable";
-export interface HorizontalOverflowScrollerProps extends CommonProps, Styleable {
+export interface HorizontalOverflowScrollerProps extends CommonProps, Styleable, Refable<HTMLDivElement> {
     children: ReactNode;
     /**
      * Callback fired when scroll state changes (scrollable, at edges, etc.)
@@ -21,6 +22,7 @@ export interface HorizontalOverflowScrollerProps extends CommonProps, Styleable
  * @param props.className - Optional CSS class name for styling
  * @param props."data-testid" - Optional test ID for testing purposes
  * @param props.onScrollStateChange - Optional callback fired when scroll state changes
+ * @param [props.ref] - Ref forwarded to the root element
  * @returns {ReactElement} A horizontal overflow scroller component with visual indicators
  */
-export declare const HorizontalOverflowScroller: ({ className, "data-testid": dataTestId, children, onScrollStateChange, }: HorizontalOverflowScrollerProps) => ReactElement;
+export declare const HorizontalOverflowScroller: ({ className, "data-testid": dataTestId, children, onScrollStateChange, ref, }: HorizontalOverflowScrollerProps) => ReactElement;

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

@@ -1,8 +1,9 @@
 import { ActivityColors, CriticalityColors, GeneralColors, IntentColors, RentalStatusColors, SitesColors, UtilizationColors } from "@trackunit/ui-design-tokens";
 import { IconName } from "@trackunit/ui-icons";
-import { CSSProperties, MouseEventHandler, ReactElement, RefObject } from "react";
+import { CSSProperties, MouseEventHandler, ReactElement } from "react";
 import { AriaProps } from "../../common/AriaProps";
 import { CommonProps } from "../../common/CommonProps";
+import { Refable } from "../../common/Refable";
 import { Size } from "../../common/Size";
 export type IconColors = IntentColors | GeneralColors | CriticalityColors | ActivityColors | UtilizationColors | SitesColors | RentalStatusColors;
 export declare const iconPalette: {
@@ -254,7 +255,7 @@ type IconPropsLarge = {
     type?: "solid" | "outline";
 };
 type DiscriminatedIconProps = IconPropsSmall | IconPropsMedium | IconPropsLarge;
-export type IconProps = DiscriminatedIconProps & CommonProps & AriaProps & {
+export type IconProps = DiscriminatedIconProps & CommonProps & AriaProps & Refable<HTMLSpanElement> & {
     /**
      * The name of the icon to be rendered.
      * HeroIconName and TrackunitIconName are supported.
@@ -279,12 +280,6 @@ export type IconProps = DiscriminatedIconProps & CommonProps & AriaProps & {
      */
     type?: "solid" | "outline" | "mini";
     onClick?: MouseEventHandler<HTMLSpanElement>;
-    /**
-     * Ref forwarded to the span element
-     *
-     * @memberof IconProps
-     */
-    forwardedRef?: RefObject<HTMLSpanElement>;
     /**
      * Custom styles object used to override existing styles or add some extra styling
      *
@@ -306,5 +301,5 @@ export type IconProps = DiscriminatedIconProps & CommonProps & AriaProps & {
  * @param {IconProps} props - The props for the Icon component
  * @returns {ReactElement} Icon component
  */
-export declare const Icon: ({ name, size, className, "data-testid": dataTestId, color, onClick, type, style, forwardedRef, ariaLabel, fontSize, ariaLabelledBy, ariaDescribedBy, ariaHidden, }: IconProps) => ReactElement;
+export declare const Icon: ({ name, size, className, "data-testid": dataTestId, color, onClick, type, style, ref, ariaLabel, fontSize, ariaLabelledBy, ariaDescribedBy, ariaHidden, }: IconProps) => ReactElement;
 export {};

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

@@ -1,7 +1,8 @@
 import { ActivityColors, CriticalityColors, GeneralColors, IntentColors, RentalStatusColors, SitesColors, UtilizationColors } from "@trackunit/ui-design-tokens";
 import { ReactElement } from "react";
 import { CommonProps } from "../../common/CommonProps";
-export interface IndicatorProps extends CommonProps {
+import { Refable } from "../../common/Refable";
+export interface IndicatorProps extends CommonProps, Refable<HTMLDivElement> {
     /**
      * The icon to be rendered inside the indicator component
      */
@@ -72,4 +73,4 @@ export interface IndicatorProps extends CommonProps {
  * @param {IndicatorProps} props - The props for the Indicator component
  * @returns {ReactElement} Indicator component
  */
-export declare const Indicator: ({ "data-testid": dataTestId, icon, label, color, withBackground, withLabel, ping, size, weight, className, ...rest }: IndicatorProps) => ReactElement;
+export declare const Indicator: ({ "data-testid": dataTestId, icon, label, color, withBackground, withLabel, ping, size, weight, className, ref, ...rest }: IndicatorProps) => ReactElement;

package/src/components/KPI/KPI.d.ts

@@ -1,7 +1,8 @@
 import { ReactElement } from "react";
 import { CommonProps } from "../../common/CommonProps";
+import { Refable } from "../../common/Refable";
 import { Styleable } from "../../common/Styleable";
-export interface KPIProps extends CommonProps, Styleable {
+export interface KPIProps extends CommonProps, Styleable, Refable<HTMLDivElement> {
     /**
      * The title of the KPI
      */
@@ -64,4 +65,4 @@ export interface KPIProps extends CommonProps, Styleable {
  * @param {KPIProps} props - The props for the KPI component
  * @returns {ReactElement} KPI component
  */
-export declare const KPI: ({ title, value, unit, className, "data-testid": dataTestId, tooltipLabel, variant, style, ...rest }: KPIProps) => ReactElement;
+export declare const KPI: ({ title, value, unit, className, "data-testid": dataTestId, tooltipLabel, variant, style, ref, ...rest }: KPIProps) => ReactElement;

package/src/components/KPI/KPISkeleton.d.ts

@@ -1,7 +1,8 @@
 import { ReactElement } from "react";
 import { CommonProps } from "../../common/CommonProps";
+import { Refable } from "../../common/Refable";
 import { Styleable } from "../../common/Styleable";
-export interface KPISkeletonProps extends CommonProps, Styleable {
+export interface KPISkeletonProps extends CommonProps, Styleable, Refable<HTMLDivElement> {
     /**
      * The size of the KPI skeleton
      */
@@ -11,4 +12,4 @@ export interface KPISkeletonProps extends CommonProps, Styleable {
  * Skeleton loading indicator that mimics the KPI component structure.
  * Uses the same layout, spacing, and visual hierarchy as KPI.
  */
-export declare const KPISkeleton: ({ variant, className, "data-testid": dataTestId, style, ...rest }: KPISkeletonProps) => ReactElement;
+export declare const KPISkeleton: ({ variant, className, "data-testid": dataTestId, style, ref, ...rest }: KPISkeletonProps) => ReactElement;

package/src/components/KPICard/KPICard.d.ts

@@ -1,12 +1,13 @@
 import { MappedOmit } from "@trackunit/shared-utils";
 import { IconName } from "@trackunit/ui-icons";
 import { MouseEventHandler, ReactElement, ReactNode } from "react";
+import { Refable } from "../../common/Refable";
 import { IconColors } from "../Icon/Icon";
 import { KPIProps } from "../KPI/KPI";
 import { NoticeProps } from "../Notice/Notice";
 import { ValueBarProps } from "../ValueBar/ValueBar";
 import { TrendIndicatorProps } from "./components/TrendIndicator/TrendIndicator";
-export interface KPICardProps extends MappedOmit<KPIProps, "variant"> {
+export interface KPICardProps extends MappedOmit<KPIProps, "variant">, Refable<HTMLDivElement> {
     /**
      * Is the kpi card active
      */
@@ -92,4 +93,4 @@ export interface KPICardProps extends MappedOmit<KPIProps, "variant"> {
  * @param {KPICardProps} props - The props for the KPICard component
  * @returns {ReactElement} KPICard component
  */
-export declare const KPICard: ({ isActive, onClick, className, "data-testid": dataTestId, children, iconName, iconColor, notice, valueBar, trends, unit, ...rest }: KPICardProps) => ReactElement;
+export declare const KPICard: ({ isActive, onClick, className, "data-testid": dataTestId, children, iconName, iconColor, notice, valueBar, trends, unit, ref, ...rest }: KPICardProps) => ReactElement;

package/src/components/KPICard/KPICardSkeleton.d.ts

@@ -1,7 +1,8 @@
 import { ReactElement, ReactNode } from "react";
 import { CommonProps } from "../../common/CommonProps";
+import { Refable } from "../../common/Refable";
 import { Styleable } from "../../common/Styleable";
-export interface KPICardSkeletonProps extends CommonProps, Styleable {
+export interface KPICardSkeletonProps extends CommonProps, Styleable, Refable<HTMLDivElement> {
     /**
      * Whether to show an icon skeleton
      */
@@ -27,4 +28,4 @@ export interface KPICardSkeletonProps extends CommonProps, Styleable {
  * Skeleton loading indicator that mimics the KPICard component structure.
  * Uses the same layout, spacing, and visual hierarchy as KPICard.
  */
-export declare const KPICardSkeleton: ({ hasIcon, hasTrends, hasValueBar, hasNotice, children, className, "data-testid": dataTestId, style, ...rest }: KPICardSkeletonProps) => ReactElement;
+export declare const KPICardSkeleton: ({ hasIcon, hasTrends, hasValueBar, hasNotice, children, className, "data-testid": dataTestId, style, ref, ...rest }: KPICardSkeletonProps) => ReactElement;

package/src/components/KPICard/components/TrendIndicator/TrendIndicator.d.ts

@@ -1,7 +1,8 @@
 import { ReactElement } from "react";
 import { CommonProps } from "../../../../common/CommonProps";
+import { Refable } from "../../../../common/Refable";
 import { KPICardProps } from "../../KPICard";
-export interface TrendIndicatorProps extends CommonProps {
+export interface TrendIndicatorProps extends CommonProps, Refable<HTMLDivElement> {
     /**
      * The absolute value
      */
@@ -29,4 +30,4 @@ export interface TrendIndicatorProps extends CommonProps {
  * @param {TrendIndicatorProps} props - The props for the TrendIndicator component
  * @returns {ReactElement} TrendIndicator component
  */
-export declare const TrendIndicator: ({ value, trend, label, icon, color, "data-testid": dataTestId, className, }: TrendIndicatorProps) => ReactElement;
+export declare const TrendIndicator: ({ value, trend, label, icon, color, "data-testid": dataTestId, className, ref, }: TrendIndicatorProps) => ReactElement;

package/src/components/KPICard/components/TrendIndicators.d.ts

@@ -1,7 +1,8 @@
 import { ReactElement } from "react";
 import { CommonProps } from "../../../common/CommonProps";
+import { Refable } from "../../../common/Refable";
 import { TrendIndicatorProps } from "./TrendIndicator/TrendIndicator";
-export interface TrendIndicatorsProps extends CommonProps {
+export interface TrendIndicatorsProps extends CommonProps, Refable<HTMLSpanElement> {
     trends: Array<Omit<TrendIndicatorProps, "className" | "data-testid">>;
 }
 /**
@@ -10,4 +11,4 @@ export interface TrendIndicatorsProps extends CommonProps {
  * @param {TrendIndicatorsProps} props - The props for the TrendIndicators component
  * @returns {ReactElement} TrendIndicators component
  */
-export declare const TrendIndicators: ({ trends, "data-testid": dataTestId, className, }: TrendIndicatorsProps) => ReactElement;
+export declare const TrendIndicators: ({ trends, "data-testid": dataTestId, className, ref, }: TrendIndicatorsProps) => ReactElement;

package/src/components/Menu/MenuItem/MenuItem.d.ts

@@ -1,9 +1,10 @@
 import { VariantProps } from "@trackunit/css-class-variance-utilities";
 import { MouseEventHandler, ReactElement, ReactNode } from "react";
 import { CommonProps } from "../../../common/CommonProps";
+import { Refable } from "../../../common/Refable";
 import { cvaMenuItemStyle } from "./MenuItem.variants";
 export type MenuItemVariant = "primary" | "danger";
-export interface MenuItemProps extends CommonProps {
+export interface MenuItemProps extends CommonProps, Refable<HTMLDivElement> {
     /**
      * The unique id for the menu item
      */
@@ -90,4 +91,4 @@ export interface MenuItemProps extends CommonProps {
  * @param {MenuItemProps} props - The props for the MenuItem component
  * @returns {ReactElement} MenuItem component
  */
-export declare const MenuItem: ({ className, "data-testid": dataTestId, label, children, selected, focused, prefix, suffix, disabled, onClick, stopPropagation, id, tabIndex, optionLabelDescription, optionPrefix, fieldSize, variant, }: MenuItemProps) => ReactElement;
+export declare const MenuItem: ({ className, "data-testid": dataTestId, label, children, selected, focused, prefix, suffix, disabled, onClick, stopPropagation, id, tabIndex, optionLabelDescription, optionPrefix, fieldSize, variant, ref, }: MenuItemProps) => ReactElement;

package/src/components/Menu/MenuList/MenuList.d.ts

@@ -1,6 +1,7 @@
 import { MouseEventHandler, ReactElement, ReactNode } from "react";
 import { CommonProps } from "../../../common/CommonProps";
-export interface MenuListProps extends CommonProps {
+import { Refable } from "../../../common/Refable";
+export interface MenuListProps extends CommonProps, Refable<HTMLDivElement> {
     /**
      * List of menu items to be rendered.
      */
@@ -78,4 +79,4 @@ export interface MenuListProps extends CommonProps {
  * @param {MenuListProps} props - The props for the MenuList component
  * @returns {ReactElement} MenuList component
  */
-export declare const MenuList: ({ "data-testid": dataTestId, className, children, isMulti, selectedItems: controlledSelectedItems, onSelectionChange, ...args }: MenuListProps) => ReactElement;
+export declare const MenuList: ({ "data-testid": dataTestId, className, children, isMulti, selectedItems: controlledSelectedItems, onSelectionChange, ref, ...args }: MenuListProps) => ReactElement;

package/src/components/Menu/MoreMenu/MoreMenu.d.ts

@@ -1,6 +1,7 @@
 import { MakePropertyOptional, MappedOmit } from "@trackunit/shared-utils";
 import { ReactElement, ReactNode } from "react";
 import { CommonProps } from "../../../common/CommonProps";
+import { Refable } from "../../../common/Refable";
 import { IconProps } from "../../Icon/Icon";
 import { PopoverContentChildren } from "../../Popover/PopoverContent";
 import { PopoverProps } from "../../Popover/PopoverTypes";
@@ -8,7 +9,7 @@ import { IconButtonProps } from "../../buttons/IconButton/IconButton";
 export type MenuPlacement = "above" | "below";
 type FilteredIconProps = MakePropertyOptional<MappedOmit<IconProps, "onClick">, "name">;
 type FilteredIconButtonProps = Omit<IconButtonProps, "icon" | "onClick">;
-export interface MoreMenuProps extends CommonProps {
+export interface MoreMenuProps extends CommonProps, Refable<HTMLDivElement> {
     children: PopoverContentChildren;
     popoverProps?: PopoverProps;
     iconProps?: FilteredIconProps;
@@ -23,5 +24,5 @@ export interface MoreMenuProps extends CommonProps {
  * @param {MoreMenuProps} props - The props for the MoreMenu component
  * @returns {ReactElement} MoreMenu component
  */
-export declare const MoreMenu: ({ className, "data-testid": dataTestId, popoverProps, iconProps, iconButtonProps, customButton, customPortalId, children, }: MoreMenuProps) => ReactElement;
+export declare const MoreMenu: ({ className, "data-testid": dataTestId, popoverProps, iconProps, iconButtonProps, customButton, customPortalId, children, ref, }: MoreMenuProps) => ReactElement;
 export {};

package/src/components/Notice/Notice.d.ts

@@ -2,8 +2,9 @@ import { GeneralColors, IntentColors } from "@trackunit/ui-design-tokens";
 import { IconName } from "@trackunit/ui-icons";
 import { ReactElement } from "react";
 import { CommonProps } from "../../common/CommonProps";
+import { Refable } from "../../common/Refable";
 import { Size } from "../../common/Size";
-export interface NoticeProps extends CommonProps {
+export interface NoticeProps extends CommonProps, Refable<HTMLDivElement> {
     /**
      * The name of the icon
      */
@@ -51,4 +52,4 @@ export interface NoticeProps extends CommonProps {
  * @param {NoticeProps} props - The props for the Notice component
  * @returns {ReactElement} Notice component
  */
-export declare const Notice: ({ "data-testid": dataTestId, iconName, iconSize, iconColor, label, color, withLabel, className, tooltipLabel, withTooltip, size, ...rest }: NoticeProps) => ReactElement;
+export declare const Notice: ({ "data-testid": dataTestId, iconName, iconSize, iconColor, label, color, withLabel, className, tooltipLabel, withTooltip, size, ref, ...rest }: NoticeProps) => ReactElement;

package/src/components/Page/Page.d.ts

@@ -1,6 +1,7 @@
 import { VariantProps } from "@trackunit/css-class-variance-utilities";
 import { ReactElement, ReactNode } from "react";
 import { CommonProps } from "../../common/CommonProps";
+import { Refable } from "../../common/Refable";
 import { cvaPage } from "./Page.variants";
 /**
  * The layout of the page.
@@ -9,7 +10,7 @@ export type Layout = VariantProps<typeof cvaPage>["layout"];
 /**
  * The props for the page component.
  */
-export interface PageProps extends CommonProps {
+export interface PageProps extends CommonProps, Refable<HTMLDivElement> {
     layout: Layout;
     children?: ReactNode;
     "data-testid"?: string;
@@ -17,4 +18,4 @@ export interface PageProps extends CommonProps {
 /**
  * Renders the page component. Adds padding and layout to the page.
  */
-export declare const Page: ({ layout, className, children, "data-testid": dataTestId }: PageProps) => ReactElement;
+export declare const Page: ({ layout, className, children, "data-testid": dataTestId, ref }: PageProps) => ReactElement;

package/src/components/Page/PageContent.d.ts

@@ -1,6 +1,7 @@
 import { VariantProps } from "@trackunit/css-class-variance-utilities";
 import { ReactElement, ReactNode } from "react";
 import { CommonProps } from "../../common/CommonProps";
+import { Refable } from "../../common/Refable";
 import { cvaPageContent } from "./Page.variants";
 /**
  * The layout of the page.
@@ -9,7 +10,7 @@ export type PageContentLayout = VariantProps<typeof cvaPageContent>["layout"];
 /**
  * The props for the page content component.
  */
-interface PageContentProps extends CommonProps {
+interface PageContentProps extends CommonProps, Refable<HTMLDivElement> {
     layout: PageContentLayout;
     children?: ReactNode;
 }
@@ -20,5 +21,5 @@ interface PageContentProps extends CommonProps {
  * @param {PageContentProps} props - The component props.
  * @returns {ReactNode} - The rendered component.
  */
-export declare const PageContent: ({ className, children, "data-testid": dataTestId, layout, }: PageContentProps) => ReactElement;
+export declare const PageContent: ({ className, children, "data-testid": dataTestId, layout, ref, }: PageContentProps) => ReactElement;
 export {};

package/src/components/PageHeader/PageHeader.d.ts

@@ -49,4 +49,4 @@ import { PageHeaderProps } from "./types";
  * @param {PageHeaderProps} props - The props for the PageHeader component
  * @returns {ReactElement} PageHeader component
  */
-export declare const PageHeader: ({ className, "data-testid": dataTestId, showLoading, description, title, tagLabel, backTo, tagColor, tabsList, descriptionIcon, tagTooltipLabel, ...discriminatedProps }: PageHeaderProps) => ReactElement;
+export declare const PageHeader: ({ className, "data-testid": dataTestId, showLoading, description, title, tagLabel, backTo, tagColor, tabsList, descriptionIcon, tagTooltipLabel, ref, ...discriminatedProps }: PageHeaderProps) => ReactElement;

package/src/components/PageHeader/components/PageHeaderKpiMetrics.d.ts

@@ -1,12 +1,14 @@
 import { ReactElement } from "react";
+import { Refable } from "../../../common/Refable";
 import { PageHeaderKpiMetricsType } from "../types";
 /**
  * Renders KPI metrics in the PageHeader component.
  *
  * @param {object} props - The props for the PageHeaderKpiMetrics component
  * @param {Array<PageHeaderKpiMetricsType>} props.kpiMetrics - The KPI metrics to render
+ * @param [props.ref] - Ref forwarded to the root element
  * @returns {ReactElement} PageHeaderKpiMetrics component
  */
-export declare const PageHeaderKpiMetrics: ({ kpiMetrics }: {
+export declare const PageHeaderKpiMetrics: ({ kpiMetrics, ref, }: {
     kpiMetrics: Array<PageHeaderKpiMetricsType>;
-}) => ReactElement;
+} & Refable<HTMLDivElement>) => ReactElement;