@xanui/core 1.2.42 → 1.2.44

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.
Files changed (174) hide show
  1. package/AppRoot/{context.js → AppRootProvider.cjs} +1 -1
  2. package/AppRoot/AppRootProvider.cjs.map +1 -0
  3. package/AppRoot/{context.mjs → AppRootProvider.js} +1 -1
  4. package/AppRoot/AppRootProvider.js.map +1 -0
  5. package/AppRoot/Renderar.cjs +89 -0
  6. package/AppRoot/Renderar.cjs.map +1 -0
  7. package/AppRoot/Renderar.d.ts +1 -0
  8. package/AppRoot/Renderar.js +52 -20
  9. package/AppRoot/Renderar.js.map +1 -1
  10. package/AppRoot/index.cjs +43 -0
  11. package/AppRoot/index.cjs.map +1 -0
  12. package/AppRoot/index.d.ts +2 -2
  13. package/AppRoot/index.js +24 -106
  14. package/AppRoot/index.js.map +1 -1
  15. package/Document/index.cjs +21 -0
  16. package/Document/index.cjs.map +1 -0
  17. package/Document/index.d.ts +7 -1
  18. package/Document/index.js +8 -11
  19. package/Document/index.js.map +1 -1
  20. package/Iframe/index.cjs +45 -0
  21. package/Iframe/index.cjs.map +1 -0
  22. package/Iframe/index.d.ts +1 -0
  23. package/Iframe/index.js +23 -25
  24. package/Iframe/index.js.map +1 -1
  25. package/Tag/ServerStyleTag.cjs +13 -0
  26. package/Tag/{ServerStyleTag.mjs.map → ServerStyleTag.cjs.map} +1 -1
  27. package/Tag/ServerStyleTag.js +3 -5
  28. package/Tag/ServerStyleTag.js.map +1 -1
  29. package/Tag/{cssPropList.mjs → cssPropList.cjs} +4 -2
  30. package/Tag/cssPropList.cjs.map +1 -0
  31. package/Tag/cssPropList.js +1 -3
  32. package/Tag/cssPropList.js.map +1 -1
  33. package/Tag/index.cjs +40 -0
  34. package/Tag/{index.mjs.map → index.cjs.map} +1 -1
  35. package/Tag/index.js +10 -31
  36. package/Tag/index.js.map +1 -1
  37. package/Tag/{useTagProps.mjs → useTagProps.cjs} +18 -13
  38. package/Tag/useTagProps.cjs.map +1 -0
  39. package/Tag/useTagProps.js +15 -14
  40. package/Tag/useTagProps.js.map +1 -1
  41. package/Transition/index.cjs +29 -0
  42. package/Transition/{index.mjs.map → index.cjs.map} +1 -1
  43. package/Transition/index.js +13 -15
  44. package/Transition/index.js.map +1 -1
  45. package/breakpoint/BreakpointProvider.cjs +43 -0
  46. package/breakpoint/{BreakpointProvider.mjs.map → BreakpointProvider.cjs.map} +1 -1
  47. package/breakpoint/BreakpointProvider.js +13 -16
  48. package/breakpoint/BreakpointProvider.js.map +1 -1
  49. package/breakpoint/useBreakpoint.cjs +24 -0
  50. package/breakpoint/{useBreakpoint.mjs.map → useBreakpoint.cjs.map} +1 -1
  51. package/breakpoint/useBreakpoint.js +7 -9
  52. package/breakpoint/useBreakpoint.js.map +1 -1
  53. package/breakpoint/{useBreakpointProps.mjs → useBreakpointProps.cjs} +8 -6
  54. package/breakpoint/useBreakpointProps.cjs.map +1 -0
  55. package/breakpoint/useBreakpointProps.js +5 -7
  56. package/breakpoint/useBreakpointProps.js.map +1 -1
  57. package/css/CSSCacheProvider.cjs +34 -0
  58. package/css/CSSCacheProvider.cjs.map +1 -0
  59. package/css/CSSCacheProvider.d.ts +7 -0
  60. package/css/CSSCacheProvider.js +29 -0
  61. package/css/CSSCacheProvider.js.map +1 -0
  62. package/css/{aliases.mjs → aliases.cjs} +4 -2
  63. package/css/aliases.cjs.map +1 -0
  64. package/css/aliases.js +1 -3
  65. package/css/aliases.js.map +1 -1
  66. package/css/{getProps.mjs → getProps.cjs} +4 -2
  67. package/css/{getProps.mjs.map → getProps.cjs.map} +1 -1
  68. package/css/getProps.js +1 -3
  69. package/css/getProps.js.map +1 -1
  70. package/css/{getValue.mjs → getValue.cjs} +4 -2
  71. package/css/{getValue.mjs.map → getValue.cjs.map} +1 -1
  72. package/css/getValue.js +1 -3
  73. package/css/getValue.js.map +1 -1
  74. package/css/{index.mjs → index.cjs} +15 -7
  75. package/css/index.cjs.map +1 -0
  76. package/css/index.js +6 -14
  77. package/css/index.js.map +1 -1
  78. package/hooks/{useAnimation.mjs → useAnimation.cjs} +18 -6
  79. package/hooks/useAnimation.cjs.map +1 -0
  80. package/hooks/useAnimation.js +12 -10
  81. package/hooks/useAnimation.js.map +1 -1
  82. package/hooks/{useColorTemplate.mjs → useColorTemplate.cjs} +4 -2
  83. package/hooks/{useColorTemplate.mjs.map → useColorTemplate.cjs.map} +1 -1
  84. package/hooks/useColorTemplate.js +1 -3
  85. package/hooks/useColorTemplate.js.map +1 -1
  86. package/hooks/useInterface.cjs +19 -0
  87. package/hooks/useInterface.cjs.map +1 -0
  88. package/hooks/useInterface.js +7 -9
  89. package/hooks/useInterface.js.map +1 -1
  90. package/hooks/{useMergeRefs.mjs → useMergeRefs.cjs} +6 -4
  91. package/hooks/{useMergeRefs.mjs.map → useMergeRefs.cjs.map} +1 -1
  92. package/hooks/useMergeRefs.js +3 -5
  93. package/hooks/useMergeRefs.js.map +1 -1
  94. package/hooks/usePortal.cjs +66 -0
  95. package/hooks/usePortal.cjs.map +1 -0
  96. package/hooks/usePortal.js +24 -30
  97. package/hooks/usePortal.js.map +1 -1
  98. package/hooks/useTransition/{index.mjs → index.cjs} +29 -25
  99. package/hooks/useTransition/index.cjs.map +1 -0
  100. package/hooks/useTransition/index.js +26 -26
  101. package/hooks/useTransition/index.js.map +1 -1
  102. package/hooks/useTransition/{variants.mjs → variants.cjs} +17 -2
  103. package/hooks/useTransition/{variants.mjs.map → variants.cjs.map} +1 -1
  104. package/hooks/useTransition/variants.js +1 -16
  105. package/hooks/useTransition/variants.js.map +1 -1
  106. package/index.cjs +64 -0
  107. package/index.cjs.map +1 -0
  108. package/index.d.ts +3 -2
  109. package/index.js +25 -60
  110. package/index.js.map +1 -1
  111. package/package.json +5 -12
  112. package/theme/{ThemeCssVars.mjs → ThemeCssVars.cjs} +4 -2
  113. package/theme/{ThemeCssVars.mjs.map → ThemeCssVars.cjs.map} +1 -1
  114. package/theme/ThemeCssVars.js +1 -3
  115. package/theme/ThemeCssVars.js.map +1 -1
  116. package/theme/{ThemeDefaultOptions.mjs → ThemeDefaultOptions.cjs} +11 -5
  117. package/theme/{ThemeDefaultOptions.mjs.map → ThemeDefaultOptions.cjs.map} +1 -1
  118. package/theme/ThemeDefaultOptions.js +4 -10
  119. package/theme/ThemeDefaultOptions.js.map +1 -1
  120. package/theme/ThemeProvider.cjs +154 -0
  121. package/theme/ThemeProvider.cjs.map +1 -0
  122. package/theme/ThemeProvider.d.ts +3 -1
  123. package/theme/ThemeProvider.js +109 -41
  124. package/theme/ThemeProvider.js.map +1 -1
  125. package/theme/{core.mjs → core.cjs} +12 -6
  126. package/theme/core.cjs.map +1 -0
  127. package/theme/core.js +5 -11
  128. package/theme/core.js.map +1 -1
  129. package/theme/createTheme.cjs +27 -0
  130. package/theme/{createTheme.mjs.map → createTheme.cjs.map} +1 -1
  131. package/theme/createTheme.js +10 -12
  132. package/theme/createTheme.js.map +1 -1
  133. package/theme/{createThemeSwitcher.mjs → createThemeSwitcher.cjs} +8 -6
  134. package/theme/{createThemeSwitcher.mjs.map → createThemeSwitcher.cjs.map} +1 -1
  135. package/theme/createThemeSwitcher.js +5 -7
  136. package/theme/createThemeSwitcher.js.map +1 -1
  137. package/theme/index.cjs +15 -0
  138. package/theme/{index.mjs.map → index.cjs.map} +1 -1
  139. package/theme/index.js +6 -11
  140. package/theme/index.js.map +1 -1
  141. package/AppRoot/Renderar.mjs +0 -51
  142. package/AppRoot/Renderar.mjs.map +0 -1
  143. package/AppRoot/context.js.map +0 -1
  144. package/AppRoot/context.mjs.map +0 -1
  145. package/AppRoot/index.mjs +0 -118
  146. package/AppRoot/index.mjs.map +0 -1
  147. package/Document/index.mjs +0 -18
  148. package/Document/index.mjs.map +0 -1
  149. package/Iframe/index.mjs +0 -43
  150. package/Iframe/index.mjs.map +0 -1
  151. package/Tag/ServerStyleTag.mjs +0 -11
  152. package/Tag/cssPropList.mjs.map +0 -1
  153. package/Tag/index.mjs +0 -19
  154. package/Tag/useTagProps.mjs.map +0 -1
  155. package/Transition/index.mjs +0 -27
  156. package/breakpoint/BreakpointProvider.mjs +0 -40
  157. package/breakpoint/useBreakpoint.mjs +0 -22
  158. package/breakpoint/useBreakpointProps.mjs.map +0 -1
  159. package/css/aliases.mjs.map +0 -1
  160. package/css/index.mjs.map +0 -1
  161. package/hooks/useAnimation.mjs.map +0 -1
  162. package/hooks/useInterface.mjs +0 -17
  163. package/hooks/useInterface.mjs.map +0 -1
  164. package/hooks/usePortal.mjs +0 -68
  165. package/hooks/usePortal.mjs.map +0 -1
  166. package/hooks/useTransition/index.mjs.map +0 -1
  167. package/index.mjs +0 -25
  168. package/index.mjs.map +0 -1
  169. package/theme/ThemeProvider.mjs +0 -44
  170. package/theme/ThemeProvider.mjs.map +0 -1
  171. package/theme/core.mjs.map +0 -1
  172. package/theme/createTheme.mjs +0 -25
  173. package/theme/index.mjs +0 -10
  174. /package/AppRoot/{context.d.ts → AppRootProvider.d.ts} +0 -0
package/AppRoot/index.mjs DELETED
@@ -1,118 +0,0 @@
1
- "use client";
2
- import { __rest } from 'tslib';
3
- import { jsx, jsxs } from 'react/jsx-runtime';
4
- import React__default, { useRef, useMemo, useEffect } from 'react';
5
- import { themeRootClass } from '../theme/index.mjs';
6
- import { BreakpointProvider } from '../breakpoint/BreakpointProvider.mjs';
7
- import { css } from '../css/index.mjs';
8
- import { RenderRenderar } from './Renderar.mjs';
9
- import ServerStyleTag from '../Tag/ServerStyleTag.mjs';
10
- import { DocumentProvider } from '../Document/index.mjs';
11
- import { AppRootProvider } from './context.mjs';
12
- import useMergeRefs from '../hooks/useMergeRefs.mjs';
13
- import ThemeProvider from '../theme/ThemeProvider.mjs';
14
-
15
- const APP_ROOT_CLASSNAME = "xui-app-root";
16
- const AppRoot = React__default.forwardRef((_a, ref) => {
17
- var { children, noScrollbarCss, theme, document: _document } = _a, props = __rest(_a, ["children", "noScrollbarCss", "theme", "document"]);
18
- noScrollbarCss !== null && noScrollbarCss !== void 0 ? noScrollbarCss : (noScrollbarCss = false);
19
- _document !== null && _document !== void 0 ? _document : (_document = document);
20
- const [visibility, setVisibility] = React__default.useState("hidden");
21
- const rootRef = useRef(null);
22
- const mergeRef = useMergeRefs(rootRef, ref);
23
- const scrollbarCss = useMemo(() => {
24
- if (noScrollbarCss)
25
- return;
26
- const cls = (cls) => `${themeRootClass(theme)} ${cls}`;
27
- let thumbSize = 6;
28
- let thumbColor = "var(--color-text-secondary)";
29
- let trackColor = "transparent";
30
- return css({
31
- "@global": {
32
- [cls('*::-webkit-scrollbar')]: {
33
- width: thumbSize,
34
- height: thumbSize,
35
- },
36
- [cls("*::-webkit-scrollbar-thumb")]: {
37
- backgroundColor: thumbColor,
38
- borderRadius: "6px",
39
- opacity: 0.6,
40
- },
41
- [cls("*::-webkit-scrollbar-thumb:hover")]: {
42
- backgroundColor: thumbColor,
43
- opacity: 0.0,
44
- },
45
- [cls("*::-webkit-scrollbar-track")]: {
46
- backgroundColor: trackColor,
47
- borderRadius: "6px",
48
- },
49
- }
50
- }, {
51
- injectStyle: typeof window !== 'undefined',
52
- container: _document,
53
- });
54
- }, [noScrollbarCss, theme]);
55
- const globalStyle = useMemo(() => {
56
- return css({
57
- "@global": {
58
- "*": {
59
- m: 0,
60
- p: 0,
61
- outline: "none",
62
- boxSizing: "border-box",
63
- verticalAlign: "baseline",
64
- },
65
- "html, body": {
66
- minHeight: "100%",
67
- "-webkit-font-smoothing": "antialiased",
68
- "-moz-osx-font-smoothing": "grayscale",
69
- },
70
- "img, picture, video, canvas, svg": {
71
- maxWidth: "100%",
72
- display: "block"
73
- },
74
- "input, button, textarea, select": {
75
- font: "inherit"
76
- },
77
- "table": {
78
- borderCollapse: "collapse",
79
- borderSpacing: 0,
80
- },
81
- "ol, ul": {
82
- listStyle: "none",
83
- padding: 0,
84
- margin: 0,
85
- },
86
- "a": {
87
- display: "inline-block",
88
- color: "inherit",
89
- textDecoration: "none",
90
- cursor: "pointer",
91
- "&:hover": {
92
- textDecoration: "underline"
93
- }
94
- },
95
- "p, h1, h2, h3, h4, h5, h6": {
96
- overflowWrap: "break-word",
97
- },
98
- }
99
- }, {
100
- injectStyle: typeof window !== 'undefined',
101
- container: _document,
102
- });
103
- }, []);
104
- useEffect(() => {
105
- setVisibility("visible");
106
- // move oncss style tags to head
107
- if (typeof _document === 'undefined')
108
- return;
109
- const styles = Array.from(_document.querySelectorAll('body style[data-oncss]'));
110
- styles.forEach((style) => {
111
- _document.head.appendChild(style);
112
- });
113
- }, []);
114
- return (jsx(DocumentProvider, { document: _document, children: jsx(AppRootProvider, { element: rootRef.current, children: jsxs(ThemeProvider, Object.assign({ ref: mergeRef, theme: theme }, props, { sx: Object.assign(Object.assign({}, props.sx), (visibility === "hidden" ? { visibility: "hidden" } : {})), classNames: [APP_ROOT_CLASSNAME], children: [jsx(ServerStyleTag, { factory: globalStyle }), scrollbarCss && jsx(ServerStyleTag, { factory: scrollbarCss }), jsxs(BreakpointProvider, { children: [children, jsx(RenderRenderar, {})] })] })) }) }));
115
- });
116
-
117
- export { APP_ROOT_CLASSNAME, AppRoot as default };
118
- //# sourceMappingURL=index.mjs.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.mjs","sources":["../../src/AppRoot/index.tsx"],"sourcesContent":["\"use client\";\r\nimport React, { useEffect, useMemo, useRef } from 'react';\r\nimport { TagComponentType } from '../Tag/types';\r\nimport { ThemeProvider, ThemeProviderProps, themeRootClass } from '../theme';\r\nimport { BreakpointProvider } from '../breakpoint';\r\nimport { css } from '../css';\r\nimport { RenderRenderar } from './Renderar';\r\nimport ServerStyleTag from '../Tag/ServerStyleTag';\r\nimport { DocumentProvider } from '../Document';\r\nimport { AppRootProvider } from './context';\r\nimport useMergeRefs from '../hooks/useMergeRefs';\r\n\r\nexport type AppRootProps<T extends TagComponentType = \"div\"> = ThemeProviderProps<T> & {\r\n noScrollbarCss?: boolean;\r\n document?: Document;\r\n}\r\n\r\nexport const APP_ROOT_CLASSNAME = \"xui-app-root\"\r\n\r\nconst AppRoot = React.forwardRef(<T extends TagComponentType = \"div\">({ children, noScrollbarCss, theme, document: _document, ...props }: AppRootProps<T>, ref: React.Ref<any>) => {\r\n noScrollbarCss ??= false\r\n _document ??= document\r\n\r\n const [visibility, setVisibility] = React.useState<string>(\"hidden\");\r\n const rootRef = useRef(null)\r\n const mergeRef = useMergeRefs(rootRef, ref)\r\n\r\n const scrollbarCss: any = useMemo(() => {\r\n if (noScrollbarCss) return;\r\n const cls = (cls: string) => `${themeRootClass(theme)} ${cls}`\r\n let thumbSize = 6\r\n let thumbColor = \"var(--color-text-secondary)\"\r\n let trackColor = \"transparent\"\r\n\r\n return css({\r\n \"@global\": {\r\n [cls('*::-webkit-scrollbar')]: {\r\n width: thumbSize,\r\n height: thumbSize,\r\n },\r\n [cls(\"*::-webkit-scrollbar-thumb\")]: {\r\n backgroundColor: thumbColor,\r\n borderRadius: \"6px\",\r\n opacity: 0.6,\r\n },\r\n [cls(\"*::-webkit-scrollbar-thumb:hover\")]: {\r\n backgroundColor: thumbColor,\r\n opacity: 0.0,\r\n },\r\n [cls(\"*::-webkit-scrollbar-track\")]: {\r\n backgroundColor: trackColor,\r\n borderRadius: \"6px\",\r\n },\r\n }\r\n }, {\r\n injectStyle: typeof window !== 'undefined',\r\n container: _document,\r\n }) as any\r\n }, [noScrollbarCss, theme])\r\n\r\n const globalStyle = useMemo(() => {\r\n return css({\r\n \"@global\": {\r\n \"*\": {\r\n m: 0,\r\n p: 0,\r\n outline: \"none\",\r\n boxSizing: \"border-box\",\r\n verticalAlign: \"baseline\",\r\n },\r\n \"html, body\": {\r\n minHeight: \"100%\",\r\n \"-webkit-font-smoothing\": \"antialiased\",\r\n \"-moz-osx-font-smoothing\": \"grayscale\",\r\n } as any,\r\n \"img, picture, video, canvas, svg\": {\r\n maxWidth: \"100%\",\r\n display: \"block\"\r\n },\r\n \"input, button, textarea, select\": {\r\n font: \"inherit\"\r\n },\r\n \"table\": {\r\n borderCollapse: \"collapse\",\r\n borderSpacing: 0,\r\n },\r\n \"ol, ul\": {\r\n listStyle: \"none\",\r\n padding: 0,\r\n margin: 0,\r\n },\r\n \"a\": {\r\n display: \"inline-block\",\r\n color: \"inherit\",\r\n textDecoration: \"none\",\r\n cursor: \"pointer\",\r\n \"&:hover\": {\r\n textDecoration: \"underline\"\r\n }\r\n },\r\n \"p, h1, h2, h3, h4, h5, h6\": {\r\n overflowWrap: \"break-word\",\r\n },\r\n }\r\n }, {\r\n injectStyle: typeof window !== 'undefined',\r\n container: _document,\r\n })\r\n }, [])\r\n\r\n useEffect(() => {\r\n setVisibility(\"visible\");\r\n\r\n // move oncss style tags to head\r\n if (typeof _document === 'undefined') return;\r\n const styles = Array.from(_document.querySelectorAll('body style[data-oncss]'));\r\n styles.forEach((style) => {\r\n _document.head.appendChild(style);\r\n });\r\n\r\n }, [])\r\n\r\n return (\r\n <DocumentProvider document={_document}>\r\n <AppRootProvider element={rootRef.current}>\r\n <ThemeProvider\r\n ref={mergeRef}\r\n theme={theme}\r\n {...props}\r\n sx={{\r\n ...props.sx,\r\n ...(visibility === \"hidden\" ? { visibility: \"hidden\" } : {})\r\n }}\r\n classNames={[APP_ROOT_CLASSNAME]}\r\n >\r\n <ServerStyleTag factory={globalStyle} />\r\n {\r\n scrollbarCss && <ServerStyleTag factory={scrollbarCss} />\r\n }\r\n <BreakpointProvider>\r\n {children}\r\n <RenderRenderar />\r\n </BreakpointProvider>\r\n </ThemeProvider>\r\n </AppRootProvider>\r\n </DocumentProvider>\r\n )\r\n})\r\n\r\nexport default AppRoot\r\n\r\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAiBO;AAEP;AAAsE;;;AAInE;AACA;;AAGA;AACG;;AACA;;;;AAKA;AACG;AACG;AACG;AACA;AACF;AACD;AACG;AACA;AACA;AACF;AACD;AACG;AACA;AACF;AACD;AACG;AACA;AACF;AACH;;AAED;AACA;AACF;AACJ;AAEA;AACG;AACG;AACG;AACG;AACA;AACA;AACA;AACA;AACF;AACD;AACG;AACA;AACA;AACK;AACR;AACG;AACA;AACF;AACD;AACG;AACF;AACD;AACG;AACA;AACF;AACD;AACG;AACA;AACA;AACF;AACD;AACG;AACA;AACA;AACA;AACA;AACG;AACF;AACH;AACD;AACG;AACF;AACH;;AAED;AACA;AACF;;;;;;;AAQD;AACA;AACG;AACH;;AAIH;AAyBH;;"}
@@ -1,18 +0,0 @@
1
- "use client";
2
- import { jsx } from 'react/jsx-runtime';
3
- import React__default from 'react';
4
-
5
- const DocumentContext = React__default.createContext(null);
6
- const DocumentProvider = ({ document, children }) => {
7
- return (jsx(DocumentContext.Provider, { value: document, children: children }));
8
- };
9
- const useDocument = () => {
10
- const context = React__default.useContext(DocumentContext);
11
- if (typeof window === 'undefined') {
12
- return null;
13
- }
14
- return context || document;
15
- };
16
-
17
- export { DocumentProvider, useDocument };
18
- //# sourceMappingURL=index.mjs.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.mjs","sources":["../../src/Document/index.tsx"],"sourcesContent":["'use client'\r\nimport React from \"react\";\r\n\r\nconst DocumentContext = React.createContext<Document | null>(null);\r\n\r\nexport const DocumentProvider: React.FC<{ document: Document; children: React.ReactNode }> = ({ document, children }) => {\r\n return (\r\n <DocumentContext.Provider value={document}>\r\n {children}\r\n </DocumentContext.Provider>\r\n );\r\n}\r\n\r\nexport const useDocument = (): Document => {\r\n const context = React.useContext(DocumentContext);\r\n if (typeof window === 'undefined') {\r\n return null as any;\r\n }\r\n return context || document;\r\n}"],"names":[],"mappings":";;;;AAGA;AAEO;AACJ;AAKH;AAEO;;AAEJ;AACG;;;AAGN;;"}
package/Iframe/index.mjs DELETED
@@ -1,43 +0,0 @@
1
- "use client";
2
- import { __rest } from 'tslib';
3
- import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
4
- import React__default, { createContext, useRef, useState, useEffect } from 'react';
5
- import { useTheme } from '../theme/core.mjs';
6
- import '../css/getValue.mjs';
7
- import 'oncss';
8
- import '../theme/ThemeProvider.mjs';
9
- import 'react-state-bucket';
10
- import Tag from '../Tag/index.mjs';
11
- import { createPortal } from 'react-dom';
12
- import AppRoot from '../AppRoot/index.mjs';
13
- import useMergeRefs from '../hooks/useMergeRefs.mjs';
14
-
15
- const IframeContext = createContext({
16
- document: null,
17
- window: null,
18
- });
19
- const Iframe = (_a, ref) => {
20
- var { children, sxr, theme } = _a, props = __rest(_a, ["children", "sxr", "theme"]);
21
- const iframeRef = useRef(null);
22
- const _ref = useMergeRefs(iframeRef, ref);
23
- const [doc, setDoc] = useState(null);
24
- const parentTheme = useTheme();
25
- theme !== null && theme !== void 0 ? theme : (theme = parentTheme.name);
26
- useEffect(() => {
27
- if (!iframeRef.current)
28
- return;
29
- const iframe = iframeRef.current;
30
- const onLoad = () => setDoc(iframe.contentDocument);
31
- iframe.addEventListener("load", onLoad);
32
- return () => iframe.removeEventListener("load", onLoad);
33
- }, []);
34
- return (jsxs(Fragment, { children: [jsx(Tag, Object.assign({}, props, { component: "iframe", sxr: Object.assign({ border: 'none', width: "100%", height: "100%", p: 0, m: 0 }, sxr), ref: _ref, srcDoc: "<!DOCTYPE html><html><head></head><body></body></html>" })), doc &&
35
- createPortal(jsx(IframeContext.Provider, { value: {
36
- document: doc,
37
- window: doc.defaultView,
38
- }, children: jsx(AppRoot, { theme: theme, document: doc, children: children }) }), doc.body)] }));
39
- };
40
- var index = React__default.forwardRef(Iframe);
41
-
42
- export { index as default };
43
- //# sourceMappingURL=index.mjs.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.mjs","sources":["../../src/Iframe/index.tsx"],"sourcesContent":["'use client'\r\nimport React, { createContext, useEffect, useRef, useState } from \"react\";\r\nimport { useTheme } from \"../theme\";\r\nimport Tag from \"../Tag\";\r\nimport { createPortal } from \"react-dom\";\r\nimport AppRoot from \"../AppRoot\";\r\nimport { TagPropsRoot } from \"../Tag/types\";\r\nimport useMergeRefs from \"../hooks/useMergeRefs\";\r\n\r\nconst IframeContext = createContext<{ document: Document | null; window: Window | null; }>({\r\n document: null,\r\n window: null,\r\n});\r\n\r\n\r\nexport type IframeProps = Omit<TagPropsRoot<\"iframe\">, \"component\"> & {\r\n theme?: string;\r\n}\r\n\r\nconst Iframe = ({ children, sxr, theme, ...props }: IframeProps, ref: React.Ref<HTMLIFrameElement>) => {\r\n const iframeRef = useRef<HTMLIFrameElement>(null);\r\n const _ref = useMergeRefs(iframeRef, ref)\r\n\r\n const [doc, setDoc] = useState<Document | null>(null);\r\n const parentTheme = useTheme()\r\n theme ??= parentTheme.name\r\n\r\n useEffect(() => {\r\n if (!iframeRef.current) return;\r\n const iframe = iframeRef.current;\r\n const onLoad = () => setDoc(iframe.contentDocument);\r\n iframe.addEventListener(\"load\", onLoad);\r\n return () => iframe.removeEventListener(\"load\", onLoad);\r\n }, []);\r\n\r\n return (\r\n <>\r\n <Tag\r\n {...props}\r\n component={\"iframe\"}\r\n sxr={{\r\n border: 'none',\r\n width: \"100%\",\r\n height: \"100%\",\r\n p: 0,\r\n m: 0,\r\n ...sxr\r\n }}\r\n ref={_ref}\r\n srcDoc={\"<!DOCTYPE html><html><head></head><body></body></html>\"}\r\n />\r\n {doc &&\r\n createPortal(\r\n <IframeContext.Provider\r\n value={{\r\n document: doc,\r\n window: doc.defaultView,\r\n }}\r\n >\r\n <AppRoot theme={theme} document={doc as Document}>\r\n {children}\r\n </AppRoot>\r\n </IframeContext.Provider>,\r\n doc.body\r\n )}\r\n </>\r\n );\r\n}\r\n\r\nexport default React.forwardRef(Iframe)"],"names":[],"mappings":";;;;;;;;;;;;;;AASA;AACG;AACA;AACF;AAOD;;AACG;;;AAIA;;;;;AAKG;;AAEA;;;;AAqBM;AAGS;;;AAYrB;AAEA;;"}
@@ -1,11 +0,0 @@
1
- import { jsx } from 'react/jsx-runtime';
2
-
3
- const ServerStyleTag = ({ factory }) => {
4
- if (typeof window === 'undefined') {
5
- return jsx("style", { dangerouslySetInnerHTML: { __html: factory.css }, precedence: factory.classname, href: factory.classname });
6
- }
7
- return null;
8
- };
9
-
10
- export { ServerStyleTag as default };
11
- //# sourceMappingURL=ServerStyleTag.mjs.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"cssPropList.mjs","sources":["../../src/Tag/cssPropList.ts"],"sourcesContent":["\r\nconst CSS_PROP_LIST: any = {\r\n typography: 1,\r\n bgcolor: 1,\r\n bgimage: 1,\r\n bg: 1,\r\n p: 1,\r\n pt: 1,\r\n pr: 1,\r\n pb: 1,\r\n pl: 1,\r\n px: 1,\r\n py: 1,\r\n m: 1,\r\n mt: 1,\r\n mr: 1,\r\n mb: 1,\r\n ml: 1,\r\n mx: 1,\r\n my: 1,\r\n radius: 1,\r\n shadow: 1,\r\n flexBox: 1,\r\n flexRow: 1,\r\n flexColumn: 1,\r\n flexWraped: 1,\r\n disabled: 1,\r\n spacing: 1,\r\n\r\n gradient: 1,\r\n\r\n // CSS Props\r\n alignContent: 1,\r\n alignItems: 1,\r\n alignSelf: 1,\r\n animation: 1,\r\n animationComposition: 1,\r\n animationDelay: 1,\r\n animationDirection: 1,\r\n animationDuration: 1,\r\n animationFillMode: 1,\r\n animationIterationCount: 1,\r\n animationName: 1,\r\n animationTimingFunction: 1,\r\n backdropFilter: 1,\r\n background: 1,\r\n backgroundAttachment: 1,\r\n backgroundColor: 1,\r\n backgroundImage: 1,\r\n backgroundOrigin: 1,\r\n backgroundPosition: 1,\r\n backgroundRepeat: 1,\r\n backgroundSize: 1,\r\n border: 1,\r\n borderBottom: 1,\r\n borderBottomColor: 1,\r\n borderBottomStyle: 1,\r\n borderBottomWidth: 1,\r\n borderColor: 1,\r\n borderImage: 1,\r\n borderLeft: 1,\r\n borderLeftColor: 1,\r\n borderLeftStyle: 1,\r\n borderLeftWidth: 1,\r\n borderRadius: 1,\r\n borderRight: 1,\r\n borderRightColor: 1,\r\n borderRightStyle: 1,\r\n borderRightWidth: 1,\r\n borderStyle: 1,\r\n borderTop: 1,\r\n borderTopColor: 1,\r\n borderTopLeftRadius: 1,\r\n borderTopRightRadius: 1,\r\n borderTopStyle: 1,\r\n borderTopWidth: 1,\r\n borderWidth: 1,\r\n bottom: 1,\r\n boxShadow: 1,\r\n boxSizing: 1,\r\n cursor: 1,\r\n color: 1,\r\n display: 1,\r\n direction: 1,\r\n filter: 1,\r\n flex: 1,\r\n flexBasis: 1,\r\n flexDirection: 1,\r\n flexFlow: 1,\r\n flexGrow: 1,\r\n flexShrink: 1,\r\n flexWrap: 1,\r\n float: 1,\r\n fontFamily: 1,\r\n fontSize: 1,\r\n fontStyle: 1,\r\n fontWeight: 1,\r\n font: 1,\r\n gap: 1,\r\n grid: 1,\r\n gridArea: 1,\r\n gridAutoColumns: 1,\r\n gridAutoFlow: 1,\r\n gridAutoRows: 1,\r\n gridColumn: 1,\r\n gridColumnEnd: 1,\r\n gridColumnGap: 1,\r\n gridColumnStart: 1,\r\n gridGap: 1,\r\n gridRow: 1,\r\n gridRowEnd: 1,\r\n gridRowGap: 1,\r\n gridRowStart: 1,\r\n gridTemplate: 1,\r\n gridTemplateAreas: 1,\r\n gridTemplateColumns: 1,\r\n gridTemplateRows: 1,\r\n height: 1,\r\n justifyContent: 1,\r\n justifyItems: 1,\r\n justifySelf: 1,\r\n left: 1,\r\n letterSpacing: 1,\r\n lineBreak: 1,\r\n lineHeight: 1,\r\n listStyle: 1,\r\n margin: 1,\r\n marginBlock: 1,\r\n marginBlockEnd: 1,\r\n marginBlockStart: 1,\r\n marginBottom: 1,\r\n marginInline: 1,\r\n marginInlineEnd: 1,\r\n marginInlineStart: 1,\r\n marginLeft: 1,\r\n marginRight: 1,\r\n marginTop: 1,\r\n maxHeight: 1,\r\n maxWidth: 1,\r\n minHeight: 1,\r\n minWidth: 1,\r\n objectFit: 1,\r\n objectPosition: 1,\r\n opacity: 1,\r\n order: 1,\r\n outline: 1,\r\n overflow: 1,\r\n overflowX: 1,\r\n overflowY: 1,\r\n padding: 1,\r\n paddingBlock: 1,\r\n paddingBlockEnd: 1,\r\n paddingBlockStart: 1,\r\n paddingBottom: 1,\r\n paddingInline: 1,\r\n paddingInlineEnd: 1,\r\n paddingInlineStart: 1,\r\n paddingLeft: 1,\r\n paddingRight: 1,\r\n paddingTop: 1,\r\n perspective: 1,\r\n perspectiveOrigin: 1,\r\n pointerEvents: 1,\r\n position: 1,\r\n resize: 1,\r\n right: 1,\r\n textAlign: 1,\r\n textDecoration: 1,\r\n textShadow: 1,\r\n textTransform: 1,\r\n top: 1,\r\n transform: 1,\r\n transformOrigin: 1,\r\n transformStyle: 1,\r\n transition: 1,\r\n transitionDelay: 1,\r\n transitionDuration: 1,\r\n transitionProperty: 1,\r\n transitionTimingFunction: 1,\r\n userSelect: 1,\r\n verticalAlign: 1,\r\n visibility: 1,\r\n whiteSpace: 1,\r\n width: 1,\r\n wordBreak: 1,\r\n wordSpacing: 1,\r\n wordWrap: 1,\r\n zIndex: 1,\r\n}\r\n\r\nexport default CSS_PROP_LIST"],"names":[],"mappings":"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"}
package/Tag/index.mjs DELETED
@@ -1,19 +0,0 @@
1
- import { __rest } from 'tslib';
2
- import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
3
- import * as React from 'react';
4
- import useTagProps from './useTagProps.mjs';
5
- import ServerStyleTag from './ServerStyleTag.mjs';
6
-
7
- const Tag = React.forwardRef((_a, ref) => {
8
- var { component, children } = _a, rest = __rest(_a, ["component", "children"]);
9
- const { props, style } = useTagProps(rest);
10
- props.ref = ref;
11
- const ele = React.createElement(component || "div", props, children);
12
- if (typeof window === 'undefined') {
13
- return (jsxs(Fragment, { children: [jsx(ServerStyleTag, { factory: style }), ele] }));
14
- }
15
- return ele;
16
- });
17
-
18
- export { Tag as default };
19
- //# sourceMappingURL=index.mjs.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"useTagProps.mjs","sources":["../../src/Tag/useTagProps.ts"],"sourcesContent":["import { TagComponentType, TagProps, TagPropsRoot } from './types';\r\nimport cssPropList from './cssPropList';\r\nimport { css } from '../css';\r\nimport { classNames } from 'pretty-class';\r\nimport { CSSFactoryType } from 'oncss';\r\nimport { useMemo } from 'react';\r\nimport { useDocument } from '../Document';\r\n\r\nexport type useTagPropsReturn<T extends TagComponentType = \"div\"> = {\r\n props: TagProps<T>,\r\n style: CSSFactoryType\r\n}\r\n\r\nconst useTagProps = <T extends TagComponentType = \"div\">(props: TagPropsRoot<T>): useTagPropsReturn<T> => {\r\n const cachekey = JSON.stringify(props, (key, value) => {\r\n return key === '_owner' || key === '_store' ? undefined : value;\r\n }, 2);\r\n\r\n const doc = useDocument();\r\n\r\n const parsed = useMemo(() => {\r\n let _props: any = {}\r\n let _css: any = {}\r\n\r\n if (props.hover && Object.keys(props.hover).length > 0) {\r\n _css['&:hover'] = {\r\n ...props.hover\r\n }\r\n }\r\n\r\n for (let key in props) {\r\n const keys = [\"sx\", \"sxr\", \"style\", \"hover\", \"className\", \"classNames\", \"baseClass\"];\r\n if (keys.includes(key)) {\r\n continue;\r\n }\r\n let val = (props as any)[key];\r\n if (!cssPropList[key]) {\r\n _props[key] = val\r\n } else {\r\n _css[key] = val\r\n }\r\n }\r\n\r\n const styles = css({ ...props.sxr, ..._css, ...props.sx, ...props.style }, {\r\n injectStyle: typeof doc !== 'undefined',\r\n container: doc,\r\n })\r\n\r\n return {\r\n props: _props,\r\n styles,\r\n className: classNames(\r\n props.baseClass ? \"xui-\" + props.baseClass : undefined,\r\n props.classNames,\r\n props.className,\r\n styles.classname\r\n )\r\n }\r\n }, [cachekey, doc])\r\n\r\n const _props: any = {};\r\n for (let prop in parsed.props) {\r\n _props[prop] = (props as any)[prop]\r\n }\r\n _props.className = parsed.className;\r\n\r\n return { props: _props, style: parsed.styles };\r\n}\r\n\r\n\r\nexport default useTagProps"],"names":["cssPropList"],"mappings":";;;;;;AAaA,MAAM,WAAW,GAAG,CAAqC,KAAsB,KAA0B;AACtG,IAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,CAAC,GAAG,EAAE,KAAK,KAAI;AACnD,QAAA,OAAO,GAAG,KAAK,QAAQ,IAAI,GAAG,KAAK,QAAQ,GAAG,SAAS,GAAG,KAAK;IAClE,CAAC,EAAE,CAAC,CAAC;AAEL,IAAA,MAAM,GAAG,GAAG,WAAW,EAAE;AAEzB,IAAA,MAAM,MAAM,GAAG,OAAO,CAAC,MAAK;QACzB,IAAI,MAAM,GAAQ,EAAE;QACpB,IAAI,IAAI,GAAQ,EAAE;AAElB,QAAA,IAAI,KAAK,CAAC,KAAK,IAAI,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,MAAM,GAAG,CAAC,EAAE;YACrD,IAAI,CAAC,SAAS,CAAC,GAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACT,KAAK,CAAC,KAAK,CAChB;QACJ;AAEA,QAAA,KAAK,IAAI,GAAG,IAAI,KAAK,EAAE;AACpB,YAAA,MAAM,IAAI,GAAG,CAAC,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,WAAW,CAAC;AACpF,YAAA,IAAI,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE;gBACrB;YACH;AACA,YAAA,IAAI,GAAG,GAAI,KAAa,CAAC,GAAG,CAAC;AAC7B,YAAA,IAAI,CAACA,aAAW,CAAC,GAAG,CAAC,EAAE;AACpB,gBAAA,MAAM,CAAC,GAAG,CAAC,GAAG,GAAG;YACpB;iBAAO;AACJ,gBAAA,IAAI,CAAC,GAAG,CAAC,GAAG,GAAG;YAClB;QACH;AAEA,QAAA,MAAM,MAAM,GAAG,GAAG,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAM,KAAK,CAAC,GAAG,CAAA,EAAK,IAAI,CAAA,EAAK,KAAK,CAAC,EAAE,GAAK,KAAK,CAAC,KAAK,CAAA,EAAI;AACxE,YAAA,WAAW,EAAE,OAAO,GAAG,KAAK,WAAW;AACvC,YAAA,SAAS,EAAE,GAAG;AAChB,SAAA,CAAC;QAEF,OAAO;AACJ,YAAA,KAAK,EAAE,MAAM;YACb,MAAM;AACN,YAAA,SAAS,EAAE,UAAU,CAClB,KAAK,CAAC,SAAS,GAAG,MAAM,GAAG,KAAK,CAAC,SAAS,GAAG,SAAS,EACtD,KAAK,CAAC,UAAU,EAChB,KAAK,CAAC,SAAS,EACf,MAAM,CAAC,SAAS;SAErB;AACJ,IAAA,CAAC,EAAE,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC;IAEnB,MAAM,MAAM,GAAQ,EAAE;AACtB,IAAA,KAAK,IAAI,IAAI,IAAI,MAAM,CAAC,KAAK,EAAE;QAC5B,MAAM,CAAC,IAAI,CAAC,GAAI,KAAa,CAAC,IAAI,CAAC;IACtC;AACA,IAAA,MAAM,CAAC,SAAS,GAAG,MAAM,CAAC,SAAS;IAEnC,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE;AACjD;;;;"}
@@ -1,27 +0,0 @@
1
- "use client";
2
- import { __rest } from 'tslib';
3
- import { jsx } from 'react/jsx-runtime';
4
- import { useState, useEffect, Children, cloneElement } from 'react';
5
- import useTransition from '../hooks/useTransition/index.mjs';
6
-
7
- const TransitionBase = (_a) => {
8
- var { children } = _a, options = __rest(_a, ["children"]);
9
- const { props, exited } = useTransition(options);
10
- if (exited)
11
- return null;
12
- const clone = Children.only(children);
13
- return cloneElement(clone, props);
14
- };
15
- function Transition(_a) {
16
- var { children } = _a, options = __rest(_a, ["children"]);
17
- const [mounted, setMounted] = useState(false);
18
- useEffect(() => {
19
- setMounted(true);
20
- }, []);
21
- if (!mounted)
22
- return null;
23
- return jsx(TransitionBase, Object.assign({}, options, { children: children }));
24
- }
25
-
26
- export { Transition as default };
27
- //# sourceMappingURL=index.mjs.map
@@ -1,40 +0,0 @@
1
- "use client";
2
- import { jsx } from 'react/jsx-runtime';
3
- import React__default, { useState, useCallback } from 'react';
4
- import { breakpoints } from '../css/index.mjs';
5
-
6
- const BreakpointCtx = React__default.createContext("xs");
7
- /**
8
- * SSR-safe breakpoint detection
9
- */
10
- const getKey = () => {
11
- if (typeof window === 'undefined') {
12
- return "xl";
13
- }
14
- const width = window.innerWidth;
15
- if (width < breakpoints.sm)
16
- return "xs";
17
- if (width < breakpoints.md)
18
- return "sm";
19
- if (width < breakpoints.lg)
20
- return "md";
21
- if (width < breakpoints.xl)
22
- return "lg";
23
- return "xl";
24
- };
25
- const BreakpointProvider = ({ children }) => {
26
- const [current, setCurrent] = useState("xl");
27
- const handler = useCallback(() => {
28
- const newKey = getKey();
29
- setCurrent(prev => (prev === newKey ? prev : newKey));
30
- }, []);
31
- React__default.useEffect(() => {
32
- window.addEventListener("resize", handler);
33
- handler(); // detect on mount
34
- return () => window.removeEventListener("resize", handler);
35
- }, [handler]);
36
- return (jsx(BreakpointCtx.Provider, { value: current, children: children }));
37
- };
38
-
39
- export { BreakpointCtx, BreakpointProvider };
40
- //# sourceMappingURL=BreakpointProvider.mjs.map
@@ -1,22 +0,0 @@
1
- import { useContext } from 'react';
2
- import { BreakpointCtx } from './BreakpointProvider.mjs';
3
- import { breakpoints } from '../css/index.mjs';
4
-
5
- const useBreakpoint = () => {
6
- const value = useContext(BreakpointCtx);
7
- const getWidth = () => typeof window !== 'undefined' ? window.innerWidth : 99999;
8
- const is = (key) => value === key;
9
- const isUp = (key) => getWidth() >= breakpoints[key];
10
- const isDown = (key) => getWidth() < breakpoints[key];
11
- return {
12
- value,
13
- is,
14
- isUp,
15
- isDown,
16
- isOrUp: (key) => is(key) || isUp(key),
17
- isOrDown: (key) => is(key) || isDown(key)
18
- };
19
- };
20
-
21
- export { useBreakpoint as default };
22
- //# sourceMappingURL=useBreakpoint.mjs.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"useBreakpointProps.mjs","sources":["../../src/breakpoint/useBreakpointProps.ts"],"sourcesContent":["import { isValidElement, useMemo } from \"react\"\r\nimport useBreakpoint from \"./useBreakpoint\"\r\nimport { BreakpointKeys } from \"../css/types\"\r\n\r\nexport type useBreakpointPropsType<P> = P | {\r\n [key in BreakpointKeys]?: P\r\n}\r\n\r\nconst useBreakpointProps = <P extends object>(props: useBreakpointPropsType<P>): useBreakpointPropsType<P> => {\r\n const bpoint = useBreakpoint()\r\n const cachekey = JSON.stringify(props, (key, value) => {\r\n return key === '_owner' || key === '_store' ? undefined : value;\r\n }, 2);\r\n\r\n const bprops = useMemo(() => {\r\n let bprops: any = []\r\n let bkeys = ['xs', 'sm', 'md', 'lg', 'xl']\r\n\r\n for (let prop in props) {\r\n let val = (props as any)[prop]\r\n if (!isValidElement(val) && typeof val === 'object' && val !== null && Object.keys(val).some(k => bkeys.includes(k))) {\r\n bprops.push(prop)\r\n }\r\n }\r\n return bprops\r\n }, [cachekey]);\r\n\r\n\r\n if (bprops.length === 0) return props;\r\n\r\n const format: any = {\r\n xs: {},\r\n sm: {},\r\n md: {},\r\n lg: {},\r\n xl: {}\r\n }\r\n\r\n for (let prop of bprops) {\r\n let val = (props as any)[prop]\r\n for (let bp in val) {\r\n format[bp][prop] = val[bp]\r\n }\r\n }\r\n\r\n let _props = format.xs || {};\r\n for (let key of ['sm', 'md', 'lg', 'xl']) {\r\n if (bpoint.isDown(key as any)) break;\r\n if (bpoint.isOrUp(key as any)) {\r\n _props = { ..._props, ...format[key] };\r\n }\r\n }\r\n\r\n return {\r\n ...props,\r\n ..._props\r\n };\r\n}\r\n\r\n\r\n\r\nexport default useBreakpointProps"],"names":[],"mappings":";;;AAQA,MAAM,kBAAkB,GAAG,CAAmB,KAAgC,KAA+B;AAC1G,IAAA,MAAM,MAAM,GAAG,aAAa,EAAE;AAC9B,IAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,CAAC,GAAG,EAAE,KAAK,KAAI;AACnD,QAAA,OAAO,GAAG,KAAK,QAAQ,IAAI,GAAG,KAAK,QAAQ,GAAG,SAAS,GAAG,KAAK;IAClE,CAAC,EAAE,CAAC,CAAC;AAEL,IAAA,MAAM,MAAM,GAAG,OAAO,CAAC,MAAK;QACzB,IAAI,MAAM,GAAQ,EAAE;AACpB,QAAA,IAAI,KAAK,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC;AAE1C,QAAA,KAAK,IAAI,IAAI,IAAI,KAAK,EAAE;AACrB,YAAA,IAAI,GAAG,GAAI,KAAa,CAAC,IAAI,CAAC;AAC9B,YAAA,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,IAAI,OAAO,GAAG,KAAK,QAAQ,IAAI,GAAG,KAAK,IAAI,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,EAAE;AACnH,gBAAA,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC;YACpB;QACH;AACA,QAAA,OAAO,MAAM;AAChB,IAAA,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC;AAGd,IAAA,IAAI,MAAM,CAAC,MAAM,KAAK,CAAC;AAAE,QAAA,OAAO,KAAK;AAErC,IAAA,MAAM,MAAM,GAAQ;AACjB,QAAA,EAAE,EAAE,EAAE;AACN,QAAA,EAAE,EAAE,EAAE;AACN,QAAA,EAAE,EAAE,EAAE;AACN,QAAA,EAAE,EAAE,EAAE;AACN,QAAA,EAAE,EAAE;KACN;AAED,IAAA,KAAK,IAAI,IAAI,IAAI,MAAM,EAAE;AACtB,QAAA,IAAI,GAAG,GAAI,KAAa,CAAC,IAAI,CAAC;AAC9B,QAAA,KAAK,IAAI,EAAE,IAAI,GAAG,EAAE;YACjB,MAAM,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,GAAG,CAAC,EAAE,CAAC;QAC7B;IACH;AAEA,IAAA,IAAI,MAAM,GAAG,MAAM,CAAC,EAAE,IAAI,EAAE;AAC5B,IAAA,KAAK,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,EAAE;AACvC,QAAA,IAAI,MAAM,CAAC,MAAM,CAAC,GAAU,CAAC;YAAE;AAC/B,QAAA,IAAI,MAAM,CAAC,MAAM,CAAC,GAAU,CAAC,EAAE;YAC5B,MAAM,GAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAQ,MAAM,CAAA,EAAK,MAAM,CAAC,GAAG,CAAC,CAAE;QACzC;IACH;IAEA,OAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACM,KAAK,CAAA,EACL,MAAM,CAAA;AAEf;;;;"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"aliases.mjs","sources":["../../src/css/aliases.ts"],"sourcesContent":["import { OptionAliases } from 'oncss'\r\nimport { Aliases } from './types'\r\n\r\nconst isStr = (v: any, or: any) => typeof v === 'string' ? v : or\r\n\r\nconst aliases: OptionAliases<Aliases> = {\r\n bgcolor: (v) => ({ backgroundColor: v }),\r\n bgimage: (v) => ({ backgroundImage: `url(${v})`, backgroundSize: \"cover\", backgroundRepeat: \"no-repeat\" }),\r\n bg: (v) => ({ background: v }),\r\n p: (v) => ({ padding: isStr(v, 8 * v) }),\r\n pt: (v) => ({ paddingTop: isStr(v, 8 * v) }),\r\n pr: (v) => ({ paddingRight: isStr(v, 8 * v) }),\r\n pb: (v) => ({ paddingBottom: isStr(v, 8 * v) }),\r\n pl: (v) => ({ paddingLeft: isStr(v, 8 * v) }),\r\n px: (v) => ({ paddingLeft: isStr(v, 8 * v), paddingRight: isStr(v, 8 * v) }),\r\n py: (v) => ({ paddingTop: isStr(v, 8 * v), paddingBottom: isStr(v, 8 * v) }),\r\n m: (v) => ({ margin: isStr(v, 8 * v) }),\r\n mt: (v) => ({ marginTop: isStr(v, 8 * v) }),\r\n mr: (v) => ({ marginRight: isStr(v, 8 * v) }),\r\n mb: (v) => ({ marginBottom: isStr(v, 8 * v) }),\r\n ml: (v) => ({ marginLeft: isStr(v, 8 * v) }),\r\n mx: (v) => ({ marginLeft: isStr(v, 8 * v), marginRight: isStr(v, 8 * v) }),\r\n my: (v) => ({ marginTop: isStr(v, 8 * v), marginBottom: isStr(v, 8 * v) }),\r\n radius: (v) => ({ borderRadius: isStr(v, 8 * v) }),\r\n borderRadius: (v) => ({ borderRadius: isStr(v, 8 * v) }),\r\n shadow: (v) => ({ boxShadow: v }),\r\n flexBox: (v) => (v ? { display: \"flex\" } : {}),\r\n flexRow: (v) => (v ? { flexDirection: \"row\" } : {}),\r\n flexColumn: (v) => (v ? { flexDirection: \"column\" } : {}),\r\n flexWraped: (v) => (v ? { flexWrap: \"wrap\" } : {}),\r\n direction: (v) => (v === 'row' || v === 'column' ? { flexDirection: v } : { direction: v }),\r\n gap: (v) => ({ gap: isStr(v, 8 * v) }),\r\n};\r\n\r\nexport default aliases"],"names":[],"mappings":"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"}
package/css/index.mjs.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.mjs","sources":["../../src/css/index.ts"],"sourcesContent":["import getValue from \"./getValue\"\r\nimport getProps from \"./getProps\"\r\nimport aliases from \"./aliases\"\r\nimport { Aliases, BreakpointKeys, CSSOptionProps, CSSProps } from './types'\r\nimport { css as _css } from \"oncss\"\r\n\r\nexport {\r\n getValue,\r\n getProps\r\n}\r\n\r\nexport const breakpoints = {\r\n xs: 0,\r\n sm: 600,\r\n md: 900,\r\n lg: 1200,\r\n xl: 1536\r\n}\r\n\r\nexport const css = (props: CSSProps, options?: CSSOptionProps) => {\r\n const cssOptions: CSSOptionProps = {\r\n ...options,\r\n breakpoints,\r\n aliases,\r\n getValue: (p: any, v: any, _c: any, dept) => {\r\n if (options?.getValue) {\r\n let _val = options?.getValue(p, v, _c, dept)\r\n if (_val) return _val\r\n }\r\n return getValue(p, v, _c)\r\n },\r\n getProps: (p: any, v: any, _c: any, dept) => {\r\n if (options?.getProps) {\r\n let _p = options?.getProps(p, v, _c, dept)\r\n if (_p) return _p\r\n }\r\n return getProps(p, v, _c)\r\n },\r\n }\r\n return _css<Aliases, BreakpointKeys>(props, cssOptions)\r\n}\r\n\r\nexport const adjustColor = (hex: string, factor: number) => {\r\n\r\n hex = hex.replace(/^#/, '')\r\n\r\n let r = parseInt(hex.slice(0, 2), 16)\r\n let g = parseInt(hex.slice(2, 4), 16)\r\n let b = parseInt(hex.slice(4, 6), 16)\r\n\r\n r = Math.floor(r * factor)\r\n g = Math.floor(g * factor)\r\n b = Math.floor(b * factor)\r\n\r\n r = Math.min(255, Math.max(0, r))\r\n g = Math.min(255, Math.max(0, g))\r\n b = Math.min(255, Math.max(0, b))\r\n\r\n return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;\r\n}\r\n\r\nexport const adjustTextContrast = (color: string) => {\r\n color = color.replace(/^#/, '')\r\n const r = parseInt(color.slice(0, 2), 16);\r\n const g = parseInt(color.slice(2, 4), 16);\r\n const b = parseInt(color.slice(4, 6), 16);\r\n\r\n const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;\r\n return luminance > 0.5 ? '#111111' : '#FFFFFF';\r\n}\r\n\r\nexport const alpha = (color: string, opacity = 1) => {\r\n if (typeof opacity !== 'number') return color\r\n let _opacity = opacity * 100\r\n if (!color.startsWith(\"#\")) throw new Error(`color must be hex`)\r\n return (color + (`0${Math.round((255 / 100) * _opacity).toString(16)}`.slice(-2))).toUpperCase();\r\n};\r\n\r\n"],"names":["_css"],"mappings":"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"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"useAnimation.mjs","sources":["../../src/hooks/useAnimation.ts"],"sourcesContent":["\"use client\";\r\nimport { css } from '../css'\r\nimport { useId } from 'react'\r\nimport { CSSProps } from '../css/types'\r\n\r\nexport const animationEases = {\r\n standard: \"cubic-bezier(0.4, 0, 0.2, 1)\",\r\n fast: \"cubic-bezier(0.2, 0, 0, 1)\",\r\n smooth: \"cubic-bezier(0.25, 0.46, 0.45, 0.94)\",\r\n linear: \"cubic-bezier(0, 0, 1, 1)\",\r\n bounce: \"cubic-bezier(0.34, 1.50, 0.64, 1)\",\r\n};\r\n\r\nexport interface UseAnimationProps {\r\n delay?: number;\r\n duration?: number;\r\n from: CSSProps;\r\n to: CSSProps;\r\n ease?: keyof typeof animationEases;\r\n}\r\n\r\nconst useAnimation = ({ from, to, delay, ease, duration }: UseAnimationProps) => {\r\n let _delay = delay || 0;\r\n let _duration = duration || 600;\r\n let _ease = ease || \"standard\"\r\n const id = \"anim\" + useId().replace(/:/g, \"\")\r\n const anim = css({\r\n animationName: id,\r\n animationDelay: _delay + \"ms\",\r\n animationDuration: _duration + \"ms\",\r\n animationTimingFunction: animationEases[_ease] || animationEases.standard,\r\n [`@keyframes ${id}`]: {\r\n from: from as any,\r\n to: to as any\r\n }\r\n })\r\n return anim.classname\r\n}\r\n\r\nexport default useAnimation"],"names":[],"mappings":";;;;AAKO;AACH;AACA;AACA;AACA;AACA;;AAWJ;AACI;AACA;AACA;AACA;;AAEI;;;;AAIA;AACI;AACA;AACH;AACJ;;AAEL;;"}
@@ -1,17 +0,0 @@
1
- import { useTheme } from '../theme/core.mjs';
2
- import '../css/getValue.mjs';
3
- import 'oncss';
4
- import '../theme/ThemeProvider.mjs';
5
- import 'react-state-bucket';
6
-
7
- const useInterface = (name, userPorps, defaultProps) => {
8
- const theme = useTheme();
9
- let _props = Object.assign(Object.assign({}, defaultProps), userPorps);
10
- if (name in theme.interfaces) {
11
- return theme.interfaces[name](_props, theme);
12
- }
13
- return [_props, theme];
14
- };
15
-
16
- export { useInterface as default };
17
- //# sourceMappingURL=useInterface.mjs.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"useInterface.mjs","sources":["../../src/hooks/useInterface.ts"],"sourcesContent":["import { useTheme } from \"../theme\"\r\n\r\nconst useInterface = <P extends object>(name: string, userPorps: P, defaultProps: P) => {\r\n const theme = useTheme()\r\n let _props = { ...defaultProps, ...userPorps } as P\r\n if (name in theme.interfaces) {\r\n return theme.interfaces[name](_props, theme)\r\n }\r\n return [_props, theme]\r\n}\r\n\r\nexport default useInterface"],"names":[],"mappings":";;;;;;AAEA,MAAM,YAAY,GAAG,CAAmB,IAAY,EAAE,SAAY,EAAE,YAAe,KAAI;AACnF,IAAA,MAAM,KAAK,GAAG,QAAQ,EAAE;AACxB,IAAA,IAAI,MAAM,GAAG,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,YAAY,CAAA,EAAK,SAAS,CAAO;AACnD,IAAA,IAAI,IAAI,IAAI,KAAK,CAAC,UAAU,EAAE;QAC1B,OAAO,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,KAAK,CAAC;IAChD;AACA,IAAA,OAAO,CAAC,MAAM,EAAE,KAAK,CAAC;AAC1B;;;;"}
@@ -1,68 +0,0 @@
1
- "use client";
2
- import { jsx } from 'react/jsx-runtime';
3
- import React__default, { useMemo, useEffect } from 'react';
4
- import { createRoot } from 'react-dom/client';
5
- import { useTheme } from '../theme/core.mjs';
6
- import '../css/getValue.mjs';
7
- import 'oncss';
8
- import ThemeProvider from '../theme/ThemeProvider.mjs';
9
- import 'react-state-bucket';
10
- import { useAppRootElement } from '../AppRoot/context.mjs';
11
-
12
- function usePortal(children, options) {
13
- options = options || {};
14
- if (options.autoMount === undefined) {
15
- options.autoMount = true;
16
- }
17
- const [mounted, setMounted] = React__default.useState(options.autoMount);
18
- const theme = useTheme();
19
- const appRoot = useAppRootElement();
20
- const { el, root } = useMemo(() => {
21
- const el = document.createElement("div");
22
- const root = createRoot(el);
23
- return { el, root };
24
- }, [options.autoMount]);
25
- const container = () => {
26
- const container = (options === null || options === void 0 ? void 0 : options.container) || appRoot;
27
- if (!container)
28
- throw new Error(`Container not found for portal. Please ensure that AppRoot is present in the application tree.`);
29
- return container;
30
- };
31
- const mount = () => {
32
- const cont = container();
33
- if (!cont.contains(el)) {
34
- cont.appendChild(el);
35
- }
36
- root.render(jsx(ThemeProvider, { theme: theme.name, children: children }));
37
- };
38
- const unmount = () => {
39
- root.render(null);
40
- el.remove();
41
- };
42
- useEffect(() => {
43
- if (mounted) {
44
- mount();
45
- }
46
- else {
47
- unmount();
48
- }
49
- }, [mounted]);
50
- useEffect(() => {
51
- if (mounted) {
52
- mount();
53
- }
54
- }, [children]);
55
- useEffect(() => {
56
- return () => {
57
- unmount();
58
- };
59
- }, []);
60
- return {
61
- isMount: () => mounted,
62
- mount: () => setMounted(true),
63
- unmount: () => setMounted(false)
64
- };
65
- }
66
-
67
- export { usePortal as default };
68
- //# sourceMappingURL=usePortal.mjs.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"usePortal.mjs","sources":["../../src/hooks/usePortal.tsx"],"sourcesContent":["\"use client\";\r\nimport React, { useEffect, useMemo } from \"react\";\r\nimport { createRoot } from \"react-dom/client\";\r\nimport { ThemeProvider, useTheme } from \"../theme\";\r\nimport { useAppRootElement } from \"../AppRoot/context\";\r\n\r\nexport type UsePortalOptions = {\r\n container?: HTMLElement;\r\n autoMount?: boolean;\r\n}\r\n\r\nfunction usePortal(children: React.ReactNode, options?: UsePortalOptions) {\r\n options = options || {};\r\n if (options.autoMount === undefined) {\r\n options.autoMount = true;\r\n }\r\n const [mounted, setMounted] = React.useState(options.autoMount);\r\n const theme = useTheme();\r\n const appRoot = useAppRootElement();\r\n const { el, root } = useMemo(() => {\r\n const el = document.createElement(\"div\");\r\n const root = createRoot(el);\r\n return { el, root };\r\n }, [options.autoMount]);\r\n\r\n const container = () => {\r\n const container = options?.container || appRoot\r\n if (!container) throw new Error(`Container not found for portal. Please ensure that AppRoot is present in the application tree.`);\r\n return container;\r\n }\r\n\r\n const mount = () => {\r\n const cont = container();\r\n if (!cont.contains(el)) {\r\n cont.appendChild(el);\r\n }\r\n root.render(<ThemeProvider theme={theme.name}>{children}</ThemeProvider>)\r\n }\r\n\r\n const unmount = () => {\r\n root.render(null)\r\n el.remove();\r\n }\r\n\r\n\r\n useEffect(() => {\r\n if (mounted) {\r\n mount()\r\n } else {\r\n unmount()\r\n }\r\n }, [mounted]);\r\n\r\n useEffect(() => {\r\n if (mounted) {\r\n mount()\r\n }\r\n }, [children]);\r\n\r\n useEffect(() => {\r\n return () => {\r\n unmount()\r\n };\r\n }, []);\r\n\r\n return {\r\n isMount: () => mounted,\r\n mount: () => setMounted(true),\r\n unmount: () => setMounted(false)\r\n }\r\n}\r\n\r\n\r\nexport default usePortal;"],"names":[],"mappings":";;;;;;;;;;;AAWA;AACG;AACA;AACG;;AAEH;AACA;AACA;;;AAGG;AACA;AACH;;AAGG;AACA;AAAgB;AAChB;AACH;;AAGG;;AAEG;;AAEH;AACH;;AAGG;;AAEH;;;AAKM;;;AAEA;;AAEN;;;AAIM;;AAEN;;AAGG;AACG;AACH;;;AAIA;AACA;AACA;;AAEN;;"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.mjs","sources":["../../../src/hooks/useTransition/index.ts"],"sourcesContent":["\"use client\";\r\nimport { useState, useEffect, useId } from 'react';\r\nimport { animationEases } from '../useAnimation';\r\nimport { css } from '../../css';\r\nimport { formatCSSProp } from 'oncss';\r\nimport { CSSProps } from '../../css/types';\r\nimport * as variants from './variants'\r\nimport { useDocument } from '../../Document';\r\n\r\nexport type UseTransitionVariantTypes = keyof typeof variants\r\nexport type UseTransitionState = \"open\" | \"opened\" | \"close\" | \"closed\"\r\n\r\nexport type UseTransitionVariant = (rect: DOMRect) => ({ from: CSSProps, to: CSSProps })\r\n\r\nexport type UseTransitionProps = {\r\n open: boolean;\r\n variant: UseTransitionVariant | UseTransitionVariantTypes;\r\n ease?: string;\r\n easing?: keyof typeof animationEases;\r\n duration?: number;\r\n delay?: number;\r\n disableInitialTransition?: boolean;\r\n exitOnUnmount?: boolean;\r\n onOpen?: () => void;\r\n onOpened?: () => void;\r\n onClose?: () => void;\r\n onClosed?: () => void;\r\n onState?: (state: UseTransitionState) => void;\r\n}\r\n\r\n\r\nconst style = (obj = {}, doc: Document) => {\r\n return css(obj, { selector: \"#\", container: doc }).classname;\r\n}\r\n\r\nconst getVariant = (rect: DOMRect | null, variant: UseTransitionProps['variant']) => {\r\n let fn = typeof variant === 'string' ? variants[variant] : variant\r\n if (!fn) throw new Error(`Transition variant \"${variant}\" not found.`)\r\n return fn(rect as DOMRect);\r\n}\r\n\r\nconst useTransition = ({ open, ...props }: UseTransitionProps) => {\r\n let {\r\n disableInitialTransition = false,\r\n variant = \"fade\",\r\n duration = 400,\r\n delay,\r\n ease,\r\n easing,\r\n exitOnUnmount = false,\r\n onOpen,\r\n onOpened,\r\n onClose,\r\n onClosed,\r\n onState\r\n } = props\r\n const doc = useDocument();\r\n let _ease = ease || (animationEases as any)[easing as any] || animationEases.bounce\r\n const id = \"xui-transition-\" + useId()\r\n const [state, setState] = useState({\r\n initial: false,\r\n classname: style({ visibility: \"hidden\" }, doc),\r\n variant: variant,\r\n rect: null as DOMRect | null,\r\n stage: open ? \"open\" : \"closed\",\r\n unmounted: false,\r\n })\r\n\r\n const getEle = () => doc.querySelector(`[data-transition=\"${id}\"]`) as HTMLElement;\r\n const getBoundary = () => state.rect || getEle()?.getBoundingClientRect() || new DOMRect(0, 0, 0, 0);\r\n\r\n useEffect(() => {\r\n if (exitOnUnmount && state.stage === 'closed') {\r\n if (!open) {\r\n setState(s => ({\r\n ...s,\r\n initial: false,\r\n classname: \"\",\r\n unmounted: true,\r\n variant: variant,\r\n }))\r\n } else {\r\n setState(s => ({\r\n ...s,\r\n variant: variant,\r\n classname: style({ visibility: \"hidden\" }, doc),\r\n stage: \"open\",\r\n }))\r\n }\r\n }\r\n }, [open, state.stage, exitOnUnmount, variant])\r\n\r\n // initial effect\r\n useEffect(() => {\r\n const ele = getEle()\r\n if (!ele) return\r\n if (exitOnUnmount && state.stage === 'closed') return\r\n\r\n const rect = getBoundary();\r\n let { from } = getVariant(rect, state.variant)\r\n if (open && !state.initial) {\r\n setState(s => ({\r\n ...s,\r\n classname: (!disableInitialTransition || state.unmounted) ? style(from, doc) : \"\",\r\n initial: true,\r\n rect: rect,\r\n }))\r\n let stimer: any = null\r\n let etimer: any = null\r\n ele.ontransitionstart = () => {\r\n clearTimeout(stimer)\r\n stimer = setTimeout(() => {\r\n const isOpen = ele.getAttribute('data-transition-state') === 'open';\r\n (onOpen && isOpen) && onOpen();\r\n (onClose && !isOpen) && onClose()\r\n onState && onState(isOpen ? \"open\" : \"close\")\r\n setState(s => ({\r\n ...s,\r\n stage: isOpen ? \"open\" : \"close\"\r\n }))\r\n }, 1)\r\n }\r\n\r\n ele.ontransitionend = () => {\r\n clearTimeout(etimer)\r\n etimer = setTimeout(() => {\r\n const isOpen = ele.getAttribute('data-transition-state') === 'open';\r\n (onOpened && isOpen) && onOpened();\r\n (onClosed && !isOpen) && onClosed();\r\n onState && onState(isOpen ? \"opened\" : \"closed\")\r\n setState(s => ({\r\n ...s,\r\n stage: isOpen ? \"opened\" : \"closed\"\r\n }))\r\n }, 1)\r\n }\r\n } else if (!state.initial) {\r\n setState(s => ({\r\n ...s,\r\n classname: style(from, doc),\r\n rect: rect,\r\n }))\r\n }\r\n }, [open, state.initial, state.stage, exitOnUnmount])\r\n\r\n\r\n useEffect(() => {\r\n if (state.initial) {\r\n let _variant = state.variant !== variant ? variant : state.variant\r\n const { from, to } = getVariant(state.rect, _variant)\r\n let _css: CSSProps = open ? to : from\r\n let trans = ` ${duration}ms ${_ease} ${delay || 0}ms`\r\n let _ = {\r\n ..._css,\r\n transition: Object.keys(_css || {}).map(k => formatCSSProp(k)).join(trans + \", \") + trans,\r\n }\r\n setState(s => ({\r\n ...s,\r\n classname: style(_, doc),\r\n variant: _variant\r\n }))\r\n }\r\n }, [open, state.initial, variant])\r\n\r\n return {\r\n exited: exitOnUnmount && state.stage === 'closed',\r\n props: {\r\n 'id': state.classname,\r\n 'data-transition': id,\r\n 'data-transition-state': open ? 'open' : 'close',\r\n }\r\n }\r\n}\r\n\r\n\r\nexport default useTransition"],"names":[],"mappings":";;;;;;;;;AA+BA;AACG;AACH;AAEA;AACG;AACA;AAAS;AACT;AACH;AAEA;AAAuB;AACpB;AAcA;AACA;AACA;AACA;AACG;;AAEA;AACA;;AAEA;AACF;AAED;AACA;;;;;;;AAaS;;;AAQT;;;AAIG;AACA;;AACA;;AAEA;AACA;AACA;AACG;;;AAQA;;AAEG;;AAEG;;AAEA;;;AAMN;AAEA;;AAEG;;AAEG;;AAEA;;;AAMN;;AACI;;;AAOV;;AAIG;AACG;AACA;;;AAGA;;;;;AAaH;AACA;;AAEG;;AAEF;;AAEP;;"}
package/index.mjs DELETED
@@ -1,25 +0,0 @@
1
- export { default as Tag } from './Tag/index.mjs';
2
- export { default as useTagProps } from './Tag/useTagProps.mjs';
3
- export { animationEases, default as useAnimation } from './hooks/useAnimation.mjs';
4
- export { default as useColorTemplate } from './hooks/useColorTemplate.mjs';
5
- export { default as useBreakpoint } from './breakpoint/useBreakpoint.mjs';
6
- export { default as useBreakpointProps } from './breakpoint/useBreakpointProps.mjs';
7
- export { default as useInterface } from './hooks/useInterface.mjs';
8
- export { default as useTransition } from './hooks/useTransition/index.mjs';
9
- export { default as useMergeRefs } from './hooks/useMergeRefs.mjs';
10
- export { default as Transition } from './Transition/index.mjs';
11
- export { APP_ROOT_CLASSNAME, default as AppRoot } from './AppRoot/index.mjs';
12
- export { default as usePortal } from './hooks/usePortal.mjs';
13
- export { Renderar } from './AppRoot/Renderar.mjs';
14
- export { useDocument } from './Document/index.mjs';
15
- export { useAppRootElement } from './AppRoot/context.mjs';
16
- export { default as Iframe } from './Iframe/index.mjs';
17
- export { adjustColor, adjustTextContrast, alpha, breakpoints, css } from './css/index.mjs';
18
- export { themeRootClass } from './theme/index.mjs';
19
- export { default as getValue } from './css/getValue.mjs';
20
- export { default as getProps } from './css/getProps.mjs';
21
- export { default as ThemeProvider } from './theme/ThemeProvider.mjs';
22
- export { default as createThemeSwitcher } from './theme/createThemeSwitcher.mjs';
23
- export { createTheme } from './theme/createTheme.mjs';
24
- export { getTheme, useTheme } from './theme/core.mjs';
25
- //# sourceMappingURL=index.mjs.map
package/index.mjs.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;"}
@@ -1,44 +0,0 @@
1
- "use client";
2
- import { __rest } from 'tslib';
3
- import { jsxs, jsx } from 'react/jsx-runtime';
4
- import * as React from 'react';
5
- import Tag from '../Tag/index.mjs';
6
- import { ThemeFactory, ThemeContex } from './core.mjs';
7
- import ThemeCssVars from './ThemeCssVars.mjs';
8
- import { css } from '../css/index.mjs';
9
- import { createDefaultThemes } from './ThemeDefaultOptions.mjs';
10
- import ServerStyleTag from '../Tag/ServerStyleTag.mjs';
11
- import { useDocument } from '../Document/index.mjs';
12
-
13
- createDefaultThemes();
14
- const ThemeProvider = (_a) => {
15
- var { children, theme } = _a, props = __rest(_a, ["children", "theme"]);
16
- let THEME = ThemeFactory.get(theme);
17
- if (!THEME) {
18
- console.error(`ThemeProvider: The theme '${theme}' is not defined. Please make sure to use a valid theme name.`);
19
- THEME = ThemeFactory.get("light");
20
- }
21
- const doc = useDocument();
22
- const globalStyle = React.useMemo(() => {
23
- const root_cls = `.xui-${theme}-theme-root`;
24
- let gkeys = Object.keys(THEME.globalStyle || {});
25
- let gstyles = {};
26
- gkeys.forEach((key) => {
27
- gstyles[`${root_cls} ${key}`] = THEME.globalStyle[key];
28
- });
29
- return css({
30
- "@global": Object.assign(Object.assign({}, gstyles), { [root_cls]: ThemeCssVars(THEME) })
31
- }, {
32
- injectStyle: typeof window !== 'undefined',
33
- container: doc,
34
- });
35
- }, [theme]);
36
- return (jsxs(ThemeContex.Provider, { value: theme, children: [jsx(ServerStyleTag, { factory: globalStyle }), jsx(Tag, Object.assign({ minHeight: "100%", bgcolor: "background.primary", color: "text.primary", fontSize: "text", fontWeight: "text", lineHeight: "text", fontFamily: `system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif` }, props, { sxr: {
37
- "& a": {
38
- color: "brand.primary",
39
- },
40
- }, baseClass: `${theme}-theme-root`, direction: THEME.rtl ? "rtl" : "ltr", children: children }))] }));
41
- };
42
-
43
- export { ThemeProvider as default };
44
- //# sourceMappingURL=ThemeProvider.mjs.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"ThemeProvider.mjs","sources":["../../src/theme/ThemeProvider.tsx"],"sourcesContent":["\"use client\";\r\nimport * as React from \"react\"\r\nimport { ThemeOptions } from \"./types\"\r\nimport Tag from \"../Tag\"\r\nimport { TagComponentType, TagProps } from \"../Tag/types\"\r\nimport { ThemeContex, ThemeFactory } from \"./core\"\r\nimport ThemeCssVars from \"./ThemeCssVars\"\r\nimport { css } from \"../css\"\r\nimport { createDefaultThemes } from \"./ThemeDefaultOptions\"\r\nimport ServerStyleTag from \"../Tag/ServerStyleTag\"\r\nimport { useDocument } from \"../Document\";\r\n\r\nexport type ThemeProviderProps<T extends TagComponentType = 'div'> = TagProps<T> & {\r\n theme: string;\r\n}\r\n\r\ncreateDefaultThemes()\r\n\r\nconst ThemeProvider = <T extends TagComponentType = 'div'>({ children, theme, ...props }: ThemeProviderProps<T>) => {\r\n let THEME = ThemeFactory.get(theme) as ThemeOptions\r\n if (!THEME) {\r\n console.error(`ThemeProvider: The theme '${theme}' is not defined. Please make sure to use a valid theme name.`)\r\n THEME = ThemeFactory.get(\"light\") as ThemeOptions\r\n }\r\n const doc = useDocument();\r\n\r\n const globalStyle: any = React.useMemo(() => {\r\n const root_cls = `.xui-${theme}-theme-root`\r\n let gkeys = Object.keys(THEME.globalStyle || {})\r\n let gstyles: any = {}\r\n gkeys.forEach((key) => {\r\n gstyles[`${root_cls} ${key}`] = THEME.globalStyle[key as any]\r\n })\r\n\r\n return css({\r\n \"@global\": {\r\n ...gstyles,\r\n [root_cls]: ThemeCssVars(THEME)\r\n }\r\n }, {\r\n injectStyle: typeof window !== 'undefined',\r\n container: doc,\r\n })\r\n }, [theme])\r\n\r\n return (\r\n <ThemeContex.Provider value={theme}>\r\n <ServerStyleTag factory={globalStyle} />\r\n <Tag\r\n minHeight=\"100%\"\r\n bgcolor=\"background.primary\"\r\n color=\"text.primary\"\r\n fontSize=\"text\"\r\n fontWeight=\"text\"\r\n lineHeight=\"text\"\r\n fontFamily={`system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif`}\r\n {...props}\r\n sxr={{\r\n \"& a\": {\r\n color: \"brand.primary\",\r\n },\r\n }}\r\n baseClass={`${theme}-theme-root`}\r\n direction={THEME.rtl ? \"rtl\" : \"ltr\"}\r\n >\r\n {children}\r\n </Tag>\r\n </ThemeContex.Provider>\r\n )\r\n}\r\n\r\nexport default ThemeProvider"],"names":[],"mappings":";;;;;;;;;;;;AAgBA;AAEA;;;;AAGM;AACA;;AAEH;AAEA;AACG;AACA;;AAEA;AACG;AACH;AAEA;;;AAMG;AACA;AACF;AACJ;;AAeY;AACG;AACF;;AAShB;;"}