@canlooks/can-ui 0.0.1

package/dist/cjs/components/dialog/dialog.js

@@ -0,0 +1,90 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Dialog = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const modal_1 = require("../modal");
+const dialog_style_1 = require("./dialog.style");
+const utils_1 = require("../../utils");
+const button_1 = require("../button");
+const icons_1 = require("@ant-design/icons");
+const draggable_1 = require("../draggable");
+exports.Dialog = (0, react_1.forwardRef)(({ icon, title, footer, prefix, suffix, width = 420, minWidth, maxWidth = '100%', showClose = true, closeProps, showConfirm = true, confirmText = '确 定', confirmProps, confirmRef, onConfirm, confirmLoading = false, showCancel = true, cancelText = '取 消', cancelProps, cancelRef, onCancel, draggable = true, maskClosable = true, escapeClosable = true, defaultOpen = false, open, onClose, ...props }, ref) => {
+    const [innerOpen, _setInnerOpen] = (0, utils_1.useControlled)(defaultOpen, open);
+    const close = (closeReason) => {
+        if (!innerLoading.current || closeReason === 'confirmed') {
+            onClose?.(closeReason);
+            _setInnerOpen(false);
+        }
+    };
+    // 绑定ESC键
+    const overlayRef = (0, utils_1.useEscapeClosable)({ escapeClosable, close }, onCancel);
+    // 点击遮罩层
+    const onMaskClick = (e) => {
+        props.onMaskClick?.(e);
+        if (maskClosable) {
+            onCancel?.(e);
+            close('maskClicked');
+        }
+    };
+    // 点击取消按钮
+    const cancelHandler = (e) => {
+        cancelProps?.onClick?.(e);
+        onCancel?.(e);
+        close('canceled');
+    };
+    // 点击关闭按钮
+    const closeHandler = (e) => {
+        closeProps?.onClick?.(e);
+        onCancel?.(e);
+        close('closed');
+    };
+    // 点击确定
+    const [innerLoading, confirmHandler] = (0, utils_1.useLoading)(async (e) => {
+        confirmProps?.onClick?.(e);
+        await onConfirm?.(e);
+        close('confirmed');
+    }, confirmLoading);
+    /**
+     * ---------------------------------------------------------------------
+     * 长内容滚动
+     */
+    const bodyRef = (0, react_1.useRef)(null);
+    const bodyWrapRef = (0, react_1.useRef)(null);
+    const onScroll = () => {
+        const el = bodyRef.current;
+        if (el.scrollHeight > el.clientHeight) {
+            el.dataset.borderTop = (el.scrollTop > 0).toString();
+            el.dataset.borderBottom = (el.scrollHeight - el.clientHeight > el.scrollTop).toString();
+        }
+    };
+    (0, react_1.useEffect)(() => {
+        if (innerOpen.current) {
+            const resizeObserver = new ResizeObserver(onScroll);
+            resizeObserver.observe(bodyWrapRef.current);
+            return () => {
+                resizeObserver.disconnect();
+            };
+        }
+        return;
+    }, [innerOpen.current]);
+    /**
+     * ---------------------------------------------------------------------
+     * 渲染
+     */
+    const renderFooter = () => {
+        if (typeof footer === 'undefined' || footer === true) {
+            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [showCancel &&
+                        (0, jsx_runtime_1.jsx)(button_1.Button, { variant: "outlined", ...cancelProps, ref: cancelRef, onClick: cancelHandler, children: cancelText }), showConfirm &&
+                        (0, jsx_runtime_1.jsx)(button_1.Button, { loading: innerLoading.current, ...confirmProps, ref: confirmRef, onClick: confirmHandler, children: confirmText })] }));
+        }
+        return footer;
+    };
+    return ((0, jsx_runtime_1.jsx)(modal_1.Modal, { ...props, ref: (0, utils_1.cloneRef)(ref, overlayRef), css: dialog_style_1.style, className: (0, utils_1.classnames)(dialog_style_1.classes.root, props.className), open: innerOpen.current, onMaskClick: onMaskClick, "data-draggable": draggable, children: (0, jsx_runtime_1.jsx)(draggable_1.Draggable, { container: () => overlayRef.current, children: (targetProps, handleProps) => (0, jsx_runtime_1.jsxs)("div", { className: dialog_style_1.classes.card, ...targetProps, style: { width, minWidth, maxWidth, ...targetProps.style }, children: [!!icon &&
+                        (0, jsx_runtime_1.jsx)("div", { className: dialog_style_1.classes.icon, children: icon }), (0, jsx_runtime_1.jsxs)("div", { className: dialog_style_1.classes.content, children: [!!(title || showClose) &&
+                                (0, jsx_runtime_1.jsxs)("div", { className: dialog_style_1.classes.titleRow, ...handleProps, children: [(0, jsx_runtime_1.jsx)("div", { className: dialog_style_1.classes.title, children: title }), showClose &&
+                                            (0, jsx_runtime_1.jsx)(button_1.Button, { shape: "circular", variant: "text", color: "text", ...closeProps, className: (0, utils_1.classnames)(dialog_style_1.classes.close, closeProps?.className), onClick: closeHandler, children: (0, jsx_runtime_1.jsx)(icons_1.CloseOutlined, {}) })] }), (0, jsx_runtime_1.jsxs)("div", { ref: bodyRef, className: dialog_style_1.classes.body, onScroll: onScroll, children: [!!prefix &&
+                                        (0, jsx_runtime_1.jsx)("div", { className: dialog_style_1.classes.prefix, children: prefix }), (0, jsx_runtime_1.jsx)("div", { ref: bodyWrapRef, className: dialog_style_1.classes.bodyWrap, children: props.children }), !!suffix &&
+                                        (0, jsx_runtime_1.jsx)("div", { className: dialog_style_1.classes.suffix, children: suffix })] }), (typeof footer === 'undefined' || !!footer) &&
+                                (0, jsx_runtime_1.jsx)("div", { className: dialog_style_1.classes.footer, children: renderFooter() })] })] }) }) }));
+});

package/dist/cjs/components/dialog/dialog.style.d.ts

@@ -0,0 +1,16 @@
+export declare const classes: {
+    body: string;
+    card: string;
+    title: string;
+    content: string;
+    prefix: string;
+    footer: string;
+    icon: string;
+    titleRow: string;
+    close: string;
+    bodyWrap: string;
+    suffix: string;
+} & {
+    root: string;
+};
+export declare const style: () => import("@emotion/react").SerializedStyles;

package/dist/cjs/components/dialog/dialog.style.js

@@ -0,0 +1,110 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.style = exports.classes = void 0;
+const react_1 = require("@emotion/react");
+const utils_1 = require("../../utils");
+exports.classes = (0, utils_1.defineClasses)('dialog', [
+    'card',
+    'icon',
+    'content',
+    'titleRow',
+    'title',
+    'close',
+    'body',
+    'bodyWrap',
+    'prefix',
+    'suffix',
+    'footer'
+]);
+exports.style = (0, utils_1.defineCss)(({ background, borderRadius, boxShadow, spacing, colors, divider }) => (0, react_1.css) `
+    .${exports.classes.card} {
+        max-height: 100%;
+        display: flex;
+        background-color: ${background.card};
+        border-radius: ${borderRadius}px;
+        box-shadow: ${boxShadow[0]};
+    }
+
+    .${exports.classes.icon} {
+        color: ${colors.primary};
+        font-size: ${21 / 14}em;
+        padding: ${spacing[6]}px 0 ${spacing[6]}px ${spacing[8]}px;
+
+        & + .${exports.classes.content} {
+            padding-left: ${spacing[4]}px;
+        }
+    }
+
+    .${exports.classes.content} {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        padding: 0 ${spacing[8]}px;
+    }
+
+    .${exports.classes.titleRow} {
+        display: flex;
+        align-items: center;
+        font-size: ${16 / 14}em;
+        font-weight: bold;
+        margin-right: -${spacing[8]}px;
+        
+        .${exports.classes.title} {
+            flex: 1;
+            padding: ${spacing[6]}px 0 ${spacing[3]}px;
+        }
+
+        .${exports.classes.close} {
+            margin: ${spacing[3]}px ${spacing[4]}px;
+        }
+
+        & + .${exports.classes.body} {
+            padding-top: ${spacing[3]}px;
+        }
+    }
+
+    &[data-draggable=true] {
+        .${exports.classes.titleRow} {
+            cursor: move;
+            touch-action: none;
+        }
+    }
+
+    .${exports.classes.body} {
+        overflow: hidden auto;
+        padding: ${spacing[6]}px 0;
+        border-top: 1px solid transparent;
+        border-bottom: 1px solid transparent;
+        display: flex;
+        gap: ${spacing[6]}px;
+
+        &:has(+ .${exports.classes.footer}) {
+            padding-bottom: 0;
+        }
+
+        &[data-border-top=true] {
+            border-top-color: ${divider};
+        }
+
+        &[data-border-bottom=true] {
+            border-bottom-color: ${divider};
+        }
+
+        .${exports.classes.bodyWrap} {
+            flex: 1;
+        }
+
+        .${exports.classes.prefix}, .${exports.classes.suffix} {
+            max-height: 100%;
+            overflow: auto;
+        }
+    }
+
+    .${exports.classes.footer} {
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        gap: ${spacing[3]}px;
+        padding: ${spacing[4]}px 0 ${spacing[6]}px;
+    }
+`);

package/dist/cjs/components/dialog/index.d.ts

@@ -0,0 +1 @@
+export * from './dialog';

package/dist/cjs/components/dialog/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./dialog"), exports);

package/dist/cjs/components/divider/divider.d.ts

@@ -0,0 +1,8 @@
+import { DIVProps } from '../../../types';
+export interface DividerProps extends DIVProps {
+    textAlign?: 'start' | 'center' | 'end';
+    alignMargin?: number | string;
+    orientation?: 'horizontal' | 'vertical';
+    margin?: number | string;
+}
+export declare const Divider: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<DividerProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>>;

package/dist/cjs/components/divider/divider.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Divider = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const divider_style_1 = require("./divider.style");
+const utils_1 = require("../../utils");
+const app_1 = require("../app");
+exports.Divider = (0, react_1.memo)((0, react_1.forwardRef)(({ textAlign = 'center', alignMargin = 36, orientation = 'horizontal', margin, ...props }, ref) => {
+    const { spacing } = (0, app_1.useTheme)();
+    margin ??= orientation === 'horizontal' ? spacing[5] : spacing[4];
+    if (typeof margin === 'number') {
+        margin += 'px';
+    }
+    const styleProp = orientation === 'horizontal' ? 'width' : 'height';
+    return ((0, jsx_runtime_1.jsxs)("div", { ...props, ref: ref, css: divider_style_1.style, className: (0, utils_1.classnames)(divider_style_1.classes.root, props.className), style: {
+            margin: orientation === 'horizontal' ? `${margin} 0` : `0 ${margin}`,
+            ...props.style
+        }, "data-orientation": orientation, children: [(0, jsx_runtime_1.jsx)("div", { className: `${divider_style_1.classes.line} ${divider_style_1.classes.beforeLine}`, style: {
+                    flex: !props.children || textAlign !== 'start' ? 1 : void 0,
+                    [styleProp]: textAlign === 'start' ? alignMargin : void 0
+                } }), !!props.children &&
+                (0, jsx_runtime_1.jsx)("div", { className: divider_style_1.classes.content, children: props.children }), !!props.children &&
+                (0, jsx_runtime_1.jsx)("div", { className: `${divider_style_1.classes.line} ${divider_style_1.classes.afterLine}`, style: {
+                        flex: textAlign !== 'end' ? 1 : void 0,
+                        [styleProp]: textAlign === 'end' ? alignMargin : void 0
+                    } })] }));
+}));

package/dist/cjs/components/divider/divider.style.d.ts

@@ -0,0 +1,9 @@
+export declare const classes: {
+    content: string;
+    line: string;
+    beforeLine: string;
+    afterLine: string;
+} & {
+    root: string;
+};
+export declare const style: () => import("@emotion/react").SerializedStyles;

package/dist/cjs/components/divider/divider.style.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.style = exports.classes = void 0;
+const react_1 = require("@emotion/react");
+const utils_1 = require("../../utils");
+exports.classes = (0, utils_1.defineClasses)('divider', [
+    'line',
+    'beforeLine',
+    'afterLine',
+    'content'
+]);
+exports.style = (0, utils_1.defineCss)(({ spacing, divider }) => (0, react_1.css) `
+    gap: ${spacing[4]}px;
+    align-items: center;
+
+    .${exports.classes.line} {
+        background-color: ${divider};
+    }
+
+    &[data-orientation=horizontal] {
+        display: flex;
+
+        .${exports.classes.line} {
+            height: 1px;
+        }
+    }
+
+    &[data-orientation=vertical] {
+        display: inline-flex;
+        flex-direction: column;
+
+        .${exports.classes.line} {
+            width: 1px;
+        }
+    }
+`);

package/dist/cjs/components/divider/index.d.ts

@@ -0,0 +1 @@
+export * from './divider';

package/dist/cjs/components/divider/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./divider"), exports);

package/dist/cjs/components/draggable/draggable.d.ts

@@ -0,0 +1,14 @@
+import { ReactElement } from 'react';
+import { DraggableOptions, HandleProps } from '../../utils';
+import { DefineElement } from '../../../types';
+export type DraggableTargetProps = {
+    style: {
+        translate: string;
+    };
+};
+export interface DraggableProps<H extends Element = Element> extends DraggableOptions<H> {
+    translateLimit?(translate: [number, number]): [number, number];
+    container?: DefineElement;
+    children: ReactElement | ((targetProps: DraggableTargetProps, handleProps: HandleProps<H>) => ReactElement);
+}
+export declare function Draggable<H extends Element = Element>({ translateLimit, container, children, ...draggableOptions }: DraggableProps<H>): ReactElement<any, string | import("react").JSXElementConstructor<any>>;

package/dist/cjs/components/draggable/draggable.js

@@ -0,0 +1,56 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Draggable = Draggable;
+const react_1 = require("react");
+const utils_1 = require("../../utils");
+function Draggable({ translateLimit, container, children, ...draggableOptions }) {
+    const syncOptions = (0, utils_1.useSync)(draggableOptions);
+    const syncTranslateLimit = (0, utils_1.useSync)(translateLimit);
+    const syncContainer = (0, utils_1.useSync)(container);
+    const [translate, setTranslate] = (0, react_1.useState)([0, 0]);
+    const startTranslate = (0, react_1.useRef)([0, 0]);
+    const props = children.props;
+    const draggableHandle = (0, utils_1.useDraggableHandle)({
+        ...draggableOptions,
+        onDragStart(e) {
+            syncOptions.current.onDragStart?.(e);
+            startTranslate.current = [...translate];
+        },
+        onDrag(info, e) {
+            syncOptions.current.onDrag?.(info, e);
+            const { deltaX, deltaY } = info;
+            const [startX, startY] = startTranslate.current;
+            let newX = startX + deltaX;
+            let newY = startY + deltaY;
+            if (syncTranslateLimit.current) {
+                [newX, newY] = syncTranslateLimit.current([newX, newY]);
+            }
+            else {
+                const containerEl = typeof syncContainer.current === 'function' ? syncContainer.current() : syncContainer.current;
+                if (containerEl) {
+                    const { clientWidth, clientHeight } = containerEl;
+                    newX = (0, utils_1.range)(startX + deltaX, -clientWidth / 2, clientWidth / 2);
+                    newY = (0, utils_1.range)(startY + deltaY, -clientHeight / 2, clientHeight / 2);
+                }
+            }
+            setTranslate([newX, newY]);
+        },
+        onPointerDown: props?.onPointerDown,
+        onTouchStart: props?.onTouchStart,
+        onClick: props?.onClick
+    });
+    const style = (0, react_1.useMemo)(() => ({
+        translate: `${translate[0]}px ${translate[1]}px`,
+        ...props?.style
+    }), [translate, props?.style]);
+    if ((0, react_1.isValidElement)(children)) {
+        return (0, react_1.cloneElement)(children, {
+            style,
+            ...draggableHandle
+        });
+    }
+    if (typeof children === 'function') {
+        return children({ style: { translate: `${translate[0]}px ${translate[1]}px` } }, draggableHandle);
+    }
+    return children;
+}

package/dist/cjs/components/draggable/index.d.ts

@@ -0,0 +1 @@
+export * from './draggable';

package/dist/cjs/components/draggable/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./draggable"), exports);

package/dist/cjs/components/drawer/drawer.d.ts

@@ -0,0 +1,20 @@
+import { ReactNode } from 'react';
+import { OverlayBaseProps } from '../overlayBase';
+import { ResponsiveProp } from '../../../types';
+import { TransitionBaseProps } from '../transitionBase';
+export interface DrawerProps extends Omit<OverlayBaseProps, 'title'> {
+    title?: ReactNode;
+    footer?: ReactNode;
+    showClose?: ReactNode;
+    size?: ResponsiveProp<string | number>;
+    placement?: 'left' | 'right' | 'top' | 'bottom';
+    /** 是否可通过点击遮罩层关闭对话框，@default true */
+    maskClosable?: boolean;
+    /** 是否可通过键盘的【ESC】键关闭对话框，@default true */
+    escapeClosable?: boolean;
+    defaultOpen?: boolean;
+    onClose?(reason: DrawerCloseReason): void;
+    slideProps?: TransitionBaseProps<HTMLDivElement>;
+}
+export type DrawerCloseReason = 'escape' | 'closed' | 'maskClicked';
+export declare const Drawer: import("react").ForwardRefExoticComponent<Omit<DrawerProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/cjs/components/drawer/drawer.js

@@ -0,0 +1,59 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Drawer = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const drawer_style_1 = require("./drawer.style");
+const utils_1 = require("../../utils");
+const overlayBase_1 = require("../overlayBase");
+const button_1 = require("../button");
+const icons_1 = require("@ant-design/icons");
+const transitionBase_1 = require("../transitionBase");
+const placementToDirection = {
+    left: 'right',
+    right: 'left',
+    top: 'down',
+    bottom: 'up'
+};
+exports.Drawer = (0, react_1.forwardRef)(({ title, footer, showClose = true, size = { xs: '100%', sm: '75%', md: '50%', lg: '25%' }, placement = 'right', maskClosable = true, escapeClosable = true, defaultOpen = false, open, onClose, slideProps, ...props }, ref) => {
+    const [innerOpen, setInnerOpen] = (0, utils_1.useControlled)(defaultOpen, open);
+    const close = (reason) => {
+        onClose?.(reason);
+        setInnerOpen(false);
+    };
+    const onMaskClick = (e) => {
+        props.onMaskClick?.(e);
+        maskClosable && close('maskClicked');
+    };
+    const closeHandler = () => {
+        close('closed');
+    };
+    /**
+     * ---------------------------------------------------------------------
+     * 长内容滚动
+     */
+    const bodyRef = (0, react_1.useRef)(null);
+    const bodyWrapRef = (0, react_1.useRef)(null);
+    const onScroll = () => {
+        const el = bodyRef.current;
+        el.dataset.bordered = (el.scrollHeight > el.clientHeight && el.scrollTop > 0).toString();
+    };
+    (0, react_1.useEffect)(() => {
+        if (innerOpen.current) {
+            const resizeObserver = new ResizeObserver(onScroll);
+            resizeObserver.observe(bodyWrapRef.current);
+            return () => {
+                resizeObserver.disconnect();
+            };
+        }
+        return;
+    }, [innerOpen.current]);
+    return ((0, jsx_runtime_1.jsx)(overlayBase_1.OverlayBase, { ...props, ref: ref, css: (0, drawer_style_1.useStyle)({ size: typeof size === 'object' ? size : { xs: size } }), className: (0, utils_1.classnames)(drawer_style_1.classes.root, props.className), open: innerOpen.current, onMaskClick: onMaskClick, "data-placement": placement, children: (0, jsx_runtime_1.jsx)(transitionBase_1.Slide, { direction: placementToDirection[placement], ...slideProps, in: innerOpen.current, className: (0, utils_1.classnames)(drawer_style_1.classes.drawer, slideProps?.className), children: (0, jsx_runtime_1.jsxs)("div", { className: drawer_style_1.classes.drawerWrap, children: [!!(title || showClose) &&
+                        (0, jsx_runtime_1.jsxs)("div", { className: drawer_style_1.classes.titleRow, children: [(0, jsx_runtime_1.jsx)("div", { className: drawer_style_1.classes.title, children: title }), showClose &&
+                                    (0, jsx_runtime_1.jsx)(button_1.Button, { className: drawer_style_1.classes.close, shape: "circular", variant: "text", color: "text", onClick: closeHandler, children: (0, jsx_runtime_1.jsx)(icons_1.DoubleRightOutlined, { rotate: {
+                                                left: 180,
+                                                right: 0,
+                                                top: -90,
+                                                bottom: 90
+                                            }[placement] }) })] }), (0, jsx_runtime_1.jsx)("div", { ref: bodyRef, className: drawer_style_1.classes.body, onScroll: onScroll, children: (0, jsx_runtime_1.jsx)("div", { ref: bodyWrapRef, className: drawer_style_1.classes.bodyWrap, children: props.children }) })] }) }) }));
+});

package/dist/cjs/components/drawer/drawer.style.d.ts

@@ -0,0 +1,15 @@
+import { ResponsiveValue } from '../../../types';
+export declare const classes: {
+    body: string;
+    title: string;
+    titleRow: string;
+    close: string;
+    bodyWrap: string;
+    drawer: string;
+    drawerWrap: string;
+} & {
+    root: string;
+};
+export declare function useStyle({ size }: {
+    size: ResponsiveValue<string | number>;
+}): import("@emotion/react").SerializedStyles;

package/dist/cjs/components/drawer/drawer.style.js

@@ -0,0 +1,124 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.classes = void 0;
+exports.useStyle = useStyle;
+const react_1 = require("@emotion/react");
+const utils_1 = require("../../utils");
+exports.classes = (0, utils_1.defineClasses)('drawer', [
+    'drawer',
+    'drawerWrap',
+    'titleRow',
+    'title',
+    'close',
+    'body',
+    'bodyWrap'
+]);
+function useStyle({ size }) {
+    const variables = (0, utils_1.responsiveVariables)(k => {
+        let _size = size[k];
+        if (typeof _size === 'undefined') {
+            return '';
+        }
+        if (typeof _size === 'number') {
+            _size = _size + 'px';
+        }
+        return `--drawer-size: ${_size};`;
+    });
+    return (0, utils_1.useCss)(({ spacing, background, boxShadow, borderRadius, divider }) => {
+        return (0, react_1.css) `
+            ${variables}
+
+            .${exports.classes.drawer} {
+                position: absolute;
+                padding: ${spacing[2]}px;
+            }
+        
+            &[data-placement=top] {
+                .${exports.classes.drawer} {
+                    height: var(--drawer-size);
+                    transform-origin: top;
+                    inset: 0 0 auto;
+                }
+            }
+        
+            &[data-placement=bottom] {
+                .${exports.classes.drawer} {
+                    height: var(--drawer-size);
+                    transform-origin: bottom;
+                    inset: auto 0 0;
+                }
+            }
+        
+            &[data-placement=left] {
+                .${exports.classes.drawer} {
+                    width: var(--drawer-size);
+                    transform-origin: left;
+                    inset: 0 auto 0 0;
+                }
+            }
+        
+            &[data-placement=right] {
+                .${exports.classes.drawer} {
+                    width: var(--drawer-size);
+                    transform-origin: right;
+                    inset: 0 0 0 auto;
+                }
+            }
+
+            .${exports.classes.drawerWrap} {
+                width: 100%;
+                height: 100%;
+                display: flex;
+                flex-direction: column;
+                background-color: ${background.card};
+                box-shadow: ${boxShadow[1]};
+                border-radius: ${borderRadius}px;
+            }
+        
+            .${exports.classes.titleRow} {
+                font-size: ${16 / 14}em;
+                font-weight: bold;
+                display: flex;
+                align-items: center;
+                padding: 0 ${spacing[2]}px;
+        
+                .${exports.classes.title} {
+                    flex: 1;
+                    padding: ${spacing[5]}px ${spacing[6]}px;
+                }
+        
+                .${exports.classes.close} {
+                    margin: ${spacing[3]}px;
+                }
+
+                & + .${exports.classes.body} {
+                    padding-top: 0;
+                }
+            }
+
+            &[data-placement=right] {
+                \.${exports.classes.title}:has(+ .${exports.classes.close}) {
+                    padding-left: 0;
+                }
+            }
+        
+            &[data-placement=right] {
+                .${exports.classes.titleRow} {
+                    flex-direction: row-reverse;
+                }
+            }
+        
+            .${exports.classes.body} {
+                flex: 1;
+                overflow: auto;
+                padding: ${spacing[6]}px ${spacing[8]}px;
+                border-top: 1px solid transparent;
+                border-bottom: 1px solid transparent;
+
+                &[data-bordered=true] {
+                    border-top-color: ${divider};
+                }
+            }
+        `;
+    }, [variables]);
+}

package/dist/cjs/components/drawer/index.d.ts

@@ -0,0 +1 @@
+export * from './drawer';

package/dist/cjs/components/drawer/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./drawer"), exports);

package/dist/cjs/components/dropdown/dropdown.d.ts

@@ -0,0 +1,5 @@
+import { PopperProps } from '../popper';
+export interface DropdownProps extends PopperProps {
+    showArrow?: boolean;
+}
+export declare const Dropdown: import("react").ForwardRefExoticComponent<Omit<DropdownProps, "ref"> & import("react").RefAttributes<unknown>>;

package/dist/cjs/components/dropdown/dropdown.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Dropdown = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const popper_1 = require("../popper");
+const dropdown_style_1 = require("./dropdown.style");
+const utils_1 = require("../../utils");
+const app_1 = require("../app");
+exports.Dropdown = (0, react_1.forwardRef)(({ showArrow, ...props }, ref) => {
+    const { spacing } = (0, app_1.useTheme)();
+    props.autoClose ??= true;
+    props.trigger ??= 'click';
+    props.placement ??= 'bottom';
+    props.offset ??= showArrow ? spacing[3] : spacing[2];
+    return ((0, jsx_runtime_1.jsx)(popper_1.Popper, { ...props, ref: ref, css: dropdown_style_1.style, className: (0, utils_1.classnames)(dropdown_style_1.classes.root, props.className), content: (0, jsx_runtime_1.jsx)("div", { className: dropdown_style_1.classes.content, "data-show-arrow": showArrow, children: props.content }) }));
+});