@xanui/ui 1.1.37 → 1.1.38

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 (155) hide show
  1. package/Accordion/index.js +19 -21
  2. package/Accordion/index.js.map +1 -1
  3. package/Alert/index.js +33 -35
  4. package/Alert/index.js.map +1 -1
  5. package/Autocomplete/index.js +23 -25
  6. package/Autocomplete/index.js.map +1 -1
  7. package/Avatar/index.js +15 -17
  8. package/Avatar/index.js.map +1 -1
  9. package/Badge/index.js +12 -14
  10. package/Badge/index.js.map +1 -1
  11. package/Box/index.js +7 -9
  12. package/Box/index.js.map +1 -1
  13. package/Button/index.js +17 -19
  14. package/Button/index.js.map +1 -1
  15. package/ButtonGroup/index.js +12 -14
  16. package/ButtonGroup/index.js.map +1 -1
  17. package/Calendar/index.js +39 -41
  18. package/Calendar/index.js.map +1 -1
  19. package/CalendarInput/index.js +19 -21
  20. package/CalendarInput/index.js.map +1 -1
  21. package/Checkbox/index.js +14 -16
  22. package/Checkbox/index.js.map +1 -1
  23. package/Chip/index.js +12 -14
  24. package/Chip/index.js.map +1 -1
  25. package/CircleProgress/index.js +13 -15
  26. package/CircleProgress/index.js.map +1 -1
  27. package/ClickOutside/index.js +9 -11
  28. package/ClickOutside/index.js.map +1 -1
  29. package/Collaps/index.js +9 -11
  30. package/Collaps/index.js.map +1 -1
  31. package/Container/index.js +9 -11
  32. package/Container/index.js.map +1 -1
  33. package/DataFilter/index.js +30 -41
  34. package/DataFilter/index.js.map +1 -1
  35. package/DataFilter/options/DateFilter.js +16 -18
  36. package/DataFilter/options/DateFilter.js.map +1 -1
  37. package/DataFilter/options/DateRangeFilter.js +12 -14
  38. package/DataFilter/options/DateRangeFilter.js.map +1 -1
  39. package/DataFilter/options/MultiSelectFilter.js +20 -22
  40. package/DataFilter/options/MultiSelectFilter.js.map +1 -1
  41. package/DataFilter/options/NumberFilter.js +11 -13
  42. package/DataFilter/options/NumberFilter.js.map +1 -1
  43. package/DataFilter/options/NumberRangeFilter.js +12 -14
  44. package/DataFilter/options/NumberRangeFilter.js.map +1 -1
  45. package/DataFilter/options/SelectFilter.js +18 -20
  46. package/DataFilter/options/SelectFilter.js.map +1 -1
  47. package/DataFilter/options/TextFilter.js +11 -13
  48. package/DataFilter/options/TextFilter.js.map +1 -1
  49. package/Datatable/FilterBox.js +21 -23
  50. package/Datatable/FilterBox.js.map +1 -1
  51. package/Datatable/Row.js +19 -21
  52. package/Datatable/Row.js.map +1 -1
  53. package/Datatable/SelectedBox.js +10 -12
  54. package/Datatable/SelectedBox.js.map +1 -1
  55. package/Datatable/Table.js +8 -10
  56. package/Datatable/Table.js.map +1 -1
  57. package/Datatable/TableHead.js +18 -20
  58. package/Datatable/TableHead.js.map +1 -1
  59. package/Datatable/index.js +21 -23
  60. package/Datatable/index.js.map +1 -1
  61. package/Divider/index.js +8 -10
  62. package/Divider/index.js.map +1 -1
  63. package/Drawer/index.js +12 -14
  64. package/Drawer/index.js.map +1 -1
  65. package/Form/index.js +8 -10
  66. package/Form/index.js.map +1 -1
  67. package/GridContainer/index.js +7 -9
  68. package/GridContainer/index.js.map +1 -1
  69. package/GridItem/index.js +7 -9
  70. package/GridItem/index.js.map +1 -1
  71. package/IconButton/index.js +12 -14
  72. package/IconButton/index.js.map +1 -1
  73. package/Image/index.js +9 -11
  74. package/Image/index.js.map +1 -1
  75. package/Input/index.js +18 -20
  76. package/Input/index.js.map +1 -1
  77. package/InputNumber/index.js +6 -8
  78. package/InputNumber/index.js.map +1 -1
  79. package/Label/index.js +7 -9
  80. package/Label/index.js.map +1 -1
  81. package/Layer/index.js +19 -21
  82. package/Layer/index.js.map +1 -1
  83. package/LineProgress/index.js +11 -13
  84. package/LineProgress/index.js.map +1 -1
  85. package/List/ListContext.js +2 -5
  86. package/List/ListContext.js.map +1 -1
  87. package/List/index.js +12 -14
  88. package/List/index.js.map +1 -1
  89. package/ListItem/index.js +12 -14
  90. package/ListItem/index.js.map +1 -1
  91. package/LoadingBox/index.js +11 -13
  92. package/LoadingBox/index.js.map +1 -1
  93. package/Menu/index.js +18 -20
  94. package/Menu/index.js.map +1 -1
  95. package/Modal/index.js +15 -17
  96. package/Modal/index.js.map +1 -1
  97. package/NoSSR/index.js +4 -6
  98. package/NoSSR/index.js.map +1 -1
  99. package/Option/index.js +7 -9
  100. package/Option/index.js.map +1 -1
  101. package/Paper/index.js +8 -10
  102. package/Paper/index.js.map +1 -1
  103. package/Portal/index.js +9 -11
  104. package/Portal/index.js.map +1 -1
  105. package/Radio/index.js +9 -11
  106. package/Radio/index.js.map +1 -1
  107. package/Scrollbar/index.js +10 -12
  108. package/Scrollbar/index.js.map +1 -1
  109. package/Select/index.js +22 -24
  110. package/Select/index.js.map +1 -1
  111. package/Skeleton/index.js +7 -9
  112. package/Skeleton/index.js.map +1 -1
  113. package/Stack/index.js +7 -9
  114. package/Stack/index.js.map +1 -1
  115. package/Switch/index.js +12 -14
  116. package/Switch/index.js.map +1 -1
  117. package/Tab/index.js +9 -11
  118. package/Tab/index.js.map +1 -1
  119. package/Table/index.js +13 -15
  120. package/Table/index.js.map +1 -1
  121. package/TableBody/index.js +7 -9
  122. package/TableBody/index.js.map +1 -1
  123. package/TableCell/index.js +7 -9
  124. package/TableCell/index.js.map +1 -1
  125. package/TableFooter/index.js +7 -9
  126. package/TableFooter/index.js.map +1 -1
  127. package/TableHead/index.js +7 -9
  128. package/TableHead/index.js.map +1 -1
  129. package/TablePagination/index.js +21 -23
  130. package/TablePagination/index.js.map +1 -1
  131. package/TableRow/index.js +7 -9
  132. package/TableRow/index.js.map +1 -1
  133. package/Tabs/index.js +19 -21
  134. package/Tabs/index.js.map +1 -1
  135. package/Text/index.js +8 -10
  136. package/Text/index.js.map +1 -1
  137. package/Toast/index.js +18 -20
  138. package/Toast/index.js.map +1 -1
  139. package/Tooltip/index.js +11 -13
  140. package/Tooltip/index.js.map +1 -1
  141. package/ViewBox/index.js +11 -13
  142. package/ViewBox/index.js.map +1 -1
  143. package/index.js +64 -133
  144. package/index.js.map +1 -1
  145. package/package.json +1 -1
  146. package/useAlert/index.js +12 -14
  147. package/useAlert/index.js.map +1 -1
  148. package/useBlurCss/index.js +5 -7
  149. package/useBlurCss/index.js.map +1 -1
  150. package/useCorner/index.js +1 -3
  151. package/useCorner/index.js.map +1 -1
  152. package/useLayer/index.js +7 -9
  153. package/useLayer/index.js.map +1 -1
  154. package/useModal/index.js +8 -10
  155. package/useModal/index.js.map +1 -1
package/index.js CHANGED
@@ -1,134 +1,65 @@
1
- 'use strict';
2
-
3
- var index = require('./Accordion/index.js');
4
- var index$1 = require('./Autocomplete/index.js');
5
- var index$2 = require('./Alert/index.js');
6
- var index$3 = require('./Avatar/index.js');
7
- var index$4 = require('./Badge/index.js');
8
- var index$5 = require('./Box/index.js');
9
- var index$6 = require('./Button/index.js');
10
- var index$7 = require('./ButtonGroup/index.js');
11
- var index$8 = require('./Calendar/index.js');
12
- var index$9 = require('./CalendarInput/index.js');
13
- var index$a = require('./Checkbox/index.js');
14
- var index$b = require('./Chip/index.js');
15
- var index$c = require('./CircleProgress/index.js');
16
- var index$d = require('./ClickOutside/index.js');
17
- var index$e = require('./Collaps/index.js');
18
- var index$f = require('./Container/index.js');
19
- var index$g = require('./Datatable/index.js');
20
- var index$h = require('./DataFilter/index.js');
21
- var index$i = require('./Divider/index.js');
22
- var index$j = require('./Drawer/index.js');
23
- var index$k = require('./Form/index.js');
24
- var index$l = require('./GridContainer/index.js');
25
- var index$m = require('./GridItem/index.js');
26
- var index$n = require('./IconButton/index.js');
27
- var index$o = require('./Image/index.js');
28
- var index$p = require('./Input/index.js');
29
- var index$q = require('./Label/index.js');
30
- var index$r = require('./Layer/index.js');
31
- var index$s = require('./LineProgress/index.js');
32
- var index$t = require('./List/index.js');
33
- var index$u = require('./ListItem/index.js');
34
- var index$v = require('./LoadingBox/index.js');
35
- var index$w = require('./Menu/index.js');
36
- var index$x = require('./Modal/index.js');
37
- var index$y = require('./NoSSR/index.js');
38
- var index$z = require('./Option/index.js');
39
- var index$A = require('./Paper/index.js');
40
- var index$B = require('./Portal/index.js');
41
- var index$C = require('./Radio/index.js');
42
- var index$D = require('./Scrollbar/index.js');
43
- var index$E = require('./Select/index.js');
44
- var index$F = require('./Stack/index.js');
45
- var index$G = require('./Switch/index.js');
46
- var index$H = require('./Tab/index.js');
47
- var index$I = require('./Table/index.js');
48
- var index$J = require('./TableBody/index.js');
49
- var index$K = require('./TableCell/index.js');
50
- var index$L = require('./TableFooter/index.js');
51
- var index$M = require('./TableHead/index.js');
52
- var index$N = require('./TablePagination/index.js');
53
- var index$O = require('./TableRow/index.js');
54
- var index$P = require('./Tabs/index.js');
55
- var index$Q = require('./Text/index.js');
56
- var index$R = require('./Toast/index.js');
57
- var index$S = require('./Tooltip/index.js');
58
- var index$T = require('./useCorner/index.js');
59
- var index$U = require('./ViewBox/index.js');
60
- var SelectFilter = require('./DataFilter/options/SelectFilter.js');
61
- var MultiSelectFilter = require('./DataFilter/options/MultiSelectFilter.js');
62
- var NumberFilter = require('./DataFilter/options/NumberFilter.js');
63
- var TextFilter = require('./DataFilter/options/TextFilter.js');
64
- var NumberRangeFilter = require('./DataFilter/options/NumberRangeFilter.js');
65
- var DateFilter = require('./DataFilter/options/DateFilter.js');
66
- var DateRangeFilter = require('./DataFilter/options/DateRangeFilter.js');
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;
1
+ export { default as Accordion } from './Accordion/index.js';
2
+ export { default as Autocomplete } from './Autocomplete/index.js';
3
+ export { default as Alert } from './Alert/index.js';
4
+ export { default as Avatar } from './Avatar/index.js';
5
+ export { default as Badge } from './Badge/index.js';
6
+ export { default as Box } from './Box/index.js';
7
+ export { default as Button } from './Button/index.js';
8
+ export { default as ButtonGroup } from './ButtonGroup/index.js';
9
+ export { default as Calendar } from './Calendar/index.js';
10
+ export { default as CalendarInput } from './CalendarInput/index.js';
11
+ export { default as Checkbox } from './Checkbox/index.js';
12
+ export { default as Chip } from './Chip/index.js';
13
+ export { default as CircleProgress } from './CircleProgress/index.js';
14
+ export { default as ClickOutside } from './ClickOutside/index.js';
15
+ export { default as Collaps } from './Collaps/index.js';
16
+ export { default as Container } from './Container/index.js';
17
+ export { default as Datatable } from './Datatable/index.js';
18
+ export { default as DataFilter } from './DataFilter/index.js';
19
+ export { default as Divider } from './Divider/index.js';
20
+ export { default as Drawer } from './Drawer/index.js';
21
+ export { default as Form } from './Form/index.js';
22
+ export { default as GridContainer } from './GridContainer/index.js';
23
+ export { default as GridItem } from './GridItem/index.js';
24
+ export { default as IconButton } from './IconButton/index.js';
25
+ export { default as Image } from './Image/index.js';
26
+ export { default as Input } from './Input/index.js';
27
+ export { default as Label } from './Label/index.js';
28
+ export { default as Layer } from './Layer/index.js';
29
+ export { default as LineProgress } from './LineProgress/index.js';
30
+ export { default as List } from './List/index.js';
31
+ export { default as ListItem } from './ListItem/index.js';
32
+ export { default as LoadingBox } from './LoadingBox/index.js';
33
+ export { default as Menu } from './Menu/index.js';
34
+ export { default as Modal } from './Modal/index.js';
35
+ export { default as NoSSR } from './NoSSR/index.js';
36
+ export { default as Option } from './Option/index.js';
37
+ export { default as Paper } from './Paper/index.js';
38
+ export { default as Portal } from './Portal/index.js';
39
+ export { default as Radio } from './Radio/index.js';
40
+ export { default as Scrollbar } from './Scrollbar/index.js';
41
+ export { default as Select } from './Select/index.js';
42
+ export { default as Stack } from './Stack/index.js';
43
+ export { default as Switch } from './Switch/index.js';
44
+ export { default as Tab } from './Tab/index.js';
45
+ export { default as Table } from './Table/index.js';
46
+ export { default as TableBody } from './TableBody/index.js';
47
+ export { default as TableCell } from './TableCell/index.js';
48
+ export { default as TableFooter } from './TableFooter/index.js';
49
+ export { default as TableHead } from './TableHead/index.js';
50
+ export { default as TablePagination } from './TablePagination/index.js';
51
+ export { default as TableRow } from './TableRow/index.js';
52
+ export { default as Tabs } from './Tabs/index.js';
53
+ export { default as Text } from './Text/index.js';
54
+ export { default as Toast } from './Toast/index.js';
55
+ export { default as Tooltip } from './Tooltip/index.js';
56
+ export { default as useCorner } from './useCorner/index.js';
57
+ export { default as ViewBox } from './ViewBox/index.js';
58
+ export { default as SelectFilter } from './DataFilter/options/SelectFilter.js';
59
+ export { default as MultiSelectFilter } from './DataFilter/options/MultiSelectFilter.js';
60
+ export { default as NumberFilter } from './DataFilter/options/NumberFilter.js';
61
+ export { default as TextFilter } from './DataFilter/options/TextFilter.js';
62
+ export { default as NumberRangeFilter } from './DataFilter/options/NumberRangeFilter.js';
63
+ export { default as DateFilter } from './DataFilter/options/DateFilter.js';
64
+ export { default as DateRangeFilter } from './DataFilter/options/DateRangeFilter.js';
134
65
  //# sourceMappingURL=index.js.map
package/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@xanui/ui",
3
- "version": "1.1.37",
3
+ "version": "1.1.38",
4
4
  "description": "",
5
5
  "private": false,
6
6
  "dependencies": {
package/useAlert/index.js CHANGED
@@ -1,17 +1,15 @@
1
1
  "use client";
2
- 'use strict';
3
-
4
- var tslib = require('tslib');
5
- var jsxRuntime = require('react/jsx-runtime');
6
- var core = require('@xanui/core');
7
- var index$2 = require('../Button/index.js');
8
- var index = require('../useModal/index.js');
9
- var index$1 = require('../Alert/index.js');
10
- var React = require('react');
2
+ import { __rest } from 'tslib';
3
+ import { jsxs, jsx } from 'react/jsx-runtime';
4
+ import { Tag } from '@xanui/core';
5
+ import Button from '../Button/index.js';
6
+ import useModal from '../useModal/index.js';
7
+ import Alert from '../Alert/index.js';
8
+ import React from 'react';
11
9
 
12
10
  const useAlert = (props) => {
13
11
  const [loading, setLoading] = React.useState(false);
14
- let { content, size, color, direction, variant, closeButton, clickOutsideToClose, okButtonText, cancelButtonText, hideOkButton, hideCancelButton, buttonPlacement, onConfirm, onCancel, transition, blurMode, slotProps } = props, rest = tslib.__rest(props, ["content", "size", "color", "direction", "variant", "closeButton", "clickOutsideToClose", "okButtonText", "cancelButtonText", "hideOkButton", "hideCancelButton", "buttonPlacement", "onConfirm", "onCancel", "transition", "blurMode", "slotProps"]);
12
+ let { content, size, color, direction, variant, closeButton, clickOutsideToClose, okButtonText, cancelButtonText, hideOkButton, hideCancelButton, buttonPlacement, onConfirm, onCancel, transition, blurMode, slotProps } = props, rest = __rest(props, ["content", "size", "color", "direction", "variant", "closeButton", "clickOutsideToClose", "okButtonText", "cancelButtonText", "hideOkButton", "hideCancelButton", "buttonPlacement", "onConfirm", "onCancel", "transition", "blurMode", "slotProps"]);
15
13
  hideOkButton !== null && hideOkButton !== void 0 ? hideOkButton : (hideOkButton = false);
16
14
  hideCancelButton !== null && hideCancelButton !== void 0 ? hideCancelButton : (hideCancelButton = false);
17
15
  size !== null && size !== void 0 ? size : (size = "small");
@@ -60,7 +58,7 @@ const useAlert = (props) => {
60
58
  closecolor = 'default';
61
59
  }
62
60
  }
63
- const modal = index(jsxRuntime.jsxs(index$1, Object.assign({ direction: direction, sx: {
61
+ const modal = useModal(jsxs(Alert, Object.assign({ direction: direction, sx: {
64
62
  px: 2,
65
63
  py: 1,
66
64
  pt: direction === 'row' ? 1 : 2
@@ -69,12 +67,12 @@ const useAlert = (props) => {
69
67
  close: () => modal.close(),
70
68
  loading: (is) => setLoading(is),
71
69
  isLoading: () => loading
72
- }) : content, jsxRuntime.jsxs(core.Tag, { sxr: Object.assign({ display: "flex", gap: 1, pt: 4, flexDirection: "row" }, sx), children: [!hideCancelButton && jsxRuntime.jsx(index$2, Object.assign({ disabled: loading, color: closecolor, variant: "fill" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.closeButton, { onClick: async () => {
70
+ }) : content, jsxs(Tag, { sxr: Object.assign({ display: "flex", gap: 1, pt: 4, flexDirection: "row" }, sx), children: [!hideCancelButton && jsx(Button, Object.assign({ disabled: loading, color: closecolor, variant: "fill" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.closeButton, { onClick: async () => {
73
71
  setLoading(true);
74
72
  onCancel && await onCancel();
75
73
  setLoading(false);
76
74
  modal.close();
77
- }, children: cancelButtonText || "Close" })), jsxRuntime.jsx(index$2, Object.assign({ loading: loading, color: okcolor, variant: "fill" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.okButton, { onClick: async () => {
75
+ }, children: cancelButtonText || "Close" })), jsx(Button, Object.assign({ loading: loading, color: okcolor, variant: "fill" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.okButton, { onClick: async () => {
78
76
  setLoading(true);
79
77
  onConfirm && await onConfirm();
80
78
  setLoading(false);
@@ -90,5 +88,5 @@ const useAlert = (props) => {
90
88
  return Object.assign(Object.assign({}, modal), { loading: (is) => setLoading(is), isLoading: () => loading });
91
89
  };
92
90
 
93
- module.exports = useAlert;
91
+ export { useAlert as default };
94
92
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../../src/useAlert/index.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { Tag, UseTransitionVariantTypes } from \"@xanui/core\"\r\nimport Button, { ButtonProps } from \"../Button\";\r\nimport useModal, { UseModalProps } from \"../useModal\";\r\nimport Alert, { AlertProps } from \"../Alert\";\r\nimport React from \"react\";\r\nexport type UseAlertContentProps = {\r\n open: () => void;\r\n close: () => void;\r\n loading: (is: boolean) => void;\r\n isLoading: () => boolean;\r\n}\r\n\r\nexport type UseAlertContent = React.ReactElement | ((props: UseAlertContentProps) => React.ReactElement)\r\n\r\nexport type UseAlerProps = Omit<AlertProps, 'children' | 'onClose' | 'variant' | \"size\"> & {\r\n content: string | UseAlertContent,\r\n size?: \"small\" | \"medium\" | \"large\" | number;\r\n closeButton?: boolean;\r\n clickOutsideToClose?: boolean;\r\n okButtonText?: string;\r\n cancelButtonText?: string;\r\n hideOkButton?: boolean;\r\n hideCancelButton?: boolean;\r\n buttonPlacement?: \"start\" | \"end\" | \"between\" | \"full\";\r\n variant?: \"text\" | \"fill\"\r\n onConfirm?: () => Promise<void> | void;\r\n onCancel?: () => Promise<void> | void;\r\n transition?: UseTransitionVariantTypes;\r\n blurMode?: UseModalProps['blurMode'];\r\n slotProps?: {\r\n modal?: UseModalProps;\r\n okButton?: Omit<ButtonProps, \"children\">;\r\n closeButton?: Omit<ButtonProps, \"children\">;\r\n }\r\n}\r\n\r\n\r\nconst useAlert = (props: UseAlerProps) => {\r\n const [loading, setLoading] = React.useState(false)\r\n let {\r\n content,\r\n size,\r\n color,\r\n direction,\r\n variant,\r\n closeButton,\r\n clickOutsideToClose,\r\n okButtonText,\r\n cancelButtonText,\r\n hideOkButton,\r\n hideCancelButton,\r\n buttonPlacement,\r\n onConfirm,\r\n onCancel,\r\n transition,\r\n blurMode,\r\n slotProps,\r\n ...rest\r\n } = props\r\n\r\n hideOkButton ??= false\r\n hideCancelButton ??= false\r\n\r\n size ??= \"small\"\r\n color ??= 'default'\r\n variant ??= \"text\"\r\n direction ??= \"column\"\r\n buttonPlacement ??= \"end\"\r\n let sx: any = {};\r\n\r\n switch (buttonPlacement) {\r\n case \"start\":\r\n sx.justifyContent = 'flex-start'\r\n break;\r\n case \"end\":\r\n sx.justifyContent = 'flex-end'\r\n break;\r\n case \"between\":\r\n sx.justifyContent = 'space-between'\r\n break;\r\n case \"full\":\r\n sx = {\r\n \"& button\": {\r\n flex: 1\r\n }\r\n }\r\n break;\r\n }\r\n\r\n let sizes: any = {\r\n small: 320,\r\n medium: 400,\r\n large: 600\r\n }\r\n\r\n let okcolor = color\r\n let closecolor = color\r\n if (color === 'default') {\r\n okcolor = 'brand'\r\n closecolor = 'default'\r\n variant = 'text'\r\n } else {\r\n if (variant === 'fill') {\r\n okcolor = 'default'\r\n closecolor = 'default'\r\n } else {\r\n okcolor = color\r\n closecolor = 'default'\r\n }\r\n }\r\n\r\n const modal = useModal(<Alert\r\n direction={direction}\r\n sx={{\r\n px: 2,\r\n py: 1,\r\n pt: direction === 'row' ? 1 : 2\r\n }}\r\n color={color}\r\n variant={variant}\r\n onClose={closeButton ? close : undefined}\r\n {...rest}\r\n >\r\n {typeof content === \"function\" ? content({\r\n open: () => modal.open(),\r\n close: () => modal.close(),\r\n loading: (is: boolean) => setLoading(is),\r\n isLoading: () => loading\r\n }) : content}\r\n <Tag\r\n sxr={{\r\n display: \"flex\",\r\n gap: 1,\r\n pt: 4,\r\n flexDirection: \"row\",\r\n ...sx,\r\n }}\r\n >\r\n {!hideCancelButton && <Button\r\n disabled={loading}\r\n color={closecolor}\r\n variant=\"fill\"\r\n {...slotProps?.closeButton}\r\n onClick={async () => {\r\n setLoading(true)\r\n onCancel && await onCancel()\r\n setLoading(false)\r\n modal.close()\r\n }}\r\n >{cancelButtonText || \"Close\"}</Button>}\r\n <Button\r\n loading={loading}\r\n color={okcolor}\r\n variant=\"fill\"\r\n {...slotProps?.okButton}\r\n\r\n onClick={async () => {\r\n setLoading(true)\r\n onConfirm && await onConfirm()\r\n setLoading(false)\r\n modal.close()\r\n }}\r\n >{okButtonText || \"OK\"}</Button>\r\n </Tag>\r\n </Alert>, {\r\n ...slotProps?.modal,\r\n size: sizes[size] || size,\r\n blur: 40,\r\n blurMode: blurMode || \"transparent\",\r\n transition: transition || \"zoom\",\r\n onClickOutside: async () => {\r\n if (clickOutsideToClose && !loading) {\r\n setLoading(true)\r\n onCancel && await onCancel()\r\n setLoading(false)\r\n modal.close()\r\n }\r\n }\r\n })\r\n\r\n return {\r\n ...modal,\r\n loading: (is: boolean) => setLoading(is),\r\n isLoading: () => loading\r\n }\r\n}\r\n\r\nexport default useAlert"],"names":[],"mappings":";;;;;;;;;;;AAuCA;AACI;AACA;;;;;;;;;;AAgCI;AACI;;AAEJ;AACI;;AAEJ;AACI;;AAEJ;AACI;AACI;AACI;AACH;;;;AAKb;AACI;AACA;AACA;;;;AAKJ;;;;;;AAKI;;;;;;;;;AASJ;AAGQ;AACA;;AAEH;AAOG;AACA;;AAEA;;;AAkBQ;;;AAGJ;;AAUI;;;;AAaR;;AAEI;;;;AAIR;;AAQR;;"}
1
+ {"version":3,"file":"index.js","sources":["../../src/useAlert/index.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { Tag, UseTransitionVariantTypes } from \"@xanui/core\"\r\nimport Button, { ButtonProps } from \"../Button\";\r\nimport useModal, { UseModalProps } from \"../useModal\";\r\nimport Alert, { AlertProps } from \"../Alert\";\r\nimport React from \"react\";\r\nexport type UseAlertContentProps = {\r\n open: () => void;\r\n close: () => void;\r\n loading: (is: boolean) => void;\r\n isLoading: () => boolean;\r\n}\r\n\r\nexport type UseAlertContent = React.ReactElement | ((props: UseAlertContentProps) => React.ReactElement)\r\n\r\nexport type UseAlerProps = Omit<AlertProps, 'children' | 'onClose' | 'variant' | \"size\"> & {\r\n content: string | UseAlertContent,\r\n size?: \"small\" | \"medium\" | \"large\" | number;\r\n closeButton?: boolean;\r\n clickOutsideToClose?: boolean;\r\n okButtonText?: string;\r\n cancelButtonText?: string;\r\n hideOkButton?: boolean;\r\n hideCancelButton?: boolean;\r\n buttonPlacement?: \"start\" | \"end\" | \"between\" | \"full\";\r\n variant?: \"text\" | \"fill\"\r\n onConfirm?: () => Promise<void> | void;\r\n onCancel?: () => Promise<void> | void;\r\n transition?: UseTransitionVariantTypes;\r\n blurMode?: UseModalProps['blurMode'];\r\n slotProps?: {\r\n modal?: UseModalProps;\r\n okButton?: Omit<ButtonProps, \"children\">;\r\n closeButton?: Omit<ButtonProps, \"children\">;\r\n }\r\n}\r\n\r\n\r\nconst useAlert = (props: UseAlerProps) => {\r\n const [loading, setLoading] = React.useState(false)\r\n let {\r\n content,\r\n size,\r\n color,\r\n direction,\r\n variant,\r\n closeButton,\r\n clickOutsideToClose,\r\n okButtonText,\r\n cancelButtonText,\r\n hideOkButton,\r\n hideCancelButton,\r\n buttonPlacement,\r\n onConfirm,\r\n onCancel,\r\n transition,\r\n blurMode,\r\n slotProps,\r\n ...rest\r\n } = props\r\n\r\n hideOkButton ??= false\r\n hideCancelButton ??= false\r\n\r\n size ??= \"small\"\r\n color ??= 'default'\r\n variant ??= \"text\"\r\n direction ??= \"column\"\r\n buttonPlacement ??= \"end\"\r\n let sx: any = {};\r\n\r\n switch (buttonPlacement) {\r\n case \"start\":\r\n sx.justifyContent = 'flex-start'\r\n break;\r\n case \"end\":\r\n sx.justifyContent = 'flex-end'\r\n break;\r\n case \"between\":\r\n sx.justifyContent = 'space-between'\r\n break;\r\n case \"full\":\r\n sx = {\r\n \"& button\": {\r\n flex: 1\r\n }\r\n }\r\n break;\r\n }\r\n\r\n let sizes: any = {\r\n small: 320,\r\n medium: 400,\r\n large: 600\r\n }\r\n\r\n let okcolor = color\r\n let closecolor = color\r\n if (color === 'default') {\r\n okcolor = 'brand'\r\n closecolor = 'default'\r\n variant = 'text'\r\n } else {\r\n if (variant === 'fill') {\r\n okcolor = 'default'\r\n closecolor = 'default'\r\n } else {\r\n okcolor = color\r\n closecolor = 'default'\r\n }\r\n }\r\n\r\n const modal = useModal(<Alert\r\n direction={direction}\r\n sx={{\r\n px: 2,\r\n py: 1,\r\n pt: direction === 'row' ? 1 : 2\r\n }}\r\n color={color}\r\n variant={variant}\r\n onClose={closeButton ? close : undefined}\r\n {...rest}\r\n >\r\n {typeof content === \"function\" ? content({\r\n open: () => modal.open(),\r\n close: () => modal.close(),\r\n loading: (is: boolean) => setLoading(is),\r\n isLoading: () => loading\r\n }) : content}\r\n <Tag\r\n sxr={{\r\n display: \"flex\",\r\n gap: 1,\r\n pt: 4,\r\n flexDirection: \"row\",\r\n ...sx,\r\n }}\r\n >\r\n {!hideCancelButton && <Button\r\n disabled={loading}\r\n color={closecolor}\r\n variant=\"fill\"\r\n {...slotProps?.closeButton}\r\n onClick={async () => {\r\n setLoading(true)\r\n onCancel && await onCancel()\r\n setLoading(false)\r\n modal.close()\r\n }}\r\n >{cancelButtonText || \"Close\"}</Button>}\r\n <Button\r\n loading={loading}\r\n color={okcolor}\r\n variant=\"fill\"\r\n {...slotProps?.okButton}\r\n\r\n onClick={async () => {\r\n setLoading(true)\r\n onConfirm && await onConfirm()\r\n setLoading(false)\r\n modal.close()\r\n }}\r\n >{okButtonText || \"OK\"}</Button>\r\n </Tag>\r\n </Alert>, {\r\n ...slotProps?.modal,\r\n size: sizes[size] || size,\r\n blur: 40,\r\n blurMode: blurMode || \"transparent\",\r\n transition: transition || \"zoom\",\r\n onClickOutside: async () => {\r\n if (clickOutsideToClose && !loading) {\r\n setLoading(true)\r\n onCancel && await onCancel()\r\n setLoading(false)\r\n modal.close()\r\n }\r\n }\r\n })\r\n\r\n return {\r\n ...modal,\r\n loading: (is: boolean) => setLoading(is),\r\n isLoading: () => loading\r\n }\r\n}\r\n\r\nexport default useAlert"],"names":[],"mappings":";;;;;;;;;AAuCA;AACI;AACA;;;;;;;;;;AAgCI;AACI;;AAEJ;AACI;;AAEJ;AACI;;AAEJ;AACI;AACI;AACI;AACH;;;;AAKb;AACI;AACA;AACA;;;;AAKJ;;;;;;AAKI;;;;;;;;;AASJ;AAGQ;AACA;;AAEH;AAOG;AACA;;AAEA;;;AAkBQ;;;AAGJ;;AAUI;;;;AAaR;;AAEI;;;;AAIR;;AAQR;;"}
@@ -1,12 +1,10 @@
1
- 'use strict';
2
-
3
- var React = require('react');
4
- var core = require('@xanui/core');
1
+ import { useMemo } from 'react';
2
+ import { alpha } from '@xanui/core';
5
3
 
6
4
  let _d;
7
5
  const useBlurCss = (blur, mode) => {
8
- return React.useMemo(() => {
9
- let transparent = { bgcolor: core.alpha("#000000", blur / 100) };
6
+ return useMemo(() => {
7
+ let transparent = { bgcolor: alpha("#000000", blur / 100) };
10
8
  if (typeof window === 'undefined' || mode === 'transparent') {
11
9
  return transparent;
12
10
  }
@@ -15,5 +13,5 @@ const useBlurCss = (blur, mode) => {
15
13
  }, [blur]);
16
14
  };
17
15
 
18
- module.exports = useBlurCss;
16
+ export { useBlurCss as default };
19
17
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../../src/useBlurCss/index.tsx"],"sourcesContent":["import { useMemo } from \"react\"\r\nimport { alpha } from \"@xanui/core\";\r\n\r\nlet _d: CSSStyleDeclaration;\r\n\r\nconst useBlurCss = (blur: number, mode?: \"transparent\" | \"blur\") => {\r\n return useMemo(() => {\r\n let transparent = { bgcolor: alpha(\"#000000\", blur / 100) }\r\n if (typeof window === 'undefined' || mode === 'transparent') {\r\n return transparent\r\n }\r\n const d = _d || (_d = window.document.createElement(\"div\").style)\r\n return d['backdropFilter'] !== undefined ? { backdropFilter: `blur(${(blur / 100) * 10}px)` } : transparent\r\n }, [blur])\r\n}\r\n\r\n\r\nexport default useBlurCss"],"names":["useMemo","alpha"],"mappings":";;;;;AAGA,IAAI,EAAuB;AAE3B,MAAM,UAAU,GAAG,CAAC,IAAY,EAAE,IAA6B,KAAI;IAChE,OAAOA,aAAO,CAAC,MAAK;AACjB,QAAA,IAAI,WAAW,GAAG,EAAE,OAAO,EAAEC,UAAK,CAAC,SAAS,EAAE,IAAI,GAAG,GAAG,CAAC,EAAE;QAC3D,IAAI,OAAO,MAAM,KAAK,WAAW,IAAI,IAAI,KAAK,aAAa,EAAE;AAC1D,YAAA,OAAO,WAAW;QACrB;AACA,QAAA,MAAM,CAAC,GAAG,EAAE,KAAK,EAAE,GAAG,MAAM,CAAC,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC;QACjE,OAAO,CAAC,CAAC,gBAAgB,CAAC,KAAK,SAAS,GAAG,EAAE,cAAc,EAAE,CAAA,KAAA,EAAQ,CAAC,IAAI,GAAG,GAAG,IAAI,EAAE,CAAA,GAAA,CAAK,EAAE,GAAG,WAAW;AAC9G,IAAA,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC;AACb;;;;"}
1
+ {"version":3,"file":"index.js","sources":["../../src/useBlurCss/index.tsx"],"sourcesContent":["import { useMemo } from \"react\"\r\nimport { alpha } from \"@xanui/core\";\r\n\r\nlet _d: CSSStyleDeclaration;\r\n\r\nconst useBlurCss = (blur: number, mode?: \"transparent\" | \"blur\") => {\r\n return useMemo(() => {\r\n let transparent = { bgcolor: alpha(\"#000000\", blur / 100) }\r\n if (typeof window === 'undefined' || mode === 'transparent') {\r\n return transparent\r\n }\r\n const d = _d || (_d = window.document.createElement(\"div\").style)\r\n return d['backdropFilter'] !== undefined ? { backdropFilter: `blur(${(blur / 100) * 10}px)` } : transparent\r\n }, [blur])\r\n}\r\n\r\n\r\nexport default useBlurCss"],"names":[],"mappings":";;;AAGA,IAAI,EAAuB;AAE3B,MAAM,UAAU,GAAG,CAAC,IAAY,EAAE,IAA6B,KAAI;IAChE,OAAO,OAAO,CAAC,MAAK;AACjB,QAAA,IAAI,WAAW,GAAG,EAAE,OAAO,EAAE,KAAK,CAAC,SAAS,EAAE,IAAI,GAAG,GAAG,CAAC,EAAE;QAC3D,IAAI,OAAO,MAAM,KAAK,WAAW,IAAI,IAAI,KAAK,aAAa,EAAE;AAC1D,YAAA,OAAO,WAAW;QACrB;AACA,QAAA,MAAM,CAAC,GAAG,EAAE,KAAK,EAAE,GAAG,MAAM,CAAC,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC;QACjE,OAAO,CAAC,CAAC,gBAAgB,CAAC,KAAK,SAAS,GAAG,EAAE,cAAc,EAAE,CAAA,KAAA,EAAQ,CAAC,IAAI,GAAG,GAAG,IAAI,EAAE,CAAA,GAAA,CAAK,EAAE,GAAG,WAAW;AAC9G,IAAA,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC;AACb;;;;"}
@@ -1,5 +1,3 @@
1
- 'use strict';
2
-
3
1
  const useCorner = (type) => {
4
2
  switch (type) {
5
3
  case 'square':
@@ -18,5 +16,5 @@ const useCorner = (type) => {
18
16
  return {};
19
17
  };
20
18
 
21
- module.exports = useCorner;
19
+ export { useCorner as default };
22
20
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../../src/useCorner/index.ts"],"sourcesContent":["\r\nexport type UseCornerTypes = \"square\" | \"rounded\" | \"circle\"\r\nconst useCorner = (type?: UseCornerTypes): object => {\r\n switch (type) {\r\n case 'square':\r\n return {\r\n radius: 0\r\n }\r\n case 'rounded':\r\n return {\r\n radius: 1\r\n }\r\n case 'circle':\r\n return {\r\n radius: 100\r\n }\r\n }\r\n return {}\r\n}\r\n\r\nexport default useCorner"],"names":[],"mappings":";;AAEA,MAAM,SAAS,GAAG,CAAC,IAAqB,KAAY;IAChD,QAAQ,IAAI;AACR,QAAA,KAAK,QAAQ;YACT,OAAO;AACH,gBAAA,MAAM,EAAE;aACX;AACL,QAAA,KAAK,SAAS;YACV,OAAO;AACH,gBAAA,MAAM,EAAE;aACX;AACL,QAAA,KAAK,QAAQ;YACT,OAAO;AACH,gBAAA,MAAM,EAAE;aACX;;AAET,IAAA,OAAO,EAAE;AACb;;;;"}
1
+ {"version":3,"file":"index.js","sources":["../../src/useCorner/index.ts"],"sourcesContent":["\r\nexport type UseCornerTypes = \"square\" | \"rounded\" | \"circle\"\r\nconst useCorner = (type?: UseCornerTypes): object => {\r\n switch (type) {\r\n case 'square':\r\n return {\r\n radius: 0\r\n }\r\n case 'rounded':\r\n return {\r\n radius: 1\r\n }\r\n case 'circle':\r\n return {\r\n radius: 100\r\n }\r\n }\r\n return {}\r\n}\r\n\r\nexport default useCorner"],"names":[],"mappings":"AAEA,MAAM,SAAS,GAAG,CAAC,IAAqB,KAAY;IAChD,QAAQ,IAAI;AACR,QAAA,KAAK,QAAQ;YACT,OAAO;AACH,gBAAA,MAAM,EAAE;aACX;AACL,QAAA,KAAK,SAAS;YACV,OAAO;AACH,gBAAA,MAAM,EAAE;aACX;AACL,QAAA,KAAK,QAAQ;YACT,OAAO;AACH,gBAAA,MAAM,EAAE;aACX;;AAET,IAAA,OAAO,EAAE;AACb;;;;"}
package/useLayer/index.js CHANGED
@@ -1,16 +1,14 @@
1
1
  "use client";
2
- 'use strict';
3
-
4
- var jsxRuntime = require('react/jsx-runtime');
5
- var core = require('@xanui/core');
6
- var React = require('react');
7
- var index = require('../Layer/index.js');
2
+ import { jsx } from 'react/jsx-runtime';
3
+ import { usePortal } from '@xanui/core';
4
+ import { useState } from 'react';
5
+ import Layer from '../Layer/index.js';
8
6
 
9
7
  const useLayer = (children, props) => {
10
8
  var _a;
11
- const [open, setOpen] = React.useState(false);
9
+ const [open, setOpen] = useState(false);
12
10
  const portalProps = ((_a = props === null || props === void 0 ? void 0 : props.slotProps) === null || _a === void 0 ? void 0 : _a.portal) || {};
13
- const portal = core.usePortal(jsxRuntime.jsx(index, Object.assign({ blur: 20 }, props, { open: open, onClosed: () => {
11
+ const portal = usePortal(jsx(Layer, Object.assign({ blur: 20 }, props, { open: open, onClosed: () => {
14
12
  portal.unmount();
15
13
  if (props === null || props === void 0 ? void 0 : props.onClosed) {
16
14
  props.onClosed();
@@ -34,5 +32,5 @@ const useLayer = (children, props) => {
34
32
  };
35
33
  };
36
34
 
37
- module.exports = useLayer;
35
+ export { useLayer as default };
38
36
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../../src/useLayer/index.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { usePortal } from \"@xanui/core\"\r\nimport { useState } from \"react\"\r\nimport Layer, { LayerProps } from \"../Layer\"\r\nimport { UsePortalOptions } from \"@xanui/core/hooks/usePortal\"\r\n\r\nexport type UseLayerProps = Omit<LayerProps, \"open\" | \"children\" | \"slotProps\"> & {\r\n slotProps?: LayerProps[\"slotProps\"] & {\r\n portal?: UsePortalOptions\r\n }\r\n}\r\n\r\nexport type UseLayerReturn = {\r\n open: () => void;\r\n close: () => void;\r\n}\r\n\r\nexport type UseLayerChildren = React.ReactElement | ((props: UseLayerReturn) => React.ReactElement)\r\n\r\nconst useLayer = (children: UseLayerChildren, props?: UseLayerProps): UseLayerReturn => {\r\n const [open, setOpen] = useState(false)\r\n const portalProps = props?.slotProps?.portal || {}\r\n const portal = usePortal(<Layer\r\n blur={20}\r\n {...props}\r\n open={open}\r\n onClosed={() => {\r\n portal.unmount()\r\n if (props?.onClosed) {\r\n props.onClosed()\r\n }\r\n }}\r\n onClickOutside={() => {\r\n if (props?.onClickOutside) {\r\n props.onClickOutside()\r\n } else {\r\n setOpen(false)\r\n }\r\n }}\r\n >\r\n {typeof children === \"function\" ? children({ open: () => setOpen(true), close: () => setOpen(false) }) : children}\r\n </Layer>, portalProps)\r\n\r\n return {\r\n open: () => {\r\n portal.mount()\r\n setOpen(true)\r\n },\r\n close: () => {\r\n setOpen(false)\r\n },\r\n }\r\n}\r\n\r\nexport default useLayer"],"names":[],"mappings":";;;;;;;;AAoBA;;;AAEG;;;;;;AAUG;;;;;;;AAOA;;;;;;;;;;AAcN;;"}
1
+ {"version":3,"file":"index.js","sources":["../../src/useLayer/index.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { usePortal } from \"@xanui/core\"\r\nimport { useState } from \"react\"\r\nimport Layer, { LayerProps } from \"../Layer\"\r\nimport { UsePortalOptions } from \"@xanui/core/hooks/usePortal\"\r\n\r\nexport type UseLayerProps = Omit<LayerProps, \"open\" | \"children\" | \"slotProps\"> & {\r\n slotProps?: LayerProps[\"slotProps\"] & {\r\n portal?: UsePortalOptions\r\n }\r\n}\r\n\r\nexport type UseLayerReturn = {\r\n open: () => void;\r\n close: () => void;\r\n}\r\n\r\nexport type UseLayerChildren = React.ReactElement | ((props: UseLayerReturn) => React.ReactElement)\r\n\r\nconst useLayer = (children: UseLayerChildren, props?: UseLayerProps): UseLayerReturn => {\r\n const [open, setOpen] = useState(false)\r\n const portalProps = props?.slotProps?.portal || {}\r\n const portal = usePortal(<Layer\r\n blur={20}\r\n {...props}\r\n open={open}\r\n onClosed={() => {\r\n portal.unmount()\r\n if (props?.onClosed) {\r\n props.onClosed()\r\n }\r\n }}\r\n onClickOutside={() => {\r\n if (props?.onClickOutside) {\r\n props.onClickOutside()\r\n } else {\r\n setOpen(false)\r\n }\r\n }}\r\n >\r\n {typeof children === \"function\" ? children({ open: () => setOpen(true), close: () => setOpen(false) }) : children}\r\n </Layer>, portalProps)\r\n\r\n return {\r\n open: () => {\r\n portal.mount()\r\n setOpen(true)\r\n },\r\n close: () => {\r\n setOpen(false)\r\n },\r\n }\r\n}\r\n\r\nexport default useLayer"],"names":[],"mappings":";;;;;;AAoBA;;;AAEG;;;;;;AAUG;;;;;;;AAOA;;;;;;;;;;AAcN;;"}
package/useModal/index.js CHANGED
@@ -1,10 +1,8 @@
1
1
  "use client";
2
- 'use strict';
3
-
4
- var tslib = require('tslib');
5
- var jsxRuntime = require('react/jsx-runtime');
6
- var index = require('../useLayer/index.js');
7
- var core = require('@xanui/core');
2
+ import { __rest } from 'tslib';
3
+ import { jsx } from 'react/jsx-runtime';
4
+ import useLayer from '../useLayer/index.js';
5
+ import { Tag } from '@xanui/core';
8
6
 
9
7
  const useModal = (children, props) => {
10
8
  var _a, _b;
@@ -16,12 +14,12 @@ const useModal = (children, props) => {
16
14
  xl: 1300,
17
15
  full: "100%"
18
16
  };
19
- let _c = props || {}, { size, slotProps } = _c, useLayerProps = tslib.__rest(_c, ["size", "slotProps"]);
17
+ let _c = props || {}, { size, slotProps } = _c, useLayerProps = __rest(_c, ["size", "slotProps"]);
20
18
  size = size !== null && size !== void 0 ? size : "xs";
21
19
  slotProps = slotProps || {};
22
20
  const root = (slotProps === null || slotProps === void 0 ? void 0 : slotProps.root) || {};
23
- const layer = index(() => {
24
- return (jsxRuntime.jsx(core.Tag, Object.assign({}, root, { sxr: Object.assign({ maxWidth: sizes[size] || size, width: "100%", radius: 2, bgcolor: "background.primary", shadow: 15 }, root === null || root === void 0 ? void 0 : root.sx), baseClass: 'modal', children: typeof children === "function" ? children({ open: layer.open, close: layer.close }) : children })));
21
+ const layer = useLayer(() => {
22
+ return (jsx(Tag, Object.assign({}, root, { sxr: Object.assign({ maxWidth: sizes[size] || size, width: "100%", radius: 2, bgcolor: "background.primary", shadow: 15 }, root === null || root === void 0 ? void 0 : root.sx), baseClass: 'modal', children: typeof children === "function" ? children({ open: layer.open, close: layer.close }) : children })));
25
23
  }, Object.assign(Object.assign({}, useLayerProps), { onClickOutside: () => {
26
24
  if (props === null || props === void 0 ? void 0 : props.onClickOutside) {
27
25
  props.onClickOutside();
@@ -33,5 +31,5 @@ const useModal = (children, props) => {
33
31
  return layer;
34
32
  };
35
33
 
36
- module.exports = useModal;
34
+ export { useModal as default };
37
35
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../../src/useModal/index.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport useLayer, { UseLayerProps } from \"../useLayer\";\r\nimport { Tag, TagProps } from '@xanui/core'\r\n\r\nexport type UseModalProps = Omit<UseLayerProps, \"slotProps\"> & {\r\n size?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"full\" | number;\r\n slotProps?: {\r\n layer?: UseLayerProps['slotProps'];\r\n root?: Omit<TagProps<'div'>, \"children\">\r\n }\r\n}\r\n\r\nexport type UseModalChildren = React.ReactElement | ((props: UseModalReturn) => React.ReactElement)\r\n\r\nexport type UseModalReturn = {\r\n open: () => void;\r\n close: () => void;\r\n}\r\n\r\nconst useModal = (children: UseModalChildren, props?: UseModalProps) => {\r\n\r\n let sizes: any = {\r\n xs: 420,\r\n sm: 760,\r\n md: 990,\r\n lg: 1120,\r\n xl: 1300,\r\n full: \"100%\"\r\n }\r\n let { size, slotProps, ...useLayerProps } = props || {}\r\n size = size ?? \"xs\"\r\n slotProps = slotProps || {} as any\r\n const root: any = slotProps?.root || {}\r\n\r\n const layer = useLayer(() => {\r\n return (\r\n <Tag\r\n {...root}\r\n sxr={{\r\n maxWidth: sizes[size as any] || size,\r\n width: \"100%\",\r\n radius: 2,\r\n bgcolor: \"background.primary\",\r\n shadow: 15,\r\n ...root?.sx\r\n }}\r\n baseClass='modal'\r\n >\r\n {typeof children === \"function\" ? children({ open: layer.open, close: layer.close }) : children}\r\n </Tag>\r\n )\r\n }, {\r\n ...useLayerProps,\r\n onClickOutside: () => {\r\n if (props?.onClickOutside) {\r\n props.onClickOutside()\r\n } else {\r\n layer.close()\r\n }\r\n },\r\n slotProps: {\r\n ...slotProps?.layer,\r\n clickOutside: {\r\n maxWidth: sizes[size as any] || size,\r\n width: \"100%\",\r\n ...slotProps?.layer?.clickOutside,\r\n },\r\n root: {\r\n display: \"flex\",\r\n alignItems: 'center',\r\n justifyContent: \"center\",\r\n ...slotProps?.layer?.root,\r\n }\r\n }\r\n })\r\n\r\n return layer\r\n}\r\n\r\nexport default useModal;"],"names":[],"mappings":";;;;;;;;AAoBA;;AAEG;AACG;AACA;AACA;AACA;AACA;AACA;;AAEH;;AAEA;AACA;AAEA;AACG;AAgBH;;;;;;;AAQG;AAiBH;AACH;;"}
1
+ {"version":3,"file":"index.js","sources":["../../src/useModal/index.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport useLayer, { UseLayerProps } from \"../useLayer\";\r\nimport { Tag, TagProps } from '@xanui/core'\r\n\r\nexport type UseModalProps = Omit<UseLayerProps, \"slotProps\"> & {\r\n size?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"full\" | number;\r\n slotProps?: {\r\n layer?: UseLayerProps['slotProps'];\r\n root?: Omit<TagProps<'div'>, \"children\">\r\n }\r\n}\r\n\r\nexport type UseModalChildren = React.ReactElement | ((props: UseModalReturn) => React.ReactElement)\r\n\r\nexport type UseModalReturn = {\r\n open: () => void;\r\n close: () => void;\r\n}\r\n\r\nconst useModal = (children: UseModalChildren, props?: UseModalProps) => {\r\n\r\n let sizes: any = {\r\n xs: 420,\r\n sm: 760,\r\n md: 990,\r\n lg: 1120,\r\n xl: 1300,\r\n full: \"100%\"\r\n }\r\n let { size, slotProps, ...useLayerProps } = props || {}\r\n size = size ?? \"xs\"\r\n slotProps = slotProps || {} as any\r\n const root: any = slotProps?.root || {}\r\n\r\n const layer = useLayer(() => {\r\n return (\r\n <Tag\r\n {...root}\r\n sxr={{\r\n maxWidth: sizes[size as any] || size,\r\n width: \"100%\",\r\n radius: 2,\r\n bgcolor: \"background.primary\",\r\n shadow: 15,\r\n ...root?.sx\r\n }}\r\n baseClass='modal'\r\n >\r\n {typeof children === \"function\" ? children({ open: layer.open, close: layer.close }) : children}\r\n </Tag>\r\n )\r\n }, {\r\n ...useLayerProps,\r\n onClickOutside: () => {\r\n if (props?.onClickOutside) {\r\n props.onClickOutside()\r\n } else {\r\n layer.close()\r\n }\r\n },\r\n slotProps: {\r\n ...slotProps?.layer,\r\n clickOutside: {\r\n maxWidth: sizes[size as any] || size,\r\n width: \"100%\",\r\n ...slotProps?.layer?.clickOutside,\r\n },\r\n root: {\r\n display: \"flex\",\r\n alignItems: 'center',\r\n justifyContent: \"center\",\r\n ...slotProps?.layer?.root,\r\n }\r\n }\r\n })\r\n\r\n return layer\r\n}\r\n\r\nexport default useModal;"],"names":[],"mappings":";;;;;;AAoBA;;AAEG;AACG;AACA;AACA;AACA;AACA;AACA;;AAEH;;AAEA;AACA;AAEA;AACG;AAgBH;;;;;;;AAQG;AAiBH;AACH;;"}