deepsea-components 5.7.0 → 5.7.2

package/README.md

@@ -1,23 +1,23 @@
-# deepsea-components
-
-[![NPM version](https://img.shields.io/npm/v/deepsea-components.svg?style=flat)](https://npmjs.org/package/deepsea-components)
-[![NPM downloads](http://img.shields.io/npm/dm/deepsea-components.svg?style=flat)](https://npmjs.org/package/deepsea-components)
-
-## Install
-
-```bash
-$ yarn install
-```
-
-```bash
-$ npm run dev
-$ npm run build
-```
-
-## Options
-
-TODO
-
-## LICENSE
-
-MIT
+# deepsea-components
+
+[![NPM version](https://img.shields.io/npm/v/deepsea-components.svg?style=flat)](https://npmjs.org/package/deepsea-components)
+[![NPM downloads](http://img.shields.io/npm/dm/deepsea-components.svg?style=flat)](https://npmjs.org/package/deepsea-components)
+
+## Install
+
+```bash
+$ yarn install
+```
+
+```bash
+$ npm run dev
+$ npm run build
+```
+
+## Options
+
+TODO
+
+## LICENSE
+
+MIT

package/dist/cjs/components/AutoFit.js

@@ -55,7 +55,9 @@ var AutoFit = (0, import_react.forwardRef)((props, ref) => {
         setHeight((0, import_utils.px)(designHeight));
       } else {
         const scale = Math.min(contentRect.width / designWidth, contentRect.height / designHeight);
-        setTransform(`translateX(${(contentRect.width - designWidth * scale) / 2}px) translateY(${(contentRect.height - designHeight * scale) / 2}px) scale(${scale})`);
+        setTransform(
+          `translateX(${(contentRect.width - designWidth * scale) / 2}px) translateY(${(contentRect.height - designHeight * scale) / 2}px) scale(${scale})`
+        );
         setWidth((0, import_utils.px)(designWidth));
         setHeight((0, import_utils.px)(designHeight));
       }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "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": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,iBAAoB;AACpB,2BAAqB;AACrB,mBAA8G;AAC9G,mBAAyC;AA0BlC,IAAM,cAAU,yBAAyC,CAAC,OAAO,QAAQ;AAC5E,QAAM,EAAE,OAAO,cAAc,MAAM,QAAQ,eAAe,MAAM,WAAW,WAAW,OAAO,GAAG,KAAK,IAAI;AACzG,QAAM,UAAM,qBAAuB,IAAI;AACvC,QAAM,CAAC,MAAM,OAAO,QAAI,uBAAS,KAAK;AACtC,QAAM,CAAC,WAAW,YAAY,QAAI,uBAA6B,MAAS;AACxE,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAA6B,MAAS;AAChE,QAAM,CAAC,QAAQ,SAAS,QAAI,uBAA6B,MAAS;AAElE,wCAAoB,KAAK,MAAM,IAAI,SAAU,CAAC,IAAI,OAAO,CAAC;AAC1D,oCAAgB,MAAM;AAClB,UAAM,UAAU,IAAI;AACpB,UAAM,SAAS,SAAS;AACxB,QAAI,CAAC,WAAW,CAAC;AAAQ;AACzB,aAAS,SAAS,SAAgC;AAC9C,YAAM,QAAQ,QAAQ,CAAC;AACvB,YAAM,EAAE,YAAY,IAAI;AACxB,UAAI,cAAc,cAAc;AAC5B,cAAM,QAAQ,YAAY,QAAQ;AAClC,qBAAa,SAAS,QAAQ;AAC9B,qBAAS,iBAAG,WAAW,CAAC;AACxB,sBAAU,iBAAG,YAAY,SAAS,KAAK,CAAC;AAAA,MAC5C,WAAW,cAAc,YAAY;AACjC,cAAM,QAAQ,YAAY,SAAS;AACnC,qBAAa,SAAS,QAAQ;AAC9B,qBAAS,iBAAG,YAAY,QAAQ,KAAK,CAAC;AACtC,sBAAU,iBAAG,YAAY,CAAC;AAAA,MAC9B,OAAO;AACH,cAAM,QAAQ,KAAK,IAAI,YAAY,QAAQ,aAAa,YAAY,SAAS,YAAY;AACzF,qBAAa,eAAe,YAAY,QAAQ,cAAc,SAAS,oBAAoB,YAAY,SAAS,eAAe,SAAS,cAAc,QAAQ;AAC9J,qBAAS,iBAAG,WAAW,CAAC;AACxB,sBAAU,iBAAG,YAAY,CAAC;AAAA,MAC9B;AACA,cAAQ,IAAI;AAAA,IAChB;AACA,UAAM,WAAW,IAAI,eAAe,QAAQ;AAC5C,aAAS,QAAQ,MAAM;AACvB,WAAO,MAAM,SAAS,WAAW;AAAA,EACrC,GAAG,CAAC,IAAI,SAAS,eAAe,aAAa,cAAc,SAAS,CAAC;AAErE,MAAI,QAAQ,IAAI,aAAa,eAAe;AACxC,gCAAU,MAAM;AACZ,YAAM,SAAS,IAAI,SAAS;AAC5B,UAAI,CAAC;AAAQ;AACb,YAAMA,SAAQ,iBAAiB,MAAM;AACrC,UAAIA,OAAM,aAAa,UAAU;AAC7B,gBAAQ,KAAK,wCAAwC;AAAA,MACzD;AAAA,IACJ,GAAG,CAAC,IAAI,SAAS,aAAa,CAAC;AAAA,EACnC;AAEA,MAAI,CAAC;AAAM,WAAO,oCAAC,SAAI,KAAK,KAAK,OAAO,EAAE,SAAS,OAAO,GAAG;AAE7D,SACI;AAAA,IAAC;AAAA;AAAA,MACG,KAAK;AAAA,MACL,eAAW;AAAA,QACP;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAOA;AAAA,MACJ;AAAA,MACA,WAAO,mCAAqB,EAAE,WAAW,OAAO,OAAO,GAAG,KAAK;AAAA,MAC9D,GAAG;AAAA;AAAA,EACR;AAER,CAAC;",
+  "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": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,iBAAoB;AACpB,2BAAqB;AACrB,mBAA8G;AAC9G,mBAAyC;AA0BlC,IAAM,cAAU,yBAAyC,CAAC,OAAO,QAAQ;AAC5E,QAAM,EAAE,OAAO,cAAc,MAAM,QAAQ,eAAe,MAAM,WAAW,WAAW,OAAO,GAAG,KAAK,IAAI;AACzG,QAAM,UAAM,qBAAuB,IAAI;AACvC,QAAM,CAAC,MAAM,OAAO,QAAI,uBAAS,KAAK;AACtC,QAAM,CAAC,WAAW,YAAY,QAAI,uBAA6B,MAAS;AACxE,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAA6B,MAAS;AAChE,QAAM,CAAC,QAAQ,SAAS,QAAI,uBAA6B,MAAS;AAElE,wCAAoB,KAAK,MAAM,IAAI,SAAU,CAAC,IAAI,OAAO,CAAC;AAC1D,oCAAgB,MAAM;AAClB,UAAM,UAAU,IAAI;AACpB,UAAM,SAAS,SAAS;AACxB,QAAI,CAAC,WAAW,CAAC;AAAQ;AACzB,aAAS,SAAS,SAAgC;AAC9C,YAAM,QAAQ,QAAQ,CAAC;AACvB,YAAM,EAAE,YAAY,IAAI;AACxB,UAAI,cAAc,cAAc;AAC5B,cAAM,QAAQ,YAAY,QAAQ;AAClC,qBAAa,SAAS,QAAQ;AAC9B,qBAAS,iBAAG,WAAW,CAAC;AACxB,sBAAU,iBAAG,YAAY,SAAS,KAAK,CAAC;AAAA,MAC5C,WAAW,cAAc,YAAY;AACjC,cAAM,QAAQ,YAAY,SAAS;AACnC,qBAAa,SAAS,QAAQ;AAC9B,qBAAS,iBAAG,YAAY,QAAQ,KAAK,CAAC;AACtC,sBAAU,iBAAG,YAAY,CAAC;AAAA,MAC9B,OAAO;AACH,cAAM,QAAQ,KAAK,IAAI,YAAY,QAAQ,aAAa,YAAY,SAAS,YAAY;AACzF;AAAA,UACI,eAAe,YAAY,QAAQ,cAAc,SAAS,oBAAoB,YAAY,SAAS,eAAe,SAAS,cAAc;AAAA,QAC7I;AACA,qBAAS,iBAAG,WAAW,CAAC;AACxB,sBAAU,iBAAG,YAAY,CAAC;AAAA,MAC9B;AACA,cAAQ,IAAI;AAAA,IAChB;AACA,UAAM,WAAW,IAAI,eAAe,QAAQ;AAC5C,aAAS,QAAQ,MAAM;AACvB,WAAO,MAAM,SAAS,WAAW;AAAA,EACrC,GAAG,CAAC,IAAI,SAAS,eAAe,aAAa,cAAc,SAAS,CAAC;AAErE,MAAI,QAAQ,IAAI,aAAa,eAAe;AACxC,gCAAU,MAAM;AACZ,YAAM,SAAS,IAAI,SAAS;AAC5B,UAAI,CAAC;AAAQ;AACb,YAAMA,SAAQ,iBAAiB,MAAM;AACrC,UAAIA,OAAM,aAAa,UAAU;AAC7B,gBAAQ,KAAK,wCAAwC;AAAA,MACzD;AAAA,IACJ,GAAG,CAAC,IAAI,SAAS,aAAa,CAAC;AAAA,EACnC;AAEA,MAAI,CAAC;AAAM,WAAO,oCAAC,SAAI,KAAK,KAAK,OAAO,EAAE,SAAS,OAAO,GAAG;AAE7D,SACI;AAAA,IAAC;AAAA;AAAA,MACG,KAAK;AAAA,MACL,eAAW;AAAA,QACP;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAOA;AAAA,MACJ;AAAA,MACA,WAAO,mCAAqB,EAAE,WAAW,OAAO,OAAO,GAAG,KAAK;AAAA,MAC9D,GAAG;AAAA;AAAA,EACR;AAER,CAAC;",
   "names": ["style"]
 }

package/dist/cjs/components/AutoScroll.js

@@ -30,7 +30,22 @@ var import_react = require("react");
 var import_utils = require("../utils");
 var import_Scroll = require("./Scroll");
 var AutoScroll = (0, import_react.forwardRef)((props, ref) => {
-  const { count, itemHeight, animation = 1e3, duration = 3e3, onMouseEnter, onMouseLeave, gap = 0, containerClassName, containerStyle, children, playOnMouseEnter, scrollbar, paused, ...rest } = props;
+  const {
+    count,
+    itemHeight,
+    animation = 1e3,
+    duration = 3e3,
+    onMouseEnter,
+    onMouseLeave,
+    gap = 0,
+    containerClassName,
+    containerStyle,
+    children,
+    playOnMouseEnter,
+    scrollbar,
+    paused,
+    ...rest
+  } = props;
   const bar = (0, import_react.useRef)(null);
   const timeout = (0, import_react.useRef)(void 0);
   const ele = (0, import_react.useRef)(null);

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/AutoScroll.tsx"],
-  "sourcesContent": ["\"use client\"\r\n\r\nimport { css } from \"@emotion/css\"\r\nimport { useSize } from \"ahooks\"\r\nimport { clsx, getArray } from \"deepsea-tools\"\r\nimport { CSSProperties, forwardRef, MouseEvent as ReactMouseEvent, useEffect, useImperativeHandle, useRef } from \"react\"\r\nimport Scrollbar from \"smooth-scrollbar\"\r\nimport { ScrollStatus } from \"smooth-scrollbar/interfaces/scrollbar\"\r\nimport { px, transformCSSVariable } from \"../utils\"\r\nimport { Scroll, ScrollProps } from \"./Scroll\"\r\n\r\nexport interface AutoScrollProps extends ScrollProps {\r\n    /** 轮播元素的个数 */\r\n    count: number\r\n\r\n    /** 轮播元素的高度 */\r\n    itemHeight: number\r\n\r\n    /**\r\n     * 轮播动画的时间，单位毫秒\r\n     * @default 1000\r\n     */\r\n    animation?: number\r\n\r\n    /**\r\n     * 每个元素的停留时间，单位毫秒\r\n     * @default 3000\r\n     */\r\n    duration?: number\r\n\r\n    /**\r\n     * 元素之间的间距\r\n     * @default 0\r\n     */\r\n    gap?: number\r\n\r\n    /** 容器类名 */\r\n    containerClassName?: string\r\n\r\n    /** 容器样式 */\r\n    containerStyle?: CSSProperties\r\n\r\n    /**\r\n     * 在鼠标移入时是否继续播放\r\n     * @default false\r\n     */\r\n    playOnMouseEnter?: boolean\r\n\r\n    /**\r\n     * 是否暂停\r\n     * @default false\r\n     */\r\n    paused?: boolean\r\n}\r\n\r\nexport const AutoScroll = forwardRef<HTMLDivElement, AutoScrollProps>((props, ref) => {\r\n    const { count, itemHeight, animation = 1000, duration = 3000, onMouseEnter, onMouseLeave, gap = 0, containerClassName, containerStyle, children, playOnMouseEnter, scrollbar, paused, ...rest } = props\r\n    const bar = useRef<Scrollbar | null>(null)\r\n    const timeout = useRef<NodeJS.Timeout | undefined>(undefined)\r\n    const ele = useRef<HTMLDivElement>(null)\r\n    const size = useSize(ele)\r\n    const pausedRef = useRef(false)\r\n    const pausedProps = useRef(paused)\r\n    pausedProps.current = paused\r\n\r\n    useImperativeHandle(ref, () => ele.current!, [])\r\n    useImperativeHandle(scrollbar, () => bar.current!, [])\r\n\r\n    useEffect(() => {\r\n        if (playOnMouseEnter) pausedRef.current = false\r\n    }, [playOnMouseEnter])\r\n\r\n    useEffect(() => {\r\n        if (!size || count === 0) return\r\n        const { height } = size\r\n        const range = getArray(count, index => (itemHeight + gap) * (index + 1) - (index === count - 1 ? gap : 0))\r\n        const scrollHeight = range[range.length - 1]\r\n        if (height >= scrollHeight) return\r\n        function scroll(target: number) {\r\n            clearTimeout(timeout.current)\r\n            timeout.current = setTimeout(() => {\r\n                if (pausedRef.current || pausedProps.current) return scroll(target)\r\n                bar.current?.scrollTo(0, target, animation)\r\n            }, duration)\r\n        }\r\n        scroll(range[0])\r\n        function listener(status: ScrollStatus) {\r\n            const { y } = status.offset\r\n            const scrollToBottom = Math.abs(y + height - scrollHeight) / itemHeight <= 0.05\r\n            const target = scrollToBottom ? 0 : range.find(item => item > y)!\r\n            scroll(target)\r\n        }\r\n        bar.current?.addListener(listener)\r\n        return () => {\r\n            clearTimeout(timeout.current)\r\n            bar.current?.removeListener(listener)\r\n            bar.current?.scrollTo(0, 0)\r\n        }\r\n    }, [size, count, itemHeight, gap, duration, animation])\r\n\r\n    function onContainerMouseEnter(e: ReactMouseEvent<HTMLDivElement, MouseEvent>) {\r\n        if (playOnMouseEnter) return\r\n        pausedRef.current = true\r\n        onMouseEnter?.(e)\r\n    }\r\n\r\n    function onContainerMouseLeave(e: ReactMouseEvent<HTMLDivElement, MouseEvent>) {\r\n        if (playOnMouseEnter) return\r\n        pausedRef.current = false\r\n        onMouseLeave?.(e)\r\n    }\r\n\r\n    return (\r\n        <Scroll ref={ele} scrollbar={bar} onMouseEnter={onContainerMouseEnter} onMouseLeave={onContainerMouseLeave} {...rest}>\r\n            <div\r\n                className={clsx(\r\n                    css`\r\n                        display: flex;\r\n                        flex-direction: column;\r\n                        gap: var(--gap, 0);\r\n                        & > * {\r\n                            flex: none;\r\n                        }\r\n                    `,\r\n                    containerClassName\r\n                )}\r\n                style={transformCSSVariable({ gap: px(gap) }, containerStyle)}>\r\n                {children}\r\n            </div>\r\n        </Scroll>\r\n    )\r\n})\r\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,iBAAoB;AACpB,oBAAwB;AACxB,2BAA+B;AAC/B,mBAAiH;AAGjH,mBAAyC;AACzC,oBAAoC;AA8C7B,IAAM,iBAAa,yBAA4C,CAAC,OAAO,QAAQ;AAClF,QAAM,EAAE,OAAO,YAAY,YAAY,KAAM,WAAW,KAAM,cAAc,cAAc,MAAM,GAAG,oBAAoB,gBAAgB,UAAU,kBAAkB,WAAW,QAAQ,GAAG,KAAK,IAAI;AAClM,QAAM,UAAM,qBAAyB,IAAI;AACzC,QAAM,cAAU,qBAAmC,MAAS;AAC5D,QAAM,UAAM,qBAAuB,IAAI;AACvC,QAAM,WAAO,uBAAQ,GAAG;AACxB,QAAM,gBAAY,qBAAO,KAAK;AAC9B,QAAM,kBAAc,qBAAO,MAAM;AACjC,cAAY,UAAU;AAEtB,wCAAoB,KAAK,MAAM,IAAI,SAAU,CAAC,CAAC;AAC/C,wCAAoB,WAAW,MAAM,IAAI,SAAU,CAAC,CAAC;AAErD,8BAAU,MAAM;AACZ,QAAI;AAAkB,gBAAU,UAAU;AAAA,EAC9C,GAAG,CAAC,gBAAgB,CAAC;AAErB,8BAAU,MAAM;AACZ,QAAI,CAAC,QAAQ,UAAU;AAAG;AAC1B,UAAM,EAAE,OAAO,IAAI;AACnB,UAAM,YAAQ,+BAAS,OAAO,YAAU,aAAa,QAAQ,QAAQ,MAAM,UAAU,QAAQ,IAAI,MAAM,EAAE;AACzG,UAAM,eAAe,MAAM,MAAM,SAAS,CAAC;AAC3C,QAAI,UAAU;AAAc;AAC5B,aAAS,OAAO,QAAgB;AAC5B,mBAAa,QAAQ,OAAO;AAC5B,cAAQ,UAAU,WAAW,MAAM;AAC/B,YAAI,UAAU,WAAW,YAAY;AAAS,iBAAO,OAAO,MAAM;AAClE,YAAI,SAAS,SAAS,GAAG,QAAQ,SAAS;AAAA,MAC9C,GAAG,QAAQ;AAAA,IACf;AACA,WAAO,MAAM,CAAC,CAAC;AACf,aAAS,SAAS,QAAsB;AACpC,YAAM,EAAE,EAAE,IAAI,OAAO;AACrB,YAAM,iBAAiB,KAAK,IAAI,IAAI,SAAS,YAAY,IAAI,cAAc;AAC3E,YAAM,SAAS,iBAAiB,IAAI,MAAM,KAAK,UAAQ,OAAO,CAAC;AAC/D,aAAO,MAAM;AAAA,IACjB;AACA,QAAI,SAAS,YAAY,QAAQ;AACjC,WAAO,MAAM;AACT,mBAAa,QAAQ,OAAO;AAC5B,UAAI,SAAS,eAAe,QAAQ;AACpC,UAAI,SAAS,SAAS,GAAG,CAAC;AAAA,IAC9B;AAAA,EACJ,GAAG,CAAC,MAAM,OAAO,YAAY,KAAK,UAAU,SAAS,CAAC;AAEtD,WAAS,sBAAsB,GAAgD;AAC3E,QAAI;AAAkB;AACtB,cAAU,UAAU;AACpB,mBAAe,CAAC;AAAA,EACpB;AAEA,WAAS,sBAAsB,GAAgD;AAC3E,QAAI;AAAkB;AACtB,cAAU,UAAU;AACpB,mBAAe,CAAC;AAAA,EACpB;AAEA,SACI,oCAAC,wBAAO,KAAK,KAAK,WAAW,KAAK,cAAc,uBAAuB,cAAc,uBAAwB,GAAG,QAC5G;AAAA,IAAC;AAAA;AAAA,MACG,eAAW;AAAA,QACP;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAQA;AAAA,MACJ;AAAA,MACA,WAAO,mCAAqB,EAAE,SAAK,iBAAG,GAAG,EAAE,GAAG,cAAc;AAAA;AAAA,IAC3D;AAAA,EACL,CACJ;AAER,CAAC;",
+  "sourcesContent": ["\"use client\"\n\nimport { css } from \"@emotion/css\"\nimport { useSize } from \"ahooks\"\nimport { clsx, getArray } from \"deepsea-tools\"\nimport { CSSProperties, forwardRef, MouseEvent as ReactMouseEvent, useEffect, useImperativeHandle, useRef } from \"react\"\nimport Scrollbar from \"smooth-scrollbar\"\nimport { ScrollStatus } from \"smooth-scrollbar/interfaces/scrollbar\"\nimport { px, transformCSSVariable } from \"../utils\"\nimport { Scroll, ScrollProps } from \"./Scroll\"\n\nexport interface AutoScrollProps extends ScrollProps {\n    /** 轮播元素的个数 */\n    count: number\n\n    /** 轮播元素的高度 */\n    itemHeight: number\n\n    /**\n     * 轮播动画的时间，单位毫秒\n     * @default 1000\n     */\n    animation?: number\n\n    /**\n     * 每个元素的停留时间，单位毫秒\n     * @default 3000\n     */\n    duration?: number\n\n    /**\n     * 元素之间的间距\n     * @default 0\n     */\n    gap?: number\n\n    /** 容器类名 */\n    containerClassName?: string\n\n    /** 容器样式 */\n    containerStyle?: CSSProperties\n\n    /**\n     * 在鼠标移入时是否继续播放\n     * @default false\n     */\n    playOnMouseEnter?: boolean\n\n    /**\n     * 是否暂停\n     * @default false\n     */\n    paused?: boolean\n}\n\nexport const AutoScroll = forwardRef<HTMLDivElement, AutoScrollProps>((props, ref) => {\n    const {\n        count,\n        itemHeight,\n        animation = 1000,\n        duration = 3000,\n        onMouseEnter,\n        onMouseLeave,\n        gap = 0,\n        containerClassName,\n        containerStyle,\n        children,\n        playOnMouseEnter,\n        scrollbar,\n        paused,\n        ...rest\n    } = props\n    const bar = useRef<Scrollbar | null>(null)\n    const timeout = useRef<NodeJS.Timeout | undefined>(undefined)\n    const ele = useRef<HTMLDivElement>(null)\n    const size = useSize(ele)\n    const pausedRef = useRef(false)\n    const pausedProps = useRef(paused)\n    pausedProps.current = paused\n\n    useImperativeHandle(ref, () => ele.current!, [])\n    useImperativeHandle(scrollbar, () => bar.current!, [])\n\n    useEffect(() => {\n        if (playOnMouseEnter) pausedRef.current = false\n    }, [playOnMouseEnter])\n\n    useEffect(() => {\n        if (!size || count === 0) return\n        const { height } = size\n        const range = getArray(count, index => (itemHeight + gap) * (index + 1) - (index === count - 1 ? gap : 0))\n        const scrollHeight = range[range.length - 1]\n        if (height >= scrollHeight) return\n        function scroll(target: number) {\n            clearTimeout(timeout.current)\n            timeout.current = setTimeout(() => {\n                if (pausedRef.current || pausedProps.current) return scroll(target)\n                bar.current?.scrollTo(0, target, animation)\n            }, duration)\n        }\n        scroll(range[0])\n        function listener(status: ScrollStatus) {\n            const { y } = status.offset\n            const scrollToBottom = Math.abs(y + height - scrollHeight) / itemHeight <= 0.05\n            const target = scrollToBottom ? 0 : range.find(item => item > y)!\n            scroll(target)\n        }\n        bar.current?.addListener(listener)\n        return () => {\n            clearTimeout(timeout.current)\n            bar.current?.removeListener(listener)\n            bar.current?.scrollTo(0, 0)\n        }\n    }, [size, count, itemHeight, gap, duration, animation])\n\n    function onContainerMouseEnter(e: ReactMouseEvent<HTMLDivElement, MouseEvent>) {\n        if (playOnMouseEnter) return\n        pausedRef.current = true\n        onMouseEnter?.(e)\n    }\n\n    function onContainerMouseLeave(e: ReactMouseEvent<HTMLDivElement, MouseEvent>) {\n        if (playOnMouseEnter) return\n        pausedRef.current = false\n        onMouseLeave?.(e)\n    }\n\n    return (\n        <Scroll ref={ele} scrollbar={bar} onMouseEnter={onContainerMouseEnter} onMouseLeave={onContainerMouseLeave} {...rest}>\n            <div\n                className={clsx(\n                    css`\n                        display: flex;\n                        flex-direction: column;\n                        gap: var(--gap, 0);\n                        & > * {\n                            flex: none;\n                        }\n                    `,\n                    containerClassName,\n                )}\n                style={transformCSSVariable({ gap: px(gap) }, containerStyle)}\n            >\n                {children}\n            </div>\n        </Scroll>\n    )\n})\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,iBAAoB;AACpB,oBAAwB;AACxB,2BAA+B;AAC/B,mBAAiH;AAGjH,mBAAyC;AACzC,oBAAoC;AA8C7B,IAAM,iBAAa,yBAA4C,CAAC,OAAO,QAAQ;AAClF,QAAM;AAAA,IACF;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA,MAAM;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACP,IAAI;AACJ,QAAM,UAAM,qBAAyB,IAAI;AACzC,QAAM,cAAU,qBAAmC,MAAS;AAC5D,QAAM,UAAM,qBAAuB,IAAI;AACvC,QAAM,WAAO,uBAAQ,GAAG;AACxB,QAAM,gBAAY,qBAAO,KAAK;AAC9B,QAAM,kBAAc,qBAAO,MAAM;AACjC,cAAY,UAAU;AAEtB,wCAAoB,KAAK,MAAM,IAAI,SAAU,CAAC,CAAC;AAC/C,wCAAoB,WAAW,MAAM,IAAI,SAAU,CAAC,CAAC;AAErD,8BAAU,MAAM;AACZ,QAAI;AAAkB,gBAAU,UAAU;AAAA,EAC9C,GAAG,CAAC,gBAAgB,CAAC;AAErB,8BAAU,MAAM;AACZ,QAAI,CAAC,QAAQ,UAAU;AAAG;AAC1B,UAAM,EAAE,OAAO,IAAI;AACnB,UAAM,YAAQ,+BAAS,OAAO,YAAU,aAAa,QAAQ,QAAQ,MAAM,UAAU,QAAQ,IAAI,MAAM,EAAE;AACzG,UAAM,eAAe,MAAM,MAAM,SAAS,CAAC;AAC3C,QAAI,UAAU;AAAc;AAC5B,aAAS,OAAO,QAAgB;AAC5B,mBAAa,QAAQ,OAAO;AAC5B,cAAQ,UAAU,WAAW,MAAM;AAC/B,YAAI,UAAU,WAAW,YAAY;AAAS,iBAAO,OAAO,MAAM;AAClE,YAAI,SAAS,SAAS,GAAG,QAAQ,SAAS;AAAA,MAC9C,GAAG,QAAQ;AAAA,IACf;AACA,WAAO,MAAM,CAAC,CAAC;AACf,aAAS,SAAS,QAAsB;AACpC,YAAM,EAAE,EAAE,IAAI,OAAO;AACrB,YAAM,iBAAiB,KAAK,IAAI,IAAI,SAAS,YAAY,IAAI,cAAc;AAC3E,YAAM,SAAS,iBAAiB,IAAI,MAAM,KAAK,UAAQ,OAAO,CAAC;AAC/D,aAAO,MAAM;AAAA,IACjB;AACA,QAAI,SAAS,YAAY,QAAQ;AACjC,WAAO,MAAM;AACT,mBAAa,QAAQ,OAAO;AAC5B,UAAI,SAAS,eAAe,QAAQ;AACpC,UAAI,SAAS,SAAS,GAAG,CAAC;AAAA,IAC9B;AAAA,EACJ,GAAG,CAAC,MAAM,OAAO,YAAY,KAAK,UAAU,SAAS,CAAC;AAEtD,WAAS,sBAAsB,GAAgD;AAC3E,QAAI;AAAkB;AACtB,cAAU,UAAU;AACpB,mBAAe,CAAC;AAAA,EACpB;AAEA,WAAS,sBAAsB,GAAgD;AAC3E,QAAI;AAAkB;AACtB,cAAU,UAAU;AACpB,mBAAe,CAAC;AAAA,EACpB;AAEA,SACI,oCAAC,wBAAO,KAAK,KAAK,WAAW,KAAK,cAAc,uBAAuB,cAAc,uBAAwB,GAAG,QAC5G;AAAA,IAAC;AAAA;AAAA,MACG,eAAW;AAAA,QACP;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAQA;AAAA,MACJ;AAAA,MACA,WAAO,mCAAqB,EAAE,SAAK,iBAAG,GAAG,EAAE,GAAG,cAAc;AAAA;AAAA,IAE3D;AAAA,EACL,CACJ;AAER,CAAC;",
   "names": []
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/AutoSizeTextarea.tsx"],
-  "sourcesContent": ["\"use client\"\r\n\r\nimport { css } from \"@emotion/css\"\r\nimport { clsx } from \"deepsea-tools\"\r\nimport { forwardRef, TextareaHTMLAttributes, useImperativeHandle, useLayoutEffect, useRef, useState } from \"react\"\r\nimport { px, transformCSSVariable } from \"../utils\"\r\n\r\n/**\r\n * 自适应高度的文本域\r\n */\r\nexport const AutoSizeTextArea = forwardRef<HTMLTextAreaElement, TextareaHTMLAttributes<HTMLTextAreaElement>>((props, ref) => {\r\n    const { className, style, ...rest } = props\r\n    const [height, setHeight] = useState<string | undefined>(undefined)\r\n    const ele = useRef<HTMLTextAreaElement>(null)\r\n\r\n    useImperativeHandle(ref, () => ele.current!, [])\r\n\r\n    useLayoutEffect(() => {\r\n        const textarea = ele.current!\r\n        function resizeTextarea() {\r\n            setHeight(\"auto\")\r\n            setHeight(px(textarea.scrollHeight + textarea.offsetHeight - textarea.clientHeight))\r\n        }\r\n        resizeTextarea()\r\n        textarea.addEventListener(\"input\", resizeTextarea)\r\n        textarea.addEventListener(\"change\", resizeTextarea)\r\n\r\n        return () => {\r\n            textarea.removeEventListener(\"input\", resizeTextarea)\r\n            textarea.removeEventListener(\"change\", resizeTextarea)\r\n        }\r\n    }, [])\r\n\r\n    return (\r\n        <textarea\r\n            ref={ele}\r\n            className={clsx(\r\n                css`\r\n                    height: var(--height);\r\n                    resize: none;\r\n                    overflow-y: hidden;\r\n                `,\r\n                className\r\n            )}\r\n            style={transformCSSVariable({ height }, style)}\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 { forwardRef, TextareaHTMLAttributes, useImperativeHandle, useLayoutEffect, useRef, useState } from \"react\"\nimport { px, transformCSSVariable } from \"../utils\"\n\n/**\n * 自适应高度的文本域\n */\nexport const AutoSizeTextArea = forwardRef<HTMLTextAreaElement, TextareaHTMLAttributes<HTMLTextAreaElement>>((props, ref) => {\n    const { className, style, ...rest } = props\n    const [height, setHeight] = useState<string | undefined>(undefined)\n    const ele = useRef<HTMLTextAreaElement>(null)\n\n    useImperativeHandle(ref, () => ele.current!, [])\n\n    useLayoutEffect(() => {\n        const textarea = ele.current!\n        function resizeTextarea() {\n            setHeight(\"auto\")\n            setHeight(px(textarea.scrollHeight + textarea.offsetHeight - textarea.clientHeight))\n        }\n        resizeTextarea()\n        textarea.addEventListener(\"input\", resizeTextarea)\n        textarea.addEventListener(\"change\", resizeTextarea)\n\n        return () => {\n            textarea.removeEventListener(\"input\", resizeTextarea)\n            textarea.removeEventListener(\"change\", resizeTextarea)\n        }\n    }, [])\n\n    return (\n        <textarea\n            ref={ele}\n            className={clsx(\n                css`\n                    height: var(--height);\n                    resize: none;\n                    overflow-y: hidden;\n                `,\n                className,\n            )}\n            style={transformCSSVariable({ height }, style)}\n            {...rest}\n        />\n    )\n})\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,iBAAoB;AACpB,2BAAqB;AACrB,mBAA2G;AAC3G,mBAAyC;AAKlC,IAAM,uBAAmB,yBAA6E,CAAC,OAAO,QAAQ;AACzH,QAAM,EAAE,WAAW,OAAO,GAAG,KAAK,IAAI;AACtC,QAAM,CAAC,QAAQ,SAAS,QAAI,uBAA6B,MAAS;AAClE,QAAM,UAAM,qBAA4B,IAAI;AAE5C,wCAAoB,KAAK,MAAM,IAAI,SAAU,CAAC,CAAC;AAE/C,oCAAgB,MAAM;AAClB,UAAM,WAAW,IAAI;AACrB,aAAS,iBAAiB;AACtB,gBAAU,MAAM;AAChB,oBAAU,iBAAG,SAAS,eAAe,SAAS,eAAe,SAAS,YAAY,CAAC;AAAA,IACvF;AACA,mBAAe;AACf,aAAS,iBAAiB,SAAS,cAAc;AACjD,aAAS,iBAAiB,UAAU,cAAc;AAElD,WAAO,MAAM;AACT,eAAS,oBAAoB,SAAS,cAAc;AACpD,eAAS,oBAAoB,UAAU,cAAc;AAAA,IACzD;AAAA,EACJ,GAAG,CAAC,CAAC;AAEL,SACI;AAAA,IAAC;AAAA;AAAA,MACG,KAAK;AAAA,MACL,eAAW;AAAA,QACP;AAAA;AAAA;AAAA;AAAA;AAAA,QAKA;AAAA,MACJ;AAAA,MACA,WAAO,mCAAqB,EAAE,OAAO,GAAG,KAAK;AAAA,MAC5C,GAAG;AAAA;AAAA,EACR;AAER,CAAC;",
   "names": []
 }

package/dist/cjs/components/CircleText.js

@@ -25,7 +25,20 @@ __export(CircleText_exports, {
 module.exports = __toCommonJS(CircleText_exports);
 var import_react = require("react");
 var CircleText = (props) => {
-  const { width, height, radius, startAngel = 0, gapAngel = 0, align = "center", style, direction = "outer", reverse = false, separator, children, ...rest } = props;
+  const {
+    width,
+    height,
+    radius,
+    startAngel = 0,
+    gapAngel = 0,
+    align = "center",
+    style,
+    direction = "outer",
+    reverse = false,
+    separator,
+    children,
+    ...rest
+  } = props;
   const unitAngle = Math.atan(width / 2 / radius) * 2;
   const totalAngle = (unitAngle + gapAngel) * children.length - gapAngel;
   const offsetAngle = align === "left" ? 0 : align === "right" ? totalAngle : totalAngle / 2;
@@ -39,7 +52,23 @@ var CircleText = (props) => {
   const words = typeof separator === "function" ? separator(children) : children.split(separator ?? "");
   if (reverse)
     words.reverse();
-  return /* @__PURE__ */ React.createElement(import_react.Fragment, null, words.map((w, idx) => /* @__PURE__ */ React.createElement("span", { key: idx, style: { position: "absolute", ...style, transform: getTransform(idx), textAlign: "center", width, lineHeight: `${height}px`, height }, ...rest }, w)));
+  return /* @__PURE__ */ React.createElement(import_react.Fragment, null, words.map((w, idx) => /* @__PURE__ */ React.createElement(
+    "span",
+    {
+      key: idx,
+      style: {
+        position: "absolute",
+        ...style,
+        transform: getTransform(idx),
+        textAlign: "center",
+        width,
+        lineHeight: `${height}px`,
+        height
+      },
+      ...rest
+    },
+    w
+  )));
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/CircleText.tsx"],
-  "sourcesContent": ["\"use client\"\r\n\r\nimport { FC, Fragment, HTMLAttributes } from \"react\"\r\n\r\nexport interface CircleTextProps extends Omit<HTMLAttributes<HTMLSpanElement>, \"children\"> {\r\n    /** 每一个方块的宽度 */\r\n    width: number\r\n    /** 每一个方块的高度 */\r\n    height: number\r\n    /** 圆弧的半径，不包含方块的高度 */\r\n    radius: number\r\n    /** 开始旋转的弧度，逆时针增加，0 为 x 轴方向 */\r\n    startAngel?: number\r\n    /** 每一个方块之间间隔的弧度 */\r\n    gapAngel?: number\r\n    /** 文字对齐的方式，默认居中 */\r\n    align?: \"left\" | \"center\" | \"right\"\r\n    /** 文字朝向圆心还是外侧，默认外侧 */\r\n    direction?: \"inner\" | \"outer\"\r\n    /** 是否反转文字顺序 */\r\n    reverse?: boolean\r\n    /** 分割文字的方法 */\r\n    separator?: string | RegExp | ((text: string) => string[])\r\n    /** 显示的文字 */\r\n    children: string\r\n}\r\n\r\n/** 环形文字 */\r\nexport const CircleText: FC<CircleTextProps> = props => {\r\n    const { width, height, radius, startAngel = 0, gapAngel = 0, align = \"center\", style, direction = \"outer\", reverse = false, separator, children, ...rest } = props\r\n    const unitAngle = Math.atan(width / 2 / radius) * 2\r\n    const totalAngle = (unitAngle + gapAngel) * children.length - gapAngel\r\n    const offsetAngle = align === \"left\" ? 0 : align === \"right\" ? totalAngle : totalAngle / 2\r\n\r\n    function getTransform(idx: number) {\r\n        const angle = startAngel - idx * (unitAngle + gapAngel) + offsetAngle - unitAngle / 2\r\n        const x = (radius + height / 2) * Math.cos(angle) - width / 2\r\n        const y = (radius + height / 2) * Math.sin(angle) * -1 - height / 2\r\n        const z = Math.PI / 2 - angle + (direction === \"inner\" ? Math.PI : 0)\r\n        return `translateX(${x}px) translateY(${y}px) rotateZ(${(z / Math.PI) * 180}deg)`\r\n    }\r\n\r\n    const words = typeof separator === \"function\" ? separator(children) : children.split(separator ?? \"\")\r\n\r\n    if (reverse) words.reverse()\r\n\r\n    return (\r\n        <Fragment>\r\n            {words.map((w, idx) => (\r\n                <span key={idx} style={{ position: \"absolute\", ...style, transform: getTransform(idx), textAlign: \"center\", width, lineHeight: `${height}px`, height: height }} {...rest}>\r\n                    {w}\r\n                </span>\r\n            ))}\r\n        </Fragment>\r\n    )\r\n}\r\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,mBAA6C;AA0BtC,IAAM,aAAkC,WAAS;AACpD,QAAM,EAAE,OAAO,QAAQ,QAAQ,aAAa,GAAG,WAAW,GAAG,QAAQ,UAAU,OAAO,YAAY,SAAS,UAAU,OAAO,WAAW,UAAU,GAAG,KAAK,IAAI;AAC7J,QAAM,YAAY,KAAK,KAAK,QAAQ,IAAI,MAAM,IAAI;AAClD,QAAM,cAAc,YAAY,YAAY,SAAS,SAAS;AAC9D,QAAM,cAAc,UAAU,SAAS,IAAI,UAAU,UAAU,aAAa,aAAa;AAEzF,WAAS,aAAa,KAAa;AAC/B,UAAM,QAAQ,aAAa,OAAO,YAAY,YAAY,cAAc,YAAY;AACpF,UAAM,KAAK,SAAS,SAAS,KAAK,KAAK,IAAI,KAAK,IAAI,QAAQ;AAC5D,UAAM,KAAK,SAAS,SAAS,KAAK,KAAK,IAAI,KAAK,IAAI,KAAK,SAAS;AAClE,UAAM,IAAI,KAAK,KAAK,IAAI,SAAS,cAAc,UAAU,KAAK,KAAK;AACnE,WAAO,cAAc,mBAAmB,gBAAiB,IAAI,KAAK,KAAM;AAAA,EAC5E;AAEA,QAAM,QAAQ,OAAO,cAAc,aAAa,UAAU,QAAQ,IAAI,SAAS,MAAM,aAAa,EAAE;AAEpG,MAAI;AAAS,UAAM,QAAQ;AAE3B,SACI,oCAAC,6BACI,MAAM,IAAI,CAAC,GAAG,QACX,oCAAC,UAAK,KAAK,KAAK,OAAO,EAAE,UAAU,YAAY,GAAG,OAAO,WAAW,aAAa,GAAG,GAAG,WAAW,UAAU,OAAO,YAAY,GAAG,YAAY,OAAe,GAAI,GAAG,QAC/J,CACL,CACH,CACL;AAER;",
+  "sourcesContent": ["\"use client\"\n\nimport { FC, Fragment, HTMLAttributes } from \"react\"\n\nexport interface CircleTextProps extends Omit<HTMLAttributes<HTMLSpanElement>, \"children\"> {\n    /** 每一个方块的宽度 */\n    width: number\n    /** 每一个方块的高度 */\n    height: number\n    /** 圆弧的半径，不包含方块的高度 */\n    radius: number\n    /** 开始旋转的弧度，逆时针增加，0 为 x 轴方向 */\n    startAngel?: number\n    /** 每一个方块之间间隔的弧度 */\n    gapAngel?: number\n    /** 文字对齐的方式，默认居中 */\n    align?: \"left\" | \"center\" | \"right\"\n    /** 文字朝向圆心还是外侧，默认外侧 */\n    direction?: \"inner\" | \"outer\"\n    /** 是否反转文字顺序 */\n    reverse?: boolean\n    /** 分割文字的方法 */\n    separator?: string | RegExp | ((text: string) => string[])\n    /** 显示的文字 */\n    children: string\n}\n\n/** 环形文字 */\nexport const CircleText: FC<CircleTextProps> = props => {\n    const {\n        width,\n        height,\n        radius,\n        startAngel = 0,\n        gapAngel = 0,\n        align = \"center\",\n        style,\n        direction = \"outer\",\n        reverse = false,\n        separator,\n        children,\n        ...rest\n    } = props\n    const unitAngle = Math.atan(width / 2 / radius) * 2\n    const totalAngle = (unitAngle + gapAngel) * children.length - gapAngel\n    const offsetAngle = align === \"left\" ? 0 : align === \"right\" ? totalAngle : totalAngle / 2\n\n    function getTransform(idx: number) {\n        const angle = startAngel - idx * (unitAngle + gapAngel) + offsetAngle - unitAngle / 2\n        const x = (radius + height / 2) * Math.cos(angle) - width / 2\n        const y = (radius + height / 2) * Math.sin(angle) * -1 - height / 2\n        const z = Math.PI / 2 - angle + (direction === \"inner\" ? Math.PI : 0)\n        return `translateX(${x}px) translateY(${y}px) rotateZ(${(z / Math.PI) * 180}deg)`\n    }\n\n    const words = typeof separator === \"function\" ? separator(children) : children.split(separator ?? \"\")\n\n    if (reverse) words.reverse()\n\n    return (\n        <Fragment>\n            {words.map((w, idx) => (\n                <span\n                    key={idx}\n                    style={{\n                        position: \"absolute\",\n                        ...style,\n                        transform: getTransform(idx),\n                        textAlign: \"center\",\n                        width,\n                        lineHeight: `${height}px`,\n                        height: height,\n                    }}\n                    {...rest}\n                >\n                    {w}\n                </span>\n            ))}\n        </Fragment>\n    )\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,mBAA6C;AA0BtC,IAAM,aAAkC,WAAS;AACpD,QAAM;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA,aAAa;AAAA,IACb,WAAW;AAAA,IACX,QAAQ;AAAA,IACR;AAAA,IACA,YAAY;AAAA,IACZ,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACP,IAAI;AACJ,QAAM,YAAY,KAAK,KAAK,QAAQ,IAAI,MAAM,IAAI;AAClD,QAAM,cAAc,YAAY,YAAY,SAAS,SAAS;AAC9D,QAAM,cAAc,UAAU,SAAS,IAAI,UAAU,UAAU,aAAa,aAAa;AAEzF,WAAS,aAAa,KAAa;AAC/B,UAAM,QAAQ,aAAa,OAAO,YAAY,YAAY,cAAc,YAAY;AACpF,UAAM,KAAK,SAAS,SAAS,KAAK,KAAK,IAAI,KAAK,IAAI,QAAQ;AAC5D,UAAM,KAAK,SAAS,SAAS,KAAK,KAAK,IAAI,KAAK,IAAI,KAAK,SAAS;AAClE,UAAM,IAAI,KAAK,KAAK,IAAI,SAAS,cAAc,UAAU,KAAK,KAAK;AACnE,WAAO,cAAc,mBAAmB,gBAAiB,IAAI,KAAK,KAAM;AAAA,EAC5E;AAEA,QAAM,QAAQ,OAAO,cAAc,aAAa,UAAU,QAAQ,IAAI,SAAS,MAAM,aAAa,EAAE;AAEpG,MAAI;AAAS,UAAM,QAAQ;AAE3B,SACI,oCAAC,6BACI,MAAM,IAAI,CAAC,GAAG,QACX;AAAA,IAAC;AAAA;AAAA,MACG,KAAK;AAAA,MACL,OAAO;AAAA,QACH,UAAU;AAAA,QACV,GAAG;AAAA,QACH,WAAW,aAAa,GAAG;AAAA,QAC3B,WAAW;AAAA,QACX;AAAA,QACA,YAAY,GAAG;AAAA,QACf;AAAA,MACJ;AAAA,MACC,GAAG;AAAA;AAAA,IAEH;AAAA,EACL,CACH,CACL;AAER;",
   "names": []
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/CopyButton.tsx"],
-  "sourcesContent": ["import { useLatest } from \"ahooks\"\r\nimport ClipboardJS, { Event } from \"clipboard\"\r\nimport { ComponentProps, forwardRef, useEffect, useImperativeHandle, useRef } from \"react\"\r\n\r\nexport { Event } from \"clipboard\"\r\n\r\nexport type CopyButtonProps = ComponentProps<\"button\"> & {\r\n    text?: string\r\n    onCopySuccess?: (e: Event) => void\r\n    onCopyError?: (e: Event) => void\r\n}\r\n\r\nexport const CopyButton = forwardRef<HTMLButtonElement, CopyButtonProps>((props, ref) => {\r\n    const { text, onCopySuccess: _onCoptSuccess, onCopyError: _onCopyError, ...rest } = props\r\n    const ele = useRef<HTMLButtonElement>(null)\r\n    const onCopySuccess = useLatest(_onCoptSuccess)\r\n    const onCopyError = useLatest(_onCopyError)\r\n\r\n    useImperativeHandle(ref, () => ele.current!, [ele.current])\r\n\r\n    useEffect(() => {\r\n        const clipboard = new ClipboardJS(ele.current!)\r\n        clipboard.on(\"success\", event => onCopySuccess.current?.(event))\r\n        clipboard.on(\"error\", event => onCopyError.current?.(event))\r\n        return () => clipboard.destroy()\r\n    }, [])\r\n\r\n    return <button ref={ele} {...rest} data-clipboard-text={text} />\r\n})\r\n"],
+  "sourcesContent": ["import { useLatest } from \"ahooks\"\nimport ClipboardJS, { Event } from \"clipboard\"\nimport { ComponentProps, forwardRef, useEffect, useImperativeHandle, useRef } from \"react\"\n\nexport { Event } from \"clipboard\"\n\nexport type CopyButtonProps = ComponentProps<\"button\"> & {\n    text?: string\n    onCopySuccess?: (e: Event) => void\n    onCopyError?: (e: Event) => void\n}\n\nexport const CopyButton = forwardRef<HTMLButtonElement, CopyButtonProps>((props, ref) => {\n    const { text, onCopySuccess: _onCoptSuccess, onCopyError: _onCopyError, ...rest } = props\n    const ele = useRef<HTMLButtonElement>(null)\n    const onCopySuccess = useLatest(_onCoptSuccess)\n    const onCopyError = useLatest(_onCopyError)\n\n    useImperativeHandle(ref, () => ele.current!, [ele.current])\n\n    useEffect(() => {\n        const clipboard = new ClipboardJS(ele.current!)\n        clipboard.on(\"success\", event => onCopySuccess.current?.(event))\n        clipboard.on(\"error\", event => onCopyError.current?.(event))\n        return () => clipboard.destroy()\n    }, [])\n\n    return <button ref={ele} {...rest} data-clipboard-text={text} />\n})\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAA0B;AAC1B,uBAAmC;AACnC,mBAAmF;AAEnF,IAAAA,oBAAsB;AAQf,IAAM,iBAAa,yBAA+C,CAAC,OAAO,QAAQ;AACrF,QAAM,EAAE,MAAM,eAAe,gBAAgB,aAAa,cAAc,GAAG,KAAK,IAAI;AACpF,QAAM,UAAM,qBAA0B,IAAI;AAC1C,QAAM,oBAAgB,yBAAU,cAAc;AAC9C,QAAM,kBAAc,yBAAU,YAAY;AAE1C,wCAAoB,KAAK,MAAM,IAAI,SAAU,CAAC,IAAI,OAAO,CAAC;AAE1D,8BAAU,MAAM;AACZ,UAAM,YAAY,IAAI,iBAAAC,QAAY,IAAI,OAAQ;AAC9C,cAAU,GAAG,WAAW,WAAS,cAAc,UAAU,KAAK,CAAC;AAC/D,cAAU,GAAG,SAAS,WAAS,YAAY,UAAU,KAAK,CAAC;AAC3D,WAAO,MAAM,UAAU,QAAQ;AAAA,EACnC,GAAG,CAAC,CAAC;AAEL,SAAO,oCAAC,YAAO,KAAK,KAAM,GAAG,MAAM,uBAAqB,MAAM;AAClE,CAAC;",
   "names": ["import_clipboard", "ClipboardJS"]
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/Echart.tsx"],
-  "sourcesContent": ["import { BarSeriesOption, ComposeOption, DatasetComponentOption, ECharts, GridComponentOption, init, LineSeriesOption, PieSeriesOption, TitleComponentOption, TooltipComponentOption } from \"echarts\"\r\nimport { ComponentProps, ForwardedRef, forwardRef, ForwardRefExoticComponent, RefAttributes, useEffect, useImperativeHandle, useLayoutEffect, useRef } from \"react\"\r\n\r\nexport type PieOption = ComposeOption<PieSeriesOption | TitleComponentOption | DatasetComponentOption | GridComponentOption | TooltipComponentOption>\r\n\r\nexport type BarOption = ComposeOption<BarSeriesOption | TitleComponentOption | DatasetComponentOption | GridComponentOption | TooltipComponentOption>\r\n\r\nexport type LineOption = ComposeOption<LineSeriesOption | TitleComponentOption | DatasetComponentOption | GridComponentOption | TooltipComponentOption>\r\n\r\nexport interface EchartProps<T extends any = any> extends Omit<ComponentProps<\"div\">, \"children\"> {\r\n    width: number\r\n    height: number\r\n    option: T\r\n    chart?: ForwardedRef<ECharts>\r\n}\r\n\r\nexport type EchartComponent<T extends PieOption | BarOption | LineOption> = ForwardRefExoticComponent<Omit<EchartProps<T>, \"ref\"> & RefAttributes<HTMLDivElement>>\r\n\r\nconst Echart = forwardRef<HTMLDivElement, EchartProps>((props, ref) => {\r\n    const { width, height, option, chart, ...rest } = props\r\n    const container = useRef<HTMLDivElement>(null)\r\n    const chartRef = useRef<ECharts | null>(null)\r\n\r\n    useLayoutEffect(() => {\r\n        const ele = container.current!\r\n        chartRef.current = init(ele, option, { width, height })\r\n        return () => chartRef.current?.dispose()\r\n    }, [])\r\n\r\n    useImperativeHandle(ref, () => container.current!, [])\r\n\r\n    useImperativeHandle(chart, () => chartRef.current!, [])\r\n\r\n    useEffect(() => {\r\n        chartRef.current?.setOption(option)\r\n        chartRef.current?.resize({ width, height })\r\n    })\r\n\r\n    return <div ref={container} {...rest} />\r\n})\r\n\r\nexport const Pie = Echart as EchartComponent<PieOption>\r\nexport const Bar = Echart as EchartComponent<BarOption>\r\nexport const Line = Echart as EchartComponent<LineOption>\r\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAA4L;AAC5L,mBAA4J;AAiB5J,IAAM,aAAS,yBAAwC,CAAC,OAAO,QAAQ;AACnE,QAAM,EAAE,OAAO,QAAQ,QAAQ,OAAO,GAAG,KAAK,IAAI;AAClD,QAAM,gBAAY,qBAAuB,IAAI;AAC7C,QAAM,eAAW,qBAAuB,IAAI;AAE5C,oCAAgB,MAAM;AAClB,UAAM,MAAM,UAAU;AACtB,aAAS,cAAU,qBAAK,KAAK,QAAQ,EAAE,OAAO,OAAO,CAAC;AACtD,WAAO,MAAM,SAAS,SAAS,QAAQ;AAAA,EAC3C,GAAG,CAAC,CAAC;AAEL,wCAAoB,KAAK,MAAM,UAAU,SAAU,CAAC,CAAC;AAErD,wCAAoB,OAAO,MAAM,SAAS,SAAU,CAAC,CAAC;AAEtD,8BAAU,MAAM;AACZ,aAAS,SAAS,UAAU,MAAM;AAClC,aAAS,SAAS,OAAO,EAAE,OAAO,OAAO,CAAC;AAAA,EAC9C,CAAC;AAED,SAAO,oCAAC,SAAI,KAAK,WAAY,GAAG,MAAM;AAC1C,CAAC;AAEM,IAAM,MAAM;AACZ,IAAM,MAAM;AACZ,IAAM,OAAO;",
+  "sourcesContent": ["import {\n    BarSeriesOption,\n    ComposeOption,\n    DatasetComponentOption,\n    ECharts,\n    GridComponentOption,\n    init,\n    LineSeriesOption,\n    PieSeriesOption,\n    TitleComponentOption,\n    TooltipComponentOption,\n} from \"echarts\"\nimport {\n    ComponentProps,\n    ForwardedRef,\n    forwardRef,\n    ForwardRefExoticComponent,\n    RefAttributes,\n    useEffect,\n    useImperativeHandle,\n    useLayoutEffect,\n    useRef,\n} from \"react\"\n\nexport type PieOption = ComposeOption<PieSeriesOption | TitleComponentOption | DatasetComponentOption | GridComponentOption | TooltipComponentOption>\n\nexport type BarOption = ComposeOption<BarSeriesOption | TitleComponentOption | DatasetComponentOption | GridComponentOption | TooltipComponentOption>\n\nexport type LineOption = ComposeOption<LineSeriesOption | TitleComponentOption | DatasetComponentOption | GridComponentOption | TooltipComponentOption>\n\nexport interface EchartProps<T extends any = any> extends Omit<ComponentProps<\"div\">, \"children\"> {\n    width: number\n    height: number\n    option: T\n    chart?: ForwardedRef<ECharts>\n}\n\nexport type EchartComponent<T extends PieOption | BarOption | LineOption> = ForwardRefExoticComponent<\n    Omit<EchartProps<T>, \"ref\"> & RefAttributes<HTMLDivElement>\n>\n\nconst Echart = forwardRef<HTMLDivElement, EchartProps>((props, ref) => {\n    const { width, height, option, chart, ...rest } = props\n    const container = useRef<HTMLDivElement>(null)\n    const chartRef = useRef<ECharts | null>(null)\n\n    useLayoutEffect(() => {\n        const ele = container.current!\n        chartRef.current = init(ele, option, { width, height })\n        return () => chartRef.current?.dispose()\n    }, [])\n\n    useImperativeHandle(ref, () => container.current!, [])\n\n    useImperativeHandle(chart, () => chartRef.current!, [])\n\n    useEffect(() => {\n        chartRef.current?.setOption(option)\n        chartRef.current?.resize({ width, height })\n    })\n\n    return <div ref={container} {...rest} />\n})\n\nexport const Pie = Echart as EchartComponent<PieOption>\nexport const Bar = Echart as EchartComponent<BarOption>\nexport const Line = Echart as EchartComponent<LineOption>\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAWO;AACP,mBAUO;AAmBP,IAAM,aAAS,yBAAwC,CAAC,OAAO,QAAQ;AACnE,QAAM,EAAE,OAAO,QAAQ,QAAQ,OAAO,GAAG,KAAK,IAAI;AAClD,QAAM,gBAAY,qBAAuB,IAAI;AAC7C,QAAM,eAAW,qBAAuB,IAAI;AAE5C,oCAAgB,MAAM;AAClB,UAAM,MAAM,UAAU;AACtB,aAAS,cAAU,qBAAK,KAAK,QAAQ,EAAE,OAAO,OAAO,CAAC;AACtD,WAAO,MAAM,SAAS,SAAS,QAAQ;AAAA,EAC3C,GAAG,CAAC,CAAC;AAEL,wCAAoB,KAAK,MAAM,UAAU,SAAU,CAAC,CAAC;AAErD,wCAAoB,OAAO,MAAM,SAAS,SAAU,CAAC,CAAC;AAEtD,8BAAU,MAAM;AACZ,aAAS,SAAS,UAAU,MAAM;AAClC,aAAS,SAAS,OAAO,EAAE,OAAO,OAAO,CAAC;AAAA,EAC9C,CAAC;AAED,SAAO,oCAAC,SAAI,KAAK,WAAY,GAAG,MAAM;AAC1C,CAAC;AAEM,IAAM,MAAM;AACZ,IAAM,MAAM;AACZ,IAAM,OAAO;",
   "names": []
 }

package/dist/cjs/components/Flow.js

@@ -50,7 +50,29 @@ function getGapCountAndSize(width, itemWidth, minGap, maxGap) {
   return { count, gap: averageGap };
 }
 function ManualFlow(props) {
-  let { itemWidth, itemHeight, columnGap, rowGap, maxRows, data = [], render, keyExactor, className, style, wrapperClassName, wrapperStyle, throttle, transitionDuration, onSizeChange, containerClassName, containerStyle, gap = 0, width, element, ...rest } = props;
+  let {
+    itemWidth,
+    itemHeight,
+    columnGap,
+    rowGap,
+    maxRows,
+    data = [],
+    render,
+    keyExactor,
+    className,
+    style,
+    wrapperClassName,
+    wrapperStyle,
+    throttle,
+    transitionDuration,
+    onSizeChange,
+    containerClassName,
+    containerStyle,
+    gap = 0,
+    width,
+    element,
+    ...rest
+  } = props;
   rowGap ??= gap;
   columnGap ??= gap;
   const [minColumnGap, maxColumnGap] = getGapRange(columnGap);
@@ -83,7 +105,19 @@ function ManualFlow(props) {
     return () => clearTimeout(timeout);
   }, [width, itemWidth, throttle, minColumnGap, maxColumnGap]);
   (0, import_react.useEffect)(() => {
-    onSizeChange?.({ width, height, itemWidth, itemHeight, columnGap: columnGapSize, columnCount, rowGap, rowCount: contentShownRows, overflow: data.length > contentShownRows * columnCount, itemCount: data.length, maxRows: maxRows ?? null });
+    onSizeChange?.({
+      width,
+      height,
+      itemWidth,
+      itemHeight,
+      columnGap: columnGapSize,
+      columnCount,
+      rowGap,
+      rowCount: contentShownRows,
+      overflow: data.length > contentShownRows * columnCount,
+      itemCount: data.length,
+      maxRows: maxRows ?? null
+    });
   }, [width, height, columnGapSize, columnCount, rowGap, contentShownRows, data.length, itemWidth, itemHeight, maxRows]);
   return /* @__PURE__ */ React.createElement(
     "div",
@@ -146,7 +180,26 @@ function ManualFlow(props) {
   );
 }
 function Flow(props) {
-  const { itemWidth, itemHeight, columnGap, rowGap, gap, maxRows, data, render, keyExactor, wrapperClassName, wrapperStyle, containerClassName, containerStyle, throttle, transitionDuration, onSizeChange, element, ...rest } = props;
+  const {
+    itemWidth,
+    itemHeight,
+    columnGap,
+    rowGap,
+    gap,
+    maxRows,
+    data,
+    render,
+    keyExactor,
+    wrapperClassName,
+    wrapperStyle,
+    containerClassName,
+    containerStyle,
+    throttle,
+    transitionDuration,
+    onSizeChange,
+    element,
+    ...rest
+  } = props;
   const ele = (0, import_react.useRef)(null);
   const size = (0, import_ahooks.useSize)(ele);
   const width = (0, import_react.useRef)(size?.width || 0);

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/Flow.tsx"],
-  "sourcesContent": ["\"use client\"\r\n\r\nimport { css } from \"@emotion/css\"\r\nimport { useSize } from \"ahooks\"\r\nimport { clsx } from \"deepsea-tools\"\r\nimport { CSSProperties, HTMLAttributes, Key, ReactNode, RefObject, useEffect, useImperativeHandle, useRef, useState } from \"react\"\r\nimport { px, transformCSSVariable } from \"../utils\"\r\n\r\nexport interface FlowSizeData {\r\n    /** 容器宽度 */\r\n    width: number\r\n    /** 容器高度 */\r\n    height: number\r\n    /** 元素宽度 */\r\n    itemWidth: number\r\n    /** 元素高度 */\r\n    itemHeight: number\r\n    /** 列间距 */\r\n    columnGap: number\r\n    /** 列数 */\r\n    columnCount: number\r\n    /** 行间距 */\r\n    rowGap: number\r\n    /** 行数 */\r\n    rowCount: number\r\n    /** 元素格数 */\r\n    itemCount: number\r\n    /** 最大行数 */\r\n    maxRows: number | null\r\n    /** 是否有元素被隐藏 */\r\n    overflow: boolean\r\n}\r\n\r\nexport interface FlowProps<T> extends Omit<HTMLAttributes<HTMLDivElement>, \"children\"> {\r\n    /** 元素宽度 */\r\n    itemWidth: number\r\n    /** 元素高度 */\r\n    itemHeight: number\r\n    /**\r\n     * 列间距\r\n     * 1. 如果是数字，表示列间距是固定的\r\n     * 2. 如果是 auto，表示会在尽可能放进更多列的情况下，列间距是平均的\r\n     * 2. 如果是数组，表示列间距是区间的，第一个元素是最小值，第二个元素是最大值\r\n     */\r\n    columnGap?: number | \"auto\" | [number | \"auto\", number | \"auto\"]\r\n    /** 行间距 */\r\n    rowGap?: number\r\n    gap?: number\r\n    /** 最大行数 */\r\n    maxRows?: number | null\r\n    /** 源数据 */\r\n    data?: T[]\r\n    /** 渲染 */\r\n    render: (item: T, index: number, arr: T[]) => ReactNode\r\n    /** key释放器，默认为 index */\r\n    keyExactor?: (item: T, index: number, arr: T[]) => Key\r\n    /**\r\n     * 渲染的元素由两层容器包裹，外层容器类名\r\n     */\r\n    wrapperClassName?: string\r\n    /**\r\n     * 渲染的元素由两层容器包裹，外层容器样式\r\n     */\r\n    wrapperStyle?: CSSProperties\r\n    /**\r\n     * 渲染的元素由两层容器包裹，内层容器类名\r\n     */\r\n    containerClassName?: string\r\n    /**\r\n     * 渲染的元素由两层容器包裹，内层容器样式\r\n     */\r\n    containerStyle?: CSSProperties\r\n    /** 节流时间，单位毫秒，默认200ms，传入 0 不节流 */\r\n    throttle?: number\r\n    /** 动画时间，单位毫秒，默认400ms，传入 0 不展示动画 */\r\n    transitionDuration?: number\r\n    /** 变化的回调函数 */\r\n    onSizeChange?: (sizeData: FlowSizeData) => void\r\n    element?: RefObject<HTMLDivElement>\r\n}\r\n\r\nexport function getGapRange(gap?: undefined | number | \"auto\" | (number | \"auto\")[]): [number, number | \"auto\"] {\r\n    if (typeof gap === \"number\") return [gap, gap]\r\n    if (Array.isArray(gap)) return [typeof gap[0] === \"number\" ? gap[0] : 0, gap[1]]\r\n    return [0, \"auto\"]\r\n}\r\n\r\nexport interface GapAndCount {\r\n    count: number\r\n    gap: number\r\n}\r\n\r\nexport function getGapCountAndSize(width: number, itemWidth: number, minGap: number, maxGap: number | \"auto\"): GapAndCount {\r\n    const count = Math.floor((width + minGap) / (itemWidth + minGap)) || 1\r\n    if (count === 1) return { count, gap: 0 }\r\n    const averageGap = (width - itemWidth * count) / (count - 1)\r\n    if (averageGap < minGap) return { count, gap: minGap }\r\n    if (maxGap !== \"auto\" && averageGap > maxGap) return { count, gap: maxGap }\r\n    return { count, gap: averageGap }\r\n}\r\n\r\nexport interface ManualFlowProps<T> extends FlowProps<T> {\r\n    /** 组件宽度，必须指定 */\r\n    width: number\r\n}\r\n\r\n/** 手动组件，由外界指定宽度，性能更好 */\r\nexport function ManualFlow<T>(props: ManualFlowProps<T>) {\r\n    let { itemWidth, itemHeight, columnGap, rowGap, maxRows, data = [], render, keyExactor, className, style, wrapperClassName, wrapperStyle, throttle, transitionDuration, onSizeChange, containerClassName, containerStyle, gap = 0, width, element, ...rest } = props\r\n    rowGap ??= gap\r\n    columnGap ??= gap\r\n    const [minColumnGap, maxColumnGap] = getGapRange(columnGap)\r\n    const [{ count: columnCount, gap: columnGapSize }, setGapAndCount] = useState(() => getGapCountAndSize(width, itemWidth, minColumnGap, maxColumnGap))\r\n    const ele = useRef<HTMLDivElement>(null)\r\n    const contentRows = Math.ceil(data.length / columnCount)\r\n    const contentShownRows = typeof maxRows === \"number\" ? Math.min(contentRows, maxRows) : contentRows\r\n    const height = contentShownRows > 0 ? contentShownRows * (itemHeight + rowGap) - rowGap : 0\r\n\r\n    function getPosition(index: number) {\r\n        const y = Math.floor(index / columnCount)\r\n        const x = index - y * columnCount\r\n        return {\r\n            left: x * (itemWidth + columnGapSize),\r\n            top: y * (itemHeight + rowGap!)\r\n        }\r\n    }\r\n\r\n    function getHidden(index: number) {\r\n        if (typeof maxRows !== \"number\") return false\r\n        return index >= maxRows * columnCount\r\n    }\r\n\r\n    useImperativeHandle(element, () => ele.current!, [ele.current])\r\n\r\n    useEffect(() => {\r\n        function task() {\r\n            setGapAndCount(getGapCountAndSize(width, itemWidth, minColumnGap, maxColumnGap))\r\n        }\r\n        if (throttle === 0) return task()\r\n        const timeout = setTimeout(task, throttle || 200)\r\n        return () => clearTimeout(timeout)\r\n    }, [width, itemWidth, throttle, minColumnGap, maxColumnGap])\r\n\r\n    useEffect(() => {\r\n        onSizeChange?.({ width, height, itemWidth, itemHeight, columnGap: columnGapSize, columnCount, rowGap: rowGap!, rowCount: contentShownRows, overflow: data.length > contentShownRows * columnCount, itemCount: data.length, maxRows: maxRows ?? null })\r\n    }, [width, height, columnGapSize, columnCount, rowGap, contentShownRows, data.length, itemWidth, itemHeight, maxRows])\r\n\r\n    return (\r\n        <div\r\n            ref={ele}\r\n            className={clsx(\r\n                css`\r\n                    position: relative;\r\n                    height: var(--height);\r\n                    overflow: hidden;\r\n                `,\r\n                className\r\n            )}\r\n            style={transformCSSVariable({ height: px(height) }, style)}\r\n            {...rest}>\r\n            {data.map((item, index, arr) => (\r\n                <div\r\n                    key={keyExactor ? keyExactor(item, index, arr) : index}\r\n                    className={clsx(\r\n                        css`\r\n                            position: absolute;\r\n                            width: var(--width);\r\n                            height: var(--height);\r\n                            transition: var(--transition);\r\n                            left: 0;\r\n                            top: 0;\r\n                            transform: translate(var(--left), var(--top));\r\n                        `,\r\n                        wrapperClassName\r\n                    )}\r\n                    style={transformCSSVariable(\r\n                        {\r\n                            width: px(itemWidth),\r\n                            height: px(itemHeight),\r\n                            transition: transitionDuration === 0 ? \"none\" : `all ${transitionDuration || 400}ms`,\r\n                            left: px(getPosition(index).left),\r\n                            top: px(getPosition(index).top)\r\n                        },\r\n                        wrapperStyle\r\n                    )}>\r\n                    <div\r\n                        className={clsx(\r\n                            css`\r\n                                width: 100%;\r\n                                height: 100%;\r\n                                display: var(--display);\r\n                            `,\r\n                            containerClassName\r\n                        )}\r\n                        style={transformCSSVariable({ display: getHidden(index) ? \"none\" : \"block\" }, containerStyle)}>\r\n                        {render(item, index, arr)}\r\n                    </div>\r\n                </div>\r\n            ))}\r\n        </div>\r\n    )\r\n}\r\n\r\n/** 自适应浮动组件 */\r\nexport function Flow<T>(props: FlowProps<T>) {\r\n    const { itemWidth, itemHeight, columnGap, rowGap, gap, maxRows, data, render, keyExactor, wrapperClassName, wrapperStyle, containerClassName, containerStyle, throttle, transitionDuration, onSizeChange, element, ...rest } = props\r\n    const ele = useRef<HTMLDivElement>(null)\r\n    const size = useSize(ele)\r\n    const width = useRef(size?.width || 0)\r\n    if (size && size.width !== 0) width.current = size.width\r\n    useImperativeHandle(element, () => ele.current!, [ele.current])\r\n    if (width.current === 0) return <div ref={ele} {...rest} />\r\n    return <ManualFlow element={ele} {...props} width={width.current} />\r\n}\r\n"],
-  "mappings": "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",
+  "sourcesContent": ["\"use client\"\n\nimport { css } from \"@emotion/css\"\nimport { useSize } from \"ahooks\"\nimport { clsx } from \"deepsea-tools\"\nimport { CSSProperties, HTMLAttributes, Key, ReactNode, RefObject, useEffect, useImperativeHandle, useRef, useState } from \"react\"\nimport { px, transformCSSVariable } from \"../utils\"\n\nexport interface FlowSizeData {\n    /** 容器宽度 */\n    width: number\n    /** 容器高度 */\n    height: number\n    /** 元素宽度 */\n    itemWidth: number\n    /** 元素高度 */\n    itemHeight: number\n    /** 列间距 */\n    columnGap: number\n    /** 列数 */\n    columnCount: number\n    /** 行间距 */\n    rowGap: number\n    /** 行数 */\n    rowCount: number\n    /** 元素格数 */\n    itemCount: number\n    /** 最大行数 */\n    maxRows: number | null\n    /** 是否有元素被隐藏 */\n    overflow: boolean\n}\n\nexport interface FlowProps<T> extends Omit<HTMLAttributes<HTMLDivElement>, \"children\"> {\n    /** 元素宽度 */\n    itemWidth: number\n    /** 元素高度 */\n    itemHeight: number\n    /**\n     * 列间距\n     * 1. 如果是数字，表示列间距是固定的\n     * 2. 如果是 auto，表示会在尽可能放进更多列的情况下，列间距是平均的\n     * 2. 如果是数组，表示列间距是区间的，第一个元素是最小值，第二个元素是最大值\n     */\n    columnGap?: number | \"auto\" | [number | \"auto\", number | \"auto\"]\n    /** 行间距 */\n    rowGap?: number\n    gap?: number\n    /** 最大行数 */\n    maxRows?: number | null\n    /** 源数据 */\n    data?: T[]\n    /** 渲染 */\n    render: (item: T, index: number, arr: T[]) => ReactNode\n    /** key释放器，默认为 index */\n    keyExactor?: (item: T, index: number, arr: T[]) => Key\n    /**\n     * 渲染的元素由两层容器包裹，外层容器类名\n     */\n    wrapperClassName?: string\n    /**\n     * 渲染的元素由两层容器包裹，外层容器样式\n     */\n    wrapperStyle?: CSSProperties\n    /**\n     * 渲染的元素由两层容器包裹，内层容器类名\n     */\n    containerClassName?: string\n    /**\n     * 渲染的元素由两层容器包裹，内层容器样式\n     */\n    containerStyle?: CSSProperties\n    /** 节流时间，单位毫秒，默认200ms，传入 0 不节流 */\n    throttle?: number\n    /** 动画时间，单位毫秒，默认400ms，传入 0 不展示动画 */\n    transitionDuration?: number\n    /** 变化的回调函数 */\n    onSizeChange?: (sizeData: FlowSizeData) => void\n    element?: RefObject<HTMLDivElement>\n}\n\nexport function getGapRange(gap?: undefined | number | \"auto\" | (number | \"auto\")[]): [number, number | \"auto\"] {\n    if (typeof gap === \"number\") return [gap, gap]\n    if (Array.isArray(gap)) return [typeof gap[0] === \"number\" ? gap[0] : 0, gap[1]]\n    return [0, \"auto\"]\n}\n\nexport interface GapAndCount {\n    count: number\n    gap: number\n}\n\nexport function getGapCountAndSize(width: number, itemWidth: number, minGap: number, maxGap: number | \"auto\"): GapAndCount {\n    const count = Math.floor((width + minGap) / (itemWidth + minGap)) || 1\n    if (count === 1) return { count, gap: 0 }\n    const averageGap = (width - itemWidth * count) / (count - 1)\n    if (averageGap < minGap) return { count, gap: minGap }\n    if (maxGap !== \"auto\" && averageGap > maxGap) return { count, gap: maxGap }\n    return { count, gap: averageGap }\n}\n\nexport interface ManualFlowProps<T> extends FlowProps<T> {\n    /** 组件宽度，必须指定 */\n    width: number\n}\n\n/** 手动组件，由外界指定宽度，性能更好 */\nexport function ManualFlow<T>(props: ManualFlowProps<T>) {\n    let {\n        itemWidth,\n        itemHeight,\n        columnGap,\n        rowGap,\n        maxRows,\n        data = [],\n        render,\n        keyExactor,\n        className,\n        style,\n        wrapperClassName,\n        wrapperStyle,\n        throttle,\n        transitionDuration,\n        onSizeChange,\n        containerClassName,\n        containerStyle,\n        gap = 0,\n        width,\n        element,\n        ...rest\n    } = props\n    rowGap ??= gap\n    columnGap ??= gap\n    const [minColumnGap, maxColumnGap] = getGapRange(columnGap)\n    const [{ count: columnCount, gap: columnGapSize }, setGapAndCount] = useState(() => getGapCountAndSize(width, itemWidth, minColumnGap, maxColumnGap))\n    const ele = useRef<HTMLDivElement>(null)\n    const contentRows = Math.ceil(data.length / columnCount)\n    const contentShownRows = typeof maxRows === \"number\" ? Math.min(contentRows, maxRows) : contentRows\n    const height = contentShownRows > 0 ? contentShownRows * (itemHeight + rowGap) - rowGap : 0\n\n    function getPosition(index: number) {\n        const y = Math.floor(index / columnCount)\n        const x = index - y * columnCount\n        return {\n            left: x * (itemWidth + columnGapSize),\n            top: y * (itemHeight + rowGap!),\n        }\n    }\n\n    function getHidden(index: number) {\n        if (typeof maxRows !== \"number\") return false\n        return index >= maxRows * columnCount\n    }\n\n    useImperativeHandle(element, () => ele.current!, [ele.current])\n\n    useEffect(() => {\n        function task() {\n            setGapAndCount(getGapCountAndSize(width, itemWidth, minColumnGap, maxColumnGap))\n        }\n        if (throttle === 0) return task()\n        const timeout = setTimeout(task, throttle || 200)\n        return () => clearTimeout(timeout)\n    }, [width, itemWidth, throttle, minColumnGap, maxColumnGap])\n\n    useEffect(() => {\n        onSizeChange?.({\n            width,\n            height,\n            itemWidth,\n            itemHeight,\n            columnGap: columnGapSize,\n            columnCount,\n            rowGap: rowGap!,\n            rowCount: contentShownRows,\n            overflow: data.length > contentShownRows * columnCount,\n            itemCount: data.length,\n            maxRows: maxRows ?? null,\n        })\n    }, [width, height, columnGapSize, columnCount, rowGap, contentShownRows, data.length, itemWidth, itemHeight, maxRows])\n\n    return (\n        <div\n            ref={ele}\n            className={clsx(\n                css`\n                    position: relative;\n                    height: var(--height);\n                    overflow: hidden;\n                `,\n                className,\n            )}\n            style={transformCSSVariable({ height: px(height) }, style)}\n            {...rest}\n        >\n            {data.map((item, index, arr) => (\n                <div\n                    key={keyExactor ? keyExactor(item, index, arr) : index}\n                    className={clsx(\n                        css`\n                            position: absolute;\n                            width: var(--width);\n                            height: var(--height);\n                            transition: var(--transition);\n                            left: 0;\n                            top: 0;\n                            transform: translate(var(--left), var(--top));\n                        `,\n                        wrapperClassName,\n                    )}\n                    style={transformCSSVariable(\n                        {\n                            width: px(itemWidth),\n                            height: px(itemHeight),\n                            transition: transitionDuration === 0 ? \"none\" : `all ${transitionDuration || 400}ms`,\n                            left: px(getPosition(index).left),\n                            top: px(getPosition(index).top),\n                        },\n                        wrapperStyle,\n                    )}\n                >\n                    <div\n                        className={clsx(\n                            css`\n                                width: 100%;\n                                height: 100%;\n                                display: var(--display);\n                            `,\n                            containerClassName,\n                        )}\n                        style={transformCSSVariable({ display: getHidden(index) ? \"none\" : \"block\" }, containerStyle)}\n                    >\n                        {render(item, index, arr)}\n                    </div>\n                </div>\n            ))}\n        </div>\n    )\n}\n\n/** 自适应浮动组件 */\nexport function Flow<T>(props: FlowProps<T>) {\n    const {\n        itemWidth,\n        itemHeight,\n        columnGap,\n        rowGap,\n        gap,\n        maxRows,\n        data,\n        render,\n        keyExactor,\n        wrapperClassName,\n        wrapperStyle,\n        containerClassName,\n        containerStyle,\n        throttle,\n        transitionDuration,\n        onSizeChange,\n        element,\n        ...rest\n    } = props\n    const ele = useRef<HTMLDivElement>(null)\n    const size = useSize(ele)\n    const width = useRef(size?.width || 0)\n    if (size && size.width !== 0) width.current = size.width\n    useImperativeHandle(element, () => ele.current!, [ele.current])\n    if (width.current === 0) return <div ref={ele} {...rest} />\n    return <ManualFlow element={ele} {...props} width={width.current} />\n}\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/FormLabel.tsx"],
-  "sourcesContent": ["import { css } from \"@emotion/css\"\r\nimport { clsx } from \"deepsea-tools\"\r\nimport { ComponentProps, FC, Fragment } from \"react\"\r\n\r\nexport type FormLabelProps = ComponentProps<\"div\"> & {\r\n    /**\r\n     * Label 的宽度.\r\n     */\r\n    width: number\r\n    /**\r\n     * 是否在 Label 前面添加一个空白区域，只有当前 Label 为非必选，而存在其他 Label 为必选的时候开启\r\n     */\r\n    before?: boolean\r\n}\r\n\r\n/**\r\n * 为 Ant Design 的 FormItem 设计的 Label 组件\r\n */\r\nexport const FormLabel: FC<FormLabelProps> = props => {\r\n    const { className, style, before, width, ...rest } = props\r\n\r\n    return (\r\n        <Fragment>\r\n            {!!before && <div style={{ width: 11 }}>&ensp;</div>}\r\n            <div\r\n                className={clsx(\r\n                    css`\r\n                        text-align: justify;\r\n                        text-align-last: justify;\r\n                    `,\r\n                    className\r\n                )}\r\n                style={{ width, ...style }}\r\n                {...rest}\r\n            />\r\n        </Fragment>\r\n    )\r\n}\r\n"],
+  "sourcesContent": ["import { css } from \"@emotion/css\"\nimport { clsx } from \"deepsea-tools\"\nimport { ComponentProps, FC, Fragment } from \"react\"\n\nexport type FormLabelProps = ComponentProps<\"div\"> & {\n    /**\n     * Label 的宽度.\n     */\n    width: number\n    /**\n     * 是否在 Label 前面添加一个空白区域，只有当前 Label 为非必选，而存在其他 Label 为必选的时候开启\n     */\n    before?: boolean\n}\n\n/**\n * 为 Ant Design 的 FormItem 设计的 Label 组件\n */\nexport const FormLabel: FC<FormLabelProps> = props => {\n    const { className, style, before, width, ...rest } = props\n\n    return (\n        <Fragment>\n            {!!before && <div style={{ width: 11 }}>&ensp;</div>}\n            <div\n                className={clsx(\n                    css`\n                        text-align: justify;\n                        text-align-last: justify;\n                    `,\n                    className,\n                )}\n                style={{ width, ...style }}\n                {...rest}\n            />\n        </Fragment>\n    )\n}\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAAoB;AACpB,2BAAqB;AACrB,mBAA6C;AAgBtC,IAAM,YAAgC,WAAS;AAClD,QAAM,EAAE,WAAW,OAAO,QAAQ,OAAO,GAAG,KAAK,IAAI;AAErD,SACI,oCAAC,6BACI,CAAC,CAAC,UAAU,oCAAC,SAAI,OAAO,EAAE,OAAO,GAAG,KAAG,GAAM,GAC9C;AAAA,IAAC;AAAA;AAAA,MACG,eAAW;AAAA,QACP;AAAA;AAAA;AAAA;AAAA,QAIA;AAAA,MACJ;AAAA,MACA,OAAO,EAAE,OAAO,GAAG,MAAM;AAAA,MACxB,GAAG;AAAA;AAAA,EACR,CACJ;AAER;",
   "names": []
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/HlsPlayer.tsx"],
-  "sourcesContent": ["\"use client\"\r\n\r\nimport Hls from \"hls.js\"\r\nimport { MediaHTMLAttributes, forwardRef, useEffect, useImperativeHandle, useRef } from \"react\"\r\n\r\nexport interface HlsPlayerProps extends Omit<MediaHTMLAttributes<HTMLVideoElement>, \"src\"> {\r\n    src: string\r\n}\r\n\r\nexport const HlsPlayer = forwardRef<HTMLVideoElement, HlsPlayerProps>((props, ref) => {\r\n    const { src, ...rest } = props\r\n    const video = useRef<HTMLVideoElement>(null)\r\n\r\n    useImperativeHandle(ref, () => video.current!, [])\r\n\r\n    useEffect(() => {\r\n        const { current: player } = video\r\n        if (!player || !src) return\r\n        if (player.canPlayType(\"application/vnd.apple.mpegurl\")) {\r\n            player.src = src\r\n            return\r\n        }\r\n        if (Hls.isSupported()) {\r\n            const hls = new Hls()\r\n            hls.loadSource(src)\r\n            hls.attachMedia(player)\r\n            return () => {\r\n                hls.destroy()\r\n            }\r\n        }\r\n    }, [src])\r\n\r\n    return <video ref={video} {...rest} />\r\n})\r\n"],
+  "sourcesContent": ["\"use client\"\n\nimport Hls from \"hls.js\"\nimport { MediaHTMLAttributes, forwardRef, useEffect, useImperativeHandle, useRef } from \"react\"\n\nexport interface HlsPlayerProps extends Omit<MediaHTMLAttributes<HTMLVideoElement>, \"src\"> {\n    src: string\n}\n\nexport const HlsPlayer = forwardRef<HTMLVideoElement, HlsPlayerProps>((props, ref) => {\n    const { src, ...rest } = props\n    const video = useRef<HTMLVideoElement>(null)\n\n    useImperativeHandle(ref, () => video.current!, [])\n\n    useEffect(() => {\n        const { current: player } = video\n        if (!player || !src) return\n        if (player.canPlayType(\"application/vnd.apple.mpegurl\")) {\n            player.src = src\n            return\n        }\n        if (Hls.isSupported()) {\n            const hls = new Hls()\n            hls.loadSource(src)\n            hls.attachMedia(player)\n            return () => {\n                hls.destroy()\n            }\n        }\n    }, [src])\n\n    return <video ref={video} {...rest} />\n})\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,iBAAgB;AAChB,mBAAwF;AAMjF,IAAM,gBAAY,yBAA6C,CAAC,OAAO,QAAQ;AAClF,QAAM,EAAE,KAAK,GAAG,KAAK,IAAI;AACzB,QAAM,YAAQ,qBAAyB,IAAI;AAE3C,wCAAoB,KAAK,MAAM,MAAM,SAAU,CAAC,CAAC;AAEjD,8BAAU,MAAM;AACZ,UAAM,EAAE,SAAS,OAAO,IAAI;AAC5B,QAAI,CAAC,UAAU,CAAC;AAAK;AACrB,QAAI,OAAO,YAAY,+BAA+B,GAAG;AACrD,aAAO,MAAM;AACb;AAAA,IACJ;AACA,QAAI,WAAAA,QAAI,YAAY,GAAG;AACnB,YAAM,MAAM,IAAI,WAAAA,QAAI;AACpB,UAAI,WAAW,GAAG;AAClB,UAAI,YAAY,MAAM;AACtB,aAAO,MAAM;AACT,YAAI,QAAQ;AAAA,MAChB;AAAA,IACJ;AAAA,EACJ,GAAG,CAAC,GAAG,CAAC;AAER,SAAO,oCAAC,WAAM,KAAK,OAAQ,GAAG,MAAM;AACxC,CAAC;",
   "names": ["Hls"]
 }

package/dist/cjs/components/InfiniteScroll.js

@@ -27,7 +27,21 @@ var import_ahooks = require("ahooks");
 var import_deepsea_tools = require("deepsea-tools");
 var import_react = require("react");
 var InfiniteScroll = (0, import_react.forwardRef)((props, ref) => {
-  const { className, direction = "vertical", children, containerClassName, containerStyle, gap = 0, duration, withGap, withEqual, pauseOnHover, onMouseEnter, onMouseLeave, ...rest } = props;
+  const {
+    className,
+    direction = "vertical",
+    children,
+    containerClassName,
+    containerStyle,
+    gap = 0,
+    duration,
+    withGap,
+    withEqual,
+    pauseOnHover,
+    onMouseEnter,
+    onMouseLeave,
+    ...rest
+  } = props;
   const wrapper = (0, import_react.useRef)(null);
   const wrapperSize = (0, import_ahooks.useSize)(wrapper);
   const ele = (0, import_react.useRef)(null);

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": "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",
+  "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"]
 }