@canlooks/can-ui 0.0.1

package/dist/cjs/components/slidableActions/slidableActionsAction.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SlidableActionsAction = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const button_1 = require("../button");
+const slidableActions_style_1 = require("./slidableActions.style");
+const utils_1 = require("../../utils");
+const app_1 = require("../app");
+const slidableActions_1 = require("./slidableActions");
+exports.SlidableActionsAction = (0, react_1.memo)((0, react_1.forwardRef)(({ color = 'default', label, icon, buttonProps, buttonRef, _index, ...props }, ref) => {
+    const { actionsContainer, translate, maxDistance } = (0, slidableActions_1.useSlidableActionsContext)();
+    const innerButtonRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        actionsContainer[_index] = innerButtonRef.current;
+        return () => {
+            actionsContainer[_index] = null;
+        };
+    });
+    const currentTranslate = (0, react_1.useMemo)(() => {
+        if (!maxDistance) {
+            return 0;
+        }
+        const prevWidth = actionsContainer.slice(0, _index).reduce((prevWidth, currentEl) => {
+            return currentEl ? prevWidth + currentEl.offsetWidth : prevWidth;
+        }, 0);
+        return (1 - prevWidth / maxDistance) * translate;
+    }, [translate, maxDistance, _index]);
+    const theme = (0, app_1.useTheme)();
+    const backgroundColor = (0, react_1.useMemo)(() => {
+        return color === 'default'
+            ? '#aaaaaa'
+            : (0, utils_1.colorTransfer)(color, theme);
+    }, [color, theme]);
+    return ((0, jsx_runtime_1.jsx)("div", { ...props, ref: ref, className: slidableActions_style_1.classes.actionItem, style: {
+            translate: `${currentTranslate}px 0`,
+            backgroundColor
+        }, children: (0, jsx_runtime_1.jsx)(button_1.Button, { ref: (0, utils_1.cloneRef)(buttonRef, innerButtonRef), ...buttonProps, className: (0, utils_1.classnames)(slidableActions_style_1.classes.actionItemWrap, buttonProps?.className), prefix: icon, variant: "plain", color: "inverse", children: label }) }));
+}));

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

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

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

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

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

@@ -0,0 +1,62 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { DraggableOptions } from '../../utils';
+import { ColorPropsValue, DIVProps } from '../../../types';
+import { TooltipProps } from '../tooltip';
+export interface MarkItem extends DIVProps {
+    label?: ReactNode;
+    /**
+     * label的位置
+     * {@link SliderBaseProps.orientation}为"horizontal"时，@default "bottom"
+     * {@link SliderBaseProps.orientation}为"vertical"时，@default "right"
+     */
+    labelPlacement?: 'top' | 'bottom' | 'left' | 'right';
+    value: number;
+}
+interface SliderBaseProps extends Omit<DIVProps, 'defaultValue' | 'onChange' | 'prefix'> {
+    color?: ColorPropsValue;
+    orientation?: 'horizontal' | 'vertical';
+    /** variant只改变滑块的样式 */
+    variant?: 'filled' | 'outlined';
+    /** inset为true时，滑块整体会嵌入轨道，两侧都无法滑出轨道；否则会以滑块中心点为参考，两侧可能会超出轨道。@default false */
+    inset?: boolean;
+    /** 轨道 */
+    railSize?: number;
+    railProps?: DIVProps;
+    renderRail?(value: number, railProps: HTMLAttributes<HTMLDivElement>): ReactNode;
+    renderRail?(value: [number, number], railProps: HTMLAttributes<HTMLDivElement>): ReactNode;
+    /** 滑块 */
+    handleSize?: number;
+    handleProps?: JSX.IntrinsicElements['button'];
+    /** 禁用默认的滑块外边框 */
+    disableHandleOutline?: boolean;
+    /** 渲染滑块，range模式时，改方法会触发两次 */
+    renderHandle?(value: number, handleProps: HTMLAttributes<HTMLElement>): ReactNode;
+    tooltipProps?: TooltipProps;
+    min?: number;
+    max?: number;
+    /** 滑块拖动每格的值，为null时必须配合marks使用，滑块只能在marks上 */
+    step?: number | null;
+    marks?: MarkItem[];
+    /** mark中的标签与滑动轨道的距离，@default 6 */
+    markLabelOffset?: number;
+    markSize?: number;
+    disableTrack?: boolean;
+    draggableOptions?: DraggableOptions;
+}
+export interface SliderSingleProps extends SliderBaseProps {
+    defaultValue?: number;
+    value?: number;
+    onChange?(value: number): void;
+    prefix?: ReactNode | ((value: number) => ReactNode);
+    suffix?: ReactNode | ((value: number) => ReactNode);
+}
+export interface SliderRangeProps extends SliderBaseProps {
+    defaultValue?: [number, number];
+    value?: [number, number];
+    onChange?(value: [number, number]): void;
+    prefix?: ReactNode | ((value: [number, number]) => ReactNode);
+    suffix?: ReactNode | ((value: [number, number]) => ReactNode);
+}
+export type SliderProps = SliderSingleProps | SliderRangeProps;
+export declare const Slider: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<(Omit<SliderSingleProps, "ref"> | Omit<SliderRangeProps, "ref">) & import("react").RefAttributes<HTMLDivElement>>>;
+export {};

package/dist/cjs/components/slider/slider.js

@@ -0,0 +1,288 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Slider = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("@emotion/react");
+const react_2 = require("react");
+const utils_1 = require("../../utils");
+const slider_style_1 = require("./slider.style");
+const tooltip_1 = require("../tooltip");
+const app_1 = require("../app");
+exports.Slider = (0, react_2.memo)((0, react_2.forwardRef)(({ color = 'primary', orientation = 'horizontal', variant = 'filled', inset, railSize = inset ? 14 : 4, railProps, renderRail, handleSize = 14, handleProps, disableHandleOutline, renderHandle, tooltipProps, min = 0, max = 100, step = 1, marks, markLabelOffset, prefix, suffix, disableTrack, draggableOptions, defaultValue = min, value, onChange, ...props }, ref) => {
+    const { spacing } = (0, app_1.useTheme)();
+    markLabelOffset ??= inset ? spacing[1] : spacing[2];
+    const orderedMarks = (0, react_2.useMemo)(() => {
+        return marks ? [...marks].sort((a, b) => a.value - b.value) : void 0;
+    }, [marks]);
+    // 处理value，让滑块在合理的位置
+    const treatValue = (value) => {
+        const fn = (value) => {
+            value = Math.max(min, Math.min(max, value));
+            if (typeof step === 'number') {
+                // 算法：转成value，减去最小值，除以step，四舍五入，乘以step，加上最小值
+                return Math.round((value - min) / step) * step + min;
+            }
+            if (!marks?.length) {
+                return value;
+            }
+            // step为null时，滑块只能在mark上
+            if (value <= orderedMarks[0].value) {
+                return orderedMarks[0].value;
+            }
+            if (value >= orderedMarks[orderedMarks.length - 1].value) {
+                return orderedMarks[orderedMarks.length - 1].value;
+            }
+            const betweenIndex = orderedMarks.findIndex(mark => mark.value >= value);
+            if (value - orderedMarks[betweenIndex - 1].value < orderedMarks[betweenIndex].value - value) {
+                return orderedMarks[betweenIndex - 1].value;
+            }
+            return orderedMarks[betweenIndex].value;
+        };
+        return Array.isArray(value)
+            ? value.slice(0, 2).sort((a, b) => a - b).map(fn)
+            : fn(value);
+    };
+    const treatedDefaultValue = (0, react_2.useMemo)(() => {
+        return treatValue(defaultValue);
+    }, []);
+    const treatedValue = (0, react_2.useMemo)(() => {
+        return !(0, utils_1.isUnset)(value) ? treatValue(value) : void 0;
+    }, [value]);
+    const [innerValue, _setInnerValue] = (0, utils_1.useControlled)(treatedDefaultValue, treatedValue, onChange);
+    const setInnerValue = (value, index) => {
+        const newValue = treatValue(value);
+        if (Array.isArray(innerValue.current)) {
+            if (innerValue.current[index] !== newValue) {
+                innerValue.current[index] = index
+                    ? Math.max(innerValue.current[0], newValue)
+                    : Math.min(innerValue.current[1], newValue);
+                _setInnerValue([...innerValue.current]);
+            }
+        }
+        else {
+            innerValue.current !== newValue && _setInnerValue(newValue);
+        }
+    };
+    /**
+     * -----------------------------------------------------------------
+     * tooltip跟随滑块移动
+     */
+    const tooltipRefs = (0, react_2.useRef)([]);
+    (0, react_2.useEffect)(() => {
+        tooltipRefs.current[dragStartData.current?.handleIndex || 0]?.fit();
+    }, [innerValue.current]);
+    /**
+     * -----------------------------------------------------------------
+     * 百分比与数值的相互转换
+     */
+    const valueToPercent = (value) => {
+        return (value - min) / (max - min) * 100;
+    };
+    const percentToValue = (percent) => {
+        return (percent / 100) * (max - min) + min;
+    };
+    /**
+     * -----------------------------------------------------------------
+     * 拖拽
+     */
+    const railRef = (0, react_2.useRef)(null);
+    const handleRefs = (0, react_2.useRef)([]);
+    const dragStartData = (0, react_2.useRef)();
+    const draggableHandle = (0, utils_1.useDraggableHandle)({
+        ...draggableOptions,
+        onDragStart(e) {
+            draggableOptions?.onDragStart?.(e);
+            const railLength = orientation === 'horizontal' ? railRef.current.offsetWidth : railRef.current.offsetHeight;
+            let handleIndex = 0;
+            let percent;
+            if (e.currentTarget === railRef.current) {
+                // 点击轨道，需要直接滑动至点击处，并从点击处开始拖拽
+                let offset;
+                if (orientation === 'horizontal') {
+                    offset = e.clientX - railRef.current.getBoundingClientRect().x;
+                    if (Array.isArray(innerValue.current)) {
+                        const xArr = handleRefs.current.map(r => r.getBoundingClientRect().x);
+                        if (e.clientX <= xArr[0]) {
+                            handleIndex = 0;
+                        }
+                        else if (e.clientX >= xArr[1]) {
+                            handleIndex = 1;
+                        }
+                        else {
+                            handleIndex = e.clientX - xArr[0] < xArr[1] - e.clientX ? 0 : 1;
+                        }
+                    }
+                }
+                else {
+                    const { y, height } = railRef.current.getBoundingClientRect();
+                    offset = y + height - e.clientY;
+                    if (Array.isArray(innerValue.current)) {
+                        const yArr = handleRefs.current.map(r => r.getBoundingClientRect().y);
+                        if (e.clientY >= yArr[0]) {
+                            handleIndex = 0;
+                        }
+                        else if (e.clientY <= yArr[1]) {
+                            handleIndex = 1;
+                        }
+                        else {
+                            handleIndex = yArr[0] - e.clientY < e.clientY - yArr[1] ? 0 : 1;
+                        }
+                    }
+                }
+                percent = offset / railLength * 100;
+                setInnerValue(percentToValue(percent), handleIndex);
+                setTimeout(() => {
+                    handleRefs.current[handleIndex].focus();
+                });
+            }
+            else {
+                // 拖拽滑块
+                if (Array.isArray(innerValue.current)) {
+                    handleIndex = handleRefs.current.indexOf(e.currentTarget);
+                    percent = valueToPercent(innerValue.current[handleIndex]);
+                }
+                else {
+                    percent = valueToPercent(innerValue.current);
+                }
+            }
+            dragStartData.current = { railLength, percent, handleIndex };
+        },
+        onDrag(info, e) {
+            draggableOptions?.onDrag?.(info, e);
+            const { percent, railLength, handleIndex } = dragStartData.current;
+            const delta = orientation === 'horizontal' ? info.deltaX : -info.deltaY;
+            setInnerValue(percentToValue(percent + delta / railLength * 100), handleIndex);
+        }
+    });
+    /**
+     * -----------------------------------------------------------------
+     * 渲染滑块
+     */
+    const valueIsArray = Array.isArray(innerValue.current);
+    const renderHandleFn = () => {
+        const fn = (value, index = 0) => {
+            const _handleProps = {
+                key: index,
+                ...handleProps,
+                ref: (0, utils_1.cloneRef)(r => handleRefs.current[index] = r, handleProps?.ref),
+                className: (0, utils_1.classnames)(slider_style_1.classes.handle, handleProps?.className),
+                style: {
+                    width: handleSize,
+                    height: handleSize,
+                    ...orientation === 'horizontal'
+                        ? {
+                            top: '50%',
+                            left: valueToPercent(value) + '%'
+                        }
+                        : {
+                            bottom: valueToPercent(value) + '%',
+                            left: '50%'
+                        },
+                    ...handleProps?.style
+                },
+                onPointerDown(e) {
+                    e.stopPropagation();
+                    handleProps?.onPointerDown?.(e);
+                    draggableHandle.onPointerDown(e);
+                }
+            };
+            return renderHandle
+                ? renderHandle(value, _handleProps)
+                : (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { popperRef: r => tooltipRefs.current[index] = r, title: valueIsArray ? innerValue.current[index] : innerValue.current, trigger: ['hover', 'focus'], placement: orientation === 'horizontal' ? 'top' : 'left', ...tooltipProps, children: (0, react_1.createElement)("button", { ..._handleProps, key: index }) }, index);
+        };
+        return valueIsArray
+            ? innerValue.current.map(fn)
+            : fn(innerValue.current);
+    };
+    /**
+     * -----------------------------------------------------------------
+     * 渲染轨道
+     */
+    const renderRailFn = () => {
+        const _railProps = {
+            ...railProps,
+            ref: railRef,
+            className: (0, utils_1.classnames)(slider_style_1.classes.rail, railProps?.className),
+            style: {
+                ...orientation === 'horizontal'
+                    ? {
+                        height: railSize,
+                        [inset ? 'padding' : 'margin']: `0 ${handleSize / 2}px`
+                    }
+                    : {
+                        width: railSize,
+                        [inset ? 'padding' : 'margin']: `${handleSize / 2}px 0`
+                    },
+                ...railProps?.style
+            },
+            onPointerDown: e => {
+                railProps?.onPointerDown?.(e);
+                draggableHandle.onPointerDown(e);
+            },
+            children: ((0, jsx_runtime_1.jsxs)("div", { className: slider_style_1.classes.railWrap, children: [!disableTrack &&
+                        (0, jsx_runtime_1.jsx)("div", { className: slider_style_1.classes.track, style: valueIsArray
+                                ? (orientation === 'horizontal'
+                                    ? {
+                                        width: valueToPercent(innerValue.current[1] - innerValue.current[0]) + '%',
+                                        inset: `0 auto 0 ${valueToPercent(innerValue.current[0])}%`
+                                    }
+                                    : {
+                                        height: valueToPercent(innerValue.current[1] - innerValue.current[0]) + '%',
+                                        inset: `auto 0 ${valueToPercent(innerValue.current[0])}% 0`
+                                    })
+                                : (orientation === 'horizontal'
+                                    ? {
+                                        width: valueToPercent(innerValue.current) + '%',
+                                        inset: '0 auto 0 0'
+                                    }
+                                    : {
+                                        height: valueToPercent(innerValue.current) + '%',
+                                        inset: 'auto 0 0 0'
+                                    }), children: inset && !valueIsArray &&
+                                (0, jsx_runtime_1.jsx)("div", { className: slider_style_1.classes.trackCorner, style: orientation === 'horizontal'
+                                        ? {
+                                            width: -railSize / 2
+                                        }
+                                        : { bottom: -railSize / 2 } }) }), marks?.map(({ value, label, labelPlacement = orientation === 'horizontal' ? 'bottom' : 'right', ...m }) => (0, react_1.createElement)("div", { ...m, key: value, className: slider_style_1.classes.mark, style: {
+                            ...orientation === 'horizontal'
+                                ? {
+                                    height: inset ? '8px' : 'calc(100% + 4px)',
+                                    top: '50%',
+                                    left: `${valueToPercent(value)}%`
+                                }
+                                : {
+                                    width: inset ? '8px' : 'calc(100% + 4px)',
+                                    bottom: `${valueToPercent(value)}%`,
+                                    left: '50%'
+                                },
+                            ...m.style
+                        }, "data-active": valueIsArray
+                            ? innerValue.current[0] <= value && value <= innerValue.current[1]
+                            : innerValue.current >= value },
+                        (0, jsx_runtime_1.jsx)("div", { className: slider_style_1.classes.label, style: {
+                                ...labelPlacement === 'bottom'
+                                    ? {
+                                        top: markLabelOffset + railSize / 2,
+                                        left: '50%',
+                                        transform: 'translateX(-50%)'
+                                    }
+                                    : {
+                                        top: '50%',
+                                        left: markLabelOffset + railSize / 2,
+                                        transform: 'translateY(-50%)'
+                                    }
+                            }, children: label }))), renderHandleFn()] }))
+        };
+        return renderRail ? renderRail(innerValue.current, _railProps) : (0, jsx_runtime_1.jsx)("div", { ..._railProps });
+    };
+    /**
+     * -----------------------------------------------------------------
+     * 渲染前后缀
+     */
+    const renderExtra = (prop) => {
+        return typeof prop === 'function' ? prop(innerValue.current) : prop;
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { ...props, ref: ref, css: (0, slider_style_1.useStyle)({ color }), className: (0, utils_1.classnames)(slider_style_1.classes.root, props.className), "data-orientation": orientation, "data-variant": variant, "data-inset": inset, "data-disable-outline": disableHandleOutline, children: [!!prefix &&
+                (0, jsx_runtime_1.jsx)("div", { className: slider_style_1.classes.prefix, children: renderExtra(prefix) }), renderRailFn(), !!suffix &&
+                (0, jsx_runtime_1.jsx)("div", { className: slider_style_1.classes.suffix, children: renderExtra(suffix) })] }));
+}));

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

@@ -0,0 +1,17 @@
+import { ColorPropsValue } from '../../../types';
+export declare const classes: {
+    prefix: string;
+    label: string;
+    mark: string;
+    track: string;
+    suffix: string;
+    rail: string;
+    railWrap: string;
+    trackCorner: string;
+    handle: string;
+} & {
+    root: string;
+};
+export declare function useStyle({ color }: {
+    color: ColorPropsValue;
+}): import("@emotion/react").SerializedStyles;

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

@@ -0,0 +1,188 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.classes = void 0;
+exports.useStyle = useStyle;
+const tslib_1 = require("tslib");
+const react_1 = require("@emotion/react");
+const utils_1 = require("../../utils");
+const color_1 = tslib_1.__importDefault(require("color"));
+exports.classes = (0, utils_1.defineClasses)('slider', [
+    'rail',
+    'railWrap',
+    'track',
+    'trackCorner',
+    'mark',
+    'label',
+    'handle',
+    'prefix',
+    'suffix'
+]);
+function useStyle({ color }) {
+    const colorValue = (0, utils_1.useColor)(color);
+    return (0, utils_1.useCss)(({ spacing, mode, gray, divider, background, easing }) => {
+        const c = (0, color_1.default)(colorValue);
+        const lighter = c.lighten(.1).hex();
+        const darker = c.darken(.1).hex();
+        const outlineColor = c.alpha(.15).string();
+        return (0, react_1.css) `
+            min-height: 24px;
+            display: flex;
+            align-items: center;
+            gap: ${spacing[2]}px;
+
+            &[data-inset=true] {
+                min-height: 0;
+            }
+
+            .${exports.classes.rail} {
+                flex: 1;
+                border-radius: 1000em;
+                cursor: pointer;
+                background-color: ${gray(.1)};
+                transition: background-color .2s ${easing.easeOut};
+                touch-action: none;
+
+                &:hover {
+                    background-color: ${mode === 'light' ? divider : gray(.05)};
+                }
+
+                .${exports.classes.railWrap} {
+                    height: 100%;
+                    position: relative;
+                    border-radius: inherit;
+                }
+            }
+
+            &[data-orientation=vertical] {
+                min-height: auto;
+                height: 100%;
+                flex-direction: column;
+
+                .${exports.classes.rail} {
+                    height: 100%;
+                }
+
+                .${exports.classes.handle} {
+                    transform: translate(-50%, 50%);
+                }
+            }
+
+            .${exports.classes.handle} {
+                cursor: pointer;
+                padding: 0;
+                border-radius: 50%;
+                border: 0 solid ${colorValue};
+                position: absolute;
+                z-index: 1;
+                transform: translate(-50%, -50%);
+            }
+    
+            &:not([data-disable-outline=true]) {
+                .${exports.classes.handle} {
+                    outline: 0 solid ${outlineColor};
+                }
+            }
+    
+            &[data-variant=filled] {
+                .${exports.classes.handle} {
+                    transition: background-color .2s ${easing.easeOut}, outline-width .2s ${easing.easeOut};
+                    background-color: ${colorValue};
+                    
+                    &:hover {
+                        outline-width: 6px;
+                        background-color: ${lighter};
+                    }
+    
+                    &:active {
+                        transition: background-color 0s, outline-width .2s ${easing.swing};
+                        background-color: ${darker};
+                        outline-width: 9px;
+                    }
+    
+                    &:focus {
+                        transition: background-color .2s ${easing.easeOut}, outline-width .2s ${easing.swing};
+                        outline-width: 9px;
+                    }
+                }
+            }
+    
+            &[data-variant=outlined] {
+                .${exports.classes.handle} {
+                    transition: outline-width .2s ${easing.easeOut};
+                    background-color: ${background.card};
+                    border-width: 2px;
+    
+                    &:hover {
+                        outline-width: 6px;
+                    }
+    
+                    &:active,
+                    &:focus {
+                        transition: outline-width .2s ${easing.swing};
+                        outline-width: 9px;
+                    }
+                }
+            }
+
+            .${exports.classes.track} {
+                position: absolute;
+                background-color: ${colorValue};
+
+                &:before {
+                    content: '';
+                    aspect-ratio: 1;
+                    border-radius: 50%;
+                    position: absolute;
+                    background-color: inherit;
+                }
+            }
+
+            &[data-orientation=horizontal] {
+                \.${exports.classes.track}:before {
+                    height: 100%;
+                    top: 0;
+                    left: 0;
+                    transform: translateX(-50%);
+                }
+            }
+
+            &[data-orientation=vertical] {
+                \.${exports.classes.track}:before {
+                    width: 100%;
+                    bottom: 0;
+                    left: 0;
+                    transform: translateY(50%);
+                }
+            }
+
+            .${exports.classes.mark} {
+                aspect-ratio: 1;
+                border: 2px solid ${gray(mode === 'light' ? .2 : .1)};
+                border-radius: 50%;
+                background-color: ${background.card};
+                position: absolute;
+                transform: translate(-50%, -50%);
+
+                &[data-active=true] {
+                    border-color: ${colorValue};
+                }
+
+                .${exports.classes.label} {
+                    position: absolute;
+                }
+            }
+
+            &[data-orientation=vertical] {
+                .${exports.classes.mark} {
+                    transform: translate(-50%, 50%);
+                }
+            }
+
+            &[data-inset=true] {
+                .${exports.classes.mark} {
+                    z-index: 2;
+                }
+            }
+        `;
+    }, [colorValue]);
+}

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

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

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

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

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

@@ -0,0 +1,40 @@
+import { ReactNode } from 'react';
+import { TransitionBaseProps } from '../transitionBase';
+import { BlockPlacement, ColorPropsValue, DefineElement } from '../../../types';
+export interface SnackbarBaseProps extends TransitionBaseProps<HTMLDivElement> {
+    variant?: 'filled' | 'plain';
+    color?: ColorPropsValue;
+    icon?: ReactNode;
+    title?: ReactNode;
+    content?: ReactNode;
+    showClose?: ReactNode;
+    placement?: BlockPlacement;
+    /** 自动关闭的延迟，为0表示不自动关闭，@default 3000 (ms) */
+    duration?: number;
+    onAutoClose?(): void;
+    onCloseButtonClick?(e: React.MouseEvent<HTMLButtonElement>): void;
+}
+export declare class SnackbarBaseMethods<P extends SnackbarBaseProps = SnackbarBaseProps> {
+    info(content: ReactNode): Promise<void>;
+    info(props: P): Promise<void>;
+    success(content: ReactNode): Promise<void>;
+    success(props: P): Promise<void>;
+    warning(content: ReactNode): Promise<void>;
+    warning(props: P): Promise<void>;
+    error(content: ReactNode): Promise<void>;
+    error(props: P): Promise<void>;
+}
+export declare const SnackbarBase: import("react").MemoExoticComponent<({ methods, useTo, max, container }: {
+    methods: SnackbarBaseMethods;
+    useTo: "message" | "notification";
+    max?: number;
+    container?: DefineElement;
+}) => import("react").ReactPortal>;
+interface SnackbarBaseItemProps extends Omit<SnackbarBaseProps, 'duration' | 'onAutoClose'> {
+    id: string;
+    type: keyof SnackbarBaseMethods;
+    useTo: 'message' | 'notification';
+    resolve(): void;
+}
+export declare const SnackbarBaseItem: import("react").MemoExoticComponent<({ id, type, useTo, resolve, variant, color, icon, title, content, showClose, placement, onCloseButtonClick, ...props }: SnackbarBaseItemProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
+export {};