pixelize-design-library 3.0.1-beta.1 → 3.1.1

package/dist/Components/ButtonGroupIcon/ButtonGroupIcon.js

@@ -1,115 +1,94 @@
 "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;
-    };
-})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = ButtonGroupIcon;
-var react_1 = __importStar(require("react"));
-var react_2 = require("@chakra-ui/react");
-var useCustomTheme_1 = require("../../Theme/useCustomTheme");
-function ButtonGroupIcon(_a) {
-    var _b, _c;
-    var leftIcon = _a.leftIcon, rightIcon = _a.rightIcon, onLeftIconClick = _a.onLeftIconClick, onRightIconClick = _a.onRightIconClick, buttonText = _a.buttonText, onButtonClick = _a.onButtonClick, onButtongroupClick = _a.onButtongroupClick, size = _a.size, variant = _a.variant, color = _a.color, buttonGroupStyle = _a.buttonGroupStyle, buttonGroupLeftIconStyle = _a.buttonGroupLeftIconStyle, buttonGroupRightIconStyle = _a.buttonGroupRightIconStyle, buttonStyle = _a.buttonStyle, onBlurLeftIcon = _a.onBlurLeftIcon, onBlurRightIcon = _a.onBlurRightIcon, dropdownOptions = _a.dropdownOptions, // New prop for dropdown options
-    onDropdownOptionClick = _a.onDropdownOptionClick, // New prop to handle option clicks
-    rightIconDropdown = _a.rightIconDropdown, menulistStyle = _a.menulistStyle, menuItemStyle = _a.menuItemStyle, isLoading = _a.isLoading, _d = _a.divider, divider = _d === void 0 ? true : _d, leftIconLoading = _a.leftIconLoading, RightIconLoading = _a.RightIconLoading;
-    var theme = (0, useCustomTheme_1.useCustomTheme)();
-    var _e = (0, react_1.useState)(false), isDropdownOpen = _e[0], setIsDropdownOpen = _e[1];
-    var textRef = (0, react_1.useRef)(null);
-    var _f = (0, react_1.useState)(false), isTextTruncated = _f[0], setIsTextTruncated = _f[1];
-    (0, react_1.useEffect)(function () {
-        var checkTruncation = function () {
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const gradientInk_1 = require("../../Theme/tokens/builders/gradientInk");
+const color_1 = require("../../Theme/tokens/builders/color");
+const rafThrottle_1 = require("../../Utils/rafThrottle");
+const motion_1 = require("../../Theme/tokens/primitives/motion");
+const BACKGROUND_TRANSITION = (0, motion_1.transitionFor)(["background"]);
+/** Attached left icon, text button and right icon or dropdown trigger; see ButtonGroupIconProps. */
+function ButtonGroupIcon({ leftIcon, rightIcon, onLeftIconClick, onRightIconClick, buttonText, onButtonClick, onButtongroupClick, size, variant, color, buttonGroupStyle, buttonGroupLeftIconStyle, buttonGroupRightIconStyle, buttonStyle, onBlurLeftIcon, onBlurRightIcon, dropdownOptions, // New prop for dropdown options
+onDropdownOptionClick, // New prop to handle option clicks
+rightIconDropdown, menulistStyle, menuItemStyle, isLoading, divider = true, leftIconLoading, RightIconLoading, }) {
+    const theme = (0, useCustomTheme_1.useCustomTheme)();
+    const [isDropdownOpen, setIsDropdownOpen] = (0, react_1.useState)(false);
+    const textRef = (0, react_1.useRef)(null);
+    const [isTextTruncated, setIsTextTruncated] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        const checkTruncation = () => {
             if (textRef.current) {
-                var isTruncated = textRef.current.scrollWidth > textRef.current.clientWidth;
+                const isTruncated = textRef.current.scrollWidth > textRef.current.clientWidth;
                 setIsTextTruncated(isTruncated);
             }
         };
         // Use setTimeout to ensure DOM is fully rendered
-        var timeoutId = setTimeout(checkTruncation, 0);
-        window.addEventListener("resize", checkTruncation);
-        return function () {
+        const timeoutId = setTimeout(checkTruncation, 0);
+        const onResize = (0, rafThrottle_1.rafThrottle)(checkTruncation);
+        window.addEventListener("resize", onResize);
+        return () => {
             clearTimeout(timeoutId);
-            window.removeEventListener("resize", checkTruncation);
+            onResize.cancel();
+            window.removeEventListener("resize", onResize);
         };
     }, [buttonText]);
-    var handleRightIconClick = function () {
+    const handleRightIconClick = () => {
         setIsDropdownOpen(!isDropdownOpen);
         if (onRightIconClick) {
             onRightIconClick();
         }
     };
-    var handleMenuClick = function (event, option) {
+    const handleMenuClick = (event, option) => {
         setIsDropdownOpen(false);
-        // console.log("Option clicked:", option,event)
         if (onDropdownOptionClick) {
             onDropdownOptionClick(event, option);
         }
     };
-    return (react_1.default.createElement(react_2.ButtonGroup, { size: size, isAttached: true, variant: variant, onClick: onButtongroupClick, colorScheme: color, style: buttonGroupStyle },
-        leftIcon && (react_1.default.createElement(react_2.IconButton, { "aria-label": "Left icon button", icon: leftIcon, isLoading: leftIconLoading, onClick: onLeftIconClick, onBlur: onBlurLeftIcon, style: buttonGroupLeftIconStyle, sx: {
-                backgroundColor: theme.colors.primary[500],
-                "&:hover": {
-                    backgroundColor: theme.colors.primary[400],
-                },
-            } })),
-        react_1.default.createElement(react_2.Tooltip, { label: buttonText, isDisabled: !buttonText || !isTextTruncated },
-            react_1.default.createElement(react_2.Button, { onClick: onButtonClick, style: buttonStyle, isLoading: isLoading, sx: {
-                    backgroundColor: theme.colors.primary[500],
-                    "&:hover": {
-                        backgroundColor: theme.colors.primary[400],
-                    },
-                }, borderLeft: "1px solid ".concat((_b = theme.colors) === null || _b === void 0 ? void 0 : _b.gray[300]), borderRight: "1px solid ".concat((_c = theme.colors) === null || _c === void 0 ? void 0 : _c.gray[300]), maxW: "200px" },
-                react_1.default.createElement(react_2.Box, { ref: textRef, as: "span", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", display: "block", width: "100%" }, buttonText))),
-        rightIcon && rightIconDropdown ? (react_1.default.createElement(react_2.Menu, { isOpen: isDropdownOpen, onClose: function () { return setIsDropdownOpen(false); } },
-            react_1.default.createElement(react_2.MenuButton, { as: react_2.IconButton, "aria-label": "Right icon button", icon: rightIcon, isLoading: RightIconLoading, onClick: handleRightIconClick, onBlur: onBlurRightIcon, style: buttonGroupRightIconStyle, sx: {
-                    backgroundColor: theme.colors.primary[500],
-                    "&:hover": {
-                        backgroundColor: theme.colors.primary[400],
-                    },
-                } }),
-            react_1.default.createElement(react_2.Box, { sx: { zIndex: 99 } },
-                react_1.default.createElement(react_2.MenuList, { style: menulistStyle }, dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.map(function (option, index) {
-                    var _a;
-                    return (react_1.default.createElement(react_2.MenuItem, { key: index, onClick: function (event) { return handleMenuClick(event, option); }, style: menuItemStyle, borderBottom: divider ? "1px solid ".concat((_a = theme.colors) === null || _a === void 0 ? void 0 : _a.gray[300]) : undefined, sx: {
-                            "&:last-child": {
-                                borderBottom: "none",
-                            },
-                        } }, option === null || option === void 0 ? void 0 :
-                        option.image,
-                        option.label));
-                }))))) : (rightIcon && (react_1.default.createElement(react_2.IconButton, { "aria-label": "Right icon button", icon: rightIcon, isLoading: RightIconLoading, onClick: onRightIconClick, onBlur: onBlurRightIcon, style: buttonGroupRightIconStyle, sx: {
-                backgroundColor: theme.colors.primary[500],
-                "&:hover": {
-                    backgroundColor: theme.colors.primary[400],
-                },
-            } })))));
+    // NOTE: gradient variant paints ONE continuous gradient on the group, segments stay transparent.
+    const isGradient = variant === "gradient";
+    const gradientStops = (0, gradientInk_1.resolveGradient)(theme.colors.gradient, theme.colors.white, theme.colors.black);
+    const gradientBg = (0, gradientInk_1.gradientCss)(gradientStops);
+    const gradientInk = gradientStops.ink;
+    const whiteRgb = (0, color_1.hexToRgb)(theme.colors.white);
+    const whiteOverlay = (alpha) => `rgba(${whiteRgb.r}, ${whiteRgb.g}, ${whiteRgb.b}, ${alpha})`;
+    const gradientItemSx = isGradient
+        ? {
+            color: gradientInk,
+            bg: "transparent",
+            bgImage: "none",
+            boxShadow: "none",
+            _hover: { bg: whiteOverlay(0.08), boxShadow: "none" },
+            _active: { bg: whiteOverlay(0.16) },
+        }
+        : undefined;
+    return ((0, jsx_runtime_1.jsxs)(react_2.ButtonGroup, { size: size, isAttached: true, variant: isGradient ? "solid" : variant, onClick: onButtongroupClick, colorScheme: color, style: buttonGroupStyle, sx: isGradient
+            ? { bgImage: gradientBg, color: gradientInk, borderRadius: "lg", overflow: "hidden" }
+            : undefined, children: [leftIcon && ((0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Left icon button", icon: leftIcon, isLoading: leftIconLoading, onClick: onLeftIconClick, onBlur: onBlurLeftIcon, style: buttonGroupLeftIconStyle, sx: gradientItemSx })), (0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: buttonText, isDisabled: !buttonText || !isTextTruncated, children: (0, jsx_runtime_1.jsx)(react_2.Button, { onClick: onButtonClick, style: buttonStyle, isLoading: isLoading, borderLeft: "1px solid", borderRight: "1px solid", borderColor: whiteOverlay(0.24), maxW: "200px", sx: gradientItemSx, children: (0, jsx_runtime_1.jsx)(react_2.Box, { ref: textRef, as: "span", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", display: "block", width: "100%", children: buttonText }) }) }), rightIcon && rightIconDropdown ? ((0, jsx_runtime_1.jsxs)(react_2.Menu, { isOpen: isDropdownOpen, onClose: () => setIsDropdownOpen(false), children: [(0, jsx_runtime_1.jsx)(react_2.MenuButton, { as: react_2.IconButton, "aria-label": "Right icon button", icon: rightIcon, isLoading: RightIconLoading, onClick: handleRightIconClick, onBlur: onBlurRightIcon, style: buttonGroupRightIconStyle, sx: gradientItemSx }), (0, jsx_runtime_1.jsx)(react_2.Box, { sx: { zIndex: 99 }, children: (0, jsx_runtime_1.jsx)(react_2.MenuList, { style: menulistStyle, bg: theme.colors.surfaceRaised, 
+                            // NOTE: Chakra's MenuItem inherits --menu-bg hardcoded to #fff via dead _dark — set it or items stay white.
+                            sx: { "--menu-bg": theme.colors.backgroundColor.light }, borderRadius: "xl", boxShadow: "lg", py: "0.375rem", minW: "12rem", overflow: "hidden", children: dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.map((option, index) => ((0, jsx_runtime_1.jsxs)(react_2.MenuItem, { onClick: (event) => handleMenuClick(event, option), style: menuItemStyle, sx: {
+                                    display: "flex",
+                                    alignItems: "center",
+                                    gap: "0.5rem",
+                                    mx: "0.375rem",
+                                    px: "0.625rem",
+                                    py: "0.5rem",
+                                    borderRadius: "lg",
+                                    fontSize: "xs-plus",
+                                    fontWeight: 500,
+                                    color: theme.colors.text[700],
+                                    transition: BACKGROUND_TRANSITION,
+                                    "& svg": { width: "16px", height: "16px" },
+                                    ...(divider
+                                        ? {
+                                            mx: 0,
+                                            borderRadius: "none",
+                                            borderBottom: "1px solid",
+                                            borderColor: theme.colors.boxborder[200],
+                                        }
+                                        : {}),
+                                    "&:last-child": { borderBottom: "none" },
+                                }, children: [option === null || option === void 0 ? void 0 : option.image, option.label] }, index))) }) })] })) : (rightIcon && ((0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Right icon button", icon: rightIcon, isLoading: RightIconLoading, onClick: onRightIconClick, onBlur: onBlurRightIcon, style: buttonGroupRightIconStyle, sx: gradientItemSx })))] }));
 }

package/dist/Components/ButtonGroupIcon/ButtonGroupIconProps.d.ts

@@ -0,0 +1,61 @@
+import { ReactElement } from "react";
+/** Themed Chakra ButtonGroup wrapper (left icon + text button + right icon/dropdown) — closed prop list, no ...rest, text via buttonText only. */
+export type ButtonGroupIconProps = {
+    /** Icon button at the left edge of the group; omitted entirely when unset. */
+    leftIcon?: ReactElement;
+    /** Icon button at the right edge; with `rightIconDropdown` it opens the `dropdownOptions` menu instead. */
+    rightIcon?: ReactElement;
+    /** Fires when the left icon button is clicked. */
+    onLeftIconClick?: () => void;
+    /** Fires when the right icon button is clicked; with `rightIconDropdown` it also toggles the menu. */
+    onRightIconClick?: () => void;
+    /** Auto-wrapped in a tooltip showing full text, but only when it visually truncates (maxW 200px). */
+    buttonText: string;
+    /** Fires when the centre text button is clicked. */
+    onButtonClick?: () => void;
+    /** Fires on every click inside the group via DOM bubbling too — not just clicks on group chrome. */
+    onButtongroupClick?: () => void;
+    /** Size of every segment; unset keeps the theme's default button size. */
+    size?: "lg" | "md" | "sm" | "xs" | "xl";
+    /** "gradient" paints one themed gradient across the whole group, with transparent segments; the rest style each segment. */
+    variant?: "solid" | "outline" | "ghost" | "link" | "unstyled" | "gradient";
+    /** Actually Chakra's colorScheme (a palette name like "red"), not a CSS text or icon color. */
+    color?: "primary" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "whiteAlpha" | "blackAlpha";
+    /** Inline style on the group wrapper, not on individual buttons. */
+    buttonGroupStyle?: React.CSSProperties;
+    /** Inline style on the left icon button. */
+    buttonGroupLeftIconStyle?: React.CSSProperties;
+    /** Inline style on the right icon button, or the dropdown trigger when `rightIconDropdown` is set. */
+    buttonGroupRightIconStyle?: React.CSSProperties;
+    /** Inline style on the centre text button. */
+    buttonStyle?: React.CSSProperties;
+    /** Fires when the left icon button loses focus. */
+    onBlurLeftIcon?: () => void;
+    /** Fires when the right icon button loses focus. */
+    onBlurRightIcon?: () => void;
+    /** Rendered only when BOTH rightIcon and rightIconDropdown are also set — otherwise silently unused. */
+    dropdownOptions?: {
+        label: string;
+        id: string | number;
+        image?: ReactElement | undefined;
+    }[];
+    /** Fires when a menu option is chosen, with the click event and the option; the menu closes first. */
+    onDropdownOptionClick?: (event: React.MouseEvent, option: {
+        label: string;
+        id: string | number;
+    }) => void;
+    /** Also requires rightIcon — without it, neither the dropdown nor a plain right icon button renders. */
+    rightIconDropdown?: boolean;
+    /** Inline style on the dropdown menu list; used only when the dropdown renders. */
+    menulistStyle?: React.CSSProperties;
+    /** Inline style on each dropdown item; used only when the dropdown renders. */
+    menuItemStyle?: React.CSSProperties;
+    /** Shows a spinner on the centre text button only; icon buttons have their own loading flags. */
+    isLoading?: boolean;
+    /** Draws a rule between dropdown items. Defaults to true; false gives inset, rounded items instead. */
+    divider?: boolean;
+    /** Shows a spinner on the left icon button. */
+    leftIconLoading?: boolean;
+    /** Capitalized "R" unlike leftIconLoading — same casing must match exactly, there is no rightIconLoading. */
+    RightIconLoading?: boolean;
+};

package/dist/Components/ButtonGroupIcon/ButtonGroupIconProps.js

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

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

@@ -0,0 +1,4 @@
+import type { CalendarGridProps } from "./CalendarGridProps";
+/** Controlled month, week or day grid that places date-granularity events as chips and spanning bars, with a toolbar and arrow-key navigation. */
+declare const CalendarGrid: ({ view, date, events, onViewChange, onDateChange, onEventClick, renderDayCell, weekStartsOn, locale, isLoading, labels, }: CalendarGridProps) => import("react/jsx-runtime").JSX.Element;
+export default CalendarGrid;

package/dist/Components/CalendarGrid/CalendarGrid.js

@@ -0,0 +1,176 @@
+"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 VisuallyHidden_1 = __importDefault(require("../VisuallyHidden/VisuallyHidden"));
+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 activationKey_1 = require("../Common/activationKey");
+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: "xs",
+        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 }));
+};
+/** Controlled month, week or day grid that places date-granularity events as chips and spanning bars, with a toolbar and arrow-key navigation. */
+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 ((0, activationKey_1.isActivationKey)(e) && 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: "xs", 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-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: (0, focusRing_styles_1.insetFocusRingShadow)(colors),
+            }, 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: "xs-plus", 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() }), (0, jsx_runtime_1.jsx)(VisuallyHidden_1.default, { position: "absolute", children: label }), 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: "md", 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: "xs", 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,65 @@
+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 = {
+    /** Unique key; also the last tie-break when ordering events that start together. */
+    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;
+    /** Chip text; also breaks ties when ordering events that start on the same day. */
+    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 = {
+    /** Toolbar button that moves the anchor to the current day. */
+    today: string;
+    /** Accessible name of the previous-period button. */
+    previous: string;
+    /** Accessible name of the next-period button. */
+    next: string;
+    /** View switcher entry for the month view. */
+    month: string;
+    /** View switcher entry for the week view. */
+    week: string;
+    /** View switcher entry for the day view. */
+    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;
+    /** Follows the date in a day cell's accessible name, e.g. "3 events"; the cell's own content comes after it. */
+    eventCount: (count: number) => string;
+};
+/** Props for the month/week/day event grid; fully controlled through `view` and `date`. */
+export interface CalendarGridProps {
+    /** Span shown: a month of weeks, one week or one day. */
+    view: CalendarGridView;
+    /** Anchor date: any day inside the month, week or day being shown. */
+    date: Date;
+    /** Events to place; multi-day events span cells and long days collapse into "+N more". */
+    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;
+    /** Overrides the default English strings; unset keys keep their default. */
+    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,62 @@
+export type CalendarView = "month" | "week" | "day";
+export type WeekStart = 0 | 1;
+export type SpanEvent = {
+    /** Unique key of the event. */
+    id: string;
+    /** First day covered; time of day is ignored. */
+    start: Date;
+    /** Last day covered, inclusive; omit for a single-day event. */
+    end?: Date;
+    /** Event text, used as a sort tie-break when laying out lanes. */
+    label: string;
+};
+export type WeekSegment<E extends SpanEvent> = {
+    /** The event this bar draws. */
+    event: E;
+    /** First column the bar covers, clamped to the week. */
+    startCol: number;
+    /** Last column the bar covers, clamped to the week. */
+    endCol: number;
+    /** Row index of the bar; lanes at or past `maxLanes` are counted in `hiddenByCol`, not drawn. */
+    lane: number;
+    /** True when the event began in an earlier week. */
+    continuesBefore: boolean;
+    /** True when the event runs into a later week. */
+    continuesAfter: boolean;
+};
+export type WeekLayout<E extends SpanEvent> = {
+    /** Every bar for the week, including those in hidden lanes. */
+    segments: WeekSegment<E>[];
+    /** Number of lanes to draw, capped at `maxLanes`. */
+    visibleLanes: number;
+    /** Per column, how many events fall in lanes that are not drawn. */
+    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;