reshaped 1.0.1 → 2.2.0

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

@@ -0,0 +1,62 @@
+import React from "react";
+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" };
+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.d.ts

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

package/components/Loader/Loader.js

@@ -0,0 +1,11 @@
+import React from "react";
+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 (React.createElement("span", Object.assign({}, attributes, { role: "progressbar", "aria-live": ariaLabel ? "assertive" : undefined, "aria-label": ariaLabel, className: rootClassNames }),
+        React.createElement("span", { className: s.inner })));
+};
+export default Loader;

package/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:.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 (min-width:660px){.--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 (min-width:900px){.--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 (min-width:1280px){.--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

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

package/components/Loader/Loader.types.js

@@ -0,0 +1 @@
+export {};

package/components/Loader/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./Loader";
+export type { Props as LoaderProps } from "./Loader.types";

package/components/Loader/index.js

@@ -0,0 +1 @@
+export { default } from "./Loader.js";

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

@@ -0,0 +1,7 @@
+import React from "react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const size: () => React.JSX.Element;
+export declare const color: () => React.JSX.Element;

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

@@ -0,0 +1,29 @@
+import React from "react";
+import { Example } from "../../../utilities/storybook/index.js";
+import Loader from "../index.js";
+export default { title: "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.d.ts

@@ -0,0 +1,3 @@
+import type * as T from "./MenuItem.types";
+declare const MenuItem: T.Export;
+export default MenuItem;

package/components/MenuItem/MenuItem.js

@@ -0,0 +1,22 @@
+import React 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 MenuItemBase = (props, ref) => {
+    const { icon, startSlot, endSlot, children, color = "primary", selected, disabled, onClick, href, size = "medium", roundedCorners, 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 (React.createElement(Actionable, { disabled: disabled, className: rootClassNames, attributes: attributes, onClick: onClick, href: href, ref: ref },
+        React.createElement(View, { direction: "row", gap: gapSize, align: "center" },
+            icon && React.createElement(Icon, { svg: icon, className: s.icon, size: iconSize }),
+            !icon && startSlot,
+            children && (React.createElement(View.Item, { grow: true, className: s.content }, children)),
+            endSlot)));
+};
+const MenuItem = React.forwardRef(MenuItemBase);
+MenuItem.Aligner = MenuItemAligner;
+export default MenuItem;

package/components/MenuItem/MenuItem.module.css

@@ -0,0 +1 @@
+.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-menu-item-padding-v) var(--rs-menu-item-padding-h);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:background-color,transform,box-shadow}button.root{width:100%}.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-menu-item-padding-v:var(--rs-unit-x1);--rs-menu-item-padding-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-menu-item-padding-v:var(--rs-unit-x2);--rs-menu-item-padding-h:var(--rs-unit-x3);--rs-menu-item-radius:var(--rs-unit-radius-medium)}.--size-large{--rs-menu-item-padding-v:var(--rs-unit-x3);--rs-menu-item-padding-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)}.aligner button.root{box-sizing:initial}.aligner .root{margin:0 calc(var(--rs-menu-item-padding-h) * -1)}@media (min-width:660px){.--rounded-corners-true--m{border-radius:var(--rs-menu-item-radius)}.--rounded-corners-false--m{border-radius:0}.--size-small--m{--rs-menu-item-padding-v:var(--rs-unit-x1);--rs-menu-item-padding-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-menu-item-padding-v:var(--rs-unit-x2);--rs-menu-item-padding-h:var(--rs-unit-x3);--rs-menu-item-radius:var(--rs-unit-radius-medium)}.--size-large--m{--rs-menu-item-padding-v:var(--rs-unit-x3);--rs-menu-item-padding-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 (min-width:900px){.--rounded-corners-true--l{border-radius:var(--rs-menu-item-radius)}.--rounded-corners-false--l{border-radius:0}.--size-small--l{--rs-menu-item-padding-v:var(--rs-unit-x1);--rs-menu-item-padding-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-menu-item-padding-v:var(--rs-unit-x2);--rs-menu-item-padding-h:var(--rs-unit-x3);--rs-menu-item-radius:var(--rs-unit-radius-medium)}.--size-large--l{--rs-menu-item-padding-v:var(--rs-unit-x3);--rs-menu-item-padding-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 (min-width:1280px){.--rounded-corners-true--xl{border-radius:var(--rs-menu-item-radius)}.--rounded-corners-false--xl{border-radius:0}.--size-small--xl{--rs-menu-item-padding-v:var(--rs-unit-x1);--rs-menu-item-padding-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-menu-item-padding-v:var(--rs-unit-x2);--rs-menu-item-padding-h:var(--rs-unit-x3);--rs-menu-item-radius:var(--rs-unit-radius-medium)}.--size-large--xl{--rs-menu-item-padding-v:var(--rs-unit-x3);--rs-menu-item-padding-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

@@ -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 = Omit<ActionableProps, "type"> & {
+    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/MenuItem.types.js

@@ -0,0 +1 @@
+export {};

package/components/MenuItem/MenuItemAligner.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type * as T from "./MenuItem.types";
+declare const MenuItemAligner: (props: T.AlignerProps) => React.JSX.Element;
+export default MenuItemAligner;

package/components/MenuItem/MenuItemAligner.js

@@ -0,0 +1,9 @@
+import React from "react";
+import { classNames } from "../../utilities/helpers.js";
+import s from "./MenuItem.module.css";
+const MenuItemAligner = (props) => {
+    const { children, className, attributes } = props;
+    const rootClassNames = classNames(s.aligner, className);
+    return (React.createElement("div", Object.assign({}, attributes, { className: rootClassNames }), children));
+};
+export default MenuItemAligner;

package/components/MenuItem/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./MenuItem";
+export type { Props as MenuItemProps } from "./MenuItem.types";

package/components/MenuItem/index.js

@@ -0,0 +1 @@
+export { default } from "./MenuItem.js";

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

@@ -0,0 +1,12 @@
+import React from "react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const size: () => React.JSX.Element;
+export declare const color: () => React.JSX.Element;
+export declare const selected: () => React.JSX.Element;
+export declare const disabled: () => React.JSX.Element;
+export declare const roundedCorners: () => React.JSX.Element;
+export declare const slots: () => React.JSX.Element;
+export declare const aligner: () => React.JSX.Element;

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

@@ -0,0 +1,122 @@
+import React from "react";
+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" };
+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>
+						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.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import type * as T from "./Modal.types";
+declare const Modal: {
+    (props: T.Props): React.JSX.Element;
+    Title: (props: T.TitleProps) => React.JSX.Element;
+    Subtitle: (props: T.SubtitleProps) => React.JSX.Element;
+};
+export default Modal;

package/components/Modal/Modal.js

@@ -0,0 +1,56 @@
+"use client";
+import React from "react";
+import { classNames, responsiveVariables, responsiveClassNames } from "../../utilities/helpers.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 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 (React.createElement(Text, { variant: "featured-3", weight: "bold", attributes: { id: `${id}-title` } }, children));
+};
+const ModalSubtitle = (props) => {
+    const { children } = props;
+    const { id, setSubtitleMounted } = useModal();
+    React.useEffect(() => {
+        setSubtitleMounted(true);
+        return () => setSubtitleMounted(false);
+    }, [setSubtitleMounted]);
+    return (React.createElement(Text, { variant: "body-3", color: "neutral-faded", attributes: { id: `${id}-subtitle` } }, children));
+};
+const Modal = (props) => {
+    const { children, onClose, active, size, padding = 4, position = "center", transparentOverlay, className, attributes, } = props;
+    const id = useElementId();
+    const [titleMounted, setTitleMounted] = React.useState(false);
+    const [subtitleMounted, setSubtitleMounted] = React.useState(false);
+    const paddingStyles = getPaddingStyles(padding);
+    const value = React.useMemo(() => ({
+        titleMounted,
+        setTitleMounted,
+        subtitleMounted,
+        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));
+        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)));
+    }));
+};
+Modal.Title = ModalTitle;
+Modal.Subtitle = ModalSubtitle;
+export default Modal;

package/components/Modal/Modal.module.css

@@ -0,0 +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%)}}

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

@@ -0,0 +1,26 @@
+import 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">;
+    size?: G.Responsive<string>;
+    padding?: G.Responsive<number>;
+    active?: boolean;
+    transparentOverlay?: boolean;
+    onClose?: () => void;
+    className?: G.ClassName;
+    attributes?: G.Attributes<"div", Props>;
+};

package/components/Modal/Modal.types.js

@@ -0,0 +1 @@
+export {};

package/components/Modal/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./Modal";
+export type { Props as ModalProps } from "./Modal.types";

package/components/Modal/index.js

@@ -0,0 +1 @@
+export { default } from "./Modal.js";

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

@@ -0,0 +1,11 @@
+import React from "react";
+declare const _default: {
+    title: 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;