deepsea-components 5.17.4 → 5.17.6

package/dist/components/LoopSwiper.js

@@ -3,7 +3,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useImperativeHandle, useRef, useState } from "react";
 import { css } from "@emotion/css";
 import { clsx } from "deepsea-tools";
-const LoopSwiper = ({ ref, className, classNames: { root: rootClassName, container: containerClassName, mirror: mirrorClassName } = {}, children, direction, period, reverse, gap = 0, ...rest })=>{
+const LoopSwiper = ({ ref, className, classNames: { root: rootClassName, container: containerClassName, mirror: mirrorClassName } = {}, children, direction, period, reverse, pauseOnHover = true, gap = 0, ...rest })=>{
     const wrapper = useRef(null);
     const container = useRef(null);
     const [swiper, setSwiper] = useState(false);
@@ -50,7 +50,7 @@ const LoopSwiper = ({ ref, className, classNames: { root: rootClassName, contain
                             transform: translateX(0);
                         }
                         to {
-                            transform: translateX(-100%);
+                            transform: translateX(calc(-100% - ${gap}px));
                         }
                     }
 
@@ -59,7 +59,7 @@ const LoopSwiper = ({ ref, className, classNames: { root: rootClassName, contain
                             transform: translateX(0);
                         }
                         to {
-                            transform: translateX(100%);
+                            transform: translateX(calc(100% + ${gap}px));
                         }
                     }
 
@@ -68,7 +68,7 @@ const LoopSwiper = ({ ref, className, classNames: { root: rootClassName, contain
                             transform: translateY(0);
                         }
                         to {
-                            transform: translateY(-100%);
+                            transform: translateY(calc(-100% - ${gap}px));
                         }
                     }
 
@@ -77,9 +77,13 @@ const LoopSwiper = ({ ref, className, classNames: { root: rootClassName, contain
                             transform: translateY(0);
                         }
                         to {
-                            transform: translateY(100%);
+                            transform: translateY(calc(100% + ${gap}px));
                         }
                     }
+
+                    ${pauseOnHover ? `&:hover > * {
+                        animation-play-state: paused;
+                    }` : ""}
                 `, className, rootClassName),
         ...rest,
         children: [

package/dist/components/ReadSheet.d.ts

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

package/dist/components/Scroll.cjs

@@ -71,9 +71,9 @@ var __webpack_exports__ = {};
         Scrollbar: ()=>smooth_scrollbar__WEBPACK_IMPORTED_MODULE_4___default.a
     });
     var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("react/jsx-runtime");
-    var _emotion_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__("@emotion/css");
-    var deepsea_tools__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__("deepsea-tools");
-    var react__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__("react");
+    var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__("react");
+    var _emotion_css__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__("@emotion/css");
+    var deepsea_tools__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__("deepsea-tools");
     var smooth_scrollbar__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__("smooth-scrollbar");
     var smooth_scrollbar__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/ __webpack_require__.n(smooth_scrollbar__WEBPACK_IMPORTED_MODULE_4__);
     var _utils__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__("@/utils");
@@ -87,21 +87,21 @@ var __webpack_exports__ = {};
         return smooth_scrollbar_interfaces__WEBPACK_IMPORTED_MODULE_6__[key];
     }).bind(0, __WEBPACK_IMPORT_KEY__);
     __webpack_require__.d(__webpack_exports__, __WEBPACK_REEXPORT_OBJECT__);
-    const Scroll = /*#__PURE__*/ (0, react__WEBPACK_IMPORTED_MODULE_3__.forwardRef)((props, ref)=>{
+    const Scroll = /*#__PURE__*/ (0, react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)((props, ref)=>{
         const { children, options, className, style, scrollbar, onScrollbar, ...rest } = props;
         const { thumbWidth, thumbRadius, thumbColor, trackColor, ...scrollbarOptions } = options || {};
-        const ele = (0, react__WEBPACK_IMPORTED_MODULE_3__.useRef)(null);
-        const bar = (0, react__WEBPACK_IMPORTED_MODULE_3__.useRef)(null);
-        (0, react__WEBPACK_IMPORTED_MODULE_3__.useLayoutEffect)(()=>{
+        const ele = (0, react__WEBPACK_IMPORTED_MODULE_1__.useRef)(null);
+        const bar = (0, react__WEBPACK_IMPORTED_MODULE_1__.useRef)(null);
+        (0, react__WEBPACK_IMPORTED_MODULE_1__.useLayoutEffect)(()=>{
             bar.current = smooth_scrollbar__WEBPACK_IMPORTED_MODULE_4___default().init(ele.current, scrollbarOptions);
             return ()=>{
                 var _bar_current;
                 return null == (_bar_current = bar.current) ? void 0 : _bar_current.destroy();
             };
         }, []);
-        (0, react__WEBPACK_IMPORTED_MODULE_3__.useImperativeHandle)(ref, ()=>ele.current, []);
-        (0, react__WEBPACK_IMPORTED_MODULE_3__.useImperativeHandle)(scrollbar, ()=>bar.current, []);
-        (0, react__WEBPACK_IMPORTED_MODULE_3__.useEffect)(()=>{
+        (0, react__WEBPACK_IMPORTED_MODULE_1__.useImperativeHandle)(ref, ()=>ele.current, []);
+        (0, react__WEBPACK_IMPORTED_MODULE_1__.useImperativeHandle)(scrollbar, ()=>bar.current, []);
+        (0, react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(()=>{
             var _bar_current;
             if (!onScrollbar) return;
             null == (_bar_current = bar.current) || _bar_current.addListener(onScrollbar);
@@ -114,7 +114,7 @@ var __webpack_exports__ = {};
         ]);
         return /*#__PURE__*/ (0, react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", {
             ref: ele,
-            className: (0, deepsea_tools__WEBPACK_IMPORTED_MODULE_2__.clsx)((0, _emotion_css__WEBPACK_IMPORTED_MODULE_1__.css)`
+            className: (0, deepsea_tools__WEBPACK_IMPORTED_MODULE_3__.clsx)((0, _emotion_css__WEBPACK_IMPORTED_MODULE_2__.css)`
                     .scrollbar-track.scrollbar-track-x {
                         ${void 0 !== thumbWidth ? "height: var(--thumb-width);" : ""} ${void 0 !== trackColor ? "background-color: var(--track-color);" : ""}
                     }

package/dist/components/Scroll.js

@@ -1,8 +1,8 @@
 "use client"
 import { jsx } from "react/jsx-runtime";
+import { forwardRef, useEffect, useImperativeHandle, useLayoutEffect, useRef } from "react";
 import { css } from "@emotion/css";
 import { clsx } from "deepsea-tools";
-import { forwardRef, useEffect, useImperativeHandle, useLayoutEffect, useRef } from "react";
 import smooth_scrollbar from "smooth-scrollbar";
 import { px, transformCSSVariable } from "../utils/index.js";
 export * from "smooth-scrollbar/interfaces";

package/dist/components/ScrollMask.cjs

@@ -36,8 +36,8 @@ __webpack_require__.d(__webpack_exports__, {
     ScrollMask: ()=>ScrollMask
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
-const external_deepsea_tools_namespaceObject = require("deepsea-tools");
 const external_react_namespaceObject = require("react");
+const external_deepsea_tools_namespaceObject = require("deepsea-tools");
 const external_soda_hooks_namespaceObject = require("soda-hooks");
 const external_ScrollMask_module_cjs_namespaceObject = require("./ScrollMask.module.cjs");
 var external_ScrollMask_module_cjs_default = /*#__PURE__*/ __webpack_require__.n(external_ScrollMask_module_cjs_namespaceObject);

package/dist/components/ScrollMask.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
-import { clsx, isNonNullable } from "deepsea-tools";
 import { useRef } from "react";
+import { clsx, isNonNullable } from "deepsea-tools";
 import { useSize } from "soda-hooks";
 import ScrollMask_module from "./ScrollMask.module.js";
 const ScrollMask = ({ className, style, position = "top", size = 8, from = "rgba(0, 0, 0, 0.1)", to = "rgba(0, 0, 0, 0)", contentClassName, contentStyle, showRadian = false, ...rest })=>{

package/dist/components/SectionRing.cjs

@@ -28,8 +28,8 @@ __webpack_require__.d(__webpack_exports__, {
     SectionRing: ()=>SectionRing
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
-const external_deepsea_tools_namespaceObject = require("deepsea-tools");
 const external_react_namespaceObject = require("react");
+const external_deepsea_tools_namespaceObject = require("deepsea-tools");
 const SectionRing = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)((props, ref)=>{
     const { outerRadius: o, innerRadius: i, count: c, angel: a, style, ...rest } = props;
     const s = 2 * Math.PI / c - a;

package/dist/components/SectionRing.js

@@ -1,7 +1,7 @@
 "use client"
 import { jsx } from "react/jsx-runtime";
-import { drawArc } from "deepsea-tools";
 import { forwardRef } from "react";
+import { drawArc } from "deepsea-tools";
 const SectionRing = /*#__PURE__*/ forwardRef((props, ref)=>{
     const { outerRadius: o, innerRadius: i, count: c, angel: a, style, ...rest } = props;
     const s = 2 * Math.PI / c - a;

package/dist/components/Skeleton.cjs

@@ -28,9 +28,9 @@ __webpack_require__.d(__webpack_exports__, {
     Skeleton: ()=>Skeleton
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_react_namespaceObject = require("react");
 const css_namespaceObject = require("@emotion/css");
 const external_deepsea_tools_namespaceObject = require("deepsea-tools");
-const external_react_namespaceObject = require("react");
 const Skeleton = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)((props, ref)=>{
     const { className, children, loading = null == children, ...rest } = props;
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {

package/dist/components/Skeleton.js

@@ -1,8 +1,8 @@
 "use client"
 import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
 import { css } from "@emotion/css";
 import { clsx } from "deepsea-tools";
-import { forwardRef } from "react";
 const Skeleton = /*#__PURE__*/ forwardRef((props, ref)=>{
     const { className, children, loading = null == children, ...rest } = props;
     return /*#__PURE__*/ jsx("div", {

package/dist/components/TransitionNum.cjs

@@ -28,8 +28,8 @@ __webpack_require__.d(__webpack_exports__, {
     TransitionNum: ()=>TransitionNum
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
-const external_deepsea_tools_namespaceObject = require("deepsea-tools");
 const external_react_namespaceObject = require("react");
+const external_deepsea_tools_namespaceObject = require("deepsea-tools");
 const TransitionNum = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)((props, ref)=>{
     const { children: num, period, numToStr, ins, ...rest } = props;
     if (!Number.isInteger(num) || !Number.isInteger(period) || period <= 0) throw new RangeError("目标数字必须是整数，周期必须是正整数");

package/dist/components/TransitionNum.js

@@ -1,7 +1,7 @@
 "use client"
 import { jsx } from "react/jsx-runtime";
-import { setFrameInterval } from "deepsea-tools";
 import { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
+import { setFrameInterval } from "deepsea-tools";
 const TransitionNum = /*#__PURE__*/ forwardRef((props, ref)=>{
     const { children: num, period, numToStr, ins, ...rest } = props;
     if (!Number.isInteger(num) || !Number.isInteger(period) || period <= 0) throw new RangeError("目标数字必须是整数，周期必须是正整数");

package/dist/components/Trapezium.cjs

@@ -28,9 +28,9 @@ __webpack_require__.d(__webpack_exports__, {
     Trapezium: ()=>Trapezium
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_react_namespaceObject = require("react");
 const css_namespaceObject = require("@emotion/css");
 const external_deepsea_tools_namespaceObject = require("deepsea-tools");
-const external_react_namespaceObject = require("react");
 const index_cjs_namespaceObject = require("../utils/index.cjs");
 const Trapezium = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)((props, ref)=>{
     const { top, bottom, height, borderRadius, className, style, ...rest } = props;

package/dist/components/Trapezium.js

@@ -1,8 +1,8 @@
 "use client"
 import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
 import { css } from "@emotion/css";
 import { clsx } from "deepsea-tools";
-import { forwardRef } from "react";
 import { px, transformCSSVariable } from "../utils/index.js";
 const Trapezium = /*#__PURE__*/ forwardRef((props, ref)=>{
     const { top, bottom, height, borderRadius, className, style, ...rest } = props;

package/dist/components/Unify.cjs

@@ -29,8 +29,8 @@ __webpack_require__.d(__webpack_exports__, {
     UnifyConfigProvider: ()=>UnifyConfigProvider
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
-const external_deepsea_tools_namespaceObject = require("deepsea-tools");
 const external_react_namespaceObject = require("react");
+const external_deepsea_tools_namespaceObject = require("deepsea-tools");
 const UnifyConfigContext = /*#__PURE__*/ (0, external_react_namespaceObject.createContext)({});
 const UnifyConfigProvider = ({ className, style, children })=>{
     const { className: _className, style: _style } = (0, external_react_namespaceObject.useContext)(UnifyConfigContext);

package/dist/components/Unify.js

@@ -1,7 +1,7 @@
 "use client"
 import { jsx } from "react/jsx-runtime";
-import { clsx } from "deepsea-tools";
 import { createContext, createElement, useContext } from "react";
+import { clsx } from "deepsea-tools";
 const UnifyConfigContext = /*#__PURE__*/ createContext({});
 const UnifyConfigProvider = ({ className, style, children })=>{
     const { className: _className, style: _style } = useContext(UnifyConfigContext);

package/dist/components/WriteSheet.cjs

@@ -27,8 +27,8 @@ __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
     WriteSheet: ()=>WriteSheet
 });
-const external_deepsea_tools_namespaceObject = require("deepsea-tools");
 const external_react_namespaceObject = require("react");
+const external_deepsea_tools_namespaceObject = require("deepsea-tools");
 function WriteSheet(props) {
     const { as, excel, onClick: _onClick, ...rest } = props;
     function onClick(e) {

package/dist/components/WriteSheet.d.ts

@@ -1,5 +1,5 @@
-import { WriteSheetParams } from "deepsea-tools";
 import { ComponentProps, JSX, JSXElementConstructor } from "react";
+import { 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/components/WriteSheet.js

@@ -1,6 +1,6 @@
 "use client"
-import { writeSheet } from "deepsea-tools";
 import { createElement } from "react";
+import { writeSheet } from "deepsea-tools";
 function WriteSheet(props) {
     const { as, excel, onClick: _onClick, ...rest } = props;
     function onClick(e) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "deepsea-components",
-  "version": "5.17.4",
+  "version": "5.17.6",
   "description": "格数科技自用组件库",
   "type": "module",
   "exports": {
@@ -40,8 +40,9 @@
     "echarts": "^6.0.0",
     "hls.js": "^1.6.13",
     "smooth-scrollbar": "^8.8.4",
-    "soda-hooks": "6.15.2",
-    "deepsea-tools": "5.42.4"
+    "stable-hash": "^0.0.6",
+    "deepsea-tools": "5.42.4",
+    "soda-hooks": "6.15.2"
   },
   "devDependencies": {
     "typescript": "^5.9.3"

package/src/components/AutoFit.tsx

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

package/src/components/AutoScroll.tsx

@@ -1,8 +1,8 @@
 "use client"
 
+import { CSSProperties, MouseEvent as ReactMouseEvent, forwardRef, useEffect, useImperativeHandle, useRef } from "react"
 import { css } from "@emotion/css"
 import { clsx, getArray } from "deepsea-tools"
-import { CSSProperties, MouseEvent as ReactMouseEvent, forwardRef, useEffect, useImperativeHandle, useRef } from "react"
 import Scrollbar from "smooth-scrollbar"
 import { ScrollStatus } from "smooth-scrollbar/interfaces/scrollbar"
 import { useSize } from "soda-hooks"

package/src/components/AutoSizeTextarea.tsx

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

package/src/components/CopyButton.tsx

@@ -1,7 +1,7 @@
 "use client"
 
-import ClipboardJS, { Event } from "clipboard"
 import { ComponentPropsWithoutRef, forwardRef, useEffect, useImperativeHandle, useRef } from "react"
+import ClipboardJS, { Event } from "clipboard"
 import { useLatest } from "soda-hooks"
 
 export { Event } from "clipboard"

package/src/components/DraggableGrid.tsx

@@ -1,5 +1,5 @@
-import { clsx, getArray, isNullable } from "deepsea-tools"
 import { CSSProperties, ComponentProps, Key, ReactNode, useEffect, useMemo, useRef, useState } from "react"
+import { clsx, getArray, isNullable } from "deepsea-tools"
 import { DragMoveEvent, DragMoveEvents, useDragMove } from "soda-hooks"
 
 import styles from "./DraggableGrid.module.css"

package/src/components/Echart.tsx

@@ -1,69 +1,242 @@
 "use client"
 
+import { ComponentProps, FC, ReactNode, Ref, useEffect, useImperativeHandle, useLayoutEffect, useRef } from "react"
 import {
+    AngleAxisComponentOption,
+    AriaComponentOption,
+    AxisPointerComponentOption,
     BarSeriesOption,
+    BoxplotSeriesOption,
+    BrushComponentOption,
+    CalendarComponentOption,
+    CandlestickSeriesOption,
+    ChordSeriesOption,
     ComposeOption,
+    ContinousVisualMapComponentOption,
+    CustomSeriesOption,
+    DataZoomComponentOption,
     DatasetComponentOption,
     ECharts,
+    EChartsInitOpts,
+    EffectScatterSeriesOption,
+    FunnelSeriesOption,
+    GaugeSeriesOption,
+    GeoComponentOption,
+    GraphSeriesOption,
+    GraphicComponentOption,
     GridComponentOption,
+    HeatmapSeriesOption,
+    InsideDataZoomComponentOption,
+    LegendComponentOption,
     LineSeriesOption,
+    LinesSeriesOption,
+    MapSeriesOption,
+    MarkAreaComponentOption,
+    MarkLineComponentOption,
+    MarkPointComponentOption,
+    MatrixComponentOption,
+    ParallelSeriesOption,
+    PictorialBarSeriesOption,
     PieSeriesOption,
+    PiecewiseVisualMapComponentOption,
+    PlainLegendComponentOption,
+    PolarComponentOption,
+    RadarComponentOption,
+    RadarSeriesOption,
+    RadiusAxisComponentOption,
+    SankeySeriesOption,
+    ScatterSeriesOption,
+    ScrollableLegendComponentOption,
+    SeriesOption,
+    SingleAxisComponentOption,
+    SliderDataZoomComponentOption,
+    SunburstSeriesOption,
+    ThemeRiverSeriesOption,
+    ThumbnailComponentOption,
+    TimelineComponentOption,
     TitleComponentOption,
+    ToolboxComponentOption,
     TooltipComponentOption,
+    TreeSeriesOption,
+    TreemapSeriesOption,
+    VisualMapComponentOption,
+    XAXisComponentOption,
+    YAXisComponentOption,
     init,
 } from "echarts"
-import {
-    ComponentPropsWithoutRef,
-    ForwardRefExoticComponent,
-    ForwardedRef,
-    RefAttributes,
-    forwardRef,
-    useEffect,
-    useImperativeHandle,
-    useLayoutEffect,
-    useRef,
-} from "react"
-
-export type PieOption = ComposeOption<PieSeriesOption | TitleComponentOption | DatasetComponentOption | GridComponentOption | TooltipComponentOption>
-
-export type BarOption = ComposeOption<BarSeriesOption | TitleComponentOption | DatasetComponentOption | GridComponentOption | TooltipComponentOption>
-
-export type LineOption = ComposeOption<LineSeriesOption | TitleComponentOption | DatasetComponentOption | GridComponentOption | TooltipComponentOption>
-
-export interface EchartProps<T extends any = any> extends Omit<ComponentPropsWithoutRef<"div">, "children"> {
-    width: number
-    height: number
+import { ECBasicOption } from "echarts/types/src/util/types.js"
+import hash from "stable-hash"
+
+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>
+
+export type CandlestickOption = ChartOption<CandlestickSeriesOption>
+
+export type ChordOption = ChartOption<ChordSeriesOption>
+
+export type CustomOption = ChartOption<CustomSeriesOption>
+
+export type EffectScatterOption = ChartOption<EffectScatterSeriesOption>
+
+export type FunnelOption = ChartOption<FunnelSeriesOption>
+
+export type GaugeOption = ChartOption<GaugeSeriesOption>
+
+export type GraphOption = ChartOption<GraphSeriesOption>
+
+export type HeatmapOption = ChartOption<HeatmapSeriesOption>
+
+export type LineOption = ChartOption<LineSeriesOption>
+
+export type LinesOption = ChartOption<LinesSeriesOption>
+
+export type MapOption = ChartOption<MapSeriesOption>
+
+export type ParallelOption = ChartOption<ParallelSeriesOption>
+
+export type PictorialBarOption = ChartOption<PictorialBarSeriesOption>
+
+export type PieOption = ChartOption<PieSeriesOption>
+
+export type RadarOption = ChartOption<RadarSeriesOption>
+
+export type SankeyOption = ChartOption<SankeySeriesOption>
+
+export type ScatterOption = ChartOption<ScatterSeriesOption>
+
+export type SunburstOption = ChartOption<SunburstSeriesOption>
+
+export type ThemeRiverOption = ChartOption<ThemeRiverSeriesOption>
+
+export type TreeOption = ChartOption<TreeSeriesOption>
+
+export type TreemapOption = ChartOption<TreemapSeriesOption>
+
+export type ModifiableEChartsInitOpts = Pick<EChartsInitOpts, "width" | "height" | "locale">
+
+export interface EChartInitOption extends Omit<EChartsInitOpts, keyof ModifiableEChartsInitOpts> {}
+
+export interface EchartProps<T extends ECBasicOption = ECBasicOption> extends Omit<ComponentProps<"div">, "children">, ModifiableEChartsInitOpts {
+    init?: EChartInitOption
     option: T
-    chart?: ForwardedRef<ECharts>
+    chart?: Ref<ECharts>
 }
 
-export type EchartComponent<T extends PieOption | BarOption | LineOption> = ForwardRefExoticComponent<
-    Omit<EchartProps<T>, "ref"> & RefAttributes<HTMLDivElement>
->
+export type EchartComponent<T extends ECBasicOption = ECBasicOption> = FC<EchartProps<T>>
 
-const Echart = forwardRef<HTMLDivElement, EchartProps>((props, ref) => {
-    const { width, height, option, chart, ...rest } = props
+export function Echart<T extends ECBasicOption = ECBasicOption>({
+    ref,
+    width,
+    height,
+    locale,
+    init: initOption,
+    option,
+    chart,
+    ...rest
+}: EchartProps<T>): ReactNode {
     const container = useRef<HTMLDivElement>(null)
     const chartRef = useRef<ECharts | null>(null)
 
     useLayoutEffect(() => {
         const ele = container.current!
-        chartRef.current = init(ele, option, { width, height })
+        chartRef.current = init(ele, option, { ...initOption, width, height, locale })
         return () => chartRef.current?.dispose()
     }, [])
 
-    useImperativeHandle(ref, () => container.current!, [])
+    useImperativeHandle(ref, () => container.current!)
+
+    useImperativeHandle(chart, () => chartRef.current!)
 
-    useImperativeHandle(chart, () => chartRef.current!, [])
+    useEffect(() => chartRef.current?.setOption(option), [hash(option)])
 
-    useEffect(() => {
-        chartRef.current?.setOption(option)
-        chartRef.current?.resize({ width, height })
-    })
+    // @ts-expect-error width and height can be string
+    useEffect(() => chartRef.current?.resize({ width, height }), [width, height])
+
+    useEffect(() => chartRef.current?.setOption({ locale }), [locale])
 
     return <div ref={container} {...rest} />
-})
+}
 
-export const Pie = Echart as EchartComponent<PieOption>
 export const Bar = Echart as EchartComponent<BarOption>
+
+export const Boxplot = Echart as EchartComponent<BoxplotOption>
+
+export const Candlestick = Echart as EchartComponent<CandlestickOption>
+
+export const Chord = Echart as EchartComponent<ChordOption>
+
+export const Custom = Echart as EchartComponent<CustomOption>
+
+export const EffectScatter = Echart as EchartComponent<EffectScatterOption>
+
+export const Funnel = Echart as EchartComponent<FunnelOption>
+
+export const Gauge = Echart as EchartComponent<GaugeOption>
+
+export const Graph = Echart as EchartComponent<GraphOption>
+
+export const Heatmap = Echart as EchartComponent<HeatmapOption>
+
 export const Line = Echart as EchartComponent<LineOption>
+
+export const Lines = Echart as EchartComponent<LinesOption>
+
+export const Map = Echart as EchartComponent<MapOption>
+
+export const Parallel = Echart as EchartComponent<ParallelOption>
+
+export const PictorialBar = Echart as EchartComponent<PictorialBarOption>
+
+export const Pie = Echart as EchartComponent<PieOption>
+
+export const Radar = Echart as EchartComponent<RadarOption>
+
+export const Sankey = Echart as EchartComponent<SankeyOption>
+
+export const Scatter = Echart as EchartComponent<ScatterOption>
+
+export const Sunburst = Echart as EchartComponent<SunburstOption>
+
+export const ThemeRiver = Echart as EchartComponent<ThemeRiverOption>
+
+export const Tree = Echart as EchartComponent<TreeOption>
+
+export const Treemap = Echart as EchartComponent<TreemapOption>

package/src/components/Flow.tsx

@@ -1,8 +1,8 @@
 "use client"
 
+import { CSSProperties, HTMLAttributes, Key, ReactNode, Ref, useEffect, useImperativeHandle, useRef, useState } from "react"
 import { css } from "@emotion/css"
 import { clsx } from "deepsea-tools"
-import { CSSProperties, HTMLAttributes, Key, ReactNode, Ref, useEffect, useImperativeHandle, useRef, useState } from "react"
 import { useSize } from "soda-hooks"
 
 import { px, transformCSSVariable } from "@/utils"

package/src/components/HlsPlayer.tsx

@@ -1,7 +1,7 @@
 "use client"
 
-import Hls from "hls.js"
 import { MediaHTMLAttributes, forwardRef, useEffect, useImperativeHandle, useRef } from "react"
+import Hls from "hls.js"
 
 export interface HlsPlayerProps extends Omit<MediaHTMLAttributes<HTMLVideoElement>, "src"> {
     src: string