@canlooks/can-ui 0.0.24 → 0.0.26

package/dist/esm/components/sortableItem/sortableItem.js

@@ -3,7 +3,7 @@ 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 = (({ ref, component: Component = 'div', id, disabled, sortableArguments, ...props }) => {
+export const SortableItem = (({ component: Component = 'div', id, disabled, sortableArguments, ...props }) => {
     const { attributes, isDragging, listeners, setNodeRef, transform, transition } = useSortable({
         ...sortableArguments,
         disabled,
@@ -13,7 +13,8 @@ export const SortableItem = (({ ref, component: Component = 'div', id, disabled,
     const onPointerUp = useCallback(() => {
         removeListener();
     }, []);
-    const onTouchStart = useCallback(() => {
+    const onTouchStart = useCallback((e) => {
+        props.onTouchStart?.(e);
         addEventListener('touchmove', preventDefaultCallback.current = e => {
             e.cancelable && e.preventDefault();
         }, { passive: false });
@@ -27,8 +28,9 @@ export const SortableItem = (({ ref, component: Component = 'div', id, disabled,
         removeEventListener('pointerup', onPointerUp);
     };
     useEffect(() => removeListener, []);
-    return (_jsx(Component, { style: {
+    return (_jsx(Component, { ...attributes, ...listeners, ...props, ref: cloneRef(setNodeRef, props.ref), style: {
             transform: CSS.Transform.toString(transform),
-            transition
-        }, ...attributes, ...listeners, "data-dragging": isDragging, ...props, ref: cloneRef(ref, setNodeRef), onTouchStart: disabled ? void 0 : onTouchStart }));
+            transition,
+            ...props.style
+        }, onTouchStart: disabled ? void 0 : onTouchStart, "data-dragging": isDragging }));
 });

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

@@ -1,27 +1,27 @@
-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';
+import { FontAwesomeIconProps } from '@fortawesome/react-fontawesome';
 export type StatusType = IStatus | 'confirm' | 'unknown';
-export declare const statusMapToIcon: {
-    info: import("react").ForwardRefExoticComponent<Omit<AntdIconProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
-    success: import("react").ForwardRefExoticComponent<Omit<AntdIconProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
-    warning: import("react").ForwardRefExoticComponent<Omit<AntdIconProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
-    error: import("react").ForwardRefExoticComponent<Omit<AntdIconProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
-    confirm: import("react").ForwardRefExoticComponent<Omit<AntdIconProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
-    unknown: import("react").ForwardRefExoticComponent<Omit<AntdIconProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+export declare const statusMapToIconDefinition: {
+    info: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    success: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    warning: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    error: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    confirm: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    unknown: import("@fortawesome/fontawesome-common-types").IconDefinition;
 };
-export interface StatusIconProps extends AntdIconProps {
-    icon?: ReactNode;
+export interface StatusIconProps extends Partial<FontAwesomeIconProps> {
     status?: StatusType;
 }
-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;
+export declare const StatusIcon: import("react").MemoExoticComponent<({ status, ...props }: StatusIconProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
+export interface StatusProps extends DivProps {
     status?: StatusType;
     /** 默认为"icon" */
     variant?: 'icon' | 'dot';
     label?: ReactNode;
     /** 是否播放动画，默认为false */
     animation?: boolean;
+    /** {@link variant}为`icon`时生效，传递给`<StatusIcon/>`组件 */
+    iconProps?: Partial<FontAwesomeIconProps>;
 }
-export declare const Status: import("react").MemoExoticComponent<({ icon, status, variant, label, animation, ...props }: StatusProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
+export declare const Status: import("react").MemoExoticComponent<({ status, variant, label, animation, iconProps, ...props }: StatusProps) => import("@emotion/react/jsx-runtime").JSX.Element>;

package/dist/esm/components/status/status.js

@@ -1,33 +1,33 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { InfoCircleFilled, CheckCircleFilled, ExclamationCircleFilled, CloseCircleFilled, QuestionCircleFilled } from '@ant-design/icons';
-import { cloneElement, isValidElement, memo, useMemo } from 'react';
+import { memo, useMemo } from 'react';
 import { classes, style } from './status.style';
-import { classnames, useStatusColor } from '../../utils';
-export const statusMapToIcon = {
-    info: InfoCircleFilled,
-    success: CheckCircleFilled,
-    warning: ExclamationCircleFilled,
-    error: CloseCircleFilled,
-    confirm: QuestionCircleFilled,
-    unknown: QuestionCircleFilled
+import { clsx, useStatusColor } from '../../utils';
+import { faCircleInfo } from '@fortawesome/free-solid-svg-icons/faCircleInfo';
+import { faCircleCheck } from '@fortawesome/free-solid-svg-icons/faCircleCheck';
+import { faCircleExclamation } from '@fortawesome/free-solid-svg-icons/faCircleExclamation';
+import { faCircleXmark } from '@fortawesome/free-solid-svg-icons/faCircleXmark';
+import { faCircleQuestion } from '@fortawesome/free-solid-svg-icons/faCircleQuestion';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+export const statusMapToIconDefinition = {
+    info: faCircleInfo,
+    success: faCircleCheck,
+    warning: faCircleExclamation,
+    error: faCircleXmark,
+    confirm: faCircleQuestion,
+    unknown: faCircleQuestion
 };
-export const StatusIcon = memo(({ icon, status = 'unknown', ...props }) => {
-    const DefaultIcon = statusMapToIcon[status];
+export const StatusIcon = memo(({ status = 'unknown', ...props }) => {
     const statusColor = useStatusColor(status);
     const iconProps = {
         ...props,
-        className: classnames(classes.icon, props.className),
+        icon: props.icon || statusMapToIconDefinition[status],
+        className: clsx(classes.icon, props.className),
         style: useMemo(() => ({
             color: statusColor,
             ...props.style
         }), [statusColor, props.style])
     };
-    if (typeof icon !== 'undefined') {
-        return isValidElement(icon)
-            ? cloneElement(icon, iconProps)
-            : icon;
-    }
-    return _jsx(DefaultIcon, { ...iconProps });
+    return _jsx(FontAwesomeIcon, { ...iconProps });
 });
 const defaultLabel = {
     unknown: '未知',
@@ -37,8 +37,8 @@ const defaultLabel = {
     warning: '警告',
     error: '错误'
 };
-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 })
+export const Status = memo(({ status = 'unknown', variant = 'icon', label = defaultLabel[status], animation, iconProps, ...props }) => {
+    return (_jsxs("div", { ...props, css: style, className: clsx(classes.root, props.className), "data-animation": animation, children: [variant === 'icon'
+                ? _jsx(StatusIcon, { ...iconProps, status: status })
                 : _jsx("div", { className: classes.dot, style: { backgroundColor: useStatusColor(status) } }), _jsx("div", { className: classes.label, children: label })] }));
 });

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

@@ -1,10 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { memo } from 'react';
-import { classnames } from '../../utils';
+import { clsx } from '../../utils';
 import { classes, useStyle } from './step.style';
-import { CheckOutlined, CloseOutlined, InfoOutlined, MinusOutlined } from '@ant-design/icons';
 import { useStepperContext } from './stepper';
 import { useTheme } from '../theme';
+import { Icon } from '../..';
+import { faCheck } from '@fortawesome/free-solid-svg-icons/faCheck';
+import { faCircleInfo } from '@fortawesome/free-solid-svg-icons/faCircleInfo';
+import { faXmark } from '@fortawesome/free-solid-svg-icons/faXmark';
+import { faMinus } from '@fortawesome/free-solid-svg-icons/faMinus';
 export const Step = memo(({ indicator, title, prefix, suffix, description, step = 0, 
 // 共享属性，从StepperSharedProps继承而来
 size, gap, color, variant, labelPlacement, clickable, status = 'waiting', ...props }) => {
@@ -12,14 +16,14 @@ size, gap, color, variant, labelPlacement, clickable, status = 'waiting', ...pro
     const context = useStepperContext();
     size ??= context.size ?? theme.size;
     gap ??= context.gap ?? theme.spacing[5];
-    color ??= context.color ?? 'primary';
+    color ||= context.color ?? 'primary';
     variant ??= context.variant ?? 'number';
     labelPlacement ??= context.labelPlacement;
     clickable ??= context.clickable;
     const renderInner = (prop) => {
         return typeof prop === 'function' ? prop({ step, status }) : prop;
     };
-    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
+    return (_jsxs("div", { ...props, css: useStyle({ color, gap }), className: clsx(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') {
@@ -30,13 +34,13 @@ size, gap, color, variant, labelPlacement, clickable, status = 'waiting', ...pro
                                 case 'processing':
                                     return step + 1;
                                 case 'finished':
-                                    return _jsx(CheckOutlined, {});
+                                    return _jsx(Icon, { icon: faCheck });
                                 case 'warning':
-                                    return _jsx(InfoOutlined, {});
+                                    return _jsx(Icon, { icon: faCircleInfo });
                                 case 'error':
-                                    return _jsx(CloseOutlined, {});
+                                    return _jsx(Icon, { icon: faXmark });
                                 case 'skipped':
-                                    return _jsx(MinusOutlined, {});
+                                    return _jsx(Icon, { icon: faMinus });
                             }
                         })() }) }), _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

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

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

@@ -18,6 +18,7 @@ export function useStyle({ color, gap }) {
             display: flex;
             align-items: flex-start;
             gap: ${spacing[4]}px;
+            -webkit-tap-highlight-color: transparent;
 
             .${classes.indicator} {
                 min-width: 32px;
@@ -26,7 +27,7 @@ export function useStyle({ color, gap }) {
                 display: flex;
                 align-items: center;
                 justify-content: center;
-                transition: background-color .2s ${easing.easeOut}, color .2s ${easing.easeOut};
+                transition: background-color .25s ${easing.easeOut}, color .25s ${easing.easeOut};
             }
 
             &[data-variant=dot] {
@@ -63,7 +64,7 @@ export function useStyle({ color, gap }) {
                 }
             }
 
-            &:last-of-type \.${classes.title}:after {
+            &:last-of-type .${classes.title}:after {
                 display: none;
             }
 
@@ -159,7 +160,7 @@ export function useStyle({ color, gap }) {
                     }
                 }
 
-                \.${classes.title}:after {
+                .${classes.title}:after {
                     background-color: ${colorValue};
                 }
             }
@@ -195,7 +196,7 @@ export function useStyle({ color, gap }) {
             &[data-clickable=true] {
                 cursor: pointer;
                 border-radius: ${borderRadius}px;
-                transition: background-color .2s ${easing.easeOut};
+                transition: background-color .25s ${easing.easeOut};
                 
                 &:hover {
                     background-color: ${gray(mode === 'light' ? .03 : .18)};
@@ -230,17 +231,17 @@ export function useStyle({ color, gap }) {
                 }
 
                 &:last-of-type {
-                    \.${classes.indicatorWrap}:after {
+                    .${classes.indicatorWrap}:after {
                         display: none;
                     }
                 }
 
-                \.${classes.title}:after {
+                .${classes.title}:after {
                     display: none;
                 }
 
                 &[data-status=finished] {
-                    \.${classes.indicatorWrap}:after {
+                    .${classes.indicatorWrap}:after {
                         background-color: ${colorValue};
                     }
                 }
@@ -266,7 +267,7 @@ export function useStyle({ color, gap }) {
                 }
 
                 &:last-of-type {
-                    \.${classes.indicatorWrap}:after {
+                    .${classes.indicatorWrap}:after {
                         display: none;
                     }
                 }
@@ -306,7 +307,7 @@ export function useStyle({ color, gap }) {
                 }
 
                 &[data-status=finished] {
-                    \.${classes.indicatorWrap}:after {
+                    .${classes.indicatorWrap}:after {
                         background-color: ${colorValue};
                     }
                 }

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

@@ -1,8 +1,8 @@
 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'> {
+export interface StepperSharedProps extends Omit<DivProps, 'onChange' | 'title' | 'prefix'> {
     size?: Size;
     /**
      * 各步骤的间距

package/dist/esm/components/stepper/stepper.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { Children, cloneElement, createContext, isValidElement, useContext, useMemo } from 'react';
-import { classnames, useControlled } from '../../utils';
+import { clsx, useControlled } from '../../utils';
 import { classes, style } from './stepper.style';
 import { Step } from './step';
 const StepperContext = createContext({});
@@ -46,7 +46,7 @@ size, gap = orientation === 'horizontal' ? 15 : 9, color, variant, clickable, la
             return c;
         });
     };
-    return (_jsx("div", { ...props, css: style, className: classnames(classes.root, props.className), "data-orientation": orientation, style: {
+    return (_jsx("div", { ...props, css: style, className: clsx(classes.root, props.className), "data-orientation": orientation, style: {
             gap,
             ...props.style
         }, children: _jsx(StepperContext, { value: useMemo(() => ({

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

@@ -1,19 +1,18 @@
-import React, { ReactNode, Ref } from 'react';
-import { ColorPropsValue, DIVProps, Size } from '../../types';
-export interface SwitchProps extends Omit<DIVProps, 'onChange'> {
+import React, { ReactNode, JSX } from 'react';
+import { ColorPropsValue, DivProps, Size } from '../../types';
+export interface SwitchProps extends Omit<DivProps, 'onChange'> {
     /** <Switch />内部使用<input />实现 */
-    inputProps?: React.JSX.IntrinsicElements['input'];
-    inputRef?: Ref<HTMLInputElement>;
+    inputProps?: JSX.IntrinsicElements['input'];
     color?: ColorPropsValue;
     size?: Size;
     /** 滑块 */
     thumbSize?: number;
-    thumbProps?: DIVProps;
-    renderThumb?: ReactNode | ((checked: boolean, thumbProps: DIVProps) => ReactNode);
+    thumbProps?: DivProps;
+    renderThumb?: ReactNode | ((checked: boolean, thumbProps: DivProps) => ReactNode);
     /** 轨道 */
     trackSize?: number;
-    trackProps?: DIVProps;
-    renderTrack?: ReactNode | ((checked: boolean, trackProps: DIVProps) => ReactNode);
+    trackProps?: DivProps;
+    renderTrack?: ReactNode | ((checked: boolean, trackProps: DivProps) => ReactNode);
     checkedLabel?: ReactNode;
     unCheckedLabel?: ReactNode;
     defaultChecked?: boolean;
@@ -22,4 +21,4 @@ export interface SwitchProps extends Omit<DIVProps, 'onChange'> {
     readOnly?: boolean;
     disabled?: boolean;
 }
-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>;
+export declare const Switch: React.MemoExoticComponent<({ inputProps, 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

@@ -2,8 +2,8 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/reac
 import { memo } from 'react';
 import { classes, useStyle } from './switch.style';
 import { useTheme } from '../theme';
-import { classnames, useControlled } from '../../utils';
-export const Switch = memo(({ inputProps, inputRef, color = 'primary', size, thumbSize, thumbProps, renderThumb, trackSize, trackProps, renderTrack, checkedLabel, unCheckedLabel, defaultChecked = false, checked, onChange, readOnly, disabled, ...props }) => {
+import { clsx, useControlled } from '../../utils';
+export const Switch = memo(({ inputProps, 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
@@ -14,7 +14,7 @@ export const Switch = memo(({ inputProps, inputRef, color = 'primary', size, thu
     const renderThumbFn = () => {
         const _thumbProps = {
             ...thumbProps,
-            className: classnames(classes.thumb, thumbProps?.className),
+            className: clsx(classes.thumb, thumbProps?.className),
             style: {
                 width: thumbSize,
                 left: innerChecked.current
@@ -34,7 +34,7 @@ export const Switch = memo(({ inputProps, inputRef, color = 'primary', size, thu
     const renderTrackFn = () => {
         const _trackProps = {
             ...trackProps,
-            className: classnames(classes.track, trackProps?.className),
+            className: clsx(classes.track, trackProps?.className),
             style: {
                 height: trackSize,
                 ...trackProps?.style
@@ -73,5 +73,5 @@ export const Switch = memo(({ inputProps, inputRef, color = 'primary', size, thu
         inputProps?.onKeyDown?.(e);
         e.key === 'Enter' && toggleChecked();
     };
-    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 })] }));
+    return (_jsxs("div", { ...props, css: useStyle({ color: color || 'primary' }), className: clsx(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, className: clsx(classes.input, inputProps?.className), onChange: e => inputProps?.onChange?.(e), onKeyDown: inputKeyDownHandler })] }));
 });

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

@@ -3,9 +3,9 @@ export declare const classes: {
     input: string;
     label: string;
     track: string;
+    thumb: string;
     checkedLabel: string;
     uncheckedLabel: string;
-    thumb: string;
 } & {
     root: string;
 };

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

@@ -36,12 +36,12 @@ export function useStyle({ color }) {
                 outline-offset: 1px;
                 outline: 0 solid ${outlineColor};
                 background-color: ${gray(.1)};
-                transition: background-color .2s ${easing.easeOut};
+                transition: background-color .25s ${easing.easeOut};
             }
 
             &:has(:focus-visible) {
                 .${classes.track} {
-                    transition: background-color .2s ${easing.easeOut}, outline-width .2s ${easing.swing};
+                    transition: background-color .25s ${easing.easeOut}, outline-width .25s ${easing.swing};
                     outline-width: 3px;
                 }
             }
@@ -55,7 +55,7 @@ export function useStyle({ color }) {
                 top: 50%;
                 transform: translateY(-50%);
                 left: 2px;
-                transition: left .2s ${easing.bounce};
+                transition: left .25s ${easing.bounce};
             }
 
             &:not([data-disabled=true]):not([data-read-only=true]) {
@@ -94,7 +94,7 @@ export function useStyle({ color }) {
                 height: 100%;
                 align-self: flex-start;
                 white-space: nowrap;
-                transition: all .2s ${easing.bounce};
+                transition: all .25s ${easing.bounce};
                 
                 .${classes.checkedLabel},
                 .${classes.uncheckedLabel} {

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

@@ -1 +1,2 @@
 export * from './table';
+export * from './tableSticky';

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

@@ -1 +1,2 @@
 export * from './table';
+export * from './tableSticky';

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

@@ -1,8 +1,26 @@
-import React from 'react';
+import { JSX } from 'react';
 import { Size } from '../../types';
-export interface TableProps extends Partial<React.JSX.IntrinsicElements['table']> {
+import { TdCell, ThCell } from './tableSticky';
+export interface TableProps extends Partial<JSX.IntrinsicElements['table']> {
     size?: Size;
-    bordered?: boolean;
+    /**
+     * 是否渲染边框，默认为`none`
+     * @enum 'all' 所有单元格都渲染边框
+     * @enum true 所有单元格都渲染边框
+     * @enum 'out' 仅table外边缘渲染边框
+     * @enum 'none' 不渲染边框
+     */
+    bordered?: 'all' | 'out' | 'none' | true;
+    /** 是否渲染斑马纹 */
     striped?: boolean;
 }
 export declare function Table({ size, bordered, striped, ...props }: TableProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare namespace Table {
+    var tr: typeof TableRow;
+    var th: typeof ThCell;
+    var td: typeof TdCell;
+}
+export interface TableRowProps extends Partial<JSX.IntrinsicElements['tr']> {
+    selected?: boolean;
+}
+export declare function TableRow({ selected, ...props }: TableRowProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/esm/components/table/table.js

@@ -1,9 +1,16 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { classes, style } from './table.style';
-import { classnames } from '../../utils';
+import { clsx } from '../../utils';
 import { useTheme } from '../theme';
-export function Table({ size, bordered = false, striped = false, ...props }) {
+import { TdCell, ThCell } from './tableSticky';
+export function Table({ size, bordered = 'none', striped = false, ...props }) {
     const theme = useTheme();
     size ??= theme.size;
-    return (_jsx("table", { ...props, css: style, className: classnames(classes.root, props.className), "data-size": size, "data-bordered": bordered, "data-striped": striped }));
+    return (_jsx("table", { ...props, css: style, className: clsx(classes.root, props.className), "data-size": size, "data-bordered": bordered, "data-striped": striped }));
 }
+export function TableRow({ selected, ...props }) {
+    return _jsx("tr", { ...props, "data-selected": selected });
+}
+Table.tr = TableRow;
+Table.th = ThCell;
+Table.td = TdCell;

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

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