@backstage/ui 0.12.0 → 0.13.0-next.1

package/dist/components/TablePagination/TablePagination.esm.js

@@ -1,26 +1,16 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import clsx from 'clsx';
 import { useId } from 'react-aria';
 import { Text } from '../Text/Text.esm.js';
+import { useDefinition } from '../../hooks/useDefinition/useDefinition.esm.js';
+import '../Text/Text.module.css.esm.js';
 import { ButtonIcon } from '../ButtonIcon/ButtonIcon.esm.js';
-import { useMemo } from 'react';
-import '../../hooks/useBg.esm.js';
-import '../../hooks/useDefinition/helpers.esm.js';
 import '../ButtonIcon/ButtonIcon.module.css.esm.js';
 import { Select } from '../Select/Select.esm.js';
-import { useStyles } from '../../hooks/useStyles.esm.js';
+import '../Select/Select.module.css.esm.js';
 import { TablePaginationDefinition } from './definition.esm.js';
-import styles from './TablePagination.module.css.esm.js';
 import { RiArrowLeftSLine, RiArrowRightSLine } from '@remixicon/react';
+import { useMemo } from 'react';
 
-const DEFAULT_PAGE_SIZE_OPTIONS = [
-  { label: "Show 5 results", value: 5 },
-  { label: "Show 10 results", value: 10 },
-  { label: "Show 20 results", value: 20 },
-  { label: "Show 30 results", value: 30 },
-  { label: "Show 40 results", value: 40 },
-  { label: "Show 50 results", value: 50 }
-];
 function getOptionValue(option) {
   return typeof option === "number" ? option : option.value;
 }
@@ -36,20 +26,22 @@ function normalizePageSizeOptions(options) {
   }
   return options;
 }
-function TablePagination({
-  pageSize,
-  pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS,
-  offset,
-  totalCount,
-  hasNextPage,
-  hasPreviousPage,
-  onNextPage,
-  onPreviousPage,
-  onPageSizeChange,
-  showPageSizeOptions = true,
-  getLabel
-}) {
-  const { classNames } = useStyles(TablePaginationDefinition, {});
+function TablePagination(props) {
+  const { ownProps } = useDefinition(TablePaginationDefinition, props);
+  const {
+    classes,
+    pageSize,
+    pageSizeOptions,
+    offset,
+    totalCount,
+    hasNextPage,
+    hasPreviousPage,
+    onNextPage,
+    onPreviousPage,
+    onPageSizeChange,
+    showPageSizeOptions,
+    getLabel
+  } = ownProps;
   const labelId = useId();
   const normalizedOptions = useMemo(
     () => normalizePageSizeOptions(pageSizeOptions),
@@ -77,8 +69,8 @@ function TablePagination({
     const toCount = Math.min(offset + effectivePageSize, totalCount ?? 0);
     label = `${fromCount} - ${toCount} of ${totalCount}`;
   }
-  return /* @__PURE__ */ jsxs("div", { className: clsx(classNames.root, styles[classNames.root]), children: [
-    /* @__PURE__ */ jsx("div", { className: clsx(classNames.left, styles[classNames.left]), children: showPageSizeOptions && /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs("div", { className: classes.root, children: [
+    /* @__PURE__ */ jsx("div", { className: classes.left, children: showPageSizeOptions && /* @__PURE__ */ jsx(
       Select,
       {
         name: "pageSize",
@@ -93,10 +85,10 @@ function TablePagination({
           const newPageSize = Number(value);
           onPageSizeChange?.(newPageSize);
         },
-        className: clsx(classNames.select, styles[classNames.select])
+        className: classes.select
       }
     ) }),
-    /* @__PURE__ */ jsxs("div", { className: clsx(classNames.right, styles[classNames.right]), children: [
+    /* @__PURE__ */ jsxs("div", { className: classes.right, children: [
       hasItems && /* @__PURE__ */ jsx(Text, { as: "p", variant: "body-medium", id: labelId, children: label }),
       /* @__PURE__ */ jsx(
         ButtonIcon,

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

@@ -1 +1 @@
-{"version":3,"file":"TablePagination.esm.js","sources":["../../../src/components/TablePagination/TablePagination.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 clsx from 'clsx';\nimport { useId } from 'react-aria';\nimport { Text } from '../Text';\nimport { ButtonIcon } from '../ButtonIcon';\nimport { Select } from '../Select';\nimport type { TablePaginationProps, PageSizeOption } from './types';\nimport { useStyles } from '../../hooks/useStyles';\nimport { TablePaginationDefinition } from './definition';\nimport styles from './TablePagination.module.css';\nimport { RiArrowLeftSLine, RiArrowRightSLine } from '@remixicon/react';\nimport { useMemo } from 'react';\n\nconst DEFAULT_PAGE_SIZE_OPTIONS: PageSizeOption[] = [\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\nfunction getOptionValue(option: number | PageSizeOption): number {\n  return typeof option === 'number' ? option : option.value;\n}\n\nfunction isNumberArray(\n  options: number[] | PageSizeOption[],\n): options is number[] {\n  return options.length > 0 && typeof options[0] === 'number';\n}\n\nfunction normalizePageSizeOptions(\n  options: number[] | PageSizeOption[],\n): PageSizeOption[] {\n  if (isNumberArray(options)) {\n    return options.map(value => ({\n      label: `Show ${value} results`,\n      value,\n    }));\n  }\n  return options;\n}\n\n/**\n * Pagination controls for Table components with page navigation and size selection.\n *\n * @public\n */\nexport function TablePagination({\n  pageSize,\n  pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS,\n  offset,\n  totalCount,\n  hasNextPage,\n  hasPreviousPage,\n  onNextPage,\n  onPreviousPage,\n  onPageSizeChange,\n  showPageSizeOptions = true,\n  getLabel,\n}: TablePaginationProps) {\n  const { classNames } = useStyles(TablePaginationDefinition, {});\n  const labelId = useId();\n  const normalizedOptions = useMemo(\n    () => normalizePageSizeOptions(pageSizeOptions),\n    [pageSizeOptions],\n  );\n\n  const effectivePageSize = useMemo(() => {\n    const isValid = pageSizeOptions.some(\n      opt => getOptionValue(opt) === pageSize,\n    );\n    if (isValid) {\n      return pageSize;\n    }\n    const firstValue = getOptionValue(pageSizeOptions[0]);\n    console.warn(\n      `TablePagination: pageSize ${pageSize} is not in pageSizeOptions, using ${firstValue} instead`,\n    );\n    return firstValue;\n  }, [pageSize, pageSizeOptions]);\n\n  const hasItems = totalCount !== undefined && totalCount !== 0;\n\n  let label = `${totalCount} items`;\n  if (getLabel) {\n    label = getLabel({ pageSize: effectivePageSize, offset, totalCount });\n  } else if (offset !== undefined) {\n    const fromCount = offset + 1;\n    const toCount = Math.min(offset + effectivePageSize, totalCount ?? 0);\n    label = `${fromCount} - ${toCount} of ${totalCount}`;\n  }\n\n  return (\n    <div className={clsx(classNames.root, styles[classNames.root])}>\n      <div className={clsx(classNames.left, styles[classNames.left])}>\n        {showPageSizeOptions && (\n          <Select\n            name=\"pageSize\"\n            size=\"small\"\n            aria-label=\"Select table page size\"\n            options={normalizedOptions.map(opt => ({\n              label: opt.label,\n              value: String(opt.value),\n            }))}\n            defaultValue={effectivePageSize.toString()}\n            onChange={value => {\n              const newPageSize = Number(value);\n              onPageSizeChange?.(newPageSize);\n            }}\n            className={clsx(classNames.select, styles[classNames.select])}\n          />\n        )}\n      </div>\n      <div className={clsx(classNames.right, styles[classNames.right])}>\n        {hasItems && (\n          <Text as=\"p\" variant=\"body-medium\" id={labelId}>\n            {label}\n          </Text>\n        )}\n        <ButtonIcon\n          variant=\"secondary\"\n          size=\"small\"\n          onClick={onPreviousPage}\n          isDisabled={!hasPreviousPage}\n          icon={<RiArrowLeftSLine />}\n          aria-label=\"Previous table page\"\n          aria-describedby={hasItems ? labelId : undefined}\n        />\n        <ButtonIcon\n          variant=\"secondary\"\n          size=\"small\"\n          onClick={onNextPage}\n          isDisabled={!hasNextPage}\n          icon={<RiArrowRightSLine />}\n          aria-label=\"Next table page\"\n          aria-describedby={hasItems ? labelId : undefined}\n        />\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"TablePagination.esm.js","sources":["../../../src/components/TablePagination/TablePagination.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 { useId } from 'react-aria';\nimport { Text } from '../Text';\nimport { ButtonIcon } from '../ButtonIcon';\nimport { Select } from '../Select';\nimport type { TablePaginationProps, PageSizeOption } from './types';\nimport { useDefinition } from '../../hooks/useDefinition';\nimport { TablePaginationDefinition } from './definition';\nimport { RiArrowLeftSLine, RiArrowRightSLine } from '@remixicon/react';\nimport { useMemo } from 'react';\n\nfunction getOptionValue(option: number | PageSizeOption): number {\n  return typeof option === 'number' ? option : option.value;\n}\n\nfunction isNumberArray(\n  options: number[] | PageSizeOption[],\n): options is number[] {\n  return options.length > 0 && typeof options[0] === 'number';\n}\n\nfunction normalizePageSizeOptions(\n  options: number[] | PageSizeOption[],\n): PageSizeOption[] {\n  if (isNumberArray(options)) {\n    return options.map(value => ({\n      label: `Show ${value} results`,\n      value,\n    }));\n  }\n  return options;\n}\n\n/**\n * Pagination controls for Table components with page navigation and size selection.\n *\n * @public\n */\nexport function TablePagination(props: TablePaginationProps) {\n  const { ownProps } = useDefinition(TablePaginationDefinition, props);\n  const {\n    classes,\n    pageSize,\n    pageSizeOptions,\n    offset,\n    totalCount,\n    hasNextPage,\n    hasPreviousPage,\n    onNextPage,\n    onPreviousPage,\n    onPageSizeChange,\n    showPageSizeOptions,\n    getLabel,\n  } = ownProps;\n\n  const labelId = useId();\n  const normalizedOptions = useMemo(\n    () => normalizePageSizeOptions(pageSizeOptions),\n    [pageSizeOptions],\n  );\n\n  const effectivePageSize = useMemo(() => {\n    const isValid = pageSizeOptions.some(\n      opt => getOptionValue(opt) === pageSize,\n    );\n    if (isValid) {\n      return pageSize;\n    }\n    const firstValue = getOptionValue(pageSizeOptions[0]);\n    console.warn(\n      `TablePagination: pageSize ${pageSize} is not in pageSizeOptions, using ${firstValue} instead`,\n    );\n    return firstValue;\n  }, [pageSize, pageSizeOptions]);\n\n  const hasItems = totalCount !== undefined && totalCount !== 0;\n\n  let label = `${totalCount} items`;\n  if (getLabel) {\n    label = getLabel({ pageSize: effectivePageSize, offset, totalCount });\n  } else if (offset !== undefined) {\n    const fromCount = offset + 1;\n    const toCount = Math.min(offset + effectivePageSize, totalCount ?? 0);\n    label = `${fromCount} - ${toCount} of ${totalCount}`;\n  }\n\n  return (\n    <div className={classes.root}>\n      <div className={classes.left}>\n        {showPageSizeOptions && (\n          <Select\n            name=\"pageSize\"\n            size=\"small\"\n            aria-label=\"Select table page size\"\n            options={normalizedOptions.map(opt => ({\n              label: opt.label,\n              value: String(opt.value),\n            }))}\n            defaultValue={effectivePageSize.toString()}\n            onChange={value => {\n              const newPageSize = Number(value);\n              onPageSizeChange?.(newPageSize);\n            }}\n            className={classes.select}\n          />\n        )}\n      </div>\n      <div className={classes.right}>\n        {hasItems && (\n          <Text as=\"p\" variant=\"body-medium\" id={labelId}>\n            {label}\n          </Text>\n        )}\n        <ButtonIcon\n          variant=\"secondary\"\n          size=\"small\"\n          onClick={onPreviousPage}\n          isDisabled={!hasPreviousPage}\n          icon={<RiArrowLeftSLine />}\n          aria-label=\"Previous table page\"\n          aria-describedby={hasItems ? labelId : undefined}\n        />\n        <ButtonIcon\n          variant=\"secondary\"\n          size=\"small\"\n          onClick={onNextPage}\n          isDisabled={!hasNextPage}\n          icon={<RiArrowRightSLine />}\n          aria-label=\"Next table page\"\n          aria-describedby={hasItems ? labelId : undefined}\n        />\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/components/TablePagination/definition.esm.js

@@ -1,11 +1,41 @@
-const TablePaginationDefinition = {
+import 'react/jsx-runtime';
+import 'clsx';
+import '../../hooks/useBreakpoint.esm.js';
+import '../../hooks/useBg.esm.js';
+import '../../hooks/useDefinition/helpers.esm.js';
+import { defineComponent } from '../../hooks/useDefinition/defineComponent.esm.js';
+import styles from './TablePagination.module.css.esm.js';
+
+const DEFAULT_PAGE_SIZE_OPTIONS = [
+  { label: "Show 5 results", value: 5 },
+  { label: "Show 10 results", value: 10 },
+  { label: "Show 20 results", value: 20 },
+  { label: "Show 30 results", value: 30 },
+  { label: "Show 40 results", value: 40 },
+  { label: "Show 50 results", value: 50 }
+];
+const TablePaginationDefinition = defineComponent()({
+  styles,
   classNames: {
     root: "bui-TablePagination",
     left: "bui-TablePaginationLeft",
     right: "bui-TablePaginationRight",
     select: "bui-TablePaginationSelect"
+  },
+  propDefs: {
+    pageSize: {},
+    pageSizeOptions: { default: DEFAULT_PAGE_SIZE_OPTIONS },
+    offset: {},
+    totalCount: {},
+    hasNextPage: {},
+    hasPreviousPage: {},
+    onNextPage: {},
+    onPreviousPage: {},
+    onPageSizeChange: {},
+    showPageSizeOptions: { default: true },
+    getLabel: {}
   }
-};
+});
 
 export { TablePaginationDefinition };
 //# sourceMappingURL=definition.esm.js.map

package/dist/components/TablePagination/definition.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"definition.esm.js","sources":["../../../src/components/TablePagination/definition.ts"],"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 { ComponentDefinition } from '../../types';\n\n/**\n * Component definition for TablePagination\n * @public\n */\nexport const TablePaginationDefinition = {\n  classNames: {\n    root: 'bui-TablePagination',\n    left: 'bui-TablePaginationLeft',\n    right: 'bui-TablePaginationRight',\n    select: 'bui-TablePaginationSelect',\n  },\n} as const satisfies ComponentDefinition;\n"],"names":[],"mappings":"AAsBO,MAAM,yBAAA,GAA4B;AAAA,EACvC,UAAA,EAAY;AAAA,IACV,IAAA,EAAM,qBAAA;AAAA,IACN,IAAA,EAAM,yBAAA;AAAA,IACN,KAAA,EAAO,0BAAA;AAAA,IACP,MAAA,EAAQ;AAAA;AAEZ;;;;"}
+{"version":3,"file":"definition.esm.js","sources":["../../../src/components/TablePagination/definition.ts"],"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 { defineComponent } from '../../hooks/useDefinition';\nimport type { TablePaginationOwnProps, PageSizeOption } from './types';\nimport styles from './TablePagination.module.css';\n\nconst DEFAULT_PAGE_SIZE_OPTIONS: PageSizeOption[] = [\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\n/**\n * Component definition for TablePagination\n * @public\n */\nexport const TablePaginationDefinition =\n  defineComponent<TablePaginationOwnProps>()({\n    styles,\n    classNames: {\n      root: 'bui-TablePagination',\n      left: 'bui-TablePaginationLeft',\n      right: 'bui-TablePaginationRight',\n      select: 'bui-TablePaginationSelect',\n    },\n    propDefs: {\n      pageSize: {},\n      pageSizeOptions: { default: DEFAULT_PAGE_SIZE_OPTIONS },\n      offset: {},\n      totalCount: {},\n      hasNextPage: {},\n      hasPreviousPage: {},\n      onNextPage: {},\n      onPreviousPage: {},\n      onPageSizeChange: {},\n      showPageSizeOptions: { default: true },\n      getLabel: {},\n    },\n  });\n"],"names":[],"mappings":";;;;;;;;AAoBA,MAAM,yBAAA,GAA8C;AAAA,EAClD,EAAE,KAAA,EAAO,gBAAA,EAAkB,KAAA,EAAO,CAAA,EAAE;AAAA,EACpC,EAAE,KAAA,EAAO,iBAAA,EAAmB,KAAA,EAAO,EAAA,EAAG;AAAA,EACtC,EAAE,KAAA,EAAO,iBAAA,EAAmB,KAAA,EAAO,EAAA,EAAG;AAAA,EACtC,EAAE,KAAA,EAAO,iBAAA,EAAmB,KAAA,EAAO,EAAA,EAAG;AAAA,EACtC,EAAE,KAAA,EAAO,iBAAA,EAAmB,KAAA,EAAO,EAAA,EAAG;AAAA,EACtC,EAAE,KAAA,EAAO,iBAAA,EAAmB,KAAA,EAAO,EAAA;AACrC,CAAA;AAMO,MAAM,yBAAA,GACX,iBAAyC,CAAE;AAAA,EACzC,MAAA;AAAA,EACA,UAAA,EAAY;AAAA,IACV,IAAA,EAAM,qBAAA;AAAA,IACN,IAAA,EAAM,yBAAA;AAAA,IACN,KAAA,EAAO,0BAAA;AAAA,IACP,MAAA,EAAQ;AAAA,GACV;AAAA,EACA,QAAA,EAAU;AAAA,IACR,UAAU,EAAC;AAAA,IACX,eAAA,EAAiB,EAAE,OAAA,EAAS,yBAAA,EAA0B;AAAA,IACtD,QAAQ,EAAC;AAAA,IACT,YAAY,EAAC;AAAA,IACb,aAAa,EAAC;AAAA,IACd,iBAAiB,EAAC;AAAA,IAClB,YAAY,EAAC;AAAA,IACb,gBAAgB,EAAC;AAAA,IACjB,kBAAkB,EAAC;AAAA,IACnB,mBAAA,EAAqB,EAAE,OAAA,EAAS,IAAA,EAAK;AAAA,IACrC,UAAU;AAAC;AAEf,CAAC;;;;"}

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

@@ -3,11 +3,9 @@ import { createContext, useRef, useState, useMemo, useCallback, Children, isVali
 import { useLocation } from 'react-router-dom';
 import { TabsIndicators } from './TabsIndicators.esm.js';
 import { Tabs as Tabs$1, TabList as TabList$1, Tab as Tab$1, TabPanel as TabPanel$1 } from 'react-aria-components';
-import { useStyles } from '../../hooks/useStyles.esm.js';
-import { TabsDefinition } from './definition.esm.js';
+import { useDefinition } from '../../hooks/useDefinition/useDefinition.esm.js';
+import { TabsDefinition, TabListDefinition, TabDefinition, TabPanelDefinition } from './definition.esm.js';
 import { createRoutingRegistration, isInternalLink } from '../InternalLinkProvider/InternalLinkProvider.esm.js';
-import styles from './Tabs.module.css.esm.js';
-import clsx from 'clsx';
 
 const { RoutingProvider, useRoutingRegistrationEffect } = createRoutingRegistration();
 const TabsContext = createContext(void 0);
@@ -21,18 +19,20 @@ const useTabsContext = () => {
 const TabSelectionContext = createContext(
   null
 );
+const hrefPathname = (href) => href.split("?")[0].split("#")[0];
 const isTabActive = (tabHref, currentPathname, matchStrategy) => {
+  const pathname = hrefPathname(tabHref);
   if (matchStrategy === "exact") {
-    return tabHref === currentPathname;
+    return pathname === currentPathname;
   }
-  if (tabHref === currentPathname) {
+  if (pathname === currentPathname) {
     return true;
   }
-  return currentPathname.startsWith(`${tabHref}/`);
+  return currentPathname.startsWith(`${pathname}/`);
 };
 const Tabs = (props) => {
-  const { classNames, cleanedProps } = useStyles(TabsDefinition, props);
-  const { className, children, ...rest } = cleanedProps;
+  const { ownProps, restProps } = useDefinition(TabsDefinition, props);
+  const { classes, children } = ownProps;
   const tabsRef = useRef(null);
   const tabRefs = useRef(/* @__PURE__ */ new Map());
   const [hoveredKey, setHoveredKey] = useState(null);
@@ -111,22 +111,18 @@ const Tabs = (props) => {
   return /* @__PURE__ */ jsx(RoutingProvider, { children: /* @__PURE__ */ jsx(TabsContext.Provider, { value: tabsContextValue, children: /* @__PURE__ */ jsx(TabSelectionContext.Provider, { value: selectionContextValue, children: /* @__PURE__ */ jsx(
     Tabs$1,
     {
-      className: clsx(
-        classNames.tabs,
-        styles[classNames.tabs],
-        className
-      ),
+      className: classes.root,
       keyboardActivation: "manual",
       selectedKey: selectedTabId,
       ref: tabsRef,
-      ...rest,
+      ...restProps,
       children
     }
   ) }) }) });
 };
 const TabList = (props) => {
-  const { classNames, cleanedProps } = useStyles(TabsDefinition, props);
-  const { className, children, ...rest } = cleanedProps;
+  const { ownProps, restProps } = useDefinition(TabListDefinition, props);
+  const { classes, children } = ownProps;
   const { setHoveredKey, tabRefs, tabsRef, hoveredKey, prevHoveredKey } = useTabsContext();
   const handleHover = (key) => {
     setHoveredKey(key);
@@ -140,36 +136,26 @@ const TabList = (props) => {
     }
     return child;
   });
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: clsx(
-        classNames.tabListWrapper,
-        styles[classNames.tabListWrapper],
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsx(
-          TabList$1,
-          {
-            className: clsx(classNames.tabList, styles[classNames.tabList]),
-            "aria-label": "Toolbar tabs",
-            ...rest,
-            children: enhancedChildren
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          TabsIndicators,
-          {
-            tabRefs,
-            tabsRef,
-            hoveredKey,
-            prevHoveredKey
-          }
-        )
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxs("div", { className: classes.root, children: [
+    /* @__PURE__ */ jsx(
+      TabList$1,
+      {
+        className: classes.tabList,
+        "aria-label": "Toolbar tabs",
+        ...restProps,
+        children: enhancedChildren
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      TabsIndicators,
+      {
+        tabRefs,
+        tabsRef,
+        hoveredKey,
+        prevHoveredKey
+      }
+    )
+  ] });
 };
 function RoutedTabEffects({
   id,
@@ -187,7 +173,7 @@ function RoutedTabEffects({
     return void 0;
   }, [id, selectionCtx]);
   const isActive = isTabActive(href, location.pathname, matchStrategy);
-  const segmentCount = href.split("/").filter(Boolean).length;
+  const segmentCount = hrefPathname(href).split("/").filter(Boolean).length;
   useEffect(() => {
     if (isActive && selectionCtx) {
       selectionCtx.registerActiveTab(id, segmentCount);
@@ -198,8 +184,8 @@ function RoutedTabEffects({
   return null;
 }
 const Tab = (props) => {
-  const { classNames, cleanedProps } = useStyles(TabsDefinition, props);
-  const { className, href, children, id, matchStrategy, ...rest } = cleanedProps;
+  const { ownProps, restProps } = useDefinition(TabDefinition, props);
+  const { classes, matchStrategy, href, id } = ownProps;
   const { setTabRef } = useTabsContext();
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     isInternalLink(href) && /* @__PURE__ */ jsx(
@@ -214,26 +200,17 @@ const Tab = (props) => {
       Tab$1,
       {
         id,
-        className: clsx(classNames.tab, styles[classNames.tab], className),
+        className: classes.root,
         ref: (el) => setTabRef(id, el),
         href,
-        ...rest,
-        children
+        ...restProps
       }
     )
   ] });
 };
 const TabPanel = (props) => {
-  const { classNames, cleanedProps } = useStyles(TabsDefinition, props);
-  const { className, children, ...rest } = cleanedProps;
-  return /* @__PURE__ */ jsx(
-    TabPanel$1,
-    {
-      className: clsx(classNames.panel, styles[classNames.panel], className),
-      ...rest,
-      children
-    }
-  );
+  const { ownProps, restProps } = useDefinition(TabPanelDefinition, props);
+  return /* @__PURE__ */ jsx(TabPanel$1, { className: ownProps.classes.root, ...restProps });
 };
 
 export { Tab, TabList, TabPanel, Tabs };

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  useMemo,\n  Children,\n  cloneElement,\n  isValidElement,\n  createContext,\n  useContext,\n  useEffect,\n  useCallback,\n} from 'react';\nimport type { ReactNode } from 'react';\nimport type {\n  TabsProps,\n  TabListProps,\n  TabPanelProps,\n  TabsContextValue,\n  TabProps,\n} from './types';\nimport { useLocation } 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  TabProps as AriaTabProps,\n} from 'react-aria-components';\nimport { useStyles } from '../../hooks/useStyles';\nimport { TabsDefinition } from './definition';\nimport {\n  isInternalLink,\n  createRoutingRegistration,\n} from '../InternalLinkProvider';\nimport styles from './Tabs.module.css';\nimport clsx from 'clsx';\n\nconst { RoutingProvider, useRoutingRegistrationEffect } =\n  createRoutingRegistration();\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\ntype TabSelectionContextValue = {\n  registerRoutedTab: (id: string) => void;\n  unregisterRoutedTab: (id: string) => void;\n  registerActiveTab: (id: string, segmentCount: number) => void;\n  unregisterActiveTab: (id: string) => void;\n};\n\nconst TabSelectionContext = createContext<TabSelectionContextValue | null>(\n  null,\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 { classNames, cleanedProps } = useStyles(TabsDefinition, props);\n  const { className, children, ...rest } = cleanedProps;\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\n  // State for tracking routed tabs (tabs with hrefs)\n  const [routedTabs, setRoutedTabs] = useState<Set<string>>(() => new Set());\n\n  // State for tracking active tabs reported by TabRouteRegistration components\n  const [activeTabs, setActiveTabs] = useState<Map<string, number>>(\n    () => new Map(),\n  );\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  // Compute the selected tab based on active tabs with highest segment count\n  const selectedTabId = useMemo(() => {\n    // No routed tabs - let React Aria handle selection (uncontrolled mode)\n    if (routedTabs.size === 0) {\n      return undefined;\n    }\n\n    // Has routed tabs but none are active - use empty string for no selection\n    // (React Aria has a bug with null that causes infinite loops)\n    if (activeTabs.size === 0) {\n      return '';\n    }\n\n    let selectedId: string | null = null;\n    let maxSegments = -1;\n\n    activeTabs.forEach((segmentCount, id) => {\n      // Pick tab with highest segment count, first one wins on tie\n      if (segmentCount > maxSegments) {\n        maxSegments = segmentCount;\n        selectedId = id;\n      }\n    });\n\n    return selectedId;\n  }, [routedTabs, activeTabs]);\n\n  const registerRoutedTab = useCallback((id: string) => {\n    setRoutedTabs(prev => new Set(prev).add(id));\n  }, []);\n\n  const unregisterRoutedTab = useCallback((id: string) => {\n    setRoutedTabs(prev => {\n      const next = new Set(prev);\n      next.delete(id);\n      return next;\n    });\n  }, []);\n\n  const registerActiveTab = useCallback((id: string, segmentCount: number) => {\n    setActiveTabs(prev => new Map(prev).set(id, segmentCount));\n  }, []);\n\n  const unregisterActiveTab = useCallback((id: string) => {\n    setActiveTabs(prev => {\n      const next = new Map(prev);\n      next.delete(id);\n      return next;\n    });\n  }, []);\n\n  if (!children) return null;\n\n  const tabsContextValue: TabsContextValue = {\n    tabsRef,\n    tabRefs,\n    hoveredKey,\n    prevHoveredKey,\n    setHoveredKey,\n    setTabRef,\n  };\n\n  const selectionContextValue: TabSelectionContextValue = useMemo(\n    () => ({\n      registerRoutedTab,\n      unregisterRoutedTab,\n      registerActiveTab,\n      unregisterActiveTab,\n    }),\n    [\n      registerRoutedTab,\n      unregisterRoutedTab,\n      registerActiveTab,\n      unregisterActiveTab,\n    ],\n  );\n\n  return (\n    <RoutingProvider>\n      <TabsContext.Provider value={tabsContextValue}>\n        <TabSelectionContext.Provider value={selectionContextValue}>\n          <AriaTabs\n            className={clsx(\n              classNames.tabs,\n              styles[classNames.tabs],\n              className,\n            )}\n            keyboardActivation=\"manual\"\n            selectedKey={selectedTabId}\n            ref={tabsRef}\n            {...rest}\n          >\n            {children as ReactNode}\n          </AriaTabs>\n        </TabSelectionContext.Provider>\n      </TabsContext.Provider>\n    </RoutingProvider>\n  );\n};\n\n/**\n * A component that renders a list of tabs.\n *\n * @public\n */\nexport const TabList = (props: TabListProps) => {\n  const { classNames, cleanedProps } = useStyles(TabsDefinition, props);\n  const { className, children, ...rest } = cleanedProps;\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\n      className={clsx(\n        classNames.tabListWrapper,\n        styles[classNames.tabListWrapper],\n        className,\n      )}\n    >\n      <AriaTabList\n        className={clsx(classNames.tabList, styles[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 * Internal component for tabs with internal hrefs.\n * Handles routing registration and active tab tracking.\n * Separated to avoid conditional hook usage in Tab component.\n * @internal\n */\nfunction RoutedTabEffects({\n  id,\n  href,\n  matchStrategy = 'exact',\n}: {\n  id: string;\n  href: string;\n  matchStrategy?: 'exact' | 'prefix';\n}) {\n  const selectionCtx = useContext(TabSelectionContext);\n  const location = useLocation();\n\n  // Register with RoutingProvider for conditional RouterProvider wrapping\n  useRoutingRegistrationEffect(href);\n\n  // Register as a routed tab (for controlled vs uncontrolled mode)\n  useEffect(() => {\n    if (selectionCtx) {\n      selectionCtx.registerRoutedTab(id);\n      return () => selectionCtx.unregisterRoutedTab(id);\n    }\n    return undefined;\n  }, [id, selectionCtx]);\n\n  // Register as active tab when URL matches (for tab selection)\n  const isActive = isTabActive(href, location.pathname, matchStrategy);\n  const segmentCount = href.split('/').filter(Boolean).length;\n\n  useEffect(() => {\n    if (isActive && selectionCtx) {\n      selectionCtx.registerActiveTab(id, segmentCount);\n      return () => selectionCtx.unregisterActiveTab(id);\n    }\n    return undefined;\n  }, [isActive, id, segmentCount, selectionCtx]);\n\n  return null;\n}\n\n/**\n * A component that renders a tab.\n *\n * @public\n */\nexport const Tab = (props: TabProps) => {\n  const { classNames, cleanedProps } = useStyles(TabsDefinition, props);\n  const { className, href, children, id, matchStrategy, ...rest } =\n    cleanedProps;\n  const { setTabRef } = useTabsContext();\n\n  return (\n    <>\n      {isInternalLink(href) && (\n        <RoutedTabEffects\n          id={id as string}\n          href={href}\n          matchStrategy={matchStrategy}\n        />\n      )}\n      <AriaTab\n        id={id}\n        className={clsx(classNames.tab, styles[classNames.tab], className)}\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/**\n * A component that renders the content of a tab.\n *\n * @public\n */\nexport const TabPanel = (props: TabPanelProps) => {\n  const { classNames, cleanedProps } = useStyles(TabsDefinition, props);\n  const { className, children, ...rest } = cleanedProps;\n\n  return (\n    <AriaTabPanel\n      className={clsx(classNames.panel, styles[classNames.panel], className)}\n      {...rest}\n    >\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  useMemo,\n  Children,\n  cloneElement,\n  isValidElement,\n  createContext,\n  useContext,\n  useEffect,\n  useCallback,\n} from 'react';\nimport type { ReactNode } from 'react';\nimport type {\n  TabsProps,\n  TabListProps,\n  TabPanelProps,\n  TabsContextValue,\n  TabProps,\n} from './types';\nimport { useLocation } 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  TabProps as AriaTabProps,\n} from 'react-aria-components';\nimport { useDefinition } from '../../hooks/useDefinition';\nimport {\n  TabsDefinition,\n  TabListDefinition,\n  TabDefinition,\n  TabPanelDefinition,\n} from './definition';\nimport {\n  isInternalLink,\n  createRoutingRegistration,\n} from '../InternalLinkProvider';\n\nconst { RoutingProvider, useRoutingRegistrationEffect } =\n  createRoutingRegistration();\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\ntype TabSelectionContextValue = {\n  registerRoutedTab: (id: string) => void;\n  unregisterRoutedTab: (id: string) => void;\n  registerActiveTab: (id: string, segmentCount: number) => void;\n  unregisterActiveTab: (id: string) => void;\n};\n\nconst TabSelectionContext = createContext<TabSelectionContextValue | null>(\n  null,\n);\n\n/**\n * Strips query params and hash from a href, leaving only the pathname.\n * Tab matching always compares against location.pathname which never includes them.\n */\nconst hrefPathname = (href: string) => href.split('?')[0].split('#')[0];\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  const pathname = hrefPathname(tabHref);\n\n  if (matchStrategy === 'exact') {\n    return pathname === currentPathname;\n  }\n\n  // Prefix matching - similar to WorkaroundNavLink behavior\n  if (pathname === 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(`${pathname}/`);\n};\n\n/**\n * A component that renders a list of tabs.\n *\n * @public\n */\nexport const Tabs = (props: TabsProps) => {\n  const { ownProps, restProps } = useDefinition(TabsDefinition, props);\n  const { classes, children } = ownProps;\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\n  // State for tracking routed tabs (tabs with hrefs)\n  const [routedTabs, setRoutedTabs] = useState<Set<string>>(() => new Set());\n\n  // State for tracking active tabs reported by TabRouteRegistration components\n  const [activeTabs, setActiveTabs] = useState<Map<string, number>>(\n    () => new Map(),\n  );\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  // Compute the selected tab based on active tabs with highest segment count\n  const selectedTabId = useMemo(() => {\n    // No routed tabs - let React Aria handle selection (uncontrolled mode)\n    if (routedTabs.size === 0) {\n      return undefined;\n    }\n\n    // Has routed tabs but none are active - use empty string for no selection\n    // (React Aria has a bug with null that causes infinite loops)\n    if (activeTabs.size === 0) {\n      return '';\n    }\n\n    let selectedId: string | null = null;\n    let maxSegments = -1;\n\n    activeTabs.forEach((segmentCount, id) => {\n      // Pick tab with highest segment count, first one wins on tie\n      if (segmentCount > maxSegments) {\n        maxSegments = segmentCount;\n        selectedId = id;\n      }\n    });\n\n    return selectedId;\n  }, [routedTabs, activeTabs]);\n\n  const registerRoutedTab = useCallback((id: string) => {\n    setRoutedTabs(prev => new Set(prev).add(id));\n  }, []);\n\n  const unregisterRoutedTab = useCallback((id: string) => {\n    setRoutedTabs(prev => {\n      const next = new Set(prev);\n      next.delete(id);\n      return next;\n    });\n  }, []);\n\n  const registerActiveTab = useCallback((id: string, segmentCount: number) => {\n    setActiveTabs(prev => new Map(prev).set(id, segmentCount));\n  }, []);\n\n  const unregisterActiveTab = useCallback((id: string) => {\n    setActiveTabs(prev => {\n      const next = new Map(prev);\n      next.delete(id);\n      return next;\n    });\n  }, []);\n\n  if (!children) return null;\n\n  const tabsContextValue: TabsContextValue = {\n    tabsRef,\n    tabRefs,\n    hoveredKey,\n    prevHoveredKey,\n    setHoveredKey,\n    setTabRef,\n  };\n\n  const selectionContextValue: TabSelectionContextValue = useMemo(\n    () => ({\n      registerRoutedTab,\n      unregisterRoutedTab,\n      registerActiveTab,\n      unregisterActiveTab,\n    }),\n    [\n      registerRoutedTab,\n      unregisterRoutedTab,\n      registerActiveTab,\n      unregisterActiveTab,\n    ],\n  );\n\n  return (\n    <RoutingProvider>\n      <TabsContext.Provider value={tabsContextValue}>\n        <TabSelectionContext.Provider value={selectionContextValue}>\n          <AriaTabs\n            className={classes.root}\n            keyboardActivation=\"manual\"\n            selectedKey={selectedTabId}\n            ref={tabsRef}\n            {...restProps}\n          >\n            {children as ReactNode}\n          </AriaTabs>\n        </TabSelectionContext.Provider>\n      </TabsContext.Provider>\n    </RoutingProvider>\n  );\n};\n\n/**\n * A component that renders a list of tabs.\n *\n * @public\n */\nexport const TabList = (props: TabListProps) => {\n  const { ownProps, restProps } = useDefinition(TabListDefinition, props);\n  const { classes, children } = ownProps;\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={classes.root}>\n      <AriaTabList\n        className={classes.tabList}\n        aria-label=\"Toolbar tabs\"\n        {...restProps}\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 * Internal component for tabs with internal hrefs.\n * Handles routing registration and active tab tracking.\n * Separated to avoid conditional hook usage in Tab component.\n * @internal\n */\nfunction RoutedTabEffects({\n  id,\n  href,\n  matchStrategy = 'exact',\n}: {\n  id: string;\n  href: string;\n  matchStrategy?: 'exact' | 'prefix';\n}) {\n  const selectionCtx = useContext(TabSelectionContext);\n  const location = useLocation();\n\n  // Register with RoutingProvider for conditional RouterProvider wrapping\n  useRoutingRegistrationEffect(href);\n\n  // Register as a routed tab (for controlled vs uncontrolled mode)\n  useEffect(() => {\n    if (selectionCtx) {\n      selectionCtx.registerRoutedTab(id);\n      return () => selectionCtx.unregisterRoutedTab(id);\n    }\n    return undefined;\n  }, [id, selectionCtx]);\n\n  // Register as active tab when URL matches (for tab selection)\n  const isActive = isTabActive(href, location.pathname, matchStrategy);\n  const segmentCount = hrefPathname(href).split('/').filter(Boolean).length;\n\n  useEffect(() => {\n    if (isActive && selectionCtx) {\n      selectionCtx.registerActiveTab(id, segmentCount);\n      return () => selectionCtx.unregisterActiveTab(id);\n    }\n    return undefined;\n  }, [isActive, id, segmentCount, selectionCtx]);\n\n  return null;\n}\n\n/**\n * A component that renders a tab.\n *\n * @public\n */\nexport const Tab = (props: TabProps) => {\n  const { ownProps, restProps } = useDefinition(TabDefinition, props);\n  const { classes, matchStrategy, href, id } = ownProps;\n  const { setTabRef } = useTabsContext();\n\n  return (\n    <>\n      {isInternalLink(href) && (\n        <RoutedTabEffects\n          id={id as string}\n          href={href}\n          matchStrategy={matchStrategy}\n        />\n      )}\n      <AriaTab\n        id={id}\n        className={classes.root}\n        ref={el => setTabRef(id as string, el as HTMLDivElement)}\n        href={href}\n        {...restProps}\n      />\n    </>\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 { ownProps, restProps } = useDefinition(TabPanelDefinition, props);\n\n  return <AriaTabPanel className={ownProps.classes.root} {...restProps} />;\n};\n"],"names":["AriaTabs","AriaTabList","AriaTab","AriaTabPanel"],"mappings":"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"}

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

@@ -1,14 +1,12 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { TabListStateContext } from 'react-aria-components';
-import { useStyles } from '../../hooks/useStyles.esm.js';
-import { TabsDefinition } from './definition.esm.js';
+import { useDefinition } from '../../hooks/useDefinition/useDefinition.esm.js';
+import { TabsIndicatorsDefinition } from './definition.esm.js';
 import { useContext, useRef, useCallback, useEffect } from 'react';
-import styles from './Tabs.module.css.esm.js';
-import clsx from 'clsx';
 
 const TabsIndicators = (props) => {
-  const { tabRefs, tabsRef, hoveredKey, prevHoveredKey } = props;
-  const { classNames } = useStyles(TabsDefinition);
+  const { ownProps } = useDefinition(TabsIndicatorsDefinition, props);
+  const { classes, tabRefs, tabsRef, hoveredKey, prevHoveredKey } = ownProps;
   const state = useContext(TabListStateContext);
   const prevSelectedKey = useRef(null);
   const updateCSSVariables = useCallback(() => {
@@ -134,18 +132,8 @@ const TabsIndicators = (props) => {
     return () => window.removeEventListener("resize", handleResize);
   }, [updateCSSVariables]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: clsx(classNames.tabActive, styles[classNames.tabActive])
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: clsx(classNames.tabHovered, styles[classNames.tabHovered])
-      }
-    )
+    /* @__PURE__ */ jsx("div", { className: classes.root }),
+    /* @__PURE__ */ jsx("div", { className: classes.hovered })
   ] });
 };
 

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

@@ -1 +1 @@
-{"version":3,"file":"TabsIndicators.esm.js","sources":["../../../src/components/Tabs/TabsIndicators.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 { TabListStateContext } from 'react-aria-components';\nimport { useStyles } from '../../hooks/useStyles';\nimport { TabsDefinition } from './definition';\nimport { useContext, useEffect, useCallback, useRef } from 'react';\nimport type { TabsIndicatorsProps } from './types';\nimport styles from './Tabs.module.css';\nimport clsx from 'clsx';\n\n/**\n * A component that renders the indicators for the toolbar.\n *\n * @internal\n */\nexport const TabsIndicators = (props: TabsIndicatorsProps) => {\n  const { tabRefs, tabsRef, hoveredKey, prevHoveredKey } = props;\n  const { classNames } = useStyles(TabsDefinition);\n  const state = useContext(TabListStateContext);\n  const prevSelectedKey = useRef<string | null>(null);\n\n  const updateCSSVariables = useCallback(() => {\n    if (!tabsRef.current) return;\n\n    const tabsRect = tabsRef.current.getBoundingClientRect();\n\n    // Set active tab variables\n    if (state?.selectedKey) {\n      const activeTab = tabRefs.current.get(state.selectedKey.toString());\n\n      if (activeTab) {\n        const activeRect = activeTab.getBoundingClientRect();\n        const relativeLeft = activeRect.left - tabsRect.left;\n        const relativeTop = activeRect.top - tabsRect.top;\n\n        // Control transition timing based on whether this is the first time setting active tab\n        const isFirstActiveTab = prevSelectedKey.current === null;\n\n        if (isFirstActiveTab) {\n          // First time setting active tab: no transitions for position\n          tabsRef.current.style.setProperty(\n            '--active-transition-duration',\n            '0s',\n          );\n          // Enable transitions on next frame for future tab switches\n          requestAnimationFrame(() => {\n            if (tabsRef.current) {\n              tabsRef.current.style.setProperty(\n                '--active-transition-duration',\n                '0.25s',\n              );\n            }\n          });\n        } else {\n          // Switching between tabs: full transitions\n          tabsRef.current.style.setProperty(\n            '--active-transition-duration',\n            '0.25s',\n          );\n        }\n\n        // Update previous selected key for next time\n        prevSelectedKey.current = state.selectedKey.toString();\n\n        tabsRef.current.style.setProperty(\n          '--active-tab-left',\n          `${relativeLeft}px`,\n        );\n        tabsRef.current.style.setProperty(\n          '--active-tab-right',\n          `${relativeLeft + activeRect.width}px`,\n        );\n        tabsRef.current.style.setProperty(\n          '--active-tab-top',\n          `${relativeTop}px`,\n        );\n        tabsRef.current.style.setProperty(\n          '--active-tab-bottom',\n          `${relativeTop + activeRect.height}px`,\n        );\n        tabsRef.current.style.setProperty(\n          '--active-tab-width',\n          `${activeRect.width}px`,\n        );\n        tabsRef.current.style.setProperty(\n          '--active-tab-height',\n          `${activeRect.height}px`,\n        );\n      }\n    }\n\n    // Set hovered tab variables\n    if (hoveredKey) {\n      const hoveredTab = tabRefs.current.get(hoveredKey);\n      if (hoveredTab) {\n        const hoveredRect = hoveredTab.getBoundingClientRect();\n        const relativeLeft = hoveredRect.left - tabsRect.left;\n        const relativeTop = hoveredRect.top - tabsRect.top;\n\n        tabsRef.current.style.setProperty(\n          '--hovered-tab-left',\n          `${relativeLeft}px`,\n        );\n        tabsRef.current.style.setProperty(\n          '--hovered-tab-right',\n          `${relativeLeft + hoveredRect.width}px`,\n        );\n        tabsRef.current.style.setProperty(\n          '--hovered-tab-top',\n          `${relativeTop}px`,\n        );\n        tabsRef.current.style.setProperty(\n          '--hovered-tab-bottom',\n          `${relativeTop + hoveredRect.height}px`,\n        );\n        tabsRef.current.style.setProperty(\n          '--hovered-tab-width',\n          `${hoveredRect.width}px`,\n        );\n        tabsRef.current.style.setProperty(\n          '--hovered-tab-height',\n          `${hoveredRect.height}px`,\n        );\n        // Control transition timing based on whether this is a new hover session\n        const isNewHoverSession = prevHoveredKey.current === null;\n\n        if (isNewHoverSession) {\n          // Starting new hover session: no transitions for position\n          tabsRef.current.style.setProperty(\n            '--hovered-transition-duration',\n            '0s',\n          );\n          // Enable transitions on next frame for future tab switches\n          requestAnimationFrame(() => {\n            if (tabsRef.current) {\n              tabsRef.current.style.setProperty(\n                '--hovered-transition-duration',\n                '0.2s',\n              );\n            }\n          });\n        } else {\n          // Moving between tabs in same session: full transitions\n          tabsRef.current.style.setProperty(\n            '--hovered-transition-duration',\n            '0.2s',\n          );\n        }\n\n        // Update previous hover key for next time\n        prevHoveredKey.current = hoveredKey;\n\n        tabsRef.current.style.setProperty('--hovered-tab-opacity', '1');\n      }\n    } else {\n      // When not hovering, hide with opacity and reset for next hover session\n      tabsRef.current.style.setProperty('--hovered-tab-opacity', '0');\n\n      // Reset previous hover key so next hover is treated as new session\n      prevHoveredKey.current = null;\n    }\n  }, [state?.selectedKey, hoveredKey, tabRefs.current]);\n\n  useEffect(() => {\n    updateCSSVariables();\n  }, [updateCSSVariables, tabRefs.current.size]);\n\n  useEffect(() => {\n    const handleResize = () => updateCSSVariables();\n    window.addEventListener('resize', handleResize);\n    return () => window.removeEventListener('resize', handleResize);\n  }, [updateCSSVariables]);\n\n  return (\n    <>\n      <div\n        className={clsx(classNames.tabActive, styles[classNames.tabActive])}\n      />\n      <div\n        className={clsx(classNames.tabHovered, styles[classNames.tabHovered])}\n      />\n    </>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"TabsIndicators.esm.js","sources":["../../../src/components/Tabs/TabsIndicators.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 { TabListStateContext } from 'react-aria-components';\nimport { useDefinition } from '../../hooks/useDefinition';\nimport { TabsIndicatorsDefinition } from './definition';\nimport { useContext, useEffect, useCallback, useRef } from 'react';\nimport type { TabsIndicatorsProps } from './types';\n\n/**\n * A component that renders the indicators for the toolbar.\n *\n * @internal\n */\nexport const TabsIndicators = (props: TabsIndicatorsProps) => {\n  const { ownProps } = useDefinition(TabsIndicatorsDefinition, props);\n  const { classes, tabRefs, tabsRef, hoveredKey, prevHoveredKey } = ownProps;\n  const state = useContext(TabListStateContext);\n  const prevSelectedKey = useRef<string | null>(null);\n\n  const updateCSSVariables = useCallback(() => {\n    if (!tabsRef.current) return;\n\n    const tabsRect = tabsRef.current.getBoundingClientRect();\n\n    // Set active tab variables\n    if (state?.selectedKey) {\n      const activeTab = tabRefs.current.get(state.selectedKey.toString());\n\n      if (activeTab) {\n        const activeRect = activeTab.getBoundingClientRect();\n        const relativeLeft = activeRect.left - tabsRect.left;\n        const relativeTop = activeRect.top - tabsRect.top;\n\n        // Control transition timing based on whether this is the first time setting active tab\n        const isFirstActiveTab = prevSelectedKey.current === null;\n\n        if (isFirstActiveTab) {\n          // First time setting active tab: no transitions for position\n          tabsRef.current.style.setProperty(\n            '--active-transition-duration',\n            '0s',\n          );\n          // Enable transitions on next frame for future tab switches\n          requestAnimationFrame(() => {\n            if (tabsRef.current) {\n              tabsRef.current.style.setProperty(\n                '--active-transition-duration',\n                '0.25s',\n              );\n            }\n          });\n        } else {\n          // Switching between tabs: full transitions\n          tabsRef.current.style.setProperty(\n            '--active-transition-duration',\n            '0.25s',\n          );\n        }\n\n        // Update previous selected key for next time\n        prevSelectedKey.current = state.selectedKey.toString();\n\n        tabsRef.current.style.setProperty(\n          '--active-tab-left',\n          `${relativeLeft}px`,\n        );\n        tabsRef.current.style.setProperty(\n          '--active-tab-right',\n          `${relativeLeft + activeRect.width}px`,\n        );\n        tabsRef.current.style.setProperty(\n          '--active-tab-top',\n          `${relativeTop}px`,\n        );\n        tabsRef.current.style.setProperty(\n          '--active-tab-bottom',\n          `${relativeTop + activeRect.height}px`,\n        );\n        tabsRef.current.style.setProperty(\n          '--active-tab-width',\n          `${activeRect.width}px`,\n        );\n        tabsRef.current.style.setProperty(\n          '--active-tab-height',\n          `${activeRect.height}px`,\n        );\n      }\n    }\n\n    // Set hovered tab variables\n    if (hoveredKey) {\n      const hoveredTab = tabRefs.current.get(hoveredKey);\n      if (hoveredTab) {\n        const hoveredRect = hoveredTab.getBoundingClientRect();\n        const relativeLeft = hoveredRect.left - tabsRect.left;\n        const relativeTop = hoveredRect.top - tabsRect.top;\n\n        tabsRef.current.style.setProperty(\n          '--hovered-tab-left',\n          `${relativeLeft}px`,\n        );\n        tabsRef.current.style.setProperty(\n          '--hovered-tab-right',\n          `${relativeLeft + hoveredRect.width}px`,\n        );\n        tabsRef.current.style.setProperty(\n          '--hovered-tab-top',\n          `${relativeTop}px`,\n        );\n        tabsRef.current.style.setProperty(\n          '--hovered-tab-bottom',\n          `${relativeTop + hoveredRect.height}px`,\n        );\n        tabsRef.current.style.setProperty(\n          '--hovered-tab-width',\n          `${hoveredRect.width}px`,\n        );\n        tabsRef.current.style.setProperty(\n          '--hovered-tab-height',\n          `${hoveredRect.height}px`,\n        );\n        // Control transition timing based on whether this is a new hover session\n        const isNewHoverSession = prevHoveredKey.current === null;\n\n        if (isNewHoverSession) {\n          // Starting new hover session: no transitions for position\n          tabsRef.current.style.setProperty(\n            '--hovered-transition-duration',\n            '0s',\n          );\n          // Enable transitions on next frame for future tab switches\n          requestAnimationFrame(() => {\n            if (tabsRef.current) {\n              tabsRef.current.style.setProperty(\n                '--hovered-transition-duration',\n                '0.2s',\n              );\n            }\n          });\n        } else {\n          // Moving between tabs in same session: full transitions\n          tabsRef.current.style.setProperty(\n            '--hovered-transition-duration',\n            '0.2s',\n          );\n        }\n\n        // Update previous hover key for next time\n        prevHoveredKey.current = hoveredKey;\n\n        tabsRef.current.style.setProperty('--hovered-tab-opacity', '1');\n      }\n    } else {\n      // When not hovering, hide with opacity and reset for next hover session\n      tabsRef.current.style.setProperty('--hovered-tab-opacity', '0');\n\n      // Reset previous hover key so next hover is treated as new session\n      prevHoveredKey.current = null;\n    }\n  }, [state?.selectedKey, hoveredKey, tabRefs.current]);\n\n  useEffect(() => {\n    updateCSSVariables();\n  }, [updateCSSVariables, tabRefs.current.size]);\n\n  useEffect(() => {\n    const handleResize = () => updateCSSVariables();\n    window.addEventListener('resize', handleResize);\n    return () => window.removeEventListener('resize', handleResize);\n  }, [updateCSSVariables]);\n\n  return (\n    <>\n      <div className={classes.root} />\n      <div className={classes.hovered} />\n    </>\n  );\n};\n"],"names":[],"mappings":"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"}

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

@@ -1,14 +1,66 @@
-const TabsDefinition = {
+import 'react/jsx-runtime';
+import 'clsx';
+import '../../hooks/useBreakpoint.esm.js';
+import '../../hooks/useBg.esm.js';
+import '../../hooks/useDefinition/helpers.esm.js';
+import { defineComponent } from '../../hooks/useDefinition/defineComponent.esm.js';
+import styles from './Tabs.module.css.esm.js';
+
+const TabsDefinition = defineComponent()({
+  styles,
+  classNames: {
+    root: "bui-Tabs"
+  },
+  propDefs: {
+    className: {},
+    children: {}
+  }
+});
+const TabListDefinition = defineComponent()({
+  styles,
+  classNames: {
+    root: "bui-TabListWrapper",
+    tabList: "bui-TabList"
+  },
+  propDefs: {
+    className: {},
+    children: {}
+  }
+});
+const TabDefinition = defineComponent()({
+  styles,
+  classNames: {
+    root: "bui-Tab"
+  },
+  propDefs: {
+    className: {},
+    matchStrategy: {},
+    href: {},
+    id: {}
+  }
+});
+const TabPanelDefinition = defineComponent()({
+  styles,
+  classNames: {
+    root: "bui-TabPanel"
+  },
+  propDefs: {
+    className: {}
+  }
+});
+const TabsIndicatorsDefinition = defineComponent()({
+  styles,
   classNames: {
-    tabs: "bui-Tabs",
-    tabList: "bui-TabList",
-    tabListWrapper: "bui-TabListWrapper",
-    tab: "bui-Tab",
-    tabActive: "bui-TabActive",
-    tabHovered: "bui-TabHovered",
-    panel: "bui-TabPanel"
+    root: "bui-TabActive",
+    hovered: "bui-TabHovered"
+  },
+  propDefs: {
+    tabRefs: {},
+    tabsRef: {},
+    hoveredKey: {},
+    prevHoveredKey: {}
   }
-};
+});
 
-export { TabsDefinition };
+export { TabDefinition, TabListDefinition, TabPanelDefinition, TabsDefinition, TabsIndicatorsDefinition };
 //# sourceMappingURL=definition.esm.js.map