@tiny-codes/react-easy 1.7.5 → 1.7.6

package/lib/hooks/useMovable.js

@@ -33,13 +33,13 @@ __export(useMovable_exports, {
 });
 module.exports = __toCommonJS(useMovable_exports);
 var import_react = require("react");
-var import_react_use = require("react-use");
+var import_useLocalStorage = __toESM(require("./useLocalStorage"));
 var import_useRefFunction = __toESM(require("./useRefFunction"));
 var import_useRefValue = __toESM(require("./useRefValue"));
 var useMovable = (props) => {
   const { enabled, containerRef, ignoreSelectors, storageKey } = props;
   const storageKeyRef = (0, import_useRefValue.default)(storageKey);
-  const [savedPosition, savePosition] = (0, import_react_use.useLocalStorage)(storageKey ?? "");
+  const [savedPosition, savePosition] = (0, import_useLocalStorage.default)(storageKey ?? "");
   const savePositionRef = (0, import_useRefValue.default)(savePosition);
   const [position, setPosition] = (0, import_react.useState)(savedPosition ?? void 0);
   const positionRef = (0, import_useRefValue.default)(position);

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/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.6",
   "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",