@astryxdesign/core 0.0.15 → 0.1.0-canary.08d4cf4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +69 -0
- package/README.md +8 -10
- package/dist/AlertDialog/AlertDialog.js +2 -2
- package/dist/AppShell/AppShell.js +5 -5
- package/dist/AspectRatio/AspectRatio.js +2 -2
- package/dist/Avatar/Avatar.js +2 -2
- package/dist/Avatar/AvatarStatusDot.js +2 -2
- package/dist/AvatarGroup/AvatarGroup.js +2 -2
- package/dist/AvatarGroup/AvatarGroupOverflow.js +3 -3
- package/dist/Badge/Badge.js +2 -2
- package/dist/Banner/Banner.d.ts +2 -2
- package/dist/Banner/Banner.js +6 -6
- package/dist/Blockquote/Blockquote.js +2 -2
- package/dist/Breadcrumbs/BreadcrumbItem.js +3 -3
- package/dist/Breadcrumbs/Breadcrumbs.js +2 -2
- package/dist/Button/Button.js +2 -2
- package/dist/ButtonGroup/ButtonGroup.js +2 -2
- package/dist/Calendar/Calendar.js +3 -3
- package/dist/Card/Card.js +2 -2
- package/dist/Carousel/Carousel.js +2 -2
- package/dist/Center/Center.js +2 -2
- package/dist/Chat/ChatComposer.js +2 -2
- package/dist/Chat/ChatComposerDrawer.js +2 -2
- package/dist/Chat/ChatComposerInput.js +2 -2
- package/dist/Chat/ChatLayout.js +2 -2
- package/dist/Chat/ChatLayoutScrollButton.d.ts.map +1 -1
- package/dist/Chat/ChatLayoutScrollButton.js +5 -1
- package/dist/Chat/ChatMessage.js +2 -2
- package/dist/Chat/ChatMessageBubble.js +2 -2
- package/dist/Chat/ChatMessageList.js +2 -2
- package/dist/Chat/ChatMessageMetadata.js +2 -2
- package/dist/Chat/ChatSendButton.js +2 -2
- package/dist/Chat/ChatSystemMessage.js +3 -3
- package/dist/Chat/ChatTokenizedText.js +3 -3
- package/dist/Chat/ChatToolCalls.js +3 -3
- package/dist/Chat/useTriggerMenu.js +2 -2
- package/dist/CheckboxInput/CheckboxInput.js +3 -3
- package/dist/CheckboxList/CheckboxList.js +2 -2
- package/dist/Citation/Citation.js +3 -3
- package/dist/ClickableCard/ClickableCard.js +2 -2
- package/dist/Code/Code.js +2 -2
- package/dist/CodeBlock/CodeBlock.js +2 -2
- package/dist/Collapsible/Collapsible.js +2 -2
- package/dist/CommandPalette/CommandPaletteFooter.js +2 -2
- package/dist/CommandPalette/CommandPaletteGroup.js +2 -2
- package/dist/CommandPalette/CommandPaletteInput.js +2 -2
- package/dist/CommandPalette/CommandPaletteItem.js +2 -2
- package/dist/CommandPalette/CommandPaletteList.js +2 -2
- package/dist/ContextMenu/ContextMenu.js +4 -4
- package/dist/DateInput/DateInput.js +2 -2
- package/dist/DateRangeInput/DateRangeInput.js +2 -2
- package/dist/DateTimeInput/DateTimeInput.js +2 -2
- package/dist/Dialog/Dialog.js +3 -3
- package/dist/Divider/Divider.js +2 -2
- package/dist/DropdownMenu/DropdownMenu.js +4 -4
- package/dist/DropdownMenu/DropdownMenuItem.js +2 -2
- package/dist/DropdownMenu/{renderXDSDropdownItems.d.ts → renderDropdownItems.d.ts} +3 -3
- package/dist/DropdownMenu/renderDropdownItems.d.ts.map +1 -0
- package/dist/DropdownMenu/{renderXDSDropdownItems.js → renderDropdownItems.js} +2 -2
- package/dist/EmptyState/EmptyState.js +2 -2
- package/dist/Field/Field.js +3 -3
- package/dist/Field/FieldLabel.js +2 -2
- package/dist/FieldStatus/FieldStatus.js +2 -2
- package/dist/FileInput/FileInput.js +2 -2
- package/dist/FormLayout/FormLayout.js +2 -2
- package/dist/Grid/Grid.js +3 -3
- package/dist/Grid/GridSpan.js +2 -2
- package/dist/Heading/Heading.js +2 -2
- package/dist/HoverCard/useHoverCard.js +2 -2
- package/dist/Icon/Icon.js +3 -3
- package/dist/InputGroup/InputGroup.js +2 -2
- package/dist/InputGroup/InputGroupText.js +2 -2
- package/dist/Item/Item.js +2 -2
- package/dist/Kbd/Kbd.js +2 -2
- package/dist/Layer/useLayer.d.ts +2 -2
- package/dist/Layout/Layout.js +2 -2
- package/dist/Layout/LayoutContent.js +2 -2
- package/dist/Layout/LayoutFooter.js +2 -2
- package/dist/Layout/LayoutHeader.js +2 -2
- package/dist/Layout/LayoutPanel.js +2 -2
- package/dist/Lightbox/Lightbox.js +2 -2
- package/dist/Link/Link.js +3 -3
- package/dist/List/List.js +2 -2
- package/dist/List/ListItem.js +2 -2
- package/dist/Markdown/Markdown.js +3 -3
- package/dist/MetadataList/MetadataList.js +2 -2
- package/dist/MetadataList/MetadataListItem.js +3 -3
- package/dist/MobileNav/MobileNav.js +2 -2
- package/dist/MultiSelector/MultiSelector.js +2 -2
- package/dist/NavIcon/NavIcon.js +2 -2
- package/dist/NavMenu/NavHeadingMenu.js +2 -2
- package/dist/NavMenu/NavHeadingMenuItem.js +2 -2
- package/dist/NumberInput/NumberInput.js +2 -2
- package/dist/Outline/Outline.d.ts +3 -2
- package/dist/Outline/Outline.d.ts.map +1 -1
- package/dist/Outline/Outline.js +27 -8
- package/dist/Outline/useScrollSpy.d.ts +14 -1
- package/dist/Outline/useScrollSpy.d.ts.map +1 -1
- package/dist/Outline/useScrollSpy.js +161 -50
- package/dist/OverflowList/OverflowList.js +2 -2
- package/dist/Overlay/Overlay.js +2 -2
- package/dist/Overlay/OverlayScrim.js +2 -2
- package/dist/Pagination/Pagination.js +3 -3
- package/dist/Popover/Popover.js +4 -4
- package/dist/PowerSearch/PowerSearch.js +2 -2
- package/dist/ProgressBar/ProgressBar.js +5 -5
- package/dist/RadioList/RadioList.js +2 -2
- package/dist/RadioList/RadioListItem.js +4 -4
- package/dist/Resizable/ResizeHandle.js +4 -4
- package/dist/Resizable/useResizable.d.ts.map +1 -1
- package/dist/Resizable/useResizable.js +1 -5
- package/dist/Section/Section.js +2 -2
- package/dist/SegmentedControl/SegmentedControl.js +2 -2
- package/dist/SegmentedControl/SegmentedControlItem.js +2 -2
- package/dist/SelectableCard/SelectableCard.js +2 -2
- package/dist/Selector/Selector.d.ts.map +1 -1
- package/dist/Selector/Selector.js +3 -3
- package/dist/Selector/SelectorOption.js +2 -2
- package/dist/SideNav/SideNav.js +3 -3
- package/dist/SideNav/SideNavHeading.js +9 -9
- package/dist/SideNav/SideNavItem.js +3 -3
- package/dist/SideNav/SideNavSection.js +2 -2
- package/dist/Skeleton/Skeleton.js +2 -2
- package/dist/Slider/Slider.js +4 -4
- package/dist/Spinner/Spinner.js +3 -3
- package/dist/Stack/Stack.js +2 -2
- package/dist/Stack/StackItem.js +2 -2
- package/dist/StatusDot/StatusDot.js +2 -2
- package/dist/Switch/Switch.js +4 -4
- package/dist/TabList/Tab.js +3 -3
- package/dist/TabList/TabList.js +2 -2
- package/dist/TabList/TabMenu.js +5 -5
- package/dist/Table/BaseTable.js +2 -2
- package/dist/Table/Table.js +3 -3
- package/dist/Table/TableBody.js +2 -2
- package/dist/Table/TableCell.js +3 -3
- package/dist/Table/TableFooter.js +2 -2
- package/dist/Table/TableHeader.js +2 -2
- package/dist/Table/TableHeaderCell.js +3 -3
- package/dist/Table/TableRow.js +3 -3
- package/dist/Text/Text.js +2 -2
- package/dist/TextArea/TextArea.js +2 -2
- package/dist/TextInput/TextInput.js +2 -2
- package/dist/Thumbnail/Thumbnail.js +2 -2
- package/dist/TimeInput/TimeInput.js +2 -2
- package/dist/Timestamp/Timestamp.js +2 -2
- package/dist/Toast/Toast.js +2 -2
- package/dist/ToggleButton/ToggleButton.d.ts +10 -3
- package/dist/ToggleButton/ToggleButton.d.ts.map +1 -1
- package/dist/ToggleButton/ToggleButton.js +66 -20
- package/dist/ToggleButton/ToggleButtonGroup.js +2 -2
- package/dist/Token/Token.js +4 -4
- package/dist/Tokenizer/Tokenizer.js +3 -3
- package/dist/Toolbar/Toolbar.js +2 -2
- package/dist/Tooltip/useTooltip.js +2 -2
- package/dist/TopNav/TopNav.js +3 -3
- package/dist/TopNav/TopNavHeading.js +7 -7
- package/dist/TopNav/TopNavItem.js +3 -3
- package/dist/TopNav/TopNavMegaMenu.js +3 -3
- package/dist/TopNav/TopNavMegaMenuFeaturedCard.js +2 -2
- package/dist/TopNav/TopNavMegaMenuItem.js +3 -3
- package/dist/TopNav/TopNavMenu.js +2 -2
- package/dist/TreeList/TreeList.js +2 -2
- package/dist/TreeList/TreeListItem.js +2 -2
- package/dist/Typeahead/BaseTypeahead.js +2 -2
- package/dist/Typeahead/Typeahead.js +2 -2
- package/dist/Typeahead/TypeaheadItem.js +2 -2
- package/dist/docs-types.d.ts +3 -3
- package/dist/docs-types.d.ts.map +1 -1
- package/dist/naming.d.ts +1 -1
- package/dist/naming.js +1 -1
- package/dist/theme/Theme.js +1 -1
- package/dist/theme/defineTheme.d.ts +3 -3
- package/dist/theme/defineTheme.d.ts.map +1 -1
- package/dist/theme/defineTheme.js +1 -1
- package/dist/theme/index.d.ts +2 -2
- package/dist/theme/index.d.ts.map +1 -1
- package/dist/theme/index.js +2 -2
- package/dist/theme/syntax/defineSyntaxTheme.js +1 -1
- package/dist/theme/tokens.d.ts +1 -1
- package/dist/theme/tokens.js +4 -4
- package/dist/theme/useTheme.d.ts +2 -2
- package/dist/utils/dateParser.d.ts.map +1 -1
- package/dist/utils/dateParser.js +15 -2
- package/dist/utils/mergeProps.d.ts +3 -3
- package/dist/utils/mergeProps.js +4 -4
- package/dist/utils/parseStyleKey.d.ts +2 -2
- package/dist/utils/parseStyleKey.js +2 -2
- package/dist/utils/{xdsThemeProps.d.ts → themeProps.d.ts} +4 -4
- package/dist/utils/themeProps.d.ts.map +1 -0
- package/dist/utils/{xdsThemeProps.js → themeProps.js} +5 -5
- package/package.json +2 -2
- package/src/AlertDialog/AlertDialog.tsx +2 -2
- package/src/AppShell/AppShell.tsx +5 -5
- package/src/AspectRatio/AspectRatio.tsx +2 -2
- package/src/Avatar/Avatar.tsx +2 -2
- package/src/Avatar/AvatarStatusDot.tsx +2 -2
- package/src/AvatarGroup/AvatarGroup.tsx +2 -2
- package/src/AvatarGroup/AvatarGroupOverflow.tsx +3 -3
- package/src/Badge/Badge.tsx +2 -2
- package/src/Banner/Banner.tsx +6 -6
- package/src/Blockquote/Blockquote.tsx +2 -2
- package/src/Breadcrumbs/BreadcrumbItem.tsx +3 -3
- package/src/Breadcrumbs/Breadcrumbs.tsx +2 -2
- package/src/Button/Button.tsx +2 -2
- package/src/ButtonGroup/ButtonGroup.tsx +2 -2
- package/src/Calendar/Calendar.tsx +3 -3
- package/src/Card/Card.tsx +2 -2
- package/src/Carousel/Carousel.tsx +2 -2
- package/src/Center/Center.tsx +2 -2
- package/src/Chat/ChatComposer.tsx +2 -2
- package/src/Chat/ChatComposerDrawer.tsx +2 -2
- package/src/Chat/ChatComposerInput.tsx +2 -2
- package/src/Chat/ChatLayout.tsx +2 -2
- package/src/Chat/ChatLayoutScrollButton.tsx +7 -1
- package/src/Chat/ChatMessage.tsx +2 -2
- package/src/Chat/ChatMessageBubble.tsx +2 -2
- package/src/Chat/ChatMessageList.tsx +2 -2
- package/src/Chat/ChatMessageMetadata.tsx +2 -2
- package/src/Chat/ChatSendButton.tsx +2 -2
- package/src/Chat/ChatSystemMessage.tsx +3 -3
- package/src/Chat/ChatTokenizedText.tsx +3 -3
- package/src/Chat/ChatToolCalls.tsx +3 -3
- package/src/Chat/useTriggerMenu.tsx +2 -2
- package/src/CheckboxInput/CheckboxInput.tsx +3 -3
- package/src/CheckboxList/CheckboxList.tsx +2 -2
- package/src/Citation/Citation.tsx +3 -3
- package/src/ClickableCard/ClickableCard.tsx +2 -2
- package/src/Code/Code.tsx +2 -2
- package/src/CodeBlock/CodeBlock.tsx +2 -2
- package/src/Collapsible/Collapsible.tsx +2 -2
- package/src/Collapsible/useCollapsible.doc.mjs +2 -2
- package/src/CommandPalette/CommandPaletteFooter.tsx +2 -2
- package/src/CommandPalette/CommandPaletteGroup.tsx +2 -2
- package/src/CommandPalette/CommandPaletteInput.tsx +2 -2
- package/src/CommandPalette/CommandPaletteItem.tsx +2 -2
- package/src/CommandPalette/CommandPaletteList.tsx +2 -2
- package/src/ContextMenu/ContextMenu.tsx +4 -4
- package/src/DateInput/DateInput.test.tsx +68 -20
- package/src/DateInput/DateInput.tsx +2 -2
- package/src/DateRangeInput/DateRangeInput.tsx +2 -2
- package/src/DateTimeInput/DateTimeInput.tsx +2 -2
- package/src/Dialog/Dialog.tsx +3 -3
- package/src/Divider/Divider.doc.mjs +1 -1
- package/src/Divider/Divider.tsx +2 -2
- package/src/DropdownMenu/DropdownMenu.tsx +4 -4
- package/src/DropdownMenu/DropdownMenuItem.tsx +2 -2
- package/src/DropdownMenu/{renderXDSDropdownItems.tsx → renderDropdownItems.tsx} +2 -2
- package/src/EmptyState/EmptyState.tsx +2 -2
- package/src/Field/Field.tsx +3 -3
- package/src/Field/FieldLabel.tsx +2 -2
- package/src/FieldStatus/FieldStatus.tsx +2 -2
- package/src/FileInput/FileInput.tsx +2 -2
- package/src/FormLayout/FormLayout.doc.mjs +3 -3
- package/src/FormLayout/FormLayout.tsx +2 -2
- package/src/Grid/Grid.tsx +3 -3
- package/src/Grid/GridSpan.tsx +2 -2
- package/src/Heading/Heading.tsx +2 -2
- package/src/HoverCard/useHoverCard.tsx +2 -2
- package/src/Icon/Icon.doc.mjs +4 -4
- package/src/Icon/Icon.tsx +3 -3
- package/src/InputGroup/InputGroup.tsx +2 -2
- package/src/InputGroup/InputGroupText.tsx +2 -2
- package/src/Item/Item.doc.mjs +2 -2
- package/src/Item/Item.tsx +2 -2
- package/src/Kbd/Kbd.tsx +2 -2
- package/src/Layer/useLayer.tsx +2 -2
- package/src/Layout/Layout.tsx +2 -2
- package/src/Layout/LayoutContent.tsx +2 -2
- package/src/Layout/LayoutFooter.tsx +2 -2
- package/src/Layout/LayoutHeader.tsx +2 -2
- package/src/Layout/LayoutPanel.tsx +2 -2
- package/src/Lightbox/Lightbox.tsx +2 -2
- package/src/Link/Link.doc.mjs +3 -3
- package/src/Link/Link.tsx +3 -3
- package/src/Link/LinkProvider.doc.mjs +3 -3
- package/src/List/List.tsx +2 -2
- package/src/List/ListItem.tsx +2 -2
- package/src/Markdown/Markdown.doc.mjs +4 -4
- package/src/Markdown/Markdown.tsx +3 -3
- package/src/MetadataList/MetadataList.tsx +2 -2
- package/src/MetadataList/MetadataListItem.tsx +3 -3
- package/src/MobileNav/MobileNav.tsx +2 -2
- package/src/MoreMenu/MoreMenu.doc.mjs +0 -13
- package/src/MultiSelector/MultiSelector.tsx +2 -2
- package/src/NavIcon/NavIcon.tsx +2 -2
- package/src/NavMenu/NavHeadingMenu.tsx +2 -2
- package/src/NavMenu/NavHeadingMenuItem.tsx +2 -2
- package/src/NumberInput/NumberInput.tsx +2 -2
- package/src/Outline/Outline.doc.mjs +1 -1
- package/src/Outline/Outline.test.tsx +76 -38
- package/src/Outline/Outline.tsx +27 -8
- package/src/Outline/useScrollSpy.ts +196 -63
- package/src/OverflowList/OverflowList.tsx +2 -2
- package/src/Overlay/Overlay.tsx +2 -2
- package/src/Overlay/OverlayScrim.tsx +2 -2
- package/src/Pagination/Pagination.tsx +3 -3
- package/src/Popover/Popover.tsx +4 -4
- package/src/PowerSearch/PowerSearch.tsx +2 -2
- package/src/ProgressBar/ProgressBar.tsx +5 -5
- package/src/RadioList/RadioList.tsx +2 -2
- package/src/RadioList/RadioListItem.tsx +4 -4
- package/src/Resizable/Resizable.doc.mjs +2 -2
- package/src/Resizable/ResizeHandle.tsx +4 -4
- package/src/Resizable/useResizable.ts +1 -7
- package/src/Section/Section.tsx +2 -2
- package/src/SegmentedControl/SegmentedControl.tsx +2 -2
- package/src/SegmentedControl/SegmentedControlItem.tsx +2 -2
- package/src/SelectableCard/SelectableCard.tsx +2 -2
- package/src/Selector/Selector.tsx +7 -8
- package/src/Selector/SelectorOption.tsx +2 -2
- package/src/SideNav/SideNav.tsx +3 -3
- package/src/SideNav/SideNavHeading.tsx +9 -9
- package/src/SideNav/SideNavItem.tsx +3 -3
- package/src/SideNav/SideNavSection.tsx +2 -2
- package/src/Skeleton/Skeleton.tsx +2 -2
- package/src/Slider/Slider.tsx +4 -4
- package/src/Spinner/Spinner.tsx +3 -3
- package/src/Stack/Stack.tsx +2 -2
- package/src/Stack/StackItem.tsx +2 -2
- package/src/StatusDot/StatusDot.tsx +2 -2
- package/src/Switch/Switch.tsx +4 -4
- package/src/TabList/Tab.tsx +3 -3
- package/src/TabList/TabList.tsx +2 -2
- package/src/TabList/TabMenu.tsx +5 -5
- package/src/Table/BaseTable.tsx +2 -2
- package/src/Table/Table.doc.mjs +3 -3
- package/src/Table/Table.tsx +3 -3
- package/src/Table/TableBody.tsx +2 -2
- package/src/Table/TableCell.tsx +3 -3
- package/src/Table/TableFooter.tsx +2 -2
- package/src/Table/TableHeader.tsx +2 -2
- package/src/Table/TableHeaderCell.tsx +3 -3
- package/src/Table/TableRow.tsx +3 -3
- package/src/Text/Text.tsx +2 -2
- package/src/TextArea/TextArea.tsx +2 -2
- package/src/TextInput/TextInput.tsx +2 -2
- package/src/Thumbnail/Thumbnail.tsx +2 -2
- package/src/TimeInput/TimeInput.tsx +2 -2
- package/src/Timestamp/Timestamp.tsx +2 -2
- package/src/Toast/Toast.tsx +2 -2
- package/src/ToggleButton/ToggleButton.doc.mjs +2 -2
- package/src/ToggleButton/ToggleButton.test.tsx +148 -6
- package/src/ToggleButton/ToggleButton.tsx +85 -22
- package/src/ToggleButton/ToggleButtonGroup.tsx +2 -2
- package/src/Token/Token.tsx +4 -4
- package/src/Tokenizer/Tokenizer.tsx +3 -3
- package/src/Toolbar/Toolbar.doc.mjs +8 -7
- package/src/Toolbar/Toolbar.tsx +2 -2
- package/src/Tooltip/useTooltip.tsx +2 -2
- package/src/TopNav/TopNav.tsx +3 -3
- package/src/TopNav/TopNavHeading.tsx +7 -7
- package/src/TopNav/TopNavItem.tsx +3 -3
- package/src/TopNav/TopNavMegaMenu.tsx +3 -3
- package/src/TopNav/TopNavMegaMenuFeaturedCard.tsx +2 -2
- package/src/TopNav/TopNavMegaMenuItem.tsx +3 -3
- package/src/TopNav/TopNavMenu.tsx +2 -2
- package/src/TreeList/TreeList.tsx +2 -2
- package/src/TreeList/TreeListItem.tsx +2 -2
- package/src/Typeahead/BaseTypeahead.tsx +2 -2
- package/src/Typeahead/Typeahead.tsx +2 -2
- package/src/Typeahead/TypeaheadItem.tsx +2 -2
- package/src/docs-types.ts +3 -3
- package/src/hooks/useEntryAnimation.doc.mjs +3 -3
- package/src/hooks/useMediaQuery.doc.mjs +2 -2
- package/src/hooks/useStreamingText.doc.mjs +3 -3
- package/src/naming.ts +1 -1
- package/src/reset.css +1 -1
- package/src/tailwind-theme.css +1 -1
- package/src/theme/Theme.doc.mjs +2 -2
- package/src/theme/Theme.tsx +1 -1
- package/src/theme/defineTheme.ts +3 -3
- package/src/theme/index.ts +2 -2
- package/src/theme/syntax/defineSyntaxTheme.ts +1 -1
- package/src/theme/tokens.ts +4 -4
- package/src/theme/useTheme.ts +2 -2
- package/src/utils/dateParser.test.ts +26 -0
- package/src/utils/dateParser.ts +16 -2
- package/src/utils/mergeProps.ts +4 -4
- package/src/utils/parseStyleKey.ts +2 -2
- package/src/utils/{xdsThemeProps.test.ts → themeProps.test.ts} +12 -12
- package/src/utils/{xdsThemeProps.ts → themeProps.ts} +5 -5
- package/dist/DropdownMenu/renderXDSDropdownItems.d.ts.map +0 -1
- package/dist/utils/xdsThemeProps.d.ts.map +0 -1
package/dist/Chat/ChatLayout.js
CHANGED
|
@@ -30,7 +30,7 @@ import { useChatStreamScroll } from "./useChatStreamScroll.js";
|
|
|
30
30
|
import { useChatNewMessages } from "./useChatNewMessages.js";
|
|
31
31
|
import { ChatLayoutScrollButton } from "./ChatLayoutScrollButton.js";
|
|
32
32
|
import { ChatLayoutContext } from "./ChatContext.js";
|
|
33
|
-
import {
|
|
33
|
+
import { themeProps } from "../utils/themeProps.js";
|
|
34
34
|
|
|
35
35
|
// =============================================================================
|
|
36
36
|
// Types
|
|
@@ -242,7 +242,7 @@ export function ChatLayout({
|
|
|
242
242
|
children: /*#__PURE__*/_jsxs("div", {
|
|
243
243
|
ref: mergeRefs(ref, rootRef),
|
|
244
244
|
"data-testid": testId,
|
|
245
|
-
...mergeProps(
|
|
245
|
+
...mergeProps(themeProps('chat-layout', {
|
|
246
246
|
density
|
|
247
247
|
}), stylex.props(styles.root, isSelfScrolling && styles.rootScrollable, xstyle), className, style),
|
|
248
248
|
children: [/*#__PURE__*/_jsx("div", {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChatLayoutScrollButton.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatLayoutScrollButton.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAY1B,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAO5C,MAAM,WAAW,2BAA4B,SAAQ,IAAI,CACvD,SAAS,CAAC,cAAc,CAAC,EACzB,SAAS,CACV;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,qCAAqC;IACrC,SAAS,EAAE,OAAO,CAAC;IACnB,iEAAiE;IACjE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;
|
|
1
|
+
{"version":3,"file":"ChatLayoutScrollButton.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatLayoutScrollButton.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAY1B,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAO5C,MAAM,WAAW,2BAA4B,SAAQ,IAAI,CACvD,SAAS,CAAC,cAAc,CAAC,EACzB,SAAS,CACV;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,qCAAqC;IACrC,SAAS,EAAE,OAAO,CAAC;IACnB,iEAAiE;IACjE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAwDD;;;;;;;GAOG;AACH,wBAAgB,sBAAsB,CAAC,EACrC,GAAG,EACH,SAAS,EACT,KAAK,EACL,OAAO,EACP,MAAM,EACN,SAAS,EACT,KAAK,GACN,EAAE,2BAA2B,qBAwB7B;yBAhCe,sBAAsB"}
|
|
@@ -43,6 +43,10 @@ const styles = {
|
|
|
43
43
|
khDVqt: "xuxw1ft",
|
|
44
44
|
kg3NbH: "xf314gf",
|
|
45
45
|
$$css: true
|
|
46
|
+
},
|
|
47
|
+
buttonWithLabel: {
|
|
48
|
+
kwRFfy: "x1t818jl",
|
|
49
|
+
$$css: true
|
|
46
50
|
}
|
|
47
51
|
};
|
|
48
52
|
|
|
@@ -95,7 +99,7 @@ export function ChatLayoutScrollButton({
|
|
|
95
99
|
variant: "ghost",
|
|
96
100
|
size: "md",
|
|
97
101
|
onClick: onClick,
|
|
98
|
-
xstyle: styles.button,
|
|
102
|
+
xstyle: [styles.button, label ? styles.buttonWithLabel : null],
|
|
99
103
|
children: label ?? undefined
|
|
100
104
|
})
|
|
101
105
|
})
|
package/dist/Chat/ChatMessage.js
CHANGED
|
@@ -24,7 +24,7 @@ import "../theme/tokens.stylex.js";
|
|
|
24
24
|
import { colorVars, spacingVars, typeScaleVars, fontWeightVars } from "../theme/tokens.stylex.js";
|
|
25
25
|
import { ChatMessageContext, useChatListContext } from "./ChatContext.js";
|
|
26
26
|
import { mergeProps } from "../utils/index.js";
|
|
27
|
-
import {
|
|
27
|
+
import { themeProps } from "../utils/themeProps.js";
|
|
28
28
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
29
29
|
const styles = {
|
|
30
30
|
root: {
|
|
@@ -162,7 +162,7 @@ export function ChatMessage({
|
|
|
162
162
|
"data-testid": testId,
|
|
163
163
|
"aria-label": !hasName ? `Message from ${sender}` : undefined,
|
|
164
164
|
"aria-labelledby": hasName ? nameId : undefined,
|
|
165
|
-
...mergeProps(
|
|
165
|
+
...mergeProps(themeProps('chat-message', {
|
|
166
166
|
sender,
|
|
167
167
|
density
|
|
168
168
|
}), stylex.props(styles.root, rootAlignment, hasAvatar && rootGap, xstyle), className, styleProp),
|
|
@@ -29,7 +29,7 @@ import "../theme/tokens.stylex.js";
|
|
|
29
29
|
import { colorVars, spacingVars, radiusVars, typeScaleVars, typographyVars } from "../theme/tokens.stylex.js";
|
|
30
30
|
import { useChatMessageContext } from "./ChatContext.js";
|
|
31
31
|
import { mergeProps } from "../utils/index.js";
|
|
32
|
-
import {
|
|
32
|
+
import { themeProps } from "../utils/themeProps.js";
|
|
33
33
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
34
34
|
// =============================================================================
|
|
35
35
|
// Styles
|
|
@@ -193,7 +193,7 @@ export function ChatMessageBubble({
|
|
|
193
193
|
}), /*#__PURE__*/_jsx("div", {
|
|
194
194
|
ref: ref,
|
|
195
195
|
"data-testid": testId,
|
|
196
|
-
...mergeProps(
|
|
196
|
+
...mergeProps(themeProps('chat-message-bubble', {
|
|
197
197
|
sender,
|
|
198
198
|
variant,
|
|
199
199
|
density
|
|
@@ -28,7 +28,7 @@ import { spacingVars } from "../theme/tokens.stylex.js";
|
|
|
28
28
|
import { ChatListContext, useChatLayoutContext } from "./ChatContext.js";
|
|
29
29
|
import { mergeProps } from "../utils/index.js";
|
|
30
30
|
import { Spinner } from "../Spinner/index.js";
|
|
31
|
-
import {
|
|
31
|
+
import { themeProps } from "../utils/themeProps.js";
|
|
32
32
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
33
33
|
// =============================================================================
|
|
34
34
|
// Styles
|
|
@@ -197,7 +197,7 @@ export function ChatMessageList({
|
|
|
197
197
|
"aria-live": "polite",
|
|
198
198
|
tabIndex: 0,
|
|
199
199
|
"data-testid": testId,
|
|
200
|
-
...mergeProps(
|
|
200
|
+
...mergeProps(themeProps('chat-message-list', {
|
|
201
201
|
density
|
|
202
202
|
}), stylex.props(styles.root, xstyle), className, style),
|
|
203
203
|
children: /*#__PURE__*/_jsxs("div", {
|
|
@@ -18,7 +18,7 @@ import { colorVars, spacingVars, typeScaleVars, fontWeightVars } from "../theme/
|
|
|
18
18
|
import { useChatMessageContext } from "./ChatContext.js";
|
|
19
19
|
import { Icon } from "../Icon/index.js";
|
|
20
20
|
import { mergeProps } from "../utils/index.js";
|
|
21
|
-
import {
|
|
21
|
+
import { themeProps } from "../utils/themeProps.js";
|
|
22
22
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
23
23
|
const STATUS_CONFIG = {
|
|
24
24
|
sending: {
|
|
@@ -96,7 +96,7 @@ export function ChatMessageMetadata({
|
|
|
96
96
|
}
|
|
97
97
|
return /*#__PURE__*/_jsxs("div", {
|
|
98
98
|
ref: ref,
|
|
99
|
-
...mergeProps(
|
|
99
|
+
...mergeProps(themeProps('chat-message-metadata'), stylex.props(styles.meta, sender === 'user' ? styles.metaUser : styles.metaAssistant, xstyle), className, style),
|
|
100
100
|
children: [timestamp != null && /*#__PURE__*/_jsx("span", {
|
|
101
101
|
children: timestamp
|
|
102
102
|
}), timestamp != null && (footer != null || statusConfig != null) && /*#__PURE__*/_jsx("span", {
|
|
@@ -21,7 +21,7 @@ import * as stylex from '@stylexjs/stylex';
|
|
|
21
21
|
import { Button } from "../Button/index.js";
|
|
22
22
|
import { getIcon } from "../Icon/globalIconRegistry.js";
|
|
23
23
|
import { useChatComposerContext } from "./ChatContext.js";
|
|
24
|
-
import {
|
|
24
|
+
import { themeProps } from "../utils/themeProps.js";
|
|
25
25
|
|
|
26
26
|
// =============================================================================
|
|
27
27
|
// Types
|
|
@@ -77,7 +77,7 @@ export function ChatSendButton(props) {
|
|
|
77
77
|
isIconOnly: true,
|
|
78
78
|
isDisabled: !isStopShown && isDisabled,
|
|
79
79
|
onClick: isStopShown ? onStop : handleSend,
|
|
80
|
-
...
|
|
80
|
+
...themeProps('chat-send-button'),
|
|
81
81
|
xstyle: [styles.root, xstyle]
|
|
82
82
|
});
|
|
83
83
|
}
|
|
@@ -23,7 +23,7 @@ import "../theme/tokens.stylex.js";
|
|
|
23
23
|
import { colorVars, spacingVars, typeScaleVars, fontWeightVars, typographyVars } from "../theme/tokens.stylex.js";
|
|
24
24
|
import { mergeProps } from "../utils/index.js";
|
|
25
25
|
import { Divider } from "../Divider/index.js";
|
|
26
|
-
import {
|
|
26
|
+
import { themeProps } from "../utils/themeProps.js";
|
|
27
27
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
28
28
|
// =============================================================================
|
|
29
29
|
// Styles
|
|
@@ -82,7 +82,7 @@ export function ChatSystemMessage({
|
|
|
82
82
|
ref: ref,
|
|
83
83
|
role: "status",
|
|
84
84
|
"data-testid": testId,
|
|
85
|
-
...mergeProps(
|
|
85
|
+
...mergeProps(themeProps('chat-system-message', {
|
|
86
86
|
variant
|
|
87
87
|
}), stylex.props(styles.dividerWrap, xstyle), className, styleProp),
|
|
88
88
|
children: /*#__PURE__*/_jsx(Divider, {
|
|
@@ -94,7 +94,7 @@ export function ChatSystemMessage({
|
|
|
94
94
|
ref: ref,
|
|
95
95
|
role: "status",
|
|
96
96
|
"data-testid": testId,
|
|
97
|
-
...mergeProps(
|
|
97
|
+
...mergeProps(themeProps('chat-system-message', {
|
|
98
98
|
variant
|
|
99
99
|
}), stylex.props(styles.root, xstyle), className, styleProp),
|
|
100
100
|
children: /*#__PURE__*/_jsxs("span", {
|
|
@@ -20,7 +20,7 @@ import React from 'react';
|
|
|
20
20
|
import * as stylex from '@stylexjs/stylex';
|
|
21
21
|
import { Badge } from "../Badge/index.js";
|
|
22
22
|
import { mergeProps } from "../utils/index.js";
|
|
23
|
-
import {
|
|
23
|
+
import { themeProps } from "../utils/themeProps.js";
|
|
24
24
|
|
|
25
25
|
// =============================================================================
|
|
26
26
|
// Styles
|
|
@@ -59,7 +59,7 @@ export function ChatTokenizedText({
|
|
|
59
59
|
if (!children || !tokens || tokens.length === 0) {
|
|
60
60
|
return /*#__PURE__*/_jsx("span", {
|
|
61
61
|
ref: ref,
|
|
62
|
-
...mergeProps(
|
|
62
|
+
...mergeProps(themeProps('chat-tokenized-text'), {
|
|
63
63
|
className: "xt0psk2"
|
|
64
64
|
}),
|
|
65
65
|
children: children ?? ''
|
|
@@ -68,7 +68,7 @@ export function ChatTokenizedText({
|
|
|
68
68
|
const parts = renderTokens(children, tokens);
|
|
69
69
|
return /*#__PURE__*/_jsx("span", {
|
|
70
70
|
ref: ref,
|
|
71
|
-
...mergeProps(
|
|
71
|
+
...mergeProps(themeProps('chat-tokenized-text'), {
|
|
72
72
|
className: "xt0psk2"
|
|
73
73
|
}),
|
|
74
74
|
children: parts
|
|
@@ -25,7 +25,7 @@ import { getKey, mergeProps } from "../utils/index.js";
|
|
|
25
25
|
import { Badge } from "../Badge/index.js";
|
|
26
26
|
import { Icon } from "../Icon/index.js";
|
|
27
27
|
import { Spinner } from "../Spinner/index.js";
|
|
28
|
-
import {
|
|
28
|
+
import { themeProps } from "../utils/themeProps.js";
|
|
29
29
|
|
|
30
30
|
// =============================================================================
|
|
31
31
|
// Types
|
|
@@ -270,7 +270,7 @@ export function ChatToolCalls(props) {
|
|
|
270
270
|
if (calls.length === 1) {
|
|
271
271
|
return /*#__PURE__*/_jsx("div", {
|
|
272
272
|
ref: ref,
|
|
273
|
-
...mergeProps(
|
|
273
|
+
...mergeProps(themeProps('chat-tool-calls'), stylex.props(styles.root, xstyle), className, style),
|
|
274
274
|
...rest,
|
|
275
275
|
children: /*#__PURE__*/_jsx(CallRow, {
|
|
276
276
|
call: calls[0]
|
|
@@ -283,7 +283,7 @@ export function ChatToolCalls(props) {
|
|
|
283
283
|
const latestStatus = latestCall.status ?? 'complete';
|
|
284
284
|
return /*#__PURE__*/_jsxs("div", {
|
|
285
285
|
ref: ref,
|
|
286
|
-
...mergeProps(
|
|
286
|
+
...mergeProps(themeProps('chat-tool-calls'), stylex.props(styles.root, xstyle), className, style),
|
|
287
287
|
...rest,
|
|
288
288
|
children: [/*#__PURE__*/_jsxs("div", {
|
|
289
289
|
role: "button",
|
|
@@ -25,7 +25,7 @@ import { usePopover } from "../Popover/usePopover.js";
|
|
|
25
25
|
import "../theme/tokens.stylex.js";
|
|
26
26
|
import { colorVars, spacingVars, radiusVars, typeScaleVars, typographyVars } from "../theme/tokens.stylex.js";
|
|
27
27
|
import { mergeProps, groupItems } from "../utils/index.js";
|
|
28
|
-
import {
|
|
28
|
+
import { themeProps } from "../utils/themeProps.js";
|
|
29
29
|
|
|
30
30
|
// =============================================================================
|
|
31
31
|
// Types
|
|
@@ -486,7 +486,7 @@ export function useTriggerMenu(options) {
|
|
|
486
486
|
id: listboxId,
|
|
487
487
|
role: "listbox",
|
|
488
488
|
"aria-label": trigger?.menuLabel ?? 'Suggestions',
|
|
489
|
-
...mergeProps(
|
|
489
|
+
...mergeProps(themeProps('trigger-menu'), {
|
|
490
490
|
className: "x9f619 x1xiyphd x1odjw0f x9epnlk xfb3i0g"
|
|
491
491
|
}),
|
|
492
492
|
children: listContent
|
|
@@ -25,7 +25,7 @@ import { Spinner } from "../Spinner/index.js";
|
|
|
25
25
|
import { mergeProps, mergeRefs } from "../utils/index.js";
|
|
26
26
|
import "./checkbox.markers.stylex.js";
|
|
27
27
|
import { checkboxScope } from "./checkbox.markers.stylex.js";
|
|
28
|
-
import {
|
|
28
|
+
import { themeProps } from "../utils/themeProps.js";
|
|
29
29
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
30
30
|
const styles = {
|
|
31
31
|
container: {
|
|
@@ -245,7 +245,7 @@ export function CheckboxInput({
|
|
|
245
245
|
}
|
|
246
246
|
const ariaDescribedBy = describedByParts.length > 0 ? describedByParts.join(' ') : undefined;
|
|
247
247
|
return /*#__PURE__*/_jsxs("div", {
|
|
248
|
-
...mergeProps(
|
|
248
|
+
...mergeProps(themeProps('checkbox-input', {
|
|
249
249
|
size
|
|
250
250
|
}), stylex.props(width != null && dynamicWidthStyles.width(width), xstyle), className, style),
|
|
251
251
|
children: [/*#__PURE__*/_jsxs("div", {
|
|
@@ -283,7 +283,7 @@ export function CheckboxInput({
|
|
|
283
283
|
...stylex.props(styles.input, wrapperSizeStyles[size], isDisabled && styles.inputDisabled)
|
|
284
284
|
}), /*#__PURE__*/_jsx("div", {
|
|
285
285
|
"aria-hidden": "true",
|
|
286
|
-
...mergeProps(
|
|
286
|
+
...mergeProps(themeProps('checkbox', {
|
|
287
287
|
size,
|
|
288
288
|
checked: isChecked ? 'checked' : isIndeterminate ? 'indeterminate' : null,
|
|
289
289
|
disabled: isDisabled ? 'disabled' : null
|
|
@@ -19,7 +19,7 @@ import { useCallback, useId, useMemo, useOptimistic, useTransition } from 'react
|
|
|
19
19
|
import { Field } from "../Field/Field.js";
|
|
20
20
|
import { List } from "../List/List.js";
|
|
21
21
|
import { mergeProps } from "../utils/index.js";
|
|
22
|
-
import {
|
|
22
|
+
import { themeProps } from "../utils/themeProps.js";
|
|
23
23
|
import { CheckboxListContext } from "./CheckboxListContext.js";
|
|
24
24
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
25
25
|
const EMPTY_ARRAY = [];
|
|
@@ -107,7 +107,7 @@ export function CheckboxList({
|
|
|
107
107
|
statusVariant: "detached",
|
|
108
108
|
width: width,
|
|
109
109
|
xstyle: xstyle,
|
|
110
|
-
...mergeProps(
|
|
110
|
+
...mergeProps(themeProps('checkbox-list'), {
|
|
111
111
|
className,
|
|
112
112
|
style
|
|
113
113
|
}),
|
|
@@ -16,7 +16,7 @@ import * as stylex from '@stylexjs/stylex';
|
|
|
16
16
|
import "../theme/tokens.stylex.js";
|
|
17
17
|
import { colorVars, spacingVars, radiusVars, typeScaleVars, fontWeightVars, borderVars, durationVars, easeVars } from "../theme/tokens.stylex.js";
|
|
18
18
|
import { mergeProps } from "../utils/index.js";
|
|
19
|
-
import {
|
|
19
|
+
import { themeProps } from "../utils/themeProps.js";
|
|
20
20
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
21
21
|
const styles = {
|
|
22
22
|
label: {
|
|
@@ -113,7 +113,7 @@ export function Citation({
|
|
|
113
113
|
"aria-label": `Citation ${number}: ${title}`,
|
|
114
114
|
"data-testid": testId,
|
|
115
115
|
...linkProps,
|
|
116
|
-
...mergeProps(
|
|
116
|
+
...mergeProps(themeProps('citation', {
|
|
117
117
|
variant
|
|
118
118
|
}), stylex.props(styles.number, href != null && styles.numberHover, xstyle), className, style),
|
|
119
119
|
children: number
|
|
@@ -126,7 +126,7 @@ export function Citation({
|
|
|
126
126
|
"aria-label": `Citation ${number}: ${title}`,
|
|
127
127
|
"data-testid": testId,
|
|
128
128
|
...linkProps,
|
|
129
|
-
...mergeProps(
|
|
129
|
+
...mergeProps(themeProps('citation', {
|
|
130
130
|
variant
|
|
131
131
|
}), stylex.props(styles.label, icon != null && styles.labelWithIcon, href != null && styles.labelHover, xstyle), className, style),
|
|
132
132
|
children: [icon && /*#__PURE__*/_jsx("span", {
|
|
@@ -35,7 +35,7 @@ import { mergeProps, mergeRefs } from "../utils/index.js";
|
|
|
35
35
|
import { Card } from "../Card/Card.js";
|
|
36
36
|
import { useClickableContainer } from "../hooks/useClickableContainer.js";
|
|
37
37
|
import { useLinkComponent } from "../Link/useLinkComponent.js";
|
|
38
|
-
import {
|
|
38
|
+
import { themeProps } from "../utils/themeProps.js";
|
|
39
39
|
|
|
40
40
|
// =============================================================================
|
|
41
41
|
// Styles — only the interactive layer, Card handles everything else
|
|
@@ -164,7 +164,7 @@ export function ClickableCard({
|
|
|
164
164
|
maxWidth: maxWidth,
|
|
165
165
|
padding: padding,
|
|
166
166
|
variant: variant,
|
|
167
|
-
...mergeProps(
|
|
167
|
+
...mergeProps(themeProps('clickable-card', {
|
|
168
168
|
variant
|
|
169
169
|
}), {
|
|
170
170
|
className: classNameProp,
|
package/dist/Code/Code.js
CHANGED
|
@@ -17,7 +17,7 @@ import * as stylex from '@stylexjs/stylex';
|
|
|
17
17
|
import "../theme/tokens.stylex.js";
|
|
18
18
|
import { colorVars, spacingVars, radiusVars, typographyVars, typeScaleVars } from "../theme/tokens.stylex.js";
|
|
19
19
|
import { mergeProps } from "../utils/index.js";
|
|
20
|
-
import {
|
|
20
|
+
import { themeProps } from "../utils/themeProps.js";
|
|
21
21
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
22
22
|
const styles = {
|
|
23
23
|
base: {
|
|
@@ -56,7 +56,7 @@ export function Code({
|
|
|
56
56
|
}) {
|
|
57
57
|
return /*#__PURE__*/_jsx("code", {
|
|
58
58
|
ref: ref,
|
|
59
|
-
...mergeProps(
|
|
59
|
+
...mergeProps(themeProps('code'), stylex.props(styles.base, xstyle), className, style),
|
|
60
60
|
"data-testid": props['data-testid'],
|
|
61
61
|
children: children
|
|
62
62
|
});
|
|
@@ -18,7 +18,7 @@ import { Icon } from "../Icon/index.js";
|
|
|
18
18
|
import { tokenize, tokenizeAsync, flatTokensToLines, SYNC_TOKENIZE_THRESHOLD } from "./tokenizer.js";
|
|
19
19
|
import { ensureHighlightStyles } from "./highlightStyles.js";
|
|
20
20
|
import { applyHighlightRangesChunked } from "./highlightRanges.js";
|
|
21
|
-
import {
|
|
21
|
+
import { themeProps } from "../utils/themeProps.js";
|
|
22
22
|
|
|
23
23
|
// ---------------------------------------------------------------------------
|
|
24
24
|
// Styles
|
|
@@ -518,7 +518,7 @@ export function CodeBlock({
|
|
|
518
518
|
});
|
|
519
519
|
return /*#__PURE__*/_jsxs("pre", {
|
|
520
520
|
ref: ref,
|
|
521
|
-
...mergeProps(
|
|
521
|
+
...mergeProps(themeProps('codeblock', {
|
|
522
522
|
size,
|
|
523
523
|
language,
|
|
524
524
|
container
|
|
@@ -26,7 +26,7 @@ import { colorVars, typographyVars, fontWeightVars, spacingVars, typeScaleVars,
|
|
|
26
26
|
import { useCollapsible } from "./useCollapsible.js";
|
|
27
27
|
import { getIcon } from "../Icon/globalIconRegistry.js";
|
|
28
28
|
import { mergeProps } from "../utils/index.js";
|
|
29
|
-
import {
|
|
29
|
+
import { themeProps } from "../utils/themeProps.js";
|
|
30
30
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
31
31
|
const styles = {
|
|
32
32
|
root: {
|
|
@@ -102,7 +102,7 @@ export function Collapsible({
|
|
|
102
102
|
const chevronIcon = getIcon('chevronDown');
|
|
103
103
|
return /*#__PURE__*/_jsxs("div", {
|
|
104
104
|
ref: ref,
|
|
105
|
-
...mergeProps(
|
|
105
|
+
...mergeProps(themeProps('collapsible'), stylex.props(styles.root, xstyle), className, style),
|
|
106
106
|
...props,
|
|
107
107
|
children: [/*#__PURE__*/_jsxs("button", {
|
|
108
108
|
type: "button",
|
|
@@ -17,7 +17,7 @@ import { mergeProps } from "../utils/index.js";
|
|
|
17
17
|
import "../theme/tokens.stylex.js";
|
|
18
18
|
import { colorVars, spacingVars, typeScaleVars, typographyVars } from "../theme/tokens.stylex.js";
|
|
19
19
|
import { Kbd } from "../Kbd/index.js";
|
|
20
|
-
import {
|
|
20
|
+
import { themeProps } from "../utils/themeProps.js";
|
|
21
21
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
22
22
|
const styles = {
|
|
23
23
|
footer: {
|
|
@@ -63,7 +63,7 @@ export function CommandPaletteFooter({
|
|
|
63
63
|
}) {
|
|
64
64
|
return /*#__PURE__*/_jsx("div", {
|
|
65
65
|
ref: ref,
|
|
66
|
-
...mergeProps(
|
|
66
|
+
...mergeProps(themeProps('command-palette-footer'), stylex.props(styles.footer, xstyle), className, style),
|
|
67
67
|
...props,
|
|
68
68
|
children: children ?? /*#__PURE__*/_jsxs(_Fragment, {
|
|
69
69
|
children: [/*#__PURE__*/_jsxs("span", {
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
|
|
15
15
|
import * as stylex from '@stylexjs/stylex';
|
|
16
16
|
import { mergeProps } from "../utils/index.js";
|
|
17
|
-
import {
|
|
17
|
+
import { themeProps } from "../utils/themeProps.js";
|
|
18
18
|
import "../theme/tokens.stylex.js";
|
|
19
19
|
import { colorVars, spacingVars, typeScaleVars, typographyVars } from "../theme/tokens.stylex.js";
|
|
20
20
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
@@ -58,7 +58,7 @@ export function CommandPaletteGroup({
|
|
|
58
58
|
ref: ref,
|
|
59
59
|
role: "group",
|
|
60
60
|
"aria-label": heading,
|
|
61
|
-
...mergeProps(
|
|
61
|
+
...mergeProps(themeProps('command-palette-group'), stylex.props(styles.group, xstyle), className, style),
|
|
62
62
|
...props,
|
|
63
63
|
children: [/*#__PURE__*/_jsx("div", {
|
|
64
64
|
"aria-hidden": "true",
|
|
@@ -21,7 +21,7 @@ import "../theme/tokens.stylex.js";
|
|
|
21
21
|
import { colorVars, typeScaleVars, spacingVars, typographyVars } from "../theme/tokens.stylex.js";
|
|
22
22
|
import { useCommandPaletteContext } from "./CommandPaletteContext.js";
|
|
23
23
|
import { useDialogContext } from "../Dialog/DialogContext.js";
|
|
24
|
-
import {
|
|
24
|
+
import { themeProps } from "../utils/themeProps.js";
|
|
25
25
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
26
26
|
const styles = {
|
|
27
27
|
wrapper: {
|
|
@@ -96,7 +96,7 @@ export function CommandPaletteInput({
|
|
|
96
96
|
ctx?.onKeyDown(e);
|
|
97
97
|
}, [ctx, onKeyDown]);
|
|
98
98
|
return /*#__PURE__*/_jsxs("div", {
|
|
99
|
-
...mergeProps(
|
|
99
|
+
...mergeProps(themeProps('command-palette-input'), stylex.props(styles.wrapper, xstyle)),
|
|
100
100
|
children: [/*#__PURE__*/_jsx("span", {
|
|
101
101
|
...{
|
|
102
102
|
className: "x78zum5 x6s0dn4 x2lah0s xv1l7n4"
|
|
@@ -18,7 +18,7 @@ import "../theme/tokens.stylex.js";
|
|
|
18
18
|
import { colorVars, spacingVars, radiusVars, typographyVars, typeScaleVars } from "../theme/tokens.stylex.js";
|
|
19
19
|
import { useCommandPaletteContext } from "./CommandPaletteContext.js";
|
|
20
20
|
import { useDialogContext } from "../Dialog/DialogContext.js";
|
|
21
|
-
import {
|
|
21
|
+
import { themeProps } from "../utils/themeProps.js";
|
|
22
22
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
23
23
|
const HOVER_HOVER = '@media (hover: hover)';
|
|
24
24
|
const styles = {
|
|
@@ -142,7 +142,7 @@ export function CommandPaletteItem({
|
|
|
142
142
|
"data-value": value,
|
|
143
143
|
onClick: handleClick,
|
|
144
144
|
onMouseEnter: handleMouseEnter,
|
|
145
|
-
...mergeProps(
|
|
145
|
+
...mergeProps(themeProps('command-palette-item'), stylex.props(styles.item, !isDisabled && styles.itemHover, isHighlighted && styles.itemHighlighted, isSelected && styles.itemSelected, isDisabled && styles.itemDisabled, xstyle), className, style),
|
|
146
146
|
...props,
|
|
147
147
|
children: children
|
|
148
148
|
});
|
|
@@ -18,7 +18,7 @@ import { mergeProps } from "../utils/index.js";
|
|
|
18
18
|
import "../theme/tokens.stylex.js";
|
|
19
19
|
import { spacingVars } from "../theme/tokens.stylex.js";
|
|
20
20
|
import { useCommandPaletteContext } from "./CommandPaletteContext.js";
|
|
21
|
-
import {
|
|
21
|
+
import { themeProps } from "../utils/themeProps.js";
|
|
22
22
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
23
23
|
const styles = {
|
|
24
24
|
list: {
|
|
@@ -66,7 +66,7 @@ export function CommandPaletteList({
|
|
|
66
66
|
id: ctx?.listId,
|
|
67
67
|
role: "listbox",
|
|
68
68
|
"aria-label": label,
|
|
69
|
-
...mergeProps(
|
|
69
|
+
...mergeProps(themeProps('command-palette-list'), stylex.props(styles.list, xstyle), className, style),
|
|
70
70
|
...props,
|
|
71
71
|
children: children
|
|
72
72
|
});
|
|
@@ -27,14 +27,14 @@
|
|
|
27
27
|
import React, { useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';
|
|
28
28
|
import * as stylex from '@stylexjs/stylex';
|
|
29
29
|
import { useLayer } from "../Layer/useLayer.js";
|
|
30
|
-
import {
|
|
30
|
+
import { renderDropdownItems } from "../DropdownMenu/renderDropdownItems.js";
|
|
31
31
|
import { DropdownMenuContext } from "../DropdownMenu/DropdownMenuContext.js";
|
|
32
32
|
import { useListFocus } from "../hooks/useListFocus.js";
|
|
33
33
|
import { layerAnimations } from "../Layer/layerAnimations.stylex.js";
|
|
34
34
|
import "../theme/tokens.stylex.js";
|
|
35
35
|
import { colorVars, spacingVars, radiusVars, durationVars, easeVars, shadowVars } from "../theme/tokens.stylex.js";
|
|
36
36
|
import { mergeProps } from "../utils/index.js";
|
|
37
|
-
import {
|
|
37
|
+
import { themeProps } from "../utils/themeProps.js";
|
|
38
38
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
39
39
|
const styles = {
|
|
40
40
|
menu: {
|
|
@@ -199,7 +199,7 @@ export function ContextMenu({
|
|
|
199
199
|
closeMenu,
|
|
200
200
|
menuSize: size
|
|
201
201
|
}), [closeMenu, size]);
|
|
202
|
-
const resolvedMenuContent = props.items !== undefined ?
|
|
202
|
+
const resolvedMenuContent = props.items !== undefined ? renderDropdownItems(items) : menuContent;
|
|
203
203
|
return /*#__PURE__*/_jsxs(_Fragment, {
|
|
204
204
|
children: [/*#__PURE__*/_jsx("div", {
|
|
205
205
|
ref: ref,
|
|
@@ -212,7 +212,7 @@ export function ContextMenu({
|
|
|
212
212
|
id: menuId,
|
|
213
213
|
role: "menu",
|
|
214
214
|
onKeyDown: listKeyDown,
|
|
215
|
-
...mergeProps(
|
|
215
|
+
...mergeProps(themeProps('context-menu'), stylex.props(styles.menu, xstyle), className, style),
|
|
216
216
|
children: /*#__PURE__*/_jsx(DropdownMenuContext, {
|
|
217
217
|
value: contextValue,
|
|
218
218
|
children: resolvedMenuContent
|
|
@@ -48,7 +48,7 @@ const sizeStyles = {
|
|
|
48
48
|
// Re-export shared types for convenience
|
|
49
49
|
|
|
50
50
|
import { mergeProps, mergeRefs } from "../utils/index.js";
|
|
51
|
-
import {
|
|
51
|
+
import { themeProps } from "../utils/themeProps.js";
|
|
52
52
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
53
53
|
/**
|
|
54
54
|
* A date picker component combining a text input with a calendar popover.
|
|
@@ -268,7 +268,7 @@ export function DateInput({
|
|
|
268
268
|
children: [/*#__PURE__*/_jsxs("div", {
|
|
269
269
|
ref: popover.triggerRef,
|
|
270
270
|
...rest,
|
|
271
|
-
...mergeProps(
|
|
271
|
+
...mergeProps(themeProps('date-input', {
|
|
272
272
|
size,
|
|
273
273
|
status: status?.type ?? null
|
|
274
274
|
}), stylex.props(inputWrapperStyles.base, sizeStyles[size], isEffectivelyDisabled && inputWrapperStyles.disabled, status && inputStatusBorderStyles[status.type], status && inputStatusHoverShadowStyles[status.type], status && inputStatusFocusWithinStyles[status.type], xstyle), className, style),
|
|
@@ -27,7 +27,7 @@ import { Calendar } from "../Calendar/index.js";
|
|
|
27
27
|
import { usePopover } from "../Popover/index.js";
|
|
28
28
|
import { mergeProps } from "../utils/index.js";
|
|
29
29
|
import { useSize } from "../SizeContext/SizeContext.js";
|
|
30
|
-
import {
|
|
30
|
+
import { themeProps } from "../utils/themeProps.js";
|
|
31
31
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
32
32
|
const sizeStyles = {
|
|
33
33
|
sm: {
|
|
@@ -187,7 +187,7 @@ export function DateRangeInput({
|
|
|
187
187
|
children: [/*#__PURE__*/_jsxs("div", {
|
|
188
188
|
ref: popover.triggerRef,
|
|
189
189
|
...rest,
|
|
190
|
-
...mergeProps(
|
|
190
|
+
...mergeProps(themeProps('date-range-input', {
|
|
191
191
|
size,
|
|
192
192
|
status: status?.type ?? null
|
|
193
193
|
}), stylex.props(inputWrapperStyles.base, sizeStyles[size], isEffectivelyDisabled && inputWrapperStyles.disabled, status && inputStatusBorderStyles[status.type], status && inputStatusHoverShadowStyles[status.type], status && inputStatusFocusWithinStyles[status.type], xstyle), className, style),
|
|
@@ -29,7 +29,7 @@ import { useInputContainer } from "../hooks/useInputContainer.js";
|
|
|
29
29
|
import { parseDateInput, parseTimeInput, formatDisplayTime12h, formatDisplayTime24h, formatISOTime, isTimeInRange, adjustTime, mergeProps, mergeRefs } from "../utils/index.js";
|
|
30
30
|
import { plainDateFromISO, plainDateToISO, plainDateFormat, DATE_FORMAT_LONG } from "../utils/plainDate.js";
|
|
31
31
|
import { useSize } from "../SizeContext/SizeContext.js";
|
|
32
|
-
import {
|
|
32
|
+
import { themeProps } from "../utils/themeProps.js";
|
|
33
33
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
34
34
|
const styles = {
|
|
35
35
|
row: {
|
|
@@ -435,7 +435,7 @@ export function DateTimeInput({
|
|
|
435
435
|
width: width,
|
|
436
436
|
children: [/*#__PURE__*/_jsxs("div", {
|
|
437
437
|
...rest,
|
|
438
|
-
...mergeProps(
|
|
438
|
+
...mergeProps(themeProps('date-time-input', {
|
|
439
439
|
size,
|
|
440
440
|
status: status?.type ?? null
|
|
441
441
|
}), stylex.props(styles.row, xstyle), className, style),
|
package/dist/Dialog/Dialog.js
CHANGED
|
@@ -24,7 +24,7 @@ import { container } from "../Layout/container.stylex.js";
|
|
|
24
24
|
import { paddingStyles, containerPaddingInlineVarStyles, containerPaddingBlockStartVarStyles, containerPaddingBlockEndVarStyles, spacingStepToToken } from "../Layout/padding.stylex.js";
|
|
25
25
|
import { mergeProps, mergeRefs } from "../utils/index.js";
|
|
26
26
|
import { DialogContext } from "./DialogContext.js";
|
|
27
|
-
import {
|
|
27
|
+
import { themeProps } from "../utils/themeProps.js";
|
|
28
28
|
|
|
29
29
|
/**
|
|
30
30
|
* Calculate a directional translate offset for dialog entry animation.
|
|
@@ -353,7 +353,7 @@ export function Dialog({
|
|
|
353
353
|
return null;
|
|
354
354
|
}
|
|
355
355
|
return /*#__PURE__*/_jsx("div", {
|
|
356
|
-
...mergeProps(
|
|
356
|
+
...mergeProps(themeProps('dialog', {
|
|
357
357
|
variant
|
|
358
358
|
}), stylex.props(styles.inlineWrapper, !isFullscreen && dynamicStyles.sizing(width, maxHeight), isFullscreen && styles.fullscreen, xstyle), className, style),
|
|
359
359
|
"data-testid": props['data-testid'],
|
|
@@ -375,7 +375,7 @@ export function Dialog({
|
|
|
375
375
|
onCancel: handleCancel,
|
|
376
376
|
"aria-modal": "true",
|
|
377
377
|
role: purpose === 'required' ? 'alertdialog' : undefined,
|
|
378
|
-
...mergeProps(
|
|
378
|
+
...mergeProps(themeProps('dialog', {
|
|
379
379
|
variant
|
|
380
380
|
}), stylex.props(styles.dialog, isOpen && styles.open, styles.backdrop, !isFullscreen && dynamicStyles.sizing(width, maxHeight), hasPosition && dynamicStyles.position(position?.top, position?.right, position?.bottom, position?.left), isFullscreen && styles.fullscreen, xstyle), className, style),
|
|
381
381
|
...safeProps,
|
package/dist/Divider/Divider.js
CHANGED
|
@@ -18,7 +18,7 @@ import * as stylex from '@stylexjs/stylex';
|
|
|
18
18
|
import "../theme/tokens.stylex.js";
|
|
19
19
|
import { colorVars, spacingVars, typeScaleVars, borderVars } from "../theme/tokens.stylex.js";
|
|
20
20
|
import { mergeProps } from "../utils/index.js";
|
|
21
|
-
import {
|
|
21
|
+
import { themeProps } from "../utils/themeProps.js";
|
|
22
22
|
|
|
23
23
|
/**
|
|
24
24
|
* Extensible variant map for Divider.
|
|
@@ -117,7 +117,7 @@ export function Divider({
|
|
|
117
117
|
ref: ref,
|
|
118
118
|
role: "separator",
|
|
119
119
|
"aria-orientation": orientation,
|
|
120
|
-
...mergeProps(
|
|
120
|
+
...mergeProps(themeProps('divider', {
|
|
121
121
|
variant,
|
|
122
122
|
orientation
|
|
123
123
|
}), stylex.props(isHorizontal ? baseStyles.horizontal : baseStyles.vertical, isFullBleed && (isHorizontal ? fullBleedStyles.horizontal : fullBleedStyles.vertical), xstyle), className, style),
|