@bitrise/bitkit-v2 0.3.160 → 0.3.162

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

@@ -0,0 +1,218 @@
+import { defineSlotRecipe as o } from "@chakra-ui/react/styled-system";
+var t = o({
+  className: "code-snippet",
+  slots: [
+    "root",
+    "content",
+    "copyButton",
+    "showMoreContainer",
+    "showMoreGradient",
+    "showMoreButton"
+  ],
+  base: {
+    root: { background: "background/secondary" },
+    content: {
+      flex: "1",
+      minWidth: 0
+    },
+    copyButton: {
+      background: "background/secondary",
+      color: "icon/secondary",
+      cursor: "pointer",
+      _hover: {
+        background: "background/hover",
+        color: "icon/primary",
+        _active: {
+          background: "background/active",
+          color: "icon/primary"
+        }
+      },
+      _active: {
+        background: "background/active",
+        color: "icon/primary"
+      },
+      _focusVisible: { outlineOffset: "-3px" }
+    }
+  },
+  variants: {
+    variant: {
+      inline: { root: {
+        alignItems: "center",
+        borderRadius: "2",
+        color: "text/body",
+        cursor: "pointer",
+        display: "inline-flex",
+        paddingBlock: "2",
+        paddingInline: "6",
+        userSelect: "none",
+        whiteSpace: "nowrap",
+        _hover: { background: "background/hover" },
+        _active: { background: "background/active" }
+      } },
+      single: {
+        root: {
+          alignItems: "center",
+          borderRadius: "4",
+          display: "flex",
+          height: "40",
+          isolation: "isolate",
+          overflow: "hidden",
+          whiteSpace: "nowrap"
+        },
+        content: {
+          alignItems: "center",
+          display: "flex",
+          height: "40",
+          overflow: "hidden",
+          paddingInlineStart: "16",
+          position: "relative",
+          _after: {
+            background: "linear-gradient(to left, var(--colors-background-secondary), transparent)",
+            content: '""',
+            height: "40",
+            pointerEvents: "none",
+            position: "absolute",
+            right: "0",
+            top: "0",
+            width: "8"
+          }
+        },
+        copyButton: {
+          flexShrink: "0",
+          padding: "12"
+        }
+      },
+      multi: {
+        root: {
+          borderRadius: "4",
+          display: "flex",
+          flexDirection: "column",
+          padding: "16",
+          position: "relative"
+        },
+        content: {
+          color: "text/body",
+          overflowY: "auto",
+          transition: "max-height 0.3s ease",
+          whiteSpace: "pre-wrap"
+        },
+        copyButton: {
+          borderRadius: "4",
+          overflow: "hidden",
+          padding: "8",
+          position: "absolute",
+          right: 0,
+          top: 0
+        },
+        showMoreContainer: {
+          alignItems: "center",
+          display: "flex",
+          justifyContent: "flex-end"
+        },
+        showMoreGradient: {
+          background: "linear-gradient(to top, var(--colors-background-secondary) 33%, transparent)",
+          borderBottomRadius: "4",
+          bottom: 0,
+          height: "40",
+          left: 0,
+          pointerEvents: "none",
+          position: "absolute",
+          right: 0
+        },
+        showMoreButton: {
+          alignItems: "center",
+          background: "background/secondary",
+          borderRadius: "4",
+          color: "text/secondary",
+          cursor: "pointer",
+          display: "flex",
+          gap: "4",
+          justifyContent: "center",
+          minWidth: "64",
+          paddingBlock: "8",
+          paddingInline: "12",
+          position: "relative",
+          textStyle: "comp/button/md",
+          _hover: {
+            background: "background/hover",
+            color: "text/primary",
+            _active: {
+              background: "background/active",
+              color: "text/primary",
+              overflow: "hidden"
+            }
+          },
+          _active: {
+            background: "background/active",
+            color: "text/primary",
+            overflow: "hidden"
+          },
+          _focusVisible: { outlineOffset: "-3px" }
+        }
+      }
+    },
+    size: {
+      md: {
+        root: { textStyle: "code/md" },
+        content: { textStyle: "code/md" }
+      },
+      lg: {
+        root: { textStyle: "code/lg" },
+        content: { textStyle: "code/lg" }
+      }
+    },
+    hasShowMore: {
+      true: {},
+      false: {}
+    },
+    isExpanded: {
+      true: {},
+      false: {}
+    }
+  },
+  compoundVariants: [
+    {
+      variant: "multi",
+      hasShowMore: !0,
+      css: { root: {
+        paddingBlockEnd: 0,
+        paddingInlineEnd: "8"
+      } }
+    },
+    {
+      variant: "multi",
+      hasShowMore: !0,
+      isExpanded: !1,
+      css: { showMoreContainer: {
+        bottom: 0,
+        left: 0,
+        position: "absolute",
+        right: 0
+      } }
+    },
+    {
+      variant: "multi",
+      hasShowMore: !0,
+      isExpanded: !0,
+      css: {
+        root: {
+          padding: 0,
+          paddingInlineEnd: 0
+        },
+        content: {
+          overflow: "auto",
+          padding: "16",
+          paddingBlockEnd: 0
+        },
+        showMoreContainer: { position: "relative" }
+      }
+    }
+  ],
+  defaultVariants: {
+    size: "lg",
+    variant: "single"
+  }
+});
+export {
+  t as default
+};

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

@@ -313,6 +313,158 @@ declare const slotRecipes: {
             };
         };
     }>;
+    codeSnippet: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "root" | "copyButton" | "showMoreContainer" | "showMoreGradient" | "showMoreButton", {
+        variant: {
+            inline: {
+                root: {
+                    alignItems: "center";
+                    borderRadius: "2";
+                    color: "text/body";
+                    cursor: "pointer";
+                    display: "inline-flex";
+                    paddingBlock: "2";
+                    paddingInline: "6";
+                    userSelect: "none";
+                    whiteSpace: "nowrap";
+                    _hover: {
+                        background: "background/hover";
+                    };
+                    _active: {
+                        background: "background/active";
+                    };
+                };
+            };
+            single: {
+                root: {
+                    alignItems: "center";
+                    borderRadius: "4";
+                    display: "flex";
+                    height: "40";
+                    isolation: "isolate";
+                    overflow: "hidden";
+                    whiteSpace: "nowrap";
+                };
+                content: {
+                    alignItems: "center";
+                    display: "flex";
+                    height: "40";
+                    overflow: "hidden";
+                    paddingInlineStart: "16";
+                    position: "relative";
+                    _after: {
+                        background: "linear-gradient(to left, var(--colors-background-secondary), transparent)";
+                        content: "\"\"";
+                        height: "40";
+                        pointerEvents: "none";
+                        position: "absolute";
+                        right: "0";
+                        top: "0";
+                        width: "8";
+                    };
+                };
+                copyButton: {
+                    flexShrink: "0";
+                    padding: "12";
+                };
+            };
+            multi: {
+                root: {
+                    borderRadius: "4";
+                    display: "flex";
+                    flexDirection: "column";
+                    padding: "16";
+                    position: "relative";
+                };
+                content: {
+                    color: "text/body";
+                    overflowY: "auto";
+                    transition: "max-height 0.3s ease";
+                    whiteSpace: "pre-wrap";
+                };
+                copyButton: {
+                    borderRadius: "4";
+                    overflow: "hidden";
+                    padding: "8";
+                    position: "absolute";
+                    right: number;
+                    top: number;
+                };
+                showMoreContainer: {
+                    alignItems: "center";
+                    display: "flex";
+                    justifyContent: "flex-end";
+                };
+                showMoreGradient: {
+                    background: "linear-gradient(to top, var(--colors-background-secondary) 33%, transparent)";
+                    borderBottomRadius: "4";
+                    bottom: number;
+                    height: "40";
+                    left: number;
+                    pointerEvents: "none";
+                    position: "absolute";
+                    right: number;
+                };
+                showMoreButton: {
+                    alignItems: "center";
+                    background: "background/secondary";
+                    borderRadius: "4";
+                    color: "text/secondary";
+                    cursor: "pointer";
+                    display: "flex";
+                    gap: "4";
+                    justifyContent: "center";
+                    minWidth: "64";
+                    paddingBlock: "8";
+                    paddingInline: "12";
+                    position: "relative";
+                    textStyle: "comp/button/md";
+                    _hover: {
+                        background: "background/hover";
+                        color: "text/primary";
+                        _active: {
+                            background: "background/active";
+                            color: "text/primary";
+                            overflow: "hidden";
+                        };
+                    };
+                    _active: {
+                        background: "background/active";
+                        color: "text/primary";
+                        overflow: "hidden";
+                    };
+                    _focusVisible: {
+                        outlineOffset: "-3px";
+                    };
+                };
+            };
+        };
+        size: {
+            md: {
+                root: {
+                    textStyle: "code/md";
+                };
+                content: {
+                    textStyle: "code/md";
+                };
+            };
+            lg: {
+                root: {
+                    textStyle: "code/lg";
+                };
+                content: {
+                    textStyle: "code/lg";
+                };
+            };
+        };
+        hasShowMore: {
+            true: {};
+            false: {};
+        };
+        isExpanded: {
+            true: {};
+            false: {};
+        };
+    }>;
     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: {

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

@@ -1,59 +1,61 @@
-import o from "./NumberInput.recipe.js";
-import e from "./Accordion.recipe.js";
+import e from "./NumberInput.recipe.js";
+import o from "./Accordion.recipe.js";
 import t from "./ActionBar.recipe.js";
 import r from "./Alert.recipe.js";
 import i from "./Avatar.recipe.js";
 import p from "./Breadcrumb.recipe.js";
 import m from "./Card.recipe.js";
 import c from "./Checkbox.recipe.js";
-import l from "./Combobox.recipe.js";
-import a from "./DatePicker.recipe.js";
-import { selectSlotRecipe as S } from "./Select.recipe.js";
-import f from "./DatePickerSelect.recipe.js";
-import R from "./Dialog.recipe.js";
-import d from "./EmptyState.recipe.js";
+import l from "./CodeSnippet.recipe.js";
+import a from "./Combobox.recipe.js";
+import S from "./DatePicker.recipe.js";
+import { selectSlotRecipe as f } from "./Select.recipe.js";
+import R from "./DatePickerSelect.recipe.js";
+import d from "./Dialog.recipe.js";
+import n from "./EmptyState.recipe.js";
 import b from "./ExpandableCard.recipe.js";
-import n from "./Field.recipe.js";
-import s from "./Fieldset.recipe.js";
-import u from "./Menu.recipe.js";
-import x from "./NativeSelect.recipe.js";
-import g from "./RadioGroup.recipe.js";
-import k from "./SegmentGroup.recipe.js";
-import v from "./SplitButton.recipe.js";
-import h from "./Switch.recipe.js";
-import B from "./Table.recipe.js";
-import G from "./Tabs.recipe.js";
-import P from "./Tag.recipe.js";
-import w from "./Tooltip.recipe.js";
-var oo = {
-  accordion: e,
+import s from "./Field.recipe.js";
+import u from "./Fieldset.recipe.js";
+import x from "./Menu.recipe.js";
+import g from "./NativeSelect.recipe.js";
+import k from "./RadioGroup.recipe.js";
+import v from "./SegmentGroup.recipe.js";
+import h from "./SplitButton.recipe.js";
+import B from "./Switch.recipe.js";
+import G from "./Table.recipe.js";
+import P from "./Tabs.recipe.js";
+import w from "./Tag.recipe.js";
+import y from "./Tooltip.recipe.js";
+var te = {
+  accordion: o,
   actionBar: t,
   alert: r,
   avatar: i,
   breadcrumb: p,
   card: m,
   checkbox: c,
-  combobox: l,
-  datePicker: a,
-  datePickerSelect: f,
-  dialog: R,
-  emptyState: d,
+  codeSnippet: l,
+  combobox: a,
+  datePicker: S,
+  datePickerSelect: R,
+  dialog: d,
+  emptyState: n,
   expandableCard: b,
-  field: n,
-  fieldset: s,
-  menu: u,
-  nativeSelect: x,
-  numberInput: o,
-  radioGroup: g,
-  segmentGroup: k,
-  select: S,
-  splitButton: v,
-  switch: h,
-  table: B,
-  tabs: G,
-  tag: P,
-  tooltip: w
+  field: s,
+  fieldset: u,
+  menu: x,
+  nativeSelect: g,
+  numberInput: e,
+  radioGroup: k,
+  segmentGroup: v,
+  select: f,
+  splitButton: h,
+  switch: B,
+  table: G,
+  tabs: P,
+  tag: w,
+  tooltip: y
 };
 export {
-  oo as default
+  te as default
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit-v2",
   "private": false,
-  "version": "0.3.160",
+  "version": "0.3.162",
   "description": "Bitrise Design System Components built with Chakra UI V3",
   "keywords": [
     "react",
@@ -64,11 +64,11 @@
     "@storybook/addon-mcp": "^0.4.2",
     "@storybook/react-vite": "10.3.3",
     "@svgr/plugin-jsx": "^8.1.0",
-    "@types/node": "^24.12.0",
+    "@types/node": "^25.5.0",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^6.0.1",
-    "axios": "^1.13.6",
+    "axios": "^1.14.0",
     "es-toolkit": "^1.45.1",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
@@ -76,9 +76,9 @@
     "storybook": "10.3.3",
     "tsx": "^4.21.0",
     "typescript": "^6.0.2",
-    "vite": "^8.0.2",
+    "vite": "^8.0.3",
     "vite-plugin-dts": "^4.5.4",
-    "vite-plugin-svgr": "^4.5.0"
+    "vite-plugin-svgr": "^5.0.0"
   },
   "dependencies": {
     "@chakra-ui/react": "^3.34.0",