@trackunit/react-components 1.4.115 → 1.4.118

package/index.cjs.js

@@ -134,7 +134,7 @@ const isSafari = () => {
  * @param {IconProps} props - The props for the Icon component
  * @returns {ReactElement} Icon component
  */
-const Icon = ({ name, size = "medium", className, dataTestId, color, onClick, type, style, forwardedRef, ariaLabel, fontSize, ariaLabelledBy, ariaDescribedBy, }) => {
+const Icon = ({ name, size = "medium", className, dataTestId, color, onClick, type, style, forwardedRef, ariaLabel, fontSize, ariaLabelledBy, ariaDescribedBy, ariaHidden, }) => {
     const useTagRef = react.useRef(null);
     const ICON_CONTAINER_ID = sharedUtils.uuidv4();
     const correctIconType = react.useMemo(() => {
@@ -173,7 +173,7 @@ const Icon = ({ name, size = "medium", className, dataTestId, color, onClick, ty
             useTagRef.current.setAttribute("href", href[correctIconType]);
         }
     }, [correctIconType, href]);
-    return (jsxRuntime.jsx("span", { "aria-describedby": ariaDescribedBy, "aria-label": ariaLabel ? ariaLabel : stringTs.titleCase(iconName), "aria-labelledby": ariaLabelledBy, className: cvaIcon({ color, size, fontSize, className }), "data-testid": dataTestId, id: ICON_CONTAINER_ID, onClick: onClick, ref: forwardedRef, children: jsxRuntime.jsx("svg", { "aria-labelledby": ICON_CONTAINER_ID, "data-testid": dataTestId ? `${dataTestId}-${iconName}` : iconName, role: "img", style: style, viewBox: correctViewBox, children: jsxRuntime.jsx("use", { href: href[correctIconType], ref: useTagRef }) }) }));
+    return (jsxRuntime.jsx("span", { "aria-describedby": ariaDescribedBy, "aria-hidden": ariaHidden, "aria-label": ariaLabel ? ariaLabel : stringTs.titleCase(iconName), "aria-labelledby": ariaLabelledBy, className: cvaIcon({ color, size, fontSize, className }), "data-testid": dataTestId, id: ICON_CONTAINER_ID, onClick: onClick, ref: forwardedRef, children: jsxRuntime.jsx("svg", { "aria-labelledby": ICON_CONTAINER_ID, "data-testid": dataTestId ? `${dataTestId}-${iconName}` : iconName, role: "img", style: style, viewBox: correctViewBox, children: jsxRuntime.jsx("use", { href: href[correctIconType], ref: useTagRef }) }) }));
 };
 
 const cvaTag = cssClassVarianceUtilities.cvaMerge([
@@ -572,6 +572,7 @@ const cvaButton = cssClassVarianceUtilities.cvaMerge([
              * So we need to add padding to the min-height calculation. Two times the vertical
              * padding aka py-1 * 2 aka --spacing-1 * 2 aka spacing-2 (for small).
              */
+            extraSmall: ["p-0", "gap-1", "w-5", "h-8", "text-xs", "min-h-[calc(var(--line-height-sm)+var(--spacing-1))"],
             small: ["px-2", "py-1.5", "gap-1", "h-7", "text-xs", "min-h-[calc(var(--line-height-sm)+var(--spacing-2))]"],
             medium: ["px-3", "py-1.5", "gap-2", "h-8", "text-sm", "min-h-[calc(var(--line-height-sm)+var(--spacing-3))]"],
             large: [
@@ -670,6 +671,7 @@ const cvaButtonSpinner = cssClassVarianceUtilities.cvaMerge([], {
 const cvaButtonPrefixSuffix = cssClassVarianceUtilities.cvaMerge(["flex", "items-center"], {
     variants: {
         size: {
+            extraSmall: ["h-3"],
             small: ["h-4"],
             medium: ["h-4"],
             large: ["h-5"],
@@ -701,6 +703,7 @@ const cvaButtonPrefixSuffix = cssClassVarianceUtilities.cvaMerge(["flex", "items
 const cvaIconButton = cssClassVarianceUtilities.cvaMerge([], {
     variants: {
         size: {
+            extraSmall: ["p-0", "w-5", "h-8"],
             small: ["p-1.5", "w-7", "h-7"],
             medium: ["p-2", "w-8", "h-8"],
             large: ["p-2.5", "w-10", "h-10"],
@@ -1340,6 +1343,33 @@ const useIsTextTruncated = (text) => {
     return { ref, isTextTruncated };
 };
 
+/**
+ * Hook that returns true if any modifier key (Ctrl, Alt, Shift, Meta/Cmd) is pressed
+ *
+ * @param props Configuration options
+ * @param props.exclude Array of modifier keys to exclude from detection
+ * @returns {boolean} Indicates if any non-excluded modifier key is pressed
+ */
+const useModifierKey = ({ exclude = [] } = {}) => {
+    const [isModifierPressed, setIsModifierPressed] = react.useState(false);
+    const handleKeyEvent = react.useCallback((event) => {
+        const modifierPressed = (!exclude.includes("Control") && event.ctrlKey) ||
+            (!exclude.includes("Alt") && event.altKey) ||
+            (!exclude.includes("Shift") && event.shiftKey) ||
+            (!exclude.includes("Meta") && event.metaKey);
+        setIsModifierPressed(modifierPressed);
+    }, [exclude]);
+    react.useEffect(() => {
+        window.addEventListener("keydown", handleKeyEvent);
+        window.addEventListener("keyup", handleKeyEvent);
+        return () => {
+            window.removeEventListener("keydown", handleKeyEvent);
+            window.removeEventListener("keyup", handleKeyEvent);
+        };
+    }, [handleKeyEvent]);
+    return isModifierPressed;
+};
+
 /**
  * Custom hook to handle window resize events and provide the current window size.
  *
@@ -2550,7 +2580,7 @@ const Tooltip = ({ children, dataTestId = "tool-tip", disabled, className, label
     const arrowRef = react.useRef(null);
     const { refs, floatingStyles, context } = react$1.useFloating({
         placement: placement === "auto" ? "bottom" : placement,
-        open: isOpen,
+        open: disabled ? false : isOpen,
         onOpenChange: setIsOpen,
         middleware: [
             react$1.offset(8),
@@ -2878,17 +2908,19 @@ const cvaInteractableItem = cssClassVarianceUtilities.cvaMerge("", {
             "not-allowed": "cursor-not-allowed",
         },
         selected: {
-            true: ["bg-primary-600/[.08]", "hover:bg-primary-600/[.12]", "focus-within:bg-primary-600/[.12]"],
+            true: ["bg-primary-50", "hover:bg-primary-50", "focus-within:bg-primary-50"],
             false: "",
             auto: [
-                "has-[:checked]:bg-primary-600/[.08]",
-                "hover:has-[:checked]:bg-primary-600/[.12]",
-                "focus-within:has-[:checked]:bg-primary-600/[.12]",
+                "hover:bg-neutral-100",
+                "has-[:checked]:bg-primary-50",
+                "hover:has-[:checked]:bg-primary-50",
+                "focus-within:has-[:checked]:bg-primary-50",
             ],
         },
         disabled: {
+            // Remember to also disable the element or set tabIndex=-1 to prevent actual interaction/focus!
             true: ["pointer-events-none", "!bg-neutral-100", "!cursor-not-allowed"],
-            false: ["hover:bg-neutral-600/5", "focus-within:bg-neutral-600/5"],
+            false: "", // use compoundVariants instead
         },
         focused: {
             true: "outline-native",
@@ -2896,6 +2928,13 @@ const cvaInteractableItem = cssClassVarianceUtilities.cvaMerge("", {
             auto: "[&:has(:focus-visible)]:outline-native",
         },
     },
+    compoundVariants: [
+        {
+            disabled: false,
+            selected: false,
+            className: ["hover:bg-neutral-600/5", "focus-within:bg-neutral-600/5"],
+        },
+    ],
     defaultVariants: {
         cursor: "auto",
         selected: "auto",
@@ -3176,7 +3215,7 @@ const cvaPage = cssClassVarianceUtilities.cvaMerge(["grid", "h-full"], {
 const cvaPageContent = cssClassVarianceUtilities.cvaMerge(["overflow-auto", "page-content", "grid", "gap-responsive-space"], {
     variants: {
         layout: {
-            content: "",
+            content: "grid-rows-fr",
             "v-min-fr": ["grid-rows-min-fr"],
             "h-min-fr": ["grid-cols-min-fr", "sm:grid-cols-1", "sm:grid-rows-min-fr"],
         },
@@ -3692,7 +3731,7 @@ 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(), "data-testid": dataTestId, children: list.map((item, index) => (jsxRuntime.jsx(ToggleItem, { className: tailwindMerge.twMerge(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: () => {
+    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: () => {
                 setSelected(item.id);
                 onChange?.(item.id);
             }, selected: selected === item.id, size: size, text: item.text, title: item.title, tooltip: item.tooltip }, item.id))) }));
@@ -3701,7 +3740,7 @@ const ToggleGroup = ({ list, selected, setSelected, onChange, disabled = false,
  * 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: !text?.truncate && tooltip?.content === undefined, label: tooltip?.content || title, 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 }) }) }));
+    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 cvaValueBar = cssClassVarianceUtilities.cvaMerge(["w-full"], {
@@ -4111,6 +4150,7 @@ exports.useHover = useHover;
 exports.useIsFirstRender = useIsFirstRender;
 exports.useIsFullscreen = useIsFullscreen;
 exports.useIsTextTruncated = useIsTextTruncated;
+exports.useModifierKey = useModifierKey;
 exports.useOverflowItems = useOverflowItems;
 exports.usePopoverContext = usePopoverContext;
 exports.usePrompt = usePrompt;

package/index.esm.js

@@ -132,7 +132,7 @@ const isSafari = () => {
  * @param {IconProps} props - The props for the Icon component
  * @returns {ReactElement} Icon component
  */
-const Icon = ({ name, size = "medium", className, dataTestId, color, onClick, type, style, forwardedRef, ariaLabel, fontSize, ariaLabelledBy, ariaDescribedBy, }) => {
+const Icon = ({ name, size = "medium", className, dataTestId, color, onClick, type, style, forwardedRef, ariaLabel, fontSize, ariaLabelledBy, ariaDescribedBy, ariaHidden, }) => {
     const useTagRef = useRef(null);
     const ICON_CONTAINER_ID = uuidv4();
     const correctIconType = useMemo(() => {
@@ -171,7 +171,7 @@ const Icon = ({ name, size = "medium", className, dataTestId, color, onClick, ty
             useTagRef.current.setAttribute("href", href[correctIconType]);
         }
     }, [correctIconType, href]);
-    return (jsx("span", { "aria-describedby": ariaDescribedBy, "aria-label": ariaLabel ? ariaLabel : titleCase(iconName), "aria-labelledby": ariaLabelledBy, className: cvaIcon({ color, size, fontSize, className }), "data-testid": dataTestId, id: ICON_CONTAINER_ID, onClick: onClick, ref: forwardedRef, children: jsx("svg", { "aria-labelledby": ICON_CONTAINER_ID, "data-testid": dataTestId ? `${dataTestId}-${iconName}` : iconName, role: "img", style: style, viewBox: correctViewBox, children: jsx("use", { href: href[correctIconType], ref: useTagRef }) }) }));
+    return (jsx("span", { "aria-describedby": ariaDescribedBy, "aria-hidden": ariaHidden, "aria-label": ariaLabel ? ariaLabel : titleCase(iconName), "aria-labelledby": ariaLabelledBy, className: cvaIcon({ color, size, fontSize, className }), "data-testid": dataTestId, id: ICON_CONTAINER_ID, onClick: onClick, ref: forwardedRef, children: jsx("svg", { "aria-labelledby": ICON_CONTAINER_ID, "data-testid": dataTestId ? `${dataTestId}-${iconName}` : iconName, role: "img", style: style, viewBox: correctViewBox, children: jsx("use", { href: href[correctIconType], ref: useTagRef }) }) }));
 };
 
 const cvaTag = cvaMerge([
@@ -570,6 +570,7 @@ const cvaButton = cvaMerge([
              * So we need to add padding to the min-height calculation. Two times the vertical
              * padding aka py-1 * 2 aka --spacing-1 * 2 aka spacing-2 (for small).
              */
+            extraSmall: ["p-0", "gap-1", "w-5", "h-8", "text-xs", "min-h-[calc(var(--line-height-sm)+var(--spacing-1))"],
             small: ["px-2", "py-1.5", "gap-1", "h-7", "text-xs", "min-h-[calc(var(--line-height-sm)+var(--spacing-2))]"],
             medium: ["px-3", "py-1.5", "gap-2", "h-8", "text-sm", "min-h-[calc(var(--line-height-sm)+var(--spacing-3))]"],
             large: [
@@ -668,6 +669,7 @@ const cvaButtonSpinner = cvaMerge([], {
 const cvaButtonPrefixSuffix = cvaMerge(["flex", "items-center"], {
     variants: {
         size: {
+            extraSmall: ["h-3"],
             small: ["h-4"],
             medium: ["h-4"],
             large: ["h-5"],
@@ -699,6 +701,7 @@ const cvaButtonPrefixSuffix = cvaMerge(["flex", "items-center"], {
 const cvaIconButton = cvaMerge([], {
     variants: {
         size: {
+            extraSmall: ["p-0", "w-5", "h-8"],
             small: ["p-1.5", "w-7", "h-7"],
             medium: ["p-2", "w-8", "h-8"],
             large: ["p-2.5", "w-10", "h-10"],
@@ -1338,6 +1341,33 @@ const useIsTextTruncated = (text) => {
     return { ref, isTextTruncated };
 };
 
+/**
+ * Hook that returns true if any modifier key (Ctrl, Alt, Shift, Meta/Cmd) is pressed
+ *
+ * @param props Configuration options
+ * @param props.exclude Array of modifier keys to exclude from detection
+ * @returns {boolean} Indicates if any non-excluded modifier key is pressed
+ */
+const useModifierKey = ({ exclude = [] } = {}) => {
+    const [isModifierPressed, setIsModifierPressed] = useState(false);
+    const handleKeyEvent = useCallback((event) => {
+        const modifierPressed = (!exclude.includes("Control") && event.ctrlKey) ||
+            (!exclude.includes("Alt") && event.altKey) ||
+            (!exclude.includes("Shift") && event.shiftKey) ||
+            (!exclude.includes("Meta") && event.metaKey);
+        setIsModifierPressed(modifierPressed);
+    }, [exclude]);
+    useEffect(() => {
+        window.addEventListener("keydown", handleKeyEvent);
+        window.addEventListener("keyup", handleKeyEvent);
+        return () => {
+            window.removeEventListener("keydown", handleKeyEvent);
+            window.removeEventListener("keyup", handleKeyEvent);
+        };
+    }, [handleKeyEvent]);
+    return isModifierPressed;
+};
+
 /**
  * Custom hook to handle window resize events and provide the current window size.
  *
@@ -2548,7 +2578,7 @@ const Tooltip = ({ children, dataTestId = "tool-tip", disabled, className, label
     const arrowRef = useRef(null);
     const { refs, floatingStyles, context } = useFloating({
         placement: placement === "auto" ? "bottom" : placement,
-        open: isOpen,
+        open: disabled ? false : isOpen,
         onOpenChange: setIsOpen,
         middleware: [
             offset(8),
@@ -2876,17 +2906,19 @@ const cvaInteractableItem = cvaMerge("", {
             "not-allowed": "cursor-not-allowed",
         },
         selected: {
-            true: ["bg-primary-600/[.08]", "hover:bg-primary-600/[.12]", "focus-within:bg-primary-600/[.12]"],
+            true: ["bg-primary-50", "hover:bg-primary-50", "focus-within:bg-primary-50"],
             false: "",
             auto: [
-                "has-[:checked]:bg-primary-600/[.08]",
-                "hover:has-[:checked]:bg-primary-600/[.12]",
-                "focus-within:has-[:checked]:bg-primary-600/[.12]",
+                "hover:bg-neutral-100",
+                "has-[:checked]:bg-primary-50",
+                "hover:has-[:checked]:bg-primary-50",
+                "focus-within:has-[:checked]:bg-primary-50",
             ],
         },
         disabled: {
+            // Remember to also disable the element or set tabIndex=-1 to prevent actual interaction/focus!
             true: ["pointer-events-none", "!bg-neutral-100", "!cursor-not-allowed"],
-            false: ["hover:bg-neutral-600/5", "focus-within:bg-neutral-600/5"],
+            false: "", // use compoundVariants instead
         },
         focused: {
             true: "outline-native",
@@ -2894,6 +2926,13 @@ const cvaInteractableItem = cvaMerge("", {
             auto: "[&:has(:focus-visible)]:outline-native",
         },
     },
+    compoundVariants: [
+        {
+            disabled: false,
+            selected: false,
+            className: ["hover:bg-neutral-600/5", "focus-within:bg-neutral-600/5"],
+        },
+    ],
     defaultVariants: {
         cursor: "auto",
         selected: "auto",
@@ -3174,7 +3213,7 @@ const cvaPage = cvaMerge(["grid", "h-full"], {
 const cvaPageContent = cvaMerge(["overflow-auto", "page-content", "grid", "gap-responsive-space"], {
     variants: {
         layout: {
-            content: "",
+            content: "grid-rows-fr",
             "v-min-fr": ["grid-rows-min-fr"],
             "h-min-fr": ["grid-cols-min-fr", "sm:grid-cols-1", "sm:grid-rows-min-fr"],
         },
@@ -3690,7 +3729,7 @@ 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(), "data-testid": dataTestId, children: list.map((item, index) => (jsx(ToggleItem, { className: twMerge(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: () => {
+    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: () => {
                 setSelected(item.id);
                 onChange?.(item.id);
             }, selected: selected === item.id, size: size, text: item.text, title: item.title, tooltip: item.tooltip }, item.id))) }));
@@ -3699,7 +3738,7 @@ const ToggleGroup = ({ list, selected, setSelected, onChange, disabled = false,
  * 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: !text?.truncate && tooltip?.content === undefined, label: tooltip?.content || title, 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 }) }) }));
+    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 cvaValueBar = cvaMerge(["w-full"], {
@@ -3999,4 +4038,4 @@ const cvaClickable = cvaMerge([
     },
 });
 
-export { ActionRenderer, Alert, Badge, Breadcrumb, BreadcrumbContainer, Button, Card, CardBody, CardFooter, CardHeader, Collapse, CompletionStatusIndicator, CopyableText, EmptyState, EmptyValue, ExternalLink, Heading, 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, WidgetBody, WidgetEditBody, 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, 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, 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, WidgetBody, WidgetEditBody, 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 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "1.4.115",
+  "version": "1.4.118",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -18,11 +18,11 @@
     "@tanstack/react-router": "1.114.29",
     "string-ts": "^2.0.0",
     "tailwind-merge": "^2.0.0",
-    "@trackunit/ui-design-tokens": "1.3.97",
-    "@trackunit/css-class-variance-utilities": "1.3.97",
-    "@trackunit/shared-utils": "1.5.97",
-    "@trackunit/ui-icons": "1.3.97",
-    "@trackunit/react-table-pagination": "1.3.98"
+    "@trackunit/ui-design-tokens": "1.3.98",
+    "@trackunit/css-class-variance-utilities": "1.3.98",
+    "@trackunit/shared-utils": "1.5.98",
+    "@trackunit/ui-icons": "1.3.100",
+    "@trackunit/react-table-pagination": "1.3.99"
   },
   "module": "./index.esm.js",
   "main": "./index.cjs.js",

package/src/common/AriaProps.d.ts

@@ -2,4 +2,5 @@ export type AriaProps = {
     ariaLabel?: string;
     ariaLabelledBy?: string;
     ariaDescribedBy?: string;
+    ariaHidden?: boolean;
 };

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

@@ -487,5 +487,5 @@ export type IconProps = DiscriminatedIconProps & CommonProps & AriaProps & {
  * @param {IconProps} props - The props for the Icon component
  * @returns {ReactElement} Icon component
  */
-export declare const Icon: ({ name, size, className, dataTestId, color, onClick, type, style, forwardedRef, ariaLabel, fontSize, ariaLabelledBy, ariaDescribedBy, }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Icon: ({ name, size, className, dataTestId, color, onClick, type, style, forwardedRef, ariaLabel, fontSize, ariaLabelledBy, ariaDescribedBy, ariaHidden, }: IconProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -4,7 +4,7 @@ import { IconName } from "@trackunit/ui-icons";
 import { CommonProps } from "../../common/CommonProps";
 import { TooltipPlacement } from "../Tooltip/Tooltip";
 import { cvaToggleGroup } from "./ToggleGroup.variants";
-export interface BasicToggleGroupListProps<TSelectedId extends string = string> {
+export interface BasicToggleGroupListProps<TSelectedId extends string = string> extends CommonProps {
     /**
      * Used to identify an individual button to be able to highlight the selected one.
      */
@@ -36,7 +36,6 @@ export interface BasicToggleGroupListProps<TSelectedId extends string = string>
         content?: string;
         placement?: TooltipPlacement;
     };
-    dataTestId?: string;
 }
 export type ToggleGroupProps<TSelectedId extends string = string> = CommonProps & Omit<VariantProps<typeof cvaToggleGroup>, "className"> & {
     list: readonly BasicToggleGroupListProps<TSelectedId>[];

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

@@ -1,6 +1,7 @@
 import { MouseEvent, ReactNode, Ref } from "react";
+import { Size } from "../../../common";
 import { ButtonCommonProps, ButtonType } from "../shared/ButtonProps";
-export interface ButtonProps extends ButtonCommonProps {
+export interface ButtonProps extends Omit<ButtonCommonProps, "size"> {
     onClick?: (event: MouseEvent<HTMLElement>) => void;
     /**
      * Child nodes. Can be used to pass in text to be displayed on the button.
@@ -38,6 +39,7 @@ export interface ButtonProps extends ButtonCommonProps {
      * A ref for the component
      */
     ref?: Ref<HTMLButtonElement>;
+    size?: "extraSmall" | Size;
 }
 /**
  * Buttons are clickable elements that are used to trigger actions. They communicate calls to action to the user and allow users to interact with pages in a variety of ways. Button labels express what action will occur when the user interacts with it.

package/src/components/buttons/IconButton/IconButton.d.ts

@@ -1,7 +1,7 @@
 import { ComponentType, JSX, ReactNode, Ref } from "react";
 import { Size } from "../../../common";
 import { ButtonCommonProps } from "../shared/ButtonProps";
-export interface IconButtonProps extends ButtonCommonProps {
+export interface IconButtonProps extends Omit<ButtonCommonProps, "size"> {
     /**
      * The icon to display.
      */
@@ -15,7 +15,7 @@ export interface IconButtonProps extends ButtonCommonProps {
     /**
      * The size of the button. Defaults to "medium".
      */
-    size?: Size;
+    size?: "extraSmall" | Size;
     /**
      * A ref for the component
      */

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

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

package/src/hooks/index.d.ts

@@ -10,6 +10,7 @@ export * from "./useHover";
 export * from "./useIsFirstRender";
 export * from "./useIsFullScreen";
 export * from "./useIsTextTruncated";
+export * from "./useModifierKey";
 export * from "./useResize";
 export * from "./useScrollDetection";
 export * from "./useSelfUpdatingRef";

package/src/hooks/useModifierKey.d.ts

@@ -0,0 +1,16 @@
+type ModifierKey = "Control" | "Alt" | "Shift" | "Meta";
+interface UseModifierKeyProps {
+    /**
+     * Array of modifier keys to exclude from detection
+     */
+    exclude?: ModifierKey[];
+}
+/**
+ * Hook that returns true if any modifier key (Ctrl, Alt, Shift, Meta/Cmd) is pressed
+ *
+ * @param props Configuration options
+ * @param props.exclude Array of modifier keys to exclude from detection
+ * @returns {boolean} Indicates if any non-excluded modifier key is pressed
+ */
+export declare const useModifierKey: ({ exclude }?: UseModifierKeyProps) => boolean;
+export {};