@astryxdesign/core 0.7.5-canary.e9b3f3e → 0.7.5-canary.eb3e539
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/README.md +12 -9
- package/dist/AlertDialog/AlertDialog.js +1 -1
- package/dist/AppShell/AppShell.d.ts +0 -22
- package/dist/AppShell/AppShell.d.ts.map +1 -1
- package/dist/AppShell/AppShell.js +155 -1
- package/dist/Avatar/AvatarStatusDot.js +2 -2
- package/dist/Badge/Badge.d.ts.map +1 -1
- package/dist/Badge/Badge.js +18 -2
- package/dist/Banner/Banner.d.ts +1 -0
- package/dist/Banner/Banner.d.ts.map +1 -1
- package/dist/Banner/Banner.js +64 -9
- package/dist/BottomSheet/BottomSheet.d.ts +51 -7
- package/dist/BottomSheet/BottomSheet.d.ts.map +1 -1
- package/dist/BottomSheet/BottomSheet.js +430 -204
- package/dist/BottomSheet/BottomSheetHostContext.d.ts +8 -0
- package/dist/BottomSheet/BottomSheetHostContext.d.ts.map +1 -0
- package/dist/BottomSheet/BottomSheetHostContext.js +35 -0
- package/dist/BottomSheet/BottomSheetPanel.d.ts +9 -1
- package/dist/BottomSheet/BottomSheetPanel.d.ts.map +1 -1
- package/dist/BottomSheet/BottomSheetPanel.js +76 -22
- package/dist/BottomSheet/BottomSheetSwitcher.d.ts +53 -14
- package/dist/BottomSheet/BottomSheetSwitcher.d.ts.map +1 -1
- package/dist/BottomSheet/BottomSheetSwitcher.js +229 -27
- package/dist/BottomSheet/BottomSheetSwitcherContext.d.ts +6 -0
- package/dist/BottomSheet/BottomSheetSwitcherContext.d.ts.map +1 -1
- package/dist/BottomSheet/bottomSheetEscape.d.ts +3 -0
- package/dist/BottomSheet/bottomSheetEscape.d.ts.map +1 -0
- package/dist/BottomSheet/bottomSheetEscape.js +20 -0
- package/dist/BottomSheet/bottomSheetStack.d.ts +262 -0
- package/dist/BottomSheet/bottomSheetStack.d.ts.map +1 -0
- package/dist/BottomSheet/bottomSheetStack.js +1652 -0
- package/dist/BottomSheet/useSheetGestures.d.ts +19 -3
- package/dist/BottomSheet/useSheetGestures.d.ts.map +1 -1
- package/dist/BottomSheet/useSheetGestures.js +43 -14
- package/dist/Button/Button.d.ts.map +1 -1
- package/dist/Button/Button.js +3 -0
- package/dist/Chat/ChatComposer.d.ts.map +1 -1
- package/dist/Chat/ChatComposer.js +12 -9
- package/dist/Chat/ChatComposerInput.d.ts.map +1 -1
- package/dist/Chat/ChatComposerInput.js +55 -16
- package/dist/Chat/ChatMessageMetadata.js +2 -2
- package/dist/Chat/ChatPastedTextToken.d.ts.map +1 -1
- package/dist/Chat/ChatPastedTextToken.js +7 -6
- package/dist/Chat/ChatToolCalls.js +4 -4
- package/dist/CodeBlock/CodeBlock.d.ts +17 -2
- package/dist/CodeBlock/CodeBlock.d.ts.map +1 -1
- package/dist/CodeBlock/CodeBlock.js +26 -8
- package/dist/CodeBlock/grammar.d.ts +134 -0
- package/dist/CodeBlock/grammar.d.ts.map +1 -0
- package/dist/CodeBlock/grammar.js +219 -0
- package/dist/CodeBlock/index.d.ts +2 -0
- package/dist/CodeBlock/index.d.ts.map +1 -1
- package/dist/CodeBlock/index.js +1 -0
- package/dist/CodeBlock/languages/dockerfile.d.ts +3 -0
- package/dist/CodeBlock/languages/dockerfile.d.ts.map +1 -0
- package/dist/CodeBlock/languages/dockerfile.js +45 -0
- package/dist/CodeBlock/languages/graphql.d.ts +3 -0
- package/dist/CodeBlock/languages/graphql.d.ts.map +1 -0
- package/dist/CodeBlock/languages/graphql.js +27 -0
- package/dist/CodeBlock/languages/java.d.ts +3 -0
- package/dist/CodeBlock/languages/java.d.ts.map +1 -0
- package/dist/CodeBlock/languages/java.js +24 -0
- package/dist/CodeBlock/languages/lua.d.ts +3 -0
- package/dist/CodeBlock/languages/lua.d.ts.map +1 -0
- package/dist/CodeBlock/languages/lua.js +21 -0
- package/dist/CodeBlock/languages/objective-c.d.ts +3 -0
- package/dist/CodeBlock/languages/objective-c.d.ts.map +1 -0
- package/dist/CodeBlock/languages/objective-c.js +27 -0
- package/dist/CodeBlock/languages/powershell.d.ts +3 -0
- package/dist/CodeBlock/languages/powershell.d.ts.map +1 -0
- package/dist/CodeBlock/languages/powershell.js +30 -0
- package/dist/CodeBlock/languages/ruby.d.ts +3 -0
- package/dist/CodeBlock/languages/ruby.d.ts.map +1 -0
- package/dist/CodeBlock/languages/ruby.js +24 -0
- package/dist/CodeBlock/languages/thrift.d.ts +3 -0
- package/dist/CodeBlock/languages/thrift.d.ts.map +1 -0
- package/dist/CodeBlock/languages/thrift.js +18 -0
- package/dist/CodeBlock/languages/toml.d.ts +3 -0
- package/dist/CodeBlock/languages/toml.d.ts.map +1 -0
- package/dist/CodeBlock/languages/toml.js +53 -0
- package/dist/CodeBlock/tokenizer.d.ts +8 -4
- package/dist/CodeBlock/tokenizer.d.ts.map +1 -1
- package/dist/CodeBlock/tokenizer.js +158 -8
- package/dist/Collapsible/Collapsible.d.ts +8 -1
- package/dist/Collapsible/Collapsible.d.ts.map +1 -1
- package/dist/Collapsible/Collapsible.js +84 -2
- package/dist/CommandPalette/CommandPaletteEmpty.d.ts.map +1 -1
- package/dist/CommandPalette/CommandPaletteEmpty.js +1 -0
- package/dist/ComplexSelector/ComplexSelector.d.ts.map +1 -1
- package/dist/ComplexSelector/ComplexSelector.js +6 -2
- package/dist/Dialog/Dialog.d.ts.map +1 -1
- package/dist/Dialog/Dialog.js +8 -3
- package/dist/Drawer/Drawer.d.ts.map +1 -1
- package/dist/Drawer/Drawer.js +18 -13
- package/dist/DropdownMenu/DropdownMenuItem.js +3 -3
- package/dist/DropdownMenu/MenuBottomSheetActionList.js +3 -3
- package/dist/Field/Field.js +1 -1
- package/dist/Field/FieldLabel.js +1 -1
- package/dist/Field/PanelSearchInput.d.ts +9 -1
- package/dist/Field/PanelSearchInput.d.ts.map +1 -1
- package/dist/Field/PanelSearchInput.js +20 -8
- package/dist/Field/inputStyles.stylex.d.ts +9 -9
- package/dist/Field/inputStyles.stylex.js +9 -9
- package/dist/FieldStatus/FieldStatus.d.ts.map +1 -1
- package/dist/FieldStatus/FieldStatus.js +7 -3
- package/dist/FileInput/FileInput.d.ts.map +1 -1
- package/dist/FileInput/FileInput.js +15 -9
- package/dist/Icon/Icon.d.ts +37 -5
- package/dist/Icon/Icon.d.ts.map +1 -1
- package/dist/Icon/Icon.js +65 -11
- package/dist/Icon/IconSize.stylex.d.ts +16 -11
- package/dist/Icon/IconSize.stylex.d.ts.map +1 -1
- package/dist/Icon/IconSize.stylex.js +27 -11
- package/dist/Icon/globalIconRegistry.d.ts +71 -4
- package/dist/Icon/globalIconRegistry.d.ts.map +1 -1
- package/dist/Icon/globalIconRegistry.js +163 -23
- package/dist/Icon/index.d.ts +26 -2
- package/dist/Icon/index.d.ts.map +1 -1
- package/dist/Icon/index.js +24 -1
- package/dist/Icon/useIcon.d.ts +5 -1
- package/dist/Icon/useIcon.d.ts.map +1 -1
- package/dist/Icon/useIcon.js +5 -1
- package/dist/Item/ItemSwipeLayer.d.ts.map +1 -1
- package/dist/Item/ItemSwipeLayer.js +3 -0
- package/dist/Kbd/Kbd.d.ts +2 -2
- package/dist/Kbd/Kbd.d.ts.map +1 -1
- package/dist/Kbd/Kbd.js +18 -11
- package/dist/Layer/modalOutlet.d.ts +43 -5
- package/dist/Layer/modalOutlet.d.ts.map +1 -1
- package/dist/Layer/modalOutlet.js +149 -13
- package/dist/Layer/useLayer.d.ts.map +1 -1
- package/dist/Layer/useLayer.js +96 -37
- package/dist/Lightbox/Lightbox.d.ts.map +1 -1
- package/dist/Lightbox/Lightbox.js +88 -81
- package/dist/Lightbox/LightboxViewport.a11y.browser.spec.d.ts +2 -0
- package/dist/Lightbox/LightboxViewport.a11y.browser.spec.d.ts.map +1 -0
- package/dist/Lightbox/LightboxViewport.a11y.browser.spec.js +65 -0
- package/dist/Markdown/Markdown.d.ts +11 -1
- package/dist/Markdown/Markdown.d.ts.map +1 -1
- package/dist/Markdown/Markdown.js +23 -9
- package/dist/MobileNav/MobileNav.d.ts.map +1 -1
- package/dist/MobileNav/MobileNav.js +37 -32
- package/dist/MultiSelector/MultiSelector.d.ts +1 -1
- package/dist/MultiSelector/MultiSelector.d.ts.map +1 -1
- package/dist/MultiSelector/MultiSelector.js +13 -1
- package/dist/NavMenu/NavHeadingMenuItem.d.ts.map +1 -1
- package/dist/NavMenu/NavHeadingMenuItem.js +46 -7
- package/dist/NumberInput/NumberInput.d.ts +1 -1
- package/dist/NumberInput/NumberInput.d.ts.map +1 -1
- package/dist/NumberInput/NumberInput.js +8 -1
- package/dist/Popover/Popover.d.ts +41 -2
- package/dist/Popover/Popover.d.ts.map +1 -1
- package/dist/Popover/Popover.js +276 -44
- package/dist/Popover/index.d.ts +1 -1
- package/dist/Popover/index.d.ts.map +1 -1
- package/dist/Popover/lazyPopoverBottomSheet.d.ts +23 -0
- package/dist/Popover/lazyPopoverBottomSheet.d.ts.map +1 -0
- package/dist/Popover/lazyPopoverBottomSheet.js +40 -0
- package/dist/PowerSearch/PowerSearch.d.ts.map +1 -1
- package/dist/PowerSearch/PowerSearch.js +7 -5
- package/dist/ProgressBar/ProgressBar.d.ts.map +1 -1
- package/dist/ProgressBar/ProgressBar.js +8 -0
- package/dist/Selector/Selector.d.ts.map +1 -1
- package/dist/Selector/Selector.js +8 -1
- package/dist/SideNav/SideNav.d.ts.map +1 -1
- package/dist/SideNav/SideNav.js +58 -2
- package/dist/SideNav/SideNavItem.d.ts +5 -1
- package/dist/SideNav/SideNavItem.d.ts.map +1 -1
- package/dist/SideNav/SideNavItem.js +36 -13
- package/dist/SideNav/railMotion.d.ts +54 -0
- package/dist/SideNav/railMotion.d.ts.map +1 -0
- package/dist/SideNav/railMotion.js +253 -0
- package/dist/StatusDot/StatusDot.d.ts.map +1 -1
- package/dist/StatusDot/StatusDot.js +12 -0
- package/dist/Stepper/Step.d.ts.map +1 -1
- package/dist/Stepper/Step.js +7 -3
- package/dist/TabList/Tab.d.ts.map +1 -1
- package/dist/TabList/Tab.js +5 -1
- package/dist/TabList/TabMenu.d.ts.map +1 -1
- package/dist/TabList/TabMenu.js +1 -0
- package/dist/Table/TableCell.d.ts.map +1 -1
- package/dist/Table/TableCell.js +1 -0
- package/dist/Table/TableHeaderCell.d.ts.map +1 -1
- package/dist/Table/TableHeaderCell.js +1 -0
- package/dist/Table/plugins/columnResize/useTableColumnResize.d.ts.map +1 -1
- package/dist/Table/plugins/columnResize/useTableColumnResize.js +11 -2
- package/dist/Table/plugins/rowExpansion/useTableRowExpansion.d.ts.map +1 -1
- package/dist/Table/plugins/rowExpansion/useTableRowExpansion.js +103 -4
- package/dist/Table/plugins/stickyColumns/useTableStickyColumns.d.ts.map +1 -1
- package/dist/Table/plugins/stickyColumns/useTableStickyColumns.js +233 -6
- package/dist/Table/rowDivider.d.ts +34 -0
- package/dist/Table/rowDivider.d.ts.map +1 -0
- package/dist/Table/rowDivider.js +118 -0
- package/dist/TextArea/TextArea.js +1 -1
- package/dist/Thumbnail/Thumbnail.d.ts.map +1 -1
- package/dist/Thumbnail/Thumbnail.js +35 -5
- package/dist/Toast/ToastViewport.d.ts.map +1 -1
- package/dist/Toast/ToastViewport.js +28 -2
- package/dist/Tokenizer/Tokenizer.d.ts +71 -4
- package/dist/Tokenizer/Tokenizer.d.ts.map +1 -1
- package/dist/Tokenizer/Tokenizer.js +418 -32
- package/dist/Tokenizer/TokenizerBottomSheet.d.ts +98 -0
- package/dist/Tokenizer/TokenizerBottomSheet.d.ts.map +1 -0
- package/dist/Tokenizer/TokenizerBottomSheet.js +721 -0
- package/dist/TopNav/TopNavMegaMenu.d.ts.map +1 -1
- package/dist/TopNav/TopNavMegaMenu.js +4 -4
- package/dist/TreeList/TreeList.d.ts +8 -23
- package/dist/TreeList/TreeList.d.ts.map +1 -1
- package/dist/TreeList/TreeList.js +175 -3
- package/dist/TreeList/TreeListItem.d.ts +7 -1
- package/dist/TreeList/TreeListItem.d.ts.map +1 -1
- package/dist/TreeList/TreeListItem.js +3 -1
- package/dist/astryx.css +88 -16
- package/dist/gestures/GestureArena.d.ts +175 -0
- package/dist/gestures/GestureArena.d.ts.map +1 -0
- package/dist/gestures/GestureArena.js +816 -0
- package/dist/gestures/GestureRecognizer.d.ts +239 -0
- package/dist/gestures/GestureRecognizer.d.ts.map +1 -0
- package/dist/gestures/GestureRecognizer.js +487 -0
- package/dist/gestures/LongPressGestureRecognizer.d.ts +32 -0
- package/dist/gestures/LongPressGestureRecognizer.d.ts.map +1 -0
- package/dist/gestures/LongPressGestureRecognizer.js +135 -0
- package/dist/gestures/PanGestureRecognizer.d.ts +117 -0
- package/dist/gestures/PanGestureRecognizer.d.ts.map +1 -0
- package/dist/gestures/PanGestureRecognizer.js +349 -0
- package/dist/gestures/TapGestureRecognizer.d.ts +39 -0
- package/dist/gestures/TapGestureRecognizer.d.ts.map +1 -0
- package/dist/gestures/TapGestureRecognizer.js +151 -0
- package/dist/gestures/VelocityTracker.d.ts +51 -0
- package/dist/gestures/VelocityTracker.d.ts.map +1 -0
- package/dist/gestures/VelocityTracker.js +186 -0
- package/dist/gestures/geometry.d.ts +17 -0
- package/dist/gestures/geometry.d.ts.map +1 -0
- package/dist/gestures/geometry.js +55 -0
- package/dist/gestures/types.d.ts +139 -0
- package/dist/gestures/types.d.ts.map +1 -0
- package/dist/gestures/types.js +67 -0
- package/dist/hooks/ModalAnnounceProvider.d.ts +41 -0
- package/dist/hooks/ModalAnnounceProvider.d.ts.map +1 -0
- package/dist/hooks/ModalAnnounceProvider.js +133 -0
- package/dist/hooks/actionGroupTracker.d.ts +98 -0
- package/dist/hooks/actionGroupTracker.d.ts.map +1 -0
- package/dist/hooks/actionGroupTracker.js +338 -0
- package/dist/hooks/index.d.ts +2 -0
- package/dist/hooks/index.d.ts.map +1 -1
- package/dist/hooks/index.js +1 -0
- package/dist/hooks/modalAnnounce.d.ts +18 -0
- package/dist/hooks/modalAnnounce.d.ts.map +1 -0
- package/dist/hooks/modalAnnounce.js +382 -0
- package/dist/hooks/useAdaptivePresentation.d.ts +8 -0
- package/dist/hooks/useAdaptivePresentation.d.ts.map +1 -1
- package/dist/hooks/useAdaptivePresentation.js +27 -5
- package/dist/hooks/useAnimatedLayout.d.ts +42 -0
- package/dist/hooks/useAnimatedLayout.d.ts.map +1 -0
- package/dist/hooks/useAnimatedLayout.js +46 -0
- package/dist/hooks/useAnnounce.d.ts +114 -0
- package/dist/hooks/useAnnounce.d.ts.map +1 -1
- package/dist/hooks/useAnnounce.js +273 -10
- package/dist/hooks/useBusyAnnouncement.d.ts +5 -3
- package/dist/hooks/useBusyAnnouncement.d.ts.map +1 -1
- package/dist/hooks/useBusyAnnouncement.js +30 -44
- package/dist/hooks/useFocusTrap.d.ts.map +1 -1
- package/dist/hooks/useFocusTrap.js +15 -8
- package/dist/i18n/generated-locales/en.generated.d.ts.map +1 -1
- package/dist/i18n/generated-locales/en.generated.js +33 -0
- package/dist/i18n/generated-locales/pseudo.generated.d.ts.map +1 -1
- package/dist/i18n/generated-locales/pseudo.generated.js +33 -0
- package/dist/internal/tokenizer-presentation.d.ts +21 -0
- package/dist/internal/tokenizer-presentation.d.ts.map +1 -0
- package/dist/internal/tokenizer-presentation.js +21 -0
- package/dist/internal/touch.d.ts +26 -0
- package/dist/internal/touch.d.ts.map +1 -0
- package/dist/internal/touch.js +28 -0
- package/dist/motion/LayoutChangeSnapshot.d.ts +33 -0
- package/dist/motion/LayoutChangeSnapshot.d.ts.map +1 -0
- package/dist/motion/LayoutChangeSnapshot.js +37 -0
- package/dist/motion/animatedLayout.d.ts +178 -0
- package/dist/motion/animatedLayout.d.ts.map +1 -0
- package/dist/motion/animatedLayout.js +1480 -0
- package/dist/motion/animator.d.ts +240 -0
- package/dist/motion/animator.d.ts.map +1 -0
- package/dist/motion/animator.js +2203 -0
- package/dist/motion/bezier.d.ts +18 -0
- package/dist/motion/bezier.d.ts.map +1 -0
- package/dist/motion/bezier.js +60 -0
- package/dist/motion/coast.d.ts +61 -0
- package/dist/motion/coast.d.ts.map +1 -0
- package/dist/motion/coast.js +107 -0
- package/dist/motion/decay.d.ts +41 -0
- package/dist/motion/decay.d.ts.map +1 -0
- package/dist/motion/decay.js +90 -0
- package/dist/motion/projection.d.ts +36 -0
- package/dist/motion/projection.d.ts.map +1 -0
- package/dist/motion/projection.js +92 -0
- package/dist/motion/reducedMotion.d.ts +25 -0
- package/dist/motion/reducedMotion.d.ts.map +1 -0
- package/dist/motion/reducedMotion.js +85 -0
- package/dist/motion/reducedMotion.stylex.d.ts +19 -0
- package/dist/motion/reducedMotion.stylex.d.ts.map +1 -0
- package/dist/motion/reducedMotion.stylex.js +37 -0
- package/dist/motion/reducedMotionPlan.d.ts +89 -0
- package/dist/motion/reducedMotionPlan.d.ts.map +1 -0
- package/dist/motion/reducedMotionPlan.js +194 -0
- package/dist/motion/resolveSnapPoint.d.ts +52 -0
- package/dist/motion/resolveSnapPoint.d.ts.map +1 -0
- package/dist/motion/resolveSnapPoint.js +135 -0
- package/dist/motion/roleValue.d.ts +33 -0
- package/dist/motion/roleValue.d.ts.map +1 -0
- package/dist/motion/roleValue.js +84 -0
- package/dist/motion/roles.d.ts +79 -0
- package/dist/motion/roles.d.ts.map +1 -0
- package/dist/motion/roles.js +199 -0
- package/dist/motion/rubberBand.d.ts +20 -0
- package/dist/motion/rubberBand.d.ts.map +1 -0
- package/dist/motion/rubberBand.js +91 -0
- package/dist/motion/selectPage.d.ts +26 -0
- package/dist/motion/selectPage.d.ts.map +1 -0
- package/dist/motion/selectPage.js +55 -0
- package/dist/motion/spring.d.ts +193 -0
- package/dist/motion/spring.d.ts.map +1 -0
- package/dist/motion/spring.js +442 -0
- package/dist/motion/transientCopy.d.ts +33 -0
- package/dist/motion/transientCopy.d.ts.map +1 -0
- package/dist/motion/transientCopy.js +314 -0
- package/dist/motion/uikit/gestures.d.ts +338 -3
- package/dist/motion/uikit/gestures.d.ts.map +1 -1
- package/dist/motion/uikit/gestures.js +319 -273
- package/dist/motion/uikit/index.d.ts +9 -7
- package/dist/motion/uikit/index.d.ts.map +1 -1
- package/dist/motion/uikit/index.js +9 -7
- package/dist/motion/uikit/navigation.d.ts +6 -23
- package/dist/motion/uikit/navigation.d.ts.map +1 -1
- package/dist/motion/uikit/navigation.js +11 -1
- package/dist/motion/uikit/scroll.d.ts +12 -18
- package/dist/motion/uikit/scroll.d.ts.map +1 -1
- package/dist/motion/uikit/scroll.js +21 -2
- package/dist/motion/uikit/springs.d.ts +409 -209
- package/dist/motion/uikit/springs.d.ts.map +1 -1
- package/dist/motion/uikit/springs.js +489 -327
- package/dist/motion/uikit/timing.d.ts +58 -47
- package/dist/motion/uikit/timing.d.ts.map +1 -1
- package/dist/motion/uikit/timing.js +75 -26
- package/dist/theme/declarationBoundary.d.ts +13 -0
- package/dist/theme/declarationBoundary.d.ts.map +1 -1
- package/dist/theme/declarationBoundary.js +264 -1
- package/dist/theme/defineTheme.d.ts +111 -11
- package/dist/theme/defineTheme.d.ts.map +1 -1
- package/dist/theme/defineTheme.js +97 -7
- package/dist/theme/derivedVarRegistry.d.ts.map +1 -1
- package/dist/theme/derivedVarRegistry.js +9 -0
- package/dist/theme/generateThemeRules.d.ts +6 -2
- package/dist/theme/generateThemeRules.d.ts.map +1 -1
- package/dist/theme/generateThemeRules.js +468 -24
- package/dist/theme/statusColor.d.ts +48 -0
- package/dist/theme/statusColor.d.ts.map +1 -0
- package/dist/theme/statusColor.js +203 -0
- package/dist/theme/statusRoleDerivation.d.ts +11 -0
- package/dist/theme/statusRoleDerivation.d.ts.map +1 -0
- package/dist/theme/statusRoleDerivation.js +236 -0
- package/dist/theme/tokens.d.ts.map +1 -1
- package/dist/theme/tokens.js +16 -1
- package/dist/theme/tokens.stylex.d.ts +40 -2
- package/dist/theme/tokens.stylex.d.ts.map +1 -1
- package/dist/theme/tokens.stylex.js +47 -2
- package/dist/theme/useTheme.d.ts +4 -2
- package/dist/theme/useTheme.d.ts.map +1 -1
- package/dist/theme/useTheme.js +10 -4
- package/dist/utils/hitArea.d.ts +72 -0
- package/dist/utils/hitArea.d.ts.map +1 -0
- package/dist/utils/hitArea.js +681 -0
- package/locales/af-ZA.json +1 -1
- package/locales/ar-SA.json +1 -1
- package/locales/ca-ES.json +1 -1
- package/locales/cs-CZ.json +1 -1
- package/locales/da-DK.json +1 -1
- package/locales/de-DE.json +1 -1
- package/locales/el-GR.json +1 -1
- package/locales/en.json +132 -0
- package/locales/es-ES.json +1 -1
- package/locales/fi-FI.json +1 -1
- package/locales/fr-FR.json +1 -1
- package/locales/he-IL.json +1 -1
- package/locales/hu-HU.json +1 -1
- package/locales/it-IT.json +1 -1
- package/locales/ja-JP.json +1 -1
- package/locales/ko-KR.json +1 -1
- package/locales/nl-NL.json +1 -1
- package/locales/no-NO.json +1 -1
- package/locales/pl-PL.json +1 -1
- package/locales/pseudo.json +99 -0
- package/locales/pt-BR.json +1 -1
- package/locales/pt-PT.json +1 -1
- package/locales/ro-RO.json +1 -1
- package/locales/ru-RU.json +1 -1
- package/locales/sr-SP.json +1 -1
- package/locales/sv-SE.json +1 -1
- package/locales/tr-TR.json +1 -1
- package/locales/uk-UA.json +1 -1
- package/locales/vi-VN.json +1 -1
- package/locales/zh-CN.json +1 -1
- package/locales/zh-TW.json +1 -1
- package/package.json +58 -3
- package/src/AlertDialog/AlertDialog.tsx +1 -1
- package/src/AppShell/AppShell.spec.md +52 -44
- package/src/AppShell/AppShell.tsx +170 -2
- package/src/AspectRatio/AspectRatio.spec.md +179 -0
- package/src/Avatar/AvatarStatusDot.spec.md +2 -5
- package/src/Avatar/AvatarStatusDot.test.tsx +22 -0
- package/src/Avatar/AvatarStatusDot.tsx +2 -2
- package/src/AvatarGroup/AvatarGroup.spec.md +205 -0
- package/src/AvatarGroup/AvatarGroupOverflow.spec.md +123 -120
- package/src/Badge/Badge.spec.md +1 -1
- package/src/Badge/Badge.test.tsx +13 -0
- package/src/Badge/Badge.tsx +38 -2
- package/src/Banner/Banner.spec.md +16 -14
- package/src/Banner/Banner.test.tsx +118 -16
- package/src/Banner/Banner.tsx +94 -7
- package/src/Blockquote/Blockquote.spec.md +171 -0
- package/src/BottomSheet/BottomSheet.doc.mjs +106 -24
- package/src/BottomSheet/BottomSheet.spec.md +61 -51
- package/src/BottomSheet/BottomSheet.test.tsx +491 -5
- package/src/BottomSheet/BottomSheet.tsx +540 -152
- package/src/BottomSheet/BottomSheetHostContext.ts +44 -0
- package/src/BottomSheet/BottomSheetPanel.test.tsx +21 -10
- package/src/BottomSheet/BottomSheetPanel.tsx +166 -57
- package/src/BottomSheet/BottomSheetReplace.test.tsx +1526 -0
- package/src/BottomSheet/BottomSheetStacking.announce.test.tsx +246 -0
- package/src/BottomSheet/BottomSheetStacking.test.tsx +3184 -0
- package/src/BottomSheet/BottomSheetSwitcher.doc.mjs +27 -31
- package/src/BottomSheet/BottomSheetSwitcher.spec.md +26 -33
- package/src/BottomSheet/BottomSheetSwitcher.tsx +275 -26
- package/src/BottomSheet/BottomSheetSwitcherContext.ts +6 -0
- package/src/BottomSheet/bottomSheetEscape.ts +21 -0
- package/src/BottomSheet/bottomSheetStack.ts +2031 -0
- package/src/BottomSheet/useSheetGestures.ts +68 -12
- package/src/Breadcrumbs/BreadcrumbItem.spec.md +96 -59
- package/src/Breadcrumbs/Breadcrumbs.spec.md +165 -0
- package/src/Button/Button.spec.md +30 -28
- package/src/Button/Button.tsx +13 -1
- package/src/ButtonGroup/ButtonGroup.spec.md +4 -2
- package/src/Card/Card.spec.md +205 -0
- package/src/Chat/ChatComposer.test.tsx +32 -0
- package/src/Chat/ChatComposer.tsx +24 -4
- package/src/Chat/ChatComposerInput.test.tsx +165 -21
- package/src/Chat/ChatComposerInput.tsx +73 -16
- package/src/Chat/ChatMessageMetadata.tsx +1 -1
- package/src/Chat/ChatPastedTextToken.test.tsx +71 -0
- package/src/Chat/ChatPastedTextToken.tsx +8 -7
- package/src/Chat/ChatToolCalls.tsx +5 -5
- package/src/CheckboxInput/CheckboxInput.spec.md +97 -66
- package/src/CheckboxList/CheckboxList.spec.md +92 -78
- package/src/CheckboxList/CheckboxListItem.spec.md +86 -60
- package/src/ClickableCard/ClickableCard.spec.md +124 -128
- package/src/Code/Code.spec.md +30 -32
- package/src/CodeBlock/CodeBlock.doc.mjs +5 -4
- package/src/CodeBlock/CodeBlock.spec.md +48 -45
- package/src/CodeBlock/CodeBlock.tsx +66 -15
- package/src/CodeBlock/CodeLanguage.test.tsx +173 -0
- package/src/CodeBlock/__tests__/CodeBlockLanguages.a11y.chromium.spec.ts +64 -0
- package/src/CodeBlock/grammar.ts +291 -0
- package/src/CodeBlock/index.ts +7 -0
- package/src/CodeBlock/languages/dockerfile.ts +43 -0
- package/src/CodeBlock/languages/graphql.ts +30 -0
- package/src/CodeBlock/languages/java.ts +28 -0
- package/src/CodeBlock/languages/lua.ts +21 -0
- package/src/CodeBlock/languages/objective-c.ts +26 -0
- package/src/CodeBlock/languages/powershell.ts +31 -0
- package/src/CodeBlock/languages/ruby.ts +29 -0
- package/src/CodeBlock/languages/thrift.ts +32 -0
- package/src/CodeBlock/languages/toml.ts +36 -0
- package/src/CodeBlock/languages.test.ts +402 -0
- package/src/CodeBlock/tokenizer.ts +176 -16
- package/src/CodeBlock/tokenizerBudget.test.ts +112 -0
- package/src/Collapsible/Collapsible.doc.mjs +6 -0
- package/src/Collapsible/Collapsible.spec.md +26 -23
- package/src/Collapsible/Collapsible.tsx +121 -2
- package/src/CommandPalette/CommandPalette.perf.test.ts +8 -4
- package/src/CommandPalette/CommandPaletteEmpty.doc.mjs +6 -3
- package/src/CommandPalette/CommandPaletteEmpty.spec.md +190 -0
- package/src/CommandPalette/CommandPaletteEmpty.tsx +4 -0
- package/src/CommandPalette/__tests__/CommandPaletteEmptyAudit.a11y.chromium.spec.ts +715 -0
- package/src/ComplexSelector/ComplexSelector.spec.md +1 -1
- package/src/ComplexSelector/ComplexSelector.test.tsx +43 -0
- package/src/ComplexSelector/ComplexSelector.tsx +7 -1
- package/src/ContextMenu/ContextMenu.spec.md +30 -26
- package/src/DateInput/DateInputTouch.test.tsx +1 -1
- package/src/Dialog/Dialog.tsx +6 -3
- package/src/Divider/Divider.spec.md +79 -70
- package/src/Drawer/Drawer.tsx +38 -35
- package/src/DropdownMenu/DropdownMenu.spec.md +3 -1
- package/src/DropdownMenu/DropdownMenu.ssr.test.tsx +44 -8
- package/src/DropdownMenu/DropdownMenuItem.tsx +5 -5
- package/src/DropdownMenu/MenuBottomSheetActionList.tsx +3 -3
- package/src/DropdownMenu/modules/useMenuPress.spec.md +35 -36
- package/src/Field/Field.tsx +1 -1
- package/src/Field/FieldLabel.tsx +1 -1
- package/src/Field/PanelSearchInput.tsx +11 -0
- package/src/Field/inputStyles.stylex.ts +15 -15
- package/src/FieldStatus/FieldStatus.test.tsx +12 -0
- package/src/FieldStatus/FieldStatus.tsx +12 -3
- package/src/FileInput/FileInput.test.tsx +78 -0
- package/src/FileInput/FileInput.tsx +11 -9
- package/src/Heading/Heading.spec.md +198 -0
- package/src/Icon/Icon.doc.mjs +67 -5
- package/src/Icon/Icon.test.tsx +548 -9
- package/src/Icon/Icon.tsx +79 -15
- package/src/Icon/IconSize.stylex.ts +27 -11
- package/src/Icon/globalIconRegistry.test.tsx +395 -3
- package/src/Icon/globalIconRegistry.tsx +184 -36
- package/src/Icon/index.ts +29 -1
- package/src/Icon/useIcon.ts +5 -1
- package/src/IconButton/IconButton.test.tsx +5 -2
- package/src/InputGroup/InputGroup.spec.md +199 -0
- package/src/InputGroup/InputGroupText.spec.md +139 -0
- package/src/Item/ItemSwipeLayer.tsx +9 -0
- package/src/Kbd/Kbd.test.tsx +95 -0
- package/src/Kbd/Kbd.tsx +30 -23
- package/src/Layer/layerDismissalInvariants.test.tsx +9 -0
- package/src/Layer/modalOutlet.ts +155 -14
- package/src/Layer/useLayer.doc.mjs +1 -1
- package/src/Layer/useLayer.test.tsx +109 -1
- package/src/Layer/useLayer.tsx +110 -41
- package/src/Lightbox/Lightbox.test.tsx +15 -0
- package/src/Lightbox/Lightbox.tsx +126 -118
- package/src/Lightbox/LightboxViewport.a11y.browser.spec.ts +70 -0
- package/src/Link/Link.spec.md +229 -0
- package/src/Link/LinkProvider.spec.md +167 -0
- package/src/List/List.spec.md +90 -33
- package/src/Markdown/Markdown.codeLanguages.test.tsx +137 -0
- package/src/Markdown/Markdown.doc.mjs +12 -0
- package/src/Markdown/Markdown.spec.md +56 -51
- package/src/Markdown/Markdown.tsx +32 -2
- package/src/MobileNav/MobileNav.spec.md +161 -64
- package/src/MobileNav/MobileNav.tsx +41 -35
- package/src/MoreMenu/MoreMenu.spec.md +88 -53
- package/src/MultiSelector/MultiSelector.test.tsx +97 -0
- package/src/MultiSelector/MultiSelector.tsx +16 -1
- package/src/NavIcon/NavIcon.spec.md +66 -38
- package/src/NavMenu/NavHeadingMenu.spec.md +100 -44
- package/src/NavMenu/NavHeadingMenu.test.tsx +199 -1
- package/src/NavMenu/NavHeadingMenuItem.tsx +54 -6
- package/src/NumberInput/NumberInput.spec.md +248 -0
- package/src/NumberInput/NumberInput.test.tsx +43 -0
- package/src/NumberInput/NumberInput.tsx +11 -1
- package/src/Popover/Popover.doc.mjs +38 -2
- package/src/Popover/Popover.spec.md +71 -11
- package/src/Popover/Popover.test.tsx +95 -0
- package/src/Popover/Popover.tsx +401 -35
- package/src/Popover/PopoverPresentation.test.tsx +952 -0
- package/src/Popover/index.ts +5 -1
- package/src/Popover/lazyPopoverBottomSheet.ts +57 -0
- package/src/PowerSearch/PowerSearch.spec.md +423 -53
- package/src/PowerSearch/PowerSearch.test.tsx +32 -1
- package/src/PowerSearch/PowerSearch.tsx +7 -5
- package/src/ProgressBar/ProgressBar.test.tsx +12 -0
- package/src/ProgressBar/ProgressBar.tsx +18 -0
- package/src/RadioList/RadioList.spec.md +227 -0
- package/src/RadioList/RadioListItem.spec.md +223 -0
- package/src/SelectableCard/SelectableCard.spec.md +230 -0
- package/src/Selector/Selector.test.tsx +47 -0
- package/src/Selector/Selector.tsx +11 -1
- package/src/SideNav/SideNav.spec.md +46 -27
- package/src/SideNav/SideNav.test.tsx +219 -17
- package/src/SideNav/SideNav.tsx +85 -1
- package/src/SideNav/SideNavItem.tsx +40 -9
- package/src/SideNav/SideNavRailMotion.test.tsx +620 -0
- package/src/SideNav/railMotion.ts +315 -0
- package/src/Skeleton/Skeleton.spec.md +7 -7
- package/src/Spinner/Spinner.spec.md +10 -10
- package/src/StatusDot/StatusDot.spec.md +24 -28
- package/src/StatusDot/StatusDot.test.tsx +13 -0
- package/src/StatusDot/StatusDot.tsx +27 -0
- package/src/Stepper/Step.spec.md +206 -0
- package/src/Stepper/Step.tsx +12 -3
- package/src/Stepper/Stepper.test.tsx +17 -0
- package/src/TabList/Tab.spec.md +201 -0
- package/src/TabList/Tab.tsx +7 -1
- package/src/TabList/TabMenu.spec.md +196 -0
- package/src/TabList/TabMenu.tsx +2 -0
- package/src/TabList/__tests__/TabListOverflow.interaction.browser.spec.ts +99 -0
- package/src/Table/Table.spec.md +51 -31
- package/src/Table/TableCell.tsx +6 -0
- package/src/Table/TableHeaderCell.tsx +2 -0
- package/src/Table/__tests__/TableStickyDividers.a11y.browser.spec.ts +560 -0
- package/src/Table/plugins/columnResize/useTableColumnResize.tsx +23 -8
- package/src/Table/plugins/rowExpansion/useTableRowExpansion.test.tsx +91 -9
- package/src/Table/plugins/rowExpansion/useTableRowExpansion.tsx +120 -5
- package/src/Table/plugins/stickyColumns/useTableStickyColumns.test.tsx +51 -1
- package/src/Table/plugins/stickyColumns/useTableStickyColumns.tsx +291 -12
- package/src/Table/rowDivider.ts +154 -0
- package/src/Text/Text.spec.md +114 -127
- package/src/TextArea/TextArea.spec.md +164 -64
- package/src/TextArea/TextArea.tsx +1 -1
- package/src/TextInput/TextInput.spec.md +258 -0
- package/src/Thumbnail/Thumbnail.spec.md +244 -0
- package/src/Thumbnail/Thumbnail.test.tsx +109 -6
- package/src/Thumbnail/Thumbnail.tsx +34 -4
- package/src/TimeInput/TimeInput.spec.md +273 -0
- package/src/Timestamp/Timestamp.spec.md +252 -0
- package/src/Toast/ToastViewport.modalHost.test.tsx +496 -6
- package/src/Toast/ToastViewport.tsx +27 -2
- package/src/ToggleButton/ToggleButtonGroup.spec.md +14 -13
- package/src/Tokenizer/Tokenizer.props-type.test.tsx +126 -0
- package/src/Tokenizer/Tokenizer.spec.md +312 -71
- package/src/Tokenizer/Tokenizer.ssr.test.tsx +196 -0
- package/src/Tokenizer/Tokenizer.tsx +573 -25
- package/src/Tokenizer/TokenizerBottomSheet.test.tsx +2719 -0
- package/src/Tokenizer/TokenizerBottomSheet.tsx +957 -0
- package/src/Tokenizer/__tests__/TokenizerEndLane.a11y.chromium.spec.ts +60 -27
- package/src/Toolbar/Toolbar.spec.md +103 -49
- package/src/Tooltip/Tooltip.spec.md +161 -36
- package/src/TopNav/TopNavMegaMenu.reduced-motion.source-build.test.mjs +83 -0
- package/src/TopNav/TopNavMegaMenu.tsx +21 -4
- package/src/TreeList/TreeList.doc.mjs +13 -0
- package/src/TreeList/TreeList.spec.md +51 -35
- package/src/TreeList/TreeList.tsx +234 -2
- package/src/TreeList/TreeListItem.tsx +12 -2
- package/src/VisuallyHidden/VisuallyHidden.spec.md +170 -0
- package/src/__tests__/BusyOwnerAnnouncement.test.tsx +7 -5
- package/src/__tests__/unthemedLength.ts +34 -0
- package/src/gestures/GestureArena.ts +966 -0
- package/src/gestures/GestureRecognizer.ts +626 -0
- package/src/gestures/LongPressGestureRecognizer.ts +186 -0
- package/src/gestures/PanGestureRecognizer.ts +410 -0
- package/src/gestures/TapGestureRecognizer.ts +192 -0
- package/src/gestures/VelocityTracker.ts +194 -0
- package/src/gestures/__tests__/LongPressGestureRecognizer.test.ts +141 -0
- package/src/gestures/__tests__/PanGestureRecognizer.test.ts +327 -0
- package/src/gestures/__tests__/TapGestureRecognizer.test.ts +154 -0
- package/src/gestures/__tests__/VelocityTracker.test.ts +261 -0
- package/src/gestures/__tests__/arena.test.ts +824 -0
- package/src/gestures/__tests__/arenaContinuous.test.ts +207 -0
- package/src/gestures/__tests__/arenaTapLongPress.test.ts +211 -0
- package/src/gestures/__tests__/harness.ts +204 -0
- package/src/gestures/geometry.ts +55 -0
- package/src/gestures/types.ts +161 -0
- package/src/hooks/ModalAnnounceProvider.tsx +155 -0
- package/src/hooks/actionGroupTracker.exports.test.ts +28 -0
- package/src/hooks/actionGroupTracker.test.ts +510 -0
- package/src/hooks/actionGroupTracker.ts +449 -0
- package/src/hooks/index.ts +6 -0
- package/src/hooks/modalAnnounce.ts +439 -0
- package/src/hooks/useAdaptivePresentation.ts +36 -6
- package/src/hooks/useAnimatedLayout.doc.mjs +101 -0
- package/src/hooks/useAnimatedLayout.ts +61 -0
- package/src/hooks/useAnnounce.doc.mjs +4 -4
- package/src/hooks/useAnnounce.modal.test.tsx +1291 -0
- package/src/hooks/useAnnounce.ts +362 -10
- package/src/hooks/useAnnounceRenderedText.adopters.test.tsx +22 -0
- package/src/hooks/useBusyAnnouncement.ts +29 -50
- package/src/hooks/useFocusTrap.doc.mjs +3 -3
- package/src/hooks/useFocusTrap.test.tsx +64 -0
- package/src/hooks/useFocusTrap.ts +15 -8
- package/src/i18n/generated-locales/en.generated.ts +35 -0
- package/src/i18n/generated-locales/pseudo.generated.ts +37 -0
- package/src/internal/tokenizer-presentation.test.ts +29 -0
- package/src/internal/tokenizer-presentation.ts +25 -0
- package/src/internal/touch.test.ts +44 -0
- package/src/internal/touch.ts +41 -0
- package/src/motion/LayoutChangeSnapshot.tsx +50 -0
- package/src/motion/MEASUREMENTS.md +41 -37
- package/src/motion/README.md +153 -16
- package/src/motion/__tests__/animatedLayout.interaction.browser.spec.ts +1613 -0
- package/src/motion/__tests__/animatedLayoutAdopters.interaction.browser.spec.ts +217 -0
- package/src/motion/__tests__/animatedLayoutBundle.ts +17 -0
- package/src/motion/animatedLayout.boundary.test.ts +154 -0
- package/src/motion/animatedLayout.swap.test.ts +827 -0
- package/src/motion/animatedLayout.test.ts +1154 -0
- package/src/motion/animatedLayout.ts +1772 -0
- package/src/motion/animatedLayoutAdopters.test.tsx +500 -0
- package/src/motion/animator.test.ts +2653 -0
- package/src/motion/animator.ts +2794 -0
- package/src/motion/bezier.test.ts +52 -0
- package/src/motion/bezier.ts +64 -0
- package/src/motion/coast.test.ts +99 -0
- package/src/motion/coast.ts +150 -0
- package/src/motion/decay.test.ts +120 -0
- package/src/motion/decay.ts +126 -0
- package/src/motion/projection.test.ts +107 -0
- package/src/motion/projection.ts +116 -0
- package/src/motion/reducedMotion.stylex.ts +41 -0
- package/src/motion/reducedMotion.test.ts +129 -0
- package/src/motion/reducedMotion.ts +94 -0
- package/src/motion/reducedMotionPlan.test.ts +182 -0
- package/src/motion/reducedMotionPlan.ts +263 -0
- package/src/motion/resolveSnapPoint.test.ts +189 -0
- package/src/motion/resolveSnapPoint.ts +169 -0
- package/src/motion/roleValue.ts +105 -0
- package/src/motion/roles.test.ts +256 -0
- package/src/motion/roles.ts +262 -0
- package/src/motion/rubberBand.test.ts +88 -0
- package/src/motion/rubberBand.ts +115 -0
- package/src/motion/selectPage.test.ts +31 -0
- package/src/motion/selectPage.ts +55 -0
- package/src/motion/spring.test.ts +650 -0
- package/src/motion/spring.ts +551 -0
- package/src/motion/transientCopy.ts +374 -0
- package/src/motion/uikit/gestures.test.ts +10 -0
- package/src/motion/uikit/gestures.ts +265 -215
- package/src/motion/uikit/index.ts +55 -6
- package/src/motion/uikit/navigation.ts +10 -0
- package/src/motion/uikit/scroll.ts +20 -1
- package/src/motion/uikit/springRows.test.ts +71 -0
- package/src/motion/uikit/springs.ts +470 -285
- package/src/motion/uikit/timing.ts +82 -25
- package/src/motion/uikit/uikit.test.ts +87 -10
- package/src/motion/uikit/values.test.ts +110 -0
- package/src/tailwind-theme.css +51 -1
- package/src/tailwind-theme.test.ts +51 -0
- package/src/theme/Theme.test.tsx +28 -0
- package/src/theme/declarationBoundary.ts +282 -1
- package/src/theme/defineTheme.test.ts +529 -12
- package/src/theme/defineTheme.ts +231 -19
- package/src/theme/derivedVarRegistry.test.ts +19 -0
- package/src/theme/derivedVarRegistry.ts +4 -0
- package/src/theme/expandMotionScale.test.ts +17 -0
- package/src/theme/extensibleAxes.test.ts +74 -29
- package/src/theme/generateThemeRules.ts +772 -35
- package/src/theme/onMediaTokens.test.ts +186 -0
- package/src/theme/statusColor.ts +189 -0
- package/src/theme/statusRoleDerivation.ts +289 -0
- package/src/theme/themeAdaptations.test.ts +375 -0
- package/src/theme/tokens.stylex.ts +31 -2
- package/src/theme/tokens.test.ts +36 -1
- package/src/theme/tokens.ts +23 -1
- package/src/theme/useTheme.ts +10 -4
- package/src/utils/hitArea.test.ts +628 -0
- package/src/utils/hitArea.ts +770 -0
package/README.md
CHANGED
|
@@ -165,15 +165,18 @@ The `tailwind-theme.css` import maps system tokens to Tailwind utilities via `@t
|
|
|
165
165
|
|
|
166
166
|
Some useful mappings:
|
|
167
167
|
|
|
168
|
-
| Tailwind class
|
|
169
|
-
|
|
|
170
|
-
| `text-primary` / `text-secondary`
|
|
171
|
-
| `bg-surface` / `bg-card` / `bg-body`
|
|
172
|
-
| `border-border` / `border-strong`
|
|
173
|
-
| `bg-
|
|
174
|
-
| `
|
|
175
|
-
| `
|
|
176
|
-
| `
|
|
168
|
+
| Tailwind class | Astryx token |
|
|
169
|
+
| ------------------------------------------------------------ | ---------------------------------------------------------------- |
|
|
170
|
+
| `text-primary` / `text-secondary` | `--color-text-primary` / `--color-text-secondary` |
|
|
171
|
+
| `bg-surface` / `bg-card` / `bg-body` | `--color-background-surface` / `card` / `body` |
|
|
172
|
+
| `border-border` / `border-strong` | `--color-border` / `--color-border-emphasized` |
|
|
173
|
+
| `bg-info` / `bg-success` / `bg-warning` / `bg-error` | Strong status fills (`--color-<status>`) |
|
|
174
|
+
| `text-on-info` / `bg-info-muted` / `text-on-info-muted` | Strong-fill content, pale fill, pale-fill content |
|
|
175
|
+
| `text-success` / `text-warning` / `text-error` / `text-info` | Status text on the page (`--color-text-*`; also `text-status-*`) |
|
|
176
|
+
| `border-success` / `border-warning` / `border-error` | Status borders (`--color-border-*`) |
|
|
177
|
+
| `bg-blue-subtle` / `border-blue-ring` / `text-blue-vivid` | Hue palette (×10 hues) |
|
|
178
|
+
| `rounded-sm` / `rounded-md` / `rounded-lg` | `--radius-inner` / `element` / `container` |
|
|
179
|
+
| `shadow-sm` / `shadow-md` / `shadow-lg` | `--shadow-low` / `med` / `high` |
|
|
177
180
|
|
|
178
181
|
Spacing references `var(--spacing-1)` as the base unit, so `p-4` = 16px, matching Astryx's `--spacing-4`. Arbitrary values still work as an escape hatch: `bg-[var(--color-background-surface)]`.
|
|
179
182
|
|
|
@@ -28,7 +28,7 @@ import { Button } from "../Button/index.js";
|
|
|
28
28
|
import { mergeProps } from "../utils/index.js";
|
|
29
29
|
import { themeProps } from "../utils/themeProps.js";
|
|
30
30
|
import { useTranslator } from "../i18n/index.js";
|
|
31
|
-
import { useMediaQuery } from "../hooks/
|
|
31
|
+
import { useMediaQuery } from "../hooks/useMediaQuery.js";
|
|
32
32
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
33
33
|
const SMALL_SCREEN_QUERY = '(max-width: 640px)';
|
|
34
34
|
const styles = {
|
|
@@ -176,28 +176,6 @@ export interface AppShellProps extends BaseProps<HTMLDivElement> {
|
|
|
176
176
|
*/
|
|
177
177
|
topNav?: ReactNode;
|
|
178
178
|
}
|
|
179
|
-
/**
|
|
180
|
-
* Page shell for an application. Provides the structural frame for an app:
|
|
181
|
-
* top navigation, side navigation, and main content area.
|
|
182
|
-
*
|
|
183
|
-
* Slot-based API with `topNav`, `sideNav`, `banner`, and `children`.
|
|
184
|
-
* Supports two height modes (`fill` and `auto`), responsive side nav
|
|
185
|
-
* collapse, and mobile overlay with backdrop.
|
|
186
|
-
*
|
|
187
|
-
* @example
|
|
188
|
-
* ```
|
|
189
|
-
* <AppShell
|
|
190
|
-
* topNav={<TopNav label="Navigation" heading={<TopNavHeading heading="My App" />} />}
|
|
191
|
-
* sideNav={<SideNav>{navSections}</SideNav>}
|
|
192
|
-
* mobileNav={
|
|
193
|
-
* <MobileNav isOpen={mobileOpen} onOpenChange={(open) => setMobileOpen(open)} header="My App">
|
|
194
|
-
* {navSections}
|
|
195
|
-
* </MobileNav>
|
|
196
|
-
* }>
|
|
197
|
-
* <Content />
|
|
198
|
-
* </AppShell>
|
|
199
|
-
* ```
|
|
200
|
-
*/
|
|
201
179
|
export declare function AppShell({ variant, banner, children, contentPadding, 'data-testid': dataTestId, height, mobileNav, sideNav, topNav, xstyle, className, style, ref, ...rest }: AppShellProps): React.JSX.Element;
|
|
202
180
|
export declare namespace AppShell {
|
|
203
181
|
var displayName: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppShell.d.ts","sourceRoot":"","sources":["../../src/AppShell/AppShell.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAQL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"AppShell.d.ts","sourceRoot":"","sources":["../../src/AppShell/AppShell.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAQL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAgCf,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAChD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAQ5C,OAAO,EAEL,KAAK,mBAAmB,EACzB,MAAM,2BAA2B,CAAC;AACnC,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,SAAS,CAAC;AAsChD;;;GAGG;AACH,MAAM,MAAM,kBAAkB,GAAG,mBAAmB,GAAG,MAAM,CAAC;AAE9D;;;;;;;GAOG;AAEH;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG,MAAM,kBAAkB,CAAC;AAEvD;;;GAGG;AACH,MAAM,WAAW,eAAe;IAC9B;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAEzC;;;;OAIG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,kBAAkB,CAAC;IAEhC;;;;;;;;;;OAUG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC9D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC;IAE1B;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;;;;;OAOG;IACH,cAAc,CAAC,EAAE,WAAW,CAAC;IAE7B;;;;;OAKG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAEzB;;;;;;;;;;;;;;;;;;;;;OAqBG;IACH,SAAS,CAAC,EAAE,KAAK,GAAG,eAAe,GAAG,SAAS,CAAC;IAEhD;;;;;;;;;;;;;;;;;;;;;;;;;OAyBG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AAqND,wBAAgB,QAAQ,CAAC,EACvB,OAAoB,EACpB,MAAM,EACN,QAAQ,EACR,cAAc,EACd,aAAa,EAAE,UAAU,EACzB,MAAe,EACf,SAAS,EACT,OAAO,EACP,MAAM,EACN,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,aAAa,qBAykBf;yBAxlBe,QAAQ"}
|
|
@@ -31,6 +31,9 @@ import { LayoutContent } from "../Layout/LayoutContent.js";
|
|
|
31
31
|
import { MobileNavToggle } from "../MobileNav/MobileNavToggle.js";
|
|
32
32
|
import { MAX_CLOSE_DELAY_MS as MOBILE_NAV_MAX_CLOSE_DELAY_MS } from "../MobileNav/MobileNav.js";
|
|
33
33
|
import { SideNavRenderContext } from "../SideNav/SideNavRenderContext.js";
|
|
34
|
+
import { SideNavShellContext } from "../SideNav/railMotion.js";
|
|
35
|
+
import { useAnimatedLayout } from "../hooks/useAnimatedLayout.js";
|
|
36
|
+
import { holdLayoutSwap, landLayoutGlide, layoutMotionFor, playLayoutFrames, playLayoutSwap, reportLayoutChange } from "../motion/animatedLayout.js";
|
|
34
37
|
import { TopNavRenderContext } from "../TopNav/TopNavRenderContext.js";
|
|
35
38
|
import { TopNavMobileContentContext } from "../TopNav/TopNavMobileContentContext.js";
|
|
36
39
|
import { AppShellMobileContext } from "./AppShellMobileContext.js";
|
|
@@ -229,6 +232,18 @@ const styles = {
|
|
|
229
232
|
* </AppShell>
|
|
230
233
|
* ```
|
|
231
234
|
*/
|
|
235
|
+
|
|
236
|
+
/**
|
|
237
|
+
* The column beside the rail that holds `main`: its ancestor whose parent
|
|
238
|
+
* also holds the rail. The glide moves it; the rail's edge rides it.
|
|
239
|
+
*/
|
|
240
|
+
function columnOf(main, rail) {
|
|
241
|
+
let column = main;
|
|
242
|
+
while (column.parentElement != null && !column.parentElement.contains(rail)) {
|
|
243
|
+
column = column.parentElement;
|
|
244
|
+
}
|
|
245
|
+
return column;
|
|
246
|
+
}
|
|
232
247
|
export function AppShell({
|
|
233
248
|
variant = 'elevated',
|
|
234
249
|
banner,
|
|
@@ -437,6 +452,139 @@ export function AppShell({
|
|
|
437
452
|
}) : undefined;
|
|
438
453
|
|
|
439
454
|
// =========================================================================
|
|
455
|
+
// While the inline side nav collapses or expands, the content area holds
|
|
456
|
+
// its own animated layout handle (`component:AppShell` FR17): the column
|
|
457
|
+
// beside the rail glides from its old place, and the content swaps its old
|
|
458
|
+
// wrap for its new one in place (`spec:AST-105` FR8), on the rail's clock
|
|
459
|
+
// (`component:SideNav` FR6).
|
|
460
|
+
const railRef = useRef(null);
|
|
461
|
+
const mainRef = useRef(null);
|
|
462
|
+
const backdropRef = useRef(null);
|
|
463
|
+
const contentLayout = useAnimatedLayout({
|
|
464
|
+
containerRef: shellRef
|
|
465
|
+
});
|
|
466
|
+
const pendingContentRef = useRef(null);
|
|
467
|
+
// The running swap: when it started and its wraps' starting opacities, so a
|
|
468
|
+
// change made during it starts its cross-fade from what the content shows.
|
|
469
|
+
const lastSwapRef = useRef(null);
|
|
470
|
+
const sideNavShell = useMemo(() => ({
|
|
471
|
+
animatedLayout: contentLayout,
|
|
472
|
+
rail: () => railRef.current,
|
|
473
|
+
column: () => mainRef.current == null ? null : columnOf(mainRef.current, railRef.current),
|
|
474
|
+
landContent() {
|
|
475
|
+
if (mainRef.current != null) {
|
|
476
|
+
landLayoutGlide(columnOf(mainRef.current, railRef.current));
|
|
477
|
+
}
|
|
478
|
+
},
|
|
479
|
+
beforeRailChange() {
|
|
480
|
+
const main = mainRef.current;
|
|
481
|
+
if (main == null) {
|
|
482
|
+
return;
|
|
483
|
+
}
|
|
484
|
+
const motion = layoutMotionFor(main);
|
|
485
|
+
// Only a spring glides the column; under Reduce Motion the two wraps
|
|
486
|
+
// cross-fade over a steady surface (`design:reduced-motion` DR2).
|
|
487
|
+
let change = null;
|
|
488
|
+
if (motion.kind === 'spring') {
|
|
489
|
+
change = reportLayoutChange(contentLayout, railRef);
|
|
490
|
+
change.measureBefore();
|
|
491
|
+
}
|
|
492
|
+
// At rest the copy (the wrap shown now) starts opaque and the entering
|
|
493
|
+
// wrap unseen; mid-swap the wrap in the DOM is the entering one and
|
|
494
|
+
// the copy's wrap is the one entering next, each at what it shows.
|
|
495
|
+
let held = 1;
|
|
496
|
+
let entering = 0;
|
|
497
|
+
const last = lastSwapRef.current;
|
|
498
|
+
if (last != null && motion.kind === 'spring') {
|
|
499
|
+
const elapsed = Number(main.ownerDocument.timeline?.currentTime ?? 0) - last.startedAt;
|
|
500
|
+
if (elapsed < motion.progress.durationMs) {
|
|
501
|
+
const p = 1 - motion.progress.remaining(elapsed);
|
|
502
|
+
held = last.entering + (1 - last.entering) * p;
|
|
503
|
+
entering = last.held * (1 - p);
|
|
504
|
+
}
|
|
505
|
+
}
|
|
506
|
+
lastSwapRef.current = null;
|
|
507
|
+
pendingContentRef.current = {
|
|
508
|
+
change,
|
|
509
|
+
swap: holdLayoutSwap(contentLayout, main, {
|
|
510
|
+
isVisiblePart: true
|
|
511
|
+
}),
|
|
512
|
+
before: main.getBoundingClientRect(),
|
|
513
|
+
held,
|
|
514
|
+
entering
|
|
515
|
+
};
|
|
516
|
+
},
|
|
517
|
+
afterRailChange() {
|
|
518
|
+
const pending = pendingContentRef.current;
|
|
519
|
+
pendingContentRef.current = null;
|
|
520
|
+
const main = mainRef.current;
|
|
521
|
+
if (pending == null || main == null) {
|
|
522
|
+
return () => {};
|
|
523
|
+
}
|
|
524
|
+
pending.change?.animate();
|
|
525
|
+
// The column beside the rail, which the glide moves: the copy sits
|
|
526
|
+
// beside it, in its parent, and rides its glide.
|
|
527
|
+
const column = columnOf(main, railRef.current);
|
|
528
|
+
const after = main.getBoundingClientRect();
|
|
529
|
+
const isRtl = getComputedStyle(main).direction === 'rtl';
|
|
530
|
+
const travel = isRtl ? pending.before.right - after.right : pending.before.left - after.left;
|
|
531
|
+
// An expand slides the narrower column in from its old start, which
|
|
532
|
+
// opens a gap at its trailing edge: the content surface (the elevated
|
|
533
|
+
// backdrop, or the main element) reaches over it as it closes,
|
|
534
|
+
// whether or not the old wrap is held.
|
|
535
|
+
const cover = [];
|
|
536
|
+
const surface = backdropRef.current ?? main;
|
|
537
|
+
const color = getComputedStyle(surface).backgroundColor;
|
|
538
|
+
const isPainted = !/^rgba\(.*,\s*0\)$|^transparent$/.test(color);
|
|
539
|
+
const glides = layoutMotionFor(main).kind === 'spring';
|
|
540
|
+
if ((isRtl ? travel > 0 : travel < 0) && glides && isPainted) {
|
|
541
|
+
cover.push({
|
|
542
|
+
element: surface,
|
|
543
|
+
frames: p => ({
|
|
544
|
+
boxShadow: `${-travel * (1 - p)}px 0px 0px 0px ${color}`
|
|
545
|
+
})
|
|
546
|
+
});
|
|
547
|
+
}
|
|
548
|
+
if (pending.swap == null || column.parentElement == null) {
|
|
549
|
+
return playLayoutFrames(contentLayout, cover);
|
|
550
|
+
}
|
|
551
|
+
// Under Reduce Motion nothing glides: the old wrap's copy paints the
|
|
552
|
+
// surface it sat on, so that surface fades out with it where it was
|
|
553
|
+
// (`design:reduced-motion` DR2) instead of leaving a bare strip.
|
|
554
|
+
if (!glides && isPainted) {
|
|
555
|
+
pending.swap.copy.style.backgroundColor = color;
|
|
556
|
+
}
|
|
557
|
+
const {
|
|
558
|
+
held,
|
|
559
|
+
entering
|
|
560
|
+
} = pending;
|
|
561
|
+
lastSwapRef.current = {
|
|
562
|
+
startedAt: Number(main.ownerDocument.timeline?.currentTime ?? 0),
|
|
563
|
+
held,
|
|
564
|
+
entering
|
|
565
|
+
};
|
|
566
|
+
return playLayoutSwap(pending.swap, {
|
|
567
|
+
host: column.parentElement,
|
|
568
|
+
copy: p => ({
|
|
569
|
+
opacity: held * (1 - p)
|
|
570
|
+
}),
|
|
571
|
+
rideWith: {
|
|
572
|
+
element: column,
|
|
573
|
+
travel: {
|
|
574
|
+
x: travel,
|
|
575
|
+
y: 0
|
|
576
|
+
}
|
|
577
|
+
},
|
|
578
|
+
incoming: [...Array.from(main.children, element => ({
|
|
579
|
+
element,
|
|
580
|
+
frames: p => ({
|
|
581
|
+
opacity: entering + (1 - entering) * p
|
|
582
|
+
})
|
|
583
|
+
})), ...cover]
|
|
584
|
+
});
|
|
585
|
+
}
|
|
586
|
+
}), [contentLayout]);
|
|
587
|
+
|
|
440
588
|
// Build sideNav content
|
|
441
589
|
//
|
|
442
590
|
// In auto mode, the sideNav panel is not internally scrollable (the page
|
|
@@ -445,6 +593,7 @@ export function AppShell({
|
|
|
445
593
|
// the sticky behavior since LayoutPanel doesn't accept style/className.
|
|
446
594
|
// =========================================================================
|
|
447
595
|
const sideNavPanel = showSideNavInline ? /*#__PURE__*/_jsx(LayoutPanel, {
|
|
596
|
+
ref: railRef,
|
|
448
597
|
padding: 0,
|
|
449
598
|
hasDivider: navHasDividers,
|
|
450
599
|
isScrollable: isFill,
|
|
@@ -452,7 +601,10 @@ export function AppShell({
|
|
|
452
601
|
variant
|
|
453
602
|
}),
|
|
454
603
|
xstyle: [navAreaStyle, isAuto && stickyBgStyle, isAuto && styles.panelAutoFill],
|
|
455
|
-
children:
|
|
604
|
+
children: /*#__PURE__*/_jsx(SideNavShellContext, {
|
|
605
|
+
value: sideNavShell,
|
|
606
|
+
children: sideNav
|
|
607
|
+
})
|
|
456
608
|
}) : undefined;
|
|
457
609
|
const sideNavContent = sideNavPanel != null && isAuto ? /*#__PURE__*/_jsx("div", {
|
|
458
610
|
...{
|
|
@@ -466,6 +618,7 @@ export function AppShell({
|
|
|
466
618
|
// =========================================================================
|
|
467
619
|
const shouldElevateWithCorner = isElevated && hasTopNav && showSideNavInline;
|
|
468
620
|
const mainInner = /*#__PURE__*/_jsx(LayoutContent, {
|
|
621
|
+
ref: mainRef,
|
|
469
622
|
padding: contentPadding ?? 0,
|
|
470
623
|
role: "main",
|
|
471
624
|
id: MAIN_CONTENT_ID
|
|
@@ -490,6 +643,7 @@ export function AppShell({
|
|
|
490
643
|
}
|
|
491
644
|
}[!!shouldElevateWithCorner << 0],
|
|
492
645
|
children: [shouldElevateWithCorner && /*#__PURE__*/_jsx("div", {
|
|
646
|
+
ref: backdropRef,
|
|
493
647
|
...{
|
|
494
648
|
className: "x10l6tqk x10a8y8t x10xzikg x183tx6i x47corl"
|
|
495
649
|
}
|
|
@@ -92,7 +92,7 @@ const styles = {
|
|
|
92
92
|
},
|
|
93
93
|
success: {
|
|
94
94
|
kWkggS: "xdsz4j9",
|
|
95
|
-
kMwMTN: "
|
|
95
|
+
kMwMTN: "xri61p4",
|
|
96
96
|
$$css: true
|
|
97
97
|
},
|
|
98
98
|
neutral: {
|
|
@@ -102,7 +102,7 @@ const styles = {
|
|
|
102
102
|
},
|
|
103
103
|
error: {
|
|
104
104
|
kWkggS: "x1pjz0fi",
|
|
105
|
-
kMwMTN: "
|
|
105
|
+
kMwMTN: "x1m024r3",
|
|
106
106
|
$$css: true
|
|
107
107
|
},
|
|
108
108
|
icon: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../src/Badge/Badge.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AACrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAW5C,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../src/Badge/Badge.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AACrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAW5C,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,SAAS,CAAC;AA8I7C;;;GAGG;AACH,MAAM,MAAM,YAAY,GAAG,MAAM,eAAe,CAAC;AAEjD,MAAM,WAAW,UAAW,SAAQ,SAAS,CAAC,eAAe,CAAC;IAC5D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;IACjC;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC;IAEjB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,KAAK,CAAC,EACpB,OAAmB,EACnB,KAAK,EACL,IAAI,EACJ,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,UAAU,+BAsCZ;yBA/Ce,KAAK"}
|
package/dist/Badge/Badge.js
CHANGED
|
@@ -55,23 +55,39 @@ const variants = {
|
|
|
55
55
|
$$css: true
|
|
56
56
|
},
|
|
57
57
|
info: {
|
|
58
|
-
kWkggS: "
|
|
59
|
-
kMwMTN: "
|
|
58
|
+
kWkggS: "xcc0xtb",
|
|
59
|
+
kMwMTN: "x1jxcxwi",
|
|
60
|
+
kMeerF: "xcthrzx",
|
|
61
|
+
k3XXqK: "x815t2r",
|
|
62
|
+
kjBf7l: "x3teovq",
|
|
63
|
+
kInvED: "xvr1dqx",
|
|
60
64
|
$$css: true
|
|
61
65
|
},
|
|
62
66
|
success: {
|
|
63
67
|
kWkggS: "xdsz4j9",
|
|
64
68
|
kMwMTN: "xri61p4",
|
|
69
|
+
kMeerF: "xcthrzx",
|
|
70
|
+
k3XXqK: "x815t2r",
|
|
71
|
+
kjBf7l: "x3teovq",
|
|
72
|
+
kInvED: "xvr1dqx",
|
|
65
73
|
$$css: true
|
|
66
74
|
},
|
|
67
75
|
warning: {
|
|
68
76
|
kWkggS: "x1q8g9m5",
|
|
69
77
|
kMwMTN: "xrebv38",
|
|
78
|
+
kMeerF: "xcthrzx",
|
|
79
|
+
k3XXqK: "x815t2r",
|
|
80
|
+
kjBf7l: "x3teovq",
|
|
81
|
+
kInvED: "xvr1dqx",
|
|
70
82
|
$$css: true
|
|
71
83
|
},
|
|
72
84
|
error: {
|
|
73
85
|
kWkggS: "x1pjz0fi",
|
|
74
86
|
kMwMTN: "x1m024r3",
|
|
87
|
+
kMeerF: "xcthrzx",
|
|
88
|
+
k3XXqK: "x815t2r",
|
|
89
|
+
kjBf7l: "x3teovq",
|
|
90
|
+
kInvED: "xvr1dqx",
|
|
75
91
|
$$css: true
|
|
76
92
|
},
|
|
77
93
|
blue: {
|
package/dist/Banner/Banner.d.ts
CHANGED
|
@@ -8,6 +8,7 @@
|
|
|
8
8
|
* - Banner frame (themeProps 'banner-frame'): owns the resting elevation and,
|
|
9
9
|
* for elevated card banners, the outer radius that shapes that shadow
|
|
10
10
|
* - Header area (themeProps 'banner'): colored status background with icon, title, description, actions, dismiss
|
|
11
|
+
* - End area restores the ordinary text context for consumer `endContent`; built-in controls opt back into the status foreground
|
|
11
12
|
* - Content area (themeProps 'banner-content'): card background for additional content (children)
|
|
12
13
|
* - Status icon (themeProps 'banner-icon'): the target rides on the default
|
|
13
14
|
* <Icon> itself — the element that paints — so 'status:X' overrides reach
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../src/Banner/Banner.tsx"],"names":[],"mappings":"AAIA
|
|
1
|
+
{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../src/Banner/Banner.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AAEH,OAAO,EAA0B,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAE9D,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAgB5C,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,+BAA+B,CAAC;AAErE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAI9C,OAAO,KAAK,EAAC,eAAe,EAAE,kBAAkB,EAAC,MAAM,SAAS,CAAC;AAMjE;;;GAGG;AACH,MAAM,MAAM,YAAY,GAAG,MAAM,eAAe,CAAC;AAEjD;;;;;;GAMG;AACH,MAAM,MAAM,eAAe,GAAG,MAAM,kBAAkB,CAAC;AAEvD,MAAM,WAAW,WAAY,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC5D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,MAAM,EAAE,YAAY,CAAC;IACrB;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC;IACjB;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;;;;;;;;;OAWG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B;;;;;OAKG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;;;;;;;;;;;;;;;OAkBG;IACH,WAAW,CAAC,EAAE,OAAO,GAAG,iBAAiB,CAAC;IAC1C;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AA4QD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoDG;AACH,wBAAgB,MAAM,CAAC,EACrB,MAAM,EACN,KAAK,EACL,WAAW,EACX,IAAI,EACJ,aAAqB,EACrB,SAAS,EACT,YAAY,EACZ,UAAU,EACV,SAAkB,EAClB,SAAkB,EAClB,WAAkB,EAClB,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,cAAc,EACd,oBAAoB,EACpB,GAAG,IAAI,EACR,EAAE,WAAW,sCAqQb;yBAzRe,MAAM"}
|
package/dist/Banner/Banner.js
CHANGED
|
@@ -12,6 +12,7 @@
|
|
|
12
12
|
* - Banner frame (themeProps 'banner-frame'): owns the resting elevation and,
|
|
13
13
|
* for elevated card banners, the outer radius that shapes that shadow
|
|
14
14
|
* - Header area (themeProps 'banner'): colored status background with icon, title, description, actions, dismiss
|
|
15
|
+
* - End area restores the ordinary text context for consumer `endContent`; built-in controls opt back into the status foreground
|
|
15
16
|
* - Content area (themeProps 'banner-content'): card background for additional content (children)
|
|
16
17
|
* - Status icon (themeProps 'banner-icon'): the target rides on the default
|
|
17
18
|
* <Icon> itself — the element that paints — so 'status:X' overrides reach
|
|
@@ -95,10 +96,10 @@ const defaultIconNames = {
|
|
|
95
96
|
success: 'success'
|
|
96
97
|
};
|
|
97
98
|
const statusIconColor = {
|
|
98
|
-
info: '
|
|
99
|
-
warning: '
|
|
100
|
-
error: '
|
|
101
|
-
success: '
|
|
99
|
+
info: 'inherit',
|
|
100
|
+
warning: 'inherit',
|
|
101
|
+
error: 'inherit',
|
|
102
|
+
success: 'inherit'
|
|
102
103
|
};
|
|
103
104
|
|
|
104
105
|
// =============================================================================
|
|
@@ -148,6 +149,7 @@ const styles = {
|
|
|
148
149
|
kjj79g: "x13a6bvl",
|
|
149
150
|
kOIVth: "x1txdalj",
|
|
150
151
|
kmuXW: "x2lah0s",
|
|
152
|
+
kMwMTN: "x1tgivj0",
|
|
151
153
|
ks0D6T: "x193iq5w",
|
|
152
154
|
keTefX: "xvc5jky",
|
|
153
155
|
kqGvvJ: "x81ka23",
|
|
@@ -166,19 +168,60 @@ const styles = {
|
|
|
166
168
|
};
|
|
167
169
|
const statusStyles = {
|
|
168
170
|
info: {
|
|
169
|
-
kWkggS: "
|
|
171
|
+
kWkggS: "xjeheca",
|
|
172
|
+
kMwMTN: "x1w9aomi",
|
|
173
|
+
kMeerF: "xcthrzx",
|
|
174
|
+
k3XXqK: "x815t2r",
|
|
175
|
+
kjBf7l: "x3teovq",
|
|
176
|
+
kInvED: "xvr1dqx",
|
|
170
177
|
$$css: true
|
|
171
178
|
},
|
|
172
179
|
warning: {
|
|
173
180
|
kWkggS: "x24i8r5",
|
|
181
|
+
kMwMTN: "xfy1f8t",
|
|
182
|
+
kMeerF: "xcthrzx",
|
|
183
|
+
k3XXqK: "x815t2r",
|
|
184
|
+
kjBf7l: "x3teovq",
|
|
185
|
+
kInvED: "xvr1dqx",
|
|
174
186
|
$$css: true
|
|
175
187
|
},
|
|
176
188
|
error: {
|
|
177
189
|
kWkggS: "x1pritpl",
|
|
190
|
+
kMwMTN: "xl8t7bd",
|
|
191
|
+
kMeerF: "xcthrzx",
|
|
192
|
+
k3XXqK: "x815t2r",
|
|
193
|
+
kjBf7l: "x3teovq",
|
|
194
|
+
kInvED: "xvr1dqx",
|
|
178
195
|
$$css: true
|
|
179
196
|
},
|
|
180
197
|
success: {
|
|
181
198
|
kWkggS: "xu13z74",
|
|
199
|
+
kMwMTN: "xvchut",
|
|
200
|
+
kMeerF: "xcthrzx",
|
|
201
|
+
k3XXqK: "x815t2r",
|
|
202
|
+
kjBf7l: "x3teovq",
|
|
203
|
+
kInvED: "xvr1dqx",
|
|
204
|
+
$$css: true
|
|
205
|
+
}
|
|
206
|
+
};
|
|
207
|
+
|
|
208
|
+
// Scope status text context to each built-in Button. Its tooltip is a sibling,
|
|
209
|
+
// so it does not inherit these control-only variables.
|
|
210
|
+
const statusControlStyles = {
|
|
211
|
+
info: {
|
|
212
|
+
"--color-text-primary": "x1lheorj",
|
|
213
|
+
$$css: true
|
|
214
|
+
},
|
|
215
|
+
warning: {
|
|
216
|
+
"--color-text-primary": "xtlqn95",
|
|
217
|
+
$$css: true
|
|
218
|
+
},
|
|
219
|
+
error: {
|
|
220
|
+
"--color-text-primary": "xyur9ww",
|
|
221
|
+
$$css: true
|
|
222
|
+
},
|
|
223
|
+
success: {
|
|
224
|
+
"--color-text-primary": "xul3f6w",
|
|
182
225
|
$$css: true
|
|
183
226
|
}
|
|
184
227
|
};
|
|
@@ -427,13 +470,23 @@ export function Banner({
|
|
|
427
470
|
}[!!isRenderable(endContent) << 0],
|
|
428
471
|
children: [/*#__PURE__*/_jsx("div", {
|
|
429
472
|
...{
|
|
430
|
-
|
|
431
|
-
|
|
473
|
+
0: {
|
|
474
|
+
className: "x1ghz6dp xjb2p0i xcr08ib x2mo6ok x1kq96og x1tgivj0 xj0a0fe"
|
|
475
|
+
},
|
|
476
|
+
1: {
|
|
477
|
+
className: "x1ghz6dp xjb2p0i xcr08ib x2mo6ok x1kq96og xj0a0fe x1heor9g"
|
|
478
|
+
}
|
|
479
|
+
}[!!hasStatusStyle(status) << 0],
|
|
432
480
|
children: title
|
|
433
481
|
}), isRenderable(description) && /*#__PURE__*/_jsx("div", {
|
|
434
482
|
...mergeProps(themeProps('banner-description'), {
|
|
435
|
-
|
|
436
|
-
|
|
483
|
+
0: {
|
|
484
|
+
className: "x1ghz6dp xjb2p0i x141an7d x1sodnla x1ltkj2j xv1l7n4 xj0a0fe"
|
|
485
|
+
},
|
|
486
|
+
1: {
|
|
487
|
+
className: "x1ghz6dp xjb2p0i x141an7d x1sodnla x1ltkj2j xj0a0fe x1heor9g"
|
|
488
|
+
}
|
|
489
|
+
}[!!hasStatusStyle(status) << 0]),
|
|
437
490
|
children: description
|
|
438
491
|
})]
|
|
439
492
|
}), showEndArea && /*#__PURE__*/_jsxs("div", {
|
|
@@ -450,6 +503,7 @@ export function Banner({
|
|
|
450
503
|
xstyle: [styles.chevron, isExpanded && styles.chevronExpanded]
|
|
451
504
|
}),
|
|
452
505
|
onClick: handleToggleExpand,
|
|
506
|
+
className: hasStatusStyle(status) ? stylex.props(statusControlStyles[status]).className : undefined,
|
|
453
507
|
"aria-expanded": isExpanded,
|
|
454
508
|
"aria-controls": showContent ? contentId : undefined,
|
|
455
509
|
isIconOnly: true
|
|
@@ -464,6 +518,7 @@ export function Banner({
|
|
|
464
518
|
color: "inherit"
|
|
465
519
|
}),
|
|
466
520
|
onClick: handleDismiss,
|
|
521
|
+
className: hasStatusStyle(status) ? stylex.props(statusControlStyles[status]).className : undefined,
|
|
467
522
|
isIconOnly: true
|
|
468
523
|
})]
|
|
469
524
|
})]
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @file BottomSheet.tsx
|
|
3
|
-
* @input Uses React, StyleX, core hooks, shared layer dismissal, the modal outlet registry, the shared interaction modality, named BottomSheetPanel, BottomSheetSwitcherContext
|
|
3
|
+
* @input Uses React, StyleX, core hooks, shared layer dismissal, the modal outlet registry, the shared interaction modality, named BottomSheetPanel, BottomSheetSwitcherContext, BottomSheetHostContext, the private bottom-sheet stack registry
|
|
4
4
|
* @output Exports BottomSheet component and BottomSheetProps
|
|
5
5
|
* @position Public BottomSheet router plus private standalone/switcher hosts
|
|
6
6
|
*
|
|
@@ -19,24 +19,57 @@
|
|
|
19
19
|
* scroll is locked by the shared useScrollLock hook, as for Dialog: a
|
|
20
20
|
* standalone sheet holds it while presented, a switcher holds one for the
|
|
21
21
|
* whole modal flow. The remaining script is what no single dialog can
|
|
22
|
-
* decide: gating `cancel` by `purpose` and the shared dismissal stack,
|
|
23
|
-
* in a switcher, handing one scrim between two
|
|
24
|
-
* the active sheet when a retained dialog
|
|
22
|
+
* decide: gating `cancel` by `purpose` and the shared dismissal stack, the
|
|
23
|
+
* stack of sheets below, and, in a switcher, handing one scrim between two
|
|
24
|
+
* dialogs and keeping focus in the active sheet when a retained dialog
|
|
25
|
+
* closes.
|
|
25
26
|
*
|
|
26
|
-
*
|
|
27
|
-
*
|
|
27
|
+
* A standalone sheet also joins the private bottom-sheet stack
|
|
28
|
+
* (bottomSheetStack.ts) while it is presented. The stack is behaviour, not
|
|
29
|
+
* API: a modal sheet opened while another modal sheet is open stacks on top
|
|
30
|
+
* of it, the covered sheet recedes and is blocked, one scrim stays visible,
|
|
31
|
+
* and the native top layer is kept in open order even when several sheets
|
|
32
|
+
* open in one commit. A sheet rendered in another sheet's content leaves
|
|
33
|
+
* with its host and returns with it while its own `isOpen` is still true;
|
|
34
|
+
* its state is never written for it. A modal sheet on its own never
|
|
35
|
+
* notices the stack; when every sheet of a stack closes in one update, the
|
|
36
|
+
* registry returns focus once, to the bottom sheet's target, after the last
|
|
37
|
+
* dialog has closed.
|
|
38
|
+
*
|
|
39
|
+
* A standalone sheet closing in the same update as another standalone sheet
|
|
40
|
+
* opens, at the same level and from a control inside the closing sheet, is
|
|
41
|
+
* replaced by it: the two run the handoff a BottomSheetSwitcher runs between
|
|
42
|
+
* its steps (entering sheet above, retained sheet aligning down then fading,
|
|
43
|
+
* one steady scrim, focus into the new sheet and back to the flow's opener
|
|
44
|
+
* on close). The registry pairs them and drives the handoff; this host
|
|
45
|
+
* renders the retained panel state it reports, and reports its panel's
|
|
46
|
+
* motions back. Non-modal sheets (`hasScrim={false}`) are hosted as manual
|
|
47
|
+
* popovers so the top layer orders them, with `show()` below the Popover API
|
|
48
|
+
* floor; they never stack, but they replace each other the same way, and
|
|
49
|
+
* return focus to their opener on close only while the person is still in
|
|
50
|
+
* them.
|
|
51
|
+
*
|
|
52
|
+
* Every open standalone modal sheet supplies its dialog as an outlet for
|
|
53
|
+
* app-global surfaces (toasts) (Layer/modalOutlet.ts); the latest outlet,
|
|
54
|
+
* the one they render into, follows the sheet stack's order, so toasts land
|
|
55
|
+
* in the top sheet and return to the sheet beneath when it closes.
|
|
28
56
|
*
|
|
29
57
|
* SYNC: When modified, update these files to stay in sync:
|
|
30
58
|
* - /packages/core/src/BottomSheet/BottomSheetPanel.tsx
|
|
31
59
|
* - /packages/core/src/BottomSheet/BottomSheetEdgeTint.tsx
|
|
60
|
+
* - /packages/core/src/BottomSheet/BottomSheetHostContext.ts
|
|
61
|
+
* - /packages/core/src/BottomSheet/bottomSheetStack.ts
|
|
32
62
|
* - /packages/core/src/BottomSheet/BottomSheet.doc.mjs
|
|
33
63
|
* - /packages/core/src/BottomSheet/BottomSheet.test.tsx
|
|
64
|
+
* - /packages/core/src/BottomSheet/BottomSheetStacking.test.tsx
|
|
34
65
|
* - /packages/core/src/BottomSheet/BottomSheetSwitcher.tsx
|
|
35
66
|
* - /packages/core/src/BottomSheet/BottomSheetSwitcher.test.tsx
|
|
36
67
|
* - /packages/core/src/Layer/layerDismissalFamilies.test.tsx
|
|
37
68
|
* - /packages/core/src/Layer/layerDismissalInvariants.test.tsx
|
|
38
69
|
* - /packages/core/src/Toast/ToastViewport.modalHost.test.tsx
|
|
39
70
|
* - /apps/storybook/stories/BottomSheet.stories.tsx
|
|
71
|
+
* - /apps/storybook/stories/BottomSheetStacking.stories.tsx
|
|
72
|
+
* - /apps/storybook/stories/BottomSheetReplace.stories.tsx
|
|
40
73
|
* - /packages/cli/assets/templates/blocks/components/BottomSheet/BottomSheetShowcase.tsx
|
|
41
74
|
*/
|
|
42
75
|
import { type RefObject, type ReactNode } from 'react';
|
|
@@ -86,11 +119,22 @@ interface StandaloneBottomSheetProps extends BottomSheetSharedProps {
|
|
|
86
119
|
isOpen: boolean;
|
|
87
120
|
onOpenChange: (isOpen: boolean) => void;
|
|
88
121
|
hasScrim?: boolean;
|
|
89
|
-
/**
|
|
122
|
+
/**
|
|
123
|
+
* Element that receives focus after the sheet closes. For a sheet on its
|
|
124
|
+
* own, or the last sheet of a stack, it is always focused, wherever focus
|
|
125
|
+
* was. When the sheet closes with a modal sheet still open beneath it,
|
|
126
|
+
* focus returns into that sheet instead (to this element if it is inside
|
|
127
|
+
* it, else the revealed sheet's panel), because the page is still inert.
|
|
128
|
+
*/
|
|
90
129
|
finalFocusRef?: RefObject<HTMLElement | null>;
|
|
91
130
|
sheetId?: never;
|
|
92
131
|
}
|
|
93
132
|
interface SwitcherBottomSheetProps extends BottomSheetSharedProps {
|
|
133
|
+
/**
|
|
134
|
+
* @deprecated `BottomSheetSwitcher` is deprecated; give each step its own
|
|
135
|
+
* standalone sheet with `isOpen` instead. Keeps working until a future
|
|
136
|
+
* minor release removes the switcher.
|
|
137
|
+
*/
|
|
94
138
|
sheetId: string;
|
|
95
139
|
isOpen?: never;
|
|
96
140
|
onOpenChange?: never;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BottomSheet.d.ts","sourceRoot":"","sources":["../../src/BottomSheet/BottomSheet.tsx"],"names":[],"mappings":"AAIA
|
|
1
|
+
{"version":3,"file":"BottomSheet.d.ts","sourceRoot":"","sources":["../../src/BottomSheet/BottomSheet.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyEG;AAEH,OAAO,EAOL,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,WAAW,CAAC;AAC7C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAsDhD,YAAY,EAAC,iBAAiB,EAAE,oBAAoB,EAAC,MAAM,oBAAoB,CAAC;AAChF,OAAO,KAAK,EAAC,iBAAiB,EAAE,oBAAoB,EAAC,MAAM,oBAAoB,CAAC;AAsJhF,UAAU,sBAAuB,SAAQ,SAAS,CAAC,cAAc,CAAC;IAChE,qDAAqD;IACrD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAEhC,sCAAsC;IACtC,KAAK,EAAE,MAAM,CAAC;IAEd,0EAA0E;IAC1E,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB,wGAAwG;IACxG,MAAM,CAAC,EAAE,iBAAiB,GAAG,MAAM,GAAG,MAAM,CAAC;IAE7C;;;;;;;OAOG;IACH,UAAU,CAAC,EAAE,aAAa,CAAC,oBAAoB,CAAC,CAAC;IAEjD;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;CACzB;AAED,UAAU,0BAA2B,SAAQ,sBAAsB;IACjE,MAAM,EAAE,OAAO,CAAC;IAChB,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC9C,OAAO,CAAC,EAAE,KAAK,CAAC;CACjB;AAED,UAAU,wBAAyB,SAAQ,sBAAsB;IAC/D;;;;OAIG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC;CAClB;AAED,MAAM,MAAM,gBAAgB,GAC1B,0BAA0B,GAAG,wBAAwB,CAAC;AAm0BxD;;;GAGG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,+BA6BlD;yBA7Be,WAAW"}
|