@canlooks/can-ui 0.0.20 → 0.0.22

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

@@ -3,8 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.style = exports.classes = void 0;
 const react_1 = require("@emotion/react");
 const utils_1 = require("../../utils");
-const app_1 = require("../app");
 const app_style_1 = require("../app/app.style");
+const theme_1 = require("../theme");
 exports.classes = (0, utils_1.defineClasses)('snackbar-base', [
     'itemWrap',
     'item',
@@ -15,133 +15,136 @@ exports.classes = (0, utils_1.defineClasses)('snackbar-base', [
     'close',
     'content'
 ]);
-exports.style = (0, utils_1.defineCss)(({ text, fontSize, spacing, background, borderRadius }) => [
-    app_style_1.style,
-    (0, react_1.css) `
-        color: ${text.primary};
-        font-size: ${fontSize}px;
-        width: 100%;
-        height: auto;
-        display: flex;
-        flex-direction: column;
-        padding: ${spacing[5]}px;
-        position: fixed;
-        z-index: ${app_1.zIndex.snackbar};
-        pointer-events: none;
-
-        &[data-use-to=notification] {
-            flex-direction: column-reverse;
-        }
-
-        .${exports.classes.itemWrap} {
+exports.style = (0, utils_1.defineCss)(theme => {
+    const { text, fontSize, spacing, background, borderRadius } = theme;
+    return [
+        (0, app_style_1.appStyleCallback)(theme),
+        (0, react_1.css) `
+            color: ${text.primary};
+            font-size: ${fontSize}px;
+            width: 100%;
+            height: auto;
             display: flex;
-            align-items: flex-start;
-            overflow: visible;
-        }
-
-        &[data-place="0"], &[data-place="1"], &[data-place="2"] {
-            top: 0;
-        }
+            flex-direction: column;
+            padding: ${spacing[5]}px;
+            position: fixed;
+            z-index: ${theme_1.zIndex.snackbar};
+            pointer-events: none;
+
+            &[data-use-to=notification] {
+                flex-direction: column-reverse;
+            }
 
-        &[data-place="3"], &[data-place="4"], &[data-place="5"] {
-            bottom: 0;
-        }
+            .${exports.classes.itemWrap} {
+                display: flex;
+                align-items: flex-start;
+                overflow: visible;
+            }
 
-        &[data-place="0"],
-        &[data-place="3"] {
-            left: 0;
+            &[data-place="0"], &[data-place="1"], &[data-place="2"] {
+                top: 0;
+            }
 
-            .${exports.classes.itemWrap} {
-                justify-content: flex-start;
+            &[data-place="3"], &[data-place="4"], &[data-place="5"] {
+                bottom: 0;
             }
-        }
 
-        &[data-place="1"],
-        &[data-place="4"] {
-            left: 50%;
-            transform: translateX(-50%);
+            &[data-place="0"],
+            &[data-place="3"] {
+                left: 0;
 
-            .${exports.classes.itemWrap} {
-                justify-content: center;
+                .${exports.classes.itemWrap} {
+                    justify-content: flex-start;
+                }
             }
-        }
 
-        &[data-place="2"],
-        &[data-place="5"] {
-            right: 0;
+            &[data-place="1"],
+            &[data-place="4"] {
+                left: 50%;
+                transform: translateX(-50%);
 
-            .${exports.classes.itemWrap} {
-                justify-content: flex-end;
+                .${exports.classes.itemWrap} {
+                    justify-content: center;
+                }
             }
-        }
 
-        &[data-place="1"] .${exports.classes.item} {
-            transform-origin: left top;
-        }
+            &[data-place="2"],
+            &[data-place="5"] {
+                right: 0;
 
-        &[data-place="2"] .${exports.classes.item} {
-            transform-origin: top;
-        }
+                .${exports.classes.itemWrap} {
+                    justify-content: flex-end;
+                }
+            }
 
-        &[data-place="3"] .${exports.classes.item} {
-            transform-origin: right top;
-        }
+            &[data-place="1"] .${exports.classes.item} {
+                transform-origin: left top;
+            }
 
-        &[data-place="4"] .${exports.classes.item} {
-            transform-origin: left bottom;
-        }
+            &[data-place="2"] .${exports.classes.item} {
+                transform-origin: top;
+            }
 
-        &[data-place="5"] .${exports.classes.item} {
-            transform-origin: bottom;
-        }
+            &[data-place="3"] .${exports.classes.item} {
+                transform-origin: right top;
+            }
 
-        &[data-place="6"] .${exports.classes.item} {
-            transform-origin: right bottom;
-        }
+            &[data-place="4"] .${exports.classes.item} {
+                transform-origin: left bottom;
+            }
 
-        .${exports.classes.item} {
-            pointer-events: all;
-            max-width: 60%;
-            display: flex;
-            gap: ${spacing[4]}px;
-            box-shadow: 2px 4px 18px rgba(0, 0, 0, .16);
-            padding: ${spacing[3]}px ${spacing[4]}px;
-            margin-bottom: ${spacing[4]}px;
-            border-radius: ${borderRadius}px;
-            background-color: ${background.card};
-            
-            &[data-variant=filled] {
-                color: #ffffff;
+            &[data-place="5"] .${exports.classes.item} {
+                transform-origin: bottom;
             }
-            
-            .${exports.classes.icon} {
-                line-height: 20px;
-                font-size: ${17 / 14}em;
+
+            &[data-place="6"] .${exports.classes.item} {
+                transform-origin: right bottom;
             }
 
-            .${exports.classes.text} {
-                flex: 1;
-                
-                .${exports.classes.title} {
+            .${exports.classes.item} {
+                pointer-events: all;
+                max-width: 60%;
+                display: flex;
+                gap: ${spacing[4]}px;
+                box-shadow: 2px 4px 18px rgba(0, 0, 0, .16);
+                padding: ${spacing[3]}px ${spacing[4]}px;
+                margin-bottom: ${spacing[4]}px;
+                border-radius: ${borderRadius}px;
+                background-color: ${background.content};
+
+                &[data-variant=filled] {
+                    color: #ffffff;
+                }
+
+                .${exports.classes.icon} {
+                    line-height: 20px;
+                    font-size: ${17 / 14}em;
+                }
+
+                .${exports.classes.text} {
                     flex: 1;
-                    font-weight: bold;
-                    font-size: ${15 / 14}em;
 
-                    & + .${exports.classes.content} {
-                        margin-top: 4px;
+                    .${exports.classes.title} {
+                        flex: 1;
+                        font-weight: bold;
+                        font-size: ${15 / 14}em;
+
+                        & + .${exports.classes.content} {
+                            margin-top: 4px;
+                        }
                     }
                 }
-            }
 
-            .${exports.classes.close} {
-                margin: -4px -4px 0 0;
+                .${exports.classes.close} {
+                    margin: -4px -4px 0 0;
+                }
             }
-        }
 
-        &[data-use-to=notification] {
-            .${exports.classes.item} {
-                width: 360px;
+            &[data-use-to=notification] {
+                .${exports.classes.item} {
+                    width: 360px;
+                }
             }
-        }
-    `
-]);
+        `
+    ];
+});

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

@@ -1,4 +1,4 @@
-import { ReactElement, Ref } from 'react';
+import { ReactElement } from 'react';
 import { Arguments } from '@dnd-kit/sortable/dist/hooks/useSortable';
 export type SortableItemProps<P> = Omit<P, 'component' | 'id' | 'disabled' | 'sortableArguments'> & {
     component?: any;
@@ -6,6 +6,4 @@ export type SortableItemProps<P> = Omit<P, 'component' | 'id' | 'disabled' | 'so
     disabled?: boolean;
     sortableArguments?: Arguments;
 };
-export declare const SortableItem: <P>(props: SortableItemProps<P> & {
-    ref?: Ref<any>;
-}) => ReactElement;
+export declare const SortableItem: <P>(props: SortableItemProps<P>) => ReactElement;

package/dist/cjs/components/sortableItem/sortableItem.js

@@ -6,13 +6,13 @@ const react_1 = require("react");
 const sortable_1 = require("@dnd-kit/sortable");
 const utilities_1 = require("@dnd-kit/utilities");
 const utils_1 = require("../../utils");
-exports.SortableItem = (0, react_1.forwardRef)(({ component: Component = 'div', id, disabled, sortableArguments, ...props }, ref) => {
+exports.SortableItem = (({ ref, component: Component = 'div', id, disabled, sortableArguments, ...props }) => {
     const { attributes, isDragging, listeners, setNodeRef, transform, transition } = (0, sortable_1.useSortable)({
         ...sortableArguments,
         disabled,
         id
     });
-    const preventDefaultCallback = (0, react_1.useRef)();
+    const preventDefaultCallback = (0, react_1.useRef)(void 0);
     const onPointerUp = (0, react_1.useCallback)(() => {
         removeListener();
     }, []);

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

@@ -14,14 +14,14 @@ export interface StatusIconProps extends AntdIconProps {
     icon?: ReactNode;
     status?: StatusType;
 }
-export declare const StatusIcon: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<StatusIconProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>>;
+export declare const StatusIcon: import("react").MemoExoticComponent<({ icon, status, ...props }: StatusIconProps) => string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("@emotion/react/jsx-runtime").JSX.Element | null>;
 export interface StatusProps extends DIVProps {
     icon?: ReactNode;
     status?: StatusType;
-    /** @default "icon" */
+    /** 默认为"icon" */
     variant?: 'icon' | 'dot';
     label?: ReactNode;
-    /** 是否播放动画，@default false */
+    /** 是否播放动画，默认为false */
     animation?: boolean;
 }
-export declare const Status: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<StatusProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>>;
+export declare const Status: import("react").MemoExoticComponent<({ icon, status, variant, label, animation, ...props }: StatusProps) => import("@emotion/react/jsx-runtime").JSX.Element>;

package/dist/cjs/components/status/status.js

@@ -14,12 +14,11 @@ exports.statusMapToIcon = {
     confirm: icons_1.QuestionCircleFilled,
     unknown: icons_1.QuestionCircleFilled
 };
-exports.StatusIcon = (0, react_1.memo)((0, react_1.forwardRef)(({ icon, status = 'unknown', ...props }, ref) => {
+exports.StatusIcon = (0, react_1.memo)(({ icon, status = 'unknown', ...props }) => {
     const DefaultIcon = exports.statusMapToIcon[status];
     const statusColor = (0, utils_1.useStatusColor)(status);
     const iconProps = {
         ...props,
-        ref,
         className: (0, utils_1.classnames)(status_style_1.classes.icon, props.className),
         style: (0, react_1.useMemo)(() => ({
             color: statusColor,
@@ -32,7 +31,7 @@ exports.StatusIcon = (0, react_1.memo)((0, react_1.forwardRef)(({ icon, status =
             : icon;
     }
     return (0, jsx_runtime_1.jsx)(DefaultIcon, { ...iconProps });
-}));
+});
 const defaultLabel = {
     unknown: '未知',
     confirm: '确认',
@@ -41,8 +40,8 @@ const defaultLabel = {
     warning: '警告',
     error: '错误'
 };
-exports.Status = (0, react_1.memo)((0, react_1.forwardRef)(({ icon, status = 'unknown', variant = 'icon', label = defaultLabel[status], animation, ...props }, ref) => {
-    return ((0, jsx_runtime_1.jsxs)("div", { ...props, ref: ref, css: status_style_1.style, className: (0, utils_1.classnames)(status_style_1.classes.root, props.className), "data-animation": animation, children: [variant === 'icon'
+exports.Status = (0, react_1.memo)(({ icon, status = 'unknown', variant = 'icon', label = defaultLabel[status], animation, ...props }) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { ...props, css: status_style_1.style, className: (0, utils_1.classnames)(status_style_1.classes.root, props.className), "data-animation": animation, children: [variant === 'icon'
                 ? (0, jsx_runtime_1.jsx)(exports.StatusIcon, { icon: icon, status: status })
                 : (0, jsx_runtime_1.jsx)("div", { className: status_style_1.classes.dot, style: { backgroundColor: (0, utils_1.useStatusColor)(status) } }), (0, jsx_runtime_1.jsx)("div", { className: status_style_1.classes.label, children: label })] }));
-}));
+});

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

@@ -1,6 +1,6 @@
 export declare const classes: {
-    label: string;
     icon: string;
+    label: string;
     dot: string;
 } & {
     root: string;

package/dist/cjs/components/stepper/step.d.ts

@@ -13,4 +13,4 @@ export interface StepProps extends StepperSharedProps {
     /** @private 该步骤的序号，通常由<Stepper/>组件自动传递 */
     step?: number;
 }
-export declare const Step: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<StepProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>>;
+export declare const Step: import("react").MemoExoticComponent<({ indicator, title, prefix, suffix, description, step, size, gap, color, variant, labelPlacement, clickable, status, ...props }: StepProps) => import("@emotion/react/jsx-runtime").JSX.Element>;

package/dist/cjs/components/stepper/step.js

@@ -7,11 +7,11 @@ const utils_1 = require("../../utils");
 const step_style_1 = require("./step.style");
 const icons_1 = require("@ant-design/icons");
 const stepper_1 = require("./stepper");
-const app_1 = require("../app");
-exports.Step = (0, react_1.memo)((0, react_1.forwardRef)(({ indicator, title, prefix, suffix, description, step = 0, 
+const theme_1 = require("../theme");
+exports.Step = (0, react_1.memo)(({ indicator, title, prefix, suffix, description, step = 0, 
 // 共享属性，从StepperSharedProps继承而来
-size, gap, color, variant, labelPlacement, clickable, status = 'waiting', ...props }, ref) => {
-    const theme = (0, app_1.useTheme)();
+size, gap, color, variant, labelPlacement, clickable, status = 'waiting', ...props }) => {
+    const theme = (0, theme_1.useTheme)();
     const context = (0, stepper_1.useStepperContext)();
     size ??= context.size ?? theme.size;
     gap ??= context.gap ?? theme.spacing[5];
@@ -22,7 +22,7 @@ size, gap, color, variant, labelPlacement, clickable, status = 'waiting', ...pro
     const renderInner = (prop) => {
         return typeof prop === 'function' ? prop({ step, status }) : prop;
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { ...props, ref: ref, css: (0, step_style_1.useStyle)({ color, gap }), className: (0, utils_1.classnames)(step_style_1.classes.root, props.className), "data-size": size, "data-status": status, "data-variant": variant, "data-label-placement": labelPlacement, "data-clickable": clickable, children: [indicator
+    return ((0, jsx_runtime_1.jsxs)("div", { ...props, css: (0, step_style_1.useStyle)({ color, gap }), className: (0, utils_1.classnames)(step_style_1.classes.root, props.className), "data-size": size, "data-status": status, "data-variant": variant, "data-label-placement": labelPlacement, "data-clickable": clickable, children: [indicator
                 ? renderInner(indicator)
                 : (0, jsx_runtime_1.jsx)("div", { className: step_style_1.classes.indicatorWrap, children: (0, jsx_runtime_1.jsx)("div", { className: step_style_1.classes.indicator, children: (() => {
                             if (variant === 'dot') {
@@ -42,4 +42,4 @@ size, gap, color, variant, labelPlacement, clickable, status = 'waiting', ...pro
                                     return (0, jsx_runtime_1.jsx)(icons_1.MinusOutlined, {});
                             }
                         })() }) }), (0, jsx_runtime_1.jsxs)("div", { className: step_style_1.classes.label, children: [(0, jsx_runtime_1.jsx)("div", { className: step_style_1.classes.title, children: (0, jsx_runtime_1.jsx)("div", { className: step_style_1.classes.titleText, children: renderInner(title) }) }), (0, jsx_runtime_1.jsx)("div", { className: step_style_1.classes.description, children: renderInner(description) })] })] }));
-}));
+});

package/dist/cjs/components/stepper/step.style.d.ts

@@ -1,9 +1,9 @@
 import { StepProps } from './step';
 export declare const classes: {
-    title: string;
     label: string;
-    indicator: string;
+    title: string;
     description: string;
+    indicator: string;
     indicatorWrap: string;
     titleText: string;
 } & {

package/dist/cjs/components/stepper/step.style.js

@@ -171,13 +171,13 @@ function useStyle({ color, gap }) {
 
             &[data-status=error] {
                 .${exports.classes.indicator} {
-                    background-color: ${colors.error};
+                    background-color: ${colors.error.main};
                     color: #ffffff;
                 }
                 
                 &[data-variant=dot] {
                     .${exports.classes.indicator} {
-                        outline: 1px solid ${colors.error};
+                        outline: 1px solid ${colors.error.main};
                         outline-offset: 2px;
                     }
                 }
@@ -185,13 +185,13 @@ function useStyle({ color, gap }) {
 
             &[data-status=warning] {
                 .${exports.classes.indicator} {
-                    background-color: ${colors.warning};
+                    background-color: ${colors.warning.main};
                     color: #ffffff;
                 }
                 
                 &[data-variant=dot] {
                     .${exports.classes.indicator} {
-                        outline: 1px solid ${colors.warning};
+                        outline: 1px solid ${colors.warning.main};
                         outline-offset: 2px;
                     }
                 }

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

@@ -6,8 +6,8 @@ export interface StepperSharedProps extends Omit<DIVProps, 'onChange' | 'title'
     size?: Size;
     /**
      * 各步骤的间距
-     * {@link StepperProps.orientation}为"horizontal"时，@default 15
-     * {@link StepperProps.orientation}为"vertical"时，@default 6
+     * {@link StepperProps.orientation}为`horizontal`时，默认为`15`
+     * {@link StepperProps.orientation}为`vertical`时，默认为`6`
      */
     gap?: number;
     color?: ColorPropsValue;
@@ -18,9 +18,9 @@ export interface StepperSharedProps extends Omit<DIVProps, 'onChange' | 'title'
 }
 export interface StepperProps extends StepperSharedProps {
     steps?: (StepProps & Obj)[];
-    /** @default "horizontal" */
+    /** 默认为`horizontal` */
     orientation?: 'horizontal' | 'vertical';
-    defualtValue?: number;
+    defaultValue?: number;
     value?: number;
     onChange?(value: number): void;
 }

package/dist/cjs/components/stepper/stepper.js

@@ -7,14 +7,14 @@ const react_1 = require("react");
 const utils_1 = require("../../utils");
 const stepper_style_1 = require("./stepper.style");
 const step_1 = require("./step");
-const stepperContext = (0, react_1.createContext)({});
+const StepperContext = (0, react_1.createContext)({});
 function useStepperContext() {
-    return (0, react_1.useContext)(stepperContext);
+    return (0, react_1.useContext)(StepperContext);
 }
-exports.Stepper = (0, react_1.forwardRef)(({ steps, orientation = 'horizontal', defualtValue = 0, value, onChange, 
+exports.Stepper = (({ steps, orientation = 'horizontal', defaultValue = 0, value, onChange, 
 // 以下为共享属性
-size, gap = orientation === 'horizontal' ? 15 : 9, color, variant, clickable, labelPlacement, status, ...props }, ref) => {
-    const [innerValue, setInnerValue] = (0, utils_1.useControlled)(defualtValue, value, onChange);
+size, gap = orientation === 'horizontal' ? 15 : 9, color, variant, clickable, labelPlacement, status, ...props }) => {
+    const [innerValue, setInnerValue] = (0, utils_1.useControlled)(defaultValue, value, onChange);
     const renderSteps = () => {
         if (steps) {
             return steps.map((p, i) => {
@@ -50,10 +50,10 @@ size, gap = orientation === 'horizontal' ? 15 : 9, color, variant, clickable, la
             return c;
         });
     };
-    return ((0, jsx_runtime_1.jsx)("div", { ...props, ref: ref, css: stepper_style_1.style, className: (0, utils_1.classnames)(stepper_style_1.classes.root, props.className), "data-orientation": orientation, style: {
+    return ((0, jsx_runtime_1.jsx)("div", { ...props, css: stepper_style_1.style, className: (0, utils_1.classnames)(stepper_style_1.classes.root, props.className), "data-orientation": orientation, style: {
             gap,
             ...props.style
-        }, children: (0, jsx_runtime_1.jsx)(stepperContext.Provider, { value: (0, react_1.useMemo)(() => ({
+        }, children: (0, jsx_runtime_1.jsx)(StepperContext, { value: (0, react_1.useMemo)(() => ({
                 size, gap, color, variant, clickable, labelPlacement
             }), [
                 size, gap, color, variant, clickable, labelPlacement

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

@@ -1,8 +1,8 @@
-import { ReactNode, Ref } from 'react';
+import React, { ReactNode, Ref } from 'react';
 import { ColorPropsValue, DIVProps, Size } from '../../../types';
 export interface SwitchProps extends Omit<DIVProps, 'onChange'> {
     /** <Switch />内部使用<input />实现 */
-    inputProps?: JSX.IntrinsicElements['input'];
+    inputProps?: React.JSX.IntrinsicElements['input'];
     inputRef?: Ref<HTMLInputElement>;
     color?: ColorPropsValue;
     size?: Size;
@@ -22,4 +22,4 @@ export interface SwitchProps extends Omit<DIVProps, 'onChange'> {
     readOnly?: boolean;
     disabled?: boolean;
 }
-export declare const Switch: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<SwitchProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>>;
+export declare const Switch: React.MemoExoticComponent<({ inputProps, inputRef, color, size, thumbSize, thumbProps, renderThumb, trackSize, trackProps, renderTrack, checkedLabel, unCheckedLabel, defaultChecked, checked, onChange, readOnly, disabled, ...props }: SwitchProps) => import("@emotion/react/jsx-runtime").JSX.Element>;

package/dist/cjs/components/switch/switch.js

@@ -4,10 +4,10 @@ exports.Switch = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
 const switch_style_1 = require("./switch.style");
-const app_1 = require("../app");
+const theme_1 = require("../theme");
 const utils_1 = require("../../utils");
-exports.Switch = (0, react_1.memo)((0, react_1.forwardRef)(({ inputProps, inputRef, color = 'primary', size, thumbSize, thumbProps, renderThumb, trackSize, trackProps, renderTrack, checkedLabel, unCheckedLabel, defaultChecked = false, checked, onChange, readOnly, disabled, ...props }, ref) => {
-    const theme = (0, app_1.useTheme)();
+exports.Switch = (0, react_1.memo)(({ inputProps, inputRef, color = 'primary', size, thumbSize, thumbProps, renderThumb, trackSize, trackProps, renderTrack, checkedLabel, unCheckedLabel, defaultChecked = false, checked, onChange, readOnly, disabled, ...props }) => {
+    const theme = (0, theme_1.useTheme)();
     size ??= theme.size;
     trackSize ??= size === 'medium' ? 20
         : size === 'large' ? 24
@@ -76,5 +76,5 @@ exports.Switch = (0, react_1.memo)((0, react_1.forwardRef)(({ inputProps, inputR
         inputProps?.onKeyDown?.(e);
         e.key === 'Enter' && toggleChecked();
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { ...props, ref: ref, css: (0, switch_style_1.useStyle)({ color }), className: (0, utils_1.classnames)(switch_style_1.classes.root, props.className), onClick: clickHandler, "data-checked": innerChecked.current, "data-read-only": readOnly, "data-disabled": disabled, children: [renderTrackFn(), (0, jsx_runtime_1.jsx)("input", { ...inputProps, checked: innerChecked.current, ref: inputRef, className: (0, utils_1.classnames)(switch_style_1.classes.input, inputProps?.className), onChange: e => inputProps?.onChange?.(e), onKeyDown: inputKeyDownHandler })] }));
-}));
+    return ((0, jsx_runtime_1.jsxs)("div", { ...props, css: (0, switch_style_1.useStyle)({ color }), className: (0, utils_1.classnames)(switch_style_1.classes.root, props.className), onClick: clickHandler, "data-checked": innerChecked.current, "data-read-only": readOnly, "data-disabled": disabled, children: [renderTrackFn(), (0, jsx_runtime_1.jsx)("input", { ...inputProps, checked: innerChecked.current, ref: inputRef, className: (0, utils_1.classnames)(switch_style_1.classes.input, inputProps?.className), onChange: e => inputProps?.onChange?.(e), onKeyDown: inputKeyDownHandler })] }));
+});

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

@@ -1,7 +1,7 @@
 import { ColorPropsValue } from '../../../types';
 export declare const classes: {
-    input: string;
     label: string;
+    input: string;
     track: string;
     checkedLabel: string;
     uncheckedLabel: string;

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

@@ -1,9 +1,8 @@
-import { Ref } from 'react';
+import React from 'react';
 import { Size } from '../../../types';
-export interface TableProps extends Omit<JSX.IntrinsicElements['table'], 'ref'> {
-    ref?: Ref<HTMLTableElement>;
+export interface TableProps extends Partial<React.JSX.IntrinsicElements['table']> {
     size?: Size;
     bordered?: boolean;
     striped?: boolean;
 }
-export declare const Table: import("react").ForwardRefExoticComponent<Omit<TableProps, "ref"> & import("react").RefAttributes<HTMLTableElement>>;
+export declare function Table({ size, bordered, striped, ...props }: TableProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/cjs/components/table/table.js

@@ -1,13 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Table = void 0;
+exports.Table = Table;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-const react_1 = require("react");
 const table_style_1 = require("./table.style");
 const utils_1 = require("../../utils");
-const app_1 = require("../app");
-exports.Table = (0, react_1.forwardRef)(({ size, bordered = false, striped = false, ...props }, ref) => {
-    const theme = (0, app_1.useTheme)();
+const theme_1 = require("../theme");
+function Table({ size, bordered = false, striped = false, ...props }) {
+    const theme = (0, theme_1.useTheme)();
     size ??= theme.size;
-    return ((0, jsx_runtime_1.jsx)("table", { ...props, ref: ref, css: table_style_1.style, className: (0, utils_1.classnames)(table_style_1.classes.root, props.className), "data-size": size, "data-bordered": bordered, "data-striped": striped }));
-});
+    return ((0, jsx_runtime_1.jsx)("table", { ...props, css: table_style_1.style, className: (0, utils_1.classnames)(table_style_1.classes.root, props.className), "data-size": size, "data-bordered": bordered, "data-striped": striped }));
+}

package/dist/cjs/components/tabs/tab.d.ts

@@ -12,4 +12,4 @@ export interface TabProps extends Omit<DIVProps, 'prefix'> {
     /** @private 内部使用，用于表示改选项卡是否为激活状态 */
     _active?: boolean;
 }
-export declare const Tab: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<TabProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>>;
+export declare const Tab: import("react").MemoExoticComponent<({ prefix, suffix, color, orientation, label, value, disabled, _active, ...props }: TabProps) => import("@emotion/react/jsx-runtime").JSX.Element>;

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

@@ -6,10 +6,10 @@ const react_1 = require("react");
 const utils_1 = require("../../utils");
 const tabs_style_1 = require("./tabs.style");
 const tabs_1 = require("./tabs");
-exports.Tab = (0, react_1.memo)((0, react_1.forwardRef)(({ prefix, suffix, color = 'primary', orientation, label, value, disabled, _active, ...props }, ref) => {
+exports.Tab = (0, react_1.memo)(({ prefix, suffix, color = 'primary', orientation, label, value, disabled, _active, ...props }) => {
     const colorValue = (0, utils_1.useColor)(color);
     const { variant, animating } = (0, tabs_1.useTabsContext)();
-    return ((0, jsx_runtime_1.jsxs)("div", { ...props, ref: ref, className: (0, utils_1.classnames)(tabs_style_1.classes.tab, props.className), style: {
+    return ((0, jsx_runtime_1.jsxs)("div", { ...props, className: (0, utils_1.classnames)(tabs_style_1.classes.tab, props.className), style: {
             borderColor: variant === 'line' && !animating && _active ? colorValue : void 0,
             color: _active ? colorValue : void 0,
             ...props.style
@@ -18,4 +18,4 @@ exports.Tab = (0, react_1.memo)((0, react_1.forwardRef)(({ prefix, suffix, color
         }, children: [!!prefix &&
                 (0, jsx_runtime_1.jsx)("div", { className: tabs_style_1.classes.tabPrefix, children: prefix }), (0, jsx_runtime_1.jsx)("div", { className: tabs_style_1.classes.label, children: label }), !!suffix &&
                 (0, jsx_runtime_1.jsx)("div", { className: tabs_style_1.classes.tabSuffix, children: suffix })] }));
-}));
+});

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

@@ -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;