pixelize-design-library 3.0.1-beta.1 → 3.1.1

package/dist/Components/MediaViewer/hooks/useAutoHideChrome.d.ts

@@ -0,0 +1,15 @@
+import { type FocusEvent, type RefObject } from "react";
+export interface AutoHideChromeHandlers {
+    onMouseMove: () => void;
+    onPointerMove: () => void;
+    onFocus: () => void;
+    onBlur: (event: FocusEvent) => void;
+    onKeyDown: () => void;
+}
+export interface UseAutoHideChromeResult {
+    visible: boolean;
+    show: () => void;
+    handlers: AutoHideChromeHandlers;
+}
+/** Pointer-idle auto-hide only — focus inside `containerRef` (keyboard/SR use) always keeps chrome visible. */
+export declare function useAutoHideChrome(containerRef: RefObject<HTMLElement | null>, canHide: boolean, delayMs?: number): UseAutoHideChromeResult;

package/dist/Components/MediaViewer/hooks/useAutoHideChrome.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAutoHideChrome = useAutoHideChrome;
+const react_1 = require("react");
+const HIDE_DELAY_MS = 3000;
+/** Pointer-idle auto-hide only — focus inside `containerRef` (keyboard/SR use) always keeps chrome visible. */
+function useAutoHideChrome(containerRef, canHide, delayMs = HIDE_DELAY_MS) {
+    const [visible, setVisible] = (0, react_1.useState)(true);
+    const [focusWithin, setFocusWithin] = (0, react_1.useState)(false);
+    const timer = (0, react_1.useRef)(null);
+    const clear = () => {
+        if (timer.current)
+            window.clearTimeout(timer.current);
+        timer.current = null;
+    };
+    const show = (0, react_1.useCallback)(() => {
+        setVisible(true);
+        clear();
+        if (canHide && !focusWithin)
+            timer.current = setTimeout(() => setVisible(false), delayMs);
+    }, [canHide, focusWithin, delayMs]);
+    (0, react_1.useEffect)(() => {
+        if (!canHide || focusWithin) {
+            clear();
+            setVisible(true);
+            return undefined;
+        }
+        show();
+        return clear;
+    }, [canHide, focusWithin, show]);
+    const onFocus = (0, react_1.useCallback)(() => {
+        setFocusWithin(true);
+        setVisible(true);
+    }, []);
+    const onBlur = (0, react_1.useCallback)((event) => {
+        var _a;
+        const next = event.relatedTarget;
+        if (next && ((_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.contains(next)))
+            return;
+        setFocusWithin(false);
+    }, [containerRef]);
+    return { visible, show, handlers: { onMouseMove: show, onPointerMove: show, onFocus, onBlur, onKeyDown: show } };
+}

package/dist/Components/MediaViewer/hooks/useFileViewer.d.ts

@@ -0,0 +1,20 @@
+import { type ReactNode } from "react";
+import type { MediaViewerProps } from "../MediaViewerProps";
+import { type MediaItem, type ResolveUrl, type ViewerFile } from "../mediaItems";
+/** MediaViewer props passed through; items, index and title come from `open`. */
+export type UseFileViewerOptions = Omit<MediaViewerProps, "isOpen" | "onClose" | "items" | "index" | "onIndexChange" | "title">;
+export interface FileViewerApi {
+    /** Opens `files` (app-stored paths) resolved through `resolveUrl`, at `index`. */
+    open: (files: ViewerFile[], index: number, title: string, resolveUrl: ResolveUrl) => void;
+    /** Opens an already-built `MediaItem[]`, e.g. from `buildMediaItems`. */
+    openItems: (items: MediaItem[], index: number, title: string) => void;
+    /** Opens local, unsaved `File`s via object URLs; the hook owns their lifecycle. */
+    openLocal: (files: File[], index: number, title: string) => void;
+    /** Closes the viewer and revokes the object URLs made for local files. */
+    close: () => void;
+    /** Mount this once; it renders nothing until `open`/`openItems`/`openLocal` is called. */
+    viewer: ReactNode;
+}
+/** Imperative open/close for `MediaViewer`, with object-URL lifecycle management for local files. */
+export declare function useFileViewer(options?: UseFileViewerOptions): FileViewerApi;
+export default useFileViewer;

package/dist/Components/MediaViewer/hooks/useFileViewer.js

@@ -0,0 +1,51 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFileViewer = useFileViewer;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const MediaViewer_1 = __importDefault(require("../MediaViewer"));
+const mediaItems_1 = require("../mediaItems");
+/** Imperative open/close for `MediaViewer`, with object-URL lifecycle management for local files. */
+function useFileViewer(options = {}) {
+    const [state, setState] = (0, react_1.useState)(null);
+    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    const objectUrls = (0, react_1.useRef)([]);
+    const revokeAll = (0, react_1.useCallback)(() => {
+        objectUrls.current.forEach((url) => URL.revokeObjectURL(url));
+        objectUrls.current = [];
+    }, []);
+    (0, react_1.useEffect)(() => revokeAll, [revokeAll]);
+    const open = (0, react_1.useCallback)((files, index, title, resolveUrl) => {
+        revokeAll();
+        setState({ items: (0, mediaItems_1.buildFileItems)(files, resolveUrl), index, title });
+        setIsOpen(true);
+    }, [revokeAll]);
+    const openItems = (0, react_1.useCallback)((items, index, title) => {
+        revokeAll();
+        setState({ items, index, title });
+        setIsOpen(true);
+    }, [revokeAll]);
+    const openLocal = (0, react_1.useCallback)((files, index, title) => {
+        revokeAll();
+        const viewerFiles = files.map((file) => {
+            const url = URL.createObjectURL(file);
+            objectUrls.current.push(url);
+            return { url, name: file.name, fileSize: file.size };
+        });
+        setState({ items: (0, mediaItems_1.buildFileItems)(viewerFiles, (path) => path), index, title });
+        setIsOpen(true);
+    }, [revokeAll]);
+    const close = (0, react_1.useCallback)(() => {
+        setIsOpen(false);
+        revokeAll();
+    }, [revokeAll]);
+    const onIndexChange = (0, react_1.useCallback)((index) => {
+        setState((prev) => (prev ? { ...prev, index } : prev));
+    }, []);
+    const viewer = state ? ((0, jsx_runtime_1.jsx)(MediaViewer_1.default, { isOpen: isOpen, onClose: close, items: state.items, index: state.index, onIndexChange: onIndexChange, title: state.title, ...options })) : null;
+    return { open, openItems, openLocal, close, viewer };
+}
+exports.default = useFileViewer;

package/dist/Components/MediaViewer/mediaItems.d.ts

@@ -0,0 +1,90 @@
+export type MediaKind = "image" | "video" | "audio" | "youtube" | "pdf" | "doc" | "text" | "spreadsheet" | "presentation" | "archive" | "file";
+export interface MediaItem {
+    /** Unique id of the item, used as the React key and for tile selection. */
+    key: string;
+    /** Chooses the viewer: image, video, audio, YouTube embed or a document stage. */
+    kind: MediaKind;
+    /** Fetchable url; for `youtube` it is the video id instead. */
+    src: string;
+    /** Thumbnail url for the tile strip; null shows a kind icon instead. */
+    thumb: string | null;
+    /** 1-based position within the item's kind, used in tile names such as "image 2". */
+    ordinal: number;
+    /** Date string shown as the uploaded date in the details line. */
+    uploadedAt?: string | null;
+    /** Size in bytes, shown beside the file type in the details line. */
+    fileSize?: number | null;
+    /** Accessible name of the player or stage for this item; falls back to the viewer `title`. */
+    name?: string | null;
+}
+export interface MediaFile {
+    /** Stored path passed to `resolveUrl`; an absolute blob:, data: or http(s): url is used as is. */
+    path: string;
+    /** Date string shown as the uploaded date in the details line. */
+    uploadedAt?: string | null;
+    /** Size in bytes, shown beside the file type in the details line. */
+    fileSize?: number | null;
+}
+export type MediaSource = string | MediaFile;
+export interface MediaSources {
+    /** Image paths or files, in display order. */
+    photos: MediaSource[];
+    /** Video paths or files, in display order. */
+    videos: MediaSource[];
+    /** YouTube video ids, not urls. */
+    youtubeVideoIds: string[];
+}
+export interface ViewerFile {
+    /** Stored path passed to `resolveUrl`, or an absolute url used as is; also drives kind detection when `name` has no known extension. */
+    url: string;
+    /** File name; picks the viewer kind before the url does and names the stage. */
+    name?: string | null;
+    /** Date string shown as the uploaded date in the details line. */
+    uploadedAt?: string | null;
+    /** Size in bytes, shown beside the file type in the details line. */
+    fileSize?: number | null;
+}
+export type FileKind = Exclude<MediaKind, "youtube">;
+export interface PreviewPlan {
+    /** Indexes into `items` to show as preview tiles, in order. */
+    tiles: number[];
+    /** How many items are left out, for a "+N more" tile. */
+    hidden: number;
+}
+/** Resolves an app-stored path to a fetchable url; the host app owns base-url/CDN logic. */
+export type ResolveUrl = (path: string) => string;
+/** Lowest image zoom, in percent. */
+export declare const MIN_ZOOM = 25;
+/** Highest image zoom, in percent. */
+export declare const MAX_ZOOM = 400;
+/** Percent added or removed by one zoom-in or zoom-out press. */
+export declare const ZOOM_STEP = 25;
+/** Rates offered in the playback-speed menu. */
+export declare const PLAYBACK_SPEEDS: readonly [0.5, 0.75, 1, 1.25, 1.5, 2];
+/** Seconds skipped by the rewind and forward buttons and their J / L keys. */
+export declare const SEEK_STEP_SECONDS = 10;
+/** Passes an already-absolute url through untouched; only a bare stored path goes through resolveUrl. */
+export declare const resolveMediaUrl: (path: string, resolveUrl: ResolveUrl) => string;
+export declare const isUnsupportedImageSrc: (src: string) => boolean;
+export declare const isUnsupportedVideoSrc: (src: string) => boolean;
+/** Picks the viewer kind from the file name first, falling back to the url — bare `.doc` is not `doc`. */
+export declare const fileKind: (url: string, name?: string | null) => FileKind;
+export declare const youtubeThumb: (videoId: string) => string;
+export declare const youtubeEmbed: (videoId: string) => string;
+export declare const youtubeWatch: (videoId: string) => string;
+export declare const asFile: (source: MediaSource) => MediaFile;
+/** Builds ordered viewer items from DB-backed photos/videos/YouTube ids; ordinal restarts per group. */
+export declare function buildMediaItems(sources: MediaSources, resolveUrl: ResolveUrl): MediaItem[];
+/** Builds viewer items from a flat file list; ordinal numbering is per-kind, not per-list-position. */
+export declare function buildFileItems(files: ViewerFile[], resolveUrl: ResolveUrl): MediaItem[];
+export declare function countMedia(items: MediaItem[]): Record<MediaKind, number>;
+export declare function planPreview(items: MediaItem[], slots: number): PreviewPlan;
+export declare const wrapIndex: (index: number, length: number) => number;
+export declare const clampZoom: (zoom: number) => number;
+export declare function formatClock(totalSeconds: number): string;
+export declare function mediaLink(item: MediaItem, atSeconds?: number): string;
+export declare function formatFileSize(bytes: number): string;
+export declare function formatUploadedDate(value: string): string;
+export declare function fileTypeLabel(src: string): string | null;
+/** True while the event target is a text field or slider, so keyboard shortcuts stay out of its way. */
+export declare function isTypingTarget(target: EventTarget | null): boolean;

package/dist/Components/MediaViewer/mediaItems.js

@@ -0,0 +1,206 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.clampZoom = exports.wrapIndex = exports.asFile = exports.youtubeWatch = exports.youtubeEmbed = exports.youtubeThumb = exports.fileKind = exports.isUnsupportedVideoSrc = exports.isUnsupportedImageSrc = exports.resolveMediaUrl = exports.SEEK_STEP_SECONDS = exports.PLAYBACK_SPEEDS = exports.ZOOM_STEP = exports.MAX_ZOOM = exports.MIN_ZOOM = void 0;
+exports.buildMediaItems = buildMediaItems;
+exports.buildFileItems = buildFileItems;
+exports.countMedia = countMedia;
+exports.planPreview = planPreview;
+exports.formatClock = formatClock;
+exports.mediaLink = mediaLink;
+exports.formatFileSize = formatFileSize;
+exports.formatUploadedDate = formatUploadedDate;
+exports.fileTypeLabel = fileTypeLabel;
+exports.isTypingTarget = isTypingTarget;
+/** Lowest image zoom, in percent. */
+exports.MIN_ZOOM = 25;
+/** Highest image zoom, in percent. */
+exports.MAX_ZOOM = 400;
+/** Percent added or removed by one zoom-in or zoom-out press. */
+exports.ZOOM_STEP = 25;
+/** Rates offered in the playback-speed menu. */
+exports.PLAYBACK_SPEEDS = [0.5, 0.75, 1, 1.25, 1.5, 2];
+/** Seconds skipped by the rewind and forward buttons and their J / L keys. */
+exports.SEEK_STEP_SECONDS = 10;
+const ABSOLUTE_URL_RE = /^(blob:|data:|https?:)/;
+/** Passes an already-absolute url through untouched; only a bare stored path goes through resolveUrl. */
+const resolveMediaUrl = (path, resolveUrl) => ABSOLUTE_URL_RE.test(path) ? path : resolveUrl(path);
+exports.resolveMediaUrl = resolveMediaUrl;
+const KIND_BY_EXT = [
+    [/\.(jpe?g|png|gif|webp|avif|bmp|svg|heic|heif|tiff?|ico)$/i, "image"],
+    [/\.(mp4|mov|webm|m4v|ogv|avi|mkv|m3u8)$/i, "video"],
+    [/\.(mp3|wav|m4a|aac|flac|ogg|opus)$/i, "audio"],
+    [/\.pdf$/i, "pdf"],
+    [/\.(docx|odt|rtf)$/i, "doc"],
+    [/\.(txt|md|json|csv|log|ya?ml|xml|jsx?|tsx?|css|html?|py|java|c|cpp|sh|rb|go|rs|php)$/i, "text"],
+    [/\.(xlsx|xls)$/i, "spreadsheet"],
+    [/\.(pptx|ppt)$/i, "presentation"],
+    [/\.(zip|rar|7z|tar|gz)$/i, "archive"],
+];
+const UNSUPPORTED_IMAGE_EXT = /\.(heic|heif)(?:[?#].*)?$/i;
+const isUnsupportedImageSrc = (src) => UNSUPPORTED_IMAGE_EXT.test(src);
+exports.isUnsupportedImageSrc = isUnsupportedImageSrc;
+const UNSUPPORTED_VIDEO_EXT = /\.(avi|mkv|m3u8)(?:[?#].*)?$/i;
+const isUnsupportedVideoSrc = (src) => UNSUPPORTED_VIDEO_EXT.test(src);
+exports.isUnsupportedVideoSrc = isUnsupportedVideoSrc;
+const kindOf = (nameOrUrl) => {
+    var _a, _b;
+    const bare = nameOrUrl.replace(/[?#].*$/, "");
+    return (_b = (_a = KIND_BY_EXT.find(([re]) => re.test(bare))) === null || _a === void 0 ? void 0 : _a[1]) !== null && _b !== void 0 ? _b : "file";
+};
+/** Picks the viewer kind from the file name first, falling back to the url — bare `.doc` is not `doc`. */
+const fileKind = (url, name) => {
+    const byName = name ? kindOf(name) : "file";
+    return byName === "file" ? kindOf(url) : byName;
+};
+exports.fileKind = fileKind;
+const youtubeThumb = (videoId) => `https://img.youtube.com/vi/${videoId}/mqdefault.jpg`;
+exports.youtubeThumb = youtubeThumb;
+const youtubeEmbed = (videoId) => `https://www.youtube-nocookie.com/embed/${videoId}`;
+exports.youtubeEmbed = youtubeEmbed;
+const youtubeWatch = (videoId) => `https://www.youtube.com/watch?v=${videoId}`;
+exports.youtubeWatch = youtubeWatch;
+const asFile = (source) => typeof source === "string" ? { path: source } : source;
+exports.asFile = asFile;
+/** Builds ordered viewer items from DB-backed photos/videos/YouTube ids; ordinal restarts per group. */
+function buildMediaItems(sources, resolveUrl) {
+    const items = [];
+    sources.photos.forEach((source, i) => {
+        var _a, _b;
+        const file = (0, exports.asFile)(source);
+        const src = (0, exports.resolveMediaUrl)(file.path, resolveUrl);
+        items.push({
+            key: `photo-${i}`,
+            kind: "image",
+            src,
+            thumb: src,
+            ordinal: i + 1,
+            uploadedAt: (_a = file.uploadedAt) !== null && _a !== void 0 ? _a : null,
+            fileSize: (_b = file.fileSize) !== null && _b !== void 0 ? _b : null,
+        });
+    });
+    sources.videos.forEach((source, i) => {
+        var _a, _b;
+        const file = (0, exports.asFile)(source);
+        items.push({
+            key: `video-${i}`,
+            kind: "video",
+            src: (0, exports.resolveMediaUrl)(file.path, resolveUrl),
+            thumb: null,
+            ordinal: i + 1,
+            uploadedAt: (_a = file.uploadedAt) !== null && _a !== void 0 ? _a : null,
+            fileSize: (_b = file.fileSize) !== null && _b !== void 0 ? _b : null,
+        });
+    });
+    sources.youtubeVideoIds.forEach((id, i) => {
+        items.push({
+            key: `youtube-${i}`,
+            kind: "youtube",
+            src: id,
+            thumb: (0, exports.youtubeThumb)(id),
+            ordinal: i + 1,
+        });
+    });
+    return items;
+}
+/** Builds viewer items from a flat file list; ordinal numbering is per-kind, not per-list-position. */
+function buildFileItems(files, resolveUrl) {
+    const seen = {};
+    return files.map((file, i) => {
+        var _a, _b, _c, _d;
+        const kind = (0, exports.fileKind)(file.url, file.name);
+        const ordinal = ((_a = seen[kind]) !== null && _a !== void 0 ? _a : 0) + 1;
+        seen[kind] = ordinal;
+        const src = (0, exports.resolveMediaUrl)(file.url, resolveUrl);
+        return {
+            key: `file-${i}`,
+            kind,
+            src,
+            thumb: kind === "image" ? src : null,
+            ordinal,
+            uploadedAt: (_b = file.uploadedAt) !== null && _b !== void 0 ? _b : null,
+            fileSize: (_c = file.fileSize) !== null && _c !== void 0 ? _c : null,
+            name: (_d = file.name) !== null && _d !== void 0 ? _d : null,
+        };
+    });
+}
+function countMedia(items) {
+    const counts = {
+        image: 0,
+        video: 0,
+        audio: 0,
+        youtube: 0,
+        pdf: 0,
+        doc: 0,
+        text: 0,
+        spreadsheet: 0,
+        presentation: 0,
+        archive: 0,
+        file: 0,
+    };
+    items.forEach((item) => {
+        counts[item.kind] += 1;
+    });
+    return counts;
+}
+// Up to three photos lead, then the first non-photo items, so a video is never buried behind "+N more".
+function planPreview(items, slots) {
+    if (items.length <= slots)
+        return { tiles: items.map((_, i) => i), hidden: 0 };
+    const photoIdx = items.flatMap((item, i) => (item.kind === "image" ? [i] : []));
+    const motionIdx = items.flatMap((item, i) => (item.kind === "image" ? [] : [i]));
+    const leadPhotos = photoIdx.slice(0, Math.min(3, slots));
+    const motion = motionIdx.slice(0, slots - leadPhotos.length);
+    const chosen = new Set([...leadPhotos, ...motion]);
+    for (let i = 0; i < items.length && chosen.size < slots; i += 1)
+        chosen.add(i);
+    const tiles = [...chosen].sort((a, b) => a - b);
+    return { tiles, hidden: items.length - tiles.length };
+}
+const wrapIndex = (index, length) => length === 0 ? 0 : ((index % length) + length) % length;
+exports.wrapIndex = wrapIndex;
+const clampZoom = (zoom) => Math.min(exports.MAX_ZOOM, Math.max(exports.MIN_ZOOM, zoom));
+exports.clampZoom = clampZoom;
+function formatClock(totalSeconds) {
+    if (!Number.isFinite(totalSeconds) || totalSeconds < 0)
+        return "00:00";
+    const total = Math.floor(totalSeconds);
+    const hours = Math.floor(total / 3600);
+    const minutes = Math.floor((total % 3600) / 60);
+    const seconds = total % 60;
+    const pad = (n) => String(n).padStart(2, "0");
+    return hours > 0 ? `${hours}:${pad(minutes)}:${pad(seconds)}` : `${pad(minutes)}:${pad(seconds)}`;
+}
+function mediaLink(item, atSeconds) {
+    if (item.kind === "youtube") {
+        const t = atSeconds && atSeconds > 0 ? `&t=${Math.floor(atSeconds)}s` : "";
+        return `${(0, exports.youtubeWatch)(item.src)}${t}`;
+    }
+    if (item.kind === "video" && atSeconds && atSeconds > 0)
+        return `${item.src}#t=${Math.floor(atSeconds)}`;
+    return item.src;
+}
+function formatFileSize(bytes) {
+    if (bytes < 1024)
+        return `${bytes} B`;
+    if (bytes < 1024 * 1024)
+        return `${(bytes / 1024).toFixed(1)} KB`;
+    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+const UPLOADED_DATE = new Intl.DateTimeFormat("en-US", { month: "short", day: "numeric", year: "numeric" });
+function formatUploadedDate(value) {
+    return UPLOADED_DATE.format(new Date(value));
+}
+function fileTypeLabel(src) {
+    const match = /\.([a-z0-9]{2,5})(?:[?#].*)?$/i.exec(src);
+    return match ? match[1].toUpperCase() : null;
+}
+/** True while the event target is a text field or slider, so keyboard shortcuts stay out of its way. */
+function isTypingTarget(target) {
+    if (!(target instanceof HTMLElement))
+        return false;
+    if (target.isContentEditable)
+        return true;
+    if (/^(input|textarea|select)$/i.test(target.tagName))
+        return true;
+    return target.getAttribute("role") === "slider";
+}

package/dist/Components/MediaViewer/useViewerChrome.d.ts

@@ -0,0 +1,15 @@
+export interface ViewerChrome {
+    stage: string;
+    ink: string;
+    muted: string;
+    raised: string;
+    hover: string;
+    track: string;
+    accent: string;
+    onAccent: string;
+    /** rgba() of the chrome's own ink-black at `alpha`, for scrims/gradients over media — never a literal hex. */
+    scrim: (alpha: number) => string;
+    /** rgba() of `accent` at `alpha`, for a selection glow/ring softer than a solid border. */
+    accentGlow: (alpha: number) => string;
+}
+export declare function useViewerChrome(): ViewerChrome;

package/dist/Components/MediaViewer/useViewerChrome.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useViewerChrome = useViewerChrome;
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const color_1 = require("../../Theme/tokens/builders/color");
+const accentText_1 = require("../../Theme/tokens/builders/accentText");
+const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
+const AA_NORMAL_TEXT = 4.5;
+const MUTED_SEED_WEIGHT = 0.55;
+// A media lightbox stage stays near-black in both light and dark app modes, like every other lightbox.
+function useViewerChrome() {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const stage = colors.sidebar.background[500];
+    const ink = (0, accentText_1.onFilled)(stage, colors.white, colors.black);
+    const accent = colors.primary[500];
+    const { r, g, b } = (0, color_1.hexToRgb)(colors.black);
+    const accentRgb = (0, color_1.hexToRgb)(accent);
+    return {
+        stage,
+        ink,
+        muted: (0, outlineRung_1.liftToContrast)((0, color_1.mix)(stage, ink, MUTED_SEED_WEIGHT), stage, AA_NORMAL_TEXT),
+        raised: (0, color_1.mix)(stage, ink, 0.1),
+        hover: (0, color_1.mix)(stage, ink, 0.2),
+        track: (0, color_1.mix)(stage, ink, 0.28),
+        accent,
+        onAccent: (0, accentText_1.onFilled)(accent, colors.white, colors.black),
+        scrim: (alpha) => `rgba(${r}, ${g}, ${b}, ${alpha})`,
+        accentGlow: (alpha) => `rgba(${accentRgb.r}, ${accentRgb.g}, ${accentRgb.b}, ${alpha})`,
+    };
+}

package/dist/Components/Modal/Modal.d.ts

@@ -1,12 +1,10 @@
 import React from "react";
-import { ChakraModelProps } from "./ModalProps";
-export declare const ModalHeader: React.FC<{
-    children: React.ReactNode;
-}>;
-export declare const ModalBody: React.FC<{
-    children: React.ReactNode;
-}>;
-export declare const ModalFooter: React.FC<{
-    children: React.ReactNode;
-}>;
-export default function Modal({ size, isOpen, onClose, overlaybg, overlaybackdropFilter, overlaybackdropInvert, overlaybackdropBlur, isCentered, finalFocusRef, blockScrollOnMount, initialFocusRef, closeOnOverlayClick, motionPreset, scrollBehavior, children, isLoading, }: ChakraModelProps): React.JSX.Element;
+import { ChakraModelProps, ModalHeaderSlotProps, ModalBodySlotProps, ModalFooterSlotProps } from "./ModalProps";
+/** Header slot of `Modal`; its style props are spread onto the rendered header. */
+export declare const ModalHeader: React.FC<ModalHeaderSlotProps>;
+/** Body slot of `Modal`; its style props are spread onto the rendered body. */
+export declare const ModalBody: React.FC<ModalBodySlotProps>;
+/** Footer slot of `Modal`; its style props are spread onto the rendered footer. */
+export declare const ModalFooter: React.FC<ModalFooterSlotProps>;
+/** Dialog built from ModalHeader, ModalBody and ModalFooter slots; other children are dropped. */
+export default function Modal({ size, isOpen, onClose, overlaybg, overlaybackdropFilter, overlaybackdropInvert, overlaybackdropBlur, isCentered, finalFocusRef, blockScrollOnMount, initialFocusRef, closeOnOverlayClick, closeOnEsc, trapFocus, motionPreset, scrollBehavior, children, isLoading, title, subtitle, hideCloseButton, contentProps, portalChildren, }: ChakraModelProps): import("react/jsx-runtime").JSX.Element;

package/dist/Components/Modal/Modal.js

@@ -1,50 +1,35 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ModalFooter = exports.ModalBody = exports.ModalHeader = void 0;
 exports.default = Modal;
-var react_1 = __importDefault(require("react"));
-var react_2 = require("@chakra-ui/react");
-var ModalHeader = function (_a) {
-    var children = _a.children;
-    return react_1.default.createElement(react_1.default.Fragment, null, children);
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const warnDroppedSlotChildren_1 = require("./warnDroppedSlotChildren");
+const findSlot_1 = require("../Common/findSlot");
+/** Header slot of `Modal`; its style props are spread onto the rendered header. */
+const ModalHeader = ({ children }) => {
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
 };
 exports.ModalHeader = ModalHeader;
-var ModalBody = function (_a) {
-    var children = _a.children;
-    return react_1.default.createElement(react_1.default.Fragment, null, children);
+/** Body slot of `Modal`; its style props are spread onto the rendered body. */
+const ModalBody = ({ children }) => {
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
 };
 exports.ModalBody = ModalBody;
-var ModalFooter = function (_a) {
-    var children = _a.children;
-    return react_1.default.createElement(react_1.default.Fragment, null, children);
+/** Footer slot of `Modal`; its style props are spread onto the rendered footer. */
+const ModalFooter = ({ children }) => {
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
 };
 exports.ModalFooter = ModalFooter;
-function Modal(_a) {
-    var size = _a.size, _b = _a.isOpen, isOpen = _b === void 0 ? false : _b, onClose = _a.onClose, _c = _a.overlaybg, overlaybg = _c === void 0 ? "blackAlpha.300" : _c, _d = _a.overlaybackdropFilter, overlaybackdropFilter = _d === void 0 ? "blur(10px) hue-rotate(90deg)" : _d, overlaybackdropInvert = _a.overlaybackdropInvert, overlaybackdropBlur = _a.overlaybackdropBlur, isCentered = _a.isCentered, finalFocusRef = _a.finalFocusRef, blockScrollOnMount = _a.blockScrollOnMount, initialFocusRef = _a.initialFocusRef, closeOnOverlayClick = _a.closeOnOverlayClick, motionPreset = _a.motionPreset, scrollBehavior = _a.scrollBehavior, children = _a.children, isLoading = _a.isLoading;
-    if (!isOpen)
-        return react_1.default.createElement(react_1.default.Fragment, null);
-    var isReactElement = function (child) {
-        return child !== null && typeof child === "object" && "type" in child;
-    };
-    var header = react_1.default.Children.toArray(children).find(function (child) { return isReactElement(child) && child.type === exports.ModalHeader; });
-    var body = react_1.default.Children.toArray(children).find(function (child) { return isReactElement(child) && child.type === exports.ModalBody; });
-    var footer = react_1.default.Children.toArray(children).find(function (child) { return isReactElement(child) && child.type === exports.ModalFooter; });
-    return (react_1.default.createElement(react_2.Modal, { isOpen: true, onClose: onClose, size: size, isCentered: isCentered, finalFocusRef: finalFocusRef, blockScrollOnMount: blockScrollOnMount, initialFocusRef: initialFocusRef, closeOnOverlayClick: closeOnOverlayClick, motionPreset: motionPreset, scrollBehavior: scrollBehavior },
-        react_1.default.createElement(react_2.ModalOverlay, { bg: overlaybg, backdropFilter: overlaybackdropFilter, backdropInvert: overlaybackdropInvert, backdropBlur: overlaybackdropBlur }),
-        react_1.default.createElement(react_2.ModalContent, null, isLoading ? (react_1.default.createElement("div", { style: {
-                display: "flex",
-                justifyContent: "center",
-                alignItems: "center",
-                height: "100%",
-                width: "100%",
-                padding: "25%",
-            } },
-            react_1.default.createElement(react_2.Spinner, { thickness: "4px", speed: "0.65s", emptyColor: "gray.200", color: "blue.500", size: "xl" }))) : (react_1.default.createElement(react_1.default.Fragment, null,
-            header && react_1.default.createElement(react_2.ModalHeader, null, header),
-            react_1.default.createElement(react_2.ModalCloseButton, null),
-            react_1.default.createElement(react_2.ModalBody, null, body),
-            footer && react_1.default.createElement(react_2.ModalFooter, null, footer))))));
+/** Dialog built from ModalHeader, ModalBody and ModalFooter slots; other children are dropped. */
+function Modal({ size, isOpen = false, onClose, overlaybg, overlaybackdropFilter, overlaybackdropInvert, overlaybackdropBlur, isCentered, finalFocusRef, blockScrollOnMount = true, initialFocusRef, closeOnOverlayClick = true, closeOnEsc = true, trapFocus = true, motionPreset = "scale", scrollBehavior = "outside", children, isLoading, title, subtitle, hideCloseButton, contentProps, portalChildren, }) {
+    var _a, _b;
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const headerSlot = (0, findSlot_1.findSlot)(children, exports.ModalHeader);
+    const bodySlot = (0, findSlot_1.findSlot)(children, exports.ModalBody);
+    const footerSlot = (0, findSlot_1.findSlot)(children, exports.ModalFooter);
+    (0, warnDroppedSlotChildren_1.warnDroppedSlotChildren)("Modal", children, [exports.ModalHeader, exports.ModalBody, exports.ModalFooter]);
+    const headerContent = headerSlot !== null && headerSlot !== void 0 ? headerSlot : title;
+    return ((0, jsx_runtime_1.jsxs)(react_1.Modal, { isOpen: isOpen, onClose: onClose, size: size, isCentered: isCentered, finalFocusRef: finalFocusRef, blockScrollOnMount: blockScrollOnMount, initialFocusRef: initialFocusRef, closeOnOverlayClick: closeOnOverlayClick, closeOnEsc: closeOnEsc, trapFocus: trapFocus, motionPreset: motionPreset, scrollBehavior: scrollBehavior, children: [(0, jsx_runtime_1.jsx)(react_1.ModalOverlay, { bg: overlaybg, backdropFilter: overlaybackdropFilter, backdropInvert: overlaybackdropInvert, backdropBlur: overlaybackdropBlur }), (0, jsx_runtime_1.jsxs)(react_1.ModalContent, { "aria-busy": isLoading || undefined, ...contentProps, children: [(headerContent || subtitle) && ((0, jsx_runtime_1.jsxs)(react_1.ModalHeader, { ...((_a = headerSlot === null || headerSlot === void 0 ? void 0 : headerSlot.props) !== null && _a !== void 0 ? _a : {}), children: [headerContent, subtitle && ((0, jsx_runtime_1.jsx)(react_1.Text, { as: "div", mt: 0.5, fontSize: "sm", fontWeight: 400, color: colors.textMuted, children: subtitle }))] })), !hideCloseButton && (0, jsx_runtime_1.jsx)(react_1.ModalCloseButton, {}), isLoading ? ((0, jsx_runtime_1.jsx)(react_1.Flex, { role: "status", "aria-label": "Loading", justify: "center", align: "center", py: 16, children: (0, jsx_runtime_1.jsx)(react_1.Spinner, { thickness: "4px", speed: "0.65s", emptyColor: colors.boxborder[200], color: colors.accentText, size: "xl" }) })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_1.ModalBody, { ...((_b = bodySlot === null || bodySlot === void 0 ? void 0 : bodySlot.props) !== null && _b !== void 0 ? _b : {}), children: bodySlot }), footerSlot && ((0, jsx_runtime_1.jsx)(react_1.ModalFooter, { ...footerSlot.props, children: footerSlot }))] })), portalChildren] })] }));
 }

package/dist/Components/Modal/ModalProps.d.ts

@@ -1,10 +1,34 @@
-import { ModalProps } from "@chakra-ui/react";
-export type ChakraModelProps = Pick<ModalProps, "isOpen" | "onClose" | "finalFocusRef" | "blockScrollOnMount" | "initialFocusRef" | "closeOnOverlayClick" | "isCentered" | "motionPreset" | "scrollBehavior"> & {
+import { ModalContentProps, ModalProps, ModalHeaderProps, ModalBodyProps, ModalFooterProps } from "@chakra-ui/react";
+/** Curated Chakra ModalProps; overlay* override the theme scrim, contentProps spreads onto ModalContent. */
+export type ChakraModelProps = Pick<ModalProps, "isOpen" | "onClose" | "finalFocusRef" | "blockScrollOnMount" | "initialFocusRef" | "closeOnOverlayClick" | "closeOnEsc" | "trapFocus" | "isCentered" | "motionPreset" | "scrollBehavior"> & {
+    /** Overrides the theme scrim colour on ModalOverlay. */
     overlaybg?: string;
+    /** Chakra `backdropFilter` value applied to the scrim, e.g. `blur(4px)`. */
     overlaybackdropFilter?: string;
+    /** Chakra `backdropInvert` value applied to the scrim, e.g. `80%`. */
     overlaybackdropInvert?: string;
+    /** Chakra `backdropBlur` value applied to the scrim, e.g. `4px` or `sm`. */
     overlaybackdropBlur?: string;
+    /** Dialog width from `xs` to `6xl`; `full` fills the viewport. Required. */
     size: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "full";
+    /** Only ModalHeader/ModalBody/ModalFooter render, matched by type through nested Fragments; any other child is dropped (dev console.warn) — use `portalChildren`. */
     children?: React.ReactNode;
+    /** Spinner replaces body and footer; header and close button stay. */
     isLoading?: boolean;
+    /** Header text; ignored when a ModalHeader child is passed. */
+    title?: React.ReactNode;
+    /** Muted line under the header; renders a header even without `title`. */
+    subtitle?: React.ReactNode;
+    /** Hides the top-right close (X) button; Esc and overlay click still close unless disabled. */
+    hideCloseButton?: boolean;
+    /** Spread onto ModalContent last, so it overrides `aria-busy` and theme styles. */
+    contentProps?: ModalContentProps;
+    /** Rendered inside the modal's dialog after the slots (so live regions stay announced); nested dialogs portal out and keep focus here. Unmounts with the modal. */
+    portalChildren?: React.ReactNode;
 };
+/** Chakra style props (padding, borderBottom, gap, sx, ...) spread onto the rendered ModalHeader; omit to keep theme defaults. */
+export type ModalHeaderSlotProps = ModalHeaderProps;
+/** Chakra style props (padding, borderTop, gap, sx, ...) spread onto the rendered ModalBody; omit to keep theme defaults. */
+export type ModalBodySlotProps = ModalBodyProps;
+/** Chakra style props (padding, borderTop, gap, justify, sx, ...) spread onto the rendered ModalFooter; omit to keep theme defaults. */
+export type ModalFooterSlotProps = ModalFooterProps;

package/dist/Components/Modal/dialogNaming.d.ts

@@ -0,0 +1,8 @@
+import { type ReactNode } from "react";
+type DialogNamingProps = {
+    label?: string;
+    labelledBy?: string;
+    children: ReactNode;
+};
+export declare function DialogNaming({ label, labelledBy, children }: DialogNamingProps): import("react/jsx-runtime").JSX.Element;
+export {};