@xanui/core 1.2.43 → 1.2.45

package/theme/ThemeProvider.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"ThemeProvider.mjs","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, ThemeFactory } from \"./core\"\r\nimport ThemeCssVars from \"./ThemeCssVars\"\r\nimport { css } from \"../css\"\r\nimport { createDefaultThemes } from \"./ThemeDefaultOptions\"\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: string;\r\n   isRoot?: boolean;\r\n   noScrollbarCss?: boolean;\r\n}\r\n\r\ncreateDefaultThemes()\r\n\r\nconst ThemeProvider = <T extends TagComponentType = 'div'>({ children, theme, isRoot, noScrollbarCss, ...props }: ThemeProviderProps<T>) => {\r\n   let THEME = ThemeFactory.get(theme) as ThemeOptions\r\n   if (!THEME) {\r\n      console.error(`ThemeProvider: The theme '${theme}' is not defined. Please make sure to use a valid theme name.`)\r\n      THEME = ThemeFactory.get(\"light\") as ThemeOptions\r\n   }\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}-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,\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               minHeight: \"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,\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)} ${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,\r\n         cacheId\r\n      }) as any\r\n   }, [noScrollbarCss, theme])\r\n\r\n   return (\r\n      <ThemeContex.Provider value={theme}>\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}-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;AAEA;AAA2D;;;AAGrD;AACA;;AAEH;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;AAqBY;AACG;AACF;;AAShB;;"}

package/theme/core.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"core.mjs","sources":["../../src/theme/core.ts"],"sourcesContent":["import React from \"react\"\r\nimport { ObjectType, ThemeOptions } from \"./types\"\r\n\r\nexport const ThemeFactory = new Map<string, ThemeOptions>()\r\nexport const ThemeContex = React.createContext(\"light\")\r\nexport const getTheme = (theme: string) => ThemeFactory.get(theme)\r\nexport const useTheme = (): ThemeOptions => {\r\n   const theme = ThemeFactory.get(React.useContext(ThemeContex)) as any\r\n   if (!theme) {\r\n      console.error(\"Theme not found, returning light theme as fallback\")\r\n      return ThemeFactory.get(\"light\") as any\r\n   }\r\n   return theme\r\n}\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"],"names":["React"],"mappings":";;AAGO,MAAM,YAAY,GAAG,IAAI,GAAG;AAC5B,MAAM,WAAW,GAAGA,cAAK,CAAC,aAAa,CAAC,OAAO;AAC/C,MAAM,QAAQ,GAAG,CAAC,KAAa,KAAK,YAAY,CAAC,GAAG,CAAC,KAAK;AAC1D,MAAM,QAAQ,GAAG,MAAmB;AACxC,IAAA,MAAM,KAAK,GAAG,YAAY,CAAC,GAAG,CAACA,cAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAQ;IACpE,IAAI,CAAC,KAAK,EAAE;AACT,QAAA,OAAO,CAAC,KAAK,CAAC,oDAAoD,CAAC;AACnE,QAAA,OAAO,YAAY,CAAC,GAAG,CAAC,OAAO,CAAQ;IAC1C;AACA,IAAA,OAAO,KAAK;AACf;MAEa,WAAW,GAAG,CAAC,CAAa,EAAE,CAAa,KAAI;IACzD,CAAC,GAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAQ,CAAC,CAAE;IACZ,CAAC,GAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAQ,CAAC,CAAE;AACZ,IAAA,KAAK,MAAM,GAAG,IAAI,CAAC,EAAE;AAClB,QAAA,MAAM,CAAC,GAAI,CAAS,CAAC,GAAG,CAAC;QACzB,IAAI,OAAO,CAAC,KAAK,QAAQ,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAACA,cAAK,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE;AACzE,YAAA,CAAC,CAAC,GAAG,CAAC,GAAG,WAAW,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC;QACvC;aAAO;AACJ,YAAA,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC;QACb;IACH;AACA,IAAA,OAAO,CAAC;AACX;;;;"}

package/theme/createTheme.mjs

@@ -1,25 +0,0 @@
-import { ThemeFactory, mergeObject } from './core.mjs';
-import { breakpoints, alpha } from '../css/index.mjs';
-import { lightThemeOptions } from './ThemeDefaultOptions.mjs';
-
-const createTheme = (name, options) => {
-    if (ThemeFactory.has(name)) {
-        console.error(`createTheme: The theme '${name}' is already defined. Please choose a different name for the theme.`);
-        return ThemeFactory.get(name);
-    }
-    let theme = mergeObject(lightThemeOptions, 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)
-        };
-    }
-    ThemeFactory.set(name, theme);
-    return theme;
-};
-
-export { createTheme };
-//# sourceMappingURL=createTheme.mjs.map

package/theme/index.mjs

@@ -1,10 +0,0 @@
-export { getTheme, useTheme } from './core.mjs';
-import '../css/getValue.mjs';
-import 'oncss';
-export { default as ThemeProvider } from './ThemeProvider.mjs';
-import 'react-state-bucket';
-
-const themeRootClass = (theme) => `.xui-${theme}-theme-root`;
-
-export { themeRootClass };
-//# sourceMappingURL=index.mjs.map