deepsea-components 1.3.2 → 2.0.0

package/dist/{index.d.ts → cjs/index.d.ts}

@@ -1,4 +1,4 @@
-import React, { ButtonHTMLAttributes, CSSProperties, FC, HTMLAttributes, InputHTMLAttributes, ReactNode } from "react";
+import { ButtonHTMLAttributes, CSSProperties, FC, HTMLAttributes, InputHTMLAttributes, ReactNode } from "react";
 import type { ScrollbarOptions } from "smooth-scrollbar/interfaces";
 export type Equal<X, Y> = (<T>() => T extends X ? 1 : 2) extends <T>() => T extends Y ? 1 : 2 ? true : false;
 export interface InputFileDataTypes {
@@ -40,12 +40,12 @@ export type InputFileProps = ({
 }) & Omit<InputHTMLAttributes<HTMLInputElement>, "onChange" | "multiple" | "type">;
 export declare function getFileData<T extends InputFileDataType>(file: File, type: T): Promise<InputFileDataTypes[T]>;
 /** 专用与读取文件的组件 */
-export declare const InputFile: React.ForwardRefExoticComponent<InputFileProps & React.RefAttributes<HTMLInputElement>>;
+export declare const InputFile: import("react").ForwardRefExoticComponent<InputFileProps & import("react").RefAttributes<HTMLInputElement>>;
 export interface ImportExcelProps extends Omit<InputFileProps, "multiple" | "onChange" | "accept" | "type"> {
     onChange?: (data: Record<string, string>[]) => void;
 }
 /** 专门用于读取 excel 的组件 */
-export declare const ImportExcel: React.ForwardRefExoticComponent<ImportExcelProps & React.RefAttributes<HTMLInputElement>>;
+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> {
@@ -53,7 +53,7 @@ export interface ExportExcelProps extends ButtonHTMLAttributes<HTMLButtonElement
     fileName: string;
 }
 /** 导出 excel 的 button 组件 */
-export declare const ExportExcel: React.ForwardRefExoticComponent<ExportExcelProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const ExportExcel: import("react").ForwardRefExoticComponent<ExportExcelProps & import("react").RefAttributes<HTMLButtonElement>>;
 export interface TransitionBoxProps extends HTMLAttributes<HTMLDivElement> {
     containerClassName?: string;
     containerStyle?: CSSProperties;
@@ -168,7 +168,7 @@ export interface FlowProps<T> extends Omit<HTMLAttributes<HTMLDivElement>, "chil
 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>): React.JSX.Element;
+export declare function Flow<T>(props: FlowProps<T>): import("react/jsx-runtime").JSX.Element;
 export interface TrapeziumProps extends HTMLAttributes<HTMLDivElement> {
     top: number;
     bottom: number;
@@ -176,7 +176,7 @@ export interface TrapeziumProps extends HTMLAttributes<HTMLDivElement> {
     borderRadius: number;
 }
 /** 梯形组件 */
-export declare const Trapezium: React.ForwardRefExoticComponent<TrapeziumProps & React.RefAttributes<HTMLDivElement>>;
+export declare const Trapezium: import("react").ForwardRefExoticComponent<TrapeziumProps & import("react").RefAttributes<HTMLDivElement>>;
 export interface LoopSwiperProps<T> {
     /** 源数据 */
     data: T[];
@@ -205,7 +205,7 @@ export interface LoopSwiperItem {
     offset: number;
 }
 /** 循环播放组件 */
-export declare function LoopSwiper<T>(props: LoopSwiperProps<T>): React.JSX.Element;
+export declare function LoopSwiper<T>(props: LoopSwiperProps<T>): import("react/jsx-runtime").JSX.Element;
 export interface SectionRingProps extends HTMLAttributes<HTMLDivElement> {
     outerRadius: number;
     innerRadius: number;
@@ -225,7 +225,7 @@ export interface TransitionNumIns {
     get(): number;
 }
 /** 渐变数字组件 */
-export declare const TransitionNum: React.ForwardRefExoticComponent<TransitionNumProps & React.RefAttributes<TransitionNumIns>>;
+export declare const TransitionNum: import("react").ForwardRefExoticComponent<TransitionNumProps & import("react").RefAttributes<TransitionNumIns>>;
 export interface CircleTextProps extends Omit<HTMLAttributes<HTMLSpanElement>, "children"> {
     /** 每一个方块的宽度 */
     width: number;
@@ -266,12 +266,4 @@ export interface ScrollProps extends HTMLAttributes<HTMLDivElement> {
  * 滚动条组件
  * @description 注意 children 不是直接渲染在组件上的，而是渲染在内部的容器上
  */
-export declare const Scroll: React.ForwardRefExoticComponent<ScrollProps & React.RefAttributes<HTMLDivElement>>;
-export declare const X: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
-export declare const Y: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
-export declare const Auto: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
-export declare const None: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
-export declare const XAuto: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
-export declare const YAuto: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
-export declare const XNone: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
-export declare const YNone: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export declare const Scroll: import("react").ForwardRefExoticComponent<ScrollProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/cjs/index.js

@@ -0,0 +1,462 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.tsx
+var src_exports = {};
+__export(src_exports, {
+  CircleText: () => CircleText,
+  ExportExcel: () => ExportExcel,
+  Flow: () => Flow,
+  ImportExcel: () => ImportExcel,
+  InputFile: () => InputFile,
+  LoopSwiper: () => LoopSwiper,
+  Ring: () => Ring,
+  Scroll: () => Scroll,
+  SeaRadar: () => SeaRadar,
+  SectionRing: () => SectionRing,
+  TransitionBox: () => TransitionBox,
+  TransitionNum: () => TransitionNum,
+  Trapezium: () => Trapezium,
+  exportExcel: () => exportExcel,
+  getFileData: () => getFileData,
+  getGapCountAndSize: () => getGapCountAndSize,
+  getGapRange: () => getGapRange
+});
+module.exports = __toCommonJS(src_exports);
+var import_css = require("@emotion/css");
+var import_clsx = __toESM(require("clsx"));
+var import_deepsea_tools = require("deepsea-tools");
+var import_react = require("react");
+var import_smooth_scrollbar = __toESM(require("smooth-scrollbar"));
+var import_xlsx = require("xlsx");
+async function getFileData(file, type) {
+  const fileReader = new FileReader();
+  switch (type) {
+    case "arrayBuffer":
+      fileReader.readAsArrayBuffer(file);
+      break;
+    case "binary":
+      fileReader.readAsBinaryString(file);
+      break;
+    case "base64":
+      fileReader.readAsDataURL(file);
+      break;
+    case "text":
+      fileReader.readAsText(file);
+      break;
+    default:
+      return file;
+  }
+  return new Promise((resolve) => {
+    fileReader.addEventListener("load", () => {
+      resolve(fileReader.result);
+    });
+  });
+}
+var InputFile = (0, import_react.forwardRef)((props, ref) => {
+  const { multiple = false, type = "file", onChange, disabled: inputDisabled, ...others } = props;
+  const [disabled, setDisabled] = (0, import_react.useState)(false);
+  async function onInputChange(e) {
+    const input = e.target;
+    const { files } = input;
+    if (!files || files.length === 0)
+      return;
+    setDisabled(true);
+    try {
+      if (multiple) {
+        const result = [];
+        for (const file of Array.from(files)) {
+          result.push({
+            result: await getFileData(file, type),
+            file
+          });
+        }
+        onChange == null ? void 0 : onChange(result);
+      } else {
+        onChange == null ? void 0 : onChange({
+          result: await getFileData(files[0], type),
+          file: files[0]
+        });
+      }
+      setDisabled(false);
+      input.value = "";
+    } catch (error) {
+      setDisabled(false);
+      input.value = "";
+      throw error;
+    }
+  }
+  return /* @__PURE__ */ React.createElement("input", { disabled: disabled && inputDisabled, ref, type: "file", multiple, onChange: onInputChange, ...others });
+});
+var ImportExcel = (0, import_react.forwardRef)((props, ref) => {
+  const { onChange, ...others } = props;
+  function onInputChange(data) {
+    const wb = (0, import_xlsx.read)(data.result);
+    const result = import_xlsx.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
+    if (typeof result === "object") {
+      const $ = result.map((it) => {
+        const _ = {};
+        Object.keys(it).filter((key) => key !== "__rowNum__").forEach((key) => _[key] = String(it[key]));
+        return _;
+      });
+      onChange == null ? void 0 : onChange($);
+    }
+  }
+  return /* @__PURE__ */ React.createElement(InputFile, { ref, accept: ".xlsx", type: "arrayBuffer", onChange: onInputChange, ...others });
+});
+function exportExcel(data, name) {
+  const workSheet = import_xlsx.utils.json_to_sheet(data);
+  const workBook = import_xlsx.utils.book_new();
+  import_xlsx.utils.book_append_sheet(workBook, workSheet);
+  (0, import_xlsx.writeFile)(workBook, `${name}${name.endsWith(".xlsx") ? "" : ".xlsx"}`);
+}
+var ExportExcel = (0, import_react.forwardRef)((props, ref) => {
+  const { data, fileName, onClick, ...others } = props;
+  function onButtonClick(e) {
+    exportExcel(data, fileName);
+    onClick == null ? void 0 : onClick(e);
+  }
+  return /* @__PURE__ */ React.createElement("button", { ref, onClick: onButtonClick, ...others });
+});
+var TransitionBox = (props) => {
+  const { style, containerClassName, containerStyle, children, vertical = true, horizontal = true, time = 3e3, ...others } = props;
+  const box = (0, import_react.useRef)(null);
+  const [width, setWidth] = (0, import_react.useState)(0);
+  const [height, setHeight] = (0, import_react.useState)(0);
+  const [count, setCount] = (0, import_react.useState)(0);
+  (0, import_react.useEffect)(() => {
+    const observer = new ResizeObserver((entries) => {
+      const { width: currentWidth, height: currentHeight } = entries[0].contentRect;
+      setWidth(currentWidth);
+      setHeight(currentHeight);
+    });
+    observer.observe(box.current);
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
+  (0, import_react.useEffect)(() => {
+    setCount((count2) => Math.min(count2 + 1, 3));
+  }, [width, height]);
+  const outerStyle = { transitionProperty: count === 3 ? [horizontal && "width", vertical && "height"].filter(Boolean).join(", ") : void 0, transitionDuration: count === 3 ? `${time}ms` : void 0, width, height, overflow: "hidden", position: "relative", ...style };
+  return /* @__PURE__ */ React.createElement("div", { style: outerStyle, ...others }, /* @__PURE__ */ React.createElement("div", { className: containerClassName, style: { position: "absolute", ...containerStyle }, ref: box }, children));
+};
+var SeaRadar = (props) => {
+  const { unitRadius = 50, circleCount = 4, circleWidth = 1, circleColor, directionCount = 36, directionWidth = 1, directionColor, backgroundColor, scanColor, scanAngle = Math.PI / 6, period = 8, targets, showGraduationLine, showGraduationText, showCircle, showDirection } = props;
+  const style = { "--unit-radius": `${unitRadius}px`, "--circle-count": circleCount, "--circle-width": `${circleWidth}px`, "--circle-color": circleColor, "--direction-count": directionCount, "--direction-width": `${directionWidth}px`, "--direction-color": directionColor, "--background-color": backgroundColor, "--scan-color": scanColor, "--period": `${period}s` };
+  return /* @__PURE__ */ React.createElement("div", { className: "sea-radar-wrapper", style }, Array(180).fill(0).map((_, index) => /* @__PURE__ */ React.createElement("div", { className: "sea-radar-little-graduation", style: { transform: `rotateZ(${2 * index}deg)`, display: showGraduationLine ? "block" : "none" } })), Array(36).fill(0).map((_, index) => /* @__PURE__ */ React.createElement("div", { className: "sea-radar-graduation", style: { transform: `rotateZ(${10 * index}deg)`, display: showGraduationLine ? "block" : "none" } }, /* @__PURE__ */ React.createElement("span", { className: "sea-radar-graduation-text", style: { display: showGraduationText ? "block" : "none" } }, String(index * 10).padStart(3, "0")))), /* @__PURE__ */ React.createElement("div", { className: "sea-radar" }, /* @__PURE__ */ React.createElement("div", { className: "sea-radar-scan", style: { height: `${unitRadius * circleCount * Math.tan(scanAngle)}px`, clipPath: `polygon(0 0, 0 100%, 100% 100%)` } }), showCircle && Array(circleCount).fill(0).map((_, index) => /* @__PURE__ */ React.createElement("div", { className: "sea-radar-circle", style: { width: `${unitRadius * 2 * (index + 1)}px`, height: `${unitRadius * 2 * (index + 1)}px` } })), showDirection && Array(directionCount).fill(0).map((_, index) => /* @__PURE__ */ React.createElement("div", { className: "sea-radar-direction", style: { transform: `rotateZ(${360 / directionCount * index}deg)` } })), targets == null ? void 0 : targets.map((it) => /* @__PURE__ */ React.createElement("div", { className: "sea-radar-target", style: { left: `${unitRadius * circleCount + it.radius * Math.cos(it.angle)}px`, bottom: `${unitRadius * circleCount + it.radius * Math.sin(it.angle)}px` } }, it.element))));
+};
+var Ring = (props) => {
+  const { outerWidth, innerWidth, style, ...leftProps } = props;
+  const outerRadius = outerWidth / 2;
+  const innerRadius = innerWidth / 2;
+  return /* @__PURE__ */ React.createElement("div", { style: { ...style, width: `${outerWidth}px`, height: `${outerWidth}px`, clipPath: `path("M0,${outerRadius} a${outerRadius},${outerRadius},0,1,0,${outerWidth},0 a${outerRadius},${outerRadius},0,1,0,-${outerWidth},0 l${outerRadius - innerRadius},0 a${innerRadius},${innerRadius},0,0,1,${innerRadius * 2},0 a${innerRadius},${innerRadius},0,0,1,-${innerRadius * 2},0 Z")` }, ...leftProps });
+};
+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, ...others } = 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 { inlineSize: width2 } = entries[0].borderBoxSize[0];
+        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 == null ? void 0 : 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 }, ...others }, showItems && data.map((it, idx) => /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      key: (keyExactor == null ? void 0 : keyExactor(it, idx)) || idx,
+      className: containerClassName,
+      style: {
+        position: "absolute",
+        width: itemWidth,
+        height: itemHeight,
+        transition: transitionDuration !== null ? `all ${transitionDuration ?? 400}ms` : void 0,
+        ...getPosition(idx)
+      }
+    },
+    /* @__PURE__ */ React.createElement("div", { style: { width: itemWidth, height: itemHeight, display: maxRows && idx >= maxRows * columnCount ? "none" : "block", ...containerStyle } }, render(it, idx, getHidden(idx)))
+  )));
+}
+var Trapezium = (0, import_react.forwardRef)((props, ref) => {
+  const { top, bottom, height, borderRadius, style, ...other } = props;
+  const diff = (bottom - top) / 2;
+  const a = Math.atan(height / diff) / 2;
+  const b = borderRadius / Math.tan(a);
+  const c = b * Math.cos(a * 2);
+  const d = b * Math.sin(a * 2);
+  const e = Math.PI / 2 - a;
+  const f = borderRadius / Math.tan(e);
+  const g = f * Math.cos(a * 2);
+  const h = f * Math.sin(a * 2);
+  return /* @__PURE__ */ React.createElement("div", { ref, style: { width: bottom, height, clipPath: `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")`, ...style }, ...other });
+});
+function LoopSwiper(props) {
+  const { data, render, keyExactor, size, gap = 0, start = 0, speed, paused = false, className = "", direction = "x" } = props;
+  if (!(size > 0 && (speed > 0 || speed < 0))) {
+    throw new RangeError("size 必须是正数，speed 必须非0");
+  }
+  const keys = data.map((it, idx, arr) => keyExactor ? keyExactor(it, idx, arr) : String(idx));
+  const keysRef = (0, import_react.useRef)(keys);
+  const cache = (0, import_react.useRef)({ size, gap, speed, keys, paused, className, direction });
+  cache.current = { size, gap, speed, keys, paused, className, direction };
+  const eles = (0, import_react.useRef)(keys.map((key, idx) => ({ key, dom: null, offset: idx * (size + gap) + start })));
+  if (keysRef.current.length !== keys.length || keysRef.current.some((it, idx) => it !== keys[idx])) {
+    keysRef.current = keys;
+    eles.current = keys.map((key, idx) => ({ key, dom: null, offset: idx * (size + gap) + start }));
+  }
+  function setStyles() {
+    const { size: size2, speed: speed2, className: className2, direction: direction2 } = cache.current;
+    eles.current.forEach((it) => {
+      it.dom.className = className2;
+      it.dom.style.setProperty("position", `absolute`);
+      it.dom.style.setProperty("width", `${size2}px`);
+      direction2 === "x" && speed2 < 0 ? it.dom.style.setProperty("right", `0`) : it.dom.style.setProperty("left", `0`);
+      direction2 === "y" && speed2 < 0 ? it.dom.style.setProperty("bottom", `0`) : it.dom.style.setProperty("top", `0`);
+      it.dom.style.setProperty("transform", `translate${direction2.toUpperCase()}(${it.offset * (speed2 > 0 ? 1 : -1)}px)`);
+    });
+  }
+  (0, import_react.useEffect)(() => {
+    setStyles();
+  }, []);
+  (0, import_react.useEffect)(() => {
+    const stop = (0, import_deepsea_tools.setFrameInterval)(() => {
+      const { size: size2, gap: gap2, speed: speed2, keys: keys2, paused: paused2 } = cache.current;
+      if (paused2)
+        return;
+      eles.current.length = keys2.length;
+      let minIndex = 0;
+      eles.current.forEach((it, idx) => {
+        if (it.offset < eles.current[minIndex].offset) {
+          minIndex = idx;
+        }
+      });
+      const minOffset = eles.current[minIndex].offset;
+      eles.current.forEach((it, idx) => {
+        let index = idx;
+        if (idx < minIndex)
+          index = eles.current.length + idx;
+        it.offset = minOffset + (index - minIndex) * (size2 + gap2);
+        let newOffset = it.offset - Math.abs(speed2);
+        if (newOffset + size2 + gap2 <= 0) {
+          newOffset += eles.current.length * (size2 + gap2);
+        }
+        it.offset = newOffset;
+      });
+      setStyles();
+    }, 1);
+    return stop;
+  }, []);
+  function ref(dom, index) {
+    if (!eles.current[index])
+      return;
+    eles.current[index].dom = dom;
+  }
+  return /* @__PURE__ */ React.createElement(import_react.Fragment, null, data.map((it, idx, arr) => /* @__PURE__ */ React.createElement("div", { key: keys[idx], ref: (dom) => ref(dom, idx) }, render(it, idx, arr))));
+}
+var SectionRing = (props) => {
+  const { outerRadius: o, innerRadius: i, count: c, angel: a, style, ...others } = props;
+  const s = Math.PI * 2 / c - a;
+  function arc(radius, startAngle, endAngle, options = {}) {
+    return (0, import_deepsea_tools.drawArc)(o, o, radius, startAngle, endAngle, options);
+  }
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      style: {
+        ...style,
+        width: o * 2,
+        height: o * 2,
+        clipPath: `path("${Array(c).fill(0).map((it, idx) => `${arc(o, idx * (a + s), idx * (a + s) + a)} ${arc(i, idx * (a + s) + a, idx * (a + s), { line: true, anticlockwise: true })}`).join(" ")} Z")`
+      },
+      ...others
+    }
+  );
+};
+var TransitionNum = (0, import_react.forwardRef)((props, ref) => {
+  const { children: num, period, numToStr, ...others } = props;
+  if (!Number.isInteger(num) || !Number.isInteger(period) || period <= 0) {
+    throw new RangeError("目标数字必须是整数，周期必须是正整数");
+  }
+  const ele = (0, import_react.useRef)(null);
+  const cache = (0, import_react.useRef)({ num, period, numToStr, show: num });
+  cache.current = { ...cache.current, num, period, numToStr };
+  (0, import_react.useImperativeHandle)(ref, () => ({ get: () => cache.current.show }), []);
+  (0, import_react.useEffect)(() => {
+    const { num: num2, period: period2, show, numToStr: numToStr2 } = cache.current;
+    ele.current.innerText = (numToStr2 || String)(show);
+    if (num2 === show)
+      return;
+    const div = ele.current;
+    const speed = (num2 - show) / period2;
+    const cancel = (0, import_deepsea_tools.setFrameInterval)(() => {
+      const { num: num3, numToStr: numToStr3 } = cache.current;
+      cache.current.show += speed;
+      if (speed > 0 && cache.current.show > num3 || speed < 0 && cache.current.show < num3) {
+        cancel();
+        cache.current.show = num3;
+      }
+      div.innerText = (numToStr3 || String)(speed > 0 ? Math.floor(cache.current.show) : Math.ceil(cache.current.show));
+    }, 1);
+    return cancel;
+  }, [num]);
+  return /* @__PURE__ */ React.createElement("div", { ref: ele, ...others });
+});
+var CircleText = (props) => {
+  const { width, height, radius, startAngel = 0, gapAngel = 0, align = "center", style, direction = "outer", reverse = false, separator, children, ...others } = 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 }, ...others }, w)));
+};
+var Scroll = (0, import_react.forwardRef)((props, ref) => {
+  const { children, containerClassName, containerStyle, options, className, ...others } = props;
+  const { thumbWidth, ...scrollbarOptions } = options || {};
+  const id = (0, import_react.useId)();
+  (0, import_react.useEffect)(() => {
+    import_smooth_scrollbar.default.init(document.querySelector(`[data-scroll-id="${id}"]`), scrollbarOptions);
+  }, []);
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      ref,
+      className: (0, import_clsx.default)(
+        !!thumbWidth && import_css.css`
+                        .scrollbar-track.scrollbar-track-x {
+                            height: ${thumbWidth}px;
+                        }
+
+                        .scrollbar-thumb.scrollbar-thumb-x {
+                            height: ${thumbWidth}px;
+                        }
+
+                        .scrollbar-track.scrollbar-track-y {
+                            width: ${thumbWidth}px;
+                        }
+
+                        .scrollbar-thumb.scrollbar-thumb-y {
+                            width: ${thumbWidth}px;
+                        }
+                    `,
+        className
+      ),
+      "data-scroll-id": id,
+      ...others
+    },
+    /* @__PURE__ */ React.createElement("div", { className: containerClassName, style: containerStyle }, children)
+  );
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CircleText,
+  ExportExcel,
+  Flow,
+  ImportExcel,
+  InputFile,
+  LoopSwiper,
+  Ring,
+  Scroll,
+  SeaRadar,
+  SectionRing,
+  TransitionBox,
+  TransitionNum,
+  Trapezium,
+  exportExcel,
+  getFileData,
+  getGapCountAndSize,
+  getGapRange
+});
+//# sourceMappingURL=index.js.map