@trackunit/react-table-base-components 1.17.22-alpha-192bcb42ded.0 → 1.17.24

package/index.cjs.js

@@ -1,6 +1,7 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var i18nLibraryTranslation = require('@trackunit/i18n-library-translation');
 var reactComponents = require('@trackunit/react-components');
 var tailwindMerge = require('tailwind-merge');
 var reactFormComponents = require('@trackunit/react-form-components');
@@ -9,6 +10,46 @@ var dateAndTimeUtils = require('@trackunit/date-and-time-utils');
 var react = require('react');
 var sharedUtils = require('@trackunit/shared-utils');
 
+var defaultTranslations = {
+	"copyableCell.copied": "Copied!",
+	"copyableCell.copy": "Copy"
+};
+
+const namespace = "react.table-base-components";
+const translations = {
+    ns: namespace,
+    default: defaultTranslations,
+    languages: {
+        de: () => Promise.resolve().then(function () { return require('./translation.cjs.js'); }),
+        da: () => Promise.resolve().then(function () { return require('./translation.cjs2.js'); }),
+        cs: () => Promise.resolve().then(function () { return require('./translation.cjs3.js'); }),
+        nl: () => Promise.resolve().then(function () { return require('./translation.cjs4.js'); }),
+        fr: () => Promise.resolve().then(function () { return require('./translation.cjs5.js'); }),
+        fi: () => Promise.resolve().then(function () { return require('./translation.cjs6.js'); }),
+        hu: () => Promise.resolve().then(function () { return require('./translation.cjs7.js'); }),
+        it: () => Promise.resolve().then(function () { return require('./translation.cjs8.js'); }),
+        nb: () => Promise.resolve().then(function () { return require('./translation.cjs9.js'); }),
+        pl: () => Promise.resolve().then(function () { return require('./translation.cjs10.js'); }),
+        pt: () => Promise.resolve().then(function () { return require('./translation.cjs11.js'); }),
+        ru: () => Promise.resolve().then(function () { return require('./translation.cjs12.js'); }),
+        ro: () => Promise.resolve().then(function () { return require('./translation.cjs13.js'); }),
+        es: () => Promise.resolve().then(function () { return require('./translation.cjs14.js'); }),
+        sv: () => Promise.resolve().then(function () { return require('./translation.cjs15.js'); }),
+        ja: () => Promise.resolve().then(function () { return require('./translation.cjs16.js'); }),
+        th: () => Promise.resolve().then(function () { return require('./translation.cjs17.js'); }),
+    },
+};
+/**
+ *  Local useTranslation for this specific library
+ */
+const useTranslation = () => i18nLibraryTranslation.useNamespaceTranslation(namespace);
+/**
+ * Registers the translations for this library
+ */
+const setupLibraryTranslations = () => {
+    i18nLibraryTranslation.registerTranslations(translations);
+};
+
 /**
  * The `<ButtonCell>` component renders an interactive button within a table cell.
  * Uses a ghost-neutral variant by default for subtle inline actions.
@@ -110,6 +151,81 @@ const CheckboxCell = ({ checked, className, "data-testid": dataTestId }) => {
     return (jsxRuntime.jsx("div", { className: cvaCheckboxCell({ className }), "data-testid": dataTestId, children: jsxRuntime.jsx(reactFormComponents.Checkbox, { checked: checked, readOnly: true }) }));
 };
 
+const cvaMultiRowTableCellSection = cssClassVarianceUtilities.cvaMerge(["flex", "flex-col", "justify-center", "overflow-hidden"]);
+const cvaMultiRowTableCell = cssClassVarianceUtilities.cvaMerge(["flex", "justify-start"]);
+const cvaMainRowText = cssClassVarianceUtilities.cvaMerge(["overflow-hidden", "text-ellipsis", "text-sm"]);
+const cvaSecondaryRowText = cssClassVarianceUtilities.cvaMerge(["overflow-hidden", "text-ellipsis", "text-neutral-500", "text-xs"]);
+
+/**
+ * MultiRowTableCell renders two stacked rows inside a single table cell — a primary `main` row
+ * and a secondary row below it. String values are automatically styled with appropriate text sizes.
+ *
+ * ### When to use
+ * Use MultiRowTableCell when a table cell needs to display a primary value with secondary metadata below —
+ * for example, an asset name with its serial number, or a user name with their email.
+ *
+ * ### When not to use
+ * Do not use MultiRowTableCell for single-line text — use `TextCell`.
+ *
+ * @example Name with description in a table cell
+ * ```tsx
+ * import { MultiRowTableCell } from "@trackunit/react-table-base-components";
+ *
+ * const cell = ({ row }) => (
+ *   <MultiRowTableCell main={row.original.name} secondary={row.original.serialNumber} />
+ * );
+ * ```
+ * @param {MultiRowTableCellProps} props - The props for the MultiRowTableCell component
+ * @returns {ReactElement} MultiRowTableCell component
+ */
+const MultiRowTableCell = ({ main, secondary, "data-testid": dataTestId, className, }) => {
+    return (jsxRuntime.jsx("div", { className: cvaMultiRowTableCell({ className }), children: jsxRuntime.jsxs("section", { className: cvaMultiRowTableCellSection(), "data-testid": dataTestId, children: [typeof main === "string" ? jsxRuntime.jsx("div", { className: cvaMainRowText(), children: main }) : main, typeof secondary === "string" && secondary !== "" ? (jsxRuntime.jsx("div", { className: cvaSecondaryRowText(), children: secondary })) : (secondary)] }) }));
+};
+
+const cvaCopyableCell = cssClassVarianceUtilities.cvaMerge(["overflow-hidden", "w-fit"]);
+
+/**
+ * CopyableCell renders a table cell with click-to-copy functionality.
+ * Supports single-line and multi-line layouts.
+ *
+ * ### When to use
+ * Use CopyableCell inside table column definitions when a cell value (ID, name, reference) should be copyable.
+ *
+ * ### When not to use
+ * For standalone copyable text outside of tables, use `CopyableText` from `@trackunit/react-components`.
+ *
+ * @example Single-line copyable cell
+ * ```tsx
+ * import { CopyableCell } from "@trackunit/react-table-base-components";
+ *
+ * const cell = ({ getValue }) => (
+ *   <CopyableCell text={getValue()} />
+ * );
+ * ```
+ * @example Multi-line copyable cell
+ * ```tsx
+ * import { CopyableCell } from "@trackunit/react-table-base-components";
+ *
+ * const cell = ({ row }) => (
+ *   <CopyableCell
+ *     text={String(row.original.customerId)}
+ *     secondary={{ text: row.original.name }}
+ *   />
+ * );
+ * ```
+ * @param {CopyableCellProps} props - The props for the CopyableCell component
+ * @returns {ReactElement} CopyableCell component
+ */
+const CopyableCell = ({ text, secondary, "data-testid": dataTestId, className, }) => {
+    const [t] = useTranslation();
+    const copyLabel = t("copyableCell.copy");
+    const copiedLabel = t("copyableCell.copied");
+    if (secondary !== undefined) {
+        return (jsxRuntime.jsx(MultiRowTableCell, { className: cvaCopyableCell({ className }), "data-testid": dataTestId, main: jsxRuntime.jsx(reactComponents.CopyableText, { className: "self-start", copiedLabel: copiedLabel, copyLabel: copyLabel, text: text }), secondary: jsxRuntime.jsx(reactComponents.CopyableText, { className: "self-start", copiedLabel: copiedLabel, copyLabel: copyLabel, size: "xs", text: secondary.text }) }));
+    }
+    return (jsxRuntime.jsx(reactComponents.CopyableText, { className: cvaCopyableCell({ className }), copiedLabel: copiedLabel, copyLabel: copyLabel, "data-testid": dataTestId, text: text }));
+};
+
 const cvaDateTimeCell = cssClassVarianceUtilities.cvaMerge([""]);
 const cvaDateTime$1 = cssClassVarianceUtilities.cvaMerge(["slashed-zero", "text-sm", "text-ellipsis"]);
 const cvaDateTimeSince$1 = cssClassVarianceUtilities.cvaMerge(["slashed-zero", "text-neutral-500", "text-xs", "text-ellipsis"]);
@@ -450,37 +566,6 @@ const LinkCell = ({ link, type, className, ref, ...rest }) => {
     return (jsxRuntime.jsx(reactComponents.ExternalLink, { className: cvaLinkCell({ className }), href: `${linkPrefix}${link}`, ref: ref, ...rest, color: "neutral", onClick: handleClick, children: link }));
 };
 
-const cvaMultiRowTableCellSection = cssClassVarianceUtilities.cvaMerge(["flex", "flex-col", "justify-center", "overflow-hidden"]);
-const cvaMultiRowTableCell = cssClassVarianceUtilities.cvaMerge(["flex", "justify-start"]);
-const cvaMainRowText = cssClassVarianceUtilities.cvaMerge(["overflow-hidden", "text-ellipsis", "text-sm"]);
-const cvaSecondaryRowText = cssClassVarianceUtilities.cvaMerge(["overflow-hidden", "text-ellipsis", "text-neutral-500", "text-xs"]);
-
-/**
- * MultiRowTableCell renders two stacked rows inside a single table cell — a primary `main` row
- * and a secondary row below it. String values are automatically styled with appropriate text sizes.
- *
- * ### When to use
- * Use MultiRowTableCell when a table cell needs to display a primary value with secondary metadata below —
- * for example, an asset name with its serial number, or a user name with their email.
- *
- * ### When not to use
- * Do not use MultiRowTableCell for single-line text — use `TextCell`.
- *
- * @example Name with description in a table cell
- * ```tsx
- * import { MultiRowTableCell } from "@trackunit/react-table-base-components";
- *
- * const cell = ({ row }) => (
- *   <MultiRowTableCell main={row.original.name} secondary={row.original.serialNumber} />
- * );
- * ```
- * @param {MultiRowTableCellProps} props - The props for the MultiRowTableCell component
- * @returns {ReactElement} MultiRowTableCell component
- */
-const MultiRowTableCell = ({ main, secondary, "data-testid": dataTestId, className, }) => {
-    return (jsxRuntime.jsx("div", { className: cvaMultiRowTableCell({ className }), children: jsxRuntime.jsxs("section", { className: cvaMultiRowTableCellSection(), "data-testid": dataTestId, children: [typeof main === "string" ? jsxRuntime.jsx("div", { className: cvaMainRowText(), children: main }) : main, typeof secondary === "string" && secondary !== "" ? (jsxRuntime.jsx("div", { className: cvaSecondaryRowText(), children: secondary })) : (secondary)] }) }));
-};
-
 /**
  * Generic list to be used as tooltip content.
  * The component is data-shape agnostic. It supports primitives, React elements,
@@ -1201,8 +1286,18 @@ const cvaTr = cssClassVarianceUtilities.cvaMerge(["w-full", "h-max", "border-b",
     },
 });
 
+/*
+ * ----------------------------
+ * | SETUP TRANSLATIONS START |
+ * ----------------------------
+ * This import and function call is needed to register translations for this library.
+ * Do not remove this if this library has translations.
+ */
+setupLibraryTranslations();
+
 exports.ButtonCell = ButtonCell;
 exports.CheckboxCell = CheckboxCell;
+exports.CopyableCell = CopyableCell;
 exports.DateTimeCell = DateTimeCell;
 exports.HighlightCell = HighlightCell;
 exports.IdentityCell = IdentityCell;

package/index.esm.js

@@ -1,5 +1,6 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { Button, Icon, Highlight, Heading, ExternalLink, DetailsList, Indicator, Spinner, Tooltip, Text, Tag, Notice, IconButton, MoreMenu, MenuList, MenuItem, MenuDivider, useMergeRefs } from '@trackunit/react-components';
+import { registerTranslations, useNamespaceTranslation } from '@trackunit/i18n-library-translation';
+import { Button, Icon, CopyableText, Highlight, Heading, ExternalLink, DetailsList, Indicator, Spinner, Tooltip, Text, Tag, Notice, IconButton, MoreMenu, MenuList, MenuItem, MenuDivider, useMergeRefs } from '@trackunit/react-components';
 import { twMerge } from 'tailwind-merge';
 import { Checkbox } from '@trackunit/react-form-components';
 import { cvaMerge } from '@trackunit/css-class-variance-utilities';
@@ -7,6 +8,46 @@ import { formatDateUtil, timeSinceAuto, timeSinceInDays, Temporal } from '@track
 import { useMemo, useState, useEffect, isValidElement, cloneElement } from 'react';
 import { DateTimeFormat } from '@trackunit/shared-utils';
 
+var defaultTranslations = {
+	"copyableCell.copied": "Copied!",
+	"copyableCell.copy": "Copy"
+};
+
+const namespace = "react.table-base-components";
+const translations = {
+    ns: namespace,
+    default: defaultTranslations,
+    languages: {
+        de: () => import('./translation.esm.js'),
+        da: () => import('./translation.esm2.js'),
+        cs: () => import('./translation.esm3.js'),
+        nl: () => import('./translation.esm4.js'),
+        fr: () => import('./translation.esm5.js'),
+        fi: () => import('./translation.esm6.js'),
+        hu: () => import('./translation.esm7.js'),
+        it: () => import('./translation.esm8.js'),
+        nb: () => import('./translation.esm9.js'),
+        pl: () => import('./translation.esm10.js'),
+        pt: () => import('./translation.esm11.js'),
+        ru: () => import('./translation.esm12.js'),
+        ro: () => import('./translation.esm13.js'),
+        es: () => import('./translation.esm14.js'),
+        sv: () => import('./translation.esm15.js'),
+        ja: () => import('./translation.esm16.js'),
+        th: () => import('./translation.esm17.js'),
+    },
+};
+/**
+ *  Local useTranslation for this specific library
+ */
+const useTranslation = () => useNamespaceTranslation(namespace);
+/**
+ * Registers the translations for this library
+ */
+const setupLibraryTranslations = () => {
+    registerTranslations(translations);
+};
+
 /**
  * The `<ButtonCell>` component renders an interactive button within a table cell.
  * Uses a ghost-neutral variant by default for subtle inline actions.
@@ -108,6 +149,81 @@ const CheckboxCell = ({ checked, className, "data-testid": dataTestId }) => {
     return (jsx("div", { className: cvaCheckboxCell({ className }), "data-testid": dataTestId, children: jsx(Checkbox, { checked: checked, readOnly: true }) }));
 };
 
+const cvaMultiRowTableCellSection = cvaMerge(["flex", "flex-col", "justify-center", "overflow-hidden"]);
+const cvaMultiRowTableCell = cvaMerge(["flex", "justify-start"]);
+const cvaMainRowText = cvaMerge(["overflow-hidden", "text-ellipsis", "text-sm"]);
+const cvaSecondaryRowText = cvaMerge(["overflow-hidden", "text-ellipsis", "text-neutral-500", "text-xs"]);
+
+/**
+ * MultiRowTableCell renders two stacked rows inside a single table cell — a primary `main` row
+ * and a secondary row below it. String values are automatically styled with appropriate text sizes.
+ *
+ * ### When to use
+ * Use MultiRowTableCell when a table cell needs to display a primary value with secondary metadata below —
+ * for example, an asset name with its serial number, or a user name with their email.
+ *
+ * ### When not to use
+ * Do not use MultiRowTableCell for single-line text — use `TextCell`.
+ *
+ * @example Name with description in a table cell
+ * ```tsx
+ * import { MultiRowTableCell } from "@trackunit/react-table-base-components";
+ *
+ * const cell = ({ row }) => (
+ *   <MultiRowTableCell main={row.original.name} secondary={row.original.serialNumber} />
+ * );
+ * ```
+ * @param {MultiRowTableCellProps} props - The props for the MultiRowTableCell component
+ * @returns {ReactElement} MultiRowTableCell component
+ */
+const MultiRowTableCell = ({ main, secondary, "data-testid": dataTestId, className, }) => {
+    return (jsx("div", { className: cvaMultiRowTableCell({ className }), children: jsxs("section", { className: cvaMultiRowTableCellSection(), "data-testid": dataTestId, children: [typeof main === "string" ? jsx("div", { className: cvaMainRowText(), children: main }) : main, typeof secondary === "string" && secondary !== "" ? (jsx("div", { className: cvaSecondaryRowText(), children: secondary })) : (secondary)] }) }));
+};
+
+const cvaCopyableCell = cvaMerge(["overflow-hidden", "w-fit"]);
+
+/**
+ * CopyableCell renders a table cell with click-to-copy functionality.
+ * Supports single-line and multi-line layouts.
+ *
+ * ### When to use
+ * Use CopyableCell inside table column definitions when a cell value (ID, name, reference) should be copyable.
+ *
+ * ### When not to use
+ * For standalone copyable text outside of tables, use `CopyableText` from `@trackunit/react-components`.
+ *
+ * @example Single-line copyable cell
+ * ```tsx
+ * import { CopyableCell } from "@trackunit/react-table-base-components";
+ *
+ * const cell = ({ getValue }) => (
+ *   <CopyableCell text={getValue()} />
+ * );
+ * ```
+ * @example Multi-line copyable cell
+ * ```tsx
+ * import { CopyableCell } from "@trackunit/react-table-base-components";
+ *
+ * const cell = ({ row }) => (
+ *   <CopyableCell
+ *     text={String(row.original.customerId)}
+ *     secondary={{ text: row.original.name }}
+ *   />
+ * );
+ * ```
+ * @param {CopyableCellProps} props - The props for the CopyableCell component
+ * @returns {ReactElement} CopyableCell component
+ */
+const CopyableCell = ({ text, secondary, "data-testid": dataTestId, className, }) => {
+    const [t] = useTranslation();
+    const copyLabel = t("copyableCell.copy");
+    const copiedLabel = t("copyableCell.copied");
+    if (secondary !== undefined) {
+        return (jsx(MultiRowTableCell, { className: cvaCopyableCell({ className }), "data-testid": dataTestId, main: jsx(CopyableText, { className: "self-start", copiedLabel: copiedLabel, copyLabel: copyLabel, text: text }), secondary: jsx(CopyableText, { className: "self-start", copiedLabel: copiedLabel, copyLabel: copyLabel, size: "xs", text: secondary.text }) }));
+    }
+    return (jsx(CopyableText, { className: cvaCopyableCell({ className }), copiedLabel: copiedLabel, copyLabel: copyLabel, "data-testid": dataTestId, text: text }));
+};
+
 const cvaDateTimeCell = cvaMerge([""]);
 const cvaDateTime$1 = cvaMerge(["slashed-zero", "text-sm", "text-ellipsis"]);
 const cvaDateTimeSince$1 = cvaMerge(["slashed-zero", "text-neutral-500", "text-xs", "text-ellipsis"]);
@@ -448,37 +564,6 @@ const LinkCell = ({ link, type, className, ref, ...rest }) => {
     return (jsx(ExternalLink, { className: cvaLinkCell({ className }), href: `${linkPrefix}${link}`, ref: ref, ...rest, color: "neutral", onClick: handleClick, children: link }));
 };
 
-const cvaMultiRowTableCellSection = cvaMerge(["flex", "flex-col", "justify-center", "overflow-hidden"]);
-const cvaMultiRowTableCell = cvaMerge(["flex", "justify-start"]);
-const cvaMainRowText = cvaMerge(["overflow-hidden", "text-ellipsis", "text-sm"]);
-const cvaSecondaryRowText = cvaMerge(["overflow-hidden", "text-ellipsis", "text-neutral-500", "text-xs"]);
-
-/**
- * MultiRowTableCell renders two stacked rows inside a single table cell — a primary `main` row
- * and a secondary row below it. String values are automatically styled with appropriate text sizes.
- *
- * ### When to use
- * Use MultiRowTableCell when a table cell needs to display a primary value with secondary metadata below —
- * for example, an asset name with its serial number, or a user name with their email.
- *
- * ### When not to use
- * Do not use MultiRowTableCell for single-line text — use `TextCell`.
- *
- * @example Name with description in a table cell
- * ```tsx
- * import { MultiRowTableCell } from "@trackunit/react-table-base-components";
- *
- * const cell = ({ row }) => (
- *   <MultiRowTableCell main={row.original.name} secondary={row.original.serialNumber} />
- * );
- * ```
- * @param {MultiRowTableCellProps} props - The props for the MultiRowTableCell component
- * @returns {ReactElement} MultiRowTableCell component
- */
-const MultiRowTableCell = ({ main, secondary, "data-testid": dataTestId, className, }) => {
-    return (jsx("div", { className: cvaMultiRowTableCell({ className }), children: jsxs("section", { className: cvaMultiRowTableCellSection(), "data-testid": dataTestId, children: [typeof main === "string" ? jsx("div", { className: cvaMainRowText(), children: main }) : main, typeof secondary === "string" && secondary !== "" ? (jsx("div", { className: cvaSecondaryRowText(), children: secondary })) : (secondary)] }) }));
-};
-
 /**
  * Generic list to be used as tooltip content.
  * The component is data-shape agnostic. It supports primitives, React elements,
@@ -1199,4 +1284,13 @@ const cvaTr = cvaMerge(["w-full", "h-max", "border-b", "border-neutral-200"], {
     },
 });
 
-export { ButtonCell, CheckboxCell, DateTimeCell, HighlightCell, IdentityCell, ImageCell, IndicatorCell, LinkCell, ListTooltip, MultiRowTableCell, MultiValueTextCell, NoticeCell, NumberCell, PlainDateCell, ResizeHandle, RowActions, SortIndicator, TableRoot, TagsCell, Tbody, Td, TextCell, Tfoot, Th, Thead, Tr };
+/*
+ * ----------------------------
+ * | SETUP TRANSLATIONS START |
+ * ----------------------------
+ * This import and function call is needed to register translations for this library.
+ * Do not remove this if this library has translations.
+ */
+setupLibraryTranslations();
+
+export { ButtonCell, CheckboxCell, CopyableCell, DateTimeCell, HighlightCell, IdentityCell, ImageCell, IndicatorCell, LinkCell, ListTooltip, MultiRowTableCell, MultiValueTextCell, NoticeCell, NumberCell, PlainDateCell, ResizeHandle, RowActions, SortIndicator, TableRoot, TagsCell, Tbody, Td, TextCell, Tfoot, Th, Thead, Tr };

package/package.json

@@ -1,18 +1,19 @@
 {
   "name": "@trackunit/react-table-base-components",
-  "version": "1.17.22-alpha-192bcb42ded.0",
+  "version": "1.17.24",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
     "node": ">=24.x"
   },
   "dependencies": {
-    "@trackunit/react-components": "1.20.16-alpha-192bcb42ded.0",
-    "@trackunit/ui-icons": "1.11.83-alpha-192bcb42ded.0",
-    "@trackunit/react-form-components": "1.18.22-alpha-192bcb42ded.0",
-    "@trackunit/css-class-variance-utilities": "1.11.87-alpha-192bcb42ded.0",
-    "@trackunit/date-and-time-utils": "1.11.89-alpha-192bcb42ded.0",
-    "@trackunit/shared-utils": "1.13.87-alpha-192bcb42ded.0",
+    "@trackunit/react-components": "1.20.18",
+    "@trackunit/ui-icons": "1.11.83",
+    "@trackunit/react-form-components": "1.18.24",
+    "@trackunit/css-class-variance-utilities": "1.11.87",
+    "@trackunit/date-and-time-utils": "1.11.89",
+    "@trackunit/shared-utils": "1.13.87",
+    "@trackunit/i18n-library-translation": "1.15.18",
     "tailwind-merge": "^2.0.0"
   },
   "peerDependencies": {

package/src/components/CopyableCell/CopyableCell.d.ts

@@ -0,0 +1,44 @@
+import { CommonProps, type CopyableTextProps } from "@trackunit/react-components";
+import type { ReactElement } from "react";
+type CopyableCellSecondary = Pick<CopyableTextProps, "text">;
+export interface CopyableCellProps extends CommonProps, Pick<CopyableTextProps, "text"> {
+    /**
+     * When provided, renders a multi-line cell with a secondary row below the primary.
+     * The secondary row is independently copyable.
+     */
+    readonly secondary?: CopyableCellSecondary;
+}
+/**
+ * CopyableCell renders a table cell with click-to-copy functionality.
+ * Supports single-line and multi-line layouts.
+ *
+ * ### When to use
+ * Use CopyableCell inside table column definitions when a cell value (ID, name, reference) should be copyable.
+ *
+ * ### When not to use
+ * For standalone copyable text outside of tables, use `CopyableText` from `@trackunit/react-components`.
+ *
+ * @example Single-line copyable cell
+ * ```tsx
+ * import { CopyableCell } from "@trackunit/react-table-base-components";
+ *
+ * const cell = ({ getValue }) => (
+ *   <CopyableCell text={getValue()} />
+ * );
+ * ```
+ * @example Multi-line copyable cell
+ * ```tsx
+ * import { CopyableCell } from "@trackunit/react-table-base-components";
+ *
+ * const cell = ({ row }) => (
+ *   <CopyableCell
+ *     text={String(row.original.customerId)}
+ *     secondary={{ text: row.original.name }}
+ *   />
+ * );
+ * ```
+ * @param {CopyableCellProps} props - The props for the CopyableCell component
+ * @returns {ReactElement} CopyableCell component
+ */
+export declare const CopyableCell: ({ text, secondary, "data-testid": dataTestId, className, }: CopyableCellProps) => ReactElement;
+export {};

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

@@ -0,0 +1 @@
+export declare const cvaCopyableCell: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;

package/src/index.d.ts

@@ -1,5 +1,7 @@
 export * from "./components/ButtonCell/ButtonCell";
 export * from "./components/CheckboxCell/CheckboxCell";
+export { CopyableCell } from "./components/CopyableCell/CopyableCell";
+export type { CopyableCellProps } from "./components/CopyableCell/CopyableCell";
 export * from "./components/DateTimeCell/DateTimeCell";
 export { HighlightCell } from "./components/HighlightCell/HighlightCell";
 export type { HighlightCellProps } from "./components/HighlightCell/HighlightCell";

package/src/translation.d.ts

@@ -0,0 +1,25 @@
+import { NamespaceTransProps, TransForLibs, TranslationResource } from "@trackunit/i18n-library-translation";
+import defaultTranslations from "./locales/en/translation.json";
+export type TranslationKeys = keyof typeof defaultTranslations;
+export declare const namespace = "react.table-base-components";
+export declare const translations: TranslationResource<TranslationKeys>;
+/**
+ *  Local useTranslation for this specific library
+ */
+export declare const useTranslation: () => [TransForLibs<"copyableCell.copied" | "copyableCell.copy">, import("i18next").i18n, boolean] & {
+    t: TransForLibs<"copyableCell.copied" | "copyableCell.copy">;
+    i18n: import("i18next").i18n;
+    ready: boolean;
+};
+/**
+ * Type of the t function for the local useTranslation for this specific library
+ */
+export type TranslationFunction = TransForLibs<TranslationKeys>;
+/**
+ * Trans for this specific library.
+ */
+export declare const Trans: (props: NamespaceTransProps<TranslationKeys>) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Registers the translations for this library
+ */
+export declare const setupLibraryTranslations: () => void;

package/translation.cjs.js

@@ -0,0 +1,7 @@
+'use strict';
+
+var translation = {
+	
+};
+
+exports.default = translation;

package/translation.cjs10.js

@@ -0,0 +1,7 @@
+'use strict';
+
+var translation = {
+	
+};
+
+exports.default = translation;

package/translation.cjs11.js

@@ -0,0 +1,7 @@
+'use strict';
+
+var translation = {
+	
+};
+
+exports.default = translation;

package/translation.cjs12.js

@@ -0,0 +1,7 @@
+'use strict';
+
+var translation = {
+	
+};
+
+exports.default = translation;

package/translation.cjs13.js

@@ -0,0 +1,7 @@
+'use strict';
+
+var translation = {
+	
+};
+
+exports.default = translation;

package/translation.cjs14.js

@@ -0,0 +1,7 @@
+'use strict';
+
+var translation = {
+	
+};
+
+exports.default = translation;

package/translation.cjs15.js

@@ -0,0 +1,7 @@
+'use strict';
+
+var translation = {
+	
+};
+
+exports.default = translation;

package/translation.cjs16.js

@@ -0,0 +1,7 @@
+'use strict';
+
+var translation = {
+	
+};
+
+exports.default = translation;

package/translation.cjs17.js

@@ -0,0 +1,7 @@
+'use strict';
+
+var translation = {
+	
+};
+
+exports.default = translation;

package/translation.cjs2.js

@@ -0,0 +1,7 @@
+'use strict';
+
+var translation = {
+	
+};
+
+exports.default = translation;

package/translation.cjs3.js

@@ -0,0 +1,7 @@
+'use strict';
+
+var translation = {
+	
+};
+
+exports.default = translation;

package/translation.cjs4.js

@@ -0,0 +1,7 @@
+'use strict';
+
+var translation = {
+	
+};
+
+exports.default = translation;

package/translation.cjs5.js

@@ -0,0 +1,7 @@
+'use strict';
+
+var translation = {
+	
+};
+
+exports.default = translation;

package/translation.cjs6.js

@@ -0,0 +1,7 @@
+'use strict';
+
+var translation = {
+	
+};
+
+exports.default = translation;

package/translation.cjs7.js

@@ -0,0 +1,7 @@
+'use strict';
+
+var translation = {
+	
+};
+
+exports.default = translation;

package/translation.cjs8.js

@@ -0,0 +1,7 @@
+'use strict';
+
+var translation = {
+	
+};
+
+exports.default = translation;

package/translation.cjs9.js

@@ -0,0 +1,7 @@
+'use strict';
+
+var translation = {
+	
+};
+
+exports.default = translation;

package/translation.esm.js

@@ -0,0 +1,5 @@
+var translation = {
+	
+};
+
+export { translation as default };

package/translation.esm10.js

@@ -0,0 +1,5 @@
+var translation = {
+	
+};
+
+export { translation as default };

package/translation.esm11.js

@@ -0,0 +1,5 @@
+var translation = {
+	
+};
+
+export { translation as default };

package/translation.esm12.js

@@ -0,0 +1,5 @@
+var translation = {
+	
+};
+
+export { translation as default };

package/translation.esm13.js

@@ -0,0 +1,5 @@
+var translation = {
+	
+};
+
+export { translation as default };

package/translation.esm14.js

@@ -0,0 +1,5 @@
+var translation = {
+	
+};
+
+export { translation as default };

package/translation.esm15.js

@@ -0,0 +1,5 @@
+var translation = {
+	
+};
+
+export { translation as default };

package/translation.esm16.js

@@ -0,0 +1,5 @@
+var translation = {
+	
+};
+
+export { translation as default };

package/translation.esm17.js

@@ -0,0 +1,5 @@
+var translation = {
+	
+};
+
+export { translation as default };

package/translation.esm2.js

@@ -0,0 +1,5 @@
+var translation = {
+	
+};
+
+export { translation as default };

package/translation.esm3.js

@@ -0,0 +1,5 @@
+var translation = {
+	
+};
+
+export { translation as default };

package/translation.esm4.js

@@ -0,0 +1,5 @@
+var translation = {
+	
+};
+
+export { translation as default };

package/translation.esm5.js

@@ -0,0 +1,5 @@
+var translation = {
+	
+};
+
+export { translation as default };

package/translation.esm6.js

@@ -0,0 +1,5 @@
+var translation = {
+	
+};
+
+export { translation as default };

package/translation.esm7.js

@@ -0,0 +1,5 @@
+var translation = {
+	
+};
+
+export { translation as default };

package/translation.esm8.js

@@ -0,0 +1,5 @@
+var translation = {
+	
+};
+
+export { translation as default };

package/translation.esm9.js

@@ -0,0 +1,5 @@
+var translation = {
+	
+};
+
+export { translation as default };