deepsea-components 5.18.5 → 5.18.6

package/README.md

@@ -1,23 +1,23 @@
-# deepsea-components
-
-[![NPM version](https://img.shields.io/npm/v/deepsea-components.svg?style=flat)](https://npmjs.org/package/deepsea-components)
-[![NPM downloads](http://img.shields.io/npm/dm/deepsea-components.svg?style=flat)](https://npmjs.org/package/deepsea-components)
-
-## Install
-
-```bash
-$ yarn install
-```
-
-```bash
-$ npm run dev
-$ npm run build
-```
-
-## Options
-
-TODO
-
-## LICENSE
-
-MIT
+# deepsea-components
+
+[![NPM version](https://img.shields.io/npm/v/deepsea-components.svg?style=flat)](https://npmjs.org/package/deepsea-components)
+[![NPM downloads](http://img.shields.io/npm/dm/deepsea-components.svg?style=flat)](https://npmjs.org/package/deepsea-components)
+
+## Install
+
+```bash
+$ yarn install
+```
+
+```bash
+$ npm run dev
+$ npm run build
+```
+
+## Options
+
+TODO
+
+## LICENSE
+
+MIT

package/dist/components/AutoFit.d.ts

@@ -1,4 +1,4 @@
-import { HTMLAttributes } from "react";
+import { type HTMLAttributes } from "react";
 export interface AutoFitProps extends HTMLAttributes<HTMLDivElement> {
     /** 设计稿宽度，默认 1920 */
     width?: number;

package/dist/components/AutoScroll.d.ts

@@ -1,5 +1,5 @@
-import { CSSProperties, FC } from "react";
-import { ScrollProps } from "./Scroll";
+import { type CSSProperties, type FC } from "react";
+import { type ScrollProps } from "./Scroll";
 export interface AutoScrollProps extends ScrollProps {
     /** 轮播元素的个数 */
     count: number;

package/dist/components/AutoSizeTextarea.d.ts

@@ -1,4 +1,4 @@
-import { TextareaHTMLAttributes } from "react";
+import { type TextareaHTMLAttributes } from "react";
 /**
  * 自适应高度的文本域
  */

package/dist/components/CircleText.d.ts

@@ -1,4 +1,4 @@
-import { FC, HTMLAttributes } from "react";
+import { type FC, type HTMLAttributes } from "react";
 export interface CircleTextProps extends Omit<HTMLAttributes<HTMLSpanElement>, "children"> {
     /** 每一个方块的宽度 */
     width: number;

package/dist/components/CopyButton.cjs

@@ -34,8 +34,7 @@ var __webpack_require__ = {};
 var __webpack_exports__ = {};
 __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
-    CopyButton: ()=>CopyButton,
-    Event: ()=>external_clipboard_namespaceObject.Event
+    CopyButton: ()=>CopyButton
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const external_react_namespaceObject = require("react");
@@ -69,10 +68,8 @@ const CopyButton = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)(
     });
 });
 exports.CopyButton = __webpack_exports__.CopyButton;
-exports.Event = __webpack_exports__.Event;
 for(var __rspack_i in __webpack_exports__)if (-1 === [
-    "CopyButton",
-    "Event"
+    "CopyButton"
 ].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
 Object.defineProperty(exports, '__esModule', {
     value: true

package/dist/components/CopyButton.d.ts

@@ -1,6 +1,6 @@
-import { ComponentPropsWithoutRef } from "react";
-import { Event } from "clipboard";
-export { Event } from "clipboard";
+import { type ComponentPropsWithoutRef } from "react";
+import { type Event } from "clipboard";
+export type { Event } from "clipboard";
 export type CopyButtonProps = ComponentPropsWithoutRef<"button"> & {
     text?: string;
     onCopySuccess?: (e: Event) => void;

package/dist/components/CopyButton.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
-import clipboard_0, { Event } from "clipboard";
+import clipboard_0 from "clipboard";
 import { useLatest } from "soda-hooks";
 const CopyButton = /*#__PURE__*/ forwardRef((props, ref)=>{
     const { text, onCopySuccess: _onCoptSuccess, onCopyError: _onCopyError, ...rest } = props;
@@ -29,4 +29,4 @@ const CopyButton = /*#__PURE__*/ forwardRef((props, ref)=>{
         "data-clipboard-text": text
     });
 });
-export { CopyButton, Event };
+export { CopyButton };

package/dist/components/DraggableGrid.d.ts

@@ -1,5 +1,5 @@
-import { ComponentProps, CSSProperties, Key, ReactNode } from "react";
-import { DragMoveEvents } from "soda-hooks";
+import { type ComponentProps, type CSSProperties, type Key, type ReactNode } from "react";
+import { type DragMoveEvents } from "soda-hooks";
 export type MustBeReactNode<T> = false extends (T extends ReactNode ? true : false) ? false : true;
 export type MustBeReactKey<T> = false extends (T extends Key ? true : false) ? false : true;
 export type DraggableGridClassName = string | ((status: ContainerStatus) => string);

package/dist/components/Echart.d.ts

@@ -1,6 +1,6 @@
-import { ComponentProps, FC, ReactNode, Ref } from "react";
-import { AngleAxisComponentOption, AriaComponentOption, AxisPointerComponentOption, BarSeriesOption, BoxplotSeriesOption, BrushComponentOption, CalendarComponentOption, CandlestickSeriesOption, ChordSeriesOption, ComposeOption, ContinousVisualMapComponentOption, CustomSeriesOption, DatasetComponentOption, DataZoomComponentOption, ECharts, EChartsInitOpts, EffectScatterSeriesOption, FunnelSeriesOption, GaugeSeriesOption, GeoComponentOption, GraphicComponentOption, GraphSeriesOption, GridComponentOption, HeatmapSeriesOption, InsideDataZoomComponentOption, LegendComponentOption, LineSeriesOption, LinesSeriesOption, MapSeriesOption, MarkAreaComponentOption, MarkLineComponentOption, MarkPointComponentOption, MatrixComponentOption, ParallelSeriesOption, PictorialBarSeriesOption, PiecewiseVisualMapComponentOption, PieSeriesOption, PlainLegendComponentOption, PolarComponentOption, RadarComponentOption, RadarSeriesOption, RadiusAxisComponentOption, SankeySeriesOption, ScatterSeriesOption, ScrollableLegendComponentOption, SeriesOption, SingleAxisComponentOption, SliderDataZoomComponentOption, SunburstSeriesOption, ThemeRiverSeriesOption, ThumbnailComponentOption, TimelineComponentOption, TitleComponentOption, ToolboxComponentOption, TooltipComponentOption, TreemapSeriesOption, TreeSeriesOption, VisualMapComponentOption, XAXisComponentOption, YAXisComponentOption } from "echarts";
-import { ECBasicOption } from "echarts/types/src/util/types.js";
+import { type ComponentProps, type FC, type ReactNode, type Ref } from "react";
+import { type AngleAxisComponentOption, type AriaComponentOption, type AxisPointerComponentOption, type BarSeriesOption, type BoxplotSeriesOption, type BrushComponentOption, type CalendarComponentOption, type CandlestickSeriesOption, type ChordSeriesOption, type ComposeOption, type ContinousVisualMapComponentOption, type CustomSeriesOption, type DatasetComponentOption, type DataZoomComponentOption, type ECharts, type EChartsInitOpts, type EffectScatterSeriesOption, type FunnelSeriesOption, type GaugeSeriesOption, type GeoComponentOption, type GraphicComponentOption, type GraphSeriesOption, type GridComponentOption, type HeatmapSeriesOption, type InsideDataZoomComponentOption, type LegendComponentOption, type LineSeriesOption, type LinesSeriesOption, type MapSeriesOption, type MarkAreaComponentOption, type MarkLineComponentOption, type MarkPointComponentOption, type MatrixComponentOption, type ParallelSeriesOption, type PictorialBarSeriesOption, type PiecewiseVisualMapComponentOption, type PieSeriesOption, type PlainLegendComponentOption, type PolarComponentOption, type RadarComponentOption, type RadarSeriesOption, type RadiusAxisComponentOption, type SankeySeriesOption, type ScatterSeriesOption, type ScrollableLegendComponentOption, type SeriesOption, type SingleAxisComponentOption, type SliderDataZoomComponentOption, type SunburstSeriesOption, type ThemeRiverSeriesOption, type ThumbnailComponentOption, type TimelineComponentOption, type TitleComponentOption, type ToolboxComponentOption, type TooltipComponentOption, type TreemapSeriesOption, type TreeSeriesOption, type VisualMapComponentOption, type XAXisComponentOption, type YAXisComponentOption } from "echarts";
+import type { ECBasicOption } from "echarts/types/src/util/types.js";
 export type ChartOption<T extends SeriesOption = never> = ComposeOption<T | DatasetComponentOption | GridComponentOption | LegendComponentOption | TitleComponentOption | TooltipComponentOption | AxisPointerComponentOption | GeoComponentOption | MarkLineComponentOption | MarkPointComponentOption | MarkAreaComponentOption | DataZoomComponentOption | AriaComponentOption | BrushComponentOption | PolarComponentOption | RadarComponentOption | XAXisComponentOption | YAXisComponentOption | MatrixComponentOption | GraphicComponentOption | ToolboxComponentOption | CalendarComponentOption | TimelineComponentOption | AngleAxisComponentOption | RadiusAxisComponentOption | SingleAxisComponentOption | VisualMapComponentOption | ThumbnailComponentOption | PlainLegendComponentOption | InsideDataZoomComponentOption | SliderDataZoomComponentOption | PiecewiseVisualMapComponentOption | ContinousVisualMapComponentOption | ScrollableLegendComponentOption>;
 export type BarOption = ChartOption<BarSeriesOption>;
 export type BoxplotOption = ChartOption<BoxplotSeriesOption>;

package/dist/components/Flow.d.ts

@@ -1,4 +1,4 @@
-import { CSSProperties, HTMLAttributes, Key, ReactNode, Ref } from "react";
+import { type CSSProperties, type HTMLAttributes, type Key, type ReactNode, type Ref } from "react";
 export interface FlowSizeData {
     /** 容器宽度 */
     width: number;

package/dist/components/FormLabel.d.ts

@@ -1,4 +1,4 @@
-import { ComponentPropsWithoutRef, FC, ReactNode } from "react";
+import { type ComponentPropsWithoutRef, type FC, type ReactNode } from "react";
 export interface FormLabelConfig {
     /**
      * Label 的宽度.

package/dist/components/HlsPlayer.d.ts

@@ -1,4 +1,4 @@
-import { ComponentProps, FC } from "react";
+import { type ComponentProps, type FC } from "react";
 export interface HlsPlayerProps extends Omit<ComponentProps<"video">, "src" | "children"> {
     src: string;
 }

package/dist/components/IconFileType.d.ts

@@ -1,4 +1,4 @@
-import { ComponentProps, FC } from "react";
+import type { ComponentProps, FC } from "react";
 export declare const IconFileTypeBase: FC<ComponentProps<"svg">>;
 export interface IconFileTypePagePropsBase {
     /**

package/dist/components/InfiniteScroll.d.ts

@@ -1,4 +1,4 @@
-import { ComponentPropsWithoutRef, CSSProperties } from "react";
+import { type ComponentPropsWithoutRef, type CSSProperties } from "react";
 export type InfiniteScrollProps = ComponentPropsWithoutRef<"div"> & {
     /**
      * 滚动的方向

package/dist/components/InputFile.d.ts

@@ -1,4 +1,4 @@
-import { ComponentProps, ReactNode } from "react";
+import { type ComponentProps, type ReactNode } from "react";
 export interface InputFileDataTypeMap {
     base64: string;
     text: string;

package/dist/components/InputFileButton.d.ts

@@ -1,5 +1,5 @@
-import { ComponentProps, JSX, JSXElementConstructor } from "react";
-import { InputFileBaseProps, InputFileDataType, InputFileExtraProps } from "./InputFile";
+import { type ComponentProps, type JSX, type JSXElementConstructor } from "react";
+import { type InputFileBaseProps, type InputFileDataType, type InputFileExtraProps } from "./InputFile";
 export type InputFileButtonProps<Multiple extends boolean = false, Type extends InputFileDataType = "file", AS extends keyof JSX.IntrinsicElements | JSXElementConstructor<any> = "button"> = Omit<ComponentProps<AS>, "as" | "type" | "disabled"> & InputFileExtraProps<Multiple, Type> & {
     disabled?: boolean;
     inputProps?: Omit<InputFileBaseProps, "accept">;

package/dist/components/LoopSwiper.d.ts

@@ -1,4 +1,4 @@
-import { ComponentProps, FC } from "react";
+import { type ComponentProps, type FC } from "react";
 export interface LoopSwiperClassNames {
     root?: string;
     container?: string;

package/dist/components/ReadExcel.d.ts

@@ -1,4 +1,4 @@
-import { ReadSheet, ReadSheetProps } from "./ReadSheet";
+import { type ReadSheetProps, ReadSheet } from "./ReadSheet";
 /**
  * @deprecated 请使用 ReadSheetProps 代替
  */

package/dist/components/ReadSheet.d.ts

@@ -1,5 +1,5 @@
-import { WorkBookData, WorkSheetData } from "deepsea-tools";
-import { InputFileProps } from "./InputFile";
+import { type WorkBookData, type WorkSheetData } from "deepsea-tools";
+import { type InputFileProps } from "./InputFile";
 export interface ReadSheetProps<Sheet = WorkSheetData> extends Omit<InputFileProps<false, "arrayBuffer">, "multiple" | "accept" | "type" | "onValueChange"> {
     onValueChange?: (data: WorkBookData<Sheet>) => void;
 }

package/dist/components/Ring.d.ts

@@ -1,4 +1,4 @@
-import { HTMLAttributes } from "react";
+import { type HTMLAttributes } from "react";
 export interface RingProps extends HTMLAttributes<HTMLDivElement> {
     outerWidth: number;
     innerWidth: number;

package/dist/components/RtspPlayer.d.ts

@@ -1,4 +1,4 @@
-import { ComponentProps, FC } from "react";
+import { type ComponentProps, type FC } from "react";
 export interface RtspPlayerProps extends Omit<ComponentProps<"video">, "src" | "children"> {
     src: string;
     user?: string;

package/dist/components/Scroll.d.ts

@@ -1,4 +1,4 @@
-import { ComponentProps, CSSProperties, FC, ForwardedRef } from "react";
+import { type ComponentProps, type CSSProperties, type FC, type ForwardedRef } from "react";
 import Scrollbar from "smooth-scrollbar";
 import type { ScrollbarOptions, ScrollListener } from "smooth-scrollbar/interfaces";
 export { default as Scrollbar } from "smooth-scrollbar";

package/dist/components/ScrollMask.d.ts

@@ -1,4 +1,4 @@
-import { ComponentProps, CSSProperties, FC } from "react";
+import { type ComponentProps, type CSSProperties, type FC } from "react";
 export type ScrollMaskPosition = "top" | "bottom" | "left" | "right";
 export interface ScrollMaskProps extends Omit<ComponentProps<"div">, "children"> {
     position?: ScrollMaskPosition;

package/dist/components/SectionRing.d.ts

@@ -1,4 +1,4 @@
-import { HTMLAttributes } from "react";
+import { type HTMLAttributes } from "react";
 export interface SectionRingProps extends HTMLAttributes<HTMLDivElement> {
     outerRadius: number;
     innerRadius: number;

package/dist/components/Skeleton.d.ts

@@ -1,4 +1,4 @@
-import { HTMLAttributes } from "react";
+import { type HTMLAttributes } from "react";
 export interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
     loading?: boolean;
 }

package/dist/components/Title.d.ts

@@ -1,2 +1,2 @@
-import { ComponentProps, FC } from "react";
+import { type ComponentProps, type FC } from "react";
 export declare const Title: FC<ComponentProps<"title">>;

package/dist/components/TransitionBox.d.ts

@@ -1,4 +1,4 @@
-import { CSSProperties, FC, HTMLAttributes } from "react";
+import { type CSSProperties, type FC, type HTMLAttributes } from "react";
 export interface TransitionBoxProps extends HTMLAttributes<HTMLDivElement> {
     containerClassName?: string;
     containerStyle?: CSSProperties;

package/dist/components/TransitionNum.d.ts

@@ -1,4 +1,4 @@
-import { ForwardedRef, HTMLAttributes } from "react";
+import { type ForwardedRef, type HTMLAttributes } from "react";
 export interface TransitionNumProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
     /** 当前数字 */
     children: number;

package/dist/components/Trapezium.d.ts

@@ -1,4 +1,4 @@
-import { HTMLAttributes } from "react";
+import { type HTMLAttributes } from "react";
 export interface TrapeziumProps extends HTMLAttributes<HTMLDivElement> {
     top: number;
     bottom: number;

package/dist/components/Unify.d.ts

@@ -1,4 +1,4 @@
-import { ComponentProps, CSSProperties, FC, JSX, JSXElementConstructor, ReactNode } from "react";
+import { type ComponentProps, type CSSProperties, type FC, type JSX, type JSXElementConstructor, type ReactNode } from "react";
 export interface UnifyConfig {
     className?: string;
     style?: CSSProperties;

package/dist/components/WriteExcel.d.ts

@@ -1,4 +1,4 @@
-import { WriteSheet, WriteSheetProps } from "./WriteSheet";
+import { type WriteSheetProps, WriteSheet } from "./WriteSheet";
 /**
  * @deprecated 请使用 WriteSheetProps 代替
  */

package/dist/components/WriteSheet.d.ts

@@ -1,5 +1,5 @@
-import { ComponentProps, JSX, JSXElementConstructor } from "react";
-import { WriteSheetParams } from "deepsea-tools";
+import { type ComponentProps, type JSX, type JSXElementConstructor } from "react";
+import { type WriteSheetParams } from "deepsea-tools";
 export type WriteSheetProps<AS extends keyof JSX.IntrinsicElements | JSXElementConstructor<any> = "button"> = Omit<ComponentProps<AS>, "as" | "excel"> & {
     as?: AS;
     excel?: WriteSheetParams;

package/dist/utils/index.d.ts

@@ -1,4 +1,4 @@
-import { CSSProperties } from "react";
+import type { CSSProperties } from "react";
 export type CSSVariableName = `--${string}`;
 export type CSSVariableValue = string | number | undefined;
 export interface StyleWithCSSVariable extends CSSProperties {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "deepsea-components",
-  "version": "5.18.5",
+  "version": "5.18.6",
   "description": "格数科技自用组件库",
   "type": "module",
   "exports": {
@@ -37,19 +37,19 @@
   "dependencies": {
     "@emotion/css": "^11.13.5",
     "clipboard": "^2.0.11",
-    "echarts": "^6.0.0",
+    "echarts": "^6.1.0",
     "hls.js": "^1.6.13",
     "smooth-scrollbar": "^8.8.4",
     "stable-hash": "^0.0.6",
-    "soda-hooks": "6.17.1",
-    "deepsea-tools": "5.48.0"
+    "deepsea-tools": "5.48.1",
+    "soda-hooks": "6.17.2"
   },
   "devDependencies": {
-    "typescript": ">=5.8.3"
+    "typescript": "^6.0.3"
   },
   "peerDependencies": {
     "@types/node": "^24.12.4",
-    "@types/react": ">=19.2.7",
+    "@types/react": "^19.2.15",
     "@types/react-dom": ">=19.2.3",
     "react": ">=19.2.3",
     "react-dom": ">=19.2.3"

package/src/components/AutoFit.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { forwardRef, HTMLAttributes, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState } from "react"
+import { type HTMLAttributes, forwardRef, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState } from "react"
 
 import { css } from "@emotion/css"
 import { clsx } from "deepsea-tools"

package/src/components/AutoScroll.tsx

@@ -1,16 +1,16 @@
 "use client"
 
-import { CSSProperties, FC, MouseEvent as ReactMouseEvent, useEffect, useEffectEvent, useImperativeHandle, useRef } from "react"
+import { type CSSProperties, type FC, type MouseEvent as ReactMouseEvent, useEffect, useEffectEvent, useImperativeHandle, useRef } from "react"
 
 import { css } from "@emotion/css"
 import { clsx, getArray } from "deepsea-tools"
 import Scrollbar from "smooth-scrollbar"
-import { ScrollStatus } from "smooth-scrollbar/interfaces/scrollbar"
+import type { ScrollStatus } from "smooth-scrollbar/interfaces/scrollbar"
 import { useSize } from "soda-hooks"
 
 import { px, transformCSSVariable } from "@/utils"
 
-import { Scroll, ScrollProps } from "./Scroll"
+import { type ScrollProps, Scroll } from "./Scroll"
 
 export interface AutoScrollProps extends ScrollProps {
     /** 轮播元素的个数 */

package/src/components/AutoSizeTextarea.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { forwardRef, TextareaHTMLAttributes, useImperativeHandle, useLayoutEffect, useRef, useState } from "react"
+import { type TextareaHTMLAttributes, forwardRef, useImperativeHandle, useLayoutEffect, useRef, useState } from "react"
 
 import { css } from "@emotion/css"
 import { clsx } from "deepsea-tools"

package/src/components/CircleText.tsx

@@ -1,81 +1,81 @@
-"use client"
-
-import { FC, Fragment, HTMLAttributes } from "react"
-
-export interface CircleTextProps extends Omit<HTMLAttributes<HTMLSpanElement>, "children"> {
-    /** 每一个方块的宽度 */
-    width: number
-    /** 每一个方块的高度 */
-    height: number
-    /** 圆弧的半径，不包含方块的高度 */
-    radius: number
-    /** 开始旋转的弧度，逆时针增加，0 为 x 轴方向 */
-    startAngel?: number
-    /** 每一个方块之间间隔的弧度 */
-    gapAngel?: number
-    /** 文字对齐的方式，默认居中 */
-    align?: "left" | "center" | "right"
-    /** 文字朝向圆心还是外侧，默认外侧 */
-    direction?: "inner" | "outer"
-    /** 是否反转文字顺序 */
-    reverse?: boolean
-    /** 分割文字的方法 */
-    separator?: string | RegExp | ((text: string) => string[])
-    /** 显示的文字 */
-    children: string
-}
-
-/** 环形文字 */
-export const CircleText: FC<CircleTextProps> = props => {
-    const {
-        width,
-        height,
-        radius,
-        startAngel = 0,
-        gapAngel = 0,
-        align = "center",
-        style,
-        direction = "outer",
-        reverse = false,
-        separator,
-        children,
-        ...rest
-    } = props
-    const unitAngle = Math.atan(width / 2 / radius) * 2
-    const totalAngle = (unitAngle + gapAngel) * children.length - gapAngel
-    const offsetAngle = align === "left" ? 0 : align === "right" ? totalAngle : totalAngle / 2
-
-    function getTransform(idx: number) {
-        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 (
-        <Fragment>
-            {words.map((w, idx) => (
-                <span
-                    key={idx}
-                    style={{
-                        position: "absolute",
-                        ...style,
-                        transform: getTransform(idx),
-                        textAlign: "center",
-                        width,
-                        lineHeight: `${height}px`,
-                        height: height,
-                    }}
-                    {...rest}
-                >
-                    {w}
-                </span>
-            ))}
-        </Fragment>
-    )
-}
+"use client"
+
+import { type FC, type HTMLAttributes, Fragment } from "react"
+
+export interface CircleTextProps extends Omit<HTMLAttributes<HTMLSpanElement>, "children"> {
+    /** 每一个方块的宽度 */
+    width: number
+    /** 每一个方块的高度 */
+    height: number
+    /** 圆弧的半径，不包含方块的高度 */
+    radius: number
+    /** 开始旋转的弧度，逆时针增加，0 为 x 轴方向 */
+    startAngel?: number
+    /** 每一个方块之间间隔的弧度 */
+    gapAngel?: number
+    /** 文字对齐的方式，默认居中 */
+    align?: "left" | "center" | "right"
+    /** 文字朝向圆心还是外侧，默认外侧 */
+    direction?: "inner" | "outer"
+    /** 是否反转文字顺序 */
+    reverse?: boolean
+    /** 分割文字的方法 */
+    separator?: string | RegExp | ((text: string) => string[])
+    /** 显示的文字 */
+    children: string
+}
+
+/** 环形文字 */
+export const CircleText: FC<CircleTextProps> = props => {
+    const {
+        width,
+        height,
+        radius,
+        startAngel = 0,
+        gapAngel = 0,
+        align = "center",
+        style,
+        direction = "outer",
+        reverse = false,
+        separator,
+        children,
+        ...rest
+    } = props
+    const unitAngle = Math.atan(width / 2 / radius) * 2
+    const totalAngle = (unitAngle + gapAngel) * children.length - gapAngel
+    const offsetAngle = align === "left" ? 0 : align === "right" ? totalAngle : totalAngle / 2
+
+    function getTransform(idx: number) {
+        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 (
+        <Fragment>
+            {words.map((w, idx) => (
+                <span
+                    key={idx}
+                    style={{
+                        position: "absolute",
+                        ...style,
+                        transform: getTransform(idx),
+                        textAlign: "center",
+                        width,
+                        lineHeight: `${height}px`,
+                        height: height,
+                    }}
+                    {...rest}
+                >
+                    {w}
+                </span>
+            ))}
+        </Fragment>
+    )
+}

package/src/components/CopyButton.tsx

@@ -2,12 +2,12 @@
 
 /* eslint-disable no-restricted-syntax */
 
-import { ComponentPropsWithoutRef, forwardRef, useEffect, useImperativeHandle, useRef } from "react"
+import { type ComponentPropsWithoutRef, forwardRef, useEffect, useImperativeHandle, useRef } from "react"
 
-import ClipboardJS, { Event } from "clipboard"
+import ClipboardJS, { type Event } from "clipboard"
 import { useLatest } from "soda-hooks"
 
-export { Event } from "clipboard"
+export type { Event } from "clipboard"
 
 export type CopyButtonProps = ComponentPropsWithoutRef<"button"> & {
     text?: string
@@ -28,6 +28,7 @@ export const CopyButton = forwardRef<HTMLButtonElement, CopyButtonProps>((props,
         const clipboard = new ClipboardJS(ele.current!)
         clipboard.on("success", event => onCopySuccess.current?.(event))
         clipboard.on("error", event => onCopyError.current?.(event))
+
         return () => clipboard.destroy()
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [])

package/src/components/DraggableGrid.tsx

@@ -1,9 +1,9 @@
 /* eslint-disable no-restricted-syntax */
 
-import { ComponentProps, CSSProperties, Key, ReactNode, useEffect, useMemo, useRef, useState } from "react"
+import { type ComponentProps, type CSSProperties, type Key, type ReactNode, useEffect, useMemo, useRef, useState } from "react"
 
 import { clsx, getArray, isNullable } from "deepsea-tools"
-import { DragMoveEvent, DragMoveEvents, useDragMove } from "soda-hooks"
+import { type DragMoveEvent, type DragMoveEvents, useDragMove } from "soda-hooks"
 
 import styles from "./DraggableGrid.module.css"
 
@@ -349,6 +349,7 @@ export function DraggableGrid<T, K extends Key = T extends Key ? T : never>({
             setKeyToOrder(newOrderMap)
             onOrderMapChange?.(newOrderMap)
             const newRenderKeys = new Set(newOrderMap.keys())
+
             // eslint-disable-next-line react-hooks/immutability
             setRenderKeys(prev => prev.intersection(newRenderKeys).union(newRenderKeys.difference(prev)))
         }