@backstage/ui 0.13.0 → 0.14.0-next.0

package/dist/components/Tabs/Tabs.module.css.esm.js

@@ -1,7 +1,7 @@
 import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
 
-var css_248z = "/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer tokens, base, components, utilities;\n\n@layer components {\n  .Tabs_bui-Tabs__b8746a49c6 {\n    /* Initialize CSS variables */\n    --active-tab-left: 0px;\n    --active-tab-right: 0px;\n    --active-tab-top: 0px;\n    --active-tab-bottom: 0px;\n    --active-tab-width: 0px;\n    --active-tab-height: 0px;\n    --active-transition-duration: 0s;\n\n    --hovered-tab-left: 0px;\n    --hovered-tab-right: 0px;\n    --hovered-tab-top: 0px;\n    --hovered-tab-bottom: 0px;\n    --hovered-tab-width: 0px;\n    --hovered-tab-height: 0px;\n    --hovered-tab-opacity: 0;\n    --hovered-transition-duration: 0s;\n  }\n\n  .Tabs_bui-TabList__b8746a49c6 {\n    display: flex;\n    flex-direction: row;\n  }\n\n  .Tabs_bui-TabListWrapper__b8746a49c6 {\n    position: relative;\n  }\n\n  .Tabs_bui-Tab__b8746a49c6 {\n    font-size: var(--bui-font-size-3);\n    font-family: var(--bui-font-regular);\n    font-weight: var(--bui-font-weight-regular);\n    color: var(--bui-fg-secondary);\n    height: 36px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n    position: relative;\n    z-index: 2;\n    padding-inline: var(--bui-space-2);\n\n    &[data-selected='true'] {\n      color: var(--bui-fg-primary);\n    }\n  }\n\n  .Tabs_bui-TabActive__b8746a49c6 {\n    content: '';\n    position: absolute;\n    left: calc(var(--active-tab-left) + var(--bui-space-2));\n    bottom: -1px;\n    width: calc(var(--active-tab-width) - var(--bui-space-4));\n    height: 1px;\n    background-color: var(--bui-fg-primary);\n    border-radius: 4px;\n    transition: left var(--active-transition-duration) ease-out,\n      opacity 0.15s ease-out, width var(--active-transition-duration) ease-out;\n    opacity: 1;\n  }\n\n  .Tabs_bui-TabHovered__b8746a49c6 {\n    content: '';\n    position: absolute;\n    left: var(--hovered-tab-left);\n    top: calc(var(--hovered-tab-top) + 4px);\n    width: var(--hovered-tab-width);\n    height: calc(var(--hovered-tab-height) - 8px);\n    background-color: var(--bui-bg-neutral-2);\n    border-radius: 4px;\n    opacity: var(--hovered-tab-opacity);\n    transition: left var(--hovered-transition-duration) ease-out,\n      top var(--hovered-transition-duration) ease-out,\n      width var(--hovered-transition-duration) ease-out,\n      height var(--hovered-transition-duration) ease-out, opacity 0.15s ease-out;\n  }\n\n  .Tabs_bui-TabPanel__b8746a49c6 {\n    padding-inline: var(--bui-space-2);\n    padding-top: var(--bui-space-4);\n  }\n}\n";
-var styles = {"bui-Tabs":"Tabs_bui-Tabs__b8746a49c6","bui-TabList":"Tabs_bui-TabList__b8746a49c6","bui-TabListWrapper":"Tabs_bui-TabListWrapper__b8746a49c6","bui-Tab":"Tabs_bui-Tab__b8746a49c6","bui-TabActive":"Tabs_bui-TabActive__b8746a49c6","bui-TabHovered":"Tabs_bui-TabHovered__b8746a49c6","bui-TabPanel":"Tabs_bui-TabPanel__b8746a49c6"};
+var css_248z = "/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer tokens, base, components, utilities;\n\n@layer components {\n  .Tabs_bui-Tabs__6ce63266dd {\n    /* Initialize CSS variables */\n    --active-tab-left: 0px;\n    --active-tab-right: 0px;\n    --active-tab-top: 0px;\n    --active-tab-bottom: 0px;\n    --active-tab-width: 0px;\n    --active-tab-height: 0px;\n    --active-transition-duration: 0s;\n\n    --hovered-tab-left: 0px;\n    --hovered-tab-right: 0px;\n    --hovered-tab-top: 0px;\n    --hovered-tab-bottom: 0px;\n    --hovered-tab-width: 0px;\n    --hovered-tab-height: 0px;\n    --hovered-tab-opacity: 0;\n    --hovered-transition-duration: 0s;\n  }\n\n  .Tabs_bui-TabList__6ce63266dd {\n    display: flex;\n    flex-direction: row;\n  }\n\n  .Tabs_bui-TabListWrapper__6ce63266dd {\n    position: relative;\n  }\n\n  .Tabs_bui-Tab__6ce63266dd {\n    font-size: var(--bui-font-size-3);\n    font-family: var(--bui-font-regular);\n    font-weight: var(--bui-font-weight-regular);\n    color: var(--bui-fg-secondary);\n    height: 36px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n    position: relative;\n    z-index: 2;\n    padding-inline: var(--bui-space-2);\n\n    &[data-selected='true'] {\n      color: var(--bui-fg-primary);\n    }\n  }\n\n  .Tabs_bui-TabActive__6ce63266dd {\n    content: '';\n    position: absolute;\n    left: calc(var(--active-tab-left) + var(--bui-space-2));\n    bottom: -1px;\n    width: calc(var(--active-tab-width) - var(--bui-space-4));\n    height: 1px;\n    background-color: var(--bui-fg-primary);\n    border-radius: 4px;\n    transition: left var(--active-transition-duration) ease-out,\n      opacity 0.15s ease-out, width var(--active-transition-duration) ease-out;\n    opacity: 1;\n  }\n\n  .Tabs_bui-TabHovered__6ce63266dd {\n    content: '';\n    position: absolute;\n    left: var(--hovered-tab-left);\n    top: calc(var(--hovered-tab-top) + 4px);\n    width: var(--hovered-tab-width);\n    height: calc(var(--hovered-tab-height) - 8px);\n    background-color: var(--bui-bg-neutral-2);\n    border-radius: 4px;\n    opacity: var(--hovered-tab-opacity);\n    transition: left var(--hovered-transition-duration) ease-out,\n      top var(--hovered-transition-duration) ease-out,\n      width var(--hovered-transition-duration) ease-out,\n      height var(--hovered-transition-duration) ease-out, opacity 0.15s ease-out;\n  }\n\n  .Tabs_bui-TabPanel__6ce63266dd {\n    padding-inline: var(--bui-space-2);\n    padding-top: var(--bui-space-4);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .Tabs_bui-TabActive__6ce63266dd,\n    .Tabs_bui-TabHovered__6ce63266dd {\n      transition: none;\n    }\n  }\n}\n";
+var styles = {"bui-Tabs":"Tabs_bui-Tabs__6ce63266dd","bui-TabList":"Tabs_bui-TabList__6ce63266dd","bui-TabListWrapper":"Tabs_bui-TabListWrapper__6ce63266dd","bui-Tab":"Tabs_bui-Tab__6ce63266dd","bui-TabActive":"Tabs_bui-TabActive__6ce63266dd","bui-TabHovered":"Tabs_bui-TabHovered__6ce63266dd","bui-TabPanel":"Tabs_bui-TabPanel__6ce63266dd"};
 styleInject(css_248z);
 
 export { styles as default };

package/dist/index.d.ts

@@ -1288,8 +1288,9 @@ declare module 'react-aria-components' {
     }
 }
 /**
- * A component that renders a plugin header with icon, title, custom actions,
- * and navigation tabs.
+ * Renders a plugin header with icon, title, custom actions, and optional tabs.
+ * Always participates in the background context system so descendants (e.g. buttons)
+ * get the correct `data-on-bg` styling inside the toolbar and tabs.
  *
  * @public
  */
@@ -1306,7 +1307,6 @@ declare const PluginHeaderDefinition: {
     readonly classNames: {
         readonly root: "bui-PluginHeader";
         readonly toolbar: "bui-PluginHeaderToolbar";
-        readonly toolbarWrapper: "bui-PluginHeaderToolbarWrapper";
         readonly toolbarContent: "bui-PluginHeaderToolbarContent";
         readonly toolbarControls: "bui-PluginHeaderToolbarControls";
         readonly toolbarIcon: "bui-PluginHeaderToolbarIcon";
@@ -1324,6 +1324,32 @@ declare const PluginHeaderDefinition: {
     };
 };
 
+/**
+ * Represents a single navigation tab in the header.
+ *
+ * @public
+ */
+interface HeaderNavTab {
+    id: string;
+    label: string;
+    href: string;
+}
+/**
+ * Represents a group of navigation tabs rendered as a dropdown menu.
+ *
+ * @public
+ */
+interface HeaderNavTabGroup {
+    id: string;
+    label: string;
+    items: HeaderNavTab[];
+}
+/**
+ * A navigation tab item — either a flat link or a dropdown group.
+ *
+ * @public
+ */
+type HeaderNavTabItem = HeaderNavTab | HeaderNavTabGroup;
 /**
  * Own props for the Header component.
  *
@@ -1332,7 +1358,8 @@ declare const PluginHeaderDefinition: {
 interface HeaderOwnProps {
     title?: string;
     customActions?: React.ReactNode;
-    tabs?: HeaderTab[];
+    tabs?: HeaderNavTabItem[];
+    activeTabId?: string;
     breadcrumbs?: HeaderBreadcrumb[];
     className?: string;
 }
@@ -1399,6 +1426,7 @@ declare const HeaderDefinition: {
         readonly title: {};
         readonly customActions: {};
         readonly tabs: {};
+        readonly activeTabId: {};
         readonly breadcrumbs: {};
         readonly className: {};
     };
@@ -1422,11 +1450,57 @@ declare const HeaderPageDefinition: {
         readonly title: {};
         readonly customActions: {};
         readonly tabs: {};
+        readonly activeTabId: {};
         readonly breadcrumbs: {};
         readonly className: {};
     };
 };
 
+/** @public */
+declare const HeaderNavDefinition: {
+    readonly styles: {
+        readonly [key: string]: string;
+    };
+    readonly classNames: {
+        readonly root: "bui-HeaderNav";
+        readonly list: "bui-HeaderNavList";
+        readonly active: "bui-HeaderNavActive";
+        readonly hovered: "bui-HeaderNavHovered";
+    };
+    readonly analytics: true;
+    readonly propDefs: {
+        readonly noTrack: {};
+        readonly tabs: {};
+        readonly activeTabId: {};
+        readonly children: {};
+        readonly className: {};
+    };
+};
+/** @public */
+declare const HeaderNavItemDefinition: {
+    readonly styles: {
+        readonly [key: string]: string;
+    };
+    readonly classNames: {
+        readonly root: "bui-HeaderNavItem";
+    };
+    readonly propDefs: {
+        readonly className: {};
+    };
+};
+/** @public */
+declare const HeaderNavGroupDefinition: {
+    readonly styles: {
+        readonly [key: string]: string;
+    };
+    readonly classNames: {
+        readonly root: "bui-HeaderNavGroup";
+    };
+    readonly propDefs: {
+        readonly className: {};
+    };
+};
+
 /** @public */
 type ButtonIconOwnProps = {
     size?: Responsive<'small' | 'medium'>;
@@ -2627,6 +2701,7 @@ declare const SearchAutocompleteDefinition: {
     readonly styles: {
         readonly [key: string]: string;
     };
+    readonly bg: "consumer";
     readonly classNames: {
         readonly root: "bui-SearchAutocomplete";
         readonly searchField: "bui-SearchAutocompleteSearchField";
@@ -3299,5 +3374,5 @@ declare function useAnalytics(): AnalyticsTracker;
  */
 declare function getNodeText(node: ReactNode | ((...args: any[]) => ReactNode)): string | undefined;
 
-export { Accordion, AccordionDefinition, AccordionGroup, AccordionGroupDefinition, AccordionPanel, AccordionPanelDefinition, AccordionTrigger, AccordionTriggerDefinition, Alert, AlertDefinition, Avatar, AvatarDefinition, BUIProvider, BgProvider, Box, BoxDefinition, Button, ButtonDefinition, ButtonIcon, ButtonIconDefinition, ButtonLink, ButtonLinkDefinition, Card, CardBody, CardBodyDefinition, CardDefinition, CardFooter, CardFooterDefinition, CardHeader, CardHeaderDefinition, Cell, CellProfile, CellText, Checkbox, CheckboxDefinition, Column, Container, ContainerDefinition, Dialog, DialogBody, DialogBodyDefinition, DialogDefinition, DialogFooter, DialogFooterDefinition, DialogHeader, DialogHeaderDefinition, DialogTrigger, FieldLabel, FieldLabelDefinition, Flex, FlexDefinition, FullPage, FullPageDefinition, Grid, GridDefinition, GridItemDefinition, Header, HeaderDefinition, HeaderPage, HeaderPageDefinition, Link, LinkDefinition, List, ListDefinition, ListRow, ListRowDefinition, Menu, MenuAutocomplete, MenuAutocompleteListbox, MenuDefinition, MenuItem, MenuListBox, MenuListBoxItem, MenuSection, MenuSeparator, MenuTrigger, PasswordField, PasswordFieldDefinition, PluginHeader, PluginHeaderDefinition, Popover, PopoverDefinition, Radio, RadioDefinition, RadioGroup, RadioGroupDefinition, Row, SearchAutocomplete, SearchAutocompleteDefinition, SearchAutocompleteItem, SearchField, SearchFieldDefinition, Select, SelectDefinition, Skeleton, SkeletonDefinition, SubmenuTrigger, Switch, SwitchDefinition, Tab, TabList, TabPanel, Table, TableBody, TableDefinition, TableHeader, TablePagination, TablePaginationDefinition, TableRoot, Tabs, TabsDefinition, Tag, TagGroup, TagGroupDefinition, Text, TextDefinition, TextField, TextFieldDefinition, ToggleButton, ToggleButtonDefinition, ToggleButtonGroup, ToggleButtonGroupDefinition, Tooltip, TooltipDefinition, TooltipTrigger, VisuallyHidden, VisuallyHiddenDefinition, getNodeText, useAnalytics, useBgConsumer, useBgProvider, useBreakpoint, useTable };
-export type { AccordionGroupOwnProps, AccordionGroupProps, AccordionOwnProps, AccordionPanelOwnProps, AccordionPanelProps, AccordionProps, AccordionTriggerOwnProps, AccordionTriggerProps, AlertOwnProps, AlertProps, AlignItems, AnalyticsEventAttributes, AnalyticsTracker, AvatarOwnProps, AvatarProps, BUIProviderProps, BgContextValue, BgProviderProps, Border, BorderRadius, BoxOwnProps, BoxProps, BoxUtilityProps, Breakpoint, ButtonIconOwnProps, ButtonIconProps, ButtonLinkOwnProps, ButtonLinkProps, ButtonOwnProps, ButtonProps, CardBaseProps, CardBodyOwnProps, CardBodyProps, CardButtonVariant, CardFooterOwnProps, CardFooterProps, CardHeaderOwnProps, CardHeaderProps, CardLinkVariant, CardOwnProps, CardProps, CardStaticVariant, CellOwnProps, CellProfileOwnProps, CellProfileProps, CellProps, CellTextOwnProps, CellTextProps, CheckboxOwnProps, CheckboxProps, ColumnConfig, ColumnOwnProps, ColumnProps, Columns, ContainerBg, ContainerOwnProps, ContainerProps, CursorParams, CursorResponse, DialogBodyOwnProps, DialogBodyProps, DialogFooterOwnProps, DialogFooterProps, DialogHeaderOwnProps, DialogHeaderProps, DialogOwnProps, DialogProps, DialogTriggerProps, Display, FieldLabelOwnProps, FieldLabelProps, FilterState, FlexDirection, FlexOwnProps, FlexProps, FlexWrap, FullPageOwnProps, FullPageProps, GridItemOwnProps, GridItemProps, GridOwnProps, GridProps, HeaderBreadcrumb, HeaderOwnProps, HeaderPageBreadcrumb, HeaderPageOwnProps, HeaderPageProps, HeaderProps, HeaderTab, JustifyContent, LinkOwnProps, LinkProps, ListOwnProps, ListProps, ListRowOwnProps, ListRowProps, MarginProps, MenuAutocompleteListBoxOwnProps, MenuAutocompleteListBoxProps, MenuAutocompleteOwnProps, MenuAutocompleteProps, MenuItemOwnProps, MenuItemProps, MenuListBoxItemOwnProps, MenuListBoxItemProps, MenuListBoxOwnProps, MenuListBoxProps, MenuOwnProps, MenuPopoverOwnProps, MenuProps, MenuSectionOwnProps, MenuSectionProps, MenuSeparatorOwnProps, MenuSeparatorProps, MenuTriggerProps, NoPagination, OffsetParams, OffsetResponse, Option, PaddingProps, PagePagination, PageSizeOption, PaginationOptions, PasswordFieldOwnProps, PasswordFieldProps, PluginHeaderOwnProps, PluginHeaderProps, PopoverOwnProps, PopoverProps, ProviderBg, QueryOptions, RadioGroupOwnProps, RadioGroupProps, RadioOwnProps, RadioProps, Responsive, RowConfig, RowOwnProps, RowProps, RowRenderFn, SearchAutocompleteItemOwnProps, SearchAutocompleteItemProps, SearchAutocompleteOwnProps, SearchAutocompleteProps, SearchFieldOwnProps, SearchFieldProps, SearchState, SelectOwnProps, SelectProps, SkeletonOwnProps, SkeletonProps, SortDescriptor, SortState, Space, SpaceProps, SubmenuTriggerProps, SwitchOwnProps, SwitchProps, TabListOwnProps, TabListProps, TabMatchStrategy, TabOwnProps, TabPanelOwnProps, TabPanelProps, TabProps, TableBodyOwnProps, TableBodyProps, TableHeaderOwnProps, TableHeaderProps, TableItem, TablePaginationOwnProps, TablePaginationProps, TablePaginationType, TableProps, TableRootOwnProps, TableRootProps, TableSelection, TabsOwnProps, TabsProps, TagGroupOwnProps, TagGroupProps, TagOwnProps, TagProps, TextColorStatus, TextColors, TextFieldOwnProps, TextFieldProps, TextOwnProps, TextProps, TextVariants, TextWeights, ToggleButtonGroupOwnProps, ToggleButtonGroupProps, ToggleButtonOwnProps, ToggleButtonProps, TooltipOwnProps, TooltipProps, UseAnalyticsFn, UseTableCompleteOptions, UseTableCursorOptions, UseTableOffsetOptions, UseTableOptions, UseTableResult, UtilityProps, VirtualizedProp, VisuallyHiddenOwnProps, VisuallyHiddenProps };
+export { Accordion, AccordionDefinition, AccordionGroup, AccordionGroupDefinition, AccordionPanel, AccordionPanelDefinition, AccordionTrigger, AccordionTriggerDefinition, Alert, AlertDefinition, Avatar, AvatarDefinition, BUIProvider, BgProvider, Box, BoxDefinition, Button, ButtonDefinition, ButtonIcon, ButtonIconDefinition, ButtonLink, ButtonLinkDefinition, Card, CardBody, CardBodyDefinition, CardDefinition, CardFooter, CardFooterDefinition, CardHeader, CardHeaderDefinition, Cell, CellProfile, CellText, Checkbox, CheckboxDefinition, Column, Container, ContainerDefinition, Dialog, DialogBody, DialogBodyDefinition, DialogDefinition, DialogFooter, DialogFooterDefinition, DialogHeader, DialogHeaderDefinition, DialogTrigger, FieldLabel, FieldLabelDefinition, Flex, FlexDefinition, FullPage, FullPageDefinition, Grid, GridDefinition, GridItemDefinition, Header, HeaderDefinition, HeaderNavDefinition, HeaderNavGroupDefinition, HeaderNavItemDefinition, HeaderPage, HeaderPageDefinition, Link, LinkDefinition, List, ListDefinition, ListRow, ListRowDefinition, Menu, MenuAutocomplete, MenuAutocompleteListbox, MenuDefinition, MenuItem, MenuListBox, MenuListBoxItem, MenuSection, MenuSeparator, MenuTrigger, PasswordField, PasswordFieldDefinition, PluginHeader, PluginHeaderDefinition, Popover, PopoverDefinition, Radio, RadioDefinition, RadioGroup, RadioGroupDefinition, Row, SearchAutocomplete, SearchAutocompleteDefinition, SearchAutocompleteItem, SearchField, SearchFieldDefinition, Select, SelectDefinition, Skeleton, SkeletonDefinition, SubmenuTrigger, Switch, SwitchDefinition, Tab, TabList, TabPanel, Table, TableBody, TableDefinition, TableHeader, TablePagination, TablePaginationDefinition, TableRoot, Tabs, TabsDefinition, Tag, TagGroup, TagGroupDefinition, Text, TextDefinition, TextField, TextFieldDefinition, ToggleButton, ToggleButtonDefinition, ToggleButtonGroup, ToggleButtonGroupDefinition, Tooltip, TooltipDefinition, TooltipTrigger, VisuallyHidden, VisuallyHiddenDefinition, getNodeText, useAnalytics, useBgConsumer, useBgProvider, useBreakpoint, useTable };
+export type { AccordionGroupOwnProps, AccordionGroupProps, AccordionOwnProps, AccordionPanelOwnProps, AccordionPanelProps, AccordionProps, AccordionTriggerOwnProps, AccordionTriggerProps, AlertOwnProps, AlertProps, AlignItems, AnalyticsEventAttributes, AnalyticsTracker, AvatarOwnProps, AvatarProps, BUIProviderProps, BgContextValue, BgProviderProps, Border, BorderRadius, BoxOwnProps, BoxProps, BoxUtilityProps, Breakpoint, ButtonIconOwnProps, ButtonIconProps, ButtonLinkOwnProps, ButtonLinkProps, ButtonOwnProps, ButtonProps, CardBaseProps, CardBodyOwnProps, CardBodyProps, CardButtonVariant, CardFooterOwnProps, CardFooterProps, CardHeaderOwnProps, CardHeaderProps, CardLinkVariant, CardOwnProps, CardProps, CardStaticVariant, CellOwnProps, CellProfileOwnProps, CellProfileProps, CellProps, CellTextOwnProps, CellTextProps, CheckboxOwnProps, CheckboxProps, ColumnConfig, ColumnOwnProps, ColumnProps, Columns, ContainerBg, ContainerOwnProps, ContainerProps, CursorParams, CursorResponse, DialogBodyOwnProps, DialogBodyProps, DialogFooterOwnProps, DialogFooterProps, DialogHeaderOwnProps, DialogHeaderProps, DialogOwnProps, DialogProps, DialogTriggerProps, Display, FieldLabelOwnProps, FieldLabelProps, FilterState, FlexDirection, FlexOwnProps, FlexProps, FlexWrap, FullPageOwnProps, FullPageProps, GridItemOwnProps, GridItemProps, GridOwnProps, GridProps, HeaderBreadcrumb, HeaderNavTab, HeaderNavTabGroup, HeaderNavTabItem, HeaderOwnProps, HeaderPageBreadcrumb, HeaderPageOwnProps, HeaderPageProps, HeaderProps, HeaderTab, JustifyContent, LinkOwnProps, LinkProps, ListOwnProps, ListProps, ListRowOwnProps, ListRowProps, MarginProps, MenuAutocompleteListBoxOwnProps, MenuAutocompleteListBoxProps, MenuAutocompleteOwnProps, MenuAutocompleteProps, MenuItemOwnProps, MenuItemProps, MenuListBoxItemOwnProps, MenuListBoxItemProps, MenuListBoxOwnProps, MenuListBoxProps, MenuOwnProps, MenuPopoverOwnProps, MenuProps, MenuSectionOwnProps, MenuSectionProps, MenuSeparatorOwnProps, MenuSeparatorProps, MenuTriggerProps, NoPagination, OffsetParams, OffsetResponse, Option, PaddingProps, PagePagination, PageSizeOption, PaginationOptions, PasswordFieldOwnProps, PasswordFieldProps, PluginHeaderOwnProps, PluginHeaderProps, PopoverOwnProps, PopoverProps, ProviderBg, QueryOptions, RadioGroupOwnProps, RadioGroupProps, RadioOwnProps, RadioProps, Responsive, RowConfig, RowOwnProps, RowProps, RowRenderFn, SearchAutocompleteItemOwnProps, SearchAutocompleteItemProps, SearchAutocompleteOwnProps, SearchAutocompleteProps, SearchFieldOwnProps, SearchFieldProps, SearchState, SelectOwnProps, SelectProps, SkeletonOwnProps, SkeletonProps, SortDescriptor, SortState, Space, SpaceProps, SubmenuTriggerProps, SwitchOwnProps, SwitchProps, TabListOwnProps, TabListProps, TabMatchStrategy, TabOwnProps, TabPanelOwnProps, TabPanelProps, TabProps, TableBodyOwnProps, TableBodyProps, TableHeaderOwnProps, TableHeaderProps, TableItem, TablePaginationOwnProps, TablePaginationProps, TablePaginationType, TableProps, TableRootOwnProps, TableRootProps, TableSelection, TabsOwnProps, TabsProps, TagGroupOwnProps, TagGroupProps, TagOwnProps, TagProps, TextColorStatus, TextColors, TextFieldOwnProps, TextFieldProps, TextOwnProps, TextProps, TextVariants, TextWeights, ToggleButtonGroupOwnProps, ToggleButtonGroupProps, ToggleButtonOwnProps, ToggleButtonProps, TooltipOwnProps, TooltipProps, UseAnalyticsFn, UseTableCompleteOptions, UseTableCursorOptions, UseTableOffsetOptions, UseTableOptions, UseTableResult, UtilityProps, VirtualizedProp, VisuallyHiddenOwnProps, VisuallyHiddenProps };

package/dist/index.esm.js

@@ -26,6 +26,7 @@ export { PluginHeader } from './components/PluginHeader/PluginHeader.esm.js';
 export { PluginHeaderDefinition } from './components/PluginHeader/definition.esm.js';
 export { Header, HeaderPage } from './components/Header/Header.esm.js';
 export { HeaderDefinition, HeaderPageDefinition } from './components/Header/definition.esm.js';
+export { HeaderNavDefinition, HeaderNavGroupDefinition, HeaderNavItemDefinition } from './components/Header/HeaderNavDefinition.esm.js';
 export { ButtonIcon } from './components/ButtonIcon/ButtonIcon.esm.js';
 export { ButtonIconDefinition } from './components/ButtonIcon/definition.esm.js';
 export { ButtonLink } from './components/ButtonLink/ButtonLink.esm.js';

package/dist/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backstage/ui",
-  "version": "0.13.0",
+  "version": "0.14.0-next.0",
   "backstage": {
     "role": "web-library"
   },
@@ -50,15 +50,20 @@
     "test": "backstage-cli package test"
   },
   "dependencies": {
-    "@backstage/version-bridge": "^1.0.12",
+    "@backstage/version-bridge": "1.0.12",
+    "@react-aria/interactions": "^3.27.1",
+    "@react-stately/layout": "^4.6.0",
+    "@react-stately/overlays": "^3.6.23",
     "@remixicon/react": "^4.6.0",
     "@tanstack/react-table": "^8.21.3",
     "clsx": "^2.1.1",
+    "react-aria": "^3.47.0",
     "react-aria-components": "^1.14.0",
+    "react-stately": "^3.45.0",
     "use-sync-external-store": "^1.4.0"
   },
   "devDependencies": {
-    "@backstage/cli": "^0.36.0",
+    "@backstage/cli": "0.36.1-next.0",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
     "@types/use-sync-external-store": "^0.0.6",
@@ -71,9 +76,9 @@
     "storybook": "^10.3.0-alpha.1"
   },
   "peerDependencies": {
-    "@types/react": "^17.0.0 || ^18.0.0",
-    "react": "^17.0.0 || ^18.0.0",
-    "react-dom": "^17.0.0 || ^18.0.0",
+    "@types/react": "^18.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "react-router-dom": "^6.30.2"
   },
   "peerDependenciesMeta": {