@xanui/core 1.2.60 → 1.2.61

package/AppRoot/index.cjs

@@ -8,7 +8,6 @@ require('../theme/core.cjs');
 require('../css/getValue.cjs');
 require('oncss');
 var ThemeProvider = require('../theme/ThemeProvider.cjs');
-require('react-state-bucket');
 var BreakpointProvider = require('../breakpoint/BreakpointProvider.cjs');
 var Renderar = require('./Renderar.cjs');
 var index = require('../Document/index.cjs');
@@ -17,8 +16,7 @@ var useMergeRefs = require('../hooks/useMergeRefs.cjs');
 var CSSCacheProvider = require('../css/CSSCacheProvider.cjs');
 
 const AppRoot = React.forwardRef((_a, ref) => {
-    var { children, disableFlashing, noScrollbarCss, CSSCacheId, theme, disableRenderar, selectionColor, document: _document } = _a, props = tslib.__rest(_a, ["children", "disableFlashing", "noScrollbarCss", "CSSCacheId", "theme", "disableRenderar", "selectionColor", "document"]);
-    disableFlashing !== null && disableFlashing !== void 0 ? disableFlashing : (disableFlashing = false);
+    var { children, defaultBreakpoint, noScrollbarCss, CSSCacheId, theme, onThemeChange, disableRenderar, selectionColor, document: _document } = _a, props = tslib.__rest(_a, ["children", "defaultBreakpoint", "noScrollbarCss", "CSSCacheId", "theme", "onThemeChange", "disableRenderar", "selectionColor", "document"]);
     noScrollbarCss !== null && noScrollbarCss !== void 0 ? noScrollbarCss : (noScrollbarCss = false);
     selectionColor !== null && selectionColor !== void 0 ? selectionColor : (selectionColor = "brand");
     if (typeof window !== "undefined") {
@@ -28,20 +26,20 @@ const AppRoot = React.forwardRef((_a, ref) => {
     const docid = React.useId();
     const csscacheId = React.useId();
     CSSCacheId !== null && CSSCacheId !== void 0 ? CSSCacheId : (CSSCacheId = csscacheId);
-    const [visibility, setVisibility] = React.useState(!disableFlashing ? "hidden" : "");
+    const [visibility, setVisibility] = React.useState(!defaultBreakpoint ? "hidden" : "");
     const rootRef = React.useRef(null);
     const mergeRef = useMergeRefs(rootRef, ref);
     React.useLayoutEffect(() => {
-        !disableFlashing && setVisibility("");
+        !defaultBreakpoint && setVisibility("");
+    }, []);
+    React.useEffect(() => {
+        if (typeof _document === 'undefined')
+            return;
+        const styles = Array.from(_document.querySelectorAll('body style[data-oncss]'));
+        styles.forEach((style) => {
+            _document.head.appendChild(style);
+        });
     }, []);
-    // useEffect(() => {
-    //    // move oncss style tags to head
-    //    if (typeof _document === 'undefined') return;
-    //    const styles = Array.from(_document.querySelectorAll('body style[data-oncss]'));
-    //    styles.forEach((style) => {
-    //       _document.head.appendChild(style);
-    //    });
-    // }, [])
     let selection = {};
     if (selectionColor && selectionColor !== 'default') {
         selection = {
@@ -51,7 +49,10 @@ const AppRoot = React.forwardRef((_a, ref) => {
             }
         };
     }
-    return (jsxRuntime.jsx(index.DocumentProvider, { value: _document ? { document: _document, id: docid } : undefined, children: jsxRuntime.jsx(CSSCacheProvider.CSSCacheProvider, { cacheId: CSSCacheId, children: jsxRuntime.jsx(AppRootProvider.AppRootProvider, { element: () => rootRef.current, children: jsxRuntime.jsx(ThemeProvider, Object.assign({ theme: theme }, props, { ref: mergeRef, isRoot: true, sx: Object.assign(Object.assign(Object.assign({}, props.sx), (visibility === "hidden" ? { visibility: "hidden" } : {})), selection), children: jsxRuntime.jsxs(BreakpointProvider.BreakpointProvider, { children: [children, !disableRenderar && jsxRuntime.jsx(Renderar.RenderRenderar, {})] }) })) }) }) }));
+    return (jsxRuntime.jsx(index.DocumentProvider, { value: _document ? { document: _document, id: docid } : undefined, children: jsxRuntime.jsx(CSSCacheProvider.CSSCacheProvider, { cacheId: CSSCacheId, children: jsxRuntime.jsx(AppRootProvider.AppRootProvider, { element: () => rootRef.current, children: jsxRuntime.jsx(ThemeProvider, Object.assign({ theme: theme, onThemeChange: (t) => {
+                        onThemeChange && onThemeChange(t);
+                        document.cookie = `xuitm=${t};path=/`;
+                    } }, props, { ref: mergeRef, isRoot: true, sx: Object.assign(Object.assign(Object.assign({}, props.sx), (visibility === "hidden" ? { visibility: "hidden" } : {})), selection), children: jsxRuntime.jsxs(BreakpointProvider.BreakpointProvider, { defaultKey: defaultBreakpoint !== null && defaultBreakpoint !== void 0 ? defaultBreakpoint : "xl", children: [children, !disableRenderar && jsxRuntime.jsx(Renderar.RenderRenderar, {})] }) })) }) }) }));
 });
 
 module.exports = AppRoot;

package/AppRoot/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/AppRoot/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { useEffect, useId, useLayoutEffect, useRef } from 'react';\nimport { TagComponentType } from '../Tag/types';\nimport { ThemeProvider, ThemeProviderProps } from '../theme';\nimport { BreakpointProvider } from '../breakpoint';\nimport { RenderRenderar } from './Renderar';\nimport { DocumentProvider } from '../Document';\nimport { AppRootProvider } from './AppRootProvider';\nimport useMergeRefs from '../hooks/useMergeRefs';\nimport { CSSCacheProvider } from '../css/CSSCacheProvider';\n\nexport type AppRootProps<T extends TagComponentType = \"div\"> = ThemeProviderProps<T> & {\n   noScrollbarCss?: boolean;\n   document?: Document;\n   CSSCacheId?: string;\n   disableRenderar?: boolean;\n   disableFlashing?: boolean;\n   selectionColor?: \"default\" | \"brand\" | \"accent\" | \"success\" | \"info\" | \"warning\" | \"danger\";\n}\n\nconst AppRoot = React.forwardRef(<T extends TagComponentType = \"div\">({ children, disableFlashing, noScrollbarCss, CSSCacheId, theme, disableRenderar, selectionColor, document: _document, ...props }: AppRootProps<T>, ref: React.Ref<any>) => {\n   disableFlashing ??= false\n   noScrollbarCss ??= false\n   selectionColor ??= \"brand\"\n   if (typeof window !== \"undefined\") {\n      _document ??= document\n   }\n   disableRenderar ??= false\n   const docid = useId()\n   const csscacheId = useId()\n   CSSCacheId ??= csscacheId\n\n   const [visibility, setVisibility] = React.useState<string>(!disableFlashing ? \"hidden\" : \"\");\n   const rootRef = useRef(null)\n   const mergeRef = useMergeRefs(rootRef, ref)\n\n   useLayoutEffect(() => {\n      !disableFlashing && setVisibility(\"\");\n   }, [])\n\n   // useEffect(() => {\n   //    // move oncss style tags to head\n   //    if (typeof _document === 'undefined') return;\n   //    const styles = Array.from(_document.querySelectorAll('body style[data-oncss]'));\n   //    styles.forEach((style) => {\n   //       _document.head.appendChild(style);\n   //    });\n   // }, [])\n\n   let selection: any = {}\n   if (selectionColor && selectionColor !== 'default') {\n      selection = {\n         \"&::selection\": {\n            bgcolor: `${selectionColor}.primary`,\n            color: `${selectionColor}.text`\n         }\n      }\n   }\n\n   return (\n      <DocumentProvider value={_document ? { document: _document, id: docid } : undefined}>\n         <CSSCacheProvider cacheId={CSSCacheId}>\n            <AppRootProvider element={() => rootRef.current}>\n               <ThemeProvider\n                  theme={theme}\n                  {...props}\n                  ref={mergeRef}\n                  isRoot\n                  sx={{\n                     ...props.sx,\n                     ...(visibility === \"hidden\" ? { visibility: \"hidden\" } : {}),\n                     ...selection\n                  }}\n               >\n                  <BreakpointProvider>\n                     {children}\n                     {!disableRenderar && <RenderRenderar />}\n                  </BreakpointProvider>\n               </ThemeProvider>\n            </AppRootProvider>\n         </CSSCacheProvider>\n      </DocumentProvider>\n   )\n})\n\nexport default AppRoot\n\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAoBA;;;;;AAIG;;;;AAIA;AACA;;;AAIA;;;AAIG;;;;;;;;;;;AAaH;AACG;AACG;;;AAGC;;;;AA4BV;;"}
+{"version":3,"file":"index.cjs","sources":["../../src/AppRoot/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { useEffect, useId, useLayoutEffect, useRef } from 'react';\nimport { TagComponentType } from '../Tag/types';\nimport { ThemeProvider, ThemeProviderProps } from '../theme';\nimport { BreakpointProvider } from '../breakpoint';\nimport { RenderRenderar } from './Renderar';\nimport { DocumentProvider } from '../Document';\nimport { AppRootProvider } from './AppRootProvider';\nimport useMergeRefs from '../hooks/useMergeRefs';\nimport { CSSCacheProvider } from '../css/CSSCacheProvider';\nimport { BreakpointKeys } from '../css/types';\n\nexport type AppRootProps<T extends TagComponentType = \"div\"> = ThemeProviderProps<T> & {\n   noScrollbarCss?: boolean;\n   document?: Document;\n   CSSCacheId?: string;\n   disableRenderar?: boolean;\n   defaultBreakpoint?: BreakpointKeys\n   selectionColor?: \"default\" | \"brand\" | \"accent\" | \"success\" | \"info\" | \"warning\" | \"danger\";\n}\n\nconst AppRoot = React.forwardRef(<T extends TagComponentType = \"div\">({ children, defaultBreakpoint, noScrollbarCss, CSSCacheId, theme, onThemeChange, disableRenderar, selectionColor, document: _document, ...props }: AppRootProps<T>, ref: React.Ref<any>) => {\n\n   noScrollbarCss ??= false\n   selectionColor ??= \"brand\"\n   if (typeof window !== \"undefined\") {\n      _document ??= document\n   }\n   disableRenderar ??= false\n   const docid = useId()\n   const csscacheId = useId()\n   CSSCacheId ??= csscacheId\n\n   const [visibility, setVisibility] = React.useState<string>(!defaultBreakpoint ? \"hidden\" : \"\");\n   const rootRef = useRef(null)\n   const mergeRef = useMergeRefs(rootRef, ref)\n\n   useLayoutEffect(() => {\n      !defaultBreakpoint && setVisibility(\"\");\n   }, [])\n\n   useEffect(() => {\n      if (typeof _document === 'undefined') return;\n      const styles = Array.from(_document.querySelectorAll('body style[data-oncss]'));\n      styles.forEach((style) => {\n         _document.head.appendChild(style);\n      });\n   }, [])\n\n   let selection: any = {}\n   if (selectionColor && selectionColor !== 'default') {\n      selection = {\n         \"&::selection\": {\n            bgcolor: `${selectionColor}.primary`,\n            color: `${selectionColor}.text`\n         }\n      }\n   }\n\n   return (\n      <DocumentProvider value={_document ? { document: _document, id: docid } : undefined}>\n         <CSSCacheProvider cacheId={CSSCacheId}>\n            <AppRootProvider element={() => rootRef.current}>\n               <ThemeProvider\n                  theme={theme}\n                  onThemeChange={(t) => {\n                     onThemeChange && onThemeChange(t)\n                     document.cookie = `xuitm=${t};path=/`\n                  }}\n                  {...props}\n                  ref={mergeRef}\n                  isRoot\n                  sx={{\n                     ...props.sx,\n                     ...(visibility === \"hidden\" ? { visibility: \"hidden\" } : {}),\n                     ...selection\n                  }}\n               >\n                  <BreakpointProvider defaultKey={defaultBreakpoint ?? \"xl\"}>\n                     {children}\n                     {!disableRenderar && <RenderRenderar />}\n                  </BreakpointProvider>\n               </ThemeProvider>\n            </AppRootProvider>\n         </CSSCacheProvider>\n      </DocumentProvider>\n   )\n})\n\nexport default AppRoot\n\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAqBA;;;;AAIG;;;;AAIA;AACA;;;AAIA;;;AAIG;;;;;AAKA;AACA;AACG;AACH;;;AAIH;AACG;AACG;;;AAGC;;;;AAWW;AACA;AACH;AAmBlB;;"}

package/AppRoot/index.d.ts

@@ -1,5 +1,6 @@
 import React__default from 'react';
 import { TagComponentType } from '../Tag/types.js';
+import { BreakpointKeys } from '../css/types.js';
 import { ThemeProviderProps } from '../theme/ThemeProvider.js';
 
 type AppRootProps<T extends TagComponentType = "div"> = ThemeProviderProps<T> & {
@@ -7,7 +8,7 @@ type AppRootProps<T extends TagComponentType = "div"> = ThemeProviderProps<T> &
     document?: Document;
     CSSCacheId?: string;
     disableRenderar?: boolean;
-    disableFlashing?: boolean;
+    defaultBreakpoint?: BreakpointKeys;
     selectionColor?: "default" | "brand" | "accent" | "success" | "info" | "warning" | "danger";
 };
 declare const AppRoot: React__default.ForwardRefExoticComponent<Omit<AppRootProps<TagComponentType>, "ref"> & React__default.RefAttributes<any>>;

package/AppRoot/index.js

@@ -1,12 +1,11 @@
 "use client";
 import { __rest } from 'tslib';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import React__default, { useId, useRef, useLayoutEffect } from 'react';
+import React__default, { useId, useRef, useLayoutEffect, useEffect } from 'react';
 import '../theme/core.js';
 import '../css/getValue.js';
 import 'oncss';
 import ThemeProvider from '../theme/ThemeProvider.js';
-import 'react-state-bucket';
 import { BreakpointProvider } from '../breakpoint/BreakpointProvider.js';
 import { RenderRenderar } from './Renderar.js';
 import { DocumentProvider } from '../Document/index.js';
@@ -15,8 +14,7 @@ import useMergeRefs from '../hooks/useMergeRefs.js';
 import { CSSCacheProvider } from '../css/CSSCacheProvider.js';
 
 const AppRoot = React__default.forwardRef((_a, ref) => {
-    var { children, disableFlashing, noScrollbarCss, CSSCacheId, theme, disableRenderar, selectionColor, document: _document } = _a, props = __rest(_a, ["children", "disableFlashing", "noScrollbarCss", "CSSCacheId", "theme", "disableRenderar", "selectionColor", "document"]);
-    disableFlashing !== null && disableFlashing !== void 0 ? disableFlashing : (disableFlashing = false);
+    var { children, defaultBreakpoint, noScrollbarCss, CSSCacheId, theme, onThemeChange, disableRenderar, selectionColor, document: _document } = _a, props = __rest(_a, ["children", "defaultBreakpoint", "noScrollbarCss", "CSSCacheId", "theme", "onThemeChange", "disableRenderar", "selectionColor", "document"]);
     noScrollbarCss !== null && noScrollbarCss !== void 0 ? noScrollbarCss : (noScrollbarCss = false);
     selectionColor !== null && selectionColor !== void 0 ? selectionColor : (selectionColor = "brand");
     if (typeof window !== "undefined") {
@@ -26,20 +24,20 @@ const AppRoot = React__default.forwardRef((_a, ref) => {
     const docid = useId();
     const csscacheId = useId();
     CSSCacheId !== null && CSSCacheId !== void 0 ? CSSCacheId : (CSSCacheId = csscacheId);
-    const [visibility, setVisibility] = React__default.useState(!disableFlashing ? "hidden" : "");
+    const [visibility, setVisibility] = React__default.useState(!defaultBreakpoint ? "hidden" : "");
     const rootRef = useRef(null);
     const mergeRef = useMergeRefs(rootRef, ref);
     useLayoutEffect(() => {
-        !disableFlashing && setVisibility("");
+        !defaultBreakpoint && setVisibility("");
+    }, []);
+    useEffect(() => {
+        if (typeof _document === 'undefined')
+            return;
+        const styles = Array.from(_document.querySelectorAll('body style[data-oncss]'));
+        styles.forEach((style) => {
+            _document.head.appendChild(style);
+        });
     }, []);
-    // useEffect(() => {
-    //    // move oncss style tags to head
-    //    if (typeof _document === 'undefined') return;
-    //    const styles = Array.from(_document.querySelectorAll('body style[data-oncss]'));
-    //    styles.forEach((style) => {
-    //       _document.head.appendChild(style);
-    //    });
-    // }, [])
     let selection = {};
     if (selectionColor && selectionColor !== 'default') {
         selection = {
@@ -49,7 +47,10 @@ const AppRoot = React__default.forwardRef((_a, ref) => {
             }
         };
     }
-    return (jsx(DocumentProvider, { value: _document ? { document: _document, id: docid } : undefined, children: jsx(CSSCacheProvider, { cacheId: CSSCacheId, children: jsx(AppRootProvider, { element: () => rootRef.current, children: jsx(ThemeProvider, Object.assign({ theme: theme }, props, { ref: mergeRef, isRoot: true, sx: Object.assign(Object.assign(Object.assign({}, props.sx), (visibility === "hidden" ? { visibility: "hidden" } : {})), selection), children: jsxs(BreakpointProvider, { children: [children, !disableRenderar && jsx(RenderRenderar, {})] }) })) }) }) }));
+    return (jsx(DocumentProvider, { value: _document ? { document: _document, id: docid } : undefined, children: jsx(CSSCacheProvider, { cacheId: CSSCacheId, children: jsx(AppRootProvider, { element: () => rootRef.current, children: jsx(ThemeProvider, Object.assign({ theme: theme, onThemeChange: (t) => {
+                        onThemeChange && onThemeChange(t);
+                        document.cookie = `xuitm=${t};path=/`;
+                    } }, props, { ref: mergeRef, isRoot: true, sx: Object.assign(Object.assign(Object.assign({}, props.sx), (visibility === "hidden" ? { visibility: "hidden" } : {})), selection), children: jsxs(BreakpointProvider, { defaultKey: defaultBreakpoint !== null && defaultBreakpoint !== void 0 ? defaultBreakpoint : "xl", children: [children, !disableRenderar && jsx(RenderRenderar, {})] }) })) }) }) }));
 });
 
 export { AppRoot as default };

package/AppRoot/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/AppRoot/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { useEffect, useId, useLayoutEffect, useRef } from 'react';\nimport { TagComponentType } from '../Tag/types';\nimport { ThemeProvider, ThemeProviderProps } from '../theme';\nimport { BreakpointProvider } from '../breakpoint';\nimport { RenderRenderar } from './Renderar';\nimport { DocumentProvider } from '../Document';\nimport { AppRootProvider } from './AppRootProvider';\nimport useMergeRefs from '../hooks/useMergeRefs';\nimport { CSSCacheProvider } from '../css/CSSCacheProvider';\n\nexport type AppRootProps<T extends TagComponentType = \"div\"> = ThemeProviderProps<T> & {\n   noScrollbarCss?: boolean;\n   document?: Document;\n   CSSCacheId?: string;\n   disableRenderar?: boolean;\n   disableFlashing?: boolean;\n   selectionColor?: \"default\" | \"brand\" | \"accent\" | \"success\" | \"info\" | \"warning\" | \"danger\";\n}\n\nconst AppRoot = React.forwardRef(<T extends TagComponentType = \"div\">({ children, disableFlashing, noScrollbarCss, CSSCacheId, theme, disableRenderar, selectionColor, document: _document, ...props }: AppRootProps<T>, ref: React.Ref<any>) => {\n   disableFlashing ??= false\n   noScrollbarCss ??= false\n   selectionColor ??= \"brand\"\n   if (typeof window !== \"undefined\") {\n      _document ??= document\n   }\n   disableRenderar ??= false\n   const docid = useId()\n   const csscacheId = useId()\n   CSSCacheId ??= csscacheId\n\n   const [visibility, setVisibility] = React.useState<string>(!disableFlashing ? \"hidden\" : \"\");\n   const rootRef = useRef(null)\n   const mergeRef = useMergeRefs(rootRef, ref)\n\n   useLayoutEffect(() => {\n      !disableFlashing && setVisibility(\"\");\n   }, [])\n\n   // useEffect(() => {\n   //    // move oncss style tags to head\n   //    if (typeof _document === 'undefined') return;\n   //    const styles = Array.from(_document.querySelectorAll('body style[data-oncss]'));\n   //    styles.forEach((style) => {\n   //       _document.head.appendChild(style);\n   //    });\n   // }, [])\n\n   let selection: any = {}\n   if (selectionColor && selectionColor !== 'default') {\n      selection = {\n         \"&::selection\": {\n            bgcolor: `${selectionColor}.primary`,\n            color: `${selectionColor}.text`\n         }\n      }\n   }\n\n   return (\n      <DocumentProvider value={_document ? { document: _document, id: docid } : undefined}>\n         <CSSCacheProvider cacheId={CSSCacheId}>\n            <AppRootProvider element={() => rootRef.current}>\n               <ThemeProvider\n                  theme={theme}\n                  {...props}\n                  ref={mergeRef}\n                  isRoot\n                  sx={{\n                     ...props.sx,\n                     ...(visibility === \"hidden\" ? { visibility: \"hidden\" } : {}),\n                     ...selection\n                  }}\n               >\n                  <BreakpointProvider>\n                     {children}\n                     {!disableRenderar && <RenderRenderar />}\n                  </BreakpointProvider>\n               </ThemeProvider>\n            </AppRootProvider>\n         </CSSCacheProvider>\n      </DocumentProvider>\n   )\n})\n\nexport default AppRoot\n\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAoBA;;;;;AAIG;;;;AAIA;AACA;;;AAIA;;;AAIG;;;;;;;;;;;AAaH;AACG;AACG;;;AAGC;;;;AA4BV;;"}
+{"version":3,"file":"index.js","sources":["../../src/AppRoot/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { useEffect, useId, useLayoutEffect, useRef } from 'react';\nimport { TagComponentType } from '../Tag/types';\nimport { ThemeProvider, ThemeProviderProps } from '../theme';\nimport { BreakpointProvider } from '../breakpoint';\nimport { RenderRenderar } from './Renderar';\nimport { DocumentProvider } from '../Document';\nimport { AppRootProvider } from './AppRootProvider';\nimport useMergeRefs from '../hooks/useMergeRefs';\nimport { CSSCacheProvider } from '../css/CSSCacheProvider';\nimport { BreakpointKeys } from '../css/types';\n\nexport type AppRootProps<T extends TagComponentType = \"div\"> = ThemeProviderProps<T> & {\n   noScrollbarCss?: boolean;\n   document?: Document;\n   CSSCacheId?: string;\n   disableRenderar?: boolean;\n   defaultBreakpoint?: BreakpointKeys\n   selectionColor?: \"default\" | \"brand\" | \"accent\" | \"success\" | \"info\" | \"warning\" | \"danger\";\n}\n\nconst AppRoot = React.forwardRef(<T extends TagComponentType = \"div\">({ children, defaultBreakpoint, noScrollbarCss, CSSCacheId, theme, onThemeChange, disableRenderar, selectionColor, document: _document, ...props }: AppRootProps<T>, ref: React.Ref<any>) => {\n\n   noScrollbarCss ??= false\n   selectionColor ??= \"brand\"\n   if (typeof window !== \"undefined\") {\n      _document ??= document\n   }\n   disableRenderar ??= false\n   const docid = useId()\n   const csscacheId = useId()\n   CSSCacheId ??= csscacheId\n\n   const [visibility, setVisibility] = React.useState<string>(!defaultBreakpoint ? \"hidden\" : \"\");\n   const rootRef = useRef(null)\n   const mergeRef = useMergeRefs(rootRef, ref)\n\n   useLayoutEffect(() => {\n      !defaultBreakpoint && setVisibility(\"\");\n   }, [])\n\n   useEffect(() => {\n      if (typeof _document === 'undefined') return;\n      const styles = Array.from(_document.querySelectorAll('body style[data-oncss]'));\n      styles.forEach((style) => {\n         _document.head.appendChild(style);\n      });\n   }, [])\n\n   let selection: any = {}\n   if (selectionColor && selectionColor !== 'default') {\n      selection = {\n         \"&::selection\": {\n            bgcolor: `${selectionColor}.primary`,\n            color: `${selectionColor}.text`\n         }\n      }\n   }\n\n   return (\n      <DocumentProvider value={_document ? { document: _document, id: docid } : undefined}>\n         <CSSCacheProvider cacheId={CSSCacheId}>\n            <AppRootProvider element={() => rootRef.current}>\n               <ThemeProvider\n                  theme={theme}\n                  onThemeChange={(t) => {\n                     onThemeChange && onThemeChange(t)\n                     document.cookie = `xuitm=${t};path=/`\n                  }}\n                  {...props}\n                  ref={mergeRef}\n                  isRoot\n                  sx={{\n                     ...props.sx,\n                     ...(visibility === \"hidden\" ? { visibility: \"hidden\" } : {}),\n                     ...selection\n                  }}\n               >\n                  <BreakpointProvider defaultKey={defaultBreakpoint ?? \"xl\"}>\n                     {children}\n                     {!disableRenderar && <RenderRenderar />}\n                  </BreakpointProvider>\n               </ThemeProvider>\n            </AppRootProvider>\n         </CSSCacheProvider>\n      </DocumentProvider>\n   )\n})\n\nexport default AppRoot\n\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAqBA;;;;AAIG;;;;AAIA;AACA;;;AAIA;;;AAIG;;;;;AAKA;AACA;AACG;AACH;;;AAIH;AACG;AACG;;;AAGC;;;;AAWW;AACA;AACH;AAmBlB;;"}

package/Iframe/index.cjs

@@ -8,7 +8,6 @@ var core = require('../theme/core.cjs');
 require('../css/getValue.cjs');
 require('oncss');
 require('../theme/ThemeProvider.cjs');
-require('react-state-bucket');
 var index$1 = require('../Tag/index.cjs');
 var reactDom = require('react-dom');
 var index$2 = require('../AppRoot/index.cjs');

package/Iframe/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/Iframe/index.tsx"],"sourcesContent":["'use client'\nimport React, { createContext, useEffect, useRef, useState } from \"react\";\nimport { useTheme } from \"../theme\";\nimport Tag from \"../Tag\";\nimport { createPortal } from \"react-dom\";\nimport AppRoot from \"../AppRoot\";\nimport { TagPropsRoot } from \"../Tag/types\";\nimport useMergeRefs from \"../hooks/useMergeRefs\";\n\nconst IframeContext = createContext<{ document: Document | null; window: Window | null; }>({\n   document: null,\n   window: null,\n});\n\n\nexport type IframeProps = Omit<TagPropsRoot<\"iframe\">, \"component\"> & {\n   theme?: string;\n   CSSCacheId?: string;\n}\n\nconst Iframe = ({ children, sxr, theme, CSSCacheId, ...props }: IframeProps, ref: React.Ref<HTMLIFrameElement>) => {\n   const [doc, setDoc] = useState<Document | null>(null);\n   const iframeRef = useRef<HTMLIFrameElement>(null);\n   const _ref = useMergeRefs(iframeRef, ref)\n   const parentTheme = useTheme()\n   theme ??= parentTheme.name\n\n   useEffect(() => {\n      if (!iframeRef.current) return;\n      const iframe = iframeRef.current;\n      const onLoad = () => setDoc(iframe.contentDocument);\n      iframe.addEventListener(\"load\", onLoad);\n      return () => iframe.removeEventListener(\"load\", onLoad);\n   }, []);\n\n   return (\n      <>\n         <Tag\n            {...props}\n            component={\"iframe\"}\n            sxr={{\n               border: 'none',\n               width: \"100%\",\n               height: \"100%\",\n               p: 0,\n               m: 0,\n               ...sxr\n            }}\n            ref={_ref}\n            srcDoc={\"<!DOCTYPE html><html><head></head><body></body></html>\"}\n         />\n         {doc &&\n            createPortal(\n               <IframeContext.Provider\n                  value={{\n                     document: doc,\n                     window: doc.defaultView,\n                  }}\n               >\n                  <AppRoot disableRenderar theme={theme} document={doc as Document} CSSCacheId={CSSCacheId}>\n                     {children}\n                  </AppRoot>\n               </IframeContext.Provider>,\n               doc.body\n            )}\n      </>\n   );\n}\n\nexport default React.forwardRef(Iframe)"],"names":[],"mappings":";;;;;;;;;;;;;;;;AASA;AACG;AACA;AACF;AAQD;AAAgB;;AAEb;;AAEA;;;;;AAKG;;AAEA;;;;AAqBM;AAGS;;;AAYrB;AAEA;;"}
+{"version":3,"file":"index.cjs","sources":["../../src/Iframe/index.tsx"],"sourcesContent":["'use client'\nimport React, { createContext, useEffect, useRef, useState } from \"react\";\nimport { useTheme } from \"../theme\";\nimport Tag from \"../Tag\";\nimport { createPortal } from \"react-dom\";\nimport AppRoot from \"../AppRoot\";\nimport { TagPropsRoot } from \"../Tag/types\";\nimport useMergeRefs from \"../hooks/useMergeRefs\";\n\nconst IframeContext = createContext<{ document: Document | null; window: Window | null; }>({\n   document: null,\n   window: null,\n});\n\n\nexport type IframeProps = Omit<TagPropsRoot<\"iframe\">, \"component\"> & {\n   theme?: string;\n   CSSCacheId?: string;\n}\n\nconst Iframe = ({ children, sxr, theme, CSSCacheId, ...props }: IframeProps, ref: React.Ref<HTMLIFrameElement>) => {\n   const [doc, setDoc] = useState<Document | null>(null);\n   const iframeRef = useRef<HTMLIFrameElement>(null);\n   const _ref = useMergeRefs(iframeRef, ref)\n   const parentTheme = useTheme()\n   theme ??= parentTheme.name\n\n   useEffect(() => {\n      if (!iframeRef.current) return;\n      const iframe = iframeRef.current;\n      const onLoad = () => setDoc(iframe.contentDocument);\n      iframe.addEventListener(\"load\", onLoad);\n      return () => iframe.removeEventListener(\"load\", onLoad);\n   }, []);\n\n   return (\n      <>\n         <Tag\n            {...props}\n            component={\"iframe\"}\n            sxr={{\n               border: 'none',\n               width: \"100%\",\n               height: \"100%\",\n               p: 0,\n               m: 0,\n               ...sxr\n            }}\n            ref={_ref}\n            srcDoc={\"<!DOCTYPE html><html><head></head><body></body></html>\"}\n         />\n         {doc &&\n            createPortal(\n               <IframeContext.Provider\n                  value={{\n                     document: doc,\n                     window: doc.defaultView,\n                  }}\n               >\n                  <AppRoot disableRenderar theme={theme} document={doc as Document} CSSCacheId={CSSCacheId}>\n                     {children}\n                  </AppRoot>\n               </IframeContext.Provider>,\n               doc.body\n            )}\n      </>\n   );\n}\n\nexport default React.forwardRef(Iframe)"],"names":[],"mappings":";;;;;;;;;;;;;;;AASA;AACG;AACA;AACF;AAQD;AAAgB;;AAEb;;AAEA;;;;;AAKG;;AAEA;;;;AAqBM;AAGS;;;AAYrB;AAEA;;"}

package/Iframe/index.js

@@ -6,7 +6,6 @@ import { useTheme } from '../theme/core.js';
 import '../css/getValue.js';
 import 'oncss';
 import '../theme/ThemeProvider.js';
-import 'react-state-bucket';
 import Tag from '../Tag/index.js';
 import { createPortal } from 'react-dom';
 import AppRoot from '../AppRoot/index.js';

package/Iframe/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Iframe/index.tsx"],"sourcesContent":["'use client'\nimport React, { createContext, useEffect, useRef, useState } from \"react\";\nimport { useTheme } from \"../theme\";\nimport Tag from \"../Tag\";\nimport { createPortal } from \"react-dom\";\nimport AppRoot from \"../AppRoot\";\nimport { TagPropsRoot } from \"../Tag/types\";\nimport useMergeRefs from \"../hooks/useMergeRefs\";\n\nconst IframeContext = createContext<{ document: Document | null; window: Window | null; }>({\n   document: null,\n   window: null,\n});\n\n\nexport type IframeProps = Omit<TagPropsRoot<\"iframe\">, \"component\"> & {\n   theme?: string;\n   CSSCacheId?: string;\n}\n\nconst Iframe = ({ children, sxr, theme, CSSCacheId, ...props }: IframeProps, ref: React.Ref<HTMLIFrameElement>) => {\n   const [doc, setDoc] = useState<Document | null>(null);\n   const iframeRef = useRef<HTMLIFrameElement>(null);\n   const _ref = useMergeRefs(iframeRef, ref)\n   const parentTheme = useTheme()\n   theme ??= parentTheme.name\n\n   useEffect(() => {\n      if (!iframeRef.current) return;\n      const iframe = iframeRef.current;\n      const onLoad = () => setDoc(iframe.contentDocument);\n      iframe.addEventListener(\"load\", onLoad);\n      return () => iframe.removeEventListener(\"load\", onLoad);\n   }, []);\n\n   return (\n      <>\n         <Tag\n            {...props}\n            component={\"iframe\"}\n            sxr={{\n               border: 'none',\n               width: \"100%\",\n               height: \"100%\",\n               p: 0,\n               m: 0,\n               ...sxr\n            }}\n            ref={_ref}\n            srcDoc={\"<!DOCTYPE html><html><head></head><body></body></html>\"}\n         />\n         {doc &&\n            createPortal(\n               <IframeContext.Provider\n                  value={{\n                     document: doc,\n                     window: doc.defaultView,\n                  }}\n               >\n                  <AppRoot disableRenderar theme={theme} document={doc as Document} CSSCacheId={CSSCacheId}>\n                     {children}\n                  </AppRoot>\n               </IframeContext.Provider>,\n               doc.body\n            )}\n      </>\n   );\n}\n\nexport default React.forwardRef(Iframe)"],"names":[],"mappings":";;;;;;;;;;;;;;AASA;AACG;AACA;AACF;AAQD;AAAgB;;AAEb;;AAEA;;;;;AAKG;;AAEA;;;;AAqBM;AAGS;;;AAYrB;AAEA;;"}
+{"version":3,"file":"index.js","sources":["../../src/Iframe/index.tsx"],"sourcesContent":["'use client'\nimport React, { createContext, useEffect, useRef, useState } from \"react\";\nimport { useTheme } from \"../theme\";\nimport Tag from \"../Tag\";\nimport { createPortal } from \"react-dom\";\nimport AppRoot from \"../AppRoot\";\nimport { TagPropsRoot } from \"../Tag/types\";\nimport useMergeRefs from \"../hooks/useMergeRefs\";\n\nconst IframeContext = createContext<{ document: Document | null; window: Window | null; }>({\n   document: null,\n   window: null,\n});\n\n\nexport type IframeProps = Omit<TagPropsRoot<\"iframe\">, \"component\"> & {\n   theme?: string;\n   CSSCacheId?: string;\n}\n\nconst Iframe = ({ children, sxr, theme, CSSCacheId, ...props }: IframeProps, ref: React.Ref<HTMLIFrameElement>) => {\n   const [doc, setDoc] = useState<Document | null>(null);\n   const iframeRef = useRef<HTMLIFrameElement>(null);\n   const _ref = useMergeRefs(iframeRef, ref)\n   const parentTheme = useTheme()\n   theme ??= parentTheme.name\n\n   useEffect(() => {\n      if (!iframeRef.current) return;\n      const iframe = iframeRef.current;\n      const onLoad = () => setDoc(iframe.contentDocument);\n      iframe.addEventListener(\"load\", onLoad);\n      return () => iframe.removeEventListener(\"load\", onLoad);\n   }, []);\n\n   return (\n      <>\n         <Tag\n            {...props}\n            component={\"iframe\"}\n            sxr={{\n               border: 'none',\n               width: \"100%\",\n               height: \"100%\",\n               p: 0,\n               m: 0,\n               ...sxr\n            }}\n            ref={_ref}\n            srcDoc={\"<!DOCTYPE html><html><head></head><body></body></html>\"}\n         />\n         {doc &&\n            createPortal(\n               <IframeContext.Provider\n                  value={{\n                     document: doc,\n                     window: doc.defaultView,\n                  }}\n               >\n                  <AppRoot disableRenderar theme={theme} document={doc as Document} CSSCacheId={CSSCacheId}>\n                     {children}\n                  </AppRoot>\n               </IframeContext.Provider>,\n               doc.body\n            )}\n      </>\n   );\n}\n\nexport default React.forwardRef(Iframe)"],"names":[],"mappings":";;;;;;;;;;;;;AASA;AACG;AACA;AACF;AAQD;AAAgB;;AAEb;;AAEA;;;;;AAKG;;AAEA;;;;AAqBM;AAGS;;;AAYrB;AAEA;;"}

package/breakpoint/BreakpointProvider.cjs

@@ -5,7 +5,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var index = require('../css/index.cjs');
 
-const BreakpointCtx = React.createContext("xl");
+const BreakpointCtx = React.createContext(null);
 const queries = {
     xs: `(max-width:${index.breakpoints.sm - 0.02}px)`,
     sm: `(min-width:${index.breakpoints.sm}px) and (max-width:${index.breakpoints.md - 0.02}px)`,
@@ -13,27 +13,29 @@ const queries = {
     lg: `(min-width:${index.breakpoints.lg}px) and (max-width:${index.breakpoints.xl - 0.02}px)`,
     xl: `(min-width:${index.breakpoints.xl}px)`
 };
-const getCurrent = () => {
+const getCurrent = (def) => {
     if (typeof window === "undefined")
-        return "xs";
+        return def;
     const entries = Object.entries(queries);
     for (const [key, query] of entries) {
         if (window.matchMedia(query).matches) {
             return key;
         }
     }
-    return "xs";
+    return def;
 };
-const BreakpointProvider = ({ children }) => {
-    const [current, setCurrent] = React.useState(() => getCurrent());
+const BreakpointProvider = ({ children, defaultKey }) => {
+    const [current, setCurrent] = React.useState(defaultKey);
     React.useEffect(() => {
-        if (typeof window === "undefined")
-            return;
+        const current = getCurrent(defaultKey);
+        setCurrent(current);
+        document.cookie = `xuibp=${current};path=/`;
         const mqls = Object.entries(queries).map(([key, query]) => {
             const mql = window.matchMedia(query);
             const handler = () => {
                 if (mql.matches) {
                     setCurrent(key);
+                    document.cookie = `xuibp=${key};path=/`;
                 }
             };
             mql.addEventListener("change", handler);

package/breakpoint/BreakpointProvider.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"BreakpointProvider.cjs","sources":["../../src/breakpoint/BreakpointProvider.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { ReactNode, useEffect, useState } from \"react\";\nimport { breakpoints } from \"../css\";\nimport { BreakpointKeys } from \"../css/types\";\n\nexport const BreakpointCtx = React.createContext<BreakpointKeys>(\"xl\");\n\nconst queries: Record<BreakpointKeys, string> = {\n    xs: `(max-width:${breakpoints.sm - 0.02}px)`,\n    sm: `(min-width:${breakpoints.sm}px) and (max-width:${breakpoints.md - 0.02}px)`,\n    md: `(min-width:${breakpoints.md}px) and (max-width:${breakpoints.lg - 0.02}px)`,\n    lg: `(min-width:${breakpoints.lg}px) and (max-width:${breakpoints.xl - 0.02}px)`,\n    xl: `(min-width:${breakpoints.xl}px)`\n};\n\nconst getCurrent = (): BreakpointKeys => {\n    if (typeof window === \"undefined\") return \"xs\";\n    const entries = Object.entries(queries) as [BreakpointKeys, string][];\n    for (const [key, query] of entries) {\n        if (window.matchMedia(query).matches) {\n            return key;\n        }\n    }\n    return \"xs\";\n};\n\nexport const BreakpointProvider = ({ children }: { children?: ReactNode }) => {\n    const [current, setCurrent] = useState<BreakpointKeys>(() => getCurrent());\n\n    useEffect(() => {\n        if (typeof window === \"undefined\") return;\n        const mqls = Object.entries(queries).map(([key, query]) => {\n            const mql = window.matchMedia(query);\n\n            const handler = () => {\n                if (mql.matches) {\n                    setCurrent(key as BreakpointKeys);\n                }\n            };\n\n            mql.addEventListener(\"change\", handler);\n\n            return () => mql.removeEventListener(\"change\", handler);\n        });\n\n        return () => {\n            mqls.forEach(fn => fn());\n        };\n    }, []);\n\n    return (\n        <BreakpointCtx.Provider value={current}>\n            {children}\n        </BreakpointCtx.Provider>\n    );\n};"],"names":[],"mappings":";;;;;;;AAMO;AAEP;AACI;;;;AAIA;;AAGJ;;AACuC;;;;AAI3B;;;AAGR;AACJ;;AAGI;;;;AAII;;;AAIQ;;;AAGJ;AAEA;;AAGJ;AAEA;;AAEA;;AAGJ;AAKJ;;;"}
+{"version":3,"file":"BreakpointProvider.cjs","sources":["../../src/breakpoint/BreakpointProvider.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { ReactNode, useEffect, useState } from \"react\";\nimport { breakpoints } from \"../css\";\nimport { BreakpointKeys } from \"../css/types\";\n\nexport const BreakpointCtx = React.createContext<BreakpointKeys | null>(null);\n\nconst queries: Record<BreakpointKeys, string> = {\n    xs: `(max-width:${breakpoints.sm - 0.02}px)`,\n    sm: `(min-width:${breakpoints.sm}px) and (max-width:${breakpoints.md - 0.02}px)`,\n    md: `(min-width:${breakpoints.md}px) and (max-width:${breakpoints.lg - 0.02}px)`,\n    lg: `(min-width:${breakpoints.lg}px) and (max-width:${breakpoints.xl - 0.02}px)`,\n    xl: `(min-width:${breakpoints.xl}px)`\n};\n\nconst getCurrent = (def: BreakpointKeys): BreakpointKeys => {\n    if (typeof window === \"undefined\") return def;\n    const entries = Object.entries(queries) as [BreakpointKeys, string][];\n    for (const [key, query] of entries) {\n        if (window.matchMedia(query).matches) {\n            return key;\n        }\n    }\n    return def;\n};\n\nexport const BreakpointProvider = ({ children, defaultKey }: { children?: ReactNode, defaultKey: BreakpointKeys }) => {\n    const [current, setCurrent] = useState<BreakpointKeys>(defaultKey);\n\n    useEffect(() => {\n        const current = getCurrent(defaultKey)\n        setCurrent(current)\n        document.cookie = `xuibp=${current};path=/`\n        const mqls = Object.entries(queries).map(([key, query]) => {\n            const mql = window.matchMedia(query);\n            const handler = () => {\n                if (mql.matches) {\n                    setCurrent(key as BreakpointKeys);\n                    document.cookie = `xuibp=${key};path=/`\n                }\n            };\n\n            mql.addEventListener(\"change\", handler);\n\n            return () => mql.removeEventListener(\"change\", handler);\n        });\n\n        return () => {\n            mqls.forEach(fn => fn());\n        };\n    }, []);\n\n    return (\n        <BreakpointCtx.Provider value={current}>\n            {children}\n        </BreakpointCtx.Provider>\n    );\n};"],"names":[],"mappings":";;;;;;;AAMO;AAEP;AACI;;;;AAIA;;AAGJ;;AACuC;;;;AAI3B;;;AAGR;AACJ;AAEO;;;AAIC;;AAEA;AACA;;;AAGQ;;AAEI;;AAER;AAEA;;AAGJ;AAEA;;AAEA;;AAGJ;AAKJ;;;"}

package/breakpoint/BreakpointProvider.js

@@ -3,7 +3,7 @@ import { jsx } from 'react/jsx-runtime';
 import React__default, { useState, useEffect } from 'react';
 import { breakpoints } from '../css/index.js';
 
-const BreakpointCtx = React__default.createContext("xl");
+const BreakpointCtx = React__default.createContext(null);
 const queries = {
     xs: `(max-width:${breakpoints.sm - 0.02}px)`,
     sm: `(min-width:${breakpoints.sm}px) and (max-width:${breakpoints.md - 0.02}px)`,
@@ -11,27 +11,29 @@ const queries = {
     lg: `(min-width:${breakpoints.lg}px) and (max-width:${breakpoints.xl - 0.02}px)`,
     xl: `(min-width:${breakpoints.xl}px)`
 };
-const getCurrent = () => {
+const getCurrent = (def) => {
     if (typeof window === "undefined")
-        return "xs";
+        return def;
     const entries = Object.entries(queries);
     for (const [key, query] of entries) {
         if (window.matchMedia(query).matches) {
             return key;
         }
     }
-    return "xs";
+    return def;
 };
-const BreakpointProvider = ({ children }) => {
-    const [current, setCurrent] = useState(() => getCurrent());
+const BreakpointProvider = ({ children, defaultKey }) => {
+    const [current, setCurrent] = useState(defaultKey);
     useEffect(() => {
-        if (typeof window === "undefined")
-            return;
+        const current = getCurrent(defaultKey);
+        setCurrent(current);
+        document.cookie = `xuibp=${current};path=/`;
         const mqls = Object.entries(queries).map(([key, query]) => {
             const mql = window.matchMedia(query);
             const handler = () => {
                 if (mql.matches) {
                     setCurrent(key);
+                    document.cookie = `xuibp=${key};path=/`;
                 }
             };
             mql.addEventListener("change", handler);

package/breakpoint/BreakpointProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"BreakpointProvider.js","sources":["../../src/breakpoint/BreakpointProvider.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { ReactNode, useEffect, useState } from \"react\";\nimport { breakpoints } from \"../css\";\nimport { BreakpointKeys } from \"../css/types\";\n\nexport const BreakpointCtx = React.createContext<BreakpointKeys>(\"xl\");\n\nconst queries: Record<BreakpointKeys, string> = {\n    xs: `(max-width:${breakpoints.sm - 0.02}px)`,\n    sm: `(min-width:${breakpoints.sm}px) and (max-width:${breakpoints.md - 0.02}px)`,\n    md: `(min-width:${breakpoints.md}px) and (max-width:${breakpoints.lg - 0.02}px)`,\n    lg: `(min-width:${breakpoints.lg}px) and (max-width:${breakpoints.xl - 0.02}px)`,\n    xl: `(min-width:${breakpoints.xl}px)`\n};\n\nconst getCurrent = (): BreakpointKeys => {\n    if (typeof window === \"undefined\") return \"xs\";\n    const entries = Object.entries(queries) as [BreakpointKeys, string][];\n    for (const [key, query] of entries) {\n        if (window.matchMedia(query).matches) {\n            return key;\n        }\n    }\n    return \"xs\";\n};\n\nexport const BreakpointProvider = ({ children }: { children?: ReactNode }) => {\n    const [current, setCurrent] = useState<BreakpointKeys>(() => getCurrent());\n\n    useEffect(() => {\n        if (typeof window === \"undefined\") return;\n        const mqls = Object.entries(queries).map(([key, query]) => {\n            const mql = window.matchMedia(query);\n\n            const handler = () => {\n                if (mql.matches) {\n                    setCurrent(key as BreakpointKeys);\n                }\n            };\n\n            mql.addEventListener(\"change\", handler);\n\n            return () => mql.removeEventListener(\"change\", handler);\n        });\n\n        return () => {\n            mqls.forEach(fn => fn());\n        };\n    }, []);\n\n    return (\n        <BreakpointCtx.Provider value={current}>\n            {children}\n        </BreakpointCtx.Provider>\n    );\n};"],"names":[],"mappings":";;;;;AAMO;AAEP;AACI;;;;AAIA;;AAGJ;;AACuC;;;;AAI3B;;;AAGR;AACJ;;AAGI;;;;AAII;;;AAIQ;;;AAGJ;AAEA;;AAGJ;AAEA;;AAEA;;AAGJ;AAKJ;;"}
+{"version":3,"file":"BreakpointProvider.js","sources":["../../src/breakpoint/BreakpointProvider.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { ReactNode, useEffect, useState } from \"react\";\nimport { breakpoints } from \"../css\";\nimport { BreakpointKeys } from \"../css/types\";\n\nexport const BreakpointCtx = React.createContext<BreakpointKeys | null>(null);\n\nconst queries: Record<BreakpointKeys, string> = {\n    xs: `(max-width:${breakpoints.sm - 0.02}px)`,\n    sm: `(min-width:${breakpoints.sm}px) and (max-width:${breakpoints.md - 0.02}px)`,\n    md: `(min-width:${breakpoints.md}px) and (max-width:${breakpoints.lg - 0.02}px)`,\n    lg: `(min-width:${breakpoints.lg}px) and (max-width:${breakpoints.xl - 0.02}px)`,\n    xl: `(min-width:${breakpoints.xl}px)`\n};\n\nconst getCurrent = (def: BreakpointKeys): BreakpointKeys => {\n    if (typeof window === \"undefined\") return def;\n    const entries = Object.entries(queries) as [BreakpointKeys, string][];\n    for (const [key, query] of entries) {\n        if (window.matchMedia(query).matches) {\n            return key;\n        }\n    }\n    return def;\n};\n\nexport const BreakpointProvider = ({ children, defaultKey }: { children?: ReactNode, defaultKey: BreakpointKeys }) => {\n    const [current, setCurrent] = useState<BreakpointKeys>(defaultKey);\n\n    useEffect(() => {\n        const current = getCurrent(defaultKey)\n        setCurrent(current)\n        document.cookie = `xuibp=${current};path=/`\n        const mqls = Object.entries(queries).map(([key, query]) => {\n            const mql = window.matchMedia(query);\n            const handler = () => {\n                if (mql.matches) {\n                    setCurrent(key as BreakpointKeys);\n                    document.cookie = `xuibp=${key};path=/`\n                }\n            };\n\n            mql.addEventListener(\"change\", handler);\n\n            return () => mql.removeEventListener(\"change\", handler);\n        });\n\n        return () => {\n            mqls.forEach(fn => fn());\n        };\n    }, []);\n\n    return (\n        <BreakpointCtx.Provider value={current}>\n            {children}\n        </BreakpointCtx.Provider>\n    );\n};"],"names":[],"mappings":";;;;;AAMO;AAEP;AACI;;;;AAIA;;AAGJ;;AACuC;;;;AAI3B;;;AAGR;AACJ;AAEO;;;AAIC;;AAEA;AACA;;;AAGQ;;AAEI;;AAER;AAEA;;AAGJ;AAEA;;AAEA;;AAGJ;AAKJ;;"}

package/breakpoint/useBreakpoint.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useBreakpoint.cjs","sources":["../../src/breakpoint/useBreakpoint.ts"],"sourcesContent":["import { useContext } from \"react\";\nimport { BreakpointCtx } from \"./BreakpointProvider\";\nimport { breakpoints } from \"../css\";\nimport { BreakpointKeys } from \"../css/types\";\n\nconst keys = Object.keys(breakpoints) as BreakpointKeys[];\n\nconst useBreakpoint = () => {\n   const value = useContext(BreakpointCtx);\n   const index = keys.indexOf(value);\n\n   const is = (key: BreakpointKeys) => value === key;\n   const isUp = (key: BreakpointKeys) => index >= keys.indexOf(key);\n   const isDown = (key: BreakpointKeys) => index < keys.indexOf(key);\n   const isBetween = (start: BreakpointKeys, end: BreakpointKeys) =>\n      index >= keys.indexOf(start) && index < keys.indexOf(end);\n   const isOrUp = (k: BreakpointKeys) => isUp(k) || is(k);\n   const isOrDown = (k: BreakpointKeys) => isDown(k) || is(k);\n\n   return {\n      value,\n      is,\n      isUp,\n      isDown,\n      isBetween,\n      isOrUp,\n      isOrDown\n   };\n};\n\nexport default useBreakpoint;"],"names":["breakpoints","useContext","BreakpointCtx"],"mappings":";;;;;;AAKA,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,CAACA,iBAAW,CAAqB;AAEzD,MAAM,aAAa,GAAG,MAAK;AACxB,IAAA,MAAM,KAAK,GAAGC,gBAAU,CAACC,gCAAa,CAAC;IACvC,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC;IAEjC,MAAM,EAAE,GAAG,CAAC,GAAmB,KAAK,KAAK,KAAK,GAAG;AACjD,IAAA,MAAM,IAAI,GAAG,CAAC,GAAmB,KAAK,KAAK,IAAI,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC;AAChE,IAAA,MAAM,MAAM,GAAG,CAAC,GAAmB,KAAK,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC;IACjE,MAAM,SAAS,GAAG,CAAC,KAAqB,EAAE,GAAmB,KAC1D,KAAK,IAAI,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC;AAC5D,IAAA,MAAM,MAAM,GAAG,CAAC,CAAiB,KAAK,IAAI,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC;AACtD,IAAA,MAAM,QAAQ,GAAG,CAAC,CAAiB,KAAK,MAAM,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC;IAE1D,OAAO;QACJ,KAAK;QACL,EAAE;QACF,IAAI;QACJ,MAAM;QACN,SAAS;QACT,MAAM;QACN;KACF;AACJ;;;;"}
+{"version":3,"file":"useBreakpoint.cjs","sources":["../../src/breakpoint/useBreakpoint.ts"],"sourcesContent":["import { useContext } from \"react\";\nimport { BreakpointCtx } from \"./BreakpointProvider\";\nimport { breakpoints } from \"../css\";\nimport { BreakpointKeys } from \"../css/types\";\n\nconst keys = Object.keys(breakpoints) as BreakpointKeys[];\n\nconst useBreakpoint = () => {\n   const value = useContext(BreakpointCtx) as BreakpointKeys\n   const index = keys.indexOf(value);\n\n   const is = (key: BreakpointKeys) => value === key;\n   const isUp = (key: BreakpointKeys) => index >= keys.indexOf(key);\n   const isDown = (key: BreakpointKeys) => index < keys.indexOf(key);\n   const isBetween = (start: BreakpointKeys, end: BreakpointKeys) =>\n      index >= keys.indexOf(start) && index < keys.indexOf(end);\n   const isOrUp = (k: BreakpointKeys) => isUp(k) || is(k);\n   const isOrDown = (k: BreakpointKeys) => isDown(k) || is(k);\n\n   return {\n      value,\n      is,\n      isUp,\n      isDown,\n      isBetween,\n      isOrUp,\n      isOrDown\n   };\n};\n\nexport default useBreakpoint;"],"names":["breakpoints","useContext","BreakpointCtx"],"mappings":";;;;;;AAKA,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,CAACA,iBAAW,CAAqB;AAEzD,MAAM,aAAa,GAAG,MAAK;AACxB,IAAA,MAAM,KAAK,GAAGC,gBAAU,CAACC,gCAAa,CAAmB;IACzD,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC;IAEjC,MAAM,EAAE,GAAG,CAAC,GAAmB,KAAK,KAAK,KAAK,GAAG;AACjD,IAAA,MAAM,IAAI,GAAG,CAAC,GAAmB,KAAK,KAAK,IAAI,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC;AAChE,IAAA,MAAM,MAAM,GAAG,CAAC,GAAmB,KAAK,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC;IACjE,MAAM,SAAS,GAAG,CAAC,KAAqB,EAAE,GAAmB,KAC1D,KAAK,IAAI,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC;AAC5D,IAAA,MAAM,MAAM,GAAG,CAAC,CAAiB,KAAK,IAAI,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC;AACtD,IAAA,MAAM,QAAQ,GAAG,CAAC,CAAiB,KAAK,MAAM,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC;IAE1D,OAAO;QACJ,KAAK;QACL,EAAE;QACF,IAAI;QACJ,MAAM;QACN,SAAS;QACT,MAAM;QACN;KACF;AACJ;;;;"}

package/breakpoint/useBreakpoint.js.map

@@ -1 +1 @@
-{"version":3,"file":"useBreakpoint.js","sources":["../../src/breakpoint/useBreakpoint.ts"],"sourcesContent":["import { useContext } from \"react\";\nimport { BreakpointCtx } from \"./BreakpointProvider\";\nimport { breakpoints } from \"../css\";\nimport { BreakpointKeys } from \"../css/types\";\n\nconst keys = Object.keys(breakpoints) as BreakpointKeys[];\n\nconst useBreakpoint = () => {\n   const value = useContext(BreakpointCtx);\n   const index = keys.indexOf(value);\n\n   const is = (key: BreakpointKeys) => value === key;\n   const isUp = (key: BreakpointKeys) => index >= keys.indexOf(key);\n   const isDown = (key: BreakpointKeys) => index < keys.indexOf(key);\n   const isBetween = (start: BreakpointKeys, end: BreakpointKeys) =>\n      index >= keys.indexOf(start) && index < keys.indexOf(end);\n   const isOrUp = (k: BreakpointKeys) => isUp(k) || is(k);\n   const isOrDown = (k: BreakpointKeys) => isDown(k) || is(k);\n\n   return {\n      value,\n      is,\n      isUp,\n      isDown,\n      isBetween,\n      isOrUp,\n      isOrDown\n   };\n};\n\nexport default useBreakpoint;"],"names":[],"mappings":";;;;AAKA,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC,WAAW,CAAqB;AAEzD,MAAM,aAAa,GAAG,MAAK;AACxB,IAAA,MAAM,KAAK,GAAG,UAAU,CAAC,aAAa,CAAC;IACvC,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC;IAEjC,MAAM,EAAE,GAAG,CAAC,GAAmB,KAAK,KAAK,KAAK,GAAG;AACjD,IAAA,MAAM,IAAI,GAAG,CAAC,GAAmB,KAAK,KAAK,IAAI,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC;AAChE,IAAA,MAAM,MAAM,GAAG,CAAC,GAAmB,KAAK,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC;IACjE,MAAM,SAAS,GAAG,CAAC,KAAqB,EAAE,GAAmB,KAC1D,KAAK,IAAI,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC;AAC5D,IAAA,MAAM,MAAM,GAAG,CAAC,CAAiB,KAAK,IAAI,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC;AACtD,IAAA,MAAM,QAAQ,GAAG,CAAC,CAAiB,KAAK,MAAM,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC;IAE1D,OAAO;QACJ,KAAK;QACL,EAAE;QACF,IAAI;QACJ,MAAM;QACN,SAAS;QACT,MAAM;QACN;KACF;AACJ;;;;"}
+{"version":3,"file":"useBreakpoint.js","sources":["../../src/breakpoint/useBreakpoint.ts"],"sourcesContent":["import { useContext } from \"react\";\nimport { BreakpointCtx } from \"./BreakpointProvider\";\nimport { breakpoints } from \"../css\";\nimport { BreakpointKeys } from \"../css/types\";\n\nconst keys = Object.keys(breakpoints) as BreakpointKeys[];\n\nconst useBreakpoint = () => {\n   const value = useContext(BreakpointCtx) as BreakpointKeys\n   const index = keys.indexOf(value);\n\n   const is = (key: BreakpointKeys) => value === key;\n   const isUp = (key: BreakpointKeys) => index >= keys.indexOf(key);\n   const isDown = (key: BreakpointKeys) => index < keys.indexOf(key);\n   const isBetween = (start: BreakpointKeys, end: BreakpointKeys) =>\n      index >= keys.indexOf(start) && index < keys.indexOf(end);\n   const isOrUp = (k: BreakpointKeys) => isUp(k) || is(k);\n   const isOrDown = (k: BreakpointKeys) => isDown(k) || is(k);\n\n   return {\n      value,\n      is,\n      isUp,\n      isDown,\n      isBetween,\n      isOrUp,\n      isOrDown\n   };\n};\n\nexport default useBreakpoint;"],"names":[],"mappings":";;;;AAKA,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC,WAAW,CAAqB;AAEzD,MAAM,aAAa,GAAG,MAAK;AACxB,IAAA,MAAM,KAAK,GAAG,UAAU,CAAC,aAAa,CAAmB;IACzD,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC;IAEjC,MAAM,EAAE,GAAG,CAAC,GAAmB,KAAK,KAAK,KAAK,GAAG;AACjD,IAAA,MAAM,IAAI,GAAG,CAAC,GAAmB,KAAK,KAAK,IAAI,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC;AAChE,IAAA,MAAM,MAAM,GAAG,CAAC,GAAmB,KAAK,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC;IACjE,MAAM,SAAS,GAAG,CAAC,KAAqB,EAAE,GAAmB,KAC1D,KAAK,IAAI,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC;AAC5D,IAAA,MAAM,MAAM,GAAG,CAAC,CAAiB,KAAK,IAAI,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC;AACtD,IAAA,MAAM,QAAQ,GAAG,CAAC,CAAiB,KAAK,MAAM,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC;IAE1D,OAAO;QACJ,KAAK;QACL,EAAE;QACF,IAAI;QACJ,MAAM;QACN,SAAS;QACT,MAAM;QACN;KACF;AACJ;;;;"}

package/hooks/useInterface.cjs

@@ -4,7 +4,6 @@ var core = require('../theme/core.cjs');
 require('../css/getValue.cjs');
 require('oncss');
 require('../theme/ThemeProvider.cjs');
-require('react-state-bucket');
 
 const useInterface = (name, userPorps, defaultProps) => {
     const theme = core.useTheme();

package/hooks/useInterface.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useInterface.cjs","sources":["../../src/hooks/useInterface.ts"],"sourcesContent":["import { useTheme } from \"../theme\"\n\nconst useInterface = <P extends object>(name: string, userPorps: P, defaultProps: P) => {\n    const theme = useTheme()\n    let _props = { ...defaultProps, ...userPorps } as P\n    if (name in theme.interfaces) {\n        return theme.interfaces[name](_props, theme)\n    }\n    return [_props, theme]\n}\n\nexport default useInterface"],"names":["useTheme"],"mappings":";;;;;;;;AAEA,MAAM,YAAY,GAAG,CAAmB,IAAY,EAAE,SAAY,EAAE,YAAe,KAAI;AACnF,IAAA,MAAM,KAAK,GAAGA,aAAQ,EAAE;AACxB,IAAA,IAAI,MAAM,GAAG,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,YAAY,CAAA,EAAK,SAAS,CAAO;AACnD,IAAA,IAAI,IAAI,IAAI,KAAK,CAAC,UAAU,EAAE;QAC1B,OAAO,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,KAAK,CAAC;IAChD;AACA,IAAA,OAAO,CAAC,MAAM,EAAE,KAAK,CAAC;AAC1B;;;;"}
+{"version":3,"file":"useInterface.cjs","sources":["../../src/hooks/useInterface.ts"],"sourcesContent":["import { useTheme } from \"../theme\"\n\nconst useInterface = <P extends object>(name: string, userPorps: P, defaultProps: P) => {\n    const theme = useTheme()\n    let _props = { ...defaultProps, ...userPorps } as P\n    if (name in theme.interfaces) {\n        return theme.interfaces[name](_props, theme)\n    }\n    return [_props, theme]\n}\n\nexport default useInterface"],"names":["useTheme"],"mappings":";;;;;;;AAEA,MAAM,YAAY,GAAG,CAAmB,IAAY,EAAE,SAAY,EAAE,YAAe,KAAI;AACnF,IAAA,MAAM,KAAK,GAAGA,aAAQ,EAAE;AACxB,IAAA,IAAI,MAAM,GAAG,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,YAAY,CAAA,EAAK,SAAS,CAAO;AACnD,IAAA,IAAI,IAAI,IAAI,KAAK,CAAC,UAAU,EAAE;QAC1B,OAAO,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,KAAK,CAAC;IAChD;AACA,IAAA,OAAO,CAAC,MAAM,EAAE,KAAK,CAAC;AAC1B;;;;"}

package/hooks/useInterface.d.ts

@@ -1,5 +1,5 @@
-import { ThemeOptions } from '../theme/types.js';
+import { UseThemeOptions } from '../theme/core.js';
 
-declare const useInterface: <P extends object>(name: string, userPorps: P, defaultProps: P) => P | (P | ThemeOptions)[];
+declare const useInterface: <P extends object>(name: string, userPorps: P, defaultProps: P) => P | (P | UseThemeOptions)[];
 
 export { useInterface as default };

package/hooks/useInterface.js

@@ -2,7 +2,6 @@ import { useTheme } from '../theme/core.js';
 import '../css/getValue.js';
 import 'oncss';
 import '../theme/ThemeProvider.js';
-import 'react-state-bucket';
 
 const useInterface = (name, userPorps, defaultProps) => {
     const theme = useTheme();

package/hooks/useInterface.js.map

@@ -1 +1 @@
-{"version":3,"file":"useInterface.js","sources":["../../src/hooks/useInterface.ts"],"sourcesContent":["import { useTheme } from \"../theme\"\n\nconst useInterface = <P extends object>(name: string, userPorps: P, defaultProps: P) => {\n    const theme = useTheme()\n    let _props = { ...defaultProps, ...userPorps } as P\n    if (name in theme.interfaces) {\n        return theme.interfaces[name](_props, theme)\n    }\n    return [_props, theme]\n}\n\nexport default useInterface"],"names":[],"mappings":";;;;;;AAEA,MAAM,YAAY,GAAG,CAAmB,IAAY,EAAE,SAAY,EAAE,YAAe,KAAI;AACnF,IAAA,MAAM,KAAK,GAAG,QAAQ,EAAE;AACxB,IAAA,IAAI,MAAM,GAAG,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,YAAY,CAAA,EAAK,SAAS,CAAO;AACnD,IAAA,IAAI,IAAI,IAAI,KAAK,CAAC,UAAU,EAAE;QAC1B,OAAO,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,KAAK,CAAC;IAChD;AACA,IAAA,OAAO,CAAC,MAAM,EAAE,KAAK,CAAC;AAC1B;;;;"}
+{"version":3,"file":"useInterface.js","sources":["../../src/hooks/useInterface.ts"],"sourcesContent":["import { useTheme } from \"../theme\"\n\nconst useInterface = <P extends object>(name: string, userPorps: P, defaultProps: P) => {\n    const theme = useTheme()\n    let _props = { ...defaultProps, ...userPorps } as P\n    if (name in theme.interfaces) {\n        return theme.interfaces[name](_props, theme)\n    }\n    return [_props, theme]\n}\n\nexport default useInterface"],"names":[],"mappings":";;;;;AAEA,MAAM,YAAY,GAAG,CAAmB,IAAY,EAAE,SAAY,EAAE,YAAe,KAAI;AACnF,IAAA,MAAM,KAAK,GAAG,QAAQ,EAAE;AACxB,IAAA,IAAI,MAAM,GAAG,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,YAAY,CAAA,EAAK,SAAS,CAAO;AACnD,IAAA,IAAI,IAAI,IAAI,KAAK,CAAC,UAAU,EAAE;QAC1B,OAAO,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,KAAK,CAAC;IAChD;AACA,IAAA,OAAO,CAAC,MAAM,EAAE,KAAK,CAAC;AAC1B;;;;"}

package/index.cjs

@@ -22,7 +22,6 @@ var index$8 = require('./theme/index.cjs');
 var getValue = require('./css/getValue.cjs');
 var getProps = require('./css/getProps.cjs');
 var ThemeProvider = require('./theme/ThemeProvider.cjs');
-var createThemeSwitcher = require('./theme/createThemeSwitcher.cjs');
 var createTheme = require('./theme/createTheme.cjs');
 var core = require('./theme/core.cjs');
 var ThemeDefaultOptions = require('./theme/ThemeDefaultOptions.cjs');
@@ -58,7 +57,6 @@ exports.themeRootClass = index$8.themeRootClass;
 exports.getValue = getValue;
 exports.getProps = getProps;
 exports.ThemeProvider = ThemeProvider;
-exports.createThemeSwitcher = createThemeSwitcher;
 exports.createTheme = createTheme.createTheme;
 exports.getTheme = core.getTheme;
 exports.useTheme = core.useTheme;

package/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/index.d.ts

@@ -23,7 +23,6 @@ export { ColorsRefTypes, ObjectType, ThemeColorOption, ThemeOptionInput, ThemeOp
 export { default as getValue } from './css/getValue.js';
 export { default as getProps } from './css/getProps.js';
 export { default as ThemeProvider, ThemeProviderProps } from './theme/ThemeProvider.js';
-export { ThemeSwitcherOption, default as createThemeSwitcher } from './theme/createThemeSwitcher.js';
 export { createTheme } from './theme/createTheme.js';
 export { getTheme, useTheme } from './theme/core.js';
 export { darkThemeOptions, lightThemeOptions } from './theme/ThemeDefaultOptions.js';

package/index.js

@@ -20,7 +20,6 @@ export { themeRootClass } from './theme/index.js';
 export { default as getValue } from './css/getValue.js';
 export { default as getProps } from './css/getProps.js';
 export { default as ThemeProvider } from './theme/ThemeProvider.js';
-export { default as createThemeSwitcher } from './theme/createThemeSwitcher.js';
 export { createTheme } from './theme/createTheme.js';
 export { getTheme, useTheme } from './theme/core.js';
 export { darkThemeOptions, lightThemeOptions } from './theme/ThemeDefaultOptions.js';

package/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xanui/core",
-  "version": "1.2.60",
+  "version": "1.2.61",
   "description": "Xanui Core Library",
   "private": false,
   "main": "./index.cjs",
@@ -9,8 +9,7 @@
   "sideEffects": false,
   "dependencies": {
     "oncss": "^1.2.11",
-    "pretty-class": "^1.0.8",
-    "react-state-bucket": "^1.2.17"
+    "pretty-class": "^1.0.8"
   },
   "keywords": []
 }

package/theme/ThemeProvider.cjs

@@ -35,7 +35,7 @@ var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 
 ThemeDefaultOptions.createDefaultThemes();
 const ThemeProvider = (_a) => {
-    var { children, theme, isRoot, noScrollbarCss } = _a, props = tslib.__rest(_a, ["children", "theme", "isRoot", "noScrollbarCss"]);
+    var { children, theme, onThemeChange, isRoot, noScrollbarCss } = _a, props = tslib.__rest(_a, ["children", "theme", "onThemeChange", "isRoot", "noScrollbarCss"]);
     let THEME = core.ThemeFactory.get(theme);
     if (!THEME) {
         console.error(`ThemeProvider: The theme '${theme}' is not defined. Please make sure to use a valid theme name.`);
@@ -143,7 +143,12 @@ const ThemeProvider = (_a) => {
             cacheId
         });
     }, [noScrollbarCss, theme]);
-    return (jsxRuntime.jsxs(core.ThemeContex.Provider, { value: theme, children: [isRoot && jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ServerStyleTag, { factory: resetCss }), !noScrollbarCss && jsxRuntime.jsx(ServerStyleTag, { factory: scrollbarCss })] }), jsxRuntime.jsx(ServerStyleTag, { factory: themeGlobalStyle }), jsxRuntime.jsx(index$3, 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: {
+    return (jsxRuntime.jsxs(core.ThemeContex.Provider, { value: {
+            theme,
+            onChange: (t) => {
+                onThemeChange && onThemeChange(t);
+            }
+        }, children: [isRoot && jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ServerStyleTag, { factory: resetCss }), !noScrollbarCss && jsxRuntime.jsx(ServerStyleTag, { factory: scrollbarCss })] }), jsxRuntime.jsx(ServerStyleTag, { factory: themeGlobalStyle }), jsxRuntime.jsx(index$3, 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: {
                     "& a": {
                         color: "brand.primary",
                     },

package/theme/ThemeProvider.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeProvider.cjs","sources":["../../src/theme/ThemeProvider.tsx"],"sourcesContent":["\"use client\";\nimport * as React from \"react\"\nimport { ThemeOptions } from \"./types\"\nimport Tag from \"../Tag\"\nimport { TagComponentType, TagProps } from \"../Tag/types\"\nimport { ThemeContex, ThemeFactory } from \"./core\"\nimport ThemeCssVars from \"./ThemeCssVars\"\nimport { css } from \"../css\"\nimport { createDefaultThemes } from \"./ThemeDefaultOptions\"\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: string;\n   isRoot?: boolean;\n   noScrollbarCss?: boolean;\n}\n\ncreateDefaultThemes()\n\nconst ThemeProvider = <T extends TagComponentType = 'div'>({ children, theme, isRoot, noScrollbarCss, ...props }: ThemeProviderProps<T>) => {\n   let THEME = ThemeFactory.get(theme) as ThemeOptions\n   if (!THEME) {\n      console.error(`ThemeProvider: The theme '${theme}' is not defined. Please make sure to use a valid theme name.`)\n      THEME = ThemeFactory.get(\"light\") as ThemeOptions\n   }\n   const doc = useDocument()\n   const cacheId = useCSSCacheId()\n\n   const themeGlobalStyle: any = React.useMemo(() => {\n      const root_cls = `.xui-${theme}-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)} ${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 value={theme}>\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=\"background.primary\"\n            color=\"text.primary\"\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: \"brand.primary\",\n               },\n            }}\n            baseClass={`${theme}-theme-root`}\n            direction={THEME.rtl ? \"rtl\" : \"ltr\"}\n         >\n            {children}\n         </Tag>\n      </ThemeContex.Provider>\n   )\n}\n\nexport default ThemeProvider"],"names":["createDefaultThemes"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBAA;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;;"}
+{"version":3,"file":"ThemeProvider.cjs","sources":["../../src/theme/ThemeProvider.tsx"],"sourcesContent":["\"use client\";\nimport * as React from \"react\"\nimport { ThemeOptions } from \"./types\"\nimport Tag from \"../Tag\"\nimport { TagComponentType, TagProps } from \"../Tag/types\"\nimport { ThemeContex, ThemeFactory } from \"./core\"\nimport ThemeCssVars from \"./ThemeCssVars\"\nimport { css } from \"../css\"\nimport { createDefaultThemes } from \"./ThemeDefaultOptions\"\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: string;\n   onThemeChange?: (theme: string) => void\n   isRoot?: boolean;\n   noScrollbarCss?: boolean;\n}\n\ncreateDefaultThemes()\n\nconst ThemeProvider = <T extends TagComponentType = 'div'>({ children, theme, onThemeChange, isRoot, noScrollbarCss, ...props }: ThemeProviderProps<T>) => {\n   let THEME = ThemeFactory.get(theme) as ThemeOptions\n   if (!THEME) {\n      console.error(`ThemeProvider: The theme '${theme}' is not defined. Please make sure to use a valid theme name.`)\n      THEME = ThemeFactory.get(\"light\") as ThemeOptions\n   }\n   const doc = useDocument()\n   const cacheId = useCSSCacheId()\n\n   const themeGlobalStyle: any = React.useMemo(() => {\n      const root_cls = `.xui-${theme}-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)} ${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 value={{\n         theme,\n         onChange: (t) => {\n            onThemeChange && onThemeChange(t)\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=\"background.primary\"\n            color=\"text.primary\"\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: \"brand.primary\",\n               },\n            }}\n            baseClass={`${theme}-theme-root`}\n            direction={THEME.rtl ? \"rtl\" : \"ltr\"}\n         >\n            {children}\n         </Tag>\n      </ThemeContex.Provider>\n   )\n}\n\nexport default ThemeProvider"],"names":["createDefaultThemes"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBAA;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;;AAGM;AACG;;AAEL;AAoBQ;AACG;AACF;;AAShB;;"}

package/theme/ThemeProvider.d.ts

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

package/theme/ThemeProvider.js

@@ -14,7 +14,7 @@ import { useCSSCacheId } from '../css/CSSCacheProvider.js';
 
 createDefaultThemes();
 const ThemeProvider = (_a) => {
-    var { children, theme, isRoot, noScrollbarCss } = _a, props = __rest(_a, ["children", "theme", "isRoot", "noScrollbarCss"]);
+    var { children, theme, onThemeChange, isRoot, noScrollbarCss } = _a, props = __rest(_a, ["children", "theme", "onThemeChange", "isRoot", "noScrollbarCss"]);
     let THEME = ThemeFactory.get(theme);
     if (!THEME) {
         console.error(`ThemeProvider: The theme '${theme}' is not defined. Please make sure to use a valid theme name.`);
@@ -122,7 +122,12 @@ const ThemeProvider = (_a) => {
             cacheId
         });
     }, [noScrollbarCss, theme]);
-    return (jsxs(ThemeContex.Provider, { value: theme, 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: {
+    return (jsxs(ThemeContex.Provider, { value: {
+            theme,
+            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: {
                     "& a": {
                         color: "brand.primary",
                     },

package/theme/ThemeProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeProvider.js","sources":["../../src/theme/ThemeProvider.tsx"],"sourcesContent":["\"use client\";\nimport * as React from \"react\"\nimport { ThemeOptions } from \"./types\"\nimport Tag from \"../Tag\"\nimport { TagComponentType, TagProps } from \"../Tag/types\"\nimport { ThemeContex, ThemeFactory } from \"./core\"\nimport ThemeCssVars from \"./ThemeCssVars\"\nimport { css } from \"../css\"\nimport { createDefaultThemes } from \"./ThemeDefaultOptions\"\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: string;\n   isRoot?: boolean;\n   noScrollbarCss?: boolean;\n}\n\ncreateDefaultThemes()\n\nconst ThemeProvider = <T extends TagComponentType = 'div'>({ children, theme, isRoot, noScrollbarCss, ...props }: ThemeProviderProps<T>) => {\n   let THEME = ThemeFactory.get(theme) as ThemeOptions\n   if (!THEME) {\n      console.error(`ThemeProvider: The theme '${theme}' is not defined. Please make sure to use a valid theme name.`)\n      THEME = ThemeFactory.get(\"light\") as ThemeOptions\n   }\n   const doc = useDocument()\n   const cacheId = useCSSCacheId()\n\n   const themeGlobalStyle: any = React.useMemo(() => {\n      const root_cls = `.xui-${theme}-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)} ${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 value={theme}>\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=\"background.primary\"\n            color=\"text.primary\"\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: \"brand.primary\",\n               },\n            }}\n            baseClass={`${theme}-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;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;;"}
+{"version":3,"file":"ThemeProvider.js","sources":["../../src/theme/ThemeProvider.tsx"],"sourcesContent":["\"use client\";\nimport * as React from \"react\"\nimport { ThemeOptions } from \"./types\"\nimport Tag from \"../Tag\"\nimport { TagComponentType, TagProps } from \"../Tag/types\"\nimport { ThemeContex, ThemeFactory } from \"./core\"\nimport ThemeCssVars from \"./ThemeCssVars\"\nimport { css } from \"../css\"\nimport { createDefaultThemes } from \"./ThemeDefaultOptions\"\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: string;\n   onThemeChange?: (theme: string) => void\n   isRoot?: boolean;\n   noScrollbarCss?: boolean;\n}\n\ncreateDefaultThemes()\n\nconst ThemeProvider = <T extends TagComponentType = 'div'>({ children, theme, onThemeChange, isRoot, noScrollbarCss, ...props }: ThemeProviderProps<T>) => {\n   let THEME = ThemeFactory.get(theme) as ThemeOptions\n   if (!THEME) {\n      console.error(`ThemeProvider: The theme '${theme}' is not defined. Please make sure to use a valid theme name.`)\n      THEME = ThemeFactory.get(\"light\") as ThemeOptions\n   }\n   const doc = useDocument()\n   const cacheId = useCSSCacheId()\n\n   const themeGlobalStyle: any = React.useMemo(() => {\n      const root_cls = `.xui-${theme}-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)} ${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 value={{\n         theme,\n         onChange: (t) => {\n            onThemeChange && onThemeChange(t)\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=\"background.primary\"\n            color=\"text.primary\"\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: \"brand.primary\",\n               },\n            }}\n            baseClass={`${theme}-theme-root`}\n            direction={THEME.rtl ? \"rtl\" : \"ltr\"}\n         >\n            {children}\n         </Tag>\n      </ThemeContex.Provider>\n   )\n}\n\nexport default ThemeProvider"],"names":[],"mappings":";;;;;;;;;;;;;;AAqBA;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;;AAGM;AACG;;AAEL;AAoBQ;AACG;AACF;;AAShB;;"}

package/theme/core.cjs

@@ -3,14 +3,21 @@
 var React = require('react');
 
 const ThemeFactory = new Map();
-const ThemeContex = React.createContext("light");
+const ThemeContex = React.createContext({
+    theme: "light",
+    onChange: () => { }
+});
 const getTheme = (theme) => ThemeFactory.get(theme);
 const useTheme = () => {
-    const theme = ThemeFactory.get(React.useContext(ThemeContex));
+    const ctx = React.useContext(ThemeContex);
+    const theme = ThemeFactory.get(ctx === null || ctx === void 0 ? void 0 : ctx.theme);
     if (!theme) {
         console.error("Theme not found, returning light theme as fallback");
         return ThemeFactory.get("light");
     }
+    theme.change = (theme) => {
+        ctx.onChange(theme);
+    };
     return theme;
 };
 const mergeObject = (a, b) => {

package/theme/core.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"core.cjs","sources":["../../src/theme/core.ts"],"sourcesContent":["import React from \"react\"\nimport { ObjectType, ThemeOptions } from \"./types\"\n\nexport const ThemeFactory = new Map<string, ThemeOptions>()\nexport const ThemeContex = React.createContext(\"light\")\nexport const getTheme = (theme: string) => ThemeFactory.get(theme)\nexport const useTheme = (): ThemeOptions => {\n   const theme = ThemeFactory.get(React.useContext(ThemeContex)) as any\n   if (!theme) {\n      console.error(\"Theme not found, returning light theme as fallback\")\n      return ThemeFactory.get(\"light\") as any\n   }\n   return theme\n}\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"],"names":[],"mappings":";;;;AAGO,MAAM,YAAY,GAAG,IAAI,GAAG;AAC5B,MAAM,WAAW,GAAG,KAAK,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,CAAC,KAAK,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,CAAC,KAAK,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;;;;;;;;"}
+{"version":3,"file":"core.cjs","sources":["../../src/theme/core.ts"],"sourcesContent":["import React, { useContext } from \"react\"\nimport { ObjectType, ThemeOptions } from \"./types\"\n\nexport type ThemeCntextProps = {\n   theme: string,\n   onChange: (theme: string) => void\n}\nexport const ThemeFactory = new Map<string, ThemeOptions>()\nexport const ThemeContex = React.createContext<ThemeCntextProps>({\n   theme: \"light\",\n   onChange: () => { }\n})\nexport const getTheme = (theme: string) => ThemeFactory.get(theme)\n\nexport type UseThemeOptions = ThemeOptions & { change: (theme: string) => void }\nexport const useTheme = (): UseThemeOptions => {\n   const ctx = useContext(ThemeContex)\n   const theme = ThemeFactory.get(ctx?.theme) as any\n   if (!theme) {\n      console.error(\"Theme not found, returning light theme as fallback\")\n      return ThemeFactory.get(\"light\") as any\n   }\n\n   theme.change = (theme: string) => {\n      ctx.onChange(theme)\n   }\n   return theme as UseThemeOptions\n}\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"],"names":["useContext"],"mappings":";;;;AAOO,MAAM,YAAY,GAAG,IAAI,GAAG;AAC5B,MAAM,WAAW,GAAG,KAAK,CAAC,aAAa,CAAmB;AAC9D,IAAA,KAAK,EAAE,OAAO;AACd,IAAA,QAAQ,EAAE,MAAK,EAAG;AACpB,CAAA;AACM,MAAM,QAAQ,GAAG,CAAC,KAAa,KAAK,YAAY,CAAC,GAAG,CAAC,KAAK;AAG1D,MAAM,QAAQ,GAAG,MAAsB;AAC3C,IAAA,MAAM,GAAG,GAAGA,gBAAU,CAAC,WAAW,CAAC;AACnC,IAAA,MAAM,KAAK,GAAG,YAAY,CAAC,GAAG,CAAC,GAAG,KAAA,IAAA,IAAH,GAAG,KAAA,MAAA,GAAA,MAAA,GAAH,GAAG,CAAE,KAAK,CAAQ;IACjD,IAAI,CAAC,KAAK,EAAE;AACT,QAAA,OAAO,CAAC,KAAK,CAAC,oDAAoD,CAAC;AACnE,QAAA,OAAO,YAAY,CAAC,GAAG,CAAC,OAAO,CAAQ;IAC1C;AAEA,IAAA,KAAK,CAAC,MAAM,GAAG,CAAC,KAAa,KAAI;AAC9B,QAAA,GAAG,CAAC,QAAQ,CAAC,KAAK,CAAC;AACtB,IAAA,CAAC;AACD,IAAA,OAAO,KAAwB;AAClC;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,CAAC,KAAK,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/core.d.ts

@@ -1,6 +1,10 @@
 import { ThemeOptions } from './types.js';
 
 declare const getTheme: (theme: string) => ThemeOptions | undefined;
-declare const useTheme: () => ThemeOptions;
+type UseThemeOptions = ThemeOptions & {
+    change: (theme: string) => void;
+};
+declare const useTheme: () => UseThemeOptions;
 
 export { getTheme, useTheme };
+export type { UseThemeOptions };

package/theme/core.js

@@ -1,14 +1,21 @@
-import React__default from 'react';
+import React__default, { useContext } from 'react';
 
 const ThemeFactory = new Map();
-const ThemeContex = React__default.createContext("light");
+const ThemeContex = React__default.createContext({
+    theme: "light",
+    onChange: () => { }
+});
 const getTheme = (theme) => ThemeFactory.get(theme);
 const useTheme = () => {
-    const theme = ThemeFactory.get(React__default.useContext(ThemeContex));
+    const ctx = useContext(ThemeContex);
+    const theme = ThemeFactory.get(ctx === null || ctx === void 0 ? void 0 : ctx.theme);
     if (!theme) {
         console.error("Theme not found, returning light theme as fallback");
         return ThemeFactory.get("light");
     }
+    theme.change = (theme) => {
+        ctx.onChange(theme);
+    };
     return theme;
 };
 const mergeObject = (a, b) => {

package/theme/core.js.map

@@ -1 +1 @@
-{"version":3,"file":"core.js","sources":["../../src/theme/core.ts"],"sourcesContent":["import React from \"react\"\nimport { ObjectType, ThemeOptions } from \"./types\"\n\nexport const ThemeFactory = new Map<string, ThemeOptions>()\nexport const ThemeContex = React.createContext(\"light\")\nexport const getTheme = (theme: string) => ThemeFactory.get(theme)\nexport const useTheme = (): ThemeOptions => {\n   const theme = ThemeFactory.get(React.useContext(ThemeContex)) as any\n   if (!theme) {\n      console.error(\"Theme not found, returning light theme as fallback\")\n      return ThemeFactory.get(\"light\") as any\n   }\n   return theme\n}\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"],"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;;;;"}
+{"version":3,"file":"core.js","sources":["../../src/theme/core.ts"],"sourcesContent":["import React, { useContext } from \"react\"\nimport { ObjectType, ThemeOptions } from \"./types\"\n\nexport type ThemeCntextProps = {\n   theme: string,\n   onChange: (theme: string) => void\n}\nexport const ThemeFactory = new Map<string, ThemeOptions>()\nexport const ThemeContex = React.createContext<ThemeCntextProps>({\n   theme: \"light\",\n   onChange: () => { }\n})\nexport const getTheme = (theme: string) => ThemeFactory.get(theme)\n\nexport type UseThemeOptions = ThemeOptions & { change: (theme: string) => void }\nexport const useTheme = (): UseThemeOptions => {\n   const ctx = useContext(ThemeContex)\n   const theme = ThemeFactory.get(ctx?.theme) as any\n   if (!theme) {\n      console.error(\"Theme not found, returning light theme as fallback\")\n      return ThemeFactory.get(\"light\") as any\n   }\n\n   theme.change = (theme: string) => {\n      ctx.onChange(theme)\n   }\n   return theme as UseThemeOptions\n}\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"],"names":["React"],"mappings":";;AAOO,MAAM,YAAY,GAAG,IAAI,GAAG;AAC5B,MAAM,WAAW,GAAGA,cAAK,CAAC,aAAa,CAAmB;AAC9D,IAAA,KAAK,EAAE,OAAO;AACd,IAAA,QAAQ,EAAE,MAAK,EAAG;AACpB,CAAA;AACM,MAAM,QAAQ,GAAG,CAAC,KAAa,KAAK,YAAY,CAAC,GAAG,CAAC,KAAK;AAG1D,MAAM,QAAQ,GAAG,MAAsB;AAC3C,IAAA,MAAM,GAAG,GAAG,UAAU,CAAC,WAAW,CAAC;AACnC,IAAA,MAAM,KAAK,GAAG,YAAY,CAAC,GAAG,CAAC,GAAG,KAAA,IAAA,IAAH,GAAG,KAAA,MAAA,GAAA,MAAA,GAAH,GAAG,CAAE,KAAK,CAAQ;IACjD,IAAI,CAAC,KAAK,EAAE;AACT,QAAA,OAAO,CAAC,KAAK,CAAC,oDAAoD,CAAC;AACnE,QAAA,OAAO,YAAY,CAAC,GAAG,CAAC,OAAO,CAAQ;IAC1C;AAEA,IAAA,KAAK,CAAC,MAAM,GAAG,CAAC,KAAa,KAAI;AAC9B,QAAA,GAAG,CAAC,QAAQ,CAAC,KAAK,CAAC;AACtB,IAAA,CAAC;AACD,IAAA,OAAO,KAAwB;AAClC;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/index.cjs

@@ -4,7 +4,6 @@ var core = require('./core.cjs');
 require('../css/getValue.cjs');
 require('oncss');
 var ThemeProvider = require('./ThemeProvider.cjs');
-require('react-state-bucket');
 
 const themeRootClass = (theme) => `.xui-${theme}-theme-root`;
 

package/theme/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/theme/index.tsx"],"sourcesContent":["import { createTheme } from \"./createTheme\"\nimport ThemeProvider from './ThemeProvider'\nimport createThemeSwitcher from './createThemeSwitcher'\nimport { getTheme, useTheme } from './core'\nimport { lightThemeOptions, darkThemeOptions } from './ThemeDefaultOptions'\nexport type { ThemeProviderProps } from './ThemeProvider'\nexport type { ThemeSwitcherOption } from './createThemeSwitcher'\n\nexport const themeRootClass = (theme: string) => `.xui-${theme}-theme-root`\n\nexport {\n    ThemeProvider,\n    createThemeSwitcher,\n    createTheme,\n    getTheme,\n    useTheme,\n    lightThemeOptions,\n    darkThemeOptions\n}\n\n"],"names":[],"mappings":";;;;;;;;AAQO,MAAM,cAAc,GAAG,CAAC,KAAa,KAAK,CAAA,KAAA,EAAQ,KAAK,CAAA,WAAA;;;;;;;"}
+{"version":3,"file":"index.cjs","sources":["../../src/theme/index.tsx"],"sourcesContent":["import { createTheme } from \"./createTheme\"\nimport ThemeProvider from './ThemeProvider'\nimport { getTheme, useTheme } 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    getTheme,\n    useTheme,\n    lightThemeOptions,\n    darkThemeOptions\n}\n\n"],"names":[],"mappings":";;;;;;;AAMO,MAAM,cAAc,GAAG,CAAC,KAAa,KAAK,CAAA,KAAA,EAAQ,KAAK,CAAA,WAAA;;;;;;;"}

package/theme/index.js

@@ -2,7 +2,6 @@ export { getTheme, useTheme } from './core.js';
 import '../css/getValue.js';
 import 'oncss';
 export { default as ThemeProvider } from './ThemeProvider.js';
-import 'react-state-bucket';
 
 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":["import { createTheme } from \"./createTheme\"\nimport ThemeProvider from './ThemeProvider'\nimport createThemeSwitcher from './createThemeSwitcher'\nimport { getTheme, useTheme } from './core'\nimport { lightThemeOptions, darkThemeOptions } from './ThemeDefaultOptions'\nexport type { ThemeProviderProps } from './ThemeProvider'\nexport type { ThemeSwitcherOption } from './createThemeSwitcher'\n\nexport const themeRootClass = (theme: string) => `.xui-${theme}-theme-root`\n\nexport {\n    ThemeProvider,\n    createThemeSwitcher,\n    createTheme,\n    getTheme,\n    useTheme,\n    lightThemeOptions,\n    darkThemeOptions\n}\n\n"],"names":[],"mappings":";;;;;;AAQO,MAAM,cAAc,GAAG,CAAC,KAAa,KAAK,CAAA,KAAA,EAAQ,KAAK,CAAA,WAAA;;;;"}
+{"version":3,"file":"index.js","sources":["../../src/theme/index.tsx"],"sourcesContent":["import { createTheme } from \"./createTheme\"\nimport ThemeProvider from './ThemeProvider'\nimport { getTheme, useTheme } 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    getTheme,\n    useTheme,\n    lightThemeOptions,\n    darkThemeOptions\n}\n\n"],"names":[],"mappings":";;;;;AAMO,MAAM,cAAc,GAAG,CAAC,KAAa,KAAK,CAAA,KAAA,EAAQ,KAAK,CAAA,WAAA;;;;"}

package/theme/createThemeSwitcher.cjs

@@ -1,26 +0,0 @@
-"use client";
-'use strict';
-
-var reactStateBucket = require('react-state-bucket');
-var core = require('./core.cjs');
-
-const createThemeSwitcher = (defaultTheme, option) => {
-    const useThemeBucket = reactStateBucket.createBucket({ name: reactStateBucket.xv.string().default(defaultTheme) }, {
-        store: (option === null || option === void 0 ? void 0 : option.store) || "memory",
-        onChange: (_key, value) => {
-            (option === null || option === void 0 ? void 0 : option.onChange) && (option === null || option === void 0 ? void 0 : option.onChange(value));
-        }
-    });
-    const useThemeSwitcher = () => {
-        const bucket = useThemeBucket();
-        return {
-            name: bucket.state.name,
-            theme: core.getTheme(bucket.state.name),
-            change: (theme) => bucket.set('name', theme)
-        };
-    };
-    return useThemeSwitcher;
-};
-
-module.exports = createThemeSwitcher;
-//# sourceMappingURL=createThemeSwitcher.cjs.map

package/theme/createThemeSwitcher.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"createThemeSwitcher.cjs","sources":["../../src/theme/createThemeSwitcher.ts"],"sourcesContent":["\"use client\";\nimport { createBucket, xv } from \"react-state-bucket\"\nimport { getTheme } from \"./core\"\nimport { BucketOptions } from \"react-state-bucket\"\n\nexport type ThemeSwitcherOption = {\n   store?: BucketOptions['store'],\n   onChange?: (theme: string) => void\n}\n\nconst createThemeSwitcher = (defaultTheme: string, option?: ThemeSwitcherOption) => {\n\n   const useThemeBucket = createBucket({ name: xv.string().default(defaultTheme) }, {\n      store: option?.store || \"memory\",\n      onChange: (_key, value) => {\n         option?.onChange && option?.onChange(value)\n      }\n   })\n\n   const useThemeSwitcher = () => {\n      const bucket = useThemeBucket()\n      return {\n         name: bucket.state.name,\n         theme: getTheme(bucket.state.name),\n         change: (theme: string) => bucket.set('name', theme)\n      }\n   }\n   return useThemeSwitcher\n}\n\nexport default createThemeSwitcher"],"names":[],"mappings":";;;;;;AAUA;AAEG;;AAEG;AACG;;AAEL;;AAGE;;AAEG;;AAEA;;AAEN;AACA;AACH;;"}

package/theme/createThemeSwitcher.d.ts

@@ -1,15 +0,0 @@
-import { ThemeOptions } from './types.js';
-import { BucketOptions } from 'react-state-bucket';
-
-type ThemeSwitcherOption = {
-    store?: BucketOptions['store'];
-    onChange?: (theme: string) => void;
-};
-declare const createThemeSwitcher: (defaultTheme: string, option?: ThemeSwitcherOption) => () => {
-    name: any;
-    theme: ThemeOptions | undefined;
-    change: (theme: string) => void;
-};
-
-export { createThemeSwitcher as default };
-export type { ThemeSwitcherOption };

package/theme/createThemeSwitcher.js

@@ -1,24 +0,0 @@
-"use client";
-import { createBucket, xv } from 'react-state-bucket';
-import { getTheme } from './core.js';
-
-const createThemeSwitcher = (defaultTheme, option) => {
-    const useThemeBucket = createBucket({ name: xv.string().default(defaultTheme) }, {
-        store: (option === null || option === void 0 ? void 0 : option.store) || "memory",
-        onChange: (_key, value) => {
-            (option === null || option === void 0 ? void 0 : option.onChange) && (option === null || option === void 0 ? void 0 : option.onChange(value));
-        }
-    });
-    const useThemeSwitcher = () => {
-        const bucket = useThemeBucket();
-        return {
-            name: bucket.state.name,
-            theme: getTheme(bucket.state.name),
-            change: (theme) => bucket.set('name', theme)
-        };
-    };
-    return useThemeSwitcher;
-};
-
-export { createThemeSwitcher as default };
-//# sourceMappingURL=createThemeSwitcher.js.map

package/theme/createThemeSwitcher.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"createThemeSwitcher.js","sources":["../../src/theme/createThemeSwitcher.ts"],"sourcesContent":["\"use client\";\nimport { createBucket, xv } from \"react-state-bucket\"\nimport { getTheme } from \"./core\"\nimport { BucketOptions } from \"react-state-bucket\"\n\nexport type ThemeSwitcherOption = {\n   store?: BucketOptions['store'],\n   onChange?: (theme: string) => void\n}\n\nconst createThemeSwitcher = (defaultTheme: string, option?: ThemeSwitcherOption) => {\n\n   const useThemeBucket = createBucket({ name: xv.string().default(defaultTheme) }, {\n      store: option?.store || \"memory\",\n      onChange: (_key, value) => {\n         option?.onChange && option?.onChange(value)\n      }\n   })\n\n   const useThemeSwitcher = () => {\n      const bucket = useThemeBucket()\n      return {\n         name: bucket.state.name,\n         theme: getTheme(bucket.state.name),\n         change: (theme: string) => bucket.set('name', theme)\n      }\n   }\n   return useThemeSwitcher\n}\n\nexport default createThemeSwitcher"],"names":[],"mappings":";;;;AAUA;AAEG;;AAEG;AACG;;AAEL;;AAGE;;AAEG;;AAEA;;AAEN;AACA;AACH;;"}