@bitrise/bitkit-v2 0.3.462-beta.2927 → 0.3.463

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

@@ -1,14 +1,7 @@
 import { TooltipRootProps } from '@chakra-ui/react/tooltip';
 import { ReactNode } from 'react';
 import { BitkitIconComponent } from '../../icons';
-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. Defaults to the `white` colour
-     * variant, the one that reads on the tooltip's dark background.
-     */
-    button?: BitkitColorButtonProps;
     /**
      * The trigger the tooltip is anchored to. Rendered via `asChild`, so it must accept a ref —
      * unless `wrapTrigger` puts a wrapper in between.
@@ -28,13 +21,6 @@ export type BitkitTooltipProps = {
      * `IconArrowNortheast` when the trigger opens something in a new tab, for instance.
      */
     icon?: BitkitIconComponent;
-    /** Target for the "Learn more" link. `_blank` also sets `rel="noopener noreferrer"`. */
-    learnMoreTarget?: HTMLAnchorElement['target'];
-    /**
-     * Adds a "Learn more" link pointing here. Setting it makes the tooltip interactive, so the
-     * pointer can move into the tooltip to reach the link.
-     */
-    learnMoreUrl?: string;
     /** Called when the tooltip opens or closes, including from hover and focus. */
     onOpenChange?: TooltipRootProps['onOpenChange'];
     /** Controlled open state. Leave unset to let hover and focus drive it. */
@@ -43,7 +29,7 @@ export type BitkitTooltipProps = {
     openDelay?: TooltipRootProps['openDelay'];
     /** Where the tooltip sits relative to the trigger (default `top`). It flips if space is short. */
     placement?: NonNullable<TooltipRootProps['positioning']>['placement'];
-    /** The tooltip's text. Plain string only — use `icon`, `learnMoreUrl` and `button` for the rest. */
+    /** The tooltip's text. Plain string only — use `icon` for a glyph after it. */
     text: string;
     /**
      * Render the trigger inside a focusable wrapper instead of on the trigger itself. Only for triggers
@@ -66,19 +52,17 @@ export type BitkitTooltipProps = {
     wrapTrigger?: boolean;
 };
 /**
- * A hover/focus tooltip anchored to its child. `text` carries the message, `icon` appends a glyph
- * after it, and `learnMoreUrl`/`button` add a link and an action.
- *
- * Setting either of those two makes the tooltip *interactive*: it gains roomier padding and stays
- * open while the pointer travels into it, so the link and the button can actually be reached.
+ * A hover/focus tooltip anchored to its child: `text` carries the message and `icon` appends a
+ * glyph after it. Text only — a tooltip closes when focus leaves its trigger and ignores touch, so a
+ * link or a button inside one couldn't be reached. For those use `BitkitToggletip`, which looks the
+ * same and opens on click.
  *
  * The content renders in a portal, so it escapes any ancestor that traps stacking (`isolation`,
  * `transform`, a `z-index`ed positioned box) or clips overflow. Dialogs turn that off through
- * `BitkitPortalContext` so an interactive tooltip stays inside the focus trap; `disablePortal` is
- * the manual override.
+ * `BitkitPortalContext`; `disablePortal` is the manual override.
  */
 declare const BitkitTooltip: {
-    ({ button, children, closeOnClick, disablePortal, disabled, icon: Icon, learnMoreTarget, learnMoreUrl, onOpenChange, open, openDelay, placement, text, wrapTrigger, }: BitkitTooltipProps): import('react').JSX.Element;
+    ({ children, closeOnClick, disablePortal, disabled, icon: Icon, onOpenChange, open, openDelay, placement, text, wrapTrigger, }: BitkitTooltipProps): import('react').JSX.Element;
     displayName: string;
 };
 export default BitkitTooltip;

package/dist/components/BitkitTooltip/BitkitTooltip.js

@@ -1,37 +1,29 @@
 import BitkitPortalContext from "../../utilities/BitkitPortalContext.js";
-import { rem } from "../../theme/themeUtils.js";
-import BitkitColorButton from "../BitkitColorButton/BitkitColorButton.js";
 import { Box } from "@chakra-ui/react/box";
 import { isValidElement, useContext, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Portal } from "@chakra-ui/react/portal";
 import { Tooltip } from "@chakra-ui/react/tooltip";
-import { Link } from "@chakra-ui/react/link";
 //#region lib/components/BitkitTooltip/BitkitTooltip.tsx
 /**
-* A hover/focus tooltip anchored to its child. `text` carries the message, `icon` appends a glyph
-* after it, and `learnMoreUrl`/`button` add a link and an action.
-*
-* Setting either of those two makes the tooltip *interactive*: it gains roomier padding and stays
-* open while the pointer travels into it, so the link and the button can actually be reached.
+* A hover/focus tooltip anchored to its child: `text` carries the message and `icon` appends a
+* glyph after it. Text only — a tooltip closes when focus leaves its trigger and ignores touch, so a
+* link or a button inside one couldn't be reached. For those use `BitkitToggletip`, which looks the
+* same and opens on click.
 *
 * The content renders in a portal, so it escapes any ancestor that traps stacking (`isolation`,
 * `transform`, a `z-index`ed positioned box) or clips overflow. Dialogs turn that off through
-* `BitkitPortalContext` so an interactive tooltip stays inside the focus trap; `disablePortal` is
-* the manual override.
+* `BitkitPortalContext`; `disablePortal` is the manual override.
 */
-var BitkitTooltip = ({ button, children, closeOnClick, disablePortal, disabled, icon: Icon, learnMoreTarget, learnMoreUrl, onOpenChange, open, openDelay, placement = "top", text, wrapTrigger }) => {
+var BitkitTooltip = ({ children, closeOnClick, disablePortal, disabled, icon: Icon, onOpenChange, open, openDelay, placement = "top", text, wrapTrigger }) => {
 	const { disablePortal: disablePortalFromContext } = useContext(BitkitPortalContext);
-	const isInteractive = !!learnMoreUrl || !!button;
 	const triggerRef = useRef(null);
 	return /* @__PURE__ */ jsxs(Tooltip.Root, {
 		closeOnClick,
 		disabled,
-		interactive: isInteractive || void 0,
 		onOpenChange,
 		open,
 		openDelay,
-		paddingSize: isInteractive ? "lg" : void 0,
 		positioning: {
 			getAnchorElement: () => triggerRef.current,
 			placement,
@@ -60,37 +52,14 @@ var BitkitTooltip = ({ button, children, closeOnClick, disablePortal, disabled,
 			}) : children
 		}), /* @__PURE__ */ jsx(Portal, {
 			disabled: disablePortal || disablePortalFromContext,
-			children: /* @__PURE__ */ jsx(Tooltip.Positioner, { children: /* @__PURE__ */ jsxs(Tooltip.Content, {
-				css: isInteractive && { minWidth: rem(240) },
-				children: [
-					/* @__PURE__ */ jsx(Tooltip.Arrow, { children: /* @__PURE__ */ jsx(Tooltip.ArrowTip, {}) }),
-					/* @__PURE__ */ jsxs(Box, {
-						display: "flex",
-						gap: "8",
-						children: [text, Icon && /* @__PURE__ */ jsx(Icon, {
-							flexShrink: "0",
-							size: "16"
-						})]
-					}),
-					isInteractive && /* @__PURE__ */ jsxs(Box, {
-						alignItems: "center",
-						display: "flex",
-						gap: "16",
-						marginBlockStart: "16",
-						children: [learnMoreUrl && /* @__PURE__ */ jsx(Link, {
-							color: "color/purple/highlight",
-							href: learnMoreUrl,
-							rel: learnMoreTarget === "_blank" ? "noopener noreferrer" : void 0,
-							target: learnMoreTarget,
-							children: "Learn more"
-						}), button && /* @__PURE__ */ jsx(BitkitColorButton, {
-							colorVariant: "white",
-							marginInlineStart: "auto",
-							...button
-						})]
-					})
-				]
-			}) })
+			children: /* @__PURE__ */ jsx(Tooltip.Positioner, { children: /* @__PURE__ */ jsxs(Tooltip.Content, { children: [/* @__PURE__ */ jsx(Tooltip.Arrow, { children: /* @__PURE__ */ jsx(Tooltip.ArrowTip, {}) }), /* @__PURE__ */ jsxs(Box, {
+				display: "flex",
+				gap: "8",
+				children: [text, Icon && /* @__PURE__ */ jsx(Icon, {
+					flexShrink: "0",
+					size: "16"
+				})]
+			})] }) })
 		})]
 	});
 };

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. 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"}
+{"version":3,"file":"BitkitTooltip.js","names":[],"sources":["../../../lib/components/BitkitTooltip/BitkitTooltip.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\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 BitkitPortalContext from '../../utilities/BitkitPortalContext';\n\nexport type BitkitTooltipProps = {\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  /** 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` for a glyph after it. */\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 and `icon` appends a\n * glyph after it. Text only — a tooltip closes when focus leaves its trigger and ignores touch, so a\n * link or a button inside one couldn't be reached. For those use `BitkitToggletip`, which looks the\n * same and opens on click.\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`; `disablePortal` is the manual override.\n */\nconst BitkitTooltip = ({\n  children,\n  closeOnClick,\n  disablePortal,\n  disabled,\n  icon: Icon,\n  onOpenChange,\n  open,\n  openDelay,\n  placement = 'top',\n  text,\n  wrapTrigger,\n}: BitkitTooltipProps) => {\n  const { disablePortal: disablePortalFromContext } = useContext(BitkitPortalContext);\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      onOpenChange={onOpenChange}\n      open={open}\n      openDelay={openDelay}\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>\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          </Tooltip.Content>\n        </Tooltip.Positioner>\n      </Portal>\n    </Tooltip.Root>\n  );\n};\n\nBitkitTooltip.displayName = 'BitkitTooltip';\n\nexport default BitkitTooltip;\n"],"mappings":";;;;;;;;;;;;;;;;;AAqEA,IAAM,iBAAiB,EACrB,UACA,cACA,eACA,UACA,MAAM,MACN,cACA,MACA,WACA,YAAY,OACZ,MACA,kBACwB;CACxB,MAAM,EAAE,eAAe,6BAA6B,WAAW,mBAAmB;CAQlF,MAAM,aAAa,OAAoB,IAAI;CAE3C,OACE,qBAAC,QAAQ,MAAT;EACgB;EACJ;EACI;EACR;EACK;EACX,aAAa;GAAE,wBAAwB,WAAW;GAAS;GAAW,QAAQ;IAAE,UAAU;IAAG,WAAW;GAAE;EAAE;EAN9G,UAAA,CAQE,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,EAAA,UAAA,CACE,oBAAC,QAAQ,OAAT,EAAA,UACE,oBAAC,QAAQ,UAAT,CAAmB,CAAA,EACN,CAAA,GACf,qBAAC,KAAD;IAAK,SAAQ;IAAO,KAAI;IAAxB,UAAA,CACG,MACA,QAAQ,oBAAC,MAAD;KAAM,YAAW;KAAI,MAAK;IAAM,CAAA,CACtC;GACU,CAAA,CAAA,EAAA,CAAA,EACC,CAAA;EACd,CAAA,CACI;;AAElB;AAEA,cAAc,cAAc"}

package/dist/components/BitkitTreeView/BitkitTreeView.js

@@ -90,7 +90,10 @@ var Nodes = ({ indentGuide, render, renderBranchFooter, variant }) => {
 * - 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.
+* - A node with `children: []` renders as a leaf, not as an empty branch. For an empty folder, give the
+*   collection a `nodeToChildrenCount` that returns `0` for it, and put `disabled: true` on the node itself:
+*   Zag reads `node.disabled` and ignores the collection's `isNodeDisabled`. The folder then renders in the
+*   disabled colours, cannot be opened, and keeps its actions.
 * - The `navigation` design has no badges, no actions and no subtext on leaves; those slots are drawn
 *   for `files`.
 */

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  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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"}
+{"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. For an empty folder, give the\n *   collection a `nodeToChildrenCount` that returns `0` for it, and put `disabled: true` on the node itself:\n *   Zag reads `node.disabled` and ignores the collection's `isNodeDisabled`. The folder then renders in the\n *   disabled colours, cannot be opened, and keeps its actions.\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/components/index.d.ts

@@ -90,8 +90,7 @@ export { default as BitkitTextArea, type BitkitTextAreaProps } from './BitkitTex
 export { default as BitkitTextInput, type BitkitTextInputProps } from './BitkitTextInput/BitkitTextInput';
 export { type BitkitToastProps, default as createBitkitToast, dismissBitkitToast } from './BitkitToast/BitkitToast';
 export { default as BitkitToggleButton, type BitkitToggleButtonProps } from './BitkitToggleButton/BitkitToggleButton';
+export { default as BitkitToggletip, type BitkitToggletipProps } from './BitkitToggletip/BitkitToggletip';
 export { default as BitkitTooltip, type BitkitTooltipProps } from './BitkitTooltip/BitkitTooltip';
 export { default as BitkitTour, type BitkitTourInstance, type BitkitTourOptions, type BitkitTourProps, type BitkitTourSecondaryAction, type BitkitTourStep, useBitkitTour, } from './BitkitTour/BitkitTour';
 export { default as BitkitTreeView, type BitkitTreeViewBranchProps, type BitkitTreeViewExpandedChangeDetails, type BitkitTreeViewLeafProps, type BitkitTreeViewNodeRenderProps, type BitkitTreeViewRootProps, type BitkitTreeViewSelectionChangeDetails, createTreeCollection, } from './BitkitTreeView/BitkitTreeView';
-export { default as BitkitUISideNav, type BitkitUISideNavBodyProps, type BitkitUISideNavFooterHeadingProps, type BitkitUISideNavFooterProps, type BitkitUISideNavItemProps, type BitkitUISideNavLinkAsAnchorProps, type BitkitUISideNavLinkAsButtonProps, type BitkitUISideNavLinkProps, type BitkitUISideNavProps, type BitkitUISideNavWorkspaceProps, type BitkitUISideNavWorkspaceSelectorProps, uiSideNavRailWidth, } from './BitkitUISideNav/BitkitUISideNav';
-export { useUISideNav } from './BitkitUISideNav/UISideNavContext';

package/dist/main.js

@@ -320,6 +320,7 @@ import BitkitField from "./components/BitkitField/BitkitField.js";
 import BitkitCombobox_default from "./components/BitkitCombobox/BitkitCombobox.js";
 import BitkitDataWidget from "./components/BitkitDataWidget/BitkitDataWidget.js";
 import BitkitDatePicker from "./components/BitkitDatePicker/BitkitDatePicker.js";
+import BitkitToggletip from "./components/BitkitToggletip/BitkitToggletip.js";
 import BitkitDefinitionTooltip from "./components/BitkitDefinitionTooltip/BitkitDefinitionTooltip.js";
 import BitkitDialog_default from "./components/BitkitDialog/BitkitDialog.js";
 import BitkitFormDialog_default from "./components/BitkitDialog/BitkitFormDialog.js";
@@ -383,9 +384,6 @@ import BitkitToggleButton from "./components/BitkitToggleButton/BitkitToggleButt
 import BitkitTour, { useBitkitTour } from "./components/BitkitTour/BitkitTour.js";
 import BitkitTreeView, { createTreeCollection } from "./components/BitkitTreeView/BitkitTreeView.js";
 import useResponsive, { ResponsiveProvider } from "./hooks/useResponsive.js";
-import { useUISideNav } from "./components/BitkitUISideNav/UISideNavContext.js";
-import { uiSideNavRailWidth } from "./theme/slot-recipes/UISideNav.recipe.js";
-import BitkitUISideNav_default from "./components/BitkitUISideNav/BitkitUISideNav.js";
 import bitkitTheme from "./theme/index.js";
 import Provider from "./providers/BitkitProvider.js";
-export { BitkitAccordion_default as BitkitAccordion, BitkitActionBar, BitkitActionMenu_default as BitkitActionMenu, BitkitAlert, BitkitAvatar, BitkitBadge, BitkitBreadcrumb, BitkitButton, BitkitCalendar, BitkitCheckbox, BitkitCheckboxGroup, BitkitCloseButton, BitkitCodeSnippet, BitkitCollapsible, BitkitColorButton, BitkitCombobox_default as BitkitCombobox, BitkitControlButton, BitkitDataWidget, BitkitDatePicker, BitkitDefinitionTooltip, BitkitDialog_default as BitkitDialog, BitkitDraggableCard, BitkitDrawer, BitkitEmptyState, BitkitExpandableCard, BitkitField, BitkitFileInput, BitkitFormDialog_default as BitkitFormDialog, BitkitGroupHeading, BitkitHeading, BitkitIconButton, BitkitInlineLoading, BitkitLabel, BitkitLabelTooltip, BitkitLabeledData, BitkitLightbox, BitkitLink, BitkitLinkButton, BitkitList_default as BitkitList, BitkitMarkdown, BitkitMarkdownCard, BitkitMultiselect_default as BitkitMultiselect, BitkitMultiselectMenu, BitkitNativeSelect, BitkitNoteCard, BitkitNumberInput, BitkitOverflowContent, BitkitOverflowTooltip, BitkitPageFooter_default as BitkitPageFooter, BitkitPageHeader, BitkitPageSidebar_default as BitkitPageSidebar, BitkitPagination, BitkitPaginationLoadMore, BitkitPopover, BitkitProgressBar, BitkitPromoBanner, Provider as BitkitProvider, BitkitRadio, BitkitRadioGroup, BitkitRibbon, BitkitSearchInput, BitkitSectionHeading, BitkitSegmentedControl_default as BitkitSegmentedControl, BitkitSelect_default as BitkitSelect, BitkitSelectMenu, BitkitSelectMenuAction, BitkitSelectableTag_default as BitkitSelectableTag, BitkitSettingsCard_default as BitkitSettingsCard, BitkitSkeletonGroup, BitkitSpinner, BitkitSplitButton_default as BitkitSplitButton, BitkitStat, BitkitSteps_default as BitkitSteps, BitkitStepsCard_default as BitkitStepsCard, BitkitStepsDialog_default as BitkitStepsDialog, BitkitSwitch, BitkitTable, BitkitTableCard, BitkitTabs, BitkitTag, BitkitTagsInput, BitkitTextArea, BitkitTextInput, BitkitToggleButton, BitkitTooltip, BitkitTour, BitkitTreeView, BitkitUISideNav_default as BitkitUISideNav, IconAbortCircle, IconAbortCircleFilled, IconAddons, IconAgent, IconAnchor, IconAndroid, IconApp, IconAppSettings, IconAppStore, IconAppStoreColor, IconApple, IconArchive, IconArchiveDelete, IconArchiveRestore, IconArrowBackAndDown, IconArrowBackAndUp, IconArrowDown, IconArrowForwardAndDown, IconArrowForwardAndUp, IconArrowLeft, IconArrowNortheast, IconArrowNorthwest, IconArrowRight, IconArrowUp, IconArrowsHorizontal, IconArrowsVertical, IconAutomation, IconAws, IconAwsColor, IconBadge3RdParty, IconBadgeBitrise, IconBadgeUpgrade, IconBadgeVersionOk, IconBazel, IconBell, IconBitbot, IconBitbotError, IconBitbucket, IconBitbucketColor, IconBitbucketNeutral, IconBitbucketWhite, IconBlockCircle, IconBook, IconBoxArrowDown, IconBoxDot, IconBoxLinesOverflow, IconBoxLinesWrap, IconBranch, IconBrowserstackColor, IconBug, IconBuild, IconBuildCache, IconBuildCacheFilled, IconBuildEnvSetup, IconBuildHub, IconBuildHubFilled, IconCalendar, IconChangePlan, IconChat, IconCheck, IconCheckCircle, IconCheckCircleFilled, IconChevronDown, IconChevronLeft, IconChevronRight, IconChevronUp, IconCi, IconCiFilled, IconCircle, IconCircleDashed, IconCircleHalfFilled, IconClaude, IconClaudeColor, IconClock, IconCode, IconCodePush, IconCodeSigning, IconCoffee, IconCommit, IconConfigure, IconConnectedAccounts, IconContainer, IconCopilot, IconCopy, IconCordova, IconCpu, IconCreditcard, IconCredits, IconCross, IconCrossCircle, IconCrossCircleFilled, IconCrown, IconCursor, IconCycle, IconDashboard, IconDashboardFilled, IconDeployment, IconDetails, IconDoc, IconDollar, IconDot, IconDotnet, IconDotnetColor, IconDotnetText, IconDotnetTextColor, IconDoubleCircle, IconDownload, IconDragHandle, IconEc2Ami, IconEnterprise, IconErrorCircle, IconErrorCircleFilled, IconExpand, IconExtraBuildCapacity, IconEye, IconEyeSlash, IconFastlane, IconFile, IconFileDoc, IconFilePdf, IconFilePlist, IconFileYml, IconFileZip, IconFilter, IconFlag, IconFlutter, IconFolder, IconFullscreen, IconFullscreenExit, IconGauge, IconGit, IconGithub, IconGitlab, IconGitlabColor, IconGitlabWhite, IconGlobe, IconGo, IconGoogleColor, IconGooglePlay, IconGooglePlayColor, IconGradle, IconGroup, IconHashtag, IconHeadset, IconHeart, IconHistory, IconHourglass, IconImage, IconInfoCircle, IconInfoCircleFilled, IconInsights, IconInsightsFilled, IconInstall, IconInteraction, IconInvoice, IconIonic, IconJapanese, IconJava, IconJavaColor, IconJavaDuke, IconJavaDukeColor, IconKey, IconKiroColor, IconKotlin, IconKotlinColor, IconKotlinWhite, IconLaptop, IconLaunchdarkly, IconLegacyApp, IconLightbulb, IconLink, IconLinux, IconLock, IconLockOpen, IconLogin, IconLogout, IconMacos, IconMagicWand, IconMagnifier, IconMail, IconMcp, IconMedal, IconMemory, IconMenuGrid, IconMenuHamburger, IconMessage, IconMessageAlert, IconMessageQuestion, IconMicrophone, IconMinus, IconMinusCircle, IconMinusCircleFilled, IconMobile, IconMobileLandscape, IconMonitorChart, IconMoreHorizontal, IconMoreVertical, IconNews, IconNextjs, IconNodejs, IconOpenInNew, IconOther, IconOutsideContributor, IconOverview, IconPause, IconPencil, IconPeople, IconPercent, IconPerson, IconPersonWithDesk, IconPin, IconPlay, IconPlus, IconPlusCircle, IconPlusCircleFilled, IconPower, IconProject, IconProjectSettings, IconPull, IconPush, IconPuzzle, IconPython, IconPythonColor, IconQuestionCircle, IconQuestionCircleFilled, IconReact, IconRefresh, IconRegex, IconRelease, IconReleaseFilled, IconRemoteAccess, IconReplace, IconResponsiveness, IconReviewerApproved, IconReviewerAssigned, IconReviewerRejected, IconRuby, IconRubyColor, IconSave, IconSecurityShield, IconSettings, IconSettingsFilled, IconShuffle, IconSiren, IconSkip, IconSkipCircle, IconSkipCircleFilled, IconSlack, IconSlackColor, IconSparkle, IconSparkleFilled, IconSpinnerOnDisabled, IconSpinnerPurple, IconSpinnerPurpleDouble, IconSpinnerWhite, IconStability, IconStack, IconStar, IconStep, IconStop, IconStopwatch, IconTabPlus, IconTag, IconTasks, IconTeams, IconTeamsColor, IconTemplateCode, IconTerminal, IconTerminalFilled, IconTestQuarantine, IconThemeDarkToggle, IconThumbDown, IconThumbUp, IconTools, IconTrash, IconTrigger, IconUbuntu, IconUbuntuColor, IconUnity3D, IconUnpin, IconUpload, IconValidateShield, IconVideo, IconVsCode, IconWarning, IconWarningYellow, IconWebUi, IconWebhooks, IconWindsurf, IconWorkflow, IconWorkflowFlow, IconXTwitter, IconXamarin, IconXcode, ResponsiveProvider, bitkitIcon, bitkitTheme as bitriseTheme, createBitkitToast, createTreeCollection, dismissBitkitToast, rem, uiSideNavRailWidth, useBitkitTour, useResponsive, useStepsDialog, useUISideNav };
+export { BitkitAccordion_default as BitkitAccordion, BitkitActionBar, BitkitActionMenu_default as BitkitActionMenu, BitkitAlert, BitkitAvatar, BitkitBadge, BitkitBreadcrumb, BitkitButton, BitkitCalendar, BitkitCheckbox, BitkitCheckboxGroup, BitkitCloseButton, BitkitCodeSnippet, BitkitCollapsible, BitkitColorButton, BitkitCombobox_default as BitkitCombobox, BitkitControlButton, BitkitDataWidget, BitkitDatePicker, BitkitDefinitionTooltip, BitkitDialog_default as BitkitDialog, BitkitDraggableCard, BitkitDrawer, BitkitEmptyState, BitkitExpandableCard, BitkitField, BitkitFileInput, BitkitFormDialog_default as BitkitFormDialog, BitkitGroupHeading, BitkitHeading, BitkitIconButton, BitkitInlineLoading, BitkitLabel, BitkitLabelTooltip, BitkitLabeledData, BitkitLightbox, BitkitLink, BitkitLinkButton, BitkitList_default as BitkitList, BitkitMarkdown, BitkitMarkdownCard, BitkitMultiselect_default as BitkitMultiselect, BitkitMultiselectMenu, BitkitNativeSelect, BitkitNoteCard, BitkitNumberInput, BitkitOverflowContent, BitkitOverflowTooltip, BitkitPageFooter_default as BitkitPageFooter, BitkitPageHeader, BitkitPageSidebar_default as BitkitPageSidebar, BitkitPagination, BitkitPaginationLoadMore, BitkitPopover, BitkitProgressBar, BitkitPromoBanner, Provider as BitkitProvider, BitkitRadio, BitkitRadioGroup, BitkitRibbon, BitkitSearchInput, BitkitSectionHeading, BitkitSegmentedControl_default as BitkitSegmentedControl, BitkitSelect_default as BitkitSelect, BitkitSelectMenu, BitkitSelectMenuAction, BitkitSelectableTag_default as BitkitSelectableTag, BitkitSettingsCard_default as BitkitSettingsCard, BitkitSkeletonGroup, BitkitSpinner, BitkitSplitButton_default as BitkitSplitButton, BitkitStat, BitkitSteps_default as BitkitSteps, BitkitStepsCard_default as BitkitStepsCard, BitkitStepsDialog_default as BitkitStepsDialog, BitkitSwitch, BitkitTable, BitkitTableCard, BitkitTabs, BitkitTag, BitkitTagsInput, BitkitTextArea, BitkitTextInput, BitkitToggleButton, BitkitToggletip, BitkitTooltip, BitkitTour, BitkitTreeView, IconAbortCircle, IconAbortCircleFilled, IconAddons, IconAgent, IconAnchor, IconAndroid, IconApp, IconAppSettings, IconAppStore, IconAppStoreColor, IconApple, IconArchive, IconArchiveDelete, IconArchiveRestore, IconArrowBackAndDown, IconArrowBackAndUp, IconArrowDown, IconArrowForwardAndDown, IconArrowForwardAndUp, IconArrowLeft, IconArrowNortheast, IconArrowNorthwest, IconArrowRight, IconArrowUp, IconArrowsHorizontal, IconArrowsVertical, IconAutomation, IconAws, IconAwsColor, IconBadge3RdParty, IconBadgeBitrise, IconBadgeUpgrade, IconBadgeVersionOk, IconBazel, IconBell, IconBitbot, IconBitbotError, IconBitbucket, IconBitbucketColor, IconBitbucketNeutral, IconBitbucketWhite, IconBlockCircle, IconBook, IconBoxArrowDown, IconBoxDot, IconBoxLinesOverflow, IconBoxLinesWrap, IconBranch, IconBrowserstackColor, IconBug, IconBuild, IconBuildCache, IconBuildCacheFilled, IconBuildEnvSetup, IconBuildHub, IconBuildHubFilled, IconCalendar, IconChangePlan, IconChat, IconCheck, IconCheckCircle, IconCheckCircleFilled, IconChevronDown, IconChevronLeft, IconChevronRight, IconChevronUp, IconCi, IconCiFilled, IconCircle, IconCircleDashed, IconCircleHalfFilled, IconClaude, IconClaudeColor, IconClock, IconCode, IconCodePush, IconCodeSigning, IconCoffee, IconCommit, IconConfigure, IconConnectedAccounts, IconContainer, IconCopilot, IconCopy, IconCordova, IconCpu, IconCreditcard, IconCredits, IconCross, IconCrossCircle, IconCrossCircleFilled, IconCrown, IconCursor, IconCycle, IconDashboard, IconDashboardFilled, IconDeployment, IconDetails, IconDoc, IconDollar, IconDot, IconDotnet, IconDotnetColor, IconDotnetText, IconDotnetTextColor, IconDoubleCircle, IconDownload, IconDragHandle, IconEc2Ami, IconEnterprise, IconErrorCircle, IconErrorCircleFilled, IconExpand, IconExtraBuildCapacity, IconEye, IconEyeSlash, IconFastlane, IconFile, IconFileDoc, IconFilePdf, IconFilePlist, IconFileYml, IconFileZip, IconFilter, IconFlag, IconFlutter, IconFolder, IconFullscreen, IconFullscreenExit, IconGauge, IconGit, IconGithub, IconGitlab, IconGitlabColor, IconGitlabWhite, IconGlobe, IconGo, IconGoogleColor, IconGooglePlay, IconGooglePlayColor, IconGradle, IconGroup, IconHashtag, IconHeadset, IconHeart, IconHistory, IconHourglass, IconImage, IconInfoCircle, IconInfoCircleFilled, IconInsights, IconInsightsFilled, IconInstall, IconInteraction, IconInvoice, IconIonic, IconJapanese, IconJava, IconJavaColor, IconJavaDuke, IconJavaDukeColor, IconKey, IconKiroColor, IconKotlin, IconKotlinColor, IconKotlinWhite, IconLaptop, IconLaunchdarkly, IconLegacyApp, IconLightbulb, IconLink, IconLinux, IconLock, IconLockOpen, IconLogin, IconLogout, IconMacos, IconMagicWand, IconMagnifier, IconMail, IconMcp, IconMedal, IconMemory, IconMenuGrid, IconMenuHamburger, IconMessage, IconMessageAlert, IconMessageQuestion, IconMicrophone, IconMinus, IconMinusCircle, IconMinusCircleFilled, IconMobile, IconMobileLandscape, IconMonitorChart, IconMoreHorizontal, IconMoreVertical, IconNews, IconNextjs, IconNodejs, IconOpenInNew, IconOther, IconOutsideContributor, IconOverview, IconPause, IconPencil, IconPeople, IconPercent, IconPerson, IconPersonWithDesk, IconPin, IconPlay, IconPlus, IconPlusCircle, IconPlusCircleFilled, IconPower, IconProject, IconProjectSettings, IconPull, IconPush, IconPuzzle, IconPython, IconPythonColor, IconQuestionCircle, IconQuestionCircleFilled, IconReact, IconRefresh, IconRegex, IconRelease, IconReleaseFilled, IconRemoteAccess, IconReplace, IconResponsiveness, IconReviewerApproved, IconReviewerAssigned, IconReviewerRejected, IconRuby, IconRubyColor, IconSave, IconSecurityShield, IconSettings, IconSettingsFilled, IconShuffle, IconSiren, IconSkip, IconSkipCircle, IconSkipCircleFilled, IconSlack, IconSlackColor, IconSparkle, IconSparkleFilled, IconSpinnerOnDisabled, IconSpinnerPurple, IconSpinnerPurpleDouble, IconSpinnerWhite, IconStability, IconStack, IconStar, IconStep, IconStop, IconStopwatch, IconTabPlus, IconTag, IconTasks, IconTeams, IconTeamsColor, IconTemplateCode, IconTerminal, IconTerminalFilled, IconTestQuarantine, IconThemeDarkToggle, IconThumbDown, IconThumbUp, IconTools, IconTrash, IconTrigger, IconUbuntu, IconUbuntuColor, IconUnity3D, IconUnpin, IconUpload, IconValidateShield, IconVideo, IconVsCode, IconWarning, IconWarningYellow, IconWebUi, IconWebhooks, IconWindsurf, IconWorkflow, IconWorkflowFlow, IconXTwitter, IconXamarin, IconXcode, ResponsiveProvider, bitkitIcon, bitkitTheme as bitriseTheme, createBitkitToast, createTreeCollection, dismissBitkitToast, rem, useBitkitTour, useResponsive, useStepsDialog };

package/dist/theme/common/TooltipAndToggletip.common.d.ts

@@ -0,0 +1,90 @@
+/**
+ * The dark bubble BitkitTooltip and BitkitToggletip share, so a hint looks the same whether it opens
+ * on hover (a tooltip, text only) or on click (a toggletip, which can hold a link or a button).
+ */
+export declare const base: {
+    readonly positioner: {
+        readonly fontFamily: "body";
+    };
+    readonly content: {
+        readonly '--tooltip-bg': "colors.background/contrast";
+        readonly backgroundColor: "var(--tooltip-bg)";
+        readonly maxWidth: `${number}rem`;
+        readonly color: "text/on-contrast";
+        readonly boxShadow: "elevation/tooltip";
+        readonly zIndex: "tooltip";
+        readonly transformOrigin: "var(--transform-origin)";
+        readonly _open: {
+            readonly animationStyle: "scale-fade-in";
+            readonly animationDuration: "fast";
+        };
+        readonly _closed: {
+            readonly animationStyle: "scale-fade-out";
+            readonly animationDuration: "fast";
+        };
+    };
+    readonly arrow: {
+        readonly '--arrow-size': `${number}rem`;
+        readonly '--arrow-background': "var(--tooltip-bg)";
+    };
+    readonly arrowTip: {
+        readonly borderTopWidth: "1";
+        readonly borderInlineStartWidth: "1";
+        readonly borderColor: "var(--tooltip-bg)";
+    };
+};
+export declare const variants: {
+    readonly variant: {
+        readonly dark: {
+            readonly content: {
+                readonly '--tooltip-bg': "colors.background/contrast";
+                readonly color: "text/on-contrast";
+            };
+        };
+        readonly light: {
+            readonly content: {
+                readonly '--tooltip-bg': "colors.background/tertiary";
+                readonly color: "text/primary";
+            };
+        };
+    };
+    readonly paddingSize: {
+        readonly sm: {
+            readonly content: {
+                readonly paddingInline: "8";
+                readonly paddingBlock: "4";
+                readonly borderRadius: "4";
+            };
+        };
+        readonly md: {
+            readonly content: {
+                readonly paddingInline: "12";
+                readonly paddingBlock: "8";
+                readonly borderRadius: "8";
+            };
+        };
+        readonly lg: {
+            readonly content: {
+                readonly padding: "16";
+                readonly borderRadius: "8";
+            };
+        };
+    };
+    readonly textStyle: {
+        readonly 'sm/regular': {
+            readonly content: {
+                readonly textStyle: "body/sm/regular";
+            };
+        };
+        readonly 'sm/semibold': {
+            readonly content: {
+                readonly textStyle: "body/sm/semibold";
+            };
+        };
+        readonly 'md/regular': {
+            readonly content: {
+                readonly textStyle: "body/md/regular";
+            };
+        };
+    };
+};

package/dist/theme/common/TooltipAndToggletip.common.js

@@ -0,0 +1,72 @@
+import { rem } from "../themeUtils.js";
+//#region lib/theme/common/TooltipAndToggletip.common.ts
+/**
+* The dark bubble BitkitTooltip and BitkitToggletip share, so a hint looks the same whether it opens
+* on hover (a tooltip, text only) or on click (a toggletip, which can hold a link or a button).
+*/
+var base = {
+	positioner: { fontFamily: "body" },
+	content: {
+		"--tooltip-bg": "colors.background/contrast",
+		backgroundColor: "var(--tooltip-bg)",
+		maxWidth: rem(320),
+		color: "text/on-contrast",
+		boxShadow: "elevation/tooltip",
+		zIndex: "tooltip",
+		transformOrigin: "var(--transform-origin)",
+		_open: {
+			animationStyle: "scale-fade-in",
+			animationDuration: "fast"
+		},
+		_closed: {
+			animationStyle: "scale-fade-out",
+			animationDuration: "fast"
+		}
+	},
+	arrow: {
+		"--arrow-size": rem(8),
+		"--arrow-background": "var(--tooltip-bg)"
+	},
+	arrowTip: {
+		borderTopWidth: "1",
+		borderInlineStartWidth: "1",
+		borderColor: "var(--tooltip-bg)"
+	}
+};
+var variants = {
+	variant: {
+		dark: { content: {
+			"--tooltip-bg": "colors.background/contrast",
+			color: "text/on-contrast"
+		} },
+		light: { content: {
+			"--tooltip-bg": "colors.background/tertiary",
+			color: "text/primary"
+		} }
+	},
+	paddingSize: {
+		sm: { content: {
+			paddingInline: "8",
+			paddingBlock: "4",
+			borderRadius: "4"
+		} },
+		md: { content: {
+			paddingInline: "12",
+			paddingBlock: "8",
+			borderRadius: "8"
+		} },
+		lg: { content: {
+			padding: "16",
+			borderRadius: "8"
+		} }
+	},
+	textStyle: {
+		"sm/regular": { content: { textStyle: "body/sm/regular" } },
+		"sm/semibold": { content: { textStyle: "body/sm/semibold" } },
+		"md/regular": { content: { textStyle: "body/md/regular" } }
+	}
+};
+//#endregion
+export { base, variants };
+
+//# sourceMappingURL=TooltipAndToggletip.common.js.map

package/dist/theme/common/TooltipAndToggletip.common.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TooltipAndToggletip.common.js","names":[],"sources":["../../../lib/theme/common/TooltipAndToggletip.common.ts"],"sourcesContent":["import { rem } from '../themeUtils';\n\n/**\n * The dark bubble BitkitTooltip and BitkitToggletip share, so a hint looks the same whether it opens\n * on hover (a tooltip, text only) or on click (a toggletip, which can hold a link or a button).\n */\nexport const base = {\n  positioner: {\n    fontFamily: 'body',\n  },\n  content: {\n    '--tooltip-bg': 'colors.background/contrast',\n    backgroundColor: 'var(--tooltip-bg)',\n    // Without a cap a tooltip grows to the width of its text, so a long one runs to the edge of\n    // the viewport. Every component that renders a tooltip therefore has to set this, and the one\n    // that forgot -- BitkitLabelTooltip -- had no cap at all. It belongs to the tooltip, not to\n    // each caller. BitkitOverflowTooltip overrides it: it exists to show text that was truncated,\n    // so it is allowed to be wider.\n    maxWidth: rem(320),\n    color: 'text/on-contrast',\n    boxShadow: 'elevation/tooltip',\n    zIndex: 'tooltip',\n    transformOrigin: 'var(--transform-origin)',\n    _open: {\n      animationStyle: 'scale-fade-in',\n      animationDuration: 'fast',\n    },\n    _closed: {\n      animationStyle: 'scale-fade-out',\n      animationDuration: 'fast',\n    },\n  },\n  arrow: {\n    '--arrow-size': rem(8),\n    '--arrow-background': 'var(--tooltip-bg)',\n  },\n  arrowTip: {\n    borderTopWidth: '1',\n    borderInlineStartWidth: '1',\n    borderColor: 'var(--tooltip-bg)',\n  },\n} as const;\n\nexport const variants = {\n  variant: {\n    dark: {\n      content: {\n        '--tooltip-bg': 'colors.background/contrast',\n        color: 'text/on-contrast',\n      },\n    },\n    light: {\n      content: {\n        '--tooltip-bg': 'colors.background/tertiary',\n        color: 'text/primary',\n      },\n    },\n  },\n  paddingSize: {\n    sm: {\n      content: {\n        paddingInline: '8',\n        paddingBlock: '4',\n        borderRadius: '4',\n      },\n    },\n    md: {\n      content: {\n        paddingInline: '12',\n        paddingBlock: '8',\n        borderRadius: '8',\n      },\n    },\n    lg: {\n      content: {\n        padding: '16',\n        borderRadius: '8',\n      },\n    },\n  },\n  textStyle: {\n    'sm/regular': {\n      content: {\n        textStyle: 'body/sm/regular',\n      },\n    },\n    'sm/semibold': {\n      content: {\n        textStyle: 'body/sm/semibold',\n      },\n    },\n    'md/regular': {\n      content: {\n        textStyle: 'body/md/regular',\n      },\n    },\n  },\n} as const;\n"],"mappings":";;;;;;AAMA,IAAa,OAAO;CAClB,YAAY,EACV,YAAY,OACd;CACA,SAAS;EACP,gBAAgB;EAChB,iBAAiB;EAMjB,UAAU,IAAI,GAAG;EACjB,OAAO;EACP,WAAW;EACX,QAAQ;EACR,iBAAiB;EACjB,OAAO;GACL,gBAAgB;GAChB,mBAAmB;EACrB;EACA,SAAS;GACP,gBAAgB;GAChB,mBAAmB;EACrB;CACF;CACA,OAAO;EACL,gBAAgB,IAAI,CAAC;EACrB,sBAAsB;CACxB;CACA,UAAU;EACR,gBAAgB;EAChB,wBAAwB;EACxB,aAAa;CACf;AACF;AAEA,IAAa,WAAW;CACtB,SAAS;EACP,MAAM,EACJ,SAAS;GACP,gBAAgB;GAChB,OAAO;EACT,EACF;EACA,OAAO,EACL,SAAS;GACP,gBAAgB;GAChB,OAAO;EACT,EACF;CACF;CACA,aAAa;EACX,IAAI,EACF,SAAS;GACP,eAAe;GACf,cAAc;GACd,cAAc;EAChB,EACF;EACA,IAAI,EACF,SAAS;GACP,eAAe;GACf,cAAc;GACd,cAAc;EAChB,EACF;EACA,IAAI,EACF,SAAS;GACP,SAAS;GACT,cAAc;EAChB,EACF;CACF;CACA,WAAW;EACT,cAAc,EACZ,SAAS,EACP,WAAW,kBACb,EACF;EACA,eAAe,EACb,SAAS,EACP,WAAW,mBACb,EACF;EACA,cAAc,EACZ,SAAS,EACP,WAAW,kBACb,EACF;CACF;AACF"}

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

@@ -39,8 +39,8 @@ declare const datePickerSelectSlotRecipe: import('@chakra-ui/react').SlotRecipeD
                     textStyle: "body/md/semibold";
                 };
             } | undefined;
-            content?: {
-                '--select-menu-list-max-height': `${number}rem`;
+            itemList?: {
+                maxHeight: `${number}rem`;
             } | undefined;
             itemLabel?: {
                 textStyle: "body/md/regular";
@@ -52,18 +52,6 @@ declare const datePickerSelectSlotRecipe: import('@chakra-ui/react').SlotRecipeD
             emptyState?: {
                 paddingBlock: "8";
             } | undefined;
-            errorState?: {
-                paddingBlock: "4";
-            } | undefined;
-            errorLabel?: {
-                textStyle: "body/md/regular";
-            } | undefined;
-            errorIcon?: {
-                marginBlockStart: "4";
-            } | undefined;
-            errorTextBlock?: {
-                paddingBlock: "2";
-            } | undefined;
             action?: {
                 minHeight: "40";
                 paddingBlock: "8";

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

@@ -1,4 +1,4 @@
-export declare const selectSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "label" | "checkbox" | "list" | "avatar" | "emptyState" | "root" | "item" | "itemContent" | "itemIndicator" | "trigger" | "positioner" | "indicator" | "itemGroup" | "itemGroupLabel" | "itemText" | "valueText" | "action" | "clearTrigger" | "control" | "actionContainer" | "errorLabel" | "searchInputGroup" | "searchInput" | "searchClear" | "errorState" | "itemList" | "errorIcon" | "errorTextBlock" | "itemHelperText" | "itemLoading" | "itemLoadingLabel" | "itemLabel" | "indicatorGroup" | "checkmark" | "itemBadge" | "itemIcon" | "valueIcon", {
+export declare const selectSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "label" | "checkbox" | "list" | "avatar" | "emptyState" | "root" | "item" | "itemContent" | "itemIndicator" | "trigger" | "positioner" | "indicator" | "itemGroup" | "itemGroupLabel" | "itemText" | "valueText" | "action" | "clearTrigger" | "control" | "actionContainer" | "searchInputGroup" | "searchInput" | "searchClear" | "itemList" | "itemLoading" | "itemLoadingLabel" | "itemLabel" | "itemHelperText" | "indicatorGroup" | "checkmark" | "itemBadge" | "itemIcon" | "valueIcon", {
     hasStatusIcon: {
         true: {
             trigger: {
@@ -39,8 +39,8 @@ export declare const selectSlotRecipe: import('@chakra-ui/react').SlotRecipeDefi
                     textStyle: "body/lg/semibold";
                 };
             };
-            content: {
-                '--select-menu-list-max-height': `${number}rem`;
+            itemList: {
+                maxHeight: `${number}rem`;
             };
             itemLabel: {
                 textStyle: "body/lg/regular";
@@ -52,12 +52,6 @@ export declare const selectSlotRecipe: import('@chakra-ui/react').SlotRecipeDefi
             emptyState: {
                 paddingBlock: "12";
             };
-            errorState: {
-                paddingBlock: "8";
-            };
-            errorLabel: {
-                textStyle: "body/lg/regular";
-            };
             action: {
                 minHeight: "48";
                 paddingBlock: "12";
@@ -104,8 +98,8 @@ export declare const selectSlotRecipe: import('@chakra-ui/react').SlotRecipeDefi
                     textStyle: "body/md/semibold";
                 };
             };
-            content: {
-                '--select-menu-list-max-height': `${number}rem`;
+            itemList: {
+                maxHeight: `${number}rem`;
             };
             itemLabel: {
                 textStyle: "body/md/regular";
@@ -117,18 +111,6 @@ export declare const selectSlotRecipe: import('@chakra-ui/react').SlotRecipeDefi
             emptyState: {
                 paddingBlock: "8";
             };
-            errorState: {
-                paddingBlock: "4";
-            };
-            errorLabel: {
-                textStyle: "body/md/regular";
-            };
-            errorIcon: {
-                marginBlockStart: "4";
-            };
-            errorTextBlock: {
-                paddingBlock: "2";
-            };
             action: {
                 minHeight: "40";
                 paddingBlock: "8";