reshaped 2.6.4 → 2.7.0

package/components/Calendar/tests/Calendar.stories.js

@@ -0,0 +1,30 @@
+import React from "react";
+import { Example } from "../../../utilities/storybook/index.js";
+import Calendar from "../index.js";
+export default { title: "Components/Calendar" };
+export const base = () => (<Example>
+		<Example.Item title="base month">
+			<Calendar defaultMonth={new Date(2023, 11)} onChange={console.log}/>
+		</Example.Item>
+	</Example>);
+export const selection = () => (<Example>
+		<Example.Item title="single">
+			<Calendar defaultMonth={new Date(2023, 11)} defaultValue={new Date(2023, 11, 15)}/>
+		</Example.Item>
+		<Example.Item title="range">
+			<Calendar range defaultMonth={new Date(2023, 11)} defaultValue={{ start: new Date(2023, 11, 15), end: new Date(2023, 11, 18) }}/>
+		</Example.Item>
+	</Example>);
+export const boundaries = () => (<Example>
+		<Example.Item title="min">
+			<Calendar defaultMonth={new Date(2023, 11)} min={new Date(2023, 11, 4)}/>
+		</Example.Item>
+		<Example.Item title="max">
+			<Calendar defaultMonth={new Date(2023, 11)} max={new Date(2023, 11, 20)}/>
+		</Example.Item>
+	</Example>);
+export const translation = () => (<Example>
+		<Example.Item title="NL">
+			<Calendar defaultMonth={new Date(2023, 11)} renderMonthLabel={({ date }) => date.toLocaleDateString("nl", { month: "short" })} renderSelectedMonthLabel={({ date }) => date.toLocaleDateString("nl", { month: "long", year: "numeric" })} renderWeekDay={({ date }) => date.toLocaleDateString("nl", { weekday: "short" })}/>
+		</Example.Item>
+	</Example>);

package/components/Calendar/useCalendarKeyboardNavigation.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+declare const useCalendarKeyboardNavigation: (props: {
+    monthDate: Date;
+    rootRef: React.MutableRefObject<HTMLDivElement | null>;
+    changeToNextMonth: () => void;
+    changeToPreviousMonth: () => void;
+    verticalDelta: number;
+    min?: Date;
+    max?: Date;
+}) => void;
+export default useCalendarKeyboardNavigation;

package/components/Calendar/useCalendarKeyboardNavigation.js

@@ -0,0 +1,67 @@
+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);
+        console.log({ nextDate, disabled });
+        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 });
+};
+export default useCalendarKeyboardNavigation;

package/components/Modal/Modal.js

@@ -1,11 +1,14 @@
 "use client";
 import React from "react";
 import { classNames, responsiveVariables, responsiveClassNames } from "../../utilities/helpers.js";
+import useResponsiveClientValue from "../../hooks/useResponsiveClientValue.js";
 import Text from "../Text/index.js";
 import Overlay from "../Overlay/index.js";
 import useElementId from "../../hooks/useElementId.js";
 import s from "./Modal.module.css";
 import getPaddingStyles from "../../styles/padding/index.js";
+const DRAG_THRESHOLD = 16;
+const DRAG_EDGE_BOUNDARY = 32;
 const Context = React.createContext({
     id: "",
     titleMounted: false,
@@ -35,8 +38,16 @@ const ModalSubtitle = (props) => {
 const Modal = (props) => {
     const { children, onClose, active, size, padding = 4, position = "center", transparentOverlay, className, attributes, } = props;
     const id = useElementId();
+    const clientPosition = useResponsiveClientValue(position);
     const [titleMounted, setTitleMounted] = React.useState(false);
     const [subtitleMounted, setSubtitleMounted] = React.useState(false);
+    const [dragging, setDragging] = React.useState(false);
+    const rootRef = React.useRef(null);
+    const dragClientCoordinatesRef = React.useRef(0);
+    const dragDistanceRef = React.useRef(0);
+    const dragDirectionRef = React.useRef(0);
+    const [dragDistance, setDragDistance] = React.useState(0);
+    const [hideProgress, setHideProgress] = React.useState(0);
     const paddingStyles = getPaddingStyles(padding);
     const value = React.useMemo(() => ({
         titleMounted,
@@ -45,10 +56,93 @@ const Modal = (props) => {
         setSubtitleMounted,
         id,
     }), [id, subtitleMounted, titleMounted]);
-    return (React.createElement(Overlay, { onClose: onClose, active: active, transparent: transparentOverlay }, ({ active }) => {
-        const rootClassNames = classNames(s.root, className, paddingStyles === null || paddingStyles === void 0 ? void 0 : paddingStyles.classNames, active && s["--active"], responsiveClassNames(s, "--position", position));
+    const resetDragData = () => {
+        dragDirectionRef.current = 0;
+        dragClientCoordinatesRef.current = 0;
+        setDragDistance(0);
+        setHideProgress(0);
+    };
+    const handleDragStart = (e) => {
+        const el = e.target;
+        // Prioritize scrolling over modal swiping
+        if (el.scrollTop !== 0 || el.scrollLeft !== 0)
+            return;
+        // Start dragging only when starting on static elements
+        if (el.matches("input,textarea"))
+            return;
+        // Prevent the drag handling when browser tab swiping is triggering
+        if (clientPosition === "start" && e.targetTouches[0].clientX < DRAG_EDGE_BOUNDARY)
+            return;
+        setDragging(true);
+    };
+    // Once modal is closed - reset its drag data
+    const handleTransitionEnd = (e) => {
+        if (active)
+            return;
+        if (e.propertyName !== "transform")
+            return;
+        if (e.currentTarget !== e.target)
+            return;
+        resetDragData();
+    };
+    React.useEffect(() => {
+        if (!dragging)
+            return;
+        const handleDragEnd = () => {
+            setDragging(false);
+            // Close only when dragging in the closing direction
+            // Changing to a different direction will keep the modal opened
+            const shouldClose = clientPosition && ["bottom", "end"].includes(clientPosition)
+                ? dragDirectionRef.current > 0
+                : dragDirectionRef.current < 0;
+            if (Math.abs(dragDistanceRef.current) > DRAG_THRESHOLD && shouldClose) {
+                onClose === null || onClose === void 0 ? void 0 : onClose();
+            }
+            else {
+                resetDragData();
+            }
+        };
+        const handleDrag = (e) => {
+            if (!dragging || clientPosition === "center")
+                return;
+            const prev = dragClientCoordinatesRef.current;
+            const target = e.targetTouches[0];
+            dragClientCoordinatesRef.current =
+                clientPosition === "bottom" ? target.clientY : target.clientX;
+            if (!prev)
+                return;
+            const delta = dragClientCoordinatesRef.current - prev;
+            dragDirectionRef.current = delta < 0 ? -1 : 1;
+            setDragDistance((prev) => {
+                const next = prev + delta;
+                return clientPosition === "start" ? Math.min(0, next) : Math.max(0, next);
+            });
+        };
+        document.addEventListener("touchmove", handleDrag);
+        document.addEventListener("touchend", handleDragEnd);
+        return () => {
+            document.removeEventListener("touchmove", handleDrag);
+            document.removeEventListener("touchend", handleDragEnd);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [dragging, clientPosition]);
+    // Syncing distance to the ref to avoid having a dependency on dragDistance in handleDragEnd
+    React.useEffect(() => {
+        const rootEl = rootRef.current;
+        if (!rootEl || !clientPosition)
+            return;
+        const isInline = ["start", "end"].includes(clientPosition);
+        const size = isInline ? rootEl.clientWidth : rootEl.clientHeight;
+        const progress = Math.abs(dragDistance) / size;
+        dragDistanceRef.current = dragDistance;
+        setHideProgress(progress / 2);
+    }, [dragDistance, clientPosition]);
+    return (React.createElement(Overlay, { onClose: onClose, active: active, transparent: transparentOverlay || hideProgress }, ({ active }) => {
+        const rootClassNames = classNames(s.root, className, paddingStyles === null || paddingStyles === void 0 ? void 0 : paddingStyles.classNames, active && s["--active"], dragging && s["--dragging"], responsiveClassNames(s, "--position", position));
         return (React.createElement(Context.Provider, { value: value },
-            React.createElement("div", Object.assign({}, attributes, { style: Object.assign(Object.assign({}, paddingStyles === null || paddingStyles === void 0 ? void 0 : paddingStyles.variables), responsiveVariables("--rs-modal-size", size)), "aria-labelledby": titleMounted ? `${id}-title` : undefined, "aria-describedby": subtitleMounted ? `${id}-subtitle` : undefined, className: rootClassNames, "aria-modal": "true", role: "dialog" }), children)));
+            React.createElement("div", Object.assign({}, attributes, { style: Object.assign(Object.assign(Object.assign({}, paddingStyles === null || paddingStyles === void 0 ? void 0 : paddingStyles.variables), responsiveVariables("--rs-modal-size", size)), { "--rs-modal-drag": Math.abs(dragDistance) < DRAG_THRESHOLD
+                        ? "0px"
+                        : `${dragDistance + DRAG_THRESHOLD * (clientPosition === "start" ? 1 : -1)}px` }), "aria-labelledby": titleMounted ? `${id}-title` : undefined, "aria-describedby": subtitleMounted ? `${id}-subtitle` : undefined, className: rootClassNames, "aria-modal": "true", role: "dialog", onTouchStart: handleDragStart, onTransitionEnd: handleTransitionEnd, ref: rootRef }), children)));
     }));
 };
 Modal.Title = ModalTitle;

package/components/Modal/Modal.module.css

@@ -1 +1 @@
-.root{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);--rs-modal-size-m:var(--rs-modal-size-s);--rs-modal-size-l:var(--rs-modal-size-m);--rs-modal-size-xl:var(--rs-modal-size-l);--rs-modal-size:var(--rs-modal-size-s);background:var(--rs-color-background-elevation-overlay);box-shadow:var(--rs-shadow-overlay);color:var(--rs-color-foreground-neutral);transition:transform var(--rs-easing-accelerate) var(--rs-duration-medium)}.--position-center{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:var(--rs-unit-radius-large);height:auto;inset:0;margin:var(--rs-unit-x4);max-height:none;max-width:calc(100vw - var(--rs-unit-x8));overflow:hidden;position:relative;transform:scale(.96);width:var(--rs-modal-size)}.--position-bottom{--rs-modal-size-s:auto;border-radius:var(--rs-unit-radius-large) var(--rs-unit-radius-large) 0 0;height:var(--rs-modal-size);inset:0;inset-block-start:auto;margin:0;margin-top:var(--rs-unit-x4);max-height:calc(100vh - var(--rs-unit-x4));max-width:100%;overflow:auto;position:fixed;transform:translateY(100%);width:100%}.--position-start{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-end:auto;margin:0;margin-inline-end:var(--rs-unit-x4);max-height:100%;max-width:calc(100vw - var(--rs-unit-x4));overflow:auto;position:fixed;transform:translate(-100%);width:var(--rs-modal-size)}.--position-end,[dir=rtl] .--position-start{transform:translate(100%)}.--position-end{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-start:auto;margin:0;margin-inline-start:var(--rs-unit-x4);max-height:100%;max-width:calc(100vw - var(--rs-unit-x4));overflow:auto;position:fixed;width:var(--rs-modal-size)}[dir=rtl] .--position-end{transform:translate(-100%)}.--active,[dir=rtl] .--active{transform:translate(0) scale(1)!important;transition-timing-function:var(--rs-easing-decelerate)}@media (min-width:660px){.root{--rs-modal-size:var(--rs-modal-size-m)}.--position-center--m{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:var(--rs-unit-radius-large);height:auto;inset:0;margin:var(--rs-unit-x4);max-height:none;max-width:calc(100vw - var(--rs-unit-x8));overflow:hidden;position:relative;transform:scale(.96);width:var(--rs-modal-size)}.--position-bottom--m{--rs-modal-size-s:auto;border-radius:var(--rs-unit-radius-large) var(--rs-unit-radius-large) 0 0;height:var(--rs-modal-size);inset:0;inset-block-start:auto;margin:0;margin-top:var(--rs-unit-x4);max-height:calc(100vh - var(--rs-unit-x4));max-width:100%;overflow:auto;position:fixed;transform:translateY(100%);width:100%}.--position-start--m{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-end:auto;margin:0;margin-inline-end:var(--rs-unit-x4);max-height:100%;max-width:calc(100vw - var(--rs-unit-x4));overflow:auto;position:fixed;transform:translate(-100%);width:var(--rs-modal-size)}.--position-end--m,[dir=rtl] .--position-start--m{transform:translate(100%)}.--position-end--m{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-start:auto;margin:0;margin-inline-start:var(--rs-unit-x4);max-height:100%;max-width:calc(100vw - var(--rs-unit-x4));overflow:auto;position:fixed;width:var(--rs-modal-size)}[dir=rtl] .--position-end--m{transform:translate(-100%)}}@media (min-width:900px){.root{--rs-modal-size:var(--rs-modal-size-l)}.--position-center--l{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:var(--rs-unit-radius-large);height:auto;inset:0;margin:var(--rs-unit-x4);max-height:none;max-width:calc(100vw - var(--rs-unit-x8));overflow:hidden;position:relative;transform:scale(.96);width:var(--rs-modal-size)}.--position-bottom--l{--rs-modal-size-s:auto;border-radius:var(--rs-unit-radius-large) var(--rs-unit-radius-large) 0 0;height:var(--rs-modal-size);inset:0;inset-block-start:auto;margin:0;margin-top:var(--rs-unit-x4);max-height:calc(100vh - var(--rs-unit-x4));max-width:100%;overflow:auto;position:fixed;transform:translateY(100%);width:100%}.--position-start--l{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-end:auto;margin:0;margin-inline-end:var(--rs-unit-x4);max-height:100%;max-width:calc(100vw - var(--rs-unit-x4));overflow:auto;position:fixed;transform:translate(-100%);width:var(--rs-modal-size)}.--position-end--l,[dir=rtl] .--position-start--l{transform:translate(100%)}.--position-end--l{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-start:auto;margin:0;margin-inline-start:var(--rs-unit-x4);max-height:100%;max-width:calc(100vw - var(--rs-unit-x4));overflow:auto;position:fixed;width:var(--rs-modal-size)}[dir=rtl] .--position-end--l{transform:translate(-100%)}}@media (min-width:1280px){.root{--rs-modal-size:var(--rs-modal-size-xl)}.--position-center--xl{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:var(--rs-unit-radius-large);height:auto;inset:0;margin:var(--rs-unit-x4);max-height:none;max-width:calc(100vw - var(--rs-unit-x8));overflow:hidden;position:relative;transform:scale(.96);width:var(--rs-modal-size)}.--position-bottom--xl{--rs-modal-size-s:auto;border-radius:var(--rs-unit-radius-large) var(--rs-unit-radius-large) 0 0;height:var(--rs-modal-size);inset:0;inset-block-start:auto;margin:0;margin-top:var(--rs-unit-x4);max-height:calc(100vh - var(--rs-unit-x4));max-width:100%;overflow:auto;position:fixed;transform:translateY(100%);width:100%}.--position-start--xl{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-end:auto;margin:0;margin-inline-end:var(--rs-unit-x4);max-height:100%;max-width:calc(100vw - var(--rs-unit-x4));overflow:auto;position:fixed;transform:translate(-100%);width:var(--rs-modal-size)}.--position-end--xl,[dir=rtl] .--position-start--xl{transform:translate(100%)}.--position-end--xl{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-start:auto;margin:0;margin-inline-start:var(--rs-unit-x4);max-height:100%;max-width:calc(100vw - var(--rs-unit-x4));overflow:auto;position:fixed;width:var(--rs-modal-size)}[dir=rtl] .--position-end--xl{transform:translate(-100%)}}
+.root{background:var(--rs-color-background-elevation-overlay);box-shadow:var(--rs-shadow-overlay);color:var(--rs-color-foreground-neutral);transition:var(--rs-easing-accelerate) var(--rs-duration-medium);transition-property:transform,opacity}.--dragging{transition:none}.root{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);--rs-modal-size-m:var(--rs-modal-size-s);--rs-modal-size-l:var(--rs-modal-size-m);--rs-modal-size-xl:var(--rs-modal-size-l);--rs-modal-size:var(--rs-modal-size-s)}.--position-center{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:var(--rs-unit-radius-large);height:auto;inset:0;margin:var(--rs-unit-x4);max-height:none;max-width:calc(100vw - var(--rs-unit-x8));opacity:0;overflow:hidden;position:relative;transform:scale(.96);width:var(--rs-modal-size)}.--position-center.--active,[dir=rtl] .--position-center.--active{opacity:1;transform:translateZ(0) scale(1)!important}.--position-bottom{--rs-modal-size-s:auto;border-radius:var(--rs-unit-radius-large) var(--rs-unit-radius-large) 0 0;height:var(--rs-modal-size);inset:0;inset-block-start:auto;margin:0;margin-top:var(--rs-unit-x4);max-height:calc(100vh - var(--rs-unit-x4));max-width:100%;opacity:1;overflow:auto;position:fixed;transform:translate3d(0,100%,0);width:100%}.--position-bottom.--active,[dir=rtl] .--position-bottom.--active{transform:translate3d(0,max(var(--rs-modal-drag,0px),0px),0) scale(1)!important}.--position-start{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-end:auto;margin:0;margin-inline-end:var(--rs-unit-x4);max-height:100%;max-width:calc(100vw - var(--rs-unit-x4));opacity:1;overflow:auto;position:fixed;transform:translate3d(-100%,0,0);width:var(--rs-modal-size)}[dir=rtl] .--position-start{transform:translate3d(100%,0,0)}.--position-start.--active,[dir=rtl] .--position-start.--active{transform:translate3d(min(var(--rs-modal-drag,0px),0px),0,0) scale(1)!important}.--position-end{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-start:auto;margin:0;margin-inline-start:var(--rs-unit-x4);max-height:100%;max-width:calc(100vw - var(--rs-unit-x4));opacity:1;overflow:auto;position:fixed;transform:translate3d(100%,0,0);width:var(--rs-modal-size)}[dir=rtl] .--position-end{transform:translate3d(-100%,0,0)}.--position-end.--active,[dir=rtl] .--position-end.--active{transform:translate3d(max(var(--rs-modal-drag,0px),0px),0,0) scale(1)!important}.--active,[dir=rtl] .--active{transition-timing-function:var(--rs-easing-decelerate)}@media (min-width:660px){.root{--rs-modal-size:var(--rs-modal-size-m)}.--position-center--m{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:var(--rs-unit-radius-large);height:auto;inset:0;margin:var(--rs-unit-x4);max-height:none;max-width:calc(100vw - var(--rs-unit-x8));opacity:0;overflow:hidden;position:relative;transform:scale(.96);width:var(--rs-modal-size)}.--position-center--m.--active,[dir=rtl] .--position-center--m.--active{opacity:1;transform:translateZ(0) scale(1)!important}.--position-bottom--m{--rs-modal-size-s:auto;border-radius:var(--rs-unit-radius-large) var(--rs-unit-radius-large) 0 0;height:var(--rs-modal-size);inset:0;inset-block-start:auto;margin:0;margin-top:var(--rs-unit-x4);max-height:calc(100vh - var(--rs-unit-x4));max-width:100%;opacity:1;overflow:auto;position:fixed;transform:translate3d(0,100%,0);width:100%}.--position-bottom--m.--active,[dir=rtl] .--position-bottom--m.--active{transform:translate3d(0,max(var(--rs-modal-drag,0px),0px),0) scale(1)!important}.--position-start--m{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-end:auto;margin:0;margin-inline-end:var(--rs-unit-x4);max-height:100%;max-width:calc(100vw - var(--rs-unit-x4));opacity:1;overflow:auto;position:fixed;transform:translate3d(-100%,0,0);width:var(--rs-modal-size)}[dir=rtl] .--position-start--m{transform:translate3d(100%,0,0)}.--position-start--m.--active,[dir=rtl] .--position-start--m.--active{transform:translate3d(min(var(--rs-modal-drag,0px),0px),0,0) scale(1)!important}.--position-end--m{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-start:auto;margin:0;margin-inline-start:var(--rs-unit-x4);max-height:100%;max-width:calc(100vw - var(--rs-unit-x4));opacity:1;overflow:auto;position:fixed;transform:translate3d(100%,0,0);width:var(--rs-modal-size)}[dir=rtl] .--position-end--m{transform:translate3d(-100%,0,0)}.--position-end--m.--active,[dir=rtl] .--position-end--m.--active{transform:translate3d(max(var(--rs-modal-drag,0px),0px),0,0) scale(1)!important}}@media (min-width:900px){.root{--rs-modal-size:var(--rs-modal-size-l)}.--position-center--l{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:var(--rs-unit-radius-large);height:auto;inset:0;margin:var(--rs-unit-x4);max-height:none;max-width:calc(100vw - var(--rs-unit-x8));opacity:0;overflow:hidden;position:relative;transform:scale(.96);width:var(--rs-modal-size)}.--position-center--l.--active,[dir=rtl] .--position-center--l.--active{opacity:1;transform:translateZ(0) scale(1)!important}.--position-bottom--l{--rs-modal-size-s:auto;border-radius:var(--rs-unit-radius-large) var(--rs-unit-radius-large) 0 0;height:var(--rs-modal-size);inset:0;inset-block-start:auto;margin:0;margin-top:var(--rs-unit-x4);max-height:calc(100vh - var(--rs-unit-x4));max-width:100%;opacity:1;overflow:auto;position:fixed;transform:translate3d(0,100%,0);width:100%}.--position-bottom--l.--active,[dir=rtl] .--position-bottom--l.--active{transform:translate3d(0,max(var(--rs-modal-drag,0px),0px),0) scale(1)!important}.--position-start--l{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-end:auto;margin:0;margin-inline-end:var(--rs-unit-x4);max-height:100%;max-width:calc(100vw - var(--rs-unit-x4));opacity:1;overflow:auto;position:fixed;transform:translate3d(-100%,0,0);width:var(--rs-modal-size)}[dir=rtl] .--position-start--l{transform:translate3d(100%,0,0)}.--position-start--l.--active,[dir=rtl] .--position-start--l.--active{transform:translate3d(min(var(--rs-modal-drag,0px),0px),0,0) scale(1)!important}.--position-end--l{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-start:auto;margin:0;margin-inline-start:var(--rs-unit-x4);max-height:100%;max-width:calc(100vw - var(--rs-unit-x4));opacity:1;overflow:auto;position:fixed;transform:translate3d(100%,0,0);width:var(--rs-modal-size)}[dir=rtl] .--position-end--l{transform:translate3d(-100%,0,0)}.--position-end--l.--active,[dir=rtl] .--position-end--l.--active{transform:translate3d(max(var(--rs-modal-drag,0px),0px),0,0) scale(1)!important}}@media (min-width:1280px){.root{--rs-modal-size:var(--rs-modal-size-xl)}.--position-center--xl{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:var(--rs-unit-radius-large);height:auto;inset:0;margin:var(--rs-unit-x4);max-height:none;max-width:calc(100vw - var(--rs-unit-x8));opacity:0;overflow:hidden;position:relative;transform:scale(.96);width:var(--rs-modal-size)}.--position-center--xl.--active,[dir=rtl] .--position-center--xl.--active{opacity:1;transform:translateZ(0) scale(1)!important}.--position-bottom--xl{--rs-modal-size-s:auto;border-radius:var(--rs-unit-radius-large) var(--rs-unit-radius-large) 0 0;height:var(--rs-modal-size);inset:0;inset-block-start:auto;margin:0;margin-top:var(--rs-unit-x4);max-height:calc(100vh - var(--rs-unit-x4));max-width:100%;opacity:1;overflow:auto;position:fixed;transform:translate3d(0,100%,0);width:100%}.--position-bottom--xl.--active,[dir=rtl] .--position-bottom--xl.--active{transform:translate3d(0,max(var(--rs-modal-drag,0px),0px),0) scale(1)!important}.--position-start--xl{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-end:auto;margin:0;margin-inline-end:var(--rs-unit-x4);max-height:100%;max-width:calc(100vw - var(--rs-unit-x4));opacity:1;overflow:auto;position:fixed;transform:translate3d(-100%,0,0);width:var(--rs-modal-size)}[dir=rtl] .--position-start--xl{transform:translate3d(100%,0,0)}.--position-start--xl.--active,[dir=rtl] .--position-start--xl.--active{transform:translate3d(min(var(--rs-modal-drag,0px),0px),0,0) scale(1)!important}.--position-end--xl{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-start:auto;margin:0;margin-inline-start:var(--rs-unit-x4);max-height:100%;max-width:calc(100vw - var(--rs-unit-x4));opacity:1;overflow:auto;position:fixed;transform:translate3d(100%,0,0);width:var(--rs-modal-size)}[dir=rtl] .--position-end--xl{transform:translate3d(-100%,0,0)}.--position-end--xl.--active,[dir=rtl] .--position-end--xl.--active{transform:translate3d(max(var(--rs-modal-drag,0px),0px),0,0) scale(1)!important}}

package/components/Modal/tests/Modal.stories.js

@@ -17,6 +17,7 @@ import Button from "../../Button/index.js";
 import Dismissible from "../../Dismissible/index.js";
 import DropdownMenu from "../../DropdownMenu/index.js";
 import Switch from "../../Switch/index.js";
+import TextField from "../../TextField/index.js";
 import useToggle from "../../../hooks/useToggle.js";
 export default { title: "Components/Modal" };
 const Demo = (props) => {
@@ -32,6 +33,8 @@ const Demo = (props) => {
 						</Dismissible>)}
 					{children ||
             "Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups."}
+					<Button onClick={() => { }}>Hey</Button>
+					<TextField name="hey"/>
 				</View>
 			</Modal>
 		</>);

package/components/Overlay/Overlay.js

@@ -12,7 +12,10 @@ import Portal from "../_private/Portal/index.js";
 import s from "./Overlay.module.css";
 const Overlay = (props) => {
     const { active, children, transparent, onClose, className, attributes } = props;
+    const clickThrough = transparent === true;
+    const opacity = clickThrough ? 0 : (1 - (transparent || 0)) * 0.7;
     const [mounted, setMounted] = React.useState(false);
+    const [animated, setAnimated] = React.useState(false);
     const contentRef = React.useRef(null);
     const isMouseDownValidRef = React.useRef(false);
     const releaseFocusRef = React.useRef(null);
@@ -20,7 +23,7 @@ const Overlay = (props) => {
     const { active: rendered, activate: render, deactivate: remove } = useToggle(active || false);
     const { active: visible, activate: show, deactivate: hide } = useToggle(active || false);
     const isDismissible = useIsDismissible(active, contentRef);
-    const rootClassNames = classNames(s.root, visible && s["--visible"], transparent && s["--transparent"], className);
+    const rootClassNames = classNames(s.root, visible && s["--visible"], clickThrough && s["--click-through"], animated && s["--animated"], className);
     const isInsideChild = (el) => {
         if (!contentRef.current)
             return;
@@ -52,22 +55,24 @@ const Overlay = (props) => {
     };
     const handleMouseUp = (event) => {
         const isMouseUpValid = !isInsideChild(event.target);
-        const shouldClose = isMouseDownValidRef.current && isMouseUpValid && !transparent;
+        const shouldClose = isMouseDownValidRef.current && isMouseUpValid && !clickThrough;
         if (!shouldClose)
             return;
         close();
     };
     const handleTransitionEnd = (e) => {
-        if (e.propertyName !== "opacity" || e.target !== e.currentTarget)
+        if (e.propertyName !== "opacity" || !e.pseudoElement)
             return;
+        setAnimated(false);
         if (visible)
             return;
-        if (!transparent)
+        if (!clickThrough)
             unlockScroll();
         remove();
     };
     useHotkeys({ Escape: close }, [close]);
     React.useEffect(() => {
+        setAnimated(true);
         if (active && !rendered)
             render();
         if (!active && rendered)
@@ -77,11 +82,10 @@ const Overlay = (props) => {
     React.useEffect(() => {
         if (!rendered)
             return;
-        if (!transparent)
+        if (!clickThrough)
             lockScroll();
         onNextFrame(() => show());
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [rendered, show, lockScroll, transparent]);
+    }, [rendered, show, lockScroll, clickThrough]);
     React.useEffect(() => {
         if (!rendered)
             return;
@@ -91,17 +95,17 @@ const Overlay = (props) => {
     // Unlock scroll on unmount
     React.useEffect(() => {
         return () => {
-            if (!transparent)
+            if (!clickThrough)
                 unlockScroll();
         };
-    }, [unlockScroll, transparent]);
+    }, [unlockScroll, clickThrough]);
     useIsomorphicLayoutEffect(() => {
         setMounted(true);
     }, []);
     if (!rendered || !mounted)
         return null;
     return (React.createElement(Portal, null,
-        React.createElement(Portal.Scope, null, (ref) => (React.createElement("div", Object.assign({}, attributes, { ref: ref, role: "button", tabIndex: -1, className: rootClassNames, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onTransitionEnd: handleTransitionEnd }),
+        React.createElement(Portal.Scope, null, (ref) => (React.createElement("div", Object.assign({}, attributes, { ref: ref, style: { "--rs-overlay-opacity": opacity }, role: "button", tabIndex: -1, className: rootClassNames, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onTransitionEnd: handleTransitionEnd }),
             React.createElement("div", { className: s.wrapper },
                 React.createElement("div", { className: s.inner },
                     React.createElement("div", { className: s.content, ref: contentRef }, typeof children === "function" ? children({ active: visible }) : children))))))));

package/components/Overlay/Overlay.module.css

@@ -1 +1 @@
-.root{-webkit-overflow-scrolling:touch;color:var(--rs-color-white);opacity:0;overflow:auto;transition:opacity var(--rs-duration-medium) var(--rs-easing-standard);z-index:var(--rs-z-index-overlay)}.root,.root:after{inset:0;position:fixed}.root:after{background:var(--rs-color-black);content:"";opacity:.8}.wrapper{display:table;height:100%;width:100%}.inner{display:table-cell;text-align:center}.content,.inner{vertical-align:middle}.content{display:inline-block;position:relative;text-align:initial;z-index:var(--rs-z-index-raised)}.root.--visible{opacity:1}.root.--transparent{color:inherit;pointer-events:none}.root.--transparent>:not(.wrapper){pointer-events:all}.root.--transparent:after{content:none}.root.--transparent .content{pointer-events:all}
+.root{-webkit-overflow-scrolling:touch;color:var(--rs-color-white);overflow:auto;z-index:var(--rs-z-index-overlay)}.root,.root:after{inset:0;position:fixed}.root:after{background:var(--rs-color-black);content:"";opacity:0}.wrapper{display:table;height:100%;width:100%}.inner{display:table-cell;text-align:center}.content,.inner{vertical-align:middle}.content{display:inline-block;position:relative;text-align:initial;z-index:var(--rs-z-index-raised)}.root.--visible:after{opacity:var(--rs-overlay-opacity)}.root.--click-through{color:inherit;pointer-events:none}.root.--click-through .content,.root.--click-through>:not(.wrapper){pointer-events:all}.root.--animated:after{transition:opacity var(--rs-duration-medium) var(--rs-easing-standard)}

package/components/Overlay/Overlay.types.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 import type * as G from "../../types/global";
 export type Props = {
-    transparent?: boolean;
+    transparent?: boolean | number;
     children?: React.ReactNode | ((props: {
         active: boolean;
     }) => React.ReactNode);

package/components/Slider/Slider.module.css

@@ -1 +1 @@
-.root{align-items:center;cursor:pointer;display:flex;height:var(--rs-unit-x4);-webkit-user-select:none;-moz-user-select:none;user-select:none}.bar,.root{position:relative}.bar{background:var(--rs-color-background-neutral);border-radius:var(--rs-unit-radius-small);height:var(--rs-unit-x1);width:100%}.bar,.input{overflow:hidden}.input{height:1px;opacity:0;pointer-events:none;position:absolute;width:1px}.selection{background:var(--rs-color-background-primary);height:100%;position:absolute}.tooltip{background:var(--rs-color-background-elevation-overlay);border-radius:var(--rs-unit-radius-small);bottom:100%;box-shadow:var(--rs-shadow-overlay);color:var(--rs-color-foreground-neutral);left:50%;opacity:0;padding:calc(var(--rs-unit-x1) / 2) var(--rs-unit-x1);transform:translate(-50%);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity,transform;-webkit-user-select:none;-moz-user-select:none;user-select:none}.thumb,.tooltip{position:absolute}.thumb{height:100%;width:0}.thumb:before{background:var(--rs-color-background-primary);border-radius:999px;box-shadow:0 0 0 2px var(--rs-color-background-elevation-base);box-sizing:border-box;height:var(--rs-unit-x4);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:box-shadow;width:var(--rs-unit-x4)}.thumb:after,.thumb:before{content:"";left:0;position:absolute;top:50%;transform:translate(-50%,-50%)}.thumb:after{cursor:grab;height:var(--rs-unit-x9);width:var(--rs-unit-x9)}.thumb:hover .tooltip{opacity:1;transform:translate(-50%,calc(var(--rs-unit-x1) * -1))}.input:focus+.thumb:after,.thumb--active:after{cursor:grabbing}.input:focus+.thumb:before,.thumb--active:before{box-shadow:0 0 0 1px var(--rs-color-background-elevation-base)}.input:focus+.thumb .tooltip,.thumb--active .tooltip{opacity:1;transform:translate(-50%,calc(var(--rs-unit-x1) * -1)) scale(1.1)!important}.--disabled{cursor:not-allowed}.--disabled .bar{background-color:var(--rs-color-background-disabled)}.--disabled .selection,.--disabled .thumb:before{background-color:var(--rs-color-foreground-disabled)}.--disabled .thumb:after{cursor:not-allowed}.--disabled .thumb:hover .tooltip{opacity:0}
+.root{-webkit-tap-highlight-color:transparent;align-items:center;cursor:pointer;display:flex;height:var(--rs-unit-x4);-webkit-user-select:none;-moz-user-select:none;user-select:none}.bar,.root{position:relative}.bar{background:var(--rs-color-background-neutral);border-radius:var(--rs-unit-radius-small);height:var(--rs-unit-x1);width:100%}.bar,.input{overflow:hidden}.input{height:1px;opacity:0;pointer-events:none;position:absolute;width:1px}.selection{background:var(--rs-color-background-primary);height:100%;position:absolute}.tooltip{background:var(--rs-color-background-elevation-overlay);border-radius:var(--rs-unit-radius-small);bottom:100%;box-shadow:var(--rs-shadow-overlay);color:var(--rs-color-foreground-neutral);left:50%;opacity:0;padding:calc(var(--rs-unit-x1) / 2) var(--rs-unit-x1);transform:translate(-50%);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity,transform;-webkit-user-select:none;-moz-user-select:none;user-select:none}.thumb,.tooltip{position:absolute}.thumb{height:100%;width:0}.thumb:before{background:var(--rs-color-background-primary);border-radius:999px;box-shadow:0 0 0 2px var(--rs-color-background-elevation-base);box-sizing:border-box;height:var(--rs-unit-x4);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:box-shadow;width:var(--rs-unit-x4)}.thumb:after,.thumb:before{content:"";left:0;position:absolute;top:50%;transform:translate(-50%,-50%)}.thumb:after{cursor:grab;height:var(--rs-unit-x9);width:var(--rs-unit-x9)}.thumb:hover .tooltip{opacity:1;transform:translate(-50%,calc(var(--rs-unit-x1) * -1))}.input:focus+.thumb:after,.thumb--active:after{cursor:grabbing}.input:focus+.thumb:before,.thumb--active:before{box-shadow:0 0 0 1px var(--rs-color-background-elevation-base)}.input:focus+.thumb .tooltip,.thumb--active .tooltip{opacity:1;transform:translate(-50%,calc(var(--rs-unit-x1) * -1)) scale(1.1)!important}.--disabled{cursor:not-allowed}.--disabled .bar{background-color:var(--rs-color-background-disabled)}.--disabled .selection,.--disabled .thumb:before{background-color:var(--rs-color-foreground-disabled)}.--disabled .thumb:after{cursor:not-allowed}.--disabled .thumb:hover .tooltip{opacity:0}

package/components/Text/Text.js

@@ -17,7 +17,7 @@ const Text = (props) => {
      * It still resolves the attributes correctly based on the tag
      */
     const TagName = props.as || (largestVariant && tagMap[largestVariant]) || "div";
-    const rootClassName = classNames(s.root, color && s[`--color-${color}`], ...responsiveClassNames(s, "--variant", variant), ...responsiveClassNames(s, "--align", align), weight && s[`--weight-${weight}`], decoration && s[`--decoration-${decoration}`], maxLines !== undefined && s[`--clamp`], className);
+    const rootClassName = classNames(s.root, color && s[`--color-${color}`], ...responsiveClassNames(s, "--variant", variant), ...responsiveClassNames(s, "--align", align), weight && s[`--weight-${weight}`], decoration && s[`--decoration-${decoration}`], maxLines !== undefined && s[`--clamp`], maxLines === 1 && s["--break-all"], className);
     const style = Object.assign(Object.assign({}, attributes === null || attributes === void 0 ? void 0 : attributes.style), { "--rs-text-lines": maxLines });
     return (React.createElement(TagName, Object.assign({}, attributes, { className: rootClassName, style: style }), children));
 };

package/components/Text/Text.module.css

@@ -1 +1 @@
-.root{transition:color var(--rs-duration-fast) var(--rs-easing-standard)}.--clamp{-webkit-box-orient:vertical;-webkit-line-clamp:var(--rs-text-lines);display:-webkit-box;overflow:hidden}.--align-start{text-align:start}.--align-center{text-align:center}.--align-end{text-align:end}.--variant-title-1{font-family:var(--rs-font-family-title-1);font-size:var(--rs-font-size-title-1);font-weight:var(--rs-font-weight-title-1);line-height:var(--rs-line-height-title-1)}.--variant-title-2{font-family:var(--rs-font-family-title-2);font-size:var(--rs-font-size-title-2);font-weight:var(--rs-font-weight-title-2);line-height:var(--rs-line-height-title-2)}.--variant-title-3{font-family:var(--rs-font-family-title-3);font-size:var(--rs-font-size-title-3);font-weight:var(--rs-font-weight-title-3);line-height:var(--rs-line-height-title-3)}.--variant-title-4{font-family:var(--rs-font-family-title-4);font-size:var(--rs-font-size-title-4);font-weight:var(--rs-font-weight-title-4);line-height:var(--rs-line-height-title-4)}.--variant-title-5{font-family:var(--rs-font-family-title-5);font-size:var(--rs-font-size-title-5);font-weight:var(--rs-font-weight-title-5);line-height:var(--rs-line-height-title-5)}.--variant-title-6{font-family:var(--rs-font-family-title-6);font-size:var(--rs-font-size-title-6);font-weight:var(--rs-font-weight-title-6);line-height:var(--rs-line-height-title-6)}.--variant-featured-1{font-family:var(--rs-font-family-featured-1);font-size:var(--rs-font-size-featured-1);font-weight:var(--rs-font-weight-featured-1);line-height:var(--rs-line-height-featured-1)}.--variant-featured-2{font-family:var(--rs-font-family-featured-2);font-size:var(--rs-font-size-featured-2);font-weight:var(--rs-font-weight-featured-2);line-height:var(--rs-line-height-featured-2)}.--variant-featured-3{font-family:var(--rs-font-family-featured-3);font-size:var(--rs-font-size-featured-3);font-weight:var(--rs-font-weight-featured-3);line-height:var(--rs-line-height-featured-3)}.--variant-body-1{font-family:var(--rs-font-family-body-1);font-size:var(--rs-font-size-body-1);font-weight:var(--rs-font-weight-body-1);line-height:var(--rs-line-height-body-1)}.--variant-body-2{font-family:var(--rs-font-family-body-2);font-size:var(--rs-font-size-body-2);font-weight:var(--rs-font-weight-body-2);line-height:var(--rs-line-height-body-2)}.--variant-body-3{font-family:var(--rs-font-family-body-3);font-size:var(--rs-font-size-body-3);font-weight:var(--rs-font-weight-body-3);line-height:var(--rs-line-height-body-3)}.--variant-caption-1{font-family:var(--rs-font-family-caption-1);font-size:var(--rs-font-size-caption-1);font-weight:var(--rs-font-weight-caption-1);line-height:var(--rs-line-height-caption-1)}.--variant-caption-2{font-family:var(--rs-font-family-caption-2);font-size:var(--rs-font-size-caption-2);font-weight:var(--rs-font-weight-caption-2);line-height:var(--rs-line-height-caption-2)}.--weight-regular{font-weight:var(--rs-font-weight-regular)!important}.--weight-medium{font-weight:var(--rs-font-weight-medium)!important}.--weight-bold{font-weight:var(--rs-font-weight-bold)!important}.--color-neutral{color:var(--rs-color-foreground-neutral)}.--color-neutral-faded{color:var(--rs-color-foreground-neutral-faded)}.--color-primary{color:var(--rs-color-foreground-primary)}.--color-positive{color:var(--rs-color-foreground-positive)}.--color-critical{color:var(--rs-color-foreground-critical)}.--color-disabled{color:var(--rs-color-foreground-disabled)}.--decoration-line-through{text-decoration:line-through}@media (min-width:660px){.--align-start--m{text-align:start}.--align-center--m{text-align:center}.--align-end--m{text-align:end}.--variant-title-1--m{font-family:var(--rs-font-family-title-1);font-size:var(--rs-font-size-title-1);font-weight:var(--rs-font-weight-title-1);line-height:var(--rs-line-height-title-1)}.--variant-title-2--m{font-family:var(--rs-font-family-title-2);font-size:var(--rs-font-size-title-2);font-weight:var(--rs-font-weight-title-2);line-height:var(--rs-line-height-title-2)}.--variant-title-3--m{font-family:var(--rs-font-family-title-3);font-size:var(--rs-font-size-title-3);font-weight:var(--rs-font-weight-title-3);line-height:var(--rs-line-height-title-3)}.--variant-title-4--m{font-family:var(--rs-font-family-title-4);font-size:var(--rs-font-size-title-4);font-weight:var(--rs-font-weight-title-4);line-height:var(--rs-line-height-title-4)}.--variant-title-5--m{font-family:var(--rs-font-family-title-5);font-size:var(--rs-font-size-title-5);font-weight:var(--rs-font-weight-title-5);line-height:var(--rs-line-height-title-5)}.--variant-title-6--m{font-family:var(--rs-font-family-title-6);font-size:var(--rs-font-size-title-6);font-weight:var(--rs-font-weight-title-6);line-height:var(--rs-line-height-title-6)}.--variant-featured-1--m{font-family:var(--rs-font-family-featured-1);font-size:var(--rs-font-size-featured-1);font-weight:var(--rs-font-weight-featured-1);line-height:var(--rs-line-height-featured-1)}.--variant-featured-2--m{font-family:var(--rs-font-family-featured-2);font-size:var(--rs-font-size-featured-2);font-weight:var(--rs-font-weight-featured-2);line-height:var(--rs-line-height-featured-2)}.--variant-featured-3--m{font-family:var(--rs-font-family-featured-3);font-size:var(--rs-font-size-featured-3);font-weight:var(--rs-font-weight-featured-3);line-height:var(--rs-line-height-featured-3)}.--variant-body-1--m{font-family:var(--rs-font-family-body-1);font-size:var(--rs-font-size-body-1);font-weight:var(--rs-font-weight-body-1);line-height:var(--rs-line-height-body-1)}.--variant-body-2--m{font-family:var(--rs-font-family-body-2);font-size:var(--rs-font-size-body-2);font-weight:var(--rs-font-weight-body-2);line-height:var(--rs-line-height-body-2)}.--variant-body-3--m{font-family:var(--rs-font-family-body-3);font-size:var(--rs-font-size-body-3);font-weight:var(--rs-font-weight-body-3);line-height:var(--rs-line-height-body-3)}.--variant-caption-1--m{font-family:var(--rs-font-family-caption-1);font-size:var(--rs-font-size-caption-1);font-weight:var(--rs-font-weight-caption-1);line-height:var(--rs-line-height-caption-1)}.--variant-caption-2--m{font-family:var(--rs-font-family-caption-2);font-size:var(--rs-font-size-caption-2);font-weight:var(--rs-font-weight-caption-2);line-height:var(--rs-line-height-caption-2)}}@media (min-width:900px){.--align-start--l{text-align:start}.--align-center--l{text-align:center}.--align-end--l{text-align:end}.--variant-title-1--l{font-family:var(--rs-font-family-title-1);font-size:var(--rs-font-size-title-1);font-weight:var(--rs-font-weight-title-1);line-height:var(--rs-line-height-title-1)}.--variant-title-2--l{font-family:var(--rs-font-family-title-2);font-size:var(--rs-font-size-title-2);font-weight:var(--rs-font-weight-title-2);line-height:var(--rs-line-height-title-2)}.--variant-title-3--l{font-family:var(--rs-font-family-title-3);font-size:var(--rs-font-size-title-3);font-weight:var(--rs-font-weight-title-3);line-height:var(--rs-line-height-title-3)}.--variant-title-4--l{font-family:var(--rs-font-family-title-4);font-size:var(--rs-font-size-title-4);font-weight:var(--rs-font-weight-title-4);line-height:var(--rs-line-height-title-4)}.--variant-title-5--l{font-family:var(--rs-font-family-title-5);font-size:var(--rs-font-size-title-5);font-weight:var(--rs-font-weight-title-5);line-height:var(--rs-line-height-title-5)}.--variant-title-6--l{font-family:var(--rs-font-family-title-6);font-size:var(--rs-font-size-title-6);font-weight:var(--rs-font-weight-title-6);line-height:var(--rs-line-height-title-6)}.--variant-featured-1--l{font-family:var(--rs-font-family-featured-1);font-size:var(--rs-font-size-featured-1);font-weight:var(--rs-font-weight-featured-1);line-height:var(--rs-line-height-featured-1)}.--variant-featured-2--l{font-family:var(--rs-font-family-featured-2);font-size:var(--rs-font-size-featured-2);font-weight:var(--rs-font-weight-featured-2);line-height:var(--rs-line-height-featured-2)}.--variant-featured-3--l{font-family:var(--rs-font-family-featured-3);font-size:var(--rs-font-size-featured-3);font-weight:var(--rs-font-weight-featured-3);line-height:var(--rs-line-height-featured-3)}.--variant-body-1--l{font-family:var(--rs-font-family-body-1);font-size:var(--rs-font-size-body-1);font-weight:var(--rs-font-weight-body-1);line-height:var(--rs-line-height-body-1)}.--variant-body-2--l{font-family:var(--rs-font-family-body-2);font-size:var(--rs-font-size-body-2);font-weight:var(--rs-font-weight-body-2);line-height:var(--rs-line-height-body-2)}.--variant-body-3--l{font-family:var(--rs-font-family-body-3);font-size:var(--rs-font-size-body-3);font-weight:var(--rs-font-weight-body-3);line-height:var(--rs-line-height-body-3)}.--variant-caption-1--l{font-family:var(--rs-font-family-caption-1);font-size:var(--rs-font-size-caption-1);font-weight:var(--rs-font-weight-caption-1);line-height:var(--rs-line-height-caption-1)}.--variant-caption-2--l{font-family:var(--rs-font-family-caption-2);font-size:var(--rs-font-size-caption-2);font-weight:var(--rs-font-weight-caption-2);line-height:var(--rs-line-height-caption-2)}}@media (min-width:1280px){.--align-start--xl{text-align:start}.--align-center--xl{text-align:center}.--align-end--xl{text-align:end}.--variant-title-1--xl{font-family:var(--rs-font-family-title-1);font-size:var(--rs-font-size-title-1);font-weight:var(--rs-font-weight-title-1);line-height:var(--rs-line-height-title-1)}.--variant-title-2--xl{font-family:var(--rs-font-family-title-2);font-size:var(--rs-font-size-title-2);font-weight:var(--rs-font-weight-title-2);line-height:var(--rs-line-height-title-2)}.--variant-title-3--xl{font-family:var(--rs-font-family-title-3);font-size:var(--rs-font-size-title-3);font-weight:var(--rs-font-weight-title-3);line-height:var(--rs-line-height-title-3)}.--variant-title-4--xl{font-family:var(--rs-font-family-title-4);font-size:var(--rs-font-size-title-4);font-weight:var(--rs-font-weight-title-4);line-height:var(--rs-line-height-title-4)}.--variant-title-5--xl{font-family:var(--rs-font-family-title-5);font-size:var(--rs-font-size-title-5);font-weight:var(--rs-font-weight-title-5);line-height:var(--rs-line-height-title-5)}.--variant-title-6--xl{font-family:var(--rs-font-family-title-6);font-size:var(--rs-font-size-title-6);font-weight:var(--rs-font-weight-title-6);line-height:var(--rs-line-height-title-6)}.--variant-featured-1--xl{font-family:var(--rs-font-family-featured-1);font-size:var(--rs-font-size-featured-1);font-weight:var(--rs-font-weight-featured-1);line-height:var(--rs-line-height-featured-1)}.--variant-featured-2--xl{font-family:var(--rs-font-family-featured-2);font-size:var(--rs-font-size-featured-2);font-weight:var(--rs-font-weight-featured-2);line-height:var(--rs-line-height-featured-2)}.--variant-featured-3--xl{font-family:var(--rs-font-family-featured-3);font-size:var(--rs-font-size-featured-3);font-weight:var(--rs-font-weight-featured-3);line-height:var(--rs-line-height-featured-3)}.--variant-body-1--xl{font-family:var(--rs-font-family-body-1);font-size:var(--rs-font-size-body-1);font-weight:var(--rs-font-weight-body-1);line-height:var(--rs-line-height-body-1)}.--variant-body-2--xl{font-family:var(--rs-font-family-body-2);font-size:var(--rs-font-size-body-2);font-weight:var(--rs-font-weight-body-2);line-height:var(--rs-line-height-body-2)}.--variant-body-3--xl{font-family:var(--rs-font-family-body-3);font-size:var(--rs-font-size-body-3);font-weight:var(--rs-font-weight-body-3);line-height:var(--rs-line-height-body-3)}.--variant-caption-1--xl{font-family:var(--rs-font-family-caption-1);font-size:var(--rs-font-size-caption-1);font-weight:var(--rs-font-weight-caption-1);line-height:var(--rs-line-height-caption-1)}.--variant-caption-2--xl{font-family:var(--rs-font-family-caption-2);font-size:var(--rs-font-size-caption-2);font-weight:var(--rs-font-weight-caption-2);line-height:var(--rs-line-height-caption-2)}}
+.root{transition:color var(--rs-duration-fast) var(--rs-easing-standard)}.--clamp{-webkit-box-orient:vertical;-webkit-line-clamp:var(--rs-text-lines);display:-webkit-box;overflow:hidden}.--break-all{word-break:break-all}.--align-start{text-align:start}.--align-center{text-align:center}.--align-end{text-align:end}.--variant-title-1{font-family:var(--rs-font-family-title-1);font-size:var(--rs-font-size-title-1);font-weight:var(--rs-font-weight-title-1);line-height:var(--rs-line-height-title-1)}.--variant-title-2{font-family:var(--rs-font-family-title-2);font-size:var(--rs-font-size-title-2);font-weight:var(--rs-font-weight-title-2);line-height:var(--rs-line-height-title-2)}.--variant-title-3{font-family:var(--rs-font-family-title-3);font-size:var(--rs-font-size-title-3);font-weight:var(--rs-font-weight-title-3);line-height:var(--rs-line-height-title-3)}.--variant-title-4{font-family:var(--rs-font-family-title-4);font-size:var(--rs-font-size-title-4);font-weight:var(--rs-font-weight-title-4);line-height:var(--rs-line-height-title-4)}.--variant-title-5{font-family:var(--rs-font-family-title-5);font-size:var(--rs-font-size-title-5);font-weight:var(--rs-font-weight-title-5);line-height:var(--rs-line-height-title-5)}.--variant-title-6{font-family:var(--rs-font-family-title-6);font-size:var(--rs-font-size-title-6);font-weight:var(--rs-font-weight-title-6);line-height:var(--rs-line-height-title-6)}.--variant-featured-1{font-family:var(--rs-font-family-featured-1);font-size:var(--rs-font-size-featured-1);font-weight:var(--rs-font-weight-featured-1);line-height:var(--rs-line-height-featured-1)}.--variant-featured-2{font-family:var(--rs-font-family-featured-2);font-size:var(--rs-font-size-featured-2);font-weight:var(--rs-font-weight-featured-2);line-height:var(--rs-line-height-featured-2)}.--variant-featured-3{font-family:var(--rs-font-family-featured-3);font-size:var(--rs-font-size-featured-3);font-weight:var(--rs-font-weight-featured-3);line-height:var(--rs-line-height-featured-3)}.--variant-body-1{font-family:var(--rs-font-family-body-1);font-size:var(--rs-font-size-body-1);font-weight:var(--rs-font-weight-body-1);line-height:var(--rs-line-height-body-1)}.--variant-body-2{font-family:var(--rs-font-family-body-2);font-size:var(--rs-font-size-body-2);font-weight:var(--rs-font-weight-body-2);line-height:var(--rs-line-height-body-2)}.--variant-body-3{font-family:var(--rs-font-family-body-3);font-size:var(--rs-font-size-body-3);font-weight:var(--rs-font-weight-body-3);line-height:var(--rs-line-height-body-3)}.--variant-caption-1{font-family:var(--rs-font-family-caption-1);font-size:var(--rs-font-size-caption-1);font-weight:var(--rs-font-weight-caption-1);line-height:var(--rs-line-height-caption-1)}.--variant-caption-2{font-family:var(--rs-font-family-caption-2);font-size:var(--rs-font-size-caption-2);font-weight:var(--rs-font-weight-caption-2);line-height:var(--rs-line-height-caption-2)}.--weight-regular{font-weight:var(--rs-font-weight-regular)!important}.--weight-medium{font-weight:var(--rs-font-weight-medium)!important}.--weight-bold{font-weight:var(--rs-font-weight-bold)!important}.--color-neutral{color:var(--rs-color-foreground-neutral)}.--color-neutral-faded{color:var(--rs-color-foreground-neutral-faded)}.--color-primary{color:var(--rs-color-foreground-primary)}.--color-positive{color:var(--rs-color-foreground-positive)}.--color-critical{color:var(--rs-color-foreground-critical)}.--color-disabled{color:var(--rs-color-foreground-disabled)}.--decoration-line-through{text-decoration:line-through}@media (min-width:660px){.--align-start--m{text-align:start}.--align-center--m{text-align:center}.--align-end--m{text-align:end}.--variant-title-1--m{font-family:var(--rs-font-family-title-1);font-size:var(--rs-font-size-title-1);font-weight:var(--rs-font-weight-title-1);line-height:var(--rs-line-height-title-1)}.--variant-title-2--m{font-family:var(--rs-font-family-title-2);font-size:var(--rs-font-size-title-2);font-weight:var(--rs-font-weight-title-2);line-height:var(--rs-line-height-title-2)}.--variant-title-3--m{font-family:var(--rs-font-family-title-3);font-size:var(--rs-font-size-title-3);font-weight:var(--rs-font-weight-title-3);line-height:var(--rs-line-height-title-3)}.--variant-title-4--m{font-family:var(--rs-font-family-title-4);font-size:var(--rs-font-size-title-4);font-weight:var(--rs-font-weight-title-4);line-height:var(--rs-line-height-title-4)}.--variant-title-5--m{font-family:var(--rs-font-family-title-5);font-size:var(--rs-font-size-title-5);font-weight:var(--rs-font-weight-title-5);line-height:var(--rs-line-height-title-5)}.--variant-title-6--m{font-family:var(--rs-font-family-title-6);font-size:var(--rs-font-size-title-6);font-weight:var(--rs-font-weight-title-6);line-height:var(--rs-line-height-title-6)}.--variant-featured-1--m{font-family:var(--rs-font-family-featured-1);font-size:var(--rs-font-size-featured-1);font-weight:var(--rs-font-weight-featured-1);line-height:var(--rs-line-height-featured-1)}.--variant-featured-2--m{font-family:var(--rs-font-family-featured-2);font-size:var(--rs-font-size-featured-2);font-weight:var(--rs-font-weight-featured-2);line-height:var(--rs-line-height-featured-2)}.--variant-featured-3--m{font-family:var(--rs-font-family-featured-3);font-size:var(--rs-font-size-featured-3);font-weight:var(--rs-font-weight-featured-3);line-height:var(--rs-line-height-featured-3)}.--variant-body-1--m{font-family:var(--rs-font-family-body-1);font-size:var(--rs-font-size-body-1);font-weight:var(--rs-font-weight-body-1);line-height:var(--rs-line-height-body-1)}.--variant-body-2--m{font-family:var(--rs-font-family-body-2);font-size:var(--rs-font-size-body-2);font-weight:var(--rs-font-weight-body-2);line-height:var(--rs-line-height-body-2)}.--variant-body-3--m{font-family:var(--rs-font-family-body-3);font-size:var(--rs-font-size-body-3);font-weight:var(--rs-font-weight-body-3);line-height:var(--rs-line-height-body-3)}.--variant-caption-1--m{font-family:var(--rs-font-family-caption-1);font-size:var(--rs-font-size-caption-1);font-weight:var(--rs-font-weight-caption-1);line-height:var(--rs-line-height-caption-1)}.--variant-caption-2--m{font-family:var(--rs-font-family-caption-2);font-size:var(--rs-font-size-caption-2);font-weight:var(--rs-font-weight-caption-2);line-height:var(--rs-line-height-caption-2)}}@media (min-width:900px){.--align-start--l{text-align:start}.--align-center--l{text-align:center}.--align-end--l{text-align:end}.--variant-title-1--l{font-family:var(--rs-font-family-title-1);font-size:var(--rs-font-size-title-1);font-weight:var(--rs-font-weight-title-1);line-height:var(--rs-line-height-title-1)}.--variant-title-2--l{font-family:var(--rs-font-family-title-2);font-size:var(--rs-font-size-title-2);font-weight:var(--rs-font-weight-title-2);line-height:var(--rs-line-height-title-2)}.--variant-title-3--l{font-family:var(--rs-font-family-title-3);font-size:var(--rs-font-size-title-3);font-weight:var(--rs-font-weight-title-3);line-height:var(--rs-line-height-title-3)}.--variant-title-4--l{font-family:var(--rs-font-family-title-4);font-size:var(--rs-font-size-title-4);font-weight:var(--rs-font-weight-title-4);line-height:var(--rs-line-height-title-4)}.--variant-title-5--l{font-family:var(--rs-font-family-title-5);font-size:var(--rs-font-size-title-5);font-weight:var(--rs-font-weight-title-5);line-height:var(--rs-line-height-title-5)}.--variant-title-6--l{font-family:var(--rs-font-family-title-6);font-size:var(--rs-font-size-title-6);font-weight:var(--rs-font-weight-title-6);line-height:var(--rs-line-height-title-6)}.--variant-featured-1--l{font-family:var(--rs-font-family-featured-1);font-size:var(--rs-font-size-featured-1);font-weight:var(--rs-font-weight-featured-1);line-height:var(--rs-line-height-featured-1)}.--variant-featured-2--l{font-family:var(--rs-font-family-featured-2);font-size:var(--rs-font-size-featured-2);font-weight:var(--rs-font-weight-featured-2);line-height:var(--rs-line-height-featured-2)}.--variant-featured-3--l{font-family:var(--rs-font-family-featured-3);font-size:var(--rs-font-size-featured-3);font-weight:var(--rs-font-weight-featured-3);line-height:var(--rs-line-height-featured-3)}.--variant-body-1--l{font-family:var(--rs-font-family-body-1);font-size:var(--rs-font-size-body-1);font-weight:var(--rs-font-weight-body-1);line-height:var(--rs-line-height-body-1)}.--variant-body-2--l{font-family:var(--rs-font-family-body-2);font-size:var(--rs-font-size-body-2);font-weight:var(--rs-font-weight-body-2);line-height:var(--rs-line-height-body-2)}.--variant-body-3--l{font-family:var(--rs-font-family-body-3);font-size:var(--rs-font-size-body-3);font-weight:var(--rs-font-weight-body-3);line-height:var(--rs-line-height-body-3)}.--variant-caption-1--l{font-family:var(--rs-font-family-caption-1);font-size:var(--rs-font-size-caption-1);font-weight:var(--rs-font-weight-caption-1);line-height:var(--rs-line-height-caption-1)}.--variant-caption-2--l{font-family:var(--rs-font-family-caption-2);font-size:var(--rs-font-size-caption-2);font-weight:var(--rs-font-weight-caption-2);line-height:var(--rs-line-height-caption-2)}}@media (min-width:1280px){.--align-start--xl{text-align:start}.--align-center--xl{text-align:center}.--align-end--xl{text-align:end}.--variant-title-1--xl{font-family:var(--rs-font-family-title-1);font-size:var(--rs-font-size-title-1);font-weight:var(--rs-font-weight-title-1);line-height:var(--rs-line-height-title-1)}.--variant-title-2--xl{font-family:var(--rs-font-family-title-2);font-size:var(--rs-font-size-title-2);font-weight:var(--rs-font-weight-title-2);line-height:var(--rs-line-height-title-2)}.--variant-title-3--xl{font-family:var(--rs-font-family-title-3);font-size:var(--rs-font-size-title-3);font-weight:var(--rs-font-weight-title-3);line-height:var(--rs-line-height-title-3)}.--variant-title-4--xl{font-family:var(--rs-font-family-title-4);font-size:var(--rs-font-size-title-4);font-weight:var(--rs-font-weight-title-4);line-height:var(--rs-line-height-title-4)}.--variant-title-5--xl{font-family:var(--rs-font-family-title-5);font-size:var(--rs-font-size-title-5);font-weight:var(--rs-font-weight-title-5);line-height:var(--rs-line-height-title-5)}.--variant-title-6--xl{font-family:var(--rs-font-family-title-6);font-size:var(--rs-font-size-title-6);font-weight:var(--rs-font-weight-title-6);line-height:var(--rs-line-height-title-6)}.--variant-featured-1--xl{font-family:var(--rs-font-family-featured-1);font-size:var(--rs-font-size-featured-1);font-weight:var(--rs-font-weight-featured-1);line-height:var(--rs-line-height-featured-1)}.--variant-featured-2--xl{font-family:var(--rs-font-family-featured-2);font-size:var(--rs-font-size-featured-2);font-weight:var(--rs-font-weight-featured-2);line-height:var(--rs-line-height-featured-2)}.--variant-featured-3--xl{font-family:var(--rs-font-family-featured-3);font-size:var(--rs-font-size-featured-3);font-weight:var(--rs-font-weight-featured-3);line-height:var(--rs-line-height-featured-3)}.--variant-body-1--xl{font-family:var(--rs-font-family-body-1);font-size:var(--rs-font-size-body-1);font-weight:var(--rs-font-weight-body-1);line-height:var(--rs-line-height-body-1)}.--variant-body-2--xl{font-family:var(--rs-font-family-body-2);font-size:var(--rs-font-size-body-2);font-weight:var(--rs-font-weight-body-2);line-height:var(--rs-line-height-body-2)}.--variant-body-3--xl{font-family:var(--rs-font-family-body-3);font-size:var(--rs-font-size-body-3);font-weight:var(--rs-font-weight-body-3);line-height:var(--rs-line-height-body-3)}.--variant-caption-1--xl{font-family:var(--rs-font-family-caption-1);font-size:var(--rs-font-size-caption-1);font-weight:var(--rs-font-weight-caption-1);line-height:var(--rs-line-height-caption-1)}.--variant-caption-2--xl{font-family:var(--rs-font-family-caption-2);font-size:var(--rs-font-size-caption-2);font-weight:var(--rs-font-weight-caption-2);line-height:var(--rs-line-height-caption-2)}}

package/components/Text/tests/Text.stories.js

@@ -87,7 +87,7 @@ export const decoration = () => (<Example>
 	</Example>);
 export const maxLines = () => (<Example>
 		<Example.Item title="maxLines: 2">
-			<Text maxLines={2}>
+			<Text maxLines={1}>
 				There are many variations of passages of Lorem Ipsum available, but the majority have
 				suffered alteration in some form, by injected humour, or randomised words which don't look
 				even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be

package/hooks/useResponsiveClientValue.d.ts

@@ -1,3 +1,3 @@
 import type * as G from "../types/global";
-declare const useResponsiveClientValue: <T extends unknown>(value: G.ResponsiveOnly<T>) => T | undefined;
+declare const useResponsiveClientValue: <T extends unknown>(value: G.Responsive<T>) => T | undefined;
 export default useResponsiveClientValue;

package/hooks/useResponsiveClientValue.js

@@ -32,6 +32,9 @@ const useResponsiveClientValue = (value) => {
             });
         };
     }, []);
+    if (typeof value !== "object" || value === null || !("s" in value)) {
+        return value;
+    }
     if (viewport === "xl")
         return value.xl || value.l || value.m || value.s;
     if (viewport === "l")

package/index.d.ts

@@ -19,6 +19,8 @@ export { default as Button } from "./components/Button";
 export type { ButtonProps, ButtonAlignerProps } from "./components/Button";
 export { default as Breadcrumbs } from "./components/Breadcrumbs";
 export type { BreadcrumbsProps } from "./components/Breadcrumbs";
+export { default as Calendar } from "./components/Calendar";
+export type { CalendarProps } from "./components/Calendar";
 export { default as Card } from "./components/Card";
 export type { CardProps } from "./components/Card";
 export { default as Carousel } from "./components/Carousel";

package/index.js

@@ -10,6 +10,7 @@ export { default as Avatar } from "./components/Avatar/index.js";
 export { default as Badge } from "./components/Badge/index.js";
 export { default as Button } from "./components/Button/index.js";
 export { default as Breadcrumbs } from "./components/Breadcrumbs/index.js";
+export { default as Calendar } from "./components/Calendar/index.js";
 export { default as Card } from "./components/Card/index.js";
 export { default as Carousel } from "./components/Carousel/index.js";
 export { default as Checkbox } from "./components/Checkbox/index.js";

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "reshaped",
 	"description": "Professionally crafted design system in React & Figma for building products of any scale and complexity",
-	"version": "2.6.4",
+	"version": "2.7.0",
 	"license": "SEE LICENSE IN LICENSE.md",
 	"email": "hello@reshaped.so",
 	"homepage": "https://reshaped.so",
@@ -86,9 +86,9 @@
 		"@semantic-release/changelog": "6.0.3",
 		"@semantic-release/git": "10.0.1",
 		"@size-limit/preset-big-lib": "9.0.0",
-		"@storybook/addon-a11y": "7.5.3",
-		"@storybook/react": "7.5.3",
-		"@storybook/react-vite": "7.5.3",
+		"@storybook/addon-a11y": "7.6.3",
+		"@storybook/react": "7.6.3",
+		"@storybook/react-vite": "7.6.3",
 		"@testing-library/jest-dom": "6.1.4",
 		"@testing-library/react": "14.1.2",
 		"@testing-library/user-event": "14.5.1",
@@ -126,13 +126,13 @@
 		"resolve-tspaths": "0.8.17",
 		"semantic-release": "22.0.8",
 		"size-limit": "9.0.0",
-		"storybook": "7.5.3",
+		"storybook": "7.6.3",
 		"stylelint": "15.11.0",
 		"stylelint-config-prettier": "9.0.5",
 		"stylelint-config-standard": "34.0.0",
 		"ts-jest": "29.1.1",
 		"typescript": "5.2.2",
-		"vite": "5.0.0",
+		"vite": "4",
 		"vite-tsconfig-paths": "4.2.1"
 	},
 	"peerDependencies": {