@_linked/primitives 1.0.9 → 1.2.0

package/lib/esm/components/ImageThumb.module.css

@@ -0,0 +1,134 @@
+@import './helpers/mixins.css';
+@import '@_linked/css/package.css';
+
+/* ============================================================================
+   ImageThumb.module.css
+
+   Thumbnail image with enlarged hover preview.
+   Uses semantic tokens from theme.css.
+   ============================================================================ */
+
+.root {
+  position: relative;
+  display: inline-flex;
+  flex-shrink: 0;
+}
+
+/* === Thumbnail === */
+.thumb {
+  object-fit: cover;
+  border-radius: var(--radius-field);
+  border: 1px solid var(--surface-border);
+  cursor: pointer;
+  transition: box-shadow var(--transition-fast), transform var(--transition-fast);
+  background-color: var(--section-bg);
+}
+
+.thumb:hover {
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  transform: scale(1.05);
+}
+
+/* === Hover Preview Overlay === */
+.previewOverlay {
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+}
+
+.previewBackdrop {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.4);
+  opacity: 0;
+  transition: opacity 0.2s ease;
+  pointer-events: auto;
+}
+
+.previewBackdrop.visible {
+  opacity: 1;
+}
+
+.previewImage {
+  position: relative;
+  max-width: 80vw;
+  max-height: 80vh;
+  object-fit: contain;
+  border-radius: var(--radius-box);
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
+  z-index: 1;
+  opacity: 0;
+  transform: scale(0.92);
+  transition: opacity 0.2s ease, transform 0.2s ease;
+  pointer-events: auto;
+}
+
+.previewImage.visible {
+  opacity: 1;
+  transform: scale(1);
+}
+
+/* === Hover tooltip preview (positioned near thumbnail) === */
+.hoverPreview {
+  position: fixed;
+  z-index: 10000;
+  pointer-events: none;
+  opacity: 0;
+  transform: scale(0.95);
+  transition: opacity 0.15s ease, transform 0.15s ease;
+  border-radius: var(--radius-box);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
+  overflow: hidden;
+  background-color: var(--section-bg);
+}
+
+.hoverPreview.visible {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.hoverPreviewImage {
+  display: block;
+  object-fit: cover;
+  border-radius: var(--radius-box);
+}
+
+/* === Dark mode adjustments === */
+[data-theme='dark'] .thumb {
+  border-color: var(--surface-border);
+}
+
+[data-theme='dark'] .previewBackdrop {
+  background: rgba(0, 0, 0, 0.6);
+}
+
+[data-theme='dark'] .hoverPreview {
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
+}
+
+/* === Inline variant (used inside chips/badges) === */
+.inlineThumb {
+  width: 20px;
+  height: 20px;
+  object-fit: cover;
+  border-radius: var(--radius-selector, 3px);
+  border: 1px solid var(--surface-border);
+  vertical-align: middle;
+  flex-shrink: 0;
+}
+
+/* === Reduced motion === */
+@media (prefers-reduced-motion: reduce) {
+  .thumb:hover {
+    transform: none;
+  }
+  .hoverPreview,
+  .previewImage,
+  .previewBackdrop {
+    transition: none;
+  }
+}

package/lib/esm/components/MultiSelect.d.ts

@@ -14,7 +14,7 @@ declare const Input: React.ForwardRefExoticComponent<Omit<Omit<Pick<Pick<React.D
     ref?: React.Ref<HTMLInputElement>;
 } & {
     asChild?: boolean;
-}, "asChild" | "key" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "type" | "value" | "onChange"> & {
+}, "asChild" | "key" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "type" | "onChange" | "value"> & {
     value?: string;
     onValueChange?: (search: string) => void;
 } & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
@@ -36,7 +36,7 @@ declare const Item: React.ForwardRefExoticComponent<{
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "disabled" | "value" | "onSelect"> & {
+}, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "onSelect" | "disabled" | "value"> & {
     disabled?: boolean;
     onSelect?: (value: string) => void;
     value?: string;
@@ -53,7 +53,7 @@ export declare const MultiSelect: {
         ref?: React.Ref<HTMLInputElement>;
     } & {
         asChild?: boolean;
-    }, "asChild" | "key" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "type" | "value" | "onChange"> & {
+    }, "asChild" | "key" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "type" | "onChange" | "value"> & {
         value?: string;
         onValueChange?: (search: string) => void;
     } & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
@@ -75,7 +75,7 @@ export declare const MultiSelect: {
         ref?: React.Ref<HTMLDivElement>;
     } & {
         asChild?: boolean;
-    }, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "disabled" | "value" | "onSelect"> & {
+    }, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "onSelect" | "disabled" | "value"> & {
         disabled?: boolean;
         onSelect?: (value: string) => void;
         value?: string;

package/lib/esm/components/SkeletonLoader.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+interface SkeletonLoaderProps {
+    width?: string | number;
+    height?: string | number;
+    borderRadius?: string | number;
+    className?: string;
+    lines?: number;
+    animated?: boolean;
+}
+export declare function SkeletonLoader({ width, height, borderRadius, className, lines, animated, }: SkeletonLoaderProps): React.JSX.Element;
+export declare function TableRowSkeleton({ columns }: {
+    columns?: number;
+}): React.JSX.Element;
+export default SkeletonLoader;

package/lib/esm/components/SkeletonLoader.js

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import style from './SkeletonLoader.module.css';
+export function SkeletonLoader({ width = '100%', height = 18, borderRadius = 4, className = '', lines = 1, animated = true, }) {
+    if (lines === 1) {
+        return (React.createElement("div", { className: `${style.skeleton} ${animated ? style.animated : ''} ${className}`, style: {
+                width,
+                height,
+                borderRadius,
+            } }));
+    }
+    return (React.createElement("div", { className: className }, Array.from({ length: lines }, (_, index) => (React.createElement("div", { key: index, className: `${style.skeleton} ${animated ? style.animated : ''} ${index < lines - 1 ? style.marginBottom : ''}`, style: {
+            width: index === lines - 1 ? '60%' : '100%',
+            height,
+            borderRadius,
+        } })))));
+}
+// Table row skeleton component
+export function TableRowSkeleton({ columns = 5 }) {
+    return (React.createElement("tr", { className: style.tableRow },
+        React.createElement("td", { className: style.tableCell, style: { width: '48px' } },
+            React.createElement(SkeletonLoader, { width: 18, height: 18, borderRadius: 6 })),
+        Array.from({ length: columns }, (_, index) => (React.createElement("td", { key: index, className: style.tableCell },
+            React.createElement(SkeletonLoader, { width: "18vw", height: 18 })))),
+        React.createElement("td", { className: style.tableCell },
+            React.createElement("div", { className: style.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 })))));
+}
+export default SkeletonLoader;
+//# sourceMappingURL=SkeletonLoader.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SkeletonLoader.js","sourceRoot":"","sources":["../../../src/components/SkeletonLoader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,MAAM,6BAA6B,CAAC;AAWhD,MAAM,UAAU,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,KAAK,CAAC,QAAQ,IAAI,QAAQ,CAAC,CAAC,CAAC,KAAK,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,KAAK,CAAC,QAAQ,IAAI,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,IAAI,KAAK,GAAG,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,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,MAAM,UAAU,gBAAgB,CAAC,EAAE,OAAO,GAAG,CAAC,EAAwB;IACpE,OAAO,CACL,4BAAI,SAAS,EAAE,KAAK,CAAC,QAAQ;QAC3B,4BAAI,SAAS,EAAE,KAAK,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,KAAK,CAAC,SAAS;YACxC,oBAAC,cAAc,IAAC,KAAK,EAAC,MAAM,EAAC,MAAM,EAAE,EAAE,GAAI,CACxC,CACN,CAAC;QACF,4BAAI,SAAS,EAAE,KAAK,CAAC,SAAS;YAC5B,6BAAK,SAAS,EAAE,KAAK,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,eAAe,cAAc,CAAC"}

package/lib/esm/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/esm/components/Slider.js

@@ -14,10 +14,14 @@ function extend(Component, baseClassName) {
 const Track = extend(SliderPrimitive.Track, style.Track);
 const Range = extend(SliderPrimitive.Range, style.Range);
 const Thumb = extend(SliderPrimitive.Thumb, style.Thumb);
-const Root = React.forwardRef(({ className, ...props }, ref) => (React.createElement(SliderPrimitive.Root, { ref: ref, className: cl(style.Root, className), ...props },
+const Root = React.forwardRef(({ className, 'aria-label': ariaLabel, 'aria-disabled': ariaDisabled, ...props }, ref) => (
+// Self-contained single-thumb slider. Forward the accessible name / disabled
+// state to the actual `role="slider"` element (the Thumb) rather than the Root,
+// so `getByRole('slider', { name })` and assistive tech can address the control.
+React.createElement(SliderPrimitive.Root, { ref: ref, className: cl(style.Root, className), ...props },
     React.createElement(Track, null,
         React.createElement(Range, null)),
-    React.createElement(Thumb, null))));
+    React.createElement(Thumb, { "aria-label": ariaLabel, "aria-disabled": ariaDisabled }))));
 Root.displayName = SliderPrimitive.Root.displayName;
 export const Slider = {
     Root,

package/lib/esm/components/Slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.js","sourceRoot":"","sources":["../../../src/components/Slider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,MAAM,qBAAqB,CAAC;AACxC,OAAO,EAAE,EAAE,EAAE,MAAM,iCAAiC,CAAC;AAErD,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAE1D,SAAS,MAAM,CACb,SAAY,EACZ,aAAqB;IAErB,IAAI,QAAQ,GAAG,KAAK,CAAC,UAAU,CAG7B,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CACjC,KAAK,CAAC,aAAa,CAAC,SAAS,EAAE;QAC7B,GAAG;QACH,SAAS,EAAE,EAAE,CAAC,aAAa,EAAE,SAAS,CAAC;QACvC,GAAG,KAAK;KACT,CAAC,CACH,CAAC;IACF,QAAQ,CAAC,WAAW,GAAG,SAAS,CAAC,WAAW,CAAC;IAC7C,OAAO,QAAQ,CAAC;AAClB,CAAC;AAED,MAAM,KAAK,GAAG,MAAM,CAAC,eAAe,CAAC,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;AACzD,MAAM,KAAK,GAAG,MAAM,CAAC,eAAe,CAAC,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;AACzD,MAAM,KAAK,GAAG,MAAM,CAAC,eAAe,CAAC,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;AAEzD,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAG3B,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CAClC,oBAAC,eAAe,CAAC,IAAI,IACnB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI,EAAE,SAAS,CAAC,KAChC,KAAK;IAET,oBAAC,KAAK;QACJ,oBAAC,KAAK,OAAG,CACH;IACR,oBAAC,KAAK,OAAG,CACY,CACxB,CAAC,CAAC;AACH,IAAI,CAAC,WAAW,GAAG,eAAe,CAAC,IAAI,CAAC,WAAW,CAAC;AAEpD,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,IAAI;IACJ,KAAK;IACL,KAAK;IACL,KAAK;CACN,CAAC;AAEF,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC"}
+{"version":3,"file":"Slider.js","sourceRoot":"","sources":["../../../src/components/Slider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,MAAM,qBAAqB,CAAC;AACxC,OAAO,EAAE,EAAE,EAAE,MAAM,iCAAiC,CAAC;AAErD,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAE1D,SAAS,MAAM,CACb,SAAY,EACZ,aAAqB;IAErB,IAAI,QAAQ,GAAG,KAAK,CAAC,UAAU,CAG7B,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CACjC,KAAK,CAAC,aAAa,CAAC,SAAS,EAAE;QAC7B,GAAG;QACH,SAAS,EAAE,EAAE,CAAC,aAAa,EAAE,SAAS,CAAC;QACvC,GAAG,KAAK;KACT,CAAC,CACH,CAAC;IACF,QAAQ,CAAC,WAAW,GAAG,SAAS,CAAC,WAAW,CAAC;IAC7C,OAAO,QAAQ,CAAC;AAClB,CAAC;AAED,MAAM,KAAK,GAAG,MAAM,CAAC,eAAe,CAAC,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;AACzD,MAAM,KAAK,GAAG,MAAM,CAAC,eAAe,CAAC,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;AACzD,MAAM,KAAK,GAAG,MAAM,CAAC,eAAe,CAAC,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;AAEzD,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAG3B,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,SAAS,EAAE,eAAe,EAAE,YAAY,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC;AAC1F,6EAA6E;AAC7E,gFAAgF;AAChF,iFAAiF;AACjF,oBAAC,eAAe,CAAC,IAAI,IACnB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI,EAAE,SAAS,CAAC,KAChC,KAAK;IAET,oBAAC,KAAK;QACJ,oBAAC,KAAK,OAAG,CACH;IACR,oBAAC,KAAK,kBAAa,SAAS,mBAAiB,YAAY,GAAI,CACxC,CACxB,CAAC,CAAC;AACH,IAAI,CAAC,WAAW,GAAG,eAAe,CAAC,IAAI,CAAC,WAAW,CAAC;AAEpD,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,IAAI;IACJ,KAAK;IACL,KAAK;IACL,KAAK;CACN,CAAC;AAEF,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC"}

package/lib/esm/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/esm/components/Spinner.js

@@ -1,6 +1,25 @@
-import React from 'react';
+import * as React from 'react';
 import style from './Spinner.module.css';
-export function Spinner({ active = true }) {
-    return (React.createElement("div", { className: [style.spinner, active && style.active].join(' '), role: "progressbar", "aria-busy": active ? 'true' : 'false' }));
+import { cl } from '@_linked/react/utils/ClassNames';
+import { useReducedMotion } from '../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.
+ */
+export function Spinner({ active = true, size = 'small', className, label = 'Loading', }) {
+    const reducedMotion = useReducedMotion();
+    if (!active)
+        return null;
+    return (React.createElement("div", { className: cl(style.spinner, style[size], className), role: "progressbar", "aria-busy": "true", "aria-label": label },
+        React.createElement("span", { className: cl(style.ring, reducedMotion && style.reducedMotion), "aria-hidden": "true" })));
 }
 //# sourceMappingURL=Spinner.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Spinner.js","sourceRoot":"","sources":["../../../src/components/Spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,MAAM,sBAAsB,CAAC;AAEzC,MAAM,UAAU,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,EAAE;IACvC,OAAO,CACL,6BACE,SAAS,EAAE,CAAC,KAAK,CAAC,OAAO,EAAE,MAAM,IAAI,KAAK,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":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,MAAM,sBAAsB,CAAC;AACzC,OAAO,EAAC,EAAE,EAAC,MAAM,iCAAiC,CAAC;AACnD,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAW9D;;;;;;;;;;;;GAYG;AACH,MAAM,UAAU,OAAO,CAAC,EACtB,MAAM,GAAG,IAAI,EACb,IAAI,GAAG,OAAO,EACd,SAAS,EACT,KAAK,GAAG,SAAS,GACJ;IACb,MAAM,aAAa,GAAG,gBAAgB,EAAE,CAAC;IAEzC,IAAI,CAAC,MAAM;QAAE,OAAO,IAAI,CAAC;IAEzB,OAAO,CACL,6BACE,SAAS,EAAE,EAAE,CAAC,KAAK,CAAC,OAAO,EAAE,KAAK,CAAC,IAAI,CAAC,EAAE,SAAS,CAAC,EACpD,IAAI,EAAC,aAAa,eACR,MAAM,gBACJ,KAAK;QAEjB,8BACE,SAAS,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI,EAAE,aAAa,IAAI,KAAK,CAAC,aAAa,CAAC,iBACnD,MAAM,GAClB,CACE,CACP,CAAC;AACJ,CAAC"}

package/lib/esm/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/esm/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/esm/components/TruncatedText.js

@@ -0,0 +1,83 @@
+import { Dialog } from './Dialog.js';
+import { HoverCard } from './HoverCard.js';
+import { IconButton } from './IconButton.js';
+import React, { useState, useEffect } from 'react';
+import style from './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.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.createElement("polyline", { points: "20 6 9 17 4 12" })));
+const CopyGlyph = () => (React.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.createElement("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }),
+    React.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] = useState(false);
+    const [isMobile, setIsMobile] = useState(false);
+    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.createElement("span", null, text || '-');
+    }
+    const truncatedText = text.slice(0, maxLength) + '...';
+    const handleCopy = async (e) => {
+        e.stopPropagation();
+        try {
+            await 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.createElement(Dialog.Root, null,
+            React.createElement(Dialog.Trigger, { asChild: true },
+                React.createElement("span", { className: style.truncatedText }, truncatedText)),
+            React.createElement(Dialog.Content, { className: style.dialogContent },
+                React.createElement(Dialog.Header, null,
+                    React.createElement(Dialog.Title, null, "Full Text")),
+                React.createElement("div", { className: style.dialogBody },
+                    React.createElement("div", { className: style.scrollArea },
+                        React.createElement("p", { className: style.fullText }, text))),
+                React.createElement("div", { className: style.dialogFooter },
+                    React.createElement(IconButton, { size: "small", variant: "ghost", className: style.copyButton, onClick: handleCopy, "aria-label": copied ? 'Copied!' : 'Copy to clipboard' }, copied ? (React.createElement(CheckGlyph, null)) : (React.createElement(CopyGlyph, null)))))));
+    }
+    // Desktop: Use HoverCard triggered by hover
+    return (React.createElement(HoverCard.Root, { openDelay: 300, closeDelay: 200 },
+        React.createElement(HoverCard.Trigger, { asChild: true },
+            React.createElement("span", { className: style.truncatedText }, truncatedText)),
+        React.createElement(HoverCard.Portal, null,
+            React.createElement(HoverCard.Content, { side: "top", align: "start", sideOffset: 8, className: style.hoverContent },
+                React.createElement("div", { className: style.contentWrapper },
+                    React.createElement("div", { className: style.scrollArea },
+                        React.createElement("p", { className: style.fullText }, text)),
+                    React.createElement("div", { className: style.copyButtonWrapper },
+                        React.createElement(IconButton, { size: "small", variant: "ghost", className: style.copyButton, onClick: handleCopy, "aria-label": copied ? 'Copied!' : 'Copy to clipboard' }, copied ? (React.createElement(CheckGlyph, null)) : (React.createElement(CopyGlyph, null))))),
+                React.createElement(HoverCard.Arrow, { className: style.arrow })))));
+}
+export { TruncatedText };
+//# sourceMappingURL=TruncatedText.js.map

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

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