reshaped 2.11.11 → 3.0.0

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

@@ -1,69 +0,0 @@
-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: 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/components/Loader/Loader.js

@@ -1,10 +0,0 @@
-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 === null || attributes === void 0 ? void 0 : attributes["aria-label"];
-    const rootClassNames = classNames(s.root, className, responsiveClassNames(s, "--size", size), color && s[`--color-${color}`]);
-    return (_jsx("span", Object.assign({}, attributes, { role: "progressbar", "aria-live": ariaLabel ? "assertive" : undefined, "aria-label": ariaLabel, className: rootClassNames, children: _jsx("span", { className: s.inner }) })));
-};
-export default Loader;

package/components/Loader/Loader.module.css

@@ -1 +0,0 @@
-@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:.3}.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/components/Loader/Loader.types.d.ts

@@ -1,7 +0,0 @@
-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", Props>;
-};

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

@@ -1,36 +0,0 @@
-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 = () => (<Example>
-		<Example.Item title="size: medium">
-			<Loader size="medium"/>
-		</Example.Item>
-		<Example.Item title="size: small">
-			<Loader size="small"/>
-		</Example.Item>
-		<Example.Item title={["responsive size", "[s] small", "[m+] medium"]}>
-			<Loader size={{ s: "small", m: "medium" }}/>
-		</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/components/MenuItem/MenuItem.js

@@ -1,17 +0,0 @@
-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: Object.assign(Object.assign({}, 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/components/MenuItem/MenuItem.module.css

@@ -1 +0,0 @@
-.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-unit-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-unit-radius-medium)}.--size-large{--rs-p-v:var(--rs-unit-x3);--rs-p-h:var(--rs-unit-x4);--rs-menu-item-radius:var(--rs-unit-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),40%)}.--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),40%)}.--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-unit-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-unit-radius-medium)}.--size-large--m{--rs-p-v:var(--rs-unit-x3);--rs-p-h:var(--rs-unit-x4);--rs-menu-item-radius:var(--rs-unit-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-unit-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-unit-radius-medium)}.--size-large--l{--rs-p-v:var(--rs-unit-x3);--rs-p-h:var(--rs-unit-x4);--rs-menu-item-radius:var(--rs-unit-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-unit-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-unit-radius-medium)}.--size-large--xl{--rs-p-v:var(--rs-unit-x3);--rs-p-h:var(--rs-unit-x4);--rs-menu-item-radius:var(--rs-unit-radius-medium);font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2)}}

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

@@ -1,23 +0,0 @@
-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", AlignerProps>;
-};
-export type Export = React.ForwardRefExoticComponent<Props> & {
-    Aligner: React.ComponentType<AlignerProps>;
-};

package/components/MenuItem/MenuItemAligner.js

@@ -1,7 +0,0 @@
-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, Object.assign({}, props, { side: props.side || "inline", className: [s.aligner, props.className] })));
-};
-export default MenuItemAligner;

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

@@ -1,129 +0,0 @@
-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";
-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={() => { }}>
-				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/components/Modal/Modal.js

@@ -1,171 +0,0 @@
-"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, 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 === null || rootEl === void 0 ? void 0 : 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 === null || onClose === void 0 ? void 0 : 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, active: active, transparent: transparentOverlay || hideProgress, className: overlayClassName, attributes: {
-            onTouchStart: handleDragStart,
-        }, children: ({ 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));
-            console.log({ autoFocus });
-            return (_jsx(Context.Provider, { value: value, children: _jsx("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, "aria-label": ariaLabel || (attributes === null || attributes === void 0 ? void 0 : 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/components/Modal/Modal.module.css

@@ -1 +0,0 @@
-.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-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:translate(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: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-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:translate(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: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-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:translate(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: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-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:translate(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: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/components/Modal/Modal.types.d.ts

@@ -1,29 +0,0 @@
-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;
-    ariaLabel?: string;
-    className?: G.ClassName;
-    overlayClassName?: G.ClassName;
-    attributes?: G.Attributes<"div", Props>;
-};

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

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