@trackunit/react-components 1.22.3 → 1.22.5

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

@@ -1,4 +1,6 @@
 import { ReactElement } from "react";
+import type { Styleable } from "../../../common/Styleable";
+export type MenuDividerProps = Styleable;
 /**
  * MenuDivider renders a horizontal line to visually separate groups of items within a MenuList.
  *
@@ -23,4 +25,4 @@ import { ReactElement } from "react";
  * ```
  * @returns {ReactElement} MenuDivider component
  */
-export declare const MenuDivider: () => ReactElement;
+export declare const MenuDivider: ({ style }: MenuDividerProps) => ReactElement;

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

@@ -1,10 +1,11 @@
 import { VariantProps } from "@trackunit/css-class-variance-utilities";
 import { MouseEventHandler, ReactElement, ReactNode } from "react";
 import { CommonProps } from "../../../common/CommonProps";
+import type { Styleable } from "../../../common/Styleable";
 import { Refable } from "../../../common/Refable";
 import { cvaMenuItemStyle } from "./MenuItem.variants";
 export type MenuItemVariant = "primary" | "danger";
-export interface MenuItemProps extends CommonProps, Refable<HTMLDivElement> {
+export interface MenuItemProps extends CommonProps, Styleable, Refable<HTMLDivElement> {
     /**
      * The unique id for the menu item
      */
@@ -120,4 +121,4 @@ export interface MenuItemProps extends CommonProps, Refable<HTMLDivElement> {
  * @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, ref, }: 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, style, ref, }: MenuItemProps) => ReactElement;

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

@@ -1,7 +1,8 @@
 import { MouseEventHandler, ReactElement, ReactNode } from "react";
 import { CommonProps } from "../../../common/CommonProps";
+import type { Styleable } from "../../../common/Styleable";
 import { Refable } from "../../../common/Refable";
-export interface MenuListProps extends CommonProps, Refable<HTMLDivElement> {
+export interface MenuListProps extends CommonProps, Styleable, Refable<HTMLDivElement> {
     /**
      * List of menu items to be rendered.
      */
@@ -79,4 +80,4 @@ export interface MenuListProps extends CommonProps, Refable<HTMLDivElement> {
  * @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, ref, ...args }: MenuListProps) => ReactElement;
+export declare const MenuList: ({ "data-testid": dataTestId, className, children, isMulti, selectedItems: controlledSelectedItems, onSelectionChange, style, 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 type { Styleable } from "../../../common/Styleable";
 import { Refable } from "../../../common/Refable";
 import { IconProps } from "../../Icon/Icon";
 import { PopoverContentChildren } from "../../Popover/PopoverContent";
@@ -9,7 +10,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, Refable<HTMLDivElement> {
+export interface MoreMenuProps extends CommonProps, Styleable, Refable<HTMLDivElement> {
     /**
      * Content to render inside the popover. Receives a `close` callback as a render prop, or accepts static ReactNode children.
      */
@@ -78,5 +79,5 @@ export interface MoreMenuProps extends CommonProps, Refable<HTMLDivElement> {
  * @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, ref, }: MoreMenuProps) => ReactElement;
+export declare const MoreMenu: ({ className, "data-testid": dataTestId, popoverProps, iconProps, iconButtonProps, customButton, customPortalId, children, style, ref, }: MoreMenuProps) => ReactElement;
 export {};

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

@@ -2,9 +2,10 @@ import { GeneralColors, IntentColors } from "@trackunit/ui-design-tokens";
 import { IconName } from "@trackunit/ui-icons";
 import { ReactElement } from "react";
 import { CommonProps } from "../../common/CommonProps";
+import type { Styleable } from "../../common/Styleable";
 import { Refable } from "../../common/Refable";
 import { Size } from "../../common/Size";
-export interface NoticeProps extends CommonProps, Refable<HTMLDivElement> {
+export interface NoticeProps extends CommonProps, Styleable, Refable<HTMLDivElement> {
     /**
      * The name of the icon
      */

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 type { Styleable } from "../../common/Styleable";
 import { Refable } from "../../common/Refable";
 import { cvaPage } from "./Page.variants";
 /**
@@ -10,7 +11,7 @@ export type Layout = VariantProps<typeof cvaPage>["layout"];
 /**
  * The props for the Page component.
  */
-export interface PageProps extends CommonProps, Refable<HTMLDivElement> {
+export interface PageProps extends CommonProps, Styleable, Refable<HTMLDivElement> {
     /**
      * The layout mode of the page. Controls how content is arranged within the page container.
      */
@@ -54,4 +55,4 @@ export interface PageProps extends CommonProps, Refable<HTMLDivElement> {
  * @param {PageProps} props - The props for the Page component
  * @returns {ReactElement} Page component
  */
-export declare const Page: ({ layout, className, children, "data-testid": dataTestId, ref }: PageProps) => ReactElement;
+export declare const Page: ({ layout, className, children, "data-testid": dataTestId, style, 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 type { Styleable } from "../../common/Styleable";
 import { Refable } from "../../common/Refable";
 import { cvaPageContent } from "./Page.variants";
 /**
@@ -10,7 +11,7 @@ export type PageContentLayout = VariantProps<typeof cvaPageContent>["layout"];
 /**
  * The props for the PageContent component.
  */
-interface PageContentProps extends CommonProps, Refable<HTMLDivElement> {
+interface PageContentProps extends CommonProps, Styleable, Refable<HTMLDivElement> {
     /**
      * The layout mode for the page content area. Controls content arrangement and spacing.
      */
@@ -50,5 +51,5 @@ interface PageContentProps extends CommonProps, Refable<HTMLDivElement> {
  * @param {PageContentProps} props - The props for the PageContent component
  * @returns {ReactElement} PageContent component
  */
-export declare const PageContent: ({ className, children, "data-testid": dataTestId, layout, ref, }: PageContentProps) => ReactElement;
+export declare const PageContent: ({ className, children, "data-testid": dataTestId, layout, style, ref, }: PageContentProps) => ReactElement;
 export {};

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

@@ -53,4 +53,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, ref, ...discriminatedProps }: PageHeaderProps) => ReactElement;
+export declare const PageHeader: ({ className, "data-testid": dataTestId, showLoading, description, title, tagLabel, backTo, tagColor, tabsList, descriptionIcon, tagTooltipLabel, style, ref, ...discriminatedProps }: PageHeaderProps) => ReactElement;

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

@@ -1,14 +1,19 @@
 import { ReactElement } from "react";
+import { CommonProps } from "../../../common/CommonProps";
 import { Refable } from "../../../common/Refable";
+import type { Styleable } from "../../../common/Styleable";
 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 {string} [props.className] - Additional class names for the metrics row
+ * @param {string} [props."data-testid"] - Test id for the metrics row
+ * @param {import("react").CSSProperties} [props.style] - Inline styles for the metrics row
  * @param [props.ref] - Ref forwarded to the root element
  * @returns {ReactElement} PageHeaderKpiMetrics component
  */
-export declare const PageHeaderKpiMetrics: ({ kpiMetrics, ref, }: {
+export declare const PageHeaderKpiMetrics: ({ kpiMetrics, className, "data-testid": dataTestId, style, ref, }: {
     kpiMetrics: Array<PageHeaderKpiMetricsType>;
-} & Refable<HTMLDivElement>) => ReactElement;
+} & CommonProps & Styleable & Refable<HTMLDivElement>) => ReactElement;

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

@@ -1,7 +1,8 @@
 import { ReactElement } from "react";
 import { CommonProps } from "../../../common/CommonProps";
 import { Refable } from "../../../common/Refable";
-interface PageHeaderTitleProps extends CommonProps, Refable<HTMLDivElement> {
+import type { Styleable } from "../../../common/Styleable";
+interface PageHeaderTitleProps extends CommonProps, Styleable, Refable<HTMLDivElement> {
     /**
      * The title of the page header
      */
@@ -14,8 +15,9 @@ interface PageHeaderTitleProps extends CommonProps, Refable<HTMLDivElement> {
  * @param {string} props.title - The title of the page header
  * @param {string} props.className - The class name of the page header title
  * @param {string} [props."data-testid"] - The data test id of the page header title
+ * @param {import("react").CSSProperties} [props.style] - Inline styles for the title wrapper
  * @param [props.ref] - Ref forwarded to the root element
  * @returns {ReactElement} PageHeaderTitle component
  */
-export declare const PageHeaderTitle: ({ title, "data-testid": dataTestId, className, ref: forwardedRef, }: PageHeaderTitleProps) => ReactElement;
+export declare const PageHeaderTitle: ({ title, "data-testid": dataTestId, className, style, ref: forwardedRef, }: PageHeaderTitleProps) => ReactElement;
 export {};

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

@@ -2,6 +2,7 @@ import { IconName } from "@trackunit/ui-icons";
 import { MouseEvent, ReactElement, ReactNode } from "react";
 import { CommonProps } from "../../common/CommonProps";
 import { Refable } from "../../common/Refable";
+import type { Styleable } from "../../common/Styleable";
 import { ButtonVariant } from "../buttons/shared/ButtonProps";
 import { TabListProps } from "../Tabs/TabList";
 import { TagColors } from "../Tag/Tag";
@@ -12,7 +13,7 @@ export type PageHeaderKpiMetricsType = {
     loading?: boolean;
     hidden?: boolean;
 };
-export type PageHeaderActionType = CommonProps & {
+export type PageHeaderActionType = CommonProps & Styleable & {
     actionCallback?: (e?: MouseEvent) => void;
     actionText: string;
     prefixIconName?: IconName;
@@ -29,7 +30,7 @@ export type PageHeaderSecondaryActionType = PageHeaderActionType & {
 export type PageHeaderPrimaryActionType = PageHeaderActionType & {
     variant: Extract<ButtonVariant, "primary" | "primary-danger" | "secondary">;
 };
-interface BasePageHeaderProps extends CommonProps, Refable<HTMLDivElement> {
+interface BasePageHeaderProps extends CommonProps, Styleable, Refable<HTMLDivElement> {
     /**
      * Main title of the page.
      */

package/src/components/Pagination/Pagination.d.ts

@@ -1,6 +1,8 @@
 import { ReactElement } from "react";
+import { CommonProps } from "../../common/CommonProps";
+import type { Styleable } from "../../common/Styleable";
 import { Refable } from "../../common/Refable";
-export interface PaginationProps extends Refable<HTMLDivElement> {
+export interface PaginationProps extends CommonProps, Styleable, Refable<HTMLDivElement> {
     /**
      * A go to previous page handler
      */
@@ -29,14 +31,6 @@ export interface PaginationProps extends Refable<HTMLDivElement> {
      * A flag indicating loading state
      */
     loading?: boolean;
-    /**
-     * A custom class to override styles
-     */
-    className?: string;
-    /**
-     * A data test id
-     */
-    "data-testid"?: string;
     /**
      * An helper to get translation for count.
      */
@@ -89,4 +83,4 @@ export interface PaginationProps extends Refable<HTMLDivElement> {
  * @param {PaginationProps} props - The props for the Pagination component
  * @returns {ReactElement} Pagination component
  */
-export declare const Pagination: ({ previousPage, nextPage, canPreviousPage, canNextPage, pageCount, pageIndex, loading, className, "data-testid": dataTestId, getTranslatedCount, onPageChange, cursorBase, ref, }: PaginationProps) => ReactElement;
+export declare const Pagination: ({ previousPage, nextPage, canPreviousPage, canNextPage, pageCount, pageIndex, loading, className, "data-testid": dataTestId, style, getTranslatedCount, onPageChange, cursorBase, ref, }: PaginationProps) => ReactElement;

package/src/components/Polygon/Polygon.d.ts

@@ -1,8 +1,9 @@
 import { ReactElement } from "react";
 import { CommonProps } from "../../common/CommonProps";
 import { Refable } from "../../common/Refable";
+import { type Styleable } from "../../common/Styleable";
 type Point = [number, number];
-export interface PolygonProps extends CommonProps, Refable<SVGSVGElement> {
+export interface PolygonProps extends CommonProps, Styleable, Refable<SVGSVGElement> {
     /**
      * Array of [x, y] coordinate pairs defining the polygon's vertices. Points are normalized to fit within the given size.
      */
@@ -49,5 +50,5 @@ export interface PolygonProps extends CommonProps, Refable<SVGSVGElement> {
  * @param {PolygonProps} props - The props for the Polygon component
  * @returns {ReactElement} Polygon component
  */
-export declare const Polygon: ({ points, size, color, opaque, className, "data-testid": dataTestId, ref, }: PolygonProps) => ReactElement;
+export declare const Polygon: ({ points, size, color, opaque, className, "data-testid": dataTestId, style, ref, }: PolygonProps) => ReactElement;
 export {};

package/src/components/Popover/PopoverTitle.d.ts

@@ -1,7 +1,8 @@
 import { ReactElement, ReactNode } from "react";
 import { CommonProps } from "../../common/CommonProps";
 import { Refable } from "../../common/Refable";
-export interface PopoverTitleProps extends CommonProps, Refable<HTMLDivElement> {
+import type { Styleable } from "../../common/Styleable";
+export interface PopoverTitleProps extends CommonProps, Styleable, Refable<HTMLDivElement> {
     /**
      * An optional action element (e.g., a close button or link) rendered to the right of the title.
      */
@@ -52,4 +53,4 @@ export interface PopoverTitleProps extends CommonProps, Refable<HTMLDivElement>
  * @param {PopoverTitleProps} props - The props for the PopoverTitle component
  * @returns {ReactElement} PopoverTitle component
  */
-export declare const PopoverTitle: ({ children, action, divider, className, "data-testid": dataTestId, ref, }: PopoverTitleProps) => ReactElement;
+export declare const PopoverTitle: ({ children, action, divider, className, "data-testid": dataTestId, style, ref, }: PopoverTitleProps) => ReactElement;

package/src/components/PreferenceCard/PreferenceCard.d.ts

@@ -4,6 +4,7 @@ import { IconName } from "@trackunit/ui-icons";
 import { ReactElement, ReactNode } from "react";
 import { CommonProps } from "../../common/CommonProps";
 import { Refable } from "../../common/Refable";
+import type { Styleable } from "../../common/Styleable";
 import { TagProps } from "../Tag/Tag";
 import { cvaPreferenceCard } from "./PreferenceCard.variants";
 /**
@@ -22,7 +23,7 @@ type ImageDetails = {
     alt: string;
     containerClassName?: string;
 };
-export interface PreferenceCardProps extends CommonProps, Refable<HTMLDivElement>, MappedOmit<VariantProps<typeof cvaPreferenceCard>, "className"> {
+export interface PreferenceCardProps extends CommonProps, Styleable, Refable<HTMLDivElement>, MappedOmit<VariantProps<typeof cvaPreferenceCard>, "className"> {
     /**
      * The title of the preference card
      */
@@ -89,5 +90,5 @@ export interface PreferenceCardProps extends CommonProps, Refable<HTMLDivElement
  * @param {PreferenceCardProps} props - The props for the PreferenceCard component
  * @returns {ReactNode} PreferenceCard component
  */
-export declare const PreferenceCard: ({ title, description, icon, input, titleTag, cardTag, disabled, className, "data-testid": dataTestId, children, ref: forwardedRef, }: PreferenceCardProps) => ReactNode;
+export declare const PreferenceCard: ({ title, description, icon, input, titleTag, cardTag, disabled, className, "data-testid": dataTestId, style, children, ref: forwardedRef, }: PreferenceCardProps) => ReactNode;
 export {};

package/src/components/PreferenceCard/PreferenceCardSkeleton.d.ts

@@ -1,4 +1,6 @@
 import { ReactElement } from "react";
+import { CommonProps } from "../../common/CommonProps";
+import type { Styleable } from "../../common/Styleable";
 import { Refable } from "../../common/Refable";
 /**
  * Default property values for PreferenceCardSkeleton component.
@@ -9,7 +11,7 @@ export declare const DEFAULT_SKELETON_PREFERENCE_CARD_PROPS: {
     readonly hasCardTag: false;
     readonly hasInput: false;
 };
-export interface PreferenceCardSkeletonProps extends Refable<HTMLDivElement> {
+export interface PreferenceCardSkeletonProps extends CommonProps, Styleable, Refable<HTMLDivElement> {
     /** Whether to show an icon skeleton */
     hasIcon?: boolean;
     /** Whether to show a title tag skeleton (inline with title) */
@@ -44,4 +46,4 @@ export interface PreferenceCardSkeletonProps extends Refable<HTMLDivElement> {
  * @param {PreferenceCardSkeletonProps} props - The props for the PreferenceCardSkeleton component
  * @returns {ReactElement} PreferenceCardSkeleton component
  */
-export declare const PreferenceCardSkeleton: ({ hasIcon, hasTitleTag, hasCardTag, hasInput, ref, }: PreferenceCardSkeletonProps) => ReactElement;
+export declare const PreferenceCardSkeleton: ({ hasIcon, hasTitleTag, hasCardTag, hasInput, className, "data-testid": dataTestId, style, ref, }: PreferenceCardSkeletonProps) => ReactElement;

package/src/components/SectionHeader/SectionHeader.d.ts

@@ -1,7 +1,8 @@
 import { ReactElement, ReactNode } from "react";
 import { CommonProps } from "../../common/CommonProps";
+import type { Styleable } from "../../common/Styleable";
 import { Refable } from "../../common/Refable";
-export interface SectionHeaderProps extends CommonProps, Refable<HTMLDivElement> {
+export interface SectionHeaderProps extends CommonProps, Styleable, Refable<HTMLDivElement> {
     /**
      * The title of the section.
      */
@@ -41,4 +42,4 @@ export interface SectionHeaderProps extends CommonProps, Refable<HTMLDivElement>
  * @param {SectionHeaderProps} props - The props for the SectionHeader component
  * @returns {ReactElement} SectionHeader component
  */
-export declare const SectionHeader: ({ title, subtitle, "data-testid": dataTestId, addons, ref, }: SectionHeaderProps) => ReactElement;
+export declare const SectionHeader: ({ title, subtitle, "data-testid": dataTestId, addons, style, ref, }: SectionHeaderProps) => ReactElement;

package/src/components/Sheet/Sheet.d.ts

@@ -26,4 +26,4 @@ import type { SheetProps } from "./sheet-types";
  * CSS transitions on transform; the component stays mounted during the
  * close animation and unmounts after the transition completes.
  */
-export declare const Sheet: ({ isOpen, state, snap, onGeometryChange, onSnap, onClickHandle, onCloseGesture, floatingUi, ref, anchor, snapping, resizable, variant, trapFocus, container, dockedContent, persistentContent, className, "data-testid": dataTestId, onCloseComplete, entryAnimation, children, }: SheetProps) => ReactElement | null;
+export declare const Sheet: ({ isOpen, state, snap, onGeometryChange, onSnap, onClickHandle, onCloseGesture, floatingUi, ref, anchor, snapping, resizable, variant, trapFocus, container, dockedContent, persistentContent, className, style, "data-testid": dataTestId, onCloseComplete, entryAnimation, children, }: SheetProps) => ReactElement | null;

package/src/components/Sheet/sheet-types.d.ts

@@ -1,5 +1,6 @@
 import type { UseFloatingReturn } from "@floating-ui/react";
 import type { ReactNode, Ref, RefObject } from "react";
+import type { Styleable } from "../../common/Styleable";
 import type { UseOverlayDismissibleProps } from "../../overlay-dismissible/types";
 /**
  * Horizontal positioning of the bottom sheet.
@@ -145,7 +146,7 @@ export type UseSheetSnapReturn = {
  * actually reads. Consumers spread the hook return (`{...sheet}`) and
  * TypeScript allows extra properties on spread expressions.
  */
-export type SheetProps = {
+export type SheetProps = Styleable & {
     readonly isOpen: boolean;
     /** Unified sheet state from useSheetSnap. */
     readonly state: SheetState;

package/src/components/Sidebar/Sidebar.d.ts

@@ -1,9 +1,10 @@
 import { ComponentProps, MouseEventHandler, ReactElement } from "react";
 import { CommonProps } from "../../common/CommonProps";
+import type { Styleable } from "../../common/Styleable";
 import { Refable } from "../../common/Refable";
 import { MenuList } from "../Menu/MenuList/MenuList";
 import { MoreMenu } from "../Menu/MoreMenu/MoreMenu";
-export interface SidebarItemProps extends CommonProps {
+export interface SidebarItemProps extends CommonProps, Styleable {
     /**
      * The id prop is used to identify the sidebar item in the dom.
      * This is needed as it is used for the intersection observer to determine which items are visible and which are not.
@@ -13,7 +14,7 @@ export interface SidebarItemProps extends CommonProps {
     onClick?: MouseEventHandler<HTMLElement>;
 }
 export type Breakpoints = "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl";
-export interface SidebarProps extends CommonProps, Refable<HTMLDivElement> {
+export interface SidebarProps extends CommonProps, Styleable, Refable<HTMLDivElement> {
     /**
      * The breakpoint at which the menu will go from Horizontal to vertical stacked
      *
@@ -84,4 +85,4 @@ export interface SidebarProps extends CommonProps, Refable<HTMLDivElement> {
  * @param {SidebarProps} props - The props for the Sidebar component
  * @returns {ReactElement} Sidebar component
  */
-export declare const Sidebar: ({ childContainerClassName, children, breakpoint, className, "data-testid": dataTestId, moreMenuProps, menuListProps, overflowThreshold, ref, }: SidebarProps) => ReactElement;
+export declare const Sidebar: ({ childContainerClassName, children, breakpoint, className, "data-testid": dataTestId, moreMenuProps, menuListProps, overflowThreshold, style, ref, }: SidebarProps) => ReactElement;

package/src/components/Skeleton/SkeletonBlock/SkeletonBlock.d.ts

@@ -2,8 +2,9 @@ import { StringWithAutocompleteOptions } from "@trackunit/shared-utils";
 import { ReactNode } from "react";
 import { CommonProps } from "../../../common/CommonProps";
 import { Refable } from "../../../common/Refable";
+import { type Styleable } from "../../../common/Styleable";
 import { CSSLength } from "../Skeleton.helpers";
-export type SkeletonBlockProps = CommonProps & Refable<HTMLDivElement> & {
+export type SkeletonBlockProps = CommonProps & Styleable & Refable<HTMLDivElement> & {
     /**
      * The height of the skeleton.
      *

package/src/components/Skeleton/SkeletonLabel/SkeletonLabel.d.ts

@@ -2,8 +2,9 @@ import { StringWithAutocompleteOptions } from "@trackunit/shared-utils";
 import { ReactNode } from "react";
 import { CommonProps } from "../../../common/CommonProps";
 import { Refable } from "../../../common/Refable";
+import { type Styleable } from "../../../common/Styleable";
 import { CSSLength, TextSizeKey } from "../Skeleton.helpers";
-export type SkeletonLabelProps = CommonProps & Refable<HTMLDivElement> & {
+export type SkeletonLabelProps = CommonProps & Styleable & Refable<HTMLDivElement> & {
     /**
      * The text size to match, using text size keys.
      *

package/src/components/SkeletonLines/SkeletonLines.d.ts

@@ -1,6 +1,7 @@
 import { StringWithAutocompleteOptions } from "@trackunit/shared-utils";
 import { CommonProps } from "../../common/CommonProps";
 import { Refable } from "../../common/Refable";
+import type { Styleable } from "../../common/Styleable";
 import { CSSLength, TextSizeKey } from "../Skeleton/Skeleton.helpers";
 /**
  * Preset configurations for common skeleton patterns.
@@ -51,7 +52,7 @@ export type SkeletonLineConfig = BaseSkeletonLineConfig & {
  *
  * Use this for displaying multiple identical skeleton lines.
  */
-export type UniformSkeletonLinesProps = CommonProps & Refable<HTMLDivElement> & BaseSkeletonLineConfig & {
+export type UniformSkeletonLinesProps = CommonProps & Styleable & Refable<HTMLDivElement> & BaseSkeletonLineConfig & {
     /**
      * Visual variant: "uniform" (default)
      *
@@ -74,7 +75,7 @@ export type UniformSkeletonLinesProps = CommonProps & Refable<HTMLDivElement> &
  *
  * Use this for displaying skeleton lines with per-line configuration (varying widths, textSize (height), etc.).
  */
-type CustomSkeletonLinesProps = CommonProps & Refable<HTMLDivElement> & {
+type CustomSkeletonLinesProps = CommonProps & Styleable & Refable<HTMLDivElement> & {
     /**
      * Visual variant: "custom"
      *
@@ -93,7 +94,7 @@ type CustomSkeletonLinesProps = CommonProps & Refable<HTMLDivElement> & {
  *
  * Use this for common skeleton patterns with predefined configurations.
  */
-type PresetSkeletonLinesProps = CommonProps & Refable<HTMLDivElement> & {
+type PresetSkeletonLinesProps = CommonProps & Styleable & Refable<HTMLDivElement> & {
     /**
      * Visual variant: "preset"
      *

package/src/components/Spacer/Spacer.d.ts

@@ -1,8 +1,9 @@
 import { ReactElement } from "react";
 import { CommonProps } from "../../common/CommonProps";
+import type { Styleable } from "../../common/Styleable";
 import { Refable } from "../../common/Refable";
 import { Size } from "../../common/Size";
-export interface SpacerProps extends CommonProps, Refable<HTMLDivElement> {
+export interface SpacerProps extends CommonProps, Styleable, Refable<HTMLDivElement> {
     /**
      * The minimum height of the spacer. Defaults to 1px.
      * Possible values are "normal"(8px), and "large" (32px).
@@ -37,4 +38,4 @@ export interface SpacerProps extends CommonProps, Refable<HTMLDivElement> {
  * @param {SpacerProps} props - The props for the Spacer component
  * @returns {ReactElement} Spacer component
  */
-export declare const Spacer: ({ size, border, "data-testid": dataTestId, className, ref, }: SpacerProps) => ReactElement;
+export declare const Spacer: ({ size, border, "data-testid": dataTestId, className, style, ref, }: SpacerProps) => ReactElement;

package/src/components/Spinner/Spinner.d.ts

@@ -1,9 +1,10 @@
 import { ReactElement } from "react";
 import { CommonProps } from "../../common/CommonProps";
+import type { Styleable } from "../../common/Styleable";
 import { Refable } from "../../common/Refable";
 import { Size } from "../../common/Size";
 type Centering = "horizontally" | "vertically" | "centered";
-export interface SpinnerProps extends CommonProps, Refable<HTMLDivElement> {
+export interface SpinnerProps extends CommonProps, Styleable, Refable<HTMLDivElement> {
     /**
      * Defines the size of the spinner.
      */
@@ -62,5 +63,5 @@ export interface SpinnerProps extends CommonProps, Refable<HTMLDivElement> {
  * @param {SpinnerProps} props - The props for the Spinner component
  * @returns {ReactElement} Spinner component
  */
-export declare const Spinner: ({ mode, size, centering, className, containerClassName, "data-testid": dataTestId, label, ref, }: SpinnerProps) => ReactElement;
+export declare const Spinner: ({ mode, size, centering, className, containerClassName, "data-testid": dataTestId, label, style, ref, }: SpinnerProps) => ReactElement;
 export {};

package/src/components/Tag/Tag.d.ts

@@ -1,10 +1,11 @@
 import { ActivityColors, CriticalityColors, GeneralColors, IntentColors } from "@trackunit/ui-design-tokens";
 import { MouseEventHandler, ReactElement, ReactNode, Ref } from "react";
 import { CommonProps } from "../../common/CommonProps";
+import type { Styleable } from "../../common/Styleable";
 import { Size } from "../../common/Size";
 export type TagSize = Extract<Size, "small" | "medium">;
 export type TagColors = IntentColors | GeneralColors | CriticalityColors | ActivityColors;
-export interface TagProps extends CommonProps {
+export interface TagProps extends CommonProps, Styleable {
     /**
      * The color of the tag.
      *
@@ -92,4 +93,4 @@ export interface TagProps extends CommonProps {
  * @param {TagProps} props - The props for the Tag component.
  * @returns {ReactElement} The rendered Tag component.
  */
-export declare const Tag: ({ className, "data-testid": dataTestId, children, size, onClickClose, color, disabled, ref, icon, onMouseEnter, }: TagProps) => ReactElement;
+export declare const Tag: ({ className, "data-testid": dataTestId, children, size, onClickClose, color, disabled, ref, icon, onMouseEnter, style, }: TagProps) => ReactElement;

package/src/components/Text/Text.d.ts

@@ -1,10 +1,11 @@
 import { ReactElement, ReactNode, Ref } from "react";
 import { CommonProps } from "../../common/CommonProps";
+import type { Styleable } from "../../common/Styleable";
 import { Size } from "../../common/Size";
 export type TextType = "p" | "span" | "div";
 export type TextAlign = "left" | "center" | "right";
 export type TextWeight = "normal" | "thick" | "bold";
-export interface TextProps extends CommonProps {
+export interface TextProps extends CommonProps, Styleable {
     /**
      * Child nodes.
      */

package/src/components/ToggleGroup/ToggleGroup.d.ts

@@ -4,9 +4,10 @@ import { IconName } from "@trackunit/ui-icons";
 import { Dispatch, MouseEventHandler, ReactElement, SetStateAction } from "react";
 import { CommonProps } from "../../common/CommonProps";
 import { Refable } from "../../common/Refable";
+import { type Styleable } from "../../common/Styleable";
 import { TooltipPlacement } from "../Tooltip/Tooltip";
 import { cvaToggleGroup } from "./ToggleGroup.variants";
-export interface BasicToggleGroupListProps<TSelectedId extends string = string> extends CommonProps {
+export interface BasicToggleGroupListProps<TSelectedId extends string = string> extends CommonProps, Styleable {
     /**
      * Used to identify an individual button to be able to highlight the selected one.
      */
@@ -39,7 +40,7 @@ export interface BasicToggleGroupListProps<TSelectedId extends string = string>
         placement?: TooltipPlacement;
     };
 }
-export type ToggleGroupProps<TSelectedId extends string = string> = CommonProps & Refable<HTMLDivElement> & MappedOmit<VariantProps<typeof cvaToggleGroup>, "className"> & {
+export type ToggleGroupProps<TSelectedId extends string = string> = CommonProps & Styleable & Refable<HTMLDivElement> & MappedOmit<VariantProps<typeof cvaToggleGroup>, "className"> & {
     list: ReadonlyArray<BasicToggleGroupListProps<TSelectedId>>;
     /**
      * Instead of onClick, we now use onChange to return the selected value
@@ -92,8 +93,8 @@ export type ToggleGroupProps<TSelectedId extends string = string> = CommonProps
  * @param {ToggleGroupProps} props - The props for the ToggleGroup component
  * @returns {ReactElement} ToggleGroup component
  */
-export declare const ToggleGroup: <TSelectedId extends string = string>({ list, selected, setSelected, onChange, disabled, size, isIconOnly, className, "data-testid": dataTestId, ref, }: ToggleGroupProps<TSelectedId>) => ReactElement;
-export interface ToggleItemProps extends CommonProps, MappedOmit<BasicToggleGroupListProps<string>, "id"> {
+export declare const ToggleGroup: <TSelectedId extends string = string>({ list, selected, setSelected, onChange, disabled, size, isIconOnly, className, "data-testid": dataTestId, style, ref, }: ToggleGroupProps<TSelectedId>) => ReactElement;
+export interface ToggleItemProps extends CommonProps, Styleable, MappedOmit<BasicToggleGroupListProps<string>, "id"> {
     title: string;
     text?: {
         truncate: boolean;

package/src/components/Tooltip/Tooltip.d.ts

@@ -2,7 +2,7 @@ import { Placement } from "@floating-ui/react";
 import { ReactElement, ReactNode } from "react";
 import { CommonProps } from "../../common/CommonProps";
 import { Refable } from "../../common/Refable";
-import { Styleable } from "../../common/Styleable";
+import type { Styleable } from "../../common/Styleable";
 import { IconProps } from "../Icon/Icon";
 import { PopoverHoverOptions } from "../Popover/PopoverTypes";
 export type TooltipPlacement = Placement | "auto";

package/src/components/ValueBar/SegmentedValueBar.d.ts

@@ -1,7 +1,8 @@
 import { ReactElement } from "react";
 import { CommonProps } from "../../common/CommonProps";
+import type { Styleable } from "../../common/Styleable";
 import type { SegmentedValueBarSize, ValueBarSegment } from "./SegmentedValueBarTypes";
-export interface SegmentedValueBarProps extends CommonProps {
+export interface SegmentedValueBarProps extends CommonProps, Styleable {
     /**
      * Array of segments to display. Each segment has a numeric value and a color and optionally a label.
      * Segments render in the order they are provided; the component does not sort or reorder them.
@@ -49,4 +50,4 @@ export interface SegmentedValueBarProps extends CommonProps {
  * SegmentedValueBar displays multiple colored segments on a bar to visualize values relative to a total.
  * Supports optional tooltips per segment, showing value and optionally a label.
  */
-export declare const SegmentedValueBar: ({ segments, total, size, showValue, displayValue, unit, valueColor, showTooltip, tooltipUnit, valueWidth, className, "data-testid": dataTestId, }: SegmentedValueBarProps) => ReactElement;
+export declare const SegmentedValueBar: ({ segments, total, size, showValue, displayValue, unit, valueColor, showTooltip, tooltipUnit, valueWidth, className, "data-testid": dataTestId, style, }: SegmentedValueBarProps) => ReactElement;

package/src/components/ValueBar/ValueBar.d.ts

@@ -1,10 +1,11 @@
 import { ReactElement } from "react";
 import { CommonProps } from "../../common/CommonProps";
+import type { Styleable } from "../../common/Styleable";
 import { Refable } from "../../common/Refable";
 import { Size } from "../../common/Size";
 import { LevelColors } from "./ValueBarTypes";
 type ValueBarSize = Extract<Size, "small" | "large"> | "extraSmall";
-export interface ValueBarProps extends CommonProps, Refable<HTMLSpanElement> {
+export interface ValueBarProps extends CommonProps, Styleable, Refable<HTMLSpanElement> {
     /**
      * Value to display.
      */
@@ -86,5 +87,5 @@ export interface ValueBarProps extends CommonProps, Refable<HTMLSpanElement> {
  * @param {ValueBarProps} props - The props for the ValueBar component
  * @returns {ReactElement} ValueBar component
  */
-export declare const ValueBar: ({ value, min, max, unit, size, levelColors, valueColor, showValue, className, "data-testid": dataTestId, zeroScoreAllowed, ref, }: ValueBarProps) => ReactElement;
+export declare const ValueBar: ({ value, min, max, unit, size, levelColors, valueColor, showValue, className, "data-testid": dataTestId, zeroScoreAllowed, style, ref, }: ValueBarProps) => ReactElement;
 export {};