@xanui/core 1.3.7 → 1.3.9

package/theme/ThemeProvider.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeProvider.cjs","sources":["../../src/theme/ThemeProvider.tsx"],"sourcesContent":["\"use client\";\r\nimport * as React from \"react\"\r\nimport { ThemeOptions } from \"./types\"\r\nimport Tag from \"../Tag\"\r\nimport { TagComponentType, TagProps } from \"../Tag/types\"\r\nimport { ThemeContex } from \"./core\"\r\nimport ThemeCssVars from \"./ThemeCssVars\"\r\nimport { css } from \"../css\"\r\nimport ServerStyleTag from \"../Tag/ServerStyleTag\"\r\nimport { useDocument } from \"../Document\";\r\nimport { themeRootClass } from \".\";\r\nimport { useCSSCacheId } from \"../css/CSSCacheProvider\";\r\n\r\nexport type ThemeProviderProps<T extends TagComponentType = 'div'> = TagProps<T> & {\r\n   theme: ThemeOptions;\r\n   onThemeChange?: (theme: ThemeOptions) => void\r\n   isRoot?: boolean;\r\n   noScrollbarCss?: boolean;\r\n}\r\n\r\nconst ThemeProvider = <T extends TagComponentType = 'div'>({ children, theme, onThemeChange, isRoot, noScrollbarCss, ...props }: ThemeProviderProps<T>) => {\r\n   const doc = useDocument()\r\n   const cacheId = useCSSCacheId()\r\n\r\n   const themeGlobalStyle: any = React.useMemo(() => {\r\n      const root_cls = `.xui-${theme.name}-theme-root`\r\n      let gkeys = Object.keys(theme.globalStyle || {})\r\n      let gstyles: any = {}\r\n      gkeys.forEach((key) => {\r\n         gstyles[`${root_cls} ${key}`] = theme.globalStyle[key as any]\r\n      })\r\n\r\n      return css({\r\n         \"@global\": {\r\n            ...gstyles,\r\n            [root_cls]: ThemeCssVars(theme)\r\n         }\r\n      }, {\r\n         injectStyle: typeof window !== 'undefined',\r\n         container: doc?.document,\r\n         cacheId\r\n      })\r\n   }, [theme, doc])\r\n\r\n   const resetCss = React.useMemo(() => {\r\n      if (!isRoot) return\r\n      return css({\r\n         \"@global\": {\r\n            \"*\": {\r\n               m: 0,\r\n               p: 0,\r\n               outline: \"none\",\r\n               boxSizing: \"border-box\",\r\n               verticalAlign: \"baseline\",\r\n            },\r\n            \"html, body\": {\r\n               height: \"100%\",\r\n               \"-webkit-font-smoothing\": \"antialiased\",\r\n               \"-moz-osx-font-smoothing\": \"grayscale\",\r\n            } as any,\r\n            \"img, picture, video, canvas, svg\": {\r\n               maxWidth: \"100%\",\r\n               display: \"block\"\r\n            },\r\n            \"input, button, textarea, select\": {\r\n               font: \"inherit\"\r\n            },\r\n            \"table\": {\r\n               borderCollapse: \"collapse\",\r\n               borderSpacing: 0,\r\n            },\r\n            \"ol, ul\": {\r\n               listStyle: \"none\",\r\n               padding: 0,\r\n               margin: 0,\r\n            },\r\n            \"a\": {\r\n               display: \"inline-block\",\r\n               color: \"inherit\",\r\n               textDecoration: \"none\",\r\n               cursor: \"pointer\",\r\n               \"&:hover\": {\r\n                  textDecoration: \"underline\"\r\n               }\r\n            },\r\n            \"p, h1, h2, h3, h4, h5, h6\": {\r\n               overflowWrap: \"break-word\",\r\n            },\r\n         }\r\n      }, {\r\n         injectStyle: typeof window !== 'undefined',\r\n         container: doc?.document,\r\n         cacheId\r\n      })\r\n   }, [])\r\n\r\n   const scrollbarCss: any = React.useMemo(() => {\r\n      if (noScrollbarCss) return;\r\n      const cls = (cls: string) => `${themeRootClass(theme.name)} ${cls}`\r\n      let thumbSize = 6\r\n      let thumbColor = \"var(--color-text-secondary)\"\r\n      let trackColor = \"transparent\"\r\n\r\n      return css({\r\n         \"@global\": {\r\n            [cls('*::-webkit-scrollbar')]: {\r\n               width: thumbSize,\r\n               height: thumbSize,\r\n            },\r\n            [cls(\"*::-webkit-scrollbar-thumb\")]: {\r\n               backgroundColor: thumbColor,\r\n               borderRadius: \"6px\",\r\n               opacity: 0.6,\r\n            },\r\n            [cls(\"*::-webkit-scrollbar-thumb:hover\")]: {\r\n               backgroundColor: thumbColor,\r\n               opacity: 0.0,\r\n            },\r\n            [cls(\"*::-webkit-scrollbar-track\")]: {\r\n               backgroundColor: trackColor,\r\n               borderRadius: \"6px\",\r\n            },\r\n         }\r\n      }, {\r\n         injectStyle: typeof window !== 'undefined',\r\n         container: doc?.document,\r\n         cacheId\r\n      }) as any\r\n   }, [noScrollbarCss, theme])\r\n\r\n   return (\r\n      <ThemeContex.Provider\r\n         value={{\r\n            theme,\r\n            onChange: (t) => {\r\n               onThemeChange && onThemeChange(t)\r\n            }\r\n         }}\r\n      >\r\n         {\r\n            isRoot && <>\r\n               <ServerStyleTag factory={resetCss as any} />\r\n               {\r\n                  !noScrollbarCss && <ServerStyleTag factory={scrollbarCss} />\r\n               }\r\n            </>\r\n         }\r\n         <ServerStyleTag factory={themeGlobalStyle} />\r\n         <Tag\r\n            minHeight=\"100%\"\r\n            bgcolor=\"background.primary\"\r\n            color=\"text.primary\"\r\n            fontSize=\"text\"\r\n            fontWeight=\"text\"\r\n            lineHeight=\"text\"\r\n            fontFamily={`system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif`}\r\n            {...props}\r\n            sxr={{\r\n               \"& a\": {\r\n                  color: \"brand.primary\",\r\n               },\r\n            }}\r\n            baseClass={`${theme.name}-theme-root`}\r\n            direction={theme.rtl ? \"rtl\" : \"ltr\"}\r\n         >\r\n            {children}\r\n         </Tag>\r\n      </ThemeContex.Provider>\r\n   )\r\n}\r\n\r\nexport default ThemeProvider"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBA;AAA2D;AACxD;AACA;AAEA;AACG;AACA;;AAEA;AACG;AACH;AAEA;;;AAMG;AACA;;AAEF;AACJ;AAEA;AACG;;AACA;AACG;AACG;AACG;AACA;AACA;AACA;AACA;AACF;AACD;AACG;AACA;AACA;AACK;AACR;AACG;AACA;AACF;AACD;AACG;AACF;AACD;AACG;AACA;AACF;AACD;AACG;AACA;AACA;AACF;AACD;AACG;AACA;AACA;AACA;AACA;AACG;AACF;AACH;AACD;AACG;AACF;AACH;;AAED;AACA;;AAEF;;AAGJ;AACG;;AACA;;;;AAKA;AACG;AACG;AACG;AACA;AACF;AACD;AACG;AACA;AACA;AACF;AACD;AACG;AACA;AACF;AACD;AACG;AACA;AACF;AACH;;AAED;AACA;;AAEF;AACJ;AAEA;;AAIS;AACG;;AAEL;AAqBK;AACG;AACF;;AAShB;;"}
+{"version":3,"file":"ThemeProvider.cjs","sources":["../../src/theme/ThemeProvider.tsx"],"sourcesContent":["\"use client\";\nimport * as React from \"react\"\nimport { ThemeOptionInput, ThemeOptions } from \"./types\"\nimport Tag from \"../Tag\"\nimport { TagComponentType, TagProps } from \"../Tag/types\"\nimport { createTheme, ThemeContex } from \"./core\"\nimport ThemeCssVars from \"./ThemeCssVars\"\nimport { css } from \"../css\"\nimport ServerStyleTag from \"../Tag/ServerStyleTag\"\nimport { useDocument } from \"../Document\";\nimport { themeRootClass } from \".\";\nimport { useCSSCacheId } from \"../css/CSSCacheProvider\";\n\nexport type ThemeProviderProps<T extends TagComponentType = 'div'> = TagProps<T> & {\n   theme: ThemeOptionInput;\n   onThemeChange?: (theme: ThemeOptions) => void\n   isRoot?: boolean;\n   noScrollbarCss?: boolean;\n}\n\nconst ThemeProvider = <T extends TagComponentType = 'div'>({ children, theme: THEME, onThemeChange, isRoot, noScrollbarCss, ...props }: ThemeProviderProps<T>) => {\n   const doc = useDocument()\n   const cacheId = useCSSCacheId()\n\n   const theme = React.useMemo(() => createTheme(THEME), [THEME])\n\n   const themeGlobalStyle: any = React.useMemo(() => {\n      const root_cls = `.xui-${theme.name}-theme-root`\n      let gkeys = Object.keys(theme.globalStyle || {})\n      let gstyles: any = {}\n      gkeys.forEach((key) => {\n         gstyles[`${root_cls} ${key}`] = theme.globalStyle[key as any]\n      })\n\n      return css({\n         \"@global\": {\n            ...gstyles,\n            [root_cls]: ThemeCssVars(theme)\n         }\n      }, {\n         injectStyle: typeof window !== 'undefined',\n         container: doc?.document,\n         cacheId\n      })\n   }, [theme, doc])\n\n   const resetCss = React.useMemo(() => {\n      if (!isRoot) return\n      return css({\n         \"@global\": {\n            \"*\": {\n               m: 0,\n               p: 0,\n               outline: \"none\",\n               boxSizing: \"border-box\",\n               verticalAlign: \"baseline\",\n            },\n            \"html, body\": {\n               height: \"100%\",\n               \"-webkit-font-smoothing\": \"antialiased\",\n               \"-moz-osx-font-smoothing\": \"grayscale\",\n            } as any,\n            \"img, picture, video, canvas, svg\": {\n               maxWidth: \"100%\",\n               display: \"block\"\n            },\n            \"input, button, textarea, select\": {\n               font: \"inherit\"\n            },\n            \"table\": {\n               borderCollapse: \"collapse\",\n               borderSpacing: 0,\n            },\n            \"ol, ul\": {\n               listStyle: \"none\",\n               padding: 0,\n               margin: 0,\n            },\n            \"a\": {\n               display: \"inline-block\",\n               color: \"inherit\",\n               textDecoration: \"none\",\n               cursor: \"pointer\",\n               \"&:hover\": {\n                  textDecoration: \"underline\"\n               }\n            },\n            \"p, h1, h2, h3, h4, h5, h6\": {\n               overflowWrap: \"break-word\",\n            },\n         }\n      }, {\n         injectStyle: typeof window !== 'undefined',\n         container: doc?.document,\n         cacheId\n      })\n   }, [])\n\n   const scrollbarCss: any = React.useMemo(() => {\n      if (noScrollbarCss) return;\n      const cls = (cls: string) => `${themeRootClass(theme.name)} ${cls}`\n      let thumbSize = 6\n      let thumbColor = \"var(--color-text-secondary)\"\n      let trackColor = \"transparent\"\n\n      return css({\n         \"@global\": {\n            [cls('*::-webkit-scrollbar')]: {\n               width: thumbSize,\n               height: thumbSize,\n            },\n            [cls(\"*::-webkit-scrollbar-thumb\")]: {\n               backgroundColor: thumbColor,\n               borderRadius: \"6px\",\n               opacity: 0.6,\n            },\n            [cls(\"*::-webkit-scrollbar-thumb:hover\")]: {\n               backgroundColor: thumbColor,\n               opacity: 0.0,\n            },\n            [cls(\"*::-webkit-scrollbar-track\")]: {\n               backgroundColor: trackColor,\n               borderRadius: \"6px\",\n            },\n         }\n      }, {\n         injectStyle: typeof window !== 'undefined',\n         container: doc?.document,\n         cacheId\n      }) as any\n   }, [noScrollbarCss, theme])\n\n   return (\n      <ThemeContex.Provider\n         value={{\n            theme,\n            onChange: (t) => {\n               onThemeChange && onThemeChange(t)\n            }\n         }}\n      >\n         {\n            isRoot && <>\n               <ServerStyleTag factory={resetCss as any} />\n               {\n                  !noScrollbarCss && <ServerStyleTag factory={scrollbarCss} />\n               }\n            </>\n         }\n         <ServerStyleTag factory={themeGlobalStyle} />\n         <Tag\n            minHeight=\"100%\"\n            bgcolor=\"surface.main\"\n            color=\"surface.contrast\"\n            fontSize=\"text\"\n            fontWeight=\"text\"\n            lineHeight=\"text\"\n            fontFamily={`system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif`}\n            {...props}\n            sxr={{\n               \"& a\": {\n                  color: \"primary.main\",\n               },\n            }}\n            baseClass={`${theme.name}-theme-root`}\n            direction={theme.rtl ? \"rtl\" : \"ltr\"}\n         >\n            {children}\n         </Tag>\n      </ThemeContex.Provider>\n   )\n}\n\nexport default ThemeProvider"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBA;AAA2D;AACxD;AACA;AAEA;AAEA;AACG;AACA;;AAEA;AACG;AACH;AAEA;;;AAMG;AACA;;AAEF;AACJ;AAEA;AACG;;AACA;AACG;AACG;AACG;AACA;AACA;AACA;AACA;AACF;AACD;AACG;AACA;AACA;AACK;AACR;AACG;AACA;AACF;AACD;AACG;AACF;AACD;AACG;AACA;AACF;AACD;AACG;AACA;AACA;AACF;AACD;AACG;AACA;AACA;AACA;AACA;AACG;AACF;AACH;AACD;AACG;AACF;AACH;;AAED;AACA;;AAEF;;AAGJ;AACG;;AACA;;;;AAKA;AACG;AACG;AACG;AACA;AACF;AACD;AACG;AACA;AACA;AACF;AACD;AACG;AACA;AACF;AACD;AACG;AACA;AACF;AACH;;AAED;AACA;;AAEF;AACJ;AAEA;;AAIS;AACG;;AAEL;AAqBK;AACG;AACF;;AAShB;;"}

package/theme/ThemeProvider.d.ts

@@ -1,14 +1,14 @@
 import * as React from 'react';
-import { ThemeOptions } from './types.js';
+import { ThemeOptionInput, ThemeOptions } from './types.js';
 import { TagComponentType, TagProps } from '../Tag/types.js';
 
 type ThemeProviderProps<T extends TagComponentType = 'div'> = TagProps<T> & {
-    theme: ThemeOptions;
+    theme: ThemeOptionInput;
     onThemeChange?: (theme: ThemeOptions) => void;
     isRoot?: boolean;
     noScrollbarCss?: boolean;
 };
-declare const ThemeProvider: <T extends TagComponentType = "div">({ children, theme, onThemeChange, isRoot, noScrollbarCss, ...props }: ThemeProviderProps<T>) => React.JSX.Element;
+declare const ThemeProvider: <T extends TagComponentType = "div">({ children, theme: THEME, onThemeChange, isRoot, noScrollbarCss, ...props }: ThemeProviderProps<T>) => React.JSX.Element;
 
 export { ThemeProvider as default };
 export type { ThemeProviderProps };

package/theme/ThemeProvider.js

@@ -3,7 +3,7 @@ import { __rest } from 'tslib';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
 import Tag from '../Tag/index.js';
-import { ThemeContex } from './core.js';
+import { createTheme, ThemeContex } from './core.js';
 import ThemeCssVars from './ThemeCssVars.js';
 import { css } from '../css/index.js';
 import ServerStyleTag from '../Tag/ServerStyleTag.js';
@@ -12,9 +12,10 @@ import { themeRootClass } from './index.js';
 import { useCSSCacheId } from '../css/CSSCacheProvider.js';
 
 const ThemeProvider = (_a) => {
-    var { children, theme, onThemeChange, isRoot, noScrollbarCss } = _a, props = __rest(_a, ["children", "theme", "onThemeChange", "isRoot", "noScrollbarCss"]);
+    var { children, theme: THEME, onThemeChange, isRoot, noScrollbarCss } = _a, props = __rest(_a, ["children", "theme", "onThemeChange", "isRoot", "noScrollbarCss"]);
     const doc = useDocument();
     const cacheId = useCSSCacheId();
+    const theme = React.useMemo(() => createTheme(THEME), [THEME]);
     const themeGlobalStyle = React.useMemo(() => {
         const root_cls = `.xui-${theme.name}-theme-root`;
         let gkeys = Object.keys(theme.globalStyle || {});
@@ -120,9 +121,9 @@ const ThemeProvider = (_a) => {
             onChange: (t) => {
                 onThemeChange && onThemeChange(t);
             }
-        }, children: [isRoot && jsxs(Fragment, { children: [jsx(ServerStyleTag, { factory: resetCss }), !noScrollbarCss && jsx(ServerStyleTag, { factory: scrollbarCss })] }), jsx(ServerStyleTag, { factory: themeGlobalStyle }), jsx(Tag, Object.assign({ minHeight: "100%", bgcolor: "background.primary", color: "text.primary", fontSize: "text", fontWeight: "text", lineHeight: "text", fontFamily: `system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif` }, props, { sxr: {
+        }, children: [isRoot && jsxs(Fragment, { children: [jsx(ServerStyleTag, { factory: resetCss }), !noScrollbarCss && jsx(ServerStyleTag, { factory: scrollbarCss })] }), jsx(ServerStyleTag, { factory: themeGlobalStyle }), jsx(Tag, Object.assign({ minHeight: "100%", bgcolor: "surface.main", color: "surface.contrast", fontSize: "text", fontWeight: "text", lineHeight: "text", fontFamily: `system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif` }, props, { sxr: {
                     "& a": {
-                        color: "brand.primary",
+                        color: "primary.main",
                     },
                 }, baseClass: `${theme.name}-theme-root`, direction: theme.rtl ? "rtl" : "ltr", children: children }))] }));
 };

package/theme/ThemeProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeProvider.js","sources":["../../src/theme/ThemeProvider.tsx"],"sourcesContent":["\"use client\";\r\nimport * as React from \"react\"\r\nimport { ThemeOptions } from \"./types\"\r\nimport Tag from \"../Tag\"\r\nimport { TagComponentType, TagProps } from \"../Tag/types\"\r\nimport { ThemeContex } from \"./core\"\r\nimport ThemeCssVars from \"./ThemeCssVars\"\r\nimport { css } from \"../css\"\r\nimport ServerStyleTag from \"../Tag/ServerStyleTag\"\r\nimport { useDocument } from \"../Document\";\r\nimport { themeRootClass } from \".\";\r\nimport { useCSSCacheId } from \"../css/CSSCacheProvider\";\r\n\r\nexport type ThemeProviderProps<T extends TagComponentType = 'div'> = TagProps<T> & {\r\n   theme: ThemeOptions;\r\n   onThemeChange?: (theme: ThemeOptions) => void\r\n   isRoot?: boolean;\r\n   noScrollbarCss?: boolean;\r\n}\r\n\r\nconst ThemeProvider = <T extends TagComponentType = 'div'>({ children, theme, onThemeChange, isRoot, noScrollbarCss, ...props }: ThemeProviderProps<T>) => {\r\n   const doc = useDocument()\r\n   const cacheId = useCSSCacheId()\r\n\r\n   const themeGlobalStyle: any = React.useMemo(() => {\r\n      const root_cls = `.xui-${theme.name}-theme-root`\r\n      let gkeys = Object.keys(theme.globalStyle || {})\r\n      let gstyles: any = {}\r\n      gkeys.forEach((key) => {\r\n         gstyles[`${root_cls} ${key}`] = theme.globalStyle[key as any]\r\n      })\r\n\r\n      return css({\r\n         \"@global\": {\r\n            ...gstyles,\r\n            [root_cls]: ThemeCssVars(theme)\r\n         }\r\n      }, {\r\n         injectStyle: typeof window !== 'undefined',\r\n         container: doc?.document,\r\n         cacheId\r\n      })\r\n   }, [theme, doc])\r\n\r\n   const resetCss = React.useMemo(() => {\r\n      if (!isRoot) return\r\n      return css({\r\n         \"@global\": {\r\n            \"*\": {\r\n               m: 0,\r\n               p: 0,\r\n               outline: \"none\",\r\n               boxSizing: \"border-box\",\r\n               verticalAlign: \"baseline\",\r\n            },\r\n            \"html, body\": {\r\n               height: \"100%\",\r\n               \"-webkit-font-smoothing\": \"antialiased\",\r\n               \"-moz-osx-font-smoothing\": \"grayscale\",\r\n            } as any,\r\n            \"img, picture, video, canvas, svg\": {\r\n               maxWidth: \"100%\",\r\n               display: \"block\"\r\n            },\r\n            \"input, button, textarea, select\": {\r\n               font: \"inherit\"\r\n            },\r\n            \"table\": {\r\n               borderCollapse: \"collapse\",\r\n               borderSpacing: 0,\r\n            },\r\n            \"ol, ul\": {\r\n               listStyle: \"none\",\r\n               padding: 0,\r\n               margin: 0,\r\n            },\r\n            \"a\": {\r\n               display: \"inline-block\",\r\n               color: \"inherit\",\r\n               textDecoration: \"none\",\r\n               cursor: \"pointer\",\r\n               \"&:hover\": {\r\n                  textDecoration: \"underline\"\r\n               }\r\n            },\r\n            \"p, h1, h2, h3, h4, h5, h6\": {\r\n               overflowWrap: \"break-word\",\r\n            },\r\n         }\r\n      }, {\r\n         injectStyle: typeof window !== 'undefined',\r\n         container: doc?.document,\r\n         cacheId\r\n      })\r\n   }, [])\r\n\r\n   const scrollbarCss: any = React.useMemo(() => {\r\n      if (noScrollbarCss) return;\r\n      const cls = (cls: string) => `${themeRootClass(theme.name)} ${cls}`\r\n      let thumbSize = 6\r\n      let thumbColor = \"var(--color-text-secondary)\"\r\n      let trackColor = \"transparent\"\r\n\r\n      return css({\r\n         \"@global\": {\r\n            [cls('*::-webkit-scrollbar')]: {\r\n               width: thumbSize,\r\n               height: thumbSize,\r\n            },\r\n            [cls(\"*::-webkit-scrollbar-thumb\")]: {\r\n               backgroundColor: thumbColor,\r\n               borderRadius: \"6px\",\r\n               opacity: 0.6,\r\n            },\r\n            [cls(\"*::-webkit-scrollbar-thumb:hover\")]: {\r\n               backgroundColor: thumbColor,\r\n               opacity: 0.0,\r\n            },\r\n            [cls(\"*::-webkit-scrollbar-track\")]: {\r\n               backgroundColor: trackColor,\r\n               borderRadius: \"6px\",\r\n            },\r\n         }\r\n      }, {\r\n         injectStyle: typeof window !== 'undefined',\r\n         container: doc?.document,\r\n         cacheId\r\n      }) as any\r\n   }, [noScrollbarCss, theme])\r\n\r\n   return (\r\n      <ThemeContex.Provider\r\n         value={{\r\n            theme,\r\n            onChange: (t) => {\r\n               onThemeChange && onThemeChange(t)\r\n            }\r\n         }}\r\n      >\r\n         {\r\n            isRoot && <>\r\n               <ServerStyleTag factory={resetCss as any} />\r\n               {\r\n                  !noScrollbarCss && <ServerStyleTag factory={scrollbarCss} />\r\n               }\r\n            </>\r\n         }\r\n         <ServerStyleTag factory={themeGlobalStyle} />\r\n         <Tag\r\n            minHeight=\"100%\"\r\n            bgcolor=\"background.primary\"\r\n            color=\"text.primary\"\r\n            fontSize=\"text\"\r\n            fontWeight=\"text\"\r\n            lineHeight=\"text\"\r\n            fontFamily={`system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif`}\r\n            {...props}\r\n            sxr={{\r\n               \"& a\": {\r\n                  color: \"brand.primary\",\r\n               },\r\n            }}\r\n            baseClass={`${theme.name}-theme-root`}\r\n            direction={theme.rtl ? \"rtl\" : \"ltr\"}\r\n         >\r\n            {children}\r\n         </Tag>\r\n      </ThemeContex.Provider>\r\n   )\r\n}\r\n\r\nexport default ThemeProvider"],"names":[],"mappings":";;;;;;;;;;;;;AAoBA;AAA2D;AACxD;AACA;AAEA;AACG;AACA;;AAEA;AACG;AACH;AAEA;;;AAMG;AACA;;AAEF;AACJ;AAEA;AACG;;AACA;AACG;AACG;AACG;AACA;AACA;AACA;AACA;AACF;AACD;AACG;AACA;AACA;AACK;AACR;AACG;AACA;AACF;AACD;AACG;AACF;AACD;AACG;AACA;AACF;AACD;AACG;AACA;AACA;AACF;AACD;AACG;AACA;AACA;AACA;AACA;AACG;AACF;AACH;AACD;AACG;AACF;AACH;;AAED;AACA;;AAEF;;AAGJ;AACG;;AACA;;;;AAKA;AACG;AACG;AACG;AACA;AACF;AACD;AACG;AACA;AACA;AACF;AACD;AACG;AACA;AACF;AACD;AACG;AACA;AACF;AACH;;AAED;AACA;;AAEF;AACJ;AAEA;;AAIS;AACG;;AAEL;AAqBK;AACG;AACF;;AAShB;;"}
+{"version":3,"file":"ThemeProvider.js","sources":["../../src/theme/ThemeProvider.tsx"],"sourcesContent":["\"use client\";\nimport * as React from \"react\"\nimport { ThemeOptionInput, ThemeOptions } from \"./types\"\nimport Tag from \"../Tag\"\nimport { TagComponentType, TagProps } from \"../Tag/types\"\nimport { createTheme, ThemeContex } from \"./core\"\nimport ThemeCssVars from \"./ThemeCssVars\"\nimport { css } from \"../css\"\nimport ServerStyleTag from \"../Tag/ServerStyleTag\"\nimport { useDocument } from \"../Document\";\nimport { themeRootClass } from \".\";\nimport { useCSSCacheId } from \"../css/CSSCacheProvider\";\n\nexport type ThemeProviderProps<T extends TagComponentType = 'div'> = TagProps<T> & {\n   theme: ThemeOptionInput;\n   onThemeChange?: (theme: ThemeOptions) => void\n   isRoot?: boolean;\n   noScrollbarCss?: boolean;\n}\n\nconst ThemeProvider = <T extends TagComponentType = 'div'>({ children, theme: THEME, onThemeChange, isRoot, noScrollbarCss, ...props }: ThemeProviderProps<T>) => {\n   const doc = useDocument()\n   const cacheId = useCSSCacheId()\n\n   const theme = React.useMemo(() => createTheme(THEME), [THEME])\n\n   const themeGlobalStyle: any = React.useMemo(() => {\n      const root_cls = `.xui-${theme.name}-theme-root`\n      let gkeys = Object.keys(theme.globalStyle || {})\n      let gstyles: any = {}\n      gkeys.forEach((key) => {\n         gstyles[`${root_cls} ${key}`] = theme.globalStyle[key as any]\n      })\n\n      return css({\n         \"@global\": {\n            ...gstyles,\n            [root_cls]: ThemeCssVars(theme)\n         }\n      }, {\n         injectStyle: typeof window !== 'undefined',\n         container: doc?.document,\n         cacheId\n      })\n   }, [theme, doc])\n\n   const resetCss = React.useMemo(() => {\n      if (!isRoot) return\n      return css({\n         \"@global\": {\n            \"*\": {\n               m: 0,\n               p: 0,\n               outline: \"none\",\n               boxSizing: \"border-box\",\n               verticalAlign: \"baseline\",\n            },\n            \"html, body\": {\n               height: \"100%\",\n               \"-webkit-font-smoothing\": \"antialiased\",\n               \"-moz-osx-font-smoothing\": \"grayscale\",\n            } as any,\n            \"img, picture, video, canvas, svg\": {\n               maxWidth: \"100%\",\n               display: \"block\"\n            },\n            \"input, button, textarea, select\": {\n               font: \"inherit\"\n            },\n            \"table\": {\n               borderCollapse: \"collapse\",\n               borderSpacing: 0,\n            },\n            \"ol, ul\": {\n               listStyle: \"none\",\n               padding: 0,\n               margin: 0,\n            },\n            \"a\": {\n               display: \"inline-block\",\n               color: \"inherit\",\n               textDecoration: \"none\",\n               cursor: \"pointer\",\n               \"&:hover\": {\n                  textDecoration: \"underline\"\n               }\n            },\n            \"p, h1, h2, h3, h4, h5, h6\": {\n               overflowWrap: \"break-word\",\n            },\n         }\n      }, {\n         injectStyle: typeof window !== 'undefined',\n         container: doc?.document,\n         cacheId\n      })\n   }, [])\n\n   const scrollbarCss: any = React.useMemo(() => {\n      if (noScrollbarCss) return;\n      const cls = (cls: string) => `${themeRootClass(theme.name)} ${cls}`\n      let thumbSize = 6\n      let thumbColor = \"var(--color-text-secondary)\"\n      let trackColor = \"transparent\"\n\n      return css({\n         \"@global\": {\n            [cls('*::-webkit-scrollbar')]: {\n               width: thumbSize,\n               height: thumbSize,\n            },\n            [cls(\"*::-webkit-scrollbar-thumb\")]: {\n               backgroundColor: thumbColor,\n               borderRadius: \"6px\",\n               opacity: 0.6,\n            },\n            [cls(\"*::-webkit-scrollbar-thumb:hover\")]: {\n               backgroundColor: thumbColor,\n               opacity: 0.0,\n            },\n            [cls(\"*::-webkit-scrollbar-track\")]: {\n               backgroundColor: trackColor,\n               borderRadius: \"6px\",\n            },\n         }\n      }, {\n         injectStyle: typeof window !== 'undefined',\n         container: doc?.document,\n         cacheId\n      }) as any\n   }, [noScrollbarCss, theme])\n\n   return (\n      <ThemeContex.Provider\n         value={{\n            theme,\n            onChange: (t) => {\n               onThemeChange && onThemeChange(t)\n            }\n         }}\n      >\n         {\n            isRoot && <>\n               <ServerStyleTag factory={resetCss as any} />\n               {\n                  !noScrollbarCss && <ServerStyleTag factory={scrollbarCss} />\n               }\n            </>\n         }\n         <ServerStyleTag factory={themeGlobalStyle} />\n         <Tag\n            minHeight=\"100%\"\n            bgcolor=\"surface.main\"\n            color=\"surface.contrast\"\n            fontSize=\"text\"\n            fontWeight=\"text\"\n            lineHeight=\"text\"\n            fontFamily={`system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif`}\n            {...props}\n            sxr={{\n               \"& a\": {\n                  color: \"primary.main\",\n               },\n            }}\n            baseClass={`${theme.name}-theme-root`}\n            direction={theme.rtl ? \"rtl\" : \"ltr\"}\n         >\n            {children}\n         </Tag>\n      </ThemeContex.Provider>\n   )\n}\n\nexport default ThemeProvider"],"names":[],"mappings":";;;;;;;;;;;;;AAoBA;AAA2D;AACxD;AACA;AAEA;AAEA;AACG;AACA;;AAEA;AACG;AACH;AAEA;;;AAMG;AACA;;AAEF;AACJ;AAEA;AACG;;AACA;AACG;AACG;AACG;AACA;AACA;AACA;AACA;AACF;AACD;AACG;AACA;AACA;AACK;AACR;AACG;AACA;AACF;AACD;AACG;AACF;AACD;AACG;AACA;AACF;AACD;AACG;AACA;AACA;AACF;AACD;AACG;AACA;AACA;AACA;AACA;AACG;AACF;AACH;AACD;AACG;AACF;AACH;;AAED;AACA;;AAEF;;AAGJ;AACG;;AACA;;;;AAKA;AACG;AACG;AACG;AACA;AACF;AACD;AACG;AACA;AACA;AACF;AACD;AACG;AACA;AACF;AACD;AACG;AACA;AACF;AACH;;AAED;AACA;;AAEF;AACJ;AAEA;;AAIS;AACG;;AAEL;AAqBK;AACG;AACF;;AAShB;;"}

package/theme/core.cjs

@@ -4,6 +4,7 @@
 var React = require('react');
 var index = require('../css/index.cjs');
 var ThemeDefaultOptions = require('./ThemeDefaultOptions.cjs');
+var oklch = require('./oklch.cjs');
 
 const mergeObject = (a, b) => {
     a = Object.assign({}, a);
@@ -19,28 +20,36 @@ const mergeObject = (a, b) => {
     }
     return a;
 };
-const createTheme = (name, options, mode = "light") => {
-    const defaultOptions = mode === 'light' ? ThemeDefaultOptions.lightThemeOptions : ThemeDefaultOptions.darkThemeOptions;
-    let theme = mergeObject(defaultOptions, Object.assign(Object.assign({}, options), { name, breakpoints: index.breakpoints }));
-    // add alpha colors
-    for (let color in theme.colors) {
-        const c = theme.colors[color];
-        const is_common = color === 'divider' || color === 'background' || color === 'text';
-        c.soft = {
-            primary: is_common ? index.alpha(c.primary, 0.60) : index.alpha(c.primary, 0.08),
-            secondary: is_common ? index.alpha(c.primary, 0.90) : index.alpha(c.primary, 0.12)
-        };
+const createTheme = (options) => {
+    var _a;
+    let mode = (_a = options === null || options === void 0 ? void 0 : options.mode) !== null && _a !== void 0 ? _a : "light";
+    const defaultOptions = mode === 'dark' ? ThemeDefaultOptions.darkThemeOptions : ThemeDefaultOptions.lightThemeOptions;
+    for (let key in options === null || options === void 0 ? void 0 : options.colors) {
+        const color = options === null || options === void 0 ? void 0 : options.colors[key];
+        if (typeof color === "string") {
+            options.colors[key] = oklch.createPalette(color);
+        }
+        else {
+            const main = color.main;
+            if (main) {
+                const pallate = oklch.createPalette(main);
+                options.colors[key] = Object.assign(Object.assign(Object.assign({}, pallate), options.colors[key]), { main: pallate.main });
+            }
+        }
     }
+    let theme = mergeObject(defaultOptions, Object.assign(Object.assign({ name: mode === "dark" ? "default-dark" : "default-light" }, options), { breakpoints: index.breakpoints }));
     return theme;
 };
 const ThemeContex = React.createContext({
-    theme: createTheme("light", {}),
+    theme: createTheme({
+        name: "default-light"
+    }),
     onChange(theme) { },
 });
 const useTheme = () => {
     const ctx = React.useContext(ThemeContex);
     const theme = ctx.theme;
-    theme.change = (theme) => ctx.onChange(theme);
+    theme.change = (theme) => ctx.onChange(createTheme(theme));
     return theme;
 };
 

package/theme/core.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"core.cjs","sources":["../../src/theme/core.ts"],"sourcesContent":["\"use client\"\r\nimport React, { useContext } from \"react\"\r\nimport { ObjectType, ThemeOptions, ThemeOptionInput, ThemeOptionsColor } from \"./types\"\r\nimport { alpha, breakpoints } from \"../css\"\r\nimport { darkThemeOptions, lightThemeOptions } from \"./ThemeDefaultOptions\"\r\n\r\nexport const mergeObject = (a: ObjectType, b: ObjectType) => {\r\n   a = { ...a }\r\n   b = { ...b }\r\n   for (const key in b) {\r\n      const v = (b as any)[key]\r\n      if (typeof v === 'object' && !Array.isArray(v) && !React.isValidElement(v)) {\r\n         a[key] = mergeObject(a[key], b[key])\r\n      } else {\r\n         a[key] = v\r\n      }\r\n   }\r\n   return a\r\n}\r\n\r\n\r\nexport const createTheme = (name: string, options: ThemeOptionInput, mode: \"light\" | \"dark\" = \"light\"): ThemeOptions => {\r\n   const defaultOptions = mode === 'light' ? lightThemeOptions : darkThemeOptions\r\n   let theme: any = mergeObject(defaultOptions, {\r\n      ...options,\r\n      name,\r\n      breakpoints: breakpoints\r\n   })\r\n\r\n   // add alpha colors\r\n   for (let color in theme.colors) {\r\n      const c = theme.colors[color] as ThemeOptionsColor\r\n      const is_common = color === 'divider' || color === 'background' || color === 'text'\r\n      c.soft = {\r\n         primary: is_common ? alpha(c.primary, 0.60) : alpha(c.primary, 0.08),\r\n         secondary: is_common ? alpha(c.primary, 0.90) : alpha(c.primary, 0.12)\r\n      }\r\n   }\r\n\r\n   return theme as ThemeOptions\r\n}\r\n\r\nexport type ThemeCntextProps = {\r\n   theme: ThemeOptions,\r\n   onChange: (theme: ThemeOptions) => void\r\n}\r\n\r\nexport const ThemeContex = React.createContext<ThemeCntextProps>({\r\n   theme: createTheme(\"light\", {}),\r\n   onChange(theme) { },\r\n})\r\n\r\nexport const useTheme = () => {\r\n   const ctx = useContext(ThemeContex)\r\n   const theme = ctx.theme\r\n   theme.change = (theme: ThemeOptions) => ctx.onChange(theme)\r\n   return theme\r\n}\r\n\r\n"],"names":[],"mappings":";;;;;;;;;;AASG;AACG;;AAEG;;;AAEA;;;AAGN;AACH;AAGO;AACJ;AACA;;AAOA;;AAEG;;;;;;AAOH;AACH;AAOO;AACJ;;AAEF;AAEM;AACJ;AACA;AACA;AACA;AACH;;;;;"}
+{"version":3,"file":"core.cjs","sources":["../../src/theme/core.ts"],"sourcesContent":["\"use client\"\nimport React, { useContext } from \"react\"\nimport { ObjectType, ThemeOptions, ThemeOptionInput } from \"./types\"\nimport { breakpoints } from \"../css\"\nimport { darkThemeOptions, lightThemeOptions } from \"./ThemeDefaultOptions\"\nimport { createPalette } from \"./oklch\"\n\nexport const mergeObject = (a: ObjectType, b: ObjectType) => {\n   a = { ...a }\n   b = { ...b }\n   for (const key in b) {\n      const v = (b as any)[key]\n      if (typeof v === 'object' && !Array.isArray(v) && !React.isValidElement(v)) {\n         a[key] = mergeObject(a[key], b[key])\n      } else {\n         a[key] = v\n      }\n   }\n   return a\n}\n\n\nexport const createTheme = (options: ThemeOptionInput): ThemeOptions => {\n   let mode = options?.mode ?? \"light\"\n   const defaultOptions = mode === 'dark' ? darkThemeOptions : lightThemeOptions\n\n   for (let key in options?.colors) {\n      const color = (options as any)?.colors[key] as any\n      if (typeof color === \"string\") {\n         (options as any).colors[key] = createPalette(color)\n      } else {\n         const main = color.main\n         if (main) {\n            const pallate = createPalette(main);\n            (options as any).colors[key] = {\n               ...pallate,\n               ...(options as any).colors[key],\n               main: pallate.main\n            }\n         }\n      }\n   }\n\n   let theme: any = mergeObject(defaultOptions, {\n      name: mode === \"dark\" ? \"default-dark\" : \"default-light\",\n      ...options,\n      breakpoints: breakpoints\n   })\n\n   return theme as ThemeOptions\n}\n\nexport type ThemeCntextProps = {\n   theme: ThemeOptions,\n   onChange: (theme: ThemeOptions) => void\n}\n\nexport const ThemeContex = React.createContext<ThemeCntextProps>({\n   theme: createTheme({\n      name: \"default-light\"\n   }),\n   onChange(theme) { },\n})\n\nexport const useTheme = () => {\n   const ctx = useContext(ThemeContex)\n   const theme = ctx.theme\n   theme.change = (theme: ThemeOptionInput) => ctx.onChange(createTheme(theme))\n   return theme\n}\n\n"],"names":[],"mappings":";;;;;;;;;;;AAUG;AACG;;AAEG;;;AAEA;;;AAGN;AACH;AAGO;;AACJ;AACA;;AAGG;AACA;;;;AAGG;;AAEG;;;;;;AAgBT;AACH;AAOO;;AAED;;;AAGL;AAEM;AACJ;AACA;AACA;AACA;AACH;;;;;"}

package/theme/core.d.ts

@@ -1,6 +1,6 @@
 import { ThemeOptionInput, ThemeOptions } from './types.js';
 
-declare const createTheme: (name: string, options: ThemeOptionInput, mode?: "light" | "dark") => ThemeOptions;
+declare const createTheme: (options: ThemeOptionInput) => ThemeOptions;
 declare const useTheme: () => ThemeOptions;
 
 export { createTheme, useTheme };

package/theme/core.js

@@ -1,7 +1,8 @@
 "use client";
 import React__default, { useContext } from 'react';
-import { breakpoints, alpha } from '../css/index.js';
-import { lightThemeOptions, darkThemeOptions } from './ThemeDefaultOptions.js';
+import { breakpoints } from '../css/index.js';
+import { darkThemeOptions, lightThemeOptions } from './ThemeDefaultOptions.js';
+import { createPalette } from './oklch.js';
 
 const mergeObject = (a, b) => {
     a = Object.assign({}, a);
@@ -17,28 +18,36 @@ const mergeObject = (a, b) => {
     }
     return a;
 };
-const createTheme = (name, options, mode = "light") => {
-    const defaultOptions = mode === 'light' ? lightThemeOptions : darkThemeOptions;
-    let theme = mergeObject(defaultOptions, Object.assign(Object.assign({}, options), { name, breakpoints: breakpoints }));
-    // add alpha colors
-    for (let color in theme.colors) {
-        const c = theme.colors[color];
-        const is_common = color === 'divider' || color === 'background' || color === 'text';
-        c.soft = {
-            primary: is_common ? alpha(c.primary, 0.60) : alpha(c.primary, 0.08),
-            secondary: is_common ? alpha(c.primary, 0.90) : alpha(c.primary, 0.12)
-        };
+const createTheme = (options) => {
+    var _a;
+    let mode = (_a = options === null || options === void 0 ? void 0 : options.mode) !== null && _a !== void 0 ? _a : "light";
+    const defaultOptions = mode === 'dark' ? darkThemeOptions : lightThemeOptions;
+    for (let key in options === null || options === void 0 ? void 0 : options.colors) {
+        const color = options === null || options === void 0 ? void 0 : options.colors[key];
+        if (typeof color === "string") {
+            options.colors[key] = createPalette(color);
+        }
+        else {
+            const main = color.main;
+            if (main) {
+                const pallate = createPalette(main);
+                options.colors[key] = Object.assign(Object.assign(Object.assign({}, pallate), options.colors[key]), { main: pallate.main });
+            }
+        }
     }
+    let theme = mergeObject(defaultOptions, Object.assign(Object.assign({ name: mode === "dark" ? "default-dark" : "default-light" }, options), { breakpoints: breakpoints }));
     return theme;
 };
 const ThemeContex = React__default.createContext({
-    theme: createTheme("light", {}),
+    theme: createTheme({
+        name: "default-light"
+    }),
     onChange(theme) { },
 });
 const useTheme = () => {
     const ctx = useContext(ThemeContex);
     const theme = ctx.theme;
-    theme.change = (theme) => ctx.onChange(theme);
+    theme.change = (theme) => ctx.onChange(createTheme(theme));
     return theme;
 };
 

package/theme/core.js.map

@@ -1 +1 @@
-{"version":3,"file":"core.js","sources":["../../src/theme/core.ts"],"sourcesContent":["\"use client\"\r\nimport React, { useContext } from \"react\"\r\nimport { ObjectType, ThemeOptions, ThemeOptionInput, ThemeOptionsColor } from \"./types\"\r\nimport { alpha, breakpoints } from \"../css\"\r\nimport { darkThemeOptions, lightThemeOptions } from \"./ThemeDefaultOptions\"\r\n\r\nexport const mergeObject = (a: ObjectType, b: ObjectType) => {\r\n   a = { ...a }\r\n   b = { ...b }\r\n   for (const key in b) {\r\n      const v = (b as any)[key]\r\n      if (typeof v === 'object' && !Array.isArray(v) && !React.isValidElement(v)) {\r\n         a[key] = mergeObject(a[key], b[key])\r\n      } else {\r\n         a[key] = v\r\n      }\r\n   }\r\n   return a\r\n}\r\n\r\n\r\nexport const createTheme = (name: string, options: ThemeOptionInput, mode: \"light\" | \"dark\" = \"light\"): ThemeOptions => {\r\n   const defaultOptions = mode === 'light' ? lightThemeOptions : darkThemeOptions\r\n   let theme: any = mergeObject(defaultOptions, {\r\n      ...options,\r\n      name,\r\n      breakpoints: breakpoints\r\n   })\r\n\r\n   // add alpha colors\r\n   for (let color in theme.colors) {\r\n      const c = theme.colors[color] as ThemeOptionsColor\r\n      const is_common = color === 'divider' || color === 'background' || color === 'text'\r\n      c.soft = {\r\n         primary: is_common ? alpha(c.primary, 0.60) : alpha(c.primary, 0.08),\r\n         secondary: is_common ? alpha(c.primary, 0.90) : alpha(c.primary, 0.12)\r\n      }\r\n   }\r\n\r\n   return theme as ThemeOptions\r\n}\r\n\r\nexport type ThemeCntextProps = {\r\n   theme: ThemeOptions,\r\n   onChange: (theme: ThemeOptions) => void\r\n}\r\n\r\nexport const ThemeContex = React.createContext<ThemeCntextProps>({\r\n   theme: createTheme(\"light\", {}),\r\n   onChange(theme) { },\r\n})\r\n\r\nexport const useTheme = () => {\r\n   const ctx = useContext(ThemeContex)\r\n   const theme = ctx.theme\r\n   theme.change = (theme: ThemeOptions) => ctx.onChange(theme)\r\n   return theme\r\n}\r\n\r\n"],"names":[],"mappings":";;;;;;;;AASG;AACG;;AAEG;;;AAEA;;;AAGN;AACH;AAGO;AACJ;AACA;;AAOA;;AAEG;;;;;;AAOH;AACH;AAOO;AACJ;;AAEF;AAEM;AACJ;AACA;AACA;AACA;AACH;;"}
+{"version":3,"file":"core.js","sources":["../../src/theme/core.ts"],"sourcesContent":["\"use client\"\nimport React, { useContext } from \"react\"\nimport { ObjectType, ThemeOptions, ThemeOptionInput } from \"./types\"\nimport { breakpoints } from \"../css\"\nimport { darkThemeOptions, lightThemeOptions } from \"./ThemeDefaultOptions\"\nimport { createPalette } from \"./oklch\"\n\nexport const mergeObject = (a: ObjectType, b: ObjectType) => {\n   a = { ...a }\n   b = { ...b }\n   for (const key in b) {\n      const v = (b as any)[key]\n      if (typeof v === 'object' && !Array.isArray(v) && !React.isValidElement(v)) {\n         a[key] = mergeObject(a[key], b[key])\n      } else {\n         a[key] = v\n      }\n   }\n   return a\n}\n\n\nexport const createTheme = (options: ThemeOptionInput): ThemeOptions => {\n   let mode = options?.mode ?? \"light\"\n   const defaultOptions = mode === 'dark' ? darkThemeOptions : lightThemeOptions\n\n   for (let key in options?.colors) {\n      const color = (options as any)?.colors[key] as any\n      if (typeof color === \"string\") {\n         (options as any).colors[key] = createPalette(color)\n      } else {\n         const main = color.main\n         if (main) {\n            const pallate = createPalette(main);\n            (options as any).colors[key] = {\n               ...pallate,\n               ...(options as any).colors[key],\n               main: pallate.main\n            }\n         }\n      }\n   }\n\n   let theme: any = mergeObject(defaultOptions, {\n      name: mode === \"dark\" ? \"default-dark\" : \"default-light\",\n      ...options,\n      breakpoints: breakpoints\n   })\n\n   return theme as ThemeOptions\n}\n\nexport type ThemeCntextProps = {\n   theme: ThemeOptions,\n   onChange: (theme: ThemeOptions) => void\n}\n\nexport const ThemeContex = React.createContext<ThemeCntextProps>({\n   theme: createTheme({\n      name: \"default-light\"\n   }),\n   onChange(theme) { },\n})\n\nexport const useTheme = () => {\n   const ctx = useContext(ThemeContex)\n   const theme = ctx.theme\n   theme.change = (theme: ThemeOptionInput) => ctx.onChange(createTheme(theme))\n   return theme\n}\n\n"],"names":[],"mappings":";;;;;;;;;AAUG;AACG;;AAEG;;;AAEA;;;AAGN;AACH;AAGO;;AACJ;AACA;;AAGG;AACA;;;;AAGG;;AAEG;;;;;;AAgBT;AACH;AAOO;;AAED;;;AAGL;AAEM;AACJ;AACA;AACA;AACA;AACH;;"}

package/theme/index.cjs

@@ -9,11 +9,14 @@ var core = require('./core.cjs');
 require('../css/getValue.cjs');
 require('oncss');
 require('../Document/index.cjs');
+var ThemeDefaultOptions = require('./ThemeDefaultOptions.cjs');
 require('../css/CSSCacheProvider.cjs');
 
 const themeRootClass = (theme) => `.xui-${theme}-theme-root`;
 
 exports.createTheme = core.createTheme;
 exports.useTheme = core.useTheme;
+exports.darkThemeOptions = ThemeDefaultOptions.darkThemeOptions;
+exports.lightThemeOptions = ThemeDefaultOptions.lightThemeOptions;
 exports.themeRootClass = themeRootClass;
 //# sourceMappingURL=index.cjs.map

package/theme/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/theme/index.tsx"],"sourcesContent":["\"use client\"\r\nimport ThemeProvider from './ThemeProvider'\r\nimport { useTheme, createTheme } from './core'\r\nimport { lightThemeOptions, darkThemeOptions } from './ThemeDefaultOptions'\r\nexport type { ThemeProviderProps } from './ThemeProvider'\r\n\r\nexport const themeRootClass = (theme: string) => `.xui-${theme}-theme-root`\r\n\r\nexport {\r\n    ThemeProvider,\r\n    createTheme,\r\n    useTheme,\r\n    lightThemeOptions,\r\n    darkThemeOptions\r\n}\r\n\r\n"],"names":[],"mappings":";;;;;;;;;;;;;AAMO;;;;"}
+{"version":3,"file":"index.cjs","sources":["../../src/theme/index.tsx"],"sourcesContent":["\"use client\"\nimport ThemeProvider from './ThemeProvider'\nimport { useTheme, createTheme } from './core'\nimport { lightThemeOptions, darkThemeOptions } from './ThemeDefaultOptions'\nexport type { ThemeProviderProps } from './ThemeProvider'\n\nexport const themeRootClass = (theme: string) => `.xui-${theme}-theme-root`\n\nexport {\n    ThemeProvider,\n    createTheme,\n    useTheme,\n    lightThemeOptions,\n    darkThemeOptions\n}\n\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAMO;;;;;;"}

package/theme/index.js

@@ -7,6 +7,7 @@ export { createTheme, useTheme } from './core.js';
 import '../css/getValue.js';
 import 'oncss';
 import '../Document/index.js';
+export { darkThemeOptions, lightThemeOptions } from './ThemeDefaultOptions.js';
 import '../css/CSSCacheProvider.js';
 
 const themeRootClass = (theme) => `.xui-${theme}-theme-root`;

package/theme/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/theme/index.tsx"],"sourcesContent":["\"use client\"\r\nimport ThemeProvider from './ThemeProvider'\r\nimport { useTheme, createTheme } from './core'\r\nimport { lightThemeOptions, darkThemeOptions } from './ThemeDefaultOptions'\r\nexport type { ThemeProviderProps } from './ThemeProvider'\r\n\r\nexport const themeRootClass = (theme: string) => `.xui-${theme}-theme-root`\r\n\r\nexport {\r\n    ThemeProvider,\r\n    createTheme,\r\n    useTheme,\r\n    lightThemeOptions,\r\n    darkThemeOptions\r\n}\r\n\r\n"],"names":[],"mappings":";;;;;;;;;;;AAMO;;"}
+{"version":3,"file":"index.js","sources":["../../src/theme/index.tsx"],"sourcesContent":["\"use client\"\nimport ThemeProvider from './ThemeProvider'\nimport { useTheme, createTheme } from './core'\nimport { lightThemeOptions, darkThemeOptions } from './ThemeDefaultOptions'\nexport type { ThemeProviderProps } from './ThemeProvider'\n\nexport const themeRootClass = (theme: string) => `.xui-${theme}-theme-root`\n\nexport {\n    ThemeProvider,\n    createTheme,\n    useTheme,\n    lightThemeOptions,\n    darkThemeOptions\n}\n\n"],"names":[],"mappings":";;;;;;;;;;;;AAMO;;"}

package/theme/oklch.cjs

@@ -0,0 +1,249 @@
+'use strict';
+
+/* ---------------- PARSERS ---------------- */
+function toOKLCH(input) {
+    if (input.startsWith("oklch")) {
+        const values = input.match(/[\d.]+/g);
+        if (!values || values.length < 3) {
+            throw new Error("Invalid OKLCH format");
+        }
+        let [l, c, h] = values.map(Number);
+        return {
+            l: l > 1 ? l / 100 : l,
+            c,
+            h,
+        };
+    }
+    const rgb = parseToRgb(input);
+    const lab = rgbToOklab(rgb.r, rgb.g, rgb.b);
+    return oklabToOklch(lab.L, lab.a, lab.b);
+}
+function parseToRgb(input) {
+    input = input.trim().toLowerCase();
+    if (input.startsWith("#"))
+        return parseHex(input);
+    if (input.startsWith("rgb"))
+        return parseRgb(input);
+    if (input.startsWith("hsl"))
+        return parseHsl(input);
+    throw new Error("Unsupported format");
+}
+/* ---------------- CORE MATH ---------------- */
+function srgbToLinear(c) {
+    return c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+}
+function rgbToOklab(r, g, b) {
+    r = srgbToLinear(r);
+    g = srgbToLinear(g);
+    b = srgbToLinear(b);
+    const l = 0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b;
+    const m = 0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b;
+    const s = 0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b;
+    const l_ = Math.cbrt(l);
+    const m_ = Math.cbrt(m);
+    const s_ = Math.cbrt(s);
+    return {
+        L: 0.2104542553 * l_ + 0.793617785 * m_ - 0.0040720468 * s_,
+        a: 1.9779984951 * l_ - 2.428592205 * m_ + 0.4505937099 * s_,
+        b: 0.0259040371 * l_ + 0.7827717662 * m_ - 0.808675766 * s_,
+    };
+}
+function oklabToOklch(L, a, b) {
+    const c = Math.sqrt(a * a + b * b);
+    let h = Math.atan2(b, a) * (180 / Math.PI);
+    if (h < 0)
+        h += 360;
+    return { l: L, c, h };
+}
+/* ---------------- FORMAT ---------------- */
+function formatOklch(color, alpha = 1) {
+    const l = (color.l * 100).toFixed(2) + "%";
+    const c = color.c.toFixed(4);
+    const h = color.h.toFixed(2);
+    return alpha === 1
+        ? `oklch(${l} ${c} ${h})`
+        : `oklch(${l} ${c} ${h} / ${alpha})`;
+}
+/* ---------------- UTILS ---------------- */
+function clamp(v, min = 0, max = 1) {
+    return Math.min(max, Math.max(min, v));
+}
+function createPalette(input) {
+    const base = toOKLCH(input);
+    const isTrueBlack = base.l < 0.2 && base.c < 0.02;
+    const isTrueWhite = base.l > 0.92 && base.c < 0.015;
+    const isDark = base.l < 0.75;
+    if (isTrueBlack) {
+        return {
+            main: formatOklch(base),
+            light: formatOklch({
+                l: clamp(base.l + (1 - base.l) * 0.10),
+                c: base.c * 0.85,
+                h: base.h,
+            }),
+            dark: formatOklch({
+                l: 0.04,
+                c: 0.005,
+                h: base.h,
+            }),
+            muted: formatOklch({
+                l: 0.72,
+                c: 0.01,
+                h: base.h,
+            }),
+            disabled: formatOklch({
+                l: 0.30,
+                c: 0,
+                h: base.h,
+            }),
+            contrast: formatOklch({
+                l: 0.98,
+                c: 0.01,
+                h: base.h,
+            }),
+            divider: formatOklch({
+                l: 0.30,
+                c: 0.002,
+                h: 0,
+            }),
+            ghost: formatOklch({
+                l: clamp(base.l + (1 - base.l) * 0.10),
+                c: base.c * 0.85,
+                h: base.h,
+            }, 0.6),
+        };
+    }
+    if (isTrueWhite) {
+        return {
+            main: formatOklch(base),
+            light: formatOklch({
+                l: 0.95,
+                c: 0,
+                h: base.h
+            }),
+            dark: formatOklch({
+                l: 0.86,
+                c: 0,
+                h: base.h,
+            }),
+            muted: formatOklch({
+                l: 0.55,
+                c: 0,
+                h: base.h,
+            }),
+            disabled: formatOklch({
+                l: 0.75,
+                c: 0,
+                h: base.h,
+            }),
+            contrast: formatOklch({
+                l: 0.15,
+                c: 0,
+                h: base.h,
+            }),
+            divider: formatOklch({
+                l: 0.85,
+                c: 0,
+                h: 0,
+            }),
+            ghost: formatOklch({
+                l: 0.85,
+                c: 0,
+                h: base.h
+            }, 0.2),
+        };
+    }
+    return {
+        main: formatOklch(base),
+        light: formatOklch({
+            l: clamp(base.l + 0.10),
+            c: clamp(base.c * 1.2),
+            h: base.h
+        }),
+        dark: formatOklch({
+            l: clamp(base.l - 0.06),
+            c: clamp(base.c * 1),
+            h: base.h
+        }),
+        muted: formatOklch({
+            l: clamp(base.l + (isDark ? 0.25 : -0.25)),
+            c: clamp(base.c * 0.22),
+            h: base.h
+        }),
+        disabled: formatOklch({
+            l: clamp(base.l + (isDark ? 0.01 : -0.01)),
+            c: clamp(base.c * 0.15),
+            h: base.h
+        }),
+        contrast: formatOklch({
+            l: isDark ? 0.97 : 0.11,
+            c: 0.01,
+            h: base.h
+        }),
+        divider: formatOklch({
+            l: clamp(base.l - 0.20),
+            c: clamp(base.c * 1.08),
+            h: base.h
+        }, .3),
+        ghost: formatOklch(base, isDark ? 0.1 : .22),
+    };
+}
+/* ---------------- PARSERS ---------------- */
+function parseHex(hex) {
+    hex = hex.replace("#", "").trim();
+    if (hex.length === 3) {
+        hex = hex.split("").map(c => c + c).join("");
+    }
+    const num = parseInt(hex, 16);
+    return {
+        r: ((num >> 16) & 255) / 255,
+        g: ((num >> 8) & 255) / 255,
+        b: (num & 255) / 255,
+    };
+}
+function parseRgb(input) {
+    const values = input.match(/[\d.]+/g);
+    if (!values || values.length < 3) {
+        throw new Error("Invalid RGB format");
+    }
+    const [r, g, b] = values.map(Number);
+    return {
+        r: r / 255,
+        g: g / 255,
+        b: b / 255,
+    };
+}
+function parseHsl(input) {
+    const values = input.match(/[\d.]+/g);
+    if (!values || values.length < 3) {
+        throw new Error("Invalid HSL format");
+    }
+    let [h, s, l] = values.map(Number);
+    h /= 360;
+    s /= 100;
+    l /= 100;
+    const hue2rgb = (p, q, t) => {
+        if (t < 0)
+            t += 1;
+        if (t > 1)
+            t -= 1;
+        if (t < 1 / 6)
+            return p + (q - p) * 6 * t;
+        if (t < 1 / 2)
+            return q;
+        if (t < 2 / 3)
+            return p + (q - p) * (2 / 3 - t) * 6;
+        return p;
+    };
+    const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+    const p = 2 * l - q;
+    return {
+        r: hue2rgb(p, q, h + 1 / 3),
+        g: hue2rgb(p, q, h),
+        b: hue2rgb(p, q, h - 1 / 3),
+    };
+}
+
+exports.createPalette = createPalette;
+exports.toOKLCH = toOKLCH;
+//# sourceMappingURL=oklch.cjs.map

package/theme/oklch.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"oklch.cjs","sources":["../../src/theme/oklch.ts"],"sourcesContent":["type OKLCH = {\n   l: number;\n   c: number;\n   h: number;\n};\n\ntype ColorRole = {\n   main: string;\n   light: string;\n   dark: string;\n   contrast: string;\n   muted: string;\n   divider: string;\n   disabled: string;\n   ghost: string;\n};\n\n/* ---------------- PARSERS ---------------- */\n\nexport function toOKLCH(input: string): OKLCH {\n   if (input.startsWith(\"oklch\")) {\n      const values = input.match(/[\\d.]+/g);\n      if (!values || values.length < 3) {\n         throw new Error(\"Invalid OKLCH format\");\n      }\n\n      let [l, c, h] = values.map(Number);\n\n      return {\n         l: l > 1 ? l / 100 : l,\n         c,\n         h,\n      };\n   }\n\n   const rgb = parseToRgb(input);\n   const lab = rgbToOklab(rgb.r, rgb.g, rgb.b);\n   return oklabToOklch(lab.L, lab.a, lab.b);\n}\n\nfunction parseToRgb(input: string) {\n   input = input.trim().toLowerCase();\n\n   if (input.startsWith(\"#\")) return parseHex(input);\n   if (input.startsWith(\"rgb\")) return parseRgb(input);\n   if (input.startsWith(\"hsl\")) return parseHsl(input);\n\n   throw new Error(\"Unsupported format\");\n}\n\n/* ---------------- CORE MATH ---------------- */\n\nfunction srgbToLinear(c: number) {\n   return c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);\n}\n\nfunction rgbToOklab(r: number, g: number, b: number) {\n   r = srgbToLinear(r);\n   g = srgbToLinear(g);\n   b = srgbToLinear(b);\n\n   const l = 0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b;\n   const m = 0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b;\n   const s = 0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b;\n\n   const l_ = Math.cbrt(l);\n   const m_ = Math.cbrt(m);\n   const s_ = Math.cbrt(s);\n\n   return {\n      L: 0.2104542553 * l_ + 0.793617785 * m_ - 0.0040720468 * s_,\n      a: 1.9779984951 * l_ - 2.428592205 * m_ + 0.4505937099 * s_,\n      b: 0.0259040371 * l_ + 0.7827717662 * m_ - 0.808675766 * s_,\n   };\n}\n\nfunction oklabToOklch(L: number, a: number, b: number): OKLCH {\n   const c = Math.sqrt(a * a + b * b);\n   let h = Math.atan2(b, a) * (180 / Math.PI);\n\n   if (h < 0) h += 360;\n\n   return { l: L, c, h };\n}\n\n/* ---------------- FORMAT ---------------- */\n\nfunction formatOklch(color: OKLCH, alpha = 1): string {\n   const l = (color.l * 100).toFixed(2) + \"%\";\n   const c = color.c.toFixed(4);\n   const h = color.h.toFixed(2);\n\n   return alpha === 1\n      ? `oklch(${l} ${c} ${h})`\n      : `oklch(${l} ${c} ${h} / ${alpha})`;\n}\n\n/* ---------------- UTILS ---------------- */\n\nfunction clamp(v: number, min = 0, max = 1) {\n   return Math.min(max, Math.max(min, v));\n}\n\n\nexport function createPalette(input: string): ColorRole {\n   const base = toOKLCH(input);\n   const isTrueBlack = base.l < 0.2 && base.c < 0.02;\n   const isTrueWhite = base.l > 0.92 && base.c < 0.015;\n   const isDark = base.l < 0.75;\n\n   if (isTrueBlack) {\n      return {\n         main: formatOklch(base),\n\n         light: formatOklch({\n            l: clamp(base.l + (1 - base.l) * 0.10),\n            c: base.c * 0.85,\n            h: base.h,\n         }),\n\n         dark: formatOklch({\n            l: 0.04,\n            c: 0.005,\n            h: base.h,\n         }),\n\n         muted: formatOklch({\n            l: 0.72,\n            c: 0.01,\n            h: base.h,\n         }),\n\n         disabled: formatOklch({\n            l: 0.30,\n            c: 0,\n            h: base.h,\n         }),\n\n         contrast: formatOklch({\n            l: 0.98,\n            c: 0.01,\n            h: base.h,\n         }),\n\n         divider: formatOklch({\n            l: 0.30,\n            c: 0.002,\n            h: 0,\n         }),\n\n         ghost: formatOklch({\n            l: clamp(base.l + (1 - base.l) * 0.10),\n            c: base.c * 0.85,\n            h: base.h,\n         }, 0.6),\n\n      };\n   }\n\n   if (isTrueWhite) {\n      return {\n         main: formatOklch(base),\n\n         light: formatOklch({\n            l: 0.95,\n            c: 0,\n            h: base.h\n         }),\n\n         dark: formatOklch({\n            l: 0.86,\n            c: 0,\n            h: base.h,\n         }),\n\n         muted: formatOklch({\n            l: 0.55,\n            c: 0,\n            h: base.h,\n         }),\n\n         disabled: formatOklch({\n            l: 0.75,\n            c: 0,\n            h: base.h,\n         }),\n\n         contrast: formatOklch({\n            l: 0.15,\n            c: 0,\n            h: base.h,\n         }),\n\n         divider: formatOklch({\n            l: 0.85,\n            c: 0,\n            h: 0,\n         }),\n\n         ghost: formatOklch({\n            l: 0.85,\n            c: 0,\n            h: base.h\n         }, 0.2),\n      };\n   }\n\n\n   return {\n      main: formatOklch(base),\n\n      light: formatOklch({\n         l: clamp(base.l + 0.10),\n         c: clamp(base.c * 1.2),\n         h: base.h\n      }),\n\n      dark: formatOklch({\n         l: clamp(base.l - 0.06),\n         c: clamp(base.c * 1),\n         h: base.h\n      }),\n\n      muted: formatOklch({\n         l: clamp(base.l + (isDark ? 0.25 : -0.25)),\n         c: clamp(base.c * 0.22),\n         h: base.h\n      }),\n\n      disabled: formatOklch({\n         l: clamp(base.l + (isDark ? 0.01 : -0.01)),\n         c: clamp(base.c * 0.15),\n         h: base.h\n      }),\n\n      contrast: formatOklch({\n         l: isDark ? 0.97 : 0.11,\n         c: 0.01,\n         h: base.h\n      }),\n\n      divider: formatOklch({\n         l: clamp(base.l - 0.20),\n         c: clamp(base.c * 1.08),\n         h: base.h\n      }, .3),\n\n      ghost: formatOklch(base, isDark ? 0.1 : .22),\n   };\n}\n\n/* ---------------- PARSERS ---------------- */\n\nfunction parseHex(hex: string) {\n   hex = hex.replace(\"#\", \"\").trim();\n\n   if (hex.length === 3) {\n      hex = hex.split(\"\").map(c => c + c).join(\"\");\n   }\n\n   const num = parseInt(hex, 16);\n\n   return {\n      r: ((num >> 16) & 255) / 255,\n      g: ((num >> 8) & 255) / 255,\n      b: (num & 255) / 255,\n   };\n}\n\nfunction parseRgb(input: string) {\n   const values = input.match(/[\\d.]+/g);\n   if (!values || values.length < 3) {\n      throw new Error(\"Invalid RGB format\");\n   }\n\n   const [r, g, b] = values.map(Number);\n\n   return {\n      r: r / 255,\n      g: g / 255,\n      b: b / 255,\n   };\n}\n\nfunction parseHsl(input: string) {\n   const values = input.match(/[\\d.]+/g);\n   if (!values || values.length < 3) {\n      throw new Error(\"Invalid HSL format\");\n   }\n\n   let [h, s, l] = values.map(Number);\n\n   h /= 360;\n   s /= 100;\n   l /= 100;\n\n   const hue2rgb = (p: number, q: number, t: number) => {\n      if (t < 0) t += 1;\n      if (t > 1) t -= 1;\n      if (t < 1 / 6) return p + (q - p) * 6 * t;\n      if (t < 1 / 2) return q;\n      if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;\n      return p;\n   };\n\n   const q = l < 0.5 ? l * (1 + s) : l + s - l * s;\n   const p = 2 * l - q;\n\n   return {\n      r: hue2rgb(p, q, h + 1 / 3),\n      g: hue2rgb(p, q, h),\n      b: hue2rgb(p, q, h - 1 / 3),\n   };\n}"],"names":[],"mappings":"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"}