@bitrise/bitkit-v2 0.3.373 → 0.3.375

package/dist/components/BitkitExpandableCard/BitkitExpandableCard.d.ts

@@ -1,3 +1,4 @@
+import { BoxProps } from '@chakra-ui/react/box';
 import { CollapsibleRootProps } from '@chakra-ui/react/collapsible';
 import { ReactElement, ReactNode } from 'react';
 import { BitkitIconComponent } from '../../icons';
@@ -12,19 +13,22 @@ type ControlledProps = {
     expanded: boolean;
     onChange: (expanded: boolean) => void;
 };
-export type BitkitExpandableCardProps = Omit<CollapsibleRootProps, 'defaultOpen' | 'onChange' | 'onOpenChange' | 'open'> & {
+/**
+ * Zag/Ark machine props. They drive the inner `Collapsible.Root` and mean nothing on the card
+ * element, so they're forwarded by name rather than left in `...rest` — which belongs to the
+ * rendered root (`Card.Root`) so consumer style props reach the card itself.
+ */
+type CollapsibleMachineProps = Pick<CollapsibleRootProps, 'collapsedHeight' | 'collapsedWidth' | 'disabled' | 'hideMode' | 'ids' | 'lazyMount' | 'onExitComplete' | 'unmountOnExit'>;
+export type BitkitExpandableCardProps = Omit<BoxProps, 'asChild' | 'children' | 'onChange' | 'title'> & CollapsibleMachineProps & {
     children: ReactNode;
     elevation?: boolean;
     footer?: ReactNode;
     icon?: BitkitIconComponent | ReactElement<BitkitAvatarProps>;
     iconColor?: string;
-    size: 'md' | 'lg';
+    size?: 'md' | 'lg';
     subtitle?: ReactNode;
     suffix?: ReactNode;
     title: ReactNode;
 } & (UncontrolledProps | ControlledProps);
-declare const BitkitExpandableCard: {
-    (props: BitkitExpandableCardProps): import("react").JSX.Element;
-    displayName: string;
-};
+declare const BitkitExpandableCard: import('react').ForwardRefExoticComponent<BitkitExpandableCardProps & import('react').RefAttributes<HTMLDivElement>>;
 export default BitkitExpandableCard;

package/dist/components/BitkitExpandableCard/BitkitExpandableCard.js

@@ -1,31 +1,44 @@
 import AssetSelectChevron from "../../utilities/AssetSelectChevron.js";
+import BitkitBadge from "../BitkitBadge/BitkitBadge.js";
 import { Box } from "@chakra-ui/react/box";
 import { useSlotRecipe } from "@chakra-ui/react/styled-system";
-import { cloneElement, isValidElement } from "react";
+import { cloneElement, forwardRef, isValidElement } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Text } from "@chakra-ui/react/text";
 import { Collapsible } from "@chakra-ui/react/collapsible";
 import { Card } from "@chakra-ui/react/card";
 //#region lib/components/BitkitExpandableCard/BitkitExpandableCard.tsx
-var BitkitExpandableCard = (props) => {
-	const { children, defaultExpanded, elevation = true, expanded, footer, icon, iconColor, onChange, size = "lg", subtitle, suffix, title, ...rest } = props;
+var BitkitExpandableCard = forwardRef((props, ref) => {
+	const { children, collapsedHeight, collapsedWidth, css, defaultExpanded, disabled, elevation = true, expanded, footer, hideMode, icon, iconColor, ids, lazyMount, onChange, onExitComplete, size = "lg", subtitle, suffix, title, unmountOnExit, ...rest } = props;
 	const styles = useSlotRecipe({ key: "expandableCard" })({ size });
 	const handleOpenChange = onChange ? (details) => onChange(details.open) : void 0;
+	const iconSize = size === "md" ? "16" : "24";
+	let renderedSuffix = suffix;
+	if (isValidElement(suffix) && suffix.type === BitkitBadge) renderedSuffix = cloneElement(suffix, { size: size === "md" ? "xs" : "sm" });
 	let renderedIcon = null;
 	if (isValidElement(icon)) renderedIcon = cloneElement(icon, { size: "24" });
 	else if (icon) renderedIcon = /* @__PURE__ */ jsx(icon, {
 		color: iconColor,
-		size: "24"
+		size: iconSize
 	});
 	return /* @__PURE__ */ jsx(Card.Root, {
+		ref,
 		elevation,
 		paddingSize: "sm",
-		css: styles.root,
+		css: [styles.root, css],
+		...rest,
 		children: /* @__PURE__ */ jsxs(Collapsible.Root, {
+			collapsedHeight,
+			collapsedWidth,
 			defaultOpen: defaultExpanded,
-			open: expanded,
+			disabled,
+			hideMode,
+			ids,
+			lazyMount,
+			onExitComplete,
 			onOpenChange: handleOpenChange,
-			...rest,
+			open: expanded,
+			unmountOnExit,
 			children: [/* @__PURE__ */ jsxs(Collapsible.Trigger, {
 				css: styles.header,
 				children: [/* @__PURE__ */ jsxs(Box, {
@@ -40,6 +53,7 @@ var BitkitExpandableCard = (props) => {
 						alignItems: "flex-start",
 						flexDirection: "column",
 						children: [title, !!subtitle && /* @__PURE__ */ jsx(Text, {
+							as: "span",
 							css: styles.subtitle,
 							children: subtitle
 						})]
@@ -47,9 +61,10 @@ var BitkitExpandableCard = (props) => {
 				}), /* @__PURE__ */ jsxs(Box, {
 					display: "flex",
 					alignItems: "center",
-					children: [!!suffix && /* @__PURE__ */ jsx(Text, {
+					children: [!!renderedSuffix && /* @__PURE__ */ jsx(Text, {
+						as: "span",
 						css: styles.suffix,
-						children: suffix
+						children: renderedSuffix
 					}), /* @__PURE__ */ jsx(Collapsible.Indicator, {
 						asChild: true,
 						children: /* @__PURE__ */ jsx(AssetSelectChevron, {})
@@ -57,11 +72,14 @@ var BitkitExpandableCard = (props) => {
 				})]
 			}), /* @__PURE__ */ jsxs(Collapsible.Content, {
 				css: styles.collapsible,
-				children: [/* @__PURE__ */ jsx(Card.Body, { children }), !!footer && /* @__PURE__ */ jsx(Card.Footer, { children: footer })]
+				children: [/* @__PURE__ */ jsx(Card.Body, { children }), !!footer && /* @__PURE__ */ jsx(Card.Footer, {
+					css: styles.footer,
+					children: footer
+				})]
 			})]
 		})
 	});
-};
+});
 BitkitExpandableCard.displayName = "BitkitExpandableCard";
 //#endregion
 export { BitkitExpandableCard as default };

package/dist/components/BitkitExpandableCard/BitkitExpandableCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"BitkitExpandableCard.js","names":[],"sources":["../../../lib/components/BitkitExpandableCard/BitkitExpandableCard.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { Card } from '@chakra-ui/react/card';\nimport { Collapsible, type CollapsibleRootProps } from '@chakra-ui/react/collapsible';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { cloneElement, isValidElement, type ReactElement, type ReactNode } from 'react';\n\nimport { type BitkitIconComponent } from '../../icons';\nimport AssetSelectChevron from '../../utilities/AssetSelectChevron';\nimport { type BitkitAvatarProps } from '../BitkitAvatar/BitkitAvatar';\n\ntype UncontrolledProps = {\n  defaultExpanded?: boolean;\n  expanded?: never;\n  onChange?: never;\n};\n\ntype ControlledProps = {\n  defaultExpanded?: never;\n  expanded: boolean;\n  onChange: (expanded: boolean) => void;\n};\n\nexport type BitkitExpandableCardProps = Omit<\n  CollapsibleRootProps,\n  'defaultOpen' | 'onChange' | 'onOpenChange' | 'open'\n> & {\n  children: ReactNode;\n  elevation?: boolean;\n  footer?: ReactNode;\n  icon?: BitkitIconComponent | ReactElement<BitkitAvatarProps>;\n  iconColor?: string;\n  size: 'md' | 'lg';\n  subtitle?: ReactNode;\n  suffix?: ReactNode;\n  title: ReactNode;\n} & (UncontrolledProps | ControlledProps);\n\nconst BitkitExpandableCard = (props: BitkitExpandableCardProps) => {\n  const {\n    children,\n    defaultExpanded,\n    elevation = true,\n    expanded,\n    footer,\n    icon,\n    iconColor,\n    onChange,\n    size = 'lg',\n    subtitle,\n    suffix,\n    title,\n    ...rest\n  } = props;\n\n  const recipe = useSlotRecipe({ key: 'expandableCard' });\n  const styles = recipe({ size });\n\n  const handleOpenChange = onChange ? (details: { open: boolean }) => onChange(details.open) : undefined;\n\n  let renderedIcon: ReactNode = null;\n  if (isValidElement<BitkitAvatarProps>(icon)) {\n    renderedIcon = cloneElement(icon, { size: '24' });\n  } else if (icon) {\n    const Icon = icon;\n    renderedIcon = <Icon color={iconColor} size=\"24\" />;\n  }\n\n  return (\n    <Card.Root elevation={elevation} paddingSize=\"sm\" css={styles.root}>\n      <Collapsible.Root defaultOpen={defaultExpanded} open={expanded} onOpenChange={handleOpenChange} {...rest}>\n        <Collapsible.Trigger css={styles.header}>\n          <Box display=\"flex\" alignItems=\"center\" gap=\"8\">\n            {!!renderedIcon && <Box css={styles.icon}>{renderedIcon}</Box>}\n            <Box display=\"flex\" alignItems=\"flex-start\" flexDirection=\"column\">\n              {title}\n              {!!subtitle && <Text css={styles.subtitle}>{subtitle}</Text>}\n            </Box>\n          </Box>\n          <Box display=\"flex\" alignItems=\"center\">\n            {!!suffix && <Text css={styles.suffix}>{suffix}</Text>}\n            <Collapsible.Indicator asChild>\n              <AssetSelectChevron />\n            </Collapsible.Indicator>\n          </Box>\n        </Collapsible.Trigger>\n        <Collapsible.Content css={styles.collapsible}>\n          <Card.Body>{children}</Card.Body>\n          {!!footer && <Card.Footer>{footer}</Card.Footer>}\n        </Collapsible.Content>\n      </Collapsible.Root>\n    </Card.Root>\n  );\n};\n\nBitkitExpandableCard.displayName = 'BitkitExpandableCard';\n\nexport default BitkitExpandableCard;\n"],"mappings":";;;;;;;;;AAsCA,IAAM,wBAAwB,UAAqC;CACjE,MAAM,EACJ,UACA,iBACA,YAAY,MACZ,UACA,QACA,MACA,WACA,UACA,OAAO,MACP,UACA,QACA,OACA,GAAG,SACD;CAGJ,MAAM,SADS,cAAc,EAAE,KAAK,iBAAiB,CACtC,CAAA,CAAO,EAAE,KAAK,CAAC;CAE9B,MAAM,mBAAmB,YAAY,YAA+B,SAAS,QAAQ,IAAI,IAAI,KAAA;CAE7F,IAAI,eAA0B;CAC9B,IAAI,eAAkC,IAAI,GACxC,eAAe,aAAa,MAAM,EAAE,MAAM,KAAK,CAAC;MAC3C,IAAI,MAET,eAAe,oBAAC,MAAD;EAAM,OAAO;EAAW,MAAK;CAAM,CAAA;CAGpD,OACE,oBAAC,KAAK,MAAN;EAAsB;EAAW,aAAY;EAAK,KAAK,OAAO;EAC5D,UAAA,qBAAC,YAAY,MAAb;GAAkB,aAAa;GAAiB,MAAM;GAAU,cAAc;GAAkB,GAAI;GAApG,UAAA,CACE,qBAAC,YAAY,SAAb;IAAqB,KAAK,OAAO;IAAjC,UAAA,CACE,qBAAC,KAAD;KAAK,SAAQ;KAAO,YAAW;KAAS,KAAI;KAA5C,UAAA,CACG,CAAC,CAAC,gBAAgB,oBAAC,KAAD;MAAK,KAAK,OAAO;MAAO,UAAA;KAAkB,CAAA,GAC7D,qBAAC,KAAD;MAAK,SAAQ;MAAO,YAAW;MAAa,eAAc;MAA1D,UAAA,CACG,OACA,CAAC,CAAC,YAAY,oBAAC,MAAD;OAAM,KAAK,OAAO;OAAW,UAAA;MAAe,CAAA,CACxD;KACF,CAAA,CAAA;IACL,CAAA,GAAA,qBAAC,KAAD;KAAK,SAAQ;KAAO,YAAW;KAA/B,UAAA,CACG,CAAC,CAAC,UAAU,oBAAC,MAAD;MAAM,KAAK,OAAO;MAAS,UAAA;KAAa,CAAA,GACrD,oBAAC,YAAY,WAAb;MAAuB,SAAA;MACrB,UAAA,oBAAC,oBAAD,CAAqB,CAAA;KACA,CAAA,CACpB;IACc,CAAA,CAAA;GACrB,CAAA,GAAA,qBAAC,YAAY,SAAb;IAAqB,KAAK,OAAO;IAAjC,UAAA,CACE,oBAAC,KAAK,MAAN,EAAY,SAAoB,CAAA,GAC/B,CAAC,CAAC,UAAU,oBAAC,KAAK,QAAN,EAAA,UAAc,OAAoB,CAAA,CAC5B;GACL,CAAA,CAAA;;CACT,CAAA;AAEf;AAEA,qBAAqB,cAAc"}
+{"version":3,"file":"BitkitExpandableCard.js","names":[],"sources":["../../../lib/components/BitkitExpandableCard/BitkitExpandableCard.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { Card } from '@chakra-ui/react/card';\nimport { Collapsible, type CollapsibleRootProps } from '@chakra-ui/react/collapsible';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { cloneElement, forwardRef, isValidElement, type ReactElement, type ReactNode } from 'react';\n\nimport { type BitkitIconComponent } from '../../icons';\nimport AssetSelectChevron from '../../utilities/AssetSelectChevron';\nimport { type BitkitAvatarProps } from '../BitkitAvatar/BitkitAvatar';\nimport BitkitBadge, { type BitkitBadgeProps } from '../BitkitBadge/BitkitBadge';\n\ntype UncontrolledProps = {\n  defaultExpanded?: boolean;\n  expanded?: never;\n  onChange?: never;\n};\n\ntype ControlledProps = {\n  defaultExpanded?: never;\n  expanded: boolean;\n  onChange: (expanded: boolean) => void;\n};\n\n/**\n * Zag/Ark machine props. They drive the inner `Collapsible.Root` and mean nothing on the card\n * element, so they're forwarded by name rather than left in `...rest` — which belongs to the\n * rendered root (`Card.Root`) so consumer style props reach the card itself.\n */\ntype CollapsibleMachineProps = Pick<\n  CollapsibleRootProps,\n  | 'collapsedHeight'\n  | 'collapsedWidth'\n  | 'disabled'\n  | 'hideMode'\n  | 'ids'\n  | 'lazyMount'\n  | 'onExitComplete'\n  | 'unmountOnExit'\n>;\n\nexport type BitkitExpandableCardProps = Omit<BoxProps, 'asChild' | 'children' | 'onChange' | 'title'> &\n  CollapsibleMachineProps & {\n    children: ReactNode;\n    elevation?: boolean;\n    footer?: ReactNode;\n    icon?: BitkitIconComponent | ReactElement<BitkitAvatarProps>;\n    iconColor?: string;\n    size?: 'md' | 'lg';\n    subtitle?: ReactNode;\n    suffix?: ReactNode;\n    title: ReactNode;\n  } & (UncontrolledProps | ControlledProps);\n\nconst BitkitExpandableCard = forwardRef<HTMLDivElement, BitkitExpandableCardProps>((props, ref) => {\n  const {\n    children,\n    collapsedHeight,\n    collapsedWidth,\n    css,\n    defaultExpanded,\n    disabled,\n    elevation = true,\n    expanded,\n    footer,\n    hideMode,\n    icon,\n    iconColor,\n    ids,\n    lazyMount,\n    onChange,\n    onExitComplete,\n    size = 'lg',\n    subtitle,\n    suffix,\n    title,\n    unmountOnExit,\n    ...rest\n  } = props;\n\n  const recipe = useSlotRecipe({ key: 'expandableCard' });\n  const styles = recipe({ size });\n\n  const handleOpenChange = onChange ? (details: { open: boolean }) => onChange(details.open) : undefined;\n\n  // `md` is the tested branch so the default size ('lg') stays on the fallback.\n  const iconSize = size === 'md' ? '16' : '24';\n\n  // Figma sizes the header badge with the card: xs on md, sm (the badge default) on lg.\n  let renderedSuffix: ReactNode = suffix;\n  if (isValidElement<BitkitBadgeProps>(suffix) && suffix.type === BitkitBadge) {\n    renderedSuffix = cloneElement(suffix, { size: size === 'md' ? 'xs' : 'sm' });\n  }\n\n  let renderedIcon: ReactNode = null;\n  if (isValidElement<BitkitAvatarProps>(icon)) {\n    // BitkitAvatar has no '16' size, so avatars stay at '24' even on the md card.\n    renderedIcon = cloneElement(icon, { size: '24' });\n  } else if (icon) {\n    const Icon = icon;\n    renderedIcon = <Icon color={iconColor} size={iconSize} />;\n  }\n\n  return (\n    <Card.Root ref={ref} elevation={elevation} paddingSize=\"sm\" css={[styles.root, css]} {...rest}>\n      <Collapsible.Root\n        collapsedHeight={collapsedHeight}\n        collapsedWidth={collapsedWidth}\n        defaultOpen={defaultExpanded}\n        disabled={disabled}\n        hideMode={hideMode}\n        ids={ids}\n        lazyMount={lazyMount}\n        onExitComplete={onExitComplete}\n        onOpenChange={handleOpenChange}\n        open={expanded}\n        unmountOnExit={unmountOnExit}\n      >\n        <Collapsible.Trigger css={styles.header}>\n          <Box display=\"flex\" alignItems=\"center\" gap=\"8\">\n            {!!renderedIcon && <Box css={styles.icon}>{renderedIcon}</Box>}\n            <Box display=\"flex\" alignItems=\"flex-start\" flexDirection=\"column\">\n              {title}\n              {!!subtitle && (\n                <Text as=\"span\" css={styles.subtitle}>\n                  {subtitle}\n                </Text>\n              )}\n            </Box>\n          </Box>\n          <Box display=\"flex\" alignItems=\"center\">\n            {!!renderedSuffix && (\n              <Text as=\"span\" css={styles.suffix}>\n                {renderedSuffix}\n              </Text>\n            )}\n            <Collapsible.Indicator asChild>\n              <AssetSelectChevron />\n            </Collapsible.Indicator>\n          </Box>\n        </Collapsible.Trigger>\n        <Collapsible.Content css={styles.collapsible}>\n          <Card.Body>{children}</Card.Body>\n          {!!footer && <Card.Footer css={styles.footer}>{footer}</Card.Footer>}\n        </Collapsible.Content>\n      </Collapsible.Root>\n    </Card.Root>\n  );\n});\n\nBitkitExpandableCard.displayName = 'BitkitExpandableCard';\n\nexport default BitkitExpandableCard;\n"],"mappings":";;;;;;;;;;AAsDA,IAAM,uBAAuB,YAAuD,OAAO,QAAQ;CACjG,MAAM,EACJ,UACA,iBACA,gBACA,KACA,iBACA,UACA,YAAY,MACZ,UACA,QACA,UACA,MACA,WACA,KACA,WACA,UACA,gBACA,OAAO,MACP,UACA,QACA,OACA,eACA,GAAG,SACD;CAGJ,MAAM,SADS,cAAc,EAAE,KAAK,iBAAiB,CACtC,CAAA,CAAO,EAAE,KAAK,CAAC;CAE9B,MAAM,mBAAmB,YAAY,YAA+B,SAAS,QAAQ,IAAI,IAAI,KAAA;CAG7F,MAAM,WAAW,SAAS,OAAO,OAAO;CAGxC,IAAI,iBAA4B;CAChC,IAAI,eAAiC,MAAM,KAAK,OAAO,SAAS,aAC9D,iBAAiB,aAAa,QAAQ,EAAE,MAAM,SAAS,OAAO,OAAO,KAAK,CAAC;CAG7E,IAAI,eAA0B;CAC9B,IAAI,eAAkC,IAAI,GAExC,eAAe,aAAa,MAAM,EAAE,MAAM,KAAK,CAAC;MAC3C,IAAI,MAET,eAAe,oBAAC,MAAD;EAAM,OAAO;EAAW,MAAM;CAAW,CAAA;CAG1D,OACE,oBAAC,KAAK,MAAN;EAAgB;EAAgB;EAAW,aAAY;EAAK,KAAK,CAAC,OAAO,MAAM,GAAG;EAAG,GAAI;EACvF,UAAA,qBAAC,YAAY,MAAb;GACmB;GACD;GAChB,aAAa;GACH;GACA;GACL;GACM;GACK;GAChB,cAAc;GACd,MAAM;GACS;GAXjB,UAAA,CAaE,qBAAC,YAAY,SAAb;IAAqB,KAAK,OAAO;IAAjC,UAAA,CACE,qBAAC,KAAD;KAAK,SAAQ;KAAO,YAAW;KAAS,KAAI;KAA5C,UAAA,CACG,CAAC,CAAC,gBAAgB,oBAAC,KAAD;MAAK,KAAK,OAAO;MAAO,UAAA;KAAkB,CAAA,GAC7D,qBAAC,KAAD;MAAK,SAAQ;MAAO,YAAW;MAAa,eAAc;MAA1D,UAAA,CACG,OACA,CAAC,CAAC,YACD,oBAAC,MAAD;OAAM,IAAG;OAAO,KAAK,OAAO;OACzB,UAAA;MACG,CAAA,CAEL;KACF,CAAA,CAAA;IACL,CAAA,GAAA,qBAAC,KAAD;KAAK,SAAQ;KAAO,YAAW;KAA/B,UAAA,CACG,CAAC,CAAC,kBACD,oBAAC,MAAD;MAAM,IAAG;MAAO,KAAK,OAAO;MACzB,UAAA;KACG,CAAA,GAER,oBAAC,YAAY,WAAb;MAAuB,SAAA;MACrB,UAAA,oBAAC,oBAAD,CAAqB,CAAA;KACA,CAAA,CACpB;IACc,CAAA,CAAA;GACrB,CAAA,GAAA,qBAAC,YAAY,SAAb;IAAqB,KAAK,OAAO;IAAjC,UAAA,CACE,oBAAC,KAAK,MAAN,EAAY,SAAoB,CAAA,GAC/B,CAAC,CAAC,UAAU,oBAAC,KAAK,QAAN;KAAa,KAAK,OAAO;KAAS,UAAA;IAAoB,CAAA,CAChD;GACL,CAAA,CAAA;;CACT,CAAA;AAEf,CAAC;AAED,qBAAqB,cAAc"}

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/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;

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/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/ExpandableCard.recipe.d.ts

@@ -1,4 +1,4 @@
-declare const expandableCardSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"header" | "title" | "icon" | "suffix" | "collapsible" | "root" | "description" | "subtitle", {
+declare const expandableCardSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"footer" | "header" | "title" | "icon" | "suffix" | "collapsible" | "root" | "description" | "subtitle", {
     size: {
         md: {
             header: {

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

@@ -4,7 +4,7 @@ import { cardAnatomy } from "@chakra-ui/react/anatomy";
 var expandableCardSlotRecipe = defineSlotRecipe({
 	className: "expandable-card",
 	slots: [
-		...cardAnatomy.omit("body", "footer").keys(),
+		...cardAnatomy.omit("body").keys(),
 		"collapsible",
 		"icon",
 		"subtitle",
@@ -25,7 +25,11 @@ var expandableCardSlotRecipe = defineSlotRecipe({
 			"&:active": { backgroundColor: "background/active" },
 			"&:hover:not(:active)": { backgroundColor: "background/hover" },
 			_hover: { color: "text/primary" },
-			_open: { backgroundColor: "background/secondary" }
+			_open: {
+				backgroundColor: "background/secondary",
+				borderBottom: "1px solid",
+				borderBottomColor: "border/minimal"
+			}
 		},
 		collapsible: {
 			overflow: "hidden",
@@ -38,7 +42,16 @@ var expandableCardSlotRecipe = defineSlotRecipe({
 				animationDuration: "moderate"
 			}
 		},
-		icon: { color: "icon/secondary" },
+		footer: {
+			alignItems: "center",
+			display: "flex",
+			minHeight: "40"
+		},
+		icon: {
+			alignItems: "center",
+			color: "icon/secondary",
+			display: "flex"
+		},
 		subtitle: { color: "text/secondary" },
 		suffix: {
 			color: "text/secondary",

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

@@ -1 +1 @@
-{"version":3,"file":"ExpandableCard.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/ExpandableCard.recipe.ts"],"sourcesContent":["import { cardAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nconst expandableCardSlotRecipe = defineSlotRecipe({\n  className: 'expandable-card',\n  slots: [...cardAnatomy.omit('body', 'footer').keys(), 'collapsible', 'icon', 'subtitle', 'suffix'],\n  base: {\n    root: {\n      backgroundColor: 'background/primary',\n      overflow: 'hidden',\n    },\n    header: {\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'space-between',\n      cursor: 'pointer',\n      width: '100%',\n      color: 'text/primary',\n      '&:active': {\n        backgroundColor: 'background/active',\n      },\n      '&:hover:not(:active)': {\n        backgroundColor: 'background/hover',\n      },\n      _hover: {\n        color: 'text/primary',\n      },\n      _open: {\n        backgroundColor: 'background/secondary',\n      },\n    },\n    collapsible: {\n      overflow: 'hidden',\n      _open: {\n        animationName: 'expand-height, fade-in',\n        animationDuration: 'moderate',\n      },\n      _closed: {\n        animationName: 'collapse-height, fade-out',\n        animationDuration: 'moderate',\n      },\n    },\n    icon: {\n      color: 'icon/secondary',\n    },\n    subtitle: {\n      color: 'text/secondary',\n    },\n    suffix: {\n      color: 'text/secondary',\n      mx: '16',\n      textStyle: 'body/md/regular',\n    },\n  },\n  variants: {\n    size: {\n      md: {\n        header: { textStyle: 'body/md/regular', paddingX: '16', paddingY: '12' },\n        subtitle: { textStyle: 'body/sm/regular' },\n      },\n      lg: {\n        header: { textStyle: 'body/lg/regular', padding: '16' },\n        subtitle: { textStyle: 'body/md/regular' },\n      },\n    },\n  },\n  defaultVariants: {\n    size: 'lg',\n  },\n});\n\nexport default expandableCardSlotRecipe;\n"],"mappings":";;;AAGA,IAAM,2BAA2B,iBAAiB;CAChD,WAAW;CACX,OAAO;EAAC,GAAG,YAAY,KAAK,QAAQ,QAAQ,CAAC,CAAC,KAAK;EAAG;EAAe;EAAQ;EAAY;CAAQ;CACjG,MAAM;EACJ,MAAM;GACJ,iBAAiB;GACjB,UAAU;EACZ;EACA,QAAQ;GACN,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,QAAQ;GACR,OAAO;GACP,OAAO;GACP,YAAY,EACV,iBAAiB,oBACnB;GACA,wBAAwB,EACtB,iBAAiB,mBACnB;GACA,QAAQ,EACN,OAAO,eACT;GACA,OAAO,EACL,iBAAiB,uBACnB;EACF;EACA,aAAa;GACX,UAAU;GACV,OAAO;IACL,eAAe;IACf,mBAAmB;GACrB;GACA,SAAS;IACP,eAAe;IACf,mBAAmB;GACrB;EACF;EACA,MAAM,EACJ,OAAO,iBACT;EACA,UAAU,EACR,OAAO,iBACT;EACA,QAAQ;GACN,OAAO;GACP,IAAI;GACJ,WAAW;EACb;CACF;CACA,UAAU,EACR,MAAM;EACJ,IAAI;GACF,QAAQ;IAAE,WAAW;IAAmB,UAAU;IAAM,UAAU;GAAK;GACvE,UAAU,EAAE,WAAW,kBAAkB;EAC3C;EACA,IAAI;GACF,QAAQ;IAAE,WAAW;IAAmB,SAAS;GAAK;GACtD,UAAU,EAAE,WAAW,kBAAkB;EAC3C;CACF,EACF;CACA,iBAAiB,EACf,MAAM,KACR;AACF,CAAC"}
+{"version":3,"file":"ExpandableCard.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/ExpandableCard.recipe.ts"],"sourcesContent":["import { cardAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nconst expandableCardSlotRecipe = defineSlotRecipe({\n  className: 'expandable-card',\n  slots: [...cardAnatomy.omit('body').keys(), 'collapsible', 'icon', 'subtitle', 'suffix'],\n  base: {\n    root: {\n      backgroundColor: 'background/primary',\n      overflow: 'hidden',\n    },\n    header: {\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'space-between',\n      cursor: 'pointer',\n      width: '100%',\n      color: 'text/primary',\n      '&:active': {\n        backgroundColor: 'background/active',\n      },\n      '&:hover:not(:active)': {\n        backgroundColor: 'background/hover',\n      },\n      _hover: {\n        color: 'text/primary',\n      },\n      _open: {\n        backgroundColor: 'background/secondary',\n        // Figma draws this stroke inside the 48px header, so as a real border the open header\n        // is 49px. Swap for `boxShadow: 'inset 0 -1px 0 {colors.border/minimal}'` if exact\n        // 48px parity is ever needed.\n        borderBottom: '1px solid',\n        borderBottomColor: 'border/minimal',\n      },\n    },\n    collapsible: {\n      overflow: 'hidden',\n      _open: {\n        animationName: 'expand-height, fade-in',\n        animationDuration: 'moderate',\n      },\n      _closed: {\n        animationName: 'collapse-height, fade-out',\n        animationDuration: 'moderate',\n      },\n    },\n    // Figma's footer content slot is 24px tall in both sizes; with Card's `sm` block\n    // padding (8/8) that makes the 40px footer shown in the design.\n    footer: {\n      alignItems: 'center',\n      display: 'flex',\n      minHeight: '40',\n    },\n    // Flex, not the default block: an inline-block svg in a block box picks up the line box's\n    // extra leading, which made an lg header with an icon 57.5px instead of Figma's 56px.\n    icon: {\n      alignItems: 'center',\n      color: 'icon/secondary',\n      display: 'flex',\n    },\n    subtitle: {\n      color: 'text/secondary',\n    },\n    suffix: {\n      color: 'text/secondary',\n      mx: '16',\n      textStyle: 'body/md/regular',\n    },\n  },\n  variants: {\n    size: {\n      md: {\n        header: { textStyle: 'body/md/regular', paddingX: '16', paddingY: '12' },\n        subtitle: { textStyle: 'body/sm/regular' },\n      },\n      lg: {\n        header: { textStyle: 'body/lg/regular', padding: '16' },\n        subtitle: { textStyle: 'body/md/regular' },\n      },\n    },\n  },\n  defaultVariants: {\n    size: 'lg',\n  },\n});\n\nexport default expandableCardSlotRecipe;\n"],"mappings":";;;AAGA,IAAM,2BAA2B,iBAAiB;CAChD,WAAW;CACX,OAAO;EAAC,GAAG,YAAY,KAAK,MAAM,CAAC,CAAC,KAAK;EAAG;EAAe;EAAQ;EAAY;CAAQ;CACvF,MAAM;EACJ,MAAM;GACJ,iBAAiB;GACjB,UAAU;EACZ;EACA,QAAQ;GACN,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,QAAQ;GACR,OAAO;GACP,OAAO;GACP,YAAY,EACV,iBAAiB,oBACnB;GACA,wBAAwB,EACtB,iBAAiB,mBACnB;GACA,QAAQ,EACN,OAAO,eACT;GACA,OAAO;IACL,iBAAiB;IAIjB,cAAc;IACd,mBAAmB;GACrB;EACF;EACA,aAAa;GACX,UAAU;GACV,OAAO;IACL,eAAe;IACf,mBAAmB;GACrB;GACA,SAAS;IACP,eAAe;IACf,mBAAmB;GACrB;EACF;EAGA,QAAQ;GACN,YAAY;GACZ,SAAS;GACT,WAAW;EACb;EAGA,MAAM;GACJ,YAAY;GACZ,OAAO;GACP,SAAS;EACX;EACA,UAAU,EACR,OAAO,iBACT;EACA,QAAQ;GACN,OAAO;GACP,IAAI;GACJ,WAAW;EACb;CACF;CACA,UAAU,EACR,MAAM;EACJ,IAAI;GACF,QAAQ;IAAE,WAAW;IAAmB,UAAU;IAAM,UAAU;GAAK;GACvE,UAAU,EAAE,WAAW,kBAAkB;EAC3C;EACA,IAAI;GACF,QAAQ;IAAE,WAAW;IAAmB,SAAS;GAAK;GACtD,UAAU,EAAE,WAAW,kBAAkB;EAC3C;CACF,EACF;CACA,iBAAiB,EACf,MAAM,KACR;AACF,CAAC"}

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

@@ -1,4 +1,4 @@
-declare const tableSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"body" | "caption" | "footer" | "header" | "cell" | "row" | "root" | "expandedContent" | "expandableRow" | "expandedRow" | "expandCell" | "expandedCell" | "expandTrigger" | "sortColumnHeader" | "sortTrigger" | "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: {

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

@@ -7,14 +7,22 @@ var tableSlotRecipe = defineSlotRecipe({
 	className: "table",
 	slots: [
 		...tableAnatomy.keys(),
+		"actionsCell",
+		"actionsGroup",
+		"bulkActionsGroup",
+		"bulkActionsButtons",
 		"expandCell",
 		"expandTrigger",
 		"expandableRow",
 		"expandedCell",
 		"expandedContent",
 		"expandedRow",
+		"filterControls",
+		"linkedRow",
+		"rowLink",
 		"sortColumnHeader",
-		"sortTrigger"
+		"sortTrigger",
+		"utilityCell"
 	],
 	base: {
 		root: {
@@ -31,6 +39,28 @@ var tableSlotRecipe = defineSlotRecipe({
 			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,
@@ -67,6 +97,37 @@ var tableSlotRecipe = defineSlotRecipe({
 			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
@@ -88,6 +149,11 @@ var tableSlotRecipe = defineSlotRecipe({
 			width: "full",
 			_focusVisible: { outlineOffset: "-3px" },
 			_hover: { backgroundColor: "background/active" }
+		},
+		utilityCell: {
+			height: "auto",
+			paddingBlock: "12",
+			paddingInline: "16"
 		}
 	},
 	variants: {

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\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    'expandCell',\n    'expandTrigger',\n    'expandableRow',\n    'expandedCell',\n    'expandedContent',\n    'expandedRow',\n    'sortColumnHeader',\n    'sortTrigger',\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    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    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  },\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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"}
+{"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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"}

package/dist/theme/slot-recipes/index.d.ts

@@ -941,7 +941,7 @@ declare const slotRecipes: {
             };
         };
     }>;
-    expandableCard: import('@chakra-ui/react').SlotRecipeDefinition<"header" | "title" | "icon" | "suffix" | "collapsible" | "root" | "description" | "subtitle", {
+    expandableCard: import('@chakra-ui/react').SlotRecipeDefinition<"footer" | "header" | "title" | "icon" | "suffix" | "collapsible" | "root" | "description" | "subtitle", {
         size: {
             md: {
                 header: {
@@ -2112,7 +2112,7 @@ declare const slotRecipes: {
             };
         };
     }>;
-    table: import('@chakra-ui/react').SlotRecipeDefinition<"body" | "caption" | "footer" | "header" | "cell" | "row" | "root" | "expandedContent" | "expandableRow" | "expandedRow" | "expandCell" | "expandedCell" | "expandTrigger" | "sortColumnHeader" | "sortTrigger" | "columnHeader", {
+    table: 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: {

package/dist/utilities/formatLabel.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Fills `{key}` placeholders in a template from `values`. Substitution is single-pass, so braces
+ * that arrive inside a value are left alone instead of being substituted again — which also makes
+ * the result independent of the key order. A placeholder with no matching key stays as it is.
+ */
+declare const formatLabel: (template: string, values: Record<string, string | number>) => string;
+export default formatLabel;

package/dist/utilities/formatLabel.js

@@ -0,0 +1,11 @@
+//#region lib/utilities/formatLabel.ts
+/**
+* Fills `{key}` placeholders in a template from `values`. Substitution is single-pass, so braces
+* that arrive inside a value are left alone instead of being substituted again — which also makes
+* the result independent of the key order. A placeholder with no matching key stays as it is.
+*/
+var formatLabel = (template, values) => template.replace(/\{(\w+)\}/g, (placeholder, key) => Object.hasOwn(values, key) ? String(values[key]) : placeholder);
+//#endregion
+export { formatLabel as default };
+
+//# sourceMappingURL=formatLabel.js.map

package/dist/utilities/formatLabel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"formatLabel.js","names":[],"sources":["../../lib/utilities/formatLabel.ts"],"sourcesContent":["/**\n * Fills `{key}` placeholders in a template from `values`. Substitution is single-pass, so braces\n * that arrive inside a value are left alone instead of being substituted again — which also makes\n * the result independent of the key order. A placeholder with no matching key stays as it is.\n */\nconst formatLabel = (template: string, values: Record<string, string | number>) =>\n  template.replace(/\\{(\\w+)\\}/g, (placeholder, key: string) =>\n    Object.hasOwn(values, key) ? String(values[key]) : placeholder,\n  );\n\nexport default formatLabel;\n"],"mappings":";;;;;;AAKA,IAAM,eAAe,UAAkB,WACrC,SAAS,QAAQ,eAAe,aAAa,QAC3C,OAAO,OAAO,QAAQ,GAAG,IAAI,OAAO,OAAO,IAAI,IAAI,WACrD"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit-v2",
   "private": false,
-  "version": "0.3.373",
+  "version": "0.3.375",
   "description": "Bitrise Design System Components built with Chakra UI V3",
   "keywords": [
     "react",