@backstage/ui 0.6.1 → 0.7.0-next.0

package/CHANGELOG.md

@@ -1,10 +1,15 @@
 # @backstage/ui
 
-## 0.6.1
+## 0.7.0-next.0
+
+### Minor Changes
+
+- b0e47f3: **Breaking** We are upgrading our `Text` component to support all font sizes making the `Heading` component redundant. The new `Text` component introduces 4 sizes for title and 4 sizes for body text. All of these work in multiple colors and font weights. We improved the `as` prop to include all possible values. The `Link` component has also been updated to match the new `Text` component.
 
 ### Patch Changes
 
-- b9288aa: Fix missing `dist` folder.
+- e7ff178: Update styling of Tooltip element
+- e0e886f: Adds onTabSelectionChange to ui header component.
 
 ## 0.6.0
 

package/css/styles.css

@@ -9191,8 +9191,8 @@
   --bui-gray-6: #7b7b7b;
   --bui-gray-7: #9e9e9e;
   --bui-gray-8: #b4b4b4;
-  --bui-bg: var(--bui-black);
-  --bui-bg-surface-1: var(--bui-gray-1);
+  --bui-bg: #333;
+  --bui-bg-surface-1: #424242;
   --bui-bg-surface-2: var(--bui-gray-2);
   --bui-bg-solid: #9cc9ff;
   --bui-bg-solid-hover: #83b9fd;
@@ -9217,7 +9217,7 @@
   --bui-fg-danger: #e22b2b;
   --bui-fg-warning: #e36d05;
   --bui-fg-success: #1db954;
-  --bui-border: #fff3;
+  --bui-border: #ffffff1f;
   --bui-border-hover: #fff6;
   --bui-border-pressed: #ffffff80;
   --bui-border-disabled: #fff3;
@@ -9732,58 +9732,6 @@
   display: flex;
 }
 
-.bui-Heading {
-  font-family: var(--bui-font-regular);
-  color: var(--bui-fg-primary);
-  margin: 0;
-  padding: 0;
-  line-height: 100%;
-}
-
-.bui-Heading[data-variant="display"] {
-  font-size: var(--bui-font-size-10);
-  font-weight: var(--bui-font-weight-bold);
-}
-
-.bui-Heading[data-variant="title1"] {
-  font-size: var(--bui-font-size-9);
-  font-weight: var(--bui-font-weight-bold);
-}
-
-.bui-Heading[data-variant="title2"] {
-  font-size: var(--bui-font-size-8);
-  font-weight: var(--bui-font-weight-bold);
-}
-
-.bui-Heading[data-variant="title3"] {
-  font-size: var(--bui-font-size-7);
-  font-weight: var(--bui-font-weight-bold);
-}
-
-.bui-Heading[data-variant="title4"] {
-  font-size: var(--bui-font-size-6);
-  font-weight: var(--bui-font-weight-bold);
-}
-
-.bui-Heading[data-variant="title5"] {
-  font-size: var(--bui-font-size-5);
-  font-weight: var(--bui-font-weight-bold);
-}
-
-.bui-Heading[data-color="primary"] {
-  color: var(--bui-fg-primary);
-}
-
-.bui-Heading[data-color="secondary"] {
-  color: var(--bui-fg-secondary);
-}
-
-.bui-Heading[data-truncate] {
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-}
-
 .bui-Icon {
   width: 1rem;
   height: 1rem;
@@ -9795,72 +9743,17 @@
   margin: 0;
   padding: 0;
   text-decoration-line: none;
+  display: inline-block;
 
   &:hover {
     text-underline-offset: calc(.025em + 2px);
     text-decoration-line: underline;
     text-decoration-style: solid;
     text-decoration-thickness: min(2px, max(1px, .05em));
-    text-decoration-color: color-mix(in srgb, var(--bui-fg-link-hover) 30%, transparent);
+    text-decoration-color: color-mix(in srgb, currentColor 30%, transparent);
   }
 }
 
-.bui-Link[data-variant="title-large"] {
-  font-size: var(--bui-font-size-8);
-  line-height: 140%;
-}
-
-.bui-Link[data-variant="title-medium"] {
-  font-size: var(--bui-font-size-7);
-  line-height: 140%;
-}
-
-.bui-Link[data-variant="title-small"] {
-  font-size: var(--bui-font-size-6);
-  line-height: 140%;
-}
-
-.bui-Link[data-variant="title-x-small"] {
-  font-size: var(--bui-font-size-5);
-  line-height: 140%;
-}
-
-.bui-Link[data-variant="body-large"] {
-  font-size: var(--bui-font-size-4);
-  line-height: 140%;
-}
-
-.bui-Link[data-variant="body-medium"] {
-  font-size: var(--bui-font-size-3);
-  line-height: 140%;
-}
-
-.bui-Link[data-variant="body-small"] {
-  font-size: var(--bui-font-size-2);
-  line-height: 140%;
-}
-
-.bui-Link[data-variant="body-x-small"] {
-  font-size: var(--bui-font-size-1);
-  line-height: 140%;
-}
-
-.bui-Link[data-weight="regular"] {
-  font-weight: var(--bui-font-weight-regular);
-}
-
-.bui-Link[data-weight="bold"] {
-  font-weight: var(--bui-font-weight-bold);
-}
-
-.bui-Link[data-color="primary"] {
-  color: var(--bui-fg-primary);
-}
-
-.bui-Link[data-color="secondary"] {
-  color: var(--bui-fg-secondary);
-}
-
 .bui-MenuPositioner {
   z-index: 100;
   outline: 0;
@@ -10303,22 +10196,42 @@
   padding: 0;
 }
 
-.bui-Text[data-variant="body"] {
-  font-size: var(--bui-font-size-3);
+.bui-Text[data-variant="title-large"] {
+  font-size: var(--bui-font-size-8);
+  line-height: 140%;
+}
+
+.bui-Text[data-variant="title-medium"] {
+  font-size: var(--bui-font-size-7);
+  line-height: 140%;
+}
+
+.bui-Text[data-variant="title-small"] {
+  font-size: var(--bui-font-size-6);
+  line-height: 140%;
+}
+
+.bui-Text[data-variant="title-x-small"] {
+  font-size: var(--bui-font-size-5);
   line-height: 140%;
 }
 
-.bui-Text[data-variant="subtitle"] {
+.bui-Text[data-variant="body-large"] {
   font-size: var(--bui-font-size-4);
   line-height: 140%;
 }
 
-.bui-Text[data-variant="caption"] {
+.bui-Text[data-variant="body-medium"] {
+  font-size: var(--bui-font-size-3);
+  line-height: 140%;
+}
+
+.bui-Text[data-variant="body-small"] {
   font-size: var(--bui-font-size-2);
   line-height: 140%;
 }
 
-.bui-Text[data-variant="label"] {
+.bui-Text[data-variant="body-x-small"] {
   font-size: var(--bui-font-size-1);
   line-height: 140%;
 }
@@ -10357,6 +10270,10 @@
   overflow: hidden;
 }
 
+.bui-Text[data-as="span"], .bui-Text[data-as="label"], .bui-Text[data-as="strong"], .bui-Text[data-as="em"], .bui-Text[data-as="small"] {
+  display: inline-block;
+}
+
 .bui-TextField {
   font-family: var(--bui-font-regular);
   flex-direction: column;
@@ -10504,18 +10421,20 @@
 }
 
 .bui-Tooltip {
-  background: var(--bui-bg-surface-2);
+  background: var(--bui-bg-surface-1);
+  border: 1px solid var(--bui-gray-3);
   forced-color-adjust: none;
   padding: var(--bui-space-2) var(--bui-space-3);
   max-width: 240px;
   font-size: var(--bui-font-size-3);
   font-family: var(--bui-font-regular);
   color: var(--bui-fg-primary);
+  --tooltip-offset: var(--bui-space-3);
   border-radius: 4px;
   outline: none;
   transition: transform .2s, opacity .2s;
   transform: translate3d(0, 0, 0);
-  box-shadow: 0 8px 20px #0000001a;
+  box-shadow: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
 
   &[data-entering], &[data-exiting] {
     transform: var(--origin);
@@ -10523,41 +10442,76 @@
   }
 
   &[data-placement="top"] {
-    margin-bottom: var(--bui-space-2);
+    margin-bottom: var(--tooltip-offset);
     --origin: translateY(4px);
   }
 
+  &[data-placement="right"] {
+    margin-left: var(--tooltip-offset);
+    --origin: translateX(-4px);
+  }
+
   &[data-placement="bottom"] {
-    margin-top: var(--bui-space-2);
+    margin-top: var(--tooltip-offset);
     --origin: translateY(-4px);
+  }
 
-    & .bui-TooltipArrow svg {
-      transform: rotate(180deg);
-    }
+  &[data-placement="left"] {
+    margin-right: var(--tooltip-offset);
+    --origin: translateX(4px);
   }
+}
 
-  &[data-placement="right"] {
-    margin-left: var(--bui-space-2);
-    --origin: translateX(-4px);
+.bui-TooltipArrow {
+  & svg {
+    --tooltip-arrow-overlap: -2px;
+    display: block;
+
+    & path:first-child {
+      fill: var(--bui-bg-surface-1);
+    }
 
-    & .bui-TooltipArrow svg {
-      transform: rotate(90deg);
+    & path:nth-child(2) {
+      fill: var(--bui-gray-3);
     }
   }
 
-  &[data-placement="left"] {
-    margin-right: var(--bui-space-2);
-    --origin: translateX(4px);
+  &[data-placement="top"] svg {
+    margin-top: var(--tooltip-arrow-overlap);
+  }
 
-    & .bui-TooltipArrow svg {
-      transform: rotate(-90deg);
-    }
+  &[data-placement="bottom"] svg {
+    margin-bottom: var(--tooltip-arrow-overlap);
+    transform: rotate(180deg);
+  }
+
+  &[data-placement="right"] svg {
+    margin-right: var(--tooltip-arrow-overlap);
+    transform: rotate(90deg);
+  }
+
+  &[data-placement="left"] svg {
+    margin-left: var(--tooltip-arrow-overlap);
+    transform: rotate(-90deg);
   }
 }
 
-.bui-TooltipArrow svg {
-  fill: var(--bui-bg-surface-1);
-  display: block;
+[data-theme="dark"] {
+  & .bui-Tooltip {
+    background: var(--bui-bg-surface-2);
+    box-shadow: none;
+    border: 1px solid var(--bui-gray-4);
+  }
+
+  & .bui-TooltipArrow {
+    & svg path:first-child {
+      fill: var(--bui-bg-surface-2);
+    }
+
+    & svg path:nth-child(2) {
+      fill: var(--bui-gray-4);
+    }
+  }
 }
 
 .bui-ScrollAreaRoot {

package/dist/components/Checkbox/Checkbox.esm.js

@@ -6,8 +6,6 @@ import '../Box/Box.esm.js';
 import '../Grid/Grid.esm.js';
 import '../Flex/Flex.esm.js';
 import '../Container/Container.esm.js';
-import '../Text/Text.esm.js';
-import '../Heading/Heading.esm.js';
 import '../Avatar/Avatar.esm.js';
 import '../Button/Button.esm.js';
 import '../Card/Card.esm.js';
@@ -19,7 +17,9 @@ import { useStyles } from '../../hooks/useStyles.esm.js';
 import '@remixicon/react';
 import '../ButtonIcon/ButtonIcon.esm.js';
 import '../Menu/Menu.esm.js';
+import '../Text/Text.esm.js';
 import 'motion/react';
+import 'react-router-dom';
 import '../Tabs/Tabs.esm.js';
 import { Icon } from '../Icon/Icon.esm.js';
 import '../ButtonLink/ButtonLink.esm.js';

package/dist/components/DataTable/Pagination/DataTablePagination.esm.js

@@ -51,7 +51,7 @@ const DataTablePagination = forwardRef(
             }
           ) }),
           /* @__PURE__ */ jsxs("div", { className: "bui-DataTablePagination--right", children: [
-            /* @__PURE__ */ jsx(Text, { variant: "body", children: `${fromCount} - ${toCount} of ${rowCount}` }),
+            /* @__PURE__ */ jsx(Text, { variant: "body-medium", children: `${fromCount} - ${toCount} of ${rowCount}` }),
             /* @__PURE__ */ jsx(
               ButtonIcon,
               {

package/dist/components/DataTable/Pagination/DataTablePagination.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTablePagination.esm.js","sources":["../../../../src/components/DataTable/Pagination/DataTablePagination.tsx"],"sourcesContent":["/*\n * Copyright 2024 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\nimport { forwardRef } from 'react';\nimport { Text } from '../../Text';\nimport { DataTablePaginationProps } from './types';\nimport { ButtonIcon } from '../../ButtonIcon';\nimport clsx from 'clsx';\nimport { Select } from '../../Select';\nimport { useDataTable } from '../Root/DataTableRoot';\nimport { Icon } from '../../Icon';\n\n/** @public */\nconst DataTablePagination = forwardRef(\n  (\n    props: DataTablePaginationProps,\n    ref: React.ForwardedRef<HTMLDivElement>,\n  ) => {\n    const { className, ...rest } = props;\n    const { table } = useDataTable();\n    const pageIndex = table?.getState().pagination.pageIndex;\n    const pageSize = table?.getState().pagination.pageSize;\n    const rowCount = table?.getRowCount();\n    const fromCount = (pageIndex ?? 0) * (pageSize ?? 10) + 1;\n    const toCount = Math.min(\n      ((pageIndex ?? 0) + 1) * (pageSize ?? 10),\n      rowCount,\n    );\n\n    return (\n      <div\n        ref={ref}\n        style={{ minWidth: table?.getTotalSize() }}\n        className={clsx('bui-DataTablePagination', className)}\n        {...rest}\n      >\n        <div className=\"bui-DataTablePagination--left\">\n          {!table.options.manualPagination && (\n            <Select\n              name=\"pageSize\"\n              size=\"small\"\n              placeholder=\"Show 10 results\"\n              options={[\n                { label: 'Show 5 results', value: '5' },\n                { label: 'Show 10 results', value: '10' },\n                { label: 'Show 20 results', value: '20' },\n                { label: 'Show 30 results', value: '30' },\n                { label: 'Show 40 results', value: '40' },\n                { label: 'Show 50 results', value: '50' },\n              ]}\n              selectedKey={pageSize?.toString()}\n              onSelectionChange={value => {\n                table?.setPageSize(Number(value));\n              }}\n              className=\"bui-DataTablePagination--select\"\n            />\n          )}\n        </div>\n        <div className=\"bui-DataTablePagination--right\">\n          <Text variant=\"body\">{`${fromCount} - ${toCount} of ${rowCount}`}</Text>\n          <ButtonIcon\n            variant=\"secondary\"\n            size=\"small\"\n            onClick={() => table?.previousPage()}\n            isDisabled={!table?.getCanPreviousPage()}\n            icon={<Icon name=\"chevron-left\" />}\n          />\n          <ButtonIcon\n            variant=\"secondary\"\n            size=\"small\"\n            onClick={() => table?.nextPage()}\n            isDisabled={!table?.getCanNextPage()}\n            icon={<Icon name=\"chevron-right\" />}\n          />\n        </div>\n      </div>\n    );\n  },\n);\n\nDataTablePagination.displayName = 'DataTablePagination';\n\nexport { DataTablePagination };\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"DataTablePagination.esm.js","sources":["../../../../src/components/DataTable/Pagination/DataTablePagination.tsx"],"sourcesContent":["/*\n * Copyright 2024 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\nimport { forwardRef } from 'react';\nimport { Text } from '../../Text';\nimport { DataTablePaginationProps } from './types';\nimport { ButtonIcon } from '../../ButtonIcon';\nimport clsx from 'clsx';\nimport { Select } from '../../Select';\nimport { useDataTable } from '../Root/DataTableRoot';\nimport { Icon } from '../../Icon';\n\n/** @public */\nconst DataTablePagination = forwardRef(\n  (\n    props: DataTablePaginationProps,\n    ref: React.ForwardedRef<HTMLDivElement>,\n  ) => {\n    const { className, ...rest } = props;\n    const { table } = useDataTable();\n    const pageIndex = table?.getState().pagination.pageIndex;\n    const pageSize = table?.getState().pagination.pageSize;\n    const rowCount = table?.getRowCount();\n    const fromCount = (pageIndex ?? 0) * (pageSize ?? 10) + 1;\n    const toCount = Math.min(\n      ((pageIndex ?? 0) + 1) * (pageSize ?? 10),\n      rowCount,\n    );\n\n    return (\n      <div\n        ref={ref}\n        style={{ minWidth: table?.getTotalSize() }}\n        className={clsx('bui-DataTablePagination', className)}\n        {...rest}\n      >\n        <div className=\"bui-DataTablePagination--left\">\n          {!table.options.manualPagination && (\n            <Select\n              name=\"pageSize\"\n              size=\"small\"\n              placeholder=\"Show 10 results\"\n              options={[\n                { label: 'Show 5 results', value: '5' },\n                { label: 'Show 10 results', value: '10' },\n                { label: 'Show 20 results', value: '20' },\n                { label: 'Show 30 results', value: '30' },\n                { label: 'Show 40 results', value: '40' },\n                { label: 'Show 50 results', value: '50' },\n              ]}\n              selectedKey={pageSize?.toString()}\n              onSelectionChange={value => {\n                table?.setPageSize(Number(value));\n              }}\n              className=\"bui-DataTablePagination--select\"\n            />\n          )}\n        </div>\n        <div className=\"bui-DataTablePagination--right\">\n          <Text variant=\"body-medium\">{`${fromCount} - ${toCount} of ${rowCount}`}</Text>\n          <ButtonIcon\n            variant=\"secondary\"\n            size=\"small\"\n            onClick={() => table?.previousPage()}\n            isDisabled={!table?.getCanPreviousPage()}\n            icon={<Icon name=\"chevron-left\" />}\n          />\n          <ButtonIcon\n            variant=\"secondary\"\n            size=\"small\"\n            onClick={() => table?.nextPage()}\n            isDisabled={!table?.getCanNextPage()}\n            icon={<Icon name=\"chevron-right\" />}\n          />\n        </div>\n      </div>\n    );\n  },\n);\n\nDataTablePagination.displayName = 'DataTablePagination';\n\nexport { DataTablePagination };\n"],"names":[],"mappings":"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"}

package/dist/components/Header/Header.esm.js

@@ -4,7 +4,16 @@ import { Tabs, TabList, Tab } from '../Tabs/Tabs.esm.js';
 import { useStyles } from '../../hooks/useStyles.esm.js';
 
 const Header = (props) => {
-  const { tabs, icon, title, menuItems, breadcrumbs, customActions } = props;
+  const {
+    tabs,
+    icon,
+    title,
+    titleLink,
+    menuItems,
+    breadcrumbs,
+    customActions,
+    onTabSelectionChange
+  } = props;
   const { classNames } = useStyles("Header");
   const hasTabs = tabs && tabs.length > 0;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -13,13 +22,23 @@ const Header = (props) => {
       {
         icon,
         title,
+        titleLink,
         menuItems,
         breadcrumbs,
         customActions,
         hasTabs
       }
     ),
-    tabs && /* @__PURE__ */ jsx("div", { className: classNames.tabsWrapper, children: /* @__PURE__ */ jsx(Tabs, { children: /* @__PURE__ */ jsx(TabList, { children: tabs?.map((tab) => /* @__PURE__ */ jsx(Tab, { id: tab.id, href: tab.href, children: tab.label }, tab.id)) }) }) })
+    tabs && /* @__PURE__ */ jsx("div", { className: classNames.tabsWrapper, children: /* @__PURE__ */ jsx(Tabs, { onSelectionChange: onTabSelectionChange, children: /* @__PURE__ */ jsx(TabList, { children: tabs?.map((tab) => /* @__PURE__ */ jsx(
+      Tab,
+      {
+        id: tab.id,
+        href: tab.href,
+        matchStrategy: tab.matchStrategy,
+        children: tab.label
+      },
+      tab.id
+    )) }) }) })
   ] });
 };
 

package/dist/components/Header/Header.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"Header.esm.js","sources":["../../../src/components/Header/Header.tsx"],"sourcesContent":["/*\n * Copyright 2024 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\nimport type { HeaderProps } from './types';\nimport { HeaderToolbar } from './HeaderToolbar';\nimport { Tabs, TabList, Tab } from '../Tabs';\nimport { useStyles } from '../../hooks/useStyles';\nimport { type NavigateOptions } from 'react-router-dom';\n\ndeclare module 'react-aria-components' {\n  interface RouterConfig {\n    routerOptions: NavigateOptions;\n  }\n}\n\n/**\n * A component that renders a toolbar.\n *\n * @public\n */\nexport const Header = (props: HeaderProps) => {\n  const { tabs, icon, title, menuItems, breadcrumbs, customActions } = props;\n\n  const { classNames } = useStyles('Header');\n\n  const hasTabs = tabs && tabs.length > 0;\n\n  return (\n    <>\n      <HeaderToolbar\n        icon={icon}\n        title={title}\n        menuItems={menuItems}\n        breadcrumbs={breadcrumbs}\n        customActions={customActions}\n        hasTabs={hasTabs}\n      />\n      {tabs && (\n        <div className={classNames.tabsWrapper}>\n          <Tabs>\n            <TabList>\n              {tabs?.map(tab => (\n                <Tab key={tab.id} id={tab.id} href={tab.href}>\n                  {tab.label}\n                </Tab>\n              ))}\n            </TabList>\n          </Tabs>\n        </div>\n      )}\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;;AAiCa,MAAA,MAAA,GAAS,CAAC,KAAuB,KAAA;AAC5C,EAAA,MAAM,EAAE,IAAM,EAAA,IAAA,EAAM,OAAO,SAAW,EAAA,WAAA,EAAa,eAAkB,GAAA,KAAA;AAErE,EAAA,MAAM,EAAE,UAAA,EAAe,GAAA,SAAA,CAAU,QAAQ,CAAA;AAEzC,EAAM,MAAA,OAAA,GAAU,IAAQ,IAAA,IAAA,CAAK,MAAS,GAAA,CAAA;AAEtC,EAAA,uBAEI,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,aAAA;AAAA,MAAA;AAAA,QACC,IAAA;AAAA,QACA,KAAA;AAAA,QACA,SAAA;AAAA,QACA,WAAA;AAAA,QACA,aAAA;AAAA,QACA;AAAA;AAAA,KACF;AAAA,IACC,IACC,oBAAA,GAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,UAAW,CAAA,WAAA,EACzB,QAAC,kBAAA,GAAA,CAAA,IAAA,EAAA,EACC,QAAC,kBAAA,GAAA,CAAA,OAAA,EAAA,EACE,QAAM,EAAA,IAAA,EAAA,GAAA,CAAI,CACT,GAAA,qBAAA,GAAA,CAAC,GAAiB,EAAA,EAAA,EAAA,EAAI,GAAI,CAAA,EAAA,EAAI,IAAM,EAAA,GAAA,CAAI,IACrC,EAAA,QAAA,EAAA,GAAA,CAAI,KADG,EAAA,EAAA,GAAA,CAAI,EAEd,CACD,CACH,EAAA,CAAA,EACF,CACF,EAAA;AAAA,GAEJ,EAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"Header.esm.js","sources":["../../../src/components/Header/Header.tsx"],"sourcesContent":["/*\n * Copyright 2024 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\nimport type { HeaderProps } from './types';\nimport { HeaderToolbar } from './HeaderToolbar';\nimport { Tabs, TabList, Tab } from '../Tabs';\nimport { useStyles } from '../../hooks/useStyles';\nimport { type NavigateOptions } from 'react-router-dom';\n\ndeclare module 'react-aria-components' {\n  interface RouterConfig {\n    routerOptions: NavigateOptions;\n  }\n}\n\n/**\n * A component that renders a toolbar.\n *\n * @public\n */\nexport const Header = (props: HeaderProps) => {\n  const {\n    tabs,\n    icon,\n    title,\n    titleLink,\n    menuItems,\n    breadcrumbs,\n    customActions,\n    onTabSelectionChange,\n  } = props;\n\n  const { classNames } = useStyles('Header');\n\n  const hasTabs = tabs && tabs.length > 0;\n\n  return (\n    <>\n      <HeaderToolbar\n        icon={icon}\n        title={title}\n        titleLink={titleLink}\n        menuItems={menuItems}\n        breadcrumbs={breadcrumbs}\n        customActions={customActions}\n        hasTabs={hasTabs}\n      />\n      {tabs && (\n        <div className={classNames.tabsWrapper}>\n          <Tabs onSelectionChange={onTabSelectionChange}>\n            <TabList>\n              {tabs?.map(tab => (\n                <Tab\n                  key={tab.id}\n                  id={tab.id}\n                  href={tab.href}\n                  matchStrategy={tab.matchStrategy}\n                >\n                  {tab.label}\n                </Tab>\n              ))}\n            </TabList>\n          </Tabs>\n        </div>\n      )}\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;;AAiCa,MAAA,MAAA,GAAS,CAAC,KAAuB,KAAA;AAC5C,EAAM,MAAA;AAAA,IACJ,IAAA;AAAA,IACA,IAAA;AAAA,IACA,KAAA;AAAA,IACA,SAAA;AAAA,IACA,SAAA;AAAA,IACA,WAAA;AAAA,IACA,aAAA;AAAA,IACA;AAAA,GACE,GAAA,KAAA;AAEJ,EAAA,MAAM,EAAE,UAAA,EAAe,GAAA,SAAA,CAAU,QAAQ,CAAA;AAEzC,EAAM,MAAA,OAAA,GAAU,IAAQ,IAAA,IAAA,CAAK,MAAS,GAAA,CAAA;AAEtC,EAAA,uBAEI,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,aAAA;AAAA,MAAA;AAAA,QACC,IAAA;AAAA,QACA,KAAA;AAAA,QACA,SAAA;AAAA,QACA,SAAA;AAAA,QACA,WAAA;AAAA,QACA,aAAA;AAAA,QACA;AAAA;AAAA,KACF;AAAA,IACC,IACC,oBAAA,GAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,WAAW,WACzB,EAAA,QAAA,kBAAA,GAAA,CAAC,IAAK,EAAA,EAAA,iBAAA,EAAmB,oBACvB,EAAA,QAAA,kBAAA,GAAA,CAAC,OACE,EAAA,EAAA,QAAA,EAAA,IAAA,EAAM,IAAI,CACT,GAAA,qBAAA,GAAA;AAAA,MAAC,GAAA;AAAA,MAAA;AAAA,QAEC,IAAI,GAAI,CAAA,EAAA;AAAA,QACR,MAAM,GAAI,CAAA,IAAA;AAAA,QACV,eAAe,GAAI,CAAA,aAAA;AAAA,QAElB,QAAI,EAAA,GAAA,CAAA;AAAA,OAAA;AAAA,MALA,GAAI,CAAA;AAAA,KAOZ,CACH,EAAA,CAAA,EACF,CACF,EAAA;AAAA,GAEJ,EAAA,CAAA;AAEJ;;;;"}

package/dist/components/Header/HeaderToolbar.esm.js

@@ -1,5 +1,5 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { Link } from 'react-aria-components';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { RouterProvider, Link } from 'react-aria-components';
 import { useStyles } from '../../hooks/useStyles.esm.js';
 import { useRef, useState, useEffect } from 'react';
 import { RiShapesLine, RiArrowRightSLine, RiMore2Line } from '@remixicon/react';
@@ -7,10 +7,20 @@ import { ButtonIcon } from '../ButtonIcon/ButtonIcon.esm.js';
 import { Menu } from '../Menu/Menu.esm.js';
 import { Text } from '../Text/Text.esm.js';
 import { useScroll, useTransform, motion } from 'motion/react';
+import { useNavigate, useHref } from 'react-router-dom';
 
 const HeaderToolbar = (props) => {
-  const { icon, title, menuItems, breadcrumbs, customActions, hasTabs } = props;
+  const {
+    icon,
+    title,
+    titleLink,
+    menuItems,
+    breadcrumbs,
+    customActions,
+    hasTabs
+  } = props;
   const { classNames } = useStyles("Header");
+  let navigate = useNavigate();
   const { scrollY } = useScroll();
   const breadcrumbOpacity = useTransform(scrollY, [80, 120], [0, 1]);
   const toolbarWrapperRef = useRef(null);
@@ -43,12 +53,13 @@ const HeaderToolbar = (props) => {
       resizeObserver.disconnect();
     };
   }, []);
-  return /* @__PURE__ */ jsx("div", { className: classNames.toolbar, "data-has-tabs": hasTabs, children: /* @__PURE__ */ jsxs("div", { className: classNames.toolbarWrapper, ref: toolbarWrapperRef, children: [
+  const titleContent = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { className: classNames.toolbarIcon, children: icon || /* @__PURE__ */ jsx(RiShapesLine, {}) }),
+    /* @__PURE__ */ jsx(Text, { variant: "body-medium", children: title || "Your plugin" })
+  ] });
+  return /* @__PURE__ */ jsx(RouterProvider, { navigate, useHref, children: /* @__PURE__ */ jsx("div", { className: classNames.toolbar, "data-has-tabs": hasTabs, children: /* @__PURE__ */ jsxs("div", { className: classNames.toolbarWrapper, ref: toolbarWrapperRef, children: [
     /* @__PURE__ */ jsxs("div", { className: classNames.toolbarContent, ref: toolbarContentRef, children: [
-      /* @__PURE__ */ jsxs("div", { className: classNames.toolbarName, children: [
-        /* @__PURE__ */ jsx("div", { className: classNames.toolbarIcon, children: icon || /* @__PURE__ */ jsx(RiShapesLine, {}) }),
-        /* @__PURE__ */ jsx(Text, { variant: "body", children: title || "Your plugin" })
-      ] }),
+      titleLink ? /* @__PURE__ */ jsx(Link, { className: classNames.toolbarName, href: titleLink, children: titleContent }) : /* @__PURE__ */ jsx("div", { className: classNames.toolbarName, children: titleContent }),
       breadcrumbs && /* @__PURE__ */ jsxs(
         motion.div,
         {
@@ -114,7 +125,7 @@ const HeaderToolbar = (props) => {
         )) }) }) })
       ] })
     ] })
-  ] }) });
+  ] }) }) });
 };
 
 export { HeaderToolbar };

package/dist/components/Header/HeaderToolbar.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"HeaderToolbar.esm.js","sources":["../../../src/components/Header/HeaderToolbar.tsx"],"sourcesContent":["/*\n * Copyright 2024 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\nimport { Link } from 'react-aria-components';\nimport { useStyles } from '../../hooks/useStyles';\nimport { useRef, useState, useEffect } from 'react';\nimport { RiArrowRightSLine, RiMore2Line, RiShapesLine } from '@remixicon/react';\nimport type { HeaderToolbarProps } from './types';\nimport { ButtonIcon } from '../ButtonIcon';\nimport { Menu } from '../Menu';\nimport { Text } from '../Text';\nimport { motion, useScroll, useTransform } from 'motion/react';\n\n/**\n * A component that renders a toolbar.\n *\n * @internal\n */\nexport const HeaderToolbar = (props: HeaderToolbarProps) => {\n  const { icon, title, menuItems, breadcrumbs, customActions, hasTabs } = props;\n  const { classNames } = useStyles('Header');\n\n  const { scrollY } = useScroll();\n  const breadcrumbOpacity = useTransform(scrollY, [80, 120], [0, 1]);\n\n  // Refs for collision detection\n  const toolbarWrapperRef = useRef<HTMLDivElement>(null);\n  const toolbarContentRef = useRef<HTMLDivElement>(null);\n  const toolbarControlsRef = useRef<HTMLDivElement>(null);\n\n  // State for breadcrumb visibility\n  const [showBreadcrumbs, setShowBreadcrumbs] = useState(true);\n\n  // Set up resize observer\n  useEffect(() => {\n    const wrapper = toolbarWrapperRef.current;\n    if (!wrapper) return;\n\n    const resizeObserver = new ResizeObserver(() => {\n      const wrapper = toolbarWrapperRef.current;\n      const content = toolbarContentRef.current;\n      const options = toolbarControlsRef.current;\n\n      if (!wrapper || !content) return;\n\n      // Get dimensions\n      const wrapperRect = wrapper.getBoundingClientRect();\n      const wrapperWidth = wrapperRect.width;\n      const wrapperPadding = 24; // 12px on each side (var(--bui-space-3))\n      const availableWidth = wrapperWidth - wrapperPadding;\n\n      // Calculate required width for content\n      const contentRect = content.getBoundingClientRect();\n      const contentWidth = contentRect?.width || 0;\n\n      // Calculate options width (if exists)\n      const optionsRect = options?.getBoundingClientRect();\n      const optionsWidth = optionsRect?.width || 0;\n\n      // Check if we need to hide breadcrumbs\n      const shouldShowBreadcrumbs =\n        contentWidth + optionsWidth + 32 <= availableWidth;\n\n      // Only update state if the value actually changed to prevent flickering\n      setShowBreadcrumbs(prev =>\n        prev !== shouldShowBreadcrumbs ? shouldShowBreadcrumbs : prev,\n      );\n    });\n\n    resizeObserver.observe(wrapper);\n\n    return () => {\n      resizeObserver.disconnect();\n    };\n  }, []);\n\n  return (\n    <div className={classNames.toolbar} data-has-tabs={hasTabs}>\n      <div className={classNames.toolbarWrapper} ref={toolbarWrapperRef}>\n        <div className={classNames.toolbarContent} ref={toolbarContentRef}>\n          <div className={classNames.toolbarName}>\n            <div className={classNames.toolbarIcon}>\n              {icon || <RiShapesLine />}\n            </div>\n            <Text variant=\"body\">{title || 'Your plugin'}</Text>\n          </div>\n          {breadcrumbs && (\n            <motion.div\n              className={classNames.breadcrumbs}\n              style={{\n                opacity: breadcrumbOpacity,\n                visibility: showBreadcrumbs ? 'visible' : 'hidden',\n              }}\n            >\n              <RiArrowRightSLine\n                size={16}\n                className={classNames.breadcrumbSeparator}\n              />\n              {breadcrumbs.map((breadcrumb, index) => (\n                <div key={breadcrumb.label} className={classNames.breadcrumb}>\n                  <Link\n                    href={breadcrumb.href}\n                    className={classNames.breadcrumbLink}\n                    data-active={index === breadcrumbs.length - 1}\n                  >\n                    {breadcrumb.label}\n                  </Link>\n                  {index < breadcrumbs.length - 1 && (\n                    <RiArrowRightSLine\n                      size={16}\n                      className={classNames.breadcrumbSeparator}\n                    />\n                  )}\n                </div>\n              ))}\n            </motion.div>\n          )}\n        </div>\n        <div className={classNames.toolbarControls} ref={toolbarControlsRef}>\n          {customActions}\n          {menuItems && (\n            <Menu.Root>\n              <Menu.Trigger\n                render={props => (\n                  <ButtonIcon\n                    size=\"small\"\n                    icon={<RiMore2Line />}\n                    variant=\"tertiary\"\n                    {...props}\n                  />\n                )}\n              />\n              <Menu.Portal>\n                <Menu.Positioner sideOffset={4} align=\"end\">\n                  <Menu.Popup>\n                    {menuItems.map(option => (\n                      <Menu.Item\n                        key={option.value}\n                        onClick={() => option.onClick?.()}\n                      >\n                        {option.label}\n                      </Menu.Item>\n                    ))}\n                  </Menu.Popup>\n                </Menu.Positioner>\n              </Menu.Portal>\n            </Menu.Root>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"names":["wrapper","props"],"mappings":"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"}
+{"version":3,"file":"HeaderToolbar.esm.js","sources":["../../../src/components/Header/HeaderToolbar.tsx"],"sourcesContent":["/*\n * Copyright 2024 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\nimport { Link, RouterProvider } from 'react-aria-components';\nimport { useStyles } from '../../hooks/useStyles';\nimport { useRef, useState, useEffect } from 'react';\nimport { RiArrowRightSLine, RiMore2Line, RiShapesLine } from '@remixicon/react';\nimport type { HeaderToolbarProps } from './types';\nimport { ButtonIcon } from '../ButtonIcon';\nimport { Menu } from '../Menu';\nimport { Text } from '../Text';\nimport { motion, useScroll, useTransform } from 'motion/react';\nimport { useNavigate, useHref } from 'react-router-dom';\n\n/**\n * A component that renders a toolbar.\n *\n * @internal\n */\nexport const HeaderToolbar = (props: HeaderToolbarProps) => {\n  const {\n    icon,\n    title,\n    titleLink,\n    menuItems,\n    breadcrumbs,\n    customActions,\n    hasTabs,\n  } = props;\n  const { classNames } = useStyles('Header');\n  let navigate = useNavigate();\n  const { scrollY } = useScroll();\n  const breadcrumbOpacity = useTransform(scrollY, [80, 120], [0, 1]);\n\n  // Refs for collision detection\n  const toolbarWrapperRef = useRef<HTMLDivElement>(null);\n  const toolbarContentRef = useRef<HTMLDivElement>(null);\n  const toolbarControlsRef = useRef<HTMLDivElement>(null);\n\n  // State for breadcrumb visibility\n  const [showBreadcrumbs, setShowBreadcrumbs] = useState(true);\n\n  // Set up resize observer\n  useEffect(() => {\n    const wrapper = toolbarWrapperRef.current;\n    if (!wrapper) return;\n\n    const resizeObserver = new ResizeObserver(() => {\n      const wrapper = toolbarWrapperRef.current;\n      const content = toolbarContentRef.current;\n      const options = toolbarControlsRef.current;\n\n      if (!wrapper || !content) return;\n\n      // Get dimensions\n      const wrapperRect = wrapper.getBoundingClientRect();\n      const wrapperWidth = wrapperRect.width;\n      const wrapperPadding = 24; // 12px on each side (var(--bui-space-3))\n      const availableWidth = wrapperWidth - wrapperPadding;\n\n      // Calculate required width for content\n      const contentRect = content.getBoundingClientRect();\n      const contentWidth = contentRect?.width || 0;\n\n      // Calculate options width (if exists)\n      const optionsRect = options?.getBoundingClientRect();\n      const optionsWidth = optionsRect?.width || 0;\n\n      // Check if we need to hide breadcrumbs\n      const shouldShowBreadcrumbs =\n        contentWidth + optionsWidth + 32 <= availableWidth;\n\n      // Only update state if the value actually changed to prevent flickering\n      setShowBreadcrumbs(prev =>\n        prev !== shouldShowBreadcrumbs ? shouldShowBreadcrumbs : prev,\n      );\n    });\n\n    resizeObserver.observe(wrapper);\n\n    return () => {\n      resizeObserver.disconnect();\n    };\n  }, []);\n\n  const titleContent = (\n    <>\n      <div className={classNames.toolbarIcon}>{icon || <RiShapesLine />}</div>\n      <Text variant=\"body-medium\">{title || 'Your plugin'}</Text>\n    </>\n  );\n\n  return (\n    <RouterProvider navigate={navigate} useHref={useHref}>\n      <div className={classNames.toolbar} data-has-tabs={hasTabs}>\n        <div className={classNames.toolbarWrapper} ref={toolbarWrapperRef}>\n          <div className={classNames.toolbarContent} ref={toolbarContentRef}>\n            {titleLink ? (\n              <Link className={classNames.toolbarName} href={titleLink}>\n                {titleContent}\n              </Link>\n            ) : (\n              <div className={classNames.toolbarName}>{titleContent}</div>\n            )}\n            {breadcrumbs && (\n              <motion.div\n                className={classNames.breadcrumbs}\n                style={{\n                  opacity: breadcrumbOpacity,\n                  visibility: showBreadcrumbs ? 'visible' : 'hidden',\n                }}\n              >\n                <RiArrowRightSLine\n                  size={16}\n                  className={classNames.breadcrumbSeparator}\n                />\n                {breadcrumbs.map((breadcrumb, index) => (\n                  <div key={breadcrumb.label} className={classNames.breadcrumb}>\n                    <Link\n                      href={breadcrumb.href}\n                      className={classNames.breadcrumbLink}\n                      data-active={index === breadcrumbs.length - 1}\n                    >\n                      {breadcrumb.label}\n                    </Link>\n                    {index < breadcrumbs.length - 1 && (\n                      <RiArrowRightSLine\n                        size={16}\n                        className={classNames.breadcrumbSeparator}\n                      />\n                    )}\n                  </div>\n                ))}\n              </motion.div>\n            )}\n          </div>\n          <div className={classNames.toolbarControls} ref={toolbarControlsRef}>\n            {customActions}\n            {menuItems && (\n              <Menu.Root>\n                <Menu.Trigger\n                  render={props => (\n                    <ButtonIcon\n                      size=\"small\"\n                      icon={<RiMore2Line />}\n                      variant=\"tertiary\"\n                      {...props}\n                    />\n                  )}\n                />\n                <Menu.Portal>\n                  <Menu.Positioner sideOffset={4} align=\"end\">\n                    <Menu.Popup>\n                      {menuItems.map(option => (\n                        <Menu.Item\n                          key={option.value}\n                          onClick={() => option.onClick?.()}\n                        >\n                          {option.label}\n                        </Menu.Item>\n                      ))}\n                    </Menu.Popup>\n                  </Menu.Positioner>\n                </Menu.Portal>\n              </Menu.Root>\n            )}\n          </div>\n        </div>\n      </div>\n    </RouterProvider>\n  );\n};\n"],"names":["wrapper","props"],"mappings":"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"}

package/dist/components/HeaderPage/HeaderPage.esm.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { Heading } from '../Heading/Heading.esm.js';
 import { Menu } from '../Menu/Menu.esm.js';
+import { Text } from '../Text/Text.esm.js';
 import { ButtonIcon } from '../ButtonIcon/ButtonIcon.esm.js';
 import { RiMore2Line } from '@remixicon/react';
 import { Tabs, TabList, Tab } from '../Tabs/Tabs.esm.js';
@@ -11,7 +11,7 @@ const HeaderPage = (props) => {
   const { classNames } = useStyles("HeaderPage");
   return /* @__PURE__ */ jsxs("div", { className: classNames.root, children: [
     /* @__PURE__ */ jsxs("div", { className: classNames.content, children: [
-      /* @__PURE__ */ jsx(Heading, { variant: "title4", children: title }),
+      /* @__PURE__ */ jsx(Text, { variant: "title-small", weight: "bold", children: title }),
       /* @__PURE__ */ jsxs("div", { className: classNames.controls, children: [
         customActions,
         menuItems && /* @__PURE__ */ jsxs(Menu.Root, { children: [
@@ -40,7 +40,16 @@ const HeaderPage = (props) => {
         ] })
       ] })
     ] }),
-    tabs && /* @__PURE__ */ jsx("div", { className: classNames.tabsWrapper, children: /* @__PURE__ */ jsx(Tabs, { children: /* @__PURE__ */ jsx(TabList, { children: tabs.map((tab) => /* @__PURE__ */ jsx(Tab, { id: tab.id, href: tab.href, children: tab.label }, tab.id)) }) }) })
+    tabs && /* @__PURE__ */ jsx("div", { className: classNames.tabsWrapper, children: /* @__PURE__ */ jsx(Tabs, { children: /* @__PURE__ */ jsx(TabList, { children: tabs.map((tab) => /* @__PURE__ */ jsx(
+      Tab,
+      {
+        id: tab.id,
+        href: tab.href,
+        matchStrategy: tab.matchStrategy,
+        children: tab.label
+      },
+      tab.id
+    )) }) }) })
   ] });
 };
 

package/dist/components/HeaderPage/HeaderPage.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"HeaderPage.esm.js","sources":["../../../src/components/HeaderPage/HeaderPage.tsx"],"sourcesContent":["/*\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\nimport type { HeaderPageProps } from './types';\nimport { Heading } from '../Heading';\nimport { Menu } from '../Menu';\nimport { ButtonIcon } from '../ButtonIcon';\nimport { RiMore2Line } from '@remixicon/react';\nimport { Tabs, TabList, Tab } from '../Tabs';\nimport { useStyles } from '../../hooks/useStyles';\n\n/**\n * A component that renders a header page.\n *\n * @public\n */\nexport const HeaderPage = (props: HeaderPageProps) => {\n  const { title, menuItems, tabs, customActions } = props;\n  const { classNames } = useStyles('HeaderPage');\n\n  return (\n    <div className={classNames.root}>\n      <div className={classNames.content}>\n        <Heading variant=\"title4\">{title}</Heading>\n        <div className={classNames.controls}>\n          {customActions}\n          {menuItems && (\n            <Menu.Root>\n              <Menu.Trigger\n                render={props => (\n                  <ButtonIcon\n                    {...props}\n                    size=\"small\"\n                    icon={<RiMore2Line />}\n                    variant=\"tertiary\"\n                  />\n                )}\n              />\n              <Menu.Portal>\n                <Menu.Positioner sideOffset={4} align=\"end\">\n                  <Menu.Popup>\n                    {menuItems.map(menuItem => (\n                      <Menu.Item\n                        key={menuItem.value}\n                        onClick={() => menuItem.onClick?.()}\n                      >\n                        {menuItem.label}\n                      </Menu.Item>\n                    ))}\n                  </Menu.Popup>\n                </Menu.Positioner>\n              </Menu.Portal>\n            </Menu.Root>\n          )}\n        </div>\n      </div>\n      {tabs && (\n        <div className={classNames.tabsWrapper}>\n          <Tabs>\n            <TabList>\n              {tabs.map(tab => (\n                <Tab key={tab.id} id={tab.id} href={tab.href}>\n                  {tab.label}\n                </Tab>\n              ))}\n            </TabList>\n          </Tabs>\n        </div>\n      )}\n    </div>\n  );\n};\n"],"names":["props"],"mappings":";;;;;;;;AA6Ba,MAAA,UAAA,GAAa,CAAC,KAA2B,KAAA;AACpD,EAAA,MAAM,EAAE,KAAA,EAAO,SAAW,EAAA,IAAA,EAAM,eAAkB,GAAA,KAAA;AAClD,EAAA,MAAM,EAAE,UAAA,EAAe,GAAA,SAAA,CAAU,YAAY,CAAA;AAE7C,EAAA,uBACG,IAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,UAAA,CAAW,IACzB,EAAA,QAAA,EAAA;AAAA,oBAAC,IAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,UAAA,CAAW,OACzB,EAAA,QAAA,EAAA;AAAA,sBAAC,GAAA,CAAA,OAAA,EAAA,EAAQ,OAAQ,EAAA,QAAA,EAAU,QAAM,EAAA,KAAA,EAAA,CAAA;AAAA,sBAChC,IAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,UAAA,CAAW,QACxB,EAAA,QAAA,EAAA;AAAA,QAAA,aAAA;AAAA,QACA,SACC,oBAAA,IAAA,CAAC,IAAK,CAAA,IAAA,EAAL,EACC,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,IAAK,CAAA,OAAA;AAAA,YAAL;AAAA,cACC,MAAA,EAAQ,CAAAA,MACN,qBAAA,GAAA;AAAA,gBAAC,UAAA;AAAA,gBAAA;AAAA,kBACE,GAAGA,MAAAA;AAAA,kBACJ,IAAK,EAAA,OAAA;AAAA,kBACL,IAAA,sBAAO,WAAY,EAAA,EAAA,CAAA;AAAA,kBACnB,OAAQ,EAAA;AAAA;AAAA;AACV;AAAA,WAEJ;AAAA,8BACC,IAAK,CAAA,MAAA,EAAL,EACC,QAAC,kBAAA,GAAA,CAAA,IAAA,CAAK,YAAL,EAAgB,UAAA,EAAY,CAAG,EAAA,KAAA,EAAM,OACpC,QAAC,kBAAA,GAAA,CAAA,IAAA,CAAK,OAAL,EACE,QAAA,EAAA,SAAA,CAAU,IAAI,CACb,QAAA,qBAAA,GAAA;AAAA,YAAC,IAAK,CAAA,IAAA;AAAA,YAAL;AAAA,cAEC,OAAA,EAAS,MAAM,QAAA,CAAS,OAAU,IAAA;AAAA,cAEjC,QAAS,EAAA,QAAA,CAAA;AAAA,aAAA;AAAA,YAHL,QAAS,CAAA;AAAA,WAKjB,CACH,EAAA,CAAA,EACF,CACF,EAAA;AAAA,SACF,EAAA;AAAA,OAEJ,EAAA;AAAA,KACF,EAAA,CAAA;AAAA,IACC,IACC,oBAAA,GAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,UAAW,CAAA,WAAA,EACzB,QAAC,kBAAA,GAAA,CAAA,IAAA,EAAA,EACC,QAAC,kBAAA,GAAA,CAAA,OAAA,EAAA,EACE,QAAK,EAAA,IAAA,CAAA,GAAA,CAAI,CACR,GAAA,qBAAA,GAAA,CAAC,GAAiB,EAAA,EAAA,EAAA,EAAI,GAAI,CAAA,EAAA,EAAI,IAAM,EAAA,GAAA,CAAI,IACrC,EAAA,QAAA,EAAA,GAAA,CAAI,KADG,EAAA,EAAA,GAAA,CAAI,EAEd,CACD,CACH,EAAA,CAAA,EACF,CACF,EAAA;AAAA,GAEJ,EAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"HeaderPage.esm.js","sources":["../../../src/components/HeaderPage/HeaderPage.tsx"],"sourcesContent":["/*\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\nimport type { HeaderPageProps } from './types';\nimport { Menu } from '../Menu';\nimport { Text } from '../Text';\nimport { ButtonIcon } from '../ButtonIcon';\nimport { RiMore2Line } from '@remixicon/react';\nimport { Tabs, TabList, Tab } from '../Tabs';\nimport { useStyles } from '../../hooks/useStyles';\n\n/**\n * A component that renders a header page.\n *\n * @public\n */\nexport const HeaderPage = (props: HeaderPageProps) => {\n  const { title, menuItems, tabs, customActions } = props;\n  const { classNames } = useStyles('HeaderPage');\n\n  return (\n    <div className={classNames.root}>\n      <div className={classNames.content}>\n        <Text variant=\"title-small\" weight=\"bold\">\n          {title}\n        </Text>\n        <div className={classNames.controls}>\n          {customActions}\n          {menuItems && (\n            <Menu.Root>\n              <Menu.Trigger\n                render={props => (\n                  <ButtonIcon\n                    {...props}\n                    size=\"small\"\n                    icon={<RiMore2Line />}\n                    variant=\"tertiary\"\n                  />\n                )}\n              />\n              <Menu.Portal>\n                <Menu.Positioner sideOffset={4} align=\"end\">\n                  <Menu.Popup>\n                    {menuItems.map(menuItem => (\n                      <Menu.Item\n                        key={menuItem.value}\n                        onClick={() => menuItem.onClick?.()}\n                      >\n                        {menuItem.label}\n                      </Menu.Item>\n                    ))}\n                  </Menu.Popup>\n                </Menu.Positioner>\n              </Menu.Portal>\n            </Menu.Root>\n          )}\n        </div>\n      </div>\n      {tabs && (\n        <div className={classNames.tabsWrapper}>\n          <Tabs>\n            <TabList>\n              {tabs.map(tab => (\n                <Tab\n                  key={tab.id}\n                  id={tab.id}\n                  href={tab.href}\n                  matchStrategy={tab.matchStrategy}\n                >\n                  {tab.label}\n                </Tab>\n              ))}\n            </TabList>\n          </Tabs>\n        </div>\n      )}\n    </div>\n  );\n};\n"],"names":["props"],"mappings":";;;;;;;;AA6Ba,MAAA,UAAA,GAAa,CAAC,KAA2B,KAAA;AACpD,EAAA,MAAM,EAAE,KAAA,EAAO,SAAW,EAAA,IAAA,EAAM,eAAkB,GAAA,KAAA;AAClD,EAAA,MAAM,EAAE,UAAA,EAAe,GAAA,SAAA,CAAU,YAAY,CAAA;AAE7C,EAAA,uBACG,IAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,UAAA,CAAW,IACzB,EAAA,QAAA,EAAA;AAAA,oBAAC,IAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,UAAA,CAAW,OACzB,EAAA,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,IAAK,EAAA,EAAA,OAAA,EAAQ,aAAc,EAAA,MAAA,EAAO,QAChC,QACH,EAAA,KAAA,EAAA,CAAA;AAAA,sBACC,IAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,UAAA,CAAW,QACxB,EAAA,QAAA,EAAA;AAAA,QAAA,aAAA;AAAA,QACA,SACC,oBAAA,IAAA,CAAC,IAAK,CAAA,IAAA,EAAL,EACC,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,IAAK,CAAA,OAAA;AAAA,YAAL;AAAA,cACC,MAAA,EAAQ,CAAAA,MACN,qBAAA,GAAA;AAAA,gBAAC,UAAA;AAAA,gBAAA;AAAA,kBACE,GAAGA,MAAAA;AAAA,kBACJ,IAAK,EAAA,OAAA;AAAA,kBACL,IAAA,sBAAO,WAAY,EAAA,EAAA,CAAA;AAAA,kBACnB,OAAQ,EAAA;AAAA;AAAA;AACV;AAAA,WAEJ;AAAA,8BACC,IAAK,CAAA,MAAA,EAAL,EACC,QAAC,kBAAA,GAAA,CAAA,IAAA,CAAK,YAAL,EAAgB,UAAA,EAAY,CAAG,EAAA,KAAA,EAAM,OACpC,QAAC,kBAAA,GAAA,CAAA,IAAA,CAAK,OAAL,EACE,QAAA,EAAA,SAAA,CAAU,IAAI,CACb,QAAA,qBAAA,GAAA;AAAA,YAAC,IAAK,CAAA,IAAA;AAAA,YAAL;AAAA,cAEC,OAAA,EAAS,MAAM,QAAA,CAAS,OAAU,IAAA;AAAA,cAEjC,QAAS,EAAA,QAAA,CAAA;AAAA,aAAA;AAAA,YAHL,QAAS,CAAA;AAAA,WAKjB,CACH,EAAA,CAAA,EACF,CACF,EAAA;AAAA,SACF,EAAA;AAAA,OAEJ,EAAA;AAAA,KACF,EAAA,CAAA;AAAA,IACC,IACC,oBAAA,GAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,UAAW,CAAA,WAAA,EACzB,QAAC,kBAAA,GAAA,CAAA,IAAA,EAAA,EACC,QAAC,kBAAA,GAAA,CAAA,OAAA,EAAA,EACE,QAAK,EAAA,IAAA,CAAA,GAAA,CAAI,CACR,GAAA,qBAAA,GAAA;AAAA,MAAC,GAAA;AAAA,MAAA;AAAA,QAEC,IAAI,GAAI,CAAA,EAAA;AAAA,QACR,MAAM,GAAI,CAAA,IAAA;AAAA,QACV,eAAe,GAAI,CAAA,aAAA;AAAA,QAElB,QAAI,EAAA,GAAA,CAAA;AAAA,OAAA;AAAA,MALA,GAAI,CAAA;AAAA,KAOZ,CACH,EAAA,CAAA,EACF,CACF,EAAA;AAAA,GAEJ,EAAA,CAAA;AAEJ;;;;"}