deepsea-components 5.10.3 → 5.10.5

package/dist/esm/components/InfiniteScroll.js.map

@@ -1 +1 @@
-{"version":3,"names":["forwardRef","useEffect","useImperativeHandle","useRef","css","useSize","clsx","jsx","_jsx","jsxs","_jsxs","InfiniteScroll","props","ref","className","direction","children","containerClassName","containerStyle","gap","duration","withGap","withEqual","pauseOnHover","onMouseEnter","onMouseLeave","rest","wrapper","wrapperSize","ele","current","container","containerSize","bigger","overflow","height","width","animation","undefined","animate","transform","iterations","Infinity","cancel","enter","e","pause","leave","play","playState","style","position"],"sources":["../../../src/components/InfiniteScroll.tsx"],"sourcesContent":["\"use client\"\n\nimport { CSSProperties, ComponentPropsWithoutRef, MouseEvent as ReactMouseEvent, forwardRef, useEffect, useImperativeHandle, useRef } from \"react\"\nimport { css } from \"@emotion/css\"\nimport { useSize } from \"ahooks\"\nimport { clsx } from \"deepsea-tools\"\n\nexport type InfiniteScrollProps = ComponentPropsWithoutRef<\"div\"> & {\n    /**\n     * 滚动的方向\n     * @default \"vertical\"\n     */\n    direction?: \"vertical\" | \"horizontal\"\n    /** 渲染 children 的容器的类名 */\n    containerClassName?: string\n    /** 渲染 children 的容器的样式 */\n    containerStyle?: CSSProperties\n    /**\n     * 两个 children 容器之间的间距\n     * @default 0\n     */\n    gap?: number\n    /** 一个周期的时间，单位：毫秒 */\n    duration: number\n    /** 是否将 gap 的距离也加入 overflow 的计算 */\n    withGap?: boolean\n    /** 尺寸刚好相同时，是否视为溢出 */\n    withEqual?: boolean\n    /** 鼠标移入时，是否停止动画 */\n    pauseOnHover?: boolean\n}\n\n/**\n * 无限滚动的组件\n * 子元素会内置的容器中被渲染两次，首尾相连，形成无限滚动的效果\n * 但是，如果内部检测到并没有溢出，那么不会渲染两次，并且没有动画\n */\nexport const InfiniteScroll = forwardRef<HTMLDivElement, InfiniteScrollProps>((props, ref) => {\n    const {\n        className,\n        direction = \"vertical\",\n        children,\n        containerClassName,\n        containerStyle,\n        gap = 0,\n        duration,\n        withGap,\n        withEqual,\n        pauseOnHover,\n        onMouseEnter,\n        onMouseLeave,\n        ...rest\n    } = props\n\n    const wrapper = useRef<HTMLDivElement>(null)\n    const wrapperSize = useSize(wrapper)\n\n    const ele = useRef<HTMLDivElement>(null)\n\n    useImperativeHandle(ref, () => wrapper.current as HTMLDivElement, [wrapper.current])\n\n    const container = useRef<HTMLDivElement>(null)\n    const containerSize = useSize(container)\n\n    function bigger(containerSize: number, wrapperSize: number) {\n        return withEqual ? containerSize + (withGap ? gap : 0) >= wrapperSize : containerSize + (withGap ? gap : 0) > wrapperSize\n    }\n\n    const overflow =\n        wrapperSize && containerSize\n            ? direction === \"vertical\"\n                ? bigger(containerSize.height, wrapperSize.height)\n                : bigger(containerSize.width, wrapperSize.width)\n            : false\n\n    const animation = useRef<Animation | undefined>(undefined)\n\n    useEffect(() => {\n        if (!wrapperSize || !containerSize || !overflow) return\n        animation.current = ele.current?.animate(\n            {\n                transform:\n                    direction === \"vertical\"\n                        ? [`translateY(0)`, `translateY(-${containerSize.height + gap}px)`]\n                        : [`translateX(0)`, `translateX(-${containerSize.width + gap}px)`],\n            },\n            { duration, iterations: Infinity },\n        )\n        return () => animation.current?.cancel()\n    }, [wrapperSize, containerSize, overflow, direction, duration])\n\n    function enter(e: ReactMouseEvent<HTMLDivElement, MouseEvent>) {\n        if (pauseOnHover) animation.current?.pause()\n        onMouseEnter?.(e)\n    }\n\n    function leave(e: ReactMouseEvent<HTMLDivElement, MouseEvent>) {\n        if (pauseOnHover) animation.current?.play()\n        onMouseLeave?.(e)\n    }\n\n    useEffect(() => {\n        if (!pauseOnHover && animation.current?.playState === \"paused\") animation.current?.play()\n    }, [animation.current, pauseOnHover])\n\n    return (\n        <div\n            ref={wrapper}\n            className={clsx(\n                css`\n                    position: relative;\n                    ${direction === \"vertical\" ? \"overflow-y: hidden;\" : \"overflow-x: hidden;\"}\n                `,\n                className,\n            )}\n            onMouseEnter={enter}\n            onMouseLeave={leave}\n            {...rest}\n        >\n            <div\n                ref={ele}\n                style={{\n                    position: \"absolute\",\n                    width: direction === \"vertical\" ? \"100%\" : containerSize && (overflow ? containerSize.width * 2 + gap : containerSize.width),\n                    height: direction === \"horizontal\" ? \"100%\" : containerSize && (overflow ? containerSize.height * 2 + gap : containerSize.width),\n                }}\n            >\n                <div\n                    ref={container}\n                    className={clsx(\n                        css`\n                            position: absolute;\n                            left: 0;\n                            top: 0;\n                            ${direction === \"vertical\" ? \"width: 100%;\" : \"height: 100%;\"}\n                        `,\n                        containerClassName,\n                    )}\n                    style={containerStyle}\n                >\n                    {children}\n                </div>\n                {overflow && (\n                    <div\n                        ref={container}\n                        className={clsx(\n                            css`\n                                position: absolute;\n                                right: 0;\n                                bottom: 0;\n                                ${direction === \"vertical\" ? \"width: 100%;\" : \"height: 100%;\"}\n                            `,\n                            containerClassName,\n                        )}\n                        style={containerStyle}\n                    >\n                        {children}\n                    </div>\n                )}\n            </div>\n        </div>\n    )\n})\n"],"mappings":"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"}
+{"version":3,"names":["forwardRef","useEffect","useImperativeHandle","useRef","css","clsx","useSize","jsx","_jsx","jsxs","_jsxs","InfiniteScroll","props","ref","className","direction","children","containerClassName","containerStyle","gap","duration","withGap","withEqual","pauseOnHover","onMouseEnter","onMouseLeave","rest","wrapper","wrapperSize","ele","current","container","containerSize","bigger","overflow","height","width","animation","undefined","animate","transform","iterations","Infinity","cancel","enter","e","pause","leave","play","playState","style","position"],"sources":["../../../src/components/InfiniteScroll.tsx"],"sourcesContent":["\"use client\"\n\nimport { CSSProperties, ComponentPropsWithoutRef, MouseEvent as ReactMouseEvent, forwardRef, useEffect, useImperativeHandle, useRef } from \"react\"\nimport { css } from \"@emotion/css\"\nimport { clsx } from \"deepsea-tools\"\nimport { useSize } from \"soda-hooks\"\n\nexport type InfiniteScrollProps = ComponentPropsWithoutRef<\"div\"> & {\n    /**\n     * 滚动的方向\n     * @default \"vertical\"\n     */\n    direction?: \"vertical\" | \"horizontal\"\n    /** 渲染 children 的容器的类名 */\n    containerClassName?: string\n    /** 渲染 children 的容器的样式 */\n    containerStyle?: CSSProperties\n    /**\n     * 两个 children 容器之间的间距\n     * @default 0\n     */\n    gap?: number\n    /** 一个周期的时间，单位：毫秒 */\n    duration: number\n    /** 是否将 gap 的距离也加入 overflow 的计算 */\n    withGap?: boolean\n    /** 尺寸刚好相同时，是否视为溢出 */\n    withEqual?: boolean\n    /** 鼠标移入时，是否停止动画 */\n    pauseOnHover?: boolean\n}\n\n/**\n * 无限滚动的组件\n * 子元素会内置的容器中被渲染两次，首尾相连，形成无限滚动的效果\n * 但是，如果内部检测到并没有溢出，那么不会渲染两次，并且没有动画\n */\nexport const InfiniteScroll = forwardRef<HTMLDivElement, InfiniteScrollProps>((props, ref) => {\n    const {\n        className,\n        direction = \"vertical\",\n        children,\n        containerClassName,\n        containerStyle,\n        gap = 0,\n        duration,\n        withGap,\n        withEqual,\n        pauseOnHover,\n        onMouseEnter,\n        onMouseLeave,\n        ...rest\n    } = props\n\n    const wrapper = useRef<HTMLDivElement>(null)\n    const wrapperSize = useSize(wrapper)\n\n    const ele = useRef<HTMLDivElement>(null)\n\n    useImperativeHandle(ref, () => wrapper.current as HTMLDivElement, [wrapper.current])\n\n    const container = useRef<HTMLDivElement>(null)\n    const containerSize = useSize(container)\n\n    function bigger(containerSize: number, wrapperSize: number) {\n        return withEqual ? containerSize + (withGap ? gap : 0) >= wrapperSize : containerSize + (withGap ? gap : 0) > wrapperSize\n    }\n\n    const overflow =\n        wrapperSize && containerSize\n            ? direction === \"vertical\"\n                ? bigger(containerSize.height, wrapperSize.height)\n                : bigger(containerSize.width, wrapperSize.width)\n            : false\n\n    const animation = useRef<Animation | undefined>(undefined)\n\n    useEffect(() => {\n        if (!wrapperSize || !containerSize || !overflow) return\n        animation.current = ele.current?.animate(\n            {\n                transform:\n                    direction === \"vertical\"\n                        ? [`translateY(0)`, `translateY(-${containerSize.height + gap}px)`]\n                        : [`translateX(0)`, `translateX(-${containerSize.width + gap}px)`],\n            },\n            { duration, iterations: Infinity },\n        )\n        return () => animation.current?.cancel()\n    }, [wrapperSize, containerSize, overflow, direction, duration])\n\n    function enter(e: ReactMouseEvent<HTMLDivElement, MouseEvent>) {\n        if (pauseOnHover) animation.current?.pause()\n        onMouseEnter?.(e)\n    }\n\n    function leave(e: ReactMouseEvent<HTMLDivElement, MouseEvent>) {\n        if (pauseOnHover) animation.current?.play()\n        onMouseLeave?.(e)\n    }\n\n    useEffect(() => {\n        if (!pauseOnHover && animation.current?.playState === \"paused\") animation.current?.play()\n    }, [animation.current, pauseOnHover])\n\n    return (\n        <div\n            ref={wrapper}\n            className={clsx(\n                css`\n                    position: relative;\n                    ${direction === \"vertical\" ? \"overflow-y: hidden;\" : \"overflow-x: hidden;\"}\n                `,\n                className,\n            )}\n            onMouseEnter={enter}\n            onMouseLeave={leave}\n            {...rest}\n        >\n            <div\n                ref={ele}\n                style={{\n                    position: \"absolute\",\n                    width: direction === \"vertical\" ? \"100%\" : containerSize && (overflow ? containerSize.width * 2 + gap : containerSize.width),\n                    height: direction === \"horizontal\" ? \"100%\" : containerSize && (overflow ? containerSize.height * 2 + gap : containerSize.width),\n                }}\n            >\n                <div\n                    ref={container}\n                    className={clsx(\n                        css`\n                            position: absolute;\n                            left: 0;\n                            top: 0;\n                            ${direction === \"vertical\" ? \"width: 100%;\" : \"height: 100%;\"}\n                        `,\n                        containerClassName,\n                    )}\n                    style={containerStyle}\n                >\n                    {children}\n                </div>\n                {overflow && (\n                    <div\n                        ref={container}\n                        className={clsx(\n                            css`\n                                position: absolute;\n                                right: 0;\n                                bottom: 0;\n                                ${direction === \"vertical\" ? \"width: 100%;\" : \"height: 100%;\"}\n                            `,\n                            containerClassName,\n                        )}\n                        style={containerStyle}\n                    >\n                        {children}\n                    </div>\n                )}\n            </div>\n        </div>\n    )\n})\n"],"mappings":"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"}

package/dist/esm/components/InputFileButton.js

@@ -1,7 +1,7 @@
 "use client";
 
-import { createElement, Fragment, useImperativeHandle, useRef, useState } from "react";
-import { getFileData, InputFile } from "./InputFile";
+import { Fragment, createElement, useImperativeHandle, useRef, useState } from "react";
+import { InputFile, getFileData } from "./InputFile";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 /** 专用于读取文件的 button 组件 */

package/dist/esm/components/InputFileButton.js.map

@@ -1 +1 @@
-{"version":3,"names":["createElement","Fragment","useImperativeHandle","useRef","useState","getFileData","InputFile","jsx","_jsx","jsxs","_jsxs","InputFileButton","props","as","onClick","_onClick","inputProps","accept","onDrop","_onDrop","onDragOver","_onDragOver","dragFile","disabled","_disabled","type","multiple","onValueChange","onFileChange","clearAfterChange","rest","ref","style","__disabled","restInputProps","setDisabled","input","current","e","click","preventDefault","files","dataTransfer","length","files2","Array","from","values","file","value","push","children","display"],"sources":["../../../src/components/InputFileButton.tsx"],"sourcesContent":["\"use client\"\r\n\r\nimport {\r\n    ComponentProps,\r\n    ComponentRef,\r\n    createElement,\r\n    DragEvent,\r\n    Fragment,\r\n    JSX,\r\n    JSXElementConstructor,\r\n    MouseEvent as ReactMouseEvent,\r\n    useImperativeHandle,\r\n    useRef,\r\n    useState,\r\n} from \"react\"\r\nimport { FileType, getFileData, InputFile, InputFileBaseProps, InputFileDataType, InputFileDataTypeMap, InputFileExtraProps, ValueType } from \"./InputFile\"\r\n\r\nexport type InputFileButtonProps<\r\n    Multiple extends boolean = false,\r\n    Type extends InputFileDataType = \"file\",\r\n    AS extends keyof JSX.IntrinsicElements | JSXElementConstructor<any> = \"button\",\r\n> = Omit<ComponentProps<AS>, \"as\" | \"type\" | \"disabled\"> &\r\n    InputFileExtraProps<Multiple, Type> & {\r\n        disabled?: boolean\r\n        inputProps?: Omit<InputFileBaseProps, \"accept\">\r\n        accept?: string\r\n        dragFile?: boolean\r\n        as?: AS\r\n    }\r\n\r\n/** 专用于读取文件的 button 组件 */\r\nexport function InputFileButton<\r\n    Multiple extends boolean = false,\r\n    Type extends InputFileDataType = \"file\",\r\n    AS extends keyof JSX.IntrinsicElements | JSXElementConstructor<any> = \"button\",\r\n>(props: InputFileButtonProps<Multiple, Type, AS>) {\r\n    const {\r\n        as = \"button\",\r\n        onClick: _onClick,\r\n        inputProps = {},\r\n        accept,\r\n        onDrop: _onDrop,\r\n        onDragOver: _onDragOver,\r\n        dragFile,\r\n        disabled: _disabled,\r\n        type = \"file\",\r\n        multiple,\r\n        onValueChange,\r\n        onFileChange,\r\n        clearAfterChange,\r\n        ...rest\r\n    } = props\r\n\r\n    const { ref, style, disabled: __disabled, ...restInputProps } = inputProps\r\n    const [disabled, setDisabled] = useState(false)\r\n    const input = useRef<HTMLInputElement>(null)\r\n\r\n    useImperativeHandle(ref, () => input.current!, [input.current])\r\n\r\n    function onClick(e: ReactMouseEvent<ComponentRef<AS>, MouseEvent>) {\r\n        input.current?.click()\r\n        _onClick?.(e as any)\r\n    }\r\n\r\n    async function onDrop(e: DragEvent<ComponentRef<AS>>) {\r\n        _onDrop?.(e as any)\r\n        if (disabled || !dragFile) return\r\n        e.preventDefault()\r\n        const { files } = e.dataTransfer\r\n        if (!files || files.length === 0) return\r\n        setDisabled(true)\r\n        try {\r\n            if (multiple) {\r\n                const files2: File[] = Array.from(files)\r\n                const values: InputFileDataTypeMap[Type][] = []\r\n                for (const file of files2) {\r\n                    const value = (await getFileData(file, type)) as InputFileDataTypeMap[Type]\r\n                    values.push(value)\r\n                }\r\n                onFileChange?.(files2 as FileType<Multiple>)\r\n                onValueChange?.(values as ValueType<Multiple, Type>)\r\n            } else {\r\n                const file = files[0]\r\n                onFileChange?.(file as FileType<Multiple>)\r\n                onValueChange?.((await getFileData(file, type)) as ValueType<Multiple, Type>)\r\n            }\r\n        } finally {\r\n            setDisabled(false)\r\n        }\r\n    }\r\n\r\n    function onDragOver(e: DragEvent<ComponentRef<AS>>) {\r\n        _onDragOver?.(e as any)\r\n        if (disabled || !dragFile) return\r\n        e.preventDefault()\r\n    }\r\n\r\n    return (\r\n        <Fragment>\r\n            <InputFile<Multiple, Type>\r\n                ref={input}\r\n                disabled={disabled || _disabled || __disabled}\r\n                style={{ display: \"none\", ...style }}\r\n                multiple={multiple}\r\n                accept={accept}\r\n                type={type as Type}\r\n                onValueChange={onValueChange}\r\n                onFileChange={onFileChange}\r\n                clearAfterChange={clearAfterChange}\r\n                {...restInputProps}\r\n            />\r\n            {createElement(as, {\r\n                disabled: disabled || _disabled,\r\n                onClick,\r\n                onDrop,\r\n                onDragOver,\r\n                ...rest,\r\n            })}\r\n        </Fragment>\r\n    )\r\n}\r\n"],"mappings":"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"}
+{"version":3,"names":["Fragment","createElement","useImperativeHandle","useRef","useState","InputFile","getFileData","jsx","_jsx","jsxs","_jsxs","InputFileButton","props","as","onClick","_onClick","inputProps","accept","onDrop","_onDrop","onDragOver","_onDragOver","dragFile","disabled","_disabled","type","multiple","onValueChange","onFileChange","clearAfterChange","rest","ref","style","__disabled","restInputProps","setDisabled","input","current","e","click","preventDefault","files","dataTransfer","length","files2","Array","from","values","file","value","push","children","display"],"sources":["../../../src/components/InputFileButton.tsx"],"sourcesContent":["\"use client\"\n\nimport {\n    ComponentProps,\n    ComponentRef,\n    DragEvent,\n    Fragment,\n    JSX,\n    JSXElementConstructor,\n    MouseEvent as ReactMouseEvent,\n    createElement,\n    useImperativeHandle,\n    useRef,\n    useState,\n} from \"react\"\n\nimport { FileType, InputFile, InputFileBaseProps, InputFileDataType, InputFileDataTypeMap, InputFileExtraProps, ValueType, getFileData } from \"./InputFile\"\n\nexport type InputFileButtonProps<\n    Multiple extends boolean = false,\n    Type extends InputFileDataType = \"file\",\n    AS extends keyof JSX.IntrinsicElements | JSXElementConstructor<any> = \"button\",\n> = Omit<ComponentProps<AS>, \"as\" | \"type\" | \"disabled\"> &\n    InputFileExtraProps<Multiple, Type> & {\n        disabled?: boolean\n        inputProps?: Omit<InputFileBaseProps, \"accept\">\n        accept?: string\n        dragFile?: boolean\n        as?: AS\n    }\n\n/** 专用于读取文件的 button 组件 */\nexport function InputFileButton<\n    Multiple extends boolean = false,\n    Type extends InputFileDataType = \"file\",\n    AS extends keyof JSX.IntrinsicElements | JSXElementConstructor<any> = \"button\",\n>(props: InputFileButtonProps<Multiple, Type, AS>) {\n    const {\n        as = \"button\",\n        onClick: _onClick,\n        inputProps = {},\n        accept,\n        onDrop: _onDrop,\n        onDragOver: _onDragOver,\n        dragFile,\n        disabled: _disabled,\n        type = \"file\",\n        multiple,\n        onValueChange,\n        onFileChange,\n        clearAfterChange,\n        ...rest\n    } = props\n\n    const { ref, style, disabled: __disabled, ...restInputProps } = inputProps\n    const [disabled, setDisabled] = useState(false)\n    const input = useRef<HTMLInputElement>(null)\n\n    useImperativeHandle(ref, () => input.current!, [input.current])\n\n    function onClick(e: ReactMouseEvent<ComponentRef<AS>, MouseEvent>) {\n        input.current?.click()\n        _onClick?.(e as any)\n    }\n\n    async function onDrop(e: DragEvent<ComponentRef<AS>>) {\n        _onDrop?.(e as any)\n        if (disabled || !dragFile) return\n        e.preventDefault()\n        const { files } = e.dataTransfer\n        if (!files || files.length === 0) return\n        setDisabled(true)\n        try {\n            if (multiple) {\n                const files2: File[] = Array.from(files)\n                const values: InputFileDataTypeMap[Type][] = []\n                for (const file of files2) {\n                    const value = (await getFileData(file, type)) as InputFileDataTypeMap[Type]\n                    values.push(value)\n                }\n                onFileChange?.(files2 as FileType<Multiple>)\n                onValueChange?.(values as ValueType<Multiple, Type>)\n            } else {\n                const file = files[0]\n                onFileChange?.(file as FileType<Multiple>)\n                onValueChange?.((await getFileData(file, type)) as ValueType<Multiple, Type>)\n            }\n        } finally {\n            setDisabled(false)\n        }\n    }\n\n    function onDragOver(e: DragEvent<ComponentRef<AS>>) {\n        _onDragOver?.(e as any)\n        if (disabled || !dragFile) return\n        e.preventDefault()\n    }\n\n    return (\n        <Fragment>\n            <InputFile<Multiple, Type>\n                ref={input}\n                disabled={disabled || _disabled || __disabled}\n                style={{ display: \"none\", ...style }}\n                multiple={multiple}\n                accept={accept}\n                type={type as Type}\n                onValueChange={onValueChange}\n                onFileChange={onFileChange}\n                clearAfterChange={clearAfterChange}\n                {...restInputProps}\n            />\n            {createElement(as, {\n                disabled: disabled || _disabled,\n                onClick,\n                onDrop,\n                onDragOver,\n                ...rest,\n            })}\n        </Fragment>\n    )\n}\n"],"mappings":"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"}

package/dist/esm/components/TransitionBox.js

@@ -1,7 +1,7 @@
 "use client";
 
 import { forwardRef, useEffect, useRef, useState } from "react";
-import { useSize } from "ahooks";
+import { useSize } from "soda-hooks";
 import { jsx as _jsx } from "react/jsx-runtime";
 /** 尺寸渐变的组件 */
 export const TransitionBox = /*#__PURE__*/forwardRef((props, ref) => {

package/dist/esm/components/TransitionBox.js.map

@@ -1 +1 @@
-{"version":3,"names":["forwardRef","useEffect","useRef","useState","useSize","jsx","_jsx","TransitionBox","props","ref","style","containerClassName","containerStyle","children","vertical","horizontal","time","rest","container","size","width","height","count","setCount","Math","min","outerStyle","transitionProperty","filter","Boolean","join","undefined","transitionDuration","overflow","position","className"],"sources":["../../../src/components/TransitionBox.tsx"],"sourcesContent":["\"use client\"\n\nimport { CSSProperties, FC, HTMLAttributes, forwardRef, useEffect, useRef, useState } from \"react\"\nimport { useSize } from \"ahooks\"\n\nexport interface TransitionBoxProps extends HTMLAttributes<HTMLDivElement> {\n    containerClassName?: string\n    containerStyle?: CSSProperties\n    vertical?: boolean\n    horizontal?: boolean\n    time?: number\n}\n\n/** 尺寸渐变的组件 */\nexport const TransitionBox: FC<TransitionBoxProps> = forwardRef<HTMLDivElement, TransitionBoxProps>((props, ref) => {\n    const { style, containerClassName, containerStyle, children, vertical = true, horizontal = true, time = 3000, ...rest } = props\n    const container = useRef<HTMLDivElement>(null)\n    const size = useSize(container)\n    const width = size?.width ?? 0\n    const height = size?.height ?? 0\n    const [count, setCount] = useState(0)\n\n    useEffect(() => {\n        setCount(count => Math.min(count + 1, 3))\n    }, [width, height])\n\n    const outerStyle: CSSProperties = {\n        transitionProperty: count === 3 ? [horizontal && \"width\", vertical && \"height\"].filter(Boolean).join(\", \") : undefined,\n        transitionDuration: count === 3 ? `${time}ms` : undefined,\n        width,\n        height,\n        overflow: \"hidden\",\n        position: \"relative\",\n        ...style,\n    }\n\n    return (\n        <div ref={ref} style={outerStyle} {...rest}>\n            <div className={containerClassName} style={{ position: \"absolute\", ...containerStyle }} ref={container}>\n                {children}\n            </div>\n        </div>\n    )\n})\n"],"mappings":"AAAA,YAAY;;AAEZ,SAA4CA,UAAU,EAAEC,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,OAAO;AAClG,SAASC,OAAO,QAAQ,QAAQ;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAUhC;AACA,OAAO,MAAMC,aAAqC,gBAAGP,UAAU,CAAqC,CAACQ,KAAK,EAAEC,GAAG,KAAK;EAChH,MAAM;IAAEC,KAAK;IAAEC,kBAAkB;IAAEC,cAAc;IAAEC,QAAQ;IAAEC,QAAQ,GAAG,IAAI;IAAEC,UAAU,GAAG,IAAI;IAAEC,IAAI,GAAG,IAAI;IAAE,GAAGC;EAAK,CAAC,GAAGT,KAAK;EAC/H,MAAMU,SAAS,GAAGhB,MAAM,CAAiB,IAAI,CAAC;EAC9C,MAAMiB,IAAI,GAAGf,OAAO,CAACc,SAAS,CAAC;EAC/B,MAAME,KAAK,GAAGD,IAAI,EAAEC,KAAK,IAAI,CAAC;EAC9B,MAAMC,MAAM,GAAGF,IAAI,EAAEE,MAAM,IAAI,CAAC;EAChC,MAAM,CAACC,KAAK,EAAEC,QAAQ,CAAC,GAAGpB,QAAQ,CAAC,CAAC,CAAC;EAErCF,SAAS,CAAC,MAAM;IACZsB,QAAQ,CAACD,KAAK,IAAIE,IAAI,CAACC,GAAG,CAACH,KAAK,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC;EAC7C,CAAC,EAAE,CAACF,KAAK,EAAEC,MAAM,CAAC,CAAC;EAEnB,MAAMK,UAAyB,GAAG;IAC9BC,kBAAkB,EAAEL,KAAK,KAAK,CAAC,GAAG,CAACP,UAAU,IAAI,OAAO,EAAED,QAAQ,IAAI,QAAQ,CAAC,CAACc,MAAM,CAACC,OAAO,CAAC,CAACC,IAAI,CAAC,IAAI,CAAC,GAAGC,SAAS;IACtHC,kBAAkB,EAAEV,KAAK,KAAK,CAAC,GAAI,GAAEN,IAAK,IAAG,GAAGe,SAAS;IACzDX,KAAK;IACLC,MAAM;IACNY,QAAQ,EAAE,QAAQ;IAClBC,QAAQ,EAAE,UAAU;IACpB,GAAGxB;EACP,CAAC;EAED,oBACIJ,IAAA;IAAKG,GAAG,EAAEA,GAAI;IAACC,KAAK,EAAEgB,UAAW;IAAA,GAAKT,IAAI;IAAAJ,QAAA,eACtCP,IAAA;MAAK6B,SAAS,EAAExB,kBAAmB;MAACD,KAAK,EAAE;QAAEwB,QAAQ,EAAE,UAAU;QAAE,GAAGtB;MAAe,CAAE;MAACH,GAAG,EAAES,SAAU;MAAAL,QAAA,EAClGA;IAAQ,CACR;EAAC,CACL,CAAC;AAEd,CAAC,CAAC"}
+{"version":3,"names":["forwardRef","useEffect","useRef","useState","useSize","jsx","_jsx","TransitionBox","props","ref","style","containerClassName","containerStyle","children","vertical","horizontal","time","rest","container","size","width","height","count","setCount","Math","min","outerStyle","transitionProperty","filter","Boolean","join","undefined","transitionDuration","overflow","position","className"],"sources":["../../../src/components/TransitionBox.tsx"],"sourcesContent":["\"use client\"\n\nimport { CSSProperties, FC, HTMLAttributes, forwardRef, useEffect, useRef, useState } from \"react\"\nimport { useSize } from \"soda-hooks\"\n\nexport interface TransitionBoxProps extends HTMLAttributes<HTMLDivElement> {\n    containerClassName?: string\n    containerStyle?: CSSProperties\n    vertical?: boolean\n    horizontal?: boolean\n    time?: number\n}\n\n/** 尺寸渐变的组件 */\nexport const TransitionBox: FC<TransitionBoxProps> = forwardRef<HTMLDivElement, TransitionBoxProps>((props, ref) => {\n    const { style, containerClassName, containerStyle, children, vertical = true, horizontal = true, time = 3000, ...rest } = props\n    const container = useRef<HTMLDivElement>(null)\n    const size = useSize(container)\n    const width = size?.width ?? 0\n    const height = size?.height ?? 0\n    const [count, setCount] = useState(0)\n\n    useEffect(() => {\n        setCount(count => Math.min(count + 1, 3))\n    }, [width, height])\n\n    const outerStyle: CSSProperties = {\n        transitionProperty: count === 3 ? [horizontal && \"width\", vertical && \"height\"].filter(Boolean).join(\", \") : undefined,\n        transitionDuration: count === 3 ? `${time}ms` : undefined,\n        width,\n        height,\n        overflow: \"hidden\",\n        position: \"relative\",\n        ...style,\n    }\n\n    return (\n        <div ref={ref} style={outerStyle} {...rest}>\n            <div className={containerClassName} style={{ position: \"absolute\", ...containerStyle }} ref={container}>\n                {children}\n            </div>\n        </div>\n    )\n})\n"],"mappings":"AAAA,YAAY;;AAEZ,SAA4CA,UAAU,EAAEC,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,OAAO;AAClG,SAASC,OAAO,QAAQ,YAAY;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAUpC;AACA,OAAO,MAAMC,aAAqC,gBAAGP,UAAU,CAAqC,CAACQ,KAAK,EAAEC,GAAG,KAAK;EAChH,MAAM;IAAEC,KAAK;IAAEC,kBAAkB;IAAEC,cAAc;IAAEC,QAAQ;IAAEC,QAAQ,GAAG,IAAI;IAAEC,UAAU,GAAG,IAAI;IAAEC,IAAI,GAAG,IAAI;IAAE,GAAGC;EAAK,CAAC,GAAGT,KAAK;EAC/H,MAAMU,SAAS,GAAGhB,MAAM,CAAiB,IAAI,CAAC;EAC9C,MAAMiB,IAAI,GAAGf,OAAO,CAACc,SAAS,CAAC;EAC/B,MAAME,KAAK,GAAGD,IAAI,EAAEC,KAAK,IAAI,CAAC;EAC9B,MAAMC,MAAM,GAAGF,IAAI,EAAEE,MAAM,IAAI,CAAC;EAChC,MAAM,CAACC,KAAK,EAAEC,QAAQ,CAAC,GAAGpB,QAAQ,CAAC,CAAC,CAAC;EAErCF,SAAS,CAAC,MAAM;IACZsB,QAAQ,CAACD,KAAK,IAAIE,IAAI,CAACC,GAAG,CAACH,KAAK,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC;EAC7C,CAAC,EAAE,CAACF,KAAK,EAAEC,MAAM,CAAC,CAAC;EAEnB,MAAMK,UAAyB,GAAG;IAC9BC,kBAAkB,EAAEL,KAAK,KAAK,CAAC,GAAG,CAACP,UAAU,IAAI,OAAO,EAAED,QAAQ,IAAI,QAAQ,CAAC,CAACc,MAAM,CAACC,OAAO,CAAC,CAACC,IAAI,CAAC,IAAI,CAAC,GAAGC,SAAS;IACtHC,kBAAkB,EAAEV,KAAK,KAAK,CAAC,GAAI,GAAEN,IAAK,IAAG,GAAGe,SAAS;IACzDX,KAAK;IACLC,MAAM;IACNY,QAAQ,EAAE,QAAQ;IAClBC,QAAQ,EAAE,UAAU;IACpB,GAAGxB;EACP,CAAC;EAED,oBACIJ,IAAA;IAAKG,GAAG,EAAEA,GAAI;IAACC,KAAK,EAAEgB,UAAW;IAAA,GAAKT,IAAI;IAAAJ,QAAA,eACtCP,IAAA;MAAK6B,SAAS,EAAExB,kBAAmB;MAACD,KAAK,EAAE;QAAEwB,QAAQ,EAAE,UAAU;QAAE,GAAGtB;MAAe,CAAE;MAACH,GAAG,EAAES,SAAU;MAAAL,QAAA,EAClGA;IAAQ,CACR;EAAC,CACL,CAAC;AAEd,CAAC,CAAC"}

package/dist/esm/components/Unify.js

@@ -1,7 +1,7 @@
 "use client";
 
-import { clsx } from "deepsea-tools";
 import { createContext, createElement, useContext } from "react";
+import { clsx } from "deepsea-tools";
 import { jsx as _jsx } from "react/jsx-runtime";
 const UnifyConfigContext = /*#__PURE__*/createContext({});
 export const UnifyConfigProvider = ({

package/dist/esm/components/Unify.js.map

@@ -1 +1 @@
-{"version":3,"names":["clsx","createContext","createElement","useContext","jsx","_jsx","UnifyConfigContext","UnifyConfigProvider","className","style","children","_className","_style","Provider","value","Unify","props","as","rest"],"sources":["../../../src/components/Unify.tsx"],"sourcesContent":["\"use client\"\r\n\r\nimport { clsx } from \"deepsea-tools\"\r\nimport { CSSProperties, ComponentProps, FC, JSX, JSXElementConstructor, ReactNode, createContext, createElement, useContext } from \"react\"\r\n\r\nexport interface UnifyConfig {\r\n    className?: string\r\n    style?: CSSProperties\r\n}\r\n\r\nconst UnifyConfigContext = createContext<UnifyConfig>({})\r\n\r\nexport interface UnifyConfigProviderProps extends UnifyConfig {\r\n    children?: ReactNode\r\n}\r\n\r\nexport const UnifyConfigProvider: FC<UnifyConfigProviderProps> = ({ className, style, children }) => {\r\n    const { className: _className, style: _style } = useContext(UnifyConfigContext)\r\n\r\n    return (\r\n        <UnifyConfigContext.Provider value={{ className: clsx(_className, className), style: { ..._style, ...style } }}>{children}</UnifyConfigContext.Provider>\r\n    )\r\n}\r\n\r\nexport type UnifyProps<AS extends keyof JSX.IntrinsicElements | JSXElementConstructor<any> = \"div\"> = Omit<ComponentProps<AS>, \"as\"> & {\r\n    as?: AS\r\n}\r\n\r\nexport function Unify<AS extends keyof JSX.IntrinsicElements | JSXElementConstructor<any> = \"div\">(props: UnifyProps<AS>) {\r\n    const { as = \"div\", className, style, ...rest } = props\r\n    const { className: _className, style: _style } = useContext(UnifyConfigContext)\r\n\r\n    return createElement(as, {\r\n        className: clsx(_className, className),\r\n        style: { ..._style, ...style },\r\n        ...rest,\r\n    }) as ReactNode\r\n}\r\n"],"mappings":"AAAA,YAAY;;AAEZ,SAASA,IAAI,QAAQ,eAAe;AACpC,SAAmFC,aAAa,EAAEC,aAAa,EAAEC,UAAU,QAAQ,OAAO;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAO1I,MAAMC,kBAAkB,gBAAGL,aAAa,CAAc,CAAC,CAAC,CAAC;AAMzD,OAAO,MAAMM,mBAAiD,GAAGA,CAAC;EAAEC,SAAS;EAAEC,KAAK;EAAEC;AAAS,CAAC,KAAK;EACjG,MAAM;IAAEF,SAAS,EAAEG,UAAU;IAAEF,KAAK,EAAEG;EAAO,CAAC,GAAGT,UAAU,CAACG,kBAAkB,CAAC;EAE/E,oBACID,IAAA,CAACC,kBAAkB,CAACO,QAAQ;IAACC,KAAK,EAAE;MAAEN,SAAS,EAAER,IAAI,CAACW,UAAU,EAAEH,SAAS,CAAC;MAAEC,KAAK,EAAE;QAAE,GAAGG,MAAM;QAAE,GAAGH;MAAM;IAAE,CAAE;IAAAC,QAAA,EAAEA;EAAQ,CAA8B,CAAC;AAEhK,CAAC;AAMD,OAAO,SAASK,KAAKA,CAA8EC,KAAqB,EAAE;EACtH,MAAM;IAAEC,EAAE,GAAG,KAAK;IAAET,SAAS;IAAEC,KAAK;IAAE,GAAGS;EAAK,CAAC,GAAGF,KAAK;EACvD,MAAM;IAAER,SAAS,EAAEG,UAAU;IAAEF,KAAK,EAAEG;EAAO,CAAC,GAAGT,UAAU,CAACG,kBAAkB,CAAC;EAE/E,oBAAOJ,aAAa,CAACe,EAAE,EAAE;IACrBT,SAAS,EAAER,IAAI,CAACW,UAAU,EAAEH,SAAS,CAAC;IACtCC,KAAK,EAAE;MAAE,GAAGG,MAAM;MAAE,GAAGH;IAAM,CAAC;IAC9B,GAAGS;EACP,CAAC,CAAC;AACN"}
+{"version":3,"names":["createContext","createElement","useContext","clsx","jsx","_jsx","UnifyConfigContext","UnifyConfigProvider","className","style","children","_className","_style","Provider","value","Unify","props","as","rest"],"sources":["../../../src/components/Unify.tsx"],"sourcesContent":["\"use client\"\n\nimport { CSSProperties, ComponentProps, FC, JSX, JSXElementConstructor, ReactNode, createContext, createElement, useContext } from \"react\"\nimport { clsx } from \"deepsea-tools\"\n\nexport interface UnifyConfig {\n    className?: string\n    style?: CSSProperties\n}\n\nconst UnifyConfigContext = createContext<UnifyConfig>({})\n\nexport interface UnifyConfigProviderProps extends UnifyConfig {\n    children?: ReactNode\n}\n\nexport const UnifyConfigProvider: FC<UnifyConfigProviderProps> = ({ className, style, children }) => {\n    const { className: _className, style: _style } = useContext(UnifyConfigContext)\n\n    return (\n        <UnifyConfigContext.Provider value={{ className: clsx(_className, className), style: { ..._style, ...style } }}>{children}</UnifyConfigContext.Provider>\n    )\n}\n\nexport type UnifyProps<AS extends keyof JSX.IntrinsicElements | JSXElementConstructor<any> = \"div\"> = Omit<ComponentProps<AS>, \"as\"> & {\n    as?: AS\n}\n\nexport function Unify<AS extends keyof JSX.IntrinsicElements | JSXElementConstructor<any> = \"div\">(props: UnifyProps<AS>) {\n    const { as = \"div\", className, style, ...rest } = props\n    const { className: _className, style: _style } = useContext(UnifyConfigContext)\n\n    return createElement(as, {\n        className: clsx(_className, className),\n        style: { ..._style, ...style },\n        ...rest,\n    }) as ReactNode\n}\n"],"mappings":"AAAA,YAAY;;AAEZ,SAAmFA,aAAa,EAAEC,aAAa,EAAEC,UAAU,QAAQ,OAAO;AAC1I,SAASC,IAAI,QAAQ,eAAe;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAOpC,MAAMC,kBAAkB,gBAAGN,aAAa,CAAc,CAAC,CAAC,CAAC;AAMzD,OAAO,MAAMO,mBAAiD,GAAGA,CAAC;EAAEC,SAAS;EAAEC,KAAK;EAAEC;AAAS,CAAC,KAAK;EACjG,MAAM;IAAEF,SAAS,EAAEG,UAAU;IAAEF,KAAK,EAAEG;EAAO,CAAC,GAAGV,UAAU,CAACI,kBAAkB,CAAC;EAE/E,oBACID,IAAA,CAACC,kBAAkB,CAACO,QAAQ;IAACC,KAAK,EAAE;MAAEN,SAAS,EAAEL,IAAI,CAACQ,UAAU,EAAEH,SAAS,CAAC;MAAEC,KAAK,EAAE;QAAE,GAAGG,MAAM;QAAE,GAAGH;MAAM;IAAE,CAAE;IAAAC,QAAA,EAAEA;EAAQ,CAA8B,CAAC;AAEhK,CAAC;AAMD,OAAO,SAASK,KAAKA,CAA8EC,KAAqB,EAAE;EACtH,MAAM;IAAEC,EAAE,GAAG,KAAK;IAAET,SAAS;IAAEC,KAAK;IAAE,GAAGS;EAAK,CAAC,GAAGF,KAAK;EACvD,MAAM;IAAER,SAAS,EAAEG,UAAU;IAAEF,KAAK,EAAEG;EAAO,CAAC,GAAGV,UAAU,CAACI,kBAAkB,CAAC;EAE/E,oBAAOL,aAAa,CAACgB,EAAE,EAAE;IACrBT,SAAS,EAAEL,IAAI,CAACQ,UAAU,EAAEH,SAAS,CAAC;IACtCC,KAAK,EAAE;MAAE,GAAGG,MAAM;MAAE,GAAGH;IAAM,CAAC;IAC9B,GAAGS;EACP,CAAC,CAAC;AACN"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "deepsea-components",
-  "version": "5.10.3",
+  "version": "5.10.5",
   "description": "格数科技自用组件库",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -27,12 +27,12 @@
   },
   "dependencies": {
     "@emotion/css": "^11.13.5",
-    "ahooks": "^3.8.4",
     "clipboard": "^2.0.11",
     "echarts": "^5.6.0",
     "hls.js": "^1.5.20",
     "smooth-scrollbar": "^8.8.4",
-    "deepsea-tools": "5.19.3"
+    "deepsea-tools": "5.19.3",
+    "soda-hooks": "6.5.9"
   },
   "peerDependencies": {
     "@types/react": ">=18.3.18",

package/src/components/AutoScroll.tsx

@@ -2,10 +2,10 @@
 
 import { CSSProperties, MouseEvent as ReactMouseEvent, forwardRef, useEffect, useImperativeHandle, useRef } from "react"
 import { css } from "@emotion/css"
-import { useSize } from "ahooks"
 import { clsx, getArray } from "deepsea-tools"
 import Scrollbar from "smooth-scrollbar"
 import { ScrollStatus } from "smooth-scrollbar/interfaces/scrollbar"
+import { useSize } from "soda-hooks"
 
 import { px, transformCSSVariable } from "@/utils"
 

package/src/components/CopyButton.tsx

@@ -1,8 +1,8 @@
 "use client"
 
 import { ComponentPropsWithoutRef, forwardRef, useEffect, useImperativeHandle, useRef } from "react"
-import { useLatest } from "ahooks"
 import ClipboardJS, { Event } from "clipboard"
+import { useLatest } from "soda-hooks"
 
 export { Event } from "clipboard"
 

package/src/components/Flow.tsx

@@ -1,9 +1,9 @@
 "use client"
 
+import { CSSProperties, HTMLAttributes, Key, ReactNode, Ref, useEffect, useImperativeHandle, useRef, useState } from "react"
 import { css } from "@emotion/css"
-import { useSize } from "ahooks"
 import { clsx } from "deepsea-tools"
-import { CSSProperties, HTMLAttributes, Key, ReactNode, Ref, useEffect, useImperativeHandle, useRef, useState } from "react"
+import { useSize } from "soda-hooks"
 
 import { px, transformCSSVariable } from "@/utils"
 

package/src/components/ImportExcel.tsx

@@ -1,7 +1,7 @@
 "use client"
 
-import { readExcel } from "deepsea-tools"
 import { FC } from "react"
+import { readExcel } from "deepsea-tools"
 
 import { InputFile, InputFileProps } from "./InputFile"
 

package/src/components/InfiniteScroll.tsx

@@ -2,8 +2,8 @@
 
 import { CSSProperties, ComponentPropsWithoutRef, MouseEvent as ReactMouseEvent, forwardRef, useEffect, useImperativeHandle, useRef } from "react"
 import { css } from "@emotion/css"
-import { useSize } from "ahooks"
 import { clsx } from "deepsea-tools"
+import { useSize } from "soda-hooks"
 
 export type InfiniteScrollProps = ComponentPropsWithoutRef<"div"> & {
     /**

package/src/components/InputFileButton.tsx

@@ -1,121 +1,122 @@
-"use client"
-
-import {
-    ComponentProps,
-    ComponentRef,
-    createElement,
-    DragEvent,
-    Fragment,
-    JSX,
-    JSXElementConstructor,
-    MouseEvent as ReactMouseEvent,
-    useImperativeHandle,
-    useRef,
-    useState,
-} from "react"
-import { FileType, getFileData, InputFile, InputFileBaseProps, InputFileDataType, InputFileDataTypeMap, InputFileExtraProps, ValueType } from "./InputFile"
-
-export type InputFileButtonProps<
-    Multiple extends boolean = false,
-    Type extends InputFileDataType = "file",
-    AS extends keyof JSX.IntrinsicElements | JSXElementConstructor<any> = "button",
-> = Omit<ComponentProps<AS>, "as" | "type" | "disabled"> &
-    InputFileExtraProps<Multiple, Type> & {
-        disabled?: boolean
-        inputProps?: Omit<InputFileBaseProps, "accept">
-        accept?: string
-        dragFile?: boolean
-        as?: AS
-    }
-
-/** 专用于读取文件的 button 组件 */
-export function InputFileButton<
-    Multiple extends boolean = false,
-    Type extends InputFileDataType = "file",
-    AS extends keyof JSX.IntrinsicElements | JSXElementConstructor<any> = "button",
->(props: InputFileButtonProps<Multiple, Type, AS>) {
-    const {
-        as = "button",
-        onClick: _onClick,
-        inputProps = {},
-        accept,
-        onDrop: _onDrop,
-        onDragOver: _onDragOver,
-        dragFile,
-        disabled: _disabled,
-        type = "file",
-        multiple,
-        onValueChange,
-        onFileChange,
-        clearAfterChange,
-        ...rest
-    } = props
-
-    const { ref, style, disabled: __disabled, ...restInputProps } = inputProps
-    const [disabled, setDisabled] = useState(false)
-    const input = useRef<HTMLInputElement>(null)
-
-    useImperativeHandle(ref, () => input.current!, [input.current])
-
-    function onClick(e: ReactMouseEvent<ComponentRef<AS>, MouseEvent>) {
-        input.current?.click()
-        _onClick?.(e as any)
-    }
-
-    async function onDrop(e: DragEvent<ComponentRef<AS>>) {
-        _onDrop?.(e as any)
-        if (disabled || !dragFile) return
-        e.preventDefault()
-        const { files } = e.dataTransfer
-        if (!files || files.length === 0) return
-        setDisabled(true)
-        try {
-            if (multiple) {
-                const files2: File[] = Array.from(files)
-                const values: InputFileDataTypeMap[Type][] = []
-                for (const file of files2) {
-                    const value = (await getFileData(file, type)) as InputFileDataTypeMap[Type]
-                    values.push(value)
-                }
-                onFileChange?.(files2 as FileType<Multiple>)
-                onValueChange?.(values as ValueType<Multiple, Type>)
-            } else {
-                const file = files[0]
-                onFileChange?.(file as FileType<Multiple>)
-                onValueChange?.((await getFileData(file, type)) as ValueType<Multiple, Type>)
-            }
-        } finally {
-            setDisabled(false)
-        }
-    }
-
-    function onDragOver(e: DragEvent<ComponentRef<AS>>) {
-        _onDragOver?.(e as any)
-        if (disabled || !dragFile) return
-        e.preventDefault()
-    }
-
-    return (
-        <Fragment>
-            <InputFile<Multiple, Type>
-                ref={input}
-                disabled={disabled || _disabled || __disabled}
-                style={{ display: "none", ...style }}
-                multiple={multiple}
-                accept={accept}
-                type={type as Type}
-                onValueChange={onValueChange}
-                onFileChange={onFileChange}
-                clearAfterChange={clearAfterChange}
-                {...restInputProps}
-            />
-            {createElement(as, {
-                disabled: disabled || _disabled,
-                onClick,
-                onDrop,
-                onDragOver,
-                ...rest,
-            })}
-        </Fragment>
-    )
-}
+"use client"
+
+import {
+    ComponentProps,
+    ComponentRef,
+    DragEvent,
+    Fragment,
+    JSX,
+    JSXElementConstructor,
+    MouseEvent as ReactMouseEvent,
+    createElement,
+    useImperativeHandle,
+    useRef,
+    useState,
+} from "react"
+
+import { FileType, InputFile, InputFileBaseProps, InputFileDataType, InputFileDataTypeMap, InputFileExtraProps, ValueType, getFileData } from "./InputFile"
+
+export type InputFileButtonProps<
+    Multiple extends boolean = false,
+    Type extends InputFileDataType = "file",
+    AS extends keyof JSX.IntrinsicElements | JSXElementConstructor<any> = "button",
+> = Omit<ComponentProps<AS>, "as" | "type" | "disabled"> &
+    InputFileExtraProps<Multiple, Type> & {
+        disabled?: boolean
+        inputProps?: Omit<InputFileBaseProps, "accept">
+        accept?: string
+        dragFile?: boolean
+        as?: AS
+    }
+
+/** 专用于读取文件的 button 组件 */
+export function InputFileButton<
+    Multiple extends boolean = false,
+    Type extends InputFileDataType = "file",
+    AS extends keyof JSX.IntrinsicElements | JSXElementConstructor<any> = "button",
+>(props: InputFileButtonProps<Multiple, Type, AS>) {
+    const {
+        as = "button",
+        onClick: _onClick,
+        inputProps = {},
+        accept,
+        onDrop: _onDrop,
+        onDragOver: _onDragOver,
+        dragFile,
+        disabled: _disabled,
+        type = "file",
+        multiple,
+        onValueChange,
+        onFileChange,
+        clearAfterChange,
+        ...rest
+    } = props
+
+    const { ref, style, disabled: __disabled, ...restInputProps } = inputProps
+    const [disabled, setDisabled] = useState(false)
+    const input = useRef<HTMLInputElement>(null)
+
+    useImperativeHandle(ref, () => input.current!, [input.current])
+
+    function onClick(e: ReactMouseEvent<ComponentRef<AS>, MouseEvent>) {
+        input.current?.click()
+        _onClick?.(e as any)
+    }
+
+    async function onDrop(e: DragEvent<ComponentRef<AS>>) {
+        _onDrop?.(e as any)
+        if (disabled || !dragFile) return
+        e.preventDefault()
+        const { files } = e.dataTransfer
+        if (!files || files.length === 0) return
+        setDisabled(true)
+        try {
+            if (multiple) {
+                const files2: File[] = Array.from(files)
+                const values: InputFileDataTypeMap[Type][] = []
+                for (const file of files2) {
+                    const value = (await getFileData(file, type)) as InputFileDataTypeMap[Type]
+                    values.push(value)
+                }
+                onFileChange?.(files2 as FileType<Multiple>)
+                onValueChange?.(values as ValueType<Multiple, Type>)
+            } else {
+                const file = files[0]
+                onFileChange?.(file as FileType<Multiple>)
+                onValueChange?.((await getFileData(file, type)) as ValueType<Multiple, Type>)
+            }
+        } finally {
+            setDisabled(false)
+        }
+    }
+
+    function onDragOver(e: DragEvent<ComponentRef<AS>>) {
+        _onDragOver?.(e as any)
+        if (disabled || !dragFile) return
+        e.preventDefault()
+    }
+
+    return (
+        <Fragment>
+            <InputFile<Multiple, Type>
+                ref={input}
+                disabled={disabled || _disabled || __disabled}
+                style={{ display: "none", ...style }}
+                multiple={multiple}
+                accept={accept}
+                type={type as Type}
+                onValueChange={onValueChange}
+                onFileChange={onFileChange}
+                clearAfterChange={clearAfterChange}
+                {...restInputProps}
+            />
+            {createElement(as, {
+                disabled: disabled || _disabled,
+                onClick,
+                onDrop,
+                onDragOver,
+                ...rest,
+            })}
+        </Fragment>
+    )
+}

package/src/components/TransitionBox.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import { CSSProperties, FC, HTMLAttributes, forwardRef, useEffect, useRef, useState } from "react"
-import { useSize } from "ahooks"
+import { useSize } from "soda-hooks"
 
 export interface TransitionBoxProps extends HTMLAttributes<HTMLDivElement> {
     containerClassName?: string

package/src/components/Unify.tsx

@@ -1,38 +1,38 @@
-"use client"
-
-import { clsx } from "deepsea-tools"
-import { CSSProperties, ComponentProps, FC, JSX, JSXElementConstructor, ReactNode, createContext, createElement, useContext } from "react"
-
-export interface UnifyConfig {
-    className?: string
-    style?: CSSProperties
-}
-
-const UnifyConfigContext = createContext<UnifyConfig>({})
-
-export interface UnifyConfigProviderProps extends UnifyConfig {
-    children?: ReactNode
-}
-
-export const UnifyConfigProvider: FC<UnifyConfigProviderProps> = ({ className, style, children }) => {
-    const { className: _className, style: _style } = useContext(UnifyConfigContext)
-
-    return (
-        <UnifyConfigContext.Provider value={{ className: clsx(_className, className), style: { ..._style, ...style } }}>{children}</UnifyConfigContext.Provider>
-    )
-}
-
-export type UnifyProps<AS extends keyof JSX.IntrinsicElements | JSXElementConstructor<any> = "div"> = Omit<ComponentProps<AS>, "as"> & {
-    as?: AS
-}
-
-export function Unify<AS extends keyof JSX.IntrinsicElements | JSXElementConstructor<any> = "div">(props: UnifyProps<AS>) {
-    const { as = "div", className, style, ...rest } = props
-    const { className: _className, style: _style } = useContext(UnifyConfigContext)
-
-    return createElement(as, {
-        className: clsx(_className, className),
-        style: { ..._style, ...style },
-        ...rest,
-    }) as ReactNode
-}
+"use client"
+
+import { CSSProperties, ComponentProps, FC, JSX, JSXElementConstructor, ReactNode, createContext, createElement, useContext } from "react"
+import { clsx } from "deepsea-tools"
+
+export interface UnifyConfig {
+    className?: string
+    style?: CSSProperties
+}
+
+const UnifyConfigContext = createContext<UnifyConfig>({})
+
+export interface UnifyConfigProviderProps extends UnifyConfig {
+    children?: ReactNode
+}
+
+export const UnifyConfigProvider: FC<UnifyConfigProviderProps> = ({ className, style, children }) => {
+    const { className: _className, style: _style } = useContext(UnifyConfigContext)
+
+    return (
+        <UnifyConfigContext.Provider value={{ className: clsx(_className, className), style: { ..._style, ...style } }}>{children}</UnifyConfigContext.Provider>
+    )
+}
+
+export type UnifyProps<AS extends keyof JSX.IntrinsicElements | JSXElementConstructor<any> = "div"> = Omit<ComponentProps<AS>, "as"> & {
+    as?: AS
+}
+
+export function Unify<AS extends keyof JSX.IntrinsicElements | JSXElementConstructor<any> = "div">(props: UnifyProps<AS>) {
+    const { as = "div", className, style, ...rest } = props
+    const { className: _className, style: _style } = useContext(UnifyConfigContext)
+
+    return createElement(as, {
+        className: clsx(_className, className),
+        style: { ..._style, ...style },
+        ...rest,
+    }) as ReactNode
+}