reshaped 2.7.5-beta.0 → 2.8.1

package/dist/components/Calendar/CalendarControlled.js

@@ -0,0 +1,69 @@
+"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/dist/components/Calendar/CalendarControls.d.ts

@@ -0,0 +1,3 @@
+import type * as T from "./Calendar.types";
+declare const CalendarControls: (props: T.ControlsProps) => import("react/jsx-runtime").JSX.Element;
+export default CalendarControls;

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 === 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/dist/components/Calendar/CalendarDate.d.ts

@@ -0,0 +1,3 @@
+import type * as T from "./Calendar.types";
+declare const CalendarDate: (props: T.DateProps) => import("react/jsx-runtime").JSX.Element;
+export default CalendarDate;

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 === 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/dist/components/Calendar/CalendarMonth.d.ts

@@ -0,0 +1,3 @@
+import type * as T from "./Calendar.types";
+declare const CalendarMonth: (props: T.MonthProps) => import("react/jsx-runtime").JSX.Element;
+export default CalendarMonth;

package/dist/components/Calendar/CalendarMonth.js

@@ -0,0 +1,51 @@
+"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 = +startValue === +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.d.ts

@@ -0,0 +1,3 @@
+import type * as T from "./Calendar.types";
+declare const CalendarUncontrolled: (props: T.UncontrolledProps & T.BaseProps) => import("react/jsx-runtime").JSX.Element;
+export default CalendarUncontrolled;

package/dist/components/Calendar/CalendarUncontrolled.js

@@ -0,0 +1,30 @@
+"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/dist/components/Calendar/CalendarYear.d.ts

@@ -0,0 +1,3 @@
+import type * as T from "./Calendar.types";
+declare const CalendarYear: (props: T.YearProps) => import("react/jsx-runtime").JSX.Element;
+export default CalendarYear;

package/dist/components/Calendar/CalendarYear.js

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

@@ -0,0 +1,17 @@
+import React from "react";
+import type * as T from "./Card.types";
+declare const _default: 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" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "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 _default;

package/dist/components/Card/Card.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React 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 = (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 React.forwardRef(Card);

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

package/dist/components/Carousel/Carousel.d.ts

@@ -0,0 +1,3 @@
+import * as T from "./Carousel.types";
+declare const Carousel: (props: T.Props) => import("react/jsx-runtime").JSX.Element;
+export default Carousel;

package/dist/components/Carousel/Carousel.js

@@ -0,0 +1,64 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { classNames, responsiveVariables, responsiveClassNames, debounceHandler, } from "../../utilities/helpers.js";
+import View from "../View/index.js";
+import useRTL from "../../hooks/useRTL.js";
+import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
+import CarouselControl from "./CarouselControl.js";
+import * as T from "./Carousel.types.js";
+import s from "./Carousel.module.css";
+const Carousel = (props) => {
+    const { children, gap = 3, visibleItems, bleed, navigationDisplay, instanceRef, className, attributes, } = props;
+    const [mounted, setMounted] = React.useState(false);
+    const [scrollPosition, setScrollPosition] = React.useState(0);
+    const [isRTL] = useRTL();
+    const scrollElRef = React.useRef(null);
+    const bleedClassNames = {};
+    if (typeof bleed === "object") {
+        Object.entries(bleed).forEach(([key, value]) => {
+            bleedClassNames[key] = typeof value === "number" && value > 0;
+        });
+    }
+    const rootClassNames = classNames(s.root, className, ...responsiveClassNames(s, "--bleed", typeof bleed === "number" ? true : bleedClassNames));
+    const handleScroll = debounceHandler((event) => {
+        const el = event.target;
+        setScrollPosition(el.scrollLeft);
+    }, 16);
+    const getItemsGap = () => {
+        const style = getComputedStyle(scrollElRef.current);
+        // Safari returns Npx Npx as a value, we need only the first one
+        const xGap = style.gap.split(" ")[0];
+        return Number(xGap.replace("px", ""));
+    };
+    const navigateRight = () => {
+        const scrollEl = scrollElRef.current;
+        scrollEl.scrollBy({
+            left: scrollEl.clientWidth + getItemsGap(),
+            top: 0,
+            behavior: "smooth",
+        });
+    };
+    const navigateLeft = () => {
+        const scrollEl = scrollElRef.current;
+        scrollEl.scrollBy({
+            left: -scrollEl.clientWidth - getItemsGap(),
+            top: 0,
+            behavior: "smooth",
+        });
+    };
+    const navigateBack = isRTL ? navigateRight : navigateLeft;
+    const navigateForward = isRTL ? navigateLeft : navigateRight;
+    React.useImperativeHandle(instanceRef, () => ({
+        navigateBack,
+        navigateForward,
+    }));
+    /**
+     * Changing flag here since scroll ref changing won't rerender the controls and show them after SSR
+     */
+    useIsomorphicLayoutEffect(() => {
+        setMounted(true);
+    }, []);
+    return (_jsxs("section", Object.assign({}, attributes, { className: rootClassNames, style: Object.assign(Object.assign({}, responsiveVariables("--rs-carousel-items", visibleItems)), responsiveVariables("--rs-carousel-bleed", bleed)), children: [navigationDisplay !== "hidden" && (_jsxs(_Fragment, { children: [_jsx(CarouselControl, { isRTL: isRTL, type: T.ControlType.back, scrollElRef: scrollElRef, scrollPosition: scrollPosition, onClick: navigateBack, mounted: mounted }), _jsx(CarouselControl, { isRTL: isRTL, type: T.ControlType.forward, scrollElRef: scrollElRef, scrollPosition: scrollPosition, onClick: navigateForward, mounted: mounted })] })), _jsx(View, { as: "ul", direction: "row", wrap: false, gap: gap, className: s.scroll, attributes: { ref: scrollElRef, onScroll: handleScroll }, children: React.Children.map(children, (child) => (_jsx(View.Item, { className: s.item, as: "li", children: child }))) })] })));
+};
+export default Carousel;

package/dist/components/Carousel/Carousel.module.css

@@ -0,0 +1 @@
+.root{position:relative}.control{display:none;opacity:0;position:absolute;top:50%;transform:translate(-50%,-50%) scale(.75);transform-origin:50%;transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity,transform;z-index:var(--rs-z-index-raised)}.--control-prev{left:0}.--control-next{left:100%}.--control-visible{opacity:1;transform:translate(-50%,-50%) scale(1)}.scroll{overflow:auto;-ms-overflow-style:none;overflow:-moz-scrollbars-none;-webkit-overflow-scrolling:touch;backface-visibility:hidden;margin:0 calc(var(--rs-unit-x1) * var(--rs-carousel-bleed) * -1);padding:0 calc(var(--rs-unit-x1) * var(--rs-carousel-bleed));scroll-behavior:smooth;scroll-padding-inline-start:calc(var(--rs-unit-x1) * var(--rs-carousel-bleed));scroll-snap-type:inline;scrollbar-width:none}.scroll::-webkit-scrollbar{display:none;height:0;width:0}.item{--rs-carousel-item-width:calc(100% / var(--rs-carousel-items) - var(--rs-view-gap-value) * (var(--rs-carousel-items) - 1) / var(--rs-carousel-items));position:relative;scroll-snap-align:start;width:var(--rs-carousel-item-width)}@media (--rs-viewport-l ),(hover:hover){.--control-rendered{display:block}}@media (hover:none){.--bleed .item{width:calc(var(--rs-carousel-item-width) - 10% / var(--rs-carousel-items))}}@media (--rs-viewport-m ) and (hover:none){.--bleed-true--m .item{width:calc(var(--rs-carousel-item-width) - 10% / var(--rs-carousel-items))}.--bleed-false--m .item{width:var(--rs-carousel-item-width)}}@media (--rs-viewport-l ) and (hover:none){.--bleed-true--l .item{width:calc(var(--rs-carousel-item-width) - 10% / var(--rs-carousel-items))}.--bleed-false--l .item{width:var(--rs-carousel-item-width)}}@media (--rs-viewport-xl ) and (hover:none){.--bleed-true--xl .item{width:calc(var(--rs-carousel-item-width) - 10% / var(--rs-carousel-items))}.--bleed-false--xl .item{width:var(--rs-carousel-item-width)}}.root{--rs-carousel-items-s:unset;--rs-carousel-items-m:var(--rs-carousel-items-s);--rs-carousel-items-l:var(--rs-carousel-items-m);--rs-carousel-items-xl:var(--rs-carousel-items-l);--rs-carousel-items:var(--rs-carousel-items-s);--rs-carousel-bleed-s:0;--rs-carousel-bleed-m:var(--rs-carousel-bleed-s);--rs-carousel-bleed-l:var(--rs-carousel-bleed-m);--rs-carousel-bleed-xl:var(--rs-carousel-bleed-l);--rs-carousel-bleed:var(--rs-carousel-bleed-s)}@media (--rs-viewport-m ){.root{--rs-carousel-items:var(--rs-carousel-items-m);--rs-carousel-bleed:var(--rs-carousel-bleed-m)}}@media (--rs-viewport-l ){.root{--rs-carousel-items:var(--rs-carousel-items-l);--rs-carousel-bleed:var(--rs-carousel-bleed-l)}}@media (--rs-viewport-xl ){.root{--rs-carousel-items:var(--rs-carousel-items-xl);--rs-carousel-bleed:var(--rs-carousel-bleed-xl)}}

package/dist/components/Carousel/Carousel.types.d.ts

@@ -0,0 +1,28 @@
+import type React from "react";
+import type * as G from "../../types/global";
+export type InstanceRef = {
+    navigateBack: () => void;
+    navigateForward: () => void;
+} | undefined;
+export declare enum ControlType {
+    back = "back",
+    forward = "forward"
+}
+export type ControlProps = {
+    type: ControlType;
+    scrollElRef: React.RefObject<HTMLElement>;
+    scrollPosition: number;
+    onClick: () => void;
+    isRTL: boolean;
+    mounted: boolean;
+};
+export type Props = {
+    children?: React.ReactNode;
+    visibleItems?: G.Responsive<number>;
+    gap?: G.Responsive<number>;
+    bleed?: G.Responsive<number>;
+    navigationDisplay?: "hidden";
+    instanceRef?: React.Ref<InstanceRef>;
+    className?: G.ClassName;
+    attributes?: G.Attributes<React.HTMLAttributes<HTMLDivElement>, keyof Props>;
+};

package/dist/components/Carousel/CarouselControl.d.ts

@@ -0,0 +1,3 @@
+import * as T from "./Carousel.types";
+declare const CarouselControl: (props: T.ControlProps) => import("react/jsx-runtime").JSX.Element;
+export default CarouselControl;

package/dist/components/Carousel/CarouselControl.js

@@ -0,0 +1,42 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import { classNames } from "../../utilities/helpers.js";
+import Button from "../Button/index.js";
+import IconChevronRight from "../../icons/ChevronRight.js";
+import IconChevronLeft from "../../icons/ChevronLeft.js";
+import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
+import * as T from "./Carousel.types.js";
+import s from "./Carousel.module.css";
+const CarouselControl = (props) => {
+    const { type, scrollElRef, scrollPosition, onClick, isRTL, mounted } = props;
+    const [visible, setVisible] = React.useState(false);
+    const [rendered, setRendered] = React.useState(false);
+    const isNext = type === T.ControlType.forward;
+    const isDisplayedAsNext = type === (isRTL ? T.ControlType.back : T.ControlType.forward);
+    const controlClassNames = classNames(s.control, isDisplayedAsNext ? s["--control-next"] : s["--control-prev"], visible && s["--control-visible"], rendered && s["--control-rendered"]);
+    useIsomorphicLayoutEffect(() => {
+        const scrollEl = scrollElRef.current;
+        if (!scrollEl || !mounted)
+            return;
+        let timer;
+        const normalizedScrollPosition = Math.abs(scrollPosition);
+        const isScrollAtStart = normalizedScrollPosition <= 0;
+        const isScrollAtEnd = normalizedScrollPosition + scrollEl.clientWidth >= scrollEl.scrollWidth - 1;
+        const hideControl = isNext ? isScrollAtEnd : isScrollAtStart;
+        if (hideControl) {
+            setVisible(false);
+            timer = setTimeout(() => setRendered(false), 1500);
+        }
+        else {
+            setRendered(true);
+            setVisible(true);
+        }
+        return () => {
+            if (timer)
+                clearTimeout(timer);
+        };
+    }, [scrollPosition, scrollElRef.current, mounted]);
+    return (_jsx("div", { className: controlClassNames, "aria-hidden": "true", children: _jsx(Button, { onClick: onClick, icon: isDisplayedAsNext ? IconChevronRight : IconChevronLeft, rounded: true, variant: "faded", elevated: true, attributes: { "aria-disabled": !visible } }) }));
+};
+export default CarouselControl;

package/dist/components/Checkbox/Checkbox.d.ts

@@ -0,0 +1,3 @@
+import type * as T from "./Checkbox.types";
+declare const Checkbox: (props: T.Props) => import("react/jsx-runtime").JSX.Element;
+export default Checkbox;

package/dist/components/Checkbox/Checkbox.js

@@ -0,0 +1,39 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { classNames } from "../../utilities/helpers.js";
+import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
+import HiddenInput from "../_private/HiddenInput/index.js";
+import { useFormControl } from "../FormControl/index.js";
+import { useCheckboxGroup } from "../CheckboxGroup/index.js";
+import Icon from "../Icon/index.js";
+import IconCheckmark from "../../icons/Checkmark.js";
+import s from "./Checkbox.module.css";
+const Checkbox = (props) => {
+    var _a;
+    const { children, value, onChange, onFocus, onBlur, indeterminate, className, attributes, inputAttributes, } = props;
+    const checkboxGroup = useCheckboxGroup();
+    const formControl = useFormControl();
+    const hasError = (formControl === null || formControl === void 0 ? void 0 : formControl.hasError) || props.hasError || (checkboxGroup === null || checkboxGroup === void 0 ? void 0 : checkboxGroup.hasError);
+    const disabled = (formControl === null || formControl === void 0 ? void 0 : formControl.disabled) || props.disabled || (checkboxGroup === null || checkboxGroup === void 0 ? void 0 : checkboxGroup.disabled);
+    const checked = checkboxGroup ? (_a = checkboxGroup.value) === null || _a === void 0 ? void 0 : _a.includes(value) : props.checked;
+    const defaultChecked = checkboxGroup ? undefined : props.defaultChecked;
+    const name = checkboxGroup ? checkboxGroup.name : props.name;
+    const inputRef = React.useRef(null);
+    const rootClassName = classNames(s.root, className, hasError && s["--error"], disabled && s["--disabled"]);
+    const handleChange = (event) => {
+        if (!name)
+            return;
+        const { checked } = event.target;
+        const changeArgs = { name, value, checked, event };
+        if (onChange)
+            onChange(changeArgs);
+        if (checkboxGroup === null || checkboxGroup === void 0 ? void 0 : checkboxGroup.onChange)
+            checkboxGroup.onChange(changeArgs);
+    };
+    useIsomorphicLayoutEffect(() => {
+        inputRef.current.indeterminate = indeterminate || false;
+    }, [indeterminate, checked]);
+    return (_jsxs("label", Object.assign({}, attributes, { className: rootClassName, children: [_jsxs("span", { className: s.field, children: [_jsx(HiddenInput, { className: s.input, type: "checkbox", checked: checked, defaultChecked: defaultChecked, name: name, disabled: disabled, value: value, onChange: handleChange, onFocus: onFocus, onBlur: onBlur, attributes: Object.assign(Object.assign({}, inputAttributes), { ref: inputRef }) }), _jsx("div", { className: s.decorator, children: _jsx(Icon, { svg: IconCheckmark, className: s.icon }) })] }), children && _jsx("span", { className: s.text, children: children })] })));
+};
+export default Checkbox;

package/dist/components/Checkbox/Checkbox.module.css

@@ -0,0 +1 @@
+.root{align-items:center;cursor:pointer;display:inline-flex;gap:var(--rs-unit-x2);user-select:none;vertical-align:top;-webkit-tap-highlight-color:transparent}.root:hover .decorator{background:var(--rs-color-background-neutral-faded)}.field{position:relative}.decorator{background:var(--rs-color-background-elevation-base);border:1px solid var(--rs-color-border-neutral);border-radius:var(--rs-unit-radius-small);height:var(--rs-line-height-body-3);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:background-color,border-color;width:var(--rs-line-height-body-3)}.decorator:before{background:var(--rs-color-on-background-primary);border-radius:999px;content:"";height:1.5px;width:var(--rs-unit-x2)}.decorator:before,.icon{left:50%;opacity:0;position:absolute;top:50%;transform:translate(-50%,-50%) scale(0);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity,transform}[data-rs-keyboard] .input:focus+.decorator{box-shadow:var(--rs-focus-shadow)}.input:indeterminate+.decorator,.root.--error .input:indeterminate+.decorator,.root.--error:hover .input:indeterminate+.decorator,.root:hover .input:indeterminate+.decorator{background:var(--rs-color-background-primary);border-color:var(--rs-color-background-primary)}.input:indeterminate+.decorator:before,.root.--error .input:indeterminate+.decorator:before,.root.--error:hover .input:indeterminate+.decorator:before,.root:hover .input:indeterminate+.decorator:before{opacity:1;transform:translate(-50%,-50%) scale(1)}.input:checked+.decorator,.root.--error .input:checked+.decorator,.root.--error:hover .input:checked+.decorator,.root:hover .input:checked+.decorator{background:var(--rs-color-background-primary);border-color:var(--rs-color-background-primary);color:var(--rs-color-on-background-primary)}.input:checked+.decorator .icon,.root.--error .input:checked+.decorator .icon,.root.--error:hover .input:checked+.decorator .icon,.root:hover .input:checked+.decorator .icon{opacity:1;transform:translate(-50%,-50%) scale(1)}.root.--error .decorator{border-color:var(--rs-color-border-critical)}.root.--disabled{color:var(--rs-color-foreground-disabled);cursor:not-allowed}.root.--disabled .decorator,.root.--disabled .input:checked+.decorator,.root.--disabled:hover .decorator,.root.--disabled:hover .input:checked+.decorator{background:var(--rs-color-background-disabled-faded);border-color:var(--rs-color-border-disabled);color:var(--rs-color-foreground-disabled)}.root.--disabled .input:checked+.decorator,.root.--disabled .input:indeterminate+.decorator,.root.--disabled:hover .input:checked+.decorator,.root.--disabled:hover .input:indeterminate+.decorator{background:var(--rs-color-background-disabled);border-color:transparent}.root.--disabled .input:indeterminate+.decorator:before{background:var(--rs-color-foreground-disabled)}.root.--disabled .input:checked+.decorator:after{background:var(--rs-color-border-disabled)}