@bitrise/bitkit-v2 0.3.460-beta.2910 → 0.3.461-beta.2914

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
  1. package/dist/components/BitkitTreeView/BitkitTreeView.d.ts +2 -0
  2. package/dist/components/BitkitTreeView/BitkitTreeView.js +33 -13
  3. package/dist/components/BitkitTreeView/BitkitTreeView.js.map +1 -1
  4. package/dist/theme/slot-recipes/UISideNav.recipe.d.ts +1 -1
  5. package/dist/theme/slot-recipes/UISideNav.recipe.js +4 -6
  6. package/dist/theme/slot-recipes/UISideNav.recipe.js.map +1 -1
  7. package/dist/theme/slot-recipes/index.d.ts +1 -1
  8. package/package.json +1 -1
package/dist/components/BitkitTreeView/BitkitTreeView.d.ts CHANGED
@@ -27,6 +27,8 @@ export interface BitkitTreeViewBranchProps extends Omit<TreeViewBranchControlPro
27
27
  export interface BitkitTreeViewLeafProps extends Omit<TreeViewItemProps, 'children'> {
28
28
  actions?: ReactElement[];
29
29
  badge?: ReactElement;
30
+ /** Explains the badge on hover, e.g. what its letter stands for. */
31
+ badgeTooltip?: string;
30
32
  hasWarning?: boolean;
31
33
  icon?: BitkitIconComponent;
32
34
  /** An `icon/*` token for the icon when it carries meaning of its own, such as a test result's status. */
package/dist/components/BitkitTreeView/BitkitTreeView.js CHANGED
@@ -2,6 +2,7 @@ import { withSubComponents } from "../../utilities/withSubComponents.js";
2
2
  import IconChevronRight from "../../icons/IconChevronRight.js";
3
3
  import IconFolder from "../../icons/IconFolder.js";
4
4
  import IconWarningYellow from "../../icons/IconWarningYellow.js";
5
+ import BitkitTooltip from "../BitkitTooltip/BitkitTooltip.js";
5
6
  import { Box } from "@chakra-ui/react/box";
6
7
  import { useSlotRecipe } from "@chakra-ui/react/styled-system";
7
8
  import { cloneElement, forwardRef } from "react";
@@ -9,6 +10,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
9
10
  import { Text } from "@chakra-ui/react/text";
10
11
  import { createTreeCollection } from "@chakra-ui/react/collection";
11
12
  import { createContext as createContext$1 } from "@chakra-ui/react";
13
+ import { VisuallyHidden } from "@chakra-ui/react/visually-hidden";
12
14
  import { TreeView, useTreeViewContext } from "@chakra-ui/react/tree-view";
13
15
  //#region lib/components/BitkitTreeView/BitkitTreeView.tsx
14
16
  var [VariantProvider, useVariant] = createContext$1({
@@ -73,7 +75,7 @@ var Nodes = ({ indentGuide, render, renderBranchFooter, variant }) => {
73
75
  * | `suffixText` | `string` | Trailing text, e.g. a count or a duration. |
74
76
  * | `suffixIcon` | `BitkitIconComponent` | Trailing icon, before `suffixText`. |
75
77
  * | `hasWarning` | `boolean` | A warning icon at the start of the suffix. |
76
- * | `actions` | `ReactElement[]` | Buttons shown in place of the suffix on hover, forced to `size="xs"`. |
78
+ * | `actions` | `ReactElement[]` | Buttons shown in place of the suffix on hover, forced to `size="xs"`. Their clicks do not reach the row. |
77
79
  *
78
80
  * Leaf only:
79
81
  *
@@ -82,6 +84,7 @@ var Nodes = ({ indentGuide, render, renderBranchFooter, variant }) => {
82
84
  * | `icon` | `BitkitIconComponent` | Before the label. Branches draw their own folder or chevron. |
83
85
  * | `iconColor` | `icon/*` token | For an icon that carries a status. Wins over hover and selection. |
84
86
  * | `badge` | `ReactElement` | Before the label, forced to `size="xs"`. |
87
+ * | `badgeTooltip` | `string` | Shown when the badge is hovered, and read out after the label. Pass it here rather than wrapping `badge` in a tooltip, which would take the `size` instead of the badge. |
85
88
  *
86
89
  * Behaviour worth knowing:
87
90
  * - Enter on a node selects it and does not fire a DOM click, so open things from
@@ -113,6 +116,14 @@ var Root = forwardRef(({ children, render, renderBranchFooter, variant = "files"
113
116
  });
114
117
  });
115
118
  Root.displayName = "BitkitTreeView";
119
+ var Actions = ({ actions, variant }) => {
120
+ const styles = useCustomSlotStyles(variant);
121
+ return /* @__PURE__ */ jsx(Box, {
122
+ css: styles.actionGroup,
123
+ onClick: (event) => event.stopPropagation(),
124
+ children: actions.map((action) => cloneElement(action, { size: "xs" }))
125
+ });
126
+ };
116
127
  var Branch = forwardRef((props, ref) => {
117
128
  const { actions, hasWarning, label, subtext, suffixIcon: SuffixIcon, suffixText, ...rest } = props;
118
129
  const { variant } = useVariant();
@@ -138,20 +149,22 @@ var Branch = forwardRef((props, ref) => {
138
149
  suffixText && /* @__PURE__ */ jsx("span", { children: suffixText })
139
150
  ]
140
151
  }),
141
- hasActions && /* @__PURE__ */ jsx(Box, {
142
- css: styles.actionGroup,
143
- children: actions.map((action) => cloneElement(action, { size: "xs" }))
152
+ hasActions && /* @__PURE__ */ jsx(Actions, {
153
+ actions,
154
+ variant
144
155
  })
145
156
  ]
146
157
  });
147
158
  });
148
159
  Branch.displayName = "BitkitTreeView.Branch";
149
160
  var Leaf = forwardRef((props, ref) => {
150
- const { actions, badge, hasWarning, icon: Icon, iconColor, label, subtext, suffixIcon: SuffixIcon, suffixText, ...rest } = props;
161
+ const { actions, badge, badgeTooltip, hasWarning, icon: Icon, iconColor, label, subtext, suffixIcon: SuffixIcon, suffixText, ...rest } = props;
151
162
  const { variant } = useVariant();
152
163
  const styles = useCustomSlotStyles(variant);
153
164
  const hasSuffix = hasWarning || SuffixIcon || suffixText;
154
165
  const hasActions = actions && actions.length > 0;
166
+ const sizedBadge = badge && cloneElement(badge, { size: "xs" });
167
+ const badgeDescription = sizedBadge ? badgeTooltip : void 0;
155
168
  return /* @__PURE__ */ jsxs(TreeView.Item, {
156
169
  ref,
157
170
  className: hasActions ? "group" : void 0,
@@ -161,11 +174,18 @@ var Leaf = forwardRef((props, ref) => {
161
174
  color: iconColor,
162
175
  size: "16"
163
176
  }),
164
- badge && cloneElement(badge, { size: "xs" }),
165
- /* @__PURE__ */ jsxs(TreeView.ItemText, { children: [label, subtext && /* @__PURE__ */ jsx(Text, {
166
- css: styles.secondaryText,
167
- children: subtext
168
- })] }),
177
+ badgeDescription ? /* @__PURE__ */ jsx(BitkitTooltip, {
178
+ text: badgeDescription,
179
+ children: sizedBadge
180
+ }) : sizedBadge,
181
+ /* @__PURE__ */ jsxs(TreeView.ItemText, { children: [
182
+ label,
183
+ badgeDescription && /* @__PURE__ */ jsx(VisuallyHidden, { children: `, ${badgeDescription}` }),
184
+ subtext && /* @__PURE__ */ jsx(Text, {
185
+ css: styles.secondaryText,
186
+ children: subtext
187
+ })
188
+ ] }),
169
189
  hasSuffix && /* @__PURE__ */ jsxs(Box, {
170
190
  css: styles.suffixGroup,
171
191
  children: [
@@ -174,9 +194,9 @@ var Leaf = forwardRef((props, ref) => {
174
194
  suffixText && /* @__PURE__ */ jsx("span", { children: suffixText })
175
195
  ]
176
196
  }),
177
- hasActions && /* @__PURE__ */ jsx(Box, {
178
- css: styles.actionGroup,
179
- children: actions.map((action) => cloneElement(action, { size: "xs" }))
197
+ hasActions && /* @__PURE__ */ jsx(Actions, {
198
+ actions,
199
+ variant
180
200
  })
181
201
  ]
182
202
  });
package/dist/components/BitkitTreeView/BitkitTreeView.js.map CHANGED
@@ -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 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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"}
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 { VisuallyHidden } from '@chakra-ui/react/visually-hidden';\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';\nimport BitkitTooltip from '../BitkitTooltip/BitkitTooltip';\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\"`. Their clicks do not reach the row. |\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 * | `badgeTooltip` | `string` | Shown when the badge is hovered, and read out after the label. Pass it here rather than wrapping `badge` in a tooltip, which would take the `size` instead of the badge. |\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// --- Actions ---\n\n// The buttons sit inside the row, so a click that bubbled up would also toggle the branch or select the leaf.\nconst Actions = ({ actions, variant }: { actions: ReactElement[]; variant: BitkitTreeViewVariant }) => {\n const styles = useCustomSlotStyles(variant);\n\n return (\n <Box css={styles.actionGroup} onClick={(event) => event.stopPropagation()}>\n {actions.map((action) => cloneElement(action, { size: 'xs' }))}\n </Box>\n );\n};\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 && <Actions actions={actions} variant={variant} />}\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 /** Explains the badge on hover, e.g. what its letter stands for. */\n badgeTooltip?: string;\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 badgeTooltip,\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 const sizedBadge = badge && cloneElement(badge, { size: 'xs' });\n const badgeDescription = sizedBadge ? badgeTooltip : undefined;\n\n return (\n <TreeView.Item ref={ref} className={hasActions ? 'group' : undefined} {...rest}>\n {Icon && <Icon color={iconColor} size=\"16\" />}\n {badgeDescription ? <BitkitTooltip text={badgeDescription}>{sizedBadge}</BitkitTooltip> : sizedBadge}\n <TreeView.ItemText>\n {label}\n {/* A tree has a single Tab stop, so the badge takes no focus: its tooltip is read out with the label instead. */}\n {badgeDescription && <VisuallyHidden>{`, ${badgeDescription}`}</VisuallyHidden>}\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 && <Actions actions={actions} variant={variant} />}\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/UISideNav.recipe.d.ts CHANGED
@@ -31,7 +31,7 @@ declare const uiSideNavSlotRecipe: import('@chakra-ui/react').SlotRecipeDefiniti
31
31
  };
32
32
  item: {
33
33
  gap: "24";
34
- paddingBlock: "12";
34
+ paddingBlock: "16";
35
35
  minWidth: `${number}rem`;
36
36
  };
37
37
  link: {
package/dist/theme/slot-recipes/UISideNav.recipe.js CHANGED
@@ -212,17 +212,15 @@ var uiSideNavSlotRecipe = defineSlotRecipe({
212
212
  color: "sys/ui/sidenav/item/fg-active"
213
213
  },
214
214
  _focusVisible: { outlineOffset: "calc(var(--focus-ring-width) * -1)" },
215
- "&[data-with-secondary]": {
216
- height: rem(56),
217
- paddingBlock: 0
218
- }
215
+ "&[data-with-secondary]": { paddingBlock: "8" }
219
216
  },
220
217
  linkTextBlock: {
221
218
  display: "flex",
222
219
  flex: 1,
223
220
  flexDirection: "column",
224
221
  justifyContent: "center",
225
- minWidth: 0
222
+ minWidth: 0,
223
+ "[data-with-secondary] &": { marginBlock: "2" }
226
224
  },
227
225
  linkLabel: {
228
226
  flex: 1,
@@ -338,7 +336,7 @@ var uiSideNavSlotRecipe = defineSlotRecipe({
338
336
  item: {
339
337
  ...railRow,
340
338
  gap: "24",
341
- paddingBlock: "12"
339
+ paddingBlock: "16"
342
340
  },
343
341
  link: {
344
342
  ...railRow,
package/dist/theme/slot-recipes/UISideNav.recipe.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"UISideNav.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/UISideNav.recipe.ts"],"sourcesContent":["import { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { rem } from '../themeUtils';\n\nconst RAIL_WIDTH_COLLAPSED = rem(72);\n\n/**\n * The footprint the rail keeps in the page. The expanded rail overlays the content rather than\n * pushing it, so this is the gutter a layout reserves beside the navigation.\n */\nexport const uiSideNavRailWidth = RAIL_WIDTH_COLLAPSED;\n\nconst RAIL_WIDTH_EXPANDED = rem(256);\nconst DRAWER_WIDTH = rem(320);\nconst WORKSPACE_MENU_WIDTH = rem(360);\n\nconst railRow = { minWidth: RAIL_WIDTH_EXPANDED };\n\nconst hairline = {\n background: 'border/inverse',\n content: '\"\"',\n height: '1',\n opacity: 0.2,\n} as const;\n\nconst uiSideNavSlotRecipe = defineSlotRecipe({\n className: 'ui-side-nav',\n slots: [\n 'backdrop',\n 'body',\n 'closeButton',\n 'content',\n 'footer',\n 'footerHeading',\n 'footerSeparator',\n 'item',\n 'itemIcon',\n 'itemIndicator',\n 'itemLabel',\n 'link',\n 'linkIcon',\n 'linkIconBlock',\n 'linkLabel',\n 'linkSecondaryText',\n 'linkStatusDot',\n 'linkTextBlock',\n 'positioner',\n 'root',\n 'workspace',\n 'workspaceChevron',\n 'workspaceControl',\n 'workspaceLabel',\n 'workspaceMenu',\n 'workspaceRoot',\n 'workspaceTextBlock',\n 'workspaceValue',\n ],\n base: {\n root: {\n background: 'sys/ui/sidenav/bg',\n display: 'flex',\n flexDirection: 'column',\n height: 'full',\n overflow: 'hidden',\n whiteSpace: 'nowrap',\n },\n workspace: {\n alignItems: 'center',\n background: 'sys/ui/sidenav/item/bg',\n // Preflight zeroes every border width but not the radius a native button can still draw.\n borderRadius: 0,\n color: 'text/on-color',\n cursor: 'pointer',\n display: 'flex',\n flexShrink: 0,\n gap: '16',\n height: rem(72),\n minHeight: rem(72),\n position: 'relative',\n textAlign: 'start',\n width: 'full',\n _after: {\n ...hairline,\n insetBlockEnd: 0,\n insetInline: 0,\n position: 'absolute',\n },\n _hover: {\n background: 'sys/ui/sidenav/item/bg-hover',\n _active: {\n background: 'sys/ui/sidenav/item/bg-active',\n },\n },\n _active: {\n background: 'sys/ui/sidenav/item/bg-active',\n },\n },\n workspaceRoot: {\n flexShrink: 0,\n width: 'full',\n },\n workspaceTextBlock: {\n display: 'flex',\n flex: 1,\n flexDirection: 'column',\n minWidth: 0,\n },\n workspaceLabel: {\n opacity: 0.6,\n textStyle: 'heading/h6',\n textTransform: 'uppercase',\n },\n workspaceValue: {\n opacity: 0.8,\n textStyle: 'body/lg/regular',\n truncate: true,\n },\n workspaceChevron: {\n color: 'text/on-color',\n flexShrink: 0,\n transition: 'rotate 150ms ease-out',\n _open: {\n rotate: '180deg',\n },\n _motionReduce: {\n transition: 'none',\n },\n },\n body: {\n display: 'flex',\n flex: 1,\n flexDirection: 'column',\n minHeight: 0,\n },\n item: {\n alignItems: 'center',\n background: 'sys/ui/sidenav/item/bg',\n color: 'sys/ui/sidenav/item/fg',\n cursor: 'pointer',\n display: 'flex',\n flexShrink: 0,\n overflow: 'hidden',\n paddingInlineEnd: '8',\n paddingInlineStart: '24',\n position: 'relative',\n textDecoration: 'none',\n width: 'full',\n _hover: {\n background: 'sys/ui/sidenav/item/bg-hover',\n color: 'sys/ui/sidenav/item/fg-hover',\n _active: {\n background: 'sys/ui/sidenav/item/bg-active',\n },\n },\n _active: {\n background: 'sys/ui/sidenav/item/bg-active',\n color: 'sys/ui/sidenav/item/fg-active',\n },\n _selected: {\n background: 'sys/ui/sidenav/item/bg-selected',\n color: 'sys/ui/sidenav/item/fg-active',\n _hover: {\n background: 'sys/ui/sidenav/item/bg-hover',\n _active: {\n background: 'sys/ui/sidenav/item/bg-active',\n },\n },\n _active: {\n background: 'sys/ui/sidenav/item/bg-active',\n },\n },\n _focusVisible: {\n outlineOffset: 'calc(var(--focus-ring-width) * -1)',\n },\n },\n itemIcon: {\n flexShrink: 0,\n },\n itemLabel: {\n flex: 1,\n minWidth: 0,\n textStyle: 'body/lg/semibold',\n truncate: true,\n },\n itemIndicator: {\n background: 'sys/ui/sidenav/item/indicator',\n insetBlock: 0,\n insetInlineStart: 0,\n position: 'absolute',\n width: '4',\n },\n footer: {\n display: 'flex',\n flexDirection: 'column',\n flexShrink: 0,\n marginBlockStart: 'auto',\n },\n footerSeparator: {\n flexShrink: 0,\n paddingBlock: '8',\n paddingInline: '12',\n _before: {\n ...hairline,\n display: 'block',\n width: 'full',\n },\n },\n footerHeading: {\n color: 'text/on-color',\n opacity: 0.6,\n paddingBlockEnd: '12',\n paddingInline: '24',\n textStyle: 'heading/h6',\n textTransform: 'uppercase',\n },\n link: {\n alignItems: 'center',\n background: 'sys/ui/sidenav/item/bg',\n borderWidth: 0,\n color: 'sys/ui/sidenav/item/fg',\n cursor: 'pointer',\n display: 'flex',\n flexShrink: 0,\n overflow: 'hidden',\n paddingBlock: '12',\n paddingInline: '24',\n textAlign: 'start',\n textDecoration: 'none',\n width: 'full',\n _hover: {\n background: 'sys/ui/sidenav/item/bg-hover',\n color: 'sys/ui/sidenav/item/fg-hover',\n _active: {\n background: 'sys/ui/sidenav/item/bg-active',\n },\n },\n _active: {\n background: 'sys/ui/sidenav/item/bg-active',\n color: 'sys/ui/sidenav/item/fg-active',\n },\n _focusVisible: {\n outlineOffset: 'calc(var(--focus-ring-width) * -1)',\n },\n '&[data-with-secondary]': {\n height: rem(56),\n paddingBlock: 0,\n },\n },\n linkTextBlock: {\n display: 'flex',\n flex: 1,\n flexDirection: 'column',\n justifyContent: 'center',\n minWidth: 0,\n },\n linkLabel: {\n flex: 1,\n minWidth: 0,\n textStyle: 'body/lg/regular',\n truncate: true,\n '[data-with-secondary] &': {\n flex: 'none',\n textStyle: 'body/md/semibold',\n },\n },\n linkSecondaryText: {\n textStyle: 'body/sm/regular',\n truncate: true,\n },\n linkIcon: {\n flexShrink: 0,\n },\n linkIconBlock: {\n display: 'flex',\n flexShrink: 0,\n position: 'relative',\n },\n linkStatusDot: {\n borderRadius: 'full',\n height: '8',\n insetBlockEnd: '-2',\n insetInlineEnd: '-4',\n position: 'absolute',\n width: '8',\n '&[data-status=\"neutral\"]': {\n background: 'sys/ui/sidenav/badge/neutral',\n },\n '&[data-status=\"success\"]': {\n background: 'sys/ui/sidenav/badge/green',\n },\n '&[data-status=\"critical\"]': {\n background: 'sys/ui/sidenav/badge/red',\n },\n },\n backdrop: {\n background: 'utilities/overlay',\n inset: 0,\n position: 'fixed',\n zIndex: 'calc({zIndex.dialogOverlay} + var(--layer-index, 0))',\n _open: {\n animationDuration: 'slow',\n animationName: 'fade-in',\n },\n _closed: {\n animationDuration: 'moderate',\n animationName: 'fade-out',\n },\n },\n positioner: {\n alignItems: 'stretch',\n display: 'flex',\n inset: 0,\n // The drawer comes in from the leading edge, unlike every other drawer in the library.\n justifyContent: 'flex-start',\n overscrollBehaviorY: 'none',\n position: 'fixed',\n zIndex: 'calc({zIndex.dialog} + var(--layer-index, 0))',\n },\n content: {\n background: 'sys/ui/sidenav/bg',\n boxShadow: 'elevation/lg',\n display: 'flex',\n flexDirection: 'column',\n maxHeight: '100dvh',\n outline: 'none',\n // The close button hangs off the trailing edge, so the panel must not clip it.\n overflow: 'visible',\n position: 'relative',\n width: DRAWER_WIDTH,\n // 320 for the panel plus the 55 the close button column occupies, which is the 375 the\n // design frame is drawn at. Narrower phones give the panel up, not the button.\n maxWidth: 'calc(100vw - 55px)',\n _open: {\n animationDuration: 'slowest',\n animationName: {\n base: 'slide-from-left-full, fade-in',\n _rtl: 'slide-from-right-full, fade-in',\n },\n animationTimingFunction: 'ease-in-smooth',\n },\n _closed: {\n animationDuration: 'slower',\n animationName: {\n base: 'slide-to-left-full, fade-out',\n _rtl: 'slide-to-right-full, fade-out',\n },\n animationTimingFunction: 'ease-in-smooth',\n },\n },\n closeButton: {\n alignItems: 'center',\n display: 'flex',\n height: rem(72),\n insetBlockStart: 0,\n insetInlineStart: '100%',\n paddingInlineStart: '8',\n position: 'absolute',\n },\n },\n\n variants: {\n layout: {\n rail: {\n root: {\n paddingBlockEnd: '12',\n // Opening is slower to reach than closing, so a pointer crossing the rail on its way\n // somewhere else does not drag it open.\n transition: 'width 100ms ease-out',\n transitionDelay: '50ms',\n width: RAIL_WIDTH_COLLAPSED,\n _motionReduce: {\n transition: 'none',\n },\n '&[data-expanded]': {\n transitionDelay: '100ms',\n width: RAIL_WIDTH_EXPANDED,\n },\n },\n workspace: { ...railRow, paddingInline: '16' },\n workspaceControl: railRow,\n workspaceMenu: { width: WORKSPACE_MENU_WIDTH },\n item: { ...railRow, gap: '24', paddingBlock: '12' },\n link: { ...railRow, gap: '24' },\n footerSeparator: {\n '[data-expanded] &': {\n paddingInline: '16',\n },\n },\n footerHeading: railRow,\n },\n drawer: {\n root: {\n overflowX: 'hidden',\n overflowY: 'auto',\n width: 'full',\n },\n workspaceRoot: {\n background: 'sys/ui/sidenav/bg',\n insetBlockStart: 0,\n position: 'sticky',\n zIndex: 1,\n },\n workspace: {\n paddingBlock: '16',\n paddingInlineEnd: '24',\n paddingInlineStart: '16',\n },\n item: { gap: '12', paddingBlock: '16' },\n link: { gap: '12' },\n footer: {\n paddingBlockEnd: '16',\n paddingBlockStart: '12',\n position: 'relative',\n },\n footerHeading: {\n paddingBlockStart: '12',\n '&[data-section]': {\n marginBlockStart: '12',\n paddingBlockStart: '24',\n position: 'relative',\n _before: {\n ...hairline,\n insetBlockStart: 0,\n insetInline: 0,\n position: 'absolute',\n },\n },\n },\n footerSeparator: {\n insetBlockStart: 0,\n insetInline: 0,\n paddingBlock: 0,\n paddingInline: 0,\n position: 'absolute',\n },\n workspaceMenu: {\n // The panel is the whole screen, so the menu takes the height it can get rather than\n // the desktop cap, which would leave a short list floating in a tall drawer.\n maxHeight: 'var(--available-height)',\n '--select-menu-list-max-height': 'none',\n },\n body: { flex: '1 0 auto', paddingBlock: '8' },\n },\n },\n },\n\n defaultVariants: {\n layout: 'rail',\n },\n});\n\nexport default uiSideNavSlotRecipe;\n"],"mappings":"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"}
1
+ {"version":3,"file":"UISideNav.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/UISideNav.recipe.ts"],"sourcesContent":["import { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { rem } from '../themeUtils';\n\nconst RAIL_WIDTH_COLLAPSED = rem(72);\n\n/**\n * The footprint the rail keeps in the page. The expanded rail overlays the content rather than\n * pushing it, so this is the gutter a layout reserves beside the navigation.\n */\nexport const uiSideNavRailWidth = RAIL_WIDTH_COLLAPSED;\n\nconst RAIL_WIDTH_EXPANDED = rem(256);\nconst DRAWER_WIDTH = rem(320);\nconst WORKSPACE_MENU_WIDTH = rem(360);\n\nconst railRow = { minWidth: RAIL_WIDTH_EXPANDED };\n\nconst hairline = {\n background: 'border/inverse',\n content: '\"\"',\n height: '1',\n opacity: 0.2,\n} as const;\n\nconst uiSideNavSlotRecipe = defineSlotRecipe({\n className: 'ui-side-nav',\n slots: [\n 'backdrop',\n 'body',\n 'closeButton',\n 'content',\n 'footer',\n 'footerHeading',\n 'footerSeparator',\n 'item',\n 'itemIcon',\n 'itemIndicator',\n 'itemLabel',\n 'link',\n 'linkIcon',\n 'linkIconBlock',\n 'linkLabel',\n 'linkSecondaryText',\n 'linkStatusDot',\n 'linkTextBlock',\n 'positioner',\n 'root',\n 'workspace',\n 'workspaceChevron',\n 'workspaceControl',\n 'workspaceLabel',\n 'workspaceMenu',\n 'workspaceRoot',\n 'workspaceTextBlock',\n 'workspaceValue',\n ],\n base: {\n root: {\n background: 'sys/ui/sidenav/bg',\n display: 'flex',\n flexDirection: 'column',\n height: 'full',\n overflow: 'hidden',\n whiteSpace: 'nowrap',\n },\n workspace: {\n alignItems: 'center',\n background: 'sys/ui/sidenav/item/bg',\n // Preflight zeroes every border width but not the radius a native button can still draw.\n borderRadius: 0,\n color: 'text/on-color',\n cursor: 'pointer',\n display: 'flex',\n flexShrink: 0,\n gap: '16',\n height: rem(72),\n minHeight: rem(72),\n position: 'relative',\n textAlign: 'start',\n width: 'full',\n _after: {\n ...hairline,\n insetBlockEnd: 0,\n insetInline: 0,\n position: 'absolute',\n },\n _hover: {\n background: 'sys/ui/sidenav/item/bg-hover',\n _active: {\n background: 'sys/ui/sidenav/item/bg-active',\n },\n },\n _active: {\n background: 'sys/ui/sidenav/item/bg-active',\n },\n },\n workspaceRoot: {\n flexShrink: 0,\n width: 'full',\n },\n workspaceTextBlock: {\n display: 'flex',\n flex: 1,\n flexDirection: 'column',\n minWidth: 0,\n },\n workspaceLabel: {\n opacity: 0.6,\n textStyle: 'heading/h6',\n textTransform: 'uppercase',\n },\n workspaceValue: {\n opacity: 0.8,\n textStyle: 'body/lg/regular',\n truncate: true,\n },\n workspaceChevron: {\n color: 'text/on-color',\n flexShrink: 0,\n transition: 'rotate 150ms ease-out',\n _open: {\n rotate: '180deg',\n },\n _motionReduce: {\n transition: 'none',\n },\n },\n body: {\n display: 'flex',\n flex: 1,\n flexDirection: 'column',\n minHeight: 0,\n },\n item: {\n alignItems: 'center',\n background: 'sys/ui/sidenav/item/bg',\n color: 'sys/ui/sidenav/item/fg',\n cursor: 'pointer',\n display: 'flex',\n flexShrink: 0,\n overflow: 'hidden',\n paddingInlineEnd: '8',\n paddingInlineStart: '24',\n position: 'relative',\n textDecoration: 'none',\n width: 'full',\n _hover: {\n background: 'sys/ui/sidenav/item/bg-hover',\n color: 'sys/ui/sidenav/item/fg-hover',\n _active: {\n background: 'sys/ui/sidenav/item/bg-active',\n },\n },\n _active: {\n background: 'sys/ui/sidenav/item/bg-active',\n color: 'sys/ui/sidenav/item/fg-active',\n },\n _selected: {\n background: 'sys/ui/sidenav/item/bg-selected',\n color: 'sys/ui/sidenav/item/fg-active',\n _hover: {\n background: 'sys/ui/sidenav/item/bg-hover',\n _active: {\n background: 'sys/ui/sidenav/item/bg-active',\n },\n },\n _active: {\n background: 'sys/ui/sidenav/item/bg-active',\n },\n },\n _focusVisible: {\n outlineOffset: 'calc(var(--focus-ring-width) * -1)',\n },\n },\n itemIcon: {\n flexShrink: 0,\n },\n itemLabel: {\n flex: 1,\n minWidth: 0,\n textStyle: 'body/lg/semibold',\n truncate: true,\n },\n itemIndicator: {\n background: 'sys/ui/sidenav/item/indicator',\n insetBlock: 0,\n insetInlineStart: 0,\n position: 'absolute',\n width: '4',\n },\n footer: {\n display: 'flex',\n flexDirection: 'column',\n flexShrink: 0,\n marginBlockStart: 'auto',\n },\n footerSeparator: {\n flexShrink: 0,\n paddingBlock: '8',\n paddingInline: '12',\n _before: {\n ...hairline,\n display: 'block',\n width: 'full',\n },\n },\n footerHeading: {\n color: 'text/on-color',\n opacity: 0.6,\n paddingBlockEnd: '12',\n paddingInline: '24',\n textStyle: 'heading/h6',\n textTransform: 'uppercase',\n },\n link: {\n alignItems: 'center',\n background: 'sys/ui/sidenav/item/bg',\n borderWidth: 0,\n color: 'sys/ui/sidenav/item/fg',\n cursor: 'pointer',\n display: 'flex',\n flexShrink: 0,\n overflow: 'hidden',\n paddingBlock: '12',\n paddingInline: '24',\n textAlign: 'start',\n textDecoration: 'none',\n width: 'full',\n _hover: {\n background: 'sys/ui/sidenav/item/bg-hover',\n color: 'sys/ui/sidenav/item/fg-hover',\n _active: {\n background: 'sys/ui/sidenav/item/bg-active',\n },\n },\n _active: {\n background: 'sys/ui/sidenav/item/bg-active',\n color: 'sys/ui/sidenav/item/fg-active',\n },\n _focusVisible: {\n outlineOffset: 'calc(var(--focus-ring-width) * -1)',\n },\n '&[data-with-secondary]': {\n paddingBlock: '8',\n },\n },\n linkTextBlock: {\n display: 'flex',\n flex: 1,\n flexDirection: 'column',\n justifyContent: 'center',\n minWidth: 0,\n '[data-with-secondary] &': {\n marginBlock: '2',\n },\n },\n linkLabel: {\n flex: 1,\n minWidth: 0,\n textStyle: 'body/lg/regular',\n truncate: true,\n '[data-with-secondary] &': {\n flex: 'none',\n textStyle: 'body/md/semibold',\n },\n },\n linkSecondaryText: {\n textStyle: 'body/sm/regular',\n truncate: true,\n },\n linkIcon: {\n flexShrink: 0,\n },\n linkIconBlock: {\n display: 'flex',\n flexShrink: 0,\n position: 'relative',\n },\n linkStatusDot: {\n borderRadius: 'full',\n height: '8',\n insetBlockEnd: '-2',\n insetInlineEnd: '-4',\n position: 'absolute',\n width: '8',\n '&[data-status=\"neutral\"]': {\n background: 'sys/ui/sidenav/badge/neutral',\n },\n '&[data-status=\"success\"]': {\n background: 'sys/ui/sidenav/badge/green',\n },\n '&[data-status=\"critical\"]': {\n background: 'sys/ui/sidenav/badge/red',\n },\n },\n backdrop: {\n background: 'utilities/overlay',\n inset: 0,\n position: 'fixed',\n zIndex: 'calc({zIndex.dialogOverlay} + var(--layer-index, 0))',\n _open: {\n animationDuration: 'slow',\n animationName: 'fade-in',\n },\n _closed: {\n animationDuration: 'moderate',\n animationName: 'fade-out',\n },\n },\n positioner: {\n alignItems: 'stretch',\n display: 'flex',\n inset: 0,\n // The drawer comes in from the leading edge, unlike every other drawer in the library.\n justifyContent: 'flex-start',\n overscrollBehaviorY: 'none',\n position: 'fixed',\n zIndex: 'calc({zIndex.dialog} + var(--layer-index, 0))',\n },\n content: {\n background: 'sys/ui/sidenav/bg',\n boxShadow: 'elevation/lg',\n display: 'flex',\n flexDirection: 'column',\n maxHeight: '100dvh',\n outline: 'none',\n // The close button hangs off the trailing edge, so the panel must not clip it.\n overflow: 'visible',\n position: 'relative',\n width: DRAWER_WIDTH,\n // 320 for the panel plus the 55 the close button column occupies, which is the 375 the\n // design frame is drawn at. Narrower phones give the panel up, not the button.\n maxWidth: 'calc(100vw - 55px)',\n _open: {\n animationDuration: 'slowest',\n animationName: {\n base: 'slide-from-left-full, fade-in',\n _rtl: 'slide-from-right-full, fade-in',\n },\n animationTimingFunction: 'ease-in-smooth',\n },\n _closed: {\n animationDuration: 'slower',\n animationName: {\n base: 'slide-to-left-full, fade-out',\n _rtl: 'slide-to-right-full, fade-out',\n },\n animationTimingFunction: 'ease-in-smooth',\n },\n },\n closeButton: {\n alignItems: 'center',\n display: 'flex',\n height: rem(72),\n insetBlockStart: 0,\n insetInlineStart: '100%',\n paddingInlineStart: '8',\n position: 'absolute',\n },\n },\n\n variants: {\n layout: {\n rail: {\n root: {\n paddingBlockEnd: '12',\n // Opening is slower to reach than closing, so a pointer crossing the rail on its way\n // somewhere else does not drag it open.\n transition: 'width 100ms ease-out',\n transitionDelay: '50ms',\n width: RAIL_WIDTH_COLLAPSED,\n _motionReduce: {\n transition: 'none',\n },\n '&[data-expanded]': {\n transitionDelay: '100ms',\n width: RAIL_WIDTH_EXPANDED,\n },\n },\n workspace: { ...railRow, paddingInline: '16' },\n workspaceControl: railRow,\n workspaceMenu: { width: WORKSPACE_MENU_WIDTH },\n item: { ...railRow, gap: '24', paddingBlock: '16' },\n link: { ...railRow, gap: '24' },\n footerSeparator: {\n '[data-expanded] &': {\n paddingInline: '16',\n },\n },\n footerHeading: railRow,\n },\n drawer: {\n root: {\n overflowX: 'hidden',\n overflowY: 'auto',\n width: 'full',\n },\n workspaceRoot: {\n background: 'sys/ui/sidenav/bg',\n insetBlockStart: 0,\n position: 'sticky',\n zIndex: 1,\n },\n workspace: {\n paddingBlock: '16',\n paddingInlineEnd: '24',\n paddingInlineStart: '16',\n },\n item: { gap: '12', paddingBlock: '16' },\n link: { gap: '12' },\n footer: {\n paddingBlockEnd: '16',\n paddingBlockStart: '12',\n position: 'relative',\n },\n footerHeading: {\n paddingBlockStart: '12',\n '&[data-section]': {\n marginBlockStart: '12',\n paddingBlockStart: '24',\n position: 'relative',\n _before: {\n ...hairline,\n insetBlockStart: 0,\n insetInline: 0,\n position: 'absolute',\n },\n },\n },\n footerSeparator: {\n insetBlockStart: 0,\n insetInline: 0,\n paddingBlock: 0,\n paddingInline: 0,\n position: 'absolute',\n },\n workspaceMenu: {\n // The panel is the whole screen, so the menu takes the height it can get rather than\n // the desktop cap, which would leave a short list floating in a tall drawer.\n maxHeight: 'var(--available-height)',\n '--select-menu-list-max-height': 'none',\n },\n body: { flex: '1 0 auto', paddingBlock: '8' },\n },\n },\n },\n\n defaultVariants: {\n layout: 'rail',\n },\n});\n\nexport default uiSideNavSlotRecipe;\n"],"mappings":"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"}
package/dist/theme/slot-recipes/index.d.ts CHANGED
@@ -3454,7 +3454,7 @@ declare const slotRecipes: {
3454
3454
  };
3455
3455
  item: {
3456
3456
  gap: "24";
3457
- paddingBlock: "12";
3457
+ paddingBlock: "16";
3458
3458
  minWidth: `${number}rem`;
3459
3459
  };
3460
3460
  link: {
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@bitrise/bitkit-v2",
3
3
  "private": false,
4
- "version": "0.3.460-beta.2910",
4
+ "version": "0.3.461-beta.2914",
5
5
  "description": "Bitrise Design System Components built with Chakra UI V3",
6
6
  "keywords": [
7
7
  "react",