@trackunit/react-components 1.20.15 → 1.20.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "1.20.15",
+  "version": "1.20.17",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -13,10 +13,10 @@
     "@floating-ui/react": "^0.26.25",
     "string-ts": "^2.0.0",
     "tailwind-merge": "^2.0.0",
-    "@trackunit/ui-design-tokens": "1.11.83",
-    "@trackunit/css-class-variance-utilities": "1.11.86",
-    "@trackunit/shared-utils": "1.13.86",
-    "@trackunit/ui-icons": "1.11.82",
+    "@trackunit/ui-design-tokens": "1.11.84",
+    "@trackunit/css-class-variance-utilities": "1.11.87",
+    "@trackunit/shared-utils": "1.13.87",
+    "@trackunit/ui-icons": "1.11.83",
     "es-toolkit": "^1.39.10",
     "@tanstack/react-virtual": "3.13.12",
     "fflate": "^0.8.2",

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

@@ -1,27 +1,49 @@
-import { ReactElement } from "react";
+import { type ReactElement } from "react";
 import { CommonProps } from "../../common/CommonProps";
 import { Refable } from "../../common/Refable";
-export interface CopyableTextProps extends CommonProps, Refable<HTMLSpanElement> {
+export interface CopyableTextProps extends CommonProps, Refable<HTMLButtonElement> {
     /**
-     * The text shown in the ui.
-     * By default this is also the text that gets copied when component is clicked.
+     * The text displayed in the UI and copied to clipboard on click.
      */
-    text?: string;
+    text: string;
     /**
-     * Alternative text to get copied to on click.
-     * This text is not visible in the ui.
+     * When true, renders a copy icon (Square2Stack) next to the text.
+     * The text is automatically truncated with an ellipsis.
+     *
+     * @default true
      */
-    alternativeText?: string;
+    withIcon?: boolean;
+    /**
+     * Controls the text size of the component.
+     * - `sm` (default): standard text size
+     * - `xs`: smaller text size
+     *
+     * @default "sm"
+     */
+    size?: "sm" | "xs";
+    /**
+     * Accessible label prefix for screen readers. Rendered as `aria-label="{copyLabel} {text}"`.
+     *
+     * @default "Copy"
+     */
+    copyLabel?: string;
+    /**
+     * Label shown in the tooltip after a successful copy.
+     *
+     * @default "Copied!"
+     */
+    copiedLabel?: string;
 }
 /**
  * CopyableText displays a text value that the user can click to copy to the clipboard.
- * It shows a brief animation on copy to provide visual feedback. The copied value can differ from the displayed text via `alternativeText`.
+ * 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.
+ * - 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.
  *
  * @example Copyable serial number
  * ```tsx
@@ -31,18 +53,15 @@ export interface CopyableTextProps extends CommonProps, Refable<HTMLSpanElement>
  *   <CopyableText text="SN-2024-00142" data-testid="serial-number" />
  * );
  * ```
- * @example Copyable text with alternative clipboard value
+ * @example Copyable text with small size
  * ```tsx
  * import { CopyableText } from "@trackunit/react-components";
  *
- * const AssetLink = () => (
- *   <CopyableText
- *     text="Excavator #1234"
- *     alternativeText="https://app.trackunit.com/assets/1234"
- *   />
+ * const CopyableId = () => (
+ *   <CopyableText text="ABC-123" size="xs" />
  * );
  * ```
  * @param {CopyableTextProps} props - The props for the CopyableText component
  * @returns {ReactElement} CopyableText component
  */
-export declare const CopyableText: ({ text, alternativeText, "data-testid": dataTestId, className, ref, }: CopyableTextProps) => ReactElement;
+export declare const CopyableText: ({ text, withIcon, size, copyLabel, copiedLabel, "data-testid": dataTestId, className, ref, }: CopyableTextProps) => ReactElement | null;

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

@@ -1,3 +1,4 @@
 export declare const cvaCopyableText: (props?: ({
     animating?: boolean | null | undefined;
+    size?: "sm" | "xs" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;