@canlooks/can-ui 0.0.25 → 0.0.27

package/dist/esm/components/anchorList/anchorList.js

@@ -0,0 +1,92 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { classes, style } from './anchorList.style';
+import { clsx, listenAllPredecessorsScroll, useDerivedState, useSyncState } from '../../utils';
+import { memo, useEffect, useRef } from 'react';
+import { Flex } from '../flex';
+import { ActiveIndicator } from './activeIndicator';
+export const AnchorList = memo(({ anchors, renderAnchorItem, indent = 24, scroller, routeMode = 'history', offset = 0, scrollBehavior = 'smooth', ...props }) => {
+    const anchorRefs = useRef(new Map());
+    /**
+     * ------------------------------------------------------------------------
+     * 初始化高亮与滚动位置
+     */
+    const initialized = useRef(false);
+    useEffect(() => {
+        if (routeMode === 'history') {
+            initialized.current ||= scrollToId(location.hash.slice(1));
+        }
+    });
+    const scrollToId = (id) => {
+        const targetEl = document.getElementById(id);
+        if (!targetEl) {
+            return false;
+        }
+        getScroller().scrollTo({
+            top: targetEl.offsetTop - offset,
+            // 初始化之前无需平滑滚动
+            behavior: initialized.current ? scrollBehavior : 'instant'
+        });
+        return true;
+    };
+    /**
+     * ------------------------------------------------------------------------
+     * 拦截原生点击事件
+     */
+    const clickHandler = (e) => {
+        if (routeMode !== 'history' || e.ctrlKey) {
+            return;
+        }
+        const hash = e.target.getAttribute('href');
+        if (hash?.[0] !== '#') {
+            return;
+        }
+        if (scrollToId(hash.slice(1))) {
+            e.preventDefault();
+            history.pushState(void 0, '', hash);
+        }
+    };
+    /**
+     * ------------------------------------------------------------------------
+     * 监听滚动设置高亮
+     */
+    const getScroller = () => {
+        return (typeof scroller === 'function' ? scroller() : scroller) || document.documentElement;
+    };
+    const [activeId, setActiveId] = useSyncState();
+    useEffect(() => {
+        const scrollerEl = getScroller();
+        const scroll = () => {
+            let nearest;
+            let minDistance = Infinity;
+            const targets = anchors?.map(item => document.getElementById(item.id));
+            targets?.forEach(target => {
+                const top = target?.getBoundingClientRect().top;
+                if (typeof top === 'number') {
+                    const distance = Math.abs(top - offset);
+                    if (distance < minDistance) {
+                        minDistance = distance;
+                        nearest = target;
+                    }
+                }
+            });
+            nearest && setActiveId(nearest.id);
+        };
+        !activeId.current && scroll();
+        return listenAllPredecessorsScroll(scrollerEl === document.documentElement ? document : scrollerEl, scroll);
+    }, [anchors, scroller, offset]);
+    const [animating, setAnimating] = useDerivedState(prev => typeof prev !== 'undefined', [activeId.current]);
+    return (_jsxs(Flex, { direction: "column", alignItems: "flex-start", ...props, css: style, className: clsx(classes.root, props.className), "data-animating": animating.current, children: [anchors?.map(item => {
+                const active = item.active || activeId.current === item.id;
+                if (renderAnchorItem) {
+                    return renderAnchorItem(item, active);
+                }
+                return (_jsx("a", { ref: r => {
+                        r
+                            ? anchorRefs.current.set(item.id, r)
+                            : anchorRefs.current.delete(item.id);
+                    }, className: classes.item, href: '#' + item.id, style: {
+                        paddingLeft: (item.level || 0) * indent + 15
+                    }, "data-active": active, onClick: clickHandler, children: item.label }, item.id));
+            }), !renderAnchorItem &&
+                _jsx(ActiveIndicator, { activeId: activeId.current, anchorRefs: anchorRefs.current, onTransitionEnd: () => setAnimating(false) })] }));
+});

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

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

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

@@ -0,0 +1,57 @@
+import { defineClasses, defineCss } from '../../utils';
+import { css } from '@emotion/react';
+export const classes = defineClasses('anchor-list', [
+    'item',
+    'indicator'
+]);
+export const style = defineCss(({ colors, easing }) => css `
+    position: relative;
+
+    .${classes.item} {
+        padding: 5px 0;
+        color: inherit;
+        text-decoration: none;
+        position: relative;
+        transition: all .25s ${easing.easeOut};
+        -webkit-tap-highlight-color: transparent;
+
+        &:hover, &[data-active=true] {
+            color: ${colors.primary.main};
+        }
+
+        &:not([data-active=true]):active {
+            transition: all 0s;
+            opacity: .7;
+        }
+        
+        &:before {
+            content: '';
+            top: 8px;
+            display: none;
+        }
+    }
+
+    .${classes.item}:before, .${classes.indicator} {
+        width: 2px;
+        height: 1em;
+        background: ${colors.primary.main};
+        position: absolute;
+        left: 0;
+    }
+
+    .${classes.indicator} {
+        top: 0;
+        transition: top .3s ${easing.bounce};
+    }
+    
+    
+    &:not([data-animating=true]) {
+        .${classes.item}[data-active=true]:before {
+            display: block;
+        }
+
+        .${classes.indicator} {
+            display: none;
+        }
+    }
+`);

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

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

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

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

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

@@ -1,25 +1,24 @@
-import { ReactElement } from 'react';
-import { DIVProps } from '../../types';
+import { ElementType } from 'react';
+import { OverridableComponent, OverridableProps } from '../../types';
 import { ThemeProviderProps } from '../theme';
 import { AppDialogMethods } from './appDialog';
 import { AppMessageMethods } from './appMessage';
 import { AppNotificationMethods } from './appNotification';
 import { AppActionSheetMethods } from './appActionSheet';
-export interface AppProps extends ThemeProviderProps, DIVProps {
-    component?: any;
-    /** 尺寸是否占满父节点，默认为`true` */
+export interface AppOwnProps extends ThemeProviderProps {
     fill?: boolean;
 }
+export type AppProps<C extends ElementType = 'div'> = OverridableProps<AppOwnProps, C>;
 export declare function useAppContext(): {
     dialog: AppDialogMethods;
     message: AppMessageMethods<import("../snackbarBase").SnackbarBaseProps>;
     notification: AppNotificationMethods<import("./appNotification").AppNotificationProps>;
+    actionSheet: AppActionSheetMethods;
 };
-export declare const App: {
-    (props: AppProps): ReactElement;
+export declare const App: OverridableComponent<AppOwnProps> & {
     dialog: AppDialogMethods;
     message: AppMessageMethods;
     notification: AppNotificationMethods;
     actionSheet: AppActionSheetMethods;
 };
-export declare function InnerApp({ component: Component, theme, children, fill, ...props }: AppProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function InnerApp({ component: Component, theme, children, fill, ...props }: OverridableProps<AppProps, 'div'>): import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { createContext, useContext, useMemo } from 'react';
-import { classnames } from '../../utils';
+import { clsx, defineCss } from '../../utils';
 import { classes, style } from './app.style';
 import { ThemeProvider } from '../theme';
 import { AppDialog, AppDialogMethods } from './appDialog';
@@ -8,16 +8,18 @@ import { AppMessage, AppMessageMethods } from './appMessage';
 import { AppNotification, AppNotificationMethods } from './appNotification';
 import { AppActionSheet, AppActionSheetMethods } from './appActionSheet';
 import { css } from '@emotion/react';
+import { GlobalEventDelegation } from './globalEventDelegation';
 const AppContext = createContext({
     dialog: new AppDialogMethods(),
     message: new AppMessageMethods(),
     notification: new AppNotificationMethods(),
+    actionSheet: new AppActionSheetMethods()
 });
 export function useAppContext() {
     return useContext(AppContext);
 }
 export const App = (({ theme, ...props }) => {
-    return (_jsx(ThemeProvider, { theme: theme, children: _jsx(InnerApp, { ...props }) }));
+    return (_jsx(GlobalEventDelegation, { children: _jsx(ThemeProvider, { theme: theme, children: _jsx(InnerApp, { ...props }) }) }));
 });
 export function InnerApp({ component: Component = 'div', theme, children, fill = true, ...props }) {
     const appValue = useMemo(() => ({
@@ -29,11 +31,14 @@ export function InnerApp({ component: Component = 'div', theme, children, fill =
     return (_jsxs(AppContext, { value: appValue, children: [Component
                 ? _jsx(Component, { ...props, css: [
                         style,
+                        defineCss(({ background }) => css `
+                            background-color: ${background.body};
+                        `),
                         fill && css `
                             width: 100%;
                             height: 100%;
                             flex: 1;
                         `
-                    ], className: classnames(classes.root, props.className), children: children })
+                    ], className: clsx(classes.root, props.className), children: children })
                 : children, _jsx(AppDialog, { methods: appValue.dialog }), _jsx(AppMessage, { methods: appValue.message }), _jsx(AppNotification, { methods: appValue.notification }), _jsx(AppActionSheet, { methods: appValue.actionSheet })] }));
 }

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

@@ -6,7 +6,7 @@ export const appStyleCallback = (theme) => css `
     box-sizing: border-box;
     font-size: ${theme.fontSize}px;
     color: ${theme.text.primary};
-    background-color: ${theme.background.body};
+    color-scheme: ${theme.mode};
     zoom: ${theme.zoom};
 
     * {

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

@@ -2,8 +2,10 @@ import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { isValidElement, memo, useState } from 'react';
 import { ActionSheet } from '../actionSheet';
 export class AppActionSheetMethods {
-    async confirm() { }
-    async open(props, ...args) { }
+    async confirm() {
+    }
+    async open(props, ...args) {
+    }
 }
 export const AppActionSheet = memo(({ methods }) => {
     const [stacks, setStacks] = useState([]);

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

@@ -1,8 +1,9 @@
 import { ReactNode } from 'react';
 import { DialogProps } from '../dialog';
-export interface AppDialogProps extends Omit<DialogProps, 'content' | 'onConfirm'> {
+export interface AppDialogProps extends Omit<DialogProps, 'content' | 'onConfirm' | 'onCancel'> {
     content?: ReactNode;
     onConfirm?(...args: any[]): any;
+    onCancel?(...args: any[]): any;
 }
 export declare class AppDialogMethods {
     info(props: AppDialogProps, ...args: any[]): Promise<void>;

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

@@ -21,8 +21,8 @@ export const AppDialog = memo(({ methods }) => {
                     await props.onConfirm?.(...args);
                     resolve();
                 },
-                onCancel(e) {
-                    props.onCancel?.(e);
+                onCancel() {
+                    props.onCancel?.(...args);
                     reject();
                 },
                 onClosed() {

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

@@ -0,0 +1,6 @@
+import { ReactNode, RefObject } from 'react';
+export declare const DelegationContext: import("react").Context<RefObject<MouseEvent | null>>;
+export declare function useEventDelegation(): RefObject<MouseEvent | null>;
+export declare function GlobalEventDelegation(props: {
+    children?: ReactNode;
+}): import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { createContext, useContext, useEffect, useRef } from 'react';
+export const DelegationContext = createContext({
+    current: null
+});
+export function useEventDelegation() {
+    return useContext(DelegationContext);
+}
+export function GlobalEventDelegation(props) {
+    const contextValue = useRef(null);
+    useEffect(() => {
+        const click = (e) => {
+            contextValue.current = e;
+        };
+        document.addEventListener('click', click, { capture: true });
+        return () => {
+            document.removeEventListener('click', click);
+        };
+    }, []);
+    return (_jsx(DelegationContext, { value: contextValue, children: props.children }));
+}

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

@@ -3,10 +3,10 @@ import { Children, isValidElement, memo, useCallback, useEffect, useMemo, useRef
 import { Popper } from '../popper';
 import { OptionsBase } from '../optionsBase';
 import { Input } from '../input';
-import { cloneRef, isUnset, useControlled, useDerivedState, useLoading, useSync } from '../../utils';
+import { clsx, cloneRef, isUnset, useControlled, useDerivedState, useLoading, useSync } from '../../utils';
 import { classes } from './autocomplete.style';
 import { popperStyle } from '../popper/popper.style';
-export const Autocomplete = memo(({ ref, children, loading, options, loadOptions, primaryKey = 'value', labelKey = 'label', onSelect, renderInput, popperProps, popperRef, defaultValue = '', value, onChange, ...props }) => {
+export const Autocomplete = memo(({ children, loading, options, loadOptions, primaryKey = 'value', labelKey = 'label', onSelect, renderInput, popperProps, popperRef, defaultValue = '', value, onChange, ...props }) => {
     const [focused, _setFocused] = useState(false);
     const setFocused = (focused) => {
         !props.disabled && !props.readOnly && _setFocused(focused);
@@ -33,17 +33,17 @@ export const Autocomplete = memo(({ ref, children, loading, options, loadOptions
      * ------------------------------------------------------------------
      * 合并最终选项
      */
-    const optionsArr = innerOptions || options || Children.map(children, c => isValidElement(c) ? c.props : c) || void 0;
+    const actualOptions = innerOptions || options || Children.map(children, c => isValidElement(c) ? c.props : c) || void 0;
     const optionsMap = useMemo(() => {
         const map = new Map();
-        optionsArr?.forEach(opt => {
+        actualOptions?.forEach(opt => {
             if (opt && typeof opt === 'object') {
                 const key = opt[primaryKey];
                 !isUnset(key) && map.set(key, opt);
             }
         });
         return map;
-    }, [optionsArr, primaryKey]);
+    }, [actualOptions, primaryKey]);
     const [open, _setOpen] = useDerivedState(() => {
         return focused && !!optionsMap.size;
     }, [focused, optionsMap.size]);
@@ -54,24 +54,23 @@ export const Autocomplete = memo(({ ref, children, loading, options, loadOptions
             _setOpen(open);
         }
     };
-    const inputRef = useRef(null);
+    const innerInputRef = useRef(null);
     const syncOnSelect = useSync(onSelect);
     const optionSelectHandler = useCallback((value, e) => {
         const option = optionsMap.get(value);
-        inputRef.current.value = option[labelKey];
+        innerInputRef.current.value = option[labelKey];
         syncOnSelect.current?.(value, option);
         changeHandler({
             ...e,
-            target: inputRef.current,
-            currentTarget: inputRef.current
+            target: innerInputRef.current,
+            currentTarget: innerInputRef.current
         }, true);
         setOpen(false);
     }, [optionsMap]);
     const inputProps = {
         ...props,
-        ref,
-        className: classes.root,
-        inputRef: cloneRef(inputRef, props.inputRef),
+        ref: cloneRef(innerInputRef, props.ref),
+        className: clsx(classes.root, props.className),
         loading: innerLoading.current,
         value: innerValue.current,
         onChange: changeHandler,
@@ -92,7 +91,7 @@ export const Autocomplete = memo(({ ref, children, loading, options, loadOptions
             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 => {
+    return (_jsx(Popper, { css: popperStyle, open: open.current, placement: "bottom", variant: "collapse", trigger: false, content: _jsx(OptionsBase, { onToggleSelected: optionSelectHandler, loading: innerLoading.current, options: actualOptions, labelKey: labelKey, primaryKey: primaryKey, children: children }), ...popperProps, popperRef: popperRef, onOpenChange: setOpen, onPointerDown: e => {
             popperProps?.onPointerDown?.(e);
             e.preventDefault();
         }, children: renderInput

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

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

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

@@ -1,14 +1,14 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { memo, useMemo } from 'react';
 import { classes, useStyle } from './avatar.style';
-import { classnames } from '../../utils';
+import { clsx } from '../../utils';
 import { useTheme } from '../theme';
 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),
+        color: props.color || gray(mode === 'light' ? .2 : .3),
         size: {
             small: 24,
             medium: 32,
@@ -16,13 +16,13 @@ export function useAvatarStyle(props) {
         }[_size] || _size
     }), [props.color, mode, _size]);
 }
-export const Avatar = memo(({ color, size, shape = 'circular', src, imgProps, imgRef, ...props }) => {
+export const Avatar = memo(({ color, size, shape = 'circular', src, imgProps, ...props }) => {
     const style = useAvatarStyle({ color, size });
-    return (_jsx("div", { ...props, css: useStyle({ color: style.color }), className: classnames(classes.root, props.className), style: {
+    return (_jsx("div", { ...props, css: useStyle({ color: style.color }), className: clsx(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) })
+            ? _jsx("img", { src: src, alt: "", ...imgProps, className: clsx(classes.img, imgProps?.className) })
             : props.children }));
 });
 Avatar.Group = AvatarGroup;

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

@@ -11,4 +11,4 @@ export interface AvatarGroupProps extends Omit<AvatarProps, 'src'> {
     /** 超过最大限制时，渲染的额外头像 */
     renderSurplus?(surplus: number): ReactNode;
 }
-export declare const AvatarGroup: import("react").MemoExoticComponent<({ color, size, shape, imgProps, imgRef, items, hoverable, max, total, renderSurplus, ...props }: AvatarGroupProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
+export declare const AvatarGroup: import("react").MemoExoticComponent<({ color, size, shape, imgProps, items, hoverable, max, total, renderSurplus, ...props }: AvatarGroupProps) => import("@emotion/react/jsx-runtime").JSX.Element>;

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

@@ -1,22 +1,21 @@
 import { jsxs as _jsxs, jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { createElement as _createElement } from "@emotion/react";
 import { Children, cloneElement, isValidElement, memo } from 'react';
-import { classnames } from '../../utils';
+import { clsx } from '../../utils';
 import { classes, style } from './avatarGroup.style';
 import { Avatar, useAvatarStyle } from './avatar';
-export const AvatarGroup = memo(({ color, size, shape = 'circular', imgProps, imgRef, items, hoverable = true, max = 5, total, renderSurplus, ...props }) => {
+export const AvatarGroup = memo(({ color, size, shape = 'circular', imgProps, items, hoverable = true, max = 5, total, renderSurplus, ...props }) => {
     const itemStyle = useAvatarStyle({ color, size });
     const commonProps = {
         ...itemStyle,
         shape,
-        imgProps,
-        imgRef
+        imgProps
     };
     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 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 }, p.children));
         }
         return Children.toArray(props.children).slice(0, isSurplus ? max - 1 : max).reverse().map(child => {
             return isValidElement(child)
@@ -37,5 +36,5 @@ export const AvatarGroup = memo(({ color, size, shape = 'circular', imgProps, im
         }
         return _jsxs(Avatar, { children: ["+", surplus] });
     };
-    return (_jsx("div", { ...props, css: style, className: classnames(classes.root), "data-hoverable": hoverable, children: _jsxs("div", { className: classes.wrap, children: [renderSurplusFn(), renderItems()] }) }));
+    return (_jsx("div", { ...props, css: style, className: clsx(classes.root), "data-hoverable": hoverable, children: _jsxs("div", { className: classes.wrap, children: [renderSurplusFn(), renderItems()] }) }));
 });

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

@@ -30,7 +30,7 @@ export const style = defineCss(({ mode, easing }) => css `
         border: 1px solid ${mode === 'light' ? '#ffffff' : '#999999'};
     
         &:not(:last-of-type) {
-            transition: margin .2s ${easing.easeOut};
+            transition: margin .25s ${easing.easeOut};
             margin-left: -6px;
         }
     }

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

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

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

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
-import { ColorPropsValue, DIVProps, Placement } from '../../types';
-export interface BadgeProps extends DIVProps {
+import { ColorPropsValue, DivProps, Placement } from '../../types';
+export interface BadgeProps extends DivProps {
     color?: ColorPropsValue;
     placement?: Placement;
     variant?: 'dot' | 'standard';

package/dist/esm/components/badge/badge.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { useMemo } from 'react';
 import { classes, useStyle } from './badge.style';
-import { classnames } from '../../utils';
+import { clsx } from '../../utils';
 export function Badge({ color = 'error', placement = 'topRight', variant = 'standard', count = 0, max = 99, showZero, offsetX = 0, offsetY = 0, ...props }) {
     const renderedCount = typeof count === 'number'
         ? Math.min(count, max)
@@ -50,7 +50,7 @@ export function Badge({ color = 'error', placement = 'topRight', variant = 'stan
     if (typeof offsetY === 'number') {
         offsetY += 'px';
     }
-    return (_jsxs("div", { ...props, css: useStyle({ color }), className: classnames(classes.root, props.className), "data-variant": variant, "data-zero": !showZero && !renderedCount, children: [!!props.children &&
+    return (_jsxs("div", { ...props, css: useStyle({ color: color || 'error' }), className: clsx(classes.root, props.className), "data-variant": variant, "data-zero": !showZero && !renderedCount, children: [!!props.children &&
                 _jsx("div", { className: classes.children, children: props.children }), _jsx("div", { className: classes.badge, style: {
                     ...badgeStyle,
                     transform: `translate(${offsetX}, ${offsetY})`

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

@@ -20,7 +20,7 @@ export function useStyle({ color }) {
                 font-size: ${13 / 14}em;
                 top: 0;
                 left: 0;
-                transition: transform .2s ${easing.swing};
+                transition: transform .25s ${easing.swing};
             }
         }
 
@@ -53,7 +53,7 @@ export function useStyle({ color }) {
         &[data-zero=true] {
             .${classes.badgeWrap} {
                 transform: scale(0);
-                transition: transform .2s ${easing.easeOut};
+                transition: transform .25s ${easing.easeOut};
             }
 
             &:has(.${classes.children}) {

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

@@ -1,8 +1,8 @@
 import { ReactElement } from 'react';
-import { DIVProps, Id, Obj } from '../../types';
+import { DivProps, Id, Obj } from '../../types';
 import { BottomNavigationItemProps } from './bottomNavigationItem';
 type BottomNavigationItemType = BottomNavigationItemProps & Obj;
-export interface BottomNavigationProps<I extends BottomNavigationItemType> extends Omit<DIVProps, 'defaultValue' | 'onChange'> {
+export interface BottomNavigationProps<I extends BottomNavigationItemType> extends Omit<DivProps, 'defaultValue' | 'onChange'> {
     items?: I[];
     /** 未激活状态下是否显示label，items数量小于等于3时默认为`true`，否则为`false` */
     showLabelInactive?: boolean;

package/dist/esm/components/bottomNavigation/bottomNavigation.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { Children, cloneElement, isValidElement, memo } from 'react';
 import { classes, style } from './bottomNavigation.style';
-import { classnames, isUnset, useControlled } from '../../utils';
+import { clsx, isUnset, useControlled } from '../../utils';
 import { BottomNavigationItem } from './bottomNavigationItem';
 export const BottomNavigation = memo(({ items, showLabelInactive, primaryKey = 'value', labelKey = 'label', defaultValue = 'children', value, onChange, ...props }) => {
     const [innerValue, setInnerValue] = useControlled(defaultValue, value, onChange);
@@ -31,5 +31,5 @@ export const BottomNavigation = memo(({ items, showLabelInactive, primaryKey = '
             return c;
         });
     };
-    return (_jsx("div", { ...props, css: style, className: classnames(classes.root, props.className), children: renderItems() }));
+    return (_jsx("div", { ...props, css: style, className: clsx(classes.root, props.className), children: renderItems() }));
 });

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

@@ -22,9 +22,11 @@ export const style = defineCss(({ background, text, easing, colors }) => {
             flex-direction: column;
             align-items: center;
             justify-content: center;
+            gap: 4px;
             cursor: pointer;
             color: ${text.secondary};
-            transition: background-color .2s ${easing.easeOut};
+            transition: background-color .25s ${easing.easeOut};
+            -webkit-tap-highlight-color: transparent;
             
             &:hover {
                 &:not([data-active=true]) {
@@ -59,7 +61,7 @@ export const style = defineCss(({ background, text, easing, colors }) => {
 
             .${classes.label} {
                 transition-property: font-size, transform, height;
-                transition-duration: .2s;
+                transition-duration: .25s;
                 transition-timing-function: ${easing.easeOut};
             }
 

package/dist/esm/components/bottomNavigation/bottomNavigationItem.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
-import { DIVProps, Id } from '../../types';
-export interface BottomNavigationItemProps extends DIVProps {
+import { DivProps, Id } from '../../types';
+export interface BottomNavigationItemProps extends DivProps {
     value?: Id;
     icon?: ReactNode;
     label?: ReactNode;

package/dist/esm/components/bottomNavigation/bottomNavigationItem.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { memo } from 'react';
-import { classnames } from '../../utils';
+import { clsx } from '../../utils';
 import { classes } from './bottomNavigation.style';
 export const BottomNavigationItem = memo(({ value, icon, label, showLabelInactive = true, active, ...props }) => {
-    return (_jsxs("div", { ...props, className: classnames(classes.item, props.className), "data-active": active, "data-show-label-inactive": showLabelInactive, children: [!!icon &&
+    return (_jsxs("div", { ...props, className: clsx(classes.item, props.className), "data-active": active, "data-show-label-inactive": showLabelInactive, children: [!!icon &&
                 _jsx("div", { className: classes.icon, children: icon }), !!label &&
                 _jsx("div", { className: classes.label, children: label })] }));
 });