@trackunit/react-components 1.8.2 → 1.8.8

package/index.cjs.js

@@ -213,13 +213,13 @@ const cvaTag = cssClassVarianceUtilities.cvaMerge([
             success: ["bg-success-100", "text-success-700"],
             warning: ["bg-warning-100", "text-warning-700"],
             danger: ["bg-danger-100", "text-danger-700"],
-            good: ["bg-good-100", "text-good-700"],
+            good: ["bg-good-100", "text-good-800"],
             low: ["bg-low-100", "text-low-700"],
             critical: ["bg-critical-100", "text-critical-700"],
-            working: ["bg-working-100", "text-working-700"],
+            working: ["bg-working-50", "text-working-700"],
             stopped: ["bg-stopped-100", "text-stopped-700"],
             idle: ["bg-idle-100", "text-idle-700"],
-            unknown: ["bg-unknown-200", "text-unknown-700"],
+            unknown: ["bg-unknown-100", "text-unknown-500"],
             moving: ["bg-neutral-100", "text-neutral-700"],
             active: ["bg-neutral-100", "text-neutral-700"],
             excessive_usage: ["bg-danger-100", "text-danger-700"],
@@ -2312,7 +2312,7 @@ const cvaHighlight = cssClassVarianceUtilities.cvaMerge([
             success: ["bg-success-100", "text-success-700"],
             warning: ["bg-warning-100", "text-warning-700"],
             danger: ["bg-danger-100", "text-danger-700"],
-            unknown: ["bg-unknown-100", "text-unknown-700"],
+            unknown: ["bg-neutral-100", "text-neutral-700"],
             clear: ["font-normal", "px-0"],
         },
     },
@@ -2793,33 +2793,33 @@ const cvaIndicatorPing = cssClassVarianceUtilities.cvaMerge(["animate-ping-sm",
             warning: "bg-warning-600",
             danger: "bg-danger-600",
             good: "bg-good-600",
-            low: "bg-low-600",
+            low: "bg-low-500",
             critical: "bg-critical-600",
             working: "bg-working-500",
-            idle: "bg-idle-600",
+            idle: "bg-idle-500",
             stopped: "bg-stopped-700",
             moving: "bg-moving-600",
             active: "bg-active-600",
-            excessive_usage: "bg-danger-600",
+            excessive_usage: "bg-excessive_usage-600",
             unknown: "bg-unknown-400",
             unused: "bg-unused-400",
             utilized: "bg-utilized-600",
             heavily_utilized: "bg-heavily_utilized-500",
             unknown_utilization: "bg-unknown_utilization-600",
-            available: "bg-available-600",
-            on_rent: "bg-on_rent-600",
-            pickup_ready: "bg-pickup_ready-600",
+            available: "bg-available-500",
+            on_rent: "bg-on_rent-400",
+            pickup_ready: "bg-pickup_ready-500",
             transfer: "bg-transfer-600",
-            in_repair: "bg-in_repair-600",
-            returned: "bg-returned-600",
-            other_rental_status: "bg-other_rental_status-600",
+            in_repair: "bg-in_repair-400",
+            returned: "bg-returned-500",
+            other_rental_status: "bg-other_rental_status-500",
             site_area: "bg-site_area-600",
-            site_classic_poi: "bg-site_classic_poi-500",
-            site_classic_zone: "bg-site_classic_zone-500",
+            site_classic_poi: "bg-site_classic_poi-600",
+            site_classic_zone: "bg-site_classic_zone-600",
             site_depot: "bg-site_depot-500",
             site_work_place: "bg-site_work_place-600",
             site_construction_site: "bg-site_construction_site-500",
-            site_unknown: "bg-site_unknown-500",
+            site_unknown: "bg-site_unknown-600",
             white: "bg-white",
             black: "bg-black",
         },
@@ -2843,26 +2843,26 @@ const cvaIndicatorIconBackground = cssClassVarianceUtilities.cvaMerge(["rounded-
             stopped: "bg-stopped-100 text-stopped-700",
             moving: "text-moving-600 bg-neutral-100",
             active: "text-active-600 bg-neutral-100",
-            excessive_usage: "bg-danger-100 text-danger-600",
-            unknown: "bg-unknown-50 text-unknown-400",
-            unused: "bg-unused-300 text-unused-400",
-            utilized: "bg-utilized-400 text-utilized-600",
-            heavily_utilized: "bg-heavily_utilized-300 text-heavily_utilized-500",
-            unknown_utilization: "bg-unknown_utilization-300 text-unknown_utilization-600",
-            available: "bg-available-100 text-available-600",
-            on_rent: "bg-on_rent-100 text-on_rent-600",
-            pickup_ready: "bg-pickup_ready-100 text-pickup_ready-600",
+            excessive_usage: "bg-excessive_usage-100 text-excessive_usage-600",
+            unknown: "bg-unknown-100 text-unknown-400",
+            unused: "bg-unused-100 text-unused-400",
+            utilized: "bg-utilized-100 text-utilized-600",
+            heavily_utilized: "bg-heavily_utilized-100 text-heavily_utilized-500",
+            unknown_utilization: "bg-unknown_utilization-100 text-unknown_utilization-600",
+            available: "bg-available-100 text-available-500",
+            on_rent: "bg-on_rent-100 text-on_rent-400",
+            pickup_ready: "bg-pickup_ready-100 text-pickup_ready-500",
             transfer: "bg-transfer-100 text-transfer-600",
-            in_repair: "bg-in_repair-100 text-in_repair-600",
-            returned: "bg-returned-100 text-returned-600",
-            other_rental_status: "bg-other_rental_status-100 text-other_rental_status-600",
+            in_repair: "bg-in_repair-100 text-in_repair-700",
+            returned: "bg-returned-100 text-returned-500",
+            other_rental_status: "bg-other_rental_status-100 text-other_rental_status-500",
             site_area: "bg-site_area-100 text-site_area-600",
-            site_classic_poi: "bg-site_classic_poi-100 text-site_classic_poi-500",
-            site_classic_zone: "bg-site_classic_zone-100 text-site_classic_zone-500",
+            site_classic_poi: "bg-site_classic_poi-100 text-site_classic_poi-600",
+            site_classic_zone: "bg-site_classic_zone-100 text-site_classic_zone-600",
             site_depot: "bg-site_depot-100 text-site_depot-500",
             site_work_place: "bg-site_work_place-100 text-site_work_place-600",
             site_construction_site: "bg-site_construction_site-100 text-site_construction_site-500",
-            site_unknown: "bg-site_unknown-100 text-site_unknown-500",
+            site_unknown: "bg-site_unknown-100 text-site_unknown-600",
             white: "bg-white text-black",
             black: "bg-black text-white",
         },
@@ -3887,26 +3887,118 @@ const Tabs = ({ children, forceRender, className, dataTestId, fullWidth, ...rest
     return (jsxRuntime.jsx(reactTabs.Root, { className: cvaTabsRoot({ className }), "data-testid": dataTestId, ...rest, children: children }));
 };
 
-const cvaToggleGroup = cssClassVarianceUtilities.cvaMerge(["inline-flex", "divide-x", "divide-slate-300"]);
-const cvaToggleItem = cssClassVarianceUtilities.cvaMerge(["text-slate-600", "rounded-none", "bg-transparent", "flex", "border-x-0", "bg-white"], {
+const cvaToggleGroup = cssClassVarianceUtilities.cvaMerge(["inline-flex", "p-0.5", "bg-neutral-200", "rounded-md", "gap-1", "relative"]);
+const cvaToggleItem = cssClassVarianceUtilities.cvaMerge(["z-10", "group"], {
     variants: {
         selected: {
-            true: ["bg-slate-200", "hover:bg-slate-200", "text-slate-800"],
+            true: [],
+            false: [],
+        },
+        disabled: {
+            true: [],
             false: [],
         },
     },
+    compoundVariants: [
+        {
+            selected: true,
+            disabled: true,
+            class: ["bg-neutral-50", "shadow-none", "rounded"],
+        },
+    ],
 });
-const cvaToggleItemText = cssClassVarianceUtilities.cvaMerge(["text-ellipsis", "truncate", "flex-grow"], {
+const cvaToggleGroupWithSlidingBackground = cssClassVarianceUtilities.cvaMerge([], {
     variants: {
-        disabledAndSelected: {
-            true: ["text-slate-800"],
-            false: [],
+        isMounted: {
+            true: [
+                "before:absolute",
+                "before:top-0.5",
+                "before:bottom-0.5",
+                "before:left-[var(--sliding-left)]",
+                "before:w-[var(--sliding-width)]",
+                "before:transition-[left,width]",
+                "before:duration-[var(--transition-duration)]",
+                "before:ease-out",
+                "before:rounded",
+                "before:bg-white",
+                "before:z-0",
+                "before:content-['']",
+                "before:shadow-md",
+            ],
         },
+    },
+});
+const cvaToggleItemText = cssClassVarianceUtilities.cvaMerge(["text-ellipsis", "truncate", "flex-grow", "font-medium"], {
+    variants: {
         maxWidth: {
             sm: ["max-w-[80px]"],
             md: ["max-w-[120px]"],
         },
+        selected: {
+            true: [],
+            false: [],
+        },
+        disabled: {
+            true: [],
+            false: [],
+        },
+    },
+    compoundVariants: [
+        {
+            selected: true,
+            disabled: false,
+            class: ["text-neutral-900"],
+        },
+        {
+            selected: true,
+            disabled: true,
+            class: ["text-neutral-400"],
+        },
+        {
+            selected: false,
+            disabled: false,
+            class: ["text-neutral-600", "group-hover:text-neutral-900"],
+        },
+        {
+            selected: false,
+            disabled: true,
+            class: ["text-neutral-400"],
+        },
+    ],
+});
+const cvaToggleItemContent = cssClassVarianceUtilities.cvaMerge([], {
+    variants: {
+        selected: {
+            true: [],
+            false: [],
+        },
+        disabled: {
+            true: [],
+            false: [],
+        },
     },
+    compoundVariants: [
+        {
+            selected: true,
+            disabled: false,
+            class: ["text-neutral-700"],
+        },
+        {
+            selected: true,
+            disabled: true,
+            class: ["text-neutral-300"],
+        },
+        {
+            selected: false,
+            disabled: false,
+            class: ["text-neutral-500", "group-hover:text-neutral-900"],
+        },
+        {
+            selected: false,
+            disabled: true,
+            class: ["text-neutral-400"],
+        },
+    ],
 });
 
 /**
@@ -3916,16 +4008,53 @@ const cvaToggleItemText = cssClassVarianceUtilities.cvaMerge(["text-ellipsis", "
  * @returns {ReactElement} ToggleGroup component
  */
 const ToggleGroup = ({ list, selected, setSelected, onChange, disabled = false, size = "medium", isIconOnly = false, className, dataTestId, }) => {
-    return (jsxRuntime.jsx("div", { className: cvaToggleGroup({ className }), "data-testid": dataTestId, children: list.map((item, index) => (jsxRuntime.jsx(ToggleItem, { className: tailwindMerge.twMerge(item.className, index === 0 ? ["rounded-l-md", "border-l"] : "", index === list.length - 1 ? ["rounded-r-md", "border-r"] : ""), dataTestId: item.dataTestId, disabled: disabled, iconName: item.iconName, isIconOnly: isIconOnly, onClick: () => {
+    const [isMounted, setIsMounted] = react.useState(false);
+    const buttonRefs = react.useRef([]);
+    const selectedIndex = list.findIndex(item => item.id === selected);
+    const validIndex = selectedIndex >= 0 ? selectedIndex : 0;
+    const containerPadding = 2; // p-0.5 = 2px
+    const gap = 4;
+    const slidingLeft = containerPadding +
+        buttonRefs.current.slice(0, validIndex).reduce((sum, ref) => sum + (ref?.offsetWidth || 0) + gap, 0);
+    const slidingWidth = buttonRefs.current[validIndex]?.offsetWidth || 0;
+    react.useEffect(() => {
+        setIsMounted(true);
+    }, []);
+    return (jsxRuntime.jsx("div", { className: tailwindMerge.twMerge(cvaToggleGroup({ className }), cvaToggleGroupWithSlidingBackground({ isMounted })), "data-testid": dataTestId, style: 
+        // eslint-disable-next-line local-rules/no-typescript-assertion
+        {
+            "--sliding-left": `${slidingLeft}px`,
+            "--sliding-width": `${slidingWidth}px`,
+            "--transition-duration": "200ms",
+        }, children: list.map((item, index) => (jsxRuntime.jsx(ToggleItem, { className: item.className, dataTestId: item.dataTestId, disabled: disabled, iconName: item.iconName, isIconOnly: isIconOnly, onClick: () => {
                 setSelected(item.id);
                 onChange?.(item.id);
-            }, selected: selected === item.id, size: size, text: item.text, title: item.title, tooltip: item.tooltip }, item.id))) }));
+            }, ref: el => (buttonRefs.current[index] = el), selected: selected === item.id, size: size, text: item.text, title: item.title, tooltip: item.tooltip }, item.id))) }));
 };
-/**
- * Individual ToggleItem to create custom ToggleGroups
- */
-const ToggleItem = ({ title, onClick, disabled = false, isIconOnly = false, iconName, size, className, selected = false, text, tooltip, dataTestId, }) => {
-    return isIconOnly ? (jsxRuntime.jsx(Tooltip, { label: tooltip?.content || title, placement: tooltip?.placement || "top", children: jsxRuntime.jsx(IconButton, { className: cvaToggleItem({ className, selected }), "data-testid": dataTestId, disabled: disabled, icon: iconName ? (jsxRuntime.jsx(Icon, { className: selected ? "text-slate-600" : "text-slate-400", name: iconName, size: "small" })) : null, onClick: onClick, size: size, title: iconName, variant: "secondary" }) })) : (jsxRuntime.jsx(Tooltip, { disabled: !tooltip?.content, label: tooltip?.content, placement: tooltip?.placement || "top", children: jsxRuntime.jsx(Button, { className: cvaToggleItem({ className, selected }), "data-testid": dataTestId, disabled: disabled, onClick: onClick, prefix: iconName ? (jsxRuntime.jsx(Icon, { className: selected ? "text-slate-600" : "text-slate-400", name: iconName, size: "small" })) : null, size: size, variant: "secondary", children: jsxRuntime.jsx("span", { className: cvaToggleItemText({ disabledAndSelected: disabled && selected, maxWidth: text?.maxWidth }), children: title }) }) }));
+const ToggleItem = ({ title, onClick, disabled, isIconOnly, iconName, size, className, selected, text, tooltip, dataTestId, ref, }) => {
+    return isIconOnly ? (jsxRuntime.jsx(Tooltip, { label: tooltip?.content || title, placement: tooltip?.placement || "top", children: jsxRuntime.jsx(ToggleButton, { className: cvaToggleItem({
+                className,
+                selected,
+                disabled,
+            }), dataTestId: dataTestId, disabled: disabled, icon: iconName ? (jsxRuntime.jsx(Icon, { className: cvaToggleItemContent({ selected, disabled }), name: iconName, size: size === "large" ? "medium" : "small" })) : null, isIconOnly: isIconOnly, onClick: onClick, ref: ref, size: size, title: title }) })) : (jsxRuntime.jsx(Tooltip, { disabled: !tooltip?.content && !text?.truncate, label: tooltip?.content || title, placement: tooltip?.placement || "top", children: jsxRuntime.jsx(ToggleButton, { className: cvaToggleItem({
+                className,
+                selected,
+                disabled,
+            }), dataTestId: dataTestId, disabled: disabled, iconPrefix: iconName ? (jsxRuntime.jsx(Icon, { className: cvaToggleItemContent({ selected, disabled }), name: iconName, size: size === "large" ? "medium" : "small" })) : null, isIconOnly: isIconOnly, onClick: onClick, ref: ref, size: size, title: title, children: jsxRuntime.jsx("span", { className: cvaToggleItemText({ maxWidth: text?.maxWidth, selected, disabled }), children: title }) }) }));
+};
+const ToggleButton = ({ title, size, children, dataTestId, className, icon, iconPrefix, isIconOnly, ...rest }) => {
+    const sizeClasses = {
+        small: "px-2 py-1 text-xs",
+        medium: "px-2 py-1 text-sm",
+        large: "px-2.5 py-1.5 text-base",
+    };
+    const iconOnlySizeClasses = {
+        small: "p-1 text-xs",
+        medium: "p-1.5 text-sm",
+        large: "p-2 text-base",
+    };
+    const paddingClasses = isIconOnly ? iconOnlySizeClasses[size] : sizeClasses[size];
+    return (jsxRuntime.jsx("button", { className: tailwindMerge.twMerge("flex items-center justify-center gap-1 self-stretch", paddingClasses, className), "data-testid": dataTestId, title: isIconOnly ? title : undefined, ...rest, children: isIconOnly ? (icon) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [iconPrefix, children] })) }));
 };
 
 const cvaValueBar = cssClassVarianceUtilities.cvaMerge([
@@ -4225,7 +4354,6 @@ exports.Tabs = Tabs;
 exports.Tag = Tag;
 exports.Text = Text;
 exports.ToggleGroup = ToggleGroup;
-exports.ToggleItem = ToggleItem;
 exports.Tooltip = Tooltip;
 exports.ValueBar = ValueBar;
 exports.VirtualizedList = VirtualizedList;
@@ -4253,7 +4381,9 @@ exports.cvaPageHeader = cvaPageHeader;
 exports.cvaPageHeaderContainer = cvaPageHeaderContainer;
 exports.cvaPageHeaderHeading = cvaPageHeaderHeading;
 exports.cvaToggleGroup = cvaToggleGroup;
+exports.cvaToggleGroupWithSlidingBackground = cvaToggleGroupWithSlidingBackground;
 exports.cvaToggleItem = cvaToggleItem;
+exports.cvaToggleItemContent = cvaToggleItemContent;
 exports.cvaToggleItemText = cvaToggleItemText;
 exports.cvaVirtualizedList = cvaVirtualizedList;
 exports.cvaVirtualizedListContainer = cvaVirtualizedListContainer;

package/index.esm.js

@@ -211,13 +211,13 @@ const cvaTag = cvaMerge([
             success: ["bg-success-100", "text-success-700"],
             warning: ["bg-warning-100", "text-warning-700"],
             danger: ["bg-danger-100", "text-danger-700"],
-            good: ["bg-good-100", "text-good-700"],
+            good: ["bg-good-100", "text-good-800"],
             low: ["bg-low-100", "text-low-700"],
             critical: ["bg-critical-100", "text-critical-700"],
-            working: ["bg-working-100", "text-working-700"],
+            working: ["bg-working-50", "text-working-700"],
             stopped: ["bg-stopped-100", "text-stopped-700"],
             idle: ["bg-idle-100", "text-idle-700"],
-            unknown: ["bg-unknown-200", "text-unknown-700"],
+            unknown: ["bg-unknown-100", "text-unknown-500"],
             moving: ["bg-neutral-100", "text-neutral-700"],
             active: ["bg-neutral-100", "text-neutral-700"],
             excessive_usage: ["bg-danger-100", "text-danger-700"],
@@ -2310,7 +2310,7 @@ const cvaHighlight = cvaMerge([
             success: ["bg-success-100", "text-success-700"],
             warning: ["bg-warning-100", "text-warning-700"],
             danger: ["bg-danger-100", "text-danger-700"],
-            unknown: ["bg-unknown-100", "text-unknown-700"],
+            unknown: ["bg-neutral-100", "text-neutral-700"],
             clear: ["font-normal", "px-0"],
         },
     },
@@ -2791,33 +2791,33 @@ const cvaIndicatorPing = cvaMerge(["animate-ping-sm", "absolute", "inline-flex",
             warning: "bg-warning-600",
             danger: "bg-danger-600",
             good: "bg-good-600",
-            low: "bg-low-600",
+            low: "bg-low-500",
             critical: "bg-critical-600",
             working: "bg-working-500",
-            idle: "bg-idle-600",
+            idle: "bg-idle-500",
             stopped: "bg-stopped-700",
             moving: "bg-moving-600",
             active: "bg-active-600",
-            excessive_usage: "bg-danger-600",
+            excessive_usage: "bg-excessive_usage-600",
             unknown: "bg-unknown-400",
             unused: "bg-unused-400",
             utilized: "bg-utilized-600",
             heavily_utilized: "bg-heavily_utilized-500",
             unknown_utilization: "bg-unknown_utilization-600",
-            available: "bg-available-600",
-            on_rent: "bg-on_rent-600",
-            pickup_ready: "bg-pickup_ready-600",
+            available: "bg-available-500",
+            on_rent: "bg-on_rent-400",
+            pickup_ready: "bg-pickup_ready-500",
             transfer: "bg-transfer-600",
-            in_repair: "bg-in_repair-600",
-            returned: "bg-returned-600",
-            other_rental_status: "bg-other_rental_status-600",
+            in_repair: "bg-in_repair-400",
+            returned: "bg-returned-500",
+            other_rental_status: "bg-other_rental_status-500",
             site_area: "bg-site_area-600",
-            site_classic_poi: "bg-site_classic_poi-500",
-            site_classic_zone: "bg-site_classic_zone-500",
+            site_classic_poi: "bg-site_classic_poi-600",
+            site_classic_zone: "bg-site_classic_zone-600",
             site_depot: "bg-site_depot-500",
             site_work_place: "bg-site_work_place-600",
             site_construction_site: "bg-site_construction_site-500",
-            site_unknown: "bg-site_unknown-500",
+            site_unknown: "bg-site_unknown-600",
             white: "bg-white",
             black: "bg-black",
         },
@@ -2841,26 +2841,26 @@ const cvaIndicatorIconBackground = cvaMerge(["rounded-full", "items-center", "ju
             stopped: "bg-stopped-100 text-stopped-700",
             moving: "text-moving-600 bg-neutral-100",
             active: "text-active-600 bg-neutral-100",
-            excessive_usage: "bg-danger-100 text-danger-600",
-            unknown: "bg-unknown-50 text-unknown-400",
-            unused: "bg-unused-300 text-unused-400",
-            utilized: "bg-utilized-400 text-utilized-600",
-            heavily_utilized: "bg-heavily_utilized-300 text-heavily_utilized-500",
-            unknown_utilization: "bg-unknown_utilization-300 text-unknown_utilization-600",
-            available: "bg-available-100 text-available-600",
-            on_rent: "bg-on_rent-100 text-on_rent-600",
-            pickup_ready: "bg-pickup_ready-100 text-pickup_ready-600",
+            excessive_usage: "bg-excessive_usage-100 text-excessive_usage-600",
+            unknown: "bg-unknown-100 text-unknown-400",
+            unused: "bg-unused-100 text-unused-400",
+            utilized: "bg-utilized-100 text-utilized-600",
+            heavily_utilized: "bg-heavily_utilized-100 text-heavily_utilized-500",
+            unknown_utilization: "bg-unknown_utilization-100 text-unknown_utilization-600",
+            available: "bg-available-100 text-available-500",
+            on_rent: "bg-on_rent-100 text-on_rent-400",
+            pickup_ready: "bg-pickup_ready-100 text-pickup_ready-500",
             transfer: "bg-transfer-100 text-transfer-600",
-            in_repair: "bg-in_repair-100 text-in_repair-600",
-            returned: "bg-returned-100 text-returned-600",
-            other_rental_status: "bg-other_rental_status-100 text-other_rental_status-600",
+            in_repair: "bg-in_repair-100 text-in_repair-700",
+            returned: "bg-returned-100 text-returned-500",
+            other_rental_status: "bg-other_rental_status-100 text-other_rental_status-500",
             site_area: "bg-site_area-100 text-site_area-600",
-            site_classic_poi: "bg-site_classic_poi-100 text-site_classic_poi-500",
-            site_classic_zone: "bg-site_classic_zone-100 text-site_classic_zone-500",
+            site_classic_poi: "bg-site_classic_poi-100 text-site_classic_poi-600",
+            site_classic_zone: "bg-site_classic_zone-100 text-site_classic_zone-600",
             site_depot: "bg-site_depot-100 text-site_depot-500",
             site_work_place: "bg-site_work_place-100 text-site_work_place-600",
             site_construction_site: "bg-site_construction_site-100 text-site_construction_site-500",
-            site_unknown: "bg-site_unknown-100 text-site_unknown-500",
+            site_unknown: "bg-site_unknown-100 text-site_unknown-600",
             white: "bg-white text-black",
             black: "bg-black text-white",
         },
@@ -3885,26 +3885,118 @@ const Tabs = ({ children, forceRender, className, dataTestId, fullWidth, ...rest
     return (jsx(Root, { className: cvaTabsRoot({ className }), "data-testid": dataTestId, ...rest, children: children }));
 };
 
-const cvaToggleGroup = cvaMerge(["inline-flex", "divide-x", "divide-slate-300"]);
-const cvaToggleItem = cvaMerge(["text-slate-600", "rounded-none", "bg-transparent", "flex", "border-x-0", "bg-white"], {
+const cvaToggleGroup = cvaMerge(["inline-flex", "p-0.5", "bg-neutral-200", "rounded-md", "gap-1", "relative"]);
+const cvaToggleItem = cvaMerge(["z-10", "group"], {
     variants: {
         selected: {
-            true: ["bg-slate-200", "hover:bg-slate-200", "text-slate-800"],
+            true: [],
+            false: [],
+        },
+        disabled: {
+            true: [],
             false: [],
         },
     },
+    compoundVariants: [
+        {
+            selected: true,
+            disabled: true,
+            class: ["bg-neutral-50", "shadow-none", "rounded"],
+        },
+    ],
 });
-const cvaToggleItemText = cvaMerge(["text-ellipsis", "truncate", "flex-grow"], {
+const cvaToggleGroupWithSlidingBackground = cvaMerge([], {
     variants: {
-        disabledAndSelected: {
-            true: ["text-slate-800"],
-            false: [],
+        isMounted: {
+            true: [
+                "before:absolute",
+                "before:top-0.5",
+                "before:bottom-0.5",
+                "before:left-[var(--sliding-left)]",
+                "before:w-[var(--sliding-width)]",
+                "before:transition-[left,width]",
+                "before:duration-[var(--transition-duration)]",
+                "before:ease-out",
+                "before:rounded",
+                "before:bg-white",
+                "before:z-0",
+                "before:content-['']",
+                "before:shadow-md",
+            ],
         },
+    },
+});
+const cvaToggleItemText = cvaMerge(["text-ellipsis", "truncate", "flex-grow", "font-medium"], {
+    variants: {
         maxWidth: {
             sm: ["max-w-[80px]"],
             md: ["max-w-[120px]"],
         },
+        selected: {
+            true: [],
+            false: [],
+        },
+        disabled: {
+            true: [],
+            false: [],
+        },
+    },
+    compoundVariants: [
+        {
+            selected: true,
+            disabled: false,
+            class: ["text-neutral-900"],
+        },
+        {
+            selected: true,
+            disabled: true,
+            class: ["text-neutral-400"],
+        },
+        {
+            selected: false,
+            disabled: false,
+            class: ["text-neutral-600", "group-hover:text-neutral-900"],
+        },
+        {
+            selected: false,
+            disabled: true,
+            class: ["text-neutral-400"],
+        },
+    ],
+});
+const cvaToggleItemContent = cvaMerge([], {
+    variants: {
+        selected: {
+            true: [],
+            false: [],
+        },
+        disabled: {
+            true: [],
+            false: [],
+        },
     },
+    compoundVariants: [
+        {
+            selected: true,
+            disabled: false,
+            class: ["text-neutral-700"],
+        },
+        {
+            selected: true,
+            disabled: true,
+            class: ["text-neutral-300"],
+        },
+        {
+            selected: false,
+            disabled: false,
+            class: ["text-neutral-500", "group-hover:text-neutral-900"],
+        },
+        {
+            selected: false,
+            disabled: true,
+            class: ["text-neutral-400"],
+        },
+    ],
 });
 
 /**
@@ -3914,16 +4006,53 @@ const cvaToggleItemText = cvaMerge(["text-ellipsis", "truncate", "flex-grow"], {
  * @returns {ReactElement} ToggleGroup component
  */
 const ToggleGroup = ({ list, selected, setSelected, onChange, disabled = false, size = "medium", isIconOnly = false, className, dataTestId, }) => {
-    return (jsx("div", { className: cvaToggleGroup({ className }), "data-testid": dataTestId, children: list.map((item, index) => (jsx(ToggleItem, { className: twMerge(item.className, index === 0 ? ["rounded-l-md", "border-l"] : "", index === list.length - 1 ? ["rounded-r-md", "border-r"] : ""), dataTestId: item.dataTestId, disabled: disabled, iconName: item.iconName, isIconOnly: isIconOnly, onClick: () => {
+    const [isMounted, setIsMounted] = useState(false);
+    const buttonRefs = useRef([]);
+    const selectedIndex = list.findIndex(item => item.id === selected);
+    const validIndex = selectedIndex >= 0 ? selectedIndex : 0;
+    const containerPadding = 2; // p-0.5 = 2px
+    const gap = 4;
+    const slidingLeft = containerPadding +
+        buttonRefs.current.slice(0, validIndex).reduce((sum, ref) => sum + (ref?.offsetWidth || 0) + gap, 0);
+    const slidingWidth = buttonRefs.current[validIndex]?.offsetWidth || 0;
+    useEffect(() => {
+        setIsMounted(true);
+    }, []);
+    return (jsx("div", { className: twMerge(cvaToggleGroup({ className }), cvaToggleGroupWithSlidingBackground({ isMounted })), "data-testid": dataTestId, style: 
+        // eslint-disable-next-line local-rules/no-typescript-assertion
+        {
+            "--sliding-left": `${slidingLeft}px`,
+            "--sliding-width": `${slidingWidth}px`,
+            "--transition-duration": "200ms",
+        }, children: list.map((item, index) => (jsx(ToggleItem, { className: item.className, dataTestId: item.dataTestId, disabled: disabled, iconName: item.iconName, isIconOnly: isIconOnly, onClick: () => {
                 setSelected(item.id);
                 onChange?.(item.id);
-            }, selected: selected === item.id, size: size, text: item.text, title: item.title, tooltip: item.tooltip }, item.id))) }));
+            }, ref: el => (buttonRefs.current[index] = el), selected: selected === item.id, size: size, text: item.text, title: item.title, tooltip: item.tooltip }, item.id))) }));
 };
-/**
- * Individual ToggleItem to create custom ToggleGroups
- */
-const ToggleItem = ({ title, onClick, disabled = false, isIconOnly = false, iconName, size, className, selected = false, text, tooltip, dataTestId, }) => {
-    return isIconOnly ? (jsx(Tooltip, { label: tooltip?.content || title, placement: tooltip?.placement || "top", children: jsx(IconButton, { className: cvaToggleItem({ className, selected }), "data-testid": dataTestId, disabled: disabled, icon: iconName ? (jsx(Icon, { className: selected ? "text-slate-600" : "text-slate-400", name: iconName, size: "small" })) : null, onClick: onClick, size: size, title: iconName, variant: "secondary" }) })) : (jsx(Tooltip, { disabled: !tooltip?.content, label: tooltip?.content, placement: tooltip?.placement || "top", children: jsx(Button, { className: cvaToggleItem({ className, selected }), "data-testid": dataTestId, disabled: disabled, onClick: onClick, prefix: iconName ? (jsx(Icon, { className: selected ? "text-slate-600" : "text-slate-400", name: iconName, size: "small" })) : null, size: size, variant: "secondary", children: jsx("span", { className: cvaToggleItemText({ disabledAndSelected: disabled && selected, maxWidth: text?.maxWidth }), children: title }) }) }));
+const ToggleItem = ({ title, onClick, disabled, isIconOnly, iconName, size, className, selected, text, tooltip, dataTestId, ref, }) => {
+    return isIconOnly ? (jsx(Tooltip, { label: tooltip?.content || title, placement: tooltip?.placement || "top", children: jsx(ToggleButton, { className: cvaToggleItem({
+                className,
+                selected,
+                disabled,
+            }), dataTestId: dataTestId, disabled: disabled, icon: iconName ? (jsx(Icon, { className: cvaToggleItemContent({ selected, disabled }), name: iconName, size: size === "large" ? "medium" : "small" })) : null, isIconOnly: isIconOnly, onClick: onClick, ref: ref, size: size, title: title }) })) : (jsx(Tooltip, { disabled: !tooltip?.content && !text?.truncate, label: tooltip?.content || title, placement: tooltip?.placement || "top", children: jsx(ToggleButton, { className: cvaToggleItem({
+                className,
+                selected,
+                disabled,
+            }), dataTestId: dataTestId, disabled: disabled, iconPrefix: iconName ? (jsx(Icon, { className: cvaToggleItemContent({ selected, disabled }), name: iconName, size: size === "large" ? "medium" : "small" })) : null, isIconOnly: isIconOnly, onClick: onClick, ref: ref, size: size, title: title, children: jsx("span", { className: cvaToggleItemText({ maxWidth: text?.maxWidth, selected, disabled }), children: title }) }) }));
+};
+const ToggleButton = ({ title, size, children, dataTestId, className, icon, iconPrefix, isIconOnly, ...rest }) => {
+    const sizeClasses = {
+        small: "px-2 py-1 text-xs",
+        medium: "px-2 py-1 text-sm",
+        large: "px-2.5 py-1.5 text-base",
+    };
+    const iconOnlySizeClasses = {
+        small: "p-1 text-xs",
+        medium: "p-1.5 text-sm",
+        large: "p-2 text-base",
+    };
+    const paddingClasses = isIconOnly ? iconOnlySizeClasses[size] : sizeClasses[size];
+    return (jsx("button", { className: twMerge("flex items-center justify-center gap-1 self-stretch", paddingClasses, className), "data-testid": dataTestId, title: isIconOnly ? title : undefined, ...rest, children: isIconOnly ? (icon) : (jsxs(Fragment, { children: [iconPrefix, children] })) }));
 };
 
 const cvaValueBar = cvaMerge([
@@ -4166,4 +4295,4 @@ const cvaClickable = cvaMerge([
     },
 });
 
-export { ActionRenderer, Alert, Badge, Breadcrumb, BreadcrumbContainer, Button, Card, CardBody, CardFooter, CardHeader, Collapse, CompletionStatusIndicator, CopyableText, EmptyState, EmptyValue, ExternalLink, Heading, Highlight, Icon, IconButton, Indicator, KPI, KPICard, MenuDivider, MenuItem, MenuList, MoreMenu, Notice, PackageNameStoryComponent, Page, PageContent, PageHeader, PageHeaderKpiMetrics, PageHeaderSecondaryActions, PageHeaderTitle, Pagination, Polygon, Popover, PopoverContent, PopoverTitle, PopoverTrigger, Portal, Prompt, ROLE_CARD, SectionHeader, Sidebar, SkeletonLines, Spacer, Spinner, StarButton, Tab, TabContent, TabList, Tabs, Tag, Text, ToggleGroup, ToggleItem, Tooltip, ValueBar, VirtualizedList, ZStack, cvaButton, cvaButtonPrefixSuffix, cvaButtonSpinner, cvaButtonSpinnerContainer, cvaClickable, cvaContainerStyles, cvaIconButton, cvaImgStyles, cvaIndicator, cvaIndicatorIcon, cvaIndicatorIconBackground, cvaIndicatorLabel, cvaIndicatorPing, cvaInteractableItem, cvaMenuItem, cvaMenuItemLabel, cvaMenuItemPrefix, cvaMenuItemStyle, cvaMenuItemSuffix, cvaPageHeader, cvaPageHeaderContainer, cvaPageHeaderHeading, cvaToggleGroup, cvaToggleItem, cvaToggleItemText, cvaVirtualizedList, cvaVirtualizedListContainer, cvaVirtualizedListItem, cvaZStackContainer, cvaZStackItem, docs, getDevicePixelRatio, getValueBarColorByValue, iconColorNames, iconPalette, useClickOutside, useContainerBreakpoints, useContinuousTimeout, useDebounce, useDevicePixelRatio, useElevatedReducer, useElevatedState, useGeometry, useHover, useIsFirstRender, useIsFullscreen, useIsTextTruncated, useModifierKey, useOverflowItems, usePopoverContext, usePrompt, useResize, useScrollDetection, useSelfUpdatingRef, useTimeout, useViewportBreakpoints, useWatch, useWindowActivity };
+export { ActionRenderer, Alert, Badge, Breadcrumb, BreadcrumbContainer, Button, Card, CardBody, CardFooter, CardHeader, Collapse, CompletionStatusIndicator, CopyableText, EmptyState, EmptyValue, ExternalLink, Heading, Highlight, Icon, IconButton, Indicator, KPI, KPICard, MenuDivider, MenuItem, MenuList, MoreMenu, Notice, PackageNameStoryComponent, Page, PageContent, PageHeader, PageHeaderKpiMetrics, PageHeaderSecondaryActions, PageHeaderTitle, Pagination, Polygon, Popover, PopoverContent, PopoverTitle, PopoverTrigger, Portal, Prompt, ROLE_CARD, SectionHeader, Sidebar, SkeletonLines, Spacer, Spinner, StarButton, Tab, TabContent, TabList, Tabs, Tag, Text, ToggleGroup, Tooltip, ValueBar, VirtualizedList, ZStack, cvaButton, cvaButtonPrefixSuffix, cvaButtonSpinner, cvaButtonSpinnerContainer, cvaClickable, cvaContainerStyles, cvaIconButton, cvaImgStyles, cvaIndicator, cvaIndicatorIcon, cvaIndicatorIconBackground, cvaIndicatorLabel, cvaIndicatorPing, cvaInteractableItem, cvaMenuItem, cvaMenuItemLabel, cvaMenuItemPrefix, cvaMenuItemStyle, cvaMenuItemSuffix, cvaPageHeader, cvaPageHeaderContainer, cvaPageHeaderHeading, cvaToggleGroup, cvaToggleGroupWithSlidingBackground, cvaToggleItem, cvaToggleItemContent, cvaToggleItemText, cvaVirtualizedList, cvaVirtualizedListContainer, cvaVirtualizedListItem, cvaZStackContainer, cvaZStackItem, docs, getDevicePixelRatio, getValueBarColorByValue, iconColorNames, iconPalette, useClickOutside, useContainerBreakpoints, useContinuousTimeout, useDebounce, useDevicePixelRatio, useElevatedReducer, useElevatedState, useGeometry, useHover, useIsFirstRender, useIsFullscreen, useIsTextTruncated, useModifierKey, useOverflowItems, usePopoverContext, usePrompt, useResize, useScrollDetection, useSelfUpdatingRef, useTimeout, useViewportBreakpoints, useWatch, useWindowActivity };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "1.8.2",
+  "version": "1.8.8",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -17,12 +17,12 @@
     "@floating-ui/react": "^0.26.25",
     "string-ts": "^2.0.0",
     "tailwind-merge": "^2.0.0",
-    "@trackunit/ui-design-tokens": "1.6.35",
-    "@trackunit/css-class-variance-utilities": "1.6.34",
-    "@trackunit/shared-utils": "1.8.34",
-    "@trackunit/ui-icons": "1.6.33",
-    "@trackunit/react-table-pagination": "1.6.33",
-    "@trackunit/react-test-setup": "1.3.34",
+    "@trackunit/ui-design-tokens": "1.6.40",
+    "@trackunit/css-class-variance-utilities": "1.6.38",
+    "@trackunit/shared-utils": "1.8.38",
+    "@trackunit/ui-icons": "1.6.37",
+    "@trackunit/react-table-pagination": "1.6.37",
+    "@trackunit/react-test-setup": "1.3.38",
     "@tanstack/react-router": "1.114.29"
   },
   "module": "./index.esm.js",

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

@@ -98,15 +98,15 @@ export declare const iconPalette: {
         readonly 800: "31 41 55";
     };
     WORKING: {
-        readonly 100: "219 234 254";
+        readonly 50: "239 246 255";
         readonly 500: "59 130 246";
-        readonly 600: "37 99 235";
+        readonly 700: "29 78 216";
         readonly 900: "30 58 138";
     };
     IDLE: {
         readonly 100: "254 243 199";
         readonly 500: "245 158 11";
-        readonly 600: "217 119 6";
+        readonly 700: "180 83 9";
         readonly 900: "120 53 15";
     };
     STOPPED: {
@@ -150,7 +150,7 @@ export declare const iconPalette: {
         readonly 100: "254 243 199";
         readonly 300: "252 211 77";
         readonly 500: "245 158 11";
-        readonly 600: "217 119 6";
+        readonly 700: "180 83 9";
         readonly 800: "146 64 14";
     };
     CRITICAL: {

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

@@ -1,6 +1,7 @@
 import { VariantProps } from "@trackunit/css-class-variance-utilities";
 import { MappedOmit } from "@trackunit/shared-utils";
 import { IconName } from "@trackunit/ui-icons";
+import { Dispatch, SetStateAction } from "react";
 import { CommonProps } from "../../common/CommonProps";
 import { TooltipPlacement } from "../Tooltip/Tooltip";
 import { cvaToggleGroup } from "./ToggleGroup.variants";
@@ -45,15 +46,15 @@ export type ToggleGroupProps<TSelectedId extends string = string> = CommonProps
     onChange?: (selectedId: TSelectedId) => void;
     disabled?: boolean;
     /**
-     * ToggleGroup buttons can be one of two sizes
+     * ToggleGroup buttons can be one of three sizes
      */
-    size?: "small" | "medium";
+    size?: "small" | "medium" | "large";
     /**
      * Enable to use toggle buttons with icons only and a tooltip on hover
      */
     isIconOnly?: boolean;
     selected: TSelectedId;
-    setSelected: React.Dispatch<React.SetStateAction<TSelectedId>>;
+    setSelected: Dispatch<SetStateAction<TSelectedId>>;
 };
 /**
  *  Toggle Group allows users to toggle between two or more closely related options, and immediately apply that selection.
@@ -63,13 +64,22 @@ export type ToggleGroupProps<TSelectedId extends string = string> = CommonProps
  */
 export declare const ToggleGroup: <TSelectedId extends string = string>({ list, selected, setSelected, onChange, disabled, size, isIconOnly, className, dataTestId, }: ToggleGroupProps<TSelectedId>) => import("react/jsx-runtime").JSX.Element;
 export interface ToggleItemProps extends CommonProps, MappedOmit<BasicToggleGroupListProps<string>, "id"> {
+    title: string;
+    text?: {
+        truncate: boolean;
+        maxWidth: "sm" | "md";
+    };
+    tooltip?: {
+        content?: string;
+        placement?: TooltipPlacement;
+    };
     onClick: (event?: React.MouseEvent<HTMLElement>) => void;
-    disabled?: boolean;
-    isIconOnly?: boolean;
-    size?: "small" | "medium";
-    selected?: boolean;
+    selected: boolean;
+    disabled: boolean;
+    size: "small" | "medium" | "large";
+    isIconOnly: boolean;
+    iconName?: IconName;
+    className?: string;
+    dataTestId?: string;
+    ref?: (el: HTMLButtonElement | null) => void;
 }
-/**
- * Individual ToggleItem to create custom ToggleGroups
- */
-export declare const ToggleItem: ({ title, onClick, disabled, isIconOnly, iconName, size, className, selected, text, tooltip, dataTestId, }: ToggleItemProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,8 +1,17 @@
 export declare const cvaToggleGroup: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
 export declare const cvaToggleItem: (props?: ({
     selected?: boolean | null | undefined;
+    disabled?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const cvaToggleGroupWithSlidingBackground: (props?: ({
+    isMounted?: boolean | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export declare const cvaToggleItemText: (props?: ({
-    disabledAndSelected?: boolean | null | undefined;
     maxWidth?: "sm" | "md" | null | undefined;
+    selected?: boolean | null | undefined;
+    disabled?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const cvaToggleItemContent: (props?: ({
+    selected?: boolean | null | undefined;
+    disabled?: boolean | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;