deepsea-components 2.8.3 → 3.0.0

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>>;

package/dist/cjs/components/InputFile.js

@@ -0,0 +1,143 @@
+"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/InputFile.tsx
+var InputFile_exports = {};
+__export(InputFile_exports, {
+  ExportExcel: () => ExportExcel,
+  ImportExcel: () => ImportExcel,
+  InputFile: () => InputFile,
+  InputFileButton: () => InputFileButton,
+  exportExcel: () => exportExcel,
+  getFileData: () => getFileData
+});
+module.exports = __toCommonJS(InputFile_exports);
+var import_react = require("react");
+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, clearAfterChange, ...rest } = 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?.(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__ */ React.createElement("input", { ref, disabled: disabled || inputDisabled, type: "file", multiple, onChange: onInputChange, ...rest });
+});
+var InputFileButton = (0, import_react.forwardRef)((props, ref) => {
+  const { onClick, input: inputProps, ...rest } = props;
+  const { style, ...restInputProps } = inputProps;
+  const input = (0, import_react.useRef)(null);
+  function onBtnClick(e) {
+    input.current?.click();
+    onClick?.(e);
+  }
+  return /* @__PURE__ */ React.createElement(import_react.Fragment, null, /* @__PURE__ */ React.createElement(InputFile, { ref: input, style: { display: "none", ...style }, ...restInputProps }), /* @__PURE__ */ React.createElement("button", { ref, type: "button", onClick: onBtnClick, ...rest }));
+});
+var ImportExcel = (0, import_react.forwardRef)((props, ref) => {
+  const { onChange, ...rest } = 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?.($);
+    }
+  }
+  return /* @__PURE__ */ React.createElement(InputFile, { ref, accept: ".xlsx", type: "arrayBuffer", onChange: onInputChange, ...rest });
+});
+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, ...rest } = props;
+  function onButtonClick(e) {
+    exportExcel(data, fileName);
+    onClick?.(e);
+  }
+  return /* @__PURE__ */ React.createElement("button", { ref, onClick: onButtonClick, ...rest });
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ExportExcel,
+  ImportExcel,
+  InputFile,
+  InputFileButton,
+  exportExcel,
+  getFileData
+});
+//# sourceMappingURL=InputFile.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/InputFile.tsx"],
+  "sourcesContent": ["\"use client\"\r\n\r\nimport { ButtonHTMLAttributes, ChangeEvent, Fragment, InputHTMLAttributes, MouseEvent as ReactMouseEvent, forwardRef, useRef, useState } from \"react\"\r\nimport { read, utils, writeFile } from \"xlsx\"\r\n\r\nexport interface InputFileDataTypes {\r\n    base64: string\r\n    text: string\r\n    arrayBuffer: ArrayBuffer\r\n    binary: string\r\n    file: File\r\n}\r\n\r\nexport type InputFileDataType = keyof InputFileDataTypes\r\n\r\nexport interface InputFileData<T> {\r\n    result: T\r\n    file: File\r\n}\r\n\r\nexport type InputFileProps = (\r\n    | {\r\n          multiple?: false\r\n          type: \"base64\" | \"text\" | \"binary\"\r\n          onChange?: (data: InputFileData<string>) => void\r\n      }\r\n    | {\r\n          multiple?: false\r\n          type: \"arrayBuffer\"\r\n          onChange?: (data: InputFileData<ArrayBuffer>) => void\r\n      }\r\n    | {\r\n          multiple?: false\r\n          type?: \"file\"\r\n          onChange?: (data: InputFileData<File>) => void\r\n      }\r\n    | {\r\n          multiple: true\r\n          type: \"base64\" | \"text\" | \"binary\"\r\n          onChange?: (data: InputFileData<string>[]) => void\r\n      }\r\n    | {\r\n          multiple: true\r\n          type: \"arrayBuffer\"\r\n          onChange?: (data: InputFileData<ArrayBuffer>[]) => void\r\n      }\r\n    | {\r\n          multiple: true\r\n          type?: \"file\"\r\n          onChange?: (data: InputFileData<File>[]) => void\r\n      }\r\n) &\r\n    Omit<InputHTMLAttributes<HTMLInputElement>, \"onChange\" | \"multiple\" | \"type\"> & {\r\n        /** 是否在捕获文件后清除 input 上的文件，默认为 false，主要区别在于如果不清除，连续两次选择同样的文件不会触发 onChange 事件，如果用于 form 表单，请设置为 flase */\r\n        clearAfterChange?: boolean\r\n    }\r\n\r\nexport async function getFileData<T extends InputFileDataType>(file: File, type: T): Promise<InputFileDataTypes[T]> {\r\n    const fileReader = new FileReader()\r\n    switch (type) {\r\n        case \"arrayBuffer\":\r\n            fileReader.readAsArrayBuffer(file)\r\n            break\r\n        case \"binary\":\r\n            fileReader.readAsBinaryString(file)\r\n            break\r\n        case \"base64\":\r\n            fileReader.readAsDataURL(file)\r\n            break\r\n        case \"text\":\r\n            fileReader.readAsText(file)\r\n            break\r\n        default:\r\n            return file as any\r\n    }\r\n    return new Promise(resolve => {\r\n        fileReader.addEventListener(\"load\", () => {\r\n            resolve(fileReader.result as any)\r\n        })\r\n    })\r\n}\r\n\r\n/** 专用于读取文件的组件 */\r\nexport const InputFile = forwardRef<HTMLInputElement, InputFileProps>((props, ref) => {\r\n    const { multiple = false, type = \"file\", onChange, disabled: inputDisabled, clearAfterChange, ...rest } = props\r\n    const [disabled, setDisabled] = useState(false)\r\n\r\n    async function onInputChange(e: ChangeEvent<HTMLInputElement>) {\r\n        const input = e.target\r\n        const { files } = input\r\n        if (!files || files.length === 0) return\r\n        setDisabled(true)\r\n        try {\r\n            if (multiple) {\r\n                const result: any[] = []\r\n                for (const file of Array.from(files)) {\r\n                    result.push({\r\n                        result: await getFileData(file, type),\r\n                        file\r\n                    })\r\n                }\r\n                onChange?.(result as any)\r\n            } else {\r\n                onChange?.({\r\n                    result: await getFileData(files[0], type),\r\n                    file: files[0]\r\n                } as any)\r\n            }\r\n            setDisabled(false)\r\n            if (clearAfterChange) input.value = \"\"\r\n        } catch (error) {\r\n            setDisabled(false)\r\n            if (clearAfterChange) input.value = \"\"\r\n            throw error\r\n        }\r\n    }\r\n\r\n    return <input ref={ref} disabled={disabled || inputDisabled} type=\"file\" multiple={multiple} onChange={onInputChange} {...rest} />\r\n})\r\n\r\nexport type InputFileButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {\r\n    input: InputFileProps\r\n}\r\n\r\n/** 专用于读取文件的 button 组件 */\r\nexport const InputFileButton = forwardRef<HTMLButtonElement, InputFileButtonProps>((props, ref) => {\r\n    const { onClick, input: inputProps, ...rest } = props\r\n    const { style, ...restInputProps } = inputProps\r\n    const input = useRef<HTMLInputElement>(null)\r\n\r\n    function onBtnClick(e: ReactMouseEvent<HTMLButtonElement, MouseEvent>) {\r\n        input.current?.click()\r\n        onClick?.(e)\r\n    }\r\n\r\n    return (\r\n        <Fragment>\r\n            <InputFile ref={input} style={{ display: \"none\", ...style }} {...restInputProps} />\r\n            <button ref={ref} type=\"button\" onClick={onBtnClick} {...rest} />\r\n        </Fragment>\r\n    )\r\n})\r\n\r\nexport interface ImportExcelProps extends Omit<InputFileProps, \"multiple\" | \"onChange\" | \"accept\" | \"type\"> {\r\n    onChange?: (data: Record<string, string>[]) => void\r\n}\r\n\r\n/** 专门用于读取 excel 的组件 */\r\nexport const ImportExcel = forwardRef<HTMLInputElement, ImportExcelProps>((props, ref) => {\r\n    const { onChange, ...rest } = props\r\n\r\n    function onInputChange(data: InputFileData<ArrayBuffer>) {\r\n        const wb = read(data.result)\r\n        const result = utils.sheet_to_json<any>(wb.Sheets[wb.SheetNames[0]])\r\n        if (typeof result === \"object\") {\r\n            const $ = result.map(it => {\r\n                const _: Record<string, string> = {}\r\n                Object.keys(it)\r\n                    .filter(key => key !== \"__rowNum__\")\r\n                    .forEach(key => (_[key] = String(it[key])))\r\n                return _\r\n            })\r\n            onChange?.($)\r\n        }\r\n    }\r\n\r\n    return <InputFile ref={ref} accept=\".xlsx\" type=\"arrayBuffer\" onChange={onInputChange} {...rest} />\r\n})\r\n\r\n/** 手动导出 excel */\r\nexport function exportExcel(data: Record<string, string>[], name: string) {\r\n    const workSheet = utils.json_to_sheet(data)\r\n    const workBook = utils.book_new()\r\n    utils.book_append_sheet(workBook, workSheet)\r\n    writeFile(workBook, `${name}${name.endsWith(\".xlsx\") ? \"\" : \".xlsx\"}`)\r\n}\r\n\r\nexport interface ExportExcelProps extends ButtonHTMLAttributes<HTMLButtonElement> {\r\n    data: Record<string, string>[]\r\n    fileName: string\r\n}\r\n\r\n/** 导出 excel 的 button 组件 */\r\nexport const ExportExcel = forwardRef<HTMLButtonElement, ExportExcelProps>((props, ref) => {\r\n    const { data, fileName, onClick, ...rest } = props\r\n\r\n    function onButtonClick(e: ReactMouseEvent<HTMLButtonElement, MouseEvent>) {\r\n        exportExcel(data, fileName)\r\n        onClick?.(e)\r\n    }\r\n\r\n    return <button ref={ref} onClick={onButtonClick} {...rest} />\r\n})\r\n"],
+  "mappings": "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",
+  "names": []
+}

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

@@ -0,0 +1,9 @@
+import { CSSProperties, HTMLAttributes } from "react";
+export interface LoopSwiperProps extends HTMLAttributes<HTMLDivElement> {
+    direction?: "horizontal" | "vertical";
+    reverse?: boolean;
+    period: number;
+    gap?: CSSProperties["gap"];
+}
+/** 循环播放组件 */
+export declare const LoopSwiper: import("react").ForwardRefExoticComponent<LoopSwiperProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/cjs/components/LoopSwiper.js

@@ -0,0 +1,116 @@
+"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/LoopSwiper.tsx
+var LoopSwiper_exports = {};
+__export(LoopSwiper_exports, {
+  LoopSwiper: () => LoopSwiper
+});
+module.exports = __toCommonJS(LoopSwiper_exports);
+var import_css = require("@emotion/css");
+var import_deepsea_tools = require("deepsea-tools");
+var import_react = require("react");
+var LoopSwiper = (0, import_react.forwardRef)((props, ref) => {
+  const { className, style, children, direction, period, reverse, gap, ...rest } = props;
+  const wrapper = (0, import_react.useRef)(null);
+  const container = (0, import_react.useRef)(null);
+  const [swiper, setSwiper] = (0, import_react.useState)(false);
+  const directionRef = (0, import_react.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";
+  (0, import_react.useImperativeHandle)(ref, () => wrapper.current, []);
+  (0, import_react.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__ */ React.createElement(
+    "div",
+    {
+      ref: wrapper,
+      className: (0, import_deepsea_tools.clsx)(
+        import_css.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%);
+                        }
+                    }
+                `,
+        className
+      ),
+      style: { display: "flex", flexDirection, gap, ...style },
+      ...rest
+    },
+    /* @__PURE__ */ React.createElement("div", { ref: container, style: { display: "flex", flexDirection, gap, animationName, animationTimingFunction, animationDuration, animationIterationCount } }, children),
+    /* @__PURE__ */ React.createElement("div", { style: { display: swiper ? "flex" : "none", flexDirection, gap, animationName, animationTimingFunction, animationDuration, animationIterationCount } }, children)
+  );
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  LoopSwiper
+});
+//# sourceMappingURL=LoopSwiper.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/LoopSwiper.tsx"],
+  "sourcesContent": ["\"use client\"\r\n\r\nimport { css } from \"@emotion/css\"\r\nimport { clsx } from \"deepsea-tools\"\r\nimport { CSSProperties, forwardRef, HTMLAttributes, useEffect, useImperativeHandle, useRef, useState } from \"react\"\r\n\r\nexport interface LoopSwiperProps extends HTMLAttributes<HTMLDivElement> {\r\n    direction?: \"horizontal\" | \"vertical\"\r\n    reverse?: boolean\r\n    period: number\r\n    gap?: CSSProperties[\"gap\"]\r\n}\r\n\r\n/** 循环播放组件 */\r\nexport const LoopSwiper = forwardRef<HTMLDivElement, LoopSwiperProps>((props, ref) => {\r\n    const { className, style, children, direction, period, reverse, gap, ...rest } = props\r\n    const wrapper = useRef<HTMLDivElement>(null)\r\n    const container = useRef<HTMLDivElement>(null)\r\n    const [swiper, setSwiper] = useState(false)\r\n    const directionRef = useRef(direction)\r\n    directionRef.current = direction\r\n    const flexDirection: CSSProperties[\"flexDirection\"] = direction === \"vertical\" ? (reverse ? \"column-reverse\" : \"column\") : reverse ? \"row-reverse\" : \"row\"\r\n    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\"\r\n    const animationDuration = `${period}ms`\r\n    const animationTimingFunction = \"linear\"\r\n    const animationIterationCount = \"infinite\"\r\n\r\n    useImperativeHandle(ref, () => wrapper.current!, [])\r\n\r\n    useEffect(() => {\r\n        const wrapperEle = wrapper.current!\r\n        const containerEle = container.current!\r\n        let wrapperWidth = 0\r\n        let wrapperHeight = 0\r\n        let containerWidth = 0\r\n        let containerHeight = 0\r\n        const observer = new ResizeObserver(entries => {\r\n            entries.forEach(entry => {\r\n                if (entry.target === wrapperEle) {\r\n                    wrapperWidth = entry.contentRect.width\r\n                    wrapperHeight = entry.contentRect.height\r\n                } else if (entry.target === containerEle) {\r\n                    containerWidth = entry.contentRect.width\r\n                    containerHeight = entry.contentRect.height\r\n                }\r\n            })\r\n            setSwiper(directionRef.current === \"vertical\" ? containerHeight > wrapperHeight : containerWidth > wrapperWidth)\r\n        })\r\n        observer.observe(wrapperEle)\r\n        observer.observe(containerEle)\r\n    }, [])\r\n\r\n    return (\r\n        <div\r\n            ref={wrapper}\r\n            className={clsx(\r\n                css`\r\n                    @keyframes deepsea-horizontal-loop-swipe {\r\n                        from {\r\n                            transform: translateX(0);\r\n                        }\r\n                        to {\r\n                            transform: translateX(-100%);\r\n                        }\r\n                    }\r\n                    @keyframes deepsea-reverse-horizontal-loop-swipe {\r\n                        from {\r\n                            transform: translateX(0);\r\n                        }\r\n                        to {\r\n                            transform: translateX(100%);\r\n                        }\r\n                    }\r\n                    @keyframes deepsea-vertical-loop-swipe {\r\n                        from {\r\n                            transform: translateY(0);\r\n                        }\r\n                        to {\r\n                            transform: translateY(-100%);\r\n                        }\r\n                    }\r\n                    @keyframes deepsea-reverse-vertical-loop-swipe {\r\n                        from {\r\n                            transform: translateY(0);\r\n                        }\r\n                        to {\r\n                            transform: translateY(100%);\r\n                        }\r\n                    }\r\n                `,\r\n                className\r\n            )}\r\n            style={{ display: \"flex\", flexDirection, gap, ...style }}\r\n            {...rest}>\r\n            <div ref={container} style={{ display: \"flex\", flexDirection, gap, animationName, animationTimingFunction, animationDuration, animationIterationCount }}>\r\n                {children}\r\n            </div>\r\n            <div style={{ display: swiper ? \"flex\" : \"none\", flexDirection, gap, animationName, animationTimingFunction, animationDuration, animationIterationCount }}>{children}</div>\r\n        </div>\r\n    )\r\n})\r\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,iBAAoB;AACpB,2BAAqB;AACrB,mBAA4G;AAUrG,IAAM,iBAAa,yBAA4C,CAAC,OAAO,QAAQ;AAClF,QAAM,EAAE,WAAW,OAAO,UAAU,WAAW,QAAQ,SAAS,KAAK,GAAG,KAAK,IAAI;AACjF,QAAM,cAAU,qBAAuB,IAAI;AAC3C,QAAM,gBAAY,qBAAuB,IAAI;AAC7C,QAAM,CAAC,QAAQ,SAAS,QAAI,uBAAS,KAAK;AAC1C,QAAM,mBAAe,qBAAO,SAAS;AACrC,eAAa,UAAU;AACvB,QAAM,gBAAgD,cAAc,aAAc,UAAU,mBAAmB,WAAY,UAAU,gBAAgB;AACrJ,QAAM,gBAAgB,SAAU,cAAc,aAAc,UAAU,wCAAwC,gCAAiC,UAAU,0CAA0C,kCAAmC;AACtO,QAAM,oBAAoB,GAAG;AAC7B,QAAM,0BAA0B;AAChC,QAAM,0BAA0B;AAEhC,wCAAoB,KAAK,MAAM,QAAQ,SAAU,CAAC,CAAC;AAEnD,8BAAU,MAAM;AACZ,UAAM,aAAa,QAAQ;AAC3B,UAAM,eAAe,UAAU;AAC/B,QAAI,eAAe;AACnB,QAAI,gBAAgB;AACpB,QAAI,iBAAiB;AACrB,QAAI,kBAAkB;AACtB,UAAM,WAAW,IAAI,eAAe,aAAW;AAC3C,cAAQ,QAAQ,WAAS;AACrB,YAAI,MAAM,WAAW,YAAY;AAC7B,yBAAe,MAAM,YAAY;AACjC,0BAAgB,MAAM,YAAY;AAAA,QACtC,WAAW,MAAM,WAAW,cAAc;AACtC,2BAAiB,MAAM,YAAY;AACnC,4BAAkB,MAAM,YAAY;AAAA,QACxC;AAAA,MACJ,CAAC;AACD,gBAAU,aAAa,YAAY,aAAa,kBAAkB,gBAAgB,iBAAiB,YAAY;AAAA,IACnH,CAAC;AACD,aAAS,QAAQ,UAAU;AAC3B,aAAS,QAAQ,YAAY;AAAA,EACjC,GAAG,CAAC,CAAC;AAEL,SACI;AAAA,IAAC;AAAA;AAAA,MACG,KAAK;AAAA,MACL,eAAW;AAAA,QACP;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAkCA;AAAA,MACJ;AAAA,MACA,OAAO,EAAE,SAAS,QAAQ,eAAe,KAAK,GAAG,MAAM;AAAA,MACtD,GAAG;AAAA;AAAA,IACJ,oCAAC,SAAI,KAAK,WAAW,OAAO,EAAE,SAAS,QAAQ,eAAe,KAAK,eAAe,yBAAyB,mBAAmB,wBAAwB,KACjJ,QACL;AAAA,IACA,oCAAC,SAAI,OAAO,EAAE,SAAS,SAAS,SAAS,QAAQ,eAAe,KAAK,eAAe,yBAAyB,mBAAmB,wBAAwB,KAAI,QAAS;AAAA,EACzK;AAER,CAAC;",
+  "names": []
+}

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

@@ -0,0 +1,7 @@
+import { HTMLAttributes } from "react";
+export interface RingProps extends HTMLAttributes<HTMLDivElement> {
+    outerWidth: number;
+    innerWidth: number;
+}
+/** 环形组件 */
+export declare const Ring: import("react").ForwardRefExoticComponent<RingProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/cjs/components/Ring.js

@@ -0,0 +1,37 @@
+"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/Ring.tsx
+var Ring_exports = {};
+__export(Ring_exports, {
+  Ring: () => Ring
+});
+module.exports = __toCommonJS(Ring_exports);
+var import_react = require("react");
+var Ring = (0, import_react.forwardRef)((props, ref) => {
+  const { outerWidth, innerWidth, style, ...rest } = props;
+  const outerRadius = outerWidth / 2;
+  const innerRadius = innerWidth / 2;
+  return /* @__PURE__ */ React.createElement("div", { ref, 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")` }, ...rest });
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Ring
+});
+//# sourceMappingURL=Ring.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/Ring.tsx"],
+  "sourcesContent": ["\"use client\"\r\n\r\nimport { forwardRef, HTMLAttributes } from \"react\"\r\n\r\nexport interface RingProps extends HTMLAttributes<HTMLDivElement> {\r\n    outerWidth: number\r\n    innerWidth: number\r\n}\r\n\r\n/** 环形组件 */\r\nexport const Ring = forwardRef<HTMLDivElement, RingProps>((props, ref) => {\r\n    const { outerWidth, innerWidth, style, ...rest } = props\r\n\r\n    const outerRadius = outerWidth / 2\r\n\r\n    const innerRadius = innerWidth / 2\r\n\r\n    return <div ref={ref} 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\")` }} {...rest} />\r\n})\r\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,mBAA2C;AAQpC,IAAM,WAAO,yBAAsC,CAAC,OAAO,QAAQ;AACtE,QAAM,EAAE,YAAY,YAAY,OAAO,GAAG,KAAK,IAAI;AAEnD,QAAM,cAAc,aAAa;AAEjC,QAAM,cAAc,aAAa;AAEjC,SAAO,oCAAC,SAAI,KAAU,OAAO,EAAE,GAAG,OAAO,OAAO,GAAG,gBAAgB,QAAQ,GAAG,gBAAgB,UAAU,YAAY,gBAAgB,eAAe,qBAAqB,iBAAiB,eAAe,sBAAsB,iBAAiB,cAAc,kBAAkB,eAAe,qBAAqB,cAAc,QAAQ,eAAe,sBAAsB,cAAc,UAAU,GAAI,GAAG,MAAM;AACvZ,CAAC;",
+  "names": []
+}

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/Scroll.tsx"],
-  "sourcesContent": ["\"use client\"\r\nimport { css } from \"@emotion/css\"\r\nimport { clsx } from \"deepsea-tools\"\r\nimport { CSSProperties, ForwardedRef, forwardRef, HTMLAttributes, useEffect, useImperativeHandle, useLayoutEffect, useRef } from \"react\"\r\nimport Scrollbar from \"smooth-scrollbar\"\r\nimport type { ScrollbarOptions, ScrollListener } from \"smooth-scrollbar/interfaces\"\r\nexport { default as Scrollbar } from \"smooth-scrollbar\"\r\nexport * from \"smooth-scrollbar/interfaces\"\r\n\r\nexport interface ScrollOptions extends Partial<ScrollbarOptions> {\r\n    /** 滑块宽度 */\r\n    thumbWidth?: number | string\r\n    /** 滑块圆角大小 */\r\n    thumbRadius?: number | string\r\n    /** 滑块背景颜色 */\r\n    thumbColor?: string\r\n    /** 滚动条背景颜色 */\r\n    trackColor?: string\r\n}\r\n\r\nexport interface ScrollProps extends HTMLAttributes<HTMLDivElement> {\r\n    /** 滚动的配置 */\r\n    options?: ScrollOptions\r\n    /** 滚动条实例 */\r\n    scrollbar?: ForwardedRef<Scrollbar>\r\n    /** 滚动条滚动事件 */\r\n    onScrollbar?: ScrollListener\r\n}\r\n\r\nexport const Scroll = forwardRef<HTMLDivElement, ScrollProps>((props, ref) => {\r\n    const { children, options, className, style, scrollbar, onScrollbar, ...rest } = props\r\n    const { thumbWidth, thumbRadius, thumbColor, trackColor, ...scrollbarOptions } = options || {}\r\n    const ele = useRef<HTMLDivElement>(null)\r\n    const bar = useRef<Scrollbar | null>(null)\r\n\r\n    useLayoutEffect(() => {\r\n        bar.current = Scrollbar.init(ele.current!, scrollbarOptions)\r\n        return () => bar.current?.destroy()\r\n    }, [])\r\n\r\n    useImperativeHandle(ref, () => ele.current!, [])\r\n\r\n    useImperativeHandle(scrollbar, () => bar.current!, [])\r\n\r\n    useEffect(() => {\r\n        if (!onScrollbar) return\r\n        bar.current?.addListener(onScrollbar)\r\n        return () => bar.current?.removeListener(onScrollbar)\r\n    }, [onScrollbar])\r\n\r\n    return (\r\n        <div\r\n            ref={ele}\r\n            className={clsx(\r\n                css`\r\n                    .scrollbar-track.scrollbar-track-x {\r\n                        ${thumbWidth !== undefined ? \"height: var(--thumb-width);\" : \"\"}\r\n                        ${trackColor !== undefined ? \"background-color: var(--track-color);\" : \"\"}\r\n                    }\r\n\r\n                    .scrollbar-thumb.scrollbar-thumb-x {\r\n                        ${thumbWidth !== undefined ? \"height: var(--thumb-width);\" : \"\"}\r\n                        ${thumbRadius !== undefined ? \"border-radius: var(--thumb-radius);\" : \"\"}\r\n                        ${thumbColor !== undefined ? \"background-color: var(--thumb-color);\" : \"\"}\r\n                    }\r\n\r\n                    .scrollbar-track.scrollbar-track-y {\r\n                        ${thumbWidth !== undefined ? \"width: var(--thumb-width);\" : \"\"}\r\n                        ${trackColor !== undefined ? \"background-color: var(--track-color);\" : \"\"}\r\n                    }\r\n\r\n                    .scrollbar-thumb.scrollbar-thumb-y {\r\n                        ${thumbWidth !== undefined ? \"width: var(--thumb-width);\" : \"\"}\r\n                        ${thumbRadius !== undefined ? \"border-radius: var(--thumb-radius);\" : \"\"}\r\n                        ${thumbColor !== undefined ? \"background-color: var(--thumb-color);\" : \"\"}\r\n                    }\r\n                `,\r\n                className\r\n            )}\r\n            style={\r\n                {\r\n                    \"--thumb-width\": typeof thumbWidth === \"number\" ? `${thumbWidth}px` : thumbWidth,\r\n                    \"--thumb-radius\": typeof thumbRadius === \"number\" ? `${thumbRadius}px` : thumbRadius,\r\n                    \"--thumb-color\": thumbColor,\r\n                    \"--track-color\": trackColor,\r\n                    ...style\r\n                } as CSSProperties\r\n            }\r\n            {...rest}>\r\n            {children}\r\n        </div>\r\n    )\r\n})\r\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,iBAAoB;AACpB,2BAAqB;AACrB,mBAAiI;AACjI,8BAAsB;AAEtB,IAAAA,2BAAqC;AACrC,2BAAc,wCAPd;AA6BO,IAAM,aAAS,yBAAwC,CAAC,OAAO,QAAQ;AAC1E,QAAM,EAAE,UAAU,SAAS,WAAW,OAAO,WAAW,aAAa,GAAG,KAAK,IAAI;AACjF,QAAM,EAAE,YAAY,aAAa,YAAY,YAAY,GAAG,iBAAiB,IAAI,WAAW,CAAC;AAC7F,QAAM,UAAM,qBAAuB,IAAI;AACvC,QAAM,UAAM,qBAAyB,IAAI;AAEzC,oCAAgB,MAAM;AAClB,QAAI,UAAU,wBAAAC,QAAU,KAAK,IAAI,SAAU,gBAAgB;AAC3D,WAAO,MAAM,IAAI,SAAS,QAAQ;AAAA,EACtC,GAAG,CAAC,CAAC;AAEL,wCAAoB,KAAK,MAAM,IAAI,SAAU,CAAC,CAAC;AAE/C,wCAAoB,WAAW,MAAM,IAAI,SAAU,CAAC,CAAC;AAErD,8BAAU,MAAM;AACZ,QAAI,CAAC;AAAa;AAClB,QAAI,SAAS,YAAY,WAAW;AACpC,WAAO,MAAM,IAAI,SAAS,eAAe,WAAW;AAAA,EACxD,GAAG,CAAC,WAAW,CAAC;AAEhB,SACI;AAAA,IAAC;AAAA;AAAA,MACG,KAAK;AAAA,MACL,eAAW;AAAA,QACP;AAAA;AAAA,0BAEU,eAAe,SAAY,gCAAgC;AAAA,0BAC3D,eAAe,SAAY,0CAA0C;AAAA;AAAA;AAAA;AAAA,0BAIrE,eAAe,SAAY,gCAAgC;AAAA,0BAC3D,gBAAgB,SAAY,wCAAwC;AAAA,0BACpE,eAAe,SAAY,0CAA0C;AAAA;AAAA;AAAA;AAAA,0BAIrE,eAAe,SAAY,+BAA+B;AAAA,0BAC1D,eAAe,SAAY,0CAA0C;AAAA;AAAA;AAAA;AAAA,0BAIrE,eAAe,SAAY,+BAA+B;AAAA,0BAC1D,gBAAgB,SAAY,wCAAwC;AAAA,0BACpE,eAAe,SAAY,0CAA0C;AAAA;AAAA;AAAA,QAG/E;AAAA,MACJ;AAAA,MACA,OACI;AAAA,QACI,iBAAiB,OAAO,eAAe,WAAW,GAAG,iBAAiB;AAAA,QACtE,kBAAkB,OAAO,gBAAgB,WAAW,GAAG,kBAAkB;AAAA,QACzE,iBAAiB;AAAA,QACjB,iBAAiB;AAAA,QACjB,GAAG;AAAA,MACP;AAAA,MAEH,GAAG;AAAA;AAAA,IACH;AAAA,EACL;AAER,CAAC;",
+  "sourcesContent": ["\"use client\"\r\n\r\nimport { css } from \"@emotion/css\"\r\nimport { clsx } from \"deepsea-tools\"\r\nimport { CSSProperties, ForwardedRef, forwardRef, HTMLAttributes, useEffect, useImperativeHandle, useLayoutEffect, useRef } from \"react\"\r\nimport Scrollbar from \"smooth-scrollbar\"\r\nimport type { ScrollbarOptions, ScrollListener } from \"smooth-scrollbar/interfaces\"\r\nexport { default as Scrollbar } from \"smooth-scrollbar\"\r\nexport * from \"smooth-scrollbar/interfaces\"\r\n\r\nexport interface ScrollOptions extends Partial<ScrollbarOptions> {\r\n    /** 滑块宽度 */\r\n    thumbWidth?: number | string\r\n    /** 滑块圆角大小 */\r\n    thumbRadius?: number | string\r\n    /** 滑块背景颜色 */\r\n    thumbColor?: string\r\n    /** 滚动条背景颜色 */\r\n    trackColor?: string\r\n}\r\n\r\nexport interface ScrollProps extends HTMLAttributes<HTMLDivElement> {\r\n    /** 滚动的配置 */\r\n    options?: ScrollOptions\r\n    /** 滚动条实例 */\r\n    scrollbar?: ForwardedRef<Scrollbar>\r\n    /** 滚动条滚动事件 */\r\n    onScrollbar?: ScrollListener\r\n}\r\n\r\nexport const Scroll = forwardRef<HTMLDivElement, ScrollProps>((props, ref) => {\r\n    const { children, options, className, style, scrollbar, onScrollbar, ...rest } = props\r\n    const { thumbWidth, thumbRadius, thumbColor, trackColor, ...scrollbarOptions } = options || {}\r\n    const ele = useRef<HTMLDivElement>(null)\r\n    const bar = useRef<Scrollbar | null>(null)\r\n\r\n    useLayoutEffect(() => {\r\n        bar.current = Scrollbar.init(ele.current!, scrollbarOptions)\r\n        return () => bar.current?.destroy()\r\n    }, [])\r\n\r\n    useImperativeHandle(ref, () => ele.current!, [])\r\n\r\n    useImperativeHandle(scrollbar, () => bar.current!, [])\r\n\r\n    useEffect(() => {\r\n        if (!onScrollbar) return\r\n        bar.current?.addListener(onScrollbar)\r\n        return () => bar.current?.removeListener(onScrollbar)\r\n    }, [onScrollbar])\r\n\r\n    return (\r\n        <div\r\n            ref={ele}\r\n            className={clsx(\r\n                css`\r\n                    .scrollbar-track.scrollbar-track-x {\r\n                        ${thumbWidth !== undefined ? \"height: var(--thumb-width);\" : \"\"}\r\n                        ${trackColor !== undefined ? \"background-color: var(--track-color);\" : \"\"}\r\n                    }\r\n\r\n                    .scrollbar-thumb.scrollbar-thumb-x {\r\n                        ${thumbWidth !== undefined ? \"height: var(--thumb-width);\" : \"\"}\r\n                        ${thumbRadius !== undefined ? \"border-radius: var(--thumb-radius);\" : \"\"}\r\n                        ${thumbColor !== undefined ? \"background-color: var(--thumb-color);\" : \"\"}\r\n                    }\r\n\r\n                    .scrollbar-track.scrollbar-track-y {\r\n                        ${thumbWidth !== undefined ? \"width: var(--thumb-width);\" : \"\"}\r\n                        ${trackColor !== undefined ? \"background-color: var(--track-color);\" : \"\"}\r\n                    }\r\n\r\n                    .scrollbar-thumb.scrollbar-thumb-y {\r\n                        ${thumbWidth !== undefined ? \"width: var(--thumb-width);\" : \"\"}\r\n                        ${thumbRadius !== undefined ? \"border-radius: var(--thumb-radius);\" : \"\"}\r\n                        ${thumbColor !== undefined ? \"background-color: var(--thumb-color);\" : \"\"}\r\n                    }\r\n                `,\r\n                className\r\n            )}\r\n            style={\r\n                {\r\n                    \"--thumb-width\": typeof thumbWidth === \"number\" ? `${thumbWidth}px` : thumbWidth,\r\n                    \"--thumb-radius\": typeof thumbRadius === \"number\" ? `${thumbRadius}px` : thumbRadius,\r\n                    \"--thumb-color\": thumbColor,\r\n                    \"--track-color\": trackColor,\r\n                    ...style\r\n                } as CSSProperties\r\n            }\r\n            {...rest}>\r\n            {children}\r\n        </div>\r\n    )\r\n})\r\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,iBAAoB;AACpB,2BAAqB;AACrB,mBAAiI;AACjI,8BAAsB;AAEtB,IAAAA,2BAAqC;AACrC,2BAAc,wCARd;AA8BO,IAAM,aAAS,yBAAwC,CAAC,OAAO,QAAQ;AAC1E,QAAM,EAAE,UAAU,SAAS,WAAW,OAAO,WAAW,aAAa,GAAG,KAAK,IAAI;AACjF,QAAM,EAAE,YAAY,aAAa,YAAY,YAAY,GAAG,iBAAiB,IAAI,WAAW,CAAC;AAC7F,QAAM,UAAM,qBAAuB,IAAI;AACvC,QAAM,UAAM,qBAAyB,IAAI;AAEzC,oCAAgB,MAAM;AAClB,QAAI,UAAU,wBAAAC,QAAU,KAAK,IAAI,SAAU,gBAAgB;AAC3D,WAAO,MAAM,IAAI,SAAS,QAAQ;AAAA,EACtC,GAAG,CAAC,CAAC;AAEL,wCAAoB,KAAK,MAAM,IAAI,SAAU,CAAC,CAAC;AAE/C,wCAAoB,WAAW,MAAM,IAAI,SAAU,CAAC,CAAC;AAErD,8BAAU,MAAM;AACZ,QAAI,CAAC;AAAa;AAClB,QAAI,SAAS,YAAY,WAAW;AACpC,WAAO,MAAM,IAAI,SAAS,eAAe,WAAW;AAAA,EACxD,GAAG,CAAC,WAAW,CAAC;AAEhB,SACI;AAAA,IAAC;AAAA;AAAA,MACG,KAAK;AAAA,MACL,eAAW;AAAA,QACP;AAAA;AAAA,0BAEU,eAAe,SAAY,gCAAgC;AAAA,0BAC3D,eAAe,SAAY,0CAA0C;AAAA;AAAA;AAAA;AAAA,0BAIrE,eAAe,SAAY,gCAAgC;AAAA,0BAC3D,gBAAgB,SAAY,wCAAwC;AAAA,0BACpE,eAAe,SAAY,0CAA0C;AAAA;AAAA;AAAA;AAAA,0BAIrE,eAAe,SAAY,+BAA+B;AAAA,0BAC1D,eAAe,SAAY,0CAA0C;AAAA;AAAA;AAAA;AAAA,0BAIrE,eAAe,SAAY,+BAA+B;AAAA,0BAC1D,gBAAgB,SAAY,wCAAwC;AAAA,0BACpE,eAAe,SAAY,0CAA0C;AAAA;AAAA;AAAA,QAG/E;AAAA,MACJ;AAAA,MACA,OACI;AAAA,QACI,iBAAiB,OAAO,eAAe,WAAW,GAAG,iBAAiB;AAAA,QACtE,kBAAkB,OAAO,gBAAgB,WAAW,GAAG,kBAAkB;AAAA,QACzE,iBAAiB;AAAA,QACjB,iBAAiB;AAAA,QACjB,GAAG;AAAA,MACP;AAAA,MAEH,GAAG;AAAA;AAAA,IACH;AAAA,EACL;AAER,CAAC;",
   "names": ["import_smooth_scrollbar", "Scrollbar"]
 }

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

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

package/dist/cjs/components/SectionRing.js

@@ -0,0 +1,50 @@
+"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/SectionRing.tsx
+var SectionRing_exports = {};
+__export(SectionRing_exports, {
+  SectionRing: () => SectionRing
+});
+module.exports = __toCommonJS(SectionRing_exports);
+var import_deepsea_tools = require("deepsea-tools");
+var SectionRing = (props) => {
+  const { outerRadius: o, innerRadius: i, count: c, angel: a, style, ...rest } = props;
+  const s = Math.PI * 2 / c - a;
+  function arc(radius, startAngle, endAngle, options = {}) {
+    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")`
+      },
+      ...rest
+    }
+  );
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  SectionRing
+});
+//# sourceMappingURL=SectionRing.js.map

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

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

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

@@ -0,0 +1,3 @@
+import { HTMLAttributes } from "react";
+declare const Skeleton: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+export default Skeleton;

package/dist/cjs/components/Skeleton.js

@@ -0,0 +1,60 @@
+"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/Skeleton.tsx
+var Skeleton_exports = {};
+__export(Skeleton_exports, {
+  default: () => Skeleton_default
+});
+module.exports = __toCommonJS(Skeleton_exports);
+var import_css = require("@emotion/css");
+var import_deepsea_tools = require("deepsea-tools");
+var import_react = require("react");
+var Skeleton = (0, import_react.forwardRef)((props) => {
+  const { className, ...rest } = props;
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: (0, import_deepsea_tools.clsx)(
+        import_css.css`
+                    @keyframes shimmer {
+                        0% {
+                            background-position: -400px 0px;
+                        }
+                        100% {
+                            background-position: 400px 0px;
+                        }
+                    }
+
+                    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.067) 8%, rgba(0, 0, 0, 0.133) 18%, rgba(0, 0, 0, 0.067) 33%);
+                    animation-duration: 1s;
+                    animation-fill-mode: forwards;
+                    animation-iteration-count: infinite;
+                    animation-name: shimmer;
+                    animation-timing-function: linear;
+                    background-size: 800px 104px;
+                `,
+        className
+      ),
+      ...rest
+    }
+  );
+});
+var Skeleton_default = Skeleton;
+//# sourceMappingURL=Skeleton.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/Skeleton.tsx"],
+  "sourcesContent": ["\"use client\"\r\n\r\nimport { css } from \"@emotion/css\"\r\nimport { clsx } from \"deepsea-tools\"\r\nimport { forwardRef, HTMLAttributes } from \"react\"\r\n\r\nconst Skeleton = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(props => {\r\n    const { className, ...rest } = props\r\n\r\n    return (\r\n        <div\r\n            className={clsx(\r\n                css`\r\n                    @keyframes shimmer {\r\n                        0% {\r\n                            background-position: -400px 0px;\r\n                        }\r\n                        100% {\r\n                            background-position: 400px 0px;\r\n                        }\r\n                    }\r\n\r\n                    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.067) 8%, rgba(0, 0, 0, 0.133) 18%, rgba(0, 0, 0, 0.067) 33%);\r\n                    animation-duration: 1s;\r\n                    animation-fill-mode: forwards;\r\n                    animation-iteration-count: infinite;\r\n                    animation-name: shimmer;\r\n                    animation-timing-function: linear;\r\n                    background-size: 800px 104px;\r\n                `,\r\n                className\r\n            )}\r\n            {...rest}\r\n        />\r\n    )\r\n})\r\n\r\nexport default Skeleton\r\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,iBAAoB;AACpB,2BAAqB;AACrB,mBAA2C;AAE3C,IAAM,eAAW,yBAA2D,WAAS;AACjF,QAAM,EAAE,WAAW,GAAG,KAAK,IAAI;AAE/B,SACI;AAAA,IAAC;AAAA;AAAA,MACG,eAAW;AAAA,QACP;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAkBA;AAAA,MACJ;AAAA,MACC,GAAG;AAAA;AAAA,EACR;AAER,CAAC;AAED,IAAO,mBAAQ;",
+  "names": []
+}

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

@@ -0,0 +1,10 @@
+import { CSSProperties, FC, HTMLAttributes } from "react";
+export interface TransitionBoxProps extends HTMLAttributes<HTMLDivElement> {
+    containerClassName?: string;
+    containerStyle?: CSSProperties;
+    vertical?: boolean;
+    horizontal?: boolean;
+    time?: number;
+}
+/** 尺寸渐变的组件 */
+export declare const TransitionBox: FC<TransitionBoxProps>;