@canlooks/can-ui 0.0.25 → 0.0.27

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

@@ -9,14 +9,19 @@ const utils_1 = require("../../utils");
 const snackbarBase_style_1 = require("./snackbarBase.style");
 const react_transition_group_1 = require("react-transition-group");
 const status_1 = require("../status");
-const icons_1 = require("@ant-design/icons");
 const button_1 = require("../button");
 const react_dom_1 = require("react-dom");
+const __1 = require("../..");
+const faXmark_1 = require("@fortawesome/free-solid-svg-icons/faXmark");
 class SnackbarBaseMethods {
-    async info(_) { }
-    async success(_) { }
-    async warning(_) { }
-    async error(_) { }
+    async info(_) {
+    }
+    async success(_) {
+    }
+    async warning(_) {
+    }
+    async error(_) {
+    }
 }
 exports.SnackbarBaseMethods = SnackbarBaseMethods;
 // placement对应stacks的index
@@ -44,7 +49,7 @@ exports.SnackbarBase = (0, react_2.memo)(({ methods, useTo, max = useTo === 'mes
             : { content: props };
         const { placement = useTo === 'message' ? 'top' : 'topRight', duration = useTo === 'message' ? 3000 : 5000, ...restProps } = propsObject;
         const index = placementToIndex[placement];
-        let id = (0, utils_1.getEazyID)('snackbar');
+        let id = (0, utils_1.getEasyID)('snackbar');
         const onCloseButtonClick = () => {
             setStacks(o => {
                 o[index] = o[index].filter(s => s.id !== id);
@@ -102,21 +107,20 @@ const placementToDirection = {
     bottomRight: 'left',
     rightBottom: 'left'
 };
-exports.SnackbarBaseItem = (0, react_2.memo)(({ id, type, useTo, resolve, variant = 'plain', color = 'primary', icon, title, content, showClose = useTo === 'notification', placement, onCloseButtonClick, ...props }) => {
+exports.SnackbarBaseItem = (0, react_2.memo)(({ id, type, useTo, resolve, variant = 'outlined', color = 'primary', icon, title, content, showClose = useTo === 'notification', placement, onCloseButtonClick, ...props }) => {
     const onExited = () => {
         props.onExited?.();
         resolve();
     };
     const colorValue = (0, utils_1.useColor)(color);
-    const Icon = status_1.statusMapToIcon[type];
-    const renderedIcon = icon ?? (variant === 'plain'
+    const renderedIcon = icon ?? (variant === 'outlined'
         ? (0, jsx_runtime_1.jsx)(status_1.StatusIcon, { status: type })
-        : (0, jsx_runtime_1.jsx)(Icon, {}));
+        : (0, jsx_runtime_1.jsx)(__1.Icon, { icon: status_1.statusMapToIconDefinition[type] }));
     const closeHandler = (e) => {
         e.stopPropagation();
         onCloseButtonClick?.(e);
     };
-    return ((0, jsx_runtime_1.jsx)(transitionBase_1.Collapse, { in: props.in, className: snackbarBase_style_1.classes.itemWrap, onExited: onExited, children: (0, jsx_runtime_1.jsxs)(transitionBase_1.Slide, { direction: placementToDirection[placement], ...props, className: (0, utils_1.classnames)(snackbarBase_style_1.classes.item, props.className), style: {
+    return ((0, jsx_runtime_1.jsx)(transitionBase_1.Collapse, { in: props.in, className: snackbarBase_style_1.classes.itemWrap, onExited: onExited, children: (0, jsx_runtime_1.jsxs)(transitionBase_1.Slide, { direction: placementToDirection[placement], ...props, className: (0, utils_1.clsx)(snackbarBase_style_1.classes.item, props.className), style: {
                 backgroundColor: variant === 'filled' ? colorValue : void 0,
                 ...props.style
             }, "data-variant": variant, "data-use-to": useTo, children: [!!renderedIcon &&
@@ -124,5 +128,5 @@ exports.SnackbarBaseItem = (0, react_2.memo)(({ id, type, useTo, resolve, varian
                     (0, jsx_runtime_1.jsxs)("div", { className: snackbarBase_style_1.classes.text, children: [!!title &&
                                 (0, jsx_runtime_1.jsx)("div", { className: snackbarBase_style_1.classes.title, children: title }), !!content &&
                                 (0, jsx_runtime_1.jsx)("div", { className: snackbarBase_style_1.classes.content, children: content })] }), showClose &&
-                    (0, jsx_runtime_1.jsx)(button_1.Button, { variant: "text", shape: "circular", color: "disabled", size: "small", className: snackbarBase_style_1.classes.close, onClick: closeHandler, children: (0, jsx_runtime_1.jsx)(icons_1.CloseOutlined, {}) })] }) }));
+                    (0, jsx_runtime_1.jsx)(button_1.Button, { variant: "text", shape: "circular", color: "text.disabled", size: "small", className: snackbarBase_style_1.classes.close, onClick: closeHandler, children: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faXmark_1.faXmark }) })] }) }));
 });

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

@@ -1,8 +1,8 @@
 export declare const classes: {
     text: string;
     title: string;
-    content: string;
     icon: string;
+    content: string;
     close: string;
     item: string;
     titleRow: string;

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

@@ -102,7 +102,7 @@ exports.style = (0, utils_1.defineCss)(theme => {
             }
 
             .${exports.classes.item} {
-                pointer-events: all;
+                pointer-events: all !important;
                 max-width: 60%;
                 display: flex;
                 gap: ${spacing[4]}px;
@@ -117,7 +117,6 @@ exports.style = (0, utils_1.defineCss)(theme => {
                 }
 
                 .${exports.classes.icon} {
-                    line-height: 20px;
                     font-size: ${17 / 14}em;
                 }
 

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

@@ -1,9 +1,10 @@
-import { ReactElement } from 'react';
+import { ElementType } from 'react';
 import { Arguments } from '@dnd-kit/sortable/dist/hooks/useSortable';
-export type SortableItemProps<P> = Omit<P, 'component' | 'id' | 'disabled' | 'sortableArguments'> & {
-    component?: any;
+import { OverridableComponent, OverridableProps } from '../../types';
+export type SortableItemOwnProps = {
     id: string | number;
     disabled?: boolean;
     sortableArguments?: Arguments;
 };
-export declare const SortableItem: <P>(props: SortableItemProps<P>) => ReactElement;
+export type SortableItemProps<C extends ElementType = 'div'> = OverridableProps<SortableItemOwnProps, C>;
+export declare const SortableItem: OverridableComponent<SortableItemOwnProps>;

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

@@ -6,7 +6,7 @@ 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 = (({ ref, component: Component = 'div', id, disabled, sortableArguments, ...props }) => {
+exports.SortableItem = (({ component: Component = 'div', id, disabled, sortableArguments, ...props }) => {
     const { attributes, isDragging, listeners, setNodeRef, transform, transition } = (0, sortable_1.useSortable)({
         ...sortableArguments,
         disabled,
@@ -16,7 +16,8 @@ exports.SortableItem = (({ ref, component: Component = 'div', id, disabled, sort
     const onPointerUp = (0, react_1.useCallback)(() => {
         removeListener();
     }, []);
-    const onTouchStart = (0, react_1.useCallback)(() => {
+    const onTouchStart = (0, react_1.useCallback)((e) => {
+        props.onTouchStart?.(e);
         addEventListener('touchmove', preventDefaultCallback.current = e => {
             e.cancelable && e.preventDefault();
         }, { passive: false });
@@ -30,8 +31,9 @@ exports.SortableItem = (({ ref, component: Component = 'div', id, disabled, sort
         removeEventListener('pointerup', onPointerUp);
     };
     (0, react_1.useEffect)(() => removeListener, []);
-    return ((0, jsx_runtime_1.jsx)(Component, { style: {
+    return ((0, jsx_runtime_1.jsx)(Component, { ...attributes, ...listeners, ...props, ref: (0, utils_1.cloneRef)(setNodeRef, props.ref), style: {
             transform: utilities_1.CSS.Transform.toString(transform),
-            transition
-        }, ...attributes, ...listeners, "data-dragging": isDragging, ...props, ref: (0, utils_1.cloneRef)(ref, setNodeRef), onTouchStart: disabled ? void 0 : onTouchStart }));
+            transition,
+            ...props.style
+        }, onTouchStart: disabled ? void 0 : onTouchStart, "data-dragging": isDragging }));
 });

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

@@ -1,36 +1,36 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Status = exports.StatusIcon = exports.statusMapToIcon = void 0;
+exports.Status = exports.StatusIcon = exports.statusMapToIconDefinition = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-const icons_1 = require("@ant-design/icons");
 const react_1 = require("react");
 const status_style_1 = require("./status.style");
 const utils_1 = require("../../utils");
-exports.statusMapToIcon = {
-    info: icons_1.InfoCircleFilled,
-    success: icons_1.CheckCircleFilled,
-    warning: icons_1.ExclamationCircleFilled,
-    error: icons_1.CloseCircleFilled,
-    confirm: icons_1.QuestionCircleFilled,
-    unknown: icons_1.QuestionCircleFilled
+const faCircleInfo_1 = require("@fortawesome/free-solid-svg-icons/faCircleInfo");
+const faCircleCheck_1 = require("@fortawesome/free-solid-svg-icons/faCircleCheck");
+const faCircleExclamation_1 = require("@fortawesome/free-solid-svg-icons/faCircleExclamation");
+const faCircleXmark_1 = require("@fortawesome/free-solid-svg-icons/faCircleXmark");
+const faCircleQuestion_1 = require("@fortawesome/free-solid-svg-icons/faCircleQuestion");
+const react_fontawesome_1 = require("@fortawesome/react-fontawesome");
+exports.statusMapToIconDefinition = {
+    info: faCircleInfo_1.faCircleInfo,
+    success: faCircleCheck_1.faCircleCheck,
+    warning: faCircleExclamation_1.faCircleExclamation,
+    error: faCircleXmark_1.faCircleXmark,
+    confirm: faCircleQuestion_1.faCircleQuestion,
+    unknown: faCircleQuestion_1.faCircleQuestion
 };
-exports.StatusIcon = (0, react_1.memo)(({ icon, status = 'unknown', ...props }) => {
-    const DefaultIcon = exports.statusMapToIcon[status];
+exports.StatusIcon = (0, react_1.memo)(({ status = 'unknown', ...props }) => {
     const statusColor = (0, utils_1.useStatusColor)(status);
     const iconProps = {
         ...props,
-        className: (0, utils_1.classnames)(status_style_1.classes.icon, props.className),
+        icon: props.icon || exports.statusMapToIconDefinition[status],
+        className: (0, utils_1.clsx)(status_style_1.classes.icon, props.className),
         style: (0, react_1.useMemo)(() => ({
             color: statusColor,
             ...props.style
         }), [statusColor, props.style])
     };
-    if (typeof icon !== 'undefined') {
-        return (0, react_1.isValidElement)(icon)
-            ? (0, react_1.cloneElement)(icon, iconProps)
-            : icon;
-    }
-    return (0, jsx_runtime_1.jsx)(DefaultIcon, { ...iconProps });
+    return (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { ...iconProps });
 });
 const defaultLabel = {
     unknown: '未知',
@@ -40,8 +40,8 @@ const defaultLabel = {
     warning: '警告',
     error: '错误'
 };
-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 })
+exports.Status = (0, react_1.memo)(({ status = 'unknown', variant = 'icon', label = defaultLabel[status], animation, iconProps, ...props }) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { ...props, css: status_style_1.style, className: (0, utils_1.clsx)(status_style_1.classes.root, props.className), "data-animation": animation, children: [variant === 'icon'
+                ? (0, jsx_runtime_1.jsx)(exports.StatusIcon, { ...iconProps, 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/stepper/step.js

@@ -5,9 +5,13 @@ const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
 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 theme_1 = require("../theme");
+const __1 = require("../..");
+const faCheck_1 = require("@fortawesome/free-solid-svg-icons/faCheck");
+const faCircleInfo_1 = require("@fortawesome/free-solid-svg-icons/faCircleInfo");
+const faXmark_1 = require("@fortawesome/free-solid-svg-icons/faXmark");
+const faMinus_1 = require("@fortawesome/free-solid-svg-icons/faMinus");
 exports.Step = (0, react_1.memo)(({ indicator, title, prefix, suffix, description, step = 0, 
 // 共享属性，从StepperSharedProps继承而来
 size, gap, color, variant, labelPlacement, clickable, status = 'waiting', ...props }) => {
@@ -15,14 +19,14 @@ size, gap, color, variant, labelPlacement, clickable, status = 'waiting', ...pro
     const context = (0, stepper_1.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 ((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
+    return ((0, jsx_runtime_1.jsxs)("div", { ...props, css: (0, step_style_1.useStyle)({ color, gap }), className: (0, utils_1.clsx)(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') {
@@ -33,13 +37,13 @@ size, gap, color, variant, labelPlacement, clickable, status = 'waiting', ...pro
                                 case 'processing':
                                     return step + 1;
                                 case 'finished':
-                                    return (0, jsx_runtime_1.jsx)(icons_1.CheckOutlined, {});
+                                    return (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faCheck_1.faCheck });
                                 case 'warning':
-                                    return (0, jsx_runtime_1.jsx)(icons_1.InfoOutlined, {});
+                                    return (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faCircleInfo_1.faCircleInfo });
                                 case 'error':
-                                    return (0, jsx_runtime_1.jsx)(icons_1.CloseOutlined, {});
+                                    return (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faXmark_1.faXmark });
                                 case 'skipped':
-                                    return (0, jsx_runtime_1.jsx)(icons_1.MinusOutlined, {});
+                                    return (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faMinus_1.faMinus });
                             }
                         })() }) }), (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

@@ -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/cjs/components/stepper/step.style.js

@@ -23,6 +23,7 @@ function useStyle({ color, gap }) {
             display: flex;
             align-items: flex-start;
             gap: ${spacing[4]}px;
+            -webkit-tap-highlight-color: transparent;
 
             .${exports.classes.indicator} {
                 min-width: 32px;
@@ -31,7 +32,7 @@ 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] {
@@ -68,7 +69,7 @@ function useStyle({ color, gap }) {
                 }
             }
 
-            &:last-of-type \.${exports.classes.title}:after {
+            &:last-of-type .${exports.classes.title}:after {
                 display: none;
             }
 
@@ -164,7 +165,7 @@ function useStyle({ color, gap }) {
                     }
                 }
 
-                \.${exports.classes.title}:after {
+                .${exports.classes.title}:after {
                     background-color: ${colorValue};
                 }
             }
@@ -200,7 +201,7 @@ 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)};
@@ -235,17 +236,17 @@ function useStyle({ color, gap }) {
                 }
 
                 &:last-of-type {
-                    \.${exports.classes.indicatorWrap}:after {
+                    .${exports.classes.indicatorWrap}:after {
                         display: none;
                     }
                 }
 
-                \.${exports.classes.title}:after {
+                .${exports.classes.title}:after {
                     display: none;
                 }
 
                 &[data-status=finished] {
-                    \.${exports.classes.indicatorWrap}:after {
+                    .${exports.classes.indicatorWrap}:after {
                         background-color: ${colorValue};
                     }
                 }
@@ -271,7 +272,7 @@ function useStyle({ color, gap }) {
                 }
 
                 &:last-of-type {
-                    \.${exports.classes.indicatorWrap}:after {
+                    .${exports.classes.indicatorWrap}:after {
                         display: none;
                     }
                 }
@@ -311,7 +312,7 @@ function useStyle({ color, gap }) {
                 }
 
                 &[data-status=finished] {
-                    \.${exports.classes.indicatorWrap}:after {
+                    .${exports.classes.indicatorWrap}:after {
                         background-color: ${colorValue};
                     }
                 }

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

@@ -50,7 +50,7 @@ size, gap = orientation === 'horizontal' ? 15 : 9, color, variant, clickable, la
             return c;
         });
     };
-    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: {
+    return ((0, jsx_runtime_1.jsx)("div", { ...props, css: stepper_style_1.style, className: (0, utils_1.clsx)(stepper_style_1.classes.root, props.className), "data-orientation": orientation, style: {
             gap,
             ...props.style
         }, children: (0, jsx_runtime_1.jsx)(StepperContext, { value: (0, react_1.useMemo)(() => ({

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

@@ -6,7 +6,7 @@ const react_1 = require("react");
 const switch_style_1 = require("./switch.style");
 const theme_1 = require("../theme");
 const utils_1 = require("../../utils");
-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 }) => {
+exports.Switch = (0, react_1.memo)(({ inputProps, 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
@@ -17,7 +17,7 @@ exports.Switch = (0, react_1.memo)(({ inputProps, inputRef, color = 'primary', s
     const renderThumbFn = () => {
         const _thumbProps = {
             ...thumbProps,
-            className: (0, utils_1.classnames)(switch_style_1.classes.thumb, thumbProps?.className),
+            className: (0, utils_1.clsx)(switch_style_1.classes.thumb, thumbProps?.className),
             style: {
                 width: thumbSize,
                 left: innerChecked.current
@@ -37,7 +37,7 @@ exports.Switch = (0, react_1.memo)(({ inputProps, inputRef, color = 'primary', s
     const renderTrackFn = () => {
         const _trackProps = {
             ...trackProps,
-            className: (0, utils_1.classnames)(switch_style_1.classes.track, trackProps?.className),
+            className: (0, utils_1.clsx)(switch_style_1.classes.track, trackProps?.className),
             style: {
                 height: trackSize,
                 ...trackProps?.style
@@ -76,5 +76,5 @@ exports.Switch = (0, react_1.memo)(({ inputProps, inputRef, color = 'primary', s
         inputProps?.onKeyDown?.(e);
         e.key === 'Enter' && toggleChecked();
     };
-    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 })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { ...props, css: (0, switch_style_1.useStyle)({ color: color || 'primary' }), className: (0, utils_1.clsx)(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, className: (0, utils_1.clsx)(switch_style_1.classes.input, inputProps?.className), onChange: e => inputProps?.onChange?.(e), onKeyDown: inputKeyDownHandler })] }));
 });

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

@@ -41,12 +41,12 @@ 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) {
                 .${exports.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;
                 }
             }
@@ -60,7 +60,7 @@ 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]) {
@@ -99,7 +99,7 @@ function useStyle({ color }) {
                 height: 100%;
                 align-self: flex-start;
                 white-space: nowrap;
-                transition: all .2s ${easing.bounce};
+                transition: all .25s ${easing.bounce};
                 
                 .${exports.classes.checkedLabel},
                 .${exports.classes.uncheckedLabel} {

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

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

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

@@ -2,3 +2,4 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./table"), exports);
+tslib_1.__exportStar(require("./tableSticky"), exports);

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

@@ -1,10 +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/cjs/components/table/table.js

@@ -1,12 +1,20 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Table = Table;
+exports.TableRow = TableRow;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const table_style_1 = require("./table.style");
 const utils_1 = require("../../utils");
 const theme_1 = require("../theme");
-function Table({ size, bordered = false, striped = false, ...props }) {
+const tableSticky_1 = require("./tableSticky");
+function Table({ size, bordered = 'none', striped = false, ...props }) {
     const theme = (0, theme_1.useTheme)();
     size ??= theme.size;
-    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 }));
+    return ((0, jsx_runtime_1.jsx)("table", { ...props, css: table_style_1.style, className: (0, utils_1.clsx)(table_style_1.classes.root, props.className), "data-size": size, "data-bordered": bordered, "data-striped": striped }));
 }
+function TableRow({ selected, ...props }) {
+    return (0, jsx_runtime_1.jsx)("tr", { ...props, "data-selected": selected });
+}
+Table.tr = TableRow;
+Table.th = tableSticky_1.ThCell;
+Table.td = tableSticky_1.TdCell;

package/dist/cjs/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;