reshaped 2.11.12 → 3.0.1

package/dist/components/Calendar/Calendar.utils.js

@@ -0,0 +1,110 @@
+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?.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/dist/components/Calendar/CalendarControlled.js

@@ -0,0 +1,68 @@
+"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(() => {
+                monthTitleRef.current?.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/dist/components/Calendar/CalendarControls.js

@@ -0,0 +1,46 @@
+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?.focus();
+        });
+    }, [isFirstMonth, monthTitleRef]);
+    React.useEffect(() => {
+        if (!isLastMonth)
+            return;
+        if (document.activeElement !== nextRef.current)
+            return;
+        const targetEl = prevRef.current || monthTitleRef.current;
+        onNextFrame(() => {
+            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/dist/components/Calendar/CalendarDate.js

@@ -0,0 +1,57 @@
+"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?.({ 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?.({ 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/dist/components/Calendar/CalendarMonth.js

@@ -0,0 +1,50 @@
+"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) => {
+                    const key = [month, week[0]?.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?.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?.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/dist/components/Calendar/CalendarUncontrolled.js

@@ -0,0 +1,19 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import CalendarControlled from "./CalendarControlled.js";
+const CalendarUncontrolled = (props) => {
+    const { onChange, defaultValue, range, ...controlledProps } = props;
+    const [value, setValue] = React.useState(defaultValue || null);
+    if (range) {
+        return (_jsx(CalendarControlled, { range: true, ...controlledProps, value: value, onChange: (args) => {
+                setValue(args.value);
+                onChange?.(args);
+            } }));
+    }
+    return (_jsx(CalendarControlled, { ...controlledProps, value: value, onChange: (args) => {
+            setValue(args.value);
+            onChange?.(args);
+        } }));
+};
+export default CalendarUncontrolled;

package/dist/components/Calendar/CalendarYear.js

@@ -0,0 +1,43 @@
+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(() => {
+        const focusableEl = rootRef.current?.querySelector('[tabIndex="0"]');
+        // Waitinf for key press events to finish before focusing the month
+        // To avoid it trigger the month click
+        onNextFrame(() => {
+            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/dist/components/Calendar/useCalendarKeyboardNavigation.js

@@ -0,0 +1,66 @@
+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?.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/dist/components/Card/Card.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+declare const Card: React.ForwardRefExoticComponent<{
+    padding?: import("../..").Responsive<number>;
+    bleed?: import("../..").Responsive<number>;
+    selected?: boolean;
+    elevated?: boolean;
+    children?: React.ReactNode;
+    onClick?: import("../Actionable").ActionableProps["onClick"];
+    href?: string;
+    as?: keyof JSX.IntrinsicElements | undefined;
+    className?: import("../../types/global").ClassName;
+    attributes?: (import("../../types/global").Attributes<keyof JSX.IntrinsicElements> & ((import("../../types/global").Attributes<"button"> & Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "form" | "slot" | "style" | "title" | "disabled" | "className" | "color" | "hidden" | "content" | "ref" | "children" | "type" | "key" | "value" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "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"> & {
+        ref?: React.RefObject<HTMLButtonElement | HTMLAnchorElement>;
+    }) | undefined)) | undefined;
+} & Pick<import("../View").ViewProps, "height"> & React.RefAttributes<HTMLElement>>;
+export default Card;

package/dist/components/Card/Card.js

@@ -0,0 +1,35 @@
+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?.classNames, bleedStyles?.classNames, paddingStyles?.classNames, heightStyles?.classNames, isActionable && s["--actionable"], elevated && s["--elevated"], selected && s["--selected"], className);
+    const style = {
+        ...attributes?.style,
+        ...bleedStyles?.variables,
+        ...paddingStyles?.variables,
+        ...heightStyles?.variables,
+    };
+    if (isActionable) {
+        return (_jsx(Actionable, { className: rootClassNames, attributes: { ...attributes, style }, href: href, as: TagName, onClick: onClick, ref: ref, children: _jsx("span", { className: s.content, children: children }) }));
+    }
+    return (_jsx(TagName, { ...attributes, onClick: onClick, href: href, ref: ref, className: rootClassNames, style: style, children: _jsx("span", { className: s.content, children: children }) }));
+});
+export default Card;

package/dist/components/Card/Card.module.css

@@ -0,0 +1 @@
+.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),32%);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/dist/components/Card/Card.types.d.ts

@@ -0,0 +1,16 @@
+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> & ActionableProps["attributes"];
+} & Pick<ViewProps, "height">;

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

@@ -0,0 +1,31 @@
+import React from "react";
+declare const _default: {
+    title: string;
+    component: React.ForwardRefExoticComponent<{
+        padding?: import("../../../types/global").Responsive<number>;
+        bleed?: import("../../../types/global").Responsive<number>;
+        selected?: boolean;
+        elevated?: boolean;
+        children?: React.ReactNode;
+        onClick?: import("../../Actionable").ActionableProps["onClick"];
+        href?: string;
+        as?: keyof JSX.IntrinsicElements | undefined;
+        className?: import("../../../types/global").ClassName;
+        attributes?: (import("../../../types/global").Attributes<keyof JSX.IntrinsicElements> & ((import("../../../types/global").Attributes<"button"> & Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "children" | "ref" | "style" | "form" | "slot" | "title" | "className" | "aria-orientation" | "role" | "hidden" | "color" | "content" | "disabled" | "suppressHydrationWarning" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "value" | "dir" | "name" | "key" | "accessKey" | "autoFocus" | "contentEditable" | "contextMenu" | "draggable" | "nonce" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "type" | "id" | "lang" | "tabIndex" | "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-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"> & {
+            ref?: React.RefObject<HTMLButtonElement | HTMLAnchorElement>;
+        }) | 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;