@xanui/core 1.1.22 → 1.1.24
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/AppRoot/Renderar.d.ts +10 -0
- package/AppRoot/Renderar.js +35 -0
- package/AppRoot/Renderar.js.map +1 -0
- package/AppRoot/Renderar.mjs +35 -0
- package/AppRoot/Renderar.mjs.map +1 -0
- package/AppRoot/index.js +2 -2
- package/AppRoot/index.js.map +1 -1
- package/AppRoot/index.mjs +2 -2
- package/AppRoot/index.mjs.map +1 -1
- package/hooks/usePortal.js +0 -3
- package/hooks/usePortal.js.map +1 -1
- package/hooks/usePortal.mjs +0 -3
- package/hooks/usePortal.mjs.map +1 -1
- package/index.d.ts +1 -0
- package/index.js +1 -1
- package/index.mjs +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
'use strict';Object.defineProperty(exports,'__esModule',{value:true});var jsxRuntime=require('react/jsx-runtime'),React=require('react');const Components = [];
|
|
2
|
+
let dispatch;
|
|
3
|
+
class Renderar {
|
|
4
|
+
static render(component) {
|
|
5
|
+
Components.push(component);
|
|
6
|
+
if (dispatch) {
|
|
7
|
+
dispatch();
|
|
8
|
+
}
|
|
9
|
+
return {
|
|
10
|
+
unrender: () => {
|
|
11
|
+
this.unrender(component);
|
|
12
|
+
}
|
|
13
|
+
};
|
|
14
|
+
}
|
|
15
|
+
static unrender(component) {
|
|
16
|
+
const index = Components.indexOf(component);
|
|
17
|
+
if (index > -1) {
|
|
18
|
+
Components.splice(index, 1);
|
|
19
|
+
if (dispatch) {
|
|
20
|
+
dispatch();
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
const RenderRenderar = () => {
|
|
26
|
+
const [_, setState] = React.useState(0);
|
|
27
|
+
if (!dispatch) {
|
|
28
|
+
dispatch = () => {
|
|
29
|
+
setState(prev => prev + 1);
|
|
30
|
+
};
|
|
31
|
+
}
|
|
32
|
+
return Components.map((Component, index) => {
|
|
33
|
+
return jsxRuntime.jsx(Component, {}, index);
|
|
34
|
+
});
|
|
35
|
+
};exports.RenderRenderar=RenderRenderar;exports.Renderar=Renderar;//# sourceMappingURL=Renderar.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Renderar.js","sources":["../../src/AppRoot/Renderar.tsx"],"sourcesContent":["import React, { ReactElement } from \"react\";\n\nconst Components: React.FunctionComponent[] = []\nlet dispatch: Function\n\nexport class Renderar {\n static render(component: React.FunctionComponent) {\n Components.push(component);\n if (dispatch) {\n dispatch();\n }\n\n return {\n unrender: () => {\n this.unrender(component);\n }\n }\n }\n\n static unrender(component: React.FunctionComponent) {\n const index = Components.indexOf(component);\n if (index > -1) {\n Components.splice(index, 1);\n if (dispatch) {\n dispatch();\n }\n }\n }\n}\n\nexport const RenderRenderar = () => {\n const [_, setState] = React.useState<number>(0);\n\n if (!dispatch) {\n dispatch = () => {\n setState(prev => prev + 1);\n }\n }\n\n return Components.map((Component, index): ReactElement => {\n return <Component key={index} />\n });\n}\n"],"names":["_jsx"],"mappings":"yIAEA,MAAM,UAAU,GAA8B,EAAE;AAChD,IAAI,QAAkB;MAET,QAAQ,CAAA;IAClB,OAAO,MAAM,CAAC,SAAkC,EAAA;AAC7C,QAAA,UAAU,CAAC,IAAI,CAAC,SAAS,CAAC;QAC1B,IAAI,QAAQ,EAAE;AACX,YAAA,QAAQ,EAAE;QACb;QAEA,OAAO;YACJ,QAAQ,EAAE,MAAK;AACZ,gBAAA,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC;YAC3B;SACF;IACJ;IAEA,OAAO,QAAQ,CAAC,SAAkC,EAAA;QAC/C,MAAM,KAAK,GAAG,UAAU,CAAC,OAAO,CAAC,SAAS,CAAC;AAC3C,QAAA,IAAI,KAAK,GAAG,EAAE,EAAE;AACb,YAAA,UAAU,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC;YAC3B,IAAI,QAAQ,EAAE;AACX,gBAAA,QAAQ,EAAE;YACb;QACH;IACH;AACF;AAEM,MAAM,cAAc,GAAG,MAAK;AAChC,IAAA,MAAM,CAAC,CAAC,EAAE,QAAQ,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAS,CAAC,CAAC;IAE/C,IAAI,CAAC,QAAQ,EAAE;QACZ,QAAQ,GAAG,MAAK;YACb,QAAQ,CAAC,IAAI,IAAI,IAAI,GAAG,CAAC,CAAC;AAC7B,QAAA,CAAC;IACJ;IAEA,OAAO,UAAU,CAAC,GAAG,CAAC,CAAC,SAAS,EAAE,KAAK,KAAkB;AACtD,QAAA,OAAOA,cAAA,CAAC,SAAS,EAAA,EAAA,EAAM,KAAK,CAAI;AACnC,IAAA,CAAC,CAAC;AACL"}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import {jsx}from'react/jsx-runtime';import React__default from'react';const Components = [];
|
|
2
|
+
let dispatch;
|
|
3
|
+
class Renderar {
|
|
4
|
+
static render(component) {
|
|
5
|
+
Components.push(component);
|
|
6
|
+
if (dispatch) {
|
|
7
|
+
dispatch();
|
|
8
|
+
}
|
|
9
|
+
return {
|
|
10
|
+
unrender: () => {
|
|
11
|
+
this.unrender(component);
|
|
12
|
+
}
|
|
13
|
+
};
|
|
14
|
+
}
|
|
15
|
+
static unrender(component) {
|
|
16
|
+
const index = Components.indexOf(component);
|
|
17
|
+
if (index > -1) {
|
|
18
|
+
Components.splice(index, 1);
|
|
19
|
+
if (dispatch) {
|
|
20
|
+
dispatch();
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
const RenderRenderar = () => {
|
|
26
|
+
const [_, setState] = React__default.useState(0);
|
|
27
|
+
if (!dispatch) {
|
|
28
|
+
dispatch = () => {
|
|
29
|
+
setState(prev => prev + 1);
|
|
30
|
+
};
|
|
31
|
+
}
|
|
32
|
+
return Components.map((Component, index) => {
|
|
33
|
+
return jsx(Component, {}, index);
|
|
34
|
+
});
|
|
35
|
+
};export{RenderRenderar,Renderar};//# sourceMappingURL=Renderar.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Renderar.mjs","sources":["../../src/AppRoot/Renderar.tsx"],"sourcesContent":["import React, { ReactElement } from \"react\";\n\nconst Components: React.FunctionComponent[] = []\nlet dispatch: Function\n\nexport class Renderar {\n static render(component: React.FunctionComponent) {\n Components.push(component);\n if (dispatch) {\n dispatch();\n }\n\n return {\n unrender: () => {\n this.unrender(component);\n }\n }\n }\n\n static unrender(component: React.FunctionComponent) {\n const index = Components.indexOf(component);\n if (index > -1) {\n Components.splice(index, 1);\n if (dispatch) {\n dispatch();\n }\n }\n }\n}\n\nexport const RenderRenderar = () => {\n const [_, setState] = React.useState<number>(0);\n\n if (!dispatch) {\n dispatch = () => {\n setState(prev => prev + 1);\n }\n }\n\n return Components.map((Component, index): ReactElement => {\n return <Component key={index} />\n });\n}\n"],"names":["React","_jsx"],"mappings":"sEAEA,MAAM,UAAU,GAA8B,EAAE;AAChD,IAAI,QAAkB;MAET,QAAQ,CAAA;IAClB,OAAO,MAAM,CAAC,SAAkC,EAAA;AAC7C,QAAA,UAAU,CAAC,IAAI,CAAC,SAAS,CAAC;QAC1B,IAAI,QAAQ,EAAE;AACX,YAAA,QAAQ,EAAE;QACb;QAEA,OAAO;YACJ,QAAQ,EAAE,MAAK;AACZ,gBAAA,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC;YAC3B;SACF;IACJ;IAEA,OAAO,QAAQ,CAAC,SAAkC,EAAA;QAC/C,MAAM,KAAK,GAAG,UAAU,CAAC,OAAO,CAAC,SAAS,CAAC;AAC3C,QAAA,IAAI,KAAK,GAAG,EAAE,EAAE;AACb,YAAA,UAAU,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC;YAC3B,IAAI,QAAQ,EAAE;AACX,gBAAA,QAAQ,EAAE;YACb;QACH;IACH;AACF;AAEM,MAAM,cAAc,GAAG,MAAK;AAChC,IAAA,MAAM,CAAC,CAAC,EAAE,QAAQ,CAAC,GAAGA,cAAK,CAAC,QAAQ,CAAS,CAAC,CAAC;IAE/C,IAAI,CAAC,QAAQ,EAAE;QACZ,QAAQ,GAAG,MAAK;YACb,QAAQ,CAAC,IAAI,IAAI,IAAI,GAAG,CAAC,CAAC;AAC7B,QAAA,CAAC;IACJ;IAEA,OAAO,UAAU,CAAC,GAAG,CAAC,CAAC,SAAS,EAAE,KAAK,KAAkB;AACtD,QAAA,OAAOC,GAAA,CAAC,SAAS,EAAA,EAAA,EAAM,KAAK,CAAI;AACnC,IAAA,CAAC,CAAC;AACL"}
|
package/AppRoot/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
'use strict';Object.defineProperty(exports,'__esModule',{value:true});var tslib=require('tslib'),jsxRuntime=require('react/jsx-runtime'),React=require('react'),index$1=require('../theme/index.js'),BreakpointProvider=require('../breakpoint/BreakpointProvider.js'),index=require('../css/index.js'),useScrollbar=require('../hooks/useScrollbar.js'),ThemeDefaultOptions=require('../theme/ThemeDefaultOptions.js'),createTheme=require('../theme/createTheme.js'),ThemeProvider=require('../theme/ThemeProvider.js');createTheme.createTheme("light", { colors: ThemeDefaultOptions.lightColorPallete });
|
|
1
|
+
'use strict';Object.defineProperty(exports,'__esModule',{value:true});var tslib=require('tslib'),jsxRuntime=require('react/jsx-runtime'),React=require('react'),index$1=require('../theme/index.js'),BreakpointProvider=require('../breakpoint/BreakpointProvider.js'),index=require('../css/index.js'),useScrollbar=require('../hooks/useScrollbar.js'),ThemeDefaultOptions=require('../theme/ThemeDefaultOptions.js'),Renderar=require('./Renderar.js'),createTheme=require('../theme/createTheme.js'),ThemeProvider=require('../theme/ThemeProvider.js');createTheme.createTheme("light", { colors: ThemeDefaultOptions.lightColorPallete });
|
|
2
2
|
createTheme.createTheme("dark", { colors: ThemeDefaultOptions.darkColorPallete });
|
|
3
3
|
const appRootClassName = "xui-app-root";
|
|
4
4
|
const appRootElement = () => document.querySelector(`.${appRootClassName}`);
|
|
@@ -64,5 +64,5 @@ const AppRoot = React.forwardRef((_a, ref) => {
|
|
|
64
64
|
head.appendChild(style);
|
|
65
65
|
});
|
|
66
66
|
}, []);
|
|
67
|
-
return (jsxRuntime.jsx(ThemeProvider.default, Object.assign({ ref: ref, theme: theme }, props, { classNames: [appRootClassName], children: jsxRuntime.
|
|
67
|
+
return (jsxRuntime.jsx(ThemeProvider.default, Object.assign({ ref: ref, theme: theme }, props, { classNames: [appRootClassName], children: jsxRuntime.jsxs(BreakpointProvider.BreakpointProvider, { children: [children, jsxRuntime.jsx(Renderar.RenderRenderar, {})] }) })));
|
|
68
68
|
});exports.appRootElement=appRootElement;exports.default=AppRoot;//# sourceMappingURL=index.js.map
|
package/AppRoot/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/AppRoot/index.tsx"],"sourcesContent":["\nimport React, { useEffect, useMemo } from 'react';\nimport { TagComponentType } from '../Tag/types';\nimport { createTheme, ThemeProvider, ThemeProviderProps, themeRootClass } from '../theme';\nimport { BreakpointProvider } from '../breakpoint';\nimport useScrollbar from '../hooks/useScrollbar';\nimport { css } from '../css';\nimport { darkColorPallete, lightColorPallete } from '../theme/ThemeDefaultOptions';\n\ncreateTheme(\"light\", { colors: lightColorPallete })\ncreateTheme(\"dark\", { colors: darkColorPallete })\n\nexport type AppRootProps<T extends TagComponentType = \"div\"> = ThemeProviderProps<T> & {\n noScrollbarCss?: boolean;\n}\n\nconst appRootClassName = \"xui-app-root\"\nexport const appRootElement = () => document.querySelector(`.${appRootClassName}`) as HTMLDivElement;\n\nconst AppRoot = React.forwardRef(<T extends TagComponentType = \"div\">({ children, noScrollbarCss, theme, ...props }: AppRootProps<T>, ref: React.Ref<any>) => {\n noScrollbarCss ??= false\n\n useMemo(() => {\n if (noScrollbarCss) return;\n useScrollbar({\n themeName: theme,\n root_cls: themeRootClass(theme)\n })\n }, [noScrollbarCss, theme])\n\n useMemo(() => {\n css({\n \"@global\": {\n \"*\": {\n m: 0,\n p: 0,\n outline: \"none\",\n boxSizing: \"border-box\",\n verticalAlign: \"baseline\",\n },\n \"html, body\": {\n minHeight: \"100%\",\n \"-webkit-font-smoothing\": \"antialiased\"\n } as any,\n \"img, picture, video, canvas, svg\": {\n maxWidth: \"100%\",\n display: \"block\"\n },\n \"input, button, textarea, select\": {\n font: \"inherit\"\n },\n \"table\": {\n borderCollapse: \"collapse\",\n borderSpacing: 0\n },\n \"ol, ul\": {\n listStyle: \"none\"\n },\n \"a\": {\n display: \"inline-block\"\n },\n \"p, h1, h2, h3, h4, h5, h6\": {\n overflowWrap: \"break-word\",\n }\n }\n })\n }, [])\n\n useEffect(() => {\n\n const root = document.querySelectorAll(`.${appRootClassName}`)\n if (!root || root.length > 1) {\n throw new Error(\"Multiple AppRoot detected in the application tree. Please ensure that there is only one AppRoot component wrapping your application.\");\n }\n\n\n // move oncss style tags to head\n if (typeof window === 'undefined') return;\n const head = document.getElementsByTagName('head')[0];\n const styles = Array.from(document.querySelectorAll('body style[data-oncss]'));\n styles.forEach((style) => {\n head.appendChild(style);\n });\n }, [])\n\n return (\n <ThemeProvider\n ref={ref}\n theme={theme}\n {...props}\n classNames={[appRootClassName]}\n >\n <BreakpointProvider>\n {children}\n </BreakpointProvider>\n </ThemeProvider>\n )\n})\n\nexport default AppRoot\n\n"],"names":["createTheme","lightColorPallete","darkColorPallete","__rest","useMemo","useScrollbar","themeRootClass","css","useEffect","_jsx","ThemeProvider","BreakpointProvider"],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/AppRoot/index.tsx"],"sourcesContent":["\nimport React, { useEffect, useMemo } from 'react';\nimport { TagComponentType } from '../Tag/types';\nimport { createTheme, ThemeProvider, ThemeProviderProps, themeRootClass } from '../theme';\nimport { BreakpointProvider } from '../breakpoint';\nimport useScrollbar from '../hooks/useScrollbar';\nimport { css } from '../css';\nimport { darkColorPallete, lightColorPallete } from '../theme/ThemeDefaultOptions';\nimport { RenderRenderar } from './Renderar';\n\ncreateTheme(\"light\", { colors: lightColorPallete })\ncreateTheme(\"dark\", { colors: darkColorPallete })\n\nexport type AppRootProps<T extends TagComponentType = \"div\"> = ThemeProviderProps<T> & {\n noScrollbarCss?: boolean;\n}\n\nconst appRootClassName = \"xui-app-root\"\nexport const appRootElement = () => document.querySelector(`.${appRootClassName}`) as HTMLDivElement;\n\nconst AppRoot = React.forwardRef(<T extends TagComponentType = \"div\">({ children, noScrollbarCss, theme, ...props }: AppRootProps<T>, ref: React.Ref<any>) => {\n noScrollbarCss ??= false\n\n useMemo(() => {\n if (noScrollbarCss) return;\n useScrollbar({\n themeName: theme,\n root_cls: themeRootClass(theme)\n })\n }, [noScrollbarCss, theme])\n\n useMemo(() => {\n css({\n \"@global\": {\n \"*\": {\n m: 0,\n p: 0,\n outline: \"none\",\n boxSizing: \"border-box\",\n verticalAlign: \"baseline\",\n },\n \"html, body\": {\n minHeight: \"100%\",\n \"-webkit-font-smoothing\": \"antialiased\"\n } as any,\n \"img, picture, video, canvas, svg\": {\n maxWidth: \"100%\",\n display: \"block\"\n },\n \"input, button, textarea, select\": {\n font: \"inherit\"\n },\n \"table\": {\n borderCollapse: \"collapse\",\n borderSpacing: 0\n },\n \"ol, ul\": {\n listStyle: \"none\"\n },\n \"a\": {\n display: \"inline-block\"\n },\n \"p, h1, h2, h3, h4, h5, h6\": {\n overflowWrap: \"break-word\",\n }\n }\n })\n }, [])\n\n useEffect(() => {\n\n const root = document.querySelectorAll(`.${appRootClassName}`)\n if (!root || root.length > 1) {\n throw new Error(\"Multiple AppRoot detected in the application tree. Please ensure that there is only one AppRoot component wrapping your application.\");\n }\n\n\n // move oncss style tags to head\n if (typeof window === 'undefined') return;\n const head = document.getElementsByTagName('head')[0];\n const styles = Array.from(document.querySelectorAll('body style[data-oncss]'));\n styles.forEach((style) => {\n head.appendChild(style);\n });\n }, [])\n\n return (\n <ThemeProvider\n ref={ref}\n theme={theme}\n {...props}\n classNames={[appRootClassName]}\n >\n <BreakpointProvider>\n {children}\n <RenderRenderar />\n </BreakpointProvider>\n </ThemeProvider>\n )\n})\n\nexport default AppRoot\n\n"],"names":["createTheme","lightColorPallete","darkColorPallete","__rest","useMemo","useScrollbar","themeRootClass","css","useEffect","_jsx","ThemeProvider","_jsxs","BreakpointProvider","RenderRenderar"],"mappings":"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"}
|
package/AppRoot/index.mjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {__rest}from'tslib';import {jsx}from'react/jsx-runtime';import React__default,{useMemo,useEffect}from'react';import {themeRootClass}from'../theme/index.mjs';import {BreakpointProvider}from'../breakpoint/BreakpointProvider.mjs';import {css}from'../css/index.mjs';import useScrollbar from'../hooks/useScrollbar.mjs';import {lightColorPallete,darkColorPallete}from'../theme/ThemeDefaultOptions.mjs';import {createTheme}from'../theme/createTheme.mjs';import ThemeProvider from'../theme/ThemeProvider.mjs';createTheme("light", { colors: lightColorPallete });
|
|
1
|
+
import {__rest}from'tslib';import {jsx,jsxs}from'react/jsx-runtime';import React__default,{useMemo,useEffect}from'react';import {themeRootClass}from'../theme/index.mjs';import {BreakpointProvider}from'../breakpoint/BreakpointProvider.mjs';import {css}from'../css/index.mjs';import useScrollbar from'../hooks/useScrollbar.mjs';import {lightColorPallete,darkColorPallete}from'../theme/ThemeDefaultOptions.mjs';import {RenderRenderar}from'./Renderar.mjs';import {createTheme}from'../theme/createTheme.mjs';import ThemeProvider from'../theme/ThemeProvider.mjs';createTheme("light", { colors: lightColorPallete });
|
|
2
2
|
createTheme("dark", { colors: darkColorPallete });
|
|
3
3
|
const appRootClassName = "xui-app-root";
|
|
4
4
|
const appRootElement = () => document.querySelector(`.${appRootClassName}`);
|
|
@@ -64,5 +64,5 @@ const AppRoot = React__default.forwardRef((_a, ref) => {
|
|
|
64
64
|
head.appendChild(style);
|
|
65
65
|
});
|
|
66
66
|
}, []);
|
|
67
|
-
return (jsx(ThemeProvider, Object.assign({ ref: ref, theme: theme }, props, { classNames: [appRootClassName], children:
|
|
67
|
+
return (jsx(ThemeProvider, Object.assign({ ref: ref, theme: theme }, props, { classNames: [appRootClassName], children: jsxs(BreakpointProvider, { children: [children, jsx(RenderRenderar, {})] }) })));
|
|
68
68
|
});export{appRootElement,AppRoot as default};//# sourceMappingURL=index.mjs.map
|
package/AppRoot/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":["../../src/AppRoot/index.tsx"],"sourcesContent":["\nimport React, { useEffect, useMemo } from 'react';\nimport { TagComponentType } from '../Tag/types';\nimport { createTheme, ThemeProvider, ThemeProviderProps, themeRootClass } from '../theme';\nimport { BreakpointProvider } from '../breakpoint';\nimport useScrollbar from '../hooks/useScrollbar';\nimport { css } from '../css';\nimport { darkColorPallete, lightColorPallete } from '../theme/ThemeDefaultOptions';\n\ncreateTheme(\"light\", { colors: lightColorPallete })\ncreateTheme(\"dark\", { colors: darkColorPallete })\n\nexport type AppRootProps<T extends TagComponentType = \"div\"> = ThemeProviderProps<T> & {\n noScrollbarCss?: boolean;\n}\n\nconst appRootClassName = \"xui-app-root\"\nexport const appRootElement = () => document.querySelector(`.${appRootClassName}`) as HTMLDivElement;\n\nconst AppRoot = React.forwardRef(<T extends TagComponentType = \"div\">({ children, noScrollbarCss, theme, ...props }: AppRootProps<T>, ref: React.Ref<any>) => {\n noScrollbarCss ??= false\n\n useMemo(() => {\n if (noScrollbarCss) return;\n useScrollbar({\n themeName: theme,\n root_cls: themeRootClass(theme)\n })\n }, [noScrollbarCss, theme])\n\n useMemo(() => {\n css({\n \"@global\": {\n \"*\": {\n m: 0,\n p: 0,\n outline: \"none\",\n boxSizing: \"border-box\",\n verticalAlign: \"baseline\",\n },\n \"html, body\": {\n minHeight: \"100%\",\n \"-webkit-font-smoothing\": \"antialiased\"\n } as any,\n \"img, picture, video, canvas, svg\": {\n maxWidth: \"100%\",\n display: \"block\"\n },\n \"input, button, textarea, select\": {\n font: \"inherit\"\n },\n \"table\": {\n borderCollapse: \"collapse\",\n borderSpacing: 0\n },\n \"ol, ul\": {\n listStyle: \"none\"\n },\n \"a\": {\n display: \"inline-block\"\n },\n \"p, h1, h2, h3, h4, h5, h6\": {\n overflowWrap: \"break-word\",\n }\n }\n })\n }, [])\n\n useEffect(() => {\n\n const root = document.querySelectorAll(`.${appRootClassName}`)\n if (!root || root.length > 1) {\n throw new Error(\"Multiple AppRoot detected in the application tree. Please ensure that there is only one AppRoot component wrapping your application.\");\n }\n\n\n // move oncss style tags to head\n if (typeof window === 'undefined') return;\n const head = document.getElementsByTagName('head')[0];\n const styles = Array.from(document.querySelectorAll('body style[data-oncss]'));\n styles.forEach((style) => {\n head.appendChild(style);\n });\n }, [])\n\n return (\n <ThemeProvider\n ref={ref}\n theme={theme}\n {...props}\n classNames={[appRootClassName]}\n >\n <BreakpointProvider>\n {children}\n </BreakpointProvider>\n </ThemeProvider>\n )\n})\n\nexport default AppRoot\n\n"],"names":["React","_jsx"],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":["../../src/AppRoot/index.tsx"],"sourcesContent":["\nimport React, { useEffect, useMemo } from 'react';\nimport { TagComponentType } from '../Tag/types';\nimport { createTheme, ThemeProvider, ThemeProviderProps, themeRootClass } from '../theme';\nimport { BreakpointProvider } from '../breakpoint';\nimport useScrollbar from '../hooks/useScrollbar';\nimport { css } from '../css';\nimport { darkColorPallete, lightColorPallete } from '../theme/ThemeDefaultOptions';\nimport { RenderRenderar } from './Renderar';\n\ncreateTheme(\"light\", { colors: lightColorPallete })\ncreateTheme(\"dark\", { colors: darkColorPallete })\n\nexport type AppRootProps<T extends TagComponentType = \"div\"> = ThemeProviderProps<T> & {\n noScrollbarCss?: boolean;\n}\n\nconst appRootClassName = \"xui-app-root\"\nexport const appRootElement = () => document.querySelector(`.${appRootClassName}`) as HTMLDivElement;\n\nconst AppRoot = React.forwardRef(<T extends TagComponentType = \"div\">({ children, noScrollbarCss, theme, ...props }: AppRootProps<T>, ref: React.Ref<any>) => {\n noScrollbarCss ??= false\n\n useMemo(() => {\n if (noScrollbarCss) return;\n useScrollbar({\n themeName: theme,\n root_cls: themeRootClass(theme)\n })\n }, [noScrollbarCss, theme])\n\n useMemo(() => {\n css({\n \"@global\": {\n \"*\": {\n m: 0,\n p: 0,\n outline: \"none\",\n boxSizing: \"border-box\",\n verticalAlign: \"baseline\",\n },\n \"html, body\": {\n minHeight: \"100%\",\n \"-webkit-font-smoothing\": \"antialiased\"\n } as any,\n \"img, picture, video, canvas, svg\": {\n maxWidth: \"100%\",\n display: \"block\"\n },\n \"input, button, textarea, select\": {\n font: \"inherit\"\n },\n \"table\": {\n borderCollapse: \"collapse\",\n borderSpacing: 0\n },\n \"ol, ul\": {\n listStyle: \"none\"\n },\n \"a\": {\n display: \"inline-block\"\n },\n \"p, h1, h2, h3, h4, h5, h6\": {\n overflowWrap: \"break-word\",\n }\n }\n })\n }, [])\n\n useEffect(() => {\n\n const root = document.querySelectorAll(`.${appRootClassName}`)\n if (!root || root.length > 1) {\n throw new Error(\"Multiple AppRoot detected in the application tree. Please ensure that there is only one AppRoot component wrapping your application.\");\n }\n\n\n // move oncss style tags to head\n if (typeof window === 'undefined') return;\n const head = document.getElementsByTagName('head')[0];\n const styles = Array.from(document.querySelectorAll('body style[data-oncss]'));\n styles.forEach((style) => {\n head.appendChild(style);\n });\n }, [])\n\n return (\n <ThemeProvider\n ref={ref}\n theme={theme}\n {...props}\n classNames={[appRootClassName]}\n >\n <BreakpointProvider>\n {children}\n <RenderRenderar />\n </BreakpointProvider>\n </ThemeProvider>\n )\n})\n\nexport default AppRoot\n\n"],"names":["React","_jsx","_jsxs"],"mappings":"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"}
|
package/hooks/usePortal.js
CHANGED
|
@@ -12,9 +12,6 @@
|
|
|
12
12
|
}, [options.autoMount]);
|
|
13
13
|
const container = () => {
|
|
14
14
|
const rootEle = index.appRootElement();
|
|
15
|
-
if ((options === null || options === void 0 ? void 0 : options.container) && !rootEle.contains(options.container)) {
|
|
16
|
-
throw new Error(`Provided container is not a child of AppRoot. Please ensure that the container is within the AppRoot component.`);
|
|
17
|
-
}
|
|
18
15
|
const container = (options === null || options === void 0 ? void 0 : options.container) || rootEle;
|
|
19
16
|
if (!container)
|
|
20
17
|
throw new Error(`Container not found for portal. Please ensure that AppRoot is present in the application tree.`);
|
package/hooks/usePortal.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"usePortal.js","sources":["../../src/hooks/usePortal.tsx"],"sourcesContent":["import React, { useEffect, useMemo } from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport { ThemeProvider, useTheme } from \"../theme\";\nimport { appRootElement } from \"../AppRoot\";\n\nexport type UsePortalOptions = {\n container?: HTMLElement;\n autoMount?: boolean;\n}\n\nexport function 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 { el, root } = useMemo(() => {\n const el = document.createElement(\"div\");\n const root = createRoot(el);\n return { el, root };\n }, [options.autoMount]);\n\n const container = () => {\n const rootEle = appRootElement();\n
|
|
1
|
+
{"version":3,"file":"usePortal.js","sources":["../../src/hooks/usePortal.tsx"],"sourcesContent":["import React, { useEffect, useMemo } from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport { ThemeProvider, useTheme } from \"../theme\";\nimport { appRootElement } from \"../AppRoot\";\n\nexport type UsePortalOptions = {\n container?: HTMLElement;\n autoMount?: boolean;\n}\n\nexport function 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 { el, root } = useMemo(() => {\n const el = document.createElement(\"div\");\n const root = createRoot(el);\n return { el, root };\n }, [options.autoMount]);\n\n const container = () => {\n const rootEle = appRootElement();\n const container = options?.container || rootEle\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(<ThemeProvider theme={theme.name}>{children}</ThemeProvider>)\n }\n\n const unmount = () => {\n root.render(null)\n el.remove();\n }\n\n\n useEffect(() => {\n if (mounted) {\n mount()\n } else {\n unmount()\n }\n }, [mounted]);\n\n useEffect(() => {\n if (mounted) {\n mount()\n }\n }, [children]);\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":["useTheme","useMemo","createRoot","appRootElement","_jsx","ThemeProvider","useEffect"],"mappings":"yaAUM,SAAU,SAAS,CAAC,QAAyB,EAAE,OAA0B,EAAA;AAC5E,IAAA,OAAO,GAAG,OAAO,IAAI,EAAE;AACvB,IAAA,IAAI,OAAO,CAAC,SAAS,KAAK,SAAS,EAAE;AAClC,QAAA,OAAO,CAAC,SAAS,GAAG,IAAI;IAC3B;AACA,IAAA,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,SAAS,CAAC;AAC/D,IAAA,MAAM,KAAK,GAAGA,aAAQ,EAAE;IACxB,MAAM,EAAE,EAAE,EAAE,IAAI,EAAE,GAAGC,aAAO,CAAC,MAAK;QAC/B,MAAM,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC;AACxC,QAAA,MAAM,IAAI,GAAGC,iBAAU,CAAC,EAAE,CAAC;AAC3B,QAAA,OAAO,EAAE,EAAE,EAAE,IAAI,EAAE;AACtB,IAAA,CAAC,EAAE,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;IAEvB,MAAM,SAAS,GAAG,MAAK;AACpB,QAAA,MAAM,OAAO,GAAGC,oBAAc,EAAE;AAChC,QAAA,MAAM,SAAS,GAAG,CAAA,OAAO,KAAA,IAAA,IAAP,OAAO,KAAA,MAAA,GAAA,MAAA,GAAP,OAAO,CAAE,SAAS,KAAI,OAAO;AAC/C,QAAA,IAAI,CAAC,SAAS;AAAE,YAAA,MAAM,IAAI,KAAK,CAAC,CAAA,8FAAA,CAAgG,CAAC;AACjI,QAAA,OAAO,SAAS;AACnB,IAAA,CAAC;IAED,MAAM,KAAK,GAAG,MAAK;AAChB,QAAA,MAAM,IAAI,GAAG,SAAS,EAAE;QACxB,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE;AACrB,YAAA,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC;QACvB;AACA,QAAA,IAAI,CAAC,MAAM,CAACC,cAAA,CAACC,qBAAa,EAAA,EAAC,KAAK,EAAE,KAAK,CAAC,IAAI,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAiB,CAAC;AAC5E,IAAA,CAAC;IAED,MAAM,OAAO,GAAG,MAAK;AAClB,QAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC;QACjB,EAAE,CAAC,MAAM,EAAE;AACd,IAAA,CAAC;IAGDC,eAAS,CAAC,MAAK;QACZ,IAAI,OAAO,EAAE;AACV,YAAA,KAAK,EAAE;QACV;aAAO;AACJ,YAAA,OAAO,EAAE;QACZ;AACH,IAAA,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC;IAEbA,eAAS,CAAC,MAAK;QACZ,IAAI,OAAO,EAAE;AACV,YAAA,KAAK,EAAE;QACV;AACH,IAAA,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC;IAEdA,eAAS,CAAC,MAAK;AACZ,QAAA,OAAO,MAAK;AACT,YAAA,OAAO,EAAE;AACZ,QAAA,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC;IAEN,OAAO;AACJ,QAAA,OAAO,EAAE,MAAM,OAAO;AACtB,QAAA,KAAK,EAAE,MAAM,UAAU,CAAC,IAAI,CAAC;AAC7B,QAAA,OAAO,EAAE,MAAM,UAAU,CAAC,KAAK;KACjC;AACJ"}
|
package/hooks/usePortal.mjs
CHANGED
|
@@ -12,9 +12,6 @@ import {jsx}from'react/jsx-runtime';import React__default,{useMemo,useEffect}fro
|
|
|
12
12
|
}, [options.autoMount]);
|
|
13
13
|
const container = () => {
|
|
14
14
|
const rootEle = appRootElement();
|
|
15
|
-
if ((options === null || options === void 0 ? void 0 : options.container) && !rootEle.contains(options.container)) {
|
|
16
|
-
throw new Error(`Provided container is not a child of AppRoot. Please ensure that the container is within the AppRoot component.`);
|
|
17
|
-
}
|
|
18
15
|
const container = (options === null || options === void 0 ? void 0 : options.container) || rootEle;
|
|
19
16
|
if (!container)
|
|
20
17
|
throw new Error(`Container not found for portal. Please ensure that AppRoot is present in the application tree.`);
|
package/hooks/usePortal.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"usePortal.mjs","sources":["../../src/hooks/usePortal.tsx"],"sourcesContent":["import React, { useEffect, useMemo } from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport { ThemeProvider, useTheme } from \"../theme\";\nimport { appRootElement } from \"../AppRoot\";\n\nexport type UsePortalOptions = {\n container?: HTMLElement;\n autoMount?: boolean;\n}\n\nexport function 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 { el, root } = useMemo(() => {\n const el = document.createElement(\"div\");\n const root = createRoot(el);\n return { el, root };\n }, [options.autoMount]);\n\n const container = () => {\n const rootEle = appRootElement();\n
|
|
1
|
+
{"version":3,"file":"usePortal.mjs","sources":["../../src/hooks/usePortal.tsx"],"sourcesContent":["import React, { useEffect, useMemo } from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport { ThemeProvider, useTheme } from \"../theme\";\nimport { appRootElement } from \"../AppRoot\";\n\nexport type UsePortalOptions = {\n container?: HTMLElement;\n autoMount?: boolean;\n}\n\nexport function 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 { el, root } = useMemo(() => {\n const el = document.createElement(\"div\");\n const root = createRoot(el);\n return { el, root };\n }, [options.autoMount]);\n\n const container = () => {\n const rootEle = appRootElement();\n const container = options?.container || rootEle\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(<ThemeProvider theme={theme.name}>{children}</ThemeProvider>)\n }\n\n const unmount = () => {\n root.render(null)\n el.remove();\n }\n\n\n useEffect(() => {\n if (mounted) {\n mount()\n } else {\n unmount()\n }\n }, [mounted]);\n\n useEffect(() => {\n if (mounted) {\n mount()\n }\n }, [children]);\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":["React","_jsx"],"mappings":"kYAUM,SAAU,SAAS,CAAC,QAAyB,EAAE,OAA0B,EAAA;AAC5E,IAAA,OAAO,GAAG,OAAO,IAAI,EAAE;AACvB,IAAA,IAAI,OAAO,CAAC,SAAS,KAAK,SAAS,EAAE;AAClC,QAAA,OAAO,CAAC,SAAS,GAAG,IAAI;IAC3B;AACA,IAAA,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAGA,cAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,SAAS,CAAC;AAC/D,IAAA,MAAM,KAAK,GAAG,QAAQ,EAAE;IACxB,MAAM,EAAE,EAAE,EAAE,IAAI,EAAE,GAAG,OAAO,CAAC,MAAK;QAC/B,MAAM,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC;AACxC,QAAA,MAAM,IAAI,GAAG,UAAU,CAAC,EAAE,CAAC;AAC3B,QAAA,OAAO,EAAE,EAAE,EAAE,IAAI,EAAE;AACtB,IAAA,CAAC,EAAE,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;IAEvB,MAAM,SAAS,GAAG,MAAK;AACpB,QAAA,MAAM,OAAO,GAAG,cAAc,EAAE;AAChC,QAAA,MAAM,SAAS,GAAG,CAAA,OAAO,KAAA,IAAA,IAAP,OAAO,KAAA,MAAA,GAAA,MAAA,GAAP,OAAO,CAAE,SAAS,KAAI,OAAO;AAC/C,QAAA,IAAI,CAAC,SAAS;AAAE,YAAA,MAAM,IAAI,KAAK,CAAC,CAAA,8FAAA,CAAgG,CAAC;AACjI,QAAA,OAAO,SAAS;AACnB,IAAA,CAAC;IAED,MAAM,KAAK,GAAG,MAAK;AAChB,QAAA,MAAM,IAAI,GAAG,SAAS,EAAE;QACxB,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE;AACrB,YAAA,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC;QACvB;AACA,QAAA,IAAI,CAAC,MAAM,CAACC,GAAA,CAAC,aAAa,EAAA,EAAC,KAAK,EAAE,KAAK,CAAC,IAAI,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAiB,CAAC;AAC5E,IAAA,CAAC;IAED,MAAM,OAAO,GAAG,MAAK;AAClB,QAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC;QACjB,EAAE,CAAC,MAAM,EAAE;AACd,IAAA,CAAC;IAGD,SAAS,CAAC,MAAK;QACZ,IAAI,OAAO,EAAE;AACV,YAAA,KAAK,EAAE;QACV;aAAO;AACJ,YAAA,OAAO,EAAE;QACZ;AACH,IAAA,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC;IAEb,SAAS,CAAC,MAAK;QACZ,IAAI,OAAO,EAAE;AACV,YAAA,KAAK,EAAE;QACV;AACH,IAAA,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC;IAEd,SAAS,CAAC,MAAK;AACZ,QAAA,OAAO,MAAK;AACT,YAAA,OAAO,EAAE;AACZ,QAAA,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC;IAEN,OAAO;AACJ,QAAA,OAAO,EAAE,MAAM,OAAO;AACtB,QAAA,KAAK,EAAE,MAAM,UAAU,CAAC,IAAI,CAAC;AAC7B,QAAA,OAAO,EAAE,MAAM,UAAU,CAAC,KAAK;KACjC;AACJ"}
|
package/index.d.ts
CHANGED
|
@@ -11,6 +11,7 @@ export { default as Transition, TransitionElementProps, TransitionProps, Transit
|
|
|
11
11
|
export { default as useScrollbar } from './hooks/useScrollbar.js';
|
|
12
12
|
export { default as AppRoot, AppRootProps, appRootElement } from './AppRoot/index.js';
|
|
13
13
|
export { default as usePortal } from './hooks/usePortal.js';
|
|
14
|
+
export { Renderar } from './AppRoot/Renderar.js';
|
|
14
15
|
export { adjustColor, adjustTextContrast, alpha, breakpoints, css } from './css/index.js';
|
|
15
16
|
export { themeRootClass } from './theme/index.js';
|
|
16
17
|
export { Aliases, BreakpointKeys, CSSBreakpointType, CSSOptionProps, CSSProps, CSSValueType, FN, GlobalCSS } from './css/types.js';
|
package/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
'use strict';Object.defineProperty(exports,'__esModule',{value:true});var index$1=require('./Tag/index.js'),useTagProps=require('./Tag/useTagProps.js'),useAnimation=require('./hooks/useAnimation.js'),useColorTemplate=require('./hooks/useColorTemplate.js'),useBreakpoint=require('./breakpoint/useBreakpoint.js'),useBreakpointProps=require('./breakpoint/useBreakpointProps.js'),RenderServerStyles=require('./RenderServerStyles.js'),isWindow=require('./isWindow.js'),useInterface=require('./hooks/useInterface.js'),index$2=require('./Transition/index.js'),useScrollbar=require('./hooks/useScrollbar.js'),index=require('./AppRoot/index.js'),usePortal=require('./hooks/usePortal.js'),index$3=require('./css/index.js'),index$4=require('./theme/index.js'),getValue=require('./css/getValue.js'),getProps=require('./css/getProps.js'),ThemeProvider=require('./theme/ThemeProvider.js'),createThemeSwitcher=require('./theme/createThemeSwitcher.js'),createTheme=require('./theme/createTheme.js'),core=require('./theme/core.js');exports.Tag=index$1.default;exports.useTagProps=useTagProps.default;exports.animationEases=useAnimation.animationEases;exports.useAnimation=useAnimation.default;exports.useColorTemplate=useColorTemplate.default;exports.useBreakpoint=useBreakpoint.default;exports.useBreakpointProps=useBreakpointProps.default;exports.RenderServerStyles=RenderServerStyles.default;exports.isWindow=isWindow.default;exports.useInterface=useInterface.default;exports.Transition=index$2.default;exports.useScrollbar=useScrollbar.default;exports.AppRoot=index.default;exports.appRootElement=index.appRootElement;exports.usePortal=usePortal.usePortal;exports.adjustColor=index$3.adjustColor;exports.adjustTextContrast=index$3.adjustTextContrast;exports.alpha=index$3.alpha;exports.breakpoints=index$3.breakpoints;exports.css=index$3.css;exports.themeRootClass=index$4.themeRootClass;exports.getValue=getValue.default;exports.getProps=getProps.default;exports.ThemeProvider=ThemeProvider.default;exports.createThemeSwitcher=createThemeSwitcher.default;exports.createTheme=createTheme.createTheme;exports.getTheme=core.getTheme;exports.useTheme=core.useTheme;//# sourceMappingURL=index.js.map
|
|
1
|
+
'use strict';Object.defineProperty(exports,'__esModule',{value:true});var index$1=require('./Tag/index.js'),useTagProps=require('./Tag/useTagProps.js'),useAnimation=require('./hooks/useAnimation.js'),useColorTemplate=require('./hooks/useColorTemplate.js'),useBreakpoint=require('./breakpoint/useBreakpoint.js'),useBreakpointProps=require('./breakpoint/useBreakpointProps.js'),RenderServerStyles=require('./RenderServerStyles.js'),isWindow=require('./isWindow.js'),useInterface=require('./hooks/useInterface.js'),index$2=require('./Transition/index.js'),useScrollbar=require('./hooks/useScrollbar.js'),index=require('./AppRoot/index.js'),usePortal=require('./hooks/usePortal.js'),Renderar=require('./AppRoot/Renderar.js'),index$3=require('./css/index.js'),index$4=require('./theme/index.js'),getValue=require('./css/getValue.js'),getProps=require('./css/getProps.js'),ThemeProvider=require('./theme/ThemeProvider.js'),createThemeSwitcher=require('./theme/createThemeSwitcher.js'),createTheme=require('./theme/createTheme.js'),core=require('./theme/core.js');exports.Tag=index$1.default;exports.useTagProps=useTagProps.default;exports.animationEases=useAnimation.animationEases;exports.useAnimation=useAnimation.default;exports.useColorTemplate=useColorTemplate.default;exports.useBreakpoint=useBreakpoint.default;exports.useBreakpointProps=useBreakpointProps.default;exports.RenderServerStyles=RenderServerStyles.default;exports.isWindow=isWindow.default;exports.useInterface=useInterface.default;exports.Transition=index$2.default;exports.useScrollbar=useScrollbar.default;exports.AppRoot=index.default;exports.appRootElement=index.appRootElement;exports.usePortal=usePortal.usePortal;exports.Renderar=Renderar.Renderar;exports.adjustColor=index$3.adjustColor;exports.adjustTextContrast=index$3.adjustTextContrast;exports.alpha=index$3.alpha;exports.breakpoints=index$3.breakpoints;exports.css=index$3.css;exports.themeRootClass=index$4.themeRootClass;exports.getValue=getValue.default;exports.getProps=getProps.default;exports.ThemeProvider=ThemeProvider.default;exports.createThemeSwitcher=createThemeSwitcher.default;exports.createTheme=createTheme.createTheme;exports.getTheme=core.getTheme;exports.useTheme=core.useTheme;//# sourceMappingURL=index.js.map
|
package/index.mjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export{default as Tag}from'./Tag/index.mjs';export{default as useTagProps}from'./Tag/useTagProps.mjs';export{animationEases,default as useAnimation}from'./hooks/useAnimation.mjs';export{default as useColorTemplate}from'./hooks/useColorTemplate.mjs';export{default as useBreakpoint}from'./breakpoint/useBreakpoint.mjs';export{default as useBreakpointProps}from'./breakpoint/useBreakpointProps.mjs';export{default as RenderServerStyles}from'./RenderServerStyles.mjs';export{default as isWindow}from'./isWindow.mjs';export{default as useInterface}from'./hooks/useInterface.mjs';export{default as Transition}from'./Transition/index.mjs';export{default as useScrollbar}from'./hooks/useScrollbar.mjs';export{default as AppRoot,appRootElement}from'./AppRoot/index.mjs';export{usePortal}from'./hooks/usePortal.mjs';export{adjustColor,adjustTextContrast,alpha,breakpoints,css}from'./css/index.mjs';export{themeRootClass}from'./theme/index.mjs';export{default as getValue}from'./css/getValue.mjs';export{default as getProps}from'./css/getProps.mjs';export{default as ThemeProvider}from'./theme/ThemeProvider.mjs';export{default as createThemeSwitcher}from'./theme/createThemeSwitcher.mjs';export{createTheme}from'./theme/createTheme.mjs';export{getTheme,useTheme}from'./theme/core.mjs';//# sourceMappingURL=index.mjs.map
|
|
1
|
+
export{default as Tag}from'./Tag/index.mjs';export{default as useTagProps}from'./Tag/useTagProps.mjs';export{animationEases,default as useAnimation}from'./hooks/useAnimation.mjs';export{default as useColorTemplate}from'./hooks/useColorTemplate.mjs';export{default as useBreakpoint}from'./breakpoint/useBreakpoint.mjs';export{default as useBreakpointProps}from'./breakpoint/useBreakpointProps.mjs';export{default as RenderServerStyles}from'./RenderServerStyles.mjs';export{default as isWindow}from'./isWindow.mjs';export{default as useInterface}from'./hooks/useInterface.mjs';export{default as Transition}from'./Transition/index.mjs';export{default as useScrollbar}from'./hooks/useScrollbar.mjs';export{default as AppRoot,appRootElement}from'./AppRoot/index.mjs';export{usePortal}from'./hooks/usePortal.mjs';export{Renderar}from'./AppRoot/Renderar.mjs';export{adjustColor,adjustTextContrast,alpha,breakpoints,css}from'./css/index.mjs';export{themeRootClass}from'./theme/index.mjs';export{default as getValue}from'./css/getValue.mjs';export{default as getProps}from'./css/getProps.mjs';export{default as ThemeProvider}from'./theme/ThemeProvider.mjs';export{default as createThemeSwitcher}from'./theme/createThemeSwitcher.mjs';export{createTheme}from'./theme/createTheme.mjs';export{getTheme,useTheme}from'./theme/core.mjs';//# sourceMappingURL=index.mjs.map
|