@astryxdesign/core 0.1.8-canary.ede1ea1 → 0.1.8-canary.f04cdf1

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 (409) hide show
  1. package/dist/AppShell/AppShell.d.ts.map +1 -1
  2. package/dist/AppShell/AppShell.js +6 -2
  3. package/dist/AppShell/AppShellMobileContext.d.ts +8 -0
  4. package/dist/AppShell/AppShellMobileContext.d.ts.map +1 -1
  5. package/dist/Avatar/Avatar.d.ts +18 -2
  6. package/dist/Avatar/Avatar.d.ts.map +1 -1
  7. package/dist/Avatar/Avatar.js +63 -7
  8. package/dist/Avatar/AvatarStatusDot.d.ts +33 -5
  9. package/dist/Avatar/AvatarStatusDot.d.ts.map +1 -1
  10. package/dist/Avatar/AvatarStatusDot.js +144 -19
  11. package/dist/Banner/Banner.d.ts +9 -1
  12. package/dist/Banner/Banner.d.ts.map +1 -1
  13. package/dist/Banner/Banner.js +31 -2
  14. package/dist/Breadcrumbs/BreadcrumbItem.d.ts +31 -2
  15. package/dist/Breadcrumbs/BreadcrumbItem.d.ts.map +1 -1
  16. package/dist/Breadcrumbs/BreadcrumbItem.js +208 -6
  17. package/dist/Breadcrumbs/index.d.ts +5 -0
  18. package/dist/Breadcrumbs/index.d.ts.map +1 -1
  19. package/dist/Breadcrumbs/index.js +9 -1
  20. package/dist/Button/Button.d.ts +8 -2
  21. package/dist/Button/Button.d.ts.map +1 -1
  22. package/dist/Button/Button.js +31 -2
  23. package/dist/ButtonGroup/ButtonGroup.d.ts +9 -1
  24. package/dist/ButtonGroup/ButtonGroup.d.ts.map +1 -1
  25. package/dist/ButtonGroup/ButtonGroup.js +30 -1
  26. package/dist/Calendar/Calendar.d.ts.map +1 -1
  27. package/dist/Calendar/Calendar.js +30 -2
  28. package/dist/Card/Card.d.ts +8 -2
  29. package/dist/Card/Card.d.ts.map +1 -1
  30. package/dist/Card/Card.js +28 -2
  31. package/dist/Carousel/Carousel.d.ts +4 -1
  32. package/dist/Carousel/Carousel.d.ts.map +1 -1
  33. package/dist/Carousel/Carousel.js +24 -4
  34. package/dist/Chat/ChatComposer.d.ts +8 -0
  35. package/dist/Chat/ChatComposer.d.ts.map +1 -1
  36. package/dist/Chat/ChatComposer.js +46 -7
  37. package/dist/Chat/ChatComposerDrawer.d.ts +2 -0
  38. package/dist/Chat/ChatComposerDrawer.d.ts.map +1 -1
  39. package/dist/Chat/ChatComposerDrawer.js +11 -1
  40. package/dist/Chat/ChatComposerInput.d.ts +20 -3
  41. package/dist/Chat/ChatComposerInput.d.ts.map +1 -1
  42. package/dist/Chat/ChatComposerInput.js +35 -3
  43. package/dist/Chat/ChatContext.d.ts +33 -0
  44. package/dist/Chat/ChatContext.d.ts.map +1 -1
  45. package/dist/Chat/ChatContext.js +16 -2
  46. package/dist/Chat/ChatDictationButton.d.ts.map +1 -1
  47. package/dist/Chat/ChatDictationButton.js +1 -1
  48. package/dist/Chat/ChatLayoutScrollButton.d.ts.map +1 -1
  49. package/dist/Chat/ChatLayoutScrollButton.js +4 -4
  50. package/dist/Chat/ChatSendButton.d.ts.map +1 -1
  51. package/dist/Chat/ChatSendButton.js +7 -1
  52. package/dist/Chat/ChatToolCalls.d.ts +5 -1
  53. package/dist/Chat/ChatToolCalls.d.ts.map +1 -1
  54. package/dist/Chat/ChatToolCalls.js +18 -9
  55. package/dist/Chat/index.d.ts +2 -1
  56. package/dist/Chat/index.d.ts.map +1 -1
  57. package/dist/Chat/index.js +1 -1
  58. package/dist/Chat/useChatStreamScroll.d.ts +2 -1
  59. package/dist/Chat/useChatStreamScroll.d.ts.map +1 -1
  60. package/dist/Chat/useChatStreamScroll.js +22 -8
  61. package/dist/Chat/useSpeechRecognition.d.ts +0 -1
  62. package/dist/Chat/useSpeechRecognition.d.ts.map +1 -1
  63. package/dist/Chat/useSpeechRecognition.js +1 -1
  64. package/dist/CheckboxList/CheckboxListItem.d.ts +20 -1
  65. package/dist/CheckboxList/CheckboxListItem.d.ts.map +1 -1
  66. package/dist/CheckboxList/CheckboxListItem.js +11 -1
  67. package/dist/ClickableCard/ClickableCard.d.ts +9 -2
  68. package/dist/ClickableCard/ClickableCard.d.ts.map +1 -1
  69. package/dist/ClickableCard/ClickableCard.js +5 -2
  70. package/dist/CodeBlock/CodeBlock.d.ts.map +1 -1
  71. package/dist/CodeBlock/CodeBlock.js +8 -1
  72. package/dist/CommandPalette/CommandPalette.d.ts +1 -1
  73. package/dist/CommandPalette/CommandPalette.d.ts.map +1 -1
  74. package/dist/CommandPalette/CommandPalette.js +3 -1
  75. package/dist/CommandPalette/CommandPaletteInput.d.ts +7 -1
  76. package/dist/CommandPalette/CommandPaletteInput.d.ts.map +1 -1
  77. package/dist/CommandPalette/CommandPaletteInput.js +6 -1
  78. package/dist/DateInput/DateInput.d.ts +47 -1
  79. package/dist/DateInput/DateInput.d.ts.map +1 -1
  80. package/dist/DateInput/DateInput.js +26 -2
  81. package/dist/DateInput/index.d.ts +1 -1
  82. package/dist/DateInput/index.d.ts.map +1 -1
  83. package/dist/DateTimeInput/DateTimeInput.d.ts.map +1 -1
  84. package/dist/DateTimeInput/DateTimeInput.js +10 -1
  85. package/dist/Dialog/Dialog.d.ts +3 -0
  86. package/dist/Dialog/Dialog.d.ts.map +1 -1
  87. package/dist/Dialog/Dialog.js +57 -6
  88. package/dist/Dialog/DialogContext.d.ts +7 -0
  89. package/dist/Dialog/DialogContext.d.ts.map +1 -1
  90. package/dist/Dialog/DialogContext.js +2 -2
  91. package/dist/Dialog/DialogHeader.d.ts +5 -2
  92. package/dist/Dialog/DialogHeader.d.ts.map +1 -1
  93. package/dist/Dialog/DialogHeader.js +6 -1
  94. package/dist/Divider/Divider.js +1 -1
  95. package/dist/Field/Field.d.ts.map +1 -1
  96. package/dist/Field/Field.js +2 -3
  97. package/dist/Field/FieldLabel.d.ts +1 -1
  98. package/dist/Field/FieldLabel.d.ts.map +1 -1
  99. package/dist/Field/FieldLabel.js +42 -15
  100. package/dist/FieldStatus/FieldStatus.d.ts +8 -0
  101. package/dist/FieldStatus/FieldStatus.d.ts.map +1 -1
  102. package/dist/FieldStatus/FieldStatus.js +22 -4
  103. package/dist/FileInput/FileInput.d.ts.map +1 -1
  104. package/dist/FileInput/FileInput.js +10 -2
  105. package/dist/HoverCard/HoverCard.d.ts +9 -1
  106. package/dist/HoverCard/HoverCard.d.ts.map +1 -1
  107. package/dist/HoverCard/HoverCard.js +2 -0
  108. package/dist/HoverCard/useHoverCard.d.ts +8 -0
  109. package/dist/HoverCard/useHoverCard.d.ts.map +1 -1
  110. package/dist/HoverCard/useHoverCard.js +7 -2
  111. package/dist/Icon/Icon.d.ts +7 -2
  112. package/dist/Icon/Icon.d.ts.map +1 -1
  113. package/dist/Item/Item.d.ts +6 -1
  114. package/dist/Item/Item.d.ts.map +1 -1
  115. package/dist/Item/Item.js +22 -1
  116. package/dist/Layer/useLayer.d.ts +6 -0
  117. package/dist/Layer/useLayer.d.ts.map +1 -1
  118. package/dist/Layer/useLayer.js +2 -0
  119. package/dist/MobileNav/MobileNav.d.ts.map +1 -1
  120. package/dist/MobileNav/MobileNav.js +6 -1
  121. package/dist/MobileNav/MobileNavToggle.d.ts.map +1 -1
  122. package/dist/MobileNav/MobileNavToggle.js +4 -0
  123. package/dist/MultiSelector/MultiSelector.d.ts.map +1 -1
  124. package/dist/MultiSelector/MultiSelector.js +39 -12
  125. package/dist/MultiSelector/hooks.d.ts.map +1 -1
  126. package/dist/MultiSelector/hooks.js +16 -0
  127. package/dist/OverflowList/OverflowList.d.ts +20 -3
  128. package/dist/OverflowList/OverflowList.d.ts.map +1 -1
  129. package/dist/OverflowList/OverflowList.js +29 -4
  130. package/dist/Popover/Popover.d.ts.map +1 -1
  131. package/dist/Popover/Popover.js +3 -2
  132. package/dist/Popover/usePopover.d.ts.map +1 -1
  133. package/dist/Popover/usePopover.js +3 -9
  134. package/dist/PowerSearch/PowerSearchEditPopover.js +1 -1
  135. package/dist/SelectableCard/SelectableCard.d.ts +9 -2
  136. package/dist/SelectableCard/SelectableCard.d.ts.map +1 -1
  137. package/dist/SelectableCard/SelectableCard.js +16 -13
  138. package/dist/Selector/Selector.d.ts.map +1 -1
  139. package/dist/Selector/Selector.js +4 -2
  140. package/dist/Selector/hooks.d.ts.map +1 -1
  141. package/dist/Selector/hooks.js +16 -0
  142. package/dist/SideNav/SideNavHeading.d.ts.map +1 -1
  143. package/dist/SideNav/SideNavHeading.js +21 -8
  144. package/dist/Slider/Slider.d.ts.map +1 -1
  145. package/dist/Slider/Slider.js +15 -1
  146. package/dist/Stack/stack.stylex.d.ts +9 -9
  147. package/dist/Table/BaseTable.d.ts.map +1 -1
  148. package/dist/Table/BaseTable.js +3 -2
  149. package/dist/Table/plugins/selection/useTableSelection.d.ts +13 -0
  150. package/dist/Table/plugins/selection/useTableSelection.d.ts.map +1 -1
  151. package/dist/Table/plugins/selection/useTableSelection.js +4 -1
  152. package/dist/Table/useBaseTablePlugins.d.ts.map +1 -1
  153. package/dist/Table/useBaseTablePlugins.js +5 -3
  154. package/dist/Thumbnail/Thumbnail.d.ts +26 -5
  155. package/dist/Thumbnail/Thumbnail.d.ts.map +1 -1
  156. package/dist/Thumbnail/Thumbnail.js +97 -54
  157. package/dist/Thumbnail/thumbnail.markers.stylex.d.ts +9 -0
  158. package/dist/Thumbnail/thumbnail.markers.stylex.d.ts.map +1 -0
  159. package/dist/Thumbnail/thumbnail.markers.stylex.js +14 -0
  160. package/dist/TimeInput/TimeInput.d.ts.map +1 -1
  161. package/dist/TimeInput/TimeInput.js +15 -4
  162. package/dist/Timestamp/Timestamp.d.ts +3 -1
  163. package/dist/Timestamp/Timestamp.d.ts.map +1 -1
  164. package/dist/Timestamp/Timestamp.js +8 -6
  165. package/dist/Toast/useToast.d.ts.map +1 -1
  166. package/dist/Toast/useToast.js +2 -5
  167. package/dist/ToggleButton/ToggleButtonGroup.d.ts +0 -1
  168. package/dist/ToggleButton/ToggleButtonGroup.d.ts.map +1 -1
  169. package/dist/ToggleButton/ToggleButtonGroup.js +1 -1
  170. package/dist/Tokenizer/Tokenizer.d.ts +1 -1
  171. package/dist/Tokenizer/Tokenizer.d.ts.map +1 -1
  172. package/dist/Tokenizer/Tokenizer.js +16 -4
  173. package/dist/TopNav/TopNavHeading.d.ts.map +1 -1
  174. package/dist/TopNav/TopNavHeading.js +18 -8
  175. package/dist/TopNav/TopNavMegaMenu.js +10 -4
  176. package/dist/TopNav/TopNavMegaMenuFeaturedCard.d.ts +9 -1
  177. package/dist/TopNav/TopNavMegaMenuFeaturedCard.d.ts.map +1 -1
  178. package/dist/TopNav/TopNavMegaMenuFeaturedCard.js +8 -1
  179. package/dist/TopNav/TopNavMenu.d.ts +2 -1
  180. package/dist/TopNav/TopNavMenu.d.ts.map +1 -1
  181. package/dist/TopNav/TopNavMenu.js +68 -6
  182. package/dist/TreeList/TreeListBranches.d.ts +5 -0
  183. package/dist/TreeList/TreeListBranches.d.ts.map +1 -1
  184. package/dist/TreeList/TreeListBranches.js +10 -4
  185. package/dist/TreeList/TreeListItem.d.ts.map +1 -1
  186. package/dist/TreeList/TreeListItem.js +25 -6
  187. package/dist/astryx.css +26 -18
  188. package/dist/astryx.umd.js +51 -51
  189. package/dist/astryx.umd.js.map +4 -4
  190. package/dist/docs-types.d.ts +8 -0
  191. package/dist/docs-types.d.ts.map +1 -1
  192. package/dist/hooks/computeOverflow.d.ts +47 -0
  193. package/dist/hooks/computeOverflow.d.ts.map +1 -0
  194. package/dist/hooks/computeOverflow.js +213 -0
  195. package/dist/hooks/index.d.ts +1 -0
  196. package/dist/hooks/index.d.ts.map +1 -1
  197. package/dist/hooks/index.js +2 -1
  198. package/dist/hooks/useDevWarning.d.ts +18 -0
  199. package/dist/hooks/useDevWarning.d.ts.map +1 -0
  200. package/dist/hooks/useDevWarning.js +49 -0
  201. package/dist/hooks/useOverflow.d.ts +19 -0
  202. package/dist/hooks/useOverflow.d.ts.map +1 -1
  203. package/dist/hooks/useOverflow.js +36 -25
  204. package/dist/i18n/resolve.d.ts.map +1 -1
  205. package/dist/i18n/resolve.js +7 -18
  206. package/dist/theme/Theme.d.ts.map +1 -1
  207. package/dist/theme/Theme.js +2 -7
  208. package/dist/theme/generateThemeRules.d.ts.map +1 -1
  209. package/dist/theme/generateThemeRules.js +51 -0
  210. package/dist/theme/hct.d.ts +0 -1
  211. package/dist/theme/hct.d.ts.map +1 -1
  212. package/dist/theme/hct.js +1 -1
  213. package/dist/theme/syntax/defineSyntaxTheme.d.ts.map +1 -1
  214. package/dist/theme/syntax/defineSyntaxTheme.js +2 -1
  215. package/dist/utils/devWarning.d.ts +42 -0
  216. package/dist/utils/devWarning.d.ts.map +1 -0
  217. package/dist/utils/devWarning.js +88 -0
  218. package/dist/utils/index.d.ts +3 -1
  219. package/dist/utils/index.d.ts.map +1 -1
  220. package/dist/utils/index.js +3 -2
  221. package/dist/utils/plainDate.d.ts +30 -0
  222. package/dist/utils/plainDate.d.ts.map +1 -1
  223. package/dist/utils/plainDate.js +53 -0
  224. package/dist/utils/types.d.ts +13 -0
  225. package/dist/utils/types.d.ts.map +1 -1
  226. package/locales/en.json +16 -0
  227. package/locales/fr-FR.json +14 -0
  228. package/locales/pseudo.json +12 -0
  229. package/package.json +1 -1
  230. package/src/AppShell/AppShell.tsx +6 -0
  231. package/src/AppShell/AppShellMobileContext.tsx +8 -0
  232. package/src/AppShell/useAppShellMobile.doc.mjs +8 -0
  233. package/src/Avatar/Avatar.doc.mjs +15 -3
  234. package/src/Avatar/Avatar.test.tsx +156 -1
  235. package/src/Avatar/Avatar.tsx +96 -4
  236. package/src/Avatar/AvatarStatusDot.doc.mjs +23 -12
  237. package/src/Avatar/AvatarStatusDot.test.tsx +284 -0
  238. package/src/Avatar/AvatarStatusDot.tsx +178 -21
  239. package/src/Banner/Banner.doc.mjs +9 -0
  240. package/src/Banner/Banner.test.tsx +30 -0
  241. package/src/Banner/Banner.tsx +37 -1
  242. package/src/Breadcrumbs/BreadcrumbItem.doc.mjs +26 -0
  243. package/src/Breadcrumbs/BreadcrumbItem.tsx +333 -14
  244. package/src/Breadcrumbs/Breadcrumbs.doc.mjs +2 -0
  245. package/src/Breadcrumbs/Breadcrumbs.test.tsx +284 -2
  246. package/src/Breadcrumbs/index.ts +27 -0
  247. package/src/Button/Button.doc.mjs +9 -0
  248. package/src/Button/Button.test.tsx +49 -0
  249. package/src/Button/Button.tsx +25 -1
  250. package/src/ButtonGroup/ButtonGroup.doc.mjs +3 -0
  251. package/src/ButtonGroup/ButtonGroup.test.tsx +37 -0
  252. package/src/ButtonGroup/ButtonGroup.tsx +32 -0
  253. package/src/Calendar/Calendar.doc.mjs +12 -1
  254. package/src/Calendar/Calendar.test.tsx +193 -0
  255. package/src/Calendar/Calendar.tsx +38 -16
  256. package/src/Card/Card.doc.mjs +9 -0
  257. package/src/Card/Card.test.tsx +21 -3
  258. package/src/Card/Card.tsx +35 -2
  259. package/src/Carousel/Carousel.doc.mjs +1 -0
  260. package/src/Carousel/Carousel.test.tsx +53 -0
  261. package/src/Carousel/Carousel.tsx +34 -4
  262. package/src/Chat/ChatComposer.doc.mjs +12 -3
  263. package/src/Chat/ChatComposer.test.tsx +115 -0
  264. package/src/Chat/ChatComposer.tsx +73 -9
  265. package/src/Chat/ChatComposerDrawer.test.tsx +61 -0
  266. package/src/Chat/ChatComposerDrawer.tsx +11 -1
  267. package/src/Chat/ChatComposerInput.doc.mjs +7 -0
  268. package/src/Chat/ChatComposerInput.test.tsx +103 -0
  269. package/src/Chat/ChatComposerInput.tsx +49 -3
  270. package/src/Chat/ChatContext.tsx +37 -10
  271. package/src/Chat/ChatDictationButton.tsx +4 -1
  272. package/src/Chat/ChatLayoutScrollButton.tsx +4 -1
  273. package/src/Chat/ChatSendButton.tsx +6 -0
  274. package/src/Chat/ChatToolCalls.test.tsx +64 -0
  275. package/src/Chat/ChatToolCalls.tsx +25 -4
  276. package/src/Chat/index.ts +5 -1
  277. package/src/Chat/useChatStreamScroll.test.tsx +49 -0
  278. package/src/Chat/useChatStreamScroll.ts +27 -10
  279. package/src/Chat/useSpeechRecognition.ts +1 -1
  280. package/src/CheckboxInput/CheckboxInput.test.tsx +32 -1
  281. package/src/CheckboxList/CheckboxList.test.tsx +81 -3
  282. package/src/CheckboxList/CheckboxListItem.doc.mjs +33 -5
  283. package/src/CheckboxList/CheckboxListItem.tsx +41 -5
  284. package/src/ClickableCard/ClickableCard.doc.mjs +2 -0
  285. package/src/ClickableCard/ClickableCard.test.tsx +34 -0
  286. package/src/ClickableCard/ClickableCard.tsx +13 -3
  287. package/src/CodeBlock/CodeBlock.test.tsx +56 -0
  288. package/src/CodeBlock/CodeBlock.tsx +6 -0
  289. package/src/CommandPalette/CommandPalette.tsx +3 -1
  290. package/src/CommandPalette/CommandPaletteInput.doc.mjs +26 -9
  291. package/src/CommandPalette/CommandPaletteInput.test.tsx +34 -0
  292. package/src/CommandPalette/CommandPaletteInput.tsx +11 -0
  293. package/src/ContextMenu/ContextMenu.test.tsx +193 -0
  294. package/src/DateInput/DateInput.doc.mjs +16 -0
  295. package/src/DateInput/DateInput.test.tsx +108 -0
  296. package/src/DateInput/DateInput.tsx +68 -3
  297. package/src/DateInput/index.ts +1 -0
  298. package/src/DateTimeInput/DateTimeInput.test.tsx +35 -0
  299. package/src/DateTimeInput/DateTimeInput.tsx +11 -1
  300. package/src/Dialog/Dialog.doc.mjs +2 -2
  301. package/src/Dialog/Dialog.test.tsx +77 -4
  302. package/src/Dialog/Dialog.tsx +89 -5
  303. package/src/Dialog/DialogContext.ts +9 -2
  304. package/src/Dialog/DialogHeader.doc.mjs +2 -2
  305. package/src/Dialog/DialogHeader.tsx +9 -2
  306. package/src/Divider/Divider.tsx +2 -2
  307. package/src/DropdownMenu/DropdownMenu.test.tsx +169 -0
  308. package/src/Field/Field.test.tsx +57 -12
  309. package/src/Field/Field.tsx +6 -5
  310. package/src/Field/FieldLabel.tsx +8 -0
  311. package/src/FieldStatus/FieldStatus.doc.mjs +17 -5
  312. package/src/FieldStatus/FieldStatus.test.tsx +78 -40
  313. package/src/FieldStatus/FieldStatus.tsx +22 -4
  314. package/src/FileInput/FileInput.test.tsx +52 -3
  315. package/src/FileInput/FileInput.tsx +9 -1
  316. package/src/HoverCard/HoverCard.doc.mjs +13 -0
  317. package/src/HoverCard/HoverCard.test.tsx +21 -2
  318. package/src/HoverCard/HoverCard.tsx +11 -0
  319. package/src/HoverCard/useHoverCard.doc.mjs +2 -0
  320. package/src/HoverCard/useHoverCard.tsx +24 -2
  321. package/src/Icon/Icon.doc.mjs +3 -2
  322. package/src/Icon/Icon.tsx +7 -2
  323. package/src/IconButton/IconButton.doc.mjs +8 -0
  324. package/src/IconButton/IconButton.test.tsx +15 -18
  325. package/src/Item/Item.test.tsx +40 -18
  326. package/src/Item/Item.tsx +38 -2
  327. package/src/Layer/useLayer.tsx +8 -0
  328. package/src/List/List.test.tsx +9 -8
  329. package/src/MobileNav/MobileNav.tsx +6 -0
  330. package/src/MobileNav/MobileNavToggle.test.tsx +116 -0
  331. package/src/MobileNav/MobileNavToggle.tsx +9 -1
  332. package/src/MultiSelector/MultiSelector.doc.mjs +4 -2
  333. package/src/MultiSelector/MultiSelector.test.tsx +162 -1
  334. package/src/MultiSelector/MultiSelector.tsx +55 -12
  335. package/src/MultiSelector/hooks.ts +17 -0
  336. package/src/NumberInput/NumberInput.test.tsx +11 -7
  337. package/src/OverflowList/OverflowList.doc.mjs +39 -6
  338. package/src/OverflowList/OverflowList.test.tsx +111 -0
  339. package/src/OverflowList/OverflowList.tsx +48 -8
  340. package/src/Popover/Popover.tsx +7 -4
  341. package/src/Popover/usePopover.tsx +9 -13
  342. package/src/PowerSearch/PowerSearch.doc.mjs +14 -0
  343. package/src/PowerSearch/PowerSearch.test.tsx +20 -0
  344. package/src/PowerSearch/PowerSearchEditPopover.test.tsx +67 -0
  345. package/src/PowerSearch/PowerSearchEditPopover.tsx +1 -1
  346. package/src/SelectableCard/SelectableCard.doc.mjs +2 -0
  347. package/src/SelectableCard/SelectableCard.test.tsx +46 -4
  348. package/src/SelectableCard/SelectableCard.tsx +29 -16
  349. package/src/Selector/Selector.test.tsx +69 -0
  350. package/src/Selector/Selector.tsx +5 -1
  351. package/src/Selector/hooks.ts +17 -0
  352. package/src/SideNav/SideNav.test.tsx +119 -3
  353. package/src/SideNav/SideNavHeading.tsx +24 -8
  354. package/src/Slider/Slider.test.tsx +62 -2
  355. package/src/Slider/Slider.tsx +15 -1
  356. package/src/Switch/Switch.test.tsx +32 -1
  357. package/src/Table/BaseTable.tsx +3 -5
  358. package/src/Table/plugins/selection/useTableSelection.test.tsx +16 -0
  359. package/src/Table/plugins/selection/useTableSelection.tsx +19 -1
  360. package/src/Table/useBaseTablePlugins.ts +10 -6
  361. package/src/Table/useTableSelection.doc.mjs +65 -14
  362. package/src/TextArea/TextArea.test.tsx +9 -1
  363. package/src/Thumbnail/Thumbnail.doc.mjs +19 -10
  364. package/src/Thumbnail/Thumbnail.test.tsx +98 -7
  365. package/src/Thumbnail/Thumbnail.tsx +141 -41
  366. package/src/Thumbnail/thumbnail.markers.stylex.ts +12 -0
  367. package/src/TimeInput/TimeInput.test.tsx +76 -1
  368. package/src/TimeInput/TimeInput.tsx +19 -6
  369. package/src/Timestamp/Timestamp.doc.mjs +4 -4
  370. package/src/Timestamp/Timestamp.test.tsx +32 -0
  371. package/src/Timestamp/Timestamp.tsx +28 -8
  372. package/src/Toast/useToast.tsx +7 -8
  373. package/src/ToggleButton/ToggleButtonGroup.tsx +1 -1
  374. package/src/Tokenizer/Tokenizer.doc.mjs +15 -1
  375. package/src/Tokenizer/Tokenizer.test.tsx +183 -2
  376. package/src/Tokenizer/Tokenizer.tsx +16 -4
  377. package/src/TopNav/TopNav.test.tsx +125 -1
  378. package/src/TopNav/TopNavHeading.tsx +24 -8
  379. package/src/TopNav/TopNavMegaMenu.test.tsx +149 -1
  380. package/src/TopNav/TopNavMegaMenu.tsx +10 -4
  381. package/src/TopNav/TopNavMegaMenuFeaturedCard.doc.mjs +3 -3
  382. package/src/TopNav/TopNavMegaMenuFeaturedCard.tsx +19 -2
  383. package/src/TopNav/TopNavMenu.test.tsx +118 -4
  384. package/src/TopNav/TopNavMenu.tsx +83 -5
  385. package/src/TreeList/TreeList.doc.mjs +6 -0
  386. package/src/TreeList/TreeList.test.tsx +169 -0
  387. package/src/TreeList/TreeListBranches.tsx +16 -2
  388. package/src/TreeList/TreeListItem.tsx +34 -3
  389. package/src/docs-types.ts +5 -0
  390. package/src/hooks/computeOverflow.test.ts +422 -0
  391. package/src/hooks/computeOverflow.ts +290 -0
  392. package/src/hooks/index.ts +2 -0
  393. package/src/hooks/useDevWarning.test.tsx +45 -0
  394. package/src/hooks/useDevWarning.ts +54 -0
  395. package/src/hooks/useOverflow.test.ts +96 -4
  396. package/src/hooks/useOverflow.ts +74 -33
  397. package/src/i18n/InternationalizationProvider.doc.mjs +77 -2
  398. package/src/i18n/resolve.ts +9 -21
  399. package/src/theme/Theme.tsx +11 -14
  400. package/src/theme/generateThemeRules.test.ts +65 -0
  401. package/src/theme/generateThemeRules.ts +56 -0
  402. package/src/theme/hct.ts +1 -1
  403. package/src/theme/syntax/defineSyntaxTheme.ts +5 -6
  404. package/src/utils/devWarning.test.ts +56 -0
  405. package/src/utils/devWarning.ts +102 -0
  406. package/src/utils/index.ts +6 -0
  407. package/src/utils/plainDate.test.ts +22 -0
  408. package/src/utils/plainDate.ts +61 -0
  409. package/src/utils/types.ts +14 -0
@@ -1 +1 @@
1
- {"version":3,"file":"AppShell.d.ts","sourceRoot":"","sources":["../../src/AppShell/AppShell.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAmBf,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAChD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAmC5C;;;;;;GAMG;AACH,MAAM,MAAM,kBAAkB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AAE7D;;;;;;;GAOG;AACH;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,IAAI,CAAC;IACX,OAAO,EAAE,IAAI,CAAC;IACd,OAAO,EAAE,IAAI,CAAC;IACd,QAAQ,EAAE,IAAI,CAAC;CAChB;AAED;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG,MAAM,kBAAkB,CAAC;AAEvD;;;GAGG;AACH,MAAM,WAAW,eAAe;IAC9B;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAEzC;;;;OAIG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;;OAGG;IACH,UAAU,CAAC,EAAE,kBAAkB,CAAC;IAEhC;;;;;;;;;OASG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC9D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC;IAE1B;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;;;;;OAOG;IACH,cAAc,CAAC,EAAE,WAAW,CAAC;IAE7B;;;;;OAKG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAEzB;;;;;;;;;;;;;;;;;;;;;OAqBG;IACH,SAAS,CAAC,EAAE,KAAK,GAAG,eAAe,GAAG,SAAS,CAAC;IAEhD;;;;;;;;;;;;;;;;;;;;;;;;;OAyBG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AAkKD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,QAAQ,CAAC,EACvB,OAAoB,EACpB,MAAM,EACN,QAAQ,EACR,cAAc,EACd,aAAa,EAAE,UAAU,EACzB,MAAe,EACf,SAAS,EACT,OAAO,EACP,MAAM,EACN,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,aAAa,qBAiXf;yBAhYe,QAAQ"}
1
+ {"version":3,"file":"AppShell.d.ts","sourceRoot":"","sources":["../../src/AppShell/AppShell.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAQL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAmBf,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAChD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAmC5C;;;;;;GAMG;AACH,MAAM,MAAM,kBAAkB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AAE7D;;;;;;;GAOG;AACH;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,IAAI,CAAC;IACX,OAAO,EAAE,IAAI,CAAC;IACd,OAAO,EAAE,IAAI,CAAC;IACd,QAAQ,EAAE,IAAI,CAAC;CAChB;AAED;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG,MAAM,kBAAkB,CAAC;AAEvD;;;GAGG;AACH,MAAM,WAAW,eAAe;IAC9B;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAEzC;;;;OAIG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;;OAGG;IACH,UAAU,CAAC,EAAE,kBAAkB,CAAC;IAEhC;;;;;;;;;OASG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC9D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC;IAE1B;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;;;;;OAOG;IACH,cAAc,CAAC,EAAE,WAAW,CAAC;IAE7B;;;;;OAKG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAEzB;;;;;;;;;;;;;;;;;;;;;OAqBG;IACH,SAAS,CAAC,EAAE,KAAK,GAAG,eAAe,GAAG,SAAS,CAAC;IAEhD;;;;;;;;;;;;;;;;;;;;;;;;;OAyBG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AAkKD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,QAAQ,CAAC,EACvB,OAAoB,EACpB,MAAM,EACN,QAAQ,EACR,cAAc,EACd,aAAa,EAAE,UAAU,EACzB,MAAe,EACf,SAAS,EACT,OAAO,EACP,MAAM,EACN,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,aAAa,qBAsXf;yBArYe,QAAQ"}
@@ -20,7 +20,7 @@ import React from 'react';
20
20
  * - /packages/cli/templates/blocks/components/AppShell/ (showcase blocks)
21
21
  */
22
22
 
23
- import { isValidElement, useCallback, useEffect, useMemo, useRef, useState } from 'react';
23
+ import { isValidElement, useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';
24
24
  import * as stylex from '@stylexjs/stylex';
25
25
  import "../theme/tokens.stylex.js";
26
26
  import { colorVars, fontWeightVars, radiusVars, spacingVars, typeScaleVars } from "../theme/tokens.stylex.js";
@@ -307,15 +307,19 @@ export function AppShell({
307
307
  // =========================================================================
308
308
  // Mobile context — shared with MobileNavToggle and future TopNav mobile
309
309
  // =========================================================================
310
+ // Stable id shared by the drawer (applied as its `id`) and the toggle
311
+ // (referenced via `aria-controls`) so screen readers know what it controls.
312
+ const mobileNavId = useId();
310
313
  const mobileContextValue = useMemo(() => ({
311
314
  isMobile: isBelowBreakpoint,
312
315
  isMobileNavOpen,
316
+ mobileNavId,
313
317
  toggleMobileNav: () => mobileNavEnabled && setMobileNavOpen(!isMobileNavOpen),
314
318
  openMobileNav: () => mobileNavEnabled && setMobileNavOpen(true),
315
319
  closeMobileNav: () => setMobileNavOpen(false),
316
320
  isMobileNavEnabled: mobileNavEnabled,
317
321
  hasAutoToggle: mobileNavHasToggle
318
- }), [isBelowBreakpoint, isMobileNavOpen, setMobileNavOpen, mobileNavEnabled, mobileNavHasToggle]);
322
+ }), [isBelowBreakpoint, isMobileNavOpen, mobileNavId, setMobileNavOpen, mobileNavEnabled, mobileNavHasToggle]);
319
323
 
320
324
  // =========================================================================
321
325
  // Build header content (topNav + banner)
@@ -3,6 +3,14 @@ export interface AppShellMobileContextValue {
3
3
  isMobile: boolean;
4
4
  /** Whether the mobile nav drawer is currently open */
5
5
  isMobileNavOpen: boolean;
6
+ /**
7
+ * DOM id of the mobile nav drawer. `AppShell` sets this so the toggle can
8
+ * point its `aria-controls` at the drawer and the drawer can apply it as its
9
+ * `id`. Optional: callers that construct this context by hand may omit it, in
10
+ * which case `MobileNav` falls back to a locally generated id and the toggle
11
+ * simply drops `aria-controls`.
12
+ */
13
+ mobileNavId?: string;
6
14
  /** Toggle the mobile nav drawer open/closed */
7
15
  toggleMobileNav: () => void;
8
16
  /** Open the mobile nav drawer */
@@ -1 +1 @@
1
- {"version":3,"file":"AppShellMobileContext.d.ts","sourceRoot":"","sources":["../../src/AppShell/AppShellMobileContext.tsx"],"names":[],"mappings":"AAiBA,MAAM,WAAW,0BAA0B;IACzC,0DAA0D;IAC1D,QAAQ,EAAE,OAAO,CAAC;IAClB,sDAAsD;IACtD,eAAe,EAAE,OAAO,CAAC;IACzB,+CAA+C;IAC/C,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,iCAAiC;IACjC,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,kCAAkC;IAClC,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,2CAA2C;IAC3C,kBAAkB,EAAE,OAAO,CAAC;IAC5B,6EAA6E;IAC7E,aAAa,EAAE,OAAO,CAAC;CACxB;AAYD,eAAO,MAAM,qBAAqB,qDACuB,CAAC;AAG1D;;GAEG;AACH,wBAAgB,iBAAiB,IAAI,0BAA0B,CAE9D"}
1
+ {"version":3,"file":"AppShellMobileContext.d.ts","sourceRoot":"","sources":["../../src/AppShell/AppShellMobileContext.tsx"],"names":[],"mappings":"AAiBA,MAAM,WAAW,0BAA0B;IACzC,0DAA0D;IAC1D,QAAQ,EAAE,OAAO,CAAC;IAClB,sDAAsD;IACtD,eAAe,EAAE,OAAO,CAAC;IACzB;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,+CAA+C;IAC/C,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,iCAAiC;IACjC,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,kCAAkC;IAClC,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,2CAA2C;IAC3C,kBAAkB,EAAE,OAAO,CAAC;IAC5B,6EAA6E;IAC7E,aAAa,EAAE,OAAO,CAAC;CACxB;AAYD,eAAO,MAAM,qBAAqB,qDACuB,CAAC;AAG1D;;GAEG;AACH,wBAAgB,iBAAiB,IAAI,0BAA0B,CAE9D"}
@@ -1,6 +1,7 @@
1
1
  /**
2
2
  * @file Avatar.tsx
3
- * @input Uses React, HTMLAttributes, ReactNode, useState
3
+ * @input Uses React, HTMLAttributes, ReactNode, useState; useTooltip
4
+ * (Tooltip hook) for the optional name-on-hover tooltip
4
5
  * @output Exports Avatar component, AvatarProps, AvatarSize types
5
6
  * @position Core implementation; consumed by index.ts
6
7
  *
@@ -70,6 +71,19 @@ export interface AvatarProps extends BaseProps<HTMLDivElement> {
70
71
  * Typically used for status indicators or badges.
71
72
  */
72
73
  status?: ReactNode;
74
+ /**
75
+ * Tooltip shown on hover (and keyboard focus).
76
+ * - omitted / `true`: show the avatar's `name`
77
+ * - a string: show that text instead
78
+ * - `false`: no tooltip
79
+ *
80
+ * The avatar owns this tooltip. It is NOT auto-disabled when wrapped in your
81
+ * own Tooltip/HoverCard — set `tooltip={false}` if you provide your own
82
+ * overlay. No tooltip is shown if `tooltip` is `true`/omitted and there is
83
+ * no (non-whitespace) `name`.
84
+ * @default true
85
+ */
86
+ tooltip?: string | boolean;
73
87
  }
74
88
  /**
75
89
  * Avatar component for displaying user profile pictures.
@@ -82,9 +96,11 @@ export interface AvatarProps extends BaseProps<HTMLDivElement> {
82
96
  * <Avatar src="/user.jpg" name="John Doe" />
83
97
  * <Avatar name="Jane Smith" size="xl" />
84
98
  * <Avatar src="/user.jpg" status={<OnlineIndicator />} />
99
+ * <Avatar name="jsmith" tooltip="Jane Smith, Staff Engineer" />
100
+ * <Avatar name="Jane" tooltip={false} />
85
101
  * ```
86
102
  */
87
- export declare function Avatar({ alt, 'data-testid': testId, fallbackSrc, name, size, src, status, xstyle, className, style, ref, ...props }: AvatarProps): import("react").JSX.Element;
103
+ export declare function Avatar({ alt, 'data-testid': testId, fallbackSrc, name, size, src, status, tooltip, xstyle, className, style, ref, ...props }: AvatarProps): import("react").JSX.Element;
88
104
  export declare namespace Avatar {
89
105
  var displayName: string;
90
106
  }
@@ -1 +1 @@
1
- {"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../src/Avatar/Avatar.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,EAAoB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AACxD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAsC5C;;;;;;GAMG;AACH,KAAK,eAAe,GAAG,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEzD;;GAEG;AACH,KAAK,iBAAiB,GACpB,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;AAEzE;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG,eAAe,GAAG,iBAAiB,CAAC;AAE7D;;GAEG;AACH,wBAAgB,WAAW,CAAC,IAAI,EAAE,UAAU,GAAG,MAAM,CAgBpD;AAqFD,MAAM,WAAW,WAAY,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC5D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AAsCD;;;;;;;;;;;;GAYG;AACH,wBAAgB,MAAM,CAAC,EACrB,GAAG,EACH,aAAa,EAAE,MAAM,EACrB,WAAW,EACX,IAAI,EACJ,IAAW,EACX,GAAG,EACH,MAAM,EACN,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,WAAW,+BAwFb;yBArGe,MAAM"}
1
+ {"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../src/Avatar/Avatar.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAoB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AACxD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAuC5C;;;;;;GAMG;AACH,KAAK,eAAe,GAAG,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEzD;;GAEG;AACH,KAAK,iBAAiB,GACpB,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;AAEzE;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG,eAAe,GAAG,iBAAiB,CAAC;AAE7D;;GAEG;AACH,wBAAgB,WAAW,CAAC,IAAI,EAAE,UAAU,GAAG,MAAM,CAgBpD;AAkGD,MAAM,WAAW,WAAY,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC5D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;;;;;;;;;;OAWG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CAC5B;AAsCD;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,MAAM,CAAC,EACrB,GAAG,EACH,aAAa,EAAE,MAAM,EACrB,WAAW,EACX,IAAI,EACJ,IAAW,EACX,GAAG,EACH,MAAM,EACN,OAAc,EACd,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,WAAW,+BAqJb;yBAnKe,MAAM"}
@@ -4,7 +4,8 @@
4
4
 
5
5
  /**
6
6
  * @file Avatar.tsx
7
- * @input Uses React, HTMLAttributes, ReactNode, useState
7
+ * @input Uses React, HTMLAttributes, ReactNode, useState; useTooltip
8
+ * (Tooltip hook) for the optional name-on-hover tooltip
8
9
  * @output Exports Avatar component, AvatarProps, AvatarSize types
9
10
  * @position Core implementation; consumed by index.ts
10
11
  *
@@ -20,8 +21,9 @@ import "../theme/tokens.stylex.js";
20
21
  import { colorVars, typographyVars, fontWeightVars, radiusVars } from "../theme/tokens.stylex.js";
21
22
  import { AvatarSizeContext } from "./AvatarSizeContext.js";
22
23
  import { useAvatarGroup } from "../AvatarGroup/AvatarGroupContext.js";
23
- import { mergeProps } from "../utils/index.js";
24
+ import { mergeProps, mergeRefs } from "../utils/index.js";
24
25
  import { themeProps } from "../utils/themeProps.js";
26
+ import { useTooltip } from "../Tooltip/useTooltip.js";
25
27
 
26
28
  /**
27
29
  * The offset ratio for positioning elements on a circle's edge at 45°.
@@ -35,7 +37,7 @@ import { themeProps } from "../utils/themeProps.js";
35
37
  *
36
38
  * This constant represents that ratio: (1 - 1/√2) / 2 ≈ 0.146
37
39
  */
38
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
40
+ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
39
41
  const CIRCLE_EDGE_OFFSET_RATIO = (1 - 1 / Math.SQRT2) / 2;
40
42
 
41
43
  /**
@@ -122,6 +124,11 @@ const styles = {
122
124
  status: {
123
125
  kVAEAm: "x10l6tqk",
124
126
  $$css: true
127
+ },
128
+ focusable: {
129
+ kI3sdo: "x17nn4n9",
130
+ kInvED: "x1wfwxd8 x7s97pk",
131
+ $$css: true
125
132
  }
126
133
  };
127
134
 
@@ -229,6 +236,8 @@ function DefaultIcon({
229
236
  * <Avatar src="/user.jpg" name="John Doe" />
230
237
  * <Avatar name="Jane Smith" size="xl" />
231
238
  * <Avatar src="/user.jpg" status={<OnlineIndicator />} />
239
+ * <Avatar name="jsmith" tooltip="Jane Smith, Staff Engineer" />
240
+ * <Avatar name="Jane" tooltip={false} />
232
241
  * ```
233
242
  */
234
243
  export function Avatar({
@@ -239,6 +248,7 @@ export function Avatar({
239
248
  size = 'md',
240
249
  src,
241
250
  status,
251
+ tooltip = true,
242
252
  xstyle,
243
253
  className,
244
254
  style,
@@ -262,18 +272,54 @@ export function Avatar({
262
272
  const avatarGroup = useAvatarGroup();
263
273
  const resolvedSize = avatarGroup?.size ?? size;
264
274
  const numericSize = useMemo(() => resolveSize(resolvedSize), [resolvedSize]);
265
- return /*#__PURE__*/_jsx(AvatarSizeContext, {
275
+
276
+ // Resolve the tooltip content:
277
+ // - `false` → no tooltip
278
+ // - a string → that string
279
+ // - `true` / omitted → the `name` (a whitespace-only name yields nothing)
280
+ // Note: the *visible* tooltip prefers `name` (not `alt`); the *accessible
281
+ // name* on the root still uses `alt || name` above, independent of this.
282
+ const tooltipContent = tooltip === false ? undefined : typeof tooltip === 'string' ? tooltip : name;
283
+ const trimmedTooltip = tooltipContent?.trim();
284
+ const showTooltip = trimmedTooltip != null && trimmedTooltip !== '';
285
+ // Whether the tooltip text is a consumer-authored override (a custom string)
286
+ // rather than the default name. A custom description is worth wiring to
287
+ // `aria-describedby` (it adds information, matching Button); the default name
288
+ // tooltip is visual-only — its text duplicates the root `aria-label`, so
289
+ // describing it too would double-announce the same name (OQ-4).
290
+ const isCustomTooltip = typeof tooltip === 'string';
291
+
292
+ // Own the name tooltip via the Tooltip hook (the Button pattern), which
293
+ // returns `describedBy` as a value we choose whether to apply — the only way
294
+ // to satisfy the per-case aria-describedby rule (default name: none; custom
295
+ // string: describe) without editing Tooltip. `focusTrigger: 'auto'` shows the
296
+ // tooltip on keyboard focus once the root is made focusable (below).
297
+ const tooltipHook = useTooltip({
298
+ placement: 'above',
299
+ isEnabled: showTooltip
300
+ });
301
+ const rootRef = mergeRefs(ref, showTooltip ? tooltipHook.ref : undefined);
302
+ const describedByProp = showTooltip && isCustomTooltip ? {
303
+ 'aria-describedby': [props['aria-describedby'], tooltipHook.describedBy].filter(Boolean).join(' ') || undefined
304
+ } : null;
305
+ const avatarElement = /*#__PURE__*/_jsx(AvatarSizeContext, {
266
306
  value: numericSize,
267
307
  children: /*#__PURE__*/_jsxs("div", {
268
308
  ...props,
269
- ref: ref,
309
+ ref: rootRef,
270
310
  role: isDecorative ? 'presentation' : 'img',
271
311
  "aria-label": isDecorative ? undefined : accessibleName,
272
- "aria-hidden": isDecorative || undefined,
312
+ "aria-hidden": isDecorative || undefined
313
+ // The root is a div[role="img"], not natively focusable. When a name
314
+ // tooltip is active, add a tab stop so keyboard users can reveal it
315
+ // (WCAG 1.4.13 / 2.1.1) — matching Timestamp/Button. Only while active.
316
+ ,
317
+ tabIndex: showTooltip ? 0 : undefined,
273
318
  "data-testid": testId,
319
+ ...describedByProp,
274
320
  ...mergeProps(themeProps('avatar', {
275
321
  size: resolvedSize
276
- }), stylex.props(styles.wrapper, avatarGroup && groupStyles.ring, avatarGroup && groupStyles.overlap, avatarGroup && groupDynamicStyles.overlap(-avatarGroup.overlap), xstyle), className, style),
322
+ }), stylex.props(styles.wrapper, showTooltip && styles.focusable, avatarGroup && groupStyles.ring, avatarGroup && groupStyles.overlap, avatarGroup && groupDynamicStyles.overlap(-avatarGroup.overlap), xstyle), className, style),
277
323
  children: [/*#__PURE__*/_jsxs("div", {
278
324
  ...stylex.props(styles.content, dynamicStyles.size(numericSize)),
279
325
  children: [showImage && /*#__PURE__*/_jsx("img", {
@@ -307,5 +353,15 @@ export function Avatar({
307
353
  })]
308
354
  })
309
355
  });
356
+ if (!showTooltip) {
357
+ return avatarElement;
358
+ }
359
+
360
+ // Render the tooltip as a sibling (no wrapper DOM) — the hook's ref is already
361
+ // attached to the root via `rootRef` above. `trimmedTooltip` is guaranteed
362
+ // non-empty here.
363
+ return /*#__PURE__*/_jsxs(_Fragment, {
364
+ children: [avatarElement, tooltipHook.renderTooltip(trimmedTooltip)]
365
+ });
310
366
  }
311
367
  Avatar.displayName = 'Avatar';
@@ -24,6 +24,13 @@ import type { BaseProps } from '../BaseProps';
24
24
  * }
25
25
  * }
26
26
  * ```
27
+ *
28
+ * Custom variants render no background fill, no ink colour, and no built-in
29
+ * shape glyph — the theme must supply the fill and, if it passes an `icon`,
30
+ * a `color` for it to paint with. It should also supply a non-colour mark
31
+ * so the status is not distinguishable by colour alone (a WCAG 1.4.1
32
+ * failure): pass `icon`, or theme a glyph onto the dot via
33
+ * `.astryx-avatar-status-dot[data-variant="..."]` (e.g. a `::before` mark).
27
34
  */
28
35
  export interface AvatarStatusDotVariantMap {
29
36
  success: true;
@@ -37,12 +44,14 @@ export type AvatarStatusDotVariant = keyof AvatarStatusDotVariantMap;
37
44
  export interface AvatarStatusDotProps extends BaseProps<HTMLDivElement> {
38
45
  ref?: React.Ref<HTMLDivElement>;
39
46
  /**
40
- * The semantic color variant of the dot.
41
- * - `success` — green dot (e.g. online, accepted)
42
- * - `neutral` — gray dot (e.g. offline, pending)
43
- * - `error` — red dot (e.g. busy, rejected)
47
+ * The semantic variant of the dot. Each variant pairs a colour with a
48
+ * distinct built-in shape so status is never conveyed by colour alone
49
+ * (WCAG 2.1 SC 1.4.1):
50
+ * - `success` — filled green dot (e.g. online, accepted)
51
+ * - `neutral` — grey ring (e.g. away, offline, pending)
52
+ * - `error` — red dot with a minus bar (e.g. busy, do not disturb)
44
53
  *
45
- * Matches the `variant` convention from `StatusDot`.
54
+ * Matches the `variant` naming convention from `StatusDot`.
46
55
  * @default 'success'
47
56
  */
48
57
  variant?: AvatarStatusDotVariant;
@@ -50,6 +59,11 @@ export interface AvatarStatusDotProps extends BaseProps<HTMLDivElement> {
50
59
  * Accessible label for the status dot.
51
60
  * Describes the meaning of the indicator for screen readers
52
61
  * (e.g. "Online", "Accepted", "John Doe is busy").
62
+ *
63
+ * Note: inside an Avatar the label is currently not announced — the
64
+ * Avatar root is `role="img"`, which prunes descendant semantics.
65
+ * Pass it anyway; composing status into the avatar's accessible name
66
+ * is a planned Avatar-level fix.
53
67
  */
54
68
  label?: string;
55
69
  /**
@@ -58,6 +72,14 @@ export interface AvatarStatusDotProps extends BaseProps<HTMLDivElement> {
58
72
  * The icon is automatically sized to fit the dot and hidden
59
73
  * at the smallest avatar sizes where there isn't enough room.
60
74
  *
75
+ * A rendered icon replaces the variant's built-in shape glyph, so use a
76
+ * different icon per status — the same icon on every variant leaves the
77
+ * statuses distinguishable by colour alone (WCAG 1.4.1). At the smallest
78
+ * avatar sizes the built-in glyph still shows instead of the icon.
79
+ * Booleans and empty strings are ignored (safe for `cond && <Icon />`),
80
+ * but a component that renders nothing still counts as an icon and
81
+ * suppresses the glyph.
82
+ *
61
83
  * @example
62
84
  * ```
63
85
  * <AvatarStatusDot variant="success" label="Verified" icon={<CheckIcon />} />
@@ -69,6 +91,12 @@ export interface AvatarStatusDotProps extends BaseProps<HTMLDivElement> {
69
91
  * A status indicator dot that automatically scales to match the parent
70
92
  * Avatar's size.
71
93
  *
94
+ * Each variant pairs a colour with a distinct built-in shape (filled dot,
95
+ * ring, minus bar) so status stays distinguishable without colour
96
+ * perception (WCAG 2.1 SC 1.4.1). Themes can target the shape glyph via
97
+ * the `astryx-avatar-status-dot-glyph` class and its `data-shape`
98
+ * attribute.
99
+ *
72
100
  * Must be used inside an Avatar's `status` prop so it can read
73
101
  * the avatar size from context.
74
102
  *
@@ -1 +1 @@
1
- {"version":3,"file":"AvatarStatusDot.d.ts","sourceRoot":"","sources":["../../src/Avatar/AvatarStatusDot.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAE,EAAM,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AACjD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAqC5C;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,yBAAyB;IACxC,OAAO,EAAE,IAAI,CAAC;IACd,OAAO,EAAE,IAAI,CAAC;IACd,KAAK,EAAE,IAAI,CAAC;CACb;AAED;;GAEG;AACH,MAAM,MAAM,sBAAsB,GAAG,MAAM,yBAAyB,CAAC;AAErE,MAAM,WAAW,oBAAqB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACrE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,sBAAsB,CAAC;IACjC;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;;;;;OAUG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAkDD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,eAAe,CAAC,EAC9B,GAAG,EACH,OAAmB,EACnB,KAAK,EACL,IAAI,EACJ,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,oBAAoB,qBA6BtB;yBAtCe,eAAe"}
1
+ {"version":3,"file":"AvatarStatusDot.d.ts","sourceRoot":"","sources":["../../src/Avatar/AvatarStatusDot.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAE,EAAM,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AACjD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAiD5C;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,WAAW,yBAAyB;IACxC,OAAO,EAAE,IAAI,CAAC;IACd,OAAO,EAAE,IAAI,CAAC;IACd,KAAK,EAAE,IAAI,CAAC;CACb;AAED;;GAEG;AACH,MAAM,MAAM,sBAAsB,GAAG,MAAM,yBAAyB,CAAC;AAErE,MAAM,WAAW,oBAAqB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACrE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;;;;;;;;OAUG;IACH,OAAO,CAAC,EAAE,sBAAsB,CAAC;IACjC;;;;;;;;;OASG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;;;;;;;;;;;;;OAkBG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AA2JD;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,wBAAgB,eAAe,CAAC,EAC9B,GAAG,EACH,OAAmB,EACnB,KAAK,EACL,IAAI,EACJ,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,oBAAoB,qBAyCtB;yBAlDe,eAAe"}
@@ -19,45 +19,57 @@ import * as stylex from '@stylexjs/stylex';
19
19
  import "../theme/tokens.stylex.js";
20
20
  import { colorVars, radiusVars } from "../theme/tokens.stylex.js";
21
21
  import { AvatarSizeContext } from "./AvatarSizeContext.js";
22
- import { mergeProps } from "../utils/index.js";
22
+ import { isRenderable, mergeProps } from "../utils/index.js";
23
23
  import { themeProps } from "../utils/themeProps.js";
24
24
 
25
25
  /**
26
- * Resolves the status dot size, border width, and icon size based on the
27
- * avatar size.
26
+ * Discrete size tier of the status dot, derived from the avatar size.
27
+ * Keys the built-in shape glyph's stroke weight — see `GLYPH_STROKE_WIDTH`.
28
+ */
29
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
30
+ /**
31
+ * Resolves the status dot size, border width, icon size, and size tier
32
+ * based on the avatar size.
28
33
  *
29
34
  * Uses discrete size tiers rather than a continuous ratio so the dot
30
35
  * looks intentional at every avatar size:
31
36
  *
32
- * | Avatar size | Dot | Border | Icon |
33
- * |--------------|------|--------|------|
34
- * | ≤ 36px | 10px | 1px | — |
35
- * | 40–72px | 20px | 2px | 12px |
36
- * | ≥ 96px | 32px | 4px | 18px |
37
+ * | Avatar size | Tier | Dot | Border | Icon | Field | Glyph stroke |
38
+ * |--------------|--------|------|--------|------|-------|--------------|
39
+ * | ≤ 36px | small | 10px | 1px | — | 8px | 1px |
40
+ * | 40–72px | medium | 20px | 2px | 12px | 16px | 1.5px |
41
+ * | ≥ 96px | large | 32px | 4px | 18px | 24px | 2px |
42
+ *
43
+ * "Field" is the dot's inner field — the dot minus both borders — that the
44
+ * shape glyph is drawn into; see `GLYPH_STROKE_WIDTH` for the stroke ladder.
37
45
  *
38
46
  * Icons are not rendered at the smallest tier — there isn't enough
39
- * room for them to be legible.
47
+ * room for them to be legible. The built-in shape glyphs (see
48
+ * `glyphShapeMap`) do render there, so status stays distinguishable
49
+ * without colour at every size.
40
50
  */
41
- import { jsx as _jsx } from "react/jsx-runtime";
42
51
  function resolveStatusDotSize(avatarSize) {
43
52
  if (avatarSize <= 36) {
44
53
  return {
45
54
  dotSize: 10,
46
55
  borderWidth: 1,
47
- iconSize: 0
56
+ iconSize: 0,
57
+ tier: 'small'
48
58
  };
49
59
  }
50
60
  if (avatarSize <= 72) {
51
61
  return {
52
62
  dotSize: 20,
53
63
  borderWidth: 2,
54
- iconSize: 12
64
+ iconSize: 12,
65
+ tier: 'medium'
55
66
  };
56
67
  }
57
68
  return {
58
69
  dotSize: 32,
59
70
  borderWidth: 4,
60
- iconSize: 18
71
+ iconSize: 18,
72
+ tier: 'large'
61
73
  };
62
74
  }
63
75
 
@@ -73,6 +85,13 @@ function resolveStatusDotSize(avatarSize) {
73
85
  * }
74
86
  * }
75
87
  * ```
88
+ *
89
+ * Custom variants render no background fill, no ink colour, and no built-in
90
+ * shape glyph — the theme must supply the fill and, if it passes an `icon`,
91
+ * a `color` for it to paint with. It should also supply a non-colour mark
92
+ * so the status is not distinguishable by colour alone (a WCAG 1.4.1
93
+ * failure): pass `icon`, or theme a glyph onto the dot via
94
+ * `.astryx-avatar-status-dot[data-variant="..."]` (e.g. a `::before` mark).
76
95
  */
77
96
 
78
97
  /**
@@ -92,21 +111,23 @@ const styles = {
92
111
  },
93
112
  success: {
94
113
  kWkggS: "xdsz4j9",
114
+ kMwMTN: "xrkvqaz",
95
115
  $$css: true
96
116
  },
97
117
  neutral: {
98
- kWkggS: "xdomwnj",
118
+ kWkggS: "x10xzikg",
119
+ kMwMTN: "xv1l7n4",
99
120
  $$css: true
100
121
  },
101
122
  error: {
102
123
  kWkggS: "x1pjz0fi",
124
+ kMwMTN: "xrkvqaz",
103
125
  $$css: true
104
126
  },
105
127
  icon: {
106
128
  k1xSpc: "x78zum5",
107
129
  kGNEyG: "x6s0dn4",
108
130
  kjj79g: "xl56j7k",
109
- kMwMTN: "xrkvqaz",
110
131
  kLWn49: "x14ju556",
111
132
  $$css: true
112
133
  }
@@ -137,10 +158,105 @@ const variantStyleMap = {
137
158
  error: styles.error
138
159
  };
139
160
 
161
+ /**
162
+ * Built-in shape glyph per variant, so each status differs by shape and not
163
+ * only by colour (WCAG 2.1 SC 1.4.1). The glyph is a stroked inline SVG
164
+ * painted in `currentColor`:
165
+ * - `ring` — a stroked circle on a surface plate; the dot reads as hollow
166
+ * (away/offline).
167
+ * - `minus` — a round-capped bar across the filled dot; the dot reads as
168
+ * "do not disturb" (busy).
169
+ *
170
+ * `success` stays the plain filled dot — filled, hollow, and barred are the
171
+ * three distinct fill topologies. Custom augmented variants have no entry
172
+ * and render no glyph; see the `AvatarStatusDotVariantMap` docs.
173
+ */
174
+
175
+ const glyphShapeMap = {
176
+ neutral: 'ring',
177
+ error: 'minus'
178
+ };
179
+
180
+ /**
181
+ * Glyph stroke weight per tier, in px of the dot's inner field.
182
+ *
183
+ * Roughly `field / 12`, floored at 1px so the smallest tier stays visible.
184
+ * That lands on the 1 / 1.5 / 2 ladder the rest of the system draws with —
185
+ * `Icon`'s default set strokes at 1.5 in a 24 viewBox, as does the
186
+ * `CheckboxInput` checkmark — rather than the 25% band a CSS box cutout
187
+ * produced, which was several times heavier than any other glyph we ship.
188
+ */
189
+ const GLYPH_STROKE_WIDTH = {
190
+ small: 1,
191
+ medium: 1.5,
192
+ large: 2
193
+ };
194
+
195
+ /** Fraction of the inner field the minus bar spans, cap to cap. */
196
+ const MINUS_BAR_SPAN = 0.75;
197
+
198
+ /**
199
+ * The built-in shape glyph, drawn as a stroked inline SVG in `currentColor`.
200
+ *
201
+ * Stroking (rather than a CSS box) is what buys sub-pixel control and round
202
+ * line caps, so the mark stays intentional at every tier — including the
203
+ * 10px dot, where a box cutout can only land on whole pixels.
204
+ *
205
+ * `viewBox` is one user unit per px of the inner field, so every value here
206
+ * is literal px.
207
+ */
208
+ function StatusDotGlyph({
209
+ shape,
210
+ field,
211
+ stroke
212
+ }) {
213
+ const center = field / 2;
214
+ return /*#__PURE__*/_jsx("svg", {
215
+ "aria-hidden": "true",
216
+ viewBox: `0 0 ${field} ${field}`,
217
+ width: field,
218
+ height: field,
219
+ fill: "none",
220
+ ...themeProps('avatar-status-dot-glyph', {
221
+ shape
222
+ }),
223
+ children: shape === 'ring' ?
224
+ /*#__PURE__*/
225
+ // Radius is to the stroke centreline, so the ring's outer edge lands
226
+ // exactly on the inner field and never clips against the border.
227
+ _jsx("circle", {
228
+ cx: center,
229
+ cy: center,
230
+ r: (field - stroke) / 2,
231
+ fill: "none",
232
+ stroke: "currentColor",
233
+ strokeWidth: stroke
234
+ }) :
235
+ /*#__PURE__*/
236
+ // Ends inset by half the stroke so the round caps land inside the
237
+ // span rather than overhanging it.
238
+ _jsx("line", {
239
+ x1: field * (1 - MINUS_BAR_SPAN) / 2 + stroke / 2,
240
+ y1: center,
241
+ x2: field * (1 + MINUS_BAR_SPAN) / 2 - stroke / 2,
242
+ y2: center,
243
+ stroke: "currentColor",
244
+ strokeWidth: stroke,
245
+ strokeLinecap: "round"
246
+ })
247
+ });
248
+ }
249
+
140
250
  /**
141
251
  * A status indicator dot that automatically scales to match the parent
142
252
  * Avatar's size.
143
253
  *
254
+ * Each variant pairs a colour with a distinct built-in shape (filled dot,
255
+ * ring, minus bar) so status stays distinguishable without colour
256
+ * perception (WCAG 2.1 SC 1.4.1). Themes can target the shape glyph via
257
+ * the `astryx-avatar-status-dot-glyph` class and its `data-shape`
258
+ * attribute.
259
+ *
144
260
  * Must be used inside an Avatar's `status` prop so it can read
145
261
  * the avatar size from context.
146
262
  *
@@ -172,9 +288,14 @@ export function AvatarStatusDot({
172
288
  const {
173
289
  dotSize,
174
290
  borderWidth,
175
- iconSize
291
+ iconSize,
292
+ tier
176
293
  } = resolveStatusDotSize(avatarSize);
177
- return /*#__PURE__*/_jsx("div", {
294
+ const showsIcon = isRenderable(icon) && iconSize > 0;
295
+ // A rendered icon is itself a non-colour mark; overlaying both cutouts in
296
+ // the dot's small inner field would make each illegible.
297
+ const glyphShape = showsIcon ? undefined : glyphShapeMap[variant];
298
+ return /*#__PURE__*/_jsxs("div", {
178
299
  ...props,
179
300
  ref: ref,
180
301
  ...(label ? {
@@ -184,11 +305,15 @@ export function AvatarStatusDot({
184
305
  ...mergeProps(themeProps('avatar-status-dot', {
185
306
  variant
186
307
  }), stylex.props(styles.dot, variantStyleMap[variant], dynamicStyles.size(dotSize, borderWidth), xstyle), className, style),
187
- children: icon && iconSize > 0 && /*#__PURE__*/_jsx("span", {
308
+ children: [showsIcon && /*#__PURE__*/_jsx("span", {
188
309
  "aria-hidden": "true",
189
310
  ...stylex.props(styles.icon, dynamicStyles.iconSize(iconSize)),
190
311
  children: icon
191
- })
312
+ }), glyphShape && /*#__PURE__*/_jsx(StatusDotGlyph, {
313
+ shape: glyphShape,
314
+ field: dotSize - borderWidth * 2,
315
+ stroke: GLYPH_STROKE_WIDTH[tier]
316
+ })]
192
317
  });
193
318
  }
194
319
  AvatarStatusDot.displayName = 'AvatarStatusDot';
@@ -28,6 +28,7 @@
28
28
  */
29
29
  import { type ReactNode } from 'react';
30
30
  import type { BaseProps } from '../BaseProps';
31
+ import type { Elevation } from '../utils/types';
31
32
  /**
32
33
  * Extensible status map for Banner.
33
34
  *
@@ -125,6 +126,13 @@ export interface BannerProps extends BaseProps<HTMLDivElement> {
125
126
  * @default 'card'
126
127
  */
127
128
  container?: BannerContainer;
129
+ /**
130
+ * Resting elevation — the shadow depth the banner sits at. Use for a
131
+ * floating banner that hovers above content. `none` is the default inline
132
+ * banner.
133
+ * @default 'none'
134
+ */
135
+ elevation?: Elevation;
128
136
  /**
129
137
  * Whether the content area (children) starts expanded.
130
138
  * Only relevant when children are provided.
@@ -183,7 +191,7 @@ export interface BannerProps extends BaseProps<HTMLDivElement> {
183
191
  * </Banner>
184
192
  * ```
185
193
  */
186
- export declare function Banner({ status, title, description, icon, isDismissable, onDismiss, endContent, container, defaultIsExpanded, children, xstyle, className, style, ref, ...rest }: BannerProps): import("react").JSX.Element | null;
194
+ export declare function Banner({ status, title, description, icon, isDismissable, onDismiss, endContent, container, elevation, defaultIsExpanded, children, xstyle, className, style, ref, ...rest }: BannerProps): import("react").JSX.Element | null;
187
195
  export declare namespace Banner {
188
196
  var displayName: string;
189
197
  }
@@ -1 +1 @@
1
- {"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../src/Banner/Banner.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AAEH,OAAO,EAAkB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAEtD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAuB5C;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,IAAI,CAAC;IACX,OAAO,EAAE,IAAI,CAAC;IACd,KAAK,EAAE,IAAI,CAAC;IACZ,OAAO,EAAE,IAAI,CAAC;CACf;AAED;;;GAGG;AACH,MAAM,MAAM,YAAY,GAAG,MAAM,eAAe,CAAC;AAEjD;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,IAAI,CAAC;IACX,OAAO,EAAE,IAAI,CAAC;CACf;AAED;;;;;;GAMG;AACH,MAAM,MAAM,eAAe,GAAG,MAAM,kBAAkB,CAAC;AAEvD,MAAM,WAAW,WAAY,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC5D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,MAAM,EAAE,YAAY,CAAC;IACrB;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC;IACjB;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB;;;;;;;;OAQG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AA8JD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,wBAAgB,MAAM,CAAC,EACrB,MAAM,EACN,KAAK,EACL,WAAW,EACX,IAAI,EACJ,aAAqB,EACrB,SAAS,EACT,UAAU,EACV,SAAkB,EAClB,iBAAyB,EACzB,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,WAAW,sCA0Ib;yBA1Je,MAAM"}
1
+ {"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../src/Banner/Banner.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AAEH,OAAO,EAAkB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAEtD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAgB5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAS9C;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,IAAI,CAAC;IACX,OAAO,EAAE,IAAI,CAAC;IACd,KAAK,EAAE,IAAI,CAAC;IACZ,OAAO,EAAE,IAAI,CAAC;CACf;AAED;;;GAGG;AACH,MAAM,MAAM,YAAY,GAAG,MAAM,eAAe,CAAC;AAEjD;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,IAAI,CAAC;IACX,OAAO,EAAE,IAAI,CAAC;CACf;AAED;;;;;;GAMG;AACH,MAAM,MAAM,eAAe,GAAG,MAAM,kBAAkB,CAAC;AAEvD,MAAM,WAAW,WAAY,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC5D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,MAAM,EAAE,YAAY,CAAC;IACrB;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC;IACjB;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB;;;;;;;;OAQG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B;;;;;OAKG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AA+KD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,wBAAgB,MAAM,CAAC,EACrB,MAAM,EACN,KAAK,EACL,WAAW,EACX,IAAI,EACJ,aAAqB,EACrB,SAAS,EACT,UAAU,EACV,SAAkB,EAClB,SAAkB,EAClB,iBAAyB,EACzB,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,WAAW,sCAmJb;yBApKe,MAAM"}