@xanui/core 1.2.44 → 1.2.45

package/AppRoot/AppRootProvider.cjs

@@ -12,7 +12,7 @@ const useAppRootElement = () => {
     if (typeof window === 'undefined') {
         return null;
     }
-    return context;
+    return context();
 };
 
 exports.AppRootProvider = AppRootProvider;

package/AppRoot/AppRootProvider.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"AppRootProvider.cjs","sources":["../../src/AppRoot/AppRootProvider.tsx"],"sourcesContent":["import React from \"react\";\r\n\r\nconst AppRootContext = React.createContext<HTMLElement | null>(null);\r\n\r\nexport const AppRootProvider: React.FC<{ element: HTMLElement | null; children: React.ReactNode }> = ({ element, children }) => {\r\n   return (\r\n      <AppRootContext.Provider value={element}>\r\n         {children}\r\n      </AppRootContext.Provider>\r\n   );\r\n}\r\n\r\nexport const useAppRootElement = (): HTMLElement => {\r\n   const context = React.useContext(AppRootContext);\r\n   if (typeof window === 'undefined') {\r\n      return null as any;\r\n   }\r\n   return context as HTMLElement\r\n}\r\n"],"names":["_jsx"],"mappings":";;;;;AAEA,MAAM,cAAc,GAAG,KAAK,CAAC,aAAa,CAAqB,IAAI,CAAC;AAE7D,MAAM,eAAe,GAAyE,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAI;AAC5H,IAAA,QACGA,cAAA,CAAC,cAAc,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,OAAO,EAAA,QAAA,EACnC,QAAQ,EAAA,CACc;AAEhC;AAEO,MAAM,iBAAiB,GAAG,MAAkB;IAChD,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC;AAChD,IAAA,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE;AAChC,QAAA,OAAO,IAAW;IACrB;AACA,IAAA,OAAO,OAAsB;AAChC;;;;;"}
+{"version":3,"file":"AppRootProvider.cjs","sources":["../../src/AppRoot/AppRootProvider.tsx"],"sourcesContent":["import React from \"react\";\r\n\r\nconst AppRootContext = React.createContext<(() => HTMLElement | null) | null>(null);\r\n\r\nexport const AppRootProvider: React.FC<{ element: () => HTMLElement | null; children: React.ReactNode }> = ({ element, children }) => {\r\n   return (\r\n      <AppRootContext.Provider value={element}>\r\n         {children}\r\n      </AppRootContext.Provider>\r\n   );\r\n}\r\n\r\nexport const useAppRootElement = (): HTMLElement => {\r\n   const context = React.useContext(AppRootContext);\r\n   if (typeof window === 'undefined') {\r\n      return null as any;\r\n   }\r\n\r\n   return context!() as HTMLElement\r\n}\r\n"],"names":["_jsx"],"mappings":";;;;;AAEA,MAAM,cAAc,GAAG,KAAK,CAAC,aAAa,CAAoC,IAAI,CAAC;AAE5E,MAAM,eAAe,GAA+E,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAI;AAClI,IAAA,QACGA,cAAA,CAAC,cAAc,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,OAAO,EAAA,QAAA,EACnC,QAAQ,EAAA,CACc;AAEhC;AAEO,MAAM,iBAAiB,GAAG,MAAkB;IAChD,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC;AAChD,IAAA,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE;AAChC,QAAA,OAAO,IAAW;IACrB;IAEA,OAAO,OAAQ,EAAiB;AACnC;;;;;"}

package/AppRoot/AppRootProvider.js

@@ -10,7 +10,7 @@ const useAppRootElement = () => {
     if (typeof window === 'undefined') {
         return null;
     }
-    return context;
+    return context();
 };
 
 export { AppRootProvider, useAppRootElement };

package/AppRoot/AppRootProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppRootProvider.js","sources":["../../src/AppRoot/AppRootProvider.tsx"],"sourcesContent":["import React from \"react\";\r\n\r\nconst AppRootContext = React.createContext<HTMLElement | null>(null);\r\n\r\nexport const AppRootProvider: React.FC<{ element: HTMLElement | null; children: React.ReactNode }> = ({ element, children }) => {\r\n   return (\r\n      <AppRootContext.Provider value={element}>\r\n         {children}\r\n      </AppRootContext.Provider>\r\n   );\r\n}\r\n\r\nexport const useAppRootElement = (): HTMLElement => {\r\n   const context = React.useContext(AppRootContext);\r\n   if (typeof window === 'undefined') {\r\n      return null as any;\r\n   }\r\n   return context as HTMLElement\r\n}\r\n"],"names":["React","_jsx"],"mappings":";;;AAEA,MAAM,cAAc,GAAGA,cAAK,CAAC,aAAa,CAAqB,IAAI,CAAC;AAE7D,MAAM,eAAe,GAAyE,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAI;AAC5H,IAAA,QACGC,GAAA,CAAC,cAAc,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,OAAO,EAAA,QAAA,EACnC,QAAQ,EAAA,CACc;AAEhC;AAEO,MAAM,iBAAiB,GAAG,MAAkB;IAChD,MAAM,OAAO,GAAGD,cAAK,CAAC,UAAU,CAAC,cAAc,CAAC;AAChD,IAAA,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE;AAChC,QAAA,OAAO,IAAW;IACrB;AACA,IAAA,OAAO,OAAsB;AAChC;;;;"}
+{"version":3,"file":"AppRootProvider.js","sources":["../../src/AppRoot/AppRootProvider.tsx"],"sourcesContent":["import React from \"react\";\r\n\r\nconst AppRootContext = React.createContext<(() => HTMLElement | null) | null>(null);\r\n\r\nexport const AppRootProvider: React.FC<{ element: () => HTMLElement | null; children: React.ReactNode }> = ({ element, children }) => {\r\n   return (\r\n      <AppRootContext.Provider value={element}>\r\n         {children}\r\n      </AppRootContext.Provider>\r\n   );\r\n}\r\n\r\nexport const useAppRootElement = (): HTMLElement => {\r\n   const context = React.useContext(AppRootContext);\r\n   if (typeof window === 'undefined') {\r\n      return null as any;\r\n   }\r\n\r\n   return context!() as HTMLElement\r\n}\r\n"],"names":["React","_jsx"],"mappings":";;;AAEA,MAAM,cAAc,GAAGA,cAAK,CAAC,aAAa,CAAoC,IAAI,CAAC;AAE5E,MAAM,eAAe,GAA+E,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAI;AAClI,IAAA,QACGC,GAAA,CAAC,cAAc,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,OAAO,EAAA,QAAA,EACnC,QAAQ,EAAA,CACc;AAEhC;AAEO,MAAM,iBAAiB,GAAG,MAAkB;IAChD,MAAM,OAAO,GAAGD,cAAK,CAAC,UAAU,CAAC,cAAc,CAAC;AAChD,IAAA,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE;AAChC,QAAA,OAAO,IAAW;IACrB;IAEA,OAAO,OAAQ,EAAiB;AACnC;;;;"}

package/AppRoot/index.cjs

@@ -24,8 +24,10 @@ const AppRoot = React.forwardRef((_a, ref) => {
     const csscacheId = React.useId();
     CSSCacheId !== null && CSSCacheId !== void 0 ? CSSCacheId : (CSSCacheId = csscacheId);
     const [visibility, setVisibility] = React.useState("hidden");
+    const [doc, setDoc] = React.useState(_document !== null && _document !== void 0 ? _document : (_document = document));
     const rootRef = React.useRef(null);
     const mergeRef = useMergeRefs(rootRef, ref);
+    // console.log(_document);
     React.useEffect(() => {
         setVisibility("visible");
         // move oncss style tags to head
@@ -36,7 +38,7 @@ const AppRoot = React.forwardRef((_a, ref) => {
             _document.head.appendChild(style);
         });
     }, []);
-    return (jsxRuntime.jsx(index.DocumentProvider, { document: _document, id: docid, children: jsxRuntime.jsx(CSSCacheProvider.CSSCacheProvider, { cacheId: CSSCacheId, children: jsxRuntime.jsx(AppRootProvider.AppRootProvider, { element: rootRef.current, children: jsxRuntime.jsx(ThemeProvider, Object.assign({ ref: mergeRef, theme: theme }, props, { isRoot: true, sx: Object.assign(Object.assign({}, props.sx), (visibility === "hidden" ? { visibility: "hidden" } : {})), children: jsxRuntime.jsxs(BreakpointProvider.BreakpointProvider, { children: [children, jsxRuntime.jsx(Renderar.RenderRenderar, {})] }) })) }) }) }));
+    return (jsxRuntime.jsx(index.DocumentProvider, { document: doc, id: docid, 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({}, props.sx), (visibility === "hidden" ? { visibility: "hidden" } : {})), children: jsxRuntime.jsxs(BreakpointProvider.BreakpointProvider, { children: [children, 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\";\r\nimport React, { useEffect, useId, useRef } from 'react';\r\nimport { TagComponentType } from '../Tag/types';\r\nimport { ThemeProvider, ThemeProviderProps } from '../theme';\r\nimport { BreakpointProvider } from '../breakpoint';\r\nimport { RenderRenderar } from './Renderar';\r\nimport { DocumentProvider } from '../Document';\r\nimport { AppRootProvider } from './AppRootProvider';\r\nimport useMergeRefs from '../hooks/useMergeRefs';\r\nimport { CSSCacheProvider } from '../css/CSSCacheProvider';\r\n\r\nexport type AppRootProps<T extends TagComponentType = \"div\"> = ThemeProviderProps<T> & {\r\n   noScrollbarCss?: boolean;\r\n   document?: Document;\r\n   CSSCacheId?: string;\r\n}\r\n\r\nconst AppRoot = React.forwardRef(<T extends TagComponentType = \"div\">({ children, noScrollbarCss, CSSCacheId, theme, document: _document, ...props }: AppRootProps<T>, ref: React.Ref<any>) => {\r\n   noScrollbarCss ??= false\r\n   _document ??= document\r\n   const docid = useId()\r\n\r\n   const csscacheId = useId()\r\n   CSSCacheId ??= csscacheId\r\n\r\n\r\n   const [visibility, setVisibility] = React.useState<string>(\"hidden\");\r\n   const rootRef = useRef(null)\r\n   const mergeRef = useMergeRefs(rootRef, ref)\r\n\r\n   useEffect(() => {\r\n      setVisibility(\"visible\");\r\n\r\n      // move oncss style tags to head\r\n      if (typeof _document === 'undefined') return;\r\n      const styles = Array.from(_document.querySelectorAll('body style[data-oncss]'));\r\n      styles.forEach((style) => {\r\n         _document.head.appendChild(style);\r\n      });\r\n   }, [])\r\n\r\n   return (\r\n      <DocumentProvider document={_document} id={docid}>\r\n         <CSSCacheProvider cacheId={CSSCacheId}>\r\n            <AppRootProvider element={rootRef.current}>\r\n               <ThemeProvider\r\n                  ref={mergeRef}\r\n                  theme={theme}\r\n                  {...props}\r\n                  isRoot\r\n                  sx={{\r\n                     ...props.sx,\r\n                     ...(visibility === \"hidden\" ? { visibility: \"hidden\" } : {})\r\n                  }}\r\n               >\r\n                  <BreakpointProvider>\r\n                     {children}\r\n                     <RenderRenderar />\r\n                  </BreakpointProvider>\r\n               </ThemeProvider>\r\n            </AppRootProvider>\r\n         </CSSCacheProvider>\r\n      </DocumentProvider>\r\n   )\r\n})\r\n\r\nexport default AppRoot\r\n\r\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAiBA;AAAsE;;;AAGnE;AAEA;;AAIA;AACA;;;;;;;AAQG;AACA;AACG;AACH;;AAGH;AAuBH;;"}
+{"version":3,"file":"index.cjs","sources":["../../src/AppRoot/index.tsx"],"sourcesContent":["\"use client\";\r\nimport React, { useEffect, useId, useLayoutEffect, useRef, useState } from 'react';\r\nimport { TagComponentType } from '../Tag/types';\r\nimport { ThemeProvider, ThemeProviderProps } from '../theme';\r\nimport { BreakpointProvider } from '../breakpoint';\r\nimport { RenderRenderar } from './Renderar';\r\nimport { DocumentProvider } from '../Document';\r\nimport { AppRootProvider } from './AppRootProvider';\r\nimport useMergeRefs from '../hooks/useMergeRefs';\r\nimport { CSSCacheProvider } from '../css/CSSCacheProvider';\r\n\r\nexport type AppRootProps<T extends TagComponentType = \"div\"> = ThemeProviderProps<T> & {\r\n   noScrollbarCss?: boolean;\r\n   document?: Document;\r\n   CSSCacheId?: string;\r\n}\r\n\r\nconst AppRoot = React.forwardRef(<T extends TagComponentType = \"div\">({ children, noScrollbarCss, CSSCacheId, theme, document: _document, ...props }: AppRootProps<T>, ref: React.Ref<any>) => {\r\n   noScrollbarCss ??= false\r\n   _document ??= document\r\n   const docid = useId()\r\n\r\n   const csscacheId = useId()\r\n   CSSCacheId ??= csscacheId\r\n\r\n   const [visibility, setVisibility] = React.useState<string>(\"hidden\");\r\n   const [doc, setDoc] = useState(_document ??= document)\r\n   const rootRef = useRef(null)\r\n   const mergeRef = useMergeRefs(rootRef, ref)\r\n   // console.log(_document);\r\n\r\n   useEffect(() => {\r\n      setVisibility(\"visible\");\r\n\r\n      // move oncss style tags to head\r\n      if (typeof _document === 'undefined') return;\r\n      const styles = Array.from(_document.querySelectorAll('body style[data-oncss]'));\r\n      styles.forEach((style) => {\r\n         _document.head.appendChild(style);\r\n      });\r\n   }, [])\r\n\r\n   return (\r\n      <DocumentProvider document={doc} id={docid}>\r\n         <CSSCacheProvider cacheId={CSSCacheId}>\r\n            <AppRootProvider element={() => rootRef.current}>\r\n               <ThemeProvider\r\n                  theme={theme}\r\n                  {...props}\r\n                  ref={mergeRef}\r\n                  isRoot\r\n                  sx={{\r\n                     ...props.sx,\r\n                     ...(visibility === \"hidden\" ? { visibility: \"hidden\" } : {})\r\n                  }}\r\n               >\r\n                  <BreakpointProvider>\r\n                     {children}\r\n                     <RenderRenderar />\r\n                  </BreakpointProvider>\r\n               </ThemeProvider>\r\n            </AppRootProvider>\r\n         </CSSCacheProvider>\r\n      </DocumentProvider>\r\n   )\r\n})\r\n\r\nexport default AppRoot\r\n\r\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAiBA;AAAsE;;;AAGnE;AAEA;;AAGA;AACA;AACA;;;;;;;;AASG;AACA;AACG;AACH;;AAGH;AAuBH;;"}

package/AppRoot/index.js

@@ -1,7 +1,7 @@
 "use client";
 import { __rest } from 'tslib';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import React__default, { useId, useRef, useEffect } from 'react';
+import React__default, { useId, useState, useRef, useEffect } from 'react';
 import '../theme/core.js';
 import '../css/getValue.js';
 import 'oncss';
@@ -22,8 +22,10 @@ const AppRoot = React__default.forwardRef((_a, ref) => {
     const csscacheId = useId();
     CSSCacheId !== null && CSSCacheId !== void 0 ? CSSCacheId : (CSSCacheId = csscacheId);
     const [visibility, setVisibility] = React__default.useState("hidden");
+    const [doc, setDoc] = useState(_document !== null && _document !== void 0 ? _document : (_document = document));
     const rootRef = useRef(null);
     const mergeRef = useMergeRefs(rootRef, ref);
+    // console.log(_document);
     useEffect(() => {
         setVisibility("visible");
         // move oncss style tags to head
@@ -34,7 +36,7 @@ const AppRoot = React__default.forwardRef((_a, ref) => {
             _document.head.appendChild(style);
         });
     }, []);
-    return (jsx(DocumentProvider, { document: _document, id: docid, children: jsx(CSSCacheProvider, { cacheId: CSSCacheId, children: jsx(AppRootProvider, { element: rootRef.current, children: jsx(ThemeProvider, Object.assign({ ref: mergeRef, theme: theme }, props, { isRoot: true, sx: Object.assign(Object.assign({}, props.sx), (visibility === "hidden" ? { visibility: "hidden" } : {})), children: jsxs(BreakpointProvider, { children: [children, jsx(RenderRenderar, {})] }) })) }) }) }));
+    return (jsx(DocumentProvider, { document: doc, id: docid, 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({}, props.sx), (visibility === "hidden" ? { visibility: "hidden" } : {})), children: jsxs(BreakpointProvider, { children: [children, 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\";\r\nimport React, { useEffect, useId, useRef } from 'react';\r\nimport { TagComponentType } from '../Tag/types';\r\nimport { ThemeProvider, ThemeProviderProps } from '../theme';\r\nimport { BreakpointProvider } from '../breakpoint';\r\nimport { RenderRenderar } from './Renderar';\r\nimport { DocumentProvider } from '../Document';\r\nimport { AppRootProvider } from './AppRootProvider';\r\nimport useMergeRefs from '../hooks/useMergeRefs';\r\nimport { CSSCacheProvider } from '../css/CSSCacheProvider';\r\n\r\nexport type AppRootProps<T extends TagComponentType = \"div\"> = ThemeProviderProps<T> & {\r\n   noScrollbarCss?: boolean;\r\n   document?: Document;\r\n   CSSCacheId?: string;\r\n}\r\n\r\nconst AppRoot = React.forwardRef(<T extends TagComponentType = \"div\">({ children, noScrollbarCss, CSSCacheId, theme, document: _document, ...props }: AppRootProps<T>, ref: React.Ref<any>) => {\r\n   noScrollbarCss ??= false\r\n   _document ??= document\r\n   const docid = useId()\r\n\r\n   const csscacheId = useId()\r\n   CSSCacheId ??= csscacheId\r\n\r\n\r\n   const [visibility, setVisibility] = React.useState<string>(\"hidden\");\r\n   const rootRef = useRef(null)\r\n   const mergeRef = useMergeRefs(rootRef, ref)\r\n\r\n   useEffect(() => {\r\n      setVisibility(\"visible\");\r\n\r\n      // move oncss style tags to head\r\n      if (typeof _document === 'undefined') return;\r\n      const styles = Array.from(_document.querySelectorAll('body style[data-oncss]'));\r\n      styles.forEach((style) => {\r\n         _document.head.appendChild(style);\r\n      });\r\n   }, [])\r\n\r\n   return (\r\n      <DocumentProvider document={_document} id={docid}>\r\n         <CSSCacheProvider cacheId={CSSCacheId}>\r\n            <AppRootProvider element={rootRef.current}>\r\n               <ThemeProvider\r\n                  ref={mergeRef}\r\n                  theme={theme}\r\n                  {...props}\r\n                  isRoot\r\n                  sx={{\r\n                     ...props.sx,\r\n                     ...(visibility === \"hidden\" ? { visibility: \"hidden\" } : {})\r\n                  }}\r\n               >\r\n                  <BreakpointProvider>\r\n                     {children}\r\n                     <RenderRenderar />\r\n                  </BreakpointProvider>\r\n               </ThemeProvider>\r\n            </AppRootProvider>\r\n         </CSSCacheProvider>\r\n      </DocumentProvider>\r\n   )\r\n})\r\n\r\nexport default AppRoot\r\n\r\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAiBA;AAAsE;;;AAGnE;AAEA;;AAIA;AACA;;;;;;;AAQG;AACA;AACG;AACH;;AAGH;AAuBH;;"}
+{"version":3,"file":"index.js","sources":["../../src/AppRoot/index.tsx"],"sourcesContent":["\"use client\";\r\nimport React, { useEffect, useId, useLayoutEffect, useRef, useState } from 'react';\r\nimport { TagComponentType } from '../Tag/types';\r\nimport { ThemeProvider, ThemeProviderProps } from '../theme';\r\nimport { BreakpointProvider } from '../breakpoint';\r\nimport { RenderRenderar } from './Renderar';\r\nimport { DocumentProvider } from '../Document';\r\nimport { AppRootProvider } from './AppRootProvider';\r\nimport useMergeRefs from '../hooks/useMergeRefs';\r\nimport { CSSCacheProvider } from '../css/CSSCacheProvider';\r\n\r\nexport type AppRootProps<T extends TagComponentType = \"div\"> = ThemeProviderProps<T> & {\r\n   noScrollbarCss?: boolean;\r\n   document?: Document;\r\n   CSSCacheId?: string;\r\n}\r\n\r\nconst AppRoot = React.forwardRef(<T extends TagComponentType = \"div\">({ children, noScrollbarCss, CSSCacheId, theme, document: _document, ...props }: AppRootProps<T>, ref: React.Ref<any>) => {\r\n   noScrollbarCss ??= false\r\n   _document ??= document\r\n   const docid = useId()\r\n\r\n   const csscacheId = useId()\r\n   CSSCacheId ??= csscacheId\r\n\r\n   const [visibility, setVisibility] = React.useState<string>(\"hidden\");\r\n   const [doc, setDoc] = useState(_document ??= document)\r\n   const rootRef = useRef(null)\r\n   const mergeRef = useMergeRefs(rootRef, ref)\r\n   // console.log(_document);\r\n\r\n   useEffect(() => {\r\n      setVisibility(\"visible\");\r\n\r\n      // move oncss style tags to head\r\n      if (typeof _document === 'undefined') return;\r\n      const styles = Array.from(_document.querySelectorAll('body style[data-oncss]'));\r\n      styles.forEach((style) => {\r\n         _document.head.appendChild(style);\r\n      });\r\n   }, [])\r\n\r\n   return (\r\n      <DocumentProvider document={doc} id={docid}>\r\n         <CSSCacheProvider cacheId={CSSCacheId}>\r\n            <AppRootProvider element={() => rootRef.current}>\r\n               <ThemeProvider\r\n                  theme={theme}\r\n                  {...props}\r\n                  ref={mergeRef}\r\n                  isRoot\r\n                  sx={{\r\n                     ...props.sx,\r\n                     ...(visibility === \"hidden\" ? { visibility: \"hidden\" } : {})\r\n                  }}\r\n               >\r\n                  <BreakpointProvider>\r\n                     {children}\r\n                     <RenderRenderar />\r\n                  </BreakpointProvider>\r\n               </ThemeProvider>\r\n            </AppRootProvider>\r\n         </CSSCacheProvider>\r\n      </DocumentProvider>\r\n   )\r\n})\r\n\r\nexport default AppRoot\r\n\r\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAiBA;AAAsE;;;AAGnE;AAEA;;AAGA;AACA;AACA;;;;;;;;AASG;AACA;AACG;AACH;;AAGH;AAuBH;;"}

package/Document/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/Document/index.tsx"],"sourcesContent":["'use client'\r\nimport React, { useContext, createContext } from \"react\";\r\n\r\n\r\nexport type DocumentID = string\r\nexport type DocumentContextValue = { document: Document; id: DocumentID }\r\nconst DocumentContext = createContext<DocumentContextValue | null>(null);\r\n\r\nexport const DocumentProvider: React.FC<{ children: React.ReactNode } & DocumentContextValue> = ({ document, id, children }) => {\r\n   return (\r\n      <DocumentContext.Provider value={{ document, id }}>\r\n         {children}\r\n      </DocumentContext.Provider>\r\n   );\r\n}\r\n\r\nexport const useDocument = (): DocumentContextValue => {\r\n   const context = useContext(DocumentContext);\r\n   if (typeof window === 'undefined') {\r\n      return null as any;\r\n   }\r\n   return context as DocumentContextValue\r\n}"],"names":[],"mappings":";;;;;;AAMA;AAEO;AACJ;AAKH;AAEO;AACJ;AACA;AACG;;AAEH;AACH;;;"}
+{"version":3,"file":"index.cjs","sources":["../../src/Document/index.tsx"],"sourcesContent":["'use client'\r\nimport React, { useContext, createContext } from \"react\";\r\n\r\n\r\nexport type DocumentID = string\r\nexport type DocumentContextValue = { document: Document; id: DocumentID }\r\nconst DocumentContext = createContext<DocumentContextValue | null>(null);\r\n\r\nexport const DocumentProvider: React.FC<{ children: React.ReactNode } & DocumentContextValue> = ({ document, id, children }) => {\r\n   return (\r\n      <DocumentContext.Provider value={{ document, id }}>\r\n         {children}\r\n      </DocumentContext.Provider>\r\n   );\r\n}\r\n\r\nexport const useDocument = (): DocumentContextValue => {\r\n   const context = useContext(DocumentContext);\r\n   if (typeof window === 'undefined') {\r\n      return null as any;\r\n   }\r\n\r\n   return context as DocumentContextValue\r\n}"],"names":[],"mappings":";;;;;;AAMA;AAEO;AACJ;AAKH;AAEO;AACJ;AACA;AACG;;AAGH;AACH;;;"}

package/Document/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Document/index.tsx"],"sourcesContent":["'use client'\r\nimport React, { useContext, createContext } from \"react\";\r\n\r\n\r\nexport type DocumentID = string\r\nexport type DocumentContextValue = { document: Document; id: DocumentID }\r\nconst DocumentContext = createContext<DocumentContextValue | null>(null);\r\n\r\nexport const DocumentProvider: React.FC<{ children: React.ReactNode } & DocumentContextValue> = ({ document, id, children }) => {\r\n   return (\r\n      <DocumentContext.Provider value={{ document, id }}>\r\n         {children}\r\n      </DocumentContext.Provider>\r\n   );\r\n}\r\n\r\nexport const useDocument = (): DocumentContextValue => {\r\n   const context = useContext(DocumentContext);\r\n   if (typeof window === 'undefined') {\r\n      return null as any;\r\n   }\r\n   return context as DocumentContextValue\r\n}"],"names":[],"mappings":";;;;AAMA;AAEO;AACJ;AAKH;AAEO;AACJ;AACA;AACG;;AAEH;AACH;;"}
+{"version":3,"file":"index.js","sources":["../../src/Document/index.tsx"],"sourcesContent":["'use client'\r\nimport React, { useContext, createContext } from \"react\";\r\n\r\n\r\nexport type DocumentID = string\r\nexport type DocumentContextValue = { document: Document; id: DocumentID }\r\nconst DocumentContext = createContext<DocumentContextValue | null>(null);\r\n\r\nexport const DocumentProvider: React.FC<{ children: React.ReactNode } & DocumentContextValue> = ({ document, id, children }) => {\r\n   return (\r\n      <DocumentContext.Provider value={{ document, id }}>\r\n         {children}\r\n      </DocumentContext.Provider>\r\n   );\r\n}\r\n\r\nexport const useDocument = (): DocumentContextValue => {\r\n   const context = useContext(DocumentContext);\r\n   if (typeof window === 'undefined') {\r\n      return null as any;\r\n   }\r\n\r\n   return context as DocumentContextValue\r\n}"],"names":[],"mappings":";;;;AAMA;AAEO;AACJ;AAKH;AAEO;AACJ;AACA;AACG;;AAGH;AACH;;"}

package/Tag/useTagProps.cjs

@@ -11,7 +11,7 @@ const useTagProps = (props) => {
     const cachekey = JSON.stringify(props, (key, value) => {
         return key === '_owner' || key === '_store' ? undefined : value;
     }, 2);
-    const doc = index.useDocument().document;
+    const doc = index.useDocument();
     const cacheId = CSSCacheProvider.useCSSCacheId();
     const parsed = React.useMemo(() => {
         let _props = {};
@@ -33,8 +33,8 @@ const useTagProps = (props) => {
             }
         }
         const styles = index$1.css(Object.assign(Object.assign(Object.assign(Object.assign({}, props.sxr), _css), props.sx), props.style), {
-            injectStyle: typeof doc !== 'undefined',
-            container: doc,
+            injectStyle: typeof doc.document !== 'undefined',
+            container: doc.document,
             cacheId
         });
         return {

package/Tag/useTagProps.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useTagProps.cjs","sources":["../../src/Tag/useTagProps.ts"],"sourcesContent":["import { TagComponentType, TagProps, TagPropsRoot } from './types';\r\nimport cssPropList from './cssPropList';\r\nimport { css } from '../css';\r\nimport { classNames } from 'pretty-class';\r\nimport { CSSFactoryType } from 'oncss';\r\nimport { useMemo } from 'react';\r\nimport { useDocument } from '../Document';\r\nimport { useCSSCacheId } from '../css/CSSCacheProvider';\r\n\r\nexport type useTagPropsReturn<T extends TagComponentType = \"div\"> = {\r\n   props: TagProps<T>,\r\n   style: CSSFactoryType\r\n}\r\n\r\nconst useTagProps = <T extends TagComponentType = \"div\">(props: TagPropsRoot<T>): useTagPropsReturn<T> => {\r\n   const cachekey = JSON.stringify(props, (key, value) => {\r\n      return key === '_owner' || key === '_store' ? undefined : value;\r\n   }, 2);\r\n\r\n   const doc = useDocument().document;\r\n   const cacheId = useCSSCacheId()\r\n\r\n   const parsed = useMemo(() => {\r\n      let _props: any = {}\r\n      let _css: any = {}\r\n\r\n      if (props.hover && Object.keys(props.hover).length > 0) {\r\n         _css['&:hover'] = {\r\n            ...props.hover\r\n         }\r\n      }\r\n\r\n      for (let key in props) {\r\n         const keys = [\"sx\", \"sxr\", \"style\", \"hover\", \"className\", \"classNames\", \"baseClass\"];\r\n         if (keys.includes(key)) {\r\n            continue;\r\n         }\r\n         let val = (props as any)[key];\r\n         if (!cssPropList[key]) {\r\n            _props[key] = val\r\n         } else {\r\n            _css[key] = val\r\n         }\r\n      }\r\n\r\n      const styles = css({ ...props.sxr, ..._css, ...props.sx, ...props.style }, {\r\n         injectStyle: typeof doc !== 'undefined',\r\n         container: doc,\r\n         cacheId\r\n      })\r\n\r\n      return {\r\n         props: _props,\r\n         styles,\r\n         className: classNames(\r\n            props.baseClass ? \"xui-\" + props.baseClass : undefined,\r\n            props.classNames,\r\n            props.className,\r\n            styles.classname\r\n         )\r\n      }\r\n   }, [cachekey])\r\n\r\n   const _props: any = {};\r\n   for (let prop in parsed.props) {\r\n      _props[prop] = (props as any)[prop]\r\n   }\r\n   _props.className = parsed.className;\r\n\r\n   return { props: _props, style: parsed.styles };\r\n}\r\n\r\n\r\nexport default useTagProps"],"names":["useDocument","useCSSCacheId","useMemo","css","classNames"],"mappings":";;;;;;;;;AAcA,MAAM,WAAW,GAAG,CAAqC,KAAsB,KAA0B;AACtG,IAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,CAAC,GAAG,EAAE,KAAK,KAAI;AACnD,QAAA,OAAO,GAAG,KAAK,QAAQ,IAAI,GAAG,KAAK,QAAQ,GAAG,SAAS,GAAG,KAAK;IAClE,CAAC,EAAE,CAAC,CAAC;AAEL,IAAA,MAAM,GAAG,GAAGA,iBAAW,EAAE,CAAC,QAAQ;AAClC,IAAA,MAAM,OAAO,GAAGC,8BAAa,EAAE;AAE/B,IAAA,MAAM,MAAM,GAAGC,aAAO,CAAC,MAAK;QACzB,IAAI,MAAM,GAAQ,EAAE;QACpB,IAAI,IAAI,GAAQ,EAAE;AAElB,QAAA,IAAI,KAAK,CAAC,KAAK,IAAI,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,MAAM,GAAG,CAAC,EAAE;YACrD,IAAI,CAAC,SAAS,CAAC,GAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACT,KAAK,CAAC,KAAK,CAChB;QACJ;AAEA,QAAA,KAAK,IAAI,GAAG,IAAI,KAAK,EAAE;AACpB,YAAA,MAAM,IAAI,GAAG,CAAC,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,WAAW,CAAC;AACpF,YAAA,IAAI,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE;gBACrB;YACH;AACA,YAAA,IAAI,GAAG,GAAI,KAAa,CAAC,GAAG,CAAC;AAC7B,YAAA,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,EAAE;AACpB,gBAAA,MAAM,CAAC,GAAG,CAAC,GAAG,GAAG;YACpB;iBAAO;AACJ,gBAAA,IAAI,CAAC,GAAG,CAAC,GAAG,GAAG;YAClB;QACH;AAEA,QAAA,MAAM,MAAM,GAAGC,WAAG,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAM,KAAK,CAAC,GAAG,CAAA,EAAK,IAAI,CAAA,EAAK,KAAK,CAAC,EAAE,GAAK,KAAK,CAAC,KAAK,CAAA,EAAI;AACxE,YAAA,WAAW,EAAE,OAAO,GAAG,KAAK,WAAW;AACvC,YAAA,SAAS,EAAE,GAAG;YACd;AACF,SAAA,CAAC;QAEF,OAAO;AACJ,YAAA,KAAK,EAAE,MAAM;YACb,MAAM;AACN,YAAA,SAAS,EAAEC,sBAAU,CAClB,KAAK,CAAC,SAAS,GAAG,MAAM,GAAG,KAAK,CAAC,SAAS,GAAG,SAAS,EACtD,KAAK,CAAC,UAAU,EAChB,KAAK,CAAC,SAAS,EACf,MAAM,CAAC,SAAS;SAErB;AACJ,IAAA,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC;IAEd,MAAM,MAAM,GAAQ,EAAE;AACtB,IAAA,KAAK,IAAI,IAAI,IAAI,MAAM,CAAC,KAAK,EAAE;QAC5B,MAAM,CAAC,IAAI,CAAC,GAAI,KAAa,CAAC,IAAI,CAAC;IACtC;AACA,IAAA,MAAM,CAAC,SAAS,GAAG,MAAM,CAAC,SAAS;IAEnC,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE;AACjD;;;;"}
+{"version":3,"file":"useTagProps.cjs","sources":["../../src/Tag/useTagProps.ts"],"sourcesContent":["import { TagComponentType, TagProps, TagPropsRoot } from './types';\r\nimport cssPropList from './cssPropList';\r\nimport { css } from '../css';\r\nimport { classNames } from 'pretty-class';\r\nimport { CSSFactoryType } from 'oncss';\r\nimport { useMemo } from 'react';\r\nimport { useDocument } from '../Document';\r\nimport { useCSSCacheId } from '../css/CSSCacheProvider';\r\n\r\nexport type useTagPropsReturn<T extends TagComponentType = \"div\"> = {\r\n   props: TagProps<T>,\r\n   style: CSSFactoryType\r\n}\r\n\r\nconst useTagProps = <T extends TagComponentType = \"div\">(props: TagPropsRoot<T>): useTagPropsReturn<T> => {\r\n   const cachekey = JSON.stringify(props, (key, value) => {\r\n      return key === '_owner' || key === '_store' ? undefined : value;\r\n   }, 2);\r\n\r\n   const doc = useDocument();\r\n   const cacheId = useCSSCacheId()\r\n\r\n   const parsed = useMemo(() => {\r\n      let _props: any = {}\r\n      let _css: any = {}\r\n\r\n      if (props.hover && Object.keys(props.hover).length > 0) {\r\n         _css['&:hover'] = {\r\n            ...props.hover\r\n         }\r\n      }\r\n\r\n      for (let key in props) {\r\n         const keys = [\"sx\", \"sxr\", \"style\", \"hover\", \"className\", \"classNames\", \"baseClass\"];\r\n         if (keys.includes(key)) {\r\n            continue;\r\n         }\r\n         let val = (props as any)[key];\r\n         if (!cssPropList[key]) {\r\n            _props[key] = val\r\n         } else {\r\n            _css[key] = val\r\n         }\r\n      }\r\n\r\n      const styles = css({ ...props.sxr, ..._css, ...props.sx, ...props.style }, {\r\n         injectStyle: typeof doc.document !== 'undefined',\r\n         container: doc.document,\r\n         cacheId\r\n      })\r\n\r\n      return {\r\n         props: _props,\r\n         styles,\r\n         className: classNames(\r\n            props.baseClass ? \"xui-\" + props.baseClass : undefined,\r\n            props.classNames,\r\n            props.className,\r\n            styles.classname\r\n         )\r\n      }\r\n   }, [cachekey])\r\n\r\n   const _props: any = {};\r\n   for (let prop in parsed.props) {\r\n      _props[prop] = (props as any)[prop]\r\n   }\r\n   _props.className = parsed.className;\r\n\r\n   return { props: _props, style: parsed.styles };\r\n}\r\n\r\n\r\nexport default useTagProps"],"names":["useDocument","useCSSCacheId","useMemo","css","classNames"],"mappings":";;;;;;;;;AAcA,MAAM,WAAW,GAAG,CAAqC,KAAsB,KAA0B;AACtG,IAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,CAAC,GAAG,EAAE,KAAK,KAAI;AACnD,QAAA,OAAO,GAAG,KAAK,QAAQ,IAAI,GAAG,KAAK,QAAQ,GAAG,SAAS,GAAG,KAAK;IAClE,CAAC,EAAE,CAAC,CAAC;AAEL,IAAA,MAAM,GAAG,GAAGA,iBAAW,EAAE;AACzB,IAAA,MAAM,OAAO,GAAGC,8BAAa,EAAE;AAE/B,IAAA,MAAM,MAAM,GAAGC,aAAO,CAAC,MAAK;QACzB,IAAI,MAAM,GAAQ,EAAE;QACpB,IAAI,IAAI,GAAQ,EAAE;AAElB,QAAA,IAAI,KAAK,CAAC,KAAK,IAAI,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,MAAM,GAAG,CAAC,EAAE;YACrD,IAAI,CAAC,SAAS,CAAC,GAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACT,KAAK,CAAC,KAAK,CAChB;QACJ;AAEA,QAAA,KAAK,IAAI,GAAG,IAAI,KAAK,EAAE;AACpB,YAAA,MAAM,IAAI,GAAG,CAAC,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,WAAW,CAAC;AACpF,YAAA,IAAI,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE;gBACrB;YACH;AACA,YAAA,IAAI,GAAG,GAAI,KAAa,CAAC,GAAG,CAAC;AAC7B,YAAA,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,EAAE;AACpB,gBAAA,MAAM,CAAC,GAAG,CAAC,GAAG,GAAG;YACpB;iBAAO;AACJ,gBAAA,IAAI,CAAC,GAAG,CAAC,GAAG,GAAG;YAClB;QACH;AAEA,QAAA,MAAM,MAAM,GAAGC,WAAG,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAM,KAAK,CAAC,GAAG,CAAA,EAAK,IAAI,CAAA,EAAK,KAAK,CAAC,EAAE,GAAK,KAAK,CAAC,KAAK,CAAA,EAAI;AACxE,YAAA,WAAW,EAAE,OAAO,GAAG,CAAC,QAAQ,KAAK,WAAW;YAChD,SAAS,EAAE,GAAG,CAAC,QAAQ;YACvB;AACF,SAAA,CAAC;QAEF,OAAO;AACJ,YAAA,KAAK,EAAE,MAAM;YACb,MAAM;AACN,YAAA,SAAS,EAAEC,sBAAU,CAClB,KAAK,CAAC,SAAS,GAAG,MAAM,GAAG,KAAK,CAAC,SAAS,GAAG,SAAS,EACtD,KAAK,CAAC,UAAU,EAChB,KAAK,CAAC,SAAS,EACf,MAAM,CAAC,SAAS;SAErB;AACJ,IAAA,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC;IAEd,MAAM,MAAM,GAAQ,EAAE;AACtB,IAAA,KAAK,IAAI,IAAI,IAAI,MAAM,CAAC,KAAK,EAAE;QAC5B,MAAM,CAAC,IAAI,CAAC,GAAI,KAAa,CAAC,IAAI,CAAC;IACtC;AACA,IAAA,MAAM,CAAC,SAAS,GAAG,MAAM,CAAC,SAAS;IAEnC,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE;AACjD;;;;"}

package/Tag/useTagProps.js

@@ -9,7 +9,7 @@ const useTagProps = (props) => {
     const cachekey = JSON.stringify(props, (key, value) => {
         return key === '_owner' || key === '_store' ? undefined : value;
     }, 2);
-    const doc = useDocument().document;
+    const doc = useDocument();
     const cacheId = useCSSCacheId();
     const parsed = useMemo(() => {
         let _props = {};
@@ -31,8 +31,8 @@ const useTagProps = (props) => {
             }
         }
         const styles = css(Object.assign(Object.assign(Object.assign(Object.assign({}, props.sxr), _css), props.sx), props.style), {
-            injectStyle: typeof doc !== 'undefined',
-            container: doc,
+            injectStyle: typeof doc.document !== 'undefined',
+            container: doc.document,
             cacheId
         });
         return {

package/Tag/useTagProps.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTagProps.js","sources":["../../src/Tag/useTagProps.ts"],"sourcesContent":["import { TagComponentType, TagProps, TagPropsRoot } from './types';\r\nimport cssPropList from './cssPropList';\r\nimport { css } from '../css';\r\nimport { classNames } from 'pretty-class';\r\nimport { CSSFactoryType } from 'oncss';\r\nimport { useMemo } from 'react';\r\nimport { useDocument } from '../Document';\r\nimport { useCSSCacheId } from '../css/CSSCacheProvider';\r\n\r\nexport type useTagPropsReturn<T extends TagComponentType = \"div\"> = {\r\n   props: TagProps<T>,\r\n   style: CSSFactoryType\r\n}\r\n\r\nconst useTagProps = <T extends TagComponentType = \"div\">(props: TagPropsRoot<T>): useTagPropsReturn<T> => {\r\n   const cachekey = JSON.stringify(props, (key, value) => {\r\n      return key === '_owner' || key === '_store' ? undefined : value;\r\n   }, 2);\r\n\r\n   const doc = useDocument().document;\r\n   const cacheId = useCSSCacheId()\r\n\r\n   const parsed = useMemo(() => {\r\n      let _props: any = {}\r\n      let _css: any = {}\r\n\r\n      if (props.hover && Object.keys(props.hover).length > 0) {\r\n         _css['&:hover'] = {\r\n            ...props.hover\r\n         }\r\n      }\r\n\r\n      for (let key in props) {\r\n         const keys = [\"sx\", \"sxr\", \"style\", \"hover\", \"className\", \"classNames\", \"baseClass\"];\r\n         if (keys.includes(key)) {\r\n            continue;\r\n         }\r\n         let val = (props as any)[key];\r\n         if (!cssPropList[key]) {\r\n            _props[key] = val\r\n         } else {\r\n            _css[key] = val\r\n         }\r\n      }\r\n\r\n      const styles = css({ ...props.sxr, ..._css, ...props.sx, ...props.style }, {\r\n         injectStyle: typeof doc !== 'undefined',\r\n         container: doc,\r\n         cacheId\r\n      })\r\n\r\n      return {\r\n         props: _props,\r\n         styles,\r\n         className: classNames(\r\n            props.baseClass ? \"xui-\" + props.baseClass : undefined,\r\n            props.classNames,\r\n            props.className,\r\n            styles.classname\r\n         )\r\n      }\r\n   }, [cachekey])\r\n\r\n   const _props: any = {};\r\n   for (let prop in parsed.props) {\r\n      _props[prop] = (props as any)[prop]\r\n   }\r\n   _props.className = parsed.className;\r\n\r\n   return { props: _props, style: parsed.styles };\r\n}\r\n\r\n\r\nexport default useTagProps"],"names":["cssPropList"],"mappings":";;;;;;;AAcA,MAAM,WAAW,GAAG,CAAqC,KAAsB,KAA0B;AACtG,IAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,CAAC,GAAG,EAAE,KAAK,KAAI;AACnD,QAAA,OAAO,GAAG,KAAK,QAAQ,IAAI,GAAG,KAAK,QAAQ,GAAG,SAAS,GAAG,KAAK;IAClE,CAAC,EAAE,CAAC,CAAC;AAEL,IAAA,MAAM,GAAG,GAAG,WAAW,EAAE,CAAC,QAAQ;AAClC,IAAA,MAAM,OAAO,GAAG,aAAa,EAAE;AAE/B,IAAA,MAAM,MAAM,GAAG,OAAO,CAAC,MAAK;QACzB,IAAI,MAAM,GAAQ,EAAE;QACpB,IAAI,IAAI,GAAQ,EAAE;AAElB,QAAA,IAAI,KAAK,CAAC,KAAK,IAAI,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,MAAM,GAAG,CAAC,EAAE;YACrD,IAAI,CAAC,SAAS,CAAC,GAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACT,KAAK,CAAC,KAAK,CAChB;QACJ;AAEA,QAAA,KAAK,IAAI,GAAG,IAAI,KAAK,EAAE;AACpB,YAAA,MAAM,IAAI,GAAG,CAAC,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,WAAW,CAAC;AACpF,YAAA,IAAI,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE;gBACrB;YACH;AACA,YAAA,IAAI,GAAG,GAAI,KAAa,CAAC,GAAG,CAAC;AAC7B,YAAA,IAAI,CAACA,aAAW,CAAC,GAAG,CAAC,EAAE;AACpB,gBAAA,MAAM,CAAC,GAAG,CAAC,GAAG,GAAG;YACpB;iBAAO;AACJ,gBAAA,IAAI,CAAC,GAAG,CAAC,GAAG,GAAG;YAClB;QACH;AAEA,QAAA,MAAM,MAAM,GAAG,GAAG,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAM,KAAK,CAAC,GAAG,CAAA,EAAK,IAAI,CAAA,EAAK,KAAK,CAAC,EAAE,GAAK,KAAK,CAAC,KAAK,CAAA,EAAI;AACxE,YAAA,WAAW,EAAE,OAAO,GAAG,KAAK,WAAW;AACvC,YAAA,SAAS,EAAE,GAAG;YACd;AACF,SAAA,CAAC;QAEF,OAAO;AACJ,YAAA,KAAK,EAAE,MAAM;YACb,MAAM;AACN,YAAA,SAAS,EAAE,UAAU,CAClB,KAAK,CAAC,SAAS,GAAG,MAAM,GAAG,KAAK,CAAC,SAAS,GAAG,SAAS,EACtD,KAAK,CAAC,UAAU,EAChB,KAAK,CAAC,SAAS,EACf,MAAM,CAAC,SAAS;SAErB;AACJ,IAAA,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC;IAEd,MAAM,MAAM,GAAQ,EAAE;AACtB,IAAA,KAAK,IAAI,IAAI,IAAI,MAAM,CAAC,KAAK,EAAE;QAC5B,MAAM,CAAC,IAAI,CAAC,GAAI,KAAa,CAAC,IAAI,CAAC;IACtC;AACA,IAAA,MAAM,CAAC,SAAS,GAAG,MAAM,CAAC,SAAS;IAEnC,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE;AACjD;;;;"}
+{"version":3,"file":"useTagProps.js","sources":["../../src/Tag/useTagProps.ts"],"sourcesContent":["import { TagComponentType, TagProps, TagPropsRoot } from './types';\r\nimport cssPropList from './cssPropList';\r\nimport { css } from '../css';\r\nimport { classNames } from 'pretty-class';\r\nimport { CSSFactoryType } from 'oncss';\r\nimport { useMemo } from 'react';\r\nimport { useDocument } from '../Document';\r\nimport { useCSSCacheId } from '../css/CSSCacheProvider';\r\n\r\nexport type useTagPropsReturn<T extends TagComponentType = \"div\"> = {\r\n   props: TagProps<T>,\r\n   style: CSSFactoryType\r\n}\r\n\r\nconst useTagProps = <T extends TagComponentType = \"div\">(props: TagPropsRoot<T>): useTagPropsReturn<T> => {\r\n   const cachekey = JSON.stringify(props, (key, value) => {\r\n      return key === '_owner' || key === '_store' ? undefined : value;\r\n   }, 2);\r\n\r\n   const doc = useDocument();\r\n   const cacheId = useCSSCacheId()\r\n\r\n   const parsed = useMemo(() => {\r\n      let _props: any = {}\r\n      let _css: any = {}\r\n\r\n      if (props.hover && Object.keys(props.hover).length > 0) {\r\n         _css['&:hover'] = {\r\n            ...props.hover\r\n         }\r\n      }\r\n\r\n      for (let key in props) {\r\n         const keys = [\"sx\", \"sxr\", \"style\", \"hover\", \"className\", \"classNames\", \"baseClass\"];\r\n         if (keys.includes(key)) {\r\n            continue;\r\n         }\r\n         let val = (props as any)[key];\r\n         if (!cssPropList[key]) {\r\n            _props[key] = val\r\n         } else {\r\n            _css[key] = val\r\n         }\r\n      }\r\n\r\n      const styles = css({ ...props.sxr, ..._css, ...props.sx, ...props.style }, {\r\n         injectStyle: typeof doc.document !== 'undefined',\r\n         container: doc.document,\r\n         cacheId\r\n      })\r\n\r\n      return {\r\n         props: _props,\r\n         styles,\r\n         className: classNames(\r\n            props.baseClass ? \"xui-\" + props.baseClass : undefined,\r\n            props.classNames,\r\n            props.className,\r\n            styles.classname\r\n         )\r\n      }\r\n   }, [cachekey])\r\n\r\n   const _props: any = {};\r\n   for (let prop in parsed.props) {\r\n      _props[prop] = (props as any)[prop]\r\n   }\r\n   _props.className = parsed.className;\r\n\r\n   return { props: _props, style: parsed.styles };\r\n}\r\n\r\n\r\nexport default useTagProps"],"names":["cssPropList"],"mappings":";;;;;;;AAcA,MAAM,WAAW,GAAG,CAAqC,KAAsB,KAA0B;AACtG,IAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,CAAC,GAAG,EAAE,KAAK,KAAI;AACnD,QAAA,OAAO,GAAG,KAAK,QAAQ,IAAI,GAAG,KAAK,QAAQ,GAAG,SAAS,GAAG,KAAK;IAClE,CAAC,EAAE,CAAC,CAAC;AAEL,IAAA,MAAM,GAAG,GAAG,WAAW,EAAE;AACzB,IAAA,MAAM,OAAO,GAAG,aAAa,EAAE;AAE/B,IAAA,MAAM,MAAM,GAAG,OAAO,CAAC,MAAK;QACzB,IAAI,MAAM,GAAQ,EAAE;QACpB,IAAI,IAAI,GAAQ,EAAE;AAElB,QAAA,IAAI,KAAK,CAAC,KAAK,IAAI,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,MAAM,GAAG,CAAC,EAAE;YACrD,IAAI,CAAC,SAAS,CAAC,GAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACT,KAAK,CAAC,KAAK,CAChB;QACJ;AAEA,QAAA,KAAK,IAAI,GAAG,IAAI,KAAK,EAAE;AACpB,YAAA,MAAM,IAAI,GAAG,CAAC,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,WAAW,CAAC;AACpF,YAAA,IAAI,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE;gBACrB;YACH;AACA,YAAA,IAAI,GAAG,GAAI,KAAa,CAAC,GAAG,CAAC;AAC7B,YAAA,IAAI,CAACA,aAAW,CAAC,GAAG,CAAC,EAAE;AACpB,gBAAA,MAAM,CAAC,GAAG,CAAC,GAAG,GAAG;YACpB;iBAAO;AACJ,gBAAA,IAAI,CAAC,GAAG,CAAC,GAAG,GAAG;YAClB;QACH;AAEA,QAAA,MAAM,MAAM,GAAG,GAAG,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAM,KAAK,CAAC,GAAG,CAAA,EAAK,IAAI,CAAA,EAAK,KAAK,CAAC,EAAE,GAAK,KAAK,CAAC,KAAK,CAAA,EAAI;AACxE,YAAA,WAAW,EAAE,OAAO,GAAG,CAAC,QAAQ,KAAK,WAAW;YAChD,SAAS,EAAE,GAAG,CAAC,QAAQ;YACvB;AACF,SAAA,CAAC;QAEF,OAAO;AACJ,YAAA,KAAK,EAAE,MAAM;YACb,MAAM;AACN,YAAA,SAAS,EAAE,UAAU,CAClB,KAAK,CAAC,SAAS,GAAG,MAAM,GAAG,KAAK,CAAC,SAAS,GAAG,SAAS,EACtD,KAAK,CAAC,UAAU,EAChB,KAAK,CAAC,SAAS,EACf,MAAM,CAAC,SAAS;SAErB;AACJ,IAAA,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC;IAEd,MAAM,MAAM,GAAQ,EAAE;AACtB,IAAA,KAAK,IAAI,IAAI,IAAI,MAAM,CAAC,KAAK,EAAE;QAC5B,MAAM,CAAC,IAAI,CAAC,GAAI,KAAa,CAAC,IAAI,CAAC;IACtC;AACA,IAAA,MAAM,CAAC,SAAS,GAAG,MAAM,CAAC,SAAS;IAEnC,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE;AACjD;;;;"}

package/breakpoint/BreakpointProvider.cjs

@@ -3,36 +3,42 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-var index = require('../css/index.cjs');
+var index$1 = require('../css/index.cjs');
+var index = require('../Document/index.cjs');
 
-const BreakpointCtx = React.createContext("xs");
+const BreakpointCtx = React.createContext("xl");
 /**
  * SSR-safe breakpoint detection
  */
-const getKey = () => {
-    if (typeof window === 'undefined') {
+const getKey = (doc) => {
+    if (typeof window === "undefined" || typeof document === "undefined") {
         return "xl";
     }
-    const width = window.innerWidth;
-    if (width < index.breakpoints.sm)
+    const width = doc.documentElement.clientWidth || window.innerWidth;
+    if (width < index$1.breakpoints.sm)
         return "xs";
-    if (width < index.breakpoints.md)
+    if (width < index$1.breakpoints.md)
         return "sm";
-    if (width < index.breakpoints.lg)
+    if (width < index$1.breakpoints.lg)
         return "md";
-    if (width < index.breakpoints.xl)
+    if (width < index$1.breakpoints.xl)
         return "lg";
     return "xl";
 };
 const BreakpointProvider = ({ children }) => {
-    const [current, setCurrent] = React.useState("xl");
+    // hydrate-safe initial state
+    const doc = index.useDocument();
+    const [current, setCurrent] = React.useState(() => getKey(doc === null || doc === void 0 ? void 0 : doc.document));
     const handler = React.useCallback(() => {
-        const newKey = getKey();
-        setCurrent(prev => (prev === newKey ? prev : newKey));
-    }, []);
-    React.useEffect(() => {
-        window.addEventListener("resize", handler);
-        handler(); // detect on mount
+        if (doc) {
+            const next = getKey(doc.document);
+            setCurrent(prev => (prev === next ? prev : next));
+        }
+    }, [doc]);
+    // useLayoutEffect avoids visual flicker on first paint
+    React.useLayoutEffect(() => {
+        handler();
+        window.addEventListener("resize", handler, { passive: true });
         return () => window.removeEventListener("resize", handler);
     }, [handler]);
     return (jsxRuntime.jsx(BreakpointCtx.Provider, { value: current, children: children }));

package/breakpoint/BreakpointProvider.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"BreakpointProvider.cjs","sources":["../../src/breakpoint/BreakpointProvider.tsx"],"sourcesContent":["\"use client\";\r\nimport React, { ReactNode, useState, useCallback } from \"react\";\r\nimport { breakpoints } from \"../css\";\r\nimport { BreakpointKeys } from \"../css/types\";\r\n\r\nexport const BreakpointCtx = React.createContext<BreakpointKeys>(\"xs\");\r\n\r\n/**\r\n * SSR-safe breakpoint detection\r\n */\r\nconst getKey = (): BreakpointKeys => {\r\n    if (typeof window === 'undefined') {\r\n        return \"xl\";\r\n    }\r\n\r\n    const width = window.innerWidth;\r\n\r\n    if (width < breakpoints.sm) return \"xs\";\r\n    if (width < breakpoints.md) return \"sm\";\r\n    if (width < breakpoints.lg) return \"md\";\r\n    if (width < breakpoints.xl) return \"lg\";\r\n    return \"xl\";\r\n};\r\n\r\nexport const BreakpointProvider = ({ children }: { children?: ReactNode }) => {\r\n    const [current, setCurrent] = useState<BreakpointKeys>(\"xl\");\r\n\r\n    const handler = useCallback(() => {\r\n        const newKey = getKey();\r\n        setCurrent(prev => (prev === newKey ? prev : newKey));\r\n    }, []);\r\n\r\n    React.useEffect(() => {\r\n        window.addEventListener(\"resize\", handler);\r\n        handler(); // detect on mount\r\n        return () => window.removeEventListener(\"resize\", handler);\r\n    }, [handler]);\r\n\r\n    return (\r\n        <BreakpointCtx.Provider value={current}>\r\n            {children}\r\n        </BreakpointCtx.Provider>\r\n    );\r\n};\r\n"],"names":[],"mappings":";;;;;;;AAKO;AAEP;;AAEG;AACH;AACI;AACI;;AAGJ;AAEA;AAA4B;AAC5B;AAA4B;AAC5B;AAA4B;AAC5B;AAA4B;AAC5B;AACJ;;;AAKI;AACI;AACA;;AAGJ;AACI;;;AAGJ;AAEA;AAKJ;;;"}
+{"version":3,"file":"BreakpointProvider.cjs","sources":["../../src/breakpoint/BreakpointProvider.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport React, {\r\n    ReactNode,\r\n    useState,\r\n    useCallback,\r\n    useLayoutEffect,\r\n} from \"react\";\r\nimport { breakpoints } from \"../css\";\r\nimport { BreakpointKeys } from \"../css/types\";\r\nimport { useDocument } from \"../Document\";\r\n\r\nexport const BreakpointCtx = React.createContext<BreakpointKeys>(\"xl\");\r\n\r\n/**\r\n * SSR-safe breakpoint detection\r\n */\r\nconst getKey = (doc: Document): BreakpointKeys => {\r\n    if (typeof window === \"undefined\" || typeof document === \"undefined\") {\r\n        return \"xl\";\r\n    }\r\n\r\n    const width = doc.documentElement.clientWidth || window.innerWidth;\r\n\r\n    if (width < breakpoints.sm) return \"xs\";\r\n    if (width < breakpoints.md) return \"sm\";\r\n    if (width < breakpoints.lg) return \"md\";\r\n    if (width < breakpoints.xl) return \"lg\";\r\n    return \"xl\";\r\n};\r\n\r\nexport const BreakpointProvider = ({ children }: { children?: ReactNode }) => {\r\n    // hydrate-safe initial state\r\n    const doc = useDocument()\r\n    const [current, setCurrent] = useState<BreakpointKeys>(() => getKey(doc?.document));\r\n\r\n    const handler = useCallback(() => {\r\n        if (doc) {\r\n            const next = getKey(doc.document)\r\n            setCurrent(prev => (prev === next ? prev : next));\r\n        }\r\n    }, [doc]);\r\n\r\n    // useLayoutEffect avoids visual flicker on first paint\r\n    useLayoutEffect(() => {\r\n        handler();\r\n        window.addEventListener(\"resize\", handler, { passive: true });\r\n        return () => window.removeEventListener(\"resize\", handler);\r\n    }, [handler]);\r\n\r\n    return (\r\n        <BreakpointCtx.Provider value={current}>\r\n            {children}\r\n        </BreakpointCtx.Provider>\r\n    );\r\n};\r\n"],"names":[],"mappings":";;;;;;;;AAYO;AAEP;;AAEG;AACH;;AAEQ;;;AAKJ;AAA4B;AAC5B;AAA4B;AAC5B;AAA4B;AAC5B;AAA4B;AAC5B;AACJ;;;AAII;;AAGA;;;AAGQ;;AAER;;;AAII;AACA;;AAEJ;AAEA;AAKJ;;;"}

package/breakpoint/BreakpointProvider.js

@@ -1,17 +1,18 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import React__default, { useState, useCallback } from 'react';
+import React__default, { useState, useCallback, useLayoutEffect } from 'react';
 import { breakpoints } from '../css/index.js';
+import { useDocument } from '../Document/index.js';
 
-const BreakpointCtx = React__default.createContext("xs");
+const BreakpointCtx = React__default.createContext("xl");
 /**
  * SSR-safe breakpoint detection
  */
-const getKey = () => {
-    if (typeof window === 'undefined') {
+const getKey = (doc) => {
+    if (typeof window === "undefined" || typeof document === "undefined") {
         return "xl";
     }
-    const width = window.innerWidth;
+    const width = doc.documentElement.clientWidth || window.innerWidth;
     if (width < breakpoints.sm)
         return "xs";
     if (width < breakpoints.md)
@@ -23,14 +24,19 @@ const getKey = () => {
     return "xl";
 };
 const BreakpointProvider = ({ children }) => {
-    const [current, setCurrent] = useState("xl");
+    // hydrate-safe initial state
+    const doc = useDocument();
+    const [current, setCurrent] = useState(() => getKey(doc === null || doc === void 0 ? void 0 : doc.document));
     const handler = useCallback(() => {
-        const newKey = getKey();
-        setCurrent(prev => (prev === newKey ? prev : newKey));
-    }, []);
-    React__default.useEffect(() => {
-        window.addEventListener("resize", handler);
-        handler(); // detect on mount
+        if (doc) {
+            const next = getKey(doc.document);
+            setCurrent(prev => (prev === next ? prev : next));
+        }
+    }, [doc]);
+    // useLayoutEffect avoids visual flicker on first paint
+    useLayoutEffect(() => {
+        handler();
+        window.addEventListener("resize", handler, { passive: true });
         return () => window.removeEventListener("resize", handler);
     }, [handler]);
     return (jsx(BreakpointCtx.Provider, { value: current, children: children }));

package/breakpoint/BreakpointProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"BreakpointProvider.js","sources":["../../src/breakpoint/BreakpointProvider.tsx"],"sourcesContent":["\"use client\";\r\nimport React, { ReactNode, useState, useCallback } from \"react\";\r\nimport { breakpoints } from \"../css\";\r\nimport { BreakpointKeys } from \"../css/types\";\r\n\r\nexport const BreakpointCtx = React.createContext<BreakpointKeys>(\"xs\");\r\n\r\n/**\r\n * SSR-safe breakpoint detection\r\n */\r\nconst getKey = (): BreakpointKeys => {\r\n    if (typeof window === 'undefined') {\r\n        return \"xl\";\r\n    }\r\n\r\n    const width = window.innerWidth;\r\n\r\n    if (width < breakpoints.sm) return \"xs\";\r\n    if (width < breakpoints.md) return \"sm\";\r\n    if (width < breakpoints.lg) return \"md\";\r\n    if (width < breakpoints.xl) return \"lg\";\r\n    return \"xl\";\r\n};\r\n\r\nexport const BreakpointProvider = ({ children }: { children?: ReactNode }) => {\r\n    const [current, setCurrent] = useState<BreakpointKeys>(\"xl\");\r\n\r\n    const handler = useCallback(() => {\r\n        const newKey = getKey();\r\n        setCurrent(prev => (prev === newKey ? prev : newKey));\r\n    }, []);\r\n\r\n    React.useEffect(() => {\r\n        window.addEventListener(\"resize\", handler);\r\n        handler(); // detect on mount\r\n        return () => window.removeEventListener(\"resize\", handler);\r\n    }, [handler]);\r\n\r\n    return (\r\n        <BreakpointCtx.Provider value={current}>\r\n            {children}\r\n        </BreakpointCtx.Provider>\r\n    );\r\n};\r\n"],"names":[],"mappings":";;;;;AAKO;AAEP;;AAEG;AACH;AACI;AACI;;AAGJ;AAEA;AAA4B;AAC5B;AAA4B;AAC5B;AAA4B;AAC5B;AAA4B;AAC5B;AACJ;;;AAKI;AACI;AACA;;AAGJ;AACI;;;AAGJ;AAEA;AAKJ;;"}
+{"version":3,"file":"BreakpointProvider.js","sources":["../../src/breakpoint/BreakpointProvider.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport React, {\r\n    ReactNode,\r\n    useState,\r\n    useCallback,\r\n    useLayoutEffect,\r\n} from \"react\";\r\nimport { breakpoints } from \"../css\";\r\nimport { BreakpointKeys } from \"../css/types\";\r\nimport { useDocument } from \"../Document\";\r\n\r\nexport const BreakpointCtx = React.createContext<BreakpointKeys>(\"xl\");\r\n\r\n/**\r\n * SSR-safe breakpoint detection\r\n */\r\nconst getKey = (doc: Document): BreakpointKeys => {\r\n    if (typeof window === \"undefined\" || typeof document === \"undefined\") {\r\n        return \"xl\";\r\n    }\r\n\r\n    const width = doc.documentElement.clientWidth || window.innerWidth;\r\n\r\n    if (width < breakpoints.sm) return \"xs\";\r\n    if (width < breakpoints.md) return \"sm\";\r\n    if (width < breakpoints.lg) return \"md\";\r\n    if (width < breakpoints.xl) return \"lg\";\r\n    return \"xl\";\r\n};\r\n\r\nexport const BreakpointProvider = ({ children }: { children?: ReactNode }) => {\r\n    // hydrate-safe initial state\r\n    const doc = useDocument()\r\n    const [current, setCurrent] = useState<BreakpointKeys>(() => getKey(doc?.document));\r\n\r\n    const handler = useCallback(() => {\r\n        if (doc) {\r\n            const next = getKey(doc.document)\r\n            setCurrent(prev => (prev === next ? prev : next));\r\n        }\r\n    }, [doc]);\r\n\r\n    // useLayoutEffect avoids visual flicker on first paint\r\n    useLayoutEffect(() => {\r\n        handler();\r\n        window.addEventListener(\"resize\", handler, { passive: true });\r\n        return () => window.removeEventListener(\"resize\", handler);\r\n    }, [handler]);\r\n\r\n    return (\r\n        <BreakpointCtx.Provider value={current}>\r\n            {children}\r\n        </BreakpointCtx.Provider>\r\n    );\r\n};\r\n"],"names":[],"mappings":";;;;;;AAYO;AAEP;;AAEG;AACH;;AAEQ;;;AAKJ;AAA4B;AAC5B;AAA4B;AAC5B;AAA4B;AAC5B;AAA4B;AAC5B;AACJ;;;AAII;;AAGA;;;AAGQ;;AAER;;;AAII;AACA;;AAEJ;AAEA;AAKJ;;"}

package/hooks/usePortal.cjs

@@ -7,10 +7,12 @@ var client = require('react-dom/client');
 var core = require('../theme/core.cjs');
 require('../css/getValue.cjs');
 require('oncss');
-var ThemeProvider = require('../theme/ThemeProvider.cjs');
+require('../theme/ThemeProvider.cjs');
 require('react-state-bucket');
 var AppRootProvider = require('../AppRoot/AppRootProvider.cjs');
 var index = require('../Document/index.cjs');
+var index$1 = require('../AppRoot/index.cjs');
+var CSSCacheProvider = require('../css/CSSCacheProvider.cjs');
 
 function usePortal(children, options) {
     options = options || {};
@@ -19,8 +21,9 @@ function usePortal(children, options) {
     }
     const [mounted, setMounted] = React.useState(options.autoMount);
     const theme = core.useTheme();
-    const appRoot = AppRootProvider.useAppRootElement();
     const doc = index.useDocument();
+    const appRoot = AppRootProvider.useAppRootElement();
+    const cacheId = CSSCacheProvider.useCSSCacheId();
     const { el, root } = React.useMemo(() => {
         const el = doc.document.createElement("div");
         const root = client.createRoot(el);
@@ -37,19 +40,19 @@ function usePortal(children, options) {
         if (!cont.contains(el)) {
             cont.appendChild(el);
         }
-        root.render(jsxRuntime.jsx(ThemeProvider, { theme: theme.name, children: children }));
+        root.render(jsxRuntime.jsx(index$1, { theme: theme.name, CSSCacheId: cacheId, document: doc.document, children: children }));
     };
     const unmount = () => {
         root.render(null);
         el.remove();
     };
     React.useEffect(() => {
-        mounted ? mount() : unmount();
-    }, [mounted]);
+        (mounted && appRoot) ? mount() : unmount();
+    }, [mounted, appRoot]);
     React.useEffect(() => {
-        if (mounted)
+        if (mounted && appRoot)
             mount();
-    }, [children]);
+    }, [children, appRoot]);
     React.useEffect(() => {
         return () => {
             unmount();

package/hooks/usePortal.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"usePortal.cjs","sources":["../../src/hooks/usePortal.tsx"],"sourcesContent":["\"use client\";\r\nimport React, { useEffect, useMemo } from \"react\";\r\nimport { createRoot } from \"react-dom/client\";\r\nimport { ThemeProvider, useTheme } from \"../theme\";\r\nimport { useAppRootElement } from \"../AppRoot/AppRootProvider\";\r\nimport { useDocument } from \"../Document\";\r\n\r\nexport type UsePortalOptions = {\r\n   container?: HTMLElement;\r\n   autoMount?: boolean;\r\n}\r\n\r\nfunction usePortal(children: React.ReactNode, options?: UsePortalOptions) {\r\n   options = options || {};\r\n   if (options.autoMount === undefined) {\r\n      options.autoMount = true;\r\n   }\r\n   const [mounted, setMounted] = React.useState(options.autoMount);\r\n   const theme = useTheme();\r\n   const appRoot = useAppRootElement();\r\n   const doc = useDocument()\r\n   const { el, root } = useMemo(() => {\r\n      const el = doc.document.createElement(\"div\");\r\n      const root = createRoot(el);\r\n      return { el, root };\r\n   }, [options.autoMount]);\r\n\r\n   const container = () => {\r\n      const container = options?.container || appRoot\r\n      if (!container) throw new Error(`Container not found for portal. Please ensure that AppRoot is present in the application tree.`);\r\n      return container;\r\n   }\r\n\r\n   const mount = () => {\r\n      const cont = container();\r\n      if (!cont.contains(el)) {\r\n         cont.appendChild(el);\r\n      }\r\n      root.render(<ThemeProvider theme={theme.name}>{children}</ThemeProvider>)\r\n   }\r\n\r\n   const unmount = () => {\r\n      root.render(null)\r\n      el.remove();\r\n   }\r\n\r\n   useEffect(() => {\r\n      mounted ? mount() : unmount()\r\n   }, [mounted]);\r\n\r\n   useEffect(() => {\r\n      if (mounted) mount()\r\n   }, [children]);\r\n\r\n   useEffect(() => {\r\n      return () => {\r\n         unmount()\r\n      };\r\n   }, []);\r\n\r\n   return {\r\n      isMount: () => mounted,\r\n      mount: () => setMounted(true),\r\n      unmount: () => setMounted(false)\r\n   }\r\n}\r\n\r\n\r\nexport default usePortal;"],"names":[],"mappings":";;;;;;;;;;;;;;AAYA;AACG;AACA;AACG;;AAEH;AACA;AACA;AACA;;;AAGG;AACA;AACH;;AAGG;AACA;AAAgB;AAChB;AACH;;AAGG;;AAEG;;AAEH;AACH;;AAGG;;AAEH;;;AAIA;;AAGG;AAAa;AAChB;;AAGG;AACG;AACH;;;AAIA;AACA;AACA;;AAEN;;"}
+{"version":3,"file":"usePortal.cjs","sources":["../../src/hooks/usePortal.tsx"],"sourcesContent":["\"use client\";\r\nimport React, { useEffect, useMemo } from \"react\";\r\nimport { createRoot } from \"react-dom/client\";\r\nimport { ThemeProvider, useTheme } from \"../theme\";\r\nimport { useAppRootElement } from \"../AppRoot/AppRootProvider\";\r\nimport { useDocument } from \"../Document\";\r\nimport AppRoot from \"../AppRoot\";\r\nimport { useCSSCacheId } from \"../css/CSSCacheProvider\";\r\n\r\nexport type UsePortalOptions = {\r\n   container?: HTMLElement;\r\n   autoMount?: boolean;\r\n}\r\n\r\nfunction usePortal(children: React.ReactNode, options?: UsePortalOptions) {\r\n   options = options || {};\r\n   if (options.autoMount === undefined) {\r\n      options.autoMount = true;\r\n   }\r\n   const [mounted, setMounted] = React.useState(options.autoMount);\r\n   const theme = useTheme();\r\n   const doc = useDocument()\r\n   const appRoot = useAppRootElement();\r\n   const cacheId = useCSSCacheId()\r\n\r\n   const { el, root } = useMemo(() => {\r\n      const el = doc.document.createElement(\"div\");\r\n      const root = createRoot(el);\r\n      return { el, root };\r\n   }, [options.autoMount]);\r\n\r\n   const container = () => {\r\n      const container = options?.container || appRoot\r\n      if (!container) throw new Error(`Container not found for portal. Please ensure that AppRoot is present in the application tree.`);\r\n      return container;\r\n   }\r\n\r\n   const mount = () => {\r\n      const cont = container();\r\n      if (!cont.contains(el)) {\r\n         cont.appendChild(el);\r\n      }\r\n      root.render(<AppRoot theme={theme.name} CSSCacheId={cacheId} document={doc.document}>{children}</AppRoot>)\r\n   }\r\n\r\n   const unmount = () => {\r\n      root.render(null)\r\n      el.remove();\r\n   }\r\n\r\n   useEffect(() => {\r\n      (mounted && appRoot) ? mount() : unmount()\r\n   }, [mounted, appRoot]);\r\n\r\n   useEffect(() => {\r\n      if (mounted && appRoot) mount()\r\n   }, [children, appRoot]);\r\n\r\n   useEffect(() => {\r\n      return () => {\r\n         unmount()\r\n      };\r\n   }, []);\r\n\r\n   return {\r\n      isMount: () => mounted,\r\n      mount: () => setMounted(true),\r\n      unmount: () => setMounted(false)\r\n   }\r\n}\r\n\r\n\r\nexport default usePortal;"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAcA;AACG;AACA;AACG;;AAEH;AACA;AACA;AACA;AACA;;;AAIG;AACA;AACH;;AAGG;AACA;AAAgB;AAChB;AACH;;AAGG;;AAEG;;;AAGN;;AAGG;;AAEH;;AAGG;AACH;;;AAG2B;AAC3B;;AAGG;AACG;AACH;;;AAIA;AACA;AACA;;AAEN;;"}

package/hooks/usePortal.js

@@ -5,10 +5,12 @@ import { createRoot } from 'react-dom/client';
 import { useTheme } from '../theme/core.js';
 import '../css/getValue.js';
 import 'oncss';
-import ThemeProvider from '../theme/ThemeProvider.js';
+import '../theme/ThemeProvider.js';
 import 'react-state-bucket';
 import { useAppRootElement } from '../AppRoot/AppRootProvider.js';
 import { useDocument } from '../Document/index.js';
+import AppRoot from '../AppRoot/index.js';
+import { useCSSCacheId } from '../css/CSSCacheProvider.js';
 
 function usePortal(children, options) {
     options = options || {};
@@ -17,8 +19,9 @@ function usePortal(children, options) {
     }
     const [mounted, setMounted] = React__default.useState(options.autoMount);
     const theme = useTheme();
-    const appRoot = useAppRootElement();
     const doc = useDocument();
+    const appRoot = useAppRootElement();
+    const cacheId = useCSSCacheId();
     const { el, root } = useMemo(() => {
         const el = doc.document.createElement("div");
         const root = createRoot(el);
@@ -35,19 +38,19 @@ function usePortal(children, options) {
         if (!cont.contains(el)) {
             cont.appendChild(el);
         }
-        root.render(jsx(ThemeProvider, { theme: theme.name, children: children }));
+        root.render(jsx(AppRoot, { theme: theme.name, CSSCacheId: cacheId, document: doc.document, children: children }));
     };
     const unmount = () => {
         root.render(null);
         el.remove();
     };
     useEffect(() => {
-        mounted ? mount() : unmount();
-    }, [mounted]);
+        (mounted && appRoot) ? mount() : unmount();
+    }, [mounted, appRoot]);
     useEffect(() => {
-        if (mounted)
+        if (mounted && appRoot)
             mount();
-    }, [children]);
+    }, [children, appRoot]);
     useEffect(() => {
         return () => {
             unmount();

package/hooks/usePortal.js.map

@@ -1 +1 @@
-{"version":3,"file":"usePortal.js","sources":["../../src/hooks/usePortal.tsx"],"sourcesContent":["\"use client\";\r\nimport React, { useEffect, useMemo } from \"react\";\r\nimport { createRoot } from \"react-dom/client\";\r\nimport { ThemeProvider, useTheme } from \"../theme\";\r\nimport { useAppRootElement } from \"../AppRoot/AppRootProvider\";\r\nimport { useDocument } from \"../Document\";\r\n\r\nexport type UsePortalOptions = {\r\n   container?: HTMLElement;\r\n   autoMount?: boolean;\r\n}\r\n\r\nfunction usePortal(children: React.ReactNode, options?: UsePortalOptions) {\r\n   options = options || {};\r\n   if (options.autoMount === undefined) {\r\n      options.autoMount = true;\r\n   }\r\n   const [mounted, setMounted] = React.useState(options.autoMount);\r\n   const theme = useTheme();\r\n   const appRoot = useAppRootElement();\r\n   const doc = useDocument()\r\n   const { el, root } = useMemo(() => {\r\n      const el = doc.document.createElement(\"div\");\r\n      const root = createRoot(el);\r\n      return { el, root };\r\n   }, [options.autoMount]);\r\n\r\n   const container = () => {\r\n      const container = options?.container || appRoot\r\n      if (!container) throw new Error(`Container not found for portal. Please ensure that AppRoot is present in the application tree.`);\r\n      return container;\r\n   }\r\n\r\n   const mount = () => {\r\n      const cont = container();\r\n      if (!cont.contains(el)) {\r\n         cont.appendChild(el);\r\n      }\r\n      root.render(<ThemeProvider theme={theme.name}>{children}</ThemeProvider>)\r\n   }\r\n\r\n   const unmount = () => {\r\n      root.render(null)\r\n      el.remove();\r\n   }\r\n\r\n   useEffect(() => {\r\n      mounted ? mount() : unmount()\r\n   }, [mounted]);\r\n\r\n   useEffect(() => {\r\n      if (mounted) mount()\r\n   }, [children]);\r\n\r\n   useEffect(() => {\r\n      return () => {\r\n         unmount()\r\n      };\r\n   }, []);\r\n\r\n   return {\r\n      isMount: () => mounted,\r\n      mount: () => setMounted(true),\r\n      unmount: () => setMounted(false)\r\n   }\r\n}\r\n\r\n\r\nexport default usePortal;"],"names":[],"mappings":";;;;;;;;;;;;AAYA;AACG;AACA;AACG;;AAEH;AACA;AACA;AACA;;;AAGG;AACA;AACH;;AAGG;AACA;AAAgB;AAChB;AACH;;AAGG;;AAEG;;AAEH;AACH;;AAGG;;AAEH;;;AAIA;;AAGG;AAAa;AAChB;;AAGG;AACG;AACH;;;AAIA;AACA;AACA;;AAEN;;"}
+{"version":3,"file":"usePortal.js","sources":["../../src/hooks/usePortal.tsx"],"sourcesContent":["\"use client\";\r\nimport React, { useEffect, useMemo } from \"react\";\r\nimport { createRoot } from \"react-dom/client\";\r\nimport { ThemeProvider, useTheme } from \"../theme\";\r\nimport { useAppRootElement } from \"../AppRoot/AppRootProvider\";\r\nimport { useDocument } from \"../Document\";\r\nimport AppRoot from \"../AppRoot\";\r\nimport { useCSSCacheId } from \"../css/CSSCacheProvider\";\r\n\r\nexport type UsePortalOptions = {\r\n   container?: HTMLElement;\r\n   autoMount?: boolean;\r\n}\r\n\r\nfunction usePortal(children: React.ReactNode, options?: UsePortalOptions) {\r\n   options = options || {};\r\n   if (options.autoMount === undefined) {\r\n      options.autoMount = true;\r\n   }\r\n   const [mounted, setMounted] = React.useState(options.autoMount);\r\n   const theme = useTheme();\r\n   const doc = useDocument()\r\n   const appRoot = useAppRootElement();\r\n   const cacheId = useCSSCacheId()\r\n\r\n   const { el, root } = useMemo(() => {\r\n      const el = doc.document.createElement(\"div\");\r\n      const root = createRoot(el);\r\n      return { el, root };\r\n   }, [options.autoMount]);\r\n\r\n   const container = () => {\r\n      const container = options?.container || appRoot\r\n      if (!container) throw new Error(`Container not found for portal. Please ensure that AppRoot is present in the application tree.`);\r\n      return container;\r\n   }\r\n\r\n   const mount = () => {\r\n      const cont = container();\r\n      if (!cont.contains(el)) {\r\n         cont.appendChild(el);\r\n      }\r\n      root.render(<AppRoot theme={theme.name} CSSCacheId={cacheId} document={doc.document}>{children}</AppRoot>)\r\n   }\r\n\r\n   const unmount = () => {\r\n      root.render(null)\r\n      el.remove();\r\n   }\r\n\r\n   useEffect(() => {\r\n      (mounted && appRoot) ? mount() : unmount()\r\n   }, [mounted, appRoot]);\r\n\r\n   useEffect(() => {\r\n      if (mounted && appRoot) mount()\r\n   }, [children, appRoot]);\r\n\r\n   useEffect(() => {\r\n      return () => {\r\n         unmount()\r\n      };\r\n   }, []);\r\n\r\n   return {\r\n      isMount: () => mounted,\r\n      mount: () => setMounted(true),\r\n      unmount: () => setMounted(false)\r\n   }\r\n}\r\n\r\n\r\nexport default usePortal;"],"names":[],"mappings":";;;;;;;;;;;;;;AAcA;AACG;AACA;AACG;;AAEH;AACA;AACA;AACA;AACA;;;AAIG;AACA;AACH;;AAGG;AACA;AAAgB;AAChB;AACH;;AAGG;;AAEG;;;AAGN;;AAGG;;AAEH;;AAGG;AACH;;;AAG2B;AAC3B;;AAGG;AACG;AACH;;;AAIA;AACA;AACA;;AAEN;;"}

package/hooks/useTransition/index.cjs

@@ -22,19 +22,19 @@ const getVariant = (rect, variant) => {
 const useTransition = (_a) => {
     var { open } = _a, props = tslib.__rest(_a, ["open"]);
     let { disableInitialTransition = false, variant = "fade", duration = 400, delay, ease, easing, exitOnUnmount = false, onOpen, onOpened, onClose, onClosed, onState } = props;
-    const doc = index.useDocument().document;
+    const doc = index.useDocument();
     const cacheId = CSSCacheProvider.useCSSCacheId();
     let _ease = ease || useAnimation.animationEases[easing] || useAnimation.animationEases.bounce;
     const id = "xui-transition-" + React.useId();
     const [state, setState] = React.useState({
         initial: false,
-        classname: style({ visibility: "hidden" }, doc, cacheId),
+        classname: style({ visibility: "hidden" }, doc.document, cacheId),
         variant: variant,
         rect: null,
         stage: open ? "open" : "closed",
         unmounted: false,
     });
-    const getEle = () => doc.querySelector(`[data-transition="${id}"]`);
+    const getEle = () => doc.document.querySelector(`[data-transition="${id}"]`);
     const getBoundary = () => { var _a; return state.rect || ((_a = getEle()) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) || new DOMRect(0, 0, 0, 0); };
     React.useEffect(() => {
         if (exitOnUnmount && state.stage === 'closed') {
@@ -42,7 +42,7 @@ const useTransition = (_a) => {
                 setState(s => (Object.assign(Object.assign({}, s), { initial: false, classname: "", unmounted: true, variant: variant })));
             }
             else {
-                setState(s => (Object.assign(Object.assign({}, s), { variant: variant, classname: style({ visibility: "hidden" }, doc, cacheId), stage: "open" })));
+                setState(s => (Object.assign(Object.assign({}, s), { variant: variant, classname: style({ visibility: "hidden" }, doc.document, cacheId), stage: "open" })));
             }
         }
     }, [open, state.stage, exitOnUnmount, variant]);
@@ -56,7 +56,7 @@ const useTransition = (_a) => {
         const rect = getBoundary();
         let { from } = getVariant(rect, state.variant);
         if (open && !state.initial) {
-            setState(s => (Object.assign(Object.assign({}, s), { classname: (!disableInitialTransition || state.unmounted) ? style(from, doc, cacheId) : "", initial: true, rect: rect })));
+            setState(s => (Object.assign(Object.assign({}, s), { classname: (!disableInitialTransition || state.unmounted) ? style(from, doc.document, cacheId) : "", initial: true, rect: rect })));
             let stimer = null;
             let etimer = null;
             ele.ontransitionstart = () => {
@@ -81,7 +81,7 @@ const useTransition = (_a) => {
             };
         }
         else if (!state.initial) {
-            setState(s => (Object.assign(Object.assign({}, s), { classname: style(from, doc, cacheId), rect: rect })));
+            setState(s => (Object.assign(Object.assign({}, s), { classname: style(from, doc.document, cacheId), rect: rect })));
         }
     }, [open, state.initial, state.stage, exitOnUnmount]);
     React.useEffect(() => {
@@ -91,7 +91,7 @@ const useTransition = (_a) => {
             let _css = open ? to : from;
             let trans = ` ${duration}ms ${_ease} ${delay || 0}ms`;
             let _ = Object.assign(Object.assign({}, _css), { transition: Object.keys(_css || {}).map(k => oncss.formatCSSProp(k)).join(trans + ", ") + trans });
-            setState(s => (Object.assign(Object.assign({}, s), { classname: style(_, doc, cacheId), variant: _variant })));
+            setState(s => (Object.assign(Object.assign({}, s), { classname: style(_, doc.document, cacheId), variant: _variant })));
         }
     }, [open, state.initial, variant]);
     return {

package/hooks/useTransition/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/hooks/useTransition/index.ts"],"sourcesContent":["\"use client\";\r\nimport { useState, useEffect, useId } from 'react';\r\nimport { animationEases } from '../useAnimation';\r\nimport { css } from '../../css';\r\nimport { formatCSSProp } from 'oncss';\r\nimport { CSSProps } from '../../css/types';\r\nimport * as variants from './variants'\r\nimport { useDocument } from '../../Document';\r\nimport { useCSSCacheId } from '../../css/CSSCacheProvider';\r\n\r\nexport type UseTransitionVariantTypes = keyof typeof variants\r\nexport type UseTransitionState = \"open\" | \"opened\" | \"close\" | \"closed\"\r\n\r\nexport type UseTransitionVariant = (rect: DOMRect) => ({ from: CSSProps, to: CSSProps })\r\n\r\nexport type UseTransitionProps = {\r\n   open: boolean;\r\n   variant: UseTransitionVariant | UseTransitionVariantTypes;\r\n   ease?: string;\r\n   easing?: keyof typeof animationEases;\r\n   duration?: number;\r\n   delay?: number;\r\n   disableInitialTransition?: boolean;\r\n   exitOnUnmount?: boolean;\r\n   onOpen?: () => void;\r\n   onOpened?: () => void;\r\n   onClose?: () => void;\r\n   onClosed?: () => void;\r\n   onState?: (state: UseTransitionState) => void;\r\n}\r\n\r\n\r\nconst style = (obj = {}, doc: Document, cacheId: string) => {\r\n   return css(obj, { selector: \"#\", container: doc, cacheId }).classname;\r\n}\r\n\r\nconst getVariant = (rect: DOMRect | null, variant: UseTransitionProps['variant']) => {\r\n   let fn = typeof variant === 'string' ? variants[variant] : variant\r\n   if (!fn) throw new Error(`Transition variant \"${variant}\" not found.`)\r\n   return fn(rect as DOMRect);\r\n}\r\n\r\nconst useTransition = ({ open, ...props }: UseTransitionProps) => {\r\n   let {\r\n      disableInitialTransition = false,\r\n      variant = \"fade\",\r\n      duration = 400,\r\n      delay,\r\n      ease,\r\n      easing,\r\n      exitOnUnmount = false,\r\n      onOpen,\r\n      onOpened,\r\n      onClose,\r\n      onClosed,\r\n      onState\r\n   } = props\r\n   const doc = useDocument().document;\r\n   const cacheId = useCSSCacheId()\r\n   let _ease = ease || (animationEases as any)[easing as any] || animationEases.bounce\r\n   const id = \"xui-transition-\" + useId()\r\n   const [state, setState] = useState({\r\n      initial: false,\r\n      classname: style({ visibility: \"hidden\" }, doc, cacheId),\r\n      variant: variant,\r\n      rect: null as DOMRect | null,\r\n      stage: open ? \"open\" : \"closed\",\r\n      unmounted: false,\r\n   })\r\n\r\n   const getEle = () => doc.querySelector(`[data-transition=\"${id}\"]`) as HTMLElement;\r\n   const getBoundary = () => state.rect || getEle()?.getBoundingClientRect() || new DOMRect(0, 0, 0, 0);\r\n\r\n   useEffect(() => {\r\n      if (exitOnUnmount && state.stage === 'closed') {\r\n         if (!open) {\r\n            setState(s => ({\r\n               ...s,\r\n               initial: false,\r\n               classname: \"\",\r\n               unmounted: true,\r\n               variant: variant,\r\n            }))\r\n         } else {\r\n            setState(s => ({\r\n               ...s,\r\n               variant: variant,\r\n               classname: style({ visibility: \"hidden\" }, doc, cacheId),\r\n               stage: \"open\",\r\n            }))\r\n         }\r\n      }\r\n   }, [open, state.stage, exitOnUnmount, variant])\r\n\r\n   // initial effect\r\n   useEffect(() => {\r\n      const ele = getEle()\r\n      if (!ele) return\r\n      if (exitOnUnmount && state.stage === 'closed') return\r\n\r\n      const rect = getBoundary();\r\n      let { from } = getVariant(rect, state.variant)\r\n      if (open && !state.initial) {\r\n         setState(s => ({\r\n            ...s,\r\n            classname: (!disableInitialTransition || state.unmounted) ? style(from, doc, cacheId) : \"\",\r\n            initial: true,\r\n            rect: rect,\r\n         }))\r\n         let stimer: any = null\r\n         let etimer: any = null\r\n         ele.ontransitionstart = () => {\r\n            clearTimeout(stimer)\r\n            stimer = setTimeout(() => {\r\n               const isOpen = ele.getAttribute('data-transition-state') === 'open';\r\n               (onOpen && isOpen) && onOpen();\r\n               (onClose && !isOpen) && onClose()\r\n               onState && onState(isOpen ? \"open\" : \"close\")\r\n               setState(s => ({\r\n                  ...s,\r\n                  stage: isOpen ? \"open\" : \"close\"\r\n               }))\r\n            }, 1)\r\n         }\r\n\r\n         ele.ontransitionend = () => {\r\n            clearTimeout(etimer)\r\n            etimer = setTimeout(() => {\r\n               const isOpen = ele.getAttribute('data-transition-state') === 'open';\r\n               (onOpened && isOpen) && onOpened();\r\n               (onClosed && !isOpen) && onClosed();\r\n               onState && onState(isOpen ? \"opened\" : \"closed\")\r\n               setState(s => ({\r\n                  ...s,\r\n                  stage: isOpen ? \"opened\" : \"closed\"\r\n               }))\r\n            }, 1)\r\n         }\r\n      } else if (!state.initial) {\r\n         setState(s => ({\r\n            ...s,\r\n            classname: style(from, doc, cacheId),\r\n            rect: rect,\r\n         }))\r\n      }\r\n   }, [open, state.initial, state.stage, exitOnUnmount])\r\n\r\n\r\n   useEffect(() => {\r\n      if (state.initial) {\r\n         let _variant = state.variant !== variant ? variant : state.variant\r\n         const { from, to } = getVariant(state.rect, _variant)\r\n         let _css: CSSProps = open ? to : from\r\n         let trans = ` ${duration}ms ${_ease} ${delay || 0}ms`\r\n         let _ = {\r\n            ..._css,\r\n            transition: Object.keys(_css || {}).map(k => formatCSSProp(k)).join(trans + \", \") + trans,\r\n         }\r\n         setState(s => ({\r\n            ...s,\r\n            classname: style(_, doc, cacheId),\r\n            variant: _variant\r\n         }))\r\n      }\r\n   }, [open, state.initial, variant])\r\n\r\n   return {\r\n      exited: exitOnUnmount && state.stage === 'closed',\r\n      props: {\r\n         'id': state.classname,\r\n         'data-transition': id,\r\n         'data-transition-state': open ? 'open' : 'close',\r\n      }\r\n   }\r\n}\r\n\r\n\r\nexport default useTransition"],"names":[],"mappings":";;;;;;;;;;;;AAgCA;AACG;AACH;AAEA;AACG;AACA;AAAS;AACT;AACH;AAEA;AAAuB;AACpB;AAcA;AACA;AACA;AACA;AACA;AACG;AACA;AACA;AACA;;AAEA;AACF;AAED;AACA;;;;;;;AAaS;;;AAQT;;;AAIG;AACA;;AACA;;AAEA;AACA;AACA;AACG;;;AAQA;;AAEG;;AAEG;;AAEA;;;AAMN;AAEA;;AAEG;;AAEG;;AAEA;;;AAMN;;AACI;;;AAOV;;AAIG;AACG;AACA;;;AAGA;;;;;AAaH;AACA;;AAEG;;AAEF;;AAEP;;"}
+{"version":3,"file":"index.cjs","sources":["../../../src/hooks/useTransition/index.ts"],"sourcesContent":["\"use client\";\r\nimport { useState, useEffect, useId } from 'react';\r\nimport { animationEases } from '../useAnimation';\r\nimport { css } from '../../css';\r\nimport { formatCSSProp } from 'oncss';\r\nimport { CSSProps } from '../../css/types';\r\nimport * as variants from './variants'\r\nimport { useDocument } from '../../Document';\r\nimport { useCSSCacheId } from '../../css/CSSCacheProvider';\r\n\r\nexport type UseTransitionVariantTypes = keyof typeof variants\r\nexport type UseTransitionState = \"open\" | \"opened\" | \"close\" | \"closed\"\r\n\r\nexport type UseTransitionVariant = (rect: DOMRect) => ({ from: CSSProps, to: CSSProps })\r\n\r\nexport type UseTransitionProps = {\r\n   open: boolean;\r\n   variant: UseTransitionVariant | UseTransitionVariantTypes;\r\n   ease?: string;\r\n   easing?: keyof typeof animationEases;\r\n   duration?: number;\r\n   delay?: number;\r\n   disableInitialTransition?: boolean;\r\n   exitOnUnmount?: boolean;\r\n   onOpen?: () => void;\r\n   onOpened?: () => void;\r\n   onClose?: () => void;\r\n   onClosed?: () => void;\r\n   onState?: (state: UseTransitionState) => void;\r\n}\r\n\r\n\r\nconst style = (obj = {}, doc: Document, cacheId: string) => {\r\n   return css(obj, { selector: \"#\", container: doc, cacheId }).classname;\r\n}\r\n\r\nconst getVariant = (rect: DOMRect | null, variant: UseTransitionProps['variant']) => {\r\n   let fn = typeof variant === 'string' ? variants[variant] : variant\r\n   if (!fn) throw new Error(`Transition variant \"${variant}\" not found.`)\r\n   return fn(rect as DOMRect);\r\n}\r\n\r\nconst useTransition = ({ open, ...props }: UseTransitionProps) => {\r\n   let {\r\n      disableInitialTransition = false,\r\n      variant = \"fade\",\r\n      duration = 400,\r\n      delay,\r\n      ease,\r\n      easing,\r\n      exitOnUnmount = false,\r\n      onOpen,\r\n      onOpened,\r\n      onClose,\r\n      onClosed,\r\n      onState\r\n   } = props\r\n   const doc = useDocument();\r\n   const cacheId = useCSSCacheId()\r\n   let _ease = ease || (animationEases as any)[easing as any] || animationEases.bounce\r\n   const id = \"xui-transition-\" + useId()\r\n   const [state, setState] = useState({\r\n      initial: false,\r\n      classname: style({ visibility: \"hidden\" }, doc.document, cacheId),\r\n      variant: variant,\r\n      rect: null as DOMRect | null,\r\n      stage: open ? \"open\" : \"closed\",\r\n      unmounted: false,\r\n   })\r\n\r\n   const getEle = () => doc.document.querySelector(`[data-transition=\"${id}\"]`) as HTMLElement;\r\n   const getBoundary = () => state.rect || getEle()?.getBoundingClientRect() || new DOMRect(0, 0, 0, 0);\r\n\r\n   useEffect(() => {\r\n      if (exitOnUnmount && state.stage === 'closed') {\r\n         if (!open) {\r\n            setState(s => ({\r\n               ...s,\r\n               initial: false,\r\n               classname: \"\",\r\n               unmounted: true,\r\n               variant: variant,\r\n            }))\r\n         } else {\r\n            setState(s => ({\r\n               ...s,\r\n               variant: variant,\r\n               classname: style({ visibility: \"hidden\" }, doc.document, cacheId),\r\n               stage: \"open\",\r\n            }))\r\n         }\r\n      }\r\n   }, [open, state.stage, exitOnUnmount, variant])\r\n\r\n   // initial effect\r\n   useEffect(() => {\r\n      const ele = getEle()\r\n      if (!ele) return\r\n      if (exitOnUnmount && state.stage === 'closed') return\r\n\r\n      const rect = getBoundary();\r\n      let { from } = getVariant(rect, state.variant)\r\n      if (open && !state.initial) {\r\n         setState(s => ({\r\n            ...s,\r\n            classname: (!disableInitialTransition || state.unmounted) ? style(from, doc.document, cacheId) : \"\",\r\n            initial: true,\r\n            rect: rect,\r\n         }))\r\n         let stimer: any = null\r\n         let etimer: any = null\r\n         ele.ontransitionstart = () => {\r\n            clearTimeout(stimer)\r\n            stimer = setTimeout(() => {\r\n               const isOpen = ele.getAttribute('data-transition-state') === 'open';\r\n               (onOpen && isOpen) && onOpen();\r\n               (onClose && !isOpen) && onClose()\r\n               onState && onState(isOpen ? \"open\" : \"close\")\r\n               setState(s => ({\r\n                  ...s,\r\n                  stage: isOpen ? \"open\" : \"close\"\r\n               }))\r\n            }, 1)\r\n         }\r\n\r\n         ele.ontransitionend = () => {\r\n            clearTimeout(etimer)\r\n            etimer = setTimeout(() => {\r\n               const isOpen = ele.getAttribute('data-transition-state') === 'open';\r\n               (onOpened && isOpen) && onOpened();\r\n               (onClosed && !isOpen) && onClosed();\r\n               onState && onState(isOpen ? \"opened\" : \"closed\")\r\n               setState(s => ({\r\n                  ...s,\r\n                  stage: isOpen ? \"opened\" : \"closed\"\r\n               }))\r\n            }, 1)\r\n         }\r\n      } else if (!state.initial) {\r\n         setState(s => ({\r\n            ...s,\r\n            classname: style(from, doc.document, cacheId),\r\n            rect: rect,\r\n         }))\r\n      }\r\n   }, [open, state.initial, state.stage, exitOnUnmount])\r\n\r\n\r\n   useEffect(() => {\r\n      if (state.initial) {\r\n         let _variant = state.variant !== variant ? variant : state.variant\r\n         const { from, to } = getVariant(state.rect, _variant)\r\n         let _css: CSSProps = open ? to : from\r\n         let trans = ` ${duration}ms ${_ease} ${delay || 0}ms`\r\n         let _ = {\r\n            ..._css,\r\n            transition: Object.keys(_css || {}).map(k => formatCSSProp(k)).join(trans + \", \") + trans,\r\n         }\r\n         setState(s => ({\r\n            ...s,\r\n            classname: style(_, doc.document, cacheId),\r\n            variant: _variant\r\n         }))\r\n      }\r\n   }, [open, state.initial, variant])\r\n\r\n   return {\r\n      exited: exitOnUnmount && state.stage === 'closed',\r\n      props: {\r\n         'id': state.classname,\r\n         'data-transition': id,\r\n         'data-transition-state': open ? 'open' : 'close',\r\n      }\r\n   }\r\n}\r\n\r\n\r\nexport default useTransition"],"names":[],"mappings":";;;;;;;;;;;;AAgCA;AACG;AACH;AAEA;AACG;AACA;AAAS;AACT;AACH;AAEA;AAAuB;AACpB;AAcA;AACA;AACA;AACA;AACA;AACG;AACA;AACA;AACA;;AAEA;AACF;AAED;AACA;;;;;;;AAaS;;;AAQT;;;AAIG;AACA;;AACA;;AAEA;AACA;AACA;;;;AASG;;AAEG;;AAEG;;AAEA;;;AAMN;AAEA;;AAEG;;AAEG;;AAEA;;;AAMN;;AACI;;;AAOV;;AAIG;AACG;AACA;;;AAGA;;;;;AAaH;AACA;;AAEG;;AAEF;;AAEP;;"}

package/hooks/useTransition/index.js

@@ -20,19 +20,19 @@ const getVariant = (rect, variant) => {
 const useTransition = (_a) => {
     var { open } = _a, props = __rest(_a, ["open"]);
     let { disableInitialTransition = false, variant = "fade", duration = 400, delay, ease, easing, exitOnUnmount = false, onOpen, onOpened, onClose, onClosed, onState } = props;
-    const doc = useDocument().document;
+    const doc = useDocument();
     const cacheId = useCSSCacheId();
     let _ease = ease || animationEases[easing] || animationEases.bounce;
     const id = "xui-transition-" + useId();
     const [state, setState] = useState({
         initial: false,
-        classname: style({ visibility: "hidden" }, doc, cacheId),
+        classname: style({ visibility: "hidden" }, doc.document, cacheId),
         variant: variant,
         rect: null,
         stage: open ? "open" : "closed",
         unmounted: false,
     });
-    const getEle = () => doc.querySelector(`[data-transition="${id}"]`);
+    const getEle = () => doc.document.querySelector(`[data-transition="${id}"]`);
     const getBoundary = () => { var _a; return state.rect || ((_a = getEle()) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) || new DOMRect(0, 0, 0, 0); };
     useEffect(() => {
         if (exitOnUnmount && state.stage === 'closed') {
@@ -40,7 +40,7 @@ const useTransition = (_a) => {
                 setState(s => (Object.assign(Object.assign({}, s), { initial: false, classname: "", unmounted: true, variant: variant })));
             }
             else {
-                setState(s => (Object.assign(Object.assign({}, s), { variant: variant, classname: style({ visibility: "hidden" }, doc, cacheId), stage: "open" })));
+                setState(s => (Object.assign(Object.assign({}, s), { variant: variant, classname: style({ visibility: "hidden" }, doc.document, cacheId), stage: "open" })));
             }
         }
     }, [open, state.stage, exitOnUnmount, variant]);
@@ -54,7 +54,7 @@ const useTransition = (_a) => {
         const rect = getBoundary();
         let { from } = getVariant(rect, state.variant);
         if (open && !state.initial) {
-            setState(s => (Object.assign(Object.assign({}, s), { classname: (!disableInitialTransition || state.unmounted) ? style(from, doc, cacheId) : "", initial: true, rect: rect })));
+            setState(s => (Object.assign(Object.assign({}, s), { classname: (!disableInitialTransition || state.unmounted) ? style(from, doc.document, cacheId) : "", initial: true, rect: rect })));
             let stimer = null;
             let etimer = null;
             ele.ontransitionstart = () => {
@@ -79,7 +79,7 @@ const useTransition = (_a) => {
             };
         }
         else if (!state.initial) {
-            setState(s => (Object.assign(Object.assign({}, s), { classname: style(from, doc, cacheId), rect: rect })));
+            setState(s => (Object.assign(Object.assign({}, s), { classname: style(from, doc.document, cacheId), rect: rect })));
         }
     }, [open, state.initial, state.stage, exitOnUnmount]);
     useEffect(() => {
@@ -89,7 +89,7 @@ const useTransition = (_a) => {
             let _css = open ? to : from;
             let trans = ` ${duration}ms ${_ease} ${delay || 0}ms`;
             let _ = Object.assign(Object.assign({}, _css), { transition: Object.keys(_css || {}).map(k => formatCSSProp(k)).join(trans + ", ") + trans });
-            setState(s => (Object.assign(Object.assign({}, s), { classname: style(_, doc, cacheId), variant: _variant })));
+            setState(s => (Object.assign(Object.assign({}, s), { classname: style(_, doc.document, cacheId), variant: _variant })));
         }
     }, [open, state.initial, variant]);
     return {

package/hooks/useTransition/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/hooks/useTransition/index.ts"],"sourcesContent":["\"use client\";\r\nimport { useState, useEffect, useId } from 'react';\r\nimport { animationEases } from '../useAnimation';\r\nimport { css } from '../../css';\r\nimport { formatCSSProp } from 'oncss';\r\nimport { CSSProps } from '../../css/types';\r\nimport * as variants from './variants'\r\nimport { useDocument } from '../../Document';\r\nimport { useCSSCacheId } from '../../css/CSSCacheProvider';\r\n\r\nexport type UseTransitionVariantTypes = keyof typeof variants\r\nexport type UseTransitionState = \"open\" | \"opened\" | \"close\" | \"closed\"\r\n\r\nexport type UseTransitionVariant = (rect: DOMRect) => ({ from: CSSProps, to: CSSProps })\r\n\r\nexport type UseTransitionProps = {\r\n   open: boolean;\r\n   variant: UseTransitionVariant | UseTransitionVariantTypes;\r\n   ease?: string;\r\n   easing?: keyof typeof animationEases;\r\n   duration?: number;\r\n   delay?: number;\r\n   disableInitialTransition?: boolean;\r\n   exitOnUnmount?: boolean;\r\n   onOpen?: () => void;\r\n   onOpened?: () => void;\r\n   onClose?: () => void;\r\n   onClosed?: () => void;\r\n   onState?: (state: UseTransitionState) => void;\r\n}\r\n\r\n\r\nconst style = (obj = {}, doc: Document, cacheId: string) => {\r\n   return css(obj, { selector: \"#\", container: doc, cacheId }).classname;\r\n}\r\n\r\nconst getVariant = (rect: DOMRect | null, variant: UseTransitionProps['variant']) => {\r\n   let fn = typeof variant === 'string' ? variants[variant] : variant\r\n   if (!fn) throw new Error(`Transition variant \"${variant}\" not found.`)\r\n   return fn(rect as DOMRect);\r\n}\r\n\r\nconst useTransition = ({ open, ...props }: UseTransitionProps) => {\r\n   let {\r\n      disableInitialTransition = false,\r\n      variant = \"fade\",\r\n      duration = 400,\r\n      delay,\r\n      ease,\r\n      easing,\r\n      exitOnUnmount = false,\r\n      onOpen,\r\n      onOpened,\r\n      onClose,\r\n      onClosed,\r\n      onState\r\n   } = props\r\n   const doc = useDocument().document;\r\n   const cacheId = useCSSCacheId()\r\n   let _ease = ease || (animationEases as any)[easing as any] || animationEases.bounce\r\n   const id = \"xui-transition-\" + useId()\r\n   const [state, setState] = useState({\r\n      initial: false,\r\n      classname: style({ visibility: \"hidden\" }, doc, cacheId),\r\n      variant: variant,\r\n      rect: null as DOMRect | null,\r\n      stage: open ? \"open\" : \"closed\",\r\n      unmounted: false,\r\n   })\r\n\r\n   const getEle = () => doc.querySelector(`[data-transition=\"${id}\"]`) as HTMLElement;\r\n   const getBoundary = () => state.rect || getEle()?.getBoundingClientRect() || new DOMRect(0, 0, 0, 0);\r\n\r\n   useEffect(() => {\r\n      if (exitOnUnmount && state.stage === 'closed') {\r\n         if (!open) {\r\n            setState(s => ({\r\n               ...s,\r\n               initial: false,\r\n               classname: \"\",\r\n               unmounted: true,\r\n               variant: variant,\r\n            }))\r\n         } else {\r\n            setState(s => ({\r\n               ...s,\r\n               variant: variant,\r\n               classname: style({ visibility: \"hidden\" }, doc, cacheId),\r\n               stage: \"open\",\r\n            }))\r\n         }\r\n      }\r\n   }, [open, state.stage, exitOnUnmount, variant])\r\n\r\n   // initial effect\r\n   useEffect(() => {\r\n      const ele = getEle()\r\n      if (!ele) return\r\n      if (exitOnUnmount && state.stage === 'closed') return\r\n\r\n      const rect = getBoundary();\r\n      let { from } = getVariant(rect, state.variant)\r\n      if (open && !state.initial) {\r\n         setState(s => ({\r\n            ...s,\r\n            classname: (!disableInitialTransition || state.unmounted) ? style(from, doc, cacheId) : \"\",\r\n            initial: true,\r\n            rect: rect,\r\n         }))\r\n         let stimer: any = null\r\n         let etimer: any = null\r\n         ele.ontransitionstart = () => {\r\n            clearTimeout(stimer)\r\n            stimer = setTimeout(() => {\r\n               const isOpen = ele.getAttribute('data-transition-state') === 'open';\r\n               (onOpen && isOpen) && onOpen();\r\n               (onClose && !isOpen) && onClose()\r\n               onState && onState(isOpen ? \"open\" : \"close\")\r\n               setState(s => ({\r\n                  ...s,\r\n                  stage: isOpen ? \"open\" : \"close\"\r\n               }))\r\n            }, 1)\r\n         }\r\n\r\n         ele.ontransitionend = () => {\r\n            clearTimeout(etimer)\r\n            etimer = setTimeout(() => {\r\n               const isOpen = ele.getAttribute('data-transition-state') === 'open';\r\n               (onOpened && isOpen) && onOpened();\r\n               (onClosed && !isOpen) && onClosed();\r\n               onState && onState(isOpen ? \"opened\" : \"closed\")\r\n               setState(s => ({\r\n                  ...s,\r\n                  stage: isOpen ? \"opened\" : \"closed\"\r\n               }))\r\n            }, 1)\r\n         }\r\n      } else if (!state.initial) {\r\n         setState(s => ({\r\n            ...s,\r\n            classname: style(from, doc, cacheId),\r\n            rect: rect,\r\n         }))\r\n      }\r\n   }, [open, state.initial, state.stage, exitOnUnmount])\r\n\r\n\r\n   useEffect(() => {\r\n      if (state.initial) {\r\n         let _variant = state.variant !== variant ? variant : state.variant\r\n         const { from, to } = getVariant(state.rect, _variant)\r\n         let _css: CSSProps = open ? to : from\r\n         let trans = ` ${duration}ms ${_ease} ${delay || 0}ms`\r\n         let _ = {\r\n            ..._css,\r\n            transition: Object.keys(_css || {}).map(k => formatCSSProp(k)).join(trans + \", \") + trans,\r\n         }\r\n         setState(s => ({\r\n            ...s,\r\n            classname: style(_, doc, cacheId),\r\n            variant: _variant\r\n         }))\r\n      }\r\n   }, [open, state.initial, variant])\r\n\r\n   return {\r\n      exited: exitOnUnmount && state.stage === 'closed',\r\n      props: {\r\n         'id': state.classname,\r\n         'data-transition': id,\r\n         'data-transition-state': open ? 'open' : 'close',\r\n      }\r\n   }\r\n}\r\n\r\n\r\nexport default useTransition"],"names":[],"mappings":";;;;;;;;;;AAgCA;AACG;AACH;AAEA;AACG;AACA;AAAS;AACT;AACH;AAEA;AAAuB;AACpB;AAcA;AACA;AACA;AACA;AACA;AACG;AACA;AACA;AACA;;AAEA;AACF;AAED;AACA;;;;;;;AAaS;;;AAQT;;;AAIG;AACA;;AACA;;AAEA;AACA;AACA;AACG;;;AAQA;;AAEG;;AAEG;;AAEA;;;AAMN;AAEA;;AAEG;;AAEG;;AAEA;;;AAMN;;AACI;;;AAOV;;AAIG;AACG;AACA;;;AAGA;;;;;AAaH;AACA;;AAEG;;AAEF;;AAEP;;"}
+{"version":3,"file":"index.js","sources":["../../../src/hooks/useTransition/index.ts"],"sourcesContent":["\"use client\";\r\nimport { useState, useEffect, useId } from 'react';\r\nimport { animationEases } from '../useAnimation';\r\nimport { css } from '../../css';\r\nimport { formatCSSProp } from 'oncss';\r\nimport { CSSProps } from '../../css/types';\r\nimport * as variants from './variants'\r\nimport { useDocument } from '../../Document';\r\nimport { useCSSCacheId } from '../../css/CSSCacheProvider';\r\n\r\nexport type UseTransitionVariantTypes = keyof typeof variants\r\nexport type UseTransitionState = \"open\" | \"opened\" | \"close\" | \"closed\"\r\n\r\nexport type UseTransitionVariant = (rect: DOMRect) => ({ from: CSSProps, to: CSSProps })\r\n\r\nexport type UseTransitionProps = {\r\n   open: boolean;\r\n   variant: UseTransitionVariant | UseTransitionVariantTypes;\r\n   ease?: string;\r\n   easing?: keyof typeof animationEases;\r\n   duration?: number;\r\n   delay?: number;\r\n   disableInitialTransition?: boolean;\r\n   exitOnUnmount?: boolean;\r\n   onOpen?: () => void;\r\n   onOpened?: () => void;\r\n   onClose?: () => void;\r\n   onClosed?: () => void;\r\n   onState?: (state: UseTransitionState) => void;\r\n}\r\n\r\n\r\nconst style = (obj = {}, doc: Document, cacheId: string) => {\r\n   return css(obj, { selector: \"#\", container: doc, cacheId }).classname;\r\n}\r\n\r\nconst getVariant = (rect: DOMRect | null, variant: UseTransitionProps['variant']) => {\r\n   let fn = typeof variant === 'string' ? variants[variant] : variant\r\n   if (!fn) throw new Error(`Transition variant \"${variant}\" not found.`)\r\n   return fn(rect as DOMRect);\r\n}\r\n\r\nconst useTransition = ({ open, ...props }: UseTransitionProps) => {\r\n   let {\r\n      disableInitialTransition = false,\r\n      variant = \"fade\",\r\n      duration = 400,\r\n      delay,\r\n      ease,\r\n      easing,\r\n      exitOnUnmount = false,\r\n      onOpen,\r\n      onOpened,\r\n      onClose,\r\n      onClosed,\r\n      onState\r\n   } = props\r\n   const doc = useDocument();\r\n   const cacheId = useCSSCacheId()\r\n   let _ease = ease || (animationEases as any)[easing as any] || animationEases.bounce\r\n   const id = \"xui-transition-\" + useId()\r\n   const [state, setState] = useState({\r\n      initial: false,\r\n      classname: style({ visibility: \"hidden\" }, doc.document, cacheId),\r\n      variant: variant,\r\n      rect: null as DOMRect | null,\r\n      stage: open ? \"open\" : \"closed\",\r\n      unmounted: false,\r\n   })\r\n\r\n   const getEle = () => doc.document.querySelector(`[data-transition=\"${id}\"]`) as HTMLElement;\r\n   const getBoundary = () => state.rect || getEle()?.getBoundingClientRect() || new DOMRect(0, 0, 0, 0);\r\n\r\n   useEffect(() => {\r\n      if (exitOnUnmount && state.stage === 'closed') {\r\n         if (!open) {\r\n            setState(s => ({\r\n               ...s,\r\n               initial: false,\r\n               classname: \"\",\r\n               unmounted: true,\r\n               variant: variant,\r\n            }))\r\n         } else {\r\n            setState(s => ({\r\n               ...s,\r\n               variant: variant,\r\n               classname: style({ visibility: \"hidden\" }, doc.document, cacheId),\r\n               stage: \"open\",\r\n            }))\r\n         }\r\n      }\r\n   }, [open, state.stage, exitOnUnmount, variant])\r\n\r\n   // initial effect\r\n   useEffect(() => {\r\n      const ele = getEle()\r\n      if (!ele) return\r\n      if (exitOnUnmount && state.stage === 'closed') return\r\n\r\n      const rect = getBoundary();\r\n      let { from } = getVariant(rect, state.variant)\r\n      if (open && !state.initial) {\r\n         setState(s => ({\r\n            ...s,\r\n            classname: (!disableInitialTransition || state.unmounted) ? style(from, doc.document, cacheId) : \"\",\r\n            initial: true,\r\n            rect: rect,\r\n         }))\r\n         let stimer: any = null\r\n         let etimer: any = null\r\n         ele.ontransitionstart = () => {\r\n            clearTimeout(stimer)\r\n            stimer = setTimeout(() => {\r\n               const isOpen = ele.getAttribute('data-transition-state') === 'open';\r\n               (onOpen && isOpen) && onOpen();\r\n               (onClose && !isOpen) && onClose()\r\n               onState && onState(isOpen ? \"open\" : \"close\")\r\n               setState(s => ({\r\n                  ...s,\r\n                  stage: isOpen ? \"open\" : \"close\"\r\n               }))\r\n            }, 1)\r\n         }\r\n\r\n         ele.ontransitionend = () => {\r\n            clearTimeout(etimer)\r\n            etimer = setTimeout(() => {\r\n               const isOpen = ele.getAttribute('data-transition-state') === 'open';\r\n               (onOpened && isOpen) && onOpened();\r\n               (onClosed && !isOpen) && onClosed();\r\n               onState && onState(isOpen ? \"opened\" : \"closed\")\r\n               setState(s => ({\r\n                  ...s,\r\n                  stage: isOpen ? \"opened\" : \"closed\"\r\n               }))\r\n            }, 1)\r\n         }\r\n      } else if (!state.initial) {\r\n         setState(s => ({\r\n            ...s,\r\n            classname: style(from, doc.document, cacheId),\r\n            rect: rect,\r\n         }))\r\n      }\r\n   }, [open, state.initial, state.stage, exitOnUnmount])\r\n\r\n\r\n   useEffect(() => {\r\n      if (state.initial) {\r\n         let _variant = state.variant !== variant ? variant : state.variant\r\n         const { from, to } = getVariant(state.rect, _variant)\r\n         let _css: CSSProps = open ? to : from\r\n         let trans = ` ${duration}ms ${_ease} ${delay || 0}ms`\r\n         let _ = {\r\n            ..._css,\r\n            transition: Object.keys(_css || {}).map(k => formatCSSProp(k)).join(trans + \", \") + trans,\r\n         }\r\n         setState(s => ({\r\n            ...s,\r\n            classname: style(_, doc.document, cacheId),\r\n            variant: _variant\r\n         }))\r\n      }\r\n   }, [open, state.initial, variant])\r\n\r\n   return {\r\n      exited: exitOnUnmount && state.stage === 'closed',\r\n      props: {\r\n         'id': state.classname,\r\n         'data-transition': id,\r\n         'data-transition-state': open ? 'open' : 'close',\r\n      }\r\n   }\r\n}\r\n\r\n\r\nexport default useTransition"],"names":[],"mappings":";;;;;;;;;;AAgCA;AACG;AACH;AAEA;AACG;AACA;AAAS;AACT;AACH;AAEA;AAAuB;AACpB;AAcA;AACA;AACA;AACA;AACA;AACG;AACA;AACA;AACA;;AAEA;AACF;AAED;AACA;;;;;;;AAaS;;;AAQT;;;AAIG;AACA;;AACA;;AAEA;AACA;AACA;;;;AASG;;AAEG;;AAEG;;AAEA;;;AAMN;AAEA;;AAEG;;AAEG;;AAEA;;;AAMN;;AACI;;;AAOV;;AAIG;AACG;AACA;;;AAGA;;;;;AAaH;AACA;;AAEG;;AAEF;;AAEP;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xanui/core",
-  "version": "1.2.44",
+  "version": "1.2.45",
   "description": "Xanui Core Library",
   "private": false,
   "main": "./index.cjs",

package/theme/ThemeProvider.cjs

@@ -41,7 +41,7 @@ const ThemeProvider = (_a) => {
         console.error(`ThemeProvider: The theme '${theme}' is not defined. Please make sure to use a valid theme name.`);
         THEME = core.ThemeFactory.get("light");
     }
-    const doc = index.useDocument().document;
+    const doc = index.useDocument();
     const cacheId = CSSCacheProvider.useCSSCacheId();
     const themeGlobalStyle = React__namespace.useMemo(() => {
         const root_cls = `.xui-${theme}-theme-root`;
@@ -54,7 +54,7 @@ const ThemeProvider = (_a) => {
             "@global": Object.assign(Object.assign({}, gstyles), { [root_cls]: ThemeCssVars(THEME) })
         }, {
             injectStyle: typeof window !== 'undefined',
-            container: doc,
+            container: doc === null || doc === void 0 ? void 0 : doc.document,
             cacheId
         });
     }, [theme, doc]);
@@ -106,7 +106,7 @@ const ThemeProvider = (_a) => {
             }
         }, {
             injectStyle: typeof window !== 'undefined',
-            container: doc,
+            container: doc === null || doc === void 0 ? void 0 : doc.document,
             cacheId
         });
     }, []);
@@ -139,7 +139,7 @@ const ThemeProvider = (_a) => {
             }
         }, {
             injectStyle: typeof window !== 'undefined',
-            container: doc,
+            container: doc === null || doc === void 0 ? void 0 : doc.document,
             cacheId
         });
     }, [noScrollbarCss, theme]);

package/theme/ThemeProvider.cjs.map

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

package/theme/ThemeProvider.js

@@ -20,7 +20,7 @@ const ThemeProvider = (_a) => {
         console.error(`ThemeProvider: The theme '${theme}' is not defined. Please make sure to use a valid theme name.`);
         THEME = ThemeFactory.get("light");
     }
-    const doc = useDocument().document;
+    const doc = useDocument();
     const cacheId = useCSSCacheId();
     const themeGlobalStyle = React.useMemo(() => {
         const root_cls = `.xui-${theme}-theme-root`;
@@ -33,7 +33,7 @@ const ThemeProvider = (_a) => {
             "@global": Object.assign(Object.assign({}, gstyles), { [root_cls]: ThemeCssVars(THEME) })
         }, {
             injectStyle: typeof window !== 'undefined',
-            container: doc,
+            container: doc === null || doc === void 0 ? void 0 : doc.document,
             cacheId
         });
     }, [theme, doc]);
@@ -85,7 +85,7 @@ const ThemeProvider = (_a) => {
             }
         }, {
             injectStyle: typeof window !== 'undefined',
-            container: doc,
+            container: doc === null || doc === void 0 ? void 0 : doc.document,
             cacheId
         });
     }, []);
@@ -118,7 +118,7 @@ const ThemeProvider = (_a) => {
             }
         }, {
             injectStyle: typeof window !== 'undefined',
-            container: doc,
+            container: doc === null || doc === void 0 ? void 0 : doc.document,
             cacheId
         });
     }, [noScrollbarCss, theme]);

package/theme/ThemeProvider.js.map

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