@_linked/primitives 1.0.9 → 1.2.0

package/lib/cjs/components/ImageThumb.js

@@ -0,0 +1,90 @@
+"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.InlineImageThumb = void 0;
+const react_1 = __importStar(require("react"));
+const ClassNames_1 = require("@_linked/react/utils/ClassNames");
+const ImageThumb_module_css_1 = __importDefault(require("./ImageThumb.module.css"));
+const ImageThumb = ({ src, size = 36, hoverSize = 280, alt = '', className = '', clickToEnlarge = true, }) => {
+    const [hover, setHover] = (0, react_1.useState)(false);
+    const [lightbox, setLightbox] = (0, react_1.useState)(false);
+    const [hoverPos, setHoverPos] = (0, react_1.useState)({
+        top: 0,
+        left: 0,
+    });
+    const thumbRef = (0, react_1.useRef)(null);
+    const handleMouseEnter = (0, react_1.useCallback)(() => {
+        if (thumbRef.current) {
+            const rect = thumbRef.current.getBoundingClientRect();
+            // Position the hover preview to the right of the thumbnail,
+            // but clamp so it doesn't overflow the viewport
+            const left = Math.min(rect.right + 8, window.innerWidth - hoverSize - 16);
+            const top = Math.max(8, Math.min(rect.top - hoverSize / 2 + size / 2, window.innerHeight - hoverSize - 16));
+            setHoverPos({ top, left });
+        }
+        setHover(true);
+    }, [hoverSize, size]);
+    const handleClick = (0, react_1.useCallback)((e) => {
+        if (clickToEnlarge) {
+            e.stopPropagation();
+            setHover(false);
+            setLightbox(true);
+        }
+    }, [clickToEnlarge]);
+    const closeLightbox = (0, react_1.useCallback)(() => {
+        setLightbox(false);
+    }, []);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("span", { className: (0, ClassNames_1.cl)(ImageThumb_module_css_1.default.root, className), onMouseEnter: handleMouseEnter, onMouseLeave: () => setHover(false) },
+            react_1.default.createElement("img", { ref: thumbRef, src: src, alt: alt, className: ImageThumb_module_css_1.default.thumb, style: { width: size, height: size }, onClick: handleClick, loading: "lazy" }),
+            hover && !lightbox && (react_1.default.createElement("div", { className: (0, ClassNames_1.cl)(ImageThumb_module_css_1.default.hoverPreview, hover && ImageThumb_module_css_1.default.visible), style: {
+                    top: hoverPos.top,
+                    left: hoverPos.left,
+                    width: hoverSize,
+                    height: hoverSize,
+                } },
+                react_1.default.createElement("img", { src: src, alt: alt, className: ImageThumb_module_css_1.default.hoverPreviewImage, style: { width: hoverSize, height: hoverSize } })))),
+        lightbox && (react_1.default.createElement("div", { className: ImageThumb_module_css_1.default.previewOverlay, onClick: closeLightbox },
+            react_1.default.createElement("div", { className: (0, ClassNames_1.cl)(ImageThumb_module_css_1.default.previewBackdrop, ImageThumb_module_css_1.default.visible) }),
+            react_1.default.createElement("img", { src: src, alt: alt, className: (0, ClassNames_1.cl)(ImageThumb_module_css_1.default.previewImage, ImageThumb_module_css_1.default.visible) })))));
+};
+/** Small inline thumbnail for use inside chips, badges, and dropdown options */
+const InlineImageThumb = ({ src, alt = '', }) => (react_1.default.createElement("img", { src: src, alt: alt, className: ImageThumb_module_css_1.default.inlineThumb, loading: "lazy" }));
+exports.InlineImageThumb = InlineImageThumb;
+exports.default = ImageThumb;
+//# sourceMappingURL=ImageThumb.js.map

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

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

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

@@ -67,11 +67,15 @@ exports.Range = Range;
 const Thumb = extend(SliderPrimitive.Thumb, Slider_module_css_1.default.Thumb);
 exports.Thumb = Thumb;
 const Root = React.forwardRef((_a, ref) => {
-    var { className } = _a, props = __rest(_a, ["className"]);
-    return (React.createElement(SliderPrimitive.Root, Object.assign({ ref: ref, className: (0, ClassNames_1.cl)(Slider_module_css_1.default.Root, className) }, props),
+    var { className, 'aria-label': ariaLabel, 'aria-disabled': ariaDisabled } = _a, props = __rest(_a, ["className", 'aria-label', 'aria-disabled']);
+    return (
+    // 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, Object.assign({ ref: ref, className: (0, ClassNames_1.cl)(Slider_module_css_1.default.Root, className) }, props),
         React.createElement(Track, null,
             React.createElement(Range, null)),
-        React.createElement(Thumb, null)));
+        React.createElement(Thumb, { "aria-label": ariaLabel, "aria-disabled": ariaDisabled })));
 });
 exports.Root = Root;
 Root.displayName = SliderPrimitive.Root.displayName;

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

@@ -1 +1 @@
-{"version":3,"file":"Slider.js","sourceRoot":"","sources":["../../../src/components/Slider.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA+B;AAE/B,4EAAwC;AACxC,gEAAqD;AAErD,wEAA0D;AAE1D,SAAS,MAAM,CACb,SAAY,EACZ,aAAqB;IAErB,IAAI,QAAQ,GAAG,KAAK,CAAC,UAAU,CAG7B,CAAC,EAAuB,EAAE,GAAG,EAAE,EAAE;YAAhC,EAAE,SAAS,OAAY,EAAP,KAAK,cAArB,aAAuB,CAAF;QACtB,OAAA,KAAK,CAAC,aAAa,CAAC,SAAS,kBAC3B,GAAG,EACH,SAAS,EAAE,IAAA,eAAE,EAAC,aAAa,EAAE,SAAS,CAAC,IACpC,KAAK,EACR,CAAA;KAAA,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,2BAAK,CAAC,KAAK,CAAC,CAAC;AA4B1C,sBAAK;AA3BpB,MAAM,KAAK,GAAG,MAAM,CAAC,eAAe,CAAC,KAAK,EAAE,2BAAK,CAAC,KAAK,CAAC,CAAC;AA2BnC,sBAAK;AA1B3B,MAAM,KAAK,GAAG,MAAM,CAAC,eAAe,CAAC,KAAK,EAAE,2BAAK,CAAC,KAAK,CAAC,CAAC;AA0B5B,sBAAK;AAxBlC,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAG3B,CAAC,EAAuB,EAAE,GAAG,EAAE,EAAE;QAAhC,EAAE,SAAS,OAAY,EAAP,KAAK,cAArB,aAAuB,CAAF;IAAY,OAAA,CAClC,oBAAC,eAAe,CAAC,IAAI,kBACnB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,eAAE,EAAC,2BAAK,CAAC,IAAI,EAAE,SAAS,CAAC,IAChC,KAAK;QAET,oBAAC,KAAK;YACJ,oBAAC,KAAK,OAAG,CACH;QACR,oBAAC,KAAK,OAAG,CACY,CACxB,CAAA;CAAA,CAAC,CAAC;AAUM,oBAAI;AATb,IAAI,CAAC,WAAW,GAAG,eAAe,CAAC,IAAI,CAAC,WAAW,CAAC;AAEvC,QAAA,MAAM,GAAG;IACpB,IAAI;IACJ,KAAK;IACL,KAAK;IACL,KAAK;CACN,CAAC"}
+{"version":3,"file":"Slider.js","sourceRoot":"","sources":["../../../src/components/Slider.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA+B;AAE/B,4EAAwC;AACxC,gEAAqD;AAErD,wEAA0D;AAE1D,SAAS,MAAM,CACb,SAAY,EACZ,aAAqB;IAErB,IAAI,QAAQ,GAAG,KAAK,CAAC,UAAU,CAG7B,CAAC,EAAuB,EAAE,GAAG,EAAE,EAAE;YAAhC,EAAE,SAAS,OAAY,EAAP,KAAK,cAArB,aAAuB,CAAF;QACtB,OAAA,KAAK,CAAC,aAAa,CAAC,SAAS,kBAC3B,GAAG,EACH,SAAS,EAAE,IAAA,eAAE,EAAC,aAAa,EAAE,SAAS,CAAC,IACpC,KAAK,EACR,CAAA;KAAA,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,2BAAK,CAAC,KAAK,CAAC,CAAC;AA+B1C,sBAAK;AA9BpB,MAAM,KAAK,GAAG,MAAM,CAAC,eAAe,CAAC,KAAK,EAAE,2BAAK,CAAC,KAAK,CAAC,CAAC;AA8BnC,sBAAK;AA7B3B,MAAM,KAAK,GAAG,MAAM,CAAC,eAAe,CAAC,KAAK,EAAE,2BAAK,CAAC,KAAK,CAAC,CAAC;AA6B5B,sBAAK;AA3BlC,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAG3B,CAAC,EAA+E,EAAE,GAAG,EAAE,EAAE;QAAxF,EAAE,SAAS,EAAE,YAAY,EAAE,SAAS,EAAE,eAAe,EAAE,YAAY,OAAY,EAAP,KAAK,cAA7E,4CAA+E,CAAF;IAAY,OAAA;IAC1F,6EAA6E;IAC7E,gFAAgF;IAChF,iFAAiF;IACjF,oBAAC,eAAe,CAAC,IAAI,kBACnB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,eAAE,EAAC,2BAAK,CAAC,IAAI,EAAE,SAAS,CAAC,IAChC,KAAK;QAET,oBAAC,KAAK;YACJ,oBAAC,KAAK,OAAG,CACH;QACR,oBAAC,KAAK,kBAAa,SAAS,mBAAiB,YAAY,GAAI,CACxC,CACxB,CAAA;CAAA,CAAC,CAAC;AAUM,oBAAI;AATb,IAAI,CAAC,WAAW,GAAG,eAAe,CAAC,IAAI,CAAC,WAAW,CAAC;AAEvC,QAAA,MAAM,GAAG;IACpB,IAAI;IACJ,KAAK;IACL,KAAK;IACL,KAAK;CACN,CAAC"}

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;
+  }
+}