@canlooks/can-ui 0.0.21 → 0.0.23

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

@@ -1,7 +1,7 @@
 import { css } from '@emotion/react';
 import { defineClasses, defineCss } from '../../utils';
-import { zIndex } from '../app';
-import { style as appStyle } from '../app/app.style';
+import { appStyleCallback } from '../app/app.style';
+import { zIndex } from '../theme';
 export const classes = defineClasses('snackbar-base', [
     'itemWrap',
     'item',
@@ -12,133 +12,136 @@ export const classes = defineClasses('snackbar-base', [
     'close',
     'content'
 ]);
-export const style = defineCss(({ text, fontSize, spacing, background, borderRadius }) => [
-    appStyle,
-    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: ${zIndex.snackbar};
-        pointer-events: none;
-
-        &[data-use-to=notification] {
-            flex-direction: column-reverse;
-        }
-
-        .${classes.itemWrap} {
+export const style = defineCss(theme => {
+    const { text, fontSize, spacing, background, borderRadius } = theme;
+    return [
+        appStyleCallback(theme),
+        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: ${zIndex.snackbar};
+            pointer-events: none;
+
+            &[data-use-to=notification] {
+                flex-direction: column-reverse;
+            }
 
-        &[data-place="3"], &[data-place="4"], &[data-place="5"] {
-            bottom: 0;
-        }
+            .${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;
+            }
 
-            .${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;
 
-            .${classes.itemWrap} {
-                justify-content: center;
+                .${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%);
 
-            .${classes.itemWrap} {
-                justify-content: flex-end;
+                .${classes.itemWrap} {
+                    justify-content: center;
+                }
             }
-        }
 
-        &[data-place="1"] .${classes.item} {
-            transform-origin: left top;
-        }
+            &[data-place="2"],
+            &[data-place="5"] {
+                right: 0;
 
-        &[data-place="2"] .${classes.item} {
-            transform-origin: top;
-        }
+                .${classes.itemWrap} {
+                    justify-content: flex-end;
+                }
+            }
 
-        &[data-place="3"] .${classes.item} {
-            transform-origin: right top;
-        }
+            &[data-place="1"] .${classes.item} {
+                transform-origin: left top;
+            }
 
-        &[data-place="4"] .${classes.item} {
-            transform-origin: left bottom;
-        }
+            &[data-place="2"] .${classes.item} {
+                transform-origin: top;
+            }
 
-        &[data-place="5"] .${classes.item} {
-            transform-origin: bottom;
-        }
+            &[data-place="3"] .${classes.item} {
+                transform-origin: right top;
+            }
 
-        &[data-place="6"] .${classes.item} {
-            transform-origin: right bottom;
-        }
+            &[data-place="4"] .${classes.item} {
+                transform-origin: left bottom;
+            }
 
-        .${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"] .${classes.item} {
+                transform-origin: bottom;
             }
-            
-            .${classes.icon} {
-                line-height: 20px;
-                font-size: ${17 / 14}em;
+
+            &[data-place="6"] .${classes.item} {
+                transform-origin: right bottom;
             }
 
-            .${classes.text} {
-                flex: 1;
-                
-                .${classes.title} {
+            .${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;
+                }
+
+                .${classes.icon} {
+                    line-height: 20px;
+                    font-size: ${17 / 14}em;
+                }
+
+                .${classes.text} {
                     flex: 1;
-                    font-weight: bold;
-                    font-size: ${15 / 14}em;
 
-                    & + .${classes.content} {
-                        margin-top: 4px;
+                    .${classes.title} {
+                        flex: 1;
+                        font-weight: bold;
+                        font-size: ${15 / 14}em;
+
+                        & + .${classes.content} {
+                            margin-top: 4px;
+                        }
                     }
                 }
-            }
 
-            .${classes.close} {
-                margin: -4px -4px 0 0;
+                .${classes.close} {
+                    margin: -4px -4px 0 0;
+                }
             }
-        }
 
-        &[data-use-to=notification] {
-            .${classes.item} {
-                width: 360px;
+            &[data-use-to=notification] {
+                .${classes.item} {
+                    width: 360px;
+                }
             }
-        }
-    `
-]);
+        `
+    ];
+});

package/dist/esm/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/esm/components/sortableItem/sortableItem.js

@@ -1,15 +1,15 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { forwardRef, useCallback, useEffect, useRef } from 'react';
+import { useCallback, useEffect, useRef } from 'react';
 import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 import { cloneRef } from '../../utils';
-export const SortableItem = forwardRef(({ component: Component = 'div', id, disabled, sortableArguments, ...props }, ref) => {
+export const SortableItem = (({ ref, component: Component = 'div', id, disabled, sortableArguments, ...props }) => {
     const { attributes, isDragging, listeners, setNodeRef, transform, transition } = useSortable({
         ...sortableArguments,
         disabled,
         id
     });
-    const preventDefaultCallback = useRef();
+    const preventDefaultCallback = useRef(void 0);
     const onPointerUp = useCallback(() => {
         removeListener();
     }, []);

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

@@ -1,6 +1,6 @@
 import { AntdIconProps } from '@ant-design/icons/lib/components/AntdIcon';
 import { ReactNode } from 'react';
-import { DIVProps, Status as IStatus } from '../../../types';
+import { DIVProps, Status as IStatus } from '../../types';
 export type StatusType = IStatus | 'confirm' | 'unknown';
 export declare const statusMapToIcon: {
     info: import("react").ForwardRefExoticComponent<Omit<AntdIconProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
@@ -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/esm/components/status/status.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { InfoCircleFilled, CheckCircleFilled, ExclamationCircleFilled, CloseCircleFilled, QuestionCircleFilled } from '@ant-design/icons';
-import { cloneElement, forwardRef, isValidElement, memo, useMemo } from 'react';
+import { cloneElement, isValidElement, memo, useMemo } from 'react';
 import { classes, style } from './status.style';
 import { classnames, useStatusColor } from '../../utils';
 export const statusMapToIcon = {
@@ -11,12 +11,11 @@ export const statusMapToIcon = {
     confirm: QuestionCircleFilled,
     unknown: QuestionCircleFilled
 };
-export const StatusIcon = memo(forwardRef(({ icon, status = 'unknown', ...props }, ref) => {
+export const StatusIcon = memo(({ icon, status = 'unknown', ...props }) => {
     const DefaultIcon = statusMapToIcon[status];
     const statusColor = useStatusColor(status);
     const iconProps = {
         ...props,
-        ref,
         className: classnames(classes.icon, props.className),
         style: useMemo(() => ({
             color: statusColor,
@@ -29,7 +28,7 @@ export const StatusIcon = memo(forwardRef(({ icon, status = 'unknown', ...props
             : icon;
     }
     return _jsx(DefaultIcon, { ...iconProps });
-}));
+});
 const defaultLabel = {
     unknown: '未知',
     confirm: '确认',
@@ -38,8 +37,8 @@ const defaultLabel = {
     warning: '警告',
     error: '错误'
 };
-export const Status = memo(forwardRef(({ icon, status = 'unknown', variant = 'icon', label = defaultLabel[status], animation, ...props }, ref) => {
-    return (_jsxs("div", { ...props, ref: ref, css: style, className: classnames(classes.root, props.className), "data-animation": animation, children: [variant === 'icon'
+export const Status = memo(({ icon, status = 'unknown', variant = 'icon', label = defaultLabel[status], animation, ...props }) => {
+    return (_jsxs("div", { ...props, css: style, className: classnames(classes.root, props.className), "data-animation": animation, children: [variant === 'icon'
                 ? _jsx(StatusIcon, { icon: icon, status: status })
                 : _jsx("div", { className: classes.dot, style: { backgroundColor: useStatusColor(status) } }), _jsx("div", { className: classes.label, children: label })] }));
-}));
+});

package/dist/esm/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/esm/components/stepper/step.js

@@ -1,13 +1,13 @@
 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, useStyle } from './step.style';
 import { CheckOutlined, CloseOutlined, InfoOutlined, MinusOutlined } from '@ant-design/icons';
 import { useStepperContext } from './stepper';
-import { useTheme } from '../app';
-export const Step = memo(forwardRef(({ indicator, title, prefix, suffix, description, step = 0, 
+import { useTheme } from '../theme';
+export const Step = memo(({ indicator, title, prefix, suffix, description, step = 0, 
 // 共享属性，从StepperSharedProps继承而来
-size, gap, color, variant, labelPlacement, clickable, status = 'waiting', ...props }, ref) => {
+size, gap, color, variant, labelPlacement, clickable, status = 'waiting', ...props }) => {
     const theme = useTheme();
     const context = useStepperContext();
     size ??= context.size ?? theme.size;
@@ -19,7 +19,7 @@ size, gap, color, variant, labelPlacement, clickable, status = 'waiting', ...pro
     const renderInner = (prop) => {
         return typeof prop === 'function' ? prop({ step, status }) : prop;
     };
-    return (_jsxs("div", { ...props, ref: ref, css: useStyle({ color, gap }), className: classnames(classes.root, props.className), "data-size": size, "data-status": status, "data-variant": variant, "data-label-placement": labelPlacement, "data-clickable": clickable, children: [indicator
+    return (_jsxs("div", { ...props, css: useStyle({ color, gap }), className: classnames(classes.root, props.className), "data-size": size, "data-status": status, "data-variant": variant, "data-label-placement": labelPlacement, "data-clickable": clickable, children: [indicator
                 ? renderInner(indicator)
                 : _jsx("div", { className: classes.indicatorWrap, children: _jsx("div", { className: classes.indicator, children: (() => {
                             if (variant === 'dot') {
@@ -39,4 +39,4 @@ size, gap, color, variant, labelPlacement, clickable, status = 'waiting', ...pro
                                     return _jsx(MinusOutlined, {});
                             }
                         })() }) }), _jsxs("div", { className: classes.label, children: [_jsx("div", { className: classes.title, children: _jsx("div", { className: classes.titleText, children: renderInner(title) }) }), _jsx("div", { className: classes.description, children: renderInner(description) })] })] }));
-}));
+});

package/dist/esm/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/esm/components/stepper/step.style.js

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

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

@@ -1,13 +1,13 @@
 import { ReactElement } from 'react';
-import { ColorPropsValue, DIVProps, Obj, Size } from '../../../types';
+import { ColorPropsValue, DIVProps, Obj, Size } from '../../types';
 import { Step, StepProps } from './step';
 export type StepStatus = 'waiting' | 'processing' | 'finished' | 'skipped' | 'error' | 'warning';
 export interface StepperSharedProps extends Omit<DIVProps, 'onChange' | 'title' | 'prefix'> {
     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/esm/components/stepper/stepper.js

@@ -1,16 +1,16 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { Children, cloneElement, createContext, forwardRef, isValidElement, useContext, useMemo } from 'react';
+import { Children, cloneElement, createContext, isValidElement, useContext, useMemo } from 'react';
 import { classnames, useControlled } from '../../utils';
 import { classes, style } from './stepper.style';
 import { Step } from './step';
-const stepperContext = createContext({});
+const StepperContext = createContext({});
 export function useStepperContext() {
-    return useContext(stepperContext);
+    return useContext(StepperContext);
 }
-export const Stepper = forwardRef(({ steps, orientation = 'horizontal', defualtValue = 0, value, onChange, 
+export const Stepper = (({ steps, orientation = 'horizontal', defaultValue = 0, value, onChange, 
 // 以下为共享属性
-size, gap = orientation === 'horizontal' ? 15 : 9, color, variant, clickable, labelPlacement, status, ...props }, ref) => {
-    const [innerValue, setInnerValue] = useControlled(defualtValue, value, onChange);
+size, gap = orientation === 'horizontal' ? 15 : 9, color, variant, clickable, labelPlacement, status, ...props }) => {
+    const [innerValue, setInnerValue] = useControlled(defaultValue, value, onChange);
     const renderSteps = () => {
         if (steps) {
             return steps.map((p, i) => {
@@ -46,10 +46,10 @@ size, gap = orientation === 'horizontal' ? 15 : 9, color, variant, clickable, la
             return c;
         });
     };
-    return (_jsx("div", { ...props, ref: ref, css: style, className: classnames(classes.root, props.className), "data-orientation": orientation, style: {
+    return (_jsx("div", { ...props, css: style, className: classnames(classes.root, props.className), "data-orientation": orientation, style: {
             gap,
             ...props.style
-        }, children: _jsx(stepperContext.Provider, { value: useMemo(() => ({
+        }, children: _jsx(StepperContext, { value: useMemo(() => ({
                 size, gap, color, variant, clickable, labelPlacement
             }), [
                 size, gap, color, variant, clickable, labelPlacement

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

@@ -1,8 +1,8 @@
-import { ReactNode, Ref } from 'react';
-import { ColorPropsValue, DIVProps, Size } from '../../../types';
+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/esm/components/switch/switch.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
-import { forwardRef, memo } from 'react';
+import { memo } from 'react';
 import { classes, useStyle } from './switch.style';
-import { useTheme } from '../app';
+import { useTheme } from '../theme';
 import { classnames, useControlled } from '../../utils';
-export const Switch = memo(forwardRef(({ inputProps, inputRef, color = 'primary', size, thumbSize, thumbProps, renderThumb, trackSize, trackProps, renderTrack, checkedLabel, unCheckedLabel, defaultChecked = false, checked, onChange, readOnly, disabled, ...props }, ref) => {
+export const Switch = memo(({ inputProps, inputRef, color = 'primary', size, thumbSize, thumbProps, renderThumb, trackSize, trackProps, renderTrack, checkedLabel, unCheckedLabel, defaultChecked = false, checked, onChange, readOnly, disabled, ...props }) => {
     const theme = useTheme();
     size ??= theme.size;
     trackSize ??= size === 'medium' ? 20
@@ -73,5 +73,5 @@ export const Switch = memo(forwardRef(({ inputProps, inputRef, color = 'primary'
         inputProps?.onKeyDown?.(e);
         e.key === 'Enter' && toggleChecked();
     };
-    return (_jsxs("div", { ...props, ref: ref, css: useStyle({ color }), className: classnames(classes.root, props.className), onClick: clickHandler, "data-checked": innerChecked.current, "data-read-only": readOnly, "data-disabled": disabled, children: [renderTrackFn(), _jsx("input", { ...inputProps, checked: innerChecked.current, ref: inputRef, className: classnames(classes.input, inputProps?.className), onChange: e => inputProps?.onChange?.(e), onKeyDown: inputKeyDownHandler })] }));
-}));
+    return (_jsxs("div", { ...props, css: useStyle({ color }), className: classnames(classes.root, props.className), onClick: clickHandler, "data-checked": innerChecked.current, "data-read-only": readOnly, "data-disabled": disabled, children: [renderTrackFn(), _jsx("input", { ...inputProps, checked: innerChecked.current, ref: inputRef, className: classnames(classes.input, inputProps?.className), onChange: e => inputProps?.onChange?.(e), onKeyDown: inputKeyDownHandler })] }));
+});

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

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

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

@@ -1,9 +1,8 @@
-import { Ref } from 'react';
-import { Size } from '../../../types';
-export interface TableProps extends Omit<JSX.IntrinsicElements['table'], 'ref'> {
-    ref?: Ref<HTMLTableElement>;
+import React from 'react';
+import { Size } from '../../types';
+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/esm/components/table/table.js

@@ -1,10 +1,9 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { forwardRef } from 'react';
 import { classes, style } from './table.style';
 import { classnames } from '../../utils';
-import { useTheme } from '../app';
-export const Table = forwardRef(({ size, bordered = false, striped = false, ...props }, ref) => {
+import { useTheme } from '../theme';
+export function Table({ size, bordered = false, striped = false, ...props }) {
     const theme = useTheme();
     size ??= theme.size;
-    return (_jsx("table", { ...props, ref: ref, css: style, className: classnames(classes.root, props.className), "data-size": size, "data-bordered": bordered, "data-striped": striped }));
-});
+    return (_jsx("table", { ...props, css: style, className: classnames(classes.root, props.className), "data-size": size, "data-bordered": bordered, "data-striped": striped }));
+}

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

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { ColorPropsValue, DIVProps, Id } from '../../../types';
+import { ColorPropsValue, DIVProps, Id } from '../../types';
 export interface TabProps extends Omit<DIVProps, 'prefix'> {
     prefix?: ReactNode;
     suffix?: ReactNode;
@@ -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/esm/components/tabs/tab.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { forwardRef, memo } from 'react';
+import { memo } from 'react';
 import { classnames, useColor } from '../../utils';
 import { classes } from './tabs.style';
 import { useTabsContext } from './tabs';
-export const Tab = memo(forwardRef(({ prefix, suffix, color = 'primary', orientation, label, value, disabled, _active, ...props }, ref) => {
+export const Tab = memo(({ prefix, suffix, color = 'primary', orientation, label, value, disabled, _active, ...props }) => {
     const colorValue = useColor(color);
     const { variant, animating } = useTabsContext();
-    return (_jsxs("div", { ...props, ref: ref, className: classnames(classes.tab, props.className), style: {
+    return (_jsxs("div", { ...props, className: classnames(classes.tab, props.className), style: {
             borderColor: variant === 'line' && !animating && _active ? colorValue : void 0,
             color: _active ? colorValue : void 0,
             ...props.style
@@ -15,4 +15,4 @@ export const Tab = memo(forwardRef(({ prefix, suffix, color = 'primary', orienta
         }, children: [!!prefix &&
                 _jsx("div", { className: classes.tabPrefix, children: prefix }), _jsx("div", { className: classes.label, children: label }), !!suffix &&
                 _jsx("div", { className: classes.tabSuffix, children: suffix })] }));
-}));
+});