@backstage/ui 0.6.1 → 0.7.0-next.0

package/dist/components/Link/Link.esm.js

@@ -25,10 +25,12 @@ const Link = forwardRef((props, ref) => {
     variant = "body",
     weight = "regular",
     color = "primary",
+    truncate,
     href,
     ...restProps
   } = props;
-  const { classNames, dataAttributes } = useStyles("Link", {
+  const { classNames: linkClassNames } = useStyles("Link");
+  const { classNames: textClassNames, dataAttributes: textDataAttributes } = useStyles("Text", {
     variant,
     weight,
     color
@@ -39,9 +41,10 @@ const Link = forwardRef((props, ref) => {
       Link$1,
       {
         ref,
-        className: clsx(classNames.root, className),
+        className: clsx(textClassNames.root, linkClassNames.root, className),
+        "data-truncate": truncate,
         href,
-        ...dataAttributes,
+        ...textDataAttributes,
         ...restProps
       }
     );
@@ -50,9 +53,10 @@ const Link = forwardRef((props, ref) => {
     Link$1,
     {
       ref,
-      className: clsx(classNames.root, className),
+      className: clsx(textClassNames.root, linkClassNames.root, className),
+      "data-truncate": truncate,
+      ...textDataAttributes,
       href,
-      ...dataAttributes,
       ...restProps
     }
   ) });

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

@@ -1 +1 @@
-{"version":3,"file":"Link.esm.js","sources":["../../../src/components/Link/Link.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 { Link as AriaLink, RouterProvider } from 'react-aria-components';\nimport clsx from 'clsx';\nimport { useStyles } from '../../hooks/useStyles';\nimport type { LinkProps } from './types';\nimport { useNavigate, useHref } from 'react-router-dom';\n\n// Helper function to determine if a link is external\nfunction isExternalLink(href?: string): boolean {\n  if (!href) return false;\n\n  // Check if it's an absolute URL with protocol\n  if (href.startsWith('http://') || href.startsWith('https://')) {\n    return true;\n  }\n\n  // Check if it's a protocol-relative URL\n  if (href.startsWith('//')) {\n    return true;\n  }\n\n  // Check if it's a mailto: or tel: link\n  if (href.startsWith('mailto:') || href.startsWith('tel:')) {\n    return true;\n  }\n\n  return false;\n}\n\n/** @public */\nexport const Link = forwardRef<HTMLAnchorElement, LinkProps>((props, ref) => {\n  const navigate = useNavigate();\n  const {\n    className,\n    variant = 'body',\n    weight = 'regular',\n    color = 'primary',\n    href,\n    ...restProps\n  } = props;\n\n  const { classNames, dataAttributes } = useStyles('Link', {\n    variant,\n    weight,\n    color,\n  });\n\n  const isExternal = isExternalLink(href);\n\n  // If it's an external link, render AriaLink without RouterProvider\n  if (isExternal) {\n    return (\n      <AriaLink\n        ref={ref}\n        className={clsx(classNames.root, className)}\n        href={href}\n        {...dataAttributes}\n        {...restProps}\n      />\n    );\n  }\n\n  // For internal links, use RouterProvider\n  return (\n    <RouterProvider navigate={navigate} useHref={useHref}>\n      <AriaLink\n        ref={ref}\n        className={clsx(classNames.root, className)}\n        href={href}\n        {...dataAttributes}\n        {...restProps}\n      />\n    </RouterProvider>\n  );\n});\n\nLink.displayName = 'Link';\n"],"names":["AriaLink"],"mappings":";;;;;;;AAwBA,SAAS,eAAe,IAAwB,EAAA;AAC9C,EAAI,IAAA,CAAC,MAAa,OAAA,KAAA;AAGlB,EAAA,IAAI,KAAK,UAAW,CAAA,SAAS,KAAK,IAAK,CAAA,UAAA,CAAW,UAAU,CAAG,EAAA;AAC7D,IAAO,OAAA,IAAA;AAAA;AAIT,EAAI,IAAA,IAAA,CAAK,UAAW,CAAA,IAAI,CAAG,EAAA;AACzB,IAAO,OAAA,IAAA;AAAA;AAIT,EAAA,IAAI,KAAK,UAAW,CAAA,SAAS,KAAK,IAAK,CAAA,UAAA,CAAW,MAAM,CAAG,EAAA;AACzD,IAAO,OAAA,IAAA;AAAA;AAGT,EAAO,OAAA,KAAA;AACT;AAGO,MAAM,IAAO,GAAA,UAAA,CAAyC,CAAC,KAAA,EAAO,GAAQ,KAAA;AAC3E,EAAA,MAAM,WAAW,WAAY,EAAA;AAC7B,EAAM,MAAA;AAAA,IACJ,SAAA;AAAA,IACA,OAAU,GAAA,MAAA;AAAA,IACV,MAAS,GAAA,SAAA;AAAA,IACT,KAAQ,GAAA,SAAA;AAAA,IACR,IAAA;AAAA,IACA,GAAG;AAAA,GACD,GAAA,KAAA;AAEJ,EAAA,MAAM,EAAE,UAAA,EAAY,cAAe,EAAA,GAAI,UAAU,MAAQ,EAAA;AAAA,IACvD,OAAA;AAAA,IACA,MAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EAAM,MAAA,UAAA,GAAa,eAAe,IAAI,CAAA;AAGtC,EAAA,IAAI,UAAY,EAAA;AACd,IACE,uBAAA,GAAA;AAAA,MAACA,MAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAW,EAAA,IAAA,CAAK,UAAW,CAAA,IAAA,EAAM,SAAS,CAAA;AAAA,QAC1C,IAAA;AAAA,QACC,GAAG,cAAA;AAAA,QACH,GAAG;AAAA;AAAA,KACN;AAAA;AAKJ,EACE,uBAAA,GAAA,CAAC,cAAe,EAAA,EAAA,QAAA,EAAoB,OAClC,EAAA,QAAA,kBAAA,GAAA;AAAA,IAACA,MAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAW,EAAA,IAAA,CAAK,UAAW,CAAA,IAAA,EAAM,SAAS,CAAA;AAAA,MAC1C,IAAA;AAAA,MACC,GAAG,cAAA;AAAA,MACH,GAAG;AAAA;AAAA,GAER,EAAA,CAAA;AAEJ,CAAC;AAED,IAAA,CAAK,WAAc,GAAA,MAAA;;;;"}
+{"version":3,"file":"Link.esm.js","sources":["../../../src/components/Link/Link.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 { Link as AriaLink, RouterProvider } from 'react-aria-components';\nimport clsx from 'clsx';\nimport { useStyles } from '../../hooks/useStyles';\nimport type { LinkProps } from './types';\nimport { useNavigate, useHref } from 'react-router-dom';\n\n// Helper function to determine if a link is external\nfunction isExternalLink(href?: string): boolean {\n  if (!href) return false;\n\n  // Check if it's an absolute URL with protocol\n  if (href.startsWith('http://') || href.startsWith('https://')) {\n    return true;\n  }\n\n  // Check if it's a protocol-relative URL\n  if (href.startsWith('//')) {\n    return true;\n  }\n\n  // Check if it's a mailto: or tel: link\n  if (href.startsWith('mailto:') || href.startsWith('tel:')) {\n    return true;\n  }\n\n  return false;\n}\n\n/** @public */\nexport const Link = forwardRef<HTMLAnchorElement, LinkProps>((props, ref) => {\n  const navigate = useNavigate();\n  const {\n    className,\n    variant = 'body',\n    weight = 'regular',\n    color = 'primary',\n    truncate,\n    href,\n    ...restProps\n  } = props;\n\n  const { classNames: linkClassNames } = useStyles('Link');\n  const { classNames: textClassNames, dataAttributes: textDataAttributes } =\n    useStyles('Text', {\n      variant,\n      weight,\n      color,\n    });\n\n  const isExternal = isExternalLink(href);\n\n  // If it's an external link, render AriaLink without RouterProvider\n  if (isExternal) {\n    return (\n      <AriaLink\n        ref={ref}\n        className={clsx(textClassNames.root, linkClassNames.root, className)}\n        data-truncate={truncate}\n        href={href}\n        {...textDataAttributes}\n        {...restProps}\n      />\n    );\n  }\n\n  // For internal links, use RouterProvider\n  return (\n    <RouterProvider navigate={navigate} useHref={useHref}>\n      <AriaLink\n        ref={ref}\n        className={clsx(textClassNames.root, linkClassNames.root, className)}\n        data-truncate={truncate}\n        {...textDataAttributes}\n        href={href}\n        {...restProps}\n      />\n    </RouterProvider>\n  );\n});\n\nLink.displayName = 'Link';\n"],"names":["AriaLink"],"mappings":";;;;;;;AAwBA,SAAS,eAAe,IAAwB,EAAA;AAC9C,EAAI,IAAA,CAAC,MAAa,OAAA,KAAA;AAGlB,EAAA,IAAI,KAAK,UAAW,CAAA,SAAS,KAAK,IAAK,CAAA,UAAA,CAAW,UAAU,CAAG,EAAA;AAC7D,IAAO,OAAA,IAAA;AAAA;AAIT,EAAI,IAAA,IAAA,CAAK,UAAW,CAAA,IAAI,CAAG,EAAA;AACzB,IAAO,OAAA,IAAA;AAAA;AAIT,EAAA,IAAI,KAAK,UAAW,CAAA,SAAS,KAAK,IAAK,CAAA,UAAA,CAAW,MAAM,CAAG,EAAA;AACzD,IAAO,OAAA,IAAA;AAAA;AAGT,EAAO,OAAA,KAAA;AACT;AAGO,MAAM,IAAO,GAAA,UAAA,CAAyC,CAAC,KAAA,EAAO,GAAQ,KAAA;AAC3E,EAAA,MAAM,WAAW,WAAY,EAAA;AAC7B,EAAM,MAAA;AAAA,IACJ,SAAA;AAAA,IACA,OAAU,GAAA,MAAA;AAAA,IACV,MAAS,GAAA,SAAA;AAAA,IACT,KAAQ,GAAA,SAAA;AAAA,IACR,QAAA;AAAA,IACA,IAAA;AAAA,IACA,GAAG;AAAA,GACD,GAAA,KAAA;AAEJ,EAAA,MAAM,EAAE,UAAA,EAAY,cAAe,EAAA,GAAI,UAAU,MAAM,CAAA;AACvD,EAAA,MAAM,EAAE,UAAY,EAAA,cAAA,EAAgB,gBAAgB,kBAAmB,EAAA,GACrE,UAAU,MAAQ,EAAA;AAAA,IAChB,OAAA;AAAA,IACA,MAAA;AAAA,IACA;AAAA,GACD,CAAA;AAEH,EAAM,MAAA,UAAA,GAAa,eAAe,IAAI,CAAA;AAGtC,EAAA,IAAI,UAAY,EAAA;AACd,IACE,uBAAA,GAAA;AAAA,MAACA,MAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,WAAW,IAAK,CAAA,cAAA,CAAe,IAAM,EAAA,cAAA,CAAe,MAAM,SAAS,CAAA;AAAA,QACnE,eAAe,EAAA,QAAA;AAAA,QACf,IAAA;AAAA,QACC,GAAG,kBAAA;AAAA,QACH,GAAG;AAAA;AAAA,KACN;AAAA;AAKJ,EACE,uBAAA,GAAA,CAAC,cAAe,EAAA,EAAA,QAAA,EAAoB,OAClC,EAAA,QAAA,kBAAA,GAAA;AAAA,IAACA,MAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,WAAW,IAAK,CAAA,cAAA,CAAe,IAAM,EAAA,cAAA,CAAe,MAAM,SAAS,CAAA;AAAA,MACnE,eAAe,EAAA,QAAA;AAAA,MACd,GAAG,kBAAA;AAAA,MACJ,IAAA;AAAA,MACC,GAAG;AAAA;AAAA,GAER,EAAA,CAAA;AAEJ,CAAC;AAED,IAAA,CAAK,WAAc,GAAA,MAAA;;;;"}

package/dist/components/Menu/Combobox.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';
@@ -18,7 +16,9 @@ import 'react-aria-components';
 import '@remixicon/react';
 import '../ButtonIcon/ButtonIcon.esm.js';
 import './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/Table/TableCellLink/TableCellLink.esm.js

@@ -16,7 +16,7 @@ const TableCellLink = forwardRef(
         ...props,
         children: [
           title && /* @__PURE__ */ jsx(Link, { href, children: title }),
-          description && /* @__PURE__ */ jsx(Text, { variant: "body", color: "secondary", children: description })
+          description && /* @__PURE__ */ jsx(Text, { variant: "body-medium", color: "secondary", children: description })
         ]
       }
     );

package/dist/components/Table/TableCellLink/TableCellLink.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableCellLink.esm.js","sources":["../../../../src/components/Table/TableCellLink/TableCellLink.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 clsx from 'clsx';\nimport { TableCellLinkProps } from './types';\nimport { Text } from '../../Text/Text';\nimport { Link } from '../../Link/Link';\nimport { useStyles } from '../../../hooks/useStyles';\n\n/** @public */\nconst TableCellLink = forwardRef<HTMLDivElement, TableCellLinkProps>(\n  ({ className, title, description, href, render, ...props }, ref) => {\n    const { classNames } = useStyles('Table');\n\n    return (\n      <div\n        ref={ref}\n        className={clsx(classNames.cellLink, className)}\n        {...props}\n      >\n        {title && <Link href={href}>{title}</Link>}\n        {description && (\n          <Text variant=\"body\" color=\"secondary\">\n            {description}\n          </Text>\n        )}\n      </div>\n    );\n  },\n);\nTableCellLink.displayName = 'TableCellLink';\n\nexport { TableCellLink };\n"],"names":[],"mappings":";;;;;;;AAwBA,MAAM,aAAgB,GAAA,UAAA;AAAA,EACpB,CAAC,EAAE,SAAA,EAAW,KAAO,EAAA,WAAA,EAAa,MAAM,MAAQ,EAAA,GAAG,KAAM,EAAA,EAAG,GAAQ,KAAA;AAClE,IAAA,MAAM,EAAE,UAAA,EAAe,GAAA,SAAA,CAAU,OAAO,CAAA;AAExC,IACE,uBAAA,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAW,EAAA,IAAA,CAAK,UAAW,CAAA,QAAA,EAAU,SAAS,CAAA;AAAA,QAC7C,GAAG,KAAA;AAAA,QAEH,QAAA,EAAA;AAAA,UAAS,KAAA,oBAAA,GAAA,CAAC,IAAK,EAAA,EAAA,IAAA,EAAa,QAAM,EAAA,KAAA,EAAA,CAAA;AAAA,UAClC,+BACE,GAAA,CAAA,IAAA,EAAA,EAAK,SAAQ,MAAO,EAAA,KAAA,EAAM,aACxB,QACH,EAAA,WAAA,EAAA;AAAA;AAAA;AAAA,KAEJ;AAAA;AAGN;AACA,aAAA,CAAc,WAAc,GAAA,eAAA;;;;"}
+{"version":3,"file":"TableCellLink.esm.js","sources":["../../../../src/components/Table/TableCellLink/TableCellLink.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 clsx from 'clsx';\nimport { TableCellLinkProps } from './types';\nimport { Text } from '../../Text/Text';\nimport { Link } from '../../Link/Link';\nimport { useStyles } from '../../../hooks/useStyles';\n\n/** @public */\nconst TableCellLink = forwardRef<HTMLDivElement, TableCellLinkProps>(\n  ({ className, title, description, href, render, ...props }, ref) => {\n    const { classNames } = useStyles('Table');\n\n    return (\n      <div\n        ref={ref}\n        className={clsx(classNames.cellLink, className)}\n        {...props}\n      >\n        {title && <Link href={href}>{title}</Link>}\n        {description && (\n          <Text variant=\"body-medium\" color=\"secondary\">\n            {description}\n          </Text>\n        )}\n      </div>\n    );\n  },\n);\nTableCellLink.displayName = 'TableCellLink';\n\nexport { TableCellLink };\n"],"names":[],"mappings":";;;;;;;AAwBA,MAAM,aAAgB,GAAA,UAAA;AAAA,EACpB,CAAC,EAAE,SAAA,EAAW,KAAO,EAAA,WAAA,EAAa,MAAM,MAAQ,EAAA,GAAG,KAAM,EAAA,EAAG,GAAQ,KAAA;AAClE,IAAA,MAAM,EAAE,UAAA,EAAe,GAAA,SAAA,CAAU,OAAO,CAAA;AAExC,IACE,uBAAA,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAW,EAAA,IAAA,CAAK,UAAW,CAAA,QAAA,EAAU,SAAS,CAAA;AAAA,QAC7C,GAAG,KAAA;AAAA,QAEH,QAAA,EAAA;AAAA,UAAS,KAAA,oBAAA,GAAA,CAAC,IAAK,EAAA,EAAA,IAAA,EAAa,QAAM,EAAA,KAAA,EAAA,CAAA;AAAA,UAClC,+BACE,GAAA,CAAA,IAAA,EAAA,EAAK,SAAQ,aAAc,EAAA,KAAA,EAAM,aAC/B,QACH,EAAA,WAAA,EAAA;AAAA;AAAA;AAAA,KAEJ;AAAA;AAGN;AACA,aAAA,CAAc,WAAc,GAAA,eAAA;;;;"}

package/dist/components/Table/TableCellProfile/TableCellProfile.esm.js

@@ -28,7 +28,7 @@ const TableCellProfile = forwardRef(
             ),
             /* @__PURE__ */ jsx(Avatar.Fallback, { className: classNames.cellProfileAvatarFallback, children: (name || "").split(" ").map((word) => word[0]).join("").toLocaleUpperCase("en-US").slice(0, 1) })
           ] }),
-          name && to ? /* @__PURE__ */ jsx(Link, { href: to, children: name }) : /* @__PURE__ */ jsx(Text, { variant: "body", children: name })
+          name && to ? /* @__PURE__ */ jsx(Link, { href: to, children: name }) : /* @__PURE__ */ jsx(Text, { variant: "body-medium", children: name })
         ]
       }
     );

package/dist/components/Table/TableCellProfile/TableCellProfile.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableCellProfile.esm.js","sources":["../../../../src/components/Table/TableCellProfile/TableCellProfile.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 clsx from 'clsx';\nimport { TableCellProfileProps } from './types';\nimport { Text } from '../../Text/Text';\nimport { Link } from '../../Link/Link';\nimport { Avatar } from '@base-ui-components/react/avatar';\nimport { useStyles } from '../../../hooks/useStyles';\n\n/** @public */\nconst TableCellProfile = forwardRef<HTMLDivElement, TableCellProfileProps>(\n  ({ className, src, name, to, withImage = true, ...rest }, ref) => {\n    const { classNames } = useStyles('Table');\n\n    return (\n      <div\n        ref={ref}\n        className={clsx(classNames.cellProfile, className)}\n        {...rest}\n      >\n        {withImage && (\n          <Avatar.Root className={classNames.cellProfileAvatar}>\n            <Avatar.Image\n              src={src}\n              width=\"20\"\n              height=\"20\"\n              className={classNames.cellProfileAvatarImage}\n            />\n            <Avatar.Fallback className={classNames.cellProfileAvatarFallback}>\n              {(name || '')\n                .split(' ')\n                .map(word => word[0])\n                .join('')\n                .toLocaleUpperCase('en-US')\n                .slice(0, 1)}\n            </Avatar.Fallback>\n          </Avatar.Root>\n        )}\n        {name && to ? (\n          <Link href={to}>{name}</Link>\n        ) : (\n          <Text variant=\"body\">{name}</Text>\n        )}\n      </div>\n    );\n  },\n);\nTableCellProfile.displayName = 'TableCellProfile';\n\nexport { TableCellProfile };\n"],"names":[],"mappings":";;;;;;;;AAyBA,MAAM,gBAAmB,GAAA,UAAA;AAAA,EACvB,CAAC,EAAE,SAAA,EAAW,GAAK,EAAA,IAAA,EAAM,EAAI,EAAA,SAAA,GAAY,IAAM,EAAA,GAAG,IAAK,EAAA,EAAG,GAAQ,KAAA;AAChE,IAAA,MAAM,EAAE,UAAA,EAAe,GAAA,SAAA,CAAU,OAAO,CAAA;AAExC,IACE,uBAAA,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAW,EAAA,IAAA,CAAK,UAAW,CAAA,WAAA,EAAa,SAAS,CAAA;AAAA,QAChD,GAAG,IAAA;AAAA,QAEH,QAAA,EAAA;AAAA,UAAA,SAAA,yBACE,MAAO,CAAA,IAAA,EAAP,EAAY,SAAA,EAAW,WAAW,iBACjC,EAAA,QAAA,EAAA;AAAA,4BAAA,GAAA;AAAA,cAAC,MAAO,CAAA,KAAA;AAAA,cAAP;AAAA,gBACC,GAAA;AAAA,gBACA,KAAM,EAAA,IAAA;AAAA,gBACN,MAAO,EAAA,IAAA;AAAA,gBACP,WAAW,UAAW,CAAA;AAAA;AAAA,aACxB;AAAA,4BACA,GAAA,CAAC,MAAO,CAAA,QAAA,EAAP,EAAgB,SAAA,EAAW,UAAW,CAAA,yBAAA,EACnC,QAAQ,EAAA,CAAA,IAAA,IAAA,EAAA,EACP,KAAM,CAAA,GAAG,CACT,CAAA,GAAA,CAAI,CAAQ,IAAA,KAAA,IAAA,CAAK,CAAC,CAAC,CACnB,CAAA,IAAA,CAAK,EAAE,CAAA,CACP,iBAAkB,CAAA,OAAO,CACzB,CAAA,KAAA,CAAM,CAAG,EAAA,CAAC,CACf,EAAA;AAAA,WACF,EAAA,CAAA;AAAA,UAED,IAAQ,IAAA,EAAA,mBACN,GAAA,CAAA,IAAA,EAAA,EAAK,IAAM,EAAA,EAAA,EAAK,QAAK,EAAA,IAAA,EAAA,CAAA,mBAErB,GAAA,CAAA,IAAA,EAAA,EAAK,OAAQ,EAAA,MAAA,EAAQ,QAAK,EAAA,IAAA,EAAA;AAAA;AAAA;AAAA,KAE/B;AAAA;AAGN;AACA,gBAAA,CAAiB,WAAc,GAAA,kBAAA;;;;"}
+{"version":3,"file":"TableCellProfile.esm.js","sources":["../../../../src/components/Table/TableCellProfile/TableCellProfile.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 clsx from 'clsx';\nimport { TableCellProfileProps } from './types';\nimport { Text } from '../../Text/Text';\nimport { Link } from '../../Link/Link';\nimport { Avatar } from '@base-ui-components/react/avatar';\nimport { useStyles } from '../../../hooks/useStyles';\n\n/** @public */\nconst TableCellProfile = forwardRef<HTMLDivElement, TableCellProfileProps>(\n  ({ className, src, name, to, withImage = true, ...rest }, ref) => {\n    const { classNames } = useStyles('Table');\n\n    return (\n      <div\n        ref={ref}\n        className={clsx(classNames.cellProfile, className)}\n        {...rest}\n      >\n        {withImage && (\n          <Avatar.Root className={classNames.cellProfileAvatar}>\n            <Avatar.Image\n              src={src}\n              width=\"20\"\n              height=\"20\"\n              className={classNames.cellProfileAvatarImage}\n            />\n            <Avatar.Fallback className={classNames.cellProfileAvatarFallback}>\n              {(name || '')\n                .split(' ')\n                .map(word => word[0])\n                .join('')\n                .toLocaleUpperCase('en-US')\n                .slice(0, 1)}\n            </Avatar.Fallback>\n          </Avatar.Root>\n        )}\n        {name && to ? (\n          <Link href={to}>{name}</Link>\n        ) : (\n          <Text variant=\"body-medium\">{name}</Text>\n        )}\n      </div>\n    );\n  },\n);\nTableCellProfile.displayName = 'TableCellProfile';\n\nexport { TableCellProfile };\n"],"names":[],"mappings":";;;;;;;;AAyBA,MAAM,gBAAmB,GAAA,UAAA;AAAA,EACvB,CAAC,EAAE,SAAA,EAAW,GAAK,EAAA,IAAA,EAAM,EAAI,EAAA,SAAA,GAAY,IAAM,EAAA,GAAG,IAAK,EAAA,EAAG,GAAQ,KAAA;AAChE,IAAA,MAAM,EAAE,UAAA,EAAe,GAAA,SAAA,CAAU,OAAO,CAAA;AAExC,IACE,uBAAA,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAW,EAAA,IAAA,CAAK,UAAW,CAAA,WAAA,EAAa,SAAS,CAAA;AAAA,QAChD,GAAG,IAAA;AAAA,QAEH,QAAA,EAAA;AAAA,UAAA,SAAA,yBACE,MAAO,CAAA,IAAA,EAAP,EAAY,SAAA,EAAW,WAAW,iBACjC,EAAA,QAAA,EAAA;AAAA,4BAAA,GAAA;AAAA,cAAC,MAAO,CAAA,KAAA;AAAA,cAAP;AAAA,gBACC,GAAA;AAAA,gBACA,KAAM,EAAA,IAAA;AAAA,gBACN,MAAO,EAAA,IAAA;AAAA,gBACP,WAAW,UAAW,CAAA;AAAA;AAAA,aACxB;AAAA,4BACA,GAAA,CAAC,MAAO,CAAA,QAAA,EAAP,EAAgB,SAAA,EAAW,UAAW,CAAA,yBAAA,EACnC,QAAQ,EAAA,CAAA,IAAA,IAAA,EAAA,EACP,KAAM,CAAA,GAAG,CACT,CAAA,GAAA,CAAI,CAAQ,IAAA,KAAA,IAAA,CAAK,CAAC,CAAC,CACnB,CAAA,IAAA,CAAK,EAAE,CAAA,CACP,iBAAkB,CAAA,OAAO,CACzB,CAAA,KAAA,CAAM,CAAG,EAAA,CAAC,CACf,EAAA;AAAA,WACF,EAAA,CAAA;AAAA,UAED,IAAQ,IAAA,EAAA,mBACN,GAAA,CAAA,IAAA,EAAA,EAAK,IAAM,EAAA,EAAA,EAAK,QAAK,EAAA,IAAA,EAAA,CAAA,mBAErB,GAAA,CAAA,IAAA,EAAA,EAAK,OAAQ,EAAA,aAAA,EAAe,QAAK,EAAA,IAAA,EAAA;AAAA;AAAA;AAAA,KAEtC;AAAA;AAGN;AACA,gBAAA,CAAiB,WAAc,GAAA,kBAAA;;;;"}

package/dist/components/Table/TableCellText/TableCellText.esm.js

@@ -14,8 +14,8 @@ const TableCellText = forwardRef(
         className: clsx(classNames.cellText, className),
         ...props,
         children: [
-          title && /* @__PURE__ */ jsx(Text, { variant: "body", children: title }),
-          description && /* @__PURE__ */ jsx(Text, { variant: "body", color: "secondary", children: description })
+          title && /* @__PURE__ */ jsx(Text, { variant: "body-medium", children: title }),
+          description && /* @__PURE__ */ jsx(Text, { variant: "body-medium", color: "secondary", children: description })
         ]
       }
     );

package/dist/components/Table/TableCellText/TableCellText.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableCellText.esm.js","sources":["../../../../src/components/Table/TableCellText/TableCellText.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 clsx from 'clsx';\nimport { TableCellTextProps } from './types';\nimport { Text } from '../../Text/Text';\nimport { useStyles } from '../../../hooks/useStyles';\n\n/** @public */\nconst TableCellText = forwardRef<HTMLDivElement, TableCellTextProps>(\n  ({ className, title, description, ...props }, ref) => {\n    const { classNames } = useStyles('Table');\n\n    return (\n      <div\n        ref={ref}\n        className={clsx(classNames.cellText, className)}\n        {...props}\n      >\n        {title && <Text variant=\"body\">{title}</Text>}\n        {description && (\n          <Text variant=\"body\" color=\"secondary\">\n            {description}\n          </Text>\n        )}\n      </div>\n    );\n  },\n);\nTableCellText.displayName = 'TableCellText';\n\nexport { TableCellText };\n"],"names":[],"mappings":";;;;;;AAuBA,MAAM,aAAgB,GAAA,UAAA;AAAA,EACpB,CAAC,EAAE,SAAW,EAAA,KAAA,EAAO,aAAa,GAAG,KAAA,IAAS,GAAQ,KAAA;AACpD,IAAA,MAAM,EAAE,UAAA,EAAe,GAAA,SAAA,CAAU,OAAO,CAAA;AAExC,IACE,uBAAA,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAW,EAAA,IAAA,CAAK,UAAW,CAAA,QAAA,EAAU,SAAS,CAAA;AAAA,QAC7C,GAAG,KAAA;AAAA,QAEH,QAAA,EAAA;AAAA,UAAA,KAAA,oBAAU,GAAA,CAAA,IAAA,EAAA,EAAK,OAAQ,EAAA,MAAA,EAAQ,QAAM,EAAA,KAAA,EAAA,CAAA;AAAA,UACrC,+BACE,GAAA,CAAA,IAAA,EAAA,EAAK,SAAQ,MAAO,EAAA,KAAA,EAAM,aACxB,QACH,EAAA,WAAA,EAAA;AAAA;AAAA;AAAA,KAEJ;AAAA;AAGN;AACA,aAAA,CAAc,WAAc,GAAA,eAAA;;;;"}
+{"version":3,"file":"TableCellText.esm.js","sources":["../../../../src/components/Table/TableCellText/TableCellText.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 clsx from 'clsx';\nimport { TableCellTextProps } from './types';\nimport { Text } from '../../Text/Text';\nimport { useStyles } from '../../../hooks/useStyles';\n\n/** @public */\nconst TableCellText = forwardRef<HTMLDivElement, TableCellTextProps>(\n  ({ className, title, description, ...props }, ref) => {\n    const { classNames } = useStyles('Table');\n\n    return (\n      <div\n        ref={ref}\n        className={clsx(classNames.cellText, className)}\n        {...props}\n      >\n        {title && <Text variant=\"body-medium\">{title}</Text>}\n        {description && (\n          <Text variant=\"body-medium\" color=\"secondary\">\n            {description}\n          </Text>\n        )}\n      </div>\n    );\n  },\n);\nTableCellText.displayName = 'TableCellText';\n\nexport { TableCellText };\n"],"names":[],"mappings":";;;;;;AAuBA,MAAM,aAAgB,GAAA,UAAA;AAAA,EACpB,CAAC,EAAE,SAAW,EAAA,KAAA,EAAO,aAAa,GAAG,KAAA,IAAS,GAAQ,KAAA;AACpD,IAAA,MAAM,EAAE,UAAA,EAAe,GAAA,SAAA,CAAU,OAAO,CAAA;AAExC,IACE,uBAAA,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAW,EAAA,IAAA,CAAK,UAAW,CAAA,QAAA,EAAU,SAAS,CAAA;AAAA,QAC7C,GAAG,KAAA;AAAA,QAEH,QAAA,EAAA;AAAA,UAAA,KAAA,oBAAU,GAAA,CAAA,IAAA,EAAA,EAAK,OAAQ,EAAA,aAAA,EAAe,QAAM,EAAA,KAAA,EAAA,CAAA;AAAA,UAC5C,+BACE,GAAA,CAAA,IAAA,EAAA,EAAK,SAAQ,aAAc,EAAA,KAAA,EAAM,aAC/B,QACH,EAAA,WAAA,EAAA;AAAA;AAAA;AAAA,KAEJ;AAAA;AAGN;AACA,aAAA,CAAc,WAAc,GAAA,eAAA;;;;"}

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

@@ -13,6 +13,15 @@ const useTabsContext = () => {
   }
   return context;
 };
+const isTabActive = (tabHref, currentPathname, matchStrategy) => {
+  if (matchStrategy === "exact") {
+    return tabHref === currentPathname;
+  }
+  if (tabHref === currentPathname) {
+    return true;
+  }
+  return currentPathname.startsWith(`${tabHref}/`);
+};
 const Tabs = (props) => {
   const { children, ...rest } = props;
   const { classNames } = useStyles("Tabs");
@@ -35,8 +44,11 @@ const Tabs = (props) => {
       if (isValidElement(child) && child.type === TabList) {
         const tabListChildren = Children.toArray(child.props.children);
         for (const tabChild of tabListChildren) {
-          if (isValidElement(tabChild) && tabChild.props.href === location.pathname) {
-            return tabChild.props.id;
+          if (isValidElement(tabChild) && tabChild.props.href) {
+            const strategy = tabChild.props.matchStrategy || "exact";
+            if (isTabActive(tabChild.props.href, location.pathname, strategy)) {
+              return tabChild.props.id;
+            }
           }
         }
       }
@@ -102,7 +114,7 @@ const TabList = (props) => {
   ] });
 };
 const Tab = (props) => {
-  const { href, children, id, ...rest } = props;
+  const { href, children, id, matchStrategy: _matchStrategy, ...rest } = props;
   const { classNames } = useStyles("Tabs");
   const { setTabRef } = useTabsContext();
   return /* @__PURE__ */ jsx(

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

@@ -1 +1 @@
-{"version":3,"file":"Tabs.esm.js","sources":["../../../src/components/Tabs/Tabs.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 {\n  useRef,\n  useState,\n  Children,\n  cloneElement,\n  isValidElement,\n  ReactNode,\n  createContext,\n  useContext,\n} from 'react';\nimport type {\n  TabsProps,\n  TabListProps,\n  TabPanelProps,\n  TabsContextValue,\n} from './types';\nimport { useLocation, useNavigate, useHref } from 'react-router-dom';\nimport { TabsIndicators } from './TabsIndicators';\nimport {\n  Tabs as AriaTabs,\n  TabList as AriaTabList,\n  Tab as AriaTab,\n  TabPanel as AriaTabPanel,\n  RouterProvider,\n  TabProps as AriaTabProps,\n} from 'react-aria-components';\n\nimport { useStyles } from '../../hooks/useStyles';\n\nconst TabsContext = createContext<TabsContextValue | undefined>(undefined);\n\nconst useTabsContext = () => {\n  const context = useContext(TabsContext);\n  if (!context) {\n    throw new Error('Tab components must be used within a Tabs component');\n  }\n  return context;\n};\n\n/**\n * A component that renders a list of tabs.\n *\n * @public\n */\nexport const Tabs = (props: TabsProps) => {\n  const { children, ...rest } = props;\n  const { classNames } = useStyles('Tabs');\n  const tabsRef = useRef<HTMLDivElement>(null);\n  const tabRefs = useRef<Map<string, HTMLDivElement>>(new Map());\n  const [hoveredKey, setHoveredKey] = useState<string | null>(null);\n  const prevHoveredKey = useRef<string | null>(null);\n  let navigate = useNavigate();\n  const location = useLocation();\n\n  const setTabRef = (key: string, element: HTMLDivElement | null) => {\n    if (element) {\n      tabRefs.current.set(key, element);\n    } else {\n      tabRefs.current.delete(key);\n    }\n  };\n\n  // If selectedKey is not provided, try to determine it from the current route\n  const computedSelectedKey = (() => {\n    const childrenArray = Children.toArray(children as ReactNode);\n    for (const child of childrenArray) {\n      if (isValidElement(child) && child.type === TabList) {\n        const tabListChildren = Children.toArray(child.props.children);\n        for (const tabChild of tabListChildren) {\n          if (\n            isValidElement(tabChild) &&\n            tabChild.props.href === location.pathname\n          ) {\n            return tabChild.props.id;\n          }\n        }\n      }\n    }\n    return undefined;\n  })();\n\n  if (!children) return null;\n\n  const contextValue: TabsContextValue = {\n    tabsRef,\n    tabRefs,\n    hoveredKey,\n    prevHoveredKey,\n    setHoveredKey,\n    setTabRef,\n  };\n\n  return (\n    <TabsContext.Provider value={contextValue}>\n      <RouterProvider navigate={navigate} useHref={useHref}>\n        <AriaTabs\n          className={classNames.tabs}\n          keyboardActivation=\"manual\"\n          selectedKey={computedSelectedKey}\n          ref={tabsRef}\n          {...rest}\n        >\n          {children as ReactNode}\n        </AriaTabs>\n      </RouterProvider>\n    </TabsContext.Provider>\n  );\n};\n\n/**\n * A component that renders a list of tabs.\n *\n * @public\n */\nexport const TabList = (props: TabListProps) => {\n  const { children, ...rest } = props;\n  const { classNames } = useStyles('Tabs');\n  const { setHoveredKey, tabRefs, tabsRef, hoveredKey, prevHoveredKey } =\n    useTabsContext();\n\n  const handleHover = (key: string | null) => {\n    setHoveredKey(key);\n  };\n\n  // Clone children with additional props for hover and ref management\n  const enhancedChildren = Children.map(children as ReactNode, child => {\n    if (isValidElement(child)) {\n      return cloneElement(child, {\n        onHoverStart: () => handleHover(child.props.id as string),\n        onHoverEnd: () => handleHover(null),\n      } as Partial<AriaTabProps>);\n    }\n    return child;\n  });\n\n  return (\n    <div className={classNames.tabListWrapper}>\n      <AriaTabList\n        className={classNames.tabList}\n        aria-label=\"Toolbar tabs\"\n        {...rest}\n      >\n        {enhancedChildren}\n      </AriaTabList>\n      <TabsIndicators\n        tabRefs={tabRefs}\n        tabsRef={tabsRef}\n        hoveredKey={hoveredKey}\n        prevHoveredKey={prevHoveredKey}\n      />\n    </div>\n  );\n};\n\n/**\n * A component that renders a tab.\n *\n * @public\n */\nexport const Tab = (props: AriaTabProps) => {\n  const { href, children, id, ...rest } = props;\n  const { classNames } = useStyles('Tabs');\n  const { setTabRef } = useTabsContext();\n\n  return (\n    <AriaTab\n      id={id}\n      className={classNames.tab}\n      ref={el => setTabRef(id as string, el as HTMLDivElement)}\n      href={href}\n      {...rest}\n    >\n      {children}\n    </AriaTab>\n  );\n};\n\n/**\n * A component that renders the content of a tab.\n *\n * @public\n */\nexport const TabPanel = (props: TabPanelProps) => {\n  const { children, ...rest } = props;\n  const { classNames } = useStyles('Tabs');\n\n  return (\n    <AriaTabPanel className={classNames.panel} {...rest}>\n      {children}\n    </AriaTabPanel>\n  );\n};\n"],"names":["AriaTabs","AriaTabList","AriaTab","AriaTabPanel"],"mappings":"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"}
+{"version":3,"file":"Tabs.esm.js","sources":["../../../src/components/Tabs/Tabs.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 {\n  useRef,\n  useState,\n  Children,\n  cloneElement,\n  isValidElement,\n  ReactNode,\n  createContext,\n  useContext,\n} from 'react';\nimport type {\n  TabsProps,\n  TabListProps,\n  TabPanelProps,\n  TabsContextValue,\n  TabProps,\n} from './types';\nimport { useLocation, useNavigate, useHref } from 'react-router-dom';\nimport { TabsIndicators } from './TabsIndicators';\nimport {\n  Tabs as AriaTabs,\n  TabList as AriaTabList,\n  Tab as AriaTab,\n  TabPanel as AriaTabPanel,\n  RouterProvider,\n  TabProps as AriaTabProps,\n} from 'react-aria-components';\n\nimport { useStyles } from '../../hooks/useStyles';\n\nconst TabsContext = createContext<TabsContextValue | undefined>(undefined);\n\nconst useTabsContext = () => {\n  const context = useContext(TabsContext);\n  if (!context) {\n    throw new Error('Tab components must be used within a Tabs component');\n  }\n  return context;\n};\n\n/**\n * Utility function to determine if a tab should be active based on the matching strategy.\n * This follows the pattern used in WorkaroundNavLink from the sidebar.\n */\nconst isTabActive = (\n  tabHref: string,\n  currentPathname: string,\n  matchStrategy: 'exact' | 'prefix',\n): boolean => {\n  if (matchStrategy === 'exact') {\n    return tabHref === currentPathname;\n  }\n\n  // Prefix matching - similar to WorkaroundNavLink behavior\n  if (tabHref === currentPathname) {\n    return true;\n  }\n\n  // Check if current path starts with tab href followed by a slash\n  // This prevents /foo matching /foobar\n  return currentPathname.startsWith(`${tabHref}/`);\n};\n\n/**\n * A component that renders a list of tabs.\n *\n * @public\n */\nexport const Tabs = (props: TabsProps) => {\n  const { children, ...rest } = props;\n  const { classNames } = useStyles('Tabs');\n  const tabsRef = useRef<HTMLDivElement>(null);\n  const tabRefs = useRef<Map<string, HTMLDivElement>>(new Map());\n  const [hoveredKey, setHoveredKey] = useState<string | null>(null);\n  const prevHoveredKey = useRef<string | null>(null);\n  let navigate = useNavigate();\n  const location = useLocation();\n\n  const setTabRef = (key: string, element: HTMLDivElement | null) => {\n    if (element) {\n      tabRefs.current.set(key, element);\n    } else {\n      tabRefs.current.delete(key);\n    }\n  };\n\n  // If selectedKey is not provided, try to determine it from the current route\n  const computedSelectedKey = (() => {\n    const childrenArray = Children.toArray(children as ReactNode);\n    for (const child of childrenArray) {\n      if (isValidElement(child) && child.type === TabList) {\n        const tabListChildren = Children.toArray(child.props.children);\n        for (const tabChild of tabListChildren) {\n          if (isValidElement(tabChild) && tabChild.props.href) {\n            // Use tab-specific strategy, defaulting to 'exact'\n            const strategy = tabChild.props.matchStrategy || 'exact';\n            if (isTabActive(tabChild.props.href, location.pathname, strategy)) {\n              return tabChild.props.id;\n            }\n          }\n        }\n      }\n    }\n    return undefined;\n  })();\n\n  if (!children) return null;\n\n  const contextValue: TabsContextValue = {\n    tabsRef,\n    tabRefs,\n    hoveredKey,\n    prevHoveredKey,\n    setHoveredKey,\n    setTabRef,\n  };\n\n  return (\n    <TabsContext.Provider value={contextValue}>\n      <RouterProvider navigate={navigate} useHref={useHref}>\n        <AriaTabs\n          className={classNames.tabs}\n          keyboardActivation=\"manual\"\n          selectedKey={computedSelectedKey}\n          ref={tabsRef}\n          {...rest}\n        >\n          {children as ReactNode}\n        </AriaTabs>\n      </RouterProvider>\n    </TabsContext.Provider>\n  );\n};\n\n/**\n * A component that renders a list of tabs.\n *\n * @public\n */\nexport const TabList = (props: TabListProps) => {\n  const { children, ...rest } = props;\n  const { classNames } = useStyles('Tabs');\n  const { setHoveredKey, tabRefs, tabsRef, hoveredKey, prevHoveredKey } =\n    useTabsContext();\n\n  const handleHover = (key: string | null) => {\n    setHoveredKey(key);\n  };\n\n  // Clone children with additional props for hover and ref management\n  const enhancedChildren = Children.map(children as ReactNode, child => {\n    if (isValidElement(child)) {\n      return cloneElement(child, {\n        onHoverStart: () => handleHover(child.props.id as string),\n        onHoverEnd: () => handleHover(null),\n      } as Partial<AriaTabProps>);\n    }\n    return child;\n  });\n\n  return (\n    <div className={classNames.tabListWrapper}>\n      <AriaTabList\n        className={classNames.tabList}\n        aria-label=\"Toolbar tabs\"\n        {...rest}\n      >\n        {enhancedChildren}\n      </AriaTabList>\n      <TabsIndicators\n        tabRefs={tabRefs}\n        tabsRef={tabsRef}\n        hoveredKey={hoveredKey}\n        prevHoveredKey={prevHoveredKey}\n      />\n    </div>\n  );\n};\n\n/**\n * A component that renders a tab.\n *\n * @public\n */\nexport const Tab = (props: TabProps) => {\n  const { href, children, id, matchStrategy: _matchStrategy, ...rest } = props;\n  const { classNames } = useStyles('Tabs');\n  const { setTabRef } = useTabsContext();\n\n  return (\n    <AriaTab\n      id={id}\n      className={classNames.tab}\n      ref={el => setTabRef(id as string, el as HTMLDivElement)}\n      href={href}\n      {...rest}\n    >\n      {children}\n    </AriaTab>\n  );\n};\n\n/**\n * A component that renders the content of a tab.\n *\n * @public\n */\nexport const TabPanel = (props: TabPanelProps) => {\n  const { children, ...rest } = props;\n  const { classNames } = useStyles('Tabs');\n\n  return (\n    <AriaTabPanel className={classNames.panel} {...rest}>\n      {children}\n    </AriaTabPanel>\n  );\n};\n"],"names":["AriaTabs","AriaTabList","AriaTab","AriaTabPanel"],"mappings":"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"}

package/dist/components/Text/Text.esm.js

@@ -5,7 +5,7 @@ import { useStyles } from '../../hooks/useStyles.esm.js';
 
 function TextComponent({
   as,
-  variant = "body",
+  variant = "body-medium",
   weight = "regular",
   color = "primary",
   className,
@@ -13,7 +13,7 @@ function TextComponent({
   style,
   ...restProps
 }, ref) {
-  const Component = as || "p";
+  const Component = as || "span";
   const { classNames, dataAttributes } = useStyles("Text", {
     variant,
     weight,
@@ -25,6 +25,7 @@ function TextComponent({
       ref,
       className: clsx(classNames.root, className),
       "data-truncate": truncate,
+      "data-as": as,
       ...dataAttributes,
       style,
       ...restProps

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

@@ -1 +1 @@
-{"version":3,"file":"Text.esm.js","sources":["../../../src/components/Text/Text.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 clsx from 'clsx';\nimport type { ElementType } from 'react';\nimport type { TextProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\n\nfunction TextComponent<T extends ElementType = 'p'>(\n  {\n    as,\n    variant = 'body',\n    weight = 'regular',\n    color = 'primary',\n    className,\n    truncate,\n    style,\n    ...restProps\n  }: TextProps<T>,\n  ref: React.Ref<any>,\n) {\n  const Component = as || 'p';\n\n  const { classNames, dataAttributes } = useStyles('Text', {\n    variant,\n    weight,\n    color,\n  });\n\n  return (\n    <Component\n      ref={ref}\n      className={clsx(classNames.root, className)}\n      data-truncate={truncate}\n      {...dataAttributes}\n      style={style}\n      {...restProps}\n    />\n  );\n}\n\nTextComponent.displayName = 'Text';\n\n/** @public */\nexport const Text = forwardRef(TextComponent) as {\n  <T extends ElementType = 'p'>(\n    props: TextProps<T> & { ref?: React.ComponentPropsWithRef<T>['ref'] },\n  ): React.ReactElement<TextProps<T>, T>;\n  displayName: string;\n};\n\nText.displayName = 'Text';\n"],"names":[],"mappings":";;;;;AAsBA,SAAS,aACP,CAAA;AAAA,EACE,EAAA;AAAA,EACA,OAAU,GAAA,MAAA;AAAA,EACV,MAAS,GAAA,SAAA;AAAA,EACT,KAAQ,GAAA,SAAA;AAAA,EACR,SAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAA;AAAA,EACA,GAAG;AACL,CAAA,EACA,GACA,EAAA;AACA,EAAA,MAAM,YAAY,EAAM,IAAA,GAAA;AAExB,EAAA,MAAM,EAAE,UAAA,EAAY,cAAe,EAAA,GAAI,UAAU,MAAQ,EAAA;AAAA,IACvD,OAAA;AAAA,IACA,MAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EACE,uBAAA,GAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAW,EAAA,IAAA,CAAK,UAAW,CAAA,IAAA,EAAM,SAAS,CAAA;AAAA,MAC1C,eAAe,EAAA,QAAA;AAAA,MACd,GAAG,cAAA;AAAA,MACJ,KAAA;AAAA,MACC,GAAG;AAAA;AAAA,GACN;AAEJ;AAEA,aAAA,CAAc,WAAc,GAAA,MAAA;AAGf,MAAA,IAAA,GAAO,WAAW,aAAa;AAO5C,IAAA,CAAK,WAAc,GAAA,MAAA;;;;"}
+{"version":3,"file":"Text.esm.js","sources":["../../../src/components/Text/Text.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 clsx from 'clsx';\nimport type { ElementType } from 'react';\nimport type { TextProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\n\nfunction TextComponent<T extends ElementType = 'span'>(\n  {\n    as,\n    variant = 'body-medium',\n    weight = 'regular',\n    color = 'primary',\n    className,\n    truncate,\n    style,\n    ...restProps\n  }: TextProps<T>,\n  ref: React.Ref<any>,\n) {\n  const Component = as || 'span';\n\n  const { classNames, dataAttributes } = useStyles('Text', {\n    variant,\n    weight,\n    color,\n  });\n\n  return (\n    <Component\n      ref={ref}\n      className={clsx(classNames.root, className)}\n      data-truncate={truncate}\n      data-as={as}\n      {...dataAttributes}\n      style={style}\n      {...restProps}\n    />\n  );\n}\n\nTextComponent.displayName = 'Text';\n\n/** @public */\nexport const Text = forwardRef(TextComponent) as {\n  <T extends ElementType = 'p'>(\n    props: TextProps<T> & { ref?: React.ComponentPropsWithRef<T>['ref'] },\n  ): React.ReactElement<TextProps<T>, T>;\n  displayName: string;\n};\n\nText.displayName = 'Text';\n"],"names":[],"mappings":";;;;;AAsBA,SAAS,aACP,CAAA;AAAA,EACE,EAAA;AAAA,EACA,OAAU,GAAA,aAAA;AAAA,EACV,MAAS,GAAA,SAAA;AAAA,EACT,KAAQ,GAAA,SAAA;AAAA,EACR,SAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAA;AAAA,EACA,GAAG;AACL,CAAA,EACA,GACA,EAAA;AACA,EAAA,MAAM,YAAY,EAAM,IAAA,MAAA;AAExB,EAAA,MAAM,EAAE,UAAA,EAAY,cAAe,EAAA,GAAI,UAAU,MAAQ,EAAA;AAAA,IACvD,OAAA;AAAA,IACA,MAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EACE,uBAAA,GAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAW,EAAA,IAAA,CAAK,UAAW,CAAA,IAAA,EAAM,SAAS,CAAA;AAAA,MAC1C,eAAe,EAAA,QAAA;AAAA,MACf,SAAS,EAAA,EAAA;AAAA,MACR,GAAG,cAAA;AAAA,MACJ,KAAA;AAAA,MACC,GAAG;AAAA;AAAA,GACN;AAEJ;AAEA,aAAA,CAAc,WAAc,GAAA,MAAA;AAGf,MAAA,IAAA,GAAO,WAAW,aAAa;AAO5C,IAAA,CAAK,WAAc,GAAA,MAAA;;;;"}

package/dist/components/Tooltip/Tooltip.esm.js

@@ -18,14 +18,17 @@ const Tooltip = forwardRef(
         ...rest,
         ref,
         children: [
-          /* @__PURE__ */ jsx(OverlayArrow, { className: classNames.arrow, children: /* @__PURE__ */ jsx("svg", { width: 8, height: 8, viewBox: "0 0 8 8", children: /* @__PURE__ */ jsx("path", { d: "M0 0 L4 4 L8 0" }) }) }),
+          /* @__PURE__ */ jsx(OverlayArrow, { className: classNames.arrow, children: /* @__PURE__ */ jsxs("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: [
+            /* @__PURE__ */ jsx("path", { d: "M10.3356 7.39793L15.1924 3.02682C15.9269 2.36577 16.8801 2 17.8683 2H20V7.94781e-07L1.74846e-07 -9.53674e-07L0 2L1.4651 2C2.4532 2 3.4064 2.36577 4.1409 3.02682L8.9977 7.39793C9.378 7.7402 9.9553 7.74021 10.3356 7.39793Z" }),
+            /* @__PURE__ */ jsx("path", { d: "M11.0046 8.14124C10.2439 8.82575 9.08939 8.82578 8.32869 8.14122L3.47189 3.77011C2.92109 3.27432 2.20619 2.99999 1.46509 2.99999L4.10999 3L8.99769 7.39793C9.37799 7.7402 9.95529 7.7402 10.3356 7.39793L15.2226 3L17.8683 2.99999C17.1271 2.99999 16.4122 3.27432 15.8614 3.77011L11.0046 8.14124Z" })
+          ] }) }),
           children
         ]
       }
     );
   }
 );
-Tooltip.displayName = Tooltip.displayName;
+Tooltip.displayName = "Tooltip";
 
 export { Tooltip, TooltipTrigger };
 //# sourceMappingURL=Tooltip.esm.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.esm.js","sources":["../../../src/components/Tooltip/Tooltip.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 {\n  OverlayArrow,\n  Tooltip as AriaTooltip,\n  TooltipTrigger as AriaTooltipTrigger,\n  TooltipTriggerComponentProps,\n} from 'react-aria-components';\nimport clsx from 'clsx';\nimport { TooltipProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\n\n/** @public */\nexport const TooltipTrigger = (props: TooltipTriggerComponentProps) => {\n  const { delay = 600 } = props;\n\n  return <AriaTooltipTrigger delay={delay} {...props} />;\n};\n\n/** @public */\nexport const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(\n  ({ className, children, ...rest }, ref) => {\n    const { classNames } = useStyles('Tooltip');\n\n    return (\n      <AriaTooltip\n        className={clsx(classNames.tooltip, className)}\n        {...rest}\n        ref={ref}\n      >\n        <OverlayArrow className={classNames.arrow}>\n          <svg width={8} height={8} viewBox=\"0 0 8 8\">\n            <path d=\"M0 0 L4 4 L8 0\" />\n          </svg>\n        </OverlayArrow>\n        {children}\n      </AriaTooltip>\n    );\n  },\n);\n\nTooltip.displayName = Tooltip.displayName;\n"],"names":["AriaTooltipTrigger","AriaTooltip"],"mappings":";;;;;;AA4Ba,MAAA,cAAA,GAAiB,CAAC,KAAwC,KAAA;AACrE,EAAM,MAAA,EAAE,KAAQ,GAAA,GAAA,EAAQ,GAAA,KAAA;AAExB,EAAA,uBAAQ,GAAA,CAAAA,gBAAA,EAAA,EAAmB,KAAe,EAAA,GAAG,KAAO,EAAA,CAAA;AACtD;AAGO,MAAM,OAAU,GAAA,UAAA;AAAA,EACrB,CAAC,EAAE,SAAA,EAAW,UAAU,GAAG,IAAA,IAAQ,GAAQ,KAAA;AACzC,IAAA,MAAM,EAAE,UAAA,EAAe,GAAA,SAAA,CAAU,SAAS,CAAA;AAE1C,IACE,uBAAA,IAAA;AAAA,MAACC,SAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAA,IAAA,CAAK,UAAW,CAAA,OAAA,EAAS,SAAS,CAAA;AAAA,QAC5C,GAAG,IAAA;AAAA,QACJ,GAAA;AAAA,QAEA,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,gBAAa,SAAW,EAAA,UAAA,CAAW,KAClC,EAAA,QAAA,kBAAA,GAAA,CAAC,SAAI,KAAO,EAAA,CAAA,EAAG,MAAQ,EAAA,CAAA,EAAG,SAAQ,SAChC,EAAA,QAAA,kBAAA,GAAA,CAAC,UAAK,CAAE,EAAA,gBAAA,EAAiB,GAC3B,CACF,EAAA,CAAA;AAAA,UACC;AAAA;AAAA;AAAA,KACH;AAAA;AAGN;AAEA,OAAA,CAAQ,cAAc,OAAQ,CAAA,WAAA;;;;"}
+{"version":3,"file":"Tooltip.esm.js","sources":["../../../src/components/Tooltip/Tooltip.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 {\n  OverlayArrow,\n  Tooltip as AriaTooltip,\n  TooltipTrigger as AriaTooltipTrigger,\n  TooltipTriggerComponentProps,\n} from 'react-aria-components';\nimport clsx from 'clsx';\nimport { TooltipProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\n\n/** @public */\nexport const TooltipTrigger = (props: TooltipTriggerComponentProps) => {\n  const { delay = 600 } = props;\n\n  return <AriaTooltipTrigger delay={delay} {...props} />;\n};\n\n/** @public */\nexport const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(\n  ({ className, children, ...rest }, ref) => {\n    const { classNames } = useStyles('Tooltip');\n\n    return (\n      <AriaTooltip\n        className={clsx(classNames.tooltip, className)}\n        {...rest}\n        ref={ref}\n      >\n        <OverlayArrow className={classNames.arrow}>\n          <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n            <path d=\"M10.3356 7.39793L15.1924 3.02682C15.9269 2.36577 16.8801 2 17.8683 2H20V7.94781e-07L1.74846e-07 -9.53674e-07L0 2L1.4651 2C2.4532 2 3.4064 2.36577 4.1409 3.02682L8.9977 7.39793C9.378 7.7402 9.9553 7.74021 10.3356 7.39793Z\" />\n            <path d=\"M11.0046 8.14124C10.2439 8.82575 9.08939 8.82578 8.32869 8.14122L3.47189 3.77011C2.92109 3.27432 2.20619 2.99999 1.46509 2.99999L4.10999 3L8.99769 7.39793C9.37799 7.7402 9.95529 7.7402 10.3356 7.39793L15.2226 3L17.8683 2.99999C17.1271 2.99999 16.4122 3.27432 15.8614 3.77011L11.0046 8.14124Z\" />\n          </svg>\n        </OverlayArrow>\n        {children}\n      </AriaTooltip>\n    );\n  },\n);\n\nTooltip.displayName = 'Tooltip';\n"],"names":["AriaTooltipTrigger","AriaTooltip"],"mappings":";;;;;;AA4Ba,MAAA,cAAA,GAAiB,CAAC,KAAwC,KAAA;AACrE,EAAM,MAAA,EAAE,KAAQ,GAAA,GAAA,EAAQ,GAAA,KAAA;AAExB,EAAA,uBAAQ,GAAA,CAAAA,gBAAA,EAAA,EAAmB,KAAe,EAAA,GAAG,KAAO,EAAA,CAAA;AACtD;AAGO,MAAM,OAAU,GAAA,UAAA;AAAA,EACrB,CAAC,EAAE,SAAA,EAAW,UAAU,GAAG,IAAA,IAAQ,GAAQ,KAAA;AACzC,IAAA,MAAM,EAAE,UAAA,EAAe,GAAA,SAAA,CAAU,SAAS,CAAA;AAE1C,IACE,uBAAA,IAAA;AAAA,MAACC,SAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAA,IAAA,CAAK,UAAW,CAAA,OAAA,EAAS,SAAS,CAAA;AAAA,QAC5C,GAAG,IAAA;AAAA,QACJ,GAAA;AAAA,QAEA,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,YAAa,EAAA,EAAA,SAAA,EAAW,UAAW,CAAA,KAAA,EAClC,QAAC,kBAAA,IAAA,CAAA,KAAA,EAAA,EAAI,KAAM,EAAA,IAAA,EAAK,MAAO,EAAA,IAAA,EAAK,OAAQ,EAAA,WAAA,EAAY,MAAK,MACnD,EAAA,QAAA,EAAA;AAAA,4BAAC,GAAA,CAAA,MAAA,EAAA,EAAK,GAAE,8NAA+N,EAAA,CAAA;AAAA,4BACvO,GAAA,CAAC,MAAK,EAAA,EAAA,CAAA,EAAE,qSAAsS,EAAA;AAAA,WAAA,EAChT,CACF,EAAA,CAAA;AAAA,UACC;AAAA;AAAA;AAAA,KACH;AAAA;AAGN;AAEA,OAAA,CAAQ,WAAc,GAAA,SAAA;;;;"}

package/dist/index.d.ts

@@ -1,8 +1,8 @@
 import * as react from 'react';
-import { ReactNode, ElementType, ComponentPropsWithRef, ReactElement, ComponentProps, ForwardRefExoticComponent, RefAttributes } from 'react';
+import { ReactNode, ReactElement, ElementType, ComponentPropsWithRef, ComponentProps, ForwardRefExoticComponent, RefAttributes } from 'react';
 import { RemixiconComponentType } from '@remixicon/react';
 import { Avatar as Avatar$1 } from '@base-ui-components/react/avatar';
-import { ButtonProps as ButtonProps$1, LinkProps as LinkProps$1, RadioGroupProps as RadioGroupProps$1, RadioProps as RadioProps$1, TabsProps as TabsProps$1, TabListProps as TabListProps$1, TabPanelProps as TabPanelProps$1, TabProps, TextFieldProps as TextFieldProps$1, TooltipProps as TooltipProps$1, TooltipTriggerComponentProps, SearchFieldProps as SearchFieldProps$1, SelectProps as SelectProps$1, SwitchProps as SwitchProps$1 } from 'react-aria-components';
+import { ButtonProps as ButtonProps$1, TabsProps as TabsProps$1, TabListProps as TabListProps$1, TabProps as TabProps$1, TabPanelProps as TabPanelProps$1, LinkProps as LinkProps$1, RadioGroupProps as RadioGroupProps$1, RadioProps as RadioProps$1, TextFieldProps as TextFieldProps$1, TooltipProps as TooltipProps$1, TooltipTriggerComponentProps, SearchFieldProps as SearchFieldProps$1, SelectProps as SelectProps$1, SwitchProps as SwitchProps$1 } from 'react-aria-components';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { NavigateOptions } from 'react-router-dom';
 import { Collapsible as Collapsible$1 } from '@base-ui-components/react/collapsible';
@@ -311,8 +311,6 @@ declare const componentDefinitions: {
     };
 };
 
-/** @public */
-type AsProps = 'div' | 'span' | 'p' | 'article' | 'section' | 'main' | 'nav' | 'aside' | 'ul' | 'ol' | 'li' | 'details' | 'summary' | 'dd' | 'dl' | 'dt';
 /** @public */
 type Breakpoint = 'initial' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 /** @public */
@@ -353,6 +351,14 @@ interface SpaceProps {
     py?: Responsive<Space>;
 }
 /** @public */
+type TextVariants = 'title-large' | 'title-medium' | 'title-small' | 'title-x-small' | 'body-large' | 'body-medium' | 'body-small' | 'body-x-small';
+/** @public */
+type TextColors = 'primary' | 'secondary';
+/** @public */
+type TextColorStatus = 'danger' | 'warning' | 'success';
+/** @public */
+type TextWeights = 'regular' | 'bold';
+/** @public */
 interface UtilityProps extends SpaceProps {
     alignItems?: Responsive<AlignItems>;
     border?: Responsive<Border>;
@@ -711,47 +717,6 @@ interface ContainerProps {
 /** @public */
 declare const Container: react.ForwardRefExoticComponent<ContainerProps & react.RefAttributes<HTMLDivElement>>;
 
-/** @public */
-type TextOwnProps = {
-    as?: 'p' | 'span' | 'label';
-    variant?: 'subtitle' | 'body' | 'caption' | 'label' | Partial<Record<Breakpoint, 'subtitle' | 'body' | 'caption' | 'label'>>;
-    weight?: 'regular' | 'bold' | Partial<Record<Breakpoint, 'regular' | 'bold'>>;
-    color?: 'primary' | 'secondary' | 'danger' | 'warning' | 'success' | Partial<Record<Breakpoint, 'primary' | 'secondary' | 'danger' | 'warning' | 'success'>>;
-    truncate?: boolean;
-    className?: string;
-    style?: React.CSSProperties;
-};
-/** @public */
-type TextProps<T extends ElementType = 'p'> = TextOwnProps & Omit<ComponentPropsWithRef<T>, keyof TextOwnProps>;
-
-/** @public */
-declare const Text: {
-    <T extends ElementType = "p">(props: TextProps<T> & {
-        ref?: React.ComponentPropsWithRef<T>["ref"];
-    }): React.ReactElement<TextProps<T>, T>;
-    displayName: string;
-};
-
-/** @public */
-type HeadingOwnProps = {
-    as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
-    variant?: 'display' | 'title1' | 'title2' | 'title3' | 'title4' | 'title5' | Partial<Record<Breakpoint, 'display' | 'title1' | 'title2' | 'title3' | 'title4' | 'title5'>>;
-    color?: 'primary' | 'secondary' | Partial<Record<Breakpoint, 'primary' | 'secondary'>>;
-    truncate?: boolean;
-    className?: string;
-    style?: React.CSSProperties;
-};
-/** @public */
-type HeadingProps<T extends ElementType = 'h1'> = HeadingOwnProps & Omit<ComponentPropsWithRef<T>, keyof HeadingOwnProps>;
-
-/** @public */
-declare const Heading: {
-    <T extends ElementType = "h1">(props: HeadingProps<T> & {
-        ref?: React.ComponentPropsWithRef<T>["ref"];
-    }): React.ReactElement<HeadingProps<T>, T>;
-    displayName: string;
-};
-
 /** @public */
 interface AvatarProps extends React.ComponentPropsWithoutRef<typeof Avatar$1.Root> {
     src: string;
@@ -933,6 +898,72 @@ interface FieldLabelProps {
 /** @public */
 declare const FieldLabel: react.ForwardRefExoticComponent<FieldLabelProps & react.RefAttributes<HTMLDivElement>>;
 
+/**
+ * Strategies for matching the current route to determine which tab should be active.
+ *
+ * @public
+ */
+type TabMatchStrategy = 'exact' | 'prefix';
+/**
+ * Props for the Tabs component.
+ *
+ * @public
+ */
+interface TabsProps extends TabsProps$1 {
+}
+/**
+ * Props for the TabList component.
+ *
+ * @public
+ */
+interface TabListProps extends Omit<TabListProps$1<object>, 'items'> {
+}
+/**
+ * Props for the Tab component.
+ *
+ * @public
+ */
+interface TabProps extends TabProps$1 {
+    /**
+     * Strategy for matching the current route to determine if this tab should be active.
+     * - 'exact': Tab href must exactly match the current pathname (default)
+     * - 'prefix': Tab is active if current pathname starts with tab href
+     */
+    matchStrategy?: 'exact' | 'prefix';
+}
+/**
+ * Props for the TabPanel component.
+ *
+ * @public
+ */
+interface TabPanelProps extends TabPanelProps$1 {
+}
+
+/**
+ * A component that renders a list of tabs.
+ *
+ * @public
+ */
+declare const Tabs: (props: TabsProps) => react_jsx_runtime.JSX.Element | null;
+/**
+ * A component that renders a list of tabs.
+ *
+ * @public
+ */
+declare const TabList: (props: TabListProps) => react_jsx_runtime.JSX.Element;
+/**
+ * A component that renders a tab.
+ *
+ * @public
+ */
+declare const Tab: (props: TabProps) => react_jsx_runtime.JSX.Element;
+/**
+ * A component that renders the content of a tab.
+ *
+ * @public
+ */
+declare const TabPanel: (props: TabPanelProps) => react_jsx_runtime.JSX.Element;
+
 /**
  * Props for the main Header component.
  *
@@ -941,10 +972,12 @@ declare const FieldLabel: react.ForwardRefExoticComponent<FieldLabelProps & reac
 interface HeaderProps {
     icon?: React.ReactNode;
     title?: string;
+    titleLink?: string;
     breadcrumbs?: HeaderBreadcrumb[];
     customActions?: React.ReactNode;
     menuItems?: HeaderMenuItem[];
     tabs?: HeaderTab[];
+    onTabSelectionChange?: TabsProps$1['onSelectionChange'];
 }
 /**
  * Represents a tab item in the header navigation.
@@ -955,6 +988,12 @@ interface HeaderTab {
     id: string;
     label: string;
     href?: string;
+    /**
+     * Strategy for matching the current route to determine if this tab should be active.
+     * - 'exact': Tab href must exactly match the current pathname (default)
+     * - 'prefix': Tab is active if current pathname starts with tab href
+     */
+    matchStrategy?: TabMatchStrategy;
 }
 /**
  * Represents an option item in the header dropdown menu.
@@ -1076,52 +1115,24 @@ declare const RadioGroup: react.ForwardRefExoticComponent<RadioGroupProps & reac
 /** @public */
 declare const Radio: react.ForwardRefExoticComponent<RadioProps & react.RefAttributes<HTMLLabelElement>>;
 
-/**
- * Props for the Tabs component.
- *
- * @public
- */
-interface TabsProps extends TabsProps$1 {
-}
-/**
- * Props for the TabList component.
- *
- * @public
- */
-interface TabListProps extends Omit<TabListProps$1<object>, 'items'> {
-}
-/**
- * Props for the TabPanel component.
- *
- * @public
- */
-interface TabPanelProps extends TabPanelProps$1 {
-}
+/** @public */
+type TextOwnProps = {
+    as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'label' | 'div' | 'strong' | 'em' | 'small' | 'legend';
+    variant?: TextVariants | Partial<Record<Breakpoint, TextVariants>>;
+    weight?: TextWeights | Partial<Record<Breakpoint, TextWeights>>;
+    color?: TextColors | TextColorStatus | Partial<Record<Breakpoint, TextColors | TextColorStatus>>;
+    truncate?: boolean;
+};
+/** @public */
+type TextProps<T extends ElementType = 'span'> = TextOwnProps & Omit<ComponentPropsWithRef<T>, keyof TextOwnProps>;
 
-/**
- * A component that renders a list of tabs.
- *
- * @public
- */
-declare const Tabs: (props: TabsProps) => react_jsx_runtime.JSX.Element | null;
-/**
- * A component that renders a list of tabs.
- *
- * @public
- */
-declare const TabList: (props: TabListProps) => react_jsx_runtime.JSX.Element;
-/**
- * A component that renders a tab.
- *
- * @public
- */
-declare const Tab: (props: TabProps) => react_jsx_runtime.JSX.Element;
-/**
- * A component that renders the content of a tab.
- *
- * @public
- */
-declare const TabPanel: (props: TabPanelProps) => react_jsx_runtime.JSX.Element;
+/** @public */
+declare const Text: {
+    <T extends ElementType = "p">(props: TextProps<T> & {
+        ref?: React.ComponentPropsWithRef<T>["ref"];
+    }): React.ReactElement<TextProps<T>, T>;
+    displayName: string;
+};
 
 /** @public */
 interface TextFieldProps extends TextFieldProps$1, Omit<FieldLabelProps, 'htmlFor' | 'id'> {
@@ -1222,9 +1233,10 @@ declare const SearchField: react.ForwardRefExoticComponent<SearchFieldProps & re
 
 /** @public */
 interface LinkProps extends LinkProps$1 {
-    variant?: 'title-large' | 'title-medium' | 'title-small' | 'title-x-small' | 'body-large' | 'body-medium' | 'body-small' | 'body-x-small' | Partial<Record<Breakpoint, 'title-large' | 'title-medium' | 'title-small' | 'title-x-small' | 'body-large' | 'body-medium' | 'body-small' | 'body-x-small'>>;
-    weight?: 'regular' | 'bold' | Partial<Record<Breakpoint, 'regular' | 'bold'>>;
-    color?: 'primary' | 'secondary' | Partial<Record<Breakpoint, 'primary' | 'secondary'>>;
+    variant?: TextVariants | Partial<Record<Breakpoint, TextVariants>>;
+    weight?: TextWeights | Partial<Record<Breakpoint, TextWeights>>;
+    color?: TextColors | TextColorStatus | Partial<Record<Breakpoint, TextColors | TextColorStatus>>;
+    truncate?: boolean;
 }
 
 /** @public */
@@ -1395,4 +1407,4 @@ declare const useBreakpoint: () => {
     down: (key: Breakpoint) => boolean;
 };
 
-export { type AlignItems, type ArbitraryStylingPropDef, type AsProps, Avatar, type AvatarProps, type BooleanPropDef, type Border, type BorderRadius, Box, type BoxOwnProps, type BoxProps, type Breakpoint, Button, ButtonIcon, type ButtonIconProps, ButtonLink, type ButtonLinkProps, type ButtonProps, Card, type CardBodyProps, type CardFooterProps, type CardHeaderProps, type CardProps, Checkbox, type CheckboxProps, type ClassNamesMap, Collapsible, type Columns, type ComponentClassNames, type ComponentDefinition, type ComponentDefinitionName, Container, type ContainerProps, type DataAttributeValues, type DataAttributesMap, DataTable, type DataTablePaginationProps, type DataTableRootProps, type DataTableTableProps, type Display, type DisplayProps, type EnumOrStringPropDef, type EnumPropDef, FieldLabel, type FieldLabelProps, Flex, type FlexDirection, type FlexOwnProps, type FlexProps, type FlexWrap, type GapProps, type GetPropDefType, type GetPropDefTypes, Grid, type GridItemOwnProps, type GridItemProps, type GridOwnProps, type GridProps, Header, type HeaderBreadcrumb, type HeaderMenuItem, HeaderPage, type HeaderPageProps, type HeaderProps, type HeaderTab, Heading, type HeadingOwnProps, type HeadingProps, type HeightProps, Icon, IconContext, type IconContextProps, type IconMap, type IconNames, type IconProps, IconProvider, type IconProviderProps, type JustifyContent, Link, type LinkProps, type MarginProps, Menu, type MenuComboboxOption, type MenuComboboxProps, type MenuComponent, type NonStylingPropDef, type PaddingProps, type PositionProps, type PropDef, Radio, RadioGroup, type RadioGroupProps, type RadioProps, type ReactNodePropDef, type RegularPropDef, type Responsive, type ResponsivePropDef, ScrollArea, SearchField, type SearchFieldProps, Select, type SelectProps, Skeleton, type SkeletonProps, type Space, type SpaceProps, type StringPropDef, type StylingPropDef, Switch, type SwitchProps, Tab, TabList, type TabListProps, TabPanel, type TabPanelProps, Table, type TableCellLinkProps, type TableCellProfileProps, type TableCellTextProps, Tabs, type TabsProps, Text, TextField, type TextFieldProps, type TextOwnProps, type TextProps, Tooltip, type TooltipProps, TooltipTrigger, type UtilityProps, type WidthProps, boxPropDefs, breakpoints, componentDefinitions, displayPropDefs, flexPropDefs, gapPropDefs, gridItemPropDefs, gridPropDefs, heightPropDefs, icons, marginPropDefs, paddingPropDefs, positionPropDefs, useBreakpoint, useIcons, widthPropDefs };
+export { type AlignItems, type ArbitraryStylingPropDef, Avatar, type AvatarProps, type BooleanPropDef, type Border, type BorderRadius, Box, type BoxOwnProps, type BoxProps, type Breakpoint, Button, ButtonIcon, type ButtonIconProps, ButtonLink, type ButtonLinkProps, type ButtonProps, Card, type CardBodyProps, type CardFooterProps, type CardHeaderProps, type CardProps, Checkbox, type CheckboxProps, type ClassNamesMap, Collapsible, type Columns, type ComponentClassNames, type ComponentDefinition, type ComponentDefinitionName, Container, type ContainerProps, type DataAttributeValues, type DataAttributesMap, DataTable, type DataTablePaginationProps, type DataTableRootProps, type DataTableTableProps, type Display, type DisplayProps, type EnumOrStringPropDef, type EnumPropDef, FieldLabel, type FieldLabelProps, Flex, type FlexDirection, type FlexOwnProps, type FlexProps, type FlexWrap, type GapProps, type GetPropDefType, type GetPropDefTypes, Grid, type GridItemOwnProps, type GridItemProps, type GridOwnProps, type GridProps, Header, type HeaderBreadcrumb, type HeaderMenuItem, HeaderPage, type HeaderPageProps, type HeaderProps, type HeaderTab, type HeightProps, Icon, IconContext, type IconContextProps, type IconMap, type IconNames, type IconProps, IconProvider, type IconProviderProps, type JustifyContent, Link, type LinkProps, type MarginProps, Menu, type MenuComboboxOption, type MenuComboboxProps, type MenuComponent, type NonStylingPropDef, type PaddingProps, type PositionProps, type PropDef, Radio, RadioGroup, type RadioGroupProps, type RadioProps, type ReactNodePropDef, type RegularPropDef, type Responsive, type ResponsivePropDef, ScrollArea, SearchField, type SearchFieldProps, Select, type SelectProps, Skeleton, type SkeletonProps, type Space, type SpaceProps, type StringPropDef, type StylingPropDef, Switch, type SwitchProps, Tab, TabList, type TabListProps, type TabMatchStrategy, TabPanel, type TabPanelProps, type TabProps, Table, type TableCellLinkProps, type TableCellProfileProps, type TableCellTextProps, Tabs, type TabsProps, Text, type TextColorStatus, type TextColors, TextField, type TextFieldProps, type TextOwnProps, type TextProps, type TextVariants, type TextWeights, Tooltip, type TooltipProps, TooltipTrigger, type UtilityProps, type WidthProps, boxPropDefs, breakpoints, componentDefinitions, displayPropDefs, flexPropDefs, gapPropDefs, gridItemPropDefs, gridPropDefs, heightPropDefs, icons, marginPropDefs, paddingPropDefs, positionPropDefs, useBreakpoint, useIcons, widthPropDefs };