@gnome-ui/react 1.44.0 → 1.45.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +7 -1
- package/dist/components/AboutDialog/AboutDialog.cjs +1 -1
- package/dist/components/AboutDialog/AboutDialog.cjs.map +1 -1
- package/dist/components/AboutDialog/AboutDialog.js +1 -1
- package/dist/components/AboutDialog/AboutDialog.js.map +1 -1
- package/dist/components/AboutDialog/AboutDialog.module.css.cjs +1 -1
- package/dist/components/AboutDialog/AboutDialog.module.css.cjs.map +1 -1
- package/dist/components/AboutDialog/AboutDialog.module.css.js +3 -3
- package/dist/components/AboutDialog/AboutDialog.module.css.js.map +1 -1
- package/dist/components/AboutDialog/index.d.ts +1 -1
- package/dist/components/ActionRow/ActionRow.cjs.map +1 -1
- package/dist/components/ActionRow/ActionRow.d.ts +1 -1
- package/dist/components/ActionRow/ActionRow.js.map +1 -1
- package/dist/components/ActionRow/ActionRow.module.css.cjs +1 -1
- package/dist/components/ActionRow/ActionRow.module.css.cjs.map +1 -1
- package/dist/components/ActionRow/ActionRow.module.css.js +9 -9
- package/dist/components/ActionRow/ActionRow.module.css.js.map +1 -1
- package/dist/components/ActionRow/index.d.ts +1 -1
- package/dist/components/Avatar/Avatar.cjs.map +1 -1
- package/dist/components/Avatar/Avatar.d.ts +2 -2
- package/dist/components/Avatar/Avatar.js.map +1 -1
- package/dist/components/Avatar/Avatar.module.css.cjs +1 -1
- package/dist/components/Avatar/Avatar.module.css.cjs.map +1 -1
- package/dist/components/Avatar/Avatar.module.css.js +16 -16
- package/dist/components/Avatar/Avatar.module.css.js.map +1 -1
- package/dist/components/Avatar/index.d.ts +1 -1
- package/dist/components/AvatarRotator/AvatarRotator.cjs.map +1 -1
- package/dist/components/AvatarRotator/AvatarRotator.js.map +1 -1
- package/dist/components/AvatarRotator/index.d.ts +1 -1
- package/dist/components/Badge/Badge.cjs.map +1 -1
- package/dist/components/Badge/Badge.d.ts +1 -1
- package/dist/components/Badge/Badge.js.map +1 -1
- package/dist/components/Badge/Badge.module.css.cjs +1 -1
- package/dist/components/Badge/Badge.module.css.cjs.map +1 -1
- package/dist/components/Badge/Badge.module.css.js +9 -9
- package/dist/components/Badge/Badge.module.css.js.map +1 -1
- package/dist/components/Badge/index.d.ts +1 -1
- package/dist/components/Banner/Banner.cjs.map +1 -1
- package/dist/components/Banner/Banner.d.ts +1 -1
- package/dist/components/Banner/Banner.js.map +1 -1
- package/dist/components/Banner/Banner.module.css.cjs +1 -1
- package/dist/components/Banner/Banner.module.css.cjs.map +1 -1
- package/dist/components/Banner/Banner.module.css.js +5 -5
- package/dist/components/Banner/Banner.module.css.js.map +1 -1
- package/dist/components/Banner/index.d.ts +1 -1
- package/dist/components/Bin/Bin.cjs.map +1 -1
- package/dist/components/Bin/Bin.js.map +1 -1
- package/dist/components/Bin/index.d.ts +1 -1
- package/dist/components/Blockquote/Blockquote.cjs.map +1 -1
- package/dist/components/Blockquote/Blockquote.d.ts +1 -1
- package/dist/components/Blockquote/Blockquote.js.map +1 -1
- package/dist/components/Blockquote/Blockquote.module.css.cjs +1 -1
- package/dist/components/Blockquote/Blockquote.module.css.cjs.map +1 -1
- package/dist/components/Blockquote/Blockquote.module.css.js +11 -11
- package/dist/components/Blockquote/Blockquote.module.css.js.map +1 -1
- package/dist/components/Blockquote/index.d.ts +1 -1
- package/dist/components/BottomSheet/BottomSheet.cjs.map +1 -1
- package/dist/components/BottomSheet/BottomSheet.d.ts +1 -1
- package/dist/components/BottomSheet/BottomSheet.js.map +1 -1
- package/dist/components/BottomSheet/BottomSheet.module.css.cjs +1 -1
- package/dist/components/BottomSheet/BottomSheet.module.css.cjs.map +1 -1
- package/dist/components/BottomSheet/BottomSheet.module.css.js +3 -3
- package/dist/components/BottomSheet/BottomSheet.module.css.js.map +1 -1
- package/dist/components/BottomSheet/index.d.ts +1 -1
- package/dist/components/Box/Box.cjs.map +1 -1
- package/dist/components/Box/Box.d.ts +3 -3
- package/dist/components/Box/Box.js.map +1 -1
- package/dist/components/Box/index.d.ts +1 -1
- package/dist/components/BoxedList/BoxedList.cjs +1 -1
- package/dist/components/BoxedList/BoxedList.cjs.map +1 -1
- package/dist/components/BoxedList/BoxedList.d.ts +1 -1
- package/dist/components/BoxedList/BoxedList.js +0 -1
- package/dist/components/BoxedList/BoxedList.js.map +1 -1
- package/dist/components/BoxedList/BoxedList.module.css.cjs +1 -1
- package/dist/components/BoxedList/BoxedList.module.css.cjs.map +1 -1
- package/dist/components/BoxedList/BoxedList.module.css.js +5 -5
- package/dist/components/BoxedList/BoxedList.module.css.js.map +1 -1
- package/dist/components/BoxedList/index.d.ts +1 -1
- package/dist/components/BreakpointBin/BreakpointBin.cjs +1 -1
- package/dist/components/BreakpointBin/BreakpointBin.cjs.map +1 -1
- package/dist/components/BreakpointBin/BreakpointBin.d.ts +1 -1
- package/dist/components/BreakpointBin/BreakpointBin.js +1 -1
- package/dist/components/BreakpointBin/BreakpointBin.js.map +1 -1
- package/dist/components/BreakpointBin/index.d.ts +1 -1
- package/dist/components/Button/Button.cjs.map +1 -1
- package/dist/components/Button/Button.d.ts +3 -3
- package/dist/components/Button/Button.js.map +1 -1
- package/dist/components/Button/Button.module.css.cjs +1 -1
- package/dist/components/Button/Button.module.css.cjs.map +1 -1
- package/dist/components/Button/Button.module.css.js +11 -11
- package/dist/components/Button/Button.module.css.js.map +1 -1
- package/dist/components/Button/index.d.ts +1 -1
- package/dist/components/ButtonContent/ButtonContent.cjs.map +1 -1
- package/dist/components/ButtonContent/ButtonContent.d.ts +1 -1
- package/dist/components/ButtonContent/ButtonContent.js.map +1 -1
- package/dist/components/ButtonContent/index.d.ts +1 -1
- package/dist/components/ButtonRow/ButtonRow.cjs.map +1 -1
- package/dist/components/ButtonRow/ButtonRow.d.ts +1 -1
- package/dist/components/ButtonRow/ButtonRow.js.map +1 -1
- package/dist/components/ButtonRow/ButtonRow.module.css.cjs +1 -1
- package/dist/components/ButtonRow/ButtonRow.module.css.cjs.map +1 -1
- package/dist/components/ButtonRow/ButtonRow.module.css.js +7 -7
- package/dist/components/ButtonRow/ButtonRow.module.css.js.map +1 -1
- package/dist/components/ButtonRow/index.d.ts +1 -1
- package/dist/components/Card/Card.cjs.map +1 -1
- package/dist/components/Card/Card.d.ts +1 -1
- package/dist/components/Card/Card.js.map +1 -1
- package/dist/components/Card/Card.module.css.cjs +1 -1
- package/dist/components/Card/Card.module.css.cjs.map +1 -1
- package/dist/components/Card/Card.module.css.js +5 -5
- package/dist/components/Card/Card.module.css.js.map +1 -1
- package/dist/components/Card/index.d.ts +1 -1
- package/dist/components/Carousel/Carousel.cjs +1 -1
- package/dist/components/Carousel/Carousel.cjs.map +1 -1
- package/dist/components/Carousel/Carousel.d.ts +1 -1
- package/dist/components/Carousel/Carousel.js +7 -6
- package/dist/components/Carousel/Carousel.js.map +1 -1
- package/dist/components/Carousel/Carousel.module.css.cjs +1 -1
- package/dist/components/Carousel/Carousel.module.css.cjs.map +1 -1
- package/dist/components/Carousel/Carousel.module.css.js +10 -10
- package/dist/components/Carousel/Carousel.module.css.js.map +1 -1
- package/dist/components/Carousel/index.d.ts +1 -1
- package/dist/components/CheckRow/CheckRow.cjs.map +1 -1
- package/dist/components/CheckRow/CheckRow.d.ts +1 -1
- package/dist/components/CheckRow/CheckRow.js.map +1 -1
- package/dist/components/CheckRow/CheckRow.module.css.cjs +1 -1
- package/dist/components/CheckRow/CheckRow.module.css.cjs.map +1 -1
- package/dist/components/CheckRow/CheckRow.module.css.js +10 -10
- package/dist/components/CheckRow/CheckRow.module.css.js.map +1 -1
- package/dist/components/CheckRow/index.d.ts +1 -1
- package/dist/components/Checkbox/Checkbox.cjs.map +1 -1
- package/dist/components/Checkbox/Checkbox.d.ts +2 -2
- package/dist/components/Checkbox/Checkbox.js.map +1 -1
- package/dist/components/Checkbox/Checkbox.module.css.cjs +1 -1
- package/dist/components/Checkbox/Checkbox.module.css.cjs.map +1 -1
- package/dist/components/Checkbox/Checkbox.module.css.js +1 -1
- package/dist/components/Checkbox/Checkbox.module.css.js.map +1 -1
- package/dist/components/Checkbox/index.d.ts +1 -1
- package/dist/components/Chip/Chip.cjs.map +1 -1
- package/dist/components/Chip/Chip.d.ts +1 -1
- package/dist/components/Chip/Chip.js.map +1 -1
- package/dist/components/Chip/Chip.module.css.cjs +1 -1
- package/dist/components/Chip/Chip.module.css.cjs.map +1 -1
- package/dist/components/Chip/Chip.module.css.js +7 -7
- package/dist/components/Chip/Chip.module.css.js.map +1 -1
- package/dist/components/Chip/index.d.ts +1 -1
- package/dist/components/Clamp/Clamp.cjs.map +1 -1
- package/dist/components/Clamp/Clamp.js.map +1 -1
- package/dist/components/Clamp/index.d.ts +1 -1
- package/dist/components/ColorPicker/ColorPicker.cjs.map +1 -1
- package/dist/components/ColorPicker/ColorPicker.d.ts +6 -6
- package/dist/components/ColorPicker/ColorPicker.js.map +1 -1
- package/dist/components/ColorPicker/ColorPicker.module.css.cjs +1 -1
- package/dist/components/ColorPicker/ColorPicker.module.css.cjs.map +1 -1
- package/dist/components/ColorPicker/ColorPicker.module.css.js +4 -4
- package/dist/components/ColorPicker/ColorPicker.module.css.js.map +1 -1
- package/dist/components/ColorPicker/index.d.ts +1 -1
- package/dist/components/ColumnView/ColumnView.cjs +1 -1
- package/dist/components/ColumnView/ColumnView.cjs.map +1 -1
- package/dist/components/ColumnView/ColumnView.d.ts +3 -3
- package/dist/components/ColumnView/ColumnView.js +2 -5
- package/dist/components/ColumnView/ColumnView.js.map +1 -1
- package/dist/components/ColumnView/ColumnView.module.css.cjs +1 -1
- package/dist/components/ColumnView/ColumnView.module.css.cjs.map +1 -1
- package/dist/components/ColumnView/ColumnView.module.css.js +22 -22
- package/dist/components/ColumnView/ColumnView.module.css.js.map +1 -1
- package/dist/components/ColumnView/index.d.ts +1 -1
- package/dist/components/ComboRow/ComboRow.cjs +1 -1
- package/dist/components/ComboRow/ComboRow.cjs.map +1 -1
- package/dist/components/ComboRow/ComboRow.d.ts +1 -1
- package/dist/components/ComboRow/ComboRow.js +0 -2
- package/dist/components/ComboRow/ComboRow.js.map +1 -1
- package/dist/components/ComboRow/ComboRow.module.css.cjs +1 -1
- package/dist/components/ComboRow/ComboRow.module.css.cjs.map +1 -1
- package/dist/components/ComboRow/ComboRow.module.css.js +3 -3
- package/dist/components/ComboRow/ComboRow.module.css.js.map +1 -1
- package/dist/components/ComboRow/index.d.ts +1 -1
- package/dist/components/ContributionGraph/ContributionGraph.cjs +1 -1
- package/dist/components/ContributionGraph/ContributionGraph.cjs.map +1 -1
- package/dist/components/ContributionGraph/ContributionGraph.js +41 -41
- package/dist/components/ContributionGraph/ContributionGraph.js.map +1 -1
- package/dist/components/ContributionGraph/index.d.ts +1 -1
- package/dist/components/CountDownTimer/CountDownTimer.cjs.map +1 -1
- package/dist/components/CountDownTimer/CountDownTimer.d.ts +3 -3
- package/dist/components/CountDownTimer/CountDownTimer.js.map +1 -1
- package/dist/components/CountDownTimer/index.d.ts +1 -1
- package/dist/components/Dialog/Dialog.cjs.map +1 -1
- package/dist/components/Dialog/Dialog.d.ts +4 -4
- package/dist/components/Dialog/Dialog.js.map +1 -1
- package/dist/components/Dialog/Dialog.module.css.cjs +1 -1
- package/dist/components/Dialog/Dialog.module.css.cjs.map +1 -1
- package/dist/components/Dialog/Dialog.module.css.js +6 -6
- package/dist/components/Dialog/Dialog.module.css.js.map +1 -1
- package/dist/components/Dialog/dialogUtils.cjs.map +1 -1
- package/dist/components/Dialog/dialogUtils.js.map +1 -1
- package/dist/components/Dialog/index.d.ts +1 -1
- package/dist/components/Drawer/Drawer.cjs +1 -1
- package/dist/components/Drawer/Drawer.cjs.map +1 -1
- package/dist/components/Drawer/Drawer.d.ts +3 -3
- package/dist/components/Drawer/Drawer.js +49 -38
- package/dist/components/Drawer/Drawer.js.map +1 -1
- package/dist/components/Drawer/Drawer.module.css.cjs +1 -1
- package/dist/components/Drawer/Drawer.module.css.cjs.map +1 -1
- package/dist/components/Drawer/Drawer.module.css.js +7 -6
- package/dist/components/Drawer/Drawer.module.css.js.map +1 -1
- package/dist/components/Drawer/index.d.ts +1 -1
- package/dist/components/Dropdown/Dropdown.cjs.map +1 -1
- package/dist/components/Dropdown/Dropdown.d.ts +2 -2
- package/dist/components/Dropdown/Dropdown.js.map +1 -1
- package/dist/components/Dropdown/Dropdown.module.css.cjs +1 -1
- package/dist/components/Dropdown/Dropdown.module.css.cjs.map +1 -1
- package/dist/components/Dropdown/Dropdown.module.css.js +3 -3
- package/dist/components/Dropdown/Dropdown.module.css.js.map +1 -1
- package/dist/components/Dropdown/index.d.ts +1 -1
- package/dist/components/EntryRow/EntryRow.cjs.map +1 -1
- package/dist/components/EntryRow/EntryRow.js.map +1 -1
- package/dist/components/EntryRow/EntryRow.module.css.cjs +1 -1
- package/dist/components/EntryRow/EntryRow.module.css.cjs.map +1 -1
- package/dist/components/EntryRow/EntryRow.module.css.js +10 -10
- package/dist/components/EntryRow/EntryRow.module.css.js.map +1 -1
- package/dist/components/EntryRow/index.d.ts +1 -1
- package/dist/components/ExpanderRow/ExpanderRow.cjs.map +1 -1
- package/dist/components/ExpanderRow/ExpanderRow.js.map +1 -1
- package/dist/components/ExpanderRow/ExpanderRow.module.css.cjs +1 -1
- package/dist/components/ExpanderRow/ExpanderRow.module.css.cjs.map +1 -1
- package/dist/components/ExpanderRow/ExpanderRow.module.css.js +14 -14
- package/dist/components/ExpanderRow/ExpanderRow.module.css.js.map +1 -1
- package/dist/components/ExpanderRow/index.d.ts +1 -1
- package/dist/components/Footer/Footer.cjs.map +1 -1
- package/dist/components/Footer/Footer.js.map +1 -1
- package/dist/components/Footer/index.d.ts +1 -1
- package/dist/components/Frame/Frame.cjs.map +1 -1
- package/dist/components/Frame/Frame.js.map +1 -1
- package/dist/components/Frame/index.d.ts +1 -1
- package/dist/components/GnomeProvider/GnomeContext.cjs.map +1 -1
- package/dist/components/GnomeProvider/GnomeContext.d.ts +5 -5
- package/dist/components/GnomeProvider/GnomeContext.js.map +1 -1
- package/dist/components/GnomeProvider/GnomeProvider.cjs.map +1 -1
- package/dist/components/GnomeProvider/GnomeProvider.js.map +1 -1
- package/dist/components/HeaderBar/HeaderBar.cjs.map +1 -1
- package/dist/components/HeaderBar/HeaderBar.d.ts +1 -1
- package/dist/components/HeaderBar/HeaderBar.js.map +1 -1
- package/dist/components/HeaderBar/index.d.ts +1 -1
- package/dist/components/Icon/Icon.cjs.map +1 -1
- package/dist/components/Icon/Icon.d.ts +2 -2
- package/dist/components/Icon/Icon.js.map +1 -1
- package/dist/components/Icon/index.d.ts +1 -1
- package/dist/components/IconButton/IconButton.cjs.map +1 -1
- package/dist/components/IconButton/IconButton.d.ts +2 -2
- package/dist/components/IconButton/IconButton.js.map +1 -1
- package/dist/components/IconButton/index.d.ts +1 -1
- package/dist/components/InlineViewSwitcher/InlineViewSwitcher.cjs +1 -1
- package/dist/components/InlineViewSwitcher/InlineViewSwitcher.cjs.map +1 -1
- package/dist/components/InlineViewSwitcher/InlineViewSwitcher.d.ts +3 -3
- package/dist/components/InlineViewSwitcher/InlineViewSwitcher.js +8 -8
- package/dist/components/InlineViewSwitcher/InlineViewSwitcher.js.map +1 -1
- package/dist/components/InlineViewSwitcher/InlineViewSwitcher.module.css.cjs +1 -1
- package/dist/components/InlineViewSwitcher/InlineViewSwitcher.module.css.cjs.map +1 -1
- package/dist/components/InlineViewSwitcher/InlineViewSwitcher.module.css.js +10 -10
- package/dist/components/InlineViewSwitcher/InlineViewSwitcher.module.css.js.map +1 -1
- package/dist/components/InlineViewSwitcher/InlineViewSwitcherItem.cjs.map +1 -1
- package/dist/components/InlineViewSwitcher/InlineViewSwitcherItem.d.ts +1 -1
- package/dist/components/InlineViewSwitcher/InlineViewSwitcherItem.js.map +1 -1
- package/dist/components/InlineViewSwitcher/index.d.ts +2 -2
- package/dist/components/Link/Link.cjs.map +1 -1
- package/dist/components/Link/Link.js.map +1 -1
- package/dist/components/Link/Link.module.css.cjs +1 -1
- package/dist/components/Link/Link.module.css.cjs.map +1 -1
- package/dist/components/Link/Link.module.css.js +2 -2
- package/dist/components/Link/Link.module.css.js.map +1 -1
- package/dist/components/Link/index.d.ts +1 -1
- package/dist/components/LinkedGroup/LinkedGroup.cjs.map +1 -1
- package/dist/components/LinkedGroup/LinkedGroup.js.map +1 -1
- package/dist/components/LinkedGroup/LinkedGroup.module.css.cjs +1 -1
- package/dist/components/LinkedGroup/LinkedGroup.module.css.cjs.map +1 -1
- package/dist/components/LinkedGroup/LinkedGroup.module.css.js +2 -2
- package/dist/components/LinkedGroup/LinkedGroup.module.css.js.map +1 -1
- package/dist/components/LinkedGroup/index.d.ts +1 -1
- package/dist/components/NavigationSplitView/NavigationSplitView.cjs.map +1 -1
- package/dist/components/NavigationSplitView/NavigationSplitView.d.ts +1 -1
- package/dist/components/NavigationSplitView/NavigationSplitView.js.map +1 -1
- package/dist/components/NavigationSplitView/index.d.ts +1 -1
- package/dist/components/NavigationView/NavigationView.cjs.map +1 -1
- package/dist/components/NavigationView/NavigationView.d.ts +2 -2
- package/dist/components/NavigationView/NavigationView.js.map +1 -1
- package/dist/components/NavigationView/NavigationView.module.css.cjs +1 -1
- package/dist/components/NavigationView/NavigationView.module.css.cjs.map +1 -1
- package/dist/components/NavigationView/NavigationView.module.css.js +3 -3
- package/dist/components/NavigationView/NavigationView.module.css.js.map +1 -1
- package/dist/components/NavigationView/index.d.ts +2 -2
- package/dist/components/OverlaySplitView/OverlaySplitView.cjs.map +1 -1
- package/dist/components/OverlaySplitView/OverlaySplitView.d.ts +2 -2
- package/dist/components/OverlaySplitView/OverlaySplitView.js.map +1 -1
- package/dist/components/OverlaySplitView/OverlaySplitView.module.css.cjs +1 -1
- package/dist/components/OverlaySplitView/OverlaySplitView.module.css.cjs.map +1 -1
- package/dist/components/OverlaySplitView/OverlaySplitView.module.css.js +12 -12
- package/dist/components/OverlaySplitView/OverlaySplitView.module.css.js.map +1 -1
- package/dist/components/OverlaySplitView/index.d.ts +1 -1
- package/dist/components/PasswordEntryRow/PasswordEntryRow.cjs.map +1 -1
- package/dist/components/PasswordEntryRow/PasswordEntryRow.d.ts +1 -1
- package/dist/components/PasswordEntryRow/PasswordEntryRow.js.map +1 -1
- package/dist/components/PasswordEntryRow/PasswordEntryRow.module.css.cjs +1 -1
- package/dist/components/PasswordEntryRow/PasswordEntryRow.module.css.cjs.map +1 -1
- package/dist/components/PasswordEntryRow/PasswordEntryRow.module.css.js +1 -1
- package/dist/components/PasswordEntryRow/PasswordEntryRow.module.css.js.map +1 -1
- package/dist/components/PasswordEntryRow/index.d.ts +1 -1
- package/dist/components/PathBar/PathBar.cjs.map +1 -1
- package/dist/components/PathBar/PathBar.js.map +1 -1
- package/dist/components/PathBar/PathBar.module.css.cjs +1 -1
- package/dist/components/PathBar/PathBar.module.css.cjs.map +1 -1
- package/dist/components/PathBar/PathBar.module.css.js +7 -7
- package/dist/components/PathBar/PathBar.module.css.js.map +1 -1
- package/dist/components/PathBar/index.d.ts +1 -1
- package/dist/components/Popover/Popover.cjs.map +1 -1
- package/dist/components/Popover/Popover.d.ts +2 -2
- package/dist/components/Popover/Popover.js.map +1 -1
- package/dist/components/Popover/Popover.module.css.cjs +1 -1
- package/dist/components/Popover/Popover.module.css.cjs.map +1 -1
- package/dist/components/Popover/Popover.module.css.js +7 -7
- package/dist/components/Popover/Popover.module.css.js.map +1 -1
- package/dist/components/Popover/index.d.ts +1 -1
- package/dist/components/PreferencesDialog/PreferencesDialog.cjs +1 -1
- package/dist/components/PreferencesDialog/PreferencesDialog.cjs.map +1 -1
- package/dist/components/PreferencesDialog/PreferencesDialog.d.ts +1 -1
- package/dist/components/PreferencesDialog/PreferencesDialog.js +0 -1
- package/dist/components/PreferencesDialog/PreferencesDialog.js.map +1 -1
- package/dist/components/PreferencesDialog/PreferencesDialog.module.css.cjs +1 -1
- package/dist/components/PreferencesDialog/PreferencesDialog.module.css.cjs.map +1 -1
- package/dist/components/PreferencesDialog/PreferencesDialog.module.css.js +3 -3
- package/dist/components/PreferencesDialog/PreferencesDialog.module.css.js.map +1 -1
- package/dist/components/PreferencesDialog/index.d.ts +1 -1
- package/dist/components/PreferencesGroup/PreferencesGroup.cjs.map +1 -1
- package/dist/components/PreferencesGroup/PreferencesGroup.js.map +1 -1
- package/dist/components/PreferencesGroup/index.d.ts +1 -1
- package/dist/components/PreferencesPage/PreferencesPage.cjs.map +1 -1
- package/dist/components/PreferencesPage/PreferencesPage.js.map +1 -1
- package/dist/components/PreferencesPage/index.d.ts +1 -1
- package/dist/components/ProgressBar/ProgressBar.cjs.map +1 -1
- package/dist/components/ProgressBar/ProgressBar.d.ts +4 -4
- package/dist/components/ProgressBar/ProgressBar.js.map +1 -1
- package/dist/components/ProgressBar/ProgressBar.module.css.cjs +1 -1
- package/dist/components/ProgressBar/ProgressBar.module.css.cjs.map +1 -1
- package/dist/components/ProgressBar/ProgressBar.module.css.js +8 -8
- package/dist/components/ProgressBar/ProgressBar.module.css.js.map +1 -1
- package/dist/components/ProgressBar/index.d.ts +1 -1
- package/dist/components/RadioButton/RadioButton.cjs.map +1 -1
- package/dist/components/RadioButton/RadioButton.d.ts +2 -2
- package/dist/components/RadioButton/RadioButton.js.map +1 -1
- package/dist/components/RadioButton/RadioButton.module.css.cjs +1 -1
- package/dist/components/RadioButton/RadioButton.module.css.cjs.map +1 -1
- package/dist/components/RadioButton/RadioButton.module.css.js +1 -1
- package/dist/components/RadioButton/RadioButton.module.css.js.map +1 -1
- package/dist/components/RadioButton/index.d.ts +1 -1
- package/dist/components/SearchBar/SearchBar.cjs +1 -1
- package/dist/components/SearchBar/SearchBar.cjs.map +1 -1
- package/dist/components/SearchBar/SearchBar.d.ts +1 -1
- package/dist/components/SearchBar/SearchBar.js +1 -3
- package/dist/components/SearchBar/SearchBar.js.map +1 -1
- package/dist/components/SearchBar/SearchBar.module.css.cjs +1 -1
- package/dist/components/SearchBar/SearchBar.module.css.cjs.map +1 -1
- package/dist/components/SearchBar/SearchBar.module.css.js +13 -13
- package/dist/components/SearchBar/SearchBar.module.css.js.map +1 -1
- package/dist/components/SearchBar/index.d.ts +1 -1
- package/dist/components/SegmentedBar/SegmentedBar.cjs +2 -0
- package/dist/components/SegmentedBar/SegmentedBar.cjs.map +1 -0
- package/dist/components/SegmentedBar/SegmentedBar.d.ts +42 -0
- package/dist/components/SegmentedBar/SegmentedBar.js +40 -0
- package/dist/components/SegmentedBar/SegmentedBar.js.map +1 -0
- package/dist/components/SegmentedBar/SegmentedBar.module.css.cjs +2 -0
- package/dist/components/SegmentedBar/SegmentedBar.module.css.cjs.map +1 -0
- package/dist/components/SegmentedBar/SegmentedBar.module.css.js +18 -0
- package/dist/components/SegmentedBar/SegmentedBar.module.css.js.map +1 -0
- package/dist/components/SegmentedBar/index.d.ts +2 -0
- package/dist/components/SegmentedBar.cjs +1 -0
- package/dist/components/SegmentedBar.d.ts +2 -0
- package/dist/components/SegmentedBar.js +2 -0
- package/dist/components/Separator/Separator.cjs.map +1 -1
- package/dist/components/Separator/Separator.d.ts +1 -1
- package/dist/components/Separator/Separator.js.map +1 -1
- package/dist/components/Separator/index.d.ts +1 -1
- package/dist/components/ShortcutLabel/ShortcutLabel.cjs.map +1 -1
- package/dist/components/ShortcutLabel/ShortcutLabel.js.map +1 -1
- package/dist/components/ShortcutLabel/index.d.ts +1 -1
- package/dist/components/ShortcutsDialog/ShortcutsDialog.cjs +1 -1
- package/dist/components/ShortcutsDialog/ShortcutsDialog.cjs.map +1 -1
- package/dist/components/ShortcutsDialog/ShortcutsDialog.js +0 -1
- package/dist/components/ShortcutsDialog/ShortcutsDialog.js.map +1 -1
- package/dist/components/ShortcutsDialog/ShortcutsDialog.module.css.cjs +1 -1
- package/dist/components/ShortcutsDialog/ShortcutsDialog.module.css.cjs.map +1 -1
- package/dist/components/ShortcutsDialog/ShortcutsDialog.module.css.js +3 -3
- package/dist/components/ShortcutsDialog/ShortcutsDialog.module.css.js.map +1 -1
- package/dist/components/ShortcutsDialog/index.d.ts +1 -1
- package/dist/components/Sidebar/Sidebar.cjs.map +1 -1
- package/dist/components/Sidebar/Sidebar.d.ts +2 -2
- package/dist/components/Sidebar/Sidebar.js.map +1 -1
- package/dist/components/Sidebar/Sidebar.module.css.cjs +1 -1
- package/dist/components/Sidebar/Sidebar.module.css.cjs.map +1 -1
- package/dist/components/Sidebar/Sidebar.module.css.js +2 -2
- package/dist/components/Sidebar/Sidebar.module.css.js.map +1 -1
- package/dist/components/Sidebar/SidebarItem.cjs.map +1 -1
- package/dist/components/Sidebar/SidebarItem.d.ts +1 -1
- package/dist/components/Sidebar/SidebarItem.js.map +1 -1
- package/dist/components/Sidebar/SidebarSection.cjs +1 -1
- package/dist/components/Sidebar/SidebarSection.cjs.map +1 -1
- package/dist/components/Sidebar/SidebarSection.d.ts +1 -1
- package/dist/components/Sidebar/SidebarSection.js +0 -1
- package/dist/components/Sidebar/SidebarSection.js.map +1 -1
- package/dist/components/Sidebar/index.d.ts +4 -4
- package/dist/components/Sidebar.cjs +1 -1
- package/dist/components/Sidebar.js +3 -3
- package/dist/components/Skeleton/Skeleton.cjs.map +1 -1
- package/dist/components/Skeleton/Skeleton.d.ts +1 -1
- package/dist/components/Skeleton/Skeleton.js.map +1 -1
- package/dist/components/Skeleton/Skeleton.module.css.cjs +1 -1
- package/dist/components/Skeleton/Skeleton.module.css.cjs.map +1 -1
- package/dist/components/Skeleton/Skeleton.module.css.js +7 -7
- package/dist/components/Skeleton/Skeleton.module.css.js.map +1 -1
- package/dist/components/Skeleton/index.d.ts +1 -1
- package/dist/components/Slider/Slider.cjs.map +1 -1
- package/dist/components/Slider/Slider.d.ts +5 -5
- package/dist/components/Slider/Slider.js.map +1 -1
- package/dist/components/Slider/Slider.module.css.cjs +1 -1
- package/dist/components/Slider/Slider.module.css.cjs.map +1 -1
- package/dist/components/Slider/Slider.module.css.js +9 -9
- package/dist/components/Slider/Slider.module.css.js.map +1 -1
- package/dist/components/Slider/index.d.ts +1 -1
- package/dist/components/SpinButton/SpinButton.cjs.map +1 -1
- package/dist/components/SpinButton/SpinButton.d.ts +4 -4
- package/dist/components/SpinButton/SpinButton.js.map +1 -1
- package/dist/components/SpinButton/SpinButton.module.css.cjs +1 -1
- package/dist/components/SpinButton/SpinButton.module.css.cjs.map +1 -1
- package/dist/components/SpinButton/SpinButton.module.css.js +4 -4
- package/dist/components/SpinButton/SpinButton.module.css.js.map +1 -1
- package/dist/components/SpinButton/index.d.ts +1 -1
- package/dist/components/SpinRow/SpinRow.cjs.map +1 -1
- package/dist/components/SpinRow/SpinRow.d.ts +1 -1
- package/dist/components/SpinRow/SpinRow.js.map +1 -1
- package/dist/components/SpinRow/SpinRow.module.css.cjs +1 -1
- package/dist/components/SpinRow/SpinRow.module.css.cjs.map +1 -1
- package/dist/components/SpinRow/SpinRow.module.css.js +9 -9
- package/dist/components/SpinRow/SpinRow.module.css.js.map +1 -1
- package/dist/components/SpinRow/index.d.ts +1 -1
- package/dist/components/Spinner/Spinner.cjs.map +1 -1
- package/dist/components/Spinner/Spinner.d.ts +1 -1
- package/dist/components/Spinner/Spinner.js.map +1 -1
- package/dist/components/Spinner/Spinner.module.css.cjs +1 -1
- package/dist/components/Spinner/Spinner.module.css.cjs.map +1 -1
- package/dist/components/Spinner/Spinner.module.css.js +5 -5
- package/dist/components/Spinner/Spinner.module.css.js.map +1 -1
- package/dist/components/Spinner/index.d.ts +1 -1
- package/dist/components/SplitButton/SplitButton.cjs.map +1 -1
- package/dist/components/SplitButton/SplitButton.d.ts +2 -2
- package/dist/components/SplitButton/SplitButton.js.map +1 -1
- package/dist/components/SplitButton/SplitButton.module.css.cjs +1 -1
- package/dist/components/SplitButton/SplitButton.module.css.cjs.map +1 -1
- package/dist/components/SplitButton/SplitButton.module.css.js +10 -10
- package/dist/components/SplitButton/SplitButton.module.css.js.map +1 -1
- package/dist/components/SplitButton/index.d.ts +1 -1
- package/dist/components/StatusBadge/StatusBadge.cjs.map +1 -1
- package/dist/components/StatusBadge/StatusBadge.d.ts +1 -1
- package/dist/components/StatusBadge/StatusBadge.js.map +1 -1
- package/dist/components/StatusBadge/StatusBadge.module.css.cjs +1 -1
- package/dist/components/StatusBadge/StatusBadge.module.css.cjs.map +1 -1
- package/dist/components/StatusBadge/StatusBadge.module.css.js +7 -7
- package/dist/components/StatusBadge/StatusBadge.module.css.js.map +1 -1
- package/dist/components/StatusBadge/index.d.ts +1 -1
- package/dist/components/StatusPage/StatusPage.cjs.map +1 -1
- package/dist/components/StatusPage/StatusPage.d.ts +1 -1
- package/dist/components/StatusPage/StatusPage.js.map +1 -1
- package/dist/components/StatusPage/index.d.ts +1 -1
- package/dist/components/Switch/Switch.cjs.map +1 -1
- package/dist/components/Switch/Switch.d.ts +2 -2
- package/dist/components/Switch/Switch.js.map +1 -1
- package/dist/components/Switch/Switch.module.css.cjs +1 -1
- package/dist/components/Switch/Switch.module.css.cjs.map +1 -1
- package/dist/components/Switch/Switch.module.css.js +1 -1
- package/dist/components/Switch/Switch.module.css.js.map +1 -1
- package/dist/components/Switch/index.d.ts +1 -1
- package/dist/components/SwitchRow/SwitchRow.cjs.map +1 -1
- package/dist/components/SwitchRow/SwitchRow.d.ts +1 -1
- package/dist/components/SwitchRow/SwitchRow.js.map +1 -1
- package/dist/components/SwitchRow/SwitchRow.module.css.cjs +1 -1
- package/dist/components/SwitchRow/SwitchRow.module.css.cjs.map +1 -1
- package/dist/components/SwitchRow/SwitchRow.module.css.js +9 -9
- package/dist/components/SwitchRow/SwitchRow.module.css.js.map +1 -1
- package/dist/components/SwitchRow/index.d.ts +1 -1
- package/dist/components/Tabs/TabBar.cjs +1 -1
- package/dist/components/Tabs/TabBar.cjs.map +1 -1
- package/dist/components/Tabs/TabBar.d.ts +2 -2
- package/dist/components/Tabs/TabBar.js +8 -8
- package/dist/components/Tabs/TabBar.js.map +1 -1
- package/dist/components/Tabs/TabItem.cjs +1 -1
- package/dist/components/Tabs/TabItem.cjs.map +1 -1
- package/dist/components/Tabs/TabItem.d.ts +4 -2
- package/dist/components/Tabs/TabItem.js +34 -32
- package/dist/components/Tabs/TabItem.js.map +1 -1
- package/dist/components/Tabs/TabPanel.cjs +1 -1
- package/dist/components/Tabs/TabPanel.cjs.map +1 -1
- package/dist/components/Tabs/TabPanel.js +0 -1
- package/dist/components/Tabs/TabPanel.js.map +1 -1
- package/dist/components/Tabs/Tabs.module.css.cjs +1 -1
- package/dist/components/Tabs/Tabs.module.css.cjs.map +1 -1
- package/dist/components/Tabs/Tabs.module.css.js +10 -9
- package/dist/components/Tabs/Tabs.module.css.js.map +1 -1
- package/dist/components/Tabs/index.d.ts +3 -3
- package/dist/components/TerminalView/TerminalView.cjs +1 -1
- package/dist/components/TerminalView/TerminalView.cjs.map +1 -1
- package/dist/components/TerminalView/TerminalView.d.ts +1 -1
- package/dist/components/TerminalView/TerminalView.js +1 -1
- package/dist/components/TerminalView/TerminalView.js.map +1 -1
- package/dist/components/TerminalView/index.d.ts +1 -1
- package/dist/components/Text/Text.cjs.map +1 -1
- package/dist/components/Text/Text.d.ts +2 -2
- package/dist/components/Text/Text.js.map +1 -1
- package/dist/components/Text/index.d.ts +1 -1
- package/dist/components/TextField/TextField.cjs.map +1 -1
- package/dist/components/TextField/TextField.d.ts +1 -1
- package/dist/components/TextField/TextField.js.map +1 -1
- package/dist/components/TextField/TextField.module.css.cjs +1 -1
- package/dist/components/TextField/TextField.module.css.cjs.map +1 -1
- package/dist/components/TextField/TextField.module.css.js +7 -7
- package/dist/components/TextField/TextField.module.css.js.map +1 -1
- package/dist/components/TextField/index.d.ts +1 -1
- package/dist/components/Timeline/Timeline.cjs.map +1 -1
- package/dist/components/Timeline/Timeline.d.ts +2 -2
- package/dist/components/Timeline/Timeline.js.map +1 -1
- package/dist/components/Timeline/index.d.ts +1 -1
- package/dist/components/Toast/Toast.cjs +1 -1
- package/dist/components/Toast/Toast.cjs.map +1 -1
- package/dist/components/Toast/Toast.d.ts +1 -1
- package/dist/components/Toast/Toast.js +39 -35
- package/dist/components/Toast/Toast.js.map +1 -1
- package/dist/components/Toast/Toast.module.css.cjs +1 -1
- package/dist/components/Toast/Toast.module.css.cjs.map +1 -1
- package/dist/components/Toast/Toast.module.css.js +2 -2
- package/dist/components/Toast/Toast.module.css.js.map +1 -1
- package/dist/components/Toast/Toaster.cjs.map +1 -1
- package/dist/components/Toast/Toaster.d.ts +1 -1
- package/dist/components/Toast/Toaster.js.map +1 -1
- package/dist/components/Toast/index.d.ts +2 -2
- package/dist/components/ToggleGroup/ToggleGroup.cjs +1 -1
- package/dist/components/ToggleGroup/ToggleGroup.cjs.map +1 -1
- package/dist/components/ToggleGroup/ToggleGroup.d.ts +2 -2
- package/dist/components/ToggleGroup/ToggleGroup.js +8 -8
- package/dist/components/ToggleGroup/ToggleGroup.js.map +1 -1
- package/dist/components/ToggleGroup/ToggleGroup.module.css.cjs +1 -1
- package/dist/components/ToggleGroup/ToggleGroup.module.css.cjs.map +1 -1
- package/dist/components/ToggleGroup/ToggleGroup.module.css.js +6 -6
- package/dist/components/ToggleGroup/ToggleGroup.module.css.js.map +1 -1
- package/dist/components/ToggleGroup/ToggleGroupItem.cjs.map +1 -1
- package/dist/components/ToggleGroup/ToggleGroupItem.d.ts +1 -1
- package/dist/components/ToggleGroup/ToggleGroupItem.js.map +1 -1
- package/dist/components/ToggleGroup/index.d.ts +2 -2
- package/dist/components/Toolbar/Spacer.cjs.map +1 -1
- package/dist/components/Toolbar/Spacer.d.ts +1 -2
- package/dist/components/Toolbar/Spacer.js.map +1 -1
- package/dist/components/Toolbar/Toolbar.cjs.map +1 -1
- package/dist/components/Toolbar/Toolbar.js.map +1 -1
- package/dist/components/Toolbar/index.d.ts +3 -3
- package/dist/components/Toolbar.cjs +1 -1
- package/dist/components/Toolbar.js +3 -3
- package/dist/components/ToolbarView/ToolbarView.cjs.map +1 -1
- package/dist/components/ToolbarView/ToolbarView.js.map +1 -1
- package/dist/components/ToolbarView/index.d.ts +1 -1
- package/dist/components/Tooltip/Tooltip.cjs +1 -1
- package/dist/components/Tooltip/Tooltip.cjs.map +1 -1
- package/dist/components/Tooltip/Tooltip.d.ts +2 -2
- package/dist/components/Tooltip/Tooltip.js +4 -4
- package/dist/components/Tooltip/Tooltip.js.map +1 -1
- package/dist/components/Tooltip/Tooltip.module.css.cjs +1 -1
- package/dist/components/Tooltip/Tooltip.module.css.cjs.map +1 -1
- package/dist/components/Tooltip/Tooltip.module.css.js +6 -6
- package/dist/components/Tooltip/Tooltip.module.css.js.map +1 -1
- package/dist/components/Tooltip/index.d.ts +1 -1
- package/dist/components/ViewSwitcher/ViewSwitcher.cjs +1 -1
- package/dist/components/ViewSwitcher/ViewSwitcher.cjs.map +1 -1
- package/dist/components/ViewSwitcher/ViewSwitcher.d.ts +2 -2
- package/dist/components/ViewSwitcher/ViewSwitcher.js +8 -8
- package/dist/components/ViewSwitcher/ViewSwitcher.js.map +1 -1
- package/dist/components/ViewSwitcher/ViewSwitcher.module.css.cjs +1 -1
- package/dist/components/ViewSwitcher/ViewSwitcher.module.css.cjs.map +1 -1
- package/dist/components/ViewSwitcher/ViewSwitcher.module.css.js +5 -5
- package/dist/components/ViewSwitcher/ViewSwitcher.module.css.js.map +1 -1
- package/dist/components/ViewSwitcher/ViewSwitcherItem.cjs.map +1 -1
- package/dist/components/ViewSwitcher/ViewSwitcherItem.d.ts +1 -1
- package/dist/components/ViewSwitcher/ViewSwitcherItem.js.map +1 -1
- package/dist/components/ViewSwitcher/index.d.ts +2 -2
- package/dist/components/ViewSwitcherBar/ViewSwitcherBar.cjs.map +1 -1
- package/dist/components/ViewSwitcherBar/ViewSwitcherBar.js.map +1 -1
- package/dist/components/ViewSwitcherBar/ViewSwitcherBar.module.css.cjs +1 -1
- package/dist/components/ViewSwitcherBar/ViewSwitcherBar.module.css.cjs.map +1 -1
- package/dist/components/ViewSwitcherBar/ViewSwitcherBar.module.css.js +1 -1
- package/dist/components/ViewSwitcherBar/ViewSwitcherBar.module.css.js.map +1 -1
- package/dist/components/ViewSwitcherBar/index.d.ts +1 -1
- package/dist/components/ViewSwitcherSidebar/ViewSwitcherSidebar.cjs +1 -1
- package/dist/components/ViewSwitcherSidebar/ViewSwitcherSidebar.cjs.map +1 -1
- package/dist/components/ViewSwitcherSidebar/ViewSwitcherSidebar.d.ts +2 -2
- package/dist/components/ViewSwitcherSidebar/ViewSwitcherSidebar.js +8 -8
- package/dist/components/ViewSwitcherSidebar/ViewSwitcherSidebar.js.map +1 -1
- package/dist/components/ViewSwitcherSidebar/ViewSwitcherSidebar.module.css.cjs +1 -1
- package/dist/components/ViewSwitcherSidebar/ViewSwitcherSidebar.module.css.cjs.map +1 -1
- package/dist/components/ViewSwitcherSidebar/ViewSwitcherSidebar.module.css.js +14 -14
- package/dist/components/ViewSwitcherSidebar/ViewSwitcherSidebar.module.css.js.map +1 -1
- package/dist/components/ViewSwitcherSidebar/ViewSwitcherSidebarItem.cjs.map +1 -1
- package/dist/components/ViewSwitcherSidebar/ViewSwitcherSidebarItem.d.ts +1 -1
- package/dist/components/ViewSwitcherSidebar/ViewSwitcherSidebarItem.js.map +1 -1
- package/dist/components/ViewSwitcherSidebar/index.d.ts +2 -2
- package/dist/components/WindowTitle/WindowTitle.cjs.map +1 -1
- package/dist/components/WindowTitle/WindowTitle.js.map +1 -1
- package/dist/components/WindowTitle/index.d.ts +1 -1
- package/dist/components/WrapBox/WrapBox.cjs.map +1 -1
- package/dist/components/WrapBox/WrapBox.d.ts +2 -2
- package/dist/components/WrapBox/WrapBox.js.map +1 -1
- package/dist/components/WrapBox/index.d.ts +1 -1
- package/dist/hooks/index.d.ts +3 -3
- package/dist/hooks/useBreakpoint.cjs +1 -1
- package/dist/hooks/useBreakpoint.cjs.map +1 -1
- package/dist/hooks/useBreakpoint.js +12 -12
- package/dist/hooks/useBreakpoint.js.map +1 -1
- package/dist/index.cjs +1 -1
- package/dist/index.d.ts +153 -151
- package/dist/index.js +35 -34
- package/dist/style.css +1 -1
- package/package.json +6 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ToggleGroup.module.css.js","names":[],"sources":["../../../src/components/ToggleGroup/ToggleGroup.module.css"],"sourcesContent":["/* ─── Container ─────────────────────────────────────────────────────────────── */\n\n.group {\n display: inline-flex;\n align-items: stretch;\n gap: 0;\n\n background-color: var(--gnome-card-bg-color, #ffffff);\n border: 1px solid var(--gnome-light-3, #deddda);\n border-radius: var(--gnome-radius-md);\n box-shadow: var(--gnome-shadow-sm);\n padding: 2px;\n gap: 2px;\n}\n\n/* ─── Item ──────────────────────────────────────────────────────────────────── */\n\n.item {\n appearance: none;\n -webkit-appearance: none;\n border: none;\n background: transparent;\n font: inherit;\n cursor: pointer;\n outline: none;\n\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--gnome-space-1, 6px);\n\n padding: 4px var(--gnome-space-2, 12px);\n border-radius: calc(var(--gnome-radius-md) - 2px);\n min-height: 28px;\n\n font-family: var(--gnome-font-family);\n font-size: var(--gnome-font-size-body, 1rem);\n font-weight: var(--gnome-font-weight-normal, 400);\n color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n white-space: nowrap;\n\n transition:\n background-color var(--gnome-duration-fast) var(--gnome-easing-default),\n box-shadow
|
|
1
|
+
{"version":3,"file":"ToggleGroup.module.css.js","names":[],"sources":["../../../src/components/ToggleGroup/ToggleGroup.module.css"],"sourcesContent":["/* ─── Container ─────────────────────────────────────────────────────────────── */\n\n.group {\n display: inline-flex;\n align-items: stretch;\n gap: 0;\n\n background-color: var(--gnome-card-bg-color, #ffffff);\n border: 1px solid var(--gnome-light-3, #deddda);\n border-radius: var(--gnome-radius-md);\n box-shadow: var(--gnome-shadow-sm);\n padding: 2px;\n gap: 2px;\n}\n\n/* ─── Item ──────────────────────────────────────────────────────────────────── */\n\n.item {\n appearance: none;\n -webkit-appearance: none;\n border: none;\n background: transparent;\n font: inherit;\n cursor: pointer;\n outline: none;\n\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--gnome-space-1, 6px);\n\n padding: 4px var(--gnome-space-2, 12px);\n border-radius: calc(var(--gnome-radius-md) - 2px);\n min-height: 28px;\n\n font-family: var(--gnome-font-family);\n font-size: var(--gnome-font-size-body, 1rem);\n font-weight: var(--gnome-font-weight-normal, 400);\n color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n white-space: nowrap;\n\n transition:\n background-color var(--gnome-duration-fast) var(--gnome-easing-default),\n box-shadow var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n/* Icon-only: square aspect ratio */\n.iconOnly {\n padding: 4px;\n min-width: 28px;\n}\n\n.item:hover:not(:disabled):not(.active) {\n background-color: rgba(0, 0, 0, 0.06);\n}\n\n.item:active:not(:disabled):not(.active) {\n background-color: rgba(0, 0, 0, 0.12);\n}\n\n.item:disabled {\n opacity: var(--gnome-opacity-disabled, 0.5);\n cursor: not-allowed;\n}\n\n/* ─── Focus ─────────────────────────────────────────────────────────────────── */\n\n.item:focus-visible {\n box-shadow:\n 0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-card-bg-color, #ffffff),\n 0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n var(--gnome-focus-ring-color, #3584e4);\n}\n\n/* ─── Active ────────────────────────────────────────────────────────────────── */\n\n.active {\n background-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 15%, transparent);\n color: var(--gnome-accent-color, #3584e4);\n font-weight: var(--gnome-font-weight-semibold, 600);\n box-shadow: inset 0 0 0 1px\n color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 40%, transparent);\n}\n\n/* ─── Icon ──────────────────────────────────────────────────────────────────── */\n\n.itemIcon {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n}\n\n.itemLabel {\n line-height: 1;\n}\n\n/* ─── Dark mode ─────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n .group {\n background-color: var(--gnome-card-bg-color, #383838);\n border-color: rgba(255, 255, 255, 0.12);\n box-shadow: none;\n }\n\n .item:hover:not(:disabled):not(.active) {\n background-color: rgba(255, 255, 255, 0.08);\n }\n\n .item:active:not(:disabled):not(.active) {\n background-color: rgba(255, 255, 255, 0.14);\n }\n\n .item:focus-visible {\n box-shadow:\n 0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-card-bg-color, #383838),\n 0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n var(--gnome-focus-ring-color, #78aeed);\n }\n\n .active {\n background-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 25%, transparent);\n color: var(--gnome-accent-color, #78aeed);\n box-shadow: inset 0 0 0 1px\n color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 50%, transparent);\n }\n}\n\n/* ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n .item {\n transition: none;\n }\n}\n"],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ToggleGroupItem.cjs","names":[],"sources":["../../../src/components/ToggleGroup/ToggleGroupItem.tsx"],"sourcesContent":["import type {
|
|
1
|
+
{"version":3,"file":"ToggleGroupItem.cjs","names":[],"sources":["../../../src/components/ToggleGroup/ToggleGroupItem.tsx"],"sourcesContent":["import type { IconDefinition } from '@gnome-ui/icons';\nimport type { ButtonHTMLAttributes } from 'react';\n\nimport { Icon } from '../Icon';\n\nimport { useToggleGroup } from './ToggleGroup';\nimport styles from './ToggleGroup.module.css';\n\nexport interface ToggleGroupItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n /** String identifier — used as the group's `value` when this item is selected. */\n name: string;\n /** Visible label. Omit for icon-only items (provide `aria-label` instead). */\n label?: string;\n /** Icon from `@gnome-ui/icons`. */\n icon?: IconDefinition;\n}\n\n/**\n * Individual toggle inside a `ToggleGroup`.\n *\n * Can be icon-only, label-only, or icon + label. For icon-only items always\n * provide an `aria-label` so screen readers can identify the option.\n */\nexport function ToggleGroupItem({\n name,\n label,\n icon,\n disabled,\n className,\n ...props\n}: ToggleGroupItemProps) {\n const { value, onValueChange } = useToggleGroup();\n const active = value === name;\n const iconOnly = icon && !label;\n\n return (\n <button\n type=\"button\"\n role=\"radio\"\n aria-checked={active}\n tabIndex={active ? 0 : -1}\n disabled={disabled}\n onClick={() => onValueChange(name)}\n className={[\n styles.item,\n active ? styles.active : null,\n iconOnly ? styles.iconOnly : null,\n className,\n ]\n .filter(Boolean)\n .join(' ')}\n {...props}\n >\n {icon && (\n <span className={styles.itemIcon}>\n <Icon icon={icon} size=\"md\" aria-hidden />\n </span>\n )}\n {label && <span className={styles.itemLabel}>{label}</span>}\n </button>\n );\n}\n"],"mappings":"gJAuBA,SAAgB,EAAgB,CAC9B,OACA,QACA,OACA,WACA,YACA,GAAG,GACoB,CACvB,GAAM,CAAE,QAAO,iBAAkB,EAAA,gBAAgB,CAC3C,EAAS,IAAU,EACnB,EAAW,GAAQ,CAAC,EAE1B,OACE,EAAA,EAAA,MAAC,SAAD,CACE,KAAK,SACL,KAAK,QACL,eAAc,EACd,SAAU,EAAS,EAAI,GACb,WACV,YAAe,EAAc,EAAK,CAClC,UAAW,CACT,EAAA,QAAO,KACP,EAAS,EAAA,QAAO,OAAS,KACzB,EAAW,EAAA,QAAO,SAAW,KAC7B,EACD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI,CACZ,GAAI,WAfN,CAiBG,IACC,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,mBACtB,EAAA,EAAA,KAAC,EAAA,KAAD,CAAY,OAAM,KAAK,KAAK,cAAA,GAAc,CAAA,CACrC,CAAA,CAER,IAAS,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,mBAAY,EAAa,CAAA,CACpD"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { ButtonHTMLAttributes } from 'react';
|
|
2
1
|
import { IconDefinition } from '@gnome-ui/icons';
|
|
2
|
+
import { ButtonHTMLAttributes } from 'react';
|
|
3
3
|
export interface ToggleGroupItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
4
4
|
/** String identifier — used as the group's `value` when this item is selected. */
|
|
5
5
|
name: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ToggleGroupItem.js","names":[],"sources":["../../../src/components/ToggleGroup/ToggleGroupItem.tsx"],"sourcesContent":["import type {
|
|
1
|
+
{"version":3,"file":"ToggleGroupItem.js","names":[],"sources":["../../../src/components/ToggleGroup/ToggleGroupItem.tsx"],"sourcesContent":["import type { IconDefinition } from '@gnome-ui/icons';\nimport type { ButtonHTMLAttributes } from 'react';\n\nimport { Icon } from '../Icon';\n\nimport { useToggleGroup } from './ToggleGroup';\nimport styles from './ToggleGroup.module.css';\n\nexport interface ToggleGroupItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n /** String identifier — used as the group's `value` when this item is selected. */\n name: string;\n /** Visible label. Omit for icon-only items (provide `aria-label` instead). */\n label?: string;\n /** Icon from `@gnome-ui/icons`. */\n icon?: IconDefinition;\n}\n\n/**\n * Individual toggle inside a `ToggleGroup`.\n *\n * Can be icon-only, label-only, or icon + label. For icon-only items always\n * provide an `aria-label` so screen readers can identify the option.\n */\nexport function ToggleGroupItem({\n name,\n label,\n icon,\n disabled,\n className,\n ...props\n}: ToggleGroupItemProps) {\n const { value, onValueChange } = useToggleGroup();\n const active = value === name;\n const iconOnly = icon && !label;\n\n return (\n <button\n type=\"button\"\n role=\"radio\"\n aria-checked={active}\n tabIndex={active ? 0 : -1}\n disabled={disabled}\n onClick={() => onValueChange(name)}\n className={[\n styles.item,\n active ? styles.active : null,\n iconOnly ? styles.iconOnly : null,\n className,\n ]\n .filter(Boolean)\n .join(' ')}\n {...props}\n >\n {icon && (\n <span className={styles.itemIcon}>\n <Icon icon={icon} size=\"md\" aria-hidden />\n </span>\n )}\n {label && <span className={styles.itemLabel}>{label}</span>}\n </button>\n );\n}\n"],"mappings":";;;;;AAuBA,SAAgB,EAAgB,EAC9B,SACA,UACA,SACA,aACA,cACA,GAAG,KACoB;CACvB,IAAM,EAAE,UAAO,qBAAkB,GAAgB,EAC3C,IAAS,MAAU,GACnB,IAAW,KAAQ,CAAC;AAE1B,QACE,kBAAC,UAAD;EACE,MAAK;EACL,MAAK;EACL,gBAAc;EACd,UAAU,IAAS,IAAI;EACb;EACV,eAAe,EAAc,EAAK;EAClC,WAAW;GACT,EAAO;GACP,IAAS,EAAO,SAAS;GACzB,IAAW,EAAO,WAAW;GAC7B;GACD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI;EACZ,GAAI;YAfN,CAiBG,KACC,kBAAC,QAAD;GAAM,WAAW,EAAO;aACtB,kBAAC,GAAD;IAAY;IAAM,MAAK;IAAK,eAAA;IAAc,CAAA;GACrC,CAAA,EAER,KAAS,kBAAC,QAAD;GAAM,WAAW,EAAO;aAAY;GAAa,CAAA,CACpD"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { ToggleGroup } from './ToggleGroup';
|
|
2
1
|
export type { ToggleGroupProps } from './ToggleGroup';
|
|
3
|
-
export {
|
|
2
|
+
export { ToggleGroup } from './ToggleGroup';
|
|
4
3
|
export type { ToggleGroupItemProps } from './ToggleGroupItem';
|
|
4
|
+
export { ToggleGroupItem } from './ToggleGroupItem';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Spacer.cjs","names":[],"sources":["../../../src/components/Toolbar/Spacer.tsx"],"sourcesContent":["import type { HTMLAttributes } from
|
|
1
|
+
{"version":3,"file":"Spacer.cjs","names":[],"sources":["../../../src/components/Toolbar/Spacer.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\n\nimport styles from './Toolbar.module.css';\n\nexport type SpacerProps = HTMLAttributes<HTMLDivElement>;\n\n/**\n * Invisible `flex: 1` filler for `Toolbar` and `HeaderBar`.\n *\n * Place between leading and trailing groups to push trailing items to the end.\n * Mirrors `GtkSeparator` with the `.spacer` style class.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/1-latest/style-classes.html#spacer\n *\n * @example\n * <Toolbar>\n * <Button variant=\"flat\">Back</Button>\n * <Spacer />\n * <Button variant=\"flat\">Done</Button>\n * </Toolbar>\n */\nexport function Spacer({ className, ...props }: SpacerProps) {\n return (\n <div\n aria-hidden=\"true\"\n className={[styles.spacer, className].filter(Boolean).join(' ')}\n {...props}\n />\n );\n}\n"],"mappings":"+EAqBA,SAAgB,EAAO,CAAE,YAAW,GAAG,GAAsB,CAC3D,OACE,EAAA,EAAA,KAAC,MAAD,CACE,cAAY,OACZ,UAAW,CAAC,EAAA,QAAO,OAAQ,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI,CAC/D,GAAI,EACJ,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Spacer.js","names":[],"sources":["../../../src/components/Toolbar/Spacer.tsx"],"sourcesContent":["import type { HTMLAttributes } from
|
|
1
|
+
{"version":3,"file":"Spacer.js","names":[],"sources":["../../../src/components/Toolbar/Spacer.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\n\nimport styles from './Toolbar.module.css';\n\nexport type SpacerProps = HTMLAttributes<HTMLDivElement>;\n\n/**\n * Invisible `flex: 1` filler for `Toolbar` and `HeaderBar`.\n *\n * Place between leading and trailing groups to push trailing items to the end.\n * Mirrors `GtkSeparator` with the `.spacer` style class.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/1-latest/style-classes.html#spacer\n *\n * @example\n * <Toolbar>\n * <Button variant=\"flat\">Back</Button>\n * <Spacer />\n * <Button variant=\"flat\">Done</Button>\n * </Toolbar>\n */\nexport function Spacer({ className, ...props }: SpacerProps) {\n return (\n <div\n aria-hidden=\"true\"\n className={[styles.spacer, className].filter(Boolean).join(' ')}\n {...props}\n />\n );\n}\n"],"mappings":";;;AAqBA,SAAgB,EAAO,EAAE,cAAW,GAAG,KAAsB;AAC3D,QACE,kBAAC,OAAD;EACE,eAAY;EACZ,WAAW,CAAC,EAAO,QAAQ,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;EAC/D,GAAI;EACJ,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toolbar.cjs","names":[],"sources":["../../../src/components/Toolbar/Toolbar.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from
|
|
1
|
+
{"version":3,"file":"Toolbar.cjs","names":[],"sources":["../../../src/components/Toolbar/Toolbar.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\n\nimport styles from './Toolbar.module.css';\n\nexport interface ToolbarProps extends HTMLAttributes<HTMLDivElement> {\n children: ReactNode;\n}\n\n/**\n * Horizontal action bar following the libadwaita `.toolbar` pattern.\n *\n * Provides 6 px padding and gap — the standard spacing for rows of flat\n * buttons in header bars, action bars, and tool rows. Place `<Spacer />`\n * between leading and trailing groups to push trailing items to the end.\n *\n * Use `<Button variant=\"flat\">` or `<Button variant=\"raised\">` inside:\n * - `flat` for buttons that blend into the bar background.\n * - `raised` for buttons that need explicit elevation within a flat context.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/1-latest/style-classes.html#toolbar-style-class\n */\nexport function Toolbar({ children, className, ...props }: ToolbarProps) {\n return (\n <div className={[styles.toolbar, className].filter(Boolean).join(' ')} {...props}>\n {children}\n </div>\n );\n}\n"],"mappings":"+EAqBA,SAAgB,EAAQ,CAAE,WAAU,YAAW,GAAG,GAAuB,CACvE,OACE,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,CAAC,EAAA,QAAO,QAAS,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI,CAAE,GAAI,EACxE,WACG,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toolbar.js","names":[],"sources":["../../../src/components/Toolbar/Toolbar.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from
|
|
1
|
+
{"version":3,"file":"Toolbar.js","names":[],"sources":["../../../src/components/Toolbar/Toolbar.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\n\nimport styles from './Toolbar.module.css';\n\nexport interface ToolbarProps extends HTMLAttributes<HTMLDivElement> {\n children: ReactNode;\n}\n\n/**\n * Horizontal action bar following the libadwaita `.toolbar` pattern.\n *\n * Provides 6 px padding and gap — the standard spacing for rows of flat\n * buttons in header bars, action bars, and tool rows. Place `<Spacer />`\n * between leading and trailing groups to push trailing items to the end.\n *\n * Use `<Button variant=\"flat\">` or `<Button variant=\"raised\">` inside:\n * - `flat` for buttons that blend into the bar background.\n * - `raised` for buttons that need explicit elevation within a flat context.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/1-latest/style-classes.html#toolbar-style-class\n */\nexport function Toolbar({ children, className, ...props }: ToolbarProps) {\n return (\n <div className={[styles.toolbar, className].filter(Boolean).join(' ')} {...props}>\n {children}\n </div>\n );\n}\n"],"mappings":";;;AAqBA,SAAgB,EAAQ,EAAE,aAAU,cAAW,GAAG,KAAuB;AACvE,QACE,kBAAC,OAAD;EAAK,WAAW,CAAC,EAAO,SAAS,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;EAAE,GAAI;EACxE;EACG,CAAA"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { Toolbar } from './Toolbar';
|
|
2
|
-
export type { ToolbarProps } from './Toolbar';
|
|
3
|
-
export { Spacer } from './Spacer';
|
|
4
1
|
export type { SpacerProps } from './Spacer';
|
|
2
|
+
export { Spacer } from './Spacer';
|
|
3
|
+
export type { ToolbarProps } from './Toolbar';
|
|
4
|
+
export { Toolbar } from './Toolbar';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./Toolbar/
|
|
1
|
+
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./Toolbar/Spacer.cjs`),t=require(`./Toolbar/Toolbar.cjs`);exports.Spacer=e.Spacer,exports.Toolbar=t.Toolbar;
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
export {
|
|
1
|
+
import { Spacer as e } from "./Toolbar/Spacer.js";
|
|
2
|
+
import { Toolbar as t } from "./Toolbar/Toolbar.js";
|
|
3
|
+
export { e as Spacer, t as Toolbar };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ToolbarView.cjs","names":[],"sources":["../../../src/components/ToolbarView/ToolbarView.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from
|
|
1
|
+
{"version":3,"file":"ToolbarView.cjs","names":[],"sources":["../../../src/components/ToolbarView/ToolbarView.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\n\nimport styles from './ToolbarView.module.css';\n\nexport interface ToolbarViewProps extends HTMLAttributes<HTMLDivElement> {\n /**\n * Bar(s) pinned to the top — typically a `HeaderBar` or `Toolbar`.\n * Multiple bars stack vertically.\n */\n topBar?: ReactNode;\n /**\n * Bar(s) pinned to the bottom — typically a `Toolbar` or `ViewSwitcherBar`.\n * Multiple bars stack vertically.\n */\n bottomBar?: ReactNode;\n /** Scrollable content area between the bars. */\n children?: ReactNode;\n}\n\n/**\n * Layout container that attaches bars at the top and/or bottom while\n * scrolling only the middle content.\n *\n * The top/bottom bars remain fixed; the inner content area gets\n * `overflow-y: auto` so it scrolls independently.\n *\n * Mirrors `AdwToolbarView`.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.ToolbarView.html\n */\nexport function ToolbarView({\n topBar,\n bottomBar,\n children,\n className,\n ...props\n}: ToolbarViewProps) {\n return (\n <div className={[styles.toolbarView, className].filter(Boolean).join(' ')} {...props}>\n {topBar && <div className={styles.top}>{topBar}</div>}\n <div className={styles.content}>{children}</div>\n {bottomBar && <div className={styles.bottom}>{bottomBar}</div>}\n </div>\n );\n}\n"],"mappings":"mFA8BA,SAAgB,EAAY,CAC1B,SACA,YACA,WACA,YACA,GAAG,GACgB,CACnB,OACE,EAAA,EAAA,MAAC,MAAD,CAAK,UAAW,CAAC,EAAA,QAAO,YAAa,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI,CAAE,GAAI,WAA/E,CACG,IAAU,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,EAAA,QAAO,aAAM,EAAa,CAAA,EACrD,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,EAAA,QAAO,QAAU,WAAe,CAAA,CAC/C,IAAa,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,EAAA,QAAO,gBAAS,EAAgB,CAAA,CAC1D"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ToolbarView.js","names":[],"sources":["../../../src/components/ToolbarView/ToolbarView.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from
|
|
1
|
+
{"version":3,"file":"ToolbarView.js","names":[],"sources":["../../../src/components/ToolbarView/ToolbarView.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\n\nimport styles from './ToolbarView.module.css';\n\nexport interface ToolbarViewProps extends HTMLAttributes<HTMLDivElement> {\n /**\n * Bar(s) pinned to the top — typically a `HeaderBar` or `Toolbar`.\n * Multiple bars stack vertically.\n */\n topBar?: ReactNode;\n /**\n * Bar(s) pinned to the bottom — typically a `Toolbar` or `ViewSwitcherBar`.\n * Multiple bars stack vertically.\n */\n bottomBar?: ReactNode;\n /** Scrollable content area between the bars. */\n children?: ReactNode;\n}\n\n/**\n * Layout container that attaches bars at the top and/or bottom while\n * scrolling only the middle content.\n *\n * The top/bottom bars remain fixed; the inner content area gets\n * `overflow-y: auto` so it scrolls independently.\n *\n * Mirrors `AdwToolbarView`.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.ToolbarView.html\n */\nexport function ToolbarView({\n topBar,\n bottomBar,\n children,\n className,\n ...props\n}: ToolbarViewProps) {\n return (\n <div className={[styles.toolbarView, className].filter(Boolean).join(' ')} {...props}>\n {topBar && <div className={styles.top}>{topBar}</div>}\n <div className={styles.content}>{children}</div>\n {bottomBar && <div className={styles.bottom}>{bottomBar}</div>}\n </div>\n );\n}\n"],"mappings":";;;AA8BA,SAAgB,EAAY,EAC1B,WACA,cACA,aACA,cACA,GAAG,KACgB;AACnB,QACE,kBAAC,OAAD;EAAK,WAAW,CAAC,EAAO,aAAa,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;EAAE,GAAI;YAA/E;GACG,KAAU,kBAAC,OAAD;IAAK,WAAW,EAAO;cAAM;IAAa,CAAA;GACrD,kBAAC,OAAD;IAAK,WAAW,EAAO;IAAU;IAAe,CAAA;GAC/C,KAAa,kBAAC,OAAD;IAAK,WAAW,EAAO;cAAS;IAAgB,CAAA;GAC1D"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
const e=require(`./Tooltip.module.css.cjs`);let t=require(`react`),n=require(`react-dom`),r=require(`react/jsx-runtime`);var i=6;function a(e,t){if(e){if(typeof e==`function`){e(t);return}e.current=t}}function o(e,t,n){let r=window.innerWidth,a=window.innerHeight,o=[n,n===`top`||n===`bottom`?n===`top`?`bottom`:`top`:n===`left`?`right`:`left`,`top`,`bottom`,`left`,`right`];for(let n of o){let o=0,s=0;n===`top`?(o=e.top-t.height-i,s=e.left+e.width/2-t.width/2):n===`bottom`?(o=e.bottom+i,s=e.left+e.width/2-t.width/2):n===`left`?(o=e.top+e.height/2-t.height/2,s=e.left-t.width-i):(o=e.top+e.height/2-t.height/2,s=e.right+i);let c=s>=8&&s+t.width<=r-8,l=o>=8&&o+t.height<=a-8;if(c&&l)return{top:Math.max(8,Math.min(o,a-t.height-8)),left:Math.max(8,Math.min(s,r-t.width-8)),placement:n}}let s=0,c=0;return n===`top`&&(s=e.top-t.height-i,c=e.left+e.width/2-t.width/2),n===`bottom`&&(s=e.bottom+i,c=e.left+e.width/2-t.width/2),n===`left`&&(s=e.top+e.height/2-t.height/2,c=e.left-t.width-i),n===`right`&&(s=e.top+e.height/2-t.height/2,c=e.right+i),{top:Math.max(8,Math.min(s,a-t.height-8)),left:Math.max(8,Math.min(c,window.innerWidth-t.width-8)),placement:n}}function s({label:i,placement:s=`top`,delay:c=500,children:l}){let u=(0,t.useId)(),[d,f]=(0,t.useState)(!1),[p,m]=(0,t.useState)(null),h=(0,t.useRef)(null),g=(0,t.useRef)(null),_=(0,t.useRef)(null),v=()=>{_.current&&=(clearTimeout(_.current),null)},y=(0,t.useCallback)(()=>{!h.current||!g.current||m(o(h.current.getBoundingClientRect(),g.current.getBoundingClientRect(),s))},[s]);(0,t.useEffect)(()=>{if(d)return y(),window.addEventListener(`scroll`,y,{passive:!0,capture:!0}),window.addEventListener(`resize`,y,{passive:!0}),()=>{window.removeEventListener(`scroll`,y,{capture:!0}),window.removeEventListener(`resize`,y)}},[d,y]);let b=(0,t.useCallback)(()=>{v(),_.current=setTimeout(()=>f(!0),c)},[c]),x=(0,t.useCallback)(()=>{v(),f(!1),m(null)},[]);(0,t.useEffect)(()=>{d&&y()},[d,y]),(0,t.useEffect)(()=>{if(!d)return;let e=e=>{e.key===`Escape`&&x()};return document.addEventListener(`keydown`,e),()=>document.removeEventListener(`keydown`,e)},[d,x]);let S=l.props.ref,C=(0,t.cloneElement)(l,{ref:e=>{h.current=e,a(S,e)},"aria-describedby":u,onMouseEnter:e=>{b(),l.props.onMouseEnter?.(e)},onMouseLeave:e=>{x(),l.props.onMouseLeave?.(e)},onFocus:e=>{b(),l.props.onFocus?.(e)},onBlur:e=>{x(),l.props.onBlur?.(e)}}),w=(0,r.jsx)(`div`,{ref:g,id:u,role:`tooltip`,className:[e.default.tooltip,p?e.default[p.placement]:null,d&&p?e.default.visible:null].filter(Boolean).join(` `),style:p?{top:p.top,left:p.left}:{visibility:`hidden`,top:-9999,left:-9999},children:i});return(0,r.jsxs)(r.Fragment,{children:[C,typeof document<`u`?(0,n.createPortal)(w,document.body):w]})}exports.Tooltip=s;
|
|
1
|
+
const e=require(`./Tooltip.module.css.cjs`);let t=require(`react`),n=require(`react-dom`),r=require(`react/jsx-runtime`);var i=6;function a(e,t){if(e){if(typeof e==`function`){e(t);return}e.current=t}}function o(e,t,n){let r=window.innerWidth,a=window.innerHeight,o=[n,n===`top`||n===`bottom`?n===`top`?`bottom`:`top`:n===`left`?`right`:`left`,`top`,`bottom`,`left`,`right`];for(let n of o){let o=0,s=0;n===`top`?(o=e.top-t.height-i,s=e.left+e.width/2-t.width/2):n===`bottom`?(o=e.bottom+i,s=e.left+e.width/2-t.width/2):n===`left`?(o=e.top+e.height/2-t.height/2,s=e.left-t.width-i):(o=e.top+e.height/2-t.height/2,s=e.right+i);let c=s>=8&&s+t.width<=r-8,l=o>=8&&o+t.height<=a-8;if(c&&l)return{top:Math.max(8,Math.min(o,a-t.height-8)),left:Math.max(8,Math.min(s,r-t.width-8)),placement:n}}let s=0,c=0;return n===`top`&&(s=e.top-t.height-i,c=e.left+e.width/2-t.width/2),n===`bottom`&&(s=e.bottom+i,c=e.left+e.width/2-t.width/2),n===`left`&&(s=e.top+e.height/2-t.height/2,c=e.left-t.width-i),n===`right`&&(s=e.top+e.height/2-t.height/2,c=e.right+i),{top:Math.max(8,Math.min(s,a-t.height-8)),left:Math.max(8,Math.min(c,window.innerWidth-t.width-8)),placement:n}}function s({label:i,placement:s=`top`,delay:c=500,children:l}){let u=(0,t.useId)(),[d,f]=(0,t.useState)(!1),[p,m]=(0,t.useState)(null),h=(0,t.useRef)(null),g=(0,t.useRef)(null),_=(0,t.useRef)(null),v=(0,t.useCallback)(()=>{_.current&&=(clearTimeout(_.current),null)},[]),y=(0,t.useCallback)(()=>{!h.current||!g.current||m(o(h.current.getBoundingClientRect(),g.current.getBoundingClientRect(),s))},[s]);(0,t.useEffect)(()=>{if(d)return y(),window.addEventListener(`scroll`,y,{passive:!0,capture:!0}),window.addEventListener(`resize`,y,{passive:!0}),()=>{window.removeEventListener(`scroll`,y,{capture:!0}),window.removeEventListener(`resize`,y)}},[d,y]);let b=(0,t.useCallback)(()=>{v(),_.current=setTimeout(()=>f(!0),c)},[c,v]),x=(0,t.useCallback)(()=>{v(),f(!1),m(null)},[v]);(0,t.useEffect)(()=>{d&&y()},[d,y]),(0,t.useEffect)(()=>{if(!d)return;let e=e=>{e.key===`Escape`&&x()};return document.addEventListener(`keydown`,e),()=>document.removeEventListener(`keydown`,e)},[d,x]);let S=l.props.ref,C=(0,t.cloneElement)(l,{ref:e=>{h.current=e,a(S,e)},"aria-describedby":u,onMouseEnter:e=>{b(),l.props.onMouseEnter?.(e)},onMouseLeave:e=>{x(),l.props.onMouseLeave?.(e)},onFocus:e=>{b(),l.props.onFocus?.(e)},onBlur:e=>{x(),l.props.onBlur?.(e)}}),w=(0,r.jsx)(`div`,{ref:g,id:u,role:`tooltip`,className:[e.default.tooltip,p?e.default[p.placement]:null,d&&p?e.default.visible:null].filter(Boolean).join(` `),style:p?{top:p.top,left:p.left}:{visibility:`hidden`,top:-9999,left:-9999},children:i});return(0,r.jsxs)(r.Fragment,{children:[C,typeof document<`u`?(0,n.createPortal)(w,document.body):w]})}exports.Tooltip=s;
|
|
2
2
|
//# sourceMappingURL=Tooltip.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tooltip.cjs","names":[],"sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import {\n useState,\n useRef,\n useId,\n useCallback,\n useEffect,\n cloneElement,\n type ReactElement,\n type HTMLAttributes,\n type Ref,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\nimport styles from \"./Tooltip.module.css\";\n\nexport type TooltipPlacement = \"top\" | \"bottom\" | \"left\" | \"right\";\n\nexport interface TooltipProps {\n /**\n * The tooltip label. Keep it short — a noun phrase or brief description.\n * Do not duplicate information already visible on screen.\n */\n label: string;\n /**\n * Preferred placement relative to the trigger.\n * The tooltip flips automatically if there is not enough space.\n * Defaults to `\"top\"`.\n */\n placement?: TooltipPlacement;\n /**\n * Delay in milliseconds before the tooltip appears on hover.\n * Defaults to `500`. Set to `0` for instant.\n */\n delay?: number;\n /**\n * The element that triggers the tooltip.\n * Must be a single React element that can receive `ref` and event props.\n */\n children: ReactElement<HTMLAttributes<HTMLElement>>;\n}\n\ninterface Position {\n top: number;\n left: number;\n placement: TooltipPlacement;\n}\n\nconst GAP = 6; // px between trigger and tooltip\n\nfunction assignRef<T>(ref: Ref<T> | undefined, value: T | null) {\n if (!ref) return;\n if (typeof ref === \"function\") {\n ref(value);\n return;\n }\n ref.current = value;\n}\n\nfunction computePosition(\n trigger: DOMRect,\n tooltip: DOMRect,\n preferred: TooltipPlacement\n): Position {\n const vw = window.innerWidth;\n const vh = window.innerHeight;\n\n const placements: TooltipPlacement[] = [\n preferred,\n preferred === \"top\" || preferred === \"bottom\"\n ? preferred === \"top\" ? \"bottom\" : \"top\"\n : preferred === \"left\" ? \"right\" : \"left\",\n \"top\",\n \"bottom\",\n \"left\",\n \"right\",\n ];\n\n for (const p of placements) {\n let top = 0;\n let left = 0;\n\n if (p === \"top\") {\n top = trigger.top - tooltip.height - GAP;\n left = trigger.left + trigger.width / 2 - tooltip.width / 2;\n } else if (p === \"bottom\") {\n top = trigger.bottom + GAP;\n left = trigger.left + trigger.width / 2 - tooltip.width / 2;\n } else if (p === \"left\") {\n top = trigger.top + trigger.height / 2 - tooltip.height / 2;\n left = trigger.left - tooltip.width - GAP;\n } else {\n top = trigger.top + trigger.height / 2 - tooltip.height / 2;\n left = trigger.right + GAP;\n }\n\n // Clamp to viewport with 8 px margin\n const margin = 8;\n const fitsH = left >= margin && left + tooltip.width <= vw - margin;\n const fitsV = top >= margin && top + tooltip.height <= vh - margin;\n\n if (fitsH && fitsV) {\n return {\n top: Math.max(margin, Math.min(top, vh - tooltip.height - margin)),\n left: Math.max(margin, Math.min(left, vw - tooltip.width - margin)),\n placement: p,\n };\n }\n }\n\n // Fallback: clamp preferred\n let top = 0, left = 0;\n if (preferred === \"top\") { top = trigger.top - tooltip.height - GAP; left = trigger.left + trigger.width / 2 - tooltip.width / 2; }\n if (preferred === \"bottom\") { top = trigger.bottom + GAP; left = trigger.left + trigger.width / 2 - tooltip.width / 2; }\n if (preferred === \"left\") { top = trigger.top + trigger.height / 2 - tooltip.height / 2; left = trigger.left - tooltip.width - GAP; }\n if (preferred === \"right\") { top = trigger.top + trigger.height / 2 - tooltip.height / 2; left = trigger.right + GAP; }\n\n const margin = 8;\n return {\n top: Math.max(margin, Math.min(top, vh - tooltip.height - margin)),\n left: Math.max(margin, Math.min(left, window.innerWidth - tooltip.width - margin)),\n placement: preferred,\n };\n}\n\n/**\n * Informational tooltip following the Adwaita / GNOME HIG pattern.\n *\n * Wraps a single trigger element and shows a floating label on hover or\n * keyboard focus. The tooltip is positioned automatically and flips if\n * there is not enough space.\n *\n * - `aria-describedby` is wired to the trigger automatically.\n * - The tooltip itself is `role=\"tooltip\"` and rendered in a portal.\n * - Does not show on touch — touch devices have no hover state.\n *\n * @example\n * <Tooltip label=\"Save file (Ctrl+S)\">\n * <Button aria-label=\"Save\"><Icon icon={Save} /></Button>\n * </Tooltip>\n *\n * @see https://developer.gnome.org/hig/patterns/feedback/tooltips.html\n */\nexport function Tooltip({\n label,\n placement: preferredPlacement = \"top\",\n delay = 500,\n children,\n}: TooltipProps) {\n const id = useId();\n const [visible, setVisible] = useState(false);\n const [pos, setPos] = useState<Position | null>(null);\n\n const triggerRef = useRef<HTMLElement>(null);\n const tooltipRef = useRef<HTMLDivElement>(null);\n const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n const clearTimer = () => {\n if (timerRef.current) { clearTimeout(timerRef.current); timerRef.current = null; }\n };\n\n const place = useCallback(() => {\n if (!triggerRef.current || !tooltipRef.current) return;\n const triggerRect = triggerRef.current.getBoundingClientRect();\n const tooltipRect = tooltipRef.current.getBoundingClientRect();\n setPos(computePosition(triggerRect, tooltipRect, preferredPlacement));\n }, [preferredPlacement]);\n\n // Reposition on scroll/resize while visible\n useEffect(() => {\n if (!visible) return;\n place();\n window.addEventListener(\"scroll\", place, { passive: true, capture: true });\n window.addEventListener(\"resize\", place, { passive: true });\n return () => {\n window.removeEventListener(\"scroll\", place, { capture: true });\n window.removeEventListener(\"resize\", place);\n };\n }, [visible, place]);\n\n const show = useCallback(() => {\n clearTimer();\n timerRef.current = setTimeout(() => setVisible(true), delay);\n }, [delay]);\n\n const hide = useCallback(() => {\n clearTimer();\n setVisible(false);\n setPos(null);\n }, []);\n\n // Position as soon as the tooltip mounts\n useEffect(() => {\n if (visible) place();\n }, [visible, place]);\n\n // Dismiss on Escape\n useEffect(() => {\n if (!visible) return;\n const handler = (e: KeyboardEvent) => { if (e.key === \"Escape\") hide(); };\n document.addEventListener(\"keydown\", handler);\n return () => document.removeEventListener(\"keydown\", handler);\n }, [visible, hide]);\n\n const childRef = (children.props as HTMLAttributes<HTMLElement> & {\n ref?: Ref<HTMLElement>;\n }).ref;\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const child = cloneElement(children as any, {\n ref: (node: HTMLElement | null) => {\n triggerRef.current = node;\n assignRef(childRef, node);\n },\n \"aria-describedby\": id,\n onMouseEnter: (e: React.MouseEvent<HTMLElement>) => {\n show();\n children.props.onMouseEnter?.(e);\n },\n onMouseLeave: (e: React.MouseEvent<HTMLElement>) => {\n hide();\n children.props.onMouseLeave?.(e);\n },\n onFocus: (e: React.FocusEvent<HTMLElement>) => {\n show();\n children.props.onFocus?.(e);\n },\n onBlur: (e: React.FocusEvent<HTMLElement>) => {\n hide();\n children.props.onBlur?.(e);\n },\n });\n\n const tooltip = (\n <div\n ref={tooltipRef}\n id={id}\n role=\"tooltip\"\n className={[\n styles.tooltip,\n pos ? styles[pos.placement] : null,\n visible && pos ? styles.visible : null,\n ]\n .filter(Boolean)\n .join(\" \")}\n style={\n pos\n ? { top: pos.top, left: pos.left }\n : { visibility: \"hidden\", top: -9999, left: -9999 }\n }\n >\n {label}\n </div>\n );\n\n return (\n <>\n {child}\n {typeof document !== \"undefined\"\n ? createPortal(tooltip, document.body)\n : tooltip}\n </>\n );\n}\n"],"mappings":"yHA8CA,IAAM,EAAM,EAEZ,SAAS,EAAa,EAAyB,EAAiB,CACzD,KACL,IAAI,OAAO,GAAQ,WAAY,CAC7B,EAAI,EAAM,CACV,OAEF,EAAI,QAAU,GAGhB,SAAS,EACP,EACA,EACA,EACU,CACV,IAAM,EAAK,OAAO,WACZ,EAAK,OAAO,YAEZ,EAAiC,CACrC,EACA,IAAc,OAAS,IAAc,SACjC,IAAc,MAAQ,SAAW,MACjC,IAAc,OAAS,QAAU,OACrC,MACA,SACA,OACA,QACD,CAED,IAAK,IAAM,KAAK,EAAY,CAC1B,IAAI,EAAM,EACN,EAAO,EAEP,IAAM,OACR,EAAO,EAAQ,IAAO,EAAQ,OAAS,EACvC,EAAO,EAAQ,KAAO,EAAQ,MAAQ,EAAI,EAAQ,MAAQ,GACjD,IAAM,UACf,EAAO,EAAQ,OAAS,EACxB,EAAO,EAAQ,KAAS,EAAQ,MAAQ,EAAI,EAAQ,MAAQ,GACnD,IAAM,QACf,EAAO,EAAQ,IAAO,EAAQ,OAAS,EAAI,EAAQ,OAAS,EAC5D,EAAO,EAAQ,KAAO,EAAQ,MAAQ,IAEtC,EAAO,EAAQ,IAAS,EAAQ,OAAS,EAAI,EAAQ,OAAS,EAC9D,EAAO,EAAQ,MAAS,GAI1B,IACM,EAAQ,GAAQ,GAAU,EAAO,EAAQ,OAAU,EAAK,EACxD,EAAQ,GAAQ,GAAU,EAAO,EAAQ,QAAU,EAAK,EAE9D,GAAI,GAAS,EACX,MAAO,CACL,IAAM,KAAK,IAAI,EAAQ,KAAK,IAAI,EAAM,EAAK,EAAQ,OAAS,EAAO,CAAC,CACpE,KAAM,KAAK,IAAI,EAAQ,KAAK,IAAI,EAAM,EAAK,EAAQ,MAAS,EAAO,CAAC,CACpE,UAAW,EACZ,CAKL,IAAI,EAAM,EAAG,EAAO,EAOpB,OANI,IAAc,QAAY,EAAM,EAAQ,IAAM,EAAQ,OAAS,EAAK,EAAO,EAAQ,KAAO,EAAQ,MAAQ,EAAI,EAAQ,MAAQ,GAC9H,IAAc,WAAY,EAAM,EAAQ,OAAS,EAAmB,EAAO,EAAQ,KAAO,EAAQ,MAAQ,EAAI,EAAQ,MAAQ,GAC9H,IAAc,SAAY,EAAM,EAAQ,IAAM,EAAQ,OAAS,EAAI,EAAQ,OAAS,EAAG,EAAO,EAAQ,KAAO,EAAQ,MAAQ,GAC7H,IAAc,UAAY,EAAM,EAAQ,IAAM,EAAQ,OAAS,EAAI,EAAQ,OAAS,EAAG,EAAO,EAAQ,MAAQ,GAG3G,CACL,IAAM,KAAK,IAAI,EAAQ,KAAK,IAAI,EAAM,EAAK,EAAQ,OAAS,EAAO,CAAC,CACpE,KAAM,KAAK,IAAI,EAAQ,KAAK,IAAI,EAAM,OAAO,WAAa,EAAQ,MAAS,EAAO,CAAC,CACnF,UAAW,EACZ,CAqBH,SAAgB,EAAQ,CACtB,QACA,UAAW,EAAqB,MAChC,QAAQ,IACR,YACe,CACf,IAAM,GAAA,EAAA,EAAA,QAAY,CACZ,CAAC,EAAS,IAAA,EAAA,EAAA,UAAuB,GAAM,CACvC,CAAC,EAAK,IAAA,EAAA,EAAA,UAAoC,KAAK,CAE/C,GAAA,EAAA,EAAA,QAAiC,KAAK,CACtC,GAAA,EAAA,EAAA,QAAoC,KAAK,CACzC,GAAA,EAAA,EAAA,QAA0D,KAAK,CAE/D,MAAmB,CACvB,AAAwD,EAAS,WAAzC,aAAa,EAAS,QAAQ,CAAqB,OAGvE,GAAA,EAAA,EAAA,iBAA0B,CAC1B,CAAC,EAAW,SAAW,CAAC,EAAW,SAGvC,EAAO,EAFa,EAAW,QAAQ,uBAAuB,CAC1C,EAAW,QAAQ,uBAAuB,CACb,EAAmB,CAAC,EACpE,CAAC,EAAmB,CAAC,EAGxB,EAAA,EAAA,eAAgB,CACT,KAIL,OAHA,GAAO,CACP,OAAO,iBAAiB,SAAU,EAAO,CAAE,QAAS,GAAM,QAAS,GAAM,CAAC,CAC1E,OAAO,iBAAiB,SAAU,EAAO,CAAE,QAAS,GAAM,CAAC,KAC9C,CACX,OAAO,oBAAoB,SAAU,EAAO,CAAE,QAAS,GAAM,CAAC,CAC9D,OAAO,oBAAoB,SAAU,EAAM,GAE5C,CAAC,EAAS,EAAM,CAAC,CAEpB,IAAM,GAAA,EAAA,EAAA,iBAAyB,CAC7B,GAAY,CACZ,EAAS,QAAU,eAAiB,EAAW,GAAK,CAAE,EAAM,EAC3D,CAAC,EAAM,CAAC,CAEL,GAAA,EAAA,EAAA,iBAAyB,CAC7B,GAAY,CACZ,EAAW,GAAM,CACjB,EAAO,KAAK,EACX,EAAE,CAAC,EAGN,EAAA,EAAA,eAAgB,CACV,GAAS,GAAO,EACnB,CAAC,EAAS,EAAM,CAAC,EAGpB,EAAA,EAAA,eAAgB,CACd,GAAI,CAAC,EAAS,OACd,IAAM,EAAW,GAAqB,CAAM,EAAE,MAAQ,UAAU,GAAM,EAEtE,OADA,SAAS,iBAAiB,UAAW,EAAQ,KAChC,SAAS,oBAAoB,UAAW,EAAQ,EAC5D,CAAC,EAAS,EAAK,CAAC,CAEnB,IAAM,EAAY,EAAS,MAExB,IAGG,GAAA,EAAA,EAAA,cAAqB,EAAiB,CAC1C,IAAM,GAA6B,CACjC,EAAW,QAAU,EACrB,EAAU,EAAU,EAAK,EAE3B,mBAAoB,EACpB,aAAe,GAAqC,CAClD,GAAM,CACN,EAAS,MAAM,eAAe,EAAE,EAElC,aAAe,GAAqC,CAClD,GAAM,CACN,EAAS,MAAM,eAAe,EAAE,EAElC,QAAU,GAAqC,CAC7C,GAAM,CACN,EAAS,MAAM,UAAU,EAAE,EAE7B,OAAS,GAAqC,CAC5C,GAAM,CACN,EAAS,MAAM,SAAS,EAAE,EAE7B,CAAC,CAEI,GACJ,EAAA,EAAA,KAAC,MAAD,CACE,IAAK,EACD,KACJ,KAAK,UACL,UAAW,CACT,EAAA,QAAO,QACP,EAAM,EAAA,QAAO,EAAI,WAAa,KAC9B,GAAW,EAAM,EAAA,QAAO,QAAU,KACnC,CACE,OAAO,QAAQ,CACf,KAAK,IAAI,CACZ,MACE,EACI,CAAE,IAAK,EAAI,IAAK,KAAM,EAAI,KAAM,CAChC,CAAE,WAAY,SAAU,IAAK,MAAO,KAAM,MAAO,UAGtD,EACG,CAAA,CAGR,OACE,EAAA,EAAA,MAAA,EAAA,SAAA,CAAA,SAAA,CACG,EACA,OAAO,SAAa,KAAA,EAAA,EAAA,cACJ,EAAS,SAAS,KAAK,CACpC,EACH,CAAA,CAAA"}
|
|
1
|
+
{"version":3,"file":"Tooltip.cjs","names":[],"sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import {\n cloneElement,\n type FocusEvent,\n type HTMLAttributes,\n type MouseEvent,\n type ReactElement,\n type Ref,\n useCallback,\n useEffect,\n useId,\n useRef,\n useState,\n} from 'react';\n\nimport { createPortal } from 'react-dom';\n\nimport styles from './Tooltip.module.css';\n\nexport type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right';\n\nexport interface TooltipProps {\n /**\n * The tooltip label. Keep it short — a noun phrase or brief description.\n * Do not duplicate information already visible on screen.\n */\n label: string;\n /**\n * Preferred placement relative to the trigger.\n * The tooltip flips automatically if there is not enough space.\n * Defaults to `\"top\"`.\n */\n placement?: TooltipPlacement;\n /**\n * Delay in milliseconds before the tooltip appears on hover.\n * Defaults to `500`. Set to `0` for instant.\n */\n delay?: number;\n /**\n * The element that triggers the tooltip.\n * Must be a single React element that can receive `ref` and event props.\n */\n children: ReactElement<HTMLAttributes<HTMLElement>>;\n}\n\ninterface Position {\n top: number;\n left: number;\n placement: TooltipPlacement;\n}\n\nconst GAP = 6; // px between trigger and tooltip\n\nfunction assignRef<T>(ref: Ref<T> | undefined, value: T | null) {\n if (!ref) {\n return;\n }\n\n if (typeof ref === 'function') {\n ref(value);\n\n return;\n }\n\n ref.current = value;\n}\n\nfunction computePosition(\n trigger: DOMRect,\n tooltip: DOMRect,\n preferred: TooltipPlacement,\n): Position {\n const vw = window.innerWidth;\n const vh = window.innerHeight;\n\n const placements: TooltipPlacement[] = [\n preferred,\n preferred === 'top' || preferred === 'bottom'\n ? preferred === 'top'\n ? 'bottom'\n : 'top'\n : preferred === 'left'\n ? 'right'\n : 'left',\n 'top',\n 'bottom',\n 'left',\n 'right',\n ];\n\n for (const p of placements) {\n let top = 0;\n let left = 0;\n\n if (p === 'top') {\n top = trigger.top - tooltip.height - GAP;\n left = trigger.left + trigger.width / 2 - tooltip.width / 2;\n } else if (p === 'bottom') {\n top = trigger.bottom + GAP;\n left = trigger.left + trigger.width / 2 - tooltip.width / 2;\n } else if (p === 'left') {\n top = trigger.top + trigger.height / 2 - tooltip.height / 2;\n left = trigger.left - tooltip.width - GAP;\n } else {\n top = trigger.top + trigger.height / 2 - tooltip.height / 2;\n left = trigger.right + GAP;\n }\n\n // Clamp to viewport with 8 px margin\n const margin = 8;\n const fitsH = left >= margin && left + tooltip.width <= vw - margin;\n const fitsV = top >= margin && top + tooltip.height <= vh - margin;\n\n if (fitsH && fitsV) {\n return {\n top: Math.max(margin, Math.min(top, vh - tooltip.height - margin)),\n left: Math.max(margin, Math.min(left, vw - tooltip.width - margin)),\n placement: p,\n };\n }\n }\n\n // Fallback: clamp preferred\n let top = 0,\n left = 0;\n if (preferred === 'top') {\n top = trigger.top - tooltip.height - GAP;\n left = trigger.left + trigger.width / 2 - tooltip.width / 2;\n }\n\n if (preferred === 'bottom') {\n top = trigger.bottom + GAP;\n left = trigger.left + trigger.width / 2 - tooltip.width / 2;\n }\n\n if (preferred === 'left') {\n top = trigger.top + trigger.height / 2 - tooltip.height / 2;\n left = trigger.left - tooltip.width - GAP;\n }\n\n if (preferred === 'right') {\n top = trigger.top + trigger.height / 2 - tooltip.height / 2;\n left = trigger.right + GAP;\n }\n\n const margin = 8;\n\n return {\n top: Math.max(margin, Math.min(top, vh - tooltip.height - margin)),\n left: Math.max(margin, Math.min(left, window.innerWidth - tooltip.width - margin)),\n placement: preferred,\n };\n}\n\n/**\n * Informational tooltip following the Adwaita / GNOME HIG pattern.\n *\n * Wraps a single trigger element and shows a floating label on hover or\n * keyboard focus. The tooltip is positioned automatically and flips if\n * there is not enough space.\n *\n * - `aria-describedby` is wired to the trigger automatically.\n * - The tooltip itself is `role=\"tooltip\"` and rendered in a portal.\n * - Does not show on touch — touch devices have no hover state.\n *\n * @example\n * <Tooltip label=\"Save file (Ctrl+S)\">\n * <Button aria-label=\"Save\"><Icon icon={Save} /></Button>\n * </Tooltip>\n *\n * @see https://developer.gnome.org/hig/patterns/feedback/tooltips.html\n */\nexport function Tooltip({\n label,\n placement: preferredPlacement = 'top',\n delay = 500,\n children,\n}: TooltipProps) {\n const id = useId();\n const [visible, setVisible] = useState(false);\n const [pos, setPos] = useState<Position | null>(null);\n\n const triggerRef = useRef<HTMLElement>(null);\n const tooltipRef = useRef<HTMLDivElement>(null);\n const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n const clearTimer = useCallback(() => {\n if (timerRef.current) {\n clearTimeout(timerRef.current);\n timerRef.current = null;\n }\n }, []);\n\n const place = useCallback(() => {\n if (!triggerRef.current || !tooltipRef.current) {\n return;\n }\n\n const triggerRect = triggerRef.current.getBoundingClientRect();\n const tooltipRect = tooltipRef.current.getBoundingClientRect();\n\n setPos(computePosition(triggerRect, tooltipRect, preferredPlacement));\n }, [preferredPlacement]);\n\n // Reposition on scroll/resize while visible\n useEffect(() => {\n if (!visible) {\n return;\n }\n\n place();\n window.addEventListener('scroll', place, { passive: true, capture: true });\n window.addEventListener('resize', place, { passive: true });\n\n return () => {\n window.removeEventListener('scroll', place, { capture: true });\n window.removeEventListener('resize', place);\n };\n }, [visible, place]);\n\n const show = useCallback(() => {\n clearTimer();\n timerRef.current = setTimeout(() => setVisible(true), delay);\n }, [delay, clearTimer]);\n\n const hide = useCallback(() => {\n clearTimer();\n setVisible(false);\n setPos(null);\n }, [clearTimer]);\n\n // Position as soon as the tooltip mounts\n useEffect(() => {\n if (visible) {\n place();\n }\n }, [visible, place]);\n\n // Dismiss on Escape\n useEffect(() => {\n if (!visible) {\n return;\n }\n\n const handler = (e: KeyboardEvent) => {\n if (e.key === 'Escape') {\n hide();\n }\n };\n\n document.addEventListener('keydown', handler);\n\n return () => document.removeEventListener('keydown', handler);\n }, [visible, hide]);\n\n const childRef = (\n children.props as HTMLAttributes<HTMLElement> & {\n ref?: Ref<HTMLElement>;\n }\n ).ref;\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const child = cloneElement(children as any, {\n ref: (node: HTMLElement | null) => {\n triggerRef.current = node;\n assignRef(childRef, node);\n },\n 'aria-describedby': id,\n onMouseEnter: (e: MouseEvent<HTMLElement>) => {\n show();\n children.props.onMouseEnter?.(e);\n },\n onMouseLeave: (e: MouseEvent<HTMLElement>) => {\n hide();\n children.props.onMouseLeave?.(e);\n },\n onFocus: (e: FocusEvent<HTMLElement>) => {\n show();\n children.props.onFocus?.(e);\n },\n onBlur: (e: FocusEvent<HTMLElement>) => {\n hide();\n children.props.onBlur?.(e);\n },\n });\n\n const tooltip = (\n <div\n ref={tooltipRef}\n id={id}\n role=\"tooltip\"\n className={[\n styles.tooltip,\n pos ? styles[pos.placement] : null,\n visible && pos ? styles.visible : null,\n ]\n .filter(Boolean)\n .join(' ')}\n style={\n pos ? { top: pos.top, left: pos.left } : { visibility: 'hidden', top: -9999, left: -9999 }\n }\n >\n {label}\n </div>\n );\n\n return (\n <>\n {child}\n {typeof document !== 'undefined' ? createPortal(tooltip, document.body) : tooltip}\n </>\n );\n}\n"],"mappings":"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"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import {
|
|
2
|
-
export type TooltipPlacement =
|
|
1
|
+
import { HTMLAttributes, ReactElement } from 'react';
|
|
2
|
+
export type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right';
|
|
3
3
|
export interface TooltipProps {
|
|
4
4
|
/**
|
|
5
5
|
* The tooltip label. Keep it short — a noun phrase or brief description.
|
|
@@ -40,9 +40,9 @@ function p(e, t, n) {
|
|
|
40
40
|
};
|
|
41
41
|
}
|
|
42
42
|
function m({ label: d, placement: m = "top", delay: h = 500, children: g }) {
|
|
43
|
-
let _ = i(), [v, y] = o(!1), [b, x] = o(null), S = a(null), C = a(null), w = a(null), T = () => {
|
|
43
|
+
let _ = i(), [v, y] = o(!1), [b, x] = o(null), S = a(null), C = a(null), w = a(null), T = n(() => {
|
|
44
44
|
w.current &&= (clearTimeout(w.current), null);
|
|
45
|
-
}, E = n(() => {
|
|
45
|
+
}, []), E = n(() => {
|
|
46
46
|
!S.current || !C.current || x(p(S.current.getBoundingClientRect(), C.current.getBoundingClientRect(), m));
|
|
47
47
|
}, [m]);
|
|
48
48
|
r(() => {
|
|
@@ -55,9 +55,9 @@ function m({ label: d, placement: m = "top", delay: h = 500, children: g }) {
|
|
|
55
55
|
}, [v, E]);
|
|
56
56
|
let D = n(() => {
|
|
57
57
|
T(), w.current = setTimeout(() => y(!0), h);
|
|
58
|
-
}, [h]), O = n(() => {
|
|
58
|
+
}, [h, T]), O = n(() => {
|
|
59
59
|
T(), y(!1), x(null);
|
|
60
|
-
}, []);
|
|
60
|
+
}, [T]);
|
|
61
61
|
r(() => {
|
|
62
62
|
v && E();
|
|
63
63
|
}, [v, E]), r(() => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tooltip.js","names":[],"sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import {\n useState,\n useRef,\n useId,\n useCallback,\n useEffect,\n cloneElement,\n type ReactElement,\n type HTMLAttributes,\n type Ref,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\nimport styles from \"./Tooltip.module.css\";\n\nexport type TooltipPlacement = \"top\" | \"bottom\" | \"left\" | \"right\";\n\nexport interface TooltipProps {\n /**\n * The tooltip label. Keep it short — a noun phrase or brief description.\n * Do not duplicate information already visible on screen.\n */\n label: string;\n /**\n * Preferred placement relative to the trigger.\n * The tooltip flips automatically if there is not enough space.\n * Defaults to `\"top\"`.\n */\n placement?: TooltipPlacement;\n /**\n * Delay in milliseconds before the tooltip appears on hover.\n * Defaults to `500`. Set to `0` for instant.\n */\n delay?: number;\n /**\n * The element that triggers the tooltip.\n * Must be a single React element that can receive `ref` and event props.\n */\n children: ReactElement<HTMLAttributes<HTMLElement>>;\n}\n\ninterface Position {\n top: number;\n left: number;\n placement: TooltipPlacement;\n}\n\nconst GAP = 6; // px between trigger and tooltip\n\nfunction assignRef<T>(ref: Ref<T> | undefined, value: T | null) {\n if (!ref) return;\n if (typeof ref === \"function\") {\n ref(value);\n return;\n }\n ref.current = value;\n}\n\nfunction computePosition(\n trigger: DOMRect,\n tooltip: DOMRect,\n preferred: TooltipPlacement\n): Position {\n const vw = window.innerWidth;\n const vh = window.innerHeight;\n\n const placements: TooltipPlacement[] = [\n preferred,\n preferred === \"top\" || preferred === \"bottom\"\n ? preferred === \"top\" ? \"bottom\" : \"top\"\n : preferred === \"left\" ? \"right\" : \"left\",\n \"top\",\n \"bottom\",\n \"left\",\n \"right\",\n ];\n\n for (const p of placements) {\n let top = 0;\n let left = 0;\n\n if (p === \"top\") {\n top = trigger.top - tooltip.height - GAP;\n left = trigger.left + trigger.width / 2 - tooltip.width / 2;\n } else if (p === \"bottom\") {\n top = trigger.bottom + GAP;\n left = trigger.left + trigger.width / 2 - tooltip.width / 2;\n } else if (p === \"left\") {\n top = trigger.top + trigger.height / 2 - tooltip.height / 2;\n left = trigger.left - tooltip.width - GAP;\n } else {\n top = trigger.top + trigger.height / 2 - tooltip.height / 2;\n left = trigger.right + GAP;\n }\n\n // Clamp to viewport with 8 px margin\n const margin = 8;\n const fitsH = left >= margin && left + tooltip.width <= vw - margin;\n const fitsV = top >= margin && top + tooltip.height <= vh - margin;\n\n if (fitsH && fitsV) {\n return {\n top: Math.max(margin, Math.min(top, vh - tooltip.height - margin)),\n left: Math.max(margin, Math.min(left, vw - tooltip.width - margin)),\n placement: p,\n };\n }\n }\n\n // Fallback: clamp preferred\n let top = 0, left = 0;\n if (preferred === \"top\") { top = trigger.top - tooltip.height - GAP; left = trigger.left + trigger.width / 2 - tooltip.width / 2; }\n if (preferred === \"bottom\") { top = trigger.bottom + GAP; left = trigger.left + trigger.width / 2 - tooltip.width / 2; }\n if (preferred === \"left\") { top = trigger.top + trigger.height / 2 - tooltip.height / 2; left = trigger.left - tooltip.width - GAP; }\n if (preferred === \"right\") { top = trigger.top + trigger.height / 2 - tooltip.height / 2; left = trigger.right + GAP; }\n\n const margin = 8;\n return {\n top: Math.max(margin, Math.min(top, vh - tooltip.height - margin)),\n left: Math.max(margin, Math.min(left, window.innerWidth - tooltip.width - margin)),\n placement: preferred,\n };\n}\n\n/**\n * Informational tooltip following the Adwaita / GNOME HIG pattern.\n *\n * Wraps a single trigger element and shows a floating label on hover or\n * keyboard focus. The tooltip is positioned automatically and flips if\n * there is not enough space.\n *\n * - `aria-describedby` is wired to the trigger automatically.\n * - The tooltip itself is `role=\"tooltip\"` and rendered in a portal.\n * - Does not show on touch — touch devices have no hover state.\n *\n * @example\n * <Tooltip label=\"Save file (Ctrl+S)\">\n * <Button aria-label=\"Save\"><Icon icon={Save} /></Button>\n * </Tooltip>\n *\n * @see https://developer.gnome.org/hig/patterns/feedback/tooltips.html\n */\nexport function Tooltip({\n label,\n placement: preferredPlacement = \"top\",\n delay = 500,\n children,\n}: TooltipProps) {\n const id = useId();\n const [visible, setVisible] = useState(false);\n const [pos, setPos] = useState<Position | null>(null);\n\n const triggerRef = useRef<HTMLElement>(null);\n const tooltipRef = useRef<HTMLDivElement>(null);\n const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n const clearTimer = () => {\n if (timerRef.current) { clearTimeout(timerRef.current); timerRef.current = null; }\n };\n\n const place = useCallback(() => {\n if (!triggerRef.current || !tooltipRef.current) return;\n const triggerRect = triggerRef.current.getBoundingClientRect();\n const tooltipRect = tooltipRef.current.getBoundingClientRect();\n setPos(computePosition(triggerRect, tooltipRect, preferredPlacement));\n }, [preferredPlacement]);\n\n // Reposition on scroll/resize while visible\n useEffect(() => {\n if (!visible) return;\n place();\n window.addEventListener(\"scroll\", place, { passive: true, capture: true });\n window.addEventListener(\"resize\", place, { passive: true });\n return () => {\n window.removeEventListener(\"scroll\", place, { capture: true });\n window.removeEventListener(\"resize\", place);\n };\n }, [visible, place]);\n\n const show = useCallback(() => {\n clearTimer();\n timerRef.current = setTimeout(() => setVisible(true), delay);\n }, [delay]);\n\n const hide = useCallback(() => {\n clearTimer();\n setVisible(false);\n setPos(null);\n }, []);\n\n // Position as soon as the tooltip mounts\n useEffect(() => {\n if (visible) place();\n }, [visible, place]);\n\n // Dismiss on Escape\n useEffect(() => {\n if (!visible) return;\n const handler = (e: KeyboardEvent) => { if (e.key === \"Escape\") hide(); };\n document.addEventListener(\"keydown\", handler);\n return () => document.removeEventListener(\"keydown\", handler);\n }, [visible, hide]);\n\n const childRef = (children.props as HTMLAttributes<HTMLElement> & {\n ref?: Ref<HTMLElement>;\n }).ref;\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const child = cloneElement(children as any, {\n ref: (node: HTMLElement | null) => {\n triggerRef.current = node;\n assignRef(childRef, node);\n },\n \"aria-describedby\": id,\n onMouseEnter: (e: React.MouseEvent<HTMLElement>) => {\n show();\n children.props.onMouseEnter?.(e);\n },\n onMouseLeave: (e: React.MouseEvent<HTMLElement>) => {\n hide();\n children.props.onMouseLeave?.(e);\n },\n onFocus: (e: React.FocusEvent<HTMLElement>) => {\n show();\n children.props.onFocus?.(e);\n },\n onBlur: (e: React.FocusEvent<HTMLElement>) => {\n hide();\n children.props.onBlur?.(e);\n },\n });\n\n const tooltip = (\n <div\n ref={tooltipRef}\n id={id}\n role=\"tooltip\"\n className={[\n styles.tooltip,\n pos ? styles[pos.placement] : null,\n visible && pos ? styles.visible : null,\n ]\n .filter(Boolean)\n .join(\" \")}\n style={\n pos\n ? { top: pos.top, left: pos.left }\n : { visibility: \"hidden\", top: -9999, left: -9999 }\n }\n >\n {label}\n </div>\n );\n\n return (\n <>\n {child}\n {typeof document !== \"undefined\"\n ? createPortal(tooltip, document.body)\n : tooltip}\n </>\n );\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Tooltip.js","names":[],"sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import {\n cloneElement,\n type FocusEvent,\n type HTMLAttributes,\n type MouseEvent,\n type ReactElement,\n type Ref,\n useCallback,\n useEffect,\n useId,\n useRef,\n useState,\n} from 'react';\n\nimport { createPortal } from 'react-dom';\n\nimport styles from './Tooltip.module.css';\n\nexport type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right';\n\nexport interface TooltipProps {\n /**\n * The tooltip label. Keep it short — a noun phrase or brief description.\n * Do not duplicate information already visible on screen.\n */\n label: string;\n /**\n * Preferred placement relative to the trigger.\n * The tooltip flips automatically if there is not enough space.\n * Defaults to `\"top\"`.\n */\n placement?: TooltipPlacement;\n /**\n * Delay in milliseconds before the tooltip appears on hover.\n * Defaults to `500`. Set to `0` for instant.\n */\n delay?: number;\n /**\n * The element that triggers the tooltip.\n * Must be a single React element that can receive `ref` and event props.\n */\n children: ReactElement<HTMLAttributes<HTMLElement>>;\n}\n\ninterface Position {\n top: number;\n left: number;\n placement: TooltipPlacement;\n}\n\nconst GAP = 6; // px between trigger and tooltip\n\nfunction assignRef<T>(ref: Ref<T> | undefined, value: T | null) {\n if (!ref) {\n return;\n }\n\n if (typeof ref === 'function') {\n ref(value);\n\n return;\n }\n\n ref.current = value;\n}\n\nfunction computePosition(\n trigger: DOMRect,\n tooltip: DOMRect,\n preferred: TooltipPlacement,\n): Position {\n const vw = window.innerWidth;\n const vh = window.innerHeight;\n\n const placements: TooltipPlacement[] = [\n preferred,\n preferred === 'top' || preferred === 'bottom'\n ? preferred === 'top'\n ? 'bottom'\n : 'top'\n : preferred === 'left'\n ? 'right'\n : 'left',\n 'top',\n 'bottom',\n 'left',\n 'right',\n ];\n\n for (const p of placements) {\n let top = 0;\n let left = 0;\n\n if (p === 'top') {\n top = trigger.top - tooltip.height - GAP;\n left = trigger.left + trigger.width / 2 - tooltip.width / 2;\n } else if (p === 'bottom') {\n top = trigger.bottom + GAP;\n left = trigger.left + trigger.width / 2 - tooltip.width / 2;\n } else if (p === 'left') {\n top = trigger.top + trigger.height / 2 - tooltip.height / 2;\n left = trigger.left - tooltip.width - GAP;\n } else {\n top = trigger.top + trigger.height / 2 - tooltip.height / 2;\n left = trigger.right + GAP;\n }\n\n // Clamp to viewport with 8 px margin\n const margin = 8;\n const fitsH = left >= margin && left + tooltip.width <= vw - margin;\n const fitsV = top >= margin && top + tooltip.height <= vh - margin;\n\n if (fitsH && fitsV) {\n return {\n top: Math.max(margin, Math.min(top, vh - tooltip.height - margin)),\n left: Math.max(margin, Math.min(left, vw - tooltip.width - margin)),\n placement: p,\n };\n }\n }\n\n // Fallback: clamp preferred\n let top = 0,\n left = 0;\n if (preferred === 'top') {\n top = trigger.top - tooltip.height - GAP;\n left = trigger.left + trigger.width / 2 - tooltip.width / 2;\n }\n\n if (preferred === 'bottom') {\n top = trigger.bottom + GAP;\n left = trigger.left + trigger.width / 2 - tooltip.width / 2;\n }\n\n if (preferred === 'left') {\n top = trigger.top + trigger.height / 2 - tooltip.height / 2;\n left = trigger.left - tooltip.width - GAP;\n }\n\n if (preferred === 'right') {\n top = trigger.top + trigger.height / 2 - tooltip.height / 2;\n left = trigger.right + GAP;\n }\n\n const margin = 8;\n\n return {\n top: Math.max(margin, Math.min(top, vh - tooltip.height - margin)),\n left: Math.max(margin, Math.min(left, window.innerWidth - tooltip.width - margin)),\n placement: preferred,\n };\n}\n\n/**\n * Informational tooltip following the Adwaita / GNOME HIG pattern.\n *\n * Wraps a single trigger element and shows a floating label on hover or\n * keyboard focus. The tooltip is positioned automatically and flips if\n * there is not enough space.\n *\n * - `aria-describedby` is wired to the trigger automatically.\n * - The tooltip itself is `role=\"tooltip\"` and rendered in a portal.\n * - Does not show on touch — touch devices have no hover state.\n *\n * @example\n * <Tooltip label=\"Save file (Ctrl+S)\">\n * <Button aria-label=\"Save\"><Icon icon={Save} /></Button>\n * </Tooltip>\n *\n * @see https://developer.gnome.org/hig/patterns/feedback/tooltips.html\n */\nexport function Tooltip({\n label,\n placement: preferredPlacement = 'top',\n delay = 500,\n children,\n}: TooltipProps) {\n const id = useId();\n const [visible, setVisible] = useState(false);\n const [pos, setPos] = useState<Position | null>(null);\n\n const triggerRef = useRef<HTMLElement>(null);\n const tooltipRef = useRef<HTMLDivElement>(null);\n const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n const clearTimer = useCallback(() => {\n if (timerRef.current) {\n clearTimeout(timerRef.current);\n timerRef.current = null;\n }\n }, []);\n\n const place = useCallback(() => {\n if (!triggerRef.current || !tooltipRef.current) {\n return;\n }\n\n const triggerRect = triggerRef.current.getBoundingClientRect();\n const tooltipRect = tooltipRef.current.getBoundingClientRect();\n\n setPos(computePosition(triggerRect, tooltipRect, preferredPlacement));\n }, [preferredPlacement]);\n\n // Reposition on scroll/resize while visible\n useEffect(() => {\n if (!visible) {\n return;\n }\n\n place();\n window.addEventListener('scroll', place, { passive: true, capture: true });\n window.addEventListener('resize', place, { passive: true });\n\n return () => {\n window.removeEventListener('scroll', place, { capture: true });\n window.removeEventListener('resize', place);\n };\n }, [visible, place]);\n\n const show = useCallback(() => {\n clearTimer();\n timerRef.current = setTimeout(() => setVisible(true), delay);\n }, [delay, clearTimer]);\n\n const hide = useCallback(() => {\n clearTimer();\n setVisible(false);\n setPos(null);\n }, [clearTimer]);\n\n // Position as soon as the tooltip mounts\n useEffect(() => {\n if (visible) {\n place();\n }\n }, [visible, place]);\n\n // Dismiss on Escape\n useEffect(() => {\n if (!visible) {\n return;\n }\n\n const handler = (e: KeyboardEvent) => {\n if (e.key === 'Escape') {\n hide();\n }\n };\n\n document.addEventListener('keydown', handler);\n\n return () => document.removeEventListener('keydown', handler);\n }, [visible, hide]);\n\n const childRef = (\n children.props as HTMLAttributes<HTMLElement> & {\n ref?: Ref<HTMLElement>;\n }\n ).ref;\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const child = cloneElement(children as any, {\n ref: (node: HTMLElement | null) => {\n triggerRef.current = node;\n assignRef(childRef, node);\n },\n 'aria-describedby': id,\n onMouseEnter: (e: MouseEvent<HTMLElement>) => {\n show();\n children.props.onMouseEnter?.(e);\n },\n onMouseLeave: (e: MouseEvent<HTMLElement>) => {\n hide();\n children.props.onMouseLeave?.(e);\n },\n onFocus: (e: FocusEvent<HTMLElement>) => {\n show();\n children.props.onFocus?.(e);\n },\n onBlur: (e: FocusEvent<HTMLElement>) => {\n hide();\n children.props.onBlur?.(e);\n },\n });\n\n const tooltip = (\n <div\n ref={tooltipRef}\n id={id}\n role=\"tooltip\"\n className={[\n styles.tooltip,\n pos ? styles[pos.placement] : null,\n visible && pos ? styles.visible : null,\n ]\n .filter(Boolean)\n .join(' ')}\n style={\n pos ? { top: pos.top, left: pos.left } : { visibility: 'hidden', top: -9999, left: -9999 }\n }\n >\n {label}\n </div>\n );\n\n return (\n <>\n {child}\n {typeof document !== 'undefined' ? createPortal(tooltip, document.body) : tooltip}\n </>\n );\n}\n"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
var e={tooltip:`
|
|
1
|
+
var e={tooltip:`_tooltip_n1yac_3`,visible:`_visible_n1yac_29`,top:`_top_n1yac_55`,bottom:`_bottom_n1yac_62`,left:`_left_n1yac_69`,right:`_right_n1yac_76`};exports.default=e;
|
|
2
2
|
//# sourceMappingURL=Tooltip.module.css.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tooltip.module.css.cjs","names":[],"sources":["../../../src/components/Tooltip/Tooltip.module.css"],"sourcesContent":["/* ─── Tooltip bubble ─────────────────────────────────────────────────────────── */\n\n.tooltip {\n position: fixed;\n z-index: 10500; /* above Dialog (10000) and Toaster (9999) */\n\n max-width: 240px;\n padding: 4px var(--gnome-space-2, 12px);\n\n background-color: var(--gnome-tooltip-bg-color, #3d3d3d);\n color: var(--gnome-tooltip-fg-color, #ffffff);\n\n font-family: var(--gnome-font-family);\n font-size: var(--gnome-font-size-caption, 0.8125rem);\n font-weight: var(--gnome-font-weight-normal, 400);\n line-height: var(--gnome-line-height-body, 1.5);\n text-align: center;\n white-space: pre-wrap;\n word-break: break-word;\n\n border-radius: var(--gnome-radius-sm, 6px);\n box-shadow:\n 0 2px 8px rgba(0, 0, 0, 0.2),\n 0 0 0 1px rgba(255, 255, 255, 0.06);\n\n pointer-events: none;\n user-select: none;\n\n /* Hidden by default — fades in when .visible is applied */\n opacity: 0;\n transform: scale(0.94);\n transition:\n opacity
|
|
1
|
+
{"version":3,"file":"Tooltip.module.css.cjs","names":[],"sources":["../../../src/components/Tooltip/Tooltip.module.css"],"sourcesContent":["/* ─── Tooltip bubble ─────────────────────────────────────────────────────────── */\n\n.tooltip {\n position: fixed;\n z-index: 10500; /* above Dialog (10000) and Toaster (9999) */\n\n max-width: 240px;\n padding: 4px var(--gnome-space-2, 12px);\n\n background-color: var(--gnome-tooltip-bg-color, #3d3d3d);\n color: var(--gnome-tooltip-fg-color, #ffffff);\n\n font-family: var(--gnome-font-family);\n font-size: var(--gnome-font-size-caption, 0.8125rem);\n font-weight: var(--gnome-font-weight-normal, 400);\n line-height: var(--gnome-line-height-body, 1.5);\n text-align: center;\n white-space: pre-wrap;\n word-break: break-word;\n\n border-radius: var(--gnome-radius-sm, 6px);\n box-shadow:\n 0 2px 8px rgba(0, 0, 0, 0.2),\n 0 0 0 1px rgba(255, 255, 255, 0.06);\n\n pointer-events: none;\n user-select: none;\n\n /* Hidden by default — fades in when .visible is applied */\n opacity: 0;\n transform: scale(0.94);\n transition:\n opacity var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease),\n transform var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease);\n}\n\n/* ─── Visible state ──────────────────────────────────────────────────────────── */\n\n.visible {\n opacity: 1;\n transform: scale(1);\n}\n\n/* ─── Arrow ──────────────────────────────────────────────────────────────────── */\n\n.tooltip::after {\n content: \"\";\n position: absolute;\n width: 0;\n height: 0;\n border: 5px solid transparent;\n pointer-events: none;\n}\n\n.top::after {\n top: 100%;\n left: 50%;\n transform: translateX(-50%);\n border-top-color: var(--gnome-tooltip-bg-color, #3d3d3d);\n}\n\n.bottom::after {\n bottom: 100%;\n left: 50%;\n transform: translateX(-50%);\n border-bottom-color: var(--gnome-tooltip-bg-color, #3d3d3d);\n}\n\n.left::after {\n left: 100%;\n top: 50%;\n transform: translateY(-50%);\n border-left-color: var(--gnome-tooltip-bg-color, #3d3d3d);\n}\n\n.right::after {\n right: 100%;\n top: 50%;\n transform: translateY(-50%);\n border-right-color: var(--gnome-tooltip-bg-color, #3d3d3d);\n}\n\n/* ─── Dark mode ──────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n .tooltip {\n background-color: var(--gnome-tooltip-bg-color, #c0bfbc);\n color: var(--gnome-tooltip-fg-color, rgba(0, 0, 0, 0.8));\n box-shadow:\n 0 2px 8px rgba(0, 0, 0, 0.4),\n 0 0 0 1px rgba(0, 0, 0, 0.12);\n }\n\n .top::after {\n border-top-color: var(--gnome-tooltip-bg-color, #c0bfbc);\n }\n .bottom::after {\n border-bottom-color: var(--gnome-tooltip-bg-color, #c0bfbc);\n }\n .left::after {\n border-left-color: var(--gnome-tooltip-bg-color, #c0bfbc);\n }\n .right::after {\n border-right-color: var(--gnome-tooltip-bg-color, #c0bfbc);\n }\n}\n\n/* ─── Reduced motion ─────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n .tooltip {\n transition: opacity var(--gnome-duration-fast, 100ms) linear;\n transform: none;\n }\n\n .visible {\n transform: none;\n }\n}\n"],"mappings":""}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
var e = {
|
|
2
|
-
tooltip: "
|
|
3
|
-
visible: "
|
|
4
|
-
top: "
|
|
5
|
-
bottom: "
|
|
6
|
-
left: "
|
|
7
|
-
right: "
|
|
2
|
+
tooltip: "_tooltip_n1yac_3",
|
|
3
|
+
visible: "_visible_n1yac_29",
|
|
4
|
+
top: "_top_n1yac_55",
|
|
5
|
+
bottom: "_bottom_n1yac_62",
|
|
6
|
+
left: "_left_n1yac_69",
|
|
7
|
+
right: "_right_n1yac_76"
|
|
8
8
|
};
|
|
9
9
|
//#endregion
|
|
10
10
|
export { e as default };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tooltip.module.css.js","names":[],"sources":["../../../src/components/Tooltip/Tooltip.module.css"],"sourcesContent":["/* ─── Tooltip bubble ─────────────────────────────────────────────────────────── */\n\n.tooltip {\n position: fixed;\n z-index: 10500; /* above Dialog (10000) and Toaster (9999) */\n\n max-width: 240px;\n padding: 4px var(--gnome-space-2, 12px);\n\n background-color: var(--gnome-tooltip-bg-color, #3d3d3d);\n color: var(--gnome-tooltip-fg-color, #ffffff);\n\n font-family: var(--gnome-font-family);\n font-size: var(--gnome-font-size-caption, 0.8125rem);\n font-weight: var(--gnome-font-weight-normal, 400);\n line-height: var(--gnome-line-height-body, 1.5);\n text-align: center;\n white-space: pre-wrap;\n word-break: break-word;\n\n border-radius: var(--gnome-radius-sm, 6px);\n box-shadow:\n 0 2px 8px rgba(0, 0, 0, 0.2),\n 0 0 0 1px rgba(255, 255, 255, 0.06);\n\n pointer-events: none;\n user-select: none;\n\n /* Hidden by default — fades in when .visible is applied */\n opacity: 0;\n transform: scale(0.94);\n transition:\n opacity
|
|
1
|
+
{"version":3,"file":"Tooltip.module.css.js","names":[],"sources":["../../../src/components/Tooltip/Tooltip.module.css"],"sourcesContent":["/* ─── Tooltip bubble ─────────────────────────────────────────────────────────── */\n\n.tooltip {\n position: fixed;\n z-index: 10500; /* above Dialog (10000) and Toaster (9999) */\n\n max-width: 240px;\n padding: 4px var(--gnome-space-2, 12px);\n\n background-color: var(--gnome-tooltip-bg-color, #3d3d3d);\n color: var(--gnome-tooltip-fg-color, #ffffff);\n\n font-family: var(--gnome-font-family);\n font-size: var(--gnome-font-size-caption, 0.8125rem);\n font-weight: var(--gnome-font-weight-normal, 400);\n line-height: var(--gnome-line-height-body, 1.5);\n text-align: center;\n white-space: pre-wrap;\n word-break: break-word;\n\n border-radius: var(--gnome-radius-sm, 6px);\n box-shadow:\n 0 2px 8px rgba(0, 0, 0, 0.2),\n 0 0 0 1px rgba(255, 255, 255, 0.06);\n\n pointer-events: none;\n user-select: none;\n\n /* Hidden by default — fades in when .visible is applied */\n opacity: 0;\n transform: scale(0.94);\n transition:\n opacity var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease),\n transform var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease);\n}\n\n/* ─── Visible state ──────────────────────────────────────────────────────────── */\n\n.visible {\n opacity: 1;\n transform: scale(1);\n}\n\n/* ─── Arrow ──────────────────────────────────────────────────────────────────── */\n\n.tooltip::after {\n content: \"\";\n position: absolute;\n width: 0;\n height: 0;\n border: 5px solid transparent;\n pointer-events: none;\n}\n\n.top::after {\n top: 100%;\n left: 50%;\n transform: translateX(-50%);\n border-top-color: var(--gnome-tooltip-bg-color, #3d3d3d);\n}\n\n.bottom::after {\n bottom: 100%;\n left: 50%;\n transform: translateX(-50%);\n border-bottom-color: var(--gnome-tooltip-bg-color, #3d3d3d);\n}\n\n.left::after {\n left: 100%;\n top: 50%;\n transform: translateY(-50%);\n border-left-color: var(--gnome-tooltip-bg-color, #3d3d3d);\n}\n\n.right::after {\n right: 100%;\n top: 50%;\n transform: translateY(-50%);\n border-right-color: var(--gnome-tooltip-bg-color, #3d3d3d);\n}\n\n/* ─── Dark mode ──────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n .tooltip {\n background-color: var(--gnome-tooltip-bg-color, #c0bfbc);\n color: var(--gnome-tooltip-fg-color, rgba(0, 0, 0, 0.8));\n box-shadow:\n 0 2px 8px rgba(0, 0, 0, 0.4),\n 0 0 0 1px rgba(0, 0, 0, 0.12);\n }\n\n .top::after {\n border-top-color: var(--gnome-tooltip-bg-color, #c0bfbc);\n }\n .bottom::after {\n border-bottom-color: var(--gnome-tooltip-bg-color, #c0bfbc);\n }\n .left::after {\n border-left-color: var(--gnome-tooltip-bg-color, #c0bfbc);\n }\n .right::after {\n border-right-color: var(--gnome-tooltip-bg-color, #c0bfbc);\n }\n}\n\n/* ─── Reduced motion ─────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n .tooltip {\n transition: opacity var(--gnome-duration-fast, 100ms) linear;\n transform: none;\n }\n\n .visible {\n transform: none;\n }\n}\n"],"mappings":""}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
const e=require(`./ViewSwitcher.module.css.cjs`);let t=require(`react`),n=require(`react/jsx-runtime`);function r({children:r,className:i,"aria-label":a=`View switcher`,...o}){let s=(0,t.useRef)(null);function c(e){let t=Array.from(s.current?.querySelectorAll(`[role=radio]:not(:disabled)`)??[]),n=t.
|
|
1
|
+
const e=require(`./ViewSwitcher.module.css.cjs`);let t=require(`react`),n=require(`react/jsx-runtime`);function r({children:r,className:i,"aria-label":a=`View switcher`,...o}){let s=(0,t.useRef)(null);function c(e){let t=Array.from(s.current?.querySelectorAll(`[role=radio]:not(:disabled)`)??[]),n=document.activeElement,r=n instanceof HTMLButtonElement?t.indexOf(n):-1;if(r===-1)return;let i=r;if(e.key===`ArrowRight`||e.key===`ArrowDown`)i=(r+1)%t.length;else if(e.key===`ArrowLeft`||e.key===`ArrowUp`)i=(r-1+t.length)%t.length;else if(e.key===`Home`)i=0;else if(e.key===`End`)i=t.length-1;else return;e.preventDefault(),t[i].focus(),t[i].click()}return(0,n.jsx)(`div`,{ref:s,role:`radiogroup`,"aria-label":a,onKeyDown:c,className:[e.default.switcher,i].filter(Boolean).join(` `),...o,children:r})}exports.ViewSwitcher=r;
|
|
2
2
|
//# sourceMappingURL=ViewSwitcher.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ViewSwitcher.cjs","names":[],"sources":["../../../src/components/ViewSwitcher/ViewSwitcher.tsx"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"ViewSwitcher.cjs","names":[],"sources":["../../../src/components/ViewSwitcher/ViewSwitcher.tsx"],"sourcesContent":["import { type HTMLAttributes, type KeyboardEvent, type ReactNode, useRef } from 'react';\n\nimport styles from './ViewSwitcher.module.css';\n\nexport interface ViewSwitcherProps extends HTMLAttributes<HTMLDivElement> {\n children?: ReactNode;\n /** Accessible label for the group. */\n 'aria-label'?: string;\n}\n\n/**\n * Segmented control for switching between major views.\n *\n * Mirrors the Adwaita `AdwViewSwitcher` pattern. Place in a `HeaderBar`\n * as the `title` for the canonical GNOME layout.\n *\n * Compose with `ViewSwitcherItem` for each option.\n * Keyboard: ← / → cycle through items, Home / End jump to first / last.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.ViewSwitcher.html\n * @see https://developer.gnome.org/hig/patterns/nav/view-switchers.html\n */\nexport function ViewSwitcher({\n children,\n className,\n 'aria-label': ariaLabel = 'View switcher',\n ...props\n}: ViewSwitcherProps) {\n const groupRef = useRef<HTMLDivElement>(null);\n\n function handleKeyDown(e: KeyboardEvent<HTMLDivElement>) {\n const items = Array.from(\n groupRef.current?.querySelectorAll<HTMLButtonElement>('[role=radio]:not(:disabled)') ?? [],\n );\n const activeElement = document.activeElement;\n const idx = activeElement instanceof HTMLButtonElement ? items.indexOf(activeElement) : -1;\n\n if (idx === -1) {\n return;\n }\n\n let next = idx;\n if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {\n next = (idx + 1) % items.length;\n } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {\n next = (idx - 1 + items.length) % items.length;\n } else if (e.key === 'Home') {\n next = 0;\n } else if (e.key === 'End') {\n next = items.length - 1;\n } else {\n return;\n }\n\n e.preventDefault();\n items[next].focus();\n items[next].click();\n }\n\n return (\n <div\n ref={groupRef}\n role=\"radiogroup\"\n aria-label={ariaLabel}\n onKeyDown={handleKeyDown}\n className={[styles.switcher, className].filter(Boolean).join(' ')}\n {...props}\n >\n {children}\n </div>\n );\n}\n"],"mappings":"uGAsBA,SAAgB,EAAa,CAC3B,WACA,YACA,aAAc,EAAY,gBAC1B,GAAG,GACiB,CACpB,IAAM,GAAA,EAAA,EAAA,QAAkC,KAAK,CAE7C,SAAS,EAAc,EAAkC,CACvD,IAAM,EAAQ,MAAM,KAClB,EAAS,SAAS,iBAAoC,8BAA8B,EAAI,EAAE,CAC3F,CACK,EAAgB,SAAS,cACzB,EAAM,aAAyB,kBAAoB,EAAM,QAAQ,EAAc,CAAG,GAExF,GAAI,IAAQ,GACV,OAGF,IAAI,EAAO,EACX,GAAI,EAAE,MAAQ,cAAgB,EAAE,MAAQ,YACtC,GAAQ,EAAM,GAAK,EAAM,eAChB,EAAE,MAAQ,aAAe,EAAE,MAAQ,UAC5C,GAAQ,EAAM,EAAI,EAAM,QAAU,EAAM,eAC/B,EAAE,MAAQ,OACnB,EAAO,UACE,EAAE,MAAQ,MACnB,EAAO,EAAM,OAAS,OAEtB,OAGF,EAAE,gBAAgB,CAClB,EAAM,GAAM,OAAO,CACnB,EAAM,GAAM,OAAO,CAGrB,OACE,EAAA,EAAA,KAAC,MAAD,CACE,IAAK,EACL,KAAK,aACL,aAAY,EACZ,UAAW,EACX,UAAW,CAAC,EAAA,QAAO,SAAU,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI,CACjE,GAAI,EAEH,WACG,CAAA"}
|
|
@@ -2,7 +2,7 @@ import { HTMLAttributes, ReactNode } from 'react';
|
|
|
2
2
|
export interface ViewSwitcherProps extends HTMLAttributes<HTMLDivElement> {
|
|
3
3
|
children?: ReactNode;
|
|
4
4
|
/** Accessible label for the group. */
|
|
5
|
-
|
|
5
|
+
'aria-label'?: string;
|
|
6
6
|
}
|
|
7
7
|
/**
|
|
8
8
|
* Segmented control for switching between major views.
|
|
@@ -16,4 +16,4 @@ export interface ViewSwitcherProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
16
16
|
* @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.ViewSwitcher.html
|
|
17
17
|
* @see https://developer.gnome.org/hig/patterns/nav/view-switchers.html
|
|
18
18
|
*/
|
|
19
|
-
export declare function ViewSwitcher({ children, className,
|
|
19
|
+
export declare function ViewSwitcher({ children, className, 'aria-label': ariaLabel, ...props }: ViewSwitcherProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -5,15 +5,15 @@ import { jsx as n } from "react/jsx-runtime";
|
|
|
5
5
|
function r({ children: r, className: i, "aria-label": a = "View switcher", ...o }) {
|
|
6
6
|
let s = t(null);
|
|
7
7
|
function c(e) {
|
|
8
|
-
let t = Array.from(s.current?.querySelectorAll("[role=radio]:not(:disabled)") ?? []), n =
|
|
9
|
-
if (
|
|
10
|
-
let
|
|
11
|
-
if (e.key === "ArrowRight" || e.key === "ArrowDown")
|
|
12
|
-
else if (e.key === "ArrowLeft" || e.key === "ArrowUp")
|
|
13
|
-
else if (e.key === "Home")
|
|
14
|
-
else if (e.key === "End")
|
|
8
|
+
let t = Array.from(s.current?.querySelectorAll("[role=radio]:not(:disabled)") ?? []), n = document.activeElement, r = n instanceof HTMLButtonElement ? t.indexOf(n) : -1;
|
|
9
|
+
if (r === -1) return;
|
|
10
|
+
let i = r;
|
|
11
|
+
if (e.key === "ArrowRight" || e.key === "ArrowDown") i = (r + 1) % t.length;
|
|
12
|
+
else if (e.key === "ArrowLeft" || e.key === "ArrowUp") i = (r - 1 + t.length) % t.length;
|
|
13
|
+
else if (e.key === "Home") i = 0;
|
|
14
|
+
else if (e.key === "End") i = t.length - 1;
|
|
15
15
|
else return;
|
|
16
|
-
e.preventDefault(), t[
|
|
16
|
+
e.preventDefault(), t[i].focus(), t[i].click();
|
|
17
17
|
}
|
|
18
18
|
return /* @__PURE__ */ n("div", {
|
|
19
19
|
ref: s,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ViewSwitcher.js","names":[],"sources":["../../../src/components/ViewSwitcher/ViewSwitcher.tsx"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"ViewSwitcher.js","names":[],"sources":["../../../src/components/ViewSwitcher/ViewSwitcher.tsx"],"sourcesContent":["import { type HTMLAttributes, type KeyboardEvent, type ReactNode, useRef } from 'react';\n\nimport styles from './ViewSwitcher.module.css';\n\nexport interface ViewSwitcherProps extends HTMLAttributes<HTMLDivElement> {\n children?: ReactNode;\n /** Accessible label for the group. */\n 'aria-label'?: string;\n}\n\n/**\n * Segmented control for switching between major views.\n *\n * Mirrors the Adwaita `AdwViewSwitcher` pattern. Place in a `HeaderBar`\n * as the `title` for the canonical GNOME layout.\n *\n * Compose with `ViewSwitcherItem` for each option.\n * Keyboard: ← / → cycle through items, Home / End jump to first / last.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.ViewSwitcher.html\n * @see https://developer.gnome.org/hig/patterns/nav/view-switchers.html\n */\nexport function ViewSwitcher({\n children,\n className,\n 'aria-label': ariaLabel = 'View switcher',\n ...props\n}: ViewSwitcherProps) {\n const groupRef = useRef<HTMLDivElement>(null);\n\n function handleKeyDown(e: KeyboardEvent<HTMLDivElement>) {\n const items = Array.from(\n groupRef.current?.querySelectorAll<HTMLButtonElement>('[role=radio]:not(:disabled)') ?? [],\n );\n const activeElement = document.activeElement;\n const idx = activeElement instanceof HTMLButtonElement ? items.indexOf(activeElement) : -1;\n\n if (idx === -1) {\n return;\n }\n\n let next = idx;\n if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {\n next = (idx + 1) % items.length;\n } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {\n next = (idx - 1 + items.length) % items.length;\n } else if (e.key === 'Home') {\n next = 0;\n } else if (e.key === 'End') {\n next = items.length - 1;\n } else {\n return;\n }\n\n e.preventDefault();\n items[next].focus();\n items[next].click();\n }\n\n return (\n <div\n ref={groupRef}\n role=\"radiogroup\"\n aria-label={ariaLabel}\n onKeyDown={handleKeyDown}\n className={[styles.switcher, className].filter(Boolean).join(' ')}\n {...props}\n >\n {children}\n </div>\n );\n}\n"],"mappings":";;;;AAsBA,SAAgB,EAAa,EAC3B,aACA,cACA,cAAc,IAAY,iBAC1B,GAAG,KACiB;CACpB,IAAM,IAAW,EAAuB,KAAK;CAE7C,SAAS,EAAc,GAAkC;EACvD,IAAM,IAAQ,MAAM,KAClB,EAAS,SAAS,iBAAoC,8BAA8B,IAAI,EAAE,CAC3F,EACK,IAAgB,SAAS,eACzB,IAAM,aAAyB,oBAAoB,EAAM,QAAQ,EAAc,GAAG;AAExF,MAAI,MAAQ,GACV;EAGF,IAAI,IAAO;AACX,MAAI,EAAE,QAAQ,gBAAgB,EAAE,QAAQ,YACtC,MAAQ,IAAM,KAAK,EAAM;WAChB,EAAE,QAAQ,eAAe,EAAE,QAAQ,UAC5C,MAAQ,IAAM,IAAI,EAAM,UAAU,EAAM;WAC/B,EAAE,QAAQ,OACnB,KAAO;WACE,EAAE,QAAQ,MACnB,KAAO,EAAM,SAAS;MAEtB;AAKF,EAFA,EAAE,gBAAgB,EAClB,EAAM,GAAM,OAAO,EACnB,EAAM,GAAM,OAAO;;AAGrB,QACE,kBAAC,OAAD;EACE,KAAK;EACL,MAAK;EACL,cAAY;EACZ,WAAW;EACX,WAAW,CAAC,EAAO,UAAU,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;EACjE,GAAI;EAEH;EACG,CAAA"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
var e={switcher:`
|
|
1
|
+
var e={switcher:`_switcher_xusgc_3`,item:`_item_xusgc_14`,active:`_active_xusgc_41`,itemIcon:`_itemIcon_xusgc_72`,itemLabel:`_itemLabel_xusgc_80`};exports.default=e;
|
|
2
2
|
//# sourceMappingURL=ViewSwitcher.module.css.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ViewSwitcher.module.css.cjs","names":[],"sources":["../../../src/components/ViewSwitcher/ViewSwitcher.module.css"],"sourcesContent":["/* ─── Container ────────────────────────────────────────────────────────────── */\n\n.switcher {\n display: inline-flex;\n align-items: center;\n gap: 2px;\n padding: 3px;\n border-radius: var(--gnome-radius-pill);\n background-color: color-mix(
|
|
1
|
+
{"version":3,"file":"ViewSwitcher.module.css.cjs","names":[],"sources":["../../../src/components/ViewSwitcher/ViewSwitcher.module.css"],"sourcesContent":["/* ─── Container ────────────────────────────────────────────────────────────── */\n\n.switcher {\n display: inline-flex;\n align-items: center;\n gap: 2px;\n padding: 3px;\n border-radius: var(--gnome-radius-pill);\n background-color: color-mix(in srgb, var(--gnome-headerbar-bg-color, #ebebeb) 75%, black 25%);\n}\n\n/* ─── Item ─────────────────────────────────────────────────────────────────── */\n\n.item {\n appearance: none;\n -webkit-appearance: none;\n border: none;\n background: transparent;\n font: inherit;\n cursor: pointer;\n outline: none;\n\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--gnome-space-1, 6px);\n padding: 5px var(--gnome-space-2, 12px);\n border-radius: calc(var(--gnome-radius-pill) - 3px);\n\n font-family: var(--gnome-font-family);\n font-size: var(--gnome-font-size-body, 1rem);\n font-weight: var(--gnome-font-weight-normal, 400);\n color: var(--gnome-headerbar-fg-color, rgba(0, 0, 0, 0.8));\n white-space: nowrap;\n\n transition:\n background-color var(--gnome-duration-fast) var(--gnome-easing-default),\n color var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.item:hover:not(:disabled):not(.active) {\n background-color: rgba(0, 0, 0, 0.06);\n}\n\n.item:active:not(:disabled):not(.active) {\n background-color: rgba(0, 0, 0, 0.12);\n}\n\n.item:disabled {\n opacity: var(--gnome-opacity-disabled, 0.5);\n cursor: not-allowed;\n}\n\n.item:focus-visible {\n box-shadow:\n 0 0 0 var(--gnome-focus-ring-offset, 2px)\n color-mix(in srgb, var(--gnome-headerbar-bg-color, #ebebeb) 75%, black 25%),\n 0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px))\n var(--gnome-focus-ring-color, #3584e4);\n}\n\n/* ─── Active item ──────────────────────────────────────────────────────────── */\n\n.active {\n background-color: var(--gnome-headerbar-bg-color, #ebebeb);\n font-weight: var(--gnome-font-weight-semibold, 600);\n box-shadow: var(--gnome-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.12));\n}\n\n/* ─── Icon ─────────────────────────────────────────────────────────────────── */\n\n.itemIcon {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n}\n\n/* ─── Label ────────────────────────────────────────────────────────────────── */\n\n.itemLabel {\n line-height: var(--gnome-line-height-body, 1.5);\n}\n\n/* ─── Dark mode ────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n .switcher {\n background-color: color-mix(in srgb, var(--gnome-headerbar-bg-color, #303030) 70%, black 30%);\n }\n\n .item:hover:not(:disabled):not(.active) {\n background-color: rgba(255, 255, 255, 0.08);\n }\n\n .item:active:not(:disabled):not(.active) {\n background-color: rgba(255, 255, 255, 0.14);\n }\n\n .active {\n background-color: var(--gnome-headerbar-bg-color, #303030);\n box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);\n }\n}\n\n/* ─── Reduced motion ───────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n .item {\n transition: none;\n }\n}\n"],"mappings":""}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
var e = {
|
|
2
|
-
switcher: "
|
|
3
|
-
item: "
|
|
4
|
-
active: "
|
|
5
|
-
itemIcon: "
|
|
6
|
-
itemLabel: "
|
|
2
|
+
switcher: "_switcher_xusgc_3",
|
|
3
|
+
item: "_item_xusgc_14",
|
|
4
|
+
active: "_active_xusgc_41",
|
|
5
|
+
itemIcon: "_itemIcon_xusgc_72",
|
|
6
|
+
itemLabel: "_itemLabel_xusgc_80"
|
|
7
7
|
};
|
|
8
8
|
//#endregion
|
|
9
9
|
export { e as default };
|