deepsea-components 5.6.0 → 5.7.1

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/InfiniteScroll.tsx"],
-  "sourcesContent": ["import { css } from \"@emotion/css\"\r\nimport { useSize } from \"ahooks\"\r\nimport { clsx } from \"deepsea-tools\"\r\nimport { ComponentProps, CSSProperties, forwardRef, MouseEvent as ReactMouseEvent, useEffect, useImperativeHandle, useRef } from \"react\"\r\n\r\nexport type InfiniteScrollProps = ComponentProps<\"div\"> & {\r\n    /**\r\n     * 滚动的方向\r\n     * @default \"vertical\"\r\n     */\r\n    direction?: \"vertical\" | \"horizontal\"\r\n    /** 渲染 children 的容器的类名 */\r\n    containerClassName?: string\r\n    /** 渲染 children 的容器的样式 */\r\n    containerStyle?: CSSProperties\r\n    /**\r\n     * 两个 children 容器之间的间距\r\n     * @default 0\r\n     */\r\n    gap?: number\r\n    /** 一个周期的时间，单位：毫秒 */\r\n    duration: number\r\n    /** 是否将 gap 的距离也加入 overflow 的计算 */\r\n    withGap?: boolean\r\n    /** 尺寸刚好相同时，是否视为溢出 */\r\n    withEqual?: boolean\r\n    /** 鼠标移入时，是否停止动画 */\r\n    pauseOnHover?: boolean\r\n}\r\n\r\n/**\r\n * 无限滚动的组件\r\n * 子元素会内置的容器中被渲染两次，首尾相连，形成无限滚动的效果\r\n * 但是，如果内部检测到并没有溢出，那么不会渲染两次，并且没有动画\r\n */\r\nexport const InfiniteScroll = forwardRef<HTMLDivElement, InfiniteScrollProps>((props, ref) => {\r\n    const { className, direction = \"vertical\", children, containerClassName, containerStyle, gap = 0, duration, withGap, withEqual, pauseOnHover, onMouseEnter, onMouseLeave, ...rest } = props\r\n\r\n    const wrapper = useRef<HTMLDivElement>(null)\r\n    const wrapperSize = useSize(wrapper)\r\n\r\n    const ele = useRef<HTMLDivElement>(null)\r\n\r\n    useImperativeHandle(ref, () => wrapper.current as HTMLDivElement, [wrapper.current])\r\n\r\n    const container = useRef<HTMLDivElement>(null)\r\n    const containerSize = useSize(container)\r\n\r\n    function bigger(containerSize: number, wrapperSize: number) {\r\n        return withEqual ? containerSize + (withGap ? gap : 0) >= wrapperSize : containerSize + (withGap ? gap : 0) > wrapperSize\r\n    }\r\n\r\n    const overflow = wrapperSize && containerSize ? (direction === \"vertical\" ? bigger(containerSize.height, wrapperSize.height) : bigger(containerSize.width, wrapperSize.width)) : false\r\n\r\n    const animation = useRef<Animation | undefined>(undefined)\r\n\r\n    useEffect(() => {\r\n        if (!wrapperSize || !containerSize || !overflow) return\r\n        animation.current = ele.current?.animate(\r\n            {\r\n                transform: direction === \"vertical\" ? [`translateY(0)`, `translateY(-${containerSize.height + gap}px)`] : [`translateX(0)`, `translateX(-${containerSize.width + gap}px)`]\r\n            },\r\n            { duration, iterations: Infinity }\r\n        )\r\n        return () => animation.current?.cancel()\r\n    }, [wrapperSize, containerSize, overflow, direction, duration])\r\n\r\n    function enter(e: ReactMouseEvent<HTMLDivElement, MouseEvent>) {\r\n        if (pauseOnHover) animation.current?.pause()\r\n        onMouseEnter?.(e)\r\n    }\r\n\r\n    function leave(e: ReactMouseEvent<HTMLDivElement, MouseEvent>) {\r\n        if (pauseOnHover) animation.current?.play()\r\n        onMouseLeave?.(e)\r\n    }\r\n\r\n    useEffect(() => {\r\n        if (!pauseOnHover && animation.current?.playState === \"paused\") animation.current?.play()\r\n    }, [animation.current, pauseOnHover])\r\n\r\n    return (\r\n        <div\r\n            ref={wrapper}\r\n            className={clsx(\r\n                css`\r\n                    position: relative;\r\n                    ${direction === \"vertical\" ? \"overflow-y: hidden;\" : \"overflow-x: hidden;\"}\r\n                `,\r\n                className\r\n            )}\r\n            onMouseEnter={enter}\r\n            onMouseLeave={leave}\r\n            {...rest}>\r\n            <div\r\n                ref={ele}\r\n                style={{\r\n                    position: \"absolute\",\r\n                    width: direction === \"vertical\" ? \"100%\" : containerSize && (overflow ? containerSize.width * 2 + gap : containerSize.width),\r\n                    height: direction === \"horizontal\" ? \"100%\" : containerSize && (overflow ? containerSize.height * 2 + gap : containerSize.width)\r\n                }}>\r\n                <div\r\n                    ref={container}\r\n                    className={clsx(\r\n                        css`\r\n                            position: absolute;\r\n                            left: 0;\r\n                            top: 0;\r\n                            ${direction === \"vertical\" ? \"width: 100%;\" : \"height: 100%;\"}\r\n                        `,\r\n                        containerClassName\r\n                    )}\r\n                    style={containerStyle}>\r\n                    {children}\r\n                </div>\r\n                {overflow && (\r\n                    <div\r\n                        ref={container}\r\n                        className={clsx(\r\n                            css`\r\n                                position: absolute;\r\n                                right: 0;\r\n                                bottom: 0;\r\n                                ${direction === \"vertical\" ? \"width: 100%;\" : \"height: 100%;\"}\r\n                            `,\r\n                            containerClassName\r\n                        )}\r\n                        style={containerStyle}>\r\n                        {children}\r\n                    </div>\r\n                )}\r\n            </div>\r\n        </div>\r\n    )\r\n})\r\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAAoB;AACpB,oBAAwB;AACxB,2BAAqB;AACrB,mBAAiI;AAgC1H,IAAM,qBAAiB,yBAAgD,CAAC,OAAO,QAAQ;AAC1F,QAAM,EAAE,WAAW,YAAY,YAAY,UAAU,oBAAoB,gBAAgB,MAAM,GAAG,UAAU,SAAS,WAAW,cAAc,cAAc,cAAc,GAAG,KAAK,IAAI;AAEtL,QAAM,cAAU,qBAAuB,IAAI;AAC3C,QAAM,kBAAc,uBAAQ,OAAO;AAEnC,QAAM,UAAM,qBAAuB,IAAI;AAEvC,wCAAoB,KAAK,MAAM,QAAQ,SAA2B,CAAC,QAAQ,OAAO,CAAC;AAEnF,QAAM,gBAAY,qBAAuB,IAAI;AAC7C,QAAM,oBAAgB,uBAAQ,SAAS;AAEvC,WAAS,OAAOA,gBAAuBC,cAAqB;AACxD,WAAO,YAAYD,kBAAiB,UAAU,MAAM,MAAMC,eAAcD,kBAAiB,UAAU,MAAM,KAAKC;AAAA,EAClH;AAEA,QAAM,WAAW,eAAe,gBAAiB,cAAc,aAAa,OAAO,cAAc,QAAQ,YAAY,MAAM,IAAI,OAAO,cAAc,OAAO,YAAY,KAAK,IAAK;AAEjL,QAAM,gBAAY,qBAA8B,MAAS;AAEzD,8BAAU,MAAM;AACZ,QAAI,CAAC,eAAe,CAAC,iBAAiB,CAAC;AAAU;AACjD,cAAU,UAAU,IAAI,SAAS;AAAA,MAC7B;AAAA,QACI,WAAW,cAAc,aAAa,CAAC,iBAAiB,eAAe,cAAc,SAAS,QAAQ,IAAI,CAAC,iBAAiB,eAAe,cAAc,QAAQ,QAAQ;AAAA,MAC7K;AAAA,MACA,EAAE,UAAU,YAAY,SAAS;AAAA,IACrC;AACA,WAAO,MAAM,UAAU,SAAS,OAAO;AAAA,EAC3C,GAAG,CAAC,aAAa,eAAe,UAAU,WAAW,QAAQ,CAAC;AAE9D,WAAS,MAAM,GAAgD;AAC3D,QAAI;AAAc,gBAAU,SAAS,MAAM;AAC3C,mBAAe,CAAC;AAAA,EACpB;AAEA,WAAS,MAAM,GAAgD;AAC3D,QAAI;AAAc,gBAAU,SAAS,KAAK;AAC1C,mBAAe,CAAC;AAAA,EACpB;AAEA,8BAAU,MAAM;AACZ,QAAI,CAAC,gBAAgB,UAAU,SAAS,cAAc;AAAU,gBAAU,SAAS,KAAK;AAAA,EAC5F,GAAG,CAAC,UAAU,SAAS,YAAY,CAAC;AAEpC,SACI;AAAA,IAAC;AAAA;AAAA,MACG,KAAK;AAAA,MACL,eAAW;AAAA,QACP;AAAA;AAAA,sBAEM,cAAc,aAAa,wBAAwB;AAAA;AAAA,QAEzD;AAAA,MACJ;AAAA,MACA,cAAc;AAAA,MACd,cAAc;AAAA,MACb,GAAG;AAAA;AAAA,IACJ;AAAA,MAAC;AAAA;AAAA,QACG,KAAK;AAAA,QACL,OAAO;AAAA,UACH,UAAU;AAAA,UACV,OAAO,cAAc,aAAa,SAAS,kBAAkB,WAAW,cAAc,QAAQ,IAAI,MAAM,cAAc;AAAA,UACtH,QAAQ,cAAc,eAAe,SAAS,kBAAkB,WAAW,cAAc,SAAS,IAAI,MAAM,cAAc;AAAA,QAC9H;AAAA;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACG,KAAK;AAAA,UACL,eAAW;AAAA,YACP;AAAA;AAAA;AAAA;AAAA,8BAIM,cAAc,aAAa,iBAAiB;AAAA;AAAA,YAElD;AAAA,UACJ;AAAA,UACA,OAAO;AAAA;AAAA,QACN;AAAA,MACL;AAAA,MACC,YACG;AAAA,QAAC;AAAA;AAAA,UACG,KAAK;AAAA,UACL,eAAW;AAAA,YACP;AAAA;AAAA;AAAA;AAAA,kCAIM,cAAc,aAAa,iBAAiB;AAAA;AAAA,YAElD;AAAA,UACJ;AAAA,UACA,OAAO;AAAA;AAAA,QACN;AAAA,MACL;AAAA,IAER;AAAA,EACJ;AAER,CAAC;",
+  "sourcesContent": ["import { css } from \"@emotion/css\"\nimport { useSize } from \"ahooks\"\nimport { clsx } from \"deepsea-tools\"\nimport { ComponentProps, CSSProperties, forwardRef, MouseEvent as ReactMouseEvent, useEffect, useImperativeHandle, useRef } from \"react\"\n\nexport type InfiniteScrollProps = ComponentProps<\"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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",
   "names": ["containerSize", "wrapperSize"]
 }

package/dist/cjs/components/InputFile.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/InputFile.tsx"],
-  "sourcesContent": ["\"use client\"\r\n\r\nimport { ButtonHTMLAttributes, ChangeEvent, Fragment, InputHTMLAttributes, MouseEvent as ReactMouseEvent, forwardRef, useRef, useState, DragEvent } from \"react\"\r\nimport { read, utils, writeFile } from \"xlsx\"\r\n\r\nexport interface InputFileDataTypes {\r\n    base64: string\r\n    text: string\r\n    arrayBuffer: ArrayBuffer\r\n    binary: string\r\n    file: File\r\n}\r\n\r\nexport type InputFileDataType = keyof InputFileDataTypes\r\n\r\nexport interface InputFileData<T> {\r\n    result: T\r\n    file: File\r\n}\r\n\r\nexport type InputFileProps = (\r\n    | {\r\n          multiple?: false\r\n          type: \"base64\" | \"text\" | \"binary\"\r\n          onChange?: (data: InputFileData<string>) => void\r\n      }\r\n    | {\r\n          multiple?: false\r\n          type: \"arrayBuffer\"\r\n          onChange?: (data: InputFileData<ArrayBuffer>) => void\r\n      }\r\n    | {\r\n          multiple?: false\r\n          type?: \"file\"\r\n          onChange?: (data: InputFileData<File>) => void\r\n      }\r\n    | {\r\n          multiple: true\r\n          type: \"base64\" | \"text\" | \"binary\"\r\n          onChange?: (data: InputFileData<string>[]) => void\r\n      }\r\n    | {\r\n          multiple: true\r\n          type: \"arrayBuffer\"\r\n          onChange?: (data: InputFileData<ArrayBuffer>[]) => void\r\n      }\r\n    | {\r\n          multiple: true\r\n          type?: \"file\"\r\n          onChange?: (data: InputFileData<File>[]) => void\r\n      }\r\n) &\r\n    Omit<InputHTMLAttributes<HTMLInputElement>, \"onChange\" | \"multiple\" | \"type\"> & {\r\n        /** 是否在捕获文件后清除 input 上的文件，默认为 false，主要区别在于如果不清除，连续两次选择同样的文件不会触发 onChange 事件，如果用于 form 表单，请设置为 flase */\r\n        clearAfterChange?: boolean\r\n    }\r\n\r\nexport async function getFileData<T extends InputFileDataType>(file: File, type: T): Promise<InputFileDataTypes[T]> {\r\n    const fileReader = new FileReader()\r\n    switch (type) {\r\n        case \"arrayBuffer\":\r\n            fileReader.readAsArrayBuffer(file)\r\n            break\r\n        case \"binary\":\r\n            fileReader.readAsBinaryString(file)\r\n            break\r\n        case \"base64\":\r\n            fileReader.readAsDataURL(file)\r\n            break\r\n        case \"text\":\r\n            fileReader.readAsText(file)\r\n            break\r\n        default:\r\n            return file as any\r\n    }\r\n    return new Promise(resolve => {\r\n        fileReader.addEventListener(\"load\", () => {\r\n            resolve(fileReader.result as any)\r\n        })\r\n    })\r\n}\r\n\r\n/** 专用于读取文件的组件 */\r\nexport const InputFile = forwardRef<HTMLInputElement, InputFileProps>((props, ref) => {\r\n    const { multiple = false, type = \"file\", onChange, disabled: inputDisabled, clearAfterChange, ...rest } = props\r\n    const [disabled, setDisabled] = useState(false)\r\n\r\n    async function onInputChange(e: ChangeEvent<HTMLInputElement>) {\r\n        const input = e.target\r\n        const { files } = input\r\n        if (!files || files.length === 0) return\r\n        setDisabled(true)\r\n        try {\r\n            if (multiple) {\r\n                const result: any[] = []\r\n                for (const file of Array.from(files)) {\r\n                    result.push({\r\n                        result: await getFileData(file, type),\r\n                        file\r\n                    })\r\n                }\r\n                onChange?.(result as any)\r\n            } else {\r\n                onChange?.({\r\n                    result: await getFileData(files[0], type),\r\n                    file: files[0]\r\n                } as any)\r\n            }\r\n        } finally {\r\n            if (clearAfterChange) input.value = \"\"\r\n            setDisabled(false)\r\n        }\r\n    }\r\n\r\n    return <input ref={ref} disabled={disabled || inputDisabled} type=\"file\" multiple={multiple} onChange={onInputChange} {...rest} />\r\n})\r\n\r\nexport type InputFileButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {\r\n    input: InputFileProps\r\n    dragFile?: boolean\r\n}\r\n\r\n/** 专用于读取文件的 button 组件 */\r\nexport const InputFileButton = forwardRef<HTMLButtonElement, InputFileButtonProps>((props, ref) => {\r\n    const { onClick: _onClick, input: inputProps, onDrop: _onDrop, onDragOver: _onDragOver, dragFile, disabled: _disabled, ...rest } = props\r\n    const { style, disabled: __disabled, multiple, onChange, type = \"file\", ...restInputProps } = inputProps\r\n    const [disabled, setDisabled] = useState(false)\r\n    const input = useRef<HTMLInputElement>(null)\r\n\r\n    function onClick(e: ReactMouseEvent<HTMLButtonElement, MouseEvent>) {\r\n        input.current?.click()\r\n        _onClick?.(e)\r\n    }\r\n\r\n    async function onDrop(e: DragEvent<HTMLButtonElement>) {\r\n        _onDrop?.(e)\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 result: any[] = []\r\n                for (const file of Array.from(files)) {\r\n                    result.push({\r\n                        result: await getFileData(file, type),\r\n                        file\r\n                    })\r\n                }\r\n                onChange?.(result as any)\r\n            } else {\r\n                onChange?.({\r\n                    result: await getFileData(files[0], type),\r\n                    file: files[0]\r\n                } as any)\r\n            }\r\n        } finally {\r\n            setDisabled(false)\r\n        }\r\n    }\r\n\r\n    function onDragOver(e: DragEvent<HTMLButtonElement>) {\r\n        _onDragOver?.(e)\r\n        if (disabled || !dragFile) return\r\n        e.preventDefault()\r\n    }\r\n\r\n    return (\r\n        <Fragment>\r\n            <InputFile\r\n                ref={input}\r\n                disabled={disabled || _disabled || __disabled}\r\n                style={{ display: \"none\", ...style }}\r\n                multiple={multiple as any}\r\n                onChange={onChange as any}\r\n                type={type as any}\r\n                {...restInputProps}\r\n            />\r\n            <button ref={ref} type=\"button\" disabled={disabled || _disabled} onClick={onClick} onDrop={onDrop} onDragOver={onDragOver} {...rest} />\r\n        </Fragment>\r\n    )\r\n})\r\n\r\nexport interface ImportExcelProps extends Omit<InputFileProps, \"multiple\" | \"onChange\" | \"accept\" | \"type\"> {\r\n    onChange?: (data: Record<string, string>[]) => void\r\n}\r\n\r\n/** 专门用于读取 excel 的组件 */\r\nexport const ImportExcel = forwardRef<HTMLInputElement, ImportExcelProps>((props, ref) => {\r\n    const { onChange, ...rest } = props\r\n\r\n    function onInputChange(data: InputFileData<ArrayBuffer>) {\r\n        const wb = read(data.result)\r\n        const result = utils.sheet_to_json<any>(wb.Sheets[wb.SheetNames[0]])\r\n        if (typeof result === \"object\") {\r\n            const $ = result.map(it => {\r\n                const _: Record<string, string> = {}\r\n                Object.keys(it)\r\n                    .filter(key => key !== \"__rowNum__\")\r\n                    .forEach(key => (_[key] = String(it[key])))\r\n                return _\r\n            })\r\n            onChange?.($)\r\n        }\r\n    }\r\n\r\n    return <InputFile ref={ref} accept=\".xlsx\" type=\"arrayBuffer\" onChange={onInputChange} {...rest} />\r\n})\r\n\r\n/** 手动导出 excel */\r\nexport function exportExcel(data: Record<string, string>[], name: string) {\r\n    const workSheet = utils.json_to_sheet(data)\r\n    const workBook = utils.book_new()\r\n    utils.book_append_sheet(workBook, workSheet)\r\n    writeFile(workBook, `${name}${name.endsWith(\".xlsx\") ? \"\" : \".xlsx\"}`)\r\n}\r\n\r\nexport interface ExportExcelProps extends ButtonHTMLAttributes<HTMLButtonElement> {\r\n    data: Record<string, string>[]\r\n    fileName: string\r\n}\r\n\r\n/** 导出 excel 的 button 组件 */\r\nexport const ExportExcel = forwardRef<HTMLButtonElement, ExportExcelProps>((props, ref) => {\r\n    const { data, fileName, onClick, ...rest } = props\r\n\r\n    function onButtonClick(e: ReactMouseEvent<HTMLButtonElement, MouseEvent>) {\r\n        exportExcel(data, fileName)\r\n        onClick?.(e)\r\n    }\r\n\r\n    return <button ref={ref} onClick={onButtonClick} {...rest} />\r\n})\r\n"],
+  "sourcesContent": ["\"use client\"\n\nimport { ButtonHTMLAttributes, ChangeEvent, DragEvent, Fragment, InputHTMLAttributes, MouseEvent as ReactMouseEvent, forwardRef, useRef, useState } from \"react\"\nimport { read, utils, writeFile } from \"xlsx\"\n\nexport interface InputFileDataTypes {\n    base64: string\n    text: string\n    arrayBuffer: ArrayBuffer\n    binary: string\n    file: File\n}\n\nexport type InputFileDataType = keyof InputFileDataTypes\n\nexport interface InputFileData<T> {\n    result: T\n    file: File\n}\n\nexport type InputFileProps = (\n    | {\n          multiple?: false\n          type: \"base64\" | \"text\" | \"binary\"\n          onChange?: (data: InputFileData<string>) => void\n      }\n    | {\n          multiple?: false\n          type: \"arrayBuffer\"\n          onChange?: (data: InputFileData<ArrayBuffer>) => void\n      }\n    | {\n          multiple?: false\n          type?: \"file\"\n          onChange?: (data: InputFileData<File>) => void\n      }\n    | {\n          multiple: true\n          type: \"base64\" | \"text\" | \"binary\"\n          onChange?: (data: InputFileData<string>[]) => void\n      }\n    | {\n          multiple: true\n          type: \"arrayBuffer\"\n          onChange?: (data: InputFileData<ArrayBuffer>[]) => void\n      }\n    | {\n          multiple: true\n          type?: \"file\"\n          onChange?: (data: InputFileData<File>[]) => void\n      }\n) &\n    Omit<InputHTMLAttributes<HTMLInputElement>, \"onChange\" | \"multiple\" | \"type\"> & {\n        /** 是否在捕获文件后清除 input 上的文件，默认为 false，主要区别在于如果不清除，连续两次选择同样的文件不会触发 onChange 事件，如果用于 form 表单，请设置为 flase */\n        clearAfterChange?: boolean\n    }\n\nexport async function getFileData<T extends InputFileDataType>(file: File, type: T): Promise<InputFileDataTypes[T]> {\n    const fileReader = new FileReader()\n    switch (type) {\n        case \"arrayBuffer\":\n            fileReader.readAsArrayBuffer(file)\n            break\n        case \"binary\":\n            fileReader.readAsBinaryString(file)\n            break\n        case \"base64\":\n            fileReader.readAsDataURL(file)\n            break\n        case \"text\":\n            fileReader.readAsText(file)\n            break\n        default:\n            return file as any\n    }\n    return new Promise(resolve => {\n        fileReader.addEventListener(\"load\", () => {\n            resolve(fileReader.result as any)\n        })\n    })\n}\n\n/** 专用于读取文件的组件 */\nexport const InputFile = forwardRef<HTMLInputElement, InputFileProps>((props, ref) => {\n    const { multiple = false, type = \"file\", onChange, disabled: inputDisabled, clearAfterChange, ...rest } = props\n    const [disabled, setDisabled] = useState(false)\n\n    async function onInputChange(e: ChangeEvent<HTMLInputElement>) {\n        const input = e.target\n        const { files } = input\n        if (!files || files.length === 0) return\n        setDisabled(true)\n        try {\n            if (multiple) {\n                const result: any[] = []\n                for (const file of Array.from(files)) {\n                    result.push({\n                        result: await getFileData(file, type),\n                        file,\n                    })\n                }\n                onChange?.(result as any)\n            } else {\n                onChange?.({\n                    result: await getFileData(files[0], type),\n                    file: files[0],\n                } as any)\n            }\n        } finally {\n            if (clearAfterChange) input.value = \"\"\n            setDisabled(false)\n        }\n    }\n\n    return <input ref={ref} disabled={disabled || inputDisabled} type=\"file\" multiple={multiple} onChange={onInputChange} {...rest} />\n})\n\nexport type InputFileButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {\n    input: InputFileProps\n    dragFile?: boolean\n}\n\n/** 专用于读取文件的 button 组件 */\nexport const InputFileButton = forwardRef<HTMLButtonElement, InputFileButtonProps>((props, ref) => {\n    const { onClick: _onClick, input: inputProps, onDrop: _onDrop, onDragOver: _onDragOver, dragFile, disabled: _disabled, ...rest } = props\n    const { style, disabled: __disabled, multiple, onChange, type = \"file\", ...restInputProps } = inputProps\n    const [disabled, setDisabled] = useState(false)\n    const input = useRef<HTMLInputElement>(null)\n\n    function onClick(e: ReactMouseEvent<HTMLButtonElement, MouseEvent>) {\n        input.current?.click()\n        _onClick?.(e)\n    }\n\n    async function onDrop(e: DragEvent<HTMLButtonElement>) {\n        _onDrop?.(e)\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 result: any[] = []\n                for (const file of Array.from(files)) {\n                    result.push({\n                        result: await getFileData(file, type),\n                        file,\n                    })\n                }\n                onChange?.(result as any)\n            } else {\n                onChange?.({\n                    result: await getFileData(files[0], type),\n                    file: files[0],\n                } as any)\n            }\n        } finally {\n            setDisabled(false)\n        }\n    }\n\n    function onDragOver(e: DragEvent<HTMLButtonElement>) {\n        _onDragOver?.(e)\n        if (disabled || !dragFile) return\n        e.preventDefault()\n    }\n\n    return (\n        <Fragment>\n            <InputFile\n                ref={input}\n                disabled={disabled || _disabled || __disabled}\n                style={{ display: \"none\", ...style }}\n                multiple={multiple as any}\n                onChange={onChange as any}\n                type={type as any}\n                {...restInputProps}\n            />\n            <button ref={ref} type=\"button\" disabled={disabled || _disabled} onClick={onClick} onDrop={onDrop} onDragOver={onDragOver} {...rest} />\n        </Fragment>\n    )\n})\n\nexport interface ImportExcelProps extends Omit<InputFileProps, \"multiple\" | \"onChange\" | \"accept\" | \"type\"> {\n    onChange?: (data: Record<string, string>[]) => void\n}\n\n/** 专门用于读取 excel 的组件 */\nexport const ImportExcel = forwardRef<HTMLInputElement, ImportExcelProps>((props, ref) => {\n    const { onChange, ...rest } = props\n\n    function onInputChange(data: InputFileData<ArrayBuffer>) {\n        const wb = read(data.result)\n        const result = utils.sheet_to_json<any>(wb.Sheets[wb.SheetNames[0]])\n        if (typeof result === \"object\") {\n            const $ = result.map(it => {\n                const _: Record<string, string> = {}\n                Object.keys(it)\n                    .filter(key => key !== \"__rowNum__\")\n                    .forEach(key => (_[key] = String(it[key])))\n                return _\n            })\n            onChange?.($)\n        }\n    }\n\n    return <InputFile ref={ref} accept=\".xlsx\" type=\"arrayBuffer\" onChange={onInputChange} {...rest} />\n})\n\n/** 手动导出 excel */\nexport function exportExcel(data: Record<string, string>[], name: string) {\n    const workSheet = utils.json_to_sheet(data)\n    const workBook = utils.book_new()\n    utils.book_append_sheet(workBook, workSheet)\n    writeFile(workBook, `${name}${name.endsWith(\".xlsx\") ? \"\" : \".xlsx\"}`)\n}\n\nexport interface ExportExcelProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n    data: Record<string, string>[]\n    fileName: string\n}\n\n/** 导出 excel 的 button 组件 */\nexport const ExportExcel = forwardRef<HTMLButtonElement, ExportExcelProps>((props, ref) => {\n    const { data, fileName, onClick, ...rest } = props\n\n    function onButtonClick(e: ReactMouseEvent<HTMLButtonElement, MouseEvent>) {\n        exportExcel(data, fileName)\n        onClick?.(e)\n    }\n\n    return <button ref={ref} onClick={onButtonClick} {...rest} />\n})\n"],
   "mappings": "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",
   "names": []
 }

package/dist/cjs/components/LoopSwiper.js

@@ -105,8 +105,29 @@ var LoopSwiper = (0, import_react.forwardRef)((props, ref) => {
       style: { display: "flex", flexDirection, gap, ...style },
       ...rest
     },
-    /* @__PURE__ */ React.createElement("div", { ref: container, style: { display: "flex", flexDirection, gap, animationName, animationTimingFunction, animationDuration, animationIterationCount } }, children),
-    /* @__PURE__ */ React.createElement("div", { style: { display: swiper ? "flex" : "none", flexDirection, gap, animationName, animationTimingFunction, animationDuration, animationIterationCount } }, children)
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        ref: container,
+        style: { display: "flex", flexDirection, gap, animationName, animationTimingFunction, animationDuration, animationIterationCount }
+      },
+      children
+    ),
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          display: swiper ? "flex" : "none",
+          flexDirection,
+          gap,
+          animationName,
+          animationTimingFunction,
+          animationDuration,
+          animationIterationCount
+        }
+      },
+      children
+    )
   );
 });
 // Annotate the CommonJS export names for ESM import in node:

package/dist/cjs/components/LoopSwiper.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/LoopSwiper.tsx"],
-  "sourcesContent": ["\"use client\"\r\n\r\nimport { css } from \"@emotion/css\"\r\nimport { clsx } from \"deepsea-tools\"\r\nimport { CSSProperties, forwardRef, HTMLAttributes, useEffect, useImperativeHandle, useRef, useState } from \"react\"\r\n\r\nexport interface LoopSwiperProps extends HTMLAttributes<HTMLDivElement> {\r\n    direction?: \"horizontal\" | \"vertical\"\r\n    reverse?: boolean\r\n    period: number\r\n    gap?: CSSProperties[\"gap\"]\r\n}\r\n\r\n/** 循环播放组件 */\r\nexport const LoopSwiper = forwardRef<HTMLDivElement, LoopSwiperProps>((props, ref) => {\r\n    const { className, style, children, direction, period, reverse, gap, ...rest } = props\r\n    const wrapper = useRef<HTMLDivElement>(null)\r\n    const container = useRef<HTMLDivElement>(null)\r\n    const [swiper, setSwiper] = useState(false)\r\n    const directionRef = useRef(direction)\r\n    directionRef.current = direction\r\n    const flexDirection: CSSProperties[\"flexDirection\"] = direction === \"vertical\" ? (reverse ? \"column-reverse\" : \"column\") : reverse ? \"row-reverse\" : \"row\"\r\n    const animationName = swiper ? (direction === \"vertical\" ? (reverse ? \"deepsea-reverse-vertical-loop-swipe\" : \"deepsea-vertical-loop-swipe\") : reverse ? \"deepsea-reverse-horizontal-loop-swipe\" : \"deepsea-horizontal-loop-swipe\") : \"none\"\r\n    const animationDuration = `${period}ms`\r\n    const animationTimingFunction = \"linear\"\r\n    const animationIterationCount = \"infinite\"\r\n\r\n    useImperativeHandle(ref, () => wrapper.current!, [])\r\n\r\n    useEffect(() => {\r\n        const wrapperEle = wrapper.current!\r\n        const containerEle = container.current!\r\n        let wrapperWidth = 0\r\n        let wrapperHeight = 0\r\n        let containerWidth = 0\r\n        let containerHeight = 0\r\n        const observer = new ResizeObserver(entries => {\r\n            entries.forEach(entry => {\r\n                if (entry.target === wrapperEle) {\r\n                    wrapperWidth = entry.contentRect.width\r\n                    wrapperHeight = entry.contentRect.height\r\n                } else if (entry.target === containerEle) {\r\n                    containerWidth = entry.contentRect.width\r\n                    containerHeight = entry.contentRect.height\r\n                }\r\n            })\r\n            setSwiper(directionRef.current === \"vertical\" ? containerHeight > wrapperHeight : containerWidth > wrapperWidth)\r\n        })\r\n        observer.observe(wrapperEle)\r\n        observer.observe(containerEle)\r\n    }, [])\r\n\r\n    return (\r\n        <div\r\n            ref={wrapper}\r\n            className={clsx(\r\n                css`\r\n                    @keyframes deepsea-horizontal-loop-swipe {\r\n                        from {\r\n                            transform: translateX(0);\r\n                        }\r\n                        to {\r\n                            transform: translateX(-100%);\r\n                        }\r\n                    }\r\n                    @keyframes deepsea-reverse-horizontal-loop-swipe {\r\n                        from {\r\n                            transform: translateX(0);\r\n                        }\r\n                        to {\r\n                            transform: translateX(100%);\r\n                        }\r\n                    }\r\n                    @keyframes deepsea-vertical-loop-swipe {\r\n                        from {\r\n                            transform: translateY(0);\r\n                        }\r\n                        to {\r\n                            transform: translateY(-100%);\r\n                        }\r\n                    }\r\n                    @keyframes deepsea-reverse-vertical-loop-swipe {\r\n                        from {\r\n                            transform: translateY(0);\r\n                        }\r\n                        to {\r\n                            transform: translateY(100%);\r\n                        }\r\n                    }\r\n                `,\r\n                className\r\n            )}\r\n            style={{ display: \"flex\", flexDirection, gap, ...style }}\r\n            {...rest}>\r\n            <div ref={container} style={{ display: \"flex\", flexDirection, gap, animationName, animationTimingFunction, animationDuration, animationIterationCount }}>\r\n                {children}\r\n            </div>\r\n            <div style={{ display: swiper ? \"flex\" : \"none\", flexDirection, gap, animationName, animationTimingFunction, animationDuration, animationIterationCount }}>{children}</div>\r\n        </div>\r\n    )\r\n})\r\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,iBAAoB;AACpB,2BAAqB;AACrB,mBAA4G;AAUrG,IAAM,iBAAa,yBAA4C,CAAC,OAAO,QAAQ;AAClF,QAAM,EAAE,WAAW,OAAO,UAAU,WAAW,QAAQ,SAAS,KAAK,GAAG,KAAK,IAAI;AACjF,QAAM,cAAU,qBAAuB,IAAI;AAC3C,QAAM,gBAAY,qBAAuB,IAAI;AAC7C,QAAM,CAAC,QAAQ,SAAS,QAAI,uBAAS,KAAK;AAC1C,QAAM,mBAAe,qBAAO,SAAS;AACrC,eAAa,UAAU;AACvB,QAAM,gBAAgD,cAAc,aAAc,UAAU,mBAAmB,WAAY,UAAU,gBAAgB;AACrJ,QAAM,gBAAgB,SAAU,cAAc,aAAc,UAAU,wCAAwC,gCAAiC,UAAU,0CAA0C,kCAAmC;AACtO,QAAM,oBAAoB,GAAG;AAC7B,QAAM,0BAA0B;AAChC,QAAM,0BAA0B;AAEhC,wCAAoB,KAAK,MAAM,QAAQ,SAAU,CAAC,CAAC;AAEnD,8BAAU,MAAM;AACZ,UAAM,aAAa,QAAQ;AAC3B,UAAM,eAAe,UAAU;AAC/B,QAAI,eAAe;AACnB,QAAI,gBAAgB;AACpB,QAAI,iBAAiB;AACrB,QAAI,kBAAkB;AACtB,UAAM,WAAW,IAAI,eAAe,aAAW;AAC3C,cAAQ,QAAQ,WAAS;AACrB,YAAI,MAAM,WAAW,YAAY;AAC7B,yBAAe,MAAM,YAAY;AACjC,0BAAgB,MAAM,YAAY;AAAA,QACtC,WAAW,MAAM,WAAW,cAAc;AACtC,2BAAiB,MAAM,YAAY;AACnC,4BAAkB,MAAM,YAAY;AAAA,QACxC;AAAA,MACJ,CAAC;AACD,gBAAU,aAAa,YAAY,aAAa,kBAAkB,gBAAgB,iBAAiB,YAAY;AAAA,IACnH,CAAC;AACD,aAAS,QAAQ,UAAU;AAC3B,aAAS,QAAQ,YAAY;AAAA,EACjC,GAAG,CAAC,CAAC;AAEL,SACI;AAAA,IAAC;AAAA;AAAA,MACG,KAAK;AAAA,MACL,eAAW;AAAA,QACP;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAkCA;AAAA,MACJ;AAAA,MACA,OAAO,EAAE,SAAS,QAAQ,eAAe,KAAK,GAAG,MAAM;AAAA,MACtD,GAAG;AAAA;AAAA,IACJ,oCAAC,SAAI,KAAK,WAAW,OAAO,EAAE,SAAS,QAAQ,eAAe,KAAK,eAAe,yBAAyB,mBAAmB,wBAAwB,KACjJ,QACL;AAAA,IACA,oCAAC,SAAI,OAAO,EAAE,SAAS,SAAS,SAAS,QAAQ,eAAe,KAAK,eAAe,yBAAyB,mBAAmB,wBAAwB,KAAI,QAAS;AAAA,EACzK;AAER,CAAC;",
+  "sourcesContent": ["\"use client\"\n\nimport { css } from \"@emotion/css\"\nimport { clsx } from \"deepsea-tools\"\nimport { CSSProperties, forwardRef, HTMLAttributes, useEffect, useImperativeHandle, useRef, useState } from \"react\"\n\nexport interface LoopSwiperProps extends HTMLAttributes<HTMLDivElement> {\n    direction?: \"horizontal\" | \"vertical\"\n    reverse?: boolean\n    period: number\n    gap?: CSSProperties[\"gap\"]\n}\n\n/** 循环播放组件 */\nexport const LoopSwiper = forwardRef<HTMLDivElement, LoopSwiperProps>((props, ref) => {\n    const { className, style, children, direction, period, reverse, gap, ...rest } = props\n    const wrapper = useRef<HTMLDivElement>(null)\n    const container = useRef<HTMLDivElement>(null)\n    const [swiper, setSwiper] = useState(false)\n    const directionRef = useRef(direction)\n    directionRef.current = direction\n    const flexDirection: CSSProperties[\"flexDirection\"] = direction === \"vertical\" ? (reverse ? \"column-reverse\" : \"column\") : reverse ? \"row-reverse\" : \"row\"\n    const animationName = swiper\n        ? direction === \"vertical\"\n            ? reverse\n                ? \"deepsea-reverse-vertical-loop-swipe\"\n                : \"deepsea-vertical-loop-swipe\"\n            : reverse\n              ? \"deepsea-reverse-horizontal-loop-swipe\"\n              : \"deepsea-horizontal-loop-swipe\"\n        : \"none\"\n    const animationDuration = `${period}ms`\n    const animationTimingFunction = \"linear\"\n    const animationIterationCount = \"infinite\"\n\n    useImperativeHandle(ref, () => wrapper.current!, [])\n\n    useEffect(() => {\n        const wrapperEle = wrapper.current!\n        const containerEle = container.current!\n        let wrapperWidth = 0\n        let wrapperHeight = 0\n        let containerWidth = 0\n        let containerHeight = 0\n        const observer = new ResizeObserver(entries => {\n            entries.forEach(entry => {\n                if (entry.target === wrapperEle) {\n                    wrapperWidth = entry.contentRect.width\n                    wrapperHeight = entry.contentRect.height\n                } else if (entry.target === containerEle) {\n                    containerWidth = entry.contentRect.width\n                    containerHeight = entry.contentRect.height\n                }\n            })\n            setSwiper(directionRef.current === \"vertical\" ? containerHeight > wrapperHeight : containerWidth > wrapperWidth)\n        })\n        observer.observe(wrapperEle)\n        observer.observe(containerEle)\n    }, [])\n\n    return (\n        <div\n            ref={wrapper}\n            className={clsx(\n                css`\n                    @keyframes deepsea-horizontal-loop-swipe {\n                        from {\n                            transform: translateX(0);\n                        }\n                        to {\n                            transform: translateX(-100%);\n                        }\n                    }\n                    @keyframes deepsea-reverse-horizontal-loop-swipe {\n                        from {\n                            transform: translateX(0);\n                        }\n                        to {\n                            transform: translateX(100%);\n                        }\n                    }\n                    @keyframes deepsea-vertical-loop-swipe {\n                        from {\n                            transform: translateY(0);\n                        }\n                        to {\n                            transform: translateY(-100%);\n                        }\n                    }\n                    @keyframes deepsea-reverse-vertical-loop-swipe {\n                        from {\n                            transform: translateY(0);\n                        }\n                        to {\n                            transform: translateY(100%);\n                        }\n                    }\n                `,\n                className,\n            )}\n            style={{ display: \"flex\", flexDirection, gap, ...style }}\n            {...rest}\n        >\n            <div\n                ref={container}\n                style={{ display: \"flex\", flexDirection, gap, animationName, animationTimingFunction, animationDuration, animationIterationCount }}\n            >\n                {children}\n            </div>\n            <div\n                style={{\n                    display: swiper ? \"flex\" : \"none\",\n                    flexDirection,\n                    gap,\n                    animationName,\n                    animationTimingFunction,\n                    animationDuration,\n                    animationIterationCount,\n                }}\n            >\n                {children}\n            </div>\n        </div>\n    )\n})\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,iBAAoB;AACpB,2BAAqB;AACrB,mBAA4G;AAUrG,IAAM,iBAAa,yBAA4C,CAAC,OAAO,QAAQ;AAClF,QAAM,EAAE,WAAW,OAAO,UAAU,WAAW,QAAQ,SAAS,KAAK,GAAG,KAAK,IAAI;AACjF,QAAM,cAAU,qBAAuB,IAAI;AAC3C,QAAM,gBAAY,qBAAuB,IAAI;AAC7C,QAAM,CAAC,QAAQ,SAAS,QAAI,uBAAS,KAAK;AAC1C,QAAM,mBAAe,qBAAO,SAAS;AACrC,eAAa,UAAU;AACvB,QAAM,gBAAgD,cAAc,aAAc,UAAU,mBAAmB,WAAY,UAAU,gBAAgB;AACrJ,QAAM,gBAAgB,SAChB,cAAc,aACV,UACI,wCACA,gCACJ,UACE,0CACA,kCACN;AACN,QAAM,oBAAoB,GAAG;AAC7B,QAAM,0BAA0B;AAChC,QAAM,0BAA0B;AAEhC,wCAAoB,KAAK,MAAM,QAAQ,SAAU,CAAC,CAAC;AAEnD,8BAAU,MAAM;AACZ,UAAM,aAAa,QAAQ;AAC3B,UAAM,eAAe,UAAU;AAC/B,QAAI,eAAe;AACnB,QAAI,gBAAgB;AACpB,QAAI,iBAAiB;AACrB,QAAI,kBAAkB;AACtB,UAAM,WAAW,IAAI,eAAe,aAAW;AAC3C,cAAQ,QAAQ,WAAS;AACrB,YAAI,MAAM,WAAW,YAAY;AAC7B,yBAAe,MAAM,YAAY;AACjC,0BAAgB,MAAM,YAAY;AAAA,QACtC,WAAW,MAAM,WAAW,cAAc;AACtC,2BAAiB,MAAM,YAAY;AACnC,4BAAkB,MAAM,YAAY;AAAA,QACxC;AAAA,MACJ,CAAC;AACD,gBAAU,aAAa,YAAY,aAAa,kBAAkB,gBAAgB,iBAAiB,YAAY;AAAA,IACnH,CAAC;AACD,aAAS,QAAQ,UAAU;AAC3B,aAAS,QAAQ,YAAY;AAAA,EACjC,GAAG,CAAC,CAAC;AAEL,SACI;AAAA,IAAC;AAAA;AAAA,MACG,KAAK;AAAA,MACL,eAAW;AAAA,QACP;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAkCA;AAAA,MACJ;AAAA,MACA,OAAO,EAAE,SAAS,QAAQ,eAAe,KAAK,GAAG,MAAM;AAAA,MACtD,GAAG;AAAA;AAAA,IAEJ;AAAA,MAAC;AAAA;AAAA,QACG,KAAK;AAAA,QACL,OAAO,EAAE,SAAS,QAAQ,eAAe,KAAK,eAAe,yBAAyB,mBAAmB,wBAAwB;AAAA;AAAA,MAEhI;AAAA,IACL;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACG,OAAO;AAAA,UACH,SAAS,SAAS,SAAS;AAAA,UAC3B;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACJ;AAAA;AAAA,MAEC;AAAA,IACL;AAAA,EACJ;AAER,CAAC;",
   "names": []
 }

package/dist/cjs/components/Ring.js

@@ -28,7 +28,19 @@ var Ring = (0, import_react.forwardRef)((props, ref) => {
   const { outerWidth, innerWidth, style, ...rest } = props;
   const outerRadius = outerWidth / 2;
   const innerRadius = innerWidth / 2;
-  return /* @__PURE__ */ React.createElement("div", { ref, style: { ...style, width: `${outerWidth}px`, height: `${outerWidth}px`, clipPath: `path("M0,${outerRadius} a${outerRadius},${outerRadius},0,1,0,${outerWidth},0 a${outerRadius},${outerRadius},0,1,0,-${outerWidth},0 l${outerRadius - innerRadius},0 a${innerRadius},${innerRadius},0,0,1,${innerRadius * 2},0 a${innerRadius},${innerRadius},0,0,1,-${innerRadius * 2},0 Z")` }, ...rest });
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      ref,
+      style: {
+        ...style,
+        width: `${outerWidth}px`,
+        height: `${outerWidth}px`,
+        clipPath: `path("M0,${outerRadius} a${outerRadius},${outerRadius},0,1,0,${outerWidth},0 a${outerRadius},${outerRadius},0,1,0,-${outerWidth},0 l${outerRadius - innerRadius},0 a${innerRadius},${innerRadius},0,0,1,${innerRadius * 2},0 a${innerRadius},${innerRadius},0,0,1,-${innerRadius * 2},0 Z")`
+      },
+      ...rest
+    }
+  );
 });
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/cjs/components/Ring.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/Ring.tsx"],
-  "sourcesContent": ["\"use client\"\r\n\r\nimport { forwardRef, HTMLAttributes } from \"react\"\r\n\r\nexport interface RingProps extends HTMLAttributes<HTMLDivElement> {\r\n    outerWidth: number\r\n    innerWidth: number\r\n}\r\n\r\n/** 环形组件 */\r\nexport const Ring = forwardRef<HTMLDivElement, RingProps>((props, ref) => {\r\n    const { outerWidth, innerWidth, style, ...rest } = props\r\n\r\n    const outerRadius = outerWidth / 2\r\n\r\n    const innerRadius = innerWidth / 2\r\n\r\n    return <div ref={ref} style={{ ...style, width: `${outerWidth}px`, height: `${outerWidth}px`, clipPath: `path(\"M0,${outerRadius} a${outerRadius},${outerRadius},0,1,0,${outerWidth},0 a${outerRadius},${outerRadius},0,1,0,-${outerWidth},0 l${outerRadius - innerRadius},0 a${innerRadius},${innerRadius},0,0,1,${innerRadius * 2},0 a${innerRadius},${innerRadius},0,0,1,-${innerRadius * 2},0 Z\")` }} {...rest} />\r\n})\r\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,mBAA2C;AAQpC,IAAM,WAAO,yBAAsC,CAAC,OAAO,QAAQ;AACtE,QAAM,EAAE,YAAY,YAAY,OAAO,GAAG,KAAK,IAAI;AAEnD,QAAM,cAAc,aAAa;AAEjC,QAAM,cAAc,aAAa;AAEjC,SAAO,oCAAC,SAAI,KAAU,OAAO,EAAE,GAAG,OAAO,OAAO,GAAG,gBAAgB,QAAQ,GAAG,gBAAgB,UAAU,YAAY,gBAAgB,eAAe,qBAAqB,iBAAiB,eAAe,sBAAsB,iBAAiB,cAAc,kBAAkB,eAAe,qBAAqB,cAAc,QAAQ,eAAe,sBAAsB,cAAc,UAAU,GAAI,GAAG,MAAM;AACvZ,CAAC;",
+  "sourcesContent": ["\"use client\"\n\nimport { forwardRef, HTMLAttributes } from \"react\"\n\nexport interface RingProps extends HTMLAttributes<HTMLDivElement> {\n    outerWidth: number\n    innerWidth: number\n}\n\n/** 环形组件 */\nexport const Ring = forwardRef<HTMLDivElement, RingProps>((props, ref) => {\n    const { outerWidth, innerWidth, style, ...rest } = props\n\n    const outerRadius = outerWidth / 2\n\n    const innerRadius = innerWidth / 2\n\n    return (\n        <div\n            ref={ref}\n            style={{\n                ...style,\n                width: `${outerWidth}px`,\n                height: `${outerWidth}px`,\n                clipPath: `path(\"M0,${outerRadius} a${outerRadius},${outerRadius},0,1,0,${outerWidth},0 a${outerRadius},${outerRadius},0,1,0,-${outerWidth},0 l${outerRadius - innerRadius},0 a${innerRadius},${innerRadius},0,0,1,${innerRadius * 2},0 a${innerRadius},${innerRadius},0,0,1,-${innerRadius * 2},0 Z\")`,\n            }}\n            {...rest}\n        />\n    )\n})\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,mBAA2C;AAQpC,IAAM,WAAO,yBAAsC,CAAC,OAAO,QAAQ;AACtE,QAAM,EAAE,YAAY,YAAY,OAAO,GAAG,KAAK,IAAI;AAEnD,QAAM,cAAc,aAAa;AAEjC,QAAM,cAAc,aAAa;AAEjC,SACI;AAAA,IAAC;AAAA;AAAA,MACG;AAAA,MACA,OAAO;AAAA,QACH,GAAG;AAAA,QACH,OAAO,GAAG;AAAA,QACV,QAAQ,GAAG;AAAA,QACX,UAAU,YAAY,gBAAgB,eAAe,qBAAqB,iBAAiB,eAAe,sBAAsB,iBAAiB,cAAc,kBAAkB,eAAe,qBAAqB,cAAc,QAAQ,eAAe,sBAAsB,cAAc;AAAA,MAClS;AAAA,MACC,GAAG;AAAA;AAAA,EACR;AAER,CAAC;",
   "names": []
 }

package/dist/cjs/components/Scroll.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/Scroll.tsx"],
-  "sourcesContent": ["\"use client\"\r\n\r\nimport { css } from \"@emotion/css\"\r\nimport { clsx } from \"deepsea-tools\"\r\nimport { CSSProperties, ForwardedRef, forwardRef, HTMLAttributes, useEffect, useImperativeHandle, useLayoutEffect, useRef } from \"react\"\r\nimport Scrollbar from \"smooth-scrollbar\"\r\nimport type { ScrollbarOptions, ScrollListener } from \"smooth-scrollbar/interfaces\"\r\nimport { px, transformCSSVariable } from \"../utils\"\r\nexport { default as Scrollbar } from \"smooth-scrollbar\"\r\nexport * from \"smooth-scrollbar/interfaces\"\r\n\r\nexport interface ScrollOptions extends Partial<ScrollbarOptions> {\r\n    /** 滑块宽度 */\r\n    thumbWidth?: number | string\r\n    /** 滑块圆角大小 */\r\n    thumbRadius?: number | string\r\n    /** 滑块背景颜色 */\r\n    thumbColor?: CSSProperties[\"backgroundColor\"]\r\n    /** 滚动条背景颜色 */\r\n    trackColor?: CSSProperties[\"backgroundColor\"]\r\n}\r\n\r\nexport interface ScrollProps extends HTMLAttributes<HTMLDivElement> {\r\n    /** 滚动的配置 */\r\n    options?: ScrollOptions\r\n    /** 滚动条实例 */\r\n    scrollbar?: ForwardedRef<Scrollbar>\r\n    /** 滚动条滚动事件 */\r\n    onScrollbar?: ScrollListener\r\n}\r\n\r\nexport const Scroll = forwardRef<HTMLDivElement, ScrollProps>((props, ref) => {\r\n    const { children, options, className, style, scrollbar, onScrollbar, ...rest } = props\r\n    const { thumbWidth, thumbRadius, thumbColor, trackColor, ...scrollbarOptions } = options || {}\r\n    const ele = useRef<HTMLDivElement>(null)\r\n    const bar = useRef<Scrollbar | null>(null)\r\n\r\n    useLayoutEffect(() => {\r\n        bar.current = Scrollbar.init(ele.current!, scrollbarOptions)\r\n        return () => bar.current?.destroy()\r\n    }, [])\r\n\r\n    useImperativeHandle(ref, () => ele.current!, [])\r\n\r\n    useImperativeHandle(scrollbar, () => bar.current!, [])\r\n\r\n    useEffect(() => {\r\n        if (!onScrollbar) return\r\n        bar.current?.addListener(onScrollbar)\r\n        return () => bar.current?.removeListener(onScrollbar)\r\n    }, [onScrollbar])\r\n\r\n    return (\r\n        <div\r\n            ref={ele}\r\n            className={clsx(\r\n                css`\r\n                    .scrollbar-track.scrollbar-track-x {\r\n                        ${thumbWidth !== undefined ? \"height: var(--thumb-width);\" : \"\"}\r\n                        ${trackColor !== undefined ? \"background-color: var(--track-color);\" : \"\"}\r\n                    }\r\n\r\n                    .scrollbar-thumb.scrollbar-thumb-x {\r\n                        ${thumbWidth !== undefined ? \"height: var(--thumb-width);\" : \"\"}\r\n                        ${thumbRadius !== undefined ? \"border-radius: var(--thumb-radius);\" : \"\"}\r\n                        ${thumbColor !== undefined ? \"background-color: var(--thumb-color);\" : \"\"}\r\n                    }\r\n\r\n                    .scrollbar-track.scrollbar-track-y {\r\n                        ${thumbWidth !== undefined ? \"width: var(--thumb-width);\" : \"\"}\r\n                        ${trackColor !== undefined ? \"background-color: var(--track-color);\" : \"\"}\r\n                    }\r\n\r\n                    .scrollbar-thumb.scrollbar-thumb-y {\r\n                        ${thumbWidth !== undefined ? \"width: var(--thumb-width);\" : \"\"}\r\n                        ${thumbRadius !== undefined ? \"border-radius: var(--thumb-radius);\" : \"\"}\r\n                        ${thumbColor !== undefined ? \"background-color: var(--thumb-color);\" : \"\"}\r\n                    }\r\n                `,\r\n                className\r\n            )}\r\n            style={transformCSSVariable(\r\n                {\r\n                    thumbWidth: px(thumbWidth),\r\n                    thumbRadius: px(thumbRadius),\r\n                    thumbColor,\r\n                    trackColor\r\n                },\r\n                style\r\n            )}\r\n            {...rest}>\r\n            {children}\r\n        </div>\r\n    )\r\n})\r\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,iBAAoB;AACpB,2BAAqB;AACrB,mBAAiI;AACjI,8BAAsB;AAEtB,mBAAyC;AACzC,IAAAA,2BAAqC;AACrC,2BAAc,wCATd;AA+BO,IAAM,aAAS,yBAAwC,CAAC,OAAO,QAAQ;AAC1E,QAAM,EAAE,UAAU,SAAS,WAAW,OAAO,WAAW,aAAa,GAAG,KAAK,IAAI;AACjF,QAAM,EAAE,YAAY,aAAa,YAAY,YAAY,GAAG,iBAAiB,IAAI,WAAW,CAAC;AAC7F,QAAM,UAAM,qBAAuB,IAAI;AACvC,QAAM,UAAM,qBAAyB,IAAI;AAEzC,oCAAgB,MAAM;AAClB,QAAI,UAAU,wBAAAC,QAAU,KAAK,IAAI,SAAU,gBAAgB;AAC3D,WAAO,MAAM,IAAI,SAAS,QAAQ;AAAA,EACtC,GAAG,CAAC,CAAC;AAEL,wCAAoB,KAAK,MAAM,IAAI,SAAU,CAAC,CAAC;AAE/C,wCAAoB,WAAW,MAAM,IAAI,SAAU,CAAC,CAAC;AAErD,8BAAU,MAAM;AACZ,QAAI,CAAC;AAAa;AAClB,QAAI,SAAS,YAAY,WAAW;AACpC,WAAO,MAAM,IAAI,SAAS,eAAe,WAAW;AAAA,EACxD,GAAG,CAAC,WAAW,CAAC;AAEhB,SACI;AAAA,IAAC;AAAA;AAAA,MACG,KAAK;AAAA,MACL,eAAW;AAAA,QACP;AAAA;AAAA,0BAEU,eAAe,SAAY,gCAAgC;AAAA,0BAC3D,eAAe,SAAY,0CAA0C;AAAA;AAAA;AAAA;AAAA,0BAIrE,eAAe,SAAY,gCAAgC;AAAA,0BAC3D,gBAAgB,SAAY,wCAAwC;AAAA,0BACpE,eAAe,SAAY,0CAA0C;AAAA;AAAA;AAAA;AAAA,0BAIrE,eAAe,SAAY,+BAA+B;AAAA,0BAC1D,eAAe,SAAY,0CAA0C;AAAA;AAAA;AAAA;AAAA,0BAIrE,eAAe,SAAY,+BAA+B;AAAA,0BAC1D,gBAAgB,SAAY,wCAAwC;AAAA,0BACpE,eAAe,SAAY,0CAA0C;AAAA;AAAA;AAAA,QAG/E;AAAA,MACJ;AAAA,MACA,WAAO;AAAA,QACH;AAAA,UACI,gBAAY,iBAAG,UAAU;AAAA,UACzB,iBAAa,iBAAG,WAAW;AAAA,UAC3B;AAAA,UACA;AAAA,QACJ;AAAA,QACA;AAAA,MACJ;AAAA,MACC,GAAG;AAAA;AAAA,IACH;AAAA,EACL;AAER,CAAC;",
+  "sourcesContent": ["\"use client\"\n\nimport { css } from \"@emotion/css\"\nimport { clsx } from \"deepsea-tools\"\nimport { CSSProperties, ForwardedRef, forwardRef, HTMLAttributes, useEffect, useImperativeHandle, useLayoutEffect, useRef } from \"react\"\nimport Scrollbar from \"smooth-scrollbar\"\nimport type { ScrollbarOptions, ScrollListener } from \"smooth-scrollbar/interfaces\"\nimport { px, transformCSSVariable } from \"../utils\"\nexport { default as Scrollbar } from \"smooth-scrollbar\"\nexport * from \"smooth-scrollbar/interfaces\"\n\nexport interface ScrollOptions extends Partial<ScrollbarOptions> {\n    /** 滑块宽度 */\n    thumbWidth?: number | string\n    /** 滑块圆角大小 */\n    thumbRadius?: number | string\n    /** 滑块背景颜色 */\n    thumbColor?: CSSProperties[\"backgroundColor\"]\n    /** 滚动条背景颜色 */\n    trackColor?: CSSProperties[\"backgroundColor\"]\n}\n\nexport interface ScrollProps extends HTMLAttributes<HTMLDivElement> {\n    /** 滚动的配置 */\n    options?: ScrollOptions\n    /** 滚动条实例 */\n    scrollbar?: ForwardedRef<Scrollbar>\n    /** 滚动条滚动事件 */\n    onScrollbar?: ScrollListener\n}\n\nexport const Scroll = forwardRef<HTMLDivElement, ScrollProps>((props, ref) => {\n    const { children, options, className, style, scrollbar, onScrollbar, ...rest } = props\n    const { thumbWidth, thumbRadius, thumbColor, trackColor, ...scrollbarOptions } = options || {}\n    const ele = useRef<HTMLDivElement>(null)\n    const bar = useRef<Scrollbar | null>(null)\n\n    useLayoutEffect(() => {\n        bar.current = Scrollbar.init(ele.current!, scrollbarOptions)\n        return () => bar.current?.destroy()\n    }, [])\n\n    useImperativeHandle(ref, () => ele.current!, [])\n\n    useImperativeHandle(scrollbar, () => bar.current!, [])\n\n    useEffect(() => {\n        if (!onScrollbar) return\n        bar.current?.addListener(onScrollbar)\n        return () => bar.current?.removeListener(onScrollbar)\n    }, [onScrollbar])\n\n    return (\n        <div\n            ref={ele}\n            className={clsx(\n                css`\n                    .scrollbar-track.scrollbar-track-x {\n                        ${thumbWidth !== undefined ? \"height: var(--thumb-width);\" : \"\"}\n                        ${trackColor !== undefined ? \"background-color: var(--track-color);\" : \"\"}\n                    }\n\n                    .scrollbar-thumb.scrollbar-thumb-x {\n                        ${thumbWidth !== undefined ? \"height: var(--thumb-width);\" : \"\"}\n                        ${thumbRadius !== undefined ? \"border-radius: var(--thumb-radius);\" : \"\"}\n                        ${thumbColor !== undefined ? \"background-color: var(--thumb-color);\" : \"\"}\n                    }\n\n                    .scrollbar-track.scrollbar-track-y {\n                        ${thumbWidth !== undefined ? \"width: var(--thumb-width);\" : \"\"}\n                        ${trackColor !== undefined ? \"background-color: var(--track-color);\" : \"\"}\n                    }\n\n                    .scrollbar-thumb.scrollbar-thumb-y {\n                        ${thumbWidth !== undefined ? \"width: var(--thumb-width);\" : \"\"}\n                        ${thumbRadius !== undefined ? \"border-radius: var(--thumb-radius);\" : \"\"}\n                        ${thumbColor !== undefined ? \"background-color: var(--thumb-color);\" : \"\"}\n                    }\n                `,\n                className,\n            )}\n            style={transformCSSVariable(\n                {\n                    thumbWidth: px(thumbWidth),\n                    thumbRadius: px(thumbRadius),\n                    thumbColor,\n                    trackColor,\n                },\n                style,\n            )}\n            {...rest}\n        >\n            {children}\n        </div>\n    )\n})\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,iBAAoB;AACpB,2BAAqB;AACrB,mBAAiI;AACjI,8BAAsB;AAEtB,mBAAyC;AACzC,IAAAA,2BAAqC;AACrC,2BAAc,wCATd;AA+BO,IAAM,aAAS,yBAAwC,CAAC,OAAO,QAAQ;AAC1E,QAAM,EAAE,UAAU,SAAS,WAAW,OAAO,WAAW,aAAa,GAAG,KAAK,IAAI;AACjF,QAAM,EAAE,YAAY,aAAa,YAAY,YAAY,GAAG,iBAAiB,IAAI,WAAW,CAAC;AAC7F,QAAM,UAAM,qBAAuB,IAAI;AACvC,QAAM,UAAM,qBAAyB,IAAI;AAEzC,oCAAgB,MAAM;AAClB,QAAI,UAAU,wBAAAC,QAAU,KAAK,IAAI,SAAU,gBAAgB;AAC3D,WAAO,MAAM,IAAI,SAAS,QAAQ;AAAA,EACtC,GAAG,CAAC,CAAC;AAEL,wCAAoB,KAAK,MAAM,IAAI,SAAU,CAAC,CAAC;AAE/C,wCAAoB,WAAW,MAAM,IAAI,SAAU,CAAC,CAAC;AAErD,8BAAU,MAAM;AACZ,QAAI,CAAC;AAAa;AAClB,QAAI,SAAS,YAAY,WAAW;AACpC,WAAO,MAAM,IAAI,SAAS,eAAe,WAAW;AAAA,EACxD,GAAG,CAAC,WAAW,CAAC;AAEhB,SACI;AAAA,IAAC;AAAA;AAAA,MACG,KAAK;AAAA,MACL,eAAW;AAAA,QACP;AAAA;AAAA,0BAEU,eAAe,SAAY,gCAAgC;AAAA,0BAC3D,eAAe,SAAY,0CAA0C;AAAA;AAAA;AAAA;AAAA,0BAIrE,eAAe,SAAY,gCAAgC;AAAA,0BAC3D,gBAAgB,SAAY,wCAAwC;AAAA,0BACpE,eAAe,SAAY,0CAA0C;AAAA;AAAA;AAAA;AAAA,0BAIrE,eAAe,SAAY,+BAA+B;AAAA,0BAC1D,eAAe,SAAY,0CAA0C;AAAA;AAAA;AAAA;AAAA,0BAIrE,eAAe,SAAY,+BAA+B;AAAA,0BAC1D,gBAAgB,SAAY,wCAAwC;AAAA,0BACpE,eAAe,SAAY,0CAA0C;AAAA;AAAA;AAAA,QAG/E;AAAA,MACJ;AAAA,MACA,WAAO;AAAA,QACH;AAAA,UACI,gBAAY,iBAAG,UAAU;AAAA,UACzB,iBAAa,iBAAG,WAAW;AAAA,UAC3B;AAAA,UACA;AAAA,QACJ;AAAA,QACA;AAAA,MACJ;AAAA,MACC,GAAG;AAAA;AAAA,IAEH;AAAA,EACL;AAER,CAAC;",
   "names": ["import_smooth_scrollbar", "Scrollbar"]
 }

package/dist/cjs/components/SectionRing.js

@@ -37,7 +37,9 @@ var SectionRing = (props) => {
         ...style,
         width: o * 2,
         height: o * 2,
-        clipPath: `path("${Array(c).fill(0).map((it, idx) => `${arc(o, idx * (a + s), idx * (a + s) + a)} ${arc(i, idx * (a + s) + a, idx * (a + s), { line: true, anticlockwise: true })}`).join(" ")} Z")`
+        clipPath: `path("${Array(c).fill(0).map(
+          (it, idx) => `${arc(o, idx * (a + s), idx * (a + s) + a)} ${arc(i, idx * (a + s) + a, idx * (a + s), { line: true, anticlockwise: true })}`
+        ).join(" ")} Z")`
       },
       ...rest
     }

package/dist/cjs/components/SectionRing.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/SectionRing.tsx"],
-  "sourcesContent": ["\"use client\"\r\n\r\nimport { DrawArcOptions, drawArc } from \"deepsea-tools\"\r\nimport { FC, HTMLAttributes } from \"react\"\r\n\r\nexport interface SectionRingProps extends HTMLAttributes<HTMLDivElement> {\r\n    outerRadius: number\r\n    innerRadius: number\r\n    count: number\r\n    angel: number\r\n}\r\n\r\nexport const SectionRing: FC<SectionRingProps> = props => {\r\n    const { outerRadius: o, innerRadius: i, count: c, angel: a, style, ...rest } = props\r\n\r\n    const s = (Math.PI * 2) / c - a\r\n\r\n    function arc(radius: number, startAngle: number, endAngle: number, options: DrawArcOptions = {}) {\r\n        return drawArc(o, o, radius, startAngle, endAngle, options)\r\n    }\r\n\r\n    return (\r\n        <div\r\n            style={{\r\n                ...style,\r\n                width: o * 2,\r\n                height: o * 2,\r\n                clipPath: `path(\"${Array(c)\r\n                    .fill(0)\r\n                    .map((it, idx) => `${arc(o, idx * (a + s), idx * (a + s) + a)} ${arc(i, idx * (a + s) + a, idx * (a + s), { line: true, anticlockwise: true })}`)\r\n                    .join(\" \")} Z\")`\r\n            }}\r\n            {...rest}\r\n        />\r\n    )\r\n}\r\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,2BAAwC;AAUjC,IAAM,cAAoC,WAAS;AACtD,QAAM,EAAE,aAAa,GAAG,aAAa,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,KAAK,IAAI;AAE/E,QAAM,IAAK,KAAK,KAAK,IAAK,IAAI;AAE9B,WAAS,IAAI,QAAgB,YAAoB,UAAkB,UAA0B,CAAC,GAAG;AAC7F,eAAO,8BAAQ,GAAG,GAAG,QAAQ,YAAY,UAAU,OAAO;AAAA,EAC9D;AAEA,SACI;AAAA,IAAC;AAAA;AAAA,MACG,OAAO;AAAA,QACH,GAAG;AAAA,QACH,OAAO,IAAI;AAAA,QACX,QAAQ,IAAI;AAAA,QACZ,UAAU,SAAS,MAAM,CAAC,EACrB,KAAK,CAAC,EACN,IAAI,CAAC,IAAI,QAAQ,GAAG,IAAI,GAAG,OAAO,IAAI,IAAI,OAAO,IAAI,KAAK,CAAC,KAAK,IAAI,GAAG,OAAO,IAAI,KAAK,GAAG,OAAO,IAAI,IAAI,EAAE,MAAM,MAAM,eAAe,KAAK,CAAC,GAAG,EAC/I,KAAK,GAAG;AAAA,MACjB;AAAA,MACC,GAAG;AAAA;AAAA,EACR;AAER;",
+  "sourcesContent": ["\"use client\"\n\nimport { DrawArcOptions, drawArc } from \"deepsea-tools\"\nimport { FC, HTMLAttributes } from \"react\"\n\nexport interface SectionRingProps extends HTMLAttributes<HTMLDivElement> {\n    outerRadius: number\n    innerRadius: number\n    count: number\n    angel: number\n}\n\nexport const SectionRing: FC<SectionRingProps> = props => {\n    const { outerRadius: o, innerRadius: i, count: c, angel: a, style, ...rest } = props\n\n    const s = (Math.PI * 2) / c - a\n\n    function arc(radius: number, startAngle: number, endAngle: number, options: DrawArcOptions = {}) {\n        return drawArc(o, o, radius, startAngle, endAngle, options)\n    }\n\n    return (\n        <div\n            style={{\n                ...style,\n                width: o * 2,\n                height: o * 2,\n                clipPath: `path(\"${Array(c)\n                    .fill(0)\n                    .map(\n                        (it, idx) =>\n                            `${arc(o, idx * (a + s), idx * (a + s) + a)} ${arc(i, idx * (a + s) + a, idx * (a + s), { line: true, anticlockwise: true })}`,\n                    )\n                    .join(\" \")} Z\")`,\n            }}\n            {...rest}\n        />\n    )\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,2BAAwC;AAUjC,IAAM,cAAoC,WAAS;AACtD,QAAM,EAAE,aAAa,GAAG,aAAa,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,KAAK,IAAI;AAE/E,QAAM,IAAK,KAAK,KAAK,IAAK,IAAI;AAE9B,WAAS,IAAI,QAAgB,YAAoB,UAAkB,UAA0B,CAAC,GAAG;AAC7F,eAAO,8BAAQ,GAAG,GAAG,QAAQ,YAAY,UAAU,OAAO;AAAA,EAC9D;AAEA,SACI;AAAA,IAAC;AAAA;AAAA,MACG,OAAO;AAAA,QACH,GAAG;AAAA,QACH,OAAO,IAAI;AAAA,QACX,QAAQ,IAAI;AAAA,QACZ,UAAU,SAAS,MAAM,CAAC,EACrB,KAAK,CAAC,EACN;AAAA,UACG,CAAC,IAAI,QACD,GAAG,IAAI,GAAG,OAAO,IAAI,IAAI,OAAO,IAAI,KAAK,CAAC,KAAK,IAAI,GAAG,OAAO,IAAI,KAAK,GAAG,OAAO,IAAI,IAAI,EAAE,MAAM,MAAM,eAAe,KAAK,CAAC;AAAA,QACnI,EACC,KAAK,GAAG;AAAA,MACjB;AAAA,MACC,GAAG;AAAA;AAAA,EACR;AAER;",
   "names": []
 }

package/dist/cjs/components/Skeleton.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/Skeleton.tsx"],
-  "sourcesContent": ["\"use client\"\r\n\r\nimport { css } from \"@emotion/css\"\r\nimport { clsx } from \"deepsea-tools\"\r\nimport { forwardRef, HTMLAttributes } from \"react\"\r\n\r\nexport interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {\r\n    loading?: boolean\r\n}\r\n\r\nexport const Skeleton = forwardRef<HTMLDivElement, SkeletonProps>((props, ref) => {\r\n    let { className, loading, children, ...rest } = props\r\n\r\n    loading ??= children === undefined || children === null\r\n\r\n    return (\r\n        <div\r\n            ref={ref}\r\n            className={clsx(\r\n                css`\r\n                    @keyframes shimmer {\r\n                        0% {\r\n                            background-position: -400px 0px;\r\n                        }\r\n                        100% {\r\n                            background-position: 400px 0px;\r\n                        }\r\n                    }\r\n                `,\r\n                loading &&\r\n                    css`\r\n                        background-image: linear-gradient(to right, rgba(0, 0, 0, 0.067) 8%, rgba(0, 0, 0, 0.133) 18%, rgba(0, 0, 0, 0.067) 33%);\r\n                        animation-duration: 1s;\r\n                        animation-fill-mode: forwards;\r\n                        animation-iteration-count: infinite;\r\n                        animation-name: shimmer;\r\n                        animation-timing-function: linear;\r\n                        background-size: 800px 104px;\r\n                    `,\r\n                className\r\n            )}\r\n            {...rest}>\r\n            {children}\r\n        </div>\r\n    )\r\n})\r\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,iBAAoB;AACpB,2BAAqB;AACrB,mBAA2C;AAMpC,IAAM,eAAW,yBAA0C,CAAC,OAAO,QAAQ;AAC9E,MAAI,EAAE,WAAW,SAAS,UAAU,GAAG,KAAK,IAAI;AAEhD,cAAY,aAAa,UAAa,aAAa;AAEnD,SACI;AAAA,IAAC;AAAA;AAAA,MACG;AAAA,MACA,eAAW;AAAA,QACP;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAUA,WACI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QASJ;AAAA,MACJ;AAAA,MACC,GAAG;AAAA;AAAA,IACH;AAAA,EACL;AAER,CAAC;",
+  "sourcesContent": ["\"use client\"\n\nimport { css } from \"@emotion/css\"\nimport { clsx } from \"deepsea-tools\"\nimport { forwardRef, HTMLAttributes } from \"react\"\n\nexport interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {\n    loading?: boolean\n}\n\nexport const Skeleton = forwardRef<HTMLDivElement, SkeletonProps>((props, ref) => {\n    let { className, loading, children, ...rest } = props\n\n    loading ??= children === undefined || children === null\n\n    return (\n        <div\n            ref={ref}\n            className={clsx(\n                css`\n                    @keyframes shimmer {\n                        0% {\n                            background-position: -400px 0px;\n                        }\n                        100% {\n                            background-position: 400px 0px;\n                        }\n                    }\n                `,\n                loading &&\n                    css`\n                        background-image: linear-gradient(to right, rgba(0, 0, 0, 0.067) 8%, rgba(0, 0, 0, 0.133) 18%, rgba(0, 0, 0, 0.067) 33%);\n                        animation-duration: 1s;\n                        animation-fill-mode: forwards;\n                        animation-iteration-count: infinite;\n                        animation-name: shimmer;\n                        animation-timing-function: linear;\n                        background-size: 800px 104px;\n                    `,\n                className,\n            )}\n            {...rest}\n        >\n            {children}\n        </div>\n    )\n})\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,iBAAoB;AACpB,2BAAqB;AACrB,mBAA2C;AAMpC,IAAM,eAAW,yBAA0C,CAAC,OAAO,QAAQ;AAC9E,MAAI,EAAE,WAAW,SAAS,UAAU,GAAG,KAAK,IAAI;AAEhD,cAAY,aAAa,UAAa,aAAa;AAEnD,SACI;AAAA,IAAC;AAAA;AAAA,MACG;AAAA,MACA,eAAW;AAAA,QACP;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAUA,WACI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QASJ;AAAA,MACJ;AAAA,MACC,GAAG;AAAA;AAAA,IAEH;AAAA,EACL;AAER,CAAC;",
   "names": []
 }

package/dist/cjs/components/Title.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/Title.tsx"],
-  "sourcesContent": ["import { ComponentProps, forwardRef, useImperativeHandle, useLayoutEffect, useRef } from \"react\"\r\nimport { createPortal } from \"react-dom\"\r\nimport { getReactVersion } from \"../utils/getReactVersion\"\r\n\r\nexport type TitleProps = ComponentProps<\"title\">\r\n\r\nconst [major] = getReactVersion()\r\n\r\nexport const Title = forwardRef<HTMLTitleElement, TitleProps>((props, ref) => {\r\n\r\n    if (major >= 19) return <title ref={ref} {...props} />\r\n\r\n    const ele = useRef<HTMLTitleElement>(null)\r\n\r\n    useImperativeHandle(ref, () => ele.current as HTMLTitleElement, [ele.current])\r\n\r\n    useLayoutEffect(() => {\r\n        const title = document.head.querySelector(\"title\")\r\n        if (title === ele.current) return\r\n        document.head.insertBefore(ele.current as HTMLTitleElement, title)\r\n    }, [])\r\n\r\n    return createPortal(<title ref={ele} {...props} />, document.head)\r\n})\r\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAyF;AACzF,uBAA6B;AAC7B,6BAAgC;AAIhC,IAAM,CAAC,KAAK,QAAI,wCAAgB;AAEzB,IAAM,YAAQ,yBAAyC,CAAC,OAAO,QAAQ;AAE1E,MAAI,SAAS;AAAI,WAAO,oCAAC,WAAM,KAAW,GAAG,OAAO;AAEpD,QAAM,UAAM,qBAAyB,IAAI;AAEzC,wCAAoB,KAAK,MAAM,IAAI,SAA6B,CAAC,IAAI,OAAO,CAAC;AAE7E,oCAAgB,MAAM;AAClB,UAAM,QAAQ,SAAS,KAAK,cAAc,OAAO;AACjD,QAAI,UAAU,IAAI;AAAS;AAC3B,aAAS,KAAK,aAAa,IAAI,SAA6B,KAAK;AAAA,EACrE,GAAG,CAAC,CAAC;AAEL,aAAO,+BAAa,oCAAC,WAAM,KAAK,KAAM,GAAG,OAAO,GAAI,SAAS,IAAI;AACrE,CAAC;",
+  "sourcesContent": ["import { ComponentProps, forwardRef, useImperativeHandle, useLayoutEffect, useRef } from \"react\"\nimport { createPortal } from \"react-dom\"\nimport { getReactVersion } from \"../utils/getReactVersion\"\n\nexport type TitleProps = ComponentProps<\"title\">\n\nconst [major] = getReactVersion()\n\nexport const Title = forwardRef<HTMLTitleElement, TitleProps>((props, ref) => {\n    if (major >= 19) return <title ref={ref} {...props} />\n\n    const ele = useRef<HTMLTitleElement>(null)\n\n    useImperativeHandle(ref, () => ele.current as HTMLTitleElement, [ele.current])\n\n    useLayoutEffect(() => {\n        const title = document.head.querySelector(\"title\")\n        if (title === ele.current) return\n        document.head.insertBefore(ele.current as HTMLTitleElement, title)\n    }, [])\n\n    return createPortal(<title ref={ele} {...props} />, document.head)\n})\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAyF;AACzF,uBAA6B;AAC7B,6BAAgC;AAIhC,IAAM,CAAC,KAAK,QAAI,wCAAgB;AAEzB,IAAM,YAAQ,yBAAyC,CAAC,OAAO,QAAQ;AAC1E,MAAI,SAAS;AAAI,WAAO,oCAAC,WAAM,KAAW,GAAG,OAAO;AAEpD,QAAM,UAAM,qBAAyB,IAAI;AAEzC,wCAAoB,KAAK,MAAM,IAAI,SAA6B,CAAC,IAAI,OAAO,CAAC;AAE7E,oCAAgB,MAAM;AAClB,UAAM,QAAQ,SAAS,KAAK,cAAc,OAAO;AACjD,QAAI,UAAU,IAAI;AAAS;AAC3B,aAAS,KAAK,aAAa,IAAI,SAA6B,KAAK;AAAA,EACrE,GAAG,CAAC,CAAC;AAEL,aAAO,+BAAa,oCAAC,WAAM,KAAK,KAAM,GAAG,OAAO,GAAI,SAAS,IAAI;AACrE,CAAC;",
   "names": []
 }

package/dist/cjs/components/TransitionBox.js

@@ -35,7 +35,15 @@ var TransitionBox = (0, import_react.forwardRef)((props, ref) => {
   (0, import_react.useEffect)(() => {
     setCount((count2) => Math.min(count2 + 1, 3));
   }, [width, height]);
-  const outerStyle = { transitionProperty: count === 3 ? [horizontal && "width", vertical && "height"].filter(Boolean).join(", ") : void 0, transitionDuration: count === 3 ? `${time}ms` : void 0, width, height, overflow: "hidden", position: "relative", ...style };
+  const outerStyle = {
+    transitionProperty: count === 3 ? [horizontal && "width", vertical && "height"].filter(Boolean).join(", ") : void 0,
+    transitionDuration: count === 3 ? `${time}ms` : void 0,
+    width,
+    height,
+    overflow: "hidden",
+    position: "relative",
+    ...style
+  };
   return /* @__PURE__ */ React.createElement("div", { ref, style: outerStyle, ...rest }, /* @__PURE__ */ React.createElement("div", { className: containerClassName, style: { position: "absolute", ...containerStyle }, ref: container }, children));
 });
 // Annotate the CommonJS export names for ESM import in node:

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/TransitionBox.tsx"],
-  "sourcesContent": ["\"use client\"\r\n\r\nimport { useSize } from \"ahooks\"\r\nimport { CSSProperties, FC, forwardRef, HTMLAttributes, useEffect, useRef, useState } from \"react\"\r\n\r\nexport interface TransitionBoxProps extends HTMLAttributes<HTMLDivElement> {\r\n    containerClassName?: string\r\n    containerStyle?: CSSProperties\r\n    vertical?: boolean\r\n    horizontal?: boolean\r\n    time?: number\r\n}\r\n\r\n/** 尺寸渐变的组件 */\r\nexport const TransitionBox: FC<TransitionBoxProps> = forwardRef<HTMLDivElement, TransitionBoxProps>((props, ref) => {\r\n    const { style, containerClassName, containerStyle, children, vertical = true, horizontal = true, time = 3000, ...rest } = props\r\n    const container = useRef<HTMLDivElement>(null)\r\n    const size = useSize(container)\r\n    const width = size?.width ?? 0\r\n    const height = size?.height ?? 0\r\n    const [count, setCount] = useState(0)\r\n\r\n    useEffect(() => {\r\n        setCount(count => Math.min(count + 1, 3))\r\n    }, [width, height])\r\n\r\n    const outerStyle: CSSProperties = { transitionProperty: count === 3 ? [horizontal && \"width\", vertical && \"height\"].filter(Boolean).join(\", \") : undefined, transitionDuration: count === 3 ? `${time}ms` : undefined, width, height, overflow: \"hidden\", position: \"relative\", ...style }\r\n\r\n    return (\r\n        <div ref={ref} style={outerStyle} {...rest}>\r\n            <div className={containerClassName} style={{ position: \"absolute\", ...containerStyle }} ref={container}>\r\n                {children}\r\n            </div>\r\n        </div>\r\n    )\r\n})\r\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,oBAAwB;AACxB,mBAA2F;AAWpF,IAAM,oBAAwC,yBAA+C,CAAC,OAAO,QAAQ;AAChH,QAAM,EAAE,OAAO,oBAAoB,gBAAgB,UAAU,WAAW,MAAM,aAAa,MAAM,OAAO,KAAM,GAAG,KAAK,IAAI;AAC1H,QAAM,gBAAY,qBAAuB,IAAI;AAC7C,QAAM,WAAO,uBAAQ,SAAS;AAC9B,QAAM,QAAQ,MAAM,SAAS;AAC7B,QAAM,SAAS,MAAM,UAAU;AAC/B,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAS,CAAC;AAEpC,8BAAU,MAAM;AACZ,aAAS,CAAAA,WAAS,KAAK,IAAIA,SAAQ,GAAG,CAAC,CAAC;AAAA,EAC5C,GAAG,CAAC,OAAO,MAAM,CAAC;AAElB,QAAM,aAA4B,EAAE,oBAAoB,UAAU,IAAI,CAAC,cAAc,SAAS,YAAY,QAAQ,EAAE,OAAO,OAAO,EAAE,KAAK,IAAI,IAAI,QAAW,oBAAoB,UAAU,IAAI,GAAG,WAAW,QAAW,OAAO,QAAQ,UAAU,UAAU,UAAU,YAAY,GAAG,MAAM;AAEzR,SACI,oCAAC,SAAI,KAAU,OAAO,YAAa,GAAG,QAClC,oCAAC,SAAI,WAAW,oBAAoB,OAAO,EAAE,UAAU,YAAY,GAAG,eAAe,GAAG,KAAK,aACxF,QACL,CACJ;AAER,CAAC;",
+  "sourcesContent": ["\"use client\"\n\nimport { useSize } from \"ahooks\"\nimport { CSSProperties, FC, forwardRef, HTMLAttributes, useEffect, useRef, useState } from \"react\"\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;AAAA;AAAA;AAAA;AAAA;AAEA,oBAAwB;AACxB,mBAA2F;AAWpF,IAAM,oBAAwC,yBAA+C,CAAC,OAAO,QAAQ;AAChH,QAAM,EAAE,OAAO,oBAAoB,gBAAgB,UAAU,WAAW,MAAM,aAAa,MAAM,OAAO,KAAM,GAAG,KAAK,IAAI;AAC1H,QAAM,gBAAY,qBAAuB,IAAI;AAC7C,QAAM,WAAO,uBAAQ,SAAS;AAC9B,QAAM,QAAQ,MAAM,SAAS;AAC7B,QAAM,SAAS,MAAM,UAAU;AAC/B,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAS,CAAC;AAEpC,8BAAU,MAAM;AACZ,aAAS,CAAAA,WAAS,KAAK,IAAIA,SAAQ,GAAG,CAAC,CAAC;AAAA,EAC5C,GAAG,CAAC,OAAO,MAAM,CAAC;AAElB,QAAM,aAA4B;AAAA,IAC9B,oBAAoB,UAAU,IAAI,CAAC,cAAc,SAAS,YAAY,QAAQ,EAAE,OAAO,OAAO,EAAE,KAAK,IAAI,IAAI;AAAA,IAC7G,oBAAoB,UAAU,IAAI,GAAG,WAAW;AAAA,IAChD;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,UAAU;AAAA,IACV,GAAG;AAAA,EACP;AAEA,SACI,oCAAC,SAAI,KAAU,OAAO,YAAa,GAAG,QAClC,oCAAC,SAAI,WAAW,oBAAoB,OAAO,EAAE,UAAU,YAAY,GAAG,eAAe,GAAG,KAAK,aACxF,QACL,CACJ;AAER,CAAC;",
   "names": ["count"]
 }

package/dist/cjs/components/TransitionNum.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/TransitionNum.tsx"],
-  "sourcesContent": ["\"use client\"\r\n\r\nimport { setFrameInterval } from \"deepsea-tools\"\r\nimport { ForwardedRef, HTMLAttributes, forwardRef, useEffect, useImperativeHandle, useRef } from \"react\"\r\n\r\nexport interface TransitionNumProps extends Omit<HTMLAttributes<HTMLDivElement>, \"children\"> {\r\n    /** 当前数字 */\r\n    children: number\r\n    /** 变换周期，单位帧 */\r\n    period: number\r\n    /** 数字转换为字符串的方法 */\r\n    numToStr?: (num: number) => string\r\n    /** 实例 */\r\n    ins?: ForwardedRef<TransitionNumIns>\r\n}\r\n\r\nexport interface TransitionNumIns {\r\n    get(): number\r\n}\r\n\r\n/** 渐变数字组件 */\r\nexport const TransitionNum = forwardRef<HTMLDivElement, TransitionNumProps>((props, ref) => {\r\n    const { children: num, period, numToStr, ins, ...rest } = props\r\n    if (!Number.isInteger(num) || !Number.isInteger(period) || period <= 0) {\r\n        throw new RangeError(\"目标数字必须是整数，周期必须是正整数\")\r\n    }\r\n    const ele = useRef<HTMLDivElement>(null)\r\n    const cache = useRef({ num, period, numToStr, show: num })\r\n    cache.current = { ...cache.current, num, period, numToStr }\r\n\r\n    useImperativeHandle(ref, () => ele.current!, [])\r\n    useImperativeHandle(ins, () => ({ get: () => cache.current.show }), [])\r\n\r\n    useEffect(() => {\r\n        const { num, period, show, numToStr } = cache.current\r\n        ele.current!.innerText = (numToStr || String)(show)\r\n        if (num === show) return\r\n        const div = ele.current!\r\n        const speed = (num - show) / period\r\n        const cancel = setFrameInterval(() => {\r\n            const { num, numToStr } = cache.current\r\n            cache.current.show += speed\r\n            if ((speed > 0 && cache.current.show > num) || (speed < 0 && cache.current.show < num)) {\r\n                cancel()\r\n                cache.current.show = num\r\n            }\r\n            div.innerText = (numToStr || String)(speed > 0 ? Math.floor(cache.current.show) : Math.ceil(cache.current.show))\r\n        }, 1)\r\n\r\n        return cancel\r\n    }, [num])\r\n\r\n    return <div ref={ele} {...rest} />\r\n})\r\n"],
+  "sourcesContent": ["\"use client\"\n\nimport { setFrameInterval } from \"deepsea-tools\"\nimport { ForwardedRef, HTMLAttributes, forwardRef, useEffect, useImperativeHandle, useRef } from \"react\"\n\nexport interface TransitionNumProps extends Omit<HTMLAttributes<HTMLDivElement>, \"children\"> {\n    /** 当前数字 */\n    children: number\n    /** 变换周期，单位帧 */\n    period: number\n    /** 数字转换为字符串的方法 */\n    numToStr?: (num: number) => string\n    /** 实例 */\n    ins?: ForwardedRef<TransitionNumIns>\n}\n\nexport interface TransitionNumIns {\n    get(): number\n}\n\n/** 渐变数字组件 */\nexport const TransitionNum = forwardRef<HTMLDivElement, TransitionNumProps>((props, ref) => {\n    const { children: num, period, numToStr, ins, ...rest } = props\n    if (!Number.isInteger(num) || !Number.isInteger(period) || period <= 0) {\n        throw new RangeError(\"目标数字必须是整数，周期必须是正整数\")\n    }\n    const ele = useRef<HTMLDivElement>(null)\n    const cache = useRef({ num, period, numToStr, show: num })\n    cache.current = { ...cache.current, num, period, numToStr }\n\n    useImperativeHandle(ref, () => ele.current!, [])\n    useImperativeHandle(ins, () => ({ get: () => cache.current.show }), [])\n\n    useEffect(() => {\n        const { num, period, show, numToStr } = cache.current\n        ele.current!.innerText = (numToStr || String)(show)\n        if (num === show) return\n        const div = ele.current!\n        const speed = (num - show) / period\n        const cancel = setFrameInterval(() => {\n            const { num, numToStr } = cache.current\n            cache.current.show += speed\n            if ((speed > 0 && cache.current.show > num) || (speed < 0 && cache.current.show < num)) {\n                cancel()\n                cache.current.show = num\n            }\n            div.innerText = (numToStr || String)(speed > 0 ? Math.floor(cache.current.show) : Math.ceil(cache.current.show))\n        }, 1)\n\n        return cancel\n    }, [num])\n\n    return <div ref={ele} {...rest} />\n})\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,2BAAiC;AACjC,mBAAiG;AAkB1F,IAAM,oBAAgB,yBAA+C,CAAC,OAAO,QAAQ;AACxF,QAAM,EAAE,UAAU,KAAK,QAAQ,UAAU,KAAK,GAAG,KAAK,IAAI;AAC1D,MAAI,CAAC,OAAO,UAAU,GAAG,KAAK,CAAC,OAAO,UAAU,MAAM,KAAK,UAAU,GAAG;AACpE,UAAM,IAAI,WAAW,oBAAoB;AAAA,EAC7C;AACA,QAAM,UAAM,qBAAuB,IAAI;AACvC,QAAM,YAAQ,qBAAO,EAAE,KAAK,QAAQ,UAAU,MAAM,IAAI,CAAC;AACzD,QAAM,UAAU,EAAE,GAAG,MAAM,SAAS,KAAK,QAAQ,SAAS;AAE1D,wCAAoB,KAAK,MAAM,IAAI,SAAU,CAAC,CAAC;AAC/C,wCAAoB,KAAK,OAAO,EAAE,KAAK,MAAM,MAAM,QAAQ,KAAK,IAAI,CAAC,CAAC;AAEtE,8BAAU,MAAM;AACZ,UAAM,EAAE,KAAAA,MAAK,QAAAC,SAAQ,MAAM,UAAAC,UAAS,IAAI,MAAM;AAC9C,QAAI,QAAS,aAAaA,aAAY,QAAQ,IAAI;AAClD,QAAIF,SAAQ;AAAM;AAClB,UAAM,MAAM,IAAI;AAChB,UAAM,SAASA,OAAM,QAAQC;AAC7B,UAAM,aAAS,uCAAiB,MAAM;AAClC,YAAM,EAAE,KAAAD,MAAK,UAAAE,UAAS,IAAI,MAAM;AAChC,YAAM,QAAQ,QAAQ;AACtB,UAAK,QAAQ,KAAK,MAAM,QAAQ,OAAOF,QAAS,QAAQ,KAAK,MAAM,QAAQ,OAAOA,MAAM;AACpF,eAAO;AACP,cAAM,QAAQ,OAAOA;AAAA,MACzB;AACA,UAAI,aAAaE,aAAY,QAAQ,QAAQ,IAAI,KAAK,MAAM,MAAM,QAAQ,IAAI,IAAI,KAAK,KAAK,MAAM,QAAQ,IAAI,CAAC;AAAA,IACnH,GAAG,CAAC;AAEJ,WAAO;AAAA,EACX,GAAG,CAAC,GAAG,CAAC;AAER,SAAO,oCAAC,SAAI,KAAK,KAAM,GAAG,MAAM;AACpC,CAAC;",
   "names": ["num", "period", "numToStr"]
 }

package/dist/cjs/components/Trapezium.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/Trapezium.tsx"],
-  "sourcesContent": ["\"use client\"\r\n\r\nimport { css } from \"@emotion/css\"\r\nimport { clsx } from \"deepsea-tools\"\r\nimport { HTMLAttributes, forwardRef } from \"react\"\r\nimport { px, transformCSSVariable } from \"../utils\"\r\n\r\nexport interface TrapeziumProps extends HTMLAttributes<HTMLDivElement> {\r\n    top: number\r\n    bottom: number\r\n    height: number\r\n    borderRadius: number\r\n}\r\n\r\n/** 梯形组件 */\r\nexport const Trapezium = forwardRef<HTMLDivElement, TrapeziumProps>((props, ref) => {\r\n    const { top, bottom, height, borderRadius, className, style, ...rest } = props\r\n\r\n    const diff = (bottom - top) / 2\r\n\r\n    const a = Math.atan(height / diff) / 2\r\n\r\n    const b = borderRadius / Math.tan(a)\r\n\r\n    const c = b * Math.cos(a * 2)\r\n\r\n    const d = b * Math.sin(a * 2)\r\n\r\n    const e = Math.PI / 2 - a\r\n\r\n    const f = borderRadius / Math.tan(e)\r\n\r\n    const g = f * Math.cos(a * 2)\r\n\r\n    const h = f * Math.sin(a * 2)\r\n\r\n    return (\r\n        <div\r\n            ref={ref}\r\n            className={clsx(\r\n                css`\r\n                    width: var(--width);\r\n                    height: var(--height);\r\n                    clip-path: var(--clip-path);\r\n                `,\r\n                className\r\n            )}\r\n            style={transformCSSVariable(\r\n                {\r\n                    width: px(bottom),\r\n                    height: px(height),\r\n                    clipath: `path(\"M ${diff + f} ${0}  A ${borderRadius} ${borderRadius} 0 0 0 ${diff - g} ${h} L ${c} ${height - d} A ${borderRadius} ${borderRadius} 0 0 0 ${b} ${height} L ${bottom - b} ${height} A ${borderRadius} ${borderRadius} 0 0 0 ${bottom - c} ${height - d} L ${top + diff + g} ${h} A ${borderRadius} ${borderRadius} 0 0 0 ${top + diff - f} ${0} Z\")`\r\n                },\r\n                style\r\n            )}\r\n            {...rest}\r\n        />\r\n    )\r\n})\r\n"],
+  "sourcesContent": ["\"use client\"\n\nimport { css } from \"@emotion/css\"\nimport { clsx } from \"deepsea-tools\"\nimport { HTMLAttributes, forwardRef } from \"react\"\nimport { px, transformCSSVariable } from \"../utils\"\n\nexport interface TrapeziumProps extends HTMLAttributes<HTMLDivElement> {\n    top: number\n    bottom: number\n    height: number\n    borderRadius: number\n}\n\n/** 梯形组件 */\nexport const Trapezium = forwardRef<HTMLDivElement, TrapeziumProps>((props, ref) => {\n    const { top, bottom, height, borderRadius, className, style, ...rest } = props\n\n    const diff = (bottom - top) / 2\n\n    const a = Math.atan(height / diff) / 2\n\n    const b = borderRadius / Math.tan(a)\n\n    const c = b * Math.cos(a * 2)\n\n    const d = b * Math.sin(a * 2)\n\n    const e = Math.PI / 2 - a\n\n    const f = borderRadius / Math.tan(e)\n\n    const g = f * Math.cos(a * 2)\n\n    const h = f * Math.sin(a * 2)\n\n    return (\n        <div\n            ref={ref}\n            className={clsx(\n                css`\n                    width: var(--width);\n                    height: var(--height);\n                    clip-path: var(--clip-path);\n                `,\n                className,\n            )}\n            style={transformCSSVariable(\n                {\n                    width: px(bottom),\n                    height: px(height),\n                    clipath: `path(\"M ${diff + f} ${0}  A ${borderRadius} ${borderRadius} 0 0 0 ${diff - g} ${h} L ${c} ${height - d} A ${borderRadius} ${borderRadius} 0 0 0 ${b} ${height} L ${bottom - b} ${height} A ${borderRadius} ${borderRadius} 0 0 0 ${bottom - c} ${height - d} L ${top + diff + g} ${h} A ${borderRadius} ${borderRadius} 0 0 0 ${top + diff - f} ${0} Z\")`,\n                },\n                style,\n            )}\n            {...rest}\n        />\n    )\n})\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,iBAAoB;AACpB,2BAAqB;AACrB,mBAA2C;AAC3C,mBAAyC;AAUlC,IAAM,gBAAY,yBAA2C,CAAC,OAAO,QAAQ;AAChF,QAAM,EAAE,KAAK,QAAQ,QAAQ,cAAc,WAAW,OAAO,GAAG,KAAK,IAAI;AAEzE,QAAM,QAAQ,SAAS,OAAO;AAE9B,QAAM,IAAI,KAAK,KAAK,SAAS,IAAI,IAAI;AAErC,QAAM,IAAI,eAAe,KAAK,IAAI,CAAC;AAEnC,QAAM,IAAI,IAAI,KAAK,IAAI,IAAI,CAAC;AAE5B,QAAM,IAAI,IAAI,KAAK,IAAI,IAAI,CAAC;AAE5B,QAAM,IAAI,KAAK,KAAK,IAAI;AAExB,QAAM,IAAI,eAAe,KAAK,IAAI,CAAC;AAEnC,QAAM,IAAI,IAAI,KAAK,IAAI,IAAI,CAAC;AAE5B,QAAM,IAAI,IAAI,KAAK,IAAI,IAAI,CAAC;AAE5B,SACI;AAAA,IAAC;AAAA;AAAA,MACG;AAAA,MACA,eAAW;AAAA,QACP;AAAA;AAAA;AAAA;AAAA;AAAA,QAKA;AAAA,MACJ;AAAA,MACA,WAAO;AAAA,QACH;AAAA,UACI,WAAO,iBAAG,MAAM;AAAA,UAChB,YAAQ,iBAAG,MAAM;AAAA,UACjB,SAAS,WAAW,OAAO,KAAK,QAAQ,gBAAgB,sBAAsB,OAAO,KAAK,OAAO,KAAK,SAAS,OAAO,gBAAgB,sBAAsB,KAAK,YAAY,SAAS,KAAK,YAAY,gBAAgB,sBAAsB,SAAS,KAAK,SAAS,OAAO,MAAM,OAAO,KAAK,OAAO,gBAAgB,sBAAsB,MAAM,OAAO,KAAK;AAAA,QAChW;AAAA,QACA;AAAA,MACJ;AAAA,MACC,GAAG;AAAA;AAAA,EACR;AAER,CAAC;",
   "names": []
 }

package/dist/cjs/index.d.ts

@@ -2,6 +2,7 @@ export * from "./components/AutoFit";
 export * from "./components/AutoScroll";
 export * from "./components/AutoSizeTextarea";
 export * from "./components/CircleText";
+export * from "./components/CopyButton";
 export * from "./components/Echart";
 export * from "./components/Flow";
 export * from "./components/FormLabel";

package/dist/cjs/index.js

@@ -20,6 +20,7 @@ __reExport(src_exports, require("./components/AutoFit"), module.exports);
 __reExport(src_exports, require("./components/AutoScroll"), module.exports);
 __reExport(src_exports, require("./components/AutoSizeTextarea"), module.exports);
 __reExport(src_exports, require("./components/CircleText"), module.exports);
+__reExport(src_exports, require("./components/CopyButton"), module.exports);
 __reExport(src_exports, require("./components/Echart"), module.exports);
 __reExport(src_exports, require("./components/Flow"), module.exports);
 __reExport(src_exports, require("./components/FormLabel"), module.exports);
@@ -43,6 +44,7 @@ __reExport(src_exports, require("./utils/index"), module.exports);
   ...require("./components/AutoScroll"),
   ...require("./components/AutoSizeTextarea"),
   ...require("./components/CircleText"),
+  ...require("./components/CopyButton"),
   ...require("./components/Echart"),
   ...require("./components/Flow"),
   ...require("./components/FormLabel"),

package/dist/cjs/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/index.ts"],
-  "sourcesContent": ["export * from \"@components/AutoFit\"\nexport * from \"@components/AutoScroll\"\nexport * from \"@components/AutoSizeTextarea\"\nexport * from \"@components/CircleText\"\nexport * from \"@components/Echart\"\nexport * from \"@components/Flow\"\nexport * from \"@components/FormLabel\"\nexport * from \"@components/HlsPlayer\"\nexport * from \"@components/InfiniteScroll\"\nexport * from \"@components/InputFile\"\nexport * from \"@components/LoopSwiper\"\nexport * from \"@components/Ring\"\nexport * from \"@components/Scroll\"\nexport * from \"@components/SectionRing\"\nexport * from \"@components/Skeleton\"\nexport * from \"@components/Title\"\nexport * from \"@components/TransitionBox\"\nexport * from \"@components/TransitionNum\"\nexport * from \"@components/Trapezium\"\nexport * from \"@utils/getReactVersion\"\nexport * from \"@utils/index\"\n"],
-  "mappings": ";;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,wBAAc,iCAAd;AACA,wBAAc,oCADd;AAEA,wBAAc,0CAFd;AAGA,wBAAc,oCAHd;AAIA,wBAAc,gCAJd;AAKA,wBAAc,8BALd;AAMA,wBAAc,mCANd;AAOA,wBAAc,mCAPd;AAQA,wBAAc,wCARd;AASA,wBAAc,mCATd;AAUA,wBAAc,oCAVd;AAWA,wBAAc,8BAXd;AAYA,wBAAc,gCAZd;AAaA,wBAAc,qCAbd;AAcA,wBAAc,kCAdd;AAeA,wBAAc,+BAfd;AAgBA,wBAAc,uCAhBd;AAiBA,wBAAc,uCAjBd;AAkBA,wBAAc,mCAlBd;AAmBA,wBAAc,oCAnBd;AAoBA,wBAAc,0BApBd;",
+  "sourcesContent": ["export * from \"@components/AutoFit\"\nexport * from \"@components/AutoScroll\"\nexport * from \"@components/AutoSizeTextarea\"\nexport * from \"@components/CircleText\"\nexport * from \"@components/CopyButton\"\nexport * from \"@components/Echart\"\nexport * from \"@components/Flow\"\nexport * from \"@components/FormLabel\"\nexport * from \"@components/HlsPlayer\"\nexport * from \"@components/InfiniteScroll\"\nexport * from \"@components/InputFile\"\nexport * from \"@components/LoopSwiper\"\nexport * from \"@components/Ring\"\nexport * from \"@components/Scroll\"\nexport * from \"@components/SectionRing\"\nexport * from \"@components/Skeleton\"\nexport * from \"@components/Title\"\nexport * from \"@components/TransitionBox\"\nexport * from \"@components/TransitionNum\"\nexport * from \"@components/Trapezium\"\nexport * from \"@utils/getReactVersion\"\nexport * from \"@utils/index\"\n"],
+  "mappings": ";;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,wBAAc,iCAAd;AACA,wBAAc,oCADd;AAEA,wBAAc,0CAFd;AAGA,wBAAc,oCAHd;AAIA,wBAAc,oCAJd;AAKA,wBAAc,gCALd;AAMA,wBAAc,8BANd;AAOA,wBAAc,mCAPd;AAQA,wBAAc,mCARd;AASA,wBAAc,wCATd;AAUA,wBAAc,mCAVd;AAWA,wBAAc,oCAXd;AAYA,wBAAc,8BAZd;AAaA,wBAAc,gCAbd;AAcA,wBAAc,qCAdd;AAeA,wBAAc,kCAfd;AAgBA,wBAAc,+BAhBd;AAiBA,wBAAc,uCAjBd;AAkBA,wBAAc,uCAlBd;AAmBA,wBAAc,mCAnBd;AAoBA,wBAAc,oCApBd;AAqBA,wBAAc,0BArBd;",
   "names": []
 }

package/dist/cjs/utils/getReactVersion.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/utils/getReactVersion.ts"],
-  "sourcesContent": ["import { version } from \"react\"\r\n\r\nconst reg = /(\\d+)\\.(\\d+)\\.(\\d+)/\r\n\r\nexport function getReactVersion() {\r\n    return version.match(reg)!.slice(1).map(Number)\r\n}\r\n"],
+  "sourcesContent": ["import { version } from \"react\"\n\nconst reg = /(\\d+)\\.(\\d+)\\.(\\d+)/\n\nexport function getReactVersion() {\n    return version.match(reg)!.slice(1).map(Number)\n}\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAwB;AAExB,IAAM,MAAM;AAEL,SAAS,kBAAkB;AAC9B,SAAO,qBAAQ,MAAM,GAAG,EAAG,MAAM,CAAC,EAAE,IAAI,MAAM;AAClD;",
   "names": []
 }

package/dist/cjs/utils/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/utils/index.ts"],
-  "sourcesContent": ["import { CSSProperties } from \"react\"\r\n\r\nexport type CSSVariableName = `--${string}`\r\n\r\nexport type CSSVariableValue = string | number | undefined\r\n\r\nexport interface StyleWithCSSVariable extends CSSProperties {\r\n    [X: CSSVariableName]: CSSVariableValue\r\n}\r\n\r\nconst cssVariableReg = /[A-Z]/\r\n\r\nfunction addCSSVariableLine(match: string): string {\r\n    return `-${match}`\r\n}\r\n\r\nexport function transformCSSVariableName(name: string): CSSVariableName {\r\n    return `--${name.replace(cssVariableReg, addCSSVariableLine).toLowerCase()}`\r\n}\r\n\r\nexport function transformCSSVariable(style: Partial<Record<string, CSSVariableValue>>, style2?: CSSProperties): CSSProperties {\r\n    return Object.assign(\r\n        Object.entries(style).reduce((acc: StyleWithCSSVariable, [key, value]) => {\r\n            acc[transformCSSVariableName(key)] = value\r\n            return acc\r\n        }, {}),\r\n        style2\r\n    )\r\n}\r\n\r\nexport function px(value: string | number | undefined): string | undefined {\r\n    return typeof value === \"number\" ? `${value}px` : value\r\n}\r\n"],
+  "sourcesContent": ["import { CSSProperties } from \"react\"\n\nexport type CSSVariableName = `--${string}`\n\nexport type CSSVariableValue = string | number | undefined\n\nexport interface StyleWithCSSVariable extends CSSProperties {\n    [X: CSSVariableName]: CSSVariableValue\n}\n\nconst cssVariableReg = /[A-Z]/\n\nfunction addCSSVariableLine(match: string): string {\n    return `-${match}`\n}\n\nexport function transformCSSVariableName(name: string): CSSVariableName {\n    return `--${name.replace(cssVariableReg, addCSSVariableLine).toLowerCase()}`\n}\n\nexport function transformCSSVariable(style: Partial<Record<string, CSSVariableValue>>, style2?: CSSProperties): CSSProperties {\n    return Object.assign(\n        Object.entries(style).reduce((acc: StyleWithCSSVariable, [key, value]) => {\n            acc[transformCSSVariableName(key)] = value\n            return acc\n        }, {}),\n        style2,\n    )\n}\n\nexport function px(value: string | number | undefined): string | undefined {\n    return typeof value === \"number\" ? `${value}px` : value\n}\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUA,IAAM,iBAAiB;AAEvB,SAAS,mBAAmB,OAAuB;AAC/C,SAAO,IAAI;AACf;AAEO,SAAS,yBAAyB,MAA+B;AACpE,SAAO,KAAK,KAAK,QAAQ,gBAAgB,kBAAkB,EAAE,YAAY;AAC7E;AAEO,SAAS,qBAAqB,OAAkD,QAAuC;AAC1H,SAAO,OAAO;AAAA,IACV,OAAO,QAAQ,KAAK,EAAE,OAAO,CAAC,KAA2B,CAAC,KAAK,KAAK,MAAM;AACtE,UAAI,yBAAyB,GAAG,CAAC,IAAI;AACrC,aAAO;AAAA,IACX,GAAG,CAAC,CAAC;AAAA,IACL;AAAA,EACJ;AACJ;AAEO,SAAS,GAAG,OAAwD;AACvE,SAAO,OAAO,UAAU,WAAW,GAAG,YAAY;AACtD;",
   "names": []
 }

package/dist/esm/components/AutoFit.js

@@ -5,15 +5,15 @@ import { clsx } from "deepsea-tools";
 import { forwardRef, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState } from "react";
 import { px, transformCSSVariable } from "../utils";
 import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * 自适应缩放组件
- *
- * 注意：
- * 1. 父元素必须设置非 static 定位方式
- * 2. 父元素只能有且仅有一个子元素，那就是 AutoFit
- * 3. 不要设置 AutoFit 的 position、left、top、transform、width、height 属性
- * 4. 在第一次完成缩放前，无论 props 是什么，返回的都是 <div style={{ display: "none" }} />
- * 5. 元素的属性、事件、资源并不是立即加载的，会有一帧的延迟，在第一次完成缩放后才会显示
+/**
+ * 自适应缩放组件
+ *
+ * 注意：
+ * 1. 父元素必须设置非 static 定位方式
+ * 2. 父元素只能有且仅有一个子元素，那就是 AutoFit
+ * 3. 不要设置 AutoFit 的 position、left、top、transform、width、height 属性
+ * 4. 在第一次完成缩放前，无论 props 是什么，返回的都是 <div style={{ display: "none" }} />
+ * 5. 元素的属性、事件、资源并不是立即加载的，会有一帧的延迟，在第一次完成缩放后才会显示
  */
 export const AutoFit = /*#__PURE__*/forwardRef((props, ref) => {
   const {

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

@@ -1 +1 @@
-{"version":3,"names":["css","clsx","forwardRef","useEffect","useImperativeHandle","useLayoutEffect","useRef","useState","px","transformCSSVariable","jsx","_jsx","AutoFit","props","ref","width","designWidth","height","designHeight","direction","className","style","rest","ele","show","setShow","transform","setTransform","undefined","setWidth","setHeight","current","element","parent","parentElement","listener","entries","entry","contentRect","scale","Math","min","observer","ResizeObserver","observe","disconnect","process","env","NODE_ENV","getComputedStyle","position","console","warn","display"],"sources":["../../../src/components/AutoFit.tsx"],"sourcesContent":["\"use client\"\r\n\r\nimport { css } from \"@emotion/css\"\r\nimport { clsx } from \"deepsea-tools\"\r\nimport { forwardRef, HTMLAttributes, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState } from \"react\"\r\nimport { px, transformCSSVariable } from \"../utils\"\r\n\r\nexport interface AutoFitProps extends HTMLAttributes<HTMLDivElement> {\r\n    /** 设计稿宽度，默认 1920 */\r\n    width?: number\r\n    /** 设计稿高度，默认 1080 */\r\n    height?: number\r\n    /**\r\n     * 在哪些方向进行缩放，默认缩放所有方向\r\n     * 1. 水平方向是指，宽度按照设计稿进行占满，高度反向缩放\r\n     * 2. 垂直方向是指，高度按照设计稿进行占满，宽度反向缩放\r\n     * 3. 默认是水平和垂直方向都进行缩放，类似于 background-size: contain 的效果\r\n     */\r\n    direction?: \"horizontal\" | \"vertical\" | \"both\"\r\n}\r\n\r\n/**\r\n * 自适应缩放组件\r\n *\r\n * 注意：\r\n * 1. 父元素必须设置非 static 定位方式\r\n * 2. 父元素只能有且仅有一个子元素，那就是 AutoFit\r\n * 3. 不要设置 AutoFit 的 position、left、top、transform、width、height 属性\r\n * 4. 在第一次完成缩放前，无论 props 是什么，返回的都是 <div style={{ display: \"none\" }} />\r\n * 5. 元素的属性、事件、资源并不是立即加载的，会有一帧的延迟，在第一次完成缩放后才会显示\r\n */\r\nexport const AutoFit = forwardRef<HTMLDivElement, AutoFitProps>((props, ref) => {\r\n    const { width: designWidth = 1920, height: designHeight = 1080, direction, className, style, ...rest } = props\r\n    const ele = useRef<HTMLDivElement>(null)\r\n    const [show, setShow] = useState(false)\r\n    const [transform, setTransform] = useState<string | undefined>(undefined)\r\n    const [width, setWidth] = useState<string | undefined>(undefined)\r\n    const [height, setHeight] = useState<string | undefined>(undefined)\r\n\r\n    useImperativeHandle(ref, () => ele.current!, [ele.current])\r\n    useLayoutEffect(() => {\r\n        const element = ele.current\r\n        const parent = element?.parentElement\r\n        if (!element || !parent) return\r\n        function listener(entries: ResizeObserverEntry[]) {\r\n            const entry = entries[0]\r\n            const { contentRect } = entry\r\n            if (direction === \"horizontal\") {\r\n                const scale = contentRect.width / designWidth\r\n                setTransform(`scale(${scale})`)\r\n                setWidth(px(designWidth))\r\n                setHeight(px(contentRect.height / scale))\r\n            } else if (direction === \"vertical\") {\r\n                const scale = contentRect.height / designHeight\r\n                setTransform(`scale(${scale})`)\r\n                setWidth(px(contentRect.width / scale))\r\n                setHeight(px(designHeight))\r\n            } else {\r\n                const scale = Math.min(contentRect.width / designWidth, contentRect.height / designHeight)\r\n                setTransform(`translateX(${(contentRect.width - designWidth * scale) / 2}px) translateY(${(contentRect.height - designHeight * scale) / 2}px) scale(${scale})`)\r\n                setWidth(px(designWidth))\r\n                setHeight(px(designHeight))\r\n            }\r\n            setShow(true)\r\n        }\r\n        const observer = new ResizeObserver(listener)\r\n        observer.observe(parent)\r\n        return () => observer.disconnect()\r\n    }, [ele.current?.parentElement, designWidth, designHeight, direction])\r\n\r\n    if (process.env.NODE_ENV === \"development\") {\r\n        useEffect(() => {\r\n            const parent = ele.current?.parentElement\r\n            if (!parent) return\r\n            const style = getComputedStyle(parent)\r\n            if (style.position === \"static\") {\r\n                console.warn(\"AutoFit 组件的父元素的 position 属性不应该是 static\")\r\n            }\r\n        }, [ele.current?.parentElement])\r\n    }\r\n\r\n    if (!show) return <div ref={ele} style={{ display: \"none\" }} />\r\n\r\n    return (\r\n        <div\r\n            ref={ele}\r\n            className={clsx(\r\n                css`\r\n                    position: absolute;\r\n                    transform: var(--transform);\r\n                    transform-origin: top left;\r\n                    width: var(--width);\r\n                    height: var(--height);\r\n                `,\r\n                className\r\n            )}\r\n            style={transformCSSVariable({ transform, width, height }, style)}\r\n            {...rest}\r\n        />\r\n    )\r\n})\r\n"],"mappings":"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"}
+{"version":3,"names":["css","clsx","forwardRef","useEffect","useImperativeHandle","useLayoutEffect","useRef","useState","px","transformCSSVariable","jsx","_jsx","AutoFit","props","ref","width","designWidth","height","designHeight","direction","className","style","rest","ele","show","setShow","transform","setTransform","undefined","setWidth","setHeight","current","element","parent","parentElement","listener","entries","entry","contentRect","scale","Math","min","observer","ResizeObserver","observe","disconnect","process","env","NODE_ENV","getComputedStyle","position","console","warn","display"],"sources":["../../../src/components/AutoFit.tsx"],"sourcesContent":["\"use client\"\n\nimport { css } from \"@emotion/css\"\nimport { clsx } from \"deepsea-tools\"\nimport { forwardRef, HTMLAttributes, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState } from \"react\"\nimport { px, transformCSSVariable } from \"../utils\"\n\nexport interface AutoFitProps extends HTMLAttributes<HTMLDivElement> {\n    /** 设计稿宽度，默认 1920 */\n    width?: number\n    /** 设计稿高度，默认 1080 */\n    height?: number\n    /**\n     * 在哪些方向进行缩放，默认缩放所有方向\n     * 1. 水平方向是指，宽度按照设计稿进行占满，高度反向缩放\n     * 2. 垂直方向是指，高度按照设计稿进行占满，宽度反向缩放\n     * 3. 默认是水平和垂直方向都进行缩放，类似于 background-size: contain 的效果\n     */\n    direction?: \"horizontal\" | \"vertical\" | \"both\"\n}\n\n/**\n * 自适应缩放组件\n *\n * 注意：\n * 1. 父元素必须设置非 static 定位方式\n * 2. 父元素只能有且仅有一个子元素，那就是 AutoFit\n * 3. 不要设置 AutoFit 的 position、left、top、transform、width、height 属性\n * 4. 在第一次完成缩放前，无论 props 是什么，返回的都是 <div style={{ display: \"none\" }} />\n * 5. 元素的属性、事件、资源并不是立即加载的，会有一帧的延迟，在第一次完成缩放后才会显示\n */\nexport const AutoFit = forwardRef<HTMLDivElement, AutoFitProps>((props, ref) => {\n    const { width: designWidth = 1920, height: designHeight = 1080, direction, className, style, ...rest } = props\n    const ele = useRef<HTMLDivElement>(null)\n    const [show, setShow] = useState(false)\n    const [transform, setTransform] = useState<string | undefined>(undefined)\n    const [width, setWidth] = useState<string | undefined>(undefined)\n    const [height, setHeight] = useState<string | undefined>(undefined)\n\n    useImperativeHandle(ref, () => ele.current!, [ele.current])\n    useLayoutEffect(() => {\n        const element = ele.current\n        const parent = element?.parentElement\n        if (!element || !parent) return\n        function listener(entries: ResizeObserverEntry[]) {\n            const entry = entries[0]\n            const { contentRect } = entry\n            if (direction === \"horizontal\") {\n                const scale = contentRect.width / designWidth\n                setTransform(`scale(${scale})`)\n                setWidth(px(designWidth))\n                setHeight(px(contentRect.height / scale))\n            } else if (direction === \"vertical\") {\n                const scale = contentRect.height / designHeight\n                setTransform(`scale(${scale})`)\n                setWidth(px(contentRect.width / scale))\n                setHeight(px(designHeight))\n            } else {\n                const scale = Math.min(contentRect.width / designWidth, contentRect.height / designHeight)\n                setTransform(\n                    `translateX(${(contentRect.width - designWidth * scale) / 2}px) translateY(${(contentRect.height - designHeight * scale) / 2}px) scale(${scale})`,\n                )\n                setWidth(px(designWidth))\n                setHeight(px(designHeight))\n            }\n            setShow(true)\n        }\n        const observer = new ResizeObserver(listener)\n        observer.observe(parent)\n        return () => observer.disconnect()\n    }, [ele.current?.parentElement, designWidth, designHeight, direction])\n\n    if (process.env.NODE_ENV === \"development\") {\n        useEffect(() => {\n            const parent = ele.current?.parentElement\n            if (!parent) return\n            const style = getComputedStyle(parent)\n            if (style.position === \"static\") {\n                console.warn(\"AutoFit 组件的父元素的 position 属性不应该是 static\")\n            }\n        }, [ele.current?.parentElement])\n    }\n\n    if (!show) return <div ref={ele} style={{ display: \"none\" }} />\n\n    return (\n        <div\n            ref={ele}\n            className={clsx(\n                css`\n                    position: absolute;\n                    transform: var(--transform);\n                    transform-origin: top left;\n                    width: var(--width);\n                    height: var(--height);\n                `,\n                className,\n            )}\n            style={transformCSSVariable({ transform, width, height }, style)}\n            {...rest}\n        />\n    )\n})\n"],"mappings":"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"}