deepsea-components 5.8.0 → 5.8.1

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

@@ -1 +1 @@
-{"version":3,"names":["useSize","clsx","useEffect","useImperativeHandle","useRef","useState","css","px","transformCSSVariable","jsx","_jsx","getGapRange","gap","Array","isArray","getGapCountAndSize","width","itemWidth","minGap","maxGap","count","Math","floor","averageGap","ManualFlow","props","itemHeight","columnGap","rowGap","maxRows","data","render","keyExactor","className","style","wrapperClassName","wrapperStyle","throttle","transitionDuration","onSizeChange","containerClassName","containerStyle","element","rest","minColumnGap","maxColumnGap","columnCount","columnGapSize","setGapAndCount","ele","contentRows","ceil","length","contentShownRows","min","height","getPosition","index","y","x","left","top","getHidden","current","task","timeout","setTimeout","clearTimeout","rowCount","overflow","itemCount","ref","children","map","item","arr","transition","display","Flow","size"],"sources":["../../../src/components/Flow.tsx"],"sourcesContent":["\"use client\"\n\nimport { useSize } from \"ahooks\"\nimport { clsx } from \"deepsea-tools\"\nimport { CSSProperties, HTMLAttributes, Key, ReactNode, RefObject, useEffect, useImperativeHandle, useRef, useState } from \"react\"\n\nimport { css } from \"@emotion/css\"\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>): ReactNode {\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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"}
+{"version":3,"names":["useEffect","useImperativeHandle","useRef","useState","css","useSize","clsx","px","transformCSSVariable","jsx","_jsx","getGapRange","gap","Array","isArray","getGapCountAndSize","width","itemWidth","minGap","maxGap","count","Math","floor","averageGap","ManualFlow","props","itemHeight","columnGap","rowGap","maxRows","data","render","keyExactor","className","style","wrapperClassName","wrapperStyle","throttle","transitionDuration","onSizeChange","containerClassName","containerStyle","element","rest","minColumnGap","maxColumnGap","columnCount","columnGapSize","setGapAndCount","ele","contentRows","ceil","length","contentShownRows","min","height","getPosition","index","y","x","left","top","getHidden","current","task","timeout","setTimeout","clearTimeout","rowCount","overflow","itemCount","ref","children","map","item","arr","transition","display","Flow","size"],"sources":["../../../src/components/Flow.tsx"],"sourcesContent":["\"use client\"\n\nimport { CSSProperties, HTMLAttributes, Key, ReactNode, RefObject, useEffect, useImperativeHandle, useRef, useState } from \"react\"\nimport { css } from \"@emotion/css\"\nimport { useSize } from \"ahooks\"\nimport { clsx } from \"deepsea-tools\"\n\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>): ReactNode {\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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"}

package/dist/esm/components/HlsPlayer.js

@@ -1,7 +1,7 @@
 "use client";
 
-import Hls from "hls.js";
 import { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
+import Hls from "hls.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const HlsPlayer = /*#__PURE__*/forwardRef((props, ref) => {
   const {

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

@@ -1 +1 @@
-{"version":3,"names":["Hls","forwardRef","useEffect","useImperativeHandle","useRef","jsx","_jsx","HlsPlayer","props","ref","src","rest","video","current","player","canPlayType","isSupported","hls","loadSource","attachMedia","destroy"],"sources":["../../../src/components/HlsPlayer.tsx"],"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,YAAY;;AAEZ,OAAOA,GAAG,MAAM,QAAQ;AACxB,SAA8BC,UAAU,EAAEC,SAAS,EAAEC,mBAAmB,EAAEC,MAAM,QAAQ,OAAO;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAM/F,OAAO,MAAMC,SAAS,gBAAGN,UAAU,CAAmC,CAACO,KAAK,EAAEC,GAAG,KAAK;EAClF,MAAM;IAAEC,GAAG;IAAE,GAAGC;EAAK,CAAC,GAAGH,KAAK;EAC9B,MAAMI,KAAK,GAAGR,MAAM,CAAmB,IAAI,CAAC;EAE5CD,mBAAmB,CAACM,GAAG,EAAE,MAAMG,KAAK,CAACC,OAAQ,EAAE,EAAE,CAAC;EAElDX,SAAS,CAAC,MAAM;IACZ,MAAM;MAAEW,OAAO,EAAEC;IAAO,CAAC,GAAGF,KAAK;IACjC,IAAI,CAACE,MAAM,IAAI,CAACJ,GAAG,EAAE;IACrB,IAAII,MAAM,CAACC,WAAW,CAAC,+BAA+B,CAAC,EAAE;MACrDD,MAAM,CAACJ,GAAG,GAAGA,GAAG;MAChB;IACJ;IACA,IAAIV,GAAG,CAACgB,WAAW,CAAC,CAAC,EAAE;MACnB,MAAMC,GAAG,GAAG,IAAIjB,GAAG,CAAC,CAAC;MACrBiB,GAAG,CAACC,UAAU,CAACR,GAAG,CAAC;MACnBO,GAAG,CAACE,WAAW,CAACL,MAAM,CAAC;MACvB,OAAO,MAAM;QACTG,GAAG,CAACG,OAAO,CAAC,CAAC;MACjB,CAAC;IACL;EACJ,CAAC,EAAE,CAACV,GAAG,CAAC,CAAC;EAET,oBAAOJ,IAAA;IAAOG,GAAG,EAAEG,KAAM;IAAA,GAAKD;EAAI,CAAG,CAAC;AAC1C,CAAC,CAAC"}
+{"version":3,"names":["forwardRef","useEffect","useImperativeHandle","useRef","Hls","jsx","_jsx","HlsPlayer","props","ref","src","rest","video","current","player","canPlayType","isSupported","hls","loadSource","attachMedia","destroy"],"sources":["../../../src/components/HlsPlayer.tsx"],"sourcesContent":["\"use client\"\n\nimport { MediaHTMLAttributes, forwardRef, useEffect, useImperativeHandle, useRef } from \"react\"\nimport Hls from \"hls.js\"\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,YAAY;;AAEZ,SAA8BA,UAAU,EAAEC,SAAS,EAAEC,mBAAmB,EAAEC,MAAM,QAAQ,OAAO;AAC/F,OAAOC,GAAG,MAAM,QAAQ;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAMxB,OAAO,MAAMC,SAAS,gBAAGP,UAAU,CAAmC,CAACQ,KAAK,EAAEC,GAAG,KAAK;EAClF,MAAM;IAAEC,GAAG;IAAE,GAAGC;EAAK,CAAC,GAAGH,KAAK;EAC9B,MAAMI,KAAK,GAAGT,MAAM,CAAmB,IAAI,CAAC;EAE5CD,mBAAmB,CAACO,GAAG,EAAE,MAAMG,KAAK,CAACC,OAAQ,EAAE,EAAE,CAAC;EAElDZ,SAAS,CAAC,MAAM;IACZ,MAAM;MAAEY,OAAO,EAAEC;IAAO,CAAC,GAAGF,KAAK;IACjC,IAAI,CAACE,MAAM,IAAI,CAACJ,GAAG,EAAE;IACrB,IAAII,MAAM,CAACC,WAAW,CAAC,+BAA+B,CAAC,EAAE;MACrDD,MAAM,CAACJ,GAAG,GAAGA,GAAG;MAChB;IACJ;IACA,IAAIN,GAAG,CAACY,WAAW,CAAC,CAAC,EAAE;MACnB,MAAMC,GAAG,GAAG,IAAIb,GAAG,CAAC,CAAC;MACrBa,GAAG,CAACC,UAAU,CAACR,GAAG,CAAC;MACnBO,GAAG,CAACE,WAAW,CAACL,MAAM,CAAC;MACvB,OAAO,MAAM;QACTG,GAAG,CAACG,OAAO,CAAC,CAAC;MACjB,CAAC;IACL;EACJ,CAAC,EAAE,CAACV,GAAG,CAAC,CAAC;EAET,oBAAOJ,IAAA;IAAOG,GAAG,EAAEG,KAAM;IAAA,GAAKD;EAAI,CAAG,CAAC;AAC1C,CAAC,CAAC"}

package/dist/esm/components/ImportExcel.js

@@ -1,7 +1,7 @@
 "use client";
 
-import { readExcel } from "deepsea-tools";
 import { forwardRef } from "react";
+import { readExcel } from "deepsea-tools";
 import { InputFile } from "./InputFile";
 import { jsx as _jsx } from "react/jsx-runtime";
 /** 专门用于读取 excel 的组件 */

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

@@ -1 +1 @@
-{"version":3,"names":["readExcel","forwardRef","InputFile","jsx","_jsx","ImportExcel","props","ref","onChange","rest","accept","type","result"],"sources":["../../../src/components/ImportExcel.tsx"],"sourcesContent":["\"use client\"\r\n\r\nimport { readExcel } from \"deepsea-tools\"\r\nimport { forwardRef } from \"react\"\r\n\r\nimport { InputFile, InputFileProps } from \"./InputFile\"\r\n\r\nexport interface ImportExcelProps extends Omit<InputFileProps, \"multiple\" | \"onChange\" | \"accept\" | \"type\"> {\r\n    onChange?: (data: Record<string, any>[]) => 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    return <InputFile ref={ref} accept=\".xlsx\" type=\"arrayBuffer\" onChange={({ result }) => onChange?.(readExcel(result))} {...rest} />\r\n})\r\n"],"mappings":"AAAA,YAAY;;AAEZ,SAASA,SAAS,QAAQ,eAAe;AACzC,SAASC,UAAU,QAAQ,OAAO;AAElC,SAASC,SAAS;AAAqC,SAAAC,GAAA,IAAAC,IAAA;AAMvD;AACA,OAAO,MAAMC,WAAW,gBAAGJ,UAAU,CAAqC,CAACK,KAAK,EAAEC,GAAG,KAAK;EACtF,MAAM;IAAEC,QAAQ;IAAE,GAAGC;EAAK,CAAC,GAAGH,KAAK;EAEnC,oBAAOF,IAAA,CAACF,SAAS;IAACK,GAAG,EAAEA,GAAI;IAACG,MAAM,EAAC,OAAO;IAACC,IAAI,EAAC,aAAa;IAACH,QAAQ,EAAEA,CAAC;MAAEI;IAAO,CAAC,KAAKJ,QAAQ,GAAGR,SAAS,CAACY,MAAM,CAAC,CAAE;IAAA,GAAKH;EAAI,CAAG,CAAC;AACvI,CAAC,CAAC"}
+{"version":3,"names":["forwardRef","readExcel","InputFile","jsx","_jsx","ImportExcel","props","ref","onChange","rest","accept","type","result"],"sources":["../../../src/components/ImportExcel.tsx"],"sourcesContent":["\"use client\"\n\nimport { forwardRef } from \"react\"\nimport { readExcel } from \"deepsea-tools\"\n\nimport { InputFile, InputFileProps } from \"./InputFile\"\n\nexport interface ImportExcelProps extends Omit<InputFileProps, \"multiple\" | \"onChange\" | \"accept\" | \"type\"> {\n    onChange?: (data: Record<string, any>[]) => void\n}\n\n/** 专门用于读取 excel 的组件 */\nexport const ImportExcel = forwardRef<HTMLInputElement, ImportExcelProps>((props, ref) => {\n    const { onChange, ...rest } = props\n\n    return <InputFile ref={ref} accept=\".xlsx\" type=\"arrayBuffer\" onChange={({ result }) => onChange?.(readExcel(result))} {...rest} />\n})\n"],"mappings":"AAAA,YAAY;;AAEZ,SAASA,UAAU,QAAQ,OAAO;AAClC,SAASC,SAAS,QAAQ,eAAe;AAEzC,SAASC,SAAS;AAAqC,SAAAC,GAAA,IAAAC,IAAA;AAMvD;AACA,OAAO,MAAMC,WAAW,gBAAGL,UAAU,CAAqC,CAACM,KAAK,EAAEC,GAAG,KAAK;EACtF,MAAM;IAAEC,QAAQ;IAAE,GAAGC;EAAK,CAAC,GAAGH,KAAK;EAEnC,oBAAOF,IAAA,CAACF,SAAS;IAACK,GAAG,EAAEA,GAAI;IAACG,MAAM,EAAC,OAAO;IAACC,IAAI,EAAC,aAAa;IAACH,QAAQ,EAAEA,CAAC;MAAEI;IAAO,CAAC,KAAKJ,QAAQ,GAAGP,SAAS,CAACW,MAAM,CAAC,CAAE;IAAA,GAAKH;EAAI,CAAG,CAAC;AACvI,CAAC,CAAC"}

package/dist/esm/components/InfiniteScroll.js

@@ -1,9 +1,9 @@
 "use client";
 
-import { useSize } from "ahooks";
-import { clsx } from "deepsea-tools";
 import { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
 import { css } from "@emotion/css";
+import { useSize } from "ahooks";
+import { clsx } from "deepsea-tools";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 /**

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

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

package/dist/esm/components/LoopSwiper.js

@@ -1,8 +1,8 @@
 "use client";
 
-import { clsx } from "deepsea-tools";
 import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
 import { css } from "@emotion/css";
+import { clsx } from "deepsea-tools";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 /** 循环播放组件 */

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

@@ -1 +1 @@
-{"version":3,"names":["clsx","forwardRef","useEffect","useImperativeHandle","useRef","useState","css","jsx","_jsx","jsxs","_jsxs","LoopSwiper","props","ref","className","style","children","direction","period","reverse","gap","rest","wrapper","container","swiper","setSwiper","directionRef","current","flexDirection","animationName","animationDuration","animationTimingFunction","animationIterationCount","wrapperEle","containerEle","wrapperWidth","wrapperHeight","containerWidth","containerHeight","observer","ResizeObserver","entries","forEach","entry","target","contentRect","width","height","observe","display"],"sources":["../../../src/components/LoopSwiper.tsx"],"sourcesContent":["\"use client\"\n\nimport { clsx } from \"deepsea-tools\"\nimport { CSSProperties, HTMLAttributes, forwardRef, useEffect, useImperativeHandle, useRef, useState } from \"react\"\n\nimport { css } from \"@emotion/css\"\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":"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"}
+{"version":3,"names":["forwardRef","useEffect","useImperativeHandle","useRef","useState","css","clsx","jsx","_jsx","jsxs","_jsxs","LoopSwiper","props","ref","className","style","children","direction","period","reverse","gap","rest","wrapper","container","swiper","setSwiper","directionRef","current","flexDirection","animationName","animationDuration","animationTimingFunction","animationIterationCount","wrapperEle","containerEle","wrapperWidth","wrapperHeight","containerWidth","containerHeight","observer","ResizeObserver","entries","forEach","entry","target","contentRect","width","height","observe","display"],"sources":["../../../src/components/LoopSwiper.tsx"],"sourcesContent":["\"use client\"\n\nimport { CSSProperties, HTMLAttributes, forwardRef, useEffect, useImperativeHandle, useRef, useState } from \"react\"\nimport { css } from \"@emotion/css\"\nimport { clsx } from \"deepsea-tools\"\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":"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"}

package/dist/esm/components/Scroll.js

@@ -1,9 +1,9 @@
 "use client";
 
-import { clsx } from "deepsea-tools";
 import { forwardRef, useEffect, useImperativeHandle, useLayoutEffect, useRef } from "react";
-import Scrollbar from "smooth-scrollbar";
 import { css } from "@emotion/css";
+import { clsx } from "deepsea-tools";
+import Scrollbar from "smooth-scrollbar";
 import { px, transformCSSVariable } from "../utils";
 import { jsx as _jsx } from "react/jsx-runtime";
 export { default as Scrollbar } from "smooth-scrollbar";
@@ -42,25 +42,16 @@ export const Scroll = /*#__PURE__*/forwardRef((props, ref) => {
     ref: ele,
     className: clsx(css`
                     .scrollbar-track.scrollbar-track-x {
-                        ${thumbWidth !== undefined ? "height: var(--thumb-width);" : ""}
-                        ${trackColor !== undefined ? "background-color: var(--track-color);" : ""}
+                        ${thumbWidth !== undefined ? "height: var(--thumb-width);" : ""} ${trackColor !== undefined ? "background-color: var(--track-color);" : ""}
                     }
-
                     .scrollbar-thumb.scrollbar-thumb-x {
-                        ${thumbWidth !== undefined ? "height: var(--thumb-width);" : ""}
-                        ${thumbRadius !== undefined ? "border-radius: var(--thumb-radius);" : ""}
-                        ${thumbColor !== undefined ? "background-color: var(--thumb-color);" : ""}
+                        ${thumbWidth !== undefined ? "height: var(--thumb-width);" : ""} ${thumbRadius !== undefined ? "border-radius: var(--thumb-radius);" : ""} ${thumbColor !== undefined ? "background-color: var(--thumb-color);" : ""}
                     }
-
                     .scrollbar-track.scrollbar-track-y {
-                        ${thumbWidth !== undefined ? "width: var(--thumb-width);" : ""}
-                        ${trackColor !== undefined ? "background-color: var(--track-color);" : ""}
+                        ${thumbWidth !== undefined ? "width: var(--thumb-width);" : ""} ${trackColor !== undefined ? "background-color: var(--track-color);" : ""}
                     }
-
                     .scrollbar-thumb.scrollbar-thumb-y {
-                        ${thumbWidth !== undefined ? "width: var(--thumb-width);" : ""}
-                        ${thumbRadius !== undefined ? "border-radius: var(--thumb-radius);" : ""}
-                        ${thumbColor !== undefined ? "background-color: var(--thumb-color);" : ""}
+                        ${thumbWidth !== undefined ? "width: var(--thumb-width);" : ""} ${thumbRadius !== undefined ? "border-radius: var(--thumb-radius);" : ""} ${thumbColor !== undefined ? "background-color: var(--thumb-color);" : ""}
                     }
                 `, className),
     style: transformCSSVariable({

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

@@ -1 +1 @@
-{"version":3,"names":["clsx","forwardRef","useEffect","useImperativeHandle","useLayoutEffect","useRef","Scrollbar","css","px","transformCSSVariable","jsx","_jsx","default","Scroll","props","ref","children","options","className","style","scrollbar","onScrollbar","rest","thumbWidth","thumbRadius","thumbColor","trackColor","scrollbarOptions","ele","bar","current","init","destroy","addListener","removeListener","undefined"],"sources":["../../../src/components/Scroll.tsx"],"sourcesContent":["\"use client\"\n\nimport { clsx } from \"deepsea-tools\"\nimport { CSSProperties, ForwardedRef, HTMLAttributes, forwardRef, useEffect, useImperativeHandle, useLayoutEffect, useRef } from \"react\"\nimport Scrollbar from \"smooth-scrollbar\"\nimport type { ScrollListener, ScrollbarOptions } from \"smooth-scrollbar/interfaces\"\n\nimport { css } from \"@emotion/css\"\nimport { px, transformCSSVariable } from \"@/utils\"\n\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":"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"}
+{"version":3,"names":["forwardRef","useEffect","useImperativeHandle","useLayoutEffect","useRef","css","clsx","Scrollbar","px","transformCSSVariable","jsx","_jsx","default","Scroll","props","ref","children","options","className","style","scrollbar","onScrollbar","rest","thumbWidth","thumbRadius","thumbColor","trackColor","scrollbarOptions","ele","bar","current","init","destroy","addListener","removeListener","undefined"],"sources":["../../../src/components/Scroll.tsx"],"sourcesContent":["\"use client\"\n\nimport { CSSProperties, ForwardedRef, HTMLAttributes, forwardRef, useEffect, useImperativeHandle, useLayoutEffect, useRef } from \"react\"\nimport { css } from \"@emotion/css\"\nimport { clsx } from \"deepsea-tools\"\nimport Scrollbar from \"smooth-scrollbar\"\nimport type { ScrollListener, ScrollbarOptions } from \"smooth-scrollbar/interfaces\"\n\nimport { px, transformCSSVariable } from \"@/utils\"\n\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);\" : \"\"} ${trackColor !== undefined\n                            ? \"background-color: var(--track-color);\"\n                            : \"\"}\n                    }\n                    .scrollbar-thumb.scrollbar-thumb-x {\n                        ${thumbWidth !== undefined ? \"height: var(--thumb-width);\" : \"\"} ${thumbRadius !== undefined\n                            ? \"border-radius: var(--thumb-radius);\"\n                            : \"\"} ${thumbColor !== undefined ? \"background-color: var(--thumb-color);\" : \"\"}\n                    }\n                    .scrollbar-track.scrollbar-track-y {\n                        ${thumbWidth !== undefined ? \"width: var(--thumb-width);\" : \"\"} ${trackColor !== undefined\n                            ? \"background-color: var(--track-color);\"\n                            : \"\"}\n                    }\n                    .scrollbar-thumb.scrollbar-thumb-y {\n                        ${thumbWidth !== undefined ? \"width: var(--thumb-width);\" : \"\"} ${thumbRadius !== undefined\n                            ? \"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":"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"}

package/dist/esm/components/SectionRing.js

@@ -1,7 +1,7 @@
 "use client";
 
-import { drawArc } from "deepsea-tools";
 import { forwardRef } from "react";
+import { drawArc } from "deepsea-tools";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const SectionRing = /*#__PURE__*/forwardRef((props, ref) => {
   const {

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

@@ -1 +1 @@
-{"version":3,"names":["drawArc","forwardRef","jsx","_jsx","SectionRing","props","ref","outerRadius","o","innerRadius","i","count","c","angel","a","style","rest","s","Math","PI","arc","radius","startAngle","endAngle","options","width","height","clipPath","Array","fill","map","it","idx","line","anticlockwise","join"],"sources":["../../../src/components/SectionRing.tsx"],"sourcesContent":["\"use client\"\n\nimport { DrawArcOptions, drawArc } from \"deepsea-tools\"\nimport { HTMLAttributes, forwardRef } 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 = forwardRef<HTMLDivElement, SectionRingProps>((props, ref) => {\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            ref={ref}\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                ...style,\n            }}\n            {...rest}\n        />\n    )\n})\n"],"mappings":"AAAA,YAAY;;AAEZ,SAAyBA,OAAO,QAAQ,eAAe;AACvD,SAAyBC,UAAU,QAAQ,OAAO;AAAA,SAAAC,GAAA,IAAAC,IAAA;AASlD,OAAO,MAAMC,WAAW,gBAAGH,UAAU,CAAmC,CAACI,KAAK,EAAEC,GAAG,KAAK;EACpF,MAAM;IAAEC,WAAW,EAAEC,CAAC;IAAEC,WAAW,EAAEC,CAAC;IAAEC,KAAK,EAAEC,CAAC;IAAEC,KAAK,EAAEC,CAAC;IAAEC,KAAK;IAAE,GAAGC;EAAK,CAAC,GAAGX,KAAK;EAEpF,MAAMY,CAAC,GAAIC,IAAI,CAACC,EAAE,GAAG,CAAC,GAAIP,CAAC,GAAGE,CAAC;EAE/B,SAASM,GAAGA,CAACC,MAAc,EAAEC,UAAkB,EAAEC,QAAgB,EAAEC,OAAuB,GAAG,CAAC,CAAC,EAAE;IAC7F,OAAOxB,OAAO,CAACQ,CAAC,EAAEA,CAAC,EAAEa,MAAM,EAAEC,UAAU,EAAEC,QAAQ,EAAEC,OAAO,CAAC;EAC/D;EAEA,oBACIrB,IAAA;IACIG,GAAG,EAAEA,GAAI;IACTS,KAAK,EAAE;MACHU,KAAK,EAAEjB,CAAC,GAAG,CAAC;MACZkB,MAAM,EAAElB,CAAC,GAAG,CAAC;MACbmB,QAAQ,EAAG,SAAQC,KAAK,CAAChB,CAAC,CAAC,CACtBiB,IAAI,CAAC,CAAC,CAAC,CACPC,GAAG,CACA,CAACC,EAAE,EAAEC,GAAG,KACH,GAAEZ,GAAG,CAACZ,CAAC,EAAEwB,GAAG,IAAIlB,CAAC,GAAGG,CAAC,CAAC,EAAEe,GAAG,IAAIlB,CAAC,GAAGG,CAAC,CAAC,GAAGH,CAAC,CAAE,IAAGM,GAAG,CAACV,CAAC,EAAEsB,GAAG,IAAIlB,CAAC,GAAGG,CAAC,CAAC,GAAGH,CAAC,EAAEkB,GAAG,IAAIlB,CAAC,GAAGG,CAAC,CAAC,EAAE;QAAEgB,IAAI,EAAE,IAAI;QAAEC,aAAa,EAAE;MAAK,CAAC,CAAE,EACrI,CAAC,CACAC,IAAI,CAAC,GAAG,CAAE,MAAK;MACpB,GAAGpB;IACP,CAAE;IAAA,GACEC;EAAI,CACX,CAAC;AAEV,CAAC,CAAC"}
+{"version":3,"names":["forwardRef","drawArc","jsx","_jsx","SectionRing","props","ref","outerRadius","o","innerRadius","i","count","c","angel","a","style","rest","s","Math","PI","arc","radius","startAngle","endAngle","options","width","height","clipPath","Array","fill","map","it","idx","line","anticlockwise","join"],"sources":["../../../src/components/SectionRing.tsx"],"sourcesContent":["\"use client\"\n\nimport { HTMLAttributes, forwardRef } from \"react\"\nimport { DrawArcOptions, drawArc } from \"deepsea-tools\"\n\nexport interface SectionRingProps extends HTMLAttributes<HTMLDivElement> {\n    outerRadius: number\n    innerRadius: number\n    count: number\n    angel: number\n}\n\nexport const SectionRing = forwardRef<HTMLDivElement, SectionRingProps>((props, ref) => {\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            ref={ref}\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                ...style,\n            }}\n            {...rest}\n        />\n    )\n})\n"],"mappings":"AAAA,YAAY;;AAEZ,SAAyBA,UAAU,QAAQ,OAAO;AAClD,SAAyBC,OAAO,QAAQ,eAAe;AAAA,SAAAC,GAAA,IAAAC,IAAA;AASvD,OAAO,MAAMC,WAAW,gBAAGJ,UAAU,CAAmC,CAACK,KAAK,EAAEC,GAAG,KAAK;EACpF,MAAM;IAAEC,WAAW,EAAEC,CAAC;IAAEC,WAAW,EAAEC,CAAC;IAAEC,KAAK,EAAEC,CAAC;IAAEC,KAAK,EAAEC,CAAC;IAAEC,KAAK;IAAE,GAAGC;EAAK,CAAC,GAAGX,KAAK;EAEpF,MAAMY,CAAC,GAAIC,IAAI,CAACC,EAAE,GAAG,CAAC,GAAIP,CAAC,GAAGE,CAAC;EAE/B,SAASM,GAAGA,CAACC,MAAc,EAAEC,UAAkB,EAAEC,QAAgB,EAAEC,OAAuB,GAAG,CAAC,CAAC,EAAE;IAC7F,OAAOvB,OAAO,CAACO,CAAC,EAAEA,CAAC,EAAEa,MAAM,EAAEC,UAAU,EAAEC,QAAQ,EAAEC,OAAO,CAAC;EAC/D;EAEA,oBACIrB,IAAA;IACIG,GAAG,EAAEA,GAAI;IACTS,KAAK,EAAE;MACHU,KAAK,EAAEjB,CAAC,GAAG,CAAC;MACZkB,MAAM,EAAElB,CAAC,GAAG,CAAC;MACbmB,QAAQ,EAAG,SAAQC,KAAK,CAAChB,CAAC,CAAC,CACtBiB,IAAI,CAAC,CAAC,CAAC,CACPC,GAAG,CACA,CAACC,EAAE,EAAEC,GAAG,KACH,GAAEZ,GAAG,CAACZ,CAAC,EAAEwB,GAAG,IAAIlB,CAAC,GAAGG,CAAC,CAAC,EAAEe,GAAG,IAAIlB,CAAC,GAAGG,CAAC,CAAC,GAAGH,CAAC,CAAE,IAAGM,GAAG,CAACV,CAAC,EAAEsB,GAAG,IAAIlB,CAAC,GAAGG,CAAC,CAAC,GAAGH,CAAC,EAAEkB,GAAG,IAAIlB,CAAC,GAAGG,CAAC,CAAC,EAAE;QAAEgB,IAAI,EAAE,IAAI;QAAEC,aAAa,EAAE;MAAK,CAAC,CAAE,EACrI,CAAC,CACAC,IAAI,CAAC,GAAG,CAAE,MAAK;MACpB,GAAGpB;IACP,CAAE;IAAA,GACEC;EAAI,CACX,CAAC;AAEV,CAAC,CAAC"}

package/dist/esm/components/Skeleton.js

@@ -1,8 +1,8 @@
 "use client";
 
-import { clsx } from "deepsea-tools";
 import { forwardRef } from "react";
 import { css } from "@emotion/css";
+import { clsx } from "deepsea-tools";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const Skeleton = /*#__PURE__*/forwardRef((props, ref) => {
   const {

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

@@ -1 +1 @@
-{"version":3,"names":["clsx","forwardRef","css","jsx","_jsx","Skeleton","props","ref","className","children","loading","undefined","rest"],"sources":["../../../src/components/Skeleton.tsx"],"sourcesContent":["\"use client\"\n\nimport { clsx } from \"deepsea-tools\"\nimport { HTMLAttributes, forwardRef } from \"react\"\n\nimport { css } from \"@emotion/css\"\n\nexport interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {\n    loading?: boolean\n}\n\nexport const Skeleton = forwardRef<HTMLDivElement, SkeletonProps>((props, ref) => {\n    const { className, children, loading = children === undefined || children === null, ...rest } = props\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,YAAY;;AAEZ,SAASA,IAAI,QAAQ,eAAe;AACpC,SAAyBC,UAAU,QAAQ,OAAO;AAElD,SAASC,GAAG,QAAQ,cAAc;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAMlC,OAAO,MAAMC,QAAQ,gBAAGJ,UAAU,CAAgC,CAACK,KAAK,EAAEC,GAAG,KAAK;EAC9E,MAAM;IAAEC,SAAS;IAAEC,QAAQ;IAAEC,OAAO,GAAGD,QAAQ,KAAKE,SAAS,IAAIF,QAAQ,KAAK,IAAI;IAAE,GAAGG;EAAK,CAAC,GAAGN,KAAK;EAErG,oBACIF,IAAA;IACIG,GAAG,EAAEA,GAAI;IACTC,SAAS,EAAER,IAAI,CACXE,GAAI;AACpB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iBAAiB,EACDQ,OAAO,IACHR,GAAI;AACxB;AACA;AACA;AACA;AACA;AACA;AACA;AACA,qBAAqB,EACLM,SACJ,CAAE;IAAA,GACEI,IAAI;IAAAH,QAAA,EAEPA;EAAQ,CACR,CAAC;AAEd,CAAC,CAAC"}
+{"version":3,"names":["forwardRef","css","clsx","jsx","_jsx","Skeleton","props","ref","className","children","loading","undefined","rest"],"sources":["../../../src/components/Skeleton.tsx"],"sourcesContent":["\"use client\"\n\nimport { HTMLAttributes, forwardRef } from \"react\"\nimport { css } from \"@emotion/css\"\nimport { clsx } from \"deepsea-tools\"\n\nexport interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {\n    loading?: boolean\n}\n\nexport const Skeleton = forwardRef<HTMLDivElement, SkeletonProps>((props, ref) => {\n    const { className, children, loading = children === undefined || children === null, ...rest } = props\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,YAAY;;AAEZ,SAAyBA,UAAU,QAAQ,OAAO;AAClD,SAASC,GAAG,QAAQ,cAAc;AAClC,SAASC,IAAI,QAAQ,eAAe;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAMpC,OAAO,MAAMC,QAAQ,gBAAGL,UAAU,CAAgC,CAACM,KAAK,EAAEC,GAAG,KAAK;EAC9E,MAAM;IAAEC,SAAS;IAAEC,QAAQ;IAAEC,OAAO,GAAGD,QAAQ,KAAKE,SAAS,IAAIF,QAAQ,KAAK,IAAI;IAAE,GAAGG;EAAK,CAAC,GAAGN,KAAK;EAErG,oBACIF,IAAA;IACIG,GAAG,EAAEA,GAAI;IACTC,SAAS,EAAEN,IAAI,CACXD,GAAI;AACpB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iBAAiB,EACDS,OAAO,IACHT,GAAI;AACxB;AACA;AACA;AACA;AACA;AACA;AACA;AACA,qBAAqB,EACLO,SACJ,CAAE;IAAA,GACEI,IAAI;IAAAH,QAAA,EAEPA;EAAQ,CACR,CAAC;AAEd,CAAC,CAAC"}

package/dist/esm/components/Title.js

@@ -1,8 +1,8 @@
 "use client";
 
-import { isBrowser } from "deepsea-tools";
 import { forwardRef, useImperativeHandle, useLayoutEffect, useRef } from "react";
 import { createPortal } from "react-dom";
+import { isBrowser } from "deepsea-tools";
 import { getReactVersion } from "../utils/getReactVersion";
 import { jsx as _jsx } from "react/jsx-runtime";
 const [major] = getReactVersion();

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

@@ -1 +1 @@
-{"version":3,"names":["isBrowser","forwardRef","useImperativeHandle","useLayoutEffect","useRef","createPortal","getReactVersion","jsx","_jsx","major","Title","props","ref","ele","current","title","document","head","querySelector","insertBefore"],"sources":["../../../src/components/Title.tsx"],"sourcesContent":["\"use client\"\n\nimport { isBrowser } from \"deepsea-tools\"\nimport { ComponentPropsWithoutRef, forwardRef, useImperativeHandle, useLayoutEffect, useRef } from \"react\"\nimport { createPortal } from \"react-dom\"\n\nimport { getReactVersion } from \"@/utils/getReactVersion\"\n\nexport type TitleProps = ComponentPropsWithoutRef<\"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 isBrowser && createPortal(<title ref={ele} {...props} />, document.head)\n})\n"],"mappings":"AAAA,YAAY;;AAEZ,SAASA,SAAS,QAAQ,eAAe;AACzC,SAAmCC,UAAU,EAAEC,mBAAmB,EAAEC,eAAe,EAAEC,MAAM,QAAQ,OAAO;AAC1G,SAASC,YAAY,QAAQ,WAAW;AAExC,SAASC,eAAe;AAAiC,SAAAC,GAAA,IAAAC,IAAA;AAIzD,MAAM,CAACC,KAAK,CAAC,GAAGH,eAAe,CAAC,CAAC;AAEjC,OAAO,MAAMI,KAAK,gBAAGT,UAAU,CAA+B,CAACU,KAAK,EAAEC,GAAG,KAAK;EAC1E,IAAIH,KAAK,IAAI,EAAE,EAAE,oBAAOD,IAAA;IAAOI,GAAG,EAAEA,GAAI;IAAA,GAAKD;EAAK,CAAG,CAAC;EAEtD,MAAME,GAAG,GAAGT,MAAM,CAAmB,IAAI,CAAC;EAE1CF,mBAAmB,CAACU,GAAG,EAAE,MAAMC,GAAG,CAACC,OAA2B,EAAE,CAACD,GAAG,CAACC,OAAO,CAAC,CAAC;EAE9EX,eAAe,CAAC,MAAM;IAClB,MAAMY,KAAK,GAAGC,QAAQ,CAACC,IAAI,CAACC,aAAa,CAAC,OAAO,CAAC;IAClD,IAAIH,KAAK,KAAKF,GAAG,CAACC,OAAO,EAAE;IAC3BE,QAAQ,CAACC,IAAI,CAACE,YAAY,CAACN,GAAG,CAACC,OAAO,EAAsBC,KAAK,CAAC;EACtE,CAAC,EAAE,EAAE,CAAC;EAEN,OAAOf,SAAS,iBAAIK,YAAY,eAACG,IAAA;IAAOI,GAAG,EAAEC,GAAI;IAAA,GAAKF;EAAK,CAAG,CAAC,EAAEK,QAAQ,CAACC,IAAI,CAAC;AACnF,CAAC,CAAC"}
+{"version":3,"names":["forwardRef","useImperativeHandle","useLayoutEffect","useRef","createPortal","isBrowser","getReactVersion","jsx","_jsx","major","Title","props","ref","ele","current","title","document","head","querySelector","insertBefore"],"sources":["../../../src/components/Title.tsx"],"sourcesContent":["\"use client\"\n\nimport { ComponentPropsWithoutRef, forwardRef, useImperativeHandle, useLayoutEffect, useRef } from \"react\"\nimport { createPortal } from \"react-dom\"\nimport { isBrowser } from \"deepsea-tools\"\n\nimport { getReactVersion } from \"@/utils/getReactVersion\"\n\nexport type TitleProps = ComponentPropsWithoutRef<\"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 isBrowser && createPortal(<title ref={ele} {...props} />, document.head)\n})\n"],"mappings":"AAAA,YAAY;;AAEZ,SAAmCA,UAAU,EAAEC,mBAAmB,EAAEC,eAAe,EAAEC,MAAM,QAAQ,OAAO;AAC1G,SAASC,YAAY,QAAQ,WAAW;AACxC,SAASC,SAAS,QAAQ,eAAe;AAEzC,SAASC,eAAe;AAAiC,SAAAC,GAAA,IAAAC,IAAA;AAIzD,MAAM,CAACC,KAAK,CAAC,GAAGH,eAAe,CAAC,CAAC;AAEjC,OAAO,MAAMI,KAAK,gBAAGV,UAAU,CAA+B,CAACW,KAAK,EAAEC,GAAG,KAAK;EAC1E,IAAIH,KAAK,IAAI,EAAE,EAAE,oBAAOD,IAAA;IAAOI,GAAG,EAAEA,GAAI;IAAA,GAAKD;EAAK,CAAG,CAAC;EAEtD,MAAME,GAAG,GAAGV,MAAM,CAAmB,IAAI,CAAC;EAE1CF,mBAAmB,CAACW,GAAG,EAAE,MAAMC,GAAG,CAACC,OAA2B,EAAE,CAACD,GAAG,CAACC,OAAO,CAAC,CAAC;EAE9EZ,eAAe,CAAC,MAAM;IAClB,MAAMa,KAAK,GAAGC,QAAQ,CAACC,IAAI,CAACC,aAAa,CAAC,OAAO,CAAC;IAClD,IAAIH,KAAK,KAAKF,GAAG,CAACC,OAAO,EAAE;IAC3BE,QAAQ,CAACC,IAAI,CAACE,YAAY,CAACN,GAAG,CAACC,OAAO,EAAsBC,KAAK,CAAC;EACtE,CAAC,EAAE,EAAE,CAAC;EAEN,OAAOV,SAAS,iBAAID,YAAY,eAACI,IAAA;IAAOI,GAAG,EAAEC,GAAI;IAAA,GAAKF;EAAK,CAAG,CAAC,EAAEK,QAAQ,CAACC,IAAI,CAAC;AACnF,CAAC,CAAC"}

package/dist/esm/components/TransitionBox.js

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

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

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

package/dist/esm/components/TransitionNum.js

@@ -1,7 +1,7 @@
 "use client";
 
-import { setFrameInterval } from "deepsea-tools";
 import { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
+import { setFrameInterval } from "deepsea-tools";
 import { jsx as _jsx } from "react/jsx-runtime";
 /** 渐变数字组件 */
 export const TransitionNum = /*#__PURE__*/forwardRef((props, ref) => {

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

@@ -1 +1 @@
-{"version":3,"names":["setFrameInterval","forwardRef","useEffect","useImperativeHandle","useRef","jsx","_jsx","TransitionNum","props","ref","children","num","period","numToStr","ins","rest","Number","isInteger","RangeError","ele","cache","show","current","get","innerText","String","div","speed","cancel","Math","floor","ceil"],"sources":["../../../src/components/TransitionNum.tsx"],"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,YAAY;;AAEZ,SAASA,gBAAgB,QAAQ,eAAe;AAChD,SAAuCC,UAAU,EAAEC,SAAS,EAAEC,mBAAmB,EAAEC,MAAM,QAAQ,OAAO;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAiBxG;AACA,OAAO,MAAMC,aAAa,gBAAGN,UAAU,CAAqC,CAACO,KAAK,EAAEC,GAAG,KAAK;EACxF,MAAM;IAAEC,QAAQ,EAAEC,GAAG;IAAEC,MAAM;IAAEC,QAAQ;IAAEC,GAAG;IAAE,GAAGC;EAAK,CAAC,GAAGP,KAAK;EAC/D,IAAI,CAACQ,MAAM,CAACC,SAAS,CAACN,GAAG,CAAC,IAAI,CAACK,MAAM,CAACC,SAAS,CAACL,MAAM,CAAC,IAAIA,MAAM,IAAI,CAAC,EAAE;IACpE,MAAM,IAAIM,UAAU,CAAC,oBAAoB,CAAC;EAC9C;EACA,MAAMC,GAAG,GAAGf,MAAM,CAAiB,IAAI,CAAC;EACxC,MAAMgB,KAAK,GAAGhB,MAAM,CAAC;IAAEO,GAAG;IAAEC,MAAM;IAAEC,QAAQ;IAAEQ,IAAI,EAAEV;EAAI,CAAC,CAAC;EAC1DS,KAAK,CAACE,OAAO,GAAG;IAAE,GAAGF,KAAK,CAACE,OAAO;IAAEX,GAAG;IAAEC,MAAM;IAAEC;EAAS,CAAC;EAE3DV,mBAAmB,CAACM,GAAG,EAAE,MAAMU,GAAG,CAACG,OAAQ,EAAE,EAAE,CAAC;EAChDnB,mBAAmB,CAACW,GAAG,EAAE,OAAO;IAAES,GAAG,EAAEA,CAAA,KAAMH,KAAK,CAACE,OAAO,CAACD;EAAK,CAAC,CAAC,EAAE,EAAE,CAAC;EAEvEnB,SAAS,CAAC,MAAM;IACZ,MAAM;MAAES,GAAG;MAAEC,MAAM;MAAES,IAAI;MAAER;IAAS,CAAC,GAAGO,KAAK,CAACE,OAAO;IACrDH,GAAG,CAACG,OAAO,CAAEE,SAAS,GAAG,CAACX,QAAQ,IAAIY,MAAM,EAAEJ,IAAI,CAAC;IACnD,IAAIV,GAAG,KAAKU,IAAI,EAAE;IAClB,MAAMK,GAAG,GAAGP,GAAG,CAACG,OAAQ;IACxB,MAAMK,KAAK,GAAG,CAAChB,GAAG,GAAGU,IAAI,IAAIT,MAAM;IACnC,MAAMgB,MAAM,GAAG5B,gBAAgB,CAAC,MAAM;MAClC,MAAM;QAAEW,GAAG;QAAEE;MAAS,CAAC,GAAGO,KAAK,CAACE,OAAO;MACvCF,KAAK,CAACE,OAAO,CAACD,IAAI,IAAIM,KAAK;MAC3B,IAAKA,KAAK,GAAG,CAAC,IAAIP,KAAK,CAACE,OAAO,CAACD,IAAI,GAAGV,GAAG,IAAMgB,KAAK,GAAG,CAAC,IAAIP,KAAK,CAACE,OAAO,CAACD,IAAI,GAAGV,GAAI,EAAE;QACpFiB,MAAM,CAAC,CAAC;QACRR,KAAK,CAACE,OAAO,CAACD,IAAI,GAAGV,GAAG;MAC5B;MACAe,GAAG,CAACF,SAAS,GAAG,CAACX,QAAQ,IAAIY,MAAM,EAAEE,KAAK,GAAG,CAAC,GAAGE,IAAI,CAACC,KAAK,CAACV,KAAK,CAACE,OAAO,CAACD,IAAI,CAAC,GAAGQ,IAAI,CAACE,IAAI,CAACX,KAAK,CAACE,OAAO,CAACD,IAAI,CAAC,CAAC;IACpH,CAAC,EAAE,CAAC,CAAC;IAEL,OAAOO,MAAM;EACjB,CAAC,EAAE,CAACjB,GAAG,CAAC,CAAC;EAET,oBAAOL,IAAA;IAAKG,GAAG,EAAEU,GAAI;IAAA,GAAKJ;EAAI,CAAG,CAAC;AACtC,CAAC,CAAC"}
+{"version":3,"names":["forwardRef","useEffect","useImperativeHandle","useRef","setFrameInterval","jsx","_jsx","TransitionNum","props","ref","children","num","period","numToStr","ins","rest","Number","isInteger","RangeError","ele","cache","show","current","get","innerText","String","div","speed","cancel","Math","floor","ceil"],"sources":["../../../src/components/TransitionNum.tsx"],"sourcesContent":["\"use client\"\n\nimport { ForwardedRef, HTMLAttributes, forwardRef, useEffect, useImperativeHandle, useRef } from \"react\"\nimport { setFrameInterval } from \"deepsea-tools\"\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,YAAY;;AAEZ,SAAuCA,UAAU,EAAEC,SAAS,EAAEC,mBAAmB,EAAEC,MAAM,QAAQ,OAAO;AACxG,SAASC,gBAAgB,QAAQ,eAAe;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAiBhD;AACA,OAAO,MAAMC,aAAa,gBAAGP,UAAU,CAAqC,CAACQ,KAAK,EAAEC,GAAG,KAAK;EACxF,MAAM;IAAEC,QAAQ,EAAEC,GAAG;IAAEC,MAAM;IAAEC,QAAQ;IAAEC,GAAG;IAAE,GAAGC;EAAK,CAAC,GAAGP,KAAK;EAC/D,IAAI,CAACQ,MAAM,CAACC,SAAS,CAACN,GAAG,CAAC,IAAI,CAACK,MAAM,CAACC,SAAS,CAACL,MAAM,CAAC,IAAIA,MAAM,IAAI,CAAC,EAAE;IACpE,MAAM,IAAIM,UAAU,CAAC,oBAAoB,CAAC;EAC9C;EACA,MAAMC,GAAG,GAAGhB,MAAM,CAAiB,IAAI,CAAC;EACxC,MAAMiB,KAAK,GAAGjB,MAAM,CAAC;IAAEQ,GAAG;IAAEC,MAAM;IAAEC,QAAQ;IAAEQ,IAAI,EAAEV;EAAI,CAAC,CAAC;EAC1DS,KAAK,CAACE,OAAO,GAAG;IAAE,GAAGF,KAAK,CAACE,OAAO;IAAEX,GAAG;IAAEC,MAAM;IAAEC;EAAS,CAAC;EAE3DX,mBAAmB,CAACO,GAAG,EAAE,MAAMU,GAAG,CAACG,OAAQ,EAAE,EAAE,CAAC;EAChDpB,mBAAmB,CAACY,GAAG,EAAE,OAAO;IAAES,GAAG,EAAEA,CAAA,KAAMH,KAAK,CAACE,OAAO,CAACD;EAAK,CAAC,CAAC,EAAE,EAAE,CAAC;EAEvEpB,SAAS,CAAC,MAAM;IACZ,MAAM;MAAEU,GAAG;MAAEC,MAAM;MAAES,IAAI;MAAER;IAAS,CAAC,GAAGO,KAAK,CAACE,OAAO;IACrDH,GAAG,CAACG,OAAO,CAAEE,SAAS,GAAG,CAACX,QAAQ,IAAIY,MAAM,EAAEJ,IAAI,CAAC;IACnD,IAAIV,GAAG,KAAKU,IAAI,EAAE;IAClB,MAAMK,GAAG,GAAGP,GAAG,CAACG,OAAQ;IACxB,MAAMK,KAAK,GAAG,CAAChB,GAAG,GAAGU,IAAI,IAAIT,MAAM;IACnC,MAAMgB,MAAM,GAAGxB,gBAAgB,CAAC,MAAM;MAClC,MAAM;QAAEO,GAAG;QAAEE;MAAS,CAAC,GAAGO,KAAK,CAACE,OAAO;MACvCF,KAAK,CAACE,OAAO,CAACD,IAAI,IAAIM,KAAK;MAC3B,IAAKA,KAAK,GAAG,CAAC,IAAIP,KAAK,CAACE,OAAO,CAACD,IAAI,GAAGV,GAAG,IAAMgB,KAAK,GAAG,CAAC,IAAIP,KAAK,CAACE,OAAO,CAACD,IAAI,GAAGV,GAAI,EAAE;QACpFiB,MAAM,CAAC,CAAC;QACRR,KAAK,CAACE,OAAO,CAACD,IAAI,GAAGV,GAAG;MAC5B;MACAe,GAAG,CAACF,SAAS,GAAG,CAACX,QAAQ,IAAIY,MAAM,EAAEE,KAAK,GAAG,CAAC,GAAGE,IAAI,CAACC,KAAK,CAACV,KAAK,CAACE,OAAO,CAACD,IAAI,CAAC,GAAGQ,IAAI,CAACE,IAAI,CAACX,KAAK,CAACE,OAAO,CAACD,IAAI,CAAC,CAAC;IACpH,CAAC,EAAE,CAAC,CAAC;IAEL,OAAOO,MAAM;EACjB,CAAC,EAAE,CAACjB,GAAG,CAAC,CAAC;EAET,oBAAOL,IAAA;IAAKG,GAAG,EAAEU,GAAI;IAAA,GAAKJ;EAAI,CAAG,CAAC;AACtC,CAAC,CAAC"}

package/dist/esm/components/Trapezium.js

@@ -1,8 +1,8 @@
 "use client";
 
-import { clsx } from "deepsea-tools";
 import { forwardRef } from "react";
 import { css } from "@emotion/css";
+import { clsx } from "deepsea-tools";
 import { px, transformCSSVariable } from "../utils";
 import { jsx as _jsx } from "react/jsx-runtime";
 /** 梯形组件 */

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

@@ -1 +1 @@
-{"version":3,"names":["clsx","forwardRef","css","px","transformCSSVariable","jsx","_jsx","Trapezium","props","ref","top","bottom","height","borderRadius","className","style","rest","diff","a","Math","atan","b","tan","c","cos","d","sin","e","PI","f","g","h","width","clipath"],"sources":["../../../src/components/Trapezium.tsx"],"sourcesContent":["\"use client\"\n\nimport { clsx } from \"deepsea-tools\"\nimport { HTMLAttributes, forwardRef } from \"react\"\n\nimport { css } from \"@emotion/css\"\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,YAAY;;AAEZ,SAASA,IAAI,QAAQ,eAAe;AACpC,SAAyBC,UAAU,QAAQ,OAAO;AAElD,SAASC,GAAG,QAAQ,cAAc;AAClC,SAASC,EAAE,EAAEC,oBAAoB;AAAiB,SAAAC,GAAA,IAAAC,IAAA;AASlD;AACA,OAAO,MAAMC,SAAS,gBAAGN,UAAU,CAAiC,CAACO,KAAK,EAAEC,GAAG,KAAK;EAChF,MAAM;IAAEC,GAAG;IAAEC,MAAM;IAAEC,MAAM;IAAEC,YAAY;IAAEC,SAAS;IAAEC,KAAK;IAAE,GAAGC;EAAK,CAAC,GAAGR,KAAK;EAE9E,MAAMS,IAAI,GAAG,CAACN,MAAM,GAAGD,GAAG,IAAI,CAAC;EAE/B,MAAMQ,CAAC,GAAGC,IAAI,CAACC,IAAI,CAACR,MAAM,GAAGK,IAAI,CAAC,GAAG,CAAC;EAEtC,MAAMI,CAAC,GAAGR,YAAY,GAAGM,IAAI,CAACG,GAAG,CAACJ,CAAC,CAAC;EAEpC,MAAMK,CAAC,GAAGF,CAAC,GAAGF,IAAI,CAACK,GAAG,CAACN,CAAC,GAAG,CAAC,CAAC;EAE7B,MAAMO,CAAC,GAAGJ,CAAC,GAAGF,IAAI,CAACO,GAAG,CAACR,CAAC,GAAG,CAAC,CAAC;EAE7B,MAAMS,CAAC,GAAGR,IAAI,CAACS,EAAE,GAAG,CAAC,GAAGV,CAAC;EAEzB,MAAMW,CAAC,GAAGhB,YAAY,GAAGM,IAAI,CAACG,GAAG,CAACK,CAAC,CAAC;EAEpC,MAAMG,CAAC,GAAGD,CAAC,GAAGV,IAAI,CAACK,GAAG,CAACN,CAAC,GAAG,CAAC,CAAC;EAE7B,MAAMa,CAAC,GAAGF,CAAC,GAAGV,IAAI,CAACO,GAAG,CAACR,CAAC,GAAG,CAAC,CAAC;EAE7B,oBACIZ,IAAA;IACIG,GAAG,EAAEA,GAAI;IACTK,SAAS,EAAEd,IAAI,CACXE,GAAI;AACpB;AACA;AACA;AACA,iBAAiB,EACDY,SACJ,CAAE;IACFC,KAAK,EAAEX,oBAAoB,CACvB;MACI4B,KAAK,EAAE7B,EAAE,CAACQ,MAAM,CAAC;MACjBC,MAAM,EAAET,EAAE,CAACS,MAAM,CAAC;MAClBqB,OAAO,EAAG,WAAUhB,IAAI,GAAGY,CAAE,IAAG,CAAE,OAAMhB,YAAa,IAAGA,YAAa,UAASI,IAAI,GAAGa,CAAE,IAAGC,CAAE,MAAKR,CAAE,IAAGX,MAAM,GAAGa,CAAE,MAAKZ,YAAa,IAAGA,YAAa,UAASQ,CAAE,IAAGT,MAAO,MAAKD,MAAM,GAAGU,CAAE,IAAGT,MAAO,MAAKC,YAAa,IAAGA,YAAa,UAASF,MAAM,GAAGY,CAAE,IAAGX,MAAM,GAAGa,CAAE,MAAKf,GAAG,GAAGO,IAAI,GAAGa,CAAE,IAAGC,CAAE,MAAKlB,YAAa,IAAGA,YAAa,UAASH,GAAG,GAAGO,IAAI,GAAGY,CAAE,IAAG,CAAE;IAClW,CAAC,EACDd,KACJ,CAAE;IAAA,GACEC;EAAI,CACX,CAAC;AAEV,CAAC,CAAC"}
+{"version":3,"names":["forwardRef","css","clsx","px","transformCSSVariable","jsx","_jsx","Trapezium","props","ref","top","bottom","height","borderRadius","className","style","rest","diff","a","Math","atan","b","tan","c","cos","d","sin","e","PI","f","g","h","width","clipath"],"sources":["../../../src/components/Trapezium.tsx"],"sourcesContent":["\"use client\"\n\nimport { HTMLAttributes, forwardRef } from \"react\"\nimport { css } from \"@emotion/css\"\nimport { clsx } from \"deepsea-tools\"\n\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,YAAY;;AAEZ,SAAyBA,UAAU,QAAQ,OAAO;AAClD,SAASC,GAAG,QAAQ,cAAc;AAClC,SAASC,IAAI,QAAQ,eAAe;AAEpC,SAASC,EAAE,EAAEC,oBAAoB;AAAiB,SAAAC,GAAA,IAAAC,IAAA;AASlD;AACA,OAAO,MAAMC,SAAS,gBAAGP,UAAU,CAAiC,CAACQ,KAAK,EAAEC,GAAG,KAAK;EAChF,MAAM;IAAEC,GAAG;IAAEC,MAAM;IAAEC,MAAM;IAAEC,YAAY;IAAEC,SAAS;IAAEC,KAAK;IAAE,GAAGC;EAAK,CAAC,GAAGR,KAAK;EAE9E,MAAMS,IAAI,GAAG,CAACN,MAAM,GAAGD,GAAG,IAAI,CAAC;EAE/B,MAAMQ,CAAC,GAAGC,IAAI,CAACC,IAAI,CAACR,MAAM,GAAGK,IAAI,CAAC,GAAG,CAAC;EAEtC,MAAMI,CAAC,GAAGR,YAAY,GAAGM,IAAI,CAACG,GAAG,CAACJ,CAAC,CAAC;EAEpC,MAAMK,CAAC,GAAGF,CAAC,GAAGF,IAAI,CAACK,GAAG,CAACN,CAAC,GAAG,CAAC,CAAC;EAE7B,MAAMO,CAAC,GAAGJ,CAAC,GAAGF,IAAI,CAACO,GAAG,CAACR,CAAC,GAAG,CAAC,CAAC;EAE7B,MAAMS,CAAC,GAAGR,IAAI,CAACS,EAAE,GAAG,CAAC,GAAGV,CAAC;EAEzB,MAAMW,CAAC,GAAGhB,YAAY,GAAGM,IAAI,CAACG,GAAG,CAACK,CAAC,CAAC;EAEpC,MAAMG,CAAC,GAAGD,CAAC,GAAGV,IAAI,CAACK,GAAG,CAACN,CAAC,GAAG,CAAC,CAAC;EAE7B,MAAMa,CAAC,GAAGF,CAAC,GAAGV,IAAI,CAACO,GAAG,CAACR,CAAC,GAAG,CAAC,CAAC;EAE7B,oBACIZ,IAAA;IACIG,GAAG,EAAEA,GAAI;IACTK,SAAS,EAAEZ,IAAI,CACXD,GAAI;AACpB;AACA;AACA;AACA,iBAAiB,EACDa,SACJ,CAAE;IACFC,KAAK,EAAEX,oBAAoB,CACvB;MACI4B,KAAK,EAAE7B,EAAE,CAACQ,MAAM,CAAC;MACjBC,MAAM,EAAET,EAAE,CAACS,MAAM,CAAC;MAClBqB,OAAO,EAAG,WAAUhB,IAAI,GAAGY,CAAE,IAAG,CAAE,OAAMhB,YAAa,IAAGA,YAAa,UAASI,IAAI,GAAGa,CAAE,IAAGC,CAAE,MAAKR,CAAE,IAAGX,MAAM,GAAGa,CAAE,MAAKZ,YAAa,IAAGA,YAAa,UAASQ,CAAE,IAAGT,MAAO,MAAKD,MAAM,GAAGU,CAAE,IAAGT,MAAO,MAAKC,YAAa,IAAGA,YAAa,UAASF,MAAM,GAAGY,CAAE,IAAGX,MAAM,GAAGa,CAAE,MAAKf,GAAG,GAAGO,IAAI,GAAGa,CAAE,IAAGC,CAAE,MAAKlB,YAAa,IAAGA,YAAa,UAASH,GAAG,GAAGO,IAAI,GAAGY,CAAE,IAAG,CAAE;IAClW,CAAC,EACDd,KACJ,CAAE;IAAA,GACEC;EAAI,CACX,CAAC;AAEV,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "deepsea-components",
-  "version": "5.8.0",
+  "version": "5.8.1",
   "description": "格数科技自用组件库",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -31,7 +31,7 @@
     "echarts": "^5.5.1",
     "hls.js": "^1.5.18",
     "smooth-scrollbar": "^8.8.4",
-    "deepsea-tools": "5.17.0"
+    "deepsea-tools": "5.17.1"
   },
   "peerDependencies": {
     "@types/react": "^18.3.1",

package/src/components/AutoFit.tsx

@@ -1,9 +1,9 @@
 "use client"
 
-import { clsx } from "deepsea-tools"
 import { HTMLAttributes, forwardRef, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState } from "react"
-
 import { css } from "@emotion/css"
+import { clsx } from "deepsea-tools"
+
 import { px, transformCSSVariable } from "@/utils"
 
 export interface AutoFitProps extends HTMLAttributes<HTMLDivElement> {

package/src/components/AutoScroll.tsx

@@ -1,13 +1,14 @@
 "use client"
 
+import { CSSProperties, MouseEvent as ReactMouseEvent, forwardRef, useEffect, useImperativeHandle, useRef } from "react"
+import { css } from "@emotion/css"
 import { useSize } from "ahooks"
 import { clsx, getArray } from "deepsea-tools"
-import { CSSProperties, MouseEvent as ReactMouseEvent, forwardRef, useEffect, useImperativeHandle, useRef } from "react"
 import Scrollbar from "smooth-scrollbar"
 import { ScrollStatus } from "smooth-scrollbar/interfaces/scrollbar"
 
-import { css } from "@emotion/css"
 import { px, transformCSSVariable } from "@/utils"
+
 import { Scroll, ScrollProps } from "./Scroll"
 
 export interface AutoScrollProps extends ScrollProps {

package/src/components/AutoSizeTextarea.tsx

@@ -1,9 +1,9 @@
 "use client"
 
-import { clsx } from "deepsea-tools"
 import { TextareaHTMLAttributes, forwardRef, useImperativeHandle, useLayoutEffect, useRef, useState } from "react"
-
 import { css } from "@emotion/css"
+import { clsx } from "deepsea-tools"
+
 import { px, transformCSSVariable } from "@/utils"
 
 /**