@bitrise/bitkit-v2 0.3.196 → 0.3.198

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

@@ -0,0 +1,250 @@
+import { rem } from "../themeUtils.js";
+import { defineSlotRecipe } from "@chakra-ui/react/styled-system";
+import { treeViewAnatomy } from "@chakra-ui/react/anatomy";
+//#region lib/theme/slot-recipes/TreeView.recipe.ts
+var baseItemStyle = {
+	display: "flex",
+	alignItems: "flex-start",
+	gap: "var(--tree-item-gap)",
+	cursor: "pointer",
+	userSelect: "none",
+	position: "relative",
+	"--tree-depth": "calc(var(--depth) - 1)",
+	"--tree-indentation-offset": "calc(var(--tree-indentation) * var(--tree-depth))",
+	"--tree-icon-offset": "calc(var(--tree-icon-size) * var(--tree-depth) * 0.5)",
+	"--tree-offset": "calc(var(--tree-padding-inline-start) + var(--tree-indentation-offset) + var(--tree-icon-offset))",
+	paddingInlineStart: "var(--tree-offset)",
+	focusVisibleRing: "inside",
+	focusRingWidth: "2px",
+	_hover: {
+		background: "background/secondary",
+		_active: { background: "background/tertiary" }
+	},
+	_active: { background: "background/tertiary" },
+	_selected: {
+		background: "background/selected",
+		_hover: {
+			background: "background/selected-hover",
+			_active: { background: "background/selected-hover" }
+		},
+		_active: { background: "background/selected-hover" }
+	},
+	_disabled: {
+		opacity: .4,
+		cursor: "not-allowed"
+	}
+};
+var baseTextStyle = {
+	flex: 1,
+	minWidth: 0,
+	display: "flex",
+	flexDirection: "column"
+};
+var treeViewSlotRecipe = defineSlotRecipe({
+	className: "bitkit-tree-view",
+	slots: [
+		...treeViewAnatomy.keys(),
+		"actionGroup",
+		"suffixGroup",
+		"secondaryText"
+	],
+	base: {
+		root: {
+			width: "full",
+			display: "flex",
+			flexDirection: "column"
+		},
+		tree: {
+			display: "flex",
+			flexDirection: "column",
+			textStyle: "body/md/regular",
+			color: "text/body",
+			"--tree-item-gap": "spacing.8",
+			"--tree-indentation": "spacing.16",
+			"--tree-padding-inline-start": "spacing.8",
+			"--tree-icon-size": "spacing.16",
+			_icon: { boxSize: "var(--tree-icon-size)" }
+		},
+		label: {
+			fontWeight: "medium",
+			textStyle: "body/sm/regular"
+		},
+		branch: { position: "relative" },
+		branchContent: {
+			position: "relative",
+			overflow: "hidden",
+			_open: {
+				animationName: "expand-height, fade-in",
+				animationDuration: "moderate"
+			},
+			_closed: {
+				animationName: "collapse-height, fade-out",
+				animationDuration: "moderate"
+			}
+		},
+		branchIndicator: {
+			display: "flex",
+			justifyContent: "center",
+			color: "icon/secondary"
+		},
+		branchTrigger: {
+			display: "inline-flex",
+			alignItems: "center",
+			justifyContent: "center"
+		},
+		branchControl: { ...baseItemStyle },
+		item: { ...baseItemStyle },
+		branchText: baseTextStyle,
+		itemText: baseTextStyle,
+		branchIndentGuide: {},
+		itemIndicator: {},
+		nodeCheckbox: { display: "inline-flex" },
+		suffixGroup: {
+			display: "flex",
+			gap: "8",
+			alignItems: "center",
+			justifyContent: "flex-end",
+			color: "text/secondary",
+			"[data-selected] > &, [data-state=\"open\"] > &": { color: "text/primary" },
+			paddingInlineStart: "16",
+			flexShrink: 0,
+			_groupHover: { display: "none" }
+		},
+		actionGroup: {
+			display: "none",
+			alignItems: "center",
+			justifyContent: "flex-end",
+			paddingInlineStart: "16",
+			flexShrink: 0,
+			_groupHover: { display: "flex" }
+		},
+		secondaryText: {
+			textStyle: "body/sm/regular",
+			color: "text/secondary"
+		}
+	},
+	variants: { variant: {
+		files: {
+			branchControl: {
+				borderRadius: "4",
+				paddingInlineEnd: "16",
+				"& > svg": { marginBlockStart: "8" },
+				"& > .badge": { marginBlockStart: "6" }
+			},
+			item: {
+				borderRadius: "4",
+				paddingInlineEnd: "16",
+				"& > svg": { marginBlockStart: "8" },
+				"& > .badge": { marginBlockStart: "6" }
+			},
+			branchIndicator: {
+				alignItems: "flex-start",
+				marginBlockStart: "8",
+				alignSelf: "stretch",
+				position: "relative",
+				_open: { "&::after": {
+					content: "\"\"",
+					position: "absolute",
+					insetBlockStart: "16",
+					insetBlockEnd: 0,
+					insetInlineStart: "50%",
+					width: "1",
+					background: "border/regular"
+				} }
+			},
+			branchText: { paddingBlock: "6" },
+			itemText: { paddingBlock: "6" },
+			suffixGroup: {
+				height: rem(31),
+				"& > span": { marginBlockEnd: "-1" }
+			},
+			branchIndentGuide: {
+				height: "100%",
+				width: "1",
+				background: "border/regular",
+				position: "absolute",
+				insetBlockStart: 0,
+				"--tree-depth": "calc(var(--depth) - 1)",
+				"--tree-indentation-offset": "calc(var(--tree-indentation) * var(--tree-depth))",
+				"--tree-offset": "calc(var(--tree-padding-inline-start) + var(--tree-indentation-offset))",
+				"--tree-icon-offset": "calc(var(--tree-icon-size) * 0.5 * var(--depth))",
+				insetInlineStart: "calc(var(--tree-offset) + var(--tree-icon-offset))",
+				zIndex: 1
+			}
+		},
+		navigation: {
+			branchControl: {
+				borderRadius: 0,
+				paddingInlineEnd: "16",
+				"&::before": {
+					content: "\"\"",
+					position: "absolute",
+					insetBlockStart: 0,
+					insetInlineStart: "var(--tree-offset)",
+					insetInlineEnd: 0,
+					height: "1",
+					background: "border/minimal"
+				},
+				_selected: { "&::after": {
+					content: "\"\"",
+					position: "absolute",
+					insetBlock: 0,
+					insetInlineEnd: 0,
+					width: "4",
+					background: "border/selected",
+					borderRadius: "0 2px 2px 0"
+				} }
+			},
+			item: {
+				borderRadius: 0,
+				paddingInlineEnd: "16",
+				"&::before": {
+					content: "\"\"",
+					position: "absolute",
+					insetBlockStart: 0,
+					insetInlineStart: "var(--tree-offset)",
+					insetInlineEnd: 0,
+					height: "1",
+					background: "border/minimal"
+				},
+				"& > svg": { marginBlockStart: rem(9) },
+				_selected: { "&::after": {
+					content: "\"\"",
+					position: "absolute",
+					insetBlock: 0,
+					insetInlineEnd: 0,
+					width: "4",
+					background: "border/selected",
+					borderRadius: "0 2px 2px 0"
+				} }
+			},
+			branchIndicator: {
+				marginBlockStart: "8",
+				transformOrigin: "center",
+				transitionDuration: "normal",
+				transitionProperty: "transform",
+				transitionTimingFunction: "default",
+				_open: { transform: "rotate(90deg)" }
+			},
+			branchText: {
+				paddingBlock: "8",
+				gap: "4",
+				_open: {
+					textStyle: "body/md/semibold",
+					color: "text/primary"
+				}
+			},
+			itemText: { paddingBlock: "8" },
+			suffixGroup: {
+				height: rem(35),
+				"& > span": { marginBlockEnd: "-1" }
+			},
+			branchIndentGuide: { display: "none" }
+		}
+	} },
+	defaultVariants: { variant: "files" }
+});
+//#endregion
+export { treeViewSlotRecipe as default };
+
+//# sourceMappingURL=TreeView.recipe.js.map

package/dist/theme/slot-recipes/TreeView.recipe.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TreeView.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/TreeView.recipe.ts"],"sourcesContent":["import { treeViewAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { rem } from '../themeUtils';\n\nconst baseItemStyle = {\n  display: 'flex',\n  alignItems: 'flex-start',\n  gap: 'var(--tree-item-gap)',\n  cursor: 'pointer',\n  userSelect: 'none',\n  position: 'relative',\n  '--tree-depth': 'calc(var(--depth) - 1)',\n  '--tree-indentation-offset': 'calc(var(--tree-indentation) * var(--tree-depth))',\n  '--tree-icon-offset': 'calc(var(--tree-icon-size) * var(--tree-depth) * 0.5)',\n  '--tree-offset': 'calc(var(--tree-padding-inline-start) + var(--tree-indentation-offset) + var(--tree-icon-offset))',\n  paddingInlineStart: 'var(--tree-offset)',\n  focusVisibleRing: 'inside',\n  focusRingWidth: '2px',\n  _hover: {\n    background: 'background/secondary',\n    _active: {\n      background: 'background/tertiary',\n    },\n  },\n  _active: {\n    background: 'background/tertiary',\n  },\n  _selected: {\n    background: 'background/selected',\n    _hover: {\n      background: 'background/selected-hover',\n      _active: {\n        background: 'background/selected-hover',\n      },\n    },\n    _active: {\n      background: 'background/selected-hover',\n    },\n  },\n  _disabled: {\n    opacity: 0.4,\n    cursor: 'not-allowed',\n  },\n} as const;\n\nconst baseTextStyle = {\n  flex: 1,\n  minWidth: 0,\n  display: 'flex',\n  flexDirection: 'column',\n} as const;\n\nconst treeViewSlotRecipe = defineSlotRecipe({\n  className: 'bitkit-tree-view',\n  slots: [...treeViewAnatomy.keys(), 'actionGroup', 'suffixGroup', 'secondaryText'],\n  base: {\n    root: {\n      width: 'full',\n      display: 'flex',\n      flexDirection: 'column',\n    },\n    tree: {\n      display: 'flex',\n      flexDirection: 'column',\n      textStyle: 'body/md/regular',\n      color: 'text/body',\n      '--tree-item-gap': 'spacing.8',\n      '--tree-indentation': 'spacing.16',\n      '--tree-padding-inline-start': 'spacing.8',\n      '--tree-icon-size': 'spacing.16',\n      _icon: {\n        boxSize: 'var(--tree-icon-size)',\n      },\n    },\n    label: {\n      fontWeight: 'medium',\n      textStyle: 'body/sm/regular',\n    },\n    branch: {\n      position: 'relative',\n    },\n    branchContent: {\n      position: 'relative',\n      overflow: 'hidden',\n      _open: {\n        animationName: 'expand-height, fade-in',\n        animationDuration: 'moderate',\n      },\n      _closed: {\n        animationName: 'collapse-height, fade-out',\n        animationDuration: 'moderate',\n      },\n    },\n    branchIndicator: {\n      display: 'flex',\n      justifyContent: 'center',\n      color: 'icon/secondary',\n    },\n    branchTrigger: {\n      display: 'inline-flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n    },\n    branchControl: {\n      ...baseItemStyle,\n    },\n    item: {\n      ...baseItemStyle,\n    },\n    branchText: baseTextStyle,\n    itemText: baseTextStyle,\n    branchIndentGuide: {},\n    itemIndicator: {},\n    nodeCheckbox: {\n      display: 'inline-flex',\n    },\n    suffixGroup: {\n      display: 'flex',\n      gap: '8',\n      alignItems: 'center',\n      justifyContent: 'flex-end',\n      color: 'text/secondary',\n      '[data-selected] > &, [data-state=\"open\"] > &': {\n        color: 'text/primary',\n      },\n      paddingInlineStart: '16',\n      flexShrink: 0,\n      _groupHover: {\n        display: 'none',\n      },\n    },\n    actionGroup: {\n      display: 'none',\n      alignItems: 'center',\n      justifyContent: 'flex-end',\n      paddingInlineStart: '16',\n      flexShrink: 0,\n      _groupHover: {\n        display: 'flex',\n      },\n    },\n    secondaryText: {\n      textStyle: 'body/sm/regular',\n      color: 'text/secondary',\n    },\n  },\n  variants: {\n    variant: {\n      files: {\n        branchControl: {\n          borderRadius: '4',\n          paddingInlineEnd: '16',\n          '& > svg': {\n            marginBlockStart: '8',\n          },\n          '& > .badge': {\n            marginBlockStart: '6',\n          },\n        },\n        item: {\n          borderRadius: '4',\n          paddingInlineEnd: '16',\n          '& > svg': {\n            marginBlockStart: '8',\n          },\n          '& > .badge': {\n            marginBlockStart: '6',\n          },\n        },\n        branchIndicator: {\n          alignItems: 'flex-start',\n          marginBlockStart: '8',\n          alignSelf: 'stretch',\n          position: 'relative',\n          _open: {\n            '&::after': {\n              content: '\"\"',\n              position: 'absolute',\n              insetBlockStart: '16',\n              insetBlockEnd: 0,\n              insetInlineStart: '50%',\n              width: '1',\n              background: 'border/regular',\n            },\n          },\n        },\n        branchText: {\n          paddingBlock: '6',\n        },\n        itemText: {\n          paddingBlock: '6',\n        },\n        suffixGroup: {\n          height: rem(31),\n          '& > span': {\n            marginBlockEnd: '-1',\n          },\n        },\n        branchIndentGuide: {\n          height: '100%',\n          width: '1',\n          background: 'border/regular',\n          position: 'absolute',\n          insetBlockStart: 0,\n          '--tree-depth': 'calc(var(--depth) - 1)',\n          '--tree-indentation-offset': 'calc(var(--tree-indentation) * var(--tree-depth))',\n          '--tree-offset': 'calc(var(--tree-padding-inline-start) + var(--tree-indentation-offset))',\n          '--tree-icon-offset': 'calc(var(--tree-icon-size) * 0.5 * var(--depth))',\n          insetInlineStart: 'calc(var(--tree-offset) + var(--tree-icon-offset))',\n          zIndex: 1,\n        },\n      },\n      navigation: {\n        branchControl: {\n          borderRadius: 0,\n          paddingInlineEnd: '16',\n          '&::before': {\n            content: '\"\"',\n            position: 'absolute',\n            insetBlockStart: 0,\n            insetInlineStart: 'var(--tree-offset)',\n            insetInlineEnd: 0,\n            height: '1',\n            background: 'border/minimal',\n          },\n          _selected: {\n            '&::after': {\n              content: '\"\"',\n              position: 'absolute',\n              insetBlock: 0,\n              insetInlineEnd: 0,\n              width: '4',\n              background: 'border/selected',\n              borderRadius: '0 2px 2px 0',\n            },\n          },\n        },\n        item: {\n          borderRadius: 0,\n          paddingInlineEnd: '16',\n          '&::before': {\n            content: '\"\"',\n            position: 'absolute',\n            insetBlockStart: 0,\n            insetInlineStart: 'var(--tree-offset)',\n            insetInlineEnd: 0,\n            height: '1',\n            background: 'border/minimal',\n          },\n          '& > svg': {\n            marginBlockStart: rem(9),\n          },\n          _selected: {\n            '&::after': {\n              content: '\"\"',\n              position: 'absolute',\n              insetBlock: 0,\n              insetInlineEnd: 0,\n              width: '4',\n              background: 'border/selected',\n              borderRadius: '0 2px 2px 0',\n            },\n          },\n        },\n        branchIndicator: {\n          marginBlockStart: '8',\n          transformOrigin: 'center',\n          transitionDuration: 'normal',\n          transitionProperty: 'transform',\n          transitionTimingFunction: 'default',\n          _open: {\n            transform: 'rotate(90deg)',\n          },\n        },\n        branchText: {\n          paddingBlock: '8',\n          gap: '4',\n          _open: {\n            textStyle: 'body/md/semibold',\n            color: 'text/primary',\n          },\n        },\n        itemText: {\n          paddingBlock: '8',\n        },\n        suffixGroup: {\n          height: rem(35),\n          '& > span': {\n            marginBlockEnd: '-1',\n          },\n        },\n        branchIndentGuide: {\n          display: 'none',\n        },\n      },\n    },\n  },\n  defaultVariants: {\n    variant: 'files',\n  },\n});\n\nexport default treeViewSlotRecipe;\n"],"mappings":"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"}

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

@@ -319,8 +319,8 @@ declare const slotRecipes: {
                         height: "40";
                         pointerEvents: "none";
                         position: "absolute";
-                        right: "0";
-                        top: "0";
+                        right: number;
+                        top: number;
                         width: "8";
                     };
                 };
@@ -669,6 +669,55 @@ declare const slotRecipes: {
             };
         };
     }>;
+    drawer: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "body" | "footer" | "header" | "title" | "trigger" | "positioner" | "closeTrigger" | "description" | "backdrop", {
+        variant: {
+            docked: {
+                closeTrigger: {
+                    insetEnd: string;
+                    top: "12";
+                };
+                content: {
+                    width: {
+                        base: "100vw";
+                        tablet: string;
+                    };
+                };
+            };
+            floating: {
+                body: {
+                    paddingInline: "24";
+                };
+                closeTrigger: {
+                    insetEnd: "24";
+                    top: "24";
+                };
+                positioner: {
+                    padding: "32";
+                };
+                content: {
+                    borderRadius: "12";
+                    boxShadow: "elevation/lg";
+                    maxWidth: string;
+                };
+                header: {
+                    paddingBlockEnd: "16";
+                    paddingBlockStart: "24";
+                    paddingInline: "24";
+                };
+                footer: {
+                    borderBlockStartColor: "transparent";
+                    borderBlockStartWidth: "0";
+                    paddingBlockEnd: "24";
+                    paddingBlockStart: "32";
+                    paddingInline: "24";
+                };
+                title: {
+                    color: "text/primary";
+                    textStyle: "comp/dialog/title";
+                };
+            };
+        };
+    }>;
     emptyState: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "title" | "root" | "description" | "indicator", {
         colorScheme: {
             white: {
@@ -1404,7 +1453,7 @@ declare const slotRecipes: {
                             content: "\"\"";
                             position: "absolute";
                             insetBlockStart: "-2px";
-                            insetInlineStart: "0";
+                            insetInlineStart: number;
                             width: "50%";
                             height: "2";
                             bg: "border/selected";
@@ -1430,7 +1479,7 @@ declare const slotRecipes: {
                         _before: {
                             content: "\"\"";
                             position: "absolute";
-                            insetBlockStart: "0";
+                            insetBlockStart: number;
                             insetInlineStart: "-2px";
                             width: "2";
                             height: "50%";
@@ -1834,5 +1883,156 @@ declare const slotRecipes: {
             };
         };
     }>;
+    treeView: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "secondaryText" | "root" | "item" | "itemIndicator" | "tree" | "itemText" | "branch" | "branchContent" | "branchControl" | "branchIndentGuide" | "branchIndicator" | "branchText" | "branchTrigger" | "nodeCheckbox" | "nodeRenameInput" | "actionGroup" | "suffixGroup", {
+        variant: {
+            files: {
+                branchControl: {
+                    borderRadius: "4";
+                    paddingInlineEnd: "16";
+                    '& > svg': {
+                        marginBlockStart: "8";
+                    };
+                    '& > .badge': {
+                        marginBlockStart: "6";
+                    };
+                };
+                item: {
+                    borderRadius: "4";
+                    paddingInlineEnd: "16";
+                    '& > svg': {
+                        marginBlockStart: "8";
+                    };
+                    '& > .badge': {
+                        marginBlockStart: "6";
+                    };
+                };
+                branchIndicator: {
+                    alignItems: "flex-start";
+                    marginBlockStart: "8";
+                    alignSelf: "stretch";
+                    position: "relative";
+                    _open: {
+                        '&::after': {
+                            content: "\"\"";
+                            position: "absolute";
+                            insetBlockStart: "16";
+                            insetBlockEnd: number;
+                            insetInlineStart: "50%";
+                            width: "1";
+                            background: "border/regular";
+                        };
+                    };
+                };
+                branchText: {
+                    paddingBlock: "6";
+                };
+                itemText: {
+                    paddingBlock: "6";
+                };
+                suffixGroup: {
+                    height: string;
+                    '& > span': {
+                        marginBlockEnd: "-1";
+                    };
+                };
+                branchIndentGuide: {
+                    height: "100%";
+                    width: "1";
+                    background: "border/regular";
+                    position: "absolute";
+                    insetBlockStart: number;
+                    '--tree-depth': "calc(var(--depth) - 1)";
+                    '--tree-indentation-offset': "calc(var(--tree-indentation) * var(--tree-depth))";
+                    '--tree-offset': "calc(var(--tree-padding-inline-start) + var(--tree-indentation-offset))";
+                    '--tree-icon-offset': "calc(var(--tree-icon-size) * 0.5 * var(--depth))";
+                    insetInlineStart: "calc(var(--tree-offset) + var(--tree-icon-offset))";
+                    zIndex: number;
+                };
+            };
+            navigation: {
+                branchControl: {
+                    borderRadius: number;
+                    paddingInlineEnd: "16";
+                    '&::before': {
+                        content: "\"\"";
+                        position: "absolute";
+                        insetBlockStart: number;
+                        insetInlineStart: "var(--tree-offset)";
+                        insetInlineEnd: number;
+                        height: "1";
+                        background: "border/minimal";
+                    };
+                    _selected: {
+                        '&::after': {
+                            content: "\"\"";
+                            position: "absolute";
+                            insetBlock: number;
+                            insetInlineEnd: number;
+                            width: "4";
+                            background: "border/selected";
+                            borderRadius: "0 2px 2px 0";
+                        };
+                    };
+                };
+                item: {
+                    borderRadius: number;
+                    paddingInlineEnd: "16";
+                    '&::before': {
+                        content: "\"\"";
+                        position: "absolute";
+                        insetBlockStart: number;
+                        insetInlineStart: "var(--tree-offset)";
+                        insetInlineEnd: number;
+                        height: "1";
+                        background: "border/minimal";
+                    };
+                    '& > svg': {
+                        marginBlockStart: string;
+                    };
+                    _selected: {
+                        '&::after': {
+                            content: "\"\"";
+                            position: "absolute";
+                            insetBlock: number;
+                            insetInlineEnd: number;
+                            width: "4";
+                            background: "border/selected";
+                            borderRadius: "0 2px 2px 0";
+                        };
+                    };
+                };
+                branchIndicator: {
+                    marginBlockStart: "8";
+                    transformOrigin: "center";
+                    transitionDuration: "normal";
+                    transitionProperty: "transform";
+                    transitionTimingFunction: "default";
+                    _open: {
+                        transform: "rotate(90deg)";
+                    };
+                };
+                branchText: {
+                    paddingBlock: "8";
+                    gap: "4";
+                    _open: {
+                        textStyle: "body/md/semibold";
+                        color: "text/primary";
+                    };
+                };
+                itemText: {
+                    paddingBlock: "8";
+                };
+                suffixGroup: {
+                    height: string;
+                    '& > span': {
+                        marginBlockEnd: "-1";
+                    };
+                };
+                branchIndentGuide: {
+                    display: "none";
+                };
+            };
+        };
+    }>;
 };
 export default slotRecipes;

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

@@ -14,6 +14,7 @@ import { selectSlotRecipe } from "./Select.recipe.js";
 import datePickerSelectSlotRecipe from "./DatePickerSelect.recipe.js";
 import dialogSlotRecipe from "./Dialog.recipe.js";
 import draggableCardSlotRecipe from "./DraggableCard.recipe.js";
+import drawerSlotRecipe from "./Drawer.recipe.js";
 import emptyStateSlotRecipe from "./EmptyState.recipe.js";
 import expandableCardSlotRecipe from "./ExpandableCard.recipe.js";
 import fieldSlotRecipe from "./Field.recipe.js";
@@ -49,6 +50,7 @@ import tagSlotRecipe from "./Tag.recipe.js";
 import tagsInputSlotRecipe from "./TagsInput.recipe.js";
 import toastSlotRecipe from "./Toast.recipe.js";
 import tooltipSlotRecipe from "./Tooltip.recipe.js";
+import treeViewSlotRecipe from "./TreeView.recipe.js";
 //#region lib/theme/slot-recipes/index.ts
 var slotRecipes = {
 	accordion: accordionSlotRecipe,
@@ -65,6 +67,7 @@ var slotRecipes = {
 	datePickerSelect: datePickerSelectSlotRecipe,
 	dialog: dialogSlotRecipe,
 	draggableCard: draggableCardSlotRecipe,
+	drawer: drawerSlotRecipe,
 	emptyState: emptyStateSlotRecipe,
 	expandableCard: expandableCardSlotRecipe,
 	field: fieldSlotRecipe,
@@ -101,7 +104,8 @@ var slotRecipes = {
 	tag: tagSlotRecipe,
 	tagsInput: tagsInputSlotRecipe,
 	toast: toastSlotRecipe,
-	tooltip: tooltipSlotRecipe
+	tooltip: tooltipSlotRecipe,
+	treeView: treeViewSlotRecipe
 };
 //#endregion
 export { slotRecipes as default };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../lib/theme/slot-recipes/index.ts"],"sourcesContent":["import accordionSlotRecipe from './Accordion.recipe.ts';\nimport actionBarSlotRecipe from './ActionBar.recipe.ts';\nimport alertSlotRecipe from './Alert.recipe.ts';\nimport avatarSlotRecipe from './Avatar.recipe.ts';\nimport breadcrumbSlotRecipe from './Breadcrumb.recipe.ts';\nimport cardSlotRecipe from './Card.recipe';\nimport checkboxSlotRecipe from './Checkbox.recipe';\nimport codeSnippetSlotRecipe from './CodeSnippet.recipe.ts';\nimport collapsibleSlotRecipe from './Collapsible.recipe.ts';\nimport comboboxSlotRecipe from './Combobox.recipe.ts';\nimport datePickerSlotRecipe from './DatePicker.recipe.ts';\nimport datePickerSelectSlotRecipe from './DatePickerSelect.recipe.ts';\nimport dialogSlotRecipe from './Dialog.recipe.ts';\nimport draggableCardSlotRecipe from './DraggableCard.recipe.ts';\nimport emptyStateSlotRecipe from './EmptyState.recipe';\nimport expandableCardSlotRecipe from './ExpandableCard.recipe.ts';\nimport fieldSlotRecipe from './Field.recipe';\nimport fieldsetSlotRecipe from './Fieldset.recipe.ts';\nimport fileUploadSlotRecipe from './FileUpload.recipe.ts';\nimport groupHeadingSlotRecipe from './GroupHeading.recipe.ts';\nimport imageCropperSlotRecipe from './ImageCropper.recipe.ts';\nimport inlineLoadingSlotRecipe from './InlineLoading.recipe.ts';\nimport labeledDataSlotRecipe from './LabeledData.recipe.ts';\nimport listSlotRecipe from './List.recipe.ts';\nimport markdownSlotRecipe from './Markdown.recipe.ts';\nimport markdownCardSlotRecipe from './MarkdownCard.recipe.ts';\nimport menuSlotRecipe from './Menu.recipe.ts';\nimport nativeSelectSlotRecipe from './NativeSelect.recipe.ts';\nimport noteCardSlotRecipe from './NoteCard.recipe.ts';\nimport numberInputSlotRecipe from './NumberInput.recipe';\nimport overflowContentSlotRecipe from './OverflowContent.recipe.ts';\nimport pageFooterSlotRecipe from './PageFooter.recipe.ts';\nimport paginationSlotRecipe from './Pagination.recipe.ts';\nimport paginationLoadMoreSlotRecipe from './PaginationLoadMore.recipe.ts';\nimport radioGroupSlotRecipe from './RadioGroup.recipe.ts';\nimport ribbonSlotRecipe from './Ribbon.recipe.ts';\nimport sectionHeadingSlotRecipe from './SectionHeading.recipe.ts';\nimport segmentGroupSlotRecipe from './SegmentGroup.recipe.ts';\nimport { selectSlotRecipe } from './Select.recipe.ts';\nimport sidebarSlotRecipe from './Sidebar.recipe.ts';\nimport splitButtonSlotRecipe from './SplitButton.recipe.ts';\nimport statSlotRecipe from './Stat.recipe.ts';\nimport stepCardSlotRecipe from './StepCard.recipe.ts';\nimport stepsSlotRecipe from './Steps.recipe.ts';\nimport switchSlotRecipe from './Switch.recipe';\nimport tableSlotRecipe from './Table.recipe.ts';\nimport tabsSlotRecipe from './Tabs.recipe';\nimport tagSlotRecipe from './Tag.recipe.ts';\nimport tagsInputSlotRecipe from './TagsInput.recipe.ts';\nimport toastSlotRecipe from './Toast.recipe';\nimport tooltipSlotRecipe from './Tooltip.recipe';\n\nconst slotRecipes = {\n  accordion: accordionSlotRecipe,\n  actionBar: actionBarSlotRecipe,\n  alert: alertSlotRecipe,\n  avatar: avatarSlotRecipe,\n  breadcrumb: breadcrumbSlotRecipe,\n  card: cardSlotRecipe,\n  checkbox: checkboxSlotRecipe,\n  codeSnippet: codeSnippetSlotRecipe,\n  collapsible: collapsibleSlotRecipe,\n  combobox: comboboxSlotRecipe,\n  datePicker: datePickerSlotRecipe,\n  datePickerSelect: datePickerSelectSlotRecipe,\n  dialog: dialogSlotRecipe,\n  draggableCard: draggableCardSlotRecipe,\n  emptyState: emptyStateSlotRecipe,\n  expandableCard: expandableCardSlotRecipe,\n  field: fieldSlotRecipe,\n  groupHeading: groupHeadingSlotRecipe,\n  fieldset: fieldsetSlotRecipe,\n  fileUpload: fileUploadSlotRecipe,\n  imageCropper: imageCropperSlotRecipe,\n  inlineLoading: inlineLoadingSlotRecipe,\n  list: listSlotRecipe,\n  markdown: markdownSlotRecipe,\n  markdownCard: markdownCardSlotRecipe,\n  menu: menuSlotRecipe,\n  noteCard: noteCardSlotRecipe,\n  nativeSelect: nativeSelectSlotRecipe,\n  numberInput: numberInputSlotRecipe,\n  overflowContent: overflowContentSlotRecipe,\n  pageFooter: pageFooterSlotRecipe,\n  pagination: paginationSlotRecipe,\n  paginationLoadMore: paginationLoadMoreSlotRecipe,\n  radioGroup: radioGroupSlotRecipe,\n  ribbon: ribbonSlotRecipe,\n  sectionHeading: sectionHeadingSlotRecipe,\n  labeledData: labeledDataSlotRecipe,\n  segmentGroup: segmentGroupSlotRecipe,\n  sidebar: sidebarSlotRecipe,\n  select: selectSlotRecipe,\n  splitButton: splitButtonSlotRecipe,\n  stat: statSlotRecipe,\n  stepsCard: stepCardSlotRecipe,\n  steps: stepsSlotRecipe,\n  switch: switchSlotRecipe,\n  table: tableSlotRecipe,\n  tabs: tabsSlotRecipe,\n  tag: tagSlotRecipe,\n  tagsInput: tagsInputSlotRecipe,\n  toast: toastSlotRecipe,\n  tooltip: tooltipSlotRecipe,\n};\n\nexport default slotRecipes;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoDA,IAAM,cAAc;CAClB,WAAW;CACX,WAAW;CACX,OAAO;CACP,QAAQ;CACR,YAAY;CACZ,MAAM;CACN,UAAU;CACV,aAAa;CACb,aAAa;CACb,UAAU;CACV,YAAY;CACZ,kBAAkB;CAClB,QAAQ;CACR,eAAe;CACf,YAAY;CACZ,gBAAgB;CAChB,OAAO;CACP,cAAc;CACd,UAAU;CACV,YAAY;CACZ,cAAc;CACd,eAAe;CACf,MAAM;CACN,UAAU;CACV,cAAc;CACd,MAAM;CACN,UAAU;CACV,cAAc;CACd,aAAa;CACb,iBAAiB;CACjB,YAAY;CACZ,YAAY;CACZ,oBAAoB;CACpB,YAAY;CACZ,QAAQ;CACR,gBAAgB;CAChB,aAAa;CACb,cAAc;CACd,SAAS;CACT,QAAQ;CACR,aAAa;CACb,MAAM;CACN,WAAW;CACX,OAAO;CACP,QAAQ;CACR,OAAO;CACP,MAAM;CACN,KAAK;CACL,WAAW;CACX,OAAO;CACP,SAAS;CACV"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../lib/theme/slot-recipes/index.ts"],"sourcesContent":["import accordionSlotRecipe from './Accordion.recipe.ts';\nimport actionBarSlotRecipe from './ActionBar.recipe.ts';\nimport alertSlotRecipe from './Alert.recipe.ts';\nimport avatarSlotRecipe from './Avatar.recipe.ts';\nimport breadcrumbSlotRecipe from './Breadcrumb.recipe.ts';\nimport cardSlotRecipe from './Card.recipe';\nimport checkboxSlotRecipe from './Checkbox.recipe';\nimport codeSnippetSlotRecipe from './CodeSnippet.recipe.ts';\nimport collapsibleSlotRecipe from './Collapsible.recipe.ts';\nimport comboboxSlotRecipe from './Combobox.recipe.ts';\nimport datePickerSlotRecipe from './DatePicker.recipe.ts';\nimport datePickerSelectSlotRecipe from './DatePickerSelect.recipe.ts';\nimport dialogSlotRecipe from './Dialog.recipe.ts';\nimport draggableCardSlotRecipe from './DraggableCard.recipe.ts';\nimport drawerSlotRecipe from './Drawer.recipe.ts';\nimport emptyStateSlotRecipe from './EmptyState.recipe';\nimport expandableCardSlotRecipe from './ExpandableCard.recipe.ts';\nimport fieldSlotRecipe from './Field.recipe';\nimport fieldsetSlotRecipe from './Fieldset.recipe.ts';\nimport fileUploadSlotRecipe from './FileUpload.recipe.ts';\nimport groupHeadingSlotRecipe from './GroupHeading.recipe.ts';\nimport imageCropperSlotRecipe from './ImageCropper.recipe.ts';\nimport inlineLoadingSlotRecipe from './InlineLoading.recipe.ts';\nimport labeledDataSlotRecipe from './LabeledData.recipe.ts';\nimport listSlotRecipe from './List.recipe.ts';\nimport markdownSlotRecipe from './Markdown.recipe.ts';\nimport markdownCardSlotRecipe from './MarkdownCard.recipe.ts';\nimport menuSlotRecipe from './Menu.recipe.ts';\nimport nativeSelectSlotRecipe from './NativeSelect.recipe.ts';\nimport noteCardSlotRecipe from './NoteCard.recipe.ts';\nimport numberInputSlotRecipe from './NumberInput.recipe';\nimport overflowContentSlotRecipe from './OverflowContent.recipe.ts';\nimport pageFooterSlotRecipe from './PageFooter.recipe.ts';\nimport paginationSlotRecipe from './Pagination.recipe.ts';\nimport paginationLoadMoreSlotRecipe from './PaginationLoadMore.recipe.ts';\nimport radioGroupSlotRecipe from './RadioGroup.recipe.ts';\nimport ribbonSlotRecipe from './Ribbon.recipe.ts';\nimport sectionHeadingSlotRecipe from './SectionHeading.recipe.ts';\nimport segmentGroupSlotRecipe from './SegmentGroup.recipe.ts';\nimport { selectSlotRecipe } from './Select.recipe.ts';\nimport sidebarSlotRecipe from './Sidebar.recipe.ts';\nimport splitButtonSlotRecipe from './SplitButton.recipe.ts';\nimport statSlotRecipe from './Stat.recipe.ts';\nimport stepCardSlotRecipe from './StepCard.recipe.ts';\nimport stepsSlotRecipe from './Steps.recipe.ts';\nimport switchSlotRecipe from './Switch.recipe';\nimport tableSlotRecipe from './Table.recipe.ts';\nimport tabsSlotRecipe from './Tabs.recipe';\nimport tagSlotRecipe from './Tag.recipe.ts';\nimport tagsInputSlotRecipe from './TagsInput.recipe.ts';\nimport toastSlotRecipe from './Toast.recipe';\nimport tooltipSlotRecipe from './Tooltip.recipe';\nimport treeViewSlotRecipe from './TreeView.recipe.ts';\n\nconst slotRecipes = {\n  accordion: accordionSlotRecipe,\n  actionBar: actionBarSlotRecipe,\n  alert: alertSlotRecipe,\n  avatar: avatarSlotRecipe,\n  breadcrumb: breadcrumbSlotRecipe,\n  card: cardSlotRecipe,\n  checkbox: checkboxSlotRecipe,\n  codeSnippet: codeSnippetSlotRecipe,\n  collapsible: collapsibleSlotRecipe,\n  combobox: comboboxSlotRecipe,\n  datePicker: datePickerSlotRecipe,\n  datePickerSelect: datePickerSelectSlotRecipe,\n  dialog: dialogSlotRecipe,\n  draggableCard: draggableCardSlotRecipe,\n  drawer: drawerSlotRecipe,\n  emptyState: emptyStateSlotRecipe,\n  expandableCard: expandableCardSlotRecipe,\n  field: fieldSlotRecipe,\n  groupHeading: groupHeadingSlotRecipe,\n  fieldset: fieldsetSlotRecipe,\n  fileUpload: fileUploadSlotRecipe,\n  imageCropper: imageCropperSlotRecipe,\n  inlineLoading: inlineLoadingSlotRecipe,\n  list: listSlotRecipe,\n  markdown: markdownSlotRecipe,\n  markdownCard: markdownCardSlotRecipe,\n  menu: menuSlotRecipe,\n  noteCard: noteCardSlotRecipe,\n  nativeSelect: nativeSelectSlotRecipe,\n  numberInput: numberInputSlotRecipe,\n  overflowContent: overflowContentSlotRecipe,\n  pageFooter: pageFooterSlotRecipe,\n  pagination: paginationSlotRecipe,\n  paginationLoadMore: paginationLoadMoreSlotRecipe,\n  radioGroup: radioGroupSlotRecipe,\n  ribbon: ribbonSlotRecipe,\n  sectionHeading: sectionHeadingSlotRecipe,\n  labeledData: labeledDataSlotRecipe,\n  segmentGroup: segmentGroupSlotRecipe,\n  sidebar: sidebarSlotRecipe,\n  select: selectSlotRecipe,\n  splitButton: splitButtonSlotRecipe,\n  stat: statSlotRecipe,\n  stepsCard: stepCardSlotRecipe,\n  steps: stepsSlotRecipe,\n  switch: switchSlotRecipe,\n  table: tableSlotRecipe,\n  tabs: tabsSlotRecipe,\n  tag: tagSlotRecipe,\n  tagsInput: tagsInputSlotRecipe,\n  toast: toastSlotRecipe,\n  tooltip: tooltipSlotRecipe,\n  treeView: treeViewSlotRecipe,\n};\n\nexport default slotRecipes;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsDA,IAAM,cAAc;CAClB,WAAW;CACX,WAAW;CACX,OAAO;CACP,QAAQ;CACR,YAAY;CACZ,MAAM;CACN,UAAU;CACV,aAAa;CACb,aAAa;CACb,UAAU;CACV,YAAY;CACZ,kBAAkB;CAClB,QAAQ;CACR,eAAe;CACf,QAAQ;CACR,YAAY;CACZ,gBAAgB;CAChB,OAAO;CACP,cAAc;CACd,UAAU;CACV,YAAY;CACZ,cAAc;CACd,eAAe;CACf,MAAM;CACN,UAAU;CACV,cAAc;CACd,MAAM;CACN,UAAU;CACV,cAAc;CACd,aAAa;CACb,iBAAiB;CACjB,YAAY;CACZ,YAAY;CACZ,oBAAoB;CACpB,YAAY;CACZ,QAAQ;CACR,gBAAgB;CAChB,aAAa;CACb,cAAc;CACd,SAAS;CACT,QAAQ;CACR,aAAa;CACb,MAAM;CACN,WAAW;CACX,OAAO;CACP,QAAQ;CACR,OAAO;CACP,MAAM;CACN,KAAK;CACL,WAAW;CACX,OAAO;CACP,SAAS;CACT,UAAU;CACX"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit-v2",
   "private": false,
-  "version": "0.3.196",
+  "version": "0.3.198",
   "description": "Bitrise Design System Components built with Chakra UI V3",
   "keywords": [
     "react",
@@ -74,7 +74,7 @@
     "release-it": "^19.2.4",
     "storybook": "10.3.5",
     "tsx": "^4.21.0",
-    "typescript": "^6.0.2",
+    "typescript": "^6.0.3",
     "vite": "^8.0.8",
     "vite-plugin-dts": "^4.5.4",
     "vite-plugin-svgr": "^5.2.0"