@bitrise/bitkit-v2 0.3.61 → 0.3.63

package/dist/components/BitkitField/BitkitField.js

@@ -2,8 +2,8 @@ import { jsxs as c, jsx as e } from "react/jsx-runtime";
 import { Field as t } from "@chakra-ui/react/field";
 import { Text as d } from "@chakra-ui/react/text";
 import { forwardRef as f } from "react";
-import u from "../BitkitTooltip/BitkitTooltip.js";
-import T from "../../icons/16x16/IconInfoCircle16.js";
+import u from "../../icons/16x16/IconInfoCircle16.js";
+import T from "../BitkitTooltip/BitkitTooltip.js";
 const y = f((x, m) => {
   const { counterText: o, children: h, errorText: r, helperText: l, label: n, optional: p, tooltip: a, warningText: i, ...s } = x;
   return /* @__PURE__ */ c(t.Root, { required: !p, ref: m, ...s, children: [
@@ -16,7 +16,7 @@ const y = f((x, m) => {
           fallback: /* @__PURE__ */ e(d, { as: "span", color: "input/text/helper", textStyle: "body/md/regular", children: "(optional)" })
         }
       ),
-      !!a && /* @__PURE__ */ e(u, { text: a ?? "", children: /* @__PURE__ */ e(T, { color: "icon/tertiary" }) }),
+      !!a && /* @__PURE__ */ e(T, { text: a ?? "", children: /* @__PURE__ */ e(u, { color: "icon/tertiary" }) }),
       o && /* @__PURE__ */ e(d, { as: "span", color: "input/text/helper", marginInlineStart: "auto", textStyle: "comp/input/helperText", children: o })
     ] }) : null,
     h,

package/dist/components/BitkitNumberInput/BitkitNumberInput.js

@@ -2,15 +2,15 @@ import { jsx as r, jsxs as c } from "react/jsx-runtime";
 import { Box as w } from "@chakra-ui/react/box";
 import { NumberInput as i } from "@chakra-ui/react/number-input";
 import { forwardRef as b } from "react";
-import { triggerSeparatorStyle as v } from "../../theme/slot-recipes/NumberInput.recipe.js";
-import { rem as y } from "../../theme/themeUtils.js";
-import T from "../BitkitField/BitkitField.js";
-import B from "../../icons/16x16/IconMinus16.js";
-import C from "../../icons/16x16/IconPlus16.js";
-import N from "../../icons/24x24/IconErrorCircleFilled24.js";
-import j from "../../icons/16x16/IconErrorCircleFilled16.js";
-import k from "../../icons/24x24/IconWarningYellow24.js";
-import F from "../../icons/16x16/IconWarningYellow16.js";
+import v from "../../icons/16x16/IconErrorCircleFilled16.js";
+import y from "../../icons/16x16/IconMinus16.js";
+import T from "../../icons/16x16/IconPlus16.js";
+import B from "../../icons/16x16/IconWarningYellow16.js";
+import C from "../../icons/24x24/IconErrorCircleFilled24.js";
+import N from "../../icons/24x24/IconWarningYellow24.js";
+import { triggerSeparatorStyle as j } from "../../theme/slot-recipes/NumberInput.recipe.js";
+import { rem as k } from "../../theme/themeUtils.js";
+import F from "../BitkitField/BitkitField.js";
 const W = b((a, d) => {
   const {
     defaultValue: p,
@@ -26,8 +26,8 @@ const W = b((a, d) => {
     ...h
   } = a, x = e === "warning" || !!l, m = e === "error" || !!t;
   let o;
-  return m ? o = n === "lg" ? /* @__PURE__ */ r(N, { color: "icon/negative" }) : /* @__PURE__ */ r(j, { color: "icon/negative" }) : x && (o = n === "lg" ? /* @__PURE__ */ r(k, { color: "icon/warning" }) : /* @__PURE__ */ r(F, { color: "icon/warning" })), /* @__PURE__ */ r(
-    T,
+  return m ? o = n === "lg" ? /* @__PURE__ */ r(C, { color: "icon/negative" }) : /* @__PURE__ */ r(v, { color: "icon/negative" }) : x && (o = n === "lg" ? /* @__PURE__ */ r(N, { color: "icon/warning" }) : /* @__PURE__ */ r(B, { color: "icon/warning" })), /* @__PURE__ */ r(
+    F,
     {
       disabled: e === "disabled",
       errorText: t,
@@ -43,15 +43,15 @@ const W = b((a, d) => {
       children: /* @__PURE__ */ c(
         i.Root,
         {
-          css: o ? { "--control-width": y(150) } : void 0,
+          css: o ? { "--control-width": k(150) } : void 0,
           defaultValue: p,
           size: n,
           ...f,
           children: [
             /* @__PURE__ */ c(i.Control, { children: [
               o && /* @__PURE__ */ r(w, { paddingInline: "12px", display: "flex", alignItems: "center", justifyContent: "center", children: o }),
-              /* @__PURE__ */ r(i.DecrementTrigger, { _before: o ? v : void 0, children: /* @__PURE__ */ r(B, {}) }),
-              /* @__PURE__ */ r(i.IncrementTrigger, { children: /* @__PURE__ */ r(C, {}) })
+              /* @__PURE__ */ r(i.DecrementTrigger, { _before: o ? j : void 0, children: /* @__PURE__ */ r(y, {}) }),
+              /* @__PURE__ */ r(i.IncrementTrigger, { children: /* @__PURE__ */ r(T, {}) })
             ] }),
             /* @__PURE__ */ r(i.Input, {})
           ]

package/dist/components/BitkitTextField/BitkitTextField.js

@@ -2,12 +2,12 @@ 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 { rem as m } from "../../theme/themeUtils.js";
-import b from "../BitkitField/BitkitField.js";
-import k from "../../icons/24x24/IconErrorCircleFilled24.js";
-import y from "../../icons/16x16/IconErrorCircleFilled16.js";
+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 W from "../../icons/16x16/IconWarningYellow16.js";
+import { rem as m } from "../../theme/themeUtils.js";
+import W from "../BitkitField/BitkitField.js";
 const C = F((c, p) => {
   const {
     counter: s,
@@ -25,10 +25,10 @@ const C = F((c, p) => {
     ...I
   } = c, h = i === "warning" || !!a, d = i === "error" || !!l;
   let t;
-  d ? t = o === "lg" ? /* @__PURE__ */ r(k, { color: "icon/negative" }) : /* @__PURE__ */ r(y, { color: "icon/negative" }) : h && (t = o === "lg" ? /* @__PURE__ */ r(B, { color: "icon/warning" }) : /* @__PURE__ */ r(W, { color: "icon/warning" }));
+  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(
-    b,
+    W,
     {
       counterText: w,
       disabled: i === "disabled",

package/dist/components/DataDisplay/BitkitBadge/BitkitBadge.d.ts

@@ -0,0 +1,11 @@
+import { BadgeProps } from '@chakra-ui/react/badge';
+import { ReactNode } from 'react';
+export type BitkitBadgeProps = {
+    children?: string;
+    icon?: ReactNode;
+} & Omit<BadgeProps, 'children'>;
+declare const BitkitBadge: import('react').ForwardRefExoticComponent<{
+    children?: string;
+    icon?: ReactNode;
+} & Omit<BadgeProps, "children"> & import('react').RefAttributes<HTMLSpanElement>>;
+export default BitkitBadge;

package/dist/theme/recipes/Badge.recipe.d.ts

@@ -0,0 +1,19 @@
+declare const badgeRecipe: import('@chakra-ui/react').RecipeDefinition<{
+    variant: {
+        subtle: {};
+        bold: {
+            color: "text/on-color";
+        };
+    };
+    colorScheme: {
+        neutral: {};
+        info: {};
+        positive: {};
+        negative: {};
+        warning: {};
+        progress: {};
+        orange: {};
+        turquoise: {};
+    };
+}>;
+export default badgeRecipe;

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

@@ -0,0 +1,156 @@
+import { defineRecipe as s } from "@chakra-ui/react/styled-system";
+const r = s({
+  className: "badge",
+  base: {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "4",
+    padding: "4",
+    borderRadius: "4",
+    textStyle: "comp/badge/sm"
+  },
+  variants: {
+    variant: {
+      subtle: {},
+      bold: {
+        color: "text/on-color"
+      }
+    },
+    colorScheme: {
+      neutral: {},
+      info: {},
+      positive: {},
+      negative: {},
+      warning: {},
+      progress: {},
+      orange: {},
+      turquoise: {}
+    }
+  },
+  compoundVariants: [
+    {
+      colorScheme: "neutral",
+      variant: "subtle",
+      css: {
+        color: "sys/neutral/strong",
+        background: "sys/neutral/subtle"
+      }
+    },
+    {
+      colorScheme: "info",
+      variant: "subtle",
+      css: {
+        color: "sys/info/strong",
+        background: "sys/info/subtle"
+      }
+    },
+    {
+      colorScheme: "positive",
+      variant: "subtle",
+      css: {
+        color: "sys/success/strong",
+        background: "sys/success/subtle"
+      }
+    },
+    {
+      colorScheme: "negative",
+      variant: "subtle",
+      css: {
+        color: "sys/critical/strong",
+        background: "sys/critical/subtle"
+      }
+    },
+    {
+      colorScheme: "warning",
+      variant: "subtle",
+      css: {
+        color: "sys/warning/strong",
+        background: "sys/warning/subtle"
+      }
+    },
+    {
+      colorScheme: "progress",
+      variant: "subtle",
+      css: {
+        color: "sys/interactive/strong",
+        background: "sys/interactive/subtle"
+      }
+    },
+    {
+      colorScheme: "orange",
+      variant: "subtle",
+      css: {
+        color: "sys/orange/strong",
+        background: "sys/orange/subtle"
+      }
+    },
+    {
+      colorScheme: "turquoise",
+      variant: "subtle",
+      css: {
+        color: "sys/turquoise/strong",
+        background: "sys/turquoise/subtle"
+      }
+    },
+    {
+      colorScheme: "neutral",
+      variant: "bold",
+      css: {
+        background: "sys/neutral/bold"
+      }
+    },
+    {
+      colorScheme: "info",
+      variant: "bold",
+      css: {
+        background: "sys/info/bold"
+      }
+    },
+    {
+      colorScheme: "positive",
+      variant: "bold",
+      css: {
+        background: "sys/success/bold"
+      }
+    },
+    {
+      colorScheme: "negative",
+      variant: "bold",
+      css: {
+        background: "sys/critical/bold"
+      }
+    },
+    {
+      colorScheme: "warning",
+      variant: "bold",
+      css: {
+        background: "sys/warning/muted",
+        color: "text/primary"
+      }
+    },
+    {
+      colorScheme: "progress",
+      variant: "bold",
+      css: {
+        background: "sys/interactive/bold"
+      }
+    },
+    {
+      colorScheme: "orange",
+      variant: "bold",
+      css: {
+        background: "sys/orange/bold"
+      }
+    },
+    {
+      colorScheme: "turquoise",
+      variant: "bold",
+      css: {
+        background: "sys/turquoise/bold"
+      }
+    }
+  ]
+});
+export {
+  r as default
+};

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

@@ -1,4 +1,22 @@
 declare const recipes: {
+    badge: import('@chakra-ui/react').RecipeDefinition<{
+        variant: {
+            subtle: {};
+            bold: {
+                color: "text/on-color";
+            };
+        };
+        colorScheme: {
+            neutral: {};
+            info: {};
+            positive: {};
+            negative: {};
+            warning: {};
+            progress: {};
+            orange: {};
+            turquoise: {};
+        };
+    }>;
     button: import('@chakra-ui/react').RecipeDefinition<{
         variant: Record<string, import('@chakra-ui/react').SystemStyleObject>;
         size: {

package/dist/theme/recipes/index.js

@@ -1,19 +1,21 @@
-import e from "./Button.recipe.js";
-import r from "./Input.recipe.js";
-import t from "./Link.recipe.js";
-import o from "./Separator.recipe.js";
-import p from "./Skeleton.recipe.js";
-import i from "./Spinner.recipe.js";
-import m from "./Textarea.recipe.js";
-const u = {
-  button: e,
-  input: r,
-  link: t,
-  separator: o,
-  skeleton: p,
-  spinner: i,
-  textarea: m
+import e from "./Badge.recipe.js";
+import r from "./Button.recipe.js";
+import t from "./Input.recipe.js";
+import o from "./Link.recipe.js";
+import p from "./Separator.recipe.js";
+import i from "./Skeleton.recipe.js";
+import m from "./Spinner.recipe.js";
+import n from "./Textarea.recipe.js";
+const k = {
+  badge: e,
+  button: r,
+  input: t,
+  link: o,
+  separator: p,
+  skeleton: i,
+  spinner: m,
+  textarea: n
 };
 export {
-  u as default
+  k as default
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit-v2",
   "private": false,
-  "version": "0.3.61",
+  "version": "0.3.63",
   "description": "Bitrise Design System Components built with Chakra UI v3",
   "keywords": [
     "react",
@@ -63,10 +63,10 @@
     "@storybook/addon-docs": "10.0.7",
     "@storybook/react-vite": "10.0.7",
     "@svgr/plugin-jsx": "^8.1.0",
-    "@types/node": "^24.10.0",
-    "@types/react-dom": "^19.2.2",
+    "@types/node": "^24.10.1",
+    "@types/react-dom": "^19.2.3",
     "@types/react": "^19.2.3",
-    "@vitejs/plugin-react": "^5.1.0",
+    "@vitejs/plugin-react": "^5.1.1",
     "axios": "^1.13.2",
     "es-toolkit": "^1.41.0",
     "react-dom": "^19.2.0",
@@ -90,10 +90,8 @@
     "access": "public"
   },
   "imports": {
-    "#*": [
-      "./*",
-      "./*.ts",
-      "./*.tsx"
+    "#storybook/*": [
+      "./.storybook/*.tsx"
     ]
   }
 }