@dxos/react-ui 0.8.4-main.d05673bc65 → 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 (534) hide show
  1. package/LICENSE +102 -5
  2. package/README.md +1 -1
  3. package/dist/lib/browser/chunk-5SPBSIWS.mjs +33 -0
  4. package/dist/lib/browser/chunk-5SPBSIWS.mjs.map +7 -0
  5. package/dist/lib/browser/chunk-KVJDKHLF.mjs +1613 -0
  6. package/dist/lib/browser/chunk-KVJDKHLF.mjs.map +7 -0
  7. package/dist/lib/browser/index.mjs +2982 -1631
  8. package/dist/lib/browser/index.mjs.map +4 -4
  9. package/dist/lib/browser/meta.json +1 -1
  10. package/dist/lib/browser/testing/index.mjs +37 -28
  11. package/dist/lib/browser/testing/index.mjs.map +3 -3
  12. package/dist/lib/browser/translations.mjs +9 -0
  13. package/dist/lib/browser/translations.mjs.map +7 -0
  14. package/dist/lib/node-esm/chunk-5JYHWJDZ.mjs +1615 -0
  15. package/dist/lib/node-esm/chunk-5JYHWJDZ.mjs.map +7 -0
  16. package/dist/lib/node-esm/chunk-FPVTVXND.mjs +35 -0
  17. package/dist/lib/node-esm/chunk-FPVTVXND.mjs.map +7 -0
  18. package/dist/lib/node-esm/index.mjs +2982 -1631
  19. package/dist/lib/node-esm/index.mjs.map +4 -4
  20. package/dist/lib/node-esm/meta.json +1 -1
  21. package/dist/lib/node-esm/testing/index.mjs +37 -28
  22. package/dist/lib/node-esm/testing/index.mjs.map +3 -3
  23. package/dist/lib/node-esm/translations.mjs +10 -0
  24. package/dist/lib/node-esm/translations.mjs.map +7 -0
  25. package/dist/types/src/components/Avatars/Avatar.d.ts +1 -1
  26. package/dist/types/src/components/Avatars/Avatar.d.ts.map +1 -1
  27. package/dist/types/src/components/Avatars/Avatar.stories.d.ts.map +1 -1
  28. package/dist/types/src/components/Avatars/Avatar.theme.d.ts +11 -0
  29. package/dist/types/src/components/Avatars/Avatar.theme.d.ts.map +1 -0
  30. package/dist/types/src/components/Avatars/AvatarGroup.stories.d.ts.map +1 -1
  31. package/dist/types/src/components/Breadcrumb/Breadcrumb.d.ts +5 -1
  32. package/dist/types/src/components/Breadcrumb/Breadcrumb.d.ts.map +1 -1
  33. package/dist/types/src/components/Breadcrumb/Breadcrumb.stories.d.ts.map +1 -1
  34. package/dist/types/src/components/Breadcrumb/Breadcrumb.theme.d.ts +4 -0
  35. package/dist/types/src/components/Breadcrumb/Breadcrumb.theme.d.ts.map +1 -0
  36. package/dist/types/src/components/Button/Button.d.ts +3 -3
  37. package/dist/types/src/components/Button/Button.d.ts.map +1 -1
  38. package/dist/types/src/components/Button/Button.stories.d.ts +1 -1
  39. package/dist/types/src/components/Button/Button.stories.d.ts.map +1 -1
  40. package/dist/types/src/components/Button/Button.theme.d.ts +11 -0
  41. package/dist/types/src/components/Button/Button.theme.d.ts.map +1 -0
  42. package/dist/types/src/components/Button/IconButton.d.ts +1 -0
  43. package/dist/types/src/components/Button/IconButton.d.ts.map +1 -1
  44. package/dist/types/src/components/Button/IconButton.stories.d.ts +4 -0
  45. package/dist/types/src/components/Button/IconButton.stories.d.ts.map +1 -1
  46. package/dist/types/src/components/Button/IconButton.theme.d.ts +8 -0
  47. package/dist/types/src/components/Button/IconButton.theme.d.ts.map +1 -0
  48. package/dist/types/src/components/Button/Toggle.d.ts +2 -2
  49. package/dist/types/src/components/Button/Toggle.d.ts.map +1 -1
  50. package/dist/types/src/components/Button/Toggle.stories.d.ts.map +1 -1
  51. package/dist/types/src/components/Button/ToggleGroup.d.ts +6 -6
  52. package/dist/types/src/components/Button/ToggleGroup.d.ts.map +1 -1
  53. package/dist/types/src/components/Button/ToggleGroup.stories.d.ts +2 -2
  54. package/dist/types/src/components/Button/ToggleGroup.stories.d.ts.map +1 -1
  55. package/dist/types/src/components/Calendar/Calendar.d.ts +33 -0
  56. package/dist/types/src/components/Calendar/Calendar.d.ts.map +1 -0
  57. package/dist/types/src/components/Calendar/Calendar.stories.d.ts +9 -0
  58. package/dist/types/src/components/Calendar/Calendar.stories.d.ts.map +1 -0
  59. package/dist/types/src/components/Calendar/Calendar.theme.d.ts +4 -0
  60. package/dist/types/src/components/Calendar/Calendar.theme.d.ts.map +1 -0
  61. package/dist/types/src/components/Calendar/index.d.ts +2 -0
  62. package/dist/types/src/components/Calendar/index.d.ts.map +1 -0
  63. package/dist/types/src/components/Card/Card.d.ts +92 -68
  64. package/dist/types/src/components/Card/Card.d.ts.map +1 -1
  65. package/dist/types/src/components/Card/Card.stories.d.ts +3 -2
  66. package/dist/types/src/components/Card/Card.stories.d.ts.map +1 -1
  67. package/dist/types/src/components/Card/Card.theme.d.ts +12 -0
  68. package/dist/types/src/components/Card/Card.theme.d.ts.map +1 -0
  69. package/dist/types/src/components/Carousel/Carousel.d.ts +102 -0
  70. package/dist/types/src/components/Carousel/Carousel.d.ts.map +1 -0
  71. package/dist/types/src/components/Carousel/index.d.ts +2 -0
  72. package/dist/types/src/components/Carousel/index.d.ts.map +1 -0
  73. package/dist/types/src/components/Clipboard/ClipboardProvider.d.ts.map +1 -1
  74. package/dist/types/src/components/Clipboard/CopyButton.d.ts.map +1 -1
  75. package/dist/types/src/components/Clipboard/index.d.ts +10 -1
  76. package/dist/types/src/components/Clipboard/index.d.ts.map +1 -1
  77. package/dist/types/src/components/Column/Column.d.ts +33 -0
  78. package/dist/types/src/components/Column/Column.d.ts.map +1 -0
  79. package/dist/types/src/components/Column/Column.stories.d.ts +25 -0
  80. package/dist/types/src/components/Column/Column.stories.d.ts.map +1 -0
  81. package/dist/types/src/components/Column/Column.theme.d.ts +9 -0
  82. package/dist/types/src/components/Column/Column.theme.d.ts.map +1 -0
  83. package/dist/types/src/components/Column/index.d.ts +3 -0
  84. package/dist/types/src/components/Column/index.d.ts.map +1 -0
  85. package/dist/types/src/components/Column/withColumn.d.ts +21 -0
  86. package/dist/types/src/components/Column/withColumn.d.ts.map +1 -0
  87. package/dist/types/src/components/DatePicker/DatePicker.d.ts +72 -0
  88. package/dist/types/src/components/DatePicker/DatePicker.d.ts.map +1 -0
  89. package/dist/types/src/components/DatePicker/DatePicker.stories.d.ts +10 -0
  90. package/dist/types/src/components/DatePicker/DatePicker.stories.d.ts.map +1 -0
  91. package/dist/types/src/components/DatePicker/DatePicker.theme.d.ts +6 -0
  92. package/dist/types/src/components/DatePicker/DatePicker.theme.d.ts.map +1 -0
  93. package/dist/types/src/components/DatePicker/index.d.ts +2 -0
  94. package/dist/types/src/components/DatePicker/index.d.ts.map +1 -0
  95. package/dist/types/src/components/Dialog/AlertDialog.d.ts +43 -32
  96. package/dist/types/src/components/Dialog/AlertDialog.d.ts.map +1 -1
  97. package/dist/types/src/components/Dialog/AlertDialog.stories.d.ts.map +1 -1
  98. package/dist/types/src/components/Dialog/Dialog.d.ts +51 -32
  99. package/dist/types/src/components/Dialog/Dialog.d.ts.map +1 -1
  100. package/dist/types/src/components/Dialog/Dialog.stories.d.ts +3 -2
  101. package/dist/types/src/components/Dialog/Dialog.stories.d.ts.map +1 -1
  102. package/dist/types/src/components/Dialog/Dialog.theme.d.ts +10 -0
  103. package/dist/types/src/components/Dialog/Dialog.theme.d.ts.map +1 -0
  104. package/dist/types/src/components/ErrorFallback/ErrorFallback.d.ts.map +1 -1
  105. package/dist/types/src/components/ErrorFallback/ErrorFallback.stories.d.ts.map +1 -1
  106. package/dist/types/src/components/ErrorFallback/ErrorStack.d.ts +14 -3
  107. package/dist/types/src/components/ErrorFallback/ErrorStack.d.ts.map +1 -1
  108. package/dist/types/src/components/ErrorFallback/ThrowError.d.ts.map +1 -1
  109. package/dist/types/src/components/Focus/Focus.d.ts +36 -0
  110. package/dist/types/src/components/Focus/Focus.d.ts.map +1 -0
  111. package/dist/types/src/{primitives/Column/Column.stories.d.ts → components/Focus/Focus.stories.d.ts} +4 -1
  112. package/dist/types/src/components/Focus/Focus.stories.d.ts.map +1 -0
  113. package/dist/types/src/components/Focus/Focus.theme.d.ts +6 -0
  114. package/dist/types/src/components/Focus/Focus.theme.d.ts.map +1 -0
  115. package/dist/types/src/components/Focus/index.d.ts +2 -0
  116. package/dist/types/src/components/Focus/index.d.ts.map +1 -0
  117. package/dist/types/src/components/Icon/Icon.d.ts +4 -0
  118. package/dist/types/src/components/Icon/Icon.d.ts.map +1 -1
  119. package/dist/types/src/components/Icon/Icon.stories.d.ts +11 -3
  120. package/dist/types/src/components/Icon/Icon.stories.d.ts.map +1 -1
  121. package/dist/types/src/components/Icon/Icon.theme.d.ts +11 -0
  122. package/dist/types/src/components/Icon/Icon.theme.d.ts.map +1 -0
  123. package/dist/types/src/components/Icon/IconBlock.d.ts +15 -0
  124. package/dist/types/src/components/Icon/IconBlock.d.ts.map +1 -0
  125. package/dist/types/src/components/Icon/index.d.ts +1 -0
  126. package/dist/types/src/components/Icon/index.d.ts.map +1 -1
  127. package/dist/types/src/components/Image/Image.d.ts +2 -1
  128. package/dist/types/src/components/Image/Image.d.ts.map +1 -1
  129. package/dist/types/src/components/Image/Image.stories.d.ts +3 -2
  130. package/dist/types/src/components/Image/Image.stories.d.ts.map +1 -1
  131. package/dist/types/src/components/Input/Input.d.ts +90 -15
  132. package/dist/types/src/components/Input/Input.d.ts.map +1 -1
  133. package/dist/types/src/components/Input/Input.stories.d.ts +17 -6
  134. package/dist/types/src/components/Input/Input.stories.d.ts.map +1 -1
  135. package/dist/types/src/components/Input/Input.theme.d.ts +115 -0
  136. package/dist/types/src/components/Input/Input.theme.d.ts.map +1 -0
  137. package/dist/types/src/components/Input/SegmentedInput.d.ts +79 -0
  138. package/dist/types/src/components/Input/SegmentedInput.d.ts.map +1 -0
  139. package/dist/types/src/components/Input/constants.d.ts +2 -0
  140. package/dist/types/src/components/Input/constants.d.ts.map +1 -0
  141. package/dist/types/src/components/Input/index.d.ts +2 -0
  142. package/dist/types/src/components/Input/index.d.ts.map +1 -1
  143. package/dist/types/src/components/Link/Link.d.ts.map +1 -1
  144. package/dist/types/src/components/Link/Link.stories.d.ts.map +1 -1
  145. package/dist/types/src/components/Link/Link.theme.d.ts +6 -0
  146. package/dist/types/src/components/Link/Link.theme.d.ts.map +1 -0
  147. package/dist/types/src/components/List/List.d.ts +5 -3
  148. package/dist/types/src/components/List/List.d.ts.map +1 -1
  149. package/dist/types/src/components/List/List.stories.d.ts +3 -1
  150. package/dist/types/src/components/List/List.stories.d.ts.map +1 -1
  151. package/dist/types/src/components/List/List.theme.d.ts +7 -0
  152. package/dist/types/src/components/List/List.theme.d.ts.map +1 -0
  153. package/dist/types/src/components/List/ListDropIndicator.d.ts.map +1 -1
  154. package/dist/types/src/components/List/Tree.d.ts +2 -2
  155. package/dist/types/src/components/List/Tree.d.ts.map +1 -1
  156. package/dist/types/src/components/List/Tree.stories.d.ts.map +1 -1
  157. package/dist/types/src/components/List/TreeDropIndicator.d.ts.map +1 -1
  158. package/dist/types/src/components/List/Treegrid.d.ts +6 -10
  159. package/dist/types/src/components/List/Treegrid.d.ts.map +1 -1
  160. package/dist/types/src/components/List/Treegrid.stories.d.ts.map +1 -1
  161. package/dist/types/src/components/List/Treegrid.theme.d.ts +7 -0
  162. package/dist/types/src/components/List/Treegrid.theme.d.ts.map +1 -0
  163. package/dist/types/src/components/Main/Main.d.ts +9 -5
  164. package/dist/types/src/components/Main/Main.d.ts.map +1 -1
  165. package/dist/types/src/components/Main/Main.stories.d.ts.map +1 -1
  166. package/dist/types/src/components/Main/Main.theme.d.ts +20 -0
  167. package/dist/types/src/components/Main/Main.theme.d.ts.map +1 -0
  168. package/dist/types/src/components/Main/constants.d.ts +3 -0
  169. package/dist/types/src/components/Main/constants.d.ts.map +1 -0
  170. package/dist/types/src/components/Main/index.d.ts +1 -0
  171. package/dist/types/src/components/Main/index.d.ts.map +1 -1
  172. package/dist/types/src/components/Main/useSwipeToDismiss.d.ts.map +1 -1
  173. package/dist/types/src/components/MediaPlayer/MediaPlayer.d.ts +43 -0
  174. package/dist/types/src/components/MediaPlayer/MediaPlayer.d.ts.map +1 -0
  175. package/dist/types/src/components/MediaPlayer/MediaPlayer.stories.d.ts +16 -0
  176. package/dist/types/src/components/MediaPlayer/MediaPlayer.stories.d.ts.map +1 -0
  177. package/dist/types/src/components/MediaPlayer/index.d.ts +2 -0
  178. package/dist/types/src/components/MediaPlayer/index.d.ts.map +1 -0
  179. package/dist/types/src/components/Menu/ContextMenu.d.ts.map +1 -1
  180. package/dist/types/src/components/Menu/ContextMenu.stories.d.ts.map +1 -1
  181. package/dist/types/src/components/Menu/DropdownMenu.d.ts +58 -49
  182. package/dist/types/src/components/Menu/DropdownMenu.d.ts.map +1 -1
  183. package/dist/types/src/components/Menu/DropdownMenu.stories.d.ts +14 -1
  184. package/dist/types/src/components/Menu/DropdownMenu.stories.d.ts.map +1 -1
  185. package/dist/types/src/components/Menu/Menu.theme.d.ts +7 -0
  186. package/dist/types/src/components/Menu/Menu.theme.d.ts.map +1 -0
  187. package/dist/types/src/components/Message/Message.d.ts +3 -3
  188. package/dist/types/src/components/Message/Message.d.ts.map +1 -1
  189. package/dist/types/src/components/Message/Message.stories.d.ts +6 -2
  190. package/dist/types/src/components/Message/Message.stories.d.ts.map +1 -1
  191. package/dist/types/src/components/Message/Message.theme.d.ts +7 -0
  192. package/dist/types/src/components/Message/Message.theme.d.ts.map +1 -0
  193. package/dist/types/src/components/Panel/Panel.d.ts +35 -0
  194. package/dist/types/src/components/Panel/Panel.d.ts.map +1 -0
  195. package/dist/types/src/components/Panel/Panel.stories.d.ts.map +1 -0
  196. package/dist/types/src/components/Panel/Panel.theme.d.ts +13 -0
  197. package/dist/types/src/components/Panel/Panel.theme.d.ts.map +1 -0
  198. package/dist/types/src/components/Panel/index.d.ts.map +1 -0
  199. package/dist/types/src/components/Popover/Popover.d.ts +38 -22
  200. package/dist/types/src/components/Popover/Popover.d.ts.map +1 -1
  201. package/dist/types/src/components/Popover/Popover.stories.d.ts.map +1 -1
  202. package/dist/types/src/components/Popover/Popover.theme.d.ts +8 -0
  203. package/dist/types/src/components/Popover/Popover.theme.d.ts.map +1 -0
  204. package/dist/types/src/components/ScrollArea/ScrollArea.d.ts +12 -9
  205. package/dist/types/src/components/ScrollArea/ScrollArea.d.ts.map +1 -1
  206. package/dist/types/src/components/ScrollArea/ScrollArea.stories.d.ts +18 -5
  207. package/dist/types/src/components/ScrollArea/ScrollArea.stories.d.ts.map +1 -1
  208. package/dist/types/src/components/ScrollArea/ScrollArea.theme.d.ts +17 -0
  209. package/dist/types/src/components/ScrollArea/ScrollArea.theme.d.ts.map +1 -0
  210. package/dist/types/src/components/ScrollArea/index.d.ts +1 -0
  211. package/dist/types/src/components/ScrollArea/index.d.ts.map +1 -1
  212. package/dist/types/src/components/ScrollArea/scrollbar.d.ts +18 -0
  213. package/dist/types/src/components/ScrollArea/scrollbar.d.ts.map +1 -0
  214. package/dist/types/src/components/ScrollContainer/ScrollContainer.d.ts +41 -18
  215. package/dist/types/src/components/ScrollContainer/ScrollContainer.d.ts.map +1 -1
  216. package/dist/types/src/components/ScrollContainer/ScrollContainer.stories.d.ts +5 -6
  217. package/dist/types/src/components/ScrollContainer/ScrollContainer.stories.d.ts.map +1 -1
  218. package/dist/types/src/components/Select/Select.d.ts.map +1 -1
  219. package/dist/types/src/components/Select/Select.stories.d.ts +2 -2
  220. package/dist/types/src/components/Select/Select.stories.d.ts.map +1 -1
  221. package/dist/types/src/components/Select/Select.theme.d.ts +6 -0
  222. package/dist/types/src/components/Select/Select.theme.d.ts.map +1 -0
  223. package/dist/types/src/components/Separator/Separator.d.ts +3 -3
  224. package/dist/types/src/components/Separator/Separator.d.ts.map +1 -1
  225. package/dist/types/src/components/Separator/Separator.theme.d.ts +7 -0
  226. package/dist/types/src/components/Separator/Separator.theme.d.ts.map +1 -0
  227. package/dist/types/src/components/Skeleton/Skeleton.stories.d.ts.map +1 -1
  228. package/dist/types/src/components/Skeleton/Skeleton.theme.d.ts +6 -0
  229. package/dist/types/src/components/Skeleton/Skeleton.theme.d.ts.map +1 -0
  230. package/dist/types/src/components/Splitter/Splitter.d.ts +18 -18
  231. package/dist/types/src/components/Splitter/Splitter.d.ts.map +1 -1
  232. package/dist/types/src/components/Splitter/Splitter.stories.d.ts.map +1 -1
  233. package/dist/types/src/components/Splitter/Splitter.theme.d.ts +4 -0
  234. package/dist/types/src/components/Splitter/Splitter.theme.d.ts.map +1 -0
  235. package/dist/types/src/components/Status/Status.d.ts +3 -4
  236. package/dist/types/src/components/Status/Status.d.ts.map +1 -1
  237. package/dist/types/src/components/Status/Status.stories.d.ts.map +1 -1
  238. package/dist/types/src/components/Status/Status.theme.d.ts +7 -0
  239. package/dist/types/src/components/Status/Status.theme.d.ts.map +1 -0
  240. package/dist/types/src/components/Tag/Tag.stories.d.ts.map +1 -1
  241. package/dist/types/src/components/Tag/Tag.theme.d.ts +6 -0
  242. package/dist/types/src/components/Tag/Tag.theme.d.ts.map +1 -0
  243. package/dist/types/src/components/Toast/Toast.d.ts +23 -20
  244. package/dist/types/src/components/Toast/Toast.d.ts.map +1 -1
  245. package/dist/types/src/components/Toast/Toast.stories.d.ts +5 -2
  246. package/dist/types/src/components/Toast/Toast.stories.d.ts.map +1 -1
  247. package/dist/types/src/components/Toast/Toast.theme.d.ts +4 -0
  248. package/dist/types/src/components/Toast/Toast.theme.d.ts.map +1 -0
  249. package/dist/types/src/components/Toolbar/Toolbar.d.ts +30 -26
  250. package/dist/types/src/components/Toolbar/Toolbar.d.ts.map +1 -1
  251. package/dist/types/src/components/Toolbar/Toolbar.stories.d.ts.map +1 -1
  252. package/dist/types/src/components/Toolbar/Toolbar.theme.d.ts +8 -0
  253. package/dist/types/src/components/Toolbar/Toolbar.theme.d.ts.map +1 -0
  254. package/dist/types/src/components/Tooltip/Tooltip.d.ts +16 -16
  255. package/dist/types/src/components/Tooltip/Tooltip.d.ts.map +1 -1
  256. package/dist/types/src/components/Tooltip/Tooltip.stories.d.ts +2 -2
  257. package/dist/types/src/components/Tooltip/Tooltip.stories.d.ts.map +1 -1
  258. package/dist/types/src/components/Tooltip/Tooltip.theme.d.ts +6 -0
  259. package/dist/types/src/components/Tooltip/Tooltip.theme.d.ts.map +1 -0
  260. package/dist/types/src/components/Tooltip/index.d.ts +1 -0
  261. package/dist/types/src/components/Tooltip/index.d.ts.map +1 -1
  262. package/dist/types/src/components/Tooltip/tooltipContent.d.ts +4 -0
  263. package/dist/types/src/components/Tooltip/tooltipContent.d.ts.map +1 -0
  264. package/dist/types/src/components/index.d.ts +8 -4
  265. package/dist/types/src/components/index.d.ts.map +1 -1
  266. package/dist/types/src/exemplars/generics.stories.d.ts +6 -5
  267. package/dist/types/src/exemplars/generics.stories.d.ts.map +1 -1
  268. package/dist/types/src/exemplars/slot.stories.d.ts +1 -0
  269. package/dist/types/src/exemplars/slot.stories.d.ts.map +1 -1
  270. package/dist/types/src/exemplars/tabster.stories.d.ts.map +1 -1
  271. package/dist/types/src/exemplars/virtualizer.stories.d.ts.map +1 -1
  272. package/dist/types/src/hooks/index.d.ts +1 -0
  273. package/dist/types/src/hooks/index.d.ts.map +1 -1
  274. package/dist/types/src/hooks/useDensityContext.d.ts +1 -1
  275. package/dist/types/src/hooks/useDensityContext.d.ts.map +1 -1
  276. package/dist/types/src/hooks/useElevationContext.d.ts.map +1 -1
  277. package/dist/types/src/hooks/useIconHref.d.ts.map +1 -1
  278. package/dist/types/src/hooks/useSafeArea.d.ts.map +1 -1
  279. package/dist/types/src/hooks/useSafeCollisionPadding.d.ts.map +1 -1
  280. package/dist/types/src/hooks/useTranslationsContext.d.ts +1 -1
  281. package/dist/types/src/hooks/useVisualViewport.d.ts.map +1 -1
  282. package/dist/types/src/index.d.ts +1 -0
  283. package/dist/types/src/index.d.ts.map +1 -1
  284. package/dist/types/src/playground/Controls.stories.d.ts.map +1 -1
  285. package/dist/types/src/playground/Custom.stories.d.ts +1 -1
  286. package/dist/types/src/playground/Custom.stories.d.ts.map +1 -1
  287. package/dist/types/src/playground/Typography.stories.d.ts.map +1 -1
  288. package/dist/types/src/primitives/Container/Container.d.ts +4 -5
  289. package/dist/types/src/primitives/Container/Container.d.ts.map +1 -1
  290. package/dist/types/src/primitives/Container/Container.stories.d.ts.map +1 -1
  291. package/dist/types/src/{components → primitives}/DensityProvider/DensityProvider.d.ts.map +1 -1
  292. package/dist/types/src/primitives/DensityProvider/index.d.ts.map +1 -0
  293. package/dist/types/src/{components → primitives}/ElevationProvider/ElevationProvider.d.ts.map +1 -1
  294. package/dist/types/src/primitives/ElevationProvider/index.d.ts.map +1 -0
  295. package/dist/types/src/primitives/Flex/Flex.d.ts +5 -7
  296. package/dist/types/src/primitives/Flex/Flex.d.ts.map +1 -1
  297. package/dist/types/src/primitives/Flex/Flex.stories.d.ts.map +1 -1
  298. package/dist/types/src/primitives/Grid/Grid.d.ts +3 -8
  299. package/dist/types/src/primitives/Grid/Grid.d.ts.map +1 -1
  300. package/dist/types/src/primitives/Grid/Grid.stories.d.ts.map +1 -1
  301. package/dist/types/src/{components → primitives}/ThemeProvider/ThemeProvider.d.ts +1 -1
  302. package/dist/types/src/{components → primitives}/ThemeProvider/ThemeProvider.d.ts.map +1 -1
  303. package/dist/types/src/{components → primitives}/ThemeProvider/ThemeProvider.stories.d.ts +1 -1
  304. package/dist/types/src/primitives/ThemeProvider/ThemeProvider.stories.d.ts.map +1 -0
  305. package/dist/types/src/primitives/ThemeProvider/TranslationsProvider.d.ts +128 -0
  306. package/dist/types/src/primitives/ThemeProvider/TranslationsProvider.d.ts.map +1 -0
  307. package/dist/types/src/primitives/ThemeProvider/index.d.ts +4 -0
  308. package/dist/types/src/primitives/ThemeProvider/index.d.ts.map +1 -0
  309. package/dist/types/src/primitives/index.d.ts +3 -2
  310. package/dist/types/src/primitives/index.d.ts.map +1 -1
  311. package/dist/types/src/testing/Loading.d.ts.map +1 -1
  312. package/dist/types/src/testing/decorators/withLayout.d.ts.map +1 -1
  313. package/dist/types/src/testing/decorators/withLayoutVariants.d.ts.map +1 -1
  314. package/dist/types/src/testing/decorators/withTheme.d.ts +6 -2
  315. package/dist/types/src/testing/decorators/withTheme.d.ts.map +1 -1
  316. package/dist/types/src/theme/bindTheme.d.ts +3 -0
  317. package/dist/types/src/theme/bindTheme.d.ts.map +1 -0
  318. package/dist/types/src/theme/defaultTheme.d.ts +4 -0
  319. package/dist/types/src/theme/defaultTheme.d.ts.map +1 -0
  320. package/dist/types/src/theme/index.d.ts +31 -0
  321. package/dist/types/src/theme/index.d.ts.map +1 -0
  322. package/dist/types/src/translations.d.ts +17 -3
  323. package/dist/types/src/translations.d.ts.map +1 -1
  324. package/dist/types/src/util/index.d.ts +2 -1
  325. package/dist/types/src/util/index.d.ts.map +1 -1
  326. package/dist/types/src/util/mobile.d.ts +5 -0
  327. package/dist/types/src/util/mobile.d.ts.map +1 -0
  328. package/dist/types/src/util/slots.d.ts +57 -0
  329. package/dist/types/src/util/slots.d.ts.map +1 -0
  330. package/dist/types/src/util/usePx.d.ts.map +1 -1
  331. package/dist/types/tsconfig.tsbuildinfo +1 -1
  332. package/package.json +31 -26
  333. package/src/components/Avatars/Avatar.stories.tsx +2 -3
  334. package/src/components/Avatars/Avatar.theme.ts +93 -0
  335. package/src/components/Avatars/Avatar.tsx +1 -2
  336. package/src/components/Avatars/AvatarGroup.stories.tsx +0 -1
  337. package/src/components/Breadcrumb/Breadcrumb.stories.tsx +1 -2
  338. package/src/components/Breadcrumb/Breadcrumb.theme.ts +26 -0
  339. package/src/components/Breadcrumb/Breadcrumb.tsx +14 -2
  340. package/src/components/Button/Button.stories.tsx +0 -1
  341. package/src/components/Button/Button.theme.ts +31 -0
  342. package/src/components/Button/Button.tsx +6 -14
  343. package/src/components/Button/IconButton.stories.tsx +56 -6
  344. package/src/components/Button/IconButton.theme.ts +21 -0
  345. package/src/components/Button/IconButton.tsx +3 -4
  346. package/src/components/Button/Toggle.stories.tsx +0 -1
  347. package/src/components/Button/Toggle.tsx +4 -4
  348. package/src/components/Button/ToggleGroup.stories.tsx +0 -1
  349. package/src/components/Button/ToggleGroup.tsx +12 -16
  350. package/src/components/Calendar/Calendar.stories.tsx +43 -0
  351. package/src/components/Calendar/Calendar.theme.ts +74 -0
  352. package/src/components/Calendar/Calendar.tsx +196 -0
  353. package/src/components/Calendar/index.ts +5 -0
  354. package/src/components/Card/Card.stories.tsx +55 -34
  355. package/src/components/Card/Card.theme.ts +93 -0
  356. package/src/components/Card/Card.tsx +297 -156
  357. package/src/components/Carousel/Carousel.tsx +371 -0
  358. package/src/components/Carousel/index.ts +5 -0
  359. package/src/components/Clipboard/CopyButton.tsx +6 -7
  360. package/src/components/Column/AUDIT.md +148 -0
  361. package/src/components/Column/Column.stories.tsx +181 -0
  362. package/src/components/Column/Column.theme.ts +48 -0
  363. package/src/components/Column/Column.tsx +166 -0
  364. package/src/{primitives → components}/Column/index.ts +1 -0
  365. package/src/components/Column/withColumn.ts +27 -0
  366. package/src/components/DatePicker/DatePicker.stories.tsx +102 -0
  367. package/src/components/DatePicker/DatePicker.theme.ts +35 -0
  368. package/src/components/DatePicker/DatePicker.tsx +279 -0
  369. package/src/components/DatePicker/index.ts +5 -0
  370. package/src/components/Dialog/AlertDialog.stories.tsx +5 -6
  371. package/src/components/Dialog/AlertDialog.tsx +72 -132
  372. package/src/components/Dialog/Dialog.stories.tsx +65 -10
  373. package/src/components/Dialog/Dialog.theme.ts +61 -0
  374. package/src/components/Dialog/Dialog.tsx +124 -99
  375. package/src/components/ErrorFallback/ErrorFallback.stories.tsx +3 -8
  376. package/src/components/ErrorFallback/ErrorFallback.tsx +14 -8
  377. package/src/components/ErrorFallback/ErrorStack.tsx +48 -8
  378. package/src/components/Focus/AUDIT.md +43 -0
  379. package/src/components/Focus/Focus.stories.tsx +230 -0
  380. package/src/components/Focus/Focus.theme.ts +32 -0
  381. package/src/components/Focus/Focus.tsx +201 -0
  382. package/src/components/Focus/index.ts +5 -0
  383. package/src/components/Icon/Icon.stories.tsx +43 -13
  384. package/src/components/Icon/Icon.theme.ts +45 -0
  385. package/src/components/Icon/Icon.tsx +14 -3
  386. package/src/components/Icon/IconBlock.tsx +38 -0
  387. package/src/components/Icon/index.ts +1 -0
  388. package/src/components/Image/Image.stories.tsx +4 -4
  389. package/src/components/Image/Image.tsx +31 -8
  390. package/src/components/Input/Input.stories.tsx +135 -33
  391. package/src/components/Input/Input.theme.ts +191 -0
  392. package/src/components/Input/Input.tsx +214 -9
  393. package/src/components/Input/SegmentedInput.tsx +454 -0
  394. package/src/components/Input/constants.ts +5 -0
  395. package/src/components/Input/index.ts +2 -0
  396. package/src/components/Link/Link.stories.tsx +0 -1
  397. package/src/components/Link/Link.theme.ts +16 -0
  398. package/src/components/Link/Link.tsx +10 -2
  399. package/src/components/List/List.stories.tsx +1 -2
  400. package/src/components/List/List.theme.ts +47 -0
  401. package/src/components/List/List.tsx +8 -7
  402. package/src/components/List/ListDropIndicator.tsx +1 -2
  403. package/src/components/List/Tree.stories.tsx +2 -3
  404. package/src/components/List/Tree.tsx +0 -1
  405. package/src/components/List/TreeDropIndicator.tsx +3 -3
  406. package/src/components/List/Treegrid.stories.tsx +26 -27
  407. package/src/components/List/Treegrid.theme.ts +35 -0
  408. package/src/components/List/Treegrid.tsx +15 -16
  409. package/src/components/Main/Main.stories.tsx +0 -1
  410. package/src/components/Main/Main.theme.ts +29 -0
  411. package/src/components/Main/Main.tsx +10 -9
  412. package/src/components/Main/constants.ts +6 -0
  413. package/src/components/Main/index.ts +1 -0
  414. package/src/components/MediaPlayer/MediaPlayer.stories.tsx +50 -0
  415. package/src/components/MediaPlayer/MediaPlayer.tsx +178 -0
  416. package/src/components/MediaPlayer/index.ts +5 -0
  417. package/src/components/Menu/ContextMenu.stories.tsx +0 -4
  418. package/src/components/Menu/DropdownMenu.stories.tsx +0 -4
  419. package/src/components/Menu/DropdownMenu.tsx +63 -57
  420. package/src/components/Menu/Menu.theme.ts +48 -0
  421. package/src/components/Message/Message.stories.tsx +48 -11
  422. package/src/components/Message/Message.theme.ts +44 -0
  423. package/src/components/Message/Message.tsx +75 -19
  424. package/src/{primitives → components}/Panel/Panel.stories.tsx +9 -9
  425. package/src/components/Panel/Panel.theme.ts +42 -0
  426. package/src/components/Panel/Panel.tsx +121 -0
  427. package/src/components/Popover/Popover.stories.tsx +4 -5
  428. package/src/components/Popover/Popover.theme.ts +40 -0
  429. package/src/components/Popover/Popover.tsx +49 -49
  430. package/src/components/ScrollArea/ScrollArea.stories.tsx +89 -30
  431. package/src/components/ScrollArea/ScrollArea.theme.ts +107 -0
  432. package/src/components/ScrollArea/ScrollArea.tsx +40 -23
  433. package/src/components/ScrollArea/index.ts +1 -0
  434. package/src/components/ScrollArea/scrollbar.ts +21 -0
  435. package/src/components/ScrollContainer/ScrollContainer.stories.tsx +21 -19
  436. package/src/components/ScrollContainer/ScrollContainer.tsx +215 -106
  437. package/src/components/Select/Select.stories.tsx +5 -6
  438. package/src/components/Select/Select.theme.ts +55 -0
  439. package/src/components/Select/Select.tsx +26 -10
  440. package/src/components/Separator/Separator.theme.ts +23 -0
  441. package/src/components/Separator/Separator.tsx +4 -7
  442. package/src/components/Skeleton/Skeleton.stories.tsx +0 -1
  443. package/src/components/Skeleton/Skeleton.theme.ts +22 -0
  444. package/src/components/Splitter/Splitter.stories.tsx +30 -30
  445. package/src/components/Splitter/Splitter.theme.ts +18 -0
  446. package/src/components/Splitter/Splitter.tsx +36 -40
  447. package/src/components/Status/Status.stories.tsx +0 -1
  448. package/src/components/Status/Status.theme.ts +31 -0
  449. package/src/components/Status/Status.tsx +7 -5
  450. package/src/components/Tag/Tag.stories.tsx +0 -1
  451. package/src/components/Tag/Tag.theme.ts +22 -0
  452. package/src/components/Toast/Toast.stories.tsx +41 -21
  453. package/src/components/Toast/Toast.theme.ts +56 -0
  454. package/src/components/Toast/Toast.tsx +105 -52
  455. package/src/components/Toolbar/Toolbar.stories.tsx +0 -1
  456. package/src/components/Toolbar/Toolbar.theme.ts +36 -0
  457. package/src/components/Toolbar/Toolbar.tsx +83 -46
  458. package/src/components/Tooltip/Tooltip.stories.tsx +7 -17
  459. package/src/components/Tooltip/Tooltip.theme.ts +19 -0
  460. package/src/components/Tooltip/Tooltip.tsx +33 -33
  461. package/src/components/Tooltip/index.ts +1 -0
  462. package/src/components/Tooltip/tooltipContent.ts +16 -0
  463. package/src/components/index.ts +8 -5
  464. package/src/exemplars/generics.stories.tsx +7 -16
  465. package/src/exemplars/slot.stories.tsx +66 -57
  466. package/src/exemplars/tabster.stories.tsx +1 -1
  467. package/src/exemplars/virtualizer.stories.tsx +4 -5
  468. package/src/hooks/index.ts +1 -0
  469. package/src/hooks/useDensityContext.ts +3 -3
  470. package/src/hooks/useElevationContext.ts +1 -1
  471. package/src/hooks/useThemeContext.ts +1 -1
  472. package/src/hooks/useTranslationsContext.ts +1 -1
  473. package/src/index.ts +1 -0
  474. package/src/playground/Custom.stories.tsx +13 -36
  475. package/src/primitives/Container/Container.stories.tsx +0 -1
  476. package/src/primitives/Container/Container.tsx +7 -8
  477. package/src/{components → primitives}/DensityProvider/DensityProvider.tsx +1 -1
  478. package/src/primitives/Flex/Flex.stories.tsx +0 -1
  479. package/src/primitives/Flex/Flex.tsx +12 -12
  480. package/src/primitives/Grid/Grid.stories.tsx +0 -1
  481. package/src/primitives/Grid/Grid.tsx +6 -9
  482. package/src/{components → primitives}/ThemeProvider/ThemeProvider.stories.tsx +1 -2
  483. package/src/{components → primitives}/ThemeProvider/ThemeProvider.tsx +6 -5
  484. package/src/{components → primitives}/ThemeProvider/index.ts +2 -2
  485. package/src/primitives/index.ts +4 -2
  486. package/src/testing/Loading.tsx +25 -4
  487. package/src/testing/decorators/withLayout.tsx +7 -17
  488. package/src/testing/decorators/withLayoutVariants.tsx +1 -1
  489. package/src/testing/decorators/withTheme.tsx +23 -12
  490. package/src/theme/bindTheme.ts +13 -0
  491. package/src/theme/defaultTheme.ts +83 -0
  492. package/src/theme/index.ts +37 -0
  493. package/src/translations.ts +17 -3
  494. package/src/util/index.ts +2 -1
  495. package/src/util/mobile.ts +11 -0
  496. package/src/util/slots.ts +129 -0
  497. package/src/util/usePx.ts +5 -1
  498. package/dist/lib/browser/chunk-2FKSMWNY.mjs +0 -774
  499. package/dist/lib/browser/chunk-2FKSMWNY.mjs.map +0 -7
  500. package/dist/lib/node-esm/chunk-ZNBLTSHI.mjs +0 -776
  501. package/dist/lib/node-esm/chunk-ZNBLTSHI.mjs.map +0 -7
  502. package/dist/types/src/components/DensityProvider/index.d.ts.map +0 -1
  503. package/dist/types/src/components/ElevationProvider/index.d.ts.map +0 -1
  504. package/dist/types/src/components/ThemeProvider/ThemeProvider.stories.d.ts.map +0 -1
  505. package/dist/types/src/components/ThemeProvider/TranslationsProvider.d.ts +0 -129
  506. package/dist/types/src/components/ThemeProvider/TranslationsProvider.d.ts.map +0 -1
  507. package/dist/types/src/components/ThemeProvider/index.d.ts +0 -4
  508. package/dist/types/src/components/ThemeProvider/index.d.ts.map +0 -1
  509. package/dist/types/src/primitives/Column/Column.d.ts +0 -26
  510. package/dist/types/src/primitives/Column/Column.d.ts.map +0 -1
  511. package/dist/types/src/primitives/Column/Column.stories.d.ts.map +0 -1
  512. package/dist/types/src/primitives/Column/index.d.ts +0 -2
  513. package/dist/types/src/primitives/Column/index.d.ts.map +0 -1
  514. package/dist/types/src/primitives/Panel/Panel.d.ts +0 -26
  515. package/dist/types/src/primitives/Panel/Panel.d.ts.map +0 -1
  516. package/dist/types/src/primitives/Panel/Panel.stories.d.ts.map +0 -1
  517. package/dist/types/src/primitives/Panel/index.d.ts.map +0 -1
  518. package/dist/types/src/util/hasIosKeyboard.d.ts +0 -2
  519. package/dist/types/src/util/hasIosKeyboard.d.ts.map +0 -1
  520. package/src/primitives/Column/Column.stories.tsx +0 -78
  521. package/src/primitives/Column/Column.tsx +0 -134
  522. package/src/primitives/Panel/Panel.tsx +0 -119
  523. package/src/util/hasIosKeyboard.ts +0 -8
  524. /package/dist/types/src/{primitives → components}/Panel/Panel.stories.d.ts +0 -0
  525. /package/dist/types/src/{primitives → components}/Panel/index.d.ts +0 -0
  526. /package/dist/types/src/{components → primitives}/DensityProvider/DensityProvider.d.ts +0 -0
  527. /package/dist/types/src/{components → primitives}/DensityProvider/index.d.ts +0 -0
  528. /package/dist/types/src/{components → primitives}/ElevationProvider/ElevationProvider.d.ts +0 -0
  529. /package/dist/types/src/{components → primitives}/ElevationProvider/index.d.ts +0 -0
  530. /package/src/{primitives → components}/Panel/index.ts +0 -0
  531. /package/src/{components → primitives}/DensityProvider/index.ts +0 -0
  532. /package/src/{components → primitives}/ElevationProvider/ElevationProvider.tsx +0 -0
  533. /package/src/{components → primitives}/ElevationProvider/index.ts +0 -0
  534. /package/src/{components → primitives}/ThemeProvider/TranslationsProvider.tsx +0 -0
@@ -1,774 +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", ...rest }) => {
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
- ...rest
142
- }), [
143
- tx,
144
- themeMode,
145
- safeAreaPadding,
146
- rest
147
- ]);
148
- return /* @__PURE__ */ React4.createElement(ThemeContext.Provider, {
149
- value: contextValue
150
- }, /* @__PURE__ */ React4.createElement(TranslationsProvider, {
151
- fallback,
152
- resourceExtensions,
153
- appNs
154
- }, /* @__PURE__ */ React4.createElement(ElevationProvider, {
155
- elevation: "base"
156
- }, /* @__PURE__ */ React4.createElement(DensityProvider, {
157
- density: rootDensity
158
- }, children))));
159
- };
160
- var handleInputModalityChange = (isUsingKeyboard) => {
161
- if (isUsingKeyboard) {
162
- document.body.setAttribute("data-w-keyboard", "true");
163
- } else {
164
- document.body.removeAttribute("data-w-keyboard");
165
- }
166
- };
167
-
168
- // src/components/Tooltip/Tooltip.tsx
169
- import { composeEventHandlers } from "@radix-ui/primitive";
170
- import { useComposedRefs } from "@radix-ui/react-compose-refs";
171
- import { createContextScope } from "@radix-ui/react-context";
172
- import { DismissableLayer } from "@radix-ui/react-dismissable-layer";
173
- import { useId } from "@radix-ui/react-id";
174
- import * as PopperPrimitive from "@radix-ui/react-popper";
175
- import { createPopperScope } from "@radix-ui/react-popper";
176
- import { Portal as PortalPrimitive } from "@radix-ui/react-portal";
177
- import { Presence } from "@radix-ui/react-presence";
178
- import { Primitive } from "@radix-ui/react-primitive";
179
- import { Slottable } from "@radix-ui/react-slot";
180
- import { useControllableState } from "@radix-ui/react-use-controllable-state";
181
- import * as VisuallyHiddenPrimitive from "@radix-ui/react-visually-hidden";
182
- import React5, { forwardRef, useCallback as useCallback2, useEffect as useEffect3, useMemo as useMemo2, useRef, useState as useState3 } from "react";
183
- var [createTooltipContext, createTooltipScope] = createContextScope("Tooltip", [
184
- createPopperScope
185
- ]);
186
- var usePopperScope = createPopperScope();
187
- var DEFAULT_DELAY_DURATION = 700;
188
- var TOOLTIP_OPEN = "tooltip.open";
189
- var TOOLTIP_NAME = "Tooltip";
190
- var [TooltipContextProvider, useTooltipContext] = createTooltipContext(TOOLTIP_NAME);
191
- var TooltipProvider = (props) => {
192
- const { __scopeTooltip, children, open: openProp, defaultOpen = false, onOpenChange, disableHoverableContent = false, delayDuration = DEFAULT_DELAY_DURATION, skipDelayDuration = 300 } = props;
193
- const isOpenDelayedRef = useRef(true);
194
- const isPointerInTransitRef = useRef(false);
195
- const skipDelayTimerRef = useRef(0);
196
- useEffect3(() => {
197
- const skipDelayTimer = skipDelayTimerRef.current;
198
- return () => window.clearTimeout(skipDelayTimer);
199
- }, []);
200
- const popperScope = usePopperScope(__scopeTooltip);
201
- const [trigger, setTrigger] = useState3(null);
202
- const [content, setContent] = useState3("");
203
- const [side, setSide] = useState3(void 0);
204
- const triggerRef = useRef(trigger);
205
- const handleTriggerChange = useCallback2((nextTrigger) => {
206
- setTrigger(nextTrigger);
207
- triggerRef.current = nextTrigger;
208
- setContent(nextTrigger?.getAttribute("data-tooltip-content") ?? "");
209
- setSide(nextTrigger?.getAttribute("data-tooltip-side") ?? void 0);
210
- }, []);
211
- const contentId = useId();
212
- const openTimerRef = useRef(0);
213
- const wasOpenDelayedRef = useRef(false);
214
- const handleOpenChange = useCallback2((open2) => {
215
- if (open2) {
216
- window.clearTimeout(skipDelayTimerRef.current);
217
- isOpenDelayedRef.current = false;
218
- document.dispatchEvent(new CustomEvent(TOOLTIP_OPEN));
219
- } else {
220
- window.clearTimeout(skipDelayTimerRef.current);
221
- skipDelayTimerRef.current = window.setTimeout(() => isOpenDelayedRef.current = true, skipDelayDuration);
222
- }
223
- onOpenChange?.(open2);
224
- }, [
225
- skipDelayDuration,
226
- onOpenChange
227
- ]);
228
- const [open = false, setOpen] = useControllableState({
229
- prop: openProp,
230
- defaultProp: defaultOpen,
231
- onChange: handleOpenChange
232
- });
233
- const stateAttribute = useMemo2(() => {
234
- return open ? wasOpenDelayedRef.current ? "delayed-open" : "instant-open" : "closed";
235
- }, [
236
- open
237
- ]);
238
- const handleOpen = useCallback2(() => {
239
- window.clearTimeout(openTimerRef.current);
240
- openTimerRef.current = 0;
241
- wasOpenDelayedRef.current = false;
242
- setOpen(true);
243
- }, [
244
- setOpen
245
- ]);
246
- const handleClose = useCallback2(() => {
247
- window.clearTimeout(openTimerRef.current);
248
- openTimerRef.current = 0;
249
- setOpen(false);
250
- }, [
251
- setOpen
252
- ]);
253
- const handleDelayedOpen = useCallback2(() => {
254
- window.clearTimeout(openTimerRef.current);
255
- openTimerRef.current = window.setTimeout(() => {
256
- wasOpenDelayedRef.current = true;
257
- setOpen(true);
258
- openTimerRef.current = 0;
259
- }, delayDuration);
260
- }, [
261
- delayDuration,
262
- setOpen
263
- ]);
264
- useEffect3(() => {
265
- return () => {
266
- if (openTimerRef.current) {
267
- window.clearTimeout(openTimerRef.current);
268
- openTimerRef.current = 0;
269
- }
270
- };
271
- }, []);
272
- const { tx } = useThemeContext();
273
- const elevation = useElevationContext();
274
- return /* @__PURE__ */ React5.createElement(PopperPrimitive.Root, popperScope, /* @__PURE__ */ React5.createElement(TooltipContextProvider, {
275
- scope: __scopeTooltip,
276
- contentId,
277
- open,
278
- stateAttribute,
279
- trigger,
280
- onTriggerChange: handleTriggerChange,
281
- onTriggerEnter: useCallback2(() => {
282
- if (isOpenDelayedRef.current) {
283
- handleDelayedOpen();
284
- } else {
285
- handleOpen();
286
- }
287
- }, [
288
- isOpenDelayedRef,
289
- handleDelayedOpen,
290
- handleOpen
291
- ]),
292
- onTriggerLeave: useCallback2(() => {
293
- if (disableHoverableContent) {
294
- handleClose();
295
- } else {
296
- window.clearTimeout(openTimerRef.current);
297
- openTimerRef.current = 0;
298
- }
299
- }, [
300
- handleClose,
301
- disableHoverableContent
302
- ]),
303
- onOpen: handleOpen,
304
- onClose: handleClose,
305
- disableHoverableContent,
306
- isPointerInTransitRef,
307
- onPointerInTransitChange: useCallback2((inTransit) => {
308
- isPointerInTransitRef.current = inTransit;
309
- }, [])
310
- }, /* @__PURE__ */ React5.createElement(TooltipContent, {
311
- side,
312
- className: tx("tooltip.content", {
313
- elevation
314
- })
315
- }, content, /* @__PURE__ */ React5.createElement(TooltipArrow, {
316
- className: tx("tooltip.arrow")
317
- })), /* @__PURE__ */ React5.createElement(TooltipVirtualTrigger, {
318
- virtualRef: triggerRef
319
- }), children));
320
- };
321
- TooltipProvider.displayName = TOOLTIP_NAME;
322
- var TooltipVirtualTrigger = ({ virtualRef, __scopeTooltip }) => {
323
- const popperScope = usePopperScope(__scopeTooltip);
324
- return /* @__PURE__ */ React5.createElement(PopperPrimitive.Anchor, {
325
- asChild: true,
326
- ...popperScope,
327
- virtualRef
328
- });
329
- };
330
- var TRIGGER_NAME = "TooltipTrigger";
331
- var TooltipTrigger = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
332
- const {
333
- __scopeTooltip,
334
- onInteract,
335
- // TODO(thure): Pass `delayDuration` into the context.
336
- delayDuration: _delayDuration,
337
- side,
338
- content,
339
- ...triggerProps
340
- } = props;
341
- const context = useTooltipContext(TRIGGER_NAME, __scopeTooltip);
342
- const ref = useRef(null);
343
- const composedRefs = useComposedRefs(forwardedRef, ref);
344
- const isPointerDownRef = useRef(false);
345
- const hasPointerMoveOpenedRef = useRef(false);
346
- const handlePointerUp = useCallback2(() => isPointerDownRef.current = false, []);
347
- useEffect3(() => {
348
- return () => document.removeEventListener("pointerup", handlePointerUp);
349
- }, [
350
- handlePointerUp
351
- ]);
352
- return /* @__PURE__ */ React5.createElement(Primitive.button, {
353
- // We purposefully avoid adding `type=button` here because tooltip triggers are also
354
- // commonly anchors and the anchor `type` attribute signifies MIME type.
355
- "aria-describedby": context.open ? context.contentId : void 0,
356
- "data-state": context.stateAttribute,
357
- "data-tooltip-content": content,
358
- "data-tooltip-side": side,
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);
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/hooks/useElevationContext.ts
751
- var useElevationContext = (propsElevation) => {
752
- const { elevation } = useContext3(ElevationContext);
753
- return propsElevation ?? elevation;
754
- };
755
-
756
- export {
757
- DensityContext,
758
- DensityProvider,
759
- ElevationContext,
760
- ElevationProvider,
761
- useElevationContext,
762
- useThemeContext,
763
- initialSafeArea,
764
- useSafeArea,
765
- TranslationsContext,
766
- useTranslation,
767
- hasIosKeyboard,
768
- ThemeContext,
769
- ThemeProvider,
770
- createTooltipScope,
771
- useTooltipContext,
772
- Tooltip
773
- };
774
- //# sourceMappingURL=chunk-2FKSMWNY.mjs.map