@trackunit/react-components 2.9.4 → 2.10.1

package/index.cjs.js

@@ -3979,7 +3979,15 @@ const Content = ({ text, withIcon, }) => {
  *
  * ### When not to use
  * - Do not use CopyableText for long paragraphs or content that doesn't need to be copied.
- * - If you need a custom-looking copy button (different display text than copied value), use `useCopyToClipboard` directly.
+ * - 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
@@ -4028,6 +4036,52 @@ const CopyableText = ({ text, withIcon = true, size = "sm", copyLabel = "Copy",
             }, onMouseEnter: onMouseEnter, onMouseLeave: handleMouseLeave, ref: ref, style: style, type: "button", children: jsxRuntime.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.
+ *
+ * ### When to use
+ * Use CopyButton when the copyable value is displayed as plain text (e.g. in a table cell or
+ * row) and only a dedicated icon should trigger the copy, keeping the rest of the row clickable.
+ *
+ * ### When not to use
+ * If the displayed text itself should be the click target, use `CopyableText` instead.
+ *
+ * ### Empty values
+ * Like `CopyableText`, 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
+ * import { CopyButton, Text } from "@trackunit/react-components";
+ *
+ * const ShortCode = ({ code }: { code: string }) => (
+ *   <div className="flex items-center gap-0.5">
+ *     <Text type="span">{code}</Text>
+ *     <CopyButton value={code} />
+ *   </div>
+ * );
+ * ```
+ * @param {CopyButtonProps} props - The props for the CopyButton component
+ * @returns {ReactElement} CopyButton component
+ */
+const CopyButton = ({ value, copyLabel = "Copy", copiedLabel = "Copied!", size = "small", className, style, "data-testid": dataTestId, ref, }) => {
+    const [showCopied, setShowCopied] = react.useState(false);
+    const [, copyToClipboard] = useCopyToClipboard();
+    if (!value) {
+        return null;
+    }
+    const handleCopy = (e) => {
+        e.stopPropagation();
+        void copyToClipboard(value)
+            .then(() => setShowCopied(true))
+            .catch(() => undefined);
+    };
+    return (jsxRuntime.jsx(Tooltip, { delayed: !showCopied, label: showCopied ? copiedLabel : copyLabel, placement: "top", children: jsxRuntime.jsx(Button, { ariaLabel: copyLabel, className: cvaIconButton({ size, className }), "data-testid": dataTestId, onBlur: () => setShowCopied(false), onClick: handleCopy, onMouseLeave: () => setShowCopied(false), prefix: jsxRuntime.jsx(Icon, { ariaHidden: true, name: "Square2Stack", size: size === "large" ? "medium" : "small" }), ref: ref, size: size, square: true, style: style, variant: "ghost-neutral" }) }));
+};
+CopyButton.displayName = "CopyButton";
+
 const cvaDetailsList = cssClassVarianceUtilities.cvaMerge(["flex", "w-full", "min-w-0", "items-center", "truncate", "text-xs", "text-neutral-600", "font-medium", "pt-0"], {
     variants: {
         hasLink: {
@@ -14286,6 +14340,7 @@ exports.CardFooter = CardFooter;
 exports.CardHeader = CardHeader;
 exports.Collapse = Collapse;
 exports.CompletionStatusIndicator = CompletionStatusIndicator;
+exports.CopyButton = CopyButton;
 exports.CopyableText = CopyableText;
 exports.DEFAULT_SKELETON_PREFERENCE_CARD_PROPS = DEFAULT_SKELETON_PREFERENCE_CARD_PROPS;
 exports.DetailsList = DetailsList;

package/index.esm.js

@@ -3978,7 +3978,15 @@ const Content = ({ text, withIcon, }) => {
  *
  * ### When not to use
  * - Do not use CopyableText for long paragraphs or content that doesn't need to be copied.
- * - If you need a custom-looking copy button (different display text than copied value), use `useCopyToClipboard` directly.
+ * - 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
@@ -4027,6 +4035,52 @@ const CopyableText = ({ text, withIcon = true, size = "sm", copyLabel = "Copy",
             }, 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.
+ *
+ * ### When to use
+ * Use CopyButton when the copyable value is displayed as plain text (e.g. in a table cell or
+ * row) and only a dedicated icon should trigger the copy, keeping the rest of the row clickable.
+ *
+ * ### When not to use
+ * If the displayed text itself should be the click target, use `CopyableText` instead.
+ *
+ * ### Empty values
+ * Like `CopyableText`, 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
+ * import { CopyButton, Text } from "@trackunit/react-components";
+ *
+ * const ShortCode = ({ code }: { code: string }) => (
+ *   <div className="flex items-center gap-0.5">
+ *     <Text type="span">{code}</Text>
+ *     <CopyButton value={code} />
+ *   </div>
+ * );
+ * ```
+ * @param {CopyButtonProps} props - The props for the CopyButton component
+ * @returns {ReactElement} CopyButton component
+ */
+const CopyButton = ({ value, copyLabel = "Copy", copiedLabel = "Copied!", size = "small", className, style, "data-testid": dataTestId, ref, }) => {
+    const [showCopied, setShowCopied] = useState(false);
+    const [, copyToClipboard] = useCopyToClipboard();
+    if (!value) {
+        return null;
+    }
+    const handleCopy = (e) => {
+        e.stopPropagation();
+        void copyToClipboard(value)
+            .then(() => setShowCopied(true))
+            .catch(() => undefined);
+    };
+    return (jsx(Tooltip, { delayed: !showCopied, label: showCopied ? copiedLabel : copyLabel, placement: "top", children: jsx(Button, { ariaLabel: copyLabel, className: cvaIconButton({ size, className }), "data-testid": dataTestId, onBlur: () => setShowCopied(false), onClick: handleCopy, onMouseLeave: () => setShowCopied(false), prefix: jsx(Icon, { ariaHidden: true, name: "Square2Stack", size: size === "large" ? "medium" : "small" }), ref: ref, size: size, square: true, style: style, variant: "ghost-neutral" }) }));
+};
+CopyButton.displayName = "CopyButton";
+
 const cvaDetailsList = cvaMerge(["flex", "w-full", "min-w-0", "items-center", "truncate", "text-xs", "text-neutral-600", "font-medium", "pt-0"], {
     variants: {
         hasLink: {
@@ -14271,4 +14325,4 @@ const useWindowActivity = ({ onFocus, onBlur, skip = false } = { onBlur: undefin
  */
 setupLibraryTranslations();
 
-export { Alert, Badge, Breadcrumb, Button, Card, CardBody, CardFooter, CardHeader, Collapse, CompletionStatusIndicator, 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, 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, useHover, useInfiniteScroll, useIsFirstRender, useIsFullscreen, useIsTextTruncated, useKeyboardShortcut, useList, useListItemHeight, useLocalStorage, useLocalStorageReducer, useMeasure, 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, 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, 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, useHover, useInfiniteScroll, useIsFirstRender, useIsFullscreen, useIsTextTruncated, useKeyboardShortcut, useList, useListItemHeight, useLocalStorage, useLocalStorageReducer, useMeasure, 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "2.9.4",
+  "version": "2.10.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.3",
-    "@trackunit/css-class-variance-utilities": "1.14.14",
-    "@trackunit/shared-utils": "1.16.17",
-    "@trackunit/ui-icons": "1.14.13",
+    "@trackunit/ui-design-tokens": "1.15.4",
+    "@trackunit/css-class-variance-utilities": "1.14.15",
+    "@trackunit/shared-utils": "1.16.18",
+    "@trackunit/ui-icons": "1.14.14",
     "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.10"
+    "@trackunit/i18n-library-translation": "2.4.11"
   },
   "peerDependencies": {
     "react": "^19.0.0",

package/src/components/CopyButton/CopyButton.d.ts

@@ -0,0 +1,63 @@
+import { type ReactElement } from "react";
+import { CommonProps } from "../../common/CommonProps";
+import { Refable } from "../../common/Refable";
+import { Size } from "../../common/Size";
+import type { Styleable } from "../../common/Styleable";
+export interface CopyButtonProps extends CommonProps, Styleable, Refable<HTMLButtonElement> {
+    /**
+     * The value copied to the clipboard when the button is clicked.
+     */
+    value: string;
+    /**
+     * Accessible label for the button, and tooltip text shown before copying.
+     *
+     * @default "Copy"
+     */
+    copyLabel?: string;
+    /**
+     * Tooltip text shown briefly after a successful copy.
+     *
+     * @default "Copied!"
+     */
+    copiedLabel?: string;
+    /**
+     * The size of the icon button.
+     *
+     * @default "small"
+     */
+    size?: Size;
+}
+/**
+ * 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.
+ *
+ * ### When to use
+ * Use CopyButton when the copyable value is displayed as plain text (e.g. in a table cell or
+ * row) and only a dedicated icon should trigger the copy, keeping the rest of the row clickable.
+ *
+ * ### When not to use
+ * If the displayed text itself should be the click target, use `CopyableText` instead.
+ *
+ * ### Empty values
+ * Like `CopyableText`, 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
+ * import { CopyButton, Text } from "@trackunit/react-components";
+ *
+ * const ShortCode = ({ code }: { code: string }) => (
+ *   <div className="flex items-center gap-0.5">
+ *     <Text type="span">{code}</Text>
+ *     <CopyButton value={code} />
+ *   </div>
+ * );
+ * ```
+ * @param {CopyButtonProps} props - The props for the CopyButton component
+ * @returns {ReactElement} CopyButton component
+ */
+export declare const CopyButton: {
+    ({ value, copyLabel, copiedLabel, size, className, style, "data-testid": dataTestId, ref, }: CopyButtonProps): ReactElement | null;
+    displayName: string;
+};

package/src/components/CopyableText/CopyableText.d.ts

@@ -44,7 +44,15 @@ export interface CopyableTextProps extends CommonProps, Styleable, Refable<HTMLB
  *
  * ### When not to use
  * - Do not use CopyableText for long paragraphs or content that doesn't need to be copied.
- * - If you need a custom-looking copy button (different display text than copied value), use `useCopyToClipboard` directly.
+ * - 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

package/src/components/buttons/shared/ButtonProps.d.ts

@@ -1,4 +1,4 @@
-import { MouseEventHandler } from "react";
+import { FocusEventHandler, MouseEventHandler } from "react";
 import type { AriaProps } from "../../../common/AriaProps";
 import { CommonProps } from "../../../common/CommonProps";
 import { Size } from "../../../common/Size";
@@ -18,6 +18,10 @@ export interface ButtonCommonProps extends CommonProps, Styleable, AriaProps {
      * A MouseLeave handler function
      */
     onMouseLeave?: MouseEventHandler<HTMLButtonElement>;
+    /**
+     * A Blur handler function
+     */
+    onBlur?: FocusEventHandler<HTMLButtonElement>;
     /**
      * Whether the button is loading.
      */

package/src/index.d.ts

@@ -22,6 +22,7 @@ export * from "./components/Clickable/Clickable.variants";
 export * from "./components/Collapse/Collapse";
 export * from "./components/CompletionStatusIndicator/CompletionStatusIndicator";
 export * from "./components/CopyableText/CopyableText";
+export * from "./components/CopyButton/CopyButton";
 export * from "./components/DetailsList/DetailsList";
 export * from "./components/EmptyState/EmptyState";
 export * from "./components/EmptyState/EmptyState.variants";