reshaped 2.11.12 → 3.0.0

package/components/Carousel/Carousel.js

@@ -1,64 +0,0 @@
-"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", Object.assign({}, attributes, { className: rootClassNames, style: Object.assign(Object.assign({}, 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/components/Carousel/Carousel.types.d.ts

@@ -1,28 +0,0 @@
-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<React.HTMLAttributes<HTMLDivElement>, keyof Props>;
-};

package/components/Carousel/CarouselControl.js

@@ -1,42 +0,0 @@
-"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: "faded", elevated: true, attributes: { "aria-disabled": !visible } }) }));
-};
-export default CarouselControl;

package/components/Checkbox/Checkbox.js

@@ -1,39 +0,0 @@
-"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) => {
-    var _a;
-    const { children, value, onChange, onFocus, onBlur, indeterminate, className, attributes, inputAttributes, } = props;
-    const checkboxGroup = useCheckboxGroup();
-    const formControl = useFormControl();
-    const hasError = (formControl === null || formControl === void 0 ? void 0 : formControl.hasError) || props.hasError || (checkboxGroup === null || checkboxGroup === void 0 ? void 0 : checkboxGroup.hasError);
-    const disabled = (formControl === null || formControl === void 0 ? void 0 : formControl.disabled) || props.disabled || (checkboxGroup === null || checkboxGroup === void 0 ? void 0 : checkboxGroup.disabled);
-    const checked = checkboxGroup ? (_a = checkboxGroup.value) === null || _a === void 0 ? void 0 : _a.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 === null || checkboxGroup === void 0 ? void 0 : checkboxGroup.onChange)
-            checkboxGroup.onChange(changeArgs);
-    };
-    useIsomorphicLayoutEffect(() => {
-        inputRef.current.indeterminate = indeterminate || false;
-    }, [indeterminate, checked]);
-    return (_jsxs("label", Object.assign({}, 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: Object.assign(Object.assign({}, 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/components/Checkbox/Checkbox.module.css

@@ -1 +0,0 @@
-.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-unit-radius-small);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:var(--rs-unit-x2)}.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);color:var(--rs-color-on-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/components/Checkbox/Checkbox.types.d.ts

@@ -1,26 +0,0 @@
-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", Props>;
-    inputAttributes?: G.Attributes<"input", Props>;
-};
-export type ControlledProps = BaseProps & {
-    checked: boolean;
-    defaultChecked?: never;
-};
-export type UncontrolledProps = BaseProps & {
-    checked?: never;
-    defaultChecked?: boolean;
-};
-export type Props = ControlledProps | UncontrolledProps;
-export {};

package/components/CheckboxGroup/CheckboxGroup.js

@@ -1,10 +0,0 @@
-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, Object.assign({}, props));
-    return _jsx(CheckboxGroupUncontrolled, Object.assign({}, props));
-};
-export default CheckboxGroup;

package/components/CheckboxGroup/CheckboxGroupUncontrolled.js

@@ -1,17 +0,0 @@
-"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, Object.assign({}, props, { value: value, defaultValue: undefined, onChange: handleChange })));
-};
-export default CheckboxGroupUncontrolled;

package/components/Container/Container.js

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

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

@@ -1,9 +0,0 @@
-import type 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/tests/Container.stories.d.ts

@@ -1,12 +0,0 @@
-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;

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

@@ -1,35 +0,0 @@
-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>);

package/components/Dismissible/Dismissible.js

@@ -1,12 +0,0 @@
-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", Object.assign({}, attributes, { className: rootClassNames, children: [children, !hideCloseButton && (_jsx(WrapperTag, { className: s.close, children: _jsx(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.types.d.ts

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

package/components/Divider/Divider.js

@@ -1,14 +0,0 @@
-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", Object.assign({}, attributes, { role: "separator", "aria-orientation": ariaOrientation, className: rootClassNames })));
-};
-export default Divider;

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

@@ -1,7 +0,0 @@
-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/DropdownMenu/DropdownMenu.js

@@ -1,88 +0,0 @@
-"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 { 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" } = props, popoverProps = __rest(props, ["children", "position", "triggerType", "trapFocusMode"]);
-    return (_jsx(Popover, Object.assign({}, 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]: () => {
-            var _a;
-            (_a = subMenuInstance === null || subMenuInstance === void 0 ? void 0 : subMenuInstance.current) === null || _a === void 0 ? void 0 : _a.close();
-        },
-    }, [subMenuInstance === null || subMenuInstance === void 0 ? void 0 : subMenuInstance.current], {
-        disabled: flyout.status === "idle",
-    });
-    const contentClassName = classNames(s.menu, className);
-    return (_jsx(Popover.Content, { className: contentClassName, attributes: Object.assign(Object.assign({}, 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, Object.assign({}, props, { roundedCorners: true, className: s.item, attributes: Object.assign({ 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 } = 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, preventDefault: true });
-    return (_jsx(DropdownMenuItem, Object.assign({}, menuItemProps, { attributes: Object.assign(Object.assign({}, attributes), { 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/components/FileUpload/FileUpload.js

@@ -1,52 +0,0 @@
-"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) => {
-        var _a;
-        event.preventDefault();
-        (_a = attributes === null || attributes === void 0 ? void 0 : attributes.onDragOver) === null || _a === void 0 ? void 0 : _a.call(attributes, event);
-    };
-    const handleDragEnter = (event) => {
-        var _a;
-        highlightToggle.activate();
-        (_a = attributes === null || attributes === void 0 ? void 0 : attributes.onDragEnter) === null || _a === void 0 ? void 0 : _a.call(attributes, event);
-    };
-    const handleDragLeave = (event) => {
-        var _a;
-        // Ignore elements inside the field
-        if (event.currentTarget.contains(event.relatedTarget))
-            return;
-        highlightToggle.deactivate();
-        (_a = attributes === null || attributes === void 0 ? void 0 : attributes.onDragLeave) === null || _a === void 0 ? void 0 : _a.call(attributes, event);
-    };
-    const handleDrop = (event) => {
-        var _a;
-        event.preventDefault();
-        highlightToggle.deactivate();
-        onChange === null || onChange === void 0 ? void 0 : onChange({ name, value: Array.from(event.dataTransfer.files), event });
-        (_a = attributes === null || attributes === void 0 ? void 0 : attributes.onDrop) === null || _a === void 0 ? void 0 : _a.call(attributes, event);
-    };
-    const handleChange = (event) => {
-        var _a;
-        const nextValue = event.target.files;
-        if (!nextValue)
-            return;
-        onChange === null || onChange === void 0 ? void 0 : onChange({ name, event, value: Array.from(nextValue) });
-        (_a = inputAttributes === null || inputAttributes === void 0 ? void 0 : inputAttributes.onChange) === null || _a === void 0 ? void 0 : _a.call(inputAttributes, event);
-    };
-    return (_jsx("div", Object.assign({}, 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", Object.assign({}, inputAttributes, { type: "file", className: s.field, name: name, onChange: handleChange })) })] }) })));
-};
-FileUpload.Trigger = FileUploadTrigger;
-export default FileUpload;

package/components/FileUpload/FileUpload.types.d.ts

@@ -1,13 +0,0 @@
-import type React from "react";
-import type * as G from "../../types/global";
-export type Props = {
-    name: string;
-    children?: React.ReactNode;
-    onChange?: G.ChangeHandler<File[], React.DragEvent<HTMLDivElement> | React.ChangeEvent<HTMLInputElement>>;
-    className?: G.ClassName;
-    attributes?: G.Attributes<"div", Props>;
-    inputAttributes?: G.Attributes<"input">;
-};
-export type TriggerProps = {
-    children: React.ReactNode;
-};