@bitrise/bitkit-v2 0.3.175 → 0.3.177

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

@@ -6,24 +6,142 @@ var n = e({
 	slots: t.keys(),
 	base: {
 		root: {
-			border: "1px solid",
-			borderColor: "border/minimal",
-			overflow: "hidden"
+			fontVariantNumeric: "lining-nums tabular-nums",
+			textAlign: "start",
+			width: "full"
 		},
-		columnHeader: {
-			backgroundColor: "background/tertiary",
-			border: "1px solid",
-			borderColor: "border/minimal",
-			padding: "8",
-			textAlign: "left",
-			textStyle: "heading/h5"
+		caption: {
+			captionSide: "top !important",
+			textAlign: "start",
+			"& > * + *": { marginBlockStart: "4" }
 		},
 		cell: {
-			border: "1px solid",
-			borderColor: "border/minimal",
-			padding: "8"
+			color: "text/body",
+			textStyle: "body/md/regular"
 		},
-		row: { _hover: { backgroundColor: "background/selected" } }
+		footer: {
+			borderTopStyle: "solid",
+			borderTopWidth: "1px"
+		}
+	},
+	variants: {
+		variant: {
+			default: {
+				root: {
+					borderColor: "border/minimal",
+					borderRadius: "4",
+					borderStyle: "solid",
+					borderWidth: "1px",
+					overflow: "hidden"
+				},
+				header: { "& :where(th)": { backgroundColor: "background/tertiary" } },
+				columnHeader: {
+					borderBottomColor: "border/minimal",
+					paddingBlock: "12",
+					paddingInline: "16"
+				},
+				cell: {
+					borderBottomColor: "border/minimal",
+					paddingInline: "16"
+				},
+				footer: { borderTopColor: "border/minimal" }
+			},
+			borderless: {
+				columnHeader: {
+					borderBottomColor: "border/regular",
+					padding: "12"
+				},
+				cell: {
+					borderBottomColor: "border/regular",
+					paddingInline: "12"
+				},
+				footer: { borderTopColor: "border/regular" }
+			}
+		},
+		layout: {
+			table: {
+				root: {
+					borderCollapse: "separate",
+					borderSpacing: "0"
+				},
+				caption: { marginBlockEnd: "24" },
+				columnHeader: {
+					borderBottomStyle: "solid",
+					borderBottomWidth: "1px",
+					color: "text/primary",
+					fontWeight: "bold",
+					textAlign: "start",
+					textStyle: "heading/h5",
+					verticalAlign: "middle"
+				},
+				cell: {
+					borderBottomStyle: "solid",
+					borderBottomWidth: "1px",
+					paddingBlock: "20",
+					verticalAlign: "middle"
+				},
+				body: {
+					"& :where(tr)": { _hover: { backgroundColor: "background/hover" } },
+					"& :where(tr:last-child) td": { borderBottomWidth: "0" }
+				}
+			},
+			stacked: {
+				root: { display: "block" },
+				caption: {
+					display: "block",
+					padding: "16",
+					backgroundColor: "background/tertiary",
+					borderBottomColor: "border/minimal",
+					borderBottomStyle: "solid",
+					borderBottomWidth: "1px"
+				},
+				header: {
+					borderWidth: "0",
+					clip: "rect(0, 0, 0, 0)",
+					height: "1",
+					margin: "-1px",
+					overflow: "hidden",
+					padding: 0,
+					position: "absolute",
+					whiteSpace: "nowrap",
+					width: "1"
+				},
+				body: { display: "block" },
+				row: {
+					borderBottomColor: "border/minimal",
+					borderBottomStyle: "solid",
+					borderBottomWidth: "1px",
+					display: "block",
+					paddingBlock: "12",
+					"&:last-child": { borderBottomWidth: "0" }
+				},
+				cell: {
+					alignItems: "center",
+					display: "flex",
+					minHeight: "48",
+					paddingInline: "16",
+					_before: {
+						alignSelf: "center",
+						color: "text/primary",
+						content: "attr(data-label)",
+						flexShrink: 0,
+						fontWeight: "semibold",
+						paddingInlineEnd: "16",
+						width: "96"
+					}
+				},
+				footer: { display: "block" }
+			}
+		}
+	},
+	compoundVariants: [{
+		css: { row: { borderBottomColor: "border/regular" } },
+		layout: "stacked",
+		variant: "borderless"
+	}],
+	defaultVariants: {
+		layout: "table",
+		variant: "default"
 	}
 });
 //#endregion

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

@@ -1,4 +1,4 @@
-declare const tagsInputSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"input" | "label" | "root" | "item" | "clearTrigger" | "control" | "itemText" | "itemPreview" | "itemInput" | "itemDeleteTrigger" | "tagsBlock" | "suffixBlock", {
+declare const tagsInputSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"input" | "label" | "root" | "item" | "clearTrigger" | "control" | "itemText" | "itemDeleteTrigger" | "itemPreview" | "itemInput" | "tagsBlock" | "suffixBlock", {
     size: {
         md: {
             control: {

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

@@ -6,7 +6,10 @@ var r = t({
 	className: "tooltip",
 	slots: n.keys(),
 	base: {
-		positioner: { pointerEvents: "none" },
+		positioner: {
+			fontFamily: "body",
+			pointerEvents: "none"
+		},
 		content: {
 			"--tooltip-bg": "colors.background.contrast",
 			backgroundColor: "var(--tooltip-bg)",

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

@@ -320,18 +320,10 @@ declare const slotRecipes: {
                     alignItems: "center";
                     borderRadius: "2";
                     color: "text/body";
-                    cursor: "pointer";
                     display: "inline-flex";
                     paddingBlock: "2";
                     paddingInline: "6";
-                    userSelect: "none";
                     whiteSpace: "nowrap";
-                    _hover: {
-                        background: "background/hover";
-                    };
-                    _active: {
-                        background: "background/active";
-                    };
                 };
             };
             single: {
@@ -456,6 +448,10 @@ declare const slotRecipes: {
                 };
             };
         };
+        interactive: {
+            true: {};
+            false: {};
+        };
         hasShowMore: {
             true: {};
             false: {};
@@ -465,6 +461,7 @@ declare const slotRecipes: {
             false: {};
         };
     }>;
+    collapsible: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "root" | "trigger" | "indicator", import('@chakra-ui/react').SlotRecipeVariantRecord<"content" | "root" | "trigger" | "indicator">>;
     combobox: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "input" | "label" | "list" | "root" | "item" | "itemIndicator" | "trigger" | "positioner" | "clearTrigger" | "control" | "itemText" | "itemGroup" | "itemGroupLabel" | "indicatorGroup" | "empty" | "emptyHelperText", {
         size: {
             md: {
@@ -588,7 +585,7 @@ declare const slotRecipes: {
             };
         };
     }>;
-    expandableCard: import('@chakra-ui/react').SlotRecipeDefinition<"body" | "footer" | "header" | "title" | "icon" | "suffix" | "root" | "secdText" | "collapsible" | "description", {
+    expandableCard: import('@chakra-ui/react').SlotRecipeDefinition<"body" | "footer" | "header" | "title" | "icon" | "suffix" | "collapsible" | "root" | "secdText" | "description", {
         size: {
             md: {
                 header: {
@@ -612,8 +609,9 @@ declare const slotRecipes: {
         };
     }>;
     field: import('@chakra-ui/react').SlotRecipeDefinition<"input" | "label" | "select" | "textarea" | "root" | "helperText" | "errorText" | "requiredIndicator", import('@chakra-ui/react').SlotRecipeVariantRecord<"input" | "label" | "select" | "textarea" | "root" | "helperText" | "errorText" | "requiredIndicator">>;
+    groupHeading: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "separator" | "icon" | "root" | "titleBlock", import('@chakra-ui/react').SlotRecipeVariantRecord<"label" | "separator" | "icon" | "root" | "titleBlock">>;
     fieldset: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "legend" | "root" | "helperText" | "errorText", import('@chakra-ui/react').SlotRecipeVariantRecord<"content" | "legend" | "root" | "helperText" | "errorText">>;
-    fileUpload: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "root" | "item" | "itemContent" | "trigger" | "clearTrigger" | "itemGroup" | "itemPreview" | "itemDeleteTrigger" | "dropzone" | "itemName" | "itemPreviewImage" | "itemSizeText" | "dropzoneContent" | "fileText", {
+    fileUpload: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "root" | "item" | "itemContent" | "trigger" | "clearTrigger" | "itemGroup" | "dropzone" | "itemDeleteTrigger" | "itemName" | "itemPreview" | "itemPreviewImage" | "itemSizeText" | "dropzoneContent" | "fileText", {
         variant: {
             image: {
                 root: {
@@ -643,17 +641,17 @@ declare const slotRecipes: {
         };
         status: {
             error: {
-                label: {
+                root: {
                     color: "text/body";
                 };
             };
             loading: {
-                label: {
+                root: {
                     color: "text/secondary";
                 };
             };
             success: {
-                label: {
+                root: {
                     color: "text/body";
                 };
             };
@@ -734,6 +732,46 @@ declare const slotRecipes: {
             };
         };
     }>;
+    paginationLoadMore: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "counter", {
+        size: {
+            md: {
+                root: {
+                    gap: "24";
+                    minHeight: string;
+                };
+                counter: {
+                    textStyle: "body/md/regular";
+                    '&:has(+ *)': {
+                        paddingInlineEnd: "24";
+                    };
+                };
+            };
+            sm: {
+                root: {
+                    gap: "16";
+                    minHeight: "48";
+                };
+                counter: {
+                    textStyle: "body/md/regular";
+                    '&:has(+ *)': {
+                        paddingInlineEnd: "16";
+                    };
+                };
+            };
+            xs: {
+                root: {
+                    gap: "12";
+                    minHeight: "32";
+                };
+                counter: {
+                    textStyle: "body/sm/regular";
+                    '&:has(+ *)': {
+                        paddingInlineEnd: "12";
+                    };
+                };
+            };
+        };
+    }>;
     radioGroup: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "root" | "item" | "itemIndicator" | "indicator" | "itemText" | "itemControl" | "itemAddon", {
         orientation: {
             horizontal: {
@@ -772,6 +810,7 @@ declare const slotRecipes: {
         };
     }>;
     ribbon: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "root" | "textBlock", import('@chakra-ui/react').SlotRecipeVariantRecord<"content" | "root" | "textBlock">>;
+    sectionHeading: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "icon" | "root" | "helperText" | "titleBlock" | "contentBlock" | "helperBlock", import('@chakra-ui/react').SlotRecipeVariantRecord<"label" | "icon" | "root" | "helperText" | "titleBlock" | "contentBlock" | "helperBlock">>;
     segmentGroup: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "root" | "item" | "indicator" | "itemText" | "itemControl", {
         fullWidth: {
             true: {
@@ -889,7 +928,140 @@ declare const slotRecipes: {
             };
         };
     }>;
-    table: import('@chakra-ui/react').SlotRecipeDefinition<"body" | "caption" | "footer" | "header" | "cell" | "row" | "root" | "columnHeader", import('@chakra-ui/react').SlotRecipeVariantRecord<"body" | "caption" | "footer" | "header" | "cell" | "row" | "root" | "columnHeader">>;
+    table: import('@chakra-ui/react').SlotRecipeDefinition<"body" | "caption" | "footer" | "header" | "cell" | "row" | "root" | "columnHeader", {
+        variant: {
+            default: {
+                root: {
+                    borderColor: "border/minimal";
+                    borderRadius: "4";
+                    borderStyle: "solid";
+                    borderWidth: "1px";
+                    overflow: "hidden";
+                };
+                header: {
+                    '& :where(th)': {
+                        backgroundColor: "background/tertiary";
+                    };
+                };
+                columnHeader: {
+                    borderBottomColor: "border/minimal";
+                    paddingBlock: "12";
+                    paddingInline: "16";
+                };
+                cell: {
+                    borderBottomColor: "border/minimal";
+                    paddingInline: "16";
+                };
+                footer: {
+                    borderTopColor: "border/minimal";
+                };
+            };
+            borderless: {
+                columnHeader: {
+                    borderBottomColor: "border/regular";
+                    padding: "12";
+                };
+                cell: {
+                    borderBottomColor: "border/regular";
+                    paddingInline: "12";
+                };
+                footer: {
+                    borderTopColor: "border/regular";
+                };
+            };
+        };
+        layout: {
+            table: {
+                root: {
+                    borderCollapse: "separate";
+                    borderSpacing: "0";
+                };
+                caption: {
+                    marginBlockEnd: "24";
+                };
+                columnHeader: {
+                    borderBottomStyle: "solid";
+                    borderBottomWidth: "1px";
+                    color: "text/primary";
+                    fontWeight: "bold";
+                    textAlign: "start";
+                    textStyle: "heading/h5";
+                    verticalAlign: "middle";
+                };
+                cell: {
+                    borderBottomStyle: "solid";
+                    borderBottomWidth: "1px";
+                    paddingBlock: "20";
+                    verticalAlign: "middle";
+                };
+                body: {
+                    '& :where(tr)': {
+                        _hover: {
+                            backgroundColor: "background/hover";
+                        };
+                    };
+                    '& :where(tr:last-child) td': {
+                        borderBottomWidth: "0";
+                    };
+                };
+            };
+            stacked: {
+                root: {
+                    display: "block";
+                };
+                caption: {
+                    display: "block";
+                    padding: "16";
+                    backgroundColor: "background/tertiary";
+                    borderBottomColor: "border/minimal";
+                    borderBottomStyle: "solid";
+                    borderBottomWidth: "1px";
+                };
+                header: {
+                    borderWidth: "0";
+                    clip: "rect(0, 0, 0, 0)";
+                    height: "1";
+                    margin: "-1px";
+                    overflow: "hidden";
+                    padding: number;
+                    position: "absolute";
+                    whiteSpace: "nowrap";
+                    width: "1";
+                };
+                body: {
+                    display: "block";
+                };
+                row: {
+                    borderBottomColor: "border/minimal";
+                    borderBottomStyle: "solid";
+                    borderBottomWidth: "1px";
+                    display: "block";
+                    paddingBlock: "12";
+                    '&:last-child': {
+                        borderBottomWidth: "0";
+                    };
+                };
+                cell: {
+                    alignItems: "center";
+                    display: "flex";
+                    minHeight: "48";
+                    paddingInline: "16";
+                    _before: {
+                        alignSelf: "center";
+                        color: "text/primary";
+                        content: "attr(data-label)";
+                        flexShrink: number;
+                        fontWeight: "semibold";
+                        paddingInlineEnd: "16";
+                        width: "96";
+                    };
+                };
+                footer: {
+                    display: "block";
+                };
+            };
+        };
+    }>;
     tabs: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "list" | "root" | "trigger" | "indicator" | "contentGroup", {
         variant: {
             line: {
@@ -990,7 +1162,7 @@ declare const slotRecipes: {
             };
         };
     }>;
-    tagsInput: import('@chakra-ui/react').SlotRecipeDefinition<"input" | "label" | "root" | "item" | "clearTrigger" | "control" | "itemText" | "itemPreview" | "itemInput" | "itemDeleteTrigger" | "tagsBlock" | "suffixBlock", {
+    tagsInput: import('@chakra-ui/react').SlotRecipeDefinition<"input" | "label" | "root" | "item" | "clearTrigger" | "control" | "itemText" | "itemDeleteTrigger" | "itemPreview" | "itemInput" | "tagsBlock" | "suffixBlock", {
         size: {
             md: {
                 control: {

package/dist/theme/slot-recipes/index.js

@@ -7,33 +7,37 @@ import a from "./Breadcrumb.recipe.js";
 import o from "./Card.recipe.js";
 import s from "./Checkbox.recipe.js";
 import c from "./CodeSnippet.recipe.js";
-import l from "./Combobox.recipe.js";
-import u from "./DatePicker.recipe.js";
-import { selectSlotRecipe as d } from "./Select.recipe.js";
-import f from "./DatePickerSelect.recipe.js";
-import p from "./Dialog.recipe.js";
-import m from "./EmptyState.recipe.js";
-import h from "./ExpandableCard.recipe.js";
-import g from "./Field.recipe.js";
-import _ from "./Fieldset.recipe.js";
-import v from "./FileUpload.recipe.js";
-import y from "./ImageCropper.recipe.js";
-import b from "./InlineLoading.recipe.js";
-import x from "./List.recipe.js";
-import S from "./Menu.recipe.js";
-import C from "./NativeSelect.recipe.js";
-import w from "./RadioGroup.recipe.js";
-import T from "./Ribbon.recipe.js";
-import E from "./SegmentGroup.recipe.js";
-import D from "./SplitButton.recipe.js";
-import O from "./Switch.recipe.js";
-import k from "./Table.recipe.js";
-import A from "./Tabs.recipe.js";
-import j from "./Tag.recipe.js";
-import M from "./TagsInput.recipe.js";
-import N from "./Tooltip.recipe.js";
+import l from "./Collapsible.recipe.js";
+import u from "./Combobox.recipe.js";
+import d from "./DatePicker.recipe.js";
+import { selectSlotRecipe as f } from "./Select.recipe.js";
+import p from "./DatePickerSelect.recipe.js";
+import m from "./Dialog.recipe.js";
+import h from "./EmptyState.recipe.js";
+import g from "./ExpandableCard.recipe.js";
+import _ from "./Field.recipe.js";
+import v from "./Fieldset.recipe.js";
+import y from "./FileUpload.recipe.js";
+import b from "./GroupHeading.recipe.js";
+import x from "./ImageCropper.recipe.js";
+import S from "./InlineLoading.recipe.js";
+import C from "./List.recipe.js";
+import w from "./Menu.recipe.js";
+import T from "./NativeSelect.recipe.js";
+import E from "./PaginationLoadMore.recipe.js";
+import D from "./RadioGroup.recipe.js";
+import O from "./Ribbon.recipe.js";
+import k from "./SectionHeading.recipe.js";
+import A from "./SegmentGroup.recipe.js";
+import j from "./SplitButton.recipe.js";
+import M from "./Switch.recipe.js";
+import N from "./Table.recipe.js";
+import P from "./Tabs.recipe.js";
+import F from "./Tag.recipe.js";
+import I from "./TagsInput.recipe.js";
+import L from "./Tooltip.recipe.js";
 //#region lib/theme/slot-recipes/index.ts
-var P = {
+var R = {
 	accordion: t,
 	actionBar: n,
 	alert: r,
@@ -42,32 +46,36 @@ var P = {
 	card: o,
 	checkbox: s,
 	codeSnippet: c,
-	combobox: l,
-	datePicker: u,
-	datePickerSelect: f,
-	dialog: p,
-	emptyState: m,
-	expandableCard: h,
-	field: g,
-	fieldset: _,
-	fileUpload: v,
-	imageCropper: y,
-	inlineLoading: b,
-	list: x,
-	menu: S,
-	nativeSelect: C,
+	collapsible: l,
+	combobox: u,
+	datePicker: d,
+	datePickerSelect: p,
+	dialog: m,
+	emptyState: h,
+	expandableCard: g,
+	field: _,
+	groupHeading: b,
+	fieldset: v,
+	fileUpload: y,
+	imageCropper: x,
+	inlineLoading: S,
+	list: C,
+	menu: w,
+	nativeSelect: T,
 	numberInput: e,
-	radioGroup: w,
-	ribbon: T,
-	segmentGroup: E,
-	select: d,
-	splitButton: D,
-	switch: O,
-	table: k,
-	tabs: A,
-	tag: j,
-	tagsInput: M,
-	tooltip: N
+	paginationLoadMore: E,
+	radioGroup: D,
+	ribbon: O,
+	sectionHeading: k,
+	segmentGroup: A,
+	select: f,
+	splitButton: j,
+	switch: M,
+	table: N,
+	tabs: P,
+	tag: F,
+	tagsInput: I,
+	tooltip: L
 };
 //#endregion
-export { P as default };
+export { R as default };

package/dist/theme/tokens/sizesAndSpacing.js

@@ -1,5 +1,4 @@
-//#region lib/theme/tokens/sizesAndSpacing.json
-var e = { value: "100%" }, t = {
+var e = {
 	1: { value: "0.0625rem" },
 	2: { value: "0.125rem" },
 	4: { value: "0.25rem" },
@@ -15,7 +14,7 @@ var e = { value: "100%" }, t = {
 	64: { value: "4rem" },
 	96: { value: "6rem" },
 	128: { value: "8rem" },
-	full: e
+	full: { value: "100%" }
 };
 //#endregion
-export { t as default };
+export { e as default };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit-v2",
   "private": false,
-  "version": "0.3.175",
+  "version": "0.3.177",
   "description": "Bitrise Design System Components built with Chakra UI V3",
   "keywords": [
     "react",
@@ -60,11 +60,11 @@
     "@figma-export/output-components-as-svg": "^6.4.0",
     "@figma-export/transform-svg-with-svgo": "^6.4.0",
     "@google-cloud/storage": "^7.19.0",
-    "@storybook/addon-docs": "10.3.4",
-    "@storybook/addon-mcp": "^0.4.2",
-    "@storybook/react-vite": "10.3.4",
+    "@storybook/addon-docs": "10.3.5",
+    "@storybook/addon-mcp": "^0.5.0",
+    "@storybook/react-vite": "10.3.5",
     "@svgr/plugin-jsx": "^8.1.0",
-    "@types/node": "^25.5.0",
+    "@types/node": "^25.5.2",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^6.0.1",
@@ -73,12 +73,12 @@
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "release-it": "^19.2.4",
-    "storybook": "10.3.4",
+    "storybook": "10.3.5",
     "tsx": "^4.21.0",
     "typescript": "^6.0.2",
-    "vite": "^8.0.3",
+    "vite": "^8.0.7",
     "vite-plugin-dts": "^4.5.4",
-    "vite-plugin-svgr": "^5.0.0"
+    "vite-plugin-svgr": "^5.2.0"
   },
   "dependencies": {
     "@chakra-ui/react": "^3.34.0",