pixelize-design-library 2.4.2-beta.59 → 2.4.2-beta.60

package/dist/esm/Components/CalendarGrid/calendarMath.js

@@ -0,0 +1,155 @@
+const MS_PER_DAY = 86400000;
+export const startOfDay = (d) => new Date(d.getFullYear(), d.getMonth(), d.getDate());
+export const addDays = (d, n) => new Date(d.getFullYear(), d.getMonth(), d.getDate() + n);
+export const addMonths = (d, n) => {
+    const target = new Date(d.getFullYear(), d.getMonth() + n, 1);
+    const lastDay = new Date(target.getFullYear(), target.getMonth() + 1, 0).getDate();
+    return new Date(target.getFullYear(), target.getMonth(), Math.min(d.getDate(), lastDay));
+};
+export const isSameDay = (a, b) => a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+export const dayKey = (d) => `${String(d.getFullYear()).padStart(4, "0")}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
+export const isWeekend = (d) => d.getDay() === 0 || d.getDay() === 6;
+/** Whole calendar days from `a` to `b`, counted on date components so a DST day is still one day. */
+export const diffDays = (a, b) => Math.round((Date.UTC(b.getFullYear(), b.getMonth(), b.getDate()) - Date.UTC(a.getFullYear(), a.getMonth(), a.getDate())) /
+    MS_PER_DAY);
+export const startOfWeek = (d, weekStartsOn) => addDays(d, -((d.getDay() - weekStartsOn + 7) % 7));
+export const weekDays = (d, weekStartsOn) => {
+    const first = startOfWeek(d, weekStartsOn);
+    return Array.from({ length: 7 }, (_, i) => addDays(first, i));
+};
+/** Whole weeks that cover the month of `d`, padded with the neighbouring months' days. */
+export const monthWeeks = (d, weekStartsOn) => {
+    const first = new Date(d.getFullYear(), d.getMonth(), 1);
+    const last = new Date(d.getFullYear(), d.getMonth() + 1, 0);
+    const gridStart = startOfWeek(first, weekStartsOn);
+    const weekCount = Math.ceil((diffDays(gridStart, last) + 1) / 7);
+    return Array.from({ length: weekCount }, (_, w) => Array.from({ length: 7 }, (_, i) => addDays(gridStart, w * 7 + i)));
+};
+export const visibleWeeks = (view, d, weekStartsOn) => {
+    if (view === "month")
+        return monthWeeks(d, weekStartsOn);
+    if (view === "week")
+        return [weekDays(d, weekStartsOn)];
+    return [[startOfDay(d)]];
+};
+export const shiftAnchor = (view, d, direction) => {
+    if (view === "month")
+        return addMonths(d, direction);
+    return addDays(d, view === "week" ? 7 * direction : direction);
+};
+export const eventRange = (e) => {
+    const start = startOfDay(e.start);
+    const end = e.end ? startOfDay(e.end) : start;
+    return end < start ? { start: end, end: start } : { start, end };
+};
+export const eventsOnDay = (events, day) => {
+    const d = startOfDay(day);
+    return events.filter((e) => {
+        const r = eventRange(e);
+        return r.start <= d && d <= r.end;
+    });
+};
+/** Lays events out in lanes across one week row; lanes past `maxLanes` are counted per column, not drawn. */
+export const layoutWeek = (days, events, maxLanes) => {
+    const first = days[0];
+    const lastCol = days.length - 1;
+    const candidates = events
+        .map((event) => {
+        const r = eventRange(event);
+        const rawStart = diffDays(first, r.start);
+        const rawEnd = diffDays(first, r.end);
+        if (rawEnd < 0 || rawStart > lastCol)
+            return null;
+        return {
+            event,
+            rawStart,
+            length: rawEnd - rawStart,
+            startCol: Math.max(0, rawStart),
+            endCol: Math.min(lastCol, rawEnd),
+            continuesBefore: rawStart < 0,
+            continuesAfter: rawEnd > lastCol,
+        };
+    })
+        .filter((c) => c !== null)
+        .sort((a, b) => a.rawStart - b.rawStart ||
+        b.length - a.length ||
+        a.event.label.localeCompare(b.event.label) ||
+        a.event.id.localeCompare(b.event.id));
+    const occupied = [];
+    const segments = [];
+    for (const c of candidates) {
+        let lane = occupied.findIndex((row) => row.slice(c.startCol, c.endCol + 1).every((taken) => !taken));
+        if (lane === -1) {
+            lane = occupied.length;
+            occupied.push(new Array(days.length).fill(false));
+        }
+        for (let col = c.startCol; col <= c.endCol; col += 1)
+            occupied[lane][col] = true;
+        segments.push({
+            event: c.event,
+            startCol: c.startCol,
+            endCol: c.endCol,
+            lane,
+            continuesBefore: c.continuesBefore,
+            continuesAfter: c.continuesAfter,
+        });
+    }
+    const hiddenByCol = new Array(days.length).fill(0);
+    for (const s of segments) {
+        if (s.lane < maxLanes)
+            continue;
+        for (let col = s.startCol; col <= s.endCol; col += 1)
+            hiddenByCol[col] += 1;
+    }
+    return { segments, visibleLanes: Math.min(occupied.length, maxLanes), hiddenByCol };
+};
+export const NAV_KEYS = [
+    "ArrowLeft",
+    "ArrowRight",
+    "ArrowUp",
+    "ArrowDown",
+    "Home",
+    "End",
+    "PageUp",
+    "PageDown",
+];
+export const isNavKey = (key) => NAV_KEYS.includes(key);
+export const moveFocus = (view, d, key, weekStartsOn) => {
+    const columns = view === "day" ? 1 : 7;
+    switch (key) {
+        case "ArrowLeft":
+            return addDays(d, -1);
+        case "ArrowRight":
+            return addDays(d, 1);
+        case "ArrowUp":
+            return addDays(d, -columns);
+        case "ArrowDown":
+            return addDays(d, columns);
+        case "Home":
+            return view === "day" ? d : startOfWeek(d, weekStartsOn);
+        case "End":
+            return view === "day" ? d : addDays(startOfWeek(d, weekStartsOn), 6);
+        case "PageUp":
+            return shiftAnchor(view, d, -1);
+        default:
+            return shiftAnchor(view, d, 1);
+    }
+};
+const probe = (weekday) => new Date(2024, 0, 7 + weekday);
+export const weekdayLabels = (locale, weekStartsOn, style = "short") => {
+    const fmt = new Intl.DateTimeFormat(locale, { weekday: style });
+    return Array.from({ length: 7 }, (_, i) => fmt.format(probe((i + weekStartsOn) % 7)));
+};
+export const formatTitle = (view, d, locale, weekStartsOn) => {
+    if (view === "month")
+        return new Intl.DateTimeFormat(locale, { month: "long", year: "numeric" }).format(d);
+    if (view === "day")
+        return new Intl.DateTimeFormat(locale, { weekday: "long", day: "numeric", month: "long", year: "numeric" }).format(d);
+    const days = weekDays(d, weekStartsOn);
+    const opts = { day: "numeric", month: "short", year: "numeric" };
+    const fmt = new Intl.DateTimeFormat(locale, opts);
+    return typeof fmt.formatRange === "function"
+        ? fmt.formatRange(days[0], days[6])
+        : `${fmt.format(days[0])} - ${fmt.format(days[6])}`;
+};
+export const formatFullDate = (d, locale) => new Intl.DateTimeFormat(locale, { weekday: "long", day: "numeric", month: "long", year: "numeric" }).format(d);

package/dist/esm/Components/CircularProgress/CircularProgress.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Flex, chakra } from "@chakra-ui/react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { resolveSoftTone, toneScale } from "../../Theme/tokens/builders/tone.js";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import { reducedMotionSx } from "../../Theme/chakra/motion.js";
+import { arcGeometry, SIZE_PX, THICKNESS_PX } from "./arc.js";
+const Circle = chakra("circle");
+const LABEL_FONT = {
+    sm: "0.625rem",
+    md: "0.75rem",
+    lg: "1rem",
+};
+const scaleFor = (colors, tone) => tone === "info" ? colors.primary : toneScale(colors, tone);
+/** Ring-shaped determinate progress with a centred label — for a linear bar use ProgressBar. */
+const CircularProgress = ({ value, max = 100, size = "md", thickness, tone = "info", label, "aria-label": ariaLabel, "data-testid": testId, }) => {
+    const { colors } = useCustomTheme();
+    const diameter = SIZE_PX[size];
+    const stroke = thickness !== null && thickness !== void 0 ? thickness : THICKNESS_PX[size];
+    const { radius, circumference, fraction, clamped, safeMax, dashOffset } = arcGeometry(diameter, stroke, value, max);
+    const ink = resolveSoftTone(colors, scaleFor(colors, tone), colors.background[50]).fg;
+    const center = diameter / 2;
+    const valueText = typeof label === "string" || typeof label === "number" ? String(label) : undefined;
+    return (_jsxs(Box, { role: "progressbar", "aria-label": ariaLabel, "aria-valuenow": clamped, "aria-valuemin": 0, "aria-valuemax": safeMax, "aria-valuetext": valueText, "data-testid": testId, position: "relative", display: "inline-flex", flexShrink: 0, boxSize: `${diameter}px`, children: [_jsxs("svg", { width: diameter, height: diameter, viewBox: `0 0 ${diameter} ${diameter}`, "aria-hidden": true, focusable: "false", children: [_jsx(Circle, { cx: center, cy: center, r: radius, fill: "none", sx: { stroke: colors.backgroundColor.subtle, strokeWidth: stroke } }), _jsx(Circle, { cx: center, cy: center, r: radius, fill: "none", "data-testid": testId ? `${testId}-arc` : undefined, sx: {
+                            stroke: ink,
+                            strokeWidth: stroke,
+                            strokeLinecap: "round",
+                            strokeDasharray: circumference,
+                            strokeDashoffset: dashOffset,
+                            strokeOpacity: fraction > 0 ? 1 : 0,
+                            transform: "rotate(-90deg)",
+                            transformOrigin: "50% 50%",
+                            transition: transitionFor(["stroke-dashoffset"]),
+                            ...reducedMotionSx(),
+                        } })] }), label !== undefined && label !== null && (_jsx(Flex, { position: "absolute", inset: 0, align: "center", justify: "center", fontSize: LABEL_FONT[size], fontWeight: 600, lineHeight: 1, color: colors.header[900], sx: { fontVariantNumeric: "tabular-nums" }, children: label }))] }));
+};
+export default CircularProgress;

package/dist/esm/Components/CircularProgress/CircularProgressProps.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/Components/CircularProgress/arc.js

@@ -0,0 +1,11 @@
+export const SIZE_PX = { sm: 32, md: 48, lg: 72 };
+export const THICKNESS_PX = { sm: 4, md: 5, lg: 7 };
+export const clampValue = (value, max) => Number.isFinite(value) ? Math.min(Math.max(value, 0), max) : 0;
+export const arcGeometry = (diameter, thickness, value, max) => {
+    const safeMax = max > 0 ? max : 100;
+    const clamped = clampValue(value, safeMax);
+    const radius = Math.max((diameter - thickness) / 2, 0);
+    const circumference = 2 * Math.PI * radius;
+    const fraction = clamped / safeMax;
+    return { radius, circumference, fraction, clamped, safeMax, dashOffset: circumference * (1 - fraction) };
+};

package/dist/esm/Components/Common/fieldStyles.js

@@ -5,7 +5,8 @@ import { AA_NON_TEXT, liftToContrast } from "../../Theme/tokens/builders/outline
 import { fieldFocusVisible, focusGlowShadow } from "../../Theme/chakra/focusRing.styles.js";
 export const FIELD_RADIUS = "lg";
 export const FIELD_BORDER_WIDTH = "1px";
-export const FIELD_TRANSITION = transitionFor(["border-color", "box-shadow", "background-color"]);
+/** No box-shadow: the focus ring must be present the frame focus lands, not fade in. */
+export const FIELD_TRANSITION = transitionFor(["border-color", "background-color"]);
 /** Chakra `h`/`fontSize`/`px` for a field or select of this size. */
 export const controlSizeStyles = (size) => {
     const spec = CONTROL_SIZES[size];

package/dist/esm/Components/Drawer/Drawer.js

@@ -1,6 +1,7 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { warnDroppedSlotChildren } from "../Modal/warnDroppedSlotChildren.js";
 import { Drawer as ChakraDrawer, DrawerBody as ChakraDrawerBody, DrawerFooter as ChakraDrawerFooter, DrawerHeader as ChakraDrawerHeader, DrawerOverlay, DrawerContent, DrawerCloseButton, } from "@chakra-ui/react";
 export const DrawerHeader = ({ children }) => {
     return _jsx(_Fragment, { children: children });
@@ -27,11 +28,12 @@ const findSlot = (children, slot) => {
     }
     return undefined;
 };
-export default function Drawer({ isOpen, onClose, placement = "right", size = "xl", id, variant, vaiant, initialFocusRef, finalFocusRef, closeOnOverlayClick, closeOnEsc, contentProps, hideCloseButton, children, }) {
+export default function Drawer({ isOpen, onClose, placement = "right", size = "xl", id, variant, vaiant, initialFocusRef, finalFocusRef, closeOnOverlayClick, closeOnEsc, contentProps, hideCloseButton, portalChildren, children, }) {
     var _a, _b;
     const { colors } = useCustomTheme();
     const headerSlot = findSlot(children, DrawerHeader);
     const bodySlot = findSlot(children, DrawerBody);
     const footerSlot = findSlot(children, DrawerFooter);
-    return (_jsxs(ChakraDrawer, { isOpen: isOpen, placement: placement, onClose: onClose, size: size, variant: (_a = variant !== null && variant !== void 0 ? variant : vaiant) !== null && _a !== void 0 ? _a : "solid", id: id, initialFocusRef: initialFocusRef, finalFocusRef: finalFocusRef, closeOnOverlayClick: closeOnOverlayClick, closeOnEsc: closeOnEsc, children: [_jsx(DrawerOverlay, {}), _jsxs(DrawerContent, { ...contentProps, children: [!hideCloseButton && _jsx(DrawerCloseButton, {}), headerSlot && (_jsx(ChakraDrawerHeader, { borderBottomWidth: "1px", borderColor: colors.boxborder[200], ...headerSlot.props, children: headerSlot })), _jsx(ChakraDrawerBody, { ...((_b = bodySlot === null || bodySlot === void 0 ? void 0 : bodySlot.props) !== null && _b !== void 0 ? _b : {}), children: bodySlot }), footerSlot && (_jsx(ChakraDrawerFooter, { borderTopWidth: "1px", borderColor: colors.boxborder[200], ...footerSlot.props, children: footerSlot }))] })] }));
+    warnDroppedSlotChildren("Drawer", children, [DrawerHeader, DrawerBody, DrawerFooter]);
+    return (_jsxs(ChakraDrawer, { isOpen: isOpen, placement: placement, onClose: onClose, size: size, variant: (_a = variant !== null && variant !== void 0 ? variant : vaiant) !== null && _a !== void 0 ? _a : "solid", id: id, initialFocusRef: initialFocusRef, finalFocusRef: finalFocusRef, closeOnOverlayClick: closeOnOverlayClick, closeOnEsc: closeOnEsc, children: [_jsx(DrawerOverlay, {}), _jsxs(DrawerContent, { ...contentProps, children: [!hideCloseButton && _jsx(DrawerCloseButton, {}), headerSlot && (_jsx(ChakraDrawerHeader, { borderBottomWidth: "1px", borderColor: colors.boxborder[200], ...headerSlot.props, children: headerSlot })), _jsx(ChakraDrawerBody, { ...((_b = bodySlot === null || bodySlot === void 0 ? void 0 : bodySlot.props) !== null && _b !== void 0 ? _b : {}), children: bodySlot }), footerSlot && (_jsx(ChakraDrawerFooter, { borderTopWidth: "1px", borderColor: colors.boxborder[200], ...footerSlot.props, children: footerSlot })), portalChildren] })] }));
 }

package/dist/esm/Components/EmptyState/EmptyState.js

@@ -24,6 +24,7 @@ const scaleFor = (colors, scheme) => scheme === "primary" || scheme === "seconda
 const EmptyState = ({ title = "No data found", titleAs = "h3", description, icon: IconComp = Inbox, image, imageAlt = "", size = "md", colorScheme = "primary", variant = "default", action, animate = false, minH = "15rem", sx, }) => {
     const theme = useCustomTheme();
     const s = sizeMap[size];
+    const hasDescription = description !== undefined && description !== null && description !== false && description !== "";
     const palette = scaleFor(theme.colors, colorScheme);
     const tone = resolveSoftTone(theme.colors, palette, theme.colors.background[50]);
     const accentSoft = tone.bg;
@@ -46,6 +47,6 @@ const EmptyState = ({ title = "No data found", titleAs = "h3", description, icon
                     bg: accentSoft,
                     opacity: HALO_OPACITY,
                     zIndex: -1,
-                }, sx: reducedMotionSx(), children: _jsx(IconComp, { size: s.icon, strokeWidth: 1.75, "aria-hidden": true }) })), _jsxs(Box, { children: [_jsx(Text, { as: titleAs, fontSize: s.title, fontWeight: 600, color: theme.colors.header[900], mt: 1, children: title }), description && (_jsx(Text, { fontSize: s.desc, color: theme.colors.textMuted, mt: 1, maxW: "23.75rem", children: description }))] }), action && (_jsx(Flex, { gap: 3, mt: 2, wrap: "wrap", justify: "center", children: action }))] }));
+                }, sx: reducedMotionSx(), children: _jsx(IconComp, { size: s.icon, strokeWidth: 1.75, "aria-hidden": true }) })), _jsxs(Box, { children: [_jsx(Text, { as: titleAs, fontSize: s.title, fontWeight: 600, color: theme.colors.header[900], mt: 1, children: title }), hasDescription && (_jsx(Text, { as: typeof description === "string" ? undefined : "div", fontSize: s.desc, color: theme.colors.textMuted, mt: 1, maxW: "23.75rem", children: description }))] }), action && (_jsx(Flex, { gap: 3, mt: 2, wrap: "wrap", justify: "center", children: action }))] }));
 };
 export default EmptyState;

package/dist/esm/Components/FormDrawer/FormDrawer.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment, useEffect, useId, useRef, useState } from "react";
+import { Alert, AlertDescription, AlertIcon, AlertTitle, Box, Divider, Flex, Heading, ListItem, Text, UnorderedList, } from "@chakra-ui/react";
+import Drawer, { DrawerBody, DrawerFooter, DrawerHeader } from "../Drawer/Drawer.js";
+import AlertDialog from "../AlertDialog/AlertDialog.js";
+import Button from "../Button/Button.js";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+const DEFAULT_LABELS = {
+    fixErrors: "Please fix the following before saving",
+    discardTitle: "Discard changes?",
+    discardBody: "You have unsaved changes. If you close now, they will be lost.",
+    discard: "Discard",
+    keepEditing: "Keep editing",
+};
+export default function FormDrawer({ isOpen, onClose, title, description, sections, errors = [], isDirty, onSubmit, isSubmitting = false, submitLabel = "Save", cancelLabel = "Cancel", secondaryAction, size = "md", labels, "data-testid": testId = "form-drawer", }) {
+    const { colors } = useCustomTheme();
+    const uid = useId();
+    const formId = `${uid}-form`;
+    const titleId = `${uid}-title`;
+    const text = { ...DEFAULT_LABELS, ...labels };
+    const [confirmDiscard, setConfirmDiscard] = useState(false);
+    const [attempt, setAttempt] = useState(0);
+    const keepEditingRef = useRef(null);
+    const summaryRef = useRef(null);
+    const focusPending = useRef(false);
+    useEffect(() => {
+        if (!isOpen)
+            setConfirmDiscard(false);
+    }, [isOpen]);
+    useEffect(() => {
+        var _a;
+        if (!focusPending.current || isSubmitting)
+            return;
+        focusPending.current = false;
+        if (errors.length)
+            (_a = summaryRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, [attempt, errors, isSubmitting]);
+    const requestClose = () => {
+        if (isSubmitting)
+            return;
+        if (isDirty)
+            setConfirmDiscard(true);
+        else
+            onClose();
+    };
+    const submit = (event) => {
+        event.preventDefault();
+        if (isSubmitting)
+            return;
+        focusPending.current = true;
+        setAttempt((n) => n + 1);
+        onSubmit();
+    };
+    return (_jsxs(Drawer, { isOpen: isOpen, onClose: requestClose, size: size, closeOnEsc: !isSubmitting, closeOnOverlayClick: !isSubmitting, portalChildren: _jsx(AlertDialog, { isOpen: confirmDiscard, onClose: () => setConfirmDiscard(false), leastDestructiveRef: keepEditingRef, isCentered: true, tone: "danger", title: text.discardTitle, content: _jsx(Text, { fontSize: "sm", color: colors.text[800], children: text.discardBody }), cancelButtonText: text.keepEditing, confirmButtonText: text.discard, onConfirm: () => {
+                setConfirmDiscard(false);
+                onClose();
+            } }), children: [_jsxs(DrawerHeader, { children: [_jsx(Heading, { id: titleId, as: "h2", fontSize: "md", fontWeight: 600, color: colors.header[900], children: title }), description ? (_jsx(Text, { mt: 0.5, fontSize: "sm", fontWeight: 400, color: colors.textMuted, children: description })) : null] }), _jsx(DrawerBody, { children: _jsx(Box, { as: "form", id: formId, "aria-labelledby": titleId, onSubmit: submit, noValidate: true, "data-testid": testId, children: _jsxs(Flex, { direction: "column", gap: 5, pt: 2, children: [errors.length ? (_jsxs(Alert, { ref: summaryRef, tabIndex: -1, status: "error", variant: "subtle", borderRadius: "md", alignItems: "flex-start", "data-testid": `${testId}-errors`, children: [_jsx(AlertIcon, {}), _jsxs(Box, { children: [_jsx(AlertTitle, { fontSize: "sm", children: text.fixErrors }), _jsx(AlertDescription, { fontSize: "sm", children: _jsx(UnorderedList, { mt: 1, children: errors.map((message) => (_jsx(ListItem, { children: message }, message))) }) })] })] })) : null, sections.map((section, index) => (_jsxs(Fragment, { children: [index > 0 ? _jsx(Divider, { borderColor: colors.boxborder[200] }) : null, _jsxs(Flex, { as: "section", direction: "column", gap: 4, "aria-label": section.title, children: [section.title ? (_jsxs(Box, { children: [_jsx(Heading, { as: "h3", fontSize: "sm", fontWeight: 600, color: colors.header[900], children: section.title }), section.description ? (_jsx(Text, { mt: 0.5, fontSize: "xs", color: colors.textMuted, children: section.description })) : null] })) : null, section.content] })] }, section.id)))] }) }) }), _jsx(DrawerFooter, { children: _jsxs(Flex, { gap: 2, w: "100%", justify: "flex-end", wrap: "wrap", children: [secondaryAction, _jsx(Button, { variant: "ghost", colorScheme: "gray", onClick: requestClose, isDisabled: isSubmitting, label: cancelLabel }), _jsx(Button, { variant: "solid", colorScheme: "primary", type: "submit", form: formId, isLoading: isSubmitting, loadingText: submitLabel, label: submitLabel, "data-testid": `${testId}-submit` })] }) })] }));
+}

package/dist/esm/Components/FormDrawer/FormDrawerProps.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/Components/LauncherTrigger/LauncherTrigger.js

@@ -8,6 +8,7 @@ import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
 import { useMatchMedia } from "../../Hooks/useMatchMedia.js";
 import { detectApple } from "../Kbd/Kbd.js";
 import { formatShortcut } from "../AppSwitcher/AppSwitcherProps.js";
+import ToolTip from "../ToolTip/ToolTip.js";
 const MD_QUERY = "(min-width: 48em)";
 const KEY_NAMES = {
     mod: ["Meta", "Control"],
@@ -27,11 +28,14 @@ export const keyShortcutsFor = (shortcut) => {
     const chords = Array.from({ length: variants }, (_, v) => options.map((o) => o[Math.min(v, o.length - 1)]).join("+"));
     return Array.from(new Set(chords)).join(" ");
 };
-const LauncherTrigger = ({ onClick, isOpen, label = "Menu", shortcut = "mod+k", icon: Icon = Compass, "aria-label": ariaLabel, "data-testid": testId, }) => {
+const LauncherTrigger = ({ onClick, isOpen, label = "Menu", shortcut = "mod+k", icon: Icon = Compass, display = "chip", "aria-label": ariaLabel, "data-testid": testId, }) => {
     const { colors } = useCustomTheme();
     const showHint = useMatchMedia(MD_QUERY, true);
     const ring = focusVisibleRing(colors);
     const hint = shortcut ? formatShortcut(shortcut, detectApple()) : "";
+    if (display === "icon") {
+        return (_jsx(ToolTip, { label: hint ? `${label} (${hint})` : label, placement: "bottom", children: _jsx(Box, { as: "button", type: "button", "data-testid": testId, onClick: onClick, "aria-haspopup": "dialog", "aria-expanded": isOpen, "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : label, "aria-keyshortcuts": shortcut ? keyShortcutsFor(shortcut) : undefined, display: "inline-flex", alignItems: "center", justifyContent: "center", flexShrink: 0, w: "36px", h: "36px", borderRadius: "10px", borderWidth: "1px", borderColor: colors.primary[100], bg: colors.primary[50], color: colors.accentText, cursor: "pointer", transition: transitionFor(["background-color", "border-color", "box-shadow"]), _hover: { borderColor: colors.primary[300] }, sx: { _focusVisible: ring, [FOCUS_VISIBLE_OVER_STATE]: ring, ...reducedMotionSx() }, children: _jsx(Icon, { size: 17, "aria-hidden": "true" }) }) }));
+    }
     return (_jsxs(Box, { as: "button", type: "button", "data-testid": testId, onClick: onClick, "aria-haspopup": "dialog", "aria-expanded": isOpen, "aria-label": ariaLabel, "aria-keyshortcuts": shortcut ? keyShortcutsFor(shortcut) : undefined, display: "inline-flex", alignItems: "center", gap: 2, flexShrink: 0, h: "2.25rem", pl: "0.625rem", pr: "0.375rem", borderRadius: "10px", borderWidth: "1px", borderColor: colors.primary[100], bg: colors.primary[50], color: colors.accentText, fontSize: "0.84375rem", fontWeight: 600, lineHeight: 1, cursor: "pointer", transition: transitionFor(["background-color", "border-color", "box-shadow"]), _hover: { borderColor: colors.primary[300] }, sx: { _focusVisible: ring, [FOCUS_VISIBLE_OVER_STATE]: ring, ...reducedMotionSx() }, children: [_jsxs(Box, { as: "span", display: "inline-flex", alignItems: "center", gap: 2, "aria-hidden": ariaLabel ? true : undefined, children: [_jsx(Icon, { size: 17, "aria-hidden": "true" }), _jsx("span", { children: label })] }), hint && showHint && (_jsx(Box, { as: "kbd", "aria-hidden": "true", fontFamily: "inherit", fontSize: "0.6875rem", fontWeight: 600, lineHeight: "normal", px: "6px", py: "2px", borderRadius: "6px", borderWidth: "1px", borderColor: colors.primary[100], bg: colors.surfaceRaised, children: hint }))] }));
 };
 export default LauncherTrigger;

package/dist/esm/Components/Modal/Modal.js

@@ -2,6 +2,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 import React from "react";
 import { Modal as ChakraModal, ModalOverlay, ModalContent, ModalHeader as ChakraModalHeader, ModalCloseButton, ModalBody as ChakraModalBody, ModalFooter as ChakraModalFooter, Flex, Spinner, Text, } from "@chakra-ui/react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { warnDroppedSlotChildren } from "./warnDroppedSlotChildren.js";
 export const ModalHeader = ({ children }) => {
     return _jsx(_Fragment, { children: children });
 };
@@ -27,12 +28,13 @@ const findSlot = (children, slot) => {
     }
     return undefined;
 };
-export default 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, }) {
+export default 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 } = useCustomTheme();
     const headerSlot = findSlot(children, ModalHeader);
     const bodySlot = findSlot(children, ModalBody);
     const footerSlot = findSlot(children, ModalFooter);
+    warnDroppedSlotChildren("Modal", children, [ModalHeader, ModalBody, ModalFooter]);
     const headerContent = headerSlot !== null && headerSlot !== void 0 ? headerSlot : title;
-    return (_jsxs(ChakraModal, { 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: [_jsx(ModalOverlay, { bg: overlaybg, backdropFilter: overlaybackdropFilter, backdropInvert: overlaybackdropInvert, backdropBlur: overlaybackdropBlur }), _jsxs(ModalContent, { "aria-busy": isLoading || undefined, ...contentProps, children: [(headerContent || subtitle) && (_jsxs(ChakraModalHeader, { ...((_a = headerSlot === null || headerSlot === void 0 ? void 0 : headerSlot.props) !== null && _a !== void 0 ? _a : {}), children: [headerContent, subtitle && (_jsx(Text, { as: "div", mt: 0.5, fontSize: "0.875rem", fontWeight: 400, color: colors.textMuted, children: subtitle }))] })), !hideCloseButton && _jsx(ModalCloseButton, {}), isLoading ? (_jsx(Flex, { role: "status", "aria-label": "Loading", justify: "center", align: "center", py: 16, children: _jsx(Spinner, { thickness: "4px", speed: "0.65s", emptyColor: colors.boxborder[200], color: colors.accentText, size: "xl" }) })) : (_jsxs(_Fragment, { children: [_jsx(ChakraModalBody, { ...((_b = bodySlot === null || bodySlot === void 0 ? void 0 : bodySlot.props) !== null && _b !== void 0 ? _b : {}), children: bodySlot }), footerSlot && (_jsx(ChakraModalFooter, { ...footerSlot.props, children: footerSlot }))] }))] })] }));
+    return (_jsxs(ChakraModal, { 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: [_jsx(ModalOverlay, { bg: overlaybg, backdropFilter: overlaybackdropFilter, backdropInvert: overlaybackdropInvert, backdropBlur: overlaybackdropBlur }), _jsxs(ModalContent, { "aria-busy": isLoading || undefined, ...contentProps, children: [(headerContent || subtitle) && (_jsxs(ChakraModalHeader, { ...((_a = headerSlot === null || headerSlot === void 0 ? void 0 : headerSlot.props) !== null && _a !== void 0 ? _a : {}), children: [headerContent, subtitle && (_jsx(Text, { as: "div", mt: 0.5, fontSize: "0.875rem", fontWeight: 400, color: colors.textMuted, children: subtitle }))] })), !hideCloseButton && _jsx(ModalCloseButton, {}), isLoading ? (_jsx(Flex, { role: "status", "aria-label": "Loading", justify: "center", align: "center", py: 16, children: _jsx(Spinner, { thickness: "4px", speed: "0.65s", emptyColor: colors.boxborder[200], color: colors.accentText, size: "xl" }) })) : (_jsxs(_Fragment, { children: [_jsx(ChakraModalBody, { ...((_b = bodySlot === null || bodySlot === void 0 ? void 0 : bodySlot.props) !== null && _b !== void 0 ? _b : {}), children: bodySlot }), footerSlot && (_jsx(ChakraModalFooter, { ...footerSlot.props, children: footerSlot }))] })), portalChildren] })] }));
 }

package/dist/esm/Components/Modal/warnDroppedSlotChildren.js

@@ -0,0 +1,38 @@
+import React from "react";
+const warned = new Set();
+const nameOf = (type) => {
+    if (typeof type === "string")
+        return type;
+    const fn = type;
+    return (fn === null || fn === void 0 ? void 0 : fn.displayName) || (fn === null || fn === void 0 ? void 0 : fn.name) || "Component";
+};
+const collect = (children, slots, dropped) => {
+    for (const child of React.Children.toArray(children)) {
+        if (typeof child === "string" || typeof child === "number") {
+            if (String(child).trim())
+                dropped.set("#text", "text");
+            continue;
+        }
+        if (!React.isValidElement(child))
+            continue;
+        if (slots.includes(child.type))
+            continue;
+        if (child.type === React.Fragment) {
+            collect(child.props.children, slots, dropped);
+            continue;
+        }
+        dropped.set(child.type, nameOf(child.type));
+    }
+};
+export const warnDroppedSlotChildren = (owner, children, slots) => {
+    if (process.env.NODE_ENV === "production")
+        return;
+    const dropped = new Map();
+    collect(children, slots, dropped);
+    dropped.forEach((name, type) => {
+        if (warned.has(type))
+            return;
+        warned.add(type);
+        console.warn(`[pixelize-design-library] ${owner}: <${name}> is not a ${owner}Header/${owner}Body/${owner}Footer slot and was dropped. Pass nested dialogs and live regions through the portalChildren prop.`);
+    });
+};