@dxos/react-ui 0.8.4-main.d05539e30a → 0.8.4-main.d9fc60f731

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 (375) hide show
  1. package/dist/lib/browser/chunk-5SPBSIWS.mjs +33 -0
  2. package/dist/lib/browser/chunk-5SPBSIWS.mjs.map +7 -0
  3. package/dist/lib/browser/chunk-KVJDKHLF.mjs +1613 -0
  4. package/dist/lib/browser/chunk-KVJDKHLF.mjs.map +7 -0
  5. package/dist/lib/browser/index.mjs +2403 -1562
  6. package/dist/lib/browser/index.mjs.map +4 -4
  7. package/dist/lib/browser/meta.json +1 -1
  8. package/dist/lib/browser/testing/index.mjs +9 -6
  9. package/dist/lib/browser/testing/index.mjs.map +3 -3
  10. package/dist/lib/browser/translations.mjs +1 -1
  11. package/dist/lib/node-esm/chunk-5JYHWJDZ.mjs +1615 -0
  12. package/dist/lib/node-esm/chunk-5JYHWJDZ.mjs.map +7 -0
  13. package/dist/lib/node-esm/{chunk-XCFLA74M.mjs → chunk-FPVTVXND.mjs} +11 -2
  14. package/dist/lib/node-esm/chunk-FPVTVXND.mjs.map +7 -0
  15. package/dist/lib/node-esm/index.mjs +2403 -1562
  16. package/dist/lib/node-esm/index.mjs.map +4 -4
  17. package/dist/lib/node-esm/meta.json +1 -1
  18. package/dist/lib/node-esm/testing/index.mjs +9 -6
  19. package/dist/lib/node-esm/testing/index.mjs.map +3 -3
  20. package/dist/lib/node-esm/translations.mjs +1 -1
  21. package/dist/types/src/components/Avatars/Avatar.theme.d.ts +11 -0
  22. package/dist/types/src/components/Avatars/Avatar.theme.d.ts.map +1 -0
  23. package/dist/types/src/components/Breadcrumb/Breadcrumb.d.ts +5 -1
  24. package/dist/types/src/components/Breadcrumb/Breadcrumb.d.ts.map +1 -1
  25. package/dist/types/src/components/Breadcrumb/Breadcrumb.theme.d.ts +4 -0
  26. package/dist/types/src/components/Breadcrumb/Breadcrumb.theme.d.ts.map +1 -0
  27. package/dist/types/src/components/Button/Button.d.ts +1 -1
  28. package/dist/types/src/components/Button/Button.d.ts.map +1 -1
  29. package/dist/types/src/components/Button/Button.theme.d.ts +11 -0
  30. package/dist/types/src/components/Button/Button.theme.d.ts.map +1 -0
  31. package/dist/types/src/components/Button/IconButton.stories.d.ts +1 -0
  32. package/dist/types/src/components/Button/IconButton.stories.d.ts.map +1 -1
  33. package/dist/types/src/components/Button/IconButton.theme.d.ts +8 -0
  34. package/dist/types/src/components/Button/IconButton.theme.d.ts.map +1 -0
  35. package/dist/types/src/components/Calendar/Calendar.d.ts +33 -0
  36. package/dist/types/src/components/Calendar/Calendar.d.ts.map +1 -0
  37. package/dist/types/src/components/Calendar/Calendar.stories.d.ts +9 -0
  38. package/dist/types/src/components/Calendar/Calendar.stories.d.ts.map +1 -0
  39. package/dist/types/src/components/Calendar/Calendar.theme.d.ts +4 -0
  40. package/dist/types/src/components/Calendar/Calendar.theme.d.ts.map +1 -0
  41. package/dist/types/src/components/Calendar/index.d.ts +2 -0
  42. package/dist/types/src/components/Calendar/index.d.ts.map +1 -0
  43. package/dist/types/src/components/Card/Card.d.ts +51 -44
  44. package/dist/types/src/components/Card/Card.d.ts.map +1 -1
  45. package/dist/types/src/components/Card/Card.stories.d.ts +1 -0
  46. package/dist/types/src/components/Card/Card.stories.d.ts.map +1 -1
  47. package/dist/types/src/components/Card/Card.theme.d.ts +12 -0
  48. package/dist/types/src/components/Card/Card.theme.d.ts.map +1 -0
  49. package/dist/types/src/components/Carousel/Carousel.d.ts +2 -6
  50. package/dist/types/src/components/Carousel/Carousel.d.ts.map +1 -1
  51. package/dist/types/src/components/Clipboard/CopyButton.d.ts.map +1 -1
  52. package/dist/types/src/components/Clipboard/index.d.ts +1 -1
  53. package/dist/types/src/{primitives → components}/Column/Column.d.ts.map +1 -1
  54. package/dist/types/src/{primitives → components}/Column/Column.stories.d.ts.map +1 -1
  55. package/dist/types/src/components/Column/Column.theme.d.ts +9 -0
  56. package/dist/types/src/components/Column/Column.theme.d.ts.map +1 -0
  57. package/dist/types/src/components/Column/index.d.ts +3 -0
  58. package/dist/types/src/components/Column/index.d.ts.map +1 -0
  59. package/dist/types/src/components/Column/withColumn.d.ts +21 -0
  60. package/dist/types/src/components/Column/withColumn.d.ts.map +1 -0
  61. package/dist/types/src/components/DatePicker/DatePicker.d.ts +72 -0
  62. package/dist/types/src/components/DatePicker/DatePicker.d.ts.map +1 -0
  63. package/dist/types/src/components/DatePicker/DatePicker.stories.d.ts +10 -0
  64. package/dist/types/src/components/DatePicker/DatePicker.stories.d.ts.map +1 -0
  65. package/dist/types/src/components/DatePicker/DatePicker.theme.d.ts +6 -0
  66. package/dist/types/src/components/DatePicker/DatePicker.theme.d.ts.map +1 -0
  67. package/dist/types/src/components/DatePicker/index.d.ts +2 -0
  68. package/dist/types/src/components/DatePicker/index.d.ts.map +1 -0
  69. package/dist/types/src/components/Dialog/AlertDialog.d.ts +8 -8
  70. package/dist/types/src/components/Dialog/AlertDialog.d.ts.map +1 -1
  71. package/dist/types/src/components/Dialog/Dialog.d.ts +9 -7
  72. package/dist/types/src/components/Dialog/Dialog.d.ts.map +1 -1
  73. package/dist/types/src/components/Dialog/Dialog.theme.d.ts +10 -0
  74. package/dist/types/src/components/Dialog/Dialog.theme.d.ts.map +1 -0
  75. package/dist/types/src/components/ErrorFallback/ErrorFallback.d.ts.map +1 -1
  76. package/dist/types/src/components/ErrorFallback/ErrorStack.d.ts.map +1 -1
  77. package/dist/types/src/components/Focus/Focus.d.ts.map +1 -1
  78. package/dist/types/src/components/Focus/Focus.theme.d.ts +6 -0
  79. package/dist/types/src/components/Focus/Focus.theme.d.ts.map +1 -0
  80. package/dist/types/src/components/Icon/Icon.theme.d.ts +11 -0
  81. package/dist/types/src/components/Icon/Icon.theme.d.ts.map +1 -0
  82. package/dist/types/src/components/Icon/IconBlock.d.ts +15 -0
  83. package/dist/types/src/components/Icon/IconBlock.d.ts.map +1 -0
  84. package/dist/types/src/components/Icon/index.d.ts +1 -0
  85. package/dist/types/src/components/Icon/index.d.ts.map +1 -1
  86. package/dist/types/src/components/Input/Input.d.ts +81 -3
  87. package/dist/types/src/components/Input/Input.d.ts.map +1 -1
  88. package/dist/types/src/components/Input/Input.stories.d.ts +14 -3
  89. package/dist/types/src/components/Input/Input.stories.d.ts.map +1 -1
  90. package/dist/types/src/components/Input/Input.theme.d.ts +115 -0
  91. package/dist/types/src/components/Input/Input.theme.d.ts.map +1 -0
  92. package/dist/types/src/components/Input/SegmentedInput.d.ts +79 -0
  93. package/dist/types/src/components/Input/SegmentedInput.d.ts.map +1 -0
  94. package/dist/types/src/components/Input/constants.d.ts +2 -0
  95. package/dist/types/src/components/Input/constants.d.ts.map +1 -0
  96. package/dist/types/src/components/Input/index.d.ts +2 -0
  97. package/dist/types/src/components/Input/index.d.ts.map +1 -1
  98. package/dist/types/src/components/Link/Link.theme.d.ts +6 -0
  99. package/dist/types/src/components/Link/Link.theme.d.ts.map +1 -0
  100. package/dist/types/src/components/List/List.d.ts.map +1 -1
  101. package/dist/types/src/components/List/List.theme.d.ts +7 -0
  102. package/dist/types/src/components/List/List.theme.d.ts.map +1 -0
  103. package/dist/types/src/components/List/Treegrid.d.ts +1 -1
  104. package/dist/types/src/components/List/Treegrid.d.ts.map +1 -1
  105. package/dist/types/src/components/List/Treegrid.theme.d.ts +7 -0
  106. package/dist/types/src/components/List/Treegrid.theme.d.ts.map +1 -0
  107. package/dist/types/src/components/Main/Main.d.ts +2 -2
  108. package/dist/types/src/components/Main/Main.d.ts.map +1 -1
  109. package/dist/types/src/components/Main/Main.theme.d.ts +20 -0
  110. package/dist/types/src/components/Main/Main.theme.d.ts.map +1 -0
  111. package/dist/types/src/components/Main/constants.d.ts +3 -0
  112. package/dist/types/src/components/Main/constants.d.ts.map +1 -0
  113. package/dist/types/src/components/Main/index.d.ts +1 -0
  114. package/dist/types/src/components/Main/index.d.ts.map +1 -1
  115. package/dist/types/src/components/MediaPlayer/MediaPlayer.d.ts +9 -12
  116. package/dist/types/src/components/MediaPlayer/MediaPlayer.d.ts.map +1 -1
  117. package/dist/types/src/components/MediaPlayer/MediaPlayer.stories.d.ts +1 -1
  118. package/dist/types/src/components/Menu/ContextMenu.stories.d.ts.map +1 -1
  119. package/dist/types/src/components/Menu/DropdownMenu.stories.d.ts.map +1 -1
  120. package/dist/types/src/components/Menu/Menu.theme.d.ts +7 -0
  121. package/dist/types/src/components/Menu/Menu.theme.d.ts.map +1 -0
  122. package/dist/types/src/components/Message/Message.d.ts +2 -2
  123. package/dist/types/src/components/Message/Message.d.ts.map +1 -1
  124. package/dist/types/src/components/Message/Message.stories.d.ts +5 -1
  125. package/dist/types/src/components/Message/Message.stories.d.ts.map +1 -1
  126. package/dist/types/src/components/Message/Message.theme.d.ts +7 -0
  127. package/dist/types/src/components/Message/Message.theme.d.ts.map +1 -0
  128. package/dist/types/src/{primitives → components}/Panel/Panel.d.ts +1 -1
  129. package/dist/types/src/components/Panel/Panel.d.ts.map +1 -0
  130. package/dist/types/src/{primitives → components}/Panel/Panel.stories.d.ts.map +1 -1
  131. package/dist/types/src/components/Panel/Panel.theme.d.ts +13 -0
  132. package/dist/types/src/components/Panel/Panel.theme.d.ts.map +1 -0
  133. package/dist/types/src/components/Panel/index.d.ts.map +1 -0
  134. package/dist/types/src/components/Popover/Popover.theme.d.ts +8 -0
  135. package/dist/types/src/components/Popover/Popover.theme.d.ts.map +1 -0
  136. package/dist/types/src/components/ScrollArea/ScrollArea.d.ts.map +1 -1
  137. package/dist/types/src/components/ScrollArea/ScrollArea.theme.d.ts +17 -0
  138. package/dist/types/src/components/ScrollArea/ScrollArea.theme.d.ts.map +1 -0
  139. package/dist/types/src/components/ScrollArea/index.d.ts +1 -0
  140. package/dist/types/src/components/ScrollArea/index.d.ts.map +1 -1
  141. package/dist/types/src/components/ScrollArea/scrollbar.d.ts +18 -0
  142. package/dist/types/src/components/ScrollArea/scrollbar.d.ts.map +1 -0
  143. package/dist/types/src/components/ScrollContainer/ScrollContainer.d.ts +13 -19
  144. package/dist/types/src/components/ScrollContainer/ScrollContainer.d.ts.map +1 -1
  145. package/dist/types/src/components/Select/Select.d.ts.map +1 -1
  146. package/dist/types/src/components/Select/Select.theme.d.ts +6 -0
  147. package/dist/types/src/components/Select/Select.theme.d.ts.map +1 -0
  148. package/dist/types/src/components/Separator/Separator.theme.d.ts +7 -0
  149. package/dist/types/src/components/Separator/Separator.theme.d.ts.map +1 -0
  150. package/dist/types/src/components/Skeleton/Skeleton.theme.d.ts +6 -0
  151. package/dist/types/src/components/Skeleton/Skeleton.theme.d.ts.map +1 -0
  152. package/dist/types/src/components/Splitter/Splitter.d.ts +3 -5
  153. package/dist/types/src/components/Splitter/Splitter.d.ts.map +1 -1
  154. package/dist/types/src/components/Splitter/Splitter.theme.d.ts +4 -0
  155. package/dist/types/src/components/Splitter/Splitter.theme.d.ts.map +1 -0
  156. package/dist/types/src/components/Status/Status.d.ts +1 -1
  157. package/dist/types/src/components/Status/Status.d.ts.map +1 -1
  158. package/dist/types/src/components/Status/Status.theme.d.ts +7 -0
  159. package/dist/types/src/components/Status/Status.theme.d.ts.map +1 -0
  160. package/dist/types/src/components/Tag/Tag.theme.d.ts +6 -0
  161. package/dist/types/src/components/Tag/Tag.theme.d.ts.map +1 -0
  162. package/dist/types/src/components/Toast/Toast.d.ts +13 -10
  163. package/dist/types/src/components/Toast/Toast.d.ts.map +1 -1
  164. package/dist/types/src/components/Toast/Toast.stories.d.ts +5 -2
  165. package/dist/types/src/components/Toast/Toast.stories.d.ts.map +1 -1
  166. package/dist/types/src/components/Toast/Toast.theme.d.ts +4 -0
  167. package/dist/types/src/components/Toast/Toast.theme.d.ts.map +1 -0
  168. package/dist/types/src/components/Toolbar/Toolbar.d.ts +19 -7
  169. package/dist/types/src/components/Toolbar/Toolbar.d.ts.map +1 -1
  170. package/dist/types/src/components/Toolbar/Toolbar.theme.d.ts +8 -0
  171. package/dist/types/src/components/Toolbar/Toolbar.theme.d.ts.map +1 -0
  172. package/dist/types/src/components/Tooltip/Tooltip.stories.d.ts.map +1 -1
  173. package/dist/types/src/components/Tooltip/Tooltip.theme.d.ts +6 -0
  174. package/dist/types/src/components/Tooltip/Tooltip.theme.d.ts.map +1 -0
  175. package/dist/types/src/components/Tooltip/index.d.ts +1 -0
  176. package/dist/types/src/components/Tooltip/index.d.ts.map +1 -1
  177. package/dist/types/src/components/Tooltip/tooltipContent.d.ts +4 -0
  178. package/dist/types/src/components/Tooltip/tooltipContent.d.ts.map +1 -0
  179. package/dist/types/src/components/index.d.ts +5 -4
  180. package/dist/types/src/components/index.d.ts.map +1 -1
  181. package/dist/types/src/exemplars/generics.stories.d.ts.map +1 -1
  182. package/dist/types/src/exemplars/slot.stories.d.ts.map +1 -1
  183. package/dist/types/src/hooks/useTranslationsContext.d.ts +1 -1
  184. package/dist/types/src/index.d.ts +1 -0
  185. package/dist/types/src/index.d.ts.map +1 -1
  186. package/dist/types/src/playground/Custom.stories.d.ts.map +1 -1
  187. package/dist/types/src/primitives/Container/Container.d.ts.map +1 -1
  188. package/dist/types/src/{components → primitives}/DensityProvider/DensityProvider.d.ts.map +1 -1
  189. package/dist/types/src/primitives/DensityProvider/index.d.ts.map +1 -0
  190. package/dist/types/src/{components → primitives}/ElevationProvider/ElevationProvider.d.ts.map +1 -1
  191. package/dist/types/src/primitives/ElevationProvider/index.d.ts.map +1 -0
  192. package/dist/types/src/primitives/Flex/Flex.d.ts.map +1 -1
  193. package/dist/types/src/primitives/Grid/Grid.d.ts.map +1 -1
  194. package/dist/types/src/{components → primitives}/ThemeProvider/ThemeProvider.d.ts.map +1 -1
  195. package/dist/types/src/{components → primitives}/ThemeProvider/ThemeProvider.stories.d.ts.map +1 -1
  196. package/dist/types/src/{components → primitives}/ThemeProvider/TranslationsProvider.d.ts.map +1 -1
  197. package/dist/types/src/{components → primitives}/ThemeProvider/index.d.ts +1 -1
  198. package/dist/types/src/primitives/ThemeProvider/index.d.ts.map +1 -0
  199. package/dist/types/src/primitives/index.d.ts +3 -2
  200. package/dist/types/src/primitives/index.d.ts.map +1 -1
  201. package/dist/types/src/testing/decorators/withTheme.d.ts +5 -1
  202. package/dist/types/src/testing/decorators/withTheme.d.ts.map +1 -1
  203. package/dist/types/src/theme/bindTheme.d.ts +3 -0
  204. package/dist/types/src/theme/bindTheme.d.ts.map +1 -0
  205. package/dist/types/src/theme/defaultTheme.d.ts +4 -0
  206. package/dist/types/src/theme/defaultTheme.d.ts.map +1 -0
  207. package/dist/types/src/theme/index.d.ts +31 -0
  208. package/dist/types/src/theme/index.d.ts.map +1 -0
  209. package/dist/types/src/translations.d.ts +9 -0
  210. package/dist/types/src/translations.d.ts.map +1 -1
  211. package/dist/types/src/util/index.d.ts +2 -1
  212. package/dist/types/src/util/index.d.ts.map +1 -1
  213. package/dist/types/src/util/mobile.d.ts +5 -0
  214. package/dist/types/src/util/mobile.d.ts.map +1 -0
  215. package/dist/types/src/util/slots.d.ts +57 -0
  216. package/dist/types/src/util/slots.d.ts.map +1 -0
  217. package/dist/types/src/util/usePx.d.ts.map +1 -1
  218. package/dist/types/tsconfig.tsbuildinfo +1 -1
  219. package/package.json +19 -17
  220. package/src/components/Avatars/Avatar.theme.ts +93 -0
  221. package/src/components/Breadcrumb/Breadcrumb.stories.tsx +1 -1
  222. package/src/components/Breadcrumb/Breadcrumb.theme.ts +26 -0
  223. package/src/components/Breadcrumb/Breadcrumb.tsx +14 -2
  224. package/src/components/Button/Button.theme.ts +31 -0
  225. package/src/components/Button/Button.tsx +1 -1
  226. package/src/components/Button/IconButton.stories.tsx +50 -2
  227. package/src/components/Button/IconButton.theme.ts +21 -0
  228. package/src/components/Calendar/Calendar.stories.tsx +43 -0
  229. package/src/components/Calendar/Calendar.theme.ts +74 -0
  230. package/src/components/Calendar/Calendar.tsx +196 -0
  231. package/src/components/Calendar/index.ts +5 -0
  232. package/src/components/Card/Card.stories.tsx +40 -19
  233. package/src/components/Card/Card.theme.ts +93 -0
  234. package/src/components/Card/Card.tsx +121 -147
  235. package/src/components/Carousel/Carousel.tsx +2 -10
  236. package/src/components/Clipboard/CopyButton.tsx +1 -1
  237. package/src/{primitives → components}/Column/Column.stories.tsx +1 -1
  238. package/src/components/Column/Column.theme.ts +48 -0
  239. package/src/{primitives → components}/Column/Column.tsx +2 -1
  240. package/src/{primitives → components}/Column/index.ts +1 -0
  241. package/src/components/Column/withColumn.ts +27 -0
  242. package/src/components/DatePicker/DatePicker.stories.tsx +102 -0
  243. package/src/components/DatePicker/DatePicker.theme.ts +35 -0
  244. package/src/components/DatePicker/DatePicker.tsx +279 -0
  245. package/src/components/DatePicker/index.ts +5 -0
  246. package/src/components/Dialog/AlertDialog.tsx +12 -13
  247. package/src/components/Dialog/Dialog.stories.tsx +2 -2
  248. package/src/components/Dialog/Dialog.theme.ts +61 -0
  249. package/src/components/Dialog/Dialog.tsx +46 -17
  250. package/src/components/ErrorFallback/ErrorFallback.tsx +14 -8
  251. package/src/components/ErrorFallback/ErrorStack.tsx +12 -6
  252. package/src/components/Focus/Focus.theme.ts +32 -0
  253. package/src/components/Focus/Focus.tsx +1 -1
  254. package/src/components/Icon/Icon.theme.ts +45 -0
  255. package/src/components/Icon/IconBlock.tsx +38 -0
  256. package/src/components/Icon/index.ts +1 -0
  257. package/src/components/Image/Image.stories.tsx +1 -1
  258. package/src/components/Input/Input.stories.tsx +132 -29
  259. package/src/components/Input/Input.theme.ts +191 -0
  260. package/src/components/Input/Input.tsx +207 -2
  261. package/src/components/Input/SegmentedInput.tsx +454 -0
  262. package/src/components/Input/constants.ts +5 -0
  263. package/src/components/Input/index.ts +2 -0
  264. package/src/components/Link/Link.theme.ts +16 -0
  265. package/src/components/List/List.theme.ts +47 -0
  266. package/src/components/List/List.tsx +2 -2
  267. package/src/components/List/ListDropIndicator.tsx +1 -1
  268. package/src/components/List/TreeDropIndicator.tsx +3 -3
  269. package/src/components/List/Treegrid.theme.ts +35 -0
  270. package/src/components/List/Treegrid.tsx +3 -4
  271. package/src/components/Main/Main.theme.ts +29 -0
  272. package/src/components/Main/Main.tsx +9 -7
  273. package/src/components/Main/constants.ts +6 -0
  274. package/src/components/Main/index.ts +1 -0
  275. package/src/components/MediaPlayer/MediaPlayer.tsx +61 -36
  276. package/src/components/Menu/ContextMenu.stories.tsx +0 -3
  277. package/src/components/Menu/DropdownMenu.stories.tsx +0 -3
  278. package/src/components/Menu/DropdownMenu.tsx +15 -15
  279. package/src/components/Menu/Menu.theme.ts +48 -0
  280. package/src/components/Message/Message.stories.tsx +42 -4
  281. package/src/components/Message/Message.theme.ts +44 -0
  282. package/src/components/Message/Message.tsx +63 -20
  283. package/src/{primitives → components}/Panel/Panel.stories.tsx +2 -3
  284. package/src/components/Panel/Panel.theme.ts +42 -0
  285. package/src/{primitives → components}/Panel/Panel.tsx +2 -1
  286. package/src/components/Popover/Popover.theme.ts +40 -0
  287. package/src/components/Popover/Popover.tsx +7 -7
  288. package/src/components/ScrollArea/ScrollArea.stories.tsx +1 -1
  289. package/src/components/ScrollArea/ScrollArea.theme.ts +107 -0
  290. package/src/components/ScrollArea/ScrollArea.tsx +3 -2
  291. package/src/components/ScrollArea/index.ts +1 -0
  292. package/src/components/ScrollArea/scrollbar.ts +21 -0
  293. package/src/components/ScrollContainer/ScrollContainer.stories.tsx +1 -1
  294. package/src/components/ScrollContainer/ScrollContainer.tsx +57 -55
  295. package/src/components/Select/Select.theme.ts +55 -0
  296. package/src/components/Select/Select.tsx +26 -10
  297. package/src/components/Separator/Separator.theme.ts +23 -0
  298. package/src/components/Skeleton/Skeleton.theme.ts +22 -0
  299. package/src/components/Splitter/Splitter.stories.tsx +1 -1
  300. package/src/components/Splitter/Splitter.theme.ts +18 -0
  301. package/src/components/Splitter/Splitter.tsx +10 -15
  302. package/src/components/Status/Status.theme.ts +31 -0
  303. package/src/components/Status/Status.tsx +1 -2
  304. package/src/components/Tag/Tag.theme.ts +22 -0
  305. package/src/components/Toast/Toast.stories.tsx +41 -20
  306. package/src/components/Toast/Toast.theme.ts +56 -0
  307. package/src/components/Toast/Toast.tsx +95 -27
  308. package/src/components/Toolbar/Toolbar.theme.ts +36 -0
  309. package/src/components/Toolbar/Toolbar.tsx +63 -13
  310. package/src/components/Tooltip/Tooltip.stories.tsx +0 -9
  311. package/src/components/Tooltip/Tooltip.theme.ts +19 -0
  312. package/src/components/Tooltip/Tooltip.tsx +4 -4
  313. package/src/components/Tooltip/index.ts +1 -0
  314. package/src/components/Tooltip/tooltipContent.ts +16 -0
  315. package/src/components/index.ts +5 -5
  316. package/src/exemplars/generics.stories.tsx +1 -2
  317. package/src/exemplars/slot.stories.tsx +2 -1
  318. package/src/hooks/useDensityContext.ts +1 -1
  319. package/src/hooks/useElevationContext.ts +1 -1
  320. package/src/hooks/useThemeContext.ts +1 -1
  321. package/src/hooks/useTranslationsContext.ts +1 -1
  322. package/src/index.ts +1 -0
  323. package/src/playground/Custom.stories.tsx +12 -32
  324. package/src/primitives/Container/Container.tsx +3 -1
  325. package/src/{components → primitives}/DensityProvider/DensityProvider.tsx +1 -1
  326. package/src/primitives/Flex/Flex.tsx +3 -1
  327. package/src/primitives/Grid/Grid.tsx +3 -1
  328. package/src/{components → primitives}/ThemeProvider/ThemeProvider.stories.tsx +1 -1
  329. package/src/{components → primitives}/ThemeProvider/ThemeProvider.tsx +1 -1
  330. package/src/{components → primitives}/ThemeProvider/index.ts +1 -1
  331. package/src/primitives/index.ts +4 -2
  332. package/src/testing/decorators/withLayoutVariants.tsx +1 -1
  333. package/src/testing/decorators/withTheme.tsx +21 -13
  334. package/src/theme/bindTheme.ts +13 -0
  335. package/src/theme/defaultTheme.ts +83 -0
  336. package/src/theme/index.ts +37 -0
  337. package/src/translations.ts +9 -0
  338. package/src/util/index.ts +2 -1
  339. package/src/util/mobile.ts +11 -0
  340. package/src/util/slots.ts +129 -0
  341. package/src/util/usePx.ts +4 -1
  342. package/dist/lib/browser/chunk-A5QCIG5R.mjs +0 -24
  343. package/dist/lib/browser/chunk-A5QCIG5R.mjs.map +0 -7
  344. package/dist/lib/browser/chunk-LY5XDQR5.mjs +0 -846
  345. package/dist/lib/browser/chunk-LY5XDQR5.mjs.map +0 -7
  346. package/dist/lib/node-esm/chunk-NGKLIKP3.mjs +0 -848
  347. package/dist/lib/node-esm/chunk-NGKLIKP3.mjs.map +0 -7
  348. package/dist/lib/node-esm/chunk-XCFLA74M.mjs.map +0 -7
  349. package/dist/types/src/components/DensityProvider/index.d.ts.map +0 -1
  350. package/dist/types/src/components/ElevationProvider/index.d.ts.map +0 -1
  351. package/dist/types/src/components/ThemeProvider/index.d.ts.map +0 -1
  352. package/dist/types/src/primitives/Column/index.d.ts +0 -2
  353. package/dist/types/src/primitives/Column/index.d.ts.map +0 -1
  354. package/dist/types/src/primitives/Panel/Panel.d.ts.map +0 -1
  355. package/dist/types/src/primitives/Panel/index.d.ts.map +0 -1
  356. package/dist/types/src/util/hasIosKeyboard.d.ts +0 -2
  357. package/dist/types/src/util/hasIosKeyboard.d.ts.map +0 -1
  358. package/src/util/hasIosKeyboard.ts +0 -8
  359. /package/dist/types/src/{primitives → components}/Column/Column.d.ts +0 -0
  360. /package/dist/types/src/{primitives → components}/Column/Column.stories.d.ts +0 -0
  361. /package/dist/types/src/{primitives → components}/Panel/Panel.stories.d.ts +0 -0
  362. /package/dist/types/src/{primitives → components}/Panel/index.d.ts +0 -0
  363. /package/dist/types/src/{components → primitives}/DensityProvider/DensityProvider.d.ts +0 -0
  364. /package/dist/types/src/{components → primitives}/DensityProvider/index.d.ts +0 -0
  365. /package/dist/types/src/{components → primitives}/ElevationProvider/ElevationProvider.d.ts +0 -0
  366. /package/dist/types/src/{components → primitives}/ElevationProvider/index.d.ts +0 -0
  367. /package/dist/types/src/{components → primitives}/ThemeProvider/ThemeProvider.d.ts +0 -0
  368. /package/dist/types/src/{components → primitives}/ThemeProvider/ThemeProvider.stories.d.ts +0 -0
  369. /package/dist/types/src/{components → primitives}/ThemeProvider/TranslationsProvider.d.ts +0 -0
  370. /package/src/{primitives → components}/Column/AUDIT.md +0 -0
  371. /package/src/{primitives → components}/Panel/index.ts +0 -0
  372. /package/src/{components → primitives}/DensityProvider/index.ts +0 -0
  373. /package/src/{components → primitives}/ElevationProvider/ElevationProvider.tsx +0 -0
  374. /package/src/{components → primitives}/ElevationProvider/index.ts +0 -0
  375. /package/src/{components → primitives}/ThemeProvider/TranslationsProvider.tsx +0 -0
@@ -1,846 +0,0 @@
1
- // src/components/DensityProvider/DensityProvider.tsx
2
- import React, { createContext } from "react";
3
- var DensityContext = /* @__PURE__ */ createContext({
4
- density: "fine"
5
- });
6
- var DensityProvider = ({ density, children }) => /* @__PURE__ */ React.createElement(DensityContext.Provider, {
7
- value: {
8
- density
9
- }
10
- }, children);
11
-
12
- // src/components/ElevationProvider/ElevationProvider.tsx
13
- import React2, { createContext as createContext2 } from "react";
14
- var ElevationContext = /* @__PURE__ */ createContext2({
15
- elevation: "base"
16
- });
17
- var ElevationProvider = ({ elevation, children }) => /* @__PURE__ */ React2.createElement(ElevationContext.Provider, {
18
- value: {
19
- elevation
20
- }
21
- }, children);
22
-
23
- // src/hooks/useElevationContext.ts
24
- import { useContext as useContext3 } from "react";
25
-
26
- // src/components/ThemeProvider/ThemeProvider.tsx
27
- import { createKeyborg } from "keyborg";
28
- import React4, { createContext as createContext4, useEffect as useEffect2, useMemo } from "react";
29
-
30
- // src/hooks/useThemeContext.ts
31
- import { useContext } from "react";
32
- import { raise } from "@dxos/debug";
33
- var useThemeContext = () => useContext(ThemeContext) ?? raise(new Error("Missing ThemeContext"));
34
-
35
- // src/hooks/useSafeArea.ts
36
- import { useCallback, useState } from "react";
37
- import { useViewportResize } from "@dxos/react-hooks";
38
- var initialSafeArea = {
39
- top: NaN,
40
- right: NaN,
41
- bottom: NaN,
42
- left: NaN
43
- };
44
- var useSafeArea = () => {
45
- const [padding, setPadding] = useState(initialSafeArea);
46
- const handleResize = useCallback(() => {
47
- setPadding({
48
- top: parseFloat(getComputedStyle(document.documentElement).getPropertyValue("--safe-area-top")),
49
- right: parseFloat(getComputedStyle(document.documentElement).getPropertyValue("--safe-area-right")),
50
- bottom: parseFloat(getComputedStyle(document.documentElement).getPropertyValue("--safe-area-bottom")),
51
- left: parseFloat(getComputedStyle(document.documentElement).getPropertyValue("--safe-area-left"))
52
- });
53
- }, []);
54
- useViewportResize(handleResize);
55
- return padding;
56
- };
57
-
58
- // src/components/ThemeProvider/TranslationsProvider.tsx
59
- import { enUS as dtLocaleEnUs } from "date-fns/locale";
60
- import i18Next from "i18next";
61
- import React3, { Suspense, createContext as createContext3, useContext as useContext2, useEffect, useState as useState2 } from "react";
62
- import { initReactI18next, useTranslation as useI18NextTranslation } from "react-i18next";
63
- var initialLng = "en-US";
64
- var initialNs = "dxos-common";
65
- var initialDtLocale = dtLocaleEnUs;
66
- var resources = {
67
- [initialLng]: {
68
- [initialNs]: {
69
- "loading translations": "Loading translations\u2026"
70
- }
71
- }
72
- };
73
- void i18Next.use(initReactI18next).init({
74
- resources,
75
- lng: initialLng,
76
- defaultNS: initialNs,
77
- interpolation: {
78
- escapeValue: false
79
- }
80
- });
81
- var TranslationsContext = /* @__PURE__ */ createContext3({
82
- appNs: initialNs,
83
- dtLocale: initialDtLocale
84
- });
85
- var useTranslation = (...args) => {
86
- const result = useI18NextTranslation(...args);
87
- const { dtLocale } = useContext2(TranslationsContext);
88
- return {
89
- ...result,
90
- dtLocale
91
- };
92
- };
93
- var TranslationsProvider = ({ fallback, resourceExtensions, children, appNs, dtLocale }) => {
94
- const [loaded, setLoaded] = useState2(false);
95
- useEffect(() => {
96
- setLoaded(false);
97
- if (resourceExtensions && resourceExtensions.length) {
98
- resourceExtensions.forEach((resource) => {
99
- Object.keys(resource).forEach((language) => {
100
- Object.keys(resource[language]).forEach((ns) => {
101
- i18Next.addResourceBundle(language, ns, resource[language][ns]);
102
- });
103
- });
104
- });
105
- }
106
- setLoaded(true);
107
- }, [
108
- resourceExtensions
109
- ]);
110
- return /* @__PURE__ */ React3.createElement(TranslationsContext.Provider, {
111
- value: {
112
- appNs: appNs ?? initialNs,
113
- dtLocale: dtLocale ?? initialDtLocale
114
- }
115
- }, /* @__PURE__ */ React3.createElement(Suspense, {
116
- fallback
117
- }, loaded ? children : fallback));
118
- };
119
-
120
- // src/util/hasIosKeyboard.ts
121
- var hasIosKeyboard = () => {
122
- return !!navigator.userAgent.match(/iP(ad|od|hone).+Safari/);
123
- };
124
-
125
- // src/components/ThemeProvider/ThemeProvider.tsx
126
- var ThemeContext = /* @__PURE__ */ createContext4(void 0);
127
- var ThemeProvider = ({ children, fallback = null, resourceExtensions, appNs, tx = (_path, _styleProps, ..._options) => void 0, themeMode = "dark", rootDensity = "fine", noCache, platform }) => {
128
- useEffect2(() => {
129
- if (document.defaultView) {
130
- const kb = createKeyborg(document.defaultView);
131
- kb.subscribe(handleInputModalityChange);
132
- return () => kb.unsubscribe(handleInputModalityChange);
133
- }
134
- }, []);
135
- const safeAreaPadding = useSafeArea();
136
- const contextValue = useMemo(() => ({
137
- tx,
138
- themeMode,
139
- hasIosKeyboard: hasIosKeyboard(),
140
- safeAreaPadding,
141
- noCache,
142
- platform
143
- }), [
144
- tx,
145
- themeMode,
146
- safeAreaPadding,
147
- noCache,
148
- platform
149
- ]);
150
- return /* @__PURE__ */ React4.createElement(ThemeContext.Provider, {
151
- value: contextValue
152
- }, /* @__PURE__ */ React4.createElement(TranslationsProvider, {
153
- fallback,
154
- resourceExtensions,
155
- appNs
156
- }, /* @__PURE__ */ React4.createElement(ElevationProvider, {
157
- elevation: "base"
158
- }, /* @__PURE__ */ React4.createElement(DensityProvider, {
159
- density: rootDensity
160
- }, children))));
161
- };
162
- var handleInputModalityChange = (isUsingKeyboard) => {
163
- if (isUsingKeyboard) {
164
- document.body.setAttribute("data-w-keyboard", "true");
165
- } else {
166
- document.body.removeAttribute("data-w-keyboard");
167
- }
168
- };
169
-
170
- // src/components/Tooltip/Tooltip.tsx
171
- import { composeEventHandlers } from "@radix-ui/primitive";
172
- import { useComposedRefs } from "@radix-ui/react-compose-refs";
173
- import { createContextScope } from "@radix-ui/react-context";
174
- import { DismissableLayer } from "@radix-ui/react-dismissable-layer";
175
- import { useId } from "@radix-ui/react-id";
176
- import * as PopperPrimitive from "@radix-ui/react-popper";
177
- import { createPopperScope } from "@radix-ui/react-popper";
178
- import { Portal as PortalPrimitive } from "@radix-ui/react-portal";
179
- import { Presence } from "@radix-ui/react-presence";
180
- import { Primitive } from "@radix-ui/react-primitive";
181
- import { Slottable } from "@radix-ui/react-slot";
182
- import { useControllableState } from "@radix-ui/react-use-controllable-state";
183
- import * as VisuallyHiddenPrimitive from "@radix-ui/react-visually-hidden";
184
- import React5, { forwardRef, useCallback as useCallback2, useEffect as useEffect3, useMemo as useMemo2, useRef, useState as useState3 } from "react";
185
- var [createTooltipContext, createTooltipScope] = createContextScope("Tooltip", [
186
- createPopperScope
187
- ]);
188
- var usePopperScope = createPopperScope();
189
- var DEFAULT_DELAY_DURATION = 700;
190
- var TOOLTIP_OPEN = "tooltip.open";
191
- var TOOLTIP_NAME = "Tooltip";
192
- var [TooltipContextProvider, useTooltipContext] = createTooltipContext(TOOLTIP_NAME);
193
- var TooltipProvider = (props) => {
194
- const { __scopeTooltip, children, open: openProp, defaultOpen = false, onOpenChange, disableHoverableContent = false, delayDuration = DEFAULT_DELAY_DURATION, skipDelayDuration = 300 } = props;
195
- const isOpenDelayedRef = useRef(true);
196
- const isPointerInTransitRef = useRef(false);
197
- const skipDelayTimerRef = useRef(0);
198
- useEffect3(() => {
199
- const skipDelayTimer = skipDelayTimerRef.current;
200
- return () => window.clearTimeout(skipDelayTimer);
201
- }, []);
202
- const popperScope = usePopperScope(__scopeTooltip);
203
- const [trigger, setTrigger] = useState3(null);
204
- const [content, setContent] = useState3(null);
205
- const [side, setSide] = useState3(void 0);
206
- const triggerRef = useRef(trigger);
207
- const handleTriggerChange = useCallback2((nextTrigger, nextContent, nextSide) => {
208
- setTrigger(nextTrigger);
209
- triggerRef.current = nextTrigger;
210
- setContent(nextContent ?? null);
211
- setSide(nextSide);
212
- }, []);
213
- const contentId = useId();
214
- const openTimerRef = useRef(0);
215
- const wasOpenDelayedRef = useRef(false);
216
- const handleOpenChange = useCallback2((open2) => {
217
- if (open2) {
218
- window.clearTimeout(skipDelayTimerRef.current);
219
- isOpenDelayedRef.current = false;
220
- document.dispatchEvent(new CustomEvent(TOOLTIP_OPEN));
221
- } else {
222
- window.clearTimeout(skipDelayTimerRef.current);
223
- skipDelayTimerRef.current = window.setTimeout(() => isOpenDelayedRef.current = true, skipDelayDuration);
224
- }
225
- onOpenChange?.(open2);
226
- }, [
227
- skipDelayDuration,
228
- onOpenChange
229
- ]);
230
- const [open = false, setOpen] = useControllableState({
231
- prop: openProp,
232
- defaultProp: defaultOpen,
233
- onChange: handleOpenChange
234
- });
235
- const stateAttribute = useMemo2(() => {
236
- return open ? wasOpenDelayedRef.current ? "delayed-open" : "instant-open" : "closed";
237
- }, [
238
- open
239
- ]);
240
- const handleOpen = useCallback2(() => {
241
- window.clearTimeout(openTimerRef.current);
242
- openTimerRef.current = 0;
243
- wasOpenDelayedRef.current = false;
244
- setOpen(true);
245
- }, [
246
- setOpen
247
- ]);
248
- const handleClose = useCallback2(() => {
249
- window.clearTimeout(openTimerRef.current);
250
- openTimerRef.current = 0;
251
- setOpen(false);
252
- }, [
253
- setOpen
254
- ]);
255
- const handleDelayedOpen = useCallback2(() => {
256
- window.clearTimeout(openTimerRef.current);
257
- openTimerRef.current = window.setTimeout(() => {
258
- wasOpenDelayedRef.current = true;
259
- setOpen(true);
260
- openTimerRef.current = 0;
261
- }, delayDuration);
262
- }, [
263
- delayDuration,
264
- setOpen
265
- ]);
266
- useEffect3(() => {
267
- return () => {
268
- if (openTimerRef.current) {
269
- window.clearTimeout(openTimerRef.current);
270
- openTimerRef.current = 0;
271
- }
272
- };
273
- }, []);
274
- const { tx } = useThemeContext();
275
- const elevation = useElevationContext();
276
- return /* @__PURE__ */ React5.createElement(PopperPrimitive.Root, popperScope, /* @__PURE__ */ React5.createElement(TooltipContextProvider, {
277
- scope: __scopeTooltip,
278
- contentId,
279
- open,
280
- stateAttribute,
281
- trigger,
282
- onTriggerChange: handleTriggerChange,
283
- onTriggerEnter: useCallback2(() => {
284
- if (isOpenDelayedRef.current) {
285
- handleDelayedOpen();
286
- } else {
287
- handleOpen();
288
- }
289
- }, [
290
- isOpenDelayedRef,
291
- handleDelayedOpen,
292
- handleOpen
293
- ]),
294
- onTriggerLeave: useCallback2(() => {
295
- if (disableHoverableContent) {
296
- handleClose();
297
- } else {
298
- window.clearTimeout(openTimerRef.current);
299
- openTimerRef.current = 0;
300
- }
301
- }, [
302
- handleClose,
303
- disableHoverableContent
304
- ]),
305
- onOpen: handleOpen,
306
- onClose: handleClose,
307
- disableHoverableContent,
308
- isPointerInTransitRef,
309
- onPointerInTransitChange: useCallback2((inTransit) => {
310
- isPointerInTransitRef.current = inTransit;
311
- }, [])
312
- }, /* @__PURE__ */ React5.createElement(TooltipContent, {
313
- side,
314
- className: tx("tooltip.content", {
315
- elevation
316
- })
317
- }, content, /* @__PURE__ */ React5.createElement(TooltipArrow, {
318
- className: tx("tooltip.arrow")
319
- })), /* @__PURE__ */ React5.createElement(TooltipVirtualTrigger, {
320
- virtualRef: triggerRef
321
- }), children));
322
- };
323
- TooltipProvider.displayName = TOOLTIP_NAME;
324
- var TooltipVirtualTrigger = ({ virtualRef, __scopeTooltip }) => {
325
- const popperScope = usePopperScope(__scopeTooltip);
326
- return /* @__PURE__ */ React5.createElement(PopperPrimitive.Anchor, {
327
- asChild: true,
328
- ...popperScope,
329
- virtualRef
330
- });
331
- };
332
- var TRIGGER_NAME = "TooltipTrigger";
333
- var TooltipTrigger = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
334
- const {
335
- __scopeTooltip,
336
- onInteract,
337
- // TODO(thure): Pass `delayDuration` into the context.
338
- delayDuration: _delayDuration,
339
- side,
340
- content,
341
- ...triggerProps
342
- } = props;
343
- const context = useTooltipContext(TRIGGER_NAME, __scopeTooltip);
344
- const ref = useRef(null);
345
- const composedRefs = useComposedRefs(forwardedRef, ref);
346
- const isPointerDownRef = useRef(false);
347
- const hasPointerMoveOpenedRef = useRef(false);
348
- const handlePointerUp = useCallback2(() => isPointerDownRef.current = false, []);
349
- useEffect3(() => {
350
- return () => document.removeEventListener("pointerup", handlePointerUp);
351
- }, [
352
- handlePointerUp
353
- ]);
354
- return /* @__PURE__ */ React5.createElement(Primitive.button, {
355
- // We purposefully avoid adding `type=button` here because tooltip triggers are also
356
- // commonly anchors and the anchor `type` attribute signifies MIME type.
357
- "aria-describedby": context.open ? context.contentId : void 0,
358
- "data-state": context.stateAttribute,
359
- ...triggerProps,
360
- ref: composedRefs,
361
- onPointerMove: composeEventHandlers(props.onPointerMove, (event) => {
362
- if (event.pointerType === "touch") {
363
- return;
364
- }
365
- if (!hasPointerMoveOpenedRef.current && !context.isPointerInTransitRef.current) {
366
- onInteract?.(event);
367
- if (event.defaultPrevented) {
368
- return;
369
- }
370
- context.onTriggerChange(ref.current, content, side);
371
- context.onTriggerEnter();
372
- hasPointerMoveOpenedRef.current = true;
373
- }
374
- }),
375
- onPointerLeave: composeEventHandlers(props.onPointerLeave, () => {
376
- context.onTriggerLeave();
377
- hasPointerMoveOpenedRef.current = false;
378
- }),
379
- onPointerDown: composeEventHandlers(props.onPointerDown, () => {
380
- if (context.open) {
381
- context.onClose();
382
- }
383
- isPointerDownRef.current = true;
384
- document.addEventListener("pointerup", handlePointerUp, {
385
- once: true
386
- });
387
- }),
388
- onFocus: props.onFocus,
389
- onBlur: composeEventHandlers(props.onBlur, context.onClose),
390
- onClick: composeEventHandlers(props.onClick, context.onClose)
391
- });
392
- });
393
- TooltipTrigger.displayName = TRIGGER_NAME;
394
- var PORTAL_NAME = "TooltipPortal";
395
- var [PortalProvider, usePortalContext] = createTooltipContext(PORTAL_NAME, {
396
- forceMount: void 0
397
- });
398
- var TooltipPortal = (props) => {
399
- const { __scopeTooltip, forceMount, children, container } = props;
400
- const context = useTooltipContext(PORTAL_NAME, __scopeTooltip);
401
- return /* @__PURE__ */ React5.createElement(PortalProvider, {
402
- scope: __scopeTooltip,
403
- forceMount
404
- }, /* @__PURE__ */ React5.createElement(Presence, {
405
- present: forceMount || context.open
406
- }, /* @__PURE__ */ React5.createElement(PortalPrimitive, {
407
- asChild: true,
408
- container
409
- }, children)));
410
- };
411
- TooltipPortal.displayName = PORTAL_NAME;
412
- var CONTENT_NAME = "TooltipContent";
413
- var TooltipContent = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
414
- const portalContext = usePortalContext(CONTENT_NAME, props.__scopeTooltip);
415
- const { forceMount = portalContext.forceMount, side = "top", ...contentProps } = props;
416
- const context = useTooltipContext(CONTENT_NAME, props.__scopeTooltip);
417
- return /* @__PURE__ */ React5.createElement(Presence, {
418
- present: forceMount || context.open
419
- }, context.disableHoverableContent ? /* @__PURE__ */ React5.createElement(TooltipContentImpl, {
420
- side,
421
- ...contentProps,
422
- ref: forwardedRef
423
- }) : /* @__PURE__ */ React5.createElement(TooltipContentHoverable, {
424
- side,
425
- ...contentProps,
426
- ref: forwardedRef
427
- }));
428
- });
429
- var TooltipContentHoverable = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
430
- const context = useTooltipContext(CONTENT_NAME, props.__scopeTooltip);
431
- const ref = useRef(null);
432
- const composedRefs = useComposedRefs(forwardedRef, ref);
433
- const [pointerGraceArea, setPointerGraceArea] = useState3(null);
434
- const { trigger, onClose } = context;
435
- const content = ref.current;
436
- const { onPointerInTransitChange } = context;
437
- const handleRemoveGraceArea = useCallback2(() => {
438
- setPointerGraceArea(null);
439
- onPointerInTransitChange(false);
440
- }, [
441
- onPointerInTransitChange
442
- ]);
443
- const handleCreateGraceArea = useCallback2((event, hoverTarget) => {
444
- const currentTarget = event.currentTarget;
445
- const exitPoint = {
446
- x: event.clientX,
447
- y: event.clientY
448
- };
449
- const exitSide = getExitSideFromRect(exitPoint, currentTarget.getBoundingClientRect());
450
- const paddedExitPoints = getPaddedExitPoints(exitPoint, exitSide);
451
- const hoverTargetPoints = getPointsFromRect(hoverTarget.getBoundingClientRect());
452
- const graceArea = getHull([
453
- ...paddedExitPoints,
454
- ...hoverTargetPoints
455
- ]);
456
- setPointerGraceArea(graceArea);
457
- onPointerInTransitChange(true);
458
- }, [
459
- onPointerInTransitChange
460
- ]);
461
- useEffect3(() => {
462
- return () => handleRemoveGraceArea();
463
- }, [
464
- handleRemoveGraceArea
465
- ]);
466
- useEffect3(() => {
467
- if (trigger && content) {
468
- const handleTriggerLeave = (event) => handleCreateGraceArea(event, content);
469
- const handleContentLeave = (event) => handleCreateGraceArea(event, trigger);
470
- trigger.addEventListener("pointerleave", handleTriggerLeave);
471
- content.addEventListener("pointerleave", handleContentLeave);
472
- return () => {
473
- trigger.removeEventListener("pointerleave", handleTriggerLeave);
474
- content.removeEventListener("pointerleave", handleContentLeave);
475
- };
476
- }
477
- }, [
478
- trigger,
479
- content,
480
- handleCreateGraceArea,
481
- handleRemoveGraceArea
482
- ]);
483
- useEffect3(() => {
484
- if (pointerGraceArea) {
485
- const handleTrackPointerGrace = (event) => {
486
- const target = event.target;
487
- const pointerPosition = {
488
- x: event.clientX,
489
- y: event.clientY
490
- };
491
- const hasEnteredTarget = trigger?.contains(target) || content?.contains(target);
492
- const isPointerOutsideGraceArea = !isPointInPolygon(pointerPosition, pointerGraceArea);
493
- if (hasEnteredTarget) {
494
- handleRemoveGraceArea();
495
- } else if (isPointerOutsideGraceArea) {
496
- handleRemoveGraceArea();
497
- onClose();
498
- }
499
- };
500
- document.addEventListener("pointermove", handleTrackPointerGrace);
501
- return () => document.removeEventListener("pointermove", handleTrackPointerGrace);
502
- }
503
- }, [
504
- trigger,
505
- content,
506
- pointerGraceArea,
507
- onClose,
508
- handleRemoveGraceArea
509
- ]);
510
- return /* @__PURE__ */ React5.createElement(TooltipContentImpl, {
511
- ...props,
512
- ref: composedRefs
513
- });
514
- });
515
- var [VisuallyHiddenContentContextProvider, useVisuallyHiddenContentContext] = createTooltipContext(TOOLTIP_NAME, {
516
- isInside: false
517
- });
518
- var TooltipContentImpl = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
519
- const { __scopeTooltip, children, "aria-label": ariaLabel, onEscapeKeyDown, onPointerDownOutside, ...contentProps } = props;
520
- const context = useTooltipContext(CONTENT_NAME, __scopeTooltip);
521
- const popperScope = usePopperScope(__scopeTooltip);
522
- const { onClose } = context;
523
- useEffect3(() => {
524
- document.addEventListener(TOOLTIP_OPEN, onClose);
525
- return () => document.removeEventListener(TOOLTIP_OPEN, onClose);
526
- }, [
527
- onClose
528
- ]);
529
- useEffect3(() => {
530
- if (context.trigger) {
531
- const handleScroll = (event) => {
532
- const target = event.target;
533
- if (target?.contains(context.trigger)) {
534
- onClose();
535
- }
536
- };
537
- window.addEventListener("scroll", handleScroll, {
538
- capture: true
539
- });
540
- return () => window.removeEventListener("scroll", handleScroll, {
541
- capture: true
542
- });
543
- }
544
- }, [
545
- context.trigger,
546
- onClose
547
- ]);
548
- return /* @__PURE__ */ React5.createElement(DismissableLayer, {
549
- asChild: true,
550
- disableOutsidePointerEvents: false,
551
- onEscapeKeyDown,
552
- onPointerDownOutside,
553
- onFocusOutside: (event) => event.preventDefault(),
554
- onDismiss: onClose
555
- }, /* @__PURE__ */ React5.createElement(PopperPrimitive.Content, {
556
- "data-state": context.stateAttribute,
557
- ...popperScope,
558
- ...contentProps,
559
- ref: forwardedRef,
560
- style: {
561
- ...contentProps.style,
562
- // re-namespace exposed content custom properties
563
- ...{
564
- "--radix-tooltip-content-transform-origin": "var(--radix-popper-transform-origin)",
565
- "--radix-tooltip-content-available-width": "var(--radix-popper-available-width)",
566
- "--radix-tooltip-content-available-height": "var(--radix-popper-available-height)",
567
- "--radix-tooltip-trigger-width": "var(--radix-popper-anchor-width)",
568
- "--radix-tooltip-trigger-height": "var(--radix-popper-anchor-height)"
569
- }
570
- }
571
- }, /* @__PURE__ */ React5.createElement(Slottable, null, children), /* @__PURE__ */ React5.createElement(VisuallyHiddenContentContextProvider, {
572
- scope: __scopeTooltip,
573
- isInside: true
574
- }, /* @__PURE__ */ React5.createElement(VisuallyHiddenPrimitive.Root, {
575
- id: context.contentId,
576
- role: "tooltip"
577
- }, ariaLabel || children))));
578
- });
579
- TooltipContent.displayName = CONTENT_NAME;
580
- var ARROW_NAME = "TooltipArrow";
581
- var TooltipArrow = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
582
- const { __scopeTooltip, ...arrowProps } = props;
583
- const popperScope = usePopperScope(__scopeTooltip);
584
- const visuallyHiddenContentContext = useVisuallyHiddenContentContext(ARROW_NAME, __scopeTooltip);
585
- return visuallyHiddenContentContext.isInside ? null : /* @__PURE__ */ React5.createElement(PopperPrimitive.Arrow, {
586
- ...popperScope,
587
- ...arrowProps,
588
- ref: forwardedRef
589
- });
590
- });
591
- TooltipArrow.displayName = ARROW_NAME;
592
- var getExitSideFromRect = (point, rect) => {
593
- const top = Math.abs(rect.top - point.y);
594
- const bottom = Math.abs(rect.bottom - point.y);
595
- const right = Math.abs(rect.right - point.x);
596
- const left = Math.abs(rect.left - point.x);
597
- switch (Math.min(top, bottom, right, left)) {
598
- case left:
599
- return "left";
600
- case right:
601
- return "right";
602
- case top:
603
- return "top";
604
- case bottom:
605
- return "bottom";
606
- default:
607
- throw new Error("unreachable");
608
- }
609
- };
610
- var getPaddedExitPoints = (exitPoint, exitSide, padding = 5) => {
611
- const paddedExitPoints = [];
612
- switch (exitSide) {
613
- case "top":
614
- paddedExitPoints.push({
615
- x: exitPoint.x - padding,
616
- y: exitPoint.y + padding
617
- }, {
618
- x: exitPoint.x + padding,
619
- y: exitPoint.y + padding
620
- });
621
- break;
622
- case "bottom":
623
- paddedExitPoints.push({
624
- x: exitPoint.x - padding,
625
- y: exitPoint.y - padding
626
- }, {
627
- x: exitPoint.x + padding,
628
- y: exitPoint.y - padding
629
- });
630
- break;
631
- case "left":
632
- paddedExitPoints.push({
633
- x: exitPoint.x + padding,
634
- y: exitPoint.y - padding
635
- }, {
636
- x: exitPoint.x + padding,
637
- y: exitPoint.y + padding
638
- });
639
- break;
640
- case "right":
641
- paddedExitPoints.push({
642
- x: exitPoint.x - padding,
643
- y: exitPoint.y - padding
644
- }, {
645
- x: exitPoint.x - padding,
646
- y: exitPoint.y + padding
647
- });
648
- break;
649
- }
650
- return paddedExitPoints;
651
- };
652
- var getPointsFromRect = (rect) => {
653
- const { top, right, bottom, left } = rect;
654
- return [
655
- {
656
- x: left,
657
- y: top
658
- },
659
- {
660
- x: right,
661
- y: top
662
- },
663
- {
664
- x: right,
665
- y: bottom
666
- },
667
- {
668
- x: left,
669
- y: bottom
670
- }
671
- ];
672
- };
673
- var isPointInPolygon = (point, polygon) => {
674
- const { x, y } = point;
675
- let inside = false;
676
- for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
677
- const xi = polygon[i].x;
678
- const yi = polygon[i].y;
679
- const xj = polygon[j].x;
680
- const yj = polygon[j].y;
681
- const intersect = yi > y !== yj > y && x < (xj - xi) * (y - yi) / (yj - yi) + xi;
682
- if (intersect) {
683
- inside = !inside;
684
- }
685
- }
686
- return inside;
687
- };
688
- var getHull = (points) => {
689
- const newPoints = points.slice();
690
- newPoints.sort((a, b) => {
691
- if (a.x < b.x) {
692
- return -1;
693
- } else if (a.x > b.x) {
694
- return 1;
695
- } else if (a.y < b.y) {
696
- return -1;
697
- } else if (a.y > b.y) {
698
- return 1;
699
- } else {
700
- return 0;
701
- }
702
- });
703
- return getHullPresorted(newPoints);
704
- };
705
- var getHullPresorted = (points) => {
706
- if (points.length <= 1) {
707
- return points.slice();
708
- }
709
- const upperHull = [];
710
- for (let i = 0; i < points.length; i++) {
711
- const p = points[i];
712
- while (upperHull.length >= 2) {
713
- const q = upperHull[upperHull.length - 1];
714
- const r = upperHull[upperHull.length - 2];
715
- if ((q.x - r.x) * (p.y - r.y) >= (q.y - r.y) * (p.x - r.x)) {
716
- upperHull.pop();
717
- } else {
718
- break;
719
- }
720
- }
721
- upperHull.push(p);
722
- }
723
- upperHull.pop();
724
- const lowerHull = [];
725
- for (let i = points.length - 1; i >= 0; i--) {
726
- const p = points[i];
727
- while (lowerHull.length >= 2) {
728
- const q = lowerHull[lowerHull.length - 1];
729
- const r = lowerHull[lowerHull.length - 2];
730
- if ((q.x - r.x) * (p.y - r.y) >= (q.y - r.y) * (p.x - r.x)) {
731
- lowerHull.pop();
732
- } else {
733
- break;
734
- }
735
- }
736
- lowerHull.push(p);
737
- }
738
- lowerHull.pop();
739
- if (upperHull.length === 1 && lowerHull.length === 1 && upperHull[0].x === lowerHull[0].x && upperHull[0].y === lowerHull[0].y) {
740
- return upperHull;
741
- } else {
742
- return upperHull.concat(lowerHull);
743
- }
744
- };
745
- var Tooltip = {
746
- Provider: TooltipProvider,
747
- Trigger: TooltipTrigger
748
- };
749
-
750
- // src/components/ErrorFallback/ErrorStack.tsx
751
- import ErrorStackParser from "error-stack-parser";
752
- import React6 from "react";
753
- import { mx } from "@dxos/ui-theme";
754
- var parseCaptureOwnerStack = (stack) => {
755
- if (stack == null || stack.length === 0) {
756
- return null;
757
- }
758
- const err = new Error();
759
- err.stack = stack;
760
- try {
761
- return ErrorStackParser.parse(err);
762
- } catch {
763
- err.stack = `Error
764
- ${stack}`;
765
- try {
766
- return ErrorStackParser.parse(err);
767
- } catch {
768
- return null;
769
- }
770
- }
771
- };
772
- var ErrorStack = ({ error, frames: framesProp }) => {
773
- const frames = framesProp ?? (error ? ErrorStackParser.parse(error) : []);
774
- if (frames.length === 0) {
775
- return null;
776
- }
777
- return /* @__PURE__ */ React6.createElement("div", {
778
- className: "font-mono text-sm"
779
- }, frames.map((frame, i) => {
780
- const isLast = i === frames.length - 1;
781
- const local = frame.fileName ? parseLocalFrame(frame.fileName, frame.lineNumber, frame.columnNumber) : void 0;
782
- const name = frame.functionName ?? "<anonymous>";
783
- return /* @__PURE__ */ React6.createElement("div", {
784
- key: i,
785
- className: mx("grid grid-cols-[16px_1fr_auto_auto] items-stretch gap-x-2", local && "cursor-pointer hover:bg-hover-surface")
786
- }, /* @__PURE__ */ React6.createElement("div", {
787
- className: "relative"
788
- }, /* @__PURE__ */ React6.createElement("div", {
789
- className: mx("absolute left-1/2 -translate-x-1/2 w-px bg-neutral-500", isLast ? "top-0 h-1/2" : "inset-y-0")
790
- }), /* @__PURE__ */ React6.createElement("div", {
791
- className: "absolute top-1/2 -translate-y-1/2 left-1/2 right-0 h-px bg-neutral-500"
792
- })), local ? /* @__PURE__ */ React6.createElement("a", {
793
- href: local.href,
794
- className: "truncate self-center"
795
- }, name) : /* @__PURE__ */ React6.createElement("span", {
796
- className: "text-subdued truncate self-center"
797
- }, name), /* @__PURE__ */ React6.createElement("span", {
798
- className: "text-xs text-subdued truncate self-center"
799
- }, local?.fileName ?? ""), /* @__PURE__ */ React6.createElement("span", {
800
- className: "text-xs text-subdued text-right self-center"
801
- }, local ? `${frame.lineNumber}:${frame.columnNumber}` : ""));
802
- }));
803
- };
804
- var parseLocalFrame = (fileUrl, line, col) => {
805
- try {
806
- const { pathname } = new URL(fileUrl);
807
- if (!pathname.startsWith("/@fs/")) {
808
- return void 0;
809
- }
810
- const localPath = pathname.slice(4);
811
- return {
812
- href: `vscode://file/${localPath}:${line ?? 1}:${col ?? 1}`,
813
- fileName: pathname.split("/").pop() ?? localPath
814
- };
815
- } catch {
816
- return void 0;
817
- }
818
- };
819
-
820
- // src/hooks/useElevationContext.ts
821
- var useElevationContext = (propsElevation) => {
822
- const { elevation } = useContext3(ElevationContext);
823
- return propsElevation ?? elevation;
824
- };
825
-
826
- export {
827
- DensityContext,
828
- DensityProvider,
829
- ElevationContext,
830
- ElevationProvider,
831
- useElevationContext,
832
- useThemeContext,
833
- initialSafeArea,
834
- useSafeArea,
835
- TranslationsContext,
836
- useTranslation,
837
- hasIosKeyboard,
838
- ThemeContext,
839
- ThemeProvider,
840
- createTooltipScope,
841
- useTooltipContext,
842
- Tooltip,
843
- parseCaptureOwnerStack,
844
- ErrorStack
845
- };
846
- //# sourceMappingURL=chunk-LY5XDQR5.mjs.map