@bitrise/bitkit-v2 0.3.142 → 0.3.144

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/components/BitkitControlButton/BitkitControlButton.js

@@ -1,19 +1,19 @@
-import { jsx as t } from "react/jsx-runtime";
+import { jsx as o } from "react/jsx-runtime";
 import { Skeleton as d } from "@chakra-ui/react/skeleton";
 import { useRecipe as f, chakra as k } from "@chakra-ui/react/styled-system";
 import { forwardRef as u } from "react";
 import x from "../BitkitTooltip/BitkitTooltip.js";
-const B = u((r, n) => {
-  const { icon: s, isDanger: l, label: i, size: o = "sm", state: e, tooltipProps: a, ...c } = r, m = f({ key: "controlButton" }), p = o === "xxs" || o === "xs" ? "16" : "24";
-  return /* @__PURE__ */ t(x, { text: i, ...a, children: /* @__PURE__ */ t(
+const B = u((r, s) => {
+  const { icon: n, isDanger: l, label: i, size: t = "sm", state: e, tooltipProps: a, ...c } = r, m = f({ key: "controlButton" }), p = t === "xxs" || t === "xs" ? "16" : "24";
+  return /* @__PURE__ */ o(x, { showArrow: !1, size: "sm", text: i, ...a, children: /* @__PURE__ */ o(
     k.button,
     {
-      ref: n,
+      ref: s,
       "aria-label": i,
       disabled: e === "disabled" || e === "skeleton",
       ...c,
-      css: m({ isDanger: l, size: o }),
-      children: /* @__PURE__ */ t(d, { loading: e === "skeleton", children: /* @__PURE__ */ t(s, { size: p }) })
+      css: m({ isDanger: l, size: t }),
+      children: /* @__PURE__ */ o(d, { loading: e === "skeleton", children: /* @__PURE__ */ o(n, { size: p }) })
     }
   ) });
 });

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

@@ -5,6 +5,10 @@ declare const controlButtonRecipe: import('@chakra-ui/react').RecipeDefinition<{
             _hover: {
                 background: "button/tertiary/bg-hover";
                 color: "button/secondary/fg-hover";
+                _active: {
+                    background: "button/tertiary/bg-active";
+                    color: "button/secondary/fg-active";
+                };
             };
             _active: {
                 background: "button/tertiary/bg-active";
@@ -19,6 +23,10 @@ declare const controlButtonRecipe: import('@chakra-ui/react').RecipeDefinition<{
             _hover: {
                 background: "button/danger-secondary/bg-hover";
                 color: "button/danger-secondary/fg-hover";
+                _active: {
+                    background: "button/danger-secondary/bg-active";
+                    color: "button/danger-secondary/fg-active";
+                };
             };
             _active: {
                 background: "button/danger-secondary/bg-active";

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

@@ -1,5 +1,5 @@
-import { defineRecipe as e } from "@chakra-ui/react/styled-system";
-const r = e({
+import { defineRecipe as o } from "@chakra-ui/react/styled-system";
+const a = o({
   className: "control-button",
   base: {
     display: "inline-flex",
@@ -24,7 +24,11 @@ const r = e({
         color: "button/secondary/fg",
         _hover: {
           background: "button/tertiary/bg-hover",
-          color: "button/secondary/fg-hover"
+          color: "button/secondary/fg-hover",
+          _active: {
+            background: "button/tertiary/bg-active",
+            color: "button/secondary/fg-active"
+          }
         },
         _active: {
           background: "button/tertiary/bg-active",
@@ -38,7 +42,11 @@ const r = e({
         color: "button/danger-secondary/fg",
         _hover: {
           background: "button/danger-secondary/bg-hover",
-          color: "button/danger-secondary/fg-hover"
+          color: "button/danger-secondary/fg-hover",
+          _active: {
+            background: "button/danger-secondary/bg-active",
+            color: "button/danger-secondary/fg-active"
+          }
         },
         _active: {
           background: "button/danger-secondary/bg-active",
@@ -63,5 +71,5 @@ const r = e({
   }
 });
 export {
-  r as default
+  a as default
 };

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

@@ -69,6 +69,10 @@ declare const recipes: {
                 _hover: {
                     background: "button/tertiary/bg-hover";
                     color: "button/secondary/fg-hover";
+                    _active: {
+                        background: "button/tertiary/bg-active";
+                        color: "button/secondary/fg-active";
+                    };
                 };
                 _active: {
                     background: "button/tertiary/bg-active";
@@ -83,6 +87,10 @@ declare const recipes: {
                 _hover: {
                     background: "button/danger-secondary/bg-hover";
                     color: "button/danger-secondary/fg-hover";
+                    _active: {
+                        background: "button/danger-secondary/bg-active";
+                        color: "button/danger-secondary/fg-active";
+                    };
                 };
                 _active: {
                     background: "button/danger-secondary/bg-active";

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"
+  }
+}, i = 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: "large",
+      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 {
+  i as default
+};

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

@@ -1,10 +1,13 @@
 import { tooltipAnatomy as t } from "@chakra-ui/react/anatomy";
-import { defineSlotRecipe as a } from "@chakra-ui/react/styled-system";
+import { defineSlotRecipe as r } from "@chakra-ui/react/styled-system";
 import { rem as o } from "../themeUtils.js";
-const e = a({
+const e = r({
   className: "tooltip",
   slots: t.keys(),
   base: {
+    positioner: {
+      pointerEvents: "none"
+    },
     content: {
       "--tooltip-bg": "colors.background.contrast",
       backgroundColor: "var(--tooltip-bg)",

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

@@ -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/package.json

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