@_linked/primitives 1.1.0 → 1.2.1

package/lib/cjs/components/SkeletonLoader.js

@@ -0,0 +1,71 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SkeletonLoader = SkeletonLoader;
+exports.TableRowSkeleton = TableRowSkeleton;
+const React = __importStar(require("react"));
+const SkeletonLoader_module_css_1 = __importDefault(require("./SkeletonLoader.module.css"));
+function SkeletonLoader({ width = '100%', height = 18, borderRadius = 4, className = '', lines = 1, animated = true, }) {
+    if (lines === 1) {
+        return (React.createElement("div", { className: `${SkeletonLoader_module_css_1.default.skeleton} ${animated ? SkeletonLoader_module_css_1.default.animated : ''} ${className}`, style: {
+                width,
+                height,
+                borderRadius,
+            } }));
+    }
+    return (React.createElement("div", { className: className }, Array.from({ length: lines }, (_, index) => (React.createElement("div", { key: index, className: `${SkeletonLoader_module_css_1.default.skeleton} ${animated ? SkeletonLoader_module_css_1.default.animated : ''} ${index < lines - 1 ? SkeletonLoader_module_css_1.default.marginBottom : ''}`, style: {
+            width: index === lines - 1 ? '60%' : '100%',
+            height,
+            borderRadius,
+        } })))));
+}
+// Table row skeleton component
+function TableRowSkeleton({ columns = 5 }) {
+    return (React.createElement("tr", { className: SkeletonLoader_module_css_1.default.tableRow },
+        React.createElement("td", { className: SkeletonLoader_module_css_1.default.tableCell, style: { width: '48px' } },
+            React.createElement(SkeletonLoader, { width: 18, height: 18, borderRadius: 6 })),
+        Array.from({ length: columns }, (_, index) => (React.createElement("td", { key: index, className: SkeletonLoader_module_css_1.default.tableCell },
+            React.createElement(SkeletonLoader, { width: "18vw", height: 18 })))),
+        React.createElement("td", { className: SkeletonLoader_module_css_1.default.tableCell },
+            React.createElement("div", { className: SkeletonLoader_module_css_1.default.actionButtons },
+                React.createElement(SkeletonLoader, { width: 22, height: 18, borderRadius: 6 }),
+                React.createElement(SkeletonLoader, { width: 22, height: 18, borderRadius: 6 }),
+                React.createElement(SkeletonLoader, { width: 22, height: 18, borderRadius: 6 })))));
+}
+exports.default = SkeletonLoader;
+//# sourceMappingURL=SkeletonLoader.js.map

package/lib/cjs/components/SkeletonLoader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkeletonLoader.js","sourceRoot":"","sources":["../../../src/components/SkeletonLoader.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYA,wCAoCC;AAGD,4CAoBC;AAvED,6CAA+B;AAC/B,4FAAgD;AAWhD,SAAgB,cAAc,CAAC,EAC7B,KAAK,GAAG,MAAM,EACd,MAAM,GAAG,EAAE,EACX,YAAY,GAAG,CAAC,EAChB,SAAS,GAAG,EAAE,EACd,KAAK,GAAG,CAAC,EACT,QAAQ,GAAG,IAAI,GACK;IACpB,IAAI,KAAK,KAAK,CAAC,EAAE,CAAC;QAChB,OAAO,CACL,6BACE,SAAS,EAAE,GAAG,mCAAK,CAAC,QAAQ,IAAI,QAAQ,CAAC,CAAC,CAAC,mCAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,IAAI,SAAS,EAAE,EAC7E,KAAK,EAAE;gBACL,KAAK;gBACL,MAAM;gBACN,YAAY;aACb,GACD,CACH,CAAC;IACJ,CAAC;IAED,OAAO,CACL,6BAAK,SAAS,EAAE,SAAS,IACtB,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,CAC3C,6BACE,GAAG,EAAE,KAAK,EACV,SAAS,EAAE,GAAG,mCAAK,CAAC,QAAQ,IAAI,QAAQ,CAAC,CAAC,CAAC,mCAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,IAAI,KAAK,GAAG,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,mCAAK,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,EAAE,EAC/G,KAAK,EAAE;YACL,KAAK,EAAE,KAAK,KAAK,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM;YAC3C,MAAM;YACN,YAAY;SACb,GACD,CACH,CAAC,CACE,CACP,CAAC;AACJ,CAAC;AAED,+BAA+B;AAC/B,SAAgB,gBAAgB,CAAC,EAAE,OAAO,GAAG,CAAC,EAAwB;IACpE,OAAO,CACL,4BAAI,SAAS,EAAE,mCAAK,CAAC,QAAQ;QAC3B,4BAAI,SAAS,EAAE,mCAAK,CAAC,SAAS,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE;YACtD,oBAAC,cAAc,IAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,YAAY,EAAE,CAAC,GAAI,CACvD;QACJ,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,CAC7C,4BAAI,GAAG,EAAE,KAAK,EAAE,SAAS,EAAE,mCAAK,CAAC,SAAS;YACxC,oBAAC,cAAc,IAAC,KAAK,EAAC,MAAM,EAAC,MAAM,EAAE,EAAE,GAAI,CACxC,CACN,CAAC;QACF,4BAAI,SAAS,EAAE,mCAAK,CAAC,SAAS;YAC5B,6BAAK,SAAS,EAAE,mCAAK,CAAC,aAAa;gBACjC,oBAAC,cAAc,IAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,YAAY,EAAE,CAAC,GAAI;gBAC1D,oBAAC,cAAc,IAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,YAAY,EAAE,CAAC,GAAI;gBAC1D,oBAAC,cAAc,IAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,YAAY,EAAE,CAAC,GAAI,CACtD,CACH,CACF,CACN,CAAC;AACJ,CAAC;AAED,kBAAe,cAAc,CAAC"}

package/lib/cjs/components/SkeletonLoader.module.css

@@ -0,0 +1,83 @@
+@import './helpers/mixins.css';
+@import '@_linked/css/package.css';
+
+/* ============================================================================
+   SkeletonLoader.module.css
+   
+   Loading placeholder with shimmer animation.
+   Uses semantic tokens from theme.css.
+   ============================================================================ */
+
+/* === Base Skeleton === */
+.skeleton {
+  background: linear-gradient(
+    90deg,
+    var(--skeleton-bg, var(--color-gray-100)) 25%,
+    var(--skeleton-highlight, var(--color-gray-200)) 50%,
+    var(--skeleton-bg, var(--color-gray-100)) 75%
+  );
+  background-size: 200% 100%;
+  animation: shimmer 1.5s infinite;
+  display: inline-block;
+  border-radius: var(--radius-selector, 4px);
+}
+
+/* === Animation Variant === */
+.animated {
+  animation: shimmer 1.5s infinite;
+}
+
+/* === Spacing === */
+.marginBottom {
+  margin-bottom: 0.5rem;
+}
+
+/* === Table Row Skeleton === */
+.tableRow {
+  border-bottom: 1px solid var(--skeleton-row-border, var(--table-row-border));
+}
+
+/* === Table Cell Skeleton === */
+.tableCell {
+  padding: var(--skeleton-row-padding-y, var(--surface-gap)) var(--skeleton-row-padding-x, var(--space-sm));
+  vertical-align: middle;
+}
+
+/* === Action Buttons Container === */
+.actionButtons {
+  display: flex;
+  gap: var(--space-sm);
+  align-items: center;
+  justify-content: flex-end;
+}
+
+/* ============================================================================
+   Dark Mode
+   ============================================================================ */
+
+[data-theme='dark'] .skeleton {
+  background: linear-gradient(
+    90deg,
+    var(--skeleton-bg, var(--color-gray-800)) 25%,
+    var(--skeleton-highlight, var(--color-gray-700)) 50%,
+    var(--skeleton-bg, var(--color-gray-800)) 75%
+  );
+  background-size: 200% 100%;
+}
+
+[data-theme='dark'] .tableRow {
+  border-bottom-color: var(--skeleton-row-border, var(--table-row-border));
+}
+
+/* ============================================================================
+   Shimmer Animation
+   ============================================================================ */
+
+@keyframes shimmer {
+  0% {
+    background-position: -200% 0;
+  }
+  100% {
+    background-position: 200% 0;
+  }
+}

package/lib/cjs/components/Spinner.d.ts

@@ -1,4 +1,23 @@
-import React from 'react';
-export declare function Spinner({ active }: {
+import * as React from 'react';
+export interface SpinnerProps {
+    /** Render nothing when false. */
     active?: boolean;
-}): React.JSX.Element;
+    size?: 'small' | 'medium' | 'large' | 'xlarge';
+    className?: string;
+    /** Announced to assistive technology. */
+    label?: string;
+}
+/**
+ * A loading indicator: a ring that inherits its colour, so it reads on any background.
+ *
+ * Two things it does that a bare CSS spin does not. It honours
+ * `prefers-reduced-motion` — a spinner is the most common thing to make someone with
+ * vestibular sensitivity look away — showing a still ring rather than nothing, so the
+ * "busy" signal survives. And it renders **nothing** when inactive, so it can be dropped
+ * into a scroll sentinel or a button without reserving space it is not using.
+ *
+ * The ring is an inner element rather than a border on the container. A border on the
+ * container is distorted the moment a flex parent stretches it; an explicitly sized inner
+ * element stays circular.
+ */
+export declare function Spinner({ active, size, className, label, }: SpinnerProps): React.JSX.Element;

package/lib/cjs/components/Spinner.js

@@ -1,12 +1,64 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Spinner = Spinner;
-const react_1 = __importDefault(require("react"));
+const React = __importStar(require("react"));
 const Spinner_module_css_1 = __importDefault(require("./Spinner.module.css"));
-function Spinner({ active = true }) {
-    return (react_1.default.createElement("div", { className: [Spinner_module_css_1.default.spinner, active && Spinner_module_css_1.default.active].join(' '), role: "progressbar", "aria-busy": active ? 'true' : 'false' }));
+const ClassNames_1 = require("@_linked/react/utils/ClassNames");
+const useReducedMotion_js_1 = require("../hooks/useReducedMotion.js");
+/**
+ * A loading indicator: a ring that inherits its colour, so it reads on any background.
+ *
+ * Two things it does that a bare CSS spin does not. It honours
+ * `prefers-reduced-motion` — a spinner is the most common thing to make someone with
+ * vestibular sensitivity look away — showing a still ring rather than nothing, so the
+ * "busy" signal survives. And it renders **nothing** when inactive, so it can be dropped
+ * into a scroll sentinel or a button without reserving space it is not using.
+ *
+ * The ring is an inner element rather than a border on the container. A border on the
+ * container is distorted the moment a flex parent stretches it; an explicitly sized inner
+ * element stays circular.
+ */
+function Spinner({ active = true, size = 'small', className, label = 'Loading', }) {
+    const reducedMotion = (0, useReducedMotion_js_1.useReducedMotion)();
+    if (!active)
+        return null;
+    return (React.createElement("div", { className: (0, ClassNames_1.cl)(Spinner_module_css_1.default.spinner, Spinner_module_css_1.default[size], className), role: "progressbar", "aria-busy": "true", "aria-label": label },
+        React.createElement("span", { className: (0, ClassNames_1.cl)(Spinner_module_css_1.default.ring, reducedMotion && Spinner_module_css_1.default.reducedMotion), "aria-hidden": "true" })));
 }
 //# sourceMappingURL=Spinner.js.map

package/lib/cjs/components/Spinner.js.map

@@ -1 +1 @@
-{"version":3,"file":"Spinner.js","sourceRoot":"","sources":["../../../src/components/Spinner.tsx"],"names":[],"mappings":";;;;;AAGA,0BAQC;AAXD,kDAA0B;AAC1B,8EAAyC;AAEzC,SAAgB,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,EAAE;IACvC,OAAO,CACL,uCACE,SAAS,EAAE,CAAC,4BAAK,CAAC,OAAO,EAAE,MAAM,IAAI,4BAAK,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,EAC5D,IAAI,EAAC,aAAa,eACP,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,GACpC,CACH,CAAC;AACJ,CAAC"}
+{"version":3,"file":"Spinner.js","sourceRoot":"","sources":["../../../src/components/Spinner.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BA,0BAuBC;AAlDD,6CAA+B;AAC/B,8EAAyC;AACzC,gEAAmD;AACnD,sEAA8D;AAW9D;;;;;;;;;;;;GAYG;AACH,SAAgB,OAAO,CAAC,EACtB,MAAM,GAAG,IAAI,EACb,IAAI,GAAG,OAAO,EACd,SAAS,EACT,KAAK,GAAG,SAAS,GACJ;IACb,MAAM,aAAa,GAAG,IAAA,sCAAgB,GAAE,CAAC;IAEzC,IAAI,CAAC,MAAM;QAAE,OAAO,IAAI,CAAC;IAEzB,OAAO,CACL,6BACE,SAAS,EAAE,IAAA,eAAE,EAAC,4BAAK,CAAC,OAAO,EAAE,4BAAK,CAAC,IAAI,CAAC,EAAE,SAAS,CAAC,EACpD,IAAI,EAAC,aAAa,eACR,MAAM,gBACJ,KAAK;QAEjB,8BACE,SAAS,EAAE,IAAA,eAAE,EAAC,4BAAK,CAAC,IAAI,EAAE,aAAa,IAAI,4BAAK,CAAC,aAAa,CAAC,iBACnD,MAAM,GAClB,CACE,CACP,CAAC;AACJ,CAAC"}

package/lib/cjs/components/Spinner.module.css

@@ -2,20 +2,67 @@
 @import '@_linked/css/package.css';
 
 .spinner {
-  border: var(--spinner-border-width, 4px) solid
-    var(--spinner-track-color, transparent);
-  border-top-color: var(--spinner-indicator-color, var(--meter-indicator-bg));
-  border-radius: 50%;
+  display: inline-flex;
+  /* Never grow or shrink in a flex parent — that would distort the ring. */
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  color: var(--spinner-indicator-color, var(--meter-indicator-bg, currentColor));
+}
+
+/* Sized explicitly rather than filling the container, so the ring stays a circle even when
+   a flex parent stretches the box around it. */
+.ring {
+  box-sizing: border-box;
+  flex: 0 0 auto;
   width: var(--spinner-size, --spacing(4));
   height: var(--spinner-size, --spacing(4));
-  animation: spin var(--spinner-animation-duration, 1s) linear infinite;
+  border-radius: 50%;
+  border: var(--spinner-border-width, 2px) solid currentColor;
+  border-top-color: var(--spinner-track-color, transparent);
+  opacity: 0.85;
+  animation: spinnerRotate var(--spinner-animation-duration, 0.7s) linear infinite;
 }
 
-@keyframes spin {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
+@keyframes spinnerRotate {
+  to {
     transform: rotate(360deg);
   }
 }
+
+/* Size variants. Each sets `--spinner-size`, so a consumer that sets the variable directly
+   still wins — the variants are a shorthand for it, not a replacement. */
+.small {
+  --spinner-size: --spacing(4);
+}
+.medium {
+  --spinner-size: --spacing(6);
+}
+.large {
+  --spinner-size: --spacing(8);
+  --spinner-border-width: 3px;
+}
+.xlarge {
+  --spinner-size: --spacing(12);
+  --spinner-border-width: 3px;
+}
+
+.small,
+.medium,
+.large,
+.xlarge {
+  width: var(--spinner-size);
+  height: var(--spinner-size);
+}
+
+/* Reduced motion: freeze the ring, keep it visible. Removing it entirely would remove the
+   only signal that something is loading. */
+.reducedMotion {
+  animation: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ring {
+    animation: none;
+  }
+}

package/lib/cjs/components/TruncatedText.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+interface TruncatedTextProps {
+    /** The full text content */
+    text: string;
+    /** Maximum number of characters to show before truncating (default: 80) */
+    maxLength?: number;
+}
+/**
+ * TruncatedText - Displays truncated text with hover/tap to show full content
+ *
+ * For long text fields, shows first N characters with ellipsis.
+ * On desktop: hover displays full text in a popover with copy button.
+ * On mobile: tap opens a dialog with full text and copy button.
+ */
+declare function TruncatedText({ text, maxLength }: TruncatedTextProps): React.JSX.Element;
+export { TruncatedText };

package/lib/cjs/components/TruncatedText.js

@@ -0,0 +1,130 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TruncatedText = TruncatedText;
+const Dialog_js_1 = require("./Dialog.js");
+const HoverCard_js_1 = require("./HoverCard.js");
+const IconButton_js_1 = require("./IconButton.js");
+const react_1 = __importStar(require("react"));
+const TruncatedText_module_css_1 = __importDefault(require("./TruncatedText.module.css"));
+/**
+ * Two inline glyphs rather than a dependency on an icon set.
+ *
+ * This component needs exactly two, and a library whose contract is "a behaviour source plus
+ * a stylesheet" should not make every consumer install an icon package to draw a tick. They
+ * inherit `currentColor`, so they follow the button they sit in.
+ */
+const CheckGlyph = () => (react_1.default.createElement("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true" },
+    react_1.default.createElement("polyline", { points: "20 6 9 17 4 12" })));
+const CopyGlyph = () => (react_1.default.createElement("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true" },
+    react_1.default.createElement("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }),
+    react_1.default.createElement("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })));
+/**
+ * TruncatedText - Displays truncated text with hover/tap to show full content
+ *
+ * For long text fields, shows first N characters with ellipsis.
+ * On desktop: hover displays full text in a popover with copy button.
+ * On mobile: tap opens a dialog with full text and copy button.
+ */
+function TruncatedText({ text, maxLength = 80 }) {
+    const [copied, setCopied] = (0, react_1.useState)(false);
+    const [isMobile, setIsMobile] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        // Check for touch device or small screen
+        const checkMobile = () => {
+            const hasTouchScreen = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
+            const isSmallScreen = window.matchMedia('(max-width: 768px)').matches;
+            setIsMobile(hasTouchScreen || isSmallScreen);
+        };
+        checkMobile();
+        window.addEventListener('resize', checkMobile);
+        return () => window.removeEventListener('resize', checkMobile);
+    }, []);
+    // If text is short enough, just render it directly
+    if (!text || text.length <= maxLength) {
+        return react_1.default.createElement("span", null, text || '-');
+    }
+    const truncatedText = text.slice(0, maxLength) + '...';
+    const handleCopy = (e) => __awaiter(this, void 0, void 0, function* () {
+        e.stopPropagation();
+        try {
+            yield navigator.clipboard.writeText(text);
+            setCopied(true);
+            setTimeout(() => setCopied(false), 2000);
+        }
+        catch (err) {
+            console.error('Failed to copy text:', err);
+        }
+    });
+    // Mobile: Use Dialog triggered by tap
+    if (isMobile) {
+        return (react_1.default.createElement(Dialog_js_1.Dialog.Root, null,
+            react_1.default.createElement(Dialog_js_1.Dialog.Trigger, { asChild: true },
+                react_1.default.createElement("span", { className: TruncatedText_module_css_1.default.truncatedText }, truncatedText)),
+            react_1.default.createElement(Dialog_js_1.Dialog.Content, { className: TruncatedText_module_css_1.default.dialogContent },
+                react_1.default.createElement(Dialog_js_1.Dialog.Header, null,
+                    react_1.default.createElement(Dialog_js_1.Dialog.Title, null, "Full Text")),
+                react_1.default.createElement("div", { className: TruncatedText_module_css_1.default.dialogBody },
+                    react_1.default.createElement("div", { className: TruncatedText_module_css_1.default.scrollArea },
+                        react_1.default.createElement("p", { className: TruncatedText_module_css_1.default.fullText }, text))),
+                react_1.default.createElement("div", { className: TruncatedText_module_css_1.default.dialogFooter },
+                    react_1.default.createElement(IconButton_js_1.IconButton, { size: "small", variant: "ghost", className: TruncatedText_module_css_1.default.copyButton, onClick: handleCopy, "aria-label": copied ? 'Copied!' : 'Copy to clipboard' }, copied ? (react_1.default.createElement(CheckGlyph, null)) : (react_1.default.createElement(CopyGlyph, null)))))));
+    }
+    // Desktop: Use HoverCard triggered by hover
+    return (react_1.default.createElement(HoverCard_js_1.HoverCard.Root, { openDelay: 300, closeDelay: 200 },
+        react_1.default.createElement(HoverCard_js_1.HoverCard.Trigger, { asChild: true },
+            react_1.default.createElement("span", { className: TruncatedText_module_css_1.default.truncatedText }, truncatedText)),
+        react_1.default.createElement(HoverCard_js_1.HoverCard.Portal, null,
+            react_1.default.createElement(HoverCard_js_1.HoverCard.Content, { side: "top", align: "start", sideOffset: 8, className: TruncatedText_module_css_1.default.hoverContent },
+                react_1.default.createElement("div", { className: TruncatedText_module_css_1.default.contentWrapper },
+                    react_1.default.createElement("div", { className: TruncatedText_module_css_1.default.scrollArea },
+                        react_1.default.createElement("p", { className: TruncatedText_module_css_1.default.fullText }, text)),
+                    react_1.default.createElement("div", { className: TruncatedText_module_css_1.default.copyButtonWrapper },
+                        react_1.default.createElement(IconButton_js_1.IconButton, { size: "small", variant: "ghost", className: TruncatedText_module_css_1.default.copyButton, onClick: handleCopy, "aria-label": copied ? 'Copied!' : 'Copy to clipboard' }, copied ? (react_1.default.createElement(CheckGlyph, null)) : (react_1.default.createElement(CopyGlyph, null))))),
+                react_1.default.createElement(HoverCard_js_1.HoverCard.Arrow, { className: TruncatedText_module_css_1.default.arrow })))));
+}
+//# sourceMappingURL=TruncatedText.js.map

package/lib/cjs/components/TruncatedText.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TruncatedText.js","sourceRoot":"","sources":["../../../src/components/TruncatedText.tsx"],"names":[],"mappings":"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"}

package/lib/cjs/components/TruncatedText.module.css

@@ -0,0 +1,162 @@
+@import './helpers/mixins.css';
+@import '@_linked/css/package.css';
+
+/* ============================================================================
+   TruncatedText.module.css
+
+   Truncated text component with hover popover for full content.
+   Uses semantic tokens from theme.css.
+   ============================================================================ */
+
+/* === Truncated Text Trigger === */
+.truncatedText {
+  cursor: help;
+  border-bottom: 1px dotted var(--truncated-text-gray-400, var(--color-gray-400));
+}
+
+/* === Hover Card Content === */
+.hoverContent {
+  background-color: var(--surface-bg);
+  border: 1px solid var(--surface-border);
+  border-radius: var(--radius-field);
+  box-shadow: var(--surface-shadow);
+  padding: var(--space-sm);
+  max-width: 400px;
+  min-width: 200px;
+  z-index: 1000;
+}
+
+/* === Content Wrapper === */
+.contentWrapper {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-xs);
+}
+
+/* === Scroll Area === */
+.scrollArea {
+  max-height: 150px;
+  overflow-y: auto;
+}
+
+/* === Full Text === */
+.fullText {
+  font-size: var(--typography-small-size);
+  color: var(--text-primary);
+  line-height: 1.5;
+  margin: 0;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+/* === Copy Button Wrapper === */
+.copyButtonWrapper {
+  display: flex;
+  justify-content: flex-end;
+  border-top: 1px solid var(--surface-border);
+  padding-top: var(--space-xs);
+  margin-top: var(--space-xs);
+}
+
+/* === Copy Button === */
+.copyButton {
+  color: var(--truncated-text-tertiary-500, var(--color-tertiary-500)) !important;
+  padding: var(--space-xs) !important;
+}
+
+.copyButton:hover {
+  color: var(--truncated-text-tertiary-600, var(--color-tertiary-600)) !important;
+  background-color: color-mix(
+    in srgb,
+    var(--truncated-text-tertiary-500, var(--color-tertiary-500)) 12%,
+    transparent
+  ) !important;
+}
+
+/* === Arrow === */
+.arrow {
+  fill: var(--surface-bg);
+}
+
+/* ============================================================================
+   Mobile Dialog Styles
+   ============================================================================ */
+
+.dialogContent {
+  max-width: 90vw;
+  width: 400px;
+  background-color: var(--surface-bg);
+  border: 1px solid var(--surface-border);
+}
+
+.dialogBody {
+  padding: var(--space-sm) 0;
+  color: var(--text-primary);
+}
+
+.dialogFooter {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  padding-top: var(--space-xs);
+  border-top: 1px solid var(--surface-border);
+}
+
+/* ============================================================================
+   Dark Mode
+   ============================================================================ */
+
+[data-theme='dark'] .truncatedText {
+  border-bottom-color: var(--truncated-text-gray-500, var(--color-gray-500));
+}
+
+[data-theme='dark'] .hoverContent {
+  background-color: var(--surface-bg);
+  border-color: var(--surface-border);
+}
+
+/* .fullText uses --text-primary which auto-adjusts for dark mode */
+
+[data-theme='dark'] .copyButtonWrapper {
+  border-top-color: var(--surface-border);
+}
+
+[data-theme='dark'] .copyButton {
+  color: var(--truncated-text-tertiary-400, var(--color-tertiary-400)) !important;
+}
+
+[data-theme='dark'] .copyButton:hover {
+  color: var(--truncated-text-tertiary-300, var(--color-tertiary-300)) !important;
+  background-color: color-mix(
+    in srgb,
+    var(--truncated-text-tertiary-500, var(--color-tertiary-500)) 15%,
+    transparent
+  ) !important;
+}
+
+[data-theme='dark'] .arrow {
+  fill: var(--surface-bg);
+}
+
+[data-theme='dark'] .dialogContent {
+  background-color: var(--surface-bg);
+  border-color: var(--surface-border);
+}
+
+/* .dialogBody uses --text-primary which auto-adjusts for dark mode */
+
+[data-theme='dark'] .dialogFooter {
+  border-top-color: var(--surface-border);
+}
+
+/* Dialog close button in dark mode */
+[data-theme='dark'] .dialogContent button[aria-label="Close"],
+[data-theme='dark'] .dialogContent [class*="Close"] {
+  color: var(--truncated-text-gray-400, var(--color-gray-400));
+}
+
+[data-theme='dark'] .dialogContent button[aria-label="Close"]:hover,
+[data-theme='dark'] .dialogContent [class*="Close"]:hover {
+  color: var(--truncated-text-gray-200, var(--color-gray-200));
+  background-color: var(--truncated-text-gray-700, var(--color-gray-700));
+}