@trackunit/react-components 3.5.6 → 3.7.0

package/index.cjs.js

@@ -28,6 +28,7 @@ var zod = require('zod');
 var defaultTranslations = {
 	"breadcrumb.backButton": "Back",
 	"breadcrumb.expandButton": "expand",
+	"copyableValue.copyValue": "Copy {{value}}",
 	"copyButton.copied": "Copied!",
 	"copyButton.copy": "Copy",
 	"horizontalOverflowScroller.scrollLeft": "Scroll left",
@@ -4773,28 +4774,27 @@ const useCopyToClipboard = () => {
  * 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
- *   row) and only a dedicated icon should trigger the copy, keeping the rest of the row clickable.
  * - Labelled (`label` set): copying is the primary action of a panel or section — e.g. an invite
  *   link — and deserves a full button that is itself the click target.
+ * - Icon-only (default): a copy control on its own, where no value is displayed next to it — e.g.
+ *   in the corner of a code block.
  *
  * ### When not to use
- * Do not hand-roll copy affordances (custom icons, click-to-copy text) — this component is the
- * one copy control; pick icon-only or labelled mode instead.
+ * - To show a value with a copy button beside it, use `CopyableValue` — it owns the layout,
+ *   truncation and hover highlight. Do not pair `Text` and `CopyButton` by hand.
+ * - Do not hand-roll copy affordances (custom icons, click-to-copy text) — use this component or
+ *   `CopyableValue` instead.
  *
  * ### Empty values
  * 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
+ * @example Labelled button for an invite link
  * ```tsx
- * import { CopyButton, Text } from "@trackunit/react-components";
+ * import { CopyButton } 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>
+ * const CopyInviteLink = ({ link }: { link: string }) => (
+ *   <CopyButton label="Copy link" value={link} variant="secondary" />
  * );
  * ```
  * @param {CopyButtonProps} props - The props for the CopyButton component
@@ -4826,7 +4826,7 @@ const CopyButton = ({ value, copyLabel, copiedLabel, size = "small", label, vari
             setShowCopied(true);
             clearTimeout(resetTimerRef.current);
             resetTimerRef.current = setTimeout(() => setShowCopied(false), COPIED_FEEDBACK_DURATION_MS);
-            onCopy?.();
+            onCopy?.(value);
         }, () => undefined);
     };
     const buttonSize = toButtonSize(size);
@@ -4844,6 +4844,125 @@ const CopyButton = ({ value, copyLabel, copiedLabel, size = "small", label, vari
 CopyButton.displayName = "CopyButton";
 const COPIED_FEEDBACK_DURATION_MS = 2000;
 
+const cvaEmptyValue = cssClassVarianceUtilities.cva({ base: ["text-neutral-400"] });
+
+/**
+ * EmptyValue renders a consistent dash symbol ("–") to represent missing, null, undefined, or not applicable values.
+ * It is primarily used in tables and detail lists to maintain visual consistency when data is absent.
+ *
+ * ### When to use
+ * Use EmptyValue as a placeholder in table cells, detail lists, or any data display where values may be missing.
+ *
+ * ### When not to use
+ * Do not use EmptyValue for empty pages or sections — use `EmptyState` instead.
+ *
+ * @example Empty value in a details row
+ * ```tsx
+ * import { EmptyValue, Text } from "@trackunit/react-components";
+ *
+ * const AssetDetail = ({ value }: { value?: string }) => (
+ *   <div className="flex justify-between">
+ *     <Text weight="bold">Serial Number</Text>
+ *     {value ? <Text>{value}</Text> : <EmptyValue />}
+ *   </div>
+ * );
+ * ```
+ * @param {EmptyValueProps} props - The props for the EmptyValue component
+ * @returns {ReactElement} EmptyValue component
+ */
+const EmptyValue = ({ className, "data-testid": dataTestId, style, ref }) => {
+    return (jsxRuntime.jsx("div", { className: cvaEmptyValue({ className }), "data-testid": dataTestId, ref: ref, style: style, children: "-" }));
+};
+
+// Named group so the highlight only reacts to this pair's own button, even when pairs are nested
+// inside other `group` scopes (table rows, cards).
+// `-ml-1` offsets the value's `pl-1`, so the text lines up with plain text and column headers while
+// the highlight's left padding reaches into the surrounding space (e.g. the cell padding); the
+// widened max width keeps the right edge where it was.
+const cvaCopyableValue = cssClassVarianceUtilities.cva({
+    base: ["group/copyable-value", "items-center", "-ml-1", "max-w-[calc(100%+0.25rem)]"],
+    variants: {
+        inline: {
+            // `overflow-hidden` + the max width defeat the grid/flex `min-width: auto` blowout, so the
+            // value truncates inside table cells instead of widening them.
+            false: ["flex", "min-w-0", "overflow-hidden"],
+            true: ["inline-flex"],
+        },
+    },
+    defaultVariants: {
+        inline: false,
+    },
+});
+// The value stretches to the button's height and tints while the button is hovered or keyboard-
+// focused, so value and button read as one fused control. `focus-visible` (not `focus`) keeps the
+// tint from sticking on a row after a mouse click. Anchors inside the value do not trigger it.
+const cvaCopyableValueText = cssClassVarianceUtilities.cva({
+    base: [
+        "min-w-0",
+        "self-stretch",
+        "content-center",
+        "rounded-l-md",
+        "pl-1",
+        "pr-0.5",
+        "transition-colors",
+        "group-has-[button:hover]/copyable-value:bg-primary-100",
+        "group-has-[button:focus-visible]/copyable-value:bg-primary-100",
+    ],
+    variants: {
+        inline: {
+            false: ["truncate"],
+            // Lets values without spaces (URLs, tokens) wrap inside their box instead of running under
+            // the button.
+            true: ["[overflow-wrap:anywhere]"],
+        },
+    },
+    defaultVariants: {
+        inline: false,
+    },
+});
+// Squares the button's left edge against the value and matches the value's tint, completing the
+// fused look. The tint is owned here, inside the DS, rather than at call sites — the same way
+// CopyButton composes Button through cvaIconButton.
+const cvaCopyableValueButton = cssClassVarianceUtilities.cva({
+    base: ["shrink-0", "rounded-l-none", "hover:bg-primary-100", "focus-visible:bg-primary-100"],
+});
+
+/**
+ * CopyableValue displays a value as plain (non-clickable) text with a copy button beside it. While the
+ * button is hovered or focused, the value is highlighted together with it, so the two read as one control
+ * and it is clear what will be copied.
+ *
+ * ### When to use
+ * Use CopyableValue whenever a value such as an ID, short code, URL or token is shown and should be
+ * copyable — in table cells, detail lists, cards and drawers. Long values truncate to the available
+ * width while the full value is still copied.
+ *
+ * ### When not to use
+ * - Do not hand-roll a `Text` + `CopyButton` pair — this component owns the layout, truncation and highlight.
+ * - When copying is the primary action of a panel (e.g. an invite link), use `CopyButton` with a `label` instead.
+ * - Do not make the value itself click-to-copy — only the button copies, so the surrounding row or
+ *   card stays clickable.
+ *
+ * @example Copyable account ID in a table cell
+ * ```tsx
+ * import { CopyableValue } from "@trackunit/react-components";
+ *
+ * const AccountIdCell = ({ accountId }: { accountId: string }) => (
+ *   <CopyableValue size="extraSmall" value={accountId} />
+ * );
+ * ```
+ * @param {CopyableValueProps} props - The props for the CopyableValue component
+ * @returns {ReactElement} CopyableValue component
+ */
+const CopyableValue = ({ value, children, copyLabel, copiedLabel, size = "small", textSize = "medium", inline = false, onCopy, className, style, "data-testid": dataTestId, ref, }) => {
+    const [t] = useTranslation();
+    if (value === "" && children === undefined) {
+        return (jsxRuntime.jsx(EmptyValue, { className: className, "data-testid": dataTestId ? `${dataTestId}-empty` : undefined, style: style }));
+    }
+    return (jsxRuntime.jsxs("span", { className: cvaCopyableValue({ inline, className }), "data-testid": dataTestId, ref: ref, style: style, children: [jsxRuntime.jsx(Text, { className: cvaCopyableValueText({ inline }), size: textSize, type: "span", children: children ?? value }), jsxRuntime.jsx(CopyButton, { className: cvaCopyableValueButton(), copiedLabel: copiedLabel, copyLabel: copyLabel ?? t("copyableValue.copyValue", { value }), "data-testid": dataTestId ? `${dataTestId}-button` : undefined, onCopy: onCopy, size: size, value: value })] }));
+};
+CopyableValue.displayName = "CopyableValue";
+
 const cvaContainerStyles = cssClassVarianceUtilities.cva({
     base: [
         "flex",
@@ -4979,36 +5098,6 @@ const EmptyState = ({ description, altText, image = "SEARCH_DOCUMENT", customIma
     return (jsxRuntime.jsx("div", { className: cvaContainerStyles({ className }), "data-testid": dataTestId ?? "empty-state", ref: ref, style: style, children: loading ? (jsxRuntime.jsxs("div", { className: "flex w-full flex-col items-center gap-4", children: [jsxRuntime.jsx(Spinner, { centering: "centered", "data-testid": "spinner" }), jsxRuntime.jsx(SkeletonLabel, { textSize: "text-base", width: "clamp(20%, 200px, 80%)" })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [customImageSrc !== null && customImageSrc !== undefined ? (typeof customImageSrc === "string" ? (jsxRuntime.jsx("img", { alt: altText, className: cvaImgStyles(), height: 200, src: customImageSrc, width: 200 })) : (customImageSrc)) : (typeof ImageSource !== "undefined" && (jsxRuntime.jsx(ImageSource, { "data-testid": "empty-state-image", height: 200, width: 200 }, image))), description !== undefined && description !== "" ? (jsxRuntime.jsx(Text, { align: "center", size: "medium", children: description })) : null, jsxRuntime.jsxs("div", { className: "mt-4 grid gap-3", children: [jsxRuntime.jsxs("div", { className: "flex gap-3", children: [secondaryAction ? (jsxRuntime.jsx(Button, { "data-testid": "empty-state-secondary-button", disabled: secondaryAction.disabled, onClick: secondaryAction.onClick, variant: "secondary", children: secondaryAction.to ? (jsxRuntime.jsx(reactRouter.Link, { params: secondaryAction.to.parameters, to: secondaryAction.to.pathname, children: secondaryAction.title })) : (secondaryAction.title) })) : null, primaryAction ? (jsxRuntime.jsx(Button, { "data-testid": "empty-state-primary-button", disabled: primaryAction.disabled, onClick: primaryAction.onClick, children: primaryAction.to ? (jsxRuntime.jsx(reactRouter.Link, { params: primaryAction.to.parameters, to: primaryAction.to.pathname, children: primaryAction.title })) : (primaryAction.title) })) : null] }), additionalHelpAction?.to ? (jsxRuntime.jsx(Button, { asChild: true, "data-testid": "empty-state-additional-button", disabled: additionalHelpAction.disabled, onClick: additionalHelpAction.onClick, suffix: jsxRuntime.jsx(Icon, { name: "ArrowTopRightOnSquare", size: "small" }), variant: "ghost", children: jsxRuntime.jsx(reactRouter.Link, { params: additionalHelpAction.to.parameters, target: additionalHelpAction.to.target, to: additionalHelpAction.to.pathname, children: additionalHelpAction.title }) })) : null] })] })) }));
 };
 
-const cvaEmptyValue = cssClassVarianceUtilities.cva({ base: ["text-neutral-400"] });
-
-/**
- * EmptyValue renders a consistent dash symbol ("–") to represent missing, null, undefined, or not applicable values.
- * It is primarily used in tables and detail lists to maintain visual consistency when data is absent.
- *
- * ### When to use
- * Use EmptyValue as a placeholder in table cells, detail lists, or any data display where values may be missing.
- *
- * ### When not to use
- * Do not use EmptyValue for empty pages or sections — use `EmptyState` instead.
- *
- * @example Empty value in a details row
- * ```tsx
- * import { EmptyValue, Text } from "@trackunit/react-components";
- *
- * const AssetDetail = ({ value }: { value?: string }) => (
- *   <div className="flex justify-between">
- *     <Text weight="bold">Serial Number</Text>
- *     {value ? <Text>{value}</Text> : <EmptyValue />}
- *   </div>
- * );
- * ```
- * @param {EmptyValueProps} props - The props for the EmptyValue component
- * @returns {ReactElement} EmptyValue component
- */
-const EmptyValue = ({ className, "data-testid": dataTestId, style, ref }) => {
-    return (jsxRuntime.jsx("div", { className: cvaEmptyValue({ className }), "data-testid": dataTestId, ref: ref, style: style, children: "-" }));
-};
-
 const cvaExternalLink = cssClassVarianceUtilities.cva({
     base: ["underline", "decoration-[1.5px]", "underline-offset-2", "text-sm"],
     variants: {
@@ -15830,6 +15919,7 @@ exports.CardHeader = CardHeader;
 exports.Collapse = Collapse;
 exports.CompletionStatusIndicator = CompletionStatusIndicator;
 exports.CopyButton = CopyButton;
+exports.CopyableValue = CopyableValue;
 exports.DEFAULT_SKELETON_PREFERENCE_CARD_PROPS = DEFAULT_SKELETON_PREFERENCE_CARD_PROPS;
 exports.DetailsList = DetailsList;
 exports.EmptyState = EmptyState;

package/index.esm.js

@@ -27,6 +27,7 @@ import { z } from 'zod';
 var defaultTranslations = {
 	"breadcrumb.backButton": "Back",
 	"breadcrumb.expandButton": "expand",
+	"copyableValue.copyValue": "Copy {{value}}",
 	"copyButton.copied": "Copied!",
 	"copyButton.copy": "Copy",
 	"horizontalOverflowScroller.scrollLeft": "Scroll left",
@@ -4772,28 +4773,27 @@ const useCopyToClipboard = () => {
  * 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
- *   row) and only a dedicated icon should trigger the copy, keeping the rest of the row clickable.
  * - Labelled (`label` set): copying is the primary action of a panel or section — e.g. an invite
  *   link — and deserves a full button that is itself the click target.
+ * - Icon-only (default): a copy control on its own, where no value is displayed next to it — e.g.
+ *   in the corner of a code block.
  *
  * ### When not to use
- * Do not hand-roll copy affordances (custom icons, click-to-copy text) — this component is the
- * one copy control; pick icon-only or labelled mode instead.
+ * - To show a value with a copy button beside it, use `CopyableValue` — it owns the layout,
+ *   truncation and hover highlight. Do not pair `Text` and `CopyButton` by hand.
+ * - Do not hand-roll copy affordances (custom icons, click-to-copy text) — use this component or
+ *   `CopyableValue` instead.
  *
  * ### Empty values
  * 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
+ * @example Labelled button for an invite link
  * ```tsx
- * import { CopyButton, Text } from "@trackunit/react-components";
+ * import { CopyButton } 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>
+ * const CopyInviteLink = ({ link }: { link: string }) => (
+ *   <CopyButton label="Copy link" value={link} variant="secondary" />
  * );
  * ```
  * @param {CopyButtonProps} props - The props for the CopyButton component
@@ -4825,7 +4825,7 @@ const CopyButton = ({ value, copyLabel, copiedLabel, size = "small", label, vari
             setShowCopied(true);
             clearTimeout(resetTimerRef.current);
             resetTimerRef.current = setTimeout(() => setShowCopied(false), COPIED_FEEDBACK_DURATION_MS);
-            onCopy?.();
+            onCopy?.(value);
         }, () => undefined);
     };
     const buttonSize = toButtonSize(size);
@@ -4843,6 +4843,125 @@ const CopyButton = ({ value, copyLabel, copiedLabel, size = "small", label, vari
 CopyButton.displayName = "CopyButton";
 const COPIED_FEEDBACK_DURATION_MS = 2000;
 
+const cvaEmptyValue = cva({ base: ["text-neutral-400"] });
+
+/**
+ * EmptyValue renders a consistent dash symbol ("–") to represent missing, null, undefined, or not applicable values.
+ * It is primarily used in tables and detail lists to maintain visual consistency when data is absent.
+ *
+ * ### When to use
+ * Use EmptyValue as a placeholder in table cells, detail lists, or any data display where values may be missing.
+ *
+ * ### When not to use
+ * Do not use EmptyValue for empty pages or sections — use `EmptyState` instead.
+ *
+ * @example Empty value in a details row
+ * ```tsx
+ * import { EmptyValue, Text } from "@trackunit/react-components";
+ *
+ * const AssetDetail = ({ value }: { value?: string }) => (
+ *   <div className="flex justify-between">
+ *     <Text weight="bold">Serial Number</Text>
+ *     {value ? <Text>{value}</Text> : <EmptyValue />}
+ *   </div>
+ * );
+ * ```
+ * @param {EmptyValueProps} props - The props for the EmptyValue component
+ * @returns {ReactElement} EmptyValue component
+ */
+const EmptyValue = ({ className, "data-testid": dataTestId, style, ref }) => {
+    return (jsx("div", { className: cvaEmptyValue({ className }), "data-testid": dataTestId, ref: ref, style: style, children: "-" }));
+};
+
+// Named group so the highlight only reacts to this pair's own button, even when pairs are nested
+// inside other `group` scopes (table rows, cards).
+// `-ml-1` offsets the value's `pl-1`, so the text lines up with plain text and column headers while
+// the highlight's left padding reaches into the surrounding space (e.g. the cell padding); the
+// widened max width keeps the right edge where it was.
+const cvaCopyableValue = cva({
+    base: ["group/copyable-value", "items-center", "-ml-1", "max-w-[calc(100%+0.25rem)]"],
+    variants: {
+        inline: {
+            // `overflow-hidden` + the max width defeat the grid/flex `min-width: auto` blowout, so the
+            // value truncates inside table cells instead of widening them.
+            false: ["flex", "min-w-0", "overflow-hidden"],
+            true: ["inline-flex"],
+        },
+    },
+    defaultVariants: {
+        inline: false,
+    },
+});
+// The value stretches to the button's height and tints while the button is hovered or keyboard-
+// focused, so value and button read as one fused control. `focus-visible` (not `focus`) keeps the
+// tint from sticking on a row after a mouse click. Anchors inside the value do not trigger it.
+const cvaCopyableValueText = cva({
+    base: [
+        "min-w-0",
+        "self-stretch",
+        "content-center",
+        "rounded-l-md",
+        "pl-1",
+        "pr-0.5",
+        "transition-colors",
+        "group-has-[button:hover]/copyable-value:bg-primary-100",
+        "group-has-[button:focus-visible]/copyable-value:bg-primary-100",
+    ],
+    variants: {
+        inline: {
+            false: ["truncate"],
+            // Lets values without spaces (URLs, tokens) wrap inside their box instead of running under
+            // the button.
+            true: ["[overflow-wrap:anywhere]"],
+        },
+    },
+    defaultVariants: {
+        inline: false,
+    },
+});
+// Squares the button's left edge against the value and matches the value's tint, completing the
+// fused look. The tint is owned here, inside the DS, rather than at call sites — the same way
+// CopyButton composes Button through cvaIconButton.
+const cvaCopyableValueButton = cva({
+    base: ["shrink-0", "rounded-l-none", "hover:bg-primary-100", "focus-visible:bg-primary-100"],
+});
+
+/**
+ * CopyableValue displays a value as plain (non-clickable) text with a copy button beside it. While the
+ * button is hovered or focused, the value is highlighted together with it, so the two read as one control
+ * and it is clear what will be copied.
+ *
+ * ### When to use
+ * Use CopyableValue whenever a value such as an ID, short code, URL or token is shown and should be
+ * copyable — in table cells, detail lists, cards and drawers. Long values truncate to the available
+ * width while the full value is still copied.
+ *
+ * ### When not to use
+ * - Do not hand-roll a `Text` + `CopyButton` pair — this component owns the layout, truncation and highlight.
+ * - When copying is the primary action of a panel (e.g. an invite link), use `CopyButton` with a `label` instead.
+ * - Do not make the value itself click-to-copy — only the button copies, so the surrounding row or
+ *   card stays clickable.
+ *
+ * @example Copyable account ID in a table cell
+ * ```tsx
+ * import { CopyableValue } from "@trackunit/react-components";
+ *
+ * const AccountIdCell = ({ accountId }: { accountId: string }) => (
+ *   <CopyableValue size="extraSmall" value={accountId} />
+ * );
+ * ```
+ * @param {CopyableValueProps} props - The props for the CopyableValue component
+ * @returns {ReactElement} CopyableValue component
+ */
+const CopyableValue = ({ value, children, copyLabel, copiedLabel, size = "small", textSize = "medium", inline = false, onCopy, className, style, "data-testid": dataTestId, ref, }) => {
+    const [t] = useTranslation();
+    if (value === "" && children === undefined) {
+        return (jsx(EmptyValue, { className: className, "data-testid": dataTestId ? `${dataTestId}-empty` : undefined, style: style }));
+    }
+    return (jsxs("span", { className: cvaCopyableValue({ inline, className }), "data-testid": dataTestId, ref: ref, style: style, children: [jsx(Text, { className: cvaCopyableValueText({ inline }), size: textSize, type: "span", children: children ?? value }), jsx(CopyButton, { className: cvaCopyableValueButton(), copiedLabel: copiedLabel, copyLabel: copyLabel ?? t("copyableValue.copyValue", { value }), "data-testid": dataTestId ? `${dataTestId}-button` : undefined, onCopy: onCopy, size: size, value: value })] }));
+};
+CopyableValue.displayName = "CopyableValue";
+
 const cvaContainerStyles = cva({
     base: [
         "flex",
@@ -4978,36 +5097,6 @@ const EmptyState = ({ description, altText, image = "SEARCH_DOCUMENT", customIma
     return (jsx("div", { className: cvaContainerStyles({ className }), "data-testid": dataTestId ?? "empty-state", ref: ref, style: style, children: loading ? (jsxs("div", { className: "flex w-full flex-col items-center gap-4", children: [jsx(Spinner, { centering: "centered", "data-testid": "spinner" }), jsx(SkeletonLabel, { textSize: "text-base", width: "clamp(20%, 200px, 80%)" })] })) : (jsxs(Fragment, { children: [customImageSrc !== null && customImageSrc !== undefined ? (typeof customImageSrc === "string" ? (jsx("img", { alt: altText, className: cvaImgStyles(), height: 200, src: customImageSrc, width: 200 })) : (customImageSrc)) : (typeof ImageSource !== "undefined" && (jsx(ImageSource, { "data-testid": "empty-state-image", height: 200, width: 200 }, image))), description !== undefined && description !== "" ? (jsx(Text, { align: "center", size: "medium", children: description })) : null, jsxs("div", { className: "mt-4 grid gap-3", children: [jsxs("div", { className: "flex gap-3", children: [secondaryAction ? (jsx(Button, { "data-testid": "empty-state-secondary-button", disabled: secondaryAction.disabled, onClick: secondaryAction.onClick, variant: "secondary", children: secondaryAction.to ? (jsx(Link, { params: secondaryAction.to.parameters, to: secondaryAction.to.pathname, children: secondaryAction.title })) : (secondaryAction.title) })) : null, primaryAction ? (jsx(Button, { "data-testid": "empty-state-primary-button", disabled: primaryAction.disabled, onClick: primaryAction.onClick, children: primaryAction.to ? (jsx(Link, { params: primaryAction.to.parameters, to: primaryAction.to.pathname, children: primaryAction.title })) : (primaryAction.title) })) : null] }), additionalHelpAction?.to ? (jsx(Button, { asChild: true, "data-testid": "empty-state-additional-button", disabled: additionalHelpAction.disabled, onClick: additionalHelpAction.onClick, suffix: jsx(Icon, { name: "ArrowTopRightOnSquare", size: "small" }), variant: "ghost", children: jsx(Link, { params: additionalHelpAction.to.parameters, target: additionalHelpAction.to.target, to: additionalHelpAction.to.pathname, children: additionalHelpAction.title }) })) : null] })] })) }));
 };
 
-const cvaEmptyValue = cva({ base: ["text-neutral-400"] });
-
-/**
- * EmptyValue renders a consistent dash symbol ("–") to represent missing, null, undefined, or not applicable values.
- * It is primarily used in tables and detail lists to maintain visual consistency when data is absent.
- *
- * ### When to use
- * Use EmptyValue as a placeholder in table cells, detail lists, or any data display where values may be missing.
- *
- * ### When not to use
- * Do not use EmptyValue for empty pages or sections — use `EmptyState` instead.
- *
- * @example Empty value in a details row
- * ```tsx
- * import { EmptyValue, Text } from "@trackunit/react-components";
- *
- * const AssetDetail = ({ value }: { value?: string }) => (
- *   <div className="flex justify-between">
- *     <Text weight="bold">Serial Number</Text>
- *     {value ? <Text>{value}</Text> : <EmptyValue />}
- *   </div>
- * );
- * ```
- * @param {EmptyValueProps} props - The props for the EmptyValue component
- * @returns {ReactElement} EmptyValue component
- */
-const EmptyValue = ({ className, "data-testid": dataTestId, style, ref }) => {
-    return (jsx("div", { className: cvaEmptyValue({ className }), "data-testid": dataTestId, ref: ref, style: style, children: "-" }));
-};
-
 const cvaExternalLink = cva({
     base: ["underline", "decoration-[1.5px]", "underline-offset-2", "text-sm"],
     variants: {
@@ -15814,4 +15903,4 @@ const useWindowActivity = ({ onFocus, onBlur, skip = false } = { onBlur: undefin
  */
 setupLibraryTranslations();
 
-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, IdentityCard, IdentityCardSkeleton, 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, useStripForeignIdentityHash, useTextSearch, useTimeout, useViewportBreakpoints, useWatch, useWindowActivity };
+export { Alert, Badge, Breadcrumb, Button, Card, CardBody, CardFooter, CardHeader, Collapse, CompletionStatusIndicator, CopyButton, CopyableValue, DEFAULT_SKELETON_PREFERENCE_CARD_PROPS, DetailsList, EmptyState, EmptyValue, ExternalLink, GridAreas, Heading, Highlight, HorizontalOverflowScroller, Icon, IconButton, IdentityCard, IdentityCardSkeleton, 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, useStripForeignIdentityHash, useTextSearch, useTimeout, useViewportBreakpoints, useWatch, useWindowActivity };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "3.5.6",
+  "version": "3.7.0",
   "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.17.3",
-    "@trackunit/css-class-variance-utilities": "2.2.3",
-    "@trackunit/shared-utils": "1.18.3",
-    "@trackunit/ui-icons": "1.16.4",
+    "@trackunit/ui-design-tokens": "1.18.0",
+    "@trackunit/css-class-variance-utilities": "2.3.0",
+    "@trackunit/shared-utils": "1.19.0",
+    "@trackunit/ui-icons": "1.17.0",
     "es-toolkit": "^1.52.0",
     "@tanstack/react-virtual": "^3.14.13",
     "dequal": "^2.0.3",
     "fflate": "^0.8.3",
     "zod": "^3.25.76",
-    "@trackunit/i18n-library-translation": "2.7.4"
+    "@trackunit/i18n-library-translation": "2.8.0"
   },
   "peerDependencies": {
     "react": "^19.0.0",

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

@@ -41,11 +41,11 @@ export interface CopyButtonProps extends CommonProps, Styleable, Refable<HTMLBut
      */
     variant?: ButtonVariant;
     /**
-     * Called after the value has been written to the clipboard — via the
-     * Clipboard API or the `execCommand("copy")` fallback. Only skipped when
-     * both mechanisms fail.
+     * Called with the copied value after it has been written to the clipboard —
+     * via the Clipboard API or the `execCommand("copy")` fallback. Only skipped
+     * when both mechanisms fail.
      */
-    onCopy?: () => void;
+    onCopy?: (value: string) => void;
 }
 /**
  * CopyButton is a standalone icon button that copies a value to the clipboard when clicked,
@@ -53,28 +53,27 @@ export interface CopyButtonProps extends CommonProps, Styleable, Refable<HTMLBut
  * 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
- *   row) and only a dedicated icon should trigger the copy, keeping the rest of the row clickable.
  * - Labelled (`label` set): copying is the primary action of a panel or section — e.g. an invite
  *   link — and deserves a full button that is itself the click target.
+ * - Icon-only (default): a copy control on its own, where no value is displayed next to it — e.g.
+ *   in the corner of a code block.
  *
  * ### When not to use
- * Do not hand-roll copy affordances (custom icons, click-to-copy text) — this component is the
- * one copy control; pick icon-only or labelled mode instead.
+ * - To show a value with a copy button beside it, use `CopyableValue` — it owns the layout,
+ *   truncation and hover highlight. Do not pair `Text` and `CopyButton` by hand.
+ * - Do not hand-roll copy affordances (custom icons, click-to-copy text) — use this component or
+ *   `CopyableValue` instead.
  *
  * ### Empty values
  * 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
+ * @example Labelled button for an invite link
  * ```tsx
- * import { CopyButton, Text } from "@trackunit/react-components";
+ * import { CopyButton } 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>
+ * const CopyInviteLink = ({ link }: { link: string }) => (
+ *   <CopyButton label="Copy link" value={link} variant="secondary" />
  * );
  * ```
  * @param {CopyButtonProps} props - The props for the CopyButton component

package/src/components/CopyableValue/CopyableValue.d.ts

@@ -0,0 +1,86 @@
+import { type ReactElement, type ReactNode } from "react";
+import { CommonProps } from "../../common/CommonProps";
+import { Refable } from "../../common/Refable";
+import { Size } from "../../common/Size";
+import type { Styleable } from "../../common/Styleable";
+import { IconButtonSize } from "../buttons/shared/IconButtonSize";
+export interface CopyableValueProps extends CommonProps, Styleable, Refable<HTMLSpanElement> {
+    /**
+     * The value copied to the clipboard. It is also what is displayed, unless `children` is set.
+     * An empty string renders the `EmptyValue` dash with no copy button, so missing data looks the
+     * same as everywhere else.
+     */
+    value: string;
+    /**
+     * What to display in place of `value` — e.g. a link that stands in for the id being copied.
+     * The copy button still copies `value`.
+     */
+    children?: ReactNode;
+    /**
+     * Accessible label for the copy button, and tooltip text shown before copying. Defaults to the
+     * library's localized "Copy {value}", so the full value is available even when the displayed
+     * text is truncated, and every row in a table gets a distinct accessible name. Pass a short label
+     * that names the value (e.g. "Copy token") for long values such as tokens, keys or long URLs.
+     */
+    copyLabel?: string;
+    /**
+     * Tooltip text shown briefly after a successful copy. Defaults to the library's localized "Copied!".
+     */
+    copiedLabel?: string;
+    /**
+     * The size of the copy button. Use `extraSmall` inside fixed-height contexts such as table rows,
+     * where the button must fit a single text line.
+     *
+     * @default "small"
+     */
+    size?: IconButtonSize;
+    /**
+     * The text size of the displayed value.
+     *
+     * @default "medium"
+     */
+    textSize?: Size;
+    /**
+     * Places the pair inside running text, such as a sentence. The pair sits in the line as one inline
+     * box, and a long value wraps inside that box instead of truncating. Set `textSize` to match the
+     * surrounding text.
+     *
+     * @default false
+     */
+    inline?: boolean;
+    /**
+     * Called with the copied value after it has been written to the clipboard.
+     */
+    onCopy?: (value: string) => void;
+}
+/**
+ * CopyableValue displays a value as plain (non-clickable) text with a copy button beside it. While the
+ * button is hovered or focused, the value is highlighted together with it, so the two read as one control
+ * and it is clear what will be copied.
+ *
+ * ### When to use
+ * Use CopyableValue whenever a value such as an ID, short code, URL or token is shown and should be
+ * copyable — in table cells, detail lists, cards and drawers. Long values truncate to the available
+ * width while the full value is still copied.
+ *
+ * ### When not to use
+ * - Do not hand-roll a `Text` + `CopyButton` pair — this component owns the layout, truncation and highlight.
+ * - When copying is the primary action of a panel (e.g. an invite link), use `CopyButton` with a `label` instead.
+ * - Do not make the value itself click-to-copy — only the button copies, so the surrounding row or
+ *   card stays clickable.
+ *
+ * @example Copyable account ID in a table cell
+ * ```tsx
+ * import { CopyableValue } from "@trackunit/react-components";
+ *
+ * const AccountIdCell = ({ accountId }: { accountId: string }) => (
+ *   <CopyableValue size="extraSmall" value={accountId} />
+ * );
+ * ```
+ * @param {CopyableValueProps} props - The props for the CopyableValue component
+ * @returns {ReactElement} CopyableValue component
+ */
+export declare const CopyableValue: {
+    ({ value, children, copyLabel, copiedLabel, size, textSize, inline, onCopy, className, style, "data-testid": dataTestId, ref, }: CopyableValueProps): ReactElement;
+    displayName: string;
+};

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

@@ -0,0 +1,60 @@
+export declare const cvaCopyableValue: import("cva").CVAComponent<Omit<{
+    base: string[];
+    variants: {
+        inline: {
+            false: string[];
+            true: string[];
+        };
+    };
+    defaultVariants: {
+        inline: false;
+    };
+}, "defaultVariants"> & {
+    variants: {
+        inline: {
+            false: string[];
+            true: string[];
+        };
+    };
+    defaultVariants: Omit<{}, "inline"> & {
+        inline: false;
+    };
+}, {
+    inline: {
+        false: string[];
+        true: string[];
+    };
+}>;
+export declare const cvaCopyableValueText: import("cva").CVAComponent<Omit<{
+    base: string[];
+    variants: {
+        inline: {
+            false: string[];
+            true: string[];
+        };
+    };
+    defaultVariants: {
+        inline: false;
+    };
+}, "defaultVariants"> & {
+    variants: {
+        inline: {
+            false: string[];
+            true: string[];
+        };
+    };
+    defaultVariants: Omit<{}, "inline"> & {
+        inline: false;
+    };
+}, {
+    inline: {
+        false: string[];
+        true: string[];
+    };
+}>;
+export declare const cvaCopyableValueButton: import("cva").CVAComponent<Omit<{
+    base: string[];
+}, "defaultVariants"> & {
+    variants: unknown;
+    defaultVariants: Omit<{}, never>;
+}, unknown>;

package/src/index.d.ts

@@ -24,6 +24,7 @@ export * from "./components/Card/CardHeader";
 export * from "./components/Clickable/Clickable.variants";
 export * from "./components/Collapse/Collapse";
 export * from "./components/CompletionStatusIndicator/CompletionStatusIndicator";
+export * from "./components/CopyableValue/CopyableValue";
 export * from "./components/CopyButton/CopyButton";
 export * from "./components/DetailsList/DetailsList";
 export * from "./components/EmptyState/EmptyState";