reshaped 1.0.1 → 2.1.0

package/components/CheckboxGroup/CheckboxGroupUncontrolled.js

@@ -0,0 +1,16 @@
+"use client";
+import React from "react";
+import CheckboxGroupControlled from "./CheckboxGroupControlled.js";
+const CheckboxGroupUncontrolled = (props) => {
+    const { defaultValue, onChange } = props;
+    const [value, setValue] = React.useState(defaultValue || []);
+    const handleChange = (args) => {
+        if (!args.value)
+            return;
+        setValue(args.value);
+        if (onChange)
+            onChange(args);
+    };
+    return (React.createElement(CheckboxGroupControlled, Object.assign({}, props, { value: value, defaultValue: undefined, onChange: handleChange })));
+};
+export default CheckboxGroupUncontrolled;

package/components/CheckboxGroup/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from "./CheckboxGroup";
+export type { Props as CheckboxGroupProps } from "./CheckboxGroup.types";
+export { useCheckboxGroup } from "./CheckboxGroup.context";

package/components/CheckboxGroup/index.js

@@ -0,0 +1,2 @@
+export { default } from "./CheckboxGroup.js";
+export { useCheckboxGroup } from "./CheckboxGroup.context.js";

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

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

package/components/CheckboxGroup/tests/CheckboxGroup.stories.js

@@ -0,0 +1,44 @@
+import React from "react";
+import { Example } from "../../../utilities/storybook/index.js";
+import View from "../../View/index.js";
+import CheckboxGroup from "../index.js";
+import Checkbox from "../../Checkbox/index.js";
+export default { title: "Components/CheckboxGroup" };
+export const selection = () => (<Example>
+		<Example.Item title="unselected">
+			<CheckboxGroup name="animal">
+				<View gap={3}>
+					<Checkbox value="dog">Checkbox 1</Checkbox>
+					<Checkbox value="cat">Checkbox 2</Checkbox>
+				</View>
+			</CheckboxGroup>
+		</Example.Item>
+
+		<Example.Item title="checked, uncontrolled">
+			<CheckboxGroup name="animal" defaultValue={["dog"]}>
+				<View gap={3}>
+					<Checkbox value="dog">Checkbox 1</Checkbox>
+					<Checkbox value="cat">Checkbox 2</Checkbox>
+				</View>
+			</CheckboxGroup>
+		</Example.Item>
+
+		<Example.Item title="checked, controlled">
+			<CheckboxGroup name="animal" value={["dog"]}>
+				<View gap={3}>
+					<Checkbox value="dog">Checkbox 1</Checkbox>
+					<Checkbox value="cat">Checkbox 2</Checkbox>
+				</View>
+			</CheckboxGroup>
+		</Example.Item>
+	</Example>);
+export const disabled = () => (<Example>
+		<Example.Item title="disabled">
+			<CheckboxGroup name="animal" disabled>
+				<View gap={3}>
+					<Checkbox value="dog">Dog</Checkbox>
+					<Checkbox value="cat">Cat</Checkbox>
+				</View>
+			</CheckboxGroup>
+		</Example.Item>
+	</Example>);

package/components/Container/Container.d.ts

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

package/components/Container/Container.js

@@ -0,0 +1,10 @@
+import React from "react";
+import { classNames } from "../../utilities/helpers.js";
+import View from "../View/index.js";
+import s from "./Container.module.css";
+const Container = (props) => {
+    const { children, padding = 4, width, className, attributes } = props;
+    const rootClassNames = classNames(s.root, className);
+    return (React.createElement(View, { attributes: attributes, className: rootClassNames, paddingInline: padding, width: width, maxWidth: "100%" }, children));
+};
+export default Container;

package/components/Container/Container.module.css

@@ -0,0 +1 @@
+.root{margin:0 auto}

package/components/Container/Container.types.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import type { ViewProps } from "../View";
+import type * as G from "../../types/global";
+export type Props = Pick<ViewProps, "padding"> & {
+    width?: G.Responsive<string | number>;
+    children?: React.ReactNode;
+    className?: G.ClassName;
+    attributes?: G.Attributes<"div">;
+};

package/components/Container/Container.types.js

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

package/components/Container/index.d.ts

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

package/components/Container/index.js

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

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

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

package/components/Container/tests/Container.stories.js

@@ -0,0 +1,28 @@
+import React from "react";
+import { Example, Placeholder } from "../../../utilities/storybook/index.js";
+import Container from "../index.js";
+export default { title: "Utilities/Container" };
+export const padding = () => (<Example>
+		<Example.Item title="padding: default">
+			<Container>
+				<Placeholder />
+			</Container>
+		</Example.Item>
+		<Example.Item title="padding: 0">
+			<Container padding={0}>
+				<Placeholder />
+			</Container>
+		</Example.Item>
+	</Example>);
+export const width = () => (<Example>
+		<Example.Item title="width: 1024px">
+			<Container width="1024px">
+				<Placeholder />
+			</Container>
+		</Example.Item>
+		<Example.Item title={["responsive width", "[s]: 400px", "[m+]: 600px"]}>
+			<Container width={{ s: "400px", m: "600px" }}>
+				<Placeholder />
+			</Container>
+		</Example.Item>
+	</Example>);

package/components/Dismissible/Dismissible.d.ts

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

package/components/Dismissible/Dismissible.js

@@ -0,0 +1,15 @@
+import React from "react";
+import { classNames } from "../../utilities/helpers.js";
+import Button from "../Button/index.js";
+import IconClose from "../../icons/Close.js";
+import s from "./Dismissible.module.css";
+const Dismissible = (props) => {
+    const { children, align, onClose, hideCloseButton, variant, closeAriaLabel, className, attributes, } = props;
+    const rootClassNames = classNames(s.root, className, variant && s[`--variant-${variant}`], align && s[`--align-${align}`], hideCloseButton && s["--hide-close"]);
+    const WrapperTag = variant === "media" ? "div" : Button.Aligner;
+    return (React.createElement("div", Object.assign({}, attributes, { className: rootClassNames }),
+        children,
+        !hideCloseButton && (React.createElement(WrapperTag, { className: s.close },
+            React.createElement(Button, Object.assign({ size: "small" }, (variant === "media" ? { color: "black", variant: "faded" } : { variant: "ghost" }), { onClick: onClose, attributes: { "aria-label": onClose ? closeAriaLabel : undefined }, icon: IconClose }))))));
+};
+export default Dismissible;

package/components/Dismissible/Dismissible.module.css

@@ -0,0 +1 @@
+.root{-webkit-padding-end:var(--rs-unit-x7);min-height:var(--rs-unit-x6);padding-inline-end:var(--rs-unit-x7);position:relative}.close{inset-block-start:0;inset-inline-end:0;position:absolute;z-index:5}.--hide-close,.--variant-media{padding:0}.--variant-media .close{inset-block-start:var(--rs-unit-x2);inset-inline-end:var(--rs-unit-x2)}.--align-center .close{inset-block-start:50%;transform:translateY(-50%)}

package/components/Dismissible/Dismissible.types.d.ts

@@ -0,0 +1,20 @@
+import React from "react";
+import type * as G from "../../types/global";
+type WithClose = {
+    hideCloseButton: true;
+    closeAriaLabel?: string;
+};
+type WithoutClose = {
+    hideCloseButton?: false;
+    closeAriaLabel: string;
+};
+export type CloseProps = WithClose | WithoutClose;
+export type Props = CloseProps & {
+    variant?: "media";
+    align?: "top" | "center";
+    children?: React.ReactNode;
+    onClose?: () => void;
+    className?: G.ClassName;
+    attributes?: G.Attributes<"div", Props>;
+};
+export {};

package/components/Dismissible/Dismissible.types.js

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

package/components/Dismissible/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./Dismissible";
+export type { Props as DismissibleProps, CloseProps as DismissibleCloseProps, } from "./Dismissible.types";

package/components/Dismissible/index.js

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

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

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

package/components/Dismissible/tests/Dismissible.stories.js

@@ -0,0 +1,44 @@
+import React from "react";
+import { Example, Placeholder } from "../../../utilities/storybook/index.js";
+import Dismissible from "../index.js";
+import Image from "../../Image/index.js";
+import View from "../../View/index.js";
+export default { title: "Utilities/Dismissible" };
+export const variant = () => (<Example>
+		<Example.Item title="variant: default">
+			<Dismissible closeAriaLabel="Close banner">
+				<Placeholder />
+			</Dismissible>
+		</Example.Item>
+		<Example.Item title="variant: media">
+			<View width="300px">
+				<Dismissible variant="media" closeAriaLabel="Close banner">
+					<View aspectRatio={16 / 9}>
+						<Image height="100%" src="https://images.unsplash.com/photo-1607030529528-ca6923e27f77?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1867&q=80)"/>
+					</View>
+				</Dismissible>
+			</View>
+		</Example.Item>
+	</Example>);
+export const align = () => (<Example>
+		<Example.Item title="align: center">
+			<Dismissible align="center" closeAriaLabel="Close">
+				<Placeholder />
+			</Dismissible>
+		</Example.Item>
+
+		<Example.Item title="align: center, variant: media">
+			<Dismissible align="center" closeAriaLabel="Close" variant="media">
+				<View aspectRatio={16 / 9}>
+					<Image height="100%" src="https://images.unsplash.com/photo-1607030529528-ca6923e27f77?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1867&q=80)"/>
+				</View>
+			</Dismissible>
+		</Example.Item>
+	</Example>);
+export const closeButton = () => (<Example>
+		<Example.Item title="hide close button">
+			<Dismissible hideCloseButton>
+				<Placeholder />
+			</Dismissible>
+		</Example.Item>
+	</Example>);

package/components/Divider/Divider.d.ts

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

package/components/Divider/Divider.js

@@ -0,0 +1,14 @@
+import React from "react";
+import { classNames, responsiveClassNames } from "../../utilities/helpers.js";
+import s from "./Divider.module.css";
+const Divider = (props) => {
+    const { vertical, blank, className, attributes } = props;
+    const rootClassNames = classNames(s.root, className, blank && s["--blank"], ...responsiveClassNames(s, "--vertical", vertical));
+    // Only support aria-orientation for non-responsive dividers
+    let ariaOrientation;
+    if (typeof vertical === "boolean" || vertical === undefined) {
+        ariaOrientation = vertical ? "vertical" : "horizontal";
+    }
+    return (React.createElement("div", Object.assign({}, attributes, { role: "separator", "aria-orientation": ariaOrientation, className: rootClassNames })));
+};
+export default Divider;

package/components/Divider/Divider.module.css

@@ -0,0 +1 @@
+.root{background:var(--rs-color-border-neutral-faded);border:none;height:1px;margin:0}.--blank{margin-top:-1px;position:relative}.--vertical{display:inline-block;height:100%;vertical-align:top;width:1px}.--vertical.--blank{-webkit-margin-start:-1px;margin-top:0;margin-inline-start:-1px}@media (min-width:660px){.--vertical-true--m{display:inline-block;height:100%;vertical-align:top;width:1px}.--vertical-true--m.--blank{-webkit-margin-start:-1px;margin-top:0;margin-inline-start:-1px}.--vertical-false--m{display:block;height:1px;width:100%}.--vertical-false--m.--blank{-webkit-margin-start:0;margin-top:-1px;margin-inline-start:0}}@media (min-width:900px){.--vertical-true--l{display:inline-block;height:100%;vertical-align:top;width:1px}.--vertical-true--l.--blank{-webkit-margin-start:-1px;margin-top:0;margin-inline-start:-1px}.--vertical-false--l{display:block;height:1px;width:100%}.--vertical-false--l.--blank{-webkit-margin-start:0;margin-top:-1px;margin-inline-start:0}}@media (min-width:1280px){.--vertical-true--xl{display:inline-block;height:100%;vertical-align:top;width:1px}.--vertical-true--xl.--blank{-webkit-margin-start:-1px;margin-top:0;margin-inline-start:-1px}.--vertical-false--xl{display:block;height:1px;width:100%}.--vertical-false--xl.--blank{-webkit-margin-start:0;margin-top:-1px;margin-inline-start:0}}

package/components/Divider/Divider.types.d.ts

@@ -0,0 +1,7 @@
+import type * as G from "../../types/global";
+export type Props = {
+    blank?: boolean;
+    vertical?: G.Responsive<boolean>;
+    className?: G.ClassName;
+    attributes?: G.Attributes<"hr", Props>;
+};

package/components/Divider/Divider.types.js

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

package/components/Divider/index.d.ts

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

package/components/Divider/index.js

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

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

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

package/components/Divider/tests/Divider.stories.js

@@ -0,0 +1,36 @@
+import React from "react";
+import { Example, Placeholder } from "../../../utilities/storybook/index.js";
+import View from "../../View/index.js";
+import Divider from "../index.js";
+export default { title: "Components/Divider" };
+export const rendering = () => (<Example>
+		<Example.Item title="default rendering">
+			<Divider />
+		</Example.Item>
+
+		<Example.Item title={["blank rendering", "box should overlap with divider"]}>
+			<View width="40px" height="10px" backgroundColor="primary"/>
+			<Divider blank/>
+		</Example.Item>
+	</Example>);
+export const vertical = () => (<Example>
+		<Example.Item title="vertical">
+			<View gap={3} direction="row" align="stretch">
+				<Placeholder />
+				<View.Item>
+					<Divider vertical/>
+				</View.Item>
+				<Placeholder />
+			</View>
+		</Example.Item>
+
+		<Example.Item title={["responsive vertical", "[s] true", "[m+]: false"]}>
+			<View gap={3} direction={{ s: "row", m: "column" }} align="stretch">
+				<Placeholder />
+				<View.Item>
+					<Divider vertical={{ s: true, m: false }}/>
+				</View.Item>
+				<Placeholder />
+			</View>
+		</Example.Item>
+	</Example>);

package/components/DropdownMenu/DropdownMenu.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import { MenuItemProps } from "../MenuItem";
+import type * as T from "./DropdownMenu.types";
+declare const DropdownMenu: {
+    (props: T.Props): React.JSX.Element;
+    Trigger: (props: import("../_private/Flyout").FlyoutTriggerProps) => React.JSX.Element;
+    Content: (props: T.ContentProps) => React.JSX.Element;
+    Section: (props: T.SectionProps) => React.JSX.Element;
+    Item: (props: Omit<MenuItemProps, "roundedCorners">) => React.JSX.Element;
+    SubMenu: (props: T.SubMenuProps) => React.JSX.Element;
+    SubTrigger: (props: T.SubTriggerProps) => React.JSX.Element;
+};
+export default DropdownMenu;

package/components/DropdownMenu/DropdownMenu.js

@@ -0,0 +1,90 @@
+"use client";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from "react";
+import Popover from "../Popover/index.js";
+import MenuItem from "../MenuItem/index.js";
+import Icon from "../Icon/index.js";
+import { useFlyoutContext } from "../_private/Flyout/index.js";
+import IconChevronRight from "../../icons/ChevronRight.js";
+import useHotkeys from "../../hooks/useHotkeys.js";
+import useRTL from "../../hooks/useRTL.js";
+import { getActiveElement } from "../../utilities/a11y.js";
+import { classNames } from "../../utilities/helpers.js";
+import * as keys from "../../constants/keys.js";
+import s from "./DropdownMenu.module.css";
+const DropdownMenuSubContext = React.createContext(null);
+const DropdownMenu = (props) => {
+    const { children, position = "bottom-start", triggerType = "click", trapFocusMode = "action-menu" } = props, popoverProps = __rest(props, ["children", "position", "triggerType", "trapFocusMode"]);
+    return (React.createElement(Popover, Object.assign({}, popoverProps, { position: position, padding: 0, trapFocusMode: trapFocusMode, triggerType: triggerType }), children));
+};
+const DropdownMenuContent = (props) => {
+    const { children, attributes, className } = props;
+    const subMenuInstance = React.useContext(DropdownMenuSubContext);
+    const [rtl] = useRTL();
+    const { ref } = useHotkeys({
+        [rtl ? keys.RIGHT : keys.LEFT]: () => {
+            var _a;
+            (_a = subMenuInstance === null || subMenuInstance === void 0 ? void 0 : subMenuInstance.current) === null || _a === void 0 ? void 0 : _a.close();
+        },
+        [keys.ENTER]: () => {
+            const el = getActiveElement();
+            el === null || el === void 0 ? void 0 : el.click();
+        },
+    }, [subMenuInstance === null || subMenuInstance === void 0 ? void 0 : subMenuInstance.current]);
+    const contentClassName = classNames(s.menu, className);
+    return (React.createElement(Popover.Content, { className: contentClassName, attributes: Object.assign(Object.assign({}, attributes), { ref }) }, children));
+};
+const DropdownMenuSection = (props) => {
+    const { children } = props;
+    return (React.createElement("div", { className: s.section, role: "group" }, children));
+};
+const DropdownMenuItem = (props) => {
+    const { onClick } = props;
+    const { handleClose } = useFlyoutContext();
+    const handleClick = (e) => {
+        if (handleClose)
+            handleClose({ closeParents: true });
+        if (onClick)
+            onClick(e);
+    };
+    return (React.createElement(MenuItem, Object.assign({}, props, { roundedCorners: true, className: s.item, attributes: Object.assign(Object.assign({}, props.attributes), { role: "menuitem" }), onClick: handleClick })));
+};
+const DropdownMenuSubMenu = (props) => {
+    const { children } = props;
+    const dropdownMenuRef = React.useRef();
+    return (React.createElement(DropdownMenuSubContext.Provider, { value: dropdownMenuRef },
+        React.createElement(DropdownMenu, { triggerType: "hover", position: "end-top", contentGap: 0.5, instanceRef: dropdownMenuRef }, children)));
+};
+const DropdownMenuSubTriggerItem = (props) => {
+    const { children, attributes } = props, menuItemProps = __rest(props, ["children", "attributes"]);
+    const subMenuInstance = React.useContext(DropdownMenuSubContext);
+    const [rtl] = useRTL();
+    const { ref } = useHotkeys({
+        [rtl ? keys.LEFT : keys.RIGHT]: () => {
+            var _a;
+            (_a = subMenuInstance === null || subMenuInstance === void 0 ? void 0 : subMenuInstance.current) === null || _a === void 0 ? void 0 : _a.open();
+        },
+    }, [], { ref: attributes === null || attributes === void 0 ? void 0 : attributes.ref });
+    return (React.createElement(DropdownMenuItem, Object.assign({}, menuItemProps, { attributes: Object.assign(Object.assign({}, attributes), { ref }), endSlot: React.createElement(Icon, { autoWidth: true, svg: IconChevronRight, className: s.arrow }) }), children));
+};
+const DropdownMenuSubTrigger = (props) => {
+    const { children } = props;
+    return (React.createElement(DropdownMenu.Trigger, null, (attributes) => (React.createElement(DropdownMenuSubTriggerItem, { attributes: attributes }, children))));
+};
+DropdownMenu.Trigger = Popover.Trigger;
+DropdownMenu.Content = DropdownMenuContent;
+DropdownMenu.Section = DropdownMenuSection;
+DropdownMenu.Item = DropdownMenuItem;
+DropdownMenu.SubMenu = DropdownMenuSubMenu;
+DropdownMenu.SubTrigger = DropdownMenuSubTrigger;
+export default DropdownMenu;

package/components/DropdownMenu/DropdownMenu.module.css

@@ -0,0 +1 @@
+.menu{padding:var(--rs-unit-x1)}.section+.section{border-top:1px solid var(--rs-color-border-neutral-faded);padding-top:var(--rs-unit-x1)}.item+.item,.section+.section{margin-top:var(--rs-unit-x1)}[dir=rtl] .arrow{transform:scaleX(-1)}

package/components/DropdownMenu/DropdownMenu.types.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+import type { PopoverProps } from "../Popover";
+import type { FlyoutContentProps } from "../_private/Flyout";
+export type Props = Pick<PopoverProps, "children" | "position" | "forcePosition" | "triggerType" | "contentGap" | "onOpen" | "onClose" | "active" | "defaultActive" | "width" | "disableHideAnimation" | "instanceRef"> & {
+    trapFocusMode?: Extract<PopoverProps["trapFocusMode"], "action-menu" | "selection-menu">;
+};
+export type ContentProps = Pick<FlyoutContentProps, "attributes" | "children" | "className">;
+export type SectionProps = {
+    children: React.ReactNode;
+};
+export type SubMenuProps = {
+    children: React.ReactNode;
+};
+export type SubTriggerProps = {
+    children: React.ReactNode;
+};

package/components/DropdownMenu/DropdownMenu.types.js

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

package/components/DropdownMenu/index.d.ts

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

package/components/DropdownMenu/index.js

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

package/components/DropdownMenu/tests/DropdownMenu.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 sections: () => React.JSX.Element;
+export declare const submenu: () => React.JSX.Element;
+export declare const state: () => React.JSX.Element;
+export declare const testScroll: () => React.JSX.Element;
+export declare const testThemeSwitching: () => React.JSX.Element;