@astryxdesign/core 0.1.7 → 0.1.8-canary.c5fa19b

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 (190) hide show
  1. package/CHANGELOG.md +65 -0
  2. package/README.md +30 -19
  3. package/dist/Avatar/Avatar.d.ts +10 -5
  4. package/dist/Avatar/Avatar.d.ts.map +1 -1
  5. package/dist/Avatar/Avatar.js +12 -8
  6. package/dist/Avatar/AvatarSizeContext.d.ts +1 -1
  7. package/dist/Avatar/AvatarSizeContext.js +1 -1
  8. package/dist/Avatar/AvatarStatusDot.d.ts +2 -2
  9. package/dist/Avatar/AvatarStatusDot.js +2 -2
  10. package/dist/AvatarGroup/AvatarGroup.d.ts +2 -2
  11. package/dist/AvatarGroup/AvatarGroup.d.ts.map +1 -1
  12. package/dist/AvatarGroup/AvatarGroup.js +2 -2
  13. package/dist/AvatarGroup/AvatarGroupOverflow.d.ts +1 -1
  14. package/dist/AvatarGroup/AvatarGroupOverflow.d.ts.map +1 -1
  15. package/dist/AvatarGroup/AvatarGroupOverflow.js +16 -14
  16. package/dist/Carousel/Carousel.d.ts +3 -2
  17. package/dist/Carousel/Carousel.d.ts.map +1 -1
  18. package/dist/Carousel/Carousel.js +32 -2
  19. package/dist/Chat/ChatMessage.d.ts +1 -1
  20. package/dist/Chat/ChatMessage.d.ts.map +1 -1
  21. package/dist/Chat/ChatMessage.js +1 -1
  22. package/dist/Citation/Citation.d.ts.map +1 -1
  23. package/dist/Citation/Citation.js +10 -4
  24. package/dist/Collapsible/Collapsible.d.ts +11 -1
  25. package/dist/Collapsible/Collapsible.d.ts.map +1 -1
  26. package/dist/Collapsible/Collapsible.js +36 -4
  27. package/dist/ContextMenu/ContextMenu.d.ts.map +1 -1
  28. package/dist/ContextMenu/ContextMenu.js +4 -3
  29. package/dist/ContextMenu/index.d.ts +3 -0
  30. package/dist/ContextMenu/index.d.ts.map +1 -1
  31. package/dist/ContextMenu/index.js +7 -1
  32. package/dist/DropdownMenu/DropdownMenu.d.ts.map +1 -1
  33. package/dist/DropdownMenu/DropdownMenu.js +8 -4
  34. package/dist/DropdownMenu/DropdownMenuCheckboxItem.d.ts +89 -0
  35. package/dist/DropdownMenu/DropdownMenuCheckboxItem.d.ts.map +1 -0
  36. package/dist/DropdownMenu/DropdownMenuCheckboxItem.js +170 -0
  37. package/dist/DropdownMenu/DropdownMenuContext.d.ts +17 -1
  38. package/dist/DropdownMenu/DropdownMenuContext.d.ts.map +1 -1
  39. package/dist/DropdownMenu/DropdownMenuContext.js +18 -0
  40. package/dist/DropdownMenu/DropdownMenuRadioGroup.d.ts +69 -0
  41. package/dist/DropdownMenu/DropdownMenuRadioGroup.d.ts.map +1 -0
  42. package/dist/DropdownMenu/DropdownMenuRadioGroup.js +70 -0
  43. package/dist/DropdownMenu/DropdownMenuRadioItem.d.ts +69 -0
  44. package/dist/DropdownMenu/DropdownMenuRadioItem.d.ts.map +1 -0
  45. package/dist/DropdownMenu/DropdownMenuRadioItem.js +178 -0
  46. package/dist/DropdownMenu/index.d.ts +5 -1
  47. package/dist/DropdownMenu/index.d.ts.map +1 -1
  48. package/dist/DropdownMenu/index.js +10 -1
  49. package/dist/DropdownMenu/menuItemRoles.d.ts +13 -0
  50. package/dist/DropdownMenu/menuItemRoles.d.ts.map +1 -0
  51. package/dist/DropdownMenu/menuItemRoles.js +15 -0
  52. package/dist/Icon/Icon.d.ts +43 -13
  53. package/dist/Icon/Icon.d.ts.map +1 -1
  54. package/dist/Icon/Icon.js +62 -27
  55. package/dist/Outline/Outline.d.ts +69 -3
  56. package/dist/Outline/Outline.d.ts.map +1 -1
  57. package/dist/Outline/Outline.js +129 -26
  58. package/dist/Outline/useScrollSpy.d.ts +27 -7
  59. package/dist/Outline/useScrollSpy.d.ts.map +1 -1
  60. package/dist/Outline/useScrollSpy.js +202 -70
  61. package/dist/TabList/Tab.d.ts.map +1 -1
  62. package/dist/TabList/Tab.js +2 -2
  63. package/dist/TabList/TabList.d.ts.map +1 -1
  64. package/dist/TabList/TabList.js +2 -0
  65. package/dist/TabList/TabMenu.d.ts.map +1 -1
  66. package/dist/TabList/TabMenu.js +1 -1
  67. package/dist/Table/Table.d.ts +1 -1
  68. package/dist/Table/Table.js +1 -1
  69. package/dist/Table/index.d.ts +2 -0
  70. package/dist/Table/index.d.ts.map +1 -1
  71. package/dist/Table/index.js +1 -0
  72. package/dist/Table/plugins/rowExpansion/useTableRowExpansion.d.ts.map +1 -1
  73. package/dist/Table/plugins/rowExpansion/useTableRowExpansion.js +24 -2
  74. package/dist/Table/plugins/sortable/useTableSortable.d.ts.map +1 -1
  75. package/dist/Table/plugins/sortable/useTableSortable.js +18 -7
  76. package/dist/Table/plugins/tree/index.d.ts +5 -0
  77. package/dist/Table/plugins/tree/index.d.ts.map +1 -0
  78. package/dist/Table/plugins/tree/index.js +4 -0
  79. package/dist/Table/plugins/tree/useTableTreeData.d.ts +38 -0
  80. package/dist/Table/plugins/tree/useTableTreeData.d.ts.map +1 -0
  81. package/dist/Table/plugins/tree/useTableTreeData.js +358 -0
  82. package/dist/Table/plugins/tree/useTableTreeState.d.ts +51 -0
  83. package/dist/Table/plugins/tree/useTableTreeState.d.ts.map +1 -0
  84. package/dist/Table/plugins/tree/useTableTreeState.js +175 -0
  85. package/dist/Table/useBaseTablePlugins.d.ts.map +1 -1
  86. package/dist/Table/useBaseTablePlugins.js +6 -3
  87. package/dist/Toolbar/Toolbar.d.ts.map +1 -1
  88. package/dist/Toolbar/Toolbar.js +8 -1
  89. package/dist/TreeList/TreeListItem.d.ts.map +1 -1
  90. package/dist/TreeList/TreeListItem.js +5 -14
  91. package/dist/astryx.css +24 -4
  92. package/dist/astryx.umd.js +54 -54
  93. package/dist/astryx.umd.js.map +4 -4
  94. package/dist/theme/Theme.js +1 -1
  95. package/dist/theme/defineTheme.d.ts +1 -1
  96. package/dist/theme/defineTheme.js +1 -1
  97. package/dist/theme/hct.d.ts +0 -1
  98. package/dist/theme/hct.d.ts.map +1 -1
  99. package/dist/theme/hct.js +0 -3
  100. package/docs.mjs +32 -461
  101. package/locales/en.json +200 -172
  102. package/locales/pseudo.json +21 -0
  103. package/package.json +3 -1
  104. package/scripts/postinstall.mjs +93 -0
  105. package/src/Avatar/Avatar.doc.mjs +6 -6
  106. package/src/Avatar/Avatar.tsx +16 -11
  107. package/src/Avatar/AvatarSizeContext.ts +1 -1
  108. package/src/Avatar/AvatarStatusDot.tsx +2 -2
  109. package/src/AvatarGroup/AvatarGroup.doc.mjs +1 -1
  110. package/src/AvatarGroup/AvatarGroup.test.tsx +17 -3
  111. package/src/AvatarGroup/AvatarGroup.tsx +3 -3
  112. package/src/AvatarGroup/AvatarGroupOverflow.doc.mjs +4 -4
  113. package/src/AvatarGroup/AvatarGroupOverflow.tsx +21 -5
  114. package/src/Carousel/Carousel.doc.mjs +1 -0
  115. package/src/Carousel/Carousel.test.tsx +96 -1
  116. package/src/Carousel/Carousel.tsx +29 -2
  117. package/src/Chat/Chat.doc.mjs +1 -1
  118. package/src/Chat/ChatMessage.tsx +4 -2
  119. package/src/CheckboxInput/CheckboxInput.doc.mjs +1 -1
  120. package/src/Citation/Citation.test.tsx +51 -0
  121. package/src/Citation/Citation.tsx +8 -2
  122. package/src/Collapsible/Collapsible.doc.mjs +7 -0
  123. package/src/Collapsible/Collapsible.test.tsx +80 -0
  124. package/src/Collapsible/Collapsible.tsx +58 -5
  125. package/src/ContextMenu/ContextMenu.test.tsx +75 -1
  126. package/src/ContextMenu/ContextMenu.tsx +10 -5
  127. package/src/ContextMenu/index.ts +15 -0
  128. package/src/DropdownMenu/DropdownMenu.doc.mjs +23 -0
  129. package/src/DropdownMenu/DropdownMenu.tsx +11 -6
  130. package/src/DropdownMenu/DropdownMenuCheckboxItem.doc.mjs +95 -0
  131. package/src/DropdownMenu/DropdownMenuCheckboxItem.tsx +237 -0
  132. package/src/DropdownMenu/DropdownMenuContext.tsx +29 -1
  133. package/src/DropdownMenu/DropdownMenuItem.doc.mjs +7 -1
  134. package/src/DropdownMenu/DropdownMenuRadioGroup.doc.mjs +80 -0
  135. package/src/DropdownMenu/DropdownMenuRadioGroup.tsx +119 -0
  136. package/src/DropdownMenu/DropdownMenuRadioItem.doc.mjs +80 -0
  137. package/src/DropdownMenu/DropdownMenuRadioItem.tsx +232 -0
  138. package/src/DropdownMenu/DropdownMenuSelectable.test.tsx +163 -0
  139. package/src/DropdownMenu/index.ts +23 -3
  140. package/src/DropdownMenu/menuItemRoles.ts +22 -0
  141. package/src/Field/Field.doc.mjs +1 -1
  142. package/src/Field/FieldLabel.doc.mjs +1 -1
  143. package/src/Icon/Icon.doc.mjs +12 -0
  144. package/src/Icon/Icon.test.tsx +142 -0
  145. package/src/Icon/Icon.tsx +98 -30
  146. package/src/Item/Item.doc.mjs +1 -1
  147. package/src/NumberInput/NumberInput.doc.mjs +2 -2
  148. package/src/Outline/Outline.doc.mjs +123 -3
  149. package/src/Outline/Outline.test.tsx +735 -0
  150. package/src/Outline/Outline.tsx +184 -33
  151. package/src/Outline/useScrollSpy.ts +248 -72
  152. package/src/Selector/SelectorOption.doc.mjs +1 -1
  153. package/src/SideNav/SideNavItem.doc.mjs +2 -2
  154. package/src/Switch/Switch.doc.mjs +1 -1
  155. package/src/TabList/Tab.tsx +5 -1
  156. package/src/TabList/TabList.doc.mjs +3 -3
  157. package/src/TabList/TabList.test.tsx +66 -0
  158. package/src/TabList/TabList.tsx +8 -0
  159. package/src/TabList/TabMenu.tsx +4 -1
  160. package/src/Table/Table.doc.mjs +2 -0
  161. package/src/Table/Table.tsx +1 -1
  162. package/src/Table/index.ts +7 -0
  163. package/src/Table/plugins/rowExpansion/useTableRowExpansion.test.tsx +90 -1
  164. package/src/Table/plugins/rowExpansion/useTableRowExpansion.tsx +37 -5
  165. package/src/Table/plugins/sortable/useTableSortable.test.tsx +95 -9
  166. package/src/Table/plugins/sortable/useTableSortable.tsx +23 -7
  167. package/src/Table/plugins/tree/index.ts +12 -0
  168. package/src/Table/plugins/tree/useTableTreeData-perf.test.tsx +163 -0
  169. package/src/Table/plugins/tree/useTableTreeData.test.tsx +594 -0
  170. package/src/Table/plugins/tree/useTableTreeData.tsx +495 -0
  171. package/src/Table/plugins/tree/useTableTreeState.test.tsx +636 -0
  172. package/src/Table/plugins/tree/useTableTreeState.tsx +253 -0
  173. package/src/Table/useBaseTablePlugins.ts +6 -2
  174. package/src/Table/useTableTreeData.doc.mjs +75 -0
  175. package/src/Table/useTableTreeState.doc.mjs +98 -0
  176. package/src/TextArea/TextArea.doc.mjs +1 -1
  177. package/src/TextInput/TextInput.doc.mjs +1 -1
  178. package/src/Toolbar/Toolbar.tsx +10 -3
  179. package/src/TreeList/TreeList.test.tsx +32 -1
  180. package/src/TreeList/TreeListItem.tsx +19 -10
  181. package/src/docs-script.test.mjs +18 -13
  182. package/src/postinstall.test.mjs +71 -0
  183. package/src/theme/Theme.doc.mjs +4 -4
  184. package/src/theme/Theme.tsx +1 -1
  185. package/src/theme/defineTheme.ts +1 -1
  186. package/src/theme/hct.ts +0 -4
  187. package/dist/TreeList/treeListItem.markers.stylex.d.ts +0 -16
  188. package/dist/TreeList/treeListItem.markers.stylex.d.ts.map +0 -1
  189. package/dist/TreeList/treeListItem.markers.stylex.js +0 -22
  190. package/src/TreeList/treeListItem.markers.stylex.ts +0 -20
package/CHANGELOG.md CHANGED
@@ -1,5 +1,70 @@
1
1
  # @xds/core
2
2
 
3
+ # 0.1.8
4
+
5
+ #### Breaking Changes
6
+
7
+ - Avatar and AvatarGroup adopt Icon's abbreviated size scale — `size` now takes `xsm`/`sm`/`md`/`lg`/`xl` instead of `tiny`/`xsmall`/`small`/`medium`/`large`. Pixel values are unchanged (20/24/36/48/128px) and the default is now `md` (still 36px, formerly `small`). Avatar's tiers stay larger than Icon's because avatars align with media rather than glyphs. Run `astryx upgrade` to migrate call sites. (#2672)
8
+
9
+ #### New Features
10
+
11
+ - Collapsible: the content area now anchors body typography (font family, size, weight, line-height) instead of inheriting from its surroundings, and exposes a stable `astryx-collapsible-content` theme target so revealed text can be themed externally.
12
+ - Collapsible: add an `isDisabled` prop to disable a single item. A disabled item's trigger can't be toggled and is dimmed; following the system-wide disabled convention it uses `aria-disabled` (not the native `disabled` attribute) and drops out of the tab order, staying perceivable to assistive tech. Disabling doesn't collapse an already-open item. Works standalone and inside CollapsibleGroup.
13
+ - `@astryxdesign/core`'s `docs.mjs` now redirects to the CLI so agents converge on a single documentation entry point (`astryx docs` / `astryx init`) instead of a large standalone script. (#4207)
14
+ - DropdownMenu selectable items: add `DropdownMenuCheckboxItem` (independent toggle, `role="menuitemcheckbox"`) and `DropdownMenuRadioGroup` + `DropdownMenuRadioItem` (single-select, `role="menuitemradio"`). The control size derives from the menu's item size and swaps to the row's inline-end on touch. They also work inside `ContextMenu` (re-exported as `ContextMenuCheckboxItem` / `ContextMenuRadioGroup` / `ContextMenuRadioItem`). Both menus' keyboard/typeahead/activation now recognize the selectable roles, and the menu context (`DropdownMenuContext`, `useDropdownMenuContext`, `DropdownMenuSize`) is exported for building custom menu items. See #3829.
15
+ - Icon: add an optional `label` prop for the accessible name. Setting it makes a standalone icon meaningful (`role="img"` + `aria-label`, no `aria-hidden`), collapsing the old three-attribute dance into one prop; omitting it (or passing `''`) keeps the decorative default (`aria-hidden`).
16
+ - "Foolproof init": both `@astryxdesign/core` and `@astryxdesign/cli` now print a postinstall nudge pointing you to `npx @astryxdesign/cli init`, `astryx` commands nudge you to finish setup until init has run, and `astryx init` runs non-interactively (no TTY required) so it works in CI and agent environments. (#4147, #4153, #4154, #4155)
17
+ - Outline: keyboard navigation, navigate callbacks, and scroll-scoping props (#2527)
18
+ Layers the public API deferred out of #2746 onto the scroll-spy engine and click-lock that already shipped. No visual change.
19
+ - Table: add a tree-data plugin — `useTableTreeState` and `useTableTreeData` — for rendering and managing hierarchical (parent/child) rows, expansion state, and flattening. Exported from `@astryxdesign/core/Table`. (#3789)
20
+
21
+ #### Fixes
22
+
23
+ - `AvatarGroupOverflow` now grows into a pill for long `+N` counts so the number never clips.
24
+ The indicator was a fixed-size circle, so wide counts (e.g. `+4912`) overflowed and crowded the edges. It now uses a minimum width equal to the avatar size plus horizontal padding: short counts (`+5`) stay a perfect circle, while longer counts grow horizontally into a stadium/pill and remain legible. No new public props.
25
+ - Carousel now scrolls horizontally when you hold Shift and scroll the mouse wheel. Trackpad users already got horizontal scroll for free; this brings standard mouse (vertical-only wheel) users to parity using the established Shift + wheel convention. Native trackpad horizontal scrolling and the prev/next buttons are unchanged.
26
+ - Citation: a non-interactive citation (no `source.url`) now keeps the default cursor instead of showing a pointer, so only linked citations look clickable. The pointer cursor is applied alongside the existing hover treatment for both the `label` and `number` variants (#4134).
27
+ - Stop suggesting bare `npx astryx` before the CLI is installed — it resolves to an unrelated package on the npm registry.
28
+ The CLI now emits an install-aware invocation everywhere it prints a command:
29
+ - Icon: size variants (`xsm`/`sm`/`md`/`lg`) now use `rem` instead of hardcoded `px`, so icons scale in step with text when the document/root `font-size` changes — matching the rest of the design system's rem-based type scale. Fixes #4092.
30
+ - Guard useTableRowExpansionState tree walks against cyclic data (#3971)
31
+ The `depthMap`, flattened `data`, and `allExpandableKeys` walks now track the ancestor keys on the current path and skip edges that point back at an ancestor, so self-referential or cyclic row data terminates instead of overflowing the stack.
32
+ - Route the Table sortable plugin's header-button aria-labels ("Sort by …", "… sorted …", "… priority … of …") through `useTranslator()` with new `@astryx.table.sort.sortBy` / `sortedBy` / `sortedByWithPriority` / `direction.*` catalog keys, so they localize like the sort menu labels already do (#3618, tracker #3636). The direction word resolves through its own key rather than interpolating the raw enum value. English output is unchanged.
33
+ - Table: the tree row expander's `aria-label` is now localized through `useTranslator()` instead of a hardcoded English string, so expand/collapse controls announce in the app's language. (#4149)
34
+ - TabList `hasDivider` reserves a gap so the hover pill and adjacent buttons no longer touch the underline
35
+ A divided TabList now reserves 4px between the tabs and the divider rail. The hover highlight sits clear of the underline, and a same-size Button placed alongside the tabs aligns to the tab baseline instead of butting the rail — so a `md` tab strip pairs with a `md` button. The selected indicator still rests on the rail. Non-divided tab lists are unchanged. TabList inside a `Toolbar` with `dividers={['bottom']}` gets the same alignment via the toolbar's own spacing.
36
+ - TreeList: focusing a parent row no longer leaks the focus-visible outline onto its descendant rows — each row's ring now resolves from its own nearest treeitem instead of matching any focused ancestor (#4130)
37
+
38
+ #### Documentation
39
+
40
+ - DropdownMenu and DropdownMenuItem: seed playground defaults so the docsite properties-tab preview renders real content instead of an empty trigger.
41
+
42
+ #### Other Changes
43
+
44
+ - Installed / global / dev runs suggest `<pm> astryx <cmd>` (e.g. `pnpm exec astryx …`), unchanged.
45
+ - One-off runs (launched via `npx`/`pnpm dlx`/`yarn dlx`/`bunx`) suggest the scoped package `<dlx> @astryxdesign/cli <cmd>`, which always resolves to us.
46
+ - Improved translator context in the shipped English catalog (`packages/core/locales/en.json`) descriptions. Sharpened ~172 entries — added screen-reader-only clarifications, ICU-composition examples, polysemy warnings, and set-pairing notes — so translators working in Crowdin get better context. No changes to `defaultMessage` values, keys, or runtime API.
47
+ - **Keyboard navigation** — the outline is now a single tab stop (roving tabindex via `useListFocus`), seated on the _active_ heading per WAI-ARIA, so tabbing into a table of contents while reading section 7 lands on section 7 rather than sending the reader back to section 1. Arrow keys move between headings, Home/End jump to the ends, and Enter/Space activate. A 40-heading table of contents costs one Tab press instead of 40, and Tab still leaves the outline in one press.
48
+ - **`onNavigateStart(id)` / `onNavigateEnd(id)`** — fire around the smooth scroll started by a click or keyboard activation, so an app can drive an arrival effect. `onNavigateEnd` resolves on `scrollend` where supported and on a settle timeout where it is not (Safari), so it also fires correctly when reduced motion collapses the scroll into an instant jump. It fires exactly once for every `onNavigateStart` — including when the user interrupts the scroll — so a "navigating" state can never leak.
49
+ - **`offset`** — the height of a fixed header overlaying the top of the scroll root. It shifts both the activation line **and** the scroll landing by the same amount, so a heading activates exactly where navigating to it puts it: below the header, not hidden underneath it. It composes with each heading's own `scroll-margin-top` (the header, then the breathing room below it) rather than replacing it — leave `offset` at 0 when nothing overlays the content and let `scroll-margin-top` do the work, since the browser already honors it.
50
+ - **`scrollContainerRef`** — scope scroll tracking to a specific container instead of auto-detecting the nearest scrollable ancestor. Fixes the table of contents whose highlight never moves inside a split pane, modal, or dashboard panel. The default (viewport) path is unchanged.
51
+ - **`hasScrollOnClick`** (default `true`) — set to `false` to own the scrolling yourself; the outline still updates the active item, the hash, and the navigate callbacks.
52
+
53
+ #### Contributors
54
+
55
+ Thanks to everyone who contributed to this release:
56
+
57
+ - @AKnassa
58
+ - @cixzhang
59
+ - @ernestt
60
+ - @is-jain
61
+ - @joeyfarina
62
+ - @josephfarina
63
+ - @MeGaurav4
64
+ - @nynexman4464
65
+
66
+ ---
67
+
3
68
  # 0.1.7
4
69
 
5
70
  #### Breaking Changes
package/README.md CHANGED
@@ -2,18 +2,27 @@
2
2
 
3
3
  Core UI components, theme system, and utilities for the Astryx design system. For project setup, see [Quick Start](#quick-start) below.
4
4
 
5
- > **Building with an AI agent?** Run **`npx astryx init`** first. It installs the Astryx CLI's component index into your `AGENTS.md`/`CLAUDE.md` so your agent discovers components, templates, and design tokens instead of guessing. Without it, agents can't see the CLI — see [XDS CLI](#xds-cli).
5
+ > **Building with an AI agent?** Add the CLI, then run `init`:
6
+ >
7
+ > ```bash
8
+ > npm install -D @astryxdesign/cli # or: pnpm add -D / yarn add -D / bun add -d
9
+ > npx astryx init # resolves to the CLI you just installed
10
+ > ```
11
+ >
12
+ > `init` writes the Astryx component index into your `AGENTS.md`/`CLAUDE.md` so your agent discovers components, templates, and design tokens instead of guessing. Need a single command without installing? Use the scoped package directly — `npx @astryxdesign/cli <cmd>` (or `pnpm dlx`/`bunx @astryxdesign/cli`). Bare `npx astryx` only works once `@astryxdesign/cli` is a dependency; before that npm resolves it to an unrelated package. See [XDS CLI](#xds-cli).
6
13
 
7
14
  ## Component Docs
8
15
 
9
- Look up any component's full API (props, types, best practices, and theming):
16
+ Look up any component's full API (props, variants, examples, best practices, and theming) via the Astryx CLI:
10
17
 
11
18
  ```bash
12
- node node_modules/@astryxdesign/core/docs.mjs Button # full docs for a component
13
- node node_modules/@astryxdesign/core/docs.mjs --list # list all components
14
- node node_modules/@astryxdesign/core/docs.mjs --list --brief # brief summaries
19
+ npx @astryxdesign/cli init # one-time: writes the component guide into AGENTS.md / CLAUDE.md
20
+ npx @astryxdesign/cli component Button # full docs for a component
21
+ npx @astryxdesign/cli component --list # list all components
15
22
  ```
16
23
 
24
+ > Use the scoped `@astryxdesign/cli` to run without installing; bare `npx astryx` only resolves once the CLI is a dependency.
25
+
17
26
  ## Page Layouts
18
27
 
19
28
  Building a full page? Start with a template rather than composing from scratch.
@@ -25,9 +34,9 @@ global navigation.
25
34
  Requires `@astryxdesign/cli` (`npm install -D @astryxdesign/cli`):
26
35
 
27
36
  ```bash
28
- npx astryx template --list # browse all page and block templates
29
- npx astryx template dashboard # emit full page source
30
- npx astryx template settings --skeleton # layout skeleton with spatial annotations
37
+ astryx template --list # browse all page and block templates
38
+ astryx template dashboard # emit full page source
39
+ astryx template settings --skeleton # layout skeleton with spatial annotations
31
40
  ```
32
41
 
33
42
  ## Astryx CLI
@@ -35,19 +44,21 @@ npx astryx template settings --skeleton # layout skeleton with spatial annotatio
35
44
  The CLI (`@astryxdesign/cli`) provides additional tooling:
36
45
 
37
46
  ```bash
38
- npx astryx --help # full listing of all commands
39
- npx astryx component Button # full docs + related block templates
40
- npx astryx docs # reference docs (principles, tokens, theming, styling)
41
- npx astryx docs theme # theming guide (Theme, defineTheme, light/dark)
42
- npx astryx docs tokens # spacing, color, radius, typography token reference
43
- npx astryx init # initialize Astryx in your project
44
- npx astryx theme build # build theme CSS for production
45
- npx astryx swizzle Button # eject component source for customization
46
- npx astryx upgrade --apply # run codemods to migrate between versions
47
- npx astryx discover # discover external Astryx packages
48
- npx astryx gap-report # report a missing capability
47
+ astryx --help # full listing of all commands
48
+ astryx component Button # full docs + related block templates
49
+ astryx docs # reference docs (principles, tokens, theming, styling)
50
+ astryx docs theme # theming guide (Theme, defineTheme, light/dark)
51
+ astryx docs tokens # spacing, color, radius, typography token reference
52
+ astryx init # initialize Astryx in your project
53
+ astryx theme build # build theme CSS for production
54
+ astryx swizzle Button # eject component source for customization
55
+ astryx upgrade --apply # run codemods to migrate between versions
56
+ astryx discover # discover external Astryx packages
57
+ astryx gap-report # report a missing capability
49
58
  ```
50
59
 
60
+ > Prefix these with your runner: `npx astryx …` / `pnpm exec astryx …` once the CLI is installed, or `npx @astryxdesign/cli …` to run without installing.
61
+
51
62
  ## Related Packages
52
63
 
53
64
  | Package | Description |
@@ -13,9 +13,13 @@
13
13
  import { type ReactNode } from 'react';
14
14
  import type { BaseProps } from '../BaseProps';
15
15
  /**
16
- * Named size options
16
+ * Named size options.
17
+ *
18
+ * Avatar uses the same abbreviated scale as Icon (`xsm`/`sm`/`md`/`lg`/`xl`),
19
+ * but the values are larger because avatars align with media rather than
20
+ * glyphs. The tiers match EPS's avatar sizes.
17
21
  */
18
- type AvatarNamedSize = 'tiny' | 'xsmall' | 'small' | 'medium' | 'large';
22
+ type AvatarNamedSize = 'xsm' | 'sm' | 'md' | 'lg' | 'xl';
19
23
  /**
20
24
  * Numeric size options (in pixels)
21
25
  */
@@ -52,8 +56,9 @@ export interface AvatarProps extends BaseProps<HTMLDivElement> {
52
56
  */
53
57
  name?: string;
54
58
  /**
55
- * The size of the avatar.
56
- * @default 'small'
59
+ * The size of the avatar. A named size (`xsm` 20px, `sm` 24px, `md` 36px,
60
+ * `lg` 48px, `xl` 128px) or a specific pixel value.
61
+ * @default 'md'
57
62
  */
58
63
  size?: AvatarSize;
59
64
  /**
@@ -75,7 +80,7 @@ export interface AvatarProps extends BaseProps<HTMLDivElement> {
75
80
  * @example
76
81
  * ```
77
82
  * <Avatar src="/user.jpg" name="John Doe" />
78
- * <Avatar name="Jane Smith" size="large" />
83
+ * <Avatar name="Jane Smith" size="xl" />
79
84
  * <Avatar src="/user.jpg" status={<OnlineIndicator />} />
80
85
  * ```
81
86
  */
@@ -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;;GAEG;AACH,KAAK,eAAe,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAExE;;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;;;OAGG;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,IAAc,EACd,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;;;;;;;;;;;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"}
@@ -50,7 +50,11 @@ const CIRCLE_EDGE_OFFSET_RATIO = (1 - 1 / Math.SQRT2) / 2;
50
50
  const INITIALS_FONT_SIZE_RATIO = 0.4;
51
51
 
52
52
  /**
53
- * Named size options
53
+ * Named size options.
54
+ *
55
+ * Avatar uses the same abbreviated scale as Icon (`xsm`/`sm`/`md`/`lg`/`xl`),
56
+ * but the values are larger because avatars align with media rather than
57
+ * glyphs. The tiers match EPS's avatar sizes.
54
58
  */
55
59
 
56
60
  /**
@@ -69,15 +73,15 @@ export function resolveSize(size) {
69
73
  return size;
70
74
  }
71
75
  switch (size) {
72
- case 'tiny':
76
+ case 'xsm':
73
77
  return 20;
74
- case 'xsmall':
78
+ case 'sm':
75
79
  return 24;
76
- case 'small':
80
+ case 'md':
77
81
  return 36;
78
- case 'medium':
82
+ case 'lg':
79
83
  return 48;
80
- case 'large':
84
+ case 'xl':
81
85
  return 128;
82
86
  }
83
87
  }
@@ -223,7 +227,7 @@ function DefaultIcon({
223
227
  * @example
224
228
  * ```
225
229
  * <Avatar src="/user.jpg" name="John Doe" />
226
- * <Avatar name="Jane Smith" size="large" />
230
+ * <Avatar name="Jane Smith" size="xl" />
227
231
  * <Avatar src="/user.jpg" status={<OnlineIndicator />} />
228
232
  * ```
229
233
  */
@@ -232,7 +236,7 @@ export function Avatar({
232
236
  'data-testid': testId,
233
237
  fallbackSrc,
234
238
  name,
235
- size = 'small',
239
+ size = 'md',
236
240
  src,
237
241
  status,
238
242
  xstyle,
@@ -2,7 +2,7 @@
2
2
  * Context that provides the resolved numeric avatar size (in pixels)
3
3
  * to child components like AvatarStatusDot.
4
4
  *
5
- * Default value of 36 matches the default 'small' avatar size.
5
+ * Default value of 36 matches the default 'md' avatar size.
6
6
  */
7
7
  export declare const AvatarSizeContext: import("react").Context<number>;
8
8
  //# sourceMappingURL=AvatarSizeContext.d.ts.map
@@ -17,7 +17,7 @@ import { createContext } from 'react';
17
17
  * Context that provides the resolved numeric avatar size (in pixels)
18
18
  * to child components like AvatarStatusDot.
19
19
  *
20
- * Default value of 36 matches the default 'small' avatar size.
20
+ * Default value of 36 matches the default 'md' avatar size.
21
21
  */
22
22
  export const AvatarSizeContext = /*#__PURE__*/createContext(36);
23
23
  AvatarSizeContext.displayName = 'AvatarSizeContext';
@@ -76,12 +76,12 @@ export interface AvatarStatusDotProps extends BaseProps<HTMLDivElement> {
76
76
  * ```
77
77
  * <Avatar
78
78
  * name="John Doe"
79
- * size="medium"
79
+ * size="lg"
80
80
  * status={<AvatarStatusDot variant="success" label="Online" />}
81
81
  * />
82
82
  * <Avatar
83
83
  * name="Jane Smith"
84
- * size="large"
84
+ * size="xl"
85
85
  * status={<AvatarStatusDot variant="success" label="Verified" icon={<CheckIcon />} />}
86
86
  * />
87
87
  * ```
@@ -148,12 +148,12 @@ const variantStyleMap = {
148
148
  * ```
149
149
  * <Avatar
150
150
  * name="John Doe"
151
- * size="medium"
151
+ * size="lg"
152
152
  * status={<AvatarStatusDot variant="success" label="Online" />}
153
153
  * />
154
154
  * <Avatar
155
155
  * name="Jane Smith"
156
- * size="large"
156
+ * size="xl"
157
157
  * status={<AvatarStatusDot variant="success" label="Verified" icon={<CheckIcon />} />}
158
158
  * />
159
159
  * ```
@@ -27,7 +27,7 @@ export interface AvatarGroupProps extends BaseProps<HTMLDivElement> {
27
27
  children: ReactNode;
28
28
  /**
29
29
  * Size applied to all avatars via context.
30
- * @default 'small'
30
+ * @default 'md'
31
31
  */
32
32
  size?: AvatarSize;
33
33
  /**
@@ -45,7 +45,7 @@ export interface AvatarGroupProps extends BaseProps<HTMLDivElement> {
45
45
  *
46
46
  * @example
47
47
  * ```
48
- * <AvatarGroup size="medium">
48
+ * <AvatarGroup size="lg">
49
49
  * {users.slice(0, 3).map(u => (
50
50
  * <Avatar key={u.id} src={u.src} name={u.name} />
51
51
  * ))}
@@ -1 +1 @@
1
- {"version":3,"file":"AvatarGroup.d.ts","sourceRoot":"","sources":["../../src/AvatarGroup/AvatarGroup.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAAU,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAC9C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,EAAc,KAAK,UAAU,EAAC,MAAM,WAAW,CAAC;AASvD,MAAM,WAAW,gBAAiB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACjE,yCAAyC;IACzC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AASD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,IAAc,EACd,aAAa,EAAE,MAAM,EACrB,YAAY,EAAE,kBAAkB,EAChC,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,gBAAgB,GAAG,SAAS,CA6B9B;yBAvCe,WAAW"}
1
+ {"version":3,"file":"AvatarGroup.d.ts","sourceRoot":"","sources":["../../src/AvatarGroup/AvatarGroup.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAAU,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAC9C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,EAAc,KAAK,UAAU,EAAC,MAAM,WAAW,CAAC;AASvD,MAAM,WAAW,gBAAiB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACjE,yCAAyC;IACzC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AASD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,IAAW,EACX,aAAa,EAAE,MAAM,EACrB,YAAY,EAAE,kBAAkB,EAChC,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,gBAAgB,GAAG,SAAS,CA6B9B;yBAvCe,WAAW"}
@@ -44,7 +44,7 @@ const styles = {
44
44
  *
45
45
  * @example
46
46
  * ```
47
- * <AvatarGroup size="medium">
47
+ * <AvatarGroup size="lg">
48
48
  * {users.slice(0, 3).map(u => (
49
49
  * <Avatar key={u.id} src={u.src} name={u.name} />
50
50
  * ))}
@@ -54,7 +54,7 @@ const styles = {
54
54
  */
55
55
  export function AvatarGroup({
56
56
  children,
57
- size = 'small',
57
+ size = 'md',
58
58
  'data-testid': testId,
59
59
  'aria-label': ariaLabelFromProps,
60
60
  xstyle,
@@ -33,7 +33,7 @@ export interface AvatarGroupOverflowProps extends Omit<BaseProps<HTMLElement>, '
33
33
  *
34
34
  * @example
35
35
  * ```
36
- * <AvatarGroup size="medium">
36
+ * <AvatarGroup size="lg">
37
37
  * {users.slice(0, 3).map(u => (
38
38
  * <Avatar key={u.id} src={u.src} name={u.name} />
39
39
  * ))}
@@ -1 +1 @@
1
- {"version":3,"file":"AvatarGroupOverflow.d.ts","sourceRoot":"","sources":["../../src/AvatarGroup/AvatarGroupOverflow.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,EAAE,EAAC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAU5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAM5C,MAAM,WAAW,wBAAyB,SAAQ,IAAI,CACpD,SAAS,CAAC,WAAW,CAAC,EACtB,SAAS,CACV;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC7B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AA6DD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,GAAG,EACH,KAAK,EACL,OAAO,EACP,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,wBAAwB,GAAG,SAAS,CAwDtC;yBAjEe,mBAAmB"}
1
+ {"version":3,"file":"AvatarGroupOverflow.d.ts","sourceRoot":"","sources":["../../src/AvatarGroup/AvatarGroupOverflow.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,EAAE,EAAC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAW5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAM5C,MAAM,WAAW,wBAAyB,SAAQ,IAAI,CACpD,SAAS,CAAC,WAAW,CAAC,EACtB,SAAS,CACV;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC7B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AA4ED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,GAAG,EACH,KAAK,EACL,OAAO,EACP,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,wBAAwB,GAAG,SAAS,CAwDtC;yBAjEe,mBAAmB"}
@@ -15,7 +15,7 @@
15
15
  import React from 'react';
16
16
  import * as stylex from '@stylexjs/stylex';
17
17
  import "../theme/tokens.stylex.js";
18
- import { colorVars, typographyVars, fontWeightVars, radiusVars } from "../theme/tokens.stylex.js";
18
+ import { colorVars, typographyVars, fontWeightVars, radiusVars, spacingVars } from "../theme/tokens.stylex.js";
19
19
  import { mergeProps } from "../utils/index.js";
20
20
  import { useAvatarGroup } from "./AvatarGroupContext.js";
21
21
  import { themeProps } from "../utils/themeProps.js";
@@ -37,13 +37,14 @@ const styles = {
37
37
  kMzoRj: "xdh2fpr",
38
38
  ksu8eU: "x1y0btm7",
39
39
  kVAM5u: "x1touxvs",
40
- kB7OPa: "x1afcbsf",
40
+ kB7OPa: "x9f619",
41
+ kg3NbH: "xf314gf",
41
42
  kKwaWg: "x14bno8m",
42
43
  $$css: true
43
44
  },
44
45
  button: {
45
46
  kkrTdU: "x1ypdohk",
46
- kmVPX3: "x1717udv",
47
+ k8WAf4: "xt970qd",
47
48
  kKwaWg: "x14bno8m xbfmc0r x1nocapi",
48
49
  kI3sdo: "x1a2a7pz x17nn4n9",
49
50
  kInvED: "x7s97pk",
@@ -55,26 +56,27 @@ const styles = {
55
56
  }
56
57
  };
57
58
  const _temp = {
58
- kGuDYH: "xdmh292",
59
+ k7Eaqz: "xkj4a21",
60
+ kZKoxP: "x16ye13r",
59
61
  "$$css": true
60
62
  };
61
63
  const _temp2 = {
64
+ kGuDYH: "xdmh292",
65
+ "$$css": true
66
+ };
67
+ const _temp3 = {
62
68
  "--_avatar-group-overlap": "xlz5hwt",
63
69
  "$$css": true
64
70
  };
65
71
  const dynamicStyles = {
66
- size: s => [{
67
- kzqmXN: s != null ? "x5lhr3w" : s,
68
- kZKoxP: s != null ? "x16ye13r" : s,
69
- $$css: true
70
- }, {
71
- "--x-width": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(s),
72
- "--x-height": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(s)
72
+ size: s => [_temp, {
73
+ "--x-minWidth": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(s + BORDER_WIDTH * 2),
74
+ "--x-height": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(s + BORDER_WIDTH * 2)
73
75
  }],
74
- fontSize: s => [_temp, {
76
+ fontSize: s => [_temp2, {
75
77
  "--x-fontSize": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(s * OVERFLOW_FONT_RATIO)
76
78
  }],
77
- overlap: offset => [_temp2, {
79
+ overlap: offset => [_temp3, {
78
80
  "--x---_avatar-group-overlap": `${offset}px` != null ? `${offset}px` : undefined
79
81
  }]
80
82
  };
@@ -85,7 +87,7 @@ const dynamicStyles = {
85
87
  *
86
88
  * @example
87
89
  * ```
88
- * <AvatarGroup size="medium">
90
+ * <AvatarGroup size="lg">
89
91
  * {users.slice(0, 3).map(u => (
90
92
  * <Avatar key={u.id} src={u.src} name={u.name} />
91
93
  * ))}
@@ -3,8 +3,9 @@
3
3
  * @input Uses React, StyleX, useScrollOverflow, useLayer, Button, Icon, theme tokens
4
4
  * @output Exports Carousel component
5
5
  * @position Horizontal scroll container with fade-edge overflow indication,
6
- * optional prev/next buttons on the top layer, scroll-snap, and a 1px
7
- * visual bleed allowance for child selection indicators.
6
+ * optional prev/next buttons on the top layer, scroll-snap, a 1px
7
+ * visual bleed allowance for child selection indicators, and Shift + wheel
8
+ * mapping so mouse users can scroll horizontally.
8
9
  *
9
10
  * SYNC: When modified, update:
10
11
  * - /packages/core/src/Carousel/index.ts (exports)
@@ -1 +1 @@
1
- {"version":3,"file":"Carousel.d.ts","sourceRoot":"","sources":["../../src/Carousel/Carousel.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAC,KAAK,SAAS,EAA2C,MAAM,OAAO,CAAC;AAc/E,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAIhD,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC9D,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,kEAAkE;IAClE,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,GAAG,CAAC,EAAE,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACpC;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;OAKG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAyJD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,QAAQ,CAAC,EACvB,GAAG,EACH,QAAQ,EACR,GAAO,EACP,UAAiB,EACjB,WAAkB,EAClB,OAAe,EACf,OAAO,EACP,YAAY,EAAE,kBAAkB,EAChC,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,SAAS,EACb,EAAE,aAAa,+BAmJf;yBAjKe,QAAQ"}
1
+ {"version":3,"file":"Carousel.d.ts","sourceRoot":"","sources":["../../src/Carousel/Carousel.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;GAaG;AAEH,OAAO,EAAC,KAAK,SAAS,EAA2C,MAAM,OAAO,CAAC;AAc/E,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAIhD,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC9D,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,kEAAkE;IAClE,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,GAAG,CAAC,EAAE,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACpC;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;OAKG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAyJD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,QAAQ,CAAC,EACvB,GAAG,EACH,QAAQ,EACR,GAAO,EACP,UAAiB,EACjB,WAAkB,EAClB,OAAe,EACf,OAAO,EACP,YAAY,EAAE,kBAAkB,EAChC,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,SAAS,EACb,EAAE,aAAa,+BA6Kf;yBA3Le,QAAQ"}
@@ -7,8 +7,9 @@
7
7
  * @input Uses React, StyleX, useScrollOverflow, useLayer, Button, Icon, theme tokens
8
8
  * @output Exports Carousel component
9
9
  * @position Horizontal scroll container with fade-edge overflow indication,
10
- * optional prev/next buttons on the top layer, scroll-snap, and a 1px
11
- * visual bleed allowance for child selection indicators.
10
+ * optional prev/next buttons on the top layer, scroll-snap, a 1px
11
+ * visual bleed allowance for child selection indicators, and Shift + wheel
12
+ * mapping so mouse users can scroll horizontally.
12
13
  *
13
14
  * SYNC: When modified, update:
14
15
  * - /packages/core/src/Carousel/index.ts (exports)
@@ -234,6 +235,34 @@ export function Carousel({
234
235
  scrollElRef.current = el;
235
236
  scrollRef(el);
236
237
  }, [scrollRef]);
238
+
239
+ // Map Shift + vertical wheel to horizontal scroll. Trackpads emit
240
+ // horizontal deltas natively, but a standard mouse only produces deltaY —
241
+ // so mouse users can't wheel-scroll a horizontal container. Shift + wheel
242
+ // is the long-established convention for horizontal scroll containers; we
243
+ // honor it by translating the vertical delta into a horizontal scroll.
244
+ //
245
+ // Only kicks in when Shift is held and the wheel is purely vertical
246
+ // (deltaX === 0), so native trackpad horizontal scrolling is untouched.
247
+ const handleWheel = useCallback(event => {
248
+ if (!event.shiftKey || event.deltaY === 0 || event.deltaX !== 0) {
249
+ return;
250
+ }
251
+ const el = scrollElRef.current;
252
+ if (!el) {
253
+ return;
254
+ }
255
+ // Nothing to scroll horizontally — let the event fall through so the page
256
+ // can scroll as it normally would.
257
+ if (el.scrollWidth <= el.clientWidth) {
258
+ return;
259
+ }
260
+ event.preventDefault();
261
+ el.scrollBy({
262
+ left: event.deltaY,
263
+ behavior: 'auto'
264
+ });
265
+ }, []);
237
266
  const scrollBy = useCallback(direction => {
238
267
  const el = scrollElRef.current;
239
268
  if (!el) {
@@ -271,6 +300,7 @@ export function Carousel({
271
300
  children: [/*#__PURE__*/_jsx("div", {
272
301
  ref: composedRef,
273
302
  tabIndex: 0,
303
+ onWheel: handleWheel,
274
304
  ...stylex.props(styles.scroller, gapStyles[gap], padding != null && paddingStyles[padding], hasSnap && styles.snap, fadeStyle),
275
305
  children: Children.map(children, child => /*#__PURE__*/_jsx("div", {
276
306
  ...{
@@ -46,7 +46,7 @@ export interface ChatMessageProps extends BaseProps<HTMLElement> {
46
46
  *
47
47
  * @example
48
48
  * ```
49
- * <ChatMessage sender="assistant" name="Navi" avatar={<Avatar name="Navi" size="small" />}>
49
+ * <ChatMessage sender="assistant" name="Navi" avatar={<Avatar name="Navi" size="md" />}>
50
50
  * <ChatMessageBubble>Hello!</ChatMessageBubble>
51
51
  * <ChatMessageMetadata timestamp="2:30 PM" />
52
52
  * </ChatMessage>
@@ -1 +1 @@
1
- {"version":3,"file":"ChatMessage.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatMessage.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAAC,KAAK,SAAS,EAAiB,MAAM,OAAO,CAAC;AAQrD,OAAO,EAGL,KAAK,iBAAiB,EACtB,KAAK,WAAW,EACjB,MAAM,eAAe,CAAC;AAEvB,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAI5C,MAAM,WAAW,gBAAiB,SAAQ,SAAS,CAAC,WAAW,CAAC;IAC9D,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC7B,MAAM,EAAE,iBAAiB,CAAC;IAC1B,QAAQ,EAAE,SAAS,CAAC;IACpB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB;AAoFD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,WAAW,CAAC,EAC1B,MAAM,EACN,QAAQ,EACR,MAAM,EACN,IAAI,EACJ,QAAQ,EACR,OAAO,EAAE,WAAW,EACpB,MAAM,EACN,SAAS,EACT,KAAK,EAAE,SAAS,EAChB,aAAa,EAAE,MAAM,EACrB,GAAG,EACH,GAAG,IAAI,EACR,EAAE,gBAAgB,+BAyFlB;yBAtGe,WAAW"}
1
+ {"version":3,"file":"ChatMessage.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatMessage.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAAC,KAAK,SAAS,EAAiB,MAAM,OAAO,CAAC;AAQrD,OAAO,EAGL,KAAK,iBAAiB,EACtB,KAAK,WAAW,EACjB,MAAM,eAAe,CAAC;AAEvB,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAI5C,MAAM,WAAW,gBAAiB,SAAQ,SAAS,CAAC,WAAW,CAAC;IAC9D,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC7B,MAAM,EAAE,iBAAiB,CAAC;IAC1B,QAAQ,EAAE,SAAS,CAAC;IACpB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB;AAoFD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,WAAW,CAAC,EAC1B,MAAM,EACN,QAAQ,EACR,MAAM,EACN,IAAI,EACJ,QAAQ,EACR,OAAO,EAAE,WAAW,EACpB,MAAM,EACN,SAAS,EACT,KAAK,EAAE,SAAS,EAChB,aAAa,EAAE,MAAM,EACrB,GAAG,EACH,GAAG,IAAI,EACR,EAAE,gBAAgB,+BA2FlB;yBAxGe,WAAW"}
@@ -122,7 +122,7 @@ const styles = {
122
122
  *
123
123
  * @example
124
124
  * ```
125
- * <ChatMessage sender="assistant" name="Navi" avatar={<Avatar name="Navi" size="small" />}>
125
+ * <ChatMessage sender="assistant" name="Navi" avatar={<Avatar name="Navi" size="md" />}>
126
126
  * <ChatMessageBubble>Hello!</ChatMessageBubble>
127
127
  * <ChatMessageMetadata timestamp="2:30 PM" />
128
128
  * </ChatMessage>
@@ -1 +1 @@
1
- {"version":3,"file":"Citation.d.ts","sourceRoot":"","sources":["../../src/Citation/Citation.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;GASG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAa/B,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAI5C,MAAM,WAAW,cAAc;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,WAAW,CAAC;IAC3D,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC7B,MAAM,EAAE,cAAc,CAAC;IACvB,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;CAC9B;AAuGD,wBAAgB,QAAQ,CAAC,EACvB,GAAG,EACH,MAAM,EACN,MAAM,EACN,OAAiB,EACjB,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,IAAI,EACR,EAAE,aAAa,GAAG,KAAK,CAAC,YAAY,CA+EpC;yBAzFe,QAAQ"}
1
+ {"version":3,"file":"Citation.d.ts","sourceRoot":"","sources":["../../src/Citation/Citation.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;GASG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAa/B,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAI5C,MAAM,WAAW,cAAc;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,WAAW,CAAC;IAC3D,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC7B,MAAM,EAAE,cAAc,CAAC;IACvB,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;CAC9B;AA2GD,wBAAgB,QAAQ,CAAC,EACvB,GAAG,EACH,MAAM,EACN,MAAM,EACN,OAAiB,EACjB,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,IAAI,EACR,EAAE,aAAa,GAAG,KAAK,CAAC,YAAY,CAiFpC;yBA3Fe,QAAQ"}
@@ -37,7 +37,6 @@ const styles = {
37
37
  kg3NbH: "xf314gf",
38
38
  keTefX: "xladpz9",
39
39
  kybGjl: "x1hl2dhg",
40
- kkrTdU: "x1ypdohk",
41
40
  k1ekBW: "x1eaenvl",
42
41
  kIyJzY: "x2rcmwa",
43
42
  kAMwcw: "xlr8y92",
@@ -49,6 +48,10 @@ const styles = {
49
48
  kZCmMZ: "x138rykx",
50
49
  $$css: true
51
50
  },
51
+ labelInteractive: {
52
+ kkrTdU: "x1ypdohk",
53
+ $$css: true
54
+ },
52
55
  labelHover: {
53
56
  kWkggS: "xe9uy6x",
54
57
  kMwMTN: "xv1l7n4 x140uwzg",
@@ -69,12 +72,15 @@ const styles = {
69
72
  kZKoxP: "x1grt7ep",
70
73
  kg3NbH: "x7a5moj",
71
74
  kybGjl: "x1hl2dhg",
72
- kkrTdU: "x1ypdohk",
73
75
  k1ekBW: "x15406qy",
74
76
  kIyJzY: "x2rcmwa",
75
77
  kAMwcw: "xlr8y92",
76
78
  $$css: true
77
79
  },
80
+ numberInteractive: {
81
+ kkrTdU: "x1ypdohk",
82
+ $$css: true
83
+ },
78
84
  numberHover: {
79
85
  kWkggS: "xgcxg3y xe9uy6x",
80
86
  $$css: true
@@ -124,7 +130,7 @@ export function Citation({
124
130
  ...linkProps,
125
131
  ...mergeProps(themeProps('citation', {
126
132
  variant
127
- }), stylex.props(styles.number, href != null && styles.numberHover, xstyle), className, style),
133
+ }), stylex.props(styles.number, href != null && styles.numberHover, href != null && styles.numberInteractive, xstyle), className, style),
128
134
  children: number
129
135
  });
130
136
  }
@@ -140,7 +146,7 @@ export function Citation({
140
146
  ...linkProps,
141
147
  ...mergeProps(themeProps('citation', {
142
148
  variant
143
- }), stylex.props(styles.label, icon != null && styles.labelWithIcon, href != null && styles.labelHover, xstyle), className, style),
149
+ }), stylex.props(styles.label, icon != null && styles.labelWithIcon, href != null && styles.labelHover, href != null && styles.labelInteractive, xstyle), className, style),
144
150
  children: [icon && /*#__PURE__*/_jsx("span", {
145
151
  ...{
146
152
  className: "x3nfvp2 x6s0dn4 xl56j7k x12xnipv x6b6gus xjspbzw x10xzikg x1litavf x1y0btm7 x14i3s5s xb3r6kr x2lah0s"
@@ -45,6 +45,16 @@ export interface CollapsibleProps extends BaseProps {
45
45
  * Controlled open state. When provided, the component is fully controlled.
46
46
  */
47
47
  isOpen?: boolean;
48
+ /**
49
+ * Whether the collapsible is disabled. A disabled item can't be toggled —
50
+ * its trigger is non-interactive and dimmed. Following the system-wide
51
+ * disabled convention, the trigger uses `aria-disabled` (not the native
52
+ * `disabled` attribute) and drops out of the tab order, staying perceivable
53
+ * to assistive tech. The content stays in whatever open state it was;
54
+ * disabling doesn't collapse an already-open item.
55
+ * @default false
56
+ */
57
+ isDisabled?: boolean;
48
58
  /**
49
59
  * Callback when the open state changes.
50
60
  */
@@ -96,7 +106,7 @@ export interface CollapsibleProps extends BaseProps {
96
106
  * </CollapsibleGroup>
97
107
  * ```
98
108
  */
99
- export declare function Collapsible({ trigger, children, defaultIsOpen, isOpen: controlledIsOpen, onOpenChange, value, ref, xstyle, className, style, ...props }: CollapsibleProps): import("react").JSX.Element;
109
+ export declare function Collapsible({ trigger, children, defaultIsOpen, isOpen: controlledIsOpen, isDisabled, onOpenChange, value, ref, xstyle, className, style, ...props }: CollapsibleProps): import("react").JSX.Element;
100
110
  export declare namespace Collapsible {
101
111
  var displayName: string;
102
112
  }