@astryxdesign/core 0.5.0-canary.c4e6328 → 0.5.0-canary.c7a6a49
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/dist/AlertDialog/AlertDialog.d.ts +1 -1
- package/dist/AlertDialog/AlertDialog.d.ts.map +1 -1
- package/dist/AlertDialog/AlertDialog.js +45 -20
- package/dist/AspectRatio/AspectRatio.d.ts +6 -6
- package/dist/AvatarGroup/AvatarGroupOverflow.d.ts.map +1 -1
- package/dist/AvatarGroup/AvatarGroupOverflow.js +2 -2
- package/dist/Badge/Badge.d.ts.map +1 -1
- package/dist/Badge/Badge.js +26 -2
- package/dist/Banner/Banner.d.ts +10 -1
- package/dist/Banner/Banner.d.ts.map +1 -1
- package/dist/Banner/Banner.js +11 -2
- package/dist/Button/Button.d.ts.map +1 -1
- package/dist/Button/Button.js +8 -7
- package/dist/Calendar/Calendar.d.ts +4 -2
- package/dist/Calendar/Calendar.d.ts.map +1 -1
- package/dist/Calendar/Calendar.js +10 -10
- package/dist/Calendar/styles.d.ts +5 -20
- package/dist/Calendar/styles.d.ts.map +1 -1
- package/dist/Calendar/styles.js +15 -17
- package/dist/Card/Card.d.ts +12 -12
- package/dist/Card/Card.d.ts.map +1 -1
- package/dist/Card/Card.js +17 -9
- package/dist/Card/index.d.ts +35 -1
- package/dist/Card/index.d.ts.map +1 -1
- package/dist/Card/index.js +21 -1
- package/dist/Carousel/Carousel.d.ts.map +1 -1
- package/dist/Carousel/Carousel.js +108 -7
- package/dist/CodeBlock/CodeBlock.d.ts.map +1 -1
- package/dist/CodeBlock/CodeBlock.js +15 -4
- package/dist/CodeBlock/highlightRanges.js +1 -1
- package/dist/CodeBlock/highlightStyles.js +13 -13
- package/dist/CommandPalette/CommandPaletteItem.d.ts.map +1 -1
- package/dist/CommandPalette/CommandPaletteItem.js +2 -7
- package/dist/ComplexSelector/ComplexSelector.d.ts +10 -2
- package/dist/ComplexSelector/ComplexSelector.d.ts.map +1 -1
- package/dist/ComplexSelector/ComplexSelector.js +14 -7
- package/dist/DateInput/NativeDateField.d.ts.map +1 -1
- package/dist/DateInput/NativeDateField.js +23 -6
- package/dist/DateInput/TouchDateField.d.ts.map +1 -1
- package/dist/DateInput/TouchDateField.js +47 -21
- package/dist/DateInput/nativeDateSegments.d.ts +22 -0
- package/dist/DateInput/nativeDateSegments.d.ts.map +1 -0
- package/dist/DateInput/nativeDateSegments.js +111 -0
- package/dist/DateRangeInput/DateRangeInput.d.ts +4 -2
- package/dist/DateRangeInput/DateRangeInput.d.ts.map +1 -1
- package/dist/Dialog/Dialog.d.ts +16 -2
- package/dist/Dialog/Dialog.d.ts.map +1 -1
- package/dist/Dialog/Dialog.js +28 -7
- package/dist/DropdownMenu/DropdownMenu.d.ts.map +1 -1
- package/dist/DropdownMenu/DropdownMenu.js +4 -13
- package/dist/Field/InputClearButton.d.ts +9 -3
- package/dist/Field/InputClearButton.d.ts.map +1 -1
- package/dist/Field/InputClearButton.js +14 -3
- package/dist/Heading/Heading.d.ts.map +1 -1
- package/dist/Heading/Heading.js +0 -1
- package/dist/HoverCard/HoverCard.d.ts.map +1 -1
- package/dist/HoverCard/HoverCard.js +55 -3
- package/dist/HoverCard/useHoverCard.d.ts +4 -1
- package/dist/HoverCard/useHoverCard.d.ts.map +1 -1
- package/dist/HoverCard/useHoverCard.js +5 -1
- package/dist/Icon/Icon.d.ts +4 -2
- package/dist/Icon/Icon.d.ts.map +1 -1
- package/dist/Icon/defaultIcons.d.ts +3 -2
- package/dist/Icon/defaultIcons.d.ts.map +1 -1
- package/dist/Icon/defaultIcons.js +7 -0
- package/dist/Icon/globalIconRegistry.d.ts +13 -0
- package/dist/Icon/globalIconRegistry.d.ts.map +1 -1
- package/dist/Icon/globalIconRegistry.js +34 -6
- package/dist/Icon/index.d.ts +1 -1
- package/dist/Icon/index.d.ts.map +1 -1
- package/dist/Icon/useIcon.d.ts +5 -2
- package/dist/Icon/useIcon.d.ts.map +1 -1
- package/dist/Icon/useIcon.js +3 -0
- package/dist/Item/Item.d.ts.map +1 -1
- package/dist/Item/Item.js +2 -2
- package/dist/Layer/gestureCounter.d.ts +8 -0
- package/dist/Layer/gestureCounter.d.ts.map +1 -0
- package/dist/Layer/gestureCounter.js +53 -0
- package/dist/Layer/useLayer.d.ts +23 -13
- package/dist/Layer/useLayer.d.ts.map +1 -1
- package/dist/Layer/useLayer.js +128 -8
- package/dist/List/List.d.ts +1 -1
- package/dist/List/List.d.ts.map +1 -1
- package/dist/List/List.js +15 -4
- package/dist/Markdown/Markdown.d.ts +1 -1
- package/dist/Markdown/Markdown.d.ts.map +1 -1
- package/dist/Markdown/Markdown.js +20 -7
- package/dist/Markdown/parser.d.ts.map +1 -1
- package/dist/Markdown/parser.js +5 -3
- package/dist/MetadataList/MetadataListItem.d.ts +1 -1
- package/dist/MetadataList/MetadataListItem.d.ts.map +1 -1
- package/dist/MetadataList/MetadataListItem.js +4 -1
- package/dist/MultiSelector/MultiSelector.d.ts +18 -1
- package/dist/MultiSelector/MultiSelector.d.ts.map +1 -1
- package/dist/MultiSelector/MultiSelector.js +58 -11
- package/dist/MultiSelector/hooks.d.ts +7 -1
- package/dist/MultiSelector/hooks.d.ts.map +1 -1
- package/dist/MultiSelector/hooks.js +3 -2
- package/dist/NavIcon/NavIcon.d.ts.map +1 -1
- package/dist/NavIcon/NavIcon.js +5 -1
- package/dist/NavItem/navItemStyles.stylex.d.ts +0 -8
- package/dist/NavItem/navItemStyles.stylex.d.ts.map +1 -1
- package/dist/NavItem/navItemStyles.stylex.js +0 -2
- package/dist/NavMenu/NavHeadingMenu.d.ts +1 -1
- package/dist/NavMenu/NavHeadingMenu.d.ts.map +1 -1
- package/dist/NavMenu/NavHeadingMenu.js +7 -4
- package/dist/NumberInput/NumberInput.d.ts +6 -1
- package/dist/NumberInput/NumberInput.d.ts.map +1 -1
- package/dist/NumberInput/NumberInput.js +95 -126
- package/dist/NumberInput/numberInputCommit.d.ts +34 -0
- package/dist/NumberInput/numberInputCommit.d.ts.map +1 -0
- package/dist/NumberInput/numberInputCommit.js +71 -0
- package/dist/NumberInput/numberParser.d.ts +64 -0
- package/dist/NumberInput/numberParser.d.ts.map +1 -0
- package/dist/NumberInput/numberParser.js +350 -0
- package/dist/Outline/Outline.d.ts.map +1 -1
- package/dist/Outline/Outline.js +2 -3
- package/dist/OverflowList/OverflowList.d.ts +41 -1
- package/dist/OverflowList/OverflowList.d.ts.map +1 -1
- package/dist/OverflowList/OverflowList.js +43 -2
- package/dist/Popover/Popover.d.ts.map +1 -1
- package/dist/Popover/Popover.js +8 -14
- package/dist/Popover/usePopover.d.ts +15 -41
- package/dist/Popover/usePopover.d.ts.map +1 -1
- package/dist/Popover/usePopover.js +26 -7
- package/dist/PowerSearch/PowerSearchValueEditor.d.ts.map +1 -1
- package/dist/PowerSearch/PowerSearchValueEditor.js +91 -18
- package/dist/ProgressBar/ProgressBar.d.ts.map +1 -1
- package/dist/ProgressBar/ProgressBar.js +18 -5
- package/dist/Resizable/useResizable.d.ts +19 -1
- package/dist/Resizable/useResizable.d.ts.map +1 -1
- package/dist/Resizable/useResizable.js +101 -37
- package/dist/SelectableCard/SelectableCard.d.ts.map +1 -1
- package/dist/SelectableCard/SelectableCard.js +9 -0
- package/dist/Selector/Selector.d.ts +18 -1
- package/dist/Selector/Selector.d.ts.map +1 -1
- package/dist/Selector/Selector.js +92 -21
- package/dist/Selector/hooks.d.ts +7 -1
- package/dist/Selector/hooks.d.ts.map +1 -1
- package/dist/Selector/hooks.js +3 -2
- package/dist/SideNav/SideNav.d.ts +6 -1
- package/dist/SideNav/SideNav.d.ts.map +1 -1
- package/dist/SideNav/SideNav.js +57 -27
- package/dist/SideNav/SideNavHeading.d.ts.map +1 -1
- package/dist/SideNav/SideNavHeading.js +5 -4
- package/dist/SideNav/SideNavItem.d.ts +29 -4
- package/dist/SideNav/SideNavItem.d.ts.map +1 -1
- package/dist/SideNav/SideNavItem.js +75 -20
- package/dist/Slider/Slider.d.ts.map +1 -1
- package/dist/Slider/Slider.js +34 -2
- package/dist/Spinner/Spinner.d.ts +3 -1
- package/dist/Spinner/Spinner.d.ts.map +1 -1
- package/dist/Spinner/Spinner.js +199 -20
- package/dist/StatusDot/StatusDot.d.ts.map +1 -1
- package/dist/StatusDot/StatusDot.js +6 -1
- package/dist/Stepper/Step.d.ts.map +1 -1
- package/dist/Stepper/Step.js +7 -6
- package/dist/Table/BaseTable.d.ts.map +1 -1
- package/dist/Table/BaseTable.js +6 -1
- package/dist/Table/Table.d.ts.map +1 -1
- package/dist/Table/Table.js +3 -6
- package/dist/Table/plugins/filtering/useTableFiltering.d.ts.map +1 -1
- package/dist/Table/plugins/filtering/useTableFiltering.js +73 -4
- package/dist/Table/plugins/groupedRows/useTableGroupedRows.d.ts +26 -0
- package/dist/Table/plugins/groupedRows/useTableGroupedRows.d.ts.map +1 -1
- package/dist/Table/plugins/groupedRows/useTableGroupedRows.js +34 -3
- package/dist/Table/plugins/selection/useTableSelection.d.ts.map +1 -1
- package/dist/Table/plugins/selection/useTableSelection.js +25 -1
- package/dist/Text/Text.d.ts.map +1 -1
- package/dist/Text/Text.js +0 -1
- package/dist/TextArea/TextArea.d.ts.map +1 -1
- package/dist/TextArea/TextArea.js +13 -8
- package/dist/Timestamp/Timestamp.d.ts +1 -1
- package/dist/Timestamp/Timestamp.d.ts.map +1 -1
- package/dist/Timestamp/Timestamp.js +10 -18
- package/dist/Toast/Toast.d.ts.map +1 -1
- package/dist/Toast/Toast.js +22 -7
- package/dist/Toast/ToastViewport.d.ts +1 -0
- package/dist/Toast/ToastViewport.d.ts.map +1 -1
- package/dist/Toast/ToastViewport.js +71 -18
- package/dist/Token/Token.d.ts +1 -1
- package/dist/Token/Token.d.ts.map +1 -1
- package/dist/Token/Token.js +23 -12
- package/dist/Token/TokenLink.d.ts +1 -1
- package/dist/Token/TokenLink.d.ts.map +1 -1
- package/dist/Token/TokenLink.js +5 -2
- package/dist/Tokenizer/Tokenizer.d.ts +12 -1
- package/dist/Tokenizer/Tokenizer.d.ts.map +1 -1
- package/dist/Tokenizer/Tokenizer.js +31 -21
- package/dist/TopNav/TopNavHeading.js +2 -2
- package/dist/TopNav/TopNavItem.d.ts.map +1 -1
- package/dist/TopNav/TopNavItem.js +3 -3
- package/dist/TopNav/TopNavMegaMenu.d.ts +1 -1
- package/dist/TopNav/TopNavMegaMenu.d.ts.map +1 -1
- package/dist/TopNav/TopNavMegaMenu.js +30 -9
- package/dist/TopNav/TopNavMegaMenuItem.d.ts.map +1 -1
- package/dist/TopNav/TopNavMegaMenuItem.js +3 -3
- package/dist/TopNav/TopNavMenu.d.ts +1 -1
- package/dist/TopNav/TopNavMenu.d.ts.map +1 -1
- package/dist/TopNav/TopNavMenu.js +21 -6
- package/dist/TreeList/TreeList.d.ts +1 -1
- package/dist/TreeList/TreeList.d.ts.map +1 -1
- package/dist/TreeList/TreeList.js +7 -2
- package/dist/TreeList/TreeListItem.d.ts.map +1 -1
- package/dist/TreeList/TreeListItem.js +2 -2
- package/dist/Typeahead/BaseTypeahead.d.ts +33 -0
- package/dist/Typeahead/BaseTypeahead.d.ts.map +1 -1
- package/dist/Typeahead/BaseTypeahead.js +51 -8
- package/dist/Typeahead/Typeahead.d.ts +8 -1
- package/dist/Typeahead/Typeahead.d.ts.map +1 -1
- package/dist/Typeahead/Typeahead.js +2 -0
- package/dist/Typeahead/TypeaheadItem.d.ts +1 -1
- package/dist/Typeahead/TypeaheadItem.d.ts.map +1 -1
- package/dist/Typeahead/TypeaheadItem.js +7 -2
- package/dist/astryx.css +59 -18
- package/dist/hooks/useOverflow.d.ts.map +1 -1
- package/dist/hooks/useOverflow.js +14 -4
- package/dist/theme/Theme.d.ts.map +1 -1
- package/dist/theme/Theme.js +46 -10
- package/dist/theme/defineTheme.d.ts +9 -3
- package/dist/theme/defineTheme.d.ts.map +1 -1
- package/dist/theme/defineTheme.js +5 -0
- package/dist/theme/derivedVarRegistry.d.ts.map +1 -1
- package/dist/theme/derivedVarRegistry.js +20 -4
- package/dist/theme/generateThemeRules.d.ts +21 -0
- package/dist/theme/generateThemeRules.d.ts.map +1 -1
- package/dist/theme/generateThemeRules.js +26 -0
- package/dist/utils/focusOutline.stylex.d.ts +25 -0
- package/dist/utils/focusOutline.stylex.d.ts.map +1 -1
- package/dist/utils/focusOutline.stylex.js +15 -0
- package/dist/utils/interactionOverlay.stylex.d.ts +26 -0
- package/dist/utils/interactionOverlay.stylex.d.ts.map +1 -0
- package/dist/utils/interactionOverlay.stylex.js +42 -0
- package/locales/af-ZA.json +7 -7
- package/locales/ar-SA.json +7 -7
- package/locales/ca-ES.json +6 -6
- package/locales/cs-CZ.json +7 -7
- package/locales/da-DK.json +7 -7
- package/locales/de-DE.json +7 -7
- package/locales/el-GR.json +7 -7
- package/locales/en.json +132 -4
- package/locales/es-ES.json +6 -6
- package/locales/fi-FI.json +7 -7
- package/locales/fr-FR.json +7 -7
- package/locales/he-IL.json +7 -7
- package/locales/hu-HU.json +7 -7
- package/locales/it-IT.json +7 -7
- package/locales/ja-JP.json +7 -7
- package/locales/ko-KR.json +7 -7
- package/locales/nl-NL.json +7 -7
- package/locales/no-NO.json +7 -7
- package/locales/pl-PL.json +7 -7
- package/locales/pseudo.json +96 -0
- package/locales/pt-BR.json +7 -7
- package/locales/pt-PT.json +7 -7
- package/locales/ro-RO.json +7 -7
- package/locales/ru-RU.json +7 -7
- package/locales/sr-SP.json +7 -7
- package/locales/sv-SE.json +7 -7
- package/locales/tr-TR.json +7 -7
- package/locales/uk-UA.json +7 -7
- package/locales/vi-VN.json +7 -7
- package/locales/zh-CN.json +7 -7
- package/locales/zh-TW.json +7 -7
- package/package.json +2 -2
- package/src/AlertDialog/AlertDialog.doc.mjs +114 -30
- package/src/AlertDialog/AlertDialog.test.tsx +211 -2
- package/src/AlertDialog/AlertDialog.tsx +62 -20
- package/src/AspectRatio/AspectRatio.doc.mjs +3 -3
- package/src/AspectRatio/AspectRatio.tsx +6 -6
- package/src/AvatarGroup/AvatarGroupOverflow.tsx +2 -8
- package/src/Badge/Badge.doc.mjs +3 -2
- package/src/Badge/Badge.test.tsx +32 -3
- package/src/Badge/Badge.tsx +42 -1
- package/src/Banner/Banner.doc.mjs +9 -0
- package/src/Banner/Banner.test.tsx +76 -11
- package/src/Banner/Banner.tsx +21 -2
- package/src/Button/Button.doc.mjs +2 -1
- package/src/Button/Button.test.tsx +19 -4
- package/src/Button/Button.tsx +9 -29
- package/src/ButtonGroup/ButtonGroup.doc.mjs +2 -2
- package/src/ButtonGroup/ButtonGroup.test.tsx +13 -0
- package/src/Calendar/Calendar.doc.mjs +3 -3
- package/src/Calendar/Calendar.test.tsx +91 -0
- package/src/Calendar/Calendar.tsx +14 -11
- package/src/Calendar/styles.ts +48 -42
- package/src/Card/Card.doc.mjs +10 -7
- package/src/Card/Card.test.tsx +113 -19
- package/src/Card/Card.tsx +67 -89
- package/src/Card/index.ts +36 -1
- package/src/Carousel/Carousel.doc.mjs +3 -0
- package/src/Carousel/Carousel.test.tsx +360 -0
- package/src/Carousel/Carousel.tsx +116 -15
- package/src/CodeBlock/CodeBlock.doc.mjs +10 -4
- package/src/CodeBlock/CodeBlock.test.tsx +37 -0
- package/src/CodeBlock/CodeBlock.tsx +20 -4
- package/src/CodeBlock/highlightRanges.ts +1 -1
- package/src/CodeBlock/highlightStyles.ts +13 -13
- package/src/CommandPalette/CommandPaletteItem.tsx +2 -12
- package/src/ComplexSelector/ComplexSelector.doc.mjs +7 -0
- package/src/ComplexSelector/ComplexSelector.test.tsx +183 -0
- package/src/ComplexSelector/ComplexSelector.tsx +22 -12
- package/src/DateInput/DateInput.doc.mjs +2 -2
- package/src/DateInput/DateInputTouch.test.tsx +85 -30
- package/src/DateInput/NativeDateField.test.tsx +100 -30
- package/src/DateInput/NativeDateField.tsx +24 -6
- package/src/DateInput/TouchDateField.tsx +77 -30
- package/src/DateInput/nativeDateSegments.ts +127 -0
- package/src/DateRangeInput/DateRangeInput.doc.mjs +2 -2
- package/src/DateRangeInput/DateRangeInput.test.tsx +22 -0
- package/src/DateRangeInput/DateRangeInput.tsx +4 -2
- package/src/Dialog/Dialog.test.tsx +185 -18
- package/src/Dialog/Dialog.tsx +35 -11
- package/src/DropdownMenu/DropdownMenu.test.tsx +44 -10
- package/src/DropdownMenu/DropdownMenu.tsx +4 -13
- package/src/Field/InputClearButton.test.tsx +15 -1
- package/src/Field/InputClearButton.tsx +28 -4
- package/src/Heading/Heading.tsx +0 -1
- package/src/HoverCard/HoverCard.doc.mjs +8 -2
- package/src/HoverCard/HoverCard.test.tsx +71 -1
- package/src/HoverCard/HoverCard.tsx +74 -2
- package/src/HoverCard/useHoverCard.tsx +9 -2
- package/src/Icon/Icon.test.tsx +55 -1
- package/src/Icon/Icon.tsx +5 -3
- package/src/Icon/defaultIcons.tsx +11 -2
- package/src/Icon/globalIconRegistry.test.tsx +16 -3
- package/src/Icon/globalIconRegistry.tsx +37 -6
- package/src/Icon/index.ts +1 -0
- package/src/Icon/useIcon.ts +9 -2
- package/src/Item/Item.tsx +2 -7
- package/src/Layer/gestureCounter.ts +57 -0
- package/src/Layer/useLayer.test.tsx +324 -15
- package/src/Layer/useLayer.tsx +164 -8
- package/src/Layout/__tests__/edgeCompensation.test.tsx +1 -1
- package/src/List/List.test.tsx +38 -0
- package/src/List/List.tsx +8 -1
- package/src/Markdown/Markdown.test.tsx +37 -0
- package/src/Markdown/Markdown.tsx +16 -5
- package/src/Markdown/parser.test.ts +33 -0
- package/src/Markdown/parser.ts +9 -3
- package/src/MetadataList/MetadataList.test.tsx +75 -2
- package/src/MetadataList/MetadataListItem.tsx +5 -2
- package/src/MultiSelector/MultiSelector.doc.mjs +22 -1
- package/src/MultiSelector/MultiSelector.test.tsx +205 -0
- package/src/MultiSelector/MultiSelector.tsx +103 -16
- package/src/MultiSelector/hooks.ts +9 -2
- package/src/NavIcon/NavIcon.doc.mjs +8 -2
- package/src/NavIcon/NavIcon.test.tsx +9 -0
- package/src/NavIcon/NavIcon.tsx +5 -1
- package/src/NavItem/navItemStyles.stylex.ts +0 -8
- package/src/NavMenu/NavHeadingMenu.test.tsx +30 -0
- package/src/NavMenu/NavHeadingMenu.tsx +7 -4
- package/src/NumberInput/NumberInput.doc.mjs +26 -7
- package/src/NumberInput/NumberInput.test.tsx +563 -8
- package/src/NumberInput/NumberInput.tsx +77 -131
- package/src/NumberInput/numberInputCommit.test.ts +72 -0
- package/src/NumberInput/numberInputCommit.ts +103 -0
- package/src/NumberInput/numberParser.docblock.test.ts +234 -0
- package/src/NumberInput/numberParser.test.ts +222 -0
- package/src/NumberInput/numberParser.ts +403 -0
- package/src/Outline/Outline.tsx +2 -4
- package/src/OverflowList/OverflowList.doc.mjs +102 -21
- package/src/OverflowList/OverflowList.test.tsx +550 -4
- package/src/OverflowList/OverflowList.tsx +100 -2
- package/src/Pagination/Pagination.test.tsx +3 -2
- package/src/Popover/Popover.doc.mjs +2 -2
- package/src/Popover/Popover.test.tsx +38 -0
- package/src/Popover/Popover.tsx +28 -66
- package/src/Popover/usePopover.tsx +44 -5
- package/src/PowerSearch/PowerSearchEditPopover.test.tsx +87 -0
- package/src/PowerSearch/PowerSearchValueEditor.test.tsx +64 -0
- package/src/PowerSearch/PowerSearchValueEditor.tsx +109 -10
- package/src/ProgressBar/ProgressBar.doc.mjs +42 -6
- package/src/ProgressBar/ProgressBar.test.tsx +24 -0
- package/src/ProgressBar/ProgressBar.tsx +28 -8
- package/src/Resizable/Resizable.doc.mjs +2 -2
- package/src/Resizable/useResizable.doc.mjs +21 -2
- package/src/Resizable/useResizable.test.ts +402 -0
- package/src/Resizable/useResizable.ts +130 -47
- package/src/SelectableCard/SelectableCard.doc.mjs +3 -0
- package/src/SelectableCard/SelectableCard.tsx +16 -0
- package/src/Selector/Selector.doc.mjs +14 -0
- package/src/Selector/Selector.source-build.test.mjs +65 -0
- package/src/Selector/Selector.test.tsx +301 -0
- package/src/Selector/Selector.tsx +145 -32
- package/src/Selector/hooks.ts +17 -2
- package/src/SideNav/SideNav.doc.mjs +2 -2
- package/src/SideNav/SideNav.test.tsx +1069 -6
- package/src/SideNav/SideNav.tsx +109 -38
- package/src/SideNav/SideNavHeading.tsx +5 -2
- package/src/SideNav/SideNavItem.doc.mjs +24 -3
- package/src/SideNav/SideNavItem.tsx +134 -44
- package/src/Slider/Slider.test.tsx +106 -1
- package/src/Slider/Slider.tsx +52 -1
- package/src/Spinner/Spinner.doc.mjs +17 -5
- package/src/Spinner/Spinner.test.tsx +164 -0
- package/src/Spinner/Spinner.tsx +252 -22
- package/src/StatusDot/StatusDot.doc.mjs +8 -2
- package/src/StatusDot/StatusDot.test.tsx +9 -0
- package/src/StatusDot/StatusDot.tsx +7 -1
- package/src/Stepper/Step.doc.mjs +1 -1
- package/src/Stepper/Step.tsx +7 -14
- package/src/Table/BaseTable.tsx +6 -1
- package/src/Table/Table.doc.mjs +5 -3
- package/src/Table/Table.tsx +3 -8
- package/src/Table/TableBody.doc.mjs +2 -2
- package/src/Table/TableFooter.doc.mjs +1 -1
- package/src/Table/TableHeader.doc.mjs +1 -1
- package/src/Table/plugins/filtering/useTableFiltering.test.tsx +44 -6
- package/src/Table/plugins/filtering/useTableFiltering.tsx +100 -4
- package/src/Table/plugins/groupedRows/useTableGroupedRows.tsx +50 -4
- package/src/Table/plugins/selection/useTableSelection.test.tsx +62 -0
- package/src/Table/plugins/selection/useTableSelection.tsx +25 -2
- package/src/Table/useTableGroupedRows.doc.mjs +3 -3
- package/src/Table/useTablePagination.doc.mjs +1 -1
- package/src/Table/useTableSelection.doc.mjs +1 -1
- package/src/Text/Text.test.tsx +44 -0
- package/src/Text/Text.tsx +0 -1
- package/src/TextArea/TextArea.doc.mjs +12 -2
- package/src/TextArea/TextArea.test.tsx +11 -0
- package/src/TextArea/TextArea.tsx +34 -22
- package/src/Timestamp/Timestamp.test.tsx +58 -0
- package/src/Timestamp/Timestamp.tsx +8 -8
- package/src/Toast/Toast.doc.mjs +20 -12
- package/src/Toast/Toast.tsx +28 -4
- package/src/Toast/ToastViewport.test.tsx +536 -8
- package/src/Toast/ToastViewport.tsx +81 -12
- package/src/Token/Token.test.tsx +95 -0
- package/src/Token/Token.tsx +19 -17
- package/src/Token/TokenLink.tsx +12 -3
- package/src/Tokenizer/Tokenizer.doc.mjs +16 -3
- package/src/Tokenizer/Tokenizer.test.tsx +161 -0
- package/src/Tokenizer/Tokenizer.tsx +49 -24
- package/src/TopNav/TopNavHeading.tsx +2 -2
- package/src/TopNav/TopNavItem.tsx +3 -7
- package/src/TopNav/TopNavMegaMenu.test.tsx +104 -0
- package/src/TopNav/TopNavMegaMenu.tsx +47 -4
- package/src/TopNav/TopNavMegaMenuItem.tsx +10 -9
- package/src/TopNav/TopNavMenu.test.tsx +133 -1
- package/src/TopNav/TopNavMenu.tsx +38 -5
- package/src/TreeList/TreeList.test.tsx +49 -0
- package/src/TreeList/TreeList.tsx +7 -2
- package/src/TreeList/TreeListItem.tsx +2 -7
- package/src/Typeahead/BaseTypeahead.doc.mjs +13 -0
- package/src/Typeahead/BaseTypeahead.tsx +96 -6
- package/src/Typeahead/Typeahead.doc.mjs +6 -0
- package/src/Typeahead/Typeahead.test.tsx +154 -0
- package/src/Typeahead/Typeahead.tsx +9 -0
- package/src/Typeahead/TypeaheadItem.test.tsx +43 -0
- package/src/Typeahead/TypeaheadItem.tsx +8 -1
- package/src/hooks/useAnnounce.doc.mjs +96 -0
- package/src/hooks/useDevWarning.doc.mjs +96 -0
- package/src/hooks/useIndicatorFocusRing.doc.mjs +104 -0
- package/src/hooks/useInputStatusIcon.doc.mjs +142 -0
- package/src/hooks/useInteractiveRole.doc.mjs +119 -0
- package/src/hooks/useLongPress.doc.mjs +123 -0
- package/src/hooks/useOverflow.doc.mjs +58 -17
- package/src/hooks/useOverflow.ts +16 -4
- package/src/hooks/useTypeahead.doc.mjs +153 -0
- package/src/raw-import.d.ts +14 -0
- package/src/theme/Theme.test.tsx +104 -2
- package/src/theme/Theme.tsx +49 -14
- package/src/theme/defineTheme.test.ts +23 -0
- package/src/theme/defineTheme.ts +12 -3
- package/src/theme/derivedVarRegistry.test.ts +82 -3
- package/src/theme/derivedVarRegistry.ts +22 -4
- package/src/theme/generateThemeRules.test.ts +99 -1
- package/src/theme/generateThemeRules.ts +28 -0
- package/src/utils/focusOutline.stylex.ts +50 -0
- package/src/utils/interactionOverlay.stylex.ts +74 -0
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @file AlertDialog.tsx
|
|
3
|
-
* @input Uses React, Dialog, Layout, Heading, Text, Button
|
|
3
|
+
* @input Uses React, StyleX, Dialog, Layout, Heading, Text, Button
|
|
4
4
|
* @output Exports AlertDialog component, AlertDialogProps type
|
|
5
5
|
* @position Core implementation; consumed by index.ts, tested by AlertDialog.test.tsx
|
|
6
6
|
*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AlertDialog.d.ts","sourceRoot":"","sources":["../../src/AlertDialog/AlertDialog.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAA2B,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"AlertDialog.d.ts","sourceRoot":"","sources":["../../src/AlertDialog/AlertDialog.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAA2B,MAAM,OAAO,CAAC;AAShD,OAAO,EAAS,KAAK,aAAa,EAAC,MAAM,WAAW,CAAC;AACrD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAkB5C,MAAM,WAAW,gBAAiB,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IACpE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAEhB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,OAAO,CAAC;IAE3C;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IAEpB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IAEpB;;;OAGG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC;IAE9B;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;OAGG;IACH,QAAQ,EAAE,MAAM,OAAO,CAAC;IAExB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,GAAG,EACH,MAAM,EACN,QAAQ,EACR,YAAY,EACZ,KAAK,EACL,WAAW,EACX,WAAW,EAAE,oBAAoB,EACjC,WAAW,EACX,aAA6B,EAC7B,eAAe,EACf,QAAQ,EACR,KAAW,EACX,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,IAAI,EACR,EAAE,gBAAgB,qBA8FlB;yBAhHe,WAAW"}
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
|
|
5
5
|
/**
|
|
6
6
|
* @file AlertDialog.tsx
|
|
7
|
-
* @input Uses React, Dialog, Layout, Heading, Text, Button
|
|
7
|
+
* @input Uses React, StyleX, Dialog, Layout, Heading, Text, Button
|
|
8
8
|
* @output Exports AlertDialog component, AlertDialogProps type
|
|
9
9
|
* @position Core implementation; consumed by index.ts, tested by AlertDialog.test.tsx
|
|
10
10
|
*
|
|
@@ -16,18 +16,32 @@
|
|
|
16
16
|
* - /packages/cli/assets/templates/blocks/components/AlertDialog/ (showcase blocks)
|
|
17
17
|
*/
|
|
18
18
|
import React, { useId, useCallback } from 'react';
|
|
19
|
+
import * as stylex from '@stylexjs/stylex';
|
|
19
20
|
import { Dialog } from "../Dialog/index.js";
|
|
20
21
|
import { Layout } from "../Layout/Layout.js";
|
|
21
22
|
import { LayoutContent } from "../Layout/LayoutContent.js";
|
|
22
23
|
import { LayoutFooter } from "../Layout/LayoutFooter.js";
|
|
23
|
-
import {
|
|
24
|
+
import { Stack } from "../Stack/index.js";
|
|
24
25
|
import { Heading } from "../Heading/Heading.js";
|
|
25
26
|
import { Text } from "../Text/Text.js";
|
|
26
27
|
import { Button } from "../Button/index.js";
|
|
27
28
|
import { mergeProps } from "../utils/index.js";
|
|
28
29
|
import { themeProps } from "../utils/themeProps.js";
|
|
29
30
|
import { useTranslator } from "../i18n/index.js";
|
|
31
|
+
import { useMediaQuery } from "../hooks/index.js";
|
|
30
32
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
33
|
+
const SMALL_SCREEN_QUERY = '(max-width: 640px)';
|
|
34
|
+
const styles = {
|
|
35
|
+
action: {
|
|
36
|
+
ks0D6T: "x193iq5w",
|
|
37
|
+
k7Eaqz: "xeuugli",
|
|
38
|
+
$$css: true
|
|
39
|
+
},
|
|
40
|
+
stackedAction: {
|
|
41
|
+
kzqmXN: "xh8yej3",
|
|
42
|
+
$$css: true
|
|
43
|
+
}
|
|
44
|
+
};
|
|
31
45
|
/**
|
|
32
46
|
* A confirmation dialog for destructive or irreversible actions.
|
|
33
47
|
*
|
|
@@ -77,9 +91,33 @@ export function AlertDialog({
|
|
|
77
91
|
const cancelLabel = cancelLabelFromProps ?? t('@astryx.alertDialog.cancel');
|
|
78
92
|
const titleId = useId();
|
|
79
93
|
const descriptionId = useId();
|
|
94
|
+
// Width stays delegated to Dialog: this query exists only so AlertDialog can
|
|
95
|
+
// keep narrow visual, DOM, and tab order aligned for its destructive/cancel
|
|
96
|
+
// semantics without coupling action order to pointer or hover capability.
|
|
97
|
+
const isSmallScreen = useMediaQuery(SMALL_SCREEN_QUERY);
|
|
80
98
|
const handleCancel = useCallback(() => {
|
|
81
99
|
onOpenChange(false);
|
|
82
100
|
}, [onOpenChange]);
|
|
101
|
+
const buttonActionStyle = [styles.action, isSmallScreen && styles.stackedAction];
|
|
102
|
+
const cancelButton = /*#__PURE__*/_jsx(Button, {
|
|
103
|
+
variant: "ghost",
|
|
104
|
+
label: cancelLabel,
|
|
105
|
+
onClick: handleCancel,
|
|
106
|
+
xstyle: buttonActionStyle
|
|
107
|
+
// Dialog focuses [data-autofocus] itself after showModal(), because
|
|
108
|
+
// React's autoFocus runs during commit while the dialog is invisible.
|
|
109
|
+
// Cancel is least destructive, so it remains the autofocus target even
|
|
110
|
+
// when small-screen visual order places the destructive action above it.
|
|
111
|
+
,
|
|
112
|
+
"data-autofocus": true
|
|
113
|
+
}, "cancel");
|
|
114
|
+
const actionButton = /*#__PURE__*/_jsx(Button, {
|
|
115
|
+
variant: actionVariant,
|
|
116
|
+
label: actionLabel,
|
|
117
|
+
onClick: onAction,
|
|
118
|
+
isLoading: isActionLoading,
|
|
119
|
+
xstyle: buttonActionStyle
|
|
120
|
+
}, "action");
|
|
83
121
|
return /*#__PURE__*/_jsx(Dialog, {
|
|
84
122
|
...rest,
|
|
85
123
|
ref: ref,
|
|
@@ -117,25 +155,12 @@ export function AlertDialog({
|
|
|
117
155
|
})]
|
|
118
156
|
}),
|
|
119
157
|
footer: /*#__PURE__*/_jsx(LayoutFooter, {
|
|
120
|
-
children: /*#__PURE__*/
|
|
158
|
+
children: /*#__PURE__*/_jsx(Stack, {
|
|
159
|
+
direction: isSmallScreen ? 'vertical' : 'horizontal',
|
|
121
160
|
gap: 2,
|
|
122
|
-
hAlign:
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
label: cancelLabel,
|
|
126
|
-
onClick: handleCancel
|
|
127
|
-
// Dialog focuses [data-autofocus] itself after showModal(),
|
|
128
|
-
// because React's autoFocus runs during commit while the
|
|
129
|
-
// dialog is still invisible. Cancel is the least destructive
|
|
130
|
-
// choice, so it is the one that should be preselected.
|
|
131
|
-
,
|
|
132
|
-
"data-autofocus": true
|
|
133
|
-
}), /*#__PURE__*/_jsx(Button, {
|
|
134
|
-
variant: actionVariant,
|
|
135
|
-
label: actionLabel,
|
|
136
|
-
onClick: onAction,
|
|
137
|
-
isLoading: isActionLoading
|
|
138
|
-
})]
|
|
161
|
+
hAlign: isSmallScreen ? 'stretch' : 'end',
|
|
162
|
+
wrap: isSmallScreen ? 'nowrap' : 'wrap',
|
|
163
|
+
children: isSmallScreen ? [actionButton, cancelButton] : [cancelButton, actionButton]
|
|
139
164
|
})
|
|
140
165
|
})
|
|
141
166
|
})
|
|
@@ -44,14 +44,14 @@ export interface AspectRatioProps extends BaseProps<HTMLDivElement> {
|
|
|
44
44
|
* `astryx-base` cascade layer, and unlayered CSS wins over layered
|
|
45
45
|
* rules regardless of specificity.
|
|
46
46
|
*
|
|
47
|
+
* A responsive ratio is set in CSS, not on the component. For example, a 3:1
|
|
48
|
+
* hero can become 3:2 when its container narrows by targeting the element's
|
|
49
|
+
* class from a container query:
|
|
50
|
+
* `@container gallery (max-width: 720px) { .gallery-hero { aspect-ratio: 3 / 2; } }`.
|
|
51
|
+
*
|
|
47
52
|
* @example
|
|
48
53
|
* ```
|
|
49
|
-
*
|
|
50
|
-
* <AspectRatio ratio={3 / 1} className="gallery-hero">…</AspectRatio>
|
|
51
|
-
*
|
|
52
|
-
* // CSS: @container gallery (max-width: 720px) {
|
|
53
|
-
* // .gallery-hero { aspect-ratio: 3 / 2; }
|
|
54
|
-
* // }
|
|
54
|
+
* <AspectRatio ratio={3 / 1} className="gallery-hero">...</AspectRatio>
|
|
55
55
|
* ```
|
|
56
56
|
*/
|
|
57
57
|
ratio: number;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarGroupOverflow.d.ts","sourceRoot":"","sources":["../../src/AvatarGroup/AvatarGroupOverflow.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,EAAE,EAAC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAa5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"AvatarGroupOverflow.d.ts","sourceRoot":"","sources":["../../src/AvatarGroup/AvatarGroupOverflow.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,EAAE,EAAC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAa5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAS5C,MAAM,WAAW,wBAAyB,SAAQ,IAAI,CACpD,SAAS,CAAC,WAAW,CAAC,EACtB,SAAS,CACV;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC7B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAgFD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,GAAG,EACH,KAAK,EACL,OAAO,EACP,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,wBAAwB,GAAG,SAAS,CAmEtC;yBA5Ee,mBAAmB"}
|
|
@@ -22,6 +22,7 @@ import { resolveSize } from "../Avatar/index.js";
|
|
|
22
22
|
import { useAvatarGroup } from "./AvatarGroupContext.js";
|
|
23
23
|
import { themeProps } from "../utils/themeProps.js";
|
|
24
24
|
import { focusOutlineProps } from "../utils/focusOutline.stylex.js";
|
|
25
|
+
import { interactionOverlayStyles } from "../utils/interactionOverlay.stylex.js";
|
|
25
26
|
import { useTranslator } from "../i18n/index.js";
|
|
26
27
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
27
28
|
const BORDER_WIDTH = 2;
|
|
@@ -49,7 +50,6 @@ const styles = {
|
|
|
49
50
|
button: {
|
|
50
51
|
kkrTdU: "x1ypdohk x16khyan",
|
|
51
52
|
k8WAf4: "xt970qd",
|
|
52
|
-
kKwaWg: "x14bno8m x1otsd3y x1nocapi",
|
|
53
53
|
$$css: true
|
|
54
54
|
},
|
|
55
55
|
overlap: {
|
|
@@ -133,7 +133,7 @@ export function AvatarGroupOverflow({
|
|
|
133
133
|
...mergeProps(themeProps('avatar-group-overflow', {
|
|
134
134
|
size,
|
|
135
135
|
shape
|
|
136
|
-
}), focusOutlineProps.focusVisible(styles.base, styles.button, styles.overlap, dynamicStyles.size(numericSize), dynamicStyles.fontSize(numericSize), dynamicStyles.overlap(-overlap), shapeStyles[shape], xstyle), className, style),
|
|
136
|
+
}), focusOutlineProps.focusVisible(styles.base, styles.button, interactionOverlayStyles.backgroundImageOnNeutral, styles.overlap, dynamicStyles.size(numericSize), dynamicStyles.fontSize(numericSize), dynamicStyles.overlap(-overlap), shapeStyles[shape], xstyle), className, style),
|
|
137
137
|
children: content
|
|
138
138
|
});
|
|
139
139
|
}
|
|
@@ -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;AA0G7C;;;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
|
@@ -19,7 +19,7 @@ import "../theme/tokens.stylex.js";
|
|
|
19
19
|
import { colorVars, spacingVars, radiusVars, fontWeightVars, typeScaleVars } from "../theme/tokens.stylex.js";
|
|
20
20
|
import { mergeProps } from "../utils/index.js";
|
|
21
21
|
import { themeProps } from "../utils/themeProps.js";
|
|
22
|
-
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
22
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
23
23
|
/**
|
|
24
24
|
* Base badge styles
|
|
25
25
|
*/
|
|
@@ -38,6 +38,8 @@ const styles = {
|
|
|
38
38
|
kLWn49: "x1ltkj2j",
|
|
39
39
|
k63SB2: "x1e4wzip",
|
|
40
40
|
khDVqt: "xuxw1ft",
|
|
41
|
+
ks0D6T: "x193iq5w",
|
|
42
|
+
k7Eaqz: "xeuugli",
|
|
41
43
|
$$css: true
|
|
42
44
|
}
|
|
43
45
|
};
|
|
@@ -148,13 +150,35 @@ export function Badge({
|
|
|
148
150
|
ref,
|
|
149
151
|
...props
|
|
150
152
|
}) {
|
|
153
|
+
// Clipping a label makes its tail unrecoverable, so the full text has to
|
|
154
|
+
// stay reachable somewhere. `title` is the half of that answer which costs
|
|
155
|
+
// nothing: no measurement, no hook, so `Badge` renders the same on the
|
|
156
|
+
// server and stays usable in a server component. It follows the shape
|
|
157
|
+
// `BaseTable` already uses for a truncated header cell (BaseTable.tsx) —
|
|
158
|
+
// string content only, and only when there is something to show.
|
|
159
|
+
//
|
|
160
|
+
// A rich label is left alone: it is a subtree whose text would have to be
|
|
161
|
+
// flattened to a string, and flattening renders a guess — an icon, a
|
|
162
|
+
// `<strong>`, a nested element all read differently.
|
|
163
|
+
//
|
|
164
|
+
// It is set whether or not the label actually fits, because knowing that
|
|
165
|
+
// requires measuring. The refinement — a tooltip only when the text is
|
|
166
|
+
// really cut, reachable by hover and by focus — needs that measurement and
|
|
167
|
+
// a client component, so it is tracked in #5585.
|
|
168
|
+
const labelTitle = typeof label === 'number' ? String(label) : typeof label === 'string' && label.length > 0 ? label : undefined;
|
|
151
169
|
return /*#__PURE__*/_jsxs("span", {
|
|
152
170
|
ref: ref,
|
|
153
171
|
...mergeProps(themeProps('badge', {
|
|
154
172
|
variant
|
|
155
173
|
}), stylex.props(styles.base, variants[variant], xstyle), className, style),
|
|
174
|
+
title: labelTitle,
|
|
156
175
|
...props,
|
|
157
|
-
children: [icon,
|
|
176
|
+
children: [icon, /*#__PURE__*/_jsx("span", {
|
|
177
|
+
...{
|
|
178
|
+
className: "xb3r6kr xlyipyv xeuugli"
|
|
179
|
+
},
|
|
180
|
+
children: label
|
|
181
|
+
})]
|
|
158
182
|
});
|
|
159
183
|
}
|
|
160
184
|
Badge.displayName = 'Badge';
|
package/dist/Banner/Banner.d.ts
CHANGED
|
@@ -86,6 +86,15 @@ export interface BannerProps extends BaseProps<HTMLDivElement> {
|
|
|
86
86
|
* The banner will hide itself regardless of whether this callback is provided.
|
|
87
87
|
*/
|
|
88
88
|
onDismiss?: () => void;
|
|
89
|
+
/**
|
|
90
|
+
* Accessible name and visible tooltip for the dismiss button, replacing the default.
|
|
91
|
+
* Pass an already-translated string.
|
|
92
|
+
*
|
|
93
|
+
* The default is "Dismiss {title}" when `title` is a string, so stacked
|
|
94
|
+
* banners are told apart by a screen reader; a non-string `title` falls back
|
|
95
|
+
* to "Dismiss" and should set this.
|
|
96
|
+
*/
|
|
97
|
+
dismissLabel?: string;
|
|
89
98
|
/**
|
|
90
99
|
* Action button rendered in the header area (end-aligned).
|
|
91
100
|
* Typically an Button with a secondary or ghost variant.
|
|
@@ -191,7 +200,7 @@ export interface BannerProps extends BaseProps<HTMLDivElement> {
|
|
|
191
200
|
* </Banner>
|
|
192
201
|
* ```
|
|
193
202
|
*/
|
|
194
|
-
export declare function Banner({ status, title, description, icon, isDismissable, onDismiss, endContent, container, elevation, collapsible, children, xstyle, className, style, ref, onFocusCapture, onPointerDownCapture, ...rest }: BannerProps): import("react").JSX.Element | null;
|
|
203
|
+
export declare function Banner({ status, title, description, icon, isDismissable, onDismiss, dismissLabel, endContent, container, elevation, collapsible, children, xstyle, className, style, ref, onFocusCapture, onPointerDownCapture, ...rest }: BannerProps): import("react").JSX.Element | null;
|
|
195
204
|
export declare namespace Banner {
|
|
196
205
|
var displayName: string;
|
|
197
206
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../src/Banner/Banner.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;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;;;;;;;;;;;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;AAmND;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkDG;AACH,wBAAgB,MAAM,CAAC,EACrB,MAAM,EACN,KAAK,EACL,WAAW,EACX,IAAI,EACJ,aAAqB,EACrB,SAAS,EACT,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,
|
|
1
|
+
{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../src/Banner/Banner.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;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;AAmND;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkDG;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,sCA6Ob;yBAjQe,MAAM"}
|
package/dist/Banner/Banner.js
CHANGED
|
@@ -279,6 +279,7 @@ export function Banner({
|
|
|
279
279
|
icon,
|
|
280
280
|
isDismissable = false,
|
|
281
281
|
onDismiss,
|
|
282
|
+
dismissLabel,
|
|
282
283
|
endContent,
|
|
283
284
|
container = 'card',
|
|
284
285
|
elevation = 'none',
|
|
@@ -328,6 +329,14 @@ export function Banner({
|
|
|
328
329
|
const role = statusRole[status] ?? FALLBACK_ROLE;
|
|
329
330
|
const iconColor = statusIconColor[status];
|
|
330
331
|
const hasChildren = isRenderable(children);
|
|
332
|
+
// Keep the default tooltip concise while the accessible name identifies
|
|
333
|
+
// the banner; an explicit translated override names both surfaces.
|
|
334
|
+
const dismiss = t('@astryx.banner.dismiss');
|
|
335
|
+
const dismissTooltip = dismissLabel ?? dismiss;
|
|
336
|
+
const dismissName = dismissLabel ?? (typeof title === 'string' ? t('@astryx.banner.dismissTitled', {
|
|
337
|
+
dismiss,
|
|
338
|
+
title
|
|
339
|
+
}) : dismiss);
|
|
331
340
|
if (isDismissed) {
|
|
332
341
|
return null;
|
|
333
342
|
}
|
|
@@ -445,8 +454,8 @@ export function Banner({
|
|
|
445
454
|
}), isDismissable && /*#__PURE__*/_jsx(Button, {
|
|
446
455
|
variant: "ghost",
|
|
447
456
|
size: "sm",
|
|
448
|
-
label:
|
|
449
|
-
tooltip:
|
|
457
|
+
label: dismissName,
|
|
458
|
+
tooltip: dismissTooltip,
|
|
450
459
|
icon: /*#__PURE__*/_jsx(Icon, {
|
|
451
460
|
icon: "close",
|
|
452
461
|
size: "sm",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/Button/Button.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAAwB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAC5D,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAE,SAAS,EAAC,MAAM,gBAAgB,CAAC;AACzD,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAwB3C,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/Button/Button.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAAwB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAC5D,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAE,SAAS,EAAC,MAAM,gBAAgB,CAAC;AACzD,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAwB3C,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,eAAe,CAAC;AAKrD,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,SAAS,CAAC;AA0G9C,QAAA,MAAM,UAAU;;;;;;;;;;EAUd,CAAC;AAsDH;;;GAGG;AACH,MAAM,MAAM,aAAa,GAAG,MAAM,gBAAgB,CAAC;AAEnD;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,UAAU,CAAC;AAEjD,MAAM,WAAW,WAAY,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IAC/D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC,oDAAoD;IACpD,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrC,+CAA+C;IAC/C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,gDAAgD;IAChD,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,aAAa,CAAC,MAAM,CAAC,CAAC;IAChD,uDAAuD;IACvD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB;;;OAGG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB;;;;OAIG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;;;;;OAQG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACrD;;OAEG;IACH,WAAW,CAAC,EAAE,CACZ,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KACnC,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1B;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,EAAE,CAAC,EAAE,iBAAiB,CAAC;IACvB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAuJD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,MAAM,CAAC,EACrB,KAAK,EACL,OAAqB,EACrB,IAAI,EAAE,QAAQ,EACd,IAAe,EACf,UAAkB,EAClB,SAAiB,EACjB,eAAuB,EACvB,WAAW,EACX,IAAI,EACJ,UAAkB,EAClB,KAAK,EACL,SAAkB,EAClB,QAAQ,EACR,UAAU,EACV,OAAO,EACP,IAAI,EACJ,EAAE,EACF,MAAM,EACN,GAAG,EACH,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,WAAW,GAAG,SAAS,CAoPzB;yBA7Qe,MAAM"}
|
package/dist/Button/Button.js
CHANGED
|
@@ -32,6 +32,7 @@ import { useMergedRefs } from "../hooks/useMergedRefs.js";
|
|
|
32
32
|
import { useLinkComponent } from "../Link/useLinkComponent.js";
|
|
33
33
|
import { themeProps } from "../utils/themeProps.js";
|
|
34
34
|
import { focusOutlineProps } from "../utils/focusOutline.stylex.js";
|
|
35
|
+
import { interactionOverlayStyles } from "../utils/interactionOverlay.stylex.js";
|
|
35
36
|
import { useTranslator } from "../i18n/index.js";
|
|
36
37
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
37
38
|
/**
|
|
@@ -188,26 +189,22 @@ const variants = {
|
|
|
188
189
|
primary: {
|
|
189
190
|
kWkggS: "x1ewilqj",
|
|
190
191
|
kMwMTN: "x17wrial",
|
|
191
|
-
kKwaWg: "xmvprkv xq8i9tn",
|
|
192
192
|
$$css: true
|
|
193
193
|
},
|
|
194
194
|
secondary: {
|
|
195
195
|
kWkggS: "x17x4s8c",
|
|
196
196
|
kMwMTN: "x1tgivj0",
|
|
197
|
-
kKwaWg: "xmvprkv xq8i9tn",
|
|
198
197
|
$$css: true
|
|
199
198
|
},
|
|
200
199
|
ghost: {
|
|
201
200
|
kWkggS: "xjbqb8w",
|
|
202
201
|
kMwMTN: "x1tgivj0",
|
|
203
|
-
kKwaWg: "xmvprkv xq8i9tn",
|
|
204
202
|
$$css: true
|
|
205
203
|
},
|
|
206
204
|
destructive: {
|
|
207
205
|
kWkggS: "x1pjz0fi",
|
|
208
206
|
kMwMTN: "x1m024r3",
|
|
209
207
|
kjBf7l: "x1e0x2sz",
|
|
210
|
-
kKwaWg: "xmvprkv xq8i9tn",
|
|
211
208
|
$$css: true
|
|
212
209
|
}
|
|
213
210
|
};
|
|
@@ -437,7 +434,7 @@ export function Button({
|
|
|
437
434
|
} : null;
|
|
438
435
|
|
|
439
436
|
// Shared StyleX props for both button and link rendering
|
|
440
|
-
const sharedStylexProps = focusOutlineProps.focusVisible(styles.base, sizeStyles[size], isIconOnly && styles.iconOnly, buttonDisabled && styles.disabled, useAriaDisabled && styles.ariaDisabled, renderAsLink && styles.link, !buttonGroup && styles.pressable, buttonGroup && (buttonGroup.orientation === 'horizontal' ? groupStyles.horizontal : groupStyles.vertical), buttonGroup && (variant === 'primary' || variant === 'destructive') && (buttonGroup.orientation === 'horizontal' ? groupStyles.onSolidHorizontal : groupStyles.onSolidVertical),
|
|
437
|
+
const sharedStylexProps = focusOutlineProps.focusVisible(styles.base, sizeStyles[size], isIconOnly && styles.iconOnly, interactionOverlayStyles.backgroundImage, buttonDisabled && styles.disabled, useAriaDisabled && styles.ariaDisabled, renderAsLink && styles.link, !buttonGroup && styles.pressable, buttonGroup && (buttonGroup.orientation === 'horizontal' ? groupStyles.horizontal : groupStyles.vertical), buttonGroup && (variant === 'primary' || variant === 'destructive') && (buttonGroup.orientation === 'horizontal' ? groupStyles.onSolidHorizontal : groupStyles.onSolidVertical),
|
|
441
438
|
// Standalone floating buttons only — a grouped button's elevation is owned
|
|
442
439
|
// by the ButtonGroup so the shared surface lifts as one unit.
|
|
443
440
|
!buttonGroup && elevationStyles[elevation], width != null && dynamicStyles.width(width),
|
|
@@ -445,9 +442,13 @@ export function Button({
|
|
|
445
442
|
// for every variant, and `destructive` re-colors just the ring to match
|
|
446
443
|
// its own surface. Ordering is the mechanism — StyleX is last-wins.
|
|
447
444
|
variants[variant], xstyle);
|
|
448
|
-
const sharedMergedProps = mergeProps(
|
|
445
|
+
const sharedMergedProps = mergeProps(
|
|
446
|
+
// Inside a group the group owns the surface's elevation, so the button
|
|
447
|
+
// reflects the tier it actually paints rather than the prop it was handed.
|
|
448
|
+
themeProps('button', {
|
|
449
449
|
variant,
|
|
450
|
-
size
|
|
450
|
+
size,
|
|
451
|
+
elevation: buttonGroup ? 'none' : elevation
|
|
451
452
|
}), sharedStylexProps, className, style);
|
|
452
453
|
const buttonContent = /*#__PURE__*/_jsxs(_Fragment, {
|
|
453
454
|
children: [isLoadingState && /*#__PURE__*/_jsx("span", {
|
|
@@ -35,8 +35,10 @@ interface CalendarBaseProps extends Omit<BaseProps<HTMLDivElement>, 'onChange' |
|
|
|
35
35
|
* Range mode only. Minimum number of days a selected range must span,
|
|
36
36
|
* counting both endpoints — `minRangeSpan={2}` forbids a single-day range.
|
|
37
37
|
* Once a start date is picked, days closer than this to it are disabled —
|
|
38
|
-
* except the start itself, which stays selectable
|
|
39
|
-
*
|
|
38
|
+
* except the start itself, which stays selectable. Clicking the start again
|
|
39
|
+
* commits a one-day range when the minimum allows it; otherwise it cancels
|
|
40
|
+
* the in-progress selection so the start can be moved. Defaults to 1 (a
|
|
41
|
+
* same-day start and end is allowed).
|
|
40
42
|
*/
|
|
41
43
|
minRangeSpan?: number;
|
|
42
44
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Calendar.d.ts","sourceRoot":"","sources":["../../src/Calendar/Calendar.tsx"],"names":[],"mappings":"AA6BA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"Calendar.d.ts","sourceRoot":"","sources":["../../src/Calendar/Calendar.tsx"],"names":[],"mappings":"AA6BA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAiD5C,YAAY,EACV,aAAa,EACb,SAAS,EACT,aAAa,EACb,SAAS,GACV,MAAM,oBAAoB,CAAC;AAC5B,OAAO,KAAK,EACV,aAAa,EACb,SAAS,EACT,aAAa,EACb,SAAS,EACV,MAAM,oBAAoB,CAAC;AAK5B,+CAA+C;AAE/C,MAAM,WAAW,cAAc;IAC7B,wEAAwE;IACxE,UAAU,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAC;CAC3C;AAID,UAAU,iBAAkB,SAAQ,IAAI,CACtC,SAAS,CAAC,cAAc,CAAC,EACzB,UAAU,GAAG,cAAc,CAC5B;IACC,kDAAkD;IAClD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,qDAAqD;IACrD,SAAS,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IACtC,+CAA+C;IAC/C,cAAc,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;IAEvB,4CAA4C;IAC5C,GAAG,CAAC,EAAE,aAAa,CAAC;IAEpB,4CAA4C;IAC5C,GAAG,CAAC,EAAE,aAAa,CAAC;IAEpB;;;OAGG;IACH,eAAe,CAAC,EAAE,aAAa,CAAC,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC,CAAC;IAEzD;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;;;;;;OAQG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,aAAa,CAAC;IAE1B,yDAAyD;IACzD,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,aAAa,KAAK,IAAI,CAAC;IAEvD;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAE9B;;;;OAIG;IACH,YAAY,CAAC,EAAE,SAAS,GAAG,aAAa,CAAC;CAC1C;AAID,UAAU,mBAAoB,SAAQ,iBAAiB;IACrD,qBAAqB;IACrB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAEhB,+CAA+C;IAC/C,KAAK,CAAC,EAAE,aAAa,CAAC;IAEtB,0CAA0C;IAC1C,YAAY,CAAC,EAAE,aAAa,CAAC;IAE7B,qCAAqC;IACrC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,IAAI,KAAK,IAAI,CAAC;CAC9D;AAED,UAAU,kBAAmB,SAAQ,iBAAiB;IACpD,qBAAqB;IACrB,IAAI,EAAE,OAAO,CAAC;IAEd,0BAA0B;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB,0CAA0C;IAC1C,YAAY,CAAC,EAAE,SAAS,CAAC;IAEzB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;CACvC;AAED,MAAM,MAAM,aAAa,GAAG,mBAAmB,GAAG,kBAAkB,CAAC;AAMrE;;;;;;;GAOG;AACH,wBAAgB,QAAQ,CAAC,EAAC,GAAG,EAAE,GAAG,KAAK,EAAC,EAAE,aAAa,+BAqXtD;yBArXe,QAAQ"}
|
|
@@ -27,6 +27,7 @@ import { calendarStyles, monthGridStyles, dayCellStyles, dayCellTheme } from "./
|
|
|
27
27
|
import { plainDateFromISO, plainDateToISO, plainDateToDate, plainDateToday, plainDateSetFirstOfMonth, plainDateAddMonths, plainDateAddDays, plainDateIsBefore, plainDateIsEqual, plainDateGetWeekNumber, plainDateFormat, DATE_FORMAT_WITH_WEEKDAY, DATE_FORMAT_MONTH_YEAR } from "../utils/plainDate.js";
|
|
28
28
|
import { mergeProps, composeEventHandlers, rtlStyles } from "../utils/index.js";
|
|
29
29
|
import { focusOutlineProps } from "../utils/focusOutline.stylex.js";
|
|
30
|
+
import { interactionOverlayStyles } from "../utils/interactionOverlay.stylex.js";
|
|
30
31
|
import { getInitialFocusDate } from "./getInitialFocusDate.js";
|
|
31
32
|
import { computeDayCellState, computeRangeRounding, computePreviewRounding, computeDayNeighborContinuity, isEndpoint } from "./dayCellUtils.js";
|
|
32
33
|
|
|
@@ -252,16 +253,15 @@ export function Calendar({
|
|
|
252
253
|
// Second click - complete the range
|
|
253
254
|
const startPd = plainDateFromISO(rangeSelectionStart);
|
|
254
255
|
|
|
255
|
-
// Clicking the anchor again
|
|
256
|
-
//
|
|
257
|
-
//
|
|
258
|
-
//
|
|
259
|
-
//
|
|
260
|
-
|
|
261
|
-
if (plainDateIsEqual(date, startPd)) {
|
|
256
|
+
// Clicking the anchor again commits a one-day range when the minimum
|
|
257
|
+
// span allows it. For longer minimum spans, the repeated click clears
|
|
258
|
+
// the in-progress start instead: the anchor is the only nearby day
|
|
259
|
+
// that remains enabled, so this preserves an escape hatch for moving
|
|
260
|
+
// the start without violating the configured minimum.
|
|
261
|
+
if (plainDateIsEqual(date, startPd) && (minRangeSpan ?? 1) > 1) {
|
|
262
262
|
setRangeSelectionStart(null);
|
|
263
263
|
announce(t('@astryx.calendar.rangeClearedAnnounce', {
|
|
264
|
-
date: plainDateFormat(date, DATE_FORMAT_WITH_WEEKDAY)
|
|
264
|
+
date: plainDateFormat(date, DATE_FORMAT_WITH_WEEKDAY, locale)
|
|
265
265
|
}));
|
|
266
266
|
return;
|
|
267
267
|
}
|
|
@@ -291,7 +291,7 @@ export function Calendar({
|
|
|
291
291
|
}));
|
|
292
292
|
}
|
|
293
293
|
}
|
|
294
|
-
}, [mode, onChange, rangeSelectionStart, announce, t, locale]);
|
|
294
|
+
}, [mode, onChange, rangeSelectionStart, minRangeSpan, announce, t, locale]);
|
|
295
295
|
return /*#__PURE__*/_jsxs("div", {
|
|
296
296
|
ref: ref,
|
|
297
297
|
...rest,
|
|
@@ -808,7 +808,7 @@ function DayCell({
|
|
|
808
808
|
// `marker` mirrors the StyleX conditions below exactly, preserving
|
|
809
809
|
// the default rendering.
|
|
810
810
|
marker: markerState
|
|
811
|
-
}), focusOutlineProps.focusVisible(dayCellStyles.day, dayCellTheme.day, isOutside && dayCellStyles.dayOutside, isOutside && dayCellTheme.dayOutside, showsTodayRing && dayCellStyles.dayToday, showsTodayRing && dayCellTheme.dayToday, showsTodayInRangeRing && dayCellStyles.dayTodayInRange, showsTodayInRangeRing && dayCellTheme.dayTodayInRange, endpoint && dayCellStyles.daySelected, endpoint && dayCellTheme.daySelected, state.effectivelyDisabled && dayCellStyles.dayDisabled, state.effectivelyDisabled && dayCellTheme.dayDisabled)),
|
|
811
|
+
}), focusOutlineProps.focusVisible(dayCellStyles.day, dayCellTheme.day, interactionOverlayStyles.backgroundImage, isOutside && dayCellStyles.dayOutside, isOutside && dayCellTheme.dayOutside, showsTodayRing && dayCellStyles.dayToday, showsTodayRing && dayCellTheme.dayToday, showsTodayInRangeRing && dayCellStyles.dayTodayInRange, showsTodayInRangeRing && dayCellTheme.dayTodayInRange, endpoint && dayCellStyles.daySelected, endpoint && dayCellTheme.daySelected, state.effectivelyDisabled && dayCellStyles.dayDisabled, state.effectivelyDisabled && dayCellTheme.dayDisabled)),
|
|
812
812
|
children: dayNumber
|
|
813
813
|
})]
|
|
814
814
|
});
|
|
@@ -33,19 +33,9 @@ export declare const calendarStyles: Readonly<{
|
|
|
33
33
|
}>;
|
|
34
34
|
readonly monthsContainer: Readonly<{
|
|
35
35
|
readonly display: stylex.StyleXClassNameFor<"display", "flex">;
|
|
36
|
+
readonly flexWrap: stylex.StyleXClassNameFor<"flexWrap", "wrap">;
|
|
36
37
|
readonly gap: stylex.StyleXClassNameFor<"gap", "16px">;
|
|
37
38
|
}>;
|
|
38
|
-
readonly srOnly: Readonly<{
|
|
39
|
-
readonly position: stylex.StyleXClassNameFor<"position", "absolute">;
|
|
40
|
-
readonly width: stylex.StyleXClassNameFor<"width", "1px">;
|
|
41
|
-
readonly height: stylex.StyleXClassNameFor<"height", "1px">;
|
|
42
|
-
readonly padding: stylex.StyleXClassNameFor<"padding", 0>;
|
|
43
|
-
readonly margin: stylex.StyleXClassNameFor<"margin", "-1px">;
|
|
44
|
-
readonly overflow: stylex.StyleXClassNameFor<"overflow", "hidden">;
|
|
45
|
-
readonly clip: stylex.StyleXClassNameFor<"clip", "rect(0, 0, 0, 0)">;
|
|
46
|
-
readonly whiteSpace: stylex.StyleXClassNameFor<"whiteSpace", "nowrap">;
|
|
47
|
-
readonly borderWidth: stylex.StyleXClassNameFor<"borderWidth", 0>;
|
|
48
|
-
}>;
|
|
49
39
|
readonly navIcon: Readonly<{
|
|
50
40
|
readonly display: stylex.StyleXClassNameFor<"display", "inline-flex">;
|
|
51
41
|
}>;
|
|
@@ -154,7 +144,7 @@ export declare const dayCellStyles: Readonly<{
|
|
|
154
144
|
readonly display: stylex.StyleXClassNameFor<"display", "flex">;
|
|
155
145
|
readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "center">;
|
|
156
146
|
readonly justifyContent: stylex.StyleXClassNameFor<"justifyContent", "center">;
|
|
157
|
-
readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", "
|
|
147
|
+
readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", "9999px">;
|
|
158
148
|
readonly borderWidth: stylex.StyleXClassNameFor<"borderWidth", 0>;
|
|
159
149
|
readonly borderStyle: stylex.StyleXClassNameFor<"borderStyle", "none">;
|
|
160
150
|
readonly cursor: stylex.StyleXClassNameFor<"cursor", "default" | "pointer">;
|
|
@@ -195,9 +185,6 @@ export declare const dayCellTheme: Readonly<{
|
|
|
195
185
|
readonly day: Readonly<{
|
|
196
186
|
readonly color: stylex.StyleXClassNameFor<"color", "light-dark(#0A1317, #DFE2E5)">;
|
|
197
187
|
readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "transparent">;
|
|
198
|
-
readonly backgroundImage: stylex.StyleXClassNameFor<"backgroundImage", {
|
|
199
|
-
readonly '@media (hover: hover)': `linear-gradient(${stylex.StyleXVar<"light-dark(#0536590C, #FFFFFF0C)">}, ${stylex.StyleXVar<"light-dark(#0536590C, #FFFFFF0C)">})`;
|
|
200
|
-
} | null>;
|
|
201
188
|
}>;
|
|
202
189
|
readonly dayOutside: Readonly<{
|
|
203
190
|
readonly color: stylex.StyleXClassNameFor<"color", "light-dark(#4E606F, #AAAFB5)">;
|
|
@@ -209,11 +196,9 @@ export declare const dayCellTheme: Readonly<{
|
|
|
209
196
|
readonly boxShadow: stylex.StyleXClassNameFor<"boxShadow", `inset 0 0 0 1px ${stylex.StyleXVar<"light-dark(#0A1317, #DFE2E5)">}`>;
|
|
210
197
|
}>;
|
|
211
198
|
readonly daySelected: Readonly<{
|
|
212
|
-
readonly
|
|
213
|
-
readonly
|
|
214
|
-
readonly
|
|
215
|
-
readonly '@media (hover: hover)': `linear-gradient(${stylex.StyleXVar<"light-dark(#0536590C, #FFFFFF0C)">}, ${stylex.StyleXVar<"light-dark(#0536590C, #FFFFFF0C)">})`;
|
|
216
|
-
} | null>;
|
|
199
|
+
readonly forcedColorAdjust: stylex.StyleXClassNameFor<"forcedColorAdjust", "none">;
|
|
200
|
+
readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "light-dark(#0064E0, #2694FE)" | "Highlight">;
|
|
201
|
+
readonly color: stylex.StyleXClassNameFor<"color", "light-dark(#FFFFFF, #FFFFFF)" | "HighlightText">;
|
|
217
202
|
}>;
|
|
218
203
|
readonly dayDisabled: Readonly<{
|
|
219
204
|
readonly opacity: stylex.StyleXClassNameFor<"opacity", 0.3>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/Calendar/styles.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAgB3C,eAAO,MAAM,cAAc
|
|
1
|
+
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/Calendar/styles.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAgB3C,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoCzB,CAAC;AAMH,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuC1B,CAAC;AAiBH,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+GxB,CAAC;AAMH,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8DvB,CAAC"}
|
package/dist/Calendar/styles.js
CHANGED
|
@@ -46,21 +46,10 @@ export const calendarStyles = {
|
|
|
46
46
|
},
|
|
47
47
|
monthsContainer: {
|
|
48
48
|
k1xSpc: "x78zum5",
|
|
49
|
+
kwnvtZ: "x1a02dak",
|
|
49
50
|
kOIVth: "x18g69wz",
|
|
50
51
|
$$css: true
|
|
51
52
|
},
|
|
52
|
-
srOnly: {
|
|
53
|
-
kVAEAm: "x10l6tqk",
|
|
54
|
-
kzqmXN: "x1i1rx1s",
|
|
55
|
-
kZKoxP: "xjm9jq1",
|
|
56
|
-
kmVPX3: "x1717udv",
|
|
57
|
-
kogj98: "xkdpibf",
|
|
58
|
-
kVQacm: "xb3r6kr",
|
|
59
|
-
kMcinP: "xzpqnlu",
|
|
60
|
-
khDVqt: "xuxw1ft",
|
|
61
|
-
kMzoRj: "xc342km",
|
|
62
|
-
$$css: true
|
|
63
|
-
},
|
|
64
53
|
navIcon: {
|
|
65
54
|
k1xSpc: "x3nfvp2",
|
|
66
55
|
$$css: true
|
|
@@ -122,6 +111,16 @@ export const monthGridStyles = {
|
|
|
122
111
|
// Day Cell Styles - Structural (layout, sizing, positioning)
|
|
123
112
|
// =============================================================================
|
|
124
113
|
|
|
114
|
+
// Half the gap between the day button and its cell — (--size-element-md minus
|
|
115
|
+
// --size-element-sm) / 2 — so the band's rounded caps line up with the button
|
|
116
|
+
// and the button's ::before bleeds out to meet its neighbour's. Deliberately a
|
|
117
|
+
// literal and NOT a spacing token: this is a layout value derived from the two
|
|
118
|
+
// size tokens, and pinning it to --spacing-0-5 desynchronises it from them
|
|
119
|
+
// (matcha sets that step to 3px, which overlaps adjacent days' hit targets by
|
|
120
|
+
// 2px). Deriving it with calc() from the size tokens would be better still and
|
|
121
|
+
// would close butter's 4px dead gap; that needs its own measured change.
|
|
122
|
+
const BAND_INSET = '2px';
|
|
123
|
+
const HIT_BLEED = '-2px';
|
|
125
124
|
export const dayCellStyles = {
|
|
126
125
|
cell: {
|
|
127
126
|
kVAEAm: "x1n2onr6",
|
|
@@ -198,7 +197,7 @@ export const dayCellStyles = {
|
|
|
198
197
|
k1xSpc: "x78zum5",
|
|
199
198
|
kGNEyG: "x6s0dn4",
|
|
200
199
|
kjj79g: "xl56j7k",
|
|
201
|
-
kaIpWk: "
|
|
200
|
+
kaIpWk: "xjspbzw",
|
|
202
201
|
kMzoRj: "xc342km",
|
|
203
202
|
ksu8eU: "xng3xce",
|
|
204
203
|
kkrTdU: "x1ypdohk x16khyan",
|
|
@@ -253,7 +252,6 @@ export const dayCellTheme = {
|
|
|
253
252
|
day: {
|
|
254
253
|
kMwMTN: "x1tgivj0",
|
|
255
254
|
kWkggS: "xjbqb8w",
|
|
256
|
-
kKwaWg: "xmvprkv",
|
|
257
255
|
$$css: true
|
|
258
256
|
},
|
|
259
257
|
dayOutside: {
|
|
@@ -269,9 +267,9 @@ export const dayCellTheme = {
|
|
|
269
267
|
$$css: true
|
|
270
268
|
},
|
|
271
269
|
daySelected: {
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
270
|
+
kAXs8y: "x1kzknox",
|
|
271
|
+
kWkggS: "x1ewilqj x1jzqe4",
|
|
272
|
+
kMwMTN: "x17wrial x1k5gbb1",
|
|
275
273
|
$$css: true
|
|
276
274
|
},
|
|
277
275
|
dayDisabled: {
|