pixelize-design-library 2.4.2-beta.5 → 2.4.2-beta.50

package/dist/Components/MediaViewer/mediaItems.js

@@ -0,0 +1,196 @@
+"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.fileTypeLabel = fileTypeLabel;
+exports.isTypingTarget = isTypingTarget;
+exports.MIN_ZOOM = 25;
+exports.MAX_ZOOM = 400;
+exports.ZOOM_STEP = 25;
+exports.PLAYBACK_SPEEDS = [0.5, 0.75, 1, 1.25, 1.5, 2];
+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`;
+}
+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,6 @@
 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): import("react/jsx-runtime").JSX.Element;
+import { ChakraModelProps, ModalHeaderSlotProps, ModalBodySlotProps, ModalFooterSlotProps } from "./ModalProps";
+export declare const ModalHeader: React.FC<ModalHeaderSlotProps>;
+export declare const ModalBody: React.FC<ModalBodySlotProps>;
+export declare const ModalFooter: React.FC<ModalFooterSlotProps>;
+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, }: ChakraModelProps): import("react/jsx-runtime").JSX.Element;

package/dist/Components/Modal/Modal.js

@@ -21,22 +21,28 @@ const ModalFooter = ({ children }) => {
     return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
 };
 exports.ModalFooter = ModalFooter;
-function Modal({ size, isOpen = false, onClose, overlaybg = "blackAlpha.300", overlaybackdropFilter = "blur(10px) hue-rotate(90deg)", overlaybackdropInvert, overlaybackdropBlur, isCentered, finalFocusRef, blockScrollOnMount, initialFocusRef, closeOnOverlayClick, motionPreset, scrollBehavior, children, isLoading, }) {
-    const theme = (0, useCustomTheme_1.useCustomTheme)();
-    if (!isOpen)
-        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
-    const isReactElement = (child) => {
-        return child !== null && typeof child === "object" && "type" in child;
-    };
-    const header = react_1.default.Children.toArray(children).find((child) => isReactElement(child) && child.type === exports.ModalHeader);
-    const body = react_1.default.Children.toArray(children).find((child) => isReactElement(child) && child.type === exports.ModalBody);
-    const footer = react_1.default.Children.toArray(children).find((child) => isReactElement(child) && child.type === exports.ModalFooter);
-    return ((0, jsx_runtime_1.jsxs)(react_2.Modal, { isOpen: true, onClose: onClose, size: size, isCentered: isCentered, finalFocusRef: finalFocusRef, blockScrollOnMount: blockScrollOnMount, initialFocusRef: initialFocusRef, closeOnOverlayClick: closeOnOverlayClick, motionPreset: motionPreset, scrollBehavior: scrollBehavior, children: [(0, jsx_runtime_1.jsx)(react_2.ModalOverlay, { bg: overlaybg, backdropFilter: overlaybackdropFilter, backdropInvert: overlaybackdropInvert, backdropBlur: overlaybackdropBlur }), (0, jsx_runtime_1.jsx)(react_2.ModalContent, { children: isLoading ? ((0, jsx_runtime_1.jsx)("div", { style: {
-                        display: "flex",
-                        justifyContent: "center",
-                        alignItems: "center",
-                        height: "100%",
-                        width: "100%",
-                        padding: "25%",
-                    }, children: (0, jsx_runtime_1.jsx)(react_2.Spinner, { thickness: "4px", speed: "0.65s", emptyColor: theme.colors.gray[200], color: theme.colors.accentText, size: "xl" }) })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [header && (0, jsx_runtime_1.jsx)(react_2.ModalHeader, { children: header }), (0, jsx_runtime_1.jsx)(react_2.ModalCloseButton, {}), (0, jsx_runtime_1.jsx)(react_2.ModalBody, { children: body }), footer && (0, jsx_runtime_1.jsx)(react_2.ModalFooter, { children: footer })] })) })] }));
+const isReactElement = (child) => child !== null && typeof child === "object" && "type" in child;
+// Matches by type one Fragment deep, so `<>{cond && <ModalFooter>...</ModalFooter>}</>` isn't dropped.
+const findSlot = (children, slot) => {
+    for (const child of react_1.default.Children.toArray(children)) {
+        if (!isReactElement(child))
+            continue;
+        if (child.type === slot)
+            return child;
+        if (child.type === react_1.default.Fragment) {
+            const nested = findSlot(child.props.children, slot);
+            if (nested)
+                return nested;
+        }
+    }
+    return undefined;
+};
+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, }) {
+    var _a, _b;
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const headerSlot = findSlot(children, exports.ModalHeader);
+    const bodySlot = findSlot(children, exports.ModalBody);
+    const footerSlot = findSlot(children, exports.ModalFooter);
+    const headerContent = headerSlot !== null && headerSlot !== void 0 ? headerSlot : title;
+    return ((0, jsx_runtime_1.jsxs)(react_2.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_2.ModalOverlay, { bg: overlaybg, backdropFilter: overlaybackdropFilter, backdropInvert: overlaybackdropInvert, backdropBlur: overlaybackdropBlur }), (0, jsx_runtime_1.jsxs)(react_2.ModalContent, { "aria-busy": isLoading || undefined, ...contentProps, children: [(headerContent || subtitle) && ((0, jsx_runtime_1.jsxs)(react_2.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_2.Text, { as: "div", mt: 0.5, fontSize: "0.875rem", fontWeight: 400, color: colors.textMuted, children: subtitle }))] })), !hideCloseButton && (0, jsx_runtime_1.jsx)(react_2.ModalCloseButton, {}), isLoading ? ((0, jsx_runtime_1.jsx)(react_2.Flex, { role: "status", "aria-label": "Loading", justify: "center", align: "center", py: 16, children: (0, jsx_runtime_1.jsx)(react_2.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_2.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_2.ModalFooter, { ...footerSlot.props, children: footerSlot }))] }))] })] }));
 }

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

@@ -1,10 +1,27 @@
-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;
     overlaybackdropFilter?: string;
     overlaybackdropInvert?: string;
     overlaybackdropBlur?: string;
     size: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "full";
+    /** Only ModalHeader/ModalBody/ModalFooter render, matched by type one fragment deep; any other sibling is dropped. */
     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;
+    hideCloseButton?: boolean;
+    /** Spread onto ModalContent last, so it overrides `aria-busy` and theme styles. */
+    contentProps?: ModalContentProps;
 };
+/** 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/MoreItems/MoreItems.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
 import { MoreItemsProps } from "./MoreItemsProps";
+/** "+N more" popover trigger for an overflowed list — renders nothing at all once the count reaches 0. */
 declare const MoreItems: React.FC<MoreItemsProps>;
 export default MoreItems;

package/dist/Components/MoreItems/MoreItems.js

@@ -3,15 +3,20 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const rowStates_1 = require("../../Theme/tokens/builders/rowStates");
+const primitives_1 = require("../../Theme/tokens/primitives");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+/** "+N more" popover trigger for an overflowed list — renders nothing at all once the count reaches 0. */
 const MoreItems = ({ items, moreCount, triggerText, colorResolver, hideDots = false, columns = 2, minWidth = "260px", triggerMaxWidth = "250px", trigger = "hover", placement = "bottom-start", }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
+    const countBadgeBg = (0, rowStates_1.listRowBackgrounds)(theme.colors).selected;
     const count = moreCount !== null && moreCount !== void 0 ? moreCount : items.length;
     if (count <= 0)
         return triggerText ? (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: triggerText }) : null;
-    return ((0, jsx_runtime_1.jsxs)(react_1.Popover, { trigger: trigger, placement: placement, isLazy: true, children: [(0, jsx_runtime_1.jsx)(react_1.PopoverTrigger, { children: (0, jsx_runtime_1.jsxs)(react_1.Box, { display: "inline-flex", alignItems: "center", maxW: triggerMaxWidth, cursor: "pointer", children: [triggerText !== undefined && ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: triggerText })), (0, jsx_runtime_1.jsxs)(react_1.Box, { as: "span", ml: "6px", px: "8px", py: "1px", fontSize: "12px", fontWeight: 600, lineHeight: "1.4", borderRadius: "full", color: theme.colors.accentText, bg: theme.colors.primary[50], transition: "all 0.15s ease", _hover: { bg: theme.colors.primary[100] }, children: ["+", count, " more"] })] }) }), (0, jsx_runtime_1.jsxs)(react_1.PopoverContent, { width: "auto", minWidth: minWidth, maxH: "280px", overflowY: "auto", borderRadius: "xl", 
+    return ((0, jsx_runtime_1.jsxs)(react_1.Popover, { trigger: trigger, placement: placement, isLazy: true, children: [(0, jsx_runtime_1.jsx)(react_1.PopoverTrigger, { children: (0, jsx_runtime_1.jsxs)(react_1.Box, { display: "inline-flex", alignItems: "center", maxW: triggerMaxWidth, cursor: "pointer", tabIndex: 0, role: "button", borderRadius: "lg", sx: (0, focusRing_styles_1.focusVisibleStyles)(theme.colors), children: [triggerText !== undefined && ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: triggerText })), (0, jsx_runtime_1.jsxs)(react_1.Box, { as: "span", ml: "6px", px: "8px", py: "1px", fontSize: "12px", fontWeight: 600, lineHeight: "1.4", borderRadius: "full", color: theme.colors.accentText, bg: countBadgeBg, transition: (0, primitives_1.transitionFor)(["background-color"]), _hover: { bg: (0, rowStates_1.listRowBackgrounds)(theme.colors).selectedActive }, children: ["+", count, " more"] })] }) }), (0, jsx_runtime_1.jsxs)(react_1.PopoverContent, { width: "auto", minWidth: minWidth, maxH: "280px", overflowY: "auto", borderRadius: "xl", 
                 // Chakra defaults this surface to `colors.gray.700` in dark, which against the
                 // swapped (dark-inverted) palette is a *light* grey — wrong for a popover bg. Pin it.
-                bg: theme.colors.background[50], boxShadow: "lg", _focus: { outline: "none", boxShadow: "lg" }, children: [(0, jsx_runtime_1.jsx)(react_1.PopoverArrow, { bg: theme.colors.background[50] }), (0, jsx_runtime_1.jsx)(react_1.PopoverBody, { p: 3, children: (0, jsx_runtime_1.jsx)(react_1.SimpleGrid, { columns: columns, spacingX: 4, spacingY: 2, children: items === null || items === void 0 ? void 0 : items.map((item, index) => {
+                bg: theme.colors.surfaceRaised, boxShadow: "lg", _focus: { outline: "none", boxShadow: "lg" }, children: [(0, jsx_runtime_1.jsx)(react_1.PopoverArrow, { bg: theme.colors.surfaceRaised }), (0, jsx_runtime_1.jsx)(react_1.PopoverBody, { p: 3, children: (0, jsx_runtime_1.jsx)(react_1.SimpleGrid, { columns: columns, spacingX: 4, spacingY: 2, children: items === null || items === void 0 ? void 0 : items.map((item, index) => {
                                 var _a, _b, _c;
                                 const color = (_b = (_a = item.color) !== null && _a !== void 0 ? _a : colorResolver === null || colorResolver === void 0 ? void 0 : colorResolver(item)) !== null && _b !== void 0 ? _b : theme.colors.textMuted;
                                 return ((0, jsx_runtime_1.jsxs)(react_1.Box, { display: "flex", alignItems: "center", gap: "8px", minW: 0, children: [!hideDots && ((0, jsx_runtime_1.jsx)(react_1.Box, { flexShrink: 0, width: "8px", height: "8px", borderRadius: "full", bg: color })), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "13px", color: theme.colors.textMuted, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: item.label })] }, (_c = item.id) !== null && _c !== void 0 ? _c : index));

package/dist/Components/MoreItems/MoreItemsProps.d.ts

@@ -1,18 +1,20 @@
 import { ReactNode } from "react";
+/** One row in the MoreItems popover grid — id, label and an optional dot color. */
 export interface MoreItem {
     id: string | number;
     label: string;
     /** Optional leading dot color. Falls back to colorResolver or a neutral gray. */
     color?: string;
 }
+/** Full trigger + popover configuration for MoreItems — see MoreItem for the shape of each listed row. */
 export interface MoreItemsProps {
     /** Items shown inside the popover. */
     items: MoreItem[];
-    /** Number rendered in the "+N more" trigger. Defaults to items.length. */
+    /** Defaults to items.length; ≤0 either way hides the trigger, falling back to bare triggerText or null. */
     moreCount?: number;
     /** Text shown before the "+N more" pill (e.g. the first visible value). */
     triggerText?: ReactNode;
-    /** Derive a dot color per item; takes precedence is given to item.color. */
+    /** Only runs when item.color is unset — item.color always wins over this resolver. */
     colorResolver?: (item: MoreItem) => string | undefined;
     /** Hide the colored leading dot entirely. */
     hideDots?: boolean;

package/dist/Components/MultiSelect/MultiSelect.d.ts

@@ -1,2 +1,2 @@
 import { MultiSelectProps } from "./MultiSelectProps";
-export default function MultiSelect({ value, onValueChange, width, label, isRequired, isInformation, informationMessage, name, id, placeholderText, isDisabled, isReadOnly, size, inputStyle, helperText, error, errorMessage, }: MultiSelectProps): import("react/jsx-runtime").JSX.Element;
+export default function MultiSelect({ value, onValueChange, width, label, isRequired, isInformation, informationMessage, name, id, placeholderText, isDisabled, isReadOnly, addOnBlur, size, inputStyle, helperText, error, errorMessage, }: MultiSelectProps): import("react/jsx-runtime").JSX.Element;

package/dist/Components/MultiSelect/MultiSelect.js

@@ -10,8 +10,12 @@ const react_2 = require("@chakra-ui/react");
 const FormLabel_1 = require("../Common/FormLabel");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const searchSelectSize_1 = require("../SearchSelect/searchSelectSize");
-const ErrorMessage_1 = __importDefault(require("../Common/ErrorMessage"));
-const HelperText_1 = __importDefault(require("../Common/HelperText"));
+const controlSizes_1 = require("../../Theme/tokens/primitives/controlSizes");
+const fieldStyles_1 = require("../Common/fieldStyles");
+const placeholderInk_1 = require("../../Theme/tokens/builders/placeholderInk");
+const motion_1 = require("../../Theme/chakra/motion");
+const useFieldIds_1 = require("../Common/useFieldIds");
+const FieldMessage_1 = __importDefault(require("../Common/FieldMessage"));
 const Tag_1 = __importDefault(require("../Tag/Tag"));
 const lucide_react_1 = require("lucide-react");
 const generateUniqueId = (() => {
@@ -21,13 +25,16 @@ const generateUniqueId = (() => {
         return `${Date.now()}-${counter}`;
     };
 })();
-function MultiSelect({ value, onValueChange, width = "100%", label = "label", isRequired = true, isInformation = false, informationMessage = "", name, id, placeholderText = "Type valid email and press enter", isDisabled, isReadOnly, size = "md", inputStyle, helperText, error, errorMessage, }) {
+function MultiSelect({ value, onValueChange, width = "100%", label = "label", isRequired = true, isInformation = false, informationMessage = "", name, id, placeholderText = "Type valid email and press enter", isDisabled, isReadOnly, addOnBlur = false, size = controlSizes_1.DEFAULT_CONTROL_SIZE, inputStyle, helperText, error, errorMessage, }) {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
-    const s = (0, searchSelectSize_1.getSearchSelectSizeStyles)((size || "md"));
+    const s = (0, searchSelectSize_1.getSearchSelectSizeStyles)((size || controlSizes_1.DEFAULT_CONTROL_SIZE));
     const options = value;
     const [inputValue, setInputValue] = (0, react_1.useState)("");
     const [localError, setLocalError] = (0, react_1.useState)("");
     const inputRef = (0, react_1.useRef)(null);
+    const isInvalid = Boolean(error || localError);
+    const shownErrorMessage = localError || errorMessage;
+    const ids = (0, useFieldIds_1.useFieldIds)(id, { error: isInvalid, errorMessage: shownErrorMessage, helperText });
     const handleInputChange = (0, react_1.useCallback)((e) => {
         setInputValue(e.target.value);
         setLocalError("");
@@ -36,40 +43,45 @@ function MultiSelect({ value, onValueChange, width = "100%", label = "label", is
         const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
         return emailRegex.test(email);
     };
+    const commitInput = (0, react_1.useCallback)(() => {
+        const entry = inputValue.trim();
+        if (entry === "")
+            return;
+        if (!validateEmail(entry)) {
+            setLocalError("Invalid email address");
+            return;
+        }
+        if (!options.some((option) => option.label === entry)) {
+            onValueChange([...options, { id: generateUniqueId(), label: entry }]);
+        }
+        setInputValue("");
+    }, [inputValue, options, onValueChange]);
     const handleKeyDown = (e) => {
-        if (e.key === "Enter" && inputValue.trim() !== "") {
-            if (!validateEmail(inputValue)) {
-                setLocalError("Invalid email address");
+        if (e.key === "Enter") {
+            if (inputValue.trim() === "")
                 return;
-            }
-            const existingOption = options.find((option) => option.label === inputValue);
-            if (!existingOption) {
-                const newOption = { id: generateUniqueId(), label: inputValue };
-                onValueChange([...options, newOption]);
-                setInputValue("");
-            }
+            e.preventDefault();
+            commitInput();
         }
         else if (e.key === "Backspace" && inputValue === "") {
             onValueChange(options.slice(0, -1));
         }
     };
+    const handleBlur = (0, react_1.useCallback)(() => {
+        if (addOnBlur && !isReadOnly && !isDisabled)
+            commitInput();
+    }, [addOnBlur, isReadOnly, isDisabled, commitInput]);
     const handleRemove = (0, react_1.useCallback)((optionToRemove) => {
         onValueChange(options.filter((option) => option.id !== optionToRemove.id));
     }, [options, onValueChange]);
-    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { width: width, children: [label && ((0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), (0, jsx_runtime_1.jsxs)(react_2.Flex, { wrap: "wrap", gap: s.gap, align: "center", px: s.px, border: "0.063rem solid", 
-                // [800], not [500]: WCAG 1.4.11 needs >=3.0 for a control boundary against any named
-                // surface up to `muted` (lightest); [500] fails there, [800] clears all with margin.
-                borderColor: error || localError
-                    ? theme.colors.semanticText.error
-                    : theme.colors.boxborder[500], borderRadius: "lg", bg: theme.colors.gray[50], minH: s.minH, transition: "border-color 0.2s, box-shadow 0.2s", _focusWithin: {
-                    borderColor: error || localError
-                        ? theme.colors.semanticText.error
-                        : theme.colors.primary[500],
-                    boxShadow: `0 0 0 0.125rem ${error || localError
-                        ? theme.colors.boxShadow.error
-                        : theme.colors.boxShadow.primary}`,
-                }, children: [options.map((option) => ((0, jsx_runtime_1.jsx)(Tag_1.default, { size: s.tagSize, colorScheme: "primary", label: option.label, onIconClick: () => handleRemove(option), icon: lucide_react_1.X }, option.id))), (0, jsx_runtime_1.jsx)(react_2.Input, { ref: inputRef, type: "text", value: inputValue, isDisabled: isDisabled, isReadOnly: isReadOnly, id: id, name: name, size: size, variant: "unstyled", h: s.fieldHeight, minH: s.fieldHeight, fontSize: s.fieldFontSize, fontWeight: "500", color: theme.colors.gray[700], letterSpacing: "0.02em", flex: "1", minW: 0, style: {
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { width: width, children: [label && ((0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, id: ids.inputId, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), (0, jsx_runtime_1.jsxs)(react_2.Flex, { wrap: "wrap", gap: s.gap, align: "center", px: s.px, minH: s.minH, sx: {
+                    ...(0, fieldStyles_1.getFieldStateStyles)(theme, { error: isInvalid, disabled: isDisabled }),
+                    ...(0, motion_1.reducedMotionSx)(),
+                }, _hover: isDisabled || isInvalid ? undefined : { borderColor: (0, fieldStyles_1.fieldHoverBorder)(theme.colors) }, _focusWithin: {
+                    borderColor: isInvalid ? theme.colors.semanticText.error : theme.colors.primary[500],
+                    boxShadow: (0, fieldStyles_1.fieldFocusRing)(theme),
+                }, children: [options.map((option) => ((0, jsx_runtime_1.jsx)(Tag_1.default, { size: s.tagSize, colorScheme: "primary", label: option.label, onIconClick: () => handleRemove(option), icon: lucide_react_1.X }, option.id))), (0, jsx_runtime_1.jsx)(react_2.Input, { ref: inputRef, type: "text", value: inputValue, isDisabled: isDisabled, isReadOnly: isReadOnly, isRequired: isRequired, isInvalid: isInvalid, ...ids.controlProps, name: name, size: size, variant: "unstyled", h: s.fieldHeight, minH: s.fieldHeight, fontSize: s.fieldFontSize, fontWeight: 400, color: theme.colors.text[900], flex: "1", minW: 0, _placeholder: { color: (0, placeholderInk_1.placeholderInk)(theme.colors), opacity: 1 }, style: {
                             backgroundColor: "transparent",
                             ...inputStyle,
-                        }, onChange: handleInputChange, onKeyDown: handleKeyDown, placeholder: options.length === 0 ? placeholderText : "" })] }), (error || localError) && ((0, jsx_runtime_1.jsx)(ErrorMessage_1.default, { errorMessage: localError || errorMessage })), helperText && !error && (0, jsx_runtime_1.jsx)(HelperText_1.default, { helperText: helperText })] }));
+                        }, onChange: handleInputChange, onKeyDown: handleKeyDown, onBlur: handleBlur, placeholder: options.length === 0 ? placeholderText : "" })] }), (0, jsx_runtime_1.jsx)(FieldMessage_1.default, { error: isInvalid, errorMessage: shownErrorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }));
 }

package/dist/Components/MultiSelect/MultiSelectProps.d.ts

@@ -1,23 +1,35 @@
+/** No `options` prop — typed text is validated as an email, not picked from a list; use `SearchSelect isMultiple`. */
 export type MultiSelectProps = {
-    value: MultiSelctOPtions[];
-    onValueChange: (options: MultiSelctOPtions[]) => void;
+    value: MultiSelectOption[];
+    onValueChange: (options: MultiSelectOption[]) => void;
     width?: string;
     label?: string;
+    /** DOM id of the input; the label's `for` and the message ids derive from it. Auto-generated when omitted. */
     id?: string;
     name?: string;
+    /** Sets native `required` + `aria-required` on the field, and draws the label asterisk. Defaults to true. */
     isRequired?: boolean;
     isInformation?: boolean;
     informationMessage?: string;
     placeholderText?: string;
     isDisabled?: boolean;
     isReadOnly?: boolean;
+    /** Also commits the typed email when the field loses focus, not just on Enter. Defaults to false. */
+    addOnBlur?: boolean;
+    /** Marks the field invalid (`aria-invalid` + error border) and swaps `helperText` for `errorMessage`; a rejected email sets this internally too. */
     error?: boolean;
+    /** Height on the shared control scale (xs 28 · sm 35 · md 40 · lg 48px). Defaults to `sm`. */
     size?: "xs" | "sm" | "md" | "lg";
     inputStyle?: object;
+    /** Rendered only while `error` is true; a rejected email's internal "Invalid email address" text wins over this until the input changes. */
     errorMessage?: string;
+    /** Hint under the field; hidden while invalid. */
     helperText?: string;
 };
-export type MultiSelctOPtions = {
+/** One entered chip — id is a generated key, label is the email text the user typed. */
+export type MultiSelectOption = {
     id: string;
     label: string;
 };
+/** @deprecated Typo'd name — use `MultiSelectOption`. */
+export type MultiSelctOPtions = MultiSelectOption;