deepsea-components 2.8.5 → 3.0.0

package/dist/esm/index.js

@@ -1,845 +1,15 @@
-"use client";
-
-import { css } from "@emotion/css";
-import { clsx, drawArc, setFrameInterval } from "deepsea-tools";
-import { Fragment, forwardRef, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState } from "react";
-import { read, utils, writeFile } from "xlsx";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-export * from "./components/Scroll";
+export * from "./components/AutoFit";
 export * from "./components/AutoScroll";
-export 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);
-    });
-  });
-}
-
-/** 专用于读取文件的组件 */
-export const InputFile = /*#__PURE__*/forwardRef((props, ref) => {
-  const {
-    multiple = false,
-    type = "file",
-    onChange,
-    disabled: inputDisabled,
-    clearAfterChange,
-    ...others
-  } = props;
-  const [disabled, setDisabled] = 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?.(result);
-      } else {
-        onChange?.({
-          result: await getFileData(files[0], type),
-          file: files[0]
-        });
-      }
-      setDisabled(false);
-      if (clearAfterChange) input.value = "";
-    } catch (error) {
-      setDisabled(false);
-      if (clearAfterChange) input.value = "";
-      throw error;
-    }
-  }
-  return /*#__PURE__*/_jsx("input", {
-    disabled: disabled && inputDisabled,
-    ref: ref,
-    type: "file",
-    multiple: multiple,
-    onChange: onInputChange,
-    ...others
-  });
-});
-/** 专用于读取文件的 button 组件 */
-export const InputFileButton = /*#__PURE__*/forwardRef((props, ref) => {
-  const {
-    onClick,
-    children,
-    input: inputProps,
-    ...others
-  } = props;
-  const {
-    style,
-    ...otherInputProps
-  } = inputProps;
-  const input = useRef(null);
-  function onBtnClick(e) {
-    input.current?.click();
-    onClick?.(e);
-  }
-  return /*#__PURE__*/_jsxs("button", {
-    ref: ref,
-    type: "button",
-    onClick: onBtnClick,
-    ...others,
-    children: [/*#__PURE__*/_jsx(InputFile, {
-      ref: input,
-      style: {
-        display: "none",
-        ...style
-      },
-      ...otherInputProps
-    }), children]
-  });
-});
-
-/** 专门用于读取 excel 的组件 */
-export const ImportExcel = /*#__PURE__*/forwardRef((props, ref) => {
-  const {
-    onChange,
-    ...others
-  } = props;
-  function onInputChange(data) {
-    const wb = read(data.result);
-    const result = 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?.($);
-    }
-  }
-  return /*#__PURE__*/_jsx(InputFile, {
-    ref: ref,
-    accept: ".xlsx",
-    type: "arrayBuffer",
-    onChange: onInputChange,
-    ...others
-  });
-});
-
-/** 手动导出 excel */
-export function exportExcel(data, name) {
-  const workSheet = utils.json_to_sheet(data);
-  const workBook = utils.book_new();
-  utils.book_append_sheet(workBook, workSheet);
-  writeFile(workBook, `${name}${name.endsWith(".xlsx") ? "" : ".xlsx"}`);
-}
-/** 导出 excel 的 button 组件 */
-export const ExportExcel = /*#__PURE__*/forwardRef((props, ref) => {
-  const {
-    data,
-    fileName,
-    onClick,
-    ...others
-  } = props;
-  function onButtonClick(e) {
-    exportExcel(data, fileName);
-    onClick?.(e);
-  }
-  return /*#__PURE__*/_jsx("button", {
-    ref: ref,
-    onClick: onButtonClick,
-    ...others
-  });
-});
-/** 尺寸渐变的组件 */
-export const TransitionBox = props => {
-  const {
-    style,
-    containerClassName,
-    containerStyle,
-    children,
-    vertical = true,
-    horizontal = true,
-    time = 3000,
-    ...others
-  } = props;
-  const box = useRef(null);
-  const [width, setWidth] = useState(0);
-  const [height, setHeight] = useState(0);
-  const [count, setCount] = useState(0);
-  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();
-    };
-  }, []);
-  useEffect(() => {
-    setCount(count => Math.min(count + 1, 3));
-  }, [width, height]);
-  const outerStyle = {
-    transitionProperty: count === 3 ? [horizontal && "width", vertical && "height"].filter(Boolean).join(", ") : undefined,
-    transitionDuration: count === 3 ? `${time}ms` : undefined,
-    width,
-    height,
-    overflow: "hidden",
-    position: "relative",
-    ...style
-  };
-  return /*#__PURE__*/_jsx("div", {
-    style: outerStyle,
-    ...others,
-    children: /*#__PURE__*/_jsx("div", {
-      className: containerClassName,
-      style: {
-        position: "absolute",
-        ...containerStyle
-      },
-      ref: box,
-      children: children
-    })
-  });
-};
-/** 雷达组件 */
-export const 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__*/_jsxs("div", {
-    className: "sea-radar-wrapper",
-    style: style,
-    children: [Array(180).fill(0).map((_, index) => /*#__PURE__*/_jsx("div", {
-      className: "sea-radar-little-graduation",
-      style: {
-        transform: `rotateZ(${2 * index}deg)`,
-        display: showGraduationLine ? "block" : "none"
-      }
-    })), Array(36).fill(0).map((_, index) => /*#__PURE__*/_jsx("div", {
-      className: "sea-radar-graduation",
-      style: {
-        transform: `rotateZ(${10 * index}deg)`,
-        display: showGraduationLine ? "block" : "none"
-      },
-      children: /*#__PURE__*/_jsx("span", {
-        className: "sea-radar-graduation-text",
-        style: {
-          display: showGraduationText ? "block" : "none"
-        },
-        children: String(index * 10).padStart(3, "0")
-      })
-    })), /*#__PURE__*/_jsxs("div", {
-      className: "sea-radar",
-      children: [/*#__PURE__*/_jsx("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__*/_jsx("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__*/_jsx("div", {
-        className: "sea-radar-direction",
-        style: {
-          transform: `rotateZ(${360 / directionCount * index}deg)`
-        }
-      })), targets?.map(it => /*#__PURE__*/_jsx("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`
-        },
-        children: it.element
-      }))]
-    })]
-  });
-};
-/** 忘了什么组件 */
-export const Ring = props => {
-  const {
-    outerWidth,
-    innerWidth,
-    style,
-    ...leftProps
-  } = props;
-  const outerRadius = outerWidth / 2;
-  const innerRadius = innerWidth / 2;
-  return /*#__PURE__*/_jsx("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
-  });
-};
-export function getGapRange(gap) {
-  if (typeof gap === "number") return [gap, gap];
-  if (Array.isArray(gap)) return [gap[0] || 0, gap[1]];
-  return [0, null];
-}
-export 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];
-}
-
-/** 自适应浮动组件 */
-export 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] = useState(0);
-  const [columnCount, setColumnCount] = useState(1);
-  const [columnGapSize, setColumnGapSize] = useState(minColumnGap);
-  const [showItems, setShowItems] = useState(false);
-  const ele = 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;
-  }
-  useEffect(() => {
-    let timeout;
-    const observer = new ResizeObserver(entries => {
-      clearTimeout(timeout);
-      function task() {
-        const {
-          inlineSize: width
-        } = entries[0].borderBoxSize[0];
-        const [newColumnCount, newColumnGapSize] = getGapCountAndSize(width, itemWidth, minColumnGap, maxColumnGap);
-        setShowItems(true);
-        setWidth(width);
-        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]);
-  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__*/_jsx("div", {
-    ref: ele,
-    className: className,
-    style: {
-      position: "relative",
-      boxSizing: "border-box",
-      height,
-      ...style
-    },
-    ...others,
-    children: showItems && data.map((it, idx) => /*#__PURE__*/_jsx("div", {
-      className: containerClassName,
-      style: {
-        position: "absolute",
-        width: itemWidth,
-        height: itemHeight,
-        transition: transitionDuration !== null ? `all ${transitionDuration ?? 400}ms` : undefined,
-        ...getPosition(idx)
-      },
-      children: /*#__PURE__*/_jsx("div", {
-        style: {
-          width: itemWidth,
-          height: itemHeight,
-          display: maxRows && idx >= maxRows * columnCount ? "none" : "block",
-          ...containerStyle
-        },
-        children: render(it, idx, getHidden(idx))
-      })
-    }, keyExactor?.(it, idx) || idx))
-  });
-}
-/** 梯形组件 */
-export const Trapezium = /*#__PURE__*/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__*/_jsx("div", {
-    ref: 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
-  });
-});
-css`
-    @keyframes deepsea-horizontal-loop-swipe {
-        from {
-            transform: translateX(0);
-        }
-        to {
-            transform: translateX(-100%);
-        }
-    }
-    @keyframes deepsea-reverse-horizontal-loop-swipe {
-        from {
-            transform: translateX(0);
-        }
-        to {
-            transform: translateX(100%);
-        }
-    }
-    @keyframes deepsea-vertical-loop-swipe {
-        from {
-            transform: translateY(0);
-        }
-        to {
-            transform: translateY(-100%);
-        }
-    }
-    @keyframes deepsea-reverse-vertical-loop-swipe {
-        from {
-            transform: translateY(0);
-        }
-        to {
-            transform: translateY(100%);
-        }
-    }
-`;
-
-/** 循环播放组件 */
-export const LoopSwiper = /*#__PURE__*/forwardRef((props, ref) => {
-  const {
-    style,
-    children,
-    direction,
-    period,
-    reverse,
-    gap,
-    ...others
-  } = props;
-  const wrapper = useRef(null);
-  const container = useRef(null);
-  const [swiper, setSwiper] = useState(false);
-  const directionRef = useRef(direction);
-  directionRef.current = direction;
-  const flexDirection = direction === "vertical" ? reverse ? "column-reverse" : "column" : reverse ? "row-reverse" : "row";
-  const animationName = swiper ? direction === "vertical" ? reverse ? "deepsea-reverse-vertical-loop-swipe" : "deepsea-vertical-loop-swipe" : reverse ? "deepsea-reverse-horizontal-loop-swipe" : "deepsea-horizontal-loop-swipe" : "none";
-  const animationDuration = `${period}ms`;
-  const animationTimingFunction = "linear";
-  const animationIterationCount = "infinite";
-  useImperativeHandle(ref, () => wrapper.current);
-  useEffect(() => {
-    const wrapperEle = wrapper.current;
-    const containerEle = container.current;
-    let wrapperWidth = 0;
-    let wrapperHeight = 0;
-    let containerWidth = 0;
-    let containerHeight = 0;
-    const observer = new ResizeObserver(entries => {
-      entries.forEach(entry => {
-        if (entry.target === wrapperEle) {
-          wrapperWidth = entry.contentRect.width;
-          wrapperHeight = entry.contentRect.height;
-        } else if (entry.target === containerEle) {
-          containerWidth = entry.contentRect.width;
-          containerHeight = entry.contentRect.height;
-        }
-      });
-      setSwiper(directionRef.current === "vertical" ? containerHeight > wrapperHeight : containerWidth > wrapperWidth);
-    });
-    observer.observe(wrapperEle);
-    observer.observe(containerEle);
-  }, []);
-  return /*#__PURE__*/_jsxs("div", {
-    ref: wrapper,
-    style: {
-      display: "flex",
-      flexDirection,
-      gap,
-      ...style
-    },
-    ...others,
-    children: [/*#__PURE__*/_jsx("div", {
-      ref: container,
-      style: {
-        display: "flex",
-        flexDirection,
-        gap,
-        animationName,
-        animationTimingFunction,
-        animationDuration,
-        animationIterationCount
-      },
-      children: children
-    }), /*#__PURE__*/_jsx("div", {
-      style: {
-        display: swiper ? "flex" : "none",
-        flexDirection,
-        gap,
-        animationName,
-        animationTimingFunction,
-        animationDuration,
-        animationIterationCount
-      },
-      children: children
-    })]
-  });
-});
-export const 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 drawArc(o, o, radius, startAngle, endAngle, options);
-  }
-  return /*#__PURE__*/_jsx("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
-  });
-};
-/** 渐变数字组件 */
-export const TransitionNum = /*#__PURE__*/forwardRef((props, ref) => {
-  const {
-    children: num,
-    period,
-    numToStr,
-    ...others
-  } = props;
-  if (!Number.isInteger(num) || !Number.isInteger(period) || period <= 0) {
-    throw new RangeError("目标数字必须是整数，周期必须是正整数");
-  }
-  const ele = useRef(null);
-  const cache = useRef({
-    num,
-    period,
-    numToStr,
-    show: num
-  });
-  cache.current = {
-    ...cache.current,
-    num,
-    period,
-    numToStr
-  };
-  useImperativeHandle(ref, () => ({
-    get: () => cache.current.show
-  }), []);
-  useEffect(() => {
-    const {
-      num,
-      period,
-      show,
-      numToStr
-    } = cache.current;
-    ele.current.innerText = (numToStr || String)(show);
-    if (num === show) return;
-    const div = ele.current;
-    const speed = (num - show) / period;
-    const cancel = setFrameInterval(() => {
-      const {
-        num,
-        numToStr
-      } = cache.current;
-      cache.current.show += speed;
-      if (speed > 0 && cache.current.show > num || speed < 0 && cache.current.show < num) {
-        cancel();
-        cache.current.show = num;
-      }
-      div.innerText = (numToStr || String)(speed > 0 ? Math.floor(cache.current.show) : Math.ceil(cache.current.show));
-    }, 1);
-    return cancel;
-  }, [num]);
-  return /*#__PURE__*/_jsx("div", {
-    ref: ele,
-    ...others
-  });
-});
-/** 环形文字 */
-export const 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__*/_jsx(Fragment, {
-    children: words.map((w, idx) => /*#__PURE__*/_jsx("span", {
-      style: {
-        position: "absolute",
-        ...style,
-        transform: getTransform(idx),
-        textAlign: "center",
-        width,
-        lineHeight: `${height}px`,
-        height: height
-      },
-      ...others,
-      children: w
-    }, idx))
-  });
-};
-export const AutoSizeTextArea = /*#__PURE__*/forwardRef((props, ref) => {
-  const {
-    style = {},
-    ...others
-  } = props;
-  const {
-    height,
-    resize,
-    overflowY,
-    ...otherStyle
-  } = style;
-  const ele = useRef(null);
-  useImperativeHandle(ref, () => ele.current);
-  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__*/_jsx("textarea", {
-    ref: ele,
-    style: {
-      ...otherStyle,
-      resize: "none",
-      overflowY: "hidden"
-    },
-    ...others
-  });
-});
-/**
- * 自适应缩放组件
- *
- * 注意：
- * 1. 父元素必须设置非 static 定位方式
- * 2. 父元素只能有且仅有一个子元素，那就是 AutoFit
- * 3. 不要设置 AutoFit 的 position、left、top、transform、width、height 属性
- * 4. 在第一次完成缩放前，无论 props 是什么，返回的都是 <div style={{ display: "none" }} />
- * 5. 元素的属性、事件、资源并不是立即加载的，会有一帧的延迟，在第一次完成缩放后才会显示
- */
-export const AutoFit = /*#__PURE__*/forwardRef((props, ref) => {
-  const {
-    width = 1920,
-    height = 1080,
-    direction,
-    className,
-    ...rest
-  } = props;
-  const ele = useRef(null);
-  const [show, setShow] = useState(false);
-  useImperativeHandle(ref, () => ele.current, [ele.current]);
-  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") {
-    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__*/_jsx("div", {
-    ref: ele,
-    style: {
-      display: "none"
-    }
-  });
-  return /*#__PURE__*/_jsx("div", {
-    ref: ele,
-    className: clsx(css`
-                    position: absolute;
-                    transform: var(--transform);
-                    transform-origin: top left;
-                    width: var(--width);
-                    height: var(--height);
-                `, className),
-    ...rest
-  });
-});
+export * from "./components/AutoSizeTextarea";
+export * from "./components/CircleText";
+export * from "./components/Flow";
+export * from "./components/InputFile";
+export * from "./components/LoopSwiper";
+export * from "./components/Ring";
+export * from "./components/Scroll";
+export * from "./components/SectionRing";
+export * from "./components/Skeleton";
+export * from "./components/TransitionBox";
+export * from "./components/TransitionNum";
+export * from "./components/Trapezium";
 //# sourceMappingURL=index.js.map