@xanui/ui 1.1.56 → 1.1.58

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 (172) hide show
  1. package/Accordion/index.cjs.map +1 -1
  2. package/Accordion/index.js.map +1 -1
  3. package/Alert/index.cjs +3 -5
  4. package/Alert/index.cjs.map +1 -1
  5. package/Alert/index.js +3 -5
  6. package/Alert/index.js.map +1 -1
  7. package/Autocomplete/index.cjs.map +1 -1
  8. package/Autocomplete/index.js.map +1 -1
  9. package/Avatar/index.cjs.map +1 -1
  10. package/Avatar/index.js.map +1 -1
  11. package/Badge/index.cjs.map +1 -1
  12. package/Badge/index.js.map +1 -1
  13. package/Box/index.cjs.map +1 -1
  14. package/Box/index.js.map +1 -1
  15. package/Button/index.cjs.map +1 -1
  16. package/Button/index.js.map +1 -1
  17. package/ButtonGroup/index.cjs.map +1 -1
  18. package/ButtonGroup/index.js.map +1 -1
  19. package/Calendar/index.cjs.map +1 -1
  20. package/Calendar/index.js.map +1 -1
  21. package/CalendarInput/index.cjs.map +1 -1
  22. package/CalendarInput/index.js.map +1 -1
  23. package/Checkbox/index.cjs.map +1 -1
  24. package/Checkbox/index.js.map +1 -1
  25. package/Chip/index.cjs.map +1 -1
  26. package/Chip/index.js.map +1 -1
  27. package/CircleProgress/index.cjs.map +1 -1
  28. package/CircleProgress/index.js.map +1 -1
  29. package/ClickOutside/index.cjs.map +1 -1
  30. package/ClickOutside/index.js.map +1 -1
  31. package/Collaps/index.cjs.map +1 -1
  32. package/Collaps/index.js.map +1 -1
  33. package/Container/index.cjs.map +1 -1
  34. package/Container/index.js.map +1 -1
  35. package/DataFilter/index.cjs.map +1 -1
  36. package/DataFilter/index.js.map +1 -1
  37. package/DataFilter/options/DateFilter.cjs.map +1 -1
  38. package/DataFilter/options/DateFilter.js.map +1 -1
  39. package/DataFilter/options/DateRangeFilter.cjs.map +1 -1
  40. package/DataFilter/options/DateRangeFilter.js.map +1 -1
  41. package/DataFilter/options/MultiSelectFilter.cjs.map +1 -1
  42. package/DataFilter/options/MultiSelectFilter.js.map +1 -1
  43. package/DataFilter/options/NumberFilter.cjs.map +1 -1
  44. package/DataFilter/options/NumberFilter.js.map +1 -1
  45. package/DataFilter/options/NumberRangeFilter.cjs.map +1 -1
  46. package/DataFilter/options/NumberRangeFilter.js.map +1 -1
  47. package/DataFilter/options/SelectFilter.cjs.map +1 -1
  48. package/DataFilter/options/SelectFilter.js.map +1 -1
  49. package/DataFilter/options/TextFilter.cjs.map +1 -1
  50. package/DataFilter/options/TextFilter.js.map +1 -1
  51. package/Datatable/FilterBox.cjs.map +1 -1
  52. package/Datatable/FilterBox.js.map +1 -1
  53. package/Datatable/Row.cjs.map +1 -1
  54. package/Datatable/Row.js.map +1 -1
  55. package/Datatable/SelectedBox.cjs.map +1 -1
  56. package/Datatable/SelectedBox.js.map +1 -1
  57. package/Datatable/Table.cjs.map +1 -1
  58. package/Datatable/Table.js.map +1 -1
  59. package/Datatable/TableHead.cjs.map +1 -1
  60. package/Datatable/TableHead.js.map +1 -1
  61. package/Datatable/index.cjs.map +1 -1
  62. package/Datatable/index.js.map +1 -1
  63. package/Divider/index.cjs.map +1 -1
  64. package/Divider/index.js.map +1 -1
  65. package/Drawer/index.cjs.map +1 -1
  66. package/Drawer/index.js.map +1 -1
  67. package/Form/index.cjs.map +1 -1
  68. package/Form/index.js.map +1 -1
  69. package/GridContainer/index.cjs.map +1 -1
  70. package/GridContainer/index.js.map +1 -1
  71. package/GridItem/index.cjs.map +1 -1
  72. package/GridItem/index.js.map +1 -1
  73. package/IconButton/index.cjs.map +1 -1
  74. package/IconButton/index.js.map +1 -1
  75. package/Image/index.cjs.map +1 -1
  76. package/Image/index.js.map +1 -1
  77. package/Input/index.cjs.map +1 -1
  78. package/Input/index.js.map +1 -1
  79. package/InputNumber/index.cjs.map +1 -1
  80. package/InputNumber/index.js.map +1 -1
  81. package/Label/index.cjs.map +1 -1
  82. package/Label/index.js.map +1 -1
  83. package/Layer/index.cjs.map +1 -1
  84. package/Layer/index.js.map +1 -1
  85. package/LineProgress/index.cjs.map +1 -1
  86. package/LineProgress/index.js.map +1 -1
  87. package/List/ListContext.cjs.map +1 -1
  88. package/List/ListContext.js.map +1 -1
  89. package/List/index.cjs.map +1 -1
  90. package/List/index.js.map +1 -1
  91. package/ListItem/index.cjs.map +1 -1
  92. package/ListItem/index.js.map +1 -1
  93. package/LoadingBox/index.cjs.map +1 -1
  94. package/LoadingBox/index.js.map +1 -1
  95. package/Menu/index.cjs +3 -4
  96. package/Menu/index.cjs.map +1 -1
  97. package/Menu/index.d.ts +6 -0
  98. package/Menu/index.js +3 -4
  99. package/Menu/index.js.map +1 -1
  100. package/Modal/index.cjs.map +1 -1
  101. package/Modal/index.js.map +1 -1
  102. package/NoSSR/index.cjs.map +1 -1
  103. package/NoSSR/index.js.map +1 -1
  104. package/Option/index.cjs.map +1 -1
  105. package/Option/index.js.map +1 -1
  106. package/Paper/index.cjs.map +1 -1
  107. package/Paper/index.js.map +1 -1
  108. package/Portal/index.cjs.map +1 -1
  109. package/Portal/index.js.map +1 -1
  110. package/Radio/index.cjs.map +1 -1
  111. package/Radio/index.js.map +1 -1
  112. package/Scrollbar/index.cjs.map +1 -1
  113. package/Scrollbar/index.js.map +1 -1
  114. package/Select/index.cjs.map +1 -1
  115. package/Select/index.js.map +1 -1
  116. package/Skeleton/index.cjs.map +1 -1
  117. package/Skeleton/index.js.map +1 -1
  118. package/Stack/index.cjs.map +1 -1
  119. package/Stack/index.js.map +1 -1
  120. package/Switch/index.cjs.map +1 -1
  121. package/Switch/index.js.map +1 -1
  122. package/Tab/index.cjs.map +1 -1
  123. package/Tab/index.js.map +1 -1
  124. package/Table/index.cjs.map +1 -1
  125. package/Table/index.js.map +1 -1
  126. package/TableBody/index.cjs.map +1 -1
  127. package/TableBody/index.js.map +1 -1
  128. package/TableCell/index.cjs.map +1 -1
  129. package/TableCell/index.js.map +1 -1
  130. package/TableFooter/index.cjs.map +1 -1
  131. package/TableFooter/index.js.map +1 -1
  132. package/TableHead/index.cjs.map +1 -1
  133. package/TableHead/index.js.map +1 -1
  134. package/TablePagination/index.cjs.map +1 -1
  135. package/TablePagination/index.js.map +1 -1
  136. package/TableRow/index.cjs.map +1 -1
  137. package/TableRow/index.js.map +1 -1
  138. package/Tabs/index.cjs.map +1 -1
  139. package/Tabs/index.js.map +1 -1
  140. package/Text/index.cjs.map +1 -1
  141. package/Text/index.js.map +1 -1
  142. package/Toast/index.cjs +57 -42
  143. package/Toast/index.cjs.map +1 -1
  144. package/Toast/index.d.ts +4 -1
  145. package/Toast/index.js +58 -43
  146. package/Toast/index.js.map +1 -1
  147. package/Tooltip/index.cjs.map +1 -1
  148. package/Tooltip/index.js.map +1 -1
  149. package/ViewBox/index.cjs.map +1 -1
  150. package/ViewBox/index.js.map +1 -1
  151. package/index.cjs +4 -2
  152. package/index.cjs.map +1 -1
  153. package/index.d.ts +1 -0
  154. package/index.js +1 -0
  155. package/index.js.map +1 -1
  156. package/package.json +2 -2
  157. package/readme.md +104 -104
  158. package/useAlert/index.cjs.map +1 -1
  159. package/useAlert/index.js.map +1 -1
  160. package/useBlurCss/index.cjs.map +1 -1
  161. package/useBlurCss/index.js.map +1 -1
  162. package/useContextMenu/index.cjs +40 -0
  163. package/useContextMenu/index.cjs.map +1 -0
  164. package/useContextMenu/index.d.ts +9 -0
  165. package/useContextMenu/index.js +38 -0
  166. package/useContextMenu/index.js.map +1 -0
  167. package/useCorner/index.cjs.map +1 -1
  168. package/useCorner/index.js.map +1 -1
  169. package/useLayer/index.cjs.map +1 -1
  170. package/useLayer/index.js.map +1 -1
  171. package/useModal/index.cjs.map +1 -1
  172. package/useModal/index.js.map +1 -1
@@ -1 +1 @@
1
- {"version":3,"file":"index.cjs","sources":["../../src/Menu/index.tsx"],"sourcesContent":["\"use client\";\nimport { ReactNode, useEffect, useState, useRef } from \"react\";\nimport { Tag, TagProps, useBreakpointProps, useBreakpointPropsType, useInterface, TransitionProps, Transition } from \"@xanui/core\";\nimport Portal, { PortalProps } from \"../Portal\";\nimport ClickOutside from \"../ClickOutside\";\n\nexport type PlacementTypes =\n | \"top\"\n | \"top-left\"\n | \"top-right\"\n | \"bottom\"\n | \"bottom-left\"\n | \"bottom-right\"\n | \"right\"\n | \"right-top\"\n | \"right-bottom\"\n | \"left\"\n | \"left-top\"\n | \"left-bottom\";\n\nexport type MenuProps = {\n children?: ReactNode;\n target?: HTMLElement;\n placement?: useBreakpointPropsType<PlacementTypes>;\n zIndex?: number;\n onClickOutside?: (e: MouseEvent) => void;\n slotProps?: {\n transition?: Omit<TransitionProps, \"open\">;\n portal?: Omit<PortalProps, \"children\">;\n content?: Omit<TagProps<\"div\">, \"children\">;\n };\n};\n\nconst placements: PlacementTypes[] = [\n \"top\",\n \"top-left\",\n \"top-right\",\n \"bottom\",\n \"bottom-left\",\n \"bottom-right\",\n \"right\",\n \"right-top\",\n \"right-bottom\",\n \"left\",\n \"left-top\",\n \"left-bottom\",\n];\n\nconst getTransformOrigin = (placement: PlacementTypes) => {\n switch (placement) {\n case \"top\":\n return \"bottom\";\n case \"top-left\":\n return \"bottom left\";\n case \"top-right\":\n return \"bottom right\";\n case \"bottom\":\n return \"top\";\n case \"bottom-left\":\n return \"top left\";\n case \"bottom-right\":\n return \"top right\";\n case \"left\":\n return \"right\";\n case \"left-top\":\n return \"top right\";\n case \"left-bottom\":\n return \"bottom right\";\n case \"right\":\n return \"left\";\n case \"right-top\":\n return \"top left\";\n case \"right-bottom\":\n return \"bottom left\";\n default:\n return \"top\";\n }\n};\n\n// Compute coordinates for each placement\nconst computePosition = (\n placement: PlacementTypes,\n menu: HTMLElement,\n target: HTMLElement\n) => {\n const { width: mw, height: mh } = menu.getBoundingClientRect();\n const {\n top: tt,\n left: tl,\n bottom: tb,\n right: tr,\n width: tw,\n height: th,\n } = target.getBoundingClientRect();\n\n const positions: Record<PlacementTypes, { top: number; left: number }> = {\n \"bottom-left\": { top: tb, left: tl },\n \"bottom-right\": { top: tb, left: tr - mw },\n bottom: { top: tb, left: tl + (tw - mw) / 2 },\n\n \"top-left\": { top: tt - mh, left: tl },\n \"top-right\": { top: tt - mh, left: tr - mw },\n top: { top: tt - mh, left: tl + (tw - mw) / 2 },\n\n left: { top: tt + (th - mh) / 2, left: tl - mw },\n \"left-top\": { top: tt, left: tl - mw },\n \"left-bottom\": { top: tb - mh, left: tl - mw },\n\n right: { top: tt + (th - mh) / 2, left: tr },\n \"right-top\": { top: tt, left: tr },\n \"right-bottom\": { top: tb - mh, left: tr },\n };\n\n return positions[placement];\n};\n\n\n// Check if menu is off-screen\nconst isOffScreen = (menu: HTMLElement) => {\n const { x, y, width, height } = menu.getBoundingClientRect();\n return x < 0 || y < 0 || x + width > window.innerWidth || y + height > window.innerHeight;\n};\n\n// Try to place menu and fallback if off-screen\nconst placeMenu = (placement: PlacementTypes, menu: HTMLElement, target: HTMLElement) => {\n let pos = computePosition(placement, menu, target);\n menu.style.top = pos.top + \"px\";\n menu.style.left = pos.left + \"px\";\n\n if (isOffScreen(menu)) {\n for (const p of placements) {\n const fallbackPos = computePosition(p, menu, target);\n menu.style.top = fallbackPos.top + \"px\";\n menu.style.left = fallbackPos.left + \"px\";\n if (!isOffScreen(menu)) return p;\n }\n }\n return placement;\n};\n\nconst Menu = ({ children, target, ...props }: MenuProps) => {\n let [{ onClickOutside, placement, zIndex, slotProps }] = useInterface<any>(\"Menu\", props, {});\n const _p: any = {};\n if (placement) _p.placement = placement;\n const p: any = useBreakpointProps(_p);\n placement = p.placement || \"bottom-left\";\n\n const isOpen = Boolean(target);\n const [closed, setClosed] = useState(!isOpen);\n const [placed, setPlaced] = useState<PlacementTypes>(placement);\n const menuRef = useRef<HTMLDivElement>(null);\n\n // Open/close effect\n useEffect(() => {\n if (closed && isOpen) setClosed(false);\n }, [isOpen]);\n\n\n useEffect(() => {\n if (!closed && target && menuRef.current) {\n const updatePosition = () => {\n if (menuRef.current && target) {\n requestAnimationFrame(() => {\n const p = placeMenu(placement!, menuRef.current as any, target);\n setPlaced(p);\n });\n }\n };\n\n updatePosition();\n window.addEventListener(\"resize\", updatePosition);\n window.addEventListener(\"scroll\", updatePosition, true);\n\n return () => {\n window.removeEventListener(\"resize\", updatePosition);\n window.removeEventListener(\"scroll\", updatePosition, true);\n };\n }\n return\n }, [closed, target, placement]);\n\n\n if (closed) return null;\n\n return (\n <Portal {...slotProps?.portal}>\n <ClickOutside\n onClickOutside={(e: MouseEvent) => {\n if (target?.contains(e.target as any)) return;\n if (e.target !== target) {\n onClickOutside && onClickOutside(e);\n }\n }}\n ref={menuRef}\n sx={{ position: \"fixed\", zIndex: 1500 + (zIndex || 0) }}\n >\n <Transition\n duration={200}\n easing=\"fast\"\n variant=\"grow\"\n {...slotProps?.transition}\n open={isOpen}\n onClosed={() => {\n setClosed(true);\n slotProps?.transition?.onClosed?.();\n }}\n >\n <Tag\n baseClass=\"menu-content\"\n {...slotProps?.content}\n sxr={{\n overflow: \"hidden\",\n bgcolor: \"background.primary\",\n shadow: 2,\n radius: 1,\n transformOrigin: getTransformOrigin(placed),\n ...slotProps?.content?.sx,\n }}\n >\n {children}\n </Tag>\n </Transition>\n </ClickOutside>\n </Portal>\n );\n};\n\nexport default Menu;\n"],"names":[],"mappings":";;;;;;;;;;AAiCA;;;;;;;;;;;;;;AAeA;;AAEQ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;;AAEZ;AAEA;AACA;AAKI;AACA;AASA;;;AAGI;;AAGA;AACA;AAEA;;AAEA;AAEA;;;;AAKJ;AACJ;AAGA;AACA;AACI;;AAEJ;AAEA;AACA;;;;AAKI;AACI;;;;AAII;AAAwB;;;AAGhC;AACJ;AAEA;;;;;AAGI;AAAe;AACf;AACA;AAEA;;;AAGA;;;;;AAKA;;;;AAMY;;AAEQ;;AAEJ;;AAER;AAEA;AACA;;AAGA;AACI;;AAEJ;;;;AAMR;AAAY;;;;AAOI;AACI;;;;;;;AAmCxB;;"}
1
+ {"version":3,"file":"index.cjs","sources":["../../src/Menu/index.tsx"],"sourcesContent":["\"use client\";\r\nimport { ReactNode, useEffect, useState, useRef } from \"react\";\r\nimport { Tag, TagProps, useBreakpointProps, useBreakpointPropsType, useInterface, TransitionProps, Transition } from \"@xanui/core\";\r\nimport Portal, { PortalProps } from \"../Portal\";\r\nimport ClickOutside from \"../ClickOutside\";\r\n\r\nexport type PlacementTypes =\r\n | \"top\"\r\n | \"top-left\"\r\n | \"top-right\"\r\n | \"bottom\"\r\n | \"bottom-left\"\r\n | \"bottom-right\"\r\n | \"right\"\r\n | \"right-top\"\r\n | \"right-bottom\"\r\n | \"left\"\r\n | \"left-top\"\r\n | \"left-bottom\";\r\n\r\nexport type MenuProps = {\r\n children?: ReactNode;\r\n target?: HTMLElement;\r\n placement?: useBreakpointPropsType<PlacementTypes>;\r\n zIndex?: number;\r\n\r\n variant?: TransitionProps['variant'];\r\n duration?: TransitionProps['duration'];\r\n onOpen?: TransitionProps['onOpen'];\r\n onOpened?: TransitionProps['onOpened'];\r\n onClose?: TransitionProps['onClose'];\r\n onClosed?: TransitionProps['onClosed'];\r\n\r\n onClickOutside?: (e: MouseEvent) => void;\r\n\r\n slotProps?: {\r\n transition?: Omit<TransitionProps, \"open\">;\r\n portal?: Omit<PortalProps, \"children\">;\r\n content?: Omit<TagProps<\"div\">, \"children\">;\r\n };\r\n};\r\n\r\nconst placements: PlacementTypes[] = [\r\n \"top\",\r\n \"top-left\",\r\n \"top-right\",\r\n \"bottom\",\r\n \"bottom-left\",\r\n \"bottom-right\",\r\n \"right\",\r\n \"right-top\",\r\n \"right-bottom\",\r\n \"left\",\r\n \"left-top\",\r\n \"left-bottom\",\r\n];\r\n\r\nconst getTransformOrigin = (placement: PlacementTypes) => {\r\n switch (placement) {\r\n case \"top\":\r\n return \"bottom\";\r\n case \"top-left\":\r\n return \"bottom left\";\r\n case \"top-right\":\r\n return \"bottom right\";\r\n case \"bottom\":\r\n return \"top\";\r\n case \"bottom-left\":\r\n return \"top left\";\r\n case \"bottom-right\":\r\n return \"top right\";\r\n case \"left\":\r\n return \"right\";\r\n case \"left-top\":\r\n return \"top right\";\r\n case \"left-bottom\":\r\n return \"bottom right\";\r\n case \"right\":\r\n return \"left\";\r\n case \"right-top\":\r\n return \"top left\";\r\n case \"right-bottom\":\r\n return \"bottom left\";\r\n default:\r\n return \"top\";\r\n }\r\n};\r\n\r\n// Compute coordinates for each placement\r\nconst computePosition = (\r\n placement: PlacementTypes,\r\n menu: HTMLElement,\r\n target: HTMLElement\r\n) => {\r\n const { width: mw, height: mh } = menu.getBoundingClientRect();\r\n const {\r\n top: tt,\r\n left: tl,\r\n bottom: tb,\r\n right: tr,\r\n width: tw,\r\n height: th,\r\n } = target.getBoundingClientRect();\r\n\r\n const positions: Record<PlacementTypes, { top: number; left: number }> = {\r\n \"bottom-left\": { top: tb, left: tl },\r\n \"bottom-right\": { top: tb, left: tr - mw },\r\n bottom: { top: tb, left: tl + (tw - mw) / 2 },\r\n\r\n \"top-left\": { top: tt - mh, left: tl },\r\n \"top-right\": { top: tt - mh, left: tr - mw },\r\n top: { top: tt - mh, left: tl + (tw - mw) / 2 },\r\n\r\n left: { top: tt + (th - mh) / 2, left: tl - mw },\r\n \"left-top\": { top: tt, left: tl - mw },\r\n \"left-bottom\": { top: tb - mh, left: tl - mw },\r\n\r\n right: { top: tt + (th - mh) / 2, left: tr },\r\n \"right-top\": { top: tt, left: tr },\r\n \"right-bottom\": { top: tb - mh, left: tr },\r\n };\r\n\r\n return positions[placement];\r\n};\r\n\r\n\r\n// Check if menu is off-screen\r\nconst isOffScreen = (menu: HTMLElement) => {\r\n const { x, y, width, height } = menu.getBoundingClientRect();\r\n return x < 0 || y < 0 || x + width > window.innerWidth || y + height > window.innerHeight;\r\n};\r\n\r\n// Try to place menu and fallback if off-screen\r\nconst placeMenu = (placement: PlacementTypes, menu: HTMLElement, target: HTMLElement) => {\r\n let pos = computePosition(placement, menu, target);\r\n menu.style.top = pos.top + \"px\";\r\n menu.style.left = pos.left + \"px\";\r\n\r\n if (isOffScreen(menu)) {\r\n for (const p of placements) {\r\n const fallbackPos = computePosition(p, menu, target);\r\n menu.style.top = fallbackPos.top + \"px\";\r\n menu.style.left = fallbackPos.left + \"px\";\r\n if (!isOffScreen(menu)) return p;\r\n }\r\n }\r\n return placement;\r\n};\r\n\r\nconst Menu = ({ children, target, ...props }: MenuProps) => {\r\n let [{ onClickOutside, variant, duration, onOpen, onOpened, onClose, onClosed, placement, zIndex, slotProps }] = useInterface<any>(\"Menu\", props, {});\r\n const _p: any = {};\r\n if (placement) _p.placement = placement;\r\n const p: any = useBreakpointProps(_p);\r\n placement = p.placement || \"bottom-left\";\r\n\r\n const isOpen = Boolean(target);\r\n const [closed, setClosed] = useState(!isOpen);\r\n const [placed, setPlaced] = useState<PlacementTypes>(placement);\r\n const menuRef = useRef<HTMLDivElement>(null);\r\n\r\n // Open/close effect\r\n useEffect(() => {\r\n if (closed && isOpen) setClosed(false);\r\n }, [isOpen]);\r\n\r\n\r\n useEffect(() => {\r\n if (!closed && target && menuRef.current) {\r\n const updatePosition = () => {\r\n if (menuRef.current && target) {\r\n requestAnimationFrame(() => {\r\n const p = placeMenu(placement!, menuRef.current as any, target);\r\n setPlaced(p);\r\n });\r\n }\r\n };\r\n\r\n updatePosition();\r\n window.addEventListener(\"resize\", updatePosition);\r\n window.addEventListener(\"scroll\", updatePosition, true);\r\n\r\n return () => {\r\n window.removeEventListener(\"resize\", updatePosition);\r\n window.removeEventListener(\"scroll\", updatePosition, true);\r\n };\r\n }\r\n return\r\n }, [closed, target, placement]);\r\n\r\n\r\n if (closed) return null;\r\n\r\n return (\r\n <Portal {...slotProps?.portal}>\r\n <ClickOutside\r\n onClickOutside={(e: MouseEvent) => {\r\n if (target?.contains(e.target as any)) return;\r\n if (e.target !== target) {\r\n onClickOutside && onClickOutside(e);\r\n }\r\n }}\r\n ref={menuRef}\r\n sx={{ position: \"fixed\", zIndex: 1500 + (zIndex || 0) }}\r\n >\r\n <Transition\r\n duration={duration ?? 200}\r\n easing=\"fast\"\r\n variant={variant ?? \"grow\"}\r\n {...slotProps?.transition}\r\n open={isOpen}\r\n onOpen={onOpen}\r\n onOpened={onOpened}\r\n onClose={onClose}\r\n onClosed={() => {\r\n setClosed(true);\r\n onClosed && onClosed()\r\n }}\r\n >\r\n <Tag\r\n baseClass=\"menu-content\"\r\n {...slotProps?.content}\r\n sxr={{\r\n overflow: \"hidden\",\r\n bgcolor: \"background.primary\",\r\n shadow: 2,\r\n radius: 1,\r\n transformOrigin: getTransformOrigin(placed),\r\n ...slotProps?.content?.sx,\r\n }}\r\n >\r\n {children}\r\n </Tag>\r\n </Transition>\r\n </ClickOutside>\r\n </Portal>\r\n );\r\n};\r\n\r\nexport default Menu;\r\n"],"names":[],"mappings":";;;;;;;;;;AA0CA;;;;;;;;;;;;;;AAeA;;AAEQ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;;AAEZ;AAEA;AACA;AAKI;AACA;AASA;;;AAGI;;AAGA;AACA;AAEA;;AAEA;AAEA;;;;AAKJ;AACJ;AAGA;AACA;AACI;;AAEJ;AAEA;AACA;;;;AAKI;AACI;;;;AAII;AAAwB;;;AAGhC;AACJ;AAEA;;;AACI;;AAEA;AAAe;AACf;AACA;AAEA;;;AAGA;;;;;AAKA;;;;AAMY;;AAEQ;;AAEJ;;AAER;AAEA;AACA;;AAGA;AACI;;AAEJ;;;;AAMR;AAAY;;;;AAOI;AACI;;AAER;;;;AAoChB;;"}
package/Menu/index.d.ts CHANGED
@@ -9,6 +9,12 @@ type MenuProps = {
9
9
  target?: HTMLElement;
10
10
  placement?: useBreakpointPropsType<PlacementTypes>;
11
11
  zIndex?: number;
12
+ variant?: TransitionProps['variant'];
13
+ duration?: TransitionProps['duration'];
14
+ onOpen?: TransitionProps['onOpen'];
15
+ onOpened?: TransitionProps['onOpened'];
16
+ onClose?: TransitionProps['onClose'];
17
+ onClosed?: TransitionProps['onClosed'];
12
18
  onClickOutside?: (e: MouseEvent) => void;
13
19
  slotProps?: {
14
20
  transition?: Omit<TransitionProps, "open">;
package/Menu/index.js CHANGED
@@ -94,7 +94,7 @@ const placeMenu = (placement, menu, target) => {
94
94
  const Menu = (_a) => {
95
95
  var _b;
96
96
  var { children, target } = _a, props = __rest(_a, ["children", "target"]);
97
- let [{ onClickOutside, placement, zIndex, slotProps }] = useInterface("Menu", props, {});
97
+ let [{ onClickOutside, variant, duration, onOpen, onOpened, onClose, onClosed, placement, zIndex, slotProps }] = useInterface("Menu", props, {});
98
98
  const _p = {};
99
99
  if (placement)
100
100
  _p.placement = placement;
@@ -137,10 +137,9 @@ const Menu = (_a) => {
137
137
  if (e.target !== target) {
138
138
  onClickOutside && onClickOutside(e);
139
139
  }
140
- }, ref: menuRef, sx: { position: "fixed", zIndex: 1500 + (zIndex || 0) }, children: jsx(Transition, Object.assign({ duration: 200, easing: "fast", variant: "grow" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.transition, { open: isOpen, onClosed: () => {
141
- var _a, _b;
140
+ }, ref: menuRef, sx: { position: "fixed", zIndex: 1500 + (zIndex || 0) }, children: jsx(Transition, Object.assign({ duration: duration !== null && duration !== void 0 ? duration : 200, easing: "fast", variant: variant !== null && variant !== void 0 ? variant : "grow" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.transition, { open: isOpen, onOpen: onOpen, onOpened: onOpened, onClose: onClose, onClosed: () => {
142
141
  setClosed(true);
143
- (_b = (_a = slotProps === null || slotProps === void 0 ? void 0 : slotProps.transition) === null || _a === void 0 ? void 0 : _a.onClosed) === null || _b === void 0 ? void 0 : _b.call(_a);
142
+ onClosed && onClosed();
144
143
  }, children: jsx(Tag, Object.assign({ baseClass: "menu-content" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.content, { sxr: Object.assign({ overflow: "hidden", bgcolor: "background.primary", shadow: 2, radius: 1, transformOrigin: getTransformOrigin(placed) }, (_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.content) === null || _b === void 0 ? void 0 : _b.sx), children: children })) })) }) })));
145
144
  };
146
145
 
package/Menu/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../../src/Menu/index.tsx"],"sourcesContent":["\"use client\";\nimport { ReactNode, useEffect, useState, useRef } from \"react\";\nimport { Tag, TagProps, useBreakpointProps, useBreakpointPropsType, useInterface, TransitionProps, Transition } from \"@xanui/core\";\nimport Portal, { PortalProps } from \"../Portal\";\nimport ClickOutside from \"../ClickOutside\";\n\nexport type PlacementTypes =\n | \"top\"\n | \"top-left\"\n | \"top-right\"\n | \"bottom\"\n | \"bottom-left\"\n | \"bottom-right\"\n | \"right\"\n | \"right-top\"\n | \"right-bottom\"\n | \"left\"\n | \"left-top\"\n | \"left-bottom\";\n\nexport type MenuProps = {\n children?: ReactNode;\n target?: HTMLElement;\n placement?: useBreakpointPropsType<PlacementTypes>;\n zIndex?: number;\n onClickOutside?: (e: MouseEvent) => void;\n slotProps?: {\n transition?: Omit<TransitionProps, \"open\">;\n portal?: Omit<PortalProps, \"children\">;\n content?: Omit<TagProps<\"div\">, \"children\">;\n };\n};\n\nconst placements: PlacementTypes[] = [\n \"top\",\n \"top-left\",\n \"top-right\",\n \"bottom\",\n \"bottom-left\",\n \"bottom-right\",\n \"right\",\n \"right-top\",\n \"right-bottom\",\n \"left\",\n \"left-top\",\n \"left-bottom\",\n];\n\nconst getTransformOrigin = (placement: PlacementTypes) => {\n switch (placement) {\n case \"top\":\n return \"bottom\";\n case \"top-left\":\n return \"bottom left\";\n case \"top-right\":\n return \"bottom right\";\n case \"bottom\":\n return \"top\";\n case \"bottom-left\":\n return \"top left\";\n case \"bottom-right\":\n return \"top right\";\n case \"left\":\n return \"right\";\n case \"left-top\":\n return \"top right\";\n case \"left-bottom\":\n return \"bottom right\";\n case \"right\":\n return \"left\";\n case \"right-top\":\n return \"top left\";\n case \"right-bottom\":\n return \"bottom left\";\n default:\n return \"top\";\n }\n};\n\n// Compute coordinates for each placement\nconst computePosition = (\n placement: PlacementTypes,\n menu: HTMLElement,\n target: HTMLElement\n) => {\n const { width: mw, height: mh } = menu.getBoundingClientRect();\n const {\n top: tt,\n left: tl,\n bottom: tb,\n right: tr,\n width: tw,\n height: th,\n } = target.getBoundingClientRect();\n\n const positions: Record<PlacementTypes, { top: number; left: number }> = {\n \"bottom-left\": { top: tb, left: tl },\n \"bottom-right\": { top: tb, left: tr - mw },\n bottom: { top: tb, left: tl + (tw - mw) / 2 },\n\n \"top-left\": { top: tt - mh, left: tl },\n \"top-right\": { top: tt - mh, left: tr - mw },\n top: { top: tt - mh, left: tl + (tw - mw) / 2 },\n\n left: { top: tt + (th - mh) / 2, left: tl - mw },\n \"left-top\": { top: tt, left: tl - mw },\n \"left-bottom\": { top: tb - mh, left: tl - mw },\n\n right: { top: tt + (th - mh) / 2, left: tr },\n \"right-top\": { top: tt, left: tr },\n \"right-bottom\": { top: tb - mh, left: tr },\n };\n\n return positions[placement];\n};\n\n\n// Check if menu is off-screen\nconst isOffScreen = (menu: HTMLElement) => {\n const { x, y, width, height } = menu.getBoundingClientRect();\n return x < 0 || y < 0 || x + width > window.innerWidth || y + height > window.innerHeight;\n};\n\n// Try to place menu and fallback if off-screen\nconst placeMenu = (placement: PlacementTypes, menu: HTMLElement, target: HTMLElement) => {\n let pos = computePosition(placement, menu, target);\n menu.style.top = pos.top + \"px\";\n menu.style.left = pos.left + \"px\";\n\n if (isOffScreen(menu)) {\n for (const p of placements) {\n const fallbackPos = computePosition(p, menu, target);\n menu.style.top = fallbackPos.top + \"px\";\n menu.style.left = fallbackPos.left + \"px\";\n if (!isOffScreen(menu)) return p;\n }\n }\n return placement;\n};\n\nconst Menu = ({ children, target, ...props }: MenuProps) => {\n let [{ onClickOutside, placement, zIndex, slotProps }] = useInterface<any>(\"Menu\", props, {});\n const _p: any = {};\n if (placement) _p.placement = placement;\n const p: any = useBreakpointProps(_p);\n placement = p.placement || \"bottom-left\";\n\n const isOpen = Boolean(target);\n const [closed, setClosed] = useState(!isOpen);\n const [placed, setPlaced] = useState<PlacementTypes>(placement);\n const menuRef = useRef<HTMLDivElement>(null);\n\n // Open/close effect\n useEffect(() => {\n if (closed && isOpen) setClosed(false);\n }, [isOpen]);\n\n\n useEffect(() => {\n if (!closed && target && menuRef.current) {\n const updatePosition = () => {\n if (menuRef.current && target) {\n requestAnimationFrame(() => {\n const p = placeMenu(placement!, menuRef.current as any, target);\n setPlaced(p);\n });\n }\n };\n\n updatePosition();\n window.addEventListener(\"resize\", updatePosition);\n window.addEventListener(\"scroll\", updatePosition, true);\n\n return () => {\n window.removeEventListener(\"resize\", updatePosition);\n window.removeEventListener(\"scroll\", updatePosition, true);\n };\n }\n return\n }, [closed, target, placement]);\n\n\n if (closed) return null;\n\n return (\n <Portal {...slotProps?.portal}>\n <ClickOutside\n onClickOutside={(e: MouseEvent) => {\n if (target?.contains(e.target as any)) return;\n if (e.target !== target) {\n onClickOutside && onClickOutside(e);\n }\n }}\n ref={menuRef}\n sx={{ position: \"fixed\", zIndex: 1500 + (zIndex || 0) }}\n >\n <Transition\n duration={200}\n easing=\"fast\"\n variant=\"grow\"\n {...slotProps?.transition}\n open={isOpen}\n onClosed={() => {\n setClosed(true);\n slotProps?.transition?.onClosed?.();\n }}\n >\n <Tag\n baseClass=\"menu-content\"\n {...slotProps?.content}\n sxr={{\n overflow: \"hidden\",\n bgcolor: \"background.primary\",\n shadow: 2,\n radius: 1,\n transformOrigin: getTransformOrigin(placed),\n ...slotProps?.content?.sx,\n }}\n >\n {children}\n </Tag>\n </Transition>\n </ClickOutside>\n </Portal>\n );\n};\n\nexport default Menu;\n"],"names":[],"mappings":";;;;;;;;AAiCA;;;;;;;;;;;;;;AAeA;;AAEQ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;;AAEZ;AAEA;AACA;AAKI;AACA;AASA;;;AAGI;;AAGA;AACA;AAEA;;AAEA;AAEA;;;;AAKJ;AACJ;AAGA;AACA;AACI;;AAEJ;AAEA;AACA;;;;AAKI;AACI;;;;AAII;AAAwB;;;AAGhC;AACJ;AAEA;;;;;AAGI;AAAe;AACf;AACA;AAEA;;;AAGA;;;;;AAKA;;;;AAMY;;AAEQ;;AAEJ;;AAER;AAEA;AACA;;AAGA;AACI;;AAEJ;;;;AAMR;AAAY;;;;AAOI;AACI;;;;;;;AAmCxB;;"}
1
+ {"version":3,"file":"index.js","sources":["../../src/Menu/index.tsx"],"sourcesContent":["\"use client\";\r\nimport { ReactNode, useEffect, useState, useRef } from \"react\";\r\nimport { Tag, TagProps, useBreakpointProps, useBreakpointPropsType, useInterface, TransitionProps, Transition } from \"@xanui/core\";\r\nimport Portal, { PortalProps } from \"../Portal\";\r\nimport ClickOutside from \"../ClickOutside\";\r\n\r\nexport type PlacementTypes =\r\n | \"top\"\r\n | \"top-left\"\r\n | \"top-right\"\r\n | \"bottom\"\r\n | \"bottom-left\"\r\n | \"bottom-right\"\r\n | \"right\"\r\n | \"right-top\"\r\n | \"right-bottom\"\r\n | \"left\"\r\n | \"left-top\"\r\n | \"left-bottom\";\r\n\r\nexport type MenuProps = {\r\n children?: ReactNode;\r\n target?: HTMLElement;\r\n placement?: useBreakpointPropsType<PlacementTypes>;\r\n zIndex?: number;\r\n\r\n variant?: TransitionProps['variant'];\r\n duration?: TransitionProps['duration'];\r\n onOpen?: TransitionProps['onOpen'];\r\n onOpened?: TransitionProps['onOpened'];\r\n onClose?: TransitionProps['onClose'];\r\n onClosed?: TransitionProps['onClosed'];\r\n\r\n onClickOutside?: (e: MouseEvent) => void;\r\n\r\n slotProps?: {\r\n transition?: Omit<TransitionProps, \"open\">;\r\n portal?: Omit<PortalProps, \"children\">;\r\n content?: Omit<TagProps<\"div\">, \"children\">;\r\n };\r\n};\r\n\r\nconst placements: PlacementTypes[] = [\r\n \"top\",\r\n \"top-left\",\r\n \"top-right\",\r\n \"bottom\",\r\n \"bottom-left\",\r\n \"bottom-right\",\r\n \"right\",\r\n \"right-top\",\r\n \"right-bottom\",\r\n \"left\",\r\n \"left-top\",\r\n \"left-bottom\",\r\n];\r\n\r\nconst getTransformOrigin = (placement: PlacementTypes) => {\r\n switch (placement) {\r\n case \"top\":\r\n return \"bottom\";\r\n case \"top-left\":\r\n return \"bottom left\";\r\n case \"top-right\":\r\n return \"bottom right\";\r\n case \"bottom\":\r\n return \"top\";\r\n case \"bottom-left\":\r\n return \"top left\";\r\n case \"bottom-right\":\r\n return \"top right\";\r\n case \"left\":\r\n return \"right\";\r\n case \"left-top\":\r\n return \"top right\";\r\n case \"left-bottom\":\r\n return \"bottom right\";\r\n case \"right\":\r\n return \"left\";\r\n case \"right-top\":\r\n return \"top left\";\r\n case \"right-bottom\":\r\n return \"bottom left\";\r\n default:\r\n return \"top\";\r\n }\r\n};\r\n\r\n// Compute coordinates for each placement\r\nconst computePosition = (\r\n placement: PlacementTypes,\r\n menu: HTMLElement,\r\n target: HTMLElement\r\n) => {\r\n const { width: mw, height: mh } = menu.getBoundingClientRect();\r\n const {\r\n top: tt,\r\n left: tl,\r\n bottom: tb,\r\n right: tr,\r\n width: tw,\r\n height: th,\r\n } = target.getBoundingClientRect();\r\n\r\n const positions: Record<PlacementTypes, { top: number; left: number }> = {\r\n \"bottom-left\": { top: tb, left: tl },\r\n \"bottom-right\": { top: tb, left: tr - mw },\r\n bottom: { top: tb, left: tl + (tw - mw) / 2 },\r\n\r\n \"top-left\": { top: tt - mh, left: tl },\r\n \"top-right\": { top: tt - mh, left: tr - mw },\r\n top: { top: tt - mh, left: tl + (tw - mw) / 2 },\r\n\r\n left: { top: tt + (th - mh) / 2, left: tl - mw },\r\n \"left-top\": { top: tt, left: tl - mw },\r\n \"left-bottom\": { top: tb - mh, left: tl - mw },\r\n\r\n right: { top: tt + (th - mh) / 2, left: tr },\r\n \"right-top\": { top: tt, left: tr },\r\n \"right-bottom\": { top: tb - mh, left: tr },\r\n };\r\n\r\n return positions[placement];\r\n};\r\n\r\n\r\n// Check if menu is off-screen\r\nconst isOffScreen = (menu: HTMLElement) => {\r\n const { x, y, width, height } = menu.getBoundingClientRect();\r\n return x < 0 || y < 0 || x + width > window.innerWidth || y + height > window.innerHeight;\r\n};\r\n\r\n// Try to place menu and fallback if off-screen\r\nconst placeMenu = (placement: PlacementTypes, menu: HTMLElement, target: HTMLElement) => {\r\n let pos = computePosition(placement, menu, target);\r\n menu.style.top = pos.top + \"px\";\r\n menu.style.left = pos.left + \"px\";\r\n\r\n if (isOffScreen(menu)) {\r\n for (const p of placements) {\r\n const fallbackPos = computePosition(p, menu, target);\r\n menu.style.top = fallbackPos.top + \"px\";\r\n menu.style.left = fallbackPos.left + \"px\";\r\n if (!isOffScreen(menu)) return p;\r\n }\r\n }\r\n return placement;\r\n};\r\n\r\nconst Menu = ({ children, target, ...props }: MenuProps) => {\r\n let [{ onClickOutside, variant, duration, onOpen, onOpened, onClose, onClosed, placement, zIndex, slotProps }] = useInterface<any>(\"Menu\", props, {});\r\n const _p: any = {};\r\n if (placement) _p.placement = placement;\r\n const p: any = useBreakpointProps(_p);\r\n placement = p.placement || \"bottom-left\";\r\n\r\n const isOpen = Boolean(target);\r\n const [closed, setClosed] = useState(!isOpen);\r\n const [placed, setPlaced] = useState<PlacementTypes>(placement);\r\n const menuRef = useRef<HTMLDivElement>(null);\r\n\r\n // Open/close effect\r\n useEffect(() => {\r\n if (closed && isOpen) setClosed(false);\r\n }, [isOpen]);\r\n\r\n\r\n useEffect(() => {\r\n if (!closed && target && menuRef.current) {\r\n const updatePosition = () => {\r\n if (menuRef.current && target) {\r\n requestAnimationFrame(() => {\r\n const p = placeMenu(placement!, menuRef.current as any, target);\r\n setPlaced(p);\r\n });\r\n }\r\n };\r\n\r\n updatePosition();\r\n window.addEventListener(\"resize\", updatePosition);\r\n window.addEventListener(\"scroll\", updatePosition, true);\r\n\r\n return () => {\r\n window.removeEventListener(\"resize\", updatePosition);\r\n window.removeEventListener(\"scroll\", updatePosition, true);\r\n };\r\n }\r\n return\r\n }, [closed, target, placement]);\r\n\r\n\r\n if (closed) return null;\r\n\r\n return (\r\n <Portal {...slotProps?.portal}>\r\n <ClickOutside\r\n onClickOutside={(e: MouseEvent) => {\r\n if (target?.contains(e.target as any)) return;\r\n if (e.target !== target) {\r\n onClickOutside && onClickOutside(e);\r\n }\r\n }}\r\n ref={menuRef}\r\n sx={{ position: \"fixed\", zIndex: 1500 + (zIndex || 0) }}\r\n >\r\n <Transition\r\n duration={duration ?? 200}\r\n easing=\"fast\"\r\n variant={variant ?? \"grow\"}\r\n {...slotProps?.transition}\r\n open={isOpen}\r\n onOpen={onOpen}\r\n onOpened={onOpened}\r\n onClose={onClose}\r\n onClosed={() => {\r\n setClosed(true);\r\n onClosed && onClosed()\r\n }}\r\n >\r\n <Tag\r\n baseClass=\"menu-content\"\r\n {...slotProps?.content}\r\n sxr={{\r\n overflow: \"hidden\",\r\n bgcolor: \"background.primary\",\r\n shadow: 2,\r\n radius: 1,\r\n transformOrigin: getTransformOrigin(placed),\r\n ...slotProps?.content?.sx,\r\n }}\r\n >\r\n {children}\r\n </Tag>\r\n </Transition>\r\n </ClickOutside>\r\n </Portal>\r\n );\r\n};\r\n\r\nexport default Menu;\r\n"],"names":[],"mappings":";;;;;;;;AA0CA;;;;;;;;;;;;;;AAeA;;AAEQ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;;AAEZ;AAEA;AACA;AAKI;AACA;AASA;;;AAGI;;AAGA;AACA;AAEA;;AAEA;AAEA;;;;AAKJ;AACJ;AAGA;AACA;AACI;;AAEJ;AAEA;AACA;;;;AAKI;AACI;;;;AAII;AAAwB;;;AAGhC;AACJ;AAEA;;;AACI;;AAEA;AAAe;AACf;AACA;AAEA;;;AAGA;;;;;AAKA;;;;AAMY;;AAEQ;;AAEJ;;AAER;AAEA;AACA;;AAGA;AACI;;AAEJ;;;;AAMR;AAAY;;;;AAOI;AACI;;AAER;;;;AAoChB;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"index.cjs","sources":["../../src/Modal/index.tsx"],"sourcesContent":["\"use client\";\nimport { ReactNode, useEffect, useRef } from \"react\";\nimport useModal, { UseModalProps } from \"../useModal\";\nimport { Renderar, Tag } from \"@xanui/core\";\n\nexport type ModalProps = UseModalProps & {\n children: ReactNode;\n open: boolean;\n}\n\nconst Modal = ({ children, open, ...props }: ModalProps) => {\n const ref = useRef<HTMLDivElement>(null);\n\n const modal = useModal(<>{children}</>, {\n ...props,\n onClickOutside: () => {\n if (props?.onClickOutside) {\n props.onClickOutside()\n }\n },\n slotProps: {\n layer: {\n portal: {\n container: ref?.current || undefined\n }\n }\n }\n })\n\n useEffect(() => {\n if (open) {\n modal.open()\n } else {\n modal.close()\n }\n }, [open])\n return <Tag ref={ref}></Tag>\n}\n\nconst ActionModal = ({ children, ...props }: ModalProps) => {\n return (\n <Modal {...props}>\n {children}\n </Modal>\n )\n}\n\nModal.open = (children: ModalProps['children'], props?: Omit<ModalProps, 'children' | \"open\">) => {\n const m = Renderar.render(ActionModal as any, {\n open: true,\n ...props,\n children,\n onClosed: () => {\n m.unrender()\n if (props?.onClosed) {\n props.onClosed()\n }\n }\n })\n\n return {\n open: () => {\n m.updateProps({ open: true })\n },\n close: () => {\n m.updateProps({ open: false })\n },\n }\n};\n\nModal.close = () => {\n Renderar.unrender(ActionModal as any)\n}\n\nexport default Modal;"],"names":[],"mappings":";;;;;;;;;AAUA;;AACG;AAEA;;;;;AAQM;AACG;;AAEC;AACH;AACH;;;;;;;;AASJ;AACA;AACH;AAEA;AAAqB;;AAMrB;AAEA;AACG;;;;;AASG;;;;;;;;;AAWN;AAEA;AACG;AACH;;"}
1
+ {"version":3,"file":"index.cjs","sources":["../../src/Modal/index.tsx"],"sourcesContent":["\"use client\";\r\nimport { ReactNode, useEffect, useRef } from \"react\";\r\nimport useModal, { UseModalProps } from \"../useModal\";\r\nimport { Renderar, Tag } from \"@xanui/core\";\r\n\r\nexport type ModalProps = UseModalProps & {\r\n children: ReactNode;\r\n open: boolean;\r\n}\r\n\r\nconst Modal = ({ children, open, ...props }: ModalProps) => {\r\n const ref = useRef<HTMLDivElement>(null);\r\n\r\n const modal = useModal(<>{children}</>, {\r\n ...props,\r\n onClickOutside: () => {\r\n if (props?.onClickOutside) {\r\n props.onClickOutside()\r\n }\r\n },\r\n slotProps: {\r\n layer: {\r\n portal: {\r\n container: ref?.current || undefined\r\n }\r\n }\r\n }\r\n })\r\n\r\n useEffect(() => {\r\n if (open) {\r\n modal.open()\r\n } else {\r\n modal.close()\r\n }\r\n }, [open])\r\n return <Tag ref={ref}></Tag>\r\n}\r\n\r\nconst ActionModal = ({ children, ...props }: ModalProps) => {\r\n return (\r\n <Modal {...props}>\r\n {children}\r\n </Modal>\r\n )\r\n}\r\n\r\nModal.open = (children: ModalProps['children'], props?: Omit<ModalProps, 'children' | \"open\">) => {\r\n const m = Renderar.render(ActionModal as any, {\r\n open: true,\r\n ...props,\r\n children,\r\n onClosed: () => {\r\n m.unrender()\r\n if (props?.onClosed) {\r\n props.onClosed()\r\n }\r\n }\r\n })\r\n\r\n return {\r\n open: () => {\r\n m.updateProps({ open: true })\r\n },\r\n close: () => {\r\n m.updateProps({ open: false })\r\n },\r\n }\r\n};\r\n\r\nModal.close = () => {\r\n Renderar.unrender(ActionModal as any)\r\n}\r\n\r\nexport default Modal;"],"names":[],"mappings":";;;;;;;;;AAUA;;AACG;AAEA;;;;;AAQM;AACG;;AAEC;AACH;AACH;;;;;;;;AASJ;AACA;AACH;AAEA;AAAqB;;AAMrB;AAEA;AACG;;;;;AASG;;;;;;;;;AAWN;AAEA;AACG;AACH;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../../src/Modal/index.tsx"],"sourcesContent":["\"use client\";\nimport { ReactNode, useEffect, useRef } from \"react\";\nimport useModal, { UseModalProps } from \"../useModal\";\nimport { Renderar, Tag } from \"@xanui/core\";\n\nexport type ModalProps = UseModalProps & {\n children: ReactNode;\n open: boolean;\n}\n\nconst Modal = ({ children, open, ...props }: ModalProps) => {\n const ref = useRef<HTMLDivElement>(null);\n\n const modal = useModal(<>{children}</>, {\n ...props,\n onClickOutside: () => {\n if (props?.onClickOutside) {\n props.onClickOutside()\n }\n },\n slotProps: {\n layer: {\n portal: {\n container: ref?.current || undefined\n }\n }\n }\n })\n\n useEffect(() => {\n if (open) {\n modal.open()\n } else {\n modal.close()\n }\n }, [open])\n return <Tag ref={ref}></Tag>\n}\n\nconst ActionModal = ({ children, ...props }: ModalProps) => {\n return (\n <Modal {...props}>\n {children}\n </Modal>\n )\n}\n\nModal.open = (children: ModalProps['children'], props?: Omit<ModalProps, 'children' | \"open\">) => {\n const m = Renderar.render(ActionModal as any, {\n open: true,\n ...props,\n children,\n onClosed: () => {\n m.unrender()\n if (props?.onClosed) {\n props.onClosed()\n }\n }\n })\n\n return {\n open: () => {\n m.updateProps({ open: true })\n },\n close: () => {\n m.updateProps({ open: false })\n },\n }\n};\n\nModal.close = () => {\n Renderar.unrender(ActionModal as any)\n}\n\nexport default Modal;"],"names":[],"mappings":";;;;;;;AAUA;;AACG;AAEA;;;;;AAQM;AACG;;AAEC;AACH;AACH;;;;;;;;AASJ;AACA;AACH;AAEA;AAAqB;;AAMrB;AAEA;AACG;;;;;AASG;;;;;;;;;AAWN;AAEA;AACG;AACH;;"}
1
+ {"version":3,"file":"index.js","sources":["../../src/Modal/index.tsx"],"sourcesContent":["\"use client\";\r\nimport { ReactNode, useEffect, useRef } from \"react\";\r\nimport useModal, { UseModalProps } from \"../useModal\";\r\nimport { Renderar, Tag } from \"@xanui/core\";\r\n\r\nexport type ModalProps = UseModalProps & {\r\n children: ReactNode;\r\n open: boolean;\r\n}\r\n\r\nconst Modal = ({ children, open, ...props }: ModalProps) => {\r\n const ref = useRef<HTMLDivElement>(null);\r\n\r\n const modal = useModal(<>{children}</>, {\r\n ...props,\r\n onClickOutside: () => {\r\n if (props?.onClickOutside) {\r\n props.onClickOutside()\r\n }\r\n },\r\n slotProps: {\r\n layer: {\r\n portal: {\r\n container: ref?.current || undefined\r\n }\r\n }\r\n }\r\n })\r\n\r\n useEffect(() => {\r\n if (open) {\r\n modal.open()\r\n } else {\r\n modal.close()\r\n }\r\n }, [open])\r\n return <Tag ref={ref}></Tag>\r\n}\r\n\r\nconst ActionModal = ({ children, ...props }: ModalProps) => {\r\n return (\r\n <Modal {...props}>\r\n {children}\r\n </Modal>\r\n )\r\n}\r\n\r\nModal.open = (children: ModalProps['children'], props?: Omit<ModalProps, 'children' | \"open\">) => {\r\n const m = Renderar.render(ActionModal as any, {\r\n open: true,\r\n ...props,\r\n children,\r\n onClosed: () => {\r\n m.unrender()\r\n if (props?.onClosed) {\r\n props.onClosed()\r\n }\r\n }\r\n })\r\n\r\n return {\r\n open: () => {\r\n m.updateProps({ open: true })\r\n },\r\n close: () => {\r\n m.updateProps({ open: false })\r\n },\r\n }\r\n};\r\n\r\nModal.close = () => {\r\n Renderar.unrender(ActionModal as any)\r\n}\r\n\r\nexport default Modal;"],"names":[],"mappings":";;;;;;;AAUA;;AACG;AAEA;;;;;AAQM;AACG;;AAEC;AACH;AACH;;;;;;;;AASJ;AACA;AACH;AAEA;AAAqB;;AAMrB;AAEA;AACG;;;;;AASG;;;;;;;;;AAWN;AAEA;AACG;AACH;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"index.cjs","sources":["../../src/NoSSR/index.tsx"],"sourcesContent":["\"use client\";\nimport { useEffect, useState } from \"react\";\n\nconst NoSSR = ({ children }: any) => {\n const [isClient, setIsClient] = useState(false);\n useEffect(() => {\n setIsClient(true);\n }, [])\n return isClient ? children : null\n}\n\nexport default NoSSR"],"names":[],"mappings":";;;;;AAGA;;;;;;AAMA;;"}
1
+ {"version":3,"file":"index.cjs","sources":["../../src/NoSSR/index.tsx"],"sourcesContent":["\"use client\";\r\nimport { useEffect, useState } from \"react\";\r\n\r\nconst NoSSR = ({ children }: any) => {\r\n const [isClient, setIsClient] = useState(false);\r\n useEffect(() => {\r\n setIsClient(true);\r\n }, [])\r\n return isClient ? children : null\r\n}\r\n\r\nexport default NoSSR"],"names":[],"mappings":";;;;;AAGA;;;;;;AAMA;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../../src/NoSSR/index.tsx"],"sourcesContent":["\"use client\";\nimport { useEffect, useState } from \"react\";\n\nconst NoSSR = ({ children }: any) => {\n const [isClient, setIsClient] = useState(false);\n useEffect(() => {\n setIsClient(true);\n }, [])\n return isClient ? children : null\n}\n\nexport default NoSSR"],"names":[],"mappings":";;;AAGA;;;;;;AAMA;;"}
1
+ {"version":3,"file":"index.js","sources":["../../src/NoSSR/index.tsx"],"sourcesContent":["\"use client\";\r\nimport { useEffect, useState } from \"react\";\r\n\r\nconst NoSSR = ({ children }: any) => {\r\n const [isClient, setIsClient] = useState(false);\r\n useEffect(() => {\r\n setIsClient(true);\r\n }, [])\r\n return isClient ? children : null\r\n}\r\n\r\nexport default NoSSR"],"names":[],"mappings":";;;AAGA;;;;;;AAMA;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"index.cjs","sources":["../../src/Option/index.tsx"],"sourcesContent":["\nimport React from 'react'\nimport ListItem, { ListItemProps } from '../ListItem'\n\nexport type OptionProps = ListItemProps & {\n value: string | number;\n}\n\nconst Option = React.forwardRef(({ value, children, ...props }: OptionProps, ref: React.Ref<any>) => {\n return (\n <ListItem {...props} ref={ref}>{children}</ListItem>\n )\n})\n\nexport default Option"],"names":["__rest","_jsx","ListItem"],"mappings":";;;;;;;AAQA,MAAM,MAAM,GAAG,KAAK,CAAC,UAAU,CAAC,CAAC,EAA0C,EAAE,GAAmB,KAAI;QAAnE,EAAE,KAAK,EAAE,QAAQ,EAAA,GAAA,EAAyB,EAApB,KAAK,GAAAA,YAAA,CAAA,EAAA,EAA3B,qBAA6B,CAAF;AACxD,IAAA,QACIC,cAAA,CAACC,KAAQ,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,KAAK,EAAA,EAAE,GAAG,EAAE,GAAG,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAA,CAAY;AAE5D,CAAC;;;;"}
1
+ {"version":3,"file":"index.cjs","sources":["../../src/Option/index.tsx"],"sourcesContent":["\r\nimport React from 'react'\r\nimport ListItem, { ListItemProps } from '../ListItem'\r\n\r\nexport type OptionProps = ListItemProps & {\r\n value: string | number;\r\n}\r\n\r\nconst Option = React.forwardRef(({ value, children, ...props }: OptionProps, ref: React.Ref<any>) => {\r\n return (\r\n <ListItem {...props} ref={ref}>{children}</ListItem>\r\n )\r\n})\r\n\r\nexport default Option"],"names":["__rest","_jsx","ListItem"],"mappings":";;;;;;;AAQA,MAAM,MAAM,GAAG,KAAK,CAAC,UAAU,CAAC,CAAC,EAA0C,EAAE,GAAmB,KAAI;QAAnE,EAAE,KAAK,EAAE,QAAQ,EAAA,GAAA,EAAyB,EAApB,KAAK,GAAAA,YAAA,CAAA,EAAA,EAA3B,qBAA6B,CAAF;AACxD,IAAA,QACIC,cAAA,CAACC,KAAQ,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,KAAK,EAAA,EAAE,GAAG,EAAE,GAAG,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAA,CAAY;AAE5D,CAAC;;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../../src/Option/index.tsx"],"sourcesContent":["\nimport React from 'react'\nimport ListItem, { ListItemProps } from '../ListItem'\n\nexport type OptionProps = ListItemProps & {\n value: string | number;\n}\n\nconst Option = React.forwardRef(({ value, children, ...props }: OptionProps, ref: React.Ref<any>) => {\n return (\n <ListItem {...props} ref={ref}>{children}</ListItem>\n )\n})\n\nexport default Option"],"names":["_jsx"],"mappings":";;;;;AAQA,MAAM,MAAM,GAAG,KAAK,CAAC,UAAU,CAAC,CAAC,EAA0C,EAAE,GAAmB,KAAI;QAAnE,EAAE,KAAK,EAAE,QAAQ,EAAA,GAAA,EAAyB,EAApB,KAAK,GAAA,MAAA,CAAA,EAAA,EAA3B,qBAA6B,CAAF;AACxD,IAAA,QACIA,GAAA,CAAC,QAAQ,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,KAAK,EAAA,EAAE,GAAG,EAAE,GAAG,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAA,CAAY;AAE5D,CAAC;;;;"}
1
+ {"version":3,"file":"index.js","sources":["../../src/Option/index.tsx"],"sourcesContent":["\r\nimport React from 'react'\r\nimport ListItem, { ListItemProps } from '../ListItem'\r\n\r\nexport type OptionProps = ListItemProps & {\r\n value: string | number;\r\n}\r\n\r\nconst Option = React.forwardRef(({ value, children, ...props }: OptionProps, ref: React.Ref<any>) => {\r\n return (\r\n <ListItem {...props} ref={ref}>{children}</ListItem>\r\n )\r\n})\r\n\r\nexport default Option"],"names":["_jsx"],"mappings":";;;;;AAQA,MAAM,MAAM,GAAG,KAAK,CAAC,UAAU,CAAC,CAAC,EAA0C,EAAE,GAAmB,KAAI;QAAnE,EAAE,KAAK,EAAE,QAAQ,EAAA,GAAA,EAAyB,EAApB,KAAK,GAAA,MAAA,CAAA,EAAA,EAA3B,qBAA6B,CAAF;AACxD,IAAA,QACIA,GAAA,CAAC,QAAQ,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,KAAK,EAAA,EAAE,GAAG,EAAE,GAAG,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAA,CAAY;AAE5D,CAAC;;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"index.cjs","sources":["../../src/Paper/index.tsx"],"sourcesContent":["\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface } from '@xanui/core';\n\nexport type PaperProps<T extends TagComponentType = \"div\"> = TagProps<T>\n\nconst Paper = React.forwardRef(<T extends TagComponentType = \"div\">({ children, ...rest }: PaperProps<T>, ref?: React.Ref<any>) => {\n let [props] = useInterface<any>(\"Paper\", rest, {})\n return (\n <Tag\n {...props}\n sxr={{\n shadow: 1,\n radius: 1,\n p: 1.5,\n bgcolor: \"background.secondary\",\n color: \"text.primary\",\n ...props?.sx\n }}\n baseClass='paper'\n ref={ref}\n >{children}</Tag>\n )\n})\n\nexport default Paper\n"],"names":["__rest","useInterface","_jsx","Tag"],"mappings":";;;;;;;AAMA,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAAoC,EAAE,GAAoB,KAAI;AAA9D,IAAA,IAAA,EAAE,QAAQ,EAAA,GAAA,EAA0B,EAArB,IAAI,GAAAA,YAAA,CAAA,EAAA,EAAnB,YAAqB,CAAF;AACnF,IAAA,IAAI,CAAC,KAAK,CAAC,GAAGC,iBAAY,CAAM,OAAO,EAAE,IAAI,EAAE,EAAE,CAAC;IAClD,QACIC,eAACC,QAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACI,KAAK,EAAA,EACT,GAAG,kBACC,MAAM,EAAE,CAAC,EACT,MAAM,EAAE,CAAC,EACT,CAAC,EAAE,GAAG,EACN,OAAO,EAAE,sBAAsB,EAC/B,KAAK,EAAE,cAAc,EAAA,EAClB,KAAK,aAAL,KAAK,KAAA,MAAA,GAAA,MAAA,GAAL,KAAK,CAAE,EAAE,CAAA,EAEhB,SAAS,EAAC,OAAO,EACjB,GAAG,EAAE,GAAG,EAAA,QAAA,EACV,QAAQ,EAAA,CAAA,CAAO;AAEzB,CAAC;;;;"}
1
+ {"version":3,"file":"index.cjs","sources":["../../src/Paper/index.tsx"],"sourcesContent":["\r\nimport React from 'react';\r\nimport { Tag, TagProps, TagComponentType, useInterface } from '@xanui/core';\r\n\r\nexport type PaperProps<T extends TagComponentType = \"div\"> = TagProps<T>\r\n\r\nconst Paper = React.forwardRef(<T extends TagComponentType = \"div\">({ children, ...rest }: PaperProps<T>, ref?: React.Ref<any>) => {\r\n let [props] = useInterface<any>(\"Paper\", rest, {})\r\n return (\r\n <Tag\r\n {...props}\r\n sxr={{\r\n shadow: 1,\r\n radius: 1,\r\n p: 1.5,\r\n bgcolor: \"background.secondary\",\r\n color: \"text.primary\",\r\n ...props?.sx\r\n }}\r\n baseClass='paper'\r\n ref={ref}\r\n >{children}</Tag>\r\n )\r\n})\r\n\r\nexport default Paper\r\n"],"names":["__rest","useInterface","_jsx","Tag"],"mappings":";;;;;;;AAMA,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAAoC,EAAE,GAAoB,KAAI;AAA9D,IAAA,IAAA,EAAE,QAAQ,EAAA,GAAA,EAA0B,EAArB,IAAI,GAAAA,YAAA,CAAA,EAAA,EAAnB,YAAqB,CAAF;AACnF,IAAA,IAAI,CAAC,KAAK,CAAC,GAAGC,iBAAY,CAAM,OAAO,EAAE,IAAI,EAAE,EAAE,CAAC;IAClD,QACIC,eAACC,QAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACI,KAAK,EAAA,EACT,GAAG,kBACC,MAAM,EAAE,CAAC,EACT,MAAM,EAAE,CAAC,EACT,CAAC,EAAE,GAAG,EACN,OAAO,EAAE,sBAAsB,EAC/B,KAAK,EAAE,cAAc,EAAA,EAClB,KAAK,aAAL,KAAK,KAAA,MAAA,GAAA,MAAA,GAAL,KAAK,CAAE,EAAE,CAAA,EAEhB,SAAS,EAAC,OAAO,EACjB,GAAG,EAAE,GAAG,EAAA,QAAA,EACV,QAAQ,EAAA,CAAA,CAAO;AAEzB,CAAC;;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../../src/Paper/index.tsx"],"sourcesContent":["\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface } from '@xanui/core';\n\nexport type PaperProps<T extends TagComponentType = \"div\"> = TagProps<T>\n\nconst Paper = React.forwardRef(<T extends TagComponentType = \"div\">({ children, ...rest }: PaperProps<T>, ref?: React.Ref<any>) => {\n let [props] = useInterface<any>(\"Paper\", rest, {})\n return (\n <Tag\n {...props}\n sxr={{\n shadow: 1,\n radius: 1,\n p: 1.5,\n bgcolor: \"background.secondary\",\n color: \"text.primary\",\n ...props?.sx\n }}\n baseClass='paper'\n ref={ref}\n >{children}</Tag>\n )\n})\n\nexport default Paper\n"],"names":["_jsx"],"mappings":";;;;;AAMA,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAAoC,EAAE,GAAoB,KAAI;AAA9D,IAAA,IAAA,EAAE,QAAQ,EAAA,GAAA,EAA0B,EAArB,IAAI,GAAA,MAAA,CAAA,EAAA,EAAnB,YAAqB,CAAF;AACnF,IAAA,IAAI,CAAC,KAAK,CAAC,GAAG,YAAY,CAAM,OAAO,EAAE,IAAI,EAAE,EAAE,CAAC;IAClD,QACIA,IAAC,GAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACI,KAAK,EAAA,EACT,GAAG,kBACC,MAAM,EAAE,CAAC,EACT,MAAM,EAAE,CAAC,EACT,CAAC,EAAE,GAAG,EACN,OAAO,EAAE,sBAAsB,EAC/B,KAAK,EAAE,cAAc,EAAA,EAClB,KAAK,aAAL,KAAK,KAAA,MAAA,GAAA,MAAA,GAAL,KAAK,CAAE,EAAE,CAAA,EAEhB,SAAS,EAAC,OAAO,EACjB,GAAG,EAAE,GAAG,EAAA,QAAA,EACV,QAAQ,EAAA,CAAA,CAAO;AAEzB,CAAC;;;;"}
1
+ {"version":3,"file":"index.js","sources":["../../src/Paper/index.tsx"],"sourcesContent":["\r\nimport React from 'react';\r\nimport { Tag, TagProps, TagComponentType, useInterface } from '@xanui/core';\r\n\r\nexport type PaperProps<T extends TagComponentType = \"div\"> = TagProps<T>\r\n\r\nconst Paper = React.forwardRef(<T extends TagComponentType = \"div\">({ children, ...rest }: PaperProps<T>, ref?: React.Ref<any>) => {\r\n let [props] = useInterface<any>(\"Paper\", rest, {})\r\n return (\r\n <Tag\r\n {...props}\r\n sxr={{\r\n shadow: 1,\r\n radius: 1,\r\n p: 1.5,\r\n bgcolor: \"background.secondary\",\r\n color: \"text.primary\",\r\n ...props?.sx\r\n }}\r\n baseClass='paper'\r\n ref={ref}\r\n >{children}</Tag>\r\n )\r\n})\r\n\r\nexport default Paper\r\n"],"names":["_jsx"],"mappings":";;;;;AAMA,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAAoC,EAAE,GAAoB,KAAI;AAA9D,IAAA,IAAA,EAAE,QAAQ,EAAA,GAAA,EAA0B,EAArB,IAAI,GAAA,MAAA,CAAA,EAAA,EAAnB,YAAqB,CAAF;AACnF,IAAA,IAAI,CAAC,KAAK,CAAC,GAAG,YAAY,CAAM,OAAO,EAAE,IAAI,EAAE,EAAE,CAAC;IAClD,QACIA,IAAC,GAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACI,KAAK,EAAA,EACT,GAAG,kBACC,MAAM,EAAE,CAAC,EACT,MAAM,EAAE,CAAC,EACT,CAAC,EAAE,GAAG,EACN,OAAO,EAAE,sBAAsB,EAC/B,KAAK,EAAE,cAAc,EAAA,EAClB,KAAK,aAAL,KAAK,KAAA,MAAA,GAAA,MAAA,GAAL,KAAK,CAAE,EAAE,CAAA,EAEhB,SAAS,EAAC,OAAO,EACjB,GAAG,EAAE,GAAG,EAAA,QAAA,EACV,QAAQ,EAAA,CAAA,CAAO;AAEzB,CAAC;;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"index.cjs","sources":["../../src/Portal/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { useEffect, useMemo } from 'react'\nimport ReactDOM from 'react-dom';\nimport { useTheme, ThemeProvider } from '@xanui/core';\nexport type PortalProps = {\n children?: React.ReactNode;\n appendTo?: HTMLElement;\n container?: HTMLElement;\n}\n\nconst Portal = ({ children, appendTo, container }: PortalProps) => {\n const theme = useTheme()\n appendTo = appendTo || document.body\n\n const c = useMemo(() => {\n let _con: HTMLElement = container || document.createElement(\"div\");\n appendTo.appendChild(_con);\n _con.className = \"xui-portal\"\n return _con\n }, [container])\n\n useEffect(() => {\n return () => {\n (appendTo as any).removeChild(c);\n }\n }, [])\n\n return ReactDOM.createPortal(\n <ThemeProvider theme={theme.name}>\n {children}\n </ThemeProvider>,\n c,\n );\n}\n\nexport default Portal"],"names":[],"mappings":";;;;;;;;AAUA;AACI;AACA;AAEA;;AAEI;AACA;AACA;AACJ;;AAGI;AACK;AACL;;AAGJ;AAMJ;;"}
1
+ {"version":3,"file":"index.cjs","sources":["../../src/Portal/index.tsx"],"sourcesContent":["\"use client\";\r\nimport React, { useEffect, useMemo } from 'react'\r\nimport ReactDOM from 'react-dom';\r\nimport { useTheme, ThemeProvider } from '@xanui/core';\r\nexport type PortalProps = {\r\n children?: React.ReactNode;\r\n appendTo?: HTMLElement;\r\n container?: HTMLElement;\r\n}\r\n\r\nconst Portal = ({ children, appendTo, container }: PortalProps) => {\r\n const theme = useTheme()\r\n appendTo = appendTo || document.body\r\n\r\n const c = useMemo(() => {\r\n let _con: HTMLElement = container || document.createElement(\"div\");\r\n appendTo.appendChild(_con);\r\n _con.className = \"xui-portal\"\r\n return _con\r\n }, [container])\r\n\r\n useEffect(() => {\r\n return () => {\r\n (appendTo as any).removeChild(c);\r\n }\r\n }, [])\r\n\r\n return ReactDOM.createPortal(\r\n <ThemeProvider theme={theme.name}>\r\n {children}\r\n </ThemeProvider>,\r\n c,\r\n );\r\n}\r\n\r\nexport default Portal"],"names":[],"mappings":";;;;;;;;AAUA;AACI;AACA;AAEA;;AAEI;AACA;AACA;AACJ;;AAGI;AACK;AACL;;AAGJ;AAMJ;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../../src/Portal/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { useEffect, useMemo } from 'react'\nimport ReactDOM from 'react-dom';\nimport { useTheme, ThemeProvider } from '@xanui/core';\nexport type PortalProps = {\n children?: React.ReactNode;\n appendTo?: HTMLElement;\n container?: HTMLElement;\n}\n\nconst Portal = ({ children, appendTo, container }: PortalProps) => {\n const theme = useTheme()\n appendTo = appendTo || document.body\n\n const c = useMemo(() => {\n let _con: HTMLElement = container || document.createElement(\"div\");\n appendTo.appendChild(_con);\n _con.className = \"xui-portal\"\n return _con\n }, [container])\n\n useEffect(() => {\n return () => {\n (appendTo as any).removeChild(c);\n }\n }, [])\n\n return ReactDOM.createPortal(\n <ThemeProvider theme={theme.name}>\n {children}\n </ThemeProvider>,\n c,\n );\n}\n\nexport default Portal"],"names":[],"mappings":";;;;;;AAUA;AACI;AACA;AAEA;;AAEI;AACA;AACA;AACJ;;AAGI;AACK;AACL;;AAGJ;AAMJ;;"}
1
+ {"version":3,"file":"index.js","sources":["../../src/Portal/index.tsx"],"sourcesContent":["\"use client\";\r\nimport React, { useEffect, useMemo } from 'react'\r\nimport ReactDOM from 'react-dom';\r\nimport { useTheme, ThemeProvider } from '@xanui/core';\r\nexport type PortalProps = {\r\n children?: React.ReactNode;\r\n appendTo?: HTMLElement;\r\n container?: HTMLElement;\r\n}\r\n\r\nconst Portal = ({ children, appendTo, container }: PortalProps) => {\r\n const theme = useTheme()\r\n appendTo = appendTo || document.body\r\n\r\n const c = useMemo(() => {\r\n let _con: HTMLElement = container || document.createElement(\"div\");\r\n appendTo.appendChild(_con);\r\n _con.className = \"xui-portal\"\r\n return _con\r\n }, [container])\r\n\r\n useEffect(() => {\r\n return () => {\r\n (appendTo as any).removeChild(c);\r\n }\r\n }, [])\r\n\r\n return ReactDOM.createPortal(\r\n <ThemeProvider theme={theme.name}>\r\n {children}\r\n </ThemeProvider>,\r\n c,\r\n );\r\n}\r\n\r\nexport default Portal"],"names":[],"mappings":";;;;;;AAUA;AACI;AACA;AAEA;;AAEI;AACA;AACA;AACJ;;AAGI;AACK;AACL;;AAGJ;AAMJ;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"index.cjs","sources":["../../src/Radio/index.tsx"],"sourcesContent":["\nimport React from 'react';\nimport { useInterface } from '@xanui/core';\nimport CheckIcon from '@xanui/icons/RadioButtonChecked'\nimport UnCheckIcon from '@xanui/icons/RadioButtonUnchecked'\nimport Checkbox, { CheckboxProps } from '../Checkbox';\n\nexport type RadioProps = CheckboxProps\nconst Radio = React.forwardRef((props: RadioProps, ref?: React.Ref<any>) => {\n let [rest] = useInterface<any>(\"Radio\", props, {})\n return <Checkbox\n checkIcon={<CheckIcon />}\n uncheckIcon={<UnCheckIcon />}\n {...rest}\n type=\"radio\"\n ref={ref}\n classNames={['radio', ...(rest?.classNames || [])]}\n />\n})\n\nexport default Radio\n"],"names":["useInterface","_jsx","Checkbox"],"mappings":";;;;;;;;;AAQA,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAAC,CAAC,KAAiB,EAAE,GAAoB,KAAI;AACvE,IAAA,IAAI,CAAC,IAAI,CAAC,GAAGA,iBAAY,CAAM,OAAO,EAAE,KAAK,EAAE,EAAE,CAAC;IAClD,OAAOC,cAAA,CAACC,KAAQ,EAAA,MAAA,CAAA,MAAA,CAAA,EACZ,SAAS,EAAED,cAAA,CAAC,SAAS,KAAG,EACxB,WAAW,EAAEA,cAAA,CAAC,WAAW,KAAG,EAAA,EACxB,IAAI,IACR,IAAI,EAAC,OAAO,EACZ,GAAG,EAAE,GAAG,EACR,UAAU,EAAE,CAAC,OAAO,EAAE,IAAI,CAAA,IAAI,aAAJ,IAAI,KAAA,MAAA,GAAA,MAAA,GAAJ,IAAI,CAAE,UAAU,KAAI,EAAE,CAAC,CAAC,EAAA,CAAA,CACpD;AACN,CAAC;;;;"}
1
+ {"version":3,"file":"index.cjs","sources":["../../src/Radio/index.tsx"],"sourcesContent":["\r\nimport React from 'react';\r\nimport { useInterface } from '@xanui/core';\r\nimport CheckIcon from '@xanui/icons/RadioButtonChecked'\r\nimport UnCheckIcon from '@xanui/icons/RadioButtonUnchecked'\r\nimport Checkbox, { CheckboxProps } from '../Checkbox';\r\n\r\nexport type RadioProps = CheckboxProps\r\nconst Radio = React.forwardRef((props: RadioProps, ref?: React.Ref<any>) => {\r\n let [rest] = useInterface<any>(\"Radio\", props, {})\r\n return <Checkbox\r\n checkIcon={<CheckIcon />}\r\n uncheckIcon={<UnCheckIcon />}\r\n {...rest}\r\n type=\"radio\"\r\n ref={ref}\r\n classNames={['radio', ...(rest?.classNames || [])]}\r\n />\r\n})\r\n\r\nexport default Radio\r\n"],"names":["useInterface","_jsx","Checkbox"],"mappings":";;;;;;;;;AAQA,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAAC,CAAC,KAAiB,EAAE,GAAoB,KAAI;AACvE,IAAA,IAAI,CAAC,IAAI,CAAC,GAAGA,iBAAY,CAAM,OAAO,EAAE,KAAK,EAAE,EAAE,CAAC;IAClD,OAAOC,cAAA,CAACC,KAAQ,EAAA,MAAA,CAAA,MAAA,CAAA,EACZ,SAAS,EAAED,cAAA,CAAC,SAAS,KAAG,EACxB,WAAW,EAAEA,cAAA,CAAC,WAAW,KAAG,EAAA,EACxB,IAAI,IACR,IAAI,EAAC,OAAO,EACZ,GAAG,EAAE,GAAG,EACR,UAAU,EAAE,CAAC,OAAO,EAAE,IAAI,CAAA,IAAI,aAAJ,IAAI,KAAA,MAAA,GAAA,MAAA,GAAJ,IAAI,CAAE,UAAU,KAAI,EAAE,CAAC,CAAC,EAAA,CAAA,CACpD;AACN,CAAC;;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../../src/Radio/index.tsx"],"sourcesContent":["\nimport React from 'react';\nimport { useInterface } from '@xanui/core';\nimport CheckIcon from '@xanui/icons/RadioButtonChecked'\nimport UnCheckIcon from '@xanui/icons/RadioButtonUnchecked'\nimport Checkbox, { CheckboxProps } from '../Checkbox';\n\nexport type RadioProps = CheckboxProps\nconst Radio = React.forwardRef((props: RadioProps, ref?: React.Ref<any>) => {\n let [rest] = useInterface<any>(\"Radio\", props, {})\n return <Checkbox\n checkIcon={<CheckIcon />}\n uncheckIcon={<UnCheckIcon />}\n {...rest}\n type=\"radio\"\n ref={ref}\n classNames={['radio', ...(rest?.classNames || [])]}\n />\n})\n\nexport default Radio\n"],"names":["_jsx"],"mappings":";;;;;;;AAQA,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAAC,CAAC,KAAiB,EAAE,GAAoB,KAAI;AACvE,IAAA,IAAI,CAAC,IAAI,CAAC,GAAG,YAAY,CAAM,OAAO,EAAE,KAAK,EAAE,EAAE,CAAC;IAClD,OAAOA,GAAA,CAAC,QAAQ,EAAA,MAAA,CAAA,MAAA,CAAA,EACZ,SAAS,EAAEA,GAAA,CAAC,SAAS,KAAG,EACxB,WAAW,EAAEA,GAAA,CAAC,WAAW,KAAG,EAAA,EACxB,IAAI,IACR,IAAI,EAAC,OAAO,EACZ,GAAG,EAAE,GAAG,EACR,UAAU,EAAE,CAAC,OAAO,EAAE,IAAI,CAAA,IAAI,aAAJ,IAAI,KAAA,MAAA,GAAA,MAAA,GAAJ,IAAI,CAAE,UAAU,KAAI,EAAE,CAAC,CAAC,EAAA,CAAA,CACpD;AACN,CAAC;;;;"}
1
+ {"version":3,"file":"index.js","sources":["../../src/Radio/index.tsx"],"sourcesContent":["\r\nimport React from 'react';\r\nimport { useInterface } from '@xanui/core';\r\nimport CheckIcon from '@xanui/icons/RadioButtonChecked'\r\nimport UnCheckIcon from '@xanui/icons/RadioButtonUnchecked'\r\nimport Checkbox, { CheckboxProps } from '../Checkbox';\r\n\r\nexport type RadioProps = CheckboxProps\r\nconst Radio = React.forwardRef((props: RadioProps, ref?: React.Ref<any>) => {\r\n let [rest] = useInterface<any>(\"Radio\", props, {})\r\n return <Checkbox\r\n checkIcon={<CheckIcon />}\r\n uncheckIcon={<UnCheckIcon />}\r\n {...rest}\r\n type=\"radio\"\r\n ref={ref}\r\n classNames={['radio', ...(rest?.classNames || [])]}\r\n />\r\n})\r\n\r\nexport default Radio\r\n"],"names":["_jsx"],"mappings":";;;;;;;AAQA,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAAC,CAAC,KAAiB,EAAE,GAAoB,KAAI;AACvE,IAAA,IAAI,CAAC,IAAI,CAAC,GAAG,YAAY,CAAM,OAAO,EAAE,KAAK,EAAE,EAAE,CAAC;IAClD,OAAOA,GAAA,CAAC,QAAQ,EAAA,MAAA,CAAA,MAAA,CAAA,EACZ,SAAS,EAAEA,GAAA,CAAC,SAAS,KAAG,EACxB,WAAW,EAAEA,GAAA,CAAC,WAAW,KAAG,EAAA,EACxB,IAAI,IACR,IAAI,EAAC,OAAO,EACZ,GAAG,EAAE,GAAG,EACR,UAAU,EAAE,CAAC,OAAO,EAAE,IAAI,CAAA,IAAI,aAAJ,IAAI,KAAA,MAAA,GAAA,MAAA,GAAJ,IAAI,CAAE,UAAU,KAAI,EAAE,CAAC,CAAC,EAAA,CAAA,CACpD;AACN,CAAC;;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"index.cjs","sources":["../../src/Scrollbar/index.tsx"],"sourcesContent":["\"use client\";\n\nimport { Tag, TagComponentType, TagProps, useInterface } from '@xanui/core';\nimport React, { ReactNode, UIEvent, useImperativeHandle, useRef } from 'react'\n\nexport type ScrollbarProps<T extends TagComponentType = \"div\"> = TagProps<T> & {\n thumbSize?: number;\n thumbColor?: TagProps['color'];\n trackColor?: TagProps['color'];\n children?: ReactNode;\n onScrollEnd?: (e: UIEvent<HTMLDivElement>) => void;\n}\n\nexport type ScrollbarHandle = {\n scrollTo: (pos: number) => void;\n scrollToBottom: () => void;\n scrollToTop: () => void;\n};\n\nconst Scrollbar = React.forwardRef(<T extends TagComponentType = \"div\">({ children, thumbSize, thumbColor, trackColor, ...rest }: ScrollbarProps<T>, ref: React.Ref<ScrollbarHandle>) => {\n let [{ onScroll, onScrollEnd, ...props }] = useInterface<any>(\"Scrollbar\", rest, {})\n const innerRef = useRef<HTMLDivElement>(null);\n\n useImperativeHandle(ref, () => ({\n scrollTo(pos: number) {\n innerRef.current?.scrollTo({\n top: pos,\n behavior: \"smooth\"\n });\n },\n scrollToBottom() {\n if (!innerRef.current) return;\n const ele = innerRef.current;\n ele.scrollTo({\n top: ele.scrollHeight,\n behavior: \"smooth\"\n });\n },\n scrollToTop() {\n innerRef.current?.scrollTo({\n top: 0,\n behavior: \"smooth\"\n });\n }\n }));\n\n if (onScroll || onScrollEnd) {\n props.onScroll = (e: UIEvent<HTMLDivElement>) => {\n if (onScrollEnd) {\n const ele: any = e.target\n const scrollTop = ele.scrollTop\n const scrollHeight = ele.scrollHeight\n const clientHeight = ele.clientHeight\n const isScrollDown = scrollHeight - scrollTop <= clientHeight + 1\n isScrollDown && onScrollEnd(e)\n }\n onScroll && onScroll(e)\n }\n }\n\n let sxr: any = {}\n\n if (thumbSize) {\n sxr['&::-webkit-scrollbar'] = {\n width: thumbSize,\n height: thumbSize,\n }\n }\n if (thumbColor) {\n sxr['&::-webkit-scrollbar-thumb'] = {\n backgroundColor: thumbColor,\n borderRadius: \"6px\",\n opacity: 0.6,\n }\n sxr['&::-webkit-scrollbar-thumb:hover'] = {\n backgroundColor: thumbColor,\n opacity: 0.0,\n }\n }\n\n if (trackColor) {\n sxr['&::-webkit-scrollbar-track'] = {\n backgroundColor: trackColor,\n borderRadius: \"6px\",\n }\n }\n\n return (\n <Tag\n {...props}\n ref={innerRef}\n baseClass='scrollbar'\n sxr={{\n height: \"100%\",\n width: \"100%\",\n overflow: \"auto\",\n ...sxr,\n }}\n >\n {children}\n </Tag>\n )\n})\n\nexport default Scrollbar "],"names":[],"mappings":";;;;;;;;AAmBA;AAAwE;;AAEpE;AAEA;AACI;;AACI;AACI;AACA;AACH;;;;;AAID;;;AAGI;AACH;;;;AAGD;AACI;AACA;AACH;;AAER;AAED;AACI;;AAEQ;AACA;AACA;AACA;;AAEA;;AAEJ;AACJ;;;;;AAOI;AACA;;;;;AAKA;AACA;AACA;;;AAGA;AACA;;;;;AAMA;AACA;;;AAIR;AAeJ;;"}
1
+ {"version":3,"file":"index.cjs","sources":["../../src/Scrollbar/index.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { Tag, TagComponentType, TagProps, useInterface } from '@xanui/core';\r\nimport React, { ReactNode, UIEvent, useImperativeHandle, useRef } from 'react'\r\n\r\nexport type ScrollbarProps<T extends TagComponentType = \"div\"> = TagProps<T> & {\r\n thumbSize?: number;\r\n thumbColor?: TagProps['color'];\r\n trackColor?: TagProps['color'];\r\n children?: ReactNode;\r\n onScrollEnd?: (e: UIEvent<HTMLDivElement>) => void;\r\n}\r\n\r\nexport type ScrollbarHandle = {\r\n scrollTo: (pos: number) => void;\r\n scrollToBottom: () => void;\r\n scrollToTop: () => void;\r\n};\r\n\r\nconst Scrollbar = React.forwardRef(<T extends TagComponentType = \"div\">({ children, thumbSize, thumbColor, trackColor, ...rest }: ScrollbarProps<T>, ref: React.Ref<ScrollbarHandle>) => {\r\n let [{ onScroll, onScrollEnd, ...props }] = useInterface<any>(\"Scrollbar\", rest, {})\r\n const innerRef = useRef<HTMLDivElement>(null);\r\n\r\n useImperativeHandle(ref, () => ({\r\n scrollTo(pos: number) {\r\n innerRef.current?.scrollTo({\r\n top: pos,\r\n behavior: \"smooth\"\r\n });\r\n },\r\n scrollToBottom() {\r\n if (!innerRef.current) return;\r\n const ele = innerRef.current;\r\n ele.scrollTo({\r\n top: ele.scrollHeight,\r\n behavior: \"smooth\"\r\n });\r\n },\r\n scrollToTop() {\r\n innerRef.current?.scrollTo({\r\n top: 0,\r\n behavior: \"smooth\"\r\n });\r\n }\r\n }));\r\n\r\n if (onScroll || onScrollEnd) {\r\n props.onScroll = (e: UIEvent<HTMLDivElement>) => {\r\n if (onScrollEnd) {\r\n const ele: any = e.target\r\n const scrollTop = ele.scrollTop\r\n const scrollHeight = ele.scrollHeight\r\n const clientHeight = ele.clientHeight\r\n const isScrollDown = scrollHeight - scrollTop <= clientHeight + 1\r\n isScrollDown && onScrollEnd(e)\r\n }\r\n onScroll && onScroll(e)\r\n }\r\n }\r\n\r\n let sxr: any = {}\r\n\r\n if (thumbSize) {\r\n sxr['&::-webkit-scrollbar'] = {\r\n width: thumbSize,\r\n height: thumbSize,\r\n }\r\n }\r\n if (thumbColor) {\r\n sxr['&::-webkit-scrollbar-thumb'] = {\r\n backgroundColor: thumbColor,\r\n borderRadius: \"6px\",\r\n opacity: 0.6,\r\n }\r\n sxr['&::-webkit-scrollbar-thumb:hover'] = {\r\n backgroundColor: thumbColor,\r\n opacity: 0.0,\r\n }\r\n }\r\n\r\n if (trackColor) {\r\n sxr['&::-webkit-scrollbar-track'] = {\r\n backgroundColor: trackColor,\r\n borderRadius: \"6px\",\r\n }\r\n }\r\n\r\n return (\r\n <Tag\r\n {...props}\r\n ref={innerRef}\r\n baseClass='scrollbar'\r\n sxr={{\r\n height: \"100%\",\r\n width: \"100%\",\r\n overflow: \"auto\",\r\n ...sxr,\r\n }}\r\n >\r\n {children}\r\n </Tag>\r\n )\r\n})\r\n\r\nexport default Scrollbar "],"names":[],"mappings":";;;;;;;;AAmBA;AAAwE;;AAEpE;AAEA;AACI;;AACI;AACI;AACA;AACH;;;;;AAID;;;AAGI;AACH;;;;AAGD;AACI;AACA;AACH;;AAER;AAED;AACI;;AAEQ;AACA;AACA;AACA;;AAEA;;AAEJ;AACJ;;;;;AAOI;AACA;;;;;AAKA;AACA;AACA;;;AAGA;AACA;;;;;AAMA;AACA;;;AAIR;AAeJ;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../../src/Scrollbar/index.tsx"],"sourcesContent":["\"use client\";\n\nimport { Tag, TagComponentType, TagProps, useInterface } from '@xanui/core';\nimport React, { ReactNode, UIEvent, useImperativeHandle, useRef } from 'react'\n\nexport type ScrollbarProps<T extends TagComponentType = \"div\"> = TagProps<T> & {\n thumbSize?: number;\n thumbColor?: TagProps['color'];\n trackColor?: TagProps['color'];\n children?: ReactNode;\n onScrollEnd?: (e: UIEvent<HTMLDivElement>) => void;\n}\n\nexport type ScrollbarHandle = {\n scrollTo: (pos: number) => void;\n scrollToBottom: () => void;\n scrollToTop: () => void;\n};\n\nconst Scrollbar = React.forwardRef(<T extends TagComponentType = \"div\">({ children, thumbSize, thumbColor, trackColor, ...rest }: ScrollbarProps<T>, ref: React.Ref<ScrollbarHandle>) => {\n let [{ onScroll, onScrollEnd, ...props }] = useInterface<any>(\"Scrollbar\", rest, {})\n const innerRef = useRef<HTMLDivElement>(null);\n\n useImperativeHandle(ref, () => ({\n scrollTo(pos: number) {\n innerRef.current?.scrollTo({\n top: pos,\n behavior: \"smooth\"\n });\n },\n scrollToBottom() {\n if (!innerRef.current) return;\n const ele = innerRef.current;\n ele.scrollTo({\n top: ele.scrollHeight,\n behavior: \"smooth\"\n });\n },\n scrollToTop() {\n innerRef.current?.scrollTo({\n top: 0,\n behavior: \"smooth\"\n });\n }\n }));\n\n if (onScroll || onScrollEnd) {\n props.onScroll = (e: UIEvent<HTMLDivElement>) => {\n if (onScrollEnd) {\n const ele: any = e.target\n const scrollTop = ele.scrollTop\n const scrollHeight = ele.scrollHeight\n const clientHeight = ele.clientHeight\n const isScrollDown = scrollHeight - scrollTop <= clientHeight + 1\n isScrollDown && onScrollEnd(e)\n }\n onScroll && onScroll(e)\n }\n }\n\n let sxr: any = {}\n\n if (thumbSize) {\n sxr['&::-webkit-scrollbar'] = {\n width: thumbSize,\n height: thumbSize,\n }\n }\n if (thumbColor) {\n sxr['&::-webkit-scrollbar-thumb'] = {\n backgroundColor: thumbColor,\n borderRadius: \"6px\",\n opacity: 0.6,\n }\n sxr['&::-webkit-scrollbar-thumb:hover'] = {\n backgroundColor: thumbColor,\n opacity: 0.0,\n }\n }\n\n if (trackColor) {\n sxr['&::-webkit-scrollbar-track'] = {\n backgroundColor: trackColor,\n borderRadius: \"6px\",\n }\n }\n\n return (\n <Tag\n {...props}\n ref={innerRef}\n baseClass='scrollbar'\n sxr={{\n height: \"100%\",\n width: \"100%\",\n overflow: \"auto\",\n ...sxr,\n }}\n >\n {children}\n </Tag>\n )\n})\n\nexport default Scrollbar "],"names":[],"mappings":";;;;;;AAmBA;AAAwE;;AAEpE;AAEA;AACI;;AACI;AACI;AACA;AACH;;;;;AAID;;;AAGI;AACH;;;;AAGD;AACI;AACA;AACH;;AAER;AAED;AACI;;AAEQ;AACA;AACA;AACA;;AAEA;;AAEJ;AACJ;;;;;AAOI;AACA;;;;;AAKA;AACA;AACA;;;AAGA;AACA;;;;;AAMA;AACA;;;AAIR;AAeJ;;"}
1
+ {"version":3,"file":"index.js","sources":["../../src/Scrollbar/index.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { Tag, TagComponentType, TagProps, useInterface } from '@xanui/core';\r\nimport React, { ReactNode, UIEvent, useImperativeHandle, useRef } from 'react'\r\n\r\nexport type ScrollbarProps<T extends TagComponentType = \"div\"> = TagProps<T> & {\r\n thumbSize?: number;\r\n thumbColor?: TagProps['color'];\r\n trackColor?: TagProps['color'];\r\n children?: ReactNode;\r\n onScrollEnd?: (e: UIEvent<HTMLDivElement>) => void;\r\n}\r\n\r\nexport type ScrollbarHandle = {\r\n scrollTo: (pos: number) => void;\r\n scrollToBottom: () => void;\r\n scrollToTop: () => void;\r\n};\r\n\r\nconst Scrollbar = React.forwardRef(<T extends TagComponentType = \"div\">({ children, thumbSize, thumbColor, trackColor, ...rest }: ScrollbarProps<T>, ref: React.Ref<ScrollbarHandle>) => {\r\n let [{ onScroll, onScrollEnd, ...props }] = useInterface<any>(\"Scrollbar\", rest, {})\r\n const innerRef = useRef<HTMLDivElement>(null);\r\n\r\n useImperativeHandle(ref, () => ({\r\n scrollTo(pos: number) {\r\n innerRef.current?.scrollTo({\r\n top: pos,\r\n behavior: \"smooth\"\r\n });\r\n },\r\n scrollToBottom() {\r\n if (!innerRef.current) return;\r\n const ele = innerRef.current;\r\n ele.scrollTo({\r\n top: ele.scrollHeight,\r\n behavior: \"smooth\"\r\n });\r\n },\r\n scrollToTop() {\r\n innerRef.current?.scrollTo({\r\n top: 0,\r\n behavior: \"smooth\"\r\n });\r\n }\r\n }));\r\n\r\n if (onScroll || onScrollEnd) {\r\n props.onScroll = (e: UIEvent<HTMLDivElement>) => {\r\n if (onScrollEnd) {\r\n const ele: any = e.target\r\n const scrollTop = ele.scrollTop\r\n const scrollHeight = ele.scrollHeight\r\n const clientHeight = ele.clientHeight\r\n const isScrollDown = scrollHeight - scrollTop <= clientHeight + 1\r\n isScrollDown && onScrollEnd(e)\r\n }\r\n onScroll && onScroll(e)\r\n }\r\n }\r\n\r\n let sxr: any = {}\r\n\r\n if (thumbSize) {\r\n sxr['&::-webkit-scrollbar'] = {\r\n width: thumbSize,\r\n height: thumbSize,\r\n }\r\n }\r\n if (thumbColor) {\r\n sxr['&::-webkit-scrollbar-thumb'] = {\r\n backgroundColor: thumbColor,\r\n borderRadius: \"6px\",\r\n opacity: 0.6,\r\n }\r\n sxr['&::-webkit-scrollbar-thumb:hover'] = {\r\n backgroundColor: thumbColor,\r\n opacity: 0.0,\r\n }\r\n }\r\n\r\n if (trackColor) {\r\n sxr['&::-webkit-scrollbar-track'] = {\r\n backgroundColor: trackColor,\r\n borderRadius: \"6px\",\r\n }\r\n }\r\n\r\n return (\r\n <Tag\r\n {...props}\r\n ref={innerRef}\r\n baseClass='scrollbar'\r\n sxr={{\r\n height: \"100%\",\r\n width: \"100%\",\r\n overflow: \"auto\",\r\n ...sxr,\r\n }}\r\n >\r\n {children}\r\n </Tag>\r\n )\r\n})\r\n\r\nexport default Scrollbar "],"names":[],"mappings":";;;;;;AAmBA;AAAwE;;AAEpE;AAEA;AACI;;AACI;AACI;AACA;AACH;;;;;AAID;;;AAGI;AACH;;;;AAGD;AACI;AACA;AACH;;AAER;AAED;AACI;;AAEQ;AACA;AACA;AACA;;AAEA;;AAEJ;AACJ;;;;;AAOI;AACA;;;;;AAKA;AACA;AACA;;;AAGA;AACA;;;;;AAMA;AACA;;;AAIR;AAeJ;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"index.cjs","sources":["../../src/Select/index.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { ReactElement, useMemo, cloneElement, useState, Children, useRef } from 'react'\nimport Input, { InputProps } from '../Input'\nimport List, { ListProps } from '../List'\nimport Menu, { MenuProps } from '../Menu'\nimport Stack from '../Stack'\nimport { OptionProps } from '../Option'\nimport DownIcon from '@xanui/icons/KeyboardArrowDown';\nimport UpIcon from '@xanui/icons/KeyboardArrowUp';\nimport { useInterface, useMergeRefs } from '@xanui/core'\n\n\nexport type SelectProps = Omit<InputProps, \"onChange\" | \"value\" | \"children\" | \"slotProps\"> & {\n value?: string | number;\n onChange?: (value: string | number) => void;\n children: ReactElement<OptionProps> | ReactElement<OptionProps>[];\n\n refs?: {\n input?: React.Ref<any>;\n menu?: React.Ref<any>;\n list?: React.Ref<any>;\n };\n slotProps?: {\n menu?: Omit<MenuProps, 'children' | 'target'>;\n input?: Omit<InputProps, \"onChange\" | \"value\">;\n list?: Omit<ListProps, \"children\">\n }\n}\n\nconst Select = React.forwardRef(({ onChange, value, children, error, helperText, name, refs, ...props }: SelectProps, ref: React.Ref<any>) => {\n let [{ slotProps, color, variant, ...inputProps }] = useInterface<any>(\"Select\", props, {})\n color ??= \"brand\"\n variant ??= \"fill\"\n const [target, setTarget] = useState<any>()\n const conRef = useRef(null)\n const { childs, selectedProps } = useMemo(() => {\n let sProps: any = {}\n const c = Children.map(children, (child: any) => {\n let selected = child.props.value === value\n if (selected) sProps = child.props\n return cloneElement(child, {\n value: undefined,\n selected,\n onClick: () => {\n setTarget(null)\n onChange && onChange(child.props.value)\n }\n })\n })\n return {\n childs: c,\n selectedProps: sProps as OptionProps\n }\n }, [children, value])\n\n const mergeRefs = useMergeRefs(ref, conRef)\n const toggleMenu = () => setTarget(target ? null : conRef.current)\n\n return (\n <>\n <Input\n ref={mergeRefs}\n color={color}\n variant={variant === \"soft\" ? \"fill\" : variant}\n endIcon={<Stack flexDirection=\"row\" component=\"span\" > {(target ? <UpIcon /> : <DownIcon />)}</Stack>}\n readOnly\n value={typeof selectedProps.children === 'string' ? selectedProps.children : value}\n cursor=\"pointer\"\n userSelect=\"none\"\n startIcon={selectedProps.startIcon}\n focused={!!target}\n error={error}\n helperText={helperText}\n name={name}\n {...slotProps?.input}\n {...inputProps}\n refs={{\n input: refs?.input,\n ...slotProps?.input?.refs\n }}\n slotProps={{\n rootContainer: {\n cursor: \"pointer\",\n userSelect: \"none\",\n ...(slotProps?.input?.slotProps?.container || {}),\n onClick: () => {\n if (!target) {\n toggleMenu()\n }\n },\n }\n }}\n />\n <Menu\n ref={refs?.menu}\n target={target}\n placement=\"bottom-left\"\n {...slotProps?.menu}\n slotProps={{\n ...slotProps?.menu?.slotProps,\n content: {\n mt: .5,\n ...slotProps?.menu?.content,\n width: conRef && (conRef?.current as any)?.clientWidth,\n }\n }}\n onClickOutside={(e) => {\n if ((conRef.current as any).contains(e.target)) return;\n toggleMenu()\n }}\n >\n <List\n ref={refs?.list}\n {...slotProps?.list}\n color={color}\n variant={variant === \"outline\" ? \"fill\" : variant}\n >\n {childs}\n </List>\n </Menu>\n </>\n )\n})\n\nexport default Select"],"names":[],"mappings":";;;;;;;;;;;;;;AA8BA;;AAAiC;;;;;AAK7B;;;;;AAKQ;AAAc;;AAEV;;;;;;AAMH;AACL;;AAEI;AACA;;AAER;;AAGA;AAEA;AAuBgB;;AAMY;;AAER;AAEP;;;AAiBG;;AAcpB;;"}
1
+ {"version":3,"file":"index.cjs","sources":["../../src/Select/index.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport React, { ReactElement, useMemo, cloneElement, useState, Children, useRef } from 'react'\r\nimport Input, { InputProps } from '../Input'\r\nimport List, { ListProps } from '../List'\r\nimport Menu, { MenuProps } from '../Menu'\r\nimport Stack from '../Stack'\r\nimport { OptionProps } from '../Option'\r\nimport DownIcon from '@xanui/icons/KeyboardArrowDown';\r\nimport UpIcon from '@xanui/icons/KeyboardArrowUp';\r\nimport { useInterface, useMergeRefs } from '@xanui/core'\r\n\r\n\r\nexport type SelectProps = Omit<InputProps, \"onChange\" | \"value\" | \"children\" | \"slotProps\"> & {\r\n value?: string | number;\r\n onChange?: (value: string | number) => void;\r\n children: ReactElement<OptionProps> | ReactElement<OptionProps>[];\r\n\r\n refs?: {\r\n input?: React.Ref<any>;\r\n menu?: React.Ref<any>;\r\n list?: React.Ref<any>;\r\n };\r\n slotProps?: {\r\n menu?: Omit<MenuProps, 'children' | 'target'>;\r\n input?: Omit<InputProps, \"onChange\" | \"value\">;\r\n list?: Omit<ListProps, \"children\">\r\n }\r\n}\r\n\r\nconst Select = React.forwardRef(({ onChange, value, children, error, helperText, name, refs, ...props }: SelectProps, ref: React.Ref<any>) => {\r\n let [{ slotProps, color, variant, ...inputProps }] = useInterface<any>(\"Select\", props, {})\r\n color ??= \"brand\"\r\n variant ??= \"fill\"\r\n const [target, setTarget] = useState<any>()\r\n const conRef = useRef(null)\r\n const { childs, selectedProps } = useMemo(() => {\r\n let sProps: any = {}\r\n const c = Children.map(children, (child: any) => {\r\n let selected = child.props.value === value\r\n if (selected) sProps = child.props\r\n return cloneElement(child, {\r\n value: undefined,\r\n selected,\r\n onClick: () => {\r\n setTarget(null)\r\n onChange && onChange(child.props.value)\r\n }\r\n })\r\n })\r\n return {\r\n childs: c,\r\n selectedProps: sProps as OptionProps\r\n }\r\n }, [children, value])\r\n\r\n const mergeRefs = useMergeRefs(ref, conRef)\r\n const toggleMenu = () => setTarget(target ? null : conRef.current)\r\n\r\n return (\r\n <>\r\n <Input\r\n ref={mergeRefs}\r\n color={color}\r\n variant={variant === \"soft\" ? \"fill\" : variant}\r\n endIcon={<Stack flexDirection=\"row\" component=\"span\" > {(target ? <UpIcon /> : <DownIcon />)}</Stack>}\r\n readOnly\r\n value={typeof selectedProps.children === 'string' ? selectedProps.children : value}\r\n cursor=\"pointer\"\r\n userSelect=\"none\"\r\n startIcon={selectedProps.startIcon}\r\n focused={!!target}\r\n error={error}\r\n helperText={helperText}\r\n name={name}\r\n {...slotProps?.input}\r\n {...inputProps}\r\n refs={{\r\n input: refs?.input,\r\n ...slotProps?.input?.refs\r\n }}\r\n slotProps={{\r\n rootContainer: {\r\n cursor: \"pointer\",\r\n userSelect: \"none\",\r\n ...(slotProps?.input?.slotProps?.container || {}),\r\n onClick: () => {\r\n if (!target) {\r\n toggleMenu()\r\n }\r\n },\r\n }\r\n }}\r\n />\r\n <Menu\r\n ref={refs?.menu}\r\n target={target}\r\n placement=\"bottom-left\"\r\n {...slotProps?.menu}\r\n slotProps={{\r\n ...slotProps?.menu?.slotProps,\r\n content: {\r\n mt: .5,\r\n ...slotProps?.menu?.content,\r\n width: conRef && (conRef?.current as any)?.clientWidth,\r\n }\r\n }}\r\n onClickOutside={(e) => {\r\n if ((conRef.current as any).contains(e.target)) return;\r\n toggleMenu()\r\n }}\r\n >\r\n <List\r\n ref={refs?.list}\r\n {...slotProps?.list}\r\n color={color}\r\n variant={variant === \"outline\" ? \"fill\" : variant}\r\n >\r\n {childs}\r\n </List>\r\n </Menu>\r\n </>\r\n )\r\n})\r\n\r\nexport default Select"],"names":[],"mappings":";;;;;;;;;;;;;;AA8BA;;AAAiC;;;;;AAK7B;;;;;AAKQ;AAAc;;AAEV;;;;;;AAMH;AACL;;AAEI;AACA;;AAER;;AAGA;AAEA;AAuBgB;;AAMY;;AAER;AAEP;;;AAiBG;;AAcpB;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../../src/Select/index.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { ReactElement, useMemo, cloneElement, useState, Children, useRef } from 'react'\nimport Input, { InputProps } from '../Input'\nimport List, { ListProps } from '../List'\nimport Menu, { MenuProps } from '../Menu'\nimport Stack from '../Stack'\nimport { OptionProps } from '../Option'\nimport DownIcon from '@xanui/icons/KeyboardArrowDown';\nimport UpIcon from '@xanui/icons/KeyboardArrowUp';\nimport { useInterface, useMergeRefs } from '@xanui/core'\n\n\nexport type SelectProps = Omit<InputProps, \"onChange\" | \"value\" | \"children\" | \"slotProps\"> & {\n value?: string | number;\n onChange?: (value: string | number) => void;\n children: ReactElement<OptionProps> | ReactElement<OptionProps>[];\n\n refs?: {\n input?: React.Ref<any>;\n menu?: React.Ref<any>;\n list?: React.Ref<any>;\n };\n slotProps?: {\n menu?: Omit<MenuProps, 'children' | 'target'>;\n input?: Omit<InputProps, \"onChange\" | \"value\">;\n list?: Omit<ListProps, \"children\">\n }\n}\n\nconst Select = React.forwardRef(({ onChange, value, children, error, helperText, name, refs, ...props }: SelectProps, ref: React.Ref<any>) => {\n let [{ slotProps, color, variant, ...inputProps }] = useInterface<any>(\"Select\", props, {})\n color ??= \"brand\"\n variant ??= \"fill\"\n const [target, setTarget] = useState<any>()\n const conRef = useRef(null)\n const { childs, selectedProps } = useMemo(() => {\n let sProps: any = {}\n const c = Children.map(children, (child: any) => {\n let selected = child.props.value === value\n if (selected) sProps = child.props\n return cloneElement(child, {\n value: undefined,\n selected,\n onClick: () => {\n setTarget(null)\n onChange && onChange(child.props.value)\n }\n })\n })\n return {\n childs: c,\n selectedProps: sProps as OptionProps\n }\n }, [children, value])\n\n const mergeRefs = useMergeRefs(ref, conRef)\n const toggleMenu = () => setTarget(target ? null : conRef.current)\n\n return (\n <>\n <Input\n ref={mergeRefs}\n color={color}\n variant={variant === \"soft\" ? \"fill\" : variant}\n endIcon={<Stack flexDirection=\"row\" component=\"span\" > {(target ? <UpIcon /> : <DownIcon />)}</Stack>}\n readOnly\n value={typeof selectedProps.children === 'string' ? selectedProps.children : value}\n cursor=\"pointer\"\n userSelect=\"none\"\n startIcon={selectedProps.startIcon}\n focused={!!target}\n error={error}\n helperText={helperText}\n name={name}\n {...slotProps?.input}\n {...inputProps}\n refs={{\n input: refs?.input,\n ...slotProps?.input?.refs\n }}\n slotProps={{\n rootContainer: {\n cursor: \"pointer\",\n userSelect: \"none\",\n ...(slotProps?.input?.slotProps?.container || {}),\n onClick: () => {\n if (!target) {\n toggleMenu()\n }\n },\n }\n }}\n />\n <Menu\n ref={refs?.menu}\n target={target}\n placement=\"bottom-left\"\n {...slotProps?.menu}\n slotProps={{\n ...slotProps?.menu?.slotProps,\n content: {\n mt: .5,\n ...slotProps?.menu?.content,\n width: conRef && (conRef?.current as any)?.clientWidth,\n }\n }}\n onClickOutside={(e) => {\n if ((conRef.current as any).contains(e.target)) return;\n toggleMenu()\n }}\n >\n <List\n ref={refs?.list}\n {...slotProps?.list}\n color={color}\n variant={variant === \"outline\" ? \"fill\" : variant}\n >\n {childs}\n </List>\n </Menu>\n </>\n )\n})\n\nexport default Select"],"names":[],"mappings":";;;;;;;;;;;;AA8BA;;AAAiC;;;;;AAK7B;;;;;AAKQ;AAAc;;AAEV;;;;;;AAMH;AACL;;AAEI;AACA;;AAER;;AAGA;AAEA;AAuBgB;;AAMY;;AAER;AAEP;;;AAiBG;;AAcpB;;"}
1
+ {"version":3,"file":"index.js","sources":["../../src/Select/index.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport React, { ReactElement, useMemo, cloneElement, useState, Children, useRef } from 'react'\r\nimport Input, { InputProps } from '../Input'\r\nimport List, { ListProps } from '../List'\r\nimport Menu, { MenuProps } from '../Menu'\r\nimport Stack from '../Stack'\r\nimport { OptionProps } from '../Option'\r\nimport DownIcon from '@xanui/icons/KeyboardArrowDown';\r\nimport UpIcon from '@xanui/icons/KeyboardArrowUp';\r\nimport { useInterface, useMergeRefs } from '@xanui/core'\r\n\r\n\r\nexport type SelectProps = Omit<InputProps, \"onChange\" | \"value\" | \"children\" | \"slotProps\"> & {\r\n value?: string | number;\r\n onChange?: (value: string | number) => void;\r\n children: ReactElement<OptionProps> | ReactElement<OptionProps>[];\r\n\r\n refs?: {\r\n input?: React.Ref<any>;\r\n menu?: React.Ref<any>;\r\n list?: React.Ref<any>;\r\n };\r\n slotProps?: {\r\n menu?: Omit<MenuProps, 'children' | 'target'>;\r\n input?: Omit<InputProps, \"onChange\" | \"value\">;\r\n list?: Omit<ListProps, \"children\">\r\n }\r\n}\r\n\r\nconst Select = React.forwardRef(({ onChange, value, children, error, helperText, name, refs, ...props }: SelectProps, ref: React.Ref<any>) => {\r\n let [{ slotProps, color, variant, ...inputProps }] = useInterface<any>(\"Select\", props, {})\r\n color ??= \"brand\"\r\n variant ??= \"fill\"\r\n const [target, setTarget] = useState<any>()\r\n const conRef = useRef(null)\r\n const { childs, selectedProps } = useMemo(() => {\r\n let sProps: any = {}\r\n const c = Children.map(children, (child: any) => {\r\n let selected = child.props.value === value\r\n if (selected) sProps = child.props\r\n return cloneElement(child, {\r\n value: undefined,\r\n selected,\r\n onClick: () => {\r\n setTarget(null)\r\n onChange && onChange(child.props.value)\r\n }\r\n })\r\n })\r\n return {\r\n childs: c,\r\n selectedProps: sProps as OptionProps\r\n }\r\n }, [children, value])\r\n\r\n const mergeRefs = useMergeRefs(ref, conRef)\r\n const toggleMenu = () => setTarget(target ? null : conRef.current)\r\n\r\n return (\r\n <>\r\n <Input\r\n ref={mergeRefs}\r\n color={color}\r\n variant={variant === \"soft\" ? \"fill\" : variant}\r\n endIcon={<Stack flexDirection=\"row\" component=\"span\" > {(target ? <UpIcon /> : <DownIcon />)}</Stack>}\r\n readOnly\r\n value={typeof selectedProps.children === 'string' ? selectedProps.children : value}\r\n cursor=\"pointer\"\r\n userSelect=\"none\"\r\n startIcon={selectedProps.startIcon}\r\n focused={!!target}\r\n error={error}\r\n helperText={helperText}\r\n name={name}\r\n {...slotProps?.input}\r\n {...inputProps}\r\n refs={{\r\n input: refs?.input,\r\n ...slotProps?.input?.refs\r\n }}\r\n slotProps={{\r\n rootContainer: {\r\n cursor: \"pointer\",\r\n userSelect: \"none\",\r\n ...(slotProps?.input?.slotProps?.container || {}),\r\n onClick: () => {\r\n if (!target) {\r\n toggleMenu()\r\n }\r\n },\r\n }\r\n }}\r\n />\r\n <Menu\r\n ref={refs?.menu}\r\n target={target}\r\n placement=\"bottom-left\"\r\n {...slotProps?.menu}\r\n slotProps={{\r\n ...slotProps?.menu?.slotProps,\r\n content: {\r\n mt: .5,\r\n ...slotProps?.menu?.content,\r\n width: conRef && (conRef?.current as any)?.clientWidth,\r\n }\r\n }}\r\n onClickOutside={(e) => {\r\n if ((conRef.current as any).contains(e.target)) return;\r\n toggleMenu()\r\n }}\r\n >\r\n <List\r\n ref={refs?.list}\r\n {...slotProps?.list}\r\n color={color}\r\n variant={variant === \"outline\" ? \"fill\" : variant}\r\n >\r\n {childs}\r\n </List>\r\n </Menu>\r\n </>\r\n )\r\n})\r\n\r\nexport default Select"],"names":[],"mappings":";;;;;;;;;;;;AA8BA;;AAAiC;;;;;AAK7B;;;;;AAKQ;AAAc;;AAEV;;;;;;AAMH;AACL;;AAEI;AACA;;AAER;;AAGA;AAEA;AAuBgB;;AAMY;;AAER;AAEP;;;AAiBG;;AAcpB;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"index.cjs","sources":["../../src/Skeleton/index.tsx"],"sourcesContent":["import React from 'react';\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\n\nexport type SkeletonProps<T extends TagComponentType = \"div\"> = TagProps<T> & {\n animation?: 'pulse' | 'wave' | 'none';\n loading?: boolean;\n}\n\nconst Skeleton = React.forwardRef(<T extends TagComponentType = \"div\">({ children, loading, color, animation, ...props }: SkeletonProps<T>, ref: React.Ref<any>) => {\n\n if (!children) loading = true\n\n if (loading) {\n animation ??= 'pulse'\n color ??= \"default\"\n let sxr: any = {}\n switch (animation) {\n case 'pulse':\n sxr = {\n bgcolor: \"divider.primary\",\n width: \"100%\",\n animation: 'skpulse 1.5s infinite',\n \"@keyframes skpulse\": {\n '0%, 100%': {\n opacity: 1,\n },\n '50%': {\n opacity: 0.4,\n },\n }\n }\n break;\n case 'wave':\n sxr = {\n position: 'relative',\n overflow: 'hidden',\n bgcolor: \"divider.primary\",\n \"&::after\": {\n content: '\"\"',\n position: 'absolute',\n top: 0,\n left: \"0%\",\n width: '100%',\n height: '100%',\n animation: 'skwave 2s infinite',\n background: `linear-gradient(90deg, transparent 0%, var(--color-divider-secondary) 50%, transparent 100%)`,\n },\n \"@keyframes skwave\": {\n '0%': { left: '-100%' },\n '100%': { left: '100%' }\n }\n }\n break;\n }\n return (\n <Tag\n {...props}\n baseClass='skeleton'\n ref={ref}\n sxr={sxr}\n />\n )\n }\n\n return children\n})\n\nexport default Skeleton\n\n"],"names":["__rest","_jsx","Tag"],"mappings":";;;;;;;AAQA,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAAmE,EAAE,GAAmB,KAAI;AAA5F,IAAA,IAAA,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,SAAS,EAAA,GAAA,EAA8B,EAAzB,KAAK,GAAAA,YAAA,CAAA,EAAA,EAA/C,CAAA,UAAA,EAAA,SAAA,EAAA,OAAA,EAAA,WAAA,CAAiD,CAAF;AAEnH,IAAA,IAAI,CAAC,QAAQ;QAAE,OAAO,GAAG,IAAI;IAE7B,IAAI,OAAO,EAAE;QACV,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,MAAA,GAAT,SAAS,IAAT,SAAS,GAAK,OAAO,CAAA;QACrB,KAAK,KAAA,IAAA,IAAL,KAAK,KAAA,MAAA,GAAL,KAAK,IAAL,KAAK,GAAK,SAAS,CAAA;QACnB,IAAI,GAAG,GAAQ,EAAE;QACjB,QAAQ,SAAS;AACd,YAAA,KAAK,OAAO;AACT,gBAAA,GAAG,GAAG;AACH,oBAAA,OAAO,EAAE,iBAAiB;AAC1B,oBAAA,KAAK,EAAE,MAAM;AACb,oBAAA,SAAS,EAAE,uBAAuB;AAClC,oBAAA,oBAAoB,EAAE;AACnB,wBAAA,UAAU,EAAE;AACT,4BAAA,OAAO,EAAE,CAAC;AACZ,yBAAA;AACD,wBAAA,KAAK,EAAE;AACJ,4BAAA,OAAO,EAAE,GAAG;AACd,yBAAA;AACH;iBACH;gBACD;AACH,YAAA,KAAK,MAAM;AACR,gBAAA,GAAG,GAAG;AACH,oBAAA,QAAQ,EAAE,UAAU;AACpB,oBAAA,QAAQ,EAAE,QAAQ;AAClB,oBAAA,OAAO,EAAE,iBAAiB;AAC1B,oBAAA,UAAU,EAAE;AACT,wBAAA,OAAO,EAAE,IAAI;AACb,wBAAA,QAAQ,EAAE,UAAU;AACpB,wBAAA,GAAG,EAAE,CAAC;AACN,wBAAA,IAAI,EAAE,IAAI;AACV,wBAAA,KAAK,EAAE,MAAM;AACb,wBAAA,MAAM,EAAE,MAAM;AACd,wBAAA,SAAS,EAAE,oBAAoB;AAC/B,wBAAA,UAAU,EAAE,CAAA,4FAAA,CAA8F;AAC5G,qBAAA;AACD,oBAAA,mBAAmB,EAAE;AAClB,wBAAA,IAAI,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;AACvB,wBAAA,MAAM,EAAE,EAAE,IAAI,EAAE,MAAM;AACxB;iBACH;gBACD;;AAEN,QAAA,QACGC,cAAA,CAACC,QAAG,oBACG,KAAK,EAAA,EACT,SAAS,EAAC,UAAU,EACpB,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EAAA,CAAA,CACT;IAER;AAEA,IAAA,OAAO,QAAQ;AAClB,CAAC;;;;"}
1
+ {"version":3,"file":"index.cjs","sources":["../../src/Skeleton/index.tsx"],"sourcesContent":["import React from 'react';\r\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\r\n\r\nexport type SkeletonProps<T extends TagComponentType = \"div\"> = TagProps<T> & {\r\n animation?: 'pulse' | 'wave' | 'none';\r\n loading?: boolean;\r\n}\r\n\r\nconst Skeleton = React.forwardRef(<T extends TagComponentType = \"div\">({ children, loading, color, animation, ...props }: SkeletonProps<T>, ref: React.Ref<any>) => {\r\n\r\n if (!children) loading = true\r\n\r\n if (loading) {\r\n animation ??= 'pulse'\r\n color ??= \"default\"\r\n let sxr: any = {}\r\n switch (animation) {\r\n case 'pulse':\r\n sxr = {\r\n bgcolor: \"divider.primary\",\r\n width: \"100%\",\r\n animation: 'skpulse 1.5s infinite',\r\n \"@keyframes skpulse\": {\r\n '0%, 100%': {\r\n opacity: 1,\r\n },\r\n '50%': {\r\n opacity: 0.4,\r\n },\r\n }\r\n }\r\n break;\r\n case 'wave':\r\n sxr = {\r\n position: 'relative',\r\n overflow: 'hidden',\r\n bgcolor: \"divider.primary\",\r\n \"&::after\": {\r\n content: '\"\"',\r\n position: 'absolute',\r\n top: 0,\r\n left: \"0%\",\r\n width: '100%',\r\n height: '100%',\r\n animation: 'skwave 2s infinite',\r\n background: `linear-gradient(90deg, transparent 0%, var(--color-divider-secondary) 50%, transparent 100%)`,\r\n },\r\n \"@keyframes skwave\": {\r\n '0%': { left: '-100%' },\r\n '100%': { left: '100%' }\r\n }\r\n }\r\n break;\r\n }\r\n return (\r\n <Tag\r\n {...props}\r\n baseClass='skeleton'\r\n ref={ref}\r\n sxr={sxr}\r\n />\r\n )\r\n }\r\n\r\n return children\r\n})\r\n\r\nexport default Skeleton\r\n\r\n"],"names":["__rest","_jsx","Tag"],"mappings":";;;;;;;AAQA,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAAmE,EAAE,GAAmB,KAAI;AAA5F,IAAA,IAAA,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,SAAS,EAAA,GAAA,EAA8B,EAAzB,KAAK,GAAAA,YAAA,CAAA,EAAA,EAA/C,CAAA,UAAA,EAAA,SAAA,EAAA,OAAA,EAAA,WAAA,CAAiD,CAAF;AAEnH,IAAA,IAAI,CAAC,QAAQ;QAAE,OAAO,GAAG,IAAI;IAE7B,IAAI,OAAO,EAAE;QACV,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,MAAA,GAAT,SAAS,IAAT,SAAS,GAAK,OAAO,CAAA;QACrB,KAAK,KAAA,IAAA,IAAL,KAAK,KAAA,MAAA,GAAL,KAAK,IAAL,KAAK,GAAK,SAAS,CAAA;QACnB,IAAI,GAAG,GAAQ,EAAE;QACjB,QAAQ,SAAS;AACd,YAAA,KAAK,OAAO;AACT,gBAAA,GAAG,GAAG;AACH,oBAAA,OAAO,EAAE,iBAAiB;AAC1B,oBAAA,KAAK,EAAE,MAAM;AACb,oBAAA,SAAS,EAAE,uBAAuB;AAClC,oBAAA,oBAAoB,EAAE;AACnB,wBAAA,UAAU,EAAE;AACT,4BAAA,OAAO,EAAE,CAAC;AACZ,yBAAA;AACD,wBAAA,KAAK,EAAE;AACJ,4BAAA,OAAO,EAAE,GAAG;AACd,yBAAA;AACH;iBACH;gBACD;AACH,YAAA,KAAK,MAAM;AACR,gBAAA,GAAG,GAAG;AACH,oBAAA,QAAQ,EAAE,UAAU;AACpB,oBAAA,QAAQ,EAAE,QAAQ;AAClB,oBAAA,OAAO,EAAE,iBAAiB;AAC1B,oBAAA,UAAU,EAAE;AACT,wBAAA,OAAO,EAAE,IAAI;AACb,wBAAA,QAAQ,EAAE,UAAU;AACpB,wBAAA,GAAG,EAAE,CAAC;AACN,wBAAA,IAAI,EAAE,IAAI;AACV,wBAAA,KAAK,EAAE,MAAM;AACb,wBAAA,MAAM,EAAE,MAAM;AACd,wBAAA,SAAS,EAAE,oBAAoB;AAC/B,wBAAA,UAAU,EAAE,CAAA,4FAAA,CAA8F;AAC5G,qBAAA;AACD,oBAAA,mBAAmB,EAAE;AAClB,wBAAA,IAAI,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;AACvB,wBAAA,MAAM,EAAE,EAAE,IAAI,EAAE,MAAM;AACxB;iBACH;gBACD;;AAEN,QAAA,QACGC,cAAA,CAACC,QAAG,oBACG,KAAK,EAAA,EACT,SAAS,EAAC,UAAU,EACpB,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EAAA,CAAA,CACT;IAER;AAEA,IAAA,OAAO,QAAQ;AAClB,CAAC;;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../../src/Skeleton/index.tsx"],"sourcesContent":["import React from 'react';\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\n\nexport type SkeletonProps<T extends TagComponentType = \"div\"> = TagProps<T> & {\n animation?: 'pulse' | 'wave' | 'none';\n loading?: boolean;\n}\n\nconst Skeleton = React.forwardRef(<T extends TagComponentType = \"div\">({ children, loading, color, animation, ...props }: SkeletonProps<T>, ref: React.Ref<any>) => {\n\n if (!children) loading = true\n\n if (loading) {\n animation ??= 'pulse'\n color ??= \"default\"\n let sxr: any = {}\n switch (animation) {\n case 'pulse':\n sxr = {\n bgcolor: \"divider.primary\",\n width: \"100%\",\n animation: 'skpulse 1.5s infinite',\n \"@keyframes skpulse\": {\n '0%, 100%': {\n opacity: 1,\n },\n '50%': {\n opacity: 0.4,\n },\n }\n }\n break;\n case 'wave':\n sxr = {\n position: 'relative',\n overflow: 'hidden',\n bgcolor: \"divider.primary\",\n \"&::after\": {\n content: '\"\"',\n position: 'absolute',\n top: 0,\n left: \"0%\",\n width: '100%',\n height: '100%',\n animation: 'skwave 2s infinite',\n background: `linear-gradient(90deg, transparent 0%, var(--color-divider-secondary) 50%, transparent 100%)`,\n },\n \"@keyframes skwave\": {\n '0%': { left: '-100%' },\n '100%': { left: '100%' }\n }\n }\n break;\n }\n return (\n <Tag\n {...props}\n baseClass='skeleton'\n ref={ref}\n sxr={sxr}\n />\n )\n }\n\n return children\n})\n\nexport default Skeleton\n\n"],"names":["_jsx"],"mappings":";;;;;AAQA,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAAmE,EAAE,GAAmB,KAAI;AAA5F,IAAA,IAAA,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,SAAS,EAAA,GAAA,EAA8B,EAAzB,KAAK,GAAA,MAAA,CAAA,EAAA,EAA/C,CAAA,UAAA,EAAA,SAAA,EAAA,OAAA,EAAA,WAAA,CAAiD,CAAF;AAEnH,IAAA,IAAI,CAAC,QAAQ;QAAE,OAAO,GAAG,IAAI;IAE7B,IAAI,OAAO,EAAE;QACV,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,MAAA,GAAT,SAAS,IAAT,SAAS,GAAK,OAAO,CAAA;QACrB,KAAK,KAAA,IAAA,IAAL,KAAK,KAAA,MAAA,GAAL,KAAK,IAAL,KAAK,GAAK,SAAS,CAAA;QACnB,IAAI,GAAG,GAAQ,EAAE;QACjB,QAAQ,SAAS;AACd,YAAA,KAAK,OAAO;AACT,gBAAA,GAAG,GAAG;AACH,oBAAA,OAAO,EAAE,iBAAiB;AAC1B,oBAAA,KAAK,EAAE,MAAM;AACb,oBAAA,SAAS,EAAE,uBAAuB;AAClC,oBAAA,oBAAoB,EAAE;AACnB,wBAAA,UAAU,EAAE;AACT,4BAAA,OAAO,EAAE,CAAC;AACZ,yBAAA;AACD,wBAAA,KAAK,EAAE;AACJ,4BAAA,OAAO,EAAE,GAAG;AACd,yBAAA;AACH;iBACH;gBACD;AACH,YAAA,KAAK,MAAM;AACR,gBAAA,GAAG,GAAG;AACH,oBAAA,QAAQ,EAAE,UAAU;AACpB,oBAAA,QAAQ,EAAE,QAAQ;AAClB,oBAAA,OAAO,EAAE,iBAAiB;AAC1B,oBAAA,UAAU,EAAE;AACT,wBAAA,OAAO,EAAE,IAAI;AACb,wBAAA,QAAQ,EAAE,UAAU;AACpB,wBAAA,GAAG,EAAE,CAAC;AACN,wBAAA,IAAI,EAAE,IAAI;AACV,wBAAA,KAAK,EAAE,MAAM;AACb,wBAAA,MAAM,EAAE,MAAM;AACd,wBAAA,SAAS,EAAE,oBAAoB;AAC/B,wBAAA,UAAU,EAAE,CAAA,4FAAA,CAA8F;AAC5G,qBAAA;AACD,oBAAA,mBAAmB,EAAE;AAClB,wBAAA,IAAI,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;AACvB,wBAAA,MAAM,EAAE,EAAE,IAAI,EAAE,MAAM;AACxB;iBACH;gBACD;;AAEN,QAAA,QACGA,GAAA,CAAC,GAAG,oBACG,KAAK,EAAA,EACT,SAAS,EAAC,UAAU,EACpB,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EAAA,CAAA,CACT;IAER;AAEA,IAAA,OAAO,QAAQ;AAClB,CAAC;;;;"}
1
+ {"version":3,"file":"index.js","sources":["../../src/Skeleton/index.tsx"],"sourcesContent":["import React from 'react';\r\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\r\n\r\nexport type SkeletonProps<T extends TagComponentType = \"div\"> = TagProps<T> & {\r\n animation?: 'pulse' | 'wave' | 'none';\r\n loading?: boolean;\r\n}\r\n\r\nconst Skeleton = React.forwardRef(<T extends TagComponentType = \"div\">({ children, loading, color, animation, ...props }: SkeletonProps<T>, ref: React.Ref<any>) => {\r\n\r\n if (!children) loading = true\r\n\r\n if (loading) {\r\n animation ??= 'pulse'\r\n color ??= \"default\"\r\n let sxr: any = {}\r\n switch (animation) {\r\n case 'pulse':\r\n sxr = {\r\n bgcolor: \"divider.primary\",\r\n width: \"100%\",\r\n animation: 'skpulse 1.5s infinite',\r\n \"@keyframes skpulse\": {\r\n '0%, 100%': {\r\n opacity: 1,\r\n },\r\n '50%': {\r\n opacity: 0.4,\r\n },\r\n }\r\n }\r\n break;\r\n case 'wave':\r\n sxr = {\r\n position: 'relative',\r\n overflow: 'hidden',\r\n bgcolor: \"divider.primary\",\r\n \"&::after\": {\r\n content: '\"\"',\r\n position: 'absolute',\r\n top: 0,\r\n left: \"0%\",\r\n width: '100%',\r\n height: '100%',\r\n animation: 'skwave 2s infinite',\r\n background: `linear-gradient(90deg, transparent 0%, var(--color-divider-secondary) 50%, transparent 100%)`,\r\n },\r\n \"@keyframes skwave\": {\r\n '0%': { left: '-100%' },\r\n '100%': { left: '100%' }\r\n }\r\n }\r\n break;\r\n }\r\n return (\r\n <Tag\r\n {...props}\r\n baseClass='skeleton'\r\n ref={ref}\r\n sxr={sxr}\r\n />\r\n )\r\n }\r\n\r\n return children\r\n})\r\n\r\nexport default Skeleton\r\n\r\n"],"names":["_jsx"],"mappings":";;;;;AAQA,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAAmE,EAAE,GAAmB,KAAI;AAA5F,IAAA,IAAA,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,SAAS,EAAA,GAAA,EAA8B,EAAzB,KAAK,GAAA,MAAA,CAAA,EAAA,EAA/C,CAAA,UAAA,EAAA,SAAA,EAAA,OAAA,EAAA,WAAA,CAAiD,CAAF;AAEnH,IAAA,IAAI,CAAC,QAAQ;QAAE,OAAO,GAAG,IAAI;IAE7B,IAAI,OAAO,EAAE;QACV,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,MAAA,GAAT,SAAS,IAAT,SAAS,GAAK,OAAO,CAAA;QACrB,KAAK,KAAA,IAAA,IAAL,KAAK,KAAA,MAAA,GAAL,KAAK,IAAL,KAAK,GAAK,SAAS,CAAA;QACnB,IAAI,GAAG,GAAQ,EAAE;QACjB,QAAQ,SAAS;AACd,YAAA,KAAK,OAAO;AACT,gBAAA,GAAG,GAAG;AACH,oBAAA,OAAO,EAAE,iBAAiB;AAC1B,oBAAA,KAAK,EAAE,MAAM;AACb,oBAAA,SAAS,EAAE,uBAAuB;AAClC,oBAAA,oBAAoB,EAAE;AACnB,wBAAA,UAAU,EAAE;AACT,4BAAA,OAAO,EAAE,CAAC;AACZ,yBAAA;AACD,wBAAA,KAAK,EAAE;AACJ,4BAAA,OAAO,EAAE,GAAG;AACd,yBAAA;AACH;iBACH;gBACD;AACH,YAAA,KAAK,MAAM;AACR,gBAAA,GAAG,GAAG;AACH,oBAAA,QAAQ,EAAE,UAAU;AACpB,oBAAA,QAAQ,EAAE,QAAQ;AAClB,oBAAA,OAAO,EAAE,iBAAiB;AAC1B,oBAAA,UAAU,EAAE;AACT,wBAAA,OAAO,EAAE,IAAI;AACb,wBAAA,QAAQ,EAAE,UAAU;AACpB,wBAAA,GAAG,EAAE,CAAC;AACN,wBAAA,IAAI,EAAE,IAAI;AACV,wBAAA,KAAK,EAAE,MAAM;AACb,wBAAA,MAAM,EAAE,MAAM;AACd,wBAAA,SAAS,EAAE,oBAAoB;AAC/B,wBAAA,UAAU,EAAE,CAAA,4FAAA,CAA8F;AAC5G,qBAAA;AACD,oBAAA,mBAAmB,EAAE;AAClB,wBAAA,IAAI,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;AACvB,wBAAA,MAAM,EAAE,EAAE,IAAI,EAAE,MAAM;AACxB;iBACH;gBACD;;AAEN,QAAA,QACGA,GAAA,CAAC,GAAG,oBACG,KAAK,EAAA,EACT,SAAS,EAAC,UAAU,EACpB,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EAAA,CAAA,CACT;IAER;AAEA,IAAA,OAAO,QAAQ;AAClB,CAAC;;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"index.cjs","sources":["../../src/Stack/index.tsx"],"sourcesContent":["\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\n\nexport type StackProps<T extends TagComponentType = \"div\"> = TagProps<T>\n\nconst Stack = React.forwardRef(<T extends TagComponentType = \"div\">({ children, ...props }: StackProps<T>, ref?: React.Ref<any>) => {\n return (\n <Tag\n {...props}\n sxr={{\n display: \"flex\",\n flexDirection: \"column\",\n }}\n baseClass='stack'\n ref={ref}\n >{children}</Tag>\n )\n})\n\nexport default Stack\n"],"names":["__rest","_jsx","Tag"],"mappings":";;;;;;;AAMA,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAAqC,EAAE,GAAoB,KAAI;AAA/D,IAAA,IAAA,EAAE,QAAQ,EAAA,GAAA,EAA2B,EAAtB,KAAK,GAAAA,YAAA,CAAA,EAAA,EAApB,YAAsB,CAAF;AACpF,IAAA,QACIC,cAAA,CAACC,QAAG,oBACI,KAAK,EAAA,EACT,GAAG,EAAE;AACD,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,aAAa,EAAE,QAAQ;SAC1B,EACD,SAAS,EAAC,OAAO,EACjB,GAAG,EAAE,GAAG,EAAA,QAAA,EACV,QAAQ,EAAA,CAAA,CAAO;AAEzB,CAAC;;;;"}
1
+ {"version":3,"file":"index.cjs","sources":["../../src/Stack/index.tsx"],"sourcesContent":["\r\nimport React from 'react';\r\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\r\n\r\nexport type StackProps<T extends TagComponentType = \"div\"> = TagProps<T>\r\n\r\nconst Stack = React.forwardRef(<T extends TagComponentType = \"div\">({ children, ...props }: StackProps<T>, ref?: React.Ref<any>) => {\r\n return (\r\n <Tag\r\n {...props}\r\n sxr={{\r\n display: \"flex\",\r\n flexDirection: \"column\",\r\n }}\r\n baseClass='stack'\r\n ref={ref}\r\n >{children}</Tag>\r\n )\r\n})\r\n\r\nexport default Stack\r\n"],"names":["__rest","_jsx","Tag"],"mappings":";;;;;;;AAMA,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAAqC,EAAE,GAAoB,KAAI;AAA/D,IAAA,IAAA,EAAE,QAAQ,EAAA,GAAA,EAA2B,EAAtB,KAAK,GAAAA,YAAA,CAAA,EAAA,EAApB,YAAsB,CAAF;AACpF,IAAA,QACIC,cAAA,CAACC,QAAG,oBACI,KAAK,EAAA,EACT,GAAG,EAAE;AACD,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,aAAa,EAAE,QAAQ;SAC1B,EACD,SAAS,EAAC,OAAO,EACjB,GAAG,EAAE,GAAG,EAAA,QAAA,EACV,QAAQ,EAAA,CAAA,CAAO;AAEzB,CAAC;;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../../src/Stack/index.tsx"],"sourcesContent":["\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\n\nexport type StackProps<T extends TagComponentType = \"div\"> = TagProps<T>\n\nconst Stack = React.forwardRef(<T extends TagComponentType = \"div\">({ children, ...props }: StackProps<T>, ref?: React.Ref<any>) => {\n return (\n <Tag\n {...props}\n sxr={{\n display: \"flex\",\n flexDirection: \"column\",\n }}\n baseClass='stack'\n ref={ref}\n >{children}</Tag>\n )\n})\n\nexport default Stack\n"],"names":["_jsx"],"mappings":";;;;;AAMA,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAAqC,EAAE,GAAoB,KAAI;AAA/D,IAAA,IAAA,EAAE,QAAQ,EAAA,GAAA,EAA2B,EAAtB,KAAK,GAAA,MAAA,CAAA,EAAA,EAApB,YAAsB,CAAF;AACpF,IAAA,QACIA,GAAA,CAAC,GAAG,oBACI,KAAK,EAAA,EACT,GAAG,EAAE;AACD,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,aAAa,EAAE,QAAQ;SAC1B,EACD,SAAS,EAAC,OAAO,EACjB,GAAG,EAAE,GAAG,EAAA,QAAA,EACV,QAAQ,EAAA,CAAA,CAAO;AAEzB,CAAC;;;;"}
1
+ {"version":3,"file":"index.js","sources":["../../src/Stack/index.tsx"],"sourcesContent":["\r\nimport React from 'react';\r\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\r\n\r\nexport type StackProps<T extends TagComponentType = \"div\"> = TagProps<T>\r\n\r\nconst Stack = React.forwardRef(<T extends TagComponentType = \"div\">({ children, ...props }: StackProps<T>, ref?: React.Ref<any>) => {\r\n return (\r\n <Tag\r\n {...props}\r\n sxr={{\r\n display: \"flex\",\r\n flexDirection: \"column\",\r\n }}\r\n baseClass='stack'\r\n ref={ref}\r\n >{children}</Tag>\r\n )\r\n})\r\n\r\nexport default Stack\r\n"],"names":["_jsx"],"mappings":";;;;;AAMA,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAAqC,EAAE,GAAoB,KAAI;AAA/D,IAAA,IAAA,EAAE,QAAQ,EAAA,GAAA,EAA2B,EAAtB,KAAK,GAAA,MAAA,CAAA,EAAA,EAApB,YAAsB,CAAF;AACpF,IAAA,QACIA,GAAA,CAAC,GAAG,oBACI,KAAK,EAAA,EACT,GAAG,EAAE;AACD,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,aAAa,EAAE,QAAQ;SAC1B,EACD,SAAS,EAAC,OAAO,EACjB,GAAG,EAAE,GAAG,EAAA,QAAA,EACV,QAAQ,EAAA,CAAA,CAAO;AAEzB,CAAC;;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"index.cjs","sources":["../../src/Switch/index.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { ReactElement, useState } from 'react';\nimport { Tag, TagProps, useBreakpointProps, UseColorTemplateColor, useInterface, useBreakpointPropsType } from '@xanui/core';\n\n\nexport type SwitchProps = Omit<TagProps<\"input\">, \"color\" | \"size\" | \"component\" | \"type\" | \"checked\"> & {\n checked?: boolean;\n size?: useBreakpointPropsType<number | \"small\" | \"medium\" | \"large\">;\n color?: useBreakpointPropsType<Omit<UseColorTemplateColor, \"default\">>;\n disabled?: useBreakpointPropsType<boolean>;\n trackSize?: useBreakpointPropsType<number>;\n icon?: useBreakpointPropsType<ReactElement>;\n slotProps?: {\n thumb?: Omit<TagProps, 'children'>;\n track?: Omit<TagProps, 'children'>;\n }\n}\n\nconst Switch = React.forwardRef((props: SwitchProps, ref?: React.Ref<any>) => {\n let [{ size, checked, color, disabled, icon, onChange, trackSize, slotProps, ...rest }] = useInterface<any>(\"Switch\", props, {})\n const _p: any = {}\n if (size) _p.size = size\n if (color) _p.color = color\n if (disabled) _p.disabled = disabled\n if (trackSize) _p.trackSize = trackSize\n if (icon) _p.icon = icon\n const p: any = useBreakpointProps(_p)\n size = p.size ?? \"medium\"\n color = p.color ?? \"brand\"\n disabled = p.disabled\n trackSize = p.trackSize\n icon = p.icon\n\n const [c, set] = useState(false)\n checked ??= c\n\n onChange = onChange || (() => set(!c));\n\n let sizes: any = {\n small: 32,\n medium: 48,\n large: 60\n }\n let _size = sizes[size as any] || size\n\n let height = (_size / 2)\n trackSize ??= height + 4\n let isNormalSize = (height + 4) === trackSize\n let transform = checked ? \"92%\" : \"8%\"\n if (!isNormalSize) {\n transform = checked ? \"100%\" : \"-10%\"\n }\n\n return (\n <Tag\n disabled={disabled}\n sxr={{\n width: _size,\n height: height,\n position: \"relative\",\n cursor: \"pointer\",\n display: \"inline-block\"\n }}\n onClick={onChange}\n >\n <Tag\n {...slotProps?.track}\n baseClass='switch-track-bar'\n sxr={{\n width: _size,\n height: trackSize,\n borderRadius: height,\n position: 'absolute',\n top: \"50%\",\n transform: \"translateY(-50%)\",\n bgcolor: checked ? color : \"divider\",\n\n }}\n >\n </Tag>\n <Tag\n {...slotProps?.thumb}\n baseClass='switch-thumb'\n sxr={{\n transition: \"all .25s\",\n width: height,\n height: height,\n radius: height,\n bgcolor: \"#FFFFFF\",\n position: \"absolute\",\n top: \"50%\",\n border: isNormalSize ? 0 : 1,\n left: 0,\n transform: `translate(${transform}, -50%)`,\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\"\n }}\n >\n {\n icon\n }\n </Tag>\n <Tag\n {...rest}\n component='input'\n ref={ref}\n type=\"radio\"\n readOnly\n checked={checked}\n sxr={{\n display: \"none!important\"\n }}\n />\n </Tag>\n )\n})\n\nexport default Switch\n"],"names":[],"mappings":";;;;;;;;AAmBA;;AACI;;AAEA;AAAU;AACV;AAAW;AACX;AAAc;AACd;AAAe;AACf;AAAU;AACV;AACA;AACA;AACA;AACA;AACA;;;AAKA;AAEA;AACI;AACA;AACA;;;AAIJ;;;;;;;;AAYY;AACA;AACA;AACA;AACA;;AAQI;AACA;AACA;AACA;AACA;AACA;;AAGH;AAOG;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;;AAeA;;AAKpB;;"}
1
+ {"version":3,"file":"index.cjs","sources":["../../src/Switch/index.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport React, { ReactElement, useState } from 'react';\r\nimport { Tag, TagProps, useBreakpointProps, UseColorTemplateColor, useInterface, useBreakpointPropsType } from '@xanui/core';\r\n\r\n\r\nexport type SwitchProps = Omit<TagProps<\"input\">, \"color\" | \"size\" | \"component\" | \"type\" | \"checked\"> & {\r\n checked?: boolean;\r\n size?: useBreakpointPropsType<number | \"small\" | \"medium\" | \"large\">;\r\n color?: useBreakpointPropsType<Omit<UseColorTemplateColor, \"default\">>;\r\n disabled?: useBreakpointPropsType<boolean>;\r\n trackSize?: useBreakpointPropsType<number>;\r\n icon?: useBreakpointPropsType<ReactElement>;\r\n slotProps?: {\r\n thumb?: Omit<TagProps, 'children'>;\r\n track?: Omit<TagProps, 'children'>;\r\n }\r\n}\r\n\r\nconst Switch = React.forwardRef((props: SwitchProps, ref?: React.Ref<any>) => {\r\n let [{ size, checked, color, disabled, icon, onChange, trackSize, slotProps, ...rest }] = useInterface<any>(\"Switch\", props, {})\r\n const _p: any = {}\r\n if (size) _p.size = size\r\n if (color) _p.color = color\r\n if (disabled) _p.disabled = disabled\r\n if (trackSize) _p.trackSize = trackSize\r\n if (icon) _p.icon = icon\r\n const p: any = useBreakpointProps(_p)\r\n size = p.size ?? \"medium\"\r\n color = p.color ?? \"brand\"\r\n disabled = p.disabled\r\n trackSize = p.trackSize\r\n icon = p.icon\r\n\r\n const [c, set] = useState(false)\r\n checked ??= c\r\n\r\n onChange = onChange || (() => set(!c));\r\n\r\n let sizes: any = {\r\n small: 32,\r\n medium: 48,\r\n large: 60\r\n }\r\n let _size = sizes[size as any] || size\r\n\r\n let height = (_size / 2)\r\n trackSize ??= height + 4\r\n let isNormalSize = (height + 4) === trackSize\r\n let transform = checked ? \"92%\" : \"8%\"\r\n if (!isNormalSize) {\r\n transform = checked ? \"100%\" : \"-10%\"\r\n }\r\n\r\n return (\r\n <Tag\r\n disabled={disabled}\r\n sxr={{\r\n width: _size,\r\n height: height,\r\n position: \"relative\",\r\n cursor: \"pointer\",\r\n display: \"inline-block\"\r\n }}\r\n onClick={onChange}\r\n >\r\n <Tag\r\n {...slotProps?.track}\r\n baseClass='switch-track-bar'\r\n sxr={{\r\n width: _size,\r\n height: trackSize,\r\n borderRadius: height,\r\n position: 'absolute',\r\n top: \"50%\",\r\n transform: \"translateY(-50%)\",\r\n bgcolor: checked ? color : \"divider\",\r\n\r\n }}\r\n >\r\n </Tag>\r\n <Tag\r\n {...slotProps?.thumb}\r\n baseClass='switch-thumb'\r\n sxr={{\r\n transition: \"all .25s\",\r\n width: height,\r\n height: height,\r\n radius: height,\r\n bgcolor: \"#FFFFFF\",\r\n position: \"absolute\",\r\n top: \"50%\",\r\n border: isNormalSize ? 0 : 1,\r\n left: 0,\r\n transform: `translate(${transform}, -50%)`,\r\n display: \"flex\",\r\n justifyContent: \"center\",\r\n alignItems: \"center\"\r\n }}\r\n >\r\n {\r\n icon\r\n }\r\n </Tag>\r\n <Tag\r\n {...rest}\r\n component='input'\r\n ref={ref}\r\n type=\"radio\"\r\n readOnly\r\n checked={checked}\r\n sxr={{\r\n display: \"none!important\"\r\n }}\r\n />\r\n </Tag>\r\n )\r\n})\r\n\r\nexport default Switch\r\n"],"names":[],"mappings":";;;;;;;;AAmBA;;AACI;;AAEA;AAAU;AACV;AAAW;AACX;AAAc;AACd;AAAe;AACf;AAAU;AACV;AACA;AACA;AACA;AACA;AACA;;;AAKA;AAEA;AACI;AACA;AACA;;;AAIJ;;;;;;;;AAYY;AACA;AACA;AACA;AACA;;AAQI;AACA;AACA;AACA;AACA;AACA;;AAGH;AAOG;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;;AAeA;;AAKpB;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../../src/Switch/index.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { ReactElement, useState } from 'react';\nimport { Tag, TagProps, useBreakpointProps, UseColorTemplateColor, useInterface, useBreakpointPropsType } from '@xanui/core';\n\n\nexport type SwitchProps = Omit<TagProps<\"input\">, \"color\" | \"size\" | \"component\" | \"type\" | \"checked\"> & {\n checked?: boolean;\n size?: useBreakpointPropsType<number | \"small\" | \"medium\" | \"large\">;\n color?: useBreakpointPropsType<Omit<UseColorTemplateColor, \"default\">>;\n disabled?: useBreakpointPropsType<boolean>;\n trackSize?: useBreakpointPropsType<number>;\n icon?: useBreakpointPropsType<ReactElement>;\n slotProps?: {\n thumb?: Omit<TagProps, 'children'>;\n track?: Omit<TagProps, 'children'>;\n }\n}\n\nconst Switch = React.forwardRef((props: SwitchProps, ref?: React.Ref<any>) => {\n let [{ size, checked, color, disabled, icon, onChange, trackSize, slotProps, ...rest }] = useInterface<any>(\"Switch\", props, {})\n const _p: any = {}\n if (size) _p.size = size\n if (color) _p.color = color\n if (disabled) _p.disabled = disabled\n if (trackSize) _p.trackSize = trackSize\n if (icon) _p.icon = icon\n const p: any = useBreakpointProps(_p)\n size = p.size ?? \"medium\"\n color = p.color ?? \"brand\"\n disabled = p.disabled\n trackSize = p.trackSize\n icon = p.icon\n\n const [c, set] = useState(false)\n checked ??= c\n\n onChange = onChange || (() => set(!c));\n\n let sizes: any = {\n small: 32,\n medium: 48,\n large: 60\n }\n let _size = sizes[size as any] || size\n\n let height = (_size / 2)\n trackSize ??= height + 4\n let isNormalSize = (height + 4) === trackSize\n let transform = checked ? \"92%\" : \"8%\"\n if (!isNormalSize) {\n transform = checked ? \"100%\" : \"-10%\"\n }\n\n return (\n <Tag\n disabled={disabled}\n sxr={{\n width: _size,\n height: height,\n position: \"relative\",\n cursor: \"pointer\",\n display: \"inline-block\"\n }}\n onClick={onChange}\n >\n <Tag\n {...slotProps?.track}\n baseClass='switch-track-bar'\n sxr={{\n width: _size,\n height: trackSize,\n borderRadius: height,\n position: 'absolute',\n top: \"50%\",\n transform: \"translateY(-50%)\",\n bgcolor: checked ? color : \"divider\",\n\n }}\n >\n </Tag>\n <Tag\n {...slotProps?.thumb}\n baseClass='switch-thumb'\n sxr={{\n transition: \"all .25s\",\n width: height,\n height: height,\n radius: height,\n bgcolor: \"#FFFFFF\",\n position: \"absolute\",\n top: \"50%\",\n border: isNormalSize ? 0 : 1,\n left: 0,\n transform: `translate(${transform}, -50%)`,\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\"\n }}\n >\n {\n icon\n }\n </Tag>\n <Tag\n {...rest}\n component='input'\n ref={ref}\n type=\"radio\"\n readOnly\n checked={checked}\n sxr={{\n display: \"none!important\"\n }}\n />\n </Tag>\n )\n})\n\nexport default Switch\n"],"names":[],"mappings":";;;;;;AAmBA;;AACI;;AAEA;AAAU;AACV;AAAW;AACX;AAAc;AACd;AAAe;AACf;AAAU;AACV;AACA;AACA;AACA;AACA;AACA;;;AAKA;AAEA;AACI;AACA;AACA;;;AAIJ;;;;;;;;AAYY;AACA;AACA;AACA;AACA;;AAQI;AACA;AACA;AACA;AACA;AACA;;AAGH;AAOG;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;;AAeA;;AAKpB;;"}
1
+ {"version":3,"file":"index.js","sources":["../../src/Switch/index.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport React, { ReactElement, useState } from 'react';\r\nimport { Tag, TagProps, useBreakpointProps, UseColorTemplateColor, useInterface, useBreakpointPropsType } from '@xanui/core';\r\n\r\n\r\nexport type SwitchProps = Omit<TagProps<\"input\">, \"color\" | \"size\" | \"component\" | \"type\" | \"checked\"> & {\r\n checked?: boolean;\r\n size?: useBreakpointPropsType<number | \"small\" | \"medium\" | \"large\">;\r\n color?: useBreakpointPropsType<Omit<UseColorTemplateColor, \"default\">>;\r\n disabled?: useBreakpointPropsType<boolean>;\r\n trackSize?: useBreakpointPropsType<number>;\r\n icon?: useBreakpointPropsType<ReactElement>;\r\n slotProps?: {\r\n thumb?: Omit<TagProps, 'children'>;\r\n track?: Omit<TagProps, 'children'>;\r\n }\r\n}\r\n\r\nconst Switch = React.forwardRef((props: SwitchProps, ref?: React.Ref<any>) => {\r\n let [{ size, checked, color, disabled, icon, onChange, trackSize, slotProps, ...rest }] = useInterface<any>(\"Switch\", props, {})\r\n const _p: any = {}\r\n if (size) _p.size = size\r\n if (color) _p.color = color\r\n if (disabled) _p.disabled = disabled\r\n if (trackSize) _p.trackSize = trackSize\r\n if (icon) _p.icon = icon\r\n const p: any = useBreakpointProps(_p)\r\n size = p.size ?? \"medium\"\r\n color = p.color ?? \"brand\"\r\n disabled = p.disabled\r\n trackSize = p.trackSize\r\n icon = p.icon\r\n\r\n const [c, set] = useState(false)\r\n checked ??= c\r\n\r\n onChange = onChange || (() => set(!c));\r\n\r\n let sizes: any = {\r\n small: 32,\r\n medium: 48,\r\n large: 60\r\n }\r\n let _size = sizes[size as any] || size\r\n\r\n let height = (_size / 2)\r\n trackSize ??= height + 4\r\n let isNormalSize = (height + 4) === trackSize\r\n let transform = checked ? \"92%\" : \"8%\"\r\n if (!isNormalSize) {\r\n transform = checked ? \"100%\" : \"-10%\"\r\n }\r\n\r\n return (\r\n <Tag\r\n disabled={disabled}\r\n sxr={{\r\n width: _size,\r\n height: height,\r\n position: \"relative\",\r\n cursor: \"pointer\",\r\n display: \"inline-block\"\r\n }}\r\n onClick={onChange}\r\n >\r\n <Tag\r\n {...slotProps?.track}\r\n baseClass='switch-track-bar'\r\n sxr={{\r\n width: _size,\r\n height: trackSize,\r\n borderRadius: height,\r\n position: 'absolute',\r\n top: \"50%\",\r\n transform: \"translateY(-50%)\",\r\n bgcolor: checked ? color : \"divider\",\r\n\r\n }}\r\n >\r\n </Tag>\r\n <Tag\r\n {...slotProps?.thumb}\r\n baseClass='switch-thumb'\r\n sxr={{\r\n transition: \"all .25s\",\r\n width: height,\r\n height: height,\r\n radius: height,\r\n bgcolor: \"#FFFFFF\",\r\n position: \"absolute\",\r\n top: \"50%\",\r\n border: isNormalSize ? 0 : 1,\r\n left: 0,\r\n transform: `translate(${transform}, -50%)`,\r\n display: \"flex\",\r\n justifyContent: \"center\",\r\n alignItems: \"center\"\r\n }}\r\n >\r\n {\r\n icon\r\n }\r\n </Tag>\r\n <Tag\r\n {...rest}\r\n component='input'\r\n ref={ref}\r\n type=\"radio\"\r\n readOnly\r\n checked={checked}\r\n sxr={{\r\n display: \"none!important\"\r\n }}\r\n />\r\n </Tag>\r\n )\r\n})\r\n\r\nexport default Switch\r\n"],"names":[],"mappings":";;;;;;AAmBA;;AACI;;AAEA;AAAU;AACV;AAAW;AACX;AAAc;AACd;AAAe;AACf;AAAU;AACV;AACA;AACA;AACA;AACA;AACA;;;AAKA;AAEA;AACI;AACA;AACA;;;AAIJ;;;;;;;;AAYY;AACA;AACA;AACA;AACA;;AAQI;AACA;AACA;AACA;AACA;AACA;;AAGH;AAOG;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;;AAeA;;AAKpB;;"}
package/Tab/index.cjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.cjs","sources":["../../src/Tab/index.tsx"],"sourcesContent":["\"use client\";\n\nimport React from 'react'\nimport { TagComponentType, useInterface } from '@xanui/core';\nimport Button, { ButtonProps } from '../Button';\n\nexport type TabProps<T extends TagComponentType = \"button\"> = ButtonProps<T> & {\n value?: string | number\n}\n\nconst Tab = React.forwardRef(<T extends TagComponentType = \"div\">({ children, ...props }: TabProps<T>, ref: React.Ref<any>) => {\n let [_props] = useInterface<any>(\"Tab\", props, {})\n return (\n <Button\n {..._props}\n classNames={[\"tab\", ...(_props?.classNames || [])]}\n ref={ref}\n >\n {children}\n </Button>\n )\n})\n\nexport default Tab"],"names":[],"mappings":";;;;;;;;;AAUA;AAAkE;AAC9D;AACA;AASJ;;"}
1
+ {"version":3,"file":"index.cjs","sources":["../../src/Tab/index.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport React from 'react'\r\nimport { TagComponentType, useInterface } from '@xanui/core';\r\nimport Button, { ButtonProps } from '../Button';\r\n\r\nexport type TabProps<T extends TagComponentType = \"button\"> = ButtonProps<T> & {\r\n value?: string | number\r\n}\r\n\r\nconst Tab = React.forwardRef(<T extends TagComponentType = \"div\">({ children, ...props }: TabProps<T>, ref: React.Ref<any>) => {\r\n let [_props] = useInterface<any>(\"Tab\", props, {})\r\n return (\r\n <Button\r\n {..._props}\r\n classNames={[\"tab\", ...(_props?.classNames || [])]}\r\n ref={ref}\r\n >\r\n {children}\r\n </Button>\r\n )\r\n})\r\n\r\nexport default Tab"],"names":[],"mappings":";;;;;;;;;AAUA;AAAkE;AAC9D;AACA;AASJ;;"}
package/Tab/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../../src/Tab/index.tsx"],"sourcesContent":["\"use client\";\n\nimport React from 'react'\nimport { TagComponentType, useInterface } from '@xanui/core';\nimport Button, { ButtonProps } from '../Button';\n\nexport type TabProps<T extends TagComponentType = \"button\"> = ButtonProps<T> & {\n value?: string | number\n}\n\nconst Tab = React.forwardRef(<T extends TagComponentType = \"div\">({ children, ...props }: TabProps<T>, ref: React.Ref<any>) => {\n let [_props] = useInterface<any>(\"Tab\", props, {})\n return (\n <Button\n {..._props}\n classNames={[\"tab\", ...(_props?.classNames || [])]}\n ref={ref}\n >\n {children}\n </Button>\n )\n})\n\nexport default Tab"],"names":[],"mappings":";;;;;;;AAUA;AAAkE;AAC9D;AACA;AASJ;;"}
1
+ {"version":3,"file":"index.js","sources":["../../src/Tab/index.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport React from 'react'\r\nimport { TagComponentType, useInterface } from '@xanui/core';\r\nimport Button, { ButtonProps } from '../Button';\r\n\r\nexport type TabProps<T extends TagComponentType = \"button\"> = ButtonProps<T> & {\r\n value?: string | number\r\n}\r\n\r\nconst Tab = React.forwardRef(<T extends TagComponentType = \"div\">({ children, ...props }: TabProps<T>, ref: React.Ref<any>) => {\r\n let [_props] = useInterface<any>(\"Tab\", props, {})\r\n return (\r\n <Button\r\n {..._props}\r\n classNames={[\"tab\", ...(_props?.classNames || [])]}\r\n ref={ref}\r\n >\r\n {children}\r\n </Button>\r\n )\r\n})\r\n\r\nexport default Tab"],"names":[],"mappings":";;;;;;;AAUA;AAAkE;AAC9D;AACA;AASJ;;"}