@bitrise/bitkit-v2 0.3.104 → 0.3.106

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

@@ -1,5 +1,5 @@
 import { defineRecipe as e } from "@chakra-ui/react/styled-system";
-const o = e({
+const t = e({
   className: "color-button",
   base: {
     colorPalette: "neutral",
@@ -24,10 +24,25 @@ const o = e({
       lg: { height: "48", paddingInline: "16", textStyle: "comp/button/lg" }
     }
   },
+  compoundVariants: [
+    {
+      colorPalette: "white",
+      css: {
+        color: "text.on-color",
+        borderColor: "border.inverse",
+        "&:hover": {
+          backgroundColor: "white.a15"
+        },
+        "&:active": {
+          backgroundColor: "white.a30"
+        }
+      }
+    }
+  ],
   defaultVariants: {
     size: "sm"
   }
 });
 export {
-  o as default
+  t as default
 };

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

@@ -505,6 +505,53 @@ const r = l.colors(
             _light: "{colors.turquoise.95}"
           }
         }
+      },
+      white: {
+        a00: {
+          value: {
+            _light: "rgba(255, 255, 255, 0)"
+          }
+        },
+        a10: {
+          value: {
+            _light: "rgba(255, 255, 255, 0.1)"
+          }
+        },
+        a15: {
+          value: {
+            _light: "rgba(255, 255, 255, 0.15)"
+          }
+        },
+        a20: {
+          value: {
+            _light: "rgba(255, 255, 255, 0.2)"
+          }
+        },
+        a30: {
+          value: {
+            _light: "rgba(255, 255, 255, 0.3)"
+          }
+        },
+        a50: {
+          value: {
+            _light: "rgba(255, 255, 255, 0.5)"
+          }
+        },
+        a80: {
+          value: {
+            _light: "rgba(255, 255, 255, 0.8)"
+          }
+        },
+        a90: {
+          value: {
+            _light: "rgba(255, 255, 255, 0.9)"
+          }
+        },
+        a100: {
+          value: {
+            _light: "rgb(255, 255, 255)"
+          }
+        }
       }
     },
     background: {

package/dist/theme/slot-recipes/Select.recipe.d.ts

@@ -0,0 +1,32 @@
+export declare const selectSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "label" | "trigger" | "positioner" | "list" | "root" | "control" | "indicator" | "valueText" | "clearTrigger" | "item" | "itemText" | "itemIndicator" | "itemGroup" | "itemGroupLabel" | "indicatorGroup" | "searchInputGroup" | "searchInput", {
+    size: {
+        md: {
+            item: {
+                py: string | number;
+                px: string | number;
+                textStyle: "body/md/regular";
+                _selected: {
+                    textStyle: "body/md/semibold";
+                };
+            };
+            itemIndicator: {
+                width: string | number;
+                height: string | number;
+            };
+            itemGroupLabel: {
+                py: string | number;
+                px: string | number;
+            };
+            searchInput: {
+                paddingBlock: string | number;
+                textStyle: "body/md/regular";
+                '--input-height': string | number;
+            };
+            trigger: {
+                textStyle: "body/md/regular";
+                py: string | number;
+            };
+        };
+        lg: {};
+    };
+}>;

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

@@ -0,0 +1,175 @@
+import { selectAnatomy as t } from "@chakra-ui/react/anatomy";
+import { defineSlotRecipe as o } from "@chakra-ui/react/styled-system";
+import { rem as e } from "../themeUtils.js";
+const l = o({
+  className: "select",
+  slots: [...t.keys(), "searchInputGroup", "searchInput"],
+  base: {
+    trigger: {
+      display: "flex",
+      alignItems: "center",
+      borderWidth: "1px",
+      borderColor: "border/strong",
+      bg: "bg.muted",
+      color: "input/text/inputValue",
+      gap: e(8),
+      justifyContent: "space-between",
+      px: e(16),
+      py: e(8),
+      borderRadius: e(4),
+      userSelect: "none",
+      textAlign: "start",
+      focusVisibleRing: "inside",
+      width: "100%",
+      _placeholderShown: {
+        color: "text/secondary"
+      },
+      _disabled: {
+        color: "text/disabled",
+        bg: "background/disabled"
+      },
+      _invalid: {
+        borderColor: "border/error"
+      },
+      _readOnly: {
+        bg: "background/disabled"
+      }
+    },
+    indicatorGroup: {
+      display: "flex",
+      alignItems: "center",
+      gap: "1",
+      pos: "absolute",
+      insetEnd: "0",
+      top: "0",
+      bottom: "0",
+      px: e(16),
+      pointerEvents: "none"
+    },
+    indicator: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      color: "icon/secondary",
+      _disabled: {
+        color: "icon/disabled"
+      },
+      _readOnly: {
+        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: e(12),
+      cursor: "option",
+      justifyContent: "space-between",
+      flex: "1",
+      px: e(16),
+      py: e(12),
+      textAlign: "start",
+      textStyle: "body/lg/regular",
+      _highlighted: {
+        bg: "neutral.95"
+      },
+      _selected: {
+        textStyle: "body/lg/semibold",
+        bg: "background/selected"
+      }
+    },
+    itemIndicator: {
+      alignItems: "center",
+      color: "icon/interactive",
+      display: "flex",
+      justifyContent: "center",
+      width: e(24),
+      height: e(24)
+    },
+    itemGroupLabel: {
+      alignItems: "center",
+      display: "flex",
+      gap: e(16),
+      py: e(12),
+      px: e(16)
+    },
+    control: {
+      pos: "relative",
+      width: "100%  "
+    },
+    searchInput: {
+      border: "none",
+      boxShadow: "none",
+      outline: "none",
+      paddingRight: e(16),
+      paddingBlock: e(16),
+      textStyle: "body/lg/regular",
+      "--input-height": e(32)
+    },
+    searchInputGroup: {
+      borderBottom: "1px solid",
+      borderColor: "border/minimal",
+      appearance: "none",
+      paddingLeft: e(16)
+    },
+    valueText: {
+      height: e(32),
+      lineHeight: e(32)
+    }
+  },
+  variants: {
+    size: {
+      md: {
+        item: {
+          py: e(8),
+          px: e(16),
+          textStyle: "body/md/regular",
+          _selected: {
+            textStyle: "body/md/semibold"
+          }
+        },
+        itemIndicator: {
+          width: e(16),
+          height: e(16)
+        },
+        itemGroupLabel: {
+          py: e(12),
+          px: e(16)
+        },
+        searchInput: {
+          paddingBlock: e(12),
+          textStyle: "body/md/regular",
+          "--input-height": e(24)
+        },
+        trigger: {
+          textStyle: "body/md/regular",
+          py: e(4)
+        }
+      },
+      lg: {}
+    }
+  },
+  defaultVariants: {
+    size: "lg"
+  }
+});
+export {
+  l as selectSlotRecipe
+};

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

@@ -226,6 +226,38 @@ declare const slotRecipes: {
             };
         };
     }>;
+    select: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "label" | "trigger" | "positioner" | "list" | "root" | "control" | "indicator" | "valueText" | "clearTrigger" | "item" | "itemText" | "itemIndicator" | "itemGroup" | "itemGroupLabel" | "indicatorGroup" | "searchInputGroup" | "searchInput", {
+        size: {
+            md: {
+                item: {
+                    py: string | number;
+                    px: string | number;
+                    textStyle: "body/md/regular";
+                    _selected: {
+                        textStyle: "body/md/semibold";
+                    };
+                };
+                itemIndicator: {
+                    width: string | number;
+                    height: string | number;
+                };
+                itemGroupLabel: {
+                    py: string | number;
+                    px: string | number;
+                };
+                searchInput: {
+                    paddingBlock: string | number;
+                    textStyle: "body/md/regular";
+                    '--input-height': string | number;
+                };
+                trigger: {
+                    textStyle: "body/md/regular";
+                    py: string | number;
+                };
+            };
+            lg: {};
+        };
+    }>;
     switch: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "root" | "control" | "indicator" | "thumb", {
         size: {
             sm: {

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

@@ -1,5 +1,5 @@
-import t from "./ActionBar.recipe.js";
-import e from "./Alert.recipe.js";
+import e from "./ActionBar.recipe.js";
+import t from "./Alert.recipe.js";
 import o from "./Card.recipe.js";
 import i from "./Checkbox.recipe.js";
 import r from "./EmptyState.recipe.js";
@@ -8,12 +8,13 @@ import m from "./Field.recipe.js";
 import c from "./Fieldset.recipe.js";
 import l from "./NativeSelect.recipe.js";
 import { numberInputSlotRecipe as a } from "./NumberInput.recipe.js";
-import f from "./Switch.recipe.js";
-import S from "./Tabs.recipe.js";
-import R from "./Tag.recipe.js";
+import { selectSlotRecipe as f } from "./Select.recipe.js";
+import S from "./Switch.recipe.js";
+import R from "./Tabs.recipe.js";
+import s from "./Tag.recipe.js";
 import d from "./Tooltip.recipe.js";
-const j = {
-  actionBar: t,
+const z = {
+  actionBar: e,
   card: o,
   checkbox: i,
   emptyState: r,
@@ -21,13 +22,14 @@ const j = {
   field: m,
   fieldset: c,
   nativeSelect: l,
-  alert: e,
+  alert: t,
   numberInput: a,
-  switch: f,
-  tabs: S,
-  tag: R,
+  select: f,
+  switch: S,
+  tabs: R,
+  tag: s,
   tooltip: d
 };
 export {
-  j as default
+  z as default
 };

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

@@ -1,12 +1,30 @@
 export declare const COLOR_PALETTES: {
     white: {
-        strong: {
+        a00: {
             value: string;
         };
-        subtle: {
+        a10: {
             value: string;
         };
-        moderate: {
+        a15: {
+            value: string;
+        };
+        a20: {
+            value: string;
+        };
+        a30: {
+            value: string;
+        };
+        a50: {
+            value: string;
+        };
+        a80: {
+            value: string;
+        };
+        a90: {
+            value: string;
+        };
+        a100: {
             value: string;
         };
     };
@@ -572,13 +590,31 @@ declare const colors: {
         };
     };
     white: {
-        strong: {
+        a00: {
             value: string;
         };
-        subtle: {
+        a10: {
             value: string;
         };
-        moderate: {
+        a15: {
+            value: string;
+        };
+        a20: {
+            value: string;
+        };
+        a30: {
+            value: string;
+        };
+        a50: {
+            value: string;
+        };
+        a80: {
+            value: string;
+        };
+        a90: {
+            value: string;
+        };
+        a100: {
             value: string;
         };
     };

package/dist/theme/tokens/colors.js

@@ -1,14 +1,32 @@
 import { defineTokens as e } from "@chakra-ui/react/styled-system";
 const l = {
   white: {
-    strong: {
-      value: "{colors.sys.fg.on-color}"
+    a00: {
+      value: "{colors.sys.white.a00}"
     },
-    subtle: {
-      value: "{colors.sys.fg.on-color/15}"
+    a10: {
+      value: "{colors.sys.white.a10}"
     },
-    moderate: {
-      value: "{colors.sys.fg.on-color/30}"
+    a15: {
+      value: "{colors.sys.white.a15}"
+    },
+    a20: {
+      value: "{colors.sys.white.a20}"
+    },
+    a30: {
+      value: "{colors.sys.white.a30}"
+    },
+    a50: {
+      value: "{colors.sys.white.a50}"
+    },
+    a80: {
+      value: "{colors.sys.white.a80}"
+    },
+    a90: {
+      value: "{colors.sys.white.a90}"
+    },
+    a100: {
+      value: "{colors.sys.white.a100}"
     }
   },
   neutral: {

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

@@ -123,13 +123,31 @@ declare const tokens: {
             };
         };
         white: {
-            strong: {
+            a00: {
                 value: string;
             };
-            subtle: {
+            a10: {
                 value: string;
             };
-            moderate: {
+            a15: {
+                value: string;
+            };
+            a20: {
+                value: string;
+            };
+            a30: {
+                value: string;
+            };
+            a50: {
+                value: string;
+            };
+            a80: {
+                value: string;
+            };
+            a90: {
+                value: string;
+            };
+            a100: {
                 value: string;
             };
         };
@@ -812,6 +830,9 @@ declare const tokens: {
         popover: {
             value: number;
         };
+        select: {
+            value: number;
+        };
         tooltip: {
             value: number;
         };

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

@@ -23,6 +23,9 @@ declare const zIndex: {
     popover: {
         value: number;
     };
+    select: {
+        value: number;
+    };
     tooltip: {
         value: number;
     };

package/dist/theme/tokens/zIndex.js

@@ -24,8 +24,11 @@ const a = e.zIndex({
   popover: {
     value: 1400
   },
-  tooltip: {
+  select: {
     value: 1500
+  },
+  tooltip: {
+    value: 1600
   }
 });
 export {

package/package.json

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