@astryxdesign/core 0.1.4-canary.f767ee2 → 0.1.4-canary.fd7ab46
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 +20 -18
- package/dist/AlertDialog/useImperativeAlertDialog.js +3 -3
- package/dist/AppShell/AppShell.d.ts +1 -1
- package/dist/AppShell/AppShell.d.ts.map +1 -1
- package/dist/AppShell/AppShell.js +55 -53
- package/dist/AspectRatio/AspectRatio.d.ts +48 -10
- package/dist/AspectRatio/AspectRatio.d.ts.map +1 -1
- package/dist/AspectRatio/AspectRatio.js +33 -12
- package/dist/AspectRatio/index.d.ts +1 -1
- package/dist/AspectRatio/index.d.ts.map +1 -1
- package/dist/Avatar/Avatar.d.ts.map +1 -1
- package/dist/Avatar/Avatar.js +27 -25
- package/dist/Avatar/AvatarStatusDot.js +5 -5
- package/dist/AvatarGroup/AvatarGroup.js +5 -5
- package/dist/AvatarGroup/AvatarGroupOverflow.js +5 -5
- package/dist/Badge/Badge.js +3 -3
- package/dist/Banner/Banner.js +24 -24
- package/dist/Blockquote/Blockquote.js +7 -7
- package/dist/Breadcrumbs/BreadcrumbItem.js +17 -17
- package/dist/Breadcrumbs/Breadcrumbs.js +7 -7
- package/dist/Button/Button.js +19 -19
- package/dist/ButtonGroup/ButtonGroup.js +7 -7
- package/dist/Calendar/Calendar.js +43 -43
- package/dist/Calendar/dayCellUtils.d.ts.map +1 -1
- package/dist/Card/Card.d.ts +4 -2
- package/dist/Card/Card.d.ts.map +1 -1
- package/dist/Card/Card.js +18 -10
- package/dist/Carousel/Carousel.d.ts.map +1 -1
- package/dist/Carousel/Carousel.js +23 -21
- package/dist/Center/Center.js +3 -3
- package/dist/Chat/ChatComposer.js +23 -23
- package/dist/Chat/ChatComposerDrawer.js +14 -14
- package/dist/Chat/ChatComposerInput.d.ts +1 -1
- package/dist/Chat/ChatComposerInput.d.ts.map +1 -1
- package/dist/Chat/ChatComposerInput.js +27 -15
- package/dist/Chat/ChatDictationButton.d.ts +1 -1
- package/dist/Chat/ChatDictationButton.d.ts.map +1 -1
- package/dist/Chat/ChatDictationButton.js +13 -11
- package/dist/Chat/ChatLayout.js +17 -17
- package/dist/Chat/ChatLayoutScrollButton.d.ts +1 -1
- package/dist/Chat/ChatLayoutScrollButton.d.ts.map +1 -1
- package/dist/Chat/ChatLayoutScrollButton.js +12 -10
- package/dist/Chat/ChatMessage.js +12 -12
- package/dist/Chat/ChatMessageBubble.js +7 -7
- package/dist/Chat/ChatMessageList.js +14 -14
- package/dist/Chat/ChatMessageMetadata.d.ts +1 -1
- package/dist/Chat/ChatMessageMetadata.d.ts.map +1 -1
- package/dist/Chat/ChatMessageMetadata.js +14 -12
- package/dist/Chat/ChatPastedTextToken.js +13 -13
- package/dist/Chat/ChatSendButton.js +3 -3
- package/dist/Chat/ChatSystemMessage.d.ts +1 -1
- package/dist/Chat/ChatSystemMessage.d.ts.map +1 -1
- package/dist/Chat/ChatSystemMessage.js +17 -17
- package/dist/Chat/ChatTokenizedText.d.ts +1 -1
- package/dist/Chat/ChatTokenizedText.d.ts.map +1 -1
- package/dist/Chat/ChatTokenizedText.js +24 -15
- package/dist/Chat/ChatToolCalls.js +73 -73
- package/dist/Chat/index.d.ts +1 -1
- package/dist/Chat/index.d.ts.map +1 -1
- package/dist/Chat/useTriggerMenu.d.ts.map +1 -1
- package/dist/Chat/useTriggerMenu.js +15 -15
- package/dist/CheckboxInput/CheckboxInput.d.ts +1 -1
- package/dist/CheckboxInput/CheckboxInput.d.ts.map +1 -1
- package/dist/CheckboxInput/CheckboxInput.js +25 -23
- package/dist/CheckboxList/CheckboxList.js +9 -9
- package/dist/CheckboxList/CheckboxListItem.d.ts +1 -1
- package/dist/CheckboxList/CheckboxListItem.d.ts.map +1 -1
- package/dist/CheckboxList/CheckboxListItem.js +8 -6
- package/dist/Citation/Citation.js +10 -10
- package/dist/ClickableCard/ClickableCard.d.ts.map +1 -1
- package/dist/ClickableCard/ClickableCard.js +32 -9
- package/dist/Code/Code.js +3 -3
- package/dist/CodeBlock/CodeBlock.d.ts.map +1 -1
- package/dist/CodeBlock/CodeBlock.js +68 -50
- package/dist/Collapsible/Collapsible.js +11 -11
- package/dist/Collapsible/CollapsibleGroup.js +7 -7
- package/dist/Collapsible/useCollapsible.d.ts +4 -1
- package/dist/Collapsible/useCollapsible.d.ts.map +1 -1
- package/dist/Collapsible/useCollapsible.js +20 -6
- package/dist/CommandPalette/CommandPalette.d.ts.map +1 -1
- package/dist/CommandPalette/CommandPalette.js +36 -34
- package/dist/CommandPalette/CommandPaletteEmpty.js +3 -3
- package/dist/CommandPalette/CommandPaletteFooter.js +16 -16
- package/dist/CommandPalette/CommandPaletteGroup.js +5 -5
- package/dist/CommandPalette/CommandPaletteInput.js +13 -13
- package/dist/CommandPalette/CommandPaletteItem.js +3 -3
- package/dist/CommandPalette/CommandPaletteList.js +3 -3
- package/dist/ContextMenu/ContextMenu.d.ts +7 -2
- package/dist/ContextMenu/ContextMenu.d.ts.map +1 -1
- package/dist/ContextMenu/ContextMenu.js +74 -43
- package/dist/DateInput/DateInput.js +18 -18
- package/dist/DateRangeInput/DateRangeInput.js +21 -21
- package/dist/DateTimeInput/DateTimeInput.d.ts +5 -2
- package/dist/DateTimeInput/DateTimeInput.d.ts.map +1 -1
- package/dist/DateTimeInput/DateTimeInput.js +28 -26
- package/dist/DateTimeInput/index.d.ts +1 -1
- package/dist/DateTimeInput/index.d.ts.map +1 -1
- package/dist/Dialog/Dialog.js +9 -9
- package/dist/Dialog/DialogHeader.js +16 -16
- package/dist/Dialog/useImperativeDialog.js +3 -3
- package/dist/Divider/Divider.js +7 -7
- package/dist/DropdownMenu/DropdownMenu.js +10 -10
- package/dist/DropdownMenu/DropdownMenuItem.d.ts +2 -17
- package/dist/DropdownMenu/DropdownMenuItem.d.ts.map +1 -1
- package/dist/DropdownMenu/DropdownMenuItem.js +3 -3
- package/dist/DropdownMenu/renderDropdownItems.js +10 -10
- package/dist/EmptyState/EmptyState.js +9 -9
- package/dist/Field/Field.js +17 -17
- package/dist/Field/FieldLabel.js +15 -15
- package/dist/Field/InputClearButton.js +5 -5
- package/dist/FieldStatus/FieldStatus.js +3 -3
- package/dist/FileInput/FileInput.js +29 -29
- package/dist/FormLayout/FormLayout.js +5 -5
- package/dist/Grid/Grid.js +3 -3
- package/dist/Grid/GridSpan.js +3 -3
- package/dist/HStack/HStack.js +3 -3
- package/dist/Heading/Heading.js +10 -10
- package/dist/HoverCard/HoverCard.js +9 -9
- package/dist/HoverCard/useHoverCard.d.ts +5 -1
- package/dist/HoverCard/useHoverCard.d.ts.map +1 -1
- package/dist/HoverCard/useHoverCard.js +3 -3
- package/dist/Icon/Icon.js +11 -11
- package/dist/Icon/defaultIcons.js +116 -116
- package/dist/IconButton/IconButton.js +3 -3
- package/dist/InputGroup/InputGroup.js +11 -11
- package/dist/InputGroup/InputGroupText.js +3 -3
- package/dist/Item/Item.js +18 -18
- package/dist/Kbd/Kbd.js +5 -5
- package/dist/Layer/LayerProvider.js +7 -7
- package/dist/Layer/useLayer.d.ts +29 -2
- package/dist/Layer/useLayer.d.ts.map +1 -1
- package/dist/Layer/useLayer.js +44 -31
- package/dist/Layout/Layout.js +21 -21
- package/dist/Layout/LayoutContent.js +3 -3
- package/dist/Layout/LayoutFooter.js +5 -5
- package/dist/Layout/LayoutHeader.js +5 -5
- package/dist/Layout/LayoutPanel.js +3 -3
- package/dist/Lightbox/Lightbox.js +29 -29
- package/dist/Lightbox/useLightbox.js +3 -3
- package/dist/Link/Link.js +15 -15
- package/dist/Link/LinkProvider.js +3 -3
- package/dist/Link/useLinkify.js +3 -3
- package/dist/List/List.js +11 -11
- package/dist/List/ListItem.js +11 -11
- package/dist/Markdown/Markdown.d.ts.map +1 -1
- package/dist/Markdown/Markdown.js +102 -102
- package/dist/MetadataList/MetadataList.js +10 -10
- package/dist/MetadataList/MetadataListItem.js +15 -15
- package/dist/MobileNav/MobileNav.js +15 -15
- package/dist/MobileNav/MobileNavToggle.js +5 -5
- package/dist/MoreMenu/MoreMenu.js +3 -3
- package/dist/MultiSelector/MultiSelector.js +56 -56
- package/dist/NavIcon/NavIcon.js +3 -3
- package/dist/NavMenu/NavHeadingMenu.js +5 -5
- package/dist/NavMenu/NavHeadingMenuItem.js +8 -8
- package/dist/NumberInput/NumberInput.js +16 -16
- package/dist/Outline/Outline.js +15 -15
- package/dist/OverflowList/OverflowList.js +8 -8
- package/dist/Overlay/Overlay.js +3 -3
- package/dist/Overlay/OverlayScrim.js +5 -5
- package/dist/Overlay/useOverlay.js +3 -3
- package/dist/Pagination/Pagination.d.ts +1 -1
- package/dist/Pagination/Pagination.d.ts.map +1 -1
- package/dist/Pagination/Pagination.js +40 -38
- package/dist/Popover/Popover.js +16 -16
- package/dist/Popover/usePopover.js +7 -7
- package/dist/PowerSearch/PowerSearch.d.ts.map +1 -1
- package/dist/PowerSearch/PowerSearch.js +110 -92
- package/dist/PowerSearch/PowerSearchEditPopover.js +84 -84
- package/dist/PowerSearch/PowerSearchFilterEditor.js +3 -3
- package/dist/PowerSearch/PowerSearchToken.js +5 -5
- package/dist/PowerSearch/PowerSearchValueEditor.js +54 -54
- package/dist/ProgressBar/ProgressBar.d.ts.map +1 -1
- package/dist/ProgressBar/ProgressBar.js +23 -17
- package/dist/RadioList/RadioList.js +7 -7
- package/dist/RadioList/RadioListItem.d.ts +1 -1
- package/dist/RadioList/RadioListItem.d.ts.map +1 -1
- package/dist/RadioList/RadioListItem.js +24 -21
- package/dist/Resizable/ResizeHandle.d.ts.map +1 -1
- package/dist/Resizable/ResizeHandle.js +18 -8
- package/dist/Section/Section.js +5 -5
- package/dist/SegmentedControl/SegmentedControl.d.ts +1 -1
- package/dist/SegmentedControl/SegmentedControl.d.ts.map +1 -1
- package/dist/SegmentedControl/SegmentedControl.js +32 -10
- package/dist/SegmentedControl/SegmentedControlItem.d.ts +1 -1
- package/dist/SegmentedControl/SegmentedControlItem.d.ts.map +1 -1
- package/dist/SegmentedControl/SegmentedControlItem.js +18 -12
- package/dist/SelectableCard/SelectableCard.js +5 -5
- package/dist/Selector/Selector.js +46 -46
- package/dist/Selector/SelectorOption.js +3 -3
- package/dist/SideNav/SideNav.js +34 -34
- package/dist/SideNav/SideNavCollapseButton.d.ts +1 -1
- package/dist/SideNav/SideNavCollapseButton.d.ts.map +1 -1
- package/dist/SideNav/SideNavCollapseButton.js +8 -6
- package/dist/SideNav/SideNavHeading.js +87 -87
- package/dist/SideNav/SideNavItem.js +42 -42
- package/dist/SideNav/SideNavSection.d.ts +1 -1
- package/dist/SideNav/SideNavSection.d.ts.map +1 -1
- package/dist/SideNav/SideNavSection.js +18 -16
- package/dist/Skeleton/Skeleton.js +3 -3
- package/dist/Slider/Slider.js +23 -23
- package/dist/Spinner/Spinner.js +9 -9
- package/dist/StatusDot/StatusDot.js +5 -5
- package/dist/Switch/Switch.d.ts +8 -4
- package/dist/Switch/Switch.d.ts.map +1 -1
- package/dist/Switch/Switch.js +34 -29
- package/dist/TabList/Tab.js +18 -18
- package/dist/TabList/TabList.js +5 -5
- package/dist/TabList/TabMenu.js +23 -23
- package/dist/TabList/tab.markers.stylex.d.ts +1 -1
- package/dist/Table/BaseTable.d.ts.map +1 -1
- package/dist/Table/BaseTable.js +38 -37
- package/dist/Table/Table.js +7 -7
- package/dist/Table/TableBody.d.ts +1 -1
- package/dist/Table/TableBody.d.ts.map +1 -1
- package/dist/Table/TableBody.js +9 -5
- package/dist/Table/TableCell.js +3 -3
- package/dist/Table/TableFooter.d.ts +1 -1
- package/dist/Table/TableFooter.d.ts.map +1 -1
- package/dist/Table/TableFooter.js +9 -5
- package/dist/Table/TableHeader.d.ts +1 -1
- package/dist/Table/TableHeader.d.ts.map +1 -1
- package/dist/Table/TableHeader.js +9 -5
- package/dist/Table/TableHeaderCell.js +3 -3
- package/dist/Table/TableRow.js +5 -5
- package/dist/Table/plugins/columnResize/useTableColumnResize.js +9 -9
- package/dist/Table/plugins/filtering/useTableFiltering.js +71 -71
- package/dist/Table/plugins/pagination/useTablePagination.js +7 -7
- package/dist/Table/plugins/rowExpansion/useTableRowExpansion.js +22 -22
- package/dist/Table/plugins/selection/useTableSelection.js +18 -18
- package/dist/Table/plugins/sortable/useTableSortable.js +17 -17
- package/dist/Table/tableContextMenu.js +9 -9
- package/dist/Text/Text.js +10 -10
- package/dist/TextArea/TextArea.js +14 -14
- package/dist/TextInput/TextInput.js +15 -15
- package/dist/Thumbnail/Thumbnail.js +29 -29
- package/dist/TimeInput/TimeInput.js +21 -21
- package/dist/Timestamp/Timestamp.d.ts +1 -1
- package/dist/Timestamp/Timestamp.d.ts.map +1 -1
- package/dist/Timestamp/Timestamp.js +37 -26
- package/dist/Toast/Toast.js +14 -14
- package/dist/Toast/ToastViewport.js +11 -11
- package/dist/Toast/useToast.js +4 -4
- package/dist/ToggleButton/ToggleButton.js +12 -12
- package/dist/ToggleButton/ToggleButtonGroup.js +5 -5
- package/dist/Token/Token.js +21 -21
- package/dist/Tokenizer/Tokenizer.d.ts.map +1 -1
- package/dist/Tokenizer/Tokenizer.js +36 -34
- package/dist/Toolbar/Toolbar.js +18 -18
- package/dist/Tooltip/Tooltip.js +11 -11
- package/dist/Tooltip/useTooltip.d.ts +5 -1
- package/dist/Tooltip/useTooltip.d.ts.map +1 -1
- package/dist/Tooltip/useTooltip.js +3 -3
- package/dist/TopNav/TopNav.js +32 -32
- package/dist/TopNav/TopNavHeading.js +67 -67
- package/dist/TopNav/TopNavItem.js +5 -5
- package/dist/TopNav/TopNavMegaMenu.js +30 -30
- package/dist/TopNav/TopNavMegaMenuFeaturedCard.d.ts +1 -1
- package/dist/TopNav/TopNavMegaMenuFeaturedCard.d.ts.map +1 -1
- package/dist/TopNav/TopNavMegaMenuFeaturedCard.js +25 -14
- package/dist/TopNav/TopNavMegaMenuItem.js +16 -16
- package/dist/TopNav/TopNavMenu.js +32 -32
- package/dist/TreeList/TreeList.js +8 -8
- package/dist/TreeList/TreeListBranches.js +11 -11
- package/dist/TreeList/TreeListItem.js +30 -30
- package/dist/Typeahead/BaseTypeahead.js +18 -18
- package/dist/Typeahead/Typeahead.js +12 -12
- package/dist/Typeahead/TypeaheadItem.js +10 -10
- package/dist/VStack/VStack.js +3 -3
- package/dist/astryx.css +6 -0
- package/dist/astryx.umd.js +61 -61
- package/dist/astryx.umd.js.map +4 -4
- package/dist/docs-types.d.ts +8 -2
- package/dist/docs-types.d.ts.map +1 -1
- 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/useHotkeys.d.ts +51 -0
- package/dist/hooks/useHotkeys.d.ts.map +1 -0
- package/dist/hooks/useHotkeys.js +160 -0
- package/dist/hooks/useInteractiveRole.d.ts +6 -2
- package/dist/hooks/useInteractiveRole.d.ts.map +1 -1
- package/dist/hooks/useInteractiveRole.js +6 -2
- package/dist/hooks/useKeyboardHint.js +9 -9
- package/dist/hooks/useStreamingText.d.ts +3 -1
- package/dist/hooks/useStreamingText.d.ts.map +1 -1
- package/dist/hooks/useStreamingText.js +14 -5
- package/dist/theme/MediaTheme.js +3 -3
- package/dist/theme/Theme.js +7 -7
- package/dist/theme/syntax/SyntaxTheme.js +5 -5
- package/dist/utils/composeEventHandlers.d.ts +30 -0
- package/dist/utils/composeEventHandlers.d.ts.map +1 -0
- package/dist/utils/composeEventHandlers.js +40 -0
- package/dist/utils/index.d.ts +1 -0
- package/dist/utils/index.d.ts.map +1 -1
- package/dist/utils/index.js +1 -0
- package/package.json +3 -3
- package/src/AlertDialog/AlertDialog.doc.mjs +4 -0
- package/src/AlertDialog/AlertDialog.tsx +2 -0
- package/src/AppShell/AppShell.tsx +2 -0
- package/src/AspectRatio/AspectRatio.doc.mjs +28 -1
- package/src/AspectRatio/AspectRatio.test.tsx +142 -1
- package/src/AspectRatio/AspectRatio.tsx +70 -10
- package/src/AspectRatio/index.ts +5 -1
- package/src/Avatar/Avatar.test.tsx +32 -1
- package/src/Avatar/Avatar.tsx +12 -20
- package/src/Calendar/Calendar.test.tsx +13 -16
- package/src/Calendar/dayCellUtils.ts +3 -1
- package/src/Card/Card.tsx +16 -6
- package/src/Carousel/Carousel.tsx +3 -2
- package/src/Chat/ChatComposerInput.test.tsx +27 -1
- package/src/Chat/ChatComposerInput.tsx +20 -15
- package/src/Chat/ChatDictationButton.test.tsx +43 -0
- package/src/Chat/ChatDictationButton.tsx +4 -4
- package/src/Chat/ChatLayoutScrollButton.test.tsx +33 -0
- package/src/Chat/ChatLayoutScrollButton.tsx +3 -1
- package/src/Chat/ChatMessageMetadata.test.tsx +32 -0
- package/src/Chat/ChatMessageMetadata.tsx +4 -6
- package/src/Chat/ChatSystemMessage.test.tsx +26 -11
- package/src/Chat/ChatSystemMessage.tsx +7 -7
- package/src/Chat/ChatTokenizedText.test.tsx +29 -16
- package/src/Chat/ChatTokenizedText.tsx +15 -8
- package/src/Chat/index.ts +1 -4
- package/src/Chat/useTriggerMenu.tsx +1 -4
- package/src/CheckboxInput/CheckboxInput.test.tsx +71 -4
- package/src/CheckboxInput/CheckboxInput.tsx +2 -0
- package/src/CheckboxList/CheckboxList.test.tsx +19 -0
- package/src/CheckboxList/CheckboxListItem.tsx +11 -2
- package/src/ClickableCard/ClickableCard.tsx +45 -2
- package/src/CodeBlock/CodeBlock.test.tsx +36 -1
- package/src/CodeBlock/CodeBlock.tsx +19 -1
- package/src/Collapsible/Collapsible.test.tsx +405 -0
- package/src/Collapsible/CollapsibleGroup.test.tsx +30 -0
- package/src/Collapsible/useCollapsible.ts +20 -6
- package/src/CommandPalette/CommandPalette.doc.mjs +4 -0
- package/src/CommandPalette/CommandPalette.tsx +5 -3
- package/src/ContextMenu/ContextMenu.test.tsx +72 -0
- package/src/ContextMenu/ContextMenu.tsx +85 -28
- package/src/DateInput/DateInput.test.tsx +11 -20
- package/src/DateRangeInput/DateRangeInput.test.tsx +31 -44
- package/src/DateTimeInput/DateTimeInput.doc.mjs +3 -2
- package/src/DateTimeInput/DateTimeInput.test.tsx +48 -16
- package/src/DateTimeInput/DateTimeInput.tsx +6 -2
- package/src/DateTimeInput/index.ts +1 -0
- package/src/Dialog/Dialog.doc.mjs +4 -0
- package/src/DropdownMenu/DropdownMenu.test.tsx +22 -2
- package/src/DropdownMenu/DropdownMenuItem.tsx +5 -17
- package/src/Field/Field.test.tsx +1 -4
- package/src/Field/FieldLabel.test.tsx +2 -2
- package/src/FieldStatus/FieldStatus.test.tsx +282 -0
- package/src/HoverCard/HoverCard.doc.mjs +6 -6
- package/src/HoverCard/useHoverCard.doc.mjs +5 -5
- package/src/HoverCard/useHoverCard.tsx +9 -2
- package/src/Icon/Icon.test.tsx +20 -20
- package/src/InputGroup/InputGroup.tsx +2 -2
- package/src/InteractiveRoleContext/InteractiveRoleContext.test.tsx +185 -0
- package/src/Item/Item.tsx +1 -1
- package/src/Layer/useLayer.doc.mjs +2 -2
- package/src/Layer/useLayer.test.tsx +221 -2
- package/src/Layer/useLayer.tsx +69 -30
- package/src/Layout/Layout.test.tsx +285 -0
- package/src/Layout/LayoutSlots.test.tsx +364 -0
- package/src/Markdown/Markdown.tsx +9 -7
- package/src/Markdown/parser.perf.test.ts +34 -12
- package/src/NumberInput/NumberInput.test.tsx +3 -3
- package/src/Outline/parseOutlineFromMarkdown.test.ts +80 -0
- package/src/OverflowList/OverflowList.test.tsx +416 -0
- package/src/Overlay/Overlay.test.tsx +356 -0
- package/src/Pagination/Pagination.test.tsx +19 -0
- package/src/Pagination/Pagination.tsx +5 -3
- package/src/Popover/Popover.doc.mjs +6 -6
- package/src/Popover/usePopover.doc.mjs +1 -1
- package/src/PowerSearch/PowerSearch.doc.mjs +2 -2
- package/src/PowerSearch/PowerSearch.test.tsx +109 -1
- package/src/PowerSearch/PowerSearch.tsx +37 -16
- package/src/ProgressBar/ProgressBar.test.tsx +20 -0
- package/src/ProgressBar/ProgressBar.tsx +10 -4
- package/src/RadioList/RadioList.test.tsx +19 -0
- package/src/RadioList/RadioListItem.tsx +9 -4
- package/src/Resizable/ResizeHandle.test.tsx +39 -1
- package/src/Resizable/ResizeHandle.tsx +12 -2
- package/src/SegmentedControl/SegmentedControl.test.tsx +192 -0
- package/src/SegmentedControl/SegmentedControl.tsx +27 -5
- package/src/SegmentedControl/SegmentedControlItem.tsx +9 -4
- package/src/Selector/Selector.test.tsx +27 -1
- package/src/SideNav/SideNav.test.tsx +46 -0
- package/src/SideNav/SideNavCollapseButton.tsx +4 -3
- package/src/SideNav/SideNavSection.tsx +6 -4
- package/src/SizeContext/SizeContext.test.tsx +226 -0
- package/src/Switch/Switch.doc.mjs +7 -7
- package/src/Switch/Switch.test.tsx +102 -3
- package/src/Switch/Switch.tsx +20 -7
- package/src/Table/BaseTable.tsx +2 -1
- package/src/Table/Table.test.tsx +36 -0
- package/src/Table/TableBody.tsx +15 -2
- package/src/Table/TableFooter.tsx +15 -2
- package/src/Table/TableHeader.tsx +15 -2
- package/src/TextArea/TextArea.test.tsx +3 -3
- package/src/TextInput/TextInput.test.tsx +3 -3
- package/src/Timestamp/Timestamp.test.tsx +52 -0
- package/src/Timestamp/Timestamp.tsx +30 -16
- package/src/Tokenizer/Tokenizer.test.tsx +54 -0
- package/src/Tokenizer/Tokenizer.tsx +5 -4
- package/src/Tooltip/Tooltip.doc.mjs +6 -6
- package/src/Tooltip/useTooltip.doc.mjs +5 -5
- package/src/Tooltip/useTooltip.tsx +12 -2
- package/src/TopNav/TopNav.test.tsx +23 -7
- package/src/TopNav/TopNavMegaMenuFeaturedCard.tsx +9 -2
- package/src/__tests__/TestIcon.tsx +26 -0
- package/src/__tests__/fastRoleQueries.ts +66 -0
- package/src/docs-types.ts +9 -1
- package/src/hooks/index.ts +3 -0
- package/src/hooks/useHotkeys.doc.mjs +52 -0
- package/src/hooks/useHotkeys.test.ts +245 -0
- package/src/hooks/useHotkeys.ts +203 -0
- package/src/hooks/useInteractiveRole.ts +12 -4
- package/src/hooks/useStreamingText.test.ts +54 -19
- package/src/hooks/useStreamingText.ts +16 -5
- package/src/hooks/useTreeFocus.test.tsx +1 -3
- package/src/reset.css +29 -0
- package/src/utils/composeEventHandlers.test.ts +71 -0
- package/src/utils/composeEventHandlers.ts +44 -0
- package/src/utils/index.ts +1 -0
- package/src/utils/mergeProps.test.ts +166 -0
- package/src/utils/sharedResizeObserver.test.ts +2 -2
- package/dist/Carousel/carousel.markers.stylex.d.ts +0 -7
- package/dist/Carousel/carousel.markers.stylex.d.ts.map +0 -1
- package/dist/Carousel/carousel.markers.stylex.js +0 -12
- package/src/Carousel/carousel.markers.stylex.ts +0 -10
|
@@ -89,7 +89,7 @@ export interface AlertDialogProps extends BaseProps<HTMLDialogElement> {
|
|
|
89
89
|
* />
|
|
90
90
|
* ```
|
|
91
91
|
*/
|
|
92
|
-
export declare function AlertDialog({ ref, isOpen, isInline, onOpenChange, title, description, cancelLabel, actionLabel, actionVariant, isActionLoading, onAction, width, xstyle, className, style, 'data-testid': testId, }: AlertDialogProps): React.JSX.Element;
|
|
92
|
+
export declare function AlertDialog({ ref, isOpen, isInline, onOpenChange, title, description, cancelLabel, actionLabel, actionVariant, isActionLoading, onAction, width, xstyle, className, style, 'data-testid': testId, ...rest }: AlertDialogProps): React.JSX.Element;
|
|
93
93
|
export declare namespace AlertDialog {
|
|
94
94
|
var displayName: string;
|
|
95
95
|
}
|
|
@@ -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;AAQhD,OAAO,EAAS,KAAK,aAAa,EAAC,MAAM,WAAW,CAAC;AACrD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAI5C,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;;;;OAIG;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;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,GAAG,EACH,MAAM,EACN,QAAQ,EACR,YAAY,EACZ,KAAK,EACL,WAAW,EACX,WAAsB,EACtB,WAAW,EACX,aAA6B,EAC7B,eAAe,EACf,QAAQ,EACR,KAAW,EACX,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"AlertDialog.d.ts","sourceRoot":"","sources":["../../src/AlertDialog/AlertDialog.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAA2B,MAAM,OAAO,CAAC;AAQhD,OAAO,EAAS,KAAK,aAAa,EAAC,MAAM,WAAW,CAAC;AACrD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAI5C,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;;;;OAIG;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;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,GAAG,EACH,MAAM,EACN,QAAQ,EACR,YAAY,EACZ,KAAK,EACL,WAAW,EACX,WAAsB,EACtB,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,qBAsDlB;yBAxEe,WAAW"}
|
|
@@ -26,7 +26,7 @@ import { Text } from "../Text/Text.js";
|
|
|
26
26
|
import { Button } from "../Button/index.js";
|
|
27
27
|
import { mergeProps } from "../utils/index.js";
|
|
28
28
|
import { themeProps } from "../utils/themeProps.js";
|
|
29
|
-
import {
|
|
29
|
+
import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
|
|
30
30
|
/**
|
|
31
31
|
* A confirmation dialog for destructive or irreversible actions.
|
|
32
32
|
*
|
|
@@ -62,14 +62,16 @@ export function AlertDialog({
|
|
|
62
62
|
xstyle,
|
|
63
63
|
className,
|
|
64
64
|
style,
|
|
65
|
-
'data-testid': testId
|
|
65
|
+
'data-testid': testId,
|
|
66
|
+
...rest
|
|
66
67
|
}) {
|
|
67
68
|
const titleId = useId();
|
|
68
69
|
const descriptionId = useId();
|
|
69
70
|
const handleCancel = useCallback(() => {
|
|
70
71
|
onOpenChange(false);
|
|
71
72
|
}, [onOpenChange]);
|
|
72
|
-
return /*#__PURE__*/
|
|
73
|
+
return /*#__PURE__*/_jsxDEV(Dialog, {
|
|
74
|
+
...rest,
|
|
73
75
|
ref: ref,
|
|
74
76
|
isOpen: isOpen,
|
|
75
77
|
isInline: isInline,
|
|
@@ -85,36 +87,36 @@ export function AlertDialog({
|
|
|
85
87
|
}),
|
|
86
88
|
xstyle: xstyle,
|
|
87
89
|
"data-testid": testId,
|
|
88
|
-
children: /*#__PURE__*/
|
|
89
|
-
content: /*#__PURE__*/
|
|
90
|
-
children: [/*#__PURE__*/
|
|
90
|
+
children: /*#__PURE__*/_jsxDEV(Layout, {
|
|
91
|
+
content: /*#__PURE__*/_jsxDEV(LayoutContent, {
|
|
92
|
+
children: [/*#__PURE__*/_jsxDEV(Heading, {
|
|
91
93
|
level: 2,
|
|
92
94
|
id: titleId,
|
|
93
95
|
children: title
|
|
94
|
-
}), /*#__PURE__*/
|
|
96
|
+
}, void 0, false), /*#__PURE__*/_jsxDEV(Text, {
|
|
95
97
|
type: "body",
|
|
96
98
|
color: "secondary",
|
|
97
99
|
id: descriptionId,
|
|
98
100
|
children: description
|
|
99
|
-
})]
|
|
100
|
-
}),
|
|
101
|
-
footer: /*#__PURE__*/
|
|
102
|
-
children: /*#__PURE__*/
|
|
101
|
+
}, void 0, false)]
|
|
102
|
+
}, void 0, true),
|
|
103
|
+
footer: /*#__PURE__*/_jsxDEV(LayoutFooter, {
|
|
104
|
+
children: /*#__PURE__*/_jsxDEV(HStack, {
|
|
103
105
|
gap: 2,
|
|
104
106
|
hAlign: "end",
|
|
105
|
-
children: [/*#__PURE__*/
|
|
107
|
+
children: [/*#__PURE__*/_jsxDEV(Button, {
|
|
106
108
|
variant: "ghost",
|
|
107
109
|
label: cancelLabel,
|
|
108
110
|
onClick: handleCancel
|
|
109
|
-
}), /*#__PURE__*/
|
|
111
|
+
}, void 0, false), /*#__PURE__*/_jsxDEV(Button, {
|
|
110
112
|
variant: actionVariant,
|
|
111
113
|
label: actionLabel,
|
|
112
114
|
onClick: onAction,
|
|
113
115
|
isLoading: isActionLoading
|
|
114
|
-
})]
|
|
115
|
-
})
|
|
116
|
-
})
|
|
117
|
-
})
|
|
118
|
-
});
|
|
116
|
+
}, void 0, false)]
|
|
117
|
+
}, void 0, true)
|
|
118
|
+
}, void 0, false)
|
|
119
|
+
}, void 0, false)
|
|
120
|
+
}, void 0, false);
|
|
119
121
|
}
|
|
120
122
|
AlertDialog.displayName = 'AlertDialog';
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
*/
|
|
16
16
|
import { useState, useCallback, useMemo } from 'react';
|
|
17
17
|
import { AlertDialog } from "./AlertDialog.js";
|
|
18
|
-
import {
|
|
18
|
+
import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
|
|
19
19
|
/**
|
|
20
20
|
* Imperative alert dialog — show/hide without managing state.
|
|
21
21
|
*
|
|
@@ -54,7 +54,7 @@ export function useImperativeAlertDialog() {
|
|
|
54
54
|
if (!options) {
|
|
55
55
|
return null;
|
|
56
56
|
}
|
|
57
|
-
return /*#__PURE__*/
|
|
57
|
+
return /*#__PURE__*/_jsxDEV(AlertDialog, {
|
|
58
58
|
...options,
|
|
59
59
|
isOpen: isOpen,
|
|
60
60
|
onOpenChange: open => {
|
|
@@ -62,7 +62,7 @@ export function useImperativeAlertDialog() {
|
|
|
62
62
|
setIsOpen(false);
|
|
63
63
|
}
|
|
64
64
|
}
|
|
65
|
-
});
|
|
65
|
+
}, void 0, false);
|
|
66
66
|
}, [isOpen, options]);
|
|
67
67
|
return {
|
|
68
68
|
show,
|
|
@@ -214,7 +214,7 @@ export interface AppShellProps extends BaseProps<HTMLDivElement> {
|
|
|
214
214
|
* </AppShell>
|
|
215
215
|
* ```
|
|
216
216
|
*/
|
|
217
|
-
export declare function AppShell({ variant, banner, children, contentPadding, 'data-testid': dataTestId, height, mobileNav, sideNav, topNav, xstyle, className, style, ref, }: AppShellProps): React.JSX.Element;
|
|
217
|
+
export declare function AppShell({ variant, banner, children, contentPadding, 'data-testid': dataTestId, height, mobileNav, sideNav, topNav, xstyle, className, style, ref, ...rest }: AppShellProps): React.JSX.Element;
|
|
218
218
|
export declare namespace AppShell {
|
|
219
219
|
var displayName: string;
|
|
220
220
|
}
|
|
@@ -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,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAmBf,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAChD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAkC5C;;;;;;GAMG;AACH,MAAM,MAAM,kBAAkB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AAE7D;;;;;;;GAOG;AACH;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,IAAI,CAAC;IACX,OAAO,EAAE,IAAI,CAAC;IACd,OAAO,EAAE,IAAI,CAAC;IACd,QAAQ,EAAE,IAAI,CAAC;CAChB;AAED;;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;;;OAGG;IACH,UAAU,CAAC,EAAE,kBAAkB,CAAC;IAEhC;;;;;;;;;OASG;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;AAkKD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,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,
|
|
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,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAmBf,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAChD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAkC5C;;;;;;GAMG;AACH,MAAM,MAAM,kBAAkB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AAE7D;;;;;;;GAOG;AACH;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,IAAI,CAAC;IACX,OAAO,EAAE,IAAI,CAAC;IACd,OAAO,EAAE,IAAI,CAAC;IACd,QAAQ,EAAE,IAAI,CAAC;CAChB;AAED;;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;;;OAGG;IACH,UAAU,CAAC,EAAE,kBAAkB,CAAC;IAEhC;;;;;;;;;OASG;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;AAkKD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,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,qBAgXf;yBA/Xe,QAAQ"}
|
|
@@ -37,19 +37,19 @@ import { mergeProps, mergeRefs, isRenderable } from "../utils/index.js";
|
|
|
37
37
|
import { useMediaQuery } from "../hooks/useMediaQuery.js";
|
|
38
38
|
import { observeResize, unobserveResize } from "../utils/sharedResizeObserver.js";
|
|
39
39
|
import { themeProps } from "../utils/themeProps.js";
|
|
40
|
-
import {
|
|
40
|
+
import { jsxDEV as _jsxDEV, Fragment as _Fragment } from "react/jsx-dev-runtime";
|
|
41
41
|
const HasActivity = typeof React.Activity !== 'undefined';
|
|
42
42
|
const ActivityWrapper = HasActivity ? ({
|
|
43
43
|
mode,
|
|
44
44
|
children
|
|
45
|
-
}) => /*#__PURE__*/
|
|
45
|
+
}) => /*#__PURE__*/_jsxDEV(React.Activity, {
|
|
46
46
|
mode: mode,
|
|
47
47
|
children: children
|
|
48
|
-
}) : ({
|
|
48
|
+
}, void 0, false) : ({
|
|
49
49
|
children
|
|
50
|
-
}) => /*#__PURE__*/
|
|
50
|
+
}) => /*#__PURE__*/_jsxDEV(_Fragment, {
|
|
51
51
|
children: children
|
|
52
|
-
});
|
|
52
|
+
}, void 0, false);
|
|
53
53
|
|
|
54
54
|
// =============================================================================
|
|
55
55
|
// Constants
|
|
@@ -218,7 +218,8 @@ export function AppShell({
|
|
|
218
218
|
xstyle,
|
|
219
219
|
className,
|
|
220
220
|
style,
|
|
221
|
-
ref
|
|
221
|
+
ref,
|
|
222
|
+
...rest
|
|
222
223
|
}) {
|
|
223
224
|
// =========================================================================
|
|
224
225
|
// Parse mobileNav prop — normalize to config, custom element, or disabled
|
|
@@ -327,39 +328,39 @@ export function AppShell({
|
|
|
327
328
|
const mobileContentValue = hasSideNav && mobileNavHasToggle ?
|
|
328
329
|
/*#__PURE__*/
|
|
329
330
|
// eslint-disable-next-line @eslint-react/no-unstable-context-value -- context transports ReactNode; instability is inherent
|
|
330
|
-
|
|
331
|
+
_jsxDEV(SideNavRenderContext, {
|
|
331
332
|
value: "drawer-content",
|
|
332
333
|
children: sideNav
|
|
333
|
-
}) : null;
|
|
334
|
+
}, void 0, false) : null;
|
|
334
335
|
const drawerMobileContentValue = hasSideNav ?
|
|
335
336
|
/*#__PURE__*/
|
|
336
337
|
// eslint-disable-next-line @eslint-react/no-unstable-context-value -- context transports ReactNode; instability is inherent
|
|
337
|
-
|
|
338
|
+
_jsxDEV(SideNavRenderContext, {
|
|
338
339
|
value: "drawer-content",
|
|
339
340
|
children: sideNav
|
|
340
|
-
}) : null;
|
|
341
|
-
const topNavContent = hasTopNav ? isBelowBreakpoint && !mobileNavDisabled && mobileNavReactNode == null ? /*#__PURE__*/
|
|
341
|
+
}, void 0, false) : null;
|
|
342
|
+
const topNavContent = hasTopNav ? isBelowBreakpoint && !mobileNavDisabled && mobileNavReactNode == null ? /*#__PURE__*/_jsxDEV(TopNavMobileContentContext, {
|
|
342
343
|
value: mobileContentValue,
|
|
343
|
-
children: /*#__PURE__*/
|
|
344
|
+
children: /*#__PURE__*/_jsxDEV(TopNavRenderContext, {
|
|
344
345
|
value: "mobile-bar",
|
|
345
346
|
children: topNav
|
|
346
|
-
})
|
|
347
|
-
}) : topNav : null;
|
|
348
|
-
const headerInner = hasTopNav || hasBanner ? /*#__PURE__*/
|
|
347
|
+
}, void 0, false)
|
|
348
|
+
}, void 0, false) : topNav : null;
|
|
349
|
+
const headerInner = hasTopNav || hasBanner ? /*#__PURE__*/_jsxDEV(LayoutHeader, {
|
|
349
350
|
padding: 0,
|
|
350
351
|
hasDivider: navHasDividers && hasTopNav,
|
|
351
|
-
children: [hasBanner && /*#__PURE__*/
|
|
352
|
+
children: [hasBanner && /*#__PURE__*/_jsxDEV("div", {
|
|
352
353
|
...stylex.props(styles.banner, navAreaStyle),
|
|
353
354
|
children: banner
|
|
354
|
-
}), hasTopNav && topNavContent]
|
|
355
|
-
}) : undefined;
|
|
356
|
-
const headerContent = headerInner != null ? /*#__PURE__*/
|
|
355
|
+
}, void 0, false), hasTopNav && topNavContent]
|
|
356
|
+
}, void 0, true) : undefined;
|
|
357
|
+
const headerContent = headerInner != null ? /*#__PURE__*/_jsxDEV("div", {
|
|
357
358
|
ref: headerRef,
|
|
358
359
|
...mergeProps(themeProps('app-shell-header', {
|
|
359
360
|
variant
|
|
360
361
|
}), stylex.props(navAreaStyle, isAuto && styles.headerSticky)),
|
|
361
362
|
children: headerInner
|
|
362
|
-
}) : undefined;
|
|
363
|
+
}, void 0, false) : undefined;
|
|
363
364
|
|
|
364
365
|
// =========================================================================
|
|
365
366
|
// Build sideNav content
|
|
@@ -369,7 +370,7 @@ export function AppShell({
|
|
|
369
370
|
// below the header while the main content scrolls. A wrapper div applies
|
|
370
371
|
// the sticky behavior since LayoutPanel doesn't accept style/className.
|
|
371
372
|
// =========================================================================
|
|
372
|
-
const sideNavPanel = showSideNavInline ? /*#__PURE__*/
|
|
373
|
+
const sideNavPanel = showSideNavInline ? /*#__PURE__*/_jsxDEV(LayoutPanel, {
|
|
373
374
|
padding: 0,
|
|
374
375
|
hasDivider: navHasDividers,
|
|
375
376
|
isScrollable: isFill,
|
|
@@ -378,36 +379,36 @@ export function AppShell({
|
|
|
378
379
|
}),
|
|
379
380
|
xstyle: [navAreaStyle, isAuto && stickyBgStyle, isAuto && styles.panelAutoFill],
|
|
380
381
|
children: sideNav
|
|
381
|
-
}) : undefined;
|
|
382
|
-
const sideNavContent = sideNavPanel != null && isAuto ? /*#__PURE__*/
|
|
382
|
+
}, void 0, false) : undefined;
|
|
383
|
+
const sideNavContent = sideNavPanel != null && isAuto ? /*#__PURE__*/_jsxDEV("div", {
|
|
383
384
|
...{
|
|
384
385
|
className: "x2lah0s x7giv3 x7wzq59 xepuwc7 x16zugyo x78zum5 xdt5ytf"
|
|
385
386
|
},
|
|
386
387
|
children: sideNavPanel
|
|
387
|
-
}) : sideNavPanel;
|
|
388
|
+
}, void 0, false) : sideNavPanel;
|
|
388
389
|
|
|
389
390
|
// =========================================================================
|
|
390
391
|
// Build main content
|
|
391
392
|
// =========================================================================
|
|
392
393
|
const shouldElevateWithCorner = isElevated && hasTopNav && showSideNavInline;
|
|
393
|
-
const mainInner = /*#__PURE__*/
|
|
394
|
+
const mainInner = /*#__PURE__*/_jsxDEV(LayoutContent, {
|
|
394
395
|
padding: contentPadding ?? 0,
|
|
395
396
|
role: "main",
|
|
396
397
|
id: MAIN_CONTENT_ID,
|
|
397
398
|
isScrollable: isFill,
|
|
398
399
|
xstyle: contentAreaStyle,
|
|
399
400
|
children: children
|
|
400
|
-
});
|
|
401
|
-
const mainContent = shouldElevateWithCorner ? /*#__PURE__*/
|
|
401
|
+
}, void 0, false);
|
|
402
|
+
const mainContent = shouldElevateWithCorner ? /*#__PURE__*/_jsxDEV("div", {
|
|
402
403
|
...{
|
|
403
404
|
className: "x1n2onr6 x78zum5 x98rzlu x2lwn1j x5yr21d"
|
|
404
405
|
},
|
|
405
|
-
children: [/*#__PURE__*/
|
|
406
|
+
children: [/*#__PURE__*/_jsxDEV("div", {
|
|
406
407
|
...{
|
|
407
408
|
className: "x10l6tqk x10a8y8t x10xzikg x183tx6i x47corl"
|
|
408
409
|
}
|
|
409
|
-
}), mainInner]
|
|
410
|
-
}) : mainInner;
|
|
410
|
+
}, void 0, false), mainInner]
|
|
411
|
+
}, void 0, true) : mainInner;
|
|
411
412
|
|
|
412
413
|
// =========================================================================
|
|
413
414
|
// Render
|
|
@@ -423,63 +424,64 @@ export function AppShell({
|
|
|
423
424
|
|
|
424
425
|
// For sidenav-only layouts with no TopNav, render the sideNav in topbar
|
|
425
426
|
// mode — it shows heading + footer icons horizontally, with the hamburger
|
|
426
|
-
const autoMobileTopBar = shouldShowAutoToggle && !hasTopNav && hasSideNav ? /*#__PURE__*/
|
|
427
|
+
const autoMobileTopBar = shouldShowAutoToggle && !hasTopNav && hasSideNav ? /*#__PURE__*/_jsxDEV("div", {
|
|
427
428
|
...mergeProps(themeProps('app-shell-header', {
|
|
428
429
|
variant
|
|
429
430
|
}), stylex.props(navAreaStyle, isAuto && styles.headerSticky)),
|
|
430
|
-
children: /*#__PURE__*/
|
|
431
|
+
children: /*#__PURE__*/_jsxDEV(LayoutHeader, {
|
|
431
432
|
padding: 0,
|
|
432
433
|
hasDivider: navHasDividers,
|
|
433
|
-
children: /*#__PURE__*/
|
|
434
|
+
children: /*#__PURE__*/_jsxDEV("div", {
|
|
434
435
|
...{
|
|
435
436
|
className: "x78zum5 x6s0dn4 x1k15mir xf314gf"
|
|
436
437
|
},
|
|
437
438
|
role: "navigation",
|
|
438
439
|
"aria-label": "Mobile navigation",
|
|
439
|
-
children: [/*#__PURE__*/
|
|
440
|
+
children: [/*#__PURE__*/_jsxDEV(SideNavRenderContext, {
|
|
440
441
|
value: "topbar",
|
|
441
442
|
children: sideNav
|
|
442
|
-
}), /*#__PURE__*/
|
|
443
|
-
})
|
|
444
|
-
})
|
|
445
|
-
}) : undefined;
|
|
446
|
-
return /*#__PURE__*/
|
|
443
|
+
}, void 0, false), /*#__PURE__*/_jsxDEV(MobileNavToggle, {}, void 0, false)]
|
|
444
|
+
}, void 0, true)
|
|
445
|
+
}, void 0, false)
|
|
446
|
+
}, void 0, false) : undefined;
|
|
447
|
+
return /*#__PURE__*/_jsxDEV(AppShellMobileContext, {
|
|
447
448
|
value: mobileContextValue,
|
|
448
|
-
children: /*#__PURE__*/
|
|
449
|
+
children: /*#__PURE__*/_jsxDEV("div", {
|
|
450
|
+
...rest,
|
|
449
451
|
ref: mergeRefs(ref, shellRef),
|
|
450
452
|
"data-testid": dataTestId,
|
|
451
453
|
...mergeProps(themeProps('app-shell', {
|
|
452
454
|
variant
|
|
453
455
|
}), stylex.props(styles.root, variant === 'wash' ? styles.variantWash : variant === 'surface' ? styles.variantSurface : variant === 'section' ? styles.variantSection : styles.variantElevated, isFill ? styles.rootFill : styles.rootAuto, xstyle), className, style),
|
|
454
|
-
children: [/*#__PURE__*/
|
|
456
|
+
children: [/*#__PURE__*/_jsxDEV("a", {
|
|
455
457
|
href: `#${MAIN_CONTENT_ID}`,
|
|
456
458
|
...{
|
|
457
459
|
className: "x10l6tqk x1xrnuwo x1i1rx1s x1jqxupm xjm9jq1 x15cytp8 xt970qd xh2mrf5 xnjsko4 x1cf3d6k xkdpibf x1y5lnwp xb3r6kr xomzh7y x1hyvwdk x1rsz1da xuxw1ft x1hbpcn8 xc342km x13vifvy x1rw3289 x1o0tod xodanix x10xzikg xjse4m1 x1q2oy4v x1hl2dhg x2mo6ok xjm74w1"
|
|
458
460
|
},
|
|
459
461
|
"data-testid": "skip-to-content",
|
|
460
462
|
children: "Skip to content"
|
|
461
|
-
}), /*#__PURE__*/
|
|
463
|
+
}, void 0, false), /*#__PURE__*/_jsxDEV(Layout, {
|
|
462
464
|
height: height,
|
|
463
465
|
padding: 0,
|
|
464
|
-
header: /*#__PURE__*/
|
|
466
|
+
header: /*#__PURE__*/_jsxDEV(_Fragment, {
|
|
465
467
|
children: [headerContent, autoMobileTopBar]
|
|
466
|
-
}),
|
|
468
|
+
}, void 0, true),
|
|
467
469
|
start: sideNavContent,
|
|
468
470
|
content: mainContent
|
|
469
|
-
}), shouldRenderMobileNavReactNode && mobileNavReactNode, shouldRenderConfigContent && mobileNavConfigContent, isBelowBreakpoint && !mobileNavDisabled && mobileNavReactNode == null && !mobileNavConfigContent && /*#__PURE__*/
|
|
471
|
+
}, void 0, false), shouldRenderMobileNavReactNode && mobileNavReactNode, shouldRenderConfigContent && mobileNavConfigContent, isBelowBreakpoint && !mobileNavDisabled && mobileNavReactNode == null && !mobileNavConfigContent && /*#__PURE__*/_jsxDEV(ActivityWrapper, {
|
|
470
472
|
mode: isMobileNavOpen ? 'visible' : 'hidden',
|
|
471
|
-
children: [hasSideNav && !hasTopNav && /*#__PURE__*/
|
|
473
|
+
children: [hasSideNav && !hasTopNav && /*#__PURE__*/_jsxDEV(SideNavRenderContext, {
|
|
472
474
|
value: "drawer",
|
|
473
475
|
children: sideNav
|
|
474
|
-
}), hasTopNav && /*#__PURE__*/
|
|
476
|
+
}, void 0, false), hasTopNav && /*#__PURE__*/_jsxDEV(TopNavMobileContentContext, {
|
|
475
477
|
value: drawerMobileContentValue,
|
|
476
|
-
children: /*#__PURE__*/
|
|
478
|
+
children: /*#__PURE__*/_jsxDEV(TopNavRenderContext, {
|
|
477
479
|
value: "drawer",
|
|
478
480
|
children: topNav
|
|
479
|
-
})
|
|
480
|
-
})]
|
|
481
|
-
})]
|
|
482
|
-
})
|
|
483
|
-
});
|
|
481
|
+
}, void 0, false)
|
|
482
|
+
}, void 0, false)]
|
|
483
|
+
}, void 0, true)]
|
|
484
|
+
}, void 0, true)
|
|
485
|
+
}, void 0, false);
|
|
484
486
|
}
|
|
485
487
|
AppShell.displayName = 'AppShell';
|
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @file AspectRatio.tsx
|
|
3
3
|
* @input Uses React, stylex
|
|
4
|
-
* @output Exports AspectRatio component
|
|
4
|
+
* @output Exports AspectRatio component, AspectRatioProps, AspectRatioShape, AspectRatioFit
|
|
5
5
|
* @position AspectRatio component; maintains a specific aspect ratio for its children
|
|
6
6
|
*
|
|
7
7
|
* SYNC: When modified, update these files to stay in sync:
|
|
8
8
|
* - /packages/core/src/AspectRatio/AspectRatio.doc.mjs
|
|
9
9
|
* - /packages/core/src/AspectRatio/AspectRatio.test.tsx
|
|
10
|
+
* - /packages/core/src/reset.css (AspectRatio fit baseline rules)
|
|
10
11
|
* - /apps/storybook/stories/AspectRatio.stories.tsx
|
|
11
12
|
* - /packages/cli/templates/blocks/components/AspectRatio/ (showcase blocks)
|
|
12
13
|
*/
|
|
@@ -19,6 +20,15 @@ import type { BaseProps } from '../BaseProps';
|
|
|
19
20
|
* this renders a circle at `ratio={1}` and an oval at non-square ratios.
|
|
20
21
|
*/
|
|
21
22
|
export type AspectRatioShape = 'rectangle' | 'ellipse';
|
|
23
|
+
/**
|
|
24
|
+
* How the child is sized and positioned inside the ratio box.
|
|
25
|
+
* - `cover`: the child fills the box; media is cropped to preserve its own
|
|
26
|
+
* aspect ratio (`object-fit: cover`).
|
|
27
|
+
* - `contain`: the child fills the box; media is letterboxed to stay fully
|
|
28
|
+
* visible (`object-fit: contain`).
|
|
29
|
+
* - `center`: the child keeps its natural size and sits centered in the box.
|
|
30
|
+
*/
|
|
31
|
+
export type AspectRatioFit = 'cover' | 'contain' | 'center';
|
|
22
32
|
export interface AspectRatioProps extends BaseProps<HTMLDivElement> {
|
|
23
33
|
/** Ref forwarded to the root element */
|
|
24
34
|
ref?: React.Ref<HTMLDivElement>;
|
|
@@ -30,19 +40,43 @@ export interface AspectRatioProps extends BaseProps<HTMLDivElement> {
|
|
|
30
40
|
* The shape of the container. Both shapes respect the provided `ratio`.
|
|
31
41
|
* - `rectangle` (default): a standard rectangular container.
|
|
32
42
|
* - `ellipse`: clips the container to an ellipse — a circle when `ratio={1}`,
|
|
33
|
-
* or an oval at other ratios. Pair with
|
|
34
|
-
*
|
|
43
|
+
* or an oval at other ratios. Pair with `fit="cover"` so the media fills
|
|
44
|
+
* the clipped container.
|
|
35
45
|
*
|
|
36
46
|
* @default 'rectangle'
|
|
37
47
|
*
|
|
38
48
|
* @example
|
|
39
49
|
* ```
|
|
40
|
-
* <AspectRatio ratio={1} shape="ellipse">
|
|
41
|
-
* <img src="avatar.jpg" alt=""
|
|
50
|
+
* <AspectRatio ratio={1} shape="ellipse" fit="cover">
|
|
51
|
+
* <img src="avatar.jpg" alt="" />
|
|
42
52
|
* </AspectRatio>
|
|
43
53
|
* ```
|
|
44
54
|
*/
|
|
45
55
|
shape?: AspectRatioShape;
|
|
56
|
+
/**
|
|
57
|
+
* How the child is laid out inside the ratio box, so the child does not
|
|
58
|
+
* have to declare `width`/`height`/`objectFit` itself.
|
|
59
|
+
* - `cover`: child fills the box; media is cropped (`object-fit: cover`).
|
|
60
|
+
* - `contain`: child fills the box; media is letterboxed
|
|
61
|
+
* (`object-fit: contain`).
|
|
62
|
+
* - `center`: child keeps its natural size, centered in the box.
|
|
63
|
+
*
|
|
64
|
+
* `cover`/`contain` child sizing ships as zero-specificity baseline rules
|
|
65
|
+
* in `reset.css`, keyed on the `data-astryx-aspect-ratio-override`
|
|
66
|
+
* attribute the component sets on the child's direct parent. Any styles
|
|
67
|
+
* the child sets itself still win, so children that already size
|
|
68
|
+
* themselves keep their behavior. When omitted, the child is left
|
|
69
|
+
* unstyled (the pre-existing contract). `fit` is structural, not visual,
|
|
70
|
+
* so it is not exposed on the theming surface.
|
|
71
|
+
*
|
|
72
|
+
* @example
|
|
73
|
+
* ```
|
|
74
|
+
* <AspectRatio ratio={16 / 9} fit="cover">
|
|
75
|
+
* <img src="image.jpg" alt="Widescreen image" />
|
|
76
|
+
* </AspectRatio>
|
|
77
|
+
* ```
|
|
78
|
+
*/
|
|
79
|
+
fit?: AspectRatioFit;
|
|
46
80
|
/**
|
|
47
81
|
* Content to render inside the aspect ratio container.
|
|
48
82
|
* The child element will be positioned absolutely to fill the container.
|
|
@@ -56,25 +90,29 @@ export interface AspectRatioProps extends BaseProps<HTMLDivElement> {
|
|
|
56
90
|
* is positioned absolutely to fill the container, which is useful for images,
|
|
57
91
|
* videos, embeds, and placeholders.
|
|
58
92
|
*
|
|
93
|
+
* Use `fit` to let the component size the child: `cover`/`contain` stretch
|
|
94
|
+
* the child to fill the box (cropping or letterboxing media), `center` keeps
|
|
95
|
+
* the child at its natural size. Without `fit`, the child styles itself.
|
|
96
|
+
*
|
|
59
97
|
* Use `shape="ellipse"` to clip the container into an ellipse — a circle at
|
|
60
98
|
* `ratio={1}` or an oval at other ratios. Both shapes respect the provided
|
|
61
99
|
* `ratio`.
|
|
62
100
|
*
|
|
63
101
|
* @example
|
|
64
102
|
* ```
|
|
65
|
-
* <AspectRatio ratio={16 / 9}>
|
|
66
|
-
* <img src="image.jpg" alt="Widescreen image"
|
|
103
|
+
* <AspectRatio ratio={16 / 9} fit="cover">
|
|
104
|
+
* <img src="image.jpg" alt="Widescreen image" />
|
|
67
105
|
* </AspectRatio>
|
|
68
106
|
* ```
|
|
69
107
|
*
|
|
70
108
|
* @example
|
|
71
109
|
* ```
|
|
72
|
-
* <AspectRatio ratio={1} shape="ellipse">
|
|
73
|
-
* <img src="avatar.jpg" alt=""
|
|
110
|
+
* <AspectRatio ratio={1} shape="ellipse" fit="cover">
|
|
111
|
+
* <img src="avatar.jpg" alt="" />
|
|
74
112
|
* </AspectRatio>
|
|
75
113
|
* ```
|
|
76
114
|
*/
|
|
77
|
-
export declare function AspectRatio({ ratio, shape, children, xstyle, className, style, ref, ...props }: AspectRatioProps): import("react").JSX.Element;
|
|
115
|
+
export declare function AspectRatio({ ratio, shape, fit, children, xstyle, className, style, ref, ...props }: AspectRatioProps): import("react").JSX.Element;
|
|
78
116
|
export declare namespace AspectRatio {
|
|
79
117
|
var displayName: string;
|
|
80
118
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AspectRatio.d.ts","sourceRoot":"","sources":["../../src/AspectRatio/AspectRatio.tsx"],"names":[],"mappings":"AAIA
|
|
1
|
+
{"version":3,"file":"AspectRatio.d.ts","sourceRoot":"","sources":["../../src/AspectRatio/AspectRatio.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAErC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAI5C;;;;;GAKG;AACH,MAAM,MAAM,gBAAgB,GAAG,WAAW,GAAG,SAAS,CAAC;AAEvD;;;;;;;GAOG;AACH,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,SAAS,GAAG,QAAQ,CAAC;AAE5D,MAAM,WAAW,gBAAiB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACjE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;;;;;;;;;;;;;OAeG;IACH,KAAK,CAAC,EAAE,gBAAgB,CAAC;IAEzB;;;;;;;;;;;;;;;;;;;;;;OAsBG;IACH,GAAG,CAAC,EAAE,cAAc,CAAC;IAErB;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAkCD;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,KAAmB,EACnB,GAAG,EACH,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,gBAAgB,+BA2BlB;yBArCe,WAAW"}
|
|
@@ -5,12 +5,13 @@
|
|
|
5
5
|
/**
|
|
6
6
|
* @file AspectRatio.tsx
|
|
7
7
|
* @input Uses React, stylex
|
|
8
|
-
* @output Exports AspectRatio component
|
|
8
|
+
* @output Exports AspectRatio component, AspectRatioProps, AspectRatioShape, AspectRatioFit
|
|
9
9
|
* @position AspectRatio component; maintains a specific aspect ratio for its children
|
|
10
10
|
*
|
|
11
11
|
* SYNC: When modified, update these files to stay in sync:
|
|
12
12
|
* - /packages/core/src/AspectRatio/AspectRatio.doc.mjs
|
|
13
13
|
* - /packages/core/src/AspectRatio/AspectRatio.test.tsx
|
|
14
|
+
* - /packages/core/src/reset.css (AspectRatio fit baseline rules)
|
|
14
15
|
* - /apps/storybook/stories/AspectRatio.stories.tsx
|
|
15
16
|
* - /packages/cli/templates/blocks/components/AspectRatio/ (showcase blocks)
|
|
16
17
|
*/
|
|
@@ -24,7 +25,16 @@ import { themeProps } from "../utils/themeProps.js";
|
|
|
24
25
|
* - `ellipse`: clips the container to an ellipse. Combined with the `ratio`,
|
|
25
26
|
* this renders a circle at `ratio={1}` and an oval at non-square ratios.
|
|
26
27
|
*/
|
|
27
|
-
|
|
28
|
+
|
|
29
|
+
/**
|
|
30
|
+
* How the child is sized and positioned inside the ratio box.
|
|
31
|
+
* - `cover`: the child fills the box; media is cropped to preserve its own
|
|
32
|
+
* aspect ratio (`object-fit: cover`).
|
|
33
|
+
* - `contain`: the child fills the box; media is letterboxed to stay fully
|
|
34
|
+
* visible (`object-fit: contain`).
|
|
35
|
+
* - `center`: the child keeps its natural size and sits centered in the box.
|
|
36
|
+
*/
|
|
37
|
+
import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
|
|
28
38
|
const styles = {
|
|
29
39
|
container: {
|
|
30
40
|
kVAEAm: "x1n2onr6",
|
|
@@ -47,27 +57,32 @@ const styles = {
|
|
|
47
57
|
* is positioned absolutely to fill the container, which is useful for images,
|
|
48
58
|
* videos, embeds, and placeholders.
|
|
49
59
|
*
|
|
60
|
+
* Use `fit` to let the component size the child: `cover`/`contain` stretch
|
|
61
|
+
* the child to fill the box (cropping or letterboxing media), `center` keeps
|
|
62
|
+
* the child at its natural size. Without `fit`, the child styles itself.
|
|
63
|
+
*
|
|
50
64
|
* Use `shape="ellipse"` to clip the container into an ellipse — a circle at
|
|
51
65
|
* `ratio={1}` or an oval at other ratios. Both shapes respect the provided
|
|
52
66
|
* `ratio`.
|
|
53
67
|
*
|
|
54
68
|
* @example
|
|
55
69
|
* ```
|
|
56
|
-
* <AspectRatio ratio={16 / 9}>
|
|
57
|
-
* <img src="image.jpg" alt="Widescreen image"
|
|
70
|
+
* <AspectRatio ratio={16 / 9} fit="cover">
|
|
71
|
+
* <img src="image.jpg" alt="Widescreen image" />
|
|
58
72
|
* </AspectRatio>
|
|
59
73
|
* ```
|
|
60
74
|
*
|
|
61
75
|
* @example
|
|
62
76
|
* ```
|
|
63
|
-
* <AspectRatio ratio={1} shape="ellipse">
|
|
64
|
-
* <img src="avatar.jpg" alt=""
|
|
77
|
+
* <AspectRatio ratio={1} shape="ellipse" fit="cover">
|
|
78
|
+
* <img src="avatar.jpg" alt="" />
|
|
65
79
|
* </AspectRatio>
|
|
66
80
|
* ```
|
|
67
81
|
*/
|
|
68
82
|
export function AspectRatio({
|
|
69
83
|
ratio,
|
|
70
84
|
shape = 'rectangle',
|
|
85
|
+
fit,
|
|
71
86
|
children,
|
|
72
87
|
xstyle,
|
|
73
88
|
className,
|
|
@@ -75,7 +90,7 @@ export function AspectRatio({
|
|
|
75
90
|
ref,
|
|
76
91
|
...props
|
|
77
92
|
}) {
|
|
78
|
-
return /*#__PURE__*/
|
|
93
|
+
return /*#__PURE__*/_jsxDEV("div", {
|
|
79
94
|
ref: ref,
|
|
80
95
|
...mergeProps(themeProps('aspect-ratio', {
|
|
81
96
|
shape
|
|
@@ -84,12 +99,18 @@ export function AspectRatio({
|
|
|
84
99
|
aspectRatio: ratio
|
|
85
100
|
}),
|
|
86
101
|
...props,
|
|
87
|
-
children: /*#__PURE__*/
|
|
102
|
+
children: /*#__PURE__*/_jsxDEV("div", {
|
|
103
|
+
"data-astryx-aspect-ratio-override": fit,
|
|
88
104
|
...{
|
|
89
|
-
|
|
90
|
-
|
|
105
|
+
0: {
|
|
106
|
+
className: "x10l6tqk x13vifvy x1o0tod xh8yej3 x5yr21d"
|
|
107
|
+
},
|
|
108
|
+
1: {
|
|
109
|
+
className: "x10l6tqk x13vifvy x1o0tod xh8yej3 x5yr21d x78zum5 x6s0dn4 xl56j7k"
|
|
110
|
+
}
|
|
111
|
+
}[!!(fit === 'center') << 0],
|
|
91
112
|
children: children
|
|
92
|
-
})
|
|
93
|
-
});
|
|
113
|
+
}, void 0, false)
|
|
114
|
+
}, void 0, false);
|
|
94
115
|
}
|
|
95
116
|
AspectRatio.displayName = 'AspectRatio';
|
|
@@ -7,5 +7,5 @@
|
|
|
7
7
|
* SYNC: When modified, update /packages/core/src/AspectRatio/AspectRatio.doc.mjs
|
|
8
8
|
*/
|
|
9
9
|
export { AspectRatio } from './AspectRatio';
|
|
10
|
-
export type { AspectRatioProps, AspectRatioShape } from './AspectRatio';
|
|
10
|
+
export type { AspectRatioProps, AspectRatioShape, AspectRatioFit, } from './AspectRatio';
|
|
11
11
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/AspectRatio/index.ts"],"names":[],"mappings":"AAIA;;;;;;;GAOG;AAEH,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAC1C,YAAY,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/AspectRatio/index.ts"],"names":[],"mappings":"AAIA;;;;;;;GAOG;AAEH,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAC1C,YAAY,EACV,gBAAgB,EAChB,gBAAgB,EAChB,cAAc,GACf,MAAM,eAAe,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../src/Avatar/Avatar.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,EAAoB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AACxD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAsC5C;;GAEG;AACH,KAAK,eAAe,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAExE;;GAEG;AACH,KAAK,iBAAiB,
|
|
1
|
+
{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../src/Avatar/Avatar.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,EAAoB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AACxD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAsC5C;;GAEG;AACH,KAAK,eAAe,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAExE;;GAEG;AACH,KAAK,iBAAiB,GACpB,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;AAEzE;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG,eAAe,GAAG,iBAAiB,CAAC;AAE7D;;GAEG;AACH,wBAAgB,WAAW,CAAC,IAAI,EAAE,UAAU,GAAG,MAAM,CAgBpD;AAqFD,MAAM,WAAW,WAAY,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC5D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AAsCD;;;;;;;;;;;;GAYG;AACH,wBAAgB,MAAM,CAAC,EACrB,GAAG,EACH,aAAa,EAAE,MAAM,EACrB,WAAW,EACX,IAAI,EACJ,IAAc,EACd,GAAG,EACH,MAAM,EACN,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,WAAW,+BAwFb;yBArGe,MAAM"}
|