@bitrise/bitkit-v2 0.3.107 → 0.3.109

package/dist/components/BitkitField/BitkitField.js

@@ -1,28 +1,28 @@
 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 { Field as r } from "@chakra-ui/react/field";
+import { Text as p } from "@chakra-ui/react/text";
+import { forwardRef as T } from "react";
 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: [
-    n || o ? /* @__PURE__ */ c(t.Label, { children: [
+import b from "../BitkitTooltip/BitkitTooltip.js";
+const y = T((m, x) => {
+  const { counterText: o, children: s, disabled: f, errorText: t, helperText: l, label: n, optional: a, tooltip: d, warningText: i, ...h } = m;
+  return /* @__PURE__ */ c(r.Root, { disabled: f, required: !a, ref: x, ...h, children: [
+    n || o ? /* @__PURE__ */ c(r.Label, { children: [
       n,
       " ",
-      p && /* @__PURE__ */ e(
-        t.RequiredIndicator,
+      a && /* @__PURE__ */ e(
+        r.RequiredIndicator,
         {
-          fallback: /* @__PURE__ */ e(d, { as: "span", color: "input/text/helper", textStyle: "body/md/regular", children: "(optional)" })
+          fallback: /* @__PURE__ */ e(p, { as: "span", textStyle: "body/md/regular", children: "(optional)" })
         }
       ),
-      !!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 })
+      !!d && /* @__PURE__ */ e(b, { text: d ?? "", children: /* @__PURE__ */ e(u, { color: "icon/tertiary" }) }),
+      o && /* @__PURE__ */ e(p, { as: "span", marginInlineStart: "auto", textStyle: "comp/input/helperText", children: o })
     ] }) : null,
-    h,
-    !!l && !r && !i && /* @__PURE__ */ e(t.HelperText, { children: l }),
-    !!i && !r && /* @__PURE__ */ e(t.HelperText, { color: "text/body", children: i }),
-    !!r && /* @__PURE__ */ e(t.ErrorText, { children: r })
+    s,
+    !!l && !t && !i && /* @__PURE__ */ e(r.HelperText, { children: l }),
+    !!i && !t && /* @__PURE__ */ e(r.HelperText, { color: "text/body", children: i }),
+    !!t && /* @__PURE__ */ e(r.ErrorText, { children: t })
   ] });
 });
 y.displayName = "BitkitField";

package/dist/components/BitkitSelect/BitkitSelect.js

@@ -1,86 +1,86 @@
-import { jsx as r, jsxs as n } from "react/jsx-runtime";
-import { Box as b } from "@chakra-ui/react/box";
-import { createListCollection as F } from "@chakra-ui/react/collection";
+import { jsx as e, jsxs as l } from "react/jsx-runtime";
+import { createListCollection as k } from "@chakra-ui/react/collection";
 import { Portal as O } from "@chakra-ui/react/portal";
-import { Select as e } from "@chakra-ui/react/select";
-import { forwardRef as j } from "react";
-import D from "../../icons/16x16/IconChevronDown16.js";
-import E from "../../icons/16x16/IconErrorCircleFilled16.js";
-import L from "../../icons/16x16/IconWarningYellow16.js";
-import R from "../../icons/24x24/IconChevronDown24.js";
-import W from "../../icons/24x24/IconErrorCircleFilled24.js";
-import Y from "../../icons/24x24/IconWarningYellow24.js";
-import z from "../BitkitField/BitkitField.js";
-import G from "../BitkitSelectMenu/BitkitSelectMenu.js";
-const H = j((d, s) => {
+import { Select as r } from "@chakra-ui/react/select";
+import { forwardRef as b } from "react";
+import F from "../../icons/16x16/IconErrorCircleFilled16.js";
+import j from "../../icons/16x16/IconWarningYellow16.js";
+import E from "../../icons/24x24/IconErrorCircleFilled24.js";
+import L from "../../icons/24x24/IconWarningYellow24.js";
+import R from "../../utilities/AssetSelectChevron.js";
+import W from "../BitkitField/BitkitField.js";
+import Y from "../BitkitSelectMenu/BitkitSelectMenu.js";
+const z = b((d, h) => {
   const {
-    contentProps: h,
-    defaultValue: l,
+    contentProps: s,
+    defaultValue: n,
     errorText: a,
-    hasSearch: m,
-    helperText: p,
+    hasSearch: p,
+    helperText: m,
     isLoading: g,
     items: f,
     label: u,
-    onSearchChange: v,
-    onValueChange: I,
+    onSearchChange: S,
+    onValueChange: v,
     optional: C,
-    placeholder: S,
-    selectProps: w,
-    size: o = "md",
-    state: t,
-    tooltip: x,
-    triggerProps: B,
+    placeholder: I,
+    selectProps: x,
+    size: t = "md",
+    state: o,
+    tooltip: w,
+    triggerProps: y,
     value: c,
-    warningText: P,
-    ...T
-  } = d, V = t === "error" || !!a, k = F({
+    warningText: B,
+    ...P
+  } = d, T = o === "error" || !!a, V = k({
     items: f,
     groupBy: (i) => i.group || ""
   });
-  return /* @__PURE__ */ r(
-    z,
+  return /* @__PURE__ */ e(
+    W,
     {
-      disabled: t === "disabled",
+      disabled: o === "disabled",
       errorText: a,
-      helperText: p,
-      invalid: V,
+      helperText: m,
+      invalid: T,
       label: u,
       optional: C,
-      readOnly: t === "readOnly",
-      ref: s,
-      tooltip: x,
-      warningText: P,
-      ...T,
-      children: /* @__PURE__ */ n(
-        e.Root,
+      readOnly: o === "readOnly",
+      ref: h,
+      tooltip: w,
+      warningText: B,
+      ...P,
+      children: /* @__PURE__ */ l(
+        r.Root,
         {
-          collection: k,
-          size: o,
-          ...w,
-          defaultValue: l ? [l] : void 0,
-          onValueChange: (i) => I?.(i.value[0]),
+          collection: V,
+          size: t,
+          ...x,
+          defaultValue: n ? [n] : void 0,
+          onValueChange: (i) => v?.(i.value[0]),
           value: c ? [c] : void 0,
           children: [
-            /* @__PURE__ */ r(e.HiddenSelect, {}),
-            /* @__PURE__ */ n(e.Control, { children: [
-              /* @__PURE__ */ r(e.Trigger, { ...B, children: /* @__PURE__ */ r(e.ValueText, { placeholder: S || "Select option" }) }),
-              /* @__PURE__ */ n(e.IndicatorGroup, { children: [
-                t === "error" && /* @__PURE__ */ r(e.Indicator, { children: o === "lg" ? /* @__PURE__ */ r(W, { color: "icon/negative" }) : /* @__PURE__ */ r(E, { color: "icon/negative", height: "16", width: "16" }) }),
-                t === "warning" && /* @__PURE__ */ r(e.Indicator, { children: o === "lg" ? /* @__PURE__ */ r(Y, {}) : /* @__PURE__ */ r(L, { height: "16", width: "16" }) }),
-                /* @__PURE__ */ r(e.Indicator, { children: /* @__PURE__ */ r(e.Context, { children: (i) => {
-                  const y = i.open;
-                  return /* @__PURE__ */ r(b, { transform: y ? "rotate(180deg)" : "rotate(0deg)", transition: "transform 0.2s ease", children: o === "lg" ? /* @__PURE__ */ r(R, {}) : /* @__PURE__ */ r(D, {}) });
-                } }) })
+            /* @__PURE__ */ e(r.HiddenSelect, {}),
+            /* @__PURE__ */ l(r.Control, { children: [
+              /* @__PURE__ */ e(r.Trigger, { ...y, children: /* @__PURE__ */ e(
+                r.ValueText,
+                {
+                  placeholder: I || o === "readOnly" ? "(not selected)" : "Select an option"
+                }
+              ) }),
+              /* @__PURE__ */ l(r.IndicatorGroup, { children: [
+                o === "error" && /* @__PURE__ */ e(r.Indicator, { children: t === "lg" ? /* @__PURE__ */ e(E, { color: "icon/negative" }) : /* @__PURE__ */ e(F, { color: "icon/negative", height: "16", width: "16" }) }),
+                o === "warning" && /* @__PURE__ */ e(r.Indicator, { children: t === "lg" ? /* @__PURE__ */ e(L, {}) : /* @__PURE__ */ e(j, { height: "16", width: "16" }) }),
+                /* @__PURE__ */ e(r.Indicator, { children: /* @__PURE__ */ e(r.Context, { children: (i) => /* @__PURE__ */ e(R, { isOpen: i.open }) }) })
               ] })
             ] }),
-            /* @__PURE__ */ r(O, { children: /* @__PURE__ */ r(e.Positioner, { children: /* @__PURE__ */ r(
-              G,
+            /* @__PURE__ */ e(O, { children: /* @__PURE__ */ e(r.Positioner, { children: /* @__PURE__ */ e(
+              Y,
               {
-                contentProps: h,
+                contentProps: s,
                 isLoading: g,
-                ...m ? { hasSearch: !0, onSearchChange: v } : { hasSearch: !1 },
-                size: o
+                ...p ? { hasSearch: !0, onSearchChange: S } : { hasSearch: !1 },
+                size: t
               }
             ) }) })
           ]
@@ -89,7 +89,7 @@ const H = j((d, s) => {
     }
   );
 });
-H.displayName = "BitkitSelect";
+z.displayName = "BitkitSelect";
 export {
-  H as default
+  z as default
 };

package/dist/components/BitkitSelectMenu/BitkitSelectMenu.js

@@ -1,57 +1,44 @@
 import { jsxs as o, jsx as e } from "react/jsx-runtime";
-import { Box as l } from "@chakra-ui/react/box";
+import { Box as a } from "@chakra-ui/react/box";
 import { Input as g } from "@chakra-ui/react/input";
-import { InputGroup as S } from "@chakra-ui/react/input-group";
-import { useSelectContext as x, Select as n } from "@chakra-ui/react/select";
+import { InputGroup as x } from "@chakra-ui/react/input-group";
+import { useSelectContext as S, Select as i } from "@chakra-ui/react/select";
 import { Separator as y } from "@chakra-ui/react/separator";
+import { Spinner as C } from "@chakra-ui/react/spinner";
 import { useSlotRecipe as k } from "@chakra-ui/react/styled-system";
 import { Text as s } from "@chakra-ui/react/text";
-import { forwardRef as C } from "react";
-import G from "../../icons/24x24/IconMagnifier24.js";
-import b from "../../icons/16x16/IconMagnifier16.js";
-import L from "../../icons/24x24/IconSpinnerPurple24.js";
-import M from "../../icons/16x16/IconSpinnerPurple16.js";
-import j from "../../icons/24x24/IconCheck24.js";
-import v from "../../icons/16x16/IconCheck16.js";
-const B = C((m, a) => {
-  const { contentProps: p = {}, hasSearch: f = !1, isLoading: d = !1, onSearchChange: h, size: i } = m, { collection: u } = x(), r = k({ key: "select" })({ size: i });
-  return /* @__PURE__ */ o(n.Content, { css: r.content, ref: a, ...p, children: [
+import { forwardRef as G } from "react";
+import b from "../../icons/24x24/IconMagnifier24.js";
+import v from "../../icons/16x16/IconMagnifier16.js";
+import L from "../../icons/24x24/IconCheck24.js";
+import M from "../../icons/16x16/IconCheck16.js";
+const j = G((m, l) => {
+  const { contentProps: p = {}, hasSearch: f = !1, isLoading: d = !1, onSearchChange: h, size: c } = m, { collection: u } = S(), r = k({ key: "select" })({ size: c });
+  return /* @__PURE__ */ o(i.Content, { css: r.content, ref: l, ...p, children: [
     f && /* @__PURE__ */ e(
-      S,
+      x,
       {
-        startElement: i === "lg" ? /* @__PURE__ */ e(G, { color: "icon/tertiary" }) : /* @__PURE__ */ e(b, { color: "icon/tertiary" }),
+        startElement: c === "lg" ? /* @__PURE__ */ e(b, { color: "icon/tertiary" }) : /* @__PURE__ */ e(v, { color: "icon/tertiary" }),
         css: r.searchInputGroup,
         children: /* @__PURE__ */ e(g, { placeholder: "Search...", css: r.searchInput, onChange: (t) => h?.(t.target.value) })
       }
     ),
-    /* @__PURE__ */ e(l, { overflowY: "auto", children: d ? /* @__PURE__ */ o(l, { display: "flex", alignItems: "center", gap: "12", justifyContent: "left", css: r.item, children: [
-      /* @__PURE__ */ e(
-        l,
-        {
-          style: {
-            animation: "spin 1s linear infinite",
-            "@keyframes spin": {
-              "0%": { transform: "rotate(0deg)" },
-              "100%": { transform: "rotate(360deg)" }
-            }
-          },
-          children: i === "lg" ? /* @__PURE__ */ e(L, {}) : /* @__PURE__ */ e(M, {})
-        }
-      ),
+    /* @__PURE__ */ e(a, { overflowY: "auto", children: d ? /* @__PURE__ */ o(a, { display: "flex", alignItems: "center", gap: "12", justifyContent: "left", css: r.item, children: [
+      /* @__PURE__ */ e(C, { variant: "purple" }),
       /* @__PURE__ */ e(s, { color: "text/secondary", textStyle: "body/md/regular", children: "Loading..." })
-    ] }) : u.group().map(([t, I]) => /* @__PURE__ */ o(n.ItemGroup, { children: [
-      t && /* @__PURE__ */ o(n.ItemGroupLabel, { css: r.itemGroupLabel, children: [
+    ] }) : u.group().map(([t, I]) => /* @__PURE__ */ o(i.ItemGroup, { children: [
+      t && /* @__PURE__ */ o(i.ItemGroupLabel, { css: r.itemGroupLabel, children: [
         /* @__PURE__ */ e(s, { color: "text/tertiary", flexShrink: "0", textStyle: "heading/h6", children: t }),
         /* @__PURE__ */ e(y, { flex: "1" })
       ] }),
-      I.map((c) => /* @__PURE__ */ o(n.Item, { css: r.item, item: c, ref: a, children: [
-        c.label,
-        /* @__PURE__ */ e(n.ItemIndicator, { children: i === "lg" ? /* @__PURE__ */ e(j, { css: r.itemIndicator }) : /* @__PURE__ */ e(v, { css: r.itemIndicator }) })
-      ] }, c.value))
+      I.map((n) => /* @__PURE__ */ o(i.Item, { css: r.item, item: n, ref: l, children: [
+        n.label,
+        /* @__PURE__ */ e(i.ItemIndicator, { children: c === "lg" ? /* @__PURE__ */ e(L, { css: r.itemIndicator }) : /* @__PURE__ */ e(M, { css: r.itemIndicator }) })
+      ] }, n.value))
     ] }, t)) })
   ] });
 });
-B.displayName = "BitkitSelectMenu";
+j.displayName = "BitkitSelectMenu";
 export {
-  B as default
+  j as default
 };

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

@@ -232,6 +232,53 @@ const r = l.colors(
           }
         }
       },
+      indigo: {
+        base: {
+          value: {
+            _light: "{colors.indigo.50}"
+          }
+        },
+        dark: {
+          value: {
+            _light: "{colors.indigo.20}"
+          }
+        },
+        emphasized: {
+          value: {
+            _light: "{colors.indigo.30}"
+          }
+        },
+        strong: {
+          value: {
+            _light: "{colors.indigo.40}"
+          }
+        },
+        bold: {
+          value: {
+            _light: "{colors.indigo.60}"
+          }
+        },
+        muted: {
+          value: {
+            _light: "{colors.indigo.80}"
+          }
+        },
+        moderate: {
+          value: {
+            _light: "{colors.indigo.90}"
+          }
+        },
+        subtle: {
+          value: {
+            _light: "{colors.indigo.93}"
+          }
+        },
+        minimal: {
+          value: {
+            _light: "{colors.indigo.95}"
+          }
+        }
+      },
       blue: {
         base: {
           value: {

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

@@ -15,7 +15,7 @@ const l = o({
       gap: e(8),
       justifyContent: "space-between",
       px: e(16),
-      py: e(8),
+      py: e(11),
       borderRadius: e(4),
       userSelect: "none",
       textAlign: "start",
@@ -38,7 +38,7 @@ const l = o({
     indicatorGroup: {
       display: "flex",
       alignItems: "center",
-      gap: "1",
+      gap: e(8),
       pos: "absolute",
       insetEnd: "0",
       top: "0",
@@ -87,6 +87,7 @@ const l = o({
       py: e(12),
       textAlign: "start",
       textStyle: "body/lg/regular",
+      lineHeight: e(24),
       _highlighted: {
         bg: "neutral.95"
       },
@@ -128,10 +129,6 @@ const l = o({
       borderColor: "border/minimal",
       appearance: "none",
       paddingLeft: e(16)
-    },
-    valueText: {
-      height: e(32),
-      lineHeight: e(32)
     }
   },
   variants: {
@@ -160,7 +157,7 @@ const l = o({
         },
         trigger: {
           textStyle: "body/md/regular",
-          py: e(4)
+          py: e(9)
         }
       },
       lg: {}

package/dist/theme/tokens/colors.d.ts

@@ -143,6 +143,62 @@ export declare const COLOR_PALETTES: {
             value: string;
         };
     };
+    indigo: {
+        '20': {
+            value: string;
+        };
+        '30': {
+            value: string;
+        };
+        '40': {
+            value: string;
+        };
+        '50': {
+            value: string;
+        };
+        '60': {
+            value: string;
+        };
+        '80': {
+            value: string;
+        };
+        '90': {
+            value: string;
+        };
+        '93': {
+            value: string;
+        };
+        '95': {
+            value: string;
+        };
+        base: {
+            value: string;
+        };
+        bold: {
+            value: string;
+        };
+        dark: {
+            value: string;
+        };
+        emphasized: {
+            value: string;
+        };
+        minimal: {
+            value: string;
+        };
+        moderate: {
+            value: string;
+        };
+        muted: {
+            value: string;
+        };
+        strong: {
+            value: string;
+        };
+        subtle: {
+            value: string;
+        };
+    };
     red: {
         '10': {
             value: string;
@@ -733,6 +789,62 @@ declare const colors: {
             value: string;
         };
     };
+    indigo: {
+        '20': {
+            value: string;
+        };
+        '30': {
+            value: string;
+        };
+        '40': {
+            value: string;
+        };
+        '50': {
+            value: string;
+        };
+        '60': {
+            value: string;
+        };
+        '80': {
+            value: string;
+        };
+        '90': {
+            value: string;
+        };
+        '93': {
+            value: string;
+        };
+        '95': {
+            value: string;
+        };
+        base: {
+            value: string;
+        };
+        bold: {
+            value: string;
+        };
+        dark: {
+            value: string;
+        };
+        emphasized: {
+            value: string;
+        };
+        minimal: {
+            value: string;
+        };
+        moderate: {
+            value: string;
+        };
+        muted: {
+            value: string;
+        };
+        strong: {
+            value: string;
+        };
+        subtle: {
+            value: string;
+        };
+    };
     red: {
         '10': {
             value: string;

package/dist/theme/tokens/colors.js

@@ -144,6 +144,44 @@ const l = {
       value: "{colors.sys.purple.subtle}"
     }
   },
+  indigo: {
+    20: { value: "#2d2363" },
+    30: { value: "#423786" },
+    40: { value: "#5a50b2" },
+    50: { value: "#6d65d6" },
+    60: { value: "#8281ec" },
+    80: { value: "#b7bffc" },
+    90: { value: "#cdd5fe" },
+    93: { value: "#e5e9fa" },
+    95: { value: "#f1f4fd" },
+    base: {
+      value: "{colors.sys.indigo}"
+    },
+    bold: {
+      value: "{colors.sys.indigo.bold}"
+    },
+    dark: {
+      value: "{colors.sys.indigo.dark}"
+    },
+    emphasized: {
+      value: "{colors.sys.indigo.emphasized}"
+    },
+    minimal: {
+      value: "{colors.sys.indigo.minimal}"
+    },
+    moderate: {
+      value: "{colors.sys.indigo.moderate}"
+    },
+    muted: {
+      value: "{colors.sys.indigo.muted}"
+    },
+    strong: {
+      value: "{colors.sys.indigo.strong}"
+    },
+    subtle: {
+      value: "{colors.sys.indigo.subtle}"
+    }
+  },
   red: {
     10: {
       value: "#47060c"
@@ -587,11 +625,11 @@ const l = {
       value: "#fff"
     }
   }
-}, s = e.colors({
+}, u = e.colors({
   ...l,
   brand: a
 });
 export {
   l as COLOR_PALETTES,
-  s as default
+  u as default
 };

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

@@ -266,6 +266,62 @@ declare const tokens: {
                 value: string;
             };
         };
+        indigo: {
+            '20': {
+                value: string;
+            };
+            '30': {
+                value: string;
+            };
+            '40': {
+                value: string;
+            };
+            '50': {
+                value: string;
+            };
+            '60': {
+                value: string;
+            };
+            '80': {
+                value: string;
+            };
+            '90': {
+                value: string;
+            };
+            '93': {
+                value: string;
+            };
+            '95': {
+                value: string;
+            };
+            base: {
+                value: string;
+            };
+            bold: {
+                value: string;
+            };
+            dark: {
+                value: string;
+            };
+            emphasized: {
+                value: string;
+            };
+            minimal: {
+                value: string;
+            };
+            moderate: {
+                value: string;
+            };
+            muted: {
+                value: string;
+            };
+            strong: {
+                value: string;
+            };
+            subtle: {
+                value: string;
+            };
+        };
         red: {
             '10': {
                 value: string;

package/dist/utilities/AssetSelectChevron.d.ts

@@ -0,0 +1,5 @@
+export type AssetSelectChevronProps = {
+    isOpen: boolean;
+};
+declare const AssetSelectChevron: ({ isOpen }: AssetSelectChevronProps) => import("react/jsx-runtime").JSX.Element;
+export default AssetSelectChevron;

package/dist/utilities/AssetSelectChevron.js

@@ -0,0 +1,7 @@
+import { jsx as r } from "react/jsx-runtime";
+import { Box as e } from "@chakra-ui/react/box";
+import o from "../icons/24x24/IconSelectChevron24.js";
+const m = ({ isOpen: t }) => /* @__PURE__ */ r(e, { transform: t ? "rotate(180deg)" : "rotate(0deg)", transition: "transform 0.2s ease", children: /* @__PURE__ */ r(o, {}) });
+export {
+  m as default
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit-v2",
   "private": false,
-  "version": "0.3.107",
+  "version": "0.3.109",
   "description": "Bitrise Design System Components built with Chakra UI V3",
   "keywords": [
     "react",