@bitrise/bitkit-v2 0.3.78 → 0.3.80

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

@@ -1,13 +1,16 @@
 import { defineRecipe as e } from "@chakra-ui/react/styled-system";
-const a = e({
+const t = e({
   className: "badge",
   base: {
+    colorPalette: "neutral",
     display: "inline-flex",
     alignItems: "center",
     gap: "4",
     padding: "4",
     borderRadius: "4",
-    textStyle: "comp/badge/sm"
+    textStyle: "comp/badge/sm",
+    color: "colorPalette.strong",
+    background: "colorPalette.subtle"
   },
   variants: {
     variant: {
@@ -33,5 +36,5 @@ const a = e({
   ]
 });
 export {
-  a as default
+  t as default
 };

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

@@ -2,6 +2,7 @@ import { defineRecipe as e } from "@chakra-ui/react/styled-system";
 const r = e({
   className: "close-button",
   base: {
+    colorPalette: "neutral",
     display: "inline-flex",
     alignItems: "center",
     justifyContent: "center",
@@ -33,8 +34,7 @@ const r = e({
     }
   },
   defaultVariants: {
-    size: "xs",
-    colorPalette: "neutral"
+    size: "xs"
   }
 });
 export {

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

@@ -2,6 +2,7 @@ import { defineRecipe as e } from "@chakra-ui/react/styled-system";
 const o = e({
   className: "color-button",
   base: {
+    colorPalette: "neutral",
     display: "inline-flex",
     alignItems: "center",
     justifyContent: "center",
@@ -24,7 +25,6 @@ const o = e({
     }
   },
   defaultVariants: {
-    colorPalette: "neutral",
     size: "sm"
   }
 });

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

@@ -1,11 +1,15 @@
 import { defineRecipe as e } from "@chakra-ui/react/styled-system";
-const a = e({
+const r = 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",
+    overflow: "hidden",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
   },
   variants: {
     loading: {
@@ -35,5 +39,5 @@ const a = e({
   }
 });
 export {
-  a as default
+  r as default
 };

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

@@ -156,6 +156,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

@@ -5,8 +5,9 @@ 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 c from "./Tag.recipe.js";
+import l from "./Tooltip.recipe.js";
+const g = {
   actionBar: t,
   emptyState: e,
   field: o,
@@ -14,8 +15,9 @@ const b = {
   numberInput: p,
   switch: r,
   tabs: m,
-  tooltip: c
+  tag: c,
+  tooltip: l
 };
 export {
-  b as default
+  g as default
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit-v2",
   "private": false,
-  "version": "0.3.78",
+  "version": "0.3.80",
   "description": "Bitrise Design System Components built with Chakra UI v3",
   "keywords": [
     "react",
@@ -60,8 +60,8 @@
     "@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",
@@ -72,12 +72,12 @@
     "react-dom": "^19.2.0",
     "react": "^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-plugin-dts": "^4.5.4",
     "vite-plugin-svgr": "^4.5.0",
-    "vite": "^7.2.4"
+    "vite": "^7.2.6"
   },
   "dependencies": {
     "@chakra-ui/react": "^3.30.0",

package/dist/components/BitkitTextField/BitkitTextField.js

@@ -1,62 +0,0 @@
-import { jsx as r } from "react/jsx-runtime";
-import { Input as T } from "@chakra-ui/react/input";
-import { InputGroup as E } from "@chakra-ui/react/input-group";
-import { forwardRef as F } from "react";
-import b from "../../icons/16x16/IconErrorCircleFilled16.js";
-import k from "../../icons/16x16/IconWarningYellow16.js";
-import y from "../../icons/24x24/IconErrorCircleFilled24.js";
-import B from "../../icons/24x24/IconWarningYellow24.js";
-import { rem as m } from "../../theme/themeUtils.js";
-import W from "../BitkitField/BitkitField.js";
-const C = F((c, p) => {
-  const {
-    counter: s,
-    errorText: l,
-    helperText: g,
-    inputProps: e,
-    label: f,
-    maxLength: n,
-    optional: u,
-    placeholder: v,
-    size: o,
-    state: i,
-    tooltip: x,
-    warningText: a,
-    ...I
-  } = c, h = i === "warning" || !!a, d = i === "error" || !!l;
-  let t;
-  d ? t = o === "lg" ? /* @__PURE__ */ r(y, { color: "icon/negative" }) : /* @__PURE__ */ r(b, { color: "icon/negative" }) : h && (t = o === "lg" ? /* @__PURE__ */ r(B, { color: "icon/warning" }) : /* @__PURE__ */ r(k, { color: "icon/warning" }));
-  const w = s && n && e?.value !== void 0 ? `${e.value.toString().length}/${n}` : void 0;
-  return /* @__PURE__ */ r(
-    W,
-    {
-      counterText: w,
-      disabled: i === "disabled",
-      errorText: l,
-      helperText: g,
-      invalid: d,
-      label: f,
-      optional: u,
-      readOnly: i === "readOnly",
-      ref: p,
-      tooltip: x,
-      warningText: a,
-      ...I,
-      children: /* @__PURE__ */ r(
-        E,
-        {
-          endElement: t,
-          endElementProps: {
-            marginInlineEnd: o === "lg" ? m(15) : m(11)
-          },
-          width: "100%",
-          children: /* @__PURE__ */ r(T, { placeholder: v, size: o, maxLength: n, ...e })
-        }
-      )
-    }
-  );
-});
-C.displayName = "BitkitTextField";
-export {
-  C as default
-};