deepsea-components 2.8.5 → 3.0.0

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

@@ -0,0 +1,25 @@
+import { HTMLAttributes } from "react";
+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 declare const AutoFit: import("react").ForwardRefExoticComponent<AutoFitProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/cjs/components/AutoFit.js

@@ -0,0 +1,99 @@
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/AutoFit.tsx
+var AutoFit_exports = {};
+__export(AutoFit_exports, {
+  AutoFit: () => AutoFit
+});
+module.exports = __toCommonJS(AutoFit_exports);
+var import_css = require("@emotion/css");
+var import_deepsea_tools = require("deepsea-tools");
+var import_react = require("react");
+var AutoFit = (0, import_react.forwardRef)((props, ref) => {
+  const { width = 1920, height = 1080, direction, className, ...rest } = props;
+  const ele = (0, import_react.useRef)(null);
+  const [show, setShow] = (0, import_react.useState)(false);
+  (0, import_react.useImperativeHandle)(ref, () => ele.current, [ele.current]);
+  (0, import_react.useLayoutEffect)(() => {
+    const element = ele.current;
+    const parent = element?.parentElement;
+    if (!element || !parent)
+      return;
+    function listener(entries) {
+      const entry = entries[0];
+      const { contentRect } = entry;
+      if (direction === "horizontal") {
+        const scale = contentRect.width / width;
+        element?.style.setProperty("--transform", `scale(${scale})`);
+        element?.style.setProperty("--width", `${width}px`);
+        element?.style.setProperty("--height", `${contentRect.height / scale}px`);
+      } else if (direction === "vertical") {
+        const scale = contentRect.height / height;
+        element?.style.setProperty("--transform", `scale(${scale})`);
+        element?.style.setProperty("--width", `${contentRect.width / scale}px`);
+        element?.style.setProperty("--height", `${height}px`);
+      } else {
+        const scale = Math.min(contentRect.width / width, contentRect.height / height);
+        element?.style.setProperty("--transform", `translateX(${(contentRect.width - width * scale) / 2}px) translateY(${(contentRect.height - height * scale) / 2}px) scale(${scale})`);
+        element?.style.setProperty("--width", `${width}px`);
+        element?.style.setProperty("--height", `${height}px`);
+      }
+      setShow(true);
+    }
+    const observer = new ResizeObserver(listener);
+    observer.observe(parent);
+    return () => observer.disconnect();
+  }, [ele.current?.parentElement, width, height, direction]);
+  if (process.env.NODE_ENV === "development") {
+    (0, import_react.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 /* @__PURE__ */ React.createElement("div", { ref: ele, style: { display: "none" } });
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      ref: ele,
+      className: (0, import_deepsea_tools.clsx)(
+        import_css.css`
+                    position: absolute;
+                    transform: var(--transform);
+                    transform-origin: top left;
+                    width: var(--width);
+                    height: var(--height);
+                `,
+        className
+      ),
+      ...rest
+    }
+  );
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AutoFit
+});
+//# sourceMappingURL=AutoFit.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/AutoFit.tsx"],
+  "sourcesContent": ["\"use client\"\r\n\r\nimport { css } from \"@emotion/css\"\r\nimport { clsx } from \"deepsea-tools\"\r\nimport { forwardRef, HTMLAttributes, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState } from \"react\"\r\n\r\nexport interface AutoFitProps extends HTMLAttributes<HTMLDivElement> {\r\n    /** 设计稿宽度，默认 1920 */\r\n    width?: number\r\n    /** 设计稿高度，默认 1080 */\r\n    height?: number\r\n    /**\r\n     * 在哪些方向进行缩放，默认缩放所有方向\r\n     * 1. 水平方向是指，宽度按照设计稿进行占满，高度反向缩放\r\n     * 2. 垂直方向是指，高度按照设计稿进行占满，宽度反向缩放\r\n     * 3. 默认是水平和垂直方向都进行缩放，类似于 background-size: contain 的效果\r\n     */\r\n    direction?: \"horizontal\" | \"vertical\" | \"both\"\r\n}\r\n\r\n/**\r\n * 自适应缩放组件\r\n *\r\n * 注意：\r\n * 1. 父元素必须设置非 static 定位方式\r\n * 2. 父元素只能有且仅有一个子元素，那就是 AutoFit\r\n * 3. 不要设置 AutoFit 的 position、left、top、transform、width、height 属性\r\n * 4. 在第一次完成缩放前，无论 props 是什么，返回的都是 <div style={{ display: \"none\" }} />\r\n * 5. 元素的属性、事件、资源并不是立即加载的，会有一帧的延迟，在第一次完成缩放后才会显示\r\n */\r\nexport const AutoFit = forwardRef<HTMLDivElement, AutoFitProps>((props, ref) => {\r\n    const { width = 1920, height = 1080, direction, className, ...rest } = props\r\n    const ele = useRef<HTMLDivElement>(null)\r\n    const [show, setShow] = useState(false)\r\n    useImperativeHandle(ref, () => ele.current!, [ele.current])\r\n    useLayoutEffect(() => {\r\n        const element = ele.current\r\n        const parent = element?.parentElement\r\n        if (!element || !parent) return\r\n        function listener(entries: ResizeObserverEntry[]) {\r\n            const entry = entries[0]\r\n            const { contentRect } = entry\r\n            if (direction === \"horizontal\") {\r\n                const scale = contentRect.width / width\r\n                element?.style.setProperty(\"--transform\", `scale(${scale})`)\r\n                element?.style.setProperty(\"--width\", `${width}px`)\r\n                element?.style.setProperty(\"--height\", `${contentRect.height / scale}px`)\r\n            } else if (direction === \"vertical\") {\r\n                const scale = contentRect.height / height\r\n                element?.style.setProperty(\"--transform\", `scale(${scale})`)\r\n                element?.style.setProperty(\"--width\", `${contentRect.width / scale}px`)\r\n                element?.style.setProperty(\"--height\", `${height}px`)\r\n            } else {\r\n                const scale = Math.min(contentRect.width / width, contentRect.height / height)\r\n                element?.style.setProperty(\"--transform\", `translateX(${(contentRect.width - width * scale) / 2}px) translateY(${(contentRect.height - height * scale) / 2}px) scale(${scale})`)\r\n                element?.style.setProperty(\"--width\", `${width}px`)\r\n                element?.style.setProperty(\"--height\", `${height}px`)\r\n            }\r\n            setShow(true)\r\n        }\r\n        const observer = new ResizeObserver(listener)\r\n        observer.observe(parent)\r\n        return () => observer.disconnect()\r\n    }, [ele.current?.parentElement, width, height, direction])\r\n\r\n    if (process.env.NODE_ENV === \"development\") {\r\n        useEffect(() => {\r\n            const parent = ele.current?.parentElement\r\n            if (!parent) return\r\n            const style = getComputedStyle(parent)\r\n            if (style.position === \"static\") {\r\n                console.warn(\"AutoFit 组件的父元素的 position 属性不应该是 static\")\r\n            }\r\n        }, [ele.current?.parentElement])\r\n    }\r\n\r\n    if (!show) return <div ref={ele} style={{ display: \"none\" }} />\r\n\r\n    return (\r\n        <div\r\n            ref={ele}\r\n            className={clsx(\r\n                css`\r\n                    position: absolute;\r\n                    transform: var(--transform);\r\n                    transform-origin: top left;\r\n                    width: var(--width);\r\n                    height: var(--height);\r\n                `,\r\n                className\r\n            )}\r\n            {...rest}\r\n        />\r\n    )\r\n})\r\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,iBAAoB;AACpB,2BAAqB;AACrB,mBAA8G;AA0BvG,IAAM,cAAU,yBAAyC,CAAC,OAAO,QAAQ;AAC5E,QAAM,EAAE,QAAQ,MAAM,SAAS,MAAM,WAAW,WAAW,GAAG,KAAK,IAAI;AACvE,QAAM,UAAM,qBAAuB,IAAI;AACvC,QAAM,CAAC,MAAM,OAAO,QAAI,uBAAS,KAAK;AACtC,wCAAoB,KAAK,MAAM,IAAI,SAAU,CAAC,IAAI,OAAO,CAAC;AAC1D,oCAAgB,MAAM;AAClB,UAAM,UAAU,IAAI;AACpB,UAAM,SAAS,SAAS;AACxB,QAAI,CAAC,WAAW,CAAC;AAAQ;AACzB,aAAS,SAAS,SAAgC;AAC9C,YAAM,QAAQ,QAAQ,CAAC;AACvB,YAAM,EAAE,YAAY,IAAI;AACxB,UAAI,cAAc,cAAc;AAC5B,cAAM,QAAQ,YAAY,QAAQ;AAClC,iBAAS,MAAM,YAAY,eAAe,SAAS,QAAQ;AAC3D,iBAAS,MAAM,YAAY,WAAW,GAAG,SAAS;AAClD,iBAAS,MAAM,YAAY,YAAY,GAAG,YAAY,SAAS,SAAS;AAAA,MAC5E,WAAW,cAAc,YAAY;AACjC,cAAM,QAAQ,YAAY,SAAS;AACnC,iBAAS,MAAM,YAAY,eAAe,SAAS,QAAQ;AAC3D,iBAAS,MAAM,YAAY,WAAW,GAAG,YAAY,QAAQ,SAAS;AACtE,iBAAS,MAAM,YAAY,YAAY,GAAG,UAAU;AAAA,MACxD,OAAO;AACH,cAAM,QAAQ,KAAK,IAAI,YAAY,QAAQ,OAAO,YAAY,SAAS,MAAM;AAC7E,iBAAS,MAAM,YAAY,eAAe,eAAe,YAAY,QAAQ,QAAQ,SAAS,oBAAoB,YAAY,SAAS,SAAS,SAAS,cAAc,QAAQ;AAC/K,iBAAS,MAAM,YAAY,WAAW,GAAG,SAAS;AAClD,iBAAS,MAAM,YAAY,YAAY,GAAG,UAAU;AAAA,MACxD;AACA,cAAQ,IAAI;AAAA,IAChB;AACA,UAAM,WAAW,IAAI,eAAe,QAAQ;AAC5C,aAAS,QAAQ,MAAM;AACvB,WAAO,MAAM,SAAS,WAAW;AAAA,EACrC,GAAG,CAAC,IAAI,SAAS,eAAe,OAAO,QAAQ,SAAS,CAAC;AAEzD,MAAI,QAAQ,IAAI,aAAa,eAAe;AACxC,gCAAU,MAAM;AACZ,YAAM,SAAS,IAAI,SAAS;AAC5B,UAAI,CAAC;AAAQ;AACb,YAAM,QAAQ,iBAAiB,MAAM;AACrC,UAAI,MAAM,aAAa,UAAU;AAC7B,gBAAQ,KAAK,wCAAwC;AAAA,MACzD;AAAA,IACJ,GAAG,CAAC,IAAI,SAAS,aAAa,CAAC;AAAA,EACnC;AAEA,MAAI,CAAC;AAAM,WAAO,oCAAC,SAAI,KAAK,KAAK,OAAO,EAAE,SAAS,OAAO,GAAG;AAE7D,SACI;AAAA,IAAC;AAAA;AAAA,MACG,KAAK;AAAA,MACL,eAAW;AAAA,QACP;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAOA;AAAA,MACJ;AAAA,MACC,GAAG;AAAA;AAAA,EACR;AAER,CAAC;",
+  "names": []
+}

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

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

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

@@ -0,0 +1,5 @@
+import { TextareaHTMLAttributes } from "react";
+/**
+ * 自适应高度的文本域
+ */
+export declare const AutoSizeTextArea: import("react").ForwardRefExoticComponent<TextareaHTMLAttributes<HTMLTextAreaElement> & import("react").RefAttributes<HTMLTextAreaElement>>;

package/dist/cjs/components/AutoSizeTextarea.js

@@ -0,0 +1,51 @@
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/AutoSizeTextarea.tsx
+var AutoSizeTextarea_exports = {};
+__export(AutoSizeTextarea_exports, {
+  AutoSizeTextArea: () => AutoSizeTextArea
+});
+module.exports = __toCommonJS(AutoSizeTextarea_exports);
+var import_react = require("react");
+var AutoSizeTextArea = (0, import_react.forwardRef)((props, ref) => {
+  const { style = {}, ...rest } = props;
+  const { height, resize, overflowY, ...restStyle } = style;
+  const ele = (0, import_react.useRef)(null);
+  (0, import_react.useImperativeHandle)(ref, () => ele.current, []);
+  (0, import_react.useEffect)(() => {
+    const textarea = ele.current;
+    function resizeTextarea() {
+      textarea.style.height = "auto";
+      textarea.style.height = `${textarea.scrollHeight + textarea.offsetHeight - textarea.clientHeight}px`;
+    }
+    textarea.addEventListener("input", resizeTextarea);
+    textarea.addEventListener("change", resizeTextarea);
+    return () => {
+      textarea.removeEventListener("input", resizeTextarea);
+      textarea.removeEventListener("change", resizeTextarea);
+    };
+  }, []);
+  return /* @__PURE__ */ React.createElement("textarea", { ref: ele, style: { ...restStyle, resize: "none", overflowY: "hidden" }, ...rest });
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AutoSizeTextArea
+});
+//# sourceMappingURL=AutoSizeTextarea.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/AutoSizeTextarea.tsx"],
+  "sourcesContent": ["\"use client\"\r\n\r\nimport { forwardRef, TextareaHTMLAttributes, useEffect, useImperativeHandle, useRef } from \"react\"\r\n\r\n/**\r\n * 自适应高度的文本域\r\n */\r\nexport const AutoSizeTextArea = forwardRef<HTMLTextAreaElement, TextareaHTMLAttributes<HTMLTextAreaElement>>((props, ref) => {\r\n    const { style = {}, ...rest } = props\r\n    const { height, resize, overflowY, ...restStyle } = style\r\n    const ele = useRef<HTMLTextAreaElement>(null)\r\n\r\n    useImperativeHandle(ref, () => ele.current!, [])\r\n\r\n    useEffect(() => {\r\n        const textarea = ele.current!\r\n        function resizeTextarea() {\r\n            textarea.style.height = \"auto\"\r\n            textarea.style.height = `${textarea.scrollHeight + textarea.offsetHeight - textarea.clientHeight}px`\r\n        }\r\n        textarea.addEventListener(\"input\", resizeTextarea)\r\n        textarea.addEventListener(\"change\", resizeTextarea)\r\n\r\n        return () => {\r\n            textarea.removeEventListener(\"input\", resizeTextarea)\r\n            textarea.removeEventListener(\"change\", resizeTextarea)\r\n        }\r\n    }, [])\r\n\r\n    return <textarea ref={ele} style={{ ...restStyle, resize: \"none\", overflowY: \"hidden\" }} {...rest} />\r\n})\r\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,mBAA2F;AAKpF,IAAM,uBAAmB,yBAA6E,CAAC,OAAO,QAAQ;AACzH,QAAM,EAAE,QAAQ,CAAC,GAAG,GAAG,KAAK,IAAI;AAChC,QAAM,EAAE,QAAQ,QAAQ,WAAW,GAAG,UAAU,IAAI;AACpD,QAAM,UAAM,qBAA4B,IAAI;AAE5C,wCAAoB,KAAK,MAAM,IAAI,SAAU,CAAC,CAAC;AAE/C,8BAAU,MAAM;AACZ,UAAM,WAAW,IAAI;AACrB,aAAS,iBAAiB;AACtB,eAAS,MAAM,SAAS;AACxB,eAAS,MAAM,SAAS,GAAG,SAAS,eAAe,SAAS,eAAe,SAAS;AAAA,IACxF;AACA,aAAS,iBAAiB,SAAS,cAAc;AACjD,aAAS,iBAAiB,UAAU,cAAc;AAElD,WAAO,MAAM;AACT,eAAS,oBAAoB,SAAS,cAAc;AACpD,eAAS,oBAAoB,UAAU,cAAc;AAAA,IACzD;AAAA,EACJ,GAAG,CAAC,CAAC;AAEL,SAAO,oCAAC,cAAS,KAAK,KAAK,OAAO,EAAE,GAAG,WAAW,QAAQ,QAAQ,WAAW,SAAS,GAAI,GAAG,MAAM;AACvG,CAAC;",
+  "names": []
+}

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

@@ -0,0 +1,25 @@
+import { FC, HTMLAttributes } from "react";
+export interface CircleTextProps extends Omit<HTMLAttributes<HTMLSpanElement>, "children"> {
+    /** 每一个方块的宽度 */
+    width: number;
+    /** 每一个方块的高度 */
+    height: number;
+    /** 圆弧的半径，不包含方块的高度 */
+    radius: number;
+    /** 开始旋转的弧度，逆时针增加，0 为 x 轴方向 */
+    startAngel?: number;
+    /** 每一个方块之间间隔的弧度 */
+    gapAngel?: number;
+    /** 文字对齐的方式，默认居中 */
+    align?: "left" | "center" | "right";
+    /** 文字朝向圆心还是外侧，默认外侧 */
+    direction?: "inner" | "outer";
+    /** 是否反转文字顺序 */
+    reverse?: boolean;
+    /** 分割文字的方法 */
+    separator?: string | RegExp | ((text: string) => string[]);
+    /** 显示的文字 */
+    children: string;
+}
+/** 环形文字 */
+export declare const CircleText: FC<CircleTextProps>;

package/dist/cjs/components/CircleText.js

@@ -0,0 +1,48 @@
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/CircleText.tsx
+var CircleText_exports = {};
+__export(CircleText_exports, {
+  CircleText: () => CircleText
+});
+module.exports = __toCommonJS(CircleText_exports);
+var import_react = require("react");
+var CircleText = (props) => {
+  const { width, height, radius, startAngel = 0, gapAngel = 0, align = "center", style, direction = "outer", reverse = false, separator, children, ...rest } = props;
+  const unitAngle = Math.atan(width / 2 / radius) * 2;
+  const totalAngle = (unitAngle + gapAngel) * children.length - gapAngel;
+  const offsetAngle = align === "left" ? 0 : align === "right" ? totalAngle : totalAngle / 2;
+  function getTransform(idx) {
+    const angle = startAngel - idx * (unitAngle + gapAngel) + offsetAngle - unitAngle / 2;
+    const x = (radius + height / 2) * Math.cos(angle) - width / 2;
+    const y = (radius + height / 2) * Math.sin(angle) * -1 - height / 2;
+    const z = Math.PI / 2 - angle + (direction === "inner" ? Math.PI : 0);
+    return `translateX(${x}px) translateY(${y}px) rotateZ(${z / Math.PI * 180}deg)`;
+  }
+  const words = typeof separator === "function" ? separator(children) : children.split(separator ?? "");
+  if (reverse)
+    words.reverse();
+  return /* @__PURE__ */ React.createElement(import_react.Fragment, null, words.map((w, idx) => /* @__PURE__ */ React.createElement("span", { key: idx, style: { position: "absolute", ...style, transform: getTransform(idx), textAlign: "center", width, lineHeight: `${height}px`, height }, ...rest }, w)));
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CircleText
+});
+//# sourceMappingURL=CircleText.js.map

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

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

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

@@ -0,0 +1,57 @@
+import { CSSProperties, HTMLAttributes, ReactNode } from "react";
+export interface FlowSizeData {
+    /** 容器宽度 */
+    width: number;
+    /** 容器高度 */
+    height: number;
+    /** 元素宽度 */
+    itemWidth: number;
+    /** 元素高度 */
+    itemHeight: number;
+    /** 列间距 */
+    columnGap: number;
+    /** 列数 */
+    columnCount: number;
+    /** 行间距 */
+    rowGap: number;
+    /** 行数 */
+    rowCount: number;
+    /** 元素格数 */
+    itemCount: number;
+    /** 最大行数 */
+    maxRows: number | null;
+    /** 是否有元素被隐藏 */
+    overflow: boolean;
+}
+export interface FlowProps<T> extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    /** 元素宽度 */
+    itemWidth: number;
+    /** 元素高度 */
+    itemHeight: number;
+    /** 列间距 */
+    columnGap?: number | null | (number | null)[];
+    /** 行间距 */
+    rowGap?: number;
+    /** 最大行数 */
+    maxRows?: number | null;
+    /** 源数据 */
+    data: T[];
+    /** 渲染 */
+    render: (item: T, index: number, hidden: boolean) => ReactNode;
+    /** key释放器，默认为 index */
+    keyExactor?: (item: T, index: number) => string | number;
+    /** 容器类名 */
+    containerClassName?: string;
+    /** 容器样式 */
+    containerStyle?: CSSProperties;
+    /** 节流时间，单位毫秒，默认200ms，传入 null 不节流 */
+    throttle?: number | null;
+    /** 动画时间，单位毫秒，默认400ms，传入 null 不展示动画 */
+    transitionDuration?: number | null;
+    /** 变化的回调函数 */
+    onSizeChange?: (sizeData: FlowSizeData) => void;
+}
+export declare function getGapRange(gap?: undefined | number | null | (number | null)[]): [number, number | null];
+export declare function getGapCountAndSize(width: number, itemWidth: number, minGap: number, maxGap: number | null): [number, number];
+/** 自适应浮动组件 */
+export declare function Flow<T>(props: FlowProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/Flow.js

@@ -0,0 +1,119 @@
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/Flow.tsx
+var Flow_exports = {};
+__export(Flow_exports, {
+  Flow: () => Flow,
+  getGapCountAndSize: () => getGapCountAndSize,
+  getGapRange: () => getGapRange
+});
+module.exports = __toCommonJS(Flow_exports);
+var import_react = require("react");
+function getGapRange(gap) {
+  if (typeof gap === "number")
+    return [gap, gap];
+  if (Array.isArray(gap))
+    return [gap[0] || 0, gap[1]];
+  return [0, null];
+}
+function getGapCountAndSize(width, itemWidth, minGap, maxGap) {
+  const count = Math.floor((width + minGap) / (itemWidth + minGap)) || 1;
+  if (count === 1)
+    return [count, 0];
+  const averageGap = (width - itemWidth * count) / (count - 1);
+  if (averageGap < minGap)
+    return [count, minGap];
+  if (maxGap !== null && averageGap > maxGap)
+    return [count, maxGap];
+  return [count, averageGap];
+}
+function Flow(props) {
+  const { itemWidth, itemHeight, columnGap, rowGap = 0, maxRows, data, render, keyExactor, className, style, containerClassName, containerStyle, throttle, transitionDuration, onSizeChange, ...rest } = props;
+  const [minColumnGap, maxColumnGap] = getGapRange(columnGap);
+  const [width, setWidth] = (0, import_react.useState)(0);
+  const [columnCount, setColumnCount] = (0, import_react.useState)(1);
+  const [columnGapSize, setColumnGapSize] = (0, import_react.useState)(minColumnGap);
+  const [showItems, setShowItems] = (0, import_react.useState)(false);
+  const ele = (0, import_react.useRef)(null);
+  const contentRows = Math.ceil(data.length / columnCount);
+  const contentShownRows = typeof maxRows === "number" ? Math.min(contentRows, maxRows) : contentRows;
+  const height = contentShownRows > 0 ? contentShownRows * (itemHeight + rowGap) - rowGap : 0;
+  function getPosition(index) {
+    const y = Math.floor(index / columnCount);
+    const x = index - y * columnCount;
+    return {
+      left: x * (itemWidth + columnGapSize),
+      top: y * (itemHeight + rowGap)
+    };
+  }
+  function getHidden(index) {
+    if (typeof maxRows !== "number")
+      return false;
+    return index >= maxRows * columnCount;
+  }
+  (0, import_react.useEffect)(() => {
+    let timeout;
+    const observer = new ResizeObserver((entries) => {
+      clearTimeout(timeout);
+      function task() {
+        const { width: width2 } = entries[0].contentRect;
+        const [newColumnCount, newColumnGapSize] = getGapCountAndSize(width2, itemWidth, minColumnGap, maxColumnGap);
+        setShowItems(true);
+        setWidth(width2);
+        setColumnCount(newColumnCount);
+        setColumnGapSize(newColumnGapSize);
+      }
+      if (throttle === null) {
+        task();
+      } else {
+        timeout = window.setTimeout(task, throttle || 200);
+      }
+    });
+    observer.observe(ele.current);
+    return () => {
+      observer.disconnect();
+    };
+  }, [itemWidth, throttle, columnGap]);
+  (0, import_react.useEffect)(() => {
+    onSizeChange?.({ width, height, itemWidth, itemHeight, columnGap: columnGapSize, columnCount, rowGap, rowCount: contentShownRows, overflow: data.length > contentShownRows * columnCount, itemCount: data.length, maxRows: maxRows ?? null });
+  }, [width, height, columnGapSize, columnCount, rowGap, contentShownRows, data.length, itemWidth, itemHeight, maxRows]);
+  return /* @__PURE__ */ React.createElement("div", { ref: ele, className, style: { position: "relative", boxSizing: "border-box", height, ...style }, ...rest }, showItems && data.map((item, index) => /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      key: keyExactor ? keyExactor(item, index) : index,
+      className: containerClassName,
+      style: {
+        position: "absolute",
+        width: itemWidth,
+        height: itemHeight,
+        transition: transitionDuration !== null ? `all ${transitionDuration ?? 400}ms` : void 0,
+        ...getPosition(index)
+      }
+    },
+    /* @__PURE__ */ React.createElement("div", { style: { width: itemWidth, height: itemHeight, display: maxRows && index >= maxRows * columnCount ? "none" : "block", ...containerStyle } }, render(item, index, getHidden(index)))
+  )));
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Flow,
+  getGapCountAndSize,
+  getGapRange
+});
+//# sourceMappingURL=Flow.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/Flow.tsx"],
+  "sourcesContent": ["\"use client\"\r\n\r\nimport { CSSProperties, HTMLAttributes, ReactNode, useEffect, useRef, useState } from \"react\"\r\n\r\nexport interface FlowSizeData {\r\n    /** 容器宽度 */\r\n    width: number\r\n    /** 容器高度 */\r\n    height: number\r\n    /** 元素宽度 */\r\n    itemWidth: number\r\n    /** 元素高度 */\r\n    itemHeight: number\r\n    /** 列间距 */\r\n    columnGap: number\r\n    /** 列数 */\r\n    columnCount: number\r\n    /** 行间距 */\r\n    rowGap: number\r\n    /** 行数 */\r\n    rowCount: number\r\n    /** 元素格数 */\r\n    itemCount: number\r\n    /** 最大行数 */\r\n    maxRows: number | null\r\n    /** 是否有元素被隐藏 */\r\n    overflow: boolean\r\n}\r\n\r\nexport interface FlowProps<T> extends Omit<HTMLAttributes<HTMLDivElement>, \"children\"> {\r\n    /** 元素宽度 */\r\n    itemWidth: number\r\n    /** 元素高度 */\r\n    itemHeight: number\r\n    /** 列间距 */\r\n    columnGap?: number | null | (number | null)[]\r\n    /** 行间距 */\r\n    rowGap?: number\r\n    /** 最大行数 */\r\n    maxRows?: number | null\r\n    /** 源数据 */\r\n    data: T[]\r\n    /** 渲染 */\r\n    render: (item: T, index: number, hidden: boolean) => ReactNode\r\n    /** key释放器，默认为 index */\r\n    keyExactor?: (item: T, index: number) => string | number\r\n    /** 容器类名 */\r\n    containerClassName?: string\r\n    /** 容器样式 */\r\n    containerStyle?: CSSProperties\r\n    /** 节流时间，单位毫秒，默认200ms，传入 null 不节流 */\r\n    throttle?: number | null\r\n    /** 动画时间，单位毫秒，默认400ms，传入 null 不展示动画 */\r\n    transitionDuration?: number | null\r\n    /** 变化的回调函数 */\r\n    onSizeChange?: (sizeData: FlowSizeData) => void\r\n}\r\n\r\nexport function getGapRange(gap?: undefined | number | null | (number | null)[]): [number, number | null] {\r\n    if (typeof gap === \"number\") return [gap, gap]\r\n    if (Array.isArray(gap)) return [gap[0] || 0, gap[1]]\r\n    return [0, null]\r\n}\r\n\r\nexport function getGapCountAndSize(width: number, itemWidth: number, minGap: number, maxGap: number | null): [number, number] {\r\n    const count = Math.floor((width + minGap) / (itemWidth + minGap)) || 1\r\n    if (count === 1) return [count, 0]\r\n    const averageGap = (width - itemWidth * count) / (count - 1)\r\n    if (averageGap < minGap) return [count, minGap]\r\n    if (maxGap !== null && averageGap > maxGap) return [count, maxGap]\r\n    return [count, averageGap]\r\n}\r\n\r\ninterface Position {\r\n    left: number\r\n    top: number\r\n}\r\n\r\n/** 自适应浮动组件 */\r\nexport function Flow<T>(props: FlowProps<T>) {\r\n    const { itemWidth, itemHeight, columnGap, rowGap = 0, maxRows, data, render, keyExactor, className, style, containerClassName, containerStyle, throttle, transitionDuration, onSizeChange, ...rest } = props\r\n    const [minColumnGap, maxColumnGap] = getGapRange(columnGap)\r\n    const [width, setWidth] = useState(0)\r\n    const [columnCount, setColumnCount] = useState(1)\r\n    const [columnGapSize, setColumnGapSize] = useState(minColumnGap)\r\n    const [showItems, setShowItems] = useState(false)\r\n    const ele = useRef<HTMLDivElement>(null)\r\n    const contentRows = Math.ceil(data.length / columnCount)\r\n    const contentShownRows = typeof maxRows === \"number\" ? Math.min(contentRows, maxRows) : contentRows\r\n    const height = contentShownRows > 0 ? contentShownRows * (itemHeight + rowGap) - rowGap : 0\r\n\r\n    function getPosition(index: number): Position {\r\n        const y = Math.floor(index / columnCount)\r\n        const x = index - y * columnCount\r\n        return {\r\n            left: x * (itemWidth + columnGapSize),\r\n            top: y * (itemHeight + rowGap)\r\n        }\r\n    }\r\n\r\n    function getHidden(index: number) {\r\n        if (typeof maxRows !== \"number\") return false\r\n        return index >= maxRows * columnCount\r\n    }\r\n\r\n    useEffect(() => {\r\n        let timeout: number\r\n        const observer = new ResizeObserver(entries => {\r\n            clearTimeout(timeout)\r\n            function task() {\r\n                const { width } = entries[0].contentRect\r\n                const [newColumnCount, newColumnGapSize] = getGapCountAndSize(width, itemWidth, minColumnGap, maxColumnGap)\r\n                setShowItems(true)\r\n                setWidth(width)\r\n                setColumnCount(newColumnCount)\r\n                setColumnGapSize(newColumnGapSize)\r\n            }\r\n            if (throttle === null) {\r\n                task()\r\n            } else {\r\n                timeout = window.setTimeout(task, throttle || 200)\r\n            }\r\n        })\r\n        observer.observe(ele.current!)\r\n\r\n        return () => {\r\n            observer.disconnect()\r\n        }\r\n    }, [itemWidth, throttle, columnGap])\r\n\r\n    useEffect(() => {\r\n        onSizeChange?.({ width, height, itemWidth, itemHeight, columnGap: columnGapSize, columnCount, rowGap, rowCount: contentShownRows, overflow: data.length > contentShownRows * columnCount, itemCount: data.length, maxRows: maxRows ?? null })\r\n    }, [width, height, columnGapSize, columnCount, rowGap, contentShownRows, data.length, itemWidth, itemHeight, maxRows])\r\n\r\n    return (\r\n        <div ref={ele} className={className} style={{ position: \"relative\", boxSizing: \"border-box\", height, ...style }} {...rest}>\r\n            {showItems &&\r\n                data.map((item, index) => (\r\n                    <div\r\n                        key={keyExactor ? keyExactor(item, index) : index}\r\n                        className={containerClassName}\r\n                        style={{\r\n                            position: \"absolute\",\r\n                            width: itemWidth,\r\n                            height: itemHeight,\r\n                            transition: transitionDuration !== null ? `all ${transitionDuration ?? 400}ms` : undefined,\r\n                            ...getPosition(index)\r\n                        }}>\r\n                        <div style={{ width: itemWidth, height: itemHeight, display: maxRows && index >= maxRows * columnCount ? \"none\" : \"block\", ...containerStyle }}>{render(item, index, getHidden(index))}</div>\r\n                    </div>\r\n                ))}\r\n        </div>\r\n    )\r\n}\r\n"],
+  "mappings": "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",
+  "names": ["width"]
+}

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

@@ -0,0 +1,64 @@
+import { ButtonHTMLAttributes, InputHTMLAttributes } from "react";
+export interface InputFileDataTypes {
+    base64: string;
+    text: string;
+    arrayBuffer: ArrayBuffer;
+    binary: string;
+    file: File;
+}
+export type InputFileDataType = keyof InputFileDataTypes;
+export interface InputFileData<T> {
+    result: T;
+    file: File;
+}
+export type InputFileProps = ({
+    multiple?: false;
+    type: "base64" | "text" | "binary";
+    onChange?: (data: InputFileData<string>) => void;
+} | {
+    multiple?: false;
+    type: "arrayBuffer";
+    onChange?: (data: InputFileData<ArrayBuffer>) => void;
+} | {
+    multiple?: false;
+    type?: "file";
+    onChange?: (data: InputFileData<File>) => void;
+} | {
+    multiple: true;
+    type: "base64" | "text" | "binary";
+    onChange?: (data: InputFileData<string>[]) => void;
+} | {
+    multiple: true;
+    type: "arrayBuffer";
+    onChange?: (data: InputFileData<ArrayBuffer>[]) => void;
+} | {
+    multiple: true;
+    type?: "file";
+    onChange?: (data: InputFileData<File>[]) => void;
+}) & Omit<InputHTMLAttributes<HTMLInputElement>, "onChange" | "multiple" | "type"> & {
+    /** 是否在捕获文件后清除 input 上的文件，默认为 false，主要区别在于如果不清除，连续两次选择同样的文件不会触发 onChange 事件，如果用于 form 表单，请设置为 flase */
+    clearAfterChange?: boolean;
+};
+export declare function getFileData<T extends InputFileDataType>(file: File, type: T): Promise<InputFileDataTypes[T]>;
+/** 专用于读取文件的组件 */
+export declare const InputFile: import("react").ForwardRefExoticComponent<InputFileProps & import("react").RefAttributes<HTMLInputElement>>;
+export type InputFileButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+    input: InputFileProps;
+};
+/** 专用于读取文件的 button 组件 */
+export declare const InputFileButton: import("react").ForwardRefExoticComponent<ButtonHTMLAttributes<HTMLButtonElement> & {
+    input: InputFileProps;
+} & import("react").RefAttributes<HTMLButtonElement>>;
+export interface ImportExcelProps extends Omit<InputFileProps, "multiple" | "onChange" | "accept" | "type"> {
+    onChange?: (data: Record<string, string>[]) => void;
+}
+/** 专门用于读取 excel 的组件 */
+export declare const ImportExcel: import("react").ForwardRefExoticComponent<ImportExcelProps & import("react").RefAttributes<HTMLInputElement>>;
+/** 手动导出 excel */
+export declare function exportExcel(data: Record<string, string>[], name: string): void;
+export interface ExportExcelProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    data: Record<string, string>[];
+    fileName: string;
+}
+/** 导出 excel 的 button 组件 */
+export declare const ExportExcel: import("react").ForwardRefExoticComponent<ExportExcelProps & import("react").RefAttributes<HTMLButtonElement>>;