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

package/dist/esm/Components/AudioRecorder/AudioRecorder.js

@@ -0,0 +1,161 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Box, Flex, Text, VisuallyHidden } from "@chakra-ui/react";
+import Button from "../Button/Button.js";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+const DEFAULT_LABELS = {
+    start: "Start recording",
+    stop: "Stop recording",
+    recording: "Recording",
+    recorded: "Recorded",
+    permissionDenied: "Microphone access was denied. Allow it in your browser settings and try again.",
+    unsupported: "Audio recording is not supported in this browser.",
+};
+const PREFERRED_MIME = "audio/webm";
+const TICK_MS = 250;
+const EXTENSIONS = {
+    "audio/webm": "webm",
+    "audio/wav": "wav",
+    "audio/wave": "wav",
+    "audio/x-wav": "wav",
+    "audio/ogg": "ogg",
+    "audio/mp4": "m4a",
+    "audio/mpeg": "mp3",
+};
+export const formatElapsed = (ms) => {
+    const total = Math.floor(ms / 1000);
+    return `${String(Math.floor(total / 60)).padStart(2, "0")}:${String(total % 60).padStart(2, "0")}`;
+};
+export const recordingFileName = (mime, now) => {
+    var _a, _b;
+    const type = mime.split(";")[0].trim().toLowerCase() || PREFERRED_MIME;
+    return { type, name: `recording-${now}.${(_a = EXTENSIONS[type]) !== null && _a !== void 0 ? _a : (((_b = type.split("/")[1]) === null || _b === void 0 ? void 0 : _b.replace(/^x-/, "")) || "webm")}` };
+};
+const isSupported = () => { var _a; return typeof navigator !== "undefined" && !!((_a = navigator.mediaDevices) === null || _a === void 0 ? void 0 : _a.getUserMedia) && typeof MediaRecorder !== "undefined"; };
+const AudioRecorder = ({ onRecorded, maxDurationSec, isDisabled = false, labels }) => {
+    const { colors } = useCustomTheme();
+    const text = { ...DEFAULT_LABELS, ...labels };
+    const [status, setStatus] = useState("idle");
+    const [elapsedMs, setElapsedMs] = useState(0);
+    const [announcement, setAnnouncement] = useState("");
+    const recorderRef = useRef(null);
+    const streamRef = useRef(null);
+    const chunksRef = useRef([]);
+    const timerRef = useRef(null);
+    const startedAtRef = useRef(0);
+    const mountedRef = useRef(true);
+    const startingRef = useRef(false);
+    const onRecordedRef = useRef(onRecorded);
+    const textRef = useRef(text);
+    onRecordedRef.current = onRecorded;
+    textRef.current = text;
+    const release = useCallback(() => {
+        var _a;
+        if (timerRef.current !== null)
+            clearInterval(timerRef.current);
+        timerRef.current = null;
+        (_a = streamRef.current) === null || _a === void 0 ? void 0 : _a.getTracks().forEach((track) => track.stop());
+        streamRef.current = null;
+        recorderRef.current = null;
+    }, []);
+    useEffect(() => {
+        mountedRef.current = true;
+        if (!isSupported())
+            setStatus("unsupported");
+        return () => {
+            mountedRef.current = false;
+            const recorder = recorderRef.current;
+            if (recorder) {
+                recorder.ondataavailable = null;
+                recorder.onstop = null;
+                recorder.onerror = null;
+                if (recorder.state !== "inactive") {
+                    try {
+                        recorder.stop();
+                    }
+                    catch {
+                        // NOTE: a recorder the browser already tore down throws on stop.
+                    }
+                }
+            }
+            release();
+        };
+    }, [release]);
+    const stop = useCallback(() => {
+        const recorder = recorderRef.current;
+        if (recorder && recorder.state !== "inactive")
+            recorder.stop();
+    }, []);
+    const start = useCallback(async () => {
+        var _a, _b;
+        if (startingRef.current)
+            return;
+        if (!isSupported()) {
+            setStatus("unsupported");
+            return;
+        }
+        startingRef.current = true;
+        try {
+            const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+            if (!mountedRef.current) {
+                stream.getTracks().forEach((track) => track.stop());
+                return;
+            }
+            streamRef.current = stream;
+            chunksRef.current = [];
+            const useWebm = (_b = (_a = MediaRecorder.isTypeSupported) === null || _a === void 0 ? void 0 : _a.call(MediaRecorder, PREFERRED_MIME)) !== null && _b !== void 0 ? _b : false;
+            const recorder = new MediaRecorder(stream, useWebm ? { mimeType: PREFERRED_MIME } : undefined);
+            recorderRef.current = recorder;
+            recorder.ondataavailable = (event) => {
+                if (event.data.size > 0)
+                    chunksRef.current.push(event.data);
+            };
+            recorder.onerror = () => {
+                release();
+                setStatus("idle");
+            };
+            recorder.onstop = () => {
+                const duration = Date.now() - startedAtRef.current;
+                const { type, name } = recordingFileName(recorder.mimeType || PREFERRED_MIME, Date.now());
+                const file = new File(chunksRef.current, name, { type });
+                release();
+                setStatus("idle");
+                setElapsedMs(duration);
+                setAnnouncement(`${textRef.current.recorded} ${formatElapsed(duration)}`);
+                if (file.size > 0)
+                    onRecordedRef.current(file);
+            };
+            recorder.start();
+            startedAtRef.current = Date.now();
+            setElapsedMs(0);
+            setStatus("recording");
+            setAnnouncement(textRef.current.recording);
+            timerRef.current = setInterval(() => {
+                const elapsed = Date.now() - startedAtRef.current;
+                if (maxDurationSec !== undefined && elapsed >= maxDurationSec * 1000) {
+                    setElapsedMs(maxDurationSec * 1000);
+                    stop();
+                    return;
+                }
+                setElapsedMs(elapsed);
+            }, TICK_MS);
+        }
+        catch (error) {
+            release();
+            if (!mountedRef.current)
+                return;
+            const name = error === null || error === void 0 ? void 0 : error.name;
+            setStatus(name === "NotFoundError" ? "unsupported" : "denied");
+        }
+        finally {
+            startingRef.current = false;
+        }
+    }, [maxDurationSec, release, stop]);
+    const isRecording = status === "recording";
+    const blocked = status === "unsupported";
+    return (_jsxs(Box, { children: [_jsxs(Flex, { align: "center", gap: 3, children: [_jsx(Button, { label: isRecording ? text.stop : text.start, size: "sm", colorScheme: isRecording ? "red" : undefined, variant: isRecording ? "solid" : "outline", "aria-pressed": isRecording, isDisabled: isRecording ? false : isDisabled || blocked, onClick: isRecording ? stop : () => void start() }), isRecording ? (_jsxs(Flex, { align: "center", gap: 2, children: [_jsx(Box, { "data-testid": "audio-recorder-dot", boxSize: "0.5rem", borderRadius: "full", bg: colors.semanticText.error, "aria-hidden": true, sx: {
+                                    "@media (prefers-reduced-motion: no-preference)": { animation: "audio-recorder-pulse 1.2s ease-in-out infinite" },
+                                    "@keyframes audio-recorder-pulse": { "0%, 100%": { opacity: 1 }, "50%": { opacity: 0.35 } },
+                                } }), _jsx(Text, { as: "span", role: "timer", fontSize: "0.875rem", color: colors.header[900], sx: { fontVariantNumeric: "tabular-nums" }, children: formatElapsed(elapsedMs) })] })) : null] }), _jsx(VisuallyHidden, { role: "status", "aria-live": "polite", children: announcement }), status === "denied" || status === "unsupported" ? (_jsx(Text, { role: "alert", mt: 1, fontSize: "0.75rem", color: colors.semanticText.error, children: status === "denied" ? text.permissionDenied : text.unsupported })) : null] }));
+};
+export default AudioRecorder;

package/dist/esm/Components/AudioRecorder/AudioRecorderProps.js

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

package/dist/esm/Components/Breadcrumbs/Breadcrumbs.js

@@ -1,19 +1,42 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Box, Breadcrumb, BreadcrumbItem, BreadcrumbLink, useTheme } from "@chakra-ui/react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Menu, MenuButton, MenuItem, MenuList, useTheme, } from "@chakra-ui/react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.js";
 import { breadcrumbInk } from "./breadcrumbInk.js";
-export default function Breadcrumbs({ spacing, separator, fontWeight, fontSize, isCurrentPage, handleClick, items, }) {
+const DEFAULT_MAX_ITEMS = 3;
+const MIN_MAX_ITEMS = 2;
+const OVERFLOW_SX = {
+    nowrap: undefined,
+    wrap: { "& ol": { flexWrap: "wrap", rowGap: "4px" }, "& li": { maxWidth: "100%" } },
+    truncate: { "& ol": { flexWrap: "nowrap" }, "& li": { minWidth: 0 } },
+};
+const collapse = (entries, maxItems) => {
+    const keep = Math.max(MIN_MAX_ITEMS, Math.floor(maxItems));
+    if (entries.length <= keep)
+        return { head: entries, hidden: [], tail: [] };
+    return { head: entries.slice(0, 1), hidden: entries.slice(1, entries.length - (keep - 1)), tail: entries.slice(entries.length - (keep - 1)) };
+};
+export default function Breadcrumbs({ spacing, separator, fontWeight, fontSize, isCurrentPage, handleClick, items, overflow = "nowrap", maxItems = DEFAULT_MAX_ITEMS, labels, "data-testid": testId, }) {
     const theme = useTheme();
     const { colors } = useCustomTheme();
     const ink = breadcrumbInk(colors);
     const effectiveSeparator = separator !== null && separator !== void 0 ? separator : (_jsx(Box, { as: "span", color: ink.separator, children: "/" }));
-    return (_jsx(Breadcrumb, { spacing: spacing, separator: effectiveSeparator, fontWeight: fontWeight, fontSize: fontSize, fontFamily: theme.fonts.body, children: items.map((item, index) => {
-            const isLast = isCurrentPage && index === items.length - 1;
-            return (_jsx(BreadcrumbItem, { isCurrentPage: isLast, children: _jsx(BreadcrumbLink, { href: item.path, color: isLast ? ink.current : ink.link, fontWeight: isLast ? 600 : fontWeight, sx: {
-                        "&:hover, &:active": { textDecoration: "none", color: isLast ? ink.current : ink.linkHover },
-                    }, onClick: (event) => {
-                        event.preventDefault();
-                        handleClick(item.path);
-                    }, children: item.label }) }, index));
-        }) }));
+    const clip = overflow !== "nowrap";
+    const clipProps = clip ? { noOfLines: 1 } : {};
+    const renderCrumb = ({ crumb, index }) => {
+        const isLast = Boolean(isCurrentPage) && index === items.length - 1;
+        const color = isLast ? ink.current : ink.link;
+        const common = { ...clipProps, title: clip ? crumb.label : undefined, color, fontWeight: isLast ? 600 : fontWeight };
+        return (_jsx(BreadcrumbItem, { isCurrentPage: isLast, children: crumb.path === undefined ? (_jsx(Box, { as: "span", "aria-current": isLast ? "page" : undefined, ...common, children: crumb.label })) : (_jsx(BreadcrumbLink, { href: crumb.path, ...common, sx: { "&:hover, &:active": { textDecoration: "none", color: isLast ? ink.current : ink.linkHover } }, onClick: (event) => {
+                    event.preventDefault();
+                    handleClick(crumb.path);
+                }, children: crumb.label })) }, index));
+    };
+    const renderMenu = (hidden) => {
+        var _a;
+        return (_jsx(BreadcrumbItem, { sx: { flexShrink: 0 }, children: _jsxs(Menu, { isLazy: true, placement: "bottom-start", children: [_jsx(MenuButton, { type: "button", "aria-label": ((_a = labels === null || labels === void 0 ? void 0 : labels.showMore) !== null && _a !== void 0 ? _a : ((n) => `Show ${n} more`))(hidden.length), color: ink.link, borderRadius: "md", px: 1, _hover: { color: ink.linkHover }, sx: focusVisibleStyles(colors), children: "\u2026" }), _jsx(MenuList, { children: hidden.map(({ crumb, index }) => (_jsx(MenuItem, { isDisabled: crumb.path === undefined, onClick: () => crumb.path !== undefined && handleClick(crumb.path), children: crumb.label }, index))) })] }) }, "overflow"));
+    };
+    const entries = items.map((crumb, index) => ({ crumb, index }));
+    const { head, hidden, tail } = overflow === "truncate" ? collapse(entries, maxItems) : { head: entries, hidden: [], tail: [] };
+    return (_jsxs(Breadcrumb, { spacing: spacing, separator: effectiveSeparator, fontWeight: fontWeight, fontSize: fontSize, fontFamily: theme.fonts.body, sx: OVERFLOW_SX[overflow], "data-testid": testId, children: [head.map(renderCrumb), hidden.length > 0 && renderMenu(hidden), tail.map(renderCrumb)] }));
 }

package/dist/esm/Components/BulkSelectionBar/BulkSelectionBar.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { Box, Flex, Text, VisuallyHidden } from "@chakra-ui/react";
+import { X } from "lucide-react";
+import Button from "../Button/Button.js";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+const FACT_SEPARATOR = " · ";
+const VARIANT_BY_TONE = {
+    default: "outline",
+    primary: "solid",
+    danger: "outline",
+};
+const SCHEME_BY_TONE = {
+    default: "gray",
+    primary: "primary",
+    danger: "red",
+};
+const TOUCH_SX = { "@media (pointer: coarse)": { minHeight: "44px", minWidth: "44px" } };
+const BulkSelectionBar = ({ selectedCount, facts, actions, onClearSelection, clearLabel = "Clear selection", countLabel, placement = "sticky", "aria-label": ariaLabel = "Selection actions", "data-testid": testId = "bulk-selection-bar", }) => {
+    const { colors } = useCustomTheme();
+    const isActive = selectedCount > 0;
+    const summary = countLabel !== null && countLabel !== void 0 ? countLabel : `${selectedCount} selected`;
+    const [announcement, setAnnouncement] = useState("");
+    useEffect(() => {
+        setAnnouncement(isActive ? summary : "");
+    }, [isActive, summary]);
+    if (!isActive)
+        return null;
+    const resolvedFacts = (facts !== null && facts !== void 0 ? facts : []).filter(Boolean);
+    const isSticky = placement === "sticky";
+    return (_jsxs(Flex, { role: "region", "aria-label": ariaLabel, "data-testid": testId, align: "center", gap: 3, wrap: "wrap", px: 4, py: 2, w: "100%", borderRadius: "lg", borderWidth: "1px", borderColor: colors.boxborder[200], bg: colors.surfaceRaised, position: isSticky ? "sticky" : "relative", bottom: isSticky ? 0 : undefined, zIndex: isSticky ? 2 : undefined, children: [_jsx(VisuallyHidden, { role: "status", "aria-live": "polite", "data-testid": "bulk-selection-announcement", children: announcement }), _jsxs(Flex, { align: "baseline", gap: 1, flex: "1", minW: "180px", wrap: "wrap", children: [_jsx(Text, { fontSize: "sm", fontWeight: 600, color: colors.text[800], "data-testid": "bulk-selection-count", children: summary }), resolvedFacts.length ? (_jsxs(Text, { fontSize: "sm", color: colors.textMuted, "data-testid": "bulk-selection-facts", children: [FACT_SEPARATOR, resolvedFacts.join(FACT_SEPARATOR)] })) : null] }), _jsxs(Flex, { align: "center", gap: 2, wrap: "wrap", children: [actions.map((action) => {
+                        var _a;
+                        const tone = (_a = action.tone) !== null && _a !== void 0 ? _a : "default";
+                        const Icon = action.icon;
+                        return (_jsx(Button, { size: "sm", variant: VARIANT_BY_TONE[tone], colorScheme: SCHEME_BY_TONE[tone], onClick: action.onClick, isDisabled: action.isDisabled, isLoading: action.isLoading, loadingText: action.label, leftIcon: Icon ? _jsx(Icon, { size: 16, "aria-hidden": "true" }) : undefined, sx: TOUCH_SX, "data-testid": `bulk-action-${action.id}`, "data-tone": tone, children: action.label }, action.id));
+                    }), _jsx(Box, { children: _jsx(Button, { size: "sm", variant: "ghost", colorScheme: "gray", onClick: onClearSelection, leftIcon: _jsx(X, { size: 16, "aria-hidden": "true" }), sx: TOUCH_SX, "data-testid": "bulk-selection-clear", children: clearLabel }) })] })] }));
+};
+export default BulkSelectionBar;

package/dist/esm/Components/BulkSelectionBar/BulkSelectionBarProps.js

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

package/dist/esm/Components/BulkSelectionBar/index.js

@@ -0,0 +1 @@
+export { default as BulkSelectionBar } from "./BulkSelectionBar.js";

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

@@ -0,0 +1,168 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { Box, Flex, Grid, Text } from "@chakra-ui/react";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import Button from "../Button/Button.js";
+import Skeletons from "../Skeletons/Skeletons.js";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.js";
+import { resolveSoftTone, toneScale } from "../../Theme/tokens/builders/tone.js";
+import { dayKey, eventsOnDay, formatFullDate, formatTitle, isNavKey, isSameDay, isWeekend, layoutWeek, moveFocus, shiftAnchor, startOfDay, visibleWeeks, weekdayLabels, } from "./calendarMath.js";
+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 = resolveSoftTone(colors, 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: focusVisibleStyles(colors),
+    };
+    return event.href ? (_jsx(Box, { as: "a", href: event.href, ...common, children: event.label })) : (_jsx(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 } = useCustomTheme();
+    const text = { ...DEFAULT_LABELS, ...labels };
+    const today = new Date();
+    const anchor = startOfDay(date);
+    const anchorKey = dayKey(anchor);
+    const weeks = visibleWeeks(view, anchor, weekStartsOn);
+    const columns = weeks[0].length;
+    const visibleKeys = new Set(weeks.flat().map(dayKey));
+    const shownEvents = isLoading ? [] : events;
+    const maxLanes = MAX_LANES[view];
+    const [focusedKey, setFocusedKey] = useState(anchorKey);
+    const pendingFocus = useRef(false);
+    const cellRefs = useRef(new Map());
+    const activeKey = visibleKeys.has(focusedKey) ? focusedKey : visibleKeys.has(anchorKey) ? anchorKey : dayKey(weeks[0][0]);
+    useEffect(() => {
+        setFocusedKey(anchorKey);
+    }, [anchorKey]);
+    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 (isNavKey(e.key)) {
+            e.preventDefault();
+            const next = moveFocus(view, cellDate, e.key, weekStartsOn);
+            const inRange = visibleKeys.has(dayKey(next));
+            if (!inRange && !onDateChange)
+                return;
+            setFocusedKey(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 = weekdayLabels(locale, weekStartsOn, "short");
+    const weekdayLong = weekdayLabels(locale, weekStartsOn, "long");
+    const headerDays = view === "day" ? [(anchor.getDay() - weekStartsOn + 7) % 7] : weekdayShort.map((_, i) => i);
+    const title = 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 = dayKey(day);
+        const isToday = isSameDay(day, today);
+        const inMonth = view !== "month" || day.getMonth() === anchor.getMonth();
+        const surface = isWeekend(day) ? colors.backgroundColor.secondary : colors.backgroundColor.main;
+        const dayEvents = eventsOnDay(shownEvents, day);
+        const hidden = layout.hiddenByCol[col];
+        const active = key === activeKey;
+        const label = `${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 = (_jsx(Box, { mt: 1, "aria-hidden": true, children: (weekIndex * 7 + col) % 3 === 0 ? _jsx(Skeletons, { type: "skeleton", height: CHIP_HEIGHT, borderRadius: "md" }) : null }));
+        }
+        else if (renderDayCell) {
+            body = _jsx(Box, { mt: 1, children: renderDayCell(day, dayEvents) });
+        }
+        else if (view === "day") {
+            body = (_jsx(Flex, { direction: "column", gap: 1, mt: 2, children: dayEvents.map((event) => (_jsx(EventChip, { event: event, colors: colors, surface: surface, onEventClick: onEventClick }, event.id))) }));
+        }
+        else {
+            body = (_jsxs(_Fragment, { children: [_jsx(Box, { position: "relative", mt: 1, h: `calc(${layout.visibleLanes} * ${LANE_HEIGHT})`, children: ownSegments.map((s) => (_jsx(EventChip, { event: s.event, colors: colors, surface: surface, onEventClick: onEventClick, segment: s }, s.event.id))) }), hidden > 0 ? (_jsx(Box, { as: "button", type: "button", "aria-label": text.moreLabel(hidden, formatFullDate(day, locale)), onClick: () => drillIntoDay(day), px: 1, fontSize: "0.75rem", fontWeight: 600, color: colors.header[900], textAlign: "left", textDecoration: "underline", sx: focusVisibleStyles(colors), children: text.more(hidden) })) : null] }));
+        }
+        return (_jsxs(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: [_jsx(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 (_jsxs(Box, { children: [_jsxs(Flex, { align: "center", justify: "space-between", wrap: "wrap", gap: 2, mb: 3, children: [_jsxs(Flex, { align: "center", gap: 2, children: [onDateChange ? (_jsxs(_Fragment, { children: [_jsx(Button, { label: text.today, size: "sm", variant: "outline", onClick: () => onDateChange(startOfDay(new Date())) }), _jsx(Button, { "aria-label": text.previous, size: "sm", variant: "ghost", leftIcon: _jsx(ChevronLeft, { size: 16, "aria-hidden": true }), onClick: () => onDateChange(shiftAnchor(view, anchor, -1)) }), _jsx(Button, { "aria-label": text.next, size: "sm", variant: "ghost", leftIcon: _jsx(ChevronRight, { size: 16, "aria-hidden": true }), onClick: () => onDateChange(shiftAnchor(view, anchor, 1)) })] })) : null, _jsx(Text, { as: "h2", fontSize: "1rem", fontWeight: 600, color: colors.header[900], children: title })] }), onViewChange ? (_jsx(Flex, { role: "group", "aria-label": text[view], gap: 1, children: VIEWS.map((v) => (_jsx(Button, { label: text[v], size: "sm", variant: v === view ? "solid" : "outline", "aria-pressed": v === view, onClick: () => onViewChange(v) }, v))) })) : null] }), _jsx(Box, { overflowX: "auto", children: _jsxs(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: [_jsx(Grid, { role: "row", templateColumns: template, children: headerDays.map((i) => (_jsx(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 = layoutWeek(week, shownEvents, maxLanes);
+                            return (_jsx(Grid, { role: "row", templateColumns: template, children: week.map((day, col) => renderCell(day, col, weekIndex, layout)) }, dayKey(week[0])));
+                        })] }) })] }));
+};
+export default CalendarGrid;

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

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

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/Card/Card.js

@@ -1,11 +1,21 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { Card as ChakraCard, CardBody, CardFooter, CardHeader, } from "@chakra-ui/react";
-const Card = 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 = 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 (_jsxs(ChakraCard, { ref: ref, colorScheme: colorScheme !== null && colorScheme !== void 0 ? colorScheme : color, ...cardProps, children: [header && _jsx(CardHeader, { children: header }), _jsx(CardBody, { display: "flex", flexDirection: direction, alignItems: align, justifyContent: justify, ...bodyProps, children: children }), footer && _jsx(CardFooter, { children: footer })] }));
+    const sx = padding ? { "--card-padding": PADDING_VALUES[padding], ...cardProps.sx } : cardProps.sx;
+    return (_jsxs(ChakraCard, { ref: ref, colorScheme: colorScheme !== null && colorScheme !== void 0 ? colorScheme : color, ...cardProps, sx: sx, children: [header && (_jsx(CardHeader, { sx: padding === "none" ? { "--card-padding": HEADER_PADDING_WHEN_FLUSH } : undefined, children: header })), _jsx(CardBody, { display: "flex", flexDirection: direction, alignItems: align, justifyContent: justify, ...bodyProps, children: children }), footer && _jsx(CardFooter, { children: footer })] }));
 });
 export default Card;