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

package/dist/Components/CalendarGrid/calendarMath.js

@@ -0,0 +1,178 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.formatFullDate = exports.formatTitle = exports.weekdayLabels = exports.moveFocus = exports.isNavKey = exports.NAV_KEYS = exports.layoutWeek = exports.eventsOnDay = exports.eventRange = exports.shiftAnchor = exports.visibleWeeks = exports.monthWeeks = exports.weekDays = exports.startOfWeek = exports.diffDays = exports.isWeekend = exports.dayKey = exports.isSameDay = exports.addMonths = exports.addDays = exports.startOfDay = void 0;
+const MS_PER_DAY = 86400000;
+const startOfDay = (d) => new Date(d.getFullYear(), d.getMonth(), d.getDate());
+exports.startOfDay = startOfDay;
+const addDays = (d, n) => new Date(d.getFullYear(), d.getMonth(), d.getDate() + n);
+exports.addDays = addDays;
+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));
+};
+exports.addMonths = addMonths;
+const isSameDay = (a, b) => a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+exports.isSameDay = isSameDay;
+const dayKey = (d) => `${String(d.getFullYear()).padStart(4, "0")}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
+exports.dayKey = dayKey;
+const isWeekend = (d) => d.getDay() === 0 || d.getDay() === 6;
+exports.isWeekend = isWeekend;
+/** Whole calendar days from `a` to `b`, counted on date components so a DST day is still one day. */
+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);
+exports.diffDays = diffDays;
+const startOfWeek = (d, weekStartsOn) => (0, exports.addDays)(d, -((d.getDay() - weekStartsOn + 7) % 7));
+exports.startOfWeek = startOfWeek;
+const weekDays = (d, weekStartsOn) => {
+    const first = (0, exports.startOfWeek)(d, weekStartsOn);
+    return Array.from({ length: 7 }, (_, i) => (0, exports.addDays)(first, i));
+};
+exports.weekDays = weekDays;
+/** Whole weeks that cover the month of `d`, padded with the neighbouring months' days. */
+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 = (0, exports.startOfWeek)(first, weekStartsOn);
+    const weekCount = Math.ceil(((0, exports.diffDays)(gridStart, last) + 1) / 7);
+    return Array.from({ length: weekCount }, (_, w) => Array.from({ length: 7 }, (_, i) => (0, exports.addDays)(gridStart, w * 7 + i)));
+};
+exports.monthWeeks = monthWeeks;
+const visibleWeeks = (view, d, weekStartsOn) => {
+    if (view === "month")
+        return (0, exports.monthWeeks)(d, weekStartsOn);
+    if (view === "week")
+        return [(0, exports.weekDays)(d, weekStartsOn)];
+    return [[(0, exports.startOfDay)(d)]];
+};
+exports.visibleWeeks = visibleWeeks;
+const shiftAnchor = (view, d, direction) => {
+    if (view === "month")
+        return (0, exports.addMonths)(d, direction);
+    return (0, exports.addDays)(d, view === "week" ? 7 * direction : direction);
+};
+exports.shiftAnchor = shiftAnchor;
+const eventRange = (e) => {
+    const start = (0, exports.startOfDay)(e.start);
+    const end = e.end ? (0, exports.startOfDay)(e.end) : start;
+    return end < start ? { start: end, end: start } : { start, end };
+};
+exports.eventRange = eventRange;
+const eventsOnDay = (events, day) => {
+    const d = (0, exports.startOfDay)(day);
+    return events.filter((e) => {
+        const r = (0, exports.eventRange)(e);
+        return r.start <= d && d <= r.end;
+    });
+};
+exports.eventsOnDay = eventsOnDay;
+/** Lays events out in lanes across one week row; lanes past `maxLanes` are counted per column, not drawn. */
+const layoutWeek = (days, events, maxLanes) => {
+    const first = days[0];
+    const lastCol = days.length - 1;
+    const candidates = events
+        .map((event) => {
+        const r = (0, exports.eventRange)(event);
+        const rawStart = (0, exports.diffDays)(first, r.start);
+        const rawEnd = (0, exports.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 };
+};
+exports.layoutWeek = layoutWeek;
+exports.NAV_KEYS = [
+    "ArrowLeft",
+    "ArrowRight",
+    "ArrowUp",
+    "ArrowDown",
+    "Home",
+    "End",
+    "PageUp",
+    "PageDown",
+];
+const isNavKey = (key) => exports.NAV_KEYS.includes(key);
+exports.isNavKey = isNavKey;
+const moveFocus = (view, d, key, weekStartsOn) => {
+    const columns = view === "day" ? 1 : 7;
+    switch (key) {
+        case "ArrowLeft":
+            return (0, exports.addDays)(d, -1);
+        case "ArrowRight":
+            return (0, exports.addDays)(d, 1);
+        case "ArrowUp":
+            return (0, exports.addDays)(d, -columns);
+        case "ArrowDown":
+            return (0, exports.addDays)(d, columns);
+        case "Home":
+            return view === "day" ? d : (0, exports.startOfWeek)(d, weekStartsOn);
+        case "End":
+            return view === "day" ? d : (0, exports.addDays)((0, exports.startOfWeek)(d, weekStartsOn), 6);
+        case "PageUp":
+            return (0, exports.shiftAnchor)(view, d, -1);
+        default:
+            return (0, exports.shiftAnchor)(view, d, 1);
+    }
+};
+exports.moveFocus = moveFocus;
+const probe = (weekday) => new Date(2024, 0, 7 + weekday);
+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)));
+};
+exports.weekdayLabels = weekdayLabels;
+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 = (0, exports.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])}`;
+};
+exports.formatTitle = formatTitle;
+const formatFullDate = (d, locale) => new Intl.DateTimeFormat(locale, { weekday: "long", day: "numeric", month: "long", year: "numeric" }).format(d);
+exports.formatFullDate = formatFullDate;

package/dist/Components/CircularProgress/CircularProgress.d.ts

@@ -0,0 +1,4 @@
+import type { CircularProgressProps } from "./CircularProgressProps";
+/** Ring-shaped determinate progress with a centred label — for a linear bar use ProgressBar. */
+declare const CircularProgress: ({ value, max, size, thickness, tone, label, "aria-label": ariaLabel, "data-testid": testId, }: CircularProgressProps) => import("react/jsx-runtime").JSX.Element;
+export default CircularProgress;

package/dist/Components/CircularProgress/CircularProgress.js

@@ -0,0 +1,39 @@
+"use strict";
+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 tone_1 = require("../../Theme/tokens/builders/tone");
+const motion_1 = require("../../Theme/tokens/primitives/motion");
+const motion_2 = require("../../Theme/chakra/motion");
+const arc_1 = require("./arc");
+const Circle = (0, react_1.chakra)("circle");
+const LABEL_FONT = {
+    sm: "0.625rem",
+    md: "0.75rem",
+    lg: "1rem",
+};
+const scaleFor = (colors, tone) => tone === "info" ? colors.primary : (0, tone_1.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 } = (0, useCustomTheme_1.useCustomTheme)();
+    const diameter = arc_1.SIZE_PX[size];
+    const stroke = thickness !== null && thickness !== void 0 ? thickness : arc_1.THICKNESS_PX[size];
+    const { radius, circumference, fraction, clamped, safeMax, dashOffset } = (0, arc_1.arcGeometry)(diameter, stroke, value, max);
+    const ink = (0, tone_1.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 ((0, jsx_runtime_1.jsxs)(react_1.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: [(0, jsx_runtime_1.jsxs)("svg", { width: diameter, height: diameter, viewBox: `0 0 ${diameter} ${diameter}`, "aria-hidden": true, focusable: "false", children: [(0, jsx_runtime_1.jsx)(Circle, { cx: center, cy: center, r: radius, fill: "none", sx: { stroke: colors.backgroundColor.subtle, strokeWidth: stroke } }), (0, jsx_runtime_1.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: (0, motion_1.transitionFor)(["stroke-dashoffset"]),
+                            ...(0, motion_2.reducedMotionSx)(),
+                        } })] }), label !== undefined && label !== null && ((0, jsx_runtime_1.jsx)(react_1.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 }))] }));
+};
+exports.default = CircularProgress;

package/dist/Components/CircularProgress/CircularProgressProps.d.ts

@@ -0,0 +1,22 @@
+import type { ReactNode } from "react";
+import type { Tone } from "../../Theme/tokens/builders/tone";
+/** Diameter preset: sm 32px, md 48px, lg 72px. */
+export type CircularProgressSize = "sm" | "md" | "lg";
+/** Props for the SVG ring CircularProgress; the arc starts at 12 o'clock and fills clockwise. */
+export interface CircularProgressProps {
+    /** Current progress, clamped to 0..max. */
+    value: number;
+    /** Upper bound of the range; default 100. */
+    max?: number;
+    /** Diameter preset (32 / 48 / 72px); default "md". */
+    size?: CircularProgressSize;
+    /** Ring stroke in px; defaults by size (4 / 5 / 7). */
+    thickness?: number;
+    /** Fill colour; default "info", which paints the brand primary rather than blue. */
+    tone?: Tone;
+    /** Centred content such as "7/10"; a string or number is also spoken as aria-valuetext. */
+    label?: ReactNode;
+    /** Required accessible name; the ring has no visible caption of its own. */
+    "aria-label": string;
+    "data-testid"?: string;
+}

package/dist/Components/CircularProgress/CircularProgressProps.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/CircularProgress/arc.d.ts

@@ -0,0 +1,12 @@
+import type { CircularProgressSize } from "./CircularProgressProps";
+export declare const SIZE_PX: Record<CircularProgressSize, number>;
+export declare const THICKNESS_PX: Record<CircularProgressSize, number>;
+export declare const clampValue: (value: number, max: number) => number;
+export declare const arcGeometry: (diameter: number, thickness: number, value: number, max: number) => {
+    radius: number;
+    circumference: number;
+    fraction: number;
+    clamped: number;
+    safeMax: number;
+    dashOffset: number;
+};

package/dist/Components/CircularProgress/arc.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.arcGeometry = exports.clampValue = exports.THICKNESS_PX = exports.SIZE_PX = void 0;
+exports.SIZE_PX = { sm: 32, md: 48, lg: 72 };
+exports.THICKNESS_PX = { sm: 4, md: 5, lg: 7 };
+const clampValue = (value, max) => Number.isFinite(value) ? Math.min(Math.max(value, 0), max) : 0;
+exports.clampValue = clampValue;
+const arcGeometry = (diameter, thickness, value, max) => {
+    const safeMax = max > 0 ? max : 100;
+    const clamped = (0, exports.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) };
+};
+exports.arcGeometry = arcGeometry;

package/dist/Components/Common/fieldStyles.d.ts

@@ -4,6 +4,7 @@ import type { PaletteProps } from "../../Theme/tokens/types";
 import { type ControlSize } from "../../Theme/tokens/primitives/controlSizes";
 export declare const FIELD_RADIUS = "lg";
 export declare const FIELD_BORDER_WIDTH = "1px";
+/** No box-shadow: the focus ring must be present the frame focus lands, not fade in. */
 export declare const FIELD_TRANSITION: string;
 /** Chakra `h`/`fontSize`/`px` for a field or select of this size. */
 export declare const controlSizeStyles: (size: ControlSize) => {

package/dist/Components/Common/fieldStyles.js

@@ -8,7 +8,8 @@ const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
 const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
 exports.FIELD_RADIUS = "lg";
 exports.FIELD_BORDER_WIDTH = "1px";
-exports.FIELD_TRANSITION = (0, motion_1.transitionFor)(["border-color", "box-shadow", "background-color"]);
+/** No box-shadow: the focus ring must be present the frame focus lands, not fade in. */
+exports.FIELD_TRANSITION = (0, motion_1.transitionFor)(["border-color", "background-color"]);
 /** Chakra `h`/`fontSize`/`px` for a field or select of this size. */
 const controlSizeStyles = (size) => {
     const spec = controlSizes_1.CONTROL_SIZES[size];

package/dist/Components/Drawer/Drawer.d.ts

@@ -3,4 +3,4 @@ import { DrawerProps, DrawerHeaderSlotProps, DrawerBodySlotProps, DrawerFooterSl
 export declare const DrawerHeader: React.FC<DrawerHeaderSlotProps>;
 export declare const DrawerBody: React.FC<DrawerBodySlotProps>;
 export declare const DrawerFooter: React.FC<DrawerFooterSlotProps>;
-export default function Drawer({ isOpen, onClose, placement, size, id, variant, vaiant, initialFocusRef, finalFocusRef, closeOnOverlayClick, closeOnEsc, contentProps, hideCloseButton, children, }: DrawerProps): import("react/jsx-runtime").JSX.Element;
+export default function Drawer({ isOpen, onClose, placement, size, id, variant, vaiant, initialFocusRef, finalFocusRef, closeOnOverlayClick, closeOnEsc, contentProps, hideCloseButton, portalChildren, children, }: DrawerProps): import("react/jsx-runtime").JSX.Element;

package/dist/Components/Drawer/Drawer.js

@@ -8,6 +8,7 @@ exports.default = Drawer;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importDefault(require("react"));
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const warnDroppedSlotChildren_1 = require("../Modal/warnDroppedSlotChildren");
 const react_2 = require("@chakra-ui/react");
 const DrawerHeader = ({ children }) => {
     return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
@@ -37,11 +38,12 @@ const findSlot = (children, slot) => {
     }
     return undefined;
 };
-function Drawer({ isOpen, onClose, placement = "right", size = "xl", id, variant, vaiant, initialFocusRef, finalFocusRef, closeOnOverlayClick, closeOnEsc, contentProps, hideCloseButton, children, }) {
+function Drawer({ isOpen, onClose, placement = "right", size = "xl", id, variant, vaiant, initialFocusRef, finalFocusRef, closeOnOverlayClick, closeOnEsc, contentProps, hideCloseButton, portalChildren, children, }) {
     var _a, _b;
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const headerSlot = findSlot(children, exports.DrawerHeader);
     const bodySlot = findSlot(children, exports.DrawerBody);
     const footerSlot = findSlot(children, exports.DrawerFooter);
-    return ((0, jsx_runtime_1.jsxs)(react_2.Drawer, { 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: [(0, jsx_runtime_1.jsx)(react_2.DrawerOverlay, {}), (0, jsx_runtime_1.jsxs)(react_2.DrawerContent, { ...contentProps, children: [!hideCloseButton && (0, jsx_runtime_1.jsx)(react_2.DrawerCloseButton, {}), headerSlot && ((0, jsx_runtime_1.jsx)(react_2.DrawerHeader, { borderBottomWidth: "1px", borderColor: colors.boxborder[200], ...headerSlot.props, children: headerSlot })), (0, jsx_runtime_1.jsx)(react_2.DrawerBody, { ...((_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.DrawerFooter, { borderTopWidth: "1px", borderColor: colors.boxborder[200], ...footerSlot.props, children: footerSlot }))] })] }));
+    (0, warnDroppedSlotChildren_1.warnDroppedSlotChildren)("Drawer", children, [exports.DrawerHeader, exports.DrawerBody, exports.DrawerFooter]);
+    return ((0, jsx_runtime_1.jsxs)(react_2.Drawer, { 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: [(0, jsx_runtime_1.jsx)(react_2.DrawerOverlay, {}), (0, jsx_runtime_1.jsxs)(react_2.DrawerContent, { ...contentProps, children: [!hideCloseButton && (0, jsx_runtime_1.jsx)(react_2.DrawerCloseButton, {}), headerSlot && ((0, jsx_runtime_1.jsx)(react_2.DrawerHeader, { borderBottomWidth: "1px", borderColor: colors.boxborder[200], ...headerSlot.props, children: headerSlot })), (0, jsx_runtime_1.jsx)(react_2.DrawerBody, { ...((_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.DrawerFooter, { borderTopWidth: "1px", borderColor: colors.boxborder[200], ...footerSlot.props, children: footerSlot })), portalChildren] })] }));
 }

package/dist/Components/Drawer/DrawerProps.d.ts

@@ -1,5 +1,5 @@
 import { DrawerProps as ChakraDrawerProps, DrawerContentProps, ModalHeaderProps, ModalBodyProps, ModalFooterProps } from "@chakra-ui/react";
-/** Only DrawerHeader/Body/Footer children render, matched by type one fragment deep; any other sibling is dropped. */
+/** Only DrawerHeader/Body/Footer children render, matched by type one fragment deep; any other child is dropped (dev console.warn) — use `portalChildren`. */
 export type DrawerProps = Pick<ChakraDrawerProps, "isOpen" | "onClose" | "placement" | "size" | "id" | "variant" | "initialFocusRef" | "finalFocusRef" | "closeOnOverlayClick" | "closeOnEsc"> & {
     /** Defaults to "xl". */
     size?: "xs" | "sm" | "md" | "lg" | "xl" | "full";
@@ -12,6 +12,8 @@ export type DrawerProps = Pick<ChakraDrawerProps, "isOpen" | "onClose" | "placem
     contentProps?: DrawerContentProps;
     /** Drops the built-in close button, for a drawer dismissed only by its own footer action. */
     hideCloseButton?: boolean;
+    /** Rendered inside the drawer's dialog after the slots (so live regions stay announced); nested dialogs portal out and keep focus here. Unmounts with the drawer. */
+    portalChildren?: React.ReactNode;
 };
 /** Chakra style props (padding, borderBottom, gap, sx, ...) spread onto the rendered DrawerHeader; omit to keep theme defaults. Chakra's Drawer reuses Modal's header part internally. */
 export type DrawerHeaderSlotProps = ModalHeaderProps;

package/dist/Components/EmptyState/EmptyState.js

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

package/dist/Components/EmptyState/EmptyStateProps.d.ts

@@ -10,8 +10,8 @@ export interface EmptyStateProps {
     title?: string;
     /** Heading element for the title; defaults to "h3" — pick the level that fits the page outline. */
     titleAs?: "h2" | "h3" | "h4" | "h5" | "h6" | "p";
-    /** Supporting line under the title. */
-    description?: string;
+    /** Supporting text under the title; a node (bold, link) is wrapped in the same muted block and renders above `action`. */
+    description?: ReactNode;
     /** A lucide-react (or any) icon component rendered inside the badge. */
     icon?: ElementType;
     /** Illustration image URL. When provided it replaces the icon badge. */

package/dist/Components/FormDrawer/FormDrawer.d.ts

@@ -0,0 +1,2 @@
+import type { FormDrawerProps } from "./FormDrawerProps";
+export default function FormDrawer({ isOpen, onClose, title, description, sections, errors, isDirty, onSubmit, isSubmitting, submitLabel, cancelLabel, secondaryAction, size, labels, "data-testid": testId, }: FormDrawerProps): import("react/jsx-runtime").JSX.Element;

package/dist/Components/FormDrawer/FormDrawer.js

@@ -0,0 +1,97 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = FormDrawer;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+const Drawer_1 = __importStar(require("../Drawer/Drawer"));
+const AlertDialog_1 = __importDefault(require("../AlertDialog/AlertDialog"));
+const Button_1 = __importDefault(require("../Button/Button"));
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+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",
+};
+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 } = (0, useCustomTheme_1.useCustomTheme)();
+    const uid = (0, react_1.useId)();
+    const formId = `${uid}-form`;
+    const titleId = `${uid}-title`;
+    const text = { ...DEFAULT_LABELS, ...labels };
+    const [confirmDiscard, setConfirmDiscard] = (0, react_1.useState)(false);
+    const [attempt, setAttempt] = (0, react_1.useState)(0);
+    const keepEditingRef = (0, react_1.useRef)(null);
+    const summaryRef = (0, react_1.useRef)(null);
+    const focusPending = (0, react_1.useRef)(false);
+    (0, react_1.useEffect)(() => {
+        if (!isOpen)
+            setConfirmDiscard(false);
+    }, [isOpen]);
+    (0, react_1.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 ((0, jsx_runtime_1.jsxs)(Drawer_1.default, { isOpen: isOpen, onClose: requestClose, size: size, closeOnEsc: !isSubmitting, closeOnOverlayClick: !isSubmitting, portalChildren: (0, jsx_runtime_1.jsx)(AlertDialog_1.default, { isOpen: confirmDiscard, onClose: () => setConfirmDiscard(false), leastDestructiveRef: keepEditingRef, isCentered: true, tone: "danger", title: text.discardTitle, content: (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: colors.text[800], children: text.discardBody }), cancelButtonText: text.keepEditing, confirmButtonText: text.discard, onConfirm: () => {
+                setConfirmDiscard(false);
+                onClose();
+            } }), children: [(0, jsx_runtime_1.jsxs)(Drawer_1.DrawerHeader, { children: [(0, jsx_runtime_1.jsx)(react_2.Heading, { id: titleId, as: "h2", fontSize: "md", fontWeight: 600, color: colors.header[900], children: title }), description ? ((0, jsx_runtime_1.jsx)(react_2.Text, { mt: 0.5, fontSize: "sm", fontWeight: 400, color: colors.textMuted, children: description })) : null] }), (0, jsx_runtime_1.jsx)(Drawer_1.DrawerBody, { children: (0, jsx_runtime_1.jsx)(react_2.Box, { as: "form", id: formId, "aria-labelledby": titleId, onSubmit: submit, noValidate: true, "data-testid": testId, children: (0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", gap: 5, pt: 2, children: [errors.length ? ((0, jsx_runtime_1.jsxs)(react_2.Alert, { ref: summaryRef, tabIndex: -1, status: "error", variant: "subtle", borderRadius: "md", alignItems: "flex-start", "data-testid": `${testId}-errors`, children: [(0, jsx_runtime_1.jsx)(react_2.AlertIcon, {}), (0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsx)(react_2.AlertTitle, { fontSize: "sm", children: text.fixErrors }), (0, jsx_runtime_1.jsx)(react_2.AlertDescription, { fontSize: "sm", children: (0, jsx_runtime_1.jsx)(react_2.UnorderedList, { mt: 1, children: errors.map((message) => ((0, jsx_runtime_1.jsx)(react_2.ListItem, { children: message }, message))) }) })] })] })) : null, sections.map((section, index) => ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [index > 0 ? (0, jsx_runtime_1.jsx)(react_2.Divider, { borderColor: colors.boxborder[200] }) : null, (0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "section", direction: "column", gap: 4, "aria-label": section.title, children: [section.title ? ((0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsx)(react_2.Heading, { as: "h3", fontSize: "sm", fontWeight: 600, color: colors.header[900], children: section.title }), section.description ? ((0, jsx_runtime_1.jsx)(react_2.Text, { mt: 0.5, fontSize: "xs", color: colors.textMuted, children: section.description })) : null] })) : null, section.content] })] }, section.id)))] }) }) }), (0, jsx_runtime_1.jsx)(Drawer_1.DrawerFooter, { children: (0, jsx_runtime_1.jsxs)(react_2.Flex, { gap: 2, w: "100%", justify: "flex-end", wrap: "wrap", children: [secondaryAction, (0, jsx_runtime_1.jsx)(Button_1.default, { variant: "ghost", colorScheme: "gray", onClick: requestClose, isDisabled: isSubmitting, label: cancelLabel }), (0, jsx_runtime_1.jsx)(Button_1.default, { variant: "solid", colorScheme: "primary", type: "submit", form: formId, isLoading: isSubmitting, loadingText: submitLabel, label: submitLabel, "data-testid": `${testId}-submit` })] }) })] }));
+}

package/dist/Components/FormDrawer/FormDrawerProps.d.ts

@@ -0,0 +1,55 @@
+import type { ReactNode } from "react";
+/** One block of the form; sections after the first are separated by a divider. */
+export type FormDrawerSection = {
+    /** Stable React key. */
+    id: string;
+    /** Renders an h3 above the content; also names the section region. */
+    title?: string;
+    /** Muted line under `title`; ignored without a title. */
+    description?: string;
+    content: ReactNode;
+};
+/** Every user-facing string FormDrawer owns; pass the ones you localise. */
+export type FormDrawerLabels = {
+    /** Heading of the error summary. Defaults to "Please fix the following before saving". */
+    fixErrors: string;
+    /** Defaults to "Discard changes?". */
+    discardTitle: string;
+    /** Defaults to "You have unsaved changes. If you close now, they will be lost.". */
+    discardBody: string;
+    /** Confirm button of the discard dialog. Defaults to "Discard". */
+    discard: string;
+    /** Cancel button of the discard dialog, focused on open. Defaults to "Keep editing". */
+    keepEditing: string;
+};
+/** Sectioned create/edit form in a Drawer: error summary, sticky footer, and a discard-changes confirm when closing while dirty. */
+export interface FormDrawerProps {
+    isOpen: boolean;
+    /** Called once the user has really closed: clean close, or Discard confirmed. Never called while `isSubmitting`. */
+    onClose: () => void;
+    /** Drawer heading; also the accessible name of the dialog and of the form. */
+    title: string;
+    /** Muted line under the title. */
+    description?: string;
+    sections: FormDrawerSection[];
+    /** Validation messages shown as a summary above the form; the summary takes focus after a submit that leaves any. */
+    errors?: string[];
+    /** Closing (X, Esc, overlay, Cancel) asks for confirmation while true. */
+    isDirty: boolean;
+    /** Fires on submit (button or Enter in a field); the browser's own validation is off, so validate in the handler. */
+    onSubmit: () => void;
+    /** Spins the submit button, disables Cancel and blocks every close path. Set it synchronously in `onSubmit` so error focus waits for the result. */
+    isSubmitting?: boolean;
+    /** Defaults to "Save". */
+    submitLabel?: string;
+    /** Defaults to "Cancel". */
+    cancelLabel?: string;
+    /** Rendered left of Cancel, e.g. a ghost "Save as draft" Button. */
+    secondaryAction?: ReactNode;
+    /** Drawer width. Defaults to "md". */
+    size?: "sm" | "md" | "lg";
+    /** Overrides for the built-in strings. */
+    labels?: Partial<FormDrawerLabels>;
+    /** Set on the form; the error summary and submit button get `-errors` / `-submit` suffixes. Defaults to "form-drawer". */
+    "data-testid"?: string;
+}

package/dist/Components/FormDrawer/FormDrawerProps.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/LauncherTrigger/LauncherTrigger.d.ts

@@ -1,4 +1,4 @@
 import type { LauncherTriggerProps } from "./LauncherTriggerProps";
 export declare const keyShortcutsFor: (shortcut: string) => string;
-declare const LauncherTrigger: ({ onClick, isOpen, label, shortcut, icon: Icon, "aria-label": ariaLabel, "data-testid": testId, }: LauncherTriggerProps) => import("react/jsx-runtime").JSX.Element;
+declare const LauncherTrigger: ({ onClick, isOpen, label, shortcut, icon: Icon, display, "aria-label": ariaLabel, "data-testid": testId, }: LauncherTriggerProps) => import("react/jsx-runtime").JSX.Element;
 export default LauncherTrigger;

package/dist/Components/LauncherTrigger/LauncherTrigger.js

@@ -1,4 +1,7 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.keyShortcutsFor = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
@@ -11,6 +14,7 @@ const motion_2 = require("../../Theme/tokens/primitives/motion");
 const useMatchMedia_1 = require("../../Hooks/useMatchMedia");
 const Kbd_1 = require("../Kbd/Kbd");
 const AppSwitcherProps_1 = require("../AppSwitcher/AppSwitcherProps");
+const ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
 const MD_QUERY = "(min-width: 48em)";
 const KEY_NAMES = {
     mod: ["Meta", "Control"],
@@ -31,11 +35,14 @@ const keyShortcutsFor = (shortcut) => {
     return Array.from(new Set(chords)).join(" ");
 };
 exports.keyShortcutsFor = keyShortcutsFor;
-const LauncherTrigger = ({ onClick, isOpen, label = "Menu", shortcut = "mod+k", icon: Icon = lucide_react_1.Compass, "aria-label": ariaLabel, "data-testid": testId, }) => {
+const LauncherTrigger = ({ onClick, isOpen, label = "Menu", shortcut = "mod+k", icon: Icon = lucide_react_1.Compass, display = "chip", "aria-label": ariaLabel, "data-testid": testId, }) => {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const showHint = (0, useMatchMedia_1.useMatchMedia)(MD_QUERY, true);
     const ring = (0, focusRing_styles_1.focusVisibleRing)(colors);
     const hint = shortcut ? (0, AppSwitcherProps_1.formatShortcut)(shortcut, (0, Kbd_1.detectApple)()) : "";
+    if (display === "icon") {
+        return ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: hint ? `${label} (${hint})` : label, placement: "bottom", children: (0, jsx_runtime_1.jsx)(react_1.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 ? (0, exports.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: (0, motion_2.transitionFor)(["background-color", "border-color", "box-shadow"]), _hover: { borderColor: colors.primary[300] }, sx: { _focusVisible: ring, [focusRing_styles_1.FOCUS_VISIBLE_OVER_STATE]: ring, ...(0, motion_1.reducedMotionSx)() }, children: (0, jsx_runtime_1.jsx)(Icon, { size: 17, "aria-hidden": "true" }) }) }));
+    }
     return ((0, jsx_runtime_1.jsxs)(react_1.Box, { as: "button", type: "button", "data-testid": testId, onClick: onClick, "aria-haspopup": "dialog", "aria-expanded": isOpen, "aria-label": ariaLabel, "aria-keyshortcuts": shortcut ? (0, exports.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: (0, motion_2.transitionFor)(["background-color", "border-color", "box-shadow"]), _hover: { borderColor: colors.primary[300] }, sx: { _focusVisible: ring, [focusRing_styles_1.FOCUS_VISIBLE_OVER_STATE]: ring, ...(0, motion_1.reducedMotionSx)() }, children: [(0, jsx_runtime_1.jsxs)(react_1.Box, { as: "span", display: "inline-flex", alignItems: "center", gap: 2, "aria-hidden": ariaLabel ? true : undefined, children: [(0, jsx_runtime_1.jsx)(Icon, { size: 17, "aria-hidden": "true" }), (0, jsx_runtime_1.jsx)("span", { children: label })] }), hint && showHint && ((0, jsx_runtime_1.jsx)(react_1.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 }))] }));
 };
 exports.default = LauncherTrigger;

package/dist/Components/LauncherTrigger/LauncherTriggerProps.d.ts

@@ -10,6 +10,8 @@ export interface LauncherTriggerProps {
     shortcut?: string | null;
     /** Component rendered at 17px before the label. Default lucide `Compass`. */
     icon?: ElementType;
+    /** `"chip"` shows icon, label and chord hint; `"icon"` is a 36px square whose label is the accessible name and tooltip. Default "chip". */
+    display?: "chip" | "icon";
     /** Overrides the accessible name; the visible label and hint then become `aria-hidden`. */
     "aria-label"?: string;
     "data-testid"?: string;

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

@@ -3,4 +3,4 @@ import { ChakraModelProps, ModalHeaderSlotProps, ModalBodySlotProps, ModalFooter
 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;
+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;