deepsea-components 5.6.0 → 5.7.1

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\"\r\n\r\nimport { DrawArcOptions, drawArc } from \"deepsea-tools\"\r\nimport { FC, HTMLAttributes } from \"react\"\r\n\r\nexport interface SectionRingProps extends HTMLAttributes<HTMLDivElement> {\r\n    outerRadius: number\r\n    innerRadius: number\r\n    count: number\r\n    angel: number\r\n}\r\n\r\nexport const SectionRing: FC<SectionRingProps> = props => {\r\n    const { outerRadius: o, innerRadius: i, count: c, angel: a, style, ...rest } = props\r\n\r\n    const s = (Math.PI * 2) / c - a\r\n\r\n    function arc(radius: number, startAngle: number, endAngle: number, options: DrawArcOptions = {}) {\r\n        return drawArc(o, o, radius, startAngle, endAngle, options)\r\n    }\r\n\r\n    return (\r\n        <div\r\n            style={{\r\n                ...style,\r\n                width: o * 2,\r\n                height: o * 2,\r\n                clipPath: `path(\"${Array(c)\r\n                    .fill(0)\r\n                    .map((it, idx) => `${arc(o, idx * (a + s), idx * (a + s) + a)} ${arc(i, idx * (a + s) + a, idx * (a + s), { line: true, anticlockwise: true })}`)\r\n                    .join(\" \")} Z\")`\r\n            }}\r\n            {...rest}\r\n        />\r\n    )\r\n}\r\n"],"mappings":"AAAA,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,CAAC,CAACC,EAAE,EAAEC,GAAG,KAAM,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,EAAC,CAAC,CAChJC,IAAI,CAAC,GAAG,CAAE;IACnB,CAAE;IAAA,GACEnB;EAAI,CACX,CAAC;AAEV,CAAC"}
+{"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"}

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

@@ -1 +1 @@
-{"version":3,"names":["css","clsx","forwardRef","jsx","_jsx","Skeleton","props","ref","className","loading","children","rest","undefined"],"sources":["../../../src/components/Skeleton.tsx"],"sourcesContent":["\"use client\"\r\n\r\nimport { css } from \"@emotion/css\"\r\nimport { clsx } from \"deepsea-tools\"\r\nimport { forwardRef, HTMLAttributes } from \"react\"\r\n\r\nexport interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {\r\n    loading?: boolean\r\n}\r\n\r\nexport const Skeleton = forwardRef<HTMLDivElement, SkeletonProps>((props, ref) => {\r\n    let { className, loading, children, ...rest } = props\r\n\r\n    loading ??= children === undefined || children === null\r\n\r\n    return (\r\n        <div\r\n            ref={ref}\r\n            className={clsx(\r\n                css`\r\n                    @keyframes shimmer {\r\n                        0% {\r\n                            background-position: -400px 0px;\r\n                        }\r\n                        100% {\r\n                            background-position: 400px 0px;\r\n                        }\r\n                    }\r\n                `,\r\n                loading &&\r\n                    css`\r\n                        background-image: linear-gradient(to right, rgba(0, 0, 0, 0.067) 8%, rgba(0, 0, 0, 0.133) 18%, rgba(0, 0, 0, 0.067) 33%);\r\n                        animation-duration: 1s;\r\n                        animation-fill-mode: forwards;\r\n                        animation-iteration-count: infinite;\r\n                        animation-name: shimmer;\r\n                        animation-timing-function: linear;\r\n                        background-size: 800px 104px;\r\n                    `,\r\n                className\r\n            )}\r\n            {...rest}>\r\n            {children}\r\n        </div>\r\n    )\r\n})\r\n"],"mappings":"AAAA,YAAY;;AAEZ,SAASA,GAAG,QAAQ,cAAc;AAClC,SAASC,IAAI,QAAQ,eAAe;AACpC,SAASC,UAAU,QAAwB,OAAO;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAMlD,OAAO,MAAMC,QAAQ,gBAAGH,UAAU,CAAgC,CAACI,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,EAAEP,IAAI,CACXD,GAAI;AACpB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iBAAiB,EACDS,OAAO,IACHT,GAAI;AACxB;AACA;AACA;AACA;AACA;AACA;AACA;AACA,qBAAqB,EACLQ,SACJ,CAAE;IAAA,GACEG,IAAI;IAAAD,QAAA,EACPA;EAAQ,CACR,CAAC;AAEd,CAAC,CAAC"}
+{"version":3,"names":["css","clsx","forwardRef","jsx","_jsx","Skeleton","props","ref","className","loading","children","rest","undefined"],"sources":["../../../src/components/Skeleton.tsx"],"sourcesContent":["\"use client\"\n\nimport { css } from \"@emotion/css\"\nimport { clsx } from \"deepsea-tools\"\nimport { forwardRef, HTMLAttributes } from \"react\"\n\nexport interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {\n    loading?: boolean\n}\n\nexport const Skeleton = forwardRef<HTMLDivElement, SkeletonProps>((props, ref) => {\n    let { className, loading, children, ...rest } = props\n\n    loading ??= children === undefined || children === null\n\n    return (\n        <div\n            ref={ref}\n            className={clsx(\n                css`\n                    @keyframes shimmer {\n                        0% {\n                            background-position: -400px 0px;\n                        }\n                        100% {\n                            background-position: 400px 0px;\n                        }\n                    }\n                `,\n                loading &&\n                    css`\n                        background-image: linear-gradient(to right, rgba(0, 0, 0, 0.067) 8%, rgba(0, 0, 0, 0.133) 18%, rgba(0, 0, 0, 0.067) 33%);\n                        animation-duration: 1s;\n                        animation-fill-mode: forwards;\n                        animation-iteration-count: infinite;\n                        animation-name: shimmer;\n                        animation-timing-function: linear;\n                        background-size: 800px 104px;\n                    `,\n                className,\n            )}\n            {...rest}\n        >\n            {children}\n        </div>\n    )\n})\n"],"mappings":"AAAA,YAAY;;AAEZ,SAASA,GAAG,QAAQ,cAAc;AAClC,SAASC,IAAI,QAAQ,eAAe;AACpC,SAASC,UAAU,QAAwB,OAAO;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAMlD,OAAO,MAAMC,QAAQ,gBAAGH,UAAU,CAAgC,CAACI,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,EAAEP,IAAI,CACXD,GAAI;AACpB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iBAAiB,EACDS,OAAO,IACHT,GAAI;AACxB;AACA;AACA;AACA;AACA;AACA;AACA;AACA,qBAAqB,EACLQ,SACJ,CAAE;IAAA,GACEG,IAAI;IAAAD,QAAA,EAEPA;EAAQ,CACR,CAAC;AAEd,CAAC,CAAC"}

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 { ComponentProps, forwardRef, useImperativeHandle, useLayoutEffect, useRef } from \"react\"\r\nimport { createPortal } from \"react-dom\"\r\nimport { getReactVersion } from \"../utils/getReactVersion\"\r\n\r\nexport type TitleProps = ComponentProps<\"title\">\r\n\r\nconst [major] = getReactVersion()\r\n\r\nexport const Title = forwardRef<HTMLTitleElement, TitleProps>((props, ref) => {\r\n\r\n    if (major >= 19) return <title ref={ref} {...props} />\r\n\r\n    const ele = useRef<HTMLTitleElement>(null)\r\n\r\n    useImperativeHandle(ref, () => ele.current as HTMLTitleElement, [ele.current])\r\n\r\n    useLayoutEffect(() => {\r\n        const title = document.head.querySelector(\"title\")\r\n        if (title === ele.current) return\r\n        document.head.insertBefore(ele.current as HTMLTitleElement, title)\r\n    }, [])\r\n\r\n    return createPortal(<title ref={ele} {...props} />, document.head)\r\n})\r\n"],"mappings":"AAAA,SAAyBA,UAAU,EAAEC,mBAAmB,EAAEC,eAAe,EAAEC,MAAM,QAAQ,OAAO;AAChG,SAASC,YAAY,QAAQ,WAAW;AACxC,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;EAE1E,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":["import { ComponentProps, forwardRef, useImperativeHandle, useLayoutEffect, useRef } from \"react\"\nimport { createPortal } from \"react-dom\"\nimport { getReactVersion } from \"../utils/getReactVersion\"\n\nexport type TitleProps = ComponentProps<\"title\">\n\nconst [major] = getReactVersion()\n\nexport const Title = forwardRef<HTMLTitleElement, TitleProps>((props, ref) => {\n    if (major >= 19) return <title ref={ref} {...props} />\n\n    const ele = useRef<HTMLTitleElement>(null)\n\n    useImperativeHandle(ref, () => ele.current as HTMLTitleElement, [ele.current])\n\n    useLayoutEffect(() => {\n        const title = document.head.querySelector(\"title\")\n        if (title === ele.current) return\n        document.head.insertBefore(ele.current as HTMLTitleElement, title)\n    }, [])\n\n    return createPortal(<title ref={ele} {...props} />, document.head)\n})\n"],"mappings":"AAAA,SAAyBA,UAAU,EAAEC,mBAAmB,EAAEC,eAAe,EAAEC,MAAM,QAAQ,OAAO;AAChG,SAASC,YAAY,QAAQ,WAAW;AACxC,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/TransitionBox.js.map

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

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

@@ -1 +1 @@
-{"version":3,"names":["setFrameInterval","forwardRef","useEffect","useImperativeHandle","useRef","jsx","_jsx","TransitionNum","props","ref","children","num","period","numToStr","ins","rest","Number","isInteger","RangeError","ele","cache","show","current","get","innerText","String","div","speed","cancel","Math","floor","ceil"],"sources":["../../../src/components/TransitionNum.tsx"],"sourcesContent":["\"use client\"\r\n\r\nimport { setFrameInterval } from \"deepsea-tools\"\r\nimport { ForwardedRef, HTMLAttributes, forwardRef, useEffect, useImperativeHandle, useRef } from \"react\"\r\n\r\nexport interface TransitionNumProps extends Omit<HTMLAttributes<HTMLDivElement>, \"children\"> {\r\n    /** 当前数字 */\r\n    children: number\r\n    /** 变换周期，单位帧 */\r\n    period: number\r\n    /** 数字转换为字符串的方法 */\r\n    numToStr?: (num: number) => string\r\n    /** 实例 */\r\n    ins?: ForwardedRef<TransitionNumIns>\r\n}\r\n\r\nexport interface TransitionNumIns {\r\n    get(): number\r\n}\r\n\r\n/** 渐变数字组件 */\r\nexport const TransitionNum = forwardRef<HTMLDivElement, TransitionNumProps>((props, ref) => {\r\n    const { children: num, period, numToStr, ins, ...rest } = props\r\n    if (!Number.isInteger(num) || !Number.isInteger(period) || period <= 0) {\r\n        throw new RangeError(\"目标数字必须是整数，周期必须是正整数\")\r\n    }\r\n    const ele = useRef<HTMLDivElement>(null)\r\n    const cache = useRef({ num, period, numToStr, show: num })\r\n    cache.current = { ...cache.current, num, period, numToStr }\r\n\r\n    useImperativeHandle(ref, () => ele.current!, [])\r\n    useImperativeHandle(ins, () => ({ get: () => cache.current.show }), [])\r\n\r\n    useEffect(() => {\r\n        const { num, period, show, numToStr } = cache.current\r\n        ele.current!.innerText = (numToStr || String)(show)\r\n        if (num === show) return\r\n        const div = ele.current!\r\n        const speed = (num - show) / period\r\n        const cancel = setFrameInterval(() => {\r\n            const { num, numToStr } = cache.current\r\n            cache.current.show += speed\r\n            if ((speed > 0 && cache.current.show > num) || (speed < 0 && cache.current.show < num)) {\r\n                cancel()\r\n                cache.current.show = num\r\n            }\r\n            div.innerText = (numToStr || String)(speed > 0 ? Math.floor(cache.current.show) : Math.ceil(cache.current.show))\r\n        }, 1)\r\n\r\n        return cancel\r\n    }, [num])\r\n\r\n    return <div ref={ele} {...rest} />\r\n})\r\n"],"mappings":"AAAA,YAAY;;AAEZ,SAASA,gBAAgB,QAAQ,eAAe;AAChD,SAAuCC,UAAU,EAAEC,SAAS,EAAEC,mBAAmB,EAAEC,MAAM,QAAQ,OAAO;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAiBxG;AACA,OAAO,MAAMC,aAAa,gBAAGN,UAAU,CAAqC,CAACO,KAAK,EAAEC,GAAG,KAAK;EACxF,MAAM;IAAEC,QAAQ,EAAEC,GAAG;IAAEC,MAAM;IAAEC,QAAQ;IAAEC,GAAG;IAAE,GAAGC;EAAK,CAAC,GAAGP,KAAK;EAC/D,IAAI,CAACQ,MAAM,CAACC,SAAS,CAACN,GAAG,CAAC,IAAI,CAACK,MAAM,CAACC,SAAS,CAACL,MAAM,CAAC,IAAIA,MAAM,IAAI,CAAC,EAAE;IACpE,MAAM,IAAIM,UAAU,CAAC,oBAAoB,CAAC;EAC9C;EACA,MAAMC,GAAG,GAAGf,MAAM,CAAiB,IAAI,CAAC;EACxC,MAAMgB,KAAK,GAAGhB,MAAM,CAAC;IAAEO,GAAG;IAAEC,MAAM;IAAEC,QAAQ;IAAEQ,IAAI,EAAEV;EAAI,CAAC,CAAC;EAC1DS,KAAK,CAACE,OAAO,GAAG;IAAE,GAAGF,KAAK,CAACE,OAAO;IAAEX,GAAG;IAAEC,MAAM;IAAEC;EAAS,CAAC;EAE3DV,mBAAmB,CAACM,GAAG,EAAE,MAAMU,GAAG,CAACG,OAAQ,EAAE,EAAE,CAAC;EAChDnB,mBAAmB,CAACW,GAAG,EAAE,OAAO;IAAES,GAAG,EAAEA,CAAA,KAAMH,KAAK,CAACE,OAAO,CAACD;EAAK,CAAC,CAAC,EAAE,EAAE,CAAC;EAEvEnB,SAAS,CAAC,MAAM;IACZ,MAAM;MAAES,GAAG;MAAEC,MAAM;MAAES,IAAI;MAAER;IAAS,CAAC,GAAGO,KAAK,CAACE,OAAO;IACrDH,GAAG,CAACG,OAAO,CAAEE,SAAS,GAAG,CAACX,QAAQ,IAAIY,MAAM,EAAEJ,IAAI,CAAC;IACnD,IAAIV,GAAG,KAAKU,IAAI,EAAE;IAClB,MAAMK,GAAG,GAAGP,GAAG,CAACG,OAAQ;IACxB,MAAMK,KAAK,GAAG,CAAChB,GAAG,GAAGU,IAAI,IAAIT,MAAM;IACnC,MAAMgB,MAAM,GAAG5B,gBAAgB,CAAC,MAAM;MAClC,MAAM;QAAEW,GAAG;QAAEE;MAAS,CAAC,GAAGO,KAAK,CAACE,OAAO;MACvCF,KAAK,CAACE,OAAO,CAACD,IAAI,IAAIM,KAAK;MAC3B,IAAKA,KAAK,GAAG,CAAC,IAAIP,KAAK,CAACE,OAAO,CAACD,IAAI,GAAGV,GAAG,IAAMgB,KAAK,GAAG,CAAC,IAAIP,KAAK,CAACE,OAAO,CAACD,IAAI,GAAGV,GAAI,EAAE;QACpFiB,MAAM,CAAC,CAAC;QACRR,KAAK,CAACE,OAAO,CAACD,IAAI,GAAGV,GAAG;MAC5B;MACAe,GAAG,CAACF,SAAS,GAAG,CAACX,QAAQ,IAAIY,MAAM,EAAEE,KAAK,GAAG,CAAC,GAAGE,IAAI,CAACC,KAAK,CAACV,KAAK,CAACE,OAAO,CAACD,IAAI,CAAC,GAAGQ,IAAI,CAACE,IAAI,CAACX,KAAK,CAACE,OAAO,CAACD,IAAI,CAAC,CAAC;IACpH,CAAC,EAAE,CAAC,CAAC;IAEL,OAAOO,MAAM;EACjB,CAAC,EAAE,CAACjB,GAAG,CAAC,CAAC;EAET,oBAAOL,IAAA;IAAKG,GAAG,EAAEU,GAAI;IAAA,GAAKJ;EAAI,CAAG,CAAC;AACtC,CAAC,CAAC"}
+{"version":3,"names":["setFrameInterval","forwardRef","useEffect","useImperativeHandle","useRef","jsx","_jsx","TransitionNum","props","ref","children","num","period","numToStr","ins","rest","Number","isInteger","RangeError","ele","cache","show","current","get","innerText","String","div","speed","cancel","Math","floor","ceil"],"sources":["../../../src/components/TransitionNum.tsx"],"sourcesContent":["\"use client\"\n\nimport { setFrameInterval } from \"deepsea-tools\"\nimport { ForwardedRef, HTMLAttributes, forwardRef, useEffect, useImperativeHandle, useRef } from \"react\"\n\nexport interface TransitionNumProps extends Omit<HTMLAttributes<HTMLDivElement>, \"children\"> {\n    /** 当前数字 */\n    children: number\n    /** 变换周期，单位帧 */\n    period: number\n    /** 数字转换为字符串的方法 */\n    numToStr?: (num: number) => string\n    /** 实例 */\n    ins?: ForwardedRef<TransitionNumIns>\n}\n\nexport interface TransitionNumIns {\n    get(): number\n}\n\n/** 渐变数字组件 */\nexport const TransitionNum = forwardRef<HTMLDivElement, TransitionNumProps>((props, ref) => {\n    const { children: num, period, numToStr, ins, ...rest } = props\n    if (!Number.isInteger(num) || !Number.isInteger(period) || period <= 0) {\n        throw new RangeError(\"目标数字必须是整数，周期必须是正整数\")\n    }\n    const ele = useRef<HTMLDivElement>(null)\n    const cache = useRef({ num, period, numToStr, show: num })\n    cache.current = { ...cache.current, num, period, numToStr }\n\n    useImperativeHandle(ref, () => ele.current!, [])\n    useImperativeHandle(ins, () => ({ get: () => cache.current.show }), [])\n\n    useEffect(() => {\n        const { num, period, show, numToStr } = cache.current\n        ele.current!.innerText = (numToStr || String)(show)\n        if (num === show) return\n        const div = ele.current!\n        const speed = (num - show) / period\n        const cancel = setFrameInterval(() => {\n            const { num, numToStr } = cache.current\n            cache.current.show += speed\n            if ((speed > 0 && cache.current.show > num) || (speed < 0 && cache.current.show < num)) {\n                cancel()\n                cache.current.show = num\n            }\n            div.innerText = (numToStr || String)(speed > 0 ? Math.floor(cache.current.show) : Math.ceil(cache.current.show))\n        }, 1)\n\n        return cancel\n    }, [num])\n\n    return <div ref={ele} {...rest} />\n})\n"],"mappings":"AAAA,YAAY;;AAEZ,SAASA,gBAAgB,QAAQ,eAAe;AAChD,SAAuCC,UAAU,EAAEC,SAAS,EAAEC,mBAAmB,EAAEC,MAAM,QAAQ,OAAO;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAiBxG;AACA,OAAO,MAAMC,aAAa,gBAAGN,UAAU,CAAqC,CAACO,KAAK,EAAEC,GAAG,KAAK;EACxF,MAAM;IAAEC,QAAQ,EAAEC,GAAG;IAAEC,MAAM;IAAEC,QAAQ;IAAEC,GAAG;IAAE,GAAGC;EAAK,CAAC,GAAGP,KAAK;EAC/D,IAAI,CAACQ,MAAM,CAACC,SAAS,CAACN,GAAG,CAAC,IAAI,CAACK,MAAM,CAACC,SAAS,CAACL,MAAM,CAAC,IAAIA,MAAM,IAAI,CAAC,EAAE;IACpE,MAAM,IAAIM,UAAU,CAAC,oBAAoB,CAAC;EAC9C;EACA,MAAMC,GAAG,GAAGf,MAAM,CAAiB,IAAI,CAAC;EACxC,MAAMgB,KAAK,GAAGhB,MAAM,CAAC;IAAEO,GAAG;IAAEC,MAAM;IAAEC,QAAQ;IAAEQ,IAAI,EAAEV;EAAI,CAAC,CAAC;EAC1DS,KAAK,CAACE,OAAO,GAAG;IAAE,GAAGF,KAAK,CAACE,OAAO;IAAEX,GAAG;IAAEC,MAAM;IAAEC;EAAS,CAAC;EAE3DV,mBAAmB,CAACM,GAAG,EAAE,MAAMU,GAAG,CAACG,OAAQ,EAAE,EAAE,CAAC;EAChDnB,mBAAmB,CAACW,GAAG,EAAE,OAAO;IAAES,GAAG,EAAEA,CAAA,KAAMH,KAAK,CAACE,OAAO,CAACD;EAAK,CAAC,CAAC,EAAE,EAAE,CAAC;EAEvEnB,SAAS,CAAC,MAAM;IACZ,MAAM;MAAES,GAAG;MAAEC,MAAM;MAAES,IAAI;MAAER;IAAS,CAAC,GAAGO,KAAK,CAACE,OAAO;IACrDH,GAAG,CAACG,OAAO,CAAEE,SAAS,GAAG,CAACX,QAAQ,IAAIY,MAAM,EAAEJ,IAAI,CAAC;IACnD,IAAIV,GAAG,KAAKU,IAAI,EAAE;IAClB,MAAMK,GAAG,GAAGP,GAAG,CAACG,OAAQ;IACxB,MAAMK,KAAK,GAAG,CAAChB,GAAG,GAAGU,IAAI,IAAIT,MAAM;IACnC,MAAMgB,MAAM,GAAG5B,gBAAgB,CAAC,MAAM;MAClC,MAAM;QAAEW,GAAG;QAAEE;MAAS,CAAC,GAAGO,KAAK,CAACE,OAAO;MACvCF,KAAK,CAACE,OAAO,CAACD,IAAI,IAAIM,KAAK;MAC3B,IAAKA,KAAK,GAAG,CAAC,IAAIP,KAAK,CAACE,OAAO,CAACD,IAAI,GAAGV,GAAG,IAAMgB,KAAK,GAAG,CAAC,IAAIP,KAAK,CAACE,OAAO,CAACD,IAAI,GAAGV,GAAI,EAAE;QACpFiB,MAAM,CAAC,CAAC;QACRR,KAAK,CAACE,OAAO,CAACD,IAAI,GAAGV,GAAG;MAC5B;MACAe,GAAG,CAACF,SAAS,GAAG,CAACX,QAAQ,IAAIY,MAAM,EAAEE,KAAK,GAAG,CAAC,GAAGE,IAAI,CAACC,KAAK,CAACV,KAAK,CAACE,OAAO,CAACD,IAAI,CAAC,GAAGQ,IAAI,CAACE,IAAI,CAACX,KAAK,CAACE,OAAO,CAACD,IAAI,CAAC,CAAC;IACpH,CAAC,EAAE,CAAC,CAAC;IAEL,OAAOO,MAAM;EACjB,CAAC,EAAE,CAACjB,GAAG,CAAC,CAAC;EAET,oBAAOL,IAAA;IAAKG,GAAG,EAAEU,GAAI;IAAA,GAAKJ;EAAI,CAAG,CAAC;AACtC,CAAC,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"names":["css","clsx","forwardRef","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\"\r\n\r\nimport { css } from \"@emotion/css\"\r\nimport { clsx } from \"deepsea-tools\"\r\nimport { HTMLAttributes, forwardRef } from \"react\"\r\nimport { px, transformCSSVariable } from \"../utils\"\r\n\r\nexport interface TrapeziumProps extends HTMLAttributes<HTMLDivElement> {\r\n    top: number\r\n    bottom: number\r\n    height: number\r\n    borderRadius: number\r\n}\r\n\r\n/** 梯形组件 */\r\nexport const Trapezium = forwardRef<HTMLDivElement, TrapeziumProps>((props, ref) => {\r\n    const { top, bottom, height, borderRadius, className, style, ...rest } = props\r\n\r\n    const diff = (bottom - top) / 2\r\n\r\n    const a = Math.atan(height / diff) / 2\r\n\r\n    const b = borderRadius / Math.tan(a)\r\n\r\n    const c = b * Math.cos(a * 2)\r\n\r\n    const d = b * Math.sin(a * 2)\r\n\r\n    const e = Math.PI / 2 - a\r\n\r\n    const f = borderRadius / Math.tan(e)\r\n\r\n    const g = f * Math.cos(a * 2)\r\n\r\n    const h = f * Math.sin(a * 2)\r\n\r\n    return (\r\n        <div\r\n            ref={ref}\r\n            className={clsx(\r\n                css`\r\n                    width: var(--width);\r\n                    height: var(--height);\r\n                    clip-path: var(--clip-path);\r\n                `,\r\n                className\r\n            )}\r\n            style={transformCSSVariable(\r\n                {\r\n                    width: px(bottom),\r\n                    height: px(height),\r\n                    clipath: `path(\"M ${diff + f} ${0}  A ${borderRadius} ${borderRadius} 0 0 0 ${diff - g} ${h} L ${c} ${height - d} A ${borderRadius} ${borderRadius} 0 0 0 ${b} ${height} L ${bottom - b} ${height} A ${borderRadius} ${borderRadius} 0 0 0 ${bottom - c} ${height - d} L ${top + diff + g} ${h} A ${borderRadius} ${borderRadius} 0 0 0 ${top + diff - f} ${0} Z\")`\r\n                },\r\n                style\r\n            )}\r\n            {...rest}\r\n        />\r\n    )\r\n})\r\n"],"mappings":"AAAA,YAAY;;AAEZ,SAASA,GAAG,QAAQ,cAAc;AAClC,SAASC,IAAI,QAAQ,eAAe;AACpC,SAAyBC,UAAU,QAAQ,OAAO;AAClD,SAASC,EAAE,EAAEC,oBAAoB;AAAkB,SAAAC,GAAA,IAAAC,IAAA;AASnD;AACA,OAAO,MAAMC,SAAS,gBAAGL,UAAU,CAAiC,CAACM,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,EAAEb,IAAI,CACXD,GAAI;AACpB;AACA;AACA;AACA,iBAAiB,EACDc,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":["css","clsx","forwardRef","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 { css } from \"@emotion/css\"\nimport { clsx } from \"deepsea-tools\"\nimport { HTMLAttributes, forwardRef } from \"react\"\nimport { px, transformCSSVariable } from \"../utils\"\n\nexport interface TrapeziumProps extends HTMLAttributes<HTMLDivElement> {\n    top: number\n    bottom: number\n    height: number\n    borderRadius: number\n}\n\n/** 梯形组件 */\nexport const Trapezium = forwardRef<HTMLDivElement, TrapeziumProps>((props, ref) => {\n    const { top, bottom, height, borderRadius, className, style, ...rest } = props\n\n    const diff = (bottom - top) / 2\n\n    const a = Math.atan(height / diff) / 2\n\n    const b = borderRadius / Math.tan(a)\n\n    const c = b * Math.cos(a * 2)\n\n    const d = b * Math.sin(a * 2)\n\n    const e = Math.PI / 2 - a\n\n    const f = borderRadius / Math.tan(e)\n\n    const g = f * Math.cos(a * 2)\n\n    const h = f * Math.sin(a * 2)\n\n    return (\n        <div\n            ref={ref}\n            className={clsx(\n                css`\n                    width: var(--width);\n                    height: var(--height);\n                    clip-path: var(--clip-path);\n                `,\n                className,\n            )}\n            style={transformCSSVariable(\n                {\n                    width: px(bottom),\n                    height: px(height),\n                    clipath: `path(\"M ${diff + f} ${0}  A ${borderRadius} ${borderRadius} 0 0 0 ${diff - g} ${h} L ${c} ${height - d} A ${borderRadius} ${borderRadius} 0 0 0 ${b} ${height} L ${bottom - b} ${height} A ${borderRadius} ${borderRadius} 0 0 0 ${bottom - c} ${height - d} L ${top + diff + g} ${h} A ${borderRadius} ${borderRadius} 0 0 0 ${top + diff - f} ${0} Z\")`,\n                },\n                style,\n            )}\n            {...rest}\n        />\n    )\n})\n"],"mappings":"AAAA,YAAY;;AAEZ,SAASA,GAAG,QAAQ,cAAc;AAClC,SAASC,IAAI,QAAQ,eAAe;AACpC,SAAyBC,UAAU,QAAQ,OAAO;AAClD,SAASC,EAAE,EAAEC,oBAAoB;AAAkB,SAAAC,GAAA,IAAAC,IAAA;AASnD;AACA,OAAO,MAAMC,SAAS,gBAAGL,UAAU,CAAiC,CAACM,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,EAAEb,IAAI,CACXD,GAAI;AACpB;AACA;AACA;AACA,iBAAiB,EACDc,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/dist/esm/index.d.ts

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

package/dist/esm/index.js

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

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["../../src/index.ts"],"sourcesContent":["export * from \"@components/AutoFit\"\nexport * from \"@components/AutoScroll\"\nexport * from \"@components/AutoSizeTextarea\"\nexport * from \"@components/CircleText\"\nexport * from \"@components/Echart\"\nexport * from \"@components/Flow\"\nexport * from \"@components/FormLabel\"\nexport * from \"@components/HlsPlayer\"\nexport * from \"@components/InfiniteScroll\"\nexport * from \"@components/InputFile\"\nexport * from \"@components/LoopSwiper\"\nexport * from \"@components/Ring\"\nexport * from \"@components/Scroll\"\nexport * from \"@components/SectionRing\"\nexport * from \"@components/Skeleton\"\nexport * from \"@components/Title\"\nexport * from \"@components/TransitionBox\"\nexport * from \"@components/TransitionNum\"\nexport * from \"@components/Trapezium\"\nexport * from \"@utils/getReactVersion\"\nexport * from \"@utils/index\"\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA"}
+{"version":3,"names":[],"sources":["../../src/index.ts"],"sourcesContent":["export * from \"@components/AutoFit\"\nexport * from \"@components/AutoScroll\"\nexport * from \"@components/AutoSizeTextarea\"\nexport * from \"@components/CircleText\"\nexport * from \"@components/CopyButton\"\nexport * from \"@components/Echart\"\nexport * from \"@components/Flow\"\nexport * from \"@components/FormLabel\"\nexport * from \"@components/HlsPlayer\"\nexport * from \"@components/InfiniteScroll\"\nexport * from \"@components/InputFile\"\nexport * from \"@components/LoopSwiper\"\nexport * from \"@components/Ring\"\nexport * from \"@components/Scroll\"\nexport * from \"@components/SectionRing\"\nexport * from \"@components/Skeleton\"\nexport * from \"@components/Title\"\nexport * from \"@components/TransitionBox\"\nexport * from \"@components/TransitionNum\"\nexport * from \"@components/Trapezium\"\nexport * from \"@utils/getReactVersion\"\nexport * from \"@utils/index\"\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA"}

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

@@ -1 +1 @@
-{"version":3,"names":["version","reg","getReactVersion","match","slice","map","Number"],"sources":["../../../src/utils/getReactVersion.ts"],"sourcesContent":["import { version } from \"react\"\r\n\r\nconst reg = /(\\d+)\\.(\\d+)\\.(\\d+)/\r\n\r\nexport function getReactVersion() {\r\n    return version.match(reg)!.slice(1).map(Number)\r\n}\r\n"],"mappings":"AAAA,SAASA,OAAO,QAAQ,OAAO;AAE/B,MAAMC,GAAG,GAAG,qBAAqB;AAEjC,OAAO,SAASC,eAAeA,CAAA,EAAG;EAC9B,OAAOF,OAAO,CAACG,KAAK,CAACF,GAAG,CAAC,CAAEG,KAAK,CAAC,CAAC,CAAC,CAACC,GAAG,CAACC,MAAM,CAAC;AACnD"}
+{"version":3,"names":["version","reg","getReactVersion","match","slice","map","Number"],"sources":["../../../src/utils/getReactVersion.ts"],"sourcesContent":["import { version } from \"react\"\n\nconst reg = /(\\d+)\\.(\\d+)\\.(\\d+)/\n\nexport function getReactVersion() {\n    return version.match(reg)!.slice(1).map(Number)\n}\n"],"mappings":"AAAA,SAASA,OAAO,QAAQ,OAAO;AAE/B,MAAMC,GAAG,GAAG,qBAAqB;AAEjC,OAAO,SAASC,eAAeA,CAAA,EAAG;EAC9B,OAAOF,OAAO,CAACG,KAAK,CAACF,GAAG,CAAC,CAAEG,KAAK,CAAC,CAAC,CAAC,CAACC,GAAG,CAACC,MAAM,CAAC;AACnD"}

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

@@ -1 +1 @@
-{"version":3,"names":["cssVariableReg","addCSSVariableLine","match","transformCSSVariableName","name","replace","toLowerCase","transformCSSVariable","style","style2","Object","assign","entries","reduce","acc","key","value","px"],"sources":["../../../src/utils/index.ts"],"sourcesContent":["import { CSSProperties } from \"react\"\r\n\r\nexport type CSSVariableName = `--${string}`\r\n\r\nexport type CSSVariableValue = string | number | undefined\r\n\r\nexport interface StyleWithCSSVariable extends CSSProperties {\r\n    [X: CSSVariableName]: CSSVariableValue\r\n}\r\n\r\nconst cssVariableReg = /[A-Z]/\r\n\r\nfunction addCSSVariableLine(match: string): string {\r\n    return `-${match}`\r\n}\r\n\r\nexport function transformCSSVariableName(name: string): CSSVariableName {\r\n    return `--${name.replace(cssVariableReg, addCSSVariableLine).toLowerCase()}`\r\n}\r\n\r\nexport function transformCSSVariable(style: Partial<Record<string, CSSVariableValue>>, style2?: CSSProperties): CSSProperties {\r\n    return Object.assign(\r\n        Object.entries(style).reduce((acc: StyleWithCSSVariable, [key, value]) => {\r\n            acc[transformCSSVariableName(key)] = value\r\n            return acc\r\n        }, {}),\r\n        style2\r\n    )\r\n}\r\n\r\nexport function px(value: string | number | undefined): string | undefined {\r\n    return typeof value === \"number\" ? `${value}px` : value\r\n}\r\n"],"mappings":"AAUA,MAAMA,cAAc,GAAG,OAAO;AAE9B,SAASC,kBAAkBA,CAACC,KAAa,EAAU;EAC/C,OAAQ,IAAGA,KAAM,EAAC;AACtB;AAEA,OAAO,SAASC,wBAAwBA,CAACC,IAAY,EAAmB;EACpE,OAAQ,KAAIA,IAAI,CAACC,OAAO,CAACL,cAAc,EAAEC,kBAAkB,CAAC,CAACK,WAAW,CAAC,CAAE,EAAC;AAChF;AAEA,OAAO,SAASC,oBAAoBA,CAACC,KAAgD,EAAEC,MAAsB,EAAiB;EAC1H,OAAOC,MAAM,CAACC,MAAM,CAChBD,MAAM,CAACE,OAAO,CAACJ,KAAK,CAAC,CAACK,MAAM,CAAC,CAACC,GAAyB,EAAE,CAACC,GAAG,EAAEC,KAAK,CAAC,KAAK;IACtEF,GAAG,CAACX,wBAAwB,CAACY,GAAG,CAAC,CAAC,GAAGC,KAAK;IAC1C,OAAOF,GAAG;EACd,CAAC,EAAE,CAAC,CAAC,CAAC,EACNL,MACJ,CAAC;AACL;AAEA,OAAO,SAASQ,EAAEA,CAACD,KAAkC,EAAsB;EACvE,OAAO,OAAOA,KAAK,KAAK,QAAQ,GAAI,GAAEA,KAAM,IAAG,GAAGA,KAAK;AAC3D"}
+{"version":3,"names":["cssVariableReg","addCSSVariableLine","match","transformCSSVariableName","name","replace","toLowerCase","transformCSSVariable","style","style2","Object","assign","entries","reduce","acc","key","value","px"],"sources":["../../../src/utils/index.ts"],"sourcesContent":["import { CSSProperties } from \"react\"\n\nexport type CSSVariableName = `--${string}`\n\nexport type CSSVariableValue = string | number | undefined\n\nexport interface StyleWithCSSVariable extends CSSProperties {\n    [X: CSSVariableName]: CSSVariableValue\n}\n\nconst cssVariableReg = /[A-Z]/\n\nfunction addCSSVariableLine(match: string): string {\n    return `-${match}`\n}\n\nexport function transformCSSVariableName(name: string): CSSVariableName {\n    return `--${name.replace(cssVariableReg, addCSSVariableLine).toLowerCase()}`\n}\n\nexport function transformCSSVariable(style: Partial<Record<string, CSSVariableValue>>, style2?: CSSProperties): CSSProperties {\n    return Object.assign(\n        Object.entries(style).reduce((acc: StyleWithCSSVariable, [key, value]) => {\n            acc[transformCSSVariableName(key)] = value\n            return acc\n        }, {}),\n        style2,\n    )\n}\n\nexport function px(value: string | number | undefined): string | undefined {\n    return typeof value === \"number\" ? `${value}px` : value\n}\n"],"mappings":"AAUA,MAAMA,cAAc,GAAG,OAAO;AAE9B,SAASC,kBAAkBA,CAACC,KAAa,EAAU;EAC/C,OAAQ,IAAGA,KAAM,EAAC;AACtB;AAEA,OAAO,SAASC,wBAAwBA,CAACC,IAAY,EAAmB;EACpE,OAAQ,KAAIA,IAAI,CAACC,OAAO,CAACL,cAAc,EAAEC,kBAAkB,CAAC,CAACK,WAAW,CAAC,CAAE,EAAC;AAChF;AAEA,OAAO,SAASC,oBAAoBA,CAACC,KAAgD,EAAEC,MAAsB,EAAiB;EAC1H,OAAOC,MAAM,CAACC,MAAM,CAChBD,MAAM,CAACE,OAAO,CAACJ,KAAK,CAAC,CAACK,MAAM,CAAC,CAACC,GAAyB,EAAE,CAACC,GAAG,EAAEC,KAAK,CAAC,KAAK;IACtEF,GAAG,CAACX,wBAAwB,CAACY,GAAG,CAAC,CAAC,GAAGC,KAAK;IAC1C,OAAOF,GAAG;EACd,CAAC,EAAE,CAAC,CAAC,CAAC,EACNL,MACJ,CAAC;AACL;AAEA,OAAO,SAASQ,EAAEA,CAACD,KAAkC,EAAsB;EACvE,OAAO,OAAOA,KAAK,KAAK,QAAQ,GAAI,GAAEA,KAAM,IAAG,GAAGA,KAAK;AAC3D"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "deepsea-components",
-  "version": "5.6.0",
+  "version": "5.7.1",
   "description": "格数科技自用组件库",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -27,11 +27,12 @@
   "dependencies": {
     "@emotion/css": "^11.11.2",
     "ahooks": "^3.7.11",
+    "clipboard": "^2.0.11",
     "echarts": "^5.5.0",
     "hls.js": "^1.5.8",
     "smooth-scrollbar": "^8.8.4",
     "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.2/xlsx-0.20.2.tgz",
-    "deepsea-tools": "5.11.0"
+    "deepsea-tools": "5.12.0"
   },
   "peerDependencies": {
     "@types/react": "^18.3.1",
@@ -42,6 +43,7 @@
   "scripts": {
     "dev": "father dev",
     "build": "father build",
+    "prebuild": "tsx scripts/export.ts",
     "build:deps": "father prebundle"
   }
 }

package/src/components/AutoFit.tsx

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