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