deepsea-components 5.7.5 → 5.7.6

package/dist/cjs/components/CircleText.js

@@ -1,4 +1,3 @@
-"use client";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;

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

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

package/dist/cjs/components/CopyButton.js

@@ -1,3 +1,4 @@
+"use client";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;

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

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

package/dist/cjs/components/Echart.js

@@ -1,3 +1,4 @@
+"use client";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;

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

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

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

@@ -83,4 +83,4 @@ export interface ManualFlowProps<T> extends FlowProps<T> {
 /** 手动组件，由外界指定宽度，性能更好 */
 export declare function ManualFlow<T>(props: ManualFlowProps<T>): import("react/jsx-runtime").JSX.Element;
 /** 自适应浮动组件 */
-export declare function Flow<T>(props: FlowProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function Flow<T>(props: FlowProps<T>): ReactNode;

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "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>) {\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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",
+  "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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",
   "names": []
 }

package/dist/cjs/components/FormLabel.js

@@ -25,23 +25,20 @@ module.exports = __toCommonJS(FormLabel_exports);
 var import_deepsea_tools = require("deepsea-tools");
 var import_react = require("react");
 var import_css = require("@emotion/css");
-var FormLabel = (props) => {
-  const { className, style, before, width, ...rest } = props;
-  return /* @__PURE__ */ React.createElement(import_react.Fragment, null, !!before && /* @__PURE__ */ React.createElement("div", { style: { width: 11 } }, " "), /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      className: (0, import_deepsea_tools.clsx)(
-        import_css.css`
-                        text-align: justify;
-                        text-align-last: justify;
-                    `,
-        className
-      ),
-      style: { width, ...style },
-      ...rest
-    }
-  ));
-};
+var FormLabel = ({ className, style, before, width, ...rest }) => /* @__PURE__ */ React.createElement(import_react.Fragment, null, !!before && /* @__PURE__ */ React.createElement("div", { style: { width: 11 } }, " "), /* @__PURE__ */ React.createElement(
+  "div",
+  {
+    className: (0, import_deepsea_tools.clsx)(
+      import_css.css`
+                    text-align: justify;
+                    text-align-last: justify;
+                `,
+      className
+    ),
+    style: { width, ...style },
+    ...rest
+  }
+));
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   FormLabel

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

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

package/dist/cjs/components/InfiniteScroll.js

@@ -1,3 +1,4 @@
+"use client";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/InfiniteScroll.tsx"],
-  "sourcesContent": ["import { 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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",
+  "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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",
   "names": ["containerSize", "wrapperSize"]
 }

package/dist/cjs/components/Ring.js

@@ -1,4 +1,3 @@
-"use client";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;

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

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

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

@@ -1,8 +1,8 @@
-import { FC, HTMLAttributes } from "react";
+import { HTMLAttributes } from "react";
 export interface SectionRingProps extends HTMLAttributes<HTMLDivElement> {
     outerRadius: number;
     innerRadius: number;
     count: number;
     angel: number;
 }
-export declare const SectionRing: FC<SectionRingProps>;
+export declare const SectionRing: import("react").ForwardRefExoticComponent<SectionRingProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/cjs/components/SectionRing.js

@@ -24,7 +24,8 @@ __export(SectionRing_exports, {
 });
 module.exports = __toCommonJS(SectionRing_exports);
 var import_deepsea_tools = require("deepsea-tools");
-var SectionRing = (props) => {
+var import_react = require("react");
+var SectionRing = (0, import_react.forwardRef)((props, ref) => {
   const { outerRadius: o, innerRadius: i, count: c, angel: a, style, ...rest } = props;
   const s = Math.PI * 2 / c - a;
   function arc(radius, startAngle, endAngle, options = {}) {
@@ -33,18 +34,19 @@ var SectionRing = (props) => {
   return /* @__PURE__ */ React.createElement(
     "div",
     {
+      ref,
       style: {
-        ...style,
         width: o * 2,
         height: o * 2,
         clipPath: `path("${Array(c).fill(0).map(
           (it, idx) => `${arc(o, idx * (a + s), idx * (a + s) + a)} ${arc(i, idx * (a + s) + a, idx * (a + s), { line: true, anticlockwise: true })}`
-        ).join(" ")} Z")`
+        ).join(" ")} Z")`,
+        ...style
       },
       ...rest
     }
   );
-};
+});
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   SectionRing

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

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

package/dist/cjs/components/Skeleton.js

@@ -1,4 +1,3 @@
-"use client";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
@@ -27,8 +26,7 @@ var import_deepsea_tools = require("deepsea-tools");
 var import_react = require("react");
 var import_css = require("@emotion/css");
 var Skeleton = (0, import_react.forwardRef)((props, ref) => {
-  let { className, loading, children, ...rest } = props;
-  loading ??= children === void 0 || children === null;
+  const { className, children, loading = children === void 0 || children === null, ...rest } = props;
   return /* @__PURE__ */ React.createElement(
     "div",
     {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "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    let { className, loading, children, ...rest } = props\n\n    loading ??= children === undefined || children === null\n\n    return (\n        <div\n            ref={ref}\n            className={clsx(\n                css`\n                    @keyframes shimmer {\n                        0% {\n                            background-position: -400px 0px;\n                        }\n                        100% {\n                            background-position: 400px 0px;\n                        }\n                    }\n                `,\n                loading &&\n                    css`\n                        background-image: linear-gradient(to right, rgba(0, 0, 0, 0.067) 8%, rgba(0, 0, 0, 0.133) 18%, rgba(0, 0, 0, 0.067) 33%);\n                        animation-duration: 1s;\n                        animation-fill-mode: forwards;\n                        animation-iteration-count: infinite;\n                        animation-name: shimmer;\n                        animation-timing-function: linear;\n                        background-size: 800px 104px;\n                    `,\n                className,\n            )}\n            {...rest}\n        >\n            {children}\n        </div>\n    )\n})\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,2BAAqB;AACrB,mBAA2C;AAE3C,iBAAoB;AAMb,IAAM,eAAW,yBAA0C,CAAC,OAAO,QAAQ;AAC9E,MAAI,EAAE,WAAW,SAAS,UAAU,GAAG,KAAK,IAAI;AAEhD,cAAY,aAAa,UAAa,aAAa;AAEnD,SACI;AAAA,IAAC;AAAA;AAAA,MACG;AAAA,MACA,eAAW;AAAA,QACP;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAUA,WACI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QASJ;AAAA,MACJ;AAAA,MACC,GAAG;AAAA;AAAA,IAEH;AAAA,EACL;AAER,CAAC;",
+  "sourcesContent": ["import { 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;AAAA;AAAA;AAAA;AAAA;AAAA,2BAAqB;AACrB,mBAA2C;AAE3C,iBAAoB;AAMb,IAAM,eAAW,yBAA0C,CAAC,OAAO,QAAQ;AAC9E,QAAM,EAAE,WAAW,UAAU,UAAU,aAAa,UAAa,aAAa,MAAM,GAAG,KAAK,IAAI;AAEhG,SACI;AAAA,IAAC;AAAA;AAAA,MACG;AAAA,MACA,eAAW;AAAA,QACP;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAUA,WACI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QASJ;AAAA,MACJ;AAAA,MACC,GAAG;AAAA;AAAA,IAEH;AAAA,EACL;AAER,CAAC;",
   "names": []
 }

package/dist/cjs/components/Title.js

@@ -1,3 +1,4 @@
+"use client";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/Title.tsx"],
-  "sourcesContent": ["import { 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 createPortal(<title ref={ele} {...props} />, document.head)\n})\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAmG;AACnG,uBAA6B;AAE7B,6BAAgC;AAIhC,IAAM,CAAC,KAAK,QAAI,wCAAgB;AAEzB,IAAM,YAAQ,yBAAyC,CAAC,OAAO,QAAQ;AAC1E,MAAI,SAAS;AAAI,WAAO,oCAAC,WAAM,KAAW,GAAG,OAAO;AAEpD,QAAM,UAAM,qBAAyB,IAAI;AAEzC,wCAAoB,KAAK,MAAM,IAAI,SAA6B,CAAC,IAAI,OAAO,CAAC;AAE7E,oCAAgB,MAAM;AAClB,UAAM,QAAQ,SAAS,KAAK,cAAc,OAAO;AACjD,QAAI,UAAU,IAAI;AAAS;AAC3B,aAAS,KAAK,aAAa,IAAI,SAA6B,KAAK;AAAA,EACrE,GAAG,CAAC,CAAC;AAEL,aAAO,+BAAa,oCAAC,WAAM,KAAK,KAAM,GAAG,OAAO,GAAI,SAAS,IAAI;AACrE,CAAC;",
+  "sourcesContent": ["\"use client\"\n\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 createPortal(<title ref={ele} {...props} />, document.head)\n})\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,mBAAmG;AACnG,uBAA6B;AAE7B,6BAAgC;AAIhC,IAAM,CAAC,KAAK,QAAI,wCAAgB;AAEzB,IAAM,YAAQ,yBAAyC,CAAC,OAAO,QAAQ;AAC1E,MAAI,SAAS;AAAI,WAAO,oCAAC,WAAM,KAAW,GAAG,OAAO;AAEpD,QAAM,UAAM,qBAAyB,IAAI;AAEzC,wCAAoB,KAAK,MAAM,IAAI,SAA6B,CAAC,IAAI,OAAO,CAAC;AAE7E,oCAAgB,MAAM;AAClB,UAAM,QAAQ,SAAS,KAAK,cAAc,OAAO;AACjD,QAAI,UAAU,IAAI;AAAS;AAC3B,aAAS,KAAK,aAAa,IAAI,SAA6B,KAAK;AAAA,EACrE,GAAG,CAAC,CAAC;AAEL,aAAO,+BAAa,oCAAC,WAAM,KAAK,KAAM,GAAG,OAAO,GAAI,SAAS,IAAI;AACrE,CAAC;",
   "names": []
 }

package/dist/cjs/components/Trapezium.js

@@ -1,4 +1,3 @@
-"use client";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "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;AAAA;AAAA;AAAA;AAAA;AAEA,2BAAqB;AACrB,mBAA2C;AAE3C,iBAAoB;AACpB,mBAAyC;AAUlC,IAAM,gBAAY,yBAA2C,CAAC,OAAO,QAAQ;AAChF,QAAM,EAAE,KAAK,QAAQ,QAAQ,cAAc,WAAW,OAAO,GAAG,KAAK,IAAI;AAEzE,QAAM,QAAQ,SAAS,OAAO;AAE9B,QAAM,IAAI,KAAK,KAAK,SAAS,IAAI,IAAI;AAErC,QAAM,IAAI,eAAe,KAAK,IAAI,CAAC;AAEnC,QAAM,IAAI,IAAI,KAAK,IAAI,IAAI,CAAC;AAE5B,QAAM,IAAI,IAAI,KAAK,IAAI,IAAI,CAAC;AAE5B,QAAM,IAAI,KAAK,KAAK,IAAI;AAExB,QAAM,IAAI,eAAe,KAAK,IAAI,CAAC;AAEnC,QAAM,IAAI,IAAI,KAAK,IAAI,IAAI,CAAC;AAE5B,QAAM,IAAI,IAAI,KAAK,IAAI,IAAI,CAAC;AAE5B,SACI;AAAA,IAAC;AAAA;AAAA,MACG;AAAA,MACA,eAAW;AAAA,QACP;AAAA;AAAA;AAAA;AAAA;AAAA,QAKA;AAAA,MACJ;AAAA,MACA,WAAO;AAAA,QACH;AAAA,UACI,WAAO,iBAAG,MAAM;AAAA,UAChB,YAAQ,iBAAG,MAAM;AAAA,UACjB,SAAS,WAAW,OAAO,KAAK,QAAQ,gBAAgB,sBAAsB,OAAO,KAAK,OAAO,KAAK,SAAS,OAAO,gBAAgB,sBAAsB,KAAK,YAAY,SAAS,KAAK,YAAY,gBAAgB,sBAAsB,SAAS,KAAK,SAAS,OAAO,MAAM,OAAO,KAAK,OAAO,gBAAgB,sBAAsB,MAAM,OAAO,KAAK;AAAA,QAChW;AAAA,QACA;AAAA,MACJ;AAAA,MACC,GAAG;AAAA;AAAA,EACR;AAER,CAAC;",
+  "sourcesContent": ["import { 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;AAAA;AAAA;AAAA;AAAA;AAAA,2BAAqB;AACrB,mBAA2C;AAE3C,iBAAoB;AACpB,mBAAyC;AAUlC,IAAM,gBAAY,yBAA2C,CAAC,OAAO,QAAQ;AAChF,QAAM,EAAE,KAAK,QAAQ,QAAQ,cAAc,WAAW,OAAO,GAAG,KAAK,IAAI;AAEzE,QAAM,QAAQ,SAAS,OAAO;AAE9B,QAAM,IAAI,KAAK,KAAK,SAAS,IAAI,IAAI;AAErC,QAAM,IAAI,eAAe,KAAK,IAAI,CAAC;AAEnC,QAAM,IAAI,IAAI,KAAK,IAAI,IAAI,CAAC;AAE5B,QAAM,IAAI,IAAI,KAAK,IAAI,IAAI,CAAC;AAE5B,QAAM,IAAI,KAAK,KAAK,IAAI;AAExB,QAAM,IAAI,eAAe,KAAK,IAAI,CAAC;AAEnC,QAAM,IAAI,IAAI,KAAK,IAAI,IAAI,CAAC;AAE5B,QAAM,IAAI,IAAI,KAAK,IAAI,IAAI,CAAC;AAE5B,SACI;AAAA,IAAC;AAAA;AAAA,MACG;AAAA,MACA,eAAW;AAAA,QACP;AAAA;AAAA;AAAA;AAAA;AAAA,QAKA;AAAA,MACJ;AAAA,MACA,WAAO;AAAA,QACH;AAAA,UACI,WAAO,iBAAG,MAAM;AAAA,UAChB,YAAQ,iBAAG,MAAM;AAAA,UACjB,SAAS,WAAW,OAAO,KAAK,QAAQ,gBAAgB,sBAAsB,OAAO,KAAK,OAAO,KAAK,SAAS,OAAO,gBAAgB,sBAAsB,KAAK,YAAY,SAAS,KAAK,YAAY,gBAAgB,sBAAsB,SAAS,KAAK,SAAS,OAAO,MAAM,OAAO,KAAK,OAAO,gBAAgB,sBAAsB,MAAM,OAAO,KAAK;AAAA,QAChW;AAAA,QACA;AAAA,MACJ;AAAA,MACC,GAAG;AAAA;AAAA,EACR;AAER,CAAC;",
   "names": []
 }

package/dist/esm/components/CircleText.js

@@ -1,5 +1,3 @@
-"use client";
-
 import { Fragment } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
 /** 环形文字 */

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

@@ -1 +1 @@
-{"version":3,"names":["Fragment","jsx","_jsx","CircleText","props","width","height","radius","startAngel","gapAngel","align","style","direction","reverse","separator","children","rest","unitAngle","Math","atan","totalAngle","length","offsetAngle","getTransform","idx","angle","x","cos","y","sin","z","PI","words","split","map","w","position","transform","textAlign","lineHeight"],"sources":["../../../src/components/CircleText.tsx"],"sourcesContent":["\"use client\"\n\nimport { FC, Fragment, HTMLAttributes } from \"react\"\n\nexport interface CircleTextProps extends Omit<HTMLAttributes<HTMLSpanElement>, \"children\"> {\n    /** 每一个方块的宽度 */\n    width: number\n    /** 每一个方块的高度 */\n    height: number\n    /** 圆弧的半径，不包含方块的高度 */\n    radius: number\n    /** 开始旋转的弧度，逆时针增加，0 为 x 轴方向 */\n    startAngel?: number\n    /** 每一个方块之间间隔的弧度 */\n    gapAngel?: number\n    /** 文字对齐的方式，默认居中 */\n    align?: \"left\" | \"center\" | \"right\"\n    /** 文字朝向圆心还是外侧，默认外侧 */\n    direction?: \"inner\" | \"outer\"\n    /** 是否反转文字顺序 */\n    reverse?: boolean\n    /** 分割文字的方法 */\n    separator?: string | RegExp | ((text: string) => string[])\n    /** 显示的文字 */\n    children: string\n}\n\n/** 环形文字 */\nexport const CircleText: FC<CircleTextProps> = props => {\n    const {\n        width,\n        height,\n        radius,\n        startAngel = 0,\n        gapAngel = 0,\n        align = \"center\",\n        style,\n        direction = \"outer\",\n        reverse = false,\n        separator,\n        children,\n        ...rest\n    } = props\n    const unitAngle = Math.atan(width / 2 / radius) * 2\n    const totalAngle = (unitAngle + gapAngel) * children.length - gapAngel\n    const offsetAngle = align === \"left\" ? 0 : align === \"right\" ? totalAngle : totalAngle / 2\n\n    function getTransform(idx: number) {\n        const angle = startAngel - idx * (unitAngle + gapAngel) + offsetAngle - unitAngle / 2\n        const x = (radius + height / 2) * Math.cos(angle) - width / 2\n        const y = (radius + height / 2) * Math.sin(angle) * -1 - height / 2\n        const z = Math.PI / 2 - angle + (direction === \"inner\" ? Math.PI : 0)\n        return `translateX(${x}px) translateY(${y}px) rotateZ(${(z / Math.PI) * 180}deg)`\n    }\n\n    const words = typeof separator === \"function\" ? separator(children) : children.split(separator ?? \"\")\n\n    if (reverse) words.reverse()\n\n    return (\n        <Fragment>\n            {words.map((w, idx) => (\n                <span\n                    key={idx}\n                    style={{\n                        position: \"absolute\",\n                        ...style,\n                        transform: getTransform(idx),\n                        textAlign: \"center\",\n                        width,\n                        lineHeight: `${height}px`,\n                        height: height,\n                    }}\n                    {...rest}\n                >\n                    {w}\n                </span>\n            ))}\n        </Fragment>\n    )\n}\n"],"mappings":"AAAA,YAAY;;AAEZ,SAAaA,QAAQ,QAAwB,OAAO;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAyBpD;AACA,OAAO,MAAMC,UAA+B,GAAGC,KAAK,IAAI;EACpD,MAAM;IACFC,KAAK;IACLC,MAAM;IACNC,MAAM;IACNC,UAAU,GAAG,CAAC;IACdC,QAAQ,GAAG,CAAC;IACZC,KAAK,GAAG,QAAQ;IAChBC,KAAK;IACLC,SAAS,GAAG,OAAO;IACnBC,OAAO,GAAG,KAAK;IACfC,SAAS;IACTC,QAAQ;IACR,GAAGC;EACP,CAAC,GAAGZ,KAAK;EACT,MAAMa,SAAS,GAAGC,IAAI,CAACC,IAAI,CAACd,KAAK,GAAG,CAAC,GAAGE,MAAM,CAAC,GAAG,CAAC;EACnD,MAAMa,UAAU,GAAG,CAACH,SAAS,GAAGR,QAAQ,IAAIM,QAAQ,CAACM,MAAM,GAAGZ,QAAQ;EACtE,MAAMa,WAAW,GAAGZ,KAAK,KAAK,MAAM,GAAG,CAAC,GAAGA,KAAK,KAAK,OAAO,GAAGU,UAAU,GAAGA,UAAU,GAAG,CAAC;EAE1F,SAASG,YAAYA,CAACC,GAAW,EAAE;IAC/B,MAAMC,KAAK,GAAGjB,UAAU,GAAGgB,GAAG,IAAIP,SAAS,GAAGR,QAAQ,CAAC,GAAGa,WAAW,GAAGL,SAAS,GAAG,CAAC;IACrF,MAAMS,CAAC,GAAG,CAACnB,MAAM,GAAGD,MAAM,GAAG,CAAC,IAAIY,IAAI,CAACS,GAAG,CAACF,KAAK,CAAC,GAAGpB,KAAK,GAAG,CAAC;IAC7D,MAAMuB,CAAC,GAAG,CAACrB,MAAM,GAAGD,MAAM,GAAG,CAAC,IAAIY,IAAI,CAACW,GAAG,CAACJ,KAAK,CAAC,GAAG,CAAC,CAAC,GAAGnB,MAAM,GAAG,CAAC;IACnE,MAAMwB,CAAC,GAAGZ,IAAI,CAACa,EAAE,GAAG,CAAC,GAAGN,KAAK,IAAIb,SAAS,KAAK,OAAO,GAAGM,IAAI,CAACa,EAAE,GAAG,CAAC,CAAC;IACrE,OAAQ,cAAaL,CAAE,kBAAiBE,CAAE,eAAeE,CAAC,GAAGZ,IAAI,CAACa,EAAE,GAAI,GAAI,MAAK;EACrF;EAEA,MAAMC,KAAK,GAAG,OAAOlB,SAAS,KAAK,UAAU,GAAGA,SAAS,CAACC,QAAQ,CAAC,GAAGA,QAAQ,CAACkB,KAAK,CAACnB,SAAS,IAAI,EAAE,CAAC;EAErG,IAAID,OAAO,EAAEmB,KAAK,CAACnB,OAAO,CAAC,CAAC;EAE5B,oBACIX,IAAA,CAACF,QAAQ;IAAAe,QAAA,EACJiB,KAAK,CAACE,GAAG,CAAC,CAACC,CAAC,EAAEX,GAAG,kBACdtB,IAAA;MAEIS,KAAK,EAAE;QACHyB,QAAQ,EAAE,UAAU;QACpB,GAAGzB,KAAK;QACR0B,SAAS,EAAEd,YAAY,CAACC,GAAG,CAAC;QAC5Bc,SAAS,EAAE,QAAQ;QACnBjC,KAAK;QACLkC,UAAU,EAAG,GAAEjC,MAAO,IAAG;QACzBA,MAAM,EAAEA;MACZ,CAAE;MAAA,GACEU,IAAI;MAAAD,QAAA,EAEPoB;IAAC,GAZGX,GAaH,CACT;EAAC,CACI,CAAC;AAEnB,CAAC"}
+{"version":3,"names":["Fragment","jsx","_jsx","CircleText","props","width","height","radius","startAngel","gapAngel","align","style","direction","reverse","separator","children","rest","unitAngle","Math","atan","totalAngle","length","offsetAngle","getTransform","idx","angle","x","cos","y","sin","z","PI","words","split","map","w","position","transform","textAlign","lineHeight"],"sources":["../../../src/components/CircleText.tsx"],"sourcesContent":["import { FC, Fragment, HTMLAttributes } from \"react\"\n\nexport interface CircleTextProps extends Omit<HTMLAttributes<HTMLSpanElement>, \"children\"> {\n    /** 每一个方块的宽度 */\n    width: number\n    /** 每一个方块的高度 */\n    height: number\n    /** 圆弧的半径，不包含方块的高度 */\n    radius: number\n    /** 开始旋转的弧度，逆时针增加，0 为 x 轴方向 */\n    startAngel?: number\n    /** 每一个方块之间间隔的弧度 */\n    gapAngel?: number\n    /** 文字对齐的方式，默认居中 */\n    align?: \"left\" | \"center\" | \"right\"\n    /** 文字朝向圆心还是外侧，默认外侧 */\n    direction?: \"inner\" | \"outer\"\n    /** 是否反转文字顺序 */\n    reverse?: boolean\n    /** 分割文字的方法 */\n    separator?: string | RegExp | ((text: string) => string[])\n    /** 显示的文字 */\n    children: string\n}\n\n/** 环形文字 */\nexport const CircleText: FC<CircleTextProps> = props => {\n    const {\n        width,\n        height,\n        radius,\n        startAngel = 0,\n        gapAngel = 0,\n        align = \"center\",\n        style,\n        direction = \"outer\",\n        reverse = false,\n        separator,\n        children,\n        ...rest\n    } = props\n    const unitAngle = Math.atan(width / 2 / radius) * 2\n    const totalAngle = (unitAngle + gapAngel) * children.length - gapAngel\n    const offsetAngle = align === \"left\" ? 0 : align === \"right\" ? totalAngle : totalAngle / 2\n\n    function getTransform(idx: number) {\n        const angle = startAngel - idx * (unitAngle + gapAngel) + offsetAngle - unitAngle / 2\n        const x = (radius + height / 2) * Math.cos(angle) - width / 2\n        const y = (radius + height / 2) * Math.sin(angle) * -1 - height / 2\n        const z = Math.PI / 2 - angle + (direction === \"inner\" ? Math.PI : 0)\n        return `translateX(${x}px) translateY(${y}px) rotateZ(${(z / Math.PI) * 180}deg)`\n    }\n\n    const words = typeof separator === \"function\" ? separator(children) : children.split(separator ?? \"\")\n\n    if (reverse) words.reverse()\n\n    return (\n        <Fragment>\n            {words.map((w, idx) => (\n                <span\n                    key={idx}\n                    style={{\n                        position: \"absolute\",\n                        ...style,\n                        transform: getTransform(idx),\n                        textAlign: \"center\",\n                        width,\n                        lineHeight: `${height}px`,\n                        height: height,\n                    }}\n                    {...rest}\n                >\n                    {w}\n                </span>\n            ))}\n        </Fragment>\n    )\n}\n"],"mappings":"AAAA,SAAaA,QAAQ,QAAwB,OAAO;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAyBpD;AACA,OAAO,MAAMC,UAA+B,GAAGC,KAAK,IAAI;EACpD,MAAM;IACFC,KAAK;IACLC,MAAM;IACNC,MAAM;IACNC,UAAU,GAAG,CAAC;IACdC,QAAQ,GAAG,CAAC;IACZC,KAAK,GAAG,QAAQ;IAChBC,KAAK;IACLC,SAAS,GAAG,OAAO;IACnBC,OAAO,GAAG,KAAK;IACfC,SAAS;IACTC,QAAQ;IACR,GAAGC;EACP,CAAC,GAAGZ,KAAK;EACT,MAAMa,SAAS,GAAGC,IAAI,CAACC,IAAI,CAACd,KAAK,GAAG,CAAC,GAAGE,MAAM,CAAC,GAAG,CAAC;EACnD,MAAMa,UAAU,GAAG,CAACH,SAAS,GAAGR,QAAQ,IAAIM,QAAQ,CAACM,MAAM,GAAGZ,QAAQ;EACtE,MAAMa,WAAW,GAAGZ,KAAK,KAAK,MAAM,GAAG,CAAC,GAAGA,KAAK,KAAK,OAAO,GAAGU,UAAU,GAAGA,UAAU,GAAG,CAAC;EAE1F,SAASG,YAAYA,CAACC,GAAW,EAAE;IAC/B,MAAMC,KAAK,GAAGjB,UAAU,GAAGgB,GAAG,IAAIP,SAAS,GAAGR,QAAQ,CAAC,GAAGa,WAAW,GAAGL,SAAS,GAAG,CAAC;IACrF,MAAMS,CAAC,GAAG,CAACnB,MAAM,GAAGD,MAAM,GAAG,CAAC,IAAIY,IAAI,CAACS,GAAG,CAACF,KAAK,CAAC,GAAGpB,KAAK,GAAG,CAAC;IAC7D,MAAMuB,CAAC,GAAG,CAACrB,MAAM,GAAGD,MAAM,GAAG,CAAC,IAAIY,IAAI,CAACW,GAAG,CAACJ,KAAK,CAAC,GAAG,CAAC,CAAC,GAAGnB,MAAM,GAAG,CAAC;IACnE,MAAMwB,CAAC,GAAGZ,IAAI,CAACa,EAAE,GAAG,CAAC,GAAGN,KAAK,IAAIb,SAAS,KAAK,OAAO,GAAGM,IAAI,CAACa,EAAE,GAAG,CAAC,CAAC;IACrE,OAAQ,cAAaL,CAAE,kBAAiBE,CAAE,eAAeE,CAAC,GAAGZ,IAAI,CAACa,EAAE,GAAI,GAAI,MAAK;EACrF;EAEA,MAAMC,KAAK,GAAG,OAAOlB,SAAS,KAAK,UAAU,GAAGA,SAAS,CAACC,QAAQ,CAAC,GAAGA,QAAQ,CAACkB,KAAK,CAACnB,SAAS,IAAI,EAAE,CAAC;EAErG,IAAID,OAAO,EAAEmB,KAAK,CAACnB,OAAO,CAAC,CAAC;EAE5B,oBACIX,IAAA,CAACF,QAAQ;IAAAe,QAAA,EACJiB,KAAK,CAACE,GAAG,CAAC,CAACC,CAAC,EAAEX,GAAG,kBACdtB,IAAA;MAEIS,KAAK,EAAE;QACHyB,QAAQ,EAAE,UAAU;QACpB,GAAGzB,KAAK;QACR0B,SAAS,EAAEd,YAAY,CAACC,GAAG,CAAC;QAC5Bc,SAAS,EAAE,QAAQ;QACnBjC,KAAK;QACLkC,UAAU,EAAG,GAAEjC,MAAO,IAAG;QACzBA,MAAM,EAAEA;MACZ,CAAE;MAAA,GACEU,IAAI;MAAAD,QAAA,EAEPoB;IAAC,GAZGX,GAaH,CACT;EAAC,CACI,CAAC;AAEnB,CAAC"}

package/dist/esm/components/CopyButton.js

@@ -1,3 +1,5 @@
+"use client";
+
 import { useLatest } from "ahooks";
 import ClipboardJS from "clipboard";
 import { forwardRef, useEffect, useImperativeHandle, useRef } from "react";

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

@@ -1 +1 @@
-{"version":3,"names":["useLatest","ClipboardJS","forwardRef","useEffect","useImperativeHandle","useRef","jsx","_jsx","Event","CopyButton","props","ref","text","onCopySuccess","_onCoptSuccess","onCopyError","_onCopyError","rest","ele","current","clipboard","on","event","destroy"],"sources":["../../../src/components/CopyButton.tsx"],"sourcesContent":["import { useLatest } from \"ahooks\"\nimport ClipboardJS, { Event } from \"clipboard\"\nimport { ComponentPropsWithoutRef, forwardRef, useEffect, useImperativeHandle, useRef } from \"react\"\n\nexport { Event } from \"clipboard\"\n\nexport type CopyButtonProps = ComponentPropsWithoutRef<\"button\"> & {\n    text?: string\n    onCopySuccess?: (e: Event) => void\n    onCopyError?: (e: Event) => void\n}\n\nexport const CopyButton = forwardRef<HTMLButtonElement, CopyButtonProps>((props, ref) => {\n    const { text, onCopySuccess: _onCoptSuccess, onCopyError: _onCopyError, ...rest } = props\n    const ele = useRef<HTMLButtonElement>(null)\n    const onCopySuccess = useLatest(_onCoptSuccess)\n    const onCopyError = useLatest(_onCopyError)\n\n    useImperativeHandle(ref, () => ele.current!, [ele.current])\n\n    useEffect(() => {\n        const clipboard = new ClipboardJS(ele.current!)\n        clipboard.on(\"success\", event => onCopySuccess.current?.(event))\n        clipboard.on(\"error\", event => onCopyError.current?.(event))\n        return () => clipboard.destroy()\n    }, [])\n\n    return <button ref={ele} {...rest} data-clipboard-text={text} />\n})\n"],"mappings":"AAAA,SAASA,SAAS,QAAQ,QAAQ;AAClC,OAAOC,WAAW,MAAiB,WAAW;AAC9C,SAAmCC,UAAU,EAAEC,SAAS,EAAEC,mBAAmB,EAAEC,MAAM,QAAQ,OAAO;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAEpG,SAASC,KAAK,QAAQ,WAAW;AAQjC,OAAO,MAAMC,UAAU,gBAAGP,UAAU,CAAqC,CAACQ,KAAK,EAAEC,GAAG,KAAK;EACrF,MAAM;IAAEC,IAAI;IAAEC,aAAa,EAAEC,cAAc;IAAEC,WAAW,EAAEC,YAAY;IAAE,GAAGC;EAAK,CAAC,GAAGP,KAAK;EACzF,MAAMQ,GAAG,GAAGb,MAAM,CAAoB,IAAI,CAAC;EAC3C,MAAMQ,aAAa,GAAGb,SAAS,CAACc,cAAc,CAAC;EAC/C,MAAMC,WAAW,GAAGf,SAAS,CAACgB,YAAY,CAAC;EAE3CZ,mBAAmB,CAACO,GAAG,EAAE,MAAMO,GAAG,CAACC,OAAQ,EAAE,CAACD,GAAG,CAACC,OAAO,CAAC,CAAC;EAE3DhB,SAAS,CAAC,MAAM;IACZ,MAAMiB,SAAS,GAAG,IAAInB,WAAW,CAACiB,GAAG,CAACC,OAAQ,CAAC;IAC/CC,SAAS,CAACC,EAAE,CAAC,SAAS,EAAEC,KAAK,IAAIT,aAAa,CAACM,OAAO,GAAGG,KAAK,CAAC,CAAC;IAChEF,SAAS,CAACC,EAAE,CAAC,OAAO,EAAEC,KAAK,IAAIP,WAAW,CAACI,OAAO,GAAGG,KAAK,CAAC,CAAC;IAC5D,OAAO,MAAMF,SAAS,CAACG,OAAO,CAAC,CAAC;EACpC,CAAC,EAAE,EAAE,CAAC;EAEN,oBAAOhB,IAAA;IAAQI,GAAG,EAAEO,GAAI;IAAA,GAAKD,IAAI;IAAE,uBAAqBL;EAAK,CAAE,CAAC;AACpE,CAAC,CAAC"}
+{"version":3,"names":["useLatest","ClipboardJS","forwardRef","useEffect","useImperativeHandle","useRef","jsx","_jsx","Event","CopyButton","props","ref","text","onCopySuccess","_onCoptSuccess","onCopyError","_onCopyError","rest","ele","current","clipboard","on","event","destroy"],"sources":["../../../src/components/CopyButton.tsx"],"sourcesContent":["\"use client\"\n\nimport { useLatest } from \"ahooks\"\nimport ClipboardJS, { Event } from \"clipboard\"\nimport { ComponentPropsWithoutRef, forwardRef, useEffect, useImperativeHandle, useRef } from \"react\"\n\nexport { Event } from \"clipboard\"\n\nexport type CopyButtonProps = ComponentPropsWithoutRef<\"button\"> & {\n    text?: string\n    onCopySuccess?: (e: Event) => void\n    onCopyError?: (e: Event) => void\n}\n\nexport const CopyButton = forwardRef<HTMLButtonElement, CopyButtonProps>((props, ref) => {\n    const { text, onCopySuccess: _onCoptSuccess, onCopyError: _onCopyError, ...rest } = props\n    const ele = useRef<HTMLButtonElement>(null)\n    const onCopySuccess = useLatest(_onCoptSuccess)\n    const onCopyError = useLatest(_onCopyError)\n\n    useImperativeHandle(ref, () => ele.current!, [ele.current])\n\n    useEffect(() => {\n        const clipboard = new ClipboardJS(ele.current!)\n        clipboard.on(\"success\", event => onCopySuccess.current?.(event))\n        clipboard.on(\"error\", event => onCopyError.current?.(event))\n        return () => clipboard.destroy()\n    }, [])\n\n    return <button ref={ele} {...rest} data-clipboard-text={text} />\n})\n"],"mappings":"AAAA,YAAY;;AAEZ,SAASA,SAAS,QAAQ,QAAQ;AAClC,OAAOC,WAAW,MAAiB,WAAW;AAC9C,SAAmCC,UAAU,EAAEC,SAAS,EAAEC,mBAAmB,EAAEC,MAAM,QAAQ,OAAO;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAEpG,SAASC,KAAK,QAAQ,WAAW;AAQjC,OAAO,MAAMC,UAAU,gBAAGP,UAAU,CAAqC,CAACQ,KAAK,EAAEC,GAAG,KAAK;EACrF,MAAM;IAAEC,IAAI;IAAEC,aAAa,EAAEC,cAAc;IAAEC,WAAW,EAAEC,YAAY;IAAE,GAAGC;EAAK,CAAC,GAAGP,KAAK;EACzF,MAAMQ,GAAG,GAAGb,MAAM,CAAoB,IAAI,CAAC;EAC3C,MAAMQ,aAAa,GAAGb,SAAS,CAACc,cAAc,CAAC;EAC/C,MAAMC,WAAW,GAAGf,SAAS,CAACgB,YAAY,CAAC;EAE3CZ,mBAAmB,CAACO,GAAG,EAAE,MAAMO,GAAG,CAACC,OAAQ,EAAE,CAACD,GAAG,CAACC,OAAO,CAAC,CAAC;EAE3DhB,SAAS,CAAC,MAAM;IACZ,MAAMiB,SAAS,GAAG,IAAInB,WAAW,CAACiB,GAAG,CAACC,OAAQ,CAAC;IAC/CC,SAAS,CAACC,EAAE,CAAC,SAAS,EAAEC,KAAK,IAAIT,aAAa,CAACM,OAAO,GAAGG,KAAK,CAAC,CAAC;IAChEF,SAAS,CAACC,EAAE,CAAC,OAAO,EAAEC,KAAK,IAAIP,WAAW,CAACI,OAAO,GAAGG,KAAK,CAAC,CAAC;IAC5D,OAAO,MAAMF,SAAS,CAACG,OAAO,CAAC,CAAC;EACpC,CAAC,EAAE,EAAE,CAAC;EAEN,oBAAOhB,IAAA;IAAQI,GAAG,EAAEO,GAAI;IAAA,GAAKD,IAAI;IAAE,uBAAqBL;EAAK,CAAE,CAAC;AACpE,CAAC,CAAC"}

package/dist/esm/components/Echart.js

@@ -1,3 +1,5 @@
+"use client";
+
 import { init } from "echarts";
 import { forwardRef, useEffect, useImperativeHandle, useLayoutEffect, useRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";

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

@@ -1 +1 @@
-{"version":3,"names":["init","forwardRef","useEffect","useImperativeHandle","useLayoutEffect","useRef","jsx","_jsx","Echart","props","ref","width","height","option","chart","rest","container","chartRef","ele","current","dispose","setOption","resize","Pie","Bar","Line"],"sources":["../../../src/components/Echart.tsx"],"sourcesContent":["import {\n    BarSeriesOption,\n    ComposeOption,\n    DatasetComponentOption,\n    ECharts,\n    GridComponentOption,\n    LineSeriesOption,\n    PieSeriesOption,\n    TitleComponentOption,\n    TooltipComponentOption,\n    init,\n} from \"echarts\"\nimport {\n    ComponentPropsWithoutRef,\n    ForwardRefExoticComponent,\n    ForwardedRef,\n    RefAttributes,\n    forwardRef,\n    useEffect,\n    useImperativeHandle,\n    useLayoutEffect,\n    useRef,\n} from \"react\"\n\nexport type PieOption = ComposeOption<PieSeriesOption | TitleComponentOption | DatasetComponentOption | GridComponentOption | TooltipComponentOption>\n\nexport type BarOption = ComposeOption<BarSeriesOption | TitleComponentOption | DatasetComponentOption | GridComponentOption | TooltipComponentOption>\n\nexport type LineOption = ComposeOption<LineSeriesOption | TitleComponentOption | DatasetComponentOption | GridComponentOption | TooltipComponentOption>\n\nexport interface EchartProps<T extends any = any> extends Omit<ComponentPropsWithoutRef<\"div\">, \"children\"> {\n    width: number\n    height: number\n    option: T\n    chart?: ForwardedRef<ECharts>\n}\n\nexport type EchartComponent<T extends PieOption | BarOption | LineOption> = ForwardRefExoticComponent<\n    Omit<EchartProps<T>, \"ref\"> & RefAttributes<HTMLDivElement>\n>\n\nconst Echart = forwardRef<HTMLDivElement, EchartProps>((props, ref) => {\n    const { width, height, option, chart, ...rest } = props\n    const container = useRef<HTMLDivElement>(null)\n    const chartRef = useRef<ECharts | null>(null)\n\n    useLayoutEffect(() => {\n        const ele = container.current!\n        chartRef.current = init(ele, option, { width, height })\n        return () => chartRef.current?.dispose()\n    }, [])\n\n    useImperativeHandle(ref, () => container.current!, [])\n\n    useImperativeHandle(chart, () => chartRef.current!, [])\n\n    useEffect(() => {\n        chartRef.current?.setOption(option)\n        chartRef.current?.resize({ width, height })\n    })\n\n    return <div ref={container} {...rest} />\n})\n\nexport const Pie = Echart as EchartComponent<PieOption>\nexport const Bar = Echart as EchartComponent<BarOption>\nexport const Line = Echart as EchartComponent<LineOption>\n"],"mappings":"AAAA,SAUIA,IAAI,QACD,SAAS;AAChB,SAKIC,UAAU,EACVC,SAAS,EACTC,mBAAmB,EACnBC,eAAe,EACfC,MAAM,QACH,OAAO;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAmBd,MAAMC,MAAM,gBAAGP,UAAU,CAA8B,CAACQ,KAAK,EAAEC,GAAG,KAAK;EACnE,MAAM;IAAEC,KAAK;IAAEC,MAAM;IAAEC,MAAM;IAAEC,KAAK;IAAE,GAAGC;EAAK,CAAC,GAAGN,KAAK;EACvD,MAAMO,SAAS,GAAGX,MAAM,CAAiB,IAAI,CAAC;EAC9C,MAAMY,QAAQ,GAAGZ,MAAM,CAAiB,IAAI,CAAC;EAE7CD,eAAe,CAAC,MAAM;IAClB,MAAMc,GAAG,GAAGF,SAAS,CAACG,OAAQ;IAC9BF,QAAQ,CAACE,OAAO,GAAGnB,IAAI,CAACkB,GAAG,EAAEL,MAAM,EAAE;MAAEF,KAAK;MAAEC;IAAO,CAAC,CAAC;IACvD,OAAO,MAAMK,QAAQ,CAACE,OAAO,EAAEC,OAAO,CAAC,CAAC;EAC5C,CAAC,EAAE,EAAE,CAAC;EAENjB,mBAAmB,CAACO,GAAG,EAAE,MAAMM,SAAS,CAACG,OAAQ,EAAE,EAAE,CAAC;EAEtDhB,mBAAmB,CAACW,KAAK,EAAE,MAAMG,QAAQ,CAACE,OAAQ,EAAE,EAAE,CAAC;EAEvDjB,SAAS,CAAC,MAAM;IACZe,QAAQ,CAACE,OAAO,EAAEE,SAAS,CAACR,MAAM,CAAC;IACnCI,QAAQ,CAACE,OAAO,EAAEG,MAAM,CAAC;MAAEX,KAAK;MAAEC;IAAO,CAAC,CAAC;EAC/C,CAAC,CAAC;EAEF,oBAAOL,IAAA;IAAKG,GAAG,EAAEM,SAAU;IAAA,GAAKD;EAAI,CAAG,CAAC;AAC5C,CAAC,CAAC;AAEF,OAAO,MAAMQ,GAAG,GAAGf,MAAoC;AACvD,OAAO,MAAMgB,GAAG,GAAGhB,MAAoC;AACvD,OAAO,MAAMiB,IAAI,GAAGjB,MAAqC"}
+{"version":3,"names":["init","forwardRef","useEffect","useImperativeHandle","useLayoutEffect","useRef","jsx","_jsx","Echart","props","ref","width","height","option","chart","rest","container","chartRef","ele","current","dispose","setOption","resize","Pie","Bar","Line"],"sources":["../../../src/components/Echart.tsx"],"sourcesContent":["\"use client\"\n\nimport {\n    BarSeriesOption,\n    ComposeOption,\n    DatasetComponentOption,\n    ECharts,\n    GridComponentOption,\n    LineSeriesOption,\n    PieSeriesOption,\n    TitleComponentOption,\n    TooltipComponentOption,\n    init,\n} from \"echarts\"\nimport {\n    ComponentPropsWithoutRef,\n    ForwardRefExoticComponent,\n    ForwardedRef,\n    RefAttributes,\n    forwardRef,\n    useEffect,\n    useImperativeHandle,\n    useLayoutEffect,\n    useRef,\n} from \"react\"\n\nexport type PieOption = ComposeOption<PieSeriesOption | TitleComponentOption | DatasetComponentOption | GridComponentOption | TooltipComponentOption>\n\nexport type BarOption = ComposeOption<BarSeriesOption | TitleComponentOption | DatasetComponentOption | GridComponentOption | TooltipComponentOption>\n\nexport type LineOption = ComposeOption<LineSeriesOption | TitleComponentOption | DatasetComponentOption | GridComponentOption | TooltipComponentOption>\n\nexport interface EchartProps<T extends any = any> extends Omit<ComponentPropsWithoutRef<\"div\">, \"children\"> {\n    width: number\n    height: number\n    option: T\n    chart?: ForwardedRef<ECharts>\n}\n\nexport type EchartComponent<T extends PieOption | BarOption | LineOption> = ForwardRefExoticComponent<\n    Omit<EchartProps<T>, \"ref\"> & RefAttributes<HTMLDivElement>\n>\n\nconst Echart = forwardRef<HTMLDivElement, EchartProps>((props, ref) => {\n    const { width, height, option, chart, ...rest } = props\n    const container = useRef<HTMLDivElement>(null)\n    const chartRef = useRef<ECharts | null>(null)\n\n    useLayoutEffect(() => {\n        const ele = container.current!\n        chartRef.current = init(ele, option, { width, height })\n        return () => chartRef.current?.dispose()\n    }, [])\n\n    useImperativeHandle(ref, () => container.current!, [])\n\n    useImperativeHandle(chart, () => chartRef.current!, [])\n\n    useEffect(() => {\n        chartRef.current?.setOption(option)\n        chartRef.current?.resize({ width, height })\n    })\n\n    return <div ref={container} {...rest} />\n})\n\nexport const Pie = Echart as EchartComponent<PieOption>\nexport const Bar = Echart as EchartComponent<BarOption>\nexport const Line = Echart as EchartComponent<LineOption>\n"],"mappings":"AAAA,YAAY;;AAEZ,SAUIA,IAAI,QACD,SAAS;AAChB,SAKIC,UAAU,EACVC,SAAS,EACTC,mBAAmB,EACnBC,eAAe,EACfC,MAAM,QACH,OAAO;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAmBd,MAAMC,MAAM,gBAAGP,UAAU,CAA8B,CAACQ,KAAK,EAAEC,GAAG,KAAK;EACnE,MAAM;IAAEC,KAAK;IAAEC,MAAM;IAAEC,MAAM;IAAEC,KAAK;IAAE,GAAGC;EAAK,CAAC,GAAGN,KAAK;EACvD,MAAMO,SAAS,GAAGX,MAAM,CAAiB,IAAI,CAAC;EAC9C,MAAMY,QAAQ,GAAGZ,MAAM,CAAiB,IAAI,CAAC;EAE7CD,eAAe,CAAC,MAAM;IAClB,MAAMc,GAAG,GAAGF,SAAS,CAACG,OAAQ;IAC9BF,QAAQ,CAACE,OAAO,GAAGnB,IAAI,CAACkB,GAAG,EAAEL,MAAM,EAAE;MAAEF,KAAK;MAAEC;IAAO,CAAC,CAAC;IACvD,OAAO,MAAMK,QAAQ,CAACE,OAAO,EAAEC,OAAO,CAAC,CAAC;EAC5C,CAAC,EAAE,EAAE,CAAC;EAENjB,mBAAmB,CAACO,GAAG,EAAE,MAAMM,SAAS,CAACG,OAAQ,EAAE,EAAE,CAAC;EAEtDhB,mBAAmB,CAACW,KAAK,EAAE,MAAMG,QAAQ,CAACE,OAAQ,EAAE,EAAE,CAAC;EAEvDjB,SAAS,CAAC,MAAM;IACZe,QAAQ,CAACE,OAAO,EAAEE,SAAS,CAACR,MAAM,CAAC;IACnCI,QAAQ,CAACE,OAAO,EAAEG,MAAM,CAAC;MAAEX,KAAK;MAAEC;IAAO,CAAC,CAAC;EAC/C,CAAC,CAAC;EAEF,oBAAOL,IAAA;IAAKG,GAAG,EAAEM,SAAU;IAAA,GAAKD;EAAI,CAAG,CAAC;AAC5C,CAAC,CAAC;AAEF,OAAO,MAAMQ,GAAG,GAAGf,MAAoC;AACvD,OAAO,MAAMgB,GAAG,GAAGhB,MAAoC;AACvD,OAAO,MAAMiB,IAAI,GAAGjB,MAAqC"}

package/dist/esm/components/Flow.d.ts

@@ -83,4 +83,4 @@ export interface ManualFlowProps<T> extends FlowProps<T> {
 /** 手动组件，由外界指定宽度，性能更好 */
 export declare function ManualFlow<T>(props: ManualFlowProps<T>): import("react/jsx-runtime").JSX.Element;
 /** 自适应浮动组件 */
-export declare function Flow<T>(props: FlowProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function Flow<T>(props: FlowProps<T>): ReactNode;

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>) {\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":["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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"}

package/dist/esm/components/FormLabel.js

@@ -6,31 +6,28 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * 为 Ant Design 的 FormItem 设计的 Label 组件
  */
-export const FormLabel = props => {
-  const {
-    className,
-    style,
-    before,
-    width,
+export const FormLabel = ({
+  className,
+  style,
+  before,
+  width,
+  ...rest
+}) => /*#__PURE__*/_jsxs(Fragment, {
+  children: [!!before && /*#__PURE__*/_jsx("div", {
+    style: {
+      width: 11
+    },
+    children: "\u2002"
+  }), /*#__PURE__*/_jsx("div", {
+    className: clsx(css`
+                    text-align: justify;
+                    text-align-last: justify;
+                `, className),
+    style: {
+      width,
+      ...style
+    },
     ...rest
-  } = props;
-  return /*#__PURE__*/_jsxs(Fragment, {
-    children: [!!before && /*#__PURE__*/_jsx("div", {
-      style: {
-        width: 11
-      },
-      children: "\u2002"
-    }), /*#__PURE__*/_jsx("div", {
-      className: clsx(css`
-                        text-align: justify;
-                        text-align-last: justify;
-                    `, className),
-      style: {
-        width,
-        ...style
-      },
-      ...rest
-    })]
-  });
-};
+  })]
+});
 //# sourceMappingURL=FormLabel.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["clsx","Fragment","css","jsx","_jsx","jsxs","_jsxs","FormLabel","props","className","style","before","width","rest","children"],"sources":["../../../src/components/FormLabel.tsx"],"sourcesContent":["import { clsx } from \"deepsea-tools\"\nimport { ComponentPropsWithoutRef, FC, Fragment } from \"react\"\n\nimport { css } from \"@emotion/css\"\n\nexport type FormLabelProps = ComponentPropsWithoutRef<\"div\"> & {\n    /**\n     * Label 的宽度.\n     */\n    width: number\n    /**\n     * 是否在 Label 前面添加一个空白区域，只有当前 Label 为非必选，而存在其他 Label 为必选的时候开启\n     */\n    before?: boolean\n}\n\n/**\n * 为 Ant Design 的 FormItem 设计的 Label 组件\n */\nexport const FormLabel: FC<FormLabelProps> = props => {\n    const { className, style, before, width, ...rest } = props\n\n    return (\n        <Fragment>\n            {!!before && <div style={{ width: 11 }}>&ensp;</div>}\n            <div\n                className={clsx(\n                    css`\n                        text-align: justify;\n                        text-align-last: justify;\n                    `,\n                    className,\n                )}\n                style={{ width, ...style }}\n                {...rest}\n            />\n        </Fragment>\n    )\n}\n"],"mappings":"AAAA,SAASA,IAAI,QAAQ,eAAe;AACpC,SAAuCC,QAAQ,QAAQ,OAAO;AAE9D,SAASC,GAAG,QAAQ,cAAc;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAalC;AACA;AACA;AACA,OAAO,MAAMC,SAA6B,GAAGC,KAAK,IAAI;EAClD,MAAM;IAAEC,SAAS;IAAEC,KAAK;IAAEC,MAAM;IAAEC,KAAK;IAAE,GAAGC;EAAK,CAAC,GAAGL,KAAK;EAE1D,oBACIF,KAAA,CAACL,QAAQ;IAAAa,QAAA,GACJ,CAAC,CAACH,MAAM,iBAAIP,IAAA;MAAKM,KAAK,EAAE;QAAEE,KAAK,EAAE;MAAG,CAAE;MAAAE,QAAA,EAAC;IAAM,CAAK,CAAC,eACpDV,IAAA;MACIK,SAAS,EAAET,IAAI,CACXE,GAAI;AACxB;AACA;AACA,qBAAqB,EACDO,SACJ,CAAE;MACFC,KAAK,EAAE;QAAEE,KAAK;QAAE,GAAGF;MAAM,CAAE;MAAA,GACvBG;IAAI,CACX,CAAC;EAAA,CACI,CAAC;AAEnB,CAAC"}
+{"version":3,"names":["clsx","Fragment","css","jsx","_jsx","jsxs","_jsxs","FormLabel","className","style","before","width","rest","children"],"sources":["../../../src/components/FormLabel.tsx"],"sourcesContent":["import { clsx } from \"deepsea-tools\"\nimport { ComponentPropsWithoutRef, FC, Fragment } from \"react\"\n\nimport { css } from \"@emotion/css\"\n\nexport type FormLabelProps = ComponentPropsWithoutRef<\"div\"> & {\n    /**\n     * Label 的宽度.\n     */\n    width: number\n    /**\n     * 是否在 Label 前面添加一个空白区域，只有当前 Label 为非必选，而存在其他 Label 为必选的时候开启\n     */\n    before?: boolean\n}\n\n/**\n * 为 Ant Design 的 FormItem 设计的 Label 组件\n */\nexport const FormLabel: FC<FormLabelProps> = ({ className, style, before, width, ...rest }) => (\n    <Fragment>\n        {!!before && <div style={{ width: 11 }}>&ensp;</div>}\n        <div\n            className={clsx(\n                css`\n                    text-align: justify;\n                    text-align-last: justify;\n                `,\n                className,\n            )}\n            style={{ width, ...style }}\n            {...rest}\n        />\n    </Fragment>\n)\n"],"mappings":"AAAA,SAASA,IAAI,QAAQ,eAAe;AACpC,SAAuCC,QAAQ,QAAQ,OAAO;AAE9D,SAASC,GAAG,QAAQ,cAAc;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAalC;AACA;AACA;AACA,OAAO,MAAMC,SAA6B,GAAGA,CAAC;EAAEC,SAAS;EAAEC,KAAK;EAAEC,MAAM;EAAEC,KAAK;EAAE,GAAGC;AAAK,CAAC,kBACtFN,KAAA,CAACL,QAAQ;EAAAY,QAAA,GACJ,CAAC,CAACH,MAAM,iBAAIN,IAAA;IAAKK,KAAK,EAAE;MAAEE,KAAK,EAAE;IAAG,CAAE;IAAAE,QAAA,EAAC;EAAM,CAAK,CAAC,eACpDT,IAAA;IACII,SAAS,EAAER,IAAI,CACXE,GAAI;AACpB;AACA;AACA,iBAAiB,EACDM,SACJ,CAAE;IACFC,KAAK,EAAE;MAAEE,KAAK;MAAE,GAAGF;IAAM,CAAE;IAAA,GACvBG;EAAI,CACX,CAAC;AAAA,CACI,CACb"}

package/dist/esm/components/InfiniteScroll.js

@@ -1,3 +1,5 @@
+"use client";
+
 import { useSize } from "ahooks";
 import { clsx } from "deepsea-tools";
 import { forwardRef, useEffect, useImperativeHandle, useRef } from "react";

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":["import { 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":["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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"}

package/dist/esm/components/Ring.js

@@ -1,5 +1,3 @@
-"use client";
-
 import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
 /** 环形组件 */

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

@@ -1 +1 @@
-{"version":3,"names":["forwardRef","jsx","_jsx","Ring","props","ref","outerWidth","innerWidth","style","rest","outerRadius","innerRadius","width","height","clipPath"],"sources":["../../../src/components/Ring.tsx"],"sourcesContent":["\"use client\"\n\nimport { HTMLAttributes, forwardRef } from \"react\"\n\nexport interface RingProps extends HTMLAttributes<HTMLDivElement> {\n    outerWidth: number\n    innerWidth: number\n}\n\n/** 环形组件 */\nexport const Ring = forwardRef<HTMLDivElement, RingProps>((props, ref) => {\n    const { outerWidth, innerWidth, style, ...rest } = props\n\n    const outerRadius = outerWidth / 2\n\n    const innerRadius = innerWidth / 2\n\n    return (\n        <div\n            ref={ref}\n            style={{\n                ...style,\n                width: `${outerWidth}px`,\n                height: `${outerWidth}px`,\n                clipPath: `path(\"M0,${outerRadius} a${outerRadius},${outerRadius},0,1,0,${outerWidth},0 a${outerRadius},${outerRadius},0,1,0,-${outerWidth},0 l${outerRadius - innerRadius},0 a${innerRadius},${innerRadius},0,0,1,${innerRadius * 2},0 a${innerRadius},${innerRadius},0,0,1,-${innerRadius * 2},0 Z\")`,\n            }}\n            {...rest}\n        />\n    )\n})\n"],"mappings":"AAAA,YAAY;;AAEZ,SAAyBA,UAAU,QAAQ,OAAO;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAOlD;AACA,OAAO,MAAMC,IAAI,gBAAGH,UAAU,CAA4B,CAACI,KAAK,EAAEC,GAAG,KAAK;EACtE,MAAM;IAAEC,UAAU;IAAEC,UAAU;IAAEC,KAAK;IAAE,GAAGC;EAAK,CAAC,GAAGL,KAAK;EAExD,MAAMM,WAAW,GAAGJ,UAAU,GAAG,CAAC;EAElC,MAAMK,WAAW,GAAGJ,UAAU,GAAG,CAAC;EAElC,oBACIL,IAAA;IACIG,GAAG,EAAEA,GAAI;IACTG,KAAK,EAAE;MACH,GAAGA,KAAK;MACRI,KAAK,EAAG,GAAEN,UAAW,IAAG;MACxBO,MAAM,EAAG,GAAEP,UAAW,IAAG;MACzBQ,QAAQ,EAAG,YAAWJ,WAAY,KAAIA,WAAY,IAAGA,WAAY,UAASJ,UAAW,OAAMI,WAAY,IAAGA,WAAY,WAAUJ,UAAW,OAAMI,WAAW,GAAGC,WAAY,OAAMA,WAAY,IAAGA,WAAY,UAASA,WAAW,GAAG,CAAE,OAAMA,WAAY,IAAGA,WAAY,WAAUA,WAAW,GAAG,CAAE;IACpS,CAAE;IAAA,GACEF;EAAI,CACX,CAAC;AAEV,CAAC,CAAC"}
+{"version":3,"names":["forwardRef","jsx","_jsx","Ring","props","ref","outerWidth","innerWidth","style","rest","outerRadius","innerRadius","width","height","clipPath"],"sources":["../../../src/components/Ring.tsx"],"sourcesContent":["import { HTMLAttributes, forwardRef } from \"react\"\n\nexport interface RingProps extends HTMLAttributes<HTMLDivElement> {\n    outerWidth: number\n    innerWidth: number\n}\n\n/** 环形组件 */\nexport const Ring = forwardRef<HTMLDivElement, RingProps>((props, ref) => {\n    const { outerWidth, innerWidth, style, ...rest } = props\n\n    const outerRadius = outerWidth / 2\n\n    const innerRadius = innerWidth / 2\n\n    return (\n        <div\n            ref={ref}\n            style={{\n                ...style,\n                width: `${outerWidth}px`,\n                height: `${outerWidth}px`,\n                clipPath: `path(\"M0,${outerRadius} a${outerRadius},${outerRadius},0,1,0,${outerWidth},0 a${outerRadius},${outerRadius},0,1,0,-${outerWidth},0 l${outerRadius - innerRadius},0 a${innerRadius},${innerRadius},0,0,1,${innerRadius * 2},0 a${innerRadius},${innerRadius},0,0,1,-${innerRadius * 2},0 Z\")`,\n            }}\n            {...rest}\n        />\n    )\n})\n"],"mappings":"AAAA,SAAyBA,UAAU,QAAQ,OAAO;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAOlD;AACA,OAAO,MAAMC,IAAI,gBAAGH,UAAU,CAA4B,CAACI,KAAK,EAAEC,GAAG,KAAK;EACtE,MAAM;IAAEC,UAAU;IAAEC,UAAU;IAAEC,KAAK;IAAE,GAAGC;EAAK,CAAC,GAAGL,KAAK;EAExD,MAAMM,WAAW,GAAGJ,UAAU,GAAG,CAAC;EAElC,MAAMK,WAAW,GAAGJ,UAAU,GAAG,CAAC;EAElC,oBACIL,IAAA;IACIG,GAAG,EAAEA,GAAI;IACTG,KAAK,EAAE;MACH,GAAGA,KAAK;MACRI,KAAK,EAAG,GAAEN,UAAW,IAAG;MACxBO,MAAM,EAAG,GAAEP,UAAW,IAAG;MACzBQ,QAAQ,EAAG,YAAWJ,WAAY,KAAIA,WAAY,IAAGA,WAAY,UAASJ,UAAW,OAAMI,WAAY,IAAGA,WAAY,WAAUJ,UAAW,OAAMI,WAAW,GAAGC,WAAY,OAAMA,WAAY,IAAGA,WAAY,UAASA,WAAW,GAAG,CAAE,OAAMA,WAAY,IAAGA,WAAY,WAAUA,WAAW,GAAG,CAAE;IACpS,CAAE;IAAA,GACEF;EAAI,CACX,CAAC;AAEV,CAAC,CAAC"}

package/dist/esm/components/SectionRing.d.ts

@@ -1,8 +1,8 @@
-import { FC, HTMLAttributes } from "react";
+import { HTMLAttributes } from "react";
 export interface SectionRingProps extends HTMLAttributes<HTMLDivElement> {
     outerRadius: number;
     innerRadius: number;
     count: number;
     angel: number;
 }
-export declare const SectionRing: FC<SectionRingProps>;
+export declare const SectionRing: import("react").ForwardRefExoticComponent<SectionRingProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/esm/components/SectionRing.js

@@ -1,8 +1,9 @@
 "use client";
 
 import { drawArc } from "deepsea-tools";
+import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-export const SectionRing = props => {
+export const SectionRing = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     outerRadius: o,
     innerRadius: i,
@@ -16,16 +17,17 @@ export const SectionRing = props => {
     return drawArc(o, o, radius, startAngle, endAngle, options);
   }
   return /*#__PURE__*/_jsx("div", {
+    ref: ref,
     style: {
-      ...style,
       width: o * 2,
       height: o * 2,
       clipPath: `path("${Array(c).fill(0).map((it, idx) => `${arc(o, idx * (a + s), idx * (a + s) + a)} ${arc(i, idx * (a + s) + a, idx * (a + s), {
         line: true,
         anticlockwise: true
-      })}`).join(" ")} Z")`
+      })}`).join(" ")} Z")`,
+      ...style
     },
     ...rest
   });
-};
+});
 //# sourceMappingURL=SectionRing.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["drawArc","jsx","_jsx","SectionRing","props","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 { FC, HTMLAttributes } from \"react\"\n\nexport interface SectionRingProps extends HTMLAttributes<HTMLDivElement> {\n    outerRadius: number\n    innerRadius: number\n    count: number\n    angel: number\n}\n\nexport const SectionRing: FC<SectionRingProps> = props => {\n    const { outerRadius: o, innerRadius: i, count: c, angel: a, style, ...rest } = props\n\n    const s = (Math.PI * 2) / c - a\n\n    function arc(radius: number, startAngle: number, endAngle: number, options: DrawArcOptions = {}) {\n        return drawArc(o, o, radius, startAngle, endAngle, options)\n    }\n\n    return (\n        <div\n            style={{\n                ...style,\n                width: o * 2,\n                height: o * 2,\n                clipPath: `path(\"${Array(c)\n                    .fill(0)\n                    .map(\n                        (it, idx) =>\n                            `${arc(o, idx * (a + s), idx * (a + s) + a)} ${arc(i, idx * (a + s) + a, idx * (a + s), { line: true, anticlockwise: true })}`,\n                    )\n                    .join(\" \")} Z\")`,\n            }}\n            {...rest}\n        />\n    )\n}\n"],"mappings":"AAAA,YAAY;;AAEZ,SAAyBA,OAAO,QAAQ,eAAe;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAUvD,OAAO,MAAMC,WAAiC,GAAGC,KAAK,IAAI;EACtD,MAAM;IAAEC,WAAW,EAAEC,CAAC;IAAEC,WAAW,EAAEC,CAAC;IAAEC,KAAK,EAAEC,CAAC;IAAEC,KAAK,EAAEC,CAAC;IAAEC,KAAK;IAAE,GAAGC;EAAK,CAAC,GAAGV,KAAK;EAEpF,MAAMW,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,OAAOtB,OAAO,CAACM,CAAC,EAAEA,CAAC,EAAEa,MAAM,EAAEC,UAAU,EAAEC,QAAQ,EAAEC,OAAO,CAAC;EAC/D;EAEA,oBACIpB,IAAA;IACIW,KAAK,EAAE;MACH,GAAGA,KAAK;MACRU,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;IACnB,CAAE;IAAA,GACEnB;EAAI,CACX,CAAC;AAEV,CAAC"}
+{"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"}

package/dist/esm/components/Skeleton.js

@@ -1,17 +1,14 @@
-"use client";
-
 import { clsx } from "deepsea-tools";
 import { forwardRef } from "react";
 import { css } from "@emotion/css";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const Skeleton = /*#__PURE__*/forwardRef((props, ref) => {
-  let {
+  const {
     className,
-    loading,
     children,
+    loading = children === undefined || children === null,
     ...rest
   } = props;
-  loading ??= children === undefined || children === null;
   return /*#__PURE__*/_jsx("div", {
     ref: ref,
     className: clsx(css`

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

@@ -1 +1 @@
-{"version":3,"names":["clsx","forwardRef","css","jsx","_jsx","Skeleton","props","ref","className","loading","children","rest","undefined"],"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    let { className, loading, children, ...rest } = props\n\n    loading ??= children === undefined || children === null\n\n    return (\n        <div\n            ref={ref}\n            className={clsx(\n                css`\n                    @keyframes shimmer {\n                        0% {\n                            background-position: -400px 0px;\n                        }\n                        100% {\n                            background-position: 400px 0px;\n                        }\n                    }\n                `,\n                loading &&\n                    css`\n                        background-image: linear-gradient(to right, rgba(0, 0, 0, 0.067) 8%, rgba(0, 0, 0, 0.133) 18%, rgba(0, 0, 0, 0.067) 33%);\n                        animation-duration: 1s;\n                        animation-fill-mode: forwards;\n                        animation-iteration-count: infinite;\n                        animation-name: shimmer;\n                        animation-timing-function: linear;\n                        background-size: 800px 104px;\n                    `,\n                className,\n            )}\n            {...rest}\n        >\n            {children}\n        </div>\n    )\n})\n"],"mappings":"AAAA,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,IAAI;IAAEC,SAAS;IAAEC,OAAO;IAAEC,QAAQ;IAAE,GAAGC;EAAK,CAAC,GAAGL,KAAK;EAErDG,OAAO,KAAKC,QAAQ,KAAKE,SAAS,IAAIF,QAAQ,KAAK,IAAI;EAEvD,oBACIN,IAAA;IACIG,GAAG,EAAEA,GAAI;IACTC,SAAS,EAAER,IAAI,CACXE,GAAI;AACpB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iBAAiB,EACDO,OAAO,IACHP,GAAI;AACxB;AACA;AACA;AACA;AACA;AACA;AACA;AACA,qBAAqB,EACLM,SACJ,CAAE;IAAA,GACEG,IAAI;IAAAD,QAAA,EAEPA;EAAQ,CACR,CAAC;AAEd,CAAC,CAAC"}
+{"version":3,"names":["clsx","forwardRef","css","jsx","_jsx","Skeleton","props","ref","className","children","loading","undefined","rest"],"sources":["../../../src/components/Skeleton.tsx"],"sourcesContent":["import { 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,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"}

package/dist/esm/components/Title.js

@@ -1,3 +1,5 @@
+"use client";
+
 import { forwardRef, useImperativeHandle, useLayoutEffect, useRef } from "react";
 import { createPortal } from "react-dom";
 import { getReactVersion } from "../utils/getReactVersion";

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

@@ -1 +1 @@
-{"version":3,"names":["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":["import { 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 createPortal(<title ref={ele} {...props} />, document.head)\n})\n"],"mappings":"AAAA,SAAmCA,UAAU,EAAEC,mBAAmB,EAAEC,eAAe,EAAEC,MAAM,QAAQ,OAAO;AAC1G,SAASC,YAAY,QAAQ,WAAW;AAExC,SAASC,eAAe;AAAkC,SAAAC,GAAA,IAAAC,IAAA;AAI1D,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,oBAAOV,YAAY,eAACG,IAAA;IAAOI,GAAG,EAAEC,GAAI;IAAA,GAAKF;EAAK,CAAG,CAAC,EAAEK,QAAQ,CAACC,IAAI,CAAC;AACtE,CAAC,CAAC"}
+{"version":3,"names":["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 { 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 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;AAExC,SAASC,eAAe;AAAkC,SAAAC,GAAA,IAAAC,IAAA;AAI1D,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,oBAAOV,YAAY,eAACG,IAAA;IAAOI,GAAG,EAAEC,GAAI;IAAA,GAAKF;EAAK,CAAG,CAAC,EAAEK,QAAQ,CAACC,IAAI,CAAC;AACtE,CAAC,CAAC"}

package/dist/esm/components/Trapezium.js

@@ -1,5 +1,3 @@
-"use client";
-
 import { clsx } from "deepsea-tools";
 import { forwardRef } from "react";
 import { css } from "@emotion/css";

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;AAAkB,SAAAC,GAAA,IAAAC,IAAA;AASnD;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":["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":["import { 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,SAASA,IAAI,QAAQ,eAAe;AACpC,SAAyBC,UAAU,QAAQ,OAAO;AAElD,SAASC,GAAG,QAAQ,cAAc;AAClC,SAASC,EAAE,EAAEC,oBAAoB;AAAkB,SAAAC,GAAA,IAAAC,IAAA;AASnD;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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "deepsea-components",
-  "version": "5.7.5",
+  "version": "5.7.6",
   "description": "格数科技自用组件库",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

package/src/components/CircleText.tsx

@@ -1,5 +1,3 @@
-"use client"
-
 import { FC, Fragment, HTMLAttributes } from "react"
 
 export interface CircleTextProps extends Omit<HTMLAttributes<HTMLSpanElement>, "children"> {

package/src/components/CopyButton.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import { useLatest } from "ahooks"
 import ClipboardJS, { Event } from "clipboard"
 import { ComponentPropsWithoutRef, forwardRef, useEffect, useImperativeHandle, useRef } from "react"

package/src/components/Echart.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import {
     BarSeriesOption,
     ComposeOption,

package/src/components/Flow.tsx

@@ -240,7 +240,7 @@ export function ManualFlow<T>(props: ManualFlowProps<T>) {
 }
 
 /** 自适应浮动组件 */
-export function Flow<T>(props: FlowProps<T>) {
+export function Flow<T>(props: FlowProps<T>): ReactNode {
     const {
         itemWidth,
         itemHeight,

package/src/components/FormLabel.tsx

@@ -17,23 +17,19 @@ export type FormLabelProps = ComponentPropsWithoutRef<"div"> & {
 /**
  * 为 Ant Design 的 FormItem 设计的 Label 组件
  */
-export const FormLabel: FC<FormLabelProps> = props => {
-    const { className, style, before, width, ...rest } = props
-
-    return (
-        <Fragment>
-            {!!before && <div style={{ width: 11 }}>&ensp;</div>}
-            <div
-                className={clsx(
-                    css`
-                        text-align: justify;
-                        text-align-last: justify;
-                    `,
-                    className,
-                )}
-                style={{ width, ...style }}
-                {...rest}
-            />
-        </Fragment>
-    )
-}
+export const FormLabel: FC<FormLabelProps> = ({ className, style, before, width, ...rest }) => (
+    <Fragment>
+        {!!before && <div style={{ width: 11 }}>&ensp;</div>}
+        <div
+            className={clsx(
+                css`
+                    text-align: justify;
+                    text-align-last: justify;
+                `,
+                className,
+            )}
+            style={{ width, ...style }}
+            {...rest}
+        />
+    </Fragment>
+)

package/src/components/InfiniteScroll.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import { useSize } from "ahooks"
 import { clsx } from "deepsea-tools"
 import { CSSProperties, ComponentPropsWithoutRef, MouseEvent as ReactMouseEvent, forwardRef, useEffect, useImperativeHandle, useRef } from "react"

package/src/components/Ring.tsx

@@ -1,5 +1,3 @@
-"use client"
-
 import { HTMLAttributes, forwardRef } from "react"
 
 export interface RingProps extends HTMLAttributes<HTMLDivElement> {

package/src/components/SectionRing.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import { DrawArcOptions, drawArc } from "deepsea-tools"
-import { FC, HTMLAttributes } from "react"
+import { HTMLAttributes, forwardRef } from "react"
 
 export interface SectionRingProps extends HTMLAttributes<HTMLDivElement> {
     outerRadius: number
@@ -10,7 +10,7 @@ export interface SectionRingProps extends HTMLAttributes<HTMLDivElement> {
     angel: number
 }
 
-export const SectionRing: FC<SectionRingProps> = props => {
+export const SectionRing = forwardRef<HTMLDivElement, SectionRingProps>((props, ref) => {
     const { outerRadius: o, innerRadius: i, count: c, angel: a, style, ...rest } = props
 
     const s = (Math.PI * 2) / c - a
@@ -21,8 +21,8 @@ export const SectionRing: FC<SectionRingProps> = props => {
 
     return (
         <div
+            ref={ref}
             style={{
-                ...style,
                 width: o * 2,
                 height: o * 2,
                 clipPath: `path("${Array(c)
@@ -32,8 +32,9 @@ export const SectionRing: FC<SectionRingProps> = props => {
                             `${arc(o, idx * (a + s), idx * (a + s) + a)} ${arc(i, idx * (a + s) + a, idx * (a + s), { line: true, anticlockwise: true })}`,
                     )
                     .join(" ")} Z")`,
+                ...style,
             }}
             {...rest}
         />
     )
-}
+})

package/src/components/Skeleton.tsx

@@ -1,5 +1,3 @@
-"use client"
-
 import { clsx } from "deepsea-tools"
 import { HTMLAttributes, forwardRef } from "react"
 
@@ -10,9 +8,7 @@ export interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
 }
 
 export const Skeleton = forwardRef<HTMLDivElement, SkeletonProps>((props, ref) => {
-    let { className, loading, children, ...rest } = props
-
-    loading ??= children === undefined || children === null
+    const { className, children, loading = children === undefined || children === null, ...rest } = props
 
     return (
         <div

package/src/components/Title.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import { ComponentPropsWithoutRef, forwardRef, useImperativeHandle, useLayoutEffect, useRef } from "react"
 import { createPortal } from "react-dom"
 

package/src/components/Trapezium.tsx

@@ -1,5 +1,3 @@
-"use client"
-
 import { clsx } from "deepsea-tools"
 import { HTMLAttributes, forwardRef } from "react"