@dxos/react-ui 0.8.4-main.67995b8 → 0.8.4-main.69d29f4

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