@bitrise/bitkit-v2 0.3.151 → 0.3.152

package/dist/components/BitkitButton/BitkitButton.d.ts

@@ -1,10 +1,10 @@
 import { ButtonProps } from '@chakra-ui/react/button';
 import { BitkitIconComponent } from '../../icons';
-export interface BitkitButtonProps extends Omit<ButtonProps, 'colorPalette' | 'disabled' | 'loading' | 'loadingText' | 'spinner' | 'spinnerPlacement'> {
+export interface BitkitButtonProps extends Omit<ButtonProps, 'children' | 'colorPalette' | 'disabled' | 'loading' | 'loadingText' | 'spinner' | 'spinnerPlacement'> {
     children: string;
-    leftIcon?: BitkitIconComponent;
-    rightIcon?: BitkitIconComponent;
+    icon?: BitkitIconComponent;
     state?: 'disabled' | 'loading' | 'skeleton';
+    suffixIcon?: BitkitIconComponent;
 }
 declare const BitkitButton: import('react').ForwardRefExoticComponent<BitkitButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
 export default BitkitButton;

package/dist/components/BitkitButton/BitkitButton.js

@@ -1,16 +1,16 @@
-import { jsx as e, jsxs as c } from "react/jsx-runtime";
-import { Button as m } from "@chakra-ui/react/button";
-import { Skeleton as p } from "@chakra-ui/react/skeleton";
-import { forwardRef as f, Fragment as h } from "react";
-const g = f((s, l) => {
-  const { children: a, leftIcon: o, rightIcon: i, size: n, state: t, ...d } = s, r = n === "sm" ? "16" : "24";
-  return /* @__PURE__ */ e(p, { asChild: !0, loading: t === "skeleton", children: /* @__PURE__ */ c(m, { disabled: t === "disabled", loading: t === "loading", ref: l, size: n, ...d, children: [
-    o && /* @__PURE__ */ e(o, { size: r }),
-    /* @__PURE__ */ e(t === "skeleton" ? "span" : h, { children: a }),
-    i && /* @__PURE__ */ e(i, { size: r })
+import { jsx as i, jsxs as c } from "react/jsx-runtime";
+import { Button as f } from "@chakra-ui/react/button";
+import { Skeleton as m } from "@chakra-ui/react/skeleton";
+import { forwardRef as u } from "react";
+const p = u((r, d) => {
+  const { children: a, icon: t, size: e, state: o, suffixIcon: n, ...l } = r, s = e === "sm" ? "16" : "24";
+  return /* @__PURE__ */ i(m, { asChild: !0, loading: o === "skeleton", children: /* @__PURE__ */ c(f, { disabled: o === "disabled", loading: o === "loading", ref: d, size: e, ...l, children: [
+    t && /* @__PURE__ */ i(t, { size: s }),
+    /* @__PURE__ */ i("span", { children: a }),
+    n && /* @__PURE__ */ i(n, { size: s })
   ] }) });
 });
-g.displayName = "BitkitButton";
+p.displayName = "BitkitButton";
 export {
-  g as default
+  p as default
 };

package/dist/components/BitkitCalendar/components/CalendarNextTrigger.js

@@ -4,7 +4,7 @@ import o from "../../../icons/IconChevronRight.js";
 import { useDatePickerContext as i } from "@ark-ui/react/date-picker";
 const m = () => {
   const t = i();
-  return /* @__PURE__ */ r(e, { ...t.getNextTriggerProps(), color: "button/secondary/fg", size: "sm", variant: "tertiary", children: /* @__PURE__ */ r(o, { size: "16" }) });
+  return /* @__PURE__ */ r(e, { ...t.getNextTriggerProps(), color: "button/secondary/fg/text", size: "sm", variant: "tertiary", children: /* @__PURE__ */ r(o, { size: "16" }) });
 };
 export {
   m as default

package/dist/components/BitkitCalendar/components/CalendarPrevTrigger.js

@@ -1,10 +1,10 @@
 import { jsx as r } from "react/jsx-runtime";
-import { IconButton as t } from "@chakra-ui/react";
+import { IconButton as e } from "@chakra-ui/react";
 import o from "../../../icons/IconChevronLeft.js";
 import { useDatePickerContext as i } from "@ark-ui/react/date-picker";
 const m = () => {
-  const e = i();
-  return /* @__PURE__ */ r(t, { ...e.getPrevTriggerProps(), color: "button/secondary/fg", size: "sm", variant: "tertiary", children: /* @__PURE__ */ r(o, { size: "16" }) });
+  const t = i();
+  return /* @__PURE__ */ r(e, { ...t.getPrevTriggerProps(), color: "button/secondary/fg/text", size: "sm", variant: "tertiary", children: /* @__PURE__ */ r(o, { size: "16" }) });
 };
 export {
   m as default

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

@@ -1,6 +1,6 @@
-import { defineRecipe as l } from "@chakra-ui/react/styled-system";
+import { defineRecipe as n } from "@chakra-ui/react/styled-system";
 import { rem as r } from "../themeUtils.js";
-const s = [
+const l = [
   "primary",
   "secondary",
   "tertiary",
@@ -10,25 +10,37 @@ const s = [
   "ai-primary",
   "ai-secondary",
   "ai-tertiary"
-], n = s.reduce(
+], c = l.reduce(
   (e, o) => {
     let t = o?.includes("secondary") ? `{colors.button.${o}.border}` : `{colors.button.${o}.bg}`, d = o?.includes("secondary") ? `{colors.button.${o}.border-disabled}` : `{colors.button.${o}.bg-disabled}`;
     return o?.includes("tertiary") && (t = "transparent", d = "transparent"), e[o] = {
       "&:hover": {
         backgroundColor: `{colors.button.${o}.bg-hover}`,
         borderColor: o?.includes("secondary") ? `{colors.button.${o}.border-hover}` : `{colors.button.${o}.bg-hover}`,
-        color: `{colors.button.${o}.fg-hover}`
+        color: `{colors.button.${o}.fg-hover}`,
+        _icon: {
+          color: o === "secondary" ? "currentColor" : void 0
+        }
       },
       "&:active": {
         backgroundColor: `{colors.button.${o}.bg-active}`,
         borderColor: o?.includes("secondary") ? `{colors.button.${o}.border-active}` : `{colors.button.${o}.bg-active}`,
-        color: `{colors.button.${o}.fg-active}`
+        color: `{colors.button.${o}.fg-active}`,
+        _icon: {
+          color: o === "secondary" ? "currentColor" : void 0
+        }
       },
       _disabled: {
         backgroundColor: `{colors.button.${o}.bg-disabled}!`,
         borderColor: `${d}!`,
         color: `{colors.button.${o}.fg-disabled}!`,
-        cursor: "not-allowed"
+        cursor: "not-allowed",
+        _icon: {
+          color: o === "secondary" ? "currentColor" : void 0
+        }
+      },
+      _icon: {
+        color: o === "secondary" ? "button/secondary/fg/icon" : void 0
       },
       backgroundColor: `{colors.button.${o}.bg}`,
       borderColor: t,
@@ -38,7 +50,7 @@ const s = [
     }, e;
   },
   {}
-), b = l({
+), b = n({
   className: "button",
   base: {
     borderRadius: "4",
@@ -48,16 +60,19 @@ const s = [
     display: "inline-flex",
     alignItems: "center",
     justifyContent: "center",
-    gap: "8",
+    gap: "4",
     position: "relative",
     "--spinner-color": "currentColor",
     "--spinner-size": "sizes.16",
     _disabled: {
       cursor: "not-allowed"
+    },
+    "& span": {
+      paddingInline: "4"
     }
   },
   variants: {
-    variant: n,
+    variant: c,
     size: {
       sm: {
         minWidth: "32",

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

@@ -1,7 +1,7 @@
 declare const controlButtonRecipe: import('@chakra-ui/react').RecipeDefinition<{
     isDanger: {
         false: {
-            color: "button/secondary/fg";
+            color: "button/secondary/fg/text";
             _hover: {
                 background: "button/tertiary/bg-hover";
                 color: "button/secondary/fg-hover";

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

@@ -1,5 +1,5 @@
-import { defineRecipe as o } from "@chakra-ui/react/styled-system";
-const a = o({
+import { defineRecipe as e } from "@chakra-ui/react/styled-system";
+const t = e({
   className: "control-button",
   base: {
     display: "inline-flex",
@@ -21,7 +21,7 @@ const a = o({
   variants: {
     isDanger: {
       false: {
-        color: "button/secondary/fg",
+        color: "button/secondary/fg/text",
         _hover: {
           background: "button/tertiary/bg-hover",
           color: "button/secondary/fg-hover",
@@ -71,5 +71,5 @@ const a = o({
   }
 });
 export {
-  a as default
+  t as default
 };

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

@@ -65,7 +65,7 @@ declare const recipes: {
     controlButton: import('@chakra-ui/react').RecipeDefinition<{
         isDanger: {
             false: {
-                color: "button/secondary/fg";
+                color: "button/secondary/fg/text";
                 _hover: {
                     background: "button/tertiary/bg-hover";
                     color: "button/secondary/fg-hover";

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

@@ -948,8 +948,20 @@ const a = e.colors(
           }
         },
         fg: {
-          value: {
-            base: "{colors.sys.fg.primary}"
+          base: {
+            value: {
+              base: "{colors.sys.fg.primary}"
+            }
+          },
+          text: {
+            value: {
+              base: "{colors.sys.fg.primary}"
+            }
+          },
+          icon: {
+            value: {
+              base: "{colors.sys.fg.secondary}"
+            }
           }
         },
         "fg-hover": {

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

@@ -20,7 +20,7 @@ const a = r({
   userSelect: "none",
   cursor: "pointer",
   width: "var(--stepper-width)",
-  color: "button/secondary/fg",
+  color: "button/secondary/fg/text",
   _disabled: {
     color: "button/secondary/fg-disabled",
     cursor: "not-allowed"

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit-v2",
   "private": false,
-  "version": "0.3.151",
+  "version": "0.3.152",
   "description": "Bitrise Design System Components built with Chakra UI V3",
   "keywords": [
     "react",
@@ -60,8 +60,8 @@
     "@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.0",
-    "@storybook/react-vite": "10.3.0",
+    "@storybook/addon-docs": "10.3.3",
+    "@storybook/react-vite": "10.3.3",
     "@svgr/plugin-jsx": "^8.1.0",
     "@types/node": "^24.12.0",
     "@types/react": "^19.2.14",
@@ -72,7 +72,7 @@
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "release-it": "^19.2.4",
-    "storybook": "10.3.0",
+    "storybook": "10.3.3",
     "tsx": "^4.21.0",
     "typescript": "^5.9.3",
     "vite": "^7.3.1",