@bitrise/bitkit-v2 0.3.441 → 0.3.443

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

@@ -2292,7 +2292,7 @@ declare const slotRecipes: {
             };
             'in-progress': {
                 statusIcon: {
-                    color: "color/yellow/bold";
+                    color: "icon/warning";
                 };
             };
             neutral: {
@@ -2705,24 +2705,38 @@ declare const slotRecipes: {
                 list: {
                     borderBlockEnd: "1px solid";
                     borderColor: "border/regular";
+                    '&:not([data-overflowing]) > .chakra-tabs__list > .chakra-tabs__trigger': {
+                        flex: {
+                            baseOnly: "1";
+                        };
+                        justifyContent: {
+                            baseOnly: "center";
+                        };
+                    };
                 };
                 trigger: {
                     bottom: "-1px";
                     display: "flex";
                     alignItems: "center";
-                    gap: "8";
+                    gap: "12";
                     paddingBlockStart: "12";
                     paddingBlockEnd: `${number}rem`;
                     borderBlockEnd: "2px solid transparent";
                     _selected: {
                         color: "text/primary";
+                        _hover: {
+                            '--tabs-icon-color': string;
+                        };
+                        '--tabs-icon-color': string;
                     };
                     _hover: {
                         borderColor: "border/hover";
                         color: "text/primary";
+                        '--tabs-icon-color': string;
                     };
                     _disabled: {
                         color: "text/disabled";
+                        '--tabs-icon-color': string;
                     };
                 };
                 moreTrigger: {
@@ -2734,7 +2748,6 @@ declare const slotRecipes: {
                     borderBlockEnd: "2px solid transparent";
                     _hover: {
                         backgroundColor: "background/hover";
-                        color: "text/primary";
                     };
                     _open: {
                         backgroundColor: "background/active";
@@ -2744,23 +2757,85 @@ declare const slotRecipes: {
             };
             contained: {
                 trigger: {
+                    display: "flex";
+                    alignItems: "flex-start";
+                    gap: "16";
                     paddingBlockStart: `${number}rem`;
                     paddingBlockEnd: "12";
                     backgroundColor: "background/tertiary";
                     borderBlockStart: "2px solid transparent";
+                    _after: {
+                        content: "\"\"";
+                        position: "absolute";
+                        insetBlock: number;
+                        insetInlineEnd: number;
+                        width: "1";
+                        backgroundColor: "border/regular";
+                    };
+                    '&:last-of-type': {
+                        _after: {
+                            display: "none";
+                        };
+                    };
                     _hover: {
                         backgroundColor: "background/active";
+                        _after: {
+                            backgroundColor: "border/strong";
+                        };
+                        _active: {
+                            backgroundColor: string;
+                            color: string;
+                            _after: {
+                                backgroundColor: string;
+                            };
+                            '--tabs-icon-color': string;
+                        };
+                        '--tabs-icon-color': string;
+                    };
+                    _active: {
+                        backgroundColor: string;
+                        color: string;
+                        _after: {
+                            backgroundColor: string;
+                        };
+                        '--tabs-icon-color': string;
                     };
                     _disabled: {
                         backgroundColor: "color/neutral/moderate";
                         color: "text/on-disabled";
+                        _after: {
+                            backgroundColor: "border/strong";
+                        };
+                        '--tabs-icon-color': string;
                     };
                     _selected: {
-                        backgroundColor: "background/primary";
-                        color: "text/selected";
+                        _after: {
+                            display: "none";
+                        };
                         _hover: {
-                            backgroundColor: "background/primary";
+                            _active: {
+                                backgroundColor: string;
+                                color: string;
+                                '--tabs-icon-color': string;
+                            };
+                            backgroundColor: string;
+                            color: string;
+                            '--tabs-icon-color': string;
+                        };
+                        _active: {
+                            backgroundColor: string;
+                            color: string;
+                            '--tabs-icon-color': string;
                         };
+                        _focusVisible: {
+                            _after: {
+                                display: "block";
+                                backgroundColor: "border/strong";
+                            };
+                        };
+                        backgroundColor: string;
+                        color: string;
+                        '--tabs-icon-color': string;
                     };
                 };
                 moreTrigger: {
@@ -2777,6 +2852,11 @@ declare const slotRecipes: {
                         color: "text/primary";
                     };
                 };
+                contentGroup: {
+                    backgroundColor: "background/primary";
+                    borderRadius: "4";
+                    borderStartStartRadius: number;
+                };
             };
             canvas: {
                 list: {
@@ -2788,7 +2868,7 @@ declare const slotRecipes: {
                     height: "40";
                     display: "flex";
                     alignItems: "center";
-                    gap: "8";
+                    gap: "4";
                     textStyle: "body/md/regular";
                     backgroundColor: "background/secondary";
                     paddingInline: "12";
@@ -2832,6 +2912,7 @@ declare const slotRecipes: {
                             backgroundColor: "color/neutral/moderate";
                             color: "text/on-disabled";
                         };
+                        '--tabs-icon-color': string;
                     };
                 };
                 moreTrigger: {
@@ -2855,8 +2936,15 @@ declare const slotRecipes: {
                         boxShadow: "inset 0 0 0 var(--focus-ring-width) var(--focus-ring-color)";
                     };
                 };
+                contentGroup: {
+                    backgroundColor: "background/primary";
+                };
             };
         };
+        size: {
+            lg: {};
+            md: {};
+        };
     }>;
     tag: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "root" | "closeTrigger" | "startElement" | "endElement", {
         colorVariant: {

package/dist/utilities/getTextContent.d.ts

@@ -0,0 +1,3 @@
+import { ReactNode } from 'react';
+/** The text a node renders, read from its elements' children. `String()` gives "[object Object]" for an element. */
+export declare const getTextContent: (node: ReactNode) => string;

package/dist/utilities/getTextContent.js

@@ -0,0 +1,14 @@
+import { isValidElement } from "react";
+//#region lib/utilities/getTextContent.ts
+/** The text a node renders, read from its elements' children. `String()` gives "[object Object]" for an element. */
+var getTextContent = (node) => {
+	if (typeof node === "string") return node;
+	if (typeof node === "number") return String(node);
+	if (Array.isArray(node)) return node.map(getTextContent).join("");
+	if (isValidElement(node)) return getTextContent(node.props.children);
+	return "";
+};
+//#endregion
+export { getTextContent };
+
+//# sourceMappingURL=getTextContent.js.map

package/dist/utilities/getTextContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getTextContent.js","names":[],"sources":["../../lib/utilities/getTextContent.ts"],"sourcesContent":["import { isValidElement, type ReactNode } from 'react';\n\n/** The text a node renders, read from its elements' children. `String()` gives \"[object Object]\" for an element. */\nexport const getTextContent = (node: ReactNode): string => {\n  if (typeof node === 'string') return node;\n  if (typeof node === 'number') return String(node);\n  if (Array.isArray(node)) return node.map(getTextContent).join('');\n  if (isValidElement(node)) return getTextContent((node.props as { children?: ReactNode }).children);\n  return '';\n};\n"],"mappings":";;;AAGA,IAAa,kBAAkB,SAA4B;CACzD,IAAI,OAAO,SAAS,UAAU,OAAO;CACrC,IAAI,OAAO,SAAS,UAAU,OAAO,OAAO,IAAI;CAChD,IAAI,MAAM,QAAQ,IAAI,GAAG,OAAO,KAAK,IAAI,cAAc,CAAC,CAAC,KAAK,EAAE;CAChE,IAAI,eAAe,IAAI,GAAG,OAAO,eAAgB,KAAK,MAAmC,QAAQ;CACjG,OAAO;AACT"}

package/docs/v1-to-v2-migration-guide.md

@@ -225,6 +225,26 @@ The API changed fundamentally — from index-based to value-based:
 
 This is one of the more involved migrations — every tab needs an explicit `value`.
 
+| v1 | v2 |
+|----|----|
+| `ContainedTab` | `BitkitTabs.Trigger`, with `variant="contained"` on the root |
+| `leftIconName` / `iconName` | `icon` |
+| `iconColor` | `iconColor`, `contained` only, and only an `icon/*` token |
+| `isWarning` | `icon={IconWarningYellow}` |
+| `badge={{ children: '3' }}` | `badge={<BitkitBadge>3</BitkitBadge>}` |
+| `isDisabled` | `disabled` |
+| `isLazy` | `lazyMount` **and** `unmountOnExit` |
+| `onChange(index)` | `onValueChange({ value })` |
+| `TabPanels` / `TabPanel` | `BitkitTabs.ContentGroup` / `BitkitTabs.Content` |
+
+Things that behave differently:
+- **An uncontrolled root needs `defaultValue`.** v1 fell back to index 0; without `defaultValue`, v2 selects nothing and shows no panel. The same happens when `value` matches no trigger, e.g. a stale query parameter for a tab that is hidden.
+- **`isLazy` alone is `lazyMount`, not the whole thing.** v1's `isLazy` unmounts a panel when you leave it; `lazyMount` on its own keeps every visited panel mounted.
+- **`List` renders only its direct `Trigger` children** (fragments are unwrapped). A component that wraps a trigger compiles and then disappears. `Content` has no such filter.
+- **`Trigger` children are a `string`.** `Attachments {count}` is two children; write one template string, or move the count to `badge`.
+- **Tabs that do not fit collapse into a "N more…" menu** instead of v1's horizontal scroll.
+- **Don't stretch line tabs yourself.** On mobile they share the row on their own while all of them fit, so drop per-trigger `flex` / `width`.
+
 ### Table
 
 ```tsx

package/package.json

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