@backstage/ui 0.10.0 → 0.11.0-next.1

package/dist/components/Table/hooks/useTable.esm.js

@@ -1,114 +1,95 @@
-import { useState, useMemo, useCallback } from 'react';
+import { useRef, useMemo } from 'react';
+import { useQueryState } from './useQueryState.esm.js';
+import { useCompletePagination } from './useCompletePagination.esm.js';
+import { useCursorPagination } from './useCursorPagination.esm.js';
+import { useOffsetPagination } from './useOffsetPagination.esm.js';
 
-function useTable(config = {}) {
-  const { data, pagination: paginationConfig = {} } = config;
-  const {
-    rowCount: providedRowCount,
-    offset: controlledOffset,
-    pageSize: controlledPageSize,
-    onOffsetChange,
-    onPageSizeChange,
-    defaultPageSize = 10,
-    defaultOffset = 0,
-    onNextPage,
-    onPreviousPage,
-    showPageSizeOptions = true
-  } = paginationConfig;
-  const isControlled = controlledOffset !== void 0 || controlledPageSize !== void 0;
-  const rowCount = providedRowCount ?? data?.length ?? 0;
-  const [internalOffset, setInternalOffset] = useState(defaultOffset);
-  const [internalPageSize, setInternalPageSize] = useState(defaultPageSize);
-  const currentOffset = controlledOffset ?? internalOffset;
-  const currentPageSize = controlledPageSize ?? internalPageSize;
-  const currentData = useMemo(() => {
-    if (!data) return void 0;
-    return data.slice(currentOffset, currentOffset + currentPageSize);
-  }, [data, currentOffset, currentPageSize]);
-  const setOffset = useCallback(
-    (newOffset) => {
-      if (isControlled) {
-        onOffsetChange?.(newOffset);
-      } else {
-        setInternalOffset(newOffset);
-      }
-    },
-    [isControlled, onOffsetChange]
-  );
-  const setPageSize = useCallback(
-    (newPageSize) => {
-      const newOffset = 0;
-      if (isControlled) {
-        onPageSizeChange?.(newPageSize);
-        onOffsetChange?.(newOffset);
-      } else {
-        setInternalPageSize(newPageSize);
-        setInternalOffset(newOffset);
-      }
-    },
-    [isControlled, onPageSizeChange, onOffsetChange]
-  );
-  const nextPage = useCallback(() => {
-    const nextOffset = currentOffset + currentPageSize;
-    if (nextOffset < rowCount) {
-      onNextPage?.();
-      setOffset(nextOffset);
-    }
-  }, [currentOffset, currentPageSize, rowCount, onNextPage, setOffset]);
-  const previousPage = useCallback(() => {
-    if (currentOffset > 0) {
-      onPreviousPage?.();
-      const prevOffset = Math.max(0, currentOffset - currentPageSize);
-      setOffset(prevOffset);
-    }
-  }, [currentOffset, currentPageSize, onPreviousPage, setOffset]);
-  const paginationProps = useMemo(
+function useTableProps(paginationResult, sortState, paginationOptions = {}) {
+  const { showPageSizeOptions = true, getLabel } = paginationOptions;
+  const previousDataRef = useRef(paginationResult.data);
+  if (paginationResult.data) {
+    previousDataRef.current = paginationResult.data;
+  }
+  const displayData = paginationResult.data ?? previousDataRef.current;
+  const isStale = paginationResult.loading && displayData !== void 0;
+  const pagination = useMemo(
     () => ({
-      offset: currentOffset,
-      pageSize: currentPageSize,
-      rowCount,
-      setOffset,
-      setPageSize,
-      onNextPage,
-      onPreviousPage,
-      showPageSizeOptions
+      type: "page",
+      pageSize: paginationResult.pageSize,
+      offset: paginationResult.offset,
+      totalCount: paginationResult.totalCount,
+      hasNextPage: paginationResult.hasNextPage,
+      hasPreviousPage: paginationResult.hasPreviousPage,
+      onNextPage: paginationResult.onNextPage,
+      onPreviousPage: paginationResult.onPreviousPage,
+      onPageSizeChange: paginationResult.onPageSizeChange,
+      showPageSizeOptions,
+      getLabel
     }),
     [
-      currentOffset,
-      currentPageSize,
-      rowCount,
-      setOffset,
-      setPageSize,
-      onNextPage,
-      onPreviousPage,
-      showPageSizeOptions
+      paginationResult.pageSize,
+      paginationResult.offset,
+      paginationResult.totalCount,
+      paginationResult.hasNextPage,
+      paginationResult.hasPreviousPage,
+      paginationResult.onNextPage,
+      paginationResult.onPreviousPage,
+      paginationResult.onPageSizeChange
     ]
   );
-  const pagination = useMemo(
+  return useMemo(
     () => ({
-      paginationProps,
-      offset: currentOffset,
-      pageSize: currentPageSize,
-      data: currentData,
-      nextPage,
-      previousPage,
-      setOffset,
-      setPageSize
+      data: displayData,
+      loading: paginationResult.loading,
+      isStale,
+      error: paginationResult.error,
+      pagination,
+      sort: sortState
     }),
     [
-      paginationProps,
-      currentOffset,
-      currentPageSize,
-      currentData,
-      nextPage,
-      previousPage,
-      setOffset,
-      setPageSize
+      displayData,
+      paginationResult.loading,
+      isStale,
+      paginationResult.error,
+      pagination,
+      showPageSizeOptions,
+      getLabel,
+      sortState
     ]
   );
+}
+function useTable(options) {
+  const query = useQueryState(options);
+  const initialModeRef = useRef(options.mode);
+  if (initialModeRef.current !== options.mode) {
+    throw new Error(
+      `useTable mode cannot change from '${initialModeRef.current}' to '${options.mode}'. The mode must remain stable for the lifetime of the component.`
+    );
+  }
+  let pagination;
+  if (options.mode === "complete") {
+    pagination = useCompletePagination(options, query);
+  } else if (options.mode === "offset") {
+    pagination = useOffsetPagination(options, query);
+  } else if (options.mode === "cursor") {
+    pagination = useCursorPagination(options, query);
+  } else {
+    throw new Error("Invalid mode");
+  }
+  const sortState = useMemo(
+    () => ({ descriptor: query.sort, onSortChange: query.setSort }),
+    [query.sort, query.setSort]
+  );
+  const tableProps = useTableProps(
+    pagination,
+    sortState,
+    options.paginationOptions ?? {}
+  );
   return {
-    data: currentData,
-    paginationProps,
-    pagination
+    tableProps,
+    reload: pagination.reload,
+    filter: { value: query.filter, onChange: query.setFilter },
+    search: { value: query.search, onChange: query.setSearch }
   };
 }
 

package/dist/components/Table/hooks/useTable.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTable.esm.js","sources":["../../../../src/components/Table/hooks/useTable.ts"],"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 { useState, useMemo, useCallback } from 'react';\nimport type { TablePaginationProps } from '../../TablePagination/types';\nimport type {\n  UseTableConfig,\n  UseTableResult,\n  UseTablePagination,\n} from './types';\n\n/**\n * Hook for managing table state including pagination and future features like sorting.\n * Supports both controlled and uncontrolled modes using offset/pageSize pattern (Backstage style).\n *\n * @public\n */\nexport function useTable<T = any>(\n  config: UseTableConfig<T> = {},\n): UseTableResult<T> {\n  const { data, pagination: paginationConfig = {} } = config;\n\n  const {\n    rowCount: providedRowCount,\n    offset: controlledOffset,\n    pageSize: controlledPageSize,\n    onOffsetChange,\n    onPageSizeChange,\n    defaultPageSize = 10,\n    defaultOffset = 0,\n    onNextPage,\n    onPreviousPage,\n    showPageSizeOptions = true,\n  } = paginationConfig;\n\n  // Determine if we're in controlled mode\n  const isControlled =\n    controlledOffset !== undefined || controlledPageSize !== undefined;\n\n  // Use providedRowCount if passed, otherwise fallback to data length\n  const rowCount = providedRowCount ?? data?.length ?? 0;\n\n  // Internal state for uncontrolled mode\n  const [internalOffset, setInternalOffset] = useState(defaultOffset);\n  const [internalPageSize, setInternalPageSize] = useState(defaultPageSize);\n\n  // Calculate current values\n  const currentOffset = controlledOffset ?? internalOffset;\n  const currentPageSize = controlledPageSize ?? internalPageSize;\n\n  // Calculate sliced data if data array is provided\n  const currentData = useMemo(() => {\n    if (!data) return undefined;\n    return data.slice(currentOffset, currentOffset + currentPageSize);\n  }, [data, currentOffset, currentPageSize]);\n\n  // Update functions\n  const setOffset = useCallback(\n    (newOffset: number) => {\n      if (isControlled) {\n        onOffsetChange?.(newOffset);\n      } else {\n        setInternalOffset(newOffset);\n      }\n    },\n    [isControlled, onOffsetChange],\n  );\n\n  const setPageSize = useCallback(\n    (newPageSize: number) => {\n      // When changing page size, reset to first page to avoid showing empty results\n      const newOffset = 0;\n\n      if (isControlled) {\n        onPageSizeChange?.(newPageSize);\n        onOffsetChange?.(newOffset);\n      } else {\n        setInternalPageSize(newPageSize);\n        setInternalOffset(newOffset);\n      }\n    },\n    [isControlled, onPageSizeChange, onOffsetChange],\n  );\n\n  const nextPage = useCallback(() => {\n    const nextOffset = currentOffset + currentPageSize;\n    if (nextOffset < rowCount) {\n      onNextPage?.();\n      setOffset(nextOffset);\n    }\n  }, [currentOffset, currentPageSize, rowCount, onNextPage, setOffset]);\n\n  const previousPage = useCallback(() => {\n    if (currentOffset > 0) {\n      onPreviousPage?.();\n      const prevOffset = Math.max(0, currentOffset - currentPageSize);\n      setOffset(prevOffset);\n    }\n  }, [currentOffset, currentPageSize, onPreviousPage, setOffset]);\n\n  // Pagination props for TablePagination component\n  const paginationProps: TablePaginationProps = useMemo(\n    () => ({\n      offset: currentOffset,\n      pageSize: currentPageSize,\n      rowCount,\n      setOffset,\n      setPageSize,\n      onNextPage,\n      onPreviousPage,\n      showPageSizeOptions,\n    }),\n    [\n      currentOffset,\n      currentPageSize,\n      rowCount,\n      setOffset,\n      setPageSize,\n      onNextPage,\n      onPreviousPage,\n      showPageSizeOptions,\n    ],\n  );\n\n  const pagination: UseTablePagination<T> = useMemo(\n    () => ({\n      paginationProps,\n      offset: currentOffset,\n      pageSize: currentPageSize,\n      data: currentData,\n      nextPage,\n      previousPage,\n      setOffset,\n      setPageSize,\n    }),\n    [\n      paginationProps,\n      currentOffset,\n      currentPageSize,\n      currentData,\n      nextPage,\n      previousPage,\n      setOffset,\n      setPageSize,\n    ],\n  );\n\n  return {\n    data: currentData,\n    paginationProps,\n    pagination,\n  };\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"useTable.esm.js","sources":["../../../../src/components/Table/hooks/useTable.ts"],"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 */\nimport { useMemo, useRef } from 'react';\nimport type { SortState, TableItem, TableProps } from '../types';\nimport type {\n  PaginationOptions,\n  PaginationResult,\n  UseTableOptions,\n  UseTableResult,\n} from './types';\nimport { useQueryState } from './useQueryState';\nimport { useCompletePagination } from './useCompletePagination';\nimport { useCursorPagination } from './useCursorPagination';\nimport { useOffsetPagination } from './useOffsetPagination';\n\nfunction useTableProps<T extends TableItem>(\n  paginationResult: PaginationResult<T>,\n  sortState: SortState,\n  paginationOptions: PaginationOptions = {},\n): Omit<\n  TableProps<T>,\n  'columnConfig' | 'rowConfig' | 'selection' | 'emptyState'\n> {\n  const { showPageSizeOptions = true, getLabel } = paginationOptions;\n\n  const previousDataRef = useRef(paginationResult.data);\n  if (paginationResult.data) {\n    previousDataRef.current = paginationResult.data;\n  }\n\n  const displayData = paginationResult.data ?? previousDataRef.current;\n  const isStale = paginationResult.loading && displayData !== undefined;\n\n  const pagination = useMemo(\n    () => ({\n      type: 'page' as const,\n      pageSize: paginationResult.pageSize,\n      offset: paginationResult.offset,\n      totalCount: paginationResult.totalCount,\n      hasNextPage: paginationResult.hasNextPage,\n      hasPreviousPage: paginationResult.hasPreviousPage,\n      onNextPage: paginationResult.onNextPage,\n      onPreviousPage: paginationResult.onPreviousPage,\n      onPageSizeChange: paginationResult.onPageSizeChange,\n      showPageSizeOptions,\n      getLabel,\n    }),\n    [\n      paginationResult.pageSize,\n      paginationResult.offset,\n      paginationResult.totalCount,\n      paginationResult.hasNextPage,\n      paginationResult.hasPreviousPage,\n      paginationResult.onNextPage,\n      paginationResult.onPreviousPage,\n      paginationResult.onPageSizeChange,\n    ],\n  );\n\n  return useMemo(\n    () => ({\n      data: displayData,\n      loading: paginationResult.loading,\n      isStale,\n      error: paginationResult.error,\n      pagination,\n      sort: sortState,\n    }),\n    [\n      displayData,\n      paginationResult.loading,\n      isStale,\n      paginationResult.error,\n      pagination,\n      showPageSizeOptions,\n      getLabel,\n      sortState,\n    ],\n  );\n}\n\n/** @public */\nexport function useTable<T extends TableItem, TFilter = unknown>(\n  options: UseTableOptions<T, TFilter>,\n): UseTableResult<T, TFilter> {\n  const query = useQueryState<TFilter>(options);\n\n  const initialModeRef = useRef(options.mode);\n  if (initialModeRef.current !== options.mode) {\n    throw new Error(\n      `useTable mode cannot change from '${initialModeRef.current}' to '${options.mode}'. ` +\n        `The mode must remain stable for the lifetime of the component.`,\n    );\n  }\n\n  let pagination: PaginationResult<T> & { reload: () => void };\n\n  if (options.mode === 'complete') {\n    pagination = useCompletePagination(options, query);\n  } else if (options.mode === 'offset') {\n    pagination = useOffsetPagination(options, query);\n  } else if (options.mode === 'cursor') {\n    pagination = useCursorPagination(options, query);\n  } else {\n    throw new Error('Invalid mode');\n  }\n\n  const sortState: SortState = useMemo(\n    () => ({ descriptor: query.sort, onSortChange: query.setSort }),\n    [query.sort, query.setSort],\n  );\n\n  const tableProps = useTableProps(\n    pagination,\n    sortState,\n    options.paginationOptions ?? {},\n  );\n\n  return {\n    tableProps,\n    reload: pagination.reload,\n    filter: { value: query.filter, onChange: query.setFilter },\n    search: { value: query.search, onChange: query.setSearch },\n  };\n}\n"],"names":[],"mappings":"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"}

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

@@ -4,111 +4,86 @@ import { useStyles } from '../../hooks/useStyles.esm.js';
 import { TablePaginationDefinition } from './definition.esm.js';
 import styles from './TablePagination.module.css.esm.js';
 import { RiArrowLeftSLine, RiArrowRightSLine } from '@remixicon/react';
+import { useId } from 'react';
 import { Select } from '../Select/Select.esm.js';
 import { ButtonIcon } from '../ButtonIcon/ButtonIcon.esm.js';
 import { Text } from '../Text/Text.esm.js';
 
-function TablePagination(props) {
-  const { classNames, cleanedProps } = useStyles(TablePaginationDefinition, {
-    showPageSizeOptions: true,
-    ...props
-  });
-  const {
-    className,
-    offset,
-    pageSize,
-    rowCount,
-    onNextPage,
-    onPreviousPage,
-    onPageSizeChange,
-    setOffset,
-    setPageSize,
-    showPageSizeOptions,
-    ...rest
-  } = cleanedProps;
-  const currentOffset = offset ?? 0;
-  const currentPageSize = pageSize ?? 10;
-  const fromCount = currentOffset + 1;
-  const toCount = Math.min(currentOffset + currentPageSize, rowCount ?? 0);
-  const nextPage = () => {
-    const totalRows = rowCount ?? 0;
-    const nextOffset = currentOffset + currentPageSize;
-    if (nextOffset < totalRows) {
-      onNextPage?.();
-      setOffset?.(nextOffset);
-    }
-  };
-  const previousPage = () => {
-    if (currentOffset > 0) {
-      onPreviousPage?.();
-      const prevOffset = Math.max(0, currentOffset - currentPageSize);
-      setOffset?.(prevOffset);
-    }
-  };
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: clsx(classNames.root, styles[classNames.root], className),
-      ...rest,
-      children: [
-        /* @__PURE__ */ jsx("div", { className: clsx(classNames.left, styles[classNames.left]), children: showPageSizeOptions && /* @__PURE__ */ jsx(
-          Select,
-          {
-            name: "pageSize",
-            size: "small",
-            placeholder: "Show 10 results",
-            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" }
-            ],
-            selectedKey: pageSize?.toString(),
-            onSelectionChange: (value) => {
-              const newPageSize = Number(value);
-              setPageSize?.(newPageSize);
-              onPageSizeChange?.(newPageSize);
-            },
-            className: clsx(classNames.select, styles[classNames.select])
-          }
-        ) }),
-        /* @__PURE__ */ jsxs("div", { className: clsx(classNames.right, styles[classNames.right]), children: [
-          /* @__PURE__ */ jsx(
-            Text,
-            {
-              as: "p",
-              variant: "body-medium",
-              children: `${fromCount} - ${toCount} of ${rowCount}`
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            ButtonIcon,
-            {
-              variant: "secondary",
-              size: "small",
-              onClick: previousPage,
-              isDisabled: currentOffset === 0,
-              icon: /* @__PURE__ */ jsx(RiArrowLeftSLine, {}),
-              "aria-label": "Previous"
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            ButtonIcon,
-            {
-              variant: "secondary",
-              size: "small",
-              onClick: nextPage,
-              isDisabled: rowCount !== void 0 && currentOffset + currentPageSize >= rowCount,
-              icon: /* @__PURE__ */ jsx(RiArrowRightSLine, {}),
-              "aria-label": "Next"
-            }
-          )
-        ] })
-      ]
-    }
-  );
+function TablePagination({
+  pageSize,
+  offset,
+  totalCount,
+  hasNextPage,
+  hasPreviousPage,
+  onNextPage,
+  onPreviousPage,
+  onPageSizeChange,
+  showPageSizeOptions = true,
+  getLabel
+}) {
+  const { classNames } = useStyles(TablePaginationDefinition, {});
+  const labelId = useId();
+  const hasItems = totalCount !== void 0 && totalCount !== 0;
+  let label = `${totalCount} items`;
+  if (getLabel) {
+    label = getLabel({ pageSize, offset, totalCount });
+  } else if (offset !== void 0) {
+    const fromCount = offset + 1;
+    const toCount = Math.min(offset + pageSize, 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(
+      Select,
+      {
+        name: "pageSize",
+        size: "small",
+        "aria-label": "Select table page size",
+        placeholder: "Show 10 results",
+        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" }
+        ],
+        defaultValue: pageSize.toString(),
+        onChange: (value) => {
+          const newPageSize = Number(value);
+          onPageSizeChange?.(newPageSize);
+        },
+        className: clsx(classNames.select, styles[classNames.select])
+      }
+    ) }),
+    /* @__PURE__ */ jsxs("div", { className: clsx(classNames.right, styles[classNames.right]), children: [
+      hasItems && /* @__PURE__ */ jsx(Text, { as: "p", variant: "body-medium", id: labelId, children: label }),
+      /* @__PURE__ */ jsx(
+        ButtonIcon,
+        {
+          variant: "secondary",
+          size: "small",
+          onClick: onPreviousPage,
+          isDisabled: !hasPreviousPage,
+          icon: /* @__PURE__ */ jsx(RiArrowLeftSLine, {}),
+          "aria-label": "Previous table page",
+          "aria-describedby": hasItems ? labelId : void 0
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        ButtonIcon,
+        {
+          variant: "secondary",
+          size: "small",
+          onClick: onNextPage,
+          isDisabled: !hasNextPage,
+          icon: /* @__PURE__ */ jsx(RiArrowRightSLine, {}),
+          "aria-label": "Next table page",
+          "aria-describedby": hasItems ? labelId : void 0
+        }
+      )
+    ] })
+  ] });
 }
 
 export { 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 { TablePaginationDefinition } from './definition';\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(TablePaginationDefinition, {\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 { TablePaginationDefinition } from './definition';\nimport styles from './TablePagination.module.css';\nimport { RiArrowLeftSLine, RiArrowRightSLine } from '@remixicon/react';\nimport { useId } from 'react';\n\n/**\n * Pagination controls for Table components with page navigation and size selection.\n *\n * @public\n */\nexport function TablePagination({\n  pageSize,\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\n  const hasItems = totalCount !== undefined && totalCount !== 0;\n\n  let label = `${totalCount} items`;\n  if (getLabel) {\n    label = getLabel({ pageSize, offset, totalCount });\n  } else if (offset !== undefined) {\n    const fromCount = offset + 1;\n    const toCount = Math.min(offset + pageSize, 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            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            defaultValue={pageSize.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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"}

package/dist/components/ToggleButton/ToggleButton.esm.js

@@ -0,0 +1,51 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import { ToggleButton as ToggleButton$1 } from 'react-aria-components';
+import { useStyles } from '../../hooks/useStyles.esm.js';
+import { ToggleButtonDefinition } from './definition.esm.js';
+import styles from './ToggleButton.module.css.esm.js';
+import { useSurface } from '../../hooks/useSurface.esm.js';
+
+const ToggleButton = forwardRef(
+  (props, ref) => {
+    const { classNames, dataAttributes, cleanedProps } = useStyles(
+      ToggleButtonDefinition,
+      {
+        size: "small",
+        ...props
+      }
+    );
+    const { children, className, iconStart, iconEnd, onSurface, ...rest } = cleanedProps;
+    const { surface } = useSurface({ onSurface });
+    return /* @__PURE__ */ jsx(
+      ToggleButton$1,
+      {
+        className: clsx(classNames.root, styles[classNames.root], className),
+        ref,
+        ...dataAttributes,
+        ...typeof surface === "string" ? { "data-on-surface": surface } : {},
+        ...rest,
+        children: (renderProps) => {
+          const renderedChildren = typeof children === "function" ? children(renderProps) : children;
+          return /* @__PURE__ */ jsxs(
+            "span",
+            {
+              className: clsx(classNames.content, styles[classNames.content]),
+              "data-slot": "content",
+              children: [
+                iconStart,
+                renderedChildren,
+                iconEnd
+              ]
+            }
+          );
+        }
+      }
+    );
+  }
+);
+ToggleButton.displayName = "ToggleButton";
+
+export { ToggleButton };
+//# sourceMappingURL=ToggleButton.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleButton.esm.js","sources":["../../../src/components/ToggleButton/ToggleButton.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 { forwardRef, Ref } from 'react';\nimport { ToggleButton as AriaToggleButton } from 'react-aria-components';\nimport type { ToggleButtonProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\nimport { ToggleButtonDefinition } from './definition';\nimport styles from './ToggleButton.module.css';\nimport { useSurface } from '../../hooks/useSurface';\n\n/** @public */\nexport const ToggleButton = forwardRef(\n  (props: ToggleButtonProps, ref: Ref<HTMLButtonElement>) => {\n    const { classNames, dataAttributes, cleanedProps } = useStyles(\n      ToggleButtonDefinition,\n      {\n        size: 'small',\n        ...props,\n      },\n    );\n\n    const { children, className, iconStart, iconEnd, onSurface, ...rest } =\n      cleanedProps;\n\n    const { surface } = useSurface({ onSurface });\n\n    return (\n      <AriaToggleButton\n        className={clsx(classNames.root, styles[classNames.root], className)}\n        ref={ref}\n        {...dataAttributes}\n        {...(typeof surface === 'string' ? { 'data-on-surface': surface } : {})}\n        {...rest}\n      >\n        {renderProps => {\n          // If children is a function, call it with render props; otherwise use children as-is\n          const renderedChildren =\n            typeof children === 'function' ? children(renderProps) : children;\n\n          return (\n            <span\n              className={clsx(classNames.content, styles[classNames.content])}\n              data-slot=\"content\"\n            >\n              {iconStart}\n              {renderedChildren}\n              {iconEnd}\n            </span>\n          );\n        }}\n      </AriaToggleButton>\n    );\n  },\n);\n\nToggleButton.displayName = 'ToggleButton';\n"],"names":["AriaToggleButton"],"mappings":";;;;;;;;;AA0BO,MAAM,YAAA,GAAe,UAAA;AAAA,EAC1B,CAAC,OAA0B,GAAA,KAAgC;AACzD,IAAA,MAAM,EAAE,UAAA,EAAY,cAAA,EAAgB,YAAA,EAAa,GAAI,SAAA;AAAA,MACnD,sBAAA;AAAA,MACA;AAAA,QACE,IAAA,EAAM,OAAA;AAAA,QACN,GAAG;AAAA;AACL,KACF;AAEA,IAAA,MAAM,EAAE,UAAU,SAAA,EAAW,SAAA,EAAW,SAAS,SAAA,EAAW,GAAG,MAAK,GAClE,YAAA;AAEF,IAAA,MAAM,EAAE,OAAA,EAAQ,GAAI,UAAA,CAAW,EAAE,WAAW,CAAA;AAE5C,IAAA,uBACE,GAAA;AAAA,MAACA,cAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,KAAK,UAAA,CAAW,IAAA,EAAM,OAAO,UAAA,CAAW,IAAI,GAAG,SAAS,CAAA;AAAA,QACnE,GAAA;AAAA,QACC,GAAG,cAAA;AAAA,QACH,GAAI,OAAO,OAAA,KAAY,QAAA,GAAW,EAAE,iBAAA,EAAmB,OAAA,KAAY,EAAC;AAAA,QACpE,GAAG,IAAA;AAAA,QAEH,QAAA,EAAA,CAAA,WAAA,KAAe;AAEd,UAAA,MAAM,mBACJ,OAAO,QAAA,KAAa,UAAA,GAAa,QAAA,CAAS,WAAW,CAAA,GAAI,QAAA;AAE3D,UAAA,uBACE,IAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,WAAW,IAAA,CAAK,UAAA,CAAW,SAAS,MAAA,CAAO,UAAA,CAAW,OAAO,CAAC,CAAA;AAAA,cAC9D,WAAA,EAAU,SAAA;AAAA,cAET,QAAA,EAAA;AAAA,gBAAA,SAAA;AAAA,gBACA,gBAAA;AAAA,gBACA;AAAA;AAAA;AAAA,WACH;AAAA,QAEJ;AAAA;AAAA,KACF;AAAA,EAEJ;AACF;AAEA,YAAA,CAAa,WAAA,GAAc,cAAA;;;;"}

package/dist/components/ToggleButton/ToggleButton.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 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  .ToggleButton-module_bui-ToggleButton__1CL1A {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--bui-space-1_5);\n    border: none;\n    border-radius: var(--bui-radius-2);\n    background: var(--bui-bg-surface-1);\n    color: var(--bui-fg-primary);\n    font-family: var(--bui-font-regular);\n    font-weight: var(--bui-font-weight-bold);\n    padding: 0 var(--bui-space-2);\n    cursor: pointer;\n    transition: background-color 150ms ease, box-shadow 150ms ease,\n      color 150ms ease, transform 100ms ease;\n\n    &[data-selected],\n    &[data-pressed] {\n      background: var(--bui-bg-solid);\n      color: var(--bui-fg-solid);\n    }\n\n    &:not([data-selected])[data-hovered] {\n      background: var(--bui-bg-surface-2);\n    }\n\n    &[data-disabled] {\n      background: var(--bui-bg-neutral-on-surface-0-disabled);\n      color: var(--bui-fg-disabled);\n    }\n\n    &[data-disabled][data-hovered] {\n      background: var(--bui-bg-neutral-on-surface-0-disabled);\n    }\n\n    &[data-disabled][data-selected] {\n      background: var(--bui-bg-solid-disabled);\n      color: var(--bui-fg-disabled);\n    }\n  }\n\n  .ToggleButton-module_bui-ToggleButton__1CL1A[data-focus-visible] {\n    outline: none;\n    box-shadow: inset 0 0 0 2px var(--bui-ring);\n  }\n\n  .ToggleButton-module_bui-ToggleButton__1CL1A[data-disabled] {\n    cursor: not-allowed;\n  }\n\n  .ToggleButton-module_bui-ToggleButton__1CL1A[data-pressed] {\n    transform: scale(0.98);\n  }\n\n  .ToggleButton-module_bui-ToggleButton__1CL1A[data-disabled][data-pressed] {\n    transform: none;\n  }\n\n  .ToggleButton-module_bui-ToggleButton__1CL1A[data-size='small'] {\n    height: 2rem;\n    font-size: var(--bui-font-size-3);\n    padding: 0 var(--bui-space-2);\n\n    svg {\n      width: 1rem;\n      height: 1rem;\n    }\n  }\n\n  .ToggleButton-module_bui-ToggleButton__1CL1A[data-size='medium'] {\n    height: 2.5rem;\n    font-size: var(--bui-font-size-4);\n    padding: 0 var(--bui-space-3);\n\n    svg {\n      width: 1.25rem;\n      height: 1.25rem;\n    }\n  }\n\n  .ToggleButton-module_bui-ToggleButtonContent__1Pq3O {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--bui-space-1_5);\n    height: 100%;\n    width: 100%;\n  }\n}\n";
+var styles = {"bui-ToggleButton":"ToggleButton-module_bui-ToggleButton__1CL1A","bui-ToggleButtonContent":"ToggleButton-module_bui-ToggleButtonContent__1Pq3O"};
+styleInject(css_248z);
+
+export { styles as default };
+//# sourceMappingURL=ToggleButton.module.css.esm.js.map

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

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

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

@@ -0,0 +1,12 @@
+const ToggleButtonDefinition = {
+  classNames: {
+    root: "bui-ToggleButton",
+    content: "bui-ToggleButtonContent"
+  },
+  dataAttributes: {
+    size: ["small", "medium"]
+  }
+};
+
+export { ToggleButtonDefinition };
+//# sourceMappingURL=definition.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"definition.esm.js","sources":["../../../src/components/ToggleButton/definition.ts"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport type { ComponentDefinition } from '../../types';\n\n/**\n * Component definition for ToggleButton\n * @public\n */\nexport const ToggleButtonDefinition = {\n  classNames: {\n    root: 'bui-ToggleButton',\n    content: 'bui-ToggleButtonContent',\n  },\n  dataAttributes: {\n    size: ['small', 'medium'] as const,\n  },\n} as const satisfies ComponentDefinition;\n"],"names":[],"mappings":"AAsBO,MAAM,sBAAA,GAAyB;AAAA,EACpC,UAAA,EAAY;AAAA,IACV,IAAA,EAAM,kBAAA;AAAA,IACN,OAAA,EAAS;AAAA,GACX;AAAA,EACA,cAAA,EAAgB;AAAA,IACd,IAAA,EAAM,CAAC,OAAA,EAAS,QAAQ;AAAA;AAE5B;;;;"}

package/dist/components/ToggleButtonGroup/ToggleButtonGroup.esm.js

@@ -0,0 +1,33 @@
+import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import { ToggleButtonGroup as ToggleButtonGroup$1 } from 'react-aria-components';
+import { useStyles } from '../../hooks/useStyles.esm.js';
+import { ToggleButtonGroupDefinition } from './definition.esm.js';
+import styles from './ToggleButtonGroup.module.css.esm.js';
+
+const ToggleButtonGroup = forwardRef(
+  (props, ref) => {
+    const { classNames, dataAttributes, cleanedProps } = useStyles(
+      ToggleButtonGroupDefinition,
+      {
+        ...props
+      }
+    );
+    const { className, children, ...rest } = cleanedProps;
+    return /* @__PURE__ */ jsx(
+      ToggleButtonGroup$1,
+      {
+        className: clsx(classNames.root, styles[classNames.root], className),
+        ref,
+        ...dataAttributes,
+        ...rest,
+        children
+      }
+    );
+  }
+);
+ToggleButtonGroup.displayName = "ToggleButtonGroup";
+
+export { ToggleButtonGroup };
+//# sourceMappingURL=ToggleButtonGroup.esm.js.map