@bitrise/bitkit-v2 0.3.448 → 0.3.450

package/dist/components/BitkitTooltip/BitkitTooltip.d.ts

@@ -5,7 +5,8 @@ import { BitkitColorButtonProps } from '../BitkitColorButton/BitkitColorButton';
 export type BitkitTooltipProps = {
     /**
      * Action button rendered at the end of the tooltip. Setting it makes the tooltip interactive, so
-     * the pointer can move into the tooltip without dismissing it.
+     * the pointer can move into the tooltip without dismissing it. Defaults to the `white` colour
+     * variant, the one that reads on the tooltip's dark background.
      */
     button?: BitkitColorButtonProps;
     /**

package/dist/components/BitkitTooltip/BitkitTooltip.js

@@ -84,7 +84,8 @@ var BitkitTooltip = ({ button, children, closeOnClick, disablePortal, disabled,
 							target: learnMoreTarget,
 							children: "Learn more"
 						}), button && /* @__PURE__ */ jsx(BitkitColorButton, {
-							css: { marginInlineStart: "auto" },
+							colorVariant: "white",
+							marginInlineStart: "auto",
 							...button
 						})]
 					})

package/dist/components/BitkitTooltip/BitkitTooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"BitkitTooltip.js","names":[],"sources":["../../../lib/components/BitkitTooltip/BitkitTooltip.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { Link } from '@chakra-ui/react/link';\nimport { Portal } from '@chakra-ui/react/portal';\nimport { Tooltip, type TooltipRootProps } from '@chakra-ui/react/tooltip';\nimport { isValidElement, type ReactNode, type Ref, useContext, useRef } from 'react';\n\nimport { type BitkitIconComponent } from '../../icons';\nimport { rem } from '../../theme/themeUtils';\nimport BitkitPortalContext from '../../utilities/BitkitPortalContext';\nimport BitkitColorButton, { type BitkitColorButtonProps } from '../BitkitColorButton/BitkitColorButton';\n\nexport type BitkitTooltipProps = {\n  /**\n   * Action button rendered at the end of the tooltip. Setting it makes the tooltip interactive, so\n   * the pointer can move into the tooltip without dismissing it.\n   */\n  button?: BitkitColorButtonProps;\n  /**\n   * The trigger the tooltip is anchored to. Rendered via `asChild`, so it must accept a ref —\n   * unless `wrapTrigger` puts a wrapper in between.\n   */\n  children: ReactNode;\n  /** Dismiss the tooltip when the trigger is clicked. */\n  closeOnClick?: TooltipRootProps['closeOnClick'];\n  /**\n   * Render the tooltip inline instead of in a portal. Only needed when it must stay inside its\n   * parent's DOM subtree — a dialog already sets this for you.\n   */\n  disablePortal?: boolean;\n  /** Render the trigger without a tooltip — for hints that only apply in some states. */\n  disabled?: TooltipRootProps['disabled'];\n  /**\n   * Icon rendered after `text`, at size 16. Use it for the affordance the tooltip describes — an\n   * `IconArrowNortheast` when the trigger opens something in a new tab, for instance.\n   */\n  icon?: BitkitIconComponent;\n  /** Target for the \"Learn more\" link. `_blank` also sets `rel=\"noopener noreferrer\"`. */\n  learnMoreTarget?: HTMLAnchorElement['target'];\n  /**\n   * Adds a \"Learn more\" link pointing here. Setting it makes the tooltip interactive, so the\n   * pointer can move into the tooltip to reach the link.\n   */\n  learnMoreUrl?: string;\n  /** Called when the tooltip opens or closes, including from hover and focus. */\n  onOpenChange?: TooltipRootProps['onOpenChange'];\n  /** Controlled open state. Leave unset to let hover and focus drive it. */\n  open?: TooltipRootProps['open'];\n  /** Delay in ms before an uncontrolled tooltip opens on hover. */\n  openDelay?: TooltipRootProps['openDelay'];\n  /** Where the tooltip sits relative to the trigger (default `top`). It flips if space is short. */\n  placement?: NonNullable<TooltipRootProps['positioning']>['placement'];\n  /** The tooltip's text. Plain string only — use `icon`, `learnMoreUrl` and `button` for the rest. */\n  text: string;\n  /**\n   * Render the trigger inside a focusable wrapper instead of on the trigger itself. Only for triggers\n   * that cannot take focus — on a focusable one this adds a second, redundant tab stop for the same\n   * control. A disabled `<button>` dispatches no pointer events and is out of the tab order, so\n   * without a wrapper the tooltip never opens — in the one state whose explanation the user actually\n   * needs.\n   *\n   * Chakra v2's `Tooltip` had this built in as `shouldWrapChildren`, rendering a\n   * `<span display=\"inline-block\" tabIndex={0}>` that carried the trigger props. Ark's tooltip has no\n   * equivalent, and Chakra's own v2->v3 codemod replaces it with a bare `<span>` — which restores\n   * hover but silently drops the tab stop, so the tooltip stays unreachable by keyboard. This prop is\n   * that escape hatch, `tabIndex` included.\n   *\n   * The wrapper is a plain focusable span, so focusing it announces the trigger's label and the\n   * tooltip text, not the trigger's own state — a disabled button inside is not re-announced as\n   * disabled. Conveying that would mean keeping the trigger focusable with `aria-disabled` instead\n   * of the native attribute, which is a change to what `disabled` means, not a tooltip concern.\n   */\n  wrapTrigger?: boolean;\n};\n\n/**\n * A hover/focus tooltip anchored to its child. `text` carries the message, `icon` appends a glyph\n * after it, and `learnMoreUrl`/`button` add a link and an action.\n *\n * Setting either of those two makes the tooltip *interactive*: it gains roomier padding and stays\n * open while the pointer travels into it, so the link and the button can actually be reached.\n *\n * The content renders in a portal, so it escapes any ancestor that traps stacking (`isolation`,\n * `transform`, a `z-index`ed positioned box) or clips overflow. Dialogs turn that off through\n * `BitkitPortalContext` so an interactive tooltip stays inside the focus trap; `disablePortal` is\n * the manual override.\n */\nconst BitkitTooltip = ({\n  button,\n  children,\n  closeOnClick,\n  disablePortal,\n  disabled,\n  icon: Icon,\n  learnMoreTarget,\n  learnMoreUrl,\n  onOpenChange,\n  open,\n  openDelay,\n  placement = 'top',\n  text,\n  wrapTrigger,\n}: BitkitTooltipProps) => {\n  const { disablePortal: disablePortalFromContext } = useContext(BitkitPortalContext);\n  const isInteractive = !!learnMoreUrl || !!button;\n\n  // Anchor positioning to the trigger node by ref rather than relying on Zag's\n  // id/data-scope lookup. When the trigger is also wrapped by another `asChild`\n  // trigger (e.g. Menu.Trigger), the outer trigger's id and data-scope/data-part\n  // overwrite ours on the shared node, so `getTriggerEl()` can't find it and the\n  // tooltip loses its anchor. `getAnchorElement` takes precedence over the id\n  // lookup, so this is safe in the standalone case too.\n  const triggerRef = useRef<HTMLElement>(null);\n\n  return (\n    <Tooltip.Root\n      closeOnClick={closeOnClick}\n      disabled={disabled}\n      interactive={isInteractive || undefined}\n      onOpenChange={onOpenChange}\n      open={open}\n      openDelay={openDelay}\n      paddingSize={isInteractive ? 'lg' : undefined}\n      positioning={{ getAnchorElement: () => triggerRef.current, placement, offset: { mainAxis: 4, crossAxis: 0 } }}\n    >\n      <Tooltip.Trigger ref={triggerRef as Ref<HTMLButtonElement>} asChild>\n        {wrapTrigger || !isValidElement(children) ? (\n          // inline-flex so the wrapper shrink-wraps the trigger: a plain inline span adds descender\n          // space below it and shifts the alignment of whatever sits next to it.\n          <Box\n            as=\"span\"\n            display=\"inline-flex\"\n            tabIndex={0}\n            css={{\n              // The wrapper owns the tab stop, but the focus ring belongs on the trigger: an outline\n              // follows the border-radius of the element it is drawn on, and the wrapper has none —\n              // so leaving it here squares off a pill or a round trigger.\n              _focusVisible: {\n                outline: 'none',\n                '& > *': {\n                  outlineColor: 'var(--focus-ring-color)',\n                  outlineOffset: 'var(--focus-ring-offset, 2px)',\n                  outlineStyle: 'var(--focus-ring-style, solid)',\n                  outlineWidth: 'var(--focus-ring-width, 2px)',\n                },\n              },\n            }}\n          >\n            {children}\n          </Box>\n        ) : (\n          children\n        )}\n      </Tooltip.Trigger>\n      <Portal disabled={disablePortal || disablePortalFromContext}>\n        <Tooltip.Positioner>\n          <Tooltip.Content css={isInteractive && { minWidth: rem(240) }}>\n            <Tooltip.Arrow>\n              <Tooltip.ArrowTip />\n            </Tooltip.Arrow>\n            <Box display=\"flex\" gap=\"8\">\n              {text}\n              {Icon && <Icon flexShrink=\"0\" size=\"16\" />}\n            </Box>\n            {isInteractive && (\n              <Box alignItems=\"center\" display=\"flex\" gap=\"16\" marginBlockStart=\"16\">\n                {learnMoreUrl && (\n                  <Link\n                    color=\"color/purple/highlight\"\n                    href={learnMoreUrl}\n                    rel={learnMoreTarget === '_blank' ? 'noopener noreferrer' : undefined}\n                    target={learnMoreTarget}\n                  >\n                    Learn more\n                  </Link>\n                )}\n                {button && <BitkitColorButton css={{ marginInlineStart: 'auto' }} {...button} />}\n              </Box>\n            )}\n          </Tooltip.Content>\n        </Tooltip.Positioner>\n      </Portal>\n    </Tooltip.Root>\n  );\n};\n\nBitkitTooltip.displayName = 'BitkitTooltip';\n\nexport default BitkitTooltip;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAsFA,IAAM,iBAAiB,EACrB,QACA,UACA,cACA,eACA,UACA,MAAM,MACN,iBACA,cACA,cACA,MACA,WACA,YAAY,OACZ,MACA,kBACwB;CACxB,MAAM,EAAE,eAAe,6BAA6B,WAAW,mBAAmB;CAClF,MAAM,gBAAgB,CAAC,CAAC,gBAAgB,CAAC,CAAC;CAQ1C,MAAM,aAAa,OAAoB,IAAI;CAE3C,OACE,qBAAC,QAAQ,MAAT;EACgB;EACJ;EACV,aAAa,iBAAiB,KAAA;EAChB;EACR;EACK;EACX,aAAa,gBAAgB,OAAO,KAAA;EACpC,aAAa;GAAE,wBAAwB,WAAW;GAAS;GAAW,QAAQ;IAAE,UAAU;IAAG,WAAW;GAAE;EAAE;EAR9G,UAAA,CAUE,oBAAC,QAAQ,SAAT;GAAiB,KAAK;GAAsC,SAAA;GACzD,UAAA,eAAe,CAAC,eAAe,QAAQ,IAGtC,oBAAC,KAAD;IACE,IAAG;IACH,SAAQ;IACR,UAAU;IACV,KAAK,EAIH,eAAe;KACb,SAAS;KACT,SAAS;MACP,cAAc;MACd,eAAe;MACf,cAAc;MACd,cAAc;KAChB;IACF,EACF;IAEC;GACE,CAAA,IAEL;EAEa,CAAA,GACjB,oBAAC,QAAD;GAAQ,UAAU,iBAAiB;GACjC,UAAA,oBAAC,QAAQ,YAAT,EAAA,UACE,qBAAC,QAAQ,SAAT;IAAiB,KAAK,iBAAiB,EAAE,UAAU,IAAI,GAAG,EAAE;IAA5D,UAAA;KACE,oBAAC,QAAQ,OAAT,EAAA,UACE,oBAAC,QAAQ,UAAT,CAAmB,CAAA,EACN,CAAA;KACf,qBAAC,KAAD;MAAK,SAAQ;MAAO,KAAI;MAAxB,UAAA,CACG,MACA,QAAQ,oBAAC,MAAD;OAAM,YAAW;OAAI,MAAK;MAAM,CAAA,CACtC;;KACJ,iBACC,qBAAC,KAAD;MAAK,YAAW;MAAS,SAAQ;MAAO,KAAI;MAAK,kBAAiB;MAAlE,UAAA,CACG,gBACC,oBAAC,MAAD;OACE,OAAM;OACN,MAAM;OACN,KAAK,oBAAoB,WAAW,wBAAwB,KAAA;OAC5D,QAAQ;OACT,UAAA;MAEK,CAAA,GAEP,UAAU,oBAAC,mBAAD;OAAmB,KAAK,EAAE,mBAAmB,OAAO;OAAG,GAAI;MAAS,CAAA,CAC5E;;IAEQ;GACC,CAAA,EAAA,CAAA;EACd,CAAA,CACI;;AAElB;AAEA,cAAc,cAAc"}
+{"version":3,"file":"BitkitTooltip.js","names":[],"sources":["../../../lib/components/BitkitTooltip/BitkitTooltip.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { Link } from '@chakra-ui/react/link';\nimport { Portal } from '@chakra-ui/react/portal';\nimport { Tooltip, type TooltipRootProps } from '@chakra-ui/react/tooltip';\nimport { isValidElement, type ReactNode, type Ref, useContext, useRef } from 'react';\n\nimport { type BitkitIconComponent } from '../../icons';\nimport { rem } from '../../theme/themeUtils';\nimport BitkitPortalContext from '../../utilities/BitkitPortalContext';\nimport BitkitColorButton, { type BitkitColorButtonProps } from '../BitkitColorButton/BitkitColorButton';\n\nexport type BitkitTooltipProps = {\n  /**\n   * Action button rendered at the end of the tooltip. Setting it makes the tooltip interactive, so\n   * the pointer can move into the tooltip without dismissing it. Defaults to the `white` colour\n   * variant, the one that reads on the tooltip's dark background.\n   */\n  button?: BitkitColorButtonProps;\n  /**\n   * The trigger the tooltip is anchored to. Rendered via `asChild`, so it must accept a ref —\n   * unless `wrapTrigger` puts a wrapper in between.\n   */\n  children: ReactNode;\n  /** Dismiss the tooltip when the trigger is clicked. */\n  closeOnClick?: TooltipRootProps['closeOnClick'];\n  /**\n   * Render the tooltip inline instead of in a portal. Only needed when it must stay inside its\n   * parent's DOM subtree — a dialog already sets this for you.\n   */\n  disablePortal?: boolean;\n  /** Render the trigger without a tooltip — for hints that only apply in some states. */\n  disabled?: TooltipRootProps['disabled'];\n  /**\n   * Icon rendered after `text`, at size 16. Use it for the affordance the tooltip describes — an\n   * `IconArrowNortheast` when the trigger opens something in a new tab, for instance.\n   */\n  icon?: BitkitIconComponent;\n  /** Target for the \"Learn more\" link. `_blank` also sets `rel=\"noopener noreferrer\"`. */\n  learnMoreTarget?: HTMLAnchorElement['target'];\n  /**\n   * Adds a \"Learn more\" link pointing here. Setting it makes the tooltip interactive, so the\n   * pointer can move into the tooltip to reach the link.\n   */\n  learnMoreUrl?: string;\n  /** Called when the tooltip opens or closes, including from hover and focus. */\n  onOpenChange?: TooltipRootProps['onOpenChange'];\n  /** Controlled open state. Leave unset to let hover and focus drive it. */\n  open?: TooltipRootProps['open'];\n  /** Delay in ms before an uncontrolled tooltip opens on hover. */\n  openDelay?: TooltipRootProps['openDelay'];\n  /** Where the tooltip sits relative to the trigger (default `top`). It flips if space is short. */\n  placement?: NonNullable<TooltipRootProps['positioning']>['placement'];\n  /** The tooltip's text. Plain string only — use `icon`, `learnMoreUrl` and `button` for the rest. */\n  text: string;\n  /**\n   * Render the trigger inside a focusable wrapper instead of on the trigger itself. Only for triggers\n   * that cannot take focus — on a focusable one this adds a second, redundant tab stop for the same\n   * control. A disabled `<button>` dispatches no pointer events and is out of the tab order, so\n   * without a wrapper the tooltip never opens — in the one state whose explanation the user actually\n   * needs.\n   *\n   * Chakra v2's `Tooltip` had this built in as `shouldWrapChildren`, rendering a\n   * `<span display=\"inline-block\" tabIndex={0}>` that carried the trigger props. Ark's tooltip has no\n   * equivalent, and Chakra's own v2->v3 codemod replaces it with a bare `<span>` — which restores\n   * hover but silently drops the tab stop, so the tooltip stays unreachable by keyboard. This prop is\n   * that escape hatch, `tabIndex` included.\n   *\n   * The wrapper is a plain focusable span, so focusing it announces the trigger's label and the\n   * tooltip text, not the trigger's own state — a disabled button inside is not re-announced as\n   * disabled. Conveying that would mean keeping the trigger focusable with `aria-disabled` instead\n   * of the native attribute, which is a change to what `disabled` means, not a tooltip concern.\n   */\n  wrapTrigger?: boolean;\n};\n\n/**\n * A hover/focus tooltip anchored to its child. `text` carries the message, `icon` appends a glyph\n * after it, and `learnMoreUrl`/`button` add a link and an action.\n *\n * Setting either of those two makes the tooltip *interactive*: it gains roomier padding and stays\n * open while the pointer travels into it, so the link and the button can actually be reached.\n *\n * The content renders in a portal, so it escapes any ancestor that traps stacking (`isolation`,\n * `transform`, a `z-index`ed positioned box) or clips overflow. Dialogs turn that off through\n * `BitkitPortalContext` so an interactive tooltip stays inside the focus trap; `disablePortal` is\n * the manual override.\n */\nconst BitkitTooltip = ({\n  button,\n  children,\n  closeOnClick,\n  disablePortal,\n  disabled,\n  icon: Icon,\n  learnMoreTarget,\n  learnMoreUrl,\n  onOpenChange,\n  open,\n  openDelay,\n  placement = 'top',\n  text,\n  wrapTrigger,\n}: BitkitTooltipProps) => {\n  const { disablePortal: disablePortalFromContext } = useContext(BitkitPortalContext);\n  const isInteractive = !!learnMoreUrl || !!button;\n\n  // Anchor positioning to the trigger node by ref rather than relying on Zag's\n  // id/data-scope lookup. When the trigger is also wrapped by another `asChild`\n  // trigger (e.g. Menu.Trigger), the outer trigger's id and data-scope/data-part\n  // overwrite ours on the shared node, so `getTriggerEl()` can't find it and the\n  // tooltip loses its anchor. `getAnchorElement` takes precedence over the id\n  // lookup, so this is safe in the standalone case too.\n  const triggerRef = useRef<HTMLElement>(null);\n\n  return (\n    <Tooltip.Root\n      closeOnClick={closeOnClick}\n      disabled={disabled}\n      interactive={isInteractive || undefined}\n      onOpenChange={onOpenChange}\n      open={open}\n      openDelay={openDelay}\n      paddingSize={isInteractive ? 'lg' : undefined}\n      positioning={{ getAnchorElement: () => triggerRef.current, placement, offset: { mainAxis: 4, crossAxis: 0 } }}\n    >\n      <Tooltip.Trigger ref={triggerRef as Ref<HTMLButtonElement>} asChild>\n        {wrapTrigger || !isValidElement(children) ? (\n          // inline-flex so the wrapper shrink-wraps the trigger: a plain inline span adds descender\n          // space below it and shifts the alignment of whatever sits next to it.\n          <Box\n            as=\"span\"\n            display=\"inline-flex\"\n            tabIndex={0}\n            css={{\n              // The wrapper owns the tab stop, but the focus ring belongs on the trigger: an outline\n              // follows the border-radius of the element it is drawn on, and the wrapper has none —\n              // so leaving it here squares off a pill or a round trigger.\n              _focusVisible: {\n                outline: 'none',\n                '& > *': {\n                  outlineColor: 'var(--focus-ring-color)',\n                  outlineOffset: 'var(--focus-ring-offset, 2px)',\n                  outlineStyle: 'var(--focus-ring-style, solid)',\n                  outlineWidth: 'var(--focus-ring-width, 2px)',\n                },\n              },\n            }}\n          >\n            {children}\n          </Box>\n        ) : (\n          children\n        )}\n      </Tooltip.Trigger>\n      <Portal disabled={disablePortal || disablePortalFromContext}>\n        <Tooltip.Positioner>\n          <Tooltip.Content css={isInteractive && { minWidth: rem(240) }}>\n            <Tooltip.Arrow>\n              <Tooltip.ArrowTip />\n            </Tooltip.Arrow>\n            <Box display=\"flex\" gap=\"8\">\n              {text}\n              {Icon && <Icon flexShrink=\"0\" size=\"16\" />}\n            </Box>\n            {isInteractive && (\n              <Box alignItems=\"center\" display=\"flex\" gap=\"16\" marginBlockStart=\"16\">\n                {learnMoreUrl && (\n                  <Link\n                    color=\"color/purple/highlight\"\n                    href={learnMoreUrl}\n                    rel={learnMoreTarget === '_blank' ? 'noopener noreferrer' : undefined}\n                    target={learnMoreTarget}\n                  >\n                    Learn more\n                  </Link>\n                )}\n                {button && <BitkitColorButton colorVariant=\"white\" marginInlineStart=\"auto\" {...button} />}\n              </Box>\n            )}\n          </Tooltip.Content>\n        </Tooltip.Positioner>\n      </Portal>\n    </Tooltip.Root>\n  );\n};\n\nBitkitTooltip.displayName = 'BitkitTooltip';\n\nexport default BitkitTooltip;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAuFA,IAAM,iBAAiB,EACrB,QACA,UACA,cACA,eACA,UACA,MAAM,MACN,iBACA,cACA,cACA,MACA,WACA,YAAY,OACZ,MACA,kBACwB;CACxB,MAAM,EAAE,eAAe,6BAA6B,WAAW,mBAAmB;CAClF,MAAM,gBAAgB,CAAC,CAAC,gBAAgB,CAAC,CAAC;CAQ1C,MAAM,aAAa,OAAoB,IAAI;CAE3C,OACE,qBAAC,QAAQ,MAAT;EACgB;EACJ;EACV,aAAa,iBAAiB,KAAA;EAChB;EACR;EACK;EACX,aAAa,gBAAgB,OAAO,KAAA;EACpC,aAAa;GAAE,wBAAwB,WAAW;GAAS;GAAW,QAAQ;IAAE,UAAU;IAAG,WAAW;GAAE;EAAE;EAR9G,UAAA,CAUE,oBAAC,QAAQ,SAAT;GAAiB,KAAK;GAAsC,SAAA;GACzD,UAAA,eAAe,CAAC,eAAe,QAAQ,IAGtC,oBAAC,KAAD;IACE,IAAG;IACH,SAAQ;IACR,UAAU;IACV,KAAK,EAIH,eAAe;KACb,SAAS;KACT,SAAS;MACP,cAAc;MACd,eAAe;MACf,cAAc;MACd,cAAc;KAChB;IACF,EACF;IAEC;GACE,CAAA,IAEL;EAEa,CAAA,GACjB,oBAAC,QAAD;GAAQ,UAAU,iBAAiB;GACjC,UAAA,oBAAC,QAAQ,YAAT,EAAA,UACE,qBAAC,QAAQ,SAAT;IAAiB,KAAK,iBAAiB,EAAE,UAAU,IAAI,GAAG,EAAE;IAA5D,UAAA;KACE,oBAAC,QAAQ,OAAT,EAAA,UACE,oBAAC,QAAQ,UAAT,CAAmB,CAAA,EACN,CAAA;KACf,qBAAC,KAAD;MAAK,SAAQ;MAAO,KAAI;MAAxB,UAAA,CACG,MACA,QAAQ,oBAAC,MAAD;OAAM,YAAW;OAAI,MAAK;MAAM,CAAA,CACtC;;KACJ,iBACC,qBAAC,KAAD;MAAK,YAAW;MAAS,SAAQ;MAAO,KAAI;MAAK,kBAAiB;MAAlE,UAAA,CACG,gBACC,oBAAC,MAAD;OACE,OAAM;OACN,MAAM;OACN,KAAK,oBAAoB,WAAW,wBAAwB,KAAA;OAC5D,QAAQ;OACT,UAAA;MAEK,CAAA,GAEP,UAAU,oBAAC,mBAAD;OAAmB,cAAa;OAAQ,mBAAkB;OAAO,GAAI;MAAS,CAAA,CACtF;;IAEQ;GACC,CAAA,EAAA,CAAA;EACd,CAAA,CACI;;AAElB;AAEA,cAAc,cAAc"}

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

@@ -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

@@ -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

@@ -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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"}
+{"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":";;;;;;;;;;;;;AAiCA,IAAM,CAAC,iBAAiB,cAAc,gBAAkD;CACtF,MAAM;CACN,cAAc,EAAE,SAAS,QAAQ;AACnC,CAAC;AAED,IAAM,uBAAuB,YAAmC;CAE9D,OADe,cAAc,EAAE,KAAK,WAAW,CACxC,CAAA,CAAO,EAAE,QAAQ,CAAC;AAC3B;AAsBA,IAAM,SAAS,EAAE,aAAa,QAAQ,oBAAoB,cAA0B;CAClF,MAAM,OAAO,mBAAmB;CAChC,MAAM,SAAS,oBAAoB,OAAO;CAE1C,MAAM,cAAc,MAAe,cACjC,oBAAC,SAAS,cAAV;EAA4D;EAAiB;EAC3E,UAAA,oBAAC,SAAS,aAAV,EAAA,WACI,cAAc;GACd,IAAI,CAAC,UAAU,UACb,OAAO,OAAO;IAAE;IAAW;IAAM;GAAU,CAAC;GAG9C,MAAM,SAAS,qBAAqB;IAAE;IAAW;IAAM;GAAU,CAAC;GAElE,OACE,qBAAC,SAAS,QAAV,EAAA,UAAA,CACG,OAAO;IAAE;IAAW;IAAM;GAAU,CAAC,GACtC,qBAAC,SAAS,eAAV,EAAA,UAAA;IACG;IACA,KAAK,WAAW,gBAAgB,IAAI,CAAC,CAAC,KAAK,OAAO,UAAU,WAAW,OAAO,CAAC,GAAG,WAAW,KAAK,CAAC,CAAC;IACpG,UAAU,oBAAC,KAAD;KAAK,KAAK,CAAC,OAAO,QAAQ,EAAE,WAAW,UAAU,SAAS,EAAE,CAAC;KAAI,UAAA;IAAY,CAAA;GAClE,EAAA,CAAA,CACT,EAAA,CAAA;EAErB,EACoB,CAAA;CACD,GArBK,UAAU,KAAK,GAAG,CAqBvB;CAGzB,OAAO,KAAK,WAAW,gBAAgB,KAAK,WAAW,QAAQ,CAAC,CAAC,KAAK,MAAM,UAAU,WAAW,MAAM,CAAC,KAAK,CAAC,CAAC;AACjH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0CA,IAAM,OAAO,YACV,EAAE,UAAU,QAAQ,oBAAoB,UAAU,SAAS,GAAG,SAAS,QAAQ;CAC9E,MAAM,cAAc,YAAY,UAAU,oBAAC,SAAS,mBAAV,CAA6B,CAAA,IAAI,KAAA;CAC3E,MAAM,SAAS,oBAAoB,OAAO;CAE1C,OACE,oBAAC,iBAAD;EAAiB,OAAO,EAAE,QAAQ;EAChC,UAAA,oBAAC,SAAS,MAAV;GAAoB;GAAc;GAAS,GAAI;GAC7C,UAAA,qBAAC,SAAS,MAAV,EAAA,UAAA,CACE,oBAAC,OAAD;IACe;IACL;IACY;IACX;GACV,CAAA,GACA,YAAY,oBAAC,KAAD;IAAK,KAAK,CAAC,OAAO,QAAQ,EAAE,WAAW,EAAE,CAAC;IAAI;GAAc,CAAA,CAC5D,EAAA,CAAA;EACF,CAAA;CACA,CAAA;AAErB,CACF;AACA,KAAK,cAAc;AAanB,IAAM,SAAS,YAAuD,OAAO,QAAQ;CACnF,MAAM,EAAE,SAAS,YAAY,OAAO,SAAS,YAAY,YAAY,YAAY,GAAG,SAAS;CAC7F,MAAM,EAAE,YAAY,WAAW;CAC/B,MAAM,SAAS,oBAAoB,OAAO;CAC1C,MAAM,YAAY,cAAc,cAAc;CAC9C,MAAM,aAAa,WAAW,QAAQ,SAAS;CAE/C,MAAM,aAAa,YAAY,eAAe,mBAAmB;CAEjE,OACE,qBAAC,SAAS,eAAV;EAA6B;EAAK,WAAW,aAAa,UAAU,KAAA;EAAW,GAAI;EAAnF,UAAA;GACE,oBAAC,SAAS,iBAAV,EAAA,UACE,oBAAC,YAAD,EAAY,MAAK,KAAM,CAAA,EACC,CAAA;GAC1B,qBAAC,SAAS,YAAV,EAAA,UAAA,CACG,OACA,WAAW,oBAAC,MAAD;IAAM,KAAK,OAAO;IAAgB,UAAA;GAAc,CAAA,CACzC,EAAA,CAAA;GACpB,aACC,qBAAC,KAAD;IAAK,KAAK,OAAO;IAAjB,UAAA;KACG,cAAc,oBAAC,mBAAD,EAAmB,MAAK,KAAM,CAAA;KAC5C,cAAc,oBAAC,YAAD,EAAY,MAAK,KAAM,CAAA;KACrC,cAAc,oBAAC,QAAD,EAAA,UAAO,WAAiB,CAAA;IACpC;;GAEN,cACC,oBAAC,KAAD;IAAK,KAAK,OAAO;IAAc,UAAA,QAAQ,KAAK,WAAW,aAAa,QAAQ,EAAE,MAAM,KAAK,CAAC,CAAC;GAAO,CAAA;EAE9E;;AAE5B,CAAC;AACD,OAAO,cAAc;AAiBrB,IAAM,OAAO,YAAqD,OAAO,QAAQ;CAC/E,MAAM,EACJ,SACA,OACA,YACA,MAAM,MACN,WACA,OACA,SACA,YAAY,YACZ,YACA,GAAG,SACD;CACJ,MAAM,EAAE,YAAY,WAAW;CAC/B,MAAM,SAAS,oBAAoB,OAAO;CAC1C,MAAM,YAAY,cAAc,cAAc;CAC9C,MAAM,aAAa,WAAW,QAAQ,SAAS;CAE/C,OACE,qBAAC,SAAS,MAAV;EAAoB;EAAK,WAAW,aAAa,UAAU,KAAA;EAAW,GAAI;EAA1E,UAAA;GACG,QAAQ,oBAAC,MAAD;IAAM,OAAO;IAAW,MAAK;GAAM,CAAA;GAC3C,SAAS,aAAa,OAAO,EAAE,MAAM,KAAK,CAAC;GAC5C,qBAAC,SAAS,UAAV,EAAA,UAAA,CACG,OACA,WAAW,oBAAC,MAAD;IAAM,KAAK,OAAO;IAAgB,UAAA;GAAc,CAAA,CAC3C,EAAA,CAAA;GAClB,aACC,qBAAC,KAAD;IAAK,KAAK,OAAO;IAAjB,UAAA;KACG,cAAc,oBAAC,mBAAD,EAAmB,MAAK,KAAM,CAAA;KAC5C,cAAc,oBAAC,YAAD,EAAY,MAAK,KAAM,CAAA;KACrC,cAAc,oBAAC,QAAD,EAAA,UAAO,WAAiB,CAAA;IACpC;;GAEN,cACC,oBAAC,KAAD;IAAK,KAAK,OAAO;IAAc,UAAA,QAAQ,KAAK,WAAW,aAAa,QAAQ,EAAE,MAAM,KAAK,CAAC,CAAC;GAAO,CAAA;EAEvF;;AAEnB,CAAC;AACD,KAAK,cAAc;AAInB,IAAM,iBAAiB,kBAAkB,MAAM;CAC7C;CACA;AACF,CAAC"}

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

@@ -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

@@ -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

@@ -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"}
+{"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

@@ -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

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