reshaped 2.11.12 → 3.0.0

package/components/Calendar/Calendar.utils.js

@@ -1,110 +0,0 @@
-const DAYS_IN_WEEK = 7;
-const FIRST_WEEK_DAY = 1;
-/**
- * Return the ISO date format without the timezones adjustemnts
- */
-export const getLocalISODate = (args) => {
-    const { date } = args;
-    return [
-        date.getFullYear(),
-        (date.getMonth() + 1).toString().padStart(2, "0"),
-        date.getDate().toString().padStart(2, "0"),
-    ].join("-");
-};
-const getNormalizedDay = (args) => {
-    const { date, firstWeekDay = FIRST_WEEK_DAY } = args;
-    const day = date.getDay();
-    return day < firstWeekDay ? DAYS_IN_WEEK - day - firstWeekDay : day - firstWeekDay;
-};
-/**
- * Return an array of US weekday names for the calendar
- */
-export const getWeekdayNames = (args) => {
-    const { firstWeekDay = FIRST_WEEK_DAY, renderWeekDay } = args;
-    const baseDate = new Date(2021, 1, firstWeekDay); // Starting from Sunday + firstWeekDay
-    const weekdays = [];
-    for (let i = firstWeekDay; i < firstWeekDay + DAYS_IN_WEEK; i++) {
-        const weekday = renderWeekDay
-            ? renderWeekDay({ weekDay: i, date: baseDate })
-            : baseDate.toLocaleDateString("en-US", { weekday: "short" });
-        weekdays.push(weekday.slice(0, 2));
-        baseDate.setDate(baseDate.getDate() + 1);
-    }
-    return weekdays;
-};
-/**
- * Return an array of all month names
- */
-export const getMonthNames = (args) => {
-    const { renderMonthLabel } = args;
-    return new Array(12).fill(null).map((_, i) => {
-        const date = new Date(0, i);
-        return renderMonthLabel
-            ? renderMonthLabel({ month: i, date })
-            : date.toLocaleString("default", { month: "short" });
-    });
-};
-/**
- * Return an array of weeks based on the month passed to the function
- */
-export const getMonthWeeks = (args) => {
-    const { date, firstWeekDay } = args;
-    const month = date.getMonth();
-    const year = date.getFullYear();
-    const weeks = [];
-    const currentDate = new Date(year, month, 1);
-    // Fill in the days if month starts in the middle of the week
-    const firstDay = getNormalizedDay({ date: currentDate, firstWeekDay });
-    if (firstDay !== 0)
-        weeks.push(new Array(firstDay).fill(null));
-    while (month === currentDate.getMonth()) {
-        const day = getNormalizedDay({ date: currentDate, firstWeekDay });
-        if (day === 0 || !weeks.length)
-            weeks.push([]);
-        weeks[weeks.length - 1].push(new Date(currentDate));
-        currentDate.setDate(currentDate.getDate() + 1);
-    }
-    // Fill in the days if month ends in the middle of the week
-    const lastDay = getNormalizedDay({ date: currentDate, firstWeekDay });
-    if (lastDay !== 0)
-        weeks[weeks.length - 1].push(...new Array(7 - lastDay).fill(null));
-    return weeks;
-};
-export const getFocusableDates = (rootEl) => {
-    return ((rootEl === null || rootEl === void 0 ? void 0 : rootEl.querySelectorAll("[data-rs-date]")) || []);
-};
-export const changeDate = (date, delta) => new Date(date.getFullYear(), date.getMonth(), date.getDate() + delta);
-export const setMonthTo = (date, value) => {
-    const resultDate = new Date(date);
-    resultDate.setMonth(value);
-    return resultDate;
-};
-export const setMonthToPrevious = (date) => {
-    return setMonthTo(date, date.getMonth() - 1);
-};
-export const setMonthToNext = (date) => {
-    return setMonthTo(date, date.getMonth() + 1);
-};
-export const setYearTo = (date, value) => {
-    const resultDate = new Date(date);
-    resultDate.setFullYear(value);
-    return resultDate;
-};
-export const setYearToPrevious = (date) => {
-    return setYearTo(date, date.getFullYear() - 1);
-};
-export const setYearToNext = (date) => {
-    return setYearTo(date, date.getFullYear() + 1);
-};
-export const applyNavigationBounds = (args) => {
-    const { date, min, max } = args;
-    const currentMonth = date.getMonth();
-    const currentYear = date.getFullYear();
-    const prevMonthLastDate = new Date(currentYear, currentMonth, 0);
-    const nextMonthFirstDate = setMonthToNext(date);
-    nextMonthFirstDate.setDate(0);
-    return {
-        isFirstMonth: min && min > prevMonthLastDate,
-        isLastMonth: max && max < nextMonthFirstDate,
-    };
-};

package/components/Calendar/CalendarControlled.js

@@ -1,69 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from "react";
-import View from "../View/index.js";
-import { onNextFrame } from "../../utilities/animation.js";
-import { setMonthToPrevious, setMonthToNext, setMonthTo, setYearToNext, setYearToPrevious, applyNavigationBounds, } from "./Calendar.utils.js";
-import useCalendarKeyboardNavigation from "./useCalendarKeyboardNavigation.js";
-import CalendarMonth from "./CalendarMonth.js";
-import CalendarYear from "./CalendarYear.js";
-import CalendarControls from "./CalendarControls.js";
-const CalendarControlled = (props) => {
-    const { value, onChange, defaultMonth, min, max, range, firstWeekDay, renderMonthLabel, renderSelectedMonthLabel, renderWeekDay, previousMonthAriaLabel, previousYearAriaLabel, nextMonthAriaLabel, nextYearAriaLabel, monthSelectionAriaLabel, renderMonthAriaLabel, renderDateAriaLabel, } = props;
-    const [selectionMode, setSelectionMode] = React.useState("date");
-    const [monthDate, setMonthDate] = React.useState(defaultMonth || new Date());
-    const [hoveredDate, setHoveredDate] = React.useState(null);
-    const monthTitleRef = React.useRef(null);
-    const prevSelectionModeRef = React.useRef(selectionMode);
-    const bounds = applyNavigationBounds({ date: monthDate, min, max });
-    const selectionRootRef = React.useRef(null);
-    const handlePreviousClick = () => {
-        if (selectionMode === "month") {
-            setMonthDate((prev) => setYearToPrevious(prev));
-            return;
-        }
-        setMonthDate((prev) => setMonthToPrevious(prev));
-    };
-    const handleNextClick = () => {
-        if (selectionMode === "month") {
-            setMonthDate((prev) => setYearToNext(prev));
-            return;
-        }
-        setMonthDate((prev) => setMonthToNext(prev));
-    };
-    const handleMonthTitleClick = () => {
-        setSelectionMode("month");
-    };
-    const handleMonthClick = (i) => {
-        setMonthDate((prev) => setMonthTo(prev, i));
-        setSelectionMode("date");
-    };
-    const handleDateHover = (date) => {
-        setHoveredDate(date);
-    };
-    const handleDateHoverEnd = (date) => {
-        if (hoveredDate && +hoveredDate === +date)
-            setHoveredDate(null);
-    };
-    React.useEffect(() => {
-        if (selectionMode === "date" && selectionMode !== prevSelectionModeRef.current) {
-            onNextFrame(() => {
-                var _a;
-                (_a = monthTitleRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-            });
-        }
-        prevSelectionModeRef.current = selectionMode;
-    }, [selectionMode]);
-    useCalendarKeyboardNavigation({
-        monthDate,
-        rootRef: selectionRootRef,
-        changeToNextMonth: handleNextClick,
-        changeToPreviousMonth: handlePreviousClick,
-        // Each row has 7 days in date selection and 3 months in month
-        verticalDelta: selectionMode === "date" ? 7 : 3,
-        min,
-        max,
-    });
-    return (_jsxs(View, { gap: 2, children: [_jsx(CalendarControls, { renderSelectedMonthLabel: renderSelectedMonthLabel, monthDate: monthDate, selectionMode: selectionMode, isFirstMonth: bounds.isFirstMonth, isLastMonth: bounds.isLastMonth, monthTitleRef: monthTitleRef, onMonthTitleClick: handleMonthTitleClick, onNextClick: handleNextClick, onPreviousClick: handlePreviousClick, previousMonthAriaLabel: previousMonthAriaLabel, previousYearAriaLabel: previousYearAriaLabel, nextMonthAriaLabel: nextMonthAriaLabel, nextYearAriaLabel: nextYearAriaLabel, monthSelectionAriaLabel: monthSelectionAriaLabel }), _jsxs(View.Item, { attributes: { ref: selectionRootRef }, children: [selectionMode === "date" && (_jsx(CalendarMonth, { date: monthDate, value: value, onChange: onChange, min: min, max: max, range: range, firstWeekDay: firstWeekDay, hoveredDate: hoveredDate, onDateHover: handleDateHover, onDateHoverEnd: handleDateHoverEnd, renderWeekDay: renderWeekDay, renderDateAriaLabel: renderDateAriaLabel })), selectionMode === "month" && (_jsx(CalendarYear, { monthDate: monthDate, onMonthClick: handleMonthClick, renderMonthLabel: renderMonthLabel, renderMonthAriaLabel: renderMonthAriaLabel, min: min, max: max }))] })] }));
-};
-export default CalendarControlled;

package/components/Calendar/CalendarControls.js

@@ -1,46 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from "react";
-import Button from "../Button/index.js";
-import View from "../View/index.js";
-import Hidden from "../Hidden/index.js";
-import Text from "../Text/index.js";
-import HiddenVisually from "../HiddenVisually/index.js";
-import IconChevronLeft from "../../icons/ChevronLeft.js";
-import IconChevronRight from "../../icons/ChevronRight.js";
-import { onNextFrame } from "../../utilities/animation.js";
-import s from "./Calendar.module.css";
-const CalendarControls = (props) => {
-    const { selectionMode, onMonthTitleClick, monthTitleRef, monthDate, renderSelectedMonthLabel, isFirstMonth, isLastMonth, onNextClick, onPreviousClick, monthSelectionAriaLabel = "Select a month", previousMonthAriaLabel = "Previous month", previousYearAriaLabel = "Previous year", nextMonthAriaLabel = "Next month", nextYearAriaLabel = "Next year", } = props;
-    const prevRef = React.useRef(null);
-    const nextRef = React.useRef(null);
-    React.useEffect(() => {
-        if (!isFirstMonth)
-            return;
-        if (document.activeElement !== prevRef.current)
-            return;
-        const targetEl = nextRef.current || monthTitleRef.current;
-        onNextFrame(() => {
-            targetEl === null || targetEl === void 0 ? void 0 : targetEl.focus();
-        });
-    }, [isFirstMonth, monthTitleRef]);
-    React.useEffect(() => {
-        if (!isLastMonth)
-            return;
-        if (document.activeElement !== nextRef.current)
-            return;
-        const targetEl = prevRef.current || monthTitleRef.current;
-        onNextFrame(() => {
-            targetEl === null || targetEl === void 0 ? void 0 : targetEl.focus();
-        });
-    }, [isLastMonth, monthTitleRef]);
-    return (_jsxs(View, { direction: "row", gap: 2, align: "center", children: [_jsx(Hidden, { visibility: true, hide: isFirstMonth, children: _jsx("div", { className: s.control, children: _jsx(Button, { variant: "ghost", icon: IconChevronLeft, onClick: onPreviousClick, attributes: {
-                            ref: prevRef,
-                            "aria-label": selectionMode === "date" ? previousMonthAriaLabel : previousYearAriaLabel,
-                        } }) }) }), _jsxs(View.Item, { grow: true, children: [selectionMode === "date" && (_jsxs(Button, { fullWidth: true, variant: "ghost", onClick: onMonthTitleClick, attributes: { ref: monthTitleRef }, children: [renderSelectedMonthLabel
-                                ? renderSelectedMonthLabel({ date: monthDate })
-                                : monthDate.toLocaleDateString("en-US", { month: "long", year: "numeric" }), _jsx(HiddenVisually, { children: monthSelectionAriaLabel })] })), selectionMode === "month" && (_jsx(Text, { align: "center", weight: "medium", children: monthDate.toLocaleDateString("en-US", { year: "numeric" }) }))] }), _jsx(Hidden, { visibility: true, hide: isLastMonth, children: _jsx("div", { className: s.control, children: _jsx(Button, { variant: "ghost", icon: IconChevronRight, onClick: onNextClick, attributes: {
-                            ref: nextRef,
-                            "aria-label": selectionMode === "date" ? nextMonthAriaLabel : nextYearAriaLabel,
-                        } }) }) })] }));
-};
-export default CalendarControls;

package/components/Calendar/CalendarDate.js

@@ -1,57 +0,0 @@
-"use client";
-import { jsx as _jsx } from "react/jsx-runtime";
-import Actionable from "../Actionable/index.js";
-import { classNames } from "../../utilities/helpers.js";
-import { getLocalISODate } from "./Calendar.utils.js";
-import s from "./Calendar.module.css";
-const CalendarDate = (props) => {
-    const { date, startValue, endValue, isActiveStart, isActiveEnd, disabled, focusable, onChange, range, hoveredDate, onDateHover, onDateHoverEnd, renderAriaLabel, } = props;
-    if (!date)
-        return _jsx("td", { className: s.cell, "aria-hidden": "true" });
-    const inRange = startValue &&
-        startValue < date &&
-        ((endValue && endValue > date) || (hoveredDate && !endValue && hoveredDate > date));
-    const dateClassNames = classNames([
-        s.cell,
-        !range && isActiveStart && s["cell--active-single"],
-        isActiveStart && s["cell--active-start"],
-        (isActiveEnd ||
-            (!endValue && isActiveStart && !(hoveredDate && startValue && hoveredDate > startValue))) &&
-            s["cell--active-end"],
-        inRange && s["cell--in-range"],
-    ]);
-    const handleClick = () => {
-        if (!range) {
-            onChange === null || onChange === void 0 ? void 0 : onChange({ value: date });
-            return;
-        }
-        const bothDatesSelected = startValue && endValue;
-        const noneDatesSelected = !startValue && !endValue;
-        const selectingBeforeStart = startValue && date < startValue;
-        const selectingStart = bothDatesSelected || noneDatesSelected || selectingBeforeStart;
-        const start = selectingStart ? date : startValue;
-        const end = !selectingStart ? date : null;
-        onChange === null || onChange === void 0 ? void 0 : onChange({ value: { start, end } });
-    };
-    const handleMouseEnter = () => {
-        onDateHover(date);
-    };
-    const handleMouseLeave = () => {
-        onDateHoverEnd(date);
-    };
-    return (_jsx("td", { className: dateClassNames, role: disabled ? "presentation" : "gridcell", children: _jsx(Actionable, { fullWidth: true, insetFocus: true, className: s["cell-button"], disabled: disabled, onClick: handleClick, attributes: {
-                role: "checkbox",
-                tabIndex: focusable ? 0 : -1,
-                "aria-hidden": disabled,
-                "aria-label": renderAriaLabel
-                    ? renderAriaLabel({ date })
-                    : date.toLocaleDateString("en-us", { month: "long", day: "numeric", weekday: "long" }),
-                "aria-checked": isActiveStart || isActiveEnd,
-                "data-rs-date": getLocalISODate({ date }),
-                onMouseEnter: handleMouseEnter,
-                onMouseLeave: handleMouseLeave,
-                onFocus: handleMouseEnter,
-                onBlur: handleMouseLeave,
-            }, children: date.getDate() }) }));
-};
-export default CalendarDate;

package/components/Calendar/CalendarMonth.js

@@ -1,51 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { getMonthWeeks, getWeekdayNames, getLocalISODate } from "./Calendar.utils.js";
-import CalendarDate from "./CalendarDate.js";
-import s from "./Calendar.module.css";
-const CalendarMonth = (props) => {
-    const { date, value, onChange, min, max, range, firstWeekDay, hoveredDate, onDateHover, onDateHoverEnd, renderWeekDay, renderDateAriaLabel, } = props;
-    let foundFocusableDate = false;
-    const month = date.getMonth();
-    const weeks = getMonthWeeks({ date, firstWeekDay });
-    const weekdayNames = getWeekdayNames({ firstWeekDay, renderWeekDay });
-    return (_jsxs("table", { className: s.selection, role: "grid", children: [_jsx("thead", { "aria-hidden": "true", children: _jsx("tr", { children: weekdayNames.map((dayName) => (_jsx("th", { className: s.weekday, scope: "col", children: dayName }, dayName))) }) }), _jsx("tbody", { children: weeks.map((week) => {
-                    var _a;
-                    const key = [month, (_a = week[0]) === null || _a === void 0 ? void 0 : _a.getDate()].filter(Boolean).join("-");
-                    return (_jsx("tr", { className: s.row, children: week.map((date, index) => {
-                            const disabled = !!date && ((min && date < min) || (max && date > max));
-                            const month = date === null || date === void 0 ? void 0 : date.getMonth();
-                            const today = new Date();
-                            const isoToday = getLocalISODate({ date: today });
-                            const startValue = value && "start" in value ? value.start : value;
-                            const endValue = value && "end" in value ? value.end : value;
-                            const isoDate = date && getLocalISODate({ date });
-                            const isoStartValue = startValue && getLocalISODate({ date: startValue });
-                            const isoEndValue = endValue && getLocalISODate({ date: endValue });
-                            const isActiveStart = !!isoDate && !!isoStartValue && isoDate === isoStartValue;
-                            const isActiveEnd = !!isoDate && !!isoEndValue && isoDate === isoEndValue;
-                            /**
-                             * Decide if date has to be focusable with Tab (only one date should be)
-                             * 1. If there is a selected value - it's focusable
-                             * 2. Otherwise, today's date is focusable
-                             * 3. Otherwise, first non-disabled date is focusable
-                             */
-                            let focusable = false;
-                            if (!foundFocusableDate && date) {
-                                if (!!startValue && startValue.getMonth() === (date === null || date === void 0 ? void 0 : date.getMonth())) {
-                                    focusable = getLocalISODate({ date: startValue }) === getLocalISODate({ date });
-                                }
-                                else if (isoDate && month === today.getMonth()) {
-                                    focusable = isoDate >= isoToday && !disabled;
-                                }
-                                else {
-                                    focusable = !disabled;
-                                }
-                            }
-                            if (focusable)
-                                foundFocusableDate = true;
-                            return (_jsx(CalendarDate, { date: date, disabled: disabled, range: range, focusable: focusable, startValue: startValue, endValue: endValue, isActiveStart: isActiveStart, isActiveEnd: isActiveEnd, onChange: onChange, hoveredDate: hoveredDate, onDateHover: onDateHover, onDateHoverEnd: onDateHoverEnd, renderAriaLabel: renderDateAriaLabel }, index));
-                        }) }, key));
-                }) })] }));
-};
-export default CalendarMonth;

package/components/Calendar/CalendarUncontrolled.js

@@ -1,30 +0,0 @@
-"use client";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import { jsx as _jsx } from "react/jsx-runtime";
-import React from "react";
-import CalendarControlled from "./CalendarControlled.js";
-const CalendarUncontrolled = (props) => {
-    const { onChange, defaultValue, range } = props, controlledProps = __rest(props, ["onChange", "defaultValue", "range"]);
-    const [value, setValue] = React.useState(defaultValue || null);
-    if (range) {
-        return (_jsx(CalendarControlled, Object.assign({ range: true }, controlledProps, { value: value, onChange: (args) => {
-                setValue(args.value);
-                onChange === null || onChange === void 0 ? void 0 : onChange(args);
-            } })));
-    }
-    return (_jsx(CalendarControlled, Object.assign({}, controlledProps, { value: value, onChange: (args) => {
-            setValue(args.value);
-            onChange === null || onChange === void 0 ? void 0 : onChange(args);
-        } })));
-};
-export default CalendarUncontrolled;

package/components/Calendar/CalendarYear.js

@@ -1,44 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import React from "react";
-import Actionable from "../Actionable/index.js";
-import { onNextFrame } from "../../utilities/animation.js";
-import { getMonthNames } from "./Calendar.utils.js";
-import s from "./Calendar.module.css";
-const MONTHS_PER_ROW = 3;
-const CalendarYear = (props) => {
-    const { renderMonthLabel, renderMonthAriaLabel, monthDate, min, max, onMonthClick } = props;
-    const rootRef = React.useRef(null);
-    const monthNames = getMonthNames({ renderMonthLabel });
-    const rows = [];
-    for (let i = 0; i < monthNames.length; i += MONTHS_PER_ROW) {
-        const chunk = monthNames.slice(i, i + MONTHS_PER_ROW);
-        rows.push(chunk);
-    }
-    React.useEffect(() => {
-        var _a;
-        const focusableEl = (_a = rootRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('[tabIndex="0"]');
-        // Waitinf for key press events to finish before focusing the month
-        // To avoid it trigger the month click
-        onNextFrame(() => {
-            focusableEl === null || focusableEl === void 0 ? void 0 : focusableEl.focus();
-        });
-    }, []);
-    return (_jsx("table", { ref: rootRef, role: "grid", className: s.selection, children: _jsx("tbody", { children: rows.map((row, i) => (_jsx("tr", { className: s.row, children: row.map((name, j) => {
-                    const monthIndex = i * MONTHS_PER_ROW + j;
-                    const date = new Date(monthDate.getFullYear(), monthIndex);
-                    const isOutsideMinBound = min && min.getFullYear() >= date.getFullYear() && min.getMonth() > date.getMonth();
-                    const isOutsideMaxBound = max && max.getFullYear() <= date.getFullYear() && max.getMonth() < date.getMonth();
-                    const disabled = isOutsideMaxBound || isOutsideMinBound;
-                    return (_jsx("td", { role: disabled ? "presentation" : "gridcell", className: s.cell, children: _jsx(Actionable, { fullWidth: true, insetFocus: true, className: s["cell-button"], disabled: disabled, onClick: () => onMonthClick(monthIndex), attributes: {
-                                tabIndex: monthIndex === monthDate.getMonth() ? 0 : -1,
-                                "aria-hidden": disabled,
-                                "aria-label": renderMonthAriaLabel
-                                    ? renderMonthAriaLabel({ month: monthIndex })
-                                    : name,
-                                "data-rs-date": `${monthDate.getFullYear()}-${(monthIndex + 1)
-                                    .toString()
-                                    .padStart(2, "0")}`,
-                            }, children: name }) }, name));
-                }) }, i))) }) }));
-};
-export default CalendarYear;

package/components/Calendar/useCalendarKeyboardNavigation.js

@@ -1,66 +0,0 @@
-import React from "react";
-import useHotkeys from "../../hooks/useHotkeys.js";
-import * as keys from "../../constants/keys.js";
-import { getFocusableDates } from "./Calendar.utils.js";
-const useCalendarKeyboardNavigation = (props) => {
-    const { rootRef, changeToNextMonth, changeToPreviousMonth, monthDate, verticalDelta, min, max } = props;
-    const overflowCountRef = React.useRef(0);
-    const focusDate = React.useCallback((args) => {
-        const { delta, onMonthChange } = args;
-        const focusedEl = document.activeElement;
-        if (!focusedEl)
-            return;
-        const focusable = getFocusableDates(rootRef.current);
-        const focusableArr = Array.from(focusable);
-        const currentIndex = focusableArr.findIndex((el) => el === focusedEl);
-        const nextIndex = currentIndex + delta;
-        const nextEl = focusableArr[nextIndex];
-        const currentDateString = focusedEl.getAttribute("data-rs-date");
-        if (!currentDateString)
-            return;
-        const [year, month, date] = currentDateString === null || currentDateString === void 0 ? void 0 : currentDateString.split("-").map(Number);
-        let nextDate;
-        if (date) {
-            nextDate = new Date(year, month - 1, date + delta);
-        }
-        else if (delta > 0) {
-            nextDate = new Date(year, month - 1 + delta, 1);
-        }
-        else {
-            // If moving back in month navigation - check if the last date of that month is enabled
-            // We increase the delta, but set date to 0 which is the last date of the previous month
-            nextDate = new Date(year, month - 1 + delta + 1, 0);
-        }
-        const disabled = (min && nextDate < min) || (max && nextDate > max);
-        if (disabled)
-            return;
-        if (nextEl) {
-            // If element is found but disabled - we do nothing and still keep the current month
-            nextEl.focus();
-            return;
-        }
-        overflowCountRef.current = nextIndex < 0 ? nextIndex : nextIndex - (focusableArr.length - 1);
-        onMonthChange();
-    }, [rootRef, min, max]);
-    /**
-     * Apply focus after switching the month based on the overflow value
-     */
-    React.useEffect(() => {
-        const count = overflowCountRef.current;
-        if (count === 0)
-            return;
-        const els = getFocusableDates(rootRef.current);
-        const targetIndex = count < 0 ? els.length + count : count - 1;
-        const targetEl = els[targetIndex];
-        if (targetEl)
-            targetEl.focus();
-        overflowCountRef.current = 0;
-    }, [monthDate, rootRef]);
-    useHotkeys({
-        [keys.LEFT]: () => focusDate({ delta: -1, onMonthChange: changeToPreviousMonth }),
-        [keys.RIGHT]: () => focusDate({ delta: 1, onMonthChange: changeToNextMonth }),
-        [keys.UP]: () => focusDate({ delta: -verticalDelta, onMonthChange: changeToPreviousMonth }),
-        [keys.DOWN]: () => focusDate({ delta: verticalDelta, onMonthChange: changeToNextMonth }),
-    }, [changeToNextMonth, changeToPreviousMonth, focusDate, verticalDelta], { ref: rootRef, preventDefault: true });
-};
-export default useCalendarKeyboardNavigation;

package/components/Card/Card.d.ts

@@ -1,17 +0,0 @@
-import React from "react";
-import type * as T from "./Card.types";
-declare const Card: React.ForwardRefExoticComponent<{
-    padding?: import("../..").Responsive<number> | undefined;
-    bleed?: import("../..").Responsive<number> | undefined;
-    selected?: boolean | undefined;
-    elevated?: boolean | undefined;
-    children?: React.ReactNode;
-    onClick?: ((e: React.KeyboardEvent<HTMLElement> | React.MouseEvent<HTMLElement, MouseEvent>) => void) | undefined;
-    href?: string | undefined;
-    as?: keyof JSX.IntrinsicElements | undefined;
-    className?: import("../../types/global").ClassName;
-    attributes?: (import("../../types/global").Attributes<keyof JSX.IntrinsicElements, T.Props<"div">> & Omit<import("../../types/global").Attributes<"button", void>, "ref"> & Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, `data-${string}` | "form" | "slot" | "style" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "accessKey" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "nonce" | "spellCheck" | "translate" | "radioGroup" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "disabled" | "color" | "suppressHydrationWarning" | "id" | "lang" | "tabIndex" | "role" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "type" | "value" | keyof React.ClassAttributes<HTMLButtonElement> | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name"> & {
-        ref?: React.RefObject<HTMLAnchorElement | HTMLButtonElement> | undefined;
-    }) | undefined;
-} & Pick<import("../View").ViewProps, "height"> & React.RefAttributes<HTMLElement>>;
-export default Card;

package/components/Card/Card.js

@@ -1,30 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import { classNames } from "../../utilities/helpers.js";
-import Actionable from "../Actionable/index.js";
-import s from "./Card.module.css";
-import getRadiusStyles from "../../styles/radius/index.js";
-import getBleedStyles from "../../styles/bleed/index.js";
-import getPaddingStyles from "../../styles/padding/index.js";
-import getHeightStyles from "../../styles/height/index.js";
-const Card = forwardRef((props, ref) => {
-    const { padding = 4 } = props;
-    const { selected, elevated, bleed, height, onClick, href, children, className, attributes, 
-    /**
-     * Using any here to let TS save on type resolving, otherwise TS throws an error due to the type complexity
-     * It still resolves the attributes correctly based on the tag
-     */
-    as: TagName = "div", } = props;
-    const isActionable = !!href || !!onClick;
-    const radiusStyles = getRadiusStyles("medium");
-    const bleedStyles = getBleedStyles(bleed);
-    const paddingStyles = getPaddingStyles(padding);
-    const heightStyles = getHeightStyles(height);
-    const rootClassNames = classNames(s.root, radiusStyles === null || radiusStyles === void 0 ? void 0 : radiusStyles.classNames, bleedStyles === null || bleedStyles === void 0 ? void 0 : bleedStyles.classNames, paddingStyles === null || paddingStyles === void 0 ? void 0 : paddingStyles.classNames, heightStyles === null || heightStyles === void 0 ? void 0 : heightStyles.classNames, isActionable && s["--actionable"], elevated && s["--elevated"], selected && s["--selected"], className);
-    const style = Object.assign(Object.assign(Object.assign(Object.assign({}, attributes === null || attributes === void 0 ? void 0 : attributes.style), bleedStyles === null || bleedStyles === void 0 ? void 0 : bleedStyles.variables), paddingStyles === null || paddingStyles === void 0 ? void 0 : paddingStyles.variables), heightStyles === null || heightStyles === void 0 ? void 0 : heightStyles.variables);
-    if (isActionable) {
-        return (_jsx(Actionable, { className: rootClassNames, attributes: Object.assign(Object.assign({}, attributes), { style }), href: href, as: TagName, onClick: onClick, ref: ref, children: _jsx("span", { className: s.content, children: children }) }));
-    }
-    return (_jsx(TagName, Object.assign({}, attributes, { onClick: onClick, href: href, ref: ref, className: rootClassNames, style: style, children: _jsx("span", { className: s.content, children: children }) })));
-});
-export default Card;

package/components/Card/Card.module.css

@@ -1 +0,0 @@
-.root{--rs-border-width:1px;background:var(--rs-color-background-elevation-base);border:var(--rs-border-width) solid var(--rs-color-border-neutral-faded);color:var(--rs-color-foreground-neutral);display:block;overflow:hidden;text-align:initial;transition:var(--rs-duration-fast) var(--rs-easing-accelerate);transition-property:box-shadow,border-color}.content,.root{position:relative}.content{z-index:var(--rs-z-index-raised)}.--selected{border-color:transparent;box-shadow:0 0 0 2px var(--rs-color-border-primary);transition-timing-function:var(--rs-easing-decelerate)}.--elevated{background:var(--rs-color-background-elevation-raised);box-shadow:var(--rs-shadow-raised)}.--actionable:not(.--selected){color:inherit;cursor:pointer;outline:none;text-decoration:none}[data-rs-keyboard] .--actionable:not(.--selected):focus{box-shadow:var(--rs-focus-shadow)}.--actionable:not(.--selected):before{background:rgba(var(--rs-color-rgb-background-neutral-faded),40%);content:"";inset:0;opacity:0;pointer-events:none;position:absolute;transition:opacity var(--rs-duration-fast) var(--rs-easing-standard)}.--actionable:not(.--selected):hover:before{opacity:1}

package/components/Card/Card.types.d.ts

@@ -1,16 +0,0 @@
-import type React from "react";
-import type { ActionableProps } from "../Actionable";
-import type { ViewProps } from "../View";
-import type * as G from "../../types/global";
-export type Props<TagName extends keyof JSX.IntrinsicElements = "div"> = {
-    padding?: G.Responsive<number>;
-    bleed?: G.Responsive<number>;
-    selected?: boolean;
-    elevated?: boolean;
-    children?: React.ReactNode;
-    onClick?: ActionableProps["onClick"];
-    href?: string;
-    as?: TagName;
-    className?: G.ClassName;
-    attributes?: G.Attributes<TagName, Props> & ActionableProps["attributes"];
-} & Pick<ViewProps, "height">;

package/components/Card/tests/Card.stories.d.ts

@@ -1,31 +0,0 @@
-import React from "react";
-declare const _default: {
-    title: string;
-    component: React.ForwardRefExoticComponent<{
-        padding?: import("../../../types/global").Responsive<number> | undefined;
-        bleed?: import("../../../types/global").Responsive<number> | undefined;
-        selected?: boolean | undefined;
-        elevated?: boolean | undefined;
-        children?: React.ReactNode;
-        onClick?: ((e: React.KeyboardEvent<HTMLElement> | React.MouseEvent<HTMLElement, MouseEvent>) => void) | undefined;
-        href?: string | undefined;
-        as?: keyof JSX.IntrinsicElements | undefined;
-        className?: import("../../../types/global").ClassName;
-        attributes?: (import("../../../types/global").Attributes<keyof JSX.IntrinsicElements, import("./..").CardProps<"div">> & Omit<import("../../../types/global").Attributes<"button", void>, "ref"> & Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "children" | "style" | `data-${string}` | "form" | "slot" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "accessKey" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "nonce" | "spellCheck" | "translate" | "radioGroup" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "suppressHydrationWarning" | "id" | "lang" | "tabIndex" | "role" | "color" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "value" | "name" | "type" | keyof React.ClassAttributes<HTMLButtonElement>> & {
-            ref?: React.RefObject<HTMLAnchorElement | HTMLButtonElement> | undefined;
-        }) | undefined;
-    } & Pick<import("../../View").ViewProps, "height"> & React.RefAttributes<HTMLElement>>;
-    parameters: {
-        iframe: {
-            url: string;
-        };
-    };
-};
-export default _default;
-export declare const padding: () => React.JSX.Element;
-export declare const actionable: () => React.JSX.Element;
-export declare const selected: () => React.JSX.Element;
-export declare const elevated: () => React.JSX.Element;
-export declare const bleed: () => React.JSX.Element;
-export declare const height: () => React.JSX.Element;
-export declare const testComposition: () => React.JSX.Element;