@dxos/react-ui 0.10.0 → 0.11.0

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 (354) hide show
  1. package/dist/lib/chunk-parse-stack.mjs +1566 -0
  2. package/dist/lib/chunk-parse-stack.mjs.map +1 -0
  3. package/dist/lib/index.mjs +5220 -0
  4. package/dist/lib/index.mjs.map +1 -0
  5. package/dist/lib/testing.mjs +144 -0
  6. package/dist/lib/testing.mjs.map +1 -0
  7. package/dist/lib/translations.mjs +38 -0
  8. package/dist/lib/translations.mjs.map +1 -0
  9. package/dist/types/src/components/Avatars/Avatar.d.ts +1 -6
  10. package/dist/types/src/components/Avatars/Avatar.d.ts.map +1 -1
  11. package/dist/types/src/components/Avatars/AvatarContext.d.ts +9 -0
  12. package/dist/types/src/components/Avatars/AvatarContext.d.ts.map +1 -0
  13. package/dist/types/src/components/Avatars/index.d.ts +1 -0
  14. package/dist/types/src/components/Avatars/index.d.ts.map +1 -1
  15. package/dist/types/src/components/Breadcrumb/Breadcrumb.d.ts +1 -1
  16. package/dist/types/src/components/Breadcrumb/Breadcrumb.d.ts.map +1 -1
  17. package/dist/types/src/components/Breadcrumb/Breadcrumb.stories.d.ts.map +1 -1
  18. package/dist/types/src/components/Breadcrumb/Breadcrumb.theme.d.ts.map +1 -1
  19. package/dist/types/src/components/Button/Button.d.ts +1 -6
  20. package/dist/types/src/components/Button/Button.d.ts.map +1 -1
  21. package/dist/types/src/components/Button/ButtonGroupContext.d.ts +9 -0
  22. package/dist/types/src/components/Button/ButtonGroupContext.d.ts.map +1 -0
  23. package/dist/types/src/components/Button/IconButton.d.ts.map +1 -1
  24. package/dist/types/src/components/Button/IconButton.stories.d.ts.map +1 -1
  25. package/dist/types/src/components/Button/IconButton.theme.d.ts +1 -0
  26. package/dist/types/src/components/Button/IconButton.theme.d.ts.map +1 -1
  27. package/dist/types/src/components/Button/SystemIconButton.d.ts +1 -1
  28. package/dist/types/src/components/Button/SystemIconButton.d.ts.map +1 -1
  29. package/dist/types/src/components/Button/index.d.ts +1 -0
  30. package/dist/types/src/components/Button/index.d.ts.map +1 -1
  31. package/dist/types/src/components/Calendar/Calendar.d.ts +0 -2
  32. package/dist/types/src/components/Calendar/Calendar.d.ts.map +1 -1
  33. package/dist/types/src/components/Calendar/index.d.ts +1 -0
  34. package/dist/types/src/components/Calendar/index.d.ts.map +1 -1
  35. package/dist/types/src/components/Calendar/parse-calendar-date.d.ts +3 -0
  36. package/dist/types/src/components/Calendar/parse-calendar-date.d.ts.map +1 -0
  37. package/dist/types/src/components/Card/Card.d.ts +42 -15
  38. package/dist/types/src/components/Card/Card.d.ts.map +1 -1
  39. package/dist/types/src/components/Card/Card.theme.d.ts +0 -1
  40. package/dist/types/src/components/Card/Card.theme.d.ts.map +1 -1
  41. package/dist/types/src/components/Carousel/Carousel.d.ts +2 -4
  42. package/dist/types/src/components/Carousel/Carousel.d.ts.map +1 -1
  43. package/dist/types/src/components/Carousel/CarouselContext.d.ts +8 -0
  44. package/dist/types/src/components/Carousel/CarouselContext.d.ts.map +1 -0
  45. package/dist/types/src/components/Carousel/index.d.ts +1 -0
  46. package/dist/types/src/components/Carousel/index.d.ts.map +1 -1
  47. package/dist/types/src/components/Clipboard/ClipboardContext.d.ts +7 -0
  48. package/dist/types/src/components/Clipboard/ClipboardContext.d.ts.map +1 -0
  49. package/dist/types/src/components/Clipboard/ClipboardProvider.d.ts +0 -6
  50. package/dist/types/src/components/Clipboard/ClipboardProvider.d.ts.map +1 -1
  51. package/dist/types/src/components/Clipboard/index.d.ts +1 -1
  52. package/dist/types/src/components/Clipboard/index.d.ts.map +1 -1
  53. package/dist/types/src/components/Column/Column.d.ts +7 -12
  54. package/dist/types/src/components/Column/Column.d.ts.map +1 -1
  55. package/dist/types/src/components/Column/Column.stories.d.ts +2 -2
  56. package/dist/types/src/components/Column/Column.theme.d.ts +0 -1
  57. package/dist/types/src/components/Column/Column.theme.d.ts.map +1 -1
  58. package/dist/types/src/components/Column/ColumnContext.d.ts +9 -0
  59. package/dist/types/src/components/Column/ColumnContext.d.ts.map +1 -0
  60. package/dist/types/src/components/Column/index.d.ts +1 -0
  61. package/dist/types/src/components/Column/index.d.ts.map +1 -1
  62. package/dist/types/src/components/Column/withColumn.d.ts +40 -4
  63. package/dist/types/src/components/Column/withColumn.d.ts.map +1 -1
  64. package/dist/types/src/components/DatePicker/DatePicker.d.ts +0 -10
  65. package/dist/types/src/components/DatePicker/DatePicker.d.ts.map +1 -1
  66. package/dist/types/src/components/DatePicker/DatePickerContext.d.ts +13 -0
  67. package/dist/types/src/components/DatePicker/DatePickerContext.d.ts.map +1 -0
  68. package/dist/types/src/components/DatePicker/index.d.ts +1 -0
  69. package/dist/types/src/components/DatePicker/index.d.ts.map +1 -1
  70. package/dist/types/src/components/Dialog/AlertDialog.d.ts +3 -3
  71. package/dist/types/src/components/Dialog/Dialog.d.ts +3 -3
  72. package/dist/types/src/components/ErrorFallback/ErrorStack.d.ts +5 -10
  73. package/dist/types/src/components/ErrorFallback/ErrorStack.d.ts.map +1 -1
  74. package/dist/types/src/components/ErrorFallback/index.d.ts +1 -0
  75. package/dist/types/src/components/ErrorFallback/index.d.ts.map +1 -1
  76. package/dist/types/src/components/ErrorFallback/parse-stack.d.ts +8 -0
  77. package/dist/types/src/components/ErrorFallback/parse-stack.d.ts.map +1 -0
  78. package/dist/types/src/components/Focus/Focus.d.ts +2 -10
  79. package/dist/types/src/components/Focus/Focus.d.ts.map +1 -1
  80. package/dist/types/src/components/Focus/FocusContext.d.ts +10 -0
  81. package/dist/types/src/components/Focus/FocusContext.d.ts.map +1 -0
  82. package/dist/types/src/components/Focus/index.d.ts +1 -0
  83. package/dist/types/src/components/Focus/index.d.ts.map +1 -1
  84. package/dist/types/src/components/Input/Input.d.ts +9 -10
  85. package/dist/types/src/components/Input/Input.d.ts.map +1 -1
  86. package/dist/types/src/components/Input/Input.stories.d.ts +7 -2
  87. package/dist/types/src/components/Input/Input.stories.d.ts.map +1 -1
  88. package/dist/types/src/components/Input/Input.theme.d.ts +13 -0
  89. package/dist/types/src/components/Input/Input.theme.d.ts.map +1 -1
  90. package/dist/types/src/components/Input/InputTriggerContext.d.ts +15 -0
  91. package/dist/types/src/components/Input/InputTriggerContext.d.ts.map +1 -0
  92. package/dist/types/src/components/Input/SegmentedInput.d.ts.map +1 -1
  93. package/dist/types/src/components/Input/index.d.ts +1 -0
  94. package/dist/types/src/components/Input/index.d.ts.map +1 -1
  95. package/dist/types/src/components/Main/Main.d.ts +2 -35
  96. package/dist/types/src/components/Main/Main.d.ts.map +1 -1
  97. package/dist/types/src/components/Main/Main.stories.d.ts.map +1 -1
  98. package/dist/types/src/components/Main/Main.theme.d.ts.map +1 -1
  99. package/dist/types/src/components/Main/MainContext.d.ts +38 -0
  100. package/dist/types/src/components/Main/MainContext.d.ts.map +1 -0
  101. package/dist/types/src/components/Main/index.d.ts +1 -0
  102. package/dist/types/src/components/Main/index.d.ts.map +1 -1
  103. package/dist/types/src/components/MediaPlayer/MediaPlayer.d.ts +1 -17
  104. package/dist/types/src/components/MediaPlayer/MediaPlayer.d.ts.map +1 -1
  105. package/dist/types/src/components/MediaPlayer/index.d.ts +1 -0
  106. package/dist/types/src/components/MediaPlayer/index.d.ts.map +1 -1
  107. package/dist/types/src/components/MediaPlayer/media-kind.d.ts +18 -0
  108. package/dist/types/src/components/MediaPlayer/media-kind.d.ts.map +1 -0
  109. package/dist/types/src/components/Menu/DropdownMenu.d.ts +6 -22
  110. package/dist/types/src/components/Menu/DropdownMenu.d.ts.map +1 -1
  111. package/dist/types/src/components/Menu/DropdownMenu.stories.d.ts +1 -11
  112. package/dist/types/src/components/Menu/DropdownMenu.stories.d.ts.map +1 -1
  113. package/dist/types/src/components/Menu/DropdownMenuContext.d.ts +27 -0
  114. package/dist/types/src/components/Menu/DropdownMenuContext.d.ts.map +1 -0
  115. package/dist/types/src/components/Menu/index.d.ts +1 -0
  116. package/dist/types/src/components/Menu/index.d.ts.map +1 -1
  117. package/dist/types/src/components/Message/Message.d.ts +11 -6
  118. package/dist/types/src/components/Message/Message.d.ts.map +1 -1
  119. package/dist/types/src/components/Message/Message.stories.d.ts +4 -1
  120. package/dist/types/src/components/Message/Message.stories.d.ts.map +1 -1
  121. package/dist/types/src/components/Message/Message.theme.d.ts.map +1 -1
  122. package/dist/types/src/components/Message/index.d.ts +1 -0
  123. package/dist/types/src/components/Message/index.d.ts.map +1 -1
  124. package/dist/types/src/components/Message/message-icons.d.ts +3 -0
  125. package/dist/types/src/components/Message/message-icons.d.ts.map +1 -0
  126. package/dist/types/src/components/Panel/Panel.d.ts +4 -4
  127. package/dist/types/src/components/Panel/Panel.stories.d.ts.map +1 -1
  128. package/dist/types/src/components/Panel/Panel.theme.d.ts +1 -1
  129. package/dist/types/src/components/Panel/Panel.theme.d.ts.map +1 -1
  130. package/dist/types/src/components/Popover/Popover.d.ts +6 -10
  131. package/dist/types/src/components/Popover/Popover.d.ts.map +1 -1
  132. package/dist/types/src/components/Popover/PopoverContext.d.ts +29 -0
  133. package/dist/types/src/components/Popover/PopoverContext.d.ts.map +1 -0
  134. package/dist/types/src/components/Popover/index.d.ts +1 -0
  135. package/dist/types/src/components/Popover/index.d.ts.map +1 -1
  136. package/dist/types/src/components/ScrollArea/ScrollArea.d.ts +2 -2
  137. package/dist/types/src/components/ScrollArea/ScrollArea.stories.d.ts +2 -2
  138. package/dist/types/src/components/ScrollContainer/ScrollContainer.d.ts +3 -16
  139. package/dist/types/src/components/ScrollContainer/ScrollContainer.d.ts.map +1 -1
  140. package/dist/types/src/components/ScrollContainer/ScrollContainerContext.d.ts +16 -0
  141. package/dist/types/src/components/ScrollContainer/ScrollContainerContext.d.ts.map +1 -0
  142. package/dist/types/src/components/ScrollContainer/index.d.ts +1 -0
  143. package/dist/types/src/components/ScrollContainer/index.d.ts.map +1 -1
  144. package/dist/types/src/components/Slider/Slider.d.ts +25 -0
  145. package/dist/types/src/components/Slider/Slider.d.ts.map +1 -0
  146. package/dist/types/src/components/Slider/Slider.stories.d.ts +29 -0
  147. package/dist/types/src/components/Slider/Slider.stories.d.ts.map +1 -0
  148. package/dist/types/src/components/Slider/Slider.test.d.ts +2 -0
  149. package/dist/types/src/components/Slider/Slider.test.d.ts.map +1 -0
  150. package/dist/types/src/components/Slider/Slider.theme.d.ts +7 -0
  151. package/dist/types/src/components/Slider/Slider.theme.d.ts.map +1 -0
  152. package/dist/types/src/components/Slider/index.d.ts +2 -0
  153. package/dist/types/src/components/Slider/index.d.ts.map +1 -0
  154. package/dist/types/src/components/Splitter/Splitter.d.ts +3 -3
  155. package/dist/types/src/components/Status/Status.d.ts.map +1 -1
  156. package/dist/types/src/components/Toolbar/Toolbar.d.ts +4 -2
  157. package/dist/types/src/components/Toolbar/Toolbar.d.ts.map +1 -1
  158. package/dist/types/src/components/Toolbar/Toolbar.theme.d.ts.map +1 -1
  159. package/dist/types/src/components/Tooltip/TextTooltip.d.ts.map +1 -1
  160. package/dist/types/src/components/Tooltip/Tooltip.d.ts +2 -23
  161. package/dist/types/src/components/Tooltip/Tooltip.d.ts.map +1 -1
  162. package/dist/types/src/components/Tooltip/TooltipContext.d.ts +35 -0
  163. package/dist/types/src/components/Tooltip/TooltipContext.d.ts.map +1 -0
  164. package/dist/types/src/components/Tooltip/index.d.ts +1 -0
  165. package/dist/types/src/components/Tooltip/index.d.ts.map +1 -1
  166. package/dist/types/src/components/index.d.ts +1 -0
  167. package/dist/types/src/components/index.d.ts.map +1 -1
  168. package/dist/types/src/exemplars/generics.stories.d.ts +1 -1
  169. package/dist/types/src/hooks/useIconHref.d.ts +8 -0
  170. package/dist/types/src/hooks/useIconHref.d.ts.map +1 -1
  171. package/dist/types/src/hooks/useThemeContext.d.ts +2 -1
  172. package/dist/types/src/hooks/useThemeContext.d.ts.map +1 -1
  173. package/dist/types/src/hooks/useThemeContext.test.d.ts +2 -0
  174. package/dist/types/src/hooks/useThemeContext.test.d.ts.map +1 -0
  175. package/dist/types/src/playground/Density.stories.d.ts +11 -0
  176. package/dist/types/src/playground/Density.stories.d.ts.map +1 -0
  177. package/dist/types/src/playground/Elevation.stories.d.ts +14 -0
  178. package/dist/types/src/playground/Elevation.stories.d.ts.map +1 -0
  179. package/dist/types/src/primitives/Container/Container.d.ts +1 -1
  180. package/dist/types/src/primitives/Container/Container.d.ts.map +1 -1
  181. package/dist/types/src/primitives/DensityProvider/DensityContext.d.ts +6 -0
  182. package/dist/types/src/primitives/DensityProvider/DensityContext.d.ts.map +1 -0
  183. package/dist/types/src/primitives/DensityProvider/DensityProvider.d.ts +10 -4
  184. package/dist/types/src/primitives/DensityProvider/DensityProvider.d.ts.map +1 -1
  185. package/dist/types/src/primitives/DensityProvider/index.d.ts +1 -0
  186. package/dist/types/src/primitives/DensityProvider/index.d.ts.map +1 -1
  187. package/dist/types/src/primitives/Flex/Flex.d.ts +1 -1
  188. package/dist/types/src/primitives/Flex/Flex.d.ts.map +1 -1
  189. package/dist/types/src/primitives/Grid/Grid.d.ts +1 -1
  190. package/dist/types/src/primitives/Grid/Grid.d.ts.map +1 -1
  191. package/dist/types/src/primitives/ThemeProvider/IconRegistry.d.ts +15 -0
  192. package/dist/types/src/primitives/ThemeProvider/IconRegistry.d.ts.map +1 -0
  193. package/dist/types/src/primitives/ThemeProvider/ThemeProvider.d.ts +1 -2
  194. package/dist/types/src/primitives/ThemeProvider/ThemeProvider.d.ts.map +1 -1
  195. package/dist/types/src/primitives/ThemeProvider/ThemeProvider.stories.d.ts +1 -1
  196. package/dist/types/src/primitives/ThemeProvider/TranslationsContext.d.ts +112 -0
  197. package/dist/types/src/primitives/ThemeProvider/TranslationsContext.d.ts.map +1 -0
  198. package/dist/types/src/primitives/ThemeProvider/TranslationsProvider.d.ts +0 -109
  199. package/dist/types/src/primitives/ThemeProvider/TranslationsProvider.d.ts.map +1 -1
  200. package/dist/types/src/primitives/ThemeProvider/icon-registry.d.ts +34 -0
  201. package/dist/types/src/primitives/ThemeProvider/icon-registry.d.ts.map +1 -0
  202. package/dist/types/src/primitives/ThemeProvider/index.d.ts +3 -1
  203. package/dist/types/src/primitives/ThemeProvider/index.d.ts.map +1 -1
  204. package/dist/types/src/testing/decorators/withTheme.d.ts +1 -1
  205. package/dist/types/src/testing/decorators/withTheme.d.ts.map +1 -1
  206. package/dist/types/src/theme/defaultTheme.d.ts.map +1 -1
  207. package/dist/types/src/theme/index.d.ts +1 -0
  208. package/dist/types/src/theme/index.d.ts.map +1 -1
  209. package/dist/types/src/util/slots.d.ts +6 -3
  210. package/dist/types/src/util/slots.d.ts.map +1 -1
  211. package/dist/types/src/util/slots.stories.d.ts +14 -0
  212. package/dist/types/src/util/slots.stories.d.ts.map +1 -0
  213. package/dist/types/tsconfig.tsbuildinfo +1 -1
  214. package/package.json +25 -27
  215. package/src/components/Avatars/Avatar.tsx +1 -11
  216. package/src/components/Avatars/AvatarContext.ts +16 -0
  217. package/src/components/Avatars/index.ts +2 -0
  218. package/src/components/Breadcrumb/Breadcrumb.stories.tsx +27 -25
  219. package/src/components/Breadcrumb/Breadcrumb.theme.ts +7 -5
  220. package/src/components/Breadcrumb/Breadcrumb.tsx +2 -2
  221. package/src/components/Button/Button.tsx +2 -11
  222. package/src/components/Button/ButtonGroupContext.ts +17 -0
  223. package/src/components/Button/IconButton.stories.tsx +2 -3
  224. package/src/components/Button/IconButton.theme.ts +15 -2
  225. package/src/components/Button/IconButton.tsx +6 -1
  226. package/src/components/Button/SystemIconButton.tsx +23 -16
  227. package/src/components/Button/index.ts +2 -0
  228. package/src/components/Calendar/Calendar.theme.ts +5 -5
  229. package/src/components/Calendar/Calendar.tsx +1 -3
  230. package/src/components/Calendar/index.ts +2 -0
  231. package/src/components/Calendar/parse-calendar-date.ts +9 -0
  232. package/src/components/Card/Card.theme.ts +48 -38
  233. package/src/components/Card/Card.tsx +77 -16
  234. package/src/components/Carousel/Carousel.tsx +4 -11
  235. package/src/components/Carousel/CarouselContext.ts +17 -0
  236. package/src/components/Carousel/index.ts +2 -0
  237. package/src/components/Clipboard/ClipboardContext.ts +20 -0
  238. package/src/components/Clipboard/ClipboardProvider.tsx +2 -12
  239. package/src/components/Clipboard/CopyButton.tsx +1 -1
  240. package/src/components/Clipboard/index.ts +1 -1
  241. package/src/components/Column/Column.stories.tsx +2 -2
  242. package/src/components/Column/Column.theme.ts +2 -11
  243. package/src/components/Column/Column.tsx +35 -57
  244. package/src/components/Column/ColumnContext.ts +22 -0
  245. package/src/components/Column/index.ts +2 -0
  246. package/src/components/Column/withColumn.ts +41 -4
  247. package/src/components/DatePicker/DatePicker.theme.ts +2 -2
  248. package/src/components/DatePicker/DatePicker.tsx +1 -14
  249. package/src/components/DatePicker/DatePickerContext.ts +21 -0
  250. package/src/components/DatePicker/index.ts +2 -0
  251. package/src/components/ErrorFallback/ErrorStack.tsx +8 -28
  252. package/src/components/ErrorFallback/index.ts +1 -0
  253. package/src/components/ErrorFallback/parse-stack.ts +33 -0
  254. package/src/components/Focus/Focus.stories.tsx +6 -6
  255. package/src/components/Focus/Focus.tsx +2 -30
  256. package/src/components/Focus/FocusContext.ts +22 -0
  257. package/src/components/Focus/index.ts +2 -0
  258. package/src/components/Image/Image.tsx +1 -1
  259. package/src/components/Input/Input.stories.tsx +63 -48
  260. package/src/components/Input/Input.theme.ts +33 -27
  261. package/src/components/Input/Input.tsx +46 -43
  262. package/src/components/Input/InputTriggerContext.ts +45 -0
  263. package/src/components/Input/SegmentedInput.tsx +2 -1
  264. package/src/components/Input/index.ts +2 -0
  265. package/src/components/Main/Main.stories.tsx +2 -1
  266. package/src/components/Main/Main.theme.ts +10 -1
  267. package/src/components/Main/Main.tsx +1 -115
  268. package/src/components/Main/MainContext.ts +126 -0
  269. package/src/components/Main/index.ts +2 -0
  270. package/src/components/MediaPlayer/MediaPlayer.tsx +16 -47
  271. package/src/components/MediaPlayer/index.ts +2 -0
  272. package/src/components/MediaPlayer/media-kind.ts +41 -0
  273. package/src/components/Menu/DropdownMenu.tsx +27 -44
  274. package/src/components/Menu/DropdownMenuContext.ts +35 -0
  275. package/src/components/Menu/Menu.theme.ts +3 -3
  276. package/src/components/Menu/index.ts +2 -0
  277. package/src/components/Message/Message.stories.tsx +32 -15
  278. package/src/components/Message/Message.theme.ts +8 -2
  279. package/src/components/Message/Message.tsx +47 -23
  280. package/src/components/Message/index.ts +2 -0
  281. package/src/components/Message/message-icons.ts +16 -0
  282. package/src/components/Panel/Panel.stories.tsx +15 -2
  283. package/src/components/Panel/Panel.theme.ts +15 -6
  284. package/src/components/Popover/Popover.theme.ts +1 -1
  285. package/src/components/Popover/Popover.tsx +22 -37
  286. package/src/components/Popover/PopoverContext.ts +32 -0
  287. package/src/components/Popover/index.ts +2 -0
  288. package/src/components/ScrollContainer/ScrollContainer.stories.tsx +1 -1
  289. package/src/components/ScrollContainer/ScrollContainer.tsx +1 -18
  290. package/src/components/ScrollContainer/ScrollContainerContext.ts +25 -0
  291. package/src/components/ScrollContainer/index.ts +2 -0
  292. package/src/components/Select/Select.theme.ts +2 -2
  293. package/src/components/Slider/Slider.stories.tsx +107 -0
  294. package/src/components/Slider/Slider.test.tsx +105 -0
  295. package/src/components/Slider/Slider.theme.ts +38 -0
  296. package/src/components/Slider/Slider.tsx +64 -0
  297. package/src/components/Slider/index.ts +5 -0
  298. package/src/components/Status/Status.theme.ts +1 -1
  299. package/src/components/Status/Status.tsx +0 -1
  300. package/src/components/Tag/Tag.stories.tsx +1 -1
  301. package/src/components/Toolbar/Toolbar.theme.ts +14 -5
  302. package/src/components/Toolbar/Toolbar.tsx +5 -1
  303. package/src/components/Tooltip/TextTooltip.tsx +2 -1
  304. package/src/components/Tooltip/Tooltip.tsx +12 -35
  305. package/src/components/Tooltip/TooltipContext.ts +41 -0
  306. package/src/components/Tooltip/index.ts +2 -0
  307. package/src/components/index.ts +1 -0
  308. package/src/hooks/useIconHref.ts +26 -5
  309. package/src/hooks/useThemeContext.test.tsx +33 -0
  310. package/src/hooks/useThemeContext.ts +28 -3
  311. package/src/playground/Density.stories.tsx +41 -0
  312. package/src/playground/Elevation.stories.tsx +348 -0
  313. package/src/primitives/DensityProvider/DensityContext.ts +15 -0
  314. package/src/primitives/DensityProvider/DensityProvider.tsx +12 -6
  315. package/src/primitives/DensityProvider/index.ts +1 -0
  316. package/src/primitives/Flex/Flex.stories.tsx +1 -1
  317. package/src/primitives/Grid/Grid.stories.tsx +1 -1
  318. package/src/primitives/ThemeProvider/IconRegistry.tsx +42 -0
  319. package/src/primitives/ThemeProvider/ThemeProvider.tsx +16 -15
  320. package/src/primitives/ThemeProvider/TranslationsContext.ts +24 -0
  321. package/src/primitives/ThemeProvider/TranslationsProvider.tsx +4 -16
  322. package/src/primitives/ThemeProvider/icon-registry.ts +272 -0
  323. package/src/primitives/ThemeProvider/index.ts +9 -1
  324. package/src/testing/decorators/withLayout.tsx +4 -4
  325. package/src/testing/decorators/withLayoutVariants.tsx +3 -3
  326. package/src/testing/decorators/withTheme.tsx +1 -2
  327. package/src/theme/defaultTheme.ts +2 -0
  328. package/src/theme/index.ts +1 -0
  329. package/src/util/slots.stories.tsx +80 -0
  330. package/src/util/slots.ts +14 -5
  331. package/dist/lib/browser/chunk-CMHHVHX3.mjs +0 -46
  332. package/dist/lib/browser/chunk-CMHHVHX3.mjs.map +0 -7
  333. package/dist/lib/browser/chunk-GTHV4WYK.mjs +0 -1499
  334. package/dist/lib/browser/chunk-GTHV4WYK.mjs.map +0 -7
  335. package/dist/lib/browser/index.mjs +0 -5632
  336. package/dist/lib/browser/index.mjs.map +0 -7
  337. package/dist/lib/browser/meta.json +0 -1
  338. package/dist/lib/browser/testing/index.mjs +0 -133
  339. package/dist/lib/browser/testing/index.mjs.map +0 -7
  340. package/dist/lib/browser/translations.mjs +0 -9
  341. package/dist/lib/browser/translations.mjs.map +0 -7
  342. package/dist/lib/node-esm/chunk-3VSKWNCQ.mjs +0 -1501
  343. package/dist/lib/node-esm/chunk-3VSKWNCQ.mjs.map +0 -7
  344. package/dist/lib/node-esm/chunk-P4KFQGJI.mjs +0 -48
  345. package/dist/lib/node-esm/chunk-P4KFQGJI.mjs.map +0 -7
  346. package/dist/lib/node-esm/index.mjs +0 -5633
  347. package/dist/lib/node-esm/index.mjs.map +0 -7
  348. package/dist/lib/node-esm/meta.json +0 -1
  349. package/dist/lib/node-esm/testing/index.mjs +0 -134
  350. package/dist/lib/node-esm/testing/index.mjs.map +0 -7
  351. package/dist/lib/node-esm/translations.mjs +0 -10
  352. package/dist/lib/node-esm/translations.mjs.map +0 -7
  353. package/src/components/Column/AUDIT.md +0 -148
  354. package/src/components/Focus/AUDIT.md +0 -43
@@ -0,0 +1,1566 @@
1
+ import { I18nextProvider, useTranslation } from "react-i18next";
2
+ import { useViewportResize } from "@dxos/react-hooks";
3
+ import { createContextScope } from "@radix-ui/react-context";
4
+ import { Primitive } from "@radix-ui/react-primitive";
5
+ import { Slottable } from "@radix-ui/react-slot";
6
+ import { Suspense, createContext as createContext$1, forwardRef, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
7
+ import { dataDisabled, getHeight, getSize, messageValence, mx, sizeValue, snapSize, staticDisabled, surfaceShadow, surfaceZIndex, textValence } from "@dxos/ui-theme";
8
+ import { jsx, jsxs } from "react/jsx-runtime";
9
+ import { createKeyborg } from "keyborg";
10
+ import { log } from "@dxos/log";
11
+ import { addResources, i18n } from "@dxos/i18n";
12
+ import { enUS } from "date-fns/locale";
13
+ import { getDeep } from "@dxos/util";
14
+ import { useComposedRefs } from "@radix-ui/react-compose-refs";
15
+ import { composeEventHandlers } from "@radix-ui/primitive";
16
+ import { DismissableLayer } from "@radix-ui/react-dismissable-layer";
17
+ import { useId as useId$2 } from "@radix-ui/react-id";
18
+ import * as PopperPrimitive from "@radix-ui/react-popper";
19
+ import { createPopperScope } from "@radix-ui/react-popper";
20
+ import { Portal } from "@radix-ui/react-portal";
21
+ import { Presence } from "@radix-ui/react-presence";
22
+ import { useControllableState } from "@radix-ui/react-use-controllable-state";
23
+ import * as VisuallyHiddenPrimitive from "@radix-ui/react-visually-hidden";
24
+ import ErrorStackParser from "error-stack-parser";
25
+ //#region src/primitives/DensityProvider/DensityContext.ts
26
+ var DensityContext = createContext$1({ density: "md" });
27
+ //#endregion
28
+ //#region src/primitives/DensityProvider/DensityProvider.tsx
29
+ /**
30
+ * Provides density through React context only — controls opt in by reading it and emitting
31
+ * `data-density`, which applies the `--dx-control*` override for that element alone.
32
+ *
33
+ * It deliberately does NOT emit a `dx-density-*` class. Doing so set the knobs for the entire
34
+ * subtree, so a provider intended for one region (the deck's `lg` pane toolbar) silently resized
35
+ * unrelated descendants that read `--dx-control` — form labels, for instance. A region that wants
36
+ * subtree-wide density applies the class itself, where its scope is visible at the call site
37
+ * (see `Toolbar.Root`).
38
+ */
39
+ var DensityProvider = ({ density, children }) => /* @__PURE__ */ jsx(DensityContext.Provider, {
40
+ value: { density },
41
+ children
42
+ });
43
+ //#endregion
44
+ //#region src/primitives/ElevationProvider/ElevationProvider.tsx
45
+ var ElevationContext = createContext$1({ elevation: "base" });
46
+ var ElevationProvider = ({ elevation, children }) => /* @__PURE__ */ jsx(ElevationContext.Provider, {
47
+ value: { elevation },
48
+ children
49
+ });
50
+ //#endregion
51
+ //#region src/primitives/ThemeProvider/icon-registry.ts
52
+ var SVG_NS = "http://www.w3.org/2000/svg";
53
+ var SPRITE_URL = "/icons.svg";
54
+ var SYMBOL_PATTERN = /^([a-z0-9]+)--([a-z0-9-]+)--([a-z]+)$/;
55
+ /**
56
+ * Phosphor's published layout: `{variant}/{name}[-{variant}].svg`, regular being unsuffixed.
57
+ */
58
+ var phosphorIconSource = (route = "/phosphor") => ({
59
+ iconSet: "ph",
60
+ url: (name, variant) => `${route}/${variant}/${name}${variant === "regular" ? "" : `-${variant}`}.svg`
61
+ });
62
+ var defaultSources = [phosphorIconSource()];
63
+ var NoopRegistry = {
64
+ hasIcon: () => false,
65
+ requestIcon: () => {},
66
+ subscribe: () => () => {}
67
+ };
68
+ var IconRegistryContext = createContext$1(NoopRegistry);
69
+ var REGISTRY_GLOBAL = "__dxIconRegistry";
70
+ var getHost = () => globalThis;
71
+ var setActiveRegistry = (registry) => {
72
+ const host = getHost();
73
+ if (registry === void 0) delete host[REGISTRY_GLOBAL];
74
+ else host[REGISTRY_GLOBAL] = registry;
75
+ };
76
+ var getIconRegistry = () => getHost()[REGISTRY_GLOBAL] ?? NoopRegistry;
77
+ var useIconRegistry = () => useContext(IconRegistryContext);
78
+ var createDefsContainer = () => {
79
+ const svg = document.createElementNS(SVG_NS, "svg");
80
+ svg.setAttribute("aria-hidden", "true");
81
+ svg.setAttribute("data-dx-icon-sprite", "");
82
+ svg.style.position = "absolute";
83
+ svg.style.width = "0";
84
+ svg.style.height = "0";
85
+ svg.style.overflow = "hidden";
86
+ document.body.appendChild(svg);
87
+ return svg;
88
+ };
89
+ var parseSymbolName = (name) => {
90
+ const match = name.match(SYMBOL_PATTERN);
91
+ if (!match) return;
92
+ return {
93
+ iconSet: match[1],
94
+ iconName: match[2],
95
+ variant: match[3]
96
+ };
97
+ };
98
+ var ingestSvgChildrenAsSymbol = (sourceSvg, id) => {
99
+ if (sourceSvg.tagName.toLowerCase() !== "svg") return;
100
+ const symbol = document.createElementNS(SVG_NS, "symbol");
101
+ symbol.setAttribute("id", id);
102
+ const viewBox = sourceSvg.getAttribute("viewBox");
103
+ if (viewBox) symbol.setAttribute("viewBox", viewBox);
104
+ symbol.setAttribute("fill", "currentColor");
105
+ for (const child of Array.from(sourceSvg.children)) symbol.appendChild(child.cloneNode(true));
106
+ return symbol;
107
+ };
108
+ var loadStaticSprite = async (state) => {
109
+ let text;
110
+ try {
111
+ const response = await fetch(SPRITE_URL);
112
+ if (!response.ok) return;
113
+ text = await response.text();
114
+ } catch {
115
+ return;
116
+ }
117
+ const root = new DOMParser().parseFromString(text, "image/svg+xml").documentElement;
118
+ if (root.tagName.toLowerCase() !== "svg") return;
119
+ for (const child of Array.from(root.children)) {
120
+ const node = state.defs.ownerDocument.importNode(child, true);
121
+ state.defs.appendChild(node);
122
+ }
123
+ for (const symbol of state.defs.querySelectorAll("symbol[id]")) state.loaded.add(symbol.id);
124
+ };
125
+ var resolveDynamic = async (state, staticReady, name) => {
126
+ await staticReady;
127
+ if (state.loaded.has(name)) return;
128
+ const parsed = parseSymbolName(name);
129
+ const source = parsed && state.sources.find(({ iconSet }) => iconSet === parsed.iconSet);
130
+ if (!parsed || !source) {
131
+ state.failed.add(name);
132
+ return;
133
+ }
134
+ let svgText;
135
+ try {
136
+ const response = await fetch(source.url(parsed.iconName, parsed.variant));
137
+ if (!response.ok) {
138
+ if (response.status === 404) state.failed.add(name);
139
+ return;
140
+ }
141
+ svgText = await response.text();
142
+ } catch {
143
+ return;
144
+ }
145
+ const symbol = ingestSvgChildrenAsSymbol(new DOMParser().parseFromString(svgText, "image/svg+xml").documentElement, name);
146
+ if (!symbol) {
147
+ state.failed.add(name);
148
+ return;
149
+ }
150
+ state.defs.appendChild(symbol);
151
+ state.loaded.add(name);
152
+ };
153
+ var createRegistry = (sources) => {
154
+ const defs = createDefsContainer();
155
+ const listeners = /* @__PURE__ */ new Set();
156
+ const notify = () => {
157
+ for (const listener of listeners) listener();
158
+ };
159
+ const state = {
160
+ defs,
161
+ sources,
162
+ loaded: /* @__PURE__ */ new Set(),
163
+ inflight: /* @__PURE__ */ new Map(),
164
+ failed: /* @__PURE__ */ new Set()
165
+ };
166
+ const staticReady = loadStaticSprite(state).then(notify);
167
+ return {
168
+ registry: {
169
+ hasIcon: (name) => state.loaded.has(name),
170
+ requestIcon: (name) => {
171
+ if (state.loaded.has(name) || state.inflight.has(name) || state.failed.has(name)) return;
172
+ const promise = resolveDynamic(state, staticReady, name).then(notify).finally(() => {
173
+ state.inflight.delete(name);
174
+ });
175
+ state.inflight.set(name, promise);
176
+ },
177
+ subscribe: (listener) => {
178
+ listeners.add(listener);
179
+ return () => {
180
+ listeners.delete(listener);
181
+ };
182
+ }
183
+ },
184
+ dispose: () => {
185
+ listeners.clear();
186
+ defs.remove();
187
+ }
188
+ };
189
+ };
190
+ var sharedRegistry;
191
+ var acquireRegistry = (sources) => {
192
+ if (!sharedRegistry) {
193
+ sharedRegistry = {
194
+ ...createRegistry(sources),
195
+ refCount: 0
196
+ };
197
+ setActiveRegistry(sharedRegistry.registry);
198
+ }
199
+ const handle = sharedRegistry;
200
+ handle.refCount += 1;
201
+ let released = false;
202
+ return {
203
+ registry: handle.registry,
204
+ release: () => {
205
+ if (released) return;
206
+ released = true;
207
+ handle.refCount -= 1;
208
+ if (handle.refCount === 0 && sharedRegistry === handle) {
209
+ sharedRegistry = void 0;
210
+ if (getIconRegistry() === handle.registry) setActiveRegistry(void 0);
211
+ handle.dispose();
212
+ }
213
+ }
214
+ };
215
+ };
216
+ //#endregion
217
+ //#region src/primitives/ThemeProvider/IconRegistry.tsx
218
+ /**
219
+ * Provides the shared icon registry to descendants (consumed by `useIconHref`), acquiring
220
+ * the refcounted document-level singleton on mount and releasing it on unmount.
221
+ */
222
+ var IconRegistryProvider = ({ children, sources = defaultSources }) => {
223
+ const [registry, setRegistry] = useState(NoopRegistry);
224
+ useEffect(() => {
225
+ if (typeof document === "undefined") return;
226
+ const { registry, release } = acquireRegistry(sources);
227
+ setRegistry(registry);
228
+ return release;
229
+ }, []);
230
+ return /* @__PURE__ */ jsx(IconRegistryContext.Provider, {
231
+ value: registry,
232
+ children
233
+ });
234
+ };
235
+ //#endregion
236
+ //#region src/util/mobile.ts
237
+ /**
238
+ * Determines whether the on-screen keyboard will appear on `focus` outside of a click handler.
239
+ */
240
+ var hasIosKeyboard = () => {
241
+ return !!navigator.userAgent.match(/iP(ad|od|hone).+Safari/);
242
+ };
243
+ //#endregion
244
+ //#region src/primitives/ThemeProvider/TranslationsContext.ts
245
+ var initialNs = "dxos-common";
246
+ var initialDtLocale = enUS;
247
+ var TranslationsContext = createContext$1({
248
+ appNs: initialNs,
249
+ dtLocale: initialDtLocale
250
+ });
251
+ var useTranslation$1 = (...args) => {
252
+ const result = useTranslation(...args);
253
+ const { dtLocale } = useContext(TranslationsContext);
254
+ return {
255
+ ...result,
256
+ dtLocale
257
+ };
258
+ };
259
+ //#endregion
260
+ //#region src/primitives/ThemeProvider/TranslationsProvider.tsx
261
+ var TranslationsProvider = ({ fallback, resourceExtensions, children, appNs, dtLocale }) => {
262
+ const [loaded, setLoaded] = useState(false);
263
+ useEffect(() => {
264
+ setLoaded(false);
265
+ if (resourceExtensions && resourceExtensions.length) addResources(resourceExtensions);
266
+ setLoaded(true);
267
+ }, [resourceExtensions]);
268
+ return /* @__PURE__ */ jsx(I18nextProvider, {
269
+ i18n,
270
+ children: /* @__PURE__ */ jsx(TranslationsContext.Provider, {
271
+ value: {
272
+ appNs: appNs ?? "dxos-common",
273
+ dtLocale: dtLocale ?? initialDtLocale
274
+ },
275
+ children: /* @__PURE__ */ jsx(Suspense, {
276
+ fallback,
277
+ children: loaded ? children : fallback
278
+ })
279
+ })
280
+ });
281
+ };
282
+ //#endregion
283
+ //#region src/primitives/ThemeProvider/ThemeProvider.tsx
284
+ /**
285
+ * @internal
286
+ */
287
+ var ThemeContext = createContext$1(void 0);
288
+ var ThemeProvider = ({ children, fallback = null, resourceExtensions, appNs, tx = (_path, _styleProps, ..._options) => void 0, themeMode = "dark", rootDensity = "md", platform }) => {
289
+ useEffect(() => {
290
+ if (document.defaultView) {
291
+ const kb = createKeyborg(document.defaultView);
292
+ kb.subscribe(handleInputModalityChange);
293
+ return () => kb.unsubscribe(handleInputModalityChange);
294
+ }
295
+ }, []);
296
+ const safeAreaPadding = useSafeArea();
297
+ const contextValue = useMemo(() => ({
298
+ tx,
299
+ themeMode,
300
+ hasIosKeyboard: hasIosKeyboard(),
301
+ safeAreaPadding,
302
+ platform
303
+ }), [
304
+ tx,
305
+ themeMode,
306
+ safeAreaPadding,
307
+ platform
308
+ ]);
309
+ return /* @__PURE__ */ jsx(ThemeContext.Provider, {
310
+ value: contextValue,
311
+ children: /* @__PURE__ */ jsx(IconRegistryProvider, { children: /* @__PURE__ */ jsx(TranslationsProvider, {
312
+ fallback,
313
+ resourceExtensions,
314
+ appNs,
315
+ children: /* @__PURE__ */ jsx(ElevationProvider, {
316
+ elevation: "base",
317
+ children: /* @__PURE__ */ jsx(DensityProvider, {
318
+ density: rootDensity,
319
+ children
320
+ })
321
+ })
322
+ }) })
323
+ });
324
+ };
325
+ var handleInputModalityChange = (isUsingKeyboard) => {
326
+ if (isUsingKeyboard) document.body.setAttribute("data-w-keyboard", "true");
327
+ else document.body.removeAttribute("data-w-keyboard");
328
+ };
329
+ //#endregion
330
+ //#region src/hooks/useElevationContext.ts
331
+ var useElevationContext = (propsElevation) => {
332
+ const { elevation } = useContext(ElevationContext);
333
+ return propsElevation ?? elevation;
334
+ };
335
+ //#endregion
336
+ //#region src/hooks/useSafeArea.ts
337
+ var initialSafeArea = {
338
+ top: NaN,
339
+ right: NaN,
340
+ bottom: NaN,
341
+ left: NaN
342
+ };
343
+ var useSafeArea = () => {
344
+ const [padding, setPadding] = useState(initialSafeArea);
345
+ useViewportResize(useCallback(() => {
346
+ setPadding({
347
+ top: parseFloat(getComputedStyle(document.documentElement).getPropertyValue("--safe-area-top")),
348
+ right: parseFloat(getComputedStyle(document.documentElement).getPropertyValue("--safe-area-right")),
349
+ bottom: parseFloat(getComputedStyle(document.documentElement).getPropertyValue("--safe-area-bottom")),
350
+ left: parseFloat(getComputedStyle(document.documentElement).getPropertyValue("--safe-area-left"))
351
+ });
352
+ }, []));
353
+ return padding;
354
+ };
355
+ //#endregion
356
+ //#region src/theme/bindTheme.ts
357
+ var bindTheme = (theme) => {
358
+ return (path, styleProps, ...etc) => {
359
+ const result = getDeep(theme, path.split("."));
360
+ return typeof result === "function" ? result(styleProps ?? {}, ...etc) : void 0;
361
+ };
362
+ };
363
+ //#endregion
364
+ //#region src/components/Avatars/Avatar.theme.ts
365
+ var root$19 = ({ size = 10, inGroup }, ...etc) => mx("relative inline-flex shrink-0", getSize(size), inGroup && (size === "px" || size <= 3 ? "-mr-1" : "-mr-2"), ...etc);
366
+ var label$1 = ({ srOnly }, ...etc) => mx(srOnly && "sr-only", ...etc);
367
+ var description$3 = ({ srOnly }, ...etc) => mx("text-description", srOnly && "sr-only", ...etc);
368
+ var frame = ({ variant }, ...etc) => mx("h-full w-full bg-(--surface-bg)", variant === "circle" ? "rounded-full" : "rounded-sm", ...etc);
369
+ var statusIcon = ({ status, size = 3 }, ...etc) => mx("absolute bottom-0 end-0", getSize(size), status === "inactive" ? "text-amber-400 dark:text-amber-300" : status === "active" ? "text-emerald-400 dark:text-emerald-300" : "text-neutral-400 dark:text-neutral-300", ...etc);
370
+ var ring$1 = ({ status, variant, animation }, ...etc) => mx("absolute inset-0 border-2", variant === "circle" ? "rounded-full" : "rounded-sm", status === "current" ? "border-primary-400 dark:border-primary-500" : status === "active" ? "border-emerald-400 dark:border-emerald-400" : status === "error" ? "border-rose-400 dark:border-rose-500" : status === "warning" ? "border-amber-400 dark:border-amber-500" : status === "inactive" ? "border-separator" : status === "internal" ? "border-fuchsia-600" : "border-[color:var(--surface-bg)]", animation === "pulse" ? "animate-halo-pulse" : "", ...etc);
371
+ var fallbackText = (_props, ...etc) => mx("fill-white", ...etc);
372
+ var group$1 = (_props, ...etc) => mx("inline-flex items-center", ...etc);
373
+ var groupLabel$1 = ({ size, srOnly }, ...etc) => mx(srOnly ? "sr-only" : "rounded-full truncate text-sm leading-none py-1 px-2 relative z-[1] flex items-center justify-center", size && getHeight(size), ...etc);
374
+ var groupDescription = ({ srOnly }, ...etc) => mx(srOnly ? "sr-only" : "text-description", ...etc);
375
+ var avatarTheme = {
376
+ root: root$19,
377
+ label: label$1,
378
+ description: description$3,
379
+ statusIcon,
380
+ frame,
381
+ ring: ring$1,
382
+ fallbackText,
383
+ group: group$1,
384
+ groupLabel: groupLabel$1,
385
+ groupDescription
386
+ };
387
+ //#endregion
388
+ //#region src/components/Breadcrumb/Breadcrumb.theme.ts
389
+ var root$18 = (_props, ...etc) => mx("flex items-center grow overflow-hidden", ...etc);
390
+ var list = (_props, ...etc) => mx("flex items-center min-w-0 grow overflow-x-auto scrollbar-none", ...etc);
391
+ var listItem = (_props, ...etc) => mx("flex items-center shrink-0", ...etc);
392
+ var current = (_props, ...etc) => mx("whitespace-nowrap", ...etc);
393
+ var separator$2 = (_props, ...etc) => mx("shrink-0 opacity-50", ...etc);
394
+ var breadcrumbTheme = {
395
+ root: root$18,
396
+ list,
397
+ listItem,
398
+ current,
399
+ separator: separator$2
400
+ };
401
+ //#endregion
402
+ //#region src/components/Button/Button.theme.ts
403
+ var root$17 = (_props, ...etc) => {
404
+ return mx("dx-button dx-focus-ring group gap-1 [&_span]:truncate", ...etc);
405
+ };
406
+ var group = (_props, ...etc) => {
407
+ return mx("inline-flex rounded-xs [&>:first-child]:rounded-w-sm [&>:last-child]:rounded-ie-sm [&>button]:relative", ...etc);
408
+ };
409
+ var buttonTheme = {
410
+ root: root$17,
411
+ group
412
+ };
413
+ //#endregion
414
+ //#region src/components/Button/IconButton.theme.ts
415
+ var root$16 = ({ iconOnly, square, caretDown }, ...etc) => {
416
+ return mx(!iconOnly && "gap-1.5", (square || iconOnly && !caretDown) && "aspect-square justify-self-center", ...etc);
417
+ };
418
+ var iconButtonTheme = { root: root$16 };
419
+ //#endregion
420
+ //#region src/components/Calendar/Calendar.theme.ts
421
+ var root$15 = (_p, ...etc) => mx("relative w-fit h-fit self-start p-2 select-none dx-group-surface text-base-fg", ...etc);
422
+ var nav = (_p, ...etc) => mx("flex items-center justify-between pb-1", ...etc);
423
+ var caption_label = (_p, ...etc) => mx("flex-1 text-center text-sm font-medium", ...etc);
424
+ var button_previous = (_p, ...etc) => mx("size-(--dx-control-sm) inline-flex items-center justify-center rounded-sm shrink-0", "text-description hover:bg-hover-surface", "data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed", ...etc);
425
+ var button_next = (_p, ...etc) => mx("size-(--dx-control-sm) inline-flex items-center justify-center rounded-sm shrink-0", "text-description hover:bg-hover-surface", "data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed", ...etc);
426
+ var month_grid = (_p, ...etc) => mx("w-full border-collapse", ...etc);
427
+ var weekdays = (_p, ...etc) => mx("", ...etc);
428
+ var weekday = (_p, ...etc) => mx("w-(--dx-control-md) h-(--dx-control-sm) text-xs font-thin text-description", ...etc);
429
+ var day = (_p, ...etc) => mx("relative size-(--dx-control-md) p-0 text-center text-sm rounded-sm inline-flex items-center justify-center cursor-pointer", "outline-none", "data-[hovered]:bg-hover-surface", "data-[focus-visible]:outline-2 data-[focus-visible]:outline-primary-500", "data-[today]:text-orange-500 data-[today]:font-medium", "data-[selected]:bg-primary-500 data-[selected]:text-primary-fg data-[selected]:hover:bg-primary-500", "data-[outside-month]:text-description/40", "data-[disabled]:text-description/40 data-[disabled]:cursor-not-allowed data-[disabled]:hover:bg-transparent", "data-[unavailable]:line-through data-[unavailable]:text-description/50 data-[unavailable]:cursor-not-allowed", "data-[selection-start]:rounded-l-sm data-[selection-end]:rounded-r-sm", "data-[selection-start]:bg-primary-500 data-[selection-end]:bg-primary-500", ...etc);
430
+ var calendarTheme = {
431
+ root: root$15,
432
+ nav,
433
+ caption_label,
434
+ button_previous,
435
+ button_next,
436
+ month_grid,
437
+ weekdays,
438
+ weekday,
439
+ day
440
+ };
441
+ //#endregion
442
+ //#region src/components/Column/withColumn.ts
443
+ /**
444
+ * Column-aware theme utilities.
445
+ * Components apply these in their theme functions to participate in the Column grid
446
+ * without importing Column React components.
447
+ *
448
+ * CSS custom property cascade:
449
+ * - Column.Root sets `--dx-col: 2 / span 1` (center column placement).
450
+ * - ScrollArea.Viewport resets `--dx-col: auto` after consuming `--gutter`.
451
+ * - Components apply `grid-column: var(--dx-col, auto)` to auto-center in Column
452
+ * or do nothing outside Column / inside ScrollArea.
453
+ *
454
+ * ## Which one to use
455
+ *
456
+ * Three placement mechanisms coexist because they solve different problems. An earlier plan was to
457
+ * collapse them onto `--dx-col` alone; that was tried and abandoned — the other two are each the
458
+ * only way to express their case (see AUDIT.md §3).
459
+ *
460
+ * | Mechanism | Places | Reach for it when |
461
+ * | ----------------- | ----------------------------- | -------------------------------------------------- |
462
+ * | `center()` | the element itself | one element belongs in the content track |
463
+ * | `placeContent()` | the element's children | a subgrid row mixes gutter slots with content |
464
+ * | `propagate()` | opens the tracks to children | a child must reach the gutters |
465
+ *
466
+ * - **`center()`** is inheritance-based, so it survives a `display: contents` wrapper — the case
467
+ * where a child selector or subgrid silently fails. Prefer it whenever it is sufficient.
468
+ * - **`placeContent()`** needs the element to already be a subgrid row (`col-span-3 grid
469
+ * grid-cols-subgrid`). It reaches grandchildren too, so a wrapper element (a link, a button)
470
+ * doesn't strand its content in column 1.
471
+ * - **`propagate()`** is the only one that lets a *descendant* address the gutters: it spans the
472
+ * element across all tracks and re-exposes them via subgrid, with `.dx-container` exempted so a
473
+ * ScrollArea can span full width and keep its scrollbar in the gutter. `Dialog.Body` depends on
474
+ * this — replacing it with `center()` confines the body's ScrollArea to the content track and
475
+ * pulls the scrollbar 32px inboard.
476
+ */
477
+ var withColumn = {
478
+ /**
479
+ * Centers element in the Column grid via --dx-col. No-op outside Column or inside ScrollArea.
480
+ */
481
+ center: () => "[grid-column:var(--dx-col,auto)]",
482
+ /**
483
+ * Places a subgrid row's content children in the center track, leaving `.dx-gutter` slots to
484
+ * their own explicit `col-start`. Covers grandchildren too, so a wrapper element (a link, a
485
+ * button) doesn't strand its content in column 1 — and excludes gutters at that depth as well,
486
+ * since a `display: contents` wrapper promotes its children into this grid.
487
+ */
488
+ placeContent: () => "[&>*:not(.dx-gutter)]:col-start-2 [&>*:not(.dx-gutter)>*:not(.dx-gutter)]:col-start-2",
489
+ /**
490
+ * Propagates the Column grid to children via subgrid. No-op outside Column.
491
+ * Direct children default to center column unless they are a dx-container (ScrollArea).
492
+ */
493
+ propagate: () => "[.dx-column-root_&]:col-span-full [.dx-column-root_&]:grid [.dx-column-root_&]:grid-cols-subgrid [.dx-column-root_&]:[&>*:not(.dx-container)]:[grid-column:var(--dx-col,auto)]",
494
+ /**
495
+ * Resets --dx-col after consuming --gutter. Applied by ScrollArea.Viewport.
496
+ */
497
+ consumed: () => "[--dx-col:auto]"
498
+ };
499
+ //#endregion
500
+ //#region src/components/Card/Card.theme.ts
501
+ var subgrid = "col-span-3 grid grid-cols-subgrid gap-1 items-center";
502
+ var root$14 = ({ border, fullWidth }, ...etc) => mx("dx-card dx-card-surface dx-card-min-width dx-card-max-width min-h-(--dx-rail-item) p-1 gap-1", "group/card relative shrink-0 overflow-hidden", border && "border-2 border-separator rounded-md dx-focus-ring-group-y-indicator", fullWidth && "max-w-none!", ...etc);
503
+ var header$3 = (_, ...etc) => mx("dx-card__header", subgrid, withColumn.placeContent(), ...etc);
504
+ var title$3 = (_, ...etc) => mx("dx-card__title grow truncate", ...etc);
505
+ var body$2 = (_, ...etc) => mx("dx-card__body contents", ...etc);
506
+ var block$3 = (_, ...etc) => mx("dx-card__block", ...etc);
507
+ var text$1 = ({ variant = "default", truncate: _truncate }, ...etc) => mx("dx-card__text items-center overflow-hidden", variant === "default" && "py-1", variant === "description" && "py-1.5 text-description", ...etc);
508
+ var textSpan = ({ variant = "default", truncate }, ...etc) => mx(variant === "description" && "text-sm text-description line-clamp-3", truncate && "truncate", ...etc);
509
+ var poster = (_, ...etc) => mx("dx-card__poster col-span-3 max-h-[200px] select-none pointer-events-none", ...etc);
510
+ var posterIcon = (_, ...etc) => mx("dx-card__poster-icon col-span-3 grid place-items-center bg-input-surface text-subdued max-h-[200px]", ...etc);
511
+ var action = (_, ...etc) => mx(mx("dx-card__action", subgrid, withColumn.placeContent(), "p-0! gap-0! w-full text-start overflow-hidden"), ...etc);
512
+ var actionLabel = (_, ...etc) => mx("dx-card__action-label min-w-0 flex-1 truncate", ...etc);
513
+ var actionContent = (_, ...etc) => mx("dx-card__action-content min-w-0 flex-1 flex items-baseline gap-2 overflow-hidden", ...etc);
514
+ var actionAnnotation = (_, ...etc) => mx("dx-card__action-annotation shrink-0 text-xs text-description tabular-nums", ...etc);
515
+ var link = (_, ...etc) => mx(mx("dx-card__link", subgrid, withColumn.placeContent(), "group p-0! dx-button dx-focus-ring min-h-1!"), ...etc);
516
+ var linkLabel = (_, ...etc) => mx("dx-card__link-label min-w-0 flex-1 truncate text-sm!", ...etc);
517
+ var row$1 = ({ fullWidth }, ...etc) => mx("dx-card__row", fullWidth ? "col-span-full" : mx(subgrid, withColumn.placeContent()), ...etc);
518
+ var section = (_, ...etc) => mx("dx-card__section", subgrid, ...etc);
519
+ var sectionTitle = (_, ...etc) => mx("dx-card__section-title col-start-2 col-span-full py-2 text-xs text-description font-medium uppercase", ...etc);
520
+ var cardTheme = {
521
+ "root": root$14,
522
+ "header": header$3,
523
+ "title": title$3,
524
+ "body": body$2,
525
+ "block": block$3,
526
+ "row": row$1,
527
+ "section": section,
528
+ "section-title": sectionTitle,
529
+ "text": text$1,
530
+ "text-span": textSpan,
531
+ "poster": poster,
532
+ "poster-icon": posterIcon,
533
+ "action": action,
534
+ "action-label": actionLabel,
535
+ "action-content": actionContent,
536
+ "action-annotation": actionAnnotation,
537
+ "link": link,
538
+ "link-label": linkLabel
539
+ };
540
+ //#endregion
541
+ //#region src/components/Column/Column.theme.ts
542
+ var root$13 = (_, ...etc) => {
543
+ return mx("dx-column-root grid", ...etc);
544
+ };
545
+ /**
546
+ * Three-column subgrid row spanning all 3 columns of the parent Column.Root grid.
547
+ * Placement is explicit, not source-order based:
548
+ * - `Column.Block` self-places into column 1 (leading) or column 3 (trailing, `end`) and
549
+ * carries the `dx-gutter` marker class.
550
+ * - Every other (content) child is placed in column 2 via `[&>*:not(.dx-gutter)]`.
551
+ * Class-based placement (rather than `[data-slot=…]`) is used because Tailwind does not
552
+ * generate arbitrary variants that nest a square-bracket attribute selector.
553
+ * Robust to conditional children: a falsy leading slot never shifts content into a gutter.
554
+ * NOTE: Must not use overflow-hidden here since it will clip input focus rings.
555
+ */
556
+ var row = (_, ...etc) => {
557
+ return mx("col-span-3 grid grid-cols-subgrid", "[&>*:not(.dx-gutter)]:col-start-2", ...etc);
558
+ };
559
+ /**
560
+ * Gutter slot geometry: a `--dx-rail-item` square that centers its child, so a passive
561
+ * `<Icon>` and an interactive `IconButton` line up to the pixel. Self-places into column 1
562
+ * (default) or column 3 (`end`); the `dx-gutter` marker keeps it out of the content track.
563
+ */
564
+ var block$2 = ({ end, compact, square }, ...etc) => mx("dx-gutter grid place-items-center [&>img]:max-w-[1.5rem]", end ? "col-start-3" : "col-start-1", square && "aspect-square", !compact && "h-[var(--dx-rail-item)]", ...etc);
565
+ /**
566
+ * Center placement: places the element in column 2 (the central track between gutters) of the
567
+ * parent Column.Root grid. Does NOT use subgrid — placement is explicit on this element only.
568
+ * Safe to nest arbitrary compound components (including those that render `display: contents`).
569
+ */
570
+ var center = (_, ...etc) => {
571
+ return mx(withColumn.center(), "min-h-0", ...etc);
572
+ };
573
+ var columnTheme = {
574
+ root: root$13,
575
+ row,
576
+ block: block$2,
577
+ center
578
+ };
579
+ //#endregion
580
+ //#region src/components/DatePicker/DatePicker.theme.ts
581
+ var trigger = ({ hasValue }, ...etc) => mx("inline-flex w-fit items-center gap-2 px-2 rounded-sm border border-separator", "dx-input-surface text-base-fg", "hover:bg-hover-surface focus-visible:outline-2 focus-visible:outline-primary-500", !hasValue && "text-description", ...etc);
582
+ var content$7 = (_p, ...etc) => mx("flex flex-col gap-2", ...etc);
583
+ var timeField = (_p, ...etc) => mx("flex items-center gap-2 px-2 py-1", "[&_input]:bg-input-surface [&_input]:border [&_input]:border-separator", "[&_input]:rounded-sm [&_input]:px-2 [&_input]:py-1", ...etc);
584
+ var datePickerTheme = {
585
+ trigger,
586
+ content: content$7,
587
+ timeField
588
+ };
589
+ //#endregion
590
+ //#region src/components/Dialog/Dialog.theme.ts
591
+ var sizeMap = {
592
+ sm: "md:max-w-[24rem]",
593
+ md: "md:max-w-[32rem]!",
594
+ lg: "md:max-w-[40rem]!",
595
+ xl: "md:max-w-[60rem]!"
596
+ };
597
+ var overlay$1 = (_props, ...etc) => mx("dx-dialog__overlay", ...etc);
598
+ var content$6 = ({ inOverlayLayout, size = "md" }, ...etc) => {
599
+ return mx("@container", "dx-dialog__content dx-focus-ring dx-modal-surface py-4", !inOverlayLayout && "fixed z-50 top-[50%] left-[50%] -translate-x-[50%] -translate-y-[50%]", sizeMap[size], ...etc);
600
+ };
601
+ var header$2 = (_props, ...etc) => mx("dx-dialog__header flex pb-4 items-center justify-between", withColumn.center(), ...etc);
602
+ var body$1 = (_props, ...etc) => mx("dx-dialog__body dx-expander gap-y-2", withColumn.propagate(), ...etc);
603
+ var actionBar = (_props, ...etc) => mx("dx-dialog__actionbar flex items-center pt-4 gap-2", withColumn.center(), ...etc);
604
+ var title$2 = ({ srOnly }, ...etc) => mx("dx-dialog__title", srOnly && "sr-only", ...etc);
605
+ var description$2 = ({ srOnly }, ...etc) => mx("dx-dialog__description", "text-description", srOnly && "sr-only", ...etc);
606
+ var dialogTheme = {
607
+ overlay: overlay$1,
608
+ content: content$6,
609
+ header: header$2,
610
+ body: body$1,
611
+ actionbar: actionBar,
612
+ title: title$2,
613
+ description: description$2
614
+ };
615
+ //#endregion
616
+ //#region src/components/Focus/Focus.theme.ts
617
+ /**
618
+ * Focus ring styles shared by Focus.Group and Focus.Item.
619
+ * Uses a `::after` pseudo-element overlay so the ring paints above child content
620
+ * (inset box-shadow alone is obscured by children with backgrounds).
621
+ * The pseudo-element is `pointer-events-none` and absolutely positioned over the element.
622
+ * When `border` is true, a subdued CSS border is always visible (e.g., for grid cell edges).
623
+ */
624
+ var ring = ({ border }, ...etc) => mx("dx-ring-pseudo outline-hidden", "focus:after:ring-focus-ring-subtle", "data-[focus-state=active]:after:ring-focus-ring-subtle", "data-[focus-state=error]:after:ring-rose-500", border && "border border-separator", ...etc);
625
+ var focusTheme = {
626
+ group: ring,
627
+ item: ring
628
+ };
629
+ //#endregion
630
+ //#region src/components/Icon/Icon.theme.ts
631
+ /**
632
+ * Size can be specified directly, or inherited from a container (e.g., toolbar).
633
+ */
634
+ var root$12 = ({ size }, etc) => {
635
+ return mx("shrink-0 text-[var(--icons-color,currentColor)]", size ? getSize(size) : "[width:var(--icon-size,var(--dx-default-icons-size))] [height:var(--icon-size,var(--dx-default-icons-size))]", etc);
636
+ };
637
+ /**
638
+ * Static slot sized to `--dx-rail-item` so a wrapped `Icon` lines up with an `IconButton iconOnly`.
639
+ */
640
+ var block$1 = ({ compact, square }, ...etc) => mx("grid place-items-center shrink-0 [&>img]:max-w-[1.5rem]", square ? "aspect-square" : "w-[var(--dx-rail-item)]", compact ? "" : "h-[var(--dx-rail-item)]", ...etc);
641
+ var iconTheme = {
642
+ root: root$12,
643
+ block: block$1
644
+ };
645
+ //#endregion
646
+ //#region src/components/Input/Input.theme.ts
647
+ var textInputSurfaceFocus = "transition-colors bg-input-surface focus:bg-focus-surface border border-input-separator focus:border-separator";
648
+ var textInputSurfaceHover = "hover:bg-focus-surface";
649
+ var valence = (valence) => {
650
+ switch (valence) {
651
+ case "success": return "shadow-emerald-500/50 dark:shadow-emerald-600/50";
652
+ case "info": return "shadow-cyan-500/50 dark:shadow-cyan-600/50";
653
+ case "warning": return "shadow-amber-500/50 dark:shadow-amber-600/50";
654
+ case "error": return "shadow-rose-500/50 dark:shadow-rose-600/50";
655
+ }
656
+ };
657
+ var controlSize = "min-h-(--dx-control) px-(--dx-control-pad) leading-(--dx-control-leading)";
658
+ var sharedSubduedInputStyles = (props) => [
659
+ "[[data-drag-autoscroll=\"active\"]_&]:pointer-events-none",
660
+ "py-0 w-full bg-transparent text-current placeholder-placeholder",
661
+ "dx-focus-subdued",
662
+ controlSize,
663
+ props.disabled && staticDisabled
664
+ ];
665
+ var sharedDefaultInputStyles = (props) => [
666
+ "[[data-drag-autoscroll=\"active\"]_&]:pointer-events-none",
667
+ "py-0 w-full text-base-fg placeholder-placeholder",
668
+ "dx-input",
669
+ controlSize,
670
+ props.disabled ? staticDisabled : textInputSurfaceHover
671
+ ];
672
+ var sharedStaticInputStyles = (props) => [
673
+ "[[data-drag-autoscroll=\"active\"]_&]:pointer-events-none",
674
+ "py-0 w-full text-base-fg rounded-xs placeholder-placeholder",
675
+ textInputSurfaceFocus,
676
+ textInputSurfaceHover,
677
+ props.focused && "bg-attention-surface",
678
+ valence(props.validationValence),
679
+ props.disabled && staticDisabled,
680
+ props.focused && "dx-focus-static"
681
+ ];
682
+ var input = (props, ...etc) => props.variant === "subdued" ? mx(...sharedSubduedInputStyles(props), ...etc) : props.variant === "static" ? mx(...sharedStaticInputStyles(props), ...etc) : mx(...sharedDefaultInputStyles(props), valence(props.validationValence), ...etc);
683
+ var textArea = (props, ...etc) => input(props, ...etc);
684
+ var container = (props, ...etc) => props.variant === "subdued" || props.variant === "static" ? mx("flex items-center w-full", props.disabled && staticDisabled, ...etc) : mx("flex items-center w-full dx-input p-0", valence(props.validationValence), props.disabled ? staticDisabled : textInputSurfaceHover, ...etc);
685
+ var adornment = (props, ...etc) => mx("shrink-0 flex items-center gap-1 text-description", props.side === "start" ? "ps-2" : "pe-2", ...etc);
686
+ var checkbox = ({ size = 4 }, ...etc) => mx("dx-checkbox dx-focus-ring", getSize(size), ...etc);
687
+ var checkboxIndicator = ({ size = 4, checked }, ...etc) => mx(getSize(snapSize(sizeValue(size) * .65, 4)), !checked && "invisible", ...etc);
688
+ var switch_ = (_props, ...etc) => mx("dx-checkbox--switch dx-focus-ring", ...etc);
689
+ var pin = (props, ...etc) => mx("font-mono selection:bg-transparent mx-auto", props.density === "lg" ? "text-lg" : props.density === "sm" ? "text-sm" : "text-base pointer-fine:text-sm", props.disabled && "cursor-not-allowed", ...etc);
690
+ var segment = (props, ...etc) => mx("flex items-center justify-center tabular-nums", "size-(--dx-control) rounded-xs", "bg-input-surface text-base-fg transition-colors border border-input-separator", "data-[focused]:bg-attention-surface data-[focused]:border-focus-ring-subtle", "data-[focused]:ring-2 data-[focused]:ring-offset-0 data-[focused]:ring-focus-ring-subtle", valence(props.validationValence), props.disabled && staticDisabled, ...etc);
691
+ var label = (props, ...etc) => mx("block text-sm text-description", props.srOnly && "sr-only", ...etc);
692
+ var description$1 = (props, ...etc) => mx("text-description", props.srOnly && "sr-only", ...etc);
693
+ var descriptionAndValidation = (props, ...etc) => mx("leading-none my-1.5", props.srOnly && "sr-only", ...etc);
694
+ var validation = (props, ...etc) => mx("text-sm text-description", props.srOnly ? "sr-only" : textValence(props.validationValence), ...etc);
695
+ var triggerIcon = (_p, ...etc) => mx("shrink-0 inline-flex items-center justify-center size-(--dx-control-sm) rounded-xs", "bg-input-surface text-subdued hover:text-base-fg hover:bg-hover-surface", "dx-focus-ring", ...etc);
696
+ var block = (props, ...etc) => mx("grid place-items-center w-[var(--dx-rail-item)] h-[var(--dx-rail-item)]", ...etc);
697
+ var inputTheme = {
698
+ input,
699
+ container,
700
+ adornment,
701
+ textArea,
702
+ pin,
703
+ segment,
704
+ label,
705
+ description: description$1,
706
+ checkbox,
707
+ checkboxIndicator,
708
+ switch: switch_,
709
+ block,
710
+ validation,
711
+ descriptionAndValidation,
712
+ triggerIcon
713
+ };
714
+ //#endregion
715
+ //#region src/components/Link/Link.theme.ts
716
+ var root$11 = ({ variant }, ...etc) => mx("dx-link", ...etc);
717
+ var linkTheme = { root: root$11 };
718
+ //#endregion
719
+ //#region src/components/Main/constants.ts
720
+ var mainPaddingTransitions = "dx-main-content-padding-transitions";
721
+ var mainIntrinsicSize = "dx-main-intrinsic-size";
722
+ //#endregion
723
+ //#region src/components/Main/Main.theme.ts
724
+ var padding = "dx-main-content-padding";
725
+ var content$5 = ({ bounce }, ...etc) => mx(padding, mainPaddingTransitions, bounce && "dx-main-bounce-layout", "dx-base-surface", "dx-focus-ring-main", ...etc);
726
+ var sidebar = (_, ...etc) => mx("dx-main-sidebar", "dx-focus-ring-inset-over-all", ...etc);
727
+ var overlay = (_, ...etc) => mx("dx-main-overlay", ...etc);
728
+ var mainTheme = {
729
+ content: content$5,
730
+ sidebar,
731
+ overlay
732
+ };
733
+ //#endregion
734
+ //#region src/components/Menu/Menu.theme.ts
735
+ var content$4 = ({ elevation }, ...etc) => mx("dx-popover-surface w-48 md:w-56 border border-separator rounded-sm", surfaceZIndex({
736
+ elevation,
737
+ level: "menu"
738
+ }), surfaceShadow({ elevation: "positioned" }), ...etc);
739
+ var viewport$4 = (_props, ...etc) => mx("rounded-sm p-1 max-h-[var(--radix-dropdown-menu-content-available-height)] overflow-y-auto", ...etc);
740
+ var item$1 = (_props, ...etc) => mx("flex cursor-pointer select-none items-center gap-2 rounded-xs min-h-(--dx-control) px-(--dx-control-pad) py-1 text-sm", "hover:bg-hover-surface data-[highlighted]:bg-hover-surface", "dx-focus-subdued", dataDisabled, ...etc);
741
+ var separator$1 = (_props, ...etc) => mx("my-1 mx-2 h-px bg-separator", ...etc);
742
+ var groupLabel = (_props, ...etc) => mx("text-description", "select-none px-(--dx-control-pad) py-1", ...etc);
743
+ var arrow$3 = (_props, ...etc) => mx("fill-separator", ...etc);
744
+ var menuTheme = {
745
+ content: content$4,
746
+ viewport: viewport$4,
747
+ item: item$1,
748
+ separator: separator$1,
749
+ groupLabel,
750
+ arrow: arrow$3
751
+ };
752
+ //#endregion
753
+ //#region src/components/Message/Message.theme.ts
754
+ var root$10 = ({ valence }, etc) => {
755
+ return mx("p-1 rounded-sm", messageValence(valence), etc);
756
+ };
757
+ var content$3 = (_, etc) => {
758
+ return mx("col-span-full grid grid-cols-subgrid p-trim-md", etc);
759
+ };
760
+ var header$1 = (_, etc) => {
761
+ return mx("items-center", etc);
762
+ };
763
+ var title$1 = (_, etc) => {
764
+ return mx("col-start-2 overflow-hidden truncate", etc);
765
+ };
766
+ var body = (_, etc) => {
767
+ return mx("col-start-2 flex flex-col first:font-medium pb-1.5", etc);
768
+ };
769
+ var messageTheme = {
770
+ root: root$10,
771
+ content: content$3,
772
+ header: header$1,
773
+ title: title$1,
774
+ body
775
+ };
776
+ //#endregion
777
+ //#region src/components/Panel/Panel.theme.ts
778
+ var sizes = {
779
+ lg: "h-(--dx-topbar-size)",
780
+ md: "h-(--dx-toolbar-size)"
781
+ };
782
+ var root$9 = (_, ...etc) => mx("dx-container grid grid-cols-[100%] overflow-hidden", "[&>*:not([data-slot])]:[grid-area:content]", ...etc);
783
+ var toolbar = ({ size = "md" }, ...etc) => mx("[grid-area:toolbar]", "shrink-0", "dx-toolbar-surface shadow-sm relative z-[1]", sizes[size], ...etc);
784
+ var content$2 = (_, ...etc) => mx("[grid-area:content] min-h-0", ...etc);
785
+ var statusbar = (_, ...etc) => mx("[grid-area:statusbar]", "shrink-0", "dx-toolbar-surface", ...etc);
786
+ var panelTheme = {
787
+ root: root$9,
788
+ toolbar,
789
+ content: content$2,
790
+ statusbar
791
+ };
792
+ //#endregion
793
+ //#region src/components/Popover/Popover.theme.ts
794
+ var content$1 = ({ elevation }, ...etc) => mx("dx-popover-surface overflow-hidden border-2 border-separator rounded-sm", surfaceShadow({ elevation: "positioned" }), surfaceZIndex({
795
+ elevation,
796
+ level: "menu"
797
+ }), "dx-focus-ring", ...etc);
798
+ var viewport$3 = ({ constrainBlock, constrainInline }, ...etc) => mx("grid grid-rows-[1fr] min-h-0 min-w-popover-min-width", (constrainBlock || constrainInline) && "overflow-hidden", constrainBlock && "max-h-(--radix-popover-content-available-height)", constrainBlock && "max-h-[min(var(--radix-popover-content-available-height),calc(100dvh-var(--spacing-screen-border)*2))]", constrainInline && "max-w-(--radix-popover-content-available-width)", ...etc);
799
+ var arrow$2 = (_props, ...etc) => mx("fill-separator", ...etc);
800
+ var popoverTheme = {
801
+ content: content$1,
802
+ viewport: viewport$3,
803
+ arrow: arrow$2
804
+ };
805
+ //#endregion
806
+ //#region src/components/ScrollArea/ScrollArea.theme.ts
807
+ var root$8 = ({ orientation }, ...etc) => mx("dx-container", orientation === "vertical" && "group/scroll-v flex flex-col", orientation === "horizontal" && "group/scroll-h flex", orientation === "all" && "group/scroll-all flex flex-col", "[.dx-column-root_&]:col-span-full", ...etc);
808
+ /**
809
+ * NOTE: The browser reserves space for scrollbars.
810
+ */
811
+ var viewport$2 = ({ orientation, centered, padding, snap, autoHide }, ...etc) => {
812
+ return mx("flex-1 min-h-0 w-full", withColumn.consumed(), orientation === "vertical" && "overflow-y-scroll", orientation === "horizontal" && "flex overflow-x-scroll overscroll-x-contain", orientation === "all" && "overflow-scroll", "[&::-webkit-scrollbar-corner]:bg-transparent", "[&::-webkit-scrollbar-track]:bg-transparent", "[&::-webkit-scrollbar-thumb]:rounded-none", "[&::-webkit-scrollbar]:w-[var(--scroll-width)] [&::-webkit-scrollbar]:h-[var(--scroll-width)]", (orientation === "vertical" || orientation === "all") && (padding ? [centered ? "pl-[var(--gutter,calc(var(--scroll-width)+var(--scroll-padding)))]" : "pl-[var(--gutter,0)]", "pr-[calc(var(--gutter,calc(var(--scroll-width)+var(--scroll-padding)))-var(--scroll-width))]"] : centered && "pl-[var(--scroll-width)]"), (orientation === "horizontal" || orientation === "all") && (padding ? [centered && "pt-[calc(var(--scroll-width)+var(--scroll-padding))]", "pb-[var(--scroll-padding)]"] : centered && "pt-[var(--scroll-width)]"), snap && [
813
+ orientation === "vertical" && "snap-y snap-mandatory",
814
+ orientation === "horizontal" && "snap-x snap-mandatory",
815
+ orientation === "all" && "snap-both snap-mandatory"
816
+ ], autoHide ? [
817
+ orientation === "vertical" && "group-hover/scroll-v:[&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb",
818
+ orientation === "horizontal" && "group-hover/scroll-h:[&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb",
819
+ orientation === "all" && "group-hover/scroll-all:[&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb"
820
+ ] : [
821
+ orientation === "vertical" && "[&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb",
822
+ orientation === "horizontal" && "[&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb",
823
+ orientation === "all" && "[&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb"
824
+ ], ...etc);
825
+ };
826
+ var scrollAreaTheme = {
827
+ root: root$8,
828
+ viewport: viewport$2
829
+ };
830
+ //#endregion
831
+ //#region src/components/Select/Select.theme.ts
832
+ var content = ({ elevation }, ...etc) => {
833
+ return mx("dx-modal-surface rounded-sm border border-separator", "min-w-(--radix-select-trigger-width) max-h-(--radix-select-content-available-height)", surfaceShadow({ elevation: "positioned" }), surfaceZIndex({
834
+ elevation,
835
+ level: "menu"
836
+ }), ...etc);
837
+ };
838
+ var triggerButton = (_props, ...etc) => mx("bg-input-surface grid grid-cols-[1fr_auto] [&>span]:text-left", ...etc);
839
+ var viewport$1 = (_props, ...etc) => mx(...etc);
840
+ var item = (_props, ...etc) => mx("flex items-center min-h-(--dx-control) px-(--dx-control-pad) py-1 gap-2", "text-base-fg leading-none select-none outline-hidden", "[&>svg]:invisible [&[data-state=checked]>svg]:visible", "dx-highlighted", ...etc);
841
+ var itemIndicator = (_props, ...etc) => mx("items-center", ...etc);
842
+ var arrow$1 = (_props, ...etc) => mx("fill-separator", ...etc);
843
+ var separator = (_props, ...etc) => mx("self-stretch border-b my-1 border-separator", ...etc);
844
+ var scrollButton = (_props, ...etc) => mx("dx-modal-surface flex items-center justify-center cursor-default h-(--dx-control-sm) w-full", ...etc);
845
+ var selectTheme = {
846
+ content,
847
+ triggerButton,
848
+ viewport: viewport$1,
849
+ item,
850
+ itemIndicator,
851
+ arrow: arrow$1,
852
+ separator,
853
+ scrollButton
854
+ };
855
+ //#endregion
856
+ //#region src/components/Separator/Separator.theme.ts
857
+ var root$7 = ({ orientation, subdued }, ...etc) => mx("self-stretch", orientation === "vertical" ? "border-e mx-1" : "border-b my-1", subdued ? "border-subdued-separator" : "border-separator", ...etc);
858
+ var separatorTheme = { root: root$7 };
859
+ //#endregion
860
+ //#region src/components/Skeleton/Skeleton.theme.ts
861
+ var root$6 = ({ variant = "default" }, ...etc) => mx("animate-pulse bg-neutral-300 dark:bg-neutral-700 rounded-md", variant === "circle" && "rounded-full", variant === "text" && "rounded-sm", ...etc);
862
+ var skeletonTheme = { root: root$6 };
863
+ //#endregion
864
+ //#region src/components/Slider/Slider.theme.ts
865
+ var root$5 = ({ orientation, disabled }, ...etc) => mx("relative flex touch-none select-none items-center", orientation === "vertical" ? "h-full w-3 flex-col" : "w-full h-3", disabled && "opacity-50 pointer-events-none", ...etc);
866
+ var track = ({ orientation }, ...etc) => mx("relative grow overflow-hidden rounded-full bg-input-surface", orientation === "vertical" ? "w-1 h-full" : "h-1 w-full", ...etc);
867
+ var range = ({ orientation }, ...etc) => mx("absolute bg-accent-bg", orientation === "vertical" ? "w-full" : "h-full", ...etc);
868
+ var thumb = (_props, ...etc) => mx("block h-3 w-3 shrink-0 rounded-full bg-base-surface border-2 border-accent-bg shadow-sm transition-colors dx-focus-ring", "hover:bg-hover-surface", ...etc);
869
+ var sliderTheme = {
870
+ root: root$5,
871
+ track,
872
+ range,
873
+ thumb
874
+ };
875
+ //#endregion
876
+ //#region src/components/Splitter/Splitter.theme.ts
877
+ var root$4 = ({ orientation }, ...etc) => mx("relative flex w-full h-full overflow-hidden", orientation === "vertical" ? "flex-col" : "flex-row", ...etc);
878
+ var panel = (_props, ...etc) => mx("relative grid overflow-hidden min-w-0 min-h-0", ...etc);
879
+ var handle = ({ orientation }, ...etc) => mx("group absolute z-10 touch-none select-none", "before:absolute before:block before:bg-separator", "before:transition-colors before:duration-100 before:ease-in-out hover:before:bg-focus-ring-subtle focus-visible:before:bg-focus-ring-subtle active:before:bg-focus-ring-subtle", orientation === "vertical" ? "h-[7px] cursor-row-resize before:inset-x-0 before:top-1/2 before:-translate-y-1/2 before:h-px" : "w-[7px] cursor-col-resize before:inset-y-0 before:left-1/2 before:-translate-x-1/2 before:w-px", ...etc);
880
+ var splitterTheme = {
881
+ root: root$4,
882
+ panel,
883
+ handle
884
+ };
885
+ //#endregion
886
+ //#region src/components/Status/Status.theme.ts
887
+ var root$3 = ({ variant = "default" }, ...etc) => mx("h-1 relative rounded-full overflow-hidden", variant === "main-bottom" ? "w-full block" : "inline-block bg-base-surface", ...etc);
888
+ var bar = ({ variant = "default", indeterminate }, ...etc) => mx("absolute inset-y-0 block rounded-full", variant === "main-bottom" ? "bg-composer-300" : "bg-un-accent", indeterminate ? "animate-progress-indeterminate" : "start-0", ...etc);
889
+ var statusTheme = {
890
+ root: root$3,
891
+ bar
892
+ };
893
+ //#endregion
894
+ //#region src/components/Tag/Tag.theme.ts
895
+ var root$2 = (_, ...etc) => mx("dx-tag", ...etc);
896
+ var tagTheme = { root: root$2 };
897
+ //#endregion
898
+ //#region src/components/Toast/Toast.theme.ts
899
+ var viewport = (_props, ...etc) => mx("z-40 fixed bottom-[calc(env(safe-area-inset-bottom)+1rem)]", "inset-start-[calc(env(safe-area-inset-left)+1rem)] inset-end-[calc(env(safe-area-inset-right)+1rem)]", "w-auto md:end-[calc(env(safe-area-inset-right)+4rem)] md:left-auto md:w-full md:max-w-sm", "rounded-md flex flex-col gap-2", ...etc);
900
+ var root$1 = (_props, ...etc) => mx("dx-popover-surface rounded-md p-1", surfaceShadow({ elevation: "toast" }), "radix-state-open:animate-toast-slide-in-bottom md:radix-state-open:animate-toast-slide-in-right", "radix-state-closed:animate-toast-hide", "radix-swipe-end:animate-toast-swipe-out", "translate-x-radix-toast-swipe-move-x", "radix-swipe-cancel:translate-x-0 radix-swipe-cancel:duration-200 radix-swipe-cancel:ease-[ease]", "dx-focus-ring", ...etc);
901
+ var grid = (_props, ...etc) => mx("gap-y-1 pbe-1", ...etc);
902
+ var header = (_props, ...etc) => mx("items-center", ...etc);
903
+ var title = (_props, ...etc) => mx("col-start-2 truncate font-medium", ...etc);
904
+ var description = (_props, ...etc) => mx("col-start-2 overflow-hidden text-description", ...etc);
905
+ var actions = (_props, ...etc) => mx("flex gap-2 mbs-1", ...etc);
906
+ var toastTheme = {
907
+ viewport,
908
+ root: root$1,
909
+ grid,
910
+ header,
911
+ title,
912
+ description,
913
+ actions
914
+ };
915
+ //#endregion
916
+ //#region src/components/Toolbar/Toolbar.theme.ts
917
+ var layout = "w-full shrink-0 flex flex-nowrap p-1 gap-1 items-center overflow-x-auto scrollbar-none dx-contain-layout";
918
+ var root = ({ density, disabled, layoutManaged }, ...etc) => {
919
+ return mx("dx-toolbar-surface", "[[data-slot=toolbar]_&]:bg-transparent", "[[data-slot=statusbar]_&]:bg-transparent", density && `dx-density-${density}`, disabled && "*:opacity-20", !layoutManaged && layout, ...etc);
920
+ };
921
+ var text = (_, ...etc) => {
922
+ return mx("px-2 truncate items-center", ...etc);
923
+ };
924
+ var toolbarTheme = {
925
+ root,
926
+ text
927
+ };
928
+ //#endregion
929
+ //#region src/components/Tooltip/tooltipContent.ts
930
+ var tooltipContent = ({ elevation }, ...etc) => mx("inline-flex items-center p-1 max-w-64 text-sm bg-inverse-surface text-inverse-fg rounded-sm", surfaceShadow({ elevation: "positioned" }), surfaceZIndex({
931
+ elevation,
932
+ level: "tooltip"
933
+ }), ...etc);
934
+ //#endregion
935
+ //#region src/components/Tooltip/Tooltip.theme.ts
936
+ var arrow = (_props, ...etc) => mx("fill-inverse-surface", ...etc);
937
+ var tooltipTheme = {
938
+ content: tooltipContent,
939
+ arrow
940
+ };
941
+ //#endregion
942
+ //#region src/theme/defaultTheme.ts
943
+ var defaultTheme = {
944
+ themeName: () => "default",
945
+ column: columnTheme,
946
+ panel: panelTheme,
947
+ avatar: avatarTheme,
948
+ breadcrumb: breadcrumbTheme,
949
+ button: buttonTheme,
950
+ calendar: calendarTheme,
951
+ card: cardTheme,
952
+ datePicker: datePickerTheme,
953
+ dialog: dialogTheme,
954
+ focus: focusTheme,
955
+ icon: iconTheme,
956
+ iconButton: iconButtonTheme,
957
+ input: inputTheme,
958
+ link: linkTheme,
959
+ main: mainTheme,
960
+ message: messageTheme,
961
+ menu: menuTheme,
962
+ popover: popoverTheme,
963
+ scrollArea: scrollAreaTheme,
964
+ select: selectTheme,
965
+ separator: separatorTheme,
966
+ skeleton: skeletonTheme,
967
+ slider: sliderTheme,
968
+ splitter: splitterTheme,
969
+ status: statusTheme,
970
+ tag: tagTheme,
971
+ toast: toastTheme,
972
+ toolbar: toolbarTheme,
973
+ tooltip: tooltipTheme
974
+ };
975
+ var defaultTx = bindTheme(defaultTheme);
976
+ //#endregion
977
+ //#region src/hooks/useThemeContext.ts
978
+ var __dxlog_file = "/__w/dxos/dxos/packages/ui/react-ui/src/hooks/useThemeContext.ts";
979
+ var fallbackContextValue = {
980
+ tx: defaultTx,
981
+ themeMode: "dark",
982
+ hasIosKeyboard: false
983
+ };
984
+ var warned = false;
985
+ var useThemeContext = () => {
986
+ const contextValue = useContext(ThemeContext);
987
+ if (!contextValue) {
988
+ if (!warned) {
989
+ warned = true;
990
+ log.warn("Missing ThemeContext; falling back to the default theme.", void 0, {
991
+ "~LogMeta": "~LogMeta",
992
+ F: __dxlog_file,
993
+ L: 30,
994
+ S: void 0
995
+ });
996
+ }
997
+ return fallbackContextValue;
998
+ }
999
+ return contextValue;
1000
+ };
1001
+ //#endregion
1002
+ //#region src/components/Tooltip/TooltipContext.ts
1003
+ var [createTooltipContext, createTooltipScope] = createContextScope("Tooltip", [createPopperScope]);
1004
+ var usePopperScope = createPopperScope();
1005
+ var TOOLTIP_OPEN = "tooltip.open";
1006
+ var TOOLTIP_NAME = "Tooltip";
1007
+ var [TooltipContextProvider, useTooltipContext] = createTooltipContext(TOOLTIP_NAME);
1008
+ //#endregion
1009
+ //#region src/components/Tooltip/Tooltip.tsx
1010
+ var TooltipProvider = (props) => {
1011
+ const { __scopeTooltip, children, open: openProp, defaultOpen = false, onOpenChange, disableHoverableContent = false, delayDuration = 700, skipDelayDuration = 300 } = props;
1012
+ const isOpenDelayedRef = useRef(true);
1013
+ const isPointerInTransitRef = useRef(false);
1014
+ const skipDelayTimerRef = useRef(0);
1015
+ useEffect(() => {
1016
+ const skipDelayTimer = skipDelayTimerRef.current;
1017
+ return () => window.clearTimeout(skipDelayTimer);
1018
+ }, []);
1019
+ const popperScope = usePopperScope(__scopeTooltip);
1020
+ const [trigger, setTrigger] = useState(null);
1021
+ const [content, setContent] = useState(null);
1022
+ const [side, setSide] = useState(void 0);
1023
+ const triggerRef = useRef(trigger);
1024
+ const handleTriggerChange = useCallback((nextTrigger, nextContent, nextSide) => {
1025
+ setTrigger(nextTrigger);
1026
+ triggerRef.current = nextTrigger;
1027
+ setContent(nextContent ?? null);
1028
+ setSide(nextSide);
1029
+ }, []);
1030
+ const contentId = useId$2();
1031
+ const openTimerRef = useRef(0);
1032
+ const wasOpenDelayedRef = useRef(false);
1033
+ const [open = false, setOpen] = useControllableState({
1034
+ prop: openProp,
1035
+ defaultProp: defaultOpen,
1036
+ onChange: useCallback((open) => {
1037
+ if (open) {
1038
+ window.clearTimeout(skipDelayTimerRef.current);
1039
+ isOpenDelayedRef.current = false;
1040
+ document.dispatchEvent(new CustomEvent(TOOLTIP_OPEN));
1041
+ } else {
1042
+ window.clearTimeout(skipDelayTimerRef.current);
1043
+ skipDelayTimerRef.current = window.setTimeout(() => isOpenDelayedRef.current = true, skipDelayDuration);
1044
+ }
1045
+ onOpenChange?.(open);
1046
+ }, [skipDelayDuration, onOpenChange])
1047
+ });
1048
+ const stateAttribute = useMemo(() => {
1049
+ return open ? wasOpenDelayedRef.current ? "delayed-open" : "instant-open" : "closed";
1050
+ }, [open]);
1051
+ const handleOpen = useCallback(() => {
1052
+ window.clearTimeout(openTimerRef.current);
1053
+ openTimerRef.current = 0;
1054
+ wasOpenDelayedRef.current = false;
1055
+ setOpen(true);
1056
+ }, [setOpen]);
1057
+ const handleClose = useCallback(() => {
1058
+ window.clearTimeout(openTimerRef.current);
1059
+ openTimerRef.current = 0;
1060
+ setOpen(false);
1061
+ }, [setOpen]);
1062
+ const handleDelayedOpen = useCallback(() => {
1063
+ window.clearTimeout(openTimerRef.current);
1064
+ openTimerRef.current = window.setTimeout(() => {
1065
+ wasOpenDelayedRef.current = true;
1066
+ setOpen(true);
1067
+ openTimerRef.current = 0;
1068
+ }, delayDuration);
1069
+ }, [delayDuration, setOpen]);
1070
+ useEffect(() => {
1071
+ return () => {
1072
+ if (openTimerRef.current) {
1073
+ window.clearTimeout(openTimerRef.current);
1074
+ openTimerRef.current = 0;
1075
+ }
1076
+ };
1077
+ }, []);
1078
+ const { tx } = useThemeContext();
1079
+ const elevation = useElevationContext();
1080
+ return /* @__PURE__ */ jsx(PopperPrimitive.Root, {
1081
+ ...popperScope,
1082
+ children: /* @__PURE__ */ jsxs(TooltipContextProvider, {
1083
+ scope: __scopeTooltip,
1084
+ contentId,
1085
+ open,
1086
+ stateAttribute,
1087
+ trigger,
1088
+ onTriggerChange: handleTriggerChange,
1089
+ onTriggerEnter: useCallback(() => {
1090
+ if (isOpenDelayedRef.current) handleDelayedOpen();
1091
+ else handleOpen();
1092
+ }, [
1093
+ isOpenDelayedRef,
1094
+ handleDelayedOpen,
1095
+ handleOpen
1096
+ ]),
1097
+ onTriggerLeave: useCallback(() => {
1098
+ if (disableHoverableContent) handleClose();
1099
+ else {
1100
+ window.clearTimeout(openTimerRef.current);
1101
+ openTimerRef.current = 0;
1102
+ }
1103
+ }, [handleClose, disableHoverableContent]),
1104
+ onOpen: handleOpen,
1105
+ onClose: handleClose,
1106
+ disableHoverableContent,
1107
+ isPointerInTransitRef,
1108
+ onPointerInTransitChange: useCallback((inTransit) => {
1109
+ isPointerInTransitRef.current = inTransit;
1110
+ }, []),
1111
+ children: [
1112
+ /* @__PURE__ */ jsxs(TooltipContent, {
1113
+ side,
1114
+ className: tx("tooltip.content", { elevation }),
1115
+ children: [content, /* @__PURE__ */ jsx(TooltipArrow, { className: tx("tooltip.arrow") })]
1116
+ }),
1117
+ /* @__PURE__ */ jsx(TooltipVirtualTrigger, { virtualRef: triggerRef }),
1118
+ children
1119
+ ]
1120
+ })
1121
+ });
1122
+ };
1123
+ TooltipProvider.displayName = TOOLTIP_NAME;
1124
+ var TooltipVirtualTrigger = ({ virtualRef, __scopeTooltip }) => {
1125
+ const popperScope = usePopperScope(__scopeTooltip);
1126
+ return /* @__PURE__ */ jsx(PopperPrimitive.Anchor, {
1127
+ asChild: true,
1128
+ ...popperScope,
1129
+ virtualRef
1130
+ });
1131
+ };
1132
+ var TRIGGER_NAME = "Tooltip.Trigger";
1133
+ var TooltipTrigger = forwardRef((props, forwardedRef) => {
1134
+ const { __scopeTooltip, onInteract, delayDuration: _delayDuration, side, content, ...triggerProps } = props;
1135
+ const context = useTooltipContext(TRIGGER_NAME, __scopeTooltip);
1136
+ const ref = useRef(null);
1137
+ const composedRefs = useComposedRefs(forwardedRef, ref);
1138
+ const isPointerDownRef = useRef(false);
1139
+ const hasPointerMoveOpenedRef = useRef(false);
1140
+ const handlePointerUp = useCallback(() => isPointerDownRef.current = false, []);
1141
+ useEffect(() => {
1142
+ return () => document.removeEventListener("pointerup", handlePointerUp);
1143
+ }, [handlePointerUp]);
1144
+ return /* @__PURE__ */ jsx(Primitive.button, {
1145
+ "aria-describedby": context.open ? context.contentId : void 0,
1146
+ "data-state": context.stateAttribute,
1147
+ ...triggerProps,
1148
+ ref: composedRefs,
1149
+ onPointerMove: composeEventHandlers(props.onPointerMove, (event) => {
1150
+ if (event.pointerType === "touch") return;
1151
+ if (!hasPointerMoveOpenedRef.current && !context.isPointerInTransitRef.current) {
1152
+ onInteract?.(event);
1153
+ if (event.defaultPrevented) return;
1154
+ context.onTriggerChange(ref.current, content, side);
1155
+ context.onTriggerEnter();
1156
+ hasPointerMoveOpenedRef.current = true;
1157
+ }
1158
+ }),
1159
+ onPointerLeave: composeEventHandlers(props.onPointerLeave, () => {
1160
+ context.onTriggerLeave();
1161
+ hasPointerMoveOpenedRef.current = false;
1162
+ }),
1163
+ onPointerDown: composeEventHandlers(props.onPointerDown, () => {
1164
+ if (context.open) context.onClose();
1165
+ isPointerDownRef.current = true;
1166
+ document.addEventListener("pointerup", handlePointerUp, { once: true });
1167
+ }),
1168
+ onFocus: props.onFocus,
1169
+ onBlur: composeEventHandlers(props.onBlur, context.onClose),
1170
+ onClick: composeEventHandlers(props.onClick, context.onClose)
1171
+ });
1172
+ });
1173
+ TooltipTrigger.displayName = TRIGGER_NAME;
1174
+ var PORTAL_NAME = "Tooltip.Portal";
1175
+ var [PortalProvider, usePortalContext] = createTooltipContext(PORTAL_NAME, { forceMount: void 0 });
1176
+ var TooltipPortal = (props) => {
1177
+ const { __scopeTooltip, forceMount, children, container } = props;
1178
+ const context = useTooltipContext(PORTAL_NAME, __scopeTooltip);
1179
+ return /* @__PURE__ */ jsx(PortalProvider, {
1180
+ scope: __scopeTooltip,
1181
+ forceMount,
1182
+ children: /* @__PURE__ */ jsx(Presence, {
1183
+ present: forceMount || context.open,
1184
+ children: /* @__PURE__ */ jsx(Portal, {
1185
+ asChild: true,
1186
+ container,
1187
+ children
1188
+ })
1189
+ })
1190
+ });
1191
+ };
1192
+ TooltipPortal.displayName = PORTAL_NAME;
1193
+ var CONTENT_NAME = "Tooltip.Content";
1194
+ var TooltipContent = forwardRef((props, forwardedRef) => {
1195
+ const portalContext = usePortalContext(CONTENT_NAME, props.__scopeTooltip);
1196
+ const { forceMount = portalContext.forceMount, side = "top", ...contentProps } = props;
1197
+ const context = useTooltipContext(CONTENT_NAME, props.__scopeTooltip);
1198
+ return /* @__PURE__ */ jsx(Presence, {
1199
+ present: forceMount || context.open,
1200
+ children: context.disableHoverableContent ? /* @__PURE__ */ jsx(TooltipContentImpl, {
1201
+ side,
1202
+ ...contentProps,
1203
+ ref: forwardedRef
1204
+ }) : /* @__PURE__ */ jsx(TooltipContentHoverable, {
1205
+ side,
1206
+ ...contentProps,
1207
+ ref: forwardedRef
1208
+ })
1209
+ });
1210
+ });
1211
+ var TooltipContentHoverable = forwardRef((props, forwardedRef) => {
1212
+ const context = useTooltipContext(CONTENT_NAME, props.__scopeTooltip);
1213
+ const ref = useRef(null);
1214
+ const composedRefs = useComposedRefs(forwardedRef, ref);
1215
+ const [pointerGraceArea, setPointerGraceArea] = useState(null);
1216
+ const { trigger, onClose } = context;
1217
+ const content = ref.current;
1218
+ const { onPointerInTransitChange } = context;
1219
+ const handleRemoveGraceArea = useCallback(() => {
1220
+ setPointerGraceArea(null);
1221
+ onPointerInTransitChange(false);
1222
+ }, [onPointerInTransitChange]);
1223
+ const handleCreateGraceArea = useCallback((event, hoverTarget) => {
1224
+ const currentTarget = event.currentTarget;
1225
+ const exitPoint = {
1226
+ x: event.clientX,
1227
+ y: event.clientY
1228
+ };
1229
+ const paddedExitPoints = getPaddedExitPoints(exitPoint, getExitSideFromRect(exitPoint, currentTarget.getBoundingClientRect()));
1230
+ const hoverTargetPoints = getPointsFromRect(hoverTarget.getBoundingClientRect());
1231
+ const graceArea = getHull([...paddedExitPoints, ...hoverTargetPoints]);
1232
+ setPointerGraceArea(graceArea);
1233
+ onPointerInTransitChange(true);
1234
+ }, [onPointerInTransitChange]);
1235
+ useEffect(() => {
1236
+ return () => handleRemoveGraceArea();
1237
+ }, [handleRemoveGraceArea]);
1238
+ useEffect(() => {
1239
+ if (trigger && content) {
1240
+ const handleTriggerLeave = (event) => handleCreateGraceArea(event, content);
1241
+ const handleContentLeave = (event) => handleCreateGraceArea(event, trigger);
1242
+ trigger.addEventListener("pointerleave", handleTriggerLeave);
1243
+ content.addEventListener("pointerleave", handleContentLeave);
1244
+ return () => {
1245
+ trigger.removeEventListener("pointerleave", handleTriggerLeave);
1246
+ content.removeEventListener("pointerleave", handleContentLeave);
1247
+ };
1248
+ }
1249
+ }, [
1250
+ trigger,
1251
+ content,
1252
+ handleCreateGraceArea,
1253
+ handleRemoveGraceArea
1254
+ ]);
1255
+ useEffect(() => {
1256
+ if (pointerGraceArea) {
1257
+ const handleTrackPointerGrace = (event) => {
1258
+ const target = event.target;
1259
+ const pointerPosition = {
1260
+ x: event.clientX,
1261
+ y: event.clientY
1262
+ };
1263
+ const hasEnteredTarget = trigger?.contains(target) || content?.contains(target);
1264
+ const isPointerOutsideGraceArea = !isPointInPolygon(pointerPosition, pointerGraceArea);
1265
+ if (hasEnteredTarget) handleRemoveGraceArea();
1266
+ else if (isPointerOutsideGraceArea) {
1267
+ handleRemoveGraceArea();
1268
+ onClose();
1269
+ }
1270
+ };
1271
+ document.addEventListener("pointermove", handleTrackPointerGrace);
1272
+ return () => document.removeEventListener("pointermove", handleTrackPointerGrace);
1273
+ }
1274
+ }, [
1275
+ trigger,
1276
+ content,
1277
+ pointerGraceArea,
1278
+ onClose,
1279
+ handleRemoveGraceArea
1280
+ ]);
1281
+ return /* @__PURE__ */ jsx(TooltipContentImpl, {
1282
+ ...props,
1283
+ ref: composedRefs
1284
+ });
1285
+ });
1286
+ var [VisuallyHiddenContentContextProvider, useVisuallyHiddenContentContext] = createTooltipContext(TOOLTIP_NAME, { isInside: false });
1287
+ var TooltipContentImpl = forwardRef((props, forwardedRef) => {
1288
+ const { __scopeTooltip, children, "aria-label": ariaLabel, onEscapeKeyDown, onPointerDownOutside, ...contentProps } = props;
1289
+ const context = useTooltipContext(CONTENT_NAME, __scopeTooltip);
1290
+ const popperScope = usePopperScope(__scopeTooltip);
1291
+ const { onClose } = context;
1292
+ useEffect(() => {
1293
+ document.addEventListener(TOOLTIP_OPEN, onClose);
1294
+ return () => document.removeEventListener(TOOLTIP_OPEN, onClose);
1295
+ }, [onClose]);
1296
+ useEffect(() => {
1297
+ if (context.trigger) {
1298
+ const handleScroll = (event) => {
1299
+ if (event.target?.contains(context.trigger)) onClose();
1300
+ };
1301
+ window.addEventListener("scroll", handleScroll, { capture: true });
1302
+ return () => window.removeEventListener("scroll", handleScroll, { capture: true });
1303
+ }
1304
+ }, [context.trigger, onClose]);
1305
+ return /* @__PURE__ */ jsx(DismissableLayer, {
1306
+ asChild: true,
1307
+ disableOutsidePointerEvents: false,
1308
+ onEscapeKeyDown,
1309
+ onPointerDownOutside,
1310
+ onFocusOutside: (event) => event.preventDefault(),
1311
+ onDismiss: onClose,
1312
+ children: /* @__PURE__ */ jsxs(PopperPrimitive.Content, {
1313
+ "data-state": context.stateAttribute,
1314
+ ...popperScope,
1315
+ ...contentProps,
1316
+ ref: forwardedRef,
1317
+ style: {
1318
+ ...contentProps.style,
1319
+ "--radix-tooltip-content-transform-origin": "var(--radix-popper-transform-origin)",
1320
+ "--radix-tooltip-content-available-width": "var(--radix-popper-available-width)",
1321
+ "--radix-tooltip-content-available-height": "var(--radix-popper-available-height)",
1322
+ "--radix-tooltip-trigger-width": "var(--radix-popper-anchor-width)",
1323
+ "--radix-tooltip-trigger-height": "var(--radix-popper-anchor-height)"
1324
+ },
1325
+ children: [/* @__PURE__ */ jsx(Slottable, { children }), /* @__PURE__ */ jsx(VisuallyHiddenContentContextProvider, {
1326
+ scope: __scopeTooltip,
1327
+ isInside: true,
1328
+ children: /* @__PURE__ */ jsx(VisuallyHiddenPrimitive.Root, {
1329
+ id: context.contentId,
1330
+ role: "tooltip",
1331
+ children: ariaLabel || children
1332
+ })
1333
+ })]
1334
+ })
1335
+ });
1336
+ });
1337
+ TooltipContent.displayName = CONTENT_NAME;
1338
+ var ARROW_NAME = "Tooltip.Arrow";
1339
+ var TooltipArrow = forwardRef((props, forwardedRef) => {
1340
+ const { __scopeTooltip, ...arrowProps } = props;
1341
+ const popperScope = usePopperScope(__scopeTooltip);
1342
+ return useVisuallyHiddenContentContext(ARROW_NAME, __scopeTooltip).isInside ? null : /* @__PURE__ */ jsx(PopperPrimitive.Arrow, {
1343
+ ...popperScope,
1344
+ ...arrowProps,
1345
+ ref: forwardedRef
1346
+ });
1347
+ });
1348
+ TooltipArrow.displayName = ARROW_NAME;
1349
+ var getExitSideFromRect = (point, rect) => {
1350
+ const top = Math.abs(rect.top - point.y);
1351
+ const bottom = Math.abs(rect.bottom - point.y);
1352
+ const right = Math.abs(rect.right - point.x);
1353
+ const left = Math.abs(rect.left - point.x);
1354
+ switch (Math.min(top, bottom, right, left)) {
1355
+ case left: return "left";
1356
+ case right: return "right";
1357
+ case top: return "top";
1358
+ case bottom: return "bottom";
1359
+ default: throw new Error("unreachable");
1360
+ }
1361
+ };
1362
+ var getPaddedExitPoints = (exitPoint, exitSide, padding = 5) => {
1363
+ const paddedExitPoints = [];
1364
+ switch (exitSide) {
1365
+ case "top":
1366
+ paddedExitPoints.push({
1367
+ x: exitPoint.x - padding,
1368
+ y: exitPoint.y + padding
1369
+ }, {
1370
+ x: exitPoint.x + padding,
1371
+ y: exitPoint.y + padding
1372
+ });
1373
+ break;
1374
+ case "bottom":
1375
+ paddedExitPoints.push({
1376
+ x: exitPoint.x - padding,
1377
+ y: exitPoint.y - padding
1378
+ }, {
1379
+ x: exitPoint.x + padding,
1380
+ y: exitPoint.y - padding
1381
+ });
1382
+ break;
1383
+ case "left":
1384
+ paddedExitPoints.push({
1385
+ x: exitPoint.x + padding,
1386
+ y: exitPoint.y - padding
1387
+ }, {
1388
+ x: exitPoint.x + padding,
1389
+ y: exitPoint.y + padding
1390
+ });
1391
+ break;
1392
+ case "right":
1393
+ paddedExitPoints.push({
1394
+ x: exitPoint.x - padding,
1395
+ y: exitPoint.y - padding
1396
+ }, {
1397
+ x: exitPoint.x - padding,
1398
+ y: exitPoint.y + padding
1399
+ });
1400
+ break;
1401
+ }
1402
+ return paddedExitPoints;
1403
+ };
1404
+ var getPointsFromRect = (rect) => {
1405
+ const { top, right, bottom, left } = rect;
1406
+ return [
1407
+ {
1408
+ x: left,
1409
+ y: top
1410
+ },
1411
+ {
1412
+ x: right,
1413
+ y: top
1414
+ },
1415
+ {
1416
+ x: right,
1417
+ y: bottom
1418
+ },
1419
+ {
1420
+ x: left,
1421
+ y: bottom
1422
+ }
1423
+ ];
1424
+ };
1425
+ var isPointInPolygon = (point, polygon) => {
1426
+ const { x, y } = point;
1427
+ let inside = false;
1428
+ for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
1429
+ const xi = polygon[i].x;
1430
+ const yi = polygon[i].y;
1431
+ const xj = polygon[j].x;
1432
+ const yj = polygon[j].y;
1433
+ if (yi > y !== yj > y && x < (xj - xi) * (y - yi) / (yj - yi) + xi) inside = !inside;
1434
+ }
1435
+ return inside;
1436
+ };
1437
+ var getHull = (points) => {
1438
+ const newPoints = points.slice();
1439
+ newPoints.sort((a, b) => {
1440
+ if (a.x < b.x) return -1;
1441
+ else if (a.x > b.x) return 1;
1442
+ else if (a.y < b.y) return -1;
1443
+ else if (a.y > b.y) return 1;
1444
+ else return 0;
1445
+ });
1446
+ return getHullPresorted(newPoints);
1447
+ };
1448
+ var getHullPresorted = (points) => {
1449
+ if (points.length <= 1) return points.slice();
1450
+ const upperHull = [];
1451
+ for (let i = 0; i < points.length; i++) {
1452
+ const p = points[i];
1453
+ while (upperHull.length >= 2) {
1454
+ const q = upperHull[upperHull.length - 1];
1455
+ const r = upperHull[upperHull.length - 2];
1456
+ if ((q.x - r.x) * (p.y - r.y) >= (q.y - r.y) * (p.x - r.x)) upperHull.pop();
1457
+ else break;
1458
+ }
1459
+ upperHull.push(p);
1460
+ }
1461
+ upperHull.pop();
1462
+ const lowerHull = [];
1463
+ for (let i = points.length - 1; i >= 0; i--) {
1464
+ const p = points[i];
1465
+ while (lowerHull.length >= 2) {
1466
+ const q = lowerHull[lowerHull.length - 1];
1467
+ const r = lowerHull[lowerHull.length - 2];
1468
+ if ((q.x - r.x) * (p.y - r.y) >= (q.y - r.y) * (p.x - r.x)) lowerHull.pop();
1469
+ else break;
1470
+ }
1471
+ lowerHull.push(p);
1472
+ }
1473
+ lowerHull.pop();
1474
+ if (upperHull.length === 1 && lowerHull.length === 1 && upperHull[0].x === lowerHull[0].x && upperHull[0].y === lowerHull[0].y) return upperHull;
1475
+ else return upperHull.concat(lowerHull);
1476
+ };
1477
+ var Tooltip = {
1478
+ Provider: TooltipProvider,
1479
+ Trigger: TooltipTrigger
1480
+ };
1481
+ //#endregion
1482
+ //#region src/components/ErrorFallback/ErrorStack.tsx
1483
+ /**
1484
+ * Renders a parsed error stack trace with tree connector symbols and clickable vscode:// links for local frames.
1485
+ */
1486
+ var ErrorStack = ({ classNames, error, frames: framesProp }) => {
1487
+ const frames = framesProp ?? (error ? ErrorStackParser.parse(error) : []);
1488
+ if (frames.length === 0) return null;
1489
+ return /* @__PURE__ */ jsx("div", {
1490
+ className: mx("font-mono text-sm", classNames),
1491
+ children: frames.map((frame, i) => {
1492
+ const isLast = i === frames.length - 1;
1493
+ const local = frame.fileName ? parseLocalFrame(frame.fileName, frame.lineNumber, frame.columnNumber) : void 0;
1494
+ const functionName = frame.functionName ?? "<anonymous>";
1495
+ return /* @__PURE__ */ jsxs("div", {
1496
+ className: mx("grid grid-cols-[16px_1fr_auto_auto] items-stretch gap-x-2", local && "cursor-pointer hover:bg-hover-surface"),
1497
+ children: [
1498
+ /* @__PURE__ */ jsxs("div", {
1499
+ className: "relative",
1500
+ children: [/* @__PURE__ */ jsx("div", { className: mx("absolute left-1/2 -translate-x-1/2 w-px bg-neutral-500", isLast ? "top-0 h-1/2" : "inset-y-0") }), /* @__PURE__ */ jsx("div", { className: "absolute top-1/2 -translate-y-1/2 left-1/2 right-0 h-px bg-neutral-500" })]
1501
+ }),
1502
+ local ? /* @__PURE__ */ jsx("a", {
1503
+ href: local.href,
1504
+ className: "truncate self-center",
1505
+ children: functionName
1506
+ }) : /* @__PURE__ */ jsx("span", {
1507
+ className: "text-subdued truncate self-center",
1508
+ children: functionName
1509
+ }),
1510
+ /* @__PURE__ */ jsx("span", {
1511
+ className: "text-xs text-subdued truncate self-center truncate",
1512
+ children: local?.fileName ?? ""
1513
+ }),
1514
+ /* @__PURE__ */ jsx("span", {
1515
+ className: "text-xs text-subdued text-right self-center",
1516
+ children: local ? `${frame.lineNumber}:${frame.columnNumber}` : ""
1517
+ })
1518
+ ]
1519
+ }, i);
1520
+ })
1521
+ });
1522
+ };
1523
+ /**
1524
+ * Parses a Vite `/@fs/` URL into a `vscode://` deep link and short filename.
1525
+ * Returns undefined if the URL cannot be resolved to a local file.
1526
+ */
1527
+ var parseLocalFrame = (fileUrl, line, col) => {
1528
+ try {
1529
+ const { pathname } = new URL(fileUrl);
1530
+ if (!pathname.startsWith("/@fs/")) return;
1531
+ const localPath = pathname.slice(4);
1532
+ const i = localPath.indexOf("/packages/");
1533
+ const path = i === -1 ? localPath : localPath.substring(i + 10);
1534
+ return {
1535
+ href: `vscode://file/${localPath}:${line ?? 1}:${col ?? 1}`,
1536
+ fileName: path
1537
+ };
1538
+ } catch {
1539
+ return;
1540
+ }
1541
+ };
1542
+ //#endregion
1543
+ //#region src/components/ErrorFallback/parse-stack.ts
1544
+ /**
1545
+ * Parses `captureOwnerStack()` output (React dev) into frames for {@link ErrorStack}.
1546
+ * Prefixes a synthetic Error line when needed so `error-stack-parser` can read V8-style stacks.
1547
+ */
1548
+ var parseCaptureOwnerStack = (stack) => {
1549
+ if (stack == null || stack.length === 0) return null;
1550
+ const err = /* @__PURE__ */ new Error();
1551
+ err.stack = stack;
1552
+ try {
1553
+ return ErrorStackParser.parse(err);
1554
+ } catch {
1555
+ err.stack = `Error\n${stack}`;
1556
+ try {
1557
+ return ErrorStackParser.parse(err);
1558
+ } catch {
1559
+ return null;
1560
+ }
1561
+ }
1562
+ };
1563
+ //#endregion
1564
+ export { ElevationContext as $, iconTheme as A, bindTheme as B, messageTheme as C, mainPaddingTransitions as D, mainIntrinsicSize as E, withColumn as F, ThemeProvider as G, useSafeArea as H, iconButtonTheme as I, hasIosKeyboard as J, TranslationsContext as K, buttonTheme as L, dialogTheme as M, columnTheme as N, linkTheme as O, cardTheme as P, useIconRegistry as Q, breadcrumbTheme as R, panelTheme as S, mainTheme as T, useElevationContext as U, initialSafeArea as V, ThemeContext as W, getIconRegistry as X, IconRegistryProvider as Y, phosphorIconSource as Z, skeletonTheme as _, useTooltipContext as a, scrollAreaTheme as b, defaultTx as c, toolbarTheme as d, ElevationProvider as et, toastTheme as f, sliderTheme as g, splitterTheme as h, createTooltipScope as i, focusTheme as j, inputTheme as k, tooltipTheme as l, statusTheme as m, ErrorStack as n, DensityContext as nt, useThemeContext as o, tagTheme as p, useTranslation$1 as q, Tooltip as r, defaultTheme as s, parseCaptureOwnerStack as t, DensityProvider as tt, tooltipContent as u, separatorTheme as v, menuTheme as w, popoverTheme as x, selectTheme as y, avatarTheme as z };
1565
+
1566
+ //# sourceMappingURL=chunk-parse-stack.mjs.map