@canlooks/can-ui 0.0.1

package/dist/cjs/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/cjs/components/app/themeContext.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.themeContext = void 0;
+exports.useTheme = useTheme;
+exports.useThemeProvider = useThemeProvider;
+exports.ThemeProvider = ThemeProvider;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const theme_1 = require("./theme");
+const utils_1 = require("../../utils");
+exports.themeContext = (0, react_1.createContext)(theme_1.defaultLightTheme);
+function useTheme() {
+    return (0, react_1.useContext)(exports.themeContext);
+}
+function useThemeProvider(theme) {
+    const defaultTheme = useTheme();
+    const mergeTheme = (theme) => {
+        const newTheme = typeof theme === 'function' ? theme(themeValue) : theme;
+        return (0, utils_1.mergeDeep)({}, defaultTheme, newTheme?.mode === 'dark' && theme_1.defaultDarkTheme, newTheme);
+    };
+    const [themeValue, setThemeValue] = (0, react_1.useState)(() => mergeTheme(theme));
+    themeValue.update = theme => {
+        setThemeValue(mergeTheme(theme));
+    };
+    return themeValue;
+}
+function ThemeProvider(props) {
+    return ((0, jsx_runtime_1.jsx)(exports.themeContext.Provider, { value: useThemeProvider(props.theme), children: props.children }));
+}

package/dist/cjs/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/cjs/components/autocomplete/autocomplete.js

@@ -0,0 +1,104 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Autocomplete = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const popper_1 = require("../popper");
+const optionsBase_1 = require("../optionsBase");
+const input_1 = require("../input");
+const utils_1 = require("../../utils");
+const autocomplete_style_1 = require("./autocomplete.style");
+const popper_style_1 = require("../popper/popper.style");
+exports.Autocomplete = (0, react_1.memo)((0, react_1.forwardRef)(({ children, loading, options, loadOptions, primaryKey = 'value', labelKey = 'label', onSelect, renderInput, popperProps, popperRef, defaultValue = '', value, onChange, ...props }, ref) => {
+    const [focused, _setFocused] = (0, react_1.useState)(false);
+    const setFocused = (focused) => {
+        !props.disabled && !props.readOnly && _setFocused(focused);
+    };
+    const [innerValue, setInnerValue] = (0, utils_1.useControlled)(defaultValue, value);
+    const changedBySelect = (0, react_1.useRef)(false);
+    const changeHandler = (e, isSelect = false) => {
+        changedBySelect.current = isSelect;
+        onChange?.(e);
+        setInnerValue(e.target.value);
+    };
+    /**
+     * ------------------------------------------------------------------
+     * 动态请求选项
+    */
+    const [innerOptions, setInnerOptions] = (0, react_1.useState)();
+    const [innerLoading, innerLoadOptions] = (0, utils_1.useLoading)(async () => {
+        loadOptions && setInnerOptions(await loadOptions(innerValue.current));
+    }, loading);
+    (0, react_1.useEffect)(() => {
+        !changedBySelect.current && innerLoadOptions();
+    }, [innerValue.current]);
+    /**
+     * ------------------------------------------------------------------
+     * 合并最终选项
+     */
+    const optionsArr = innerOptions || options || react_1.Children.map(children, c => (0, react_1.isValidElement)(c) ? c.props : c) || void 0;
+    const optionsMap = (0, react_1.useMemo)(() => {
+        const map = new Map();
+        optionsArr?.forEach(opt => {
+            if (opt && typeof opt === 'object') {
+                const key = opt[primaryKey];
+                !(0, utils_1.isUnset)(key) && map.set(key, opt);
+            }
+        });
+        return map;
+    }, [optionsArr, primaryKey]);
+    const [open, _setOpen] = (0, utils_1.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 = (0, react_1.useRef)(null);
+    const syncOnSelect = (0, utils_1.useSync)(onSelect);
+    const optionSelectHandler = (0, react_1.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: autocomplete_style_1.classes.root,
+        inputRef: (0, utils_1.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 ((0, jsx_runtime_1.jsx)(popper_1.Popper, { css: popper_style_1.popperStyle, open: open.current, placement: "bottom", variant: "collapse", trigger: false, content: (0, jsx_runtime_1.jsx)(optionsBase_1.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)
+            : (0, jsx_runtime_1.jsx)(input_1.Input, { ...inputProps }) }));
+}));

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

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

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

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.classes = void 0;
+const utils_1 = require("../../utils");
+exports.classes = (0, utils_1.defineClasses)('autocomplete');

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

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

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

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

package/dist/cjs/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/cjs/components/avatar/avatar.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Avatar = void 0;
+exports.useAvatarStyle = useAvatarStyle;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const avatar_style_1 = require("./avatar.style");
+const utils_1 = require("../../utils");
+const app_1 = require("../app");
+const avatarGroup_1 = require("./avatarGroup");
+function useAvatarStyle(props) {
+    const { mode, size, gray } = (0, app_1.useTheme)();
+    const _size = props.size ?? size;
+    return (0, react_1.useMemo)(() => ({
+        color: props.color ?? gray(mode === 'light' ? .2 : .3),
+        size: {
+            small: 24,
+            medium: 32,
+            large: 40
+        }[_size] || _size
+    }), [props.color, mode, _size]);
+}
+exports.Avatar = (0, react_1.memo)((0, react_1.forwardRef)(({ color, size, shape = 'circular', src, imgProps, imgRef, ...props }, ref) => {
+    const style = useAvatarStyle({ color, size });
+    return ((0, jsx_runtime_1.jsx)("div", { ...props, ref: ref, css: (0, avatar_style_1.useStyle)({ color: style.color }), className: (0, utils_1.classnames)(avatar_style_1.classes.root, props.className), style: {
+            width: style.size,
+            ...props.style
+        }, "data-shape": shape, children: src
+            ? (0, jsx_runtime_1.jsx)("img", { src: src, alt: "", ...imgProps, ref: imgRef, className: (0, utils_1.classnames)(avatar_style_1.classes.img, imgProps?.className) })
+            : props.children }));
+}));
+exports.Avatar.Group = avatarGroup_1.AvatarGroup;

package/dist/cjs/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/cjs/components/avatar/avatar.style.js

@@ -0,0 +1,39 @@
+"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)('avatar', [
+    'img'
+]);
+function useStyle({ color }) {
+    const colorValue = (0, utils_1.useColor)(color);
+    return (0, utils_1.useCss)(({ borderRadius }) => (0, react_1.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(.${exports.classes.img})) {
+            background-color: ${colorValue};
+        }
+
+        .${exports.classes.img} {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+    `, [colorValue]);
+}

package/dist/cjs/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/cjs/components/avatar/avatarGroup.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AvatarGroup = 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 avatarGroup_style_1 = require("./avatarGroup.style");
+const avatar_1 = require("./avatar");
+exports.AvatarGroup = (0, react_2.memo)((0, react_2.forwardRef)(({ color, size, shape = 'circular', imgProps, imgRef, items, hoverable = true, max = 5, total, renderSurplus, ...props }, ref) => {
+    const itemStyle = (0, avatar_1.useAvatarStyle)({ color, size });
+    const commonProps = {
+        ...itemStyle,
+        shape,
+        imgProps,
+        imgRef
+    };
+    total ??= items?.length ?? react_2.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) => (0, react_1.createElement)(avatar_1.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 react_2.Children.toArray(props.children).slice(0, isSurplus ? max - 1 : max).reverse().map(child => {
+            return (0, react_2.isValidElement)(child)
+                ? (0, react_2.cloneElement)(child, {
+                    ...commonProps,
+                    ...child.props
+                })
+                : child;
+        });
+    };
+    const renderSurplusFn = () => {
+        if (!isSurplus) {
+            return;
+        }
+        const surplus = total - max + 1;
+        if (renderSurplus) {
+            return renderSurplus(surplus);
+        }
+        return (0, jsx_runtime_1.jsxs)(avatar_1.Avatar, { children: ["+", surplus] });
+    };
+    return ((0, jsx_runtime_1.jsx)("div", { ...props, ref: ref, css: avatarGroup_style_1.style, className: (0, utils_1.classnames)(avatarGroup_style_1.classes.root), "data-hoverable": hoverable, children: (0, jsx_runtime_1.jsxs)("div", { className: avatarGroup_style_1.classes.wrap, children: [renderSurplusFn(), renderItems()] }) }));
+}));

package/dist/cjs/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/cjs/components/avatar/avatarGroup.style.js

@@ -0,0 +1,40 @@
+"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 avatar_style_1 = require("./avatar.style");
+exports.classes = (0, utils_1.defineClasses)('avatar-group', [
+    'wrap'
+]);
+exports.style = (0, utils_1.defineCss)(({ mode, easing }) => (0, react_1.css) `
+    display: flex;
+    justify-content: flex-start;
+    
+    .${exports.classes.wrap} {
+        display: flex;
+        flex-direction: row-reverse;
+    }
+    
+    &[data-hoverable=true] {
+        .${exports.classes.wrap} {
+            cursor: pointer;
+    
+            &:hover {
+                .${avatar_style_1.classes.root} {
+                    margin: 0;
+                }
+            }
+        }
+    }
+    
+    .${avatar_style_1.classes.root} {
+        position: relative;
+        border: 1px solid ${mode === 'light' ? '#ffffff' : '#999999'};
+    
+        &:not(:last-of-type) {
+            transition: margin .2s ${easing.easeOut};
+            margin-left: -6px;
+        }
+    }
+`);

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

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

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

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

package/dist/cjs/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/cjs/components/backdrop/backdrop.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Backdrop = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const utils_1 = require("../../utils");
+const transitionBase_1 = require("../transitionBase");
+const backdrop_style_1 = require("./backdrop.style");
+exports.Backdrop = (0, react_1.forwardRef)(({ open, variant = 'dark', ...props }, ref) => {
+    return ((0, jsx_runtime_1.jsx)(transitionBase_1.Fade, { ...props, ref: ref, css: (0, backdrop_style_1.useStyle)({ variant }), in: open, className: (0, utils_1.classnames)(backdrop_style_1.classes.root, props.className) }));
+});

package/dist/cjs/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/cjs/components/backdrop/backdrop.style.js

@@ -0,0 +1,27 @@
+"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)('backdrop');
+function useStyle({ variant }) {
+    return (0, utils_1.useCss)(({ background, text, spacing }) => {
+        const bgColor = variant === 'dark'
+            ? (0, color_1.default)(text.primary).alpha(.8).string()
+            : (0, color_1.default)(background.card).alpha(.8).string();
+        return (0, react_1.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/cjs/components/backdrop/index.d.ts

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

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

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

package/dist/cjs/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>>;

package/dist/cjs/components/badge/badge.js

@@ -0,0 +1,62 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Badge = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const badge_style_1 = require("./badge.style");
+const utils_1 = require("../../utils");
+exports.Badge = (0, react_1.forwardRef)(({ color = 'error', placement = 'topRight', variant = 'standard', count = 0, max = 99, showZero, offsetX = 0, offsetY = 0, ...props }, ref) => {
+    const renderedCount = typeof count === 'number'
+        ? Math.min(count, max)
+        : count;
+    const isOverflow = typeof count === 'number' && count > max;
+    const badgeStyle = (0, react_1.useMemo)(() => {
+        const [, placeA, placeB] = placement.match(/^(top|bottom|left|right)(top|bottom|left|right)?/i);
+        let top = 'auto', bottom = 'auto', left = 'auto', right = 'auto';
+        switch (placeA) {
+            case 'top':
+                top = '0';
+                left = '50%';
+                break;
+            case 'bottom':
+                bottom = '0';
+                left = '50%';
+                break;
+            case 'left':
+                top = '50%';
+                left = '0';
+                break;
+            case 'right':
+                top = '50%';
+                right = '0';
+        }
+        switch (placeB) {
+            case 'Top':
+                top = '0';
+                break;
+            case 'Bottom':
+                top = 'auto';
+                bottom = '0';
+                break;
+            case 'Left':
+                left = '0';
+                break;
+            case 'Right':
+                left = 'auto';
+                right = '0';
+        }
+        return { top, bottom, left, right };
+    }, [placement]);
+    if (typeof offsetX === 'number') {
+        offsetX += 'px';
+    }
+    if (typeof offsetY === 'number') {
+        offsetY += 'px';
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { ...props, ref: ref, css: (0, badge_style_1.useStyle)({ color }), className: (0, utils_1.classnames)(badge_style_1.classes.root, props.className), "data-variant": variant, "data-zero": !showZero && !renderedCount, children: [!!props.children &&
+                (0, jsx_runtime_1.jsx)("div", { className: badge_style_1.classes.children, children: props.children }), (0, jsx_runtime_1.jsx)("div", { className: badge_style_1.classes.badge, style: {
+                    ...badgeStyle,
+                    transform: `translate(${offsetX}, ${offsetY})`
+                }, children: (0, jsx_runtime_1.jsx)("div", { className: badge_style_1.classes.badgeWrap, children: variant !== 'dot' &&
+                        (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [renderedCount, isOverflow && '+'] }) }) })] }));
+});

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

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

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

@@ -0,0 +1,70 @@
+"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)('badge', [
+    'children',
+    'badge',
+    'badgeWrap'
+]);
+function useStyle({ color }) {
+    const colorValue = (0, utils_1.useColor)(color);
+    return (0, utils_1.useCss)(({ easing }) => (0, react_1.css) `
+        display: inline-flex;
+        position: relative;
+
+        .${exports.classes.badge} {
+            .${exports.classes.badgeWrap} {
+                line-height: 1;
+                background-color: ${colorValue};
+                color: #ffffff;
+                border: 1px solid #ffffff;
+                font-size: ${13 / 14}em;
+                top: 0;
+                left: 0;
+                transition: transform .2s ${easing.swing};
+            }
+        }
+
+        &:has(.${exports.classes.children}) {
+            .${exports.classes.badge},
+            .${exports.classes.badgeWrap} {
+                position: absolute;
+            }
+
+            .${exports.classes.badgeWrap} {
+                transform: translate(-50%, -50%);
+            }
+        }
+
+        &[data-variant=standard] {
+            .${exports.classes.badgeWrap} {
+                border-radius: 1000em;
+                padding: 2px 6px 3px;
+            }
+        }
+
+        &[data-variant=dot] {
+            .${exports.classes.badgeWrap} {
+                width: 9px;
+                height: 9px;
+                border-radius: 50%;
+            }
+        }
+
+        &[data-zero=true] {
+            .${exports.classes.badgeWrap} {
+                transform: scale(0);
+                transition: transform .2s ${easing.easeOut};
+            }
+
+            &:has(.${exports.classes.children}) {
+                .${exports.classes.badgeWrap} {
+                    transform: translate(-50%, -50%) scale(0);
+                }
+            }
+        }
+    `, [colorValue]);
+}

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

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

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

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