reshaped 2.11.12 → 3.0.0

package/dist/components/Link/tests/Link.stories.js

@@ -0,0 +1,72 @@
+import { Example } from "../../../utilities/storybook/index.js";
+import Link from "../index.js";
+import Text from "../../Text/index.js";
+import IconZap from "../../../icons/Zap.js";
+export default {
+    title: "Components/Link",
+    component: Link,
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/components/breadcrumbs",
+        },
+    },
+};
+export const variant = () => (<Example>
+		<Example.Item title="variant: underline">
+			<Link href="http://reshaped.so" attributes={{ target: "_blank" }}>
+				Reshaped
+			</Link>
+		</Example.Item>
+		<Example.Item title="variant: plain">
+			<Link onClick={() => { }} variant="plain">
+				Link
+			</Link>
+		</Example.Item>
+	</Example>);
+export const color = () => (<Example>
+		<Example.Item title="color: primary">
+			<Link color="primary">Link</Link>
+		</Example.Item>
+		<Example.Item title="color: critical">
+			<Link color="critical">Link</Link>
+		</Example.Item>
+		<Example.Item title="color: positive">
+			<Link color="positive">Link</Link>
+		</Example.Item>
+		<Example.Item title="color: warning">
+			<Link color="warning">Link</Link>
+		</Example.Item>
+		<Example.Item title="color: inherit">
+			<Link color="inherit">Link</Link>
+		</Example.Item>
+	</Example>);
+export const disabled = () => (<Example>
+		<Example.Item title="disabled">
+			<Link disabled>Link</Link>
+		</Example.Item>
+	</Example>);
+export const withIcon = () => (<Example>
+		<Example.Item title="icon, variant: underline">
+			<Link icon={IconZap}>Link</Link>
+		</Example.Item>
+		<Example.Item title="icon, variant: plain">
+			<Link icon={IconZap} variant="plain">
+				Link
+			</Link>
+		</Example.Item>
+		<Example.Item title={["icon, variant: underline", "should inherit display-1 size from the parent"]}>
+			<Text variant="title-3">
+				<Link icon={IconZap} variant="underline">
+					Instant delivery
+				</Link>
+			</Text>
+		</Example.Item>
+	</Example>);
+export const testMultilineInText = () => (<Example>
+		<Example.Item title="should wrap inside the text">
+			<div>
+				Someone asked me to write this text that is boring to ready for everyone and to add&nbsp;
+				<Link href="/">this very very long link</Link> to it.
+			</div>
+		</Example.Item>
+	</Example>);

package/dist/components/Loader/Loader.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { classNames, responsiveClassNames } from "../../utilities/helpers.js";
+import s from "./Loader.module.css";
+const Loader = (props) => {
+    const { size = "small", color = "primary", className, attributes } = props;
+    const ariaLabel = attributes?.["aria-label"];
+    const rootClassNames = classNames(s.root, className, responsiveClassNames(s, "--size", size), color && s[`--color-${color}`]);
+    return (_jsx("span", { ...attributes, role: "progressbar", "aria-live": ariaLabel ? "assertive" : undefined, "aria-label": ariaLabel, className: rootClassNames, children: _jsx("span", { className: s.inner }) }));
+};
+export default Loader;

package/dist/components/Loader/Loader.module.css

@@ -0,0 +1 @@
+@keyframes rs-reshaped-loader{0%{transform:rotate(0deg)}50%{transform:rotate(540deg)}to{transform:rotate(3turn)}}.root{animation:rs-reshaped-loader 2.2s cubic-bezier(.445,.05,.55,.95) infinite;display:block;height:var(--rs-loader-size);position:relative;width:var(--rs-loader-size)}.root:after,.root:before{background:var(--rs-loader-color);border-radius:50%;content:"";height:var(--rs-loader-stroke);position:absolute;top:50%;transform:translateY(-50%);width:var(--rs-loader-stroke);z-index:2}.root:before{left:0}.root:after{right:0}.inner:after,.inner:before{border:var(--rs-loader-stroke) solid var(--rs-loader-color);border-radius:50%;content:"";inset:0;position:absolute}.inner:before{opacity:.28}.inner:after{border-bottom-color:transparent;border-left-color:transparent;transform:rotate(-45deg)}.--color-inherit{--rs-loader-color:currentcolor}.--color-primary{--rs-loader-color:var(--rs-color-border-primary)}.--color-positive{--rs-loader-color:var(--rs-color-border-positive)}.--color-critical{--rs-loader-color:var(--rs-color-border-critical)}.--size-small{--rs-loader-size:var(--rs-unit-x4);--rs-loader-stroke:2px}.--size-medium{--rs-loader-size:var(--rs-unit-x6);--rs-loader-stroke:3px}@media (--rs-viewport-m ){.--size-small--m{--rs-loader-size:var(--rs-unit-x4);--rs-loader-stroke:2px}.--size-medium--m{--rs-loader-size:var(--rs-unit-x6);--rs-loader-stroke:3px}}@media (--rs-viewport-l ){.--size-small--l{--rs-loader-size:var(--rs-unit-x4);--rs-loader-stroke:2px}.--size-medium--l{--rs-loader-size:var(--rs-unit-x6);--rs-loader-stroke:3px}}@media (--rs-viewport-xl ){.--size-small--xl{--rs-loader-size:var(--rs-unit-x4);--rs-loader-stroke:2px}.--size-medium--xl{--rs-loader-size:var(--rs-unit-x6);--rs-loader-stroke:3px}}

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

@@ -0,0 +1,7 @@
+import type * as G from "../../types/global";
+export type Props = {
+    size?: G.Responsive<"small" | "medium">;
+    color?: "primary" | "critical" | "positive" | "inherit";
+    className?: G.ClassName;
+    attributes?: G.Attributes<"span">;
+};

package/dist/components/Loader/tests/Loader.stories.js

@@ -0,0 +1,39 @@
+import { Example } from "../../../utilities/storybook/index.js";
+import Loader from "../index.js";
+export default {
+    title: "Components/Loader",
+    component: Loader,
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/components/loader",
+        },
+    },
+};
+export const size = () => {
+    const attributes = {};
+    return (<Example>
+			<Example.Item title="size: medium">
+				<Loader size="medium" attributes={attributes}/>
+			</Example.Item>
+			<Example.Item title="size: small">
+				<Loader size="small" attributes={{ "data-foo": "23" }}/>
+			</Example.Item>
+			<Example.Item title={["responsive size", "[s] small", "[m+] medium"]}>
+				<Loader size={{ s: "small", m: "medium" }} attributes={{ style: { margin: 20, "--foo": 2 } }}/>
+			</Example.Item>
+		</Example>);
+};
+export const color = () => (<Example>
+		<Example.Item title="color: primary">
+			<Loader />
+		</Example.Item>
+		<Example.Item title="color: critical">
+			<Loader color="critical"/>
+		</Example.Item>
+		<Example.Item title="color: positive">
+			<Loader color="positive"/>
+		</Example.Item>
+		<Example.Item title="color: inherit">
+			<Loader color="inherit"/>
+		</Example.Item>
+	</Example>);

package/dist/components/MenuItem/MenuItem.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { classNames, responsiveClassNames, responsivePropDependency } from "../../utilities/helpers.js";
+import Actionable from "../Actionable/index.js";
+import Icon from "../Icon/index.js";
+import View from "../View/index.js";
+import MenuItemAligner from "./MenuItemAligner.js";
+import s from "./MenuItem.module.css";
+const MenuItem = forwardRef((props, ref) => {
+    const { icon, startSlot, endSlot, children, color = "primary", selected, disabled, onClick, href, size = "medium", roundedCorners, as, className, attributes, } = props;
+    const rootClassNames = classNames(s.root, className, responsiveClassNames(s, "--size", size), responsiveClassNames(s, "--rounded-corners", roundedCorners), color && s[`--color-${color}`], selected && s["--selected"], disabled && s["--disabled"]);
+    const gapSize = responsivePropDependency(size, (size) => (size === "large" ? 3 : 2));
+    const iconSize = responsivePropDependency(size, (size) => (size === "large" ? 5 : 4));
+    return (_jsx(Actionable, { disabled: disabled, className: rootClassNames, attributes: { ...attributes, "data-rs-aligner-target": true }, onClick: onClick, href: href, ref: ref, as: as, children: _jsxs(View, { direction: "row", gap: gapSize, align: "center", children: [icon && _jsx(Icon, { svg: icon, className: s.icon, size: iconSize }), !icon && startSlot, children && (_jsx(View.Item, { grow: true, className: s.content, children: children })), endSlot] }) }));
+});
+MenuItem.Aligner = MenuItemAligner;
+export default MenuItem;

package/dist/components/MenuItem/MenuItem.module.css

@@ -0,0 +1 @@
+.root,button.root{background-color:var(--rs-menu-item-bg-color);color:var(--rs-menu-item-color);display:block;font-family:var(--rs-font-family-body);font-weight:var(--rs-font-weight-medium);padding:var(--rs-p-v) var(--rs-p-h);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:background-color,transform,box-shadow}.icon{color:var(--rs-menu-item-icon-color,inherit)}.content,.icon{transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:color}.--rounded-corners{border-radius:var(--rs-menu-item-radius)}.--size-small{--rs-p-v:var(--rs-unit-x1);--rs-p-h:var(--rs-unit-x2);--rs-menu-item-radius:var(--rs-radius-small)}.--size-medium,.--size-small{font-size:var(--rs-font-size-body-3);line-height:var(--rs-line-height-body-3)}.--size-medium{--rs-p-v:var(--rs-unit-x2);--rs-p-h:var(--rs-unit-x3);--rs-menu-item-radius:var(--rs-radius-small)}.--size-large{--rs-p-v:var(--rs-unit-x3);--rs-p-h:var(--rs-unit-x4);--rs-menu-item-radius:var(--rs-radius-medium);font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2)}.--color-neutral{--rs-menu-item-icon-color:var(--rs-color-foreground-neutral-faded)}.--color-neutral.--selected,.--color-neutral:hover,.--color-neutral[data-rs-focus]{--rs-menu-item-bg-color:rgba(var(--rs-color-rgb-background-neutral),32%)}.--color-critical{--rs-menu-item-color:var(--rs-color-foreground-critical)}.--color-critical.--selected,.--color-critical:hover,.--color-critical[data-rs-focus]{--rs-menu-item-bg-color:rgba(var(--rs-color-rgb-background-critical),12%)}.--color-primary{--rs-menu-item-icon-color:var(--rs-color-foreground-neutral-faded)}.--color-primary:hover,.--color-primary[data-rs-focus]{--rs-menu-item-bg-color:rgba(var(--rs-color-rgb-background-neutral),32%)}.--color-primary.--selected,.--color-primary.--selected:hover{--rs-menu-item-bg-color:rgba(var(--rs-color-rgb-background-primary),12%);--rs-menu-item-color:var(--rs-color-foreground-primary);--rs-menu-item-icon-color:var(--rs-color-foreground-primary)}.--selected,.--selected:hover{cursor:default}.--disabled,.--disabled:hover{--rs-menu-item-color:var(--rs-color-foreground-disabled);--rs-menu-item-bg-color:none;--rs-menu-item-icon-color:var(--rs-color-foreground-disabled)}button.root{width:100%}.aligner button.root{box-sizing:initial}@media (--rs-viewport-m ){.--rounded-corners-true--m{border-radius:var(--rs-menu-item-radius)}.--rounded-corners-false--m{border-radius:0}.--size-small--m{--rs-p-v:var(--rs-unit-x1);--rs-p-h:var(--rs-unit-x2);--rs-menu-item-radius:var(--rs-radius-small)}.--size-medium--m,.--size-small--m{font-size:var(--rs-font-size-body-3);line-height:var(--rs-line-height-body-3)}.--size-medium--m{--rs-p-v:var(--rs-unit-x2);--rs-p-h:var(--rs-unit-x3);--rs-menu-item-radius:var(--rs-radius-small)}.--size-large--m{--rs-p-v:var(--rs-unit-x3);--rs-p-h:var(--rs-unit-x4);--rs-menu-item-radius:var(--rs-radius-medium);font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2)}}@media (--rs-viewport-l ){.--rounded-corners-true--l{border-radius:var(--rs-menu-item-radius)}.--rounded-corners-false--l{border-radius:0}.--size-small--l{--rs-p-v:var(--rs-unit-x1);--rs-p-h:var(--rs-unit-x2);--rs-menu-item-radius:var(--rs-radius-small)}.--size-medium--l,.--size-small--l{font-size:var(--rs-font-size-body-3);line-height:var(--rs-line-height-body-3)}.--size-medium--l{--rs-p-v:var(--rs-unit-x2);--rs-p-h:var(--rs-unit-x3);--rs-menu-item-radius:var(--rs-radius-small)}.--size-large--l{--rs-p-v:var(--rs-unit-x3);--rs-p-h:var(--rs-unit-x4);--rs-menu-item-radius:var(--rs-radius-medium);font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2)}}@media (--rs-viewport-xl ){.--rounded-corners-true--xl{border-radius:var(--rs-menu-item-radius)}.--rounded-corners-false--xl{border-radius:0}.--size-small--xl{--rs-p-v:var(--rs-unit-x1);--rs-p-h:var(--rs-unit-x2);--rs-menu-item-radius:var(--rs-radius-small)}.--size-medium--xl,.--size-small--xl{font-size:var(--rs-font-size-body-3);line-height:var(--rs-line-height-body-3)}.--size-medium--xl{--rs-p-v:var(--rs-unit-x2);--rs-p-h:var(--rs-unit-x3);--rs-menu-item-radius:var(--rs-radius-small)}.--size-large--xl{--rs-p-v:var(--rs-unit-x3);--rs-p-h:var(--rs-unit-x4);--rs-menu-item-radius:var(--rs-radius-medium);font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2)}}

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

@@ -0,0 +1,23 @@
+import type React from "react";
+import type { IconProps } from "../Icon";
+import type { ActionableProps } from "../Actionable";
+import type * as G from "../../types/global";
+export type Size = "small" | "medium" | "large";
+export type Props = Pick<ActionableProps, "attributes" | "className" | "disabled" | "children" | "href" | "onClick" | "as"> & {
+    color?: "neutral" | "critical" | "primary";
+    icon?: IconProps["svg"];
+    startSlot?: React.ReactNode;
+    children: React.ReactNode;
+    endSlot?: React.ReactNode;
+    selected?: boolean;
+    size?: G.Responsive<Size>;
+    roundedCorners?: G.Responsive<boolean>;
+};
+export type AlignerProps = {
+    children: React.ReactElement;
+    className?: G.ClassName;
+    attributes?: G.Attributes<"div">;
+};
+export type Export = React.ForwardRefExoticComponent<Props> & {
+    Aligner: React.ComponentType<AlignerProps>;
+};

package/dist/components/MenuItem/MenuItemAligner.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Aligner from "../_private/Aligner/index.js";
+import s from "./MenuItem.module.css";
+const MenuItemAligner = (props) => {
+    return (_jsx(Aligner, { ...props, side: props.side || "inline", className: [s.aligner, props.className] }));
+};
+export default MenuItemAligner;

package/dist/components/MenuItem/tests/MenuItem.stories.js

@@ -0,0 +1,130 @@
+import { Example, Placeholder } from "../../../utilities/storybook/index.js";
+import View from "../../View/index.js";
+import Text from "../../Text/index.js";
+import MenuItem from "../index.js";
+import IconZap from "../../../icons/Zap.js";
+import Hotkey from "../../Hotkey/index.js";
+export default {
+    title: "Components/MenuItem",
+    component: MenuItem,
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/components/menu-item",
+        },
+    },
+};
+export const size = () => (<Example>
+		<Example.Item title="size: small">
+			<MenuItem size="small" icon={IconZap} onClick={() => { }} endSlot={<Hotkey>⌘K</Hotkey>}>
+				Menu item
+			</MenuItem>
+		</Example.Item>
+		<Example.Item title="size: medium">
+			<MenuItem icon={IconZap} onClick={() => { }}>
+				Menu item
+			</MenuItem>
+		</Example.Item>
+		<Example.Item title="size: large">
+			<MenuItem size="large" icon={IconZap} onClick={() => { }}>
+				Menu item
+			</MenuItem>
+		</Example.Item>
+		<Example.Item title={["responsive size", "[s] small", "[m] medium", "[l+] large"]}>
+			<MenuItem size={{ s: "small", m: "medium", l: "large" }} icon={IconZap} onClick={() => { }}>
+				Menu item
+			</MenuItem>
+		</Example.Item>
+	</Example>);
+export const color = () => (<Example>
+		<Example.Item title="color: neutral">
+			<MenuItem color="neutral" icon={IconZap}>
+				Menu item
+			</MenuItem>
+		</Example.Item>
+		<Example.Item title="color: primary">
+			<MenuItem color="primary" icon={IconZap}>
+				Menu item
+			</MenuItem>
+		</Example.Item>
+		<Example.Item title="color: critical">
+			<MenuItem color="critical" icon={IconZap}>
+				Menu item
+			</MenuItem>
+		</Example.Item>
+	</Example>);
+export const selected = () => (<Example>
+		<Example.Item title="selected, color: neutral">
+			<MenuItem color="neutral" selected icon={IconZap}>
+				Menu item
+			</MenuItem>
+		</Example.Item>
+		<Example.Item title="selected, color: primary">
+			<MenuItem color="primary" selected icon={IconZap}>
+				Menu item
+			</MenuItem>
+		</Example.Item>
+		<Example.Item title="selected, color: critical">
+			<MenuItem color="critical" selected icon={IconZap}>
+				Menu item
+			</MenuItem>
+		</Example.Item>
+	</Example>);
+export const disabled = () => (<Example>
+		<Example.Item title="disabled">
+			<MenuItem disabled icon={IconZap}>
+				Menu item
+			</MenuItem>
+		</Example.Item>
+	</Example>);
+export const roundedCorners = () => (<Example>
+		<Example.Item title="roundedCorners">
+			<MenuItem roundedCorners selected icon={IconZap}>
+				Menu item
+			</MenuItem>
+		</Example.Item>
+
+		<Example.Item title={["responsive roundedCorners", "[s]: false", "[m+]: true"]}>
+			<MenuItem roundedCorners={{ s: false, m: true }} selected icon={IconZap}>
+				Menu item
+			</MenuItem>
+		</Example.Item>
+	</Example>);
+export const slots = () => (<Example>
+		<Example.Item title="startSlot, endSlot, selected">
+			<MenuItem startSlot={<Placeholder h={20}/>} endSlot={<Placeholder h={20}/>} selected>
+				Menu item
+			</MenuItem>
+		</Example.Item>
+	</Example>);
+export const aligner = () => (<Example>
+		<Example.Item title="size: small">
+			<View gap={2}>
+				<Text variant="title-6">Heading</Text>
+				<MenuItem.Aligner>
+					<MenuItem size="small" selected onClick={() => { }}>
+						Menu item
+					</MenuItem>
+				</MenuItem.Aligner>
+			</View>
+		</Example.Item>
+
+		<Example.Item title="size: medium">
+			<View gap={2}>
+				<Text variant="title-6">Heading</Text>
+				<MenuItem.Aligner>
+					<MenuItem selected>Menu item</MenuItem>
+				</MenuItem.Aligner>
+			</View>
+		</Example.Item>
+
+		<Example.Item title="size: large">
+			<View gap={2}>
+				<Text variant="title-6">Heading</Text>
+				<MenuItem.Aligner>
+					<MenuItem size="large" selected>
+						Menu item
+					</MenuItem>
+				</MenuItem.Aligner>
+			</View>
+		</Example.Item>
+	</Example>);

package/dist/components/Modal/Modal.js

@@ -0,0 +1,174 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import { classNames, responsiveVariables, responsiveClassNames } from "../../utilities/helpers.js";
+import { enableUserSelect, disableUserSelect } from "../../utilities/dom.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 = 32;
+const DRAG_OPPOSITE_THRESHOLD = 100;
+const DRAG_EDGE_BOUNDARY = 32;
+const Context = React.createContext({
+    id: "",
+    titleMounted: false,
+    setTitleMounted: () => { },
+    subtitleMounted: false,
+    setSubtitleMounted: () => { },
+});
+const useModal = () => React.useContext(Context);
+const ModalTitle = (props) => {
+    const { children } = props;
+    const { id, setTitleMounted } = useModal();
+    React.useEffect(() => {
+        setTitleMounted(true);
+        return () => setTitleMounted(false);
+    }, [setTitleMounted]);
+    return (_jsx(Text, { variant: "featured-3", weight: "bold", attributes: { id: `${id}-title` }, children: children }));
+};
+const ModalSubtitle = (props) => {
+    const { children } = props;
+    const { id, setSubtitleMounted } = useModal();
+    React.useEffect(() => {
+        setSubtitleMounted(true);
+        return () => setSubtitleMounted(false);
+    }, [setSubtitleMounted]);
+    return (_jsx(Text, { variant: "body-3", color: "neutral-faded", attributes: { id: `${id}-subtitle` }, children: children }));
+};
+const Modal = (props) => {
+    const { children, onClose, onOpen, active, size, padding = 4, position = "center", transparentOverlay, ariaLabel, autoFocus = true, overlayClassName, 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 dragStartCoordinatesRef = React.useRef({ x: 0, y: 0 });
+    const dragLastCoordinateRef = 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,
+        setTitleMounted,
+        subtitleMounted,
+        setSubtitleMounted,
+        id,
+    }), [id, subtitleMounted, titleMounted]);
+    const resetDragData = () => {
+        dragStartCoordinatesRef.current = { x: 0, y: 0 };
+        dragLastCoordinateRef.current = 0;
+        dragDirectionRef.current = 0;
+        setDragDistance(0);
+    };
+    const handleDragStart = (e) => {
+        let currentEl = e.target;
+        const rootEl = rootRef.current;
+        while (currentEl && (currentEl === rootEl || rootEl?.contains(currentEl))) {
+            // Prioritize scrolling over modal swiping
+            if (currentEl.scrollTop !== 0 || currentEl.scrollLeft !== 0)
+                return;
+            // Start dragging only when starting on static elements
+            if (currentEl.matches("input,textarea"))
+                return;
+            currentEl = currentEl ? currentEl.parentElement : null;
+        }
+        // Prevent the drag handling when browser tab swiping is triggering
+        if (clientPosition === "start" && e.targetTouches[0].clientX < DRAG_EDGE_BOUNDARY)
+            return;
+        disableUserSelect();
+        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 = () => {
+            enableUserSelect();
+            setDragging(false);
+            // Close only when dragging in the closing direction
+            // Changing to a different direction will keep the modal opened
+            const shouldClose = clientPosition === "start" ? dragDirectionRef.current < 0 : dragDirectionRef.current > 0;
+            if (Math.abs(dragDistanceRef.current) > DRAG_THRESHOLD && shouldClose) {
+                onClose?.();
+            }
+            else {
+                resetDragData();
+            }
+        };
+        const handleDrag = (e) => {
+            if (!dragging || clientPosition === "center")
+                return;
+            const target = e.targetTouches[0];
+            const coordinate = { x: target.clientX, y: target.clientY };
+            const key = clientPosition === "bottom" ? "y" : "x";
+            const oppositeKey = clientPosition === "bottom" ? "x" : "y";
+            // Save the initial coordinates
+            if (!dragStartCoordinatesRef.current[key]) {
+                dragStartCoordinatesRef.current = coordinate;
+                dragLastCoordinateRef.current = coordinate[key];
+            }
+            const next = Math.abs(coordinate[key] - dragStartCoordinatesRef.current[key]);
+            const nextOpposite = Math.abs(coordinate[oppositeKey] - dragStartCoordinatesRef.current[oppositeKey]);
+            // For start/end drawers - ignore the swiping
+            // If user is scrolling vertically more than swiping
+            if (position !== "bottom" &&
+                (next < nextOpposite || nextOpposite > DRAG_OPPOSITE_THRESHOLD)) {
+                dragLastCoordinateRef.current = coordinate[key];
+                return;
+            }
+            dragDirectionRef.current = coordinate[key] - dragLastCoordinateRef.current;
+            dragLastCoordinateRef.current = coordinate[key];
+            setDragDistance((prev) => clientPosition === "start"
+                ? Math.min(0, prev + dragDirectionRef.current)
+                : Math.max(0, prev + dragDirectionRef.current));
+        };
+        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;
+        setHideProgress(progress / 2);
+        dragDistanceRef.current = dragDistance;
+    }, [dragDistance, clientPosition]);
+    return (_jsx(Overlay, { onClose: onClose, onOpen: onOpen, active: active, transparent: transparentOverlay || hideProgress, className: overlayClassName, attributes: {
+            onTouchStart: handleDragStart,
+        }, children: ({ active }) => {
+            const rootClassNames = classNames(s.root, className, paddingStyles?.classNames, active && s["--active"], dragging && s["--dragging"], responsiveClassNames(s, "--position", position));
+            return (_jsx(Context.Provider, { value: value, children: _jsx("div", { ...attributes, style: {
+                        ...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, "aria-label": ariaLabel || attributes?.["aria-label"], className: rootClassNames, "aria-modal": "true", role: "dialog", tabIndex: !autoFocus ? -1 : undefined, ref: rootRef, onTransitionEnd: handleTransitionEnd, children: children }) }));
+        } }));
+};
+Modal.Title = ModalTitle;
+Modal.Subtitle = ModalSubtitle;
+export default Modal;

package/dist/components/Modal/Modal.module.css

@@ -0,0 +1 @@
+.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;will-change:transform}.root:focus-visible{box-shadow:var(--rs-focus-shadow);outline:none}.--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-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:translate(0) scale(1)!important}.--position-bottom{--rs-modal-size-s:auto;border-radius:var(--rs-radius-large) var(--rs-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:translateY(100%);width:100%}.--position-bottom.--active,[dir=rtl] .--position-bottom.--active{transform:translateY(max(var(--rs-modal-drag,0px),0px)) 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:translate(-100%);width:var(--rs-modal-size)}[dir=rtl] .--position-start{transform:translate(100%)}.--position-start.--active,[dir=rtl] .--position-start.--active{transform:translate(min(var(--rs-modal-drag,0px),0px)) 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:translate(100%);width:var(--rs-modal-size)}[dir=rtl] .--position-end{transform:translate(-100%)}.--position-end.--active,[dir=rtl] .--position-end.--active{transform:translate(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-full-screen{--rs-modal-size-s:100%;border-radius:0;height:100%;inset:0;inset-block-start:auto;margin:0;max-height:100%;max-width:100%;opacity:0;overflow:auto;position:fixed;transform:translateY(var(--rs-unit-x4));width:100%}.--position-full-screen.--active,[dir=rtl] .--position-full-screen.--active{opacity:1;transform:translate(0)!important}.--active,[dir=rtl] .--active{transition-timing-function:var(--rs-easing-decelerate)}@media (--rs-viewport-m ){.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-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:translate(0) scale(1)!important}.--position-bottom--m{--rs-modal-size-s:auto;border-radius:var(--rs-radius-large) var(--rs-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:translateY(100%);width:100%}.--position-bottom--m.--active,[dir=rtl] .--position-bottom--m.--active{transform:translateY(max(var(--rs-modal-drag,0px),0px)) 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:translate(-100%);width:var(--rs-modal-size)}[dir=rtl] .--position-start--m{transform:translate(100%)}.--position-start--m.--active,[dir=rtl] .--position-start--m.--active{transform:translate(min(var(--rs-modal-drag,0px),0px)) 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:translate(100%);width:var(--rs-modal-size)}[dir=rtl] .--position-end--m{transform:translate(-100%)}.--position-end--m.--active,[dir=rtl] .--position-end--m.--active{transform:translate(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-full-screen--m{--rs-modal-size-s:100%;border-radius:0;height:100%;inset:0;inset-block-start:auto;margin:0;max-height:100%;max-width:100%;opacity:0;overflow:auto;position:fixed;transform:translateY(var(--rs-unit-x4));width:100%}.--position-full-screen--m.--active,[dir=rtl] .--position-full-screen--m.--active{opacity:1;transform:translate(0)!important}}@media (--rs-viewport-l ){.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-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:translate(0) scale(1)!important}.--position-bottom--l{--rs-modal-size-s:auto;border-radius:var(--rs-radius-large) var(--rs-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:translateY(100%);width:100%}.--position-bottom--l.--active,[dir=rtl] .--position-bottom--l.--active{transform:translateY(max(var(--rs-modal-drag,0px),0px)) 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:translate(-100%);width:var(--rs-modal-size)}[dir=rtl] .--position-start--l{transform:translate(100%)}.--position-start--l.--active,[dir=rtl] .--position-start--l.--active{transform:translate(min(var(--rs-modal-drag,0px),0px)) 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:translate(100%);width:var(--rs-modal-size)}[dir=rtl] .--position-end--l{transform:translate(-100%)}.--position-end--l.--active,[dir=rtl] .--position-end--l.--active{transform:translate(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-full-screen--l{--rs-modal-size-s:100%;border-radius:0;height:100%;inset:0;inset-block-start:auto;margin:0;max-height:100%;max-width:100%;opacity:0;overflow:auto;position:fixed;transform:translateY(var(--rs-unit-x4));width:100%}.--position-full-screen--l.--active,[dir=rtl] .--position-full-screen--l.--active{opacity:1;transform:translate(0)!important}}@media (--rs-viewport-xl ){.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-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:translate(0) scale(1)!important}.--position-bottom--xl{--rs-modal-size-s:auto;border-radius:var(--rs-radius-large) var(--rs-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:translateY(100%);width:100%}.--position-bottom--xl.--active,[dir=rtl] .--position-bottom--xl.--active{transform:translateY(max(var(--rs-modal-drag,0px),0px)) 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:translate(-100%);width:var(--rs-modal-size)}[dir=rtl] .--position-start--xl{transform:translate(100%)}.--position-start--xl.--active,[dir=rtl] .--position-start--xl.--active{transform:translate(min(var(--rs-modal-drag,0px),0px)) 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:translate(100%);width:var(--rs-modal-size)}[dir=rtl] .--position-end--xl{transform:translate(-100%)}.--position-end--xl.--active,[dir=rtl] .--position-end--xl.--active{transform:translate(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-full-screen--xl{--rs-modal-size-s:100%;border-radius:0;height:100%;inset:0;inset-block-start:auto;margin:0;max-height:100%;max-width:100%;opacity:0;overflow:auto;position:fixed;transform:translateY(var(--rs-unit-x4));width:100%}.--position-full-screen--xl.--active,[dir=rtl] .--position-full-screen--xl.--active{opacity:1;transform:translate(0)!important}}

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

@@ -0,0 +1,30 @@
+import type React from "react";
+import type * as G from "../../types/global";
+export type Context = {
+    id: string;
+    titleMounted: boolean;
+    setTitleMounted: (b: boolean) => void;
+    subtitleMounted: boolean;
+    setSubtitleMounted: (b: boolean) => void;
+};
+export type TitleProps = {
+    children: React.ReactNode;
+};
+export type SubtitleProps = {
+    children: React.ReactNode;
+};
+export type Props = {
+    children?: React.ReactNode;
+    position?: G.Responsive<"center" | "end" | "bottom" | "start" | "full-screen">;
+    size?: G.Responsive<string>;
+    padding?: G.Responsive<number>;
+    active?: boolean;
+    transparentOverlay?: boolean;
+    autoFocus?: boolean;
+    onClose?: () => void;
+    onOpen?: () => void;
+    ariaLabel?: string;
+    className?: G.ClassName;
+    overlayClassName?: G.ClassName;
+    attributes?: G.Attributes<"div">;
+};

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

@@ -0,0 +1,23 @@
+import React from "react";
+import { type ModalProps } from "./..";
+declare const _default: {
+    title: string;
+    component: {
+        (props: ModalProps): React.JSX.Element;
+        Title: (props: import("../Modal.types").TitleProps) => React.JSX.Element;
+        Subtitle: (props: import("../Modal.types").SubtitleProps) => React.JSX.Element;
+    };
+    parameters: {
+        iframe: {
+            url: string;
+        };
+    };
+};
+export default _default;
+export declare const position: () => React.JSX.Element;
+export declare const size: () => React.JSX.Element;
+export declare const padding: () => React.JSX.Element;
+export declare const composition: () => React.JSX.Element;
+export declare const overlay: () => React.JSX.Element;
+export declare const edgeCases: () => React.JSX.Element;
+export declare const trapFocusEdgeCases: () => React.JSX.Element;