@xanui/ui 1.1.16 → 1.1.17

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 (266) hide show
  1. package/Accordion/index.js +3 -18
  2. package/Accordion/index.js.map +1 -1
  3. package/Accordion/index.mjs +2 -15
  4. package/Accordion/index.mjs.map +1 -1
  5. package/Alert/index.js +5 -24
  6. package/Alert/index.js.map +1 -1
  7. package/Alert/index.mjs +2 -19
  8. package/Alert/index.mjs.map +1 -1
  9. package/Avatar/index.js +2 -13
  10. package/Avatar/index.js.map +1 -1
  11. package/Avatar/index.mjs +2 -11
  12. package/Avatar/index.mjs.map +1 -1
  13. package/Badge/index.js +2 -12
  14. package/Badge/index.js.map +1 -1
  15. package/Badge/index.mjs +2 -10
  16. package/Badge/index.mjs.map +1 -1
  17. package/Box/index.js +2 -12
  18. package/Box/index.js.map +1 -1
  19. package/Box/index.mjs +2 -10
  20. package/Box/index.mjs.map +1 -1
  21. package/Button/index.js +4 -17
  22. package/Button/index.js.map +1 -1
  23. package/Button/index.mjs +2 -13
  24. package/Button/index.mjs.map +1 -1
  25. package/ButtonGroup/index.js +2 -12
  26. package/ButtonGroup/index.js.map +1 -1
  27. package/ButtonGroup/index.mjs +2 -10
  28. package/ButtonGroup/index.mjs.map +1 -1
  29. package/Calendar/index.js +16 -35
  30. package/Calendar/index.js.map +1 -1
  31. package/Calendar/index.mjs +2 -19
  32. package/Calendar/index.mjs.map +1 -1
  33. package/CalendarInput/index.js +4 -23
  34. package/CalendarInput/index.js.map +1 -1
  35. package/CalendarInput/index.mjs +2 -19
  36. package/CalendarInput/index.mjs.map +1 -1
  37. package/Checkbox/index.js +2 -16
  38. package/Checkbox/index.js.map +1 -1
  39. package/Checkbox/index.mjs +2 -14
  40. package/Checkbox/index.mjs.map +1 -1
  41. package/Chip/index.js +3 -14
  42. package/Chip/index.js.map +1 -1
  43. package/Chip/index.mjs +2 -11
  44. package/Chip/index.mjs.map +1 -1
  45. package/CircleProgress/index.js +2 -13
  46. package/CircleProgress/index.js.map +1 -1
  47. package/CircleProgress/index.mjs +2 -11
  48. package/CircleProgress/index.mjs.map +1 -1
  49. package/ClickOutside/index.js +2 -13
  50. package/ClickOutside/index.js.map +1 -1
  51. package/ClickOutside/index.mjs +2 -11
  52. package/ClickOutside/index.mjs.map +1 -1
  53. package/Collaps/index.js +2 -12
  54. package/Collaps/index.js.map +1 -1
  55. package/Collaps/index.mjs +2 -10
  56. package/Collaps/index.mjs.map +1 -1
  57. package/Container/index.js +2 -12
  58. package/Container/index.js.map +1 -1
  59. package/Container/index.mjs +2 -10
  60. package/Container/index.mjs.map +1 -1
  61. package/Datatable/FilterBox.js +10 -28
  62. package/Datatable/FilterBox.js.map +1 -1
  63. package/Datatable/FilterBox.mjs +7 -23
  64. package/Datatable/FilterBox.mjs.map +1 -1
  65. package/Datatable/Row.js +11 -30
  66. package/Datatable/Row.js.map +1 -1
  67. package/Datatable/Row.mjs +7 -24
  68. package/Datatable/Row.mjs.map +1 -1
  69. package/Datatable/SelectedBox.js +5 -17
  70. package/Datatable/SelectedBox.js.map +1 -1
  71. package/Datatable/SelectedBox.mjs +4 -14
  72. package/Datatable/SelectedBox.mjs.map +1 -1
  73. package/Datatable/Table.js +4 -16
  74. package/Datatable/Table.js.map +1 -1
  75. package/Datatable/Table.mjs +2 -12
  76. package/Datatable/Table.mjs.map +1 -1
  77. package/Datatable/TableHead.js +18 -25
  78. package/Datatable/TableHead.js.map +1 -1
  79. package/Datatable/TableHead.mjs +18 -23
  80. package/Datatable/TableHead.mjs.map +1 -1
  81. package/Datatable/index.d.ts +2 -67
  82. package/Datatable/index.js +21 -36
  83. package/Datatable/index.js.map +1 -1
  84. package/Datatable/index.mjs +20 -33
  85. package/Datatable/index.mjs.map +1 -1
  86. package/Datatable/types.d.ts +69 -0
  87. package/Divider/index.js +2 -12
  88. package/Divider/index.js.map +1 -1
  89. package/Divider/index.mjs +2 -10
  90. package/Divider/index.mjs.map +1 -1
  91. package/Drawer/index.js +4 -16
  92. package/Drawer/index.js.map +1 -1
  93. package/Drawer/index.mjs +2 -12
  94. package/Drawer/index.mjs.map +1 -1
  95. package/Form/index.js +2 -13
  96. package/Form/index.js.map +1 -1
  97. package/Form/index.mjs +2 -11
  98. package/Form/index.mjs.map +1 -1
  99. package/GridContainer/index.js +2 -12
  100. package/GridContainer/index.js.map +1 -1
  101. package/GridContainer/index.mjs +2 -10
  102. package/GridContainer/index.mjs.map +1 -1
  103. package/GridItem/index.js +2 -12
  104. package/GridItem/index.js.map +1 -1
  105. package/GridItem/index.mjs +2 -10
  106. package/GridItem/index.mjs.map +1 -1
  107. package/IconButton/index.js +3 -15
  108. package/IconButton/index.js.map +1 -1
  109. package/IconButton/index.mjs +2 -12
  110. package/IconButton/index.mjs.map +1 -1
  111. package/Image/index.js +2 -13
  112. package/Image/index.js.map +1 -1
  113. package/Image/index.mjs +2 -11
  114. package/Image/index.mjs.map +1 -1
  115. package/Input/index.js +3 -15
  116. package/Input/index.js.map +1 -1
  117. package/Input/index.mjs +2 -12
  118. package/Input/index.mjs.map +1 -1
  119. package/Label/index.js +2 -12
  120. package/Label/index.js.map +1 -1
  121. package/Label/index.mjs +2 -10
  122. package/Label/index.mjs.map +1 -1
  123. package/Layer/index.js +4 -17
  124. package/Layer/index.js.map +1 -1
  125. package/Layer/index.mjs +2 -13
  126. package/Layer/index.mjs.map +1 -1
  127. package/LineProgress/index.js +2 -13
  128. package/LineProgress/index.js.map +1 -1
  129. package/LineProgress/index.mjs +2 -11
  130. package/LineProgress/index.mjs.map +1 -1
  131. package/List/index.js +2 -12
  132. package/List/index.js.map +1 -1
  133. package/List/index.mjs +2 -10
  134. package/List/index.mjs.map +1 -1
  135. package/ListItem/index.js +3 -14
  136. package/ListItem/index.js.map +1 -1
  137. package/ListItem/index.mjs +2 -11
  138. package/ListItem/index.mjs.map +1 -1
  139. package/LoadingBox/index.js +3 -14
  140. package/LoadingBox/index.js.map +1 -1
  141. package/LoadingBox/index.mjs +2 -11
  142. package/LoadingBox/index.mjs.map +1 -1
  143. package/Menu/index.js +3 -16
  144. package/Menu/index.js.map +1 -1
  145. package/Menu/index.mjs +2 -13
  146. package/Menu/index.mjs.map +1 -1
  147. package/Modal/index.d.ts +1 -1
  148. package/Modal/index.js +3 -15
  149. package/Modal/index.js.map +1 -1
  150. package/Modal/index.mjs +2 -12
  151. package/Modal/index.mjs.map +1 -1
  152. package/NoSSR/index.js +2 -10
  153. package/NoSSR/index.js.map +1 -1
  154. package/NoSSR/index.mjs +2 -8
  155. package/NoSSR/index.mjs.map +1 -1
  156. package/Option/index.js +3 -13
  157. package/Option/index.js.map +1 -1
  158. package/Option/index.mjs +2 -10
  159. package/Option/index.mjs.map +1 -1
  160. package/Paper/index.js +2 -12
  161. package/Paper/index.js.map +1 -1
  162. package/Paper/index.mjs +2 -10
  163. package/Paper/index.mjs.map +1 -1
  164. package/Portal/index.js +2 -13
  165. package/Portal/index.js.map +1 -1
  166. package/Portal/index.mjs +2 -11
  167. package/Portal/index.mjs.map +1 -1
  168. package/Radio/index.js +3 -15
  169. package/Radio/index.js.map +1 -1
  170. package/Radio/index.mjs +2 -12
  171. package/Radio/index.mjs.map +1 -1
  172. package/Scrollbar/index.js +2 -13
  173. package/Scrollbar/index.js.map +1 -1
  174. package/Scrollbar/index.mjs +2 -11
  175. package/Scrollbar/index.mjs.map +1 -1
  176. package/Select/index.js +5 -22
  177. package/Select/index.js.map +1 -1
  178. package/Select/index.mjs +2 -17
  179. package/Select/index.mjs.map +1 -1
  180. package/Stack/index.js +2 -12
  181. package/Stack/index.js.map +1 -1
  182. package/Stack/index.mjs +2 -10
  183. package/Stack/index.mjs.map +1 -1
  184. package/Switch/index.js +2 -13
  185. package/Switch/index.js.map +1 -1
  186. package/Switch/index.mjs +2 -11
  187. package/Switch/index.mjs.map +1 -1
  188. package/Tab/index.js +3 -15
  189. package/Tab/index.js.map +1 -1
  190. package/Tab/index.mjs +2 -12
  191. package/Tab/index.mjs.map +1 -1
  192. package/Table/index.js +3 -14
  193. package/Table/index.js.map +1 -1
  194. package/Table/index.mjs +2 -11
  195. package/Table/index.mjs.map +1 -1
  196. package/TableBody/index.js +2 -12
  197. package/TableBody/index.js.map +1 -1
  198. package/TableBody/index.mjs +2 -10
  199. package/TableBody/index.mjs.map +1 -1
  200. package/TableCell/index.js +2 -12
  201. package/TableCell/index.js.map +1 -1
  202. package/TableCell/index.mjs +2 -10
  203. package/TableCell/index.mjs.map +1 -1
  204. package/TableFooter/index.js +2 -12
  205. package/TableFooter/index.js.map +1 -1
  206. package/TableFooter/index.mjs +2 -10
  207. package/TableFooter/index.mjs.map +1 -1
  208. package/TableHead/index.js +2 -12
  209. package/TableHead/index.js.map +1 -1
  210. package/TableHead/index.mjs +2 -10
  211. package/TableHead/index.mjs.map +1 -1
  212. package/TablePagination/index.d.ts +1 -0
  213. package/TablePagination/index.js +14 -35
  214. package/TablePagination/index.js.map +1 -1
  215. package/TablePagination/index.mjs +12 -31
  216. package/TablePagination/index.mjs.map +1 -1
  217. package/TableRow/index.js +2 -12
  218. package/TableRow/index.js.map +1 -1
  219. package/TableRow/index.mjs +2 -10
  220. package/TableRow/index.mjs.map +1 -1
  221. package/Tabs/index.js +3 -14
  222. package/Tabs/index.js.map +1 -1
  223. package/Tabs/index.mjs +3 -12
  224. package/Tabs/index.mjs.map +1 -1
  225. package/Text/index.js +2 -12
  226. package/Text/index.js.map +1 -1
  227. package/Text/index.mjs +2 -10
  228. package/Text/index.mjs.map +1 -1
  229. package/Toast/index.js +4 -18
  230. package/Toast/index.js.map +1 -1
  231. package/Toast/index.mjs +2 -14
  232. package/Toast/index.mjs.map +1 -1
  233. package/Tooltip/index.js +3 -14
  234. package/Tooltip/index.js.map +1 -1
  235. package/Tooltip/index.mjs +2 -11
  236. package/Tooltip/index.mjs.map +1 -1
  237. package/ViewBox/index.js +3 -14
  238. package/ViewBox/index.js.map +1 -1
  239. package/ViewBox/index.mjs +2 -11
  240. package/ViewBox/index.mjs.map +1 -1
  241. package/index.js +1 -116
  242. package/index.js.map +1 -1
  243. package/index.mjs +1 -56
  244. package/index.mjs.map +1 -1
  245. package/package.json +11 -2
  246. package/readme.md +104 -104
  247. package/useAlert/index.js +5 -19
  248. package/useAlert/index.js.map +1 -1
  249. package/useAlert/index.mjs +2 -14
  250. package/useAlert/index.mjs.map +1 -1
  251. package/useBlurCss/index.js +2 -10
  252. package/useBlurCss/index.js.map +1 -1
  253. package/useBlurCss/index.mjs +2 -8
  254. package/useBlurCss/index.mjs.map +1 -1
  255. package/useCorner/index.js +2 -7
  256. package/useCorner/index.js.map +1 -1
  257. package/useCorner/index.mjs +1 -4
  258. package/useCorner/index.mjs.map +1 -1
  259. package/useLayer/index.js +3 -14
  260. package/useLayer/index.js.map +1 -1
  261. package/useLayer/index.mjs +2 -11
  262. package/useLayer/index.mjs.map +1 -1
  263. package/useModal/index.js +3 -14
  264. package/useModal/index.js.map +1 -1
  265. package/useModal/index.mjs +2 -11
  266. package/useModal/index.mjs.map +1 -1
@@ -1 +1 @@
1
- {"version":3,"file":"index.mjs","sources":["../../src/Tabs/index.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport React, { useEffect, ReactElement, useMemo, cloneElement, useState, Children, useRef } from 'react'\r\nimport { TabProps } from '../Tab'\r\nimport { Tag, TagProps, useBreakpointProps, UseColorTemplateColor, useInterface, useBreakpointPropsType, Transition } from '@xanui/core'\r\nimport { ButtonProps } from '../Button'\r\n\r\n\r\ntype ValueType = string | number\r\nexport type TabsProps = Omit<TagProps, 'onChange'> & {\r\n children: ReactElement<TabProps> | ReactElement<TabProps>[];\r\n value?: ValueType;\r\n onChange?: (value: ValueType) => void;\r\n variant?: useBreakpointPropsType<\"start-line\" | \"end-line\" | \"fill\" | \"outline\" | \"text\" | \"soft\">;\r\n color?: useBreakpointPropsType<UseColorTemplateColor>;\r\n verticle?: useBreakpointPropsType<boolean>;\r\n disableTransition?: useBreakpointPropsType<boolean>;\r\n indicatorSize?: useBreakpointPropsType<number>;\r\n\r\n slotProps?: {\r\n content?: Omit<TagProps, \"children\">;\r\n button?: Omit<ButtonProps, \"children\" | \"color\" | \"variant\" | \"classNames\">;\r\n }\r\n}\r\n\r\nconst getRect = (ele: HTMLElement, parent: HTMLElement) => {\r\n const _rect: any = {};\r\n const parentRect = parent.getBoundingClientRect();\r\n const childRect = ele.getBoundingClientRect();\r\n _rect.top = childRect.top - parentRect.top;\r\n _rect.right = childRect.right - parentRect.right;\r\n _rect.bottom = childRect.bottom - parentRect.bottom;\r\n _rect.left = childRect.left - parentRect.left;\r\n _rect.width = childRect.width;\r\n _rect.height = childRect.height;\r\n return _rect\r\n}\r\n\r\nconst Tabs = React.forwardRef(({ onChange, value, children, ...props }: TabsProps, ref: any) => {\r\n let [{ verticle, color, variant, indicatorSize, disableTransition, slotProps, ...rest }] = useInterface<any>(\"Tabs\", props, {})\r\n const _p: any = {}\r\n if (variant) _p.variant = variant\r\n if (color) _p.color = color\r\n if (verticle) _p.verticle = verticle\r\n if (disableTransition) _p.disableTransition = disableTransition\r\n if (indicatorSize) _p.indicatorSize = indicatorSize\r\n const p: any = useBreakpointProps(_p)\r\n\r\n variant = p.variant ?? \"end-line\"\r\n color = p.color ?? \"brand\"\r\n verticle = p.verticle\r\n disableTransition = p.disableTransition\r\n indicatorSize = p.indicatorSize ?? 3\r\n\r\n ref = ref || useRef(null)\r\n const containerRef: any = useRef(null)\r\n const [trans, setTrans] = useState<any>()\r\n\r\n const { childs, selectedIndex } = useMemo(() => {\r\n let info: any = {\r\n childs: null,\r\n selectedIndex: 0\r\n }\r\n info.childs = Children.map(children, (child: any, idx: number) => {\r\n let selected = child.props.value === value\r\n if (selected) {\r\n info.selectedIndex = idx\r\n }\r\n\r\n let btnProps: any = {}\r\n if (variant === 'fill' && selected) {\r\n btnProps = {\r\n sx: {\r\n bgcolor: \"transparent!importnat\",\r\n color: \"#FFFFFF!important\"\r\n }\r\n }\r\n } else if (variant === 'soft' && selected) {\r\n btnProps = {\r\n sx: {\r\n bgcolor: \"transparent!importnat\",\r\n }\r\n }\r\n }\r\n\r\n // delete child.props.value\r\n return cloneElement(child, {\r\n corner: \"square\",\r\n value: undefined,\r\n onClick: () => {\r\n onChange && onChange(child.props.value)\r\n },\r\n ...slotProps?.button,\r\n ...btnProps,\r\n color: selected ? color : \"default\",\r\n variant: \"text\",\r\n classNames: [child.props.classNames, { \"tab-selected\": selected }],\r\n })\r\n })\r\n return info\r\n }, [children, onChange, value, variant, color, verticle])\r\n\r\n useEffect(() => {\r\n let con = containerRef.current\r\n const conChilds = con.children\r\n if (conChilds && conChilds[selectedIndex]) {\r\n const selectedTab = con.querySelector(\".tab-selected\") || conChilds[0]\r\n const prevRect = getRect(selectedTab, con)\r\n const rect = getRect(conChilds[selectedIndex], con)\r\n\r\n let anim: any = () => ({})\r\n if (verticle) {\r\n let v: any = {\r\n from: {\r\n top: prevRect?.top || 0,\r\n height: prevRect?.height || 0,\r\n },\r\n to: {\r\n top: rect?.top || 0,\r\n height: rect?.height || 0,\r\n }\r\n }\r\n\r\n if ([\"fill\", \"soft\", \"outline\"].includes(variant)) {\r\n v.from.width = prevRect?.width\r\n v.to.width = rect?.width\r\n }\r\n anim = () => v\r\n } else {\r\n let v: any = {\r\n from: {\r\n left: prevRect?.left || 0,\r\n width: prevRect?.width || 0,\r\n },\r\n to: {\r\n left: rect?.left || 0,\r\n width: rect?.width || 0,\r\n },\r\n }\r\n\r\n if ([\"fill\", \"soft\", \"outline\"].includes(variant)) {\r\n v.from.height = prevRect?.height || 0\r\n v.to.height = rect?.height || 0\r\n }\r\n anim = () => v\r\n }\r\n setTrans(() => anim)\r\n }\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [selectedIndex, variant, color, verticle])\r\n\r\n let indicatorProps: any = useMemo(() => {\r\n let _indicatorProps: any = {}\r\n switch (variant) {\r\n case \"start-line\":\r\n if (verticle) {\r\n _indicatorProps = {\r\n left: 0,\r\n width: indicatorSize\r\n }\r\n } else {\r\n _indicatorProps = {\r\n top: 0,\r\n height: indicatorSize\r\n }\r\n }\r\n break;\r\n case \"end-line\":\r\n if (verticle) {\r\n _indicatorProps = {\r\n right: 0,\r\n width: indicatorSize\r\n }\r\n } else {\r\n _indicatorProps = {\r\n bottom: 0,\r\n height: indicatorSize\r\n }\r\n }\r\n break;\r\n case \"fill\":\r\n _indicatorProps = {\r\n top: 0,\r\n bgcolor: color\r\n }\r\n break;\r\n case \"outline\":\r\n _indicatorProps = {\r\n top: 0,\r\n border: \"1px solid\",\r\n borderColor: color,\r\n bgcolor: \"transparent\"\r\n }\r\n break;\r\n case \"soft\":\r\n _indicatorProps = {\r\n top: 0,\r\n bgcolor: `${color}.soft.primary`\r\n }\r\n break;\r\n case \"text\":\r\n _indicatorProps = {\r\n display: \"none\"\r\n }\r\n break;\r\n }\r\n return _indicatorProps\r\n }, [selectedIndex, variant, color, verticle])\r\n\r\n return (\r\n <Tag\r\n {...rest}\r\n baseClass='tabs'\r\n ref={ref}\r\n sxr={{\r\n position: \"relative\",\r\n zIndex: 1,\r\n display: \"inline-block\"\r\n }}\r\n >\r\n <Tag\r\n {...slotProps?.content}\r\n baseClass='tabs-content'\r\n sxr={{\r\n display: verticle ? \"flex\" : \"inline-flex\",\r\n flexDirection: verticle ? \"column\" : \"row\",\r\n }}\r\n ref={containerRef}\r\n >\r\n {childs}\r\n </Tag>\r\n <Transition\r\n open={!!trans}\r\n variant={trans || (() => ({ from: {}, to: {} }))}\r\n duration={trans ? (disableTransition ? 0 : 250) : 0}\r\n easing=\"smooth\"\r\n >\r\n <Tag\r\n baseClass='tabs-indicator'\r\n // className={classname}\r\n sxr={{\r\n position: \"absolute\",\r\n zIndex: -1,\r\n cursor: \"pointer\",\r\n bgcolor: color\r\n }}\r\n {...indicatorProps}\r\n >\r\n </Tag>\r\n </Transition>\r\n </Tag>\r\n )\r\n})\r\n\r\nexport default Tabs"],"names":[],"mappings":";;;;;;AAyBA;;AAEI;AACA;;;;;AAKA;AACA;AACA;AACJ;AAEA;;;AACI;;AAEA;AAAa;AACb;AAAW;AACX;AAAc;AACd;AAAuB;AACvB;AAAmB;AACnB;AAEA;AACA;AACA;AACA;AACA;AAEA;AACA;;;AAII;AACI;AACA;;AAEJ;;;AAGQ;;;AAIJ;AACI;AACI;AACI;AACA;AACH;;;AAEF;AACH;AACI;AACI;AACH;;;;AAKT;;AAKI;AAOR;AACA;AACJ;;AAGI;AACA;AACA;AACI;;;;;AAMI;AACI;;;AAGC;AACD;;;AAGC;;AAGL;AACI;AACA;;AAEJ;;;AAEA;AACI;;;AAGC;AACD;;;AAGC;;AAGL;AACI;AACA;;AAEJ;;AAEJ;;;;AAKR;;;AAGQ;;AAEQ;AACI;AACA;;;;AAGJ;AACI;AACA;;;;AAIZ;;AAEQ;AACI;AACA;;;;AAGJ;AACI;AACA;;;;AAIZ;AACI;AACI;AACA;;;AAGR;AACI;AACI;AACA;AACA;AACA;;;AAGR;AACI;AACI;;;;AAIR;AACI;AACI;;;;AAIZ;;AAGJ;AAMY;AACA;AACA;AACH;;;AAQI;;AAcG;AACI;;AAEA;AACA;AACH;AAOrB;;"}
1
+ {"version":3,"file":"index.mjs","sources":["../../src/Tabs/index.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { useEffect, ReactElement, useMemo, cloneElement, useState, Children, useRef } from 'react'\nimport { TabProps } from '../Tab'\nimport { Tag, TagProps, useBreakpointProps, UseColorTemplateColor, useInterface, useBreakpointPropsType, Transition } from '@xanui/core'\nimport { ButtonProps } from '../Button'\n\n\ntype ValueType = string | number\nexport type TabsProps = Omit<TagProps, 'onChange'> & {\n children: ReactElement<TabProps> | ReactElement<TabProps>[];\n value?: ValueType;\n onChange?: (value: ValueType) => void;\n variant?: useBreakpointPropsType<\"start-line\" | \"end-line\" | \"fill\" | \"outline\" | \"text\" | \"soft\">;\n color?: useBreakpointPropsType<UseColorTemplateColor>;\n verticle?: useBreakpointPropsType<boolean>;\n disableTransition?: useBreakpointPropsType<boolean>;\n indicatorSize?: useBreakpointPropsType<number>;\n\n slotProps?: {\n content?: Omit<TagProps, \"children\">;\n button?: Omit<ButtonProps, \"children\" | \"color\" | \"variant\" | \"classNames\">;\n }\n}\n\nconst getRect = (ele: HTMLElement, parent: HTMLElement) => {\n const _rect: any = {};\n const parentRect = parent.getBoundingClientRect();\n const childRect = ele.getBoundingClientRect();\n _rect.top = childRect.top - parentRect.top;\n _rect.right = childRect.right - parentRect.right;\n _rect.bottom = childRect.bottom - parentRect.bottom;\n _rect.left = childRect.left - parentRect.left;\n _rect.width = childRect.width;\n _rect.height = childRect.height;\n return _rect\n}\n\nconst Tabs = React.forwardRef(({ onChange, value, children, ...props }: TabsProps, ref: any) => {\n let [{ verticle, color, variant, indicatorSize, disableTransition, slotProps, ...rest }] = useInterface<any>(\"Tabs\", props, {})\n const _p: any = {}\n if (variant) _p.variant = variant\n if (color) _p.color = color\n if (verticle) _p.verticle = verticle\n if (disableTransition) _p.disableTransition = disableTransition\n if (indicatorSize) _p.indicatorSize = indicatorSize\n const p: any = useBreakpointProps(_p)\n\n variant = p.variant ?? \"end-line\"\n color = p.color ?? \"brand\"\n verticle = p.verticle\n disableTransition = p.disableTransition\n indicatorSize = p.indicatorSize ?? 3\n\n ref = ref || useRef(null)\n const containerRef: any = useRef(null)\n const [trans, setTrans] = useState<any>()\n\n const { childs, selectedIndex } = useMemo(() => {\n let info: any = {\n childs: null,\n selectedIndex: 0\n }\n info.childs = Children.map(children, (child: any, idx: number) => {\n let selected = child.props.value === value\n if (selected) {\n info.selectedIndex = idx\n }\n\n let btnProps: any = {}\n if (variant === 'fill' && selected) {\n btnProps = {\n sx: {\n bgcolor: \"transparent!importnat\",\n color: \"#FFFFFF!important\"\n }\n }\n } else if (variant === 'soft' && selected) {\n btnProps = {\n sx: {\n bgcolor: \"transparent!importnat\",\n }\n }\n }\n\n // delete child.props.value\n return cloneElement(child, {\n corner: \"square\",\n value: undefined,\n onClick: () => {\n onChange && onChange(child.props.value)\n },\n ...slotProps?.button,\n ...btnProps,\n color: selected ? color : \"default\",\n variant: \"text\",\n classNames: [child.props.classNames, { \"tab-selected\": selected }],\n })\n })\n return info\n }, [children, onChange, value, variant, color, verticle])\n\n useEffect(() => {\n let con = containerRef.current\n const conChilds = con.children\n if (conChilds && conChilds[selectedIndex]) {\n const selectedTab = con.querySelector(\".tab-selected\") || conChilds[0]\n const prevRect = getRect(selectedTab, con)\n const rect = getRect(conChilds[selectedIndex], con)\n\n let anim: any = () => ({})\n if (verticle) {\n let v: any = {\n from: {\n top: prevRect?.top || 0,\n height: prevRect?.height || 0,\n },\n to: {\n top: rect?.top || 0,\n height: rect?.height || 0,\n }\n }\n\n if ([\"fill\", \"soft\", \"outline\"].includes(variant)) {\n v.from.width = prevRect?.width\n v.to.width = rect?.width\n }\n anim = () => v\n } else {\n let v: any = {\n from: {\n left: prevRect?.left || 0,\n width: prevRect?.width || 0,\n },\n to: {\n left: rect?.left || 0,\n width: rect?.width || 0,\n },\n }\n\n if ([\"fill\", \"soft\", \"outline\"].includes(variant)) {\n v.from.height = prevRect?.height || 0\n v.to.height = rect?.height || 0\n }\n anim = () => v\n }\n setTrans(() => anim)\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [selectedIndex, variant, color, verticle])\n\n let indicatorProps: any = useMemo(() => {\n let _indicatorProps: any = {}\n switch (variant) {\n case \"start-line\":\n if (verticle) {\n _indicatorProps = {\n left: 0,\n width: indicatorSize\n }\n } else {\n _indicatorProps = {\n top: 0,\n height: indicatorSize\n }\n }\n break;\n case \"end-line\":\n if (verticle) {\n _indicatorProps = {\n right: 0,\n width: indicatorSize\n }\n } else {\n _indicatorProps = {\n bottom: 0,\n height: indicatorSize\n }\n }\n break;\n case \"fill\":\n _indicatorProps = {\n top: 0,\n bgcolor: color\n }\n break;\n case \"outline\":\n _indicatorProps = {\n top: 0,\n border: \"1px solid\",\n borderColor: color,\n bgcolor: \"transparent\"\n }\n break;\n case \"soft\":\n _indicatorProps = {\n top: 0,\n bgcolor: `${color}.soft.primary`\n }\n break;\n case \"text\":\n _indicatorProps = {\n display: \"none\"\n }\n break;\n }\n return _indicatorProps\n }, [selectedIndex, variant, color, verticle])\n\n return (\n <Tag\n {...rest}\n baseClass='tabs'\n ref={ref}\n sxr={{\n position: \"relative\",\n zIndex: 1,\n display: \"inline-block\"\n }}\n >\n <Tag\n {...slotProps?.content}\n baseClass='tabs-content'\n sxr={{\n display: verticle ? \"flex\" : \"inline-flex\",\n flexDirection: verticle ? \"column\" : \"row\",\n }}\n ref={containerRef}\n >\n {childs}\n </Tag>\n <Transition\n open={!!trans}\n variant={trans}\n duration={trans ? (disableTransition ? 0 : 250) : 0}\n easing=\"smooth\"\n >\n <Tag\n baseClass='tabs-indicator'\n // className={classname}\n sxr={{\n position: \"absolute\",\n zIndex: -1,\n cursor: \"pointer\",\n bgcolor: color\n }}\n {...indicatorProps}\n >\n </Tag>\n </Transition>\n </Tag>\n )\n})\n\nexport default Tabs"],"names":["_jsxs","_jsx"],"mappings":"+NAyBA,MAAM,OAAO,GAAG,CAAC,GAAgB,EAAE,MAAmB,KAAI;IACtD,MAAM,KAAK,GAAQ,EAAE;AACrB,IAAA,MAAM,UAAU,GAAG,MAAM,CAAC,qBAAqB,EAAE;AACjD,IAAA,MAAM,SAAS,GAAG,GAAG,CAAC,qBAAqB,EAAE;IAC7C,KAAK,CAAC,GAAG,GAAG,SAAS,CAAC,GAAG,GAAG,UAAU,CAAC,GAAG;IAC1C,KAAK,CAAC,KAAK,GAAG,SAAS,CAAC,KAAK,GAAG,UAAU,CAAC,KAAK;IAChD,KAAK,CAAC,MAAM,GAAG,SAAS,CAAC,MAAM,GAAG,UAAU,CAAC,MAAM;IACnD,KAAK,CAAC,IAAI,GAAG,SAAS,CAAC,IAAI,GAAG,UAAU,CAAC,IAAI;AAC7C,IAAA,KAAK,CAAC,KAAK,GAAG,SAAS,CAAC,KAAK;AAC7B,IAAA,KAAK,CAAC,MAAM,GAAG,SAAS,CAAC,MAAM;AAC/B,IAAA,OAAO,KAAK;AAChB,CAAC;AAED,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAAC,CAAC,EAAkD,EAAE,GAAQ,KAAI;;QAAhE,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,OAAuB,EAAlB,KAAK,GAAA,MAAA,CAAA,EAAA,EAArC,CAAA,UAAA,EAAA,OAAA,EAAA,UAAA,CAAuC,CAAF;AAChE,IAAA,IAAI,CAAA,EAAA,CAAA,GAAuF,YAAY,CAAM,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,EAA1H,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAO,EAAE,aAAa,EAAE,iBAAiB,EAAE,SAAS,EAAA,GAAA,EAAW,EAAN,IAAI,GAAA,MAAA,CAAA,EAAA,EAAhF,CAAA,UAAA,EAAA,OAAA,EAAA,SAAA,EAAA,eAAA,EAAA,mBAAA,EAAA,WAAA,CAAkF,CAAwC;IAC/H,MAAM,EAAE,GAAQ,EAAE;AAClB,IAAA,IAAI,OAAO;AAAE,QAAA,EAAE,CAAC,OAAO,GAAG,OAAO;AACjC,IAAA,IAAI,KAAK;AAAE,QAAA,EAAE,CAAC,KAAK,GAAG,KAAK;AAC3B,IAAA,IAAI,QAAQ;AAAE,QAAA,EAAE,CAAC,QAAQ,GAAG,QAAQ;AACpC,IAAA,IAAI,iBAAiB;AAAE,QAAA,EAAE,CAAC,iBAAiB,GAAG,iBAAiB;AAC/D,IAAA,IAAI,aAAa;AAAE,QAAA,EAAE,CAAC,aAAa,GAAG,aAAa;AACnD,IAAA,MAAM,CAAC,GAAQ,kBAAkB,CAAC,EAAE,CAAC;AAErC,IAAA,OAAO,GAAG,CAAA,EAAA,GAAA,CAAC,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,UAAU;AACjC,IAAA,KAAK,GAAG,CAAA,EAAA,GAAA,CAAC,CAAC,KAAK,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,OAAO;AAC1B,IAAA,QAAQ,GAAG,CAAC,CAAC,QAAQ;AACrB,IAAA,iBAAiB,GAAG,CAAC,CAAC,iBAAiB;AACvC,IAAA,aAAa,GAAG,CAAA,EAAA,GAAA,CAAC,CAAC,aAAa,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,CAAC;AAEpC,IAAA,GAAG,GAAG,GAAG,IAAI,MAAM,CAAC,IAAI,CAAC;AACzB,IAAA,MAAM,YAAY,GAAQ,MAAM,CAAC,IAAI,CAAC;IACtC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,EAAO;IAEzC,MAAM,EAAE,MAAM,EAAE,aAAa,EAAE,GAAG,OAAO,CAAC,MAAK;AAC3C,QAAA,IAAI,IAAI,GAAQ;AACZ,YAAA,MAAM,EAAE,IAAI;AACZ,YAAA,aAAa,EAAE;SAClB;AACD,QAAA,IAAI,CAAC,MAAM,GAAG,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAU,EAAE,GAAW,KAAI;YAC7D,IAAI,QAAQ,GAAG,KAAK,CAAC,KAAK,CAAC,KAAK,KAAK,KAAK;YAC1C,IAAI,QAAQ,EAAE;AACV,gBAAA,IAAI,CAAC,aAAa,GAAG,GAAG;YAC5B;YAEA,IAAI,QAAQ,GAAQ,EAAE;AACtB,YAAA,IAAI,OAAO,KAAK,MAAM,IAAI,QAAQ,EAAE;AAChC,gBAAA,QAAQ,GAAG;AACP,oBAAA,EAAE,EAAE;AACA,wBAAA,OAAO,EAAE,uBAAuB;AAChC,wBAAA,KAAK,EAAE;AACV;iBACJ;YACL;AAAO,iBAAA,IAAI,OAAO,KAAK,MAAM,IAAI,QAAQ,EAAE;AACvC,gBAAA,QAAQ,GAAG;AACP,oBAAA,EAAE,EAAE;AACA,wBAAA,OAAO,EAAE,uBAAuB;AACnC;iBACJ;YACL;;AAGA,YAAA,OAAO,YAAY,CAAC,KAAK,EAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EACrB,MAAM,EAAE,QAAQ,EAChB,KAAK,EAAE,SAAS,EAChB,OAAO,EAAE,MAAK;oBACV,QAAQ,IAAI,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC;AAC3C,gBAAA,CAAC,IACE,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,MAAA,GAAA,MAAA,GAAT,SAAS,CAAE,MAAM,CAAA,EACjB,QAAQ,CAAA,EAAA,EACX,KAAK,EAAE,QAAQ,GAAG,KAAK,GAAG,SAAS,EACnC,OAAO,EAAE,MAAM,EACf,UAAU,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,EAAE,EAAE,cAAc,EAAE,QAAQ,EAAE,CAAC,IACpE;AACN,QAAA,CAAC,CAAC;AACF,QAAA,OAAO,IAAI;AACf,IAAA,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,CAAC,CAAC;IAEzD,SAAS,CAAC,MAAK;AACX,QAAA,IAAI,GAAG,GAAG,YAAY,CAAC,OAAO;AAC9B,QAAA,MAAM,SAAS,GAAG,GAAG,CAAC,QAAQ;AAC9B,QAAA,IAAI,SAAS,IAAI,SAAS,CAAC,aAAa,CAAC,EAAE;AACvC,YAAA,MAAM,WAAW,GAAG,GAAG,CAAC,aAAa,CAAC,eAAe,CAAC,IAAI,SAAS,CAAC,CAAC,CAAC;YACtE,MAAM,QAAQ,GAAG,OAAO,CAAC,WAAW,EAAE,GAAG,CAAC;YAC1C,MAAM,IAAI,GAAG,OAAO,CAAC,SAAS,CAAC,aAAa,CAAC,EAAE,GAAG,CAAC;YAEnD,IAAI,IAAI,GAAQ,OAAO,EAAE,CAAC;YAC1B,IAAI,QAAQ,EAAE;AACV,gBAAA,IAAI,CAAC,GAAQ;AACT,oBAAA,IAAI,EAAE;wBACF,GAAG,EAAE,CAAA,QAAQ,KAAA,IAAA,IAAR,QAAQ,uBAAR,QAAQ,CAAE,GAAG,KAAI,CAAC;wBACvB,MAAM,EAAE,CAAA,QAAQ,KAAA,IAAA,IAAR,QAAQ,uBAAR,QAAQ,CAAE,MAAM,KAAI,CAAC;AAChC,qBAAA;AACD,oBAAA,EAAE,EAAE;wBACA,GAAG,EAAE,CAAA,IAAI,KAAA,IAAA,IAAJ,IAAI,uBAAJ,IAAI,CAAE,GAAG,KAAI,CAAC;wBACnB,MAAM,EAAE,CAAA,IAAI,KAAA,IAAA,IAAJ,IAAI,uBAAJ,IAAI,CAAE,MAAM,KAAI,CAAC;AAC5B;iBACJ;AAED,gBAAA,IAAI,CAAC,MAAM,EAAE,MAAM,EAAE,SAAS,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC,EAAE;AAC/C,oBAAA,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,QAAQ,KAAA,IAAA,IAAR,QAAQ,KAAA,MAAA,GAAA,MAAA,GAAR,QAAQ,CAAE,KAAK;AAC9B,oBAAA,CAAC,CAAC,EAAE,CAAC,KAAK,GAAG,IAAI,KAAA,IAAA,IAAJ,IAAI,KAAA,MAAA,GAAA,MAAA,GAAJ,IAAI,CAAE,KAAK;gBAC5B;AACA,gBAAA,IAAI,GAAG,MAAM,CAAC;YAClB;iBAAO;AACH,gBAAA,IAAI,CAAC,GAAQ;AACT,oBAAA,IAAI,EAAE;wBACF,IAAI,EAAE,CAAA,QAAQ,KAAA,IAAA,IAAR,QAAQ,uBAAR,QAAQ,CAAE,IAAI,KAAI,CAAC;wBACzB,KAAK,EAAE,CAAA,QAAQ,KAAA,IAAA,IAAR,QAAQ,uBAAR,QAAQ,CAAE,KAAK,KAAI,CAAC;AAC9B,qBAAA;AACD,oBAAA,EAAE,EAAE;wBACA,IAAI,EAAE,CAAA,IAAI,KAAA,IAAA,IAAJ,IAAI,uBAAJ,IAAI,CAAE,IAAI,KAAI,CAAC;wBACrB,KAAK,EAAE,CAAA,IAAI,KAAA,IAAA,IAAJ,IAAI,uBAAJ,IAAI,CAAE,KAAK,KAAI,CAAC;AAC1B,qBAAA;iBACJ;AAED,gBAAA,IAAI,CAAC,MAAM,EAAE,MAAM,EAAE,SAAS,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC,EAAE;AAC/C,oBAAA,CAAC,CAAC,IAAI,CAAC,MAAM,GAAG,CAAA,QAAQ,KAAA,IAAA,IAAR,QAAQ,uBAAR,QAAQ,CAAE,MAAM,KAAI,CAAC;AACrC,oBAAA,CAAC,CAAC,EAAE,CAAC,MAAM,GAAG,CAAA,IAAI,KAAA,IAAA,IAAJ,IAAI,uBAAJ,IAAI,CAAE,MAAM,KAAI,CAAC;gBACnC;AACA,gBAAA,IAAI,GAAG,MAAM,CAAC;YAClB;AACA,YAAA,QAAQ,CAAC,MAAM,IAAI,CAAC;QACxB;;IAEJ,CAAC,EAAE,CAAC,aAAa,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,CAAC,CAAC;AAE7C,IAAA,IAAI,cAAc,GAAQ,OAAO,CAAC,MAAK;QACnC,IAAI,eAAe,GAAQ,EAAE;QAC7B,QAAQ,OAAO;AACX,YAAA,KAAK,YAAY;gBACb,IAAI,QAAQ,EAAE;AACV,oBAAA,eAAe,GAAG;AACd,wBAAA,IAAI,EAAE,CAAC;AACP,wBAAA,KAAK,EAAE;qBACV;gBACL;qBAAO;AACH,oBAAA,eAAe,GAAG;AACd,wBAAA,GAAG,EAAE,CAAC;AACN,wBAAA,MAAM,EAAE;qBACX;gBACL;gBACA;AACJ,YAAA,KAAK,UAAU;gBACX,IAAI,QAAQ,EAAE;AACV,oBAAA,eAAe,GAAG;AACd,wBAAA,KAAK,EAAE,CAAC;AACR,wBAAA,KAAK,EAAE;qBACV;gBACL;qBAAO;AACH,oBAAA,eAAe,GAAG;AACd,wBAAA,MAAM,EAAE,CAAC;AACT,wBAAA,MAAM,EAAE;qBACX;gBACL;gBACA;AACJ,YAAA,KAAK,MAAM;AACP,gBAAA,eAAe,GAAG;AACd,oBAAA,GAAG,EAAE,CAAC;AACN,oBAAA,OAAO,EAAE;iBACZ;gBACD;AACJ,YAAA,KAAK,SAAS;AACV,gBAAA,eAAe,GAAG;AACd,oBAAA,GAAG,EAAE,CAAC;AACN,oBAAA,MAAM,EAAE,WAAW;AACnB,oBAAA,WAAW,EAAE,KAAK;AAClB,oBAAA,OAAO,EAAE;iBACZ;gBACD;AACJ,YAAA,KAAK,MAAM;AACP,gBAAA,eAAe,GAAG;AACd,oBAAA,GAAG,EAAE,CAAC;oBACN,OAAO,EAAE,CAAA,EAAG,KAAK,CAAA,aAAA;iBACpB;gBACD;AACJ,YAAA,KAAK,MAAM;AACP,gBAAA,eAAe,GAAG;AACd,oBAAA,OAAO,EAAE;iBACZ;gBACD;;AAER,QAAA,OAAO,eAAe;IAC1B,CAAC,EAAE,CAAC,aAAa,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,CAAC,CAAC;AAE7C,IAAA,QACIA,IAAA,CAAC,GAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACI,IAAI,EAAA,EACR,SAAS,EAAC,MAAM,EAChB,GAAG,EAAE,GAAG,EACR,GAAG,EAAE;AACD,YAAA,QAAQ,EAAE,UAAU;AACpB,YAAA,MAAM,EAAE,CAAC;AACT,YAAA,OAAO,EAAE;AACZ,SAAA,EAAA,QAAA,EAAA,CAEDC,IAAC,GAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACI,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,MAAA,GAAA,MAAA,GAAT,SAAS,CAAE,OAAO,IACtB,SAAS,EAAC,cAAc,EACxB,GAAG,EAAE;oBACD,OAAO,EAAE,QAAQ,GAAG,MAAM,GAAG,aAAa;oBAC1C,aAAa,EAAE,QAAQ,GAAG,QAAQ,GAAG,KAAK;iBAC7C,EACD,GAAG,EAAE,YAAY,EAAA,QAAA,EAEhB,MAAM,EAAA,CAAA,CACL,EACNA,GAAA,CAAC,UAAU,EAAA,EACP,IAAI,EAAE,CAAC,CAAC,KAAK,EACb,OAAO,EAAE,KAAK,EACd,QAAQ,EAAE,KAAK,IAAI,iBAAiB,GAAG,CAAC,GAAG,GAAG,IAAI,CAAC,EACnD,MAAM,EAAC,QAAQ,EAAA,QAAA,EAEfA,IAAC,GAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EACA,SAAS,EAAC,gBAAgB;;AAE1B,oBAAA,GAAG,EAAE;AACD,wBAAA,QAAQ,EAAE,UAAU;wBACpB,MAAM,EAAE,EAAE;AACV,wBAAA,MAAM,EAAE,SAAS;AACjB,wBAAA,OAAO,EAAE;AACZ,qBAAA,EAAA,EACG,cAAc,CAAA,CAEhB,EAAA,CACG,CAAA,EAAA,CAAA,CACX;AAEd,CAAC"}
package/Text/index.js CHANGED
@@ -1,11 +1,4 @@
1
- 'use strict';
2
-
3
- var tslib = require('tslib');
4
- var jsxRuntime = require('react/jsx-runtime');
5
- var React = require('react');
6
- var core = require('@xanui/core');
7
-
8
- const Text = React.forwardRef((_a, ref) => {
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 Text = React.forwardRef((_a, ref) => {
9
2
  var _b;
10
3
  var { children, variant } = _a, props = tslib.__rest(_a, ["children", "variant"]);
11
4
  const _p = {};
@@ -19,7 +12,4 @@ const Text = React.forwardRef((_a, ref) => {
19
12
  fontWeight: variant,
20
13
  color: "text.primary",
21
14
  }, baseClass: 'text', ref: ref, children: children })));
22
- });
23
-
24
- module.exports = Text;
25
- //# sourceMappingURL=index.js.map
15
+ });exports.default=Text;//# sourceMappingURL=index.js.map
package/Text/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../../src/Text/index.tsx"],"sourcesContent":["\r\nimport React from 'react';\r\nimport { Tag, TagProps, TagComponentType, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\r\n\r\n\r\nexport type TextProps<T extends TagComponentType = \"p\"> = TagProps<T> & {\r\n variant?: useBreakpointPropsType<\"text\" | \"button\" | \"small\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\">\r\n}\r\n\r\nconst Text = React.forwardRef(<T extends TagComponentType = \"p\">({ children, variant, ...props }: TextProps<T>, ref?: React.Ref<any>) => {\r\n const _p: any = {}\r\n if (variant) _p.variant = variant\r\n const p: any = useBreakpointProps(_p)\r\n variant = p.variant ?? 'text'\r\n\r\n return (\r\n <Tag\r\n component={(variant as string).startsWith('h') ? variant as any : \"p\"}\r\n {...props}\r\n sxr={{\r\n fontSize: variant,\r\n lineHeight: variant,\r\n fontWeight: variant,\r\n color: \"text.primary\",\r\n }}\r\n baseClass='text'\r\n ref={ref}\r\n >{children}</Tag>\r\n )\r\n})\r\n\r\nexport default Text\r\n"],"names":["__rest","useBreakpointProps","_jsx","Tag"],"mappings":";;;;;;;AASA,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAAC,CAAmC,EAA6C,EAAE,GAAoB,KAAI;;QAAvE,EAAE,QAAQ,EAAE,OAAO,EAAA,GAAA,EAA0B,EAArB,KAAK,GAAAA,YAAA,CAAA,EAAA,EAA7B,uBAA+B,CAAF;IAC1F,MAAM,EAAE,GAAQ,EAAE;AAClB,IAAA,IAAI,OAAO;AAAE,QAAA,EAAE,CAAC,OAAO,GAAG,OAAO;AACjC,IAAA,MAAM,CAAC,GAAQC,uBAAkB,CAAC,EAAE,CAAC;AACrC,IAAA,OAAO,GAAG,CAAA,EAAA,GAAA,CAAC,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,MAAM;IAE7B,QACIC,cAAA,CAACC,QAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EACA,SAAS,EAAG,OAAkB,CAAC,UAAU,CAAC,GAAG,CAAC,GAAG,OAAc,GAAG,GAAG,EAAA,EACjE,KAAK,EAAA,EACT,GAAG,EAAE;AACD,YAAA,QAAQ,EAAE,OAAO;AACjB,YAAA,UAAU,EAAE,OAAO;AACnB,YAAA,UAAU,EAAE,OAAO;AACnB,YAAA,KAAK,EAAE,cAAc;SACxB,EACD,SAAS,EAAC,MAAM,EAChB,GAAG,EAAE,GAAG,EAAA,QAAA,EACV,QAAQ,EAAA,CAAA,CAAO;AAEzB,CAAC;;;;"}
1
+ {"version":3,"file":"index.js","sources":["../../src/Text/index.tsx"],"sourcesContent":["\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\n\n\nexport type TextProps<T extends TagComponentType = \"p\"> = TagProps<T> & {\n variant?: useBreakpointPropsType<\"text\" | \"button\" | \"small\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\">\n}\n\nconst Text = React.forwardRef(<T extends TagComponentType = \"p\">({ children, variant, ...props }: TextProps<T>, ref?: React.Ref<any>) => {\n const _p: any = {}\n if (variant) _p.variant = variant\n const p: any = useBreakpointProps(_p)\n variant = p.variant ?? 'text'\n\n return (\n <Tag\n component={(variant as string).startsWith('h') ? variant as any : \"p\"}\n {...props}\n sxr={{\n fontSize: variant,\n lineHeight: variant,\n fontWeight: variant,\n color: \"text.primary\",\n }}\n baseClass='text'\n ref={ref}\n >{children}</Tag>\n )\n})\n\nexport default Text\n"],"names":["__rest","useBreakpointProps","_jsx","Tag"],"mappings":"4LASA,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAAC,CAAmC,EAA6C,EAAE,GAAoB,KAAI;;QAAvE,EAAE,QAAQ,EAAE,OAAO,EAAA,GAAA,EAA0B,EAArB,KAAK,GAAAA,YAAA,CAAA,EAAA,EAA7B,uBAA+B,CAAF;IAC1F,MAAM,EAAE,GAAQ,EAAE;AAClB,IAAA,IAAI,OAAO;AAAE,QAAA,EAAE,CAAC,OAAO,GAAG,OAAO;AACjC,IAAA,MAAM,CAAC,GAAQC,uBAAkB,CAAC,EAAE,CAAC;AACrC,IAAA,OAAO,GAAG,CAAA,EAAA,GAAA,CAAC,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,MAAM;IAE7B,QACIC,cAAA,CAACC,QAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EACA,SAAS,EAAG,OAAkB,CAAC,UAAU,CAAC,GAAG,CAAC,GAAG,OAAc,GAAG,GAAG,EAAA,EACjE,KAAK,EAAA,EACT,GAAG,EAAE;AACD,YAAA,QAAQ,EAAE,OAAO;AACjB,YAAA,UAAU,EAAE,OAAO;AACnB,YAAA,UAAU,EAAE,OAAO;AACnB,YAAA,KAAK,EAAE,cAAc;SACxB,EACD,SAAS,EAAC,MAAM,EAChB,GAAG,EAAE,GAAG,EAAA,QAAA,EACV,QAAQ,EAAA,CAAA,CAAO;AAEzB,CAAC"}
package/Text/index.mjs CHANGED
@@ -1,9 +1,4 @@
1
- import { __rest } from 'tslib';
2
- import { jsx } from 'react/jsx-runtime';
3
- import React from 'react';
4
- import { useBreakpointProps, Tag } from '@xanui/core';
5
-
6
- const Text = React.forwardRef((_a, ref) => {
1
+ import {__rest}from'tslib';import {jsx}from'react/jsx-runtime';import React from'react';import {useBreakpointProps,Tag}from'@xanui/core';const Text = React.forwardRef((_a, ref) => {
7
2
  var _b;
8
3
  var { children, variant } = _a, props = __rest(_a, ["children", "variant"]);
9
4
  const _p = {};
@@ -17,7 +12,4 @@ const Text = React.forwardRef((_a, ref) => {
17
12
  fontWeight: variant,
18
13
  color: "text.primary",
19
14
  }, baseClass: 'text', ref: ref, children: children })));
20
- });
21
-
22
- export { Text as default };
23
- //# sourceMappingURL=index.mjs.map
15
+ });export{Text as default};//# sourceMappingURL=index.mjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.mjs","sources":["../../src/Text/index.tsx"],"sourcesContent":["\r\nimport React from 'react';\r\nimport { Tag, TagProps, TagComponentType, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\r\n\r\n\r\nexport type TextProps<T extends TagComponentType = \"p\"> = TagProps<T> & {\r\n variant?: useBreakpointPropsType<\"text\" | \"button\" | \"small\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\">\r\n}\r\n\r\nconst Text = React.forwardRef(<T extends TagComponentType = \"p\">({ children, variant, ...props }: TextProps<T>, ref?: React.Ref<any>) => {\r\n const _p: any = {}\r\n if (variant) _p.variant = variant\r\n const p: any = useBreakpointProps(_p)\r\n variant = p.variant ?? 'text'\r\n\r\n return (\r\n <Tag\r\n component={(variant as string).startsWith('h') ? variant as any : \"p\"}\r\n {...props}\r\n sxr={{\r\n fontSize: variant,\r\n lineHeight: variant,\r\n fontWeight: variant,\r\n color: \"text.primary\",\r\n }}\r\n baseClass='text'\r\n ref={ref}\r\n >{children}</Tag>\r\n )\r\n})\r\n\r\nexport default Text\r\n"],"names":["_jsx"],"mappings":";;;;;AASA,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAAC,CAAmC,EAA6C,EAAE,GAAoB,KAAI;;QAAvE,EAAE,QAAQ,EAAE,OAAO,EAAA,GAAA,EAA0B,EAArB,KAAK,GAAA,MAAA,CAAA,EAAA,EAA7B,uBAA+B,CAAF;IAC1F,MAAM,EAAE,GAAQ,EAAE;AAClB,IAAA,IAAI,OAAO;AAAE,QAAA,EAAE,CAAC,OAAO,GAAG,OAAO;AACjC,IAAA,MAAM,CAAC,GAAQ,kBAAkB,CAAC,EAAE,CAAC;AACrC,IAAA,OAAO,GAAG,CAAA,EAAA,GAAA,CAAC,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,MAAM;IAE7B,QACIA,GAAA,CAAC,GAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EACA,SAAS,EAAG,OAAkB,CAAC,UAAU,CAAC,GAAG,CAAC,GAAG,OAAc,GAAG,GAAG,EAAA,EACjE,KAAK,EAAA,EACT,GAAG,EAAE;AACD,YAAA,QAAQ,EAAE,OAAO;AACjB,YAAA,UAAU,EAAE,OAAO;AACnB,YAAA,UAAU,EAAE,OAAO;AACnB,YAAA,KAAK,EAAE,cAAc;SACxB,EACD,SAAS,EAAC,MAAM,EAChB,GAAG,EAAE,GAAG,EAAA,QAAA,EACV,QAAQ,EAAA,CAAA,CAAO;AAEzB,CAAC;;;;"}
1
+ {"version":3,"file":"index.mjs","sources":["../../src/Text/index.tsx"],"sourcesContent":["\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\n\n\nexport type TextProps<T extends TagComponentType = \"p\"> = TagProps<T> & {\n variant?: useBreakpointPropsType<\"text\" | \"button\" | \"small\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\">\n}\n\nconst Text = React.forwardRef(<T extends TagComponentType = \"p\">({ children, variant, ...props }: TextProps<T>, ref?: React.Ref<any>) => {\n const _p: any = {}\n if (variant) _p.variant = variant\n const p: any = useBreakpointProps(_p)\n variant = p.variant ?? 'text'\n\n return (\n <Tag\n component={(variant as string).startsWith('h') ? variant as any : \"p\"}\n {...props}\n sxr={{\n fontSize: variant,\n lineHeight: variant,\n fontWeight: variant,\n color: \"text.primary\",\n }}\n baseClass='text'\n ref={ref}\n >{children}</Tag>\n )\n})\n\nexport default Text\n"],"names":["_jsx"],"mappings":"yIASA,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAAC,CAAmC,EAA6C,EAAE,GAAoB,KAAI;;QAAvE,EAAE,QAAQ,EAAE,OAAO,EAAA,GAAA,EAA0B,EAArB,KAAK,GAAA,MAAA,CAAA,EAAA,EAA7B,uBAA+B,CAAF;IAC1F,MAAM,EAAE,GAAQ,EAAE;AAClB,IAAA,IAAI,OAAO;AAAE,QAAA,EAAE,CAAC,OAAO,GAAG,OAAO;AACjC,IAAA,MAAM,CAAC,GAAQ,kBAAkB,CAAC,EAAE,CAAC;AACrC,IAAA,OAAO,GAAG,CAAA,EAAA,GAAA,CAAC,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,MAAM;IAE7B,QACIA,GAAA,CAAC,GAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EACA,SAAS,EAAG,OAAkB,CAAC,UAAU,CAAC,GAAG,CAAC,GAAG,OAAc,GAAG,GAAG,EAAA,EACjE,KAAK,EAAA,EACT,GAAG,EAAE;AACD,YAAA,QAAQ,EAAE,OAAO;AACjB,YAAA,UAAU,EAAE,OAAO;AACnB,YAAA,UAAU,EAAE,OAAO;AACnB,YAAA,KAAK,EAAE,cAAc;SACxB,EACD,SAAS,EAAC,MAAM,EAChB,GAAG,EAAE,GAAG,EAAA,QAAA,EACV,QAAQ,EAAA,CAAA,CAAO;AAEzB,CAAC"}
package/Toast/index.js CHANGED
@@ -1,15 +1,4 @@
1
- "use client";
2
- 'use strict';
3
-
4
- var tslib = require('tslib');
5
- var jsxRuntime = require('react/jsx-runtime');
6
- var client = require('react-dom/client');
7
- var core = require('@xanui/core');
8
- var React = require('react');
9
- var index$1 = require('../Alert/index.js');
10
- var index = require('../Scrollbar/index.js');
11
-
12
- const formatPacement = (placement) => {
1
+ 'use strict';Object.defineProperty(exports,'__esModule',{value:true});var tslib=require('tslib'),jsxRuntime=require('react/jsx-runtime'),client=require('react-dom/client'),core=require('@xanui/core'),React=require('react'),index$1=require('../Alert/index.js'),index=require('../Scrollbar/index.js');const formatPacement = (placement) => {
13
2
  let sx = {};
14
3
  let transition = "";
15
4
  switch (placement) {
@@ -71,7 +60,7 @@ const ToastView = (props) => {
71
60
  setTimer(setTimeout(() => {
72
61
  setOpen(false);
73
62
  }, 6000));
74
- }, children: jsxRuntime.jsx(index$1, Object.assign({ shadow: 2, variant: "fill", color: "brand" }, rest, { mode: "item", mb: 1, onMouseEnter: () => {
63
+ }, children: jsxRuntime.jsx(index$1.default, Object.assign({ shadow: 2, variant: "fill", color: "brand" }, rest, { mode: "item", mb: 1, onMouseEnter: () => {
75
64
  clearTimeout(timer);
76
65
  }, onMouseLeave: () => {
77
66
  setTimer(setTimeout(() => {
@@ -96,7 +85,7 @@ const Toast = (props) => {
96
85
  const appRoot = core.appRootElement();
97
86
  appRoot.appendChild(wrapperEle);
98
87
  const wrapperRoot = client.createRoot(wrapperEle);
99
- wrapperRoot.render(jsxRuntime.jsx(index, { p: 1, overflow: "hidden", className: wrapperClassName, sx: Object.assign({ position: "fixed", zIndex: 99999999, display: "flex", justifyContent: "flex-end", flexDirection: "column", width: 320, height: "auto", maxHeight: "100vh" }, sx) }));
88
+ wrapperRoot.render(jsxRuntime.jsx(index.default, { p: 1, overflow: "hidden", className: wrapperClassName, sx: Object.assign({ position: "fixed", zIndex: 99999999, display: "flex", justifyContent: "flex-end", flexDirection: "column", width: 320, height: "auto", maxHeight: "100vh" }, sx) }));
100
89
  }
101
90
  setTimeout(() => {
102
91
  const wrapper = document.querySelector(`.${wrapperClassName}`);
@@ -114,7 +103,4 @@ const Toast = (props) => {
114
103
  }
115
104
  } })));
116
105
  }, 5);
117
- };
118
-
119
- module.exports = Toast;
120
- //# sourceMappingURL=index.js.map
106
+ };exports.default=Toast;//# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../../src/Toast/index.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { createRoot } from \"react-dom/client\";\r\nimport { appRootElement, UseColorTemplateColor, UseColorTemplateType, Transition, useBreakpointPropsType } from \"@xanui/core\";\r\nimport React, { ReactElement } from \"react\";\r\nimport Alert, { AlertProps } from \"../Alert\";\r\nimport Scrollbar from \"../Scrollbar\";\r\n\r\n\r\n\r\ntype PlacementType = \"top-left\" | \"top-center\" | \"top-right\" | \"bottom-left\" | \"bottom-center\" | \"bottom-right\"\r\n\r\nexport type useToastContentProps = {\r\n show: () => string;\r\n hide: () => void;\r\n}\r\n\r\nexport type UseTastContent = string | ReactElement | ((props: useToastContentProps) => ReactElement)\r\n\r\nexport type UseToastProps = {\r\n title?: useBreakpointPropsType<string | ReactElement>;\r\n content?: AlertProps['children'];\r\n variant?: useBreakpointPropsType<UseColorTemplateType>;\r\n color?: useBreakpointPropsType<UseColorTemplateColor>;\r\n icon?: useBreakpointPropsType<\"info\" | \"warning\" | \"success\" | \"error\" | false | ReactElement>;\r\n placement?: PlacementType;\r\n closeable?: useBreakpointPropsType<boolean>;\r\n}\r\n\r\n\r\nconst formatPacement = (placement: PlacementType) => {\r\n let sx: any = {}\r\n let transition: any = \"\"\r\n switch (placement) {\r\n case \"top-left\":\r\n sx = {\r\n top: 0,\r\n left: 0\r\n }\r\n transition = \"fadeRight\"\r\n break;\r\n case \"top-right\":\r\n sx = {\r\n top: 0,\r\n right: 0\r\n }\r\n transition = \"fadeLeft\"\r\n break;\r\n case \"top-center\":\r\n sx = {\r\n top: 0,\r\n left: \"50%\",\r\n transform: \"translateX(-50%)\"\r\n }\r\n transition = \"fadeDown\"\r\n break;\r\n case \"bottom-right\":\r\n sx = {\r\n bottom: 0,\r\n right: 0\r\n }\r\n transition = \"fadeLeft\"\r\n break;\r\n case \"bottom-left\":\r\n sx = {\r\n bottom: 0,\r\n left: 0\r\n }\r\n transition = \"fadeRight\"\r\n break;\r\n case \"bottom-center\":\r\n sx = {\r\n bottom: 0,\r\n left: \"50%\",\r\n transform: \"translateX(-50%)\"\r\n }\r\n transition = \"fadeUp\"\r\n break;\r\n }\r\n return { sx, transition }\r\n}\r\n\r\nconst ToastView = (props: UseToastProps & { onClosed: () => void }) => {\r\n const [open, setOpen] = React.useState(true)\r\n const [timer, setTimer] = React.useState<any>(null)\r\n const { placement = \"bottom-right\", content, closeable, onClosed, ...rest } = props || {}\r\n const { transition } = formatPacement(placement)\r\n\r\n return (<Transition\r\n open={open}\r\n variant={transition}\r\n onClosed={() => {\r\n onClosed()\r\n }}\r\n onOpened={() => {\r\n setTimer(setTimeout(() => {\r\n setOpen(false)\r\n }, 6000))\r\n }}\r\n >\r\n <Alert\r\n shadow={2}\r\n variant=\"fill\"\r\n color=\"brand\"\r\n {...rest as any}\r\n mode=\"item\"\r\n mb={1}\r\n onMouseEnter={() => {\r\n clearTimeout(timer)\r\n }}\r\n onMouseLeave={() => {\r\n setTimer(setTimeout(() => {\r\n setOpen(false)\r\n }, 6000))\r\n }}\r\n onClose={closeable ? () => {\r\n setOpen(false)\r\n } : undefined}\r\n >{content}</Alert>\r\n </Transition>)\r\n}\r\n\r\nconst Toast = (props?: string | UseToastProps) => {\r\n if (typeof props === \"string\") {\r\n props = { content: props }\r\n }\r\n let { placement = \"bottom-right\", content, closeable, ...rest } = props || {}\r\n const { sx } = formatPacement(placement)\r\n\r\n const wrapperContainerClassName = `xui-toast-container-${placement}`\r\n const wrapperClassName = `xui-toast-list-${placement}`\r\n let wrapperEle = document.querySelector(`.${wrapperContainerClassName}`) as HTMLElement\r\n if (!wrapperEle) {\r\n wrapperEle = document.createElement('div')\r\n wrapperEle.className = wrapperContainerClassName\r\n const appRoot = appRootElement()\r\n appRoot.appendChild(wrapperEle)\r\n\r\n const wrapperRoot = createRoot(wrapperEle);\r\n wrapperRoot.render(<Scrollbar\r\n p={1}\r\n overflow=\"hidden\"\r\n className={wrapperClassName}\r\n sx={{\r\n position: \"fixed\",\r\n zIndex: 99999999,\r\n display: \"flex\",\r\n justifyContent: \"flex-end\",\r\n flexDirection: \"column\",\r\n width: 320,\r\n height: \"auto\",\r\n maxHeight: \"100vh\",\r\n ...sx\r\n }}\r\n >\r\n\r\n </Scrollbar>);\r\n }\r\n\r\n setTimeout(() => {\r\n const wrapper = document.querySelector(`.${wrapperClassName}`) as HTMLElement;\r\n const div = document.createElement('div');\r\n wrapper.appendChild(div);\r\n const root = createRoot(div);\r\n\r\n root.render(<ToastView\r\n placement={placement}\r\n content={content}\r\n closeable={closeable}\r\n {...rest}\r\n onClosed={() => {\r\n root.unmount();\r\n wrapper.removeChild(div);\r\n if (wrapper.children.length === 0) {\r\n const container = document.querySelector(`.${wrapperContainerClassName}`) as HTMLElement\r\n if (container) {\r\n appRootElement().removeChild(container);\r\n }\r\n }\r\n }}\r\n />);\r\n }, 5);\r\n\r\n}\r\n\r\nexport default Toast;"],"names":[],"mappings":";;;;;;;;;;;AA8BA;;;;AAIQ;AACI;AACI;AACA;;;;AAIR;AACI;AACI;AACA;;;;AAIR;AACI;AACI;AACA;AACA;;;;AAIR;AACI;AACI;AACA;;;;AAIR;AACI;AACI;AACA;;;;AAIR;AACI;AACI;AACA;AACA;;;;;AAKZ;AACJ;AAEA;AACI;AACA;;;AAIA;AAIQ;AACJ;AAEI;;AAEA;AACJ;;AAWI;AAEI;;AAEA;;;;AAOhB;AAEA;AACI;AACI;;AAEJ;;AAGA;AACA;;;AAGI;AACA;AACA;AACA;AAEA;;;;;;AAwBA;AACA;;;AASQ;;;;AAIQ;;;;;AAOxB;;"}
1
+ {"version":3,"file":"index.js","sources":["../../src/Toast/index.tsx"],"sourcesContent":["\"use client\";\n\nimport { createRoot } from \"react-dom/client\";\nimport { appRootElement, UseColorTemplateColor, UseColorTemplateType, Transition, useBreakpointPropsType } from \"@xanui/core\";\nimport React, { ReactElement } from \"react\";\nimport Alert, { AlertProps } from \"../Alert\";\nimport Scrollbar from \"../Scrollbar\";\n\ntype PlacementType = \"top-left\" | \"top-center\" | \"top-right\" | \"bottom-left\" | \"bottom-center\" | \"bottom-right\"\n\nexport type UseToastProps = {\n title?: useBreakpointPropsType<string | ReactElement>;\n content?: AlertProps['children'];\n variant?: useBreakpointPropsType<UseColorTemplateType>;\n color?: useBreakpointPropsType<UseColorTemplateColor>;\n icon?: useBreakpointPropsType<\"info\" | \"warning\" | \"success\" | \"error\" | false | ReactElement>;\n placement?: PlacementType;\n closeable?: useBreakpointPropsType<boolean>;\n}\n\n\nconst formatPacement = (placement: PlacementType) => {\n let sx: any = {}\n let transition: any = \"\"\n switch (placement) {\n case \"top-left\":\n sx = {\n top: 0,\n left: 0\n }\n transition = \"fadeRight\"\n break;\n case \"top-right\":\n sx = {\n top: 0,\n right: 0\n }\n transition = \"fadeLeft\"\n break;\n case \"top-center\":\n sx = {\n top: 0,\n left: \"50%\",\n transform: \"translateX(-50%)\"\n }\n transition = \"fadeDown\"\n break;\n case \"bottom-right\":\n sx = {\n bottom: 0,\n right: 0\n }\n transition = \"fadeLeft\"\n break;\n case \"bottom-left\":\n sx = {\n bottom: 0,\n left: 0\n }\n transition = \"fadeRight\"\n break;\n case \"bottom-center\":\n sx = {\n bottom: 0,\n left: \"50%\",\n transform: \"translateX(-50%)\"\n }\n transition = \"fadeUp\"\n break;\n }\n return { sx, transition }\n}\n\nconst ToastView = (props: UseToastProps & { onClosed: () => void }) => {\n const [open, setOpen] = React.useState(true)\n const [timer, setTimer] = React.useState<any>(null)\n const { placement = \"bottom-right\", content, closeable, onClosed, ...rest } = props || {}\n const { transition } = formatPacement(placement)\n\n return (<Transition\n open={open}\n variant={transition}\n onClosed={() => {\n onClosed()\n }}\n onOpened={() => {\n setTimer(setTimeout(() => {\n setOpen(false)\n }, 6000))\n }}\n >\n <Alert\n shadow={2}\n variant=\"fill\"\n color=\"brand\"\n {...rest as any}\n mode=\"item\"\n mb={1}\n onMouseEnter={() => {\n clearTimeout(timer)\n }}\n onMouseLeave={() => {\n setTimer(setTimeout(() => {\n setOpen(false)\n }, 6000))\n }}\n onClose={closeable ? () => {\n setOpen(false)\n } : undefined}\n >{content}</Alert>\n </Transition>)\n}\n\nconst Toast = (props?: string | UseToastProps) => {\n if (typeof props === \"string\") {\n props = { content: props }\n }\n let { placement = \"bottom-right\", content, closeable, ...rest } = props || {}\n const { sx } = formatPacement(placement)\n\n const wrapperContainerClassName = `xui-toast-container-${placement}`\n const wrapperClassName = `xui-toast-list-${placement}`\n let wrapperEle = document.querySelector(`.${wrapperContainerClassName}`) as HTMLElement\n if (!wrapperEle) {\n wrapperEle = document.createElement('div')\n wrapperEle.className = wrapperContainerClassName\n const appRoot = appRootElement()\n appRoot.appendChild(wrapperEle)\n\n const wrapperRoot = createRoot(wrapperEle);\n wrapperRoot.render(<Scrollbar\n p={1}\n overflow=\"hidden\"\n className={wrapperClassName}\n sx={{\n position: \"fixed\",\n zIndex: 99999999,\n display: \"flex\",\n justifyContent: \"flex-end\",\n flexDirection: \"column\",\n width: 320,\n height: \"auto\",\n maxHeight: \"100vh\",\n ...sx\n }}\n >\n\n </Scrollbar>);\n }\n\n setTimeout(() => {\n const wrapper = document.querySelector(`.${wrapperClassName}`) as HTMLElement;\n const div = document.createElement('div');\n wrapper.appendChild(div);\n const root = createRoot(div);\n\n root.render(<ToastView\n placement={placement}\n content={content}\n closeable={closeable}\n {...rest}\n onClosed={() => {\n root.unmount();\n wrapper.removeChild(div);\n if (wrapper.children.length === 0) {\n const container = document.querySelector(`.${wrapperContainerClassName}`) as HTMLElement\n if (container) {\n appRootElement().removeChild(container);\n }\n }\n }}\n />);\n }, 5);\n\n}\n\nexport default Toast;"],"names":["__rest","_jsx","Transition","Alert","appRootElement","createRoot","Scrollbar"],"mappings":"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"}
package/Toast/index.mjs CHANGED
@@ -1,13 +1,4 @@
1
- "use client";
2
- import { __rest } from 'tslib';
3
- import { jsx } from 'react/jsx-runtime';
4
- import { createRoot } from 'react-dom/client';
5
- import { appRootElement, Transition } from '@xanui/core';
6
- import React from 'react';
7
- import Alert from '../Alert/index.mjs';
8
- import Scrollbar from '../Scrollbar/index.mjs';
9
-
10
- const formatPacement = (placement) => {
1
+ import {__rest}from'tslib';import {jsx}from'react/jsx-runtime';import {createRoot}from'react-dom/client';import {appRootElement,Transition}from'@xanui/core';import React from'react';import Alert from'../Alert/index.mjs';import Scrollbar from'../Scrollbar/index.mjs';const formatPacement = (placement) => {
11
2
  let sx = {};
12
3
  let transition = "";
13
4
  switch (placement) {
@@ -112,7 +103,4 @@ const Toast = (props) => {
112
103
  }
113
104
  } })));
114
105
  }, 5);
115
- };
116
-
117
- export { Toast as default };
118
- //# sourceMappingURL=index.mjs.map
106
+ };export{Toast as default};//# sourceMappingURL=index.mjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.mjs","sources":["../../src/Toast/index.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { createRoot } from \"react-dom/client\";\r\nimport { appRootElement, UseColorTemplateColor, UseColorTemplateType, Transition, useBreakpointPropsType } from \"@xanui/core\";\r\nimport React, { ReactElement } from \"react\";\r\nimport Alert, { AlertProps } from \"../Alert\";\r\nimport Scrollbar from \"../Scrollbar\";\r\n\r\n\r\n\r\ntype PlacementType = \"top-left\" | \"top-center\" | \"top-right\" | \"bottom-left\" | \"bottom-center\" | \"bottom-right\"\r\n\r\nexport type useToastContentProps = {\r\n show: () => string;\r\n hide: () => void;\r\n}\r\n\r\nexport type UseTastContent = string | ReactElement | ((props: useToastContentProps) => ReactElement)\r\n\r\nexport type UseToastProps = {\r\n title?: useBreakpointPropsType<string | ReactElement>;\r\n content?: AlertProps['children'];\r\n variant?: useBreakpointPropsType<UseColorTemplateType>;\r\n color?: useBreakpointPropsType<UseColorTemplateColor>;\r\n icon?: useBreakpointPropsType<\"info\" | \"warning\" | \"success\" | \"error\" | false | ReactElement>;\r\n placement?: PlacementType;\r\n closeable?: useBreakpointPropsType<boolean>;\r\n}\r\n\r\n\r\nconst formatPacement = (placement: PlacementType) => {\r\n let sx: any = {}\r\n let transition: any = \"\"\r\n switch (placement) {\r\n case \"top-left\":\r\n sx = {\r\n top: 0,\r\n left: 0\r\n }\r\n transition = \"fadeRight\"\r\n break;\r\n case \"top-right\":\r\n sx = {\r\n top: 0,\r\n right: 0\r\n }\r\n transition = \"fadeLeft\"\r\n break;\r\n case \"top-center\":\r\n sx = {\r\n top: 0,\r\n left: \"50%\",\r\n transform: \"translateX(-50%)\"\r\n }\r\n transition = \"fadeDown\"\r\n break;\r\n case \"bottom-right\":\r\n sx = {\r\n bottom: 0,\r\n right: 0\r\n }\r\n transition = \"fadeLeft\"\r\n break;\r\n case \"bottom-left\":\r\n sx = {\r\n bottom: 0,\r\n left: 0\r\n }\r\n transition = \"fadeRight\"\r\n break;\r\n case \"bottom-center\":\r\n sx = {\r\n bottom: 0,\r\n left: \"50%\",\r\n transform: \"translateX(-50%)\"\r\n }\r\n transition = \"fadeUp\"\r\n break;\r\n }\r\n return { sx, transition }\r\n}\r\n\r\nconst ToastView = (props: UseToastProps & { onClosed: () => void }) => {\r\n const [open, setOpen] = React.useState(true)\r\n const [timer, setTimer] = React.useState<any>(null)\r\n const { placement = \"bottom-right\", content, closeable, onClosed, ...rest } = props || {}\r\n const { transition } = formatPacement(placement)\r\n\r\n return (<Transition\r\n open={open}\r\n variant={transition}\r\n onClosed={() => {\r\n onClosed()\r\n }}\r\n onOpened={() => {\r\n setTimer(setTimeout(() => {\r\n setOpen(false)\r\n }, 6000))\r\n }}\r\n >\r\n <Alert\r\n shadow={2}\r\n variant=\"fill\"\r\n color=\"brand\"\r\n {...rest as any}\r\n mode=\"item\"\r\n mb={1}\r\n onMouseEnter={() => {\r\n clearTimeout(timer)\r\n }}\r\n onMouseLeave={() => {\r\n setTimer(setTimeout(() => {\r\n setOpen(false)\r\n }, 6000))\r\n }}\r\n onClose={closeable ? () => {\r\n setOpen(false)\r\n } : undefined}\r\n >{content}</Alert>\r\n </Transition>)\r\n}\r\n\r\nconst Toast = (props?: string | UseToastProps) => {\r\n if (typeof props === \"string\") {\r\n props = { content: props }\r\n }\r\n let { placement = \"bottom-right\", content, closeable, ...rest } = props || {}\r\n const { sx } = formatPacement(placement)\r\n\r\n const wrapperContainerClassName = `xui-toast-container-${placement}`\r\n const wrapperClassName = `xui-toast-list-${placement}`\r\n let wrapperEle = document.querySelector(`.${wrapperContainerClassName}`) as HTMLElement\r\n if (!wrapperEle) {\r\n wrapperEle = document.createElement('div')\r\n wrapperEle.className = wrapperContainerClassName\r\n const appRoot = appRootElement()\r\n appRoot.appendChild(wrapperEle)\r\n\r\n const wrapperRoot = createRoot(wrapperEle);\r\n wrapperRoot.render(<Scrollbar\r\n p={1}\r\n overflow=\"hidden\"\r\n className={wrapperClassName}\r\n sx={{\r\n position: \"fixed\",\r\n zIndex: 99999999,\r\n display: \"flex\",\r\n justifyContent: \"flex-end\",\r\n flexDirection: \"column\",\r\n width: 320,\r\n height: \"auto\",\r\n maxHeight: \"100vh\",\r\n ...sx\r\n }}\r\n >\r\n\r\n </Scrollbar>);\r\n }\r\n\r\n setTimeout(() => {\r\n const wrapper = document.querySelector(`.${wrapperClassName}`) as HTMLElement;\r\n const div = document.createElement('div');\r\n wrapper.appendChild(div);\r\n const root = createRoot(div);\r\n\r\n root.render(<ToastView\r\n placement={placement}\r\n content={content}\r\n closeable={closeable}\r\n {...rest}\r\n onClosed={() => {\r\n root.unmount();\r\n wrapper.removeChild(div);\r\n if (wrapper.children.length === 0) {\r\n const container = document.querySelector(`.${wrapperContainerClassName}`) as HTMLElement\r\n if (container) {\r\n appRootElement().removeChild(container);\r\n }\r\n }\r\n }}\r\n />);\r\n }, 5);\r\n\r\n}\r\n\r\nexport default Toast;"],"names":[],"mappings":";;;;;;;;;AA8BA;;;;AAIQ;AACI;AACI;AACA;;;;AAIR;AACI;AACI;AACA;;;;AAIR;AACI;AACI;AACA;AACA;;;;AAIR;AACI;AACI;AACA;;;;AAIR;AACI;AACI;AACA;;;;AAIR;AACI;AACI;AACA;AACA;;;;;AAKZ;AACJ;AAEA;AACI;AACA;;;AAIA;AAIQ;AACJ;AAEI;;AAEA;AACJ;;AAWI;AAEI;;AAEA;;;;AAOhB;AAEA;AACI;AACI;;AAEJ;;AAGA;AACA;;;AAGI;AACA;AACA;AACA;AAEA;;;;;;AAwBA;AACA;;;AASQ;;;;AAIQ;;;;;AAOxB;;"}
1
+ {"version":3,"file":"index.mjs","sources":["../../src/Toast/index.tsx"],"sourcesContent":["\"use client\";\n\nimport { createRoot } from \"react-dom/client\";\nimport { appRootElement, UseColorTemplateColor, UseColorTemplateType, Transition, useBreakpointPropsType } from \"@xanui/core\";\nimport React, { ReactElement } from \"react\";\nimport Alert, { AlertProps } from \"../Alert\";\nimport Scrollbar from \"../Scrollbar\";\n\ntype PlacementType = \"top-left\" | \"top-center\" | \"top-right\" | \"bottom-left\" | \"bottom-center\" | \"bottom-right\"\n\nexport type UseToastProps = {\n title?: useBreakpointPropsType<string | ReactElement>;\n content?: AlertProps['children'];\n variant?: useBreakpointPropsType<UseColorTemplateType>;\n color?: useBreakpointPropsType<UseColorTemplateColor>;\n icon?: useBreakpointPropsType<\"info\" | \"warning\" | \"success\" | \"error\" | false | ReactElement>;\n placement?: PlacementType;\n closeable?: useBreakpointPropsType<boolean>;\n}\n\n\nconst formatPacement = (placement: PlacementType) => {\n let sx: any = {}\n let transition: any = \"\"\n switch (placement) {\n case \"top-left\":\n sx = {\n top: 0,\n left: 0\n }\n transition = \"fadeRight\"\n break;\n case \"top-right\":\n sx = {\n top: 0,\n right: 0\n }\n transition = \"fadeLeft\"\n break;\n case \"top-center\":\n sx = {\n top: 0,\n left: \"50%\",\n transform: \"translateX(-50%)\"\n }\n transition = \"fadeDown\"\n break;\n case \"bottom-right\":\n sx = {\n bottom: 0,\n right: 0\n }\n transition = \"fadeLeft\"\n break;\n case \"bottom-left\":\n sx = {\n bottom: 0,\n left: 0\n }\n transition = \"fadeRight\"\n break;\n case \"bottom-center\":\n sx = {\n bottom: 0,\n left: \"50%\",\n transform: \"translateX(-50%)\"\n }\n transition = \"fadeUp\"\n break;\n }\n return { sx, transition }\n}\n\nconst ToastView = (props: UseToastProps & { onClosed: () => void }) => {\n const [open, setOpen] = React.useState(true)\n const [timer, setTimer] = React.useState<any>(null)\n const { placement = \"bottom-right\", content, closeable, onClosed, ...rest } = props || {}\n const { transition } = formatPacement(placement)\n\n return (<Transition\n open={open}\n variant={transition}\n onClosed={() => {\n onClosed()\n }}\n onOpened={() => {\n setTimer(setTimeout(() => {\n setOpen(false)\n }, 6000))\n }}\n >\n <Alert\n shadow={2}\n variant=\"fill\"\n color=\"brand\"\n {...rest as any}\n mode=\"item\"\n mb={1}\n onMouseEnter={() => {\n clearTimeout(timer)\n }}\n onMouseLeave={() => {\n setTimer(setTimeout(() => {\n setOpen(false)\n }, 6000))\n }}\n onClose={closeable ? () => {\n setOpen(false)\n } : undefined}\n >{content}</Alert>\n </Transition>)\n}\n\nconst Toast = (props?: string | UseToastProps) => {\n if (typeof props === \"string\") {\n props = { content: props }\n }\n let { placement = \"bottom-right\", content, closeable, ...rest } = props || {}\n const { sx } = formatPacement(placement)\n\n const wrapperContainerClassName = `xui-toast-container-${placement}`\n const wrapperClassName = `xui-toast-list-${placement}`\n let wrapperEle = document.querySelector(`.${wrapperContainerClassName}`) as HTMLElement\n if (!wrapperEle) {\n wrapperEle = document.createElement('div')\n wrapperEle.className = wrapperContainerClassName\n const appRoot = appRootElement()\n appRoot.appendChild(wrapperEle)\n\n const wrapperRoot = createRoot(wrapperEle);\n wrapperRoot.render(<Scrollbar\n p={1}\n overflow=\"hidden\"\n className={wrapperClassName}\n sx={{\n position: \"fixed\",\n zIndex: 99999999,\n display: \"flex\",\n justifyContent: \"flex-end\",\n flexDirection: \"column\",\n width: 320,\n height: \"auto\",\n maxHeight: \"100vh\",\n ...sx\n }}\n >\n\n </Scrollbar>);\n }\n\n setTimeout(() => {\n const wrapper = document.querySelector(`.${wrapperClassName}`) as HTMLElement;\n const div = document.createElement('div');\n wrapper.appendChild(div);\n const root = createRoot(div);\n\n root.render(<ToastView\n placement={placement}\n content={content}\n closeable={closeable}\n {...rest}\n onClosed={() => {\n root.unmount();\n wrapper.removeChild(div);\n if (wrapper.children.length === 0) {\n const container = document.querySelector(`.${wrapperContainerClassName}`) as HTMLElement\n if (container) {\n appRootElement().removeChild(container);\n }\n }\n }}\n />);\n }, 5);\n\n}\n\nexport default Toast;"],"names":["_jsx"],"mappings":"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"}
package/Tooltip/index.js CHANGED
@@ -1,12 +1,4 @@
1
- "use client";
2
- 'use strict';
3
-
4
- var jsxRuntime = require('react/jsx-runtime');
5
- var React = require('react');
6
- var index = require('../Menu/index.js');
7
- var core = require('@xanui/core');
8
-
9
- const Tooltip = ({ children, title, variant, color, placement }) => {
1
+ 'use strict';Object.defineProperty(exports,'__esModule',{value:true});var jsxRuntime=require('react/jsx-runtime'),React=require('react'),index=require('../Menu/index.js'),core=require('@xanui/core');const Tooltip = ({ children, title, variant, color, placement }) => {
10
2
  var _a, _b;
11
3
  const [target, setTarget] = React.useState();
12
4
  const _p = {};
@@ -31,10 +23,7 @@ const Tooltip = ({ children, title, variant, color, placement }) => {
31
23
  },
32
24
  onMouseLeave: () => setTarget(null)
33
25
  });
34
- return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [child, jsxRuntime.jsx(index, { target: target, placement: placement, slotProps: {
26
+ return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [child, jsxRuntime.jsx(index.default, { target: target, placement: placement, slotProps: {
35
27
  content: Object.assign(Object.assign({ p: .5, shadow: 1 }, template.primary), { bgcolor: color == "default" ? "background.primary" : template.primary.bgcolor })
36
28
  }, children: title })] }));
37
- };
38
-
39
- module.exports = Tooltip;
40
- //# sourceMappingURL=index.js.map
29
+ };exports.default=Tooltip;//# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../../src/Tooltip/index.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { Children, cloneElement, ReactElement, useState } from 'react'\r\nimport Menu, { MenuProps } from '../Menu'\r\nimport { useBreakpointProps, useColorTemplate, UseColorTemplateColor, UseColorTemplateType, useBreakpointPropsType } from '@xanui/core'\r\n\r\n\r\nexport type TooltipProps = {\r\n children: ReactElement;\r\n title: useBreakpointPropsType<string>;\r\n color?: useBreakpointPropsType<UseColorTemplateColor>;\r\n variant?: useBreakpointPropsType<UseColorTemplateType>;\r\n placement?: MenuProps['placement']\r\n}\r\n\r\nconst Tooltip = ({ children, title, variant, color, placement }: TooltipProps) => {\r\n const [target, setTarget] = useState<any>()\r\n const _p: any = {}\r\n if (title) _p.title = title\r\n if (color) _p.color = color\r\n if (variant) _p.variant = variant\r\n const p: any = useBreakpointProps(_p)\r\n title = p.title\r\n color = p.color ?? \"default\"\r\n variant = p.variant ?? \"fill\"\r\n placement ??= \"bottom\"\r\n\r\n const template = useColorTemplate(color as any, variant as any)\r\n if (!children || Array.isArray(children)) throw new Error(\"Invalid children in Toast\")\r\n const first: any = Children.toArray(children).shift();\r\n const child = cloneElement(first, {\r\n onMouseEnter: (e) => {\r\n setTarget(e.target)\r\n },\r\n onMouseLeave: () => setTarget(null)\r\n })\r\n\r\n\r\n return (\r\n <>\r\n {child}\r\n <Menu\r\n target={target}\r\n placement={placement}\r\n slotProps={{\r\n content: {\r\n p: .5,\r\n shadow: 1,\r\n ...template.primary,\r\n bgcolor: color == \"default\" ? \"background.primary\" : template.primary.bgcolor,\r\n }\r\n }}\r\n >\r\n {title as any}\r\n </Menu>\r\n </>\r\n )\r\n}\r\n\r\nexport default Tooltip"],"names":[],"mappings":";;;;;;;;AAeA;;;;AAGI;AAAW;AACX;AAAW;AACX;AAAa;AACb;AACA;AACA;AACA;;;;AAI0C;;AAE1C;AACI;AACI;;AAEJ;AACH;AAGD;AAOgB;AAMH;AAMjB;;"}
1
+ {"version":3,"file":"index.js","sources":["../../src/Tooltip/index.tsx"],"sourcesContent":["\"use client\";\n\nimport { Children, cloneElement, ReactElement, useState } from 'react'\nimport Menu, { MenuProps } from '../Menu'\nimport { useBreakpointProps, useColorTemplate, UseColorTemplateColor, UseColorTemplateType, useBreakpointPropsType } from '@xanui/core'\n\n\nexport type TooltipProps = {\n children: ReactElement;\n title: useBreakpointPropsType<string>;\n color?: useBreakpointPropsType<UseColorTemplateColor>;\n variant?: useBreakpointPropsType<UseColorTemplateType>;\n placement?: MenuProps['placement']\n}\n\nconst Tooltip = ({ children, title, variant, color, placement }: TooltipProps) => {\n const [target, setTarget] = useState<any>()\n const _p: any = {}\n if (title) _p.title = title\n if (color) _p.color = color\n if (variant) _p.variant = variant\n const p: any = useBreakpointProps(_p)\n title = p.title\n color = p.color ?? \"default\"\n variant = p.variant ?? \"fill\"\n placement ??= \"bottom\"\n\n const template = useColorTemplate(color as any, variant as any)\n if (!children || Array.isArray(children)) throw new Error(\"Invalid children in Toast\")\n const first: any = Children.toArray(children).shift();\n const child = cloneElement(first, {\n onMouseEnter: (e) => {\n setTarget(e.target)\n },\n onMouseLeave: () => setTarget(null)\n })\n\n\n return (\n <>\n {child}\n <Menu\n target={target}\n placement={placement}\n slotProps={{\n content: {\n p: .5,\n shadow: 1,\n ...template.primary,\n bgcolor: color == \"default\" ? \"background.primary\" : template.primary.bgcolor,\n }\n }}\n >\n {title as any}\n </Menu>\n </>\n )\n}\n\nexport default Tooltip"],"names":["useState","useBreakpointProps","useColorTemplate","Children","cloneElement","_jsxs","_Fragment","_jsx","Menu"],"mappings":"uMAeA,MAAM,OAAO,GAAG,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,SAAS,EAAgB,KAAI;;IAC7E,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAGA,cAAQ,EAAO;IAC3C,MAAM,EAAE,GAAQ,EAAE;AAClB,IAAA,IAAI,KAAK;AAAE,QAAA,EAAE,CAAC,KAAK,GAAG,KAAK;AAC3B,IAAA,IAAI,KAAK;AAAE,QAAA,EAAE,CAAC,KAAK,GAAG,KAAK;AAC3B,IAAA,IAAI,OAAO;AAAE,QAAA,EAAE,CAAC,OAAO,GAAG,OAAO;AACjC,IAAA,MAAM,CAAC,GAAQC,uBAAkB,CAAC,EAAE,CAAC;AACrC,IAAA,KAAK,GAAG,CAAC,CAAC,KAAK;AACf,IAAA,KAAK,GAAG,CAAA,EAAA,GAAA,CAAC,CAAC,KAAK,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,SAAS;AAC5B,IAAA,OAAO,GAAG,CAAA,EAAA,GAAA,CAAC,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,MAAM;IAC7B,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,MAAA,GAAT,SAAS,IAAT,SAAS,GAAK,QAAQ,CAAA;IAEtB,MAAM,QAAQ,GAAGC,qBAAgB,CAAC,KAAY,EAAE,OAAc,CAAC;IAC/D,IAAI,CAAC,QAAQ,IAAI,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC;AAAE,QAAA,MAAM,IAAI,KAAK,CAAC,2BAA2B,CAAC;IACtF,MAAM,KAAK,GAAQC,cAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,KAAK,EAAE;AACrD,IAAA,MAAM,KAAK,GAAGC,kBAAY,CAAC,KAAK,EAAE;AAC9B,QAAA,YAAY,EAAE,CAAC,CAAC,KAAI;AAChB,YAAA,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC;QACvB,CAAC;AACD,QAAA,YAAY,EAAE,MAAM,SAAS,CAAC,IAAI;AACrC,KAAA,CAAC;AAGF,IAAA,QACIC,eAAA,CAAAC,mBAAA,EAAA,EAAA,QAAA,EAAA,CACK,KAAK,EACNC,cAAA,CAACC,aAAI,EAAA,EACD,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE;AACP,oBAAA,OAAO,EAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EACH,CAAC,EAAE,EAAE,EACL,MAAM,EAAE,CAAC,EAAA,EACN,QAAQ,CAAC,OAAO,KACnB,OAAO,EAAE,KAAK,IAAI,SAAS,GAAG,oBAAoB,GAAG,QAAQ,CAAC,OAAO,CAAC,OAAO,EAAA;AAEpF,iBAAA,EAAA,QAAA,EAEA,KAAY,EAAA,CACV,CAAA,EAAA,CACR;AAEX"}
package/Tooltip/index.mjs CHANGED
@@ -1,10 +1,4 @@
1
- "use client";
2
- import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
3
- import { useState, Children, cloneElement } from 'react';
4
- import Menu from '../Menu/index.mjs';
5
- import { useBreakpointProps, useColorTemplate } from '@xanui/core';
6
-
7
- const Tooltip = ({ children, title, variant, color, placement }) => {
1
+ import {jsxs,Fragment,jsx}from'react/jsx-runtime';import {useState,Children,cloneElement}from'react';import Menu from'../Menu/index.mjs';import {useBreakpointProps,useColorTemplate}from'@xanui/core';const Tooltip = ({ children, title, variant, color, placement }) => {
8
2
  var _a, _b;
9
3
  const [target, setTarget] = useState();
10
4
  const _p = {};
@@ -32,7 +26,4 @@ const Tooltip = ({ children, title, variant, color, placement }) => {
32
26
  return (jsxs(Fragment, { children: [child, jsx(Menu, { target: target, placement: placement, slotProps: {
33
27
  content: Object.assign(Object.assign({ p: .5, shadow: 1 }, template.primary), { bgcolor: color == "default" ? "background.primary" : template.primary.bgcolor })
34
28
  }, children: title })] }));
35
- };
36
-
37
- export { Tooltip as default };
38
- //# sourceMappingURL=index.mjs.map
29
+ };export{Tooltip as default};//# sourceMappingURL=index.mjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.mjs","sources":["../../src/Tooltip/index.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { Children, cloneElement, ReactElement, useState } from 'react'\r\nimport Menu, { MenuProps } from '../Menu'\r\nimport { useBreakpointProps, useColorTemplate, UseColorTemplateColor, UseColorTemplateType, useBreakpointPropsType } from '@xanui/core'\r\n\r\n\r\nexport type TooltipProps = {\r\n children: ReactElement;\r\n title: useBreakpointPropsType<string>;\r\n color?: useBreakpointPropsType<UseColorTemplateColor>;\r\n variant?: useBreakpointPropsType<UseColorTemplateType>;\r\n placement?: MenuProps['placement']\r\n}\r\n\r\nconst Tooltip = ({ children, title, variant, color, placement }: TooltipProps) => {\r\n const [target, setTarget] = useState<any>()\r\n const _p: any = {}\r\n if (title) _p.title = title\r\n if (color) _p.color = color\r\n if (variant) _p.variant = variant\r\n const p: any = useBreakpointProps(_p)\r\n title = p.title\r\n color = p.color ?? \"default\"\r\n variant = p.variant ?? \"fill\"\r\n placement ??= \"bottom\"\r\n\r\n const template = useColorTemplate(color as any, variant as any)\r\n if (!children || Array.isArray(children)) throw new Error(\"Invalid children in Toast\")\r\n const first: any = Children.toArray(children).shift();\r\n const child = cloneElement(first, {\r\n onMouseEnter: (e) => {\r\n setTarget(e.target)\r\n },\r\n onMouseLeave: () => setTarget(null)\r\n })\r\n\r\n\r\n return (\r\n <>\r\n {child}\r\n <Menu\r\n target={target}\r\n placement={placement}\r\n slotProps={{\r\n content: {\r\n p: .5,\r\n shadow: 1,\r\n ...template.primary,\r\n bgcolor: color == \"default\" ? \"background.primary\" : template.primary.bgcolor,\r\n }\r\n }}\r\n >\r\n {title as any}\r\n </Menu>\r\n </>\r\n )\r\n}\r\n\r\nexport default Tooltip"],"names":[],"mappings":";;;;;;AAeA;;;;AAGI;AAAW;AACX;AAAW;AACX;AAAa;AACb;AACA;AACA;AACA;;;;AAI0C;;AAE1C;AACI;AACI;;AAEJ;AACH;AAGD;AAOgB;AAMH;AAMjB;;"}
1
+ {"version":3,"file":"index.mjs","sources":["../../src/Tooltip/index.tsx"],"sourcesContent":["\"use client\";\n\nimport { Children, cloneElement, ReactElement, useState } from 'react'\nimport Menu, { MenuProps } from '../Menu'\nimport { useBreakpointProps, useColorTemplate, UseColorTemplateColor, UseColorTemplateType, useBreakpointPropsType } from '@xanui/core'\n\n\nexport type TooltipProps = {\n children: ReactElement;\n title: useBreakpointPropsType<string>;\n color?: useBreakpointPropsType<UseColorTemplateColor>;\n variant?: useBreakpointPropsType<UseColorTemplateType>;\n placement?: MenuProps['placement']\n}\n\nconst Tooltip = ({ children, title, variant, color, placement }: TooltipProps) => {\n const [target, setTarget] = useState<any>()\n const _p: any = {}\n if (title) _p.title = title\n if (color) _p.color = color\n if (variant) _p.variant = variant\n const p: any = useBreakpointProps(_p)\n title = p.title\n color = p.color ?? \"default\"\n variant = p.variant ?? \"fill\"\n placement ??= \"bottom\"\n\n const template = useColorTemplate(color as any, variant as any)\n if (!children || Array.isArray(children)) throw new Error(\"Invalid children in Toast\")\n const first: any = Children.toArray(children).shift();\n const child = cloneElement(first, {\n onMouseEnter: (e) => {\n setTarget(e.target)\n },\n onMouseLeave: () => setTarget(null)\n })\n\n\n return (\n <>\n {child}\n <Menu\n target={target}\n placement={placement}\n slotProps={{\n content: {\n p: .5,\n shadow: 1,\n ...template.primary,\n bgcolor: color == \"default\" ? \"background.primary\" : template.primary.bgcolor,\n }\n }}\n >\n {title as any}\n </Menu>\n </>\n )\n}\n\nexport default Tooltip"],"names":["_jsxs","_Fragment","_jsx"],"mappings":"uMAeA,MAAM,OAAO,GAAG,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,SAAS,EAAgB,KAAI;;IAC7E,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,EAAO;IAC3C,MAAM,EAAE,GAAQ,EAAE;AAClB,IAAA,IAAI,KAAK;AAAE,QAAA,EAAE,CAAC,KAAK,GAAG,KAAK;AAC3B,IAAA,IAAI,KAAK;AAAE,QAAA,EAAE,CAAC,KAAK,GAAG,KAAK;AAC3B,IAAA,IAAI,OAAO;AAAE,QAAA,EAAE,CAAC,OAAO,GAAG,OAAO;AACjC,IAAA,MAAM,CAAC,GAAQ,kBAAkB,CAAC,EAAE,CAAC;AACrC,IAAA,KAAK,GAAG,CAAC,CAAC,KAAK;AACf,IAAA,KAAK,GAAG,CAAA,EAAA,GAAA,CAAC,CAAC,KAAK,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,SAAS;AAC5B,IAAA,OAAO,GAAG,CAAA,EAAA,GAAA,CAAC,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,MAAM;IAC7B,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,MAAA,GAAT,SAAS,IAAT,SAAS,GAAK,QAAQ,CAAA;IAEtB,MAAM,QAAQ,GAAG,gBAAgB,CAAC,KAAY,EAAE,OAAc,CAAC;IAC/D,IAAI,CAAC,QAAQ,IAAI,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC;AAAE,QAAA,MAAM,IAAI,KAAK,CAAC,2BAA2B,CAAC;IACtF,MAAM,KAAK,GAAQ,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,KAAK,EAAE;AACrD,IAAA,MAAM,KAAK,GAAG,YAAY,CAAC,KAAK,EAAE;AAC9B,QAAA,YAAY,EAAE,CAAC,CAAC,KAAI;AAChB,YAAA,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC;QACvB,CAAC;AACD,QAAA,YAAY,EAAE,MAAM,SAAS,CAAC,IAAI;AACrC,KAAA,CAAC;AAGF,IAAA,QACIA,IAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CACK,KAAK,EACNC,GAAA,CAAC,IAAI,EAAA,EACD,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE;AACP,oBAAA,OAAO,EAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EACH,CAAC,EAAE,EAAE,EACL,MAAM,EAAE,CAAC,EAAA,EACN,QAAQ,CAAC,OAAO,KACnB,OAAO,EAAE,KAAK,IAAI,SAAS,GAAG,oBAAoB,GAAG,QAAQ,CAAC,OAAO,CAAC,OAAO,EAAA;AAEpF,iBAAA,EAAA,QAAA,EAEA,KAAY,EAAA,CACV,CAAA,EAAA,CACR;AAEX"}
package/ViewBox/index.js CHANGED
@@ -1,12 +1,4 @@
1
- 'use strict';
2
-
3
- var tslib = require('tslib');
4
- var jsxRuntime = require('react/jsx-runtime');
5
- var React = require('react');
6
- var index = require('../Scrollbar/index.js');
7
- var core = require('@xanui/core');
8
-
9
- const ViewBox = React.forwardRef((_a, ref) => {
1
+ 'use strict';Object.defineProperty(exports,'__esModule',{value:true});var tslib=require('tslib'),jsxRuntime=require('react/jsx-runtime'),React=require('react'),index=require('../Scrollbar/index.js'),core=require('@xanui/core');const ViewBox = React.forwardRef((_a, ref) => {
10
2
  var _b;
11
3
  var { children } = _a, rest = tslib.__rest(_a, ["children"]);
12
4
  let [_c] = core.useInterface("ViewBox", rest, {}), { startContent, endContent, slotProps, horizental } = _c, props = tslib.__rest(_c, ["startContent", "endContent", "slotProps", "horizental"]);
@@ -25,8 +17,5 @@ const ViewBox = React.forwardRef((_a, ref) => {
25
17
  display: "flex",
26
18
  justifyContent: "space-between",
27
19
  flexDirection: horizental ? "row" : "column"
28
- }, baseClass: 'viewbox', ref: ref, children: [startContent && jsxRuntime.jsx(core.Tag, { baseClass: 'viewbox-start-content', flexBox: true, flexDirection: horizental ? "row" : "column", children: startContent }), jsxRuntime.jsx(index, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.scrollbar, { className: 'viewbox-content', style: Object.assign({ flex: 1, display: "flex", flexDirection: horizental ? "row" : "column" }, (((_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.scrollbar) === null || _b === void 0 ? void 0 : _b.style) || {})), children: children })), endContent && jsxRuntime.jsx(core.Tag, { baseClass: 'viewbox-end-content', flexBox: true, flexDirection: horizental ? "row" : "column", children: endContent })] })));
29
- });
30
-
31
- module.exports = ViewBox;
32
- //# sourceMappingURL=index.js.map
20
+ }, baseClass: 'viewbox', ref: ref, children: [startContent && jsxRuntime.jsx(core.Tag, { baseClass: 'viewbox-start-content', flexBox: true, flexDirection: horizental ? "row" : "column", children: startContent }), jsxRuntime.jsx(index.default, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.scrollbar, { className: 'viewbox-content', style: Object.assign({ flex: 1, display: "flex", flexDirection: horizental ? "row" : "column" }, (((_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.scrollbar) === null || _b === void 0 ? void 0 : _b.style) || {})), children: children })), endContent && jsxRuntime.jsx(core.Tag, { baseClass: 'viewbox-end-content', flexBox: true, flexDirection: horizental ? "row" : "column", children: endContent })] })));
21
+ });exports.default=ViewBox;//# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../../src/ViewBox/index.tsx"],"sourcesContent":["\r\nimport React, { ReactElement } from 'react'\r\nimport Scrollbar, { ScrollbarProps } from '../Scrollbar'\r\nimport { Tag, TagProps, TagComponentType, useInterface, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\r\n\r\n\r\nexport type ViewBoxProps<T extends TagComponentType = \"div\"> = TagProps<T> & {\r\n startContent?: useBreakpointPropsType<ReactElement>;\r\n endContent?: useBreakpointPropsType<ReactElement>;\r\n horizental?: useBreakpointPropsType<boolean>;\r\n slotProps?: {\r\n scrollbar?: Omit<ScrollbarProps, 'children'>;\r\n }\r\n}\r\n\r\n\r\nconst ViewBox = React.forwardRef(({ children, ...rest }: ViewBoxProps, ref?: any) => {\r\n let [{ startContent, endContent, slotProps, horizental, ...props }] = useInterface<any>(\"ViewBox\", rest, {})\r\n const _p: any = {}\r\n if (startContent) _p.startContent = startContent\r\n if (endContent) _p.endContent = endContent\r\n if (horizental) _p.horizental = horizental\r\n const p: any = useBreakpointProps(_p)\r\n startContent = p.startContent\r\n endContent = p.endContent\r\n horizental = p.horizental\r\n\r\n return (\r\n <Tag\r\n {...props}\r\n sxr={{\r\n display: \"flex\",\r\n justifyContent: \"space-between\",\r\n flexDirection: horizental ? \"row\" : \"column\"\r\n }}\r\n baseClass='viewbox'\r\n ref={ref}\r\n >\r\n {startContent && <Tag baseClass='viewbox-start-content' flexBox flexDirection={horizental ? \"row\" : \"column\"}>{startContent}</Tag>}\r\n <Scrollbar\r\n {...slotProps?.scrollbar}\r\n className='viewbox-content'\r\n style={{\r\n flex: 1,\r\n display: \"flex\",\r\n flexDirection: horizental ? \"row\" : \"column\",\r\n ...(slotProps?.scrollbar?.style || {})\r\n }}\r\n >\r\n {children}\r\n </Scrollbar>\r\n {endContent && <Tag baseClass='viewbox-end-content' flexBox flexDirection={horizental ? \"row\" : \"column\"}>{endContent}</Tag>}\r\n </Tag>\r\n )\r\n})\r\n\r\nexport default ViewBox\r\n"],"names":["__rest","useInterface","useBreakpointProps","_jsxs","Tag","_jsx","Scrollbar"],"mappings":";;;;;;;;AAgBA,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAAC,CAAC,EAAmC,EAAE,GAAS,KAAI;;AAAlD,IAAA,IAAA,EAAE,QAAQ,EAAA,GAAA,EAAyB,EAApB,IAAI,GAAAA,YAAA,CAAA,EAAA,EAAnB,YAAqB,CAAF;IACjD,IAAI,CAAA,EAAA,CAAA,GAAkEC,iBAAY,CAAM,SAAS,EAAE,IAAI,EAAE,EAAE,CAAC,EAAvG,EAAE,YAAY,EAAE,UAAU,EAAE,SAAS,EAAE,UAAU,EAAA,GAAA,EAAY,EAAP,KAAK,GAAAD,YAAA,CAAA,EAAA,EAA3D,CAAA,cAAA,EAAA,YAAA,EAAA,WAAA,EAAA,YAAA,CAA6D,CAA0C;IAC5G,MAAM,EAAE,GAAQ,EAAE;AAClB,IAAA,IAAI,YAAY;AAAE,QAAA,EAAE,CAAC,YAAY,GAAG,YAAY;AAChD,IAAA,IAAI,UAAU;AAAE,QAAA,EAAE,CAAC,UAAU,GAAG,UAAU;AAC1C,IAAA,IAAI,UAAU;AAAE,QAAA,EAAE,CAAC,UAAU,GAAG,UAAU;AAC1C,IAAA,MAAM,CAAC,GAAQE,uBAAkB,CAAC,EAAE,CAAC;AACrC,IAAA,YAAY,GAAG,CAAC,CAAC,YAAY;AAC7B,IAAA,UAAU,GAAG,CAAC,CAAC,UAAU;AACzB,IAAA,UAAU,GAAG,CAAC,CAAC,UAAU;AAEzB,IAAA,QACIC,eAAA,CAACC,QAAG,oBACI,KAAK,EAAA,EACT,GAAG,EAAE;AACD,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,cAAc,EAAE,eAAe;YAC/B,aAAa,EAAE,UAAU,GAAG,KAAK,GAAG;SACvC,EACD,SAAS,EAAC,SAAS,EACnB,GAAG,EAAE,GAAG,EAAA,QAAA,EAAA,CAEP,YAAY,IAAIC,cAAA,CAACD,QAAG,EAAA,EAAC,SAAS,EAAC,uBAAuB,EAAC,OAAO,EAAA,IAAA,EAAC,aAAa,EAAE,UAAU,GAAG,KAAK,GAAG,QAAQ,EAAA,QAAA,EAAG,YAAY,EAAA,CAAO,EAClIC,cAAA,CAACC,KAAS,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACF,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,MAAA,GAAA,MAAA,GAAT,SAAS,CAAE,SAAS,EAAA,EACxB,SAAS,EAAC,iBAAiB,EAC3B,KAAK,EAAA,MAAA,CAAA,MAAA,CAAA,EACD,IAAI,EAAE,CAAC,EACP,OAAO,EAAE,MAAM,EACf,aAAa,EAAE,UAAU,GAAG,KAAK,GAAG,QAAQ,EAAA,GACxC,CAAA,MAAA,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,MAAA,GAAA,MAAA,GAAT,SAAS,CAAE,SAAS,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,KAAK,KAAI,EAAE,EAAC,EAAA,QAAA,EAGzC,QAAQ,IACD,EACX,UAAU,IAAID,cAAA,CAACD,QAAG,EAAA,EAAC,SAAS,EAAC,qBAAqB,EAAC,OAAO,EAAA,IAAA,EAAC,aAAa,EAAE,UAAU,GAAG,KAAK,GAAG,QAAQ,EAAA,QAAA,EAAG,UAAU,EAAA,CAAO,CAAA,EAAA,CAAA,CAC1H;AAEd,CAAC;;;;"}
1
+ {"version":3,"file":"index.js","sources":["../../src/ViewBox/index.tsx"],"sourcesContent":["\nimport React, { ReactElement } from 'react'\nimport Scrollbar, { ScrollbarProps } from '../Scrollbar'\nimport { Tag, TagProps, TagComponentType, useInterface, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\n\n\nexport type ViewBoxProps<T extends TagComponentType = \"div\"> = TagProps<T> & {\n startContent?: useBreakpointPropsType<ReactElement>;\n endContent?: useBreakpointPropsType<ReactElement>;\n horizental?: useBreakpointPropsType<boolean>;\n slotProps?: {\n scrollbar?: Omit<ScrollbarProps, 'children'>;\n }\n}\n\n\nconst ViewBox = React.forwardRef(({ children, ...rest }: ViewBoxProps, ref?: any) => {\n let [{ startContent, endContent, slotProps, horizental, ...props }] = useInterface<any>(\"ViewBox\", rest, {})\n const _p: any = {}\n if (startContent) _p.startContent = startContent\n if (endContent) _p.endContent = endContent\n if (horizental) _p.horizental = horizental\n const p: any = useBreakpointProps(_p)\n startContent = p.startContent\n endContent = p.endContent\n horizental = p.horizental\n\n return (\n <Tag\n {...props}\n sxr={{\n display: \"flex\",\n justifyContent: \"space-between\",\n flexDirection: horizental ? \"row\" : \"column\"\n }}\n baseClass='viewbox'\n ref={ref}\n >\n {startContent && <Tag baseClass='viewbox-start-content' flexBox flexDirection={horizental ? \"row\" : \"column\"}>{startContent}</Tag>}\n <Scrollbar\n {...slotProps?.scrollbar}\n className='viewbox-content'\n style={{\n flex: 1,\n display: \"flex\",\n flexDirection: horizental ? \"row\" : \"column\",\n ...(slotProps?.scrollbar?.style || {})\n }}\n >\n {children}\n </Scrollbar>\n {endContent && <Tag baseClass='viewbox-end-content' flexBox flexDirection={horizental ? \"row\" : \"column\"}>{endContent}</Tag>}\n </Tag>\n )\n})\n\nexport default ViewBox\n"],"names":["__rest","useInterface","useBreakpointProps","_jsxs","Tag","_jsx","Scrollbar"],"mappings":"mOAgBA,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAAC,CAAC,EAAmC,EAAE,GAAS,KAAI;;AAAlD,IAAA,IAAA,EAAE,QAAQ,EAAA,GAAA,EAAyB,EAApB,IAAI,GAAAA,YAAA,CAAA,EAAA,EAAnB,YAAqB,CAAF;IACjD,IAAI,CAAA,EAAA,CAAA,GAAkEC,iBAAY,CAAM,SAAS,EAAE,IAAI,EAAE,EAAE,CAAC,EAAvG,EAAE,YAAY,EAAE,UAAU,EAAE,SAAS,EAAE,UAAU,EAAA,GAAA,EAAY,EAAP,KAAK,GAAAD,YAAA,CAAA,EAAA,EAA3D,CAAA,cAAA,EAAA,YAAA,EAAA,WAAA,EAAA,YAAA,CAA6D,CAA0C;IAC5G,MAAM,EAAE,GAAQ,EAAE;AAClB,IAAA,IAAI,YAAY;AAAE,QAAA,EAAE,CAAC,YAAY,GAAG,YAAY;AAChD,IAAA,IAAI,UAAU;AAAE,QAAA,EAAE,CAAC,UAAU,GAAG,UAAU;AAC1C,IAAA,IAAI,UAAU;AAAE,QAAA,EAAE,CAAC,UAAU,GAAG,UAAU;AAC1C,IAAA,MAAM,CAAC,GAAQE,uBAAkB,CAAC,EAAE,CAAC;AACrC,IAAA,YAAY,GAAG,CAAC,CAAC,YAAY;AAC7B,IAAA,UAAU,GAAG,CAAC,CAAC,UAAU;AACzB,IAAA,UAAU,GAAG,CAAC,CAAC,UAAU;AAEzB,IAAA,QACIC,eAAA,CAACC,QAAG,oBACI,KAAK,EAAA,EACT,GAAG,EAAE;AACD,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,cAAc,EAAE,eAAe;YAC/B,aAAa,EAAE,UAAU,GAAG,KAAK,GAAG;SACvC,EACD,SAAS,EAAC,SAAS,EACnB,GAAG,EAAE,GAAG,EAAA,QAAA,EAAA,CAEP,YAAY,IAAIC,cAAA,CAACD,QAAG,EAAA,EAAC,SAAS,EAAC,uBAAuB,EAAC,OAAO,EAAA,IAAA,EAAC,aAAa,EAAE,UAAU,GAAG,KAAK,GAAG,QAAQ,EAAA,QAAA,EAAG,YAAY,EAAA,CAAO,EAClIC,cAAA,CAACC,aAAS,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACF,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,MAAA,GAAA,MAAA,GAAT,SAAS,CAAE,SAAS,EAAA,EACxB,SAAS,EAAC,iBAAiB,EAC3B,KAAK,EAAA,MAAA,CAAA,MAAA,CAAA,EACD,IAAI,EAAE,CAAC,EACP,OAAO,EAAE,MAAM,EACf,aAAa,EAAE,UAAU,GAAG,KAAK,GAAG,QAAQ,EAAA,GACxC,CAAA,MAAA,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,MAAA,GAAA,MAAA,GAAT,SAAS,CAAE,SAAS,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,KAAK,KAAI,EAAE,EAAC,EAAA,QAAA,EAGzC,QAAQ,IACD,EACX,UAAU,IAAID,cAAA,CAACD,QAAG,EAAA,EAAC,SAAS,EAAC,qBAAqB,EAAC,OAAO,EAAA,IAAA,EAAC,aAAa,EAAE,UAAU,GAAG,KAAK,GAAG,QAAQ,EAAA,QAAA,EAAG,UAAU,EAAA,CAAO,CAAA,EAAA,CAAA,CAC1H;AAEd,CAAC"}
package/ViewBox/index.mjs CHANGED
@@ -1,10 +1,4 @@
1
- import { __rest } from 'tslib';
2
- import { jsxs, jsx } from 'react/jsx-runtime';
3
- import React from 'react';
4
- import Scrollbar from '../Scrollbar/index.mjs';
5
- import { useInterface, useBreakpointProps, Tag } from '@xanui/core';
6
-
7
- const ViewBox = React.forwardRef((_a, ref) => {
1
+ import {__rest}from'tslib';import {jsxs,jsx}from'react/jsx-runtime';import React from'react';import Scrollbar from'../Scrollbar/index.mjs';import {useInterface,useBreakpointProps,Tag}from'@xanui/core';const ViewBox = React.forwardRef((_a, ref) => {
8
2
  var _b;
9
3
  var { children } = _a, rest = __rest(_a, ["children"]);
10
4
  let [_c] = useInterface("ViewBox", rest, {}), { startContent, endContent, slotProps, horizental } = _c, props = __rest(_c, ["startContent", "endContent", "slotProps", "horizental"]);
@@ -24,7 +18,4 @@ const ViewBox = React.forwardRef((_a, ref) => {
24
18
  justifyContent: "space-between",
25
19
  flexDirection: horizental ? "row" : "column"
26
20
  }, baseClass: 'viewbox', ref: ref, children: [startContent && jsx(Tag, { baseClass: 'viewbox-start-content', flexBox: true, flexDirection: horizental ? "row" : "column", children: startContent }), jsx(Scrollbar, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.scrollbar, { className: 'viewbox-content', style: Object.assign({ flex: 1, display: "flex", flexDirection: horizental ? "row" : "column" }, (((_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.scrollbar) === null || _b === void 0 ? void 0 : _b.style) || {})), children: children })), endContent && jsx(Tag, { baseClass: 'viewbox-end-content', flexBox: true, flexDirection: horizental ? "row" : "column", children: endContent })] })));
27
- });
28
-
29
- export { ViewBox as default };
30
- //# sourceMappingURL=index.mjs.map
21
+ });export{ViewBox as default};//# sourceMappingURL=index.mjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.mjs","sources":["../../src/ViewBox/index.tsx"],"sourcesContent":["\r\nimport React, { ReactElement } from 'react'\r\nimport Scrollbar, { ScrollbarProps } from '../Scrollbar'\r\nimport { Tag, TagProps, TagComponentType, useInterface, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\r\n\r\n\r\nexport type ViewBoxProps<T extends TagComponentType = \"div\"> = TagProps<T> & {\r\n startContent?: useBreakpointPropsType<ReactElement>;\r\n endContent?: useBreakpointPropsType<ReactElement>;\r\n horizental?: useBreakpointPropsType<boolean>;\r\n slotProps?: {\r\n scrollbar?: Omit<ScrollbarProps, 'children'>;\r\n }\r\n}\r\n\r\n\r\nconst ViewBox = React.forwardRef(({ children, ...rest }: ViewBoxProps, ref?: any) => {\r\n let [{ startContent, endContent, slotProps, horizental, ...props }] = useInterface<any>(\"ViewBox\", rest, {})\r\n const _p: any = {}\r\n if (startContent) _p.startContent = startContent\r\n if (endContent) _p.endContent = endContent\r\n if (horizental) _p.horizental = horizental\r\n const p: any = useBreakpointProps(_p)\r\n startContent = p.startContent\r\n endContent = p.endContent\r\n horizental = p.horizental\r\n\r\n return (\r\n <Tag\r\n {...props}\r\n sxr={{\r\n display: \"flex\",\r\n justifyContent: \"space-between\",\r\n flexDirection: horizental ? \"row\" : \"column\"\r\n }}\r\n baseClass='viewbox'\r\n ref={ref}\r\n >\r\n {startContent && <Tag baseClass='viewbox-start-content' flexBox flexDirection={horizental ? \"row\" : \"column\"}>{startContent}</Tag>}\r\n <Scrollbar\r\n {...slotProps?.scrollbar}\r\n className='viewbox-content'\r\n style={{\r\n flex: 1,\r\n display: \"flex\",\r\n flexDirection: horizental ? \"row\" : \"column\",\r\n ...(slotProps?.scrollbar?.style || {})\r\n }}\r\n >\r\n {children}\r\n </Scrollbar>\r\n {endContent && <Tag baseClass='viewbox-end-content' flexBox flexDirection={horizental ? \"row\" : \"column\"}>{endContent}</Tag>}\r\n </Tag>\r\n )\r\n})\r\n\r\nexport default ViewBox\r\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;AAgBA,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAAC,CAAC,EAAmC,EAAE,GAAS,KAAI;;AAAlD,IAAA,IAAA,EAAE,QAAQ,EAAA,GAAA,EAAyB,EAApB,IAAI,GAAA,MAAA,CAAA,EAAA,EAAnB,YAAqB,CAAF;IACjD,IAAI,CAAA,EAAA,CAAA,GAAkE,YAAY,CAAM,SAAS,EAAE,IAAI,EAAE,EAAE,CAAC,EAAvG,EAAE,YAAY,EAAE,UAAU,EAAE,SAAS,EAAE,UAAU,EAAA,GAAA,EAAY,EAAP,KAAK,GAAA,MAAA,CAAA,EAAA,EAA3D,CAAA,cAAA,EAAA,YAAA,EAAA,WAAA,EAAA,YAAA,CAA6D,CAA0C;IAC5G,MAAM,EAAE,GAAQ,EAAE;AAClB,IAAA,IAAI,YAAY;AAAE,QAAA,EAAE,CAAC,YAAY,GAAG,YAAY;AAChD,IAAA,IAAI,UAAU;AAAE,QAAA,EAAE,CAAC,UAAU,GAAG,UAAU;AAC1C,IAAA,IAAI,UAAU;AAAE,QAAA,EAAE,CAAC,UAAU,GAAG,UAAU;AAC1C,IAAA,MAAM,CAAC,GAAQ,kBAAkB,CAAC,EAAE,CAAC;AACrC,IAAA,YAAY,GAAG,CAAC,CAAC,YAAY;AAC7B,IAAA,UAAU,GAAG,CAAC,CAAC,UAAU;AACzB,IAAA,UAAU,GAAG,CAAC,CAAC,UAAU;AAEzB,IAAA,QACIA,IAAA,CAAC,GAAG,oBACI,KAAK,EAAA,EACT,GAAG,EAAE;AACD,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,cAAc,EAAE,eAAe;YAC/B,aAAa,EAAE,UAAU,GAAG,KAAK,GAAG;SACvC,EACD,SAAS,EAAC,SAAS,EACnB,GAAG,EAAE,GAAG,EAAA,QAAA,EAAA,CAEP,YAAY,IAAIC,GAAA,CAAC,GAAG,EAAA,EAAC,SAAS,EAAC,uBAAuB,EAAC,OAAO,EAAA,IAAA,EAAC,aAAa,EAAE,UAAU,GAAG,KAAK,GAAG,QAAQ,EAAA,QAAA,EAAG,YAAY,EAAA,CAAO,EAClIA,GAAA,CAAC,SAAS,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACF,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,MAAA,GAAA,MAAA,GAAT,SAAS,CAAE,SAAS,EAAA,EACxB,SAAS,EAAC,iBAAiB,EAC3B,KAAK,EAAA,MAAA,CAAA,MAAA,CAAA,EACD,IAAI,EAAE,CAAC,EACP,OAAO,EAAE,MAAM,EACf,aAAa,EAAE,UAAU,GAAG,KAAK,GAAG,QAAQ,EAAA,GACxC,CAAA,MAAA,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,MAAA,GAAA,MAAA,GAAT,SAAS,CAAE,SAAS,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,KAAK,KAAI,EAAE,EAAC,EAAA,QAAA,EAGzC,QAAQ,IACD,EACX,UAAU,IAAIA,GAAA,CAAC,GAAG,EAAA,EAAC,SAAS,EAAC,qBAAqB,EAAC,OAAO,EAAA,IAAA,EAAC,aAAa,EAAE,UAAU,GAAG,KAAK,GAAG,QAAQ,EAAA,QAAA,EAAG,UAAU,EAAA,CAAO,CAAA,EAAA,CAAA,CAC1H;AAEd,CAAC;;;;"}
1
+ {"version":3,"file":"index.mjs","sources":["../../src/ViewBox/index.tsx"],"sourcesContent":["\nimport React, { ReactElement } from 'react'\nimport Scrollbar, { ScrollbarProps } from '../Scrollbar'\nimport { Tag, TagProps, TagComponentType, useInterface, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\n\n\nexport type ViewBoxProps<T extends TagComponentType = \"div\"> = TagProps<T> & {\n startContent?: useBreakpointPropsType<ReactElement>;\n endContent?: useBreakpointPropsType<ReactElement>;\n horizental?: useBreakpointPropsType<boolean>;\n slotProps?: {\n scrollbar?: Omit<ScrollbarProps, 'children'>;\n }\n}\n\n\nconst ViewBox = React.forwardRef(({ children, ...rest }: ViewBoxProps, ref?: any) => {\n let [{ startContent, endContent, slotProps, horizental, ...props }] = useInterface<any>(\"ViewBox\", rest, {})\n const _p: any = {}\n if (startContent) _p.startContent = startContent\n if (endContent) _p.endContent = endContent\n if (horizental) _p.horizental = horizental\n const p: any = useBreakpointProps(_p)\n startContent = p.startContent\n endContent = p.endContent\n horizental = p.horizental\n\n return (\n <Tag\n {...props}\n sxr={{\n display: \"flex\",\n justifyContent: \"space-between\",\n flexDirection: horizental ? \"row\" : \"column\"\n }}\n baseClass='viewbox'\n ref={ref}\n >\n {startContent && <Tag baseClass='viewbox-start-content' flexBox flexDirection={horizental ? \"row\" : \"column\"}>{startContent}</Tag>}\n <Scrollbar\n {...slotProps?.scrollbar}\n className='viewbox-content'\n style={{\n flex: 1,\n display: \"flex\",\n flexDirection: horizental ? \"row\" : \"column\",\n ...(slotProps?.scrollbar?.style || {})\n }}\n >\n {children}\n </Scrollbar>\n {endContent && <Tag baseClass='viewbox-end-content' flexBox flexDirection={horizental ? \"row\" : \"column\"}>{endContent}</Tag>}\n </Tag>\n )\n})\n\nexport default ViewBox\n"],"names":["_jsxs","_jsx"],"mappings":"yMAgBA,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAAC,CAAC,EAAmC,EAAE,GAAS,KAAI;;AAAlD,IAAA,IAAA,EAAE,QAAQ,EAAA,GAAA,EAAyB,EAApB,IAAI,GAAA,MAAA,CAAA,EAAA,EAAnB,YAAqB,CAAF;IACjD,IAAI,CAAA,EAAA,CAAA,GAAkE,YAAY,CAAM,SAAS,EAAE,IAAI,EAAE,EAAE,CAAC,EAAvG,EAAE,YAAY,EAAE,UAAU,EAAE,SAAS,EAAE,UAAU,EAAA,GAAA,EAAY,EAAP,KAAK,GAAA,MAAA,CAAA,EAAA,EAA3D,CAAA,cAAA,EAAA,YAAA,EAAA,WAAA,EAAA,YAAA,CAA6D,CAA0C;IAC5G,MAAM,EAAE,GAAQ,EAAE;AAClB,IAAA,IAAI,YAAY;AAAE,QAAA,EAAE,CAAC,YAAY,GAAG,YAAY;AAChD,IAAA,IAAI,UAAU;AAAE,QAAA,EAAE,CAAC,UAAU,GAAG,UAAU;AAC1C,IAAA,IAAI,UAAU;AAAE,QAAA,EAAE,CAAC,UAAU,GAAG,UAAU;AAC1C,IAAA,MAAM,CAAC,GAAQ,kBAAkB,CAAC,EAAE,CAAC;AACrC,IAAA,YAAY,GAAG,CAAC,CAAC,YAAY;AAC7B,IAAA,UAAU,GAAG,CAAC,CAAC,UAAU;AACzB,IAAA,UAAU,GAAG,CAAC,CAAC,UAAU;AAEzB,IAAA,QACIA,IAAA,CAAC,GAAG,oBACI,KAAK,EAAA,EACT,GAAG,EAAE;AACD,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,cAAc,EAAE,eAAe;YAC/B,aAAa,EAAE,UAAU,GAAG,KAAK,GAAG;SACvC,EACD,SAAS,EAAC,SAAS,EACnB,GAAG,EAAE,GAAG,EAAA,QAAA,EAAA,CAEP,YAAY,IAAIC,GAAA,CAAC,GAAG,EAAA,EAAC,SAAS,EAAC,uBAAuB,EAAC,OAAO,EAAA,IAAA,EAAC,aAAa,EAAE,UAAU,GAAG,KAAK,GAAG,QAAQ,EAAA,QAAA,EAAG,YAAY,EAAA,CAAO,EAClIA,GAAA,CAAC,SAAS,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACF,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,MAAA,GAAA,MAAA,GAAT,SAAS,CAAE,SAAS,EAAA,EACxB,SAAS,EAAC,iBAAiB,EAC3B,KAAK,EAAA,MAAA,CAAA,MAAA,CAAA,EACD,IAAI,EAAE,CAAC,EACP,OAAO,EAAE,MAAM,EACf,aAAa,EAAE,UAAU,GAAG,KAAK,GAAG,QAAQ,EAAA,GACxC,CAAA,MAAA,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,MAAA,GAAA,MAAA,GAAT,SAAS,CAAE,SAAS,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,KAAK,KAAI,EAAE,EAAC,EAAA,QAAA,EAGzC,QAAQ,IACD,EACX,UAAU,IAAIA,GAAA,CAAC,GAAG,EAAA,EAAC,SAAS,EAAC,qBAAqB,EAAC,OAAO,EAAA,IAAA,EAAC,aAAa,EAAE,UAAU,GAAG,KAAK,GAAG,QAAQ,EAAA,QAAA,EAAG,UAAU,EAAA,CAAO,CAAA,EAAA,CAAA,CAC1H;AAEd,CAAC"}