@canlooks/can-ui 0.0.21 → 0.0.23

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

@@ -1,5 +1,5 @@
 import { CSSProperties, ReactElement, ReactNode } from 'react';
-import { ColorPropsValue, DIVProps, Id, Obj, Size } from '../../../types';
+import { ColorPropsValue, DIVProps, Id, Obj, Size } from '../../types';
 import { Tab, TabProps } from './tab';
 export type TabType = TabProps & Obj;
 export interface TabsProps<T extends TabType = TabType> extends Omit<DIVProps, 'prefix' | 'defaultValue' | 'onChange'> {
@@ -9,7 +9,7 @@ export interface TabsProps<T extends TabType = TabType> extends Omit<DIVProps, '
     variant?: 'line' | 'card';
     color?: ColorPropsValue;
     size?: Size;
-    /**选项卡的位置，@default "top" */
+    /**选项卡的位置，默认为`top` */
     position?: 'top' | 'bottom' | 'left' | 'right';
     justifyContent?: CSSProperties['justifyContent'];
     fullWidth?: boolean;

package/dist/esm/components/tabs/tabs.js

@@ -1,15 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { Children, cloneElement, createContext, forwardRef, isValidElement, memo, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { Children, cloneElement, createContext, isValidElement, memo, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { classes, indicatorWidth, useStyle } from './tabs.style';
 import { classnames, cloneRef, colorTransfer, isUnset, useControlled, useDerivedState } from '../../utils';
-import { useTheme } from '../app';
+import { useTheme } from '../theme';
 import { Tab } from './tab';
 import { TabsEllipsis } from './tabsEllipsis';
-const tabsContext = createContext({});
+const TabsContext = createContext({});
 export function useTabsContext() {
-    return useContext(tabsContext);
+    return useContext(TabsContext);
 }
-export const Tabs = memo(forwardRef(({ tabs, labelKey = 'label', primaryKey = 'value', variant = 'line', color = 'primary', size, position = 'top', justifyContent = 'flex-start', fullWidth, prefix, suffix, defaultValue, value, onChange, readOnly, disabled, ...props }, ref) => {
+export const Tabs = memo(({ tabs, labelKey = 'label', primaryKey = 'value', variant = 'line', color = 'primary', size, position = 'top', justifyContent = 'flex-start', fullWidth, prefix, suffix, defaultValue, value, onChange, readOnly, disabled, ...props }) => {
     const theme = useTheme();
     size ??= theme.size;
     const [animating, setAnimating] = useState(false);
@@ -72,7 +72,12 @@ export const Tabs = memo(forwardRef(({ tabs, labelKey = 'label', primaryKey = 'v
             return tabs.map((p, i) => {
                 const value = p[primaryKey];
                 const active = !isUnset(value) && value === innerValue.current;
-                return (_jsx(Tab, { prefix: p.prefix, suffix: p.suffix, color: p.color, orientation: p.orientation, disabled: p.disabled, ref: el => tabRefs.current.set(value, { el, color: p.color || 'primary' }), value: value, label: p[labelKey], onClick: e => {
+                return (_jsx(Tab, { prefix: p.prefix, suffix: p.suffix, color: p.color, orientation: p.orientation, disabled: p.disabled, ref: el => {
+                        tabRefs.current.set(value, { el, color: p.color || 'primary' });
+                        return () => {
+                            tabRefs.current.delete(value);
+                        };
+                    }, value: value, label: p[labelKey], onClick: e => {
                         p.onClick?.(e);
                         setInnerValue(value);
                     }, _active: active }, p.key ?? value ?? i));
@@ -139,13 +144,13 @@ export const Tabs = memo(forwardRef(({ tabs, labelKey = 'label', primaryKey = 'v
             shouldScroll.current = false;
         }
     }, [shouldScroll.current]);
-    return (_jsxs("div", { ...props, ref: ref, css: useStyle({ color, variant }), className: classnames(classes.root, props.className), "data-size": size, "data-animating": animating, "data-position": position, "data-full-width": fullWidth, "data-read-only": readOnly, "data-disabled": disabled, children: [_jsx("div", { className: classes.start, "data-show": shadowStart, children: !!prefix &&
-                    _jsx("div", { className: classes.prefix, children: prefix }) }), _jsx("div", { ref: scrollRef, className: classes.scroll, onScroll: setShadow, children: _jsxs("div", { className: classes.scrollWrap, style: { justifyContent }, children: [_jsx(tabsContext.Provider, { value: useMemo(() => ({ variant, animating }), [variant, animating]), children: renderTabs() }), variant === 'line' &&
+    return (_jsxs("div", { ...props, css: useStyle({ color, variant }), className: classnames(classes.root, props.className), "data-size": size, "data-animating": animating, "data-position": position, "data-full-width": fullWidth, "data-read-only": readOnly, "data-disabled": disabled, children: [_jsx("div", { className: classes.start, "data-show": shadowStart, children: !!prefix &&
+                    _jsx("div", { className: classes.prefix, children: prefix }) }), _jsx("div", { ref: scrollRef, className: classes.scroll, onScroll: setShadow, children: _jsxs("div", { className: classes.scrollWrap, style: { justifyContent }, children: [_jsx(TabsContext, { value: useMemo(() => ({ variant, animating }), [variant, animating]), children: renderTabs() }), variant === 'line' &&
                             _jsx("div", { className: classes.indicator, onTransitionEnd: () => setAnimating(false), style: {
                                     ...indicatorRect.current,
                                     backgroundColor: activeTab && colorTransfer(activeTab.color, theme)
                                 } })] }) }), _jsx("div", { className: classes.end, "data-show": shadowEnd, children: !!(suffix || shadowStart || shadowEnd) &&
                     _jsxs("div", { className: classes.suffix, children: [(shadowStart || shadowEnd) &&
                                 _jsx(TabsEllipsis, { tabs: tabs, labelKey: labelKey, primaryKey: primaryKey, value: innerValue.current, onToggleSelected: setValueInEllipsis, children: props.children }), suffix] }) })] }));
-}));
+});
 Tabs.Tab = Tab;

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

@@ -1,14 +1,14 @@
 import { TabsProps } from './tabs';
 export declare const classes: {
-    prefix: string;
-    tab: string;
     label: string;
-    suffix: string;
-    indicator: string;
-    end: string;
     start: string;
+    prefix: string;
+    end: string;
     scroll: string;
     ellipsis: string;
+    tab: string;
+    indicator: string;
+    suffix: string;
     scrollWrap: string;
     tabPrefix: string;
     tabSuffix: string;

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

@@ -57,7 +57,7 @@ export function useStyle({ color, variant }) {
                 display: flex;
                 align-items: center;
                 justify-content: center;
-                background-color: ${background.card};
+                background-color: ${background.content};
             }
 
             .${classes.ellipsis} {
@@ -68,7 +68,7 @@ export function useStyle({ color, variant }) {
                 cursor: pointer;
 
                 &:hover {
-                    color: ${colors.primary};
+                    color: ${colors.primary.main};
                 }
             }
 
@@ -306,7 +306,7 @@ export function useStyle({ color, variant }) {
                     transition: color .2s ${easing.easeOut}, background-color .2s ${easing.easeOut};
 
                     &[data-active=true] {
-                        background-color: ${background.card};
+                        background-color: ${background.content};
                     }
                 }
 
@@ -334,7 +334,7 @@ export function useStyle({ color, variant }) {
                         border-radius: ${borderRadius}px ${borderRadius}px 0 0;
 
                         &[data-active=true] {
-                            border-bottom-color: ${background.card};
+                            border-bottom-color: ${background.content};
                         }
                     }
                 }
@@ -344,7 +344,7 @@ export function useStyle({ color, variant }) {
                         border-radius: 0 0 ${borderRadius}px ${borderRadius}px;
 
                         &[data-active=true] {
-                            border-top-color: ${background.card};
+                            border-top-color: ${background.content};
                         }
                     }
                 }
@@ -373,7 +373,7 @@ export function useStyle({ color, variant }) {
                         border-radius: ${borderRadius}px 0 0 ${borderRadius}px;
 
                         &[data-active=true] {
-                            border-right-color: ${background.card};
+                            border-right-color: ${background.content};
                         }
                     }
                 }
@@ -383,7 +383,7 @@ export function useStyle({ color, variant }) {
                         border-radius: 0 ${borderRadius}px ${borderRadius}px 0;
 
                         &[data-active=true] {
-                            border-left-color: ${background.card};
+                            border-left-color: ${background.content};
                         }
                     }
                 }

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

@@ -1,5 +1,5 @@
-import { ReactNode } from 'react';
-import { ColorPropsValue, DIVProps, Size } from '../../../types';
+import React, { ReactNode } from 'react';
+import { ColorPropsValue, DIVProps, Size } from '../../types';
 export interface TagProps extends Omit<DIVProps, 'prefix'> {
     variant?: 'filled' | 'outlined' | 'plain';
     color?: ColorPropsValue;
@@ -11,4 +11,4 @@ export interface TagProps extends Omit<DIVProps, 'prefix'> {
     closable?: boolean;
     onClose?: React.MouseEventHandler<HTMLDivElement>;
 }
-export declare const Tag: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<TagProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>>;
+export declare const Tag: React.MemoExoticComponent<({ variant, color, shape, size, prefix, suffix, clickable, closable, onClose, ...props }: TagProps) => import("@emotion/react/jsx-runtime").JSX.Element>;

package/dist/esm/components/tag/tag.js

@@ -1,16 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { forwardRef, memo } from 'react';
+import { memo } from 'react';
 import { classes, useStyle } from './tag.style';
 import { classnames } from '../../utils';
 import { CloseOutlined } from '@ant-design/icons';
-export const Tag = memo(forwardRef(({ variant = 'outlined', color = 'text', shape = 'square', size = 'small', prefix, suffix, clickable, closable, onClose, ...props }, ref) => {
+export const Tag = memo(({ variant = 'outlined', color = 'text.secondary', shape = 'square', size = 'small', prefix, suffix, clickable, closable, onClose, ...props }) => {
     const closeHandler = (e) => {
         e.preventDefault();
         e.stopPropagation();
         onClose?.(e);
     };
-    return (_jsxs("div", { ...props, ref: ref, css: useStyle({ color }), className: classnames(classes.root, props.className), "data-variant": variant, "data-size": size, "data-shape": shape, "data-clickable": clickable, children: [!!prefix &&
+    return (_jsxs("div", { ...props, css: useStyle({ color }), className: classnames(classes.root, props.className), "data-variant": variant, "data-size": size, "data-shape": shape, "data-clickable": clickable, children: [!!prefix &&
                 _jsx("div", { className: classes.prefix, children: prefix }), _jsx("div", { className: classes.content, children: props.children }), !!suffix &&
                 _jsx("div", { className: classes.suffix, children: suffix }), closable &&
                 _jsx("div", { className: classes.close, onClick: closeHandler, children: _jsx(CloseOutlined, {}) })] }));
-}));
+});

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

@@ -1,9 +1,9 @@
-import { Ref } from 'react';
+import React, { Ref } from 'react';
 import { InputBaseProps } from '../inputBase';
 export interface TextareaProps extends Omit<InputBaseProps<'textarea'>, 'children' | 'prefix' | 'suffix'> {
-    textareaProps?: JSX.IntrinsicElements['textarea'];
+    textareaProps?: React.JSX.IntrinsicElements['textarea'];
     textareaRef?: Ref<HTMLTextAreaElement>;
     rows?: number;
     fullWidth?: boolean;
 }
-export declare const Textarea: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<TextareaProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>>;
+export declare const Textarea: React.MemoExoticComponent<({ textareaProps, textareaRef, rows, fullWidth, ...props }: TextareaProps) => import("@emotion/react/jsx-runtime").JSX.Element>;

package/dist/esm/components/textarea/textarea.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { forwardRef, memo } from 'react';
+import { memo } from 'react';
 import { InputBase } from '../inputBase';
 import { classes, style } from './textarea.style';
 import { classnames, cloneRef } from '../../utils';
-export const Textarea = memo(forwardRef(({ textareaProps, textareaRef, rows, fullWidth = false, ...props }, ref) => {
-    return (_jsx(InputBase, { ...props, ref: ref, css: style, className: classnames(classes.root, props.className), "data-full-width": fullWidth, children: ({ ref, ...rest }) => _jsx("textarea", { rows: rows, ...rest, ...textareaProps, ref: cloneRef(ref, textareaRef), className: classnames(classes.textarea, textareaProps?.className) }) }));
-}));
+export const Textarea = memo(({ textareaProps, textareaRef, rows, fullWidth = false, ...props }) => {
+    return (_jsx(InputBase, { ...props, css: style, className: classnames(classes.root, props.className), "data-full-width": fullWidth, children: ({ ref, ...rest }) => _jsx("textarea", { rows: rows, ...rest, ...textareaProps, ref: cloneRef(ref, textareaRef), className: classnames(classes.textarea, textareaProps?.className) }) }));
+});

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

@@ -0,0 +1,3 @@
+export * from './themeContext';
+export * from './themeTypes';
+export * from './themeVariables';

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

@@ -0,0 +1,3 @@
+export * from './themeContext';
+export * from './themeTypes';
+export * from './themeVariables';

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

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

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

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { createContext, useContext, useState } from 'react';
+import { defaultDarkTheme, defaultLightTheme, generateColorMembers } from './themeVariables';
+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 definition = typeof theme === 'function' ? theme(themeValue) : theme;
+        let newTheme;
+        if (definition?.colors) {
+            const colors = {};
+            for (const k in definition.colors) {
+                colors[k] = generateColorMembers(definition.colors[k]);
+            }
+            newTheme = { ...definition, colors };
+        }
+        else {
+            newTheme = definition;
+        }
+        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, { value: useThemeProvider(props.theme), children: props.children }));
+}

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

@@ -0,0 +1,59 @@
+import { ColorPresets, ResponsiveValue, Size, TextColorPresets, ThemeEasingName } from '../../types';
+import { Dispatch, SetStateAction } from 'react';
+export type ThemeMode = 'light' | 'dark';
+export interface ColorMember extends Array<string> {
+    light: string;
+    main: string;
+    dark: string;
+}
+export type ThemeColor = {
+    [P in ColorPresets]: ColorMember;
+};
+export type ThemeTextColor = {
+    [P in TextColorPresets]: string;
+};
+export type ThemeBackgroundColor = {
+    content: string;
+    body: string;
+    fixed: string;
+};
+export type ThemeEasing = {
+    [P in ThemeEasingName]: string;
+};
+export type Theme = {
+    mode: ThemeMode;
+    fontSize: number;
+    fontFamily: string;
+    size: Size;
+    borderRadius: number;
+    spacing: number[];
+    gap: number;
+    /**
+     * 获取不同程度的灰色
+     * @param amount 0 至 1，数值越小越靠近背景颜色，数值越大越靠近文字颜色（mode改变后数组会倒转）
+     */
+    gray: (amount: number) => string;
+    divider: string;
+    colors: ThemeColor;
+    text: ThemeTextColor;
+    background: ThemeBackgroundColor;
+    boxShadow: string[];
+    easing: ThemeEasing;
+    breakpoints: ResponsiveValue;
+    zoom: number;
+    update: Dispatch<SetStateAction<ThemeDefinition>>;
+};
+/** Theme对象的深度Partial，使所有子属性全部变成可选 */
+export interface PartialTheme extends Partial<Omit<Theme, 'colors' | 'text' | 'background' | 'easing' | 'breakpoints'>> {
+    colors?: Partial<ThemeColor>;
+    text?: Partial<ThemeTextColor>;
+    background?: Partial<ThemeBackgroundColor>;
+    easing?: Partial<ThemeEasing>;
+    breakpoints?: Partial<ResponsiveValue>;
+}
+/** 设置主题时的`colors`属性与使用主题时的`colors`属性有所不同 */
+export interface ThemeDefinition extends Omit<PartialTheme, 'colors' | 'update'> {
+    colors?: {
+        [P in ColorPresets]: string;
+    };
+}

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,31 @@
+import { ResponsiveValue } from '../../types';
+import { ColorMember, PartialTheme, Theme } from './themeTypes';
+/**
+ * ---------------------------------------------------------------------
+ * 生成单个颜色的其他明亮度配色，0 至 10，数字越小颜色越淡（亮），数字越大颜色越深（暗）
+ */
+export declare function generateColorMembers(color: string): ColorMember;
+/**
+ * ---------------------------------------------------------------------
+ * 统一全局zIndex
+ */
+export declare const zIndex: {
+    overlay: number;
+    popper: number;
+    bubbleConfirm: number;
+    dropdown: number;
+    snackbar: number;
+    tooltip: number;
+};
+export declare const defaultBreakpoints: ResponsiveValue;
+export declare const defaultFontFamily = "-apple-system, BlinkMacSystemFont, 'Segoe UI',\n    Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji',\n    'Segoe UI Symbol', 'Noto Color Emoji', 'Microsoft YaHei UI', sans-serif";
+/**
+ * ---------------------------------------------------------------------
+ * 默认的明亮主题配置
+ */
+export declare const defaultLightTheme: Theme;
+/**
+ * ---------------------------------------------------------------------
+ * 默认的黑暗主题配置
+ */
+export declare const defaultDarkTheme: PartialTheme;

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

@@ -0,0 +1,169 @@
+import Color from 'color';
+/**
+ * ---------------------------------------------------------------------
+ * 获取不同程度的灰色
+ * @param amount 0 至 1，数值越小越靠近背景颜色，数值越大越靠近文字颜色（mode改变后数组会倒转）
+ */
+function gray(amount) {
+    return Color().hue(0).saturationl(0).lightness(100 - amount * 100).hex();
+}
+function rGray(amount) {
+    return gray(1 - amount);
+}
+/**
+ * ---------------------------------------------------------------------
+ * 以3的倍数统一处理间距
+ */
+const defaultSpacing = generateSpacing();
+function generateSpacing() {
+    const spacing = [];
+    for (let i = 0; i <= 10; i++) {
+        spacing[i] = i * 3;
+    }
+    return spacing;
+}
+/**
+ * ---------------------------------------------------------------------
+ * 生成单个颜色的其他明亮度配色，0 至 10，数字越小颜色越淡（亮），数字越大颜色越深（暗）
+ */
+export function generateColorMembers(color) {
+    const member = Array();
+    member.toString = () => color;
+    const colorObj = Color(color);
+    for (let i = 0; i <= 4; i++) {
+        member[i] = colorObj.lighten(1 - (i + 1) / 6).hex();
+    }
+    member[5] = color;
+    for (let i = 6; i <= 10; i++) {
+        member[i] = colorObj.darken((i - 5) / 6).hex();
+    }
+    member.light = member[3];
+    member.main = member[5];
+    member.dark = member[7];
+    return member;
+}
+/**
+ * ---------------------------------------------------------------------
+ * 统一全局zIndex
+ */
+export const zIndex = {
+    overlay: 1000,
+    popper: 1100,
+    bubbleConfirm: 1200,
+    dropdown: 1300,
+    snackbar: 1400,
+    tooltip: 1500
+};
+export const defaultBreakpoints = {
+    xs: 0,
+    sm: 600,
+    md: 900,
+    lg: 1200,
+    xl: 1536
+};
+export const defaultFontFamily = `-apple-system, BlinkMacSystemFont, 'Segoe UI',
+    Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji',
+    'Segoe UI Symbol', 'Noto Color Emoji', 'Microsoft YaHei UI', sans-serif`;
+/**
+ * ---------------------------------------------------------------------
+ * 默认的明亮主题配置
+ */
+export const defaultLightTheme = {
+    mode: 'light',
+    fontSize: 14,
+    fontFamily: defaultFontFamily,
+    size: 'medium',
+    borderRadius: 6,
+    spacing: defaultSpacing,
+    gap: defaultSpacing[6],
+    gray,
+    /** divider: gray(.15), */
+    divider: '#d9d9d9',
+    colors: {
+        primary: generateColorMembers('#1e71ec'),
+        secondary: generateColorMembers('#925CC1'),
+        success: generateColorMembers('#13C13C'),
+        warning: generateColorMembers('#ED9121'),
+        error: generateColorMembers('#DD3F3F'),
+        info: generateColorMembers('#52AEDF')
+    },
+    text: {
+        /* primary: gray(.9), */
+        primary: '#191919',
+        /* secondary: gray(.6), */
+        secondary: '#666666',
+        /* disabled: gray(.4), */
+        disabled: '#999999',
+        /* placeholder: gray(.3), */
+        placeholder: '#b3b3b3',
+        /* inverse: gray(0) */
+        inverse: '#ffffff'
+    },
+    background: {
+        content: '#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: 'cubic-bezier(.65, 0, .35, 1)',
+        bounce: 'cubic-bezier(.5, 2, .5, .7)',
+        swing: 'cubic-bezier(.5, 3, .5, .1)'
+    },
+    breakpoints: defaultBreakpoints,
+    zoom: 1,
+    update: () => {
+    }
+};
+/**
+ * ---------------------------------------------------------------------
+ * 默认的黑暗主题配置
+ */
+export const defaultDarkTheme = {
+    mode: 'dark',
+    background: {
+        /* content: rGray(.2), */
+        content: '#333333',
+        /* body: rGray(.15), */
+        body: '#252525',
+        fixed: 'rgba(255, 255, 255, .06)'
+    },
+    gray: rGray,
+    /* divider: rGray(.36), */
+    divider: '#5c5c5c',
+    colors: {
+        primary: generateColorMembers(Color(defaultLightTheme.colors.primary.main).lighten(.1).hex()),
+        secondary: generateColorMembers(Color(defaultLightTheme.colors.secondary.main).lighten(.06).hex()),
+        success: generateColorMembers(Color(defaultLightTheme.colors.success.main).lighten(.06).hex()),
+        warning: generateColorMembers(Color(defaultLightTheme.colors.warning.main).lighten(.06).hex()),
+        error: generateColorMembers(Color(defaultLightTheme.colors.error.main).lighten(.06).hex()),
+        info: generateColorMembers(Color(defaultLightTheme.colors.info.main).lighten(.03).hex()),
+    },
+    text: {
+        /* primary: rGray(.9), */
+        primary: '#e6e6e6',
+        /* secondary: rGray(.7), */
+        secondary: '#b3b3b3',
+        /* disabled: rGray(.5), */
+        disabled: '#808080',
+        /* placeholder: rGray(.45), */
+        placeholder: '#737373',
+        /* inverse: rGray(0) */
+        inverse: '#000000'
+    }
+};

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

@@ -1,9 +1,9 @@
 import { ReactElement } from 'react';
-import { ColorPropsValue, DIVProps, Obj } from '../../../types';
+import { ColorPropsValue, DIVProps, Obj } from '../../types';
 import { TimelineItem, TimelineItemProps } from './timelineItem';
 export interface TimelineSharedProps extends DIVProps {
     variant?: 'filled' | 'outlined';
-    /**标签的位置，@default "end" */
+    /**标签的位置，默认为`end` */
     labelPosition?: 'start' | 'end' | 'alternate' | 'alternate-reverse';
     color?: ColorPropsValue;
 }

package/dist/esm/components/timeline/timeline.js

@@ -1,15 +1,15 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { Children, cloneElement, createContext, forwardRef, isValidElement, memo, useContext, useMemo } from 'react';
+import { Children, cloneElement, createContext, isValidElement, memo, useContext, useMemo } from 'react';
 import { classes, style } from './timeline.style';
 import { classnames } from '../../utils';
 import { TimelineItem } from './timelineItem';
-const timelineContext = createContext({});
+const TimelineContext = createContext({});
 export function useTimelineContext() {
-    return useContext(timelineContext);
+    return useContext(TimelineContext);
 }
-export const Timeline = memo(forwardRef(({ items, 
+export const Timeline = memo(({ items, 
 // 共享属性
-variant = 'outlined', labelPosition = 'end', orientation = 'vertical', color = 'primary', ...props }, ref) => {
+variant = 'outlined', labelPosition = 'end', orientation = 'vertical', color = 'primary', ...props }) => {
     const renderItems = () => {
         if (items) {
             return items.map((p, i) => {
@@ -23,6 +23,6 @@ variant = 'outlined', labelPosition = 'end', orientation = 'vertical', color = '
             return child;
         });
     };
-    return (_jsx("div", { ...props, ref: ref, css: style, className: classnames(classes.root, props.className), "data-label-position": labelPosition, "data-orientation": orientation, children: _jsx(timelineContext.Provider, { value: useMemo(() => ({ variant, labelPosition, color, orientation }), [variant, labelPosition, color, orientation]), children: renderItems() }) }));
-}));
+    return (_jsx("div", { ...props, css: style, className: classnames(classes.root, props.className), "data-label-position": labelPosition, "data-orientation": orientation, children: _jsx(TimelineContext, { value: useMemo(() => ({ variant, labelPosition, color, orientation }), [variant, labelPosition, color, orientation]), children: renderItems() }) }));
+});
 Timeline.Item = TimelineItem;

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

@@ -1,4 +1,4 @@
-import { ColorPropsValue } from '../../../types';
+import { ColorPropsValue } from '../../types';
 export declare const classes: {
     content: string;
     dot: string;

package/dist/esm/components/timeline/timelineItem.d.ts

@@ -9,4 +9,4 @@ export interface TimelineItemProps extends Omit<TimelineSharedProps, 'content'>
     /** @private 内部使用，用于alternate模式下判断标签位置 */
     _index?: number;
 }
-export declare const TimelineItem: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<TimelineItemProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>>;
+export declare const TimelineItem: import("react").MemoExoticComponent<({ dot, content, oppositeContent, loading, _index, variant, labelPosition, color, ...props }: TimelineItemProps) => import("@emotion/react/jsx-runtime").JSX.Element>;

package/dist/esm/components/timeline/timelineItem.js

@@ -1,15 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { forwardRef, memo } from 'react';
+import { memo } from 'react';
 import { classnames } from '../../utils';
 import { classes, useTimelineItemStyle } from './timeline.style';
 import { useTimelineContext } from './timeline';
-export const TimelineItem = memo(forwardRef(({ dot, content, oppositeContent, loading, _index = 0, 
+export const TimelineItem = memo(({ dot, content, oppositeContent, loading, _index = 0, 
 // 共享属性，从TimelineSharedProps继承
-variant, labelPosition, color, ...props }, ref) => {
+variant, labelPosition, color, ...props }) => {
     const context = useTimelineContext();
     variant ??= context.variant ?? 'outlined';
     labelPosition ??= context.labelPosition ?? 'end';
     color ??= context.color ?? 'primary';
-    return (_jsxs("div", { ...props, ref: ref, css: useTimelineItemStyle({ color }), className: classnames(classes.item, props.className), "data-variant": variant, "data-reverse": (labelPosition === 'alternate' && _index % 2 !== 0) ||
+    return (_jsxs("div", { ...props, css: useTimelineItemStyle({ color }), className: classnames(classes.item, props.className), "data-variant": variant, "data-reverse": (labelPosition === 'alternate' && _index % 2 !== 0) ||
             (labelPosition === 'alternate-reverse' && _index % 2 === 0), "data-orientation": context.orientation, children: [_jsx("div", { className: classes.opposite, "data-show": !!oppositeContent, children: oppositeContent }), _jsx("div", { className: classes.dotArea, children: _jsx("div", { className: classes.dot }) }), _jsx("div", { className: classes.content, children: content })] }));
-}));
+});