@dxos/react-ui 0.8.4-main.84f28bd → 0.8.4-main.937b3ca

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 (314) hide show
  1. package/dist/lib/browser/chunk-CEKVHJ27.mjs +774 -0
  2. package/dist/lib/browser/chunk-CEKVHJ27.mjs.map +7 -0
  3. package/dist/lib/browser/index.mjs +3069 -60
  4. package/dist/lib/browser/index.mjs.map +4 -4
  5. package/dist/lib/browser/meta.json +1 -1
  6. package/dist/lib/browser/testing/index.mjs +65 -50
  7. package/dist/lib/browser/testing/index.mjs.map +4 -4
  8. package/dist/lib/node-esm/chunk-2NHEX4AD.mjs +776 -0
  9. package/dist/lib/node-esm/chunk-2NHEX4AD.mjs.map +7 -0
  10. package/dist/lib/node-esm/index.mjs +3069 -60
  11. package/dist/lib/node-esm/index.mjs.map +4 -4
  12. package/dist/lib/node-esm/meta.json +1 -1
  13. package/dist/lib/node-esm/testing/index.mjs +65 -50
  14. package/dist/lib/node-esm/testing/index.mjs.map +4 -4
  15. package/dist/types/src/components/Avatars/Avatar.d.ts +1 -1
  16. package/dist/types/src/components/Avatars/Avatar.d.ts.map +1 -1
  17. package/dist/types/src/components/Avatars/Avatar.stories.d.ts +5 -31
  18. package/dist/types/src/components/Avatars/Avatar.stories.d.ts.map +1 -1
  19. package/dist/types/src/components/Avatars/AvatarGroup.stories.d.ts +5 -11
  20. package/dist/types/src/components/Avatars/AvatarGroup.stories.d.ts.map +1 -1
  21. package/dist/types/src/components/Breadcrumb/Breadcrumb.d.ts +1 -1
  22. package/dist/types/src/components/Breadcrumb/Breadcrumb.d.ts.map +1 -1
  23. package/dist/types/src/components/Breadcrumb/Breadcrumb.stories.d.ts +8 -20
  24. package/dist/types/src/components/Breadcrumb/Breadcrumb.stories.d.ts.map +1 -1
  25. package/dist/types/src/components/{Buttons → Button}/Button.d.ts +2 -2
  26. package/dist/types/src/components/Button/Button.d.ts.map +1 -0
  27. package/dist/types/src/components/Button/Button.stories.d.ts +17 -0
  28. package/dist/types/src/components/Button/Button.stories.d.ts.map +1 -0
  29. package/dist/types/src/components/{Buttons → Button}/IconButton.d.ts +4 -4
  30. package/dist/types/src/components/Button/IconButton.d.ts.map +1 -0
  31. package/dist/types/src/components/Button/IconButton.stories.d.ts +13 -0
  32. package/dist/types/src/components/Button/IconButton.stories.d.ts.map +1 -0
  33. package/dist/types/src/components/Button/Toggle.d.ts.map +1 -0
  34. package/dist/types/src/components/Button/Toggle.stories.d.ts +16 -0
  35. package/dist/types/src/components/Button/Toggle.stories.d.ts.map +1 -0
  36. package/dist/types/src/components/Button/ToggleGroup.d.ts +27 -0
  37. package/dist/types/src/components/Button/ToggleGroup.d.ts.map +1 -0
  38. package/dist/types/src/components/Button/ToggleGroup.stories.d.ts +27 -0
  39. package/dist/types/src/components/Button/ToggleGroup.stories.d.ts.map +1 -0
  40. package/dist/types/src/components/Button/index.d.ts.map +1 -0
  41. package/dist/types/src/components/Clipboard/ClipboardProvider.d.ts.map +1 -1
  42. package/dist/types/src/components/Clipboard/CopyButton.d.ts +1 -1
  43. package/dist/types/src/components/Clipboard/CopyButton.d.ts.map +1 -1
  44. package/dist/types/src/components/DensityProvider/DensityProvider.d.ts +1 -1
  45. package/dist/types/src/components/DensityProvider/DensityProvider.d.ts.map +1 -1
  46. package/dist/types/src/components/{Dialogs → Dialog}/AlertDialog.d.ts +1 -1
  47. package/dist/types/src/components/Dialog/AlertDialog.d.ts.map +1 -0
  48. package/dist/types/src/components/Dialog/AlertDialog.stories.d.ts +11 -0
  49. package/dist/types/src/components/Dialog/AlertDialog.stories.d.ts.map +1 -0
  50. package/dist/types/src/components/Dialog/Dialog.d.ts +40 -0
  51. package/dist/types/src/components/Dialog/Dialog.d.ts.map +1 -0
  52. package/dist/types/src/components/Dialog/Dialog.stories.d.ts +27 -0
  53. package/dist/types/src/components/Dialog/Dialog.stories.d.ts.map +1 -0
  54. package/dist/types/src/components/Dialog/index.d.ts.map +1 -0
  55. package/dist/types/src/components/ElevationProvider/ElevationProvider.d.ts +1 -1
  56. package/dist/types/src/components/ElevationProvider/ElevationProvider.d.ts.map +1 -1
  57. package/dist/types/src/components/Icon/Icon.d.ts +2 -2
  58. package/dist/types/src/components/Icon/Icon.d.ts.map +1 -1
  59. package/dist/types/src/components/Icon/Icon.stories.d.ts +17 -0
  60. package/dist/types/src/components/Icon/Icon.stories.d.ts.map +1 -0
  61. package/dist/types/src/components/Input/Input.d.ts +6 -5
  62. package/dist/types/src/components/Input/Input.d.ts.map +1 -1
  63. package/dist/types/src/components/Input/Input.stories.d.ts +11 -12
  64. package/dist/types/src/components/Input/Input.stories.d.ts.map +1 -1
  65. package/dist/types/src/components/Link/Link.stories.d.ts +8 -8
  66. package/dist/types/src/components/Link/Link.stories.d.ts.map +1 -1
  67. package/dist/types/src/components/{Lists → List}/List.d.ts +3 -3
  68. package/dist/types/src/components/List/List.d.ts.map +1 -0
  69. package/dist/types/src/components/List/List.stories.d.ts +14 -0
  70. package/dist/types/src/components/List/List.stories.d.ts.map +1 -0
  71. package/dist/types/src/components/List/ListDropIndicator.d.ts.map +1 -0
  72. package/dist/types/src/components/{Lists → List}/Tree.d.ts +1 -1
  73. package/dist/types/src/components/List/Tree.d.ts.map +1 -0
  74. package/dist/types/src/components/List/Tree.stories.d.ts +15 -0
  75. package/dist/types/src/components/List/Tree.stories.d.ts.map +1 -0
  76. package/dist/types/src/components/List/TreeDropIndicator.d.ts.map +1 -0
  77. package/dist/types/src/components/{Lists → List}/Treegrid.d.ts +1 -1
  78. package/dist/types/src/components/{Lists → List}/Treegrid.d.ts.map +1 -1
  79. package/dist/types/src/components/List/Treegrid.stories.d.ts +12 -0
  80. package/dist/types/src/components/List/Treegrid.stories.d.ts.map +1 -0
  81. package/dist/types/src/components/List/index.d.ts.map +1 -0
  82. package/dist/types/src/components/Main/Main.d.ts +10 -19
  83. package/dist/types/src/components/Main/Main.d.ts.map +1 -1
  84. package/dist/types/src/components/Main/Main.stories.d.ts +6 -7
  85. package/dist/types/src/components/Main/Main.stories.d.ts.map +1 -1
  86. package/dist/types/src/components/{Menus → Menu}/ContextMenu.d.ts +6 -6
  87. package/dist/types/src/components/Menu/ContextMenu.d.ts.map +1 -0
  88. package/dist/types/src/components/Menu/ContextMenu.stories.d.ts +12 -0
  89. package/dist/types/src/components/Menu/ContextMenu.stories.d.ts.map +1 -0
  90. package/dist/types/src/components/{Menus → Menu}/DropdownMenu.d.ts +8 -8
  91. package/dist/types/src/components/Menu/DropdownMenu.d.ts.map +1 -0
  92. package/dist/types/src/components/Menu/DropdownMenu.stories.d.ts +15 -0
  93. package/dist/types/src/components/Menu/DropdownMenu.stories.d.ts.map +1 -0
  94. package/dist/types/src/components/Menu/index.d.ts.map +1 -0
  95. package/dist/types/src/components/Message/Message.d.ts +1 -1
  96. package/dist/types/src/components/Message/Message.d.ts.map +1 -1
  97. package/dist/types/src/components/Message/Message.stories.d.ts +8 -17
  98. package/dist/types/src/components/Message/Message.stories.d.ts.map +1 -1
  99. package/dist/types/src/components/Popover/Popover.d.ts +3 -3
  100. package/dist/types/src/components/Popover/Popover.d.ts.map +1 -1
  101. package/dist/types/src/components/Popover/Popover.stories.d.ts +6 -34
  102. package/dist/types/src/components/Popover/Popover.stories.d.ts.map +1 -1
  103. package/dist/types/src/components/ScrollArea/ScrollArea.d.ts +10 -8
  104. package/dist/types/src/components/ScrollArea/ScrollArea.d.ts.map +1 -1
  105. package/dist/types/src/components/ScrollArea/ScrollArea.stories.d.ts +8 -30
  106. package/dist/types/src/components/ScrollArea/ScrollArea.stories.d.ts.map +1 -1
  107. package/dist/types/src/components/ScrollContainer/ScrollContainer.d.ts +39 -0
  108. package/dist/types/src/components/ScrollContainer/ScrollContainer.d.ts.map +1 -0
  109. package/dist/types/src/components/ScrollContainer/ScrollContainer.stories.d.ts +19 -0
  110. package/dist/types/src/components/ScrollContainer/ScrollContainer.stories.d.ts.map +1 -0
  111. package/dist/types/src/components/ScrollContainer/index.d.ts +2 -0
  112. package/dist/types/src/components/ScrollContainer/index.d.ts.map +1 -0
  113. package/dist/types/src/components/Select/Select.d.ts +10 -10
  114. package/dist/types/src/components/Select/Select.d.ts.map +1 -1
  115. package/dist/types/src/components/Select/Select.stories.d.ts +4 -9
  116. package/dist/types/src/components/Select/Select.stories.d.ts.map +1 -1
  117. package/dist/types/src/components/Separator/Separator.d.ts +1 -1
  118. package/dist/types/src/components/Status/Status.stories.d.ts +2 -8
  119. package/dist/types/src/components/Status/Status.stories.d.ts.map +1 -1
  120. package/dist/types/src/components/Tag/Tag.d.ts +1 -1
  121. package/dist/types/src/components/Tag/Tag.d.ts.map +1 -1
  122. package/dist/types/src/components/Tag/Tag.stories.d.ts +12 -12
  123. package/dist/types/src/components/Tag/Tag.stories.d.ts.map +1 -1
  124. package/dist/types/src/components/ThemeProvider/ThemeProvider.d.ts +2 -3
  125. package/dist/types/src/components/ThemeProvider/ThemeProvider.d.ts.map +1 -1
  126. package/dist/types/src/components/ThemeProvider/TranslationsProvider.d.ts +1 -8
  127. package/dist/types/src/components/ThemeProvider/TranslationsProvider.d.ts.map +1 -1
  128. package/dist/types/src/components/ThemeProvider/index.d.ts +2 -1
  129. package/dist/types/src/components/ThemeProvider/index.d.ts.map +1 -1
  130. package/dist/types/src/components/Toast/Toast.d.ts +5 -5
  131. package/dist/types/src/components/Toast/Toast.d.ts.map +1 -1
  132. package/dist/types/src/components/Toast/Toast.stories.d.ts +6 -44
  133. package/dist/types/src/components/Toast/Toast.stories.d.ts.map +1 -1
  134. package/dist/types/src/components/Toolbar/Toolbar.d.ts +17 -17
  135. package/dist/types/src/components/Toolbar/Toolbar.d.ts.map +1 -1
  136. package/dist/types/src/components/Toolbar/Toolbar.stories.d.ts +6 -50
  137. package/dist/types/src/components/Toolbar/Toolbar.stories.d.ts.map +1 -1
  138. package/dist/types/src/components/Tooltip/Tooltip.d.ts +2 -4
  139. package/dist/types/src/components/Tooltip/Tooltip.d.ts.map +1 -1
  140. package/dist/types/src/components/Tooltip/Tooltip.stories.d.ts +8 -61
  141. package/dist/types/src/components/Tooltip/Tooltip.stories.d.ts.map +1 -1
  142. package/dist/types/src/components/index.d.ts +5 -4
  143. package/dist/types/src/components/index.d.ts.map +1 -1
  144. package/dist/types/src/hooks/useDensityContext.d.ts +1 -1
  145. package/dist/types/src/hooks/useDensityContext.d.ts.map +1 -1
  146. package/dist/types/src/hooks/useElevationContext.d.ts +1 -1
  147. package/dist/types/src/hooks/useElevationContext.d.ts.map +1 -1
  148. package/dist/types/src/hooks/useSafeArea.d.ts.map +1 -1
  149. package/dist/types/src/hooks/useVisualViewport.d.ts +2 -2
  150. package/dist/types/src/hooks/useVisualViewport.d.ts.map +1 -1
  151. package/dist/types/src/index.d.ts +1 -1
  152. package/dist/types/src/index.d.ts.map +1 -1
  153. package/dist/types/src/playground/Controls.stories.d.ts +5 -9
  154. package/dist/types/src/playground/Controls.stories.d.ts.map +1 -1
  155. package/dist/types/src/playground/Custom.stories.d.ts +12 -4
  156. package/dist/types/src/playground/Custom.stories.d.ts.map +1 -1
  157. package/dist/types/src/playground/Typography.stories.d.ts +5 -11
  158. package/dist/types/src/playground/Typography.stories.d.ts.map +1 -1
  159. package/dist/types/src/testing/decorators/index.d.ts +2 -1
  160. package/dist/types/src/testing/decorators/index.d.ts.map +1 -1
  161. package/dist/types/src/testing/decorators/withLayout.d.ts +15 -0
  162. package/dist/types/src/testing/decorators/withLayout.d.ts.map +1 -0
  163. package/dist/types/src/testing/decorators/withLayoutVariants.d.ts +12 -0
  164. package/dist/types/src/testing/decorators/withLayoutVariants.d.ts.map +1 -0
  165. package/dist/types/src/testing/decorators/withTheme.d.ts +3 -0
  166. package/dist/types/src/testing/decorators/withTheme.d.ts.map +1 -1
  167. package/dist/types/src/util/index.d.ts +2 -1
  168. package/dist/types/src/util/index.d.ts.map +1 -1
  169. package/dist/types/src/util/usePx.d.ts +8 -0
  170. package/dist/types/src/util/usePx.d.ts.map +1 -0
  171. package/dist/types/tsconfig.tsbuildinfo +1 -1
  172. package/package.json +35 -27
  173. package/src/components/Avatars/Avatar.stories.tsx +21 -12
  174. package/src/components/Avatars/Avatar.tsx +4 -4
  175. package/src/components/Avatars/AvatarGroup.stories.tsx +10 -6
  176. package/src/components/Breadcrumb/Breadcrumb.stories.tsx +17 -12
  177. package/src/components/Breadcrumb/Breadcrumb.tsx +3 -3
  178. package/src/components/{Buttons → Button}/Button.stories.tsx +10 -11
  179. package/src/components/{Buttons → Button}/Button.tsx +1 -1
  180. package/src/components/{Buttons → Button}/IconButton.stories.tsx +11 -8
  181. package/src/components/{Buttons → Button}/IconButton.tsx +22 -15
  182. package/src/components/Button/Toggle.stories.tsx +37 -0
  183. package/src/components/{Buttons → Button}/ToggleGroup.stories.tsx +13 -10
  184. package/src/components/{Buttons → Button}/ToggleGroup.tsx +17 -4
  185. package/src/components/Clipboard/ClipboardProvider.tsx +1 -1
  186. package/src/components/Clipboard/CopyButton.tsx +7 -6
  187. package/src/components/DensityProvider/DensityProvider.tsx +2 -2
  188. package/src/components/{Dialogs → Dialog}/AlertDialog.stories.tsx +15 -12
  189. package/src/components/{Dialogs → Dialog}/AlertDialog.tsx +13 -13
  190. package/src/components/Dialog/Dialog.stories.tsx +97 -0
  191. package/src/components/{Dialogs → Dialog}/Dialog.tsx +151 -51
  192. package/src/components/ElevationProvider/ElevationProvider.tsx +2 -2
  193. package/src/components/Icon/Icon.stories.tsx +113 -0
  194. package/src/components/Icon/Icon.tsx +2 -2
  195. package/src/components/Input/Input.stories.tsx +13 -15
  196. package/src/components/Input/Input.tsx +28 -19
  197. package/src/components/Link/Link.stories.tsx +10 -6
  198. package/src/components/{Lists → List}/List.stories.tsx +38 -32
  199. package/src/components/{Lists → List}/List.tsx +16 -17
  200. package/src/components/{Lists → List}/ListDropIndicator.tsx +1 -1
  201. package/src/components/{Lists → List}/Tree.stories.tsx +11 -8
  202. package/src/components/{Lists → List}/Tree.tsx +4 -3
  203. package/src/components/{Lists → List}/TreeDropIndicator.tsx +1 -1
  204. package/src/components/{Lists → List}/Treegrid.stories.tsx +12 -6
  205. package/src/components/{Lists → List}/Treegrid.tsx +58 -17
  206. package/src/components/Main/Main.stories.tsx +17 -9
  207. package/src/components/Main/Main.tsx +43 -28
  208. package/src/components/{Menus → Menu}/ContextMenu.stories.tsx +11 -8
  209. package/src/components/{Menus → Menu}/ContextMenu.tsx +1 -0
  210. package/src/components/{Menus → Menu}/DropdownMenu.stories.tsx +12 -9
  211. package/src/components/{Menus → Menu}/DropdownMenu.tsx +102 -71
  212. package/src/components/Message/Message.stories.tsx +12 -8
  213. package/src/components/Message/Message.tsx +30 -5
  214. package/src/components/Popover/Popover.stories.tsx +12 -9
  215. package/src/components/Popover/Popover.tsx +64 -45
  216. package/src/components/ScrollArea/ScrollArea.stories.tsx +64 -11
  217. package/src/components/ScrollArea/ScrollArea.tsx +54 -8
  218. package/src/components/ScrollContainer/ScrollContainer.stories.tsx +70 -0
  219. package/src/components/ScrollContainer/ScrollContainer.tsx +233 -0
  220. package/src/components/ScrollContainer/index.ts +5 -0
  221. package/src/components/Select/Select.stories.tsx +15 -12
  222. package/src/components/Select/Select.tsx +9 -9
  223. package/src/components/Status/Status.stories.tsx +9 -6
  224. package/src/components/Tag/Tag.stories.tsx +20 -11
  225. package/src/components/Tag/Tag.tsx +1 -1
  226. package/src/components/ThemeProvider/ThemeProvider.tsx +3 -4
  227. package/src/components/ThemeProvider/TranslationsProvider.tsx +3 -18
  228. package/src/components/ThemeProvider/index.ts +3 -3
  229. package/src/components/Toast/Toast.stories.tsx +12 -9
  230. package/src/components/Toast/Toast.tsx +9 -9
  231. package/src/components/Toolbar/Toolbar.stories.tsx +21 -19
  232. package/src/components/Toolbar/Toolbar.tsx +37 -10
  233. package/src/components/Tooltip/Tooltip.stories.tsx +16 -12
  234. package/src/components/Tooltip/Tooltip.tsx +27 -24
  235. package/src/components/index.ts +5 -4
  236. package/src/hooks/useDensityContext.ts +1 -1
  237. package/src/hooks/useElevationContext.ts +1 -1
  238. package/src/hooks/useSafeArea.ts +3 -2
  239. package/src/hooks/useSafeCollisionPadding.ts +1 -1
  240. package/src/hooks/useVisualViewport.ts +4 -4
  241. package/src/index.ts +1 -1
  242. package/src/playground/Controls.stories.tsx +20 -17
  243. package/src/playground/Custom.stories.tsx +13 -24
  244. package/src/playground/Typography.stories.tsx +8 -6
  245. package/src/testing/decorators/index.ts +2 -1
  246. package/src/testing/decorators/withLayout.tsx +63 -0
  247. package/src/testing/decorators/{withSurfaceVariantsLayout.tsx → withLayoutVariants.tsx} +5 -5
  248. package/src/testing/decorators/withTheme.tsx +32 -0
  249. package/src/util/index.ts +3 -1
  250. package/src/util/usePx.ts +61 -0
  251. package/dist/lib/browser/chunk-T6YPS45E.mjs +0 -4376
  252. package/dist/lib/browser/chunk-T6YPS45E.mjs.map +0 -7
  253. package/dist/lib/node-esm/chunk-TYVQJ4KW.mjs +0 -4378
  254. package/dist/lib/node-esm/chunk-TYVQJ4KW.mjs.map +0 -7
  255. package/dist/types/src/components/Buttons/Button.d.ts.map +0 -1
  256. package/dist/types/src/components/Buttons/Button.stories.d.ts +0 -12
  257. package/dist/types/src/components/Buttons/Button.stories.d.ts.map +0 -1
  258. package/dist/types/src/components/Buttons/IconButton.d.ts.map +0 -1
  259. package/dist/types/src/components/Buttons/IconButton.stories.d.ts +0 -22
  260. package/dist/types/src/components/Buttons/IconButton.stories.d.ts.map +0 -1
  261. package/dist/types/src/components/Buttons/Toggle.d.ts.map +0 -1
  262. package/dist/types/src/components/Buttons/Toggle.stories.d.ts +0 -19
  263. package/dist/types/src/components/Buttons/Toggle.stories.d.ts.map +0 -1
  264. package/dist/types/src/components/Buttons/ToggleGroup.d.ts +0 -28
  265. package/dist/types/src/components/Buttons/ToggleGroup.d.ts.map +0 -1
  266. package/dist/types/src/components/Buttons/ToggleGroup.stories.d.ts +0 -39
  267. package/dist/types/src/components/Buttons/ToggleGroup.stories.d.ts.map +0 -1
  268. package/dist/types/src/components/Buttons/index.d.ts.map +0 -1
  269. package/dist/types/src/components/Dialogs/AlertDialog.d.ts.map +0 -1
  270. package/dist/types/src/components/Dialogs/AlertDialog.stories.d.ts +0 -43
  271. package/dist/types/src/components/Dialogs/AlertDialog.stories.d.ts.map +0 -1
  272. package/dist/types/src/components/Dialogs/Dialog.d.ts +0 -31
  273. package/dist/types/src/components/Dialogs/Dialog.d.ts.map +0 -1
  274. package/dist/types/src/components/Dialogs/Dialog.stories.d.ts +0 -48
  275. package/dist/types/src/components/Dialogs/Dialog.stories.d.ts.map +0 -1
  276. package/dist/types/src/components/Dialogs/index.d.ts.map +0 -1
  277. package/dist/types/src/components/Lists/List.d.ts.map +0 -1
  278. package/dist/types/src/components/Lists/List.stories.d.ts +0 -37
  279. package/dist/types/src/components/Lists/List.stories.d.ts.map +0 -1
  280. package/dist/types/src/components/Lists/ListDropIndicator.d.ts.map +0 -1
  281. package/dist/types/src/components/Lists/Tree.d.ts.map +0 -1
  282. package/dist/types/src/components/Lists/Tree.stories.d.ts +0 -41
  283. package/dist/types/src/components/Lists/Tree.stories.d.ts.map +0 -1
  284. package/dist/types/src/components/Lists/TreeDropIndicator.d.ts.map +0 -1
  285. package/dist/types/src/components/Lists/Treegrid.stories.d.ts +0 -10
  286. package/dist/types/src/components/Lists/Treegrid.stories.d.ts.map +0 -1
  287. package/dist/types/src/components/Lists/index.d.ts.map +0 -1
  288. package/dist/types/src/components/Menus/ContextMenu.d.ts.map +0 -1
  289. package/dist/types/src/components/Menus/ContextMenu.stories.d.ts +0 -50
  290. package/dist/types/src/components/Menus/ContextMenu.stories.d.ts.map +0 -1
  291. package/dist/types/src/components/Menus/DropdownMenu.d.ts.map +0 -1
  292. package/dist/types/src/components/Menus/DropdownMenu.stories.d.ts +0 -50
  293. package/dist/types/src/components/Menus/DropdownMenu.stories.d.ts.map +0 -1
  294. package/dist/types/src/components/Menus/index.d.ts.map +0 -1
  295. package/dist/types/src/testing/decorators/withSurfaceVariantsLayout.d.ts +0 -12
  296. package/dist/types/src/testing/decorators/withSurfaceVariantsLayout.d.ts.map +0 -1
  297. package/dist/types/src/util/ThemedClassName.d.ts +0 -5
  298. package/dist/types/src/util/ThemedClassName.d.ts.map +0 -1
  299. package/src/components/Buttons/Toggle.stories.tsx +0 -33
  300. package/src/components/Dialogs/Dialog.stories.tsx +0 -65
  301. package/src/testing/decorators/withTheme.ts +0 -22
  302. package/src/util/ThemedClassName.ts +0 -7
  303. /package/dist/types/src/components/{Buttons → Button}/Toggle.d.ts +0 -0
  304. /package/dist/types/src/components/{Buttons → Button}/index.d.ts +0 -0
  305. /package/dist/types/src/components/{Dialogs → Dialog}/index.d.ts +0 -0
  306. /package/dist/types/src/components/{Lists → List}/ListDropIndicator.d.ts +0 -0
  307. /package/dist/types/src/components/{Lists → List}/TreeDropIndicator.d.ts +0 -0
  308. /package/dist/types/src/components/{Lists → List}/index.d.ts +0 -0
  309. /package/dist/types/src/components/{Menus → Menu}/index.d.ts +0 -0
  310. /package/src/components/{Buttons → Button}/Toggle.tsx +0 -0
  311. /package/src/components/{Buttons → Button}/index.ts +0 -0
  312. /package/src/components/{Dialogs → Dialog}/index.ts +0 -0
  313. /package/src/components/{Lists → List}/index.ts +0 -0
  314. /package/src/components/{Menus → Menu}/index.ts +0 -0
@@ -1,4376 +0,0 @@
1
- // src/hooks/useDensityContext.ts
2
- import { useContext as useContext6 } from "react";
3
-
4
- // src/components/AnchoredOverflow/AnchoredOverflow.tsx
5
- import { useSignals as _useSignals2 } from "@preact-signals/safe-react/tracking";
6
- import { Primitive } from "@radix-ui/react-primitive";
7
- import { Slot } from "@radix-ui/react-slot";
8
- import React2, { forwardRef } from "react";
9
-
10
- // src/hooks/useElevationContext.ts
11
- import { useContext } from "react";
12
- var useElevationContext = (propsElevation) => {
13
- const { elevation } = useContext(ElevationContext);
14
- return propsElevation ?? elevation;
15
- };
16
-
17
- // src/hooks/useThemeContext.ts
18
- import { useContext as useContext2 } from "react";
19
- import { raise } from "@dxos/debug";
20
- var useThemeContext = () => useContext2(ThemeContext) ?? raise(new Error("Missing ThemeContext"));
21
-
22
- // src/hooks/useIconHref.ts
23
- var ICONS_URL = "/icons.svg";
24
- var useIconHref = (icon) => {
25
- const { noCache } = useThemeContext();
26
- const url = noCache ? `${ICONS_URL}?nocache=${(/* @__PURE__ */ new Date()).getMinutes()}` : ICONS_URL;
27
- return icon ? `${url}#${icon}` : void 0;
28
- };
29
-
30
- // src/hooks/useSafeArea.ts
31
- import { useCallback, useState } from "react";
32
- import { useResize } from "@dxos/react-hooks";
33
- var initialSafeArea = {
34
- top: NaN,
35
- right: NaN,
36
- bottom: NaN,
37
- left: NaN
38
- };
39
- var useSafeArea = () => {
40
- const [padding, setPadding] = useState(initialSafeArea);
41
- const handleResize = useCallback(() => {
42
- setPadding({
43
- top: parseFloat(getComputedStyle(document.documentElement).getPropertyValue("--safe-area-top")),
44
- right: parseFloat(getComputedStyle(document.documentElement).getPropertyValue("--safe-area-right")),
45
- bottom: parseFloat(getComputedStyle(document.documentElement).getPropertyValue("--safe-area-bottom")),
46
- left: parseFloat(getComputedStyle(document.documentElement).getPropertyValue("--safe-area-left"))
47
- });
48
- }, []);
49
- useResize(handleResize);
50
- return padding;
51
- };
52
-
53
- // src/hooks/useTranslationsContext.ts
54
- import { useContext as useContext4 } from "react";
55
-
56
- // src/components/ThemeProvider/TranslationsProvider.tsx
57
- import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
58
- import { enUS as dtLocaleEnUs } from "date-fns/locale";
59
- import i18Next from "i18next";
60
- import React, { useEffect, createContext, useState as useState2, Suspense, useContext as useContext3 } from "react";
61
- import { initReactI18next, useTranslation as useI18NextTranslation } from "react-i18next";
62
- var initialLng = "en-US";
63
- var initialNs = "dxos-common";
64
- var initialDtLocale = dtLocaleEnUs;
65
- var isLabel = (o) => typeof o === "string" || Array.isArray(o) && o.length === 2 && typeof o[0] === "string" && !!o[1] && typeof o[1] === "object" && "ns" in o[1] && typeof o[1].ns === "string";
66
- var toLocalizedString = (label, t) => Array.isArray(label) ? t(...label) : label;
67
- var resources = {
68
- [initialLng]: {
69
- [initialNs]: {
70
- "loading translations": "Loading translations\u2026"
71
- }
72
- }
73
- };
74
- void i18Next.use(initReactI18next).init({
75
- resources,
76
- lng: initialLng,
77
- defaultNS: initialNs,
78
- interpolation: {
79
- escapeValue: false
80
- }
81
- });
82
- var TranslationsContext = /* @__PURE__ */ createContext({
83
- appNs: initialNs,
84
- dtLocale: initialDtLocale
85
- });
86
- var useTranslation = (...args) => {
87
- const result = useI18NextTranslation(...args);
88
- const { dtLocale } = useContext3(TranslationsContext);
89
- return {
90
- ...result,
91
- dtLocale
92
- };
93
- };
94
- var TranslationsProvider = ({ fallback, resourceExtensions, children, appNs, dtLocale }) => {
95
- var _effect = _useSignals();
96
- try {
97
- const [loaded, setLoaded] = useState2(false);
98
- useEffect(() => {
99
- setLoaded(false);
100
- if (resourceExtensions && resourceExtensions.length) {
101
- resourceExtensions.forEach((resource) => {
102
- Object.keys(resource).forEach((language) => {
103
- Object.keys(resource[language]).forEach((ns) => {
104
- i18Next.addResourceBundle(language, ns, resource[language][ns]);
105
- });
106
- });
107
- });
108
- }
109
- setLoaded(true);
110
- }, [
111
- resourceExtensions
112
- ]);
113
- return /* @__PURE__ */ React.createElement(TranslationsContext.Provider, {
114
- value: {
115
- appNs: appNs ?? initialNs,
116
- dtLocale: dtLocale ?? initialDtLocale
117
- }
118
- }, /* @__PURE__ */ React.createElement(Suspense, {
119
- fallback
120
- }, loaded ? children : fallback));
121
- } finally {
122
- _effect.f();
123
- }
124
- };
125
-
126
- // src/hooks/useTranslationsContext.ts
127
- var useTranslationsContext = () => useContext4(TranslationsContext);
128
-
129
- // src/hooks/useVisualViewport.ts
130
- import { useCallback as useCallback2, useState as useState3 } from "react";
131
- import { useResize as useResize2 } from "@dxos/react-hooks";
132
- var useVisualViewport = (deps) => {
133
- const [width, setWidth] = useState3(null);
134
- const [height, setHeight] = useState3(null);
135
- const handleResize = useCallback2(() => {
136
- if (window.visualViewport) {
137
- setWidth(window.visualViewport.width);
138
- setHeight(window.visualViewport.height);
139
- }
140
- }, []);
141
- useResize2(handleResize);
142
- return {
143
- width,
144
- height
145
- };
146
- };
147
-
148
- // src/components/AnchoredOverflow/AnchoredOverflow.tsx
149
- var AnchoredOverflowRoot = /* @__PURE__ */ forwardRef(({ asChild, classNames, children, ...props }, forwardedRef) => {
150
- var _effect = _useSignals2();
151
- try {
152
- const { tx } = useThemeContext();
153
- const Root7 = asChild ? Slot : Primitive.div;
154
- return /* @__PURE__ */ React2.createElement(Root7, {
155
- role: "none",
156
- ...props,
157
- className: tx("anchoredOverflow.root", "overflow-anchored", {}, classNames),
158
- ref: forwardedRef
159
- }, children);
160
- } finally {
161
- _effect.f();
162
- }
163
- });
164
- var AnchoredOverflowAnchor = /* @__PURE__ */ forwardRef(({ asChild, classNames, children, ...props }, forwardedRef) => {
165
- var _effect = _useSignals2();
166
- try {
167
- const { tx } = useThemeContext();
168
- const Root7 = asChild ? Slot : Primitive.div;
169
- return /* @__PURE__ */ React2.createElement(Root7, {
170
- role: "none",
171
- ...props,
172
- className: tx("anchoredOverflow.anchor", "overflow-anchor", {}, classNames),
173
- ref: forwardedRef
174
- }, children);
175
- } finally {
176
- _effect.f();
177
- }
178
- });
179
- var AnchoredOverflow = {
180
- Root: AnchoredOverflowRoot,
181
- Anchor: AnchoredOverflowAnchor
182
- };
183
-
184
- // src/components/Avatars/Avatar.tsx
185
- import { useSignals as _useSignals3 } from "@preact-signals/safe-react/tracking";
186
- import "@dxos/lit-ui/dx-avatar.pcss";
187
- import { createContext as createContext2 } from "@radix-ui/react-context";
188
- import { Primitive as Primitive2 } from "@radix-ui/react-primitive";
189
- import { Slot as Slot2 } from "@radix-ui/react-slot";
190
- import React3, { forwardRef as forwardRef2 } from "react";
191
- import { DxAvatar } from "@dxos/lit-ui/react";
192
- import { useId } from "@dxos/react-hooks";
193
- import { mx } from "@dxos/react-ui-theme";
194
- var AVATAR_NAME = "Avatar";
195
- var [AvatarProvider, useAvatarContext] = createContext2(AVATAR_NAME);
196
- var AvatarRoot = ({ children, labelId: propsLabelId, descriptionId: propsDescriptionId }) => {
197
- var _effect = _useSignals3();
198
- try {
199
- const labelId = useId("avatar__label", propsLabelId);
200
- const descriptionId = useId("avatar__description", propsDescriptionId);
201
- return /* @__PURE__ */ React3.createElement(AvatarProvider, {
202
- labelId,
203
- descriptionId
204
- }, children);
205
- } finally {
206
- _effect.f();
207
- }
208
- };
209
- var AvatarContent = /* @__PURE__ */ forwardRef2(({ icon, classNames, ...props }, forwardedRef) => {
210
- var _effect = _useSignals3();
211
- try {
212
- const href = useIconHref(icon);
213
- const { labelId, descriptionId } = useAvatarContext("AvatarContent");
214
- return /* @__PURE__ */ React3.createElement(DxAvatar, {
215
- ...props,
216
- icon: href,
217
- "aria-labelledby": labelId,
218
- "aria-describedby": descriptionId,
219
- rootClassName: mx(classNames),
220
- ref: forwardedRef
221
- });
222
- } finally {
223
- _effect.f();
224
- }
225
- });
226
- var AvatarLabel = /* @__PURE__ */ forwardRef2(({ asChild, srOnly, classNames, ...props }, forwardedRef) => {
227
- var _effect = _useSignals3();
228
- try {
229
- const Root7 = asChild ? Slot2 : Primitive2.span;
230
- const { tx } = useThemeContext();
231
- const { labelId } = useAvatarContext("AvatarLabel");
232
- return /* @__PURE__ */ React3.createElement(Root7, {
233
- ...props,
234
- id: labelId,
235
- ref: forwardedRef,
236
- className: tx("avatar.label", "avatar__label", {
237
- srOnly
238
- }, classNames)
239
- });
240
- } finally {
241
- _effect.f();
242
- }
243
- });
244
- var AvatarDescription = /* @__PURE__ */ forwardRef2(({ asChild, srOnly, classNames, ...props }, forwardedRef) => {
245
- var _effect = _useSignals3();
246
- try {
247
- const Root7 = asChild ? Slot2 : Primitive2.span;
248
- const { tx } = useThemeContext();
249
- const { descriptionId } = useAvatarContext("AvatarDescription");
250
- return /* @__PURE__ */ React3.createElement(Root7, {
251
- ...props,
252
- id: descriptionId,
253
- ref: forwardedRef,
254
- className: tx("avatar.description", "avatar__description", {
255
- srOnly
256
- }, classNames)
257
- });
258
- } finally {
259
- _effect.f();
260
- }
261
- });
262
- var Avatar = {
263
- Root: AvatarRoot,
264
- Content: AvatarContent,
265
- Label: AvatarLabel,
266
- Description: AvatarDescription
267
- };
268
-
269
- // src/components/Breadcrumb/Breadcrumb.tsx
270
- import { useSignals as _useSignals5 } from "@preact-signals/safe-react/tracking";
271
- import { Dot } from "@phosphor-icons/react";
272
- import { Primitive as Primitive4 } from "@radix-ui/react-primitive";
273
- import { Slot as Slot4 } from "@radix-ui/react-slot";
274
- import React5, { forwardRef as forwardRef4 } from "react";
275
-
276
- // src/components/Link/Link.tsx
277
- import { useSignals as _useSignals4 } from "@preact-signals/safe-react/tracking";
278
- import { Primitive as Primitive3 } from "@radix-ui/react-primitive";
279
- import { Slot as Slot3 } from "@radix-ui/react-slot";
280
- import React4, { forwardRef as forwardRef3 } from "react";
281
- var Link = /* @__PURE__ */ forwardRef3(({ asChild, variant, classNames, ...props }, forwardedRef) => {
282
- var _effect = _useSignals4();
283
- try {
284
- const { tx } = useThemeContext();
285
- const Root7 = asChild ? Slot3 : Primitive3.a;
286
- return /* @__PURE__ */ React4.createElement(Root7, {
287
- ...props,
288
- className: tx("link.root", "link", {
289
- variant
290
- }, classNames),
291
- ref: forwardedRef
292
- });
293
- } finally {
294
- _effect.f();
295
- }
296
- });
297
-
298
- // src/components/Breadcrumb/Breadcrumb.tsx
299
- var BreadcrumbRoot = /* @__PURE__ */ forwardRef4(({ asChild, classNames, ...props }, forwardedRef) => {
300
- var _effect = _useSignals5();
301
- try {
302
- const { tx } = useThemeContext();
303
- const Root7 = asChild ? Slot4 : Primitive4.div;
304
- return /* @__PURE__ */ React5.createElement(Root7, {
305
- role: "navigation",
306
- ...props,
307
- className: tx("breadcrumb.root", "breadcrumb", {}, classNames),
308
- ref: forwardedRef
309
- });
310
- } finally {
311
- _effect.f();
312
- }
313
- });
314
- var BreadcrumbList = /* @__PURE__ */ forwardRef4(({ asChild, classNames, ...props }, forwardedRef) => {
315
- var _effect = _useSignals5();
316
- try {
317
- const { tx } = useThemeContext();
318
- const Root7 = asChild ? Slot4 : Primitive4.ol;
319
- return /* @__PURE__ */ React5.createElement(Root7, {
320
- role: "list",
321
- ...props,
322
- className: tx("breadcrumb.list", "breadcrumb__list", {}, classNames),
323
- ref: forwardedRef
324
- });
325
- } finally {
326
- _effect.f();
327
- }
328
- });
329
- var BreadcrumbListItem = /* @__PURE__ */ forwardRef4(({ asChild, classNames, ...props }, forwardedRef) => {
330
- var _effect = _useSignals5();
331
- try {
332
- const { tx } = useThemeContext();
333
- const Root7 = asChild ? Slot4 : Primitive4.li;
334
- return /* @__PURE__ */ React5.createElement(Root7, {
335
- role: "listitem",
336
- ...props,
337
- className: tx("breadcrumb.listItem", "breadcrumb__list__item", {}, classNames),
338
- ref: forwardedRef
339
- });
340
- } finally {
341
- _effect.f();
342
- }
343
- });
344
- var BreadcrumbLink = /* @__PURE__ */ forwardRef4(({ asChild, ...props }, forwardedRef) => {
345
- var _effect = _useSignals5();
346
- try {
347
- const Root7 = asChild ? Slot4 : Link;
348
- return /* @__PURE__ */ React5.createElement(Root7, {
349
- ...props,
350
- ref: forwardedRef
351
- });
352
- } finally {
353
- _effect.f();
354
- }
355
- });
356
- var BreadcrumbCurrent = /* @__PURE__ */ forwardRef4(({ asChild, classNames, ...props }, forwardedRef) => {
357
- var _effect = _useSignals5();
358
- try {
359
- const { tx } = useThemeContext();
360
- const Root7 = asChild ? Slot4 : "h1";
361
- return /* @__PURE__ */ React5.createElement(Root7, {
362
- ...props,
363
- "aria-current": "page",
364
- className: tx("breadcrumb.current", "breadcrumb__item__heading--current", {}, classNames),
365
- ref: forwardedRef
366
- });
367
- } finally {
368
- _effect.f();
369
- }
370
- });
371
- var BreadcrumbSeparator = ({ children, classNames, ...props }) => {
372
- var _effect = _useSignals5();
373
- try {
374
- const { tx } = useThemeContext();
375
- return /* @__PURE__ */ React5.createElement(Primitive4.span, {
376
- role: "separator",
377
- "aria-hidden": "true",
378
- ...props,
379
- className: tx("breadcrumb.separator", "breadcrumb__separator", {}, classNames)
380
- }, children ?? /* @__PURE__ */ React5.createElement(Dot, {
381
- weight: "bold"
382
- }));
383
- } finally {
384
- _effect.f();
385
- }
386
- };
387
- var Breadcrumb = {
388
- Root: BreadcrumbRoot,
389
- List: BreadcrumbList,
390
- ListItem: BreadcrumbListItem,
391
- Link: BreadcrumbLink,
392
- Current: BreadcrumbCurrent,
393
- Separator: BreadcrumbSeparator
394
- };
395
-
396
- // src/components/Buttons/Button.tsx
397
- import { useSignals as _useSignals6 } from "@preact-signals/safe-react/tracking";
398
- import { createContext as createContext3 } from "@radix-ui/react-context";
399
- import { Primitive as Primitive5 } from "@radix-ui/react-primitive";
400
- import { Slot as Slot5 } from "@radix-ui/react-slot";
401
- import React6, { forwardRef as forwardRef5, memo } from "react";
402
- var BUTTON_GROUP_NAME = "ButtonGroup";
403
- var BUTTON_NAME = "Button";
404
- var [ButtonGroupProvider, useButtonGroupContext] = createContext3(BUTTON_GROUP_NAME, {
405
- inGroup: false
406
- });
407
- var Button = /* @__PURE__ */ memo(/* @__PURE__ */ forwardRef5(({ classNames, children, density: propsDensity, elevation: propsElevation, variant = "default", asChild, ...props }, ref) => {
408
- var _effect = _useSignals6();
409
- try {
410
- const { inGroup } = useButtonGroupContext(BUTTON_NAME);
411
- const { tx } = useThemeContext();
412
- const elevation = useElevationContext(propsElevation);
413
- const density = useDensityContext(propsDensity);
414
- const Root7 = asChild ? Slot5 : Primitive5.button;
415
- return /* @__PURE__ */ React6.createElement(Root7, {
416
- ref,
417
- ...props,
418
- "data-variant": variant,
419
- "data-density": density,
420
- "data-props": inGroup ? "grouped" : "",
421
- className: tx("button.root", "button", {
422
- variant,
423
- inGroup,
424
- disabled: props.disabled,
425
- density,
426
- elevation
427
- }, classNames),
428
- ...props.disabled && {
429
- disabled: true
430
- }
431
- }, children);
432
- } finally {
433
- _effect.f();
434
- }
435
- }));
436
- Button.displayName = BUTTON_NAME;
437
- var ButtonGroup = /* @__PURE__ */ forwardRef5(({ children, elevation: propsElevation, classNames, asChild, ...props }, forwardedRef) => {
438
- var _effect = _useSignals6();
439
- try {
440
- const { tx } = useThemeContext();
441
- const elevation = useElevationContext(propsElevation);
442
- const Root7 = asChild ? Slot5 : Primitive5.div;
443
- return /* @__PURE__ */ React6.createElement(Root7, {
444
- role: "none",
445
- ...props,
446
- className: tx("button.group", "button-group", {
447
- elevation
448
- }, classNames),
449
- ref: forwardedRef
450
- }, /* @__PURE__ */ React6.createElement(ButtonGroupProvider, {
451
- inGroup: true
452
- }, children));
453
- } finally {
454
- _effect.f();
455
- }
456
- });
457
- ButtonGroup.displayName = BUTTON_GROUP_NAME;
458
-
459
- // src/components/Buttons/IconButton.tsx
460
- import { useSignals as _useSignals9 } from "@preact-signals/safe-react/tracking";
461
- import React9, { forwardRef as forwardRef8 } from "react";
462
-
463
- // src/components/Icon/Icon.tsx
464
- import { useSignals as _useSignals7 } from "@preact-signals/safe-react/tracking";
465
- import React7, { forwardRef as forwardRef6, memo as memo2 } from "react";
466
- var Icon = /* @__PURE__ */ memo2(/* @__PURE__ */ forwardRef6(({ icon, classNames, size, ...props }, forwardedRef) => {
467
- var _effect = _useSignals7();
468
- try {
469
- const { tx } = useThemeContext();
470
- const href = useIconHref(icon);
471
- return /* @__PURE__ */ React7.createElement("svg", {
472
- ...props,
473
- className: tx("icon.root", "icon", {
474
- size
475
- }, classNames),
476
- ref: forwardedRef
477
- }, /* @__PURE__ */ React7.createElement("use", {
478
- href
479
- }));
480
- } finally {
481
- _effect.f();
482
- }
483
- }));
484
-
485
- // src/components/Tooltip/Tooltip.tsx
486
- import { useSignals as _useSignals8 } from "@preact-signals/safe-react/tracking";
487
- import { composeEventHandlers } from "@radix-ui/primitive";
488
- import { useComposedRefs } from "@radix-ui/react-compose-refs";
489
- import { createContextScope } from "@radix-ui/react-context";
490
- import { DismissableLayer } from "@radix-ui/react-dismissable-layer";
491
- import { useId as useId2 } from "@radix-ui/react-id";
492
- import * as PopperPrimitive from "@radix-ui/react-popper";
493
- import { createPopperScope } from "@radix-ui/react-popper";
494
- import { Portal as PortalPrimitive } from "@radix-ui/react-portal";
495
- import { Presence } from "@radix-ui/react-presence";
496
- import { Primitive as Primitive6 } from "@radix-ui/react-primitive";
497
- import { Slottable } from "@radix-ui/react-slot";
498
- import { useControllableState } from "@radix-ui/react-use-controllable-state";
499
- import * as VisuallyHiddenPrimitive from "@radix-ui/react-visually-hidden";
500
- import React8, { forwardRef as forwardRef7, useCallback as useCallback3, useEffect as useEffect2, useMemo, useRef, useState as useState4 } from "react";
501
- var [createTooltipContext, createTooltipScope] = createContextScope("Tooltip", [
502
- createPopperScope
503
- ]);
504
- var usePopperScope = createPopperScope();
505
- var DEFAULT_DELAY_DURATION = 700;
506
- var TOOLTIP_OPEN = "tooltip.open";
507
- var TOOLTIP_NAME = "Tooltip";
508
- var [TooltipContextProvider, useTooltipContext] = createTooltipContext(TOOLTIP_NAME);
509
- var TooltipProvider = (props) => {
510
- var _effect = _useSignals8();
511
- try {
512
- const { __scopeTooltip, children, open: openProp, defaultOpen = false, onOpenChange, disableHoverableContent = false, delayDuration = DEFAULT_DELAY_DURATION, skipDelayDuration = 300 } = props;
513
- const isOpenDelayedRef = useRef(true);
514
- const isPointerInTransitRef = useRef(false);
515
- const skipDelayTimerRef = useRef(0);
516
- useEffect2(() => {
517
- const skipDelayTimer = skipDelayTimerRef.current;
518
- return () => window.clearTimeout(skipDelayTimer);
519
- }, []);
520
- const popperScope = usePopperScope(__scopeTooltip);
521
- const [trigger, setTrigger] = useState4(null);
522
- const [content, setContent] = useState4("");
523
- const [side, setSide] = useState4(void 0);
524
- const triggerRef = useRef(trigger);
525
- const handleTriggerChange = useCallback3((nextTrigger) => {
526
- setTrigger(nextTrigger);
527
- triggerRef.current = nextTrigger;
528
- setContent(nextTrigger?.getAttribute("data-tooltip-content") ?? "");
529
- setSide(nextTrigger?.getAttribute("data-tooltip-side") ?? void 0);
530
- }, []);
531
- const contentId = useId2();
532
- const openTimerRef = useRef(0);
533
- const wasOpenDelayedRef = useRef(false);
534
- const handleOpenChange = useCallback3((open2) => {
535
- if (open2) {
536
- window.clearTimeout(skipDelayTimerRef.current);
537
- isOpenDelayedRef.current = false;
538
- document.dispatchEvent(new CustomEvent(TOOLTIP_OPEN));
539
- } else {
540
- window.clearTimeout(skipDelayTimerRef.current);
541
- skipDelayTimerRef.current = window.setTimeout(() => isOpenDelayedRef.current = true, skipDelayDuration);
542
- }
543
- onOpenChange?.(open2);
544
- }, [
545
- skipDelayDuration,
546
- onOpenChange
547
- ]);
548
- const [open = false, setOpen] = useControllableState({
549
- prop: openProp,
550
- defaultProp: defaultOpen,
551
- onChange: handleOpenChange
552
- });
553
- const stateAttribute = useMemo(() => {
554
- return open ? wasOpenDelayedRef.current ? "delayed-open" : "instant-open" : "closed";
555
- }, [
556
- open
557
- ]);
558
- const handleOpen = useCallback3(() => {
559
- window.clearTimeout(openTimerRef.current);
560
- openTimerRef.current = 0;
561
- wasOpenDelayedRef.current = false;
562
- setOpen(true);
563
- }, [
564
- setOpen
565
- ]);
566
- const handleClose = useCallback3(() => {
567
- window.clearTimeout(openTimerRef.current);
568
- openTimerRef.current = 0;
569
- setOpen(false);
570
- }, [
571
- setOpen
572
- ]);
573
- const handleDelayedOpen = useCallback3(() => {
574
- window.clearTimeout(openTimerRef.current);
575
- openTimerRef.current = window.setTimeout(() => {
576
- wasOpenDelayedRef.current = true;
577
- setOpen(true);
578
- openTimerRef.current = 0;
579
- }, delayDuration);
580
- }, [
581
- delayDuration,
582
- setOpen
583
- ]);
584
- useEffect2(() => {
585
- return () => {
586
- if (openTimerRef.current) {
587
- window.clearTimeout(openTimerRef.current);
588
- openTimerRef.current = 0;
589
- }
590
- };
591
- }, []);
592
- const { tx } = useThemeContext();
593
- const elevation = useElevationContext();
594
- return /* @__PURE__ */ React8.createElement(PopperPrimitive.Root, popperScope, /* @__PURE__ */ React8.createElement(TooltipContextProvider, {
595
- scope: __scopeTooltip,
596
- contentId,
597
- open,
598
- stateAttribute,
599
- trigger,
600
- onTriggerChange: handleTriggerChange,
601
- onTriggerEnter: useCallback3(() => {
602
- if (isOpenDelayedRef.current) {
603
- handleDelayedOpen();
604
- } else {
605
- handleOpen();
606
- }
607
- }, [
608
- isOpenDelayedRef,
609
- handleDelayedOpen,
610
- handleOpen
611
- ]),
612
- onTriggerLeave: useCallback3(() => {
613
- if (disableHoverableContent) {
614
- handleClose();
615
- } else {
616
- window.clearTimeout(openTimerRef.current);
617
- openTimerRef.current = 0;
618
- }
619
- }, [
620
- handleClose,
621
- disableHoverableContent
622
- ]),
623
- onOpen: handleOpen,
624
- onClose: handleClose,
625
- disableHoverableContent,
626
- isPointerInTransitRef,
627
- onPointerInTransitChange: useCallback3((inTransit) => {
628
- isPointerInTransitRef.current = inTransit;
629
- }, [])
630
- }, /* @__PURE__ */ React8.createElement(TooltipContent, {
631
- side,
632
- className: tx("tooltip.content", "tooltip", {
633
- elevation
634
- })
635
- }, content, /* @__PURE__ */ React8.createElement(TooltipArrow, {
636
- className: tx("tooltip.arrow", "tooltip__arrow")
637
- })), /* @__PURE__ */ React8.createElement(TooltipVirtualTrigger, {
638
- virtualRef: triggerRef
639
- }), children));
640
- } finally {
641
- _effect.f();
642
- }
643
- };
644
- TooltipProvider.displayName = TOOLTIP_NAME;
645
- var TooltipVirtualTrigger = ({ virtualRef, __scopeTooltip }) => {
646
- var _effect = _useSignals8();
647
- try {
648
- const popperScope = usePopperScope(__scopeTooltip);
649
- return /* @__PURE__ */ React8.createElement(PopperPrimitive.Anchor, {
650
- asChild: true,
651
- ...popperScope,
652
- virtualRef
653
- });
654
- } finally {
655
- _effect.f();
656
- }
657
- };
658
- var TRIGGER_NAME = "TooltipTrigger";
659
- var TooltipTrigger = /* @__PURE__ */ forwardRef7((props, forwardedRef) => {
660
- var _effect = _useSignals8();
661
- try {
662
- const {
663
- __scopeTooltip,
664
- onInteract,
665
- // TODO(thure): Pass `delayDuration` into the context.
666
- delayDuration: _delayDuration,
667
- side,
668
- content,
669
- ...triggerProps
670
- } = props;
671
- const context = useTooltipContext(TRIGGER_NAME, __scopeTooltip);
672
- const ref = useRef(null);
673
- const composedRefs = useComposedRefs(forwardedRef, ref);
674
- const isPointerDownRef = useRef(false);
675
- const hasPointerMoveOpenedRef = useRef(false);
676
- const handlePointerUp = useCallback3(() => isPointerDownRef.current = false, []);
677
- useEffect2(() => {
678
- return () => document.removeEventListener("pointerup", handlePointerUp);
679
- }, [
680
- handlePointerUp
681
- ]);
682
- return /* @__PURE__ */ React8.createElement(Primitive6.button, {
683
- // We purposefully avoid adding `type=button` here because tooltip triggers are also
684
- // commonly anchors and the anchor `type` attribute signifies MIME type.
685
- "aria-describedby": context.open ? context.contentId : void 0,
686
- "data-state": context.stateAttribute,
687
- "data-tooltip-content": content,
688
- "data-tooltip-side": side,
689
- ...triggerProps,
690
- ref: composedRefs,
691
- onPointerMove: composeEventHandlers(props.onPointerMove, (event) => {
692
- if (event.pointerType === "touch") {
693
- return;
694
- }
695
- if (!hasPointerMoveOpenedRef.current && !context.isPointerInTransitRef.current) {
696
- onInteract?.(event);
697
- if (event.defaultPrevented) {
698
- return;
699
- }
700
- context.onTriggerChange(ref.current);
701
- context.onTriggerEnter();
702
- hasPointerMoveOpenedRef.current = true;
703
- }
704
- }),
705
- onPointerLeave: composeEventHandlers(props.onPointerLeave, () => {
706
- context.onTriggerLeave();
707
- hasPointerMoveOpenedRef.current = false;
708
- }),
709
- onPointerDown: composeEventHandlers(props.onPointerDown, () => {
710
- if (context.open) {
711
- context.onClose();
712
- }
713
- isPointerDownRef.current = true;
714
- document.addEventListener("pointerup", handlePointerUp, {
715
- once: true
716
- });
717
- }),
718
- onFocus: props.onFocus,
719
- onBlur: composeEventHandlers(props.onBlur, context.onClose),
720
- onClick: composeEventHandlers(props.onClick, context.onClose)
721
- });
722
- } finally {
723
- _effect.f();
724
- }
725
- });
726
- TooltipTrigger.displayName = TRIGGER_NAME;
727
- var PORTAL_NAME = "TooltipPortal";
728
- var [PortalProvider, usePortalContext] = createTooltipContext(PORTAL_NAME, {
729
- forceMount: void 0
730
- });
731
- var TooltipPortal = (props) => {
732
- var _effect = _useSignals8();
733
- try {
734
- const { __scopeTooltip, forceMount, children, container } = props;
735
- const context = useTooltipContext(PORTAL_NAME, __scopeTooltip);
736
- return /* @__PURE__ */ React8.createElement(PortalProvider, {
737
- scope: __scopeTooltip,
738
- forceMount
739
- }, /* @__PURE__ */ React8.createElement(Presence, {
740
- present: forceMount || context.open
741
- }, /* @__PURE__ */ React8.createElement(PortalPrimitive, {
742
- asChild: true,
743
- container
744
- }, children)));
745
- } finally {
746
- _effect.f();
747
- }
748
- };
749
- TooltipPortal.displayName = PORTAL_NAME;
750
- var CONTENT_NAME = "TooltipContent";
751
- var TooltipContent = /* @__PURE__ */ forwardRef7((props, forwardedRef) => {
752
- var _effect = _useSignals8();
753
- try {
754
- const portalContext = usePortalContext(CONTENT_NAME, props.__scopeTooltip);
755
- const { forceMount = portalContext.forceMount, side = "top", ...contentProps } = props;
756
- const context = useTooltipContext(CONTENT_NAME, props.__scopeTooltip);
757
- return /* @__PURE__ */ React8.createElement(Presence, {
758
- present: forceMount || context.open
759
- }, context.disableHoverableContent ? /* @__PURE__ */ React8.createElement(TooltipContentImpl, {
760
- side,
761
- ...contentProps,
762
- ref: forwardedRef
763
- }) : /* @__PURE__ */ React8.createElement(TooltipContentHoverable, {
764
- side,
765
- ...contentProps,
766
- ref: forwardedRef
767
- }));
768
- } finally {
769
- _effect.f();
770
- }
771
- });
772
- var TooltipContentHoverable = /* @__PURE__ */ forwardRef7((props, forwardedRef) => {
773
- var _effect = _useSignals8();
774
- try {
775
- const context = useTooltipContext(CONTENT_NAME, props.__scopeTooltip);
776
- const ref = useRef(null);
777
- const composedRefs = useComposedRefs(forwardedRef, ref);
778
- const [pointerGraceArea, setPointerGraceArea] = useState4(null);
779
- const { trigger, onClose } = context;
780
- const content = ref.current;
781
- const { onPointerInTransitChange } = context;
782
- const handleRemoveGraceArea = useCallback3(() => {
783
- setPointerGraceArea(null);
784
- onPointerInTransitChange(false);
785
- }, [
786
- onPointerInTransitChange
787
- ]);
788
- const handleCreateGraceArea = useCallback3((event, hoverTarget) => {
789
- const currentTarget = event.currentTarget;
790
- const exitPoint = {
791
- x: event.clientX,
792
- y: event.clientY
793
- };
794
- const exitSide = getExitSideFromRect(exitPoint, currentTarget.getBoundingClientRect());
795
- const paddedExitPoints = getPaddedExitPoints(exitPoint, exitSide);
796
- const hoverTargetPoints = getPointsFromRect(hoverTarget.getBoundingClientRect());
797
- const graceArea = getHull([
798
- ...paddedExitPoints,
799
- ...hoverTargetPoints
800
- ]);
801
- setPointerGraceArea(graceArea);
802
- onPointerInTransitChange(true);
803
- }, [
804
- onPointerInTransitChange
805
- ]);
806
- useEffect2(() => {
807
- return () => handleRemoveGraceArea();
808
- }, [
809
- handleRemoveGraceArea
810
- ]);
811
- useEffect2(() => {
812
- if (trigger && content) {
813
- const handleTriggerLeave = (event) => handleCreateGraceArea(event, content);
814
- const handleContentLeave = (event) => handleCreateGraceArea(event, trigger);
815
- trigger.addEventListener("pointerleave", handleTriggerLeave);
816
- content.addEventListener("pointerleave", handleContentLeave);
817
- return () => {
818
- trigger.removeEventListener("pointerleave", handleTriggerLeave);
819
- content.removeEventListener("pointerleave", handleContentLeave);
820
- };
821
- }
822
- }, [
823
- trigger,
824
- content,
825
- handleCreateGraceArea,
826
- handleRemoveGraceArea
827
- ]);
828
- useEffect2(() => {
829
- if (pointerGraceArea) {
830
- const handleTrackPointerGrace = (event) => {
831
- const target = event.target;
832
- const pointerPosition = {
833
- x: event.clientX,
834
- y: event.clientY
835
- };
836
- const hasEnteredTarget = trigger?.contains(target) || content?.contains(target);
837
- const isPointerOutsideGraceArea = !isPointInPolygon(pointerPosition, pointerGraceArea);
838
- if (hasEnteredTarget) {
839
- handleRemoveGraceArea();
840
- } else if (isPointerOutsideGraceArea) {
841
- handleRemoveGraceArea();
842
- onClose();
843
- }
844
- };
845
- document.addEventListener("pointermove", handleTrackPointerGrace);
846
- return () => document.removeEventListener("pointermove", handleTrackPointerGrace);
847
- }
848
- }, [
849
- trigger,
850
- content,
851
- pointerGraceArea,
852
- onClose,
853
- handleRemoveGraceArea
854
- ]);
855
- return /* @__PURE__ */ React8.createElement(TooltipContentImpl, {
856
- ...props,
857
- ref: composedRefs
858
- });
859
- } finally {
860
- _effect.f();
861
- }
862
- });
863
- var [VisuallyHiddenContentContextProvider, useVisuallyHiddenContentContext] = createTooltipContext(TOOLTIP_NAME, {
864
- isInside: false
865
- });
866
- var TooltipContentImpl = /* @__PURE__ */ forwardRef7((props, forwardedRef) => {
867
- var _effect = _useSignals8();
868
- try {
869
- const { __scopeTooltip, children, "aria-label": ariaLabel, onEscapeKeyDown, onPointerDownOutside, ...contentProps } = props;
870
- const context = useTooltipContext(CONTENT_NAME, __scopeTooltip);
871
- const popperScope = usePopperScope(__scopeTooltip);
872
- const { onClose } = context;
873
- useEffect2(() => {
874
- document.addEventListener(TOOLTIP_OPEN, onClose);
875
- return () => document.removeEventListener(TOOLTIP_OPEN, onClose);
876
- }, [
877
- onClose
878
- ]);
879
- useEffect2(() => {
880
- if (context.trigger) {
881
- const handleScroll = (event) => {
882
- const target = event.target;
883
- if (target?.contains(context.trigger)) {
884
- onClose();
885
- }
886
- };
887
- window.addEventListener("scroll", handleScroll, {
888
- capture: true
889
- });
890
- return () => window.removeEventListener("scroll", handleScroll, {
891
- capture: true
892
- });
893
- }
894
- }, [
895
- context.trigger,
896
- onClose
897
- ]);
898
- return /* @__PURE__ */ React8.createElement(DismissableLayer, {
899
- asChild: true,
900
- disableOutsidePointerEvents: false,
901
- onEscapeKeyDown,
902
- onPointerDownOutside,
903
- onFocusOutside: (event) => event.preventDefault(),
904
- onDismiss: onClose
905
- }, /* @__PURE__ */ React8.createElement(PopperPrimitive.Content, {
906
- "data-state": context.stateAttribute,
907
- ...popperScope,
908
- ...contentProps,
909
- ref: forwardedRef,
910
- style: {
911
- ...contentProps.style,
912
- // re-namespace exposed content custom properties
913
- ...{
914
- "--radix-tooltip-content-transform-origin": "var(--radix-popper-transform-origin)",
915
- "--radix-tooltip-content-available-width": "var(--radix-popper-available-width)",
916
- "--radix-tooltip-content-available-height": "var(--radix-popper-available-height)",
917
- "--radix-tooltip-trigger-width": "var(--radix-popper-anchor-width)",
918
- "--radix-tooltip-trigger-height": "var(--radix-popper-anchor-height)"
919
- }
920
- }
921
- }, /* @__PURE__ */ React8.createElement(Slottable, null, children), /* @__PURE__ */ React8.createElement(VisuallyHiddenContentContextProvider, {
922
- scope: __scopeTooltip,
923
- isInside: true
924
- }, /* @__PURE__ */ React8.createElement(VisuallyHiddenPrimitive.Root, {
925
- id: context.contentId,
926
- role: "tooltip"
927
- }, ariaLabel || children))));
928
- } finally {
929
- _effect.f();
930
- }
931
- });
932
- TooltipContent.displayName = CONTENT_NAME;
933
- var ARROW_NAME = "TooltipArrow";
934
- var TooltipArrow = /* @__PURE__ */ forwardRef7((props, forwardedRef) => {
935
- var _effect = _useSignals8();
936
- try {
937
- const { __scopeTooltip, ...arrowProps } = props;
938
- const popperScope = usePopperScope(__scopeTooltip);
939
- const visuallyHiddenContentContext = useVisuallyHiddenContentContext(ARROW_NAME, __scopeTooltip);
940
- return visuallyHiddenContentContext.isInside ? null : /* @__PURE__ */ React8.createElement(PopperPrimitive.Arrow, {
941
- ...popperScope,
942
- ...arrowProps,
943
- ref: forwardedRef
944
- });
945
- } finally {
946
- _effect.f();
947
- }
948
- });
949
- TooltipArrow.displayName = ARROW_NAME;
950
- var getExitSideFromRect = (point, rect) => {
951
- const top = Math.abs(rect.top - point.y);
952
- const bottom = Math.abs(rect.bottom - point.y);
953
- const right = Math.abs(rect.right - point.x);
954
- const left = Math.abs(rect.left - point.x);
955
- switch (Math.min(top, bottom, right, left)) {
956
- case left:
957
- return "left";
958
- case right:
959
- return "right";
960
- case top:
961
- return "top";
962
- case bottom:
963
- return "bottom";
964
- default:
965
- throw new Error("unreachable");
966
- }
967
- };
968
- var getPaddedExitPoints = (exitPoint, exitSide, padding = 5) => {
969
- const paddedExitPoints = [];
970
- switch (exitSide) {
971
- case "top":
972
- paddedExitPoints.push({
973
- x: exitPoint.x - padding,
974
- y: exitPoint.y + padding
975
- }, {
976
- x: exitPoint.x + padding,
977
- y: exitPoint.y + padding
978
- });
979
- break;
980
- case "bottom":
981
- paddedExitPoints.push({
982
- x: exitPoint.x - padding,
983
- y: exitPoint.y - padding
984
- }, {
985
- x: exitPoint.x + padding,
986
- y: exitPoint.y - padding
987
- });
988
- break;
989
- case "left":
990
- paddedExitPoints.push({
991
- x: exitPoint.x + padding,
992
- y: exitPoint.y - padding
993
- }, {
994
- x: exitPoint.x + padding,
995
- y: exitPoint.y + padding
996
- });
997
- break;
998
- case "right":
999
- paddedExitPoints.push({
1000
- x: exitPoint.x - padding,
1001
- y: exitPoint.y - padding
1002
- }, {
1003
- x: exitPoint.x - padding,
1004
- y: exitPoint.y + padding
1005
- });
1006
- break;
1007
- }
1008
- return paddedExitPoints;
1009
- };
1010
- var getPointsFromRect = (rect) => {
1011
- const { top, right, bottom, left } = rect;
1012
- return [
1013
- {
1014
- x: left,
1015
- y: top
1016
- },
1017
- {
1018
- x: right,
1019
- y: top
1020
- },
1021
- {
1022
- x: right,
1023
- y: bottom
1024
- },
1025
- {
1026
- x: left,
1027
- y: bottom
1028
- }
1029
- ];
1030
- };
1031
- var isPointInPolygon = (point, polygon) => {
1032
- const { x, y } = point;
1033
- let inside = false;
1034
- for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
1035
- const xi = polygon[i].x;
1036
- const yi = polygon[i].y;
1037
- const xj = polygon[j].x;
1038
- const yj = polygon[j].y;
1039
- const intersect = yi > y !== yj > y && x < (xj - xi) * (y - yi) / (yj - yi) + xi;
1040
- if (intersect) {
1041
- inside = !inside;
1042
- }
1043
- }
1044
- return inside;
1045
- };
1046
- var getHull = (points) => {
1047
- const newPoints = points.slice();
1048
- newPoints.sort((a, b) => {
1049
- if (a.x < b.x) {
1050
- return -1;
1051
- } else if (a.x > b.x) {
1052
- return 1;
1053
- } else if (a.y < b.y) {
1054
- return -1;
1055
- } else if (a.y > b.y) {
1056
- return 1;
1057
- } else {
1058
- return 0;
1059
- }
1060
- });
1061
- return getHullPresorted(newPoints);
1062
- };
1063
- var getHullPresorted = (points) => {
1064
- if (points.length <= 1) {
1065
- return points.slice();
1066
- }
1067
- const upperHull = [];
1068
- for (let i = 0; i < points.length; i++) {
1069
- const p = points[i];
1070
- while (upperHull.length >= 2) {
1071
- const q = upperHull[upperHull.length - 1];
1072
- const r = upperHull[upperHull.length - 2];
1073
- if ((q.x - r.x) * (p.y - r.y) >= (q.y - r.y) * (p.x - r.x)) {
1074
- upperHull.pop();
1075
- } else {
1076
- break;
1077
- }
1078
- }
1079
- upperHull.push(p);
1080
- }
1081
- upperHull.pop();
1082
- const lowerHull = [];
1083
- for (let i = points.length - 1; i >= 0; i--) {
1084
- const p = points[i];
1085
- while (lowerHull.length >= 2) {
1086
- const q = lowerHull[lowerHull.length - 1];
1087
- const r = lowerHull[lowerHull.length - 2];
1088
- if ((q.x - r.x) * (p.y - r.y) >= (q.y - r.y) * (p.x - r.x)) {
1089
- lowerHull.pop();
1090
- } else {
1091
- break;
1092
- }
1093
- }
1094
- lowerHull.push(p);
1095
- }
1096
- lowerHull.pop();
1097
- if (upperHull.length === 1 && lowerHull.length === 1 && upperHull[0].x === lowerHull[0].x && upperHull[0].y === lowerHull[0].y) {
1098
- return upperHull;
1099
- } else {
1100
- return upperHull.concat(lowerHull);
1101
- }
1102
- };
1103
- var Tooltip = {
1104
- Provider: TooltipProvider,
1105
- Trigger: TooltipTrigger
1106
- };
1107
-
1108
- // src/components/Buttons/IconButton.tsx
1109
- var IconOnlyButton = /* @__PURE__ */ forwardRef8(({ noTooltip, tooltipPortal = true, tooltipSide, ...props }, forwardedRef) => {
1110
- var _effect = _useSignals9();
1111
- try {
1112
- if (noTooltip) {
1113
- return /* @__PURE__ */ React9.createElement(LabelledIconButton, {
1114
- ...props,
1115
- ref: forwardedRef
1116
- });
1117
- }
1118
- return /* @__PURE__ */ React9.createElement(Tooltip.Trigger, {
1119
- asChild: true,
1120
- content: props.label,
1121
- side: tooltipSide
1122
- }, /* @__PURE__ */ React9.createElement(LabelledIconButton, {
1123
- ...props,
1124
- ref: forwardedRef
1125
- }));
1126
- } finally {
1127
- _effect.f();
1128
- }
1129
- });
1130
- var LabelledIconButton = /* @__PURE__ */ forwardRef8(({ icon, size, iconOnly, label, classNames, iconClassNames, caretDown, ...props }, forwardedRef) => {
1131
- var _effect = _useSignals9();
1132
- try {
1133
- const { tx } = useThemeContext();
1134
- return /* @__PURE__ */ React9.createElement(Button, {
1135
- ...props,
1136
- classNames: tx("iconButton.root", "iconButton", {
1137
- iconOnly
1138
- }, classNames),
1139
- ref: forwardedRef
1140
- }, /* @__PURE__ */ React9.createElement(Icon, {
1141
- icon,
1142
- size,
1143
- classNames: iconClassNames
1144
- }), /* @__PURE__ */ React9.createElement("span", {
1145
- className: iconOnly ? "sr-only" : void 0
1146
- }, label), caretDown && /* @__PURE__ */ React9.createElement(Icon, {
1147
- size: 3,
1148
- icon: "ph--caret-down--bold"
1149
- }));
1150
- } finally {
1151
- _effect.f();
1152
- }
1153
- });
1154
- var IconButton = /* @__PURE__ */ forwardRef8((props, forwardedRef) => {
1155
- var _effect = _useSignals9();
1156
- try {
1157
- return props.iconOnly ? /* @__PURE__ */ React9.createElement(IconOnlyButton, {
1158
- ...props,
1159
- ref: forwardedRef
1160
- }) : /* @__PURE__ */ React9.createElement(LabelledIconButton, {
1161
- ...props,
1162
- ref: forwardedRef
1163
- });
1164
- } finally {
1165
- _effect.f();
1166
- }
1167
- });
1168
-
1169
- // src/components/Buttons/Toggle.tsx
1170
- import { useSignals as _useSignals10 } from "@preact-signals/safe-react/tracking";
1171
- import { Toggle as TogglePrimitive } from "@radix-ui/react-toggle";
1172
- import React10, { forwardRef as forwardRef9 } from "react";
1173
- var Toggle = /* @__PURE__ */ forwardRef9(({ defaultPressed, pressed, onPressedChange, ...props }, forwardedRef) => {
1174
- var _effect = _useSignals10();
1175
- try {
1176
- return /* @__PURE__ */ React10.createElement(TogglePrimitive, {
1177
- defaultPressed,
1178
- pressed,
1179
- onPressedChange,
1180
- asChild: true
1181
- }, /* @__PURE__ */ React10.createElement(Button, {
1182
- ...props,
1183
- ref: forwardedRef
1184
- }));
1185
- } finally {
1186
- _effect.f();
1187
- }
1188
- });
1189
-
1190
- // src/components/Buttons/ToggleGroup.tsx
1191
- import { useSignals as _useSignals11 } from "@preact-signals/safe-react/tracking";
1192
- import { ToggleGroup as ToggleGroupPrimitive, ToggleGroupItem as ToggleGroupItemPrimitive } from "@radix-ui/react-toggle-group";
1193
- import React11, { forwardRef as forwardRef10 } from "react";
1194
- var ToggleGroup = /* @__PURE__ */ forwardRef10(({ classNames, children, ...props }, forwardedRef) => {
1195
- var _effect = _useSignals11();
1196
- try {
1197
- return /* @__PURE__ */ React11.createElement(ToggleGroupPrimitive, {
1198
- ...props,
1199
- asChild: true
1200
- }, /* @__PURE__ */ React11.createElement(ButtonGroup, {
1201
- classNames,
1202
- children,
1203
- ref: forwardedRef
1204
- }));
1205
- } finally {
1206
- _effect.f();
1207
- }
1208
- });
1209
- var ToggleGroupItem = /* @__PURE__ */ forwardRef10(({ variant, elevation, density, classNames, children, ...props }, forwardedRef) => {
1210
- var _effect = _useSignals11();
1211
- try {
1212
- return /* @__PURE__ */ React11.createElement(ToggleGroupItemPrimitive, {
1213
- ...props,
1214
- asChild: true
1215
- }, /* @__PURE__ */ React11.createElement(Button, {
1216
- variant,
1217
- elevation,
1218
- density,
1219
- classNames,
1220
- children,
1221
- ref: forwardedRef
1222
- }));
1223
- } finally {
1224
- _effect.f();
1225
- }
1226
- });
1227
-
1228
- // src/components/Clipboard/ClipboardProvider.tsx
1229
- import { useSignals as _useSignals12 } from "@preact-signals/safe-react/tracking";
1230
- import React12, { createContext as createContext4, useCallback as useCallback4, useContext as useContext5, useState as useState5 } from "react";
1231
- var ClipboardContext = /* @__PURE__ */ createContext4({
1232
- textValue: "",
1233
- setTextValue: async (_) => {
1234
- }
1235
- });
1236
- var useClipboard = () => useContext5(ClipboardContext);
1237
- var ClipboardProvider = ({ children }) => {
1238
- var _effect = _useSignals12();
1239
- try {
1240
- const [textValue, setInternalTextValue] = useState5("");
1241
- const setTextValue = useCallback4(async (nextValue) => {
1242
- await navigator.clipboard.writeText(nextValue);
1243
- return setInternalTextValue(nextValue);
1244
- }, []);
1245
- return /* @__PURE__ */ React12.createElement(ClipboardContext.Provider, {
1246
- value: {
1247
- textValue,
1248
- setTextValue
1249
- }
1250
- }, children);
1251
- } finally {
1252
- _effect.f();
1253
- }
1254
- };
1255
-
1256
- // src/components/Clipboard/CopyButton.tsx
1257
- import { useSignals as _useSignals16 } from "@preact-signals/safe-react/tracking";
1258
- import React16 from "react";
1259
- import { mx as mx2 } from "@dxos/react-ui-theme";
1260
-
1261
- // src/components/ThemeProvider/ThemeProvider.tsx
1262
- import { useSignals as _useSignals15 } from "@preact-signals/safe-react/tracking";
1263
- import { createKeyborg } from "keyborg";
1264
- import React15, { createContext as createContext7, useEffect as useEffect3, useMemo as useMemo2 } from "react";
1265
-
1266
- // src/util/hasIosKeyboard.ts
1267
- var hasIosKeyboard = () => {
1268
- return !!navigator.userAgent.match(/iP(ad|od|hone).+Safari/);
1269
- };
1270
-
1271
- // src/components/DensityProvider/DensityProvider.tsx
1272
- import { useSignals as _useSignals13 } from "@preact-signals/safe-react/tracking";
1273
- import React13, { createContext as createContext5 } from "react";
1274
- var DensityContext = /* @__PURE__ */ createContext5({
1275
- density: "fine"
1276
- });
1277
- var DensityProvider = ({ density, children }) => {
1278
- var _effect = _useSignals13();
1279
- try {
1280
- return /* @__PURE__ */ React13.createElement(DensityContext.Provider, {
1281
- value: {
1282
- density
1283
- }
1284
- }, children);
1285
- } finally {
1286
- _effect.f();
1287
- }
1288
- };
1289
-
1290
- // src/components/ElevationProvider/ElevationProvider.tsx
1291
- import { useSignals as _useSignals14 } from "@preact-signals/safe-react/tracking";
1292
- import React14, { createContext as createContext6 } from "react";
1293
- var ElevationContext = /* @__PURE__ */ createContext6({
1294
- elevation: "base"
1295
- });
1296
- var ElevationProvider = ({ elevation, children }) => {
1297
- var _effect = _useSignals14();
1298
- try {
1299
- return /* @__PURE__ */ React14.createElement(ElevationContext.Provider, {
1300
- value: {
1301
- elevation
1302
- }
1303
- }, children);
1304
- } finally {
1305
- _effect.f();
1306
- }
1307
- };
1308
-
1309
- // src/components/ThemeProvider/ThemeProvider.tsx
1310
- var ThemeContext = /* @__PURE__ */ createContext7(void 0);
1311
- var ThemeProvider = ({ children, fallback = null, resourceExtensions, appNs, tx = (_path, defaultClassName, _styleProps, ..._options) => defaultClassName, themeMode = "dark", rootDensity = "fine", ...rest }) => {
1312
- var _effect = _useSignals15();
1313
- try {
1314
- useEffect3(() => {
1315
- if (document.defaultView) {
1316
- const kb = createKeyborg(document.defaultView);
1317
- kb.subscribe(handleInputModalityChange);
1318
- return () => kb.unsubscribe(handleInputModalityChange);
1319
- }
1320
- }, []);
1321
- const safeAreaPadding = useSafeArea();
1322
- const contextValue = useMemo2(() => ({
1323
- tx,
1324
- themeMode,
1325
- hasIosKeyboard: hasIosKeyboard(),
1326
- safeAreaPadding,
1327
- ...rest
1328
- }), [
1329
- tx,
1330
- themeMode,
1331
- safeAreaPadding,
1332
- rest
1333
- ]);
1334
- return /* @__PURE__ */ React15.createElement(ThemeContext.Provider, {
1335
- value: contextValue
1336
- }, /* @__PURE__ */ React15.createElement(TranslationsProvider, {
1337
- fallback,
1338
- resourceExtensions,
1339
- appNs
1340
- }, /* @__PURE__ */ React15.createElement(ElevationProvider, {
1341
- elevation: "base"
1342
- }, /* @__PURE__ */ React15.createElement(DensityProvider, {
1343
- density: rootDensity
1344
- }, children))));
1345
- } finally {
1346
- _effect.f();
1347
- }
1348
- };
1349
- var handleInputModalityChange = (isUsingKeyboard) => {
1350
- if (isUsingKeyboard) {
1351
- document.body.setAttribute("data-is-keyboard", "true");
1352
- } else {
1353
- document.body.removeAttribute("data-is-keyboard");
1354
- }
1355
- };
1356
-
1357
- // src/components/Clipboard/CopyButton.tsx
1358
- var inactiveLabelStyles = "invisible bs-px -mbe-px overflow-hidden";
1359
- var CopyButton = ({ classNames, value, size = 5, ...props }) => {
1360
- var _effect = _useSignals16();
1361
- try {
1362
- const { t } = useTranslation("os");
1363
- const { textValue, setTextValue } = useClipboard();
1364
- const isCopied = textValue === value;
1365
- return /* @__PURE__ */ React16.createElement(Button, {
1366
- ...props,
1367
- classNames: [
1368
- "inline-flex flex-col justify-center",
1369
- classNames
1370
- ],
1371
- onClick: () => setTextValue(value),
1372
- "data-testid": "copy-invitation"
1373
- }, /* @__PURE__ */ React16.createElement("div", {
1374
- role: "none",
1375
- className: mx2("flex gap-1 items-center", isCopied && inactiveLabelStyles)
1376
- }, /* @__PURE__ */ React16.createElement("span", {
1377
- className: "pli-1"
1378
- }, t("copy label")), /* @__PURE__ */ React16.createElement(Icon, {
1379
- icon: "ph--copy--regular",
1380
- size
1381
- })), /* @__PURE__ */ React16.createElement("div", {
1382
- role: "none",
1383
- className: mx2("flex gap-1 items-center", !isCopied && inactiveLabelStyles)
1384
- }, /* @__PURE__ */ React16.createElement("span", {
1385
- className: "pli-1"
1386
- }, t("copy success label")), /* @__PURE__ */ React16.createElement(Icon, {
1387
- icon: "ph--check--regular",
1388
- size
1389
- })));
1390
- } finally {
1391
- _effect.f();
1392
- }
1393
- };
1394
- var CopyButtonIconOnly = ({ __scopeTooltip, value, classNames, size, variant, ...props }) => {
1395
- var _effect = _useSignals16();
1396
- try {
1397
- const { t } = useTranslation("os");
1398
- const { textValue, setTextValue } = useClipboard();
1399
- const isCopied = textValue === value;
1400
- const label = isCopied ? t("copy success label") : props.label ?? t("copy label");
1401
- const { onOpen } = useTooltipContext("CopyButton", __scopeTooltip);
1402
- return /* @__PURE__ */ React16.createElement(IconButton, {
1403
- iconOnly: true,
1404
- label,
1405
- icon: "ph--copy--regular",
1406
- size,
1407
- variant,
1408
- classNames: [
1409
- "inline-flex flex-col justify-center",
1410
- classNames
1411
- ],
1412
- onClick: () => setTextValue(value).then(onOpen),
1413
- "data-testid": "copy-invitation"
1414
- });
1415
- } finally {
1416
- _effect.f();
1417
- }
1418
- };
1419
-
1420
- // src/components/Clipboard/index.ts
1421
- var Clipboard = {
1422
- Button: CopyButton,
1423
- IconButton: CopyButtonIconOnly,
1424
- Provider: ClipboardProvider
1425
- };
1426
-
1427
- // src/components/Dialogs/Dialog.tsx
1428
- import { useSignals as _useSignals17 } from "@preact-signals/safe-react/tracking";
1429
- import { createContext as createContext8 } from "@radix-ui/react-context";
1430
- import { Root as DialogRootPrimitive, DialogTrigger as DialogTriggerPrimitive, DialogPortal as DialogPortalPrimitive, DialogOverlay as DialogOverlayPrimitive, DialogTitle as DialogTitlePrimitive, DialogDescription as DialogDescriptionPrimitive, DialogClose as DialogClosePrimitive, DialogContent as DialogContentPrimitive } from "@radix-ui/react-dialog";
1431
- import React17, { forwardRef as forwardRef11 } from "react";
1432
- var DialogRoot = (props) => {
1433
- var _effect = _useSignals17();
1434
- try {
1435
- return /* @__PURE__ */ React17.createElement(ElevationProvider, {
1436
- elevation: "dialog"
1437
- }, /* @__PURE__ */ React17.createElement(DialogRootPrimitive, props));
1438
- } finally {
1439
- _effect.f();
1440
- }
1441
- };
1442
- var DialogTrigger = DialogTriggerPrimitive;
1443
- var DialogPortal = DialogPortalPrimitive;
1444
- var DialogTitle = /* @__PURE__ */ forwardRef11(({ classNames, srOnly, ...props }, forwardedRef) => {
1445
- var _effect = _useSignals17();
1446
- try {
1447
- const { tx } = useThemeContext();
1448
- return /* @__PURE__ */ React17.createElement(DialogTitlePrimitive, {
1449
- ...props,
1450
- className: tx("dialog.title", "dialog__title", {
1451
- srOnly
1452
- }, classNames),
1453
- ref: forwardedRef
1454
- });
1455
- } finally {
1456
- _effect.f();
1457
- }
1458
- });
1459
- var DialogDescription = /* @__PURE__ */ forwardRef11(({ classNames, srOnly, ...props }, forwardedRef) => {
1460
- var _effect = _useSignals17();
1461
- try {
1462
- const { tx } = useThemeContext();
1463
- return /* @__PURE__ */ React17.createElement(DialogDescriptionPrimitive, {
1464
- ...props,
1465
- className: tx("dialog.description", "dialog__description", {
1466
- srOnly
1467
- }, classNames),
1468
- ref: forwardedRef
1469
- });
1470
- } finally {
1471
- _effect.f();
1472
- }
1473
- });
1474
- var DialogClose = DialogClosePrimitive;
1475
- var DIALOG_OVERLAY_NAME = "DialogOverlay";
1476
- var DIALOG_CONTENT_NAME = "DialogContent";
1477
- var [OverlayLayoutProvider, useOverlayLayoutContext] = createContext8(DIALOG_OVERLAY_NAME, {});
1478
- var DialogOverlay = /* @__PURE__ */ forwardRef11(({ classNames, children, blockAlign, ...props }, forwardedRef) => {
1479
- var _effect = _useSignals17();
1480
- try {
1481
- const { tx } = useThemeContext();
1482
- return /* @__PURE__ */ React17.createElement(DialogOverlayPrimitive, {
1483
- ...props,
1484
- className: tx("dialog.overlay", "dialog__overlay", {}, classNames),
1485
- ref: forwardedRef,
1486
- "data-block-align": blockAlign
1487
- }, /* @__PURE__ */ React17.createElement(OverlayLayoutProvider, {
1488
- inOverlayLayout: true
1489
- }, children));
1490
- } finally {
1491
- _effect.f();
1492
- }
1493
- });
1494
- DialogOverlay.displayName = DIALOG_OVERLAY_NAME;
1495
- var DialogContent = /* @__PURE__ */ forwardRef11(({ classNames, children, inOverlayLayout: propsInOverlayLayout, ...props }, forwardedRef) => {
1496
- var _effect = _useSignals17();
1497
- try {
1498
- const { tx } = useThemeContext();
1499
- const { inOverlayLayout } = useOverlayLayoutContext(DIALOG_CONTENT_NAME);
1500
- return /* @__PURE__ */ React17.createElement(DialogContentPrimitive, {
1501
- // NOTE: Radix warning unless set to undefined.
1502
- // https://www.radix-ui.com/primitives/docs/components/dialog#description
1503
- "aria-describedby": void 0,
1504
- ...props,
1505
- className: tx("dialog.content", "dialog", {
1506
- inOverlayLayout: propsInOverlayLayout || inOverlayLayout
1507
- }, classNames),
1508
- ref: forwardedRef
1509
- }, children);
1510
- } finally {
1511
- _effect.f();
1512
- }
1513
- });
1514
- DialogContent.displayName = DIALOG_CONTENT_NAME;
1515
- var Dialog = {
1516
- Root: DialogRoot,
1517
- Trigger: DialogTrigger,
1518
- Portal: DialogPortal,
1519
- Overlay: DialogOverlay,
1520
- Content: DialogContent,
1521
- Title: DialogTitle,
1522
- Description: DialogDescription,
1523
- Close: DialogClose
1524
- };
1525
-
1526
- // src/components/Dialogs/AlertDialog.tsx
1527
- import { useSignals as _useSignals18 } from "@preact-signals/safe-react/tracking";
1528
- import { Root as AlertDialogRootPrimitive, AlertDialogTrigger as AlertDialogTriggerPrimitive, AlertDialogPortal as AlertDialogPortalPrimitive, AlertDialogOverlay as AlertDialogOverlayPrimitive, AlertDialogTitle as AlertDialogTitlePrimitive, AlertDialogDescription as AlertDialogDescriptionPrimitive, AlertDialogAction as AlertDialogActionPrimitive, AlertDialogCancel as AlertDialogCancelPrimitive, AlertDialogContent as AlertDialogContentPrimitive } from "@radix-ui/react-alert-dialog";
1529
- import { createContext as createContext9 } from "@radix-ui/react-context";
1530
- import React18, { forwardRef as forwardRef12 } from "react";
1531
- var AlertDialogRoot = (props) => {
1532
- var _effect = _useSignals18();
1533
- try {
1534
- return /* @__PURE__ */ React18.createElement(ElevationProvider, {
1535
- elevation: "dialog"
1536
- }, /* @__PURE__ */ React18.createElement(AlertDialogRootPrimitive, props));
1537
- } finally {
1538
- _effect.f();
1539
- }
1540
- };
1541
- var AlertDialogTrigger = AlertDialogTriggerPrimitive;
1542
- var AlertDialogPortal = AlertDialogPortalPrimitive;
1543
- var AlertDialogCancel = AlertDialogCancelPrimitive;
1544
- var AlertDialogAction = AlertDialogActionPrimitive;
1545
- var AlertDialogTitle = /* @__PURE__ */ forwardRef12(({ classNames, srOnly, ...props }, forwardedRef) => {
1546
- var _effect = _useSignals18();
1547
- try {
1548
- const { tx } = useThemeContext();
1549
- return /* @__PURE__ */ React18.createElement(AlertDialogTitlePrimitive, {
1550
- ...props,
1551
- className: tx("dialog.title", "dialog--alert__title", {
1552
- srOnly
1553
- }, classNames),
1554
- ref: forwardedRef
1555
- });
1556
- } finally {
1557
- _effect.f();
1558
- }
1559
- });
1560
- var AlertDialogDescription = /* @__PURE__ */ forwardRef12(({ classNames, srOnly, ...props }, forwardedRef) => {
1561
- var _effect = _useSignals18();
1562
- try {
1563
- const { tx } = useThemeContext();
1564
- return /* @__PURE__ */ React18.createElement(AlertDialogDescriptionPrimitive, {
1565
- ...props,
1566
- className: tx("dialog.description", "dialog--alert__description", {
1567
- srOnly
1568
- }, classNames),
1569
- ref: forwardedRef
1570
- });
1571
- } finally {
1572
- _effect.f();
1573
- }
1574
- });
1575
- var ALERT_DIALOG_OVERLAY_NAME = "AlertDialogOverlay";
1576
- var ALERT_DIALOG_CONTENT_NAME = "AlertDialogContent";
1577
- var [OverlayLayoutProvider2, useOverlayLayoutContext2] = createContext9(ALERT_DIALOG_OVERLAY_NAME, {
1578
- inOverlayLayout: false
1579
- });
1580
- var AlertDialogOverlay = /* @__PURE__ */ forwardRef12(({ classNames, children, blockAlign, ...props }, forwardedRef) => {
1581
- var _effect = _useSignals18();
1582
- try {
1583
- const { tx } = useThemeContext();
1584
- return /* @__PURE__ */ React18.createElement(AlertDialogOverlayPrimitive, {
1585
- ...props,
1586
- className: tx("dialog.overlay", "dialog--alert__overlay", {}, classNames, "data-[block-align=start]:justify-center", "data-[block-align=start]:items-start", "data-[block-align=center]:place-content-center"),
1587
- ref: forwardedRef,
1588
- "data-block-align": blockAlign
1589
- }, /* @__PURE__ */ React18.createElement(OverlayLayoutProvider2, {
1590
- inOverlayLayout: true
1591
- }, children));
1592
- } finally {
1593
- _effect.f();
1594
- }
1595
- });
1596
- AlertDialogOverlay.displayName = ALERT_DIALOG_OVERLAY_NAME;
1597
- var AlertDialogContent = /* @__PURE__ */ forwardRef12(({ classNames, children, ...props }, forwardedRef) => {
1598
- var _effect = _useSignals18();
1599
- try {
1600
- const { tx } = useThemeContext();
1601
- const { inOverlayLayout } = useOverlayLayoutContext2(ALERT_DIALOG_CONTENT_NAME);
1602
- return /* @__PURE__ */ React18.createElement(AlertDialogContentPrimitive, {
1603
- ...props,
1604
- className: tx("dialog.content", "dialog--alert", {
1605
- inOverlayLayout
1606
- }, classNames),
1607
- ref: forwardedRef
1608
- }, children);
1609
- } finally {
1610
- _effect.f();
1611
- }
1612
- });
1613
- AlertDialogContent.displayName = ALERT_DIALOG_CONTENT_NAME;
1614
- var AlertDialog = {
1615
- Root: AlertDialogRoot,
1616
- Trigger: AlertDialogTrigger,
1617
- Portal: AlertDialogPortal,
1618
- Overlay: AlertDialogOverlay,
1619
- Content: AlertDialogContent,
1620
- Title: AlertDialogTitle,
1621
- Description: AlertDialogDescription,
1622
- Cancel: AlertDialogCancel,
1623
- Action: AlertDialogAction
1624
- };
1625
-
1626
- // src/components/Input/Input.tsx
1627
- import { useSignals as _useSignals19 } from "@preact-signals/safe-react/tracking";
1628
- import { Root as CheckboxPrimitive } from "@radix-ui/react-checkbox";
1629
- import { useControllableState as useControllableState2 } from "@radix-ui/react-use-controllable-state";
1630
- import React19, { forwardRef as forwardRef13, useCallback as useCallback5 } from "react";
1631
- import { InputRoot, PinInput as PinInputPrimitive, TextInput as TextInputPrimitive, TextArea as TextAreaPrimitive, useInputContext, INPUT_NAME, Description as DescriptionPrimitive, DescriptionAndValidation as DescriptionAndValidationPrimitive, Label as LabelPrimitive, Validation as ValidationPrimitive } from "@dxos/react-input";
1632
- import { mx as mx3 } from "@dxos/react-ui-theme";
1633
- var Label = /* @__PURE__ */ forwardRef13(({ srOnly, classNames, children, ...props }, forwardedRef) => {
1634
- var _effect = _useSignals19();
1635
- try {
1636
- const { tx } = useThemeContext();
1637
- return /* @__PURE__ */ React19.createElement(LabelPrimitive, {
1638
- ...props,
1639
- className: tx("input.label", "input__label", {
1640
- srOnly
1641
- }, classNames),
1642
- ref: forwardedRef
1643
- }, children);
1644
- } finally {
1645
- _effect.f();
1646
- }
1647
- });
1648
- var Description = /* @__PURE__ */ forwardRef13(({ srOnly, classNames, children, ...props }, forwardedRef) => {
1649
- var _effect = _useSignals19();
1650
- try {
1651
- const { tx } = useThemeContext();
1652
- return /* @__PURE__ */ React19.createElement(DescriptionPrimitive, {
1653
- ...props,
1654
- className: tx("input.description", "input__description", {
1655
- srOnly
1656
- }, classNames),
1657
- ref: forwardedRef
1658
- }, children);
1659
- } finally {
1660
- _effect.f();
1661
- }
1662
- });
1663
- var Validation = /* @__PURE__ */ forwardRef13(({ __inputScope, srOnly, classNames, children, ...props }, forwardedRef) => {
1664
- var _effect = _useSignals19();
1665
- try {
1666
- const { tx } = useThemeContext();
1667
- const { validationValence } = useInputContext(INPUT_NAME, __inputScope);
1668
- return /* @__PURE__ */ React19.createElement(ValidationPrimitive, {
1669
- ...props,
1670
- className: tx("input.validation", `input__validation-message input__validation-message--${validationValence}`, {
1671
- srOnly,
1672
- validationValence
1673
- }, classNames),
1674
- ref: forwardedRef
1675
- }, children);
1676
- } finally {
1677
- _effect.f();
1678
- }
1679
- });
1680
- var DescriptionAndValidation = /* @__PURE__ */ forwardRef13(({ srOnly, classNames, children, ...props }, forwardedRef) => {
1681
- var _effect = _useSignals19();
1682
- try {
1683
- const { tx } = useThemeContext();
1684
- return /* @__PURE__ */ React19.createElement(DescriptionAndValidationPrimitive, {
1685
- ...props,
1686
- className: tx("input.descriptionAndValidation", "input__description-and-validation", {
1687
- srOnly
1688
- }, classNames),
1689
- ref: forwardedRef
1690
- }, children);
1691
- } finally {
1692
- _effect.f();
1693
- }
1694
- });
1695
- var PinInput = /* @__PURE__ */ forwardRef13(({ density: propsDensity, elevation: propsElevation, segmentClassName: propsSegmentClassName, inputClassName, variant, ...props }, forwardedRef) => {
1696
- var _effect = _useSignals19();
1697
- try {
1698
- const { hasIosKeyboard: hasIosKeyboard2 } = useThemeContext();
1699
- const { tx } = useThemeContext();
1700
- const density = useDensityContext(propsDensity);
1701
- const elevation = useElevationContext(propsElevation);
1702
- const segmentClassName = useCallback5(({ focused, validationValence }) => tx("input.input", "input--pin-segment", {
1703
- variant: "static",
1704
- focused,
1705
- disabled: props.disabled,
1706
- density,
1707
- elevation,
1708
- validationValence
1709
- }, propsSegmentClassName), [
1710
- tx,
1711
- props.disabled,
1712
- elevation,
1713
- propsElevation,
1714
- density
1715
- ]);
1716
- return /* @__PURE__ */ React19.createElement(PinInputPrimitive, {
1717
- ...props,
1718
- segmentClassName,
1719
- ...props.autoFocus && !hasIosKeyboard2 && {
1720
- autoFocus: true
1721
- },
1722
- inputClassName: tx("input.inputWithSegments", "input input--pin", {
1723
- disabled: props.disabled
1724
- }, inputClassName),
1725
- ref: forwardedRef
1726
- });
1727
- } finally {
1728
- _effect.f();
1729
- }
1730
- });
1731
- var TextInput = /* @__PURE__ */ forwardRef13(({ __inputScope, classNames, density: propsDensity, elevation: propsElevation, variant, ...props }, forwardedRef) => {
1732
- var _effect = _useSignals19();
1733
- try {
1734
- const { hasIosKeyboard: hasIosKeyboard2 } = useThemeContext();
1735
- const themeContextValue = useThemeContext();
1736
- const density = useDensityContext(propsDensity);
1737
- const elevation = useElevationContext(propsElevation);
1738
- const { validationValence } = useInputContext(INPUT_NAME, __inputScope);
1739
- const { tx } = themeContextValue;
1740
- return /* @__PURE__ */ React19.createElement(TextInputPrimitive, {
1741
- ...props,
1742
- className: tx("input.input", "input", {
1743
- variant,
1744
- disabled: props.disabled,
1745
- density,
1746
- elevation,
1747
- validationValence
1748
- }, classNames),
1749
- ...props.autoFocus && !hasIosKeyboard2 && {
1750
- autoFocus: true
1751
- },
1752
- ref: forwardedRef
1753
- });
1754
- } finally {
1755
- _effect.f();
1756
- }
1757
- });
1758
- var TextArea = /* @__PURE__ */ forwardRef13(({ __inputScope, classNames, density: propsDensity, elevation: propsElevation, variant, ...props }, forwardedRef) => {
1759
- var _effect = _useSignals19();
1760
- try {
1761
- const { hasIosKeyboard: hasIosKeyboard2 } = useThemeContext();
1762
- const { tx } = useThemeContext();
1763
- const density = useDensityContext(propsDensity);
1764
- const elevation = useElevationContext(propsElevation);
1765
- const { validationValence } = useInputContext(INPUT_NAME, __inputScope);
1766
- return /* @__PURE__ */ React19.createElement(TextAreaPrimitive, {
1767
- ...props,
1768
- className: tx("input.input", "input--text-area", {
1769
- variant,
1770
- disabled: props.disabled,
1771
- density,
1772
- elevation,
1773
- validationValence
1774
- }, "-mbe-labelSpacingBlock", classNames),
1775
- ...props.autoFocus && !hasIosKeyboard2 && {
1776
- autoFocus: true
1777
- },
1778
- ref: forwardedRef
1779
- });
1780
- } finally {
1781
- _effect.f();
1782
- }
1783
- });
1784
- var Checkbox = /* @__PURE__ */ forwardRef13(({ __inputScope, checked: propsChecked, defaultChecked: propsDefaultChecked, onCheckedChange: propsOnCheckedChange, size, weight = "bold", classNames, ...props }, forwardedRef) => {
1785
- var _effect = _useSignals19();
1786
- try {
1787
- const [checked, onCheckedChange] = useControllableState2({
1788
- prop: propsChecked,
1789
- defaultProp: propsDefaultChecked,
1790
- onChange: propsOnCheckedChange
1791
- });
1792
- const { id, validationValence, descriptionId, errorMessageId } = useInputContext(INPUT_NAME, __inputScope);
1793
- const { tx } = useThemeContext();
1794
- return /* @__PURE__ */ React19.createElement(CheckboxPrimitive, {
1795
- ...props,
1796
- checked,
1797
- onCheckedChange,
1798
- id,
1799
- "aria-describedby": descriptionId,
1800
- ...validationValence === "error" && {
1801
- "aria-invalid": "true",
1802
- "aria-errormessage": errorMessageId
1803
- },
1804
- className: tx("input.checkbox", "input--checkbox", {
1805
- size
1806
- }, "shrink-0", classNames),
1807
- ref: forwardedRef
1808
- }, /* @__PURE__ */ React19.createElement(Icon, {
1809
- icon: checked === "indeterminate" ? "ph--minus--regular" : "ph--check--regular",
1810
- classNames: tx("input.checkboxIndicator", "input--checkbox__indicator", {
1811
- size,
1812
- checked
1813
- })
1814
- }));
1815
- } finally {
1816
- _effect.f();
1817
- }
1818
- });
1819
- var Switch = /* @__PURE__ */ forwardRef13(({ __inputScope, checked: propsChecked, defaultChecked: propsDefaultChecked, onCheckedChange: propsOnCheckedChange, classNames, ...props }, forwardedRef) => {
1820
- var _effect = _useSignals19();
1821
- try {
1822
- const [checked, onCheckedChange] = useControllableState2({
1823
- prop: propsChecked,
1824
- defaultProp: propsDefaultChecked ?? false,
1825
- onChange: propsOnCheckedChange
1826
- });
1827
- const { id, validationValence, descriptionId, errorMessageId } = useInputContext(INPUT_NAME, __inputScope);
1828
- return /* @__PURE__ */ React19.createElement("input", {
1829
- type: "checkbox",
1830
- className: mx3("dx-checkbox--switch dx-focus-ring", classNames),
1831
- checked,
1832
- onChange: (event) => {
1833
- onCheckedChange(event.target.checked);
1834
- },
1835
- id,
1836
- "aria-describedby": descriptionId,
1837
- ...props,
1838
- ...validationValence === "error" && {
1839
- "aria-invalid": "true",
1840
- "aria-errormessage": errorMessageId
1841
- },
1842
- ref: forwardedRef
1843
- });
1844
- } finally {
1845
- _effect.f();
1846
- }
1847
- });
1848
- var Input = {
1849
- Root: InputRoot,
1850
- PinInput,
1851
- TextInput,
1852
- TextArea,
1853
- Checkbox,
1854
- Switch,
1855
- Label,
1856
- Description,
1857
- Validation,
1858
- DescriptionAndValidation
1859
- };
1860
-
1861
- // src/components/Lists/List.tsx
1862
- import { useSignals as _useSignals21 } from "@preact-signals/safe-react/tracking";
1863
- import { CaretDown, CaretRight } from "@phosphor-icons/react";
1864
- import { Slot as Slot6 } from "@radix-ui/react-slot";
1865
- import React21, { forwardRef as forwardRef14 } from "react";
1866
- import { List as ListPrimitive, ListItemHeading as ListPrimitiveItemHeading, ListItemOpenTrigger as ListPrimitiveItemOpenTrigger, ListItemCollapsibleContent, ListItem as ListPrimitiveItem, LIST_NAME, LIST_ITEM_NAME, useListContext, useListItemContext } from "@dxos/react-list";
1867
-
1868
- // src/components/Lists/ListDropIndicator.tsx
1869
- import { useSignals as _useSignals20 } from "@preact-signals/safe-react/tracking";
1870
- import React20 from "react";
1871
- var edgeToOrientationMap = {
1872
- top: "horizontal",
1873
- bottom: "horizontal",
1874
- left: "vertical",
1875
- right: "vertical"
1876
- };
1877
- var orientationStyles = {
1878
- horizontal: "h-[--line-thickness] left-[calc(var(--line-inset)+var(--terminal-radius))] right-[--line-inset] before:left-[--terminal-inset]",
1879
- vertical: "w-[--line-thickness] top-[calc(var(--line-inset)+var(--terminal-radius))] bottom-[--line-inset] before:top-[--terminal-inset]"
1880
- };
1881
- var edgeStyles = {
1882
- top: "top-[--line-offset] before:top-[--offset-terminal]",
1883
- right: "right-[--line-offset] before:right-[--offset-terminal]",
1884
- bottom: "bottom-[--line-offset] before:bottom-[--offset-terminal]",
1885
- left: "left-[--line-offset] before:left-[--offset-terminal]"
1886
- };
1887
- var strokeSize = 2;
1888
- var terminalSize = 8;
1889
- var offsetToAlignTerminalWithLine = (strokeSize - terminalSize) / 2;
1890
- var ListDropIndicator = ({ edge, gap = 0, lineInset = 0, terminalInset = lineInset - terminalSize }) => {
1891
- var _effect = _useSignals20();
1892
- try {
1893
- const orientation = edgeToOrientationMap[edge];
1894
- return /* @__PURE__ */ React20.createElement("div", {
1895
- role: "none",
1896
- style: {
1897
- "--line-thickness": `${strokeSize}px`,
1898
- "--line-offset": `calc(-0.5 * (${gap}px + ${strokeSize}px))`,
1899
- "--line-inset": `${lineInset}px`,
1900
- "--terminal-size": `${terminalSize}px`,
1901
- "--terminal-radius": `${terminalSize / 2}px`,
1902
- "--terminal-inset": `${terminalInset}px`,
1903
- "--offset-terminal": `${offsetToAlignTerminalWithLine}px`
1904
- },
1905
- className: `absolute z-10 pointer-events-none bg-accentSurface before:content-[''] before:w-[--terminal-size] before:h-[--terminal-size] box-border before:absolute before:border-[length:--line-thickness] before:border-solid before:border-accentSurface before:rounded-full ${orientationStyles[orientation]} ${edgeStyles[edge]}`
1906
- });
1907
- } finally {
1908
- _effect.f();
1909
- }
1910
- };
1911
-
1912
- // src/components/Lists/List.tsx
1913
- var List = /* @__PURE__ */ forwardRef14(({ classNames, children, ...props }, forwardedRef) => {
1914
- var _effect = _useSignals21();
1915
- try {
1916
- const { tx } = useThemeContext();
1917
- const density = useDensityContext(props.density);
1918
- return /* @__PURE__ */ React21.createElement(DensityProvider, {
1919
- density
1920
- }, /* @__PURE__ */ React21.createElement(ListPrimitive, {
1921
- ...props,
1922
- className: tx("list.root", "list", {}, classNames),
1923
- ref: forwardedRef
1924
- }, children));
1925
- } finally {
1926
- _effect.f();
1927
- }
1928
- });
1929
- var ListItemEndcap = /* @__PURE__ */ forwardRef14(({ children, classNames, asChild, ...props }, forwardedRef) => {
1930
- var _effect = _useSignals21();
1931
- try {
1932
- const Root7 = asChild ? Slot6 : "div";
1933
- const density = useDensityContext();
1934
- const { tx } = useThemeContext();
1935
- return /* @__PURE__ */ React21.createElement(Root7, {
1936
- ...!asChild && {
1937
- role: "none"
1938
- },
1939
- ...props,
1940
- className: tx("list.item.endcap", "list__listItem__endcap", {
1941
- density
1942
- }, classNames),
1943
- ref: forwardedRef
1944
- }, children);
1945
- } finally {
1946
- _effect.f();
1947
- }
1948
- });
1949
- var MockListItemOpenTrigger = ({ classNames, ...props }) => {
1950
- var _effect = _useSignals21();
1951
- try {
1952
- const density = useDensityContext();
1953
- const { tx } = useThemeContext();
1954
- return /* @__PURE__ */ React21.createElement("div", {
1955
- role: "none",
1956
- ...props,
1957
- className: tx("list.item.openTrigger", "list__listItem__openTrigger--mock", {
1958
- density
1959
- }, classNames)
1960
- });
1961
- } finally {
1962
- _effect.f();
1963
- }
1964
- };
1965
- var ListItemHeading = /* @__PURE__ */ forwardRef14(({ children, classNames, ...props }, forwardedRef) => {
1966
- var _effect = _useSignals21();
1967
- try {
1968
- const { tx } = useThemeContext();
1969
- const density = useDensityContext();
1970
- return /* @__PURE__ */ React21.createElement(ListPrimitiveItemHeading, {
1971
- ...props,
1972
- className: tx("list.item.heading", "list__listItem__heading", {
1973
- density
1974
- }, classNames),
1975
- ref: forwardedRef
1976
- }, children);
1977
- } finally {
1978
- _effect.f();
1979
- }
1980
- });
1981
- var ListItemOpenTrigger = /* @__PURE__ */ forwardRef14(({ __listItemScope, classNames, children, ...props }, forwardedRef) => {
1982
- var _effect = _useSignals21();
1983
- try {
1984
- const { tx } = useThemeContext();
1985
- const density = useDensityContext();
1986
- const { open } = useListItemContext(LIST_ITEM_NAME, __listItemScope);
1987
- const Icon3 = open ? CaretDown : CaretRight;
1988
- return /* @__PURE__ */ React21.createElement(ListPrimitiveItemOpenTrigger, {
1989
- ...props,
1990
- className: tx("list.item.openTrigger", "list__listItem__openTrigger", {
1991
- density
1992
- }, classNames),
1993
- ref: forwardedRef
1994
- }, children || /* @__PURE__ */ React21.createElement(Icon3, {
1995
- weight: "bold",
1996
- className: tx("list.item.openTriggerIcon", "list__listItem__openTrigger__icon", {})
1997
- }));
1998
- } finally {
1999
- _effect.f();
2000
- }
2001
- });
2002
- var ListItemRoot = /* @__PURE__ */ forwardRef14(({ classNames, children, ...props }, forwardedRef) => {
2003
- var _effect = _useSignals21();
2004
- try {
2005
- const { tx } = useThemeContext();
2006
- const density = useDensityContext();
2007
- return /* @__PURE__ */ React21.createElement(ListPrimitiveItem, {
2008
- ...props,
2009
- className: tx("list.item.root", "list__listItem", {
2010
- density,
2011
- collapsible: props.collapsible
2012
- }, classNames),
2013
- ref: forwardedRef
2014
- }, children);
2015
- } finally {
2016
- _effect.f();
2017
- }
2018
- });
2019
- var ListItem = {
2020
- Root: ListItemRoot,
2021
- Endcap: ListItemEndcap,
2022
- Heading: ListItemHeading,
2023
- OpenTrigger: ListItemOpenTrigger,
2024
- CollapsibleContent: ListItemCollapsibleContent,
2025
- MockOpenTrigger: MockListItemOpenTrigger,
2026
- DropIndicator: ListDropIndicator
2027
- };
2028
-
2029
- // src/components/Lists/Tree.tsx
2030
- import { useSignals as _useSignals23 } from "@preact-signals/safe-react/tracking";
2031
- import React23, { forwardRef as forwardRef15 } from "react";
2032
-
2033
- // src/components/Lists/TreeDropIndicator.tsx
2034
- import { useSignals as _useSignals22 } from "@preact-signals/safe-react/tracking";
2035
- import React22 from "react";
2036
- var edgeToOrientationMap2 = {
2037
- "reorder-above": "sibling",
2038
- "reorder-below": "sibling",
2039
- "make-child": "child",
2040
- reparent: "child"
2041
- };
2042
- var orientationStyles2 = {
2043
- // TODO(wittjosiah): Stop using left/right here.
2044
- sibling: "bs-[--line-thickness] left-[--horizontal-indent] right-0 bg-accentSurface before:left-[--negative-terminal-size]",
2045
- child: "is-full block-start-0 block-end-0 border-[length:--line-thickness] before:invisible"
2046
- };
2047
- var instructionStyles = {
2048
- "reorder-above": "block-start-[--line-offset] before:block-start-[--offset-terminal]",
2049
- "reorder-below": "block-end-[--line-offset] before:block-end-[--offset-terminal]",
2050
- "make-child": "border-accentSurface",
2051
- // TODO(wittjosiah): This is not occurring in the current implementation.
2052
- reparent: ""
2053
- };
2054
- var strokeSize2 = 2;
2055
- var terminalSize2 = 8;
2056
- var offsetToAlignTerminalWithLine2 = (strokeSize2 - terminalSize2) / 2;
2057
- var TreeDropIndicator = ({ instruction, gap = 0 }) => {
2058
- var _effect = _useSignals22();
2059
- try {
2060
- const lineOffset = `calc(-0.5 * (${gap}px + ${strokeSize2}px))`;
2061
- const isBlocked = instruction.type === "instruction-blocked";
2062
- const desiredInstruction = isBlocked ? instruction.desired : instruction;
2063
- const orientation = edgeToOrientationMap2[desiredInstruction.type];
2064
- if (isBlocked) {
2065
- return null;
2066
- }
2067
- return /* @__PURE__ */ React22.createElement("div", {
2068
- style: {
2069
- "--line-thickness": `${strokeSize2}px`,
2070
- "--line-offset": `${lineOffset}`,
2071
- "--terminal-size": `${terminalSize2}px`,
2072
- "--terminal-radius": `${terminalSize2 / 2}px`,
2073
- "--negative-terminal-size": `-${terminalSize2}px`,
2074
- "--offset-terminal": `${offsetToAlignTerminalWithLine2}px`,
2075
- "--horizontal-indent": `${desiredInstruction.currentLevel * desiredInstruction.indentPerLevel + 4}px`
2076
- },
2077
- className: `absolute z-10 pointer-events-none before:is-[--terminal-size] before:bs-[--terminal-size] box-border before:absolute before:border-[length:--line-thickness] before:border-solid before:border-accentSurface before:rounded-full ${orientationStyles2[orientation]} ${instructionStyles[desiredInstruction.type]}`
2078
- });
2079
- } finally {
2080
- _effect.f();
2081
- }
2082
- };
2083
-
2084
- // src/components/Lists/Tree.tsx
2085
- var TreeRoot = /* @__PURE__ */ forwardRef15((props, forwardedRef) => {
2086
- var _effect = _useSignals23();
2087
- try {
2088
- return /* @__PURE__ */ React23.createElement(List, {
2089
- ...props,
2090
- ref: forwardedRef
2091
- });
2092
- } finally {
2093
- _effect.f();
2094
- }
2095
- });
2096
- var TreeBranch = /* @__PURE__ */ forwardRef15(({ __listScope, ...props }, forwardedRef) => {
2097
- var _effect = _useSignals23();
2098
- try {
2099
- const { headingId } = useListItemContext(LIST_ITEM_NAME, __listScope);
2100
- return /* @__PURE__ */ React23.createElement(List, {
2101
- ...props,
2102
- "aria-labelledby": headingId,
2103
- ref: forwardedRef
2104
- });
2105
- } finally {
2106
- _effect.f();
2107
- }
2108
- });
2109
- var TreeItemRoot = /* @__PURE__ */ forwardRef15((props, forwardedRef) => {
2110
- var _effect = _useSignals23();
2111
- try {
2112
- return /* @__PURE__ */ React23.createElement(ListItem.Root, {
2113
- role: "treeitem",
2114
- ...props,
2115
- ref: forwardedRef
2116
- });
2117
- } finally {
2118
- _effect.f();
2119
- }
2120
- });
2121
- var TreeItemHeading = ListItem.Heading;
2122
- var TreeItemOpenTrigger = ListItem.OpenTrigger;
2123
- var MockTreeItemOpenTrigger = ListItem.MockOpenTrigger;
2124
- var TreeItemBody = ListItem.CollapsibleContent;
2125
- var Tree = {
2126
- Root: TreeRoot,
2127
- Branch: TreeBranch
2128
- };
2129
- var TreeItem = {
2130
- Root: TreeItemRoot,
2131
- Heading: TreeItemHeading,
2132
- Body: TreeItemBody,
2133
- OpenTrigger: TreeItemOpenTrigger,
2134
- MockOpenTrigger: MockTreeItemOpenTrigger,
2135
- DropIndicator: TreeDropIndicator
2136
- };
2137
-
2138
- // src/components/Lists/Treegrid.tsx
2139
- import { useSignals as _useSignals24 } from "@preact-signals/safe-react/tracking";
2140
- import { useArrowNavigationGroup, useFocusableGroup } from "@fluentui/react-tabster";
2141
- import { createContextScope as createContextScope2 } from "@radix-ui/react-context";
2142
- import { Primitive as Primitive7 } from "@radix-ui/react-primitive";
2143
- import { Slot as Slot7 } from "@radix-ui/react-slot";
2144
- import { useControllableState as useControllableState3 } from "@radix-ui/react-use-controllable-state";
2145
- import React24, { forwardRef as forwardRef16 } from "react";
2146
- var TREEGRID_ROW_NAME = "TreegridRow";
2147
- var [createTreegridRowContext, createTreegridRowScope] = createContextScope2(TREEGRID_ROW_NAME, []);
2148
- var [TreegridRowProvider, useTreegridRowContext] = createTreegridRowContext(TREEGRID_ROW_NAME);
2149
- var PATH_SEPARATOR = "~";
2150
- var PARENT_OF_SEPARATOR = " ";
2151
- var TreegridRoot = /* @__PURE__ */ forwardRef16(({ asChild, classNames, children, style, gridTemplateColumns, ...props }, forwardedRef) => {
2152
- var _effect = _useSignals24();
2153
- try {
2154
- const { tx } = useThemeContext();
2155
- const Root7 = asChild ? Slot7 : Primitive7.div;
2156
- const arrowNavigationAttrs = useArrowNavigationGroup({
2157
- axis: "vertical",
2158
- tabbable: false,
2159
- circular: true
2160
- });
2161
- return /* @__PURE__ */ React24.createElement(Root7, {
2162
- role: "treegrid",
2163
- ...arrowNavigationAttrs,
2164
- ...props,
2165
- className: tx("treegrid.root", "treegrid", {}, classNames),
2166
- style: {
2167
- ...style,
2168
- gridTemplateColumns
2169
- },
2170
- ref: forwardedRef
2171
- }, children);
2172
- } finally {
2173
- _effect.f();
2174
- }
2175
- });
2176
- var TreegridRow = /* @__PURE__ */ forwardRef16(({ __treegridRowScope, asChild, classNames, children, id, parentOf, open: propsOpen, defaultOpen, onOpenChange: propsOnOpenChange, ...props }, forwardedRef) => {
2177
- var _effect = _useSignals24();
2178
- try {
2179
- const { tx } = useThemeContext();
2180
- const Root7 = asChild ? Slot7 : Primitive7.div;
2181
- const pathParts = id.split(PATH_SEPARATOR);
2182
- const level = pathParts.length - 1;
2183
- const [open, onOpenChange] = useControllableState3({
2184
- prop: propsOpen,
2185
- onChange: propsOnOpenChange,
2186
- defaultProp: defaultOpen
2187
- });
2188
- const focusableGroupAttrs = useFocusableGroup({
2189
- tabBehavior: "limited"
2190
- });
2191
- const arrowGroupAttrs = useArrowNavigationGroup({
2192
- axis: "horizontal",
2193
- tabbable: false,
2194
- circular: false,
2195
- memorizeCurrent: false
2196
- });
2197
- return /* @__PURE__ */ React24.createElement(TreegridRowProvider, {
2198
- open,
2199
- onOpenChange,
2200
- scope: __treegridRowScope
2201
- }, /* @__PURE__ */ React24.createElement(Root7, {
2202
- role: "row",
2203
- "aria-level": level,
2204
- className: tx("treegrid.row", "treegrid__row", {
2205
- level
2206
- }, classNames),
2207
- ...parentOf && {
2208
- "aria-expanded": open,
2209
- "aria-owns": parentOf
2210
- },
2211
- tabIndex: 0,
2212
- ...focusableGroupAttrs,
2213
- ...props,
2214
- id,
2215
- ref: forwardedRef
2216
- }, /* @__PURE__ */ React24.createElement("div", {
2217
- role: "none",
2218
- className: "contents",
2219
- ...arrowGroupAttrs
2220
- }, children)));
2221
- } finally {
2222
- _effect.f();
2223
- }
2224
- });
2225
- var TreegridCell = /* @__PURE__ */ forwardRef16(({ classNames, children, indent, ...props }, forwardedRef) => {
2226
- var _effect = _useSignals24();
2227
- try {
2228
- const { tx } = useThemeContext();
2229
- return /* @__PURE__ */ React24.createElement("div", {
2230
- role: "gridcell",
2231
- className: tx("treegrid.cell", "treegrid__cell", {
2232
- indent
2233
- }, classNames),
2234
- ...props,
2235
- ref: forwardedRef
2236
- }, children);
2237
- } finally {
2238
- _effect.f();
2239
- }
2240
- });
2241
- var Treegrid = {
2242
- Root: TreegridRoot,
2243
- Row: TreegridRow,
2244
- Cell: TreegridCell,
2245
- PARENT_OF_SEPARATOR,
2246
- PATH_SEPARATOR,
2247
- createTreegridRowScope,
2248
- useTreegridRowContext
2249
- };
2250
-
2251
- // src/components/Main/Main.tsx
2252
- import { useSignals as _useSignals25 } from "@preact-signals/safe-react/tracking";
2253
- import { createContext as createContext10 } from "@radix-ui/react-context";
2254
- import { Root as DialogRoot2, DialogContent as DialogContent2, DialogTitle as DialogTitle2 } from "@radix-ui/react-dialog";
2255
- import { Primitive as Primitive8 } from "@radix-ui/react-primitive";
2256
- import { Slot as Slot8 } from "@radix-ui/react-slot";
2257
- import { useControllableState as useControllableState4 } from "@radix-ui/react-use-controllable-state";
2258
- import React25, { forwardRef as forwardRef17, useCallback as useCallback7, useEffect as useEffect5, useRef as useRef2, useState as useState7 } from "react";
2259
- import { log } from "@dxos/log";
2260
- import { useMediaQuery, useForwardedRef } from "@dxos/react-hooks";
2261
-
2262
- // src/components/Main/useSwipeToDismiss.ts
2263
- import { useCallback as useCallback6, useEffect as useEffect4, useState as useState6 } from "react";
2264
- var useSwipeToDismiss = (ref, {
2265
- onDismiss,
2266
- dismissThreshold = 64,
2267
- debounceThreshold = 8,
2268
- offset = 0
2269
- /* side = 'inline-start' */
2270
- }) => {
2271
- const $root = ref.current;
2272
- const [motionState, setMotionState] = useState6(0);
2273
- const [gestureStartX, setGestureStartX] = useState6(0);
2274
- const setIdle = useCallback6(() => {
2275
- setMotionState(0);
2276
- $root?.style.removeProperty("inset-inline-start");
2277
- $root?.style.setProperty("transition-duration", "200ms");
2278
- }, [
2279
- $root
2280
- ]);
2281
- const setFollowing = useCallback6(() => {
2282
- setMotionState(2);
2283
- $root?.style.setProperty("transition-duration", "0ms");
2284
- }, [
2285
- $root
2286
- ]);
2287
- const handlePointerDown = useCallback6(({ screenX }) => {
2288
- if (motionState === 0) {
2289
- setMotionState(1);
2290
- setGestureStartX(screenX);
2291
- }
2292
- }, [
2293
- motionState
2294
- ]);
2295
- const handlePointerMove = useCallback6(({ screenX }) => {
2296
- if ($root) {
2297
- const delta = Math.min(screenX - gestureStartX, 0);
2298
- switch (motionState) {
2299
- case 2:
2300
- if (Math.abs(delta) > dismissThreshold) {
2301
- setIdle();
2302
- onDismiss?.();
2303
- } else {
2304
- $root.style.setProperty("inset-inline-start", `${offset + delta}px`);
2305
- }
2306
- break;
2307
- case 1:
2308
- if (Math.abs(delta) > debounceThreshold) {
2309
- setFollowing();
2310
- }
2311
- break;
2312
- }
2313
- }
2314
- }, [
2315
- $root,
2316
- motionState,
2317
- gestureStartX
2318
- ]);
2319
- const handlePointerUp = useCallback6(() => {
2320
- setIdle();
2321
- }, [
2322
- setIdle
2323
- ]);
2324
- useEffect4(() => {
2325
- $root?.addEventListener("pointerdown", handlePointerDown);
2326
- return () => {
2327
- $root?.removeEventListener("pointerdown", handlePointerDown);
2328
- };
2329
- }, [
2330
- $root,
2331
- handlePointerDown
2332
- ]);
2333
- useEffect4(() => {
2334
- $root && document.documentElement.addEventListener("pointermove", handlePointerMove);
2335
- return () => {
2336
- document.documentElement.removeEventListener("pointermove", handlePointerMove);
2337
- };
2338
- }, [
2339
- $root,
2340
- handlePointerMove
2341
- ]);
2342
- useEffect4(() => {
2343
- $root && document.documentElement.addEventListener("pointerup", handlePointerUp);
2344
- return () => {
2345
- document.documentElement.removeEventListener("pointerup", handlePointerUp);
2346
- };
2347
- }, [
2348
- $root,
2349
- handlePointerUp
2350
- ]);
2351
- };
2352
-
2353
- // src/components/Main/Main.tsx
2354
- var __dxlog_file = "/__w/dxos/dxos/packages/ui/react-ui/src/components/Main/Main.tsx";
2355
- var MAIN_ROOT_NAME = "MainRoot";
2356
- var NAVIGATION_SIDEBAR_NAME = "NavigationSidebar";
2357
- var COMPLEMENTARY_SIDEBAR_NAME = "ComplementarySidebar";
2358
- var MAIN_NAME = "Main";
2359
- var GENERIC_CONSUMER_NAME = "GenericConsumer";
2360
- var landmarkAttr = "data-main-landmark";
2361
- var useLandmarkMover = (propsOnKeyDown, landmark) => {
2362
- const handleKeyDown = useCallback7((event) => {
2363
- const target = event.target;
2364
- if (event.target === event.currentTarget && event.key === "Tab" && target.hasAttribute(landmarkAttr)) {
2365
- event.preventDefault();
2366
- const landmarks = Array.from(document.querySelectorAll(`[${landmarkAttr}]:not([inert])`)).map((el) => el.hasAttribute(landmarkAttr) ? parseInt(el.getAttribute(landmarkAttr)) : NaN).sort();
2367
- const l = landmarks.length;
2368
- const cursor = landmarks.indexOf(parseInt(target.getAttribute(landmarkAttr)));
2369
- const nextLandmark = landmarks[(cursor + l + (event.getModifierState("Shift") ? -1 : 1)) % l];
2370
- document.querySelector(`[${landmarkAttr}="${nextLandmark}"]`)?.focus();
2371
- }
2372
- propsOnKeyDown?.(event);
2373
- }, [
2374
- propsOnKeyDown
2375
- ]);
2376
- const focusableGroupAttrs = window ? {} : {
2377
- tabBehavior: "limited",
2378
- ignoreDefaultKeydown: {
2379
- Tab: true
2380
- }
2381
- };
2382
- return {
2383
- onKeyDown: handleKeyDown,
2384
- [landmarkAttr]: landmark,
2385
- tabIndex: 0,
2386
- ...focusableGroupAttrs
2387
- };
2388
- };
2389
- var [MainProvider, useMainContext] = createContext10(MAIN_NAME, {
2390
- resizing: false,
2391
- navigationSidebarState: "closed",
2392
- setNavigationSidebarState: (nextState) => {
2393
- log.warn("Attempt to set sidebar state without initializing `MainRoot`", void 0, {
2394
- F: __dxlog_file,
2395
- L: 82,
2396
- S: void 0,
2397
- C: (f, a) => f(...a)
2398
- });
2399
- },
2400
- complementarySidebarState: "closed",
2401
- setComplementarySidebarState: (nextState) => {
2402
- log.warn("Attempt to set sidebar state without initializing `MainRoot`", void 0, {
2403
- F: __dxlog_file,
2404
- L: 87,
2405
- S: void 0,
2406
- C: (f, a) => f(...a)
2407
- });
2408
- }
2409
- });
2410
- var useSidebars = (consumerName = GENERIC_CONSUMER_NAME) => {
2411
- const { setNavigationSidebarState, navigationSidebarState, setComplementarySidebarState, complementarySidebarState } = useMainContext(consumerName);
2412
- return {
2413
- navigationSidebarState,
2414
- setNavigationSidebarState,
2415
- toggleNavigationSidebar: useCallback7(() => setNavigationSidebarState(navigationSidebarState === "expanded" ? "closed" : "expanded"), [
2416
- navigationSidebarState,
2417
- setNavigationSidebarState
2418
- ]),
2419
- openNavigationSidebar: useCallback7(() => setNavigationSidebarState("expanded"), []),
2420
- collapseNavigationSidebar: useCallback7(() => setNavigationSidebarState("collapsed"), []),
2421
- closeNavigationSidebar: useCallback7(() => setNavigationSidebarState("closed"), []),
2422
- complementarySidebarState,
2423
- setComplementarySidebarState,
2424
- toggleComplementarySidebar: useCallback7(() => setComplementarySidebarState(complementarySidebarState === "expanded" ? "closed" : "expanded"), [
2425
- complementarySidebarState,
2426
- setComplementarySidebarState
2427
- ]),
2428
- openComplementarySidebar: useCallback7(() => setComplementarySidebarState("expanded"), []),
2429
- collapseComplementarySidebar: useCallback7(() => setComplementarySidebarState("collapsed"), []),
2430
- closeComplementarySidebar: useCallback7(() => setComplementarySidebarState("closed"), [])
2431
- };
2432
- };
2433
- var resizeDebounce = 3e3;
2434
- var MainRoot = ({ navigationSidebarState: propsNavigationSidebarState, defaultNavigationSidebarState, onNavigationSidebarStateChange, complementarySidebarState: propsComplementarySidebarState, defaultComplementarySidebarState, onComplementarySidebarStateChange, children, ...props }) => {
2435
- var _effect = _useSignals25();
2436
- try {
2437
- const [isLg] = useMediaQuery("lg", {
2438
- ssr: false
2439
- });
2440
- const [navigationSidebarState = isLg ? "expanded" : "collapsed", setNavigationSidebarState] = useControllableState4({
2441
- prop: propsNavigationSidebarState,
2442
- defaultProp: defaultNavigationSidebarState,
2443
- onChange: onNavigationSidebarStateChange
2444
- });
2445
- const [complementarySidebarState = isLg ? "expanded" : "collapsed", setComplementarySidebarState] = useControllableState4({
2446
- prop: propsComplementarySidebarState,
2447
- defaultProp: defaultComplementarySidebarState,
2448
- onChange: onComplementarySidebarStateChange
2449
- });
2450
- const [resizing, setResizing] = useState7(false);
2451
- const resizeInterval = useRef2(null);
2452
- const handleResize = useCallback7(() => {
2453
- setResizing(true);
2454
- if (resizeInterval.current) {
2455
- clearTimeout(resizeInterval.current);
2456
- }
2457
- resizeInterval.current = setTimeout(() => {
2458
- setResizing(false);
2459
- resizeInterval.current = null;
2460
- }, resizeDebounce);
2461
- }, []);
2462
- useEffect5(() => {
2463
- window.addEventListener("resize", handleResize);
2464
- return () => window.removeEventListener("resize", handleResize);
2465
- }, [
2466
- handleResize
2467
- ]);
2468
- return /* @__PURE__ */ React25.createElement(MainProvider, {
2469
- ...props,
2470
- navigationSidebarState,
2471
- setNavigationSidebarState,
2472
- complementarySidebarState,
2473
- setComplementarySidebarState,
2474
- resizing
2475
- }, children);
2476
- } finally {
2477
- _effect.f();
2478
- }
2479
- };
2480
- MainRoot.displayName = MAIN_ROOT_NAME;
2481
- var handleOpenAutoFocus = (event) => {
2482
- !document.body.hasAttribute("data-is-keyboard") && event.preventDefault();
2483
- };
2484
- var MainSidebar = /* @__PURE__ */ forwardRef17(({ classNames, children, swipeToDismiss, onOpenAutoFocus, state, resizing, onStateChange, side, label, ...props }, forwardedRef) => {
2485
- var _effect = _useSignals25();
2486
- try {
2487
- const [isLg] = useMediaQuery("lg", {
2488
- ssr: false
2489
- });
2490
- const { tx } = useThemeContext();
2491
- const { t } = useTranslation();
2492
- const ref = useForwardedRef(forwardedRef);
2493
- const noopRef = useRef2(null);
2494
- useSwipeToDismiss(swipeToDismiss ? ref : noopRef, {
2495
- onDismiss: () => onStateChange?.("closed")
2496
- });
2497
- const handleKeyDown = useCallback7((event) => {
2498
- if (event.key === "Escape") {
2499
- event.target.closest("[data-tabster]")?.focus();
2500
- }
2501
- props.onKeyDown?.(event);
2502
- }, [
2503
- props.onKeyDown
2504
- ]);
2505
- const Root7 = isLg ? Primitive8.div : DialogContent2;
2506
- return /* @__PURE__ */ React25.createElement(DialogRoot2, {
2507
- open: state !== "closed",
2508
- "aria-label": toLocalizedString(label, t),
2509
- modal: false
2510
- }, !isLg && /* @__PURE__ */ React25.createElement(DialogTitle2, {
2511
- className: "sr-only"
2512
- }, toLocalizedString(label, t)), /* @__PURE__ */ React25.createElement(Root7, {
2513
- ...!isLg && {
2514
- forceMount: true,
2515
- tabIndex: -1,
2516
- onOpenAutoFocus: onOpenAutoFocus ?? handleOpenAutoFocus
2517
- },
2518
- ...props,
2519
- "data-side": side === "inline-end" ? "ie" : "is",
2520
- "data-state": state,
2521
- "data-resizing": resizing ? "true" : "false",
2522
- className: tx("main.sidebar", "main__sidebar", {}, classNames),
2523
- onKeyDown: handleKeyDown,
2524
- ...state === "closed" && {
2525
- inert: "true"
2526
- },
2527
- ref
2528
- }, children));
2529
- } finally {
2530
- _effect.f();
2531
- }
2532
- });
2533
- var MainNavigationSidebar = /* @__PURE__ */ forwardRef17((props, forwardedRef) => {
2534
- var _effect = _useSignals25();
2535
- try {
2536
- const { navigationSidebarState, setNavigationSidebarState, resizing } = useMainContext(NAVIGATION_SIDEBAR_NAME);
2537
- const mover = useLandmarkMover(props.onKeyDown, "0");
2538
- return /* @__PURE__ */ React25.createElement(MainSidebar, {
2539
- ...mover,
2540
- ...props,
2541
- state: navigationSidebarState,
2542
- onStateChange: setNavigationSidebarState,
2543
- resizing,
2544
- side: "inline-start",
2545
- ref: forwardedRef
2546
- });
2547
- } finally {
2548
- _effect.f();
2549
- }
2550
- });
2551
- MainNavigationSidebar.displayName = NAVIGATION_SIDEBAR_NAME;
2552
- var MainComplementarySidebar = /* @__PURE__ */ forwardRef17((props, forwardedRef) => {
2553
- var _effect = _useSignals25();
2554
- try {
2555
- const { complementarySidebarState, setComplementarySidebarState, resizing } = useMainContext(COMPLEMENTARY_SIDEBAR_NAME);
2556
- const mover = useLandmarkMover(props.onKeyDown, "2");
2557
- return /* @__PURE__ */ React25.createElement(MainSidebar, {
2558
- ...mover,
2559
- ...props,
2560
- state: complementarySidebarState,
2561
- onStateChange: setComplementarySidebarState,
2562
- resizing,
2563
- side: "inline-end",
2564
- ref: forwardedRef
2565
- });
2566
- } finally {
2567
- _effect.f();
2568
- }
2569
- });
2570
- MainNavigationSidebar.displayName = NAVIGATION_SIDEBAR_NAME;
2571
- var MainContent = /* @__PURE__ */ forwardRef17(({ asChild, classNames, bounce, handlesFocus, children, role, ...props }, forwardedRef) => {
2572
- var _effect = _useSignals25();
2573
- try {
2574
- const { navigationSidebarState, complementarySidebarState } = useMainContext(MAIN_NAME);
2575
- const { tx } = useThemeContext();
2576
- const Root7 = asChild ? Slot8 : role ? "div" : "main";
2577
- const mover = useLandmarkMover(props.onKeyDown, "1");
2578
- return /* @__PURE__ */ React25.createElement(Root7, {
2579
- role,
2580
- ...handlesFocus && {
2581
- ...mover
2582
- },
2583
- ...props,
2584
- "data-sidebar-inline-start-state": navigationSidebarState,
2585
- "data-sidebar-inline-end-state": complementarySidebarState,
2586
- "data-handles-focus": handlesFocus,
2587
- className: tx("main.content", "main", {
2588
- bounce,
2589
- handlesFocus
2590
- }, classNames),
2591
- ref: forwardedRef
2592
- }, children);
2593
- } finally {
2594
- _effect.f();
2595
- }
2596
- });
2597
- MainContent.displayName = MAIN_NAME;
2598
- var MainOverlay = /* @__PURE__ */ forwardRef17(({ classNames, ...props }, forwardedRef) => {
2599
- var _effect = _useSignals25();
2600
- try {
2601
- const [isLg] = useMediaQuery("lg", {
2602
- ssr: false
2603
- });
2604
- const { navigationSidebarState, setNavigationSidebarState, complementarySidebarState, setComplementarySidebarState } = useMainContext(MAIN_NAME);
2605
- const { tx } = useThemeContext();
2606
- return /* @__PURE__ */ React25.createElement("div", {
2607
- onClick: () => {
2608
- setNavigationSidebarState("collapsed");
2609
- setComplementarySidebarState("collapsed");
2610
- },
2611
- ...props,
2612
- className: tx("main.overlay", "main__overlay", {
2613
- isLg,
2614
- inlineStartSidebarOpen: navigationSidebarState,
2615
- inlineEndSidebarOpen: complementarySidebarState
2616
- }, classNames),
2617
- "data-state": navigationSidebarState === "expanded" || complementarySidebarState === "expanded" ? "open" : "closed",
2618
- "aria-hidden": "true",
2619
- ref: forwardedRef
2620
- });
2621
- } finally {
2622
- _effect.f();
2623
- }
2624
- });
2625
- var Main = {
2626
- Root: MainRoot,
2627
- Content: MainContent,
2628
- Overlay: MainOverlay,
2629
- NavigationSidebar: MainNavigationSidebar,
2630
- ComplementarySidebar: MainComplementarySidebar
2631
- };
2632
-
2633
- // src/components/Menus/ContextMenu.tsx
2634
- import { useSignals as _useSignals26 } from "@preact-signals/safe-react/tracking";
2635
- import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
2636
- import { Primitive as Primitive9 } from "@radix-ui/react-primitive";
2637
- import { Slot as Slot9 } from "@radix-ui/react-slot";
2638
- import React26, { forwardRef as forwardRef18 } from "react";
2639
-
2640
- // src/hooks/useSafeCollisionPadding.ts
2641
- import { useMemo as useMemo3 } from "react";
2642
- var propIsNumber = (prop) => Number.isFinite(prop);
2643
- var propsIsRecord = (prop) => !!(prop && typeof prop === "object");
2644
- var safePadding = (propsPadding, safePadding2, side) => {
2645
- return (propIsNumber(safePadding2[side]) ? safePadding2[side] : 0) + (propIsNumber(propsPadding) ? propsPadding : propsIsRecord(propsPadding) ? propsPadding[side] ?? 0 : 0);
2646
- };
2647
- var useSafeCollisionPadding = (collisionPadding) => {
2648
- const { safeAreaPadding } = useThemeContext();
2649
- return useMemo3(() => ({
2650
- top: safePadding(collisionPadding, safeAreaPadding, "top"),
2651
- right: safePadding(collisionPadding, safeAreaPadding, "right"),
2652
- bottom: safePadding(collisionPadding, safeAreaPadding, "bottom"),
2653
- left: safePadding(collisionPadding, safeAreaPadding, "left")
2654
- }), [
2655
- collisionPadding,
2656
- safeAreaPadding
2657
- ]);
2658
- };
2659
-
2660
- // src/components/Menus/ContextMenu.tsx
2661
- var ContextMenuRoot = ContextMenuPrimitive.ContextMenu;
2662
- var ContextMenuTrigger = ContextMenuPrimitive.Trigger;
2663
- var ContextMenuPortal = ContextMenuPrimitive.Portal;
2664
- var ContextMenuContent = /* @__PURE__ */ forwardRef18(({ classNames, children, collisionPadding = 8, ...props }, forwardedRef) => {
2665
- var _effect = _useSignals26();
2666
- try {
2667
- const { tx } = useThemeContext();
2668
- const elevation = useElevationContext();
2669
- const safeCollisionPadding = useSafeCollisionPadding(collisionPadding);
2670
- return /* @__PURE__ */ React26.createElement(ContextMenuPrimitive.Content, {
2671
- ...props,
2672
- collisionPadding: safeCollisionPadding,
2673
- className: tx("menu.content", "menu", {
2674
- elevation
2675
- }, classNames),
2676
- ref: forwardedRef
2677
- }, children);
2678
- } finally {
2679
- _effect.f();
2680
- }
2681
- });
2682
- var ContextMenuViewport = /* @__PURE__ */ forwardRef18(({ classNames, asChild, children, ...props }, forwardedRef) => {
2683
- var _effect = _useSignals26();
2684
- try {
2685
- const { tx } = useThemeContext();
2686
- const Root7 = asChild ? Slot9 : Primitive9.div;
2687
- return /* @__PURE__ */ React26.createElement(Root7, {
2688
- ...props,
2689
- className: tx("menu.viewport", "menu__viewport", {}, classNames),
2690
- ref: forwardedRef
2691
- }, children);
2692
- } finally {
2693
- _effect.f();
2694
- }
2695
- });
2696
- var ContextMenuArrow = /* @__PURE__ */ forwardRef18(({ classNames, ...props }, forwardedRef) => {
2697
- var _effect = _useSignals26();
2698
- try {
2699
- const { tx } = useThemeContext();
2700
- return /* @__PURE__ */ React26.createElement(ContextMenuPrimitive.Arrow, {
2701
- ...props,
2702
- className: tx("menu.arrow", "menu__arrow", {}, classNames),
2703
- ref: forwardedRef
2704
- });
2705
- } finally {
2706
- _effect.f();
2707
- }
2708
- });
2709
- var ContextMenuGroup = ContextMenuPrimitive.Group;
2710
- var ContextMenuItemIndicator = ContextMenuPrimitive.ItemIndicator;
2711
- var ContextMenuItem = /* @__PURE__ */ forwardRef18(({ classNames, ...props }, forwardedRef) => {
2712
- var _effect = _useSignals26();
2713
- try {
2714
- const { tx } = useThemeContext();
2715
- return /* @__PURE__ */ React26.createElement(ContextMenuPrimitive.Item, {
2716
- ...props,
2717
- className: tx("menu.item", "menu__item", {}, classNames),
2718
- ref: forwardedRef
2719
- });
2720
- } finally {
2721
- _effect.f();
2722
- }
2723
- });
2724
- var ContextMenuCheckboxItem = /* @__PURE__ */ forwardRef18(({ classNames, ...props }, forwardedRef) => {
2725
- var _effect = _useSignals26();
2726
- try {
2727
- const { tx } = useThemeContext();
2728
- return /* @__PURE__ */ React26.createElement(ContextMenuPrimitive.CheckboxItem, {
2729
- ...props,
2730
- className: tx("menu.item", "menu__item--checkbox", {}, classNames),
2731
- ref: forwardedRef
2732
- });
2733
- } finally {
2734
- _effect.f();
2735
- }
2736
- });
2737
- var ContextMenuSeparator = /* @__PURE__ */ forwardRef18(({ classNames, ...props }, forwardedRef) => {
2738
- var _effect = _useSignals26();
2739
- try {
2740
- const { tx } = useThemeContext();
2741
- return /* @__PURE__ */ React26.createElement(ContextMenuPrimitive.Separator, {
2742
- ...props,
2743
- className: tx("menu.separator", "menu__item", {}, classNames),
2744
- ref: forwardedRef
2745
- });
2746
- } finally {
2747
- _effect.f();
2748
- }
2749
- });
2750
- var ContextMenuGroupLabel = /* @__PURE__ */ forwardRef18(({ classNames, ...props }, forwardedRef) => {
2751
- var _effect = _useSignals26();
2752
- try {
2753
- const { tx } = useThemeContext();
2754
- return /* @__PURE__ */ React26.createElement(ContextMenuPrimitive.Label, {
2755
- ...props,
2756
- className: tx("menu.groupLabel", "menu__group__label", {}, classNames),
2757
- ref: forwardedRef
2758
- });
2759
- } finally {
2760
- _effect.f();
2761
- }
2762
- });
2763
- var ContextMenu2 = {
2764
- Root: ContextMenuRoot,
2765
- Trigger: ContextMenuTrigger,
2766
- Portal: ContextMenuPortal,
2767
- Content: ContextMenuContent,
2768
- Viewport: ContextMenuViewport,
2769
- Arrow: ContextMenuArrow,
2770
- Group: ContextMenuGroup,
2771
- Item: ContextMenuItem,
2772
- CheckboxItem: ContextMenuCheckboxItem,
2773
- ItemIndicator: ContextMenuItemIndicator,
2774
- Separator: ContextMenuSeparator,
2775
- GroupLabel: ContextMenuGroupLabel
2776
- };
2777
-
2778
- // src/components/Menus/DropdownMenu.tsx
2779
- import { useSignals as _useSignals27 } from "@preact-signals/safe-react/tracking";
2780
- import { composeEventHandlers as composeEventHandlers2 } from "@radix-ui/primitive";
2781
- import { composeRefs } from "@radix-ui/react-compose-refs";
2782
- import { createContextScope as createContextScope3 } from "@radix-ui/react-context";
2783
- import { useId as useId3 } from "@radix-ui/react-id";
2784
- import * as MenuPrimitive from "@radix-ui/react-menu";
2785
- import { createMenuScope } from "@radix-ui/react-menu";
2786
- import { Primitive as Primitive10 } from "@radix-ui/react-primitive";
2787
- import { Slot as Slot10 } from "@radix-ui/react-slot";
2788
- import { useControllableState as useControllableState5 } from "@radix-ui/react-use-controllable-state";
2789
- import React27, { useRef as useRef3, useCallback as useCallback8, forwardRef as forwardRef19, useEffect as useEffect6 } from "react";
2790
- var DROPDOWN_MENU_NAME = "DropdownMenu";
2791
- var [createDropdownMenuContext, createDropdownMenuScope] = createContextScope3(DROPDOWN_MENU_NAME, [
2792
- createMenuScope
2793
- ]);
2794
- var useMenuScope = createMenuScope();
2795
- var [DropdownMenuProvider, useDropdownMenuContext] = createDropdownMenuContext(DROPDOWN_MENU_NAME);
2796
- var DropdownMenuRoot = (props) => {
2797
- var _effect = _useSignals27();
2798
- try {
2799
- const { __scopeDropdownMenu, children, dir, open: openProp, defaultOpen, onOpenChange, modal = true } = props;
2800
- const menuScope = useMenuScope(__scopeDropdownMenu);
2801
- const triggerRef = useRef3(null);
2802
- const [open = false, setOpen] = useControllableState5({
2803
- prop: openProp,
2804
- defaultProp: defaultOpen,
2805
- onChange: onOpenChange
2806
- });
2807
- return /* @__PURE__ */ React27.createElement(DropdownMenuProvider, {
2808
- scope: __scopeDropdownMenu,
2809
- triggerId: useId3(),
2810
- triggerRef,
2811
- contentId: useId3(),
2812
- open,
2813
- onOpenChange: setOpen,
2814
- onOpenToggle: useCallback8(() => setOpen((prevOpen) => !prevOpen), [
2815
- setOpen
2816
- ]),
2817
- modal
2818
- }, /* @__PURE__ */ React27.createElement(MenuPrimitive.Root, {
2819
- ...menuScope,
2820
- open,
2821
- onOpenChange: setOpen,
2822
- dir,
2823
- modal
2824
- }, children));
2825
- } finally {
2826
- _effect.f();
2827
- }
2828
- };
2829
- DropdownMenuRoot.displayName = DROPDOWN_MENU_NAME;
2830
- var TRIGGER_NAME2 = "DropdownMenuTrigger";
2831
- var DropdownMenuTrigger = /* @__PURE__ */ forwardRef19((props, forwardedRef) => {
2832
- var _effect = _useSignals27();
2833
- try {
2834
- const { __scopeDropdownMenu, disabled = false, ...triggerProps } = props;
2835
- const context = useDropdownMenuContext(TRIGGER_NAME2, __scopeDropdownMenu);
2836
- const menuScope = useMenuScope(__scopeDropdownMenu);
2837
- return /* @__PURE__ */ React27.createElement(MenuPrimitive.Anchor, {
2838
- asChild: true,
2839
- ...menuScope
2840
- }, /* @__PURE__ */ React27.createElement(Primitive10.button, {
2841
- type: "button",
2842
- id: context.triggerId,
2843
- "aria-haspopup": "menu",
2844
- "aria-expanded": context.open,
2845
- "aria-controls": context.open ? context.contentId : void 0,
2846
- "data-state": context.open ? "open" : "closed",
2847
- "data-disabled": disabled ? "" : void 0,
2848
- disabled,
2849
- ...triggerProps,
2850
- ref: composeRefs(forwardedRef, context.triggerRef),
2851
- onPointerDown: composeEventHandlers2(props.onPointerDown, (event) => {
2852
- if (!disabled && event.button === 0 && event.ctrlKey === false) {
2853
- context.onOpenToggle();
2854
- if (!context.open) {
2855
- event.preventDefault();
2856
- }
2857
- }
2858
- }),
2859
- onKeyDown: composeEventHandlers2(props.onKeyDown, (event) => {
2860
- if (disabled) {
2861
- return;
2862
- }
2863
- if ([
2864
- "Enter",
2865
- " "
2866
- ].includes(event.key)) {
2867
- context.onOpenToggle();
2868
- }
2869
- if (event.key === "ArrowDown") {
2870
- context.onOpenChange(true);
2871
- }
2872
- if ([
2873
- "Enter",
2874
- " ",
2875
- "ArrowDown"
2876
- ].includes(event.key)) {
2877
- event.preventDefault();
2878
- }
2879
- })
2880
- }));
2881
- } finally {
2882
- _effect.f();
2883
- }
2884
- });
2885
- DropdownMenuTrigger.displayName = TRIGGER_NAME2;
2886
- var VIRTUAL_TRIGGER_NAME = "DropdownMenuVirtualTrigger";
2887
- var DropdownMenuVirtualTrigger = (props) => {
2888
- var _effect = _useSignals27();
2889
- try {
2890
- const { __scopeDropdownMenu, virtualRef } = props;
2891
- const context = useDropdownMenuContext(VIRTUAL_TRIGGER_NAME, __scopeDropdownMenu);
2892
- const menuScope = useMenuScope(__scopeDropdownMenu);
2893
- useEffect6(() => {
2894
- if (virtualRef.current) {
2895
- context.triggerRef.current = virtualRef.current;
2896
- }
2897
- });
2898
- return /* @__PURE__ */ React27.createElement(MenuPrimitive.Anchor, {
2899
- ...menuScope,
2900
- virtualRef
2901
- });
2902
- } finally {
2903
- _effect.f();
2904
- }
2905
- };
2906
- DropdownMenuVirtualTrigger.displayName = VIRTUAL_TRIGGER_NAME;
2907
- var PORTAL_NAME2 = "DropdownMenuPortal";
2908
- var DropdownMenuPortal = (props) => {
2909
- var _effect = _useSignals27();
2910
- try {
2911
- const { __scopeDropdownMenu, ...portalProps } = props;
2912
- const menuScope = useMenuScope(__scopeDropdownMenu);
2913
- return /* @__PURE__ */ React27.createElement(MenuPrimitive.Portal, {
2914
- ...menuScope,
2915
- ...portalProps
2916
- });
2917
- } finally {
2918
- _effect.f();
2919
- }
2920
- };
2921
- DropdownMenuPortal.displayName = PORTAL_NAME2;
2922
- var DropdownMenuViewport = /* @__PURE__ */ forwardRef19(({ classNames, asChild, children, ...props }, forwardedRef) => {
2923
- var _effect = _useSignals27();
2924
- try {
2925
- const { tx } = useThemeContext();
2926
- const Root7 = asChild ? Slot10 : Primitive10.div;
2927
- return /* @__PURE__ */ React27.createElement(Root7, {
2928
- ...props,
2929
- className: tx("menu.viewport", "menu__viewport", {}, classNames),
2930
- ref: forwardedRef
2931
- }, children);
2932
- } finally {
2933
- _effect.f();
2934
- }
2935
- });
2936
- var CONTENT_NAME2 = "DropdownMenuContent";
2937
- var DropdownMenuContent = /* @__PURE__ */ forwardRef19((props, forwardedRef) => {
2938
- var _effect = _useSignals27();
2939
- try {
2940
- const { __scopeDropdownMenu, classNames, collisionPadding = 8, ...contentProps } = props;
2941
- const { tx } = useThemeContext();
2942
- const context = useDropdownMenuContext(CONTENT_NAME2, __scopeDropdownMenu);
2943
- const elevation = useElevationContext();
2944
- const menuScope = useMenuScope(__scopeDropdownMenu);
2945
- const hasInteractedOutsideRef = useRef3(false);
2946
- const safeCollisionPadding = useSafeCollisionPadding(collisionPadding);
2947
- return /* @__PURE__ */ React27.createElement(MenuPrimitive.Content, {
2948
- id: context.contentId,
2949
- "aria-labelledby": context.triggerId,
2950
- ...menuScope,
2951
- ...contentProps,
2952
- collisionPadding: safeCollisionPadding,
2953
- ref: forwardedRef,
2954
- onCloseAutoFocus: composeEventHandlers2(props.onCloseAutoFocus, (event) => {
2955
- if (!hasInteractedOutsideRef.current) {
2956
- context.triggerRef.current?.focus();
2957
- }
2958
- hasInteractedOutsideRef.current = false;
2959
- event.preventDefault();
2960
- }),
2961
- onInteractOutside: composeEventHandlers2(props.onInteractOutside, (event) => {
2962
- const originalEvent = event.detail.originalEvent;
2963
- const ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true;
2964
- const isRightClick = originalEvent.button === 2 || ctrlLeftClick;
2965
- if (!context.modal || isRightClick) {
2966
- hasInteractedOutsideRef.current = true;
2967
- }
2968
- }),
2969
- className: tx("menu.content", "menu", {
2970
- elevation
2971
- }, classNames),
2972
- style: {
2973
- ...props.style,
2974
- // re-namespace exposed content custom properties
2975
- ...{
2976
- "--radix-dropdown-menu-content-transform-origin": "var(--radix-popper-transform-origin)",
2977
- "--radix-dropdown-menu-content-available-width": "var(--radix-popper-available-width)",
2978
- "--radix-dropdown-menu-content-available-height": "var(--radix-popper-available-height)",
2979
- "--radix-dropdown-menu-trigger-width": "var(--radix-popper-anchor-width)",
2980
- "--radix-dropdown-menu-trigger-height": "var(--radix-popper-anchor-height)"
2981
- }
2982
- }
2983
- });
2984
- } finally {
2985
- _effect.f();
2986
- }
2987
- });
2988
- DropdownMenuContent.displayName = CONTENT_NAME2;
2989
- var GROUP_NAME = "DropdownMenuGroup";
2990
- var DropdownMenuGroup = /* @__PURE__ */ forwardRef19((props, forwardedRef) => {
2991
- var _effect = _useSignals27();
2992
- try {
2993
- const { __scopeDropdownMenu, ...groupProps } = props;
2994
- const menuScope = useMenuScope(__scopeDropdownMenu);
2995
- return /* @__PURE__ */ React27.createElement(MenuPrimitive.Group, {
2996
- ...menuScope,
2997
- ...groupProps,
2998
- ref: forwardedRef
2999
- });
3000
- } finally {
3001
- _effect.f();
3002
- }
3003
- });
3004
- DropdownMenuGroup.displayName = GROUP_NAME;
3005
- var LABEL_NAME = "DropdownMenuLabel";
3006
- var DropdownMenuGroupLabel = /* @__PURE__ */ forwardRef19((props, forwardedRef) => {
3007
- var _effect = _useSignals27();
3008
- try {
3009
- const { __scopeDropdownMenu, classNames, ...labelProps } = props;
3010
- const menuScope = useMenuScope(__scopeDropdownMenu);
3011
- const { tx } = useThemeContext();
3012
- return /* @__PURE__ */ React27.createElement(MenuPrimitive.Label, {
3013
- ...menuScope,
3014
- ...labelProps,
3015
- className: tx("menu.groupLabel", "menu__group__label", {}, classNames),
3016
- ref: forwardedRef
3017
- });
3018
- } finally {
3019
- _effect.f();
3020
- }
3021
- });
3022
- DropdownMenuGroupLabel.displayName = LABEL_NAME;
3023
- var ITEM_NAME = "DropdownMenuItem";
3024
- var DropdownMenuItem = /* @__PURE__ */ forwardRef19((props, forwardedRef) => {
3025
- var _effect = _useSignals27();
3026
- try {
3027
- const { __scopeDropdownMenu, classNames, ...itemProps } = props;
3028
- const menuScope = useMenuScope(__scopeDropdownMenu);
3029
- const { tx } = useThemeContext();
3030
- return /* @__PURE__ */ React27.createElement(MenuPrimitive.Item, {
3031
- ...menuScope,
3032
- ...itemProps,
3033
- className: tx("menu.item", "menu__item", {}, classNames),
3034
- ref: forwardedRef
3035
- });
3036
- } finally {
3037
- _effect.f();
3038
- }
3039
- });
3040
- DropdownMenuItem.displayName = ITEM_NAME;
3041
- var CHECKBOX_ITEM_NAME = "DropdownMenuCheckboxItem";
3042
- var DropdownMenuCheckboxItem = /* @__PURE__ */ forwardRef19((props, forwardedRef) => {
3043
- var _effect = _useSignals27();
3044
- try {
3045
- const { __scopeDropdownMenu, classNames, ...checkboxItemProps } = props;
3046
- const menuScope = useMenuScope(__scopeDropdownMenu);
3047
- const { tx } = useThemeContext();
3048
- return /* @__PURE__ */ React27.createElement(MenuPrimitive.CheckboxItem, {
3049
- ...menuScope,
3050
- ...checkboxItemProps,
3051
- className: tx("menu.item", "menu__item--checkbox", {}, classNames),
3052
- ref: forwardedRef
3053
- });
3054
- } finally {
3055
- _effect.f();
3056
- }
3057
- });
3058
- DropdownMenuCheckboxItem.displayName = CHECKBOX_ITEM_NAME;
3059
- var RADIO_GROUP_NAME = "DropdownMenuRadioGroup";
3060
- var DropdownMenuRadioGroup = /* @__PURE__ */ forwardRef19((props, forwardedRef) => {
3061
- var _effect = _useSignals27();
3062
- try {
3063
- const { __scopeDropdownMenu, ...radioGroupProps } = props;
3064
- const menuScope = useMenuScope(__scopeDropdownMenu);
3065
- return /* @__PURE__ */ React27.createElement(MenuPrimitive.RadioGroup, {
3066
- ...menuScope,
3067
- ...radioGroupProps,
3068
- ref: forwardedRef
3069
- });
3070
- } finally {
3071
- _effect.f();
3072
- }
3073
- });
3074
- DropdownMenuRadioGroup.displayName = RADIO_GROUP_NAME;
3075
- var RADIO_ITEM_NAME = "DropdownMenuRadioItem";
3076
- var DropdownMenuRadioItem = /* @__PURE__ */ forwardRef19((props, forwardedRef) => {
3077
- var _effect = _useSignals27();
3078
- try {
3079
- const { __scopeDropdownMenu, ...radioItemProps } = props;
3080
- const menuScope = useMenuScope(__scopeDropdownMenu);
3081
- return /* @__PURE__ */ React27.createElement(MenuPrimitive.RadioItem, {
3082
- ...menuScope,
3083
- ...radioItemProps,
3084
- ref: forwardedRef
3085
- });
3086
- } finally {
3087
- _effect.f();
3088
- }
3089
- });
3090
- DropdownMenuRadioItem.displayName = RADIO_ITEM_NAME;
3091
- var INDICATOR_NAME = "DropdownMenuItemIndicator";
3092
- var DropdownMenuItemIndicator = /* @__PURE__ */ forwardRef19((props, forwardedRef) => {
3093
- var _effect = _useSignals27();
3094
- try {
3095
- const { __scopeDropdownMenu, ...itemIndicatorProps } = props;
3096
- const menuScope = useMenuScope(__scopeDropdownMenu);
3097
- return /* @__PURE__ */ React27.createElement(MenuPrimitive.ItemIndicator, {
3098
- ...menuScope,
3099
- ...itemIndicatorProps,
3100
- ref: forwardedRef
3101
- });
3102
- } finally {
3103
- _effect.f();
3104
- }
3105
- });
3106
- DropdownMenuItemIndicator.displayName = INDICATOR_NAME;
3107
- var SEPARATOR_NAME = "DropdownMenuSeparator";
3108
- var DropdownMenuSeparator = /* @__PURE__ */ forwardRef19((props, forwardedRef) => {
3109
- var _effect = _useSignals27();
3110
- try {
3111
- const { __scopeDropdownMenu, classNames, ...separatorProps } = props;
3112
- const menuScope = useMenuScope(__scopeDropdownMenu);
3113
- const { tx } = useThemeContext();
3114
- return /* @__PURE__ */ React27.createElement(MenuPrimitive.Separator, {
3115
- ...menuScope,
3116
- ...separatorProps,
3117
- className: tx("menu.separator", "menu__item", {}, classNames),
3118
- ref: forwardedRef
3119
- });
3120
- } finally {
3121
- _effect.f();
3122
- }
3123
- });
3124
- DropdownMenuSeparator.displayName = SEPARATOR_NAME;
3125
- var ARROW_NAME2 = "DropdownMenuArrow";
3126
- var DropdownMenuArrow = /* @__PURE__ */ forwardRef19((props, forwardedRef) => {
3127
- var _effect = _useSignals27();
3128
- try {
3129
- const { __scopeDropdownMenu, classNames, ...arrowProps } = props;
3130
- const menuScope = useMenuScope(__scopeDropdownMenu);
3131
- const { tx } = useThemeContext();
3132
- return /* @__PURE__ */ React27.createElement(MenuPrimitive.Arrow, {
3133
- ...menuScope,
3134
- ...arrowProps,
3135
- className: tx("menu.arrow", "menu__arrow", {}, classNames),
3136
- ref: forwardedRef
3137
- });
3138
- } finally {
3139
- _effect.f();
3140
- }
3141
- });
3142
- DropdownMenuArrow.displayName = ARROW_NAME2;
3143
- var DropdownMenuSub = (props) => {
3144
- var _effect = _useSignals27();
3145
- try {
3146
- const { __scopeDropdownMenu, children, open: openProp, onOpenChange, defaultOpen } = props;
3147
- const menuScope = useMenuScope(__scopeDropdownMenu);
3148
- const [open = false, setOpen] = useControllableState5({
3149
- prop: openProp,
3150
- defaultProp: defaultOpen,
3151
- onChange: onOpenChange
3152
- });
3153
- return /* @__PURE__ */ React27.createElement(MenuPrimitive.Sub, {
3154
- ...menuScope,
3155
- open,
3156
- onOpenChange: setOpen
3157
- }, children);
3158
- } finally {
3159
- _effect.f();
3160
- }
3161
- };
3162
- var SUB_TRIGGER_NAME = "DropdownMenuSubTrigger";
3163
- var DropdownMenuSubTrigger = /* @__PURE__ */ forwardRef19((props, forwardedRef) => {
3164
- var _effect = _useSignals27();
3165
- try {
3166
- const { __scopeDropdownMenu, ...subTriggerProps } = props;
3167
- const menuScope = useMenuScope(__scopeDropdownMenu);
3168
- return /* @__PURE__ */ React27.createElement(MenuPrimitive.SubTrigger, {
3169
- ...menuScope,
3170
- ...subTriggerProps,
3171
- ref: forwardedRef
3172
- });
3173
- } finally {
3174
- _effect.f();
3175
- }
3176
- });
3177
- DropdownMenuSubTrigger.displayName = SUB_TRIGGER_NAME;
3178
- var SUB_CONTENT_NAME = "DropdownMenuSubContent";
3179
- var DropdownMenuSubContent = /* @__PURE__ */ forwardRef19((props, forwardedRef) => {
3180
- var _effect = _useSignals27();
3181
- try {
3182
- const { __scopeDropdownMenu, ...subContentProps } = props;
3183
- const menuScope = useMenuScope(__scopeDropdownMenu);
3184
- return /* @__PURE__ */ React27.createElement(MenuPrimitive.SubContent, {
3185
- ...menuScope,
3186
- ...subContentProps,
3187
- ref: forwardedRef,
3188
- style: {
3189
- ...props.style,
3190
- // re-namespace exposed content custom properties
3191
- ...{
3192
- "--radix-dropdown-menu-content-transform-origin": "var(--radix-popper-transform-origin)",
3193
- "--radix-dropdown-menu-content-available-width": "var(--radix-popper-available-width)",
3194
- "--radix-dropdown-menu-content-available-height": "var(--radix-popper-available-height)",
3195
- "--radix-dropdown-menu-trigger-width": "var(--radix-popper-anchor-width)",
3196
- "--radix-dropdown-menu-trigger-height": "var(--radix-popper-anchor-height)"
3197
- }
3198
- }
3199
- });
3200
- } finally {
3201
- _effect.f();
3202
- }
3203
- });
3204
- DropdownMenuSubContent.displayName = SUB_CONTENT_NAME;
3205
- var DropdownMenu = {
3206
- Root: DropdownMenuRoot,
3207
- Trigger: DropdownMenuTrigger,
3208
- VirtualTrigger: DropdownMenuVirtualTrigger,
3209
- Portal: DropdownMenuPortal,
3210
- Content: DropdownMenuContent,
3211
- Viewport: DropdownMenuViewport,
3212
- Group: DropdownMenuGroup,
3213
- GroupLabel: DropdownMenuGroupLabel,
3214
- Item: DropdownMenuItem,
3215
- CheckboxItem: DropdownMenuCheckboxItem,
3216
- RadioGroup: DropdownMenuRadioGroup,
3217
- RadioItem: DropdownMenuRadioItem,
3218
- ItemIndicator: DropdownMenuItemIndicator,
3219
- Separator: DropdownMenuSeparator,
3220
- Arrow: DropdownMenuArrow,
3221
- Sub: DropdownMenuSub,
3222
- SubTrigger: DropdownMenuSubTrigger,
3223
- SubContent: DropdownMenuSubContent
3224
- };
3225
- var useDropdownMenuMenuScope = useMenuScope;
3226
-
3227
- // src/components/Message/Message.tsx
3228
- import { useSignals as _useSignals28 } from "@preact-signals/safe-react/tracking";
3229
- import { createContext as createContext11 } from "@radix-ui/react-context";
3230
- import { Primitive as Primitive11 } from "@radix-ui/react-primitive";
3231
- import { Slot as Slot11 } from "@radix-ui/react-slot";
3232
- import React28, { forwardRef as forwardRef20 } from "react";
3233
- import { useId as useId4 } from "@dxos/react-hooks";
3234
- var messageIcons = {
3235
- success: "ph--check-circle--duotone",
3236
- info: "ph--info--duotone",
3237
- warning: "ph--warning--duotone",
3238
- error: "ph--warning-circle--duotone",
3239
- neutral: "ph--info--duotone"
3240
- };
3241
- var MESSAGE_NAME = "Message";
3242
- var [MessageProvider, useMessageContext] = createContext11(MESSAGE_NAME);
3243
- var MessageRoot = /* @__PURE__ */ forwardRef20(({ asChild, valence = "neutral", elevation: propsElevation, classNames, titleId: propsTitleId, descriptionId: propsDescriptionId, children, ...props }, forwardedRef) => {
3244
- var _effect = _useSignals28();
3245
- try {
3246
- const { tx } = useThemeContext();
3247
- const titleId = useId4("message__title", propsTitleId);
3248
- const descriptionId = useId4("message__description", propsDescriptionId);
3249
- const elevation = useElevationContext(propsElevation);
3250
- const Root7 = asChild ? Slot11 : Primitive11.div;
3251
- return /* @__PURE__ */ React28.createElement(MessageProvider, {
3252
- titleId,
3253
- descriptionId,
3254
- valence
3255
- }, /* @__PURE__ */ React28.createElement(Root7, {
3256
- role: valence === "neutral" ? "paragraph" : "alert",
3257
- ...props,
3258
- className: tx("message.root", "message", {
3259
- valence,
3260
- elevation
3261
- }, classNames),
3262
- "aria-labelledby": titleId,
3263
- "aria-describedby": descriptionId,
3264
- ref: forwardedRef
3265
- }, children));
3266
- } finally {
3267
- _effect.f();
3268
- }
3269
- });
3270
- MessageRoot.displayName = MESSAGE_NAME;
3271
- var MESSAGE_TITLE_NAME = "MessageTitle";
3272
- var MessageTitle = /* @__PURE__ */ forwardRef20(({ asChild, classNames, children, icon, ...props }, forwardedRef) => {
3273
- var _effect = _useSignals28();
3274
- try {
3275
- const { tx } = useThemeContext();
3276
- const { titleId, valence } = useMessageContext(MESSAGE_TITLE_NAME);
3277
- const Root7 = asChild ? Slot11 : Primitive11.h2;
3278
- return /* @__PURE__ */ React28.createElement(Root7, {
3279
- ...props,
3280
- className: tx("message.title", "message__title", {}, classNames),
3281
- id: titleId,
3282
- ref: forwardedRef
3283
- }, !icon && valence === "neutral" ? null : /* @__PURE__ */ React28.createElement(Icon, {
3284
- size: 5,
3285
- icon: icon ?? messageIcons[valence],
3286
- classNames: tx("message.icon", "message__icon", {
3287
- valence
3288
- })
3289
- }), /* @__PURE__ */ React28.createElement("span", null, children));
3290
- } finally {
3291
- _effect.f();
3292
- }
3293
- });
3294
- MessageTitle.displayName = MESSAGE_TITLE_NAME;
3295
- var MESSAGE_BODY_NAME = "MessageContent";
3296
- var MessageContent = /* @__PURE__ */ forwardRef20(({ asChild, classNames, children, ...props }, forwardedRef) => {
3297
- var _effect = _useSignals28();
3298
- try {
3299
- const { tx } = useThemeContext();
3300
- const { descriptionId } = useMessageContext(MESSAGE_BODY_NAME);
3301
- const Root7 = asChild ? Slot11 : Primitive11.p;
3302
- return /* @__PURE__ */ React28.createElement(Root7, {
3303
- ...props,
3304
- className: tx("message.content", "message__content", {}, classNames),
3305
- id: descriptionId,
3306
- ref: forwardedRef
3307
- }, children);
3308
- } finally {
3309
- _effect.f();
3310
- }
3311
- });
3312
- MessageContent.displayName = MESSAGE_BODY_NAME;
3313
- var Message = {
3314
- Root: MessageRoot,
3315
- Title: MessageTitle,
3316
- Content: MessageContent
3317
- };
3318
- var Callout = Message;
3319
-
3320
- // src/components/Popover/Popover.tsx
3321
- import { useSignals as _useSignals29 } from "@preact-signals/safe-react/tracking";
3322
- import { composeEventHandlers as composeEventHandlers3 } from "@radix-ui/primitive";
3323
- import { useComposedRefs as useComposedRefs2 } from "@radix-ui/react-compose-refs";
3324
- import { createContextScope as createContextScope4 } from "@radix-ui/react-context";
3325
- import { DismissableLayer as DismissableLayer2 } from "@radix-ui/react-dismissable-layer";
3326
- import { useFocusGuards } from "@radix-ui/react-focus-guards";
3327
- import { FocusScope } from "@radix-ui/react-focus-scope";
3328
- import { useId as useId5 } from "@radix-ui/react-id";
3329
- import * as PopperPrimitive2 from "@radix-ui/react-popper";
3330
- import { createPopperScope as createPopperScope2 } from "@radix-ui/react-popper";
3331
- import { Portal as PortalPrimitive2 } from "@radix-ui/react-portal";
3332
- import { Presence as Presence2 } from "@radix-ui/react-presence";
3333
- import { Primitive as Primitive12 } from "@radix-ui/react-primitive";
3334
- import { Slot as Slot12 } from "@radix-ui/react-slot";
3335
- import { useControllableState as useControllableState6 } from "@radix-ui/react-use-controllable-state";
3336
- import { hideOthers } from "aria-hidden";
3337
- import React29, { forwardRef as forwardRef21, useRef as useRef4, useCallback as useCallback9, useState as useState8, useEffect as useEffect7 } from "react";
3338
- import { RemoveScroll } from "react-remove-scroll";
3339
- var POPOVER_NAME = "Popover";
3340
- var [createPopoverContext, createPopoverScope] = createContextScope4(POPOVER_NAME, [
3341
- createPopperScope2
3342
- ]);
3343
- var usePopperScope2 = createPopperScope2();
3344
- var [PopoverProvider, usePopoverContext] = createPopoverContext(POPOVER_NAME);
3345
- var PopoverRoot = (props) => {
3346
- var _effect = _useSignals29();
3347
- try {
3348
- const { __scopePopover, children, open: openProp, defaultOpen, onOpenChange, modal = false } = props;
3349
- const popperScope = usePopperScope2(__scopePopover);
3350
- const triggerRef = useRef4(null);
3351
- const [hasCustomAnchor, setHasCustomAnchor] = useState8(false);
3352
- const [open = false, setOpen] = useControllableState6({
3353
- prop: openProp,
3354
- defaultProp: defaultOpen,
3355
- onChange: onOpenChange
3356
- });
3357
- return /* @__PURE__ */ React29.createElement(PopperPrimitive2.Root, popperScope, /* @__PURE__ */ React29.createElement(PopoverProvider, {
3358
- scope: __scopePopover,
3359
- contentId: useId5(),
3360
- triggerRef,
3361
- open,
3362
- onOpenChange: setOpen,
3363
- onOpenToggle: useCallback9(() => setOpen((prevOpen) => !prevOpen), [
3364
- setOpen
3365
- ]),
3366
- hasCustomAnchor,
3367
- onCustomAnchorAdd: useCallback9(() => setHasCustomAnchor(true), []),
3368
- onCustomAnchorRemove: useCallback9(() => setHasCustomAnchor(false), []),
3369
- modal
3370
- }, children));
3371
- } finally {
3372
- _effect.f();
3373
- }
3374
- };
3375
- PopoverRoot.displayName = POPOVER_NAME;
3376
- var ANCHOR_NAME = "PopoverAnchor";
3377
- var PopoverAnchor = /* @__PURE__ */ forwardRef21((props, forwardedRef) => {
3378
- var _effect = _useSignals29();
3379
- try {
3380
- const { __scopePopover, ...anchorProps } = props;
3381
- const context = usePopoverContext(ANCHOR_NAME, __scopePopover);
3382
- const popperScope = usePopperScope2(__scopePopover);
3383
- const { onCustomAnchorAdd, onCustomAnchorRemove } = context;
3384
- useEffect7(() => {
3385
- onCustomAnchorAdd();
3386
- return () => onCustomAnchorRemove();
3387
- }, [
3388
- onCustomAnchorAdd,
3389
- onCustomAnchorRemove
3390
- ]);
3391
- return /* @__PURE__ */ React29.createElement(PopperPrimitive2.Anchor, {
3392
- ...popperScope,
3393
- ...anchorProps,
3394
- ref: forwardedRef
3395
- });
3396
- } finally {
3397
- _effect.f();
3398
- }
3399
- });
3400
- PopoverAnchor.displayName = ANCHOR_NAME;
3401
- var TRIGGER_NAME3 = "PopoverTrigger";
3402
- var PopoverTrigger = /* @__PURE__ */ forwardRef21((props, forwardedRef) => {
3403
- var _effect = _useSignals29();
3404
- try {
3405
- const { __scopePopover, ...triggerProps } = props;
3406
- const context = usePopoverContext(TRIGGER_NAME3, __scopePopover);
3407
- const popperScope = usePopperScope2(__scopePopover);
3408
- const composedTriggerRef = useComposedRefs2(forwardedRef, context.triggerRef);
3409
- const trigger = /* @__PURE__ */ React29.createElement(Primitive12.button, {
3410
- type: "button",
3411
- "aria-haspopup": "dialog",
3412
- "aria-expanded": context.open,
3413
- "aria-controls": context.contentId,
3414
- "data-state": getState(context.open),
3415
- ...triggerProps,
3416
- ref: composedTriggerRef,
3417
- onClick: composeEventHandlers3(props.onClick, context.onOpenToggle)
3418
- });
3419
- return context.hasCustomAnchor ? trigger : /* @__PURE__ */ React29.createElement(PopperPrimitive2.Anchor, {
3420
- asChild: true,
3421
- ...popperScope
3422
- }, trigger);
3423
- } finally {
3424
- _effect.f();
3425
- }
3426
- });
3427
- PopoverTrigger.displayName = TRIGGER_NAME3;
3428
- var VIRTUAL_TRIGGER_NAME2 = "PopoverVirtualTrigger";
3429
- var PopoverVirtualTrigger = (props) => {
3430
- var _effect = _useSignals29();
3431
- try {
3432
- const { __scopePopover, virtualRef } = props;
3433
- const context = usePopoverContext(VIRTUAL_TRIGGER_NAME2, __scopePopover);
3434
- const popperScope = usePopperScope2(__scopePopover);
3435
- useEffect7(() => {
3436
- if (virtualRef.current) {
3437
- context.triggerRef.current = virtualRef.current;
3438
- }
3439
- });
3440
- return /* @__PURE__ */ React29.createElement(PopperPrimitive2.Anchor, {
3441
- ...popperScope,
3442
- virtualRef
3443
- });
3444
- } finally {
3445
- _effect.f();
3446
- }
3447
- };
3448
- PopoverVirtualTrigger.displayName = VIRTUAL_TRIGGER_NAME2;
3449
- var PORTAL_NAME3 = "PopoverPortal";
3450
- var [PortalProvider2, usePortalContext2] = createPopoverContext(PORTAL_NAME3, {
3451
- forceMount: void 0
3452
- });
3453
- var PopoverPortal = (props) => {
3454
- var _effect = _useSignals29();
3455
- try {
3456
- const { __scopePopover, forceMount, children, container } = props;
3457
- const context = usePopoverContext(PORTAL_NAME3, __scopePopover);
3458
- return /* @__PURE__ */ React29.createElement(PortalProvider2, {
3459
- scope: __scopePopover,
3460
- forceMount
3461
- }, /* @__PURE__ */ React29.createElement(Presence2, {
3462
- present: forceMount || context.open
3463
- }, /* @__PURE__ */ React29.createElement(PortalPrimitive2, {
3464
- asChild: true,
3465
- container
3466
- }, children)));
3467
- } finally {
3468
- _effect.f();
3469
- }
3470
- };
3471
- PopoverPortal.displayName = PORTAL_NAME3;
3472
- var CONTENT_NAME3 = "PopoverContent";
3473
- var PopoverContent = /* @__PURE__ */ forwardRef21((props, forwardedRef) => {
3474
- var _effect = _useSignals29();
3475
- try {
3476
- const portalContext = usePortalContext2(CONTENT_NAME3, props.__scopePopover);
3477
- const { forceMount = portalContext.forceMount, ...contentProps } = props;
3478
- const context = usePopoverContext(CONTENT_NAME3, props.__scopePopover);
3479
- return /* @__PURE__ */ React29.createElement(Presence2, {
3480
- present: forceMount || context.open
3481
- }, context.modal ? /* @__PURE__ */ React29.createElement(PopoverContentModal, {
3482
- ...contentProps,
3483
- ref: forwardedRef
3484
- }) : /* @__PURE__ */ React29.createElement(PopoverContentNonModal, {
3485
- ...contentProps,
3486
- ref: forwardedRef
3487
- }));
3488
- } finally {
3489
- _effect.f();
3490
- }
3491
- });
3492
- PopoverContent.displayName = CONTENT_NAME3;
3493
- var PopoverContentModal = /* @__PURE__ */ forwardRef21((props, forwardedRef) => {
3494
- var _effect = _useSignals29();
3495
- try {
3496
- const context = usePopoverContext(CONTENT_NAME3, props.__scopePopover);
3497
- const contentRef = useRef4(null);
3498
- const composedRefs = useComposedRefs2(forwardedRef, contentRef);
3499
- const isRightClickOutsideRef = useRef4(false);
3500
- useEffect7(() => {
3501
- const content = contentRef.current;
3502
- if (content) {
3503
- return hideOthers(content);
3504
- }
3505
- }, []);
3506
- return /* @__PURE__ */ React29.createElement(RemoveScroll, {
3507
- as: Slot12,
3508
- allowPinchZoom: true
3509
- }, /* @__PURE__ */ React29.createElement(PopoverContentImpl, {
3510
- ...props,
3511
- ref: composedRefs,
3512
- // we make sure we're not trapping once it's been closed
3513
- // (closed !== unmounted when animating out)
3514
- trapFocus: context.open,
3515
- disableOutsidePointerEvents: true,
3516
- onCloseAutoFocus: composeEventHandlers3(props.onCloseAutoFocus, (event) => {
3517
- event.preventDefault();
3518
- if (!isRightClickOutsideRef.current) {
3519
- context.triggerRef.current?.focus();
3520
- }
3521
- }),
3522
- onPointerDownOutside: composeEventHandlers3(props.onPointerDownOutside, (event) => {
3523
- const originalEvent = event.detail.originalEvent;
3524
- const ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true;
3525
- const isRightClick = originalEvent.button === 2 || ctrlLeftClick;
3526
- isRightClickOutsideRef.current = isRightClick;
3527
- }, {
3528
- checkForDefaultPrevented: false
3529
- }),
3530
- // When focus is trapped, a `focusout` event may still happen.
3531
- // We make sure we don't trigger our `onDismiss` in such case.
3532
- onFocusOutside: composeEventHandlers3(props.onFocusOutside, (event) => event.preventDefault(), {
3533
- checkForDefaultPrevented: false
3534
- })
3535
- }));
3536
- } finally {
3537
- _effect.f();
3538
- }
3539
- });
3540
- var PopoverContentNonModal = /* @__PURE__ */ forwardRef21((props, forwardedRef) => {
3541
- var _effect = _useSignals29();
3542
- try {
3543
- const context = usePopoverContext(CONTENT_NAME3, props.__scopePopover);
3544
- const hasInteractedOutsideRef = useRef4(false);
3545
- const hasPointerDownOutsideRef = useRef4(false);
3546
- return /* @__PURE__ */ React29.createElement(PopoverContentImpl, {
3547
- ...props,
3548
- ref: forwardedRef,
3549
- trapFocus: false,
3550
- disableOutsidePointerEvents: false,
3551
- onCloseAutoFocus: (event) => {
3552
- props.onCloseAutoFocus?.(event);
3553
- if (!event.defaultPrevented) {
3554
- if (!hasInteractedOutsideRef.current) {
3555
- context.triggerRef.current?.focus();
3556
- }
3557
- event.preventDefault();
3558
- }
3559
- hasInteractedOutsideRef.current = false;
3560
- hasPointerDownOutsideRef.current = false;
3561
- },
3562
- onInteractOutside: (event) => {
3563
- props.onInteractOutside?.(event);
3564
- if (!event.defaultPrevented) {
3565
- hasInteractedOutsideRef.current = true;
3566
- if (event.detail.originalEvent.type === "pointerdown") {
3567
- hasPointerDownOutsideRef.current = true;
3568
- }
3569
- }
3570
- const target = event.target;
3571
- const targetIsTrigger = context.triggerRef.current?.contains(target);
3572
- if (targetIsTrigger) {
3573
- event.preventDefault();
3574
- }
3575
- if (event.detail.originalEvent.type === "focusin" && hasPointerDownOutsideRef.current) {
3576
- event.preventDefault();
3577
- }
3578
- }
3579
- });
3580
- } finally {
3581
- _effect.f();
3582
- }
3583
- });
3584
- var PopoverContentImpl = /* @__PURE__ */ forwardRef21((props, forwardedRef) => {
3585
- var _effect = _useSignals29();
3586
- try {
3587
- const { __scopePopover, trapFocus, onOpenAutoFocus, onCloseAutoFocus, disableOutsidePointerEvents, onEscapeKeyDown, onPointerDownOutside, onFocusOutside, onInteractOutside, collisionPadding = 8, classNames, ...contentProps } = props;
3588
- const context = usePopoverContext(CONTENT_NAME3, __scopePopover);
3589
- const popperScope = usePopperScope2(__scopePopover);
3590
- const { tx } = useThemeContext();
3591
- const elevation = useElevationContext();
3592
- const safeCollisionPadding = useSafeCollisionPadding(collisionPadding);
3593
- useFocusGuards();
3594
- return /* @__PURE__ */ React29.createElement(FocusScope, {
3595
- asChild: true,
3596
- loop: true,
3597
- trapped: trapFocus,
3598
- onMountAutoFocus: onOpenAutoFocus,
3599
- onUnmountAutoFocus: onCloseAutoFocus
3600
- }, /* @__PURE__ */ React29.createElement(DismissableLayer2, {
3601
- asChild: true,
3602
- disableOutsidePointerEvents,
3603
- onInteractOutside,
3604
- onEscapeKeyDown,
3605
- onPointerDownOutside,
3606
- onFocusOutside,
3607
- onDismiss: () => context.onOpenChange(false)
3608
- }, /* @__PURE__ */ React29.createElement(PopperPrimitive2.Content, {
3609
- "data-state": getState(context.open),
3610
- role: "dialog",
3611
- id: context.contentId,
3612
- ...popperScope,
3613
- ...contentProps,
3614
- collisionPadding: safeCollisionPadding,
3615
- className: tx("popover.content", "popover", {
3616
- elevation
3617
- }, classNames),
3618
- ref: forwardedRef,
3619
- style: {
3620
- ...contentProps.style,
3621
- // re-namespace exposed content custom properties
3622
- ...{
3623
- "--radix-popover-content-transform-origin": "var(--radix-popper-transform-origin)",
3624
- "--radix-popover-content-available-width": "var(--radix-popper-available-width)",
3625
- "--radix-popover-content-available-height": "var(--radix-popper-available-height)",
3626
- "--radix-popover-trigger-width": "var(--radix-popper-anchor-width)",
3627
- "--radix-popover-trigger-height": "var(--radix-popper-anchor-height)"
3628
- }
3629
- }
3630
- })));
3631
- } finally {
3632
- _effect.f();
3633
- }
3634
- });
3635
- var CLOSE_NAME = "PopoverClose";
3636
- var PopoverClose = /* @__PURE__ */ forwardRef21((props, forwardedRef) => {
3637
- var _effect = _useSignals29();
3638
- try {
3639
- const { __scopePopover, ...closeProps } = props;
3640
- const context = usePopoverContext(CLOSE_NAME, __scopePopover);
3641
- return /* @__PURE__ */ React29.createElement(Primitive12.button, {
3642
- type: "button",
3643
- ...closeProps,
3644
- ref: forwardedRef,
3645
- onClick: composeEventHandlers3(props.onClick, () => context.onOpenChange(false))
3646
- });
3647
- } finally {
3648
- _effect.f();
3649
- }
3650
- });
3651
- PopoverClose.displayName = CLOSE_NAME;
3652
- var ARROW_NAME3 = "PopoverArrow";
3653
- var PopoverArrow = /* @__PURE__ */ forwardRef21((props, forwardedRef) => {
3654
- var _effect = _useSignals29();
3655
- try {
3656
- const { __scopePopover, classNames, ...arrowProps } = props;
3657
- const popperScope = usePopperScope2(__scopePopover);
3658
- const { tx } = useThemeContext();
3659
- return /* @__PURE__ */ React29.createElement(PopperPrimitive2.Arrow, {
3660
- ...popperScope,
3661
- ...arrowProps,
3662
- className: tx("popover.arrow", "popover__arrow", {}, classNames),
3663
- ref: forwardedRef
3664
- });
3665
- } finally {
3666
- _effect.f();
3667
- }
3668
- });
3669
- PopoverArrow.displayName = ARROW_NAME3;
3670
- var PopoverViewport = /* @__PURE__ */ forwardRef21(({ classNames, asChild, constrainInline = true, constrainBlock = true, children, ...props }, forwardedRef) => {
3671
- var _effect = _useSignals29();
3672
- try {
3673
- const { tx } = useThemeContext();
3674
- const Root7 = asChild ? Slot12 : Primitive12.div;
3675
- return /* @__PURE__ */ React29.createElement(Root7, {
3676
- ...props,
3677
- className: tx("popover.viewport", "popover__viewport", {
3678
- constrainInline,
3679
- constrainBlock
3680
- }, classNames),
3681
- ref: forwardedRef
3682
- }, children);
3683
- } finally {
3684
- _effect.f();
3685
- }
3686
- });
3687
- var getState = (open) => open ? "open" : "closed";
3688
- var Popover = {
3689
- Root: PopoverRoot,
3690
- Anchor: PopoverAnchor,
3691
- Trigger: PopoverTrigger,
3692
- VirtualTrigger: PopoverVirtualTrigger,
3693
- Portal: PopoverPortal,
3694
- Content: PopoverContent,
3695
- Close: PopoverClose,
3696
- Arrow: PopoverArrow,
3697
- Viewport: PopoverViewport
3698
- };
3699
-
3700
- // src/components/Status/Status.tsx
3701
- import { useSignals as _useSignals30 } from "@preact-signals/safe-react/tracking";
3702
- import React30, { forwardRef as forwardRef22 } from "react";
3703
- var Status = /* @__PURE__ */ forwardRef22(({ classNames, children, progress = 0, indeterminate, variant, ...props }, forwardedRef) => {
3704
- var _effect = _useSignals30();
3705
- try {
3706
- const { tx } = useThemeContext();
3707
- return /* @__PURE__ */ React30.createElement("span", {
3708
- role: "status",
3709
- ...props,
3710
- className: tx("status.root", "status", {
3711
- indeterminate,
3712
- variant
3713
- }, classNames),
3714
- ref: forwardedRef
3715
- }, /* @__PURE__ */ React30.createElement("span", {
3716
- role: "none",
3717
- className: tx("status.bar", "status__bar", {
3718
- indeterminate,
3719
- variant
3720
- }, classNames),
3721
- ...!indeterminate && {
3722
- style: {
3723
- width: `${Math.round(progress * 100)}%`
3724
- }
3725
- }
3726
- }), children);
3727
- } finally {
3728
- _effect.f();
3729
- }
3730
- });
3731
-
3732
- // src/components/ScrollArea/ScrollArea.tsx
3733
- import { useSignals as _useSignals31 } from "@preact-signals/safe-react/tracking";
3734
- import { Root as ScrollAreaPrimitiveRoot, Viewport as ScrollAreaPrimitiveViewport, Scrollbar as ScrollAreaPrimitiveScrollbar, Thumb as ScrollAreaPrimitiveThumb, Corner as ScrollAreaPrimitiveCorner } from "@radix-ui/react-scroll-area";
3735
- import React31, { forwardRef as forwardRef23 } from "react";
3736
- var ScrollAreaRoot = /* @__PURE__ */ forwardRef23(({ classNames, ...props }, forwardedRef) => {
3737
- var _effect = _useSignals31();
3738
- try {
3739
- const { tx } = useThemeContext();
3740
- return /* @__PURE__ */ React31.createElement(ScrollAreaPrimitiveRoot, {
3741
- ...props,
3742
- className: tx("scrollArea.root", "scroll-area", {}, classNames),
3743
- ref: forwardedRef
3744
- });
3745
- } finally {
3746
- _effect.f();
3747
- }
3748
- });
3749
- var ScrollAreaViewport = /* @__PURE__ */ forwardRef23(({ classNames, ...props }, forwardedRef) => {
3750
- var _effect = _useSignals31();
3751
- try {
3752
- const { tx } = useThemeContext();
3753
- return /* @__PURE__ */ React31.createElement(ScrollAreaPrimitiveViewport, {
3754
- ...props,
3755
- className: tx("scrollArea.viewport", "scroll-area", {}, classNames),
3756
- ref: forwardedRef
3757
- });
3758
- } finally {
3759
- _effect.f();
3760
- }
3761
- });
3762
- var ScrollAreaScrollbar = /* @__PURE__ */ forwardRef23(({ classNames, variant = "fine", ...props }, forwardedRef) => {
3763
- var _effect = _useSignals31();
3764
- try {
3765
- const { tx } = useThemeContext();
3766
- return /* @__PURE__ */ React31.createElement(ScrollAreaPrimitiveScrollbar, {
3767
- "data-variant": variant,
3768
- ...props,
3769
- className: tx("scrollArea.scrollbar", "scroll-area__scrollbar", {}, classNames),
3770
- ref: forwardedRef
3771
- });
3772
- } finally {
3773
- _effect.f();
3774
- }
3775
- });
3776
- var ScrollAreaThumb = /* @__PURE__ */ forwardRef23(({ classNames, ...props }, forwardedRef) => {
3777
- var _effect = _useSignals31();
3778
- try {
3779
- const { tx } = useThemeContext();
3780
- return /* @__PURE__ */ React31.createElement(ScrollAreaPrimitiveThumb, {
3781
- ...props,
3782
- className: tx("scrollArea.thumb", "scroll-area__thumb", {}, classNames),
3783
- ref: forwardedRef
3784
- });
3785
- } finally {
3786
- _effect.f();
3787
- }
3788
- });
3789
- var ScrollAreaCorner = /* @__PURE__ */ forwardRef23(({ classNames, ...props }, forwardedRef) => {
3790
- var _effect = _useSignals31();
3791
- try {
3792
- const { tx } = useThemeContext();
3793
- return /* @__PURE__ */ React31.createElement(ScrollAreaPrimitiveCorner, {
3794
- ...props,
3795
- className: tx("scrollArea.corner", "scroll-area__corner", {}, classNames),
3796
- ref: forwardedRef
3797
- });
3798
- } finally {
3799
- _effect.f();
3800
- }
3801
- });
3802
- var ScrollArea = {
3803
- Root: ScrollAreaRoot,
3804
- Viewport: ScrollAreaViewport,
3805
- Scrollbar: ScrollAreaScrollbar,
3806
- Thumb: ScrollAreaThumb,
3807
- Corner: ScrollAreaCorner
3808
- };
3809
-
3810
- // src/components/Select/Select.tsx
3811
- import { useSignals as _useSignals32 } from "@preact-signals/safe-react/tracking";
3812
- import { CaretDown as CaretDown2, CaretUp } from "@phosphor-icons/react";
3813
- import * as SelectPrimitive from "@radix-ui/react-select";
3814
- import React32, { forwardRef as forwardRef24 } from "react";
3815
- var SelectRoot = SelectPrimitive.Root;
3816
- var SelectTrigger = SelectPrimitive.Trigger;
3817
- var SelectValue = SelectPrimitive.Value;
3818
- var SelectIcon = SelectPrimitive.Icon;
3819
- var SelectPortal = SelectPrimitive.Portal;
3820
- var SelectTriggerButton = /* @__PURE__ */ forwardRef24(({ children, placeholder, ...props }, forwardedRef) => {
3821
- var _effect = _useSignals32();
3822
- try {
3823
- const { tx } = useThemeContext();
3824
- return /* @__PURE__ */ React32.createElement(SelectPrimitive.Trigger, {
3825
- asChild: true,
3826
- ref: forwardedRef
3827
- }, /* @__PURE__ */ React32.createElement(Button, props, /* @__PURE__ */ React32.createElement(SelectPrimitive.Value, {
3828
- placeholder
3829
- }, children), /* @__PURE__ */ React32.createElement("span", {
3830
- className: "w-1 flex-1"
3831
- }), /* @__PURE__ */ React32.createElement(SelectPrimitive.Icon, {
3832
- asChild: true
3833
- }, /* @__PURE__ */ React32.createElement(CaretDown2, {
3834
- className: tx("select.triggerIcon", "select__trigger__icon", {}),
3835
- weight: "bold"
3836
- }))));
3837
- } finally {
3838
- _effect.f();
3839
- }
3840
- });
3841
- var SelectContent = /* @__PURE__ */ forwardRef24(({ classNames, children, collisionPadding = 8, ...props }, forwardedRef) => {
3842
- var _effect = _useSignals32();
3843
- try {
3844
- const { tx } = useThemeContext();
3845
- const elevation = useElevationContext();
3846
- const safeCollisionPadding = useSafeCollisionPadding(collisionPadding);
3847
- return /* @__PURE__ */ React32.createElement(SelectPrimitive.Content, {
3848
- ...props,
3849
- collisionPadding: safeCollisionPadding,
3850
- className: tx("select.content", "select__content", {
3851
- elevation
3852
- }, classNames),
3853
- position: "popper",
3854
- ref: forwardedRef
3855
- }, children);
3856
- } finally {
3857
- _effect.f();
3858
- }
3859
- });
3860
- var SelectScrollUpButton2 = /* @__PURE__ */ forwardRef24(({ classNames, children, ...props }, forwardedRef) => {
3861
- var _effect = _useSignals32();
3862
- try {
3863
- const { tx } = useThemeContext();
3864
- return /* @__PURE__ */ React32.createElement(SelectPrimitive.SelectScrollUpButton, {
3865
- ...props,
3866
- className: tx("select.scrollButton", "select__scroll-button--up", {}, classNames),
3867
- ref: forwardedRef
3868
- }, children ?? /* @__PURE__ */ React32.createElement(CaretUp, {
3869
- weight: "bold"
3870
- }));
3871
- } finally {
3872
- _effect.f();
3873
- }
3874
- });
3875
- var SelectScrollDownButton2 = /* @__PURE__ */ forwardRef24(({ classNames, children, ...props }, forwardedRef) => {
3876
- var _effect = _useSignals32();
3877
- try {
3878
- const { tx } = useThemeContext();
3879
- return /* @__PURE__ */ React32.createElement(SelectPrimitive.SelectScrollDownButton, {
3880
- ...props,
3881
- className: tx("select.scrollButton", "select__scroll-button--down", {}, classNames),
3882
- ref: forwardedRef
3883
- }, children ?? /* @__PURE__ */ React32.createElement(CaretDown2, {
3884
- weight: "bold"
3885
- }));
3886
- } finally {
3887
- _effect.f();
3888
- }
3889
- });
3890
- var SelectViewport2 = /* @__PURE__ */ forwardRef24(({ classNames, asChild, children, ...props }, forwardedRef) => {
3891
- var _effect = _useSignals32();
3892
- try {
3893
- const { tx } = useThemeContext();
3894
- return /* @__PURE__ */ React32.createElement(SelectPrimitive.SelectViewport, {
3895
- ...props,
3896
- className: tx("select.viewport", "select__viewport", {}, classNames),
3897
- ref: forwardedRef
3898
- }, children);
3899
- } finally {
3900
- _effect.f();
3901
- }
3902
- });
3903
- var SelectItem = /* @__PURE__ */ forwardRef24(({ classNames, ...props }, forwardedRef) => {
3904
- var _effect = _useSignals32();
3905
- try {
3906
- const { tx } = useThemeContext();
3907
- return /* @__PURE__ */ React32.createElement(SelectPrimitive.Item, {
3908
- ...props,
3909
- className: tx("select.item", "option", {}, classNames),
3910
- ref: forwardedRef
3911
- });
3912
- } finally {
3913
- _effect.f();
3914
- }
3915
- });
3916
- var SelectItemText = SelectPrimitive.ItemText;
3917
- var SelectItemIndicator = /* @__PURE__ */ forwardRef24(({ classNames, children, ...props }, forwardedRef) => {
3918
- var _effect = _useSignals32();
3919
- try {
3920
- const { tx } = useThemeContext();
3921
- return /* @__PURE__ */ React32.createElement(SelectPrimitive.ItemIndicator, {
3922
- ...props,
3923
- className: tx("select.itemIndicator", "option__indicator", {}, classNames),
3924
- ref: forwardedRef
3925
- }, children);
3926
- } finally {
3927
- _effect.f();
3928
- }
3929
- });
3930
- var SelectOption = /* @__PURE__ */ forwardRef24(({ children, classNames, ...props }, forwardedRef) => {
3931
- var _effect = _useSignals32();
3932
- try {
3933
- const { tx } = useThemeContext();
3934
- return /* @__PURE__ */ React32.createElement(SelectPrimitive.Item, {
3935
- ...props,
3936
- className: tx("select.item", "option", {}, classNames),
3937
- ref: forwardedRef
3938
- }, /* @__PURE__ */ React32.createElement(SelectPrimitive.ItemText, null, children), /* @__PURE__ */ React32.createElement("span", {
3939
- className: "grow w-1"
3940
- }), /* @__PURE__ */ React32.createElement(Icon, {
3941
- icon: "ph--check--regular"
3942
- }));
3943
- } finally {
3944
- _effect.f();
3945
- }
3946
- });
3947
- var SelectGroup = SelectPrimitive.Group;
3948
- var SelectLabel = SelectPrimitive.Label;
3949
- var SelectSeparator = /* @__PURE__ */ forwardRef24(({ classNames, ...props }, forwardedRef) => {
3950
- var _effect = _useSignals32();
3951
- try {
3952
- const { tx } = useThemeContext();
3953
- return /* @__PURE__ */ React32.createElement(SelectPrimitive.Separator, {
3954
- ...props,
3955
- className: tx("select.separator", "select__separator", {}, classNames),
3956
- ref: forwardedRef
3957
- });
3958
- } finally {
3959
- _effect.f();
3960
- }
3961
- });
3962
- var SelectArrow = /* @__PURE__ */ forwardRef24(({ classNames, ...props }, forwardedRef) => {
3963
- var _effect = _useSignals32();
3964
- try {
3965
- const { tx } = useThemeContext();
3966
- return /* @__PURE__ */ React32.createElement(SelectPrimitive.Arrow, {
3967
- ...props,
3968
- className: tx("select.arrow", "select__arrow", {}, classNames),
3969
- ref: forwardedRef
3970
- });
3971
- } finally {
3972
- _effect.f();
3973
- }
3974
- });
3975
- var Select = {
3976
- Root: SelectRoot,
3977
- Trigger: SelectTrigger,
3978
- TriggerButton: SelectTriggerButton,
3979
- Value: SelectValue,
3980
- Icon: SelectIcon,
3981
- Portal: SelectPortal,
3982
- Content: SelectContent,
3983
- ScrollUpButton: SelectScrollUpButton2,
3984
- ScrollDownButton: SelectScrollDownButton2,
3985
- Viewport: SelectViewport2,
3986
- Item: SelectItem,
3987
- ItemText: SelectItemText,
3988
- ItemIndicator: SelectItemIndicator,
3989
- Option: SelectOption,
3990
- Group: SelectGroup,
3991
- Label: SelectLabel,
3992
- Separator: SelectSeparator,
3993
- Arrow: SelectArrow
3994
- };
3995
-
3996
- // src/components/Separator/Separator.tsx
3997
- import { useSignals as _useSignals33 } from "@preact-signals/safe-react/tracking";
3998
- import { Separator as SeparatorPrimitive } from "@radix-ui/react-separator";
3999
- import React33, { forwardRef as forwardRef25 } from "react";
4000
- var Separator4 = /* @__PURE__ */ forwardRef25(({ classNames, orientation = "horizontal", subdued, ...props }, forwardedRef) => {
4001
- var _effect = _useSignals33();
4002
- try {
4003
- const { tx } = useThemeContext();
4004
- return /* @__PURE__ */ React33.createElement(SeparatorPrimitive, {
4005
- orientation,
4006
- ...props,
4007
- className: tx("separator.root", "separator", {
4008
- orientation,
4009
- subdued
4010
- }, classNames),
4011
- ref: forwardedRef
4012
- });
4013
- } finally {
4014
- _effect.f();
4015
- }
4016
- });
4017
-
4018
- // src/components/Tag/Tag.tsx
4019
- import { useSignals as _useSignals34 } from "@preact-signals/safe-react/tracking";
4020
- import { Primitive as Primitive13 } from "@radix-ui/react-primitive";
4021
- import { Slot as Slot13 } from "@radix-ui/react-slot";
4022
- import React34, { forwardRef as forwardRef26 } from "react";
4023
- var Tag = /* @__PURE__ */ forwardRef26(({ asChild, palette = "neutral", classNames, ...props }, forwardedRef) => {
4024
- var _effect = _useSignals34();
4025
- try {
4026
- const { tx } = useThemeContext();
4027
- const Root7 = asChild ? Slot13 : Primitive13.span;
4028
- return /* @__PURE__ */ React34.createElement(Root7, {
4029
- ...props,
4030
- className: tx("tag.root", "dx-tag", {
4031
- palette
4032
- }, classNames),
4033
- "data-hue": palette,
4034
- ref: forwardedRef
4035
- });
4036
- } finally {
4037
- _effect.f();
4038
- }
4039
- });
4040
-
4041
- // src/components/Toast/Toast.tsx
4042
- import { useSignals as _useSignals35 } from "@preact-signals/safe-react/tracking";
4043
- import { Primitive as Primitive14 } from "@radix-ui/react-primitive";
4044
- import { Slot as Slot14 } from "@radix-ui/react-slot";
4045
- import { ToastProvider as ToastProviderPrimitive, ToastViewport as ToastViewportPrimitive, Root as ToastRootPrimitive, ToastTitle as ToastTitlePrimitive, ToastDescription as ToastDescriptionPrimitive, ToastAction as ToastActionPrimitive, ToastClose as ToastClosePrimitive } from "@radix-ui/react-toast";
4046
- import React35, { forwardRef as forwardRef27 } from "react";
4047
- var ToastProvider = ToastProviderPrimitive;
4048
- var ToastViewport = /* @__PURE__ */ forwardRef27(({ classNames, ...props }, forwardedRef) => {
4049
- var _effect = _useSignals35();
4050
- try {
4051
- const { tx } = useThemeContext();
4052
- return /* @__PURE__ */ React35.createElement(ToastViewportPrimitive, {
4053
- className: tx("toast.viewport", "toast-viewport", {}, classNames),
4054
- ref: forwardedRef
4055
- });
4056
- } finally {
4057
- _effect.f();
4058
- }
4059
- });
4060
- var ToastRoot = /* @__PURE__ */ forwardRef27(({ classNames, children, ...props }, forwardedRef) => {
4061
- var _effect = _useSignals35();
4062
- try {
4063
- const { tx } = useThemeContext();
4064
- return /* @__PURE__ */ React35.createElement(ToastRootPrimitive, {
4065
- ...props,
4066
- className: tx("toast.root", "toast", {}, classNames),
4067
- ref: forwardedRef
4068
- }, /* @__PURE__ */ React35.createElement(ElevationProvider, {
4069
- elevation: "toast"
4070
- }, children));
4071
- } finally {
4072
- _effect.f();
4073
- }
4074
- });
4075
- var ToastBody = /* @__PURE__ */ forwardRef27(({ asChild, classNames, ...props }, forwardedRef) => {
4076
- var _effect = _useSignals35();
4077
- try {
4078
- const { tx } = useThemeContext();
4079
- const Root7 = asChild ? Slot14 : Primitive14.div;
4080
- return /* @__PURE__ */ React35.createElement(Root7, {
4081
- ...props,
4082
- className: tx("toast.body", "toast__body", {}, classNames),
4083
- ref: forwardedRef
4084
- });
4085
- } finally {
4086
- _effect.f();
4087
- }
4088
- });
4089
- var ToastTitle = /* @__PURE__ */ forwardRef27(({ asChild, classNames, ...props }, forwardedRef) => {
4090
- var _effect = _useSignals35();
4091
- try {
4092
- const { tx } = useThemeContext();
4093
- const Root7 = asChild ? Slot14 : ToastTitlePrimitive;
4094
- return /* @__PURE__ */ React35.createElement(Root7, {
4095
- ...props,
4096
- className: tx("toast.title", "toast__title", {}, classNames),
4097
- ref: forwardedRef
4098
- });
4099
- } finally {
4100
- _effect.f();
4101
- }
4102
- });
4103
- var ToastDescription = /* @__PURE__ */ forwardRef27(({ asChild, classNames, ...props }, forwardedRef) => {
4104
- var _effect = _useSignals35();
4105
- try {
4106
- const { tx } = useThemeContext();
4107
- const Root7 = asChild ? Slot14 : ToastDescriptionPrimitive;
4108
- return /* @__PURE__ */ React35.createElement(Root7, {
4109
- ...props,
4110
- className: tx("toast.description", "toast__description", {}, classNames),
4111
- ref: forwardedRef
4112
- });
4113
- } finally {
4114
- _effect.f();
4115
- }
4116
- });
4117
- var ToastActions = /* @__PURE__ */ forwardRef27(({ asChild, classNames, ...props }, forwardedRef) => {
4118
- var _effect = _useSignals35();
4119
- try {
4120
- const { tx } = useThemeContext();
4121
- const Root7 = asChild ? Slot14 : Primitive14.div;
4122
- return /* @__PURE__ */ React35.createElement(Root7, {
4123
- ...props,
4124
- className: tx("toast.actions", "toast__actions", {}, classNames),
4125
- ref: forwardedRef
4126
- });
4127
- } finally {
4128
- _effect.f();
4129
- }
4130
- });
4131
- var ToastAction = ToastActionPrimitive;
4132
- var ToastClose = ToastClosePrimitive;
4133
- var Toast = {
4134
- Provider: ToastProvider,
4135
- Viewport: ToastViewport,
4136
- Root: ToastRoot,
4137
- Body: ToastBody,
4138
- Title: ToastTitle,
4139
- Description: ToastDescription,
4140
- Actions: ToastActions,
4141
- Action: ToastAction,
4142
- Close: ToastClose
4143
- };
4144
-
4145
- // src/components/Toolbar/Toolbar.tsx
4146
- import { useSignals as _useSignals36 } from "@preact-signals/safe-react/tracking";
4147
- import * as ToolbarPrimitive from "@radix-ui/react-toolbar";
4148
- import React36, { forwardRef as forwardRef28 } from "react";
4149
- var ToolbarRoot = /* @__PURE__ */ forwardRef28(({ classNames, children, layoutManaged, ...props }, forwardedRef) => {
4150
- var _effect = _useSignals36();
4151
- try {
4152
- const { tx } = useThemeContext();
4153
- return /* @__PURE__ */ React36.createElement(ToolbarPrimitive.Root, {
4154
- ...props,
4155
- className: tx("toolbar.root", "toolbar", {
4156
- layoutManaged
4157
- }, classNames),
4158
- ref: forwardedRef
4159
- }, children);
4160
- } finally {
4161
- _effect.f();
4162
- }
4163
- });
4164
- var ToolbarButton = /* @__PURE__ */ forwardRef28((props, forwardedRef) => {
4165
- var _effect = _useSignals36();
4166
- try {
4167
- return /* @__PURE__ */ React36.createElement(ToolbarPrimitive.Button, {
4168
- asChild: true
4169
- }, /* @__PURE__ */ React36.createElement(Button, {
4170
- ...props,
4171
- ref: forwardedRef
4172
- }));
4173
- } finally {
4174
- _effect.f();
4175
- }
4176
- });
4177
- var ToolbarIconButton = /* @__PURE__ */ forwardRef28((props, forwardedRef) => {
4178
- var _effect = _useSignals36();
4179
- try {
4180
- return /* @__PURE__ */ React36.createElement(ToolbarPrimitive.Button, {
4181
- asChild: true
4182
- }, /* @__PURE__ */ React36.createElement(IconButton, {
4183
- ...props,
4184
- ref: forwardedRef
4185
- }));
4186
- } finally {
4187
- _effect.f();
4188
- }
4189
- });
4190
- var ToolbarToggle = /* @__PURE__ */ forwardRef28((props, forwardedRef) => {
4191
- var _effect = _useSignals36();
4192
- try {
4193
- return /* @__PURE__ */ React36.createElement(ToolbarPrimitive.Button, {
4194
- asChild: true
4195
- }, /* @__PURE__ */ React36.createElement(Toggle, {
4196
- ...props,
4197
- ref: forwardedRef
4198
- }));
4199
- } finally {
4200
- _effect.f();
4201
- }
4202
- });
4203
- var ToolbarLink = /* @__PURE__ */ forwardRef28((props, forwardedRef) => {
4204
- var _effect = _useSignals36();
4205
- try {
4206
- return /* @__PURE__ */ React36.createElement(ToolbarPrimitive.Link, {
4207
- asChild: true
4208
- }, /* @__PURE__ */ React36.createElement(Link, {
4209
- ...props,
4210
- ref: forwardedRef
4211
- }));
4212
- } finally {
4213
- _effect.f();
4214
- }
4215
- });
4216
- var ToolbarToggleGroup2 = /* @__PURE__ */ forwardRef28(({ classNames, children, elevation, ...props }, forwardedRef) => {
4217
- var _effect = _useSignals36();
4218
- try {
4219
- return /* @__PURE__ */ React36.createElement(ToolbarPrimitive.ToolbarToggleGroup, {
4220
- ...props,
4221
- asChild: true
4222
- }, /* @__PURE__ */ React36.createElement(ButtonGroup, {
4223
- classNames,
4224
- children,
4225
- elevation,
4226
- ref: forwardedRef
4227
- }));
4228
- } finally {
4229
- _effect.f();
4230
- }
4231
- });
4232
- var ToolbarToggleGroupItem = /* @__PURE__ */ forwardRef28(({ variant, density, elevation, classNames, children, ...props }, forwardedRef) => {
4233
- var _effect = _useSignals36();
4234
- try {
4235
- return /* @__PURE__ */ React36.createElement(ToolbarPrimitive.ToolbarToggleItem, {
4236
- ...props,
4237
- asChild: true
4238
- }, /* @__PURE__ */ React36.createElement(Button, {
4239
- variant,
4240
- density,
4241
- elevation,
4242
- classNames,
4243
- children,
4244
- ref: forwardedRef
4245
- }));
4246
- } finally {
4247
- _effect.f();
4248
- }
4249
- });
4250
- var ToolbarToggleGroupIconItem = /* @__PURE__ */ forwardRef28(({ variant, density, elevation, classNames, icon, label, iconOnly, ...props }, forwardedRef) => {
4251
- var _effect = _useSignals36();
4252
- try {
4253
- return /* @__PURE__ */ React36.createElement(ToolbarPrimitive.ToolbarToggleItem, {
4254
- ...props,
4255
- asChild: true
4256
- }, /* @__PURE__ */ React36.createElement(IconButton, {
4257
- variant,
4258
- density,
4259
- elevation,
4260
- classNames,
4261
- icon,
4262
- label,
4263
- iconOnly,
4264
- ref: forwardedRef
4265
- }));
4266
- } finally {
4267
- _effect.f();
4268
- }
4269
- });
4270
- var ToolbarSeparator = /* @__PURE__ */ forwardRef28(({ variant = "line", ...props }, forwardedRef) => {
4271
- var _effect = _useSignals36();
4272
- try {
4273
- return variant === "line" ? /* @__PURE__ */ React36.createElement(ToolbarPrimitive.Separator, {
4274
- asChild: true
4275
- }, /* @__PURE__ */ React36.createElement(Separator4, {
4276
- ...props,
4277
- ref: forwardedRef
4278
- })) : /* @__PURE__ */ React36.createElement(ToolbarPrimitive.Separator, {
4279
- className: "grow",
4280
- ref: forwardedRef
4281
- });
4282
- } finally {
4283
- _effect.f();
4284
- }
4285
- });
4286
- var Toolbar = {
4287
- Root: ToolbarRoot,
4288
- Button: ToolbarButton,
4289
- IconButton: ToolbarIconButton,
4290
- Link: ToolbarLink,
4291
- Toggle: ToolbarToggle,
4292
- ToggleGroup: ToolbarToggleGroup2,
4293
- ToggleGroupItem: ToolbarToggleGroupItem,
4294
- ToggleGroupIconItem: ToolbarToggleGroupIconItem,
4295
- Separator: ToolbarSeparator
4296
- };
4297
-
4298
- // src/hooks/useDensityContext.ts
4299
- var useDensityContext = (propsDensity) => {
4300
- const { density } = useContext6(DensityContext);
4301
- return propsDensity ?? density;
4302
- };
4303
-
4304
- export {
4305
- useDensityContext,
4306
- useElevationContext,
4307
- useThemeContext,
4308
- useIconHref,
4309
- initialSafeArea,
4310
- useSafeArea,
4311
- isLabel,
4312
- toLocalizedString,
4313
- useTranslation,
4314
- useTranslationsContext,
4315
- useVisualViewport,
4316
- AnchoredOverflow,
4317
- useAvatarContext,
4318
- Avatar,
4319
- Link,
4320
- Breadcrumb,
4321
- BUTTON_GROUP_NAME,
4322
- useButtonGroupContext,
4323
- Button,
4324
- ButtonGroup,
4325
- Icon,
4326
- createTooltipScope,
4327
- useTooltipContext,
4328
- Tooltip,
4329
- IconButton,
4330
- Toggle,
4331
- ToggleGroup,
4332
- ToggleGroupItem,
4333
- useClipboard,
4334
- hasIosKeyboard,
4335
- DensityContext,
4336
- DensityProvider,
4337
- ElevationContext,
4338
- ElevationProvider,
4339
- ThemeContext,
4340
- ThemeProvider,
4341
- Clipboard,
4342
- Dialog,
4343
- AlertDialog,
4344
- Input,
4345
- LIST_NAME,
4346
- LIST_ITEM_NAME,
4347
- useListContext,
4348
- useListItemContext,
4349
- List,
4350
- ListItem,
4351
- Tree,
4352
- TreeItem,
4353
- Treegrid,
4354
- useLandmarkMover,
4355
- useMainContext,
4356
- useSidebars,
4357
- Main,
4358
- ContextMenu2 as ContextMenu,
4359
- createDropdownMenuScope,
4360
- useDropdownMenuContext,
4361
- DropdownMenu,
4362
- useDropdownMenuMenuScope,
4363
- messageIcons,
4364
- Message,
4365
- Callout,
4366
- createPopoverScope,
4367
- Popover,
4368
- Status,
4369
- ScrollArea,
4370
- Select,
4371
- Separator4 as Separator,
4372
- Tag,
4373
- Toast,
4374
- Toolbar
4375
- };
4376
- //# sourceMappingURL=chunk-T6YPS45E.mjs.map