@canlooks/can-ui 0.0.1

package/dist/esm/components/app/theme.d.ts

@@ -0,0 +1,79 @@
+import { Dispatch, SetStateAction } from 'react';
+import { ColorPresets, TextColorPresets, ThemeEasingName, Size, Breakpoints } from '../../../types';
+/**
+ * 获取不同程度的灰色
+ * @param amount 0 至 1，数值越小越靠近背景颜色，数值越大越靠近文字颜色（mode改变后数组会倒转）
+ */
+export declare function gray(amount: number): string;
+export declare function rGray(amount: number): string;
+/**
+ * ---------------------------------------------------------------------
+ * 以3的倍数统一处理间距
+ */
+export declare const spacing: {
+    (amount: number): number;
+    0: number;
+    1: number;
+    2: number;
+    3: number;
+    4: number;
+    5: number;
+    6: number;
+    7: number;
+    8: number;
+    9: number;
+    10: number;
+};
+export declare const zIndex: {
+    overlay: number;
+    popper: number;
+    bubbleConfirm: number;
+    dropdown: number;
+    snackbar: number;
+    tooltip: number;
+};
+export declare const breakpoints: {
+    [P in Breakpoints]: number;
+};
+export type ThemeColor = {
+    [P in ColorPresets]: string;
+};
+export type ThemeTextColor = {
+    [P in TextColorPresets]: string;
+};
+export type ThemeBackgroundColor = {
+    card: string;
+    body: string;
+    fixed: string;
+};
+export type ThemeEasings = {
+    [P in ThemeEasingName]: string;
+};
+export type Theme = {
+    mode: 'light' | 'dark';
+    fontSize: number;
+    size: Size;
+    borderRadius: number;
+    /** 间隙大小，如内边距、外边距等，是控制界面整体紧凑程度的主要参数 */
+    spacing: typeof spacing;
+    gap: number;
+    gray: typeof gray;
+    divider: string;
+    colors: ThemeColor;
+    text: ThemeTextColor;
+    background: ThemeBackgroundColor;
+    boxShadow: string[];
+    easing: ThemeEasings;
+    /** @private 是否为最顶层的主题提供者 */
+    _isTop: boolean;
+    update: Dispatch<SetStateAction<PartialTheme>>;
+};
+/** Theme对象的深度Partial，使所有子属性全部变成可选 */
+export type PartialTheme = Partial<Omit<Theme, 'colors' | 'text' | 'background' | 'easing'>> & {
+    colors?: Partial<ThemeColor>;
+    text?: Partial<ThemeTextColor>;
+    background?: Partial<ThemeBackgroundColor>;
+    easing?: Partial<ThemeEasings>;
+};
+export declare const defaultLightTheme: Theme;
+export declare const defaultDarkTheme: PartialTheme;

package/dist/esm/components/app/theme.js

@@ -0,0 +1,138 @@
+import Color from 'color';
+/**
+ * 获取不同程度的灰色
+ * @param amount 0 至 1，数值越小越靠近背景颜色，数值越大越靠近文字颜色（mode改变后数组会倒转）
+ */
+export function gray(amount) {
+    return rGray(1 - amount);
+}
+export function rGray(amount) {
+    return Color(`hsl(0, 0%, ${amount * 100}%)`, 'hsl').hex();
+}
+/**
+ * ---------------------------------------------------------------------
+ * 以3的倍数统一处理间距
+ */
+export const spacing = (amount) => amount * 3;
+spacing[0] = spacing(0);
+spacing[1] = spacing(1);
+spacing[2] = spacing(2);
+spacing[3] = spacing(3);
+spacing[4] = spacing(4);
+spacing[5] = spacing(5);
+spacing[6] = spacing(6);
+spacing[7] = spacing(7);
+spacing[8] = spacing(8);
+spacing[9] = spacing(9);
+spacing[10] = spacing(10);
+export const zIndex = {
+    overlay: 1000,
+    popper: 1100,
+    bubbleConfirm: 1200,
+    dropdown: 1300,
+    snackbar: 1400,
+    tooltip: 1500
+};
+export const breakpoints = {
+    xs: 0,
+    sm: 600,
+    md: 900,
+    lg: 1200,
+    xl: 1536
+};
+export const defaultLightTheme = {
+    mode: 'light',
+    fontSize: 14,
+    size: 'medium',
+    borderRadius: 6,
+    spacing,
+    gap: spacing[6],
+    get gray() {
+        return gray;
+    },
+    /** divider: gray(.15), */
+    divider: '#d9d9d9',
+    colors: {
+        primary: '#1e71ec',
+        secondary: '#925CC1',
+        success: '#13C13C',
+        warning: '#ED9121',
+        error: '#DD3F3F',
+        info: '#52AEDF'
+    },
+    text: {
+        /* primary: gray(1), */
+        primary: '#000000',
+        /* secondary: gray(.6), */
+        secondary: '#666666',
+        /* disabled: gray(.4), */
+        disabled: '#999999',
+        /* placeholder: gray(.3), */
+        placeholder: '#b3b3b3',
+        /* inverse: gray(0) */
+        inverse: '#ffffff'
+    },
+    background: {
+        card: '#ffffff',
+        /* body: gray(.04), */
+        body: '#f5f5f5',
+        fixed: 'rgba(0, 0, 0, .02)'
+    },
+    boxShadow: [
+        /* 通常用于弹框，气泡等 */
+        '3px 6px 18px rgba(0, 0, 0, .2)',
+        /* 通常用于抽屉等 */
+        '0 0 24px rgba(0, 0, 0, .2)',
+        '1px 2px 3px rgba(0, 0, 0, .2)',
+        '2px 4px 6px rgba(0, 0, 0, .2)',
+        '3px 6px 9px rgba(0, 0, 0, .2)',
+        '3px 6px 18px rgba(0, 0, 0, .2)',
+        '4px 8px 24px rgba(0, 0, 0, .2)'
+    ],
+    easing: {
+        linear: 'linear',
+        ease: 'ease',
+        easeIn: 'cubic-bezier(.3, 0, .6, 0)',
+        easeOut: 'cubic-bezier(.4, 1, .7, 1)',
+        easeInOut: 'ease-in-out',
+        bounce: 'cubic-bezier(.5, 2, .5, .7)',
+        swing: 'cubic-bezier(.5, 3, .5, .1)'
+    },
+    _isTop: true,
+    update: () => { }
+};
+export const defaultDarkTheme = {
+    mode: 'dark',
+    background: {
+        /* body: rGray(.15), */
+        body: '#252525',
+        /* card: rGray(.2), */
+        card: '#333333',
+        fixed: 'rgba(255, 255, 255, .06)'
+    },
+    get gray() {
+        return rGray;
+    },
+    /* divider: rGray(.36), */
+    divider: '#5c5c5c',
+    colors: {
+        /* primary: Color('#1e71ec').lighten(.1).hex(), */
+        primary: '#3780ee',
+        /* success: Color('#13C13C').lighten(.06).hex(), */
+        success: '#14cd40',
+        /* error: Color('#DD3F3F').lighten(.06).hex(), */
+        error: '#E04D4D'
+    },
+    text: {
+        /* primary: rGray(1), */
+        primary: '#ffffff',
+        /* secondary: rGray(.7), */
+        secondary: '#b3b3b3',
+        /* disabled: rGray(.5), */
+        disabled: '#808080',
+        /* placeholder: rGray(.45), */
+        placeholder: '#737373',
+        /* inverse: rGray(0) */
+        inverse: '#000000'
+    }
+};

package/dist/esm/components/app/themeContext.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+import { PartialTheme, Theme } from './theme';
+export declare const themeContext: import("react").Context<Theme>;
+export declare function useTheme(): Theme;
+export declare function useThemeProvider(theme?: PartialTheme): Theme;
+export declare function ThemeProvider(props: {
+    theme?: PartialTheme;
+    children?: ReactNode;
+}): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/esm/components/app/themeContext.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { createContext, useContext, useState } from 'react';
+import { defaultDarkTheme, defaultLightTheme } from './theme';
+import { mergeDeep } from '../../utils';
+export const themeContext = createContext(defaultLightTheme);
+export function useTheme() {
+    return useContext(themeContext);
+}
+export function useThemeProvider(theme) {
+    const defaultTheme = useTheme();
+    const mergeTheme = (theme) => {
+        const newTheme = typeof theme === 'function' ? theme(themeValue) : theme;
+        return mergeDeep({}, defaultTheme, newTheme?.mode === 'dark' && defaultDarkTheme, newTheme);
+    };
+    const [themeValue, setThemeValue] = useState(() => mergeTheme(theme));
+    themeValue.update = theme => {
+        setThemeValue(mergeTheme(theme));
+    };
+    return themeValue;
+}
+export function ThemeProvider(props) {
+    return (_jsx(themeContext.Provider, { value: useThemeProvider(props.theme), children: props.children }));
+}

package/dist/esm/components/autocomplete/autocomplete.d.ts

@@ -0,0 +1,20 @@
+import { ReactElement, ReactNode, Ref } from 'react';
+import { PopperProps, PopperRef } from '../popper';
+import { MenuOptionType } from '../optionsBase';
+import { InputProps } from '../input';
+import { MenuItem } from '../menuItem';
+export interface AutocompleteProps<O extends MenuOptionType> extends Omit<InputProps, 'onSelect'> {
+    children?: ReactNode;
+    options?: O[];
+    loadOptions?(inputValue: InputProps['value']): O[] | Promise<O[]>;
+    primaryKey?: keyof O;
+    labelKey?: keyof O;
+    onSelect?(selectedValue: keyof O, option: O | ReactElement): void;
+    renderInput?(inputProps: InputProps): ReactElement;
+    popperProps?: PopperProps;
+    popperRef?: Ref<PopperRef>;
+}
+export declare const Autocomplete: {
+    <O extends MenuOptionType>(props: AutocompleteProps<O>): ReactElement;
+    Option: typeof MenuItem;
+};

package/dist/esm/components/autocomplete/autocomplete.js

@@ -0,0 +1,101 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { Children, forwardRef, isValidElement, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Popper } from '../popper';
+import { OptionsBase } from '../optionsBase';
+import { Input } from '../input';
+import { cloneRef, isUnset, useControlled, useDerivedState, useLoading, useSync } from '../../utils';
+import { classes } from './autocomplete.style';
+import { popperStyle } from '../popper/popper.style';
+export const Autocomplete = memo(forwardRef(({ children, loading, options, loadOptions, primaryKey = 'value', labelKey = 'label', onSelect, renderInput, popperProps, popperRef, defaultValue = '', value, onChange, ...props }, ref) => {
+    const [focused, _setFocused] = useState(false);
+    const setFocused = (focused) => {
+        !props.disabled && !props.readOnly && _setFocused(focused);
+    };
+    const [innerValue, setInnerValue] = useControlled(defaultValue, value);
+    const changedBySelect = useRef(false);
+    const changeHandler = (e, isSelect = false) => {
+        changedBySelect.current = isSelect;
+        onChange?.(e);
+        setInnerValue(e.target.value);
+    };
+    /**
+     * ------------------------------------------------------------------
+     * 动态请求选项
+    */
+    const [innerOptions, setInnerOptions] = useState();
+    const [innerLoading, innerLoadOptions] = useLoading(async () => {
+        loadOptions && setInnerOptions(await loadOptions(innerValue.current));
+    }, loading);
+    useEffect(() => {
+        !changedBySelect.current && innerLoadOptions();
+    }, [innerValue.current]);
+    /**
+     * ------------------------------------------------------------------
+     * 合并最终选项
+     */
+    const optionsArr = innerOptions || options || Children.map(children, c => isValidElement(c) ? c.props : c) || void 0;
+    const optionsMap = useMemo(() => {
+        const map = new Map();
+        optionsArr?.forEach(opt => {
+            if (opt && typeof opt === 'object') {
+                const key = opt[primaryKey];
+                !isUnset(key) && map.set(key, opt);
+            }
+        });
+        return map;
+    }, [optionsArr, primaryKey]);
+    const [open, _setOpen] = useDerivedState(() => {
+        return focused && !!optionsMap.size;
+    }, [focused, optionsMap.size]);
+    const setOpen = (open) => {
+        if (!props.disabled && !props.readOnly && (!open || optionsMap.size)) {
+            // 必须有选项才能打开下拉框
+            popperProps?.onOpenChange?.(open);
+            _setOpen(open);
+        }
+    };
+    const inputRef = useRef(null);
+    const syncOnSelect = useSync(onSelect);
+    const optionSelectHandler = useCallback((value, e) => {
+        const option = optionsMap.get(value);
+        inputRef.current.value = option[labelKey];
+        syncOnSelect.current?.(value, option);
+        changeHandler({
+            ...e,
+            target: inputRef.current,
+            currentTarget: inputRef.current
+        }, true);
+        setOpen(false);
+    }, [optionsMap]);
+    const inputProps = {
+        ...props,
+        ref,
+        className: classes.root,
+        inputRef: cloneRef(inputRef, props.inputRef),
+        loading: innerLoading.current,
+        value: innerValue.current,
+        onChange: changeHandler,
+        onInput(e) {
+            props.onInput?.(e);
+            setOpen(true);
+        },
+        onClick(e) {
+            props.onClick?.(e);
+            setOpen(true);
+        },
+        onFocus(e) {
+            props.onFocus?.(e);
+            setFocused(true);
+        },
+        onBlur(e) {
+            props.onBlur?.(e);
+            setFocused(false);
+        }
+    };
+    return (_jsx(Popper, { css: popperStyle, open: open.current, placement: "bottom", variant: "collapse", trigger: false, content: _jsx(OptionsBase, { onToggleSelected: optionSelectHandler, loading: innerLoading.current, options: options, labelKey: labelKey, primaryKey: primaryKey, children: children }), ...popperProps, popperRef: popperRef, onOpenChange: setOpen, onPointerDown: e => {
+            popperProps?.onPointerDown?.(e);
+            e.preventDefault();
+        }, children: renderInput
+            ? renderInput(inputProps)
+            : _jsx(Input, { ...inputProps }) }));
+}));

package/dist/esm/components/autocomplete/autocomplete.style.d.ts

@@ -0,0 +1,3 @@
+export declare const classes: {
+    root: string;
+};

package/dist/esm/components/autocomplete/autocomplete.style.js

@@ -0,0 +1,2 @@
+import { defineClasses } from '../../utils';
+export const classes = defineClasses('autocomplete');

package/dist/esm/components/autocomplete/index.d.ts

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

package/dist/esm/components/autocomplete/index.js

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

package/dist/esm/components/avatar/avatar.d.ts

@@ -0,0 +1,19 @@
+import { ReactElement, Ref } from 'react';
+import { ColorPropsValue, DIVProps, Size } from '../../../types';
+import { AvatarGroup } from './avatarGroup';
+export interface AvatarProps extends DIVProps {
+    color?: ColorPropsValue;
+    size?: Size | number | string;
+    shape?: 'circular' | 'square';
+    src?: string;
+    imgProps?: JSX.IntrinsicElements['img'];
+    imgRef?: Ref<HTMLImageElement>;
+}
+export declare function useAvatarStyle(props: Pick<AvatarProps, 'color' | 'size'>): {
+    color: string;
+    size: string | number;
+};
+export declare const Avatar: {
+    (props: AvatarProps): ReactElement;
+    Group: typeof AvatarGroup;
+};

package/dist/esm/components/avatar/avatar.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { forwardRef, memo, useMemo } from 'react';
+import { classes, useStyle } from './avatar.style';
+import { classnames } from '../../utils';
+import { useTheme } from '../app';
+import { AvatarGroup } from './avatarGroup';
+export function useAvatarStyle(props) {
+    const { mode, size, gray } = useTheme();
+    const _size = props.size ?? size;
+    return useMemo(() => ({
+        color: props.color ?? gray(mode === 'light' ? .2 : .3),
+        size: {
+            small: 24,
+            medium: 32,
+            large: 40
+        }[_size] || _size
+    }), [props.color, mode, _size]);
+}
+export const Avatar = memo(forwardRef(({ color, size, shape = 'circular', src, imgProps, imgRef, ...props }, ref) => {
+    const style = useAvatarStyle({ color, size });
+    return (_jsx("div", { ...props, ref: ref, css: useStyle({ color: style.color }), className: classnames(classes.root, props.className), style: {
+            width: style.size,
+            ...props.style
+        }, "data-shape": shape, children: src
+            ? _jsx("img", { src: src, alt: "", ...imgProps, ref: imgRef, className: classnames(classes.img, imgProps?.className) })
+            : props.children }));
+}));
+Avatar.Group = AvatarGroup;

package/dist/esm/components/avatar/avatar.style.d.ts

@@ -0,0 +1,9 @@
+import { ColorPropsValue } from '../../../types';
+export declare const classes: {
+    img: string;
+} & {
+    root: string;
+};
+export declare function useStyle({ color }: {
+    color: ColorPropsValue;
+}): import("@emotion/react").SerializedStyles;

package/dist/esm/components/avatar/avatar.style.js

@@ -0,0 +1,35 @@
+import { css } from '@emotion/react';
+import { defineClasses, useColor, useCss } from '../../utils';
+export const classes = defineClasses('avatar', [
+    'img'
+]);
+export function useStyle({ color }) {
+    const colorValue = useColor(color);
+    return useCss(({ borderRadius }) => css `
+        line-height: 1;
+        aspect-ratio: 1;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        color: #ffffff;
+        overflow: hidden;
+
+        &[data-shape=circular] {
+            border-radius: 50%;
+        }
+
+        &[data-shape=square] {
+            border-radius: ${borderRadius}px;
+        }
+
+        &:not(:has(.${classes.img})) {
+            background-color: ${colorValue};
+        }
+
+        .${classes.img} {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+    `, [colorValue]);
+}

package/dist/esm/components/avatar/avatarGroup.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+import { AvatarProps } from './avatar';
+import { Obj } from '../../../types';
+export interface AvatarGroupProps extends Omit<AvatarProps, 'src'> {
+    items?: (AvatarProps & Obj)[];
+    hoverable?: boolean;
+    /** 最大显示的数量，@default 5 */
+    max?: number;
+    /** 总共的数量，默认取items或children的长度 */
+    total?: number;
+    /** 超过最大限制时，渲染的额外头像 */
+    renderSurplus?(surplus: number): ReactNode;
+}
+export declare const AvatarGroup: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<AvatarGroupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>>;

package/dist/esm/components/avatar/avatarGroup.js

@@ -0,0 +1,41 @@
+import { jsxs as _jsxs, jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { createElement as _createElement } from "@emotion/react";
+import { Children, cloneElement, forwardRef, isValidElement, memo } from 'react';
+import { classnames } from '../../utils';
+import { classes, style } from './avatarGroup.style';
+import { Avatar, useAvatarStyle } from './avatar';
+export const AvatarGroup = memo(forwardRef(({ color, size, shape = 'circular', imgProps, imgRef, items, hoverable = true, max = 5, total, renderSurplus, ...props }, ref) => {
+    const itemStyle = useAvatarStyle({ color, size });
+    const commonProps = {
+        ...itemStyle,
+        shape,
+        imgProps,
+        imgRef
+    };
+    total ??= items?.length ?? Children.count(props.children);
+    const isSurplus = total > max;
+    const renderItems = () => {
+        if (items?.length) {
+            return items.slice(0, isSurplus ? max - 1 : max).reverse().map((p, i) => _createElement(Avatar, { ...commonProps, key: p.key ?? i, color: p.color, size: p.size, shape: p.shape, src: p.src, imgProps: p.imgProps, imgRef: p.imgRef }));
+        }
+        return Children.toArray(props.children).slice(0, isSurplus ? max - 1 : max).reverse().map(child => {
+            return isValidElement(child)
+                ? cloneElement(child, {
+                    ...commonProps,
+                    ...child.props
+                })
+                : child;
+        });
+    };
+    const renderSurplusFn = () => {
+        if (!isSurplus) {
+            return;
+        }
+        const surplus = total - max + 1;
+        if (renderSurplus) {
+            return renderSurplus(surplus);
+        }
+        return _jsxs(Avatar, { children: ["+", surplus] });
+    };
+    return (_jsx("div", { ...props, ref: ref, css: style, className: classnames(classes.root), "data-hoverable": hoverable, children: _jsxs("div", { className: classes.wrap, children: [renderSurplusFn(), renderItems()] }) }));
+}));

package/dist/esm/components/avatar/avatarGroup.style.d.ts

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

package/dist/esm/components/avatar/avatarGroup.style.js

@@ -0,0 +1,37 @@
+import { css } from '@emotion/react';
+import { defineClasses, defineCss } from '../../utils';
+import { classes as avatarClasses } from './avatar.style';
+export const classes = defineClasses('avatar-group', [
+    'wrap'
+]);
+export const style = defineCss(({ mode, easing }) => css `
+    display: flex;
+    justify-content: flex-start;
+    
+    .${classes.wrap} {
+        display: flex;
+        flex-direction: row-reverse;
+    }
+    
+    &[data-hoverable=true] {
+        .${classes.wrap} {
+            cursor: pointer;
+    
+            &:hover {
+                .${avatarClasses.root} {
+                    margin: 0;
+                }
+            }
+        }
+    }
+    
+    .${avatarClasses.root} {
+        position: relative;
+        border: 1px solid ${mode === 'light' ? '#ffffff' : '#999999'};
+    
+        &:not(:last-of-type) {
+            transition: margin .2s ${easing.easeOut};
+            margin-left: -6px;
+        }
+    }
+`);

package/dist/esm/components/avatar/index.d.ts

@@ -0,0 +1,2 @@
+export * from './avatar';
+export * from './avatarGroup';

package/dist/esm/components/avatar/index.js

@@ -0,0 +1,2 @@
+export * from './avatar';
+export * from './avatarGroup';

package/dist/esm/components/backdrop/backdrop.d.ts

@@ -0,0 +1,7 @@
+import { FadeProps } from '../transitionBase';
+export interface BackdropProps<T extends HTMLElement = HTMLElement> extends Omit<FadeProps<T>, 'in'> {
+    open: boolean;
+    /** @default 'dark' */
+    variant?: 'light' | 'dark';
+}
+export declare const Backdrop: import("react").ForwardRefExoticComponent<Omit<BackdropProps<HTMLElement>, "ref"> & import("react").RefAttributes<HTMLElement>>;

package/dist/esm/components/backdrop/backdrop.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { forwardRef } from 'react';
+import { classnames } from '../../utils';
+import { Fade } from '../transitionBase';
+import { classes, useStyle } from './backdrop.style';
+export const Backdrop = forwardRef(({ open, variant = 'dark', ...props }, ref) => {
+    return (_jsx(Fade, { ...props, ref: ref, css: useStyle({ variant }), in: open, className: classnames(classes.root, props.className) }));
+});

package/dist/esm/components/backdrop/backdrop.style.d.ts

@@ -0,0 +1,5 @@
+import { BackdropProps } from './backdrop';
+export declare const classes: {
+    root: string;
+};
+export declare function useStyle({ variant }: Pick<BackdropProps, 'variant'>): import("@emotion/react").SerializedStyles;

package/dist/esm/components/backdrop/backdrop.style.js

@@ -0,0 +1,22 @@
+import { css } from '@emotion/react';
+import { defineClasses, useCss } from '../../utils';
+import Color from 'color';
+export const classes = defineClasses('backdrop');
+export function useStyle({ variant }) {
+    return useCss(({ background, text, spacing }) => {
+        const bgColor = variant === 'dark'
+            ? Color(text.primary).alpha(.8).string()
+            : Color(background.card).alpha(.8).string();
+        return css `
+            position: absolute;
+            inset: 0;
+            z-index: 1;
+            background-color: ${bgColor};
+            display: flex;
+            flex-direction: column;
+            gap: ${spacing[3]}px;
+            align-items: center;
+            justify-content: center;
+        `;
+    }, [variant]);
+}

package/dist/esm/components/backdrop/index.d.ts

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

package/dist/esm/components/backdrop/index.js

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

package/dist/esm/components/badge/badge.d.ts

@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+import { ColorPropsValue, DIVProps, Placement } from '../../../types';
+export interface BadgeProps extends DIVProps {
+    color?: ColorPropsValue;
+    placement?: Placement;
+    variant?: 'dot' | 'standard';
+    /** 角标的任容 */
+    count?: ReactNode;
+    /** @default 99 */
+    max?: number;
+    /** 数量为0时是否显示角标，@default false */
+    showZero?: boolean;
+    offsetX?: number | string;
+    offsetY?: number | string;
+}
+export declare const Badge: import("react").ForwardRefExoticComponent<Omit<BadgeProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;