@xanui/ui 1.1.37 → 1.1.40

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 (310) hide show
  1. package/Accordion/index.cjs +96 -0
  2. package/Accordion/index.cjs.map +1 -0
  3. package/Accordion/index.js +19 -21
  4. package/Accordion/index.js.map +1 -1
  5. package/Alert/index.cjs +121 -0
  6. package/Alert/index.cjs.map +1 -0
  7. package/Alert/index.js +33 -35
  8. package/Alert/index.js.map +1 -1
  9. package/Autocomplete/index.cjs +136 -0
  10. package/Autocomplete/index.cjs.map +1 -0
  11. package/Autocomplete/index.js +23 -25
  12. package/Autocomplete/index.js.map +1 -1
  13. package/Avatar/index.cjs +50 -0
  14. package/Avatar/index.cjs.map +1 -0
  15. package/Avatar/index.js +15 -17
  16. package/Avatar/index.js.map +1 -1
  17. package/Badge/index.cjs +109 -0
  18. package/Badge/index.cjs.map +1 -0
  19. package/Badge/index.js +12 -14
  20. package/Badge/index.js.map +1 -1
  21. package/Box/index.cjs +14 -0
  22. package/Box/index.cjs.map +1 -0
  23. package/Box/index.js +7 -9
  24. package/Box/index.js.map +1 -1
  25. package/Button/index.cjs +94 -0
  26. package/Button/index.cjs.map +1 -0
  27. package/Button/index.js +17 -19
  28. package/Button/index.js.map +1 -1
  29. package/ButtonGroup/index.cjs +58 -0
  30. package/ButtonGroup/index.cjs.map +1 -0
  31. package/ButtonGroup/index.js +12 -14
  32. package/ButtonGroup/index.js.map +1 -1
  33. package/Calendar/index.cjs +174 -0
  34. package/Calendar/index.cjs.map +1 -0
  35. package/Calendar/index.js +39 -41
  36. package/Calendar/index.js.map +1 -1
  37. package/CalendarInput/index.cjs +34 -0
  38. package/CalendarInput/index.cjs.map +1 -0
  39. package/CalendarInput/index.js +19 -21
  40. package/CalendarInput/index.js.map +1 -1
  41. package/Checkbox/index.cjs +58 -0
  42. package/Checkbox/index.cjs.map +1 -0
  43. package/Checkbox/index.js +14 -16
  44. package/Checkbox/index.js.map +1 -1
  45. package/Chip/index.cjs +76 -0
  46. package/Chip/index.cjs.map +1 -0
  47. package/Chip/index.js +12 -14
  48. package/Chip/index.js.map +1 -1
  49. package/CircleProgress/index.cjs +129 -0
  50. package/CircleProgress/index.cjs.map +1 -0
  51. package/CircleProgress/index.js +13 -15
  52. package/CircleProgress/index.js.map +1 -1
  53. package/ClickOutside/index.cjs +37 -0
  54. package/ClickOutside/index.cjs.map +1 -0
  55. package/ClickOutside/index.js +9 -11
  56. package/ClickOutside/index.js.map +1 -1
  57. package/Collaps/index.cjs +26 -0
  58. package/Collaps/index.cjs.map +1 -0
  59. package/Collaps/index.js +9 -11
  60. package/Collaps/index.js.map +1 -1
  61. package/Container/index.cjs +29 -0
  62. package/Container/index.cjs.map +1 -0
  63. package/Container/index.js +9 -11
  64. package/Container/index.js.map +1 -1
  65. package/DataFilter/index.cjs +78 -0
  66. package/DataFilter/index.cjs.map +1 -0
  67. package/DataFilter/index.js +30 -41
  68. package/DataFilter/index.js.map +1 -1
  69. package/DataFilter/options/DateFilter.cjs +32 -0
  70. package/DataFilter/options/DateFilter.cjs.map +1 -0
  71. package/DataFilter/options/DateFilter.js +16 -18
  72. package/DataFilter/options/DateFilter.js.map +1 -1
  73. package/DataFilter/options/DateRangeFilter.cjs +27 -0
  74. package/DataFilter/options/DateRangeFilter.cjs.map +1 -0
  75. package/DataFilter/options/DateRangeFilter.js +12 -14
  76. package/DataFilter/options/DateRangeFilter.js.map +1 -1
  77. package/DataFilter/options/MultiSelectFilter.cjs +38 -0
  78. package/DataFilter/options/MultiSelectFilter.cjs.map +1 -0
  79. package/DataFilter/options/MultiSelectFilter.js +20 -22
  80. package/DataFilter/options/MultiSelectFilter.js.map +1 -1
  81. package/DataFilter/options/NumberFilter.cjs +24 -0
  82. package/DataFilter/options/NumberFilter.cjs.map +1 -0
  83. package/DataFilter/options/NumberFilter.js +11 -13
  84. package/DataFilter/options/NumberFilter.js.map +1 -1
  85. package/DataFilter/options/NumberRangeFilter.cjs +29 -0
  86. package/DataFilter/options/NumberRangeFilter.cjs.map +1 -0
  87. package/DataFilter/options/NumberRangeFilter.js +12 -14
  88. package/DataFilter/options/NumberRangeFilter.js.map +1 -1
  89. package/DataFilter/options/SelectFilter.cjs +34 -0
  90. package/DataFilter/options/SelectFilter.cjs.map +1 -0
  91. package/DataFilter/options/SelectFilter.js +18 -20
  92. package/DataFilter/options/SelectFilter.js.map +1 -1
  93. package/DataFilter/options/TextFilter.cjs +24 -0
  94. package/DataFilter/options/TextFilter.cjs.map +1 -0
  95. package/DataFilter/options/TextFilter.js +11 -13
  96. package/DataFilter/options/TextFilter.js.map +1 -1
  97. package/Datatable/FilterBox.cjs +39 -0
  98. package/Datatable/FilterBox.cjs.map +1 -0
  99. package/Datatable/FilterBox.js +21 -23
  100. package/Datatable/FilterBox.js.map +1 -1
  101. package/Datatable/Row.cjs +59 -0
  102. package/Datatable/Row.cjs.map +1 -0
  103. package/Datatable/Row.js +19 -21
  104. package/Datatable/Row.js.map +1 -1
  105. package/Datatable/SelectedBox.cjs +21 -0
  106. package/Datatable/SelectedBox.cjs.map +1 -0
  107. package/Datatable/SelectedBox.js +10 -12
  108. package/Datatable/SelectedBox.js.map +1 -1
  109. package/Datatable/Table.cjs +23 -0
  110. package/Datatable/Table.cjs.map +1 -0
  111. package/Datatable/Table.js +8 -10
  112. package/Datatable/Table.js.map +1 -1
  113. package/Datatable/TableHead.cjs +61 -0
  114. package/Datatable/TableHead.cjs.map +1 -0
  115. package/Datatable/TableHead.js +18 -20
  116. package/Datatable/TableHead.js.map +1 -1
  117. package/Datatable/index.cjs +93 -0
  118. package/Datatable/index.cjs.map +1 -0
  119. package/Datatable/index.js +21 -23
  120. package/Datatable/index.js.map +1 -1
  121. package/Divider/index.cjs +31 -0
  122. package/Divider/index.cjs.map +1 -0
  123. package/Divider/index.js +8 -10
  124. package/Divider/index.js.map +1 -1
  125. package/Drawer/index.cjs +78 -0
  126. package/Drawer/index.cjs.map +1 -0
  127. package/Drawer/index.js +12 -14
  128. package/Drawer/index.js.map +1 -1
  129. package/Form/index.cjs +45 -0
  130. package/Form/index.cjs.map +1 -0
  131. package/Form/index.js +8 -10
  132. package/Form/index.js.map +1 -1
  133. package/GridContainer/index.cjs +19 -0
  134. package/GridContainer/index.cjs.map +1 -0
  135. package/GridContainer/index.js +7 -9
  136. package/GridContainer/index.js.map +1 -1
  137. package/GridItem/index.cjs +20 -0
  138. package/GridItem/index.cjs.map +1 -0
  139. package/GridItem/index.js +7 -9
  140. package/GridItem/index.js.map +1 -1
  141. package/IconButton/index.cjs +64 -0
  142. package/IconButton/index.cjs.map +1 -0
  143. package/IconButton/index.js +12 -14
  144. package/IconButton/index.js.map +1 -1
  145. package/Image/index.cjs +27 -0
  146. package/Image/index.cjs.map +1 -0
  147. package/Image/index.js +9 -11
  148. package/Image/index.js.map +1 -1
  149. package/Input/index.cjs +144 -0
  150. package/Input/index.cjs.map +1 -0
  151. package/Input/index.js +18 -20
  152. package/Input/index.js.map +1 -1
  153. package/InputNumber/index.cjs +32 -0
  154. package/InputNumber/index.cjs.map +1 -0
  155. package/InputNumber/index.js +6 -8
  156. package/InputNumber/index.js.map +1 -1
  157. package/Label/index.cjs +24 -0
  158. package/Label/index.cjs.map +1 -0
  159. package/Label/index.js +7 -9
  160. package/Label/index.js.map +1 -1
  161. package/Layer/index.cjs +62 -0
  162. package/Layer/index.cjs.map +1 -0
  163. package/Layer/index.js +19 -21
  164. package/Layer/index.js.map +1 -1
  165. package/LineProgress/index.cjs +59 -0
  166. package/LineProgress/index.cjs.map +1 -0
  167. package/LineProgress/index.js +11 -13
  168. package/LineProgress/index.js.map +1 -1
  169. package/List/ListContext.cjs +11 -0
  170. package/List/ListContext.cjs.map +1 -0
  171. package/List/ListContext.js +2 -5
  172. package/List/ListContext.js.map +1 -1
  173. package/List/index.cjs +63 -0
  174. package/List/index.cjs.map +1 -0
  175. package/List/index.js +12 -14
  176. package/List/index.js.map +1 -1
  177. package/ListItem/index.cjs +54 -0
  178. package/ListItem/index.cjs.map +1 -0
  179. package/ListItem/index.js +12 -14
  180. package/ListItem/index.js.map +1 -1
  181. package/LoadingBox/index.cjs +32 -0
  182. package/LoadingBox/index.cjs.map +1 -0
  183. package/LoadingBox/index.js +11 -13
  184. package/LoadingBox/index.js.map +1 -1
  185. package/Menu/index.cjs +150 -0
  186. package/Menu/index.cjs.map +1 -0
  187. package/Menu/index.js +18 -20
  188. package/Menu/index.js.map +1 -1
  189. package/Modal/index.cjs +59 -0
  190. package/Modal/index.cjs.map +1 -0
  191. package/Modal/index.js +15 -17
  192. package/Modal/index.js.map +1 -1
  193. package/NoSSR/index.cjs +15 -0
  194. package/NoSSR/index.cjs.map +1 -0
  195. package/NoSSR/index.js +4 -6
  196. package/NoSSR/index.js.map +1 -1
  197. package/Option/index.cjs +14 -0
  198. package/Option/index.cjs.map +1 -0
  199. package/Option/index.js +7 -9
  200. package/Option/index.js.map +1 -1
  201. package/Paper/index.cjs +15 -0
  202. package/Paper/index.cjs.map +1 -0
  203. package/Paper/index.js +8 -10
  204. package/Paper/index.js.map +1 -1
  205. package/Portal/index.cjs +27 -0
  206. package/Portal/index.cjs.map +1 -0
  207. package/Portal/index.js +9 -11
  208. package/Portal/index.js.map +1 -1
  209. package/Radio/index.cjs +16 -0
  210. package/Radio/index.cjs.map +1 -0
  211. package/Radio/index.js +9 -11
  212. package/Radio/index.js.map +1 -1
  213. package/Scrollbar/index.cjs +59 -0
  214. package/Scrollbar/index.cjs.map +1 -0
  215. package/Scrollbar/index.js +10 -12
  216. package/Scrollbar/index.js.map +1 -1
  217. package/Select/index.cjs +59 -0
  218. package/Select/index.cjs.map +1 -0
  219. package/Select/index.js +22 -24
  220. package/Select/index.js.map +1 -1
  221. package/Skeleton/index.cjs +60 -0
  222. package/Skeleton/index.cjs.map +1 -0
  223. package/Skeleton/index.js +7 -9
  224. package/Skeleton/index.js.map +1 -1
  225. package/Stack/index.cjs +17 -0
  226. package/Stack/index.cjs.map +1 -0
  227. package/Stack/index.js +7 -9
  228. package/Stack/index.js.map +1 -1
  229. package/Switch/index.cjs +79 -0
  230. package/Switch/index.cjs.map +1 -0
  231. package/Switch/index.js +12 -14
  232. package/Switch/index.js.map +1 -1
  233. package/Tab/index.cjs +17 -0
  234. package/Tab/index.cjs.map +1 -0
  235. package/Tab/index.js +9 -11
  236. package/Tab/index.js.map +1 -1
  237. package/Table/index.cjs +88 -0
  238. package/Table/index.cjs.map +1 -0
  239. package/Table/index.js +13 -15
  240. package/Table/index.js.map +1 -1
  241. package/TableBody/index.cjs +14 -0
  242. package/TableBody/index.cjs.map +1 -0
  243. package/TableBody/index.js +7 -9
  244. package/TableBody/index.js.map +1 -1
  245. package/TableCell/index.cjs +14 -0
  246. package/TableCell/index.cjs.map +1 -0
  247. package/TableCell/index.js +7 -9
  248. package/TableCell/index.js.map +1 -1
  249. package/TableFooter/index.cjs +14 -0
  250. package/TableFooter/index.cjs.map +1 -0
  251. package/TableFooter/index.js +7 -9
  252. package/TableFooter/index.js.map +1 -1
  253. package/TableHead/index.cjs +14 -0
  254. package/TableHead/index.cjs.map +1 -0
  255. package/TableHead/index.js +7 -9
  256. package/TableHead/index.js.map +1 -1
  257. package/TablePagination/index.cjs +59 -0
  258. package/TablePagination/index.cjs.map +1 -0
  259. package/TablePagination/index.js +21 -23
  260. package/TablePagination/index.js.map +1 -1
  261. package/TableRow/index.cjs +14 -0
  262. package/TableRow/index.cjs.map +1 -0
  263. package/TableRow/index.js +7 -9
  264. package/TableRow/index.js.map +1 -1
  265. package/Tabs/index.cjs +201 -0
  266. package/Tabs/index.cjs.map +1 -0
  267. package/Tabs/index.js +19 -21
  268. package/Tabs/index.js.map +1 -1
  269. package/Text/index.cjs +25 -0
  270. package/Text/index.cjs.map +1 -0
  271. package/Text/index.js +8 -10
  272. package/Text/index.js.map +1 -1
  273. package/Toast/index.cjs +120 -0
  274. package/Toast/index.cjs.map +1 -0
  275. package/Toast/index.js +18 -20
  276. package/Toast/index.js.map +1 -1
  277. package/Tooltip/index.cjs +40 -0
  278. package/Tooltip/index.cjs.map +1 -0
  279. package/Tooltip/index.js +11 -13
  280. package/Tooltip/index.js.map +1 -1
  281. package/ViewBox/index.cjs +32 -0
  282. package/ViewBox/index.cjs.map +1 -0
  283. package/ViewBox/index.js +11 -13
  284. package/ViewBox/index.js.map +1 -1
  285. package/index.cjs +134 -0
  286. package/index.cjs.map +1 -0
  287. package/index.js +64 -133
  288. package/index.js.map +1 -1
  289. package/package.json +3 -3
  290. package/readme.md +4 -4
  291. package/useAlert/index.cjs +94 -0
  292. package/useAlert/index.cjs.map +1 -0
  293. package/useAlert/index.js +12 -14
  294. package/useAlert/index.js.map +1 -1
  295. package/useBlurCss/index.cjs +19 -0
  296. package/useBlurCss/index.cjs.map +1 -0
  297. package/useBlurCss/index.js +5 -7
  298. package/useBlurCss/index.js.map +1 -1
  299. package/useCorner/index.cjs +22 -0
  300. package/useCorner/index.cjs.map +1 -0
  301. package/useCorner/index.js +1 -3
  302. package/useCorner/index.js.map +1 -1
  303. package/useLayer/index.cjs +38 -0
  304. package/useLayer/index.cjs.map +1 -0
  305. package/useLayer/index.js +7 -9
  306. package/useLayer/index.js.map +1 -1
  307. package/useModal/index.cjs +37 -0
  308. package/useModal/index.cjs.map +1 -0
  309. package/useModal/index.js +8 -10
  310. package/useModal/index.js.map +1 -1
@@ -0,0 +1,120 @@
1
+ "use client";
2
+ 'use strict';
3
+
4
+ var tslib = require('tslib');
5
+ var jsxRuntime = require('react/jsx-runtime');
6
+ var client = require('react-dom/client');
7
+ var core = require('@xanui/core');
8
+ var React = require('react');
9
+ var index$1 = require('../Alert/index.cjs');
10
+ var index = require('../Scrollbar/index.cjs');
11
+
12
+ const formatPacement = (placement) => {
13
+ let sx = {};
14
+ let transition = "";
15
+ switch (placement) {
16
+ case "top-left":
17
+ sx = {
18
+ top: 0,
19
+ left: 0
20
+ };
21
+ transition = "fadeRight";
22
+ break;
23
+ case "top-right":
24
+ sx = {
25
+ top: 0,
26
+ right: 0
27
+ };
28
+ transition = "fadeLeft";
29
+ break;
30
+ case "top-center":
31
+ sx = {
32
+ top: 0,
33
+ left: "50%",
34
+ transform: "translateX(-50%)"
35
+ };
36
+ transition = "fadeDown";
37
+ break;
38
+ case "bottom-right":
39
+ sx = {
40
+ bottom: 0,
41
+ right: 0
42
+ };
43
+ transition = "fadeLeft";
44
+ break;
45
+ case "bottom-left":
46
+ sx = {
47
+ bottom: 0,
48
+ left: 0
49
+ };
50
+ transition = "fadeRight";
51
+ break;
52
+ case "bottom-center":
53
+ sx = {
54
+ bottom: 0,
55
+ left: "50%",
56
+ transform: "translateX(-50%)"
57
+ };
58
+ transition = "fadeUp";
59
+ break;
60
+ }
61
+ return { sx, transition };
62
+ };
63
+ const ToastView = (props) => {
64
+ const [open, setOpen] = React.useState(true);
65
+ const [timer, setTimer] = React.useState(null);
66
+ const _a = props || {}, { placement = "bottom-right", content, closeable, onClosed } = _a, rest = tslib.__rest(_a, ["placement", "content", "closeable", "onClosed"]);
67
+ const { transition } = formatPacement(placement);
68
+ return (jsxRuntime.jsx(core.Transition, { open: open, variant: transition, onClosed: () => {
69
+ onClosed();
70
+ }, onOpened: () => {
71
+ setTimer(setTimeout(() => {
72
+ setOpen(false);
73
+ }, 6000));
74
+ }, children: jsxRuntime.jsx(index$1, Object.assign({ shadow: 2, variant: "fill", color: "brand" }, rest, { mode: "item", mb: 1, onMouseEnter: () => {
75
+ clearTimeout(timer);
76
+ }, onMouseLeave: () => {
77
+ setTimer(setTimeout(() => {
78
+ setOpen(false);
79
+ }, 6000));
80
+ }, onClose: closeable ? () => {
81
+ setOpen(false);
82
+ } : undefined, children: content })) }));
83
+ };
84
+ const Toast = (props) => {
85
+ if (typeof props === "string") {
86
+ props = { content: props };
87
+ }
88
+ let _a = props || {}, { placement = "bottom-right", content, closeable } = _a, rest = tslib.__rest(_a, ["placement", "content", "closeable"]);
89
+ const { sx } = formatPacement(placement);
90
+ const wrapperContainerClassName = `xui-toast-container-${placement}`;
91
+ const wrapperClassName = `xui-toast-list-${placement}`;
92
+ let wrapperEle = document.querySelector(`.${wrapperContainerClassName}`);
93
+ if (!wrapperEle) {
94
+ wrapperEle = document.createElement('div');
95
+ wrapperEle.className = wrapperContainerClassName;
96
+ const appRoot = core.appRootElement();
97
+ appRoot.appendChild(wrapperEle);
98
+ const wrapperRoot = client.createRoot(wrapperEle);
99
+ wrapperRoot.render(jsxRuntime.jsx(index, { p: 1, overflow: "hidden", className: wrapperClassName, sx: Object.assign({ position: "fixed", zIndex: 99999999, display: "flex", justifyContent: "flex-end", flexDirection: "column", width: 320, height: "auto", maxHeight: "100vh" }, sx) }));
100
+ }
101
+ setTimeout(() => {
102
+ const wrapper = document.querySelector(`.${wrapperClassName}`);
103
+ const div = document.createElement('div');
104
+ wrapper.appendChild(div);
105
+ const root = client.createRoot(div);
106
+ root.render(jsxRuntime.jsx(ToastView, Object.assign({ placement: placement, content: content, closeable: closeable }, rest, { onClosed: () => {
107
+ root.unmount();
108
+ wrapper.removeChild(div);
109
+ if (wrapper.children.length === 0) {
110
+ const container = document.querySelector(`.${wrapperContainerClassName}`);
111
+ if (container) {
112
+ core.appRootElement().removeChild(container);
113
+ }
114
+ }
115
+ } })));
116
+ }, 5);
117
+ };
118
+
119
+ module.exports = Toast;
120
+ //# sourceMappingURL=index.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.cjs","sources":["../../src/Toast/index.tsx"],"sourcesContent":["'use client'\r\n\r\nimport { createRoot } from \"react-dom/client\";\r\nimport { appRootElement, UseColorTemplateColor, UseColorTemplateType, Transition, useBreakpointPropsType } from \"@xanui/core\";\r\nimport React, { ReactElement } from \"react\";\r\nimport Alert, { AlertProps } from \"../Alert\";\r\nimport Scrollbar from \"../Scrollbar\";\r\n\r\ntype PlacementType = \"top-left\" | \"top-center\" | \"top-right\" | \"bottom-left\" | \"bottom-center\" | \"bottom-right\"\r\n\r\nexport type UseToastProps = {\r\n title?: useBreakpointPropsType<string | ReactElement>;\r\n content?: AlertProps['children'];\r\n variant?: useBreakpointPropsType<UseColorTemplateType>;\r\n color?: useBreakpointPropsType<UseColorTemplateColor>;\r\n icon?: useBreakpointPropsType<\"info\" | \"warning\" | \"success\" | \"error\" | false | ReactElement>;\r\n placement?: PlacementType;\r\n closeable?: useBreakpointPropsType<boolean>;\r\n}\r\n\r\n\r\nconst formatPacement = (placement: PlacementType) => {\r\n let sx: any = {}\r\n let transition: any = \"\"\r\n switch (placement) {\r\n case \"top-left\":\r\n sx = {\r\n top: 0,\r\n left: 0\r\n }\r\n transition = \"fadeRight\"\r\n break;\r\n case \"top-right\":\r\n sx = {\r\n top: 0,\r\n right: 0\r\n }\r\n transition = \"fadeLeft\"\r\n break;\r\n case \"top-center\":\r\n sx = {\r\n top: 0,\r\n left: \"50%\",\r\n transform: \"translateX(-50%)\"\r\n }\r\n transition = \"fadeDown\"\r\n break;\r\n case \"bottom-right\":\r\n sx = {\r\n bottom: 0,\r\n right: 0\r\n }\r\n transition = \"fadeLeft\"\r\n break;\r\n case \"bottom-left\":\r\n sx = {\r\n bottom: 0,\r\n left: 0\r\n }\r\n transition = \"fadeRight\"\r\n break;\r\n case \"bottom-center\":\r\n sx = {\r\n bottom: 0,\r\n left: \"50%\",\r\n transform: \"translateX(-50%)\"\r\n }\r\n transition = \"fadeUp\"\r\n break;\r\n }\r\n return { sx, transition }\r\n}\r\n\r\nconst ToastView = (props: UseToastProps & { onClosed: () => void }) => {\r\n const [open, setOpen] = React.useState(true)\r\n const [timer, setTimer] = React.useState<any>(null)\r\n const { placement = \"bottom-right\", content, closeable, onClosed, ...rest } = props || {}\r\n const { transition } = formatPacement(placement)\r\n\r\n return (<Transition\r\n open={open}\r\n variant={transition}\r\n onClosed={() => {\r\n onClosed()\r\n }}\r\n onOpened={() => {\r\n setTimer(setTimeout(() => {\r\n setOpen(false)\r\n }, 6000))\r\n }}\r\n >\r\n <Alert\r\n shadow={2}\r\n variant=\"fill\"\r\n color=\"brand\"\r\n {...rest as any}\r\n mode=\"item\"\r\n mb={1}\r\n onMouseEnter={() => {\r\n clearTimeout(timer)\r\n }}\r\n onMouseLeave={() => {\r\n setTimer(setTimeout(() => {\r\n setOpen(false)\r\n }, 6000))\r\n }}\r\n onClose={closeable ? () => {\r\n setOpen(false)\r\n } : undefined}\r\n >{content}</Alert>\r\n </Transition>)\r\n}\r\n\r\nconst Toast = (props?: string | UseToastProps) => {\r\n if (typeof props === \"string\") {\r\n props = { content: props }\r\n }\r\n let { placement = \"bottom-right\", content, closeable, ...rest } = props || {}\r\n const { sx } = formatPacement(placement)\r\n\r\n const wrapperContainerClassName = `xui-toast-container-${placement}`\r\n const wrapperClassName = `xui-toast-list-${placement}`\r\n let wrapperEle = document.querySelector(`.${wrapperContainerClassName}`) as HTMLElement\r\n if (!wrapperEle) {\r\n wrapperEle = document.createElement('div')\r\n wrapperEle.className = wrapperContainerClassName\r\n const appRoot = appRootElement()\r\n appRoot.appendChild(wrapperEle)\r\n\r\n const wrapperRoot = createRoot(wrapperEle);\r\n wrapperRoot.render(<Scrollbar\r\n p={1}\r\n overflow=\"hidden\"\r\n className={wrapperClassName}\r\n sx={{\r\n position: \"fixed\",\r\n zIndex: 99999999,\r\n display: \"flex\",\r\n justifyContent: \"flex-end\",\r\n flexDirection: \"column\",\r\n width: 320,\r\n height: \"auto\",\r\n maxHeight: \"100vh\",\r\n ...sx\r\n }}\r\n >\r\n\r\n </Scrollbar>);\r\n }\r\n\r\n setTimeout(() => {\r\n const wrapper = document.querySelector(`.${wrapperClassName}`) as HTMLElement;\r\n const div = document.createElement('div');\r\n wrapper.appendChild(div);\r\n const root = createRoot(div);\r\n\r\n root.render(<ToastView\r\n placement={placement}\r\n content={content}\r\n closeable={closeable}\r\n {...rest}\r\n onClosed={() => {\r\n root.unmount();\r\n wrapper.removeChild(div);\r\n if (wrapper.children.length === 0) {\r\n const container = document.querySelector(`.${wrapperContainerClassName}`) as HTMLElement\r\n if (container) {\r\n appRootElement().removeChild(container);\r\n }\r\n }\r\n }}\r\n />);\r\n }, 5);\r\n\r\n}\r\n\r\nexport default Toast;"],"names":[],"mappings":";;;;;;;;;;;AAqBA;;;;AAIQ;AACI;AACI;AACA;;;;AAIR;AACI;AACI;AACA;;;;AAIR;AACI;AACI;AACA;AACA;;;;AAIR;AACI;AACI;AACA;;;;AAIR;AACI;AACI;AACA;;;;AAIR;AACI;AACI;AACA;AACA;;;;;AAKZ;AACJ;AAEA;AACI;AACA;;;AAIA;AAIQ;AACJ;AAEI;;AAEA;AACJ;;AAWI;AAEI;;AAEA;;;;AAOhB;AAEA;AACI;AACI;;AAEJ;;AAGA;AACA;;;AAGI;AACA;AACA;AACA;AAEA;;;;;;AAwBA;AACA;;;AASQ;;;;AAIQ;;;;;AAOxB;;"}
package/Toast/index.js CHANGED
@@ -1,13 +1,11 @@
1
1
  "use client";
2
- 'use strict';
3
-
4
- var tslib = require('tslib');
5
- var jsxRuntime = require('react/jsx-runtime');
6
- var client = require('react-dom/client');
7
- var core = require('@xanui/core');
8
- var React = require('react');
9
- var index$1 = require('../Alert/index.js');
10
- var index = require('../Scrollbar/index.js');
2
+ import { __rest } from 'tslib';
3
+ import { jsx } from 'react/jsx-runtime';
4
+ import { createRoot } from 'react-dom/client';
5
+ import { appRootElement, Transition } from '@xanui/core';
6
+ import React from 'react';
7
+ import Alert from '../Alert/index.js';
8
+ import Scrollbar from '../Scrollbar/index.js';
11
9
 
12
10
  const formatPacement = (placement) => {
13
11
  let sx = {};
@@ -63,15 +61,15 @@ const formatPacement = (placement) => {
63
61
  const ToastView = (props) => {
64
62
  const [open, setOpen] = React.useState(true);
65
63
  const [timer, setTimer] = React.useState(null);
66
- const _a = props || {}, { placement = "bottom-right", content, closeable, onClosed } = _a, rest = tslib.__rest(_a, ["placement", "content", "closeable", "onClosed"]);
64
+ const _a = props || {}, { placement = "bottom-right", content, closeable, onClosed } = _a, rest = __rest(_a, ["placement", "content", "closeable", "onClosed"]);
67
65
  const { transition } = formatPacement(placement);
68
- return (jsxRuntime.jsx(core.Transition, { open: open, variant: transition, onClosed: () => {
66
+ return (jsx(Transition, { open: open, variant: transition, onClosed: () => {
69
67
  onClosed();
70
68
  }, onOpened: () => {
71
69
  setTimer(setTimeout(() => {
72
70
  setOpen(false);
73
71
  }, 6000));
74
- }, children: jsxRuntime.jsx(index$1, Object.assign({ shadow: 2, variant: "fill", color: "brand" }, rest, { mode: "item", mb: 1, onMouseEnter: () => {
72
+ }, children: jsx(Alert, Object.assign({ shadow: 2, variant: "fill", color: "brand" }, rest, { mode: "item", mb: 1, onMouseEnter: () => {
75
73
  clearTimeout(timer);
76
74
  }, onMouseLeave: () => {
77
75
  setTimer(setTimeout(() => {
@@ -85,7 +83,7 @@ const Toast = (props) => {
85
83
  if (typeof props === "string") {
86
84
  props = { content: props };
87
85
  }
88
- let _a = props || {}, { placement = "bottom-right", content, closeable } = _a, rest = tslib.__rest(_a, ["placement", "content", "closeable"]);
86
+ let _a = props || {}, { placement = "bottom-right", content, closeable } = _a, rest = __rest(_a, ["placement", "content", "closeable"]);
89
87
  const { sx } = formatPacement(placement);
90
88
  const wrapperContainerClassName = `xui-toast-container-${placement}`;
91
89
  const wrapperClassName = `xui-toast-list-${placement}`;
@@ -93,28 +91,28 @@ const Toast = (props) => {
93
91
  if (!wrapperEle) {
94
92
  wrapperEle = document.createElement('div');
95
93
  wrapperEle.className = wrapperContainerClassName;
96
- const appRoot = core.appRootElement();
94
+ const appRoot = appRootElement();
97
95
  appRoot.appendChild(wrapperEle);
98
- const wrapperRoot = client.createRoot(wrapperEle);
99
- wrapperRoot.render(jsxRuntime.jsx(index, { p: 1, overflow: "hidden", className: wrapperClassName, sx: Object.assign({ position: "fixed", zIndex: 99999999, display: "flex", justifyContent: "flex-end", flexDirection: "column", width: 320, height: "auto", maxHeight: "100vh" }, sx) }));
96
+ const wrapperRoot = createRoot(wrapperEle);
97
+ wrapperRoot.render(jsx(Scrollbar, { p: 1, overflow: "hidden", className: wrapperClassName, sx: Object.assign({ position: "fixed", zIndex: 99999999, display: "flex", justifyContent: "flex-end", flexDirection: "column", width: 320, height: "auto", maxHeight: "100vh" }, sx) }));
100
98
  }
101
99
  setTimeout(() => {
102
100
  const wrapper = document.querySelector(`.${wrapperClassName}`);
103
101
  const div = document.createElement('div');
104
102
  wrapper.appendChild(div);
105
- const root = client.createRoot(div);
106
- root.render(jsxRuntime.jsx(ToastView, Object.assign({ placement: placement, content: content, closeable: closeable }, rest, { onClosed: () => {
103
+ const root = createRoot(div);
104
+ root.render(jsx(ToastView, Object.assign({ placement: placement, content: content, closeable: closeable }, rest, { onClosed: () => {
107
105
  root.unmount();
108
106
  wrapper.removeChild(div);
109
107
  if (wrapper.children.length === 0) {
110
108
  const container = document.querySelector(`.${wrapperContainerClassName}`);
111
109
  if (container) {
112
- core.appRootElement().removeChild(container);
110
+ appRootElement().removeChild(container);
113
111
  }
114
112
  }
115
113
  } })));
116
114
  }, 5);
117
115
  };
118
116
 
119
- module.exports = Toast;
117
+ export { Toast as default };
120
118
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../../src/Toast/index.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { createRoot } from \"react-dom/client\";\r\nimport { appRootElement, UseColorTemplateColor, UseColorTemplateType, Transition, useBreakpointPropsType } from \"@xanui/core\";\r\nimport React, { ReactElement } from \"react\";\r\nimport Alert, { AlertProps } from \"../Alert\";\r\nimport Scrollbar from \"../Scrollbar\";\r\n\r\ntype PlacementType = \"top-left\" | \"top-center\" | \"top-right\" | \"bottom-left\" | \"bottom-center\" | \"bottom-right\"\r\n\r\nexport type UseToastProps = {\r\n title?: useBreakpointPropsType<string | ReactElement>;\r\n content?: AlertProps['children'];\r\n variant?: useBreakpointPropsType<UseColorTemplateType>;\r\n color?: useBreakpointPropsType<UseColorTemplateColor>;\r\n icon?: useBreakpointPropsType<\"info\" | \"warning\" | \"success\" | \"error\" | false | ReactElement>;\r\n placement?: PlacementType;\r\n closeable?: useBreakpointPropsType<boolean>;\r\n}\r\n\r\n\r\nconst formatPacement = (placement: PlacementType) => {\r\n let sx: any = {}\r\n let transition: any = \"\"\r\n switch (placement) {\r\n case \"top-left\":\r\n sx = {\r\n top: 0,\r\n left: 0\r\n }\r\n transition = \"fadeRight\"\r\n break;\r\n case \"top-right\":\r\n sx = {\r\n top: 0,\r\n right: 0\r\n }\r\n transition = \"fadeLeft\"\r\n break;\r\n case \"top-center\":\r\n sx = {\r\n top: 0,\r\n left: \"50%\",\r\n transform: \"translateX(-50%)\"\r\n }\r\n transition = \"fadeDown\"\r\n break;\r\n case \"bottom-right\":\r\n sx = {\r\n bottom: 0,\r\n right: 0\r\n }\r\n transition = \"fadeLeft\"\r\n break;\r\n case \"bottom-left\":\r\n sx = {\r\n bottom: 0,\r\n left: 0\r\n }\r\n transition = \"fadeRight\"\r\n break;\r\n case \"bottom-center\":\r\n sx = {\r\n bottom: 0,\r\n left: \"50%\",\r\n transform: \"translateX(-50%)\"\r\n }\r\n transition = \"fadeUp\"\r\n break;\r\n }\r\n return { sx, transition }\r\n}\r\n\r\nconst ToastView = (props: UseToastProps & { onClosed: () => void }) => {\r\n const [open, setOpen] = React.useState(true)\r\n const [timer, setTimer] = React.useState<any>(null)\r\n const { placement = \"bottom-right\", content, closeable, onClosed, ...rest } = props || {}\r\n const { transition } = formatPacement(placement)\r\n\r\n return (<Transition\r\n open={open}\r\n variant={transition}\r\n onClosed={() => {\r\n onClosed()\r\n }}\r\n onOpened={() => {\r\n setTimer(setTimeout(() => {\r\n setOpen(false)\r\n }, 6000))\r\n }}\r\n >\r\n <Alert\r\n shadow={2}\r\n variant=\"fill\"\r\n color=\"brand\"\r\n {...rest as any}\r\n mode=\"item\"\r\n mb={1}\r\n onMouseEnter={() => {\r\n clearTimeout(timer)\r\n }}\r\n onMouseLeave={() => {\r\n setTimer(setTimeout(() => {\r\n setOpen(false)\r\n }, 6000))\r\n }}\r\n onClose={closeable ? () => {\r\n setOpen(false)\r\n } : undefined}\r\n >{content}</Alert>\r\n </Transition>)\r\n}\r\n\r\nconst Toast = (props?: string | UseToastProps) => {\r\n if (typeof props === \"string\") {\r\n props = { content: props }\r\n }\r\n let { placement = \"bottom-right\", content, closeable, ...rest } = props || {}\r\n const { sx } = formatPacement(placement)\r\n\r\n const wrapperContainerClassName = `xui-toast-container-${placement}`\r\n const wrapperClassName = `xui-toast-list-${placement}`\r\n let wrapperEle = document.querySelector(`.${wrapperContainerClassName}`) as HTMLElement\r\n if (!wrapperEle) {\r\n wrapperEle = document.createElement('div')\r\n wrapperEle.className = wrapperContainerClassName\r\n const appRoot = appRootElement()\r\n appRoot.appendChild(wrapperEle)\r\n\r\n const wrapperRoot = createRoot(wrapperEle);\r\n wrapperRoot.render(<Scrollbar\r\n p={1}\r\n overflow=\"hidden\"\r\n className={wrapperClassName}\r\n sx={{\r\n position: \"fixed\",\r\n zIndex: 99999999,\r\n display: \"flex\",\r\n justifyContent: \"flex-end\",\r\n flexDirection: \"column\",\r\n width: 320,\r\n height: \"auto\",\r\n maxHeight: \"100vh\",\r\n ...sx\r\n }}\r\n >\r\n\r\n </Scrollbar>);\r\n }\r\n\r\n setTimeout(() => {\r\n const wrapper = document.querySelector(`.${wrapperClassName}`) as HTMLElement;\r\n const div = document.createElement('div');\r\n wrapper.appendChild(div);\r\n const root = createRoot(div);\r\n\r\n root.render(<ToastView\r\n placement={placement}\r\n content={content}\r\n closeable={closeable}\r\n {...rest}\r\n onClosed={() => {\r\n root.unmount();\r\n wrapper.removeChild(div);\r\n if (wrapper.children.length === 0) {\r\n const container = document.querySelector(`.${wrapperContainerClassName}`) as HTMLElement\r\n if (container) {\r\n appRootElement().removeChild(container);\r\n }\r\n }\r\n }}\r\n />);\r\n }, 5);\r\n\r\n}\r\n\r\nexport default Toast;"],"names":[],"mappings":";;;;;;;;;;;AAqBA;;;;AAIQ;AACI;AACI;AACA;;;;AAIR;AACI;AACI;AACA;;;;AAIR;AACI;AACI;AACA;AACA;;;;AAIR;AACI;AACI;AACA;;;;AAIR;AACI;AACI;AACA;;;;AAIR;AACI;AACI;AACA;AACA;;;;;AAKZ;AACJ;AAEA;AACI;AACA;;;AAIA;AAIQ;AACJ;AAEI;;AAEA;AACJ;;AAWI;AAEI;;AAEA;;;;AAOhB;AAEA;AACI;AACI;;AAEJ;;AAGA;AACA;;;AAGI;AACA;AACA;AACA;AAEA;;;;;;AAwBA;AACA;;;AASQ;;;;AAIQ;;;;;AAOxB;;"}
1
+ {"version":3,"file":"index.js","sources":["../../src/Toast/index.tsx"],"sourcesContent":["'use client'\r\n\r\nimport { createRoot } from \"react-dom/client\";\r\nimport { appRootElement, UseColorTemplateColor, UseColorTemplateType, Transition, useBreakpointPropsType } from \"@xanui/core\";\r\nimport React, { ReactElement } from \"react\";\r\nimport Alert, { AlertProps } from \"../Alert\";\r\nimport Scrollbar from \"../Scrollbar\";\r\n\r\ntype PlacementType = \"top-left\" | \"top-center\" | \"top-right\" | \"bottom-left\" | \"bottom-center\" | \"bottom-right\"\r\n\r\nexport type UseToastProps = {\r\n title?: useBreakpointPropsType<string | ReactElement>;\r\n content?: AlertProps['children'];\r\n variant?: useBreakpointPropsType<UseColorTemplateType>;\r\n color?: useBreakpointPropsType<UseColorTemplateColor>;\r\n icon?: useBreakpointPropsType<\"info\" | \"warning\" | \"success\" | \"error\" | false | ReactElement>;\r\n placement?: PlacementType;\r\n closeable?: useBreakpointPropsType<boolean>;\r\n}\r\n\r\n\r\nconst formatPacement = (placement: PlacementType) => {\r\n let sx: any = {}\r\n let transition: any = \"\"\r\n switch (placement) {\r\n case \"top-left\":\r\n sx = {\r\n top: 0,\r\n left: 0\r\n }\r\n transition = \"fadeRight\"\r\n break;\r\n case \"top-right\":\r\n sx = {\r\n top: 0,\r\n right: 0\r\n }\r\n transition = \"fadeLeft\"\r\n break;\r\n case \"top-center\":\r\n sx = {\r\n top: 0,\r\n left: \"50%\",\r\n transform: \"translateX(-50%)\"\r\n }\r\n transition = \"fadeDown\"\r\n break;\r\n case \"bottom-right\":\r\n sx = {\r\n bottom: 0,\r\n right: 0\r\n }\r\n transition = \"fadeLeft\"\r\n break;\r\n case \"bottom-left\":\r\n sx = {\r\n bottom: 0,\r\n left: 0\r\n }\r\n transition = \"fadeRight\"\r\n break;\r\n case \"bottom-center\":\r\n sx = {\r\n bottom: 0,\r\n left: \"50%\",\r\n transform: \"translateX(-50%)\"\r\n }\r\n transition = \"fadeUp\"\r\n break;\r\n }\r\n return { sx, transition }\r\n}\r\n\r\nconst ToastView = (props: UseToastProps & { onClosed: () => void }) => {\r\n const [open, setOpen] = React.useState(true)\r\n const [timer, setTimer] = React.useState<any>(null)\r\n const { placement = \"bottom-right\", content, closeable, onClosed, ...rest } = props || {}\r\n const { transition } = formatPacement(placement)\r\n\r\n return (<Transition\r\n open={open}\r\n variant={transition}\r\n onClosed={() => {\r\n onClosed()\r\n }}\r\n onOpened={() => {\r\n setTimer(setTimeout(() => {\r\n setOpen(false)\r\n }, 6000))\r\n }}\r\n >\r\n <Alert\r\n shadow={2}\r\n variant=\"fill\"\r\n color=\"brand\"\r\n {...rest as any}\r\n mode=\"item\"\r\n mb={1}\r\n onMouseEnter={() => {\r\n clearTimeout(timer)\r\n }}\r\n onMouseLeave={() => {\r\n setTimer(setTimeout(() => {\r\n setOpen(false)\r\n }, 6000))\r\n }}\r\n onClose={closeable ? () => {\r\n setOpen(false)\r\n } : undefined}\r\n >{content}</Alert>\r\n </Transition>)\r\n}\r\n\r\nconst Toast = (props?: string | UseToastProps) => {\r\n if (typeof props === \"string\") {\r\n props = { content: props }\r\n }\r\n let { placement = \"bottom-right\", content, closeable, ...rest } = props || {}\r\n const { sx } = formatPacement(placement)\r\n\r\n const wrapperContainerClassName = `xui-toast-container-${placement}`\r\n const wrapperClassName = `xui-toast-list-${placement}`\r\n let wrapperEle = document.querySelector(`.${wrapperContainerClassName}`) as HTMLElement\r\n if (!wrapperEle) {\r\n wrapperEle = document.createElement('div')\r\n wrapperEle.className = wrapperContainerClassName\r\n const appRoot = appRootElement()\r\n appRoot.appendChild(wrapperEle)\r\n\r\n const wrapperRoot = createRoot(wrapperEle);\r\n wrapperRoot.render(<Scrollbar\r\n p={1}\r\n overflow=\"hidden\"\r\n className={wrapperClassName}\r\n sx={{\r\n position: \"fixed\",\r\n zIndex: 99999999,\r\n display: \"flex\",\r\n justifyContent: \"flex-end\",\r\n flexDirection: \"column\",\r\n width: 320,\r\n height: \"auto\",\r\n maxHeight: \"100vh\",\r\n ...sx\r\n }}\r\n >\r\n\r\n </Scrollbar>);\r\n }\r\n\r\n setTimeout(() => {\r\n const wrapper = document.querySelector(`.${wrapperClassName}`) as HTMLElement;\r\n const div = document.createElement('div');\r\n wrapper.appendChild(div);\r\n const root = createRoot(div);\r\n\r\n root.render(<ToastView\r\n placement={placement}\r\n content={content}\r\n closeable={closeable}\r\n {...rest}\r\n onClosed={() => {\r\n root.unmount();\r\n wrapper.removeChild(div);\r\n if (wrapper.children.length === 0) {\r\n const container = document.querySelector(`.${wrapperContainerClassName}`) as HTMLElement\r\n if (container) {\r\n appRootElement().removeChild(container);\r\n }\r\n }\r\n }}\r\n />);\r\n }, 5);\r\n\r\n}\r\n\r\nexport default Toast;"],"names":[],"mappings":";;;;;;;;;AAqBA;;;;AAIQ;AACI;AACI;AACA;;;;AAIR;AACI;AACI;AACA;;;;AAIR;AACI;AACI;AACA;AACA;;;;AAIR;AACI;AACI;AACA;;;;AAIR;AACI;AACI;AACA;;;;AAIR;AACI;AACI;AACA;AACA;;;;;AAKZ;AACJ;AAEA;AACI;AACA;;;AAIA;AAIQ;AACJ;AAEI;;AAEA;AACJ;;AAWI;AAEI;;AAEA;;;;AAOhB;AAEA;AACI;AACI;;AAEJ;;AAGA;AACA;;;AAGI;AACA;AACA;AACA;AAEA;;;;;;AAwBA;AACA;;;AASQ;;;;AAIQ;;;;;AAOxB;;"}
@@ -0,0 +1,40 @@
1
+ "use client";
2
+ 'use strict';
3
+
4
+ var jsxRuntime = require('react/jsx-runtime');
5
+ var React = require('react');
6
+ var index = require('../Menu/index.cjs');
7
+ var core = require('@xanui/core');
8
+
9
+ const Tooltip = ({ children, title, variant, color, placement }) => {
10
+ var _a, _b;
11
+ const [target, setTarget] = React.useState();
12
+ const _p = {};
13
+ if (title)
14
+ _p.title = title;
15
+ if (color)
16
+ _p.color = color;
17
+ if (variant)
18
+ _p.variant = variant;
19
+ const p = core.useBreakpointProps(_p);
20
+ title = p.title;
21
+ color = (_a = p.color) !== null && _a !== void 0 ? _a : "default";
22
+ variant = (_b = p.variant) !== null && _b !== void 0 ? _b : "fill";
23
+ placement !== null && placement !== void 0 ? placement : (placement = "bottom");
24
+ const template = core.useColorTemplate(color, variant);
25
+ if (!children || Array.isArray(children))
26
+ throw new Error("Invalid children in Toast");
27
+ const first = React.Children.toArray(children).shift();
28
+ const child = React.cloneElement(first, {
29
+ onMouseEnter: (e) => {
30
+ setTarget(e.target);
31
+ },
32
+ onMouseLeave: () => setTarget(null)
33
+ });
34
+ return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [child, jsxRuntime.jsx(index, { target: target, placement: placement, slotProps: {
35
+ content: Object.assign(Object.assign({ p: .5, shadow: 1 }, template.primary), { bgcolor: color == "default" ? "background.primary" : template.primary.bgcolor })
36
+ }, children: title })] }));
37
+ };
38
+
39
+ module.exports = Tooltip;
40
+ //# sourceMappingURL=index.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.cjs","sources":["../../src/Tooltip/index.tsx"],"sourcesContent":["'use client'\r\n\r\nimport { Children, cloneElement, ReactElement, useState } from 'react'\r\nimport Menu, { MenuProps } from '../Menu'\r\nimport { useBreakpointProps, useColorTemplate, UseColorTemplateColor, UseColorTemplateType, useBreakpointPropsType } from '@xanui/core'\r\n\r\n\r\nexport type TooltipProps = {\r\n children: ReactElement;\r\n title: useBreakpointPropsType<string>;\r\n color?: useBreakpointPropsType<UseColorTemplateColor>;\r\n variant?: useBreakpointPropsType<UseColorTemplateType>;\r\n placement?: MenuProps['placement']\r\n}\r\n\r\nconst Tooltip = ({ children, title, variant, color, placement }: TooltipProps) => {\r\n const [target, setTarget] = useState<any>()\r\n const _p: any = {}\r\n if (title) _p.title = title\r\n if (color) _p.color = color\r\n if (variant) _p.variant = variant\r\n const p: any = useBreakpointProps(_p)\r\n title = p.title\r\n color = p.color ?? \"default\"\r\n variant = p.variant ?? \"fill\"\r\n placement ??= \"bottom\"\r\n\r\n const template = useColorTemplate(color as any, variant as any)\r\n if (!children || Array.isArray(children)) throw new Error(\"Invalid children in Toast\")\r\n const first: any = Children.toArray(children).shift();\r\n const child = cloneElement(first, {\r\n onMouseEnter: (e) => {\r\n setTarget(e.target)\r\n },\r\n onMouseLeave: () => setTarget(null)\r\n })\r\n\r\n\r\n return (\r\n <>\r\n {child}\r\n <Menu\r\n target={target}\r\n placement={placement}\r\n slotProps={{\r\n content: {\r\n p: .5,\r\n shadow: 1,\r\n ...template.primary,\r\n bgcolor: color == \"default\" ? \"background.primary\" : template.primary.bgcolor,\r\n }\r\n }}\r\n >\r\n {title as any}\r\n </Menu>\r\n </>\r\n )\r\n}\r\n\r\nexport default Tooltip"],"names":[],"mappings":";;;;;;;;AAeA;;;;AAGI;AAAW;AACX;AAAW;AACX;AAAa;AACb;AACA;AACA;AACA;;;;AAI0C;;AAE1C;AACI;AACI;;AAEJ;AACH;AAGD;AAOgB;AAMH;AAMjB;;"}
package/Tooltip/index.js CHANGED
@@ -1,14 +1,12 @@
1
1
  "use client";
2
- 'use strict';
3
-
4
- var jsxRuntime = require('react/jsx-runtime');
5
- var React = require('react');
6
- var index = require('../Menu/index.js');
7
- var core = require('@xanui/core');
2
+ import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
3
+ import { useState, Children, cloneElement } from 'react';
4
+ import Menu from '../Menu/index.js';
5
+ import { useBreakpointProps, useColorTemplate } from '@xanui/core';
8
6
 
9
7
  const Tooltip = ({ children, title, variant, color, placement }) => {
10
8
  var _a, _b;
11
- const [target, setTarget] = React.useState();
9
+ const [target, setTarget] = useState();
12
10
  const _p = {};
13
11
  if (title)
14
12
  _p.title = title;
@@ -16,25 +14,25 @@ const Tooltip = ({ children, title, variant, color, placement }) => {
16
14
  _p.color = color;
17
15
  if (variant)
18
16
  _p.variant = variant;
19
- const p = core.useBreakpointProps(_p);
17
+ const p = useBreakpointProps(_p);
20
18
  title = p.title;
21
19
  color = (_a = p.color) !== null && _a !== void 0 ? _a : "default";
22
20
  variant = (_b = p.variant) !== null && _b !== void 0 ? _b : "fill";
23
21
  placement !== null && placement !== void 0 ? placement : (placement = "bottom");
24
- const template = core.useColorTemplate(color, variant);
22
+ const template = useColorTemplate(color, variant);
25
23
  if (!children || Array.isArray(children))
26
24
  throw new Error("Invalid children in Toast");
27
- const first = React.Children.toArray(children).shift();
28
- const child = React.cloneElement(first, {
25
+ const first = Children.toArray(children).shift();
26
+ const child = cloneElement(first, {
29
27
  onMouseEnter: (e) => {
30
28
  setTarget(e.target);
31
29
  },
32
30
  onMouseLeave: () => setTarget(null)
33
31
  });
34
- return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [child, jsxRuntime.jsx(index, { target: target, placement: placement, slotProps: {
32
+ return (jsxs(Fragment, { children: [child, jsx(Menu, { target: target, placement: placement, slotProps: {
35
33
  content: Object.assign(Object.assign({ p: .5, shadow: 1 }, template.primary), { bgcolor: color == "default" ? "background.primary" : template.primary.bgcolor })
36
34
  }, children: title })] }));
37
35
  };
38
36
 
39
- module.exports = Tooltip;
37
+ export { Tooltip as default };
40
38
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../../src/Tooltip/index.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { Children, cloneElement, ReactElement, useState } from 'react'\r\nimport Menu, { MenuProps } from '../Menu'\r\nimport { useBreakpointProps, useColorTemplate, UseColorTemplateColor, UseColorTemplateType, useBreakpointPropsType } from '@xanui/core'\r\n\r\n\r\nexport type TooltipProps = {\r\n children: ReactElement;\r\n title: useBreakpointPropsType<string>;\r\n color?: useBreakpointPropsType<UseColorTemplateColor>;\r\n variant?: useBreakpointPropsType<UseColorTemplateType>;\r\n placement?: MenuProps['placement']\r\n}\r\n\r\nconst Tooltip = ({ children, title, variant, color, placement }: TooltipProps) => {\r\n const [target, setTarget] = useState<any>()\r\n const _p: any = {}\r\n if (title) _p.title = title\r\n if (color) _p.color = color\r\n if (variant) _p.variant = variant\r\n const p: any = useBreakpointProps(_p)\r\n title = p.title\r\n color = p.color ?? \"default\"\r\n variant = p.variant ?? \"fill\"\r\n placement ??= \"bottom\"\r\n\r\n const template = useColorTemplate(color as any, variant as any)\r\n if (!children || Array.isArray(children)) throw new Error(\"Invalid children in Toast\")\r\n const first: any = Children.toArray(children).shift();\r\n const child = cloneElement(first, {\r\n onMouseEnter: (e) => {\r\n setTarget(e.target)\r\n },\r\n onMouseLeave: () => setTarget(null)\r\n })\r\n\r\n\r\n return (\r\n <>\r\n {child}\r\n <Menu\r\n target={target}\r\n placement={placement}\r\n slotProps={{\r\n content: {\r\n p: .5,\r\n shadow: 1,\r\n ...template.primary,\r\n bgcolor: color == \"default\" ? \"background.primary\" : template.primary.bgcolor,\r\n }\r\n }}\r\n >\r\n {title as any}\r\n </Menu>\r\n </>\r\n )\r\n}\r\n\r\nexport default Tooltip"],"names":[],"mappings":";;;;;;;;AAeA;;;;AAGI;AAAW;AACX;AAAW;AACX;AAAa;AACb;AACA;AACA;AACA;;;;AAI0C;;AAE1C;AACI;AACI;;AAEJ;AACH;AAGD;AAOgB;AAMH;AAMjB;;"}
1
+ {"version":3,"file":"index.js","sources":["../../src/Tooltip/index.tsx"],"sourcesContent":["'use client'\r\n\r\nimport { Children, cloneElement, ReactElement, useState } from 'react'\r\nimport Menu, { MenuProps } from '../Menu'\r\nimport { useBreakpointProps, useColorTemplate, UseColorTemplateColor, UseColorTemplateType, useBreakpointPropsType } from '@xanui/core'\r\n\r\n\r\nexport type TooltipProps = {\r\n children: ReactElement;\r\n title: useBreakpointPropsType<string>;\r\n color?: useBreakpointPropsType<UseColorTemplateColor>;\r\n variant?: useBreakpointPropsType<UseColorTemplateType>;\r\n placement?: MenuProps['placement']\r\n}\r\n\r\nconst Tooltip = ({ children, title, variant, color, placement }: TooltipProps) => {\r\n const [target, setTarget] = useState<any>()\r\n const _p: any = {}\r\n if (title) _p.title = title\r\n if (color) _p.color = color\r\n if (variant) _p.variant = variant\r\n const p: any = useBreakpointProps(_p)\r\n title = p.title\r\n color = p.color ?? \"default\"\r\n variant = p.variant ?? \"fill\"\r\n placement ??= \"bottom\"\r\n\r\n const template = useColorTemplate(color as any, variant as any)\r\n if (!children || Array.isArray(children)) throw new Error(\"Invalid children in Toast\")\r\n const first: any = Children.toArray(children).shift();\r\n const child = cloneElement(first, {\r\n onMouseEnter: (e) => {\r\n setTarget(e.target)\r\n },\r\n onMouseLeave: () => setTarget(null)\r\n })\r\n\r\n\r\n return (\r\n <>\r\n {child}\r\n <Menu\r\n target={target}\r\n placement={placement}\r\n slotProps={{\r\n content: {\r\n p: .5,\r\n shadow: 1,\r\n ...template.primary,\r\n bgcolor: color == \"default\" ? \"background.primary\" : template.primary.bgcolor,\r\n }\r\n }}\r\n >\r\n {title as any}\r\n </Menu>\r\n </>\r\n )\r\n}\r\n\r\nexport default Tooltip"],"names":[],"mappings":";;;;;;AAeA;;;;AAGI;AAAW;AACX;AAAW;AACX;AAAa;AACb;AACA;AACA;AACA;;;;AAI0C;;AAE1C;AACI;AACI;;AAEJ;AACH;AAGD;AAOgB;AAMH;AAMjB;;"}
@@ -0,0 +1,32 @@
1
+ 'use strict';
2
+
3
+ var tslib = require('tslib');
4
+ var jsxRuntime = require('react/jsx-runtime');
5
+ var React = require('react');
6
+ var index = require('../Scrollbar/index.cjs');
7
+ var core = require('@xanui/core');
8
+
9
+ const ViewBox = React.forwardRef((_a, ref) => {
10
+ var _b;
11
+ var { children } = _a, rest = tslib.__rest(_a, ["children"]);
12
+ let [_c] = core.useInterface("ViewBox", rest, {}), { startContent, endContent, slotProps, horizental } = _c, props = tslib.__rest(_c, ["startContent", "endContent", "slotProps", "horizental"]);
13
+ const _p = {};
14
+ if (startContent)
15
+ _p.startContent = startContent;
16
+ if (endContent)
17
+ _p.endContent = endContent;
18
+ if (horizental)
19
+ _p.horizental = horizental;
20
+ const p = core.useBreakpointProps(_p);
21
+ startContent = p.startContent;
22
+ endContent = p.endContent;
23
+ horizental = p.horizental;
24
+ return (jsxRuntime.jsxs(core.Tag, Object.assign({}, props, { sxr: {
25
+ display: "flex",
26
+ justifyContent: "space-between",
27
+ flexDirection: horizental ? "row" : "column"
28
+ }, baseClass: 'viewbox', ref: ref, children: [startContent && jsxRuntime.jsx(core.Tag, { baseClass: 'viewbox-start-content', flexBox: true, flexDirection: horizental ? "row" : "column", children: startContent }), jsxRuntime.jsx(index, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.scrollbar, { className: 'viewbox-content', style: Object.assign({ flex: 1, display: "flex", flexDirection: horizental ? "row" : "column" }, (((_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.scrollbar) === null || _b === void 0 ? void 0 : _b.style) || {})), children: children })), endContent && jsxRuntime.jsx(core.Tag, { baseClass: 'viewbox-end-content', flexBox: true, flexDirection: horizental ? "row" : "column", children: endContent })] })));
29
+ });
30
+
31
+ module.exports = ViewBox;
32
+ //# sourceMappingURL=index.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.cjs","sources":["../../src/ViewBox/index.tsx"],"sourcesContent":["\r\nimport React, { ReactElement } from 'react'\r\nimport Scrollbar, { ScrollbarProps } from '../Scrollbar'\r\nimport { Tag, TagProps, TagComponentType, useInterface, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\r\n\r\n\r\nexport type ViewBoxProps<T extends TagComponentType = \"div\"> = TagProps<T> & {\r\n startContent?: useBreakpointPropsType<ReactElement>;\r\n endContent?: useBreakpointPropsType<ReactElement>;\r\n horizental?: useBreakpointPropsType<boolean>;\r\n slotProps?: {\r\n scrollbar?: Omit<ScrollbarProps, 'children'>;\r\n }\r\n}\r\n\r\n\r\nconst ViewBox = React.forwardRef(({ children, ...rest }: ViewBoxProps, ref?: any) => {\r\n let [{ startContent, endContent, slotProps, horizental, ...props }] = useInterface<any>(\"ViewBox\", rest, {})\r\n const _p: any = {}\r\n if (startContent) _p.startContent = startContent\r\n if (endContent) _p.endContent = endContent\r\n if (horizental) _p.horizental = horizental\r\n const p: any = useBreakpointProps(_p)\r\n startContent = p.startContent\r\n endContent = p.endContent\r\n horizental = p.horizental\r\n\r\n return (\r\n <Tag\r\n {...props}\r\n sxr={{\r\n display: \"flex\",\r\n justifyContent: \"space-between\",\r\n flexDirection: horizental ? \"row\" : \"column\"\r\n }}\r\n baseClass='viewbox'\r\n ref={ref}\r\n >\r\n {startContent && <Tag baseClass='viewbox-start-content' flexBox flexDirection={horizental ? \"row\" : \"column\"}>{startContent}</Tag>}\r\n <Scrollbar\r\n {...slotProps?.scrollbar}\r\n className='viewbox-content'\r\n style={{\r\n flex: 1,\r\n display: \"flex\",\r\n flexDirection: horizental ? \"row\" : \"column\",\r\n ...(slotProps?.scrollbar?.style || {})\r\n }}\r\n >\r\n {children}\r\n </Scrollbar>\r\n {endContent && <Tag baseClass='viewbox-end-content' flexBox flexDirection={horizental ? \"row\" : \"column\"}>{endContent}</Tag>}\r\n </Tag>\r\n )\r\n})\r\n\r\nexport default ViewBox\r\n"],"names":["__rest","useInterface","useBreakpointProps","_jsxs","Tag","_jsx","Scrollbar"],"mappings":";;;;;;;;AAgBA,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAAC,CAAC,EAAmC,EAAE,GAAS,KAAI;;AAAlD,IAAA,IAAA,EAAE,QAAQ,EAAA,GAAA,EAAyB,EAApB,IAAI,GAAAA,YAAA,CAAA,EAAA,EAAnB,YAAqB,CAAF;IACjD,IAAI,CAAA,EAAA,CAAA,GAAkEC,iBAAY,CAAM,SAAS,EAAE,IAAI,EAAE,EAAE,CAAC,EAAvG,EAAE,YAAY,EAAE,UAAU,EAAE,SAAS,EAAE,UAAU,EAAA,GAAA,EAAY,EAAP,KAAK,GAAAD,YAAA,CAAA,EAAA,EAA3D,CAAA,cAAA,EAAA,YAAA,EAAA,WAAA,EAAA,YAAA,CAA6D,CAA0C;IAC5G,MAAM,EAAE,GAAQ,EAAE;AAClB,IAAA,IAAI,YAAY;AAAE,QAAA,EAAE,CAAC,YAAY,GAAG,YAAY;AAChD,IAAA,IAAI,UAAU;AAAE,QAAA,EAAE,CAAC,UAAU,GAAG,UAAU;AAC1C,IAAA,IAAI,UAAU;AAAE,QAAA,EAAE,CAAC,UAAU,GAAG,UAAU;AAC1C,IAAA,MAAM,CAAC,GAAQE,uBAAkB,CAAC,EAAE,CAAC;AACrC,IAAA,YAAY,GAAG,CAAC,CAAC,YAAY;AAC7B,IAAA,UAAU,GAAG,CAAC,CAAC,UAAU;AACzB,IAAA,UAAU,GAAG,CAAC,CAAC,UAAU;AAEzB,IAAA,QACIC,eAAA,CAACC,QAAG,oBACI,KAAK,EAAA,EACT,GAAG,EAAE;AACD,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,cAAc,EAAE,eAAe;YAC/B,aAAa,EAAE,UAAU,GAAG,KAAK,GAAG;SACvC,EACD,SAAS,EAAC,SAAS,EACnB,GAAG,EAAE,GAAG,EAAA,QAAA,EAAA,CAEP,YAAY,IAAIC,cAAA,CAACD,QAAG,EAAA,EAAC,SAAS,EAAC,uBAAuB,EAAC,OAAO,EAAA,IAAA,EAAC,aAAa,EAAE,UAAU,GAAG,KAAK,GAAG,QAAQ,EAAA,QAAA,EAAG,YAAY,EAAA,CAAO,EAClIC,cAAA,CAACC,KAAS,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACF,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,MAAA,GAAA,MAAA,GAAT,SAAS,CAAE,SAAS,EAAA,EACxB,SAAS,EAAC,iBAAiB,EAC3B,KAAK,EAAA,MAAA,CAAA,MAAA,CAAA,EACD,IAAI,EAAE,CAAC,EACP,OAAO,EAAE,MAAM,EACf,aAAa,EAAE,UAAU,GAAG,KAAK,GAAG,QAAQ,EAAA,GACxC,CAAA,MAAA,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,MAAA,GAAA,MAAA,GAAT,SAAS,CAAE,SAAS,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,KAAK,KAAI,EAAE,EAAC,EAAA,QAAA,EAGzC,QAAQ,IACD,EACX,UAAU,IAAID,cAAA,CAACD,QAAG,EAAA,EAAC,SAAS,EAAC,qBAAqB,EAAC,OAAO,EAAA,IAAA,EAAC,aAAa,EAAE,UAAU,GAAG,KAAK,GAAG,QAAQ,EAAA,QAAA,EAAG,UAAU,EAAA,CAAO,CAAA,EAAA,CAAA,CAC1H;AAEd,CAAC;;;;"}
package/ViewBox/index.js CHANGED
@@ -1,15 +1,13 @@
1
- 'use strict';
2
-
3
- var tslib = require('tslib');
4
- var jsxRuntime = require('react/jsx-runtime');
5
- var React = require('react');
6
- var index = require('../Scrollbar/index.js');
7
- var core = require('@xanui/core');
1
+ import { __rest } from 'tslib';
2
+ import { jsxs, jsx } from 'react/jsx-runtime';
3
+ import React from 'react';
4
+ import Scrollbar from '../Scrollbar/index.js';
5
+ import { useInterface, useBreakpointProps, Tag } from '@xanui/core';
8
6
 
9
7
  const ViewBox = React.forwardRef((_a, ref) => {
10
8
  var _b;
11
- var { children } = _a, rest = tslib.__rest(_a, ["children"]);
12
- let [_c] = core.useInterface("ViewBox", rest, {}), { startContent, endContent, slotProps, horizental } = _c, props = tslib.__rest(_c, ["startContent", "endContent", "slotProps", "horizental"]);
9
+ var { children } = _a, rest = __rest(_a, ["children"]);
10
+ let [_c] = useInterface("ViewBox", rest, {}), { startContent, endContent, slotProps, horizental } = _c, props = __rest(_c, ["startContent", "endContent", "slotProps", "horizental"]);
13
11
  const _p = {};
14
12
  if (startContent)
15
13
  _p.startContent = startContent;
@@ -17,16 +15,16 @@ const ViewBox = React.forwardRef((_a, ref) => {
17
15
  _p.endContent = endContent;
18
16
  if (horizental)
19
17
  _p.horizental = horizental;
20
- const p = core.useBreakpointProps(_p);
18
+ const p = useBreakpointProps(_p);
21
19
  startContent = p.startContent;
22
20
  endContent = p.endContent;
23
21
  horizental = p.horizental;
24
- return (jsxRuntime.jsxs(core.Tag, Object.assign({}, props, { sxr: {
22
+ return (jsxs(Tag, Object.assign({}, props, { sxr: {
25
23
  display: "flex",
26
24
  justifyContent: "space-between",
27
25
  flexDirection: horizental ? "row" : "column"
28
- }, baseClass: 'viewbox', ref: ref, children: [startContent && jsxRuntime.jsx(core.Tag, { baseClass: 'viewbox-start-content', flexBox: true, flexDirection: horizental ? "row" : "column", children: startContent }), jsxRuntime.jsx(index, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.scrollbar, { className: 'viewbox-content', style: Object.assign({ flex: 1, display: "flex", flexDirection: horizental ? "row" : "column" }, (((_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.scrollbar) === null || _b === void 0 ? void 0 : _b.style) || {})), children: children })), endContent && jsxRuntime.jsx(core.Tag, { baseClass: 'viewbox-end-content', flexBox: true, flexDirection: horizental ? "row" : "column", children: endContent })] })));
26
+ }, baseClass: 'viewbox', ref: ref, children: [startContent && jsx(Tag, { baseClass: 'viewbox-start-content', flexBox: true, flexDirection: horizental ? "row" : "column", children: startContent }), jsx(Scrollbar, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.scrollbar, { className: 'viewbox-content', style: Object.assign({ flex: 1, display: "flex", flexDirection: horizental ? "row" : "column" }, (((_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.scrollbar) === null || _b === void 0 ? void 0 : _b.style) || {})), children: children })), endContent && jsx(Tag, { baseClass: 'viewbox-end-content', flexBox: true, flexDirection: horizental ? "row" : "column", children: endContent })] })));
29
27
  });
30
28
 
31
- module.exports = ViewBox;
29
+ export { ViewBox as default };
32
30
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../../src/ViewBox/index.tsx"],"sourcesContent":["\r\nimport React, { ReactElement } from 'react'\r\nimport Scrollbar, { ScrollbarProps } from '../Scrollbar'\r\nimport { Tag, TagProps, TagComponentType, useInterface, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\r\n\r\n\r\nexport type ViewBoxProps<T extends TagComponentType = \"div\"> = TagProps<T> & {\r\n startContent?: useBreakpointPropsType<ReactElement>;\r\n endContent?: useBreakpointPropsType<ReactElement>;\r\n horizental?: useBreakpointPropsType<boolean>;\r\n slotProps?: {\r\n scrollbar?: Omit<ScrollbarProps, 'children'>;\r\n }\r\n}\r\n\r\n\r\nconst ViewBox = React.forwardRef(({ children, ...rest }: ViewBoxProps, ref?: any) => {\r\n let [{ startContent, endContent, slotProps, horizental, ...props }] = useInterface<any>(\"ViewBox\", rest, {})\r\n const _p: any = {}\r\n if (startContent) _p.startContent = startContent\r\n if (endContent) _p.endContent = endContent\r\n if (horizental) _p.horizental = horizental\r\n const p: any = useBreakpointProps(_p)\r\n startContent = p.startContent\r\n endContent = p.endContent\r\n horizental = p.horizental\r\n\r\n return (\r\n <Tag\r\n {...props}\r\n sxr={{\r\n display: \"flex\",\r\n justifyContent: \"space-between\",\r\n flexDirection: horizental ? \"row\" : \"column\"\r\n }}\r\n baseClass='viewbox'\r\n ref={ref}\r\n >\r\n {startContent && <Tag baseClass='viewbox-start-content' flexBox flexDirection={horizental ? \"row\" : \"column\"}>{startContent}</Tag>}\r\n <Scrollbar\r\n {...slotProps?.scrollbar}\r\n className='viewbox-content'\r\n style={{\r\n flex: 1,\r\n display: \"flex\",\r\n flexDirection: horizental ? \"row\" : \"column\",\r\n ...(slotProps?.scrollbar?.style || {})\r\n }}\r\n >\r\n {children}\r\n </Scrollbar>\r\n {endContent && <Tag baseClass='viewbox-end-content' flexBox flexDirection={horizental ? \"row\" : \"column\"}>{endContent}</Tag>}\r\n </Tag>\r\n )\r\n})\r\n\r\nexport default ViewBox\r\n"],"names":["__rest","useInterface","useBreakpointProps","_jsxs","Tag","_jsx","Scrollbar"],"mappings":";;;;;;;;AAgBA,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAAC,CAAC,EAAmC,EAAE,GAAS,KAAI;;AAAlD,IAAA,IAAA,EAAE,QAAQ,EAAA,GAAA,EAAyB,EAApB,IAAI,GAAAA,YAAA,CAAA,EAAA,EAAnB,YAAqB,CAAF;IACjD,IAAI,CAAA,EAAA,CAAA,GAAkEC,iBAAY,CAAM,SAAS,EAAE,IAAI,EAAE,EAAE,CAAC,EAAvG,EAAE,YAAY,EAAE,UAAU,EAAE,SAAS,EAAE,UAAU,EAAA,GAAA,EAAY,EAAP,KAAK,GAAAD,YAAA,CAAA,EAAA,EAA3D,CAAA,cAAA,EAAA,YAAA,EAAA,WAAA,EAAA,YAAA,CAA6D,CAA0C;IAC5G,MAAM,EAAE,GAAQ,EAAE;AAClB,IAAA,IAAI,YAAY;AAAE,QAAA,EAAE,CAAC,YAAY,GAAG,YAAY;AAChD,IAAA,IAAI,UAAU;AAAE,QAAA,EAAE,CAAC,UAAU,GAAG,UAAU;AAC1C,IAAA,IAAI,UAAU;AAAE,QAAA,EAAE,CAAC,UAAU,GAAG,UAAU;AAC1C,IAAA,MAAM,CAAC,GAAQE,uBAAkB,CAAC,EAAE,CAAC;AACrC,IAAA,YAAY,GAAG,CAAC,CAAC,YAAY;AAC7B,IAAA,UAAU,GAAG,CAAC,CAAC,UAAU;AACzB,IAAA,UAAU,GAAG,CAAC,CAAC,UAAU;AAEzB,IAAA,QACIC,eAAA,CAACC,QAAG,oBACI,KAAK,EAAA,EACT,GAAG,EAAE;AACD,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,cAAc,EAAE,eAAe;YAC/B,aAAa,EAAE,UAAU,GAAG,KAAK,GAAG;SACvC,EACD,SAAS,EAAC,SAAS,EACnB,GAAG,EAAE,GAAG,EAAA,QAAA,EAAA,CAEP,YAAY,IAAIC,cAAA,CAACD,QAAG,EAAA,EAAC,SAAS,EAAC,uBAAuB,EAAC,OAAO,EAAA,IAAA,EAAC,aAAa,EAAE,UAAU,GAAG,KAAK,GAAG,QAAQ,EAAA,QAAA,EAAG,YAAY,EAAA,CAAO,EAClIC,cAAA,CAACC,KAAS,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACF,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,MAAA,GAAA,MAAA,GAAT,SAAS,CAAE,SAAS,EAAA,EACxB,SAAS,EAAC,iBAAiB,EAC3B,KAAK,EAAA,MAAA,CAAA,MAAA,CAAA,EACD,IAAI,EAAE,CAAC,EACP,OAAO,EAAE,MAAM,EACf,aAAa,EAAE,UAAU,GAAG,KAAK,GAAG,QAAQ,EAAA,GACxC,CAAA,MAAA,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,MAAA,GAAA,MAAA,GAAT,SAAS,CAAE,SAAS,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,KAAK,KAAI,EAAE,EAAC,EAAA,QAAA,EAGzC,QAAQ,IACD,EACX,UAAU,IAAID,cAAA,CAACD,QAAG,EAAA,EAAC,SAAS,EAAC,qBAAqB,EAAC,OAAO,EAAA,IAAA,EAAC,aAAa,EAAE,UAAU,GAAG,KAAK,GAAG,QAAQ,EAAA,QAAA,EAAG,UAAU,EAAA,CAAO,CAAA,EAAA,CAAA,CAC1H;AAEd,CAAC;;;;"}
1
+ {"version":3,"file":"index.js","sources":["../../src/ViewBox/index.tsx"],"sourcesContent":["\r\nimport React, { ReactElement } from 'react'\r\nimport Scrollbar, { ScrollbarProps } from '../Scrollbar'\r\nimport { Tag, TagProps, TagComponentType, useInterface, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\r\n\r\n\r\nexport type ViewBoxProps<T extends TagComponentType = \"div\"> = TagProps<T> & {\r\n startContent?: useBreakpointPropsType<ReactElement>;\r\n endContent?: useBreakpointPropsType<ReactElement>;\r\n horizental?: useBreakpointPropsType<boolean>;\r\n slotProps?: {\r\n scrollbar?: Omit<ScrollbarProps, 'children'>;\r\n }\r\n}\r\n\r\n\r\nconst ViewBox = React.forwardRef(({ children, ...rest }: ViewBoxProps, ref?: any) => {\r\n let [{ startContent, endContent, slotProps, horizental, ...props }] = useInterface<any>(\"ViewBox\", rest, {})\r\n const _p: any = {}\r\n if (startContent) _p.startContent = startContent\r\n if (endContent) _p.endContent = endContent\r\n if (horizental) _p.horizental = horizental\r\n const p: any = useBreakpointProps(_p)\r\n startContent = p.startContent\r\n endContent = p.endContent\r\n horizental = p.horizental\r\n\r\n return (\r\n <Tag\r\n {...props}\r\n sxr={{\r\n display: \"flex\",\r\n justifyContent: \"space-between\",\r\n flexDirection: horizental ? \"row\" : \"column\"\r\n }}\r\n baseClass='viewbox'\r\n ref={ref}\r\n >\r\n {startContent && <Tag baseClass='viewbox-start-content' flexBox flexDirection={horizental ? \"row\" : \"column\"}>{startContent}</Tag>}\r\n <Scrollbar\r\n {...slotProps?.scrollbar}\r\n className='viewbox-content'\r\n style={{\r\n flex: 1,\r\n display: \"flex\",\r\n flexDirection: horizental ? \"row\" : \"column\",\r\n ...(slotProps?.scrollbar?.style || {})\r\n }}\r\n >\r\n {children}\r\n </Scrollbar>\r\n {endContent && <Tag baseClass='viewbox-end-content' flexBox flexDirection={horizental ? \"row\" : \"column\"}>{endContent}</Tag>}\r\n </Tag>\r\n )\r\n})\r\n\r\nexport default ViewBox\r\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;AAgBA,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAAC,CAAC,EAAmC,EAAE,GAAS,KAAI;;AAAlD,IAAA,IAAA,EAAE,QAAQ,EAAA,GAAA,EAAyB,EAApB,IAAI,GAAA,MAAA,CAAA,EAAA,EAAnB,YAAqB,CAAF;IACjD,IAAI,CAAA,EAAA,CAAA,GAAkE,YAAY,CAAM,SAAS,EAAE,IAAI,EAAE,EAAE,CAAC,EAAvG,EAAE,YAAY,EAAE,UAAU,EAAE,SAAS,EAAE,UAAU,EAAA,GAAA,EAAY,EAAP,KAAK,GAAA,MAAA,CAAA,EAAA,EAA3D,CAAA,cAAA,EAAA,YAAA,EAAA,WAAA,EAAA,YAAA,CAA6D,CAA0C;IAC5G,MAAM,EAAE,GAAQ,EAAE;AAClB,IAAA,IAAI,YAAY;AAAE,QAAA,EAAE,CAAC,YAAY,GAAG,YAAY;AAChD,IAAA,IAAI,UAAU;AAAE,QAAA,EAAE,CAAC,UAAU,GAAG,UAAU;AAC1C,IAAA,IAAI,UAAU;AAAE,QAAA,EAAE,CAAC,UAAU,GAAG,UAAU;AAC1C,IAAA,MAAM,CAAC,GAAQ,kBAAkB,CAAC,EAAE,CAAC;AACrC,IAAA,YAAY,GAAG,CAAC,CAAC,YAAY;AAC7B,IAAA,UAAU,GAAG,CAAC,CAAC,UAAU;AACzB,IAAA,UAAU,GAAG,CAAC,CAAC,UAAU;AAEzB,IAAA,QACIA,IAAA,CAAC,GAAG,oBACI,KAAK,EAAA,EACT,GAAG,EAAE;AACD,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,cAAc,EAAE,eAAe;YAC/B,aAAa,EAAE,UAAU,GAAG,KAAK,GAAG;SACvC,EACD,SAAS,EAAC,SAAS,EACnB,GAAG,EAAE,GAAG,EAAA,QAAA,EAAA,CAEP,YAAY,IAAIC,GAAA,CAAC,GAAG,EAAA,EAAC,SAAS,EAAC,uBAAuB,EAAC,OAAO,EAAA,IAAA,EAAC,aAAa,EAAE,UAAU,GAAG,KAAK,GAAG,QAAQ,EAAA,QAAA,EAAG,YAAY,EAAA,CAAO,EAClIA,GAAA,CAAC,SAAS,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACF,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,MAAA,GAAA,MAAA,GAAT,SAAS,CAAE,SAAS,EAAA,EACxB,SAAS,EAAC,iBAAiB,EAC3B,KAAK,EAAA,MAAA,CAAA,MAAA,CAAA,EACD,IAAI,EAAE,CAAC,EACP,OAAO,EAAE,MAAM,EACf,aAAa,EAAE,UAAU,GAAG,KAAK,GAAG,QAAQ,EAAA,GACxC,CAAA,MAAA,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,MAAA,GAAA,MAAA,GAAT,SAAS,CAAE,SAAS,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,KAAK,KAAI,EAAE,EAAC,EAAA,QAAA,EAGzC,QAAQ,IACD,EACX,UAAU,IAAIA,GAAA,CAAC,GAAG,EAAA,EAAC,SAAS,EAAC,qBAAqB,EAAC,OAAO,EAAA,IAAA,EAAC,aAAa,EAAE,UAAU,GAAG,KAAK,GAAG,QAAQ,EAAA,QAAA,EAAG,UAAU,EAAA,CAAO,CAAA,EAAA,CAAA,CAC1H;AAEd,CAAC;;;;"}
package/index.cjs ADDED
@@ -0,0 +1,134 @@
1
+ 'use strict';
2
+
3
+ var index = require('./Accordion/index.cjs');
4
+ var index$1 = require('./Autocomplete/index.cjs');
5
+ var index$2 = require('./Alert/index.cjs');
6
+ var index$3 = require('./Avatar/index.cjs');
7
+ var index$4 = require('./Badge/index.cjs');
8
+ var index$5 = require('./Box/index.cjs');
9
+ var index$6 = require('./Button/index.cjs');
10
+ var index$7 = require('./ButtonGroup/index.cjs');
11
+ var index$8 = require('./Calendar/index.cjs');
12
+ var index$9 = require('./CalendarInput/index.cjs');
13
+ var index$a = require('./Checkbox/index.cjs');
14
+ var index$b = require('./Chip/index.cjs');
15
+ var index$c = require('./CircleProgress/index.cjs');
16
+ var index$d = require('./ClickOutside/index.cjs');
17
+ var index$e = require('./Collaps/index.cjs');
18
+ var index$f = require('./Container/index.cjs');
19
+ var index$g = require('./Datatable/index.cjs');
20
+ var index$h = require('./DataFilter/index.cjs');
21
+ var index$i = require('./Divider/index.cjs');
22
+ var index$j = require('./Drawer/index.cjs');
23
+ var index$k = require('./Form/index.cjs');
24
+ var index$l = require('./GridContainer/index.cjs');
25
+ var index$m = require('./GridItem/index.cjs');
26
+ var index$n = require('./IconButton/index.cjs');
27
+ var index$o = require('./Image/index.cjs');
28
+ var index$p = require('./Input/index.cjs');
29
+ var index$q = require('./Label/index.cjs');
30
+ var index$r = require('./Layer/index.cjs');
31
+ var index$s = require('./LineProgress/index.cjs');
32
+ var index$t = require('./List/index.cjs');
33
+ var index$u = require('./ListItem/index.cjs');
34
+ var index$v = require('./LoadingBox/index.cjs');
35
+ var index$w = require('./Menu/index.cjs');
36
+ var index$x = require('./Modal/index.cjs');
37
+ var index$y = require('./NoSSR/index.cjs');
38
+ var index$z = require('./Option/index.cjs');
39
+ var index$A = require('./Paper/index.cjs');
40
+ var index$B = require('./Portal/index.cjs');
41
+ var index$C = require('./Radio/index.cjs');
42
+ var index$D = require('./Scrollbar/index.cjs');
43
+ var index$E = require('./Select/index.cjs');
44
+ var index$F = require('./Stack/index.cjs');
45
+ var index$G = require('./Switch/index.cjs');
46
+ var index$H = require('./Tab/index.cjs');
47
+ var index$I = require('./Table/index.cjs');
48
+ var index$J = require('./TableBody/index.cjs');
49
+ var index$K = require('./TableCell/index.cjs');
50
+ var index$L = require('./TableFooter/index.cjs');
51
+ var index$M = require('./TableHead/index.cjs');
52
+ var index$N = require('./TablePagination/index.cjs');
53
+ var index$O = require('./TableRow/index.cjs');
54
+ var index$P = require('./Tabs/index.cjs');
55
+ var index$Q = require('./Text/index.cjs');
56
+ var index$R = require('./Toast/index.cjs');
57
+ var index$S = require('./Tooltip/index.cjs');
58
+ var index$T = require('./useCorner/index.cjs');
59
+ var index$U = require('./ViewBox/index.cjs');
60
+ var SelectFilter = require('./DataFilter/options/SelectFilter.cjs');
61
+ var MultiSelectFilter = require('./DataFilter/options/MultiSelectFilter.cjs');
62
+ var NumberFilter = require('./DataFilter/options/NumberFilter.cjs');
63
+ var TextFilter = require('./DataFilter/options/TextFilter.cjs');
64
+ var NumberRangeFilter = require('./DataFilter/options/NumberRangeFilter.cjs');
65
+ var DateFilter = require('./DataFilter/options/DateFilter.cjs');
66
+ var DateRangeFilter = require('./DataFilter/options/DateRangeFilter.cjs');
67
+
68
+
69
+
70
+ exports.Accordion = index;
71
+ exports.Autocomplete = index$1;
72
+ exports.Alert = index$2;
73
+ exports.Avatar = index$3;
74
+ exports.Badge = index$4;
75
+ exports.Box = index$5;
76
+ exports.Button = index$6;
77
+ exports.ButtonGroup = index$7;
78
+ exports.Calendar = index$8;
79
+ exports.CalendarInput = index$9;
80
+ exports.Checkbox = index$a;
81
+ exports.Chip = index$b;
82
+ exports.CircleProgress = index$c;
83
+ exports.ClickOutside = index$d;
84
+ exports.Collaps = index$e;
85
+ exports.Container = index$f;
86
+ exports.Datatable = index$g;
87
+ exports.DataFilter = index$h.default;
88
+ exports.Divider = index$i;
89
+ exports.Drawer = index$j;
90
+ exports.Form = index$k;
91
+ exports.GridContainer = index$l;
92
+ exports.GridItem = index$m;
93
+ exports.IconButton = index$n;
94
+ exports.Image = index$o;
95
+ exports.Input = index$p;
96
+ exports.Label = index$q;
97
+ exports.Layer = index$r;
98
+ exports.LineProgress = index$s;
99
+ exports.List = index$t;
100
+ exports.ListItem = index$u;
101
+ exports.LoadingBox = index$v;
102
+ exports.Menu = index$w;
103
+ exports.Modal = index$x;
104
+ exports.NoSSR = index$y;
105
+ exports.Option = index$z;
106
+ exports.Paper = index$A;
107
+ exports.Portal = index$B;
108
+ exports.Radio = index$C;
109
+ exports.Scrollbar = index$D;
110
+ exports.Select = index$E;
111
+ exports.Stack = index$F;
112
+ exports.Switch = index$G;
113
+ exports.Tab = index$H;
114
+ exports.Table = index$I;
115
+ exports.TableBody = index$J;
116
+ exports.TableCell = index$K;
117
+ exports.TableFooter = index$L;
118
+ exports.TableHead = index$M;
119
+ exports.TablePagination = index$N;
120
+ exports.TableRow = index$O;
121
+ exports.Tabs = index$P;
122
+ exports.Text = index$Q;
123
+ exports.Toast = index$R;
124
+ exports.Tooltip = index$S;
125
+ exports.useCorner = index$T;
126
+ exports.ViewBox = index$U;
127
+ exports.SelectFilter = SelectFilter;
128
+ exports.MultiSelectFilter = MultiSelectFilter;
129
+ exports.NumberFilter = NumberFilter;
130
+ exports.TextFilter = TextFilter;
131
+ exports.NumberRangeFilter = NumberRangeFilter;
132
+ exports.DateFilter = DateFilter;
133
+ exports.DateRangeFilter = DateRangeFilter;
134
+ //# sourceMappingURL=index.cjs.map
package/index.cjs.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}