enr 2.0.4 → 2.0.6

package/{es/customHooks/useRipples/use-lazy-ripple.js → customHooks/useRipples/use-lazy-ripple.es.js}

@@ -3,7 +3,7 @@ import { isNull } from 'a-type-of-js';
 import { useRef, useState, useEffect } from 'react';
 
 /**
- *  动态加载包含的自定义的钩子
+ * ## 懒加载使用涟漪 hook
  * @param canvas
  * @param option
  */
@@ -18,6 +18,8 @@ function useLazyRipples(canvas, option) {
     const [isLoading, setIsLoading] = useState(false);
     // 错误状态
     const [error, setError] = useState(null);
+    // 参数
+    const optionRef = useRef(option);
     /**  卸载  */
     function unmounted() {
         isUnmounted.current = true;
@@ -28,6 +30,10 @@ function useLazyRipples(canvas, option) {
             }
         }, 0);
     }
+    // 更新 option，防止加载 option 为旧数据
+    useEffect(() => {
+        optionRef.current = option;
+    }, [option]);
     useEffect(() => {
         isUnmounted.current = false;
         /**  非空检验（这里一般都是有值的，除非故障）  */
@@ -37,12 +43,12 @@ function useLazyRipples(canvas, option) {
         // 设置加载状态
         setIsLoading(true);
         isLoaded.current = true;
-        import('./class-ripple.js')
+        import('./class-ripple.es.js')
             .then(module => {
             if (isNull(canvas.current) || isUnmounted.current) {
                 return;
             }
-            ripples.current = new module.Ripples(canvas.current, option);
+            ripples.current = new module.Ripples(canvas.current, optionRef.current);
             return;
         })
             .catch(err => {

package/{es/src/customHooks → customHooks}/useRipples/util-decoration-observable.d.ts

@@ -1,21 +1,17 @@
 /**
  * @module @enr/decoration-observable
- * @file decoration-observable.ts
+ * @file util-decoration-observable.ts
  * @description 监听者装饰器 「由于决定采用更*麻烦*的状态管理模式（@qqi/state），所以该文件并未被使用」
  * @author MrMudBean <Mr.MudBean@outlook.com>
- * @license MIT
  * @copyright 2026 ©️ MrMudBean
  * @since 2026-01-26 10:01
  * @version 2.0.0-alpha.0
- * @lastModified 2026-02-03 12:50
- *
- *
+ * @lastModified 2026-03-25 19:11
  */
 /**
  * ## 用于订阅模式的监听者装饰器
  * @param target 对象
  * @param key 键
- *
  * @example
  * ```ts
  * // 数据类

package/{cjs/customHooks/useTimeId.js → customHooks/useTimeId.cjs.js}

@@ -8,24 +8,17 @@ var react = require('react');
  * @file useTimeId.ts
  * @description 使用定时器返回的时间戳
  * @author MrMudBean <Mr.MudBean@outlook.com>
- * @license MIT
  * @copyright 2026 ©️ MrMudBean
  * @since 2025-01-07 11:20
  * @version 2.0.0-alpha.0
- * @lastModified 2026-02-07 08:12
+ * @lastModified 2026-03-25 19:11
  */
 /**
- *
  * ### 导出一个使用 `useRef` 创建的 `NodeJS.Timeout`
- *
  * 该数值在组件卸载时会自动调用 `clearTimeout` 清理
- *
  * @version 0.0.3
  * @see   https://lmssee.com/custom-hooks/use-time-id
  * @example
- *
- * 使用：
- *
  * ```ts
  *  // import { useTimeId } from 'enr';
  *  ...
@@ -37,13 +30,9 @@ var react = require('react');
  *      } ,delay);
  *  });
  *  ...
- *
  * ```
- *
  * 其实，正确的用法是这样的：
- *
  * ```ts
- *
  *  useEffect(()=>{
  *    const timeId = setTimeout(()=>{
  *        ...
@@ -51,15 +40,13 @@ var react = require('react');
  *
  *     return ()=> timeId && clearTimeout(timeId);
  *  });
- *
  * ```
- *
- * 根本就不用引入这个自定义 `hook` , 哈哈哈哈哈
- *
  */
 function useTimeId() {
     const timeId = react.useRef(undefined);
-    react.useEffect(() => () => timeId.current && clearTimeout(timeId.current), []);
+    react.useEffect(() => () => {
+        timeId.current && clearTimeout(timeId.current);
+    }, []);
     return timeId;
 }
 

package/{es/src/customHooks → customHooks}/useTimeId.d.ts

@@ -3,24 +3,17 @@
  * @file useTimeId.ts
  * @description 使用定时器返回的时间戳
  * @author MrMudBean <Mr.MudBean@outlook.com>
- * @license MIT
  * @copyright 2026 ©️ MrMudBean
  * @since 2025-01-07 11:20
  * @version 2.0.0-alpha.0
- * @lastModified 2026-02-07 08:12
+ * @lastModified 2026-03-25 19:11
  */
 /**
- *
  * ### 导出一个使用 `useRef` 创建的 `NodeJS.Timeout`
- *
  * 该数值在组件卸载时会自动调用 `clearTimeout` 清理
- *
  * @version 0.0.3
  * @see   https://lmssee.com/custom-hooks/use-time-id
  * @example
- *
- * 使用：
- *
  * ```ts
  *  // import { useTimeId } from 'enr';
  *  ...
@@ -32,13 +25,9 @@
  *      } ,delay);
  *  });
  *  ...
- *
  * ```
- *
  * 其实，正确的用法是这样的：
- *
  * ```ts
- *
  *  useEffect(()=>{
  *    const timeId = setTimeout(()=>{
  *        ...
@@ -46,10 +35,6 @@
  *
  *     return ()=> timeId && clearTimeout(timeId);
  *  });
- *
  * ```
- *
- * 根本就不用引入这个自定义 `hook` , 哈哈哈哈哈
- *
  */
-export declare function useTimeId(): import("react").RefObject<NodeJS.Timeout | undefined>;
+export declare function useTimeId(): import("react").RefObject<number | undefined>;

package/{es/customHooks/useTimeId.js → customHooks/useTimeId.es.js}

@@ -6,24 +6,17 @@ import { useRef, useEffect } from 'react';
  * @file useTimeId.ts
  * @description 使用定时器返回的时间戳
  * @author MrMudBean <Mr.MudBean@outlook.com>
- * @license MIT
  * @copyright 2026 ©️ MrMudBean
  * @since 2025-01-07 11:20
  * @version 2.0.0-alpha.0
- * @lastModified 2026-02-07 08:12
+ * @lastModified 2026-03-25 19:11
  */
 /**
- *
  * ### 导出一个使用 `useRef` 创建的 `NodeJS.Timeout`
- *
  * 该数值在组件卸载时会自动调用 `clearTimeout` 清理
- *
  * @version 0.0.3
  * @see   https://lmssee.com/custom-hooks/use-time-id
  * @example
- *
- * 使用：
- *
  * ```ts
  *  // import { useTimeId } from 'enr';
  *  ...
@@ -35,13 +28,9 @@ import { useRef, useEffect } from 'react';
  *      } ,delay);
  *  });
  *  ...
- *
  * ```
- *
  * 其实，正确的用法是这样的：
- *
  * ```ts
- *
  *  useEffect(()=>{
  *    const timeId = setTimeout(()=>{
  *        ...
@@ -49,15 +38,13 @@ import { useRef, useEffect } from 'react';
  *
  *     return ()=> timeId && clearTimeout(timeId);
  *  });
- *
  * ```
- *
- * 根本就不用引入这个自定义 `hook` , 哈哈哈哈哈
- *
  */
 function useTimeId() {
     const timeId = useRef(undefined);
-    useEffect(() => () => timeId.current && clearTimeout(timeId.current), []);
+    useEffect(() => () => {
+        timeId.current && clearTimeout(timeId.current);
+    }, []);
     return timeId;
 }
 

package/{cjs/index.js → index.cjs.js}

@@ -1,22 +1,22 @@
 'use strict';
 
-var useLazyRipple = require('./customHooks/useRipples/use-lazy-ripple.js');
-var useTimeId = require('./customHooks/useTimeId.js');
-var useAnimationFrame = require('./customHooks/useAnimationFrame.js');
-var useInputIsComposing = require('./customHooks/useInputIsComposing.js');
-var index$4 = require('./customHooks/useRipples/index.js');
-var index$1 = require('./components/image/index.js');
-var index$3 = require('./components/ThemeContext/index.js');
-var index$2 = require('./components/switch/index.js');
-var index = require('./components/Details/index.js');
-var RipplesEle = require('./components/ripples/RipplesEle.js');
-var LazyRippleEle = require('./components/ripples/LazyRippleEle.js');
-var core = require('./customHooks/use-xcn/core.js');
-var layout = require('./components/layout/layout.js');
-var content = require('./components/layout/content.js');
-var footer = require('./components/layout/footer.js');
-var header = require('./components/layout/header.js');
-var sidebar = require('./components/layout/sidebar.js');
+var useLazyRipple = require('./customHooks/useRipples/use-lazy-ripple.cjs.js');
+var useTimeId = require('./customHooks/useTimeId.cjs.js');
+var useAnimationFrame = require('./customHooks/useAnimationFrame.cjs.js');
+var useInputIsComposing = require('./customHooks/useInputIsComposing.cjs.js');
+var index$4 = require('./customHooks/useRipples/index.cjs.js');
+var index$1 = require('./components/image/index.cjs.js');
+var index$3 = require('./components/ThemeContext/index.cjs.js');
+var index$2 = require('./components/switch/index.cjs.js');
+var index = require('./components/Details/index.cjs.js');
+var RipplesEle = require('./components/ripples/RipplesEle.cjs.js');
+var LazyRippleEle = require('./components/ripples/LazyRippleEle.cjs.js');
+var core = require('./customHooks/use-xcn/core.cjs.js');
+var layout = require('./components/layout/layout.cjs.js');
+var content = require('./components/layout/content.cjs.js');
+var footer = require('./components/layout/footer.cjs.js');
+var header = require('./components/layout/header.cjs.js');
+var sidebar = require('./components/layout/sidebar.cjs.js');
 
 
 

package/{es/index.js → index.es.js}

@@ -1,17 +1,17 @@
-export { useLazyRipples } from './customHooks/useRipples/use-lazy-ripple.js';
-export { useTimeId } from './customHooks/useTimeId.js';
-export { useAnimationFrame } from './customHooks/useAnimationFrame.js';
-export { useInputIsComposing } from './customHooks/useInputIsComposing.js';
-export { useRipples } from './customHooks/useRipples/index.js';
-export { Image as EnImage, Image } from './components/image/index.js';
-export { ThemeColorModeProvider, useColorMode } from './components/ThemeContext/index.js';
-export { Switch as EnSwitch, Switch } from './components/switch/index.js';
-export { Details, Details as EnDetails } from './components/Details/index.js';
-export { BackgroundRipple } from './components/ripples/RipplesEle.js';
-export { LazyBackgroundRipple } from './components/ripples/LazyRippleEle.js';
-export { _en, _en as en, _en as enc } from './customHooks/use-xcn/core.js';
-export { Layout as EnLayout, Layout } from './components/layout/layout.js';
-export { InternalValueC as EnLayoutContent, InternalValueC as LayoutContent } from './components/layout/content.js';
-export { InternalValueF as EnLayoutFooter, InternalValueF as LayoutFooter } from './components/layout/footer.js';
-export { InternalValueH as EnLayoutHeader, InternalValueH as LayoutHeader } from './components/layout/header.js';
-export { InternalValueS as EnLayoutSideBar, InternalValueS as LayoutSideBar } from './components/layout/sidebar.js';
+export { useLazyRipples } from './customHooks/useRipples/use-lazy-ripple.es.js';
+export { useTimeId } from './customHooks/useTimeId.es.js';
+export { useAnimationFrame } from './customHooks/useAnimationFrame.es.js';
+export { useInputIsComposing } from './customHooks/useInputIsComposing.es.js';
+export { useRipples } from './customHooks/useRipples/index.es.js';
+export { Image as EnImage, Image } from './components/image/index.es.js';
+export { ThemeColorModeProvider, useColorMode } from './components/ThemeContext/index.es.js';
+export { Switch as EnSwitch, Switch } from './components/switch/index.es.js';
+export { Details, Details as EnDetails } from './components/Details/index.es.js';
+export { BackgroundRipple } from './components/ripples/RipplesEle.es.js';
+export { LazyBackgroundRipple } from './components/ripples/LazyRippleEle.es.js';
+export { _en, _en as en, _en as enc } from './customHooks/use-xcn/core.es.js';
+export { Layout as EnLayout, Layout } from './components/layout/layout.es.js';
+export { InternalValueC as EnLayoutContent, InternalValueC as LayoutContent } from './components/layout/content.es.js';
+export { InternalValueF as EnLayoutFooter, InternalValueF as LayoutFooter } from './components/layout/footer.es.js';
+export { InternalValueH as EnLayoutHeader, InternalValueH as LayoutHeader } from './components/layout/header.es.js';
+export { InternalValueS as EnLayoutSideBar, InternalValueS as LayoutSideBar } from './components/layout/sidebar.es.js';

package/package.json

@@ -1,44 +1,51 @@
 {
   "type": "module",
   "name": "enr",
-  "version": "2.0.4",
+  "version": "2.0.6",
   "description": "一个简单的 ui",
   "peerDependencies": {
     "react": "^19.1.0",
     "react-dom": "^19.1.0"
   },
   "dependencies": {
-    "styled-component": "^2.6.0",
-    "@babel/runtime": "^7.28.6",
+    "@babel/runtime": "^7.29.2",
     "@qqi/state": "^0.0.0",
-    "a-element-inline-style": "^1.0.1",
-    "a-js-tools": "^2.0.1",
-    "a-type-of-js": "^2.0.0",
-    "xcn": "^1.1.0"
+    "a-element-inline-style": "^1.0.2",
+    "a-js-tools": "^2.0.2",
+    "a-type-of-js": "^2.0.1",
+    "styled-component": "^2.6.0",
+    "xcn": "^1.1.2"
   },
   "sideEffects": [
     "*.scss",
     "*.css"
   ],
-  "main": "cjs/index.js",
-  "module": "es/index.js",
-  "types": "es/src/index.d.ts",
+  "main": "index.cjs.js",
+  "module": "index.es.js",
+  "types": "index.d.ts",
   "author": {
     "name": "泥豆君",
     "email": "Mr.MudBean@outlook.com",
     "url": "https://lmssee.com"
   },
   "files": [
+    "components",
+    "customHooks",
+    "shared",
     "styles",
-    "cjs",
-    "es",
+    "index.cjs.js",
+    "index.client.d.ts",
+    "index.d.ts",
+    "index.es.js",
+    "index.server.d.ts",
+    "index.umd.d.ts",
     "LICENSE",
     "README.md"
   ],
   "keywords": [
     "enr"
   ],
-  "homepage": "https://lmssee.com/quickUse",
+  "homepage": "https://lmssee.com/enr",
   "bugs": {
     "url": "https://github.com/MrMudBean/enr/issues",
     "email": "Mr.MudBean@outlook.com"
@@ -55,10 +62,10 @@
   "license": "MIT",
   "exports": {
     ".": {
-      "default": "./es/index.js",
-      "require": "./cjs/index.js",
-      "import": "./es/index.js",
-      "types": "./es/src/index.d.ts"
+      "default": "./index.es.js",
+      "require": "./index.cjs.js",
+      "import": "./index.es.js",
+      "types": "./index.d.ts"
     },
     "./common.scss": "./styles/common.scss",
     "./common.css": "./styles/common.css",

package/{cjs/shared/dist/es/cookie.js → shared/dist/es/cookie.cjs.js}

@@ -2,14 +2,16 @@
 
 var aTypeOfJs = require('a-type-of-js');
 
-/*****************************************************
- *  @Author earthnut
- *  @Email earthnut.dev@outlook.com
- *  @ProjectName nest
- *  @FileName cookie.ts
- *  @CreateDate  周五  01/10/2025
- *  @Description cookie 管理
- ******************************************************/
+/**
+ * @module @zza/cookie
+ * @file cookie.ts
+ * @description cookie 管理
+ * @author Mr.MudBean <Mr.MudBean@outlook.com>
+ * @copyright 2026 ©️ Mr.MudBean
+ * @since  01/10/2025
+ * @version 0.0.0
+ * @lastModified 2026-03-25 16:10
+ */
 const manageCookie = {
     getItem(keyItem) {
         return (decodeURIComponent(document.cookie.replace(new RegExp('(?:(?:^|.*;)\\s*' +

package/{es/shared/dist/es/cookie.js → shared/dist/es/cookie.es.js}

@@ -1,13 +1,15 @@
 import { typeOf } from 'a-type-of-js';
 
-/*****************************************************
- *  @Author earthnut
- *  @Email earthnut.dev@outlook.com
- *  @ProjectName nest
- *  @FileName cookie.ts
- *  @CreateDate  周五  01/10/2025
- *  @Description cookie 管理
- ******************************************************/
+/**
+ * @module @zza/cookie
+ * @file cookie.ts
+ * @description cookie 管理
+ * @author Mr.MudBean <Mr.MudBean@outlook.com>
+ * @copyright 2026 ©️ Mr.MudBean
+ * @since  01/10/2025
+ * @version 0.0.0
+ * @lastModified 2026-03-25 16:10
+ */
 const manageCookie = {
     getItem(keyItem) {
         return (decodeURIComponent(document.cookie.replace(new RegExp('(?:(?:^|.*;)\\s*' +

package/{cjs/shared/dist/es/log-production.js → shared/dist/es/log-production.cjs.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var virtualDog = require('./node_modules/.pnpm/@qqi_log@1.1.4/node_modules/@qqi/log/es/virtual-dog.js');
+var virtualDog = require('./node_modules/.pnpm/@qqi_log@1.1.4/node_modules/@qqi/log/es/virtual-dog.cjs.js');
 
 /**
  * @packageDocumentation

package/{es/shared/dist/es/log-production.js → shared/dist/es/log-production.es.js}

@@ -1,4 +1,4 @@
-import { DogVirtual as DogVirtualConstructor } from './node_modules/.pnpm/@qqi_log@1.1.4/node_modules/@qqi/log/es/virtual-dog.js';
+import { DogVirtual as DogVirtualConstructor } from './node_modules/.pnpm/@qqi_log@1.1.4/node_modules/@qqi/log/es/virtual-dog.es.js';
 
 /**
  * @packageDocumentation

package/{cjs/shared/dist/es/storage-store.js → shared/dist/es/storage-store.cjs.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 var aTypeOfJs = require('a-type-of-js');
-var storage = require('./storage.js');
+var storage = require('./storage.cjs.js');
 
 /**
  * @packageDocumentation

package/{es/shared/dist/es/storage-store.js → shared/dist/es/storage-store.es.js}

@@ -1,5 +1,5 @@
 import { isBusinessEmptyString } from 'a-type-of-js';
-import { storageMainLogic } from './storage.js';
+import { storageMainLogic } from './storage.es.js';
 
 /**
  * @packageDocumentation

package/styles/text.scss

@@ -1,4 +1,4 @@
-// 文本剧中
+// 文本居中
 .en-text-center {
   text-align: center;
 }
@@ -113,4 +113,4 @@
   100% {
     background-position: 0% 0%;
   }
-}
+}