@bitrise/bitkit-v2 0.3.446 → 0.3.447

package/dist/components/BitkitPageSidebar/BitkitPageSidebar.d.ts

@@ -1,8 +1,9 @@
 import { BoxProps } from '@chakra-ui/react/box';
 import { SeparatorProps } from '@chakra-ui/react/separator';
-import { HTMLChakraProps, Tokens } from '@chakra-ui/react/styled-system';
+import { HTMLChakraProps } from '@chakra-ui/react/styled-system';
 import { ReactNode } from 'react';
 import { BitkitIconComponent } from '../../icons';
+import { BitkitColorToken } from '../../theme/themeUtils';
 import { BitkitGroupHeadingProps } from '../BitkitGroupHeading/BitkitGroupHeading';
 export interface BitkitPageSidebarProps extends BoxProps {
     children: ReactNode;
@@ -33,17 +34,6 @@ interface BitkitPageSidebarItemButtonProps extends Omit<HTMLChakraProps<'button'
     href?: never;
 }
 export type BitkitPageSidebarItemProps = BitkitPageSidebarItemButtonProps | BitkitPageSidebarItemLinkProps;
-/**
- * The tokens a stage's icon may be coloured with.
- *
- * `Tokens` is generated in the consumer's own project by `chakra typegen`, which
- * `scripts/postinstall.cjs` runs and which exits 0 with a warning when it cannot. Where it did not
- * run, `Tokens['colors']` is Chakra's stock union, the `Extract` has nothing to match and collapses
- * to `never` -- which would make every `iconColor` a type error pointing at the wrong thing. So it
- * falls back to `string`: the narrowing is a guard where the types are real, not a tripwire where
- * they are not.
- */
-type BitkitStatusColorToken = [Extract<Tokens['colors'], `color/${string}` | `icon/${string}`>] extends [never] ? string : Extract<Tokens['colors'], `color/${string}` | `icon/${string}`>;
 export interface BitkitPageSidebarProgressItemProps extends Omit<HTMLChakraProps<'button'>, 'children' | 'disabled'> {
     /**
      * Trailing content between the label and the connector — a `BitkitBadge` counting what the stage
@@ -71,7 +61,7 @@ export interface BitkitPageSidebarProgressItemProps extends Omit<HTMLChakraProps
      * need both: the design takes success and failure from `icon/*` but in-progress from
      * `color/orange/bold`, which the `icon/*` set has no equivalent of.
      */
-    iconColor?: BitkitStatusColorToken;
+    iconColor?: BitkitColorToken<'color' | 'icon'>;
     /**
      * A stage the release does not have to clear. Steps the icon and the label down one level, so the
      * row reads as present but not awaited.

package/dist/components/BitkitPageSidebar/BitkitPageSidebar.js.map

@@ -1 +1 @@
-{"version":3,"file":"BitkitPageSidebar.js","names":[],"sources":["../../../lib/components/BitkitPageSidebar/BitkitPageSidebar.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { Separator, type SeparatorProps } from '@chakra-ui/react/separator';\nimport { chakra, type HTMLChakraProps, type Tokens, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { forwardRef, type KeyboardEvent, type MouseEvent, type ReactNode, type Ref } from 'react';\n\nimport { type BitkitIconComponent } from '../../icons';\nimport IconChevronLeft from '../../icons/IconChevronLeft';\nimport useIsTruncated from '../../utilities/useIsTruncated';\nimport { withSubComponents } from '../../utilities/withSubComponents';\nimport BitkitControlButton from '../BitkitControlButton/BitkitControlButton';\nimport BitkitGroupHeading, { type BitkitGroupHeadingProps } from '../BitkitGroupHeading/BitkitGroupHeading';\nimport BitkitOverflowTooltip from '../BitkitOverflowTooltip/BitkitOverflowTooltip';\n\n// The 16 and 24 icons are separate drawings, not one scaled to two sizes, so the breakpoint swap\n// cannot live in the recipe — both are rendered and one is hidden. A `useBreakpointValue` would\n// render a single icon, but it only re-reads on mount: resize a live page across `tablet` and the\n// row resizes underneath an icon that keeps its old size.\nconst showAtDesktop = { display: { base: 'none', tablet: 'block' } };\nconst showAtMobile = { display: { base: 'block', tablet: 'none' } };\n\n// ----- BitkitPageSidebar (Root) -----\n\nexport interface BitkitPageSidebarProps extends BoxProps {\n  children: ReactNode;\n}\n\n/**\n * Page-level navigation sidebar. It expects three children, in this order:\n *\n * ```tsx\n * <BitkitPageSidebar>\n *   <BitkitPageSidebar.Title>Title</BitkitPageSidebar.Title>\n *   <BitkitPageSidebar.Body>\n *     <BitkitPageSidebar.Item icon={IconWorkflow}>Workflows</BitkitPageSidebar.Item>\n *   </BitkitPageSidebar.Body>\n *   <BitkitPageSidebar.Footer>…</BitkitPageSidebar.Footer>\n * </BitkitPageSidebar>\n * ```\n *\n * `Title` and `Footer` are optional. The sidebar scrolls as a single block: when the navigation is\n * taller than the viewport the whole thing — footer included — grows and scrolls with the page,\n * which is why `Body` keeps a minimum gap above the footer so the two blocks never touch.\n *\n * The `<nav>` carries a default `aria-label` so it is not announced as an unnamed landmark. A page\n * with more than one sidebar should name each one — pass your own `aria-label` (or\n * `aria-labelledby`), which overrides the default.\n *\n * It stands at least viewport-tall by default. An embedded panel that should size to its content\n * opts out with `minHeight=\"auto\"`.\n *\n * Below the `tablet` breakpoint it switches to the mobile design on its own — full width, 48px\n * rows, larger icons and labels, a squared-off selection edge. There is no prop for it: a sidebar\n * that narrow is a sidebar filling a phone.\n */\nconst BitkitPageSidebar = forwardRef<HTMLElement, BitkitPageSidebarProps>((props, ref) => {\n  const { children, css, ...rest } = props;\n\n  const recipe = useSlotRecipe({ key: 'pageSidebar' });\n  const styles = recipe();\n\n  return (\n    <Box ref={ref} aria-label=\"Page navigation\" asChild css={[styles.root, css]} {...rest}>\n      <nav>{children}</nav>\n    </Box>\n  );\n});\n\nBitkitPageSidebar.displayName = 'BitkitPageSidebar';\n\n// ----- BitkitPageSidebar.Item -----\n\ninterface BitkitPageSidebarItemCommonProps {\n  badge?: ReactNode;\n  /**\n   * The item's label. Typed as a string rather than `ReactNode` because the row truncates it with\n   * an ellipsis, and the overflow tooltip needs the full text to reveal.\n   */\n  children: string;\n  icon?: BitkitIconComponent;\n  /**\n   * Marks the item as the current page. Mutually exclusive with `state=\"disabled\"` — you cannot be\n   * on a page whose nav item is unavailable — but the two are not type-checked against each other:\n   * the combination only ever arrives from a computed `selected`, which no union can catch, and\n   * checking it would break the ordinary `selected={item.id === currentId}` mapping. If both do\n   * turn up, disabled wins, since that is the one of the two the design actually defines.\n   */\n  selected?: boolean;\n  state?: 'disabled';\n  suffixIcon?: BitkitIconComponent;\n}\n\ninterface BitkitPageSidebarItemLinkProps\n  extends Omit<HTMLChakraProps<'a'>, 'children'>, BitkitPageSidebarItemCommonProps {\n  href: string;\n}\n\ninterface BitkitPageSidebarItemButtonProps\n  extends Omit<HTMLChakraProps<'button'>, 'children' | 'disabled'>, BitkitPageSidebarItemCommonProps {\n  href?: never;\n}\n\nexport type BitkitPageSidebarItemProps = BitkitPageSidebarItemButtonProps | BitkitPageSidebarItemLinkProps;\n\nconst BitkitPageSidebarItem = forwardRef<HTMLButtonElement | HTMLAnchorElement, BitkitPageSidebarItemProps>(\n  (props, ref) => {\n    const { badge, children, icon: Icon, selected, state, suffixIcon: SuffixIcon, ...rest } = props;\n\n    const isDisabled = state === 'disabled';\n    // `selected` and `state=\"disabled\"` are not checked against each other in the types, so this is\n    // the single place the overlap is resolved: disabled wins, and the two recipe variants can never\n    // both claim the same slot.\n    const isSelected = selected === true && !isDisabled;\n\n    const recipe = useSlotRecipe({ key: 'pageSidebar' });\n    const styles = recipe({ isDisabled, selected: isSelected });\n\n    // The design gives neither a selected row nor a disabled one a trailing icon — the desktop\n    // (`20014:6498`, `20014:6494`) and mobile (`9221:4417`) items drop it in those states.\n    const VisibleSuffixIcon = isSelected || isDisabled ? undefined : SuffixIcon;\n\n    const { isTruncated, ref: labelRef } = useIsTruncated<HTMLSpanElement>(children);\n\n    const itemContent = (\n      <>\n        {/* `span`, not the default `div`: in button mode these sit inside a `<button>`, whose\n            content model allows phrasing content only. */}\n        <Box as=\"span\" css={styles.contentBlock}>\n          {Icon && (\n            <>\n              <Icon css={[styles.itemIcon, showAtDesktop]} size=\"16\" />\n              <Icon css={[styles.itemIcon, showAtMobile]} size=\"24\" />\n            </>\n          )}\n          <Text as=\"span\" css={styles.itemLabel} ref={labelRef}>\n            {children}\n          </Text>\n        </Box>\n        {badge}\n        {VisibleSuffixIcon && (\n          <>\n            <VisibleSuffixIcon css={[styles.suffixIcon, showAtDesktop]} size=\"16\" />\n            <VisibleSuffixIcon css={[styles.suffixIcon, showAtMobile]} size=\"24\" />\n          </>\n        )}\n        {isSelected && <Box as=\"span\" css={styles.selectionMarker} />}\n      </>\n    );\n\n    // The overflow tooltip anchors to the row itself, which is the focusable element: anchored to an\n    // inner node it would only ever open on hover, leaving keyboard users unable to read a truncated\n    // label. `Tooltip.Trigger` renders `asChild` and composes refs, so the consumer's forwarded ref\n    // survives, and the ref measuring the truncation sits on the label further in.\n    const withTooltip = (row: ReactNode) => (\n      <BitkitOverflowTooltip disabled={!isTruncated} text={children}>\n        {row}\n      </BitkitOverflowTooltip>\n    );\n\n    // `chakra.a` / `chakra.button` rather than a named primitive: the item carries its own slot recipe,\n    // and Chakra's `Button`/`Link` would layer their own recipe styles on top of it.\n    if (rest.href !== undefined) {\n      const { className, href, onClick, onKeyDown, ...linkRest } = rest;\n      const handleClick = isDisabled\n        ? (event: MouseEvent<HTMLAnchorElement>) => {\n            event.preventDefault();\n            event.stopPropagation();\n          }\n        : onClick;\n      const handleKeyDown = isDisabled\n        ? (event: KeyboardEvent<HTMLAnchorElement>) => {\n            if (event.key === 'Enter' || event.key === ' ') {\n              event.preventDefault();\n              event.stopPropagation();\n            }\n          }\n        : onKeyDown;\n\n      return withTooltip(\n        <chakra.a\n          ref={ref as Ref<HTMLAnchorElement>}\n          {...linkRest}\n          aria-current={isSelected ? 'page' : undefined}\n          aria-disabled={isDisabled || undefined}\n          className={className ? `group ${className}` : 'group'}\n          css={styles.item}\n          // Dropping the attribute is what actually disables the link, the way `BitkitLink` and\n          // `BitkitControlButton` do it. The handlers below only block `click` and `Enter`/`Space`;\n          // a middle click fires `auxclick`, and \"Open link in new tab\" never reaches the page at\n          // all, so both would still navigate while an `href` is there to follow.\n          href={isDisabled ? undefined : href}\n          onClick={handleClick}\n          onKeyDown={handleKeyDown}\n        >\n          {itemContent}\n        </chakra.a>,\n      );\n    }\n\n    const { className, href: _href, ...buttonRest } = rest;\n\n    return withTooltip(\n      <chakra.button\n        ref={ref as Ref<HTMLButtonElement>}\n        {...buttonRest}\n        aria-current={isSelected ? 'page' : undefined}\n        className={className ? `group ${className}` : 'group'}\n        css={styles.item}\n        disabled={isDisabled}\n        type=\"button\"\n      >\n        {itemContent}\n      </chakra.button>,\n    );\n  },\n);\n\nBitkitPageSidebarItem.displayName = 'BitkitPageSidebarItem';\n\n// ----- BitkitPageSidebar.ProgressItem -----\n\n/**\n * The tokens a stage's icon may be coloured with.\n *\n * `Tokens` is generated in the consumer's own project by `chakra typegen`, which\n * `scripts/postinstall.cjs` runs and which exits 0 with a warning when it cannot. Where it did not\n * run, `Tokens['colors']` is Chakra's stock union, the `Extract` has nothing to match and collapses\n * to `never` -- which would make every `iconColor` a type error pointing at the wrong thing. So it\n * falls back to `string`: the narrowing is a guard where the types are real, not a tripwire where\n * they are not.\n */\ntype BitkitStatusColorToken = [Extract<Tokens['colors'], `color/${string}` | `icon/${string}`>] extends [never]\n  ? string\n  : Extract<Tokens['colors'], `color/${string}` | `icon/${string}`>;\n\nexport interface BitkitPageSidebarProgressItemProps extends Omit<HTMLChakraProps<'button'>, 'children' | 'disabled'> {\n  /**\n   * Trailing content between the label and the connector — a `BitkitBadge` counting what the stage\n   * is waiting on. Sized to itself; the connector takes the rest.\n   *\n   * The design draws it 20px tall, which is `size=\"xs\"`. The badge arrives as a node, so the\n   * component cannot set that for you — a taller one grows the row past its 40px.\n   */\n  badge?: ReactNode;\n  /** The row's label. */\n  children: ReactNode;\n  /**\n   * The status icon. Unlike `Item`, whose icon colour the sidebar owns, this one carries the\n   * stage's status, so `iconColor` is the consumer's to set — `selected`, `notRequired` and\n   * `state=\"disabled\"` still win over it, since those describe the row rather than the status.\n   */\n  icon: BitkitIconComponent;\n  /**\n   * A semantic token for the status the icon is showing. Left out, the icon takes the sidebar's own\n   * `icon/secondary` — which is what the design gives a stage whose icon carries no status, such as\n   * an approvals step.\n   *\n   * Narrowed to the `icon/*` and `color/*` tokens, so a name that does not exist is a compile error\n   * rather than a colour that silently does not apply. Both families are here because the statuses\n   * need both: the design takes success and failure from `icon/*` but in-progress from\n   * `color/orange/bold`, which the `icon/*` set has no equivalent of.\n   */\n  iconColor?: BitkitStatusColorToken;\n  /**\n   * A stage the release does not have to clear. Steps the icon and the label down one level, so the\n   * row reads as present but not awaited.\n   */\n  notRequired?: boolean;\n  /** Follows the label after a middle dot — `auto-upload`, `not required`. */\n  secondaryText?: string;\n  selected?: boolean;\n  state?: 'disabled';\n  /**\n   * Draws the dashed rule that runs from the badge to the trailing edge, tying one stage to the\n   * next. The last stage in a list has nothing to tie to, so it goes without.\n   */\n  withConnector?: boolean;\n}\n\n/**\n * A stage of something that progresses, as a row of the page sidebar — a release running through\n * its steps, and whatever comes to look like it.\n *\n * It is a sibling of `Item` rather than a variant of it: the row reports where a stage stands\n * rather than navigating, so its icon is status-coloured, its label does not grow, and a dashed\n * connector runs to the trailing edge between the stages.\n *\n * Always a `<button>`, and always interactive — it carries the shared row's pointer cursor and\n * hover background, so a row without an `onClick` looks actionable and is not. `Item`'s\n * button-or-anchor union is deliberately not here: a stage is selected within the page it is\n * already on rather than navigated to.\n */\nconst BitkitPageSidebarProgressItem = forwardRef<HTMLButtonElement, BitkitPageSidebarProgressItemProps>(\n  (props, ref) => {\n    const {\n      badge,\n      children,\n      className,\n      css,\n      icon: Icon,\n      iconColor,\n      notRequired,\n      secondaryText,\n      selected,\n      state,\n      withConnector,\n      ...rest\n    } = props;\n\n    const isDisabled = state === 'disabled';\n    // Disabled is the whole state of the row, so the other two are dropped rather than merged: the\n    // recipe resolves a combination in its own order, and a disabled row came out of it carrying\n    // the selected icon colour. Nothing about a disabled stage is selected or not-required.\n    const isSelected = selected && !isDisabled;\n    // And `selected` wins over `notRequired`, which the design decides rather than declaration\n    // order: its `selected=yes, notRequired=true` variant draws the selected row's icon and label\n    // and keeps `not required` in the secondary text -- which is what dropping this produces.\n    const isNotRequired = notRequired && !isDisabled && !isSelected;\n\n    const statusColor = isDisabled || isNotRequired || isSelected ? undefined : iconColor;\n\n    const recipe = useSlotRecipe({ key: 'pageSidebar' });\n    const styles = recipe({ isDisabled, notRequired: isNotRequired, selected: isSelected });\n\n    return (\n      <chakra.button\n        ref={ref}\n        {...rest}\n        // `step` rather than the `page` an `Item` carries: these are stages of one thing, not\n        // separate pages.\n        aria-current={isSelected ? 'step' : undefined}\n        className={className ? `group ${className}` : 'group'}\n        css={[styles.item, styles.progressRow, css]}\n        disabled={isDisabled}\n        type=\"button\"\n      >\n        <Box as=\"span\" css={[styles.contentBlock, styles.progressContentBlock]}>\n          {/* Two icons, one per size, for the reason `Item` has two -- see `showAtDesktop`.\n              The status colour applies while the row is ordinary: `selected`, `notRequired` and\n              disabled are states of the row rather than of the status, and the design recolours the\n              icon in all three, so the recipe takes it back there. */}\n          <Icon color={statusColor} css={[styles.progressIcon, showAtDesktop]} size=\"16\" />\n          <Icon color={statusColor} css={[styles.progressIcon, showAtMobile]} size=\"24\" />\n          <Box as=\"span\" css={styles.progressTextBlock}>\n            <Text as=\"span\" css={styles.progressLabel}>\n              {children}\n            </Text>\n            {secondaryText && (\n              <Text as=\"span\" css={styles.progressSecondaryText}>\n                {`\\u00b7 ${secondaryText}`}\n              </Text>\n            )}\n          </Box>\n          {(badge || withConnector) && (\n            <Box as=\"span\" css={styles.progressBlocker}>\n              {badge}\n              {/* Decorative: it ties the stages together visually and has nothing to separate in\n                  the button's accessibility tree. */}\n              {withConnector && <Separator aria-hidden css={styles.progressConnector} />}\n            </Box>\n          )}\n        </Box>\n        {isSelected && <Box as=\"span\" css={styles.selectionMarker} />}\n      </chakra.button>\n    );\n  },\n);\n\nBitkitPageSidebarProgressItem.displayName = 'BitkitPageSidebarProgressItem';\n\n// ----- BitkitPageSidebar.Title -----\n\ninterface BitkitPageSidebarTitleCommonProps extends BoxProps {\n  backLabel?: string;\n  children: ReactNode;\n}\n\ninterface BitkitPageSidebarTitleLinkProps extends BitkitPageSidebarTitleCommonProps {\n  backHref: string;\n  onBackClick?: never;\n}\n\ninterface BitkitPageSidebarTitleButtonProps extends BitkitPageSidebarTitleCommonProps {\n  backHref?: never;\n  onBackClick: () => void;\n}\n\ninterface BitkitPageSidebarTitlePlainProps extends BitkitPageSidebarTitleCommonProps {\n  backHref?: never;\n  onBackClick?: never;\n}\n\nexport type BitkitPageSidebarTitleProps =\n  | BitkitPageSidebarTitleButtonProps\n  | BitkitPageSidebarTitleLinkProps\n  | BitkitPageSidebarTitlePlainProps;\n\nconst BitkitPageSidebarTitle = forwardRef<HTMLDivElement, BitkitPageSidebarTitleProps>((props, ref) => {\n  const { backHref, backLabel = 'Back', children, css, onBackClick, ...rest } = props;\n\n  const hasBack = backHref !== undefined || onBackClick !== undefined;\n\n  const recipe = useSlotRecipe({ key: 'pageSidebar' });\n  const styles = recipe({ hasBack });\n\n  return (\n    <Box ref={ref} css={[styles.title, css]} {...rest}>\n      <Box css={styles.titleBlock}>\n        {/* The label tooltip opens to the right. Its default `top` has nowhere to go here — the\n            button sits at the very top of the sidebar, so the tooltip jams against the viewport\n            edge and covers the header instead of flipping. */}\n        {hasBack &&\n          (backHref !== undefined ? (\n            <BitkitControlButton\n              href={backHref}\n              icon={IconChevronLeft}\n              label={backLabel}\n              size=\"xs\"\n              tooltipProps={{ placement: 'right' }}\n            />\n          ) : (\n            <BitkitControlButton\n              icon={IconChevronLeft}\n              label={backLabel}\n              onClick={onBackClick}\n              size=\"xs\"\n              tooltipProps={{ placement: 'right' }}\n            />\n          ))}\n        <Text as=\"span\" css={styles.titleText}>\n          {children}\n        </Text>\n      </Box>\n    </Box>\n  );\n});\n\nBitkitPageSidebarTitle.displayName = 'BitkitPageSidebarTitle';\n\n// ----- BitkitPageSidebar.Body -----\n\nexport interface BitkitPageSidebarBodyProps extends BoxProps {\n  children: ReactNode;\n}\n\n/**\n * Holds the navigation items. It absorbs the space left between `Title` and `Footer`, so the footer\n * sits at the bottom of the viewport on a short navigation, and keeps a minimum gap above the\n * footer so the two blocks stay visually separate however long the list gets.\n */\nconst BitkitPageSidebarBody = forwardRef<HTMLDivElement, BitkitPageSidebarBodyProps>((props, ref) => {\n  const { children, css, ...rest } = props;\n\n  const recipe = useSlotRecipe({ key: 'pageSidebar' });\n  const styles = recipe();\n\n  return (\n    <Box ref={ref} css={[styles.body, css]} {...rest}>\n      {children}\n    </Box>\n  );\n});\n\nBitkitPageSidebarBody.displayName = 'BitkitPageSidebarBody';\n\n// ----- BitkitPageSidebar.Footer -----\n\nexport interface BitkitPageSidebarFooterProps extends BoxProps {\n  children: ReactNode;\n}\n\nconst BitkitPageSidebarFooter = forwardRef<HTMLDivElement, BitkitPageSidebarFooterProps>((props, ref) => {\n  const { children, css, ...rest } = props;\n\n  const recipe = useSlotRecipe({ key: 'pageSidebar' });\n  const styles = recipe();\n\n  return (\n    <Box ref={ref} css={[styles.footer, css]} {...rest}>\n      {children}\n    </Box>\n  );\n});\n\nBitkitPageSidebarFooter.displayName = 'BitkitPageSidebarFooter';\n\n// ----- BitkitPageSidebar.Project -----\n\nexport interface BitkitPageSidebarProjectProps extends BoxProps {\n  label: string;\n  value: string;\n}\n\nconst BitkitPageSidebarProject = forwardRef<HTMLDivElement, BitkitPageSidebarProjectProps>((props, ref) => {\n  const { css, label, value, ...rest } = props;\n\n  const recipe = useSlotRecipe({ key: 'pageSidebar' });\n  const styles = recipe();\n\n  const { isTruncated, ref: valueRef } = useIsTruncated<HTMLSpanElement>(value);\n\n  return (\n    <Box ref={ref} css={[styles.project, css]} {...rest}>\n      <Text as=\"span\" css={styles.projectLabel}>\n        {label}\n      </Text>\n      {/* Wrapper for the same reason as in Item: the trigger cannot be the element being measured. */}\n      <BitkitOverflowTooltip disabled={!isTruncated} text={value}>\n        <Box css={styles.projectValueWrapper}>\n          <Text as=\"span\" css={styles.projectValue} ref={valueRef}>\n            {value}\n          </Text>\n        </Box>\n      </BitkitOverflowTooltip>\n    </Box>\n  );\n});\n\nBitkitPageSidebarProject.displayName = 'BitkitPageSidebarProject';\n\n// ----- BitkitPageSidebar.GroupHeading -----\n\nexport type BitkitPageSidebarGroupHeadingProps = BitkitGroupHeadingProps;\n\nconst BitkitPageSidebarGroupHeading = forwardRef<HTMLDivElement, BitkitPageSidebarGroupHeadingProps>((props, ref) => {\n  return <BitkitGroupHeading ref={ref} paddingBlockEnd=\"8\" paddingBlockStart=\"16\" paddingInline=\"24\" {...props} />;\n});\n\nBitkitPageSidebarGroupHeading.displayName = 'BitkitPageSidebarGroupHeading';\n\n// ----- BitkitPageSidebar.Divider -----\n\nexport type BitkitPageSidebarDividerProps = SeparatorProps;\n\nconst BitkitPageSidebarDivider = forwardRef<HTMLDivElement, BitkitPageSidebarDividerProps>((props, ref) => {\n  const { css, ...rest } = props;\n\n  const recipe = useSlotRecipe({ key: 'pageSidebar' });\n  const styles = recipe();\n\n  return <Separator ref={ref} css={[styles.divider, css]} {...rest} />;\n});\n\nBitkitPageSidebarDivider.displayName = 'BitkitPageSidebarDivider';\n\nexport default withSubComponents(BitkitPageSidebar, {\n  Body: BitkitPageSidebarBody,\n  Divider: BitkitPageSidebarDivider,\n  Footer: BitkitPageSidebarFooter,\n  GroupHeading: BitkitPageSidebarGroupHeading,\n  Item: BitkitPageSidebarItem,\n  ProgressItem: BitkitPageSidebarProgressItem,\n  Project: BitkitPageSidebarProject,\n  Title: BitkitPageSidebarTitle,\n});\n"],"mappings":"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"}
+{"version":3,"file":"BitkitPageSidebar.js","names":[],"sources":["../../../lib/components/BitkitPageSidebar/BitkitPageSidebar.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { Separator, type SeparatorProps } from '@chakra-ui/react/separator';\nimport { chakra, type HTMLChakraProps, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { forwardRef, type KeyboardEvent, type MouseEvent, type ReactNode, type Ref } from 'react';\n\nimport { type BitkitIconComponent } from '../../icons';\nimport IconChevronLeft from '../../icons/IconChevronLeft';\nimport { type BitkitColorToken } from '../../theme/themeUtils';\nimport useIsTruncated from '../../utilities/useIsTruncated';\nimport { withSubComponents } from '../../utilities/withSubComponents';\nimport BitkitControlButton from '../BitkitControlButton/BitkitControlButton';\nimport BitkitGroupHeading, { type BitkitGroupHeadingProps } from '../BitkitGroupHeading/BitkitGroupHeading';\nimport BitkitOverflowTooltip from '../BitkitOverflowTooltip/BitkitOverflowTooltip';\n\n// The 16 and 24 icons are separate drawings, not one scaled to two sizes, so the breakpoint swap\n// cannot live in the recipe — both are rendered and one is hidden. A `useBreakpointValue` would\n// render a single icon, but it only re-reads on mount: resize a live page across `tablet` and the\n// row resizes underneath an icon that keeps its old size.\nconst showAtDesktop = { display: { base: 'none', tablet: 'block' } };\nconst showAtMobile = { display: { base: 'block', tablet: 'none' } };\n\n// ----- BitkitPageSidebar (Root) -----\n\nexport interface BitkitPageSidebarProps extends BoxProps {\n  children: ReactNode;\n}\n\n/**\n * Page-level navigation sidebar. It expects three children, in this order:\n *\n * ```tsx\n * <BitkitPageSidebar>\n *   <BitkitPageSidebar.Title>Title</BitkitPageSidebar.Title>\n *   <BitkitPageSidebar.Body>\n *     <BitkitPageSidebar.Item icon={IconWorkflow}>Workflows</BitkitPageSidebar.Item>\n *   </BitkitPageSidebar.Body>\n *   <BitkitPageSidebar.Footer>…</BitkitPageSidebar.Footer>\n * </BitkitPageSidebar>\n * ```\n *\n * `Title` and `Footer` are optional. The sidebar scrolls as a single block: when the navigation is\n * taller than the viewport the whole thing — footer included — grows and scrolls with the page,\n * which is why `Body` keeps a minimum gap above the footer so the two blocks never touch.\n *\n * The `<nav>` carries a default `aria-label` so it is not announced as an unnamed landmark. A page\n * with more than one sidebar should name each one — pass your own `aria-label` (or\n * `aria-labelledby`), which overrides the default.\n *\n * It stands at least viewport-tall by default. An embedded panel that should size to its content\n * opts out with `minHeight=\"auto\"`.\n *\n * Below the `tablet` breakpoint it switches to the mobile design on its own — full width, 48px\n * rows, larger icons and labels, a squared-off selection edge. There is no prop for it: a sidebar\n * that narrow is a sidebar filling a phone.\n */\nconst BitkitPageSidebar = forwardRef<HTMLElement, BitkitPageSidebarProps>((props, ref) => {\n  const { children, css, ...rest } = props;\n\n  const recipe = useSlotRecipe({ key: 'pageSidebar' });\n  const styles = recipe();\n\n  return (\n    <Box ref={ref} aria-label=\"Page navigation\" asChild css={[styles.root, css]} {...rest}>\n      <nav>{children}</nav>\n    </Box>\n  );\n});\n\nBitkitPageSidebar.displayName = 'BitkitPageSidebar';\n\n// ----- BitkitPageSidebar.Item -----\n\ninterface BitkitPageSidebarItemCommonProps {\n  badge?: ReactNode;\n  /**\n   * The item's label. Typed as a string rather than `ReactNode` because the row truncates it with\n   * an ellipsis, and the overflow tooltip needs the full text to reveal.\n   */\n  children: string;\n  icon?: BitkitIconComponent;\n  /**\n   * Marks the item as the current page. Mutually exclusive with `state=\"disabled\"` — you cannot be\n   * on a page whose nav item is unavailable — but the two are not type-checked against each other:\n   * the combination only ever arrives from a computed `selected`, which no union can catch, and\n   * checking it would break the ordinary `selected={item.id === currentId}` mapping. If both do\n   * turn up, disabled wins, since that is the one of the two the design actually defines.\n   */\n  selected?: boolean;\n  state?: 'disabled';\n  suffixIcon?: BitkitIconComponent;\n}\n\ninterface BitkitPageSidebarItemLinkProps\n  extends Omit<HTMLChakraProps<'a'>, 'children'>, BitkitPageSidebarItemCommonProps {\n  href: string;\n}\n\ninterface BitkitPageSidebarItemButtonProps\n  extends Omit<HTMLChakraProps<'button'>, 'children' | 'disabled'>, BitkitPageSidebarItemCommonProps {\n  href?: never;\n}\n\nexport type BitkitPageSidebarItemProps = BitkitPageSidebarItemButtonProps | BitkitPageSidebarItemLinkProps;\n\nconst BitkitPageSidebarItem = forwardRef<HTMLButtonElement | HTMLAnchorElement, BitkitPageSidebarItemProps>(\n  (props, ref) => {\n    const { badge, children, icon: Icon, selected, state, suffixIcon: SuffixIcon, ...rest } = props;\n\n    const isDisabled = state === 'disabled';\n    // `selected` and `state=\"disabled\"` are not checked against each other in the types, so this is\n    // the single place the overlap is resolved: disabled wins, and the two recipe variants can never\n    // both claim the same slot.\n    const isSelected = selected === true && !isDisabled;\n\n    const recipe = useSlotRecipe({ key: 'pageSidebar' });\n    const styles = recipe({ isDisabled, selected: isSelected });\n\n    // The design gives neither a selected row nor a disabled one a trailing icon — the desktop\n    // (`20014:6498`, `20014:6494`) and mobile (`9221:4417`) items drop it in those states.\n    const VisibleSuffixIcon = isSelected || isDisabled ? undefined : SuffixIcon;\n\n    const { isTruncated, ref: labelRef } = useIsTruncated<HTMLSpanElement>(children);\n\n    const itemContent = (\n      <>\n        {/* `span`, not the default `div`: in button mode these sit inside a `<button>`, whose\n            content model allows phrasing content only. */}\n        <Box as=\"span\" css={styles.contentBlock}>\n          {Icon && (\n            <>\n              <Icon css={[styles.itemIcon, showAtDesktop]} size=\"16\" />\n              <Icon css={[styles.itemIcon, showAtMobile]} size=\"24\" />\n            </>\n          )}\n          <Text as=\"span\" css={styles.itemLabel} ref={labelRef}>\n            {children}\n          </Text>\n        </Box>\n        {badge}\n        {VisibleSuffixIcon && (\n          <>\n            <VisibleSuffixIcon css={[styles.suffixIcon, showAtDesktop]} size=\"16\" />\n            <VisibleSuffixIcon css={[styles.suffixIcon, showAtMobile]} size=\"24\" />\n          </>\n        )}\n        {isSelected && <Box as=\"span\" css={styles.selectionMarker} />}\n      </>\n    );\n\n    // The overflow tooltip anchors to the row itself, which is the focusable element: anchored to an\n    // inner node it would only ever open on hover, leaving keyboard users unable to read a truncated\n    // label. `Tooltip.Trigger` renders `asChild` and composes refs, so the consumer's forwarded ref\n    // survives, and the ref measuring the truncation sits on the label further in.\n    const withTooltip = (row: ReactNode) => (\n      <BitkitOverflowTooltip disabled={!isTruncated} text={children}>\n        {row}\n      </BitkitOverflowTooltip>\n    );\n\n    // `chakra.a` / `chakra.button` rather than a named primitive: the item carries its own slot recipe,\n    // and Chakra's `Button`/`Link` would layer their own recipe styles on top of it.\n    if (rest.href !== undefined) {\n      const { className, href, onClick, onKeyDown, ...linkRest } = rest;\n      const handleClick = isDisabled\n        ? (event: MouseEvent<HTMLAnchorElement>) => {\n            event.preventDefault();\n            event.stopPropagation();\n          }\n        : onClick;\n      const handleKeyDown = isDisabled\n        ? (event: KeyboardEvent<HTMLAnchorElement>) => {\n            if (event.key === 'Enter' || event.key === ' ') {\n              event.preventDefault();\n              event.stopPropagation();\n            }\n          }\n        : onKeyDown;\n\n      return withTooltip(\n        <chakra.a\n          ref={ref as Ref<HTMLAnchorElement>}\n          {...linkRest}\n          aria-current={isSelected ? 'page' : undefined}\n          aria-disabled={isDisabled || undefined}\n          className={className ? `group ${className}` : 'group'}\n          css={styles.item}\n          // Dropping the attribute is what actually disables the link, the way `BitkitLink` and\n          // `BitkitControlButton` do it. The handlers below only block `click` and `Enter`/`Space`;\n          // a middle click fires `auxclick`, and \"Open link in new tab\" never reaches the page at\n          // all, so both would still navigate while an `href` is there to follow.\n          href={isDisabled ? undefined : href}\n          onClick={handleClick}\n          onKeyDown={handleKeyDown}\n        >\n          {itemContent}\n        </chakra.a>,\n      );\n    }\n\n    const { className, href: _href, ...buttonRest } = rest;\n\n    return withTooltip(\n      <chakra.button\n        ref={ref as Ref<HTMLButtonElement>}\n        {...buttonRest}\n        aria-current={isSelected ? 'page' : undefined}\n        className={className ? `group ${className}` : 'group'}\n        css={styles.item}\n        disabled={isDisabled}\n        type=\"button\"\n      >\n        {itemContent}\n      </chakra.button>,\n    );\n  },\n);\n\nBitkitPageSidebarItem.displayName = 'BitkitPageSidebarItem';\n\n// ----- BitkitPageSidebar.ProgressItem -----\n\nexport interface BitkitPageSidebarProgressItemProps extends Omit<HTMLChakraProps<'button'>, 'children' | 'disabled'> {\n  /**\n   * Trailing content between the label and the connector — a `BitkitBadge` counting what the stage\n   * is waiting on. Sized to itself; the connector takes the rest.\n   *\n   * The design draws it 20px tall, which is `size=\"xs\"`. The badge arrives as a node, so the\n   * component cannot set that for you — a taller one grows the row past its 40px.\n   */\n  badge?: ReactNode;\n  /** The row's label. */\n  children: ReactNode;\n  /**\n   * The status icon. Unlike `Item`, whose icon colour the sidebar owns, this one carries the\n   * stage's status, so `iconColor` is the consumer's to set — `selected`, `notRequired` and\n   * `state=\"disabled\"` still win over it, since those describe the row rather than the status.\n   */\n  icon: BitkitIconComponent;\n  /**\n   * A semantic token for the status the icon is showing. Left out, the icon takes the sidebar's own\n   * `icon/secondary` — which is what the design gives a stage whose icon carries no status, such as\n   * an approvals step.\n   *\n   * Narrowed to the `icon/*` and `color/*` tokens, so a name that does not exist is a compile error\n   * rather than a colour that silently does not apply. Both families are here because the statuses\n   * need both: the design takes success and failure from `icon/*` but in-progress from\n   * `color/orange/bold`, which the `icon/*` set has no equivalent of.\n   */\n  iconColor?: BitkitColorToken<'color' | 'icon'>;\n  /**\n   * A stage the release does not have to clear. Steps the icon and the label down one level, so the\n   * row reads as present but not awaited.\n   */\n  notRequired?: boolean;\n  /** Follows the label after a middle dot — `auto-upload`, `not required`. */\n  secondaryText?: string;\n  selected?: boolean;\n  state?: 'disabled';\n  /**\n   * Draws the dashed rule that runs from the badge to the trailing edge, tying one stage to the\n   * next. The last stage in a list has nothing to tie to, so it goes without.\n   */\n  withConnector?: boolean;\n}\n\n/**\n * A stage of something that progresses, as a row of the page sidebar — a release running through\n * its steps, and whatever comes to look like it.\n *\n * It is a sibling of `Item` rather than a variant of it: the row reports where a stage stands\n * rather than navigating, so its icon is status-coloured, its label does not grow, and a dashed\n * connector runs to the trailing edge between the stages.\n *\n * Always a `<button>`, and always interactive — it carries the shared row's pointer cursor and\n * hover background, so a row without an `onClick` looks actionable and is not. `Item`'s\n * button-or-anchor union is deliberately not here: a stage is selected within the page it is\n * already on rather than navigated to.\n */\nconst BitkitPageSidebarProgressItem = forwardRef<HTMLButtonElement, BitkitPageSidebarProgressItemProps>(\n  (props, ref) => {\n    const {\n      badge,\n      children,\n      className,\n      css,\n      icon: Icon,\n      iconColor,\n      notRequired,\n      secondaryText,\n      selected,\n      state,\n      withConnector,\n      ...rest\n    } = props;\n\n    const isDisabled = state === 'disabled';\n    // Disabled is the whole state of the row, so the other two are dropped rather than merged: the\n    // recipe resolves a combination in its own order, and a disabled row came out of it carrying\n    // the selected icon colour. Nothing about a disabled stage is selected or not-required.\n    const isSelected = selected && !isDisabled;\n    // And `selected` wins over `notRequired`, which the design decides rather than declaration\n    // order: its `selected=yes, notRequired=true` variant draws the selected row's icon and label\n    // and keeps `not required` in the secondary text -- which is what dropping this produces.\n    const isNotRequired = notRequired && !isDisabled && !isSelected;\n\n    const statusColor = isDisabled || isNotRequired || isSelected ? undefined : iconColor;\n\n    const recipe = useSlotRecipe({ key: 'pageSidebar' });\n    const styles = recipe({ isDisabled, notRequired: isNotRequired, selected: isSelected });\n\n    return (\n      <chakra.button\n        ref={ref}\n        {...rest}\n        // `step` rather than the `page` an `Item` carries: these are stages of one thing, not\n        // separate pages.\n        aria-current={isSelected ? 'step' : undefined}\n        className={className ? `group ${className}` : 'group'}\n        css={[styles.item, styles.progressRow, css]}\n        disabled={isDisabled}\n        type=\"button\"\n      >\n        <Box as=\"span\" css={[styles.contentBlock, styles.progressContentBlock]}>\n          {/* Two icons, one per size, for the reason `Item` has two -- see `showAtDesktop`.\n              The status colour applies while the row is ordinary: `selected`, `notRequired` and\n              disabled are states of the row rather than of the status, and the design recolours the\n              icon in all three, so the recipe takes it back there. */}\n          <Icon color={statusColor} css={[styles.progressIcon, showAtDesktop]} size=\"16\" />\n          <Icon color={statusColor} css={[styles.progressIcon, showAtMobile]} size=\"24\" />\n          <Box as=\"span\" css={styles.progressTextBlock}>\n            <Text as=\"span\" css={styles.progressLabel}>\n              {children}\n            </Text>\n            {secondaryText && (\n              <Text as=\"span\" css={styles.progressSecondaryText}>\n                {`\\u00b7 ${secondaryText}`}\n              </Text>\n            )}\n          </Box>\n          {(badge || withConnector) && (\n            <Box as=\"span\" css={styles.progressBlocker}>\n              {badge}\n              {/* Decorative: it ties the stages together visually and has nothing to separate in\n                  the button's accessibility tree. */}\n              {withConnector && <Separator aria-hidden css={styles.progressConnector} />}\n            </Box>\n          )}\n        </Box>\n        {isSelected && <Box as=\"span\" css={styles.selectionMarker} />}\n      </chakra.button>\n    );\n  },\n);\n\nBitkitPageSidebarProgressItem.displayName = 'BitkitPageSidebarProgressItem';\n\n// ----- BitkitPageSidebar.Title -----\n\ninterface BitkitPageSidebarTitleCommonProps extends BoxProps {\n  backLabel?: string;\n  children: ReactNode;\n}\n\ninterface BitkitPageSidebarTitleLinkProps extends BitkitPageSidebarTitleCommonProps {\n  backHref: string;\n  onBackClick?: never;\n}\n\ninterface BitkitPageSidebarTitleButtonProps extends BitkitPageSidebarTitleCommonProps {\n  backHref?: never;\n  onBackClick: () => void;\n}\n\ninterface BitkitPageSidebarTitlePlainProps extends BitkitPageSidebarTitleCommonProps {\n  backHref?: never;\n  onBackClick?: never;\n}\n\nexport type BitkitPageSidebarTitleProps =\n  | BitkitPageSidebarTitleButtonProps\n  | BitkitPageSidebarTitleLinkProps\n  | BitkitPageSidebarTitlePlainProps;\n\nconst BitkitPageSidebarTitle = forwardRef<HTMLDivElement, BitkitPageSidebarTitleProps>((props, ref) => {\n  const { backHref, backLabel = 'Back', children, css, onBackClick, ...rest } = props;\n\n  const hasBack = backHref !== undefined || onBackClick !== undefined;\n\n  const recipe = useSlotRecipe({ key: 'pageSidebar' });\n  const styles = recipe({ hasBack });\n\n  return (\n    <Box ref={ref} css={[styles.title, css]} {...rest}>\n      <Box css={styles.titleBlock}>\n        {/* The label tooltip opens to the right. Its default `top` has nowhere to go here — the\n            button sits at the very top of the sidebar, so the tooltip jams against the viewport\n            edge and covers the header instead of flipping. */}\n        {hasBack &&\n          (backHref !== undefined ? (\n            <BitkitControlButton\n              href={backHref}\n              icon={IconChevronLeft}\n              label={backLabel}\n              size=\"xs\"\n              tooltipProps={{ placement: 'right' }}\n            />\n          ) : (\n            <BitkitControlButton\n              icon={IconChevronLeft}\n              label={backLabel}\n              onClick={onBackClick}\n              size=\"xs\"\n              tooltipProps={{ placement: 'right' }}\n            />\n          ))}\n        <Text as=\"span\" css={styles.titleText}>\n          {children}\n        </Text>\n      </Box>\n    </Box>\n  );\n});\n\nBitkitPageSidebarTitle.displayName = 'BitkitPageSidebarTitle';\n\n// ----- BitkitPageSidebar.Body -----\n\nexport interface BitkitPageSidebarBodyProps extends BoxProps {\n  children: ReactNode;\n}\n\n/**\n * Holds the navigation items. It absorbs the space left between `Title` and `Footer`, so the footer\n * sits at the bottom of the viewport on a short navigation, and keeps a minimum gap above the\n * footer so the two blocks stay visually separate however long the list gets.\n */\nconst BitkitPageSidebarBody = forwardRef<HTMLDivElement, BitkitPageSidebarBodyProps>((props, ref) => {\n  const { children, css, ...rest } = props;\n\n  const recipe = useSlotRecipe({ key: 'pageSidebar' });\n  const styles = recipe();\n\n  return (\n    <Box ref={ref} css={[styles.body, css]} {...rest}>\n      {children}\n    </Box>\n  );\n});\n\nBitkitPageSidebarBody.displayName = 'BitkitPageSidebarBody';\n\n// ----- BitkitPageSidebar.Footer -----\n\nexport interface BitkitPageSidebarFooterProps extends BoxProps {\n  children: ReactNode;\n}\n\nconst BitkitPageSidebarFooter = forwardRef<HTMLDivElement, BitkitPageSidebarFooterProps>((props, ref) => {\n  const { children, css, ...rest } = props;\n\n  const recipe = useSlotRecipe({ key: 'pageSidebar' });\n  const styles = recipe();\n\n  return (\n    <Box ref={ref} css={[styles.footer, css]} {...rest}>\n      {children}\n    </Box>\n  );\n});\n\nBitkitPageSidebarFooter.displayName = 'BitkitPageSidebarFooter';\n\n// ----- BitkitPageSidebar.Project -----\n\nexport interface BitkitPageSidebarProjectProps extends BoxProps {\n  label: string;\n  value: string;\n}\n\nconst BitkitPageSidebarProject = forwardRef<HTMLDivElement, BitkitPageSidebarProjectProps>((props, ref) => {\n  const { css, label, value, ...rest } = props;\n\n  const recipe = useSlotRecipe({ key: 'pageSidebar' });\n  const styles = recipe();\n\n  const { isTruncated, ref: valueRef } = useIsTruncated<HTMLSpanElement>(value);\n\n  return (\n    <Box ref={ref} css={[styles.project, css]} {...rest}>\n      <Text as=\"span\" css={styles.projectLabel}>\n        {label}\n      </Text>\n      {/* Wrapper for the same reason as in Item: the trigger cannot be the element being measured. */}\n      <BitkitOverflowTooltip disabled={!isTruncated} text={value}>\n        <Box css={styles.projectValueWrapper}>\n          <Text as=\"span\" css={styles.projectValue} ref={valueRef}>\n            {value}\n          </Text>\n        </Box>\n      </BitkitOverflowTooltip>\n    </Box>\n  );\n});\n\nBitkitPageSidebarProject.displayName = 'BitkitPageSidebarProject';\n\n// ----- BitkitPageSidebar.GroupHeading -----\n\nexport type BitkitPageSidebarGroupHeadingProps = BitkitGroupHeadingProps;\n\nconst BitkitPageSidebarGroupHeading = forwardRef<HTMLDivElement, BitkitPageSidebarGroupHeadingProps>((props, ref) => {\n  return <BitkitGroupHeading ref={ref} paddingBlockEnd=\"8\" paddingBlockStart=\"16\" paddingInline=\"24\" {...props} />;\n});\n\nBitkitPageSidebarGroupHeading.displayName = 'BitkitPageSidebarGroupHeading';\n\n// ----- BitkitPageSidebar.Divider -----\n\nexport type BitkitPageSidebarDividerProps = SeparatorProps;\n\nconst BitkitPageSidebarDivider = forwardRef<HTMLDivElement, BitkitPageSidebarDividerProps>((props, ref) => {\n  const { css, ...rest } = props;\n\n  const recipe = useSlotRecipe({ key: 'pageSidebar' });\n  const styles = recipe();\n\n  return <Separator ref={ref} css={[styles.divider, css]} {...rest} />;\n});\n\nBitkitPageSidebarDivider.displayName = 'BitkitPageSidebarDivider';\n\nexport default withSubComponents(BitkitPageSidebar, {\n  Body: BitkitPageSidebarBody,\n  Divider: BitkitPageSidebarDivider,\n  Footer: BitkitPageSidebarFooter,\n  GroupHeading: BitkitPageSidebarGroupHeading,\n  Item: BitkitPageSidebarItem,\n  ProgressItem: BitkitPageSidebarProgressItem,\n  Project: BitkitPageSidebarProject,\n  Title: BitkitPageSidebarTitle,\n});\n"],"mappings":"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"}

package/dist/components/BitkitTabs/BitkitTabs.d.ts

@@ -1,7 +1,7 @@
-import { Tokens } from '@chakra-ui/react/styled-system';
 import { Tabs } from '@chakra-ui/react/tabs';
 import { ReactNode } from 'react';
 import { BitkitIconComponent } from '../../icons';
+import { BitkitColorToken } from '../../theme/themeUtils';
 import { BitkitControlButtonProps } from '../BitkitControlButton/BitkitControlButton';
 /**
  * Root props. `onValueChange` is re-declared with a concrete `{ value }` arg so the callback
@@ -22,7 +22,6 @@ declare const Root: import('react').ForwardRefExoticComponent<Omit<Tabs.RootProp
 } & import('react').RefAttributes<HTMLDivElement>>;
 /** Status-dot colors for the `canvas` variant. */
 export type BitkitTabsStatusColor = 'neutral' | 'purple' | 'red' | 'yellow';
-type BitkitTabsIconColor = [Extract<Tokens['colors'], `icon/${string}`>] extends [never] ? string : Extract<Tokens['colors'], `icon/${string}`>;
 export type BitkitTabsTriggerProps = Tabs.TriggerProps & {
     badge?: ReactNode;
     children?: string;
@@ -31,7 +30,7 @@ export type BitkitTabsTriggerProps = Tabs.TriggerProps & {
      * `contained` variant only: an `icon/*` token for the icon when it carries meaning of its own,
      * such as a trend arrow. It wins over the hover and selected colours; a disabled tab keeps its own.
      */
-    iconColor?: BitkitTabsIconColor;
+    iconColor?: BitkitColorToken<'icon'>;
     /** `canvas` variant only — when provided, a close button reveals on hover and calls this handler when clicked. */
     onClose?: () => void;
     secondaryText?: ReactNode;
@@ -46,7 +45,7 @@ declare const Trigger: import('react').ForwardRefExoticComponent<Tabs.TriggerPro
      * `contained` variant only: an `icon/*` token for the icon when it carries meaning of its own,
      * such as a trend arrow. It wins over the hover and selected colours; a disabled tab keeps its own.
      */
-    iconColor?: BitkitTabsIconColor;
+    iconColor?: BitkitColorToken<"icon">;
     /** `canvas` variant only — when provided, a close button reveals on hover and calls this handler when clicked. */
     onClose?: () => void;
     secondaryText?: ReactNode;

package/dist/components/BitkitTabs/BitkitTabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"BitkitTabs.js","names":[],"sources":["../../../lib/components/BitkitTabs/BitkitTabs.tsx"],"sourcesContent":["// eslint-disable-next-line no-restricted-imports\nimport { createContext, mergeRefs, useSafeLayoutEffect } from '@chakra-ui/react';\nimport { Box } from '@chakra-ui/react/box';\nimport { Menu, useMenuStyles } from '@chakra-ui/react/menu';\nimport { Portal } from '@chakra-ui/react/portal';\nimport { chakra, type Tokens, useRecipe } from '@chakra-ui/react/styled-system';\nimport { Tabs, useTabsContext, useTabsStyles } from '@chakra-ui/react/tabs';\nimport { Text } from '@chakra-ui/react/text';\nimport {\n  cloneElement,\n  forwardRef,\n  type KeyboardEvent,\n  type MouseEvent,\n  type ReactElement,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\nimport { type BitkitIconComponent, IconCross, IconPlus } from '../../icons';\nimport { flattenChildren } from '../../utilities/flattenChildren';\nimport { getTextContent } from '../../utilities/getTextContent';\nimport BitkitControlButton, { type BitkitControlButtonProps } from '../BitkitControlButton/BitkitControlButton';\n\n/**\n * Root props. `onValueChange` is re-declared with a concrete `{ value }` arg so the callback\n * parameter is inferred at the call site: the base `Tabs.RootProps` intersection breaks\n * contextual typing, which otherwise leaves consumers' `({ value }) => …` flagged as an\n * implicit `any` under `noImplicitAny`.\n */\nexport type BitkitTabsRootProps = Omit<Tabs.RootProps, 'onValueChange'> & {\n  onValueChange?: (details: { value: string }) => void;\n};\n\nexport const [RootPropsProvider, useRootPropsContext] = createContext<BitkitTabsRootProps>({\n  name: 'RootPropsContext',\n  hookName: 'useRootPropsContext',\n  providerName: '<RootProps />',\n});\n\nconst Root = forwardRef<HTMLDivElement, BitkitTabsRootProps>((props, ref) => {\n  return (\n    <RootPropsProvider value={props}>\n      <Tabs.Root ref={ref} {...props} />\n    </RootPropsProvider>\n  );\n});\n\n/** Status-dot colors for the `canvas` variant. */\nexport type BitkitTabsStatusColor = 'neutral' | 'purple' | 'red' | 'yellow';\n\nconst STATUS_COLOR_TOKEN: Record<BitkitTabsStatusColor, string> = {\n  neutral: 'color/neutral/muted',\n  purple: 'interactive/bold',\n  red: 'color/red/base',\n  yellow: 'color/yellow/bold',\n};\n\n// Falls back to `string` where the consumer's `chakra typegen` did not run, for the reason given on\n// `BitkitStatusColorToken` in BitkitPageSidebar.\ntype BitkitTabsIconColor = [Extract<Tokens['colors'], `icon/${string}`>] extends [never]\n  ? string\n  : Extract<Tokens['colors'], `icon/${string}`>;\n\nexport type BitkitTabsTriggerProps = Tabs.TriggerProps & {\n  badge?: ReactNode;\n  children?: string;\n  icon?: BitkitIconComponent;\n  /**\n   * `contained` variant only: an `icon/*` token for the icon when it carries meaning of its own,\n   * such as a trend arrow. It wins over the hover and selected colours; a disabled tab keeps its own.\n   */\n  iconColor?: BitkitTabsIconColor;\n  /** `canvas` variant only — when provided, a close button reveals on hover and calls this handler when clicked. */\n  onClose?: () => void;\n  secondaryText?: ReactNode;\n  /** `canvas` variant only — shows a status indicator dot. When hovered (and `onClose` is set), the close button replaces it. */\n  statusColor?: BitkitTabsStatusColor;\n};\n\nRoot.displayName = 'BitkitTabs.Root';\n\n// Canvas and line md tabs are the small ones: 16px icons, and an md overflow menu to match.\nconst isCompactTabs = (variant: BitkitTabsRootProps['variant'], size: BitkitTabsRootProps['size']) =>\n  variant === 'canvas' || (variant === 'line' && size === 'md');\n\nconst Trigger = forwardRef<HTMLButtonElement, BitkitTabsTriggerProps>((props, ref) => {\n  const {\n    badge,\n    children,\n    className,\n    icon: Icon,\n    iconColor,\n    onClose,\n    onKeyDown,\n    secondaryText,\n    statusColor,\n    ...rest\n  } = props;\n  // Mirror the recipe's defaultVariants: an unset `variant` must take the line branch below, not\n  // fall through to the contained one, and an unset `size` the lg icon size.\n  const { size = 'lg', variant = 'line' } = useRootPropsContext();\n  const closeButtonRecipe = useRecipe({ key: 'closeButton' });\n\n  // Close button and status dot are exclusive to the canvas variant.\n  const isCanvas = variant === 'canvas';\n  const closable = isCanvas && !!onClose && !rest.disabled;\n  const hasStatus = isCanvas && !!statusColor && !rest.disabled;\n  const showTrailing = closable || hasStatus;\n  const mergedClassName = showTrailing ? (className ? `group ${className}` : 'group') : className;\n  // The close button is always visible when there is no status dot; when the dot is shown it is\n  // revealed on hover/focus instead (replacing the dot).\n  const revealCloseOnInteraction = closable && hasStatus;\n  const revealOnInteraction = { opacity: 1, pointerEvents: 'auto' } as const;\n\n  const handleCloseClick = (event: MouseEvent<HTMLSpanElement>) => {\n    event.stopPropagation();\n    event.preventDefault();\n    onClose?.();\n  };\n\n  // The close control is not in the tab order; keyboard users close the focused tab with Delete/Backspace.\n  const handleTriggerKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n    if (closable && (event.key === 'Delete' || event.key === 'Backspace')) {\n      event.preventDefault();\n      // Move focus to a sibling tab before removal so keyboard navigation can continue.\n      const trigger = event.currentTarget;\n      // Skip overflowed (`hidden`) tabs — they aren't focusable.\n      const triggers = [\n        ...(trigger.closest('[role=\"tablist\"]')?.querySelectorAll<HTMLElement>('[role=\"tab\"]:not([hidden])') ?? []),\n      ];\n      const index = triggers.indexOf(trigger);\n      (triggers[index + 1] ?? triggers[index - 1])?.focus();\n      onClose?.();\n    }\n    onKeyDown?.(event);\n  };\n\n  const trailing = showTrailing ? (\n    <chakra.span\n      position=\"relative\"\n      display=\"flex\"\n      alignItems=\"center\"\n      justifyContent=\"center\"\n      boxSize=\"24\"\n      flexShrink={0}\n    >\n      {hasStatus && statusColor && (\n        <chakra.span\n          position=\"absolute\"\n          inset={0}\n          display=\"flex\"\n          alignItems=\"center\"\n          justifyContent=\"center\"\n          pointerEvents=\"none\"\n          transition=\"opacity 0.1s\"\n          _groupHover={closable ? { opacity: 0 } : undefined}\n          _groupFocusWithin={closable ? { opacity: 0 } : undefined}\n        >\n          <chakra.span boxSize=\"8\" borderRadius=\"full\" backgroundColor={STATUS_COLOR_TOKEN[statusColor]} />\n        </chakra.span>\n      )}\n      {closable && (\n        <chakra.span\n          aria-hidden\n          tabIndex={-1}\n          onClick={handleCloseClick}\n          css={closeButtonRecipe({ size: 'xs' })}\n          position=\"absolute\"\n          inset={0}\n          color=\"icon/primary\"\n          opacity={revealCloseOnInteraction ? 0 : 1}\n          pointerEvents={revealCloseOnInteraction ? 'none' : 'auto'}\n          transition=\"opacity 0.1s\"\n          _groupHover={revealCloseOnInteraction ? revealOnInteraction : undefined}\n          _groupFocusWithin={revealCloseOnInteraction ? revealOnInteraction : undefined}\n        >\n          <IconCross size=\"16\" />\n        </chakra.span>\n      )}\n    </chakra.span>\n  ) : null;\n\n  const isCompact = isCompactTabs(variant, size);\n  const hasOwnIconColor = variant === 'contained' && !!iconColor && !rest.disabled;\n  const icon = Icon && (\n    <Icon color={hasOwnIconColor ? iconColor : 'var(--tabs-icon-color)'} size={isCompact ? '16' : '24'} />\n  );\n  const canvasPadding = isCanvas\n    ? { paddingInlineEnd: showTrailing ? '8' : Icon ? '16' : undefined, paddingInlineStart: Icon ? '8' : undefined }\n    : undefined;\n\n  return (\n    <Tabs.Trigger ref={ref} {...rest} {...canvasPadding} className={mergedClassName} onKeyDown={handleTriggerKeyDown}>\n      {isCanvas ? (\n        <>\n          <Box display=\"flex\" alignItems=\"center\" gap=\"8\">\n            {icon}\n            {children}\n          </Box>\n          {trailing}\n        </>\n      ) : variant === 'line' ? (\n        <>\n          <Box display=\"flex\" alignItems=\"center\" gap=\"8\">\n            {icon}\n            {children}\n          </Box>\n          {badge}\n        </>\n      ) : (\n        <>\n          <Box display=\"flex\" flexDirection=\"column\">\n            <Box display=\"flex\" alignItems=\"flex-start\" gap=\"16\">\n              {children}\n              {badge}\n            </Box>\n            {!!secondaryText && (\n              <Text as=\"span\" textStyle=\"body/md/regular\" color={rest.disabled ? 'text/on-disabled' : 'text/secondary'}>\n                {secondaryText}\n              </Text>\n            )}\n          </Box>\n          {icon}\n        </>\n      )}\n    </Tabs.Trigger>\n  );\n});\n\nTrigger.displayName = 'BitkitTabs.Trigger';\n\ntype TabItem = ReactElement<BitkitTabsTriggerProps>;\n\n// Returns the set of visible tab indices for the overflow, always keeping the selected tab\n// visible: if it would overflow, it takes the last visible slot.\nconst getVisibleIndices = (total: number, count: number, selectedIndex: number) => {\n  const visible = new Set<number>();\n  for (let i = 0; i < count; i += 1) visible.add(i);\n  if (selectedIndex >= 0 && selectedIndex < total && !visible.has(selectedIndex)) {\n    visible.delete(count - 1);\n    visible.add(selectedIndex);\n  }\n  return visible;\n};\n\ntype MoreMenuItemProps = {\n  isCompact: boolean;\n  item: TabItem;\n  onSelect: () => void;\n  variant: BitkitTabsRootProps['variant'];\n};\n\nconst MoreMenuItem = ({ isCompact, item, onSelect, variant }: MoreMenuItemProps) => {\n  const menuStyles = useMenuStyles();\n  const { badge, children, disabled, icon: Icon, iconColor, secondaryText, statusColor, value } = item.props;\n\n  const isCanvas = variant === 'canvas';\n  const isContained = variant === 'contained';\n  const helperText = isContained ? secondaryText : undefined;\n\n  const ownIconColor = isContained ? iconColor : undefined;\n  const helperStyles = disabled ? { ...menuStyles.itemHelper, color: 'text/on-disabled' } : menuStyles.itemHelper;\n\n  return (\n    <Menu.Item data-helper={helperText ? '' : undefined} disabled={disabled} onSelect={onSelect} value={value}>\n      {Icon && <Icon color={disabled ? 'icon/on-disabled' : ownIconColor} size={isCompact ? '16' : '24'} />}\n      <Box flex=\"1\">\n        <Text color={disabled ? 'text/on-disabled' : undefined}>{children}</Text>\n        {!!helperText && <Text css={helperStyles}>{helperText}</Text>}\n      </Box>\n      {!isCanvas && badge}\n      {isCanvas && statusColor && (\n        <chakra.span boxSize=\"8\" borderRadius=\"full\" flexShrink={0} backgroundColor={STATUS_COLOR_TOKEN[statusColor]} />\n      )}\n    </Menu.Item>\n  );\n};\n\nexport type BitkitTabsAddButtonProps = Omit<\n  Extract<BitkitControlButtonProps, { href?: undefined }>,\n  'icon' | 'label' | 'size'\n> & {\n  /** Accessible label / tooltip for the add button. */\n  label?: string;\n};\n\n// \"+\" button to add a tab. Place it as a child of `List`; it always renders at the end of the row\n// (after the overflow menu). A compact `xxs` control button (16px icon, 4px padding) per the design.\nconst AddButton = forwardRef<HTMLButtonElement, BitkitTabsAddButtonProps>((props, ref) => {\n  const { label = 'Add tab', ...rest } = props;\n  return <BitkitControlButton ref={ref} icon={IconPlus} label={label} size=\"xxs\" {...rest} />;\n});\n\nAddButton.displayName = 'BitkitTabs.AddButton';\n\n// A stretched trigger (line tabs on mobile, or a consumer's own `flex`/`width`) is as wide as\n// its share of the list, not its content, so its laid-out width would count the free space as\n// needed space. Measure it unstretched, and unrounded: two 163.5px tabs read as 164 + 164 through\n// `offsetWidth` and overflow a 327px row.\n// The whole inline style is restored, because resetting the `flex` shorthand would also wipe any\n// inline flex longhands the consumer set.\nconst measureContentWidth = (node: HTMLElement) => {\n  const { cssText } = node.style;\n  node.style.flex = '0 0 auto';\n  node.style.width = 'max-content';\n  const contentWidth = node.getBoundingClientRect().width;\n  node.style.cssText = cssText;\n  return contentWidth;\n};\n\n// Overflow-aware List (all variants): measures the tabs and collapses the overflowing ones into a\n// \"N more…\" menu. The more-button look comes from the variant's `moreTrigger` recipe slot.\nconst List = forwardRef<HTMLDivElement, Tabs.ListProps>((props, ref) => {\n  // Semantic/labelling attributes belong on the actual tablist, not the visual wrapper.\n  const { children, css, id, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, ...rest } = props;\n  const { size = 'lg', variant = 'line' } = useRootPropsContext();\n  const api = useTabsContext();\n  const styles = useTabsStyles();\n  const isCompact = isCompactTabs(variant, size);\n\n  // Split children: tab triggers participate in overflow; the optional add button always renders last.\n  const allChildren = flattenChildren(children);\n  const addButton = allChildren.find((child) => child.type === AddButton) ?? null;\n  // Only Trigger elements are measured/overflowed; anything else (fragments, stray nodes) is ignored.\n  const items = allChildren.filter((child) => child.type === Trigger) as TabItem[];\n  // Re-measure whenever the tab set OR any width-affecting input changes: the variant and size, each\n  // tab's value/label, icon/status/close/disabled state, and the text of its badge and secondaryText,\n  // so a count going from 3 to 12 invalidates the cache.\n  const measureKey = [\n    variant,\n    size,\n    ...items.map((item) => {\n      const p = item.props;\n      return [\n        p.value,\n        String(p.children),\n        p.icon ? 'i' : '',\n        getTextContent(p.badge),\n        getTextContent(p.secondaryText),\n        p.statusColor ?? '',\n        p.onClose ? 'c' : '',\n        p.disabled ? 'd' : '',\n      ].join(':');\n    }),\n  ].join('|');\n  const selectedIndex = items.findIndex((item) => item.props.value === api.value);\n  // Width reservations for the more button, sized for a two-digit count (\"10 more…\"), and for the\n  // always-visible add button. Any slack here hides a tab that would have fitted.\n  const moreReserve = isCompact ? 88 : 104;\n  const addReserve = addButton ? 48 : 0;\n\n  const listRef = useRef<HTMLDivElement | null>(null);\n  const widthsRef = useRef<number[]>([]);\n  // Horizontal padding of the list, cached during the measure pass so the resize hot path doesn't\n  // call getComputedStyle on every tick.\n  const paddingRef = useRef(0);\n  // `measuredKey` is state (not a ref) so finishing the measure pass always re-renders and flips\n  // `measuring` off — even when recompute keeps the same visibleCount (which would skip a re-render).\n  const [measuredKey, setMeasuredKey] = useState<string | null>(null);\n  const [visibleCount, setVisibleCount] = useState(items.length);\n\n  const setListRef = useMemo(() => mergeRefs(listRef, ref), [ref]);\n\n  const recompute = useCallback(() => {\n    const el = listRef.current;\n    const widths = widthsRef.current;\n    if (!el || !widths.length) return;\n    const available = el.clientWidth - paddingRef.current - addReserve;\n    const totalWidth = widths.reduce((sum, w) => sum + w, 0);\n    if (totalWidth <= available) {\n      setVisibleCount(widths.length);\n      return;\n    }\n    let used = moreReserve;\n    let count = 0;\n    for (let i = 0; i < widths.length; i += 1) {\n      if (used + widths[i] > available) break;\n      used += widths[i];\n      count += 1;\n    }\n    setVisibleCount(Math.max(count, 1));\n  }, [addReserve, moreReserve]);\n\n  // Measure once per width-affecting change (all tabs are rendered visible during this pass).\n  // Isomorphic layout effect: avoids the SSR \"useLayoutEffect does nothing on the server\" warning.\n  const measuring = measuredKey !== measureKey;\n  useSafeLayoutEffect(() => {\n    const el = listRef.current;\n    if (!el) return;\n    if (measuredKey !== measureKey) {\n      const tabEls = el.querySelectorAll<HTMLElement>('[data-tab-trigger]');\n      widthsRef.current = Array.from(tabEls, measureContentWidth);\n      const cs = getComputedStyle(el);\n      paddingRef.current = parseFloat(cs.paddingLeft) + parseFloat(cs.paddingRight);\n      setMeasuredKey(measureKey);\n    }\n    recompute();\n  }, [measureKey, measuredKey, recompute]);\n\n  // Swapping the fallback font for the webfont changes the tabs' widths without resizing the list,\n  // so no ResizeObserver fires for it: measure again once the fonts are in.\n  useEffect(() => {\n    let cancelled = false;\n    void document.fonts?.ready.then(() => {\n      if (!cancelled) setMeasuredKey(null);\n    });\n    return () => {\n      cancelled = true;\n    };\n  }, []);\n\n  useEffect(() => {\n    const el = listRef.current;\n    if (!el || typeof ResizeObserver === 'undefined') return;\n    // Coalesce resize bursts into one recompute per frame to avoid a read/write layout storm.\n    let raf = 0;\n    const observer = new ResizeObserver(() => {\n      cancelAnimationFrame(raf);\n      raf = requestAnimationFrame(recompute);\n    });\n    observer.observe(el);\n    return () => {\n      cancelAnimationFrame(raf);\n      observer.disconnect();\n    };\n  }, [recompute]);\n\n  const showAll = measuring || visibleCount >= items.length;\n  const visible = showAll ? null : getVisibleIndices(items.length, visibleCount, selectedIndex);\n  const hiddenItems = visible ? items.filter((_, i) => !visible.has(i)) : [];\n\n  return (\n    // The visual row carries the list styling (background, baseline border, leading padding) and is\n    // measured for overflow. The tablist itself only wraps the tabs (`display: contents` keeps the\n    // flex layout intact), so the more/add controls stay outside `role=\"tablist\"` per the ARIA spec.\n    <Box ref={setListRef} css={[styles.list, css]} data-overflowing={hiddenItems.length > 0 ? '' : undefined} {...rest}>\n      <Tabs.List display=\"contents\" id={id} aria-label={ariaLabel} aria-labelledby={ariaLabelledby}>\n        {items.map((item, i) =>\n          cloneElement(item, {\n            key: item.props.value,\n            'data-tab-trigger': '',\n            hidden: visible ? !visible.has(i) : undefined,\n          } as Partial<BitkitTabsTriggerProps>),\n        )}\n      </Tabs.List>\n      {hiddenItems.length > 0 && (\n        <Menu.Root size={isCompact ? 'md' : 'lg'} positioning={{ gutter: 0, shift: -4 }}>\n          <Menu.Trigger asChild>\n            <chakra.button type=\"button\" css={styles.moreTrigger}>\n              {hiddenItems.length} more…\n            </chakra.button>\n          </Menu.Trigger>\n          <Portal>\n            <Menu.Positioner>\n              <Menu.Content>\n                {hiddenItems.map((item) => (\n                  <MoreMenuItem\n                    isCompact={isCompact}\n                    item={item}\n                    key={item.props.value}\n                    onSelect={() => api.setValue(item.props.value)}\n                    variant={variant}\n                  />\n                ))}\n              </Menu.Content>\n            </Menu.Positioner>\n          </Portal>\n        </Menu.Root>\n      )}\n      {addButton && (\n        <Box display=\"flex\" alignItems=\"center\" flexShrink={0} paddingInline=\"8\">\n          {addButton}\n        </Box>\n      )}\n    </Box>\n  );\n});\n\nList.displayName = 'BitkitTabs.List';\n\nconst BitkitTabs: Omit<typeof Tabs, 'Root' | 'Trigger' | 'List'> & {\n  AddButton: typeof AddButton;\n  List: typeof List;\n  Root: typeof Root;\n  Trigger: typeof Trigger;\n} = {\n  ...Tabs,\n  AddButton,\n  List,\n  Root,\n  Trigger,\n};\n\nBitkitTabs.Content.displayName = 'BitkitTabs.Content';\nBitkitTabs.ContentGroup.displayName = 'BitkitTabs.ContentGroup';\nBitkitTabs.Root.displayName = 'BitkitTabs.Root';\n\nexport default BitkitTabs;\n"],"mappings":"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"}
+{"version":3,"file":"BitkitTabs.js","names":[],"sources":["../../../lib/components/BitkitTabs/BitkitTabs.tsx"],"sourcesContent":["// eslint-disable-next-line no-restricted-imports\nimport { createContext, mergeRefs, useSafeLayoutEffect } from '@chakra-ui/react';\nimport { Box } from '@chakra-ui/react/box';\nimport { Menu, useMenuStyles } from '@chakra-ui/react/menu';\nimport { Portal } from '@chakra-ui/react/portal';\nimport { chakra, useRecipe } from '@chakra-ui/react/styled-system';\nimport { Tabs, useTabsContext, useTabsStyles } from '@chakra-ui/react/tabs';\nimport { Text } from '@chakra-ui/react/text';\nimport {\n  cloneElement,\n  forwardRef,\n  type KeyboardEvent,\n  type MouseEvent,\n  type ReactElement,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\nimport { type BitkitIconComponent, IconCross, IconPlus } from '../../icons';\nimport { type BitkitColorToken } from '../../theme/themeUtils';\nimport { flattenChildren } from '../../utilities/flattenChildren';\nimport { getTextContent } from '../../utilities/getTextContent';\nimport BitkitControlButton, { type BitkitControlButtonProps } from '../BitkitControlButton/BitkitControlButton';\n\n/**\n * Root props. `onValueChange` is re-declared with a concrete `{ value }` arg so the callback\n * parameter is inferred at the call site: the base `Tabs.RootProps` intersection breaks\n * contextual typing, which otherwise leaves consumers' `({ value }) => …` flagged as an\n * implicit `any` under `noImplicitAny`.\n */\nexport type BitkitTabsRootProps = Omit<Tabs.RootProps, 'onValueChange'> & {\n  onValueChange?: (details: { value: string }) => void;\n};\n\nexport const [RootPropsProvider, useRootPropsContext] = createContext<BitkitTabsRootProps>({\n  name: 'RootPropsContext',\n  hookName: 'useRootPropsContext',\n  providerName: '<RootProps />',\n});\n\nconst Root = forwardRef<HTMLDivElement, BitkitTabsRootProps>((props, ref) => {\n  return (\n    <RootPropsProvider value={props}>\n      <Tabs.Root ref={ref} {...props} />\n    </RootPropsProvider>\n  );\n});\n\n/** Status-dot colors for the `canvas` variant. */\nexport type BitkitTabsStatusColor = 'neutral' | 'purple' | 'red' | 'yellow';\n\nconst STATUS_COLOR_TOKEN: Record<BitkitTabsStatusColor, string> = {\n  neutral: 'color/neutral/muted',\n  purple: 'interactive/bold',\n  red: 'color/red/base',\n  yellow: 'color/yellow/bold',\n};\n\nexport type BitkitTabsTriggerProps = Tabs.TriggerProps & {\n  badge?: ReactNode;\n  children?: string;\n  icon?: BitkitIconComponent;\n  /**\n   * `contained` variant only: an `icon/*` token for the icon when it carries meaning of its own,\n   * such as a trend arrow. It wins over the hover and selected colours; a disabled tab keeps its own.\n   */\n  iconColor?: BitkitColorToken<'icon'>;\n  /** `canvas` variant only — when provided, a close button reveals on hover and calls this handler when clicked. */\n  onClose?: () => void;\n  secondaryText?: ReactNode;\n  /** `canvas` variant only — shows a status indicator dot. When hovered (and `onClose` is set), the close button replaces it. */\n  statusColor?: BitkitTabsStatusColor;\n};\n\nRoot.displayName = 'BitkitTabs.Root';\n\n// Canvas and line md tabs are the small ones: 16px icons, and an md overflow menu to match.\nconst isCompactTabs = (variant: BitkitTabsRootProps['variant'], size: BitkitTabsRootProps['size']) =>\n  variant === 'canvas' || (variant === 'line' && size === 'md');\n\nconst Trigger = forwardRef<HTMLButtonElement, BitkitTabsTriggerProps>((props, ref) => {\n  const {\n    badge,\n    children,\n    className,\n    icon: Icon,\n    iconColor,\n    onClose,\n    onKeyDown,\n    secondaryText,\n    statusColor,\n    ...rest\n  } = props;\n  // Mirror the recipe's defaultVariants: an unset `variant` must take the line branch below, not\n  // fall through to the contained one, and an unset `size` the lg icon size.\n  const { size = 'lg', variant = 'line' } = useRootPropsContext();\n  const closeButtonRecipe = useRecipe({ key: 'closeButton' });\n\n  // Close button and status dot are exclusive to the canvas variant.\n  const isCanvas = variant === 'canvas';\n  const closable = isCanvas && !!onClose && !rest.disabled;\n  const hasStatus = isCanvas && !!statusColor && !rest.disabled;\n  const showTrailing = closable || hasStatus;\n  const mergedClassName = showTrailing ? (className ? `group ${className}` : 'group') : className;\n  // The close button is always visible when there is no status dot; when the dot is shown it is\n  // revealed on hover/focus instead (replacing the dot).\n  const revealCloseOnInteraction = closable && hasStatus;\n  const revealOnInteraction = { opacity: 1, pointerEvents: 'auto' } as const;\n\n  const handleCloseClick = (event: MouseEvent<HTMLSpanElement>) => {\n    event.stopPropagation();\n    event.preventDefault();\n    onClose?.();\n  };\n\n  // The close control is not in the tab order; keyboard users close the focused tab with Delete/Backspace.\n  const handleTriggerKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n    if (closable && (event.key === 'Delete' || event.key === 'Backspace')) {\n      event.preventDefault();\n      // Move focus to a sibling tab before removal so keyboard navigation can continue.\n      const trigger = event.currentTarget;\n      // Skip overflowed (`hidden`) tabs — they aren't focusable.\n      const triggers = [\n        ...(trigger.closest('[role=\"tablist\"]')?.querySelectorAll<HTMLElement>('[role=\"tab\"]:not([hidden])') ?? []),\n      ];\n      const index = triggers.indexOf(trigger);\n      (triggers[index + 1] ?? triggers[index - 1])?.focus();\n      onClose?.();\n    }\n    onKeyDown?.(event);\n  };\n\n  const trailing = showTrailing ? (\n    <chakra.span\n      position=\"relative\"\n      display=\"flex\"\n      alignItems=\"center\"\n      justifyContent=\"center\"\n      boxSize=\"24\"\n      flexShrink={0}\n    >\n      {hasStatus && statusColor && (\n        <chakra.span\n          position=\"absolute\"\n          inset={0}\n          display=\"flex\"\n          alignItems=\"center\"\n          justifyContent=\"center\"\n          pointerEvents=\"none\"\n          transition=\"opacity 0.1s\"\n          _groupHover={closable ? { opacity: 0 } : undefined}\n          _groupFocusWithin={closable ? { opacity: 0 } : undefined}\n        >\n          <chakra.span boxSize=\"8\" borderRadius=\"full\" backgroundColor={STATUS_COLOR_TOKEN[statusColor]} />\n        </chakra.span>\n      )}\n      {closable && (\n        <chakra.span\n          aria-hidden\n          tabIndex={-1}\n          onClick={handleCloseClick}\n          css={closeButtonRecipe({ size: 'xs' })}\n          position=\"absolute\"\n          inset={0}\n          color=\"icon/primary\"\n          opacity={revealCloseOnInteraction ? 0 : 1}\n          pointerEvents={revealCloseOnInteraction ? 'none' : 'auto'}\n          transition=\"opacity 0.1s\"\n          _groupHover={revealCloseOnInteraction ? revealOnInteraction : undefined}\n          _groupFocusWithin={revealCloseOnInteraction ? revealOnInteraction : undefined}\n        >\n          <IconCross size=\"16\" />\n        </chakra.span>\n      )}\n    </chakra.span>\n  ) : null;\n\n  const isCompact = isCompactTabs(variant, size);\n  const hasOwnIconColor = variant === 'contained' && !!iconColor && !rest.disabled;\n  const icon = Icon && (\n    <Icon color={hasOwnIconColor ? iconColor : 'var(--tabs-icon-color)'} size={isCompact ? '16' : '24'} />\n  );\n  const canvasPadding = isCanvas\n    ? { paddingInlineEnd: showTrailing ? '8' : Icon ? '16' : undefined, paddingInlineStart: Icon ? '8' : undefined }\n    : undefined;\n\n  return (\n    <Tabs.Trigger ref={ref} {...rest} {...canvasPadding} className={mergedClassName} onKeyDown={handleTriggerKeyDown}>\n      {isCanvas ? (\n        <>\n          <Box display=\"flex\" alignItems=\"center\" gap=\"8\">\n            {icon}\n            {children}\n          </Box>\n          {trailing}\n        </>\n      ) : variant === 'line' ? (\n        <>\n          <Box display=\"flex\" alignItems=\"center\" gap=\"8\">\n            {icon}\n            {children}\n          </Box>\n          {badge}\n        </>\n      ) : (\n        <>\n          <Box display=\"flex\" flexDirection=\"column\">\n            <Box display=\"flex\" alignItems=\"flex-start\" gap=\"16\">\n              {children}\n              {badge}\n            </Box>\n            {!!secondaryText && (\n              <Text as=\"span\" textStyle=\"body/md/regular\" color={rest.disabled ? 'text/on-disabled' : 'text/secondary'}>\n                {secondaryText}\n              </Text>\n            )}\n          </Box>\n          {icon}\n        </>\n      )}\n    </Tabs.Trigger>\n  );\n});\n\nTrigger.displayName = 'BitkitTabs.Trigger';\n\ntype TabItem = ReactElement<BitkitTabsTriggerProps>;\n\n// Returns the set of visible tab indices for the overflow, always keeping the selected tab\n// visible: if it would overflow, it takes the last visible slot.\nconst getVisibleIndices = (total: number, count: number, selectedIndex: number) => {\n  const visible = new Set<number>();\n  for (let i = 0; i < count; i += 1) visible.add(i);\n  if (selectedIndex >= 0 && selectedIndex < total && !visible.has(selectedIndex)) {\n    visible.delete(count - 1);\n    visible.add(selectedIndex);\n  }\n  return visible;\n};\n\ntype MoreMenuItemProps = {\n  isCompact: boolean;\n  item: TabItem;\n  onSelect: () => void;\n  variant: BitkitTabsRootProps['variant'];\n};\n\nconst MoreMenuItem = ({ isCompact, item, onSelect, variant }: MoreMenuItemProps) => {\n  const menuStyles = useMenuStyles();\n  const { badge, children, disabled, icon: Icon, iconColor, secondaryText, statusColor, value } = item.props;\n\n  const isCanvas = variant === 'canvas';\n  const isContained = variant === 'contained';\n  const helperText = isContained ? secondaryText : undefined;\n\n  const ownIconColor = isContained ? iconColor : undefined;\n  const helperStyles = disabled ? { ...menuStyles.itemHelper, color: 'text/on-disabled' } : menuStyles.itemHelper;\n\n  return (\n    <Menu.Item data-helper={helperText ? '' : undefined} disabled={disabled} onSelect={onSelect} value={value}>\n      {Icon && <Icon color={disabled ? 'icon/on-disabled' : ownIconColor} size={isCompact ? '16' : '24'} />}\n      <Box flex=\"1\">\n        <Text color={disabled ? 'text/on-disabled' : undefined}>{children}</Text>\n        {!!helperText && <Text css={helperStyles}>{helperText}</Text>}\n      </Box>\n      {!isCanvas && badge}\n      {isCanvas && statusColor && (\n        <chakra.span boxSize=\"8\" borderRadius=\"full\" flexShrink={0} backgroundColor={STATUS_COLOR_TOKEN[statusColor]} />\n      )}\n    </Menu.Item>\n  );\n};\n\nexport type BitkitTabsAddButtonProps = Omit<\n  Extract<BitkitControlButtonProps, { href?: undefined }>,\n  'icon' | 'label' | 'size'\n> & {\n  /** Accessible label / tooltip for the add button. */\n  label?: string;\n};\n\n// \"+\" button to add a tab. Place it as a child of `List`; it always renders at the end of the row\n// (after the overflow menu). A compact `xxs` control button (16px icon, 4px padding) per the design.\nconst AddButton = forwardRef<HTMLButtonElement, BitkitTabsAddButtonProps>((props, ref) => {\n  const { label = 'Add tab', ...rest } = props;\n  return <BitkitControlButton ref={ref} icon={IconPlus} label={label} size=\"xxs\" {...rest} />;\n});\n\nAddButton.displayName = 'BitkitTabs.AddButton';\n\n// A stretched trigger (line tabs on mobile, or a consumer's own `flex`/`width`) is as wide as\n// its share of the list, not its content, so its laid-out width would count the free space as\n// needed space. Measure it unstretched, and unrounded: two 163.5px tabs read as 164 + 164 through\n// `offsetWidth` and overflow a 327px row.\n// The whole inline style is restored, because resetting the `flex` shorthand would also wipe any\n// inline flex longhands the consumer set.\nconst measureContentWidth = (node: HTMLElement) => {\n  const { cssText } = node.style;\n  node.style.flex = '0 0 auto';\n  node.style.width = 'max-content';\n  const contentWidth = node.getBoundingClientRect().width;\n  node.style.cssText = cssText;\n  return contentWidth;\n};\n\n// Overflow-aware List (all variants): measures the tabs and collapses the overflowing ones into a\n// \"N more…\" menu. The more-button look comes from the variant's `moreTrigger` recipe slot.\nconst List = forwardRef<HTMLDivElement, Tabs.ListProps>((props, ref) => {\n  // Semantic/labelling attributes belong on the actual tablist, not the visual wrapper.\n  const { children, css, id, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, ...rest } = props;\n  const { size = 'lg', variant = 'line' } = useRootPropsContext();\n  const api = useTabsContext();\n  const styles = useTabsStyles();\n  const isCompact = isCompactTabs(variant, size);\n\n  // Split children: tab triggers participate in overflow; the optional add button always renders last.\n  const allChildren = flattenChildren(children);\n  const addButton = allChildren.find((child) => child.type === AddButton) ?? null;\n  // Only Trigger elements are measured/overflowed; anything else (fragments, stray nodes) is ignored.\n  const items = allChildren.filter((child) => child.type === Trigger) as TabItem[];\n  // Re-measure whenever the tab set OR any width-affecting input changes: the variant and size, each\n  // tab's value/label, icon/status/close/disabled state, and the text of its badge and secondaryText,\n  // so a count going from 3 to 12 invalidates the cache.\n  const measureKey = [\n    variant,\n    size,\n    ...items.map((item) => {\n      const p = item.props;\n      return [\n        p.value,\n        String(p.children),\n        p.icon ? 'i' : '',\n        getTextContent(p.badge),\n        getTextContent(p.secondaryText),\n        p.statusColor ?? '',\n        p.onClose ? 'c' : '',\n        p.disabled ? 'd' : '',\n      ].join(':');\n    }),\n  ].join('|');\n  const selectedIndex = items.findIndex((item) => item.props.value === api.value);\n  // Width reservations for the more button, sized for a two-digit count (\"10 more…\"), and for the\n  // always-visible add button. Any slack here hides a tab that would have fitted.\n  const moreReserve = isCompact ? 88 : 104;\n  const addReserve = addButton ? 48 : 0;\n\n  const listRef = useRef<HTMLDivElement | null>(null);\n  const widthsRef = useRef<number[]>([]);\n  // Horizontal padding of the list, cached during the measure pass so the resize hot path doesn't\n  // call getComputedStyle on every tick.\n  const paddingRef = useRef(0);\n  // `measuredKey` is state (not a ref) so finishing the measure pass always re-renders and flips\n  // `measuring` off — even when recompute keeps the same visibleCount (which would skip a re-render).\n  const [measuredKey, setMeasuredKey] = useState<string | null>(null);\n  const [visibleCount, setVisibleCount] = useState(items.length);\n\n  const setListRef = useMemo(() => mergeRefs(listRef, ref), [ref]);\n\n  const recompute = useCallback(() => {\n    const el = listRef.current;\n    const widths = widthsRef.current;\n    if (!el || !widths.length) return;\n    const available = el.clientWidth - paddingRef.current - addReserve;\n    const totalWidth = widths.reduce((sum, w) => sum + w, 0);\n    if (totalWidth <= available) {\n      setVisibleCount(widths.length);\n      return;\n    }\n    let used = moreReserve;\n    let count = 0;\n    for (let i = 0; i < widths.length; i += 1) {\n      if (used + widths[i] > available) break;\n      used += widths[i];\n      count += 1;\n    }\n    setVisibleCount(Math.max(count, 1));\n  }, [addReserve, moreReserve]);\n\n  // Measure once per width-affecting change (all tabs are rendered visible during this pass).\n  // Isomorphic layout effect: avoids the SSR \"useLayoutEffect does nothing on the server\" warning.\n  const measuring = measuredKey !== measureKey;\n  useSafeLayoutEffect(() => {\n    const el = listRef.current;\n    if (!el) return;\n    if (measuredKey !== measureKey) {\n      const tabEls = el.querySelectorAll<HTMLElement>('[data-tab-trigger]');\n      widthsRef.current = Array.from(tabEls, measureContentWidth);\n      const cs = getComputedStyle(el);\n      paddingRef.current = parseFloat(cs.paddingLeft) + parseFloat(cs.paddingRight);\n      setMeasuredKey(measureKey);\n    }\n    recompute();\n  }, [measureKey, measuredKey, recompute]);\n\n  // Swapping the fallback font for the webfont changes the tabs' widths without resizing the list,\n  // so no ResizeObserver fires for it: measure again once the fonts are in.\n  useEffect(() => {\n    let cancelled = false;\n    void document.fonts?.ready.then(() => {\n      if (!cancelled) setMeasuredKey(null);\n    });\n    return () => {\n      cancelled = true;\n    };\n  }, []);\n\n  useEffect(() => {\n    const el = listRef.current;\n    if (!el || typeof ResizeObserver === 'undefined') return;\n    // Coalesce resize bursts into one recompute per frame to avoid a read/write layout storm.\n    let raf = 0;\n    const observer = new ResizeObserver(() => {\n      cancelAnimationFrame(raf);\n      raf = requestAnimationFrame(recompute);\n    });\n    observer.observe(el);\n    return () => {\n      cancelAnimationFrame(raf);\n      observer.disconnect();\n    };\n  }, [recompute]);\n\n  const showAll = measuring || visibleCount >= items.length;\n  const visible = showAll ? null : getVisibleIndices(items.length, visibleCount, selectedIndex);\n  const hiddenItems = visible ? items.filter((_, i) => !visible.has(i)) : [];\n\n  return (\n    // The visual row carries the list styling (background, baseline border, leading padding) and is\n    // measured for overflow. The tablist itself only wraps the tabs (`display: contents` keeps the\n    // flex layout intact), so the more/add controls stay outside `role=\"tablist\"` per the ARIA spec.\n    <Box ref={setListRef} css={[styles.list, css]} data-overflowing={hiddenItems.length > 0 ? '' : undefined} {...rest}>\n      <Tabs.List display=\"contents\" id={id} aria-label={ariaLabel} aria-labelledby={ariaLabelledby}>\n        {items.map((item, i) =>\n          cloneElement(item, {\n            key: item.props.value,\n            'data-tab-trigger': '',\n            hidden: visible ? !visible.has(i) : undefined,\n          } as Partial<BitkitTabsTriggerProps>),\n        )}\n      </Tabs.List>\n      {hiddenItems.length > 0 && (\n        <Menu.Root size={isCompact ? 'md' : 'lg'} positioning={{ gutter: 0, shift: -4 }}>\n          <Menu.Trigger asChild>\n            <chakra.button type=\"button\" css={styles.moreTrigger}>\n              {hiddenItems.length} more…\n            </chakra.button>\n          </Menu.Trigger>\n          <Portal>\n            <Menu.Positioner>\n              <Menu.Content>\n                {hiddenItems.map((item) => (\n                  <MoreMenuItem\n                    isCompact={isCompact}\n                    item={item}\n                    key={item.props.value}\n                    onSelect={() => api.setValue(item.props.value)}\n                    variant={variant}\n                  />\n                ))}\n              </Menu.Content>\n            </Menu.Positioner>\n          </Portal>\n        </Menu.Root>\n      )}\n      {addButton && (\n        <Box display=\"flex\" alignItems=\"center\" flexShrink={0} paddingInline=\"8\">\n          {addButton}\n        </Box>\n      )}\n    </Box>\n  );\n});\n\nList.displayName = 'BitkitTabs.List';\n\nconst BitkitTabs: Omit<typeof Tabs, 'Root' | 'Trigger' | 'List'> & {\n  AddButton: typeof AddButton;\n  List: typeof List;\n  Root: typeof Root;\n  Trigger: typeof Trigger;\n} = {\n  ...Tabs,\n  AddButton,\n  List,\n  Root,\n  Trigger,\n};\n\nBitkitTabs.Content.displayName = 'BitkitTabs.Content';\nBitkitTabs.ContentGroup.displayName = 'BitkitTabs.ContentGroup';\nBitkitTabs.Root.displayName = 'BitkitTabs.Root';\n\nexport default BitkitTabs;\n"],"mappings":"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"}

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

@@ -1,6 +1,7 @@
 import { TreeViewBranchControlProps, TreeViewItemProps, TreeViewNodeRenderProps, TreeViewRootProps } from '@chakra-ui/react/tree-view';
 import { ReactElement, ReactNode } from 'react';
 import { BitkitIconComponent } from '../../icons';
+import { BitkitColorToken } from '../../theme/themeUtils';
 export { createTreeCollection } from '@chakra-ui/react/collection';
 export type { TreeViewExpandedChangeDetails as BitkitTreeViewExpandedChangeDetails, TreeViewNodeRenderProps as BitkitTreeViewNodeRenderProps, TreeViewSelectionChangeDetails as BitkitTreeViewSelectionChangeDetails, } from '@chakra-ui/react/tree-view';
 export type BitkitTreeViewVariant = 'files' | 'navigation';
@@ -22,6 +23,8 @@ export interface BitkitTreeViewLeafProps extends Omit<TreeViewItemProps, 'childr
     badge?: ReactElement;
     hasWarning?: boolean;
     icon?: BitkitIconComponent;
+    /** An `icon/*` token for the icon when it carries meaning of its own, such as a test result's status. */
+    iconColor?: BitkitColorToken<'icon'>;
     label: string;
     subtext?: ReactNode;
     suffixIcon?: BitkitIconComponent;

package/dist/components/BitkitTreeView/BitkitTreeView.js

@@ -68,7 +68,7 @@ var Branch = forwardRef((props, ref) => {
 });
 Branch.displayName = "BitkitTreeView.Branch";
 var Leaf = forwardRef((props, ref) => {
-	const { actions, badge, hasWarning, icon: Icon, label, subtext, suffixIcon: SuffixIcon, suffixText, ...rest } = props;
+	const { actions, badge, hasWarning, icon: Icon, iconColor, label, subtext, suffixIcon: SuffixIcon, suffixText, ...rest } = props;
 	const { variant } = useVariant();
 	const styles = useCustomSlotStyles(variant);
 	const hasSuffix = hasWarning || SuffixIcon || suffixText;
@@ -78,7 +78,10 @@ var Leaf = forwardRef((props, ref) => {
 		className: hasActions ? "group" : void 0,
 		...rest,
 		children: [
-			Icon && /* @__PURE__ */ jsx(Icon, { size: "16" }),
+			Icon && /* @__PURE__ */ jsx(Icon, {
+				color: iconColor,
+				size: "16"
+			}),
 			badge && cloneElement(badge, { size: "xs" }),
 			/* @__PURE__ */ jsxs(TreeView.ItemText, { children: [label, subtext && /* @__PURE__ */ jsx(Text, {
 				css: styles.secondaryText,

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 { 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  label: string;\n  subtext?: ReactNode;\n  suffixIcon?: BitkitIconComponent;\n  suffixText?: string;\n}\n\nconst Leaf = forwardRef<HTMLDivElement, BitkitTreeViewLeafProps>((props, ref) => {\n  const { actions, badge, hasWarning, icon: Icon, 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  return (\n    <TreeView.Item ref={ref} className={hasActions ? 'group' : undefined} {...rest}>\n      {Icon && <Icon 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} 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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"}

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

@@ -102,7 +102,6 @@ declare const treeViewSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinitio
                     background: "border/minimal";
                 };
                 '& > svg': {
-                    color: "icon/secondary";
                     marginBlockStart: `${number}rem`;
                 };
                 _selected: {

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

@@ -92,7 +92,18 @@ var treeViewSlotRecipe = defineSlotRecipe({
 			justifyContent: "center"
 		},
 		branchControl: { ...baseItemStyle },
-		item: { ...baseItemStyle },
+		item: {
+			...baseItemStyle,
+			"& > svg": { color: "icon/secondary" },
+			_active: {
+				...baseItemStyle._active,
+				"& > svg": { color: "icon/primary" }
+			},
+			_selected: {
+				...baseItemStyle._selected,
+				"& > svg": { color: "icon/primary" }
+			}
+		},
 		branchText: baseTextStyle,
 		itemText: baseTextStyle,
 		branchIndentGuide: {},
@@ -206,10 +217,7 @@ var treeViewSlotRecipe = defineSlotRecipe({
 					height: "1",
 					background: "border/minimal"
 				},
-				"& > svg": {
-					color: "icon/secondary",
-					marginBlockStart: rem(9)
-				},
+				"& > svg": { marginBlockStart: rem(9) },
 				_selected: { "&::after": {
 					content: "\"\"",
 					position: "absolute",

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    },\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          // Direct-child selector (not Chakra's _icon) — the item also hosts nested SVGs in\n          // suffix/action/expand slots, and _icon's `:where(svg, [role=img])` would recolor\n          // and push those down too.\n          '& > svg': {\n            color: 'icon/secondary',\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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"}
+{"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"}

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

@@ -3346,7 +3346,6 @@ declare const slotRecipes: {
                         background: "border/minimal";
                     };
                     '& > svg': {
-                        color: "icon/secondary";
                         marginBlockStart: `${number}rem`;
                     };
                     _selected: {

package/dist/theme/themeUtils.d.ts

@@ -1,3 +1,4 @@
+import { Tokens } from '@chakra-ui/react/styled-system';
 import { TextProps } from '@chakra-ui/react/text';
 export declare const flattenTokens: (object: object, prefix?: string) => Record<string, any>;
 export declare function withSlashes(object: Record<string, any>): Record<string, any>;
@@ -7,4 +8,15 @@ export declare function withSlashes(object: Record<string, any>): Record<string,
  * @returns Value in rems, typed precisely enough to satisfy props that take a `${number}rem`
  */
 export declare const rem: (input: number) => `${number}rem`;
+/**
+ * The colour tokens under the given prefixes, for props that must take a semantic token.
+ *
+ * `Tokens` is generated in the consumer's own project by `chakra typegen`, which
+ * `scripts/postinstall.cjs` runs and which exits 0 with a warning when it cannot. Where it did not
+ * run, `Tokens['colors']` is Chakra's stock union, the `Extract` has nothing to match and collapses
+ * to `never` -- which would make every prop using it a type error pointing at the wrong thing. So it
+ * falls back to `string`: the narrowing is a guard where the types are real, not a tripwire where
+ * they are not.
+ */
+export type BitkitColorToken<Prefix extends string> = [Extract<Tokens['colors'], `${Prefix}/${string}`>] extends [never] ? string : Extract<Tokens['colors'], `${Prefix}/${string}`>;
 export declare const getTextStyle: (as: TextProps["as"]) => string | undefined;

package/dist/theme/themeUtils.js.map

@@ -1 +1 @@
-{"version":3,"file":"themeUtils.js","names":[],"sources":["../../lib/theme/themeUtils.ts"],"sourcesContent":["import { type TextProps } from '@chakra-ui/react/text';\nimport { isPlainObject } from 'es-toolkit';\n\n// Based on https://github.com/toss/es-toolkit/blob/main/src/object/flattenObject.ts\nexport const flattenTokens = (object: object, prefix: string = ''): Record<string, any> => {\n  const result: Record<string, any> = {};\n  const keys = Object.keys(object);\n\n  for (let i = 0; i < keys.length; i++) {\n    const key = keys[i];\n    const value = (object as any)[key];\n\n    const prefixedKey = prefix ? `${prefix}/${key}` : key;\n\n    if (isPlainObject(value) && Object.keys(value).length > 0 && Object.keys(value)[0] !== 'value') {\n      Object.assign(result, flattenTokens(value, prefixedKey));\n      continue;\n    }\n\n    result[prefixedKey] = value;\n  }\n\n  return result;\n};\n\nexport function withSlashes(object: Record<string, any>): Record<string, any> {\n  return {\n    ...object,\n    ...flattenTokens(object),\n  };\n}\n\n/**\n *\n * @param input Value in pixels\n * @returns Value in rems, typed precisely enough to satisfy props that take a `${number}rem`\n */\nexport const rem = (input: number): `${number}rem` => {\n  return `${input / 16}rem`;\n};\n\nexport const getTextStyle = (as: TextProps['as']) => {\n  if (['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].includes(as as string)) {\n    return `heading/${as}`;\n  }\n  return undefined;\n};\n"],"mappings":";;AAIA,IAAa,iBAAiB,QAAgB,SAAiB,OAA4B;CACzF,MAAM,SAA8B,CAAC;CACrC,MAAM,OAAO,OAAO,KAAK,MAAM;CAE/B,KAAK,IAAI,IAAI,GAAG,IAAI,KAAK,QAAQ,KAAK;EACpC,MAAM,MAAM,KAAK;EACjB,MAAM,QAAS,OAAe;EAE9B,MAAM,cAAc,SAAS,GAAG,OAAO,GAAG,QAAQ;EAElD,IAAI,cAAc,KAAK,KAAK,OAAO,KAAK,KAAK,CAAC,CAAC,SAAS,KAAK,OAAO,KAAK,KAAK,CAAC,CAAC,OAAO,SAAS;GAC9F,OAAO,OAAO,QAAQ,cAAc,OAAO,WAAW,CAAC;GACvD;EACF;EAEA,OAAO,eAAe;CACxB;CAEA,OAAO;AACT;AAEA,SAAgB,YAAY,QAAkD;CAC5E,OAAO;EACL,GAAG;EACH,GAAG,cAAc,MAAM;CACzB;AACF;;;;;;AAOA,IAAa,OAAO,UAAkC;CACpD,OAAO,GAAG,QAAQ,GAAG;AACvB"}
+{"version":3,"file":"themeUtils.js","names":[],"sources":["../../lib/theme/themeUtils.ts"],"sourcesContent":["import { type Tokens } from '@chakra-ui/react/styled-system';\nimport { type TextProps } from '@chakra-ui/react/text';\nimport { isPlainObject } from 'es-toolkit';\n\n// Based on https://github.com/toss/es-toolkit/blob/main/src/object/flattenObject.ts\nexport const flattenTokens = (object: object, prefix: string = ''): Record<string, any> => {\n  const result: Record<string, any> = {};\n  const keys = Object.keys(object);\n\n  for (let i = 0; i < keys.length; i++) {\n    const key = keys[i];\n    const value = (object as any)[key];\n\n    const prefixedKey = prefix ? `${prefix}/${key}` : key;\n\n    if (isPlainObject(value) && Object.keys(value).length > 0 && Object.keys(value)[0] !== 'value') {\n      Object.assign(result, flattenTokens(value, prefixedKey));\n      continue;\n    }\n\n    result[prefixedKey] = value;\n  }\n\n  return result;\n};\n\nexport function withSlashes(object: Record<string, any>): Record<string, any> {\n  return {\n    ...object,\n    ...flattenTokens(object),\n  };\n}\n\n/**\n *\n * @param input Value in pixels\n * @returns Value in rems, typed precisely enough to satisfy props that take a `${number}rem`\n */\nexport const rem = (input: number): `${number}rem` => {\n  return `${input / 16}rem`;\n};\n\n/**\n * The colour tokens under the given prefixes, for props that must take a semantic token.\n *\n * `Tokens` is generated in the consumer's own project by `chakra typegen`, which\n * `scripts/postinstall.cjs` runs and which exits 0 with a warning when it cannot. Where it did not\n * run, `Tokens['colors']` is Chakra's stock union, the `Extract` has nothing to match and collapses\n * to `never` -- which would make every prop using it a type error pointing at the wrong thing. So it\n * falls back to `string`: the narrowing is a guard where the types are real, not a tripwire where\n * they are not.\n */\nexport type BitkitColorToken<Prefix extends string> = [Extract<Tokens['colors'], `${Prefix}/${string}`>] extends [never]\n  ? string\n  : Extract<Tokens['colors'], `${Prefix}/${string}`>;\n\nexport const getTextStyle = (as: TextProps['as']) => {\n  if (['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].includes(as as string)) {\n    return `heading/${as}`;\n  }\n  return undefined;\n};\n"],"mappings":";;AAKA,IAAa,iBAAiB,QAAgB,SAAiB,OAA4B;CACzF,MAAM,SAA8B,CAAC;CACrC,MAAM,OAAO,OAAO,KAAK,MAAM;CAE/B,KAAK,IAAI,IAAI,GAAG,IAAI,KAAK,QAAQ,KAAK;EACpC,MAAM,MAAM,KAAK;EACjB,MAAM,QAAS,OAAe;EAE9B,MAAM,cAAc,SAAS,GAAG,OAAO,GAAG,QAAQ;EAElD,IAAI,cAAc,KAAK,KAAK,OAAO,KAAK,KAAK,CAAC,CAAC,SAAS,KAAK,OAAO,KAAK,KAAK,CAAC,CAAC,OAAO,SAAS;GAC9F,OAAO,OAAO,QAAQ,cAAc,OAAO,WAAW,CAAC;GACvD;EACF;EAEA,OAAO,eAAe;CACxB;CAEA,OAAO;AACT;AAEA,SAAgB,YAAY,QAAkD;CAC5E,OAAO;EACL,GAAG;EACH,GAAG,cAAc,MAAM;CACzB;AACF;;;;;;AAOA,IAAa,OAAO,UAAkC;CACpD,OAAO,GAAG,QAAQ,GAAG;AACvB"}

package/dist/utils/index.d.ts

@@ -1 +1 @@
-export { rem } from '../theme/themeUtils';
+export { type BitkitColorToken, rem } from '../theme/themeUtils';

package/package.json

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