@bitrise/bitkit-v2 0.3.79 → 0.3.81

package/dist/theme/recipes/Skeleton.recipe.js

@@ -1,11 +1,14 @@
 import { defineRecipe as e } from "@chakra-ui/react/styled-system";
-const a = e({
+const t = e({
   className: "skeleton",
   base: {
     "--animate-from": "200%",
     "--animate-to": "-200%",
     "--start-color": "colors.utilities.skeleton",
-    "--end-color": "colors.utilities.skeleton-strong"
+    "--end-color": "colors.utilities.skeleton-strong",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
   },
   variants: {
     loading: {
@@ -35,5 +38,5 @@ const a = e({
   }
 });
 export {
-  a as default
+  t as default
 };

package/dist/theme/semantic-tokens/semanticColors.js

@@ -1,7 +1,7 @@
 import { defineSemanticTokens as l } from "@chakra-ui/react/styled-system";
-import { withSlashes as s } from "../themeUtils.js";
+import { withSlashes as e } from "../themeUtils.js";
 const r = l.colors(
-  s({
+  e({
     brand: {
       primary: {
         value: {
@@ -1203,6 +1203,18 @@ const r = l.colors(
           }
         }
       },
+      checkbox: {
+        selection: {
+          value: {
+            _light: "{colors.sys.purple}"
+          }
+        },
+        "selection-disabled": {
+          value: {
+            _light: "{colors.sys.purple.disabled}"
+          }
+        }
+      },
       toggle: {
         frameOn: {
           value: {

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

@@ -0,0 +1,2 @@
+declare const checkboxSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "group" | "root" | "control" | "indicator", import('@chakra-ui/react').SlotRecipeVariantRecord<"label" | "group" | "root" | "control" | "indicator">>;
+export default checkboxSlotRecipe;

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

@@ -0,0 +1,90 @@
+import { checkboxAnatomy as o } from "@chakra-ui/react/anatomy";
+import { defineSlotRecipe as e } from "@chakra-ui/react/styled-system";
+const l = e({
+  className: "checkbox",
+  slots: o.keys(),
+  base: {
+    root: {
+      display: "inline-flex",
+      alignItems: "flex-start",
+      gap: "8px"
+    },
+    control: {
+      width: "24",
+      height: "24",
+      position: "relative",
+      borderRadius: "4",
+      backgroundColor: "background/primary",
+      border: "1px solid",
+      borderColor: "border/regular",
+      focusVisibleRing: "outside",
+      "& > svg": {
+        position: "absolute",
+        left: "-1px",
+        visibility: "hidden"
+      },
+      _checked: {
+        backgroundColor: "input/checkbox/selection",
+        borderColor: "input/checkbox/selection !important",
+        "& > svg": {
+          top: 0,
+          color: "icon/on-color",
+          visibility: "visible"
+        },
+        _disabled: {
+          backgroundColor: "input/checkbox/selection-disabled",
+          borderColor: "input/checkbox/selection-disabled !important"
+        },
+        _readOnly: {
+          "& > svg": {
+            color: "icon/on-disabled"
+          }
+        }
+      },
+      _hover: {
+        borderColor: "border/hover"
+      },
+      _indeterminate: {
+        backgroundColor: "input/checkbox/selection",
+        borderColor: "input/checkbox/selection !important",
+        "& > svg": {
+          top: "-1px",
+          color: "icon/on-color",
+          visibility: "visible"
+        },
+        _disabled: {
+          backgroundColor: "input/checkbox/selection-disabled",
+          borderColor: "input/checkbox/selection-disabled !important"
+        },
+        _readOnly: {
+          "& > svg": {
+            color: "icon/on-disabled"
+          }
+        }
+      },
+      _disabled: {
+        backgroundColor: "background/disabled",
+        borderColor: "border/disabled",
+        cursor: "not-allowed"
+      },
+      _readOnly: {
+        backgroundColor: "background/disabled",
+        borderColor: "border/regular !important"
+      }
+    },
+    label: {
+      textStyle: "body/lg/regular",
+      userSelect: "none",
+      color: "input/text/inputValue",
+      _disabled: {
+        color: "text/disabled"
+      },
+      _readOnly: {
+        color: "text/disabled"
+      }
+    }
+  }
+});
+export {
+  l as default
+};

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

@@ -1,4 +1,4 @@
-declare const emptyStateSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "title" | "description" | "root" | "indicator", {
+declare const emptyStateSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "title" | "root" | "indicator" | "description", {
     colorScheme: {
         white: {
             root: {

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

@@ -1,2 +1,2 @@
-declare const fieldSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"input" | "label" | "select" | "textarea" | "root" | "errorText" | "helperText" | "requiredIndicator", import('@chakra-ui/react').SlotRecipeVariantRecord<"input" | "label" | "select" | "textarea" | "root" | "errorText" | "helperText" | "requiredIndicator">>;
+declare const fieldSlotRecipe: 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">>;
 export default fieldSlotRecipe;

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

@@ -0,0 +1,2 @@
+declare const fieldsetSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "legend" | "root" | "helperText" | "errorText", import('@chakra-ui/react').SlotRecipeVariantRecord<"content" | "legend" | "root" | "helperText" | "errorText">>;
+export default fieldsetSlotRecipe;

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

@@ -0,0 +1,20 @@
+import { fieldsetAnatomy as e } from "@chakra-ui/react/anatomy";
+import { defineSlotRecipe as t } from "@chakra-ui/react/styled-system";
+const r = t({
+  className: "fieldset",
+  slots: e.keys(),
+  base: {
+    legend: {
+      textStyle: "body/md/semibold",
+      color: "text/primary"
+    },
+    helperText: {
+      marginBlockStart: "4",
+      textStyle: "comp/input/helperText",
+      color: "text/helper"
+    }
+  }
+});
+export {
+  r as default
+};

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

@@ -1,4 +1,4 @@
-declare const switchSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "root" | "indicator" | "control" | "thumb", {
+declare const switchSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "root" | "control" | "indicator" | "thumb", {
     size: {
         sm: {
             root: {

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

@@ -0,0 +1,48 @@
+declare const tagSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "closeTrigger" | "root" | "startElement" | "endElement", {
+    disabled: {
+        true: {
+            root: {
+                backgroundColor: "background/disabled";
+                borderColor: "border/disabled";
+                color: "text/on-disabled";
+            };
+        };
+        false: {};
+    };
+    size: {
+        sm: {
+            root: {
+                height: "24";
+                paddingInline: "4";
+                '&:has(button)': {
+                    paddingInlineEnd: "1";
+                };
+            };
+            label: {
+                paddingInline: "4";
+                textStyle: "comp/tag/sm";
+            };
+            endElement: {
+                width: "20";
+                height: "20";
+            };
+        };
+        md: {
+            root: {
+                height: "32";
+                paddingInline: "6";
+                '&:has(button)': {
+                    paddingInlineEnd: string | number;
+                };
+            };
+            startElement: {
+                marginInlineEnd: "-2px";
+            };
+            label: {
+                paddingInline: "6";
+                textStyle: "comp/tag/md";
+            };
+        };
+    };
+}>;
+export default tagSlotRecipe;

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

@@ -0,0 +1,84 @@
+import { tagAnatomy as e } from "@chakra-ui/react/anatomy";
+import { defineSlotRecipe as o } from "@chakra-ui/react/styled-system";
+import { rem as t } from "../themeUtils.js";
+const d = o({
+  className: "tag",
+  slots: e.keys(),
+  base: {
+    root: {
+      colorPalette: "neutral",
+      backgroundColor: "colorPalette.subtle",
+      borderRadius: "4",
+      border: "1px solid",
+      borderColor: "colorPalette.muted",
+      display: "inline-flex",
+      alignItems: "center",
+      overflow: "hidden",
+      color: "colorPalette.strong"
+    }
+  },
+  compoundVariants: [
+    {
+      colorPalette: "neutral",
+      disabled: !1,
+      css: {
+        root: {
+          color: "text/primary"
+        }
+      }
+    }
+  ],
+  variants: {
+    disabled: {
+      true: {
+        root: {
+          backgroundColor: "background/disabled",
+          borderColor: "border/disabled",
+          color: "text/on-disabled"
+        }
+      },
+      false: {}
+    },
+    size: {
+      sm: {
+        root: {
+          height: "24",
+          paddingInline: "4",
+          "&:has(button)": {
+            paddingInlineEnd: "1"
+          }
+        },
+        label: {
+          paddingInline: "4",
+          textStyle: "comp/tag/sm"
+        },
+        endElement: {
+          width: "20",
+          height: "20"
+        }
+      },
+      md: {
+        root: {
+          height: "32",
+          paddingInline: "6",
+          "&:has(button)": {
+            paddingInlineEnd: t(3)
+          }
+        },
+        startElement: {
+          marginInlineEnd: "-2px"
+        },
+        label: {
+          paddingInline: "6",
+          textStyle: "comp/tag/md"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+export {
+  d as default
+};

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

@@ -24,7 +24,8 @@ declare const slotRecipes: {
             };
         };
     }>;
-    emptyState: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "title" | "description" | "root" | "indicator", {
+    checkbox: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "group" | "root" | "control" | "indicator", import('@chakra-ui/react').SlotRecipeVariantRecord<"label" | "group" | "root" | "control" | "indicator">>;
+    emptyState: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "title" | "root" | "indicator" | "description", {
         colorScheme: {
             white: {
                 root: {
@@ -38,7 +39,8 @@ declare const slotRecipes: {
             };
         };
     }>;
-    field: import('@chakra-ui/react').SlotRecipeDefinition<"input" | "label" | "select" | "textarea" | "root" | "errorText" | "helperText" | "requiredIndicator", import('@chakra-ui/react').SlotRecipeVariantRecord<"input" | "label" | "select" | "textarea" | "root" | "errorText" | "helperText" | "requiredIndicator">>;
+    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">>;
+    fieldset: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "legend" | "root" | "helperText" | "errorText", import('@chakra-ui/react').SlotRecipeVariantRecord<"content" | "legend" | "root" | "helperText" | "errorText">>;
     nativeSelect: import('@chakra-ui/react').SlotRecipeDefinition<"field" | "root" | "indicator" | "statusIcon", {
         size: {
             md: {
@@ -73,7 +75,7 @@ declare const slotRecipes: {
             };
         };
     }>;
-    switch: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "root" | "indicator" | "control" | "thumb", {
+    switch: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "root" | "control" | "indicator" | "thumb", {
         size: {
             sm: {
                 root: {
@@ -156,6 +158,53 @@ declare const slotRecipes: {
             };
         };
     }>;
+    tag: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "closeTrigger" | "root" | "startElement" | "endElement", {
+        disabled: {
+            true: {
+                root: {
+                    backgroundColor: "background/disabled";
+                    borderColor: "border/disabled";
+                    color: "text/on-disabled";
+                };
+            };
+            false: {};
+        };
+        size: {
+            sm: {
+                root: {
+                    height: "24";
+                    paddingInline: "4";
+                    '&:has(button)': {
+                        paddingInlineEnd: "1";
+                    };
+                };
+                label: {
+                    paddingInline: "4";
+                    textStyle: "comp/tag/sm";
+                };
+                endElement: {
+                    width: "20";
+                    height: "20";
+                };
+            };
+            md: {
+                root: {
+                    height: "32";
+                    paddingInline: "6";
+                    '&:has(button)': {
+                        paddingInlineEnd: string | number;
+                    };
+                };
+                startElement: {
+                    marginInlineEnd: "-2px";
+                };
+                label: {
+                    paddingInline: "6";
+                    textStyle: "comp/tag/md";
+                };
+            };
+        };
+    }>;
     tooltip: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "trigger" | "arrow" | "arrowTip" | "positioner", {
         size: {
             sm: {

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

@@ -1,21 +1,27 @@
 import t from "./ActionBar.recipe.js";
-import e from "./EmptyState.recipe.js";
-import o from "./Field.recipe.js";
-import i from "./NativeSelect.recipe.js";
-import { numberInputSlotRecipe as p } from "./NumberInput.recipe.js";
-import r from "./Switch.recipe.js";
-import m from "./Tabs.recipe.js";
-import c from "./Tooltip.recipe.js";
-const b = {
+import e from "./Checkbox.recipe.js";
+import o from "./EmptyState.recipe.js";
+import i from "./Field.recipe.js";
+import p from "./Fieldset.recipe.js";
+import r from "./NativeSelect.recipe.js";
+import { numberInputSlotRecipe as m } from "./NumberInput.recipe.js";
+import c from "./Switch.recipe.js";
+import l from "./Tabs.recipe.js";
+import f from "./Tag.recipe.js";
+import S from "./Tooltip.recipe.js";
+const v = {
   actionBar: t,
-  emptyState: e,
-  field: o,
-  nativeSelect: i,
-  numberInput: p,
-  switch: r,
-  tabs: m,
-  tooltip: c
+  checkbox: e,
+  emptyState: o,
+  field: i,
+  fieldset: p,
+  nativeSelect: r,
+  numberInput: m,
+  switch: c,
+  tabs: l,
+  tag: f,
+  tooltip: S
 };
 export {
-  b as default
+  v as default
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit-v2",
   "private": false,
-  "version": "0.3.79",
+  "version": "0.3.81",
   "description": "Bitrise Design System Components built with Chakra UI v3",
   "keywords": [
     "react",
@@ -60,24 +60,24 @@
     "@figma-export/output-components-as-svg": "^6.2.4",
     "@figma-export/transform-svg-with-svgo": "^6.2.4",
     "@google-cloud/storage": "^7.17.3",
-    "@storybook/addon-docs": "10.1.0",
-    "@storybook/react-vite": "10.1.0",
+    "@storybook/addon-docs": "10.1.2",
+    "@storybook/react-vite": "10.1.2",
     "@svgr/plugin-jsx": "^8.1.0",
     "@types/node": "^24.10.1",
-    "@types/react-dom": "^19.2.3",
     "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^5.1.1",
     "axios": "^1.13.2",
     "es-toolkit": "^1.42.0",
-    "react-dom": "^19.2.0",
     "react": "^19.2.0",
+    "react-dom": "^19.2.0",
     "release-it": "^19.0.6",
-    "storybook": "10.1.0",
-    "tsx": "^4.20.6",
+    "storybook": "10.1.2",
+    "tsx": "^4.21.0",
     "typescript": "^5.9.3",
+    "vite": "^7.2.6",
     "vite-plugin-dts": "^4.5.4",
-    "vite-plugin-svgr": "^4.5.0",
-    "vite": "^7.2.4"
+    "vite-plugin-svgr": "^4.5.0"
   },
   "dependencies": {
     "@chakra-ui/react": "^3.30.0",