@trackunit/react-components 1.23.11 → 1.24.1

package/index.cjs.js

@@ -9787,7 +9787,7 @@ const useOverflowItems = ({ threshold = 1, childUniqueIdentifierAttribute = "id"
  * **Important:** The Sidebar is just a layout wrapper. You are responsible for styling the children.
  * For the overflow functionality, use `min-w-[*]` or `flex-shrink-0` on child elements.
  *
- * When testing, add `setupIntersectionObserver();` to your `jest.setup.ts` file.
+ * When testing, add `setupIntersectionObserver();` to your `vitest.setup.ts` file.
  *
  * ### When to use
  * Use Sidebar for secondary in-page navigation (e.g., switching between views within a page). Works well with `Tabs` for page-level navigation.

package/index.esm.js

@@ -9785,7 +9785,7 @@ const useOverflowItems = ({ threshold = 1, childUniqueIdentifierAttribute = "id"
  * **Important:** The Sidebar is just a layout wrapper. You are responsible for styling the children.
  * For the overflow functionality, use `min-w-[*]` or `flex-shrink-0` on child elements.
  *
- * When testing, add `setupIntersectionObserver();` to your `jest.setup.ts` file.
+ * When testing, add `setupIntersectionObserver();` to your `vitest.setup.ts` file.
  *
  * ### When to use
  * Use Sidebar for secondary in-page navigation (e.g., switching between views within a page). Works well with `Tabs` for page-level navigation.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "1.23.11",
+  "version": "1.24.1",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "migrations": "./migrations.json",
@@ -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.12.8",
-    "@trackunit/css-class-variance-utilities": "1.12.8",
-    "@trackunit/shared-utils": "1.14.9",
-    "@trackunit/ui-icons": "1.12.9",
+    "@trackunit/ui-design-tokens": "1.13.1",
+    "@trackunit/css-class-variance-utilities": "1.13.1",
+    "@trackunit/shared-utils": "1.15.1",
+    "@trackunit/ui-icons": "1.13.1",
     "es-toolkit": "^1.39.10",
     "@tanstack/react-virtual": "3.13.12",
     "dequal": "^2.0.3",

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

@@ -1,5 +1,5 @@
 export declare const cvaAlert: (props?: ({
-    color?: "danger" | "warning" | "success" | "info" | "neutral" | null | undefined;
+    color?: "neutral" | "info" | "success" | "warning" | "danger" | null | undefined;
     actionsInline?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const cvaAlertActionsContainer: (props?: ({

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

@@ -1,5 +1,5 @@
 export declare const cvaBadge: (props?: ({
-    color?: "primary" | "danger" | "warning" | "neutral" | null | undefined;
+    color?: "primary" | "neutral" | "warning" | "danger" | null | undefined;
     compact?: boolean | null | undefined;
     size?: "default" | "condensed" | null | undefined;
     isSingleChar?: boolean | null | undefined;

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

@@ -4,17 +4,17 @@ export declare const cvaCard: (props?: ({
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const cvaCardFooterContainerRoot: (props?: ({
     border?: "default" | "borderless" | null | undefined;
-    padding?: "default" | "none" | null | undefined;
+    padding?: "none" | "default" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const cvaCardFooterContainer: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 export declare const cvaCardHeader: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 export declare const cvaCardHeaderHeadingContainer: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 export declare const cvaCardHeaderContainer: (props?: ({
     border?: "default" | "borderless" | null | undefined;
-    padding?: "default" | "none" | null | undefined;
+    padding?: "none" | "default" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const cvaCardBodyContainer: (props?: ({
-    direction?: "row" | "row-reverse" | "column" | "column-reverse" | null | undefined;
-    padding?: "default" | "none" | null | undefined;
-    gap?: "default" | "none" | null | undefined;
+    direction?: "column" | "column-reverse" | "row" | "row-reverse" | null | undefined;
+    padding?: "none" | "default" | null | undefined;
+    gap?: "none" | "default" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;

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

@@ -1,5 +1,5 @@
 export declare const cvaHighlight: (props?: ({
     size?: "small" | "medium" | null | undefined;
-    color?: "info" | "success" | "warning" | "danger" | "unknown" | "clear" | null | undefined;
+    color?: "clear" | "info" | "success" | "warning" | "danger" | "unknown" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const cvaHighlightText: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;

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

@@ -242,7 +242,7 @@ export declare const iconPalette: {
         readonly 900: "127 29 29";
     };
 };
-export declare const iconColorNames: ("info" | "success" | "warning" | "danger" | "primary" | "neutral" | "black" | "white" | "good" | "low" | "critical" | "working" | "idle" | "stopped" | "unknown" | "moving" | "active" | "excessive_usage" | "unused" | "utilized" | "heavily_utilized" | "unknown_utilization" | "site_area" | "site_classic_poi" | "site_classic_zone" | "site_depot" | "site_work_place" | "site_construction_site" | "site_unknown" | "on_rent" | "returned" | "available" | "pickup_ready" | "transfer" | "in_repair" | "other_rental_status")[];
+export declare const iconColorNames: ("black" | "white" | "active" | "primary" | "neutral" | "info" | "success" | "warning" | "danger" | "good" | "low" | "critical" | "working" | "idle" | "moving" | "excessive_usage" | "stopped" | "unknown" | "unused" | "utilized" | "heavily_utilized" | "unknown_utilization" | "site_area" | "site_classic_poi" | "site_classic_zone" | "site_depot" | "site_work_place" | "site_construction_site" | "site_unknown" | "on_rent" | "returned" | "available" | "pickup_ready" | "transfer" | "in_repair" | "other_rental_status")[];
 type IconPropsSmall = {
     size?: "small";
     type?: "solid";

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

@@ -1,5 +1,5 @@
 export declare const cvaIcon: (props?: ({
-    color?: "primary" | "neutral" | "info" | "success" | "warning" | "danger" | "good" | "low" | "critical" | "working" | "idle" | "moving" | "active" | "excessive_usage" | "stopped" | "unknown" | "default" | "black" | "white" | "unused" | "utilized" | "heavily_utilized" | "unknown_utilization" | "site_area" | "site_classic_poi" | "site_classic_zone" | "site_depot" | "site_work_place" | "site_construction_site" | "site_unknown" | "on_rent" | "returned" | "available" | "pickup_ready" | "transfer" | "in_repair" | "other_rental_status" | null | undefined;
+    color?: "black" | "white" | "default" | "active" | "primary" | "neutral" | "info" | "success" | "warning" | "danger" | "good" | "low" | "critical" | "working" | "idle" | "moving" | "excessive_usage" | "stopped" | "unknown" | "unused" | "utilized" | "heavily_utilized" | "unknown_utilization" | "site_area" | "site_classic_poi" | "site_classic_zone" | "site_depot" | "site_work_place" | "site_construction_site" | "site_unknown" | "on_rent" | "returned" | "available" | "pickup_ready" | "transfer" | "in_repair" | "other_rental_status" | null | undefined;
     size?: "small" | "medium" | "large" | null | undefined;
     fontSize?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;

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

@@ -3,12 +3,12 @@ export declare const cvaIndicatorIcon: (props?: import("class-variance-authority
 export declare const cvaIndicatorLabel: (props?: ({
     size?: "small" | "medium" | null | undefined;
     weight?: "medium" | "normal" | null | undefined;
-    background?: "visible" | "hidden" | null | undefined;
+    background?: "hidden" | "visible" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const cvaIndicatorPing: (props?: ({
-    color?: "primary" | "secondary" | "neutral" | "info" | "success" | "warning" | "danger" | "good" | "low" | "critical" | "working" | "idle" | "stopped" | "moving" | "active" | "excessive_usage" | "unknown" | "unused" | "utilized" | "heavily_utilized" | "unknown_utilization" | "available" | "on_rent" | "pickup_ready" | "transfer" | "in_repair" | "returned" | "other_rental_status" | "site_area" | "site_classic_poi" | "site_classic_zone" | "site_depot" | "site_work_place" | "site_construction_site" | "site_unknown" | "white" | "black" | null | undefined;
+    color?: "black" | "white" | "active" | "primary" | "neutral" | "info" | "success" | "warning" | "danger" | "good" | "low" | "critical" | "working" | "idle" | "moving" | "excessive_usage" | "stopped" | "unknown" | "unused" | "utilized" | "heavily_utilized" | "unknown_utilization" | "site_area" | "site_classic_poi" | "site_classic_zone" | "site_depot" | "site_work_place" | "site_construction_site" | "site_unknown" | "on_rent" | "returned" | "available" | "pickup_ready" | "transfer" | "in_repair" | "other_rental_status" | "secondary" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const cvaIndicatorIconBackground: (props?: ({
-    color?: "primary" | "secondary" | "neutral" | "info" | "success" | "warning" | "danger" | "good" | "low" | "critical" | "working" | "idle" | "stopped" | "moving" | "active" | "excessive_usage" | "unknown" | "unused" | "utilized" | "heavily_utilized" | "unknown_utilization" | "available" | "on_rent" | "pickup_ready" | "transfer" | "in_repair" | "returned" | "other_rental_status" | "site_area" | "site_classic_poi" | "site_classic_zone" | "site_depot" | "site_work_place" | "site_construction_site" | "site_unknown" | "white" | "black" | null | undefined;
-    background?: "visible" | "hidden" | null | undefined;
+    color?: "black" | "white" | "active" | "primary" | "neutral" | "info" | "success" | "warning" | "danger" | "good" | "low" | "critical" | "working" | "idle" | "moving" | "excessive_usage" | "stopped" | "unknown" | "unused" | "utilized" | "heavily_utilized" | "unknown_utilization" | "site_area" | "site_classic_poi" | "site_classic_zone" | "site_depot" | "site_work_place" | "site_construction_site" | "site_unknown" | "on_rent" | "returned" | "available" | "pickup_ready" | "transfer" | "in_repair" | "other_rental_status" | "secondary" | null | undefined;
+    background?: "hidden" | "visible" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;

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

@@ -13,7 +13,7 @@
  * @returns tailwind class names on the basis on the provided props.
  */
 export declare const cvaInteractableItem: (props?: ({
-    cursor?: "pointer" | "auto" | "help" | "zoom-in" | "zoom-out" | "default" | "not-allowed" | null | undefined;
+    cursor?: "auto" | "default" | "help" | "not-allowed" | "pointer" | "zoom-in" | "zoom-out" | null | undefined;
     selection?: "auto" | "selected" | "unselected" | null | undefined;
     disabled?: boolean | null | undefined;
     focus?: "auto" | "focused" | "unfocused" | null | undefined;

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

@@ -1,6 +1,6 @@
 export declare const cvaKPI: (props?: ({
-    variant?: "small" | "condensed" | "default" | null | undefined;
+    variant?: "small" | "default" | "condensed" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const cvaKPITrendPercentage: (props?: ({
-    color?: "success" | "danger" | "warning" | "neutral" | "info" | null | undefined;
+    color?: "neutral" | "info" | "success" | "warning" | "danger" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;

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

@@ -5,5 +5,5 @@ export declare const cvaKPICard: (props?: ({
 export declare const cvaKPICardBody: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 export declare const cvaKPICardHeader: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 export declare const cvaKPIIconContainer: (props?: ({
-    iconColor?: "success" | "warning" | "danger" | "info" | "neutral" | null | undefined;
+    iconColor?: "neutral" | "info" | "success" | "warning" | "danger" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;

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

@@ -3,6 +3,6 @@ export declare const cvaListContainer: (props?: ({
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const cvaList: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 export declare const cvaListItem: (props?: ({
-    separator?: "line" | "none" | null | undefined;
+    separator?: "none" | "line" | null | undefined;
     contentFillsContainer?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;

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

@@ -1,5 +1,5 @@
 export declare const cvaPage: (props?: ({
-    layout?: "content" | "header-content" | "sidebar-content" | "none" | null | undefined;
+    layout?: "none" | "content" | "header-content" | "sidebar-content" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const cvaPageContent: (props?: ({
     layout?: "content" | "cols-min-fr" | "rows-min-fr" | null | undefined;

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

@@ -28,8 +28,8 @@ export declare const cvaSheetContainer: (props?: ({
  * directly on the element for immediate visual feedback, then restores on release.
  */
 export declare const cvaSheetPanel: (props?: ({
-    anchor?: "center" | "start" | "end" | null | undefined;
-    variant?: "default" | "modal" | "floating" | null | undefined;
+    anchor?: "center" | "end" | "start" | null | undefined;
+    variant?: "default" | "floating" | "modal" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 /**
  * Scrollable area below the drag handle. Nested inside the Sheet panel (Card)

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

@@ -1,7 +1,7 @@
 import { ComponentProps, MouseEventHandler, ReactElement } from "react";
 import { CommonProps } from "../../common/CommonProps";
-import type { Styleable } from "../../common/Styleable";
 import { Refable } from "../../common/Refable";
+import type { Styleable } from "../../common/Styleable";
 import { MenuList } from "../Menu/MenuList/MenuList";
 import { MoreMenu } from "../Menu/MoreMenu/MoreMenu";
 export interface SidebarItemProps extends CommonProps, Styleable {
@@ -53,7 +53,7 @@ export interface SidebarProps extends CommonProps, Styleable, Refable<HTMLDivEle
  * **Important:** The Sidebar is just a layout wrapper. You are responsible for styling the children.
  * For the overflow functionality, use `min-w-[*]` or `flex-shrink-0` on child elements.
  *
- * When testing, add `setupIntersectionObserver();` to your `jest.setup.ts` file.
+ * When testing, add `setupIntersectionObserver();` to your `vitest.setup.ts` file.
  *
  * ### When to use
  * Use Sidebar for secondary in-page navigation (e.g., switching between views within a page). Works well with `Tabs` for page-level navigation.

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

@@ -1,4 +1,4 @@
 export declare const cvaSidebar: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 export declare const cvaSidebarChildContainer: (props?: ({
-    breakpoint?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | null | undefined;
+    breakpoint?: "sm" | "xs" | "md" | "lg" | "xl" | "2xl" | "3xl" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;

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

@@ -5,9 +5,9 @@
 export declare const TAG_TEXT_MIN_WIDTH_CLASS = "min-w-[80px]";
 export declare const cvaTag: (props?: ({
     size?: "small" | "medium" | null | undefined;
-    layout?: "containsDismiss" | "containsIcon" | "default" | null | undefined;
-    color?: "primary" | "neutral" | "black" | "white" | "info" | "success" | "warning" | "danger" | "good" | "low" | "critical" | "working" | "stopped" | "idle" | "unknown" | "moving" | "active" | "excessive_usage" | null | undefined;
-    border?: "default" | "none" | null | undefined;
+    layout?: "default" | "containsDismiss" | "containsIcon" | null | undefined;
+    color?: "black" | "white" | "active" | "primary" | "neutral" | "info" | "success" | "warning" | "danger" | "good" | "low" | "critical" | "working" | "idle" | "moving" | "excessive_usage" | "stopped" | "unknown" | null | undefined;
+    border?: "none" | "default" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const cvaTagText: (props?: ({
     truncate?: boolean | null | undefined;

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

@@ -1,9 +1,9 @@
 export declare const cvaText: (props?: ({
-    align?: "left" | "right" | "center" | null | undefined;
+    align?: "center" | "left" | "right" | null | undefined;
     italic?: boolean | null | undefined;
     uppercase?: boolean | null | undefined;
     underline?: boolean | null | undefined;
-    weight?: "normal" | "bold" | "thick" | null | undefined;
+    weight?: "normal" | "thick" | "bold" | null | undefined;
     size?: "small" | "medium" | "large" | null | undefined;
     inverted?: boolean | null | undefined;
     subtle?: boolean | null | undefined;

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

@@ -1,12 +1,12 @@
 export declare const cvaTooltipIcon: (props?: ({
-    color?: "light" | "dark" | null | undefined;
+    color?: "dark" | "light" | null | undefined;
     defaultVariants?: "color" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const cvaTooltipPopover: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 export declare const cvaTooltipPopoverTail: (props?: ({
-    placement?: "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end" | null | undefined;
-    mode?: "light" | "dark" | null | undefined;
+    placement?: "left" | "right" | "bottom" | "top" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end" | null | undefined;
+    mode?: "dark" | "light" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const cvaTooltipPopoverContent: (props?: ({
-    color?: "light" | "dark" | null | undefined;
+    color?: "dark" | "light" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;

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

@@ -1,5 +1,5 @@
 export declare const cvaSegmentedValueBar: (props?: ({
-    size?: "extraSmall" | "small" | "large" | null | undefined;
+    size?: "small" | "large" | "extraSmall" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const cvaSegmentedValueBarText: (props?: ({
     size?: "small" | "large" | null | undefined;

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

@@ -1,3 +1,3 @@
 export declare const cvaValueBar: (props?: ({
-    size?: "extraSmall" | "small" | "large" | null | undefined;
+    size?: "small" | "large" | "extraSmall" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/src/components/buttons/shared/Button.variants.d.ts

@@ -1,5 +1,5 @@
 export declare const cvaButton: (props?: ({
-    variant?: "primary" | "primary-danger" | "secondary" | "secondary-danger" | "ghost" | "ghost-neutral" | "filled" | null | undefined;
+    variant?: "filled" | "primary" | "primary-danger" | "secondary" | "secondary-danger" | "ghost" | "ghost-neutral" | null | undefined;
     size?: "small" | "medium" | "large" | null | undefined;
     fullWidth?: boolean | null | undefined;
     square?: boolean | null | undefined;
@@ -8,11 +8,11 @@ export declare const cvaButton: (props?: ({
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const cvaButtonSpinnerContainer: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 export declare const cvaButtonSpinner: (props?: ({
-    variant?: "primary" | "primary-danger" | "secondary" | "secondary-danger" | "ghost" | "ghost-neutral" | "filled" | null | undefined;
+    variant?: "filled" | "primary" | "primary-danger" | "secondary" | "secondary-danger" | "ghost" | "ghost-neutral" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const cvaButtonPrefixSuffix: (props?: ({
     size?: "small" | "medium" | "large" | "extraSmall" | null | undefined;
-    variant?: "primary" | "primary-danger" | "secondary" | "secondary-danger" | "ghost" | "ghost-neutral" | "filled" | null | undefined;
+    variant?: "filled" | "primary" | "primary-danger" | "secondary" | "secondary-danger" | "ghost" | "ghost-neutral" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const cvaIconButton: (props?: ({
     size?: "small" | "medium" | "large" | null | undefined;