npm - @bitrise/bitkit-v2 - Versions diffs - 0.3.449 → 0.3.450 - Mend

@bitrise/bitkit-v2 0.3.449 → 0.3.450

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/dist/components/BitkitTreeView/BitkitTreeView.d.ts CHANGED Viewed

@@ -8,6 +8,12 @@ export type BitkitTreeViewVariant = 'files' | 'navigation';
 export interface BitkitTreeViewRootProps extends Omit<TreeViewRootProps, 'children'> {
     children?: ReactNode;
     render: (props: TreeViewNodeRenderProps) => ReactNode;
+    /**
+     * Content after a branch's children, indented like them: a `BitkitPaginationLoadMore` with
+     * `size="xs"` for a directory that loads its files in pages. Called for branch nodes only;
+     * return `null` for a branch that needs nothing. Designed for the `files` variant.
+     */
+    renderBranchFooter?: (props: TreeViewNodeRenderProps) => ReactNode;
     variant?: BitkitTreeViewVariant;
 }
 export interface BitkitTreeViewBranchProps extends Omit<TreeViewBranchControlProps, 'children'> {

package/dist/components/BitkitTreeView/BitkitTreeView.js CHANGED Viewed

@@ -9,7 +9,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { Text } from "@chakra-ui/react/text";
 import { createTreeCollection } from "@chakra-ui/react/collection";
 import { createContext as createContext$1 } from "@chakra-ui/react";
-import { TreeView } from "@chakra-ui/react/tree-view";
+import { TreeView, useTreeViewContext } from "@chakra-ui/react/tree-view";
 //#region lib/components/BitkitTreeView/BitkitTreeView.tsx
 var [VariantProvider, useVariant] = createContext$1({
 	name: "BitkitTreeViewVariantContext",
@@ -18,18 +18,97 @@ var [VariantProvider, useVariant] = createContext$1({
 var useCustomSlotStyles = (variant) => {
 	return useSlotRecipe({ key: "treeView" })({ variant });
 };
-var Root = forwardRef(({ children, render, variant = "files", ...props }, ref) => {
+var Nodes = ({ indentGuide, render, renderBranchFooter, variant }) => {
+	const tree = useTreeViewContext();
+	const styles = useCustomSlotStyles(variant);
+	const renderNode = (node, indexPath) => /* @__PURE__ */ jsx(TreeView.NodeProvider, {
+		indexPath,
+		node,
+		children: /* @__PURE__ */ jsx(TreeView.NodeContext, { children: (nodeState) => {
+			if (!nodeState.isBranch) return render({
+				indexPath,
+				node,
+				nodeState
+			});
+			const footer = renderBranchFooter?.({
+				indexPath,
+				node,
+				nodeState
+			});
+			return /* @__PURE__ */ jsxs(TreeView.Branch, { children: [render({
+				indexPath,
+				node,
+				nodeState
+			}), /* @__PURE__ */ jsxs(TreeView.BranchContent, { children: [
+				indentGuide,
+				tree.collection.getNodeChildren(node).map((child, index) => renderNode(child, [...indexPath, index])),
+				footer && /* @__PURE__ */ jsx(Box, {
+					css: [styles.footer, { "--depth": indexPath.length + 1 }],
+					children: footer
+				})
+			] })] });
+		} })
+	}, indexPath.join("."));
+	return tree.collection.getNodeChildren(tree.collection.rootNode).map((node, index) => renderNode(node, [index]));
+};
+/**
+* A tree of collapsible branches and leaves, in a `files` or a `navigation` look. The tree is data,
+* not JSX: build `collection` with `createTreeCollection` (re-exported from here), and `render`
+* returns `BitkitTreeView.Branch` when `nodeState.isBranch` and `BitkitTreeView.Leaf` otherwise.
+*
+* Root also takes Chakra's `TreeView.Root` props: `defaultExpandedValue` / `expandedValue` /
+* `onExpandedChange`, `selectionMode`, `defaultSelectedValue` / `selectedValue` /
+* `onSelectionChange`, `lazyMount` (keeps unopened branches out of the DOM), and
+* `translations={{ treeLabel }}` for the tree's accessible name. `children` renders after the whole
+* tree, indented like the top-level nodes, and `renderBranchFooter` after one branch's children,
+* indented like them: both take a `BitkitPaginationLoadMore size="xs"` for trees that load in pages.
+*
+* `BitkitTreeView.Branch` (a `TreeView.BranchControl`) and `BitkitTreeView.Leaf` (a `TreeView.Item`,
+* so it takes `onClick` and `onKeyDown`) share these props:
+*
+* | Prop | Type | Notes |
+* | --- | --- | --- |
+* | `label` | `string` | Required. |
+* | `subtext` | `ReactNode` | A second line under the label. |
+* | `suffixText` | `string` | Trailing text, e.g. a count or a duration. |
+* | `suffixIcon` | `BitkitIconComponent` | Trailing icon, before `suffixText`. |
+* | `hasWarning` | `boolean` | A warning icon at the start of the suffix. |
+* | `actions` | `ReactElement[]` | Buttons shown in place of the suffix on hover, forced to `size="xs"`. |
+*
+* Leaf only:
+*
+* | Prop | Type | Notes |
+* | --- | --- | --- |
+* | `icon` | `BitkitIconComponent` | Before the label. Branches draw their own folder or chevron. |
+* | `iconColor` | `icon/*` token | For an icon that carries a status. Wins over hover and selection. |
+* | `badge` | `ReactElement` | Before the label, forced to `size="xs"`. |
+*
+* Behaviour worth knowing:
+* - Enter on a node selects it and does not fire a DOM click, so open things from
+*   `onSelectionChange`. Activating the selected leaf again changes nothing, so a leaf that should
+*   reopen needs its own `onClick` and `onKeyDown` for that case.
+* - A node with `children: []` renders as a leaf, not as an empty branch.
+* - The `navigation` design has no badges, no actions and no subtext on leaves; those slots are drawn
+*   for `files`.
+*/
+var Root = forwardRef(({ children, render, renderBranchFooter, variant = "files", ...props }, ref) => {
 	const indentGuide = variant === "files" ? /* @__PURE__ */ jsx(TreeView.BranchIndentGuide, {}) : void 0;
+	const styles = useCustomSlotStyles(variant);
 	return /* @__PURE__ */ jsx(VariantProvider, {
 		value: { variant },
 		children: /* @__PURE__ */ jsx(TreeView.Root, {
 			ref,
 			variant,
 			...props,
-			children: /* @__PURE__ */ jsxs(TreeView.Tree, { children: [/* @__PURE__ */ jsx(TreeView.Node, {
+			children: /* @__PURE__ */ jsxs(TreeView.Tree, { children: [/* @__PURE__ */ jsx(Nodes, {
 				indentGuide,
-				render
-			}), children] })
+				render,
+				renderBranchFooter,
+				variant
+			}), children && /* @__PURE__ */ jsx(Box, {
+				css: [styles.footer, { "--depth": 1 }],
+				children
+			})] })
 		})
 	});
 });

package/dist/components/BitkitTreeView/BitkitTreeView.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BitkitTreeView.js","names":[],"sources":["../../../lib/components/BitkitTreeView/BitkitTreeView.tsx"],"sourcesContent":["// eslint-disable-next-line no-restricted-imports\nimport { createContext } from '@chakra-ui/react';\nimport { Box } from '@chakra-ui/react/box';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport {\n TreeView,\n type TreeViewBranchControlProps,\n type TreeViewItemProps,\n type TreeViewNodeRenderProps,\n type TreeViewRootProps,\n} from '@chakra-ui/react/tree-view';\nimport { cloneElement, forwardRef, type ReactElement, type ReactNode } from 'react';\n\nimport { type BitkitIconComponent, IconChevronRight, IconFolder, IconWarningYellow } from '../../icons';\nimport { type BitkitColorToken } from '../../theme/themeUtils';\nimport { withSubComponents } from '../../utilities/withSubComponents';\n\n// Re-export for consumer convenience\nexport { createTreeCollection } from '@chakra-ui/react/collection';\n\n// Re-export useful types\nexport type {\n TreeViewExpandedChangeDetails as BitkitTreeViewExpandedChangeDetails,\n TreeViewNodeRenderProps as BitkitTreeViewNodeRenderProps,\n TreeViewSelectionChangeDetails as BitkitTreeViewSelectionChangeDetails,\n} from '@chakra-ui/react/tree-view';\n\n// --- Variant context ---\n\nexport type BitkitTreeViewVariant = 'files' \| 'navigation';\n\nconst [VariantProvider, useVariant] = createContext<{ variant: BitkitTreeViewVariant }>({\n name: 'BitkitTreeViewVariantContext',\n defaultValue: { variant: 'files' },\n});\n\nconst useCustomSlotStyles = (variant: BitkitTreeViewVariant) => {\n const recipe = useSlotRecipe({ key: 'treeView' });\n return recipe({ variant });\n};\n\n// --- Root ---\n\nexport interface BitkitTreeViewRootProps extends Omit<TreeViewRootProps, 'children'> {\n children?: ReactNode;\n render: (props: TreeViewNodeRenderProps) => ReactNode;\n variant?: BitkitTreeViewVariant;\n}\n\nconst Root = forwardRef<HTMLDivElement, BitkitTreeViewRootProps>(\n ({ children, render, variant = 'files', ...props }, ref) => {\n const indentGuide = variant === 'files' ? <TreeView.BranchIndentGuide /> : undefined;\n\n return (\n <VariantProvider value={{ variant }}>\n <TreeView.Root ref={ref} variant={variant} {...props}>\n <TreeView.Tree>\n <TreeView.Node indentGuide={indentGuide} render={render as never} />\n {children}\n </TreeView.Tree>\n </TreeView.Root>\n </VariantProvider>\n );\n },\n);\nRoot.displayName = 'BitkitTreeView';\n\n// --- Branch ---\n\nexport interface BitkitTreeViewBranchProps extends Omit<TreeViewBranchControlProps, 'children'> {\n actions?: ReactElement[];\n hasWarning?: boolean;\n label: string;\n subtext?: ReactNode;\n suffixIcon?: BitkitIconComponent;\n suffixText?: string;\n}\n\nconst Branch = forwardRef<HTMLDivElement, BitkitTreeViewBranchProps>((props, ref) => {\n const { actions, hasWarning, label, subtext, suffixIcon: SuffixIcon, suffixText, ...rest } = props;\n const { variant } = useVariant();\n const styles = useCustomSlotStyles(variant);\n const hasSuffix = hasWarning \|\| SuffixIcon \|\| suffixText;\n const hasActions = actions && actions.length > 0;\n\n const BranchIcon = variant === 'navigation' ? IconChevronRight : IconFolder;\n\n return (\n <TreeView.BranchControl ref={ref} className={hasActions ? 'group' : undefined} {...rest}>\n <TreeView.BranchIndicator>\n <BranchIcon size=\"16\" />\n </TreeView.BranchIndicator>\n <TreeView.BranchText>\n {label}\n {subtext && <Text css={styles.secondaryText}>{subtext}</Text>}\n </TreeView.BranchText>\n {hasSuffix && (\n <Box css={styles.suffixGroup}>\n {hasWarning && <IconWarningYellow size=\"16\" />}\n {SuffixIcon && <SuffixIcon size=\"16\" />}\n {suffixText && <span>{suffixText}</span>}\n </Box>\n )}\n {hasActions && (\n <Box css={styles.actionGroup}>{actions.map((action) => cloneElement(action, { size: 'xs' }))}</Box>\n )}\n </TreeView.BranchControl>\n );\n});\nBranch.displayName = 'BitkitTreeView.Branch';\n\n// --- Leaf ---\n\nexport interface BitkitTreeViewLeafProps extends Omit<TreeViewItemProps, 'children'> {\n actions?: ReactElement[];\n badge?: ReactElement;\n hasWarning?: boolean;\n icon?: BitkitIconComponent;\n /** An `icon/` token for the icon when it carries meaning of its own, such as a test result's status. /\n iconColor?: BitkitColorToken<'icon'>;\n label: string;\n subtext?: ReactNode;\n suffixIcon?: BitkitIconComponent;\n suffixText?: string;\n}\n\nconst Leaf = forwardRef<HTMLDivElement, BitkitTreeViewLeafProps>((props, ref) => {\n const {\n actions,\n badge,\n hasWarning,\n icon: Icon,\n iconColor,\n label,\n subtext,\n suffixIcon: SuffixIcon,\n suffixText,\n ...rest\n } = props;\n const { variant } = useVariant();\n const styles = useCustomSlotStyles(variant);\n const hasSuffix = hasWarning \|\| SuffixIcon \|\| suffixText;\n const hasActions = actions && actions.length > 0;\n\n return (\n <TreeView.Item ref={ref} className={hasActions ? 'group' : undefined} {...rest}>\n {Icon && <Icon color={iconColor} size=\"16\" />}\n {badge && cloneElement(badge, { size: 'xs' })}\n <TreeView.ItemText>\n {label}\n {subtext && <Text css={styles.secondaryText}>{subtext}</Text>}\n </TreeView.ItemText>\n {hasSuffix && (\n <Box css={styles.suffixGroup}>\n {hasWarning && <IconWarningYellow size=\"16\" />}\n {SuffixIcon && <SuffixIcon size=\"16\" />}\n {suffixText && <span>{suffixText}</span>}\n </Box>\n )}\n {hasActions && (\n <Box css={styles.actionGroup}>{actions.map((action) => cloneElement(action, { size: 'xs' }))}</Box>\n )}\n </TreeView.Item>\n );\n});\nLeaf.displayName = 'BitkitTreeView.Leaf';\n\n// --- Main export ---\n\nconst BitkitTreeView = withSubComponents(Root, {\n Branch,\n Leaf,\n});\n\nexport default BitkitTreeView;\n"],"mappings":"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"}
1	+ {"version":3,"file":"BitkitTreeView.js","names":[],"sources":["../../../lib/components/BitkitTreeView/BitkitTreeView.tsx"],"sourcesContent":["// eslint-disable-next-line no-restricted-imports\nimport { createContext } from '@chakra-ui/react';\nimport { Box } from '@chakra-ui/react/box';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport {\n TreeView,\n type TreeViewBranchControlProps,\n type TreeViewItemProps,\n type TreeViewNodeRenderProps,\n type TreeViewRootProps,\n useTreeViewContext,\n} from '@chakra-ui/react/tree-view';\nimport { cloneElement, forwardRef, type ReactElement, type ReactNode } from 'react';\n\nimport { type BitkitIconComponent, IconChevronRight, IconFolder, IconWarningYellow } from '../../icons';\nimport { type BitkitColorToken } from '../../theme/themeUtils';\nimport { withSubComponents } from '../../utilities/withSubComponents';\n\n// Re-export for consumer convenience\nexport { createTreeCollection } from '@chakra-ui/react/collection';\n\n// Re-export useful types\nexport type {\n TreeViewExpandedChangeDetails as BitkitTreeViewExpandedChangeDetails,\n TreeViewNodeRenderProps as BitkitTreeViewNodeRenderProps,\n TreeViewSelectionChangeDetails as BitkitTreeViewSelectionChangeDetails,\n} from '@chakra-ui/react/tree-view';\n\n// --- Variant context ---\n\nexport type BitkitTreeViewVariant = 'files' \| 'navigation';\n\nconst [VariantProvider, useVariant] = createContext<{ variant: BitkitTreeViewVariant }>({\n name: 'BitkitTreeViewVariantContext',\n defaultValue: { variant: 'files' },\n});\n\nconst useCustomSlotStyles = (variant: BitkitTreeViewVariant) => {\n const recipe = useSlotRecipe({ key: 'treeView' });\n return recipe({ variant });\n};\n\n// --- Root ---\n\nexport interface BitkitTreeViewRootProps extends Omit<TreeViewRootProps, 'children'> {\n children?: ReactNode;\n render: (props: TreeViewNodeRenderProps) => ReactNode;\n /*\n Content after a branch's children, indented like them: a `BitkitPaginationLoadMore` with\n * `size=\"xs\"` for a directory that loads its files in pages. Called for branch nodes only;\n * return `null` for a branch that needs nothing. Designed for the `files` variant.\n /\n renderBranchFooter?: (props: TreeViewNodeRenderProps) => ReactNode;\n variant?: BitkitTreeViewVariant;\n}\n\ninterface NodesProps extends Pick<BitkitTreeViewRootProps, 'render' \| 'renderBranchFooter'> {\n indentGuide?: ReactElement;\n variant: BitkitTreeViewVariant;\n}\n\n// Chakra's TreeView.Node, which has no slot after a branch's children.\nconst Nodes = ({ indentGuide, render, renderBranchFooter, variant }: NodesProps) => {\n const tree = useTreeViewContext();\n const styles = useCustomSlotStyles(variant);\n\n const renderNode = (node: unknown, indexPath: number[]): ReactNode => (\n <TreeView.NodeProvider key={indexPath.join('.')} indexPath={indexPath} node={node}>\n <TreeView.NodeContext>\n {(nodeState) => {\n if (!nodeState.isBranch) {\n return render({ indexPath, node, nodeState });\n }\n\n const footer = renderBranchFooter?.({ indexPath, node, nodeState });\n\n return (\n <TreeView.Branch>\n {render({ indexPath, node, nodeState })}\n <TreeView.BranchContent>\n {indentGuide}\n {tree.collection.getNodeChildren(node).map((child, index) => renderNode(child, [...indexPath, index]))}\n {footer && <Box css={[styles.footer, { '--depth': indexPath.length + 1 }]}>{footer}</Box>}\n </TreeView.BranchContent>\n </TreeView.Branch>\n );\n }}\n </TreeView.NodeContext>\n </TreeView.NodeProvider>\n );\n\n return tree.collection.getNodeChildren(tree.collection.rootNode).map((node, index) => renderNode(node, [index]));\n};\n\n/\n A tree of collapsible branches and leaves, in a `files` or a `navigation` look. The tree is data,\n * not JSX: build `collection` with `createTreeCollection` (re-exported from here), and `render`\n * returns `BitkitTreeView.Branch` when `nodeState.isBranch` and `BitkitTreeView.Leaf` otherwise.\n \n Root also takes Chakra's `TreeView.Root` props: `defaultExpandedValue` / `expandedValue` /\n * `onExpandedChange`, `selectionMode`, `defaultSelectedValue` / `selectedValue` /\n * `onSelectionChange`, `lazyMount` (keeps unopened branches out of the DOM), and\n * `translations={{ treeLabel }}` for the tree's accessible name. `children` renders after the whole\n * tree, indented like the top-level nodes, and `renderBranchFooter` after one branch's children,\n * indented like them: both take a `BitkitPaginationLoadMore size=\"xs\"` for trees that load in pages.\n \n `BitkitTreeView.Branch` (a `TreeView.BranchControl`) and `BitkitTreeView.Leaf` (a `TreeView.Item`,\n * so it takes `onClick` and `onKeyDown`) share these props:\n \n \| Prop \| Type \| Notes \|\n * \| --- \| --- \| --- \|\n * \| `label` \| `string` \| Required. \|\n * \| `subtext` \| `ReactNode` \| A second line under the label. \|\n * \| `suffixText` \| `string` \| Trailing text, e.g. a count or a duration. \|\n * \| `suffixIcon` \| `BitkitIconComponent` \| Trailing icon, before `suffixText`. \|\n * \| `hasWarning` \| `boolean` \| A warning icon at the start of the suffix. \|\n * \| `actions` \| `ReactElement[]` \| Buttons shown in place of the suffix on hover, forced to `size=\"xs\"`. \|\n \n Leaf only:\n \n \| Prop \| Type \| Notes \|\n * \| --- \| --- \| --- \|\n * \| `icon` \| `BitkitIconComponent` \| Before the label. Branches draw their own folder or chevron. \|\n * \| `iconColor` \| `icon/` token \| For an icon that carries a status. Wins over hover and selection. \|\n \| `badge` \| `ReactElement` \| Before the label, forced to `size=\"xs\"`. \|\n \n Behaviour worth knowing:\n * - Enter on a node selects it and does not fire a DOM click, so open things from\n * `onSelectionChange`. Activating the selected leaf again changes nothing, so a leaf that should\n * reopen needs its own `onClick` and `onKeyDown` for that case.\n * - A node with `children: []` renders as a leaf, not as an empty branch.\n * - The `navigation` design has no badges, no actions and no subtext on leaves; those slots are drawn\n * for `files`.\n /\nconst Root = forwardRef<HTMLDivElement, BitkitTreeViewRootProps>(\n ({ children, render, renderBranchFooter, variant = 'files', ...props }, ref) => {\n const indentGuide = variant === 'files' ? <TreeView.BranchIndentGuide /> : undefined;\n const styles = useCustomSlotStyles(variant);\n\n return (\n <VariantProvider value={{ variant }}>\n <TreeView.Root ref={ref} variant={variant} {...props}>\n <TreeView.Tree>\n <Nodes\n indentGuide={indentGuide}\n render={render}\n renderBranchFooter={renderBranchFooter}\n variant={variant}\n />\n {children && <Box css={[styles.footer, { '--depth': 1 }]}>{children}</Box>}\n </TreeView.Tree>\n </TreeView.Root>\n </VariantProvider>\n );\n },\n);\nRoot.displayName = 'BitkitTreeView';\n\n// --- Branch ---\n\nexport interface BitkitTreeViewBranchProps extends Omit<TreeViewBranchControlProps, 'children'> {\n actions?: ReactElement[];\n hasWarning?: boolean;\n label: string;\n subtext?: ReactNode;\n suffixIcon?: BitkitIconComponent;\n suffixText?: string;\n}\n\nconst Branch = forwardRef<HTMLDivElement, BitkitTreeViewBranchProps>((props, ref) => {\n const { actions, hasWarning, label, subtext, suffixIcon: SuffixIcon, suffixText, ...rest } = props;\n const { variant } = useVariant();\n const styles = useCustomSlotStyles(variant);\n const hasSuffix = hasWarning \|\| SuffixIcon \|\| suffixText;\n const hasActions = actions && actions.length > 0;\n\n const BranchIcon = variant === 'navigation' ? IconChevronRight : IconFolder;\n\n return (\n <TreeView.BranchControl ref={ref} className={hasActions ? 'group' : undefined} {...rest}>\n <TreeView.BranchIndicator>\n <BranchIcon size=\"16\" />\n </TreeView.BranchIndicator>\n <TreeView.BranchText>\n {label}\n {subtext && <Text css={styles.secondaryText}>{subtext}</Text>}\n </TreeView.BranchText>\n {hasSuffix && (\n <Box css={styles.suffixGroup}>\n {hasWarning && <IconWarningYellow size=\"16\" />}\n {SuffixIcon && <SuffixIcon size=\"16\" />}\n {suffixText && <span>{suffixText}</span>}\n </Box>\n )}\n {hasActions && (\n <Box css={styles.actionGroup}>{actions.map((action) => cloneElement(action, { size: 'xs' }))}</Box>\n )}\n </TreeView.BranchControl>\n );\n});\nBranch.displayName = 'BitkitTreeView.Branch';\n\n// --- Leaf ---\n\nexport interface BitkitTreeViewLeafProps extends Omit<TreeViewItemProps, 'children'> {\n actions?: ReactElement[];\n badge?: ReactElement;\n hasWarning?: boolean;\n icon?: BitkitIconComponent;\n /* An `icon/` token for the icon when it carries meaning of its own, such as a test result's status. /\n iconColor?: BitkitColorToken<'icon'>;\n label: string;\n subtext?: ReactNode;\n suffixIcon?: BitkitIconComponent;\n suffixText?: string;\n}\n\nconst Leaf = forwardRef<HTMLDivElement, BitkitTreeViewLeafProps>((props, ref) => {\n const {\n actions,\n badge,\n hasWarning,\n icon: Icon,\n iconColor,\n label,\n subtext,\n suffixIcon: SuffixIcon,\n suffixText,\n ...rest\n } = props;\n const { variant } = useVariant();\n const styles = useCustomSlotStyles(variant);\n const hasSuffix = hasWarning \|\| SuffixIcon \|\| suffixText;\n const hasActions = actions && actions.length > 0;\n\n return (\n <TreeView.Item ref={ref} className={hasActions ? 'group' : undefined} {...rest}>\n {Icon && <Icon color={iconColor} size=\"16\" />}\n {badge && cloneElement(badge, { size: 'xs' })}\n <TreeView.ItemText>\n {label}\n {subtext && <Text css={styles.secondaryText}>{subtext}</Text>}\n </TreeView.ItemText>\n {hasSuffix && (\n <Box css={styles.suffixGroup}>\n {hasWarning && <IconWarningYellow size=\"16\" />}\n {SuffixIcon && <SuffixIcon size=\"16\" />}\n {suffixText && <span>{suffixText}</span>}\n </Box>\n )}\n {hasActions && (\n <Box css={styles.actionGroup}>{actions.map((action) => cloneElement(action, { size: 'xs' }))}</Box>\n )}\n </TreeView.Item>\n );\n});\nLeaf.displayName = 'BitkitTreeView.Leaf';\n\n// --- Main export ---\n\nconst BitkitTreeView = withSubComponents(Root, {\n Branch,\n Leaf,\n});\n\nexport default BitkitTreeView;\n"],"mappings":"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"}

package/dist/theme/slot-recipes/TreeView.recipe.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-declare const treeViewSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "tree" | "root" | "item" | "itemIndicator" | "secondaryText" | "itemText" | "branch" | "branchContent" | "branchControl" | "branchIndentGuide" | "branchIndicator" | "branchText" | "branchTrigger" | "nodeCheckbox" | "nodeRenameInput" | "actionGroup" | "suffixGroup", {
+declare const treeViewSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"footer" | "label" | "tree" | "root" | "item" | "itemIndicator" | "secondaryText" | "itemText" | "branch" | "branchContent" | "branchControl" | "branchIndentGuide" | "branchIndicator" | "branchText" | "branchTrigger" | "nodeCheckbox" | "nodeRenameInput" | "actionGroup" | "suffixGroup", {
     variant: {
         files: {
             branchControl: {
@@ -21,6 +21,9 @@ declare const treeViewSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinitio
                     marginBlockStart: "6";
                 };
             };
+            footer: {
+                paddingInlineEnd: "16";
+            };
             branchIndicator: {
                 alignItems: "flex-start";
                 marginBlockStart: "8";

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

@@ -2,6 +2,13 @@ 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 depthOffsetStyle = {
+	"--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)"
+};
 var baseItemStyle = {
 	display: "flex",
 	alignItems: "flex-start",
@@ -9,11 +16,7 @@ var baseItemStyle = {
 	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)",
+	...depthOffsetStyle,
 	focusVisibleRing: "inside",
 	focusRingWidth: "2px",
 	_hover: {
@@ -45,6 +48,7 @@ var treeViewSlotRecipe = defineSlotRecipe({
 	slots: [
 		...treeViewAnatomy.keys(),
 		"actionGroup",
+		"footer",
 		"suffixGroup",
 		"secondaryText"
 	],
@@ -120,6 +124,7 @@ var treeViewSlotRecipe = defineSlotRecipe({
 			flexShrink: 0,
 			_groupHover: { display: "none" }
 		},
+		footer: depthOffsetStyle,
 		actionGroup: {
 			display: "none",
 			alignItems: "center",
@@ -147,6 +152,7 @@ var treeViewSlotRecipe = defineSlotRecipe({
 				"& > svg": { marginBlockStart: "8" },
 				"& > .badge": { marginBlockStart: "6" }
 			},
+			footer: { paddingInlineEnd: "16" },
 			branchIndicator: {
 				alignItems: "flex-start",
 				marginBlockStart: "8",

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

	@@ -1 +1 @@
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 '--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 // Direct-child selector (not Chakra's _icon): the item also hosts SVGs in its suffix and\n // action slots, which keep their own colour.\n '& > svg': {\n color: 'icon/secondary',\n },\n _active: {\n ...baseItemStyle._active,\n '& > svg': {\n color: 'icon/primary',\n },\n },\n _selected: {\n ...baseItemStyle._selected,\n '& > svg': {\n color: 'icon/primary',\n },\n },\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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ACP,YAAY;KACZ,cAAc;IAChB,EACF;GACF;GACA,MAAM;IACJ,cAAc;IACd,kBAAkB;IAClB,aAAa;KACX,SAAS;KACT,UAAU;KACV,iBAAiB;KACjB,kBAAkB;KAClB,gBAAgB;KAChB,QAAQ;KACR,YAAY;IACd;IACA,WAAW,EACT,kBAAkB,IAAI,CAAC,EACzB;IACA,WAAW,EACT,YAAY;KACV,SAAS;KACT,UAAU;KACV,YAAY;KACZ,gBAAgB;KAChB,OAAO;KACP,YAAY;KACZ,cAAc;IAChB,EACF;GACF;GACA,iBAAiB;IACf,kBAAkB;IAClB,iBAAiB;IACjB,oBAAoB;IACpB,oBAAoB;IACpB,0BAA0B;IAC1B,OAAO,EACL,WAAW,gBACb;GACF;GACA,YAAY;IACV,cAAc;IACd,KAAK;IACL,OAAO;KACL,WAAW;KACX,OAAO;IACT;GACF;GACA,UAAU,EACR,cAAc,IAChB;GACA,aAAa;IACX,QAAQ,IAAI,EAAE;IACd,YAAY,EACV,gBAAgB,KAClB;GACF;GACA,mBAAmB,EACjB,SAAS,OACX;EACF;CACF,EACF;CACA,iBAAiB,EACf,SAAS,QACX;AACF,CAAC"}
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 depthOffsetStyle = {\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} as const;\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 ...depthOffsetStyle,\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', 'footer', '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 '--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 // Direct-child selector (not Chakra's _icon): the item also hosts SVGs in its suffix and\n // action slots, which keep their own colour.\n '& > svg': {\n color: 'icon/secondary',\n },\n _active: {\n ...baseItemStyle._active,\n '& > svg': {\n color: 'icon/primary',\n },\n },\n _selected: {\n ...baseItemStyle._selected,\n '& > svg': {\n color: 'icon/primary',\n },\n },\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 footer: depthOffsetStyle,\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 footer: {\n paddingInlineEnd: '16',\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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d;IACA,WAAW,EACT,YAAY;KACV,SAAS;KACT,UAAU;KACV,YAAY;KACZ,gBAAgB;KAChB,OAAO;KACP,YAAY;KACZ,cAAc;IAChB,EACF;GACF;GACA,MAAM;IACJ,cAAc;IACd,kBAAkB;IAClB,aAAa;KACX,SAAS;KACT,UAAU;KACV,iBAAiB;KACjB,kBAAkB;KAClB,gBAAgB;KAChB,QAAQ;KACR,YAAY;IACd;IACA,WAAW,EACT,kBAAkB,IAAI,CAAC,EACzB;IACA,WAAW,EACT,YAAY;KACV,SAAS;KACT,UAAU;KACV,YAAY;KACZ,gBAAgB;KAChB,OAAO;KACP,YAAY;KACZ,cAAc;IAChB,EACF;GACF;GACA,iBAAiB;IACf,kBAAkB;IAClB,iBAAiB;IACjB,oBAAoB;IACpB,oBAAoB;IACpB,0BAA0B;IAC1B,OAAO,EACL,WAAW,gBACb;GACF;GACA,YAAY;IACV,cAAc;IACd,KAAK;IACL,OAAO;KACL,WAAW;KACX,OAAO;IACT;GACF;GACA,UAAU,EACR,cAAc,IAChB;GACA,aAAa;IACX,QAAQ,IAAI,EAAE;IACd,YAAY,EACV,gBAAgB,KAClB;GACF;GACA,mBAAmB,EACjB,SAAS,OACX;EACF;CACF,EACF;CACA,iBAAiB,EACf,SAAS,QACX;AACF,CAAC"}

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

@@ -3242,7 +3242,7 @@ declare const slotRecipes: {
         };
     }>;
     tour: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "media" | "header" | "title" | "badge" | "arrow" | "arrowTip" | "positioner" | "closeTrigger" | "description" | "control" | "backdrop" | "actions" | "titleRow" | "titleGroup" | "actionTrigger" | "progressText" | "spotlight", import('@chakra-ui/react').SlotRecipeVariantRecord<"content" | "media" | "header" | "title" | "badge" | "arrow" | "arrowTip" | "positioner" | "closeTrigger" | "description" | "control" | "backdrop" | "actions" | "titleRow" | "titleGroup" | "actionTrigger" | "progressText" | "spotlight">>;
-    treeView: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "tree" | "root" | "item" | "itemIndicator" | "secondaryText" | "itemText" | "branch" | "branchContent" | "branchControl" | "branchIndentGuide" | "branchIndicator" | "branchText" | "branchTrigger" | "nodeCheckbox" | "nodeRenameInput" | "actionGroup" | "suffixGroup", {
+    treeView: import('@chakra-ui/react').SlotRecipeDefinition<"footer" | "label" | "tree" | "root" | "item" | "itemIndicator" | "secondaryText" | "itemText" | "branch" | "branchContent" | "branchControl" | "branchIndentGuide" | "branchIndicator" | "branchText" | "branchTrigger" | "nodeCheckbox" | "nodeRenameInput" | "actionGroup" | "suffixGroup", {
         variant: {
             files: {
                 branchControl: {
@@ -3265,6 +3265,9 @@ declare const slotRecipes: {
                         marginBlockStart: "6";
                     };
                 };
+                footer: {
+                    paddingInlineEnd: "16";
+                };
                 branchIndicator: {
                     alignItems: "flex-start";
                     marginBlockStart: "8";

package/package.json CHANGED Viewed

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