@dxos/react-ui 0.10.0 → 0.11.0
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/lib/chunk-parse-stack.mjs +1566 -0
- package/dist/lib/chunk-parse-stack.mjs.map +1 -0
- package/dist/lib/index.mjs +5220 -0
- package/dist/lib/index.mjs.map +1 -0
- package/dist/lib/testing.mjs +144 -0
- package/dist/lib/testing.mjs.map +1 -0
- package/dist/lib/translations.mjs +38 -0
- package/dist/lib/translations.mjs.map +1 -0
- package/dist/types/src/components/Avatars/Avatar.d.ts +1 -6
- package/dist/types/src/components/Avatars/Avatar.d.ts.map +1 -1
- package/dist/types/src/components/Avatars/AvatarContext.d.ts +9 -0
- package/dist/types/src/components/Avatars/AvatarContext.d.ts.map +1 -0
- package/dist/types/src/components/Avatars/index.d.ts +1 -0
- package/dist/types/src/components/Avatars/index.d.ts.map +1 -1
- package/dist/types/src/components/Breadcrumb/Breadcrumb.d.ts +1 -1
- package/dist/types/src/components/Breadcrumb/Breadcrumb.d.ts.map +1 -1
- package/dist/types/src/components/Breadcrumb/Breadcrumb.stories.d.ts.map +1 -1
- package/dist/types/src/components/Breadcrumb/Breadcrumb.theme.d.ts.map +1 -1
- package/dist/types/src/components/Button/Button.d.ts +1 -6
- package/dist/types/src/components/Button/Button.d.ts.map +1 -1
- package/dist/types/src/components/Button/ButtonGroupContext.d.ts +9 -0
- package/dist/types/src/components/Button/ButtonGroupContext.d.ts.map +1 -0
- package/dist/types/src/components/Button/IconButton.d.ts.map +1 -1
- package/dist/types/src/components/Button/IconButton.stories.d.ts.map +1 -1
- package/dist/types/src/components/Button/IconButton.theme.d.ts +1 -0
- package/dist/types/src/components/Button/IconButton.theme.d.ts.map +1 -1
- package/dist/types/src/components/Button/SystemIconButton.d.ts +1 -1
- package/dist/types/src/components/Button/SystemIconButton.d.ts.map +1 -1
- package/dist/types/src/components/Button/index.d.ts +1 -0
- package/dist/types/src/components/Button/index.d.ts.map +1 -1
- package/dist/types/src/components/Calendar/Calendar.d.ts +0 -2
- package/dist/types/src/components/Calendar/Calendar.d.ts.map +1 -1
- package/dist/types/src/components/Calendar/index.d.ts +1 -0
- package/dist/types/src/components/Calendar/index.d.ts.map +1 -1
- package/dist/types/src/components/Calendar/parse-calendar-date.d.ts +3 -0
- package/dist/types/src/components/Calendar/parse-calendar-date.d.ts.map +1 -0
- package/dist/types/src/components/Card/Card.d.ts +42 -15
- package/dist/types/src/components/Card/Card.d.ts.map +1 -1
- package/dist/types/src/components/Card/Card.theme.d.ts +0 -1
- package/dist/types/src/components/Card/Card.theme.d.ts.map +1 -1
- package/dist/types/src/components/Carousel/Carousel.d.ts +2 -4
- package/dist/types/src/components/Carousel/Carousel.d.ts.map +1 -1
- package/dist/types/src/components/Carousel/CarouselContext.d.ts +8 -0
- package/dist/types/src/components/Carousel/CarouselContext.d.ts.map +1 -0
- package/dist/types/src/components/Carousel/index.d.ts +1 -0
- package/dist/types/src/components/Carousel/index.d.ts.map +1 -1
- package/dist/types/src/components/Clipboard/ClipboardContext.d.ts +7 -0
- package/dist/types/src/components/Clipboard/ClipboardContext.d.ts.map +1 -0
- package/dist/types/src/components/Clipboard/ClipboardProvider.d.ts +0 -6
- package/dist/types/src/components/Clipboard/ClipboardProvider.d.ts.map +1 -1
- package/dist/types/src/components/Clipboard/index.d.ts +1 -1
- package/dist/types/src/components/Clipboard/index.d.ts.map +1 -1
- package/dist/types/src/components/Column/Column.d.ts +7 -12
- package/dist/types/src/components/Column/Column.d.ts.map +1 -1
- package/dist/types/src/components/Column/Column.stories.d.ts +2 -2
- package/dist/types/src/components/Column/Column.theme.d.ts +0 -1
- package/dist/types/src/components/Column/Column.theme.d.ts.map +1 -1
- package/dist/types/src/components/Column/ColumnContext.d.ts +9 -0
- package/dist/types/src/components/Column/ColumnContext.d.ts.map +1 -0
- package/dist/types/src/components/Column/index.d.ts +1 -0
- package/dist/types/src/components/Column/index.d.ts.map +1 -1
- package/dist/types/src/components/Column/withColumn.d.ts +40 -4
- package/dist/types/src/components/Column/withColumn.d.ts.map +1 -1
- package/dist/types/src/components/DatePicker/DatePicker.d.ts +0 -10
- package/dist/types/src/components/DatePicker/DatePicker.d.ts.map +1 -1
- package/dist/types/src/components/DatePicker/DatePickerContext.d.ts +13 -0
- package/dist/types/src/components/DatePicker/DatePickerContext.d.ts.map +1 -0
- package/dist/types/src/components/DatePicker/index.d.ts +1 -0
- package/dist/types/src/components/DatePicker/index.d.ts.map +1 -1
- package/dist/types/src/components/Dialog/AlertDialog.d.ts +3 -3
- package/dist/types/src/components/Dialog/Dialog.d.ts +3 -3
- package/dist/types/src/components/ErrorFallback/ErrorStack.d.ts +5 -10
- package/dist/types/src/components/ErrorFallback/ErrorStack.d.ts.map +1 -1
- package/dist/types/src/components/ErrorFallback/index.d.ts +1 -0
- package/dist/types/src/components/ErrorFallback/index.d.ts.map +1 -1
- package/dist/types/src/components/ErrorFallback/parse-stack.d.ts +8 -0
- package/dist/types/src/components/ErrorFallback/parse-stack.d.ts.map +1 -0
- package/dist/types/src/components/Focus/Focus.d.ts +2 -10
- package/dist/types/src/components/Focus/Focus.d.ts.map +1 -1
- package/dist/types/src/components/Focus/FocusContext.d.ts +10 -0
- package/dist/types/src/components/Focus/FocusContext.d.ts.map +1 -0
- package/dist/types/src/components/Focus/index.d.ts +1 -0
- package/dist/types/src/components/Focus/index.d.ts.map +1 -1
- package/dist/types/src/components/Input/Input.d.ts +9 -10
- package/dist/types/src/components/Input/Input.d.ts.map +1 -1
- package/dist/types/src/components/Input/Input.stories.d.ts +7 -2
- package/dist/types/src/components/Input/Input.stories.d.ts.map +1 -1
- package/dist/types/src/components/Input/Input.theme.d.ts +13 -0
- package/dist/types/src/components/Input/Input.theme.d.ts.map +1 -1
- package/dist/types/src/components/Input/InputTriggerContext.d.ts +15 -0
- package/dist/types/src/components/Input/InputTriggerContext.d.ts.map +1 -0
- package/dist/types/src/components/Input/SegmentedInput.d.ts.map +1 -1
- package/dist/types/src/components/Input/index.d.ts +1 -0
- package/dist/types/src/components/Input/index.d.ts.map +1 -1
- package/dist/types/src/components/Main/Main.d.ts +2 -35
- package/dist/types/src/components/Main/Main.d.ts.map +1 -1
- package/dist/types/src/components/Main/Main.stories.d.ts.map +1 -1
- package/dist/types/src/components/Main/Main.theme.d.ts.map +1 -1
- package/dist/types/src/components/Main/MainContext.d.ts +38 -0
- package/dist/types/src/components/Main/MainContext.d.ts.map +1 -0
- package/dist/types/src/components/Main/index.d.ts +1 -0
- package/dist/types/src/components/Main/index.d.ts.map +1 -1
- package/dist/types/src/components/MediaPlayer/MediaPlayer.d.ts +1 -17
- package/dist/types/src/components/MediaPlayer/MediaPlayer.d.ts.map +1 -1
- package/dist/types/src/components/MediaPlayer/index.d.ts +1 -0
- package/dist/types/src/components/MediaPlayer/index.d.ts.map +1 -1
- package/dist/types/src/components/MediaPlayer/media-kind.d.ts +18 -0
- package/dist/types/src/components/MediaPlayer/media-kind.d.ts.map +1 -0
- package/dist/types/src/components/Menu/DropdownMenu.d.ts +6 -22
- package/dist/types/src/components/Menu/DropdownMenu.d.ts.map +1 -1
- package/dist/types/src/components/Menu/DropdownMenu.stories.d.ts +1 -11
- package/dist/types/src/components/Menu/DropdownMenu.stories.d.ts.map +1 -1
- package/dist/types/src/components/Menu/DropdownMenuContext.d.ts +27 -0
- package/dist/types/src/components/Menu/DropdownMenuContext.d.ts.map +1 -0
- package/dist/types/src/components/Menu/index.d.ts +1 -0
- package/dist/types/src/components/Menu/index.d.ts.map +1 -1
- package/dist/types/src/components/Message/Message.d.ts +11 -6
- package/dist/types/src/components/Message/Message.d.ts.map +1 -1
- package/dist/types/src/components/Message/Message.stories.d.ts +4 -1
- package/dist/types/src/components/Message/Message.stories.d.ts.map +1 -1
- package/dist/types/src/components/Message/Message.theme.d.ts.map +1 -1
- package/dist/types/src/components/Message/index.d.ts +1 -0
- package/dist/types/src/components/Message/index.d.ts.map +1 -1
- package/dist/types/src/components/Message/message-icons.d.ts +3 -0
- package/dist/types/src/components/Message/message-icons.d.ts.map +1 -0
- package/dist/types/src/components/Panel/Panel.d.ts +4 -4
- package/dist/types/src/components/Panel/Panel.stories.d.ts.map +1 -1
- package/dist/types/src/components/Panel/Panel.theme.d.ts +1 -1
- package/dist/types/src/components/Panel/Panel.theme.d.ts.map +1 -1
- package/dist/types/src/components/Popover/Popover.d.ts +6 -10
- package/dist/types/src/components/Popover/Popover.d.ts.map +1 -1
- package/dist/types/src/components/Popover/PopoverContext.d.ts +29 -0
- package/dist/types/src/components/Popover/PopoverContext.d.ts.map +1 -0
- package/dist/types/src/components/Popover/index.d.ts +1 -0
- package/dist/types/src/components/Popover/index.d.ts.map +1 -1
- package/dist/types/src/components/ScrollArea/ScrollArea.d.ts +2 -2
- package/dist/types/src/components/ScrollArea/ScrollArea.stories.d.ts +2 -2
- package/dist/types/src/components/ScrollContainer/ScrollContainer.d.ts +3 -16
- package/dist/types/src/components/ScrollContainer/ScrollContainer.d.ts.map +1 -1
- package/dist/types/src/components/ScrollContainer/ScrollContainerContext.d.ts +16 -0
- package/dist/types/src/components/ScrollContainer/ScrollContainerContext.d.ts.map +1 -0
- package/dist/types/src/components/ScrollContainer/index.d.ts +1 -0
- package/dist/types/src/components/ScrollContainer/index.d.ts.map +1 -1
- package/dist/types/src/components/Slider/Slider.d.ts +25 -0
- package/dist/types/src/components/Slider/Slider.d.ts.map +1 -0
- package/dist/types/src/components/Slider/Slider.stories.d.ts +29 -0
- package/dist/types/src/components/Slider/Slider.stories.d.ts.map +1 -0
- package/dist/types/src/components/Slider/Slider.test.d.ts +2 -0
- package/dist/types/src/components/Slider/Slider.test.d.ts.map +1 -0
- package/dist/types/src/components/Slider/Slider.theme.d.ts +7 -0
- package/dist/types/src/components/Slider/Slider.theme.d.ts.map +1 -0
- package/dist/types/src/components/Slider/index.d.ts +2 -0
- package/dist/types/src/components/Slider/index.d.ts.map +1 -0
- package/dist/types/src/components/Splitter/Splitter.d.ts +3 -3
- package/dist/types/src/components/Status/Status.d.ts.map +1 -1
- package/dist/types/src/components/Toolbar/Toolbar.d.ts +4 -2
- package/dist/types/src/components/Toolbar/Toolbar.d.ts.map +1 -1
- package/dist/types/src/components/Toolbar/Toolbar.theme.d.ts.map +1 -1
- package/dist/types/src/components/Tooltip/TextTooltip.d.ts.map +1 -1
- package/dist/types/src/components/Tooltip/Tooltip.d.ts +2 -23
- package/dist/types/src/components/Tooltip/Tooltip.d.ts.map +1 -1
- package/dist/types/src/components/Tooltip/TooltipContext.d.ts +35 -0
- package/dist/types/src/components/Tooltip/TooltipContext.d.ts.map +1 -0
- package/dist/types/src/components/Tooltip/index.d.ts +1 -0
- package/dist/types/src/components/Tooltip/index.d.ts.map +1 -1
- package/dist/types/src/components/index.d.ts +1 -0
- package/dist/types/src/components/index.d.ts.map +1 -1
- package/dist/types/src/exemplars/generics.stories.d.ts +1 -1
- package/dist/types/src/hooks/useIconHref.d.ts +8 -0
- package/dist/types/src/hooks/useIconHref.d.ts.map +1 -1
- package/dist/types/src/hooks/useThemeContext.d.ts +2 -1
- package/dist/types/src/hooks/useThemeContext.d.ts.map +1 -1
- package/dist/types/src/hooks/useThemeContext.test.d.ts +2 -0
- package/dist/types/src/hooks/useThemeContext.test.d.ts.map +1 -0
- package/dist/types/src/playground/Density.stories.d.ts +11 -0
- package/dist/types/src/playground/Density.stories.d.ts.map +1 -0
- package/dist/types/src/playground/Elevation.stories.d.ts +14 -0
- package/dist/types/src/playground/Elevation.stories.d.ts.map +1 -0
- package/dist/types/src/primitives/Container/Container.d.ts +1 -1
- package/dist/types/src/primitives/Container/Container.d.ts.map +1 -1
- package/dist/types/src/primitives/DensityProvider/DensityContext.d.ts +6 -0
- package/dist/types/src/primitives/DensityProvider/DensityContext.d.ts.map +1 -0
- package/dist/types/src/primitives/DensityProvider/DensityProvider.d.ts +10 -4
- package/dist/types/src/primitives/DensityProvider/DensityProvider.d.ts.map +1 -1
- package/dist/types/src/primitives/DensityProvider/index.d.ts +1 -0
- package/dist/types/src/primitives/DensityProvider/index.d.ts.map +1 -1
- package/dist/types/src/primitives/Flex/Flex.d.ts +1 -1
- package/dist/types/src/primitives/Flex/Flex.d.ts.map +1 -1
- package/dist/types/src/primitives/Grid/Grid.d.ts +1 -1
- package/dist/types/src/primitives/Grid/Grid.d.ts.map +1 -1
- package/dist/types/src/primitives/ThemeProvider/IconRegistry.d.ts +15 -0
- package/dist/types/src/primitives/ThemeProvider/IconRegistry.d.ts.map +1 -0
- package/dist/types/src/primitives/ThemeProvider/ThemeProvider.d.ts +1 -2
- package/dist/types/src/primitives/ThemeProvider/ThemeProvider.d.ts.map +1 -1
- package/dist/types/src/primitives/ThemeProvider/ThemeProvider.stories.d.ts +1 -1
- package/dist/types/src/primitives/ThemeProvider/TranslationsContext.d.ts +112 -0
- package/dist/types/src/primitives/ThemeProvider/TranslationsContext.d.ts.map +1 -0
- package/dist/types/src/primitives/ThemeProvider/TranslationsProvider.d.ts +0 -109
- package/dist/types/src/primitives/ThemeProvider/TranslationsProvider.d.ts.map +1 -1
- package/dist/types/src/primitives/ThemeProvider/icon-registry.d.ts +34 -0
- package/dist/types/src/primitives/ThemeProvider/icon-registry.d.ts.map +1 -0
- package/dist/types/src/primitives/ThemeProvider/index.d.ts +3 -1
- package/dist/types/src/primitives/ThemeProvider/index.d.ts.map +1 -1
- package/dist/types/src/testing/decorators/withTheme.d.ts +1 -1
- package/dist/types/src/testing/decorators/withTheme.d.ts.map +1 -1
- package/dist/types/src/theme/defaultTheme.d.ts.map +1 -1
- package/dist/types/src/theme/index.d.ts +1 -0
- package/dist/types/src/theme/index.d.ts.map +1 -1
- package/dist/types/src/util/slots.d.ts +6 -3
- package/dist/types/src/util/slots.d.ts.map +1 -1
- package/dist/types/src/util/slots.stories.d.ts +14 -0
- package/dist/types/src/util/slots.stories.d.ts.map +1 -0
- package/dist/types/tsconfig.tsbuildinfo +1 -1
- package/package.json +25 -27
- package/src/components/Avatars/Avatar.tsx +1 -11
- package/src/components/Avatars/AvatarContext.ts +16 -0
- package/src/components/Avatars/index.ts +2 -0
- package/src/components/Breadcrumb/Breadcrumb.stories.tsx +27 -25
- package/src/components/Breadcrumb/Breadcrumb.theme.ts +7 -5
- package/src/components/Breadcrumb/Breadcrumb.tsx +2 -2
- package/src/components/Button/Button.tsx +2 -11
- package/src/components/Button/ButtonGroupContext.ts +17 -0
- package/src/components/Button/IconButton.stories.tsx +2 -3
- package/src/components/Button/IconButton.theme.ts +15 -2
- package/src/components/Button/IconButton.tsx +6 -1
- package/src/components/Button/SystemIconButton.tsx +23 -16
- package/src/components/Button/index.ts +2 -0
- package/src/components/Calendar/Calendar.theme.ts +5 -5
- package/src/components/Calendar/Calendar.tsx +1 -3
- package/src/components/Calendar/index.ts +2 -0
- package/src/components/Calendar/parse-calendar-date.ts +9 -0
- package/src/components/Card/Card.theme.ts +48 -38
- package/src/components/Card/Card.tsx +77 -16
- package/src/components/Carousel/Carousel.tsx +4 -11
- package/src/components/Carousel/CarouselContext.ts +17 -0
- package/src/components/Carousel/index.ts +2 -0
- package/src/components/Clipboard/ClipboardContext.ts +20 -0
- package/src/components/Clipboard/ClipboardProvider.tsx +2 -12
- package/src/components/Clipboard/CopyButton.tsx +1 -1
- package/src/components/Clipboard/index.ts +1 -1
- package/src/components/Column/Column.stories.tsx +2 -2
- package/src/components/Column/Column.theme.ts +2 -11
- package/src/components/Column/Column.tsx +35 -57
- package/src/components/Column/ColumnContext.ts +22 -0
- package/src/components/Column/index.ts +2 -0
- package/src/components/Column/withColumn.ts +41 -4
- package/src/components/DatePicker/DatePicker.theme.ts +2 -2
- package/src/components/DatePicker/DatePicker.tsx +1 -14
- package/src/components/DatePicker/DatePickerContext.ts +21 -0
- package/src/components/DatePicker/index.ts +2 -0
- package/src/components/ErrorFallback/ErrorStack.tsx +8 -28
- package/src/components/ErrorFallback/index.ts +1 -0
- package/src/components/ErrorFallback/parse-stack.ts +33 -0
- package/src/components/Focus/Focus.stories.tsx +6 -6
- package/src/components/Focus/Focus.tsx +2 -30
- package/src/components/Focus/FocusContext.ts +22 -0
- package/src/components/Focus/index.ts +2 -0
- package/src/components/Image/Image.tsx +1 -1
- package/src/components/Input/Input.stories.tsx +63 -48
- package/src/components/Input/Input.theme.ts +33 -27
- package/src/components/Input/Input.tsx +46 -43
- package/src/components/Input/InputTriggerContext.ts +45 -0
- package/src/components/Input/SegmentedInput.tsx +2 -1
- package/src/components/Input/index.ts +2 -0
- package/src/components/Main/Main.stories.tsx +2 -1
- package/src/components/Main/Main.theme.ts +10 -1
- package/src/components/Main/Main.tsx +1 -115
- package/src/components/Main/MainContext.ts +126 -0
- package/src/components/Main/index.ts +2 -0
- package/src/components/MediaPlayer/MediaPlayer.tsx +16 -47
- package/src/components/MediaPlayer/index.ts +2 -0
- package/src/components/MediaPlayer/media-kind.ts +41 -0
- package/src/components/Menu/DropdownMenu.tsx +27 -44
- package/src/components/Menu/DropdownMenuContext.ts +35 -0
- package/src/components/Menu/Menu.theme.ts +3 -3
- package/src/components/Menu/index.ts +2 -0
- package/src/components/Message/Message.stories.tsx +32 -15
- package/src/components/Message/Message.theme.ts +8 -2
- package/src/components/Message/Message.tsx +47 -23
- package/src/components/Message/index.ts +2 -0
- package/src/components/Message/message-icons.ts +16 -0
- package/src/components/Panel/Panel.stories.tsx +15 -2
- package/src/components/Panel/Panel.theme.ts +15 -6
- package/src/components/Popover/Popover.theme.ts +1 -1
- package/src/components/Popover/Popover.tsx +22 -37
- package/src/components/Popover/PopoverContext.ts +32 -0
- package/src/components/Popover/index.ts +2 -0
- package/src/components/ScrollContainer/ScrollContainer.stories.tsx +1 -1
- package/src/components/ScrollContainer/ScrollContainer.tsx +1 -18
- package/src/components/ScrollContainer/ScrollContainerContext.ts +25 -0
- package/src/components/ScrollContainer/index.ts +2 -0
- package/src/components/Select/Select.theme.ts +2 -2
- package/src/components/Slider/Slider.stories.tsx +107 -0
- package/src/components/Slider/Slider.test.tsx +105 -0
- package/src/components/Slider/Slider.theme.ts +38 -0
- package/src/components/Slider/Slider.tsx +64 -0
- package/src/components/Slider/index.ts +5 -0
- package/src/components/Status/Status.theme.ts +1 -1
- package/src/components/Status/Status.tsx +0 -1
- package/src/components/Tag/Tag.stories.tsx +1 -1
- package/src/components/Toolbar/Toolbar.theme.ts +14 -5
- package/src/components/Toolbar/Toolbar.tsx +5 -1
- package/src/components/Tooltip/TextTooltip.tsx +2 -1
- package/src/components/Tooltip/Tooltip.tsx +12 -35
- package/src/components/Tooltip/TooltipContext.ts +41 -0
- package/src/components/Tooltip/index.ts +2 -0
- package/src/components/index.ts +1 -0
- package/src/hooks/useIconHref.ts +26 -5
- package/src/hooks/useThemeContext.test.tsx +33 -0
- package/src/hooks/useThemeContext.ts +28 -3
- package/src/playground/Density.stories.tsx +41 -0
- package/src/playground/Elevation.stories.tsx +348 -0
- package/src/primitives/DensityProvider/DensityContext.ts +15 -0
- package/src/primitives/DensityProvider/DensityProvider.tsx +12 -6
- package/src/primitives/DensityProvider/index.ts +1 -0
- package/src/primitives/Flex/Flex.stories.tsx +1 -1
- package/src/primitives/Grid/Grid.stories.tsx +1 -1
- package/src/primitives/ThemeProvider/IconRegistry.tsx +42 -0
- package/src/primitives/ThemeProvider/ThemeProvider.tsx +16 -15
- package/src/primitives/ThemeProvider/TranslationsContext.ts +24 -0
- package/src/primitives/ThemeProvider/TranslationsProvider.tsx +4 -16
- package/src/primitives/ThemeProvider/icon-registry.ts +272 -0
- package/src/primitives/ThemeProvider/index.ts +9 -1
- package/src/testing/decorators/withLayout.tsx +4 -4
- package/src/testing/decorators/withLayoutVariants.tsx +3 -3
- package/src/testing/decorators/withTheme.tsx +1 -2
- package/src/theme/defaultTheme.ts +2 -0
- package/src/theme/index.ts +1 -0
- package/src/util/slots.stories.tsx +80 -0
- package/src/util/slots.ts +14 -5
- package/dist/lib/browser/chunk-CMHHVHX3.mjs +0 -46
- package/dist/lib/browser/chunk-CMHHVHX3.mjs.map +0 -7
- package/dist/lib/browser/chunk-GTHV4WYK.mjs +0 -1499
- package/dist/lib/browser/chunk-GTHV4WYK.mjs.map +0 -7
- package/dist/lib/browser/index.mjs +0 -5632
- package/dist/lib/browser/index.mjs.map +0 -7
- package/dist/lib/browser/meta.json +0 -1
- package/dist/lib/browser/testing/index.mjs +0 -133
- package/dist/lib/browser/testing/index.mjs.map +0 -7
- package/dist/lib/browser/translations.mjs +0 -9
- package/dist/lib/browser/translations.mjs.map +0 -7
- package/dist/lib/node-esm/chunk-3VSKWNCQ.mjs +0 -1501
- package/dist/lib/node-esm/chunk-3VSKWNCQ.mjs.map +0 -7
- package/dist/lib/node-esm/chunk-P4KFQGJI.mjs +0 -48
- package/dist/lib/node-esm/chunk-P4KFQGJI.mjs.map +0 -7
- package/dist/lib/node-esm/index.mjs +0 -5633
- package/dist/lib/node-esm/index.mjs.map +0 -7
- package/dist/lib/node-esm/meta.json +0 -1
- package/dist/lib/node-esm/testing/index.mjs +0 -134
- package/dist/lib/node-esm/testing/index.mjs.map +0 -7
- package/dist/lib/node-esm/translations.mjs +0 -10
- package/dist/lib/node-esm/translations.mjs.map +0 -7
- package/src/components/Column/AUDIT.md +0 -148
- package/src/components/Focus/AUDIT.md +0 -43
|
@@ -0,0 +1,1566 @@
|
|
|
1
|
+
import { I18nextProvider, useTranslation } from "react-i18next";
|
|
2
|
+
import { useViewportResize } from "@dxos/react-hooks";
|
|
3
|
+
import { createContextScope } from "@radix-ui/react-context";
|
|
4
|
+
import { Primitive } from "@radix-ui/react-primitive";
|
|
5
|
+
import { Slottable } from "@radix-ui/react-slot";
|
|
6
|
+
import { Suspense, createContext as createContext$1, forwardRef, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
|
|
7
|
+
import { dataDisabled, getHeight, getSize, messageValence, mx, sizeValue, snapSize, staticDisabled, surfaceShadow, surfaceZIndex, textValence } from "@dxos/ui-theme";
|
|
8
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
9
|
+
import { createKeyborg } from "keyborg";
|
|
10
|
+
import { log } from "@dxos/log";
|
|
11
|
+
import { addResources, i18n } from "@dxos/i18n";
|
|
12
|
+
import { enUS } from "date-fns/locale";
|
|
13
|
+
import { getDeep } from "@dxos/util";
|
|
14
|
+
import { useComposedRefs } from "@radix-ui/react-compose-refs";
|
|
15
|
+
import { composeEventHandlers } from "@radix-ui/primitive";
|
|
16
|
+
import { DismissableLayer } from "@radix-ui/react-dismissable-layer";
|
|
17
|
+
import { useId as useId$2 } from "@radix-ui/react-id";
|
|
18
|
+
import * as PopperPrimitive from "@radix-ui/react-popper";
|
|
19
|
+
import { createPopperScope } from "@radix-ui/react-popper";
|
|
20
|
+
import { Portal } from "@radix-ui/react-portal";
|
|
21
|
+
import { Presence } from "@radix-ui/react-presence";
|
|
22
|
+
import { useControllableState } from "@radix-ui/react-use-controllable-state";
|
|
23
|
+
import * as VisuallyHiddenPrimitive from "@radix-ui/react-visually-hidden";
|
|
24
|
+
import ErrorStackParser from "error-stack-parser";
|
|
25
|
+
//#region src/primitives/DensityProvider/DensityContext.ts
|
|
26
|
+
var DensityContext = createContext$1({ density: "md" });
|
|
27
|
+
//#endregion
|
|
28
|
+
//#region src/primitives/DensityProvider/DensityProvider.tsx
|
|
29
|
+
/**
|
|
30
|
+
* Provides density through React context only — controls opt in by reading it and emitting
|
|
31
|
+
* `data-density`, which applies the `--dx-control*` override for that element alone.
|
|
32
|
+
*
|
|
33
|
+
* It deliberately does NOT emit a `dx-density-*` class. Doing so set the knobs for the entire
|
|
34
|
+
* subtree, so a provider intended for one region (the deck's `lg` pane toolbar) silently resized
|
|
35
|
+
* unrelated descendants that read `--dx-control` — form labels, for instance. A region that wants
|
|
36
|
+
* subtree-wide density applies the class itself, where its scope is visible at the call site
|
|
37
|
+
* (see `Toolbar.Root`).
|
|
38
|
+
*/
|
|
39
|
+
var DensityProvider = ({ density, children }) => /* @__PURE__ */ jsx(DensityContext.Provider, {
|
|
40
|
+
value: { density },
|
|
41
|
+
children
|
|
42
|
+
});
|
|
43
|
+
//#endregion
|
|
44
|
+
//#region src/primitives/ElevationProvider/ElevationProvider.tsx
|
|
45
|
+
var ElevationContext = createContext$1({ elevation: "base" });
|
|
46
|
+
var ElevationProvider = ({ elevation, children }) => /* @__PURE__ */ jsx(ElevationContext.Provider, {
|
|
47
|
+
value: { elevation },
|
|
48
|
+
children
|
|
49
|
+
});
|
|
50
|
+
//#endregion
|
|
51
|
+
//#region src/primitives/ThemeProvider/icon-registry.ts
|
|
52
|
+
var SVG_NS = "http://www.w3.org/2000/svg";
|
|
53
|
+
var SPRITE_URL = "/icons.svg";
|
|
54
|
+
var SYMBOL_PATTERN = /^([a-z0-9]+)--([a-z0-9-]+)--([a-z]+)$/;
|
|
55
|
+
/**
|
|
56
|
+
* Phosphor's published layout: `{variant}/{name}[-{variant}].svg`, regular being unsuffixed.
|
|
57
|
+
*/
|
|
58
|
+
var phosphorIconSource = (route = "/phosphor") => ({
|
|
59
|
+
iconSet: "ph",
|
|
60
|
+
url: (name, variant) => `${route}/${variant}/${name}${variant === "regular" ? "" : `-${variant}`}.svg`
|
|
61
|
+
});
|
|
62
|
+
var defaultSources = [phosphorIconSource()];
|
|
63
|
+
var NoopRegistry = {
|
|
64
|
+
hasIcon: () => false,
|
|
65
|
+
requestIcon: () => {},
|
|
66
|
+
subscribe: () => () => {}
|
|
67
|
+
};
|
|
68
|
+
var IconRegistryContext = createContext$1(NoopRegistry);
|
|
69
|
+
var REGISTRY_GLOBAL = "__dxIconRegistry";
|
|
70
|
+
var getHost = () => globalThis;
|
|
71
|
+
var setActiveRegistry = (registry) => {
|
|
72
|
+
const host = getHost();
|
|
73
|
+
if (registry === void 0) delete host[REGISTRY_GLOBAL];
|
|
74
|
+
else host[REGISTRY_GLOBAL] = registry;
|
|
75
|
+
};
|
|
76
|
+
var getIconRegistry = () => getHost()[REGISTRY_GLOBAL] ?? NoopRegistry;
|
|
77
|
+
var useIconRegistry = () => useContext(IconRegistryContext);
|
|
78
|
+
var createDefsContainer = () => {
|
|
79
|
+
const svg = document.createElementNS(SVG_NS, "svg");
|
|
80
|
+
svg.setAttribute("aria-hidden", "true");
|
|
81
|
+
svg.setAttribute("data-dx-icon-sprite", "");
|
|
82
|
+
svg.style.position = "absolute";
|
|
83
|
+
svg.style.width = "0";
|
|
84
|
+
svg.style.height = "0";
|
|
85
|
+
svg.style.overflow = "hidden";
|
|
86
|
+
document.body.appendChild(svg);
|
|
87
|
+
return svg;
|
|
88
|
+
};
|
|
89
|
+
var parseSymbolName = (name) => {
|
|
90
|
+
const match = name.match(SYMBOL_PATTERN);
|
|
91
|
+
if (!match) return;
|
|
92
|
+
return {
|
|
93
|
+
iconSet: match[1],
|
|
94
|
+
iconName: match[2],
|
|
95
|
+
variant: match[3]
|
|
96
|
+
};
|
|
97
|
+
};
|
|
98
|
+
var ingestSvgChildrenAsSymbol = (sourceSvg, id) => {
|
|
99
|
+
if (sourceSvg.tagName.toLowerCase() !== "svg") return;
|
|
100
|
+
const symbol = document.createElementNS(SVG_NS, "symbol");
|
|
101
|
+
symbol.setAttribute("id", id);
|
|
102
|
+
const viewBox = sourceSvg.getAttribute("viewBox");
|
|
103
|
+
if (viewBox) symbol.setAttribute("viewBox", viewBox);
|
|
104
|
+
symbol.setAttribute("fill", "currentColor");
|
|
105
|
+
for (const child of Array.from(sourceSvg.children)) symbol.appendChild(child.cloneNode(true));
|
|
106
|
+
return symbol;
|
|
107
|
+
};
|
|
108
|
+
var loadStaticSprite = async (state) => {
|
|
109
|
+
let text;
|
|
110
|
+
try {
|
|
111
|
+
const response = await fetch(SPRITE_URL);
|
|
112
|
+
if (!response.ok) return;
|
|
113
|
+
text = await response.text();
|
|
114
|
+
} catch {
|
|
115
|
+
return;
|
|
116
|
+
}
|
|
117
|
+
const root = new DOMParser().parseFromString(text, "image/svg+xml").documentElement;
|
|
118
|
+
if (root.tagName.toLowerCase() !== "svg") return;
|
|
119
|
+
for (const child of Array.from(root.children)) {
|
|
120
|
+
const node = state.defs.ownerDocument.importNode(child, true);
|
|
121
|
+
state.defs.appendChild(node);
|
|
122
|
+
}
|
|
123
|
+
for (const symbol of state.defs.querySelectorAll("symbol[id]")) state.loaded.add(symbol.id);
|
|
124
|
+
};
|
|
125
|
+
var resolveDynamic = async (state, staticReady, name) => {
|
|
126
|
+
await staticReady;
|
|
127
|
+
if (state.loaded.has(name)) return;
|
|
128
|
+
const parsed = parseSymbolName(name);
|
|
129
|
+
const source = parsed && state.sources.find(({ iconSet }) => iconSet === parsed.iconSet);
|
|
130
|
+
if (!parsed || !source) {
|
|
131
|
+
state.failed.add(name);
|
|
132
|
+
return;
|
|
133
|
+
}
|
|
134
|
+
let svgText;
|
|
135
|
+
try {
|
|
136
|
+
const response = await fetch(source.url(parsed.iconName, parsed.variant));
|
|
137
|
+
if (!response.ok) {
|
|
138
|
+
if (response.status === 404) state.failed.add(name);
|
|
139
|
+
return;
|
|
140
|
+
}
|
|
141
|
+
svgText = await response.text();
|
|
142
|
+
} catch {
|
|
143
|
+
return;
|
|
144
|
+
}
|
|
145
|
+
const symbol = ingestSvgChildrenAsSymbol(new DOMParser().parseFromString(svgText, "image/svg+xml").documentElement, name);
|
|
146
|
+
if (!symbol) {
|
|
147
|
+
state.failed.add(name);
|
|
148
|
+
return;
|
|
149
|
+
}
|
|
150
|
+
state.defs.appendChild(symbol);
|
|
151
|
+
state.loaded.add(name);
|
|
152
|
+
};
|
|
153
|
+
var createRegistry = (sources) => {
|
|
154
|
+
const defs = createDefsContainer();
|
|
155
|
+
const listeners = /* @__PURE__ */ new Set();
|
|
156
|
+
const notify = () => {
|
|
157
|
+
for (const listener of listeners) listener();
|
|
158
|
+
};
|
|
159
|
+
const state = {
|
|
160
|
+
defs,
|
|
161
|
+
sources,
|
|
162
|
+
loaded: /* @__PURE__ */ new Set(),
|
|
163
|
+
inflight: /* @__PURE__ */ new Map(),
|
|
164
|
+
failed: /* @__PURE__ */ new Set()
|
|
165
|
+
};
|
|
166
|
+
const staticReady = loadStaticSprite(state).then(notify);
|
|
167
|
+
return {
|
|
168
|
+
registry: {
|
|
169
|
+
hasIcon: (name) => state.loaded.has(name),
|
|
170
|
+
requestIcon: (name) => {
|
|
171
|
+
if (state.loaded.has(name) || state.inflight.has(name) || state.failed.has(name)) return;
|
|
172
|
+
const promise = resolveDynamic(state, staticReady, name).then(notify).finally(() => {
|
|
173
|
+
state.inflight.delete(name);
|
|
174
|
+
});
|
|
175
|
+
state.inflight.set(name, promise);
|
|
176
|
+
},
|
|
177
|
+
subscribe: (listener) => {
|
|
178
|
+
listeners.add(listener);
|
|
179
|
+
return () => {
|
|
180
|
+
listeners.delete(listener);
|
|
181
|
+
};
|
|
182
|
+
}
|
|
183
|
+
},
|
|
184
|
+
dispose: () => {
|
|
185
|
+
listeners.clear();
|
|
186
|
+
defs.remove();
|
|
187
|
+
}
|
|
188
|
+
};
|
|
189
|
+
};
|
|
190
|
+
var sharedRegistry;
|
|
191
|
+
var acquireRegistry = (sources) => {
|
|
192
|
+
if (!sharedRegistry) {
|
|
193
|
+
sharedRegistry = {
|
|
194
|
+
...createRegistry(sources),
|
|
195
|
+
refCount: 0
|
|
196
|
+
};
|
|
197
|
+
setActiveRegistry(sharedRegistry.registry);
|
|
198
|
+
}
|
|
199
|
+
const handle = sharedRegistry;
|
|
200
|
+
handle.refCount += 1;
|
|
201
|
+
let released = false;
|
|
202
|
+
return {
|
|
203
|
+
registry: handle.registry,
|
|
204
|
+
release: () => {
|
|
205
|
+
if (released) return;
|
|
206
|
+
released = true;
|
|
207
|
+
handle.refCount -= 1;
|
|
208
|
+
if (handle.refCount === 0 && sharedRegistry === handle) {
|
|
209
|
+
sharedRegistry = void 0;
|
|
210
|
+
if (getIconRegistry() === handle.registry) setActiveRegistry(void 0);
|
|
211
|
+
handle.dispose();
|
|
212
|
+
}
|
|
213
|
+
}
|
|
214
|
+
};
|
|
215
|
+
};
|
|
216
|
+
//#endregion
|
|
217
|
+
//#region src/primitives/ThemeProvider/IconRegistry.tsx
|
|
218
|
+
/**
|
|
219
|
+
* Provides the shared icon registry to descendants (consumed by `useIconHref`), acquiring
|
|
220
|
+
* the refcounted document-level singleton on mount and releasing it on unmount.
|
|
221
|
+
*/
|
|
222
|
+
var IconRegistryProvider = ({ children, sources = defaultSources }) => {
|
|
223
|
+
const [registry, setRegistry] = useState(NoopRegistry);
|
|
224
|
+
useEffect(() => {
|
|
225
|
+
if (typeof document === "undefined") return;
|
|
226
|
+
const { registry, release } = acquireRegistry(sources);
|
|
227
|
+
setRegistry(registry);
|
|
228
|
+
return release;
|
|
229
|
+
}, []);
|
|
230
|
+
return /* @__PURE__ */ jsx(IconRegistryContext.Provider, {
|
|
231
|
+
value: registry,
|
|
232
|
+
children
|
|
233
|
+
});
|
|
234
|
+
};
|
|
235
|
+
//#endregion
|
|
236
|
+
//#region src/util/mobile.ts
|
|
237
|
+
/**
|
|
238
|
+
* Determines whether the on-screen keyboard will appear on `focus` outside of a click handler.
|
|
239
|
+
*/
|
|
240
|
+
var hasIosKeyboard = () => {
|
|
241
|
+
return !!navigator.userAgent.match(/iP(ad|od|hone).+Safari/);
|
|
242
|
+
};
|
|
243
|
+
//#endregion
|
|
244
|
+
//#region src/primitives/ThemeProvider/TranslationsContext.ts
|
|
245
|
+
var initialNs = "dxos-common";
|
|
246
|
+
var initialDtLocale = enUS;
|
|
247
|
+
var TranslationsContext = createContext$1({
|
|
248
|
+
appNs: initialNs,
|
|
249
|
+
dtLocale: initialDtLocale
|
|
250
|
+
});
|
|
251
|
+
var useTranslation$1 = (...args) => {
|
|
252
|
+
const result = useTranslation(...args);
|
|
253
|
+
const { dtLocale } = useContext(TranslationsContext);
|
|
254
|
+
return {
|
|
255
|
+
...result,
|
|
256
|
+
dtLocale
|
|
257
|
+
};
|
|
258
|
+
};
|
|
259
|
+
//#endregion
|
|
260
|
+
//#region src/primitives/ThemeProvider/TranslationsProvider.tsx
|
|
261
|
+
var TranslationsProvider = ({ fallback, resourceExtensions, children, appNs, dtLocale }) => {
|
|
262
|
+
const [loaded, setLoaded] = useState(false);
|
|
263
|
+
useEffect(() => {
|
|
264
|
+
setLoaded(false);
|
|
265
|
+
if (resourceExtensions && resourceExtensions.length) addResources(resourceExtensions);
|
|
266
|
+
setLoaded(true);
|
|
267
|
+
}, [resourceExtensions]);
|
|
268
|
+
return /* @__PURE__ */ jsx(I18nextProvider, {
|
|
269
|
+
i18n,
|
|
270
|
+
children: /* @__PURE__ */ jsx(TranslationsContext.Provider, {
|
|
271
|
+
value: {
|
|
272
|
+
appNs: appNs ?? "dxos-common",
|
|
273
|
+
dtLocale: dtLocale ?? initialDtLocale
|
|
274
|
+
},
|
|
275
|
+
children: /* @__PURE__ */ jsx(Suspense, {
|
|
276
|
+
fallback,
|
|
277
|
+
children: loaded ? children : fallback
|
|
278
|
+
})
|
|
279
|
+
})
|
|
280
|
+
});
|
|
281
|
+
};
|
|
282
|
+
//#endregion
|
|
283
|
+
//#region src/primitives/ThemeProvider/ThemeProvider.tsx
|
|
284
|
+
/**
|
|
285
|
+
* @internal
|
|
286
|
+
*/
|
|
287
|
+
var ThemeContext = createContext$1(void 0);
|
|
288
|
+
var ThemeProvider = ({ children, fallback = null, resourceExtensions, appNs, tx = (_path, _styleProps, ..._options) => void 0, themeMode = "dark", rootDensity = "md", platform }) => {
|
|
289
|
+
useEffect(() => {
|
|
290
|
+
if (document.defaultView) {
|
|
291
|
+
const kb = createKeyborg(document.defaultView);
|
|
292
|
+
kb.subscribe(handleInputModalityChange);
|
|
293
|
+
return () => kb.unsubscribe(handleInputModalityChange);
|
|
294
|
+
}
|
|
295
|
+
}, []);
|
|
296
|
+
const safeAreaPadding = useSafeArea();
|
|
297
|
+
const contextValue = useMemo(() => ({
|
|
298
|
+
tx,
|
|
299
|
+
themeMode,
|
|
300
|
+
hasIosKeyboard: hasIosKeyboard(),
|
|
301
|
+
safeAreaPadding,
|
|
302
|
+
platform
|
|
303
|
+
}), [
|
|
304
|
+
tx,
|
|
305
|
+
themeMode,
|
|
306
|
+
safeAreaPadding,
|
|
307
|
+
platform
|
|
308
|
+
]);
|
|
309
|
+
return /* @__PURE__ */ jsx(ThemeContext.Provider, {
|
|
310
|
+
value: contextValue,
|
|
311
|
+
children: /* @__PURE__ */ jsx(IconRegistryProvider, { children: /* @__PURE__ */ jsx(TranslationsProvider, {
|
|
312
|
+
fallback,
|
|
313
|
+
resourceExtensions,
|
|
314
|
+
appNs,
|
|
315
|
+
children: /* @__PURE__ */ jsx(ElevationProvider, {
|
|
316
|
+
elevation: "base",
|
|
317
|
+
children: /* @__PURE__ */ jsx(DensityProvider, {
|
|
318
|
+
density: rootDensity,
|
|
319
|
+
children
|
|
320
|
+
})
|
|
321
|
+
})
|
|
322
|
+
}) })
|
|
323
|
+
});
|
|
324
|
+
};
|
|
325
|
+
var handleInputModalityChange = (isUsingKeyboard) => {
|
|
326
|
+
if (isUsingKeyboard) document.body.setAttribute("data-w-keyboard", "true");
|
|
327
|
+
else document.body.removeAttribute("data-w-keyboard");
|
|
328
|
+
};
|
|
329
|
+
//#endregion
|
|
330
|
+
//#region src/hooks/useElevationContext.ts
|
|
331
|
+
var useElevationContext = (propsElevation) => {
|
|
332
|
+
const { elevation } = useContext(ElevationContext);
|
|
333
|
+
return propsElevation ?? elevation;
|
|
334
|
+
};
|
|
335
|
+
//#endregion
|
|
336
|
+
//#region src/hooks/useSafeArea.ts
|
|
337
|
+
var initialSafeArea = {
|
|
338
|
+
top: NaN,
|
|
339
|
+
right: NaN,
|
|
340
|
+
bottom: NaN,
|
|
341
|
+
left: NaN
|
|
342
|
+
};
|
|
343
|
+
var useSafeArea = () => {
|
|
344
|
+
const [padding, setPadding] = useState(initialSafeArea);
|
|
345
|
+
useViewportResize(useCallback(() => {
|
|
346
|
+
setPadding({
|
|
347
|
+
top: parseFloat(getComputedStyle(document.documentElement).getPropertyValue("--safe-area-top")),
|
|
348
|
+
right: parseFloat(getComputedStyle(document.documentElement).getPropertyValue("--safe-area-right")),
|
|
349
|
+
bottom: parseFloat(getComputedStyle(document.documentElement).getPropertyValue("--safe-area-bottom")),
|
|
350
|
+
left: parseFloat(getComputedStyle(document.documentElement).getPropertyValue("--safe-area-left"))
|
|
351
|
+
});
|
|
352
|
+
}, []));
|
|
353
|
+
return padding;
|
|
354
|
+
};
|
|
355
|
+
//#endregion
|
|
356
|
+
//#region src/theme/bindTheme.ts
|
|
357
|
+
var bindTheme = (theme) => {
|
|
358
|
+
return (path, styleProps, ...etc) => {
|
|
359
|
+
const result = getDeep(theme, path.split("."));
|
|
360
|
+
return typeof result === "function" ? result(styleProps ?? {}, ...etc) : void 0;
|
|
361
|
+
};
|
|
362
|
+
};
|
|
363
|
+
//#endregion
|
|
364
|
+
//#region src/components/Avatars/Avatar.theme.ts
|
|
365
|
+
var root$19 = ({ size = 10, inGroup }, ...etc) => mx("relative inline-flex shrink-0", getSize(size), inGroup && (size === "px" || size <= 3 ? "-mr-1" : "-mr-2"), ...etc);
|
|
366
|
+
var label$1 = ({ srOnly }, ...etc) => mx(srOnly && "sr-only", ...etc);
|
|
367
|
+
var description$3 = ({ srOnly }, ...etc) => mx("text-description", srOnly && "sr-only", ...etc);
|
|
368
|
+
var frame = ({ variant }, ...etc) => mx("h-full w-full bg-(--surface-bg)", variant === "circle" ? "rounded-full" : "rounded-sm", ...etc);
|
|
369
|
+
var statusIcon = ({ status, size = 3 }, ...etc) => mx("absolute bottom-0 end-0", getSize(size), status === "inactive" ? "text-amber-400 dark:text-amber-300" : status === "active" ? "text-emerald-400 dark:text-emerald-300" : "text-neutral-400 dark:text-neutral-300", ...etc);
|
|
370
|
+
var ring$1 = ({ status, variant, animation }, ...etc) => mx("absolute inset-0 border-2", variant === "circle" ? "rounded-full" : "rounded-sm", status === "current" ? "border-primary-400 dark:border-primary-500" : status === "active" ? "border-emerald-400 dark:border-emerald-400" : status === "error" ? "border-rose-400 dark:border-rose-500" : status === "warning" ? "border-amber-400 dark:border-amber-500" : status === "inactive" ? "border-separator" : status === "internal" ? "border-fuchsia-600" : "border-[color:var(--surface-bg)]", animation === "pulse" ? "animate-halo-pulse" : "", ...etc);
|
|
371
|
+
var fallbackText = (_props, ...etc) => mx("fill-white", ...etc);
|
|
372
|
+
var group$1 = (_props, ...etc) => mx("inline-flex items-center", ...etc);
|
|
373
|
+
var groupLabel$1 = ({ size, srOnly }, ...etc) => mx(srOnly ? "sr-only" : "rounded-full truncate text-sm leading-none py-1 px-2 relative z-[1] flex items-center justify-center", size && getHeight(size), ...etc);
|
|
374
|
+
var groupDescription = ({ srOnly }, ...etc) => mx(srOnly ? "sr-only" : "text-description", ...etc);
|
|
375
|
+
var avatarTheme = {
|
|
376
|
+
root: root$19,
|
|
377
|
+
label: label$1,
|
|
378
|
+
description: description$3,
|
|
379
|
+
statusIcon,
|
|
380
|
+
frame,
|
|
381
|
+
ring: ring$1,
|
|
382
|
+
fallbackText,
|
|
383
|
+
group: group$1,
|
|
384
|
+
groupLabel: groupLabel$1,
|
|
385
|
+
groupDescription
|
|
386
|
+
};
|
|
387
|
+
//#endregion
|
|
388
|
+
//#region src/components/Breadcrumb/Breadcrumb.theme.ts
|
|
389
|
+
var root$18 = (_props, ...etc) => mx("flex items-center grow overflow-hidden", ...etc);
|
|
390
|
+
var list = (_props, ...etc) => mx("flex items-center min-w-0 grow overflow-x-auto scrollbar-none", ...etc);
|
|
391
|
+
var listItem = (_props, ...etc) => mx("flex items-center shrink-0", ...etc);
|
|
392
|
+
var current = (_props, ...etc) => mx("whitespace-nowrap", ...etc);
|
|
393
|
+
var separator$2 = (_props, ...etc) => mx("shrink-0 opacity-50", ...etc);
|
|
394
|
+
var breadcrumbTheme = {
|
|
395
|
+
root: root$18,
|
|
396
|
+
list,
|
|
397
|
+
listItem,
|
|
398
|
+
current,
|
|
399
|
+
separator: separator$2
|
|
400
|
+
};
|
|
401
|
+
//#endregion
|
|
402
|
+
//#region src/components/Button/Button.theme.ts
|
|
403
|
+
var root$17 = (_props, ...etc) => {
|
|
404
|
+
return mx("dx-button dx-focus-ring group gap-1 [&_span]:truncate", ...etc);
|
|
405
|
+
};
|
|
406
|
+
var group = (_props, ...etc) => {
|
|
407
|
+
return mx("inline-flex rounded-xs [&>:first-child]:rounded-w-sm [&>:last-child]:rounded-ie-sm [&>button]:relative", ...etc);
|
|
408
|
+
};
|
|
409
|
+
var buttonTheme = {
|
|
410
|
+
root: root$17,
|
|
411
|
+
group
|
|
412
|
+
};
|
|
413
|
+
//#endregion
|
|
414
|
+
//#region src/components/Button/IconButton.theme.ts
|
|
415
|
+
var root$16 = ({ iconOnly, square, caretDown }, ...etc) => {
|
|
416
|
+
return mx(!iconOnly && "gap-1.5", (square || iconOnly && !caretDown) && "aspect-square justify-self-center", ...etc);
|
|
417
|
+
};
|
|
418
|
+
var iconButtonTheme = { root: root$16 };
|
|
419
|
+
//#endregion
|
|
420
|
+
//#region src/components/Calendar/Calendar.theme.ts
|
|
421
|
+
var root$15 = (_p, ...etc) => mx("relative w-fit h-fit self-start p-2 select-none dx-group-surface text-base-fg", ...etc);
|
|
422
|
+
var nav = (_p, ...etc) => mx("flex items-center justify-between pb-1", ...etc);
|
|
423
|
+
var caption_label = (_p, ...etc) => mx("flex-1 text-center text-sm font-medium", ...etc);
|
|
424
|
+
var button_previous = (_p, ...etc) => mx("size-(--dx-control-sm) inline-flex items-center justify-center rounded-sm shrink-0", "text-description hover:bg-hover-surface", "data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed", ...etc);
|
|
425
|
+
var button_next = (_p, ...etc) => mx("size-(--dx-control-sm) inline-flex items-center justify-center rounded-sm shrink-0", "text-description hover:bg-hover-surface", "data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed", ...etc);
|
|
426
|
+
var month_grid = (_p, ...etc) => mx("w-full border-collapse", ...etc);
|
|
427
|
+
var weekdays = (_p, ...etc) => mx("", ...etc);
|
|
428
|
+
var weekday = (_p, ...etc) => mx("w-(--dx-control-md) h-(--dx-control-sm) text-xs font-thin text-description", ...etc);
|
|
429
|
+
var day = (_p, ...etc) => mx("relative size-(--dx-control-md) p-0 text-center text-sm rounded-sm inline-flex items-center justify-center cursor-pointer", "outline-none", "data-[hovered]:bg-hover-surface", "data-[focus-visible]:outline-2 data-[focus-visible]:outline-primary-500", "data-[today]:text-orange-500 data-[today]:font-medium", "data-[selected]:bg-primary-500 data-[selected]:text-primary-fg data-[selected]:hover:bg-primary-500", "data-[outside-month]:text-description/40", "data-[disabled]:text-description/40 data-[disabled]:cursor-not-allowed data-[disabled]:hover:bg-transparent", "data-[unavailable]:line-through data-[unavailable]:text-description/50 data-[unavailable]:cursor-not-allowed", "data-[selection-start]:rounded-l-sm data-[selection-end]:rounded-r-sm", "data-[selection-start]:bg-primary-500 data-[selection-end]:bg-primary-500", ...etc);
|
|
430
|
+
var calendarTheme = {
|
|
431
|
+
root: root$15,
|
|
432
|
+
nav,
|
|
433
|
+
caption_label,
|
|
434
|
+
button_previous,
|
|
435
|
+
button_next,
|
|
436
|
+
month_grid,
|
|
437
|
+
weekdays,
|
|
438
|
+
weekday,
|
|
439
|
+
day
|
|
440
|
+
};
|
|
441
|
+
//#endregion
|
|
442
|
+
//#region src/components/Column/withColumn.ts
|
|
443
|
+
/**
|
|
444
|
+
* Column-aware theme utilities.
|
|
445
|
+
* Components apply these in their theme functions to participate in the Column grid
|
|
446
|
+
* without importing Column React components.
|
|
447
|
+
*
|
|
448
|
+
* CSS custom property cascade:
|
|
449
|
+
* - Column.Root sets `--dx-col: 2 / span 1` (center column placement).
|
|
450
|
+
* - ScrollArea.Viewport resets `--dx-col: auto` after consuming `--gutter`.
|
|
451
|
+
* - Components apply `grid-column: var(--dx-col, auto)` to auto-center in Column
|
|
452
|
+
* or do nothing outside Column / inside ScrollArea.
|
|
453
|
+
*
|
|
454
|
+
* ## Which one to use
|
|
455
|
+
*
|
|
456
|
+
* Three placement mechanisms coexist because they solve different problems. An earlier plan was to
|
|
457
|
+
* collapse them onto `--dx-col` alone; that was tried and abandoned — the other two are each the
|
|
458
|
+
* only way to express their case (see AUDIT.md §3).
|
|
459
|
+
*
|
|
460
|
+
* | Mechanism | Places | Reach for it when |
|
|
461
|
+
* | ----------------- | ----------------------------- | -------------------------------------------------- |
|
|
462
|
+
* | `center()` | the element itself | one element belongs in the content track |
|
|
463
|
+
* | `placeContent()` | the element's children | a subgrid row mixes gutter slots with content |
|
|
464
|
+
* | `propagate()` | opens the tracks to children | a child must reach the gutters |
|
|
465
|
+
*
|
|
466
|
+
* - **`center()`** is inheritance-based, so it survives a `display: contents` wrapper — the case
|
|
467
|
+
* where a child selector or subgrid silently fails. Prefer it whenever it is sufficient.
|
|
468
|
+
* - **`placeContent()`** needs the element to already be a subgrid row (`col-span-3 grid
|
|
469
|
+
* grid-cols-subgrid`). It reaches grandchildren too, so a wrapper element (a link, a button)
|
|
470
|
+
* doesn't strand its content in column 1.
|
|
471
|
+
* - **`propagate()`** is the only one that lets a *descendant* address the gutters: it spans the
|
|
472
|
+
* element across all tracks and re-exposes them via subgrid, with `.dx-container` exempted so a
|
|
473
|
+
* ScrollArea can span full width and keep its scrollbar in the gutter. `Dialog.Body` depends on
|
|
474
|
+
* this — replacing it with `center()` confines the body's ScrollArea to the content track and
|
|
475
|
+
* pulls the scrollbar 32px inboard.
|
|
476
|
+
*/
|
|
477
|
+
var withColumn = {
|
|
478
|
+
/**
|
|
479
|
+
* Centers element in the Column grid via --dx-col. No-op outside Column or inside ScrollArea.
|
|
480
|
+
*/
|
|
481
|
+
center: () => "[grid-column:var(--dx-col,auto)]",
|
|
482
|
+
/**
|
|
483
|
+
* Places a subgrid row's content children in the center track, leaving `.dx-gutter` slots to
|
|
484
|
+
* their own explicit `col-start`. Covers grandchildren too, so a wrapper element (a link, a
|
|
485
|
+
* button) doesn't strand its content in column 1 — and excludes gutters at that depth as well,
|
|
486
|
+
* since a `display: contents` wrapper promotes its children into this grid.
|
|
487
|
+
*/
|
|
488
|
+
placeContent: () => "[&>*:not(.dx-gutter)]:col-start-2 [&>*:not(.dx-gutter)>*:not(.dx-gutter)]:col-start-2",
|
|
489
|
+
/**
|
|
490
|
+
* Propagates the Column grid to children via subgrid. No-op outside Column.
|
|
491
|
+
* Direct children default to center column unless they are a dx-container (ScrollArea).
|
|
492
|
+
*/
|
|
493
|
+
propagate: () => "[.dx-column-root_&]:col-span-full [.dx-column-root_&]:grid [.dx-column-root_&]:grid-cols-subgrid [.dx-column-root_&]:[&>*:not(.dx-container)]:[grid-column:var(--dx-col,auto)]",
|
|
494
|
+
/**
|
|
495
|
+
* Resets --dx-col after consuming --gutter. Applied by ScrollArea.Viewport.
|
|
496
|
+
*/
|
|
497
|
+
consumed: () => "[--dx-col:auto]"
|
|
498
|
+
};
|
|
499
|
+
//#endregion
|
|
500
|
+
//#region src/components/Card/Card.theme.ts
|
|
501
|
+
var subgrid = "col-span-3 grid grid-cols-subgrid gap-1 items-center";
|
|
502
|
+
var root$14 = ({ border, fullWidth }, ...etc) => mx("dx-card dx-card-surface dx-card-min-width dx-card-max-width min-h-(--dx-rail-item) p-1 gap-1", "group/card relative shrink-0 overflow-hidden", border && "border-2 border-separator rounded-md dx-focus-ring-group-y-indicator", fullWidth && "max-w-none!", ...etc);
|
|
503
|
+
var header$3 = (_, ...etc) => mx("dx-card__header", subgrid, withColumn.placeContent(), ...etc);
|
|
504
|
+
var title$3 = (_, ...etc) => mx("dx-card__title grow truncate", ...etc);
|
|
505
|
+
var body$2 = (_, ...etc) => mx("dx-card__body contents", ...etc);
|
|
506
|
+
var block$3 = (_, ...etc) => mx("dx-card__block", ...etc);
|
|
507
|
+
var text$1 = ({ variant = "default", truncate: _truncate }, ...etc) => mx("dx-card__text items-center overflow-hidden", variant === "default" && "py-1", variant === "description" && "py-1.5 text-description", ...etc);
|
|
508
|
+
var textSpan = ({ variant = "default", truncate }, ...etc) => mx(variant === "description" && "text-sm text-description line-clamp-3", truncate && "truncate", ...etc);
|
|
509
|
+
var poster = (_, ...etc) => mx("dx-card__poster col-span-3 max-h-[200px] select-none pointer-events-none", ...etc);
|
|
510
|
+
var posterIcon = (_, ...etc) => mx("dx-card__poster-icon col-span-3 grid place-items-center bg-input-surface text-subdued max-h-[200px]", ...etc);
|
|
511
|
+
var action = (_, ...etc) => mx(mx("dx-card__action", subgrid, withColumn.placeContent(), "p-0! gap-0! w-full text-start overflow-hidden"), ...etc);
|
|
512
|
+
var actionLabel = (_, ...etc) => mx("dx-card__action-label min-w-0 flex-1 truncate", ...etc);
|
|
513
|
+
var actionContent = (_, ...etc) => mx("dx-card__action-content min-w-0 flex-1 flex items-baseline gap-2 overflow-hidden", ...etc);
|
|
514
|
+
var actionAnnotation = (_, ...etc) => mx("dx-card__action-annotation shrink-0 text-xs text-description tabular-nums", ...etc);
|
|
515
|
+
var link = (_, ...etc) => mx(mx("dx-card__link", subgrid, withColumn.placeContent(), "group p-0! dx-button dx-focus-ring min-h-1!"), ...etc);
|
|
516
|
+
var linkLabel = (_, ...etc) => mx("dx-card__link-label min-w-0 flex-1 truncate text-sm!", ...etc);
|
|
517
|
+
var row$1 = ({ fullWidth }, ...etc) => mx("dx-card__row", fullWidth ? "col-span-full" : mx(subgrid, withColumn.placeContent()), ...etc);
|
|
518
|
+
var section = (_, ...etc) => mx("dx-card__section", subgrid, ...etc);
|
|
519
|
+
var sectionTitle = (_, ...etc) => mx("dx-card__section-title col-start-2 col-span-full py-2 text-xs text-description font-medium uppercase", ...etc);
|
|
520
|
+
var cardTheme = {
|
|
521
|
+
"root": root$14,
|
|
522
|
+
"header": header$3,
|
|
523
|
+
"title": title$3,
|
|
524
|
+
"body": body$2,
|
|
525
|
+
"block": block$3,
|
|
526
|
+
"row": row$1,
|
|
527
|
+
"section": section,
|
|
528
|
+
"section-title": sectionTitle,
|
|
529
|
+
"text": text$1,
|
|
530
|
+
"text-span": textSpan,
|
|
531
|
+
"poster": poster,
|
|
532
|
+
"poster-icon": posterIcon,
|
|
533
|
+
"action": action,
|
|
534
|
+
"action-label": actionLabel,
|
|
535
|
+
"action-content": actionContent,
|
|
536
|
+
"action-annotation": actionAnnotation,
|
|
537
|
+
"link": link,
|
|
538
|
+
"link-label": linkLabel
|
|
539
|
+
};
|
|
540
|
+
//#endregion
|
|
541
|
+
//#region src/components/Column/Column.theme.ts
|
|
542
|
+
var root$13 = (_, ...etc) => {
|
|
543
|
+
return mx("dx-column-root grid", ...etc);
|
|
544
|
+
};
|
|
545
|
+
/**
|
|
546
|
+
* Three-column subgrid row spanning all 3 columns of the parent Column.Root grid.
|
|
547
|
+
* Placement is explicit, not source-order based:
|
|
548
|
+
* - `Column.Block` self-places into column 1 (leading) or column 3 (trailing, `end`) and
|
|
549
|
+
* carries the `dx-gutter` marker class.
|
|
550
|
+
* - Every other (content) child is placed in column 2 via `[&>*:not(.dx-gutter)]`.
|
|
551
|
+
* Class-based placement (rather than `[data-slot=…]`) is used because Tailwind does not
|
|
552
|
+
* generate arbitrary variants that nest a square-bracket attribute selector.
|
|
553
|
+
* Robust to conditional children: a falsy leading slot never shifts content into a gutter.
|
|
554
|
+
* NOTE: Must not use overflow-hidden here since it will clip input focus rings.
|
|
555
|
+
*/
|
|
556
|
+
var row = (_, ...etc) => {
|
|
557
|
+
return mx("col-span-3 grid grid-cols-subgrid", "[&>*:not(.dx-gutter)]:col-start-2", ...etc);
|
|
558
|
+
};
|
|
559
|
+
/**
|
|
560
|
+
* Gutter slot geometry: a `--dx-rail-item` square that centers its child, so a passive
|
|
561
|
+
* `<Icon>` and an interactive `IconButton` line up to the pixel. Self-places into column 1
|
|
562
|
+
* (default) or column 3 (`end`); the `dx-gutter` marker keeps it out of the content track.
|
|
563
|
+
*/
|
|
564
|
+
var block$2 = ({ end, compact, square }, ...etc) => mx("dx-gutter grid place-items-center [&>img]:max-w-[1.5rem]", end ? "col-start-3" : "col-start-1", square && "aspect-square", !compact && "h-[var(--dx-rail-item)]", ...etc);
|
|
565
|
+
/**
|
|
566
|
+
* Center placement: places the element in column 2 (the central track between gutters) of the
|
|
567
|
+
* parent Column.Root grid. Does NOT use subgrid — placement is explicit on this element only.
|
|
568
|
+
* Safe to nest arbitrary compound components (including those that render `display: contents`).
|
|
569
|
+
*/
|
|
570
|
+
var center = (_, ...etc) => {
|
|
571
|
+
return mx(withColumn.center(), "min-h-0", ...etc);
|
|
572
|
+
};
|
|
573
|
+
var columnTheme = {
|
|
574
|
+
root: root$13,
|
|
575
|
+
row,
|
|
576
|
+
block: block$2,
|
|
577
|
+
center
|
|
578
|
+
};
|
|
579
|
+
//#endregion
|
|
580
|
+
//#region src/components/DatePicker/DatePicker.theme.ts
|
|
581
|
+
var trigger = ({ hasValue }, ...etc) => mx("inline-flex w-fit items-center gap-2 px-2 rounded-sm border border-separator", "dx-input-surface text-base-fg", "hover:bg-hover-surface focus-visible:outline-2 focus-visible:outline-primary-500", !hasValue && "text-description", ...etc);
|
|
582
|
+
var content$7 = (_p, ...etc) => mx("flex flex-col gap-2", ...etc);
|
|
583
|
+
var timeField = (_p, ...etc) => mx("flex items-center gap-2 px-2 py-1", "[&_input]:bg-input-surface [&_input]:border [&_input]:border-separator", "[&_input]:rounded-sm [&_input]:px-2 [&_input]:py-1", ...etc);
|
|
584
|
+
var datePickerTheme = {
|
|
585
|
+
trigger,
|
|
586
|
+
content: content$7,
|
|
587
|
+
timeField
|
|
588
|
+
};
|
|
589
|
+
//#endregion
|
|
590
|
+
//#region src/components/Dialog/Dialog.theme.ts
|
|
591
|
+
var sizeMap = {
|
|
592
|
+
sm: "md:max-w-[24rem]",
|
|
593
|
+
md: "md:max-w-[32rem]!",
|
|
594
|
+
lg: "md:max-w-[40rem]!",
|
|
595
|
+
xl: "md:max-w-[60rem]!"
|
|
596
|
+
};
|
|
597
|
+
var overlay$1 = (_props, ...etc) => mx("dx-dialog__overlay", ...etc);
|
|
598
|
+
var content$6 = ({ inOverlayLayout, size = "md" }, ...etc) => {
|
|
599
|
+
return mx("@container", "dx-dialog__content dx-focus-ring dx-modal-surface py-4", !inOverlayLayout && "fixed z-50 top-[50%] left-[50%] -translate-x-[50%] -translate-y-[50%]", sizeMap[size], ...etc);
|
|
600
|
+
};
|
|
601
|
+
var header$2 = (_props, ...etc) => mx("dx-dialog__header flex pb-4 items-center justify-between", withColumn.center(), ...etc);
|
|
602
|
+
var body$1 = (_props, ...etc) => mx("dx-dialog__body dx-expander gap-y-2", withColumn.propagate(), ...etc);
|
|
603
|
+
var actionBar = (_props, ...etc) => mx("dx-dialog__actionbar flex items-center pt-4 gap-2", withColumn.center(), ...etc);
|
|
604
|
+
var title$2 = ({ srOnly }, ...etc) => mx("dx-dialog__title", srOnly && "sr-only", ...etc);
|
|
605
|
+
var description$2 = ({ srOnly }, ...etc) => mx("dx-dialog__description", "text-description", srOnly && "sr-only", ...etc);
|
|
606
|
+
var dialogTheme = {
|
|
607
|
+
overlay: overlay$1,
|
|
608
|
+
content: content$6,
|
|
609
|
+
header: header$2,
|
|
610
|
+
body: body$1,
|
|
611
|
+
actionbar: actionBar,
|
|
612
|
+
title: title$2,
|
|
613
|
+
description: description$2
|
|
614
|
+
};
|
|
615
|
+
//#endregion
|
|
616
|
+
//#region src/components/Focus/Focus.theme.ts
|
|
617
|
+
/**
|
|
618
|
+
* Focus ring styles shared by Focus.Group and Focus.Item.
|
|
619
|
+
* Uses a `::after` pseudo-element overlay so the ring paints above child content
|
|
620
|
+
* (inset box-shadow alone is obscured by children with backgrounds).
|
|
621
|
+
* The pseudo-element is `pointer-events-none` and absolutely positioned over the element.
|
|
622
|
+
* When `border` is true, a subdued CSS border is always visible (e.g., for grid cell edges).
|
|
623
|
+
*/
|
|
624
|
+
var ring = ({ border }, ...etc) => mx("dx-ring-pseudo outline-hidden", "focus:after:ring-focus-ring-subtle", "data-[focus-state=active]:after:ring-focus-ring-subtle", "data-[focus-state=error]:after:ring-rose-500", border && "border border-separator", ...etc);
|
|
625
|
+
var focusTheme = {
|
|
626
|
+
group: ring,
|
|
627
|
+
item: ring
|
|
628
|
+
};
|
|
629
|
+
//#endregion
|
|
630
|
+
//#region src/components/Icon/Icon.theme.ts
|
|
631
|
+
/**
|
|
632
|
+
* Size can be specified directly, or inherited from a container (e.g., toolbar).
|
|
633
|
+
*/
|
|
634
|
+
var root$12 = ({ size }, etc) => {
|
|
635
|
+
return mx("shrink-0 text-[var(--icons-color,currentColor)]", size ? getSize(size) : "[width:var(--icon-size,var(--dx-default-icons-size))] [height:var(--icon-size,var(--dx-default-icons-size))]", etc);
|
|
636
|
+
};
|
|
637
|
+
/**
|
|
638
|
+
* Static slot sized to `--dx-rail-item` so a wrapped `Icon` lines up with an `IconButton iconOnly`.
|
|
639
|
+
*/
|
|
640
|
+
var block$1 = ({ compact, square }, ...etc) => mx("grid place-items-center shrink-0 [&>img]:max-w-[1.5rem]", square ? "aspect-square" : "w-[var(--dx-rail-item)]", compact ? "" : "h-[var(--dx-rail-item)]", ...etc);
|
|
641
|
+
var iconTheme = {
|
|
642
|
+
root: root$12,
|
|
643
|
+
block: block$1
|
|
644
|
+
};
|
|
645
|
+
//#endregion
|
|
646
|
+
//#region src/components/Input/Input.theme.ts
|
|
647
|
+
var textInputSurfaceFocus = "transition-colors bg-input-surface focus:bg-focus-surface border border-input-separator focus:border-separator";
|
|
648
|
+
var textInputSurfaceHover = "hover:bg-focus-surface";
|
|
649
|
+
var valence = (valence) => {
|
|
650
|
+
switch (valence) {
|
|
651
|
+
case "success": return "shadow-emerald-500/50 dark:shadow-emerald-600/50";
|
|
652
|
+
case "info": return "shadow-cyan-500/50 dark:shadow-cyan-600/50";
|
|
653
|
+
case "warning": return "shadow-amber-500/50 dark:shadow-amber-600/50";
|
|
654
|
+
case "error": return "shadow-rose-500/50 dark:shadow-rose-600/50";
|
|
655
|
+
}
|
|
656
|
+
};
|
|
657
|
+
var controlSize = "min-h-(--dx-control) px-(--dx-control-pad) leading-(--dx-control-leading)";
|
|
658
|
+
var sharedSubduedInputStyles = (props) => [
|
|
659
|
+
"[[data-drag-autoscroll=\"active\"]_&]:pointer-events-none",
|
|
660
|
+
"py-0 w-full bg-transparent text-current placeholder-placeholder",
|
|
661
|
+
"dx-focus-subdued",
|
|
662
|
+
controlSize,
|
|
663
|
+
props.disabled && staticDisabled
|
|
664
|
+
];
|
|
665
|
+
var sharedDefaultInputStyles = (props) => [
|
|
666
|
+
"[[data-drag-autoscroll=\"active\"]_&]:pointer-events-none",
|
|
667
|
+
"py-0 w-full text-base-fg placeholder-placeholder",
|
|
668
|
+
"dx-input",
|
|
669
|
+
controlSize,
|
|
670
|
+
props.disabled ? staticDisabled : textInputSurfaceHover
|
|
671
|
+
];
|
|
672
|
+
var sharedStaticInputStyles = (props) => [
|
|
673
|
+
"[[data-drag-autoscroll=\"active\"]_&]:pointer-events-none",
|
|
674
|
+
"py-0 w-full text-base-fg rounded-xs placeholder-placeholder",
|
|
675
|
+
textInputSurfaceFocus,
|
|
676
|
+
textInputSurfaceHover,
|
|
677
|
+
props.focused && "bg-attention-surface",
|
|
678
|
+
valence(props.validationValence),
|
|
679
|
+
props.disabled && staticDisabled,
|
|
680
|
+
props.focused && "dx-focus-static"
|
|
681
|
+
];
|
|
682
|
+
var input = (props, ...etc) => props.variant === "subdued" ? mx(...sharedSubduedInputStyles(props), ...etc) : props.variant === "static" ? mx(...sharedStaticInputStyles(props), ...etc) : mx(...sharedDefaultInputStyles(props), valence(props.validationValence), ...etc);
|
|
683
|
+
var textArea = (props, ...etc) => input(props, ...etc);
|
|
684
|
+
var container = (props, ...etc) => props.variant === "subdued" || props.variant === "static" ? mx("flex items-center w-full", props.disabled && staticDisabled, ...etc) : mx("flex items-center w-full dx-input p-0", valence(props.validationValence), props.disabled ? staticDisabled : textInputSurfaceHover, ...etc);
|
|
685
|
+
var adornment = (props, ...etc) => mx("shrink-0 flex items-center gap-1 text-description", props.side === "start" ? "ps-2" : "pe-2", ...etc);
|
|
686
|
+
var checkbox = ({ size = 4 }, ...etc) => mx("dx-checkbox dx-focus-ring", getSize(size), ...etc);
|
|
687
|
+
var checkboxIndicator = ({ size = 4, checked }, ...etc) => mx(getSize(snapSize(sizeValue(size) * .65, 4)), !checked && "invisible", ...etc);
|
|
688
|
+
var switch_ = (_props, ...etc) => mx("dx-checkbox--switch dx-focus-ring", ...etc);
|
|
689
|
+
var pin = (props, ...etc) => mx("font-mono selection:bg-transparent mx-auto", props.density === "lg" ? "text-lg" : props.density === "sm" ? "text-sm" : "text-base pointer-fine:text-sm", props.disabled && "cursor-not-allowed", ...etc);
|
|
690
|
+
var segment = (props, ...etc) => mx("flex items-center justify-center tabular-nums", "size-(--dx-control) rounded-xs", "bg-input-surface text-base-fg transition-colors border border-input-separator", "data-[focused]:bg-attention-surface data-[focused]:border-focus-ring-subtle", "data-[focused]:ring-2 data-[focused]:ring-offset-0 data-[focused]:ring-focus-ring-subtle", valence(props.validationValence), props.disabled && staticDisabled, ...etc);
|
|
691
|
+
var label = (props, ...etc) => mx("block text-sm text-description", props.srOnly && "sr-only", ...etc);
|
|
692
|
+
var description$1 = (props, ...etc) => mx("text-description", props.srOnly && "sr-only", ...etc);
|
|
693
|
+
var descriptionAndValidation = (props, ...etc) => mx("leading-none my-1.5", props.srOnly && "sr-only", ...etc);
|
|
694
|
+
var validation = (props, ...etc) => mx("text-sm text-description", props.srOnly ? "sr-only" : textValence(props.validationValence), ...etc);
|
|
695
|
+
var triggerIcon = (_p, ...etc) => mx("shrink-0 inline-flex items-center justify-center size-(--dx-control-sm) rounded-xs", "bg-input-surface text-subdued hover:text-base-fg hover:bg-hover-surface", "dx-focus-ring", ...etc);
|
|
696
|
+
var block = (props, ...etc) => mx("grid place-items-center w-[var(--dx-rail-item)] h-[var(--dx-rail-item)]", ...etc);
|
|
697
|
+
var inputTheme = {
|
|
698
|
+
input,
|
|
699
|
+
container,
|
|
700
|
+
adornment,
|
|
701
|
+
textArea,
|
|
702
|
+
pin,
|
|
703
|
+
segment,
|
|
704
|
+
label,
|
|
705
|
+
description: description$1,
|
|
706
|
+
checkbox,
|
|
707
|
+
checkboxIndicator,
|
|
708
|
+
switch: switch_,
|
|
709
|
+
block,
|
|
710
|
+
validation,
|
|
711
|
+
descriptionAndValidation,
|
|
712
|
+
triggerIcon
|
|
713
|
+
};
|
|
714
|
+
//#endregion
|
|
715
|
+
//#region src/components/Link/Link.theme.ts
|
|
716
|
+
var root$11 = ({ variant }, ...etc) => mx("dx-link", ...etc);
|
|
717
|
+
var linkTheme = { root: root$11 };
|
|
718
|
+
//#endregion
|
|
719
|
+
//#region src/components/Main/constants.ts
|
|
720
|
+
var mainPaddingTransitions = "dx-main-content-padding-transitions";
|
|
721
|
+
var mainIntrinsicSize = "dx-main-intrinsic-size";
|
|
722
|
+
//#endregion
|
|
723
|
+
//#region src/components/Main/Main.theme.ts
|
|
724
|
+
var padding = "dx-main-content-padding";
|
|
725
|
+
var content$5 = ({ bounce }, ...etc) => mx(padding, mainPaddingTransitions, bounce && "dx-main-bounce-layout", "dx-base-surface", "dx-focus-ring-main", ...etc);
|
|
726
|
+
var sidebar = (_, ...etc) => mx("dx-main-sidebar", "dx-focus-ring-inset-over-all", ...etc);
|
|
727
|
+
var overlay = (_, ...etc) => mx("dx-main-overlay", ...etc);
|
|
728
|
+
var mainTheme = {
|
|
729
|
+
content: content$5,
|
|
730
|
+
sidebar,
|
|
731
|
+
overlay
|
|
732
|
+
};
|
|
733
|
+
//#endregion
|
|
734
|
+
//#region src/components/Menu/Menu.theme.ts
|
|
735
|
+
var content$4 = ({ elevation }, ...etc) => mx("dx-popover-surface w-48 md:w-56 border border-separator rounded-sm", surfaceZIndex({
|
|
736
|
+
elevation,
|
|
737
|
+
level: "menu"
|
|
738
|
+
}), surfaceShadow({ elevation: "positioned" }), ...etc);
|
|
739
|
+
var viewport$4 = (_props, ...etc) => mx("rounded-sm p-1 max-h-[var(--radix-dropdown-menu-content-available-height)] overflow-y-auto", ...etc);
|
|
740
|
+
var item$1 = (_props, ...etc) => mx("flex cursor-pointer select-none items-center gap-2 rounded-xs min-h-(--dx-control) px-(--dx-control-pad) py-1 text-sm", "hover:bg-hover-surface data-[highlighted]:bg-hover-surface", "dx-focus-subdued", dataDisabled, ...etc);
|
|
741
|
+
var separator$1 = (_props, ...etc) => mx("my-1 mx-2 h-px bg-separator", ...etc);
|
|
742
|
+
var groupLabel = (_props, ...etc) => mx("text-description", "select-none px-(--dx-control-pad) py-1", ...etc);
|
|
743
|
+
var arrow$3 = (_props, ...etc) => mx("fill-separator", ...etc);
|
|
744
|
+
var menuTheme = {
|
|
745
|
+
content: content$4,
|
|
746
|
+
viewport: viewport$4,
|
|
747
|
+
item: item$1,
|
|
748
|
+
separator: separator$1,
|
|
749
|
+
groupLabel,
|
|
750
|
+
arrow: arrow$3
|
|
751
|
+
};
|
|
752
|
+
//#endregion
|
|
753
|
+
//#region src/components/Message/Message.theme.ts
|
|
754
|
+
var root$10 = ({ valence }, etc) => {
|
|
755
|
+
return mx("p-1 rounded-sm", messageValence(valence), etc);
|
|
756
|
+
};
|
|
757
|
+
var content$3 = (_, etc) => {
|
|
758
|
+
return mx("col-span-full grid grid-cols-subgrid p-trim-md", etc);
|
|
759
|
+
};
|
|
760
|
+
var header$1 = (_, etc) => {
|
|
761
|
+
return mx("items-center", etc);
|
|
762
|
+
};
|
|
763
|
+
var title$1 = (_, etc) => {
|
|
764
|
+
return mx("col-start-2 overflow-hidden truncate", etc);
|
|
765
|
+
};
|
|
766
|
+
var body = (_, etc) => {
|
|
767
|
+
return mx("col-start-2 flex flex-col first:font-medium pb-1.5", etc);
|
|
768
|
+
};
|
|
769
|
+
var messageTheme = {
|
|
770
|
+
root: root$10,
|
|
771
|
+
content: content$3,
|
|
772
|
+
header: header$1,
|
|
773
|
+
title: title$1,
|
|
774
|
+
body
|
|
775
|
+
};
|
|
776
|
+
//#endregion
|
|
777
|
+
//#region src/components/Panel/Panel.theme.ts
|
|
778
|
+
var sizes = {
|
|
779
|
+
lg: "h-(--dx-topbar-size)",
|
|
780
|
+
md: "h-(--dx-toolbar-size)"
|
|
781
|
+
};
|
|
782
|
+
var root$9 = (_, ...etc) => mx("dx-container grid grid-cols-[100%] overflow-hidden", "[&>*:not([data-slot])]:[grid-area:content]", ...etc);
|
|
783
|
+
var toolbar = ({ size = "md" }, ...etc) => mx("[grid-area:toolbar]", "shrink-0", "dx-toolbar-surface shadow-sm relative z-[1]", sizes[size], ...etc);
|
|
784
|
+
var content$2 = (_, ...etc) => mx("[grid-area:content] min-h-0", ...etc);
|
|
785
|
+
var statusbar = (_, ...etc) => mx("[grid-area:statusbar]", "shrink-0", "dx-toolbar-surface", ...etc);
|
|
786
|
+
var panelTheme = {
|
|
787
|
+
root: root$9,
|
|
788
|
+
toolbar,
|
|
789
|
+
content: content$2,
|
|
790
|
+
statusbar
|
|
791
|
+
};
|
|
792
|
+
//#endregion
|
|
793
|
+
//#region src/components/Popover/Popover.theme.ts
|
|
794
|
+
var content$1 = ({ elevation }, ...etc) => mx("dx-popover-surface overflow-hidden border-2 border-separator rounded-sm", surfaceShadow({ elevation: "positioned" }), surfaceZIndex({
|
|
795
|
+
elevation,
|
|
796
|
+
level: "menu"
|
|
797
|
+
}), "dx-focus-ring", ...etc);
|
|
798
|
+
var viewport$3 = ({ constrainBlock, constrainInline }, ...etc) => mx("grid grid-rows-[1fr] min-h-0 min-w-popover-min-width", (constrainBlock || constrainInline) && "overflow-hidden", constrainBlock && "max-h-(--radix-popover-content-available-height)", constrainBlock && "max-h-[min(var(--radix-popover-content-available-height),calc(100dvh-var(--spacing-screen-border)*2))]", constrainInline && "max-w-(--radix-popover-content-available-width)", ...etc);
|
|
799
|
+
var arrow$2 = (_props, ...etc) => mx("fill-separator", ...etc);
|
|
800
|
+
var popoverTheme = {
|
|
801
|
+
content: content$1,
|
|
802
|
+
viewport: viewport$3,
|
|
803
|
+
arrow: arrow$2
|
|
804
|
+
};
|
|
805
|
+
//#endregion
|
|
806
|
+
//#region src/components/ScrollArea/ScrollArea.theme.ts
|
|
807
|
+
var root$8 = ({ orientation }, ...etc) => mx("dx-container", orientation === "vertical" && "group/scroll-v flex flex-col", orientation === "horizontal" && "group/scroll-h flex", orientation === "all" && "group/scroll-all flex flex-col", "[.dx-column-root_&]:col-span-full", ...etc);
|
|
808
|
+
/**
|
|
809
|
+
* NOTE: The browser reserves space for scrollbars.
|
|
810
|
+
*/
|
|
811
|
+
var viewport$2 = ({ orientation, centered, padding, snap, autoHide }, ...etc) => {
|
|
812
|
+
return mx("flex-1 min-h-0 w-full", withColumn.consumed(), orientation === "vertical" && "overflow-y-scroll", orientation === "horizontal" && "flex overflow-x-scroll overscroll-x-contain", orientation === "all" && "overflow-scroll", "[&::-webkit-scrollbar-corner]:bg-transparent", "[&::-webkit-scrollbar-track]:bg-transparent", "[&::-webkit-scrollbar-thumb]:rounded-none", "[&::-webkit-scrollbar]:w-[var(--scroll-width)] [&::-webkit-scrollbar]:h-[var(--scroll-width)]", (orientation === "vertical" || orientation === "all") && (padding ? [centered ? "pl-[var(--gutter,calc(var(--scroll-width)+var(--scroll-padding)))]" : "pl-[var(--gutter,0)]", "pr-[calc(var(--gutter,calc(var(--scroll-width)+var(--scroll-padding)))-var(--scroll-width))]"] : centered && "pl-[var(--scroll-width)]"), (orientation === "horizontal" || orientation === "all") && (padding ? [centered && "pt-[calc(var(--scroll-width)+var(--scroll-padding))]", "pb-[var(--scroll-padding)]"] : centered && "pt-[var(--scroll-width)]"), snap && [
|
|
813
|
+
orientation === "vertical" && "snap-y snap-mandatory",
|
|
814
|
+
orientation === "horizontal" && "snap-x snap-mandatory",
|
|
815
|
+
orientation === "all" && "snap-both snap-mandatory"
|
|
816
|
+
], autoHide ? [
|
|
817
|
+
orientation === "vertical" && "group-hover/scroll-v:[&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb",
|
|
818
|
+
orientation === "horizontal" && "group-hover/scroll-h:[&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb",
|
|
819
|
+
orientation === "all" && "group-hover/scroll-all:[&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb"
|
|
820
|
+
] : [
|
|
821
|
+
orientation === "vertical" && "[&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb",
|
|
822
|
+
orientation === "horizontal" && "[&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb",
|
|
823
|
+
orientation === "all" && "[&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb"
|
|
824
|
+
], ...etc);
|
|
825
|
+
};
|
|
826
|
+
var scrollAreaTheme = {
|
|
827
|
+
root: root$8,
|
|
828
|
+
viewport: viewport$2
|
|
829
|
+
};
|
|
830
|
+
//#endregion
|
|
831
|
+
//#region src/components/Select/Select.theme.ts
|
|
832
|
+
var content = ({ elevation }, ...etc) => {
|
|
833
|
+
return mx("dx-modal-surface rounded-sm border border-separator", "min-w-(--radix-select-trigger-width) max-h-(--radix-select-content-available-height)", surfaceShadow({ elevation: "positioned" }), surfaceZIndex({
|
|
834
|
+
elevation,
|
|
835
|
+
level: "menu"
|
|
836
|
+
}), ...etc);
|
|
837
|
+
};
|
|
838
|
+
var triggerButton = (_props, ...etc) => mx("bg-input-surface grid grid-cols-[1fr_auto] [&>span]:text-left", ...etc);
|
|
839
|
+
var viewport$1 = (_props, ...etc) => mx(...etc);
|
|
840
|
+
var item = (_props, ...etc) => mx("flex items-center min-h-(--dx-control) px-(--dx-control-pad) py-1 gap-2", "text-base-fg leading-none select-none outline-hidden", "[&>svg]:invisible [&[data-state=checked]>svg]:visible", "dx-highlighted", ...etc);
|
|
841
|
+
var itemIndicator = (_props, ...etc) => mx("items-center", ...etc);
|
|
842
|
+
var arrow$1 = (_props, ...etc) => mx("fill-separator", ...etc);
|
|
843
|
+
var separator = (_props, ...etc) => mx("self-stretch border-b my-1 border-separator", ...etc);
|
|
844
|
+
var scrollButton = (_props, ...etc) => mx("dx-modal-surface flex items-center justify-center cursor-default h-(--dx-control-sm) w-full", ...etc);
|
|
845
|
+
var selectTheme = {
|
|
846
|
+
content,
|
|
847
|
+
triggerButton,
|
|
848
|
+
viewport: viewport$1,
|
|
849
|
+
item,
|
|
850
|
+
itemIndicator,
|
|
851
|
+
arrow: arrow$1,
|
|
852
|
+
separator,
|
|
853
|
+
scrollButton
|
|
854
|
+
};
|
|
855
|
+
//#endregion
|
|
856
|
+
//#region src/components/Separator/Separator.theme.ts
|
|
857
|
+
var root$7 = ({ orientation, subdued }, ...etc) => mx("self-stretch", orientation === "vertical" ? "border-e mx-1" : "border-b my-1", subdued ? "border-subdued-separator" : "border-separator", ...etc);
|
|
858
|
+
var separatorTheme = { root: root$7 };
|
|
859
|
+
//#endregion
|
|
860
|
+
//#region src/components/Skeleton/Skeleton.theme.ts
|
|
861
|
+
var root$6 = ({ variant = "default" }, ...etc) => mx("animate-pulse bg-neutral-300 dark:bg-neutral-700 rounded-md", variant === "circle" && "rounded-full", variant === "text" && "rounded-sm", ...etc);
|
|
862
|
+
var skeletonTheme = { root: root$6 };
|
|
863
|
+
//#endregion
|
|
864
|
+
//#region src/components/Slider/Slider.theme.ts
|
|
865
|
+
var root$5 = ({ orientation, disabled }, ...etc) => mx("relative flex touch-none select-none items-center", orientation === "vertical" ? "h-full w-3 flex-col" : "w-full h-3", disabled && "opacity-50 pointer-events-none", ...etc);
|
|
866
|
+
var track = ({ orientation }, ...etc) => mx("relative grow overflow-hidden rounded-full bg-input-surface", orientation === "vertical" ? "w-1 h-full" : "h-1 w-full", ...etc);
|
|
867
|
+
var range = ({ orientation }, ...etc) => mx("absolute bg-accent-bg", orientation === "vertical" ? "w-full" : "h-full", ...etc);
|
|
868
|
+
var thumb = (_props, ...etc) => mx("block h-3 w-3 shrink-0 rounded-full bg-base-surface border-2 border-accent-bg shadow-sm transition-colors dx-focus-ring", "hover:bg-hover-surface", ...etc);
|
|
869
|
+
var sliderTheme = {
|
|
870
|
+
root: root$5,
|
|
871
|
+
track,
|
|
872
|
+
range,
|
|
873
|
+
thumb
|
|
874
|
+
};
|
|
875
|
+
//#endregion
|
|
876
|
+
//#region src/components/Splitter/Splitter.theme.ts
|
|
877
|
+
var root$4 = ({ orientation }, ...etc) => mx("relative flex w-full h-full overflow-hidden", orientation === "vertical" ? "flex-col" : "flex-row", ...etc);
|
|
878
|
+
var panel = (_props, ...etc) => mx("relative grid overflow-hidden min-w-0 min-h-0", ...etc);
|
|
879
|
+
var handle = ({ orientation }, ...etc) => mx("group absolute z-10 touch-none select-none", "before:absolute before:block before:bg-separator", "before:transition-colors before:duration-100 before:ease-in-out hover:before:bg-focus-ring-subtle focus-visible:before:bg-focus-ring-subtle active:before:bg-focus-ring-subtle", orientation === "vertical" ? "h-[7px] cursor-row-resize before:inset-x-0 before:top-1/2 before:-translate-y-1/2 before:h-px" : "w-[7px] cursor-col-resize before:inset-y-0 before:left-1/2 before:-translate-x-1/2 before:w-px", ...etc);
|
|
880
|
+
var splitterTheme = {
|
|
881
|
+
root: root$4,
|
|
882
|
+
panel,
|
|
883
|
+
handle
|
|
884
|
+
};
|
|
885
|
+
//#endregion
|
|
886
|
+
//#region src/components/Status/Status.theme.ts
|
|
887
|
+
var root$3 = ({ variant = "default" }, ...etc) => mx("h-1 relative rounded-full overflow-hidden", variant === "main-bottom" ? "w-full block" : "inline-block bg-base-surface", ...etc);
|
|
888
|
+
var bar = ({ variant = "default", indeterminate }, ...etc) => mx("absolute inset-y-0 block rounded-full", variant === "main-bottom" ? "bg-composer-300" : "bg-un-accent", indeterminate ? "animate-progress-indeterminate" : "start-0", ...etc);
|
|
889
|
+
var statusTheme = {
|
|
890
|
+
root: root$3,
|
|
891
|
+
bar
|
|
892
|
+
};
|
|
893
|
+
//#endregion
|
|
894
|
+
//#region src/components/Tag/Tag.theme.ts
|
|
895
|
+
var root$2 = (_, ...etc) => mx("dx-tag", ...etc);
|
|
896
|
+
var tagTheme = { root: root$2 };
|
|
897
|
+
//#endregion
|
|
898
|
+
//#region src/components/Toast/Toast.theme.ts
|
|
899
|
+
var viewport = (_props, ...etc) => mx("z-40 fixed bottom-[calc(env(safe-area-inset-bottom)+1rem)]", "inset-start-[calc(env(safe-area-inset-left)+1rem)] inset-end-[calc(env(safe-area-inset-right)+1rem)]", "w-auto md:end-[calc(env(safe-area-inset-right)+4rem)] md:left-auto md:w-full md:max-w-sm", "rounded-md flex flex-col gap-2", ...etc);
|
|
900
|
+
var root$1 = (_props, ...etc) => mx("dx-popover-surface rounded-md p-1", surfaceShadow({ elevation: "toast" }), "radix-state-open:animate-toast-slide-in-bottom md:radix-state-open:animate-toast-slide-in-right", "radix-state-closed:animate-toast-hide", "radix-swipe-end:animate-toast-swipe-out", "translate-x-radix-toast-swipe-move-x", "radix-swipe-cancel:translate-x-0 radix-swipe-cancel:duration-200 radix-swipe-cancel:ease-[ease]", "dx-focus-ring", ...etc);
|
|
901
|
+
var grid = (_props, ...etc) => mx("gap-y-1 pbe-1", ...etc);
|
|
902
|
+
var header = (_props, ...etc) => mx("items-center", ...etc);
|
|
903
|
+
var title = (_props, ...etc) => mx("col-start-2 truncate font-medium", ...etc);
|
|
904
|
+
var description = (_props, ...etc) => mx("col-start-2 overflow-hidden text-description", ...etc);
|
|
905
|
+
var actions = (_props, ...etc) => mx("flex gap-2 mbs-1", ...etc);
|
|
906
|
+
var toastTheme = {
|
|
907
|
+
viewport,
|
|
908
|
+
root: root$1,
|
|
909
|
+
grid,
|
|
910
|
+
header,
|
|
911
|
+
title,
|
|
912
|
+
description,
|
|
913
|
+
actions
|
|
914
|
+
};
|
|
915
|
+
//#endregion
|
|
916
|
+
//#region src/components/Toolbar/Toolbar.theme.ts
|
|
917
|
+
var layout = "w-full shrink-0 flex flex-nowrap p-1 gap-1 items-center overflow-x-auto scrollbar-none dx-contain-layout";
|
|
918
|
+
var root = ({ density, disabled, layoutManaged }, ...etc) => {
|
|
919
|
+
return mx("dx-toolbar-surface", "[[data-slot=toolbar]_&]:bg-transparent", "[[data-slot=statusbar]_&]:bg-transparent", density && `dx-density-${density}`, disabled && "*:opacity-20", !layoutManaged && layout, ...etc);
|
|
920
|
+
};
|
|
921
|
+
var text = (_, ...etc) => {
|
|
922
|
+
return mx("px-2 truncate items-center", ...etc);
|
|
923
|
+
};
|
|
924
|
+
var toolbarTheme = {
|
|
925
|
+
root,
|
|
926
|
+
text
|
|
927
|
+
};
|
|
928
|
+
//#endregion
|
|
929
|
+
//#region src/components/Tooltip/tooltipContent.ts
|
|
930
|
+
var tooltipContent = ({ elevation }, ...etc) => mx("inline-flex items-center p-1 max-w-64 text-sm bg-inverse-surface text-inverse-fg rounded-sm", surfaceShadow({ elevation: "positioned" }), surfaceZIndex({
|
|
931
|
+
elevation,
|
|
932
|
+
level: "tooltip"
|
|
933
|
+
}), ...etc);
|
|
934
|
+
//#endregion
|
|
935
|
+
//#region src/components/Tooltip/Tooltip.theme.ts
|
|
936
|
+
var arrow = (_props, ...etc) => mx("fill-inverse-surface", ...etc);
|
|
937
|
+
var tooltipTheme = {
|
|
938
|
+
content: tooltipContent,
|
|
939
|
+
arrow
|
|
940
|
+
};
|
|
941
|
+
//#endregion
|
|
942
|
+
//#region src/theme/defaultTheme.ts
|
|
943
|
+
var defaultTheme = {
|
|
944
|
+
themeName: () => "default",
|
|
945
|
+
column: columnTheme,
|
|
946
|
+
panel: panelTheme,
|
|
947
|
+
avatar: avatarTheme,
|
|
948
|
+
breadcrumb: breadcrumbTheme,
|
|
949
|
+
button: buttonTheme,
|
|
950
|
+
calendar: calendarTheme,
|
|
951
|
+
card: cardTheme,
|
|
952
|
+
datePicker: datePickerTheme,
|
|
953
|
+
dialog: dialogTheme,
|
|
954
|
+
focus: focusTheme,
|
|
955
|
+
icon: iconTheme,
|
|
956
|
+
iconButton: iconButtonTheme,
|
|
957
|
+
input: inputTheme,
|
|
958
|
+
link: linkTheme,
|
|
959
|
+
main: mainTheme,
|
|
960
|
+
message: messageTheme,
|
|
961
|
+
menu: menuTheme,
|
|
962
|
+
popover: popoverTheme,
|
|
963
|
+
scrollArea: scrollAreaTheme,
|
|
964
|
+
select: selectTheme,
|
|
965
|
+
separator: separatorTheme,
|
|
966
|
+
skeleton: skeletonTheme,
|
|
967
|
+
slider: sliderTheme,
|
|
968
|
+
splitter: splitterTheme,
|
|
969
|
+
status: statusTheme,
|
|
970
|
+
tag: tagTheme,
|
|
971
|
+
toast: toastTheme,
|
|
972
|
+
toolbar: toolbarTheme,
|
|
973
|
+
tooltip: tooltipTheme
|
|
974
|
+
};
|
|
975
|
+
var defaultTx = bindTheme(defaultTheme);
|
|
976
|
+
//#endregion
|
|
977
|
+
//#region src/hooks/useThemeContext.ts
|
|
978
|
+
var __dxlog_file = "/__w/dxos/dxos/packages/ui/react-ui/src/hooks/useThemeContext.ts";
|
|
979
|
+
var fallbackContextValue = {
|
|
980
|
+
tx: defaultTx,
|
|
981
|
+
themeMode: "dark",
|
|
982
|
+
hasIosKeyboard: false
|
|
983
|
+
};
|
|
984
|
+
var warned = false;
|
|
985
|
+
var useThemeContext = () => {
|
|
986
|
+
const contextValue = useContext(ThemeContext);
|
|
987
|
+
if (!contextValue) {
|
|
988
|
+
if (!warned) {
|
|
989
|
+
warned = true;
|
|
990
|
+
log.warn("Missing ThemeContext; falling back to the default theme.", void 0, {
|
|
991
|
+
"~LogMeta": "~LogMeta",
|
|
992
|
+
F: __dxlog_file,
|
|
993
|
+
L: 30,
|
|
994
|
+
S: void 0
|
|
995
|
+
});
|
|
996
|
+
}
|
|
997
|
+
return fallbackContextValue;
|
|
998
|
+
}
|
|
999
|
+
return contextValue;
|
|
1000
|
+
};
|
|
1001
|
+
//#endregion
|
|
1002
|
+
//#region src/components/Tooltip/TooltipContext.ts
|
|
1003
|
+
var [createTooltipContext, createTooltipScope] = createContextScope("Tooltip", [createPopperScope]);
|
|
1004
|
+
var usePopperScope = createPopperScope();
|
|
1005
|
+
var TOOLTIP_OPEN = "tooltip.open";
|
|
1006
|
+
var TOOLTIP_NAME = "Tooltip";
|
|
1007
|
+
var [TooltipContextProvider, useTooltipContext] = createTooltipContext(TOOLTIP_NAME);
|
|
1008
|
+
//#endregion
|
|
1009
|
+
//#region src/components/Tooltip/Tooltip.tsx
|
|
1010
|
+
var TooltipProvider = (props) => {
|
|
1011
|
+
const { __scopeTooltip, children, open: openProp, defaultOpen = false, onOpenChange, disableHoverableContent = false, delayDuration = 700, skipDelayDuration = 300 } = props;
|
|
1012
|
+
const isOpenDelayedRef = useRef(true);
|
|
1013
|
+
const isPointerInTransitRef = useRef(false);
|
|
1014
|
+
const skipDelayTimerRef = useRef(0);
|
|
1015
|
+
useEffect(() => {
|
|
1016
|
+
const skipDelayTimer = skipDelayTimerRef.current;
|
|
1017
|
+
return () => window.clearTimeout(skipDelayTimer);
|
|
1018
|
+
}, []);
|
|
1019
|
+
const popperScope = usePopperScope(__scopeTooltip);
|
|
1020
|
+
const [trigger, setTrigger] = useState(null);
|
|
1021
|
+
const [content, setContent] = useState(null);
|
|
1022
|
+
const [side, setSide] = useState(void 0);
|
|
1023
|
+
const triggerRef = useRef(trigger);
|
|
1024
|
+
const handleTriggerChange = useCallback((nextTrigger, nextContent, nextSide) => {
|
|
1025
|
+
setTrigger(nextTrigger);
|
|
1026
|
+
triggerRef.current = nextTrigger;
|
|
1027
|
+
setContent(nextContent ?? null);
|
|
1028
|
+
setSide(nextSide);
|
|
1029
|
+
}, []);
|
|
1030
|
+
const contentId = useId$2();
|
|
1031
|
+
const openTimerRef = useRef(0);
|
|
1032
|
+
const wasOpenDelayedRef = useRef(false);
|
|
1033
|
+
const [open = false, setOpen] = useControllableState({
|
|
1034
|
+
prop: openProp,
|
|
1035
|
+
defaultProp: defaultOpen,
|
|
1036
|
+
onChange: useCallback((open) => {
|
|
1037
|
+
if (open) {
|
|
1038
|
+
window.clearTimeout(skipDelayTimerRef.current);
|
|
1039
|
+
isOpenDelayedRef.current = false;
|
|
1040
|
+
document.dispatchEvent(new CustomEvent(TOOLTIP_OPEN));
|
|
1041
|
+
} else {
|
|
1042
|
+
window.clearTimeout(skipDelayTimerRef.current);
|
|
1043
|
+
skipDelayTimerRef.current = window.setTimeout(() => isOpenDelayedRef.current = true, skipDelayDuration);
|
|
1044
|
+
}
|
|
1045
|
+
onOpenChange?.(open);
|
|
1046
|
+
}, [skipDelayDuration, onOpenChange])
|
|
1047
|
+
});
|
|
1048
|
+
const stateAttribute = useMemo(() => {
|
|
1049
|
+
return open ? wasOpenDelayedRef.current ? "delayed-open" : "instant-open" : "closed";
|
|
1050
|
+
}, [open]);
|
|
1051
|
+
const handleOpen = useCallback(() => {
|
|
1052
|
+
window.clearTimeout(openTimerRef.current);
|
|
1053
|
+
openTimerRef.current = 0;
|
|
1054
|
+
wasOpenDelayedRef.current = false;
|
|
1055
|
+
setOpen(true);
|
|
1056
|
+
}, [setOpen]);
|
|
1057
|
+
const handleClose = useCallback(() => {
|
|
1058
|
+
window.clearTimeout(openTimerRef.current);
|
|
1059
|
+
openTimerRef.current = 0;
|
|
1060
|
+
setOpen(false);
|
|
1061
|
+
}, [setOpen]);
|
|
1062
|
+
const handleDelayedOpen = useCallback(() => {
|
|
1063
|
+
window.clearTimeout(openTimerRef.current);
|
|
1064
|
+
openTimerRef.current = window.setTimeout(() => {
|
|
1065
|
+
wasOpenDelayedRef.current = true;
|
|
1066
|
+
setOpen(true);
|
|
1067
|
+
openTimerRef.current = 0;
|
|
1068
|
+
}, delayDuration);
|
|
1069
|
+
}, [delayDuration, setOpen]);
|
|
1070
|
+
useEffect(() => {
|
|
1071
|
+
return () => {
|
|
1072
|
+
if (openTimerRef.current) {
|
|
1073
|
+
window.clearTimeout(openTimerRef.current);
|
|
1074
|
+
openTimerRef.current = 0;
|
|
1075
|
+
}
|
|
1076
|
+
};
|
|
1077
|
+
}, []);
|
|
1078
|
+
const { tx } = useThemeContext();
|
|
1079
|
+
const elevation = useElevationContext();
|
|
1080
|
+
return /* @__PURE__ */ jsx(PopperPrimitive.Root, {
|
|
1081
|
+
...popperScope,
|
|
1082
|
+
children: /* @__PURE__ */ jsxs(TooltipContextProvider, {
|
|
1083
|
+
scope: __scopeTooltip,
|
|
1084
|
+
contentId,
|
|
1085
|
+
open,
|
|
1086
|
+
stateAttribute,
|
|
1087
|
+
trigger,
|
|
1088
|
+
onTriggerChange: handleTriggerChange,
|
|
1089
|
+
onTriggerEnter: useCallback(() => {
|
|
1090
|
+
if (isOpenDelayedRef.current) handleDelayedOpen();
|
|
1091
|
+
else handleOpen();
|
|
1092
|
+
}, [
|
|
1093
|
+
isOpenDelayedRef,
|
|
1094
|
+
handleDelayedOpen,
|
|
1095
|
+
handleOpen
|
|
1096
|
+
]),
|
|
1097
|
+
onTriggerLeave: useCallback(() => {
|
|
1098
|
+
if (disableHoverableContent) handleClose();
|
|
1099
|
+
else {
|
|
1100
|
+
window.clearTimeout(openTimerRef.current);
|
|
1101
|
+
openTimerRef.current = 0;
|
|
1102
|
+
}
|
|
1103
|
+
}, [handleClose, disableHoverableContent]),
|
|
1104
|
+
onOpen: handleOpen,
|
|
1105
|
+
onClose: handleClose,
|
|
1106
|
+
disableHoverableContent,
|
|
1107
|
+
isPointerInTransitRef,
|
|
1108
|
+
onPointerInTransitChange: useCallback((inTransit) => {
|
|
1109
|
+
isPointerInTransitRef.current = inTransit;
|
|
1110
|
+
}, []),
|
|
1111
|
+
children: [
|
|
1112
|
+
/* @__PURE__ */ jsxs(TooltipContent, {
|
|
1113
|
+
side,
|
|
1114
|
+
className: tx("tooltip.content", { elevation }),
|
|
1115
|
+
children: [content, /* @__PURE__ */ jsx(TooltipArrow, { className: tx("tooltip.arrow") })]
|
|
1116
|
+
}),
|
|
1117
|
+
/* @__PURE__ */ jsx(TooltipVirtualTrigger, { virtualRef: triggerRef }),
|
|
1118
|
+
children
|
|
1119
|
+
]
|
|
1120
|
+
})
|
|
1121
|
+
});
|
|
1122
|
+
};
|
|
1123
|
+
TooltipProvider.displayName = TOOLTIP_NAME;
|
|
1124
|
+
var TooltipVirtualTrigger = ({ virtualRef, __scopeTooltip }) => {
|
|
1125
|
+
const popperScope = usePopperScope(__scopeTooltip);
|
|
1126
|
+
return /* @__PURE__ */ jsx(PopperPrimitive.Anchor, {
|
|
1127
|
+
asChild: true,
|
|
1128
|
+
...popperScope,
|
|
1129
|
+
virtualRef
|
|
1130
|
+
});
|
|
1131
|
+
};
|
|
1132
|
+
var TRIGGER_NAME = "Tooltip.Trigger";
|
|
1133
|
+
var TooltipTrigger = forwardRef((props, forwardedRef) => {
|
|
1134
|
+
const { __scopeTooltip, onInteract, delayDuration: _delayDuration, side, content, ...triggerProps } = props;
|
|
1135
|
+
const context = useTooltipContext(TRIGGER_NAME, __scopeTooltip);
|
|
1136
|
+
const ref = useRef(null);
|
|
1137
|
+
const composedRefs = useComposedRefs(forwardedRef, ref);
|
|
1138
|
+
const isPointerDownRef = useRef(false);
|
|
1139
|
+
const hasPointerMoveOpenedRef = useRef(false);
|
|
1140
|
+
const handlePointerUp = useCallback(() => isPointerDownRef.current = false, []);
|
|
1141
|
+
useEffect(() => {
|
|
1142
|
+
return () => document.removeEventListener("pointerup", handlePointerUp);
|
|
1143
|
+
}, [handlePointerUp]);
|
|
1144
|
+
return /* @__PURE__ */ jsx(Primitive.button, {
|
|
1145
|
+
"aria-describedby": context.open ? context.contentId : void 0,
|
|
1146
|
+
"data-state": context.stateAttribute,
|
|
1147
|
+
...triggerProps,
|
|
1148
|
+
ref: composedRefs,
|
|
1149
|
+
onPointerMove: composeEventHandlers(props.onPointerMove, (event) => {
|
|
1150
|
+
if (event.pointerType === "touch") return;
|
|
1151
|
+
if (!hasPointerMoveOpenedRef.current && !context.isPointerInTransitRef.current) {
|
|
1152
|
+
onInteract?.(event);
|
|
1153
|
+
if (event.defaultPrevented) return;
|
|
1154
|
+
context.onTriggerChange(ref.current, content, side);
|
|
1155
|
+
context.onTriggerEnter();
|
|
1156
|
+
hasPointerMoveOpenedRef.current = true;
|
|
1157
|
+
}
|
|
1158
|
+
}),
|
|
1159
|
+
onPointerLeave: composeEventHandlers(props.onPointerLeave, () => {
|
|
1160
|
+
context.onTriggerLeave();
|
|
1161
|
+
hasPointerMoveOpenedRef.current = false;
|
|
1162
|
+
}),
|
|
1163
|
+
onPointerDown: composeEventHandlers(props.onPointerDown, () => {
|
|
1164
|
+
if (context.open) context.onClose();
|
|
1165
|
+
isPointerDownRef.current = true;
|
|
1166
|
+
document.addEventListener("pointerup", handlePointerUp, { once: true });
|
|
1167
|
+
}),
|
|
1168
|
+
onFocus: props.onFocus,
|
|
1169
|
+
onBlur: composeEventHandlers(props.onBlur, context.onClose),
|
|
1170
|
+
onClick: composeEventHandlers(props.onClick, context.onClose)
|
|
1171
|
+
});
|
|
1172
|
+
});
|
|
1173
|
+
TooltipTrigger.displayName = TRIGGER_NAME;
|
|
1174
|
+
var PORTAL_NAME = "Tooltip.Portal";
|
|
1175
|
+
var [PortalProvider, usePortalContext] = createTooltipContext(PORTAL_NAME, { forceMount: void 0 });
|
|
1176
|
+
var TooltipPortal = (props) => {
|
|
1177
|
+
const { __scopeTooltip, forceMount, children, container } = props;
|
|
1178
|
+
const context = useTooltipContext(PORTAL_NAME, __scopeTooltip);
|
|
1179
|
+
return /* @__PURE__ */ jsx(PortalProvider, {
|
|
1180
|
+
scope: __scopeTooltip,
|
|
1181
|
+
forceMount,
|
|
1182
|
+
children: /* @__PURE__ */ jsx(Presence, {
|
|
1183
|
+
present: forceMount || context.open,
|
|
1184
|
+
children: /* @__PURE__ */ jsx(Portal, {
|
|
1185
|
+
asChild: true,
|
|
1186
|
+
container,
|
|
1187
|
+
children
|
|
1188
|
+
})
|
|
1189
|
+
})
|
|
1190
|
+
});
|
|
1191
|
+
};
|
|
1192
|
+
TooltipPortal.displayName = PORTAL_NAME;
|
|
1193
|
+
var CONTENT_NAME = "Tooltip.Content";
|
|
1194
|
+
var TooltipContent = forwardRef((props, forwardedRef) => {
|
|
1195
|
+
const portalContext = usePortalContext(CONTENT_NAME, props.__scopeTooltip);
|
|
1196
|
+
const { forceMount = portalContext.forceMount, side = "top", ...contentProps } = props;
|
|
1197
|
+
const context = useTooltipContext(CONTENT_NAME, props.__scopeTooltip);
|
|
1198
|
+
return /* @__PURE__ */ jsx(Presence, {
|
|
1199
|
+
present: forceMount || context.open,
|
|
1200
|
+
children: context.disableHoverableContent ? /* @__PURE__ */ jsx(TooltipContentImpl, {
|
|
1201
|
+
side,
|
|
1202
|
+
...contentProps,
|
|
1203
|
+
ref: forwardedRef
|
|
1204
|
+
}) : /* @__PURE__ */ jsx(TooltipContentHoverable, {
|
|
1205
|
+
side,
|
|
1206
|
+
...contentProps,
|
|
1207
|
+
ref: forwardedRef
|
|
1208
|
+
})
|
|
1209
|
+
});
|
|
1210
|
+
});
|
|
1211
|
+
var TooltipContentHoverable = forwardRef((props, forwardedRef) => {
|
|
1212
|
+
const context = useTooltipContext(CONTENT_NAME, props.__scopeTooltip);
|
|
1213
|
+
const ref = useRef(null);
|
|
1214
|
+
const composedRefs = useComposedRefs(forwardedRef, ref);
|
|
1215
|
+
const [pointerGraceArea, setPointerGraceArea] = useState(null);
|
|
1216
|
+
const { trigger, onClose } = context;
|
|
1217
|
+
const content = ref.current;
|
|
1218
|
+
const { onPointerInTransitChange } = context;
|
|
1219
|
+
const handleRemoveGraceArea = useCallback(() => {
|
|
1220
|
+
setPointerGraceArea(null);
|
|
1221
|
+
onPointerInTransitChange(false);
|
|
1222
|
+
}, [onPointerInTransitChange]);
|
|
1223
|
+
const handleCreateGraceArea = useCallback((event, hoverTarget) => {
|
|
1224
|
+
const currentTarget = event.currentTarget;
|
|
1225
|
+
const exitPoint = {
|
|
1226
|
+
x: event.clientX,
|
|
1227
|
+
y: event.clientY
|
|
1228
|
+
};
|
|
1229
|
+
const paddedExitPoints = getPaddedExitPoints(exitPoint, getExitSideFromRect(exitPoint, currentTarget.getBoundingClientRect()));
|
|
1230
|
+
const hoverTargetPoints = getPointsFromRect(hoverTarget.getBoundingClientRect());
|
|
1231
|
+
const graceArea = getHull([...paddedExitPoints, ...hoverTargetPoints]);
|
|
1232
|
+
setPointerGraceArea(graceArea);
|
|
1233
|
+
onPointerInTransitChange(true);
|
|
1234
|
+
}, [onPointerInTransitChange]);
|
|
1235
|
+
useEffect(() => {
|
|
1236
|
+
return () => handleRemoveGraceArea();
|
|
1237
|
+
}, [handleRemoveGraceArea]);
|
|
1238
|
+
useEffect(() => {
|
|
1239
|
+
if (trigger && content) {
|
|
1240
|
+
const handleTriggerLeave = (event) => handleCreateGraceArea(event, content);
|
|
1241
|
+
const handleContentLeave = (event) => handleCreateGraceArea(event, trigger);
|
|
1242
|
+
trigger.addEventListener("pointerleave", handleTriggerLeave);
|
|
1243
|
+
content.addEventListener("pointerleave", handleContentLeave);
|
|
1244
|
+
return () => {
|
|
1245
|
+
trigger.removeEventListener("pointerleave", handleTriggerLeave);
|
|
1246
|
+
content.removeEventListener("pointerleave", handleContentLeave);
|
|
1247
|
+
};
|
|
1248
|
+
}
|
|
1249
|
+
}, [
|
|
1250
|
+
trigger,
|
|
1251
|
+
content,
|
|
1252
|
+
handleCreateGraceArea,
|
|
1253
|
+
handleRemoveGraceArea
|
|
1254
|
+
]);
|
|
1255
|
+
useEffect(() => {
|
|
1256
|
+
if (pointerGraceArea) {
|
|
1257
|
+
const handleTrackPointerGrace = (event) => {
|
|
1258
|
+
const target = event.target;
|
|
1259
|
+
const pointerPosition = {
|
|
1260
|
+
x: event.clientX,
|
|
1261
|
+
y: event.clientY
|
|
1262
|
+
};
|
|
1263
|
+
const hasEnteredTarget = trigger?.contains(target) || content?.contains(target);
|
|
1264
|
+
const isPointerOutsideGraceArea = !isPointInPolygon(pointerPosition, pointerGraceArea);
|
|
1265
|
+
if (hasEnteredTarget) handleRemoveGraceArea();
|
|
1266
|
+
else if (isPointerOutsideGraceArea) {
|
|
1267
|
+
handleRemoveGraceArea();
|
|
1268
|
+
onClose();
|
|
1269
|
+
}
|
|
1270
|
+
};
|
|
1271
|
+
document.addEventListener("pointermove", handleTrackPointerGrace);
|
|
1272
|
+
return () => document.removeEventListener("pointermove", handleTrackPointerGrace);
|
|
1273
|
+
}
|
|
1274
|
+
}, [
|
|
1275
|
+
trigger,
|
|
1276
|
+
content,
|
|
1277
|
+
pointerGraceArea,
|
|
1278
|
+
onClose,
|
|
1279
|
+
handleRemoveGraceArea
|
|
1280
|
+
]);
|
|
1281
|
+
return /* @__PURE__ */ jsx(TooltipContentImpl, {
|
|
1282
|
+
...props,
|
|
1283
|
+
ref: composedRefs
|
|
1284
|
+
});
|
|
1285
|
+
});
|
|
1286
|
+
var [VisuallyHiddenContentContextProvider, useVisuallyHiddenContentContext] = createTooltipContext(TOOLTIP_NAME, { isInside: false });
|
|
1287
|
+
var TooltipContentImpl = forwardRef((props, forwardedRef) => {
|
|
1288
|
+
const { __scopeTooltip, children, "aria-label": ariaLabel, onEscapeKeyDown, onPointerDownOutside, ...contentProps } = props;
|
|
1289
|
+
const context = useTooltipContext(CONTENT_NAME, __scopeTooltip);
|
|
1290
|
+
const popperScope = usePopperScope(__scopeTooltip);
|
|
1291
|
+
const { onClose } = context;
|
|
1292
|
+
useEffect(() => {
|
|
1293
|
+
document.addEventListener(TOOLTIP_OPEN, onClose);
|
|
1294
|
+
return () => document.removeEventListener(TOOLTIP_OPEN, onClose);
|
|
1295
|
+
}, [onClose]);
|
|
1296
|
+
useEffect(() => {
|
|
1297
|
+
if (context.trigger) {
|
|
1298
|
+
const handleScroll = (event) => {
|
|
1299
|
+
if (event.target?.contains(context.trigger)) onClose();
|
|
1300
|
+
};
|
|
1301
|
+
window.addEventListener("scroll", handleScroll, { capture: true });
|
|
1302
|
+
return () => window.removeEventListener("scroll", handleScroll, { capture: true });
|
|
1303
|
+
}
|
|
1304
|
+
}, [context.trigger, onClose]);
|
|
1305
|
+
return /* @__PURE__ */ jsx(DismissableLayer, {
|
|
1306
|
+
asChild: true,
|
|
1307
|
+
disableOutsidePointerEvents: false,
|
|
1308
|
+
onEscapeKeyDown,
|
|
1309
|
+
onPointerDownOutside,
|
|
1310
|
+
onFocusOutside: (event) => event.preventDefault(),
|
|
1311
|
+
onDismiss: onClose,
|
|
1312
|
+
children: /* @__PURE__ */ jsxs(PopperPrimitive.Content, {
|
|
1313
|
+
"data-state": context.stateAttribute,
|
|
1314
|
+
...popperScope,
|
|
1315
|
+
...contentProps,
|
|
1316
|
+
ref: forwardedRef,
|
|
1317
|
+
style: {
|
|
1318
|
+
...contentProps.style,
|
|
1319
|
+
"--radix-tooltip-content-transform-origin": "var(--radix-popper-transform-origin)",
|
|
1320
|
+
"--radix-tooltip-content-available-width": "var(--radix-popper-available-width)",
|
|
1321
|
+
"--radix-tooltip-content-available-height": "var(--radix-popper-available-height)",
|
|
1322
|
+
"--radix-tooltip-trigger-width": "var(--radix-popper-anchor-width)",
|
|
1323
|
+
"--radix-tooltip-trigger-height": "var(--radix-popper-anchor-height)"
|
|
1324
|
+
},
|
|
1325
|
+
children: [/* @__PURE__ */ jsx(Slottable, { children }), /* @__PURE__ */ jsx(VisuallyHiddenContentContextProvider, {
|
|
1326
|
+
scope: __scopeTooltip,
|
|
1327
|
+
isInside: true,
|
|
1328
|
+
children: /* @__PURE__ */ jsx(VisuallyHiddenPrimitive.Root, {
|
|
1329
|
+
id: context.contentId,
|
|
1330
|
+
role: "tooltip",
|
|
1331
|
+
children: ariaLabel || children
|
|
1332
|
+
})
|
|
1333
|
+
})]
|
|
1334
|
+
})
|
|
1335
|
+
});
|
|
1336
|
+
});
|
|
1337
|
+
TooltipContent.displayName = CONTENT_NAME;
|
|
1338
|
+
var ARROW_NAME = "Tooltip.Arrow";
|
|
1339
|
+
var TooltipArrow = forwardRef((props, forwardedRef) => {
|
|
1340
|
+
const { __scopeTooltip, ...arrowProps } = props;
|
|
1341
|
+
const popperScope = usePopperScope(__scopeTooltip);
|
|
1342
|
+
return useVisuallyHiddenContentContext(ARROW_NAME, __scopeTooltip).isInside ? null : /* @__PURE__ */ jsx(PopperPrimitive.Arrow, {
|
|
1343
|
+
...popperScope,
|
|
1344
|
+
...arrowProps,
|
|
1345
|
+
ref: forwardedRef
|
|
1346
|
+
});
|
|
1347
|
+
});
|
|
1348
|
+
TooltipArrow.displayName = ARROW_NAME;
|
|
1349
|
+
var getExitSideFromRect = (point, rect) => {
|
|
1350
|
+
const top = Math.abs(rect.top - point.y);
|
|
1351
|
+
const bottom = Math.abs(rect.bottom - point.y);
|
|
1352
|
+
const right = Math.abs(rect.right - point.x);
|
|
1353
|
+
const left = Math.abs(rect.left - point.x);
|
|
1354
|
+
switch (Math.min(top, bottom, right, left)) {
|
|
1355
|
+
case left: return "left";
|
|
1356
|
+
case right: return "right";
|
|
1357
|
+
case top: return "top";
|
|
1358
|
+
case bottom: return "bottom";
|
|
1359
|
+
default: throw new Error("unreachable");
|
|
1360
|
+
}
|
|
1361
|
+
};
|
|
1362
|
+
var getPaddedExitPoints = (exitPoint, exitSide, padding = 5) => {
|
|
1363
|
+
const paddedExitPoints = [];
|
|
1364
|
+
switch (exitSide) {
|
|
1365
|
+
case "top":
|
|
1366
|
+
paddedExitPoints.push({
|
|
1367
|
+
x: exitPoint.x - padding,
|
|
1368
|
+
y: exitPoint.y + padding
|
|
1369
|
+
}, {
|
|
1370
|
+
x: exitPoint.x + padding,
|
|
1371
|
+
y: exitPoint.y + padding
|
|
1372
|
+
});
|
|
1373
|
+
break;
|
|
1374
|
+
case "bottom":
|
|
1375
|
+
paddedExitPoints.push({
|
|
1376
|
+
x: exitPoint.x - padding,
|
|
1377
|
+
y: exitPoint.y - padding
|
|
1378
|
+
}, {
|
|
1379
|
+
x: exitPoint.x + padding,
|
|
1380
|
+
y: exitPoint.y - padding
|
|
1381
|
+
});
|
|
1382
|
+
break;
|
|
1383
|
+
case "left":
|
|
1384
|
+
paddedExitPoints.push({
|
|
1385
|
+
x: exitPoint.x + padding,
|
|
1386
|
+
y: exitPoint.y - padding
|
|
1387
|
+
}, {
|
|
1388
|
+
x: exitPoint.x + padding,
|
|
1389
|
+
y: exitPoint.y + padding
|
|
1390
|
+
});
|
|
1391
|
+
break;
|
|
1392
|
+
case "right":
|
|
1393
|
+
paddedExitPoints.push({
|
|
1394
|
+
x: exitPoint.x - padding,
|
|
1395
|
+
y: exitPoint.y - padding
|
|
1396
|
+
}, {
|
|
1397
|
+
x: exitPoint.x - padding,
|
|
1398
|
+
y: exitPoint.y + padding
|
|
1399
|
+
});
|
|
1400
|
+
break;
|
|
1401
|
+
}
|
|
1402
|
+
return paddedExitPoints;
|
|
1403
|
+
};
|
|
1404
|
+
var getPointsFromRect = (rect) => {
|
|
1405
|
+
const { top, right, bottom, left } = rect;
|
|
1406
|
+
return [
|
|
1407
|
+
{
|
|
1408
|
+
x: left,
|
|
1409
|
+
y: top
|
|
1410
|
+
},
|
|
1411
|
+
{
|
|
1412
|
+
x: right,
|
|
1413
|
+
y: top
|
|
1414
|
+
},
|
|
1415
|
+
{
|
|
1416
|
+
x: right,
|
|
1417
|
+
y: bottom
|
|
1418
|
+
},
|
|
1419
|
+
{
|
|
1420
|
+
x: left,
|
|
1421
|
+
y: bottom
|
|
1422
|
+
}
|
|
1423
|
+
];
|
|
1424
|
+
};
|
|
1425
|
+
var isPointInPolygon = (point, polygon) => {
|
|
1426
|
+
const { x, y } = point;
|
|
1427
|
+
let inside = false;
|
|
1428
|
+
for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
|
|
1429
|
+
const xi = polygon[i].x;
|
|
1430
|
+
const yi = polygon[i].y;
|
|
1431
|
+
const xj = polygon[j].x;
|
|
1432
|
+
const yj = polygon[j].y;
|
|
1433
|
+
if (yi > y !== yj > y && x < (xj - xi) * (y - yi) / (yj - yi) + xi) inside = !inside;
|
|
1434
|
+
}
|
|
1435
|
+
return inside;
|
|
1436
|
+
};
|
|
1437
|
+
var getHull = (points) => {
|
|
1438
|
+
const newPoints = points.slice();
|
|
1439
|
+
newPoints.sort((a, b) => {
|
|
1440
|
+
if (a.x < b.x) return -1;
|
|
1441
|
+
else if (a.x > b.x) return 1;
|
|
1442
|
+
else if (a.y < b.y) return -1;
|
|
1443
|
+
else if (a.y > b.y) return 1;
|
|
1444
|
+
else return 0;
|
|
1445
|
+
});
|
|
1446
|
+
return getHullPresorted(newPoints);
|
|
1447
|
+
};
|
|
1448
|
+
var getHullPresorted = (points) => {
|
|
1449
|
+
if (points.length <= 1) return points.slice();
|
|
1450
|
+
const upperHull = [];
|
|
1451
|
+
for (let i = 0; i < points.length; i++) {
|
|
1452
|
+
const p = points[i];
|
|
1453
|
+
while (upperHull.length >= 2) {
|
|
1454
|
+
const q = upperHull[upperHull.length - 1];
|
|
1455
|
+
const r = upperHull[upperHull.length - 2];
|
|
1456
|
+
if ((q.x - r.x) * (p.y - r.y) >= (q.y - r.y) * (p.x - r.x)) upperHull.pop();
|
|
1457
|
+
else break;
|
|
1458
|
+
}
|
|
1459
|
+
upperHull.push(p);
|
|
1460
|
+
}
|
|
1461
|
+
upperHull.pop();
|
|
1462
|
+
const lowerHull = [];
|
|
1463
|
+
for (let i = points.length - 1; i >= 0; i--) {
|
|
1464
|
+
const p = points[i];
|
|
1465
|
+
while (lowerHull.length >= 2) {
|
|
1466
|
+
const q = lowerHull[lowerHull.length - 1];
|
|
1467
|
+
const r = lowerHull[lowerHull.length - 2];
|
|
1468
|
+
if ((q.x - r.x) * (p.y - r.y) >= (q.y - r.y) * (p.x - r.x)) lowerHull.pop();
|
|
1469
|
+
else break;
|
|
1470
|
+
}
|
|
1471
|
+
lowerHull.push(p);
|
|
1472
|
+
}
|
|
1473
|
+
lowerHull.pop();
|
|
1474
|
+
if (upperHull.length === 1 && lowerHull.length === 1 && upperHull[0].x === lowerHull[0].x && upperHull[0].y === lowerHull[0].y) return upperHull;
|
|
1475
|
+
else return upperHull.concat(lowerHull);
|
|
1476
|
+
};
|
|
1477
|
+
var Tooltip = {
|
|
1478
|
+
Provider: TooltipProvider,
|
|
1479
|
+
Trigger: TooltipTrigger
|
|
1480
|
+
};
|
|
1481
|
+
//#endregion
|
|
1482
|
+
//#region src/components/ErrorFallback/ErrorStack.tsx
|
|
1483
|
+
/**
|
|
1484
|
+
* Renders a parsed error stack trace with tree connector symbols and clickable vscode:// links for local frames.
|
|
1485
|
+
*/
|
|
1486
|
+
var ErrorStack = ({ classNames, error, frames: framesProp }) => {
|
|
1487
|
+
const frames = framesProp ?? (error ? ErrorStackParser.parse(error) : []);
|
|
1488
|
+
if (frames.length === 0) return null;
|
|
1489
|
+
return /* @__PURE__ */ jsx("div", {
|
|
1490
|
+
className: mx("font-mono text-sm", classNames),
|
|
1491
|
+
children: frames.map((frame, i) => {
|
|
1492
|
+
const isLast = i === frames.length - 1;
|
|
1493
|
+
const local = frame.fileName ? parseLocalFrame(frame.fileName, frame.lineNumber, frame.columnNumber) : void 0;
|
|
1494
|
+
const functionName = frame.functionName ?? "<anonymous>";
|
|
1495
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
1496
|
+
className: mx("grid grid-cols-[16px_1fr_auto_auto] items-stretch gap-x-2", local && "cursor-pointer hover:bg-hover-surface"),
|
|
1497
|
+
children: [
|
|
1498
|
+
/* @__PURE__ */ jsxs("div", {
|
|
1499
|
+
className: "relative",
|
|
1500
|
+
children: [/* @__PURE__ */ jsx("div", { className: mx("absolute left-1/2 -translate-x-1/2 w-px bg-neutral-500", isLast ? "top-0 h-1/2" : "inset-y-0") }), /* @__PURE__ */ jsx("div", { className: "absolute top-1/2 -translate-y-1/2 left-1/2 right-0 h-px bg-neutral-500" })]
|
|
1501
|
+
}),
|
|
1502
|
+
local ? /* @__PURE__ */ jsx("a", {
|
|
1503
|
+
href: local.href,
|
|
1504
|
+
className: "truncate self-center",
|
|
1505
|
+
children: functionName
|
|
1506
|
+
}) : /* @__PURE__ */ jsx("span", {
|
|
1507
|
+
className: "text-subdued truncate self-center",
|
|
1508
|
+
children: functionName
|
|
1509
|
+
}),
|
|
1510
|
+
/* @__PURE__ */ jsx("span", {
|
|
1511
|
+
className: "text-xs text-subdued truncate self-center truncate",
|
|
1512
|
+
children: local?.fileName ?? ""
|
|
1513
|
+
}),
|
|
1514
|
+
/* @__PURE__ */ jsx("span", {
|
|
1515
|
+
className: "text-xs text-subdued text-right self-center",
|
|
1516
|
+
children: local ? `${frame.lineNumber}:${frame.columnNumber}` : ""
|
|
1517
|
+
})
|
|
1518
|
+
]
|
|
1519
|
+
}, i);
|
|
1520
|
+
})
|
|
1521
|
+
});
|
|
1522
|
+
};
|
|
1523
|
+
/**
|
|
1524
|
+
* Parses a Vite `/@fs/` URL into a `vscode://` deep link and short filename.
|
|
1525
|
+
* Returns undefined if the URL cannot be resolved to a local file.
|
|
1526
|
+
*/
|
|
1527
|
+
var parseLocalFrame = (fileUrl, line, col) => {
|
|
1528
|
+
try {
|
|
1529
|
+
const { pathname } = new URL(fileUrl);
|
|
1530
|
+
if (!pathname.startsWith("/@fs/")) return;
|
|
1531
|
+
const localPath = pathname.slice(4);
|
|
1532
|
+
const i = localPath.indexOf("/packages/");
|
|
1533
|
+
const path = i === -1 ? localPath : localPath.substring(i + 10);
|
|
1534
|
+
return {
|
|
1535
|
+
href: `vscode://file/${localPath}:${line ?? 1}:${col ?? 1}`,
|
|
1536
|
+
fileName: path
|
|
1537
|
+
};
|
|
1538
|
+
} catch {
|
|
1539
|
+
return;
|
|
1540
|
+
}
|
|
1541
|
+
};
|
|
1542
|
+
//#endregion
|
|
1543
|
+
//#region src/components/ErrorFallback/parse-stack.ts
|
|
1544
|
+
/**
|
|
1545
|
+
* Parses `captureOwnerStack()` output (React dev) into frames for {@link ErrorStack}.
|
|
1546
|
+
* Prefixes a synthetic Error line when needed so `error-stack-parser` can read V8-style stacks.
|
|
1547
|
+
*/
|
|
1548
|
+
var parseCaptureOwnerStack = (stack) => {
|
|
1549
|
+
if (stack == null || stack.length === 0) return null;
|
|
1550
|
+
const err = /* @__PURE__ */ new Error();
|
|
1551
|
+
err.stack = stack;
|
|
1552
|
+
try {
|
|
1553
|
+
return ErrorStackParser.parse(err);
|
|
1554
|
+
} catch {
|
|
1555
|
+
err.stack = `Error\n${stack}`;
|
|
1556
|
+
try {
|
|
1557
|
+
return ErrorStackParser.parse(err);
|
|
1558
|
+
} catch {
|
|
1559
|
+
return null;
|
|
1560
|
+
}
|
|
1561
|
+
}
|
|
1562
|
+
};
|
|
1563
|
+
//#endregion
|
|
1564
|
+
export { ElevationContext as $, iconTheme as A, bindTheme as B, messageTheme as C, mainPaddingTransitions as D, mainIntrinsicSize as E, withColumn as F, ThemeProvider as G, useSafeArea as H, iconButtonTheme as I, hasIosKeyboard as J, TranslationsContext as K, buttonTheme as L, dialogTheme as M, columnTheme as N, linkTheme as O, cardTheme as P, useIconRegistry as Q, breadcrumbTheme as R, panelTheme as S, mainTheme as T, useElevationContext as U, initialSafeArea as V, ThemeContext as W, getIconRegistry as X, IconRegistryProvider as Y, phosphorIconSource as Z, skeletonTheme as _, useTooltipContext as a, scrollAreaTheme as b, defaultTx as c, toolbarTheme as d, ElevationProvider as et, toastTheme as f, sliderTheme as g, splitterTheme as h, createTooltipScope as i, focusTheme as j, inputTheme as k, tooltipTheme as l, statusTheme as m, ErrorStack as n, DensityContext as nt, useThemeContext as o, tagTheme as p, useTranslation$1 as q, Tooltip as r, defaultTheme as s, parseCaptureOwnerStack as t, DensityProvider as tt, tooltipContent as u, separatorTheme as v, menuTheme as w, popoverTheme as x, selectTheme as y, avatarTheme as z };
|
|
1565
|
+
|
|
1566
|
+
//# sourceMappingURL=chunk-parse-stack.mjs.map
|