@bitrise/bitkit-v2 0.3.106 → 0.3.108

package/dist/components/BitkitExpandableCard/BitkitExpandableCard.d.ts

@@ -13,8 +13,9 @@ type ControlledProps = {
 export type BitkitExpandableCardProps = Omit<CollapsibleRootProps, 'defaultOpen' | 'onOpenChange' | 'open'> & {
     children: ReactNode;
     icon?: ReactElement;
+    secdText?: ReactNode;
     size: 'md' | 'lg';
-    suffix?: string;
+    suffix?: ReactNode;
     title: ReactNode;
 } & (UncontrolledProps | ControlledProps);
 declare const BitkitExpandableCard: {

package/dist/components/BitkitExpandableCard/BitkitExpandableCard.js

@@ -1,27 +1,30 @@
 import { jsx as n, jsxs as o } from "react/jsx-runtime";
 import { Box as r } from "@chakra-ui/react/box";
-import { Card as g } from "@chakra-ui/react/card";
+import { Card as y } from "@chakra-ui/react/card";
 import { Collapsible as i } from "@chakra-ui/react/collapsible";
-import { useSlotRecipe as u } from "@chakra-ui/react/styled-system";
-import { Text as b } from "@chakra-ui/react/text";
-import y from "../../icons/24x24/IconChevronDown24.js";
-const k = (c) => {
-  const { children: a, defaultExpanded: d, expanded: p, icon: s, onChange: t, size: m = "lg", suffix: l, title: f, ...h } = c, e = u({ key: "expandableCard" })({ size: m }), x = t ? (C) => t(C.open) : void 0;
-  return /* @__PURE__ */ n(g.Root, { css: e.root, children: /* @__PURE__ */ o(i.Root, { defaultOpen: d, open: p, onOpenChange: x, ...h, children: [
+import { useSlotRecipe as b } from "@chakra-ui/react/styled-system";
+import { Text as d } from "@chakra-ui/react/text";
+import I from "../../icons/24x24/IconChevronDown24.js";
+const T = (a) => {
+  const { children: p, defaultExpanded: f, expanded: m, icon: s, onChange: t, secdText: l, size: x = "lg", suffix: c, title: h, ...g } = a, e = b({ key: "expandableCard" })({ size: x }), C = t ? (u) => t(u.open) : void 0;
+  return /* @__PURE__ */ n(y.Root, { css: e.root, children: /* @__PURE__ */ o(i.Root, { defaultOpen: f, open: m, onOpenChange: C, ...g, children: [
     /* @__PURE__ */ o(i.Trigger, { css: e.header, children: [
       /* @__PURE__ */ o(r, { display: "flex", alignItems: "center", gap: "8", children: [
         s && /* @__PURE__ */ n(r, { css: e.icon, children: s }),
-        f
+        /* @__PURE__ */ o(r, { display: "flex", alignItems: "flex-start", flexDirection: "column", children: [
+          h,
+          !!l && /* @__PURE__ */ n(d, { css: e.secdText, children: l })
+        ] })
       ] }),
       /* @__PURE__ */ o(r, { display: "flex", alignItems: "center", children: [
-        !!l && /* @__PURE__ */ n(b, { css: e.suffix, children: l }),
-        /* @__PURE__ */ n(y, { css: e.chevron })
+        !!c && /* @__PURE__ */ n(d, { css: e.suffix, children: c }),
+        /* @__PURE__ */ n(I, { css: e.chevron })
       ] })
     ] }),
-    /* @__PURE__ */ n(i.Content, { css: e.collapsible, children: /* @__PURE__ */ n(r, { css: e.body, children: a }) })
+    /* @__PURE__ */ n(i.Content, { css: e.collapsible, children: /* @__PURE__ */ n(r, { css: e.body, children: p }) })
   ] }) });
 };
-k.displayName = "BitkitExpandableCard";
+T.displayName = "BitkitExpandableCard";
 export {
-  k as default
+  T 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/ExpandableCard.recipe.d.ts

@@ -1,4 +1,4 @@
-declare const expandableCardSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"body" | "footer" | "header" | "title" | "icon" | "root" | "description" | "collapsible" | "suffix" | "chevron", {
+declare const expandableCardSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"body" | "footer" | "header" | "title" | "icon" | "root" | "description" | "collapsible" | "secdText" | "suffix" | "chevron", {
     size: {
         md: {
             header: {
@@ -6,12 +6,18 @@ declare const expandableCardSlotRecipe: import('@chakra-ui/react').SlotRecipeDef
                 paddingX: "16";
                 paddingY: "12";
             };
+            secdText: {
+                textStyle: "body/sm/regular";
+            };
         };
         lg: {
             header: {
                 textStyle: "body/lg/regular";
                 padding: "16";
             };
+            secdText: {
+                textStyle: "body/md/regular";
+            };
         };
     };
 }>;

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

@@ -2,7 +2,7 @@ import { cardAnatomy as e } from "@chakra-ui/react/anatomy";
 import { defineSlotRecipe as o } from "@chakra-ui/react/styled-system";
 const t = o({
   className: "expandable-card",
-  slots: [...e.keys(), "chevron", "collapsible", "icon", "suffix"],
+  slots: [...e.keys(), "chevron", "collapsible", "icon", "secdText", "suffix"],
   base: {
     root: {
       backgroundColor: "background/primary",
@@ -19,6 +19,9 @@ const t = o({
       },
       "&:hover:not(:active)": {
         backgroundColor: "background/hover"
+      },
+      _open: {
+        backgroundColor: "background/secondary"
       }
     },
     collapsible: {
@@ -46,6 +49,9 @@ const t = o({
     icon: {
       color: "icon/secondary"
     },
+    secdText: {
+      color: "text/secondary"
+    },
     suffix: {
       color: "text/secondary",
       mx: "16",
@@ -55,10 +61,12 @@ const t = o({
   variants: {
     size: {
       md: {
-        header: { textStyle: "body/md/regular", paddingX: "16", paddingY: "12" }
+        header: { textStyle: "body/md/regular", paddingX: "16", paddingY: "12" },
+        secdText: { textStyle: "body/sm/regular" }
       },
       lg: {
-        header: { textStyle: "body/lg/regular", padding: "16" }
+        header: { textStyle: "body/lg/regular", padding: "16" },
+        secdText: { textStyle: "body/md/regular" }
       }
     }
   },

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

@@ -72,7 +72,7 @@ declare const slotRecipes: {
             };
         };
     }>;
-    expandableCard: import('@chakra-ui/react').SlotRecipeDefinition<"body" | "footer" | "header" | "title" | "icon" | "root" | "description" | "collapsible" | "suffix" | "chevron", {
+    expandableCard: import('@chakra-ui/react').SlotRecipeDefinition<"body" | "footer" | "header" | "title" | "icon" | "root" | "description" | "collapsible" | "secdText" | "suffix" | "chevron", {
         size: {
             md: {
                 header: {
@@ -80,12 +80,18 @@ declare const slotRecipes: {
                     paddingX: "16";
                     paddingY: "12";
                 };
+                secdText: {
+                    textStyle: "body/sm/regular";
+                };
             };
             lg: {
                 header: {
                     textStyle: "body/lg/regular";
                     padding: "16";
                 };
+                secdText: {
+                    textStyle: "body/md/regular";
+                };
             };
         };
     }>;

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

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