@bitrise/bitkit-v2 0.3.372 → 0.3.374

package/dist/components/BitkitTable/BitkitRowActionsCell.js

@@ -0,0 +1,90 @@
+import IconMoreVertical from "../../icons/IconMoreVertical.js";
+import BitkitActionMenu_default from "../BitkitActionMenu/BitkitActionMenu.js";
+import BitkitControlButton from "../BitkitControlButton/BitkitControlButton.js";
+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/BitkitRowActionsCell.tsx
+var MAX_INLINE_ACTIONS = 2;
+var InlineAction = ({ action }) => {
+	if (action.href !== void 0) return /* @__PURE__ */ jsx(BitkitControlButton, {
+		href: action.href,
+		icon: action.icon,
+		isDanger: action.danger,
+		isExternal: action.isExternal,
+		label: action.label,
+		onClick: action.onClick,
+		state: action.state
+	});
+	return /* @__PURE__ */ jsx(BitkitControlButton, {
+		icon: action.icon,
+		isDanger: action.danger,
+		label: action.label,
+		onClick: action.onClick,
+		state: action.state
+	});
+};
+var MenuAction = ({ action }) => {
+	if (action.href !== void 0) return /* @__PURE__ */ jsx(BitkitActionMenu_default.Item, {
+		disabled: action.state === "disabled",
+		href: action.href,
+		icon: action.icon,
+		isDanger: action.danger,
+		isExternal: action.isExternal,
+		onClick: action.onClick,
+		value: action.label,
+		children: action.label
+	});
+	return /* @__PURE__ */ jsx(BitkitActionMenu_default.Item, {
+		disabled: action.state === "disabled",
+		icon: action.icon,
+		isDanger: action.danger,
+		onClick: action.onClick,
+		value: action.label,
+		children: action.label
+	});
+};
+/**
+* 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 },
+*   ]}
+* />
+* ```
+*/
+var BitkitRowActionsCell = forwardRef((props, ref) => {
+	const { actions, menuLabel = "More actions", ...rest } = props;
+	const styles = useTableStyles();
+	return /* @__PURE__ */ jsx(Table.Cell, {
+		ref,
+		css: styles.actionsCell,
+		...rest,
+		children: /* @__PURE__ */ jsx(Box, {
+			css: styles.actionsGroup,
+			onClick: (event) => event.stopPropagation(),
+			children: actions.length <= MAX_INLINE_ACTIONS ? actions.map((action) => /* @__PURE__ */ jsx(InlineAction, { action }, action.label)) : /* @__PURE__ */ jsx(BitkitActionMenu_default, {
+				size: "md",
+				trigger: /* @__PURE__ */ jsx(BitkitControlButton, {
+					icon: IconMoreVertical,
+					label: menuLabel
+				}),
+				children: actions.map((action) => /* @__PURE__ */ jsx(MenuAction, { action }, action.label))
+			})
+		})
+	});
+});
+BitkitRowActionsCell.displayName = "BitkitRowActionsCell";
+//#endregion
+export { BitkitRowActionsCell as default };
+
+//# sourceMappingURL=BitkitRowActionsCell.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BitkitRowActionsCell.js","names":[],"sources":["../../../lib/components/BitkitTable/BitkitRowActionsCell.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { Table, useTableStyles } from '@chakra-ui/react/table';\nimport { forwardRef, type MouseEvent } from 'react';\n\nimport { type BitkitIconComponent } from '../../icons';\nimport IconMoreVertical from '../../icons/IconMoreVertical';\nimport BitkitActionMenu from '../BitkitActionMenu/BitkitActionMenu';\nimport BitkitControlButton from '../BitkitControlButton/BitkitControlButton';\n\n/** One row action, rendered either as an inline control button or as an action menu item. */\nexport interface BitkitRowAction {\n  /** Renders the action in the danger color set. */\n  danger?: boolean;\n  /** Makes the action a link instead of a button. */\n  href?: string;\n  icon: BitkitIconComponent;\n  /** Only with `href`: opens the link in a new tab and adds the external-link affordance. */\n  isExternal?: boolean;\n  /** Accessible name of the inline button, and the visible text of the menu item. Must be unique\n   * within `actions`, since it keys the list. */\n  label: string;\n  onClick?: (event: MouseEvent<HTMLElement>) => void;\n  state?: 'disabled';\n}\n\nexport interface BitkitRowActionsCellProps extends Omit<Table.CellProps, 'children' | 'onClick'> {\n  /** Up to two actions render as inline icon buttons; three or more collapse into an action menu. */\n  actions: BitkitRowAction[];\n  /** Accessible name of the action menu trigger, used from the third action on. Default: `More actions` */\n  menuLabel?: string;\n}\n\nconst MAX_INLINE_ACTIONS = 2;\n\nconst InlineAction = ({ action }: { action: BitkitRowAction }) => {\n  if (action.href !== undefined) {\n    return (\n      <BitkitControlButton\n        href={action.href}\n        icon={action.icon}\n        isDanger={action.danger}\n        isExternal={action.isExternal}\n        label={action.label}\n        onClick={action.onClick}\n        state={action.state}\n      />\n    );\n  }\n\n  return (\n    <BitkitControlButton\n      icon={action.icon}\n      isDanger={action.danger}\n      label={action.label}\n      onClick={action.onClick}\n      state={action.state}\n    />\n  );\n};\n\nconst MenuAction = ({ action }: { action: BitkitRowAction }) => {\n  if (action.href !== undefined) {\n    return (\n      <BitkitActionMenu.Item\n        disabled={action.state === 'disabled'}\n        href={action.href}\n        icon={action.icon}\n        isDanger={action.danger}\n        isExternal={action.isExternal}\n        onClick={action.onClick}\n        value={action.label}\n      >\n        {action.label}\n      </BitkitActionMenu.Item>\n    );\n  }\n\n  return (\n    <BitkitActionMenu.Item\n      disabled={action.state === 'disabled'}\n      icon={action.icon}\n      isDanger={action.danger}\n      onClick={action.onClick}\n      value={action.label}\n    >\n      {action.label}\n    </BitkitActionMenu.Item>\n  );\n};\n\n/**\n * The trailing cell of a table row, holding its actions. The column shrinks to fit the buttons.\n *\n * Up to two actions render as inline icon buttons; from the third on they collapse into a single\n * action menu, so the column width stays predictable. Clicks are kept inside the cell, so the\n * actions work in a `BitkitLinkedRow` without triggering the row link.\n *\n * @example\n * ```tsx\n * <BitkitRowActionsCell\n *   actions={[\n *     { icon: IconPencil, label: 'Edit', onClick: onEdit },\n *     { danger: true, icon: IconMinusCircle, label: 'Remove', onClick: onRemove },\n *   ]}\n * />\n * ```\n */\nconst BitkitRowActionsCell = forwardRef<HTMLTableCellElement, BitkitRowActionsCellProps>((props, ref) => {\n  const { actions, menuLabel = 'More actions', ...rest } = props;\n  const styles = useTableStyles();\n\n  return (\n    <Table.Cell ref={ref} css={styles.actionsCell} {...rest}>\n      <Box css={styles.actionsGroup} onClick={(event) => event.stopPropagation()}>\n        {actions.length <= MAX_INLINE_ACTIONS ? (\n          actions.map((action) => <InlineAction key={action.label} action={action} />)\n        ) : (\n          <BitkitActionMenu size=\"md\" trigger={<BitkitControlButton icon={IconMoreVertical} label={menuLabel} />}>\n            {actions.map((action) => (\n              <MenuAction key={action.label} action={action} />\n            ))}\n          </BitkitActionMenu>\n        )}\n      </Box>\n    </Table.Cell>\n  );\n});\n\nBitkitRowActionsCell.displayName = 'BitkitRowActionsCell';\n\nexport default BitkitRowActionsCell;\n"],"mappings":";;;;;;;;AAgCA,IAAM,qBAAqB;AAE3B,IAAM,gBAAgB,EAAE,aAA0C;CAChE,IAAI,OAAO,SAAS,KAAA,GAClB,OACE,oBAAC,qBAAD;EACE,MAAM,OAAO;EACb,MAAM,OAAO;EACb,UAAU,OAAO;EACjB,YAAY,OAAO;EACnB,OAAO,OAAO;EACd,SAAS,OAAO;EAChB,OAAO,OAAO;CACf,CAAA;CAIL,OACE,oBAAC,qBAAD;EACE,MAAM,OAAO;EACb,UAAU,OAAO;EACjB,OAAO,OAAO;EACd,SAAS,OAAO;EAChB,OAAO,OAAO;CACf,CAAA;AAEL;AAEA,IAAM,cAAc,EAAE,aAA0C;CAC9D,IAAI,OAAO,SAAS,KAAA,GAClB,OACE,oBAAC,yBAAiB,MAAlB;EACE,UAAU,OAAO,UAAU;EAC3B,MAAM,OAAO;EACb,MAAM,OAAO;EACb,UAAU,OAAO;EACjB,YAAY,OAAO;EACnB,SAAS,OAAO;EAChB,OAAO,OAAO;EAEb,UAAA,OAAO;CACa,CAAA;CAI3B,OACE,oBAAC,yBAAiB,MAAlB;EACE,UAAU,OAAO,UAAU;EAC3B,MAAM,OAAO;EACb,UAAU,OAAO;EACjB,SAAS,OAAO;EAChB,OAAO,OAAO;EAEb,UAAA,OAAO;CACa,CAAA;AAE3B;;;;;;;;;;;;;;;;;;AAmBA,IAAM,uBAAuB,YAA6D,OAAO,QAAQ;CACvG,MAAM,EAAE,SAAS,YAAY,gBAAgB,GAAG,SAAS;CACzD,MAAM,SAAS,eAAe;CAE9B,OACE,oBAAC,MAAM,MAAP;EAAiB;EAAK,KAAK,OAAO;EAAa,GAAI;EACjD,UAAA,oBAAC,KAAD;GAAK,KAAK,OAAO;GAAc,UAAU,UAAU,MAAM,gBAAgB;GACtE,UAAA,QAAQ,UAAU,qBACjB,QAAQ,KAAK,WAAW,oBAAC,cAAD,EAAyC,OAAS,GAA/B,OAAO,KAAwB,CAAC,IAE3E,oBAAC,0BAAD;IAAkB,MAAK;IAAK,SAAS,oBAAC,qBAAD;KAAqB,MAAM;KAAkB,OAAO;IAAY,CAAA;IAClG,UAAA,QAAQ,KAAK,WACZ,oBAAC,YAAD,EAAuC,OAAS,GAA/B,OAAO,KAAwB,CACjD;GACe,CAAA;EAEjB,CAAA;CACK,CAAA;AAEhB,CAAC;AAED,qBAAqB,cAAc"}

package/dist/components/BitkitTable/BitkitSortableColumnHeader.js

@@ -1,31 +1,9 @@
 import { chakra } from "@chakra-ui/react/styled-system";
 import { forwardRef } from "react";
 import { Icon } from "@chakra-ui/react/icon";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Table } from "@chakra-ui/react/table";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Table, useTableStyles } from "@chakra-ui/react/table";
 //#region lib/components/BitkitTable/BitkitSortableColumnHeader.tsx
-var sortHeaderCss = {
-	paddingBlock: 0,
-	paddingInline: 0
-};
-var sortButtonCss = {
-	alignItems: "center",
-	appearance: "none",
-	background: "none",
-	border: "none",
-	color: "inherit",
-	cursor: "pointer",
-	display: "flex",
-	font: "inherit",
-	gap: "4",
-	height: "100%",
-	paddingBlock: "12",
-	paddingInline: "16",
-	userSelect: "none",
-	_focusVisible: { outlineOffset: "-3px" },
-	width: "100%",
-	_hover: { backgroundColor: "background/active" }
-};
 var SortIcon = forwardRef((props, ref) => {
 	const { direction, ...rest } = props;
 	const upFill = direction === "ascending" ? "currentColor" : "var(--sort-icon-inactive)";
@@ -57,23 +35,32 @@ var SortIcon = forwardRef((props, ref) => {
 	});
 });
 SortIcon.displayName = "SortIcon";
-var BitkitSortableColumnHeader = forwardRef(({ children, direction, onSort, textAlign, ...rest }, ref) => /* @__PURE__ */ jsx(Table.ColumnHeader, {
-	ref,
-	"aria-sort": direction === "none" ? void 0 : direction,
-	css: sortHeaderCss,
-	...rest,
-	children: /* @__PURE__ */ jsxs(chakra.button, {
-		css: sortButtonCss,
-		justifyContent: textAlign === "end" ? "flex-end" : void 0,
-		onClick: onSort,
-		type: "button",
-		children: [
-			children,
-			" ",
-			/* @__PURE__ */ jsx(SortIcon, { direction })
-		]
-	})
-}));
+var BitkitSortableColumnHeader = forwardRef(({ children, direction, onSort, textAlign, ...rest }, ref) => {
+	const styles = useTableStyles();
+	const isEndAligned = textAlign === "end";
+	const sortIcon = /* @__PURE__ */ jsx(SortIcon, { direction });
+	return /* @__PURE__ */ jsx(Table.ColumnHeader, {
+		ref,
+		"aria-sort": direction === "none" ? void 0 : direction,
+		css: styles.sortColumnHeader,
+		...rest,
+		children: /* @__PURE__ */ jsx(chakra.button, {
+			css: styles.sortTrigger,
+			justifyContent: isEndAligned ? "flex-end" : void 0,
+			onClick: onSort,
+			type: "button",
+			children: isEndAligned ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+				sortIcon,
+				" ",
+				children
+			] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+				children,
+				" ",
+				sortIcon
+			] })
+		})
+	});
+});
 BitkitSortableColumnHeader.displayName = "BitkitSortableColumnHeader";
 //#endregion
 export { BitkitSortableColumnHeader as default };

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

@@ -1 +1 @@
-{"version":3,"file":"BitkitSortableColumnHeader.js","names":[],"sources":["../../../lib/components/BitkitTable/BitkitSortableColumnHeader.tsx"],"sourcesContent":["import { Icon, type IconProps } from '@chakra-ui/react/icon';\nimport { chakra } from '@chakra-ui/react/styled-system';\nimport { Table } from '@chakra-ui/react/table';\nimport { forwardRef, type Ref } from 'react';\n\ntype SortDirection = 'ascending' | 'descending' | 'none';\n\nexport interface BitkitSortableColumnHeaderProps extends Omit<Table.ColumnHeaderProps, 'aria-sort' | 'onClick'> {\n  direction: SortDirection;\n  onSort: () => void;\n}\n\nconst sortHeaderCss = {\n  paddingBlock: 0,\n  paddingInline: 0,\n};\n\nconst sortButtonCss = {\n  alignItems: 'center',\n  appearance: 'none' as const,\n  background: 'none',\n  border: 'none',\n  color: 'inherit',\n  cursor: 'pointer',\n  display: 'flex',\n  font: 'inherit',\n  gap: '4',\n  height: '100%',\n  paddingBlock: '12',\n  paddingInline: '16',\n  userSelect: 'none' as const,\n  _focusVisible: {\n    outlineOffset: '-3px',\n  },\n  width: '100%',\n  _hover: { backgroundColor: 'background/active' },\n};\n\nconst SortIcon = forwardRef((props: IconProps & { direction: SortDirection }, ref: Ref<SVGSVGElement>) => {\n  const { direction, ...rest } = props;\n  const upFill = direction === 'ascending' ? 'currentColor' : 'var(--sort-icon-inactive)';\n  const downFill = direction === 'descending' ? 'currentColor' : 'var(--sort-icon-inactive)';\n\n  return (\n    <Icon\n      ref={ref}\n      asChild\n      css={{\n        '--sort-icon-inactive': 'colors.icon/disabled',\n        color: 'icon/primary',\n        display: 'inline-block',\n        verticalAlign: 'middle',\n      }}\n      {...rest}\n    >\n      <svg fill=\"none\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path\n          d=\"M11.617 4.461 7.684 9.18c-.271.326-.04.82.384.82h7.865c.424 0 .655-.494.384-.82l-3.933-4.719a.5.5 0 0 0-.767 0Z\"\n          fill={upFill}\n        />\n        <path\n          d=\"M12.384 19.539l3.933-4.719c.27-.326.04-.82-.384-.82H8.068c-.424 0-.655.494-.384.82l3.933 4.719a.5.5 0 0 0 .767 0Z\"\n          fill={downFill}\n        />\n      </svg>\n    </Icon>\n  );\n});\n\nSortIcon.displayName = 'SortIcon';\n\nconst BitkitSortableColumnHeader = forwardRef<HTMLTableCellElement, BitkitSortableColumnHeaderProps>(\n  ({ children, direction, onSort, textAlign, ...rest }, ref) => (\n    <Table.ColumnHeader\n      ref={ref}\n      aria-sort={direction === 'none' ? undefined : direction}\n      css={sortHeaderCss}\n      {...rest}\n    >\n      <chakra.button\n        css={sortButtonCss}\n        justifyContent={textAlign === 'end' ? 'flex-end' : undefined}\n        onClick={onSort}\n        type=\"button\"\n      >\n        {children} <SortIcon direction={direction} />\n      </chakra.button>\n    </Table.ColumnHeader>\n  ),\n);\n\nBitkitSortableColumnHeader.displayName = 'BitkitSortableColumnHeader';\n\nexport default BitkitSortableColumnHeader;\n"],"mappings":";;;;;;AAYA,IAAM,gBAAgB;CACpB,cAAc;CACd,eAAe;AACjB;AAEA,IAAM,gBAAgB;CACpB,YAAY;CACZ,YAAY;CACZ,YAAY;CACZ,QAAQ;CACR,OAAO;CACP,QAAQ;CACR,SAAS;CACT,MAAM;CACN,KAAK;CACL,QAAQ;CACR,cAAc;CACd,eAAe;CACf,YAAY;CACZ,eAAe,EACb,eAAe,OACjB;CACA,OAAO;CACP,QAAQ,EAAE,iBAAiB,oBAAoB;AACjD;AAEA,IAAM,WAAW,YAAY,OAAiD,QAA4B;CACxG,MAAM,EAAE,WAAW,GAAG,SAAS;CAC/B,MAAM,SAAS,cAAc,cAAc,iBAAiB;CAC5D,MAAM,WAAW,cAAc,eAAe,iBAAiB;CAE/D,OACE,oBAAC,MAAD;EACO;EACL,SAAA;EACA,KAAK;GACH,wBAAwB;GACxB,OAAO;GACP,SAAS;GACT,eAAe;EACjB;EACA,GAAI;EAEJ,UAAA,qBAAC,OAAD;GAAK,MAAK;GAAO,QAAO;GAAK,SAAQ;GAAY,OAAM;GAAK,OAAM;GAAlE,UAAA,CACE,oBAAC,QAAD;IACE,GAAE;IACF,MAAM;GACP,CAAA,GACD,oBAAC,QAAD;IACE,GAAE;IACF,MAAM;GACP,CAAA,CACE;;CACD,CAAA;AAEV,CAAC;AAED,SAAS,cAAc;AAEvB,IAAM,6BAA6B,YAChC,EAAE,UAAU,WAAW,QAAQ,WAAW,GAAG,QAAQ,QACpD,oBAAC,MAAM,cAAP;CACO;CACL,aAAW,cAAc,SAAS,KAAA,IAAY;CAC9C,KAAK;CACL,GAAI;CAEJ,UAAA,qBAAC,OAAO,QAAR;EACE,KAAK;EACL,gBAAgB,cAAc,QAAQ,aAAa,KAAA;EACnD,SAAS;EACT,MAAK;EAJP,UAAA;GAMG;GAAS;GAAC,oBAAC,UAAD,EAAqB,UAAY,CAAA;EAC/B;;AACG,CAAA,CAExB;AAEA,2BAA2B,cAAc"}
+{"version":3,"file":"BitkitSortableColumnHeader.js","names":[],"sources":["../../../lib/components/BitkitTable/BitkitSortableColumnHeader.tsx"],"sourcesContent":["import { Icon, type IconProps } from '@chakra-ui/react/icon';\nimport { chakra } from '@chakra-ui/react/styled-system';\nimport { Table, useTableStyles } from '@chakra-ui/react/table';\nimport { forwardRef, type Ref } from 'react';\n\ntype SortDirection = 'ascending' | 'descending' | 'none';\n\nexport interface BitkitSortableColumnHeaderProps extends Omit<Table.ColumnHeaderProps, 'aria-sort' | 'onClick'> {\n  direction: SortDirection;\n  onSort: () => void;\n}\n\nconst SortIcon = forwardRef((props: IconProps & { direction: SortDirection }, ref: Ref<SVGSVGElement>) => {\n  const { direction, ...rest } = props;\n  const upFill = direction === 'ascending' ? 'currentColor' : 'var(--sort-icon-inactive)';\n  const downFill = direction === 'descending' ? 'currentColor' : 'var(--sort-icon-inactive)';\n\n  return (\n    <Icon\n      ref={ref}\n      asChild\n      css={{\n        '--sort-icon-inactive': 'colors.icon/disabled',\n        color: 'icon/primary',\n        display: 'inline-block',\n        verticalAlign: 'middle',\n      }}\n      {...rest}\n    >\n      <svg fill=\"none\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path\n          d=\"M11.617 4.461 7.684 9.18c-.271.326-.04.82.384.82h7.865c.424 0 .655-.494.384-.82l-3.933-4.719a.5.5 0 0 0-.767 0Z\"\n          fill={upFill}\n        />\n        <path\n          d=\"M12.384 19.539l3.933-4.719c.27-.326.04-.82-.384-.82H8.068c-.424 0-.655.494-.384.82l3.933 4.719a.5.5 0 0 0 .767 0Z\"\n          fill={downFill}\n        />\n      </svg>\n    </Icon>\n  );\n});\n\nSortIcon.displayName = 'SortIcon';\n\nconst BitkitSortableColumnHeader = forwardRef<HTMLTableCellElement, BitkitSortableColumnHeaderProps>(\n  ({ children, direction, onSort, textAlign, ...rest }, ref) => {\n    const styles = useTableStyles();\n    const isEndAligned = textAlign === 'end';\n    const sortIcon = <SortIcon direction={direction} />;\n\n    return (\n      <Table.ColumnHeader\n        ref={ref}\n        aria-sort={direction === 'none' ? undefined : direction}\n        css={styles.sortColumnHeader}\n        {...rest}\n      >\n        {/* chakra.button: no named primitive attaches a recipe slot to a bare trigger button */}\n        <chakra.button\n          css={styles.sortTrigger}\n          justifyContent={isEndAligned ? 'flex-end' : undefined}\n          onClick={onSort}\n          type=\"button\"\n        >\n          {isEndAligned ? (\n            <>\n              {sortIcon} {children}\n            </>\n          ) : (\n            <>\n              {children} {sortIcon}\n            </>\n          )}\n        </chakra.button>\n      </Table.ColumnHeader>\n    );\n  },\n);\n\nBitkitSortableColumnHeader.displayName = 'BitkitSortableColumnHeader';\n\nexport default BitkitSortableColumnHeader;\n"],"mappings":";;;;;;AAYA,IAAM,WAAW,YAAY,OAAiD,QAA4B;CACxG,MAAM,EAAE,WAAW,GAAG,SAAS;CAC/B,MAAM,SAAS,cAAc,cAAc,iBAAiB;CAC5D,MAAM,WAAW,cAAc,eAAe,iBAAiB;CAE/D,OACE,oBAAC,MAAD;EACO;EACL,SAAA;EACA,KAAK;GACH,wBAAwB;GACxB,OAAO;GACP,SAAS;GACT,eAAe;EACjB;EACA,GAAI;EAEJ,UAAA,qBAAC,OAAD;GAAK,MAAK;GAAO,QAAO;GAAK,SAAQ;GAAY,OAAM;GAAK,OAAM;GAAlE,UAAA,CACE,oBAAC,QAAD;IACE,GAAE;IACF,MAAM;GACP,CAAA,GACD,oBAAC,QAAD;IACE,GAAE;IACF,MAAM;GACP,CAAA,CACE;;CACD,CAAA;AAEV,CAAC;AAED,SAAS,cAAc;AAEvB,IAAM,6BAA6B,YAChC,EAAE,UAAU,WAAW,QAAQ,WAAW,GAAG,QAAQ,QAAQ;CAC5D,MAAM,SAAS,eAAe;CAC9B,MAAM,eAAe,cAAc;CACnC,MAAM,WAAW,oBAAC,UAAD,EAAqB,UAAY,CAAA;CAElD,OACE,oBAAC,MAAM,cAAP;EACO;EACL,aAAW,cAAc,SAAS,KAAA,IAAY;EAC9C,KAAK,OAAO;EACZ,GAAI;EAGJ,UAAA,oBAAC,OAAO,QAAR;GACE,KAAK,OAAO;GACZ,gBAAgB,eAAe,aAAa,KAAA;GAC5C,SAAS;GACT,MAAK;GAEJ,UAAA,eACC,qBAAA,YAAA,EAAA,UAAA;IACG;IAAS;IAAE;GACZ,EAAA,CAAA,IAEF,qBAAA,YAAA,EAAA,UAAA;IACG;IAAS;IAAE;GACZ,EAAA,CAAA;EAES,CAAA;CACG,CAAA;AAExB,CACF;AAEA,2BAA2B,cAAc"}

package/dist/components/index.d.ts

@@ -73,7 +73,11 @@ export { default as BitkitStat, type BitkitStatProps, type TrendColor, type Tren
 export { default as BitkitSteps, type BitkitStepsItemProps, type BitkitStepsItemState, type BitkitStepsProps, } from './BitkitSteps/BitkitSteps';
 export { default as BitkitStepsCard, type BitkitStepsCardBodyProps, type BitkitStepsCardFooterProps, type BitkitStepsCardHeaderProps, type BitkitStepsCardProps, type BitkitStepsCardStepProps, } from './BitkitStepsCard/BitkitStepsCard';
 export { default as BitkitSwitch, type BitkitSwitchProps } from './BitkitSwitch';
+export { type BitkitBulkActionsItems, type BitkitBulkActionsLabels, default as BitkitBulkActionsRow, type BitkitBulkActionsRowProps, } from './BitkitTable/BitkitBulkActionsRow';
 export { default as BitkitExpandableRow, type BitkitExpandableRowProps } from './BitkitTable/BitkitExpandableRow';
+export { default as BitkitFilterRow, type BitkitFilterRowProps } from './BitkitTable/BitkitFilterRow';
+export { default as BitkitLinkedRow, type BitkitLinkedRowLinkCellProps, type BitkitLinkedRowProps, } from './BitkitTable/BitkitLinkedRow';
+export { type BitkitRowAction, default as BitkitRowActionsCell, type BitkitRowActionsCellProps, } from './BitkitTable/BitkitRowActionsCell';
 export { default as BitkitSortableColumnHeader, type BitkitSortableColumnHeaderProps, } from './BitkitTable/BitkitSortableColumnHeader';
 export { default as BitkitTabs } from './BitkitTabs/BitkitTabs';
 export { default as BitkitTag, type BitkitTagProps } from './BitkitTag/BitkitTag';

package/dist/main.js

@@ -361,7 +361,11 @@ import BitkitSplitButton_default from "./components/BitkitSplitButton/BitkitSpli
 import BitkitStat from "./components/BitkitStat/BitkitStat.js";
 import BitkitStepsCard_default from "./components/BitkitStepsCard/BitkitStepsCard.js";
 import BitkitSwitch from "./components/BitkitSwitch/BitkitSwitch.js";
+import BitkitBulkActionsRow from "./components/BitkitTable/BitkitBulkActionsRow.js";
 import BitkitExpandableRow from "./components/BitkitTable/BitkitExpandableRow.js";
+import BitkitFilterRow from "./components/BitkitTable/BitkitFilterRow.js";
+import BitkitLinkedRow_default from "./components/BitkitTable/BitkitLinkedRow.js";
+import BitkitRowActionsCell from "./components/BitkitTable/BitkitRowActionsCell.js";
 import BitkitSortableColumnHeader from "./components/BitkitTable/BitkitSortableColumnHeader.js";
 import BitkitTabs from "./components/BitkitTabs/BitkitTabs.js";
 import BitkitTagsInput from "./components/BitkitTagsInput/BitkitTagsInput.js";
@@ -373,4 +377,4 @@ import BitkitTreeView, { createTreeCollection } from "./components/BitkitTreeVie
 import useResponsive, { ResponsiveProvider } from "./hooks/useResponsive.js";
 import bitkitTheme from "./theme/index.js";
 import Provider from "./providers/BitkitProvider.js";
-export { BitkitAccordion_default as BitkitAccordion, BitkitActionBar, BitkitActionMenu_default as BitkitActionMenu, BitkitAlert, BitkitAvatar, BitkitBadge, BitkitBreadcrumb, BitkitButton, BitkitCalendar, BitkitCheckbox, BitkitCheckboxGroup, BitkitCloseButton, BitkitCodeSnippet, BitkitCollapsible, BitkitColorButton, BitkitCombobox_default as BitkitCombobox, BitkitControlButton, BitkitDataWidget, BitkitDatePicker, BitkitDefinitionTooltip, BitkitDialog_default as BitkitDialog, BitkitDraggableCard, BitkitDrawer, BitkitEmptyState, BitkitExpandableCard, BitkitExpandableRow, BitkitField, BitkitFileInput, BitkitFormDialog_default as BitkitFormDialog, BitkitGroupHeading, BitkitHeading, BitkitIconButton, BitkitInlineLoading, BitkitLabel, BitkitLabelTooltip, BitkitLabeledData, BitkitLightbox, BitkitLink, BitkitLinkButton, BitkitList_default as BitkitList, BitkitMarkdown, BitkitMarkdownCard, BitkitMultiselect_default as BitkitMultiselect, BitkitMultiselectMenu, BitkitNativeSelect, BitkitNoteCard, BitkitNumberInput, BitkitOverflowContent, BitkitOverflowTooltip, BitkitPageFooter_default as BitkitPageFooter, BitkitPagination, BitkitPaginationLoadMore, BitkitPopover, BitkitProgressBar, BitkitPromoBanner, Provider as BitkitProvider, BitkitRadio, BitkitRadioGroup, BitkitRibbon, BitkitSearchInput, BitkitSectionHeading, BitkitSegmentedControl_default as BitkitSegmentedControl, BitkitSelect_default as BitkitSelect, BitkitSelectMenu, BitkitSelectMenuAction, BitkitSelectableTag_default as BitkitSelectableTag, BitkitSettingsCard_default as BitkitSettingsCard, BitkitSidebar_default as BitkitSidebar, BitkitSkeletonGroup, BitkitSortableColumnHeader, BitkitSpinner, BitkitSplitButton_default as BitkitSplitButton, BitkitStat, BitkitStepperDialog_default as BitkitStepperDialog, BitkitSteps_default as BitkitSteps, BitkitStepsCard_default as BitkitStepsCard, BitkitSwitch, BitkitTabs, BitkitTag, BitkitTagsInput, BitkitTextArea, BitkitTextInput, BitkitToggleButton, BitkitTooltip, BitkitTour, BitkitTreeView, IconAbortCircle, IconAbortCircleFilled, IconAddons, IconAgent, IconAnchor, IconAndroid, IconApp, IconAppSettings, IconAppStore, IconAppStoreColor, IconApple, IconArchive, IconArchiveDelete, IconArchiveRestore, IconArrowBackAndDown, IconArrowBackAndUp, IconArrowDown, IconArrowForwardAndDown, IconArrowForwardAndUp, IconArrowLeft, IconArrowNortheast, IconArrowNorthwest, IconArrowRight, IconArrowUp, IconArrowsHorizontal, IconArrowsVertical, IconAutomation, IconAws, IconAwsColor, IconBadge3RdParty, IconBadgeBitrise, IconBadgeUpgrade, IconBadgeVersionOk, IconBazel, IconBell, IconBitbot, IconBitbotError, IconBitbucket, IconBitbucketColor, IconBitbucketNeutral, IconBitbucketWhite, IconBlockCircle, IconBook, IconBoxArrowDown, IconBoxDot, IconBoxLinesOverflow, IconBoxLinesWrap, IconBranch, IconBrowserstackColor, IconBug, IconBuild, IconBuildCache, IconBuildCacheFilled, IconBuildEnvSetup, IconBuildHub, IconBuildHubFilled, IconCalendar, IconChangePlan, IconChat, IconCheck, IconCheckCircle, IconCheckCircleFilled, IconChevronDown, IconChevronLeft, IconChevronRight, IconChevronUp, IconCi, IconCiFilled, IconCircle, IconCircleDashed, IconCircleHalfFilled, IconClaude, IconClaudeColor, IconClock, IconCode, IconCodePush, IconCodeSigning, IconCoffee, IconCommit, IconConfigure, IconConnectedAccounts, IconContainer, IconCopy, IconCordova, IconCpu, IconCreditcard, IconCredits, IconCross, IconCrossCircle, IconCrossCircleFilled, IconCrown, IconCycle, IconDashboard, IconDashboardFilled, IconDeployment, IconDetails, IconDoc, IconDollar, IconDot, IconDotnet, IconDotnetColor, IconDotnetText, IconDotnetTextColor, IconDoubleCircle, IconDownload, IconDragHandle, IconEc2Ami, IconEnterprise, IconErrorCircle, IconErrorCircleFilled, IconExpand, IconExtraBuildCapacity, IconEye, IconEyeSlash, IconFastlane, IconFileDoc, IconFilePdf, IconFilePlist, IconFileYml, IconFileZip, IconFilter, IconFlag, IconFlutter, IconFolder, IconFullscreen, IconFullscreenExit, IconGauge, IconGit, IconGithub, IconGitlab, IconGitlabColor, IconGitlabWhite, IconGlobe, IconGo, IconGoogleColor, IconGooglePlay, IconGooglePlayColor, IconGradle, IconGroup, IconHashtag, IconHeadset, IconHeart, IconHistory, IconHourglass, IconImage, IconInfoCircle, IconInfoCircleFilled, IconInsights, IconInsightsFilled, IconInstall, IconInteraction, IconInvoice, IconIonic, IconJapanese, IconJava, IconJavaColor, IconJavaDuke, IconJavaDukeColor, IconKey, IconKotlin, IconKotlinColor, IconKotlinWhite, IconLaptop, IconLaunchdarkly, IconLegacyApp, IconLightbulb, IconLink, IconLinux, IconLock, IconLockOpen, IconLogin, IconLogout, IconMacos, IconMagicWand, IconMagnifier, IconMail, IconMedal, IconMemory, IconMenuGrid, IconMenuHamburger, IconMessage, IconMessageAlert, IconMessageQuestion, IconMicrophone, IconMinus, IconMinusCircle, IconMinusCircleFilled, IconMobile, IconMobileLandscape, IconMonitorChart, IconMoreHorizontal, IconMoreVertical, IconNews, IconNextjs, IconNodejs, IconOpenInNew, IconOther, IconOutsideContributor, IconOverview, IconPause, IconPencil, IconPeople, IconPercent, IconPerson, IconPersonWithDesk, IconPlay, IconPlus, IconPlusCircle, IconPlusCircleFilled, IconPower, IconProject, IconProjectSettings, IconPull, IconPush, IconPuzzle, IconPython, IconPythonColor, IconQuestionCircle, IconQuestionCircleFilled, IconReact, IconRefresh, IconRegex, IconRelease, IconReleaseFilled, IconRemoteAccess, IconReplace, IconResponsiveness, IconReviewerApproved, IconReviewerAssigned, IconReviewerRejected, IconRuby, IconRubyColor, IconSave, IconSecurityShield, IconSettings, IconSettingsFilled, IconShuffle, IconSiren, IconSkip, IconSkipCircle, IconSkipCircleFilled, IconSlack, IconSlackColor, IconSparkle, IconSparkleFilled, IconSpinnerOnDisabled, IconSpinnerPurple, IconSpinnerPurpleDouble, IconSpinnerWhite, IconStability, IconStack, IconStar, IconStep, IconStop, IconStopwatch, IconTag, IconTasks, IconTeams, IconTeamsColor, IconTemplateCode, IconTerminal, IconTestQuarantine, IconThemeDarkToggle, IconThumbDown, IconThumbUp, IconTools, IconTrash, IconTrigger, IconUbuntu, IconUbuntuColor, IconUnity3D, IconUpload, IconValidateShield, IconVideo, IconWarning, IconWarningYellow, IconWebUi, IconWebhooks, IconWorkflow, IconWorkflowFlow, IconXTwitter, IconXamarin, IconXcode, ResponsiveProvider, bitkitIcon, bitkitTheme as bitriseTheme, createBitkitToast, createTreeCollection, dismissBitkitToast, rem, useBitkitTour, useResponsive, useStepperDialog };
+export { BitkitAccordion_default as BitkitAccordion, BitkitActionBar, BitkitActionMenu_default as BitkitActionMenu, BitkitAlert, BitkitAvatar, BitkitBadge, BitkitBreadcrumb, BitkitBulkActionsRow, BitkitButton, BitkitCalendar, BitkitCheckbox, BitkitCheckboxGroup, BitkitCloseButton, BitkitCodeSnippet, BitkitCollapsible, BitkitColorButton, BitkitCombobox_default as BitkitCombobox, BitkitControlButton, BitkitDataWidget, BitkitDatePicker, BitkitDefinitionTooltip, BitkitDialog_default as BitkitDialog, BitkitDraggableCard, BitkitDrawer, BitkitEmptyState, BitkitExpandableCard, BitkitExpandableRow, BitkitField, BitkitFileInput, BitkitFilterRow, BitkitFormDialog_default as BitkitFormDialog, BitkitGroupHeading, BitkitHeading, BitkitIconButton, BitkitInlineLoading, BitkitLabel, BitkitLabelTooltip, BitkitLabeledData, BitkitLightbox, BitkitLink, BitkitLinkButton, BitkitLinkedRow_default as BitkitLinkedRow, BitkitList_default as BitkitList, BitkitMarkdown, BitkitMarkdownCard, BitkitMultiselect_default as BitkitMultiselect, BitkitMultiselectMenu, BitkitNativeSelect, BitkitNoteCard, BitkitNumberInput, BitkitOverflowContent, BitkitOverflowTooltip, BitkitPageFooter_default as BitkitPageFooter, BitkitPagination, BitkitPaginationLoadMore, BitkitPopover, BitkitProgressBar, BitkitPromoBanner, Provider as BitkitProvider, BitkitRadio, BitkitRadioGroup, BitkitRibbon, BitkitRowActionsCell, BitkitSearchInput, BitkitSectionHeading, BitkitSegmentedControl_default as BitkitSegmentedControl, BitkitSelect_default as BitkitSelect, BitkitSelectMenu, BitkitSelectMenuAction, BitkitSelectableTag_default as BitkitSelectableTag, BitkitSettingsCard_default as BitkitSettingsCard, BitkitSidebar_default as BitkitSidebar, BitkitSkeletonGroup, BitkitSortableColumnHeader, BitkitSpinner, BitkitSplitButton_default as BitkitSplitButton, BitkitStat, BitkitStepperDialog_default as BitkitStepperDialog, BitkitSteps_default as BitkitSteps, BitkitStepsCard_default as BitkitStepsCard, BitkitSwitch, BitkitTabs, BitkitTag, BitkitTagsInput, BitkitTextArea, BitkitTextInput, BitkitToggleButton, BitkitTooltip, BitkitTour, BitkitTreeView, IconAbortCircle, IconAbortCircleFilled, IconAddons, IconAgent, IconAnchor, IconAndroid, IconApp, IconAppSettings, IconAppStore, IconAppStoreColor, IconApple, IconArchive, IconArchiveDelete, IconArchiveRestore, IconArrowBackAndDown, IconArrowBackAndUp, IconArrowDown, IconArrowForwardAndDown, IconArrowForwardAndUp, IconArrowLeft, IconArrowNortheast, IconArrowNorthwest, IconArrowRight, IconArrowUp, IconArrowsHorizontal, IconArrowsVertical, IconAutomation, IconAws, IconAwsColor, IconBadge3RdParty, IconBadgeBitrise, IconBadgeUpgrade, IconBadgeVersionOk, IconBazel, IconBell, IconBitbot, IconBitbotError, IconBitbucket, IconBitbucketColor, IconBitbucketNeutral, IconBitbucketWhite, IconBlockCircle, IconBook, IconBoxArrowDown, IconBoxDot, IconBoxLinesOverflow, IconBoxLinesWrap, IconBranch, IconBrowserstackColor, IconBug, IconBuild, IconBuildCache, IconBuildCacheFilled, IconBuildEnvSetup, IconBuildHub, IconBuildHubFilled, IconCalendar, IconChangePlan, IconChat, IconCheck, IconCheckCircle, IconCheckCircleFilled, IconChevronDown, IconChevronLeft, IconChevronRight, IconChevronUp, IconCi, IconCiFilled, IconCircle, IconCircleDashed, IconCircleHalfFilled, IconClaude, IconClaudeColor, IconClock, IconCode, IconCodePush, IconCodeSigning, IconCoffee, IconCommit, IconConfigure, IconConnectedAccounts, IconContainer, IconCopy, IconCordova, IconCpu, IconCreditcard, IconCredits, IconCross, IconCrossCircle, IconCrossCircleFilled, IconCrown, IconCycle, IconDashboard, IconDashboardFilled, IconDeployment, IconDetails, IconDoc, IconDollar, IconDot, IconDotnet, IconDotnetColor, IconDotnetText, IconDotnetTextColor, IconDoubleCircle, IconDownload, IconDragHandle, IconEc2Ami, IconEnterprise, IconErrorCircle, IconErrorCircleFilled, IconExpand, IconExtraBuildCapacity, IconEye, IconEyeSlash, IconFastlane, IconFileDoc, IconFilePdf, IconFilePlist, IconFileYml, IconFileZip, IconFilter, IconFlag, IconFlutter, IconFolder, IconFullscreen, IconFullscreenExit, IconGauge, IconGit, IconGithub, IconGitlab, IconGitlabColor, IconGitlabWhite, IconGlobe, IconGo, IconGoogleColor, IconGooglePlay, IconGooglePlayColor, IconGradle, IconGroup, IconHashtag, IconHeadset, IconHeart, IconHistory, IconHourglass, IconImage, IconInfoCircle, IconInfoCircleFilled, IconInsights, IconInsightsFilled, IconInstall, IconInteraction, IconInvoice, IconIonic, IconJapanese, IconJava, IconJavaColor, IconJavaDuke, IconJavaDukeColor, IconKey, IconKotlin, IconKotlinColor, IconKotlinWhite, IconLaptop, IconLaunchdarkly, IconLegacyApp, IconLightbulb, IconLink, IconLinux, IconLock, IconLockOpen, IconLogin, IconLogout, IconMacos, IconMagicWand, IconMagnifier, IconMail, IconMedal, IconMemory, IconMenuGrid, IconMenuHamburger, IconMessage, IconMessageAlert, IconMessageQuestion, IconMicrophone, IconMinus, IconMinusCircle, IconMinusCircleFilled, IconMobile, IconMobileLandscape, IconMonitorChart, IconMoreHorizontal, IconMoreVertical, IconNews, IconNextjs, IconNodejs, IconOpenInNew, IconOther, IconOutsideContributor, IconOverview, IconPause, IconPencil, IconPeople, IconPercent, IconPerson, IconPersonWithDesk, IconPlay, IconPlus, IconPlusCircle, IconPlusCircleFilled, IconPower, IconProject, IconProjectSettings, IconPull, IconPush, IconPuzzle, IconPython, IconPythonColor, IconQuestionCircle, IconQuestionCircleFilled, IconReact, IconRefresh, IconRegex, IconRelease, IconReleaseFilled, IconRemoteAccess, IconReplace, IconResponsiveness, IconReviewerApproved, IconReviewerAssigned, IconReviewerRejected, IconRuby, IconRubyColor, IconSave, IconSecurityShield, IconSettings, IconSettingsFilled, IconShuffle, IconSiren, IconSkip, IconSkipCircle, IconSkipCircleFilled, IconSlack, IconSlackColor, IconSparkle, IconSparkleFilled, IconSpinnerOnDisabled, IconSpinnerPurple, IconSpinnerPurpleDouble, IconSpinnerWhite, IconStability, IconStack, IconStar, IconStep, IconStop, IconStopwatch, IconTag, IconTasks, IconTeams, IconTeamsColor, IconTemplateCode, IconTerminal, IconTestQuarantine, IconThemeDarkToggle, IconThumbDown, IconThumbUp, IconTools, IconTrash, IconTrigger, IconUbuntu, IconUbuntuColor, IconUnity3D, IconUpload, IconValidateShield, IconVideo, IconWarning, IconWarningYellow, IconWebUi, IconWebhooks, IconWorkflow, IconWorkflowFlow, IconXTwitter, IconXamarin, IconXcode, ResponsiveProvider, bitkitIcon, bitkitTheme as bitriseTheme, createBitkitToast, createTreeCollection, dismissBitkitToast, rem, useBitkitTour, useResponsive, useStepperDialog };

package/dist/theme/slot-recipes/Table.recipe.d.ts

@@ -1,8 +1,8 @@
-declare const tableSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"body" | "caption" | "footer" | "header" | "cell" | "row" | "root" | "columnHeader", {
+declare const tableSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"body" | "caption" | "footer" | "header" | "cell" | "row" | "root" | "utilityCell" | "bulkActionsGroup" | "bulkActionsButtons" | "expandedContent" | "expandableRow" | "expandedRow" | "expandCell" | "expandedCell" | "expandTrigger" | "filterControls" | "linkedRow" | "rowLink" | "actionsCell" | "actionsGroup" | "sortColumnHeader" | "sortTrigger" | "columnHeader", {
     variant: {
         default: {
             root: {
-                borderColor: "border/minimal";
+                borderColor: "border/regular";
                 borderRadius: "4";
                 borderStyle: "solid";
                 borderWidth: "1";
@@ -73,6 +73,9 @@ declare const tableSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"
                 marginBlockEnd: "24";
             };
             columnHeader: {
+                '& > :where(label):only-child': {
+                    display: string;
+                };
                 borderBottomStyle: "solid";
                 borderBottomWidth: "1";
                 color: "text/primary";
@@ -82,14 +85,17 @@ declare const tableSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"
                 verticalAlign: "middle";
             };
             cell: {
-                borderBottomStyle: "solid";
-                borderBottomWidth: "1";
-                verticalAlign: "middle";
                 'tfoot &': {
                     borderBottomWidth: number;
                     borderTopStyle: "solid";
                     borderTopWidth: "1";
                 };
+                '& > :where(label):only-child': {
+                    display: string;
+                };
+                borderBottomStyle: "solid";
+                borderBottomWidth: "1";
+                verticalAlign: "middle";
             };
             body: {
                 '& :where(tr)': {
@@ -112,7 +118,7 @@ declare const tableSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"
             caption: {
                 display: "block";
                 padding: "16";
-                backgroundColor: "background/tertiary";
+                backgroundColor: "background/secondary";
                 borderBottomColor: "border/minimal";
                 borderBottomStyle: "solid";
                 borderBottomWidth: "1";
@@ -152,9 +158,16 @@ declare const tableSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"
                     content: "attr(data-label)";
                     flexShrink: number;
                     fontWeight: "semibold";
-                    paddingInlineEnd: "16";
+                    marginInlineEnd: "16";
                     width: "96";
                 };
+                'tfoot &': {
+                    display: "block";
+                    paddingInline: number;
+                    _before: {
+                        content: "none";
+                    };
+                };
             };
             footer: {
                 borderTopStyle: "solid";

package/dist/theme/slot-recipes/Table.recipe.js

@@ -2,9 +2,28 @@ import { rem } from "../themeUtils.js";
 import { defineSlotRecipe } from "@chakra-ui/react/styled-system";
 import { tableAnatomy } from "@chakra-ui/react/anatomy";
 //#region lib/theme/slot-recipes/Table.recipe.ts
+var controlOnlyCell = { "& > :where(label):only-child": { display: "flex" } };
 var tableSlotRecipe = defineSlotRecipe({
 	className: "table",
-	slots: tableAnatomy.keys(),
+	slots: [
+		...tableAnatomy.keys(),
+		"actionsCell",
+		"actionsGroup",
+		"bulkActionsGroup",
+		"bulkActionsButtons",
+		"expandCell",
+		"expandTrigger",
+		"expandableRow",
+		"expandedCell",
+		"expandedContent",
+		"expandedRow",
+		"filterControls",
+		"linkedRow",
+		"rowLink",
+		"sortColumnHeader",
+		"sortTrigger",
+		"utilityCell"
+	],
 	base: {
 		root: {
 			fontVariantNumeric: "lining-nums tabular-nums",
@@ -19,13 +38,129 @@ var tableSlotRecipe = defineSlotRecipe({
 		cell: {
 			color: "text/body",
 			textStyle: "body/md/regular"
+		},
+		actionsCell: {
+			textAlign: "end",
+			whiteSpace: "nowrap",
+			width: "1%"
+		},
+		actionsGroup: {
+			alignItems: "center",
+			display: "inline-flex",
+			gap: "8",
+			position: "relative"
+		},
+		bulkActionsGroup: {
+			alignItems: "center",
+			display: "flex",
+			gap: "12"
+		},
+		bulkActionsButtons: {
+			alignItems: "center",
+			display: "flex",
+			gap: "12",
+			marginInlineStart: "auto"
+		},
+		expandCell: {
+			paddingBlock: 0,
+			paddingInline: 0,
+			verticalAlign: "middle",
+			width: "48"
+		},
+		expandTrigger: {
+			alignItems: "center",
+			background: "none",
+			border: "none",
+			cursor: "pointer",
+			display: "flex",
+			height: "32",
+			justifyContent: "center",
+			marginInlineStart: "12",
+			padding: 0,
+			width: "32"
+		},
+		expandableRow: { "& > td": { borderBottomWidth: 0 } },
+		expandedCell: {
+			height: 0,
+			paddingBlock: 0,
+			paddingInline: 0
+		},
+		expandedContent: {
+			borderBlockStartColor: "border/minimal",
+			borderBlockStartStyle: "solid",
+			borderBlockStartWidth: "1",
+			marginInlineEnd: "16",
+			marginInlineStart: "48",
+			paddingBlockEnd: "24",
+			paddingBlockStart: "16",
+			paddingInlineEnd: "16",
+			paddingInlineStart: "12"
+		},
+		expandedRow: { _hover: { background: "none" } },
+		filterControls: {
+			alignItems: "center",
+			display: "flex",
+			flexWrap: "wrap",
+			gap: "16",
+			width: "full"
+		},
+		linkedRow: {
+			position: "relative",
+			_hover: { backgroundColor: "background/secondary" },
+			"& :where(a:not([data-row-link]), button, input, label, select)": {
+				position: "relative",
+				zIndex: "1"
+			}
+		},
+		rowLink: {
+			textDecoration: "none",
+			_hover: { textDecoration: "none" },
+			_after: {
+				content: "\"\"",
+				inset: 0,
+				position: "absolute"
+			},
+			_focusVisible: {
+				outline: "none",
+				_after: {
+					outline: "var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring-color)",
+					outlineOffset: "calc(var(--focus-ring-width) * -1)"
+				}
+			}
+		},
+		sortColumnHeader: {
+			paddingBlock: 0,
+			paddingInline: 0
+		},
+		sortTrigger: {
+			alignItems: "center",
+			appearance: "none",
+			background: "none",
+			border: "none",
+			color: "inherit",
+			cursor: "pointer",
+			display: "flex",
+			font: "inherit",
+			gap: "8",
+			height: "full",
+			paddingBlock: "12",
+			paddingInline: "16",
+			userSelect: "none",
+			width: "full",
+			_focusVisible: { outlineOffset: "-3px" },
+			_hover: { backgroundColor: "background/active" }
+		},
+		utilityCell: {
+			height: "auto",
+			paddingBlock: "12",
+			paddingInline: "16"
 		}
 	},
 	variants: {
 		variant: {
 			default: {
 				root: {
-					borderColor: "border/minimal",
+					borderColor: "border/regular",
 					borderRadius: "4",
 					borderStyle: "solid",
 					borderWidth: "1",
@@ -80,12 +215,14 @@ var tableSlotRecipe = defineSlotRecipe({
 					fontWeight: "bold",
 					textAlign: "start",
 					textStyle: "heading/h5",
-					verticalAlign: "middle"
+					verticalAlign: "middle",
+					...controlOnlyCell
 				},
 				cell: {
 					borderBottomStyle: "solid",
 					borderBottomWidth: "1",
 					verticalAlign: "middle",
+					...controlOnlyCell,
 					"tfoot &": {
 						borderBottomWidth: 0,
 						borderTopStyle: "solid",
@@ -105,7 +242,7 @@ var tableSlotRecipe = defineSlotRecipe({
 				caption: {
 					display: "block",
 					padding: "16",
-					backgroundColor: "background/tertiary",
+					backgroundColor: "background/secondary",
 					borderBottomColor: "border/minimal",
 					borderBottomStyle: "solid",
 					borderBottomWidth: "1"
@@ -141,8 +278,13 @@ var tableSlotRecipe = defineSlotRecipe({
 						content: "attr(data-label)",
 						flexShrink: 0,
 						fontWeight: "semibold",
-						paddingInlineEnd: "16",
+						marginInlineEnd: "16",
 						width: "96"
+					},
+					"tfoot &": {
+						display: "block",
+						paddingInline: 0,
+						_before: { content: "none" }
 					}
 				},
 				footer: {
@@ -153,15 +295,22 @@ var tableSlotRecipe = defineSlotRecipe({
 			}
 		}
 	},
-	compoundVariants: [{
-		css: { row: { borderBottomColor: "border/regular" } },
-		layout: "stacked",
-		variant: "borderless"
-	}, {
-		css: { body: { "& :where(tr)": { _hover: { backgroundColor: "background/secondary" } } } },
-		layout: "table",
-		rowHover: true
-	}],
+	compoundVariants: [
+		{
+			css: { row: { borderBottomColor: "border/regular" } },
+			layout: "stacked",
+			variant: "borderless"
+		},
+		{
+			css: { cell: { height: "auto" } },
+			layout: "stacked"
+		},
+		{
+			css: { body: { "& :where(tr)": { _hover: { backgroundColor: "background/secondary" } } } },
+			layout: "table",
+			rowHover: true
+		}
+	],
 	defaultVariants: {
 		layout: "table",
 		rowHover: true,

package/dist/theme/slot-recipes/Table.recipe.js.map

@@ -1 +1 @@
-{"version":3,"file":"Table.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/Table.recipe.ts"],"sourcesContent":["import { tableAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { rem } from '../themeUtils';\n\nconst tableSlotRecipe = defineSlotRecipe({\n  className: 'table',\n  slots: tableAnatomy.keys(),\n  base: {\n    root: {\n      fontVariantNumeric: 'lining-nums tabular-nums',\n      textAlign: 'start',\n      width: 'full',\n    },\n    caption: {\n      captionSide: 'top !important',\n      textAlign: 'start',\n      '& > * + *': {\n        marginBlockStart: '4',\n      },\n    },\n    cell: {\n      color: 'text/body',\n      textStyle: 'body/md/regular',\n    },\n  },\n  variants: {\n    variant: {\n      default: {\n        root: {\n          borderColor: 'border/minimal',\n          borderRadius: '4',\n          borderStyle: 'solid',\n          borderWidth: '1',\n          overflow: 'hidden',\n        },\n        header: {\n          '& :where(th)': {\n            backgroundColor: 'background/tertiary',\n          },\n        },\n        columnHeader: {\n          borderBottomColor: 'border/minimal',\n          paddingBlock: '12',\n          paddingInline: '16',\n        },\n        cell: {\n          borderBottomColor: 'border/minimal',\n          borderTopColor: 'border/minimal',\n          paddingInline: '16',\n        },\n        footer: {\n          borderTopColor: 'border/minimal',\n        },\n      },\n      borderless: {\n        columnHeader: {\n          borderBottomColor: 'border/regular',\n          padding: '12',\n        },\n        cell: {\n          borderBottomColor: 'border/regular',\n          borderTopColor: 'border/regular',\n          paddingInline: '12',\n        },\n        footer: {\n          borderTopColor: 'border/regular',\n        },\n      },\n    },\n    size: {\n      sm: {\n        cell: {\n          height: '48',\n        },\n      },\n      md: {\n        cell: {\n          height: rem(56),\n        },\n      },\n      lg: {\n        cell: {\n          height: '64',\n        },\n      },\n    },\n    // Hovering a row tints it. Usually a reading aid on a long or wide table rather than a hint\n    // that the row is clickable, so it says nothing about the row being interactive — turn it off\n    // for short, static tables where there is no place to lose.\n    rowHover: {\n      true: {},\n      false: {},\n    },\n    layout: {\n      table: {\n        root: {\n          borderCollapse: 'separate',\n          borderSpacing: '0',\n        },\n        caption: {\n          marginBlockEnd: '24',\n        },\n        columnHeader: {\n          borderBottomStyle: 'solid',\n          borderBottomWidth: '1',\n          color: 'text/primary',\n          fontWeight: 'bold',\n          textAlign: 'start',\n          textStyle: 'heading/h5',\n          verticalAlign: 'middle',\n        },\n        cell: {\n          borderBottomStyle: 'solid',\n          borderBottomWidth: '1',\n          verticalAlign: 'middle',\n          // border-collapse: separate ignores borders on tfoot itself (CSS 2.1 §17.6.1),\n          // so the body/footer divider has to live on the footer's cells.\n          'tfoot &': {\n            borderBottomWidth: 0,\n            borderTopStyle: 'solid',\n            borderTopWidth: '1',\n          },\n        },\n        body: {\n          '& :where(tr)': {\n            '&:has(input:checked), &[data-selected]': {\n              backgroundColor: 'background/selected',\n              _hover: {\n                backgroundColor: 'background/selected',\n              },\n            },\n          },\n          '& :where(tr:last-child) td': {\n            borderBottomWidth: 0,\n          },\n        },\n      },\n      stacked: {\n        root: {\n          display: 'block',\n        },\n        caption: {\n          display: 'block',\n          padding: '16',\n          backgroundColor: 'background/tertiary',\n          borderBottomColor: 'border/minimal',\n          borderBottomStyle: 'solid',\n          borderBottomWidth: '1',\n        },\n        header: {\n          borderWidth: 0,\n          clip: 'rect(0, 0, 0, 0)',\n          height: '1',\n          margin: '-1px',\n          overflow: 'hidden',\n          padding: 0,\n          position: 'absolute',\n          whiteSpace: 'nowrap',\n          width: '1',\n        },\n        body: {\n          display: 'block',\n        },\n        row: {\n          borderBottomColor: 'border/minimal',\n          borderBottomStyle: 'solid',\n          borderBottomWidth: '1',\n          display: 'block',\n          paddingBlock: '12',\n          '&:last-child': {\n            borderBottomWidth: 0,\n          },\n        },\n        cell: {\n          alignItems: 'center',\n          display: 'flex',\n          minHeight: '48',\n          paddingInline: '16',\n          _before: {\n            alignSelf: 'center',\n            color: 'text/primary',\n            content: 'attr(data-label)',\n            flexShrink: 0,\n            fontWeight: 'semibold',\n            paddingInlineEnd: '16',\n            width: '96',\n          },\n        },\n        // display: block takes tfoot out of the table model, so a border on it does render here\n        footer: {\n          borderTopStyle: 'solid',\n          borderTopWidth: '1',\n          display: 'block',\n        },\n      },\n    },\n  },\n  compoundVariants: [\n    {\n      css: {\n        row: {\n          borderBottomColor: 'border/regular',\n        },\n      },\n      layout: 'stacked',\n      variant: 'borderless',\n    },\n    // Scoped to `layout: table` because that is where the hover lived before: the stacked layout\n    // renders rows as blocks and never tinted them.\n    {\n      css: {\n        body: {\n          '& :where(tr)': {\n            _hover: {\n              backgroundColor: 'background/secondary',\n            },\n          },\n        },\n      },\n      layout: 'table',\n      rowHover: true,\n    },\n  ],\n  defaultVariants: {\n    layout: 'table',\n    rowHover: true,\n    size: 'lg',\n    variant: 'default',\n  },\n});\n\nexport default tableSlotRecipe;\n"],"mappings":"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"}
+{"version":3,"file":"Table.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/Table.recipe.ts"],"sourcesContent":["import { tableAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { rem } from '../themeUtils';\n\n// A control like a checkbox renders as an inline-flex <label>, which sits on the line box's\n// baseline — so the text strut's descender space leaves it a pixel or two above the row's centre.\n// Making it block-level takes the line box out of the equation and lets vertical-align: middle\n// centre it exactly.\nconst controlOnlyCell = {\n  '& > :where(label):only-child': {\n    display: 'flex',\n  },\n};\n\nconst tableSlotRecipe = defineSlotRecipe({\n  className: 'table',\n  slots: [\n    ...tableAnatomy.keys(),\n    'actionsCell',\n    'actionsGroup',\n    'bulkActionsGroup',\n    'bulkActionsButtons',\n    'expandCell',\n    'expandTrigger',\n    'expandableRow',\n    'expandedCell',\n    'expandedContent',\n    'expandedRow',\n    'filterControls',\n    'linkedRow',\n    'rowLink',\n    'sortColumnHeader',\n    'sortTrigger',\n    'utilityCell',\n  ],\n  base: {\n    root: {\n      fontVariantNumeric: 'lining-nums tabular-nums',\n      textAlign: 'start',\n      width: 'full',\n    },\n    caption: {\n      captionSide: 'top !important',\n      textAlign: 'start',\n      '& > * + *': {\n        marginBlockStart: '4',\n      },\n    },\n    cell: {\n      color: 'text/body',\n      textStyle: 'body/md/regular',\n    },\n    actionsCell: {\n      textAlign: 'end',\n      whiteSpace: 'nowrap',\n      // Shrink-to-fit: a table cell can't go below its content width, so any value under the\n      // content's own width collapses the column around the buttons and leaves the rest to\n      // the data columns.\n      width: '1%',\n    },\n    actionsGroup: {\n      alignItems: 'center',\n      display: 'inline-flex',\n      gap: '8',\n      position: 'relative',\n    },\n    bulkActionsGroup: {\n      alignItems: 'center',\n      display: 'flex',\n      gap: '12',\n    },\n    bulkActionsButtons: {\n      alignItems: 'center',\n      display: 'flex',\n      gap: '12',\n      marginInlineStart: 'auto',\n    },\n    expandCell: {\n      paddingBlock: 0,\n      paddingInline: 0,\n      verticalAlign: 'middle',\n      width: '48',\n    },\n    // A fixed 32x32 box (per the design), centred in the cell by the cell's own vertical-align.\n    // Deriving the size from padding instead leaves it at the mercy of the Collapsible recipe's\n    // asymmetric paddingBlockStart, which is what pushed the chevron 2px above the row's centre.\n    expandTrigger: {\n      alignItems: 'center',\n      background: 'none',\n      border: 'none',\n      cursor: 'pointer',\n      display: 'flex',\n      height: '32',\n      justifyContent: 'center',\n      marginInlineStart: '12',\n      padding: 0,\n      width: '32',\n    },\n    expandableRow: {\n      '& > td': {\n        borderBottomWidth: 0,\n      },\n    },\n    expandedCell: {\n      height: 0,\n      paddingBlock: 0,\n      paddingInline: 0,\n    },\n    expandedContent: {\n      borderBlockStartColor: 'border/minimal',\n      borderBlockStartStyle: 'solid',\n      borderBlockStartWidth: '1',\n      marginInlineEnd: '16',\n      marginInlineStart: '48',\n      paddingBlockEnd: '24',\n      paddingBlockStart: '16',\n      paddingInlineEnd: '16',\n      paddingInlineStart: '12',\n    },\n    expandedRow: {\n      _hover: {\n        background: 'none',\n      },\n    },\n    filterControls: {\n      alignItems: 'center',\n      display: 'flex',\n      flexWrap: 'wrap',\n      gap: '16',\n      width: 'full',\n    },\n    linkedRow: {\n      position: 'relative',\n      _hover: {\n        backgroundColor: 'background/secondary',\n      },\n      '& :where(a:not([data-row-link]), button, input, label, select)': {\n        position: 'relative',\n        zIndex: '1',\n      },\n    },\n    rowLink: {\n      textDecoration: 'none',\n      // The row's own background change is the hover affordance; the link recipe's hover\n      // underline would fire on every row hover, since the stretched pseudo covers the row.\n      _hover: {\n        textDecoration: 'none',\n      },\n      _after: {\n        content: '\"\"',\n        inset: 0,\n        position: 'absolute',\n      },\n      _focusVisible: {\n        outline: 'none',\n        _after: {\n          outline: 'var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring-color)',\n          outlineOffset: 'calc(var(--focus-ring-width) * -1)',\n        },\n      },\n    },\n    sortColumnHeader: {\n      paddingBlock: 0,\n      paddingInline: 0,\n    },\n    sortTrigger: {\n      alignItems: 'center',\n      appearance: 'none',\n      background: 'none',\n      border: 'none',\n      color: 'inherit',\n      cursor: 'pointer',\n      display: 'flex',\n      font: 'inherit',\n      gap: '8',\n      height: 'full',\n      paddingBlock: '12',\n      paddingInline: '16',\n      userSelect: 'none',\n      width: 'full',\n      _focusVisible: {\n        outlineOffset: '-3px',\n      },\n      _hover: {\n        backgroundColor: 'background/active',\n      },\n    },\n    utilityCell: {\n      height: 'auto',\n      paddingBlock: '12',\n      paddingInline: '16',\n    },\n  },\n  variants: {\n    variant: {\n      default: {\n        root: {\n          borderColor: 'border/regular',\n          borderRadius: '4',\n          borderStyle: 'solid',\n          borderWidth: '1',\n          overflow: 'hidden',\n        },\n        header: {\n          '& :where(th)': {\n            backgroundColor: 'background/tertiary',\n          },\n        },\n        columnHeader: {\n          borderBottomColor: 'border/minimal',\n          paddingBlock: '12',\n          paddingInline: '16',\n        },\n        cell: {\n          borderBottomColor: 'border/minimal',\n          borderTopColor: 'border/minimal',\n          paddingInline: '16',\n        },\n        footer: {\n          borderTopColor: 'border/minimal',\n        },\n      },\n      borderless: {\n        columnHeader: {\n          borderBottomColor: 'border/regular',\n          padding: '12',\n        },\n        cell: {\n          borderBottomColor: 'border/regular',\n          borderTopColor: 'border/regular',\n          paddingInline: '12',\n        },\n        footer: {\n          borderTopColor: 'border/regular',\n        },\n      },\n    },\n    size: {\n      sm: {\n        cell: {\n          height: '48',\n        },\n      },\n      md: {\n        cell: {\n          height: rem(56),\n        },\n      },\n      lg: {\n        cell: {\n          height: '64',\n        },\n      },\n    },\n    // Hovering a row tints it. Usually a reading aid on a long or wide table rather than a hint\n    // that the row is clickable, so it says nothing about the row being interactive — turn it off\n    // for short, static tables where there is no place to lose.\n    rowHover: {\n      true: {},\n      false: {},\n    },\n    layout: {\n      table: {\n        root: {\n          borderCollapse: 'separate',\n          borderSpacing: '0',\n        },\n        caption: {\n          marginBlockEnd: '24',\n        },\n        columnHeader: {\n          borderBottomStyle: 'solid',\n          borderBottomWidth: '1',\n          color: 'text/primary',\n          fontWeight: 'bold',\n          textAlign: 'start',\n          textStyle: 'heading/h5',\n          verticalAlign: 'middle',\n          ...controlOnlyCell,\n        },\n        cell: {\n          borderBottomStyle: 'solid',\n          borderBottomWidth: '1',\n          verticalAlign: 'middle',\n          ...controlOnlyCell,\n          // border-collapse: separate ignores borders on tfoot itself (CSS 2.1 §17.6.1),\n          // so the body/footer divider has to live on the footer's cells.\n          'tfoot &': {\n            borderBottomWidth: 0,\n            borderTopStyle: 'solid',\n            borderTopWidth: '1',\n          },\n        },\n        body: {\n          '& :where(tr)': {\n            '&:has(input:checked), &[data-selected]': {\n              backgroundColor: 'background/selected',\n              _hover: {\n                backgroundColor: 'background/selected',\n              },\n            },\n          },\n          '& :where(tr:last-child) td': {\n            borderBottomWidth: 0,\n          },\n        },\n      },\n      stacked: {\n        root: {\n          display: 'block',\n        },\n        caption: {\n          display: 'block',\n          padding: '16',\n          backgroundColor: 'background/secondary',\n          borderBottomColor: 'border/minimal',\n          borderBottomStyle: 'solid',\n          borderBottomWidth: '1',\n        },\n        header: {\n          borderWidth: 0,\n          clip: 'rect(0, 0, 0, 0)',\n          height: '1',\n          margin: '-1px',\n          overflow: 'hidden',\n          padding: 0,\n          position: 'absolute',\n          whiteSpace: 'nowrap',\n          width: '1',\n        },\n        body: {\n          display: 'block',\n        },\n        row: {\n          borderBottomColor: 'border/minimal',\n          borderBottomStyle: 'solid',\n          borderBottomWidth: '1',\n          display: 'block',\n          paddingBlock: '12',\n          '&:last-child': {\n            borderBottomWidth: 0,\n          },\n        },\n        cell: {\n          alignItems: 'center',\n          display: 'flex',\n          minHeight: '48',\n          paddingInline: '16',\n          _before: {\n            alignSelf: 'center',\n            color: 'text/primary',\n            content: 'attr(data-label)',\n            flexShrink: 0,\n            fontWeight: 'semibold',\n            marginInlineEnd: '16',\n            width: '96',\n          },\n          'tfoot &': {\n            display: 'block',\n            paddingInline: 0,\n            _before: {\n              content: 'none',\n            },\n          },\n        },\n        // display: block takes tfoot out of the table model, so a border on it does render here\n        footer: {\n          borderTopStyle: 'solid',\n          borderTopWidth: '1',\n          display: 'block',\n        },\n      },\n    },\n  },\n  compoundVariants: [\n    {\n      css: {\n        row: {\n          borderBottomColor: 'border/regular',\n        },\n      },\n      layout: 'stacked',\n      variant: 'borderless',\n    },\n    // The `size` variant pins a fixed cell height (48/56/64px), and it is merged after `layout`\n    // regardless of declaration order — so only a compound variant can release it. Stacked cells\n    // are flex containers whose content (label gutter + a multi-line value) routinely needs more\n    // room than the fixed height, and the stacked `cell` keeps `minHeight: 48` as the floor.\n    {\n      css: {\n        cell: {\n          height: 'auto',\n        },\n      },\n      layout: 'stacked',\n    },\n    // Scoped to `layout: table` because that is where the hover lived before: the stacked layout\n    // renders rows as blocks and never tinted them.\n    {\n      css: {\n        body: {\n          '& :where(tr)': {\n            _hover: {\n              backgroundColor: 'background/secondary',\n            },\n          },\n        },\n      },\n      layout: 'table',\n      rowHover: true,\n    },\n  ],\n  defaultVariants: {\n    layout: 'table',\n    rowHover: true,\n    size: 'lg',\n    variant: 'default',\n  },\n});\n\nexport default tableSlotRecipe;\n"],"mappings":"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"}