@xenition/ui 0.1.0

package/dist/media/Lightbox.js

@@ -0,0 +1,135 @@
+"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;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Lightbox = Lightbox;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const inject_1 = require("../motion/internal/inject");
+/**
+ * Backdrop color is `color-mix` over the darkest neutral step (token-only, same
+ * in light and dark). The fade is opacity-only and dropped under reduced
+ * motion.
+ */
+const LIGHTBOX_CSS = `
+@keyframes xen-lightbox-in { from { opacity: 0; } to { opacity: 1; } }
+[data-xen-lightbox] {
+  background-color: color-mix(in srgb, var(--xen-neutral-950) 88%, transparent);
+  animation: xen-lightbox-in 180ms ease-out;
+}
+@media (prefers-reduced-motion: reduce) {
+  [data-xen-lightbox] { animation: none; }
+}
+`;
+const FOCUSABLE = 'button:not([disabled]), [href], [tabindex]:not([tabindex="-1"])';
+/**
+ * Fullscreen overlay media viewer. `role="dialog" aria-modal="true"` with a
+ * focus trap (focus enters on open, cycles with Tab, and is restored to the
+ * trigger on close), keyboard control (Esc closes, ←/→ navigate), a
+ * token-styled backdrop, and an opacity-only fade that's disabled under
+ * `prefers-reduced-motion`. SSR-safe (guards `document`) and renders nothing
+ * when `index` is `null` or out of range. Presentational — the parent owns
+ * `index` and the prev/next handlers.
+ */
+function Lightbox({ items, index, onClose, onPrev, onNext, loop = false, label = 'Media viewer', closeLabel = 'Close', prevLabel = 'Previous', nextLabel = 'Next', }) {
+    (0, inject_1.injectStyleOnce)('xen-lightbox-styles', LIGHTBOX_CSS);
+    const open = index !== null && index >= 0 && index < items.length;
+    const dialogRef = React.useRef(null);
+    const restoreRef = React.useRef(null);
+    const hasPrev = open && (loop || index > 0);
+    const hasNext = open && (loop || index < items.length - 1);
+    // Callbacks read the latest handlers without re-subscribing the key listener.
+    const handlers = React.useRef({ onClose, onPrev, onNext, hasPrev, hasNext });
+    handlers.current = { onClose, onPrev, onNext, hasPrev, hasNext };
+    React.useEffect(() => {
+        if (!open || typeof document === 'undefined')
+            return undefined;
+        restoreRef.current = document.activeElement;
+        const dialog = dialogRef.current;
+        // Move focus into the dialog.
+        const focusables = dialog?.querySelectorAll(FOCUSABLE);
+        (focusables && focusables.length ? focusables[0] : dialog)?.focus();
+        const onKeyDown = (e) => {
+            const h = handlers.current;
+            if (e.key === 'Escape') {
+                e.preventDefault();
+                h.onClose();
+            }
+            else if (e.key === 'ArrowLeft') {
+                if (h.hasPrev) {
+                    e.preventDefault();
+                    h.onPrev?.();
+                }
+            }
+            else if (e.key === 'ArrowRight') {
+                if (h.hasNext) {
+                    e.preventDefault();
+                    h.onNext?.();
+                }
+            }
+            else if (e.key === 'Tab') {
+                const nodes = dialog?.querySelectorAll(FOCUSABLE);
+                if (!nodes || nodes.length === 0)
+                    return;
+                const list = Array.from(nodes);
+                const first = list[0];
+                const last = list[list.length - 1];
+                const active = document.activeElement;
+                if (e.shiftKey && active === first) {
+                    e.preventDefault();
+                    last.focus();
+                }
+                else if (!e.shiftKey && active === last) {
+                    e.preventDefault();
+                    first.focus();
+                }
+            }
+        };
+        document.addEventListener('keydown', onKeyDown, true);
+        return () => {
+            document.removeEventListener('keydown', onKeyDown, true);
+            restoreRef.current?.focus?.();
+        };
+        // Re-run when the overlay opens/closes; `index` changes keep the same trap.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [open]);
+    if (!open)
+        return null;
+    const item = items[index];
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: dialogRef, role: "dialog", "aria-modal": "true", "aria-label": label, "data-xen-lightbox": "", onMouseDown: (e) => {
+            if (e.target === e.currentTarget)
+                onClose();
+        }, className: "fixed inset-0 z-[100] flex items-center justify-center p-[var(--xen-space-lg)]", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", "aria-label": closeLabel, onClick: onClose, className: "absolute right-[var(--xen-space-lg)] top-[var(--xen-space-lg)] inline-flex h-10 w-10 items-center justify-center rounded-full bg-surface text-on-surface hover:bg-neutral-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-300", children: (0, jsx_runtime_1.jsx)("svg", { "aria-hidden": "true", width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: (0, jsx_runtime_1.jsx)("path", { d: "M4 4l10 10M14 4L4 14" }) }) }), hasPrev ? ((0, jsx_runtime_1.jsx)("button", { type: "button", "aria-label": prevLabel, onClick: onPrev, className: "absolute left-[var(--xen-space-lg)] top-1/2 inline-flex h-10 w-10 -translate-y-1/2 items-center justify-center rounded-full bg-surface text-on-surface hover:bg-neutral-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-300", children: (0, jsx_runtime_1.jsx)("svg", { "aria-hidden": "true", width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: (0, jsx_runtime_1.jsx)("path", { d: "M11 4L6 9l5 5" }) }) })) : null, (0, jsx_runtime_1.jsxs)("figure", { "data-xen-lightbox-figure": "", className: "flex max-h-full max-w-3xl flex-col items-center gap-[var(--xen-space-sm)]", children: [item.kind === 'video' ? ((0, jsx_runtime_1.jsx)("video", { src: item.url, poster: item.poster, controls: true, autoPlay: true, className: "max-h-[80vh] max-w-full rounded-[var(--xen-radius-md)]" })) : ((0, jsx_runtime_1.jsx)("img", { src: item.url, alt: item.alt ?? item.caption ?? '', className: "max-h-[80vh] max-w-full rounded-[var(--xen-radius-md)] object-contain" })), item.caption ? ((0, jsx_runtime_1.jsx)("figcaption", { className: "text-center text-sm text-neutral-50", children: item.caption })) : null, (0, jsx_runtime_1.jsxs)("div", { "data-xen-lightbox-counter": "", className: "text-xs text-neutral-50", children: [index + 1, " / ", items.length] })] }), hasNext ? ((0, jsx_runtime_1.jsx)("button", { type: "button", "aria-label": nextLabel, onClick: onNext, className: "absolute right-[var(--xen-space-lg)] top-1/2 inline-flex h-10 w-10 -translate-y-1/2 items-center justify-center rounded-full bg-surface text-on-surface hover:bg-neutral-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-300", children: (0, jsx_runtime_1.jsx)("svg", { "aria-hidden": "true", width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: (0, jsx_runtime_1.jsx)("path", { d: "M7 4l5 5-5 5" }) }) })) : null] }));
+}
+//# sourceMappingURL=Lightbox.js.map

package/dist/media/Lightbox.js.map

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

package/dist/media/MediaFigure.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { MediaItem } from './types';
+export interface MediaFigureProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onClick'> {
+    /** The media item to render. */
+    item: MediaItem;
+    /** Native image loading hint (default `lazy`). */
+    loading?: 'lazy' | 'eager';
+    /** Reserve the item's aspect ratio from `width`/`height` (default true). */
+    reserveAspect?: boolean;
+    /** Click handler on the media (e.g. open a lightbox). */
+    onActivate?: () => void;
+}
+/**
+ * A single media item with its caption — an image (or video) inside an
+ * aspect-ratio box (from `width`/`height`, so no layout shift) and a
+ * `<figcaption>`. Token-only. Lazy-loaded by default.
+ */
+export declare const MediaFigure: React.ForwardRefExoticComponent<MediaFigureProps & React.RefAttributes<HTMLElement>>;
+//# sourceMappingURL=MediaFigure.d.ts.map

package/dist/media/MediaFigure.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MediaFigure.d.ts","sourceRoot":"","sources":["../../src/media/MediaFigure.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEpC,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,SAAS,CAAC;IAC1F,gCAAgC;IAChC,IAAI,EAAE,SAAS,CAAC;IAChB,kDAAkD;IAClD,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC3B,4EAA4E;IAC5E,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,yDAAyD;IACzD,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AAED;;;;GAIG;AACH,eAAO,MAAM,WAAW,sFAsDtB,CAAC"}

package/dist/media/MediaFigure.js

@@ -0,0 +1,52 @@
+"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;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MediaFigure = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const cn_1 = require("../primitives/cn");
+const aspect_1 = require("./aspect");
+/**
+ * A single media item with its caption — an image (or video) inside an
+ * aspect-ratio box (from `width`/`height`, so no layout shift) and a
+ * `<figcaption>`. Token-only. Lazy-loaded by default.
+ */
+exports.MediaFigure = React.forwardRef(function MediaFigure({ item, loading = 'lazy', reserveAspect = true, onActivate, className, ...rest }, ref) {
+    const aspect = reserveAspect ? (0, aspect_1.aspectStyle)(item.width, item.height) : undefined;
+    const media = item.kind === 'video' ? ((0, jsx_runtime_1.jsx)("video", { src: item.url, poster: item.poster, controls: true, preload: "metadata", className: "h-full w-full object-cover" })) : ((0, jsx_runtime_1.jsx)("img", { src: item.url, alt: item.alt ?? item.caption ?? '', loading: loading, width: item.width, height: item.height, className: "h-full w-full object-cover" }));
+    const box = ((0, jsx_runtime_1.jsx)("div", { className: "overflow-hidden rounded-[var(--xen-radius-md)] bg-neutral-100", style: aspect, children: onActivate ? ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: onActivate, className: "block h-full w-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-300", "aria-label": item.alt ?? item.caption ?? 'Open media', children: media })) : (media) }));
+    return ((0, jsx_runtime_1.jsxs)("figure", { ref: ref, "data-xen-media-figure": "", className: (0, cn_1.cn)('flex flex-col gap-[var(--xen-space-sm)]', className), ...rest, children: [box, item.caption ? ((0, jsx_runtime_1.jsx)("figcaption", { className: "text-sm leading-relaxed text-muted", children: item.caption })) : null] }));
+});
+//# sourceMappingURL=MediaFigure.js.map

package/dist/media/MediaFigure.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MediaFigure.js","sourceRoot":"","sources":["../../src/media/MediaFigure.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA+B;AAC/B,yCAAsC;AACtC,qCAAuC;AAcvC;;;;GAIG;AACU,QAAA,WAAW,GAAG,KAAK,CAAC,UAAU,CAAgC,SAAS,WAAW,CAC7F,EAAE,IAAI,EAAE,OAAO,GAAG,MAAM,EAAE,aAAa,GAAG,IAAI,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAChF,GAAG;IAEH,MAAM,MAAM,GAAG,aAAa,CAAC,CAAC,CAAC,IAAA,oBAAW,EAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IAEhF,MAAM,KAAK,GACT,IAAI,CAAC,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,CACtB,kCACE,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,QAAQ,QACR,OAAO,EAAC,UAAU,EAClB,SAAS,EAAC,4BAA4B,GACtC,CACH,CAAC,CAAC,CAAC,CACF,gCACE,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,GAAG,EAAE,IAAI,CAAC,GAAG,IAAI,IAAI,CAAC,OAAO,IAAI,EAAE,EACnC,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,SAAS,EAAC,4BAA4B,GACtC,CACH,CAAC;IAEJ,MAAM,GAAG,GAAG,CACV,gCACE,SAAS,EAAC,+DAA+D,EACzE,KAAK,EAAE,MAAM,YAEZ,UAAU,CAAC,CAAC,CAAC,CACZ,mCACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,UAAU,EACnB,SAAS,EAAC,oGAAoG,gBAClG,IAAI,CAAC,GAAG,IAAI,IAAI,CAAC,OAAO,IAAI,YAAY,YAEnD,KAAK,GACC,CACV,CAAC,CAAC,CAAC,CACF,KAAK,CACN,GACG,CACP,CAAC;IAEF,OAAO,CACL,oCAAQ,GAAG,EAAE,GAAG,2BAAwB,EAAE,EAAC,SAAS,EAAE,IAAA,OAAE,EAAC,yCAAyC,EAAE,SAAS,CAAC,KAAM,IAAI,aACrH,GAAG,EACH,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CACd,uCAAY,SAAS,EAAC,oCAAoC,YAAE,IAAI,CAAC,OAAO,GAAc,CACvF,CAAC,CAAC,CAAC,IAAI,IACD,CACV,CAAC;AACJ,CAAC,CAAC,CAAC"}

package/dist/media/aspect.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+/**
+ * Reserve an item's intrinsic aspect ratio (no layout shift). The ratio is
+ * carried on a custom property and consumed by `aspect-ratio: var(...)`, so it
+ * survives environments that don't recognize the shorthand while still being
+ * fully live in the browser.
+ */
+export declare function aspectStyle(width?: number, height?: number): React.CSSProperties | undefined;
+//# sourceMappingURL=aspect.d.ts.map

package/dist/media/aspect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"aspect.d.ts","sourceRoot":"","sources":["../../src/media/aspect.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B;;;;;GAKG;AACH,wBAAgB,WAAW,CACzB,KAAK,CAAC,EAAE,MAAM,EACd,MAAM,CAAC,EAAE,MAAM,GACd,KAAK,CAAC,aAAa,GAAG,SAAS,CAMjC"}

package/dist/media/aspect.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.aspectStyle = aspectStyle;
+/**
+ * Reserve an item's intrinsic aspect ratio (no layout shift). The ratio is
+ * carried on a custom property and consumed by `aspect-ratio: var(...)`, so it
+ * survives environments that don't recognize the shorthand while still being
+ * fully live in the browser.
+ */
+function aspectStyle(width, height) {
+    if (!width || !height)
+        return undefined;
+    return {
+        ['--xen-aspect']: `${width} / ${height}`,
+        aspectRatio: 'var(--xen-aspect)',
+    };
+}
+//# sourceMappingURL=aspect.js.map

package/dist/media/aspect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"aspect.js","sourceRoot":"","sources":["../../src/media/aspect.ts"],"names":[],"mappings":";;AAQA,kCASC;AAfD;;;;;GAKG;AACH,SAAgB,WAAW,CACzB,KAAc,EACd,MAAe;IAEf,IAAI,CAAC,KAAK,IAAI,CAAC,MAAM;QAAE,OAAO,SAAS,CAAC;IACxC,OAAO;QACL,CAAC,cAAwB,CAAC,EAAE,GAAG,KAAK,MAAM,MAAM,EAAE;QAClD,WAAW,EAAE,mBAAmB;KACV,CAAC;AAC3B,CAAC"}

package/dist/media/index.d.ts

@@ -0,0 +1,17 @@
+/**
+ * `@xenition/ui/media` — presentational gallery / lightbox components.
+ *
+ * Props mirror the media module: an album `{title}` and items
+ * `{url,kind,caption,alt,width,height}`. Nothing fetches — the app passes
+ * shaped data — and everything is styled via the `--xen-*` tokens. Images are
+ * lazy-loaded and reserve their aspect ratio from `width`/`height`; the
+ * `Lightbox` is a focus-trapped, keyboard-driven, reduced-motion-safe dialog.
+ */
+export { Gallery } from './Gallery';
+export type { GalleryProps } from './Gallery';
+export { Lightbox } from './Lightbox';
+export type { LightboxProps } from './Lightbox';
+export { MediaFigure } from './MediaFigure';
+export type { MediaFigureProps } from './MediaFigure';
+export type { MediaItem, MediaAlbum, MediaKind } from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/media/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/media/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,YAAY,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACtD,YAAY,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC"}

package/dist/media/index.js

@@ -0,0 +1,19 @@
+"use strict";
+/**
+ * `@xenition/ui/media` — presentational gallery / lightbox components.
+ *
+ * Props mirror the media module: an album `{title}` and items
+ * `{url,kind,caption,alt,width,height}`. Nothing fetches — the app passes
+ * shaped data — and everything is styled via the `--xen-*` tokens. Images are
+ * lazy-loaded and reserve their aspect ratio from `width`/`height`; the
+ * `Lightbox` is a focus-trapped, keyboard-driven, reduced-motion-safe dialog.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MediaFigure = exports.Lightbox = exports.Gallery = void 0;
+var Gallery_1 = require("./Gallery");
+Object.defineProperty(exports, "Gallery", { enumerable: true, get: function () { return Gallery_1.Gallery; } });
+var Lightbox_1 = require("./Lightbox");
+Object.defineProperty(exports, "Lightbox", { enumerable: true, get: function () { return Lightbox_1.Lightbox; } });
+var MediaFigure_1 = require("./MediaFigure");
+Object.defineProperty(exports, "MediaFigure", { enumerable: true, get: function () { return MediaFigure_1.MediaFigure; } });
+//# sourceMappingURL=index.js.map

package/dist/media/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/media/index.ts"],"names":[],"mappings":";AAAA;;;;;;;;GAQG;;;AAEH,qCAAoC;AAA3B,kGAAA,OAAO,OAAA;AAEhB,uCAAsC;AAA7B,oGAAA,QAAQ,OAAA;AAEjB,6CAA4C;AAAnC,0GAAA,WAAW,OAAA"}

package/dist/media/types.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Prop shapes mirror the media module: an **album** has a title, and each
+ * **item** carries a URL, kind, caption, alt text, and intrinsic dimensions
+ * (used to reserve aspect-ratio boxes and avoid layout shift).
+ */
+export type MediaKind = 'image' | 'video';
+export interface MediaItem {
+    /** Source URL. */
+    url: string;
+    /** `image` (default) or `video`. */
+    kind?: MediaKind;
+    /** Caption shown under the item (figure / lightbox). */
+    caption?: string;
+    /** Alt text for the image (accessibility). */
+    alt?: string;
+    /** Intrinsic width in px (reserves the aspect-ratio box). */
+    width?: number;
+    /** Intrinsic height in px. */
+    height?: number;
+    /** Poster frame for a video item. */
+    poster?: string;
+}
+export interface MediaAlbum {
+    /** Album title. */
+    title: string;
+    /** Items in the album. */
+    items?: MediaItem[];
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/media/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/media/types.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,OAAO,CAAC;AAE1C,MAAM,WAAW,SAAS;IACxB,kBAAkB;IAClB,GAAG,EAAE,MAAM,CAAC;IACZ,oCAAoC;IACpC,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,wDAAwD;IACxD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,8CAA8C;IAC9C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,6DAA6D;IAC7D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8BAA8B;IAC9B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,qCAAqC;IACrC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,UAAU;IACzB,mBAAmB;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,0BAA0B;IAC1B,KAAK,CAAC,EAAE,SAAS,EAAE,CAAC;CACrB"}

package/dist/media/types.js

@@ -0,0 +1,8 @@
+"use strict";
+/**
+ * Prop shapes mirror the media module: an **album** has a title, and each
+ * **item** carries a URL, kind, caption, alt text, and intrinsic dimensions
+ * (used to reserve aspect-ratio boxes and avoid layout shift).
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

package/dist/media/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/media/types.ts"],"names":[],"mappings":";AAAA;;;;GAIG"}

package/dist/motion/AnimatedCounter.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+export interface AnimatedCounterProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'children'> {
+    /** Final value. */
+    to: number;
+    /** Starting value. */
+    from?: number;
+    /** Count duration in ms. */
+    duration?: number;
+    /** Formats the current value for display. Defaults to rounded `toLocaleString()`. */
+    format?: (value: number) => string;
+    /** IntersectionObserver threshold. */
+    threshold?: number;
+}
+/**
+ * Counts up (or down) once scrolled into view, driven by
+ * requestAnimationFrame. Under `prefers-reduced-motion` — or without
+ * `IntersectionObserver` — the final value renders immediately.
+ */
+export declare const AnimatedCounter: React.ForwardRefExoticComponent<AnimatedCounterProps & React.RefAttributes<HTMLSpanElement>>;
+//# sourceMappingURL=AnimatedCounter.d.ts.map

package/dist/motion/AnimatedCounter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnimatedCounter.d.ts","sourceRoot":"","sources":["../../src/motion/AnimatedCounter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,WAAW,oBACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,UAAU,CAAC;IAC/D,mBAAmB;IACnB,EAAE,EAAE,MAAM,CAAC;IACX,sBAAsB;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qFAAqF;IACrF,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACnC,sCAAsC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAMD;;;;GAIG;AACH,eAAO,MAAM,eAAe,8FAuC3B,CAAC"}

package/dist/motion/AnimatedCounter.js

@@ -0,0 +1,76 @@
+"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;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AnimatedCounter = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const reduced_motion_1 = require("./internal/reduced-motion");
+const use_in_view_1 = require("./internal/use-in-view");
+const defaultFormat = (value) => Math.round(value).toLocaleString('en-US');
+const easeOutCubic = (t) => 1 - Math.pow(1 - t, 3);
+/**
+ * Counts up (or down) once scrolled into view, driven by
+ * requestAnimationFrame. Under `prefers-reduced-motion` — or without
+ * `IntersectionObserver` — the final value renders immediately.
+ */
+exports.AnimatedCounter = React.forwardRef(function AnimatedCounter({ to, from = 0, duration = 1500, format = defaultFormat, threshold = 0.5, ...rest }, forwardedRef) {
+    const localRef = React.useRef(null);
+    React.useImperativeHandle(forwardedRef, () => localRef.current);
+    const reduced = (0, reduced_motion_1.usePrefersReducedMotion)();
+    const inView = (0, use_in_view_1.useInView)(localRef, { threshold, once: true, disabled: reduced });
+    const [value, setValue] = React.useState(from);
+    React.useEffect(() => {
+        if (!inView && !reduced)
+            return undefined;
+        if (reduced || duration <= 0) {
+            setValue(to);
+            return undefined;
+        }
+        let frame = 0;
+        let start = null;
+        const tick = (now) => {
+            if (start === null)
+                start = now;
+            const progress = Math.min((now - start) / duration, 1);
+            setValue(from + (to - from) * easeOutCubic(progress));
+            if (progress < 1)
+                frame = window.requestAnimationFrame(tick);
+        };
+        frame = window.requestAnimationFrame(tick);
+        return () => window.cancelAnimationFrame(frame);
+    }, [inView, reduced, from, to, duration]);
+    return ((0, jsx_runtime_1.jsx)("span", { ref: localRef, "data-xen-counter": "", ...rest, children: format(value) }));
+});
+//# sourceMappingURL=AnimatedCounter.js.map

package/dist/motion/AnimatedCounter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnimatedCounter.js","sourceRoot":"","sources":["../../src/motion/AnimatedCounter.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA+B;AAC/B,8DAAoE;AACpE,wDAAmD;AAgBnD,MAAM,aAAa,GAAG,CAAC,KAAa,EAAU,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC;AAE3F,MAAM,YAAY,GAAG,CAAC,CAAS,EAAU,EAAE,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC;AAEnE;;;;GAIG;AACU,QAAA,eAAe,GAAG,KAAK,CAAC,UAAU,CAC7C,SAAS,eAAe,CACtB,EAAE,EAAE,EAAE,IAAI,GAAG,CAAC,EAAE,QAAQ,GAAG,IAAI,EAAE,MAAM,GAAG,aAAa,EAAE,SAAS,GAAG,GAAG,EAAE,GAAG,IAAI,EAAE,EACnF,YAAY;IAEZ,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAkB,IAAI,CAAC,CAAC;IACrD,KAAK,CAAC,mBAAmB,CAAC,YAAY,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,OAA0B,CAAC,CAAC;IAEnF,MAAM,OAAO,GAAG,IAAA,wCAAuB,GAAE,CAAC;IAC1C,MAAM,MAAM,GAAG,IAAA,uBAAS,EAAC,QAAQ,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,CAAC;IACjF,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;IAE/C,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,CAAC,MAAM,IAAI,CAAC,OAAO;YAAE,OAAO,SAAS,CAAC;QAC1C,IAAI,OAAO,IAAI,QAAQ,IAAI,CAAC,EAAE,CAAC;YAC7B,QAAQ,CAAC,EAAE,CAAC,CAAC;YACb,OAAO,SAAS,CAAC;QACnB,CAAC;QAED,IAAI,KAAK,GAAG,CAAC,CAAC;QACd,IAAI,KAAK,GAAkB,IAAI,CAAC;QAEhC,MAAM,IAAI,GAAG,CAAC,GAAW,EAAQ,EAAE;YACjC,IAAI,KAAK,KAAK,IAAI;gBAAE,KAAK,GAAG,GAAG,CAAC;YAChC,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,GAAG,KAAK,CAAC,GAAG,QAAQ,EAAE,CAAC,CAAC,CAAC;YACvD,QAAQ,CAAC,IAAI,GAAG,CAAC,EAAE,GAAG,IAAI,CAAC,GAAG,YAAY,CAAC,QAAQ,CAAC,CAAC,CAAC;YACtD,IAAI,QAAQ,GAAG,CAAC;gBAAE,KAAK,GAAG,MAAM,CAAC,qBAAqB,CAAC,IAAI,CAAC,CAAC;QAC/D,CAAC,CAAC;QAEF,KAAK,GAAG,MAAM,CAAC,qBAAqB,CAAC,IAAI,CAAC,CAAC;QAC3C,OAAO,GAAG,EAAE,CAAC,MAAM,CAAC,oBAAoB,CAAC,KAAK,CAAC,CAAC;IAClD,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE,EAAE,QAAQ,CAAC,CAAC,CAAC;IAE1C,OAAO,CACL,iCAAM,GAAG,EAAE,QAAQ,sBAAmB,EAAE,KAAK,IAAI,YAC9C,MAAM,CAAC,KAAK,CAAC,GACT,CACR,CAAC;AACJ,CAAC,CACF,CAAC"}

package/dist/motion/Marquee.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+export interface MarqueeProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Scroll speed in px/s (loop duration is derived from content width). */
+    speed?: number;
+    /** Pause the loop while hovered. */
+    pauseOnHover?: boolean;
+}
+/**
+ * Infinite horizontal loop (pure CSS keyframes — the content is rendered
+ * twice and the track translates by -50%). The duplicate copy is
+ * `aria-hidden` so assistive tech reads the content once. Reduced-motion
+ * users get a static, non-animated row.
+ */
+export declare const Marquee: React.ForwardRefExoticComponent<MarqueeProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=Marquee.d.ts.map

package/dist/motion/Marquee.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Marquee.d.ts","sourceRoot":"","sources":["../../src/motion/Marquee.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,WAAW,YAAa,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACxE,0EAA0E;IAC1E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oCAAoC;IACpC,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAsBD;;;;;GAKG;AACH,eAAO,MAAM,OAAO,qFAuClB,CAAC"}

package/dist/motion/Marquee.js

@@ -0,0 +1,80 @@
+"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;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Marquee = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const cn_1 = require("../primitives/cn");
+const inject_1 = require("./internal/inject");
+const MARQUEE_CSS = `
+@keyframes xen-marquee {
+  from { transform: translate3d(0, 0, 0); }
+  to { transform: translate3d(-50%, 0, 0); }
+}
+[data-xen-marquee-track] {
+  animation-name: xen-marquee;
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+}
+[data-xen-marquee][data-pause-on-hover="true"]:hover [data-xen-marquee-track] {
+  animation-play-state: paused;
+}
+@media (prefers-reduced-motion: reduce) {
+  [data-xen-marquee-track] { animation: none !important; }
+}
+`;
+const FALLBACK_DURATION_S = 24;
+/**
+ * Infinite horizontal loop (pure CSS keyframes — the content is rendered
+ * twice and the track translates by -50%). The duplicate copy is
+ * `aria-hidden` so assistive tech reads the content once. Reduced-motion
+ * users get a static, non-animated row.
+ */
+exports.Marquee = React.forwardRef(function Marquee({ speed = 40, pauseOnHover = true, className, children, ...rest }, ref) {
+    (0, inject_1.injectStyleOnce)('xen-marquee-styles', MARQUEE_CSS);
+    const trackRef = React.useRef(null);
+    const [durationS, setDurationS] = React.useState(FALLBACK_DURATION_S);
+    React.useEffect(() => {
+        const track = trackRef.current;
+        if (track === null)
+            return;
+        const contentWidth = track.scrollWidth / 2;
+        if (contentWidth > 0 && speed > 0) {
+            setDurationS(contentWidth / speed);
+        }
+    }, [speed, children]);
+    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, "data-xen-marquee": "", "data-pause-on-hover": pauseOnHover ? 'true' : 'false', className: (0, cn_1.cn)('overflow-hidden', className), ...rest, children: (0, jsx_runtime_1.jsxs)("div", { ref: trackRef, "data-xen-marquee-track": "", className: "flex w-max items-center gap-[var(--xen-space-lg)]", style: { animationDuration: `${durationS}s` }, children: [(0, jsx_runtime_1.jsx)("div", { className: "flex shrink-0 items-center gap-[var(--xen-space-lg)]", children: children }), (0, jsx_runtime_1.jsx)("div", { "aria-hidden": "true", className: "flex shrink-0 items-center gap-[var(--xen-space-lg)]", children: children })] }) }));
+});
+//# sourceMappingURL=Marquee.js.map

package/dist/motion/Marquee.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Marquee.js","sourceRoot":"","sources":["../../src/motion/Marquee.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA+B;AAC/B,yCAAsC;AACtC,8CAAoD;AASpD,MAAM,WAAW,GAAG;;;;;;;;;;;;;;;;CAgBnB,CAAC;AAEF,MAAM,mBAAmB,GAAG,EAAE,CAAC;AAE/B;;;;;GAKG;AACU,QAAA,OAAO,GAAG,KAAK,CAAC,UAAU,CAA+B,SAAS,OAAO,CACpF,EAAE,KAAK,GAAG,EAAE,EAAE,YAAY,GAAG,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EACjE,GAAG;IAEH,IAAA,wBAAe,EAAC,oBAAoB,EAAE,WAAW,CAAC,CAAC;IAEnD,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAC;IACpD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,mBAAmB,CAAC,CAAC;IAEtE,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,MAAM,KAAK,GAAG,QAAQ,CAAC,OAAO,CAAC;QAC/B,IAAI,KAAK,KAAK,IAAI;YAAE,OAAO;QAC3B,MAAM,YAAY,GAAG,KAAK,CAAC,WAAW,GAAG,CAAC,CAAC;QAC3C,IAAI,YAAY,GAAG,CAAC,IAAI,KAAK,GAAG,CAAC,EAAE,CAAC;YAClC,YAAY,CAAC,YAAY,GAAG,KAAK,CAAC,CAAC;QACrC,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEtB,OAAO,CACL,gCACE,GAAG,EAAE,GAAG,sBACS,EAAE,yBACE,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,EACpD,SAAS,EAAE,IAAA,OAAE,EAAC,iBAAiB,EAAE,SAAS,CAAC,KACvC,IAAI,YAER,iCACE,GAAG,EAAE,QAAQ,4BACU,EAAE,EACzB,SAAS,EAAC,mDAAmD,EAC7D,KAAK,EAAE,EAAE,iBAAiB,EAAE,GAAG,SAAS,GAAG,EAAE,aAE7C,gCAAK,SAAS,EAAC,sDAAsD,YAAE,QAAQ,GAAO,EACtF,+CAAiB,MAAM,EAAC,SAAS,EAAC,sDAAsD,YACrF,QAAQ,GACL,IACF,GACF,CACP,CAAC;AACJ,CAAC,CAAC,CAAC"}

package/dist/motion/Parallax.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+export interface ParallaxProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Parallax intensity. Positive values scroll slower than the page,
+     * negative values faster. Clamped to ±0.5 so content never detaches.
+     */
+    speed?: number;
+}
+/**
+ * Subtle scroll parallax: translates its children on the Y axis via a
+ * passive scroll listener + requestAnimationFrame. Disabled entirely under
+ * `prefers-reduced-motion` and on the server.
+ */
+export declare const Parallax: React.ForwardRefExoticComponent<ParallaxProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=Parallax.d.ts.map

package/dist/motion/Parallax.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Parallax.d.ts","sourceRoot":"","sources":["../../src/motion/Parallax.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACzE;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAID;;;;GAIG;AACH,eAAO,MAAM,QAAQ,sFA4CnB,CAAC"}