@dxos/react-ui 0.8.4-main.dedc0f3 → 0.8.4-main.e00bdcdb52

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