@canlooks/can-ui 0.0.24 → 0.0.26

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

@@ -33,7 +33,7 @@ function useStyle({ color, variant }) {
                     &:before, .${exports.classes.bar} {
                         background-color: ${colorValue};
                         border-radius: inherit;
-                        transition: width .2s ${easing.easeOut};
+                        transition: width .25s ${easing.easeOut};
                         position: absolute;
                         inset: 0 auto 0 0;
                     }
@@ -48,11 +48,11 @@ function useStyle({ color, variant }) {
                         background-color: ${indeterminateBg};
                         
                         &:before {
-                            animation: ${indeterminateAnim2} 2.2s ${easing.linear} infinite 1.1s;
+                            animation: ${indeterminateAnim2} 2.25s ${easing.linear} infinite 1.1s;
                         }
                         
                         .${exports.classes.bar} {
-                            animation: ${indeterminateAnim1} 2.2s ${easing.linear} infinite;
+                            animation: ${indeterminateAnim1} 2.25s ${easing.linear} infinite;
                         }
                     }
                 }
@@ -61,7 +61,7 @@ function useStyle({ color, variant }) {
                     line-height: 1;
 
                     .${exports.classes.icon} {
-                        animation: ${iconAnim} .2s ${easing.swing}
+                        animation: ${iconAnim} .25s ${easing.swing}
                     }
                 }
 
@@ -107,7 +107,7 @@ function useStyle({ color, variant }) {
                 .${exports.classes.bar} {
                     stroke: ${colorValue};
                     fill: transparent;
-                    transition: stroke-dashoffset .2s ${easing.easeOut};
+                    transition: stroke-dashoffset .25s ${easing.easeOut};
                 }
 
                 &[data-success=true] {
@@ -130,7 +130,7 @@ function useStyle({ color, variant }) {
                     inset: 0;
 
                     .${exports.classes.icon} {
-                        animation: ${iconAnim} .2s ${easing.swing}
+                        animation: ${iconAnim} .25s ${easing.swing}
                     }
                 }
 

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

@@ -1,11 +1,11 @@
 import { ReactNode } from 'react';
-import { ColorPropsValue, DIVProps, Size } from '../../types';
+import { ColorPropsValue, DivProps, Size } from '../../types';
 export type CharacterProps = {
     index: number;
     active?: true;
     half?: boolean;
 };
-export interface RatingProps extends Omit<DIVProps, 'defaultValue' | 'onChange'> {
+export interface RatingProps extends Omit<DivProps, 'defaultValue' | 'onChange'> {
     color?: ColorPropsValue;
     size?: Size;
     /** 星星的数量，默认为`5` */

package/dist/cjs/components/rating/rating.js

@@ -5,9 +5,10 @@ const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
 const utils_1 = require("../../utils");
 const rating_style_1 = require("./rating.style");
-const icons_1 = require("@ant-design/icons");
 const theme_1 = require("../theme");
-exports.Rating = (0, react_1.memo)(({ color = '#FFCC00', size, count = 5, renderStar = (0, jsx_runtime_1.jsx)(icons_1.StarFilled, {}), allowHalf, highlightSelectedOnly, defaultValue = 0, value, onChange, readOnly, disabled, ...props }) => {
+const __1 = require("../..");
+const faStar_1 = require("@fortawesome/free-solid-svg-icons/faStar");
+exports.Rating = (0, react_1.memo)(({ color = '#FFCC00', size, count = 5, renderStar = (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faStar_1.faStar }), allowHalf, highlightSelectedOnly, defaultValue = 0, value, onChange, readOnly, disabled, ...props }) => {
     const theme = (0, theme_1.useTheme)();
     size ??= theme.size;
     const [innerValue, setInnerValue] = (0, utils_1.useControlled)(defaultValue, value, onChange);
@@ -59,5 +60,5 @@ exports.Rating = (0, react_1.memo)(({ color = '#FFCC00', size, count = 5, render
                             : renderStar), (0, jsx_runtime_1.jsx)("div", { className: rating_style_1.classes.starBefore, onPointerEnter: () => enterHandler(index, true), onClick: () => clickHandler(index, true) }), (0, jsx_runtime_1.jsx)("div", { className: rating_style_1.classes.starAfter, onPointerEnter: () => enterHandler(index, false), onClick: () => clickHandler(index, false) })] }, index));
         });
     };
-    return ((0, jsx_runtime_1.jsx)("div", { ...props, css: (0, rating_style_1.useStyle)({ color }), className: (0, utils_1.classnames)(rating_style_1.classes.root, props.className), "data-size": size, "data-read-only": readOnly, "data-disabled": disabled, onPointerLeave: leaveHandler, children: renderStarFn() }));
+    return ((0, jsx_runtime_1.jsx)("div", { ...props, css: (0, rating_style_1.useStyle)({ color: color || '#FFCC00' }), className: (0, utils_1.clsx)(rating_style_1.classes.root, props.className), "data-size": size, "data-read-only": readOnly, "data-disabled": disabled, onPointerLeave: leaveHandler, children: renderStarFn() }));
 });

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

@@ -20,6 +20,7 @@ function useStyle({ color }) {
             color: ${mode === 'light' ? gray(.14) : '#000000'};
             display: flex;
             position: relative;
+            -webkit-tap-highlight-color: transparent;
 
             [data-active=true] {
                 position: absolute;
@@ -63,7 +64,7 @@ function useStyle({ color }) {
         &:not([data-read-only=true]) {
             .${exports.classes.star} {
                 cursor: pointer;
-                transition: transform .2s ${easing.easeOut};
+                transition: transform .25s ${easing.easeOut};
     
                 &:hover {
                     transform: scale(1.2);

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

@@ -1,9 +1,11 @@
-import { CSSProperties } from 'react';
-import { ColorPropsValue, DIVProps, Placement } from '../../types';
+import { CSSProperties, ElementType } from 'react';
+import { ColorPropsValue, DivProps, OverridableComponent, OverridableProps, Placement, SlotsAndProps } from '../../types';
 import { DraggableOptions } from '../../utils';
 type HandleAbbr = 't' | 'r' | 'b' | 'l' | 'tl' | 'tr' | 'br' | 'bl' | 'lt' | 'rt' | 'lb' | 'rb';
 export type Handle = Placement | HandleAbbr;
-export interface ResizableProps extends Omit<DIVProps, 'onResize'> {
+export interface ResizableOwnProps extends SlotsAndProps<{
+    container: DivProps;
+}> {
     /** 默认为`mouse` */
     variant?: 'mouse' | 'touch';
     /** 使用的拖拽把手，默认全部生效。注意：使用“角把手”会同时渲染对应的两个“边把手”。 */
@@ -34,5 +36,6 @@ export interface ResizableProps extends Omit<DIVProps, 'onResize'> {
     maxWidth?: CSSProperties['maxWidth'];
     maxHeight?: CSSProperties['maxHeight'];
 }
-export declare function Resizable({ ref, variant, handles, handleSize, handleColor, handlePosition, fixedRatio, onResize, onResizeEnd, draggableOptions, defaultWidth, defaultHeight, width, height, minWidth, minHeight, maxWidth, maxHeight, ...props }: ResizableProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export type ResizableProps<C extends ElementType = 'div'> = OverridableProps<ResizableOwnProps, C>;
+export declare const Resizable: OverridableComponent<ResizableOwnProps>;
 export {};

package/dist/cjs/components/resizable/resizable.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Resizable = Resizable;
+exports.Resizable = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
 const utils_1 = require("../../utils");
@@ -31,7 +31,7 @@ const handleAlias = {
     bottomRight: 'br',
     rightBottom: 'br'
 };
-function Resizable({ ref, variant = 'mouse', handles = ['t', 'r', 'b', 'l', 'tl', 'tr', 'br', 'bl'], handleSize = variant === 'mouse' ? 8 : 12, handleColor = 'secondary', handlePosition = 'outside', fixedRatio, onResize, onResizeEnd, draggableOptions, defaultWidth, defaultHeight, width, height, minWidth, minHeight, maxWidth, maxHeight, ...props }) {
+exports.Resizable = (({ component: Component = 'div', slots = {}, slotProps = {}, variant = 'mouse', handles = ['t', 'r', 'b', 'l', 'tl', 'tr', 'br', 'bl'], handleSize = variant === 'mouse' ? 8 : 12, handleColor = 'secondary', handlePosition = 'outside', fixedRatio, onResize, onResizeEnd, draggableOptions, defaultWidth, defaultHeight, width, height, minWidth, minHeight, maxWidth, maxHeight, ...props }) => {
     const abbrHandles = (0, react_1.useMemo)(() => {
         return [...(0, utils_1.toArray)(handles).map(h => handleAlias[h])];
     }, [handles]);
@@ -80,11 +80,13 @@ function Resizable({ ref, variant = 'mouse', handles = ['t', 'r', 'b', 'l', 'tl'
             syncProps.current?.onResizeEnd?.(innerRef.current.offsetWidth, innerRef.current.offsetHeight);
         }
     });
-    return ((0, jsx_runtime_1.jsxs)("div", { ...props, ref: (0, utils_1.cloneRef)(ref, innerRef), css: (0, resizable_style_1.useStyle)({ variant, handleSize, handleColor }), className: (0, utils_1.classnames)(resizable_style_1.classes.root, props.className), "data-dragging": !!dragStartState, "data-handle-position": handlePosition, style: {
+    const { container: Container = 'div' } = slots;
+    const { container: containerProps } = slotProps;
+    return ((0, jsx_runtime_1.jsxs)(Component, { ...props, ref: (0, utils_1.cloneRef)(innerRef, props.ref), css: (0, resizable_style_1.useStyle)({ variant, handleSize, handleColor: handleColor || 'secondary' }), className: (0, utils_1.clsx)(resizable_style_1.classes.root, props.className), "data-dragging": !!dragStartState, "data-handle-position": handlePosition, style: {
             ...props.style,
             minWidth,
             minHeight,
             ...typeof innerWidth.current === 'number' && { width: innerWidth.current },
             ...typeof innerHeight.current === 'number' && { height: innerHeight.current }
-        }, children: [(0, jsx_runtime_1.jsx)("div", { className: resizable_style_1.classes.container, children: props.children }), abbrHandles.map(h => (0, jsx_runtime_1.jsx)("div", { className: h.length === 1 ? resizable_style_1.classes.edge : resizable_style_1.classes.corner, "data-handle": h, "data-dragging": dragStartState?.handleType === h, ...draggableHandle }, h))] }));
-}
+        }, children: [(0, jsx_runtime_1.jsx)(Container, { ...containerProps, className: (0, utils_1.clsx)(resizable_style_1.classes.container, containerProps?.className), children: props.children }), abbrHandles.map(h => (0, jsx_runtime_1.jsx)("div", { className: h.length === 1 ? resizable_style_1.classes.edge : resizable_style_1.classes.corner, "data-handle": h, "data-dragging": dragStartState?.handleType === h, ...draggableHandle }, h))] }));
+});

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

@@ -1,8 +1,8 @@
 import { Handle, ResizableProps } from './resizable';
 export declare const classes: {
     container: string;
-    edge: string;
     corner: string;
+    edge: string;
 } & {
     root: string;
 };

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

@@ -38,6 +38,7 @@ function useStyle({ variant, handleSize, handleColor }) {
                 .${exports.classes.edge}, .${exports.classes.corner} {
                     touch-action: none;
                     position: absolute;
+                    -webkit-tap-highlight-color: transparent;
                 }
 
                 .${exports.classes.edge} {

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

@@ -0,0 +1 @@
+export * from './scrollbar';

package/dist/cjs/components/{anchor → scrollbar}/index.js

@@ -1,4 +1,4 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-tslib_1.__exportStar(require("./anchor"), exports);
+tslib_1.__exportStar(require("./scrollbar"), exports);

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

@@ -0,0 +1,21 @@
+import { DivProps, OverridableComponent, OverridableProps, SlotsAndProps } from '../../types';
+import { ElementType, Ref } from 'react';
+export interface ScrollbarOwnProps extends SlotsAndProps<{
+    scroller: DivProps;
+    scrollerWrapper: DivProps;
+}> {
+    /**
+     * 默认为`contain`
+     * @enum `contain` 滚动条会挤压内容区域
+     * @enum `cover` 滚动条会覆盖在内容上
+     */
+    variant?: 'contain' | 'cover';
+    /** 是否自动隐藏滚动条，默认为`true` */
+    autoHide?: boolean;
+    /** 默认为`1em` */
+    size?: number | string;
+    /** 默认的`ref`属性传递至`scroller`元素，外层元素的`ref`需要指定`wrapperRef` */
+    wrapperRef?: Ref<HTMLDivElement>;
+}
+export type ScrollbarProps<C extends ElementType = 'div'> = OverridableProps<ScrollbarOwnProps, C>;
+export declare const Scrollbar: OverridableComponent<ScrollbarOwnProps>;

package/dist/cjs/components/scrollbar/scrollbar.js

@@ -0,0 +1,125 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Scrollbar = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const utils_1 = require("../../utils");
+const scrollbar_style_1 = require("./scrollbar.style");
+exports.Scrollbar = (({ component: Component = 'div', variant = 'contain', autoHide = true, size = '.8em', wrapperRef, onScroll, slots = {}, slotProps = {}, ...props }) => {
+    const containerRef = (0, react_1.useRef)(null);
+    const scrollerRef = (0, react_1.useRef)(null);
+    const scrollerWrapperRef = (0, react_1.useRef)(null);
+    if (typeof size === 'number') {
+        size = size + 'px';
+    }
+    const trackXRef = (0, react_1.useRef)(null);
+    const trackYRef = (0, react_1.useRef)(null);
+    const thumbXRef = (0, react_1.useRef)(null);
+    const thumbYRef = (0, react_1.useRef)(null);
+    const verticalInfo = (0, react_1.useRef)({
+        thumbScrollLength: 0,
+        scrollRatio: 1
+    });
+    const horizontalInfo = (0, react_1.useRef)({
+        thumbScrollLength: 0,
+        scrollRatio: 1
+    });
+    (0, react_1.useEffect)(() => {
+        const container = containerRef.current;
+        const scroller = scrollerRef.current;
+        const scrollerWrapper = scrollerWrapperRef.current;
+        if (!container || !scroller || !scrollerWrapper) {
+            return;
+        }
+        const resizeObserver = new ResizeObserver(() => {
+            container.dataset.verticalScrollable = container.dataset.horizontalScrollable = 'true';
+            const { scrollHeight, clientHeight, scrollWidth, clientWidth } = scroller;
+            if (scrollHeight > clientHeight) {
+                const { offsetHeight } = trackYRef.current;
+                thumbYRef.current.style.height = offsetHeight * (clientHeight / scrollHeight) + 'px';
+                const contentScrollLength = scrollHeight - clientHeight;
+                const thumbScrollLength = verticalInfo.current.thumbScrollLength = offsetHeight - thumbYRef.current.offsetHeight;
+                verticalInfo.current.scrollRatio = thumbScrollLength / contentScrollLength;
+            }
+            else {
+                container.dataset.verticalScrollable = 'false';
+            }
+            if (scrollWidth > clientWidth) {
+                const { offsetWidth } = trackXRef.current;
+                thumbXRef.current.style.width = offsetWidth * (clientWidth / scrollWidth) + 'px';
+                const contentScrollLength = scrollWidth - clientWidth;
+                const thumbScrollLength = horizontalInfo.current.thumbScrollLength = offsetWidth - thumbXRef.current.offsetWidth;
+                horizontalInfo.current.scrollRatio = thumbScrollLength / contentScrollLength;
+            }
+            else {
+                container.dataset.horizontalScrollable = 'false';
+            }
+        });
+        resizeObserver.observe(scroller);
+        resizeObserver.observe(scrollerWrapper);
+        return () => {
+            resizeObserver.disconnect();
+        };
+    }, []);
+    const scrollHandler = (e) => {
+        onScroll?.(e);
+        scrollerProps?.onScroll?.(e);
+        const { scrollTop, scrollLeft } = scrollerRef.current;
+        thumbYRef.current.style.top = scrollTop * verticalInfo.current.scrollRatio + 'px';
+        thumbXRef.current.style.left = scrollLeft * horizontalInfo.current.scrollRatio + 'px';
+    };
+    const updateScrollTop = (top) => {
+        top = Math.max(Math.min(top, verticalInfo.current.thumbScrollLength), 0);
+        thumbYRef.current.style.top = top + 'px';
+        scrollerRef.current.scrollTop = top / verticalInfo.current.scrollRatio;
+    };
+    const draggableHandleY = (0, utils_1.useDraggableHandle)({
+        onDragStart(e) {
+            e.stopPropagation();
+            containerRef.current.dataset.dragging = thumbYRef.current.dataset.dragging = 'true';
+            if (e.target === trackYRef.current) {
+                updateScrollTop(e.clientY - trackYRef.current.getBoundingClientRect().top - thumbYRef.current.offsetHeight / 2);
+            }
+            return parseInt(thumbYRef.current.style.top || '0');
+        },
+        onDrag({ deltaY, startData }) {
+            updateScrollTop(startData + deltaY);
+        },
+        onDragEnd() {
+            containerRef.current.dataset.dragging = thumbYRef.current.dataset.dragging = 'false';
+        }
+    });
+    const updateScrollLeft = (left) => {
+        left = Math.max(Math.min(left, horizontalInfo.current.thumbScrollLength), 0);
+        thumbXRef.current.style.left = left + 'px';
+        scrollerRef.current.scrollLeft = left / horizontalInfo.current.scrollRatio;
+    };
+    const draggableHandleX = (0, utils_1.useDraggableHandle)({
+        onDragStart(e) {
+            containerRef.current.dataset.dragging = thumbXRef.current.dataset.dragging = 'true';
+            e.stopPropagation();
+            if (e.target === trackXRef.current) {
+                updateScrollLeft(e.clientX - trackXRef.current.getBoundingClientRect().left - thumbXRef.current.offsetWidth / 2);
+            }
+            return parseInt(thumbXRef.current.style.left || '0');
+        },
+        onDrag({ deltaX, startData }) {
+            updateScrollLeft(startData + deltaX);
+        },
+        onDragEnd() {
+            containerRef.current.dataset.dragging = thumbXRef.current.dataset.dragging = 'false';
+        }
+    });
+    const { scroller: Scroller = 'div', scrollerWrapper: ScrollerWrapper = 'div', } = slots;
+    const { scroller: scrollerProps, scrollerWrapper: scrollerWrapperProps } = slotProps;
+    return ((0, jsx_runtime_1.jsxs)(Component, { ...props, ref: (0, utils_1.cloneRef)(containerRef, wrapperRef), css: (0, scrollbar_style_1.useStyle)({ size }), className: (0, utils_1.clsx)(scrollbar_style_1.classes.root, props.className), "data-variant": variant, "data-autohide": autoHide, ...variant === 'cover' && autoHide && {
+            onPointerEnter: e => {
+                e.currentTarget.dataset.hover = 'true';
+                props.onPointerEnter?.(e);
+            },
+            onPointerLeave: e => {
+                e.currentTarget.dataset.hover = 'false';
+                props.onPointerLeave?.(e);
+            }
+        }, children: [(0, jsx_runtime_1.jsx)(Scroller, { ...scrollerProps, ref: (0, utils_1.cloneRef)(scrollerRef, props.ref, scrollerProps?.ref), className: (0, utils_1.clsx)(scrollbar_style_1.classes.scroller, scrollerProps?.className), onScroll: scrollHandler, children: (0, jsx_runtime_1.jsx)(ScrollerWrapper, { ...scrollerWrapperProps, ref: (0, utils_1.cloneRef)(scrollerWrapperRef, scrollerWrapperProps?.ref), className: (0, utils_1.clsx)(scrollbar_style_1.classes.scrollerWrapper, scrollerWrapperProps?.className), children: props.children }) }), (0, jsx_runtime_1.jsx)("div", { ref: trackYRef, className: scrollbar_style_1.classes.trackY, ...draggableHandleY, children: (0, jsx_runtime_1.jsx)("div", { ref: thumbYRef, className: scrollbar_style_1.classes.thumb, ...draggableHandleY, children: (0, jsx_runtime_1.jsx)("div", { className: scrollbar_style_1.classes.block }) }) }), (0, jsx_runtime_1.jsx)("div", { ref: trackXRef, className: scrollbar_style_1.classes.trackX, ...draggableHandleX, children: (0, jsx_runtime_1.jsx)("div", { ref: thumbXRef, className: scrollbar_style_1.classes.thumb, ...draggableHandleX, children: (0, jsx_runtime_1.jsx)("div", { className: scrollbar_style_1.classes.block }) }) })] }));
+});

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

@@ -0,0 +1,15 @@
+export declare const classes: {
+    track: string;
+    block: string;
+    corner: string;
+    scroller: string;
+    scrollerWrapper: string;
+    trackX: string;
+    trackY: string;
+    thumb: string;
+} & {
+    root: string;
+};
+export declare function useStyle({ size }: {
+    size: string;
+}): import("@emotion/react").SerializedStyles;

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

@@ -0,0 +1,124 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.classes = void 0;
+exports.useStyle = useStyle;
+const tslib_1 = require("tslib");
+const utils_1 = require("../../utils");
+const react_1 = require("@emotion/react");
+const color_1 = tslib_1.__importDefault(require("color"));
+exports.classes = (0, utils_1.defineClasses)('scrollbar', [
+    'scroller',
+    'scrollerWrapper',
+    'track',
+    'trackX',
+    'trackY',
+    'thumb',
+    'block',
+    'corner'
+]);
+function useStyle({ size }) {
+    return (0, utils_1.useCss)(({ text, easing }) => {
+        const blockColor = (0, color_1.default)(text.primary);
+        return (0, react_1.css) `
+            position: relative;
+
+            .${exports.classes.scroller} {
+                height: 100%;
+                flex: 1;
+                position: relative;
+                z-index: 0;
+                overflow: auto;
+                scrollbar-width: none;
+                -ms-overflow-style: none;
+
+                &::-webkit-scrollbar {
+                    display: none;
+                }
+            }
+
+            &[data-variant=contain] {
+                &[data-vertical-scrollable=true] {
+                    padding-right: ${size};
+                }
+
+                &[data-horizontal-scrollable=true] {
+                    padding-bottom: ${size};
+                }
+            }
+
+            .${exports.classes.trackX},
+            .${exports.classes.trackY},
+            .${exports.classes.thumb},
+            .${exports.classes.corner} {
+                position: absolute;
+                touch-action: none;
+            }
+
+            .${exports.classes.thumb} {
+                min-width: ${size};
+                min-height: ${size};
+
+                .${exports.classes.block} {
+                    border-radius: calc(${size} * .5);
+                    position: absolute;
+                    inset: 2px;
+                    background: ${blockColor.alpha(.3).string()};
+
+                    &:hover {
+                        background: ${blockColor.alpha(.4).string()};
+                    }
+                }
+
+                &[data-dragging=true] .${exports.classes.block} {
+                    background: ${blockColor.alpha(.6).string()};
+                }
+            }
+
+            .${exports.classes.trackX} {
+                height: ${size};
+                left: 0;
+                bottom: 0;
+                right: ${size};
+                display: none;
+            }
+
+            .${exports.classes.trackY} {
+                width: ${size};
+                right: 0;
+                top: 0;
+                bottom: ${size};
+                display: none;
+            }
+
+            &[data-vertical-scrollable=true] {
+                .${exports.classes.trackY} {
+                    display: block;
+                }
+            }
+
+            &[data-horizontal-scrollable=true] {
+                .${exports.classes.trackX} {
+                    display: block;
+                }
+            }
+
+            &[data-autohide=true][data-variant=cover] {
+                .${exports.classes.trackX},
+                .${exports.classes.trackY},
+                .${exports.classes.corner} {
+                    opacity: 0;
+                    transition: opacity .5s ${easing.easeIn};
+                }
+
+                &[data-hover=true], &[data-dragging=true] {
+                    .${exports.classes.trackX},
+                    .${exports.classes.trackY},
+                    .${exports.classes.corner} {
+                        opacity: 1;
+                        transition: opacity 0s;
+                    }
+                }
+            }
+        `;
+    }, [size]);
+}

package/dist/cjs/components/segmented/SegmentedOption.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
-import { DIVProps, Id } from '../../types';
-export interface SegmentedOptionProps extends Omit<DIVProps, 'prefix'> {
+import { DivProps, Id } from '../../types';
+export interface SegmentedOptionProps extends Omit<DivProps, 'prefix'> {
     orientation?: 'horizontal' | 'vertical';
     prefix?: ReactNode;
     suffix?: ReactNode;

package/dist/cjs/components/segmented/SegmentedOption.js

@@ -6,7 +6,7 @@ const react_1 = require("react");
 const utils_1 = require("../../utils");
 const segmented_style_1 = require("./segmented.style");
 exports.SegmentedOption = (0, react_1.memo)(({ orientation, prefix, suffix, value, label, disabled, ...props }) => {
-    return ((0, jsx_runtime_1.jsxs)("div", { ...props, className: (0, utils_1.classnames)(segmented_style_1.classes.option, props.className), "data-orientation": orientation, "data-disabled": disabled, onClick: e => {
+    return ((0, jsx_runtime_1.jsxs)("div", { ...props, className: (0, utils_1.clsx)(segmented_style_1.classes.option, props.className), "data-orientation": orientation, "data-disabled": disabled, onClick: e => {
             !disabled && props.onClick?.(e);
         }, children: [!!prefix &&
                 (0, jsx_runtime_1.jsx)("div", { className: segmented_style_1.classes.prefix, children: prefix }), (0, jsx_runtime_1.jsx)("div", { className: segmented_style_1.classes.label, children: label }), !!suffix &&

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

@@ -1,8 +1,8 @@
 import { ReactElement } from 'react';
-import { DIVProps, Id, Obj, Size } from '../../types';
+import { DivProps, Id, Obj, Size } from '../../types';
 import { SegmentedOption, SegmentedOptionProps } from './SegmentedOption';
 export type ISegmentedOption = SegmentedOptionProps & Obj;
-export interface SegmentedProps<O extends ISegmentedOption, V extends Id = Id> extends Omit<DIVProps, 'defaultValue' | 'onChange'> {
+export interface SegmentedProps<O extends ISegmentedOption, V extends Id = Id> extends Omit<DivProps, 'defaultValue' | 'onChange'> {
     options?: O[];
     orientation?: 'horizontal' | 'vertical';
     size?: Size;

package/dist/cjs/components/segmented/segmented.js

@@ -50,10 +50,9 @@ exports.Segmented = (0, react_1.memo)(({ options, orientation = 'horizontal', si
                 const v = p[primaryKey];
                 const active = !(0, utils_1.isUnset)(v) && v === innerValue.current;
                 return ((0, jsx_runtime_1.jsx)(SegmentedOption_1.SegmentedOption, { orientation: p.orientation, prefix: p.prefix, suffix: p.suffix, disabled: p.disabled, ref: r => {
-                        optionRefs.current.set(v, r);
-                        return () => {
-                            optionRefs.current.delete(v);
-                        };
+                        r
+                            ? optionRefs.current.set(v, r)
+                            : optionRefs.current.delete(v);
                     }, value: v, label: p[labelKey], onClick: e => {
                         p.onClick?.(e);
                         setInnerValue(v);
@@ -78,6 +77,6 @@ exports.Segmented = (0, react_1.memo)(({ options, orientation = 'horizontal', si
             return c;
         });
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { ...props, css: segmented_style_1.style, className: (0, utils_1.classnames)(segmented_style_1.classes.root, props.className), "data-full-width": fullWidth, "data-animating": animating, "data-orientation": orientation, "data-size": size, "data-read-only": readOnly, "data-disabled": disabled, children: [(0, jsx_runtime_1.jsx)("div", { className: segmented_style_1.classes.indicator, onTransitionEnd: () => setAnimating(false), style: indicatorRect.current }), renderOptions()] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { ...props, css: segmented_style_1.style, className: (0, utils_1.clsx)(segmented_style_1.classes.root, props.className), "data-full-width": fullWidth, "data-animating": animating, "data-orientation": orientation, "data-size": size, "data-read-only": readOnly, "data-disabled": disabled, children: [(0, jsx_runtime_1.jsx)("div", { className: segmented_style_1.classes.indicator, onTransitionEnd: () => setAnimating(false), style: indicatorRect.current }), renderOptions()] }));
 });
 exports.Segmented.Option = SegmentedOption_1.SegmentedOption;

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

@@ -1,8 +1,8 @@
 export declare const classes: {
     label: string;
     option: string;
-    prefix: string;
     indicator: string;
+    prefix: string;
     suffix: string;
 } & {
     root: string;

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

@@ -35,6 +35,7 @@ exports.style = (0, utils_1.defineCss)(({ mode, background, borderRadius, easing
             overflow: hidden;
             z-index: 1;
             transition: background-color .3s ${easing.easeOut};
+            -webkit-tap-highlight-color: transparent;
 
             &[data-active=true] {
                 transition: background-color 0s;
@@ -102,7 +103,7 @@ exports.style = (0, utils_1.defineCss)(({ mode, background, borderRadius, easing
         }
 
         &:not([data-read-only=true]):not([data-disabled=true]) {
-            \.${exports.classes.option}:not([data-disabled=true]) {
+            .${exports.classes.option}:not([data-disabled=true]) {
                 cursor: pointer;
                 
                 &:not([data-active=true]):hover {

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

@@ -1,4 +1,4 @@
-import React, { ReactElement, ReactNode, Ref } from 'react';
+import { ReactElement, ReactNode, Ref, JSX } from 'react';
 import { InputBaseProps } from '../inputBase';
 import { PopperProps, PopperRef } from '../popper';
 import { MenuItem } from '../menuItem';
@@ -7,8 +7,7 @@ import { InputProps } from '../input';
 import { Id, SelectableMultipleProps, SelectableSingleProps } from '../../types';
 export interface SelectBaseProps<O extends MenuOptionType> extends OptionsBaseSharedProps<O>, Omit<InputBaseProps<'input'>, 'children' | 'defaultValue' | 'value' | 'onChange'> {
     /** <select />内部由<input />实现 */
-    inputProps?: React.JSX.IntrinsicElements['input'];
-    inputRef?: Ref<HTMLInputElement>;
+    inputProps?: JSX.IntrinsicElements['input'];
     popperProps?: PopperProps;
     popperRef?: Ref<PopperRef>;
     defaultOpen?: boolean;
@@ -33,4 +32,4 @@ export declare const Select: {
     <O extends MenuOptionType, V extends Id = Id>(props: SelectProps<O, V>): ReactElement;
     Option: typeof MenuItem;
 };
-export declare const Option: React.MemoExoticComponent<({ value, size, color, emphasized, selected, focused, disabled, showCheckbox, checkboxProps, ellipsis, prefix, label, suffix, searchToken, _level, indent, expandIcon, defaultExpanded, expanded, onExpandedChange, ...props }: import("../menuItem").MenuItemProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
+export declare const Option: import("react").MemoExoticComponent<({ value, size, color, emphasized, selected, focused, disabled, showCheckbox, checkboxProps, ellipsis, prefix, label, suffix, searchToken, _level, indent, expandIcon, defaultExpanded, expanded, onExpandedChange, ...props }: import("../menuItem").MenuItemProps) => import("@emotion/react/jsx-runtime").JSX.Element>;