@astryxdesign/core 0.1.4-canary.fd7ab46 → 0.1.4

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 (579) hide show
  1. package/dist/AlertDialog/AlertDialog.d.ts +1 -1
  2. package/dist/AlertDialog/AlertDialog.d.ts.map +1 -1
  3. package/dist/AlertDialog/AlertDialog.js +18 -20
  4. package/dist/AlertDialog/useImperativeAlertDialog.js +3 -3
  5. package/dist/AppShell/AppShell.d.ts +1 -1
  6. package/dist/AppShell/AppShell.d.ts.map +1 -1
  7. package/dist/AppShell/AppShell.js +53 -55
  8. package/dist/AspectRatio/AspectRatio.d.ts +10 -48
  9. package/dist/AspectRatio/AspectRatio.d.ts.map +1 -1
  10. package/dist/AspectRatio/AspectRatio.js +12 -33
  11. package/dist/AspectRatio/index.d.ts +1 -1
  12. package/dist/AspectRatio/index.d.ts.map +1 -1
  13. package/dist/Avatar/Avatar.d.ts.map +1 -1
  14. package/dist/Avatar/Avatar.js +25 -27
  15. package/dist/Avatar/AvatarStatusDot.js +5 -5
  16. package/dist/AvatarGroup/AvatarGroup.js +5 -5
  17. package/dist/AvatarGroup/AvatarGroupOverflow.js +5 -5
  18. package/dist/Badge/Badge.js +3 -3
  19. package/dist/Banner/Banner.d.ts.map +1 -1
  20. package/dist/Banner/Banner.js +25 -32
  21. package/dist/Blockquote/Blockquote.js +7 -7
  22. package/dist/Breadcrumbs/BreadcrumbItem.js +17 -17
  23. package/dist/Breadcrumbs/Breadcrumbs.js +7 -7
  24. package/dist/Button/Button.js +19 -19
  25. package/dist/ButtonGroup/ButtonGroup.js +7 -7
  26. package/dist/Calendar/Calendar.d.ts.map +1 -1
  27. package/dist/Calendar/Calendar.js +48 -68
  28. package/dist/Calendar/dayCellUtils.d.ts.map +1 -1
  29. package/dist/Calendar/styles.d.ts +2 -2
  30. package/dist/Calendar/styles.d.ts.map +1 -1
  31. package/dist/Calendar/styles.js +2 -2
  32. package/dist/Card/Card.d.ts +2 -4
  33. package/dist/Card/Card.d.ts.map +1 -1
  34. package/dist/Card/Card.js +10 -18
  35. package/dist/Carousel/Carousel.d.ts.map +1 -1
  36. package/dist/Carousel/Carousel.js +21 -24
  37. package/dist/Carousel/carousel.markers.stylex.d.ts +7 -0
  38. package/dist/Carousel/carousel.markers.stylex.d.ts.map +1 -0
  39. package/dist/Carousel/carousel.markers.stylex.js +12 -0
  40. package/dist/Center/Center.js +3 -3
  41. package/dist/Chat/ChatComposer.js +23 -23
  42. package/dist/Chat/ChatComposerDrawer.js +14 -14
  43. package/dist/Chat/ChatComposerInput.d.ts +1 -1
  44. package/dist/Chat/ChatComposerInput.d.ts.map +1 -1
  45. package/dist/Chat/ChatComposerInput.js +15 -27
  46. package/dist/Chat/ChatDictationButton.d.ts +1 -1
  47. package/dist/Chat/ChatDictationButton.d.ts.map +1 -1
  48. package/dist/Chat/ChatDictationButton.js +11 -13
  49. package/dist/Chat/ChatLayout.js +17 -17
  50. package/dist/Chat/ChatLayoutScrollButton.d.ts +1 -1
  51. package/dist/Chat/ChatLayoutScrollButton.d.ts.map +1 -1
  52. package/dist/Chat/ChatLayoutScrollButton.js +10 -12
  53. package/dist/Chat/ChatMessage.js +12 -12
  54. package/dist/Chat/ChatMessageBubble.js +7 -7
  55. package/dist/Chat/ChatMessageList.js +14 -14
  56. package/dist/Chat/ChatMessageMetadata.d.ts +1 -1
  57. package/dist/Chat/ChatMessageMetadata.d.ts.map +1 -1
  58. package/dist/Chat/ChatMessageMetadata.js +12 -14
  59. package/dist/Chat/ChatPastedTextToken.js +13 -13
  60. package/dist/Chat/ChatSendButton.js +3 -3
  61. package/dist/Chat/ChatSystemMessage.d.ts +1 -1
  62. package/dist/Chat/ChatSystemMessage.d.ts.map +1 -1
  63. package/dist/Chat/ChatSystemMessage.js +17 -17
  64. package/dist/Chat/ChatTokenizedText.d.ts +1 -1
  65. package/dist/Chat/ChatTokenizedText.d.ts.map +1 -1
  66. package/dist/Chat/ChatTokenizedText.js +15 -24
  67. package/dist/Chat/ChatToolCalls.d.ts.map +1 -1
  68. package/dist/Chat/ChatToolCalls.js +74 -81
  69. package/dist/Chat/index.d.ts +1 -1
  70. package/dist/Chat/index.d.ts.map +1 -1
  71. package/dist/Chat/useTriggerMenu.d.ts.map +1 -1
  72. package/dist/Chat/useTriggerMenu.js +15 -15
  73. package/dist/CheckboxInput/CheckboxInput.d.ts +1 -1
  74. package/dist/CheckboxInput/CheckboxInput.d.ts.map +1 -1
  75. package/dist/CheckboxInput/CheckboxInput.js +23 -25
  76. package/dist/CheckboxList/CheckboxList.js +9 -9
  77. package/dist/CheckboxList/CheckboxListItem.d.ts +1 -1
  78. package/dist/CheckboxList/CheckboxListItem.d.ts.map +1 -1
  79. package/dist/CheckboxList/CheckboxListItem.js +6 -8
  80. package/dist/Citation/Citation.js +10 -10
  81. package/dist/ClickableCard/ClickableCard.d.ts.map +1 -1
  82. package/dist/ClickableCard/ClickableCard.js +9 -32
  83. package/dist/Code/Code.js +3 -3
  84. package/dist/CodeBlock/CodeBlock.d.ts +1 -10
  85. package/dist/CodeBlock/CodeBlock.d.ts.map +1 -1
  86. package/dist/CodeBlock/CodeBlock.js +52 -88
  87. package/dist/Collapsible/Collapsible.d.ts +3 -9
  88. package/dist/Collapsible/Collapsible.d.ts.map +1 -1
  89. package/dist/Collapsible/Collapsible.js +22 -110
  90. package/dist/Collapsible/CollapsibleGroup.d.ts +7 -39
  91. package/dist/Collapsible/CollapsibleGroup.d.ts.map +1 -1
  92. package/dist/Collapsible/CollapsibleGroup.js +12 -73
  93. package/dist/Collapsible/CollapsibleGroupContext.d.ts +0 -31
  94. package/dist/Collapsible/CollapsibleGroupContext.d.ts.map +1 -1
  95. package/dist/Collapsible/CollapsibleGroupContext.js +3 -33
  96. package/dist/Collapsible/index.d.ts +0 -1
  97. package/dist/Collapsible/index.d.ts.map +1 -1
  98. package/dist/Collapsible/useCollapsible.d.ts +1 -4
  99. package/dist/Collapsible/useCollapsible.d.ts.map +1 -1
  100. package/dist/Collapsible/useCollapsible.js +6 -20
  101. package/dist/CommandPalette/CommandPalette.d.ts.map +1 -1
  102. package/dist/CommandPalette/CommandPalette.js +34 -36
  103. package/dist/CommandPalette/CommandPaletteEmpty.js +3 -3
  104. package/dist/CommandPalette/CommandPaletteFooter.js +16 -16
  105. package/dist/CommandPalette/CommandPaletteGroup.js +5 -5
  106. package/dist/CommandPalette/CommandPaletteInput.js +13 -13
  107. package/dist/CommandPalette/CommandPaletteItem.js +3 -3
  108. package/dist/CommandPalette/CommandPaletteList.js +3 -3
  109. package/dist/ContextMenu/ContextMenu.d.ts +2 -7
  110. package/dist/ContextMenu/ContextMenu.d.ts.map +1 -1
  111. package/dist/ContextMenu/ContextMenu.js +43 -76
  112. package/dist/DateInput/DateInput.js +18 -18
  113. package/dist/DateRangeInput/DateRangeInput.js +21 -21
  114. package/dist/DateTimeInput/DateTimeInput.d.ts +2 -5
  115. package/dist/DateTimeInput/DateTimeInput.d.ts.map +1 -1
  116. package/dist/DateTimeInput/DateTimeInput.js +26 -30
  117. package/dist/DateTimeInput/index.d.ts +1 -1
  118. package/dist/DateTimeInput/index.d.ts.map +1 -1
  119. package/dist/Dialog/Dialog.js +9 -9
  120. package/dist/Dialog/DialogHeader.js +16 -16
  121. package/dist/Dialog/useImperativeDialog.js +3 -3
  122. package/dist/Divider/Divider.js +7 -7
  123. package/dist/DropdownMenu/DropdownMenu.js +10 -10
  124. package/dist/DropdownMenu/DropdownMenuItem.d.ts +17 -2
  125. package/dist/DropdownMenu/DropdownMenuItem.d.ts.map +1 -1
  126. package/dist/DropdownMenu/DropdownMenuItem.js +3 -3
  127. package/dist/DropdownMenu/renderDropdownItems.js +10 -10
  128. package/dist/EmptyState/EmptyState.js +9 -9
  129. package/dist/Field/Field.js +17 -17
  130. package/dist/Field/FieldLabel.js +15 -15
  131. package/dist/Field/InputClearButton.js +5 -5
  132. package/dist/FieldStatus/FieldStatus.js +3 -3
  133. package/dist/FileInput/FileInput.js +29 -29
  134. package/dist/FormLayout/FormLayout.js +5 -5
  135. package/dist/Grid/Grid.d.ts +3 -4
  136. package/dist/Grid/Grid.d.ts.map +1 -1
  137. package/dist/Grid/Grid.js +12 -29
  138. package/dist/Grid/GridSpan.js +3 -3
  139. package/dist/HStack/HStack.js +3 -3
  140. package/dist/Heading/Heading.js +10 -10
  141. package/dist/HoverCard/HoverCard.js +9 -9
  142. package/dist/HoverCard/useHoverCard.d.ts +1 -5
  143. package/dist/HoverCard/useHoverCard.d.ts.map +1 -1
  144. package/dist/HoverCard/useHoverCard.js +3 -3
  145. package/dist/Icon/Icon.d.ts.map +1 -1
  146. package/dist/Icon/Icon.js +12 -16
  147. package/dist/Icon/defaultIcons.js +116 -116
  148. package/dist/IconButton/IconButton.js +3 -3
  149. package/dist/InputGroup/InputGroup.js +11 -11
  150. package/dist/InputGroup/InputGroupText.js +3 -3
  151. package/dist/Item/Item.js +18 -18
  152. package/dist/Kbd/Kbd.js +5 -5
  153. package/dist/Layer/LayerProvider.js +7 -7
  154. package/dist/Layer/useLayer.d.ts +2 -29
  155. package/dist/Layer/useLayer.d.ts.map +1 -1
  156. package/dist/Layer/useLayer.js +31 -44
  157. package/dist/Layout/Layout.js +21 -21
  158. package/dist/Layout/LayoutContent.js +3 -3
  159. package/dist/Layout/LayoutFooter.js +5 -5
  160. package/dist/Layout/LayoutHeader.js +5 -5
  161. package/dist/Layout/LayoutPanel.js +3 -3
  162. package/dist/Lightbox/Lightbox.d.ts.map +1 -1
  163. package/dist/Lightbox/Lightbox.js +31 -55
  164. package/dist/Lightbox/useLightbox.js +3 -3
  165. package/dist/Link/Link.js +15 -15
  166. package/dist/Link/LinkProvider.js +3 -3
  167. package/dist/Link/useLinkify.js +3 -3
  168. package/dist/List/List.js +11 -11
  169. package/dist/List/ListItem.js +11 -11
  170. package/dist/Markdown/Markdown.d.ts.map +1 -1
  171. package/dist/Markdown/Markdown.js +102 -102
  172. package/dist/MetadataList/MetadataList.js +10 -10
  173. package/dist/MetadataList/MetadataListItem.js +15 -15
  174. package/dist/MobileNav/MobileNav.js +15 -15
  175. package/dist/MobileNav/MobileNavToggle.js +5 -5
  176. package/dist/MoreMenu/MoreMenu.js +3 -3
  177. package/dist/MultiSelector/MultiSelector.js +56 -56
  178. package/dist/NavIcon/NavIcon.js +3 -3
  179. package/dist/NavMenu/NavHeadingMenu.js +5 -5
  180. package/dist/NavMenu/NavHeadingMenuItem.js +8 -8
  181. package/dist/NumberInput/NumberInput.d.ts.map +1 -1
  182. package/dist/NumberInput/NumberInput.js +32 -48
  183. package/dist/Outline/Outline.js +15 -15
  184. package/dist/OverflowList/OverflowList.js +8 -8
  185. package/dist/Overlay/Overlay.js +3 -3
  186. package/dist/Overlay/OverlayScrim.js +5 -5
  187. package/dist/Overlay/useOverlay.js +3 -3
  188. package/dist/Pagination/Pagination.d.ts +1 -1
  189. package/dist/Pagination/Pagination.d.ts.map +1 -1
  190. package/dist/Pagination/Pagination.js +72 -125
  191. package/dist/Popover/Popover.js +16 -16
  192. package/dist/Popover/usePopover.js +7 -7
  193. package/dist/PowerSearch/PowerSearch.d.ts.map +1 -1
  194. package/dist/PowerSearch/PowerSearch.js +92 -110
  195. package/dist/PowerSearch/PowerSearchEditPopover.js +84 -84
  196. package/dist/PowerSearch/PowerSearchFilterEditor.js +3 -3
  197. package/dist/PowerSearch/PowerSearchToken.js +5 -5
  198. package/dist/PowerSearch/PowerSearchValueEditor.js +54 -54
  199. package/dist/ProgressBar/ProgressBar.d.ts.map +1 -1
  200. package/dist/ProgressBar/ProgressBar.js +18 -25
  201. package/dist/RadioList/RadioList.js +7 -7
  202. package/dist/RadioList/RadioListItem.d.ts +1 -1
  203. package/dist/RadioList/RadioListItem.d.ts.map +1 -1
  204. package/dist/RadioList/RadioListItem.js +21 -24
  205. package/dist/Resizable/ResizeHandle.d.ts.map +1 -1
  206. package/dist/Resizable/ResizeHandle.js +10 -28
  207. package/dist/Section/Section.js +5 -5
  208. package/dist/SegmentedControl/SegmentedControl.d.ts +1 -1
  209. package/dist/SegmentedControl/SegmentedControl.d.ts.map +1 -1
  210. package/dist/SegmentedControl/SegmentedControl.js +10 -32
  211. package/dist/SegmentedControl/SegmentedControlItem.d.ts +1 -1
  212. package/dist/SegmentedControl/SegmentedControlItem.d.ts.map +1 -1
  213. package/dist/SegmentedControl/SegmentedControlItem.js +12 -18
  214. package/dist/SelectableCard/SelectableCard.js +5 -5
  215. package/dist/Selector/Selector.js +46 -46
  216. package/dist/Selector/SelectorOption.js +3 -3
  217. package/dist/SideNav/SideNav.d.ts.map +1 -1
  218. package/dist/SideNav/SideNav.js +34 -38
  219. package/dist/SideNav/SideNavCollapseButton.d.ts +1 -1
  220. package/dist/SideNav/SideNavCollapseButton.d.ts.map +1 -1
  221. package/dist/SideNav/SideNavCollapseButton.js +6 -8
  222. package/dist/SideNav/SideNavHeading.js +87 -87
  223. package/dist/SideNav/SideNavItem.js +42 -42
  224. package/dist/SideNav/SideNavSection.d.ts +1 -1
  225. package/dist/SideNav/SideNavSection.d.ts.map +1 -1
  226. package/dist/SideNav/SideNavSection.js +16 -18
  227. package/dist/Skeleton/Skeleton.js +3 -3
  228. package/dist/Slider/Slider.js +23 -23
  229. package/dist/Spinner/Spinner.js +9 -9
  230. package/dist/StatusDot/StatusDot.js +5 -5
  231. package/dist/Switch/Switch.d.ts +4 -8
  232. package/dist/Switch/Switch.d.ts.map +1 -1
  233. package/dist/Switch/Switch.js +29 -34
  234. package/dist/TabList/Tab.js +18 -18
  235. package/dist/TabList/TabList.js +5 -5
  236. package/dist/TabList/TabMenu.d.ts.map +1 -1
  237. package/dist/TabList/TabMenu.js +30 -57
  238. package/dist/TabList/tab.markers.stylex.d.ts +1 -1
  239. package/dist/Table/BaseTable.d.ts.map +1 -1
  240. package/dist/Table/BaseTable.js +39 -50
  241. package/dist/Table/Table.js +7 -7
  242. package/dist/Table/TableBody.d.ts +1 -1
  243. package/dist/Table/TableBody.d.ts.map +1 -1
  244. package/dist/Table/TableBody.js +5 -9
  245. package/dist/Table/TableCell.js +3 -3
  246. package/dist/Table/TableFooter.d.ts +1 -1
  247. package/dist/Table/TableFooter.d.ts.map +1 -1
  248. package/dist/Table/TableFooter.js +5 -9
  249. package/dist/Table/TableHeader.d.ts +1 -1
  250. package/dist/Table/TableHeader.d.ts.map +1 -1
  251. package/dist/Table/TableHeader.js +5 -9
  252. package/dist/Table/TableHeaderCell.js +3 -3
  253. package/dist/Table/TableRow.js +5 -5
  254. package/dist/Table/plugins/columnResize/useTableColumnResize.d.ts.map +1 -1
  255. package/dist/Table/plugins/columnResize/useTableColumnResize.js +11 -14
  256. package/dist/Table/plugins/filtering/useTableFiltering.js +71 -71
  257. package/dist/Table/plugins/pagination/paginateData.d.ts.map +1 -1
  258. package/dist/Table/plugins/pagination/paginateData.js +1 -5
  259. package/dist/Table/plugins/pagination/useTablePagination.js +7 -7
  260. package/dist/Table/plugins/rowExpansion/useTableRowExpansion.js +22 -22
  261. package/dist/Table/plugins/selection/useTableSelection.js +18 -18
  262. package/dist/Table/plugins/selection/useTableSelectionState.d.ts.map +1 -1
  263. package/dist/Table/plugins/selection/useTableSelectionState.js +1 -11
  264. package/dist/Table/plugins/sortable/useTableSortable.js +17 -17
  265. package/dist/Table/plugins/sortable/useTableSortableState.d.ts.map +1 -1
  266. package/dist/Table/plugins/sortable/useTableSortableState.js +4 -8
  267. package/dist/Table/tableContextMenu.js +9 -9
  268. package/dist/Text/Text.js +10 -10
  269. package/dist/TextArea/TextArea.js +14 -14
  270. package/dist/TextInput/TextInput.js +15 -15
  271. package/dist/Thumbnail/Thumbnail.d.ts +2 -3
  272. package/dist/Thumbnail/Thumbnail.d.ts.map +1 -1
  273. package/dist/Thumbnail/Thumbnail.js +29 -30
  274. package/dist/TimeInput/TimeInput.d.ts.map +1 -1
  275. package/dist/TimeInput/TimeInput.js +21 -26
  276. package/dist/Timestamp/Timestamp.d.ts +1 -1
  277. package/dist/Timestamp/Timestamp.d.ts.map +1 -1
  278. package/dist/Timestamp/Timestamp.js +26 -37
  279. package/dist/Toast/Toast.d.ts.map +1 -1
  280. package/dist/Toast/Toast.js +17 -25
  281. package/dist/Toast/ToastViewport.d.ts.map +1 -1
  282. package/dist/Toast/ToastViewport.js +11 -23
  283. package/dist/Toast/useToast.js +4 -4
  284. package/dist/ToggleButton/ToggleButton.js +12 -12
  285. package/dist/ToggleButton/ToggleButtonGroup.js +5 -5
  286. package/dist/Token/Token.js +21 -21
  287. package/dist/Tokenizer/Tokenizer.d.ts.map +1 -1
  288. package/dist/Tokenizer/Tokenizer.js +34 -36
  289. package/dist/Toolbar/Toolbar.js +18 -18
  290. package/dist/Tooltip/Tooltip.js +11 -11
  291. package/dist/Tooltip/useTooltip.d.ts +1 -5
  292. package/dist/Tooltip/useTooltip.d.ts.map +1 -1
  293. package/dist/Tooltip/useTooltip.js +3 -3
  294. package/dist/TopNav/TopNav.js +32 -32
  295. package/dist/TopNav/TopNavHeading.js +67 -67
  296. package/dist/TopNav/TopNavItem.js +5 -5
  297. package/dist/TopNav/TopNavMegaMenu.js +30 -30
  298. package/dist/TopNav/TopNavMegaMenuFeaturedCard.d.ts +1 -1
  299. package/dist/TopNav/TopNavMegaMenuFeaturedCard.d.ts.map +1 -1
  300. package/dist/TopNav/TopNavMegaMenuFeaturedCard.js +14 -25
  301. package/dist/TopNav/TopNavMegaMenuItem.js +16 -16
  302. package/dist/TopNav/TopNavMenu.js +32 -32
  303. package/dist/TreeList/TreeList.js +8 -8
  304. package/dist/TreeList/TreeListBranches.js +11 -11
  305. package/dist/TreeList/TreeListItem.js +30 -30
  306. package/dist/Typeahead/BaseTypeahead.d.ts.map +1 -1
  307. package/dist/Typeahead/BaseTypeahead.js +20 -23
  308. package/dist/Typeahead/Typeahead.js +12 -12
  309. package/dist/Typeahead/TypeaheadItem.js +10 -10
  310. package/dist/VStack/VStack.js +3 -3
  311. package/dist/astryx.css +0 -7
  312. package/dist/astryx.umd.js +60 -60
  313. package/dist/astryx.umd.js.map +4 -4
  314. package/dist/docs-types.d.ts +2 -8
  315. package/dist/docs-types.d.ts.map +1 -1
  316. package/dist/hooks/focusableSelector.d.ts +1 -1
  317. package/dist/hooks/focusableSelector.d.ts.map +1 -1
  318. package/dist/hooks/focusableSelector.js +1 -1
  319. package/dist/hooks/index.d.ts +0 -2
  320. package/dist/hooks/index.d.ts.map +1 -1
  321. package/dist/hooks/index.js +0 -1
  322. package/dist/hooks/useFocusTrap.d.ts +0 -3
  323. package/dist/hooks/useFocusTrap.d.ts.map +1 -1
  324. package/dist/hooks/useFocusTrap.js +1 -38
  325. package/dist/hooks/useInteractiveRole.d.ts +2 -6
  326. package/dist/hooks/useInteractiveRole.d.ts.map +1 -1
  327. package/dist/hooks/useInteractiveRole.js +2 -6
  328. package/dist/hooks/useKeyboardHint.js +9 -9
  329. package/dist/hooks/useStreamingText.d.ts +1 -3
  330. package/dist/hooks/useStreamingText.d.ts.map +1 -1
  331. package/dist/hooks/useStreamingText.js +5 -14
  332. package/dist/theme/MediaTheme.js +3 -3
  333. package/dist/theme/Theme.js +7 -7
  334. package/dist/theme/defineTheme.d.ts +1 -1
  335. package/dist/theme/defineTheme.d.ts.map +1 -1
  336. package/dist/theme/expandColorScale.d.ts.map +1 -1
  337. package/dist/theme/expandColorScale.js +3 -10
  338. package/dist/theme/hct.d.ts +15 -0
  339. package/dist/theme/hct.d.ts.map +1 -1
  340. package/dist/theme/hct.js +9 -9
  341. package/dist/theme/syntax/SyntaxTheme.js +5 -5
  342. package/dist/theme/tokens.d.ts +2 -10
  343. package/dist/theme/tokens.d.ts.map +1 -1
  344. package/dist/theme/tokens.js +4 -220
  345. package/dist/utils/index.d.ts +0 -3
  346. package/dist/utils/index.d.ts.map +1 -1
  347. package/dist/utils/index.js +1 -3
  348. package/dist/utils/timeParser.d.ts.map +1 -1
  349. package/dist/utils/timeParser.js +5 -8
  350. package/package.json +3 -3
  351. package/src/AlertDialog/AlertDialog.doc.mjs +0 -4
  352. package/src/AlertDialog/AlertDialog.tsx +0 -2
  353. package/src/AppShell/AppShell.tsx +0 -2
  354. package/src/AspectRatio/AspectRatio.doc.mjs +1 -28
  355. package/src/AspectRatio/AspectRatio.test.tsx +1 -142
  356. package/src/AspectRatio/AspectRatio.tsx +10 -70
  357. package/src/AspectRatio/index.ts +1 -5
  358. package/src/Avatar/Avatar.doc.mjs +0 -11
  359. package/src/Avatar/Avatar.test.tsx +1 -32
  360. package/src/Avatar/Avatar.tsx +20 -12
  361. package/src/Banner/Banner.doc.mjs +0 -8
  362. package/src/Banner/Banner.test.tsx +0 -38
  363. package/src/Banner/Banner.tsx +1 -8
  364. package/src/Calendar/Calendar.doc.mjs +1 -1
  365. package/src/Calendar/Calendar.test.tsx +17 -122
  366. package/src/Calendar/Calendar.tsx +5 -26
  367. package/src/Calendar/dayCellUtils.ts +1 -3
  368. package/src/Calendar/styles.ts +2 -12
  369. package/src/Card/Card.tsx +6 -16
  370. package/src/Carousel/Carousel.doc.mjs +12 -12
  371. package/src/Carousel/Carousel.test.tsx +0 -13
  372. package/src/Carousel/Carousel.tsx +2 -4
  373. package/src/Carousel/carousel.markers.stylex.ts +10 -0
  374. package/src/Chat/Chat.doc.mjs +1 -1
  375. package/src/Chat/ChatComposerInput.test.tsx +1 -27
  376. package/src/Chat/ChatComposerInput.tsx +15 -20
  377. package/src/Chat/ChatDictationButton.tsx +4 -4
  378. package/src/Chat/ChatLayoutScrollButton.tsx +1 -3
  379. package/src/Chat/ChatMessageMetadata.tsx +6 -4
  380. package/src/Chat/ChatSystemMessage.test.tsx +11 -26
  381. package/src/Chat/ChatSystemMessage.tsx +7 -7
  382. package/src/Chat/ChatTokenizedText.test.tsx +16 -29
  383. package/src/Chat/ChatTokenizedText.tsx +8 -15
  384. package/src/Chat/ChatToolCalls.test.tsx +0 -55
  385. package/src/Chat/ChatToolCalls.tsx +12 -10
  386. package/src/Chat/index.ts +4 -1
  387. package/src/Chat/useTriggerMenu.tsx +4 -1
  388. package/src/CheckboxInput/CheckboxInput.doc.mjs +3 -3
  389. package/src/CheckboxInput/CheckboxInput.test.tsx +4 -71
  390. package/src/CheckboxInput/CheckboxInput.tsx +0 -2
  391. package/src/CheckboxList/CheckboxList.test.tsx +0 -19
  392. package/src/CheckboxList/CheckboxListItem.tsx +2 -11
  393. package/src/Citation/Citation.doc.mjs +0 -5
  394. package/src/ClickableCard/ClickableCard.tsx +2 -45
  395. package/src/CodeBlock/CodeBlock.doc.mjs +2 -7
  396. package/src/CodeBlock/CodeBlock.test.tsx +3 -122
  397. package/src/CodeBlock/CodeBlock.tsx +4 -62
  398. package/src/Collapsible/Collapsible.doc.mjs +4 -8
  399. package/src/Collapsible/Collapsible.tsx +10 -86
  400. package/src/Collapsible/CollapsibleGroup.doc.mjs +3 -27
  401. package/src/Collapsible/CollapsibleGroup.test.tsx +0 -318
  402. package/src/Collapsible/CollapsibleGroup.tsx +9 -107
  403. package/src/Collapsible/CollapsibleGroupContext.tsx +2 -42
  404. package/src/Collapsible/index.ts +0 -4
  405. package/src/Collapsible/useCollapsible.ts +6 -20
  406. package/src/CommandPalette/CommandPalette.doc.mjs +0 -4
  407. package/src/CommandPalette/CommandPalette.tsx +3 -5
  408. package/src/CommandPalette/CommandPaletteEmpty.doc.mjs +0 -5
  409. package/src/CommandPalette/CommandPaletteGroup.doc.mjs +0 -10
  410. package/src/CommandPalette/CommandPaletteInput.doc.mjs +0 -6
  411. package/src/CommandPalette/CommandPaletteItem.doc.mjs +0 -6
  412. package/src/CommandPalette/CommandPaletteList.doc.mjs +0 -9
  413. package/src/ContextMenu/ContextMenu.doc.mjs +0 -15
  414. package/src/ContextMenu/ContextMenu.test.tsx +0 -87
  415. package/src/ContextMenu/ContextMenu.tsx +28 -87
  416. package/src/ContextMenu/ContextMenuItem.doc.mjs +0 -6
  417. package/src/DateInput/DateInput.test.tsx +20 -11
  418. package/src/DateRangeInput/DateRangeInput.test.tsx +44 -31
  419. package/src/DateTimeInput/DateTimeInput.doc.mjs +2 -3
  420. package/src/DateTimeInput/DateTimeInput.test.tsx +16 -118
  421. package/src/DateTimeInput/DateTimeInput.tsx +2 -8
  422. package/src/DateTimeInput/index.ts +0 -1
  423. package/src/Dialog/Dialog.doc.mjs +0 -4
  424. package/src/Dialog/DialogHeader.doc.mjs +0 -45
  425. package/src/DropdownMenu/DropdownMenu.doc.mjs +1 -1
  426. package/src/DropdownMenu/DropdownMenu.test.tsx +2 -22
  427. package/src/DropdownMenu/DropdownMenuItem.tsx +17 -5
  428. package/src/Field/Field.test.tsx +4 -1
  429. package/src/Field/FieldLabel.test.tsx +2 -2
  430. package/src/FormLayout/__snapshots__/FormLayout.test.tsx.snap +3 -0
  431. package/src/Grid/Grid.test.tsx +18 -43
  432. package/src/Grid/Grid.tsx +9 -26
  433. package/src/HoverCard/HoverCard.doc.mjs +6 -6
  434. package/src/HoverCard/useHoverCard.doc.mjs +5 -5
  435. package/src/HoverCard/useHoverCard.tsx +2 -9
  436. package/src/Icon/Icon.test.tsx +29 -41
  437. package/src/Icon/Icon.tsx +2 -6
  438. package/src/InputGroup/InputGroup.tsx +2 -2
  439. package/src/Item/Item.tsx +1 -1
  440. package/src/Layer/useLayer.doc.mjs +2 -2
  441. package/src/Layer/useLayer.test.tsx +2 -221
  442. package/src/Layer/useLayer.tsx +30 -69
  443. package/src/Layout/LayoutContent.doc.mjs +0 -12
  444. package/src/Layout/LayoutPanel.doc.mjs +0 -40
  445. package/src/Lightbox/Lightbox.doc.mjs +0 -5
  446. package/src/Lightbox/Lightbox.test.tsx +2 -123
  447. package/src/Lightbox/Lightbox.tsx +1 -29
  448. package/src/Markdown/Markdown.tsx +7 -9
  449. package/src/Markdown/parser.perf.test.ts +12 -34
  450. package/src/NavMenu/NavMenu.doc.mjs +0 -15
  451. package/src/NumberInput/NumberInput.test.tsx +3 -48
  452. package/src/NumberInput/NumberInput.tsx +15 -32
  453. package/src/Overlay/Overlay.doc.mjs +0 -6
  454. package/src/Pagination/Pagination.test.tsx +0 -162
  455. package/src/Pagination/Pagination.tsx +26 -80
  456. package/src/Popover/Popover.doc.mjs +6 -6
  457. package/src/Popover/Popover.test.tsx +0 -65
  458. package/src/Popover/usePopover.doc.mjs +1 -1
  459. package/src/PowerSearch/PowerSearch.doc.mjs +2 -2
  460. package/src/PowerSearch/PowerSearch.test.tsx +1 -109
  461. package/src/PowerSearch/PowerSearch.tsx +16 -37
  462. package/src/ProgressBar/ProgressBar.test.tsx +0 -30
  463. package/src/ProgressBar/ProgressBar.tsx +5 -12
  464. package/src/RadioList/RadioList.test.tsx +0 -19
  465. package/src/RadioList/RadioListItem.tsx +4 -9
  466. package/src/Resizable/ResizeHandle.tsx +4 -22
  467. package/src/SegmentedControl/SegmentedControl.doc.mjs +1 -1
  468. package/src/SegmentedControl/SegmentedControl.test.tsx +0 -192
  469. package/src/SegmentedControl/SegmentedControl.tsx +5 -27
  470. package/src/SegmentedControl/SegmentedControlItem.tsx +4 -9
  471. package/src/SelectableCard/SelectableCard.doc.mjs +1 -1
  472. package/src/Selector/Selector.test.tsx +1 -27
  473. package/src/SideNav/SideNav.doc.mjs +1 -7
  474. package/src/SideNav/SideNav.test.tsx +0 -66
  475. package/src/SideNav/SideNav.tsx +2 -6
  476. package/src/SideNav/SideNavCollapseButton.tsx +3 -4
  477. package/src/SideNav/SideNavSection.tsx +4 -6
  478. package/src/Switch/Switch.doc.mjs +7 -7
  479. package/src/Switch/Switch.test.tsx +3 -102
  480. package/src/Switch/Switch.tsx +7 -20
  481. package/src/TabList/TabList.test.tsx +1 -185
  482. package/src/TabList/TabMenu.tsx +9 -45
  483. package/src/Table/BaseTable.tsx +2 -13
  484. package/src/Table/Table.test.tsx +0 -87
  485. package/src/Table/TableBody.tsx +2 -15
  486. package/src/Table/TableFooter.tsx +2 -15
  487. package/src/Table/TableHeader.tsx +2 -15
  488. package/src/Table/plugins/columnResize/useTableColumnResize.test.tsx +0 -13
  489. package/src/Table/plugins/columnResize/useTableColumnResize.tsx +1 -3
  490. package/src/Table/plugins/pagination/paginateData.ts +1 -5
  491. package/src/Table/plugins/pagination/useTablePagination.test.tsx +0 -13
  492. package/src/Table/plugins/selection/useTableSelectionState.test.tsx +0 -23
  493. package/src/Table/plugins/selection/useTableSelectionState.tsx +6 -11
  494. package/src/Table/plugins/sortable/useTableSortableState.test.tsx +1 -35
  495. package/src/Table/plugins/sortable/useTableSortableState.tsx +4 -8
  496. package/src/TextArea/TextArea.test.tsx +3 -3
  497. package/src/TextInput/TextInput.test.tsx +3 -3
  498. package/src/Thumbnail/Thumbnail.test.tsx +2 -36
  499. package/src/Thumbnail/Thumbnail.tsx +2 -4
  500. package/src/TimeInput/TimeInput.test.tsx +0 -37
  501. package/src/TimeInput/TimeInput.tsx +1 -11
  502. package/src/Timestamp/Timestamp.doc.mjs +1 -1
  503. package/src/Timestamp/Timestamp.test.tsx +0 -52
  504. package/src/Timestamp/Timestamp.tsx +16 -30
  505. package/src/Toast/Toast.tsx +3 -11
  506. package/src/Toast/ToastViewport.test.tsx +0 -64
  507. package/src/Toast/ToastViewport.tsx +0 -12
  508. package/src/ToggleButton/ToggleButton.doc.mjs +0 -1
  509. package/src/Tokenizer/Tokenizer.doc.mjs +2 -2
  510. package/src/Tokenizer/Tokenizer.test.tsx +0 -54
  511. package/src/Tokenizer/Tokenizer.tsx +4 -5
  512. package/src/Tooltip/Tooltip.doc.mjs +6 -6
  513. package/src/Tooltip/useTooltip.doc.mjs +5 -5
  514. package/src/Tooltip/useTooltip.tsx +2 -12
  515. package/src/TopNav/TopNav.doc.mjs +1 -1
  516. package/src/TopNav/TopNav.test.tsx +7 -23
  517. package/src/TopNav/TopNavMegaMenuFeaturedCard.tsx +2 -9
  518. package/src/TreeList/TreeList.doc.mjs +2 -2
  519. package/src/Typeahead/BaseTypeahead.doc.mjs +0 -19
  520. package/src/Typeahead/BaseTypeahead.tsx +2 -5
  521. package/src/Typeahead/Typeahead.doc.mjs +1 -1
  522. package/src/Typeahead/Typeahead.test.tsx +1 -45
  523. package/src/docs-types.ts +1 -9
  524. package/src/hooks/focusableSelector.ts +1 -1
  525. package/src/hooks/index.ts +0 -3
  526. package/src/hooks/useFocusTrap.doc.mjs +2 -4
  527. package/src/hooks/useFocusTrap.test.tsx +1 -149
  528. package/src/hooks/useFocusTrap.ts +1 -50
  529. package/src/hooks/useInteractiveRole.ts +4 -12
  530. package/src/hooks/useStreamingText.test.ts +19 -54
  531. package/src/hooks/useStreamingText.ts +5 -16
  532. package/src/hooks/useTreeFocus.test.tsx +3 -1
  533. package/src/reset.css +0 -29
  534. package/src/theme/SyntaxTheme.doc.mjs +4 -4
  535. package/src/theme/defineTheme.ts +13 -4
  536. package/src/theme/derivedVarRegistry.test.ts +2 -2
  537. package/src/theme/expandColorScale.test.ts +0 -29
  538. package/src/theme/expandColorScale.ts +6 -11
  539. package/src/theme/hct.ts +17 -9
  540. package/src/theme/tokens.test.ts +9 -182
  541. package/src/theme/tokens.ts +4 -239
  542. package/src/theme/useTheme.test.tsx +0 -20
  543. package/src/utils/index.ts +0 -4
  544. package/src/utils/sharedResizeObserver.test.ts +2 -2
  545. package/src/utils/timeParser.test.ts +0 -13
  546. package/src/utils/timeParser.ts +5 -8
  547. package/dist/hooks/useHotkeys.d.ts +0 -51
  548. package/dist/hooks/useHotkeys.d.ts.map +0 -1
  549. package/dist/hooks/useHotkeys.js +0 -160
  550. package/dist/utils/color.d.ts +0 -42
  551. package/dist/utils/color.d.ts.map +0 -1
  552. package/dist/utils/color.js +0 -150
  553. package/dist/utils/composeEventHandlers.d.ts +0 -30
  554. package/dist/utils/composeEventHandlers.d.ts.map +0 -1
  555. package/dist/utils/composeEventHandlers.js +0 -40
  556. package/src/Chat/ChatDictationButton.test.tsx +0 -43
  557. package/src/Chat/ChatLayoutScrollButton.test.tsx +0 -33
  558. package/src/Chat/ChatMessageMetadata.test.tsx +0 -32
  559. package/src/Collapsible/Collapsible.test.tsx +0 -405
  560. package/src/FieldStatus/FieldStatus.test.tsx +0 -282
  561. package/src/InteractiveRoleContext/InteractiveRoleContext.test.tsx +0 -185
  562. package/src/Layout/Layout.test.tsx +0 -285
  563. package/src/Layout/LayoutSlots.test.tsx +0 -364
  564. package/src/Outline/parseOutlineFromMarkdown.test.ts +0 -80
  565. package/src/OverflowList/OverflowList.test.tsx +0 -416
  566. package/src/Overlay/Overlay.test.tsx +0 -356
  567. package/src/Resizable/ResizeHandle.test.tsx +0 -218
  568. package/src/SizeContext/SizeContext.test.tsx +0 -226
  569. package/src/__tests__/TestIcon.tsx +0 -26
  570. package/src/__tests__/fastRoleQueries.ts +0 -66
  571. package/src/docPropReferences.test.ts +0 -178
  572. package/src/hooks/useHotkeys.doc.mjs +0 -52
  573. package/src/hooks/useHotkeys.test.ts +0 -245
  574. package/src/hooks/useHotkeys.ts +0 -203
  575. package/src/utils/color.test.ts +0 -133
  576. package/src/utils/color.ts +0 -148
  577. package/src/utils/composeEventHandlers.test.ts +0 -71
  578. package/src/utils/composeEventHandlers.ts +0 -44
  579. package/src/utils/mergeProps.test.ts +0 -166
@@ -77,10 +77,6 @@ function ld(light: string, dark: string): string {
77
77
  return `light-dark(${light}, ${dark})`;
78
78
  }
79
79
 
80
- function accentWithAlpha(alpha: number): string {
81
- return `color-mix(in srgb, var(--color-accent) ${alpha * 100}%, transparent)`;
82
- }
83
-
84
80
  /**
85
81
  * Expand a color scale config into Astryx color token overrides.
86
82
  *
@@ -121,11 +117,10 @@ export function expandColorScale(
121
117
  return {
122
118
  // Core semantic
123
119
  '--color-accent': ld(P[40], P[80]),
124
- // Derived accent tokens reference --color-accent instead of baking its
125
- // resolved hex, so a scoped override of the base token re-accents the
126
- // whole subtree at runtime. --color-on-accent stays baked: it is a
127
- // contrast computation against the accent, which CSS cannot express.
128
- '--color-accent-muted': ld(accentWithAlpha(0.2), accentWithAlpha(0.25)),
120
+ '--color-accent-muted': ld(
121
+ hexWithAlpha(P[40], 0.2),
122
+ hexWithAlpha(P[80], 0.25),
123
+ ),
129
124
  '--color-on-accent': ld(P[100], P[20]),
130
125
  '--color-neutral': ld(hexWithAlpha(N[10], 0.1), hexWithAlpha(N[90], 0.2)),
131
126
  '--color-background-surface': ld(N[99], N[10]),
@@ -151,10 +146,10 @@ export function expandColorScale(
151
146
  NV[textSecondaryDarkTone],
152
147
  ),
153
148
  '--color-text-disabled': ld(NV[60], NV[40]),
154
- '--color-text-accent': 'var(--color-accent)',
149
+ '--color-text-accent': ld(P[30], P[80]),
155
150
 
156
151
  // Icon
157
- '--color-icon-accent': 'var(--color-accent)',
152
+ '--color-icon-accent': ld(P[40], P[80]),
158
153
  '--color-icon-primary': ld(N[textPrimaryLightTone], N[textPrimaryDarkTone]),
159
154
  '--color-icon-secondary': ld(
160
155
  NV[textSecondaryLightTone],
package/src/theme/hct.ts CHANGED
@@ -16,8 +16,6 @@
16
16
  * - Tone from L* (CIE Lightness, 0=black, 100=white)
17
17
  */
18
18
 
19
- import {parseHex, formatHex} from '../utils/color';
20
-
21
19
  // =============================================================================
22
20
  // Types
23
21
  // =============================================================================
@@ -123,11 +121,21 @@ export function yToTone(y: number): number {
123
121
  // =============================================================================
124
122
 
125
123
  function hexToRgb(hex: string): [number, number, number] {
126
- const parsed = parseHex(hex);
127
- if (parsed === null) {
128
- return [0, 0, 0];
129
- }
130
- return [parsed.r, parsed.g, parsed.b];
124
+ const h = hex.replace('#', '');
125
+ const full =
126
+ h.length === 3 ? h[0] + h[0] + h[1] + h[1] + h[2] + h[2] : h.slice(0, 6);
127
+ const n = parseInt(full, 16);
128
+ return [(n >> 16) & 0xff, (n >> 8) & 0xff, n & 0xff];
129
+ }
130
+
131
+ function rgbToHex(r: number, g: number, b: number): string {
132
+ return (
133
+ '#' +
134
+ [r, g, b]
135
+ .map(c => c.toString(16).padStart(2, '0'))
136
+ .join('')
137
+ .toUpperCase()
138
+ );
131
139
  }
132
140
 
133
141
  // =============================================================================
@@ -173,7 +181,7 @@ export function hctToHex(hct: HCT): string {
173
181
  }
174
182
  if (chroma < 0.5) {
175
183
  const gray = toneToGray(tone);
176
- return formatHex(gray, gray, gray);
184
+ return rgbToHex(gray, gray, gray);
177
185
  }
178
186
 
179
187
  let lo = 0;
@@ -233,7 +241,7 @@ function hctComponentToHex(
233
241
  return null;
234
242
  }
235
243
 
236
- return formatHex(r, g, bVal);
244
+ return rgbToHex(r, g, bVal);
237
245
  }
238
246
 
239
247
  // =============================================================================
@@ -20,7 +20,9 @@ const testTheme = defineTheme({
20
20
 
21
21
  describe('tokenVar', () => {
22
22
  it('returns a CSS var() reference for known token names', () => {
23
- expect(tokenVar('--color-text-primary')).toBe('var(--color-text-primary)');
23
+ expect(tokenVar('--color-text-primary')).toBe(
24
+ 'var(--color-text-primary)',
25
+ );
24
26
  });
25
27
 
26
28
  it('returns a CSS var() reference for custom token names', () => {
@@ -30,7 +32,9 @@ describe('tokenVar', () => {
30
32
 
31
33
  describe('tokenVars', () => {
32
34
  it('contains var() references for known tokens', () => {
33
- expect(tokenVars['--color-text-primary']).toBe('var(--color-text-primary)');
35
+ expect(tokenVars['--color-text-primary']).toBe(
36
+ 'var(--color-text-primary)',
37
+ );
34
38
  expect(tokenVars['--spacing-4']).toBe('var(--spacing-4)');
35
39
  });
36
40
  });
@@ -83,9 +87,9 @@ describe('resolveThemeTokens', () => {
83
87
 
84
88
  describe('resolveThemeToken', () => {
85
89
  it('resolves one token', () => {
86
- expect(resolveThemeToken(testTheme, '--color-accent', {mode: 'dark'})).toBe(
87
- '#FF5555',
88
- );
90
+ expect(
91
+ resolveThemeToken(testTheme, '--color-accent', {mode: 'dark'}),
92
+ ).toBe('#FF5555');
89
93
  });
90
94
 
91
95
  it('returns fallback for unknown token names', () => {
@@ -103,180 +107,3 @@ describe('resolveThemeToken', () => {
103
107
  ).toBe('');
104
108
  });
105
109
  });
106
-
107
- describe('resolveThemeTokens — reference resolution', () => {
108
- it('resolves a token that references another token to a raw value', () => {
109
- const theme = defineTheme({
110
- name: 'ref',
111
- tokens: {
112
- '--color-accent': ['#0058D2', '#BBC2FF'],
113
- '--color-text-accent': 'var(--color-accent)',
114
- },
115
- });
116
-
117
- const light = resolveThemeTokens(theme, {mode: 'light'});
118
- const dark = resolveThemeTokens(theme, {mode: 'dark'});
119
-
120
- expect(light['--color-text-accent']).toBe('#0058D2');
121
- expect(dark['--color-text-accent']).toBe('#BBC2FF');
122
- });
123
-
124
- it('resolves reference chains iteratively', () => {
125
- const theme = defineTheme({
126
- name: 'chain',
127
- tokens: {
128
- '--color-accent': ['#112233', '#445566'],
129
- '--color-icon-accent': 'var(--color-accent)',
130
- '--color-text-accent': 'var(--color-icon-accent)',
131
- },
132
- });
133
-
134
- const light = resolveThemeTokens(theme, {mode: 'light'});
135
- expect(light['--color-icon-accent']).toBe('#112233');
136
- expect(light['--color-text-accent']).toBe('#112233');
137
- });
138
-
139
- it('uses the var() fallback when the referenced token is unknown', () => {
140
- const theme = defineTheme({
141
- name: 'fallback',
142
- tokens: {
143
- '--color-text-accent': 'var(--not-a-token, #ABCDEF)',
144
- },
145
- });
146
-
147
- const tokens = resolveThemeTokens(theme, {mode: 'light'});
148
- expect(tokens['--color-text-accent']).toBe('#ABCDEF');
149
- });
150
-
151
- it('leaves an unresolvable reference as a literal var()', () => {
152
- const theme = defineTheme({
153
- name: 'unresolvable',
154
- tokens: {
155
- '--color-text-accent': 'var(--not-a-token)',
156
- },
157
- });
158
-
159
- const tokens = resolveThemeTokens(theme, {mode: 'light'});
160
- expect(tokens['--color-text-accent']).toBe('var(--not-a-token)');
161
- });
162
-
163
- it('does not loop forever on a reference cycle', () => {
164
- const theme = defineTheme({
165
- name: 'cycle',
166
- tokens: {
167
- '--color-text-accent': 'var(--color-icon-accent)',
168
- '--color-icon-accent': 'var(--color-text-accent)',
169
- },
170
- });
171
-
172
- const tokens = resolveThemeTokens(theme, {mode: 'light'});
173
- // The cycle collapses to a literal reference rather than hanging.
174
- expect(tokens['--color-text-accent']).toContain('var(');
175
- expect(tokens['--color-icon-accent']).toContain('var(');
176
- });
177
- });
178
-
179
- describe('resolveThemeTokens — CSS color functions', () => {
180
- it('evaluates color-mix with transparent to an rgba() value', () => {
181
- const theme = defineTheme({
182
- name: 'mix',
183
- tokens: {
184
- '--color-accent': ['#0058D2', '#BBC2FF'],
185
- '--color-accent-muted':
186
- 'color-mix(in srgb, var(--color-accent) 20%, transparent)',
187
- },
188
- });
189
-
190
- const light = resolveThemeTokens(theme, {mode: 'light'});
191
- const dark = resolveThemeTokens(theme, {mode: 'dark'});
192
-
193
- expect(light['--color-accent-muted']).toBe('rgba(0, 88, 210, 0.2)');
194
- expect(dark['--color-accent-muted']).toBe('rgba(187, 194, 255, 0.2)');
195
- });
196
-
197
- it('resolves the muted token inside a light-dark() tuple per mode', () => {
198
- const theme = defineTheme({
199
- name: 'ld-mix',
200
- tokens: {
201
- '--color-accent': ['#FF0000', '#00FF00'],
202
- '--color-accent-muted': [
203
- 'color-mix(in srgb, var(--color-accent) 20%, transparent)',
204
- 'color-mix(in srgb, var(--color-accent) 25%, transparent)',
205
- ],
206
- },
207
- });
208
-
209
- const light = resolveThemeTokens(theme, {mode: 'light'});
210
- const dark = resolveThemeTokens(theme, {mode: 'dark'});
211
-
212
- expect(light['--color-accent-muted']).toBe('rgba(255, 0, 0, 0.2)');
213
- expect(dark['--color-accent-muted']).toBe('rgba(0, 255, 0, 0.25)');
214
- });
215
-
216
- it('mixes two opaque colors by weight', () => {
217
- const theme = defineTheme({
218
- name: 'two-color',
219
- tokens: {
220
- '--color-neutral': 'color-mix(in srgb, #000000, #FFFFFF)',
221
- },
222
- });
223
-
224
- const tokens = resolveThemeTokens(theme, {mode: 'light'});
225
- expect(tokens['--color-neutral']).toBe('#808080');
226
- });
227
-
228
- it('mixes two opaque colors with an explicit percentage', () => {
229
- const theme = defineTheme({
230
- name: 'weighted',
231
- tokens: {
232
- '--color-neutral': 'color-mix(in srgb, #000000 25%, #FFFFFF)',
233
- },
234
- });
235
-
236
- const tokens = resolveThemeTokens(theme, {mode: 'light'});
237
- expect(tokens['--color-neutral']).toBe('#BFBFBF');
238
- });
239
-
240
- it('preserves an unsupported color space rather than guessing', () => {
241
- const theme = defineTheme({
242
- name: 'oklab',
243
- tokens: {
244
- '--color-accent': ['#0058D2', '#BBC2FF'],
245
- '--color-neutral':
246
- 'color-mix(in oklab, var(--color-accent), black 15%)',
247
- },
248
- });
249
-
250
- const tokens = resolveThemeTokens(theme, {mode: 'light'});
251
- // var() still resolves; the unsupported mix stays as a color-mix() expression.
252
- expect(tokens['--color-neutral']).toContain('color-mix(in oklab');
253
- expect(tokens['--color-neutral']).toContain('#0058D2');
254
- });
255
- });
256
-
257
- describe('resolveThemeTokens — generated themes end to end', () => {
258
- it('resolves derived accent tokens from defineTheme({color}) to raw values', () => {
259
- const theme = defineTheme({name: 'brand', color: {accent: '#0064E0'}});
260
-
261
- const light = resolveThemeTokens(theme, {mode: 'light'});
262
- const dark = resolveThemeTokens(theme, {mode: 'dark'});
263
-
264
- const isConcreteColor = (value: string): boolean => /^(#|rgb)/.test(value);
265
-
266
- for (const key of [
267
- '--color-accent',
268
- '--color-text-accent',
269
- '--color-icon-accent',
270
- '--color-accent-muted',
271
- ]) {
272
- expect(isConcreteColor(light[key])).toBe(true);
273
- expect(isConcreteColor(dark[key])).toBe(true);
274
- expect(light[key]).not.toContain('var(');
275
- expect(light[key]).not.toContain('color-mix');
276
- }
277
-
278
- // The derived accent tokens resolve to the base accent.
279
- expect(light['--color-text-accent']).toBe(light['--color-accent']);
280
- expect(light['--color-icon-accent']).toBe(light['--color-accent']);
281
- });
282
- });
@@ -10,11 +10,6 @@
10
10
  * build-time theme adapters, chart configuration, canvas/SVG rendering, tests,
11
11
  * or plain JS theme objects for other styling libraries.
12
12
  *
13
- * Derived tokens can reference other tokens (`var(--color-accent)`) and use CSS
14
- * color functions (`color-mix`). The resolver follows those references through
15
- * the theme iteratively and evaluates the supported color functions so callers
16
- * receive concrete raw values, not CSS expressions.
17
- *
18
13
  * SYNC: When modified, update:
19
14
  * - /packages/core/src/theme/useTheme.ts
20
15
  * - /packages/core/src/theme/index.ts
@@ -26,7 +21,6 @@ import {
26
21
  type TokenName,
27
22
  type TokenValue,
28
23
  } from './defineTheme';
29
- import {parseColor, formatColor} from '../utils/color';
30
24
 
31
25
  /** Resolved color mode used when choosing the side of light/dark token values. */
32
26
  export type ResolvedThemeMode = 'light' | 'dark';
@@ -150,243 +144,14 @@ function resolveXDSTokenValue(
150
144
  return value;
151
145
  }
152
146
 
153
- // =============================================================================
154
- // Reference resolution — turn token expressions into concrete raw values
155
- // =============================================================================
156
- //
157
- // Generated themes emit derived tokens as references to other tokens rather
158
- // than baked-in values, so a scoped CSS override of a base token re-themes the
159
- // subtree that references it. The CSS cascade resolves those references, but
160
- // non-CSS consumers (canvas, SVG, data-viz) need the concrete value. These
161
- // helpers replay the same resolution in JS: follow `var()` references through
162
- // the resolved token map (iteratively, guarding against cycles) and evaluate
163
- // the CSS color functions used by the theme generator against those values.
164
-
165
- /** Index of the `)` matching the `(` at `openIndex`, or -1 when unbalanced. */
166
- function findMatchingParen(input: string, openIndex: number): number {
167
- let depth = 0;
168
- for (let i = openIndex; i < input.length; i++) {
169
- const char = input[i];
170
- if (char === '(') {
171
- depth++;
172
- } else if (char === ')') {
173
- depth--;
174
- if (depth === 0) {
175
- return i;
176
- }
177
- }
178
- }
179
- return -1;
180
- }
181
-
182
- /** Split a color-mix component into its color and optional percentage. */
183
- function parseMixComponent(
184
- part: string,
185
- ): {color: string; percentage: number | null} | null {
186
- const trimmed = part.trim();
187
- const match = trimmed.match(/\s+([\d.]+)%$/);
188
- if (match) {
189
- return {
190
- color: trimmed.slice(0, match.index).trim(),
191
- percentage: parseFloat(match[1]),
192
- };
193
- }
194
- return {color: trimmed, percentage: null};
195
- }
196
-
197
- /**
198
- * Evaluate `color-mix(in <space>, c1 [p1], c2 [p2])` to a concrete color.
199
- *
200
- * Supports the `srgb` color space (the one the theme generator emits) using
201
- * the CSS Color 5 algorithm: normalize the percentages, interpolate the
202
- * premultiplied channels, then apply the alpha multiplier when the mix weights
203
- * sum to less than 100%. Returns null for anything it can't evaluate so the
204
- * original expression is preserved rather than guessed.
205
- */
206
- function evaluateColorMix(body: string): string | null {
207
- const spaceMatch = body.match(/^in\s+([\w-]+)\s*,\s*(.+)$/s);
208
- if (!spaceMatch) {
209
- return null;
210
- }
211
- const [, colorSpace, rest] = spaceMatch;
212
- if (colorSpace.toLowerCase() !== 'srgb') {
213
- return null;
214
- }
215
-
216
- const split = splitTopLevelComma(rest);
217
- if (split === null) {
218
- return null;
219
- }
220
- const first = parseMixComponent(split[0]);
221
- const second = parseMixComponent(split[1]);
222
- if (first === null || second === null) {
223
- return null;
224
- }
225
-
226
- const c1 = parseColor(first.color);
227
- const c2 = parseColor(second.color);
228
- if (c1 === null || c2 === null) {
229
- return null;
230
- }
231
-
232
- // Fill in omitted percentages, then normalize so they sum to 100%.
233
- let p1: number;
234
- let p2: number;
235
- if (first.percentage !== null && second.percentage !== null) {
236
- p1 = first.percentage;
237
- p2 = second.percentage;
238
- } else if (first.percentage !== null) {
239
- p1 = first.percentage;
240
- p2 = 100 - p1;
241
- } else if (second.percentage !== null) {
242
- p2 = second.percentage;
243
- p1 = 100 - p2;
244
- } else {
245
- p1 = 50;
246
- p2 = 50;
247
- }
248
- const sum = p1 + p2;
249
- if (sum <= 0) {
250
- return null;
251
- }
252
- const w1 = p1 / sum;
253
- const w2 = p2 / sum;
254
- const alphaMultiplier = sum < 100 ? sum / 100 : 1;
255
-
256
- // Interpolate in premultiplied sRGB, then un-premultiply.
257
- const mixedA = w1 * c1.a + w2 * c2.a;
258
- const premix = (k1: number, k2: number): number =>
259
- w1 * k1 * c1.a + w2 * k2 * c2.a;
260
- const rp = premix(c1.r, c2.r);
261
- const gp = premix(c1.g, c2.g);
262
- const bp = premix(c1.b, c2.b);
263
- const rgb =
264
- mixedA === 0
265
- ? {r: 0, g: 0, b: 0}
266
- : {r: rp / mixedA, g: gp / mixedA, b: bp / mixedA};
267
-
268
- return formatColor({...rgb, a: mixedA * alphaMultiplier});
269
- }
270
-
271
- /** Evaluate every supported color function in an expression, innermost first. */
272
- function evaluateColorFunctions(expr: string): string {
273
- const idx = expr.indexOf('color-mix(');
274
- if (idx === -1) {
275
- return expr;
276
- }
277
- const openIndex = idx + 'color-mix'.length;
278
- const closeIndex = findMatchingParen(expr, openIndex);
279
- if (closeIndex === -1) {
280
- return expr;
281
- }
282
- const body = evaluateColorFunctions(expr.slice(openIndex + 1, closeIndex));
283
- const evaluated = evaluateColorMix(body);
284
- const replacement = evaluated ?? `color-mix(${body})`;
285
- return (
286
- expr.slice(0, idx) +
287
- replacement +
288
- evaluateColorFunctions(expr.slice(closeIndex + 1))
289
- );
290
- }
291
-
292
- /**
293
- * Substitute `var(--name[, fallback])` references with their resolved values.
294
- * `seen` tracks the reference chain so cycles resolve to the literal reference
295
- * instead of recursing forever.
296
- */
297
- function substituteVars(
298
- expr: string,
299
- raw: Record<string, string>,
300
- cache: Record<string, string>,
301
- seen: Set<string>,
302
- ): string {
303
- const start = expr.indexOf('var(');
304
- if (start === -1) {
305
- return expr;
306
- }
307
- const openIndex = start + 'var'.length;
308
- const closeIndex = findMatchingParen(expr, openIndex);
309
- if (closeIndex === -1) {
310
- return expr;
311
- }
312
-
313
- const inner = expr.slice(openIndex + 1, closeIndex);
314
- const commaSplit = splitTopLevelComma(inner);
315
- const name = (commaSplit ? commaSplit[0] : inner).trim();
316
- const fallback = commaSplit ? commaSplit[1] : null;
317
-
318
- let replacement: string;
319
- if (seen.has(name)) {
320
- replacement = expr.slice(start, closeIndex + 1);
321
- } else if (name in raw) {
322
- seen.add(name);
323
- replacement = resolveReference(name, raw, cache, seen);
324
- seen.delete(name);
325
- } else if (fallback !== null) {
326
- replacement = substituteVars(fallback.trim(), raw, cache, seen);
327
- } else {
328
- replacement = expr.slice(start, closeIndex + 1);
329
- }
330
-
331
- const rest = substituteVars(expr.slice(closeIndex + 1), raw, cache, seen);
332
- return expr.slice(0, start) + replacement + rest;
333
- }
334
-
335
- /** Fully resolve a single expression: substitute references, then evaluate colors. */
336
- function resolveExpression(
337
- expr: string,
338
- raw: Record<string, string>,
339
- cache: Record<string, string>,
340
- seen: Set<string>,
341
- ): string {
342
- if (!expr.includes('var(') && !expr.includes('color-mix(')) {
343
- return expr;
344
- }
345
- const substituted = substituteVars(expr, raw, cache, seen);
346
- return evaluateColorFunctions(substituted);
347
- }
348
-
349
- /** Resolve one token by name, memoizing the result in `cache`. */
350
- function resolveReference(
351
- name: string,
352
- raw: Record<string, string>,
353
- cache: Record<string, string>,
354
- seen: Set<string>,
355
- ): string {
356
- if (name in cache) {
357
- return cache[name];
358
- }
359
- const value = raw[name];
360
- if (value === undefined) {
361
- return '';
362
- }
363
- const resolved = resolveExpression(value, raw, cache, seen);
364
- cache[name] = resolved;
365
- return resolved;
366
- }
367
-
368
- /** Resolve every reference/color function in a raw token map to concrete values. */
369
- function resolveReferences(
370
- raw: Record<string, string>,
371
- ): Record<string, string> {
372
- const cache: Record<string, string> = {};
373
- for (const name of Object.keys(raw)) {
374
- resolveReference(name, raw, cache, new Set<string>());
375
- }
376
- return cache;
377
- }
378
-
379
147
  /**
380
148
  * Resolve all Astryx token values for a theme and effective color mode.
381
149
  *
382
150
  * The result starts with `tokenDefaults`, applies `theme.tokens`, then
383
151
  * reapplies `theme.__inputTokens` when available so explicit tuple overrides
384
152
  * retain their original light/dark sides instead of relying on CSS parsing.
385
- * A final pass resolves any `var()` references between tokens and evaluates
386
- * the CSS color functions the theme generator emits (e.g. `color-mix`), so
387
- * derived tokens like `--color-text-accent` return concrete values rather than
388
- * `var(--color-accent)`. This mirrors the token resolution used by
389
- * `useTheme()` but does not need React context or media queries.
153
+ * This mirrors the token resolution used by `useTheme()` but does not need
154
+ * React context or media queries.
390
155
  *
391
156
  * Pass `theme` as null/undefined to resolve defaults only.
392
157
  */
@@ -402,7 +167,7 @@ export function resolveThemeTokens(
402
167
  }
403
168
 
404
169
  if (theme == null) {
405
- return resolveReferences(resolved);
170
+ return resolved;
406
171
  }
407
172
 
408
173
  for (const [key, value] of Object.entries(theme.tokens)) {
@@ -417,7 +182,7 @@ export function resolveThemeTokens(
417
182
  }
418
183
  }
419
184
 
420
- return resolveReferences(resolved);
185
+ return resolved;
421
186
  }
422
187
 
423
188
  /** Resolve one Astryx token value for a theme and effective color mode. */
@@ -122,24 +122,4 @@ describe('useTheme', () => {
122
122
  resolveThemeTokens(testTheme, {mode: 'dark'}),
123
123
  );
124
124
  });
125
-
126
- it('resolves derived accent tokens to raw values, not var()/color-mix', () => {
127
- const brandTheme = defineTheme({name: 'brand', color: {accent: '#0064E0'}});
128
- const {result} = renderHook(() => useTheme(), {
129
- wrapper: ({children}) => (
130
- <Theme theme={brandTheme} mode="light">
131
- {children}
132
- </Theme>
133
- ),
134
- });
135
-
136
- const accent = result.current.token('--color-accent');
137
- expect(result.current.token('--color-text-accent')).toBe(accent);
138
- expect(result.current.token('--color-icon-accent')).toBe(accent);
139
- expect(result.current.token('--color-accent-muted')).toMatch(/^(#|rgb)/);
140
- expect(result.current.token('--color-accent-muted')).not.toContain('var(');
141
- expect(result.current.token('--color-accent-muted')).not.toContain(
142
- 'color-mix',
143
- );
144
- });
145
125
  });
@@ -68,7 +68,6 @@ export {getKey, type Key, type KeyFallback} from './getKey';
68
68
 
69
69
  export {mergeProps} from './mergeProps';
70
70
  export {mergeRefs} from './mergeRefs';
71
- export {composeEventHandlers} from './composeEventHandlers';
72
71
  export {themeProps, themeDataAttributes} from './themeProps';
73
72
  export type {
74
73
  ClassValue,
@@ -82,6 +81,3 @@ export {observeResize, unobserveResize} from './sharedResizeObserver';
82
81
  export {isRenderable} from './isRenderable';
83
82
  export {getInputARIA} from './inputAria';
84
83
  export type {InputARIA, InputARIAInputGroup} from './inputAria';
85
-
86
- export {parseHex, parseRgb, parseColor, formatHex, formatColor} from './color';
87
- export type {RGBA} from './color';
@@ -15,7 +15,7 @@ describe('sharedResizeObserver', () => {
15
15
  mockDisconnect = vi.fn();
16
16
  constructorCalls = 0;
17
17
 
18
- global.ResizeObserver = vi.fn(function (cb: ResizeObserverCallback) {
18
+ global.ResizeObserver = vi.fn((cb: ResizeObserverCallback) => {
19
19
  constructorCalls++;
20
20
  capturedCallback = cb;
21
21
  return {
@@ -23,7 +23,7 @@ describe('sharedResizeObserver', () => {
23
23
  unobserve: mockUnobserve,
24
24
  disconnect: mockDisconnect,
25
25
  };
26
- }) as unknown as typeof ResizeObserver;
26
+ });
27
27
  });
28
28
 
29
29
  afterEach(() => {
@@ -249,19 +249,6 @@ describe('isTimeInRange', () => {
249
249
  });
250
250
 
251
251
  describe('adjustTime', () => {
252
- it('returns the input unchanged for non-finite deltas', () => {
253
- // -Infinity previously spun the wrap-around loop forever;
254
- // NaN previously produced the corrupt string "NaN:NaN".
255
- expect(adjustTime('10:00' as ISOTimeString, -Infinity)).toBe('10:00');
256
- expect(adjustTime('10:00' as ISOTimeString, Infinity)).toBe('10:00');
257
- expect(adjustTime('10:00' as ISOTimeString, NaN)).toBe('10:00');
258
- });
259
-
260
- it('wraps large negative deltas in constant time', () => {
261
- expect(adjustTime('10:00' as ISOTimeString, -1440 * 1e7)).toBe('10:00');
262
- expect(adjustTime('10:00' as ISOTimeString, -1440 * 1e7 - 30)).toBe('09:30');
263
- });
264
-
265
252
  it('adds minutes', () => {
266
253
  expect(adjustTime('14:30' as ISOTimeString, 15)).toBe('14:45');
267
254
  expect(adjustTime('14:30' as ISOTimeString, 30)).toBe('15:00');