@canlooks/can-ui 0.0.1

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

@@ -0,0 +1,33 @@
+import { ReactElement, ReactNode } from 'react';
+import { DIVProps, Id } from '../../../types';
+import { MenuOptionType } from '../optionsBase';
+import { ButtonProps } from '../button';
+export interface TransferProps<O extends MenuOptionType<V>, V extends Id = Id> extends Omit<DIVProps, 'defaultValue' | 'value' | 'onChange'> {
+    options?: O[];
+    /** @default "value" */
+    primaryKey?: keyof O;
+    fullWidth?: boolean;
+    /** @default true */
+    allowSelectAll?: boolean;
+    /** @default true */
+    showHeader?: boolean;
+    /** @default "选项" */
+    leftTitle?: ReactNode;
+    /** @default "已选" */
+    rightTitle?: ReactNode;
+    /** 自定义渲染按钮 */
+    renderButtons?(buttonProps: [ButtonProps, ButtonProps]): ReactNode;
+    defaultValue?: V[];
+    value?: V[];
+    onChange?(value: V[]): void;
+}
+type TransferContext<O extends MenuOptionType<V>, V extends Id = Id> = {
+    options?: O[];
+    primaryKey?: V;
+    value?: V[];
+    allowSelectAll?: boolean;
+    showHeader?: boolean;
+};
+export declare function useTransferContext<O extends MenuOptionType<V>, V extends Id = Id>(): Required<TransferContext<O, V>>;
+export declare const Transfer: <O extends MenuOptionType<V>, V extends Id = Id>(props: TransferProps<O, V>) => ReactElement;
+export {};

package/dist/cjs/components/transfer/transfer.js

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Transfer = void 0;
+exports.useTransferContext = useTransferContext;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const transfer_style_1 = require("./transfer.style");
+const utils_1 = require("../../utils");
+const button_1 = require("../button");
+const icons_1 = require("@ant-design/icons");
+const transferPanel_1 = require("./transferPanel");
+const transferContext = (0, react_1.createContext)({});
+function useTransferContext() {
+    const { options = [], primaryKey = 'value', value = [], allowSelectAll = true, showHeader = true } = (0, react_1.useContext)(transferContext);
+    return { options, primaryKey, value, allowSelectAll, showHeader };
+}
+exports.Transfer = (0, react_1.memo)((0, react_1.forwardRef)(({ options = [], primaryKey = 'value', fullWidth, allowSelectAll = true, showHeader = true, leftTitle = '选项', rightTitle = '已选', renderButtons, defaultValue = [], value, onChange, ...props }, ref) => {
+    const [innerValue, setInnerValue] = (0, utils_1.useControlled)(defaultValue, value, onChange);
+    const [leftSelected, setLeftSelected] = (0, react_1.useState)([]);
+    const [rightSelected, setRightSelected] = (0, react_1.useState)([]);
+    const toRight = () => {
+        setInnerValue([...innerValue.current, ...leftSelected]);
+        setLeftSelected([]);
+    };
+    const toLeft = () => {
+        const rightSelectedSet = new Set(rightSelected);
+        setInnerValue(innerValue.current.filter(v => !rightSelectedSet.has(v)));
+        setRightSelected([]);
+    };
+    const renderedButtons = (() => {
+        const buttonsProps = [
+            {
+                disabled: !leftSelected.length,
+                onClick: toRight,
+                children: (0, jsx_runtime_1.jsx)(icons_1.RightOutlined, {})
+            },
+            {
+                disabled: !rightSelected.length,
+                onClick: toLeft,
+                children: (0, jsx_runtime_1.jsx)(icons_1.LeftOutlined, {})
+            }
+        ];
+        if (renderButtons) {
+            return renderButtons(buttonsProps);
+        }
+        return [
+            (0, jsx_runtime_1.jsx)(button_1.Button, { ...buttonsProps[0] }, "toRight"),
+            (0, jsx_runtime_1.jsx)(button_1.Button, { ...buttonsProps[1] }, "toLeft")
+        ];
+    })();
+    return ((0, jsx_runtime_1.jsx)("div", { ...props, ref: ref, css: transfer_style_1.style, className: (0, utils_1.classnames)(transfer_style_1.classes.root, props.className), "data-full-width": fullWidth, children: (0, jsx_runtime_1.jsxs)(transferContext.Provider, { value: (0, react_1.useMemo)(() => ({
+                options, value: innerValue.current, allowSelectAll, showHeader
+            }), [
+                options, innerValue.current, allowSelectAll, showHeader
+            ]), children: [(0, jsx_runtime_1.jsx)(transferPanel_1.TransferPanel, { title: leftTitle, selectedValue: leftSelected, onChange: setLeftSelected }), !!renderedButtons &&
+                    (0, jsx_runtime_1.jsx)("div", { className: transfer_style_1.classes.buttons, children: renderedButtons }), (0, jsx_runtime_1.jsx)(transferPanel_1.TransferPanel, { type: "right", title: rightTitle, selectedValue: rightSelected, onChange: setRightSelected })] }) }));
+}));

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

@@ -0,0 +1,13 @@
+export declare const classes: {
+    info: string;
+    title: string;
+    checkbox: string;
+    list: string;
+    header: string;
+    count: string;
+    buttons: string;
+    panel: string;
+} & {
+    root: string;
+};
+export declare const style: () => import("@emotion/react").SerializedStyles;

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

@@ -0,0 +1,74 @@
+"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");
+const menuItem_style_1 = require("../menuItem/menuItem.style");
+exports.classes = (0, utils_1.defineClasses)('transfer', [
+    'panel',
+    'header',
+    'checkbox',
+    'info',
+    'title',
+    'count',
+    'list',
+    'buttons',
+]);
+exports.style = (0, utils_1.defineCss)(({ spacing, background, divider, borderRadius, text }) => (0, react_1.css) `
+    display: inline-flex;
+    gap: ${spacing[3]}px;
+
+    .${exports.classes.panel} {
+        width: 180px;
+        background-color: ${background.card};
+        border: 1px solid ${divider};
+        border-radius: ${borderRadius}px;
+        display: flex;
+        flex-direction: column;
+
+        .${exports.classes.header} {
+            display: flex;
+            gap: ${spacing[2]}px;
+            align-items: center;
+            padding: 10px 16px;
+            border-bottom: 1px solid ${divider};
+
+            .${exports.classes.checkbox} {
+                display: flex;
+            }
+
+            .${exports.classes.title} {
+                flex: 1
+            }
+
+            .${exports.classes.count} {
+                color: ${text.secondary};
+            }
+        }
+
+        .${exports.classes.list} {
+            flex: 1;
+            padding: ${menuItem_style_1.menuListPadding}px;
+
+            > * {
+                width: 100%;
+                height: 100%;
+            }
+        }
+    }
+
+    &[data-full-width=true] {
+        width: 100%;
+
+        .${exports.classes.panel} {
+            flex: 1;
+        }
+    }
+
+    .${exports.classes.buttons} {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        gap: ${spacing[3]}px;
+    }
+`);

package/dist/cjs/components/transfer/transferPanel.d.ts

@@ -0,0 +1,16 @@
+import { ReactElement, ReactNode } from 'react';
+import { DIVProps, Id } from '../../../types';
+import { MenuOptionType, OptionsBaseProps } from '../optionsBase';
+type ListProps<O extends MenuOptionType<V>, V extends Id = Id> = Pick<OptionsBaseProps<O, V>, 'options' | 'selectedValue' | 'primaryKey' | 'onToggleSelected'>;
+export interface TransferPanelProps<O extends MenuOptionType<V>, V extends Id = Id> extends Omit<DIVProps, 'title' | 'onChange'> {
+    title?: ReactNode;
+    type?: 'left' | 'right';
+    selectedValue?: V[];
+    onChange?(selectedValue: V[]): void;
+    /** 自定义渲染列表 */
+    renderList?(listProps: ListProps<O, V>): ReactNode;
+    /** 自定义渲染每一项，仅未指定renderList时生效 */
+    renderItem?(item: O, index: number, listProps: ListProps<O, V>): ReactNode;
+}
+export declare const TransferPanel: <O extends MenuOptionType<V>, V extends Id = Id>(props: TransferPanelProps<O, V>) => ReactElement;
+export {};

package/dist/cjs/components/transfer/transferPanel.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TransferPanel = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const transfer_style_1 = require("./transfer.style");
+const checkbox_1 = require("../checkbox");
+const transfer_1 = require("./transfer");
+const optionsBase_1 = require("../optionsBase");
+exports.TransferPanel = (0, react_1.memo)((0, react_1.forwardRef)(({ title, type = 'left', selectedValue = [], onChange, renderList, renderItem, ...props }, ref) => {
+    const { options, primaryKey, value, allowSelectAll, showHeader } = (0, transfer_1.useTransferContext)();
+    const selfOptions = (0, react_1.useMemo)(() => {
+        const valueSet = new Set(value);
+        return options.filter(o => {
+            const has = valueSet.has(o[primaryKey]);
+            return type === 'left' ? !has : has;
+        });
+    }, [value, options, primaryKey, type]);
+    const onToggleSelected = (value) => {
+        onChange?.(selectedValue.includes(value)
+            ? selectedValue.filter(v => v !== value)
+            : [...selectedValue, value]);
+    };
+    const toggleAllHandler = () => {
+        onChange?.(selfOptions.length && selfOptions.length === selectedValue.length
+            ? []
+            : selfOptions.map(v => v[primaryKey]));
+    };
+    const renderedList = (() => {
+        const listProps = {
+            options: selfOptions,
+            selectedValue,
+            primaryKey,
+            onToggleSelected
+        };
+        if (renderList) {
+            return renderList(listProps);
+        }
+        if (renderItem) {
+            return selfOptions.map((item, index) => renderItem(item, index, listProps));
+        }
+        return (0, jsx_runtime_1.jsx)(optionsBase_1.OptionsBase, { ...listProps, showCheckbox: true });
+    })();
+    return ((0, jsx_runtime_1.jsxs)("div", { ...props, ref: ref, className: transfer_style_1.classes.panel, children: [showHeader &&
+                (0, jsx_runtime_1.jsxs)("div", { className: transfer_style_1.classes.header, children: [allowSelectAll &&
+                            (0, jsx_runtime_1.jsx)("div", { className: transfer_style_1.classes.checkbox, children: (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { disabled: !selfOptions.length, checked: !!selfOptions.length && selfOptions.length === selectedValue.length, indeterminate: !!selectedValue.length && selectedValue.length < selfOptions.length, onChange: toggleAllHandler }) }), (0, jsx_runtime_1.jsx)("div", { className: transfer_style_1.classes.title, children: title }), (0, jsx_runtime_1.jsxs)("small", { className: transfer_style_1.classes.count, children: [selectedValue.length, " / ", selfOptions.length] })] }), !!renderedList &&
+                (0, jsx_runtime_1.jsx)("div", { className: transfer_style_1.classes.list, children: renderedList })] }));
+}));

package/dist/cjs/components/transitionBase/collapse.d.ts

@@ -0,0 +1,18 @@
+import { ReactElement } from 'react';
+import { TransitionBaseProps } from './transitionBase';
+export interface CollapseProps<T extends HTMLElement = HTMLElement> extends TransitionBaseProps<T> {
+    /**
+     * 动画实现的方式
+     * @enum {"sweeping"}: 通过修改width或height实现
+     * @enum {"scaling"}: 通过transform实现
+     * @default "sweeping"
+     */
+    transitionType?: 'sweeping' | 'scaling';
+    /**
+     * 设定折叠后的尺寸
+     * {@link transitionType}为"sweeping"时有效
+     * @default 0
+     */
+    collapsedSize?: number | (() => number);
+}
+export declare const Collapse: <T extends HTMLElement>(props: CollapseProps<T>) => ReactElement;

package/dist/cjs/components/transitionBase/collapse.js

@@ -0,0 +1,56 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Collapse = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const transitionBase_1 = require("./transitionBase");
+const utils_1 = require("../../utils");
+exports.Collapse = (0, react_1.forwardRef)(({ transitionType = 'sweeping', ...props }, ref) => {
+    const Component = transitionType === 'sweeping' ? Sweeping : transitionBase_1.TransitionBase;
+    return ((0, jsx_runtime_1.jsx)(Component, { ...props, ref: ref, _mode: transitionType === 'sweeping' ? '_sweeping' : 'collapse' }));
+});
+const Sweeping = (0, react_1.forwardRef)(({ in: _in = false, appear = true, orientation = 'vertical', collapsedSize = 0, ...props }, ref) => {
+    const innerRef = (0, react_1.useRef)(null);
+    const styleProperty = orientation === 'vertical' ? 'height' : 'width';
+    const sizeProperty = orientation === 'vertical' ? 'clientHeight' : 'clientWidth';
+    const getCollapsedSize = () => {
+        return typeof collapsedSize === 'function' ? collapsedSize() : collapsedSize;
+    };
+    const [size, setSize] = (0, react_1.useState)(_in && !appear ? void 0 : getCollapsedSize());
+    const shouldEntering = (0, react_1.useRef)(appear);
+    (0, react_1.useEffect)(() => {
+        if (!innerRef.current) {
+            return;
+        }
+        const el = innerRef.current;
+        if (!_in) {
+            el.style[styleProperty] = el[sizeProperty] + 'px';
+            setSize(getCollapsedSize());
+        }
+        else if (shouldEntering.current) {
+            const startSize = el[sizeProperty];
+            el.style.transition = 'none';
+            el.style[styleProperty] = '';
+            const endSize = el[sizeProperty];
+            el.style[styleProperty] = startSize + 'px';
+            requestAnimationFrame(() => {
+                el.style.transition = '';
+                setSize(endSize);
+            });
+        }
+        shouldEntering.current = true;
+    }, [_in]);
+    const onEntered = (a) => {
+        props.onEntered?.(a);
+        setSize(void 0);
+    };
+    const onExited = () => {
+        props.onExited?.();
+        setSize(getCollapsedSize());
+    };
+    return ((0, jsx_runtime_1.jsx)(transitionBase_1.TransitionBase, { ...props, in: _in, ref: (0, utils_1.cloneRef)(ref, innerRef), style: {
+            [styleProperty]: size,
+            opacity: size === 0 ? 0 : 1,
+            ...props.style
+        }, onEntered: onEntered, onExited: onExited }));
+});

package/dist/cjs/components/transitionBase/fade.d.ts

@@ -0,0 +1,4 @@
+import { ReactElement } from 'react';
+import { TransitionBaseProps } from './transitionBase';
+export type FadeProps<T extends HTMLElement = HTMLElement> = TransitionBaseProps<T>;
+export declare const Fade: <T extends HTMLElement>(props: FadeProps<T>) => ReactElement;

package/dist/cjs/components/transitionBase/fade.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Fade = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const transitionBase_1 = require("./transitionBase");
+exports.Fade = (0, react_1.forwardRef)((props, ref) => {
+    return ((0, jsx_runtime_1.jsx)(transitionBase_1.TransitionBase, { ...props, ref: ref, _mode: "fade" }));
+});

package/dist/cjs/components/transitionBase/grow.d.ts

@@ -0,0 +1,4 @@
+import { ReactElement } from 'react';
+import { TransitionBaseProps } from './transitionBase';
+export type GrowProps<T extends HTMLElement = HTMLElement> = TransitionBaseProps<T>;
+export declare const Grow: <T extends HTMLElement>(props: GrowProps<T>) => ReactElement;

package/dist/cjs/components/transitionBase/grow.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Grow = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const transitionBase_1 = require("./transitionBase");
+exports.Grow = (0, react_1.forwardRef)((props, ref) => {
+    return ((0, jsx_runtime_1.jsx)(transitionBase_1.TransitionBase, { ...props, ref: ref, _mode: "grow" }));
+});

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

@@ -0,0 +1,5 @@
+export * from './collapse';
+export * from './fade';
+export * from './grow';
+export * from './slide';
+export * from './transitionBase';

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

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./collapse"), exports);
+tslib_1.__exportStar(require("./fade"), exports);
+tslib_1.__exportStar(require("./grow"), exports);
+tslib_1.__exportStar(require("./slide"), exports);
+tslib_1.__exportStar(require("./transitionBase"), exports);

package/dist/cjs/components/transitionBase/slide.d.ts

@@ -0,0 +1,4 @@
+import { ReactElement } from 'react';
+import { TransitionBaseProps } from './transitionBase';
+export type SlideProps<T extends HTMLElement = HTMLElement> = TransitionBaseProps<T>;
+export declare const Slide: <T extends HTMLElement>(props: SlideProps<T>) => ReactElement;

package/dist/cjs/components/transitionBase/slide.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Slide = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const transitionBase_1 = require("./transitionBase");
+exports.Slide = (0, react_1.forwardRef)((props, ref) => {
+    return ((0, jsx_runtime_1.jsx)(transitionBase_1.TransitionBase, { ...props, ref: ref, _mode: "slide" }));
+});

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

@@ -0,0 +1,14 @@
+import { ReactElement } from 'react';
+import { TimeoutProps } from 'react-transition-group/Transition';
+export interface TransitionBaseProps<T extends HTMLElement = HTMLElement> extends Partial<TimeoutProps<T>> {
+    component?: any;
+    /** {@link _mode}"collapse"时生效，展开与收起的方向 @default "vertical" */
+    orientation?: 'vertical' | 'horizontal';
+    /** {@link _mode}"slide"时生效，滑入的方向 */
+    direction?: 'left' | 'right' | 'up' | 'down';
+    /** {@link _mode}"slide"时生效，滑入前的偏移量 */
+    offset?: string | number;
+    /** @private 内部使用，以下预设的过渡组件均继承该组件 */
+    _mode?: '_sweeping' | 'collapse' | 'grow' | 'fade' | 'slide';
+}
+export declare const TransitionBase: <T extends HTMLElement>(props: TransitionBaseProps<T>) => ReactElement;

package/dist/cjs/components/transitionBase/transitionBase.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TransitionBase = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const react_transition_group_1 = require("react-transition-group");
+const transitionBase_style_1 = require("./transitionBase.style");
+const utils_1 = require("../../utils");
+exports.TransitionBase = (0, react_1.forwardRef)(({ component: Component = 'div', orientation = 'vertical', direction = 'down', offset = '100%', timeout = 300, appear = true, _mode, ...props }, ref) => {
+    const cssArr = [
+        (0, transitionBase_style_1.useTransitionBaseStyle)({ timeout })
+    ];
+    if (typeof _mode !== 'undefined') {
+        if (_mode === '_sweeping') {
+            cssArr.push(transitionBase_style_1.sweepingStyle);
+        }
+        else {
+            cssArr.push(transitionBase_style_1.fadeStyle);
+            if (_mode === 'collapse' || _mode === 'grow') {
+                cssArr.push((0, transitionBase_style_1.useGrowAndCollapseStyle)({ orientation, _mode }));
+            }
+            else if (_mode === 'slide') {
+                cssArr.push((0, transitionBase_style_1.useSlideStyle)({ direction, offset }));
+            }
+        }
+    }
+    const innerRef = (0, react_1.useRef)(null);
+    return ((0, jsx_runtime_1.jsx)(react_transition_group_1.CSSTransition, { ...props, nodeRef: innerRef, className: (0, utils_1.classnames)(transitionBase_style_1.classes.root, props.className), timeout: timeout, appear: appear, children: (0, jsx_runtime_1.jsx)(Component, { ref: (0, utils_1.cloneRef)(ref, innerRef), css: cssArr, children: props.children }) }));
+});

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

@@ -0,0 +1,9 @@
+import { TransitionBaseProps } from './transitionBase';
+export declare const classes: {
+    root: string;
+};
+export declare function useTransitionBaseStyle({ timeout }: Required<Pick<TransitionBaseProps<any>, 'timeout'>>): import("@emotion/react").SerializedStyles;
+export declare const fadeStyle: () => import("@emotion/react").SerializedStyles;
+export declare const sweepingStyle: () => import("@emotion/react").SerializedStyles;
+export declare function useGrowAndCollapseStyle({ orientation, _mode }: Required<Pick<TransitionBaseProps<any>, 'orientation' | '_mode'>>): import("@emotion/react").SerializedStyles;
+export declare function useSlideStyle({ direction, offset }: Required<Pick<TransitionBaseProps<any>, 'direction' | 'offset'>>): import("@emotion/react").SerializedStyles;

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

@@ -0,0 +1,144 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.sweepingStyle = exports.fadeStyle = exports.classes = void 0;
+exports.useTransitionBaseStyle = useTransitionBaseStyle;
+exports.useGrowAndCollapseStyle = useGrowAndCollapseStyle;
+exports.useSlideStyle = useSlideStyle;
+const react_1 = require("@emotion/react");
+const utils_1 = require("../../utils");
+exports.classes = (0, utils_1.defineClasses)('transition-base');
+function useTransitionBaseStyle({ timeout }) {
+    const timeoutIsNumber = typeof timeout === 'number';
+    return (0, utils_1.useCss)(() => (0, react_1.css) `
+        ${timeoutIsNumber ? `transition-duration: ${timeout}ms;` : ''}
+
+        &.appear-active {
+            ${!timeoutIsNumber ? `transition-duration: ${timeout.appear}ms;` : ''}
+        }
+
+        &.enter-active {
+            ${!timeoutIsNumber ? `transition-duration: ${timeout.enter}ms;` : ''}
+        }
+
+        &.exit-active {
+            ${!timeoutIsNumber ? `transition-duration: ${timeout.exit}ms;` : ''}
+        }
+    `, [timeout]);
+}
+exports.fadeStyle = (0, utils_1.defineCss)(({ easing }) => (0, react_1.css) `
+    transition-property: opacity;
+    transition-timing-function: ${easing.easeOut};
+
+    &,
+    &.appear,
+    &.enter {
+        opacity: 0;
+    }
+
+    &.appear-active,
+    &.enter-active,
+    &.enter-done,
+    &.exit {
+        opacity: 1;
+    }
+
+    &.exit-active,
+    &.exit-done {
+        opacity: 0;
+    }
+`);
+exports.sweepingStyle = (0, utils_1.defineCss)(({ easing }) => (0, react_1.css) `
+    overflow: hidden;
+    transition-property: opacity, width, height;
+
+    &.appear-active,
+    &.enter-active {
+        transition-timing-function: ${easing.easeOut}, ${easing.bounce}, ${easing.bounce};
+    }
+
+    &.exit-active {
+        transition-timing-function: ${easing.easeOut};
+    }
+`);
+function useGrowAndCollapseStyle({ orientation, _mode }) {
+    return (0, utils_1.useCss)(({ easing }) => {
+        let transformMethod = _mode === 'grow'
+            ? 'scale'
+            : orientation === 'vertical'
+                ? 'scaleY'
+                : 'scaleX';
+        return (0, react_1.css) `
+            transition-property: opacity, transform;
+            ${_mode === 'collapse' ? `transform-origin: ${orientation === 'vertical' ? 'top' : 'left'};` : ''}
+            
+            &,
+            &.appear,
+            &.enter {
+                transform: ${transformMethod}(0);
+            }
+        
+            &.appear-active,
+            &.enter-active,
+            &.enter-done,
+            &.exit {
+                transform: scale(1);
+            }
+        
+            &.exit-active,
+            &.exit-done {
+                transform: ${transformMethod}(0);
+            }
+        
+            &.appear-active,
+            &.enter-active {
+                transition-timing-function: ${easing.easeOut}, ${easing.bounce};
+            }
+        
+            &.exit-active {
+                transition-timing-function: ${easing.easeOut};
+            }
+        `;
+    }, [orientation, _mode]);
+}
+function useSlideStyle({ direction, offset }) {
+    return (0, utils_1.useCss)(({ easing }) => {
+        const transformMethod = direction === 'up' || direction === 'down' ? 'translateY' : 'translateX';
+        let offsetValue = typeof offset === 'number' ? `${offset}px` : offset;
+        if (direction === 'down' || direction === 'right') {
+            offsetValue = '-' + offsetValue;
+        }
+        return (0, react_1.css) `
+            transition-property: opacity, transform;
+            
+            &,
+            &.appear,
+            &.enter {
+                pointer-events: none;
+                transform: ${transformMethod}(${offsetValue});
+            }
+        
+            &.appear-active,
+            &.enter-active,
+            &.enter-done,
+            &.exit {
+                pointer-events: inherit;
+                transform: translate(0);
+            }
+        
+            &.exit-active,
+            &.exit-done {
+                pointer-events: none;
+                transform: ${transformMethod}(${offsetValue});
+            }
+        
+            &.appear-active,
+            &.enter-active {
+                transition-timing-function: ${easing.easeOut}, ${easing.bounce};
+            }
+        
+            &.exit-active {
+                transition-timing-function: ${easing.easeOut};
+            }
+        `;
+    }, [direction, offset]);
+}

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

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

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

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

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

@@ -0,0 +1,30 @@
+import { CSSProperties } from 'react';
+import { DIVProps } from '../../../types';
+export interface TransportStyleProps extends DIVProps {
+    /** 交叉轴对齐方式 */
+    alignItems?: CSSProperties['alignItems'];
+    /** 平行轴对齐方式 */
+    justifyContent?: CSSProperties['justifyContent'];
+    alignSelf?: CSSProperties['alignSelf'];
+    justifySelf?: CSSProperties['justifySelf'];
+    flex?: CSSProperties['flex'];
+    /** 传递其他常用样式 */
+    width?: CSSProperties['width'];
+    minWidth?: CSSProperties['minWidth'];
+    maxWidth?: CSSProperties['maxWidth'];
+    height?: CSSProperties['height'];
+    minHeight?: CSSProperties['minHeight'];
+    maxHeight?: CSSProperties['maxHeight'];
+    lineHeight?: CSSProperties['lineHeight'];
+    padding?: CSSProperties['padding'];
+    paddingTop?: CSSProperties['paddingTop'];
+    paddingRight?: CSSProperties['paddingRight'];
+    paddingBottom?: CSSProperties['paddingBottom'];
+    paddingLeft?: CSSProperties['paddingLeft'];
+    margin?: CSSProperties['margin'];
+    marginTop?: CSSProperties['marginTop'];
+    marginRight?: CSSProperties['marginRight'];
+    marginBottom?: CSSProperties['marginBottom'];
+    marginLeft?: CSSProperties['marginLeft'];
+}
+export declare const TransportStyle: import("react").ForwardRefExoticComponent<Omit<TransportStyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/cjs/components/transportStyle/transportStyle.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TransportStyle = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+exports.TransportStyle = (0, react_1.forwardRef)(({ alignItems, justifyContent, alignSelf, justifySelf, flex, width, minWidth, maxWidth, height, minHeight, maxHeight, lineHeight, padding, paddingTop, paddingRight, paddingBottom, paddingLeft, margin, marginTop, marginRight, marginBottom, marginLeft, ...props }, ref) => {
+    return ((0, jsx_runtime_1.jsx)("div", { ...props, ref: ref, style: {
+            alignItems, justifyContent, alignSelf, justifySelf, flex,
+            width, minWidth, maxWidth, height, minHeight, maxHeight, lineHeight,
+            padding, paddingTop, paddingRight, paddingBottom, paddingLeft,
+            margin, marginTop, marginRight, marginBottom, marginLeft,
+            ...props.style
+        } }));
+});

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

@@ -0,0 +1,2 @@
+export * from './tree';
+export * from './treeNode';