@backstage/ui 0.0.0-nightly-20251023023850 → 0.0.0-nightly-20251104024434

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

@@ -1,41 +1,11 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
-import '../Box/Box.esm.js';
-import '../Grid/Grid.esm.js';
-import '../Flex/Flex.esm.js';
-import '../Container/Container.esm.js';
-import '../Avatar/Avatar.esm.js';
-import '../Button/Button.esm.js';
-import '../Card/Card.esm.js';
-import '../Collapsible/Collapsible.esm.js';
-import '../Dialog/Dialog.esm.js';
-import '../FieldLabel/FieldLabel.esm.js';
-import 'react-aria-components';
 import { useStyles } from '../../hooks/useStyles.esm.js';
-import 'react';
-import { RiArrowLeftSLine, RiArrowRightSLine } from '@remixicon/react';
-import { Text } from '../Text/Text.esm.js';
-import 'react-router-dom';
-import '../Header/Header.module.css.esm.js';
-import '../Tabs/Tabs.esm.js';
-import '../Link/Link.esm.js';
-import '../HeaderPage/HeaderPage.module.css.esm.js';
-import { ButtonIcon } from '../ButtonIcon/ButtonIcon.esm.js';
-import '../ButtonLink/ButtonLink.esm.js';
-import '../Checkbox/Checkbox.esm.js';
-import '../RadioGroup/RadioGroup.esm.js';
-import '../Table/Table.module.css.esm.js';
-import '../Table/components/Cell.esm.js';
-import '@base-ui-components/react/avatar';
 import styles from './TablePagination.module.css.esm.js';
-import '../TagGroup/TagGroup.module.css.esm.js';
-import '../TextField/TextField.esm.js';
-import '../Tooltip/Tooltip.esm.js';
-import '../Menu/Menu.module.css.esm.js';
-import '../SearchField/SearchField.esm.js';
+import { RiArrowLeftSLine, RiArrowRightSLine } from '@remixicon/react';
 import { Select } from '../Select/Select.esm.js';
-import '../Skeleton/Skeleton.module.css.esm.js';
-import '../Switch/Switch.esm.js';
+import { ButtonIcon } from '../ButtonIcon/ButtonIcon.esm.js';
+import { Text } from '../Text/Text.esm.js';
 
 function TablePagination(props) {
   const { classNames, cleanedProps } = useStyles("TablePagination", {

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 { Text, ButtonIcon, Select } from '../..';\nimport type { TablePaginationProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\nimport styles from './TablePagination.module.css';\nimport { RiArrowLeftSLine, RiArrowRightSLine } from '@remixicon/react';\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 { classNames, cleanedProps } = useStyles('TablePagination', {\n    showPageSizeOptions: true,\n    ...props,\n  });\n  const {\n    className,\n    offset,\n    pageSize,\n    rowCount,\n    onNextPage,\n    onPreviousPage,\n    onPageSizeChange,\n    setOffset,\n    setPageSize,\n    showPageSizeOptions,\n    ...rest\n  } = cleanedProps;\n\n  const currentOffset = offset ?? 0;\n  const currentPageSize = pageSize ?? 10;\n\n  const fromCount = currentOffset + 1;\n  const toCount = Math.min(currentOffset + currentPageSize, rowCount ?? 0);\n\n  const nextPage = () => {\n    const totalRows = rowCount ?? 0;\n    const nextOffset = currentOffset + currentPageSize;\n\n    // Check if there are more items to navigate to\n    if (nextOffset < totalRows) {\n      onNextPage?.(); // Analytics tracking\n      setOffset?.(nextOffset); // Navigate to next page\n    }\n  };\n\n  const previousPage = () => {\n    // Check if we can go to previous page\n    if (currentOffset > 0) {\n      onPreviousPage?.(); // Analytics tracking\n      const prevOffset = Math.max(0, currentOffset - currentPageSize);\n      setOffset?.(prevOffset); // Navigate to previous page\n    }\n  };\n\n  return (\n    <div\n      className={clsx(classNames.root, styles[classNames.root], className)}\n      {...rest}\n    >\n      <div className={clsx(classNames.left, styles[classNames.left])}>\n        {showPageSizeOptions && (\n          <Select\n            name=\"pageSize\"\n            size=\"small\"\n            placeholder=\"Show 10 results\"\n            options={[\n              { label: 'Show 5 results', value: '5' },\n              { label: 'Show 10 results', value: '10' },\n              { label: 'Show 20 results', value: '20' },\n              { label: 'Show 30 results', value: '30' },\n              { label: 'Show 40 results', value: '40' },\n              { label: 'Show 50 results', value: '50' },\n            ]}\n            selectedKey={pageSize?.toString()}\n            onSelectionChange={value => {\n              const newPageSize = Number(value);\n              setPageSize?.(newPageSize);\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        <Text\n          as=\"p\"\n          variant=\"body-medium\"\n        >{`${fromCount} - ${toCount} of ${rowCount}`}</Text>\n        <ButtonIcon\n          variant=\"secondary\"\n          size=\"small\"\n          onClick={previousPage}\n          isDisabled={currentOffset === 0}\n          icon={<RiArrowLeftSLine />}\n          aria-label=\"Previous\"\n        />\n        <ButtonIcon\n          variant=\"secondary\"\n          size=\"small\"\n          onClick={nextPage}\n          isDisabled={\n            rowCount !== undefined &&\n            currentOffset + currentPageSize >= rowCount\n          }\n          icon={<RiArrowRightSLine />}\n          aria-label=\"Next\"\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 clsx from 'clsx';\nimport { Text, ButtonIcon, Select } from '../..';\nimport type { TablePaginationProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\nimport styles from './TablePagination.module.css';\nimport { RiArrowLeftSLine, RiArrowRightSLine } from '@remixicon/react';\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 { classNames, cleanedProps } = useStyles('TablePagination', {\n    showPageSizeOptions: true,\n    ...props,\n  });\n  const {\n    className,\n    offset,\n    pageSize,\n    rowCount,\n    onNextPage,\n    onPreviousPage,\n    onPageSizeChange,\n    setOffset,\n    setPageSize,\n    showPageSizeOptions,\n    ...rest\n  } = cleanedProps;\n\n  const currentOffset = offset ?? 0;\n  const currentPageSize = pageSize ?? 10;\n\n  const fromCount = currentOffset + 1;\n  const toCount = Math.min(currentOffset + currentPageSize, rowCount ?? 0);\n\n  const nextPage = () => {\n    const totalRows = rowCount ?? 0;\n    const nextOffset = currentOffset + currentPageSize;\n\n    // Check if there are more items to navigate to\n    if (nextOffset < totalRows) {\n      onNextPage?.(); // Analytics tracking\n      setOffset?.(nextOffset); // Navigate to next page\n    }\n  };\n\n  const previousPage = () => {\n    // Check if we can go to previous page\n    if (currentOffset > 0) {\n      onPreviousPage?.(); // Analytics tracking\n      const prevOffset = Math.max(0, currentOffset - currentPageSize);\n      setOffset?.(prevOffset); // Navigate to previous page\n    }\n  };\n\n  return (\n    <div\n      className={clsx(classNames.root, styles[classNames.root], className)}\n      {...rest}\n    >\n      <div className={clsx(classNames.left, styles[classNames.left])}>\n        {showPageSizeOptions && (\n          <Select\n            name=\"pageSize\"\n            size=\"small\"\n            placeholder=\"Show 10 results\"\n            options={[\n              { label: 'Show 5 results', value: '5' },\n              { label: 'Show 10 results', value: '10' },\n              { label: 'Show 20 results', value: '20' },\n              { label: 'Show 30 results', value: '30' },\n              { label: 'Show 40 results', value: '40' },\n              { label: 'Show 50 results', value: '50' },\n            ]}\n            selectedKey={pageSize?.toString()}\n            onSelectionChange={value => {\n              const newPageSize = Number(value);\n              setPageSize?.(newPageSize);\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        <Text\n          as=\"p\"\n          variant=\"body-medium\"\n        >{`${fromCount} - ${toCount} of ${rowCount}`}</Text>\n        <ButtonIcon\n          variant=\"secondary\"\n          size=\"small\"\n          onClick={previousPage}\n          isDisabled={currentOffset === 0}\n          icon={<RiArrowLeftSLine />}\n          aria-label=\"Previous\"\n        />\n        <ButtonIcon\n          variant=\"secondary\"\n          size=\"small\"\n          onClick={nextPage}\n          isDisabled={\n            rowCount !== undefined &&\n            currentOffset + currentPageSize >= rowCount\n          }\n          icon={<RiArrowRightSLine />}\n          aria-label=\"Next\"\n        />\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}

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

@@ -26,7 +26,7 @@ const isTabActive = (tabHref, currentPathname, matchStrategy) => {
 };
 const Tabs = (props) => {
   const { classNames, cleanedProps } = useStyles("Tabs", props);
-  const { children, ...rest } = cleanedProps;
+  const { className, children, ...rest } = cleanedProps;
   const tabsRef = useRef(null);
   const tabRefs = useRef(/* @__PURE__ */ new Map());
   const [hoveredKey, setHoveredKey] = useState(null);
@@ -77,7 +77,7 @@ const Tabs = (props) => {
   return /* @__PURE__ */ jsx(TabsContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(RouterProvider, { navigate, useHref, children: /* @__PURE__ */ jsx(
     Tabs$1,
     {
-      className: clsx(classNames.tabs, styles[classNames.tabs]),
+      className: clsx(classNames.tabs, styles[classNames.tabs], className),
       keyboardActivation: "manual",
       selectedKey: computedSelectedKey,
       ref: tabsRef,
@@ -88,7 +88,7 @@ const Tabs = (props) => {
 };
 const TabList = (props) => {
   const { classNames, cleanedProps } = useStyles("Tabs", props);
-  const { children, ...rest } = cleanedProps;
+  const { className, children, ...rest } = cleanedProps;
   const { setHoveredKey, tabRefs, tabsRef, hoveredKey, prevHoveredKey } = useTabsContext();
   const handleHover = (key) => {
     setHoveredKey(key);
@@ -107,7 +107,8 @@ const TabList = (props) => {
     {
       className: clsx(
         classNames.tabListWrapper,
-        styles[classNames.tabListWrapper]
+        styles[classNames.tabListWrapper],
+        className
       ),
       children: [
         /* @__PURE__ */ jsx(
@@ -135,6 +136,7 @@ const TabList = (props) => {
 const Tab = (props) => {
   const { classNames, cleanedProps } = useStyles("Tabs", props);
   const {
+    className,
     href,
     children,
     id,
@@ -146,7 +148,7 @@ const Tab = (props) => {
     Tab$1,
     {
       id,
-      className: clsx(classNames.tab, styles[classNames.tab]),
+      className: clsx(classNames.tab, styles[classNames.tab], className),
       ref: (el) => setTabRef(id, el),
       href,
       ...rest,
@@ -156,11 +158,11 @@ const Tab = (props) => {
 };
 const TabPanel = (props) => {
   const { classNames, cleanedProps } = useStyles("Tabs", props);
-  const { children, ...rest } = cleanedProps;
+  const { className, children, ...rest } = cleanedProps;
   return /* @__PURE__ */ jsx(
     TabPanel$1,
     {
-      className: clsx(classNames.panel, styles[classNames.panel]),
+      className: clsx(classNames.panel, styles[classNames.panel], className),
       ...rest,
       children
     }

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  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';\nimport { useStyles } from '../../hooks/useStyles';\nimport styles from './Tabs.module.css';\nimport clsx from 'clsx';\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 { classNames, cleanedProps } = useStyles('Tabs', props);\n  const { 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  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        //No route matches - check if all tabs have hrefs (pure navigation)\n        const allTabsHaveHref = tabListChildren.every(\n          child => isValidElement(child) && child.props.href,\n        );\n\n        if (allTabsHaveHref) {\n          // Pure navigation tabs, no route match\n          return null;\n        } else {\n          // Mixed tabs or pure local state\n          return undefined;\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={clsx(classNames.tabs, styles[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 { classNames, cleanedProps } = useStyles('Tabs', props);\n  const { 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      )}\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 * A component that renders a tab.\n *\n * @public\n */\nexport const Tab = (props: TabProps) => {\n  const { classNames, cleanedProps } = useStyles('Tabs', props);\n  const {\n    href,\n    children,\n    id,\n    matchStrategy: _matchStrategy,\n    ...rest\n  } = cleanedProps;\n  const { setTabRef } = useTabsContext();\n\n  return (\n    <AriaTab\n      id={id}\n      className={clsx(classNames.tab, styles[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 { classNames, cleanedProps } = useStyles('Tabs', props);\n  const { children, ...rest } = cleanedProps;\n\n  return (\n    <AriaTabPanel\n      className={clsx(classNames.panel, styles[classNames.panel])}\n      {...rest}\n    >\n      {children}\n    </AriaTabPanel>\n  );\n};\n"],"names":["child","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';\nimport { useStyles } from '../../hooks/useStyles';\nimport styles from './Tabs.module.css';\nimport clsx from 'clsx';\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 { classNames, cleanedProps } = useStyles('Tabs', 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  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        //No route matches - check if all tabs have hrefs (pure navigation)\n        const allTabsHaveHref = tabListChildren.every(\n          child => isValidElement(child) && child.props.href,\n        );\n\n        if (allTabsHaveHref) {\n          // Pure navigation tabs, no route match\n          return null;\n        } else {\n          // Mixed tabs or pure local state\n          return undefined;\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={clsx(classNames.tabs, styles[classNames.tabs], className)}\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 { classNames, cleanedProps } = useStyles('Tabs', 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 * A component that renders a tab.\n *\n * @public\n */\nexport const Tab = (props: TabProps) => {\n  const { classNames, cleanedProps } = useStyles('Tabs', props);\n  const {\n    className,\n    href,\n    children,\n    id,\n    matchStrategy: _matchStrategy,\n    ...rest\n  } = cleanedProps;\n  const { setTabRef } = useTabsContext();\n\n  return (\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 * A component that renders the content of a tab.\n *\n * @public\n */\nexport const TabPanel = (props: TabPanelProps) => {\n  const { classNames, cleanedProps } = useStyles('Tabs', 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":["child","AriaTabs","AriaTabList","AriaTab","AriaTabPanel"],"mappings":"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"}

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

@@ -2,7 +2,7 @@ import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import clsx from 'clsx';
 import { useStyles } from '../../hooks/useStyles.esm.js';
-import stylesText from './Text.module.css.esm.js';
+import styles from './Text.module.css.esm.js';
 
 function TextComponent(props, ref) {
   const Component = props.as || "span";
@@ -12,12 +12,12 @@ function TextComponent(props, ref) {
     color: "primary",
     ...props
   });
-  const { className, ...restProps } = cleanedProps;
+  const { className, truncate, ...restProps } = cleanedProps;
   return /* @__PURE__ */ jsx(
     Component,
     {
       ref,
-      className: clsx(classNames.root, stylesText[classNames.root], className),
+      className: clsx(classNames.root, styles[classNames.root], className),
       ...dataAttributes,
       ...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';\nimport styles from './Text.module.css';\n\nfunction TextComponent<T extends ElementType = 'span'>(\n  props: TextProps<T>,\n  ref: React.Ref<any>,\n) {\n  const Component = props.as || 'span';\n\n  const { classNames, dataAttributes, cleanedProps } = useStyles('Text', {\n    variant: 'body-medium',\n    weight: 'regular',\n    color: 'primary',\n    ...props,\n  });\n\n  const { className, ...restProps } = cleanedProps;\n\n  return (\n    <Component\n      ref={ref}\n      className={clsx(classNames.root, styles[classNames.root], className)}\n      {...dataAttributes}\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":["styles"],"mappings":";;;;;;AAuBA,SAAS,aAAA,CACP,OACA,GAAA,EACA;AACA,EAAA,MAAM,SAAA,GAAY,MAAM,EAAA,IAAM,MAAA;AAE9B,EAAA,MAAM,EAAE,UAAA,EAAY,cAAA,EAAgB,YAAA,EAAa,GAAI,UAAU,MAAA,EAAQ;AAAA,IACrE,OAAA,EAAS,aAAA;AAAA,IACT,MAAA,EAAQ,SAAA;AAAA,IACR,KAAA,EAAO,SAAA;AAAA,IACP,GAAG;AAAA,GACJ,CAAA;AAED,EAAA,MAAM,EAAE,SAAA,EAAW,GAAG,SAAA,EAAU,GAAI,YAAA;AAEpC,EAAA,uBACE,GAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAW,KAAK,UAAA,CAAW,IAAA,EAAMA,WAAO,UAAA,CAAW,IAAI,GAAG,SAAS,CAAA;AAAA,MAClE,GAAG,cAAA;AAAA,MACH,GAAG;AAAA;AAAA,GACN;AAEJ;AAEA,aAAA,CAAc,WAAA,GAAc,MAAA;AAGrB,MAAM,IAAA,GAAO,WAAW,aAAa;AAO5C,IAAA,CAAK,WAAA,GAAc,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';\nimport styles from './Text.module.css';\n\nfunction TextComponent<T extends ElementType = 'span'>(\n  props: TextProps<T>,\n  ref: React.Ref<any>,\n) {\n  const Component = props.as || 'span';\n\n  const { classNames, dataAttributes, cleanedProps } = useStyles('Text', {\n    variant: 'body-medium',\n    weight: 'regular',\n    color: 'primary',\n    ...props,\n  });\n\n  const { className, truncate, ...restProps } = cleanedProps;\n\n  return (\n    <Component\n      ref={ref}\n      className={clsx(classNames.root, styles[classNames.root], className)}\n      {...dataAttributes}\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":";;;;;;AAuBA,SAAS,aAAA,CACP,OACA,GAAA,EACA;AACA,EAAA,MAAM,SAAA,GAAY,MAAM,EAAA,IAAM,MAAA;AAE9B,EAAA,MAAM,EAAE,UAAA,EAAY,cAAA,EAAgB,YAAA,EAAa,GAAI,UAAU,MAAA,EAAQ;AAAA,IACrE,OAAA,EAAS,aAAA;AAAA,IACT,MAAA,EAAQ,SAAA;AAAA,IACR,KAAA,EAAO,SAAA;AAAA,IACP,GAAG;AAAA,GACJ,CAAA;AAED,EAAA,MAAM,EAAE,SAAA,EAAW,QAAA,EAAU,GAAG,WAAU,GAAI,YAAA;AAE9C,EAAA,uBACE,GAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAW,KAAK,UAAA,CAAW,IAAA,EAAM,OAAO,UAAA,CAAW,IAAI,GAAG,SAAS,CAAA;AAAA,MAClE,GAAG,cAAA;AAAA,MACH,GAAG;AAAA;AAAA,GACN;AAEJ;AAEA,aAAA,CAAc,WAAA,GAAc,MAAA;AAGrB,MAAM,IAAA,GAAO,WAAW,aAAa;AAO5C,IAAA,CAAK,WAAA,GAAc,MAAA;;;;"}

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

@@ -1,8 +1,8 @@
 import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
 
 var css_248z = "/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer tokens, base, components, utilities;\n\n@layer components {\n  .Text-module_bui-Text__7NvCl {\n    font-family: var(--bui-font-regular);\n    padding: 0;\n    margin: 0;\n  }\n\n  .Text-module_bui-Text__7NvCl[data-variant='title-large'] {\n    font-size: var(--bui-font-size-8);\n    line-height: 140%;\n  }\n\n  .Text-module_bui-Text__7NvCl[data-variant='title-medium'] {\n    font-size: var(--bui-font-size-7);\n    line-height: 140%;\n  }\n\n  .Text-module_bui-Text__7NvCl[data-variant='title-small'] {\n    font-size: var(--bui-font-size-6);\n    line-height: 140%;\n  }\n\n  .Text-module_bui-Text__7NvCl[data-variant='title-x-small'] {\n    font-size: var(--bui-font-size-5);\n    line-height: 140%;\n  }\n\n  .Text-module_bui-Text__7NvCl[data-variant='body-large'] {\n    font-size: var(--bui-font-size-4);\n    line-height: 140%;\n  }\n\n  .Text-module_bui-Text__7NvCl[data-variant='body-medium'] {\n    font-size: var(--bui-font-size-3);\n    line-height: 140%;\n  }\n\n  .Text-module_bui-Text__7NvCl[data-variant='body-small'] {\n    font-size: var(--bui-font-size-2);\n    line-height: 140%;\n  }\n\n  .Text-module_bui-Text__7NvCl[data-variant='body-x-small'] {\n    font-size: var(--bui-font-size-1);\n    line-height: 140%;\n  }\n\n  .Text-module_bui-Text__7NvCl[data-weight='regular'] {\n    font-weight: var(--bui-font-weight-regular);\n  }\n\n  .Text-module_bui-Text__7NvCl[data-weight='bold'] {\n    font-weight: var(--bui-font-weight-bold);\n  }\n\n  .Text-module_bui-Text__7NvCl[data-color='primary'] {\n    color: var(--bui-fg-primary);\n  }\n\n  .Text-module_bui-Text__7NvCl[data-color='secondary'] {\n    color: var(--bui-fg-secondary);\n  }\n\n  .Text-module_bui-Text__7NvCl[data-color='danger'] {\n    color: var(--bui-fg-danger);\n  }\n\n  .Text-module_bui-Text__7NvCl[data-color='warning'] {\n    color: var(--bui-fg-warning);\n  }\n\n  .Text-module_bui-Text__7NvCl[data-color='success'] {\n    color: var(--bui-fg-success);\n  }\n\n  .Text-module_bui-Text__7NvCl[data-truncate] {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .Text-module_bui-Text__7NvCl[data-as='span'],\n  .Text-module_bui-Text__7NvCl[data-as='label'],\n  .Text-module_bui-Text__7NvCl[data-as='strong'],\n  .Text-module_bui-Text__7NvCl[data-as='em'],\n  .Text-module_bui-Text__7NvCl[data-as='small'] {\n    display: inline-block;\n  }\n}\n";
-var stylesText = {"bui-Text":"Text-module_bui-Text__7NvCl"};
+var styles = {"bui-Text":"Text-module_bui-Text__7NvCl"};
 styleInject(css_248z);
 
-export { stylesText as default };
+export { styles as default };
 //# sourceMappingURL=Text.module.css.esm.js.map

package/dist/components/VisuallyHidden/VisuallyHidden.esm.js

@@ -0,0 +1,19 @@
+import { jsx } from 'react/jsx-runtime';
+import { useStyles } from '../../hooks/useStyles.esm.js';
+import styles from './VisuallyHidden.module.css.esm.js';
+import clsx from 'clsx';
+
+const VisuallyHidden = (props) => {
+  const { classNames, cleanedProps } = useStyles("VisuallyHidden", props);
+  const { className, ...rest } = cleanedProps;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: clsx(classNames.root, styles[classNames.root], className),
+      ...rest
+    }
+  );
+};
+
+export { VisuallyHidden };
+//# sourceMappingURL=VisuallyHidden.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VisuallyHidden.esm.js","sources":["../../../src/components/VisuallyHidden/VisuallyHidden.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 { useStyles } from '../../hooks/useStyles';\nimport { VisuallyHiddenProps } from './types';\nimport styles from './VisuallyHidden.module.css';\nimport clsx from 'clsx';\n\n/**\n * Visually hides content while keeping it accessible to screen readers.\n * Useful for descriptive labels and other screen-reader-only content.\n *\n * Note: This component is for content that should ALWAYS remain visually hidden.\n * For skip links that become visible on focus, use a different approach.\n *\n * @public\n */\nexport const VisuallyHidden = (props: VisuallyHiddenProps) => {\n  const { classNames, cleanedProps } = useStyles('VisuallyHidden', props);\n  const { className, ...rest } = cleanedProps;\n\n  return (\n    <div\n      className={clsx(classNames.root, styles[classNames.root], className)}\n      {...rest}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;AA8BO,MAAM,cAAA,GAAiB,CAAC,KAAA,KAA+B;AAC5D,EAAA,MAAM,EAAE,UAAA,EAAY,YAAA,EAAa,GAAI,SAAA,CAAU,kBAAkB,KAAK,CAAA;AACtE,EAAA,MAAM,EAAE,SAAA,EAAW,GAAG,IAAA,EAAK,GAAI,YAAA;AAE/B,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,KAAK,UAAA,CAAW,IAAA,EAAM,OAAO,UAAA,CAAW,IAAI,GAAG,SAAS,CAAA;AAAA,MAClE,GAAG;AAAA;AAAA,GACN;AAEJ;;;;"}

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

@@ -0,0 +1,8 @@
+import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
+
+var css_248z = "/*\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\n@layer tokens, base, components, utilities;\n\n@layer components {\n  .VisuallyHidden-module_bui-VisuallyHidden__22L23 {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip: rect(0 0 0 0);\n    clip-path: inset(100%);\n    white-space: nowrap;\n    border: 0;\n  }\n}\n";
+var styles = {"bui-VisuallyHidden":"VisuallyHidden-module_bui-VisuallyHidden__22L23"};
+styleInject(css_248z);
+
+export { styles as default };
+//# sourceMappingURL=VisuallyHidden.module.css.esm.js.map

package/dist/components/VisuallyHidden/VisuallyHidden.module.css.esm.js.map

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

package/dist/index.d.ts

@@ -1,7 +1,6 @@
 import * as react from 'react';
 import { ReactElement, ReactNode, ElementType, ComponentPropsWithRef, ComponentProps } from 'react';
-import { Avatar as Avatar$1 } from '@base-ui-components/react/avatar';
-import { ButtonProps as ButtonProps$1, DialogTriggerProps as DialogTriggerProps$1, ModalOverlayProps, HeadingProps, 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, TableProps, TableHeaderProps, TableBodyProps, ColumnProps as ColumnProps$1, CellProps as CellProps$1, RowProps, TagGroupProps as TagGroupProps$1, TagListProps, TagProps as TagProps$1, TextFieldProps as TextFieldProps$1, TooltipProps as TooltipProps$1, TooltipTriggerComponentProps, MenuTriggerProps as MenuTriggerProps$1, SubmenuTriggerProps as SubmenuTriggerProps$1, MenuProps as MenuProps$1, PopoverProps, ListBoxProps, MenuItemProps as MenuItemProps$1, ListBoxItemProps, MenuSectionProps as MenuSectionProps$1, SeparatorProps, SearchFieldProps as SearchFieldProps$1, SelectProps as SelectProps$1, SwitchProps as SwitchProps$1 } from 'react-aria-components';
+import { ButtonProps as ButtonProps$1, DialogTriggerProps as DialogTriggerProps$1, ModalOverlayProps, HeadingProps, TabsProps as TabsProps$1, TabListProps as TabListProps$1, TabProps as TabProps$1, TabPanelProps as TabPanelProps$1, LinkProps as LinkProps$1, CheckboxProps as CheckboxProps$1, RadioGroupProps as RadioGroupProps$1, RadioProps as RadioProps$1, TableProps, TableHeaderProps, TableBodyProps, ColumnProps as ColumnProps$1, CellProps as CellProps$1, RowProps, TagGroupProps as TagGroupProps$1, TagListProps, TagProps as TagProps$1, TextFieldProps as TextFieldProps$1, TooltipProps as TooltipProps$1, TooltipTriggerComponentProps, MenuTriggerProps as MenuTriggerProps$1, SubmenuTriggerProps as SubmenuTriggerProps$1, MenuProps as MenuProps$1, PopoverProps, ListBoxProps, MenuItemProps as MenuItemProps$1, ListBoxItemProps, MenuSectionProps as MenuSectionProps$1, SeparatorProps, 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';
@@ -56,12 +55,11 @@ declare const componentDefinitions: {
     };
     readonly Checkbox: {
         readonly classNames: {
-            readonly root: "bui-CheckboxRoot";
-            readonly label: "bui-CheckboxLabel";
+            readonly root: "bui-Checkbox";
             readonly indicator: "bui-CheckboxIndicator";
         };
         readonly dataAttributes: {
-            readonly checked: readonly [true, false];
+            readonly selected: readonly [true, false];
         };
     };
     readonly Collapsible: {
@@ -160,6 +158,8 @@ declare const componentDefinitions: {
         readonly dataAttributes: {
             readonly variant: readonly ["subtitle", "body", "caption", "label"];
             readonly weight: readonly ["regular", "bold"];
+            readonly color: readonly ["primary", "secondary", "danger", "warning", "success"];
+            readonly truncate: readonly [true, false];
         };
     };
     readonly List: {
@@ -326,6 +326,11 @@ declare const componentDefinitions: {
             readonly arrow: "bui-TooltipArrow";
         };
     };
+    readonly VisuallyHidden: {
+        readonly classNames: {
+            readonly root: "bui-VisuallyHidden";
+        };
+    };
 };
 
 /** @public */
@@ -501,14 +506,31 @@ interface ContainerProps {
 declare const Container: react.ForwardRefExoticComponent<ContainerProps & react.RefAttributes<HTMLDivElement>>;
 
 /** @public */
-interface AvatarProps extends React.ComponentPropsWithoutRef<typeof Avatar$1.Root> {
+interface AvatarProps extends React.ComponentPropsWithoutRef<'div'> {
+    /**
+     * URL of the image to display
+     */
     src: string;
+    /**
+     * Name of the person - used for generating initials and accessibility labels
+     */
     name: string;
-    size?: 'small' | 'medium' | 'large';
+    /**
+     * Size of the avatar
+     * @defaultValue 'medium'
+     */
+    size?: 'x-small' | 'small' | 'medium' | 'large' | 'x-large';
+    /**
+     * Determines how the avatar is presented to assistive technologies.
+     * - 'informative': Avatar is announced as "\{name\}" to screen readers
+     * - 'decoration': Avatar is hidden from screen readers (use when name appears in adjacent text)
+     * @defaultValue 'informative'
+     */
+    purpose?: 'decoration' | 'informative';
 }
 
 /** @public */
-declare const Avatar: react.ForwardRefExoticComponent<AvatarProps & react.RefAttributes<HTMLSpanElement>>;
+declare const Avatar: react.ForwardRefExoticComponent<AvatarProps & react.RefAttributes<HTMLDivElement>>;
 
 /**
  * Properties for {@link Button}
@@ -641,7 +663,7 @@ declare const DialogBody: react.ForwardRefExoticComponent<DialogBodyProps & reac
 declare const DialogFooter: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
 
 /** @public */
-interface FieldLabelProps {
+interface FieldLabelProps extends Pick<React.HTMLAttributes<HTMLDivElement>, 'className'> {
     /**
      * The label of the text field
      */
@@ -745,6 +767,7 @@ interface HeaderProps {
     customActions?: React.ReactNode;
     tabs?: HeaderTab[];
     onTabSelectionChange?: TabsProps$1['onSelectionChange'];
+    className?: string;
 }
 /**
  * Represents a tab item in the header navigation.
@@ -785,6 +808,7 @@ interface HeaderPageProps {
     customActions?: React.ReactNode;
     tabs?: HeaderTab[];
     breadcrumbs?: HeaderPageBreadcrumb[];
+    className?: string;
 }
 /**
  * Represents a breadcrumb item in the header.
@@ -834,24 +858,15 @@ interface ButtonLinkProps extends LinkProps$1 {
 declare const ButtonLink: react.ForwardRefExoticComponent<ButtonLinkProps & react.RefAttributes<HTMLAnchorElement>>;
 
 /** @public */
-interface CheckboxProps {
-    label?: string;
-    defaultChecked?: boolean;
-    checked?: boolean;
-    onChange?: (checked: boolean) => void;
-    disabled?: boolean;
-    required?: boolean;
-    className?: string;
-    name?: string;
-    value?: string;
-    style?: React.CSSProperties;
+interface CheckboxProps extends CheckboxProps$1 {
+    children: React.ReactNode;
 }
 
 /** @public */
-declare const Checkbox: react.ForwardRefExoticComponent<CheckboxProps & react.RefAttributes<HTMLButtonElement>>;
+declare const Checkbox: react.ForwardRefExoticComponent<CheckboxProps & react.RefAttributes<HTMLLabelElement>>;
 
 /** @public */
-interface RadioGroupProps extends Omit<RadioGroupProps$1, 'children'>, Omit<FieldLabelProps, 'htmlFor' | 'id'> {
+interface RadioGroupProps extends Omit<RadioGroupProps$1, 'children'>, Omit<FieldLabelProps, 'htmlFor' | 'id' | 'className'> {
     children?: ReactNode;
 }
 /** @public */
@@ -1051,7 +1066,7 @@ declare const Text: {
 };
 
 /** @public */
-interface TextFieldProps extends TextFieldProps$1, Omit<FieldLabelProps, 'htmlFor' | 'id'> {
+interface TextFieldProps extends TextFieldProps$1, Omit<FieldLabelProps, 'htmlFor' | 'id' | 'className'> {
     /**
      * The HTML input type for the text field
      *
@@ -1165,7 +1180,7 @@ declare const MenuSection: (props: MenuSectionProps<object>) => react_jsx_runtim
 declare const MenuSeparator: (props: MenuSeparatorProps) => react_jsx_runtime.JSX.Element;
 
 /** @public */
-interface SearchFieldProps extends SearchFieldProps$1, Omit<FieldLabelProps, 'htmlFor' | 'id'> {
+interface SearchFieldProps extends SearchFieldProps$1, Omit<FieldLabelProps, 'htmlFor' | 'id' | 'className'> {
     /**
      * An icon to render before the input
      */
@@ -1203,7 +1218,7 @@ declare const Link: react.ForwardRefExoticComponent<LinkProps & react.RefAttribu
 interface SelectProps extends SelectProps$1<{
     name: string;
     value: string;
-}>, Omit<FieldLabelProps, 'htmlFor' | 'id'> {
+}>, Omit<FieldLabelProps, 'htmlFor' | 'id' | 'className'> {
     /**
      * An icon to render before the input
      */
@@ -1247,6 +1262,26 @@ interface SwitchProps extends SwitchProps$1 {
 /** @public */
 declare const Switch: react.ForwardRefExoticComponent<SwitchProps & react.RefAttributes<HTMLLabelElement>>;
 
+/**
+ * Properties for {@link VisuallyHidden}
+ *
+ * @public
+ */
+interface VisuallyHiddenProps extends ComponentProps<'div'> {
+    children?: React.ReactNode;
+}
+
+/**
+ * Visually hides content while keeping it accessible to screen readers.
+ * Useful for descriptive labels and other screen-reader-only content.
+ *
+ * Note: This component is for content that should ALWAYS remain visually hidden.
+ * For skip links that become visible on focus, use a different approach.
+ *
+ * @public
+ */
+declare const VisuallyHidden: (props: VisuallyHiddenProps) => react_jsx_runtime.JSX.Element;
+
 /** @public */
 declare const useBreakpoint: () => {
     breakpoint: Breakpoint;
@@ -1254,4 +1289,4 @@ declare const useBreakpoint: () => {
     down: (key: Breakpoint) => boolean;
 };
 
-export { type AlignItems, Avatar, type AvatarProps, type Border, type BorderRadius, Box, type BoxProps, type Breakpoint, Button, ButtonIcon, type ButtonIconProps, ButtonLink, type ButtonLinkProps, type ButtonProps, Card, CardBody, type CardBodyProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, Cell, CellProfile, type CellProfileProps, type CellProps, Checkbox, type CheckboxProps, type ClassNamesMap, Collapsible, Column, type ColumnProps, type Columns, type ComponentClassNames, type ComponentDefinition, type ComponentDefinitionName, Container, type ContainerProps, type DataAttributeValues, type DataAttributesMap, Dialog, DialogBody, type DialogBodyProps, DialogFooter, DialogHeader, type DialogHeaderProps, type DialogProps, DialogTrigger, type DialogTriggerProps, type Display, FieldLabel, type FieldLabelProps, Flex, type FlexDirection, type FlexProps, type FlexWrap, Grid, type GridItemProps, type GridProps, Header, HeaderPage, type HeaderPageBreadcrumb, type HeaderPageProps, type HeaderProps, type HeaderTab, type JustifyContent, Link, type LinkProps, Menu, MenuAutocomplete, type MenuAutocompleteListBoxProps, MenuAutocompleteListbox, type MenuAutocompleteProps, MenuItem, type MenuItemProps, MenuListBox, MenuListBoxItem, type MenuListBoxItemProps, type MenuListBoxProps, type MenuProps, MenuSection, type MenuSectionProps, MenuSeparator, type MenuSeparatorProps, MenuTrigger, type MenuTriggerProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, type Responsive, Row, SearchField, type SearchFieldProps, Select, type SelectProps, Skeleton, type SkeletonProps, type Space, type SpaceProps, SubmenuTrigger, type SubmenuTriggerProps, Switch, type SwitchProps, Tab, TabList, type TabListProps, type TabMatchStrategy, TabPanel, type TabPanelProps, type TabProps, Table, TableBody, TableHeader, TablePagination, type TablePaginationProps, Tabs, type TabsProps, Tag, TagGroup, type TagGroupProps, type TagProps, Text, type TextColorStatus, type TextColors, TextField, type TextFieldProps, type TextOwnProps, type TextProps, type TextVariants, type TextWeights, Tooltip, type TooltipProps, TooltipTrigger, type UseTableConfig, type UseTablePagination, type UseTablePaginationConfig, type UseTableResult, type UtilityProps, componentDefinitions, useBreakpoint, useTable };
+export { type AlignItems, Avatar, type AvatarProps, type Border, type BorderRadius, Box, type BoxProps, type Breakpoint, Button, ButtonIcon, type ButtonIconProps, ButtonLink, type ButtonLinkProps, type ButtonProps, Card, CardBody, type CardBodyProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, Cell, CellProfile, type CellProfileProps, type CellProps, Checkbox, type CheckboxProps, type ClassNamesMap, Collapsible, Column, type ColumnProps, type Columns, type ComponentClassNames, type ComponentDefinition, type ComponentDefinitionName, Container, type ContainerProps, type DataAttributeValues, type DataAttributesMap, Dialog, DialogBody, type DialogBodyProps, DialogFooter, DialogHeader, type DialogHeaderProps, type DialogProps, DialogTrigger, type DialogTriggerProps, type Display, FieldLabel, type FieldLabelProps, Flex, type FlexDirection, type FlexProps, type FlexWrap, Grid, type GridItemProps, type GridProps, Header, HeaderPage, type HeaderPageBreadcrumb, type HeaderPageProps, type HeaderProps, type HeaderTab, type JustifyContent, Link, type LinkProps, Menu, MenuAutocomplete, type MenuAutocompleteListBoxProps, MenuAutocompleteListbox, type MenuAutocompleteProps, MenuItem, type MenuItemProps, MenuListBox, MenuListBoxItem, type MenuListBoxItemProps, type MenuListBoxProps, type MenuProps, MenuSection, type MenuSectionProps, MenuSeparator, type MenuSeparatorProps, MenuTrigger, type MenuTriggerProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, type Responsive, Row, SearchField, type SearchFieldProps, Select, type SelectProps, Skeleton, type SkeletonProps, type Space, type SpaceProps, SubmenuTrigger, type SubmenuTriggerProps, Switch, type SwitchProps, Tab, TabList, type TabListProps, type TabMatchStrategy, TabPanel, type TabPanelProps, type TabProps, Table, TableBody, TableHeader, TablePagination, type TablePaginationProps, Tabs, type TabsProps, Tag, TagGroup, type TagGroupProps, type TagProps, Text, type TextColorStatus, type TextColors, TextField, type TextFieldProps, type TextOwnProps, type TextProps, type TextVariants, type TextWeights, Tooltip, type TooltipProps, TooltipTrigger, type UseTableConfig, type UseTablePagination, type UseTablePaginationConfig, type UseTableResult, type UtilityProps, VisuallyHidden, type VisuallyHiddenProps, componentDefinitions, useBreakpoint, useTable };

package/dist/index.esm.js

@@ -34,6 +34,7 @@ export { Link } from './components/Link/Link.esm.js';
 export { Select } from './components/Select/Select.esm.js';
 export { Skeleton } from './components/Skeleton/Skeleton.esm.js';
 export { Switch } from './components/Switch/Switch.esm.js';
+export { VisuallyHidden } from './components/VisuallyHidden/VisuallyHidden.esm.js';
 export { useBreakpoint } from './hooks/useBreakpoint.esm.js';
 export { componentDefinitions } from './utils/componentDefinitions.esm.js';
 //# sourceMappingURL=index.esm.js.map

package/dist/index.esm.js.map

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

package/dist/utils/componentDefinitions.esm.js

@@ -67,12 +67,11 @@ const componentDefinitions = {
   },
   Checkbox: {
     classNames: {
-      root: "bui-CheckboxRoot",
-      label: "bui-CheckboxLabel",
+      root: "bui-Checkbox",
       indicator: "bui-CheckboxIndicator"
     },
     dataAttributes: {
-      checked: [true, false]
+      selected: [true, false]
     }
   },
   Collapsible: {
@@ -206,7 +205,9 @@ const componentDefinitions = {
     },
     dataAttributes: {
       variant: ["subtitle", "body", "caption", "label"],
-      weight: ["regular", "bold"]
+      weight: ["regular", "bold"],
+      color: ["primary", "secondary", "danger", "warning", "success"],
+      truncate: [true, false]
     }
   },
   List: {
@@ -372,6 +373,11 @@ const componentDefinitions = {
       tooltip: "bui-Tooltip",
       arrow: "bui-TooltipArrow"
     }
+  },
+  VisuallyHidden: {
+    classNames: {
+      root: "bui-VisuallyHidden"
+    }
   }
 };