@canlooks/can-ui 0.0.21 → 0.0.23

package/dist/cjs/components/tabs/tabs.js

@@ -6,15 +6,15 @@ const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
 const tabs_style_1 = require("./tabs.style");
 const utils_1 = require("../../utils");
-const app_1 = require("../app");
+const theme_1 = require("../theme");
 const tab_1 = require("./tab");
 const tabsEllipsis_1 = require("./tabsEllipsis");
-const tabsContext = (0, react_1.createContext)({});
+const TabsContext = (0, react_1.createContext)({});
 function useTabsContext() {
-    return (0, react_1.useContext)(tabsContext);
+    return (0, react_1.useContext)(TabsContext);
 }
-exports.Tabs = (0, react_1.memo)((0, react_1.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) => {
-    const theme = (0, app_1.useTheme)();
+exports.Tabs = (0, react_1.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 = (0, theme_1.useTheme)();
     size ??= theme.size;
     const [animating, setAnimating] = (0, react_1.useState)(false);
     const [innerValue, _setInnerValue] = (0, utils_1.useControlled)(defaultValue, value, onChange);
@@ -76,7 +76,12 @@ exports.Tabs = (0, react_1.memo)((0, react_1.forwardRef)(({ tabs, labelKey = 'la
             return tabs.map((p, i) => {
                 const value = p[primaryKey];
                 const active = !(0, utils_1.isUnset)(value) && value === innerValue.current;
-                return ((0, jsx_runtime_1.jsx)(tab_1.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 ((0, jsx_runtime_1.jsx)(tab_1.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));
@@ -143,13 +148,13 @@ exports.Tabs = (0, react_1.memo)((0, react_1.forwardRef)(({ tabs, labelKey = 'la
             shouldScroll.current = false;
         }
     }, [shouldScroll.current]);
-    return ((0, jsx_runtime_1.jsxs)("div", { ...props, ref: ref, css: (0, tabs_style_1.useStyle)({ color, variant }), className: (0, utils_1.classnames)(tabs_style_1.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: [(0, jsx_runtime_1.jsx)("div", { className: tabs_style_1.classes.start, "data-show": shadowStart, children: !!prefix &&
-                    (0, jsx_runtime_1.jsx)("div", { className: tabs_style_1.classes.prefix, children: prefix }) }), (0, jsx_runtime_1.jsx)("div", { ref: scrollRef, className: tabs_style_1.classes.scroll, onScroll: setShadow, children: (0, jsx_runtime_1.jsxs)("div", { className: tabs_style_1.classes.scrollWrap, style: { justifyContent }, children: [(0, jsx_runtime_1.jsx)(tabsContext.Provider, { value: (0, react_1.useMemo)(() => ({ variant, animating }), [variant, animating]), children: renderTabs() }), variant === 'line' &&
+    return ((0, jsx_runtime_1.jsxs)("div", { ...props, css: (0, tabs_style_1.useStyle)({ color, variant }), className: (0, utils_1.classnames)(tabs_style_1.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: [(0, jsx_runtime_1.jsx)("div", { className: tabs_style_1.classes.start, "data-show": shadowStart, children: !!prefix &&
+                    (0, jsx_runtime_1.jsx)("div", { className: tabs_style_1.classes.prefix, children: prefix }) }), (0, jsx_runtime_1.jsx)("div", { ref: scrollRef, className: tabs_style_1.classes.scroll, onScroll: setShadow, children: (0, jsx_runtime_1.jsxs)("div", { className: tabs_style_1.classes.scrollWrap, style: { justifyContent }, children: [(0, jsx_runtime_1.jsx)(TabsContext, { value: (0, react_1.useMemo)(() => ({ variant, animating }), [variant, animating]), children: renderTabs() }), variant === 'line' &&
                             (0, jsx_runtime_1.jsx)("div", { className: tabs_style_1.classes.indicator, onTransitionEnd: () => setAnimating(false), style: {
                                     ...indicatorRect.current,
                                     backgroundColor: activeTab && (0, utils_1.colorTransfer)(activeTab.color, theme)
                                 } })] }) }), (0, jsx_runtime_1.jsx)("div", { className: tabs_style_1.classes.end, "data-show": shadowEnd, children: !!(suffix || shadowStart || shadowEnd) &&
                     (0, jsx_runtime_1.jsxs)("div", { className: tabs_style_1.classes.suffix, children: [(shadowStart || shadowEnd) &&
                                 (0, jsx_runtime_1.jsx)(tabsEllipsis_1.TabsEllipsis, { tabs: tabs, labelKey: labelKey, primaryKey: primaryKey, value: innerValue.current, onToggleSelected: setValueInEllipsis, children: props.children }), suffix] }) })] }));
-}));
+});
 exports.Tabs.Tab = tab_1.Tab;

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

@@ -61,7 +61,7 @@ function useStyle({ color, variant }) {
                 display: flex;
                 align-items: center;
                 justify-content: center;
-                background-color: ${background.card};
+                background-color: ${background.content};
             }
 
             .${exports.classes.ellipsis} {
@@ -72,7 +72,7 @@ function useStyle({ color, variant }) {
                 cursor: pointer;
 
                 &:hover {
-                    color: ${colors.primary};
+                    color: ${colors.primary.main};
                 }
             }
 
@@ -310,7 +310,7 @@ 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};
                     }
                 }
 
@@ -338,7 +338,7 @@ 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};
                         }
                     }
                 }
@@ -348,7 +348,7 @@ 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};
                         }
                     }
                 }
@@ -377,7 +377,7 @@ 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};
                         }
                     }
                 }
@@ -387,7 +387,7 @@ 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/cjs/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/cjs/components/tag/tag.js

@@ -6,14 +6,14 @@ const react_1 = require("react");
 const tag_style_1 = require("./tag.style");
 const utils_1 = require("../../utils");
 const icons_1 = require("@ant-design/icons");
-exports.Tag = (0, react_1.memo)((0, react_1.forwardRef)(({ variant = 'outlined', color = 'text', shape = 'square', size = 'small', prefix, suffix, clickable, closable, onClose, ...props }, ref) => {
+exports.Tag = (0, react_1.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 ((0, jsx_runtime_1.jsxs)("div", { ...props, ref: ref, css: (0, tag_style_1.useStyle)({ color }), className: (0, utils_1.classnames)(tag_style_1.classes.root, props.className), "data-variant": variant, "data-size": size, "data-shape": shape, "data-clickable": clickable, children: [!!prefix &&
+    return ((0, jsx_runtime_1.jsxs)("div", { ...props, css: (0, tag_style_1.useStyle)({ color }), className: (0, utils_1.classnames)(tag_style_1.classes.root, props.className), "data-variant": variant, "data-size": size, "data-shape": shape, "data-clickable": clickable, children: [!!prefix &&
                 (0, jsx_runtime_1.jsx)("div", { className: tag_style_1.classes.prefix, children: prefix }), (0, jsx_runtime_1.jsx)("div", { className: tag_style_1.classes.content, children: props.children }), !!suffix &&
                 (0, jsx_runtime_1.jsx)("div", { className: tag_style_1.classes.suffix, children: suffix }), closable &&
                 (0, jsx_runtime_1.jsx)("div", { className: tag_style_1.classes.close, onClick: closeHandler, children: (0, jsx_runtime_1.jsx)(icons_1.CloseOutlined, {}) })] }));
-}));
+});

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

@@ -6,6 +6,6 @@ const react_1 = require("react");
 const inputBase_1 = require("../inputBase");
 const textarea_style_1 = require("./textarea.style");
 const utils_1 = require("../../utils");
-exports.Textarea = (0, react_1.memo)((0, react_1.forwardRef)(({ textareaProps, textareaRef, rows, fullWidth = false, ...props }, ref) => {
-    return ((0, jsx_runtime_1.jsx)(inputBase_1.InputBase, { ...props, ref: ref, css: textarea_style_1.style, className: (0, utils_1.classnames)(textarea_style_1.classes.root, props.className), "data-full-width": fullWidth, children: ({ ref, ...rest }) => (0, jsx_runtime_1.jsx)("textarea", { rows: rows, ...rest, ...textareaProps, ref: (0, utils_1.cloneRef)(ref, textareaRef), className: (0, utils_1.classnames)(textarea_style_1.classes.textarea, textareaProps?.className) }) }));
-}));
+exports.Textarea = (0, react_1.memo)(({ textareaProps, textareaRef, rows, fullWidth = false, ...props }) => {
+    return ((0, jsx_runtime_1.jsx)(inputBase_1.InputBase, { ...props, css: textarea_style_1.style, className: (0, utils_1.classnames)(textarea_style_1.classes.root, props.className), "data-full-width": fullWidth, children: ({ ref, ...rest }) => (0, jsx_runtime_1.jsx)("textarea", { rows: rows, ...rest, ...textareaProps, ref: (0, utils_1.cloneRef)(ref, textareaRef), className: (0, utils_1.classnames)(textarea_style_1.classes.textarea, textareaProps?.className) }) }));
+});

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

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

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

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

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

@@ -0,0 +1,40 @@
+"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 themeVariables_1 = require("./themeVariables");
+const utils_1 = require("../../utils");
+exports.ThemeContext = (0, react_1.createContext)(themeVariables_1.defaultLightTheme);
+function useTheme() {
+    return (0, react_1.useContext)(exports.ThemeContext);
+}
+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] = (0, themeVariables_1.generateColorMembers)(definition.colors[k]);
+            }
+            newTheme = { ...definition, colors };
+        }
+        else {
+            newTheme = definition;
+        }
+        return (0, utils_1.mergeDeep)({}, defaultTheme, newTheme?.mode === 'dark' && themeVariables_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, { value: useThemeProvider(props.theme), children: props.children }));
+}

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

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -0,0 +1,174 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defaultDarkTheme = exports.defaultLightTheme = exports.defaultFontFamily = exports.defaultBreakpoints = exports.zIndex = void 0;
+exports.generateColorMembers = generateColorMembers;
+const tslib_1 = require("tslib");
+const color_1 = tslib_1.__importDefault(require("color"));
+/**
+ * ---------------------------------------------------------------------
+ * 获取不同程度的灰色
+ * @param amount 0 至 1，数值越小越靠近背景颜色，数值越大越靠近文字颜色（mode改变后数组会倒转）
+ */
+function gray(amount) {
+    return (0, color_1.default)().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，数字越小颜色越淡（亮），数字越大颜色越深（暗）
+ */
+function generateColorMembers(color) {
+    const member = Array();
+    member.toString = () => color;
+    const colorObj = (0, color_1.default)(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
+ */
+exports.zIndex = {
+    overlay: 1000,
+    popper: 1100,
+    bubbleConfirm: 1200,
+    dropdown: 1300,
+    snackbar: 1400,
+    tooltip: 1500
+};
+exports.defaultBreakpoints = {
+    xs: 0,
+    sm: 600,
+    md: 900,
+    lg: 1200,
+    xl: 1536
+};
+exports.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`;
+/**
+ * ---------------------------------------------------------------------
+ * 默认的明亮主题配置
+ */
+exports.defaultLightTheme = {
+    mode: 'light',
+    fontSize: 14,
+    fontFamily: exports.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: exports.defaultBreakpoints,
+    zoom: 1,
+    update: () => {
+    }
+};
+/**
+ * ---------------------------------------------------------------------
+ * 默认的黑暗主题配置
+ */
+exports.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((0, color_1.default)(exports.defaultLightTheme.colors.primary.main).lighten(.1).hex()),
+        secondary: generateColorMembers((0, color_1.default)(exports.defaultLightTheme.colors.secondary.main).lighten(.06).hex()),
+        success: generateColorMembers((0, color_1.default)(exports.defaultLightTheme.colors.success.main).lighten(.06).hex()),
+        warning: generateColorMembers((0, color_1.default)(exports.defaultLightTheme.colors.warning.main).lighten(.06).hex()),
+        error: generateColorMembers((0, color_1.default)(exports.defaultLightTheme.colors.error.main).lighten(.06).hex()),
+        info: generateColorMembers((0, color_1.default)(exports.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/cjs/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/cjs/components/timeline/timeline.js

@@ -7,13 +7,13 @@ const react_1 = require("react");
 const timeline_style_1 = require("./timeline.style");
 const utils_1 = require("../../utils");
 const timelineItem_1 = require("./timelineItem");
-const timelineContext = (0, react_1.createContext)({});
+const TimelineContext = (0, react_1.createContext)({});
 function useTimelineContext() {
-    return (0, react_1.useContext)(timelineContext);
+    return (0, react_1.useContext)(TimelineContext);
 }
-exports.Timeline = (0, react_1.memo)((0, react_1.forwardRef)(({ items, 
+exports.Timeline = (0, react_1.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) => {
@@ -27,6 +27,6 @@ variant = 'outlined', labelPosition = 'end', orientation = 'vertical', color = '
             return child;
         });
     };
-    return ((0, jsx_runtime_1.jsx)("div", { ...props, ref: ref, css: timeline_style_1.style, className: (0, utils_1.classnames)(timeline_style_1.classes.root, props.className), "data-label-position": labelPosition, "data-orientation": orientation, children: (0, jsx_runtime_1.jsx)(timelineContext.Provider, { value: (0, react_1.useMemo)(() => ({ variant, labelPosition, color, orientation }), [variant, labelPosition, color, orientation]), children: renderItems() }) }));
-}));
+    return ((0, jsx_runtime_1.jsx)("div", { ...props, css: timeline_style_1.style, className: (0, utils_1.classnames)(timeline_style_1.classes.root, props.className), "data-label-position": labelPosition, "data-orientation": orientation, children: (0, jsx_runtime_1.jsx)(TimelineContext, { value: (0, react_1.useMemo)(() => ({ variant, labelPosition, color, orientation }), [variant, labelPosition, color, orientation]), children: renderItems() }) }));
+});
 exports.Timeline.Item = timelineItem_1.TimelineItem;

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

@@ -6,13 +6,13 @@ const react_1 = require("react");
 const utils_1 = require("../../utils");
 const timeline_style_1 = require("./timeline.style");
 const timeline_1 = require("./timeline");
-exports.TimelineItem = (0, react_1.memo)((0, react_1.forwardRef)(({ dot, content, oppositeContent, loading, _index = 0, 
+exports.TimelineItem = (0, react_1.memo)(({ dot, content, oppositeContent, loading, _index = 0, 
 // 共享属性，从TimelineSharedProps继承
-variant, labelPosition, color, ...props }, ref) => {
+variant, labelPosition, color, ...props }) => {
     const context = (0, timeline_1.useTimelineContext)();
     variant ??= context.variant ?? 'outlined';
     labelPosition ??= context.labelPosition ?? 'end';
     color ??= context.color ?? 'primary';
-    return ((0, jsx_runtime_1.jsxs)("div", { ...props, ref: ref, css: (0, timeline_style_1.useTimelineItemStyle)({ color }), className: (0, utils_1.classnames)(timeline_style_1.classes.item, props.className), "data-variant": variant, "data-reverse": (labelPosition === 'alternate' && _index % 2 !== 0) ||
+    return ((0, jsx_runtime_1.jsxs)("div", { ...props, css: (0, timeline_style_1.useTimelineItemStyle)({ color }), className: (0, utils_1.classnames)(timeline_style_1.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: [(0, jsx_runtime_1.jsx)("div", { className: timeline_style_1.classes.opposite, "data-show": !!oppositeContent, children: oppositeContent }), (0, jsx_runtime_1.jsx)("div", { className: timeline_style_1.classes.dotArea, children: (0, jsx_runtime_1.jsx)("div", { className: timeline_style_1.classes.dot }) }), (0, jsx_runtime_1.jsx)("div", { className: timeline_style_1.classes.content, children: content })] }));
-}));
+});

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

@@ -1,7 +1,7 @@
 import { ReactElement } from 'react';
 import { FlexProps } from '../flex';
 import { ButtonProps } from '../button';
-import { Id, Obj } from '../../../types';
+import { Id, Obj, SelectableProps } from '../../types';
 type ButtonItem = ButtonProps & Obj;
 export interface ToggleButtonBaseProps<I extends ButtonItem> extends Omit<FlexProps, 'defaultValue' | 'onChange'> {
     variant?: 'filled' | 'outlined';
@@ -12,18 +12,6 @@ export interface ToggleButtonBaseProps<I extends ButtonItem> extends Omit<FlexPr
     items?: I[];
     primaryKey?: keyof I;
 }
-export interface ToggleButtonSingleProps<I extends ButtonItem, V extends Id = Id> extends ToggleButtonBaseProps<I> {
-    multiple?: false;
-    defaultValue?: V;
-    value?: V;
-    onChange?(value: V): void;
-}
-export interface ToggleButtonMultipleProps<I extends ButtonItem, V extends Id = Id> extends ToggleButtonBaseProps<I> {
-    multiple: true;
-    defaultValue?: V[];
-    value?: V[];
-    onChange?(value: V[]): void;
-}
-export type ToggleButtonProps<I extends ButtonItem, V extends Id = Id> = ToggleButtonSingleProps<I, V> | ToggleButtonMultipleProps<I, V>;
+export type ToggleButtonProps<I extends ButtonItem, V extends Id = Id> = SelectableProps<V> & ToggleButtonBaseProps<I>;
 export declare const ToggleButton: <I extends ButtonItem, V extends Id = Id>(props: ToggleButtonProps<I, V>) => ReactElement;
 export {};