reshaped 2.11.12 → 3.0.1

package/dist/components/Carousel/Carousel.js

@@ -0,0 +1,67 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { classNames, responsiveVariables, responsiveClassNames, debounceHandler, } from "../../utilities/helpers.js";
+import View from "../View/index.js";
+import useRTL from "../../hooks/useRTL.js";
+import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
+import CarouselControl from "./CarouselControl.js";
+import * as T from "./Carousel.types.js";
+import s from "./Carousel.module.css";
+const Carousel = (props) => {
+    const { children, gap = 3, visibleItems, bleed, navigationDisplay, instanceRef, className, attributes, } = props;
+    const [mounted, setMounted] = React.useState(false);
+    const [scrollPosition, setScrollPosition] = React.useState(0);
+    const [isRTL] = useRTL();
+    const scrollElRef = React.useRef(null);
+    const bleedClassNames = {};
+    if (typeof bleed === "object") {
+        Object.entries(bleed).forEach(([key, value]) => {
+            bleedClassNames[key] = typeof value === "number" && value > 0;
+        });
+    }
+    const rootClassNames = classNames(s.root, className, ...responsiveClassNames(s, "--bleed", typeof bleed === "number" ? true : bleedClassNames));
+    const handleScroll = debounceHandler((event) => {
+        const el = event.target;
+        setScrollPosition(el.scrollLeft);
+    }, 16);
+    const getItemsGap = () => {
+        const style = getComputedStyle(scrollElRef.current);
+        // Safari returns Npx Npx as a value, we need only the first one
+        const xGap = style.gap.split(" ")[0];
+        return Number(xGap.replace("px", ""));
+    };
+    const navigateRight = () => {
+        const scrollEl = scrollElRef.current;
+        scrollEl.scrollBy({
+            left: scrollEl.clientWidth + getItemsGap(),
+            top: 0,
+            behavior: "smooth",
+        });
+    };
+    const navigateLeft = () => {
+        const scrollEl = scrollElRef.current;
+        scrollEl.scrollBy({
+            left: -scrollEl.clientWidth - getItemsGap(),
+            top: 0,
+            behavior: "smooth",
+        });
+    };
+    const navigateBack = isRTL ? navigateRight : navigateLeft;
+    const navigateForward = isRTL ? navigateLeft : navigateRight;
+    React.useImperativeHandle(instanceRef, () => ({
+        navigateBack,
+        navigateForward,
+    }));
+    /**
+     * Changing flag here since scroll ref changing won't rerender the controls and show them after SSR
+     */
+    useIsomorphicLayoutEffect(() => {
+        setMounted(true);
+    }, []);
+    return (_jsxs("section", { ...attributes, className: rootClassNames, style: {
+            ...responsiveVariables("--rs-carousel-items", visibleItems),
+            ...responsiveVariables("--rs-carousel-bleed", bleed),
+        }, children: [navigationDisplay !== "hidden" && (_jsxs(_Fragment, { children: [_jsx(CarouselControl, { isRTL: isRTL, type: T.ControlType.back, scrollElRef: scrollElRef, scrollPosition: scrollPosition, onClick: navigateBack, mounted: mounted }), _jsx(CarouselControl, { isRTL: isRTL, type: T.ControlType.forward, scrollElRef: scrollElRef, scrollPosition: scrollPosition, onClick: navigateForward, mounted: mounted })] })), _jsx(View, { as: "ul", direction: "row", wrap: false, gap: gap, className: s.scroll, attributes: { ref: scrollElRef, onScroll: handleScroll }, children: React.Children.map(children, (child) => (_jsx(View.Item, { className: s.item, as: "li", children: child }))) })] }));
+};
+export default Carousel;

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

@@ -0,0 +1,28 @@
+import type React from "react";
+import type * as G from "../../types/global";
+export type InstanceRef = {
+    navigateBack: () => void;
+    navigateForward: () => void;
+} | undefined;
+export declare enum ControlType {
+    back = "back",
+    forward = "forward"
+}
+export type ControlProps = {
+    type: ControlType;
+    scrollElRef: React.RefObject<HTMLElement>;
+    scrollPosition: number;
+    onClick: () => void;
+    isRTL: boolean;
+    mounted: boolean;
+};
+export type Props = {
+    children?: React.ReactNode;
+    visibleItems?: G.Responsive<number>;
+    gap?: G.Responsive<number>;
+    bleed?: G.Responsive<number>;
+    navigationDisplay?: "hidden";
+    instanceRef?: React.Ref<InstanceRef>;
+    className?: G.ClassName;
+    attributes?: G.Attributes<"div">;
+};

package/dist/components/Carousel/CarouselControl.js

@@ -0,0 +1,42 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import { classNames } from "../../utilities/helpers.js";
+import Button from "../Button/index.js";
+import IconChevronRight from "../../icons/ChevronRight.js";
+import IconChevronLeft from "../../icons/ChevronLeft.js";
+import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
+import * as T from "./Carousel.types.js";
+import s from "./Carousel.module.css";
+const CarouselControl = (props) => {
+    const { type, scrollElRef, scrollPosition, onClick, isRTL, mounted } = props;
+    const [visible, setVisible] = React.useState(false);
+    const [rendered, setRendered] = React.useState(false);
+    const isNext = type === T.ControlType.forward;
+    const isDisplayedAsNext = type === (isRTL ? T.ControlType.back : T.ControlType.forward);
+    const controlClassNames = classNames(s.control, isDisplayedAsNext ? s["--control-next"] : s["--control-prev"], visible && s["--control-visible"], rendered && s["--control-rendered"]);
+    useIsomorphicLayoutEffect(() => {
+        const scrollEl = scrollElRef.current;
+        if (!scrollEl || !mounted)
+            return;
+        let timer;
+        const normalizedScrollPosition = Math.abs(scrollPosition);
+        const isScrollAtStart = normalizedScrollPosition <= 0;
+        const isScrollAtEnd = normalizedScrollPosition + scrollEl.clientWidth >= scrollEl.scrollWidth - 1;
+        const hideControl = isNext ? isScrollAtEnd : isScrollAtStart;
+        if (hideControl) {
+            setVisible(false);
+            timer = setTimeout(() => setRendered(false), 1500);
+        }
+        else {
+            setRendered(true);
+            setVisible(true);
+        }
+        return () => {
+            if (timer)
+                clearTimeout(timer);
+        };
+    }, [scrollPosition, scrollElRef.current, mounted]);
+    return (_jsx("div", { className: controlClassNames, "aria-hidden": "true", children: _jsx(Button, { onClick: onClick, icon: isDisplayedAsNext ? IconChevronRight : IconChevronLeft, rounded: true, variant: "outline", elevated: true, attributes: { "aria-disabled": !visible } }) }));
+};
+export default CarouselControl;

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

@@ -0,0 +1,127 @@
+import React from "react";
+import { Example, Placeholder } from "../../../utilities/storybook/index.js";
+import Carousel from "../index.js";
+import Button from "../../Button/index.js";
+import View from "../../View/index.js";
+export default {
+    title: "Components/Carousel",
+    component: Carousel,
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/components/carousel",
+        },
+    },
+};
+export const visibleItems = () => (<Example>
+		<Example.Item title="visibleItems: 3">
+			<Carousel visibleItems={3}>
+				<Placeholder h={100}/>
+				<Placeholder h={100}/>
+				<Placeholder h={100}/>
+				<Placeholder h={100}/>
+				<Placeholder h={100}/>
+				<Placeholder h={100}/>
+			</Carousel>
+		</Example.Item>
+
+		<Example.Item title={["responsive visibleItems", "[s] 2", "[m+] 3"]}>
+			<Carousel visibleItems={{ s: 2, m: 3 }}>
+				<Placeholder h={100}/>
+				<Placeholder h={100}/>
+				<Placeholder h={100}/>
+				<Placeholder h={100}/>
+				<Placeholder h={100}/>
+				<Placeholder h={100}/>
+			</Carousel>
+		</Example.Item>
+
+		<Example.Item title="visibleItems: auto">
+			<Carousel>
+				<Placeholder h={100}/>
+				<Placeholder h={100} w={200}/>
+				<Placeholder h={100} w={300}/>
+				<Placeholder h={100}/>
+				<Placeholder h={100}/>
+				<Placeholder h={100}/>
+			</Carousel>
+		</Example.Item>
+	</Example>);
+export const gap = () => (<Example>
+		<Example.Item title="gap: 2, visibleItems 3">
+			<Carousel visibleItems={3} gap={2}>
+				<Placeholder h={100}/>
+				<Placeholder h={100}/>
+				<Placeholder h={100}/>
+				<Placeholder h={100}/>
+				<Placeholder h={100}/>
+				<Placeholder h={100}/>
+			</Carousel>
+		</Example.Item>
+
+		<Example.Item title={["responsive gap, visibleItems: 3", "[s] 2", "[l] 8"]}>
+			<Carousel visibleItems={3} gap={{ s: 2, l: 8 }}>
+				<Placeholder h={100}/>
+				<Placeholder h={100}/>
+				<Placeholder h={100}/>
+				<Placeholder h={100}/>
+				<Placeholder h={100}/>
+				<Placeholder h={100}/>
+			</Carousel>
+		</Example.Item>
+	</Example>);
+export const bleed = () => (<Example>
+		<Example.Item title="bleed: 4, visibleItems: 3">
+			<Carousel visibleItems={3} bleed={4}>
+				<Placeholder h={100}/>
+				<Placeholder h={100}/>
+				<Placeholder h={100}/>
+				<Placeholder h={100}/>
+				<Placeholder h={100}/>
+				<Placeholder h={100}/>
+			</Carousel>
+		</Example.Item>
+
+		<Example.Item title={["responsive bleed, visibleItems: 3", "[s] 4, [l+] 0"]}>
+			<Carousel visibleItems={3} bleed={{ s: 4, l: 0 }}>
+				<Placeholder h={100}/>
+				<Placeholder h={100}/>
+				<Placeholder h={100}/>
+				<Placeholder h={100}/>
+				<Placeholder h={100}/>
+				<Placeholder h={100}/>
+			</Carousel>
+		</Example.Item>
+	</Example>);
+const RefDemo = () => {
+    const carouselRef = React.useRef();
+    return (<View gap={3}>
+			<View gap={3} direction="row">
+				<Button onClick={() => carouselRef.current?.navigateBack()}>Back</Button>
+				<Button onClick={() => carouselRef.current?.navigateForward()}>Forward</Button>
+			</View>
+			<Carousel visibleItems={2} instanceRef={carouselRef} navigationDisplay="hidden">
+				<Placeholder h={100}>Item 1</Placeholder>
+				<Placeholder h={100}>Item 2</Placeholder>
+				<Placeholder h={100}>Item 3</Placeholder>
+				<Placeholder h={100}>Item 4</Placeholder>
+				<Placeholder h={100}>Item 5</Placeholder>
+				<Placeholder h={100}>Item 6</Placeholder>
+			</Carousel>
+		</View>);
+};
+export const navigation = () => (<Example>
+		<Example.Item title="navigation: hidden">
+			<Carousel visibleItems={3} navigationDisplay="hidden">
+				<Placeholder h={100}/>
+				<Placeholder h={100}/>
+				<Placeholder h={100}/>
+				<Placeholder h={100}/>
+				<Placeholder h={100}/>
+				<Placeholder h={100}/>
+			</Carousel>
+		</Example.Item>
+
+		<Example.Item title="navigation: external">
+			<RefDemo />
+		</Example.Item>
+	</Example>);

package/dist/components/Checkbox/Checkbox.js

@@ -0,0 +1,41 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { classNames } from "../../utilities/helpers.js";
+import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
+import HiddenInput from "../_private/HiddenInput/index.js";
+import { useFormControl } from "../FormControl/index.js";
+import { useCheckboxGroup } from "../CheckboxGroup/index.js";
+import Icon from "../Icon/index.js";
+import IconCheckmark from "../../icons/Checkmark.js";
+import s from "./Checkbox.module.css";
+const Checkbox = (props) => {
+    const { children, value, onChange, onFocus, onBlur, indeterminate, className, attributes, inputAttributes, } = props;
+    const checkboxGroup = useCheckboxGroup();
+    const formControl = useFormControl();
+    const hasError = formControl?.hasError || props.hasError || checkboxGroup?.hasError;
+    const disabled = formControl?.disabled || props.disabled || checkboxGroup?.disabled;
+    const checked = checkboxGroup ? checkboxGroup.value?.includes(value) : props.checked;
+    const defaultChecked = checkboxGroup ? undefined : props.defaultChecked;
+    const name = checkboxGroup ? checkboxGroup.name : props.name;
+    const inputRef = React.useRef(null);
+    const rootClassName = classNames(s.root, className, hasError && s["--error"], disabled && s["--disabled"]);
+    const handleChange = (event) => {
+        if (!name)
+            return;
+        const { checked } = event.target;
+        const changeArgs = { name, value, checked, event };
+        if (onChange)
+            onChange(changeArgs);
+        if (checkboxGroup?.onChange)
+            checkboxGroup.onChange(changeArgs);
+    };
+    useIsomorphicLayoutEffect(() => {
+        inputRef.current.indeterminate = indeterminate || false;
+    }, [indeterminate, checked]);
+    return (_jsxs("label", { ...attributes, className: rootClassName, children: [_jsxs("span", { className: s.field, children: [_jsx(HiddenInput, { className: s.input, type: "checkbox", checked: checked, defaultChecked: defaultChecked, name: name, disabled: disabled, value: value, onChange: handleChange, onFocus: onFocus, onBlur: onBlur, attributes: {
+                            ...inputAttributes,
+                            ref: inputRef,
+                        } }), _jsx("div", { className: s.decorator, children: _jsx(Icon, { svg: IconCheckmark, className: s.icon }) })] }), children && _jsx("span", { className: s.text, children: children })] }));
+};
+export default Checkbox;

package/dist/components/Checkbox/Checkbox.module.css

@@ -0,0 +1 @@
+.root{align-items:center;cursor:pointer;display:inline-flex;gap:var(--rs-unit-x2);user-select:none;vertical-align:top;-webkit-tap-highlight-color:transparent}.root:hover .decorator{background:var(--rs-color-background-neutral-faded)}.field{position:relative}.decorator{background:var(--rs-color-background-elevation-base);border:1px solid var(--rs-color-border-neutral);border-radius:var(--rs-radius-small);color:var(--rs-color-on-background-primary);height:var(--rs-line-height-body-3);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:background-color,border-color;width:var(--rs-line-height-body-3)}.decorator:before{background:var(--rs-color-on-background-primary);border-radius:999px;content:"";height:1.5px;width:calc(var(--rs-line-height-body-3) * .4)}.decorator:before,.icon{left:50%;opacity:0;position:absolute;top:50%;transform:translate(-50%,-50%) scale(0);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity,transform}[data-rs-keyboard] .input:focus+.decorator{box-shadow:var(--rs-focus-shadow)}.input:indeterminate+.decorator,.root.--error .input:indeterminate+.decorator,.root.--error:hover .input:indeterminate+.decorator,.root:hover .input:indeterminate+.decorator{background:var(--rs-color-background-primary);border-color:var(--rs-color-background-primary)}.input:indeterminate+.decorator:before,.root.--error .input:indeterminate+.decorator:before,.root.--error:hover .input:indeterminate+.decorator:before,.root:hover .input:indeterminate+.decorator:before{opacity:1;transform:translate(-50%,-50%) scale(1)}.input:checked+.decorator,.root.--error .input:checked+.decorator,.root.--error:hover .input:checked+.decorator,.root:hover .input:checked+.decorator{background:var(--rs-color-background-primary);border-color:var(--rs-color-background-primary)}.input:checked+.decorator .icon,.root.--error .input:checked+.decorator .icon,.root.--error:hover .input:checked+.decorator .icon,.root:hover .input:checked+.decorator .icon{opacity:1;transform:translate(-50%,-50%) scale(1)}.root.--error .decorator{border-color:var(--rs-color-border-critical)}.root.--disabled{color:var(--rs-color-foreground-disabled);cursor:not-allowed}.root.--disabled .decorator,.root.--disabled .input:checked+.decorator,.root.--disabled:hover .decorator,.root.--disabled:hover .input:checked+.decorator{background:var(--rs-color-background-disabled-faded);border-color:var(--rs-color-border-disabled);color:var(--rs-color-foreground-disabled)}.root.--disabled .input:checked+.decorator,.root.--disabled .input:indeterminate+.decorator,.root.--disabled:hover .input:checked+.decorator,.root.--disabled:hover .input:indeterminate+.decorator{background:var(--rs-color-background-disabled);border-color:transparent}.root.--disabled .input:indeterminate+.decorator:before{background:var(--rs-color-foreground-disabled)}.root.--disabled .input:checked+.decorator:after{background:var(--rs-color-border-disabled)}

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

@@ -0,0 +1,26 @@
+import type React from "react";
+import type * as G from "../../types/global";
+type BaseProps = {
+    children?: React.ReactNode;
+    name?: string;
+    disabled?: boolean;
+    hasError?: boolean;
+    value?: string;
+    indeterminate?: boolean;
+    onChange?: G.ChangeHandler<boolean>;
+    onFocus?: (e: React.FocusEvent) => void;
+    onBlur?: (e: React.FocusEvent) => void;
+    className?: G.ClassName;
+    attributes?: G.Attributes<"label">;
+    inputAttributes?: G.Attributes<"input">;
+};
+export type ControlledProps = BaseProps & {
+    checked: boolean;
+    defaultChecked?: never;
+};
+export type UncontrolledProps = BaseProps & {
+    checked?: never;
+    defaultChecked?: boolean;
+};
+export type Props = ControlledProps | UncontrolledProps;
+export {};

package/dist/components/CheckboxGroup/CheckboxGroup.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import CheckboxGroupControlled from "./CheckboxGroupControlled.js";
+import CheckboxGroupUncontrolled from "./CheckboxGroupUncontrolled.js";
+const CheckboxGroup = (props) => {
+    const { value } = props;
+    if (value !== undefined)
+        return _jsx(CheckboxGroupControlled, { ...props });
+    return _jsx(CheckboxGroupUncontrolled, { ...props });
+};
+export default CheckboxGroup;

package/dist/components/CheckboxGroup/CheckboxGroupUncontrolled.js

@@ -0,0 +1,17 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+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 (_jsx(CheckboxGroupControlled, { ...props, value: value, defaultValue: undefined, onChange: handleChange }));
+};
+export default CheckboxGroupUncontrolled;

package/dist/components/Container/Container.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+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, align, justify, height, maxHeight, className, attributes, } = props;
+    const rootClassNames = classNames(s.root, className);
+    return (_jsx(View, { attributes: attributes, className: rootClassNames, paddingInline: padding, align: align, justify: justify, height: height, maxHeight: maxHeight, width: width, maxWidth: "100%", children: children }));
+};
+export default Container;

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

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

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

@@ -0,0 +1,13 @@
+declare const _default: {
+    title: string;
+    component: (props: import("./..").ContainerProps) => import("react").JSX.Element;
+    parameters: {
+        iframe: {
+            url: string;
+        };
+    };
+};
+export default _default;
+export declare const padding: () => import("react").JSX.Element;
+export declare const width: () => import("react").JSX.Element;
+export declare const layout: () => import("react").JSX.Element;

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

@@ -0,0 +1,42 @@
+import { Example, Placeholder } from "../../../utilities/storybook/index.js";
+import Container from "../index.js";
+export default {
+    title: "Utilities/Container",
+    component: Container,
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/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>);
+export const layout = () => (<Example>
+		<Example.Item title="center">
+			<Container align="center" justify="center" height="500px">
+				<Placeholder />
+			</Container>
+		</Example.Item>
+	</Example>);

package/dist/components/Dismissible/Dismissible.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 (_jsxs("div", { ...attributes, className: rootClassNames, children: [children, !hideCloseButton && (_jsx(WrapperTag, { className: s.close, children: _jsx(Button, { size: "small", ...(variant === "media" ? { color: "media", variant: "faded" } : { variant: "ghost" }), onClick: onClose, attributes: { "aria-label": onClose ? closeAriaLabel : undefined }, icon: IconClose }) }))] }));
+};
+export default Dismissible;

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

@@ -0,0 +1,20 @@
+import type 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">;
+};
+export {};

package/dist/components/Divider/Divider.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+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 (_jsx("div", { ...attributes, role: "separator", "aria-orientation": ariaOrientation, className: rootClassNames }));
+};
+export default Divider;

package/dist/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">;
+};

package/dist/components/DropdownMenu/DropdownMenu.d.ts

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

package/dist/components/DropdownMenu/DropdownMenu.js

@@ -0,0 +1,75 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+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 { 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", ...popoverProps } = props;
+    return (_jsx(Popover, { ...popoverProps, position: position, padding: 0, trapFocusMode: trapFocusMode, triggerType: triggerType, children: children }));
+};
+const DropdownMenuContent = (props) => {
+    const { children, attributes, className } = props;
+    const { flyout } = useFlyoutContext();
+    const subMenuInstance = React.useContext(DropdownMenuSubContext);
+    const [rtl] = useRTL();
+    const { ref } = useHotkeys({
+        [rtl ? keys.RIGHT : keys.LEFT]: () => {
+            subMenuInstance?.current?.close();
+        },
+    }, [subMenuInstance?.current], {
+        disabled: flyout.status === "idle",
+    });
+    const contentClassName = classNames(s.menu, className);
+    return (_jsx(Popover.Content, { className: contentClassName, attributes: { ...attributes, ref }, children: children }));
+};
+const DropdownMenuSection = (props) => {
+    const { children } = props;
+    return (_jsx("div", { className: s.section, role: "group", children: children }));
+};
+const DropdownMenuItem = (props) => {
+    const { onClick } = props;
+    const { handleClose } = useFlyoutContext();
+    const handleClick = (e) => {
+        if (handleClose)
+            handleClose({ closeParents: true });
+        if (onClick)
+            onClick(e);
+    };
+    return (_jsx(MenuItem, { ...props, roundedCorners: true, className: s.item, attributes: { role: "menuitem", ...props.attributes }, onClick: handleClick }));
+};
+const DropdownMenuSubMenu = (props) => {
+    const { children } = props;
+    const dropdownMenuRef = React.useRef();
+    return (_jsx(DropdownMenuSubContext.Provider, { value: dropdownMenuRef, children: _jsx(DropdownMenu, { triggerType: "hover", position: "end-top", contentGap: 0.5, instanceRef: dropdownMenuRef, children: children }) }));
+};
+const DropdownMenuSubTriggerItem = (props) => {
+    const { children, attributes, ...menuItemProps } = props;
+    const subMenuInstance = React.useContext(DropdownMenuSubContext);
+    const [rtl] = useRTL();
+    const { ref } = useHotkeys({
+        [rtl ? keys.LEFT : keys.RIGHT]: () => {
+            subMenuInstance?.current?.open();
+        },
+    }, [], { ref: attributes?.ref, preventDefault: true });
+    return (_jsx(DropdownMenuItem, { ...menuItemProps, attributes: { ...attributes, ref: ref }, endSlot: _jsx(Icon, { autoWidth: true, svg: IconChevronRight, className: s.arrow }), children: children }));
+};
+const DropdownMenuSubTrigger = (props) => {
+    const { children } = props;
+    return (_jsx(DropdownMenu.Trigger, { children: (attributes) => (_jsx(DropdownMenuSubTriggerItem, { attributes: attributes, children: children })) }));
+};
+DropdownMenu.Trigger = Popover.Trigger;
+DropdownMenu.Content = DropdownMenuContent;
+DropdownMenu.Section = DropdownMenuSection;
+DropdownMenu.Item = DropdownMenuItem;
+DropdownMenu.SubMenu = DropdownMenuSubMenu;
+DropdownMenu.SubTrigger = DropdownMenuSubTrigger;
+export default DropdownMenu;

package/dist/components/FileUpload/FileUpload.js

@@ -0,0 +1,47 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { classNames } from "../../utilities/helpers.js";
+import View from "../View/index.js";
+import HiddenVisually from "../HiddenVisually/index.js";
+import useToggle from "../../hooks/useToggle.js";
+import s from "./FileUpload.module.css";
+const FileUploadTrigger = (props) => {
+    const { children } = props;
+    return _jsx("span", { className: s.trigger, children: children });
+};
+const FileUpload = (props) => {
+    const { name, children, className, attributes, inputAttributes, onChange } = props;
+    const highlightToggle = useToggle();
+    const rootClassNames = classNames(s.root, highlightToggle.active && s["--highlighted"], className);
+    const handleDragOver = (event) => {
+        event.preventDefault();
+        attributes?.onDragOver?.(event);
+    };
+    const handleDragEnter = (event) => {
+        highlightToggle.activate();
+        attributes?.onDragEnter?.(event);
+    };
+    const handleDragLeave = (event) => {
+        // Ignore elements inside the field
+        if (event.currentTarget.contains(event.relatedTarget))
+            return;
+        highlightToggle.deactivate();
+        attributes?.onDragLeave?.(event);
+    };
+    const handleDrop = (event) => {
+        event.preventDefault();
+        highlightToggle.deactivate();
+        onChange?.({ name, value: Array.from(event.dataTransfer.files), event });
+        attributes?.onDrop?.(event);
+    };
+    const handleChange = (event) => {
+        const nextValue = event.target.files;
+        if (!nextValue)
+            return;
+        onChange?.({ name, event, value: Array.from(nextValue) });
+        inputAttributes?.onChange?.(event);
+    };
+    return (_jsx("div", { ...attributes, className: rootClassNames, onDragOver: handleDragOver, onDragEnter: handleDragEnter, onDragLeave: handleDragLeave, onDrop: handleDrop, children: _jsxs(View, { as: "label", className: s.triggerLayer, padding: 6, borderRadius: "medium", gap: 2, align: "center", textAlign: "center", animated: true, children: [_jsx(View.Item, { children: children }), _jsx(HiddenVisually, { children: _jsx("input", { ...inputAttributes, type: "file", className: s.field, name: name, onChange: handleChange }) })] }) }));
+};
+FileUpload.Trigger = FileUploadTrigger;
+export default FileUpload;