@bitrise/bitkit-v2 0.3.372 → 0.3.374

package/dist/components/BitkitPagination/BitkitPagination.js

@@ -2,6 +2,7 @@ import IconChevronLeft from "../../icons/IconChevronLeft.js";
 import IconChevronRight from "../../icons/IconChevronRight.js";
 import BitkitIconButton from "../BitkitIconButton/BitkitIconButton.js";
 import BitkitNativeSelect from "../BitkitNativeSelect/BitkitNativeSelect.js";
+import formatLabel from "../../utilities/formatLabel.js";
 import { Box } from "@chakra-ui/react/box";
 import { chakra, useSlotRecipe } from "@chakra-ui/react/styled-system";
 import { forwardRef, useMemo } from "react";
@@ -16,7 +17,6 @@ var DEFAULT_LABELS = {
 	pages: "of {totalPages} pages",
 	previousPage: "Previous page"
 };
-var formatLabel = (template, values) => Object.entries(values).reduce((str, [key, val]) => str.replaceAll(`{${key}}`, String(val)), template);
 var BitkitPagination = forwardRef((props, ref) => {
 	const { labels: labelsProp, onPageChange, onPageSizeChange, page, pageSize, pageSizeOptions = [
 		10,

package/dist/components/BitkitPagination/BitkitPagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"BitkitPagination.js","names":[],"sources":["../../../lib/components/BitkitPagination/BitkitPagination.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { Separator } from '@chakra-ui/react/separator';\nimport { Skeleton } from '@chakra-ui/react/skeleton';\nimport { chakra, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { forwardRef, useMemo } from 'react';\n\nimport { IconChevronLeft, IconChevronRight } from '../../icons';\nimport BitkitIconButton from '../BitkitIconButton/BitkitIconButton';\nimport BitkitNativeSelect from '../BitkitNativeSelect/BitkitNativeSelect';\n\nexport interface BitkitPaginationLabels {\n  items?: string;\n  itemsPerPage?: string;\n  nextPage?: string;\n  pages?: string;\n  previousPage?: string;\n}\n\nconst DEFAULT_LABELS: Required<BitkitPaginationLabels> = {\n  items: '{start}\\u2013{end} of {total} items',\n  itemsPerPage: 'Items per page:',\n  nextPage: 'Next page',\n  pages: 'of {totalPages} pages',\n  previousPage: 'Previous page',\n};\n\nconst formatLabel = (template: string, values: Record<string, number>) =>\n  Object.entries(values).reduce((str, [key, val]) => str.replaceAll(`{${key}}`, String(val)), template);\n\nexport interface BitkitPaginationProps extends Omit<BoxProps, 'colorPalette' | 'page'> {\n  labels?: BitkitPaginationLabels;\n  onPageChange?: (page: number) => void;\n  onPageSizeChange?: (pageSize: number) => void;\n  page: number;\n  pageSize: number;\n  pageSizeOptions?: number[];\n  state?: 'skeleton';\n  totalItems: number;\n  variant?: 'card' | 'page' | 'table';\n}\n\nconst BitkitPagination = forwardRef<HTMLDivElement, BitkitPaginationProps>((props, ref) => {\n  const {\n    labels: labelsProp,\n    onPageChange,\n    onPageSizeChange,\n    page,\n    pageSize,\n    pageSizeOptions = [10, 25, 50],\n    state,\n    totalItems,\n    variant = 'table',\n    ...rest\n  } = props;\n\n  const recipe = useSlotRecipe({ key: 'pagination' });\n  const styles = recipe({ variant });\n\n  const safePageSize = Math.max(1, pageSize);\n  const totalPages = Math.max(1, Math.ceil(totalItems / safePageSize));\n  const safePage = Math.min(Math.max(1, page), totalPages);\n  const start = totalItems === 0 ? 0 : (safePage - 1) * safePageSize + 1;\n  const end = Math.min(safePage * safePageSize, totalItems);\n  const isFirstPage = safePage <= 1;\n  const isLastPage = safePage >= totalPages;\n  const isSkeleton = state === 'skeleton';\n  const showItemsPerPage = variant !== 'card';\n\n  const values = { end, start, total: totalItems, totalPages };\n  const labels = Object.fromEntries(\n    Object.entries({ ...DEFAULT_LABELS, ...labelsProp }).map(([k, v]) => [k, formatLabel(v, values)]),\n  ) as Required<BitkitPaginationLabels>;\n\n  const pageSizeItems = useMemo(\n    () => pageSizeOptions.map((opt) => ({ label: String(opt), value: String(opt) })),\n    [pageSizeOptions],\n  );\n\n  const pageItems = useMemo(\n    () => Array.from({ length: totalPages }, (_, i) => ({ label: String(i + 1), value: String(i + 1) })),\n    [totalPages],\n  );\n\n  return (\n    <Box ref={ref} css={styles.root} {...rest}>\n      <chakra.div css={styles.itemsBlock}>\n        {showItemsPerPage && (\n          <>\n            <chakra.span css={styles.text}>{labels.itemsPerPage}</chakra.span>\n            <BitkitNativeSelect\n              css={styles.itemsSelect}\n              onChange={(e) => onPageSizeChange?.(Number(e.target.value))}\n              size=\"md\"\n              state={isSkeleton ? 'disabled' : undefined}\n              value={String(safePageSize)}\n            >\n              {pageSizeItems.map((opt) => (\n                <option key={opt.value} value={opt.value}>\n                  {opt.label}\n                </option>\n              ))}\n            </BitkitNativeSelect>\n            <Separator alignSelf=\"stretch\" borderColor=\"border/minimal\" marginInline=\"8\" orientation=\"vertical\" />\n          </>\n        )}\n        {isSkeleton ? <Skeleton height=\"20\" width=\"96\" /> : <chakra.span css={styles.text}>{labels.items}</chakra.span>}\n      </chakra.div>\n\n      <chakra.div css={styles.pageBlock}>\n        <Separator alignSelf=\"stretch\" borderColor=\"border/minimal\" marginInline=\"8\" orientation=\"vertical\" />\n        <BitkitNativeSelect\n          css={styles.pageSelect}\n          onChange={(e) => onPageChange?.(Number(e.target.value))}\n          size=\"md\"\n          state={isSkeleton ? 'disabled' : undefined}\n          value={String(safePage)}\n        >\n          {pageItems.map((opt) => (\n            <option key={opt.value} value={opt.value}>\n              {opt.label}\n            </option>\n          ))}\n        </BitkitNativeSelect>\n        {isSkeleton ? <Skeleton height=\"20\" width=\"64\" /> : <chakra.span css={styles.text}>{labels.pages}</chakra.span>}\n        <BitkitIconButton\n          icon={IconChevronLeft}\n          label={labels.previousPage}\n          marginInlineStart=\"8\"\n          onClick={() => onPageChange?.(safePage - 1)}\n          size=\"md\"\n          state={isFirstPage || isSkeleton ? 'disabled' : undefined}\n          variant=\"secondary\"\n        />\n        <BitkitIconButton\n          icon={IconChevronRight}\n          label={labels.nextPage}\n          onClick={() => onPageChange?.(safePage + 1)}\n          size=\"md\"\n          state={isLastPage || isSkeleton ? 'disabled' : undefined}\n          variant=\"secondary\"\n        />\n      </chakra.div>\n    </Box>\n  );\n});\n\nBitkitPagination.displayName = 'BitkitPagination';\n\nexport default BitkitPagination;\n"],"mappings":"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"}
+{"version":3,"file":"BitkitPagination.js","names":[],"sources":["../../../lib/components/BitkitPagination/BitkitPagination.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { Separator } from '@chakra-ui/react/separator';\nimport { Skeleton } from '@chakra-ui/react/skeleton';\nimport { chakra, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { forwardRef, useMemo } from 'react';\n\nimport { IconChevronLeft, IconChevronRight } from '../../icons';\nimport formatLabel from '../../utilities/formatLabel';\nimport BitkitIconButton from '../BitkitIconButton/BitkitIconButton';\nimport BitkitNativeSelect from '../BitkitNativeSelect/BitkitNativeSelect';\n\nexport interface BitkitPaginationLabels {\n  items?: string;\n  itemsPerPage?: string;\n  nextPage?: string;\n  pages?: string;\n  previousPage?: string;\n}\n\nconst DEFAULT_LABELS: Required<BitkitPaginationLabels> = {\n  items: '{start}\\u2013{end} of {total} items',\n  itemsPerPage: 'Items per page:',\n  nextPage: 'Next page',\n  pages: 'of {totalPages} pages',\n  previousPage: 'Previous page',\n};\n\nexport interface BitkitPaginationProps extends Omit<BoxProps, 'colorPalette' | 'page'> {\n  labels?: BitkitPaginationLabels;\n  onPageChange?: (page: number) => void;\n  onPageSizeChange?: (pageSize: number) => void;\n  page: number;\n  pageSize: number;\n  pageSizeOptions?: number[];\n  state?: 'skeleton';\n  totalItems: number;\n  variant?: 'card' | 'page' | 'table';\n}\n\nconst BitkitPagination = forwardRef<HTMLDivElement, BitkitPaginationProps>((props, ref) => {\n  const {\n    labels: labelsProp,\n    onPageChange,\n    onPageSizeChange,\n    page,\n    pageSize,\n    pageSizeOptions = [10, 25, 50],\n    state,\n    totalItems,\n    variant = 'table',\n    ...rest\n  } = props;\n\n  const recipe = useSlotRecipe({ key: 'pagination' });\n  const styles = recipe({ variant });\n\n  const safePageSize = Math.max(1, pageSize);\n  const totalPages = Math.max(1, Math.ceil(totalItems / safePageSize));\n  const safePage = Math.min(Math.max(1, page), totalPages);\n  const start = totalItems === 0 ? 0 : (safePage - 1) * safePageSize + 1;\n  const end = Math.min(safePage * safePageSize, totalItems);\n  const isFirstPage = safePage <= 1;\n  const isLastPage = safePage >= totalPages;\n  const isSkeleton = state === 'skeleton';\n  const showItemsPerPage = variant !== 'card';\n\n  const values = { end, start, total: totalItems, totalPages };\n  const labels = Object.fromEntries(\n    Object.entries({ ...DEFAULT_LABELS, ...labelsProp }).map(([k, v]) => [k, formatLabel(v, values)]),\n  ) as Required<BitkitPaginationLabels>;\n\n  const pageSizeItems = useMemo(\n    () => pageSizeOptions.map((opt) => ({ label: String(opt), value: String(opt) })),\n    [pageSizeOptions],\n  );\n\n  const pageItems = useMemo(\n    () => Array.from({ length: totalPages }, (_, i) => ({ label: String(i + 1), value: String(i + 1) })),\n    [totalPages],\n  );\n\n  return (\n    <Box ref={ref} css={styles.root} {...rest}>\n      <chakra.div css={styles.itemsBlock}>\n        {showItemsPerPage && (\n          <>\n            <chakra.span css={styles.text}>{labels.itemsPerPage}</chakra.span>\n            <BitkitNativeSelect\n              css={styles.itemsSelect}\n              onChange={(e) => onPageSizeChange?.(Number(e.target.value))}\n              size=\"md\"\n              state={isSkeleton ? 'disabled' : undefined}\n              value={String(safePageSize)}\n            >\n              {pageSizeItems.map((opt) => (\n                <option key={opt.value} value={opt.value}>\n                  {opt.label}\n                </option>\n              ))}\n            </BitkitNativeSelect>\n            <Separator alignSelf=\"stretch\" borderColor=\"border/minimal\" marginInline=\"8\" orientation=\"vertical\" />\n          </>\n        )}\n        {isSkeleton ? <Skeleton height=\"20\" width=\"96\" /> : <chakra.span css={styles.text}>{labels.items}</chakra.span>}\n      </chakra.div>\n\n      <chakra.div css={styles.pageBlock}>\n        <Separator alignSelf=\"stretch\" borderColor=\"border/minimal\" marginInline=\"8\" orientation=\"vertical\" />\n        <BitkitNativeSelect\n          css={styles.pageSelect}\n          onChange={(e) => onPageChange?.(Number(e.target.value))}\n          size=\"md\"\n          state={isSkeleton ? 'disabled' : undefined}\n          value={String(safePage)}\n        >\n          {pageItems.map((opt) => (\n            <option key={opt.value} value={opt.value}>\n              {opt.label}\n            </option>\n          ))}\n        </BitkitNativeSelect>\n        {isSkeleton ? <Skeleton height=\"20\" width=\"64\" /> : <chakra.span css={styles.text}>{labels.pages}</chakra.span>}\n        <BitkitIconButton\n          icon={IconChevronLeft}\n          label={labels.previousPage}\n          marginInlineStart=\"8\"\n          onClick={() => onPageChange?.(safePage - 1)}\n          size=\"md\"\n          state={isFirstPage || isSkeleton ? 'disabled' : undefined}\n          variant=\"secondary\"\n        />\n        <BitkitIconButton\n          icon={IconChevronRight}\n          label={labels.nextPage}\n          onClick={() => onPageChange?.(safePage + 1)}\n          size=\"md\"\n          state={isLastPage || isSkeleton ? 'disabled' : undefined}\n          variant=\"secondary\"\n        />\n      </chakra.div>\n    </Box>\n  );\n});\n\nBitkitPagination.displayName = 'BitkitPagination';\n\nexport default BitkitPagination;\n"],"mappings":"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"}

package/dist/components/BitkitTable/BitkitBulkActionsRow.d.ts

@@ -0,0 +1,80 @@
+import { Table } from '@chakra-ui/react/table';
+import { ReactNode } from 'react';
+/**
+ * The noun the bar counts. A single string is used for every count; pass `{ one, other }` to get
+ * `1 workflow selected.` instead of `1 workflows selected.`
+ */
+export type BitkitBulkActionsItems = string | {
+    one: string;
+    other: string;
+};
+/**
+ * Overrides for the bar's sentences. Each template can use `{items}` (the `items` prop, already
+ * resolved to the form matching that sentence's count), `{selectedCount}` and `{totalItems}`.
+ * Override a whole sentence for wording a template can't express, such as another language's
+ * grammar.
+ */
+export interface BitkitBulkActionsLabels {
+    /** `selectionState="all"`. Default: `All {totalItems} {items} selected.` */
+    allSelected?: string;
+    /** Default: `Cancel` */
+    cancel?: string;
+    /** The link offering the rows beyond this page. Default: `Select all {totalItems} {items}` */
+    selectAll?: string;
+    /** `selectionState="some"`. Default: `{selectedCount} {items} selected.` */
+    selected?: string;
+    /** `selectionState="allOnPage"`. Default: `{selectedCount} {items} selected on this page.` */
+    selectedOnPage?: string;
+}
+export interface BitkitBulkActionsRowProps extends Omit<Table.RowProps, 'children'> {
+    /** The bulk action buttons, rendered after `Cancel`. */
+    children?: ReactNode;
+    /** Must match the table's column count, so the row spans the full width. */
+    colSpan: number;
+    /** The counted noun. Default: `{ one: 'item', other: 'items' }` */
+    items?: BitkitBulkActionsItems;
+    labels?: BitkitBulkActionsLabels;
+    onCancel: () => void;
+    /** Renders the `Select all {totalItems} {items}` link while `selectionState="allOnPage"`. */
+    onSelectAll?: () => void;
+    selectedCount: number;
+    /**
+     * `some` — part of the page is selected. `allOnPage` — the whole page is selected, and the rows
+     * beyond it are still on offer. `all` — everything across every page is selected.
+     */
+    selectionState: 'some' | 'allOnPage' | 'all';
+    totalItems: number;
+}
+/**
+ * The bar above the column headers that appears while rows are selected: what is selected, the
+ * offer to widen the selection to every page, and the actions to run on it. Belongs in
+ * `Table.Header`, before the `Table.Row` that holds the column headers.
+ *
+ * The count is mirrored into a visually hidden `aria-live` region, which is deliberately filled a
+ * render after mount — a live region that enters the DOM with its text already in it is not
+ * announced, so the first selection would go unspoken otherwise.
+ *
+ * @example
+ * ```tsx
+ * <Table.Header>
+ *   {selected.length > 0 && (
+ *     <BitkitBulkActionsRow
+ *       colSpan={COL_COUNT}
+ *       items={{ one: 'workflow', other: 'workflows' }}
+ *       onCancel={clearSelection}
+ *       onSelectAll={() => setAllAcrossPages(true)}
+ *       selectedCount={selected.length}
+ *       selectionState={selectionState}
+ *       totalItems={TOTAL_ITEMS}
+ *     >
+ *       <BitkitButton icon={IconMinusCircle} size="md" variant="danger-secondary">
+ *         Remove
+ *       </BitkitButton>
+ *     </BitkitBulkActionsRow>
+ *   )}
+ *   <Table.Row>{columnHeaders}</Table.Row>
+ * </Table.Header>
+ * ```
+ */
+declare const BitkitBulkActionsRow: import('react').ForwardRefExoticComponent<BitkitBulkActionsRowProps & import('react').RefAttributes<HTMLTableRowElement>>;
+export default BitkitBulkActionsRow;

package/dist/components/BitkitTable/BitkitBulkActionsRow.js

@@ -0,0 +1,124 @@
+import BitkitButton from "../BitkitButton/BitkitButton.js";
+import formatLabel from "../../utilities/formatLabel.js";
+import { Box } from "@chakra-ui/react/box";
+import { forwardRef, useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Text } from "@chakra-ui/react/text";
+import { VisuallyHidden } from "@chakra-ui/react/visually-hidden";
+import { Table, useTableStyles } from "@chakra-ui/react/table";
+//#region lib/components/BitkitTable/BitkitBulkActionsRow.tsx
+var DEFAULT_LABELS = {
+	allSelected: "All {totalItems} {items} selected.",
+	cancel: "Cancel",
+	selectAll: "Select all {totalItems} {items}",
+	selected: "{selectedCount} {items} selected.",
+	selectedOnPage: "{selectedCount} {items} selected on this page."
+};
+var DEFAULT_ITEMS = {
+	one: "item",
+	other: "items"
+};
+var resolveItems = (items, count) => {
+	if (typeof items === "string") return items;
+	return count === 1 ? items.one : items.other;
+};
+/**
+* The bar above the column headers that appears while rows are selected: what is selected, the
+* offer to widen the selection to every page, and the actions to run on it. Belongs in
+* `Table.Header`, before the `Table.Row` that holds the column headers.
+*
+* The count is mirrored into a visually hidden `aria-live` region, which is deliberately filled a
+* render after mount — a live region that enters the DOM with its text already in it is not
+* announced, so the first selection would go unspoken otherwise.
+*
+* @example
+* ```tsx
+* <Table.Header>
+*   {selected.length > 0 && (
+*     <BitkitBulkActionsRow
+*       colSpan={COL_COUNT}
+*       items={{ one: 'workflow', other: 'workflows' }}
+*       onCancel={clearSelection}
+*       onSelectAll={() => setAllAcrossPages(true)}
+*       selectedCount={selected.length}
+*       selectionState={selectionState}
+*       totalItems={TOTAL_ITEMS}
+*     >
+*       <BitkitButton icon={IconMinusCircle} size="md" variant="danger-secondary">
+*         Remove
+*       </BitkitButton>
+*     </BitkitBulkActionsRow>
+*   )}
+*   <Table.Row>{columnHeaders}</Table.Row>
+* </Table.Header>
+* ```
+*/
+var BitkitBulkActionsRow = forwardRef((props, ref) => {
+	const { children, colSpan, items = DEFAULT_ITEMS, labels: labelsProp, onCancel, onSelectAll, selectedCount, selectionState, totalItems, ...rest } = props;
+	const styles = useTableStyles();
+	const labels = {
+		...DEFAULT_LABELS,
+		...labelsProp
+	};
+	const countLabel = {
+		all: labels.allSelected,
+		allOnPage: labels.selectedOnPage,
+		some: labels.selected
+	}[selectionState];
+	const countText = formatLabel(countLabel, {
+		items: resolveItems(items, selectionState === "all" ? totalItems : selectedCount),
+		selectedCount,
+		totalItems
+	});
+	const selectAllText = formatLabel(labels.selectAll, {
+		items: resolveItems(items, totalItems),
+		selectedCount,
+		totalItems
+	});
+	const [announcement, setAnnouncement] = useState("");
+	useEffect(() => {
+		setAnnouncement(countText);
+	}, [countText]);
+	return /* @__PURE__ */ jsx(Table.Row, {
+		ref,
+		...rest,
+		children: /* @__PURE__ */ jsx(Table.Cell, {
+			colSpan,
+			css: styles.utilityCell,
+			children: /* @__PURE__ */ jsxs(Box, {
+				css: styles.bulkActionsGroup,
+				children: [
+					/* @__PURE__ */ jsx(Text, {
+						color: "text/body",
+						textStyle: "body/md/regular",
+						children: countText
+					}),
+					/* @__PURE__ */ jsx(VisuallyHidden, {
+						"aria-live": "polite",
+						children: announcement
+					}),
+					selectionState === "allOnPage" && !!onSelectAll && /* @__PURE__ */ jsx(BitkitButton, {
+						onClick: onSelectAll,
+						size: "sm",
+						variant: "tertiary",
+						children: selectAllText
+					}),
+					/* @__PURE__ */ jsxs(Box, {
+						css: styles.bulkActionsButtons,
+						children: [/* @__PURE__ */ jsx(BitkitButton, {
+							onClick: onCancel,
+							size: "md",
+							variant: "tertiary",
+							children: labels.cancel
+						}), children]
+					})
+				]
+			})
+		})
+	});
+});
+BitkitBulkActionsRow.displayName = "BitkitBulkActionsRow";
+//#endregion
+export { BitkitBulkActionsRow as default };
+
+//# sourceMappingURL=BitkitBulkActionsRow.js.map

package/dist/components/BitkitTable/BitkitBulkActionsRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BitkitBulkActionsRow.js","names":[],"sources":["../../../lib/components/BitkitTable/BitkitBulkActionsRow.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { Table, useTableStyles } from '@chakra-ui/react/table';\nimport { Text } from '@chakra-ui/react/text';\nimport { VisuallyHidden } from '@chakra-ui/react/visually-hidden';\nimport { forwardRef, type ReactNode, useEffect, useState } from 'react';\n\nimport formatLabel from '../../utilities/formatLabel';\nimport BitkitButton from '../BitkitButton/BitkitButton';\n\n/**\n * The noun the bar counts. A single string is used for every count; pass `{ one, other }` to get\n * `1 workflow selected.` instead of `1 workflows selected.`\n */\nexport type BitkitBulkActionsItems = string | { one: string; other: string };\n\n/**\n * Overrides for the bar's sentences. Each template can use `{items}` (the `items` prop, already\n * resolved to the form matching that sentence's count), `{selectedCount}` and `{totalItems}`.\n * Override a whole sentence for wording a template can't express, such as another language's\n * grammar.\n */\nexport interface BitkitBulkActionsLabels {\n  /** `selectionState=\"all\"`. Default: `All {totalItems} {items} selected.` */\n  allSelected?: string;\n  /** Default: `Cancel` */\n  cancel?: string;\n  /** The link offering the rows beyond this page. Default: `Select all {totalItems} {items}` */\n  selectAll?: string;\n  /** `selectionState=\"some\"`. Default: `{selectedCount} {items} selected.` */\n  selected?: string;\n  /** `selectionState=\"allOnPage\"`. Default: `{selectedCount} {items} selected on this page.` */\n  selectedOnPage?: string;\n}\n\nconst DEFAULT_LABELS: Required<BitkitBulkActionsLabels> = {\n  allSelected: 'All {totalItems} {items} selected.',\n  cancel: 'Cancel',\n  selectAll: 'Select all {totalItems} {items}',\n  selected: '{selectedCount} {items} selected.',\n  selectedOnPage: '{selectedCount} {items} selected on this page.',\n};\n\nconst DEFAULT_ITEMS: BitkitBulkActionsItems = { one: 'item', other: 'items' };\n\nconst resolveItems = (items: BitkitBulkActionsItems, count: number) => {\n  if (typeof items === 'string') return items;\n  return count === 1 ? items.one : items.other;\n};\n\nexport interface BitkitBulkActionsRowProps extends Omit<Table.RowProps, 'children'> {\n  /** The bulk action buttons, rendered after `Cancel`. */\n  children?: ReactNode;\n  /** Must match the table's column count, so the row spans the full width. */\n  colSpan: number;\n  /** The counted noun. Default: `{ one: 'item', other: 'items' }` */\n  items?: BitkitBulkActionsItems;\n  labels?: BitkitBulkActionsLabels;\n  onCancel: () => void;\n  /** Renders the `Select all {totalItems} {items}` link while `selectionState=\"allOnPage\"`. */\n  onSelectAll?: () => void;\n  selectedCount: number;\n  /**\n   * `some` — part of the page is selected. `allOnPage` — the whole page is selected, and the rows\n   * beyond it are still on offer. `all` — everything across every page is selected.\n   */\n  selectionState: 'some' | 'allOnPage' | 'all';\n  totalItems: number;\n}\n\n/**\n * The bar above the column headers that appears while rows are selected: what is selected, the\n * offer to widen the selection to every page, and the actions to run on it. Belongs in\n * `Table.Header`, before the `Table.Row` that holds the column headers.\n *\n * The count is mirrored into a visually hidden `aria-live` region, which is deliberately filled a\n * render after mount — a live region that enters the DOM with its text already in it is not\n * announced, so the first selection would go unspoken otherwise.\n *\n * @example\n * ```tsx\n * <Table.Header>\n *   {selected.length > 0 && (\n *     <BitkitBulkActionsRow\n *       colSpan={COL_COUNT}\n *       items={{ one: 'workflow', other: 'workflows' }}\n *       onCancel={clearSelection}\n *       onSelectAll={() => setAllAcrossPages(true)}\n *       selectedCount={selected.length}\n *       selectionState={selectionState}\n *       totalItems={TOTAL_ITEMS}\n *     >\n *       <BitkitButton icon={IconMinusCircle} size=\"md\" variant=\"danger-secondary\">\n *         Remove\n *       </BitkitButton>\n *     </BitkitBulkActionsRow>\n *   )}\n *   <Table.Row>{columnHeaders}</Table.Row>\n * </Table.Header>\n * ```\n */\nconst BitkitBulkActionsRow = forwardRef<HTMLTableRowElement, BitkitBulkActionsRowProps>((props, ref) => {\n  const {\n    children,\n    colSpan,\n    items = DEFAULT_ITEMS,\n    labels: labelsProp,\n    onCancel,\n    onSelectAll,\n    selectedCount,\n    selectionState,\n    totalItems,\n    ...rest\n  } = props;\n\n  const styles = useTableStyles();\n  const labels = { ...DEFAULT_LABELS, ...labelsProp };\n\n  const countLabel = {\n    all: labels.allSelected,\n    allOnPage: labels.selectedOnPage,\n    some: labels.selected,\n  }[selectionState];\n  const count = selectionState === 'all' ? totalItems : selectedCount;\n\n  const countText = formatLabel(countLabel, {\n    items: resolveItems(items, count),\n    selectedCount,\n    totalItems,\n  });\n\n  const selectAllText = formatLabel(labels.selectAll, {\n    items: resolveItems(items, totalItems),\n    selectedCount,\n    totalItems,\n  });\n\n  const [announcement, setAnnouncement] = useState('');\n\n  useEffect(() => {\n    setAnnouncement(countText);\n  }, [countText]);\n\n  return (\n    <Table.Row ref={ref} {...rest}>\n      <Table.Cell colSpan={colSpan} css={styles.utilityCell}>\n        <Box css={styles.bulkActionsGroup}>\n          <Text color=\"text/body\" textStyle=\"body/md/regular\">\n            {countText}\n          </Text>\n          <VisuallyHidden aria-live=\"polite\">{announcement}</VisuallyHidden>\n          {selectionState === 'allOnPage' && !!onSelectAll && (\n            <BitkitButton onClick={onSelectAll} size=\"sm\" variant=\"tertiary\">\n              {selectAllText}\n            </BitkitButton>\n          )}\n          <Box css={styles.bulkActionsButtons}>\n            <BitkitButton onClick={onCancel} size=\"md\" variant=\"tertiary\">\n              {labels.cancel}\n            </BitkitButton>\n            {children}\n          </Box>\n        </Box>\n      </Table.Cell>\n    </Table.Row>\n  );\n});\n\nBitkitBulkActionsRow.displayName = 'BitkitBulkActionsRow';\n\nexport default BitkitBulkActionsRow;\n"],"mappings":";;;;;;;;;AAkCA,IAAM,iBAAoD;CACxD,aAAa;CACb,QAAQ;CACR,WAAW;CACX,UAAU;CACV,gBAAgB;AAClB;AAEA,IAAM,gBAAwC;CAAE,KAAK;CAAQ,OAAO;AAAQ;AAE5E,IAAM,gBAAgB,OAA+B,UAAkB;CACrE,IAAI,OAAO,UAAU,UAAU,OAAO;CACtC,OAAO,UAAU,IAAI,MAAM,MAAM,MAAM;AACzC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqDA,IAAM,uBAAuB,YAA4D,OAAO,QAAQ;CACtG,MAAM,EACJ,UACA,SACA,QAAQ,eACR,QAAQ,YACR,UACA,aACA,eACA,gBACA,YACA,GAAG,SACD;CAEJ,MAAM,SAAS,eAAe;CAC9B,MAAM,SAAS;EAAE,GAAG;EAAgB,GAAG;CAAW;CAElD,MAAM,aAAa;EACjB,KAAK,OAAO;EACZ,WAAW,OAAO;EAClB,MAAM,OAAO;CACf,EAAE;CAGF,MAAM,YAAY,YAAY,YAAY;EACxC,OAAO,aAAa,OAHR,mBAAmB,QAAQ,aAAa,aAGpB;EAChC;EACA;CACF,CAAC;CAED,MAAM,gBAAgB,YAAY,OAAO,WAAW;EAClD,OAAO,aAAa,OAAO,UAAU;EACrC;EACA;CACF,CAAC;CAED,MAAM,CAAC,cAAc,mBAAmB,SAAS,EAAE;CAEnD,gBAAgB;EACd,gBAAgB,SAAS;CAC3B,GAAG,CAAC,SAAS,CAAC;CAEd,OACE,oBAAC,MAAM,KAAP;EAAgB;EAAK,GAAI;EACvB,UAAA,oBAAC,MAAM,MAAP;GAAqB;GAAS,KAAK,OAAO;GACxC,UAAA,qBAAC,KAAD;IAAK,KAAK,OAAO;IAAjB,UAAA;KACE,oBAAC,MAAD;MAAM,OAAM;MAAY,WAAU;MAC/B,UAAA;KACG,CAAA;KACN,oBAAC,gBAAD;MAAgB,aAAU;MAAU,UAAA;KAA6B,CAAA;KAChE,mBAAmB,eAAe,CAAC,CAAC,eACnC,oBAAC,cAAD;MAAc,SAAS;MAAa,MAAK;MAAK,SAAQ;MACnD,UAAA;KACW,CAAA;KAEhB,qBAAC,KAAD;MAAK,KAAK,OAAO;MAAjB,UAAA,CACE,oBAAC,cAAD;OAAc,SAAS;OAAU,MAAK;OAAK,SAAQ;OAChD,UAAA,OAAO;MACI,CAAA,GACb,QACE;;IACF;;EACK,CAAA;CACH,CAAA;AAEf,CAAC;AAED,qBAAqB,cAAc"}

package/dist/components/BitkitTable/BitkitExpandableRow.js

@@ -1,66 +1,42 @@
 import AssetSelectChevron from "../../utilities/AssetSelectChevron.js";
 import { Box } from "@chakra-ui/react/box";
-import { chakra } from "@chakra-ui/react/styled-system";
 import { forwardRef } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Collapsible } from "@chakra-ui/react/collapsible";
-import { Table } from "@chakra-ui/react/table";
+import { Table, useTableStyles } from "@chakra-ui/react/table";
 //#region lib/components/BitkitTable/BitkitExpandableRow.tsx
-var expandCellCss = {
-	paddingBlock: 0,
-	paddingInline: 0,
-	verticalAlign: "middle",
-	width: "48"
-};
-var expandTriggerCss = {
-	alignItems: "center",
-	background: "none",
-	border: "none",
-	cursor: "pointer",
-	display: "flex",
-	justifyContent: "center",
-	padding: "12",
-	paddingInlineEnd: "4",
-	width: "full"
-};
-var expandedContentCss = {
-	paddingBlock: "16",
-	paddingInlineEnd: "16",
-	paddingInlineStart: "64"
-};
-var BitkitExpandableRow = forwardRef(({ children, colSpan, defaultOpen = false, expandedContent }, ref) => /* @__PURE__ */ jsx(Collapsible.Root, {
-	asChild: true,
-	defaultOpen,
-	children: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(Table.Row, {
-		ref,
-		children: [/* @__PURE__ */ jsx(Table.Cell, {
-			css: expandCellCss,
-			children: /* @__PURE__ */ jsx(Collapsible.Trigger, {
-				asChild: true,
-				children: /* @__PURE__ */ jsx(chakra.button, {
+var BitkitExpandableRow = forwardRef(({ children, colSpan, defaultOpen = false, expandedContent }, ref) => {
+	const styles = useTableStyles();
+	return /* @__PURE__ */ jsx(Collapsible.Root, {
+		asChild: true,
+		defaultOpen,
+		children: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(Table.Row, {
+			ref,
+			css: styles.expandableRow,
+			children: [/* @__PURE__ */ jsx(Table.Cell, {
+				css: styles.expandCell,
+				children: /* @__PURE__ */ jsx(Collapsible.Trigger, {
 					"aria-label": "Toggle row details",
-					css: expandTriggerCss,
-					type: "button",
-					children: /* @__PURE__ */ jsx(AssetSelectChevron, { color: "button/secondary/text" })
+					css: styles.expandTrigger,
+					children: /* @__PURE__ */ jsx(Collapsible.Indicator, {
+						asChild: true,
+						children: /* @__PURE__ */ jsx(AssetSelectChevron, { color: "button/secondary/text" })
+					})
 				})
+			}), children]
+		}), /* @__PURE__ */ jsx(Table.Row, {
+			css: styles.expandedRow,
+			children: /* @__PURE__ */ jsx(Table.Cell, {
+				colSpan,
+				css: styles.expandedCell,
+				children: /* @__PURE__ */ jsx(Collapsible.Content, { children: /* @__PURE__ */ jsx(Box, {
+					css: styles.expandedContent,
+					children: expandedContent
+				}) })
 			})
-		}), children]
-	}), /* @__PURE__ */ jsx(Table.Row, {
-		css: { _hover: { background: "none" } },
-		children: /* @__PURE__ */ jsx(Table.Cell, {
-			colSpan,
-			css: {
-				paddingBlock: 0,
-				paddingInline: 0,
-				height: 0
-			},
-			children: /* @__PURE__ */ jsx(Collapsible.Content, { children: /* @__PURE__ */ jsx(Box, {
-				css: expandedContentCss,
-				children: expandedContent
-			}) })
-		})
-	})] })
-}));
+		})] })
+	});
+});
 BitkitExpandableRow.displayName = "BitkitExpandableRow";
 //#endregion
 export { BitkitExpandableRow as default };

package/dist/components/BitkitTable/BitkitExpandableRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"BitkitExpandableRow.js","names":[],"sources":["../../../lib/components/BitkitTable/BitkitExpandableRow.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { Collapsible } from '@chakra-ui/react/collapsible';\nimport { chakra, type SystemStyleObject } from '@chakra-ui/react/styled-system';\nimport { Table } from '@chakra-ui/react/table';\nimport { forwardRef, type ReactNode } from 'react';\n\nimport AssetSelectChevron from '../../utilities/AssetSelectChevron';\n\nexport interface BitkitExpandableRowProps {\n  children: ReactNode;\n  colSpan: number;\n  defaultOpen?: boolean;\n  expandedContent: ReactNode;\n}\n\nconst expandCellCss: SystemStyleObject = {\n  paddingBlock: 0,\n  paddingInline: 0,\n  verticalAlign: 'middle',\n  width: '48',\n};\n\nconst expandTriggerCss: SystemStyleObject = {\n  alignItems: 'center',\n  background: 'none',\n  border: 'none',\n  cursor: 'pointer',\n  display: 'flex',\n  justifyContent: 'center',\n  padding: '12',\n  paddingInlineEnd: '4',\n  width: 'full',\n};\n\nconst expandedContentCss: SystemStyleObject = {\n  paddingBlock: '16',\n  paddingInlineEnd: '16',\n  paddingInlineStart: '64',\n};\n\nconst BitkitExpandableRow = forwardRef<HTMLTableRowElement, BitkitExpandableRowProps>(\n  ({ children, colSpan, defaultOpen = false, expandedContent }, ref) => (\n    <Collapsible.Root asChild defaultOpen={defaultOpen}>\n      <>\n        <Table.Row ref={ref}>\n          <Table.Cell css={expandCellCss}>\n            <Collapsible.Trigger asChild>\n              <chakra.button aria-label=\"Toggle row details\" css={expandTriggerCss} type=\"button\">\n                <AssetSelectChevron color=\"button/secondary/text\" />\n              </chakra.button>\n            </Collapsible.Trigger>\n          </Table.Cell>\n          {children}\n        </Table.Row>\n        <Table.Row css={{ _hover: { background: 'none' } }}>\n          <Table.Cell colSpan={colSpan} css={{ paddingBlock: 0, paddingInline: 0, height: 0 }}>\n            <Collapsible.Content>\n              <Box css={expandedContentCss}>{expandedContent}</Box>\n            </Collapsible.Content>\n          </Table.Cell>\n        </Table.Row>\n      </>\n    </Collapsible.Root>\n  ),\n);\n\nBitkitExpandableRow.displayName = 'BitkitExpandableRow';\n\nexport default BitkitExpandableRow;\n"],"mappings":";;;;;;;;AAeA,IAAM,gBAAmC;CACvC,cAAc;CACd,eAAe;CACf,eAAe;CACf,OAAO;AACT;AAEA,IAAM,mBAAsC;CAC1C,YAAY;CACZ,YAAY;CACZ,QAAQ;CACR,QAAQ;CACR,SAAS;CACT,gBAAgB;CAChB,SAAS;CACT,kBAAkB;CAClB,OAAO;AACT;AAEA,IAAM,qBAAwC;CAC5C,cAAc;CACd,kBAAkB;CAClB,oBAAoB;AACtB;AAEA,IAAM,sBAAsB,YACzB,EAAE,UAAU,SAAS,cAAc,OAAO,mBAAmB,QAC5D,oBAAC,YAAY,MAAb;CAAkB,SAAA;CAAqB;CACrC,UAAA,qBAAA,YAAA,EAAA,UAAA,CACE,qBAAC,MAAM,KAAP;EAAgB;EAAhB,UAAA,CACE,oBAAC,MAAM,MAAP;GAAY,KAAK;GACf,UAAA,oBAAC,YAAY,SAAb;IAAqB,SAAA;IACnB,UAAA,oBAAC,OAAO,QAAR;KAAe,cAAW;KAAqB,KAAK;KAAkB,MAAK;KACzE,UAAA,oBAAC,oBAAD,EAAoB,OAAM,wBAAyB,CAAA;IACtC,CAAA;GACI,CAAA;EACX,CAAA,GACX,QACQ;CACX,CAAA,GAAA,oBAAC,MAAM,KAAP;EAAW,KAAK,EAAE,QAAQ,EAAE,YAAY,OAAO,EAAE;EAC/C,UAAA,oBAAC,MAAM,MAAP;GAAqB;GAAS,KAAK;IAAE,cAAc;IAAG,eAAe;IAAG,QAAQ;GAAE;GAChF,UAAA,oBAAC,YAAY,SAAb,EAAA,UACE,oBAAC,KAAD;IAAK,KAAK;IAAqB,UAAA;GAAqB,CAAA,EACjC,CAAA;EACX,CAAA;CACH,CAAA,CACX,EAAA,CAAA;AACc,CAAA,CAEtB;AAEA,oBAAoB,cAAc"}
+{"version":3,"file":"BitkitExpandableRow.js","names":[],"sources":["../../../lib/components/BitkitTable/BitkitExpandableRow.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { Collapsible } from '@chakra-ui/react/collapsible';\nimport { Table, useTableStyles } from '@chakra-ui/react/table';\nimport { forwardRef, type ReactNode } from 'react';\n\nimport AssetSelectChevron from '../../utilities/AssetSelectChevron';\n\nexport interface BitkitExpandableRowProps {\n  children: ReactNode;\n  colSpan: number;\n  defaultOpen?: boolean;\n  expandedContent: ReactNode;\n}\n\nconst BitkitExpandableRow = forwardRef<HTMLTableRowElement, BitkitExpandableRowProps>(\n  ({ children, colSpan, defaultOpen = false, expandedContent }, ref) => {\n    const styles = useTableStyles();\n\n    return (\n      <Collapsible.Root asChild defaultOpen={defaultOpen}>\n        <>\n          <Table.Row ref={ref} css={styles.expandableRow}>\n            <Table.Cell css={styles.expandCell}>\n              <Collapsible.Trigger aria-label=\"Toggle row details\" css={styles.expandTrigger}>\n                <Collapsible.Indicator asChild>\n                  <AssetSelectChevron color=\"button/secondary/text\" />\n                </Collapsible.Indicator>\n              </Collapsible.Trigger>\n            </Table.Cell>\n            {children}\n          </Table.Row>\n          <Table.Row css={styles.expandedRow}>\n            <Table.Cell colSpan={colSpan} css={styles.expandedCell}>\n              <Collapsible.Content>\n                <Box css={styles.expandedContent}>{expandedContent}</Box>\n              </Collapsible.Content>\n            </Table.Cell>\n          </Table.Row>\n        </>\n      </Collapsible.Root>\n    );\n  },\n);\n\nBitkitExpandableRow.displayName = 'BitkitExpandableRow';\n\nexport default BitkitExpandableRow;\n"],"mappings":";;;;;;;AAcA,IAAM,sBAAsB,YACzB,EAAE,UAAU,SAAS,cAAc,OAAO,mBAAmB,QAAQ;CACpE,MAAM,SAAS,eAAe;CAE9B,OACE,oBAAC,YAAY,MAAb;EAAkB,SAAA;EAAqB;EACrC,UAAA,qBAAA,YAAA,EAAA,UAAA,CACE,qBAAC,MAAM,KAAP;GAAgB;GAAK,KAAK,OAAO;GAAjC,UAAA,CACE,oBAAC,MAAM,MAAP;IAAY,KAAK,OAAO;IACtB,UAAA,oBAAC,YAAY,SAAb;KAAqB,cAAW;KAAqB,KAAK,OAAO;KAC/D,UAAA,oBAAC,YAAY,WAAb;MAAuB,SAAA;MACrB,UAAA,oBAAC,oBAAD,EAAoB,OAAM,wBAAyB,CAAA;KAC9B,CAAA;IACJ,CAAA;GACX,CAAA,GACX,QACQ;EACX,CAAA,GAAA,oBAAC,MAAM,KAAP;GAAW,KAAK,OAAO;GACrB,UAAA,oBAAC,MAAM,MAAP;IAAqB;IAAS,KAAK,OAAO;IACxC,UAAA,oBAAC,YAAY,SAAb,EAAA,UACE,oBAAC,KAAD;KAAK,KAAK,OAAO;KAAkB,UAAA;IAAqB,CAAA,EACrC,CAAA;GACX,CAAA;EACH,CAAA,CACX,EAAA,CAAA;CACc,CAAA;AAEtB,CACF;AAEA,oBAAoB,cAAc"}

package/dist/components/BitkitTable/BitkitFilterRow.d.ts

@@ -0,0 +1,25 @@
+import { Table } from '@chakra-ui/react/table';
+import { ReactNode } from 'react';
+export interface BitkitFilterRowProps extends Omit<Table.RowProps, 'children'> {
+    /** The filter controls. Laid out in a wrapping row, so any number of them fits. */
+    children: ReactNode;
+    /** Must match the table's column count, so the row spans the full width. */
+    colSpan: number;
+}
+/**
+ * A full-width row of filter controls above the column headers. Belongs in `Table.Header`, before
+ * the `Table.Row` that holds the column headers.
+ *
+ * @example
+ * ```tsx
+ * <Table.Header>
+ *   <BitkitFilterRow colSpan={COL_COUNT}>
+ *     <BitkitSearchInput onChange={...} value={search} />
+ *     <BitkitSelect items={teams} onValueChange={...} value={team} />
+ *   </BitkitFilterRow>
+ *   <Table.Row>{columnHeaders}</Table.Row>
+ * </Table.Header>
+ * ```
+ */
+declare const BitkitFilterRow: import('react').ForwardRefExoticComponent<BitkitFilterRowProps & import('react').RefAttributes<HTMLTableRowElement>>;
+export default BitkitFilterRow;

package/dist/components/BitkitTable/BitkitFilterRow.js

@@ -0,0 +1,41 @@
+import { Box } from "@chakra-ui/react/box";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { Table, useTableStyles } from "@chakra-ui/react/table";
+//#region lib/components/BitkitTable/BitkitFilterRow.tsx
+/**
+* A full-width row of filter controls above the column headers. Belongs in `Table.Header`, before
+* the `Table.Row` that holds the column headers.
+*
+* @example
+* ```tsx
+* <Table.Header>
+*   <BitkitFilterRow colSpan={COL_COUNT}>
+*     <BitkitSearchInput onChange={...} value={search} />
+*     <BitkitSelect items={teams} onValueChange={...} value={team} />
+*   </BitkitFilterRow>
+*   <Table.Row>{columnHeaders}</Table.Row>
+* </Table.Header>
+* ```
+*/
+var BitkitFilterRow = forwardRef((props, ref) => {
+	const { children, colSpan, ...rest } = props;
+	const styles = useTableStyles();
+	return /* @__PURE__ */ jsx(Table.Row, {
+		ref,
+		...rest,
+		children: /* @__PURE__ */ jsx(Table.Cell, {
+			colSpan,
+			css: styles.utilityCell,
+			children: /* @__PURE__ */ jsx(Box, {
+				css: styles.filterControls,
+				children
+			})
+		})
+	});
+});
+BitkitFilterRow.displayName = "BitkitFilterRow";
+//#endregion
+export { BitkitFilterRow as default };
+
+//# sourceMappingURL=BitkitFilterRow.js.map

package/dist/components/BitkitTable/BitkitFilterRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BitkitFilterRow.js","names":[],"sources":["../../../lib/components/BitkitTable/BitkitFilterRow.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { Table, useTableStyles } from '@chakra-ui/react/table';\nimport { forwardRef, type ReactNode } from 'react';\n\nexport interface BitkitFilterRowProps extends Omit<Table.RowProps, 'children'> {\n  /** The filter controls. Laid out in a wrapping row, so any number of them fits. */\n  children: ReactNode;\n  /** Must match the table's column count, so the row spans the full width. */\n  colSpan: number;\n}\n\n/**\n * A full-width row of filter controls above the column headers. Belongs in `Table.Header`, before\n * the `Table.Row` that holds the column headers.\n *\n * @example\n * ```tsx\n * <Table.Header>\n *   <BitkitFilterRow colSpan={COL_COUNT}>\n *     <BitkitSearchInput onChange={...} value={search} />\n *     <BitkitSelect items={teams} onValueChange={...} value={team} />\n *   </BitkitFilterRow>\n *   <Table.Row>{columnHeaders}</Table.Row>\n * </Table.Header>\n * ```\n */\nconst BitkitFilterRow = forwardRef<HTMLTableRowElement, BitkitFilterRowProps>((props, ref) => {\n  const { children, colSpan, ...rest } = props;\n  const styles = useTableStyles();\n\n  return (\n    <Table.Row ref={ref} {...rest}>\n      <Table.Cell colSpan={colSpan} css={styles.utilityCell}>\n        <Box css={styles.filterControls}>{children}</Box>\n      </Table.Cell>\n    </Table.Row>\n  );\n});\n\nBitkitFilterRow.displayName = 'BitkitFilterRow';\n\nexport default BitkitFilterRow;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AA0BA,IAAM,kBAAkB,YAAuD,OAAO,QAAQ;CAC5F,MAAM,EAAE,UAAU,SAAS,GAAG,SAAS;CACvC,MAAM,SAAS,eAAe;CAE9B,OACE,oBAAC,MAAM,KAAP;EAAgB;EAAK,GAAI;EACvB,UAAA,oBAAC,MAAM,MAAP;GAAqB;GAAS,KAAK,OAAO;GACxC,UAAA,oBAAC,KAAD;IAAK,KAAK,OAAO;IAAiB;GAAc,CAAA;EACtC,CAAA;CACH,CAAA;AAEf,CAAC;AAED,gBAAgB,cAAc"}

package/dist/components/BitkitTable/BitkitLinkedRow.d.ts

@@ -0,0 +1,12 @@
+import { Table } from '@chakra-ui/react/table';
+export interface BitkitLinkedRowProps extends Omit<Table.RowProps, 'onClick'> {
+    /** Target of the row link. Passed down to the `BitkitLinkedRow.LinkCell` inside the row. */
+    href: string;
+    /** Renders the link with the external-link affordance and opens it in a new tab. */
+    isExternal?: boolean;
+}
+export type BitkitLinkedRowLinkCellProps = Table.CellProps;
+declare const _default: import('react').ForwardRefExoticComponent<BitkitLinkedRowProps & import('react').RefAttributes<HTMLTableRowElement>> & {
+    LinkCell: import('react').ForwardRefExoticComponent<Table.CellProps & import('react').RefAttributes<HTMLTableCellElement>>;
+};
+export default _default;

package/dist/components/BitkitTable/BitkitLinkedRow.js

@@ -0,0 +1,72 @@
+import { withSubComponents } from "../../utilities/withSubComponents.js";
+import BitkitLink from "../BitkitLink/BitkitLink.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { createContext as createContext$1 } from "@chakra-ui/react";
+import { Table, useTableStyles } from "@chakra-ui/react/table";
+//#region lib/components/BitkitTable/BitkitLinkedRow.tsx
+var [ContextProvider, useLinkedRowContext] = createContext$1({
+	name: "LinkedRowContext",
+	hookName: "useLinkedRowContext",
+	providerName: "<BitkitLinkedRow />"
+});
+/**
+* A table row that navigates as a whole. Exactly one of its cells must be a
+* `BitkitLinkedRow.LinkCell` — that cell's content becomes the accessible link text, and its
+* stretched pseudo-element makes the entire row the click and focus target.
+*
+* Interactive elements in the other cells (buttons, checkboxes, other links) stay clickable: they
+* are lifted above the stretched link, so a `BitkitRowActionsCell` works inside a linked row.
+*
+* @example
+* ```tsx
+* <BitkitLinkedRow href={`/workflows/${row.id}`}>
+*   <BitkitLinkedRow.LinkCell>{row.name}</BitkitLinkedRow.LinkCell>
+*   <Table.Cell>{row.status}</Table.Cell>
+*   <BitkitRowActionsCell actions={actions} />
+* </BitkitLinkedRow>
+* ```
+*/
+var BitkitLinkedRow = forwardRef((props, ref) => {
+	const { children, href, isExternal, ...rest } = props;
+	const styles = useTableStyles();
+	return /* @__PURE__ */ jsx(ContextProvider, {
+		value: {
+			href,
+			isExternal
+		},
+		children: /* @__PURE__ */ jsx(Table.Row, {
+			ref,
+			css: styles.linkedRow,
+			...rest,
+			children
+		})
+	});
+});
+BitkitLinkedRow.displayName = "BitkitLinkedRow";
+/**
+* The cell that carries the row's link. Its children are the accessible link text, so give it the
+* cell that names the row. Reads `href` and `isExternal` from the surrounding `BitkitLinkedRow`.
+*/
+var LinkCell = forwardRef((props, ref) => {
+	const { children, ...rest } = props;
+	const { href, isExternal } = useLinkedRowContext();
+	const styles = useTableStyles();
+	return /* @__PURE__ */ jsx(Table.Cell, {
+		ref,
+		...rest,
+		children: /* @__PURE__ */ jsx(BitkitLink, {
+			css: styles.rowLink,
+			"data-row-link": true,
+			href,
+			isExternal,
+			children
+		})
+	});
+});
+LinkCell.displayName = "BitkitLinkedRow.LinkCell";
+var BitkitLinkedRow_default = withSubComponents(BitkitLinkedRow, { LinkCell });
+//#endregion
+export { BitkitLinkedRow_default as default };
+
+//# sourceMappingURL=BitkitLinkedRow.js.map

package/dist/components/BitkitTable/BitkitLinkedRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BitkitLinkedRow.js","names":[],"sources":["../../../lib/components/BitkitTable/BitkitLinkedRow.tsx"],"sourcesContent":["// eslint-disable-next-line no-restricted-imports\nimport { createContext } from '@chakra-ui/react';\nimport { Table, useTableStyles } from '@chakra-ui/react/table';\nimport { forwardRef } from 'react';\n\nimport { withSubComponents } from '../../utilities/withSubComponents';\nimport BitkitLink from '../BitkitLink/BitkitLink';\n\ninterface LinkedRowContext {\n  href: string;\n  isExternal?: boolean;\n}\n\nconst [ContextProvider, useLinkedRowContext] = createContext<LinkedRowContext>({\n  name: 'LinkedRowContext',\n  hookName: 'useLinkedRowContext',\n  providerName: '<BitkitLinkedRow />',\n});\n\nexport interface BitkitLinkedRowProps extends Omit<Table.RowProps, 'onClick'> {\n  /** Target of the row link. Passed down to the `BitkitLinkedRow.LinkCell` inside the row. */\n  href: string;\n  /** Renders the link with the external-link affordance and opens it in a new tab. */\n  isExternal?: boolean;\n}\n\n/**\n * A table row that navigates as a whole. Exactly one of its cells must be a\n * `BitkitLinkedRow.LinkCell` — that cell's content becomes the accessible link text, and its\n * stretched pseudo-element makes the entire row the click and focus target.\n *\n * Interactive elements in the other cells (buttons, checkboxes, other links) stay clickable: they\n * are lifted above the stretched link, so a `BitkitRowActionsCell` works inside a linked row.\n *\n * @example\n * ```tsx\n * <BitkitLinkedRow href={`/workflows/${row.id}`}>\n *   <BitkitLinkedRow.LinkCell>{row.name}</BitkitLinkedRow.LinkCell>\n *   <Table.Cell>{row.status}</Table.Cell>\n *   <BitkitRowActionsCell actions={actions} />\n * </BitkitLinkedRow>\n * ```\n */\nconst BitkitLinkedRow = forwardRef<HTMLTableRowElement, BitkitLinkedRowProps>((props, ref) => {\n  const { children, href, isExternal, ...rest } = props;\n  const styles = useTableStyles();\n\n  return (\n    <ContextProvider value={{ href, isExternal }}>\n      <Table.Row ref={ref} css={styles.linkedRow} {...rest}>\n        {children}\n      </Table.Row>\n    </ContextProvider>\n  );\n});\n\nBitkitLinkedRow.displayName = 'BitkitLinkedRow';\n\nexport type BitkitLinkedRowLinkCellProps = Table.CellProps;\n\n/**\n * The cell that carries the row's link. Its children are the accessible link text, so give it the\n * cell that names the row. Reads `href` and `isExternal` from the surrounding `BitkitLinkedRow`.\n */\nconst LinkCell = forwardRef<HTMLTableCellElement, BitkitLinkedRowLinkCellProps>((props, ref) => {\n  const { children, ...rest } = props;\n  const { href, isExternal } = useLinkedRowContext();\n  const styles = useTableStyles();\n\n  return (\n    <Table.Cell ref={ref} {...rest}>\n      <BitkitLink css={styles.rowLink} data-row-link href={href} isExternal={isExternal}>\n        {children}\n      </BitkitLink>\n    </Table.Cell>\n  );\n});\n\nLinkCell.displayName = 'BitkitLinkedRow.LinkCell';\n\nexport default withSubComponents(BitkitLinkedRow, { LinkCell });\n"],"mappings":";;;;;;;AAaA,IAAM,CAAC,iBAAiB,uBAAuB,gBAAgC;CAC7E,MAAM;CACN,UAAU;CACV,cAAc;AAChB,CAAC;;;;;;;;;;;;;;;;;;AA0BD,IAAM,kBAAkB,YAAuD,OAAO,QAAQ;CAC5F,MAAM,EAAE,UAAU,MAAM,YAAY,GAAG,SAAS;CAChD,MAAM,SAAS,eAAe;CAE9B,OACE,oBAAC,iBAAD;EAAiB,OAAO;GAAE;GAAM;EAAW;EACzC,UAAA,oBAAC,MAAM,KAAP;GAAgB;GAAK,KAAK,OAAO;GAAW,GAAI;GAC7C;EACQ,CAAA;CACI,CAAA;AAErB,CAAC;AAED,gBAAgB,cAAc;;;;;AAQ9B,IAAM,WAAW,YAAgE,OAAO,QAAQ;CAC9F,MAAM,EAAE,UAAU,GAAG,SAAS;CAC9B,MAAM,EAAE,MAAM,eAAe,oBAAoB;CACjD,MAAM,SAAS,eAAe;CAE9B,OACE,oBAAC,MAAM,MAAP;EAAiB;EAAK,GAAI;EACxB,UAAA,oBAAC,YAAD;GAAY,KAAK,OAAO;GAAS,iBAAA;GAAoB;GAAkB;GACpE;EACS,CAAA;CACF,CAAA;AAEhB,CAAC;AAED,SAAS,cAAc;AAEvB,IAAA,0BAAe,kBAAkB,iBAAiB,EAAE,SAAS,CAAC"}

package/dist/components/BitkitTable/BitkitRowActionsCell.d.ts

@@ -0,0 +1,43 @@
+import { Table } from '@chakra-ui/react/table';
+import { MouseEvent } from 'react';
+import { BitkitIconComponent } from '../../icons';
+/** One row action, rendered either as an inline control button or as an action menu item. */
+export interface BitkitRowAction {
+    /** Renders the action in the danger color set. */
+    danger?: boolean;
+    /** Makes the action a link instead of a button. */
+    href?: string;
+    icon: BitkitIconComponent;
+    /** Only with `href`: opens the link in a new tab and adds the external-link affordance. */
+    isExternal?: boolean;
+    /** Accessible name of the inline button, and the visible text of the menu item. Must be unique
+     * within `actions`, since it keys the list. */
+    label: string;
+    onClick?: (event: MouseEvent<HTMLElement>) => void;
+    state?: 'disabled';
+}
+export interface BitkitRowActionsCellProps extends Omit<Table.CellProps, 'children' | 'onClick'> {
+    /** Up to two actions render as inline icon buttons; three or more collapse into an action menu. */
+    actions: BitkitRowAction[];
+    /** Accessible name of the action menu trigger, used from the third action on. Default: `More actions` */
+    menuLabel?: string;
+}
+/**
+ * The trailing cell of a table row, holding its actions. The column shrinks to fit the buttons.
+ *
+ * Up to two actions render as inline icon buttons; from the third on they collapse into a single
+ * action menu, so the column width stays predictable. Clicks are kept inside the cell, so the
+ * actions work in a `BitkitLinkedRow` without triggering the row link.
+ *
+ * @example
+ * ```tsx
+ * <BitkitRowActionsCell
+ *   actions={[
+ *     { icon: IconPencil, label: 'Edit', onClick: onEdit },
+ *     { danger: true, icon: IconMinusCircle, label: 'Remove', onClick: onRemove },
+ *   ]}
+ * />
+ * ```
+ */
+declare const BitkitRowActionsCell: import('react').ForwardRefExoticComponent<BitkitRowActionsCellProps & import('react').RefAttributes<HTMLTableCellElement>>;
+export default BitkitRowActionsCell;