@adminui-dev/layout 1.0.1 → 1.0.2

package/dist/components/BaseLayout.d.ts

@@ -0,0 +1,11 @@
+import type { LayoutPros, LayoutConfig } from './typings';
+/**
+ * Base layout
+ * @param props layout properites
+ * @returns
+ */
+declare function BaseLayout(props: LayoutPros): import("react/jsx-runtime").JSX.Element;
+declare function defineConfig(config: LayoutConfig): LayoutConfig;
+declare const defaultConfig: LayoutConfig;
+export { defineConfig, defaultConfig };
+export default BaseLayout;

package/dist/components/LayoutAside.d.ts

@@ -1,5 +1,7 @@
+import { LAYOUT_ASIDE_KEY } from "./LayoutContext";
 declare function LayoutAside(props: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
 declare namespace LayoutAside {
     var displayName: string;
+    var role: typeof LAYOUT_ASIDE_KEY;
 }
 export default LayoutAside;

package/dist/components/LayoutContent.d.ts

@@ -1,5 +1,7 @@
+import { LAYOUT_CONTENT_KEY } from './LayoutContext';
 declare function LayoutContent(props: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
 declare namespace LayoutContent {
     var displayName: string;
+    var role: typeof LAYOUT_CONTENT_KEY;
 }
 export default LayoutContent;

package/dist/components/LayoutContext.d.ts

@@ -1,3 +1,12 @@
-import type { ConfigDispatcher } from "./typings";
-export declare const createConfigContext: () => import("react").Context<ConfigDispatcher>;
-export declare const useConfigContext: () => ConfigDispatcher;
+import type { LayoutConfig, ThemeSkin, ConfigActionDispatcher, ConfigStateDispatcher } from "./typings";
+export declare function defineConfig(config: LayoutConfig): LayoutConfig;
+export declare const LAYOUT_ASIDE_KEY: unique symbol;
+export declare const LAYOUT_CONTENT_KEY: unique symbol;
+export declare const LAYOUT_HEADER_KEY: unique symbol;
+export declare const defaultSkinData: ThemeSkin;
+export declare const defaultConfig: LayoutConfig;
+export declare const createConfigActionContext: () => import("react").Context<ConfigActionDispatcher>;
+export declare const createConfigStateContext: () => import("react").Context<ConfigStateDispatcher>;
+export declare const useConfigState: () => ConfigStateDispatcher;
+export declare const useConfigAction: () => ConfigActionDispatcher;
+export declare const useTheme: () => import("./typings").Theme;

package/dist/components/LayoutHeader.d.ts

@@ -1,5 +1,7 @@
+import { LAYOUT_HEADER_KEY } from "./LayoutContext";
 declare function LayoutHeader(props: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
 declare namespace LayoutHeader {
     var displayName: string;
+    var role: typeof LAYOUT_HEADER_KEY;
 }
 export default LayoutHeader;

package/dist/components/common.d.ts

@@ -0,0 +1,16 @@
+import { LayoutTheme, Theme } from "./typings";
+declare function getAvatarInitials(name: string): string;
+declare const hexToRgba: (hex: string) => {
+    r: number;
+    g: number;
+    b: number;
+    a: string | number;
+};
+declare const hexToRgb: (color: string) => {
+    r: number;
+    g: number;
+    b: number;
+};
+declare const hexToRgbaString: (color: string, alpha?: number) => string;
+declare const getLayoutTheme: (theme: Theme) => LayoutTheme;
+export { getAvatarInitials, hexToRgb, hexToRgba, hexToRgbaString, getLayoutTheme };

package/dist/components/hook.d.ts

@@ -0,0 +1,6 @@
+type ReturnType<T> = [React.RefObject<T | null>, {
+    width: number;
+    height: number;
+}];
+declare function useLayoutSize<T extends HTMLElement = HTMLDivElement>(): ReturnType<T>;
+export { useLayoutSize };

package/dist/components/index.d.ts

@@ -1,6 +1,6 @@
-import Layout from "./Layout";
+import { BaseLayout } from "./Layout";
 import FullScreenButton from "./FullScreenButton";
 import LayoutBackground from "./LayoutBackground";
-import ThemeProvider, { useTheme } from "./ThemeProvider";
-import { createConfigContext, useConfigContext } from "./LayoutContext";
-export { Layout, LayoutBackground, FullScreenButton, useConfigContext, createConfigContext, ThemeProvider, useTheme };
+import { createConfigActionContext, createConfigStateContext, useConfigState, useConfigAction, useTheme, defaultConfig, defineConfig, defaultSkinData } from "./LayoutContext";
+import { getAvatarInitials, hexToRgb, hexToRgbaString, getLayoutTheme } from "./common";
+export { BaseLayout, LayoutBackground, FullScreenButton, createConfigActionContext, createConfigStateContext, useConfigState, useConfigAction, useTheme, getAvatarInitials, hexToRgb, hexToRgbaString, defaultConfig, defaultSkinData, getLayoutTheme, defineConfig };

package/dist/components/layout.d.ts

@@ -1,15 +1,13 @@
-import type { LayoutPros, LayoutConfig } from './typings';
+import type { BaseLayoutProps } from './typings';
 /**
  * Base layout
  * @param props layout properites
  * @returns
  */
-declare function Layout(props: LayoutPros): import("react/jsx-runtime").JSX.Element;
-declare namespace Layout {
+declare function BaseLayout(props: BaseLayoutProps): import("react/jsx-runtime").JSX.Element;
+declare namespace BaseLayout {
     var Aside: typeof import("./LayoutAside").default;
     var Content: typeof import("./LayoutContent").default;
     var Header: typeof import("./LayoutHeader").default;
 }
-declare function defineConfig(config: LayoutConfig): LayoutConfig;
-export { defineConfig };
-export default Layout;
+export { BaseLayout };

package/dist/components/typings.d.ts

@@ -1,14 +1,26 @@
 type Theme = 'light' | 'dark' | 'system';
 type LayoutType = 'headMenu' | 'leftMenu';
-type LayoutTheme = 'light' | 'dark' | 'system';
+type LayoutTheme = 'light' | 'dark';
 type ContainerMode = 'inline' | 'box' | 'panel';
-type ContainerStretch = 'inline' | 'auto' | 'full';
-type ConfigDispatcher = {
+type ContainerStretch = 'inline' | 'auto' | 'fill';
+type SkinType = 'tidy' | 'rich';
+type ConfigStateDispatcher = {
     layoutConfig: LayoutConfig;
-    setLayoutConfig: (config: LayoutConfig) => void;
     locale: string;
+    theme: Theme;
+    themeSkin: ThemeSkin;
+    themeSkinMap: Record<SkinType, ThemeSkin[]>;
+    languages: Language[];
+};
+type ConfigActionDispatcher = {
+    setTheme: (theme: Theme) => void;
     setLocale: (locale: string) => void;
-    getLanguages: () => Language[];
+    setLayoutConfig: (config: LayoutConfig) => void;
+};
+type OutletContainer = {
+    title: string;
+    breadcrumbData: any[];
+    footer?: React.ReactNode;
 };
 interface LayoutConfig {
     layoutType?: LayoutType;
@@ -17,9 +29,35 @@ interface LayoutConfig {
     asideCollapsedWidth?: number;
     theme?: Theme;
     locale?: string;
+    disabledLocale?: boolean;
+    skinName?: string;
+    primaryColor?: string;
+    highlight?: boolean;
+    flated?: boolean;
+    menuIconSize?: number;
+    compact?: boolean;
+    splitMenu?: boolean;
+    hideBorder?: boolean;
+    hideTitle?: boolean;
+    hideFooter?: boolean;
+    hideBreadcrumb?: boolean;
+    containerTransparent?: boolean;
     userInfo?: UserInfo;
     brandInfo?: BrandInfo;
 }
+interface ThemeSkin {
+    name: string;
+    icon: string;
+    label?: string;
+    theme: LayoutTheme[];
+    themeType: SkinType;
+    asideWidth?: number;
+    primaryColor?: string;
+    asideCollapsedWidth?: number;
+    layoutBorderColor?: string;
+    headerStyle?: React.CSSProperties;
+    asideStyle?: React.CSSProperties;
+}
 interface Language {
     name: string;
     locale: string;
@@ -43,19 +81,32 @@ interface BrandInfo {
     title: string;
     logo?: React.ReactNode;
 }
-export interface LayoutPros extends React.HTMLAttributes<HTMLDivElement> {
+interface MenuData {
+    id?: string;
+    name: string;
+    label?: string;
+    icon?: React.ReactNode;
+    path?: string;
+    extra?: React.ReactNode;
+    originalPath?: string;
+    params?: Record<string, string>;
+    children?: MenuData[];
+}
+interface LayoutProps extends React.HTMLAttributes<HTMLDivElement> {
 }
-export interface RootLayoutProps extends React.HTMLAttributes<HTMLDivElement> {
+interface BaseLayoutProps extends LayoutProps {
+    headerHeight: number;
+    ref?: React.Ref<HTMLDivElement>;
+}
+interface RootLayoutProps<T> extends LayoutProps {
     layoutConfig?: LayoutConfig;
+    menuData?: MenuData[];
     theme?: Theme;
     locale?: string;
-    localeMessageData?: Record<string, LocaleMessageData>;
-}
-export interface MainLayoutProps extends React.HTMLAttributes<HTMLDivElement> {
-    header?: React.ReactNode;
-    aside?: React.ReactNode;
+    localeMessages?: Record<string, T>;
+    themeSkins?: ThemeSkin[];
 }
-export interface ContainerProps {
+interface ContainerProps extends LayoutProps {
     mode?: ContainerMode;
     stretch?: ContainerStretch;
     bordered?: boolean;
@@ -65,4 +116,4 @@ export interface ContainerProps {
     transparent?: boolean;
     children?: React.ReactNode;
 }
-export type { Theme, LayoutTheme, LayoutType, LayoutConfig, Language, LocaleMessageData, UserInfo, BrandInfo, ConfigDispatcher };
+export type { LayoutProps, BaseLayoutProps, RootLayoutProps, ContainerProps, ContainerMode, ContainerStretch, Theme, LayoutTheme, LayoutType, LayoutConfig, Language, LocaleMessageData, UserInfo, BrandInfo, ConfigStateDispatcher, ConfigActionDispatcher, SkinType, ThemeSkin, MenuData, OutletContainer };

package/dist/index.cjs.js

@@ -1 +1 @@
-"use strict";var e=require("react/jsx-runtime"),t=require("react");function n(){return e.jsx("div",{style:{boxSizing:"border-box",pointerEvents:"none",overflow:"hidden",insetBlockStart:"0",insetInlineStart:"0",zIndex:"0",height:"100%",width:"100%"}})}function o(t){return e.jsx("div",{style:{boxSizing:"border-box",display:"flex",flex:"auto",position:"relative",flexDirection:"column",minHeight:"0"},children:t.children})}function r(t){return e.jsx(e.Fragment,{children:t.children})}o.displayName="LayoutContent",r.displayName="LayoutAside";const i=t.createContext({layoutConfig:{},setLayoutConfig:()=>{},locale:"en-US",setLocale:()=>{},getLanguages:()=>[]}),s=()=>t.useContext(i);function d(t){const n=s(),{layoutConfig:o}=n;let r={boxSizing:"border-box",position:"sticky",width:"100%",zIndex:"100",top:"0",paddingBlock:"0",paddingInline:"0",transition:"background-color .3s cubic-bezier(.645, .045, .355, 1)"};return o.headerHeight&&(r={...r,height:o.headerHeight+"px",minHeight:o.headerHeight+"px"}),e.jsx("header",{style:r,children:t.children})}d.displayName="LayoutHeader";var a="layout-module_rootBox__Y8bEx",l="layout-module_rootLayout__TePvr",u="layout-module_mainLayout__a8Tb9";function c(o){let r=null,i=null,s=null;return t.Children.forEach(o.children,e=>{const t=e.type.displayName;"LayoutHeader"===t?r=e:"LayoutContent"===t?i=e:"LayoutAside"===t&&(s=e)}),e.jsxs("div",{className:a,children:[e.jsx(n,{}),e.jsxs("div",{className:l,children:[s,e.jsxs("div",{className:u,children:[r,i]})]})]})}!function(e,t){void 0===t&&(t={});var n=t.insertAt;if("undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===n&&o.firstChild?o.insertBefore(r,o.firstChild):o.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e))}}('@layer base {\r\n    html, body {\r\n        padding: 0;\r\n        margin: 0;\r\n        border: 0;\r\n        width: 100%;\r\n        height: 100%;\r\n    }\r\n}\r\n.layout-module_rootBox__Y8bEx {\r\n    box-sizing: border-box;    \r\n    position: relative;\r\n    width: 100%;\r\n    height:100%;\r\n    overflow: hidden;\r\n    background-color: transparent;\r\n}\r\n.layout-module_rootLayout__TePvr {\r\n    box-sizing: border-box;    \r\n    inset: 0;\r\n    display: flex;\r\n    flex-flow: row;\r\n    position: absolute;\r\n    background-color: transparent;\r\n}\r\n.layout-module_mainLayout__a8Tb9 {\r\n    box-sizing: border-box;\r\n    display: flex;\r\n    flex:auto;    \r\n    position: relative;\r\n    flex-flow: column;\r\n    min-height: 0px;    \r\n}\r\n.layout-module_headerLayout__Jx8vy {\r\n    box-sizing: border-box;\r\n    position: sticky;\r\n    width: 100%;\r\n    z-index: 100;\r\n    top: 0px;\r\n    padding-block: 0px;\r\n    padding-inline: 0px;\r\n    transition: "background-color .3s cubic-bezier(.645, .045, .355, 1)"; \r\n}'),c.Aside=r,c.Content=o,c.Header=d;const m=t.createContext({theme:"system",setTheme:()=>{}});exports.FullScreenButton=function(n){const o=!!document.fullscreenElement,[r,i]=t.useState(o),s=()=>{i(!!document.fullscreenElement)},d=e=>{"F11"===e.code&&(e.preventDefault(),a())};t.useEffect(()=>(document.addEventListener("fullscreenchange",s),document.addEventListener("keydown",d,!0),()=>{document.removeEventListener("fullscreenchange",s),document.removeEventListener("keydown",d)}),[]);const a=()=>{r?document.exitFullscreen():document.documentElement.requestFullscreen()};if(!n.buttons||n.buttons.length<2)return e.jsx(e.Fragment,{});const[l,u]=n.buttons,c=r?l:u;return t.cloneElement(c,{onClick:e=>{console.log(e),a()}})},exports.Layout=c,exports.LayoutBackground=n,exports.ThemeProvider=function(n){const{children:o,storageKey:r="adminui-shadcn-theme"}=n,i=n.theme||localStorage.getItem(r)||n.defaultTheme||"system",[s,d]=t.useState(i);t.useEffect(()=>{const e=window.document.documentElement;if(e.classList.remove("light","dark"),"system"===s){const t=window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light";return void e.classList.add(t)}e.classList.add(s)},[s]);const a={theme:s,setTheme:e=>{localStorage.setItem(r,e),d(e)}};return e.jsx(m.Provider,{value:a,children:o})},exports.createConfigContext=()=>i,exports.useConfigContext=s,exports.useTheme=()=>{const e=t.useContext(m);if(void 0===e)throw new Error("useTheme must be used within a ThemeProvider");return e};
+"use strict";var e=require("react/jsx-runtime"),r=require("react");function n(e,r){void 0===r&&(r={});var n=r.insertAt;if(e&&"undefined"!=typeof document){var t=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===n&&t.firstChild?t.insertBefore(o,t.firstChild):t.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}var t="Layout-module_rootBackground__j3UVG",o="Layout-module_mainLayout__6W9W9";function i(){return e.jsx("div",{className:t,children:"55555"})}n('@layer base {\r\n    html, body {\r\n        padding: 0;\r\n        margin: 0;\r\n        border: 0;\r\n        width: 100%;\r\n        height: 100%;\r\n        overflow: hidden;\r\n    }\r\n    #Layout-module_root__3x-pW {        \r\n        text-align: initial;\r\n        width: 100%;\r\n        height: 100%;\r\n    }   \r\n}\r\n.Layout-module_rootBox__3JHjy {\r\n    box-sizing: border-box;  \r\n    width: 100%;\r\n    height:100%;    \r\n    text-align: initial;  \r\n    display: grid;\r\n    grid-template-areas: "root";\r\n    background-color: transparent;\r\n}\r\n.Layout-module_rootBackground__j3UVG {\r\n    box-sizing: border-box; \r\n    pointer-events: none;\r\n    overflow: hidden;\r\n    inset-block-start:0;\r\n    inset-inline-start:0;     \r\n    height:100%;\r\n    width: 100%;\r\n    z-index: 0;\r\n    grid-area: root;\r\n}\r\n.Layout-module_rootLayout__jVEEF {\r\n    box-sizing: border-box; \r\n    width: 100%;\r\n    height: 100%;\r\n    display: grid;\r\n    grid-area: root;\r\n    grid-template-columns: auto 1fr;\r\n    grid-template-rows: 50px 1fr;   \r\n    z-index: 1;   \r\n    overflow: auto;\r\n    background-color: transparent;    \r\n}\r\n.Layout-module_mainLayout__6W9W9 {\r\n    box-sizing: border-box;\r\n    grid-row: 2;\r\n    grid-column: 2;\r\n    display: flex;\r\n    flex-flow: column;  \r\n    width: 100%;\r\n    height: 100%;\r\n    min-height: 0;\r\n}\r\n');const a=Symbol("LayoutAside"),l=Symbol("LayoutContent"),d=Symbol("LayoutHeader"),s={icon:"",name:"default",themeType:"tidy",theme:["light","dark"]},u={headerHeight:50,asideCollapsedWidth:52,asideWidth:260,layoutType:"leftMenu",theme:"system",primaryColor:"#417ffb",skinName:s.name},c=r.createContext({setTheme:()=>{},setLayoutConfig:()=>{},setLocale:()=>{}}),h=r.createContext({locale:"en-US",languages:[],theme:"system",layoutConfig:{},themeSkin:s,themeSkinMap:{tidy:[],rich:[]}}),m=()=>r.useContext(h);function g(r){return e.jsx("div",{className:o,...r,children:r.children})}function x(r){return e.jsx(e.Fragment,{children:r.children})}function y(r){return e.jsx(e.Fragment,{children:r.children})}g.displayName="LayoutContent",g.role=l,x.displayName="LayoutAside",x.role=a,y.displayName="LayoutHeader",y.role=d;var f="layout-module_rootBox__Y8bEx",p="layout-module_rootLayout__TePvr";function b(n){let t=null,o=null,s=null;r.Children.forEach(n.children,e=>{const r=e.type.role;r===d?t=e:r===l?o=e:r===a&&(s=e)});const u={gridTemplateRows:`${n.headerHeight}px 1fr`};return e.jsx(e.Fragment,{children:e.jsxs("div",{ref:n.ref,className:f,style:{...n.style},children:[e.jsx(i,{}),e.jsxs("div",{className:p,style:u,children:[s,t,o]})]})})}n('@layer base {\r\n    html, body {\r\n        padding: 0;\r\n        margin: 0;\r\n        border: 0;\r\n        width: 100%;\r\n        height: 100%;\r\n        overflow: hidden;\r\n    }\r\n    #layout-module_root__0efzq {        \r\n        text-align: initial;\r\n        width: 100%;\r\n        height: 100%;\r\n    }   \r\n}\r\n.layout-module_rootBox__Y8bEx {\r\n    box-sizing: border-box;  \r\n    width: 100%;\r\n    height:100%;    \r\n    text-align: initial;  \r\n    display: grid;\r\n    grid-template-areas: "root";\r\n    background-color: transparent;\r\n}\r\n.layout-module_rootBackground__vEs6e {\r\n    box-sizing: border-box; \r\n    pointer-events: none;\r\n    overflow: hidden;\r\n    inset-block-start:0;\r\n    inset-inline-start:0;     \r\n    height:100%;\r\n    width: 100%;\r\n    z-index: 0;\r\n    grid-area: root;\r\n}\r\n.layout-module_rootLayout__TePvr {\r\n    box-sizing: border-box; \r\n    width: 100%;\r\n    height: 100%;\r\n    display: grid;\r\n    grid-area: root;\r\n    grid-template-columns: auto 1fr;\r\n    grid-template-rows: 50px 1fr;   \r\n    z-index: 1;   \r\n    overflow: auto;\r\n    background-color: transparent;    \r\n}\r\n.layout-module_mainLayout__a8Tb9 {\r\n    box-sizing: border-box;\r\n    grid-row: 2;\r\n    grid-column: 2;\r\n    display: flex;\r\n    flex-flow: column;  \r\n    width: 100%;\r\n    height: 100%;\r\n    min-height: 0;\r\n}\r\n'),b.Aside=x,b.Content=g,b.Header=y;const _=e=>({r:parseInt(e.slice(1,3),16),g:parseInt(e.slice(3,5),16),b:parseInt(e.slice(5,7),16),a:9===e.length?(parseInt(e.slice(7,9),16)/255).toFixed(2):1});exports.BaseLayout=b,exports.FullScreenButton=function(n){const t=!!document.fullscreenElement,[o,i]=r.useState(t),a=()=>{i(!!document.fullscreenElement)},l=e=>{"F11"===e.code&&(e.preventDefault(),d())};r.useEffect(()=>(document.addEventListener("fullscreenchange",a),document.addEventListener("keydown",l,!0),()=>{document.removeEventListener("fullscreenchange",a),document.removeEventListener("keydown",l)}),[]);const d=()=>{o?document.exitFullscreen():document.documentElement.requestFullscreen()};if(!n.buttons||n.buttons.length<2)return e.jsx(e.Fragment,{});const[s,u]=n.buttons,c=o?s:u;return r.cloneElement(c,{onClick:e=>{console.log(e),d()}})},exports.LayoutBackground=i,exports.createConfigActionContext=()=>c,exports.createConfigStateContext=()=>h,exports.defaultConfig=u,exports.defaultSkinData=s,exports.defineConfig=function(e){return e},exports.getAvatarInitials=function(e){if(!e)return"";const r=Array.from(e);if(0===r.length)return"";const n=r[0];return function(e){if(0===e.length)return!1;const r=e.codePointAt(0);return r>=19968&&r<=40959||r>=13312&&r<=19903||r>=12352&&r<=12543||r>=44032&&r<=55215||r>=65280&&r<=65519||r>=126976&&r<=129791||r>=127744&&r<=128511||r>=128640&&r<=128767||r>=129280&&r<=129535||r>=9728&&r<=9983||r>=9984&&r<=10175}(n)?n:r.slice(0,2).join("")},exports.getLayoutTheme=e=>{if("system"==e){return window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}return e},exports.hexToRgb=e=>{const{r:r,g:n,b:t}=_(e);return{r:r,g:n,b:t}},exports.hexToRgbaString=(e,r)=>{const{r:n,g:t,b:o,a:i}=_(e);return`rgba(${n}, ${t}, ${o}, ${r??i})`},exports.useConfigAction=()=>r.useContext(c),exports.useConfigState=m,exports.useTheme=()=>m().theme;

package/dist/index.d.ts

@@ -1,33 +1,30 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as React$1 from 'react';
-import React__default from 'react';
-
-declare function LayoutHeader(props: React.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
-declare namespace LayoutHeader {
-    var displayName: string;
-}
-
-declare function LayoutContent(props: React.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
-declare namespace LayoutContent {
-    var displayName: string;
-}
-
-declare function LayoutAside(props: React.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
-declare namespace LayoutAside {
-    var displayName: string;
-}
+import * as react from 'react';
+import react__default from 'react';
 
 type Theme = 'light' | 'dark' | 'system';
 type LayoutType = 'headMenu' | 'leftMenu';
-type LayoutTheme = 'light' | 'dark' | 'system';
+type LayoutTheme = 'light' | 'dark';
 type ContainerMode = 'inline' | 'box' | 'panel';
-type ContainerStretch = 'inline' | 'auto' | 'full';
-type ConfigDispatcher = {
+type ContainerStretch = 'inline' | 'auto' | 'fill';
+type SkinType = 'tidy' | 'rich';
+type ConfigStateDispatcher = {
     layoutConfig: LayoutConfig;
-    setLayoutConfig: (config: LayoutConfig) => void;
     locale: string;
+    theme: Theme;
+    themeSkin: ThemeSkin;
+    themeSkinMap: Record<SkinType, ThemeSkin[]>;
+    languages: Language[];
+};
+type ConfigActionDispatcher = {
+    setTheme: (theme: Theme) => void;
     setLocale: (locale: string) => void;
-    getLanguages: () => Language[];
+    setLayoutConfig: (config: LayoutConfig) => void;
+};
+type OutletContainer = {
+    title: string;
+    breadcrumbData: any[];
+    footer?: React.ReactNode;
 };
 interface LayoutConfig {
     layoutType?: LayoutType;
@@ -36,9 +33,35 @@ interface LayoutConfig {
     asideCollapsedWidth?: number;
     theme?: Theme;
     locale?: string;
+    disabledLocale?: boolean;
+    skinName?: string;
+    primaryColor?: string;
+    highlight?: boolean;
+    flated?: boolean;
+    menuIconSize?: number;
+    compact?: boolean;
+    splitMenu?: boolean;
+    hideBorder?: boolean;
+    hideTitle?: boolean;
+    hideFooter?: boolean;
+    hideBreadcrumb?: boolean;
+    containerTransparent?: boolean;
     userInfo?: UserInfo;
     brandInfo?: BrandInfo;
 }
+interface ThemeSkin {
+    name: string;
+    icon: string;
+    label?: string;
+    theme: LayoutTheme[];
+    themeType: SkinType;
+    asideWidth?: number;
+    primaryColor?: string;
+    asideCollapsedWidth?: number;
+    layoutBorderColor?: string;
+    headerStyle?: React.CSSProperties;
+    asideStyle?: React.CSSProperties;
+}
 interface Language {
     name: string;
     locale: string;
@@ -62,19 +85,32 @@ interface BrandInfo {
     title: string;
     logo?: React.ReactNode;
 }
-interface LayoutPros extends React.HTMLAttributes<HTMLDivElement> {
+interface MenuData {
+    id?: string;
+    name: string;
+    label?: string;
+    icon?: React.ReactNode;
+    path?: string;
+    extra?: React.ReactNode;
+    originalPath?: string;
+    params?: Record<string, string>;
+    children?: MenuData[];
+}
+interface LayoutProps extends React.HTMLAttributes<HTMLDivElement> {
 }
-interface RootLayoutProps extends React.HTMLAttributes<HTMLDivElement> {
+interface BaseLayoutProps extends LayoutProps {
+    headerHeight: number;
+    ref?: React.Ref<HTMLDivElement>;
+}
+interface RootLayoutProps<T> extends LayoutProps {
     layoutConfig?: LayoutConfig;
+    menuData?: MenuData[];
     theme?: Theme;
     locale?: string;
-    localeMessageData?: Record<string, LocaleMessageData>;
-}
-interface MainLayoutProps extends React.HTMLAttributes<HTMLDivElement> {
-    header?: React.ReactNode;
-    aside?: React.ReactNode;
+    localeMessages?: Record<string, T>;
+    themeSkins?: ThemeSkin[];
 }
-interface ContainerProps {
+interface ContainerProps extends LayoutProps {
     mode?: ContainerMode;
     stretch?: ContainerStretch;
     bordered?: boolean;
@@ -85,13 +121,43 @@ interface ContainerProps {
     children?: React.ReactNode;
 }
 
+declare function defineConfig(config: LayoutConfig): LayoutConfig;
+declare const LAYOUT_ASIDE_KEY: unique symbol;
+declare const LAYOUT_CONTENT_KEY: unique symbol;
+declare const LAYOUT_HEADER_KEY: unique symbol;
+declare const defaultSkinData: ThemeSkin;
+declare const defaultConfig: LayoutConfig;
+declare const createConfigActionContext: () => react.Context<ConfigActionDispatcher>;
+declare const createConfigStateContext: () => react.Context<ConfigStateDispatcher>;
+declare const useConfigState: () => ConfigStateDispatcher;
+declare const useConfigAction: () => ConfigActionDispatcher;
+declare const useTheme: () => Theme;
+
+declare function LayoutHeader(props: React.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+declare namespace LayoutHeader {
+    var displayName: string;
+    var role: typeof LAYOUT_HEADER_KEY;
+}
+
+declare function LayoutContent(props: React.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+declare namespace LayoutContent {
+    var displayName: string;
+    var role: typeof LAYOUT_CONTENT_KEY;
+}
+
+declare function LayoutAside(props: React.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+declare namespace LayoutAside {
+    var displayName: string;
+    var role: typeof LAYOUT_ASIDE_KEY;
+}
+
 /**
  * Base layout
  * @param props layout properites
  * @returns
  */
-declare function Layout(props: LayoutPros): react_jsx_runtime.JSX.Element;
-declare namespace Layout {
+declare function BaseLayout(props: BaseLayoutProps): react_jsx_runtime.JSX.Element;
+declare namespace BaseLayout {
     var Aside: typeof LayoutAside;
     var Content: typeof LayoutContent;
     var Header: typeof LayoutHeader;
@@ -102,32 +168,20 @@ declare namespace Layout {
  * @param props max and min button icon
  * @returns
  */
-declare function export_default$2(props: {
-    buttons: React__default.ReactElement[];
+declare function export_default$1(props: {
+    buttons: react__default.ReactElement[];
 }): react_jsx_runtime.JSX.Element;
 
-declare function export_default$1(): react_jsx_runtime.JSX.Element;
+declare function export_default(): react_jsx_runtime.JSX.Element;
 
-interface ThemeProviderProps {
-    children: React.ReactNode;
-    theme?: Theme;
-    defaultTheme?: Theme;
-    storageKey?: string;
-}
-type ThemeProviderState = {
-    theme: Theme;
-    setTheme: (theme: Theme) => void;
+declare function getAvatarInitials(name: string): string;
+declare const hexToRgb: (color: string) => {
+    r: number;
+    g: number;
+    b: number;
 };
-/**
- * Light dark mode context
- * @param props
- * @returns
- */
-declare function export_default(props: ThemeProviderProps): react_jsx_runtime.JSX.Element;
-declare const useTheme: () => ThemeProviderState;
-
-declare const createConfigContext: () => React$1.Context<ConfigDispatcher>;
-declare const useConfigContext: () => ConfigDispatcher;
+declare const hexToRgbaString: (color: string, alpha?: number) => string;
+declare const getLayoutTheme: (theme: Theme) => LayoutTheme;
 
-export { export_default$2 as FullScreenButton, Layout, export_default$1 as LayoutBackground, export_default as ThemeProvider, createConfigContext, useConfigContext, useTheme };
-export type { BrandInfo, ConfigDispatcher, ContainerProps, Language, LayoutConfig, LayoutPros, LayoutTheme, LayoutType, LocaleMessageData, MainLayoutProps, RootLayoutProps, Theme, UserInfo };
+export { BaseLayout, export_default$1 as FullScreenButton, export_default as LayoutBackground, createConfigActionContext, createConfigStateContext, defaultConfig, defaultSkinData, defineConfig, getAvatarInitials, getLayoutTheme, hexToRgb, hexToRgbaString, useConfigAction, useConfigState, useTheme };
+export type { BaseLayoutProps, BrandInfo, ConfigActionDispatcher, ConfigStateDispatcher, ContainerMode, ContainerProps, ContainerStretch, Language, LayoutConfig, LayoutProps, LayoutTheme, LayoutType, LocaleMessageData, MenuData, OutletContainer, RootLayoutProps, SkinType, Theme, ThemeSkin, UserInfo };

package/dist/index.esm.js

@@ -1 +1 @@
-import{jsx as e,Fragment as n,jsxs as t}from"react/jsx-runtime";import o,{createContext as r,useContext as i,useState as d,useEffect as l}from"react";function a(){return e("div",{style:{boxSizing:"border-box",pointerEvents:"none",overflow:"hidden",insetBlockStart:"0",insetInlineStart:"0",zIndex:"0",height:"100%",width:"100%"}})}function s(n){return e("div",{style:{boxSizing:"border-box",display:"flex",flex:"auto",position:"relative",flexDirection:"column",minHeight:"0"},children:n.children})}function c(t){return e(n,{children:t.children})}s.displayName="LayoutContent",c.displayName="LayoutAside";const u=r({layoutConfig:{},setLayoutConfig:()=>{},locale:"en-US",setLocale:()=>{},getLanguages:()=>[]}),m=()=>u,h=()=>i(u);function y(n){const t=h(),{layoutConfig:o}=t;let r={boxSizing:"border-box",position:"sticky",width:"100%",zIndex:"100",top:"0",paddingBlock:"0",paddingInline:"0",transition:"background-color .3s cubic-bezier(.645, .045, .355, 1)"};return o.headerHeight&&(r={...r,height:o.headerHeight+"px",minHeight:o.headerHeight+"px"}),e("header",{style:r,children:n.children})}y.displayName="LayoutHeader";var g="layout-module_rootBox__Y8bEx",b="layout-module_rootLayout__TePvr",f="layout-module_mainLayout__a8Tb9";function p(n){let r=null,i=null,d=null;return o.Children.forEach(n.children,e=>{const n=e.type.displayName;"LayoutHeader"===n?r=e:"LayoutContent"===n?i=e:"LayoutAside"===n&&(d=e)}),t("div",{className:g,children:[e(a,{}),t("div",{className:b,children:[d,t("div",{className:f,children:[r,i]})]})]})}function x(t){const r=!!document.fullscreenElement,[i,a]=d(r),s=()=>{a(!!document.fullscreenElement)},c=e=>{"F11"===e.code&&(e.preventDefault(),u())};l(()=>(document.addEventListener("fullscreenchange",s),document.addEventListener("keydown",c,!0),()=>{document.removeEventListener("fullscreenchange",s),document.removeEventListener("keydown",c)}),[]);const u=()=>{i?document.exitFullscreen():document.documentElement.requestFullscreen()};if(!t.buttons||t.buttons.length<2)return e(n,{});const[m,h]=t.buttons,y=i?m:h;return o.cloneElement(y,{onClick:e=>{console.log(e),u()}})}!function(e,n){void 0===n&&(n={});var t=n.insertAt;if("undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===t&&o.firstChild?o.insertBefore(r,o.firstChild):o.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e))}}('@layer base {\r\n    html, body {\r\n        padding: 0;\r\n        margin: 0;\r\n        border: 0;\r\n        width: 100%;\r\n        height: 100%;\r\n    }\r\n}\r\n.layout-module_rootBox__Y8bEx {\r\n    box-sizing: border-box;    \r\n    position: relative;\r\n    width: 100%;\r\n    height:100%;\r\n    overflow: hidden;\r\n    background-color: transparent;\r\n}\r\n.layout-module_rootLayout__TePvr {\r\n    box-sizing: border-box;    \r\n    inset: 0;\r\n    display: flex;\r\n    flex-flow: row;\r\n    position: absolute;\r\n    background-color: transparent;\r\n}\r\n.layout-module_mainLayout__a8Tb9 {\r\n    box-sizing: border-box;\r\n    display: flex;\r\n    flex:auto;    \r\n    position: relative;\r\n    flex-flow: column;\r\n    min-height: 0px;    \r\n}\r\n.layout-module_headerLayout__Jx8vy {\r\n    box-sizing: border-box;\r\n    position: sticky;\r\n    width: 100%;\r\n    z-index: 100;\r\n    top: 0px;\r\n    padding-block: 0px;\r\n    padding-inline: 0px;\r\n    transition: "background-color .3s cubic-bezier(.645, .045, .355, 1)"; \r\n}'),p.Aside=c,p.Content=s,p.Header=y;const v=r({theme:"system",setTheme:()=>{}});function L(n){const{children:t,storageKey:o="adminui-shadcn-theme"}=n,r=n.theme||localStorage.getItem(o)||n.defaultTheme||"system",[i,a]=d(r);l(()=>{const e=window.document.documentElement;if(e.classList.remove("light","dark"),"system"===i){const n=window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light";return void e.classList.add(n)}e.classList.add(i)},[i]);const s={theme:i,setTheme:e=>{localStorage.setItem(o,e),a(e)}};return e(v.Provider,{value:s,children:t})}const _=()=>{const e=i(v);if(void 0===e)throw new Error("useTheme must be used within a ThemeProvider");return e};export{x as FullScreenButton,p as Layout,a as LayoutBackground,L as ThemeProvider,m as createConfigContext,h as useConfigContext,_ as useTheme};
+import{jsx as r,Fragment as e,jsxs as n}from"react/jsx-runtime";import t,{createContext as o,useContext as i,useState as a,useEffect as d}from"react";function l(r,e){void 0===e&&(e={});var n=e.insertAt;if(r&&"undefined"!=typeof document){var t=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===n&&t.firstChild?t.insertBefore(o,t.firstChild):t.appendChild(o),o.styleSheet?o.styleSheet.cssText=r:o.appendChild(document.createTextNode(r))}}var s="Layout-module_rootBackground__j3UVG",u="Layout-module_mainLayout__6W9W9";function c(){return r("div",{className:s,children:"55555"})}function h(r){return r}l('@layer base {\r\n    html, body {\r\n        padding: 0;\r\n        margin: 0;\r\n        border: 0;\r\n        width: 100%;\r\n        height: 100%;\r\n        overflow: hidden;\r\n    }\r\n    #Layout-module_root__3x-pW {        \r\n        text-align: initial;\r\n        width: 100%;\r\n        height: 100%;\r\n    }   \r\n}\r\n.Layout-module_rootBox__3JHjy {\r\n    box-sizing: border-box;  \r\n    width: 100%;\r\n    height:100%;    \r\n    text-align: initial;  \r\n    display: grid;\r\n    grid-template-areas: "root";\r\n    background-color: transparent;\r\n}\r\n.Layout-module_rootBackground__j3UVG {\r\n    box-sizing: border-box; \r\n    pointer-events: none;\r\n    overflow: hidden;\r\n    inset-block-start:0;\r\n    inset-inline-start:0;     \r\n    height:100%;\r\n    width: 100%;\r\n    z-index: 0;\r\n    grid-area: root;\r\n}\r\n.Layout-module_rootLayout__jVEEF {\r\n    box-sizing: border-box; \r\n    width: 100%;\r\n    height: 100%;\r\n    display: grid;\r\n    grid-area: root;\r\n    grid-template-columns: auto 1fr;\r\n    grid-template-rows: 50px 1fr;   \r\n    z-index: 1;   \r\n    overflow: auto;\r\n    background-color: transparent;    \r\n}\r\n.Layout-module_mainLayout__6W9W9 {\r\n    box-sizing: border-box;\r\n    grid-row: 2;\r\n    grid-column: 2;\r\n    display: flex;\r\n    flex-flow: column;  \r\n    width: 100%;\r\n    height: 100%;\r\n    min-height: 0;\r\n}\r\n');const m=Symbol("LayoutAside"),g=Symbol("LayoutContent"),y=Symbol("LayoutHeader"),f={icon:"",name:"default",themeType:"tidy",theme:["light","dark"]},b={headerHeight:50,asideCollapsedWidth:52,asideWidth:260,layoutType:"leftMenu",theme:"system",primaryColor:"#417ffb",skinName:f.name},p=o({setTheme:()=>{},setLayoutConfig:()=>{},setLocale:()=>{}}),x=o({locale:"en-US",languages:[],theme:"system",layoutConfig:{},themeSkin:f,themeSkinMap:{tidy:[],rich:[]}}),_=()=>p,w=()=>x,v=()=>i(x),L=()=>i(p),k=()=>v().theme;function E(e){return r("div",{className:u,...e,children:e.children})}function z(n){return r(e,{children:n.children})}function C(n){return r(e,{children:n.children})}E.displayName="LayoutContent",E.role=g,z.displayName="LayoutAside",z.role=m,C.displayName="LayoutHeader",C.role=y;var N="layout-module_rootBox__Y8bEx",T="layout-module_rootLayout__TePvr";function B(o){let i=null,a=null,d=null;t.Children.forEach(o.children,r=>{const e=r.type.role;e===y?i=r:e===g?a=r:e===m&&(d=r)});const l={gridTemplateRows:`${o.headerHeight}px 1fr`};return r(e,{children:n("div",{ref:o.ref,className:N,style:{...o.style},children:[r(c,{}),n("div",{className:T,style:l,children:[d,i,a]})]})})}function S(n){const o=!!document.fullscreenElement,[i,l]=a(o),s=()=>{l(!!document.fullscreenElement)},u=r=>{"F11"===r.code&&(r.preventDefault(),c())};d(()=>(document.addEventListener("fullscreenchange",s),document.addEventListener("keydown",u,!0),()=>{document.removeEventListener("fullscreenchange",s),document.removeEventListener("keydown",u)}),[]);const c=()=>{i?document.exitFullscreen():document.documentElement.requestFullscreen()};if(!n.buttons||n.buttons.length<2)return r(e,{});const[h,m]=n.buttons,g=i?h:m;return t.cloneElement(g,{onClick:r=>{console.log(r),c()}})}function W(r){if(!r)return"";const e=Array.from(r);if(0===e.length)return"";const n=e[0];return function(r){if(0===r.length)return!1;const e=r.codePointAt(0);return e>=19968&&e<=40959||e>=13312&&e<=19903||e>=12352&&e<=12543||e>=44032&&e<=55215||e>=65280&&e<=65519||e>=126976&&e<=129791||e>=127744&&e<=128511||e>=128640&&e<=128767||e>=129280&&e<=129535||e>=9728&&e<=9983||e>=9984&&e<=10175}(n)?n:e.slice(0,2).join("")}l('@layer base {\r\n    html, body {\r\n        padding: 0;\r\n        margin: 0;\r\n        border: 0;\r\n        width: 100%;\r\n        height: 100%;\r\n        overflow: hidden;\r\n    }\r\n    #layout-module_root__0efzq {        \r\n        text-align: initial;\r\n        width: 100%;\r\n        height: 100%;\r\n    }   \r\n}\r\n.layout-module_rootBox__Y8bEx {\r\n    box-sizing: border-box;  \r\n    width: 100%;\r\n    height:100%;    \r\n    text-align: initial;  \r\n    display: grid;\r\n    grid-template-areas: "root";\r\n    background-color: transparent;\r\n}\r\n.layout-module_rootBackground__vEs6e {\r\n    box-sizing: border-box; \r\n    pointer-events: none;\r\n    overflow: hidden;\r\n    inset-block-start:0;\r\n    inset-inline-start:0;     \r\n    height:100%;\r\n    width: 100%;\r\n    z-index: 0;\r\n    grid-area: root;\r\n}\r\n.layout-module_rootLayout__TePvr {\r\n    box-sizing: border-box; \r\n    width: 100%;\r\n    height: 100%;\r\n    display: grid;\r\n    grid-area: root;\r\n    grid-template-columns: auto 1fr;\r\n    grid-template-rows: 50px 1fr;   \r\n    z-index: 1;   \r\n    overflow: auto;\r\n    background-color: transparent;    \r\n}\r\n.layout-module_mainLayout__a8Tb9 {\r\n    box-sizing: border-box;\r\n    grid-row: 2;\r\n    grid-column: 2;\r\n    display: flex;\r\n    flex-flow: column;  \r\n    width: 100%;\r\n    height: 100%;\r\n    min-height: 0;\r\n}\r\n'),B.Aside=z,B.Content=E,B.Header=C;const j=r=>({r:parseInt(r.slice(1,3),16),g:parseInt(r.slice(3,5),16),b:parseInt(r.slice(5,7),16),a:9===r.length?(parseInt(r.slice(7,9),16)/255).toFixed(2):1}),A=r=>{const{r:e,g:n,b:t}=j(r);return{r:e,g:n,b:t}},H=(r,e)=>{const{r:n,g:t,b:o,a:i}=j(r);return`rgba(${n}, ${t}, ${o}, ${e??i})`},F=r=>{if("system"==r){return window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}return r};export{B as BaseLayout,S as FullScreenButton,c as LayoutBackground,_ as createConfigActionContext,w as createConfigStateContext,b as defaultConfig,f as defaultSkinData,h as defineConfig,W as getAvatarInitials,F as getLayoutTheme,A as hexToRgb,H as hexToRgbaString,L as useConfigAction,v as useConfigState,k as useTheme};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adminui-dev/layout",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "adminui.dev's layout",
   "keywords": [
     "layout",
@@ -45,8 +45,8 @@
     "@rollup/plugin-node-resolve": "^15.0.0",
     "@rollup/plugin-typescript": "^11.0.0",
     "@types/commander": "^2.12.5",
-    "@types/react": "^18.0.0",
-    "@types/react-dom": "^18.0.0",
+    "@types/react": "^19.2.0",
+    "@types/react-dom": "^19.2.0",
     "postcss": "^8.5.6",
     "postcss-modules": "^6.0.1",
     "rollup": "^4.0.0",
@@ -56,7 +56,7 @@
     "typescript": "^5.0.3"
   },
   "peerDependencies": {
-    "react": "^19.2.0",
-    "react-dom": "^19.2.0"
+    "react": ">=19.2.0",
+    "react-dom": ">=19.2.0"
   }
 }