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

package/dist/Components/CalendarGrid/CalendarGrid.js

@@ -0,0 +1,173 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+const lucide_react_1 = require("lucide-react");
+const Button_1 = __importDefault(require("../Button/Button"));
+const Skeletons_1 = __importDefault(require("../Skeletons/Skeletons"));
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+const tone_1 = require("../../Theme/tokens/builders/tone");
+const calendarMath_1 = require("./calendarMath");
+const plural = (n, one, many) => `${n} ${n === 1 ? one : many}`;
+const DEFAULT_LABELS = {
+    today: "Today",
+    previous: "Previous",
+    next: "Next",
+    month: "Month",
+    week: "Week",
+    day: "Day",
+    more: (count) => `+${count} more`,
+    moreLabel: (count, date) => `${plural(count, "more event", "more events")} on ${date}`,
+    eventCount: (count) => plural(count, "event", "events"),
+};
+const VIEWS = ["month", "week", "day"];
+const MAX_LANES = { month: 3, week: 6, day: Infinity };
+const MIN_CELL_HEIGHT = { month: "6.5rem", week: "12rem", day: "16rem" };
+const LANE_HEIGHT = "1.5rem";
+const CHIP_HEIGHT = "1.375rem";
+const CHIP_INSET = "2px";
+const EventChip = ({ event, colors, surface, onEventClick, segment }) => {
+    var _a;
+    const tone = (0, tone_1.resolveSoftTone)(colors, (0, tone_1.toneScale)(colors, (_a = event.tone) !== null && _a !== void 0 ? _a : "neutral"), surface);
+    const left = (segment === null || segment === void 0 ? void 0 : segment.continuesBefore) ? "0px" : CHIP_INSET;
+    const right = (segment === null || segment === void 0 ? void 0 : segment.continuesAfter) ? "0px" : CHIP_INSET;
+    const span = segment ? segment.endCol - segment.startCol + 1 : 1;
+    const placement = segment
+        ? {
+            position: "absolute",
+            zIndex: 1,
+            top: `calc(${segment.lane} * ${LANE_HEIGHT})`,
+            left,
+            width: `calc(${span * 100}% + ${span - 1}px - ${left} - ${right})`,
+        }
+        : { width: "100%" };
+    const common = {
+        ...placement,
+        display: "flex",
+        alignItems: "center",
+        h: CHIP_HEIGHT,
+        px: 2,
+        fontSize: "0.75rem",
+        fontWeight: 500,
+        lineHeight: 1,
+        textAlign: "left",
+        whiteSpace: "nowrap",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        textDecoration: "none",
+        cursor: "pointer",
+        bg: tone.bg,
+        color: tone.fg,
+        border: "1px solid",
+        borderColor: tone.border,
+        borderLeftRadius: (segment === null || segment === void 0 ? void 0 : segment.continuesBefore) ? 0 : "md",
+        borderRightRadius: (segment === null || segment === void 0 ? void 0 : segment.continuesAfter) ? 0 : "md",
+        title: event.label,
+        "data-event-id": event.id,
+        onClick: () => onEventClick === null || onEventClick === void 0 ? void 0 : onEventClick(event),
+        _hover: { bg: tone.hoverBg, borderColor: tone.hoverBorder },
+        _active: { bg: tone.activeBg, borderColor: tone.activeBorder },
+        sx: (0, focusRing_styles_1.focusVisibleStyles)(colors),
+    };
+    return event.href ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "a", href: event.href, ...common, children: event.label })) : ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", ...common, children: event.label }));
+};
+const CalendarGrid = ({ view, date, events, onViewChange, onDateChange, onEventClick, renderDayCell, weekStartsOn = 0, locale, isLoading = false, labels, }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const text = { ...DEFAULT_LABELS, ...labels };
+    const today = new Date();
+    const anchor = (0, calendarMath_1.startOfDay)(date);
+    const anchorKey = (0, calendarMath_1.dayKey)(anchor);
+    const weeks = (0, calendarMath_1.visibleWeeks)(view, anchor, weekStartsOn);
+    const columns = weeks[0].length;
+    const visibleKeys = new Set(weeks.flat().map(calendarMath_1.dayKey));
+    const shownEvents = isLoading ? [] : events;
+    const maxLanes = MAX_LANES[view];
+    const [focusedKey, setFocusedKey] = (0, react_1.useState)(anchorKey);
+    const pendingFocus = (0, react_1.useRef)(false);
+    const cellRefs = (0, react_1.useRef)(new Map());
+    const activeKey = visibleKeys.has(focusedKey) ? focusedKey : visibleKeys.has(anchorKey) ? anchorKey : (0, calendarMath_1.dayKey)(weeks[0][0]);
+    (0, react_1.useEffect)(() => {
+        setFocusedKey(anchorKey);
+    }, [anchorKey]);
+    (0, react_1.useEffect)(() => {
+        if (!pendingFocus.current)
+            return;
+        const el = cellRefs.current.get(activeKey);
+        if (!el)
+            return;
+        pendingFocus.current = false;
+        el.focus();
+    });
+    const handleCellKeyDown = (e, cellDate) => {
+        if (e.target !== e.currentTarget)
+            return;
+        if ((0, calendarMath_1.isNavKey)(e.key)) {
+            e.preventDefault();
+            const next = (0, calendarMath_1.moveFocus)(view, cellDate, e.key, weekStartsOn);
+            const inRange = visibleKeys.has((0, calendarMath_1.dayKey)(next));
+            if (!inRange && !onDateChange)
+                return;
+            setFocusedKey((0, calendarMath_1.dayKey)(next));
+            pendingFocus.current = true;
+            if (!inRange)
+                onDateChange === null || onDateChange === void 0 ? void 0 : onDateChange(next);
+            return;
+        }
+        if ((e.key === "Enter" || e.key === " ") && onDateChange) {
+            e.preventDefault();
+            onDateChange(cellDate);
+        }
+    };
+    const drillIntoDay = (day) => {
+        onDateChange === null || onDateChange === void 0 ? void 0 : onDateChange(day);
+        onViewChange === null || onViewChange === void 0 ? void 0 : onViewChange("day");
+    };
+    const weekdayShort = (0, calendarMath_1.weekdayLabels)(locale, weekStartsOn, "short");
+    const weekdayLong = (0, calendarMath_1.weekdayLabels)(locale, weekStartsOn, "long");
+    const headerDays = view === "day" ? [(anchor.getDay() - weekStartsOn + 7) % 7] : weekdayShort.map((_, i) => i);
+    const title = (0, calendarMath_1.formatTitle)(view, anchor, locale, weekStartsOn);
+    const template = `repeat(${columns}, minmax(0, 1fr))`;
+    const border = colors.boxborder[200];
+    const renderCell = (day, col, weekIndex, layout) => {
+        const key = (0, calendarMath_1.dayKey)(day);
+        const isToday = (0, calendarMath_1.isSameDay)(day, today);
+        const inMonth = view !== "month" || day.getMonth() === anchor.getMonth();
+        const surface = (0, calendarMath_1.isWeekend)(day) ? colors.backgroundColor.secondary : colors.backgroundColor.main;
+        const dayEvents = (0, calendarMath_1.eventsOnDay)(shownEvents, day);
+        const hidden = layout.hiddenByCol[col];
+        const active = key === activeKey;
+        const label = `${(0, calendarMath_1.formatFullDate)(day, locale)}${dayEvents.length ? `, ${text.eventCount(dayEvents.length)}` : ""}`;
+        const ownSegments = layout.segments.filter((s) => s.startCol === col && s.lane < maxLanes);
+        let body = null;
+        if (isLoading) {
+            body = ((0, jsx_runtime_1.jsx)(react_2.Box, { mt: 1, "aria-hidden": true, children: (weekIndex * 7 + col) % 3 === 0 ? (0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: CHIP_HEIGHT, borderRadius: "md" }) : null }));
+        }
+        else if (renderDayCell) {
+            body = (0, jsx_runtime_1.jsx)(react_2.Box, { mt: 1, children: renderDayCell(day, dayEvents) });
+        }
+        else if (view === "day") {
+            body = ((0, jsx_runtime_1.jsx)(react_2.Flex, { direction: "column", gap: 1, mt: 2, children: dayEvents.map((event) => ((0, jsx_runtime_1.jsx)(EventChip, { event: event, colors: colors, surface: surface, onEventClick: onEventClick }, event.id))) }));
+        }
+        else {
+            body = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.Box, { position: "relative", mt: 1, h: `calc(${layout.visibleLanes} * ${LANE_HEIGHT})`, children: ownSegments.map((s) => ((0, jsx_runtime_1.jsx)(EventChip, { event: s.event, colors: colors, surface: surface, onEventClick: onEventClick, segment: s }, s.event.id))) }), hidden > 0 ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", "aria-label": text.moreLabel(hidden, (0, calendarMath_1.formatFullDate)(day, locale)), onClick: () => drillIntoDay(day), px: 1, fontSize: "0.75rem", fontWeight: 600, color: colors.header[900], textAlign: "left", textDecoration: "underline", sx: (0, focusRing_styles_1.focusVisibleStyles)(colors), children: text.more(hidden) })) : null] }));
+        }
+        return ((0, jsx_runtime_1.jsxs)(react_2.Box, { role: "gridcell", ref: (el) => {
+                if (el)
+                    cellRefs.current.set(key, el);
+                else
+                    cellRefs.current.delete(key);
+            }, "data-date": key, "aria-label": label, "aria-current": isToday ? "date" : undefined, tabIndex: active ? 0 : -1, onFocus: () => setFocusedKey(key), onKeyDown: (e) => handleCellKeyDown(e, day), position: "relative", minH: MIN_CELL_HEIGHT[view], p: 1, bg: surface, borderRight: "1px solid", borderBottom: "1px solid", borderColor: border, outline: "none", _focusVisible: {
+                boxShadow: `inset 0 0 0 2px ${colors.focusRing.halo}, inset 0 0 0 4px ${colors.focusRing.ring}`,
+            }, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", display: "inline-flex", alignItems: "center", justifyContent: "center", minW: "1.5rem", h: "1.5rem", px: 1, borderRadius: "full", fontSize: "0.8125rem", fontWeight: isToday ? 700 : 500, color: isToday ? colors.accentText : inMonth ? colors.header[900] : colors.textMuted, boxShadow: isToday ? `inset 0 0 0 1.5px ${colors.accentText}` : undefined, "aria-hidden": true, children: day.getDate() }), body] }, key));
+    };
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", justify: "space-between", wrap: "wrap", gap: 2, mb: 3, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, children: [onDateChange ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Button_1.default, { label: text.today, size: "sm", variant: "outline", onClick: () => onDateChange((0, calendarMath_1.startOfDay)(new Date())) }), (0, jsx_runtime_1.jsx)(Button_1.default, { "aria-label": text.previous, size: "sm", variant: "ghost", leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { size: 16, "aria-hidden": true }), onClick: () => onDateChange((0, calendarMath_1.shiftAnchor)(view, anchor, -1)) }), (0, jsx_runtime_1.jsx)(Button_1.default, { "aria-label": text.next, size: "sm", variant: "ghost", leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { size: 16, "aria-hidden": true }), onClick: () => onDateChange((0, calendarMath_1.shiftAnchor)(view, anchor, 1)) })] })) : null, (0, jsx_runtime_1.jsx)(react_2.Text, { as: "h2", fontSize: "1rem", fontWeight: 600, color: colors.header[900], children: title })] }), onViewChange ? ((0, jsx_runtime_1.jsx)(react_2.Flex, { role: "group", "aria-label": text[view], gap: 1, children: VIEWS.map((v) => ((0, jsx_runtime_1.jsx)(Button_1.default, { label: text[v], size: "sm", variant: v === view ? "solid" : "outline", "aria-pressed": v === view, onClick: () => onViewChange(v) }, v))) })) : null] }), (0, jsx_runtime_1.jsx)(react_2.Box, { overflowX: "auto", children: (0, jsx_runtime_1.jsxs)(react_2.Box, { role: "grid", "aria-label": title, "aria-busy": isLoading || undefined, "data-view": view, minW: view === "day" ? undefined : "42rem", borderTop: "1px solid", borderLeft: "1px solid", borderColor: border, borderRadius: "lg", overflow: "hidden", children: [(0, jsx_runtime_1.jsx)(react_2.Grid, { role: "row", templateColumns: template, children: headerDays.map((i) => ((0, jsx_runtime_1.jsx)(react_2.Box, { role: "columnheader", "aria-label": weekdayLong[i], px: 2, py: 1, fontSize: "0.75rem", fontWeight: 600, color: colors.textMuted, bg: colors.backgroundColor.main, borderRight: "1px solid", borderBottom: "1px solid", borderColor: border, children: weekdayShort[i] }, i))) }), weeks.map((week, weekIndex) => {
+                            const layout = (0, calendarMath_1.layoutWeek)(week, shownEvents, maxLanes);
+                            return ((0, jsx_runtime_1.jsx)(react_2.Grid, { role: "row", templateColumns: template, children: week.map((day, col) => renderCell(day, col, weekIndex, layout)) }, (0, calendarMath_1.dayKey)(week[0])));
+                        })] }) })] }));
+};
+exports.default = CalendarGrid;

package/dist/Components/CalendarGrid/CalendarGridProps.d.ts

@@ -0,0 +1,54 @@
+import type { ReactNode } from "react";
+import type { Tone } from "../../Theme/tokens/builders/tone";
+/** Which span the grid shows: a month of weeks, one week, or a single day. */
+export type CalendarGridView = "month" | "week" | "day";
+/** A date-granularity event; time of day is ignored. */
+export type CalendarEvent = {
+    id: string;
+    /** First day covered; only the date part is read. */
+    start: Date;
+    /** Last day covered, inclusive. Omit for a single-day event; a value before `start` is swapped. */
+    end?: Date;
+    label: string;
+    /** Status tint of the chip, same tones as Tag. Defaults to "neutral". */
+    tone?: Tone;
+    /** Renders the chip as a link; without it the chip is a button that fires `onEventClick`. */
+    href?: string;
+};
+/** Visible text and accessible names; every key falls back to English. */
+export type CalendarGridLabels = {
+    today: string;
+    previous: string;
+    next: string;
+    month: string;
+    week: string;
+    day: string;
+    /** Receives the number of hidden events, e.g. "+3 more". */
+    more: (count: number) => string;
+    /** Accessible name of the "more" button, e.g. "3 more events on Tuesday, 14 October 2026". */
+    moreLabel: (count: number, date: string) => string;
+    /** Appended to a day cell's accessible name, e.g. "3 events". */
+    eventCount: (count: number) => string;
+};
+/** Props for the month/week/day event grid; fully controlled through `view` and `date`. */
+export interface CalendarGridProps {
+    view: CalendarGridView;
+    /** Anchor date: any day inside the month, week or day being shown. */
+    date: Date;
+    events: CalendarEvent[];
+    /** Called by the toolbar's view switcher and by a cell's "+N more" button (with "day"). */
+    onViewChange?: (view: CalendarGridView) => void;
+    /** Called when the anchor should move: toolbar, arrow keys leaving the visible range, Enter on a cell, "+N more". */
+    onDateChange?: (date: Date) => void;
+    /** Called when an event chip is activated; link chips still navigate to `href`. */
+    onEventClick?: (event: CalendarEvent) => void;
+    /** Replaces a cell's event chips (and the multi-day spanning) with your own content, under the day number. */
+    renderDayCell?: (date: Date, events: CalendarEvent[]) => ReactNode;
+    /** First column of the week; defaults to 0 (Sunday). */
+    weekStartsOn?: 0 | 1;
+    /** BCP 47 tag for month, weekday and date names via Intl; defaults to the runtime locale. */
+    locale?: string;
+    /** Keeps the grid's shape and swaps the events for skeleton bars; sets aria-busy. */
+    isLoading?: boolean;
+    labels?: Partial<CalendarGridLabels>;
+}

package/dist/Components/CalendarGrid/CalendarGridProps.js

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

package/dist/Components/CalendarGrid/calendarMath.d.ts

@@ -0,0 +1,49 @@
+export type CalendarView = "month" | "week" | "day";
+export type WeekStart = 0 | 1;
+export type SpanEvent = {
+    id: string;
+    start: Date;
+    end?: Date;
+    label: string;
+};
+export type WeekSegment<E extends SpanEvent> = {
+    event: E;
+    startCol: number;
+    endCol: number;
+    lane: number;
+    continuesBefore: boolean;
+    continuesAfter: boolean;
+};
+export type WeekLayout<E extends SpanEvent> = {
+    segments: WeekSegment<E>[];
+    visibleLanes: number;
+    hiddenByCol: number[];
+};
+export declare const startOfDay: (d: Date) => Date;
+export declare const addDays: (d: Date, n: number) => Date;
+export declare const addMonths: (d: Date, n: number) => Date;
+export declare const isSameDay: (a: Date, b: Date) => boolean;
+export declare const dayKey: (d: Date) => string;
+export declare const isWeekend: (d: Date) => boolean;
+/** Whole calendar days from `a` to `b`, counted on date components so a DST day is still one day. */
+export declare const diffDays: (a: Date, b: Date) => number;
+export declare const startOfWeek: (d: Date, weekStartsOn: WeekStart) => Date;
+export declare const weekDays: (d: Date, weekStartsOn: WeekStart) => Date[];
+/** Whole weeks that cover the month of `d`, padded with the neighbouring months' days. */
+export declare const monthWeeks: (d: Date, weekStartsOn: WeekStart) => Date[][];
+export declare const visibleWeeks: (view: CalendarView, d: Date, weekStartsOn: WeekStart) => Date[][];
+export declare const shiftAnchor: (view: CalendarView, d: Date, direction: 1 | -1) => Date;
+export declare const eventRange: (e: Pick<SpanEvent, "start" | "end">) => {
+    start: Date;
+    end: Date;
+};
+export declare const eventsOnDay: <E extends SpanEvent>(events: readonly E[], day: Date) => E[];
+/** Lays events out in lanes across one week row; lanes past `maxLanes` are counted per column, not drawn. */
+export declare const layoutWeek: <E extends SpanEvent>(days: readonly Date[], events: readonly E[], maxLanes: number) => WeekLayout<E>;
+export type NavKey = "ArrowLeft" | "ArrowRight" | "ArrowUp" | "ArrowDown" | "Home" | "End" | "PageUp" | "PageDown";
+export declare const NAV_KEYS: readonly string[];
+export declare const isNavKey: (key: string) => key is NavKey;
+export declare const moveFocus: (view: CalendarView, d: Date, key: NavKey, weekStartsOn: WeekStart) => Date;
+export declare const weekdayLabels: (locale: string | undefined, weekStartsOn: WeekStart, style?: "short" | "long") => string[];
+export declare const formatTitle: (view: CalendarView, d: Date, locale: string | undefined, weekStartsOn: WeekStart) => string;
+export declare const formatFullDate: (d: Date, locale: string | undefined) => string;

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/Card/Card.d.ts

@@ -1,4 +1,5 @@
-declare const Card: import("react").ForwardRefExoticComponent<Omit<import("@chakra-ui/react").CardProps, "color" | "colorScheme" | "direction" | "size" | "justify" | "children" | "variant" | "align"> & {
+import { CardPadding } from "./CardProps";
+declare const Card: import("react").ForwardRefExoticComponent<Omit<import("@chakra-ui/react").CardProps, "color" | "colorScheme" | "direction" | "padding" | "size" | "justify" | "children" | "variant" | "align"> & {
     dividercolor?: "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "whiteAlpha" | "blackAlpha";
     dividersize?: string;
     dividervariant?: "solid" | "dashed";
@@ -13,6 +14,7 @@ declare const Card: import("react").ForwardRefExoticComponent<Omit<import("@chak
     direction?: import("@chakra-ui/react").ResponsiveValue<"row" | "column" | "row-reverse" | "column-reverse">;
     align?: import("@chakra-ui/react").CardBodyProps["alignItems"];
     justify?: import("@chakra-ui/react").CardBodyProps["justifyContent"];
+    padding?: CardPadding;
     bodyProps?: import("@chakra-ui/react").CardBodyProps;
 } & import("react").RefAttributes<HTMLDivElement>>;
 export default Card;

package/dist/Components/Card/Card.js

@@ -3,11 +3,21 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_2 = require("@chakra-ui/react");
-const Card = (0, react_1.forwardRef)(function Card({ header, footer, children, color, colorScheme, direction = "column", align, justify, bodyProps, ...rest }, ref) {
+const HEADER_PADDING_WHEN_FLUSH = "0.75rem";
+const PADDING_VALUES = {
+    none: "0",
+    "2xs": "0.375rem",
+    xs: "0.75rem",
+    sm: "0.75rem 1rem",
+    md: "1rem 1.25rem",
+    lg: "1.25rem 1.5rem",
+};
+const Card = (0, react_1.forwardRef)(function Card({ header, footer, children, color, colorScheme, direction = "column", align, justify, bodyProps, padding, ...rest }, ref) {
     const cardProps = { ...rest };
     delete cardProps.dividercolor;
     delete cardProps.dividersize;
     delete cardProps.dividervariant;
-    return ((0, jsx_runtime_1.jsxs)(react_2.Card, { ref: ref, colorScheme: colorScheme !== null && colorScheme !== void 0 ? colorScheme : color, ...cardProps, children: [header && (0, jsx_runtime_1.jsx)(react_2.CardHeader, { children: header }), (0, jsx_runtime_1.jsx)(react_2.CardBody, { display: "flex", flexDirection: direction, alignItems: align, justifyContent: justify, ...bodyProps, children: children }), footer && (0, jsx_runtime_1.jsx)(react_2.CardFooter, { children: footer })] }));
+    const sx = padding ? { "--card-padding": PADDING_VALUES[padding], ...cardProps.sx } : cardProps.sx;
+    return ((0, jsx_runtime_1.jsxs)(react_2.Card, { ref: ref, colorScheme: colorScheme !== null && colorScheme !== void 0 ? colorScheme : color, ...cardProps, sx: sx, children: [header && ((0, jsx_runtime_1.jsx)(react_2.CardHeader, { sx: padding === "none" ? { "--card-padding": HEADER_PADDING_WHEN_FLUSH } : undefined, children: header })), (0, jsx_runtime_1.jsx)(react_2.CardBody, { display: "flex", flexDirection: direction, alignItems: align, justifyContent: justify, ...bodyProps, children: children }), footer && (0, jsx_runtime_1.jsx)(react_2.CardFooter, { children: footer })] }));
 });
 exports.default = Card;

package/dist/Components/Card/CardProps.d.ts

@@ -6,8 +6,10 @@ type DeadDividerProps = {
     dividersize?: string;
     dividervariant?: "solid" | "dashed";
 };
+/** Padding steps: "none" flush, "2xs" 0.375rem, "xs" 0.75rem all round, "sm" / "md" / "lg" match `size`. */
+export type CardPadding = "none" | "2xs" | "xs" | "sm" | "md" | "lg";
 /** Themed outline surface with optional header/footer slots; children and direction/align/justify apply to the body. */
-export type CardProps = Omit<ChakraCardProps, "children" | "variant" | "size" | "color" | "colorScheme" | "direction" | "align" | "justify"> & DeadDividerProps & {
+export type CardProps = Omit<ChakraCardProps, "children" | "variant" | "size" | "color" | "colorScheme" | "direction" | "align" | "justify" | "padding"> & DeadDividerProps & {
     /** Rendered in CardHeader (semibold header ink) only when truthy. */
     header?: React.ReactNode;
     /** Rendered in CardFooter only when truthy. */
@@ -27,6 +29,8 @@ export type CardProps = Omit<ChakraCardProps, "children" | "variant" | "size" |
     align?: CardBodyProps["alignItems"];
     /** Body justifyContent; `bodyProps` wins if it sets the same thing. */
     justify?: CardBodyProps["justifyContent"];
+    /** Overrides `size`'s padding for header, body and footer; "none" is flush (a header keeps "xs"), "2xs" is 6px. */
+    padding?: CardPadding;
     /** Props for the body wrapper, e.g. `p={0}` for edge-to-edge media. */
     bodyProps?: CardBodyProps;
 };

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) => {