@astryxdesign/core 0.1.7 → 0.1.8-canary.08a0957
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/AppShell/AppShell.d.ts.map +1 -1
- package/dist/AppShell/AppShell.js +6 -2
- package/dist/AppShell/AppShellMobileContext.d.ts +8 -0
- package/dist/AppShell/AppShellMobileContext.d.ts.map +1 -1
- 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/Banner/Banner.d.ts.map +1 -1
- package/dist/Button/Button.d.ts.map +1 -1
- package/dist/Button/Button.js +1 -0
- 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/ChatLayout.d.ts.map +1 -1
- package/dist/Chat/ChatLayoutScrollButton.d.ts.map +1 -1
- 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/Chat/ChatMessageMetadata.d.ts.map +1 -1
- package/dist/Chat/ChatSendButton.d.ts.map +1 -1
- package/dist/Chat/useTriggerMenu.d.ts.map +1 -1
- package/dist/Citation/Citation.d.ts.map +1 -1
- package/dist/Citation/Citation.js +10 -4
- package/dist/CodeBlock/CodeBlock.d.ts.map +1 -1
- 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/CommandPalette/CommandPaletteInput.d.ts +7 -1
- package/dist/CommandPalette/CommandPaletteInput.d.ts.map +1 -1
- package/dist/CommandPalette/CommandPaletteInput.js +6 -1
- 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/DateTimeInput/DateTimeInput.d.ts.map +1 -1
- package/dist/Dialog/Dialog.d.ts.map +1 -1
- package/dist/Dialog/Dialog.js +2 -1
- package/dist/DropdownMenu/DropdownMenu.d.ts.map +1 -1
- package/dist/DropdownMenu/DropdownMenu.js +8 -4
- package/dist/DropdownMenu/DropdownMenuCheckboxItem.d.ts +88 -0
- package/dist/DropdownMenu/DropdownMenuCheckboxItem.d.ts.map +1 -0
- package/dist/DropdownMenu/DropdownMenuCheckboxItem.js +169 -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 +68 -0
- package/dist/DropdownMenu/DropdownMenuRadioGroup.d.ts.map +1 -0
- package/dist/DropdownMenu/DropdownMenuRadioGroup.js +69 -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/FileInput/FileInput.d.ts.map +1 -1
- 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/MobileNav/MobileNav.d.ts.map +1 -1
- package/dist/MobileNav/MobileNav.js +6 -1
- package/dist/MobileNav/MobileNavToggle.d.ts.map +1 -1
- package/dist/MobileNav/MobileNavToggle.js +4 -0
- package/dist/MultiSelector/MultiSelector.d.ts.map +1 -1
- package/dist/MultiSelector/MultiSelector.js +36 -10
- package/dist/NumberInput/NumberInput.d.ts.map +1 -1
- package/dist/Outline/Outline.d.ts +68 -3
- package/dist/Outline/Outline.d.ts.map +1 -1
- package/dist/Outline/Outline.js +128 -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/PowerSearch/usePowerSearchSource.d.ts.map +1 -1
- package/dist/SideNav/SideNavCollapseButton.d.ts.map +1 -1
- package/dist/SideNav/SideNavItem.d.ts.map +1 -1
- 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 +4 -0
- package/dist/Table/index.d.ts.map +1 -1
- package/dist/Table/index.js +2 -0
- package/dist/Table/plugins/groupedRows/useTableGroupedRows.d.ts.map +1 -1
- package/dist/Table/plugins/rowExpansion/useTableRowExpansion.d.ts.map +1 -1
- package/dist/Table/plugins/rowExpansion/useTableRowExpansion.js +24 -2
- package/dist/Table/plugins/rowStatus/index.d.ts +3 -0
- package/dist/Table/plugins/rowStatus/index.d.ts.map +1 -0
- package/dist/Table/plugins/rowStatus/index.js +3 -0
- package/dist/Table/plugins/rowStatus/useTableRowStatus.d.ts +60 -0
- package/dist/Table/plugins/rowStatus/useTableRowStatus.d.ts.map +1 -0
- package/dist/Table/plugins/rowStatus/useTableRowStatus.js +145 -0
- 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 +26 -4
- package/dist/astryx.umd.js +54 -54
- package/dist/astryx.umd.js.map +4 -4
- package/dist/authoring/doc.d.ts.map +1 -1
- 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/AppShell/AppShell.tsx +6 -0
- package/src/AppShell/AppShellMobileContext.tsx +8 -0
- package/src/AppShell/useAppShellMobile.doc.mjs +8 -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/Banner/Banner.tsx +10 -2
- package/src/Button/Button.test.tsx +21 -0
- package/src/Button/Button.tsx +1 -0
- 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/ChatLayout.tsx +3 -1
- package/src/Chat/ChatLayoutScrollButton.tsx +3 -1
- package/src/Chat/ChatMessage.tsx +4 -2
- package/src/Chat/ChatMessageMetadata.tsx +1 -2
- package/src/Chat/ChatSendButton.tsx +5 -1
- package/src/Chat/useTriggerMenu.tsx +3 -1
- 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/CodeBlock/CodeBlock.tsx +3 -1
- 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/CommandPalette/CommandPaletteInput.doc.mjs +26 -9
- package/src/CommandPalette/CommandPaletteInput.test.tsx +34 -0
- package/src/CommandPalette/CommandPaletteInput.tsx +11 -0
- package/src/ContextMenu/ContextMenu.test.tsx +75 -1
- package/src/ContextMenu/ContextMenu.tsx +10 -5
- package/src/ContextMenu/index.ts +15 -0
- package/src/DateTimeInput/DateTimeInput.tsx +3 -1
- package/src/Dialog/Dialog.tsx +12 -2
- 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 +236 -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 +118 -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/FileInput/FileInput.tsx +4 -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/MobileNav/MobileNav.tsx +12 -1
- package/src/MobileNav/MobileNavToggle.test.tsx +116 -0
- package/src/MobileNav/MobileNavToggle.tsx +9 -1
- package/src/MultiSelector/MultiSelector.doc.mjs +4 -2
- package/src/MultiSelector/MultiSelector.test.tsx +79 -1
- package/src/MultiSelector/MultiSelector.tsx +51 -11
- package/src/NumberInput/NumberInput.doc.mjs +2 -2
- package/src/NumberInput/NumberInput.tsx +1 -2
- package/src/Outline/Outline.doc.mjs +123 -3
- package/src/Outline/Outline.test.tsx +735 -0
- package/src/Outline/Outline.tsx +183 -33
- package/src/Outline/useScrollSpy.ts +248 -72
- package/src/PowerSearch/usePowerSearchSource.ts +1 -2
- package/src/Selector/SelectorOption.doc.mjs +1 -1
- package/src/SideNav/SideNavCollapseButton.tsx +6 -1
- package/src/SideNav/SideNavItem.doc.mjs +2 -2
- package/src/SideNav/SideNavItem.tsx +5 -1
- 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 +12 -0
- package/src/Table/plugins/groupedRows/useTableGroupedRows.tsx +6 -2
- package/src/Table/plugins/rowExpansion/useTableRowExpansion.test.tsx +90 -1
- package/src/Table/plugins/rowExpansion/useTableRowExpansion.tsx +37 -5
- package/src/Table/plugins/rowStatus/index.ts +7 -0
- package/src/Table/plugins/rowStatus/useTableRowStatus.test.tsx +138 -0
- package/src/Table/plugins/rowStatus/useTableRowStatus.tsx +189 -0
- 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/useTableRowStatus.doc.mjs +30 -0
- 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/authoring/doc.ts +1 -3
- 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
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"menuItemRoles.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/menuItemRoles.ts"],"names":[],"mappings":"AAEA;;;;;;;;;GASG;AAEH,eAAO,MAAM,eAAe,EAAE,WAAW,CAAC,MAAM,CAI9C,CAAC;AAEH,eAAO,MAAM,kBAAkB,EAAE,MAErB,CAAC"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
// Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* @file menuItemRoles.ts
|
|
5
|
+
* @output Shared menu-item role set + focus selector.
|
|
6
|
+
* @position Internal; used by DropdownMenu and ContextMenu so their
|
|
7
|
+
* roving-focus, typeahead, and Enter/Space activation stay in sync.
|
|
8
|
+
*
|
|
9
|
+
* Includes the selectable items (menuitemradio/menuitemcheckbox) alongside
|
|
10
|
+
* plain menuitem so checkbox/radio rows are reachable by arrow keys, typeahead,
|
|
11
|
+
* and Enter/Space — not just role="menuitem".
|
|
12
|
+
*/
|
|
13
|
+
|
|
14
|
+
export const MENU_ITEM_ROLES = new Set(['menuitem', 'menuitemradio', 'menuitemcheckbox']);
|
|
15
|
+
export const MENU_ITEM_SELECTOR = [...MENU_ITEM_ROLES].map(role => `[role="${role}"]:not([aria-disabled="true"])`).join(',');
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FileInput.d.ts","sourceRoot":"","sources":["../../src/FileInput/FileInput.tsx"],"names":[],"mappings":"AAsCA,OAAO,EAGL,KAAK,WAAW,EAEjB,MAAM,UAAU,CAAC;AAMlB,YAAY,EACV,WAAW,IAAI,eAAe,EAC9B,eAAe,IAAI,mBAAmB,GACvC,MAAM,UAAU,CAAC;AAElB,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AA0N9C,MAAM,WAAW,cAAe,SAAQ,IAAI,CAC1C,SAAS,EACT,UAAU,GAAG,cAAc,GAAG,OAAO,CACtC;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAClC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,KAAK,EAAE,IAAI,GAAG,IAAI,EAAE,GAAG,IAAI,CAAC;IAC5B;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,IAAI,GAAG,IAAI,EAAE,GAAG,IAAI,KAAK,IAAI,CAAC;IAChD;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,GAAG,IAAI,EAAE,GAAG,IAAI,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC9D;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;;;;;;;;;;;;;;OAmBG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IAC5B;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;;;;;;GAOG;AACH,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,aAAqB,EACrB,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,MAAM,EACN,UAAkB,EAClB,OAAO,EACP,QAAQ,EACR,UAAkB,EAClB,eAAe,EACf,UAAkB,EAClB,SAAiB,EACjB,MAAM,EAAE,UAAU,EAClB,WAAW,EACX,WAAW,EACX,IAAc,EACd,UAAkB,EAClB,YAAY,EACZ,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,cAAc,+
|
|
1
|
+
{"version":3,"file":"FileInput.d.ts","sourceRoot":"","sources":["../../src/FileInput/FileInput.tsx"],"names":[],"mappings":"AAsCA,OAAO,EAGL,KAAK,WAAW,EAEjB,MAAM,UAAU,CAAC;AAMlB,YAAY,EACV,WAAW,IAAI,eAAe,EAC9B,eAAe,IAAI,mBAAmB,GACvC,MAAM,UAAU,CAAC;AAElB,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AA0N9C,MAAM,WAAW,cAAe,SAAQ,IAAI,CAC1C,SAAS,EACT,UAAU,GAAG,cAAc,GAAG,OAAO,CACtC;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAClC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,KAAK,EAAE,IAAI,GAAG,IAAI,EAAE,GAAG,IAAI,CAAC;IAC5B;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,IAAI,GAAG,IAAI,EAAE,GAAG,IAAI,KAAK,IAAI,CAAC;IAChD;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,GAAG,IAAI,EAAE,GAAG,IAAI,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC9D;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;;;;;;;;;;;;;;OAmBG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IAC5B;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;;;;;;GAOG;AACH,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,aAAqB,EACrB,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,MAAM,EACN,UAAkB,EAClB,OAAO,EACP,QAAQ,EACR,UAAkB,EAClB,eAAe,EACf,UAAkB,EAClB,SAAiB,EACjB,MAAM,EAAE,UAAU,EAClB,WAAW,EACX,WAAW,EACX,IAAc,EACd,UAAkB,EAClB,YAAY,EACZ,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,cAAc,+BAyXhB;yBAnZe,SAAS"}
|
package/dist/Icon/Icon.d.ts
CHANGED
|
@@ -82,23 +82,28 @@ declare const colorStyles: Readonly<{
|
|
|
82
82
|
/**
|
|
83
83
|
* Size styles for direct SVG icon components.
|
|
84
84
|
* Uses width/height only — SVG components handle their own viewBox scaling.
|
|
85
|
+
*
|
|
86
|
+
* Sizes are expressed in `rem` (relative to the root font-size) so icons scale
|
|
87
|
+
* in step with text when the document font-size changes, matching the rest of
|
|
88
|
+
* the design system's rem-based type scale. Values are the px-equivalents at a
|
|
89
|
+
* 16px root: 12px → 0.75rem, 16px → 1rem, 20px → 1.25rem, 24px → 1.5rem.
|
|
85
90
|
*/
|
|
86
91
|
declare const sizeStyles: Readonly<{
|
|
87
92
|
readonly xsm: Readonly<{
|
|
88
|
-
readonly width: stylex.StyleXClassNameFor<"width",
|
|
89
|
-
readonly height: stylex.StyleXClassNameFor<"height",
|
|
93
|
+
readonly width: stylex.StyleXClassNameFor<"width", "0.75rem">;
|
|
94
|
+
readonly height: stylex.StyleXClassNameFor<"height", "0.75rem">;
|
|
90
95
|
}>;
|
|
91
96
|
readonly sm: Readonly<{
|
|
92
|
-
readonly width: stylex.StyleXClassNameFor<"width",
|
|
93
|
-
readonly height: stylex.StyleXClassNameFor<"height",
|
|
97
|
+
readonly width: stylex.StyleXClassNameFor<"width", "1rem">;
|
|
98
|
+
readonly height: stylex.StyleXClassNameFor<"height", "1rem">;
|
|
94
99
|
}>;
|
|
95
100
|
readonly md: Readonly<{
|
|
96
|
-
readonly width: stylex.StyleXClassNameFor<"width",
|
|
97
|
-
readonly height: stylex.StyleXClassNameFor<"height",
|
|
101
|
+
readonly width: stylex.StyleXClassNameFor<"width", "1.25rem">;
|
|
102
|
+
readonly height: stylex.StyleXClassNameFor<"height", "1.25rem">;
|
|
98
103
|
}>;
|
|
99
104
|
readonly lg: Readonly<{
|
|
100
|
-
readonly width: stylex.StyleXClassNameFor<"width",
|
|
101
|
-
readonly height: stylex.StyleXClassNameFor<"height",
|
|
105
|
+
readonly width: stylex.StyleXClassNameFor<"width", "1.5rem">;
|
|
106
|
+
readonly height: stylex.StyleXClassNameFor<"height", "1.5rem">;
|
|
102
107
|
}>;
|
|
103
108
|
}>;
|
|
104
109
|
export type IconColor = keyof typeof colorStyles;
|
|
@@ -128,13 +133,38 @@ export interface IconProps extends Omit<SVGProps<SVGSVGElement>, 'ref' | 'color'
|
|
|
128
133
|
color?: IconColor;
|
|
129
134
|
/**
|
|
130
135
|
* The size of the icon.
|
|
131
|
-
* - 'xsm': 12px
|
|
132
|
-
* - 'sm': 16px
|
|
133
|
-
* - 'md': 20px
|
|
134
|
-
* - 'lg': 24px
|
|
136
|
+
* - 'xsm': 0.75rem (12px at a 16px root)
|
|
137
|
+
* - 'sm': 1rem (16px at a 16px root)
|
|
138
|
+
* - 'md': 1.25rem (20px at a 16px root)
|
|
139
|
+
* - 'lg': 1.5rem (24px at a 16px root)
|
|
135
140
|
* @default 'md'
|
|
136
141
|
*/
|
|
137
142
|
size?: IconSize;
|
|
143
|
+
/**
|
|
144
|
+
* Accessible name for the icon. Set this only when the icon is MEANINGFUL on
|
|
145
|
+
* its own — a standalone status glyph or an icon-only indicator with no
|
|
146
|
+
* adjacent text conveying the same information. Providing it exposes the icon
|
|
147
|
+
* to assistive tech as `role="img"` with this string as the accessible name
|
|
148
|
+
* (via `aria-label`) and drops the default `aria-hidden="true"`.
|
|
149
|
+
*
|
|
150
|
+
* Omit it (the default) for decorative icons — the common case, e.g. an icon
|
|
151
|
+
* beside a text label — and the icon stays hidden from assistive tech
|
|
152
|
+
* (`aria-hidden="true"`). An empty string (`''`) is treated the same as
|
|
153
|
+
* omitting it (decorative), since an empty accessible name is meaningless.
|
|
154
|
+
*
|
|
155
|
+
* Don't set `label` when an interactive parent (Button, IconButton, link)
|
|
156
|
+
* already names the control — that produces a duplicate announcement.
|
|
157
|
+
*
|
|
158
|
+
* @example
|
|
159
|
+
* ```
|
|
160
|
+
* // Meaningful, standalone icon
|
|
161
|
+
* <Icon icon="success" label="Completed" />
|
|
162
|
+
*
|
|
163
|
+
* // Decorative icon (default) — omit label
|
|
164
|
+
* <Icon icon="search" />
|
|
165
|
+
* ```
|
|
166
|
+
*/
|
|
167
|
+
label?: string;
|
|
138
168
|
}
|
|
139
169
|
/**
|
|
140
170
|
* Renders an icon from the icon registry or a custom SVG component.
|
|
@@ -144,7 +174,7 @@ export interface IconProps extends Omit<SVGProps<SVGSVGElement>, 'ref' | 'color'
|
|
|
144
174
|
* <Icon icon="close" size="md" color="primary" />
|
|
145
175
|
* ```
|
|
146
176
|
*/
|
|
147
|
-
export declare function Icon({ icon, color, size, ref, ...props }: IconProps): React.JSX.Element;
|
|
177
|
+
export declare function Icon({ icon, color, size, label, ref, ...props }: IconProps): React.JSX.Element;
|
|
148
178
|
export declare namespace Icon {
|
|
149
179
|
var displayName: string;
|
|
150
180
|
}
|
package/dist/Icon/Icon.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../src/Icon/Icon.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;GAkBG;AAEH,OAAO,KAAK,EAAE,EAAC,KAAK,aAAa,EAAE,KAAK,QAAQ,EAAC,MAAM,OAAO,CAAC;AAC/D,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAG3C,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,sBAAsB,CAAC;AAqBnD,QAAA,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2Df,CAAC;AAEH
|
|
1
|
+
{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../src/Icon/Icon.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;GAkBG;AAEH,OAAO,KAAK,EAAE,EAAC,KAAK,aAAa,EAAE,KAAK,QAAQ,EAAC,MAAM,OAAO,CAAC;AAC/D,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAG3C,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,sBAAsB,CAAC;AAqBnD,QAAA,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2Df,CAAC;AAEH;;;;;;;;GAQG;AACH,QAAA,MAAM,UAAU;;;;;;;;;;;;;;;;;EAiBd,CAAC;AAyCH,MAAM,MAAM,SAAS,GAAG,MAAM,OAAO,WAAW,CAAC;AACjD,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,UAAU,CAAC;AAE/C;;;GAGG;AACH,MAAM,MAAM,QAAQ,GAAG,aAAa,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC;AAE9D;;;GAGG;AACH,MAAM,WAAW,SAAU,SAAQ,IAAI,CACrC,QAAQ,CAAC,aAAa,CAAC,EACvB,KAAK,GAAG,OAAO,CAChB;IACC,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;IAC/B;;;;OAIG;IACH,IAAI,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC1B;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;;;;;;;;;;;;;;;;;;;;;;OAuBG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAyBD;;;;;;;GAOG;AACH,wBAAgB,IAAI,CAAC,EACnB,IAAI,EACJ,KAAiB,EACjB,IAAW,EACX,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,SAAS,qBAkCX;yBAzCe,IAAI;;;AA4FpB;;;;;;GAMG;AACH,wBAAgB,cAAc,CAC5B,IAAI,EAAE,KAAK,CAAC,SAAS,GAAG,QAAQ,EAChC,KAAK,CAAC,EAAE;IAAC,IAAI,CAAC,EAAE,QAAQ,CAAC;IAAC,KAAK,CAAC,EAAE,SAAS,CAAA;CAAC,GAC3C,KAAK,CAAC,SAAS,CAYjB"}
|
package/dist/Icon/Icon.js
CHANGED
|
@@ -128,26 +128,31 @@ const colorStyles = {
|
|
|
128
128
|
/**
|
|
129
129
|
* Size styles for direct SVG icon components.
|
|
130
130
|
* Uses width/height only — SVG components handle their own viewBox scaling.
|
|
131
|
+
*
|
|
132
|
+
* Sizes are expressed in `rem` (relative to the root font-size) so icons scale
|
|
133
|
+
* in step with text when the document font-size changes, matching the rest of
|
|
134
|
+
* the design system's rem-based type scale. Values are the px-equivalents at a
|
|
135
|
+
* 16px root: 12px → 0.75rem, 16px → 1rem, 20px → 1.25rem, 24px → 1.5rem.
|
|
131
136
|
*/
|
|
132
137
|
const sizeStyles = {
|
|
133
138
|
xsm: {
|
|
134
|
-
kzqmXN: "
|
|
135
|
-
kZKoxP: "
|
|
139
|
+
kzqmXN: "x1jw3ynk",
|
|
140
|
+
kZKoxP: "xvle69y",
|
|
136
141
|
$$css: true
|
|
137
142
|
},
|
|
138
143
|
sm: {
|
|
139
|
-
kzqmXN: "
|
|
140
|
-
kZKoxP: "
|
|
144
|
+
kzqmXN: "xcdlrvm",
|
|
145
|
+
kZKoxP: "x1l36t39",
|
|
141
146
|
$$css: true
|
|
142
147
|
},
|
|
143
148
|
md: {
|
|
144
|
-
kzqmXN: "
|
|
145
|
-
kZKoxP: "
|
|
149
|
+
kzqmXN: "xwqq7k2",
|
|
150
|
+
kZKoxP: "xmll18r",
|
|
146
151
|
$$css: true
|
|
147
152
|
},
|
|
148
153
|
lg: {
|
|
149
|
-
kzqmXN: "
|
|
150
|
-
kZKoxP: "
|
|
154
|
+
kzqmXN: "xp8d6y2",
|
|
155
|
+
kZKoxP: "xam5rvr",
|
|
151
156
|
$$css: true
|
|
152
157
|
}
|
|
153
158
|
};
|
|
@@ -155,30 +160,33 @@ const sizeStyles = {
|
|
|
155
160
|
/**
|
|
156
161
|
* Size styles for string-based (registry) icons.
|
|
157
162
|
* Includes fontSize so that 1em-based icons from the registry scale correctly.
|
|
163
|
+
*
|
|
164
|
+
* Expressed in `rem` for the same reason as {@link sizeStyles} — icons track the
|
|
165
|
+
* root font-size instead of being locked to absolute pixels.
|
|
158
166
|
*/
|
|
159
167
|
const spanSizeStyles = {
|
|
160
168
|
xsm: {
|
|
161
|
-
kzqmXN: "
|
|
162
|
-
kZKoxP: "
|
|
163
|
-
kGuDYH: "
|
|
169
|
+
kzqmXN: "x1jw3ynk",
|
|
170
|
+
kZKoxP: "xvle69y",
|
|
171
|
+
kGuDYH: "xboafo0",
|
|
164
172
|
$$css: true
|
|
165
173
|
},
|
|
166
174
|
sm: {
|
|
167
|
-
kzqmXN: "
|
|
168
|
-
kZKoxP: "
|
|
169
|
-
kGuDYH: "
|
|
175
|
+
kzqmXN: "xcdlrvm",
|
|
176
|
+
kZKoxP: "x1l36t39",
|
|
177
|
+
kGuDYH: "x1jchvi3",
|
|
170
178
|
$$css: true
|
|
171
179
|
},
|
|
172
180
|
md: {
|
|
173
|
-
kzqmXN: "
|
|
174
|
-
kZKoxP: "
|
|
175
|
-
kGuDYH: "
|
|
181
|
+
kzqmXN: "xwqq7k2",
|
|
182
|
+
kZKoxP: "xmll18r",
|
|
183
|
+
kGuDYH: "x1603h9y",
|
|
176
184
|
$$css: true
|
|
177
185
|
},
|
|
178
186
|
lg: {
|
|
179
|
-
kzqmXN: "
|
|
180
|
-
kZKoxP: "
|
|
181
|
-
kGuDYH: "
|
|
187
|
+
kzqmXN: "xp8d6y2",
|
|
188
|
+
kZKoxP: "xam5rvr",
|
|
189
|
+
kGuDYH: "xngnso2",
|
|
182
190
|
$$css: true
|
|
183
191
|
}
|
|
184
192
|
};
|
|
@@ -197,6 +205,26 @@ const spanSizeStyles = {
|
|
|
197
205
|
* Extends SVGProps to allow passing additional SVG attributes (used when icon is a component).
|
|
198
206
|
*/
|
|
199
207
|
|
|
208
|
+
/**
|
|
209
|
+
* Derives the ARIA attributes for an icon from its `label` prop.
|
|
210
|
+
*
|
|
211
|
+
* - Non-empty `label` → meaningful image: `role="img"` + `aria-label`, and no
|
|
212
|
+
* `aria-hidden` (an `aria-hidden` element is removed from the accessibility
|
|
213
|
+
* tree, so its accessible name would be ignored).
|
|
214
|
+
* - Omitted or empty `label` → decorative default: `aria-hidden="true"`.
|
|
215
|
+
*
|
|
216
|
+
* The result is spread BEFORE `{...props}` in both render modes so an explicit
|
|
217
|
+
* `aria-hidden` / `role` / `aria-label` from the consumer always wins.
|
|
218
|
+
*/
|
|
219
|
+
function getIconA11yProps(label) {
|
|
220
|
+
return label != null && label !== '' ? {
|
|
221
|
+
role: 'img',
|
|
222
|
+
'aria-label': label
|
|
223
|
+
} : {
|
|
224
|
+
'aria-hidden': 'true'
|
|
225
|
+
};
|
|
226
|
+
}
|
|
227
|
+
|
|
200
228
|
// =============================================================================
|
|
201
229
|
// Component
|
|
202
230
|
// =============================================================================
|
|
@@ -213,15 +241,21 @@ export function Icon({
|
|
|
213
241
|
icon,
|
|
214
242
|
color = 'inherit',
|
|
215
243
|
size = 'md',
|
|
244
|
+
label,
|
|
216
245
|
ref,
|
|
217
246
|
...props
|
|
218
247
|
}) {
|
|
248
|
+
// Derive ARIA from `label`: decorative (aria-hidden) by default, or a
|
|
249
|
+
// meaningful image (role="img" + aria-label) when `label` is non-empty.
|
|
250
|
+
const a11yProps = getIconA11yProps(label);
|
|
251
|
+
|
|
219
252
|
// String mode: resolve from icon registry, wrap in styled span
|
|
220
253
|
if (typeof icon === 'string') {
|
|
221
254
|
return /*#__PURE__*/_jsx(IconFromRegistry, {
|
|
222
255
|
name: icon,
|
|
223
256
|
color: color,
|
|
224
257
|
size: size,
|
|
258
|
+
a11yProps: a11yProps,
|
|
225
259
|
spanProps: props
|
|
226
260
|
});
|
|
227
261
|
}
|
|
@@ -229,8 +263,12 @@ export function Icon({
|
|
|
229
263
|
// Component mode: render SVG component directly with ref forwarding
|
|
230
264
|
const IconComponent = icon;
|
|
231
265
|
return /*#__PURE__*/_jsx(IconComponent, {
|
|
232
|
-
ref: ref
|
|
233
|
-
|
|
266
|
+
ref: ref
|
|
267
|
+
// Derived a11y (decorative default or meaningful `label`) is spread
|
|
268
|
+
// BEFORE {...props} so an explicit aria-hidden/role/aria-label from the
|
|
269
|
+
// consumer still wins as an escape hatch.
|
|
270
|
+
,
|
|
271
|
+
...a11yProps,
|
|
234
272
|
...mergeProps(themeProps('icon', {
|
|
235
273
|
size,
|
|
236
274
|
color
|
|
@@ -255,6 +293,7 @@ function IconFromRegistry({
|
|
|
255
293
|
name,
|
|
256
294
|
color,
|
|
257
295
|
size,
|
|
296
|
+
a11yProps,
|
|
258
297
|
spanProps
|
|
259
298
|
}) {
|
|
260
299
|
const resolvedIcon = getIcon(name);
|
|
@@ -262,11 +301,7 @@ function IconFromRegistry({
|
|
|
262
301
|
return null;
|
|
263
302
|
}
|
|
264
303
|
return /*#__PURE__*/_jsx("span", {
|
|
265
|
-
|
|
266
|
-
// can override it (e.g. `aria-hidden={false}` + `role="img"` +
|
|
267
|
-
// `aria-label`) to expose a meaningful standalone icon. This matches
|
|
268
|
-
// component-mode Icon, which already sets aria-hidden before its spread.
|
|
269
|
-
"aria-hidden": "true",
|
|
304
|
+
...a11yProps,
|
|
270
305
|
...spanProps,
|
|
271
306
|
...mergeProps(themeProps('icon', {
|
|
272
307
|
size,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MobileNav.d.ts","sourceRoot":"","sources":["../../src/MobileNav/MobileNav.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,OAAO,
|
|
1
|
+
{"version":3,"file":"MobileNav.d.ts","sourceRoot":"","sources":["../../src/MobileNav/MobileNav.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAcf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA2I5C,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,SAAS,EAAE,OAAO,CAAC;IAC9D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAEzC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;;OAIG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;;;;;;OAQG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,MAAM,CAAC;IAEhC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAMD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,SAAS,CAAC,EACxB,MAAM,EAAE,UAAU,EAClB,YAAY,EAAE,gBAAgB,EAC9B,QAAQ,EACR,MAAM,EACN,KAAW,EACX,IAAa,EACb,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,MAAM,EACN,SAAS,EACT,KAAK,EACL,OAAO,EAAE,WAAW,EACpB,GAAG,EACH,GAAG,IAAI,EACR,EAAE,cAAc,+BAsLhB;yBArMe,SAAS"}
|
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
* - /packages/core/src/MobileNav/index.ts (exports if types change)
|
|
26
26
|
* - /packages/cli/templates/blocks/components/MobileNav/ (showcase blocks)
|
|
27
27
|
*/
|
|
28
|
-
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
|
28
|
+
import { useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';
|
|
29
29
|
import * as stylex from '@stylexjs/stylex';
|
|
30
30
|
import "../theme/tokens.stylex.js";
|
|
31
31
|
import { borderVars, colorVars, durationVars, easeVars, spacingVars } from "../theme/tokens.stylex.js";
|
|
@@ -183,6 +183,10 @@ export function MobileNav({
|
|
|
183
183
|
// Read from AppShell context as fallback
|
|
184
184
|
const appShellMobile = useAppShellMobile();
|
|
185
185
|
const isOpen = isOpenProp ?? appShellMobile.isMobileNavOpen;
|
|
186
|
+
// Share the id from AppShell context so the toggle's aria-controls resolves to
|
|
187
|
+
// this drawer; fall back to a locally generated id when used standalone.
|
|
188
|
+
const fallbackId = useId();
|
|
189
|
+
const dialogId = appShellMobile.mobileNavId || fallbackId;
|
|
186
190
|
const onOpenChange = useMemo(() => onOpenChangeProp ?? (open => {
|
|
187
191
|
if (open) {
|
|
188
192
|
appShellMobile.openMobileNav();
|
|
@@ -272,6 +276,7 @@ export function MobileNav({
|
|
|
272
276
|
const isStart = resolvedSide === 'start';
|
|
273
277
|
return /*#__PURE__*/_jsx("dialog", {
|
|
274
278
|
ref: mergeRefs(ref, dialogRef),
|
|
279
|
+
id: dialogId,
|
|
275
280
|
...mergeProps(themeProps('mobile-nav', {
|
|
276
281
|
side: resolvedSide
|
|
277
282
|
}), stylex.props(styles.dialog, isOpen && styles.open, styles.backdrop, isOpen && styles.backdropOpen, xstyle), className, style),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MobileNavToggle.d.ts","sourceRoot":"","sources":["../../src/MobileNav/MobileNavToggle.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;GASG;AAEH,OAAO,KAAK,EAAE,EAAC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAI5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C,MAAM,WAAW,oBAAqB,SAAQ,IAAI,CAChD,SAAS,EACT,QAAQ,GAAG,WAAW,GAAG,OAAO,CACjC;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,eAAe,CAAC,EAC9B,GAAG,EACH,QAAQ,EACR,KAAK,EAAE,cAAc,EACrB,aAAa,EAAE,MAAM,EACrB,MAAM,EACN,SAAS,EACT,KAAK,GACN,EAAE,oBAAoB,
|
|
1
|
+
{"version":3,"file":"MobileNavToggle.d.ts","sourceRoot":"","sources":["../../src/MobileNav/MobileNavToggle.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;GASG;AAEH,OAAO,KAAK,EAAE,EAAC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAI5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C,MAAM,WAAW,oBAAqB,SAAQ,IAAI,CAChD,SAAS,EACT,QAAQ,GAAG,WAAW,GAAG,OAAO,CACjC;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,eAAe,CAAC,EAC9B,GAAG,EACH,QAAQ,EACR,KAAK,EAAE,cAAc,EACrB,aAAa,EAAE,MAAM,EACrB,MAAM,EACN,SAAS,EACT,KAAK,GACN,EAAE,oBAAoB,4BAgCtB;yBAxCe,eAAe"}
|
|
@@ -50,6 +50,8 @@ export function MobileNavToggle({
|
|
|
50
50
|
const {
|
|
51
51
|
isMobile,
|
|
52
52
|
isMobileNavEnabled,
|
|
53
|
+
isMobileNavOpen,
|
|
54
|
+
mobileNavId,
|
|
53
55
|
toggleMobileNav
|
|
54
56
|
} = useAppShellMobile();
|
|
55
57
|
|
|
@@ -66,6 +68,8 @@ export function MobileNavToggle({
|
|
|
66
68
|
color: "inherit"
|
|
67
69
|
}),
|
|
68
70
|
onClick: toggleMobileNav,
|
|
71
|
+
"aria-expanded": isMobileNavOpen,
|
|
72
|
+
"aria-controls": mobileNavId || undefined,
|
|
69
73
|
"data-testid": testId ?? 'mobile-nav-toggle',
|
|
70
74
|
xstyle: xstyle,
|
|
71
75
|
className: className,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MultiSelector.d.ts","sourceRoot":"","sources":["../../src/MultiSelector/MultiSelector.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAE,EASZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAIf,OAAO,EAAuB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAwB5D,OAAO,KAAK,EACV,uBAAuB,EACvB,uBAAuB,EACvB,mBAAmB,EACpB,MAAM,SAAS,CAAC;AAWjB,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAoS9C,MAAM,MAAM,iBAAiB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEnD,MAAM,MAAM,uBAAuB,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;AAEtE,YAAY,EAAC,mBAAmB,EAAC,CAAC;AAElC,MAAM,WAAW,kBAAkB,CACjC,CAAC,SAAS,uBAAuB,GAAG,uBAAuB,CAC3D,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,GAAG,cAAc,CAAC;IACpD;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;;;;;;;;;;;;;;;;;;OAqBG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;;OAGG;IACH,OAAO,EAAE,CAAC,EAAE,CAAC;IAEb;;OAEG;IACH,KAAK,EAAE,MAAM,EAAE,CAAC;IAEhB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAEpC;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAEzD;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,IAAI,CAAC,EAAE,iBAAiB,CAAC;IAEzB;;OAEG;IACH,MAAM,CAAC,EAAE,mBAAmB,CAAC;IAE7B;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAEjC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B;;;;;;OAMG;IACH,cAAc,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAE/C;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,uBAAuB,KAAK,SAAS,CAAC;IAE9D;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;
|
|
1
|
+
{"version":3,"file":"MultiSelector.d.ts","sourceRoot":"","sources":["../../src/MultiSelector/MultiSelector.tsx"],"names":[],"mappings":"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"}
|
|
@@ -160,6 +160,18 @@ const STATUS_ICON_COLOR_MAP = {
|
|
|
160
160
|
error: 'error',
|
|
161
161
|
success: 'success'
|
|
162
162
|
};
|
|
163
|
+
// Case-insensitive substring filter over the selectable options. Shared by the
|
|
164
|
+
// `filteredItems` memo (rendering) and the search-change handler, which needs
|
|
165
|
+
// the count for the *next* query synchronously to announce it exactly once per
|
|
166
|
+
// keystroke rather than reacting to state in an effect.
|
|
167
|
+
function filterOptionsByQuery(items, query) {
|
|
168
|
+
if (!query) {
|
|
169
|
+
return items;
|
|
170
|
+
}
|
|
171
|
+
const q = query.toLowerCase();
|
|
172
|
+
return items.filter(item => (item.label ?? item.value).toLowerCase().includes(q));
|
|
173
|
+
}
|
|
174
|
+
|
|
163
175
|
/**
|
|
164
176
|
* A multi-select dropdown component with checkboxes for choosing
|
|
165
177
|
* multiple items from a list of options.
|
|
@@ -271,13 +283,7 @@ export function MultiSelector({
|
|
|
271
283
|
}, [announce, selectableItems]);
|
|
272
284
|
|
|
273
285
|
// Filter items by search query
|
|
274
|
-
const filteredItems = useMemo(() =>
|
|
275
|
-
if (!searchQuery) {
|
|
276
|
-
return selectableItems;
|
|
277
|
-
}
|
|
278
|
-
const query = searchQuery.toLowerCase();
|
|
279
|
-
return selectableItems.filter(item => (item.label ?? item.value).toLowerCase().includes(query));
|
|
280
|
-
}, [selectableItems, searchQuery]);
|
|
286
|
+
const filteredItems = useMemo(() => filterOptionsByQuery(selectableItems, searchQuery), [selectableItems, searchQuery]);
|
|
281
287
|
|
|
282
288
|
// Single source of truth for item order. Both the hook (keyboard navigation)
|
|
283
289
|
// and renderOptions (DOM rendering) consume this list — no independent sorting.
|
|
@@ -335,8 +341,11 @@ export function MultiSelector({
|
|
|
335
341
|
const handleLayerHide = useCallback(() => {
|
|
336
342
|
setSearchQuery('');
|
|
337
343
|
setSelectedAtOpen(null);
|
|
344
|
+
// Clear any lingering result count when the popover closes so stale status
|
|
345
|
+
// text does not linger in the a11y tree.
|
|
346
|
+
announce('');
|
|
338
347
|
triggerRef.current?.focus();
|
|
339
|
-
}, []);
|
|
348
|
+
}, [announce]);
|
|
340
349
|
const popover = usePopover({
|
|
341
350
|
hasLightDismiss: true,
|
|
342
351
|
onHide: handleLayerHide,
|
|
@@ -355,6 +364,23 @@ export function MultiSelector({
|
|
|
355
364
|
// eslint-disable-next-line @eslint-react/exhaustive-deps -- mount-only: isDefaultOpen is not reactive
|
|
356
365
|
}, []);
|
|
357
366
|
|
|
367
|
+
// Announce the filtered result count from the query-change handler (matching
|
|
368
|
+
// BaseTypeahead) rather than a reactive effect: computing the count for the
|
|
369
|
+
// next query here fires the announcement exactly once per keystroke and does
|
|
370
|
+
// not re-speak on unrelated re-renders. Reuses the announce instance shared
|
|
371
|
+
// with the selection-count announcements above.
|
|
372
|
+
const handleSearchChange = useCallback(event => {
|
|
373
|
+
const nextQuery = event.target.value;
|
|
374
|
+
setSearchQuery(nextQuery);
|
|
375
|
+
if (nextQuery.length === 0) {
|
|
376
|
+
// Emptying the query clears the region rather than announcing a count.
|
|
377
|
+
announce('');
|
|
378
|
+
return;
|
|
379
|
+
}
|
|
380
|
+
const count = filterOptionsByQuery(selectableItems, nextQuery).length;
|
|
381
|
+
announce(count === 0 ? 'No results found' : `${count} result${count === 1 ? '' : 's'}`);
|
|
382
|
+
}, [announce, selectableItems]);
|
|
383
|
+
|
|
358
384
|
// Handle toggle
|
|
359
385
|
// Clear all selected values. Shared by the clear button and the keyboard
|
|
360
386
|
// Delete/Backspace path so clearing is reachable without a mouse.
|
|
@@ -553,7 +579,7 @@ export function MultiSelector({
|
|
|
553
579
|
"aria-label": t('@astryx.multiSelector.searchOptions'),
|
|
554
580
|
type: "text",
|
|
555
581
|
value: searchQuery,
|
|
556
|
-
onChange:
|
|
582
|
+
onChange: handleSearchChange,
|
|
557
583
|
onKeyDown: e => {
|
|
558
584
|
// Arrow keys navigate options; Enter toggles; Escape/Tab close.
|
|
559
585
|
// Space and Home/End are left to the input (type a space / move
|
|
@@ -568,7 +594,7 @@ export function MultiSelector({
|
|
|
568
594
|
}
|
|
569
595
|
})
|
|
570
596
|
});
|
|
571
|
-
}, [hasSearch, searchId, listboxId, searchQuery, searchPlaceholder, onKeyDown, popover.isOpen, highlightedIndex, getItemId, t]);
|
|
597
|
+
}, [hasSearch, searchId, listboxId, searchQuery, searchPlaceholder, handleSearchChange, onKeyDown, popover.isOpen, highlightedIndex, getItemId, t]);
|
|
572
598
|
|
|
573
599
|
// Render an individual item (index-based)
|
|
574
600
|
const renderItem = useCallback((item, flatIndex) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NumberInput.d.ts","sourceRoot":"","sources":["../../src/NumberInput/NumberInput.tsx"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"NumberInput.d.ts","sourceRoot":"","sources":["../../src/NumberInput/NumberInput.tsx"],"names":[],"mappings":"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"}
|
|
@@ -19,6 +19,50 @@ export interface OutlineProps extends BaseProps<HTMLElement> {
|
|
|
19
19
|
* @default 'default'
|
|
20
20
|
*/
|
|
21
21
|
density?: 'default' | 'compact';
|
|
22
|
+
/**
|
|
23
|
+
* Called when navigation to an item begins, before the scroll starts.
|
|
24
|
+
* Receives the item `id`. Pair with `onNavigateEnd` to drive an arrival
|
|
25
|
+
* effect (flash, ring, pulse) on the target heading.
|
|
26
|
+
*/
|
|
27
|
+
onNavigateStart?: (id: string) => void;
|
|
28
|
+
/**
|
|
29
|
+
* Called once when navigation to an item resolves — when the smooth scroll
|
|
30
|
+
* settles, or immediately-ish when reduced motion turns it into a jump.
|
|
31
|
+
*
|
|
32
|
+
* Fires exactly once for every `onNavigateStart`, including when the user
|
|
33
|
+
* interrupts the scroll by scrolling manually, so a "navigating" state can
|
|
34
|
+
* never leak. It does not fire if the Outline unmounts mid-scroll.
|
|
35
|
+
*/
|
|
36
|
+
onNavigateEnd?: (id: string) => void;
|
|
37
|
+
/**
|
|
38
|
+
* Height in px of a fixed header overlaying the top of the scroll root.
|
|
39
|
+
*
|
|
40
|
+
* Shifts both the activation line *and* the scroll landing by the same
|
|
41
|
+
* amount, so a heading activates exactly where navigating to it puts it —
|
|
42
|
+
* below the header rather than hidden underneath it.
|
|
43
|
+
*
|
|
44
|
+
* It composes with each heading's own `scroll-margin-top` (the header, then
|
|
45
|
+
* the breathing room below it) rather than replacing it. When nothing
|
|
46
|
+
* overlays the content, leave this at 0 and let `scroll-margin-top` do the
|
|
47
|
+
* work — the browser already honors it.
|
|
48
|
+
*
|
|
49
|
+
* @default 0
|
|
50
|
+
*/
|
|
51
|
+
offset?: number;
|
|
52
|
+
/**
|
|
53
|
+
* Scroll container to track, instead of auto-detecting the nearest scrollable
|
|
54
|
+
* ancestor. Use this when the content scrolls inside a split pane, modal, or
|
|
55
|
+
* dashboard panel rather than the viewport.
|
|
56
|
+
*/
|
|
57
|
+
scrollContainerRef?: React.RefObject<HTMLElement | null>;
|
|
58
|
+
/**
|
|
59
|
+
* Whether activating an item smooth-scrolls to it. Set to false to own the
|
|
60
|
+
* scrolling yourself (virtualized content, a router) — the Outline still
|
|
61
|
+
* updates the active item, the hash, and the navigate callbacks, but performs
|
|
62
|
+
* no scroll and suppresses the anchor's default jump.
|
|
63
|
+
* @default true
|
|
64
|
+
*/
|
|
65
|
+
hasScrollOnClick?: boolean;
|
|
22
66
|
/** Test ID for testing frameworks. */
|
|
23
67
|
'data-testid'?: string;
|
|
24
68
|
}
|
|
@@ -30,8 +74,15 @@ export interface OutlineProps extends BaseProps<HTMLElement> {
|
|
|
30
74
|
* track that animates to the active item.
|
|
31
75
|
*
|
|
32
76
|
* When `activeId` is omitted, it tracks scroll position and marks the last
|
|
33
|
-
* heading whose top has passed its activation line
|
|
34
|
-
*
|
|
77
|
+
* heading whose top has passed its activation line — which is exactly where
|
|
78
|
+
* navigating to that heading lands it: `offset` (a fixed header overlaying the
|
|
79
|
+
* scroll root) plus the heading's own `scroll-margin-top`. It defaults to the
|
|
80
|
+
* first item at the top and the last at the bottom.
|
|
81
|
+
*
|
|
82
|
+
* Keyboard: the list is a single tab stop (roving tabindex), seated on the
|
|
83
|
+
* active heading. Arrow keys move between headings, Home/End jump to the ends,
|
|
84
|
+
* and Enter/Space activate — so a long table of contents costs one Tab press,
|
|
85
|
+
* not one per heading.
|
|
35
86
|
*
|
|
36
87
|
* @example
|
|
37
88
|
* ```
|
|
@@ -43,8 +94,22 @@ export interface OutlineProps extends BaseProps<HTMLElement> {
|
|
|
43
94
|
* ]}
|
|
44
95
|
* />
|
|
45
96
|
* ```
|
|
97
|
+
*
|
|
98
|
+
* Scoped to a custom scroll container, under a fixed header:
|
|
99
|
+
*
|
|
100
|
+
* @example
|
|
101
|
+
* ```
|
|
102
|
+
* const scrollContainerRef = useRef<HTMLDivElement>(null);
|
|
103
|
+
* <div ref={scrollContainerRef} style={{overflowY: 'auto'}}>...</div>
|
|
104
|
+
* <Outline
|
|
105
|
+
* items={items}
|
|
106
|
+
* scrollContainerRef={scrollContainerRef}
|
|
107
|
+
* offset={64}
|
|
108
|
+
* onNavigateEnd={id => flashHeading(id)}
|
|
109
|
+
* />
|
|
110
|
+
* ```
|
|
46
111
|
*/
|
|
47
|
-
export declare function Outline({ items, activeId, onActiveIdChange, label: labelFromProps, density, xstyle, className, style, ref, 'data-testid': testId, ...props }: OutlineProps): import("react").JSX.Element;
|
|
112
|
+
export declare function Outline({ items, activeId, onActiveIdChange, label: labelFromProps, density, onNavigateStart, onNavigateEnd, offset, scrollContainerRef, hasScrollOnClick, xstyle, className, style, ref, 'data-testid': testId, ...props }: OutlineProps): import("react").JSX.Element;
|
|
48
113
|
export declare namespace Outline {
|
|
49
114
|
var displayName: string;
|
|
50
115
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Outline.d.ts","sourceRoot":"","sources":["../../src/Outline/Outline.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Outline.d.ts","sourceRoot":"","sources":["../../src/Outline/Outline.tsx"],"names":[],"mappings":"AAwCA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,SAAS,CAAC;AAIzC,YAAY,EAAC,WAAW,EAAC,MAAM,SAAS,CAAC;AAEzC,MAAM,WAAW,YAAa,SAAQ,SAAS,CAAC,WAAW,CAAC;IAC1D,6CAA6C;IAC7C,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAE7B,+CAA+C;IAC/C,KAAK,EAAE,WAAW,EAAE,CAAC;IAErB,oFAAoF;IACpF,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,oEAAoE;IACpE,gBAAgB,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAExC,0EAA0E;IAC1E,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;;;OAKG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAEhC;;;;OAIG;IACH,eAAe,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAEvC;;;;;;;OAOG;IACH,aAAa,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAErC;;;;;;;;;;;;;OAaG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAEzD;;;;;;OAMG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B,sCAAsC;IACtC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAgJD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,wBAAgB,OAAO,CAAC,EACtB,KAAK,EACL,QAAQ,EACR,gBAAgB,EAChB,KAAK,EAAE,cAAc,EACrB,OAAmB,EACnB,eAAe,EACf,aAAa,EACb,MAAU,EACV,kBAAkB,EAClB,gBAAuB,EACvB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,aAAa,EAAE,MAAM,EACrB,GAAG,KAAK,EACT,EAAE,YAAY,+BAiLd;yBAlMe,OAAO"}
|