@xanui/core 1.2.54 → 1.2.56

package/AppRoot/AppRootProvider.cjs

@@ -1,3 +1,4 @@
+"use client";
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');

package/AppRoot/AppRootProvider.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"AppRootProvider.cjs","sources":["../../src/AppRoot/AppRootProvider.tsx"],"sourcesContent":["import React from \"react\";\n\nconst AppRootContext = React.createContext<(() => HTMLElement | null) | null>(null);\n\nexport const AppRootProvider: React.FC<{ element: () => HTMLElement | null; children: React.ReactNode }> = ({ element, children }) => {\n   return (\n      <AppRootContext.Provider value={element}>\n         {children}\n      </AppRootContext.Provider>\n   );\n}\n\nexport const useAppRootElement = (): HTMLElement => {\n   const context = React.useContext(AppRootContext);\n   if (typeof window === 'undefined') {\n      return null as any;\n   }\n\n   return context!() as HTMLElement\n}\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;;;;;"}
+{"version":3,"file":"AppRootProvider.cjs","sources":["../../src/AppRoot/AppRootProvider.tsx"],"sourcesContent":["\"use client\"\nimport React from \"react\";\n\nconst AppRootContext = React.createContext<(() => HTMLElement | null) | null>(null);\n\nexport const AppRootProvider: React.FC<{ element: () => HTMLElement | null; children: React.ReactNode }> = ({ element, children }) => {\n   return (\n      <AppRootContext.Provider value={element}>\n         {children}\n      </AppRootContext.Provider>\n   );\n}\n\nexport const useAppRootElement = (): HTMLElement => {\n   const context = React.useContext(AppRootContext);\n   if (typeof window === 'undefined') {\n      return null as any;\n   }\n\n   return context!() as HTMLElement\n}\n"],"names":[],"mappings":";;;;;;AAGA;AAEO;AACJ;AAKH;AAEO;;AAEJ;AACG;;;AAIN;;;"}

package/AppRoot/AppRootProvider.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import React__default from 'react';
 

package/AppRoot/AppRootProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppRootProvider.js","sources":["../../src/AppRoot/AppRootProvider.tsx"],"sourcesContent":["import React from \"react\";\n\nconst AppRootContext = React.createContext<(() => HTMLElement | null) | null>(null);\n\nexport const AppRootProvider: React.FC<{ element: () => HTMLElement | null; children: React.ReactNode }> = ({ element, children }) => {\n   return (\n      <AppRootContext.Provider value={element}>\n         {children}\n      </AppRootContext.Provider>\n   );\n}\n\nexport const useAppRootElement = (): HTMLElement => {\n   const context = React.useContext(AppRootContext);\n   if (typeof window === 'undefined') {\n      return null as any;\n   }\n\n   return context!() as HTMLElement\n}\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;;;;"}
+{"version":3,"file":"AppRootProvider.js","sources":["../../src/AppRoot/AppRootProvider.tsx"],"sourcesContent":["\"use client\"\nimport React from \"react\";\n\nconst AppRootContext = React.createContext<(() => HTMLElement | null) | null>(null);\n\nexport const AppRootProvider: React.FC<{ element: () => HTMLElement | null; children: React.ReactNode }> = ({ element, children }) => {\n   return (\n      <AppRootContext.Provider value={element}>\n         {children}\n      </AppRootContext.Provider>\n   );\n}\n\nexport const useAppRootElement = (): HTMLElement => {\n   const context = React.useContext(AppRootContext);\n   if (typeof window === 'undefined') {\n      return null as any;\n   }\n\n   return context!() as HTMLElement\n}\n"],"names":[],"mappings":";;;;AAGA;AAEO;AACJ;AAKH;AAEO;;AAEJ;AACG;;;AAIN;;"}

package/AppRoot/index.cjs

@@ -27,11 +27,11 @@ const AppRoot = React.forwardRef((_a, ref) => {
     const docid = React.useId();
     const csscacheId = React.useId();
     CSSCacheId !== null && CSSCacheId !== void 0 ? CSSCacheId : (CSSCacheId = csscacheId);
-    const [visibility, setVisibility] = React.useState("hidden");
+    // const [visibility, setVisibility] = React.useState<string>("hidden");
     const rootRef = React.useRef(null);
     const mergeRef = useMergeRefs(rootRef, ref);
     React.useEffect(() => {
-        setVisibility("visible");
+        // setVisibility("visible");
         // move oncss style tags to head
         if (typeof _document === 'undefined')
             return;
@@ -49,7 +49,7 @@ const AppRoot = React.forwardRef((_a, ref) => {
             }
         };
     }
-    return (jsxRuntime.jsx(index.DocumentProvider, { value: _document ? { document: _document, id: docid } : undefined, children: jsxRuntime.jsx(CSSCacheProvider.CSSCacheProvider, { cacheId: CSSCacheId, children: jsxRuntime.jsx(AppRootProvider.AppRootProvider, { element: () => rootRef.current, children: jsxRuntime.jsx(ThemeProvider, Object.assign({ theme: theme }, props, { ref: mergeRef, isRoot: true, sx: Object.assign(Object.assign(Object.assign({}, props.sx), (visibility === "hidden" ? { visibility: "hidden" } : {})), selection), children: jsxRuntime.jsxs(BreakpointProvider.BreakpointProvider, { children: [children, !disableRenderar && jsxRuntime.jsx(Renderar.RenderRenderar, {})] }) })) }) }) }));
+    return (jsxRuntime.jsx(index.DocumentProvider, { value: _document ? { document: _document, id: docid } : undefined, children: jsxRuntime.jsx(CSSCacheProvider.CSSCacheProvider, { cacheId: CSSCacheId, children: jsxRuntime.jsx(AppRootProvider.AppRootProvider, { element: () => rootRef.current, children: jsxRuntime.jsx(ThemeProvider, Object.assign({ theme: theme }, props, { ref: mergeRef, isRoot: true, sx: Object.assign(Object.assign({}, props.sx), selection), children: jsxRuntime.jsxs(BreakpointProvider.BreakpointProvider, { children: [children, !disableRenderar && jsxRuntime.jsx(Renderar.RenderRenderar, {})] }) })) }) }) }));
 });
 
 module.exports = AppRoot;

package/AppRoot/index.cjs.map

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

package/AppRoot/index.js

@@ -25,11 +25,11 @@ const AppRoot = React__default.forwardRef((_a, ref) => {
     const docid = useId();
     const csscacheId = useId();
     CSSCacheId !== null && CSSCacheId !== void 0 ? CSSCacheId : (CSSCacheId = csscacheId);
-    const [visibility, setVisibility] = React__default.useState("hidden");
+    // const [visibility, setVisibility] = React.useState<string>("hidden");
     const rootRef = useRef(null);
     const mergeRef = useMergeRefs(rootRef, ref);
     useEffect(() => {
-        setVisibility("visible");
+        // setVisibility("visible");
         // move oncss style tags to head
         if (typeof _document === 'undefined')
             return;
@@ -47,7 +47,7 @@ const AppRoot = React__default.forwardRef((_a, ref) => {
             }
         };
     }
-    return (jsx(DocumentProvider, { value: _document ? { document: _document, id: docid } : undefined, children: jsx(CSSCacheProvider, { cacheId: CSSCacheId, children: jsx(AppRootProvider, { element: () => rootRef.current, children: jsx(ThemeProvider, Object.assign({ theme: theme }, props, { ref: mergeRef, isRoot: true, sx: Object.assign(Object.assign(Object.assign({}, props.sx), (visibility === "hidden" ? { visibility: "hidden" } : {})), selection), children: jsxs(BreakpointProvider, { children: [children, !disableRenderar && jsx(RenderRenderar, {})] }) })) }) }) }));
+    return (jsx(DocumentProvider, { value: _document ? { document: _document, id: docid } : undefined, children: jsx(CSSCacheProvider, { cacheId: CSSCacheId, children: jsx(AppRootProvider, { element: () => rootRef.current, children: jsx(ThemeProvider, Object.assign({ theme: theme }, props, { ref: mergeRef, isRoot: true, sx: Object.assign(Object.assign({}, props.sx), selection), children: jsxs(BreakpointProvider, { children: [children, !disableRenderar && jsx(RenderRenderar, {})] }) })) }) }) }));
 });
 
 export { AppRoot as default };

package/AppRoot/index.js.map

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

package/Portal/index.cjs

@@ -0,0 +1,36 @@
+"use client";
+'use strict';
+
+var React = require('react');
+var reactDom = require('react-dom');
+
+/**
+ * SSR-safe Portal component
+ * - container: HTMLElement or querySelector string
+ * - if not provided, creates a unique div automatically
+ */
+const Portal = ({ children, container }) => {
+    const portalNode = React.useMemo(() => {
+        if (typeof document === "undefined")
+            return null; // SSR
+        // Use container if provided
+        if (container instanceof HTMLElement)
+            return container;
+        if (typeof container === "string") {
+            const element = document.querySelector(container);
+            if (element)
+                return element;
+        }
+        // Auto-create a unique div
+        const element = document.createElement("div");
+        element.dataset.portal = Math.random().toString(36).substring(2, 9); // unique id
+        document.body.appendChild(element);
+        return element;
+    }, [container]);
+    if (!portalNode)
+        return null;
+    return reactDom.createPortal(children, portalNode);
+};
+
+module.exports = Portal;
+//# sourceMappingURL=index.cjs.map

package/Portal/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../src/Portal/index.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { ReactNode, useMemo } from \"react\";\nimport { createPortal } from \"react-dom\";\n\nexport type PortalProps = {\n   children: ReactNode;\n   container?: HTMLElement | string; // HTMLElement or querySelector string\n}\n\n/**\n * SSR-safe Portal component\n * - container: HTMLElement or querySelector string\n * - if not provided, creates a unique div automatically\n */\nconst Portal: React.FC<PortalProps> = ({ children, container }) => {\n   const portalNode = useMemo<HTMLElement | null>(() => {\n      if (typeof document === \"undefined\") return null; // SSR\n\n      // Use container if provided\n      if (container instanceof HTMLElement) return container;\n      if (typeof container === \"string\") {\n         const element = document.querySelector<HTMLElement>(container);\n         if (element) return element;\n      }\n\n      // Auto-create a unique div\n      const element = document.createElement(\"div\");\n      element.dataset.portal = Math.random().toString(36).substring(2, 9); // unique id\n      document.body.appendChild(element);\n\n      return element;\n   }, [container]);\n\n   if (!portalNode) return null;\n\n   return createPortal(children, portalNode);\n};\n\nexport default Portal;"],"names":[],"mappings":";;;;;;AAUA;;;;AAIG;AACH;AACG;;;;;AAIyC;AACtC;;AAEG;AAAa;;;;;AAMhB;AAEA;AACH;AAEA;AAAiB;AAEjB;AACH;;"}

package/Portal/index.d.ts

@@ -0,0 +1,15 @@
+import React__default, { ReactNode } from 'react';
+
+type PortalProps = {
+    children: ReactNode;
+    container?: HTMLElement | string;
+};
+/**
+ * SSR-safe Portal component
+ * - container: HTMLElement or querySelector string
+ * - if not provided, creates a unique div automatically
+ */
+declare const Portal: React__default.FC<PortalProps>;
+
+export { Portal as default };
+export type { PortalProps };

package/Portal/index.js

@@ -0,0 +1,34 @@
+"use client";
+import { useMemo } from 'react';
+import { createPortal } from 'react-dom';
+
+/**
+ * SSR-safe Portal component
+ * - container: HTMLElement or querySelector string
+ * - if not provided, creates a unique div automatically
+ */
+const Portal = ({ children, container }) => {
+    const portalNode = useMemo(() => {
+        if (typeof document === "undefined")
+            return null; // SSR
+        // Use container if provided
+        if (container instanceof HTMLElement)
+            return container;
+        if (typeof container === "string") {
+            const element = document.querySelector(container);
+            if (element)
+                return element;
+        }
+        // Auto-create a unique div
+        const element = document.createElement("div");
+        element.dataset.portal = Math.random().toString(36).substring(2, 9); // unique id
+        document.body.appendChild(element);
+        return element;
+    }, [container]);
+    if (!portalNode)
+        return null;
+    return createPortal(children, portalNode);
+};
+
+export { Portal as default };
+//# sourceMappingURL=index.js.map

package/Portal/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../src/Portal/index.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { ReactNode, useMemo } from \"react\";\nimport { createPortal } from \"react-dom\";\n\nexport type PortalProps = {\n   children: ReactNode;\n   container?: HTMLElement | string; // HTMLElement or querySelector string\n}\n\n/**\n * SSR-safe Portal component\n * - container: HTMLElement or querySelector string\n * - if not provided, creates a unique div automatically\n */\nconst Portal: React.FC<PortalProps> = ({ children, container }) => {\n   const portalNode = useMemo<HTMLElement | null>(() => {\n      if (typeof document === \"undefined\") return null; // SSR\n\n      // Use container if provided\n      if (container instanceof HTMLElement) return container;\n      if (typeof container === \"string\") {\n         const element = document.querySelector<HTMLElement>(container);\n         if (element) return element;\n      }\n\n      // Auto-create a unique div\n      const element = document.createElement(\"div\");\n      element.dataset.portal = Math.random().toString(36).substring(2, 9); // unique id\n      document.body.appendChild(element);\n\n      return element;\n   }, [container]);\n\n   if (!portalNode) return null;\n\n   return createPortal(children, portalNode);\n};\n\nexport default Portal;"],"names":[],"mappings":";;;;AAUA;;;;AAIG;AACH;AACG;;;;;AAIyC;AACtC;;AAEG;AAAa;;;;;AAMhB;AAEA;AACH;AAEA;AAAiB;AAEjB;AACH;;"}

package/breakpoint/BreakpointProvider.cjs

@@ -6,15 +6,14 @@ var React = require('react');
 var index$1 = require('../css/index.cjs');
 var index = require('../Document/index.cjs');
 
-const BreakpointCtx = React.createContext("xl");
+const BreakpointCtx = React.createContext({
+    key: "xl",
+    width: 1920,
+});
 /**
  * SSR-safe breakpoint detection
  */
-const getKey = (doc) => {
-    if (!doc || typeof window === "undefined" || typeof document === "undefined") {
-        return "xl";
-    }
-    const width = doc.documentElement.clientWidth || window.innerWidth;
+const getKey = (width) => {
     if (width < index$1.breakpoints.sm)
         return "xs";
     if (width < index$1.breakpoints.md)
@@ -26,22 +25,27 @@ const getKey = (doc) => {
     return "xl";
 };
 const BreakpointProvider = ({ children }) => {
-    // hydrate-safe initial state
     const doc = index.useDocument();
-    const [current, setCurrent] = React.useState(() => getKey(doc === null || doc === void 0 ? void 0 : doc.document));
+    const getWidth = () => {
+        if (!doc)
+            return 1920; // SSR fallback
+        return doc.document.documentElement.clientWidth || window.innerWidth;
+    };
+    const [state, setState] = React.useState(() => {
+        const width = getWidth();
+        return { width, key: getKey(width) };
+    });
     const handler = React.useCallback(() => {
-        if (doc) {
-            const next = getKey(doc.document);
-            setCurrent(prev => (prev === next ? prev : next));
-        }
+        const width = getWidth();
+        const key = getKey(width);
+        setState(prev => (prev.key === key ? prev : { key, width }));
     }, [doc]);
-    // useLayoutEffect avoids visual flicker on first paint
     React.useLayoutEffect(() => {
-        handler();
+        handler(); // set correct initial value
         window.addEventListener("resize", handler, { passive: true });
         return () => window.removeEventListener("resize", handler);
     }, [handler]);
-    return (jsxRuntime.jsx(BreakpointCtx.Provider, { value: current, children: children }));
+    return jsxRuntime.jsx(BreakpointCtx.Provider, { value: state, children: children });
 };
 
 exports.BreakpointCtx = BreakpointCtx;

package/breakpoint/BreakpointProvider.cjs.map

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

package/breakpoint/BreakpointProvider.js

@@ -4,15 +4,14 @@ 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("xl");
+const BreakpointCtx = React__default.createContext({
+    key: "xl",
+    width: 1920,
+});
 /**
  * SSR-safe breakpoint detection
  */
-const getKey = (doc) => {
-    if (!doc || typeof window === "undefined" || typeof document === "undefined") {
-        return "xl";
-    }
-    const width = doc.documentElement.clientWidth || window.innerWidth;
+const getKey = (width) => {
     if (width < breakpoints.sm)
         return "xs";
     if (width < breakpoints.md)
@@ -24,22 +23,27 @@ const getKey = (doc) => {
     return "xl";
 };
 const BreakpointProvider = ({ children }) => {
-    // hydrate-safe initial state
     const doc = useDocument();
-    const [current, setCurrent] = useState(() => getKey(doc === null || doc === void 0 ? void 0 : doc.document));
+    const getWidth = () => {
+        if (!doc)
+            return 1920; // SSR fallback
+        return doc.document.documentElement.clientWidth || window.innerWidth;
+    };
+    const [state, setState] = useState(() => {
+        const width = getWidth();
+        return { width, key: getKey(width) };
+    });
     const handler = useCallback(() => {
-        if (doc) {
-            const next = getKey(doc.document);
-            setCurrent(prev => (prev === next ? prev : next));
-        }
+        const width = getWidth();
+        const key = getKey(width);
+        setState(prev => (prev.key === key ? prev : { key, width }));
     }, [doc]);
-    // useLayoutEffect avoids visual flicker on first paint
     useLayoutEffect(() => {
-        handler();
+        handler(); // set correct initial value
         window.addEventListener("resize", handler, { passive: true });
         return () => window.removeEventListener("resize", handler);
     }, [handler]);
-    return (jsx(BreakpointCtx.Provider, { value: current, children: children }));
+    return jsx(BreakpointCtx.Provider, { value: state, children: children });
 };
 
 export { BreakpointCtx, BreakpointProvider };

package/breakpoint/BreakpointProvider.js.map

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

package/breakpoint/useBreakpoint.cjs

@@ -5,18 +5,22 @@ var BreakpointProvider = require('./BreakpointProvider.cjs');
 var index = require('../css/index.cjs');
 
 const useBreakpoint = () => {
-    const value = React.useContext(BreakpointProvider.BreakpointCtx);
-    const getWidth = () => typeof window !== 'undefined' ? window.innerWidth : 99999;
-    const is = (key) => value === key;
-    const isUp = (key) => getWidth() >= index.breakpoints[key];
-    const isDown = (key) => getWidth() < index.breakpoints[key];
+    const { key: value, width } = React.useContext(BreakpointProvider.BreakpointCtx);
+    const is = (k) => value === k;
+    const isUp = (k) => width >= index.breakpoints[k];
+    const isDown = (k) => width < index.breakpoints[k];
+    const isOrUp = (k) => isUp(k) || is(k);
+    const isOrDown = (k) => isDown(k) || is(k);
+    const isBetween = (start, end) => width >= index.breakpoints[start] && width < index.breakpoints[end];
     return {
-        value,
+        value, // current breakpoint key
+        width, // current width
         is,
         isUp,
         isDown,
-        isOrUp: (key) => is(key) || isUp(key),
-        isOrDown: (key) => is(key) || isDown(key)
+        isOrUp,
+        isOrDown,
+        isBetween
     };
 };
 

package/breakpoint/useBreakpoint.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useBreakpoint.cjs","sources":["../../src/breakpoint/useBreakpoint.ts"],"sourcesContent":["import { useContext } from \"react\"\nimport { BreakpointCtx } from \"./BreakpointProvider\"\nimport { breakpoints } from \"../css\"\nimport { BreakpointKeys } from \"../css/types\"\n\nconst useBreakpoint = () => {\n   const value = useContext(BreakpointCtx)\n   const getWidth = () => typeof window !== 'undefined' ? window.innerWidth : 99999\n   const is = (key: BreakpointKeys) => value === key\n   const isUp = (key: BreakpointKeys) => getWidth() >= breakpoints[key]\n   const isDown = (key: BreakpointKeys) => getWidth() < breakpoints[key]\n\n   return {\n      value,\n      is,\n      isUp,\n      isDown,\n      isOrUp: (key: BreakpointKeys) => is(key) || isUp(key),\n      isOrDown: (key: BreakpointKeys) => is(key) || isDown(key)\n   }\n}\n\nexport default useBreakpoint\n"],"names":["useContext","BreakpointCtx","breakpoints"],"mappings":";;;;;;AAKA,MAAM,aAAa,GAAG,MAAK;AACxB,IAAA,MAAM,KAAK,GAAGA,gBAAU,CAACC,gCAAa,CAAC;AACvC,IAAA,MAAM,QAAQ,GAAG,MAAM,OAAO,MAAM,KAAK,WAAW,GAAG,MAAM,CAAC,UAAU,GAAG,KAAK;IAChF,MAAM,EAAE,GAAG,CAAC,GAAmB,KAAK,KAAK,KAAK,GAAG;AACjD,IAAA,MAAM,IAAI,GAAG,CAAC,GAAmB,KAAK,QAAQ,EAAE,IAAIC,iBAAW,CAAC,GAAG,CAAC;AACpE,IAAA,MAAM,MAAM,GAAG,CAAC,GAAmB,KAAK,QAAQ,EAAE,GAAGA,iBAAW,CAAC,GAAG,CAAC;IAErE,OAAO;QACJ,KAAK;QACL,EAAE;QACF,IAAI;QACJ,MAAM;AACN,QAAA,MAAM,EAAE,CAAC,GAAmB,KAAK,EAAE,CAAC,GAAG,CAAC,IAAI,IAAI,CAAC,GAAG,CAAC;AACrD,QAAA,QAAQ,EAAE,CAAC,GAAmB,KAAK,EAAE,CAAC,GAAG,CAAC,IAAI,MAAM,CAAC,GAAG;KAC1D;AACJ;;;;"}
+{"version":3,"file":"useBreakpoint.cjs","sources":["../../src/breakpoint/useBreakpoint.ts"],"sourcesContent":["import { useContext } from \"react\";\nimport { BreakpointCtx } from \"./BreakpointProvider\";\nimport { breakpoints } from \"../css\";\nimport { BreakpointKeys } from \"../css/types\";\n\nconst useBreakpoint = () => {\n   const { key: value, width } = useContext(BreakpointCtx);\n\n   const is = (k: BreakpointKeys) => value === k;\n   const isUp = (k: BreakpointKeys) => width >= breakpoints[k];\n   const isDown = (k: BreakpointKeys) => width < breakpoints[k];\n   const isOrUp = (k: BreakpointKeys) => isUp(k) || is(k);\n   const isOrDown = (k: BreakpointKeys) => isDown(k) || is(k);\n   const isBetween = (start: BreakpointKeys, end: BreakpointKeys) =>\n      width >= breakpoints[start] && width < breakpoints[end];\n\n   return {\n      value,   // current breakpoint key\n      width,   // current width\n      is,\n      isUp,\n      isDown,\n      isOrUp,\n      isOrDown,\n      isBetween\n   };\n};\n\nexport default useBreakpoint;"],"names":["useContext","BreakpointCtx","breakpoints"],"mappings":";;;;;;AAKA,MAAM,aAAa,GAAG,MAAK;AACxB,IAAA,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,GAAGA,gBAAU,CAACC,gCAAa,CAAC;IAEvD,MAAM,EAAE,GAAG,CAAC,CAAiB,KAAK,KAAK,KAAK,CAAC;AAC7C,IAAA,MAAM,IAAI,GAAG,CAAC,CAAiB,KAAK,KAAK,IAAIC,iBAAW,CAAC,CAAC,CAAC;AAC3D,IAAA,MAAM,MAAM,GAAG,CAAC,CAAiB,KAAK,KAAK,GAAGA,iBAAW,CAAC,CAAC,CAAC;AAC5D,IAAA,MAAM,MAAM,GAAG,CAAC,CAAiB,KAAK,IAAI,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC;AACtD,IAAA,MAAM,QAAQ,GAAG,CAAC,CAAiB,KAAK,MAAM,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC;IAC1D,MAAM,SAAS,GAAG,CAAC,KAAqB,EAAE,GAAmB,KAC1D,KAAK,IAAIA,iBAAW,CAAC,KAAK,CAAC,IAAI,KAAK,GAAGA,iBAAW,CAAC,GAAG,CAAC;IAE1D,OAAO;AACJ,QAAA,KAAK;AACL,QAAA,KAAK;QACL,EAAE;QACF,IAAI;QACJ,MAAM;QACN,MAAM;QACN,QAAQ;QACR;KACF;AACJ;;;;"}

package/breakpoint/useBreakpoint.d.ts

@@ -2,11 +2,13 @@ import { BreakpointKeys } from '../css/types.js';
 
 declare const useBreakpoint: () => {
     value: BreakpointKeys;
-    is: (key: BreakpointKeys) => boolean;
-    isUp: (key: BreakpointKeys) => boolean;
-    isDown: (key: BreakpointKeys) => boolean;
-    isOrUp: (key: BreakpointKeys) => boolean;
-    isOrDown: (key: BreakpointKeys) => boolean;
+    width: number;
+    is: (k: BreakpointKeys) => boolean;
+    isUp: (k: BreakpointKeys) => boolean;
+    isDown: (k: BreakpointKeys) => boolean;
+    isOrUp: (k: BreakpointKeys) => boolean;
+    isOrDown: (k: BreakpointKeys) => boolean;
+    isBetween: (start: BreakpointKeys, end: BreakpointKeys) => boolean;
 };
 
 export { useBreakpoint as default };

package/breakpoint/useBreakpoint.js

@@ -3,18 +3,22 @@ import { BreakpointCtx } from './BreakpointProvider.js';
 import { breakpoints } from '../css/index.js';
 
 const useBreakpoint = () => {
-    const value = useContext(BreakpointCtx);
-    const getWidth = () => typeof window !== 'undefined' ? window.innerWidth : 99999;
-    const is = (key) => value === key;
-    const isUp = (key) => getWidth() >= breakpoints[key];
-    const isDown = (key) => getWidth() < breakpoints[key];
+    const { key: value, width } = useContext(BreakpointCtx);
+    const is = (k) => value === k;
+    const isUp = (k) => width >= breakpoints[k];
+    const isDown = (k) => width < breakpoints[k];
+    const isOrUp = (k) => isUp(k) || is(k);
+    const isOrDown = (k) => isDown(k) || is(k);
+    const isBetween = (start, end) => width >= breakpoints[start] && width < breakpoints[end];
     return {
-        value,
+        value, // current breakpoint key
+        width, // current width
         is,
         isUp,
         isDown,
-        isOrUp: (key) => is(key) || isUp(key),
-        isOrDown: (key) => is(key) || isDown(key)
+        isOrUp,
+        isOrDown,
+        isBetween
     };
 };
 

package/breakpoint/useBreakpoint.js.map

@@ -1 +1 @@
-{"version":3,"file":"useBreakpoint.js","sources":["../../src/breakpoint/useBreakpoint.ts"],"sourcesContent":["import { useContext } from \"react\"\nimport { BreakpointCtx } from \"./BreakpointProvider\"\nimport { breakpoints } from \"../css\"\nimport { BreakpointKeys } from \"../css/types\"\n\nconst useBreakpoint = () => {\n   const value = useContext(BreakpointCtx)\n   const getWidth = () => typeof window !== 'undefined' ? window.innerWidth : 99999\n   const is = (key: BreakpointKeys) => value === key\n   const isUp = (key: BreakpointKeys) => getWidth() >= breakpoints[key]\n   const isDown = (key: BreakpointKeys) => getWidth() < breakpoints[key]\n\n   return {\n      value,\n      is,\n      isUp,\n      isDown,\n      isOrUp: (key: BreakpointKeys) => is(key) || isUp(key),\n      isOrDown: (key: BreakpointKeys) => is(key) || isDown(key)\n   }\n}\n\nexport default useBreakpoint\n"],"names":[],"mappings":";;;;AAKA,MAAM,aAAa,GAAG,MAAK;AACxB,IAAA,MAAM,KAAK,GAAG,UAAU,CAAC,aAAa,CAAC;AACvC,IAAA,MAAM,QAAQ,GAAG,MAAM,OAAO,MAAM,KAAK,WAAW,GAAG,MAAM,CAAC,UAAU,GAAG,KAAK;IAChF,MAAM,EAAE,GAAG,CAAC,GAAmB,KAAK,KAAK,KAAK,GAAG;AACjD,IAAA,MAAM,IAAI,GAAG,CAAC,GAAmB,KAAK,QAAQ,EAAE,IAAI,WAAW,CAAC,GAAG,CAAC;AACpE,IAAA,MAAM,MAAM,GAAG,CAAC,GAAmB,KAAK,QAAQ,EAAE,GAAG,WAAW,CAAC,GAAG,CAAC;IAErE,OAAO;QACJ,KAAK;QACL,EAAE;QACF,IAAI;QACJ,MAAM;AACN,QAAA,MAAM,EAAE,CAAC,GAAmB,KAAK,EAAE,CAAC,GAAG,CAAC,IAAI,IAAI,CAAC,GAAG,CAAC;AACrD,QAAA,QAAQ,EAAE,CAAC,GAAmB,KAAK,EAAE,CAAC,GAAG,CAAC,IAAI,MAAM,CAAC,GAAG;KAC1D;AACJ;;;;"}
+{"version":3,"file":"useBreakpoint.js","sources":["../../src/breakpoint/useBreakpoint.ts"],"sourcesContent":["import { useContext } from \"react\";\nimport { BreakpointCtx } from \"./BreakpointProvider\";\nimport { breakpoints } from \"../css\";\nimport { BreakpointKeys } from \"../css/types\";\n\nconst useBreakpoint = () => {\n   const { key: value, width } = useContext(BreakpointCtx);\n\n   const is = (k: BreakpointKeys) => value === k;\n   const isUp = (k: BreakpointKeys) => width >= breakpoints[k];\n   const isDown = (k: BreakpointKeys) => width < breakpoints[k];\n   const isOrUp = (k: BreakpointKeys) => isUp(k) || is(k);\n   const isOrDown = (k: BreakpointKeys) => isDown(k) || is(k);\n   const isBetween = (start: BreakpointKeys, end: BreakpointKeys) =>\n      width >= breakpoints[start] && width < breakpoints[end];\n\n   return {\n      value,   // current breakpoint key\n      width,   // current width\n      is,\n      isUp,\n      isDown,\n      isOrUp,\n      isOrDown,\n      isBetween\n   };\n};\n\nexport default useBreakpoint;"],"names":[],"mappings":";;;;AAKA,MAAM,aAAa,GAAG,MAAK;AACxB,IAAA,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,UAAU,CAAC,aAAa,CAAC;IAEvD,MAAM,EAAE,GAAG,CAAC,CAAiB,KAAK,KAAK,KAAK,CAAC;AAC7C,IAAA,MAAM,IAAI,GAAG,CAAC,CAAiB,KAAK,KAAK,IAAI,WAAW,CAAC,CAAC,CAAC;AAC3D,IAAA,MAAM,MAAM,GAAG,CAAC,CAAiB,KAAK,KAAK,GAAG,WAAW,CAAC,CAAC,CAAC;AAC5D,IAAA,MAAM,MAAM,GAAG,CAAC,CAAiB,KAAK,IAAI,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC;AACtD,IAAA,MAAM,QAAQ,GAAG,CAAC,CAAiB,KAAK,MAAM,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC;IAC1D,MAAM,SAAS,GAAG,CAAC,KAAqB,EAAE,GAAmB,KAC1D,KAAK,IAAI,WAAW,CAAC,KAAK,CAAC,IAAI,KAAK,GAAG,WAAW,CAAC,GAAG,CAAC;IAE1D,OAAO;AACJ,QAAA,KAAK;AACL,QAAA,KAAK;QACL,EAAE;QACF,IAAI;QACJ,MAAM;QACN,MAAM;QACN,QAAQ;QACR;KACF;AACJ;;;;"}

package/css/index.cjs

@@ -7,10 +7,10 @@ var oncss = require('oncss');
 
 const breakpoints = {
     xs: 0,
-    sm: 600,
-    md: 900,
-    lg: 1200,
-    xl: 1536
+    sm: 640,
+    md: 768,
+    lg: 1024,
+    xl: 1280,
 };
 const css = (props, options) => {
     const cssOptions = Object.assign(Object.assign({}, options), { breakpoints,

package/css/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/css/index.ts"],"sourcesContent":["import getValue from \"./getValue\"\nimport getProps from \"./getProps\"\nimport aliases from \"./aliases\"\nimport { Aliases, BreakpointKeys, CSSOptionProps, CSSProps } from './types'\nimport { css as _css } from \"oncss\"\n\nexport {\n    getValue,\n    getProps\n}\n\nexport const breakpoints = {\n    xs: 0,\n    sm: 600,\n    md: 900,\n    lg: 1200,\n    xl: 1536\n}\n\nexport const css = (props: CSSProps, options?: CSSOptionProps) => {\n    const cssOptions: CSSOptionProps = {\n        ...options,\n        breakpoints,\n        aliases,\n        getValue: (p: any, v: any, _c: any, dept) => {\n            if (options?.getValue) {\n                let _val = options?.getValue(p, v, _c, dept)\n                if (_val) return _val\n            }\n            return getValue(p, v, _c)\n        },\n        getProps: (p: any, v: any, _c: any, dept) => {\n            if (options?.getProps) {\n                let _p = options?.getProps(p, v, _c, dept)\n                if (_p) return _p\n            }\n            return getProps(p, v, _c)\n        },\n    }\n    return _css<Aliases, BreakpointKeys>(props, cssOptions)\n}\n\nexport const adjustColor = (hex: string, factor: number) => {\n\n    hex = hex.replace(/^#/, '')\n\n    let r = parseInt(hex.slice(0, 2), 16)\n    let g = parseInt(hex.slice(2, 4), 16)\n    let b = parseInt(hex.slice(4, 6), 16)\n\n    r = Math.floor(r * factor)\n    g = Math.floor(g * factor)\n    b = Math.floor(b * factor)\n\n    r = Math.min(255, Math.max(0, r))\n    g = Math.min(255, Math.max(0, g))\n    b = Math.min(255, Math.max(0, b))\n\n    return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;\n}\n\nexport const adjustTextContrast = (color: string) => {\n    color = color.replace(/^#/, '')\n    const r = parseInt(color.slice(0, 2), 16);\n    const g = parseInt(color.slice(2, 4), 16);\n    const b = parseInt(color.slice(4, 6), 16);\n\n    const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;\n    return luminance > 0.5 ? '#111111' : '#FFFFFF';\n}\n\nexport const alpha = (color: string, opacity = 1) => {\n    if (typeof opacity !== 'number') return color\n    let _opacity = opacity * 100\n    if (!color.startsWith(\"#\")) throw new Error(`color must be hex`)\n    return (color + (`0${Math.round((255 / 100) * _opacity).toString(16)}`.slice(-2))).toUpperCase();\n};\n\n"],"names":["_css"],"mappings":"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"}
+{"version":3,"file":"index.cjs","sources":["../../src/css/index.ts"],"sourcesContent":["import getValue from \"./getValue\"\nimport getProps from \"./getProps\"\nimport aliases from \"./aliases\"\nimport { Aliases, BreakpointKeys, CSSOptionProps, CSSProps } from './types'\nimport { css as _css } from \"oncss\"\n\nexport {\n    getValue,\n    getProps\n}\n\nexport const breakpoints = {\n    xs: 0,\n    sm: 640,\n    md: 768,\n    lg: 1024,\n    xl: 1280,\n}\n\nexport const css = (props: CSSProps, options?: CSSOptionProps) => {\n    const cssOptions: CSSOptionProps = {\n        ...options,\n        breakpoints,\n        aliases,\n        getValue: (p: any, v: any, _c: any, dept) => {\n            if (options?.getValue) {\n                let _val = options?.getValue(p, v, _c, dept)\n                if (_val) return _val\n            }\n            return getValue(p, v, _c)\n        },\n        getProps: (p: any, v: any, _c: any, dept) => {\n            if (options?.getProps) {\n                let _p = options?.getProps(p, v, _c, dept)\n                if (_p) return _p\n            }\n            return getProps(p, v, _c)\n        },\n    }\n    return _css<Aliases, BreakpointKeys>(props, cssOptions)\n}\n\nexport const adjustColor = (hex: string, factor: number) => {\n\n    hex = hex.replace(/^#/, '')\n\n    let r = parseInt(hex.slice(0, 2), 16)\n    let g = parseInt(hex.slice(2, 4), 16)\n    let b = parseInt(hex.slice(4, 6), 16)\n\n    r = Math.floor(r * factor)\n    g = Math.floor(g * factor)\n    b = Math.floor(b * factor)\n\n    r = Math.min(255, Math.max(0, r))\n    g = Math.min(255, Math.max(0, g))\n    b = Math.min(255, Math.max(0, b))\n\n    return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;\n}\n\nexport const adjustTextContrast = (color: string) => {\n    color = color.replace(/^#/, '')\n    const r = parseInt(color.slice(0, 2), 16);\n    const g = parseInt(color.slice(2, 4), 16);\n    const b = parseInt(color.slice(4, 6), 16);\n\n    const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;\n    return luminance > 0.5 ? '#111111' : '#FFFFFF';\n}\n\nexport const alpha = (color: string, opacity = 1) => {\n    if (typeof opacity !== 'number') return color\n    let _opacity = opacity * 100\n    if (!color.startsWith(\"#\")) throw new Error(`color must be hex`)\n    return (color + (`0${Math.round((255 / 100) * _opacity).toString(16)}`.slice(-2))).toUpperCase();\n};\n\n"],"names":["_css"],"mappings":"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"}

package/css/index.js

@@ -5,10 +5,10 @@ import { css as css$1 } from 'oncss';
 
 const breakpoints = {
     xs: 0,
-    sm: 600,
-    md: 900,
-    lg: 1200,
-    xl: 1536
+    sm: 640,
+    md: 768,
+    lg: 1024,
+    xl: 1280,
 };
 const css = (props, options) => {
     const cssOptions = Object.assign(Object.assign({}, options), { breakpoints,

package/css/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/css/index.ts"],"sourcesContent":["import getValue from \"./getValue\"\nimport getProps from \"./getProps\"\nimport aliases from \"./aliases\"\nimport { Aliases, BreakpointKeys, CSSOptionProps, CSSProps } from './types'\nimport { css as _css } from \"oncss\"\n\nexport {\n    getValue,\n    getProps\n}\n\nexport const breakpoints = {\n    xs: 0,\n    sm: 600,\n    md: 900,\n    lg: 1200,\n    xl: 1536\n}\n\nexport const css = (props: CSSProps, options?: CSSOptionProps) => {\n    const cssOptions: CSSOptionProps = {\n        ...options,\n        breakpoints,\n        aliases,\n        getValue: (p: any, v: any, _c: any, dept) => {\n            if (options?.getValue) {\n                let _val = options?.getValue(p, v, _c, dept)\n                if (_val) return _val\n            }\n            return getValue(p, v, _c)\n        },\n        getProps: (p: any, v: any, _c: any, dept) => {\n            if (options?.getProps) {\n                let _p = options?.getProps(p, v, _c, dept)\n                if (_p) return _p\n            }\n            return getProps(p, v, _c)\n        },\n    }\n    return _css<Aliases, BreakpointKeys>(props, cssOptions)\n}\n\nexport const adjustColor = (hex: string, factor: number) => {\n\n    hex = hex.replace(/^#/, '')\n\n    let r = parseInt(hex.slice(0, 2), 16)\n    let g = parseInt(hex.slice(2, 4), 16)\n    let b = parseInt(hex.slice(4, 6), 16)\n\n    r = Math.floor(r * factor)\n    g = Math.floor(g * factor)\n    b = Math.floor(b * factor)\n\n    r = Math.min(255, Math.max(0, r))\n    g = Math.min(255, Math.max(0, g))\n    b = Math.min(255, Math.max(0, b))\n\n    return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;\n}\n\nexport const adjustTextContrast = (color: string) => {\n    color = color.replace(/^#/, '')\n    const r = parseInt(color.slice(0, 2), 16);\n    const g = parseInt(color.slice(2, 4), 16);\n    const b = parseInt(color.slice(4, 6), 16);\n\n    const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;\n    return luminance > 0.5 ? '#111111' : '#FFFFFF';\n}\n\nexport const alpha = (color: string, opacity = 1) => {\n    if (typeof opacity !== 'number') return color\n    let _opacity = opacity * 100\n    if (!color.startsWith(\"#\")) throw new Error(`color must be hex`)\n    return (color + (`0${Math.round((255 / 100) * _opacity).toString(16)}`.slice(-2))).toUpperCase();\n};\n\n"],"names":["_css"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../src/css/index.ts"],"sourcesContent":["import getValue from \"./getValue\"\nimport getProps from \"./getProps\"\nimport aliases from \"./aliases\"\nimport { Aliases, BreakpointKeys, CSSOptionProps, CSSProps } from './types'\nimport { css as _css } from \"oncss\"\n\nexport {\n    getValue,\n    getProps\n}\n\nexport const breakpoints = {\n    xs: 0,\n    sm: 640,\n    md: 768,\n    lg: 1024,\n    xl: 1280,\n}\n\nexport const css = (props: CSSProps, options?: CSSOptionProps) => {\n    const cssOptions: CSSOptionProps = {\n        ...options,\n        breakpoints,\n        aliases,\n        getValue: (p: any, v: any, _c: any, dept) => {\n            if (options?.getValue) {\n                let _val = options?.getValue(p, v, _c, dept)\n                if (_val) return _val\n            }\n            return getValue(p, v, _c)\n        },\n        getProps: (p: any, v: any, _c: any, dept) => {\n            if (options?.getProps) {\n                let _p = options?.getProps(p, v, _c, dept)\n                if (_p) return _p\n            }\n            return getProps(p, v, _c)\n        },\n    }\n    return _css<Aliases, BreakpointKeys>(props, cssOptions)\n}\n\nexport const adjustColor = (hex: string, factor: number) => {\n\n    hex = hex.replace(/^#/, '')\n\n    let r = parseInt(hex.slice(0, 2), 16)\n    let g = parseInt(hex.slice(2, 4), 16)\n    let b = parseInt(hex.slice(4, 6), 16)\n\n    r = Math.floor(r * factor)\n    g = Math.floor(g * factor)\n    b = Math.floor(b * factor)\n\n    r = Math.min(255, Math.max(0, r))\n    g = Math.min(255, Math.max(0, g))\n    b = Math.min(255, Math.max(0, b))\n\n    return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;\n}\n\nexport const adjustTextContrast = (color: string) => {\n    color = color.replace(/^#/, '')\n    const r = parseInt(color.slice(0, 2), 16);\n    const g = parseInt(color.slice(2, 4), 16);\n    const b = parseInt(color.slice(4, 6), 16);\n\n    const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;\n    return luminance > 0.5 ? '#111111' : '#FFFFFF';\n}\n\nexport const alpha = (color: string, opacity = 1) => {\n    if (typeof opacity !== 'number') return color\n    let _opacity = opacity * 100\n    if (!color.startsWith(\"#\")) throw new Error(`color must be hex`)\n    return (color + (`0${Math.round((255 / 100) * _opacity).toString(16)}`.slice(-2))).toUpperCase();\n};\n\n"],"names":["_css"],"mappings":";;;;;AAWO,MAAM,WAAW,GAAG;AACvB,IAAA,EAAE,EAAE,CAAC;AACL,IAAA,EAAE,EAAE,GAAG;AACP,IAAA,EAAE,EAAE,GAAG;AACP,IAAA,EAAE,EAAE,IAAI;AACR,IAAA,EAAE,EAAE,IAAI;;MAGC,GAAG,GAAG,CAAC,KAAe,EAAE,OAAwB,KAAI;AAC7D,IAAA,MAAM,UAAU,GAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACT,OAAO,CAAA,EAAA,EACV,WAAW;AACX,QAAA,OAAO,EACP,QAAQ,EAAE,CAAC,CAAM,EAAE,CAAM,EAAE,EAAO,EAAE,IAAI,KAAI;YACxC,IAAI,OAAO,aAAP,OAAO,KAAA,MAAA,GAAA,MAAA,GAAP,OAAO,CAAE,QAAQ,EAAE;AACnB,gBAAA,IAAI,IAAI,GAAG,OAAO,aAAP,OAAO,KAAA,MAAA,GAAA,MAAA,GAAP,OAAO,CAAE,QAAQ,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,IAAI,CAAC;AAC5C,gBAAA,IAAI,IAAI;AAAE,oBAAA,OAAO,IAAI;YACzB;YACA,OAAO,QAAQ,CAAC,CAAC,EAAE,CAAK,CAAC;AAC7B,QAAA,CAAC,EACD,QAAQ,EAAE,CAAC,CAAM,EAAE,CAAM,EAAE,EAAO,EAAE,IAAI,KAAI;YACxC,IAAI,OAAO,aAAP,OAAO,KAAA,MAAA,GAAA,MAAA,GAAP,OAAO,CAAE,QAAQ,EAAE;AACnB,gBAAA,IAAI,EAAE,GAAG,OAAO,aAAP,OAAO,KAAA,MAAA,GAAA,MAAA,GAAP,OAAO,CAAE,QAAQ,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,IAAI,CAAC;AAC1C,gBAAA,IAAI,EAAE;AAAE,oBAAA,OAAO,EAAE;YACrB;YACA,OAAO,QAAQ,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC;AAC7B,QAAA,CAAC,GACJ;AACD,IAAA,OAAOA,KAAI,CAA0B,KAAK,EAAE,UAAU,CAAC;AAC3D;MAEa,WAAW,GAAG,CAAC,GAAW,EAAE,MAAc,KAAI;IAEvD,GAAG,GAAG,GAAG,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC;AAE3B,IAAA,IAAI,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC;AACrC,IAAA,IAAI,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC;AACrC,IAAA,IAAI,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC;IAErC,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,MAAM,CAAC;IAC1B,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,MAAM,CAAC;IAC1B,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,MAAM,CAAC;AAE1B,IAAA,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;AACjC,IAAA,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;AACjC,IAAA,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;AAEjC,IAAA,OAAO,IAAI,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CAAA,EAAG,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CAAA,EAAG,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,EAAE;AACpH;AAEO,MAAM,kBAAkB,GAAG,CAAC,KAAa,KAAI;IAChD,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC;AAC/B,IAAA,MAAM,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC;AACzC,IAAA,MAAM,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC;AACzC,IAAA,MAAM,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC;AAEzC,IAAA,MAAM,SAAS,GAAG,CAAC,KAAK,GAAG,CAAC,GAAG,KAAK,GAAG,CAAC,GAAG,KAAK,GAAG,CAAC,IAAI,GAAG;IAC3D,OAAO,SAAS,GAAG,GAAG,GAAG,SAAS,GAAG,SAAS;AAClD;AAEO,MAAM,KAAK,GAAG,CAAC,KAAa,EAAE,OAAO,GAAG,CAAC,KAAI;IAChD,IAAI,OAAO,OAAO,KAAK,QAAQ;AAAE,QAAA,OAAO,KAAK;AAC7C,IAAA,IAAI,QAAQ,GAAG,OAAO,GAAG,GAAG;AAC5B,IAAA,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,GAAG,CAAC;AAAE,QAAA,MAAM,IAAI,KAAK,CAAC,CAAA,iBAAA,CAAmB,CAAC;AAChE,IAAA,OAAO,CAAC,KAAK,IAAI,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,GAAG,GAAG,IAAI,QAAQ,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAA,CAAE,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,EAAE,WAAW,EAAE;AACpG;;;;"}

package/index.cjs

@@ -7,18 +7,18 @@ var useColorTemplate = require('./hooks/useColorTemplate.cjs');
 var useBreakpoint = require('./breakpoint/useBreakpoint.cjs');
 var useBreakpointProps = require('./breakpoint/useBreakpointProps.cjs');
 var useInterface = require('./hooks/useInterface.cjs');
-var index$5 = require('./hooks/useTransition/index.cjs');
+var index$6 = require('./hooks/useTransition/index.cjs');
 var useMergeRefs = require('./hooks/useMergeRefs.cjs');
-var index$4 = require('./Transition/index.cjs');
+var index$5 = require('./Transition/index.cjs');
 var index = require('./AppRoot/index.cjs');
-var usePortal = require('./hooks/usePortal.cjs');
+var index$3 = require('./Portal/index.cjs');
 var Renderar = require('./AppRoot/Renderar.cjs');
-var index$3 = require('./Document/index.cjs');
+var index$4 = require('./Document/index.cjs');
 var AppRootProvider = require('./AppRoot/AppRootProvider.cjs');
 var CSSCacheProvider = require('./css/CSSCacheProvider.cjs');
 var index$1 = require('./Iframe/index.cjs');
-var index$6 = require('./css/index.cjs');
-var index$7 = require('./theme/index.cjs');
+var index$7 = require('./css/index.cjs');
+var index$8 = require('./theme/index.cjs');
 var getValue = require('./css/getValue.cjs');
 var getProps = require('./css/getProps.cjs');
 var ThemeProvider = require('./theme/ThemeProvider.cjs');
@@ -36,24 +36,24 @@ exports.useColorTemplate = useColorTemplate;
 exports.useBreakpoint = useBreakpoint;
 exports.useBreakpointProps = useBreakpointProps;
 exports.useInterface = useInterface;
-exports.useTransition = index$5;
+exports.useTransition = index$6;
 exports.useMergeRefs = useMergeRefs;
-exports.Transition = index$4;
+exports.Transition = index$5;
 exports.AppRoot = index;
-exports.usePortal = usePortal;
+exports.Portal = index$3;
 exports.Renderar = Renderar.Renderar;
-exports.useDocument = index$3.useDocument;
+exports.useDocument = index$4.useDocument;
 exports.useAppRootElement = AppRootProvider.useAppRootElement;
 exports.getCSSCache = CSSCacheProvider.getCSSCache;
 exports.useCSSCache = CSSCacheProvider.useCSSCache;
 exports.useCSSCacheId = CSSCacheProvider.useCSSCacheId;
 exports.Iframe = index$1;
-exports.adjustColor = index$6.adjustColor;
-exports.adjustTextContrast = index$6.adjustTextContrast;
-exports.alpha = index$6.alpha;
-exports.breakpoints = index$6.breakpoints;
-exports.css = index$6.css;
-exports.themeRootClass = index$7.themeRootClass;
+exports.adjustColor = index$7.adjustColor;
+exports.adjustTextContrast = index$7.adjustTextContrast;
+exports.alpha = index$7.alpha;
+exports.breakpoints = index$7.breakpoints;
+exports.css = index$7.css;
+exports.themeRootClass = index$8.themeRootClass;
 exports.getValue = getValue;
 exports.getProps = getProps;
 exports.ThemeProvider = ThemeProvider;

package/index.d.ts

@@ -9,7 +9,7 @@ export { UseTransitionProps, UseTransitionState, UseTransitionVariant, UseTransi
 export { default as useMergeRefs } from './hooks/useMergeRefs.js';
 export { default as Transition, TransitionProps } from './Transition/index.js';
 export { default as AppRoot, AppRootProps } from './AppRoot/index.js';
-export { default as usePortal } from './hooks/usePortal.js';
+export { default as Portal, PortalProps } from './Portal/index.js';
 export { Renderar } from './AppRoot/Renderar.js';
 export { useDocument } from './Document/index.js';
 export { useAppRootElement } from './AppRoot/AppRootProvider.js';

package/index.js

@@ -9,7 +9,7 @@ export { default as useTransition } from './hooks/useTransition/index.js';
 export { default as useMergeRefs } from './hooks/useMergeRefs.js';
 export { default as Transition } from './Transition/index.js';
 export { default as AppRoot } from './AppRoot/index.js';
-export { default as usePortal } from './hooks/usePortal.js';
+export { default as Portal } from './Portal/index.js';
 export { Renderar } from './AppRoot/Renderar.js';
 export { useDocument } from './Document/index.js';
 export { useAppRootElement } from './AppRoot/AppRootProvider.js';

package/package.json

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

package/hooks/usePortal.cjs

@@ -1,69 +0,0 @@
-"use client";
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var client = require('react-dom/client');
-var core = require('../theme/core.cjs');
-require('../css/getValue.cjs');
-require('oncss');
-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 || {};
-    if (options.autoMount === undefined) {
-        options.autoMount = true;
-    }
-    const [mounted, setMounted] = React.useState(options.autoMount);
-    const theme = core.useTheme();
-    const doc = index.useDocument();
-    const appRoot = AppRootProvider.useAppRootElement();
-    const cacheId = CSSCacheProvider.useCSSCacheId();
-    const { el, root } = React.useMemo(() => {
-        const el = doc === null || doc === void 0 ? void 0 : doc.document.createElement("div");
-        const root = client.createRoot(el);
-        return { el, root };
-    }, [options.autoMount]);
-    const container = () => {
-        const container = (options === null || options === void 0 ? void 0 : options.container) || appRoot;
-        if (!container)
-            throw new Error(`Container not found for portal. Please ensure that AppRoot is present in the application tree.`);
-        return container;
-    };
-    const mount = () => {
-        const cont = container();
-        if (!cont.contains(el)) {
-            cont.appendChild(el);
-        }
-        root.render(jsxRuntime.jsx(index$1, { disableRenderar: true, theme: theme.name, CSSCacheId: cacheId, document: doc === null || doc === void 0 ? void 0 : doc.document, children: children }));
-    };
-    const unmount = () => {
-        root.render(null);
-        el === null || el === void 0 ? void 0 : el.remove();
-    };
-    React.useEffect(() => {
-        (mounted && appRoot) ? mount() : unmount();
-    }, [mounted, appRoot]);
-    React.useEffect(() => {
-        if (mounted && appRoot)
-            mount();
-    }, [children, appRoot]);
-    React.useEffect(() => {
-        return () => {
-            unmount();
-        };
-    }, []);
-    return {
-        isMount: () => mounted,
-        mount: () => setMounted(true),
-        unmount: () => setMounted(false)
-    };
-}
-
-module.exports = usePortal;
-//# sourceMappingURL=usePortal.cjs.map

package/hooks/usePortal.cjs.map

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

package/hooks/usePortal.d.ts

@@ -1,14 +0,0 @@
-import React__default from 'react';
-
-type UsePortalOptions = {
-    container?: HTMLElement;
-    autoMount?: boolean;
-};
-declare function usePortal(children: React__default.ReactNode, options?: UsePortalOptions): {
-    isMount: () => boolean;
-    mount: () => void;
-    unmount: () => void;
-};
-
-export { usePortal as default };
-export type { UsePortalOptions };

package/hooks/usePortal.js

@@ -1,67 +0,0 @@
-"use client";
-import { jsx } from 'react/jsx-runtime';
-import React__default, { useMemo, useEffect } from 'react';
-import { createRoot } from 'react-dom/client';
-import { useTheme } from '../theme/core.js';
-import '../css/getValue.js';
-import 'oncss';
-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 || {};
-    if (options.autoMount === undefined) {
-        options.autoMount = true;
-    }
-    const [mounted, setMounted] = React__default.useState(options.autoMount);
-    const theme = useTheme();
-    const doc = useDocument();
-    const appRoot = useAppRootElement();
-    const cacheId = useCSSCacheId();
-    const { el, root } = useMemo(() => {
-        const el = doc === null || doc === void 0 ? void 0 : doc.document.createElement("div");
-        const root = createRoot(el);
-        return { el, root };
-    }, [options.autoMount]);
-    const container = () => {
-        const container = (options === null || options === void 0 ? void 0 : options.container) || appRoot;
-        if (!container)
-            throw new Error(`Container not found for portal. Please ensure that AppRoot is present in the application tree.`);
-        return container;
-    };
-    const mount = () => {
-        const cont = container();
-        if (!cont.contains(el)) {
-            cont.appendChild(el);
-        }
-        root.render(jsx(AppRoot, { disableRenderar: true, theme: theme.name, CSSCacheId: cacheId, document: doc === null || doc === void 0 ? void 0 : doc.document, children: children }));
-    };
-    const unmount = () => {
-        root.render(null);
-        el === null || el === void 0 ? void 0 : el.remove();
-    };
-    useEffect(() => {
-        (mounted && appRoot) ? mount() : unmount();
-    }, [mounted, appRoot]);
-    useEffect(() => {
-        if (mounted && appRoot)
-            mount();
-    }, [children, appRoot]);
-    useEffect(() => {
-        return () => {
-            unmount();
-        };
-    }, []);
-    return {
-        isMount: () => mounted,
-        mount: () => setMounted(true),
-        unmount: () => setMounted(false)
-    };
-}
-
-export { usePortal as default };
-//# sourceMappingURL=usePortal.js.map

package/hooks/usePortal.js.map

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