@xanui/ui 1.0.0

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 (320) hide show
  1. package/Accordion/index.d.ts +32 -0
  2. package/Accordion/index.js +82 -0
  3. package/Accordion/index.js.map +1 -0
  4. package/Accordion/index.mjs +82 -0
  5. package/Accordion/index.mjs.map +1 -0
  6. package/Alert/index.d.ts +41 -0
  7. package/Alert/index.js +137 -0
  8. package/Alert/index.js.map +1 -0
  9. package/Alert/index.mjs +137 -0
  10. package/Alert/index.mjs.map +1 -0
  11. package/Avatar/index.d.ts +10 -0
  12. package/Avatar/index.js +34 -0
  13. package/Avatar/index.js.map +1 -0
  14. package/Avatar/index.mjs +34 -0
  15. package/Avatar/index.mjs.map +1 -0
  16. package/Badge/index.d.ts +16 -0
  17. package/Badge/index.js +68 -0
  18. package/Badge/index.js.map +1 -0
  19. package/Badge/index.mjs +68 -0
  20. package/Badge/index.mjs.map +1 -0
  21. package/Box/index.d.ts +8 -0
  22. package/Box/index.js +4 -0
  23. package/Box/index.js.map +1 -0
  24. package/Box/index.mjs +4 -0
  25. package/Box/index.mjs.map +1 -0
  26. package/Button/index.d.ts +22 -0
  27. package/Button/index.js +77 -0
  28. package/Button/index.js.map +1 -0
  29. package/Button/index.mjs +77 -0
  30. package/Button/index.mjs.map +1 -0
  31. package/ButtonGroup/index.d.ts +14 -0
  32. package/ButtonGroup/index.js +47 -0
  33. package/ButtonGroup/index.js.map +1 -0
  34. package/ButtonGroup/index.mjs +47 -0
  35. package/ButtonGroup/index.mjs.map +1 -0
  36. package/Calendar/index.d.ts +14 -0
  37. package/Calendar/index.js +140 -0
  38. package/Calendar/index.js.map +1 -0
  39. package/Calendar/index.mjs +140 -0
  40. package/Calendar/index.mjs.map +1 -0
  41. package/CalendarInput/index.d.ts +18 -0
  42. package/CalendarInput/index.js +11 -0
  43. package/CalendarInput/index.js.map +1 -0
  44. package/CalendarInput/index.mjs +11 -0
  45. package/CalendarInput/index.mjs.map +1 -0
  46. package/Checkbox/index.d.ts +15 -0
  47. package/Checkbox/index.js +44 -0
  48. package/Checkbox/index.js.map +1 -0
  49. package/Checkbox/index.mjs +44 -0
  50. package/Checkbox/index.mjs.map +1 -0
  51. package/Chip/index.d.ts +17 -0
  52. package/Chip/index.js +59 -0
  53. package/Chip/index.js.map +1 -0
  54. package/Chip/index.mjs +59 -0
  55. package/Chip/index.mjs.map +1 -0
  56. package/CircleProgress/index.d.ts +20 -0
  57. package/CircleProgress/index.js +118 -0
  58. package/CircleProgress/index.js.map +1 -0
  59. package/CircleProgress/index.mjs +118 -0
  60. package/CircleProgress/index.mjs.map +1 -0
  61. package/ClickOutside/index.d.ts +10 -0
  62. package/ClickOutside/index.js +16 -0
  63. package/ClickOutside/index.js.map +1 -0
  64. package/ClickOutside/index.mjs +16 -0
  65. package/ClickOutside/index.mjs.map +1 -0
  66. package/Collaps/index.d.ts +8 -0
  67. package/Collaps/index.js +18 -0
  68. package/Collaps/index.js.map +1 -0
  69. package/Collaps/index.mjs +18 -0
  70. package/Collaps/index.mjs.map +1 -0
  71. package/Container/index.d.ts +10 -0
  72. package/Container/index.js +19 -0
  73. package/Container/index.js.map +1 -0
  74. package/Container/index.mjs +19 -0
  75. package/Container/index.mjs.map +1 -0
  76. package/Datatable/FilterBox.js +19 -0
  77. package/Datatable/FilterBox.js.map +1 -0
  78. package/Datatable/FilterBox.mjs +19 -0
  79. package/Datatable/FilterBox.mjs.map +1 -0
  80. package/Datatable/Row.js +41 -0
  81. package/Datatable/Row.js.map +1 -0
  82. package/Datatable/Row.mjs +41 -0
  83. package/Datatable/Row.mjs.map +1 -0
  84. package/Datatable/SelectedBox.js +11 -0
  85. package/Datatable/SelectedBox.js.map +1 -0
  86. package/Datatable/SelectedBox.mjs +11 -0
  87. package/Datatable/SelectedBox.mjs.map +1 -0
  88. package/Datatable/Table.js +11 -0
  89. package/Datatable/Table.js.map +1 -0
  90. package/Datatable/Table.mjs +11 -0
  91. package/Datatable/Table.mjs.map +1 -0
  92. package/Datatable/TableHead.js +35 -0
  93. package/Datatable/TableHead.js.map +1 -0
  94. package/Datatable/TableHead.mjs +35 -0
  95. package/Datatable/TableHead.mjs.map +1 -0
  96. package/Datatable/index.d.ts +71 -0
  97. package/Datatable/index.js +35 -0
  98. package/Datatable/index.js.map +1 -0
  99. package/Datatable/index.mjs +35 -0
  100. package/Datatable/index.mjs.map +1 -0
  101. package/Divider/index.d.ts +12 -0
  102. package/Divider/index.js +21 -0
  103. package/Divider/index.js.map +1 -0
  104. package/Divider/index.mjs +21 -0
  105. package/Divider/index.mjs.map +1 -0
  106. package/Drawer/index.d.ts +25 -0
  107. package/Drawer/index.js +57 -0
  108. package/Drawer/index.js.map +1 -0
  109. package/Drawer/index.mjs +57 -0
  110. package/Drawer/index.mjs.map +1 -0
  111. package/Form/index.d.ts +8 -0
  112. package/Form/index.js +34 -0
  113. package/Form/index.js.map +1 -0
  114. package/Form/index.mjs +34 -0
  115. package/Form/index.mjs.map +1 -0
  116. package/GridContainer/index.d.ts +8 -0
  117. package/GridContainer/index.js +9 -0
  118. package/GridContainer/index.js.map +1 -0
  119. package/GridContainer/index.mjs +9 -0
  120. package/GridContainer/index.mjs.map +1 -0
  121. package/GridItem/index.d.ts +14 -0
  122. package/GridItem/index.js +10 -0
  123. package/GridItem/index.js.map +1 -0
  124. package/GridItem/index.mjs +10 -0
  125. package/GridItem/index.mjs.map +1 -0
  126. package/IconButton/index.d.ts +13 -0
  127. package/IconButton/index.js +48 -0
  128. package/IconButton/index.js.map +1 -0
  129. package/IconButton/index.mjs +48 -0
  130. package/IconButton/index.mjs.map +1 -0
  131. package/Image/index.d.ts +10 -0
  132. package/Image/index.js +16 -0
  133. package/Image/index.js.map +1 -0
  134. package/Image/index.mjs +16 -0
  135. package/Image/index.mjs.map +1 -0
  136. package/Input/index.d.ts +26 -0
  137. package/Input/index.js +149 -0
  138. package/Input/index.js.map +1 -0
  139. package/Input/index.mjs +149 -0
  140. package/Input/index.mjs.map +1 -0
  141. package/Label/index.d.ts +8 -0
  142. package/Label/index.js +10 -0
  143. package/Label/index.js.map +1 -0
  144. package/Label/index.mjs +10 -0
  145. package/Label/index.mjs.map +1 -0
  146. package/Layer/index.d.ts +34 -0
  147. package/Layer/index.js +73 -0
  148. package/Layer/index.js.map +1 -0
  149. package/Layer/index.mjs +73 -0
  150. package/Layer/index.mjs.map +1 -0
  151. package/LineProgress/index.d.ts +15 -0
  152. package/LineProgress/index.js +48 -0
  153. package/LineProgress/index.js.map +1 -0
  154. package/LineProgress/index.mjs +48 -0
  155. package/LineProgress/index.mjs.map +1 -0
  156. package/List/index.d.ts +13 -0
  157. package/List/index.js +51 -0
  158. package/List/index.js.map +1 -0
  159. package/List/index.mjs +51 -0
  160. package/List/index.mjs.map +1 -0
  161. package/ListItem/index.d.ts +13 -0
  162. package/ListItem/index.js +26 -0
  163. package/ListItem/index.js.map +1 -0
  164. package/ListItem/index.mjs +26 -0
  165. package/ListItem/index.mjs.map +1 -0
  166. package/LoadingBox/index.d.ts +15 -0
  167. package/LoadingBox/index.js +22 -0
  168. package/LoadingBox/index.js.map +1 -0
  169. package/LoadingBox/index.mjs +22 -0
  170. package/LoadingBox/index.mjs.map +1 -0
  171. package/Menu/getOrigin.js +42 -0
  172. package/Menu/getOrigin.js.map +1 -0
  173. package/Menu/getOrigin.mjs +42 -0
  174. package/Menu/getOrigin.mjs.map +1 -0
  175. package/Menu/index.d.ts +22 -0
  176. package/Menu/index.js +47 -0
  177. package/Menu/index.js.map +1 -0
  178. package/Menu/index.mjs +47 -0
  179. package/Menu/index.mjs.map +1 -0
  180. package/Menu/placedMenu.d.ts +5 -0
  181. package/Menu/placedMenu.js +95 -0
  182. package/Menu/placedMenu.js.map +1 -0
  183. package/Menu/placedMenu.mjs +95 -0
  184. package/Menu/placedMenu.mjs.map +1 -0
  185. package/Modal/index.d.ts +19 -0
  186. package/Modal/index.js +38 -0
  187. package/Modal/index.js.map +1 -0
  188. package/Modal/index.mjs +38 -0
  189. package/Modal/index.mjs.map +1 -0
  190. package/NoSSR/index.d.ts +3 -0
  191. package/NoSSR/index.js +7 -0
  192. package/NoSSR/index.js.map +1 -0
  193. package/NoSSR/index.mjs +7 -0
  194. package/NoSSR/index.mjs.map +1 -0
  195. package/Option/index.d.ts +10 -0
  196. package/Option/index.js +4 -0
  197. package/Option/index.js.map +1 -0
  198. package/Option/index.mjs +4 -0
  199. package/Option/index.mjs.map +1 -0
  200. package/Paper/index.d.ts +8 -0
  201. package/Paper/index.js +5 -0
  202. package/Paper/index.js.map +1 -0
  203. package/Paper/index.mjs +5 -0
  204. package/Paper/index.mjs.map +1 -0
  205. package/Portal/index.d.ts +11 -0
  206. package/Portal/index.js +26 -0
  207. package/Portal/index.js.map +1 -0
  208. package/Portal/index.mjs +26 -0
  209. package/Portal/index.mjs.map +1 -0
  210. package/Radio/index.d.ts +6 -0
  211. package/Radio/index.js +4 -0
  212. package/Radio/index.js.map +1 -0
  213. package/Radio/index.mjs +4 -0
  214. package/Radio/index.mjs.map +1 -0
  215. package/Scrollbar/index.d.ts +14 -0
  216. package/Scrollbar/index.js +65 -0
  217. package/Scrollbar/index.js.map +1 -0
  218. package/Scrollbar/index.mjs +65 -0
  219. package/Scrollbar/index.mjs.map +1 -0
  220. package/Select/index.d.ts +24 -0
  221. package/Select/index.js +35 -0
  222. package/Select/index.js.map +1 -0
  223. package/Select/index.mjs +35 -0
  224. package/Select/index.mjs.map +1 -0
  225. package/Stack/index.d.ts +8 -0
  226. package/Stack/index.js +7 -0
  227. package/Stack/index.js.map +1 -0
  228. package/Stack/index.mjs +7 -0
  229. package/Stack/index.mjs.map +1 -0
  230. package/Switch/index.d.ts +19 -0
  231. package/Switch/index.js +68 -0
  232. package/Switch/index.js.map +1 -0
  233. package/Switch/index.mjs +68 -0
  234. package/Switch/index.mjs.map +1 -0
  235. package/Tab/index.d.ts +11 -0
  236. package/Tab/index.js +5 -0
  237. package/Tab/index.js.map +1 -0
  238. package/Tab/index.mjs +5 -0
  239. package/Tab/index.mjs.map +1 -0
  240. package/Table/index.d.ts +14 -0
  241. package/Table/index.js +77 -0
  242. package/Table/index.js.map +1 -0
  243. package/Table/index.mjs +77 -0
  244. package/Table/index.mjs.map +1 -0
  245. package/TableBody/index.d.ts +8 -0
  246. package/TableBody/index.js +4 -0
  247. package/TableBody/index.js.map +1 -0
  248. package/TableBody/index.mjs +4 -0
  249. package/TableBody/index.mjs.map +1 -0
  250. package/TableCell/index.d.ts +10 -0
  251. package/TableCell/index.js +4 -0
  252. package/TableCell/index.js.map +1 -0
  253. package/TableCell/index.mjs +4 -0
  254. package/TableCell/index.mjs.map +1 -0
  255. package/TableFooter/index.d.ts +8 -0
  256. package/TableFooter/index.js +4 -0
  257. package/TableFooter/index.js.map +1 -0
  258. package/TableFooter/index.mjs +4 -0
  259. package/TableFooter/index.mjs.map +1 -0
  260. package/TableHead/index.d.ts +8 -0
  261. package/TableHead/index.js +4 -0
  262. package/TableHead/index.js.map +1 -0
  263. package/TableHead/index.mjs +4 -0
  264. package/TableHead/index.mjs.map +1 -0
  265. package/TablePagination/index.d.ts +26 -0
  266. package/TablePagination/index.js +51 -0
  267. package/TablePagination/index.js.map +1 -0
  268. package/TablePagination/index.mjs +51 -0
  269. package/TablePagination/index.mjs.map +1 -0
  270. package/TableRow/index.d.ts +8 -0
  271. package/TableRow/index.js +4 -0
  272. package/TableRow/index.js.map +1 -0
  273. package/TableRow/index.mjs +4 -0
  274. package/TableRow/index.mjs.map +1 -0
  275. package/Tabs/index.d.ts +24 -0
  276. package/Tabs/index.js +188 -0
  277. package/Tabs/index.js.map +1 -0
  278. package/Tabs/index.mjs +188 -0
  279. package/Tabs/index.mjs.map +1 -0
  280. package/Text/index.d.ts +10 -0
  281. package/Text/index.js +10 -0
  282. package/Text/index.js.map +1 -0
  283. package/Text/index.mjs +10 -0
  284. package/Text/index.mjs.map +1 -0
  285. package/ThemeProvider/RenderRoot.js +22 -0
  286. package/ThemeProvider/RenderRoot.js.map +1 -0
  287. package/ThemeProvider/RenderRoot.mjs +22 -0
  288. package/ThemeProvider/RenderRoot.mjs.map +1 -0
  289. package/ThemeProvider/index.d.ts +8 -0
  290. package/ThemeProvider/index.js +4 -0
  291. package/ThemeProvider/index.js.map +1 -0
  292. package/ThemeProvider/index.mjs +4 -0
  293. package/ThemeProvider/index.mjs.map +1 -0
  294. package/Toast/index.d.ts +20 -0
  295. package/Toast/index.js +145 -0
  296. package/Toast/index.js.map +1 -0
  297. package/Toast/index.mjs +145 -0
  298. package/Toast/index.mjs.map +1 -0
  299. package/Tooltip/index.d.ts +16 -0
  300. package/Tooltip/index.js +29 -0
  301. package/Tooltip/index.js.map +1 -0
  302. package/Tooltip/index.mjs +29 -0
  303. package/Tooltip/index.mjs.map +1 -0
  304. package/ViewBox/index.d.ts +16 -0
  305. package/ViewBox/index.js +21 -0
  306. package/ViewBox/index.js.map +1 -0
  307. package/ViewBox/index.mjs +21 -0
  308. package/ViewBox/index.mjs.map +1 -0
  309. package/index.d.ts +56 -0
  310. package/index.js +1 -0
  311. package/index.js.map +1 -0
  312. package/index.mjs +1 -0
  313. package/index.mjs.map +1 -0
  314. package/package.json +41 -0
  315. package/readme.md +0 -0
  316. package/useCorner/index.d.ts +5 -0
  317. package/useCorner/index.js +17 -0
  318. package/useCorner/index.js.map +1 -0
  319. package/useCorner/index.mjs +17 -0
  320. package/useCorner/index.mjs.map +1 -0
@@ -0,0 +1,65 @@
1
+ import {__rest}from'tslib';import {jsx}from'react/jsx-runtime';import {useInterface,useBreakpointProps,Tag}from'@xanui/core';import React,{useRef,useMemo}from'react';const Scrollbar = React.forwardRef((_a, ref) => {
2
+ var _b, _c, _d;
3
+ var { children } = _a, rest = __rest(_a, ["children"]);
4
+ let [_e] = useInterface("Scrollbar", rest, {}), { thumbSize, thumbColor, trackColor, onScroll, onScrollEnd } = _e, props = __rest(_e, ["thumbSize", "thumbColor", "trackColor", "onScroll", "onScrollEnd"]);
5
+ const _p = {};
6
+ if (thumbSize)
7
+ _p.thumbSize = thumbSize;
8
+ if (thumbColor)
9
+ _p.thumbColor = thumbColor;
10
+ if (trackColor)
11
+ _p.trackColor = trackColor;
12
+ const p = useBreakpointProps(_p);
13
+ thumbSize = (_b = p.thumbSize) !== null && _b !== void 0 ? _b : 10;
14
+ thumbColor = (_c = p.thumbColor) !== null && _c !== void 0 ? _c : "var(--color-divider)";
15
+ trackColor = (_d = p.trackColor) !== null && _d !== void 0 ? _d : "var(--color-background-secondary)";
16
+ ref = ref || useRef(null);
17
+ useMemo(() => {
18
+ ref.scrollTo = (pos) => {
19
+ ref.current.scrollTo({ top: pos, behavior: 'smooth' });
20
+ };
21
+ ref.scrollToBottom = () => {
22
+ ref.scrollTo(ref.current.scrollHeight);
23
+ };
24
+ ref.scrollToTop = () => {
25
+ ref.scrollTo(0);
26
+ };
27
+ }, []);
28
+ if (onScroll || onScrollEnd) {
29
+ props.onScroll = (e) => {
30
+ if (onScrollEnd) {
31
+ const ele = e.target;
32
+ const scrollTop = ele.scrollTop;
33
+ const scrollHeight = ele.scrollHeight;
34
+ const clientHeight = ele.clientHeight;
35
+ const isScrollDown = scrollHeight - scrollTop <= clientHeight + 1;
36
+ isScrollDown && onScrollEnd(e);
37
+ }
38
+ onScroll && onScroll(e);
39
+ };
40
+ }
41
+ return (jsx(Tag, Object.assign({}, props, { ref: ref, baseClass: 'scrollbar', sxr: {
42
+ height: "100%",
43
+ width: "100%",
44
+ overflow: "auto",
45
+ // scrollbarWidth: "thin", // Firefox specific
46
+ // scrollbarColor: `${thumbColor} ${trackColor}`, //"#888 #f4f4f4", // Thumb and track colors for Firefox
47
+ // msOverflowStyle: "scrollbar", // Internet Explorer
48
+ "&::-webkit-scrollbar": {
49
+ width: thumbSize,
50
+ height: thumbSize, // Height of the horizontal scrollbar
51
+ },
52
+ "&::-webkit-scrollbar-thumb": {
53
+ backgroundColor: thumbColor,
54
+ borderRadius: "5px",
55
+ border: "2px solid #f4f4f4", // Space around the thumb
56
+ },
57
+ "&::-webkit-scrollbar-thumb:hover": {
58
+ backgroundColor: thumbColor, // Thumb color on hover
59
+ },
60
+ "&::-webkit-scrollbar-track": {
61
+ backgroundColor: trackColor,
62
+ borderRadius: "5px", // Rounded corners
63
+ },
64
+ } }, { children: children })));
65
+ });export{Scrollbar as default};//# sourceMappingURL=index.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.mjs","sources":["../../src/Scrollbar/index.tsx"],"sourcesContent":["\nimport { Tag, TagComponentType, TagProps, useBreakpointProps, useInterface, useBreakpointPropsType } from '@xanui/core';\n\nimport React, { ReactNode, UIEvent, useMemo, useRef } from 'react'\n\nexport type ScrollbarProps<T extends TagComponentType = \"div\"> = TagProps<T> & {\n children: ReactNode;\n thumbSize?: useBreakpointPropsType<number>;\n thumbColor?: useBreakpointPropsType<string>;\n trackColor?: useBreakpointPropsType<string>;\n onScrollEnd?: (e: UIEvent<HTMLDivElement>) => void;\n}\n\nconst Scrollbar = React.forwardRef(<T extends TagComponentType = \"div\">({ children, ...rest }: ScrollbarProps<T>, ref: React.Ref<any>) => {\n let [{ thumbSize, thumbColor, trackColor, onScroll, onScrollEnd, ...props }] = useInterface<any>(\"Scrollbar\", rest, {})\n const _p: any = {}\n if (thumbSize) _p.thumbSize = thumbSize\n if (thumbColor) _p.thumbColor = thumbColor\n if (trackColor) _p.trackColor = trackColor\n const p: any = useBreakpointProps(_p)\n\n thumbSize = p.thumbSize ?? 10\n thumbColor = p.thumbColor ?? \"var(--color-divider)\"\n trackColor = p.trackColor ?? \"var(--color-background-secondary)\"\n\n ref = ref || useRef(null)\n\n useMemo(() => {\n ((ref as any)).scrollTo = (pos: number) => {\n (ref as any).current.scrollTo({ top: pos, behavior: 'smooth' })\n }\n (ref as any).scrollToBottom = () => {\n (ref as any).scrollTo((ref as any).current.scrollHeight)\n }\n (ref as any).scrollToTop = () => {\n (ref as any).scrollTo(0)\n }\n }, [])\n\n if (onScroll || onScrollEnd) {\n props.onScroll = (e: UIEvent<HTMLDivElement>) => {\n if (onScrollEnd) {\n const ele: any = e.target\n const scrollTop = ele.scrollTop\n const scrollHeight = ele.scrollHeight\n const clientHeight = ele.clientHeight\n const isScrollDown = scrollHeight - scrollTop <= clientHeight + 1\n isScrollDown && onScrollEnd(e)\n }\n onScroll && onScroll(e)\n }\n }\n\n return (\n <Tag\n {...props}\n ref={ref}\n baseClass='scrollbar'\n sxr={{\n height: \"100%\",\n width: \"100%\",\n overflow: \"auto\",\n // scrollbarWidth: \"thin\", // Firefox specific\n // scrollbarColor: `${thumbColor} ${trackColor}`, //\"#888 #f4f4f4\", // Thumb and track colors for Firefox\n // msOverflowStyle: \"scrollbar\", // Internet Explorer\n \"&::-webkit-scrollbar\": {\n width: thumbSize, // Width of the vertical scrollbar\n height: thumbSize, // Height of the horizontal scrollbar\n },\n \"&::-webkit-scrollbar-thumb\": {\n backgroundColor: thumbColor, // Color of the scroll thumb\n borderRadius: \"5px\", // Rounded corners\n border: \"2px solid #f4f4f4\", // Space around the thumb\n },\n \"&::-webkit-scrollbar-thumb:hover\": {\n backgroundColor: thumbColor, // Thumb color on hover\n },\n \"&::-webkit-scrollbar-track\": {\n backgroundColor: trackColor, // Background color of the scrollbar track\n borderRadius: \"5px\", // Rounded corners\n },\n }}\n >\n {children}\n </Tag>\n )\n})\n\nexport default Scrollbar "],"names":["_jsx"],"mappings":"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"}
@@ -0,0 +1,24 @@
1
+ import React, { ReactElement } from 'react';
2
+ import { InputProps } from '../Input/index.js';
3
+ import { ListProps } from '../List/index.js';
4
+ import { MenuProps } from '../Menu/index.js';
5
+ import { OptionProps } from '../Option/index.js';
6
+ import { useBreakpointPropsType, ColorTemplateColors, ColorTemplateType } from '@xanui/core';
7
+
8
+ type SelectProps = {
9
+ value?: string | number;
10
+ onChange?: (value: string | number) => void;
11
+ children: ReactElement<OptionProps> | ReactElement<OptionProps>[];
12
+ placeholder?: useBreakpointPropsType<string>;
13
+ color?: useBreakpointPropsType<ColorTemplateColors>;
14
+ variant?: useBreakpointPropsType<ColorTemplateType>;
15
+ slotProps?: {
16
+ menu?: Omit<MenuProps, 'children' | 'target'>;
17
+ input?: Omit<InputProps, "onChange" | "value">;
18
+ list?: Omit<ListProps, "children">;
19
+ };
20
+ };
21
+ declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<any>>;
22
+
23
+ export { Select as default };
24
+ export type { SelectProps };
@@ -0,0 +1,35 @@
1
+ 'use strict';Object.defineProperty(exports,'__esModule',{value:true});var tslib=require('tslib'),jsxRuntime=require('react/jsx-runtime'),React=require('react'),index=require('../Input/index.js'),index$3=require('../List/index.js'),index$2=require('../Menu/index.js'),index$1=require('../Stack/index.js'),DownIcon=require('@xanui/icons/KeyboardArrowDown'),UpIcon=require('@xanui/icons/KeyboardArrowUp'),core=require('@xanui/core');const Select = React.forwardRef((_a, ref) => {
2
+ var _b, _c, _d, _e;
3
+ var { onChange, value, children } = _a, props = tslib.__rest(_a, ["onChange", "value", "children"]);
4
+ let [{ slotProps, color, variant, placeholder }] = core.useInterface("Select", props, {});
5
+ color !== null && color !== void 0 ? color : (color = "brand");
6
+ variant !== null && variant !== void 0 ? variant : (variant = "fill");
7
+ const [target, setTarget] = React.useState();
8
+ const conRef = React.useRef(null);
9
+ const { childs, selectedProps } = React.useMemo(() => {
10
+ let sProps = {};
11
+ const c = React.Children.map(children, (child) => {
12
+ let selected = child.props.value === value;
13
+ if (selected)
14
+ sProps = child.props;
15
+ return React.cloneElement(child, {
16
+ value: undefined,
17
+ selected,
18
+ onClick: () => {
19
+ setTarget(null);
20
+ onChange && onChange(child.props.value);
21
+ }
22
+ });
23
+ });
24
+ return {
25
+ childs: c,
26
+ selectedProps: sProps
27
+ };
28
+ }, [children, value]);
29
+ const toggleMenu = () => setTarget(target ? null : conRef.current);
30
+ return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(index.default, Object.assign({ color: color, variant: variant === "alpha" ? "fill" : variant, endIcon: jsxRuntime.jsxs(index$1.default, Object.assign({ flexDirection: "row", component: "span" }, { children: [" ", (target ? jsxRuntime.jsx(UpIcon, {}) : jsxRuntime.jsx(DownIcon, {}))] })), readOnly: true, value: typeof selectedProps.children === 'string' ? selectedProps.children : value, cursor: "pointer", userSelect: "none", startIcon: selectedProps.startIcon, focused: !!target, placeholder: placeholder }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.input, { slotProps: {
31
+ container: Object.assign(Object.assign({ cursor: "pointer", userSelect: "none" }, (((_c = (_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.input) === null || _b === void 0 ? void 0 : _b.slotProps) === null || _c === void 0 ? void 0 : _c.container) || {})), { onClick: toggleMenu })
32
+ }, containerRef: conRef, ref: ref })), jsxRuntime.jsx(index$2.default, Object.assign({ target: target, placement: "bottom" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.menu, { slotProps: {
33
+ content: Object.assign({ mt: .5, width: conRef && ((_d = conRef === null || conRef === void 0 ? void 0 : conRef.current) === null || _d === void 0 ? void 0 : _d.clientWidth) }, (_e = slotProps === null || slotProps === void 0 ? void 0 : slotProps.menu) === null || _e === void 0 ? void 0 : _e.content)
34
+ }, onClickOutside: toggleMenu }, { children: jsxRuntime.jsx(index$3.default, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.list, { color: color, variant: variant }, { children: childs })) }))] }));
35
+ });exports.default=Select;//# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sources":["../../src/Select/index.tsx"],"sourcesContent":["\nimport React, { ReactElement, useMemo, cloneElement, useState, Children, useRef } from 'react'\nimport Input, { InputProps } from '../Input'\nimport List, { ListProps } from '../List'\nimport Menu, { MenuProps } from '../Menu'\nimport Stack from '../Stack'\nimport { OptionProps } from '../Option'\nimport DownIcon from '@xanui/icons/KeyboardArrowDown';\nimport UpIcon from '@xanui/icons/KeyboardArrowUp';\nimport { ColorTemplateColors, ColorTemplateType, useInterface, useBreakpointPropsType } from '@xanui/core'\n\n\nexport type SelectProps = {\n value?: string | number;\n onChange?: (value: string | number) => void;\n children: ReactElement<OptionProps> | ReactElement<OptionProps>[];\n placeholder?: useBreakpointPropsType<string>;\n color?: useBreakpointPropsType<ColorTemplateColors>;\n variant?: useBreakpointPropsType<ColorTemplateType>;\n slotProps?: {\n menu?: Omit<MenuProps, 'children' | 'target'>;\n input?: Omit<InputProps, \"onChange\" | \"value\">;\n list?: Omit<ListProps, \"children\">\n }\n}\n\nconst Select = React.forwardRef(({ onChange, value, children, ...props }: SelectProps, ref: React.Ref<any>) => {\n let [{ slotProps, color, variant, placeholder }] = useInterface<any>(\"Select\", props, {})\n color ??= \"brand\"\n variant ??= \"fill\"\n const [target, setTarget] = useState<any>()\n const conRef = useRef(null)\n const { childs, selectedProps } = useMemo(() => {\n let sProps: any = {}\n const c = Children.map(children, (child: any) => {\n let selected = child.props.value === value\n if (selected) sProps = child.props\n return cloneElement(child, {\n value: undefined,\n selected,\n onClick: () => {\n setTarget(null)\n onChange && onChange(child.props.value)\n }\n })\n })\n return {\n childs: c,\n selectedProps: sProps as OptionProps\n }\n }, [children, value])\n\n const toggleMenu = () => setTarget(target ? null : conRef.current)\n\n return (\n <>\n <Input\n color={color}\n variant={variant === \"alpha\" ? \"fill\" : variant}\n endIcon={<Stack flexDirection=\"row\" component=\"span\" > {(target ? <UpIcon /> : <DownIcon />)}</Stack>}\n readOnly\n value={typeof selectedProps.children === 'string' ? selectedProps.children : value}\n cursor=\"pointer\"\n userSelect=\"none\"\n startIcon={selectedProps.startIcon}\n focused={!!target}\n placeholder={placeholder}\n {...slotProps?.input}\n slotProps={{\n container: {\n cursor: \"pointer\",\n userSelect: \"none\",\n ...(slotProps?.input?.slotProps?.container || {}),\n onClick: toggleMenu,\n }\n }}\n containerRef={conRef}\n ref={ref}\n />\n <Menu\n target={target}\n placement=\"bottom\"\n {...slotProps?.menu}\n slotProps={{\n content: {\n mt: .5,\n width: conRef && (conRef?.current as any)?.clientWidth,\n ...slotProps?.menu?.content\n }\n }}\n onClickOutside={toggleMenu}\n >\n <List\n {...slotProps?.list}\n color={color}\n variant={variant}\n >\n {childs}\n </List>\n </Menu>\n </>\n )\n})\n\nexport default Select"],"names":["__rest","useInterface","useState","useRef","useMemo","Children","cloneElement","_jsxs","_jsx","Input","Stack","Menu","List"],"mappings":"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"}
@@ -0,0 +1,35 @@
1
+ import {__rest}from'tslib';import {jsxs,Fragment,jsx}from'react/jsx-runtime';import React,{useState,useRef,useMemo,Children,cloneElement}from'react';import Input from'../Input/index.mjs';import List from'../List/index.mjs';import Menu from'../Menu/index.mjs';import Stack from'../Stack/index.mjs';import DownIcon from'@xanui/icons/KeyboardArrowDown';import UpIcon from'@xanui/icons/KeyboardArrowUp';import {useInterface}from'@xanui/core';const Select = React.forwardRef((_a, ref) => {
2
+ var _b, _c, _d, _e;
3
+ var { onChange, value, children } = _a, props = __rest(_a, ["onChange", "value", "children"]);
4
+ let [{ slotProps, color, variant, placeholder }] = useInterface("Select", props, {});
5
+ color !== null && color !== void 0 ? color : (color = "brand");
6
+ variant !== null && variant !== void 0 ? variant : (variant = "fill");
7
+ const [target, setTarget] = useState();
8
+ const conRef = useRef(null);
9
+ const { childs, selectedProps } = useMemo(() => {
10
+ let sProps = {};
11
+ const c = Children.map(children, (child) => {
12
+ let selected = child.props.value === value;
13
+ if (selected)
14
+ sProps = child.props;
15
+ return cloneElement(child, {
16
+ value: undefined,
17
+ selected,
18
+ onClick: () => {
19
+ setTarget(null);
20
+ onChange && onChange(child.props.value);
21
+ }
22
+ });
23
+ });
24
+ return {
25
+ childs: c,
26
+ selectedProps: sProps
27
+ };
28
+ }, [children, value]);
29
+ const toggleMenu = () => setTarget(target ? null : conRef.current);
30
+ return (jsxs(Fragment, { children: [jsx(Input, Object.assign({ color: color, variant: variant === "alpha" ? "fill" : variant, endIcon: jsxs(Stack, Object.assign({ flexDirection: "row", component: "span" }, { children: [" ", (target ? jsx(UpIcon, {}) : jsx(DownIcon, {}))] })), readOnly: true, value: typeof selectedProps.children === 'string' ? selectedProps.children : value, cursor: "pointer", userSelect: "none", startIcon: selectedProps.startIcon, focused: !!target, placeholder: placeholder }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.input, { slotProps: {
31
+ container: Object.assign(Object.assign({ cursor: "pointer", userSelect: "none" }, (((_c = (_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.input) === null || _b === void 0 ? void 0 : _b.slotProps) === null || _c === void 0 ? void 0 : _c.container) || {})), { onClick: toggleMenu })
32
+ }, containerRef: conRef, ref: ref })), jsx(Menu, Object.assign({ target: target, placement: "bottom" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.menu, { slotProps: {
33
+ content: Object.assign({ mt: .5, width: conRef && ((_d = conRef === null || conRef === void 0 ? void 0 : conRef.current) === null || _d === void 0 ? void 0 : _d.clientWidth) }, (_e = slotProps === null || slotProps === void 0 ? void 0 : slotProps.menu) === null || _e === void 0 ? void 0 : _e.content)
34
+ }, onClickOutside: toggleMenu }, { children: jsx(List, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.list, { color: color, variant: variant }, { children: childs })) }))] }));
35
+ });export{Select as default};//# sourceMappingURL=index.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.mjs","sources":["../../src/Select/index.tsx"],"sourcesContent":["\nimport React, { ReactElement, useMemo, cloneElement, useState, Children, useRef } from 'react'\nimport Input, { InputProps } from '../Input'\nimport List, { ListProps } from '../List'\nimport Menu, { MenuProps } from '../Menu'\nimport Stack from '../Stack'\nimport { OptionProps } from '../Option'\nimport DownIcon from '@xanui/icons/KeyboardArrowDown';\nimport UpIcon from '@xanui/icons/KeyboardArrowUp';\nimport { ColorTemplateColors, ColorTemplateType, useInterface, useBreakpointPropsType } from '@xanui/core'\n\n\nexport type SelectProps = {\n value?: string | number;\n onChange?: (value: string | number) => void;\n children: ReactElement<OptionProps> | ReactElement<OptionProps>[];\n placeholder?: useBreakpointPropsType<string>;\n color?: useBreakpointPropsType<ColorTemplateColors>;\n variant?: useBreakpointPropsType<ColorTemplateType>;\n slotProps?: {\n menu?: Omit<MenuProps, 'children' | 'target'>;\n input?: Omit<InputProps, \"onChange\" | \"value\">;\n list?: Omit<ListProps, \"children\">\n }\n}\n\nconst Select = React.forwardRef(({ onChange, value, children, ...props }: SelectProps, ref: React.Ref<any>) => {\n let [{ slotProps, color, variant, placeholder }] = useInterface<any>(\"Select\", props, {})\n color ??= \"brand\"\n variant ??= \"fill\"\n const [target, setTarget] = useState<any>()\n const conRef = useRef(null)\n const { childs, selectedProps } = useMemo(() => {\n let sProps: any = {}\n const c = Children.map(children, (child: any) => {\n let selected = child.props.value === value\n if (selected) sProps = child.props\n return cloneElement(child, {\n value: undefined,\n selected,\n onClick: () => {\n setTarget(null)\n onChange && onChange(child.props.value)\n }\n })\n })\n return {\n childs: c,\n selectedProps: sProps as OptionProps\n }\n }, [children, value])\n\n const toggleMenu = () => setTarget(target ? null : conRef.current)\n\n return (\n <>\n <Input\n color={color}\n variant={variant === \"alpha\" ? \"fill\" : variant}\n endIcon={<Stack flexDirection=\"row\" component=\"span\" > {(target ? <UpIcon /> : <DownIcon />)}</Stack>}\n readOnly\n value={typeof selectedProps.children === 'string' ? selectedProps.children : value}\n cursor=\"pointer\"\n userSelect=\"none\"\n startIcon={selectedProps.startIcon}\n focused={!!target}\n placeholder={placeholder}\n {...slotProps?.input}\n slotProps={{\n container: {\n cursor: \"pointer\",\n userSelect: \"none\",\n ...(slotProps?.input?.slotProps?.container || {}),\n onClick: toggleMenu,\n }\n }}\n containerRef={conRef}\n ref={ref}\n />\n <Menu\n target={target}\n placement=\"bottom\"\n {...slotProps?.menu}\n slotProps={{\n content: {\n mt: .5,\n width: conRef && (conRef?.current as any)?.clientWidth,\n ...slotProps?.menu?.content\n }\n }}\n onClickOutside={toggleMenu}\n >\n <List\n {...slotProps?.list}\n color={color}\n variant={variant}\n >\n {childs}\n </List>\n </Menu>\n </>\n )\n})\n\nexport default Select"],"names":["_jsxs","_jsx"],"mappings":"sbA0BA,MAAM,MAAM,GAAG,KAAK,CAAC,UAAU,CAAC,CAAC,EAAoD,EAAE,GAAmB,KAAI;;QAA7E,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,OAAyB,EAApB,KAAK,GAAA,MAAA,CAAA,EAAA,EAArC,CAAA,UAAA,EAAA,OAAA,EAAA,UAAA,CAAuC,CAAF;IAClE,IAAI,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE,WAAW,EAAE,CAAC,GAAG,YAAY,CAAM,QAAQ,EAAE,KAAK,EAAE,EAAE,CAAC;IACzF,KAAK,KAAA,IAAA,IAAL,KAAK,KAAA,MAAA,GAAL,KAAK,IAAL,KAAK,GAAK,OAAO,CAAA;IACjB,OAAO,KAAA,IAAA,IAAP,OAAO,KAAA,MAAA,GAAP,OAAO,IAAP,OAAO,GAAK,MAAM,CAAA;IAClB,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,EAAO;AAC3C,IAAA,MAAM,MAAM,GAAG,MAAM,CAAC,IAAI,CAAC;IAC3B,MAAM,EAAE,MAAM,EAAE,aAAa,EAAE,GAAG,OAAO,CAAC,MAAK;QAC3C,IAAI,MAAM,GAAQ,EAAE;QACpB,MAAM,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAU,KAAI;YAC5C,IAAI,QAAQ,GAAG,KAAK,CAAC,KAAK,CAAC,KAAK,KAAK,KAAK;AAC1C,YAAA,IAAI,QAAQ;AAAE,gBAAA,MAAM,GAAG,KAAK,CAAC,KAAK;YAClC,OAAO,YAAY,CAAC,KAAK,EAAE;AACvB,gBAAA,KAAK,EAAE,SAAS;gBAChB,QAAQ;gBACR,OAAO,EAAE,MAAK;oBACV,SAAS,CAAC,IAAI,CAAC;oBACf,QAAQ,IAAI,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC;gBAC3C;AACH,aAAA,CAAC;AACN,QAAA,CAAC,CAAC;QACF,OAAO;AACH,YAAA,MAAM,EAAE,CAAC;AACT,YAAA,aAAa,EAAE;SAClB;AACL,IAAA,CAAC,EAAE,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC;AAErB,IAAA,MAAM,UAAU,GAAG,MAAM,SAAS,CAAC,MAAM,GAAG,IAAI,GAAG,MAAM,CAAC,OAAO,CAAC;IAElE,QACIA,4BACIC,GAAA,CAAC,KAAK,kBACF,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,KAAK,OAAO,GAAG,MAAM,GAAG,OAAO,EAC/C,OAAO,EAAED,KAAC,KAAK,EAAA,MAAA,CAAA,MAAA,CAAA,EAAC,aAAa,EAAC,KAAK,EAAC,SAAS,EAAC,MAAM,EAAA,EAAA,EAAA,QAAA,EAAA,CAAA,GAAA,GAAK,MAAM,GAAGC,GAAA,CAAC,MAAM,EAAA,EAAA,CAAG,GAAGA,GAAA,CAAC,QAAQ,EAAA,EAAA,CAAG,EAAC,EAAA,CAAA,CAAS,EACrG,QAAQ,EAAA,IAAA,EACR,KAAK,EAAE,OAAO,aAAa,CAAC,QAAQ,KAAK,QAAQ,GAAG,aAAa,CAAC,QAAQ,GAAG,KAAK,EAClF,MAAM,EAAC,SAAS,EAChB,UAAU,EAAC,MAAM,EACjB,SAAS,EAAE,aAAa,CAAC,SAAS,EAClC,OAAO,EAAE,CAAC,CAAC,MAAM,EACjB,WAAW,EAAE,WAAW,EAAA,EACpB,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,MAAA,GAAA,MAAA,GAAT,SAAS,CAAE,KAAK,EAAA,EACpB,SAAS,EAAE;AACP,oBAAA,SAAS,EAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EACL,MAAM,EAAE,SAAS,EACjB,UAAU,EAAE,MAAM,EAAA,GACd,CAAA,CAAA,EAAA,GAAA,MAAA,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,MAAA,GAAA,MAAA,GAAT,SAAS,CAAE,KAAK,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,SAAS,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,SAAS,KAAI,EAAE,EAAC,EAAA,EACjD,OAAO,EAAE,UAAU,EAAA;AAE1B,iBAAA,EACD,YAAY,EAAE,MAAM,EACpB,GAAG,EAAE,GAAG,EAAA,CAAA,CACV,EACFA,GAAA,CAAC,IAAI,EAAA,MAAA,CAAA,MAAA,CAAA,EACD,MAAM,EAAE,MAAM,EACd,SAAS,EAAC,QAAQ,EAAA,EACd,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,MAAA,GAAA,MAAA,GAAT,SAAS,CAAE,IAAI,EAAA,EACnB,SAAS,EAAE;AACP,oBAAA,OAAO,EAAA,MAAA,CAAA,MAAA,CAAA,EACH,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,MAAM,KAAI,CAAA,EAAA,GAAC,MAAM,KAAA,IAAA,IAAN,MAAM,KAAA,MAAA,GAAA,MAAA,GAAN,MAAM,CAAE,OAAe,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,WAAW,CAAA,EAAA,EACnD,MAAA,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,MAAA,GAAA,MAAA,GAAT,SAAS,CAAE,IAAI,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,OAAO;AAElC,iBAAA,EACD,cAAc,EAAE,UAAU,EAAA,EAAA,EAAA,QAAA,EAE1BA,GAAA,CAAC,IAAI,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACG,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,MAAA,GAAA,MAAA,GAAT,SAAS,CAAE,IAAI,EAAA,EACnB,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAAA,EAAA,EAAA,QAAA,EAEf,MAAM,EAAA,CAAA,CACJ,EAAA,CAAA,CACJ,CAAA,EAAA,CACR;AAEX,CAAC"}
@@ -0,0 +1,8 @@
1
+ import React from 'react';
2
+ import { TagComponentType, TagProps } from '@xanui/core';
3
+
4
+ type StackProps<T extends TagComponentType = "div"> = TagProps<T>;
5
+ declare const Stack: React.ForwardRefExoticComponent<Omit<StackProps<TagComponentType>, "ref"> & React.RefAttributes<any>>;
6
+
7
+ export { Stack as default };
8
+ export type { StackProps };
package/Stack/index.js ADDED
@@ -0,0 +1,7 @@
1
+ 'use strict';Object.defineProperty(exports,'__esModule',{value:true});var tslib=require('tslib'),jsxRuntime=require('react/jsx-runtime'),React=require('react'),core=require('@xanui/core');const Stack = React.forwardRef((_a, ref) => {
2
+ var { children, sx } = _a, props = tslib.__rest(_a, ["children", "sx"]);
3
+ return (jsxRuntime.jsx(core.Tag, Object.assign({}, props, { sxr: {
4
+ display: "flex",
5
+ flexDirection: "column",
6
+ }, baseClass: 'stack', ref: ref }, { children: children })));
7
+ });exports.default=Stack;//# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sources":["../../src/Stack/index.tsx"],"sourcesContent":["\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\n\nexport type StackProps<T extends TagComponentType = \"div\"> = TagProps<T>\n\nconst Stack = React.forwardRef(<T extends TagComponentType = \"div\">({ children, sx, ...props }: StackProps<T>, ref?: React.Ref<any>) => {\n return (\n <Tag\n {...props}\n sxr={{\n display: \"flex\",\n flexDirection: \"column\",\n }}\n baseClass='stack'\n ref={ref}\n >{children}</Tag>\n )\n})\n\nexport default Stack\n"],"names":["__rest","_jsx","Tag"],"mappings":"4LAMA,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAAyC,EAAE,GAAoB,KAAI;QAAnE,EAAE,QAAQ,EAAE,EAAE,EAAA,GAAA,EAA2B,EAAtB,KAAK,GAAAA,YAAA,CAAA,EAAA,EAAxB,kBAA0B,CAAF;AACxF,IAAA,QACIC,cAAA,CAACC,QAAG,oBACI,KAAK,EAAA,EACT,GAAG,EAAE;AACD,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,aAAa,EAAE,QAAQ;SAC1B,EACD,SAAS,EAAC,OAAO,EACjB,GAAG,EAAE,GAAG,EAAA,EAAA,EAAA,QAAA,EACV,QAAQ,EAAA,CAAA,CAAO;AAEzB,CAAC"}
@@ -0,0 +1,7 @@
1
+ import {__rest}from'tslib';import {jsx}from'react/jsx-runtime';import React from'react';import {Tag}from'@xanui/core';const Stack = React.forwardRef((_a, ref) => {
2
+ var { children, sx } = _a, props = __rest(_a, ["children", "sx"]);
3
+ return (jsx(Tag, Object.assign({}, props, { sxr: {
4
+ display: "flex",
5
+ flexDirection: "column",
6
+ }, baseClass: 'stack', ref: ref }, { children: children })));
7
+ });export{Stack as default};//# sourceMappingURL=index.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.mjs","sources":["../../src/Stack/index.tsx"],"sourcesContent":["\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\n\nexport type StackProps<T extends TagComponentType = \"div\"> = TagProps<T>\n\nconst Stack = React.forwardRef(<T extends TagComponentType = \"div\">({ children, sx, ...props }: StackProps<T>, ref?: React.Ref<any>) => {\n return (\n <Tag\n {...props}\n sxr={{\n display: \"flex\",\n flexDirection: \"column\",\n }}\n baseClass='stack'\n ref={ref}\n >{children}</Tag>\n )\n})\n\nexport default Stack\n"],"names":["_jsx"],"mappings":"sHAMA,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAAyC,EAAE,GAAoB,KAAI;QAAnE,EAAE,QAAQ,EAAE,EAAE,EAAA,GAAA,EAA2B,EAAtB,KAAK,GAAA,MAAA,CAAA,EAAA,EAAxB,kBAA0B,CAAF;AACxF,IAAA,QACIA,GAAA,CAAC,GAAG,oBACI,KAAK,EAAA,EACT,GAAG,EAAE;AACD,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,aAAa,EAAE,QAAQ;SAC1B,EACD,SAAS,EAAC,OAAO,EACjB,GAAG,EAAE,GAAG,EAAA,EAAA,EAAA,QAAA,EACV,QAAQ,EAAA,CAAA,CAAO;AAEzB,CAAC"}
@@ -0,0 +1,19 @@
1
+ import React, { ReactElement } from 'react';
2
+ import { TagProps, useBreakpointPropsType, ColorTemplateColors } from '@xanui/core';
3
+
4
+ type SwitchProps = Omit<TagProps<"input">, "color" | "size" | "component" | "type" | "checked"> & {
5
+ checked?: boolean;
6
+ size?: useBreakpointPropsType<number | "small" | "medium" | "large">;
7
+ color?: useBreakpointPropsType<Omit<ColorTemplateColors, "default">>;
8
+ disabled?: useBreakpointPropsType<boolean>;
9
+ trackSize?: useBreakpointPropsType<number>;
10
+ icon?: useBreakpointPropsType<ReactElement>;
11
+ slotProps?: {
12
+ thumb?: Omit<TagProps, 'children'>;
13
+ track?: Omit<TagProps, 'children'>;
14
+ };
15
+ };
16
+ declare const Switch: React.ForwardRefExoticComponent<Omit<SwitchProps, "ref"> & React.RefAttributes<any>>;
17
+
18
+ export { Switch as default };
19
+ export type { SwitchProps };
@@ -0,0 +1,68 @@
1
+ 'use strict';Object.defineProperty(exports,'__esModule',{value:true});var tslib=require('tslib'),jsxRuntime=require('react/jsx-runtime'),React=require('react'),core=require('@xanui/core');const Switch = React.forwardRef((props, ref) => {
2
+ var _a, _b;
3
+ let [_c] = core.useInterface("Switch", props, {}), { size, checked, color, disabled, icon, onChange, trackSize, slotProps } = _c, rest = tslib.__rest(_c, ["size", "checked", "color", "disabled", "icon", "onChange", "trackSize", "slotProps"]);
4
+ const _p = {};
5
+ if (size)
6
+ _p.size = size;
7
+ if (color)
8
+ _p.color = color;
9
+ if (disabled)
10
+ _p.disabled = disabled;
11
+ if (trackSize)
12
+ _p.trackSize = trackSize;
13
+ if (icon)
14
+ _p.icon = icon;
15
+ const p = core.useBreakpointProps(_p);
16
+ size = (_a = p.size) !== null && _a !== void 0 ? _a : "medium";
17
+ color = (_b = p.color) !== null && _b !== void 0 ? _b : "brand";
18
+ disabled = p.disabled;
19
+ trackSize = p.trackSize;
20
+ icon = p.icon;
21
+ const [c, set] = React.useState(false);
22
+ checked !== null && checked !== void 0 ? checked : (checked = c);
23
+ onChange = onChange || (() => set(!c));
24
+ let sizes = {
25
+ small: 32,
26
+ medium: 48,
27
+ large: 60
28
+ };
29
+ let _size = sizes[size] || size;
30
+ let height = (_size / 2);
31
+ trackSize !== null && trackSize !== void 0 ? trackSize : (trackSize = height + 4);
32
+ let isNormalSize = (height + 4) === trackSize;
33
+ let transform = checked ? "92%" : "8%";
34
+ if (!isNormalSize) {
35
+ transform = checked ? "100%" : "-10%";
36
+ }
37
+ return (jsxRuntime.jsxs(core.Tag, Object.assign({ disabled: disabled, sxr: {
38
+ width: _size,
39
+ height: height,
40
+ position: "relative",
41
+ cursor: "pointer",
42
+ display: "inline-block"
43
+ }, onClick: onChange }, { children: [jsxRuntime.jsx(core.Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.track, { baseClass: 'switch-track-bar', sxr: {
44
+ width: _size,
45
+ height: trackSize,
46
+ borderRadius: height,
47
+ position: 'absolute',
48
+ top: "50%",
49
+ transform: "translateY(-50%)",
50
+ bgcolor: checked ? color : "divider",
51
+ } })), jsxRuntime.jsx(core.Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.thumb, { baseClass: 'switch-thumb', sxr: {
52
+ transition: "all .25s",
53
+ width: height,
54
+ height: height,
55
+ radius: height,
56
+ bgcolor: "#FFFFFF",
57
+ position: "absolute",
58
+ top: "50%",
59
+ border: isNormalSize ? 0 : 1,
60
+ left: 0,
61
+ transform: `translate(${transform}, -50%)`,
62
+ display: "flex",
63
+ justifyContent: "center",
64
+ alignItems: "center"
65
+ } }, { children: icon })), jsxRuntime.jsx(core.Tag, Object.assign({}, rest, { component: 'input', ref: ref, type: "radio", readOnly: true, checked: checked, sxr: {
66
+ display: "none!important"
67
+ } }))] })));
68
+ });exports.default=Switch;//# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sources":["../../src/Switch/index.tsx"],"sourcesContent":["\nimport React, { ReactElement, useState } from 'react';\nimport { Tag, TagProps, useBreakpointProps, ColorTemplateColors, useInterface, useBreakpointPropsType } from '@xanui/core';\n\n\nexport type SwitchProps = Omit<TagProps<\"input\">, \"color\" | \"size\" | \"component\" | \"type\" | \"checked\"> & {\n checked?: boolean;\n size?: useBreakpointPropsType<number | \"small\" | \"medium\" | \"large\">;\n color?: useBreakpointPropsType<Omit<ColorTemplateColors, \"default\">>;\n disabled?: useBreakpointPropsType<boolean>;\n trackSize?: useBreakpointPropsType<number>;\n icon?: useBreakpointPropsType<ReactElement>;\n slotProps?: {\n thumb?: Omit<TagProps, 'children'>;\n track?: Omit<TagProps, 'children'>;\n }\n}\n\nconst Switch = React.forwardRef((props: SwitchProps, ref?: React.Ref<any>) => {\n let [{ size, checked, color, disabled, icon, onChange, trackSize, slotProps, ...rest }] = useInterface<any>(\"Switch\", props, {})\n const _p: any = {}\n if (size) _p.size = size\n if (color) _p.color = color\n if (disabled) _p.disabled = disabled\n if (trackSize) _p.trackSize = trackSize\n if (icon) _p.icon = icon\n const p: any = useBreakpointProps(_p)\n size = p.size ?? \"medium\"\n color = p.color ?? \"brand\"\n disabled = p.disabled\n trackSize = p.trackSize\n icon = p.icon\n\n const [c, set] = useState(false)\n checked ??= c\n\n onChange = onChange || (() => set(!c));\n\n let sizes: any = {\n small: 32,\n medium: 48,\n large: 60\n }\n let _size = sizes[size as any] || size\n\n let height = (_size / 2)\n trackSize ??= height + 4\n let isNormalSize = (height + 4) === trackSize\n let transform = checked ? \"92%\" : \"8%\"\n if (!isNormalSize) {\n transform = checked ? \"100%\" : \"-10%\"\n }\n\n return (\n <Tag\n disabled={disabled}\n sxr={{\n width: _size,\n height: height,\n position: \"relative\",\n cursor: \"pointer\",\n display: \"inline-block\"\n }}\n onClick={onChange}\n >\n <Tag\n {...slotProps?.track}\n baseClass='switch-track-bar'\n sxr={{\n width: _size,\n height: trackSize,\n borderRadius: height,\n position: 'absolute',\n top: \"50%\",\n transform: \"translateY(-50%)\",\n bgcolor: checked ? color : \"divider\",\n\n }}\n >\n </Tag>\n <Tag\n {...slotProps?.thumb}\n baseClass='switch-thumb'\n sxr={{\n transition: \"all .25s\",\n width: height,\n height: height,\n radius: height,\n bgcolor: \"#FFFFFF\",\n position: \"absolute\",\n top: \"50%\",\n border: isNormalSize ? 0 : 1,\n left: 0,\n transform: `translate(${transform}, -50%)`,\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\"\n }}\n >\n {\n icon\n }\n </Tag>\n <Tag\n {...rest}\n component='input'\n ref={ref}\n type=\"radio\"\n readOnly\n checked={checked}\n sxr={{\n display: \"none!important\"\n }}\n />\n </Tag>\n )\n})\n\nexport default Switch\n"],"names":["useInterface","__rest","useBreakpointProps","useState","_jsxs","Tag","_jsx"],"mappings":"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"}
@@ -0,0 +1,68 @@
1
+ import {__rest}from'tslib';import {jsxs,jsx}from'react/jsx-runtime';import React,{useState}from'react';import {useInterface,useBreakpointProps,Tag}from'@xanui/core';const Switch = React.forwardRef((props, ref) => {
2
+ var _a, _b;
3
+ let [_c] = useInterface("Switch", props, {}), { size, checked, color, disabled, icon, onChange, trackSize, slotProps } = _c, rest = __rest(_c, ["size", "checked", "color", "disabled", "icon", "onChange", "trackSize", "slotProps"]);
4
+ const _p = {};
5
+ if (size)
6
+ _p.size = size;
7
+ if (color)
8
+ _p.color = color;
9
+ if (disabled)
10
+ _p.disabled = disabled;
11
+ if (trackSize)
12
+ _p.trackSize = trackSize;
13
+ if (icon)
14
+ _p.icon = icon;
15
+ const p = useBreakpointProps(_p);
16
+ size = (_a = p.size) !== null && _a !== void 0 ? _a : "medium";
17
+ color = (_b = p.color) !== null && _b !== void 0 ? _b : "brand";
18
+ disabled = p.disabled;
19
+ trackSize = p.trackSize;
20
+ icon = p.icon;
21
+ const [c, set] = useState(false);
22
+ checked !== null && checked !== void 0 ? checked : (checked = c);
23
+ onChange = onChange || (() => set(!c));
24
+ let sizes = {
25
+ small: 32,
26
+ medium: 48,
27
+ large: 60
28
+ };
29
+ let _size = sizes[size] || size;
30
+ let height = (_size / 2);
31
+ trackSize !== null && trackSize !== void 0 ? trackSize : (trackSize = height + 4);
32
+ let isNormalSize = (height + 4) === trackSize;
33
+ let transform = checked ? "92%" : "8%";
34
+ if (!isNormalSize) {
35
+ transform = checked ? "100%" : "-10%";
36
+ }
37
+ return (jsxs(Tag, Object.assign({ disabled: disabled, sxr: {
38
+ width: _size,
39
+ height: height,
40
+ position: "relative",
41
+ cursor: "pointer",
42
+ display: "inline-block"
43
+ }, onClick: onChange }, { children: [jsx(Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.track, { baseClass: 'switch-track-bar', sxr: {
44
+ width: _size,
45
+ height: trackSize,
46
+ borderRadius: height,
47
+ position: 'absolute',
48
+ top: "50%",
49
+ transform: "translateY(-50%)",
50
+ bgcolor: checked ? color : "divider",
51
+ } })), jsx(Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.thumb, { baseClass: 'switch-thumb', sxr: {
52
+ transition: "all .25s",
53
+ width: height,
54
+ height: height,
55
+ radius: height,
56
+ bgcolor: "#FFFFFF",
57
+ position: "absolute",
58
+ top: "50%",
59
+ border: isNormalSize ? 0 : 1,
60
+ left: 0,
61
+ transform: `translate(${transform}, -50%)`,
62
+ display: "flex",
63
+ justifyContent: "center",
64
+ alignItems: "center"
65
+ } }, { children: icon })), jsx(Tag, Object.assign({}, rest, { component: 'input', ref: ref, type: "radio", readOnly: true, checked: checked, sxr: {
66
+ display: "none!important"
67
+ } }))] })));
68
+ });export{Switch as default};//# sourceMappingURL=index.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.mjs","sources":["../../src/Switch/index.tsx"],"sourcesContent":["\nimport React, { ReactElement, useState } from 'react';\nimport { Tag, TagProps, useBreakpointProps, ColorTemplateColors, useInterface, useBreakpointPropsType } from '@xanui/core';\n\n\nexport type SwitchProps = Omit<TagProps<\"input\">, \"color\" | \"size\" | \"component\" | \"type\" | \"checked\"> & {\n checked?: boolean;\n size?: useBreakpointPropsType<number | \"small\" | \"medium\" | \"large\">;\n color?: useBreakpointPropsType<Omit<ColorTemplateColors, \"default\">>;\n disabled?: useBreakpointPropsType<boolean>;\n trackSize?: useBreakpointPropsType<number>;\n icon?: useBreakpointPropsType<ReactElement>;\n slotProps?: {\n thumb?: Omit<TagProps, 'children'>;\n track?: Omit<TagProps, 'children'>;\n }\n}\n\nconst Switch = React.forwardRef((props: SwitchProps, ref?: React.Ref<any>) => {\n let [{ size, checked, color, disabled, icon, onChange, trackSize, slotProps, ...rest }] = useInterface<any>(\"Switch\", props, {})\n const _p: any = {}\n if (size) _p.size = size\n if (color) _p.color = color\n if (disabled) _p.disabled = disabled\n if (trackSize) _p.trackSize = trackSize\n if (icon) _p.icon = icon\n const p: any = useBreakpointProps(_p)\n size = p.size ?? \"medium\"\n color = p.color ?? \"brand\"\n disabled = p.disabled\n trackSize = p.trackSize\n icon = p.icon\n\n const [c, set] = useState(false)\n checked ??= c\n\n onChange = onChange || (() => set(!c));\n\n let sizes: any = {\n small: 32,\n medium: 48,\n large: 60\n }\n let _size = sizes[size as any] || size\n\n let height = (_size / 2)\n trackSize ??= height + 4\n let isNormalSize = (height + 4) === trackSize\n let transform = checked ? \"92%\" : \"8%\"\n if (!isNormalSize) {\n transform = checked ? \"100%\" : \"-10%\"\n }\n\n return (\n <Tag\n disabled={disabled}\n sxr={{\n width: _size,\n height: height,\n position: \"relative\",\n cursor: \"pointer\",\n display: \"inline-block\"\n }}\n onClick={onChange}\n >\n <Tag\n {...slotProps?.track}\n baseClass='switch-track-bar'\n sxr={{\n width: _size,\n height: trackSize,\n borderRadius: height,\n position: 'absolute',\n top: \"50%\",\n transform: \"translateY(-50%)\",\n bgcolor: checked ? color : \"divider\",\n\n }}\n >\n </Tag>\n <Tag\n {...slotProps?.thumb}\n baseClass='switch-thumb'\n sxr={{\n transition: \"all .25s\",\n width: height,\n height: height,\n radius: height,\n bgcolor: \"#FFFFFF\",\n position: \"absolute\",\n top: \"50%\",\n border: isNormalSize ? 0 : 1,\n left: 0,\n transform: `translate(${transform}, -50%)`,\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\"\n }}\n >\n {\n icon\n }\n </Tag>\n <Tag\n {...rest}\n component='input'\n ref={ref}\n type=\"radio\"\n readOnly\n checked={checked}\n sxr={{\n display: \"none!important\"\n }}\n />\n </Tag>\n )\n})\n\nexport default Switch\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
package/Tab/index.d.ts ADDED
@@ -0,0 +1,11 @@
1
+ import React from 'react';
2
+ import { TagComponentType } from '@xanui/core';
3
+ import { ButtonProps } from '../Button/index.js';
4
+
5
+ type TabProps<T extends TagComponentType = "button"> = ButtonProps<T> & {
6
+ value?: string | number;
7
+ };
8
+ declare const Tab: React.ForwardRefExoticComponent<Omit<TabProps<TagComponentType>, "ref"> & React.RefAttributes<any>>;
9
+
10
+ export { Tab as default };
11
+ export type { TabProps };
package/Tab/index.js ADDED
@@ -0,0 +1,5 @@
1
+ 'use strict';Object.defineProperty(exports,'__esModule',{value:true});var tslib=require('tslib'),jsxRuntime=require('react/jsx-runtime'),React=require('react'),core=require('@xanui/core'),index=require('../Button/index.js');const Tab = React.forwardRef((_a, ref) => {
2
+ var { children } = _a, props = tslib.__rest(_a, ["children"]);
3
+ let [_props] = core.useInterface("Tab", props, {});
4
+ return (jsxRuntime.jsx(index.default, Object.assign({}, _props, { classNames: ["tab", ...((_props === null || _props === void 0 ? void 0 : _props.classNames) || [])], ref: ref }, { children: children })));
5
+ });exports.default=Tab;//# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sources":["../../src/Tab/index.tsx"],"sourcesContent":["\nimport React from 'react'\nimport { TagComponentType, useInterface } from '@xanui/core';\nimport Button, { ButtonProps } from '../Button';\n\nexport type TabProps<T extends TagComponentType = \"button\"> = ButtonProps<T> & {\n value?: string | number\n}\n\nconst Tab = React.forwardRef(<T extends TagComponentType = \"div\">({ children, ...props }: TabProps<T>, ref: React.Ref<any>) => {\n let [_props] = useInterface<any>(\"Tab\", props, {})\n return (\n <Button\n {..._props}\n classNames={[\"tab\", ...(_props?.classNames || [])]}\n ref={ref}\n >\n {children}\n </Button>\n )\n})\n\nexport default Tab"],"names":["__rest","useInterface","_jsx","Button"],"mappings":"gOASA,MAAM,GAAG,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAAmC,EAAE,GAAmB,KAAI;AAA5D,IAAA,IAAA,EAAE,QAAQ,EAAA,GAAA,EAAyB,EAApB,KAAK,GAAAA,YAAA,CAAA,EAAA,EAApB,YAAsB,CAAF;AAClF,IAAA,IAAI,CAAC,MAAM,CAAC,GAAGC,iBAAY,CAAM,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC;AAClD,IAAA,QACIC,cAAA,CAACC,aAAM,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACC,MAAM,EAAA,EACV,UAAU,EAAE,CAAC,KAAK,EAAE,IAAI,CAAA,MAAM,KAAA,IAAA,IAAN,MAAM,KAAA,MAAA,GAAA,MAAA,GAAN,MAAM,CAAE,UAAU,KAAI,EAAE,CAAC,CAAC,EAClD,GAAG,EAAE,GAAG,EAAA,EAAA,EAAA,QAAA,EAEP,QAAQ,EAAA,CAAA,CACJ;AAEjB,CAAC"}
package/Tab/index.mjs ADDED
@@ -0,0 +1,5 @@
1
+ import {__rest}from'tslib';import {jsx}from'react/jsx-runtime';import React from'react';import {useInterface}from'@xanui/core';import Button from'../Button/index.mjs';const Tab = React.forwardRef((_a, ref) => {
2
+ var { children } = _a, props = __rest(_a, ["children"]);
3
+ let [_props] = useInterface("Tab", props, {});
4
+ return (jsx(Button, Object.assign({}, _props, { classNames: ["tab", ...((_props === null || _props === void 0 ? void 0 : _props.classNames) || [])], ref: ref }, { children: children })));
5
+ });export{Tab as default};//# sourceMappingURL=index.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.mjs","sources":["../../src/Tab/index.tsx"],"sourcesContent":["\nimport React from 'react'\nimport { TagComponentType, useInterface } from '@xanui/core';\nimport Button, { ButtonProps } from '../Button';\n\nexport type TabProps<T extends TagComponentType = \"button\"> = ButtonProps<T> & {\n value?: string | number\n}\n\nconst Tab = React.forwardRef(<T extends TagComponentType = \"div\">({ children, ...props }: TabProps<T>, ref: React.Ref<any>) => {\n let [_props] = useInterface<any>(\"Tab\", props, {})\n return (\n <Button\n {..._props}\n classNames={[\"tab\", ...(_props?.classNames || [])]}\n ref={ref}\n >\n {children}\n </Button>\n )\n})\n\nexport default Tab"],"names":["_jsx"],"mappings":"uKASA,MAAM,GAAG,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAAmC,EAAE,GAAmB,KAAI;AAA5D,IAAA,IAAA,EAAE,QAAQ,EAAA,GAAA,EAAyB,EAApB,KAAK,GAAA,MAAA,CAAA,EAAA,EAApB,YAAsB,CAAF;AAClF,IAAA,IAAI,CAAC,MAAM,CAAC,GAAG,YAAY,CAAM,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC;AAClD,IAAA,QACIA,GAAA,CAAC,MAAM,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACC,MAAM,EAAA,EACV,UAAU,EAAE,CAAC,KAAK,EAAE,IAAI,CAAA,MAAM,KAAA,IAAA,IAAN,MAAM,KAAA,MAAA,GAAA,MAAA,GAAN,MAAM,CAAE,UAAU,KAAI,EAAE,CAAC,CAAC,EAClD,GAAG,EAAE,GAAG,EAAA,EAAA,EAAA,QAAA,EAEP,QAAQ,EAAA,CAAA,CACJ;AAEjB,CAAC"}
@@ -0,0 +1,14 @@
1
+ import React from 'react';
2
+ import { TagComponentType, TagProps, useBreakpointPropsType, ColorTemplateColors, ColorTemplateType } from '@xanui/core';
3
+
4
+ type TableProps<T extends TagComponentType = "table"> = Omit<TagProps<T>, "color" | "size"> & {
5
+ evenColor?: useBreakpointPropsType<boolean>;
6
+ size?: useBreakpointPropsType<"small" | "medium" | "large" | number>;
7
+ color?: useBreakpointPropsType<ColorTemplateColors>;
8
+ variant?: useBreakpointPropsType<Omit<ColorTemplateType, "outline">>;
9
+ borderType?: useBreakpointPropsType<"box" | "line" | "none">;
10
+ };
11
+ declare const Table: React.ForwardRefExoticComponent<Omit<TableProps<TagComponentType>, "ref"> & React.RefAttributes<any>>;
12
+
13
+ export { Table as default };
14
+ export type { TableProps };
package/Table/index.js ADDED
@@ -0,0 +1,77 @@
1
+ 'use strict';Object.defineProperty(exports,'__esModule',{value:true});var tslib=require('tslib'),jsxRuntime=require('react/jsx-runtime'),React=require('react'),core=require('@xanui/core'),index=require('../Scrollbar/index.js');const Table = React.forwardRef((_a, ref) => {
2
+ var _b, _c, _d, _e;
3
+ var { children } = _a, props = tslib.__rest(_a, ["children"]);
4
+ let [_f] = core.useInterface("Table", props, {}), { evenColor, size, color, variant, borderType } = _f, rest = tslib.__rest(_f, ["evenColor", "size", "color", "variant", "borderType"]);
5
+ const _p = {};
6
+ if (evenColor)
7
+ _p.evenColor = evenColor;
8
+ if (size)
9
+ _p.size = size;
10
+ if (color)
11
+ _p.color = color;
12
+ if (variant)
13
+ _p.variant = variant;
14
+ if (borderType)
15
+ _p.borderType = borderType;
16
+ const p = core.useBreakpointProps(_p);
17
+ evenColor = p.evenColor;
18
+ size = (_b = p.size) !== null && _b !== void 0 ? _b : "medium";
19
+ color = (_c = p.color) !== null && _c !== void 0 ? _c : 'default';
20
+ variant = (_d = p.variant) !== null && _d !== void 0 ? _d : "fill";
21
+ borderType = (_e = p.borderType) !== null && _e !== void 0 ? _e : "line";
22
+ const main = core.useColorTemplate(color, variant);
23
+ const alpha = core.useColorTemplate(color, "alpha");
24
+ let sx = {};
25
+ if (evenColor) {
26
+ sx = {
27
+ "& tbody tr:nth-child(even)": {
28
+ bgcolor: alpha.bgcolor
29
+ }
30
+ };
31
+ }
32
+ if (borderType === 'box') {
33
+ sx = Object.assign(Object.assign({}, sx), { "& tr:last-child td": {
34
+ borderBottom: 0
35
+ }, "& tr:first-child th": {
36
+ borderTop: 0
37
+ }, "& tr td:first-child, & tr th:first-child": {
38
+ borderLeft: 0
39
+ }, "& tr td:last-child, & tr th:last-child": {
40
+ borderRight: 0
41
+ } });
42
+ }
43
+ let _size = size;
44
+ let sizes = {
45
+ small: .5,
46
+ medium: 1,
47
+ large: 2
48
+ };
49
+ if (typeof size === 'string' && sizes[size]) {
50
+ _size = sizes[size];
51
+ }
52
+ let border = {
53
+ line: {
54
+ borderBottom: "1px solid",
55
+ borderColor: "divider",
56
+ },
57
+ box: {
58
+ border: "1px solid",
59
+ borderColor: "divider",
60
+ },
61
+ none: {}
62
+ };
63
+ return (jsxRuntime.jsx(index.default, Object.assign({ style: {
64
+ overflowY: "hidden"
65
+ } }, { children: jsxRuntime.jsx(core.Tag, Object.assign({}, rest, { baseClass: 'table', sxr: Object.assign(Object.assign({ color: "text.primary", fontSize: size === "small" ? "button" : "text", width: "100%", "& thead, & tfoot": {
66
+ bgcolor: main.bgcolor,
67
+ "& th": {
68
+ color: main.color
69
+ }
70
+ }, "& td, & th": Object.assign({ p: _size }, border[borderType]), "& tr:last-child td": {
71
+ borderBottom: 0
72
+ }, "& tr:first-child th": {
73
+ borderTop: 0
74
+ }, "& tbody tr:hover": {
75
+ bgcolor: alpha.bgcolor
76
+ } }, sx), (rest.sx || {})), component: "table", ref: ref }, { children: children })) })));
77
+ });exports.default=Table;//# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sources":["../../src/Table/index.tsx"],"sourcesContent":["\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType, ColorTemplateColors, useInterface, useColorTemplate, ColorTemplateType, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\nimport Scrollbar from '../Scrollbar';\n\n\nexport type TableProps<T extends TagComponentType = \"table\"> = Omit<TagProps<T>, \"color\" | \"size\"> & {\n evenColor?: useBreakpointPropsType<boolean>;\n size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\" | number>;\n color?: useBreakpointPropsType<ColorTemplateColors>;\n variant?: useBreakpointPropsType<Omit<ColorTemplateType, \"outline\">>;\n borderType?: useBreakpointPropsType<\"box\" | \"line\" | \"none\">;\n}\n\nconst Table = React.forwardRef(<T extends TagComponentType = \"table\">({ children, ...props }: TableProps<T>, ref: React.Ref<any>) => {\n let [{ evenColor, size, color, variant, borderType, ...rest }] = useInterface<any>(\"Table\", props, {})\n const _p: any = {}\n if (evenColor) _p.evenColor = evenColor\n if (size) _p.size = size\n if (color) _p.color = color\n if (variant) _p.variant = variant\n if (borderType) _p.borderType = borderType\n const p: any = useBreakpointProps(_p)\n evenColor = p.evenColor\n size = p.size ?? \"medium\"\n color = p.color ?? 'default'\n variant = p.variant ?? \"fill\"\n borderType = p.borderType ?? \"line\"\n\n const main = useColorTemplate(color, variant)\n const alpha = useColorTemplate(color, \"alpha\")\n\n let sx: any = {}\n if (evenColor) {\n sx = {\n \"& tbody tr:nth-child(even)\": {\n bgcolor: alpha.bgcolor\n }\n }\n }\n if (borderType === 'box') {\n sx = {\n ...sx,\n \"& tr:last-child td\": {\n borderBottom: 0\n },\n \"& tr:first-child th\": {\n borderTop: 0\n },\n \"& tr td:first-child, & tr th:first-child\": {\n borderLeft: 0\n },\n \"& tr td:last-child, & tr th:last-child\": {\n borderRight: 0\n },\n }\n }\n let _size = size\n let sizes: any = {\n small: .5,\n medium: 1,\n large: 2\n }\n\n if (typeof size === 'string' && sizes[size]) {\n _size = sizes[size]\n }\n let border: any = {\n line: {\n borderBottom: \"1px solid\",\n borderColor: \"divider\",\n },\n box: {\n border: \"1px solid\",\n borderColor: \"divider\",\n },\n none: {}\n }\n\n return (\n <Scrollbar\n style={{\n overflowY: \"hidden\"\n }}\n >\n <Tag\n {...rest}\n baseClass='table'\n sxr={{\n color: \"text.primary\",\n fontSize: size === \"small\" ? \"button\" : \"text\",\n width: \"100%\",\n \"& thead, & tfoot\": {\n bgcolor: main.bgcolor,\n \"& th\": {\n color: main.color\n }\n },\n \"& td, & th\": {\n p: _size,\n ...border[borderType],\n },\n \"& tr:last-child td\": {\n borderBottom: 0\n },\n \"& tr:first-child th\": {\n borderTop: 0\n },\n \"& tbody tr:hover\": {\n bgcolor: alpha.bgcolor\n },\n ...sx,\n ...((rest as any).sx || {})\n }}\n component=\"table\"\n ref={ref}\n >{children}</Tag>\n </Scrollbar>\n )\n})\n\nexport default Table"],"names":["__rest","useInterface","useBreakpointProps","useColorTemplate","_jsx","Scrollbar","Tag"],"mappings":"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"}