oops-ui 0.0.13 → 1.0.0

package/styles/vars-color.scss

@@ -0,0 +1,295 @@
+// 亮度值
+
+// function a(str,...other) {
+//     str =str[0];
+
+//     return str.split(';').map(e=> e.trim()).filter(e=> e.length > 5).reduce((v,e)=> {
+//         const [tag, item] = e.split(':').map(e=> e.trim());
+//         const r = Number('0x' + item.slice(1,3));
+//         const g = Number('0x' + item.slice(3,5));
+//         const b = Number('0x' + item.slice(5));
+//         return v + e + ';' + tag + '-rgb' + ':' + r + ',' + g + ',' + b + ';'
+//     },'');
+// }
+
+$en-color-darkness-10: #fefefe;
+$en-color-darkness-10-rgb: 251, 251, 251;
+$en-color-darkness-15: #efefef;
+$en-color-darkness-15-rgb: 235, 235, 235;
+$en-color-darkness-20: #e0e0e0;
+$en-color-darkness-20-rgb: 219, 219, 219;
+$en-color-darkness-25: #d3d3d3;
+$en-color-darkness-25-rgb: 203, 203, 203;
+$en-color-darkness-30: #c3c3c3;
+$en-color-darkness-30-rgb: 188, 188, 188;
+$en-color-darkness-35: #b3b3b3;
+$en-color-darkness-35-rgb: 172, 172, 172;
+$en-color-darkness-40: #a3a3a3;
+$en-color-darkness-40-rgb: 156, 156, 156;
+$en-color-darkness-45: #939393;
+$en-color-darkness-45-rgb: 141, 141, 141;
+$en-color-darkness-50: #838383;
+$en-color-darkness-50-rgb: 125, 125, 125;
+$en-color-darkness-55: #737373;
+$en-color-darkness-55-rgb: 110, 110, 110;
+$en-color-darkness-60: #636363;
+$en-color-darkness-60-rgb: 94, 94, 94;
+$en-color-darkness-65: #535353;
+$en-color-darkness-65-rgb: 79, 79, 79;
+$en-color-darkness-70: #434343;
+$en-color-darkness-70-rgb: 64, 64, 64;
+$en-color-darkness-75: #333333;
+$en-color-darkness-75-rgb: 49, 49, 49;
+$en-color-darkness-80: #232323;
+$en-color-darkness-80-rgb: 34, 34, 34;
+$en-color-darkness-85: #131313;
+$en-color-darkness-85-rgb: 19, 19, 19;
+$en-color-darkness-90: #030303;
+$en-color-darkness-90-rgb: 3, 3, 3;
+//  纯色
+$en-color-blue: #0085f2;
+$en-color-blue-rgb: 0, 133, 242;
+$en-color-cyan: #36cfc9;
+$en-color-cyan-rgb: 54, 207, 201;
+$en-color-lime: #bae637;
+$en-color-lime-rgb: 186, 230, 55;
+$en-color-green: #009a46;
+$en-color-green-rgb: 0, 154, 70;
+$en-color-yellow: #928700;
+$en-color-yellow-rgb: 146, 135, 0;
+$en-color-volcano: #ff7a45;
+$en-color-volcano-rgb: 255, 122, 69;
+$en-color-gold: #ffc53d;
+$en-color-gold-rgb: 255, 197, 61;
+$en-color-orange: #ffa940;
+$en-color-orange-rgb: 255, 169, 64;
+$en-color-red: #d30038;
+$en-color-red-rgb: 211, 0, 56;
+$en-color-violet: #9b65ff;
+$en-color-violet-rgb: 155, 101, 255;
+$en-color-pink: #d00058;
+$en-color-pink-rgb: 208, 0, 88;
+$en-color-beige: #f0f2e6;
+$en-color-beige-rgb: 240, 242, 230;
+$en-color-black: #000000;
+$en-color-black-rgb: 0, 0, 0;
+$en-color-white: #ffffff;
+$en-color-white-rgb: 255, 255, 255;
+// mac 关闭按钮的色
+$en-color-close-button: rgb(252, 71, 70);
+$en-color-close-button-rgb: 252, 71, 70;
+// mac 关闭最小化的色
+$en-color-mini-size-button: rgb(245, 191, 79);
+$en-color-mini-size-button-rgb: 245, 191, 79;
+// mac 关闭最大化的色
+$en-color-full-size-button: rgb(99, 200, 86);
+$en-color-full-size-button-rgb: 99, 200, 86;
+
+$en-color-blue-10: #dce2f2;
+$en-color-blue-10-rgb: 220, 226, 242;
+$en-color-blue-20: #c1cff1;
+$en-color-blue-20-rgb: 193, 207, 241;
+$en-color-blue-30: #8cb4ff;
+$en-color-blue-30-rgb: 140, 180, 255;
+$en-color-blue-40: #5e9eff;
+$en-color-blue-40-rgb: 94, 158, 255;
+$en-color-blue-50: #0085f2;
+$en-color-blue-50-rgb: 0, 133, 242;
+$en-color-blue-60: #0069c2;
+$en-color-blue-60-rgb: 0, 105, 194;
+$en-color-blue-70: #004d92;
+$en-color-blue-70-rgb: 0, 77, 146;
+$en-color-blue-80: #003465;
+$en-color-blue-80-rgb: 0, 52, 101;
+$en-color-blue-90: #001b3a;
+$en-color-blue-90-rgb: 0, 27, 58;
+
+$en-color-cyan-10: #e6fffb;
+$en-color-cyan-10-rgb: 230, 255, 251;
+$en-color-cyan-20: #b5f5ec;
+$en-color-cyan-20-rgb: 181, 245, 236;
+$en-color-cyan-30: #87e8de;
+$en-color-cyan-30-rgb: 135, 232, 222;
+$en-color-cyan-40: #5cdbd3;
+$en-color-cyan-40-rgb: 92, 219, 211;
+$en-color-cyan-50: #13c2c2;
+$en-color-cyan-50-rgb: 19, 194, 194;
+$en-color-cyan-60: #08979c;
+$en-color-cyan-60-rgb: 8, 151, 156;
+$en-color-cyan-70: #006d75;
+$en-color-cyan-70-rgb: 0, 109, 117;
+$en-color-cyan-80: #00474f;
+$en-color-cyan-80-rgb: 0, 71, 79;
+$en-color-cyan-90: #002329;
+$en-color-cyan-90-rgb: 0, 35, 41;
+
+$en-color-lime-10: #fcffe6;
+$en-color-lime-10-rgb: 252, 255, 230;
+$en-color-lime-20: #f4ffb8;
+$en-color-lime-20-rgb: 244, 255, 184;
+$en-color-lime-30: #eaff8f;
+$en-color-lime-30-rgb: 234, 255, 143;
+$en-color-lime-40: #d3f261;
+$en-color-lime-40-rgb: 211, 242, 97;
+$en-color-lime-50: #a0d911;
+$en-color-lime-50-rgb: 160, 217, 17;
+$en-color-lime-60: #7cb305;
+$en-color-lime-60-rgb: 124, 179, 5;
+$en-color-lime-70: #5b8c00;
+$en-color-lime-70-rgb: 91, 140, 0;
+$en-color-lime-80: #3f6600;
+$en-color-lime-80-rgb: 63, 102, 0;
+$en-color-lime-90: #254000;
+$en-color-lime-90-rgb: 37, 64, 0;
+
+$en-color-green-10: #a9f3ba;
+$en-color-green-10-rgb: 169, 243, 186;
+$en-color-green-20: #73e693;
+$en-color-green-20-rgb: 115, 230, 147;
+$en-color-green-30: #00d061;
+$en-color-green-30-rgb: 0, 208, 97;
+$en-color-green-40: #00b755;
+$en-color-green-40-rgb: 0, 183, 85;
+$en-color-green-50: #009a46;
+$en-color-green-50-rgb: 0, 154, 70;
+$en-color-green-60: #007936;
+$en-color-green-60-rgb: 0, 121, 54;
+$en-color-green-70: #005a26;
+$en-color-green-70-rgb: 0, 90, 38;
+$en-color-green-80: #003d18;
+$en-color-green-80-rgb: 0, 61, 24;
+$en-color-green-90: #00210a;
+$en-color-green-90-rgb: 0, 33, 10;
+
+$en-color-orange-10: #fff7e6;
+$en-color-orange-10-rgb: 255, 247, 230;
+$en-color-orange-20: #ffe7ba;
+$en-color-orange-20-rgb: 255, 231, 186;
+$en-color-orange-30: #ffd591;
+$en-color-orange-30-rgb: 255, 213, 145;
+$en-color-orange-40: #ffc069;
+$en-color-orange-40-rgb: 255, 192, 105;
+$en-color-orange-50: #fa8c16;
+$en-color-orange-50-rgb: 250, 140, 22;
+$en-color-orange-60: #fa8c16;
+$en-color-orange-60-rgb: 250, 140, 22;
+$en-color-orange-70: #ad4e00;
+$en-color-orange-70-rgb: 173, 78, 0;
+$en-color-orange-80: #873800;
+$en-color-orange-80-rgb: 135, 56, 0;
+$en-color-orange-90: #612500;
+$en-color-orange-90-rgb: 97, 37, 0;
+
+$en-color-gold-10: #fff7e6;
+$en-color-gold-10-rgb: 255, 247, 230;
+$en-color-gold-20: #ffe7ba;
+$en-color-gold-20-rgb: 255, 231, 186;
+$en-color-gold-30: #ffd591;
+$en-color-gold-30-rgb: 255, 213, 145;
+$en-color-gold-40: #ffc069;
+$en-color-gold-40-rgb: 255, 192, 105;
+$en-color-gold-50: #fa8c16;
+$en-color-gold-50-rgb: 250, 140, 22;
+$en-color-gold-60: #fa8c16;
+$en-color-gold-60-rgb: 250, 140, 22;
+$en-color-gold-70: #ad4e00;
+$en-color-gold-70-rgb: 173, 78, 0;
+$en-color-gold-80: #873800;
+$en-color-gold-80-rgb: 135, 56, 0;
+$en-color-gold-90: #612500;
+$en-color-gold-90-rgb: 97, 37, 0;
+
+$en-color-yellow-10: #f0e498;
+$en-color-yellow-10-rgb: 240, 228, 152;
+$en-color-yellow-20: #dfd172;
+$en-color-yellow-20-rgb: 223, 209, 114;
+$en-color-yellow-30: #c7b700;
+$en-color-yellow-30-rgb: 199, 183, 0;
+$en-color-yellow-40: #afa100;
+$en-color-yellow-40-rgb: 175, 161, 0;
+$en-color-yellow-50: #938700;
+$en-color-yellow-50-rgb: 147, 135, 0;
+$en-color-yellow-60: #746a00;
+$en-color-yellow-60-rgb: 116, 106, 0;
+$en-color-yellow-70: #564e00;
+$en-color-yellow-70-rgb: 86, 78, 0;
+$en-color-yellow-80: #3a3500;
+$en-color-yellow-80-rgb: 58, 53, 0;
+$en-color-yellow-90: #1f1c00;
+$en-color-yellow-90-rgb: 31, 28, 0;
+
+$en-color-volcano-10: #fff2e8;
+$en-color-volcano-10-rgb: 255, 242, 232;
+$en-color-volcano-20: #ffd8bf;
+$en-color-volcano-20-rgb: 255, 216, 191;
+$en-color-volcano-30: #ffbb96;
+$en-color-volcano-30-rgb: 255, 187, 150;
+$en-color-volcano-40: #ff9c6e;
+$en-color-volcano-40-rgb: 255, 156, 110;
+$en-color-volcano-50: #fa541c;
+$en-color-volcano-50-rgb: 250, 84, 28;
+$en-color-volcano-60: #d4380d;
+$en-color-volcano-60-rgb: 212, 56, 13;
+$en-color-volcano-70: #ad2102;
+$en-color-volcano-70-rgb: 173, 33, 2;
+$en-color-volcano-80: #871400;
+$en-color-volcano-80-rgb: 135, 20, 0;
+$en-color-volcano-90: #610b00;
+$en-color-volcano-90-rgb: 97, 11, 0;
+
+$en-color-red-10: #ffd9dc;
+$en-color-red-10-rgb: 255, 217, 220;
+$en-color-red-20: #ffc0c4;
+$en-color-red-20-rgb: 255, 192, 196;
+$en-color-red-30: #ff97a0;
+$en-color-red-30-rgb: 255, 151, 160;
+$en-color-red-40: #ff707f;
+$en-color-red-40-rgb: 255, 112, 127;
+$en-color-red-50: #ff2a51;
+$en-color-red-50-rgb: 255, 42, 81;
+$en-color-red-60: #d30038;
+$en-color-red-60-rgb: 211, 0, 56;
+$en-color-red-70: #9e0027;
+$en-color-red-70-rgb: 158, 0, 39;
+$en-color-red-80: #6f0019;
+$en-color-red-80-rgb: 111, 0, 25;
+$en-color-red-90: #40000a;
+$en-color-red-90-rgb: 64, 0, 10;
+
+$en-color-violet-10: #e6deff;
+$en-color-violet-10-rgb: 230, 222, 255;
+$en-color-violet-20: #d4c5ff;
+$en-color-violet-20-rgb: 212, 197, 255;
+$en-color-violet-30: #bea5ff;
+$en-color-violet-30-rgb: 190, 165, 255;
+$en-color-violet-40: #ae8aff;
+$en-color-violet-40-rgb: 174, 138, 255;
+$en-color-violet-50: #9b65ff;
+$en-color-violet-50-rgb: 155, 101, 255;
+$en-color-violet-60: #872bff;
+$en-color-violet-60-rgb: 135, 43, 255;
+$en-color-violet-70: #6800cf;
+$en-color-violet-70-rgb: 104, 0, 207;
+$en-color-violet-80: #480091;
+$en-color-violet-80-rgb: 72, 0, 145;
+$en-color-violet-90: #280056;
+$en-color-violet-90-rgb: 40, 0, 86;
+
+$en-color-pink-10: #ffd9df;
+$en-color-pink-10-rgb: 255, 217, 223;
+$en-color-pink-20: #ffbbc8;
+$en-color-pink-20-rgb: 255, 187, 200;
+$en-color-pink-30: #ff93aa;
+$en-color-pink-30-rgb: 255, 147, 170;
+$en-color-pink-40: #ff6d91;
+$en-color-pink-40-rgb: 255, 109, 145;
+$en-color-pink-50: #ff1f72;
+$en-color-pink-50-rgb: 255, 31, 114;
+$en-color-pink-60: #d00058;
+$en-color-pink-60-rgb: 208, 0, 88;
+$en-color-pink-70: #9e0041;
+$en-color-pink-70-rgb: 158, 0, 65;
+$en-color-pink-80: #6d002b;
+$en-color-pink-80-rgb: 109, 0, 43;
+$en-color-pink-90: #3f0015;
+$en-color-pink-90-rgb: 63, 0, 21;

package/styles/vars-size.scss

@@ -0,0 +1,6 @@
+// 空间尺寸
+$en-spacing-base: 8px;
+
+$en-font-size-base: 1rem;
+
+$en-transition-base: 0.1s;

package/type/components/ThemeContext/index.d.ts

@@ -0,0 +1,25 @@
+/**
+ * @license MIT
+ * enr@type/components/ThemeContext/index.d.ts 
+ * Copyright (c) 2025 earthnut.dev
+ * 请在项目根参看详细许可证明
+ */
+import { ThemeColorModeProviderProps, ThemeContextType } from './types';
+/**
+ * 使用主题颜色模式
+ *
+ * ```ts
+ * interface ThemeContextType {
+ *   autoColorMode: boolean;
+ *   colorMode: ColorMode;
+ *   colorModeClassName: string;
+ *   toggleColorMode: () => ColorMode;
+ *   setColorMode: (newColorMode: ColorMode) => ColorMode;
+ *   // 清理主题设置，让主题跟随系统
+ *   clearColorMode: () => void;
+ * }
+ * ```
+ */
+export declare function useColorMode(): ThemeContextType;
+/**    */
+export declare function ThemeColorModeProvider({ children, initialTheme }: ThemeColorModeProviderProps): import("react").JSX.Element;

package/type/components/ThemeContext/types.d.ts

@@ -0,0 +1,28 @@
+/**
+ * @license MIT
+ * enr@type/components/ThemeContext/types.d.ts 
+ * Copyright (c) 2025 earthnut.dev
+ * 请在项目根参看详细许可证明
+ */
+/**  颜色模式  */
+export type ColorMode = 'light' | 'dark';
+/**  主题  */
+export type ThemeContextType = {
+    /**  是否为自动模式 */
+    autoColorMode: boolean;
+    /** 获取颜色模式  */
+    colorMode: ColorMode;
+    /**  展示的当前颜色模型样式类 */
+    colorModeClassName: string;
+    /**  切换颜色模式  */
+    toggleColorMode: () => ColorMode;
+    /**  设置颜色模式（仅允许设置为 'dark'、或 `light`） */
+    setColorMode: (newColorMode: ColorMode) => ColorMode;
+    /**  设置为跟随系统  */
+    clearColorMode: () => void;
+};
+export type ThemeColorModeProviderProps = {
+    children?: React.ReactNode;
+    /**  初始化默认的主题值  */
+    initialTheme: ColorMode;
+};

package/type/components/button/button.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @license MIT
+ * enr@type/components/button/button.d.ts 
+ * Copyright (c) 2025 earthnut.dev
+ * 请在项目根参看详细许可证明
+ */
+/**
+ * 按钮
+ */
+export default function Button(): import("react").JSX.Element;

package/type/components/button/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @license MIT
+ * enr@type/components/button/index.d.ts 
+ * Copyright (c) 2025 earthnut.dev
+ * 请在项目根参看详细许可证明
+ */
+import Button from './button';
+export { Button };
+export default Button;

package/type/components/image/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @license MIT
+ * enr@type/components/image/index.d.ts 
+ * Copyright (c) 2025 earthnut.dev
+ * 请在项目根参看详细许可证明
+ */
+import { EnImageProps } from './types';
+/**  简单的图像  */
+declare const Image: import("react").ForwardRefExoticComponent<Omit<EnImageProps, "ref"> & import("react").RefAttributes<HTMLImageElement>>;
+export { Image };
+export type { EnImageProps };

package/type/components/image/types.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @license MIT
+ * enr@type/components/image/types.d.ts 
+ * Copyright (c) 2025 earthnut.dev
+ * 请在项目根参看详细许可证明
+ */
+import { DetailedHTMLProps, ImgHTMLAttributes } from 'react';
+export type EnImageProps = {
+    /**  下载错误时展示的图像  */
+    errorSrc?: string;
+    /**  加载中的图像  */
+    loadingSrc?: string;
+} & DetailedHTMLProps<ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>;

package/type/components/image/useSrcChange.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @license MIT
+ * enr@type/components/image/useSrcChange.d.ts 
+ * Copyright (c) 2025 earthnut.dev
+ * 请在项目根参看详细许可证明
+ */
+/** 当地址触发变更 */
+export declare function useSrcChange(src: string, fallbackSrc?: string): {
+    resultSrc: string;
+    loadComplete: number;
+};

package/type/components/layout/content.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @license MIT
+ * enr@type/components/layout/content.d.ts 
+ * Copyright (c) 2025 earthnut.dev
+ * 请在项目根参看详细许可证明
+ */
+import { HTMLAttributes } from 'react';
+/**
+ *
+ * layout content
+ *
+ *
+ * @param {string} className  布局的类名
+ *
+ */
+declare const InternalValueC: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+export { InternalValueC };

package/type/components/layout/footer.d.ts

@@ -0,0 +1,21 @@
+/**
+ * @license MIT
+ * enr@type/components/layout/footer.d.ts 
+ * Copyright (c) 2025 earthnut.dev
+ * 请在项目根参看详细许可证明
+ */
+import { LayoutFooterProps } from './types';
+/**
+ *
+ * layout footer
+ *
+ * 布局底部
+ *
+ * @param className 自定义类名
+ * @param height 自定义高度
+ * @param props 其他属性
+ * @returns ReactElement
+ *
+ */
+declare const InternalValueF: import("react").ForwardRefExoticComponent<LayoutFooterProps & import("react").RefAttributes<HTMLDivElement>>;
+export { InternalValueF };

package/type/components/layout/get-value.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @license MIT
+ * enr@type/components/layout/get-value.d.ts 
+ * Copyright (c) 2025 earthnut.dev
+ * 请在项目根参看详细许可证明
+ */
+/**
+ * 获取数值
+ */
+export declare function getValue(value: number | string): string | 0;

package/type/components/layout/header.d.ts

@@ -0,0 +1,23 @@
+/**
+ * @license MIT
+ * enr@type/components/layout/header.d.ts 
+ * Copyright (c) 2025 earthnut.dev
+ * 请在项目根参看详细许可证明
+ */
+import { LayoutHeaderProps } from './types';
+/**
+ *
+ * layout header
+ *
+ * 布局头部
+ *
+ * @param className 自定义类名
+ * @param height 高度
+ *    缺省值为 2.8rem，当未在 `Layout` 中使用，该值不起作用
+ * @param noSticky 是否取消悬挂粘连
+ *    缺省值为 false
+ * @param props 其他属性
+ * @returns ReactElement
+ */
+declare const InternalValueH: import("react").ForwardRefExoticComponent<LayoutHeaderProps & import("react").RefAttributes<HTMLDivElement>>;
+export { InternalValueH };

package/type/components/layout/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @license MIT
+ * enr@type/components/layout/index.d.ts 
+ * Copyright (c) 2025 earthnut.dev
+ * 请在项目根参看详细许可证明
+ */
+export { Layout, Layout as EnLayout, LayoutContent, LayoutContent as EnLayoutContent, LayoutHeader, LayoutHeader as EnLayoutHeader, LayoutFooter, LayoutFooter as EnLayoutFooter, LayoutSideBar, LayoutSideBar as EnLayoutSideBar, } from './layout';
+export type { LayoutProps, LayoutSideBarProps, LayoutHeaderProps, LayoutFooterProps, } from './types';

package/type/components/layout/is-fragment.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @license MIT
+ * enr@type/components/layout/is-fragment.d.ts 
+ * Copyright (c) 2025 earthnut.dev
+ * 请在项目根参看详细许可证明
+ */
+import { ReactNode } from 'react';
+/**  判断是否为 Fragment 元素  */
+export declare function isFragment(element: ReactNode): boolean;

package/type/components/layout/layout.d.ts

@@ -0,0 +1,55 @@
+/**
+ * @license MIT
+ * enr@type/components/layout/layout.d.ts 
+ * Copyright (c) 2025 earthnut.dev
+ * 请在项目根参看详细许可证明
+ */
+import { InternalValueH as LayoutHeader } from './header';
+import { InternalValueS as LayoutSideBar } from './sidebar';
+import { InternalValueC as LayoutContent } from './content';
+import { InternalValueF as LayoutFooter } from './footer';
+import { LayoutProps } from './types';
+/**
+ *
+ * ## layout
+ *
+ * 布局组件，用于构建页面布局。
+ *
+ * ***为了照顾在 next.js 中的服务端组件中使用，在拥有 `side bar` 时 `Layout` 的 `height` 为百分比时会触发 side bar 滚动***
+ *
+ * @param {string} className  布局的类名
+ * @param {CSSProperties} style  布局的样式
+ * @param {string | number} width  布局的宽
+ * @param {string | number} height  布局的高
+ * @example
+ *
+ * ```jsx
+ *  <Layout>
+ *    <LayoutHeader> 头部 </LayoutHeader>
+ *    <LayoutSideBar> 侧边栏 </LayoutSideBar>
+ *    <LayoutContent> 内容区 </LayoutContent>
+ *    <LayoutFooter> 页脚 </LayoutFooter>
+ *  </Layout>
+ *
+ * ```
+ *
+ * 该组件仅接受 `LayoutHeader`、`LayoutSideBar`、`LayoutContent` 和 `LayoutFooter` 作为（直接）子组件。
+ *
+ * 可任意搭配使用，但不推荐使用无 `LayoutContent` 使用。
+ *
+ * 目前已知当 `Layout` 嵌套 `Layout` 时，需要设定内部 `Layout` 的 `width` 和 `height`。
+ *
+ * ```jsx
+ *  <Layout width="100%" height="100%">
+ *    <Layout width="100%" height="100%">
+ *      <LayoutSideBar width="150px"> 侧边栏 </LayoutSideBar>
+ *      <LayoutContent> 内容区 </LayoutContent>
+ *    </Layout>
+ *    <LayoutFooter> 页脚 </LayoutFooter>
+ *  </Layout>
+ * ```
+ *
+ *
+ */
+declare const Layout: import("react").ForwardRefExoticComponent<LayoutProps & import("react").RefAttributes<HTMLDivElement>>;
+export { Layout, LayoutHeader, LayoutSideBar, LayoutContent, LayoutFooter };

package/type/components/layout/sidebar.d.ts

@@ -0,0 +1,29 @@
+/**
+ * @license MIT
+ * enr@type/components/layout/sidebar.d.ts 
+ * Copyright (c) 2025 earthnut.dev
+ * 请在项目根参看详细许可证明
+ */
+import { LayoutSideBarProps } from './types';
+/**
+ *
+ * children side bar
+ *
+ * 侧边栏
+ *
+ *
+ * @param children 子元素
+ * @param ref 组件引用
+ * @param props 组件属性
+ * @param className 自定义类名
+ * @param width 侧边栏的宽度
+ *  缺省值为 `150px`
+ * @param right 是否居右
+ *  缺省值为 `false`
+ * @param full 是否占用所有空间
+ *  缺省值为 `false`
+ * @returns `ReactElement`;
+ *
+ */
+declare const InternalValueS: import("react").ForwardRefExoticComponent<LayoutSideBarProps & import("react").RefAttributes<HTMLDivElement>>;
+export { InternalValueS };