@trackunit/react-components 2.13.28-alpha-15da733192f.0 → 3.1.1

package/index.esm.js

@@ -4,7 +4,7 @@ import { twMerge } from 'tailwind-merge';
 import { objectKeys, uuidv4, parseTailwindArbitraryValue, objectEntries, nonNullable, objectValues, validateState, writeToStorage, readFromStorage, storageSerializer, filterByMultiple } from '@trackunit/shared-utils';
 export { storageSerializer } from '@trackunit/shared-utils';
 import { useRef, useMemo, useEffect, useSyncExternalStore, useState, useLayoutEffect, createContext, useContext, isValidElement, cloneElement, createElement, useCallback, Fragment as Fragment$1, memo, forwardRef, useId, useReducer, Children } from 'react';
-import { rentalStatusPalette, sitesPalette, utilizationPalette, activityPalette, criticalityPalette, aiPalette, generalPalette, intentPalette, themeScreenSizeAsNumber, themeContainerSize, color } from '@trackunit/ui-design-tokens';
+import { rentalStatusPalette, sitesPalette, utilizationPalette, activityPalette, criticalityPalette, trackunitBrandingPalette, generalPalette, intentPalette, themeScreenSizeAsNumber, themeContainerSize, color } from '@trackunit/ui-design-tokens';
 import { iconNames } from '@trackunit/ui-icons';
 import IconSpriteMicro from '@trackunit/ui-icons/icons-sprite-micro.svg';
 import IconSpriteMini from '@trackunit/ui-icons/icons-sprite-mini.svg';
@@ -19,12 +19,12 @@ import { Link, useBlocker, useNavigate, useLocation, useRouter, useSearch } from
 import { useVirtualizer } from '@tanstack/react-virtual';
 import { isTypeableElement } from '@floating-ui/react/utils';
 import { HelmetProvider, Helmet } from 'react-helmet-async';
-import { Trigger, Content as Content$1, List as List$1, Root } from '@radix-ui/react-tabs';
+import { Trigger, Content, List as List$1, Root } from '@radix-ui/react-tabs';
 import { gzipSync, gunzipSync } from 'fflate';
 import { dequal } from 'dequal';
 
 var defaultTranslations = {
-	"breadcrumb.backButton": "back",
+	"breadcrumb.backButton": "Back",
 	"breadcrumb.expandButton": "expand",
 	"copyButton.copied": "Copied!",
 	"copyButton.copy": "Copy",
@@ -80,7 +80,7 @@ const cvaIcon = cva({
     variants: {
         color: {
             primary: "text-primary-600",
-            ai: "text-ai",
+            trackunit_branding: "text-trackunit_branding",
             neutral: "text-neutral-400",
             info: "text-info-600",
             success: "text-success-600",
@@ -142,7 +142,7 @@ const cvaIcon = cva({
 const iconPalette = {
     ...intentPalette,
     ...generalPalette,
-    ...aiPalette,
+    ...trackunitBrandingPalette,
     ...criticalityPalette,
     ...activityPalette,
     ...utilizationPalette,
@@ -1834,15 +1834,6 @@ const cvaButtonPrefixSuffix = cva({
 const cvaIconButton = cva({
     base: [],
     variants: {
-        ai: {
-            true: [
-                "bg-ai",
-                "hover:bg-[color-mix(in_srgb,var(--color-ai),black_10%)]",
-                "active:bg-[color-mix(in_srgb,var(--color-ai),black_20%)]",
-                "focus:bg-[color-mix(in_srgb,var(--color-ai),black_20%)]",
-            ],
-            false: [],
-        },
         size: {
             /**
              * Sized to match a single text line (20px) so the button fits inside
@@ -2616,7 +2607,7 @@ const toButtonSize = (size) => (size === "extraSmall" ? "small" : size);
  */
 const IconButton = ({ icon, variant = "primary", size = "medium", square = true, loading = false, disabled = false, className, title, ariaLabel, "data-testid": dataTestId, ref, ...rest }) => {
     const accessibleLabel = ariaLabel ?? title;
-    return (jsx(Tooltip, { "data-testid": "iconButton-tooltip", delayed: true, disabled: !title || disabled || loading, interactable: false, label: title, children: jsx(Button, { ...rest, ariaLabel: accessibleLabel, className: cvaIconButton({ size: size, ai: variant === "ai", className }), "data-testid": dataTestId ? dataTestId : undefined, disabled: disabled || loading, loading: loading, prefix: !loading ? cloneElement(icon, { ariaHidden: true }) : undefined, ref: ref, size: toButtonSize(size), square: square, title: undefined, variant: variant === "ai" ? "primary" : variant }) }));
+    return (jsx(Tooltip, { "data-testid": "iconButton-tooltip", delayed: true, disabled: !title || disabled || loading, interactable: false, label: title, children: jsx(Button, { ...rest, ariaLabel: accessibleLabel, className: cvaIconButton({ size: size, className }), "data-testid": dataTestId ? dataTestId : undefined, disabled: disabled || loading, loading: loading, prefix: !loading ? cloneElement(icon, { ariaHidden: true }) : undefined, ref: ref, size: toButtonSize(size), square: square, title: undefined, variant: variant }) }));
 };
 IconButton.displayName = "IconButton";
 
@@ -3956,160 +3947,10 @@ const useCopyToClipboard = () => {
     return useMemo(() => [isCopied, copyToClipboard], [isCopied, copyToClipboard]);
 };
 
-/**
- * The useHover hook returns a onMouseEnter, onMouseLeave and a boolean indicating whether the element is being hovered.
- * The boolean will be true if the element is being hovered, and false if it is not.
- * Can be directionally debounced.
- *
- * @param {UseHoverProps} param0 The options
- * @returns {object} The object containing the onMouseEnter, onMouseLeave and hovering props
- */
-const useHover = ({ debounced = false, delay = 100, direction = "out" } = { debounced: false }) => {
-    const [isHovering, setIsHovering] = useState(false);
-    const [debouncedIsHovering, setDebouncedIsHovering] = useState(false);
-    const onMouseEnter = useCallback(() => {
-        setIsHovering(true);
-    }, []);
-    const onMouseLeave = useCallback(() => {
-        setIsHovering(false);
-    }, []);
-    // Determine if the current transition should be debounced based on direction
-    const isTransitionDebounced = debounced && (direction === "both" || (direction === "in" && isHovering) || (direction === "out" && !isHovering));
-    // Sync debouncedIsHovering immediately for non-debounced transitions
-    useLayoutEffect(() => {
-        if (!debounced || isTransitionDebounced) {
-            return undefined;
-        }
-        // eslint-disable-next-line react-hooks/set-state-in-effect -- Synchronizing derived state for directional debouncing
-        setDebouncedIsHovering(isHovering);
-    }, [debounced, isTransitionDebounced, isHovering]);
-    // Apply delay for debounced transitions
-    useEffect(() => {
-        if (!isTransitionDebounced) {
-            return undefined;
-        }
-        const timer = setTimeout(() => {
-            setDebouncedIsHovering(isHovering);
-        }, delay);
-        return () => clearTimeout(timer);
-    }, [isTransitionDebounced, delay, isHovering]);
-    const value = debounced ? (isTransitionDebounced ? debouncedIsHovering : isHovering) : isHovering;
-    return useMemo(() => ({
-        onMouseEnter,
-        onMouseLeave,
-        hovering: value,
-    }), [onMouseEnter, onMouseLeave, value]);
-};
-
-const cvaCopyableText = cva({
-    base: [
-        "rounded",
-        "cursor-pointer",
-        "transition-all",
-        "ease-in-out",
-        "inline-flex",
-        "items-center",
-        "gap-1",
-        "bg-transparent",
-        "border-none",
-        "outline-none",
-        "hover:bg-neutral-200",
-        "py-0.5",
-        "px-1",
-    ],
-    variants: {
-        animating: {
-            false: "",
-            true: "animate-copy",
-        },
-        size: {
-            sm: "text-sm",
-            xs: "text-xs",
-        },
-    },
-    defaultVariants: {
-        animating: false,
-        size: "sm",
-    },
-});
-
-/** Resolves the inner content for CopyableText based on withIcon. */
-const Content = ({ text, withIcon, }) => {
-    if (withIcon) {
-        return (jsxs(Fragment, { children: [jsx("span", { className: "truncate", children: text }), jsx(Icon, { ariaHidden: true, className: "shrink-0 text-neutral-400", name: "Square2Stack", size: "small", type: "solid" })] }));
-    }
-    return text;
-};
-/**
- * CopyableText displays a text value that the user can click to copy to the clipboard.
- * It shows a brief animation and tooltip feedback on copy. What you see is what gets copied.
- *
- * ### When to use
- * Use CopyableText for identifiers, serial numbers, URLs, or any value the user may want to copy (e.g., asset IDs, error codes).
- *
- * ### When not to use
- * - Do not use CopyableText for long paragraphs or content that doesn't need to be copied.
- * - If the value is rendered as plain (non-clickable) text and only a dedicated icon should copy it
- *   (e.g. inside a row or cell that should stay clickable), use `CopyButton` instead:
- * ```tsx
- * <div className="flex items-center gap-0.5">
- *   <Text type="span">{value}</Text>
- *   <CopyButton value={value} />
- * </div>
- * ```
- * - Only use `useCopyToClipboard` directly for genuinely custom copy behavior that neither `CopyableText` nor `CopyButton` supports.
- *
- * @example Copyable serial number
- * ```tsx
- * import { CopyableText } from "@trackunit/react-components";
- *
- * const AssetSerial = () => (
- *   <CopyableText text="SN-2024-00142" data-testid="serial-number" />
- * );
- * ```
- * @example Copyable text with small size
- * ```tsx
- * import { CopyableText } from "@trackunit/react-components";
- *
- * const CopyableId = () => (
- *   <CopyableText text="ABC-123" size="xs" />
- * );
- * ```
- * @param {CopyableTextProps} props - The props for the CopyableText component
- * @returns {ReactElement} CopyableText component
- */
-const CopyableText = ({ text, withIcon = true, size = "sm", copyLabel = "Copy", copiedLabel = "Copied!", "data-testid": dataTestId, className, style, ref, }) => {
-    const [animating, setAnimating] = useState(false);
-    const [showCopied, setShowCopied] = useState(false);
-    const [, copyToClipboard] = useCopyToClipboard();
-    const { onMouseEnter, onMouseLeave, hovering } = useHover({ debounced: false });
-    if (!text) {
-        return null;
-    }
-    const handleOnClick = (e) => {
-        e.stopPropagation();
-        void copyToClipboard(text)
-            .then(() => {
-            setShowCopied(true);
-        })
-            .catch(() => undefined);
-        setAnimating(true);
-    };
-    const handleMouseLeave = () => {
-        onMouseLeave();
-        setShowCopied(false);
-    };
-    return (jsx(Tooltip, { delayed: !showCopied, label: showCopied ? copiedLabel : copyLabel, placement: "top", children: jsx("button", { "aria-label": copyLabel, className: cvaCopyableText({ animating, size, className }), "data-testid": dataTestId, onAnimationEnd: () => setAnimating(false), onClick: handleOnClick, onFocus: e => {
-                if (hovering) {
-                    e.currentTarget.blur();
-                }
-            }, onMouseEnter: onMouseEnter, onMouseLeave: handleMouseLeave, ref: ref, style: style, type: "button", children: jsx(Content, { text: text, withIcon: withIcon }) }) }));
-};
-
 /**
  * CopyButton is a standalone icon button that copies a value to the clipboard when clicked,
- * showing brief tooltip feedback. Unlike CopyableText, the copied value is not itself the
- * clickable/displayed element, so it can be placed next to plain (non-clickable) text.
+ * showing brief tooltip feedback. The copied value is not itself the clickable/displayed
+ * element, so the button can be placed next to plain (non-clickable) text.
  *
  * ### When to use
  * - Icon-only (default): the copyable value is displayed as plain text (e.g. in a table cell or
@@ -4122,8 +3963,8 @@ const CopyableText = ({ text, withIcon = true, size = "sm", copyLabel = "Copy",
  * one copy control; pick icon-only or labelled mode instead.
  *
  * ### Empty values
- * Like `CopyableText`, CopyButton renders nothing when `value` is empty, so consumers never
- * present a copy control that has no meaningful result.
+ * CopyButton renders nothing when `value` is empty, so consumers never present a copy control
+ * that has no meaningful result.
  *
  * @example Icon button next to plain text
  * ```tsx
@@ -8946,6 +8787,7 @@ const PageHeaderTitle = ({ title, "data-testid": dataTestId, className, style, r
  * @returns {ReactElement} PageHeader component
  */
 const PageHeader = ({ className, "data-testid": dataTestId, showLoading = false, description, title, tagLabel, backTo, tagColor, tabsList, descriptionIcon = "QuestionMarkCircle", tagTooltipLabel, style, ref, ...discriminatedProps }) => {
+    const [t] = useTranslation();
     const tagRenderer = useMemo(() => {
         if (tagLabel === undefined || tagLabel === "" || showLoading) {
             return null;
@@ -8956,7 +8798,7 @@ const PageHeader = ({ className, "data-testid": dataTestId, showLoading = false,
     return (jsxs("div", { className: cvaPageHeaderContainer({
             className,
             withBorder: tabsList === undefined,
-        }), "data-testid": dataTestId, ref: ref, style: style, children: [jsxs("div", { className: cvaPageHeader(), children: [backTo ? (jsx(Link, { to: backTo, children: jsx(Button, { className: "mr-4 bg-black/5 hover:bg-black/10", prefix: jsx(Icon, { name: "ArrowLeft", size: "small" }), size: "small", square: true, variant: "ghost-neutral" }) })) : undefined, typeof title === "string" ? jsx(PageHeaderTitle, { "data-testid": dataTestId, title: title }) : title, tagRenderer || (description !== null && description !== undefined) ? (jsxs("div", { className: "mx-2 flex items-center gap-2", children: [description !== null && description !== undefined && !showLoading ? (jsx(Tooltip, { "data-testid": dataTestId ? `${dataTestId}-description-tooltip` : undefined, iconProps: {
+        }), "data-testid": dataTestId, ref: ref, style: style, children: [jsxs("div", { className: cvaPageHeader(), children: [backTo ? (jsx(Link, { to: backTo, children: jsx(Button, { className: "mr-4 bg-black/5 hover:bg-black/10", "data-testid": dataTestId ? `${dataTestId}-back-button` : undefined, prefix: jsx(Icon, { name: "ArrowLeft", size: "small" }), size: "small", square: true, title: t("breadcrumb.backButton"), variant: "ghost-neutral" }) })) : undefined, typeof title === "string" ? jsx(PageHeaderTitle, { "data-testid": dataTestId, title: title }) : title, tagRenderer || (description !== null && description !== undefined) ? (jsxs("div", { className: "mx-2 flex items-center gap-2", children: [description !== null && description !== undefined && !showLoading ? (jsx(Tooltip, { "data-testid": dataTestId ? `${dataTestId}-description-tooltip` : undefined, iconProps: {
                                     name: descriptionIcon,
                                     "data-testid": "page-header-description-icon",
                                 }, label: description, placement: "bottom" })) : undefined, tagRenderer] })) : null, jsxs("div", { className: "ml-auto flex gap-2", children: [discriminatedProps.accessoryType === "kpi-metrics" ? (jsx(PageHeaderKpiMetrics, { kpiMetrics: discriminatedProps.kpiMetrics })) : null, discriminatedProps.accessoryType === "actions" ? (Array.isArray(discriminatedProps.secondaryActions) ? (jsx(PageHeaderSecondaryActions, { actions: discriminatedProps.secondaryActions, groupActions: discriminatedProps.groupSecondaryActions ?? false, hasPrimaryAction: !!discriminatedProps.primaryAction })) : discriminatedProps.secondaryActions !== null && discriminatedProps.secondaryActions !== undefined ? (discriminatedProps.secondaryActions) : null) : null, discriminatedProps.accessoryType === "actions" &&
@@ -10026,6 +9868,51 @@ const sheetAnimationReducer = (state, action) => {
     }
 };
 
+/**
+ * The useHover hook returns a onMouseEnter, onMouseLeave and a boolean indicating whether the element is being hovered.
+ * The boolean will be true if the element is being hovered, and false if it is not.
+ * Can be directionally debounced.
+ *
+ * @param {UseHoverProps} param0 The options
+ * @returns {object} The object containing the onMouseEnter, onMouseLeave and hovering props
+ */
+const useHover = ({ debounced = false, delay = 100, direction = "out" } = { debounced: false }) => {
+    const [isHovering, setIsHovering] = useState(false);
+    const [debouncedIsHovering, setDebouncedIsHovering] = useState(false);
+    const onMouseEnter = useCallback(() => {
+        setIsHovering(true);
+    }, []);
+    const onMouseLeave = useCallback(() => {
+        setIsHovering(false);
+    }, []);
+    // Determine if the current transition should be debounced based on direction
+    const isTransitionDebounced = debounced && (direction === "both" || (direction === "in" && isHovering) || (direction === "out" && !isHovering));
+    // Sync debouncedIsHovering immediately for non-debounced transitions
+    useLayoutEffect(() => {
+        if (!debounced || isTransitionDebounced) {
+            return undefined;
+        }
+        // eslint-disable-next-line react-hooks/set-state-in-effect -- Synchronizing derived state for directional debouncing
+        setDebouncedIsHovering(isHovering);
+    }, [debounced, isTransitionDebounced, isHovering]);
+    // Apply delay for debounced transitions
+    useEffect(() => {
+        if (!isTransitionDebounced) {
+            return undefined;
+        }
+        const timer = setTimeout(() => {
+            setDebouncedIsHovering(isHovering);
+        }, delay);
+        return () => clearTimeout(timer);
+    }, [isTransitionDebounced, delay, isHovering]);
+    const value = debounced ? (isTransitionDebounced ? debouncedIsHovering : isHovering) : isHovering;
+    return useMemo(() => ({
+        onMouseEnter,
+        onMouseLeave,
+        hovering: value,
+    }), [onMouseEnter, onMouseLeave, value]);
+};
+
 /**
  * Manages the dismiss-intent visual on the sheet handle.
  *
@@ -12122,7 +12009,7 @@ const Tab = ({ value, isFullWidth = false, iconName = undefined, "data-testid":
  * @returns {ReactElement} TabContent component
  */
 const TabContent = ({ className, "data-testid": dataTestId, children, ref, ...rest }) => {
-    return (jsx(Content$1, { className: cvaTabContent({ className }), "data-testid": dataTestId ? `${dataTestId}-content` : undefined, ref: ref, ...rest, children: children }));
+    return (jsx(Content, { className: cvaTabContent({ className }), "data-testid": dataTestId ? `${dataTestId}-content` : undefined, ref: ref, ...rest, children: children }));
 };
 
 /**
@@ -13104,8 +12991,8 @@ const writeHashKey = (hash, key, value) => {
 
 /**
  * Default maximum length of the resulting URL fragment after adding one
- * persisted entry. Writes are skipped (localStorage continues to hold the
- * full state) when adding the entry would push the fragment past this cap.
+ * persisted entry. Oversized new entries are skipped; oversized replacements
+ * remove the stale entry so localStorage remains authoritative.
  *
  * The fragment is never sent to the server, so it is not subject to the
  * AWS WAF managed-rule `SizeRestrictions_QUERYSTRING` cap that applies to
@@ -13120,8 +13007,8 @@ const MAX_HASH_LENGTH = 64 * 1024;
  *
  * Behaviour mirrors `useSearchParamSync`, with two differences:
  *  - Reads from and writes to `location.hash` instead of `location.search`.
- *  - Writes are guarded against {@link MAX_HASH_LENGTH} rather than the
- *    AWS-WAF-driven search-param cap.
+ *  - Oversized replacements remove stale values using
+ *    {@link MAX_HASH_LENGTH}, rather than the AWS-WAF-driven search-param cap.
  *
  * The fragment is treated as a sequence of `&`-separated tokens via the
  * pure utilities in `./hashFragment`. Foreign tokens (bare anchors, other
@@ -13203,15 +13090,18 @@ const useHashParamSync = ({ key, enabled = true, onExternalChange, replace: repl
         }
         pendingWriteRef.current = null;
         const { encodedValue, options } = pending;
-        const nextHash = writeHashKey(location.hash, key, encodedValue);
+        let nextHash = writeHashKey(location.hash, key, encodedValue);
+        let removedOversizedValue = false;
         if (nextHash.length > MAX_HASH_LENGTH) {
-            // Drop the write so the fragment never grows past the cap. The
-            // localStorage write performed by `usePersistedState` still holds
-            // the full state, so the layout survives a reload on the same
-            // browser; only the shareable URL is degraded.
-            return;
+            if (currentHashValue === undefined) {
+                return;
+            }
+            nextHash = writeHashKey(location.hash, key, undefined);
+            removedOversizedValue = true;
         }
-        const shouldReplace = options?.replace ?? replaceOption ?? !Boolean(currentHashValue);
+        const shouldReplace = removedOversizedValue
+            ? true
+            : (options?.replace ?? replaceOption ?? !Boolean(currentHashValue));
         // Tanstack Router's `navigate({ hash })` expects the fragment body
         // *without* the leading `#` — the router adds the delimiter itself
         // when serialising the URL. Forwarding the `#`-prefixed value from
@@ -15135,4 +15025,4 @@ const useWindowActivity = ({ onFocus, onBlur, skip = false } = { onBlur: undefin
  */
 setupLibraryTranslations();
 
-export { Alert, Badge, Breadcrumb, Button, Card, CardBody, CardFooter, CardHeader, Collapse, CompletionStatusIndicator, CopyButton, CopyableText, DEFAULT_SKELETON_PREFERENCE_CARD_PROPS, DetailsList, EmptyState, EmptyValue, ExternalLink, GridAreas, Heading, Highlight, HorizontalOverflowScroller, Icon, IconButton, Indicator, KPI, KPICard, KPICardSkeleton, KPISkeleton, LabeledValue, LabeledValueList, List, ListItem, MAX_HASH_LENGTH, MAX_URL_LENGTH, MenuContent, MenuDivider, MenuItem, MenuTree, MoreMenu, Notice, PackageNameStoryComponent, Page, PageContent, PageHeader, PageHeaderKpiMetrics, PageHeaderSecondaryActions, PageHeaderTitle, Pagination, Polygon, Popover, PopoverContent, PopoverTitle, PopoverTrigger, Portal, PreferenceCard, PreferenceCardSkeleton, Prompt, ROLE_CARD, SHEET_TRANSITION_DURATION, SHEET_TRANSITION_DURATION_MS, SHEET_TRANSITION_EASING, SectionHeader, SegmentedValueBar, Sheet, Sidebar, SidebarContentLayout, SkeletonBlock, SkeletonLabel, SkeletonLines, Spacer, Spinner, StarButton, Tab, TabContent, TabList, Tabs, Tag, Text, ToggleGroup, Tooltip, TrendIndicator, TrendIndicators, ValueBar, ZStack, createGrid, cvaButton, cvaButtonPrefixSuffix, cvaButtonSpinner, cvaButtonSpinnerContainer, cvaClickable, cvaContainerStyles, cvaContentContainer, cvaContentWrapper, cvaDescriptionCard, cvaIconBackground, cvaIconButton, cvaImgStyles, cvaIndicator, cvaIndicatorIcon, cvaIndicatorIconBackground, cvaIndicatorLabel, cvaIndicatorPing, cvaInputContainer, cvaInteractableItem, cvaList, cvaListContainer, cvaListItem$1 as cvaListItem, cvaMenu, cvaMenuItem, cvaMenuItemLabel, cvaMenuItemPrefix, cvaMenuItemStyle, cvaMenuItemSuffix, cvaMenuList, cvaMenuListDivider, cvaMenuListItem, cvaMenuListMultiSelect, cvaPageHeader, cvaPageHeaderContainer, cvaPageHeaderHeading, cvaPreferenceCard, cvaTitleCard, cvaToggleGroup, cvaToggleGroupWithSlidingBackground, cvaToggleItem, cvaToggleItemContent, cvaToggleItemText, cvaZStackContainer, cvaZStackItem, defaultPageSize, docs, getDevicePixelRatio, getValueBarColorByValue, iconColorNames, iconPalette, noPagination, preferenceCardGrid, useBidirectionalScroll, useClickOutside, useContainerBreakpoints, useContinuousTimeout, useCopyToClipboard, useCursorUrlSync, useCustomEncoding, useDebounce, useDevicePixelRatio, useElevatedReducer, useElevatedState, useGridAreas, useHashParamSync, useHold, useHover, useInfiniteScroll, useIsFirstRender, useIsFullscreen, useIsTextTruncated, useKeyboardShortcut, useList, useListItemHeight, useLocalStorage, useLocalStorageReducer, useMeasure, useMenuSearchField, useMenuTree, useMergeRefs, useModifierKey, useOptionalPopoverContext, useOverflowBorder, useOverflowItems, usePersistedState, usePopoverContext, usePrevious, usePrompt, useRandomCSSLengths, useRelayPagination, useResize, useScrollBlock, useScrollDetection, useSearchParamSync, useSelfUpdatingRef, useSessionStorage, useSessionStorageReducer, useSheet, useSheetSnap, useStorageKey, useTextSearch, useTimeout, useViewportBreakpoints, useWatch, useWindowActivity };
+export { Alert, Badge, Breadcrumb, Button, Card, CardBody, CardFooter, CardHeader, Collapse, CompletionStatusIndicator, CopyButton, DEFAULT_SKELETON_PREFERENCE_CARD_PROPS, DetailsList, EmptyState, EmptyValue, ExternalLink, GridAreas, Heading, Highlight, HorizontalOverflowScroller, Icon, IconButton, Indicator, KPI, KPICard, KPICardSkeleton, KPISkeleton, LabeledValue, LabeledValueList, List, ListItem, MAX_HASH_LENGTH, MAX_URL_LENGTH, MenuContent, MenuDivider, MenuItem, MenuTree, MoreMenu, Notice, PackageNameStoryComponent, Page, PageContent, PageHeader, PageHeaderKpiMetrics, PageHeaderSecondaryActions, PageHeaderTitle, Pagination, Polygon, Popover, PopoverContent, PopoverTitle, PopoverTrigger, Portal, PreferenceCard, PreferenceCardSkeleton, Prompt, ROLE_CARD, SHEET_TRANSITION_DURATION, SHEET_TRANSITION_DURATION_MS, SHEET_TRANSITION_EASING, SectionHeader, SegmentedValueBar, Sheet, Sidebar, SidebarContentLayout, SkeletonBlock, SkeletonLabel, SkeletonLines, Spacer, Spinner, StarButton, Tab, TabContent, TabList, Tabs, Tag, Text, ToggleGroup, Tooltip, TrendIndicator, TrendIndicators, ValueBar, ZStack, createGrid, cvaButton, cvaButtonPrefixSuffix, cvaButtonSpinner, cvaButtonSpinnerContainer, cvaClickable, cvaContainerStyles, cvaContentContainer, cvaContentWrapper, cvaDescriptionCard, cvaIconBackground, cvaIconButton, cvaImgStyles, cvaIndicator, cvaIndicatorIcon, cvaIndicatorIconBackground, cvaIndicatorLabel, cvaIndicatorPing, cvaInputContainer, cvaInteractableItem, cvaList, cvaListContainer, cvaListItem$1 as cvaListItem, cvaMenu, cvaMenuItem, cvaMenuItemLabel, cvaMenuItemPrefix, cvaMenuItemStyle, cvaMenuItemSuffix, cvaMenuList, cvaMenuListDivider, cvaMenuListItem, cvaMenuListMultiSelect, cvaPageHeader, cvaPageHeaderContainer, cvaPageHeaderHeading, cvaPreferenceCard, cvaTitleCard, cvaToggleGroup, cvaToggleGroupWithSlidingBackground, cvaToggleItem, cvaToggleItemContent, cvaToggleItemText, cvaZStackContainer, cvaZStackItem, defaultPageSize, docs, getDevicePixelRatio, getValueBarColorByValue, iconColorNames, iconPalette, noPagination, preferenceCardGrid, useBidirectionalScroll, useClickOutside, useContainerBreakpoints, useContinuousTimeout, useCopyToClipboard, useCursorUrlSync, useCustomEncoding, useDebounce, useDevicePixelRatio, useElevatedReducer, useElevatedState, useGridAreas, useHashParamSync, useHold, useHover, useInfiniteScroll, useIsFirstRender, useIsFullscreen, useIsTextTruncated, useKeyboardShortcut, useList, useListItemHeight, useLocalStorage, useLocalStorageReducer, useMeasure, useMenuSearchField, useMenuTree, useMergeRefs, useModifierKey, useOptionalPopoverContext, useOverflowBorder, useOverflowItems, usePersistedState, usePopoverContext, usePrevious, usePrompt, useRandomCSSLengths, useRelayPagination, useResize, useScrollBlock, useScrollDetection, useSearchParamSync, useSelfUpdatingRef, useSessionStorage, useSessionStorageReducer, useSheet, useSheetSnap, useStorageKey, useTextSearch, useTimeout, useViewportBreakpoints, useWatch, useWindowActivity };

package/migrations/v3-0-0/copyabletext-to-text-copybutton.js

@@ -0,0 +1,234 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.copyableTextToTextCopyButton = void 0;
+const ts = __importStar(require("typescript"));
+const jsx_utils_1 = require("../utils/jsx-utils");
+const PACKAGE_NAME = "@trackunit/react-components";
+const COMPONENT_NAME = "CopyableText";
+/** Attribute initializer rendered back to source, e.g. `"abc"` or `{value}`. */
+const attributeText = (attr) => {
+    const initializer = attr.initializer;
+    if (initializer === undefined)
+        return null;
+    return initializer.getText();
+};
+/**
+ * The expression the copied text resolves to: `text="abc"` yields `"abc"`,
+ * `text={value}` yields `value`. Used both as the CopyButton value and as the
+ * rendered children, so it must be a side-effect-free expression.
+ */
+const textExpression = (attr) => {
+    const initializer = attr.initializer;
+    if (initializer === undefined)
+        return null;
+    if (ts.isStringLiteral(initializer))
+        return initializer.getText();
+    if (ts.isJsxExpression(initializer) && initializer.expression !== undefined) {
+        return initializer.expression.getText();
+    }
+    return null;
+};
+const renderReplacement = ({ textExpr, size, copyLabelAttr, copiedLabelAttr, classNameLiteral, styleAttr, testIdAttr, textAlias, copyButtonAlias, }) => {
+    const wrapperClasses = ["flex", "min-w-0", "max-w-full", "items-center", "gap-0.5", classNameLiteral]
+        .filter(Boolean)
+        .join(" ");
+    const wrapperAttrs = [
+        `className="${wrapperClasses}"`,
+        styleAttr !== null ? `style=${styleAttr}` : null,
+        testIdAttr !== null ? `data-testid=${testIdAttr}` : null,
+    ]
+        .filter(Boolean)
+        .join(" ");
+    const textProps = [`className="min-w-0 truncate"`, size === "xs" ? `size="small"` : null, `type="span"`]
+        .filter(Boolean)
+        .join(" ");
+    const buttonProps = [
+        `className="shrink-0"`,
+        copiedLabelAttr !== null ? `copiedLabel=${copiedLabelAttr}` : null,
+        copyLabelAttr !== null ? `copyLabel=${copyLabelAttr}` : null,
+        size === "xs" ? `size="extraSmall"` : null,
+        `value={${textExpr}}`,
+    ]
+        .filter(Boolean)
+        .join(" ");
+    return `<span ${wrapperAttrs}><${textAlias} ${textProps}>{${textExpr}}</${textAlias}><${copyButtonAlias} ${buttonProps} /></span>`;
+};
+/** Removes `name` (possibly aliased) from the package's named import list. */
+const removeNamedImport = (content, packageName, name) => {
+    const sourceFile = (0, jsx_utils_1.parseTsx)(content, "source.tsx");
+    for (const stmt of sourceFile.statements) {
+        if (!ts.isImportDeclaration(stmt))
+            continue;
+        const moduleSpecifier = stmt.moduleSpecifier;
+        if (!ts.isStringLiteral(moduleSpecifier) || moduleSpecifier.text !== packageName)
+            continue;
+        const namedBindings = stmt.importClause?.namedBindings;
+        if (namedBindings === undefined || !ts.isNamedImports(namedBindings))
+            continue;
+        const remaining = namedBindings.elements.filter(el => (el.propertyName?.text ?? el.name.text) !== name);
+        if (remaining.length === namedBindings.elements.length)
+            continue;
+        if (remaining.length === 0) {
+            // The import only carried this component; drop the whole statement.
+            const start = stmt.getFullStart();
+            const end = stmt.getEnd();
+            const trailing = content.slice(end).startsWith("\n") ? end + 1 : end;
+            return `${content.slice(0, start)}${content.slice(trailing)}`;
+        }
+        const elementsText = remaining.map(el => el.getText()).join(", ");
+        return `${content.slice(0, namedBindings.getStart())}{ ${elementsText} }${content.slice(namedBindings.getEnd())}`;
+    }
+    return content;
+};
+const ensureNamedImport = (content, packageName, namesToAdd) => {
+    const sourceFile = (0, jsx_utils_1.parseTsx)(content, "source.tsx");
+    const aliases = (0, jsx_utils_1.getImportedAliases)(sourceFile, packageName) ?? {};
+    const missing = namesToAdd.filter(name => !Object.values(aliases).includes(name));
+    if (missing.length === 0)
+        return content;
+    for (const stmt of sourceFile.statements) {
+        if (!ts.isImportDeclaration(stmt))
+            continue;
+        const moduleSpecifier = stmt.moduleSpecifier;
+        if (!ts.isStringLiteral(moduleSpecifier) || moduleSpecifier.text !== packageName)
+            continue;
+        const namedBindings = stmt.importClause?.namedBindings;
+        if (namedBindings === undefined || !ts.isNamedImports(namedBindings))
+            continue;
+        const elementsText = namedBindings.elements.map(el => el.getText()).join(", ");
+        const merged = [elementsText, ...missing].join(", ");
+        return `${content.slice(0, namedBindings.getStart())}{ ${merged} }${content.slice(namedBindings.getEnd())}`;
+    }
+    const importLine = `import { ${missing.join(", ")} } from "${packageName}";\n`;
+    return `${importLine}${content}`;
+};
+let manualReviewCount = 0;
+const transformCopyableTextUsage = (filePath, content) => {
+    const sourceFile = (0, jsx_utils_1.parseTsx)(content, filePath);
+    const aliases = (0, jsx_utils_1.getImportedAliases)(sourceFile, PACKAGE_NAME);
+    if (aliases === null)
+        return null;
+    const copyableTextAlias = Object.entries(aliases).find(([, name]) => name === COMPONENT_NAME)?.[0];
+    if (copyableTextAlias === undefined)
+        return null;
+    // A referenced CopyableTextProps type cannot be rewritten mechanically;
+    // leave the whole file for a human so it isn't half-migrated.
+    if (Object.values(aliases).includes("CopyableTextProps")) {
+        manualReviewCount += 1;
+        return null;
+    }
+    const matches = (0, jsx_utils_1.findJsxElements)(sourceFile, [copyableTextAlias]);
+    if (matches.length === 0)
+        return null;
+    const edits = [];
+    for (const { openingElement, element } of matches) {
+        if ((0, jsx_utils_1.hasSpreadAttribute)(openingElement) || (0, jsx_utils_1.findJsxAttribute)(openingElement, "ref") !== null) {
+            manualReviewCount += 1;
+            continue;
+        }
+        const textAttr = (0, jsx_utils_1.findJsxAttribute)(openingElement, "text");
+        const textExpr = textAttr !== null ? textExpression(textAttr) : null;
+        if (textExpr === null) {
+            manualReviewCount += 1;
+            continue;
+        }
+        const sizeAttr = (0, jsx_utils_1.findJsxAttribute)(openingElement, "size");
+        const sizeInitializer = sizeAttr?.initializer;
+        const size = sizeInitializer !== undefined && sizeInitializer.getText().includes("xs") ? "xs" : "sm";
+        const classNameAttr = (0, jsx_utils_1.findJsxAttribute)(openingElement, "className");
+        let classNameLiteral = null;
+        if (classNameAttr !== null) {
+            const initializer = classNameAttr.initializer;
+            if (initializer !== undefined && ts.isStringLiteral(initializer)) {
+                classNameLiteral = initializer.text;
+            }
+            else {
+                // Dynamic classNames can't be merged into the wrapper's string safely.
+                manualReviewCount += 1;
+                continue;
+            }
+        }
+        const copyLabelAttr = (0, jsx_utils_1.findJsxAttribute)(openingElement, "copyLabel");
+        const copiedLabelAttr = (0, jsx_utils_1.findJsxAttribute)(openingElement, "copiedLabel");
+        const styleAttr = (0, jsx_utils_1.findJsxAttribute)(openingElement, "style");
+        const testIdAttr = (0, jsx_utils_1.findJsxAttribute)(openingElement, "data-testid");
+        const replacement = renderReplacement({
+            textExpr,
+            size,
+            copyLabelAttr: copyLabelAttr !== null ? attributeText(copyLabelAttr) : null,
+            copiedLabelAttr: copiedLabelAttr !== null ? attributeText(copiedLabelAttr) : null,
+            classNameLiteral,
+            styleAttr: styleAttr !== null ? attributeText(styleAttr) : null,
+            testIdAttr: testIdAttr !== null ? attributeText(testIdAttr) : null,
+            textAlias: "Text",
+            copyButtonAlias: "CopyButton",
+        });
+        edits.push({ start: element.getStart(), end: element.getEnd(), replacement });
+    }
+    if (edits.length === 0)
+        return null;
+    edits.sort((a, b) => b.start - a.start);
+    let updated = content;
+    for (const { start, end, replacement } of edits) {
+        updated = `${updated.slice(0, start)}${replacement}${updated.slice(end)}`;
+    }
+    // Only drop the import when every usage in the file was rewritten.
+    const remaining = (0, jsx_utils_1.findJsxElements)((0, jsx_utils_1.parseTsx)(updated, filePath), [copyableTextAlias]);
+    if (remaining.length === 0) {
+        updated = removeNamedImport(updated, PACKAGE_NAME, COMPONENT_NAME);
+    }
+    else {
+        manualReviewCount += 1;
+    }
+    updated = ensureNamedImport(updated, PACKAGE_NAME, ["Text", "CopyButton"]);
+    return updated;
+};
+/**
+ * Rewrites `<CopyableText text={x} …/>` (removed in v3) into the plain
+ * value/copy pair: a `Text` next to a `CopyButton` that copies the same
+ * expression. `size="xs"` maps to `Text size="small"` + `CopyButton
+ * size="extraSmall"`; `copyLabel`/`copiedLabel` carry over (CopyButton also
+ * ships localized defaults). Usages with spreads, refs, dynamic classNames,
+ * or a referenced `CopyableTextProps` type are left for manual review.
+ */
+const copyableTextToTextCopyButton = (tree) => {
+    manualReviewCount = 0;
+    const touched = (0, jsx_utils_1.visitTsxFiles)(tree, COMPONENT_NAME, transformCopyableTextUsage);
+    (0, jsx_utils_1.logSummary)("copyabletext-to-text-copybutton", touched, manualReviewCount);
+};
+exports.copyableTextToTextCopyButton = copyableTextToTextCopyButton;
+exports.default = exports.copyableTextToTextCopyButton;
+//# sourceMappingURL=copyabletext-to-text-copybutton.js.map

package/migrations.json

@@ -44,6 +44,11 @@
       "version": "3.0.0",
       "description": "Rename MenuList/MenuListProps to MenuContent/MenuContentProps (import specifiers, JSX tags, and type references).",
       "implementation": "./migrations/v3-0-0/menulist-rename-to-menucontent"
+    },
+    "v3-0-0-copyabletext-to-text-copybutton": {
+      "version": "3.0.0",
+      "description": "Replace the removed CopyableText with the Text + CopyButton pair (the displayed value stays plain text; only the button copies).",
+      "implementation": "./migrations/v3-0-0/copyabletext-to-text-copybutton"
     }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "2.13.28-alpha-15da733192f.0",
+  "version": "3.1.1",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "migrations": "./migrations.json",
@@ -14,16 +14,16 @@
     "@floating-ui/react": "^0.26.25",
     "string-ts": "^2.0.0",
     "tailwind-merge": "^2.0.0",
-    "@trackunit/ui-design-tokens": "1.15.36-alpha-15da733192f.0",
-    "@trackunit/css-class-variance-utilities": "2.0.16-alpha-15da733192f.0",
-    "@trackunit/shared-utils": "1.16.51-alpha-15da733192f.0",
-    "@trackunit/ui-icons": "1.14.45-alpha-15da733192f.0",
+    "@trackunit/ui-design-tokens": "1.15.37",
+    "@trackunit/css-class-variance-utilities": "2.0.16",
+    "@trackunit/shared-utils": "1.16.51",
+    "@trackunit/ui-icons": "1.14.45",
     "es-toolkit": "^1.39.10",
     "@tanstack/react-virtual": "^3.14.3",
     "dequal": "^2.0.3",
     "fflate": "^0.8.2",
     "zod": "^3.25.76",
-    "@trackunit/i18n-library-translation": "2.4.66-alpha-15da733192f.0"
+    "@trackunit/i18n-library-translation": "2.5.1"
   },
   "peerDependencies": {
     "react": "^19.0.0",