@tiny-codes/react-easy 1.7.5 → 1.7.7

package/lib/hooks/useMovable.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/hooks/useMovable.ts"],
-  "sourcesContent": ["import { type RefObject, useEffect, useRef, useState } from 'react';\nimport { useLocalStorage } from 'react-use';\nimport useRefFunction from './useRefFunction';\nimport useRefValue from './useRefValue';\n\nexport interface UseMovableProps {\n  /**\n   * - **EN:** Whether dragging is enabled, default is `true`\n   * - **CN:** 是否启用拖动，默认`true`\n   */\n  enabled?: boolean;\n  /**\n   * - **EN:** The ref of the container element\n   * - **CN:** 容器元素的ref\n   */\n  containerRef: RefObject<HTMLElement>;\n  /**\n   * - **EN:** Selectors of elements that should not trigger dragging, e.g., interactive controls\n   * - **CN:** 不应触发拖动的元素的选择器，例如交互控件\n   */\n  ignoreSelectors?: string[];\n  /**\n   * - **EN:** Key for storing position in localStorage; if not provided, position won't be saved\n   * - **CN:** 用于在 localStorage 中存储位置的键；如果未提供，则不会保存位置\n   */\n  storageKey?: string;\n}\n\n/**\n * - **EN:** Hook to make an element movable by dragging, with position persistence using localStorage\n * - **CN:** 通过拖动使元素可移动的钩子，并使用 localStorage 持久化位置\n */\nconst useMovable = (props: UseMovableProps) => {\n  const { enabled, containerRef, ignoreSelectors, storageKey } = props;\n\n  const storageKeyRef = useRefValue(storageKey);\n  const [savedPosition, savePosition] = useLocalStorage<MovePosition>(storageKey ?? '');\n  const savePositionRef = useRefValue(savePosition);\n  const [position, setPosition] = useState<MovePosition | undefined>(savedPosition ?? undefined);\n  const positionRef = useRefValue(position);\n  const draggingRef = useRef(false);\n  const dragOffsetRef = useRef({ x: 0, y: 0 });\n  const sizeRef = useRef({ w: 0, h: 0 });\n\n  // Drag start (exclude interactive controls)\n  const handlePointerDown = useRefFunction((e: React.PointerEvent<HTMLDivElement>) => {\n    const target = e.target as HTMLElement;\n    // Set the selector for elements that do not trigger dragging\n    if (ignoreSelectors && target.closest(ignoreSelectors.join(','))) return;\n\n    if (!containerRef.current) return;\n    const rect = containerRef.current.getBoundingClientRect();\n    sizeRef.current = { w: rect.width, h: rect.height };\n    const currentLeft = position?.left ?? rect.left;\n    const currentTop = position?.top ?? rect.top;\n\n    dragOffsetRef.current = { x: e.clientX - currentLeft, y: e.clientY - currentTop };\n    draggingRef.current = true;\n    try {\n      containerRef.current.setPointerCapture?.(e.pointerId);\n    } catch {\n      // do nothing\n    }\n    e.preventDefault();\n  });\n\n  // 调整：在窗口 resize 时自动收敛位置，防止超出可视区域\n  useEffect(() => {\n    const clampToViewport = () => {\n      const pos = positionRef.current;\n      if (!pos) return;\n\n      // Refresh the container size before each convergence to ensure accurate boundaries.\n      const rect = containerRef.current?.getBoundingClientRect();\n      if (rect) {\n        sizeRef.current = { w: rect.width, h: rect.height };\n      }\n\n      const maxLeft = Math.max(0, window.innerWidth - sizeRef.current.w);\n      const maxTop = Math.max(0, window.innerHeight - sizeRef.current.h);\n      const clampedLeft = Math.min(Math.max(0, pos.left), maxLeft);\n      const clampedTop = Math.min(Math.max(0, pos.top), maxTop);\n\n      if (clampedLeft !== pos.left || clampedTop !== pos.top) {\n        const next = { left: clampedLeft, top: clampedTop };\n        setPosition(next);\n        if (storageKeyRef.current) {\n          savePositionRef.current(next);\n        }\n      }\n    };\n\n    window.addEventListener('resize', clampToViewport);\n    // Calibrate immediately after the first mount/position change.\n    clampToViewport();\n\n    return () => {\n      window.removeEventListener('resize', clampToViewport);\n    };\n  }, [containerRef]);\n\n  // Update position during dragging; restrict within the visible area.\n  useEffect(() => {\n    const onMove = (e: PointerEvent) => {\n      if (!draggingRef.current) return;\n      const newLeft = e.clientX - dragOffsetRef.current.x;\n      const newTop = e.clientY - dragOffsetRef.current.y;\n      const maxLeft = Math.max(0, window.innerWidth - sizeRef.current.w);\n      const maxTop = Math.max(0, window.innerHeight - sizeRef.current.h);\n      const clampedLeft = Math.min(Math.max(0, newLeft), maxLeft);\n      const clampedTop = Math.min(Math.max(0, newTop), maxTop);\n      const pos = { left: clampedLeft, top: clampedTop };\n      setPosition(pos);\n      if (storageKeyRef.current) {\n        savePositionRef.current(pos);\n      }\n    };\n    const onUp = () => {\n      if (draggingRef.current) draggingRef.current = false;\n    };\n    if (enabled) {\n      window.addEventListener('pointermove', onMove);\n      window.addEventListener('pointerup', onUp);\n      window.addEventListener('pointercancel', onUp);\n    }\n    return () => {\n      window.removeEventListener('pointermove', onMove);\n      window.removeEventListener('pointerup', onUp);\n      window.removeEventListener('pointercancel', onUp);\n    };\n  }, [enabled]);\n\n  return {\n    onPointerDown: handlePointerDown,\n    position,\n  };\n};\n\nexport interface MovePosition {\n  left: number;\n  top: number;\n}\n\nexport default useMovable;\n"],
-  "mappings": "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",
-  "names": ["useRefValue", "useRefFunction"]
+  "sourcesContent": ["import { type RefObject, useEffect, useRef, useState } from 'react';\nimport useLocalStorage from './useLocalStorage';\nimport useRefFunction from './useRefFunction';\nimport useRefValue from './useRefValue';\n\nexport interface UseMovableProps {\n  /**\n   * - **EN:** Whether dragging is enabled, default is `true`\n   * - **CN:** 是否启用拖动，默认`true`\n   */\n  enabled?: boolean;\n  /**\n   * - **EN:** The ref of the container element\n   * - **CN:** 容器元素的ref\n   */\n  containerRef: RefObject<HTMLElement>;\n  /**\n   * - **EN:** Selectors of elements that should not trigger dragging, e.g., interactive controls\n   * - **CN:** 不应触发拖动的元素的选择器，例如交互控件\n   */\n  ignoreSelectors?: string[];\n  /**\n   * - **EN:** Key for storing position in localStorage; if not provided, position won't be saved\n   * - **CN:** 用于在 localStorage 中存储位置的键；如果未提供，则不会保存位置\n   */\n  storageKey?: string;\n}\n\n/**\n * - **EN:** Hook to make an element movable by dragging, with position persistence using localStorage\n * - **CN:** 通过拖动使元素可移动的钩子，并使用 localStorage 持久化位置\n */\nconst useMovable = (props: UseMovableProps) => {\n  const { enabled, containerRef, ignoreSelectors, storageKey } = props;\n\n  const storageKeyRef = useRefValue(storageKey);\n  const [savedPosition, savePosition] = useLocalStorage<MovePosition>(storageKey ?? '');\n  const savePositionRef = useRefValue(savePosition);\n  const [position, setPosition] = useState<MovePosition | undefined>(savedPosition ?? undefined);\n  const positionRef = useRefValue(position);\n  const draggingRef = useRef(false);\n  const dragOffsetRef = useRef({ x: 0, y: 0 });\n  const sizeRef = useRef({ w: 0, h: 0 });\n\n  // Drag start (exclude interactive controls)\n  const handlePointerDown = useRefFunction((e: React.PointerEvent<HTMLDivElement>) => {\n    const target = e.target as HTMLElement;\n    // Set the selector for elements that do not trigger dragging\n    if (ignoreSelectors && target.closest(ignoreSelectors.join(','))) return;\n\n    if (!containerRef.current) return;\n    const rect = containerRef.current.getBoundingClientRect();\n    sizeRef.current = { w: rect.width, h: rect.height };\n    const currentLeft = position?.left ?? rect.left;\n    const currentTop = position?.top ?? rect.top;\n\n    dragOffsetRef.current = { x: e.clientX - currentLeft, y: e.clientY - currentTop };\n    draggingRef.current = true;\n    try {\n      containerRef.current.setPointerCapture?.(e.pointerId);\n    } catch {\n      // do nothing\n    }\n    e.preventDefault();\n  });\n\n  // Automatically adjust the position during window resize to prevent it from exceeding the visible area.\n  useEffect(() => {\n    const clampToViewport = () => {\n      const pos = positionRef.current;\n      if (!pos) return;\n\n      // Refresh the container size before each convergence to ensure accurate boundaries.\n      const rect = containerRef.current?.getBoundingClientRect();\n      if (rect) {\n        sizeRef.current = { w: rect.width, h: rect.height };\n      }\n\n      const maxLeft = Math.max(0, window.innerWidth - sizeRef.current.w);\n      const maxTop = Math.max(0, window.innerHeight - sizeRef.current.h);\n      const clampedLeft = Math.min(Math.max(0, pos.left), maxLeft);\n      const clampedTop = Math.min(Math.max(0, pos.top), maxTop);\n\n      if (clampedLeft !== pos.left || clampedTop !== pos.top) {\n        const next = { left: clampedLeft, top: clampedTop };\n        setPosition(next);\n        if (storageKeyRef.current) {\n          savePositionRef.current(next);\n        }\n      }\n    };\n\n    window.addEventListener('resize', clampToViewport);\n    // Calibrate immediately after the first mount/position change.\n    clampToViewport();\n\n    return () => {\n      window.removeEventListener('resize', clampToViewport);\n    };\n  }, [containerRef]);\n\n  // Update position during dragging; restrict within the visible area.\n  useEffect(() => {\n    const onMove = (e: PointerEvent) => {\n      if (!draggingRef.current) return;\n      const newLeft = e.clientX - dragOffsetRef.current.x;\n      const newTop = e.clientY - dragOffsetRef.current.y;\n      const maxLeft = Math.max(0, window.innerWidth - sizeRef.current.w);\n      const maxTop = Math.max(0, window.innerHeight - sizeRef.current.h);\n      const clampedLeft = Math.min(Math.max(0, newLeft), maxLeft);\n      const clampedTop = Math.min(Math.max(0, newTop), maxTop);\n      const pos = { left: clampedLeft, top: clampedTop };\n      setPosition(pos);\n      if (storageKeyRef.current) {\n        savePositionRef.current(pos);\n      }\n    };\n    const onUp = () => {\n      if (draggingRef.current) draggingRef.current = false;\n    };\n    if (enabled) {\n      window.addEventListener('pointermove', onMove);\n      window.addEventListener('pointerup', onUp);\n      window.addEventListener('pointercancel', onUp);\n    }\n    return () => {\n      window.removeEventListener('pointermove', onMove);\n      window.removeEventListener('pointerup', onUp);\n      window.removeEventListener('pointercancel', onUp);\n    };\n  }, [enabled]);\n\n  return {\n    onPointerDown: handlePointerDown,\n    position,\n  };\n};\n\nexport interface MovePosition {\n  left: number;\n  top: number;\n}\n\nexport default useMovable;\n"],
+  "mappings": "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",
+  "names": ["useRefValue", "useLocalStorage", "useRefFunction"]
 }

package/lib/hooks/useSplitter.d.ts

@@ -2,40 +2,41 @@ import { type CSSProperties } from 'react';
 export interface UseSplitterProps {
     /**
      * - **EN:** Split direction. vertical = left/right; horizontal = top/bottom.
-     * - **ZH:** 分割方向。vertical 表示左右分割；horizontal 表示上下分割。
+     * - **CN:** 分割方向。vertical 表示左右分割；horizontal 表示上下分割。
      *
      * @default 'vertical'
      */
     direction?: 'vertical' | 'horizontal';
     /**
-     * - **EN:** The container element reference.
-     * - **ZH:** 容器元素的引用。
+     * - **EN:** Parent container element. If not specified, the parent container of the `dom` element
+     *   will be used automatically.
+     * - **CN:** 父容器元素，如果不指定，则自动使用 `dom` 元素的父容器
      */
-    container: HTMLDivElement | null | undefined;
+    container?: HTMLDivElement | null | undefined;
     /**
      * - **EN:** Default ratio of the left/top pane (0~1).
-     * - **ZH:** 左侧/顶部面板的默认比例 (0~1)。
+     * - **CN:** 左侧/顶部面板的默认比例 (0~1)。
      *
      * @default 0.32
      */
     defaultRatio?: number;
     /**
      * - **EN:** Minimum ratio of the left/top pane (0~1).
-     * - **ZH:** 左侧/顶部面板的最小比例 (0~1)。
+     * - **CN:** 左侧/顶部面板的最小比例 (0~1)。
      *
      * @default 0.15
      */
     minRatio?: number;
     /**
      * - **EN:** Maximum ratio of the left/top pane (0~1).
-     * - **ZH:** 左侧/顶部面板的最大比例 (0~1)。
+     * - **CN:** 左侧/顶部面板的最大比例 (0~1)。
      *
      * @default 0.85
      */
     maxRatio?: number;
     /**
      * - **EN:** Width of the splitter in pixels.
-     * - **ZH:** 分割条的宽度，单位为像素。
+     * - **CN:** 分割条的宽度，单位为像素。
      *
      * @default 2
      */
@@ -44,9 +45,51 @@ export interface UseSplitterProps {
     className?: string;
     /** Additional style for the splitter element */
     style?: CSSProperties;
+    /**
+     * - **EN:** Custom prefix for the component's CSS class.
+     * - **CN:** 组件的自定义 CSS 类前缀。
+     */
+    prefixCls?: string;
+    /**
+     * - **EN:** Semantic class names
+     * - **CN:** 语义化类名
+     */
+    classNames?: {
+        /**
+         * - **EN:** Class name applied when the splitter is hovered.
+         * - **CN:** 分割条悬停时应用的类名。
+         */
+        hover?: string;
+        /**
+         * - **EN:** Class name applied when the splitter is being dragged.
+         * - **CN:** 分割条拖动时应用的类名。
+         */
+        dragging?: string;
+        /**
+         * - **EN:** Class name applied to the splitter handle.
+         * - **CN:** 分割条手柄的类名。
+         */
+        handle?: string;
+    };
+    /**
+     * - **EN:** Semantic styles
+     * - **CN:** 语义化样式
+     */
+    styles?: {
+        /**
+         * - **EN:** Custom styles for the splitter handle.
+         * - **CN:** 分割条手柄的自定义样式。
+         */
+        handle?: CSSProperties;
+    };
+    /**
+     * - **EN:** Callback function when the splitter ratio changes.
+     * - **CN:** 分割比例变化时的回调函数。
+     */
+    onChange?: (ratio?: number) => void;
 }
 declare const useSplitter: (props: UseSplitterProps) => {
-    dom: import("react/jsx-runtime").JSX.Element;
+    dom: import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
     percent: number | undefined;
     width: number | undefined;
     dragging: boolean;

package/lib/hooks/useSplitter.js

@@ -33,23 +33,34 @@ __export(useSplitter_exports, {
 });
 module.exports = __toCommonJS(useSplitter_exports);
 var import_react = require("react");
-var import_antd = require("antd");
+var import_classnames = __toESM(require("classnames"));
+var import_components = require("../components");
+var import_useSplitter = __toESM(require("./style/useSplitter"));
 var import_useRefValue = __toESM(require("./useRefValue"));
 var useSplitter = (props) => {
   const {
-    container,
+    container: containerFromProps,
     defaultRatio,
     minRatio = 0.15,
     maxRatio = 1 - minRatio,
     direction = "vertical",
-    splitterWidth = 2,
+    splitterWidth = 1,
     className,
-    style
+    classNames,
+    styles,
+    prefixCls: prefixClsInProps,
+    style,
+    onChange
   } = props || {};
-  const { token } = import_antd.theme.useToken();
+  const { getPrefixCls } = (0, import_react.useContext)(import_components.ConfigProvider.ConfigContext);
+  const prefixCls = getPrefixCls("splitter", prefixClsInProps);
+  const [wrapCSSVar, hashId, cssVarCls] = (0, import_useSplitter.default)(prefixCls);
   const directionRef = (0, import_useRefValue.default)(direction);
+  const [splitterRef, setSplitterRef] = (0, import_react.useState)(null);
+  const [container, setContainer] = (0, import_react.useState)(containerFromProps);
   const [percent, setPercent] = (0, import_react.useState)(defaultRatio);
   const percentRef = (0, import_useRefValue.default)(percent);
+  const onChangeRef = (0, import_useRefValue.default)(onChange);
   const [width, setWidth] = (0, import_react.useState)(
     container && defaultRatio ? ((container == null ? void 0 : container.clientWidth) || 0) * defaultRatio : void 0
   );
@@ -61,6 +72,7 @@ var useSplitter = (props) => {
     if (!dragging)
       return;
     const onMove = (e) => {
+      var _a, _b;
       const el = container;
       if (!el)
         return;
@@ -70,11 +82,13 @@ var useSplitter = (props) => {
         const ratio = Math.max(minRatioRef.current, Math.min(maxRatioRef.current, x / rect.width));
         setPercent(ratio);
         setWidth(x);
+        (_a = onChangeRef.current) == null ? void 0 : _a.call(onChangeRef, ratio);
       } else {
         const y = e.clientY - rect.top;
         const ratio = Math.max(minRatioRef.current, Math.min(maxRatioRef.current, y / rect.height));
         setPercent(ratio);
         setWidth(y);
+        (_b = onChangeRef.current) == null ? void 0 : _b.call(onChangeRef, ratio);
       }
       e.preventDefault();
     };
@@ -87,39 +101,55 @@ var useSplitter = (props) => {
     };
   }, [container, dragging, direction, minRatioRef, maxRatioRef]);
   (0, import_react.useEffect)(() => {
+    const containerDom = containerFromProps ?? (splitterRef == null ? void 0 : splitterRef.parentElement) ?? void 0;
+    setContainer(containerDom);
+  }, [containerFromProps, splitterRef]);
+  (0, import_react.useEffect)(() => {
+    var _a, _b;
     if (defaultRatio && container && percentRef.current == null) {
       const rect = container.getBoundingClientRect();
       setPercent(defaultRatio);
       if (directionRef.current === "vertical") {
         setWidth(rect.width * defaultRatio);
+        (_a = onChangeRef.current) == null ? void 0 : _a.call(onChangeRef, defaultRatio);
       } else {
         setWidth(rect.height * defaultRatio);
+        (_b = onChangeRef.current) == null ? void 0 : _b.call(onChangeRef, defaultRatio);
       }
     }
   }, [defaultRatio, container]);
   const vertical = direction === "vertical";
-  const dom = /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      className,
-      style: {
-        flex: "none",
-        width: vertical ? splitterWidth : "100%",
-        height: vertical ? "auto" : splitterWidth,
-        cursor: vertical ? "col-resize" : "row-resize",
-        background: dragging ? token.colorPrimaryHover : isOver ? token.colorPrimaryActive : token.colorBorder,
-        margin: vertical ? "0 4px" : "4px 0",
-        borderRadius: 4,
-        userSelect: "none",
-        ...style
+  const dom = wrapCSSVar(
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        ref: setSplitterRef,
+        className: (0, import_classnames.default)(
+          hashId,
+          cssVarCls,
+          prefixCls,
+          className,
+          isOver ? (0, import_classnames.default)(`${prefixCls}-hover`, classNames == null ? void 0 : classNames.hover) : void 0,
+          dragging ? (0, import_classnames.default)(`${prefixCls}-dragging`, classNames == null ? void 0 : classNames.dragging) : void 0,
+          {
+            [`${prefixCls}-vertical`]: vertical,
+            [`${prefixCls}-horizontal`]: !vertical
+          }
+        ),
+        style: {
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          [`--splitter-width`]: splitterWidth ? `${splitterWidth}px` : void 0,
+          ...style
+        },
+        onMouseDown: () => setDragging(true),
+        onMouseEnter: () => setIsOver(true),
+        onMouseLeave: () => setIsOver(false),
+        role: "separator",
+        "aria-orientation": vertical ? "vertical" : "horizontal",
+        "aria-label": "Resize"
       },
-      onMouseDown: () => setDragging(true),
-      onMouseEnter: () => setIsOver(true),
-      onMouseLeave: () => setIsOver(false),
-      role: "separator",
-      "aria-orientation": vertical ? "vertical" : "horizontal",
-      "aria-label": "Resize"
-    }
+      /* @__PURE__ */ React.createElement("div", { className: (0, import_classnames.default)(`${prefixCls}-handle`, classNames == null ? void 0 : classNames.handle), style: styles == null ? void 0 : styles.handle })
+    )
   );
   return {
     dom,

package/lib/hooks/useSplitter.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/hooks/useSplitter.tsx"],
-  "sourcesContent": ["import { type CSSProperties, useEffect, useState } from 'react';\nimport { theme } from 'antd';\nimport useRefValue from './useRefValue';\n\nexport interface UseSplitterProps {\n  /**\n   * - **EN:** Split direction. vertical = left/right; horizontal = top/bottom.\n   * - **ZH:** 分割方向。vertical 表示左右分割；horizontal 表示上下分割。\n   *\n   * @default 'vertical'\n   */\n  direction?: 'vertical' | 'horizontal';\n  /**\n   * - **EN:** The container element reference.\n   * - **ZH:** 容器元素的引用。\n   */\n  container: HTMLDivElement | null | undefined;\n  /**\n   * - **EN:** Default ratio of the left/top pane (0~1).\n   * - **ZH:** 左侧/顶部面板的默认比例 (0~1)。\n   *\n   * @default 0.32\n   */\n  defaultRatio?: number;\n  /**\n   * - **EN:** Minimum ratio of the left/top pane (0~1).\n   * - **ZH:** 左侧/顶部面板的最小比例 (0~1)。\n   *\n   * @default 0.15\n   */\n  minRatio?: number;\n  /**\n   * - **EN:** Maximum ratio of the left/top pane (0~1).\n   * - **ZH:** 左侧/顶部面板的最大比例 (0~1)。\n   *\n   * @default 0.85\n   */\n  maxRatio?: number;\n  /**\n   * - **EN:** Width of the splitter in pixels.\n   * - **ZH:** 分割条的宽度，单位为像素。\n   *\n   * @default 2\n   */\n  splitterWidth?: number;\n  /** Additional class name for the splitter element */\n  className?: string;\n  /** Additional style for the splitter element */\n  style?: CSSProperties;\n}\n\nconst useSplitter = (props: UseSplitterProps) => {\n  const {\n    container,\n    defaultRatio,\n    minRatio = 0.15,\n    maxRatio = 1 - minRatio,\n    direction = 'vertical',\n    splitterWidth = 2,\n    className,\n    style,\n  } = props || {};\n  const { token } = theme.useToken();\n  const directionRef = useRefValue(direction);\n  const [percent, setPercent] = useState(defaultRatio);\n  const percentRef = useRefValue(percent);\n  const [width, setWidth] = useState(\n    container && defaultRatio ? (container?.clientWidth || 0) * defaultRatio : undefined\n  );\n  const [dragging, setDragging] = useState(false);\n  const minRatioRef = useRefValue(minRatio);\n  const maxRatioRef = useRefValue(maxRatio);\n  const [isOver, setIsOver] = useState(false);\n\n  useEffect(() => {\n    if (!dragging) return;\n    const onMove = (e: MouseEvent) => {\n      const el = container;\n      if (!el) return;\n      const rect = el.getBoundingClientRect();\n      if (direction === 'vertical') {\n        const x = e.clientX - rect.left;\n        const ratio = Math.max(minRatioRef.current, Math.min(maxRatioRef.current, x / rect.width));\n        setPercent(ratio);\n        setWidth(x);\n      } else {\n        const y = e.clientY - rect.top;\n        const ratio = Math.max(minRatioRef.current, Math.min(maxRatioRef.current, y / rect.height));\n        setPercent(ratio);\n        setWidth(y);\n      }\n      // prevent text selection while dragging\n      e.preventDefault();\n    };\n    const onUp = () => setDragging(false);\n    window.addEventListener('mousemove', onMove);\n    window.addEventListener('mouseup', onUp, { once: true });\n\n    return () => {\n      window.removeEventListener('mousemove', onMove);\n      window.removeEventListener('mouseup', onUp);\n    };\n  }, [container, dragging, direction, minRatioRef, maxRatioRef]);\n\n  // Initialize percent and width on mount\n  useEffect(() => {\n    if (defaultRatio && container && percentRef.current == null) {\n      const rect = container.getBoundingClientRect();\n      setPercent(defaultRatio);\n      if (directionRef.current === 'vertical') {\n        setWidth(rect.width * defaultRatio);\n      } else {\n        setWidth(rect.height * defaultRatio);\n      }\n    }\n  }, [defaultRatio, container]);\n\n  const vertical = direction === 'vertical';\n  const dom = (\n    <div\n      className={className}\n      style={{\n        flex: 'none',\n        width: vertical ? splitterWidth : '100%',\n        height: vertical ? 'auto' : splitterWidth,\n        cursor: vertical ? 'col-resize' : 'row-resize',\n        background: dragging ? token.colorPrimaryHover : isOver ? token.colorPrimaryActive : token.colorBorder,\n        margin: vertical ? '0 4px' : '4px 0',\n        borderRadius: 4,\n        userSelect: 'none',\n        ...style,\n      }}\n      onMouseDown={() => setDragging(true)}\n      onMouseEnter={() => setIsOver(true)}\n      onMouseLeave={() => setIsOver(false)}\n      role=\"separator\"\n      aria-orientation={vertical ? 'vertical' : 'horizontal'}\n      aria-label=\"Resize\"\n    />\n  );\n\n  return {\n    dom,\n    percent,\n    width,\n    dragging,\n    direction,\n  };\n};\n\nexport default useSplitter;\n"],
-  "mappings": "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",
-  "names": ["useRefValue"]
+  "sourcesContent": ["import { type CSSProperties, useContext, useEffect, useState } from 'react';\nimport names from 'classnames';\nimport { ConfigProvider } from '../components';\nimport useStyle from './style/useSplitter';\nimport useRefValue from './useRefValue';\n\nexport interface UseSplitterProps {\n  /**\n   * - **EN:** Split direction. vertical = left/right; horizontal = top/bottom.\n   * - **CN:** 分割方向。vertical 表示左右分割；horizontal 表示上下分割。\n   *\n   * @default 'vertical'\n   */\n  direction?: 'vertical' | 'horizontal';\n  /**\n   * - **EN:** Parent container element. If not specified, the parent container of the `dom` element\n   *   will be used automatically.\n   * - **CN:** 父容器元素，如果不指定，则自动使用 `dom` 元素的父容器\n   */\n  container?: HTMLDivElement | null | undefined;\n  /**\n   * - **EN:** Default ratio of the left/top pane (0~1).\n   * - **CN:** 左侧/顶部面板的默认比例 (0~1)。\n   *\n   * @default 0.32\n   */\n  defaultRatio?: number;\n  /**\n   * - **EN:** Minimum ratio of the left/top pane (0~1).\n   * - **CN:** 左侧/顶部面板的最小比例 (0~1)。\n   *\n   * @default 0.15\n   */\n  minRatio?: number;\n  /**\n   * - **EN:** Maximum ratio of the left/top pane (0~1).\n   * - **CN:** 左侧/顶部面板的最大比例 (0~1)。\n   *\n   * @default 0.85\n   */\n  maxRatio?: number;\n  /**\n   * - **EN:** Width of the splitter in pixels.\n   * - **CN:** 分割条的宽度，单位为像素。\n   *\n   * @default 2\n   */\n  splitterWidth?: number;\n  /** Additional class name for the splitter element */\n  className?: string;\n  /** Additional style for the splitter element */\n  style?: CSSProperties;\n  /**\n   * - **EN:** Custom prefix for the component's CSS class.\n   * - **CN:** 组件的自定义 CSS 类前缀。\n   */\n  prefixCls?: string;\n  /**\n   * - **EN:** Semantic class names\n   * - **CN:** 语义化类名\n   */\n  classNames?: {\n    /**\n     * - **EN:** Class name applied when the splitter is hovered.\n     * - **CN:** 分割条悬停时应用的类名。\n     */\n    hover?: string;\n    /**\n     * - **EN:** Class name applied when the splitter is being dragged.\n     * - **CN:** 分割条拖动时应用的类名。\n     */\n    dragging?: string;\n    /**\n     * - **EN:** Class name applied to the splitter handle.\n     * - **CN:** 分割条手柄的类名。\n     */\n    handle?: string;\n  };\n  /**\n   * - **EN:** Semantic styles\n   * - **CN:** 语义化样式\n   */\n  styles?: {\n    /**\n     * - **EN:** Custom styles for the splitter handle.\n     * - **CN:** 分割条手柄的自定义样式。\n     */\n    handle?: CSSProperties;\n  };\n  /**\n   * - **EN:** Callback function when the splitter ratio changes.\n   * - **CN:** 分割比例变化时的回调函数。\n   */\n  onChange?: (ratio?: number) => void;\n}\n\nconst useSplitter = (props: UseSplitterProps) => {\n  const {\n    container: containerFromProps,\n    defaultRatio,\n    minRatio = 0.15,\n    maxRatio = 1 - minRatio,\n    direction = 'vertical',\n    splitterWidth = 1,\n    className,\n    classNames,\n    styles,\n    prefixCls: prefixClsInProps,\n    style,\n    onChange,\n  } = props || {};\n  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);\n  const prefixCls = getPrefixCls('splitter', prefixClsInProps);\n  const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);\n  const directionRef = useRefValue(direction);\n  const [splitterRef, setSplitterRef] = useState<HTMLDivElement | null>(null);\n  const [container, setContainer] = useState(containerFromProps);\n  const [percent, setPercent] = useState(defaultRatio);\n  const percentRef = useRefValue(percent);\n  const onChangeRef = useRefValue(onChange);\n  const [width, setWidth] = useState(\n    container && defaultRatio ? (container?.clientWidth || 0) * defaultRatio : undefined\n  );\n  const [dragging, setDragging] = useState(false);\n  const minRatioRef = useRefValue(minRatio);\n  const maxRatioRef = useRefValue(maxRatio);\n  const [isOver, setIsOver] = useState(false);\n\n  useEffect(() => {\n    if (!dragging) return;\n    const onMove = (e: MouseEvent) => {\n      const el = container;\n      if (!el) return;\n      const rect = el.getBoundingClientRect();\n      if (direction === 'vertical') {\n        const x = e.clientX - rect.left;\n        const ratio = Math.max(minRatioRef.current, Math.min(maxRatioRef.current, x / rect.width));\n        setPercent(ratio);\n        setWidth(x);\n        onChangeRef.current?.(ratio);\n      } else {\n        const y = e.clientY - rect.top;\n        const ratio = Math.max(minRatioRef.current, Math.min(maxRatioRef.current, y / rect.height));\n        setPercent(ratio);\n        setWidth(y);\n        onChangeRef.current?.(ratio);\n      }\n      // prevent text selection while dragging\n      e.preventDefault();\n    };\n    const onUp = () => setDragging(false);\n    window.addEventListener('mousemove', onMove);\n    window.addEventListener('mouseup', onUp, { once: true });\n\n    return () => {\n      window.removeEventListener('mousemove', onMove);\n      window.removeEventListener('mouseup', onUp);\n    };\n  }, [container, dragging, direction, minRatioRef, maxRatioRef]);\n\n  useEffect(() => {\n    const containerDom = containerFromProps ?? (splitterRef?.parentElement as HTMLDivElement | undefined) ?? undefined;\n    setContainer(containerDom);\n  }, [containerFromProps, splitterRef]);\n\n  // Initialize percent and width on mount\n  useEffect(() => {\n    if (defaultRatio && container && percentRef.current == null) {\n      const rect = container.getBoundingClientRect();\n      setPercent(defaultRatio);\n      if (directionRef.current === 'vertical') {\n        setWidth(rect.width * defaultRatio);\n        onChangeRef.current?.(defaultRatio);\n      } else {\n        setWidth(rect.height * defaultRatio);\n        onChangeRef.current?.(defaultRatio);\n      }\n    }\n  }, [defaultRatio, container]);\n\n  const vertical = direction === 'vertical';\n  const dom = wrapCSSVar(\n    <div\n      ref={setSplitterRef}\n      className={names(\n        hashId,\n        cssVarCls,\n        prefixCls,\n        className,\n        isOver ? names(`${prefixCls}-hover`, classNames?.hover) : undefined,\n        dragging ? names(`${prefixCls}-dragging`, classNames?.dragging) : undefined,\n        {\n          [`${prefixCls}-vertical`]: vertical,\n          [`${prefixCls}-horizontal`]: !vertical,\n        }\n      )}\n      style={{\n        // eslint-disable-next-line @typescript-eslint/no-explicit-any\n        [`--splitter-width` as any]: splitterWidth ? `${splitterWidth}px` : undefined,\n        ...style,\n      }}\n      onMouseDown={() => setDragging(true)}\n      onMouseEnter={() => setIsOver(true)}\n      onMouseLeave={() => setIsOver(false)}\n      role=\"separator\"\n      aria-orientation={vertical ? 'vertical' : 'horizontal'}\n      aria-label=\"Resize\"\n    >\n      <div className={names(`${prefixCls}-handle`, classNames?.handle)} style={styles?.handle}></div>\n    </div>\n  );\n\n  return {\n    dom,\n    percent,\n    width,\n    dragging,\n    direction,\n  };\n};\n\nexport default useSplitter;\n"],
+  "mappings": "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",
+  "names": ["useStyle", "useRefValue", "names"]
 }

package/lib/locales/index.js

@@ -46,7 +46,7 @@ var resources = {
 };
 var reactEasyI18n = (0, import_i18next.createInstance)({});
 reactEasyI18n.init({
-  lng: "en",
+  lng: "en-US",
   resources
 });
 var t = (...args) => {

package/lib/locales/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/locales/index.ts"],
-  "sourcesContent": ["import { createInstance, type i18n } from 'i18next';\nimport enUS from './langs/en-US';\nimport zhCN from './langs/zh-CN';\n\nexport const langs = ['en', 'en-US', 'zh-CN'] as const;\n\nexport type Langs = (typeof langs)[number];\n\nexport const resources = {\n  en: { translation: enUS },\n  'en-US': { translation: enUS },\n  'zh-CN': { translation: zhCN },\n} as const;\n\nconst reactEasyI18n: i18n = createInstance({});\n\nreactEasyI18n.init({\n  lng: 'en',\n  resources,\n});\n\nexport const t: i18n['t'] = ((...args) => {\n  return reactEasyI18n.t(...args);\n}) as i18n['t'];\n\nexport default reactEasyI18n;\n"],
+  "sourcesContent": ["import { createInstance, type i18n } from 'i18next';\nimport enUS from './langs/en-US';\nimport zhCN from './langs/zh-CN';\n\nexport const langs = ['en', 'en-US', 'zh-CN'] as const;\n\nexport type Langs = (typeof langs)[number];\n\nexport const resources = {\n  en: { translation: enUS },\n  'en-US': { translation: enUS },\n  'zh-CN': { translation: zhCN },\n} as const;\n\nconst reactEasyI18n: i18n = createInstance({});\n\nreactEasyI18n.init({\n  lng: 'en-US',\n  resources,\n});\n\nexport const t: i18n['t'] = ((...args) => {\n  return reactEasyI18n.t(...args);\n}) as i18n['t'];\n\nexport default reactEasyI18n;\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAA0C;AAC1C,mBAAiB;AACjB,mBAAiB;AAEV,IAAM,QAAQ,CAAC,MAAM,SAAS,OAAO;AAIrC,IAAM,YAAY;AAAA,EACvB,IAAI,EAAE,aAAa,aAAAA,QAAK;AAAA,EACxB,SAAS,EAAE,aAAa,aAAAA,QAAK;AAAA,EAC7B,SAAS,EAAE,aAAa,aAAAC,QAAK;AAC/B;AAEA,IAAM,oBAAsB,+BAAe,CAAC,CAAC;AAE7C,cAAc,KAAK;AAAA,EACjB,KAAK;AAAA,EACL;AACF,CAAC;AAEM,IAAM,IAAgB,IAAI,SAAS;AACxC,SAAO,cAAc,EAAE,GAAG,IAAI;AAChC;AAEA,IAAO,kBAAQ;",
   "names": ["enUS", "zhCN"]
 }

package/lib/utils/math.d.ts

@@ -1,11 +1,19 @@
 /**
- * **EN**: Generate a random number within a specified range (inclusive on both ends)
+ * **EN**: Generate a random decimal number between 0 and 1
  *
- * **CN**: 生成指定范围（两端包含）内的随机数
+ * **CN**: 生成一个0~1之间的小数
+ *
+ * @returns The generated random number | 生成的随机数
+ */
+export declare function random(): number;
+/**
+ * **EN**: Generate a random integer within a specified range (inclusive on both ends)
+ *
+ * **CN**: 生成指定范围（两端包含）内的随机整数
  *
  * @param min The minimum value (inclusive) | 最小值（包含）
  * @param max The maximum value (inclusive) | 最大值（包含）
  *
- * @returns The generated random number | 生成的随机数
+ * @returns The generated random integer | 生成的随机整数
  */
 export declare function random(min: number, max: number): number;

package/lib/utils/math.js

@@ -24,26 +24,33 @@ __export(math_exports, {
 module.exports = __toCommonJS(math_exports);
 function random(min, max) {
   var _a;
+  if (min == null && max == null) {
+    return randomLikeMath();
+  }
+  if (min == null || max == null) {
+    throw new TypeError("Both min and max must be provided");
+  }
   if (!Number.isFinite(min) || !Number.isFinite(max)) {
     throw new TypeError("min and max must be finite numbers");
   }
   if (Math.floor(min) !== min || Math.floor(max) !== max) {
     throw new TypeError("min and max must be integers");
   }
+  const globalThat2 = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : {};
   if (min > max) {
     [min, max] = [max, min];
   }
-  let nodeCrypto;
+  let nodeCrypto2;
   if (typeof process !== "undefined" && ((_a = process.versions) == null ? void 0 : _a.node)) {
     try {
-      nodeCrypto = require("crypto");
-    } catch {
+      nodeCrypto2 = require("crypto");
+    } catch (error) {
     }
   }
-  if (nodeCrypto == null ? void 0 : nodeCrypto.randomInt) {
-    return nodeCrypto.randomInt(min, max + 1);
+  if (nodeCrypto2 == null ? void 0 : nodeCrypto2.randomInt) {
+    return nodeCrypto2.randomInt(min, max + 1);
   }
-  const webCrypto = globalThis.crypto || (nodeCrypto == null ? void 0 : nodeCrypto.webcrypto);
+  const webCrypto = globalThat2.crypto || (nodeCrypto2 == null ? void 0 : nodeCrypto2.webcrypto);
   if (webCrypto == null ? void 0 : webCrypto.getRandomValues) {
     const range = max - min + 1;
     if (range <= 0)
@@ -58,8 +65,36 @@ function random(min, max) {
     } while (v >= limit);
     return min + v % range;
   }
-  const _math = Math;
-  return Math.floor(_math.random() * (max - min + 1)) + min;
+  return randomLikeMath();
+}
+function randomLikeMath() {
+  var _a;
+  const globalThat = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : {};
+  const cryptoObj = globalThat.crypto;
+  if (cryptoObj == null ? void 0 : cryptoObj.getRandomValues) {
+    const buf = new Uint32Array(2);
+    cryptoObj.getRandomValues(buf);
+    const high = buf[0] >>> 5;
+    const low = buf[1] >>> 6;
+    return (high * 67108864 + low) / 9007199254740992;
+  }
+  const req = typeof process !== "undefined" && ((_a = process.versions) == null ? void 0 : _a.node) && typeof globalThat.require === "function" ? globalThat.require : (() => {
+    try {
+      return eval("require");
+    } catch (error) {
+      return void 0;
+    }
+  })();
+  if (!req) {
+    throw new Error("No secure random source available in this environment");
+  }
+  const nodeCrypto = req("crypto");
+  if (typeof nodeCrypto.randomBytes !== "function") {
+    throw new Error("No secure random source available in this environment");
+  }
+  const b = nodeCrypto.randomBytes(7);
+  const x = (b[0] & 31) * 2 ** 48 + b[1] * 2 ** 40 + b[2] * 2 ** 32 + b[3] * 2 ** 24 + b[4] * 2 ** 16 + b[5] * 2 ** 8 + b[6];
+  return x / 9007199254740992;
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/lib/utils/math.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/utils/math.ts"],
-  "sourcesContent": ["/**\n * **EN**: Generate a random number within a specified range (inclusive on both ends)\n *\n * **CN**: 生成指定范围（两端包含）内的随机数\n *\n * @param min The minimum value (inclusive) | 最小值（包含）\n * @param max The maximum value (inclusive) | 最大值（包含）\n *\n * @returns The generated random number | 生成的随机数\n */\nexport function random(min: number, max: number): number {\n  if (!Number.isFinite(min) || !Number.isFinite(max)) {\n    throw new TypeError('min and max must be finite numbers');\n  }\n  if (Math.floor(min) !== min || Math.floor(max) !== max) {\n    throw new TypeError('min and max must be integers');\n  }\n  if (min > max) {\n    [min, max] = [max, min];\n  }\n\n  // Try to require Node.js crypto\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  let nodeCrypto: any;\n  if (typeof process !== 'undefined' && process.versions?.node) {\n    try {\n      // eslint-disable-next-line @typescript-eslint/no-var-requires\n      nodeCrypto = require('crypto');\n    } catch {\n      // ignore\n    }\n  }\n\n  // 1. Node.js crypto.randomInt\n  if (nodeCrypto?.randomInt) {\n    return nodeCrypto.randomInt(min, max + 1);\n  }\n\n  // 2. Web Crypto (Browsers or Node 19+ webcrypto)\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const webCrypto: Crypto | undefined = (globalThis as any).crypto || nodeCrypto?.webcrypto;\n\n  if (webCrypto?.getRandomValues) {\n    const range = max - min + 1;\n    if (range <= 0) return min;\n\n    // 使用拒绝采样避免 (2^32 % range) 造成的微小偏差\n    const maxUint32 = 0xffffffff;\n    const limit = Math.floor((maxUint32 + 1) / range) * range;\n    const arr = new Uint32Array(1);\n    let v: number;\n    do {\n      webCrypto.getRandomValues(arr);\n      v = arr[0];\n    } while (v >= limit);\n    return min + (v % range);\n  }\n\n  // 3. Fallback, should not be used for cryptographic purposes\n  const _math = Math;\n  return Math.floor(_math.random() * (max - min + 1)) + min;\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAUO,SAAS,OAAO,KAAa,KAAqB;AAVzD;AAWE,MAAI,CAAC,OAAO,SAAS,GAAG,KAAK,CAAC,OAAO,SAAS,GAAG,GAAG;AAClD,UAAM,IAAI,UAAU,oCAAoC;AAAA,EAC1D;AACA,MAAI,KAAK,MAAM,GAAG,MAAM,OAAO,KAAK,MAAM,GAAG,MAAM,KAAK;AACtD,UAAM,IAAI,UAAU,8BAA8B;AAAA,EACpD;AACA,MAAI,MAAM,KAAK;AACb,KAAC,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG;AAAA,EACxB;AAIA,MAAI;AACJ,MAAI,OAAO,YAAY,iBAAe,aAAQ,aAAR,mBAAkB,OAAM;AAC5D,QAAI;AAEF,mBAAa,QAAQ,QAAQ;AAAA,IAC/B,QAAE;AAAA,IAEF;AAAA,EACF;AAGA,MAAI,yCAAY,WAAW;AACzB,WAAO,WAAW,UAAU,KAAK,MAAM,CAAC;AAAA,EAC1C;AAIA,QAAM,YAAiC,WAAmB,WAAU,yCAAY;AAEhF,MAAI,uCAAW,iBAAiB;AAC9B,UAAM,QAAQ,MAAM,MAAM;AAC1B,QAAI,SAAS;AAAG,aAAO;AAGvB,UAAM,YAAY;AAClB,UAAM,QAAQ,KAAK,OAAO,YAAY,KAAK,KAAK,IAAI;AACpD,UAAM,MAAM,IAAI,YAAY,CAAC;AAC7B,QAAI;AACJ,OAAG;AACD,gBAAU,gBAAgB,GAAG;AAC7B,UAAI,IAAI,CAAC;AAAA,IACX,SAAS,KAAK;AACd,WAAO,MAAO,IAAI;AAAA,EACpB;AAGA,QAAM,QAAQ;AACd,SAAO,KAAK,MAAM,MAAM,OAAO,KAAK,MAAM,MAAM,EAAE,IAAI;AACxD;",
-  "names": []
+  "sourcesContent": ["/**\n * **EN**: Generate a random decimal number between 0 and 1\n *\n * **CN**: 生成一个0~1之间的小数\n *\n * @returns The generated random number | 生成的随机数\n */\nexport function random(): number;\n/**\n * **EN**: Generate a random integer within a specified range (inclusive on both ends)\n *\n * **CN**: 生成指定范围（两端包含）内的随机整数\n *\n * @param min The minimum value (inclusive) | 最小值（包含）\n * @param max The maximum value (inclusive) | 最大值（包含）\n *\n * @returns The generated random integer | 生成的随机整数\n */\nexport function random(min: number, max: number): number;\nexport function random(min?: number, max?: number): number {\n  if (min == null && max == null) {\n    return randomLikeMath();\n  }\n  if (min == null || max == null) {\n    throw new TypeError('Both min and max must be provided');\n  }\n  if (!Number.isFinite(min) || !Number.isFinite(max)) {\n    throw new TypeError('min and max must be finite numbers');\n  }\n  if (Math.floor(min) !== min || Math.floor(max) !== max) {\n    throw new TypeError('min and max must be integers');\n  }\n  const globalThat =\n    typeof globalThis !== 'undefined'\n      ? globalThis\n      : typeof window !== 'undefined'\n        ? window\n        : typeof global !== 'undefined'\n          ? global\n          : ({} as typeof globalThis);\n  if (min > max) {\n    [min, max] = [max, min];\n  }\n\n  // Try to require Node.js crypto\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  let nodeCrypto: any;\n  if (typeof process !== 'undefined' && process.versions?.node) {\n    try {\n      // eslint-disable-next-line @typescript-eslint/no-var-requires\n      nodeCrypto = require('crypto');\n    } catch (error) {\n      // ignore\n    }\n  }\n\n  // 1. Node.js crypto.randomInt\n  if (nodeCrypto?.randomInt) {\n    return nodeCrypto.randomInt(min, max + 1);\n  }\n\n  // 2. Web Crypto (Browsers or Node 19+ webcrypto)\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const webCrypto: Crypto | undefined = globalThat.crypto || nodeCrypto?.webcrypto;\n\n  if (webCrypto?.getRandomValues) {\n    const range = max - min + 1;\n    if (range <= 0) return min;\n\n    // Use rejection sampling to avoid the slight bias caused by (2^32 % range).\n    const maxUint32 = 0xffffffff;\n    const limit = Math.floor((maxUint32 + 1) / range) * range;\n    const arr = new Uint32Array(1);\n    let v: number;\n    do {\n      webCrypto.getRandomValues(arr);\n      v = arr[0];\n    } while (v >= limit);\n    return min + (v % range);\n  }\n\n  // 3. Fallback\n  return randomLikeMath();\n}\n\nfunction randomLikeMath(): number {\n  const globalThat =\n    typeof globalThis !== 'undefined'\n      ? globalThis\n      : typeof window !== 'undefined'\n        ? window\n        : typeof global !== 'undefined'\n          ? global\n          : ({} as typeof globalThis);\n  // Browser / Node(with webcrypto)\n  const cryptoObj = globalThat.crypto;\n  if (cryptoObj?.getRandomValues) {\n    const buf = new Uint32Array(2);\n    cryptoObj.getRandomValues(buf);\n\n    // 53-bit precision, mapped to [0, 1)\n    const high = buf[0] >>> 5; // 27 bits\n    const low = buf[1] >>> 6; // 26 bits\n    return (high * 67108864 + low) / 9007199254740992; // 2^53\n  }\n\n  // Old Node fallback (No webcrypto)\n  // Use eval('require') to avoid \"require is not defined\" error during browser bundling\n  const req: NodeRequire | undefined =\n    typeof process !== 'undefined' &&\n    process.versions?.node &&\n    typeof (globalThat as unknown as { require?: unknown }).require === 'function'\n      ? (globalThat as unknown as { require: NodeRequire }).require\n      : (() => {\n          try {\n            // eslint-disable-next-line no-eval\n            return eval('require') as NodeRequire;\n          } catch (error) {\n            return undefined;\n          }\n        })();\n\n  if (!req) {\n    throw new Error('No secure random source available in this environment');\n  }\n\n  // eslint-disable-next-line @typescript-eslint/no-var-requires\n  const nodeCrypto = req('crypto') as { randomBytes?: (size: number) => Uint8Array };\n  if (typeof nodeCrypto.randomBytes !== 'function') {\n    throw new Error('No secure random source available in this environment');\n  }\n\n  const b = nodeCrypto.randomBytes(7); // 56 bits\n  const x =\n    (b[0] & 0x1f) * 2 ** 48 + b[1] * 2 ** 40 + b[2] * 2 ** 32 + b[3] * 2 ** 24 + b[4] * 2 ** 16 + b[5] * 2 ** 8 + b[6];\n\n  return x / 9007199254740992; // 2^53 => [0,1)\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAmBO,SAAS,OAAO,KAAc,KAAsB;AAnB3D;AAoBE,MAAI,OAAO,QAAQ,OAAO,MAAM;AAC9B,WAAO,eAAe;AAAA,EACxB;AACA,MAAI,OAAO,QAAQ,OAAO,MAAM;AAC9B,UAAM,IAAI,UAAU,mCAAmC;AAAA,EACzD;AACA,MAAI,CAAC,OAAO,SAAS,GAAG,KAAK,CAAC,OAAO,SAAS,GAAG,GAAG;AAClD,UAAM,IAAI,UAAU,oCAAoC;AAAA,EAC1D;AACA,MAAI,KAAK,MAAM,GAAG,MAAM,OAAO,KAAK,MAAM,GAAG,MAAM,KAAK;AACtD,UAAM,IAAI,UAAU,8BAA8B;AAAA,EACpD;AACA,QAAMA,cACJ,OAAO,eAAe,cAClB,aACA,OAAO,WAAW,cAChB,SACA,OAAO,WAAW,cAChB,SACC,CAAC;AACZ,MAAI,MAAM,KAAK;AACb,KAAC,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG;AAAA,EACxB;AAIA,MAAIC;AACJ,MAAI,OAAO,YAAY,iBAAe,aAAQ,aAAR,mBAAkB,OAAM;AAC5D,QAAI;AAEF,MAAAA,cAAa,QAAQ,QAAQ;AAAA,IAC/B,SAAS,OAAP;AAAA,IAEF;AAAA,EACF;AAGA,MAAIA,eAAA,gBAAAA,YAAY,WAAW;AACzB,WAAOA,YAAW,UAAU,KAAK,MAAM,CAAC;AAAA,EAC1C;AAIA,QAAM,YAAgCD,YAAW,WAAUC,eAAA,gBAAAA,YAAY;AAEvE,MAAI,uCAAW,iBAAiB;AAC9B,UAAM,QAAQ,MAAM,MAAM;AAC1B,QAAI,SAAS;AAAG,aAAO;AAGvB,UAAM,YAAY;AAClB,UAAM,QAAQ,KAAK,OAAO,YAAY,KAAK,KAAK,IAAI;AACpD,UAAM,MAAM,IAAI,YAAY,CAAC;AAC7B,QAAI;AACJ,OAAG;AACD,gBAAU,gBAAgB,GAAG;AAC7B,UAAI,IAAI,CAAC;AAAA,IACX,SAAS,KAAK;AACd,WAAO,MAAO,IAAI;AAAA,EACpB;AAGA,SAAO,eAAe;AACxB;AAEA,SAAS,iBAAyB;AArFlC;AAsFE,QAAM,aACJ,OAAO,eAAe,cAClB,aACA,OAAO,WAAW,cAChB,SACA,OAAO,WAAW,cAChB,SACC,CAAC;AAEZ,QAAM,YAAY,WAAW;AAC7B,MAAI,uCAAW,iBAAiB;AAC9B,UAAM,MAAM,IAAI,YAAY,CAAC;AAC7B,cAAU,gBAAgB,GAAG;AAG7B,UAAM,OAAO,IAAI,CAAC,MAAM;AACxB,UAAM,MAAM,IAAI,CAAC,MAAM;AACvB,YAAQ,OAAO,WAAW,OAAO;AAAA,EACnC;AAIA,QAAM,MACJ,OAAO,YAAY,iBACnB,aAAQ,aAAR,mBAAkB,SAClB,OAAQ,WAAgD,YAAY,aAC/D,WAAmD,WACnD,MAAM;AACL,QAAI;AAEF,aAAO,KAAK,SAAS;AAAA,IACvB,SAAS,OAAP;AACA,aAAO;AAAA,IACT;AAAA,EACF,GAAG;AAET,MAAI,CAAC,KAAK;AACR,UAAM,IAAI,MAAM,uDAAuD;AAAA,EACzE;AAGA,QAAM,aAAa,IAAI,QAAQ;AAC/B,MAAI,OAAO,WAAW,gBAAgB,YAAY;AAChD,UAAM,IAAI,MAAM,uDAAuD;AAAA,EACzE;AAEA,QAAM,IAAI,WAAW,YAAY,CAAC;AAClC,QAAM,KACH,EAAE,CAAC,IAAI,MAAQ,KAAK,KAAK,EAAE,CAAC,IAAI,KAAK,KAAK,EAAE,CAAC,IAAI,KAAK,KAAK,EAAE,CAAC,IAAI,KAAK,KAAK,EAAE,CAAC,IAAI,KAAK,KAAK,EAAE,CAAC,IAAI,KAAK,IAAI,EAAE,CAAC;AAEnH,SAAO,IAAI;AACb;",
+  "names": ["globalThat", "nodeCrypto"]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tiny-codes/react-easy",
-  "version": "1.7.5",
+  "version": "1.7.7",
   "description": "Simplify React and AntDesign development with practical components and hooks",
   "keywords": [
     "react",
@@ -33,9 +33,11 @@
   "scripts": {
     "build": "run-s build-core correct-sourcemap",
     "build-core": "father build",
+    "build-storybook": "storybook build",
     "correct-sourcemap": "tsx scripts/correct-sourcemap.ts",
     "prepare": "husky",
-    "prepublishOnly": "npm run build"
+    "prepublishOnly": "npm run build",
+    "storybook": "storybook dev -p 6006"
   },
   "dependencies": {
     "@lexical/react": "^0.33.1",
@@ -44,12 +46,14 @@
     "crypto-js": "^4.2.0",
     "lexical": "^0.33.1",
     "react-contexify": "^6.0.0",
-    "react-use": "^17.6.0",
     "sockjs-client": "^1.6.1"
   },
   "devDependencies": {
+    "@storybook/addon-docs": "^10.2.12",
+    "@storybook/addon-links": "^10.2.12",
+    "@storybook/react-vite": "^10.2.12",
     "@tiny-codes/code-style-all-in-one": "^1.1.5",
-    "@tiny-codes/eslint-plugin-react-hooks": "^4.6.0",
+    "@tiny-codes/eslint-plugin-react-hooks": "^5.2.0",
     "@types/crypto-js": "^4.2.2",
     "@types/jest": "^29.5.14",
     "@types/node": "^22.15.32",
@@ -57,16 +61,19 @@
     "@types/react-dom": "^19.0.4",
     "@types/react-is": "^19.0.0",
     "@types/sockjs-client": "^1.5.4",
-    "antd": "^5.24.5",
+    "antd": "^5.29.3",
+    "eslint-plugin-storybook": "10.2.13",
     "father": "^4.5.2",
     "jest": "^29.7.0",
-    "npm-run-all2": "^7.0.2",
+    "npm-run-all2": "^8.0.4",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-is": "^19.0.0",
+    "storybook": "^10.2.12",
     "ts-jest": "^29.3.0",
     "tsx": "^4.20.5",
-    "typescript": "^5.8.2"
+    "typescript": "^5.8.2",
+    "vite": "^7.3.1"
   },
   "peerDependencies": {
     "antd": ">=5.1.0",