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