@bitrise/bitkit-v2 0.3.140 → 0.3.142

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

@@ -1,21 +1,22 @@
-import { selectAnatomy as t } from "@chakra-ui/react/anatomy";
-import { defineSlotRecipe as o } from "@chakra-ui/react/styled-system";
+import { selectAnatomy as o } from "@chakra-ui/react/anatomy";
+import { defineSlotRecipe as r } from "@chakra-ui/react/styled-system";
+import { variants as t, base as n } from "../common/ComboboxAndSelect.common.js";
 import { rem as e } from "../themeUtils.js";
-const a = o({
+const c = r({
   className: "select",
-  slots: [...t.keys(), "searchInputGroup", "searchInput", "createItemContainer", "createItem"],
+  slots: [...o.keys(), "searchInputGroup", "searchInput", "createItemContainer", "createItem"],
   base: {
     trigger: {
       display: "flex",
       alignItems: "center",
       borderWidth: e(1),
       borderColor: "border/strong",
-      bg: "bg.muted",
+      background: "bg.muted",
       color: "input/text/inputValue",
       gap: "8",
       justifyContent: "space-between",
-      px: "16",
-      py: e(11),
+      paddingInline: "16",
+      paddingBlock: e(11),
       borderRadius: "4",
       userSelect: "none",
       textAlign: "start",
@@ -26,24 +27,24 @@ const a = o({
       },
       _disabled: {
         color: "text/disabled",
-        bg: "background/disabled"
+        background: "background/disabled"
       },
       _invalid: {
         borderColor: "border/error"
       },
       _readOnly: {
-        bg: "background/disabled"
+        background: "background/disabled"
       }
     },
     indicatorGroup: {
       display: "flex",
       alignItems: "center",
       gap: "8",
-      pos: "absolute",
+      position: "absolute",
       insetEnd: "0",
       top: "0",
       bottom: "0",
-      px: "16",
+      paddingInline: "16",
       pointerEvents: "none"
     },
     indicator: {
@@ -58,62 +59,10 @@ const a = o({
         color: "icon/on-disabled"
       }
     },
-    content: {
-      background: "background/primary",
-      display: "flex",
-      flexDirection: "column",
-      zIndex: "select",
-      overflowY: "auto",
-      boxShadow: "large",
-      _open: {
-        animationStyle: "slide-fade-in",
-        animationDuration: "fast"
-      },
-      _closed: {
-        animationStyle: "slide-fade-out",
-        animationDuration: "fastest"
-      }
-    },
-    item: {
-      position: "relative",
-      userSelect: "none",
-      display: "flex",
-      alignItems: "center",
-      gap: "12",
-      cursor: "option",
-      justifyContent: "space-between",
-      flex: "1",
-      px: "16",
-      py: "12",
-      textAlign: "start",
-      textStyle: "body/lg/regular",
-      lineHeight: e(24),
-      _highlighted: {
-        bg: "neutral.95"
-      },
-      _selected: {
-        textStyle: "body/lg/semibold",
-        bg: "background/selected"
-      }
-    },
-    itemIndicator: {
-      alignItems: "center",
-      color: "icon/interactive",
-      display: "flex",
-      justifyContent: "center",
-      width: "24",
-      height: "24"
-    },
-    itemGroupLabel: {
-      alignItems: "center",
-      display: "flex",
-      gap: "16",
-      py: "12",
-      px: "16"
-    },
+    ...n,
     control: {
-      pos: "relative",
-      width: "100%  "
+      position: "relative",
+      width: "100%"
     },
     searchInput: {
       border: "none",
@@ -138,7 +87,7 @@ const a = o({
       gap: "12",
       paddingInlineEnd: "24",
       paddingInlineStart: "16",
-      py: "20",
+      paddingBlock: "20",
       color: "text/primary",
       textStyle: "body/lg/regular",
       textDecoration: "none",
@@ -146,14 +95,14 @@ const a = o({
       cursor: "pointer",
       textAlign: "start",
       _hover: {
-        bg: "button/secondary/bg-hover",
+        background: "button/secondary/bg-hover",
         textDecoration: "none",
         _active: {
-          bg: "button/secondary/bg-active"
+          background: "button/secondary/bg-active"
         }
       },
       _active: {
-        bg: "button/secondary/bg-active"
+        background: "button/secondary/bg-active"
       },
       _focusVisible: {
         outlineOffset: "-3px"
@@ -162,23 +111,9 @@ const a = o({
   },
   variants: {
     size: {
+      lg: t.size.lg,
       md: {
-        item: {
-          py: "8",
-          px: "16",
-          textStyle: "body/md/regular",
-          _selected: {
-            textStyle: "body/md/semibold"
-          }
-        },
-        itemIndicator: {
-          width: "16",
-          height: "16"
-        },
-        itemGroupLabel: {
-          py: "12",
-          px: "16"
-        },
+        ...t.size.md,
         searchInput: {
           paddingBlock: "12",
           textStyle: "body/md/regular",
@@ -186,15 +121,14 @@ const a = o({
         },
         createItem: {
           color: "text/primary",
-          py: "16",
+          paddingBlock: "16",
           textStyle: "body/md/regular"
         },
         trigger: {
           textStyle: "body/md/regular",
-          py: e(9)
+          paddingBlock: e(9)
         }
-      },
-      lg: {}
+      }
     }
   },
   defaultVariants: {
@@ -202,5 +136,5 @@ const a = o({
   }
 });
 export {
-  a as selectSlotRecipe
+  c as selectSlotRecipe
 };

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

@@ -263,7 +263,6 @@ declare const slotRecipes: {
                 trigger: {
                     paddingBlock: "6";
                     textStyle?: "body/md/regular" | undefined;
-                    py?: string | undefined;
                 };
                 indicator: {
                     _icon: {
@@ -271,22 +270,6 @@ declare const slotRecipes: {
                         height: "16";
                     };
                 };
-                item?: {
-                    py: "8";
-                    px: "16";
-                    textStyle: "body/md/regular";
-                    _selected: {
-                        textStyle: "body/md/semibold";
-                    };
-                } | undefined;
-                itemIndicator?: {
-                    width: "16";
-                    height: "16";
-                } | undefined;
-                itemGroupLabel?: {
-                    py: "12";
-                    px: "16";
-                } | undefined;
                 searchInput?: {
                     paddingBlock: "12";
                     textStyle: "body/md/regular";
@@ -294,7 +277,7 @@ declare const slotRecipes: {
                 } | undefined;
                 createItem?: {
                     color: "text/primary";
-                    py: "16";
+                    paddingBlock: "16";
                     textStyle: "body/md/regular";
                 } | undefined;
             };
@@ -330,6 +313,16 @@ declare const slotRecipes: {
             };
         };
     }>;
+    combobox: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "input" | "label" | "root" | "item" | "itemIndicator" | "trigger" | "positioner" | "list" | "clearTrigger" | "control" | "itemText" | "itemGroup" | "itemGroupLabel" | "indicatorGroup" | "empty" | "emptyHelperText", {
+        size: {
+            md: {
+                input: import('@chakra-ui/react').SystemStyleObject;
+            };
+            lg: {
+                input: import('@chakra-ui/react').SystemStyleObject;
+            };
+        };
+    }>;
     emptyState: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "title" | "root" | "description" | "indicator", {
         colorScheme: {
             white: {
@@ -506,23 +499,8 @@ declare const slotRecipes: {
     }>;
     select: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "label" | "root" | "item" | "itemIndicator" | "trigger" | "positioner" | "indicator" | "list" | "clearTrigger" | "control" | "valueText" | "itemText" | "itemGroup" | "itemGroupLabel" | "indicatorGroup" | "searchInputGroup" | "searchInput" | "createItemContainer" | "createItem", {
         size: {
+            lg: Record<string, import('@chakra-ui/react').SystemStyleObject>;
             md: {
-                item: {
-                    py: "8";
-                    px: "16";
-                    textStyle: "body/md/regular";
-                    _selected: {
-                        textStyle: "body/md/semibold";
-                    };
-                };
-                itemIndicator: {
-                    width: "16";
-                    height: "16";
-                };
-                itemGroupLabel: {
-                    py: "12";
-                    px: "16";
-                };
                 searchInput: {
                     paddingBlock: "12";
                     textStyle: "body/md/regular";
@@ -530,15 +508,14 @@ declare const slotRecipes: {
                 };
                 createItem: {
                     color: "text/primary";
-                    py: "16";
+                    paddingBlock: "16";
                     textStyle: "body/md/regular";
                 };
                 trigger: {
                     textStyle: "body/md/regular";
-                    py: string;
+                    paddingBlock: string;
                 };
             };
-            lg: {};
         };
     }>;
     switch: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "root" | "indicator" | "control" | "thumb", {

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

@@ -1,49 +1,51 @@
 import e from "./Accordion.recipe.js";
-import t from "./ActionBar.recipe.js";
-import o from "./Alert.recipe.js";
+import o from "./ActionBar.recipe.js";
+import t from "./Alert.recipe.js";
 import r from "./Avatar.recipe.js";
 import i from "./Breadcrumb.recipe.js";
 import p from "./Card.recipe.js";
-import c from "./Checkbox.recipe.js";
-import m from "./DatePicker.recipe.js";
+import m from "./Checkbox.recipe.js";
+import c from "./Combobox.recipe.js";
+import l from "./DatePicker.recipe.js";
 import a from "./DatePickerSelect.recipe.js";
-import l from "./EmptyState.recipe.js";
-import S from "./ExpandableCard.recipe.js";
-import f from "./Field.recipe.js";
-import R from "./Fieldset.recipe.js";
-import d from "./NativeSelect.recipe.js";
-import b from "./NumberInput.recipe.js";
-import n from "./RadioGroup.recipe.js";
-import { selectSlotRecipe as s } from "./Select.recipe.js";
-import u from "./Switch.recipe.js";
+import S from "./EmptyState.recipe.js";
+import f from "./ExpandableCard.recipe.js";
+import R from "./Field.recipe.js";
+import d from "./Fieldset.recipe.js";
+import b from "./NativeSelect.recipe.js";
+import n from "./NumberInput.recipe.js";
+import s from "./RadioGroup.recipe.js";
+import { selectSlotRecipe as u } from "./Select.recipe.js";
+import x from "./Switch.recipe.js";
 import k from "./Table.recipe.js";
-import x from "./Tabs.recipe.js";
-import h from "./Tag.recipe.js";
-import v from "./Tooltip.recipe.js";
-const Q = {
-  actionBar: t,
+import h from "./Tabs.recipe.js";
+import v from "./Tag.recipe.js";
+import P from "./Tooltip.recipe.js";
+const U = {
+  actionBar: o,
   avatar: r,
   breadcrumb: i,
   card: p,
-  datePicker: m,
+  datePicker: l,
   datePickerSelect: a,
-  checkbox: c,
-  emptyState: l,
-  expandableCard: S,
-  field: f,
-  fieldset: R,
-  nativeSelect: d,
-  alert: o,
-  numberInput: b,
-  radioGroup: n,
-  select: s,
-  switch: u,
+  checkbox: m,
+  combobox: c,
+  emptyState: S,
+  expandableCard: f,
+  field: R,
+  fieldset: d,
+  nativeSelect: b,
+  alert: t,
+  numberInput: n,
+  radioGroup: s,
+  select: u,
+  switch: x,
   table: k,
-  tabs: x,
-  tag: h,
-  tooltip: v,
+  tabs: h,
+  tag: v,
+  tooltip: P,
   accordion: e
 };
 export {
-  Q as default
+  U as default
 };

package/dist/utilities/AssetSelectChevron.js

@@ -1,20 +1,28 @@
-import { jsx as e } from "react/jsx-runtime";
-import { Icon as t } from "@chakra-ui/react/icon";
-import { forwardRef as s } from "react";
-const l = s((o, r) => /* @__PURE__ */ e(
-  t,
+import { jsx as o } from "react/jsx-runtime";
+import { Icon as i } from "@chakra-ui/react/icon";
+import { forwardRef as l } from "react";
+const t = l((r, e) => /* @__PURE__ */ o(
+  i,
   {
     asChild: !0,
-    ref: r,
-    width: "24",
-    height: "24",
-    transition: "transform 0.2s ease",
+    ref: e,
+    transition: "0.2s ease",
     _open: {
       transform: "rotate(180deg)"
     },
+    _disabled: {
+      cursor: "not-allowed",
+      color: "icon/disabled"
+    },
     color: "icon/secondary",
-    ...o,
-    children: /* @__PURE__ */ e("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", children: /* @__PURE__ */ e(
+    _groupFocusWithin: {
+      color: "icon/primary"
+    },
+    _groupHover: {
+      color: "icon/primary"
+    },
+    ...r,
+    children: /* @__PURE__ */ o("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "24", height: "24", children: /* @__PURE__ */ o(
       "path",
       {
         fillRule: "evenodd",
@@ -25,7 +33,7 @@ const l = s((o, r) => /* @__PURE__ */ e(
     ) })
   }
 ));
-l.displayName = "AssetSelectChevron";
+t.displayName = "AssetSelectChevron";
 export {
-  l as default
+  t as default
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit-v2",
   "private": false,
-  "version": "0.3.140",
+  "version": "0.3.142",
   "description": "Bitrise Design System Components built with Chakra UI V3",
   "keywords": [
     "react",
@@ -56,14 +56,14 @@
   "devDependencies": {
     "@bitrise/eslint-plugin": "^4.1.0",
     "@chakra-ui/cli": "^3.34.0",
-    "@figma-export/cli": "^6.3.0",
-    "@figma-export/output-components-as-svg": "^6.2.4",
-    "@figma-export/transform-svg-with-svgo": "^6.2.4",
+    "@figma-export/cli": "^6.4.0",
+    "@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.2.15",
-    "@storybook/react-vite": "10.2.15",
+    "@storybook/addon-docs": "10.2.16",
+    "@storybook/react-vite": "10.2.16",
     "@svgr/plugin-jsx": "^8.1.0",
-    "@types/node": "^24.11.0",
+    "@types/node": "^24.12.0",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^5.1.4",
@@ -72,7 +72,7 @@
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "release-it": "^19.2.4",
-    "storybook": "10.2.15",
+    "storybook": "10.2.16",
     "tsx": "^4.21.0",
     "typescript": "^5.9.3",
     "vite": "^7.3.1",