@bitrise/bitkit-v2 0.3.143 → 0.3.145

package/dist/components/BitkitActionMenu/BitkitActionMenu.d.ts

@@ -0,0 +1,28 @@
+import { MenuItemGroupProps, MenuItemProps, MenuRootProps } from '@chakra-ui/react/menu';
+import { ReactNode } from 'react';
+import { BitkitIconComponent } from '../../icons';
+interface BitkitMenuRootProps extends Omit<MenuRootProps, 'children'> {
+    trigger: ReactNode;
+    children?: ReactNode;
+}
+interface BitkitMenuItemProps extends MenuItemProps {
+    danger?: boolean;
+    secondaryText?: ReactNode;
+    icon?: BitkitIconComponent;
+}
+interface BitkitMenuGroupProps extends MenuItemGroupProps {
+    label: ReactNode;
+}
+declare const BitkitActionMenu: {
+    Root: {
+        ({ trigger, children, ...props }: BitkitMenuRootProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Separator: {
+        (): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Item: import('react').ForwardRefExoticComponent<BitkitMenuItemProps & import('react').RefAttributes<HTMLDivElement>>;
+    Group: import('react').ForwardRefExoticComponent<BitkitMenuGroupProps & import('react').RefAttributes<HTMLDivElement>>;
+};
+export default BitkitActionMenu;

package/dist/theme/common/ComboboxAndSelect.common.js

@@ -6,7 +6,7 @@ const i = {
     borderColor: "border/minimal",
     zIndex: "select",
     overflowY: "auto",
-    boxShadow: "large",
+    boxShadow: "elevation/lg",
     _open: {
       animationStyle: "slide-fade-in",
       animationDuration: "fast"

package/dist/theme/common/InputAndTextarea.common.js

@@ -8,7 +8,7 @@ const e = {
   color: "input/text/inputValue",
   textStyle: "body/lg/regular",
   width: "100%",
-  boxShadow: "inner",
+  boxShadow: "inset/field",
   transition: "border 200ms",
   _placeholder: {
     color: "input/text/placeholder"

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

@@ -1,46 +1,5 @@
 declare const semanticTokens: {
     colors: Record<string, any>;
-    shadows: {
-        formFocus: {
-            value: {
-                _light: string;
-            };
-        };
-        inner: {
-            value: {
-                _light: string;
-            };
-        };
-        innerSmall: {
-            value: {
-                _light: string;
-            };
-        };
-        large: {
-            value: {
-                _light: string;
-            };
-        };
-        medium: {
-            value: {
-                _light: string;
-            };
-        };
-        outline: {
-            value: {
-                _light: string;
-            };
-        };
-        small: {
-            value: {
-                _light: string;
-            };
-        };
-        tooltip: {
-            value: {
-                _light: string;
-            };
-        };
-    };
+    shadows: Record<string, any>;
 };
 export default semanticTokens;

package/dist/theme/semantic-tokens/shadows.d.ts

@@ -1,43 +1,2 @@
-declare const shadows: {
-    formFocus: {
-        value: {
-            _light: string;
-        };
-    };
-    inner: {
-        value: {
-            _light: string;
-        };
-    };
-    innerSmall: {
-        value: {
-            _light: string;
-        };
-    };
-    large: {
-        value: {
-            _light: string;
-        };
-    };
-    medium: {
-        value: {
-            _light: string;
-        };
-    };
-    outline: {
-        value: {
-            _light: string;
-        };
-    };
-    small: {
-        value: {
-            _light: string;
-        };
-    };
-    tooltip: {
-        value: {
-            _light: string;
-        };
-    };
-};
+declare const shadows: Record<string, any>;
 export default shadows;

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

@@ -1,46 +1,38 @@
 import { defineSemanticTokens as e } from "@chakra-ui/react/styled-system";
-const l = e.shadows({
-  formFocus: {
-    value: {
-      _light: "0 0.125rem 0.1875rem 0 rgba(0, 0, 0, 0.1) inset, 0 0 0 3px var(--colors-purple-70)"
-    }
-  },
-  inner: {
-    value: {
-      _light: "0 0.125rem 0.1875rem 0 rgba(0, 0, 0, 0.1) inset"
-    }
-  },
-  innerSmall: {
-    value: {
-      _light: "0 0.0625rem 0.125rem 0 rgba(0, 0, 0, 0.1) inset"
-    }
-  },
-  large: {
-    value: {
-      _light: "0 0.125rem 1.5rem 0 rgba(0, 0, 0, 0.08)"
-    }
-  },
-  medium: {
-    value: {
-      _light: "0 0.125rem 0.75rem 0 rgba(0, 0, 0, 0.06)"
-    }
-  },
-  outline: {
-    value: {
-      _light: "0 0 0 3px var(--colors-purple-70)"
-    }
-  },
-  small: {
-    value: {
-      _light: "0 0.125rem 0.25rem 0 rgba(0, 0, 0, 0.06)"
-    }
-  },
-  tooltip: {
-    value: {
-      _light: "0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.2)"
-    }
-  }
-});
+import { withSlashes as r } from "../themeUtils.js";
+const t = e.shadows(
+  r({
+    elevation: {
+      lg: {
+        value: {
+          _light: "0 0.125rem 1.5rem 0 rgba(0, 0, 0, 0.08)"
+        }
+      },
+      md: {
+        value: {
+          _light: "0 0.125rem 0.75rem 0 rgba(0, 0, 0, 0.06)"
+        }
+      },
+      sm: {
+        value: {
+          _light: "0 0.125rem 0.25rem 0 rgba(0, 0, 0, 0.06)"
+        }
+      },
+      tooltip: {
+        value: {
+          _light: "0 0.0625rem 0.1875rem 0 rgba(0, 0, 0, 0.2)"
+        }
+      }
+    },
+    inset: {
+      field: {
+        value: {
+          _light: "0 0.125rem 0.1875rem 0 rgba(0, 0, 0, 0.1) inset"
+        }
+      }
+    }
+  })
+);
 export {
-  l as default
+  t as default
 };

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

@@ -1,6 +1,6 @@
 import { actionBarAnatomy as t } from "@chakra-ui/react/anatomy";
-import { defineSlotRecipe as a } from "@chakra-ui/react/styled-system";
-const o = a({
+import { defineSlotRecipe as n } from "@chakra-ui/react/styled-system";
+const o = n({
   slots: t.keys(),
   className: "action-bar",
   base: {
@@ -16,7 +16,7 @@ const o = a({
     content: {
       display: "flex",
       alignItems: "center",
-      boxShadow: "large",
+      boxShadow: "elevation/lg",
       pointerEvents: "auto",
       border: "1px solid",
       borderColor: "border/minimal",

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

@@ -30,7 +30,7 @@ const o = t({
     },
     badgeContainer: {
       display: "flex",
-      boxShadow: "small",
+      boxShadow: "elevation/sm",
       position: "absolute",
       alignItems: "center",
       justifyContent: "center",

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

@@ -58,7 +58,7 @@ const o = {
       border: "1px solid",
       borderColor: "border/minimal",
       borderRadius: "4",
-      boxShadow: "large",
+      boxShadow: "elevation/lg",
       outline: "none"
     },
     overflowMenuItem: {

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

@@ -3,7 +3,7 @@ declare const cardSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"b
         true: {
             root: {
                 borderColor: "border/minimal";
-                boxShadow: "small";
+                boxShadow: "elevation/sm";
             };
         };
         false: {

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

@@ -15,7 +15,7 @@ const e = r({
       true: {
         root: {
           borderColor: "border/minimal",
-          boxShadow: "small"
+          boxShadow: "elevation/sm"
         }
       },
       false: {

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

@@ -26,7 +26,7 @@ const i = a({
     content: {
       backgroundColor: "background/primary",
       borderRadius: "8",
-      boxShadow: "large",
+      boxShadow: "elevation/lg",
       minWidth: r(312),
       paddingBlock: "24",
       paddingInline: "16"

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

@@ -0,0 +1,20 @@
+declare const menuSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "separator" | "item" | "itemIndicator" | "trigger" | "arrow" | "arrowTip" | "positioner" | "indicator" | "itemText" | "itemGroup" | "itemGroupLabel" | "contextTrigger" | "triggerItem" | "itemCommand" | "itemHelper", {
+    size: {
+        lg: {
+            item: {
+                paddingY: "12";
+                textStyle: "body/lg/regular";
+            };
+        };
+        md: {
+            item: {
+                _icon: {
+                    marginTop: "2";
+                };
+                paddingY: "8";
+                textStyle: "body/md/regular";
+            };
+        };
+    };
+}>;
+export default menuSlotRecipe;

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

@@ -0,0 +1,115 @@
+import { menuAnatomy as t } from "@chakra-ui/react/anatomy";
+import { defineSlotRecipe as a } from "@chakra-ui/react/styled-system";
+const e = {
+  background: "button/secondary/bg-active",
+  _icon: {
+    color: "icon/primary"
+  }
+}, o = {
+  background: "button/danger-secondary/bg-active",
+  color: "button/danger-secondary/fg-active",
+  _icon: {
+    color: "button/danger-secondary/fg-active"
+  }
+}, r = a({
+  className: "menu",
+  slots: [...t.keys(), "itemHelper"],
+  variants: {
+    size: {
+      lg: {
+        item: {
+          paddingY: "12",
+          textStyle: "body/lg/regular"
+        }
+      },
+      md: {
+        item: {
+          _icon: {
+            marginTop: "2"
+          },
+          paddingY: "8",
+          textStyle: "body/md/regular"
+        }
+      }
+    }
+  },
+  base: {
+    content: {
+      paddingY: "8",
+      border: "1px solid",
+      borderColor: "border/minimal",
+      _focusVisible: { outline: "none" },
+      boxShadow: "elevation/lg",
+      background: "background/primary",
+      maxHeight: "var(--available-height)",
+      _open: {
+        animationStyle: "slide-fade-in",
+        animationDuration: "fast"
+      },
+      _closed: {
+        animationStyle: "slide-fade-out",
+        animationDuration: "faster"
+      }
+    },
+    itemHelper: {
+      textStyle: "body/sm/regular",
+      color: "text/secondary"
+    },
+    item: {
+      _icon: {
+        color: "icon/secondary",
+        _active: {
+          color: "icon/primary"
+        }
+      },
+      display: "flex",
+      gap: "12",
+      userSelect: "none",
+      flexDirection: "row",
+      paddingLeft: "16",
+      paddingRight: "24",
+      "&[data-danger]": {
+        color: "button/danger-secondary/fg",
+        _icon: {
+          color: "button/danger-secondary/fg"
+        },
+        _active: o,
+        _highlighted: {
+          background: "button/danger-secondary/bg-hover",
+          color: "button/danger-secondary/fg-hover",
+          _active: o,
+          _icon: {
+            color: "button/danger-secondary/fg-hover"
+          }
+        }
+      },
+      _active: e,
+      _highlighted: {
+        background: "button/secondary/bg-hover",
+        _active: e
+      }
+    },
+    itemGroupLabel: {
+      textStyle: "heading/h6",
+      color: "text/tertiary",
+      paddingTop: "12",
+      paddingLeft: "16",
+      paddingRight: "24",
+      paddingBottom: "6",
+      display: "flex",
+      gap: "12",
+      flexDirection: "row",
+      alignItems: "center"
+    },
+    separator: {
+      color: "border/minimal",
+      marginY: "8"
+    }
+  },
+  defaultVariants: {
+    size: "lg"
+  }
+});
+export {
+  r as default
+};

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

@@ -1,7 +1,7 @@
 import { switchAnatomy as i } from "@chakra-ui/react/anatomy";
 import { defineSlotRecipe as e } from "@chakra-ui/react/styled-system";
 import { rem as t } from "../themeUtils.js";
-const o = e({
+const r = e({
   slots: i.keys(),
   className: "switch",
   base: {
@@ -60,7 +60,7 @@ const o = e({
       width: "var(--switch-height)",
       height: "var(--switch-height)",
       bg: "input/toggle/slideOff",
-      boxShadow: "small",
+      boxShadow: "elevation/sm",
       scale: "0.8",
       borderRadius: "inherit",
       transitionProperty: "translate",
@@ -112,5 +112,5 @@ const o = e({
   }
 });
 export {
-  o as default
+  r as default
 };

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

@@ -1,7 +1,7 @@
 import { tooltipAnatomy as t } from "@chakra-ui/react/anatomy";
-import { defineSlotRecipe as r } from "@chakra-ui/react/styled-system";
+import { defineSlotRecipe as a } from "@chakra-ui/react/styled-system";
 import { rem as o } from "../themeUtils.js";
-const e = r({
+const e = a({
   className: "tooltip",
   slots: t.keys(),
   base: {
@@ -12,7 +12,7 @@ const e = r({
       "--tooltip-bg": "colors.background.contrast",
       backgroundColor: "var(--tooltip-bg)",
       color: "text/on-contrast",
-      boxShadow: "tooltip",
+      boxShadow: "elevation/tooltip",
       maxWidth: o(320),
       zIndex: "tooltip",
       transformOrigin: "var(--transform-origin)",

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

@@ -190,7 +190,7 @@ declare const slotRecipes: {
             true: {
                 root: {
                     borderColor: "border/minimal";
-                    boxShadow: "small";
+                    boxShadow: "elevation/sm";
                 };
             };
             false: {
@@ -673,5 +673,24 @@ declare const slotRecipes: {
         };
     }>;
     accordion: import('@chakra-ui/react').SlotRecipeDefinition<"icon" | "suffix" | "root" | "item" | "itemTrigger" | "itemContent" | "itemIndicator" | "itemBody" | "secdText", import('@chakra-ui/react').SlotRecipeVariantRecord<"icon" | "suffix" | "root" | "item" | "itemTrigger" | "itemContent" | "itemIndicator" | "itemBody" | "secdText">>;
+    menu: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "separator" | "item" | "itemIndicator" | "trigger" | "arrow" | "arrowTip" | "positioner" | "indicator" | "itemText" | "itemGroup" | "itemGroupLabel" | "contextTrigger" | "triggerItem" | "itemCommand" | "itemHelper", {
+        size: {
+            lg: {
+                item: {
+                    paddingY: "12";
+                    textStyle: "body/lg/regular";
+                };
+            };
+            md: {
+                item: {
+                    _icon: {
+                        marginTop: "2";
+                    };
+                    paddingY: "8";
+                    textStyle: "body/md/regular";
+                };
+            };
+        };
+    }>;
 };
 export default slotRecipes;

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

@@ -12,16 +12,17 @@ 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 h from "./Tabs.recipe.js";
-import v from "./Tag.recipe.js";
-import P from "./Tooltip.recipe.js";
-const U = {
+import b from "./Menu.recipe.js";
+import n from "./NativeSelect.recipe.js";
+import s from "./NumberInput.recipe.js";
+import u from "./RadioGroup.recipe.js";
+import { selectSlotRecipe as x } from "./Select.recipe.js";
+import k from "./Switch.recipe.js";
+import h from "./Table.recipe.js";
+import v from "./Tabs.recipe.js";
+import P from "./Tag.recipe.js";
+import g from "./Tooltip.recipe.js";
+const W = {
   actionBar: o,
   avatar: r,
   breadcrumb: i,
@@ -34,18 +35,19 @@ const U = {
   expandableCard: f,
   field: R,
   fieldset: d,
-  nativeSelect: b,
+  nativeSelect: n,
   alert: t,
-  numberInput: n,
-  radioGroup: s,
-  select: u,
-  switch: x,
-  table: k,
-  tabs: h,
-  tag: v,
-  tooltip: P,
-  accordion: e
+  numberInput: s,
+  radioGroup: u,
+  select: x,
+  switch: k,
+  table: h,
+  tabs: v,
+  tag: P,
+  tooltip: g,
+  accordion: e,
+  menu: b
 };
 export {
-  U as default
+  W as default
 };

package/dist/theme/themeUtils.d.ts

@@ -1,5 +1,5 @@
 import { TextProps } from '@chakra-ui/react/text';
-export declare const flattenColorTokens: (object: object, prefix?: string) => Record<string, any>;
+export declare const flattenTokens: (object: object, prefix?: string) => Record<string, any>;
 export declare function withSlashes(object: Record<string, any>): Record<string, any>;
 /**
  *

package/dist/theme/themeUtils.js

@@ -1,25 +1,25 @@
 import { isPlainObject as u } from "es-toolkit";
-const i = (e, r = "") => {
-  const n = {}, c = Object.keys(e);
-  for (let s = 0; s < c.length; s++) {
-    const o = c[s], t = e[o], l = r ? `${r}/${o}` : o;
+const l = (e, c = "") => {
+  const n = {}, o = Object.keys(e);
+  for (let s = 0; s < o.length; s++) {
+    const r = o[s], t = e[r], i = c ? `${c}/${r}` : r;
     if (u(t) && Object.keys(t).length > 0 && Object.keys(t)[0] !== "value") {
-      Object.assign(n, i(t, l));
+      Object.assign(n, l(t, i));
       continue;
     }
-    n[l] = t;
+    n[i] = t;
   }
   return n;
 };
 function k(e) {
   return {
     ...e,
-    ...i(e)
+    ...l(e)
   };
 }
 const y = (e) => `${e / 16}rem`;
 export {
-  i as flattenColorTokens,
+  l as flattenTokens,
   y as rem,
   k as withSlashes
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit-v2",
   "private": false,
-  "version": "0.3.143",
+  "version": "0.3.145",
   "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.2.16",
-    "@storybook/react-vite": "10.2.16",
+    "@storybook/addon-docs": "10.2.17",
+    "@storybook/react-vite": "10.2.17",
     "@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.2.16",
+    "storybook": "10.2.17",
     "tsx": "^4.21.0",
     "typescript": "^5.9.3",
     "vite": "^7.3.1",