@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.
- package/CHANGELOG.md +65 -0
- package/README.md +30 -19
- package/dist/Avatar/Avatar.d.ts +10 -5
- package/dist/Avatar/Avatar.d.ts.map +1 -1
- package/dist/Avatar/Avatar.js +12 -8
- package/dist/Avatar/AvatarSizeContext.d.ts +1 -1
- package/dist/Avatar/AvatarSizeContext.js +1 -1
- package/dist/Avatar/AvatarStatusDot.d.ts +2 -2
- package/dist/Avatar/AvatarStatusDot.js +2 -2
- package/dist/AvatarGroup/AvatarGroup.d.ts +2 -2
- package/dist/AvatarGroup/AvatarGroup.d.ts.map +1 -1
- package/dist/AvatarGroup/AvatarGroup.js +2 -2
- package/dist/AvatarGroup/AvatarGroupOverflow.d.ts +1 -1
- package/dist/AvatarGroup/AvatarGroupOverflow.d.ts.map +1 -1
- package/dist/AvatarGroup/AvatarGroupOverflow.js +16 -14
- package/dist/Carousel/Carousel.d.ts +3 -2
- package/dist/Carousel/Carousel.d.ts.map +1 -1
- package/dist/Carousel/Carousel.js +32 -2
- package/dist/Chat/ChatMessage.d.ts +1 -1
- package/dist/Chat/ChatMessage.d.ts.map +1 -1
- package/dist/Chat/ChatMessage.js +1 -1
- package/dist/Citation/Citation.d.ts.map +1 -1
- package/dist/Citation/Citation.js +10 -4
- package/dist/Collapsible/Collapsible.d.ts +11 -1
- package/dist/Collapsible/Collapsible.d.ts.map +1 -1
- package/dist/Collapsible/Collapsible.js +36 -4
- package/dist/ContextMenu/ContextMenu.d.ts.map +1 -1
- package/dist/ContextMenu/ContextMenu.js +4 -3
- package/dist/ContextMenu/index.d.ts +3 -0
- package/dist/ContextMenu/index.d.ts.map +1 -1
- package/dist/ContextMenu/index.js +7 -1
- package/dist/DropdownMenu/DropdownMenu.d.ts.map +1 -1
- package/dist/DropdownMenu/DropdownMenu.js +8 -4
- package/dist/DropdownMenu/DropdownMenuCheckboxItem.d.ts +89 -0
- package/dist/DropdownMenu/DropdownMenuCheckboxItem.d.ts.map +1 -0
- package/dist/DropdownMenu/DropdownMenuCheckboxItem.js +170 -0
- package/dist/DropdownMenu/DropdownMenuContext.d.ts +17 -1
- package/dist/DropdownMenu/DropdownMenuContext.d.ts.map +1 -1
- package/dist/DropdownMenu/DropdownMenuContext.js +18 -0
- package/dist/DropdownMenu/DropdownMenuRadioGroup.d.ts +69 -0
- package/dist/DropdownMenu/DropdownMenuRadioGroup.d.ts.map +1 -0
- package/dist/DropdownMenu/DropdownMenuRadioGroup.js +70 -0
- package/dist/DropdownMenu/DropdownMenuRadioItem.d.ts +69 -0
- package/dist/DropdownMenu/DropdownMenuRadioItem.d.ts.map +1 -0
- package/dist/DropdownMenu/DropdownMenuRadioItem.js +178 -0
- package/dist/DropdownMenu/index.d.ts +5 -1
- package/dist/DropdownMenu/index.d.ts.map +1 -1
- package/dist/DropdownMenu/index.js +10 -1
- package/dist/DropdownMenu/menuItemRoles.d.ts +13 -0
- package/dist/DropdownMenu/menuItemRoles.d.ts.map +1 -0
- package/dist/DropdownMenu/menuItemRoles.js +15 -0
- package/dist/Icon/Icon.d.ts +43 -13
- package/dist/Icon/Icon.d.ts.map +1 -1
- package/dist/Icon/Icon.js +62 -27
- package/dist/Outline/Outline.d.ts +69 -3
- package/dist/Outline/Outline.d.ts.map +1 -1
- package/dist/Outline/Outline.js +129 -26
- package/dist/Outline/useScrollSpy.d.ts +27 -7
- package/dist/Outline/useScrollSpy.d.ts.map +1 -1
- package/dist/Outline/useScrollSpy.js +202 -70
- package/dist/TabList/Tab.d.ts.map +1 -1
- package/dist/TabList/Tab.js +2 -2
- package/dist/TabList/TabList.d.ts.map +1 -1
- package/dist/TabList/TabList.js +2 -0
- package/dist/TabList/TabMenu.d.ts.map +1 -1
- package/dist/TabList/TabMenu.js +1 -1
- package/dist/Table/Table.d.ts +1 -1
- package/dist/Table/Table.js +1 -1
- package/dist/Table/index.d.ts +2 -0
- package/dist/Table/index.d.ts.map +1 -1
- package/dist/Table/index.js +1 -0
- package/dist/Table/plugins/rowExpansion/useTableRowExpansion.d.ts.map +1 -1
- package/dist/Table/plugins/rowExpansion/useTableRowExpansion.js +24 -2
- package/dist/Table/plugins/sortable/useTableSortable.d.ts.map +1 -1
- package/dist/Table/plugins/sortable/useTableSortable.js +18 -7
- package/dist/Table/plugins/tree/index.d.ts +5 -0
- package/dist/Table/plugins/tree/index.d.ts.map +1 -0
- package/dist/Table/plugins/tree/index.js +4 -0
- package/dist/Table/plugins/tree/useTableTreeData.d.ts +38 -0
- package/dist/Table/plugins/tree/useTableTreeData.d.ts.map +1 -0
- package/dist/Table/plugins/tree/useTableTreeData.js +358 -0
- package/dist/Table/plugins/tree/useTableTreeState.d.ts +51 -0
- package/dist/Table/plugins/tree/useTableTreeState.d.ts.map +1 -0
- package/dist/Table/plugins/tree/useTableTreeState.js +175 -0
- package/dist/Table/useBaseTablePlugins.d.ts.map +1 -1
- package/dist/Table/useBaseTablePlugins.js +6 -3
- package/dist/Toolbar/Toolbar.d.ts.map +1 -1
- package/dist/Toolbar/Toolbar.js +8 -1
- package/dist/TreeList/TreeListItem.d.ts.map +1 -1
- package/dist/TreeList/TreeListItem.js +5 -14
- package/dist/astryx.css +24 -4
- package/dist/astryx.umd.js +54 -54
- package/dist/astryx.umd.js.map +4 -4
- package/dist/theme/Theme.js +1 -1
- package/dist/theme/defineTheme.d.ts +1 -1
- package/dist/theme/defineTheme.js +1 -1
- package/dist/theme/hct.d.ts +0 -1
- package/dist/theme/hct.d.ts.map +1 -1
- package/dist/theme/hct.js +0 -3
- package/docs.mjs +32 -461
- package/locales/en.json +200 -172
- package/locales/pseudo.json +21 -0
- package/package.json +3 -1
- package/scripts/postinstall.mjs +93 -0
- package/src/Avatar/Avatar.doc.mjs +6 -6
- package/src/Avatar/Avatar.tsx +16 -11
- package/src/Avatar/AvatarSizeContext.ts +1 -1
- package/src/Avatar/AvatarStatusDot.tsx +2 -2
- package/src/AvatarGroup/AvatarGroup.doc.mjs +1 -1
- package/src/AvatarGroup/AvatarGroup.test.tsx +17 -3
- package/src/AvatarGroup/AvatarGroup.tsx +3 -3
- package/src/AvatarGroup/AvatarGroupOverflow.doc.mjs +4 -4
- package/src/AvatarGroup/AvatarGroupOverflow.tsx +21 -5
- package/src/Carousel/Carousel.doc.mjs +1 -0
- package/src/Carousel/Carousel.test.tsx +96 -1
- package/src/Carousel/Carousel.tsx +29 -2
- package/src/Chat/Chat.doc.mjs +1 -1
- package/src/Chat/ChatMessage.tsx +4 -2
- package/src/CheckboxInput/CheckboxInput.doc.mjs +1 -1
- package/src/Citation/Citation.test.tsx +51 -0
- package/src/Citation/Citation.tsx +8 -2
- package/src/Collapsible/Collapsible.doc.mjs +7 -0
- package/src/Collapsible/Collapsible.test.tsx +80 -0
- package/src/Collapsible/Collapsible.tsx +58 -5
- package/src/ContextMenu/ContextMenu.test.tsx +75 -1
- package/src/ContextMenu/ContextMenu.tsx +10 -5
- package/src/ContextMenu/index.ts +15 -0
- package/src/DropdownMenu/DropdownMenu.doc.mjs +23 -0
- package/src/DropdownMenu/DropdownMenu.tsx +11 -6
- package/src/DropdownMenu/DropdownMenuCheckboxItem.doc.mjs +95 -0
- package/src/DropdownMenu/DropdownMenuCheckboxItem.tsx +237 -0
- package/src/DropdownMenu/DropdownMenuContext.tsx +29 -1
- package/src/DropdownMenu/DropdownMenuItem.doc.mjs +7 -1
- package/src/DropdownMenu/DropdownMenuRadioGroup.doc.mjs +80 -0
- package/src/DropdownMenu/DropdownMenuRadioGroup.tsx +119 -0
- package/src/DropdownMenu/DropdownMenuRadioItem.doc.mjs +80 -0
- package/src/DropdownMenu/DropdownMenuRadioItem.tsx +232 -0
- package/src/DropdownMenu/DropdownMenuSelectable.test.tsx +163 -0
- package/src/DropdownMenu/index.ts +23 -3
- package/src/DropdownMenu/menuItemRoles.ts +22 -0
- package/src/Field/Field.doc.mjs +1 -1
- package/src/Field/FieldLabel.doc.mjs +1 -1
- package/src/Icon/Icon.doc.mjs +12 -0
- package/src/Icon/Icon.test.tsx +142 -0
- package/src/Icon/Icon.tsx +98 -30
- package/src/Item/Item.doc.mjs +1 -1
- package/src/NumberInput/NumberInput.doc.mjs +2 -2
- package/src/Outline/Outline.doc.mjs +123 -3
- package/src/Outline/Outline.test.tsx +735 -0
- package/src/Outline/Outline.tsx +184 -33
- package/src/Outline/useScrollSpy.ts +248 -72
- package/src/Selector/SelectorOption.doc.mjs +1 -1
- package/src/SideNav/SideNavItem.doc.mjs +2 -2
- package/src/Switch/Switch.doc.mjs +1 -1
- package/src/TabList/Tab.tsx +5 -1
- package/src/TabList/TabList.doc.mjs +3 -3
- package/src/TabList/TabList.test.tsx +66 -0
- package/src/TabList/TabList.tsx +8 -0
- package/src/TabList/TabMenu.tsx +4 -1
- package/src/Table/Table.doc.mjs +2 -0
- package/src/Table/Table.tsx +1 -1
- package/src/Table/index.ts +7 -0
- package/src/Table/plugins/rowExpansion/useTableRowExpansion.test.tsx +90 -1
- package/src/Table/plugins/rowExpansion/useTableRowExpansion.tsx +37 -5
- package/src/Table/plugins/sortable/useTableSortable.test.tsx +95 -9
- package/src/Table/plugins/sortable/useTableSortable.tsx +23 -7
- package/src/Table/plugins/tree/index.ts +12 -0
- package/src/Table/plugins/tree/useTableTreeData-perf.test.tsx +163 -0
- package/src/Table/plugins/tree/useTableTreeData.test.tsx +594 -0
- package/src/Table/plugins/tree/useTableTreeData.tsx +495 -0
- package/src/Table/plugins/tree/useTableTreeState.test.tsx +636 -0
- package/src/Table/plugins/tree/useTableTreeState.tsx +253 -0
- package/src/Table/useBaseTablePlugins.ts +6 -2
- package/src/Table/useTableTreeData.doc.mjs +75 -0
- package/src/Table/useTableTreeState.doc.mjs +98 -0
- package/src/TextArea/TextArea.doc.mjs +1 -1
- package/src/TextInput/TextInput.doc.mjs +1 -1
- package/src/Toolbar/Toolbar.tsx +10 -3
- package/src/TreeList/TreeList.test.tsx +32 -1
- package/src/TreeList/TreeListItem.tsx +19 -10
- package/src/docs-script.test.mjs +18 -13
- package/src/postinstall.test.mjs +71 -0
- package/src/theme/Theme.doc.mjs +4 -4
- package/src/theme/Theme.tsx +1 -1
- package/src/theme/defineTheme.ts +1 -1
- package/src/theme/hct.ts +0 -4
- package/dist/TreeList/treeListItem.markers.stylex.d.ts +0 -16
- package/dist/TreeList/treeListItem.markers.stylex.d.ts.map +0 -1
- package/dist/TreeList/treeListItem.markers.stylex.js +0 -22
- 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?**
|
|
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,
|
|
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
|
-
|
|
13
|
-
|
|
14
|
-
|
|
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
|
-
|
|
29
|
-
|
|
30
|
-
|
|
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
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
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 |
|
package/dist/Avatar/Avatar.d.ts
CHANGED
|
@@ -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 = '
|
|
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
|
-
*
|
|
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="
|
|
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
|
|
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"}
|
package/dist/Avatar/Avatar.js
CHANGED
|
@@ -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 '
|
|
76
|
+
case 'xsm':
|
|
73
77
|
return 20;
|
|
74
|
-
case '
|
|
78
|
+
case 'sm':
|
|
75
79
|
return 24;
|
|
76
|
-
case '
|
|
80
|
+
case 'md':
|
|
77
81
|
return 36;
|
|
78
|
-
case '
|
|
82
|
+
case 'lg':
|
|
79
83
|
return 48;
|
|
80
|
-
case '
|
|
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="
|
|
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 = '
|
|
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 '
|
|
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 '
|
|
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="
|
|
79
|
+
* size="lg"
|
|
80
80
|
* status={<AvatarStatusDot variant="success" label="Online" />}
|
|
81
81
|
* />
|
|
82
82
|
* <Avatar
|
|
83
83
|
* name="Jane Smith"
|
|
84
|
-
* size="
|
|
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="
|
|
151
|
+
* size="lg"
|
|
152
152
|
* status={<AvatarStatusDot variant="success" label="Online" />}
|
|
153
153
|
* />
|
|
154
154
|
* <Avatar
|
|
155
155
|
* name="Jane Smith"
|
|
156
|
-
* size="
|
|
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 '
|
|
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="
|
|
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,
|
|
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="
|
|
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 = '
|
|
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="
|
|
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;
|
|
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: "
|
|
40
|
+
kB7OPa: "x9f619",
|
|
41
|
+
kg3NbH: "xf314gf",
|
|
41
42
|
kKwaWg: "x14bno8m",
|
|
42
43
|
$$css: true
|
|
43
44
|
},
|
|
44
45
|
button: {
|
|
45
46
|
kkrTdU: "x1ypdohk",
|
|
46
|
-
|
|
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
|
-
|
|
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
|
-
|
|
68
|
-
|
|
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 => [
|
|
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 => [
|
|
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="
|
|
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,
|
|
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
|
|
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,
|
|
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="
|
|
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,+
|
|
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"}
|
package/dist/Chat/ChatMessage.js
CHANGED
|
@@ -122,7 +122,7 @@ const styles = {
|
|
|
122
122
|
*
|
|
123
123
|
* @example
|
|
124
124
|
* ```
|
|
125
|
-
* <ChatMessage sender="assistant" name="Navi" avatar={<Avatar name="Navi" size="
|
|
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;
|
|
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
|
}
|