@bitrise/bitkit-v2 0.3.502-beta.3238 → 0.3.502-beta.3242

package/dist/components/BitkitPageHeader/BitkitPageHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"BitkitPageHeader.js","names":[],"sources":["../../../lib/components/BitkitPageHeader/BitkitPageHeader.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { forwardRef, type ReactNode } from 'react';\n\nimport IconMenuHamburger from '../../icons/IconMenuHamburger';\nimport { isEmptyNode } from '../../utilities/isEmptyNode';\nimport useIsTruncated from '../../utilities/useIsTruncated';\nimport BitkitIconButton from '../BitkitIconButton/BitkitIconButton';\nimport BitkitOverflowTooltip from '../BitkitOverflowTooltip/BitkitOverflowTooltip';\n\nexport interface BitkitPageHeaderProps extends Omit<BoxProps, 'title'> {\n  /**\n   * Avatar, app icon or thumbnail rendered before the title. Hidden in the collapsed layout.\n   *\n   * Belongs to the sub-page layouts: the design's main-page header is a title and its subtitle with\n   * no avatar, so pass this alongside a `breadcrumb`.\n   *\n   * Size it to match the design's two sub-page cards, since the node is yours to build: `size=\"40\"`\n   * (8px radius) against a bare title, and `size=\"48\"` (10px radius) once `secondaryText` is\n   * present — the same avatar the `app` and `user` content shapes use.\n   */\n  avatar?: ReactNode;\n  /** Badge rendered next to the title. Hidden in the collapsed layout. */\n  badge?: ReactNode;\n  /**\n   * Breadcrumb trail above the title — pass a `BitkitBreadcrumb`. Its presence is what switches the\n   * header from the design's main-page layout to a sub-page one, so there is no separate page-type\n   * prop: the recipe's own `hasBreadcrumb` variant is derived from it.\n   *\n   * The two layouts carry more than the trail. A main-page header is a title and its subtitle —\n   * top-level pages and product overviews — with no avatar and no `app`/`user` content shape. Those\n   * belong to sub-pages, so pass them together with a trail.\n   */\n  breadcrumb?: ReactNode;\n  /**\n   * Trailing action buttons. Stacked full-width below the title on mobile, primary action on top.\n   *\n   * The collapsed row is built for `size=\"sm\"` buttons and the expanded header for `size=\"md\"`.\n   * Actions arrive as children, so the component cannot set that for you — pass a flat `size=\"sm\"`\n   * whenever `minimal` or `isSticky` is in play.\n   *\n   * Flat, not responsive: Bitkit icons render a different SVG asset per size, so `BitkitButton`\n   * resolves `size` in JS and a `{ base, tablet }` object matches no key, falling through to a 24px\n   * icon in a 32px button. Since the header collapses in CSS from `tablet` up, a `sm` action is a\n   * little small in the expanded mobile layout — but the design draws no mobile frame for the\n   * collapsed variants, so `sm` is the closer of the two.\n   */\n  children?: ReactNode;\n  /**\n   * Where the content block sits when `contentWidth` caps it: `center` over a centred content\n   * column, `start` over one that starts against a sidebar beside the header. Pass the same\n   * alignment as that column, so the title and the content share their left edge at every width.\n   *\n   * No effect with `contentWidth=\"full\"` or without `contentWidth`, where nothing is capped.\n   */\n  contentAlign?: 'center' | 'start';\n  /**\n   * Shape of the title block, mirroring the design's `content` property. `title` is a page title\n   * with an optional subtitle; `app` and `user` are the tighter entity layouts — a larger avatar\n   * centred against a smaller title and 14px secondary text. They differ only in the gap between\n   * the avatar and the text, 16 and 12 respectively.\n   */\n  contentVariant?: 'title' | 'app' | 'user';\n  /**\n   * Lines the header's content up with the page content below it. The root stays full-width, so\n   * the background and the bottom border still run edge to edge — which a wrapper around the whole\n   * header could not do.\n   *\n   * Pass the same value as that column's `max-width`, as rems — `rem()` builds one from a pixel\n   * figure — and the content is capped with it, centred unless `contentAlign` says otherwise. Box-sizing is border-box throughout\n   * Bitkit, so the value includes the header's own inline padding, which this layout puts at 32 on\n   * both sides rather than the default 24 and 32.\n   *\n   * `'full'` is the same layout without the cap, for a content column that runs the full width: the\n   * 32 on both sides, nothing to centre. The default 24 is for a header that runs over a sidebar and\n   * lines up with its items instead.\n   *\n   * Its presence is the toggle: without it the header keeps the default inset.\n   *\n   * The cap applies at every breakpoint, deliberately — a content column's own `max-width` is not\n   * breakpoint-scoped either, so scoping this one would misalign the two wherever the column is\n   * narrow enough to bite on mobile. What does change with the breakpoint is the inline padding,\n   * 16 below `tablet` and 32 above, which is the same pair such a column uses.\n   */\n  contentWidth?: `${number}rem` | 'full';\n  /**\n   * Inline controls between the trail and the actions — a view switcher, filters, a settings menu.\n   * Their presence spreads the row into three groups instead of the usual trail-and-actions pair,\n   * which is the shape the design file calls `PageHeader-WFE`.\n   *\n   * Belongs to the collapsed row, so it is honoured by `variant=\"minimal\"` *and* by `isSticky` —\n   * the two produce the same row — and ignored in the expanded layouts, which the design draws no\n   * controls in.\n   */\n  controls?: ReactNode;\n  /**\n   * Renders the compact single-row layout used while the header is stuck to the top of the viewport.\n   * Appearance only — the consumer owns scroll detection and any portalling, since the sticky offset\n   * and header container are application concerns.\n   *\n   * Ignored below the `tablet` breakpoint, where the header always stays expanded.\n   *\n   * Pair it with `size=\"sm\"` actions — see `children`.\n   */\n  isSticky?: boolean;\n  /**\n   * Opens the page's sidebar on mobile. Its presence switches the header to the design's\n   * `hasSidebar` layout below `tablet`: the title shrinks beside a menu button, and the\n   * `sectionTitle` takes over as the large heading under a rule, with the actions below it. Wire it\n   * to a `BitkitPageSidebar`'s `open` / `onOpenChange`. From `tablet` the button is hidden and the\n   * header is the ordinary one — the sidebar is beside the page there.\n   */\n  onMenuClick?: () => void;\n  /**\n   * Descriptive text below the title. Hidden in the collapsed layout.\n   *\n   * A string, like `title`, so it can be truncated to one line and carried in full by the tooltip\n   * that appears when it does not fit.\n   */\n  secondaryText?: string;\n  /**\n   * Draws the line along the header's bottom edge. Set it to `false` for a header that flows\n   * straight into the page, and the bottom padding goes with the line: the header's background is\n   * the page's, so without the line that padding would only be a margin the page cannot shrink. The\n   * page spaces its content from the header itself.\n   *\n   * The collapsed row keeps its padding, which centres the row rather than spacing the page, and from\n   * `tablet` a header with `isSticky` keeps its line as well, since content scrolls under it. Below\n   * `tablet` `isSticky` is ignored, so there the line goes too.\n   *\n   * Ignored with `tabs`, whose list sits on that edge. That includes `variant=\"minimal\"`, which hides\n   * the tab list from `tablet`: the line stays although no tabs show above it.\n   */\n  showDivider?: boolean;\n  /**\n   * The sidebar section the page is showing, for the `hasSidebar` layout — see `onMenuClick`. It\n   * is the page's visible `h2` on mobile, where the sidebar that would name it is behind the menu\n   * button. Not rendered from `tablet`, and never without `onMenuClick`.\n   */\n  sectionTitle?: string;\n  /**\n   * Tab bar along the bottom edge — pass a `BitkitTabs.List`. Hidden in the collapsed layout.\n   *\n   * The node is rendered inside the header, so tab panels cannot be siblings of the row. To drive\n   * page content from it, put `BitkitTabs.Root` around the header *and* the content, and pass only\n   * the list here — `BitkitTabs.List` reads its Root from context and throws without an ancestor:\n   *\n   * ```tsx\n   * <BitkitTabs.Root defaultValue=\"overview\">\n   *   <BitkitPageHeader tabs={<BitkitTabs.List>…</BitkitTabs.List>} title=\"Build Hub\" />\n   *   <BitkitTabs.ContentGroup>\n   *     <BitkitTabs.Content padding=\"32\" value=\"overview\">…</BitkitTabs.Content>\n   *   </BitkitTabs.ContentGroup>\n   * </BitkitTabs.Root>\n   * ```\n   *\n   * Only the row is hidden when the header collapses — the panels live outside it and keep\n   * rendering, so the page never blanks.\n   */\n  tabs?: ReactNode;\n  /**\n   * The page title, as a string. Everything passed here lands inside the `h1`, so it is the\n   * heading's accessible name and nothing else belongs in it — the avatar, badge and secondary\n   * text each have their own slot. Required: it is what gives the header a page heading at every\n   * breakpoint.\n   *\n   * Truncated to a single line with an ellipsis. When it does not fit, hovering or focusing it\n   * shows the full string in a tooltip — so a long title never grows the header.\n   *\n   * In the collapsed layout (`minimal` or `isSticky`) *with* a `breadcrumb`, the design shows the\n   * title in the trail rather than as a heading, so end the breadcrumb with a\n   * `BitkitBreadcrumb.CurrentItem` carrying it — the title is then rendered as a visually hidden\n   * `h1`, since `Breadcrumb.CurrentLink` is a link and not a heading. Below `tablet` the header\n   * never collapses and the visible heading is used instead (`BitkitBreadcrumb` drops its\n   * `CurrentItem` on mobile).\n   */\n  title: string;\n  /**\n   * `minimal` collapses the header to the single breadcrumb row used by sub-pages that don't repeat\n   * their title as a heading. Like `isSticky`, it only collapses from `tablet` up, and expects\n   * `size=\"sm\"` actions — see `children`.\n   */\n  variant?: 'default' | 'minimal';\n}\n\nconst BitkitPageHeader = forwardRef<HTMLElement, BitkitPageHeaderProps>((props, ref) => {\n  const {\n    avatar,\n    badge,\n    breadcrumb,\n    children,\n    contentAlign,\n    contentVariant,\n    contentWidth,\n    controls,\n    css,\n    isSticky,\n    onMenuClick,\n    secondaryText,\n    sectionTitle,\n    showDivider = true,\n    tabs,\n    title,\n    variant,\n    ...rest\n  } = props;\n\n  // Which slots the collapsed row drops, and whether it collapses at all, is decided entirely by\n  // the recipe's `tablet`-scoped styles. Nothing here branches on the viewport: a breakpoint hook\n  // would render the wrong layout on first paint, since Chakra's `useMediaQuery` returns its\n  // fallback until after mount.\n\n  // A slot's presence is its own toggle, so all of them share one emptiness test rather than plain\n  // truthiness: an array whose entries all render nothing — `items.map()` where every branch is\n  // `null` — is still truthy, and would otherwise render a wrapper that only contributes gap. For\n  // `controls` it would also spread the row into three groups around an empty middle one.\n  const hasAvatar = !isEmptyNode(avatar);\n  const hasBadge = !isEmptyNode(badge);\n  const hasBreadcrumb = !isEmptyNode(breadcrumb);\n  const hasActions = !isEmptyNode(children);\n  const hasSecondaryText = !isEmptyNode(secondaryText);\n  const hasSidebar = onMenuClick !== undefined;\n  const hasSectionTitle = hasSidebar && !isEmptyNode(sectionTitle);\n  const hasTabs = !isEmptyNode(tabs);\n\n  // `BitkitOverflowTooltip` does no measuring of its own — it shows the tooltip unless told not to,\n  // so each truncating text reports whether it is actually clipped and suppresses its own tooltip\n  // when it is not. Keyed on the text so a change re-measures without waiting for a resize.\n  const { isTruncated: isTitleTruncated, ref: titleRef } = useIsTruncated<HTMLHeadingElement>(title);\n  const { isTruncated: isSecondaryTruncated, ref: secondaryRef } = useIsTruncated<HTMLParagraphElement>(secondaryText);\n\n  // The design only draws inline controls in the collapsed row, so they are ignored in the\n  // expanded layouts rather than left to land somewhere undesigned. `minimal` and `isSticky`\n  // produce that row through the same `collapsedSlots`, so both have to honour them — gating on\n  // `minimal` alone left `isSticky` rendering the identical row with the middle group missing.\n  const isCollapsed = variant === 'minimal' || Boolean(isSticky);\n  const showControls = !isEmptyNode(controls) && isCollapsed;\n\n  // The collapsed row with a trail makes the title block `srOnly`, which is a 1px box — so the\n  // measurement reports \"truncated\" for a heading nobody can see. Left alone that puts a tab stop\n  // on an invisible element and opens a tooltip against it. The trail already carries the title as\n  // its current item in exactly that layout, so there is nothing to surface anyway.\n  const canShowTitleTooltip = isTitleTruncated && !(isCollapsed && hasBreadcrumb);\n\n  const recipe = useSlotRecipe({ key: 'pageHeader' });\n  const styles = recipe({\n    contentVariant,\n    hasBreadcrumb,\n    hasControls: showControls,\n    hasDivider: showDivider || hasTabs,\n    hasSidebar,\n    // The cap is a length the consumer chooses, so it cannot be a recipe variant -- the variant\n    // carries the layout switch and the `maxWidth` below carries the value.\n    alignsToContent: Boolean(contentWidth),\n    contentAlign,\n    isSticky,\n    variant,\n  });\n\n  // The controls are the middle of three groups, so they follow whichever element holds the left\n  // slot: the trail when there is one, otherwise the title — which lives inside `contentBlock`, so\n  // they have to go in there with it rather than beside it.\n  const controlsNode = showControls ? <Box css={styles.controls}>{controls}</Box> : null;\n\n  // With a sidebar the menu button shares the title's row, so the block gets a wrapper the content\n  // row treats as the title block. Other headers keep their DOM.\n  const titleBlock = (\n    <Box css={styles.titleBlock}>\n      {hasAvatar && <Box css={styles.avatar}>{avatar}</Box>}\n\n      <Box css={styles.textBlock}>\n        <Box css={styles.titleRow}>\n          {/*\n            `bottom-start` rather than the tooltip's default `right`: these texts are\n            full-width rows, so a right-hand tooltip lands over the actions. Opening below and\n            aligned to the text's start keeps it clear of them and lines it up with the text\n            it repeats.\n          */}\n          <BitkitOverflowTooltip disabled={!canShowTitleTooltip} placement=\"bottom-start\" text={title}>\n            {/*\n              `tabIndex` only while truncated: the tooltip trigger is rendered `asChild`, so an\n              `h1` stays unfocusable and the full title would be mouse-only. Adding the tab\n              stop unconditionally would put one in every header for no benefit.\n            */}\n            <Text as=\"h1\" css={styles.title} ref={titleRef} tabIndex={canShowTitleTooltip ? 0 : undefined}>\n              {title}\n            </Text>\n          </BitkitOverflowTooltip>\n          {hasBadge && <Box css={styles.badge}>{badge}</Box>}\n        </Box>\n\n        {hasSecondaryText && secondaryText !== undefined && (\n          <BitkitOverflowTooltip disabled={!isSecondaryTruncated} placement=\"bottom-start\" text={secondaryText}>\n            <Text css={styles.secondaryText} ref={secondaryRef} tabIndex={isSecondaryTruncated ? 0 : undefined}>\n              {secondaryText}\n            </Text>\n          </BitkitOverflowTooltip>\n        )}\n      </Box>\n    </Box>\n  );\n\n  return (\n    <Box as=\"header\" css={[styles.root, css]} ref={ref} {...rest}>\n      <Box css={styles.headerBlock} maxWidth={contentWidth === 'full' ? undefined : contentWidth}>\n        {hasBreadcrumb && <Box css={styles.breadcrumb}>{breadcrumb}</Box>}\n\n        {hasBreadcrumb && controlsNode}\n\n        <Box css={styles.contentBlock}>\n          {hasSidebar ? (\n            <Box css={styles.titleBar}>\n              {titleBlock}\n              <Box css={styles.menuButton}>\n                <BitkitIconButton\n                  icon={IconMenuHamburger}\n                  label=\"Open navigation\"\n                  onClick={onMenuClick}\n                  size=\"sm\"\n                  variant=\"secondary\"\n                />\n              </Box>\n            </Box>\n          ) : (\n            titleBlock\n          )}\n\n          {hasSectionTitle && (\n            <Box css={styles.sectionBlock}>\n              <Text as=\"h2\" css={styles.sectionTitle}>\n                {sectionTitle}\n              </Text>\n            </Box>\n          )}\n\n          {!hasBreadcrumb && controlsNode}\n\n          {hasActions && <Box css={styles.actionBlock}>{children}</Box>}\n        </Box>\n      </Box>\n\n      {hasTabs && <Box css={styles.tabs}>{tabs}</Box>}\n    </Box>\n  );\n});\n\nBitkitPageHeader.displayName = 'BitkitPageHeader';\n\nexport default BitkitPageHeader;\n"],"mappings":";;;;;;;;;;;AA0LA,IAAM,mBAAmB,YAAgD,OAAO,QAAQ;CACtF,MAAM,EACJ,QACA,OACA,YACA,UACA,cACA,gBACA,cACA,UACA,KACA,UACA,aACA,eACA,cACA,cAAc,MACd,MACA,OACA,SACA,GAAG,SACD;CAWJ,MAAM,YAAY,CAAC,YAAY,MAAM;CACrC,MAAM,WAAW,CAAC,YAAY,KAAK;CACnC,MAAM,gBAAgB,CAAC,YAAY,UAAU;CAC7C,MAAM,aAAa,CAAC,YAAY,QAAQ;CACxC,MAAM,mBAAmB,CAAC,YAAY,aAAa;CACnD,MAAM,aAAa,gBAAgB,KAAA;CACnC,MAAM,kBAAkB,cAAc,CAAC,YAAY,YAAY;CAC/D,MAAM,UAAU,CAAC,YAAY,IAAI;CAKjC,MAAM,EAAE,aAAa,kBAAkB,KAAK,aAAa,eAAmC,KAAK;CACjG,MAAM,EAAE,aAAa,sBAAsB,KAAK,iBAAiB,eAAqC,aAAa;CAMnH,MAAM,cAAc,YAAY,aAAa,QAAQ,QAAQ;CAC7D,MAAM,eAAe,CAAC,YAAY,QAAQ,KAAK;CAM/C,MAAM,sBAAsB,oBAAoB,EAAE,eAAe;CAGjE,MAAM,SADS,cAAc,EAAE,KAAK,aAAa,CAClC,CAAA,CAAO;EACpB;EACA;EACA,aAAa;EACb,YAAY,eAAe;EAC3B;EAGA,iBAAiB,QAAQ,YAAY;EACrC;EACA;EACA;CACF,CAAC;CAKD,MAAM,eAAe,eAAe,oBAAC,KAAD;EAAK,KAAK,OAAO;EAAW,UAAA;CAAc,CAAA,IAAI;CAIlF,MAAM,aACJ,qBAAC,KAAD;EAAK,KAAK,OAAO;EAAjB,UAAA,CACG,aAAa,oBAAC,KAAD;GAAK,KAAK,OAAO;GAAS,UAAA;EAAY,CAAA,GAEpD,qBAAC,KAAD;GAAK,KAAK,OAAO;GAAjB,UAAA,CACE,qBAAC,KAAD;IAAK,KAAK,OAAO;IAAjB,UAAA,CAOE,oBAAC,uBAAD;KAAuB,UAAU,CAAC;KAAqB,WAAU;KAAe,MAAM;KAMpF,UAAA,oBAAC,MAAD;MAAM,IAAG;MAAK,KAAK,OAAO;MAAO,KAAK;MAAU,UAAU,sBAAsB,IAAI,KAAA;MACjF,UAAA;KACG,CAAA;IACe,CAAA,GACtB,YAAY,oBAAC,KAAD;KAAK,KAAK,OAAO;KAAQ,UAAA;IAAW,CAAA,CAC9C;GAEJ,CAAA,GAAA,oBAAoB,kBAAkB,KAAA,KACrC,oBAAC,uBAAD;IAAuB,UAAU,CAAC;IAAsB,WAAU;IAAe,MAAM;IACrF,UAAA,oBAAC,MAAD;KAAM,KAAK,OAAO;KAAe,KAAK;KAAc,UAAU,uBAAuB,IAAI,KAAA;KACtF,UAAA;IACG,CAAA;GACe,CAAA,CAEtB;EACF,CAAA,CAAA;;CAGP,OACE,qBAAC,KAAD;EAAK,IAAG;EAAS,KAAK,CAAC,OAAO,MAAM,GAAG;EAAQ;EAAK,GAAI;EAAxD,UAAA,CACE,qBAAC,KAAD;GAAK,KAAK,OAAO;GAAa,UAAU,iBAAiB,SAAS,KAAA,IAAY;GAA9E,UAAA;IACG,iBAAiB,oBAAC,KAAD;KAAK,KAAK,OAAO;KAAa,UAAA;IAAgB,CAAA;IAE/D,iBAAiB;IAElB,qBAAC,KAAD;KAAK,KAAK,OAAO;KAAjB,UAAA;MACG,aACC,qBAAC,KAAD;OAAK,KAAK,OAAO;OAAjB,UAAA,CACG,YACD,oBAAC,KAAD;QAAK,KAAK,OAAO;QACf,UAAA,oBAAC,kBAAD;SACE,MAAM;SACN,OAAM;SACN,SAAS;SACT,MAAK;SACL,SAAQ;QACT,CAAA;OACE,CAAA,CACF;MAEL,CAAA,IAAA;MAGD,mBACC,oBAAC,KAAD;OAAK,KAAK,OAAO;OACf,UAAA,oBAAC,MAAD;QAAM,IAAG;QAAK,KAAK,OAAO;QACvB,UAAA;OACG,CAAA;MACH,CAAA;MAGN,CAAC,iBAAiB;MAElB,cAAc,oBAAC,KAAD;OAAK,KAAK,OAAO;OAAc;MAAc,CAAA;KACzD;;GACF;EAEJ,CAAA,GAAA,WAAW,oBAAC,KAAD;GAAK,KAAK,OAAO;GAAO,UAAA;EAAU,CAAA,CAC3C;;AAET,CAAC;AAED,iBAAiB,cAAc"}
+{"version":3,"file":"BitkitPageHeader.js","names":[],"sources":["../../../lib/components/BitkitPageHeader/BitkitPageHeader.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { forwardRef, type ReactNode } from 'react';\n\nimport IconMenuHamburger from '../../icons/IconMenuHamburger';\nimport { contentMaxWidth } from '../../theme/common/ContentWidth.common';\nimport { isEmptyNode } from '../../utilities/isEmptyNode';\nimport useIsTruncated from '../../utilities/useIsTruncated';\nimport { type BitkitContentWidth } from '../BitkitContentWrapper/BitkitContentWrapper';\nimport BitkitIconButton from '../BitkitIconButton/BitkitIconButton';\nimport BitkitOverflowTooltip from '../BitkitOverflowTooltip/BitkitOverflowTooltip';\n\nexport interface BitkitPageHeaderProps extends Omit<BoxProps, 'title'> {\n  /**\n   * Avatar, app icon or thumbnail rendered before the title. Hidden in the collapsed layout.\n   *\n   * Belongs to the sub-page layouts: the design's main-page header is a title and its subtitle with\n   * no avatar, so pass this alongside a `breadcrumb`.\n   *\n   * Size it to match the design's two sub-page cards, since the node is yours to build: `size=\"40\"`\n   * (8px radius) against a bare title, and `size=\"48\"` (10px radius) once `secondaryText` is\n   * present — the same avatar the `app` and `user` content shapes use.\n   */\n  avatar?: ReactNode;\n  /** Badge rendered next to the title. Hidden in the collapsed layout. */\n  badge?: ReactNode;\n  /**\n   * Breadcrumb trail above the title — pass a `BitkitBreadcrumb`. Its presence is what switches the\n   * header from the design's main-page layout to a sub-page one, so there is no separate page-type\n   * prop: the recipe's own `hasBreadcrumb` variant is derived from it.\n   *\n   * The two layouts carry more than the trail. A main-page header is a title and its subtitle —\n   * top-level pages and product overviews — with no avatar and no `app`/`user` content shape. Those\n   * belong to sub-pages, so pass them together with a trail.\n   */\n  breadcrumb?: ReactNode;\n  /**\n   * Trailing action buttons. Stacked full-width below the title on mobile, primary action on top.\n   *\n   * The collapsed row is built for `size=\"sm\"` buttons and the expanded header for `size=\"md\"`.\n   * Actions arrive as children, so the component cannot set that for you — pass a flat `size=\"sm\"`\n   * whenever `minimal` or `isSticky` is in play.\n   *\n   * Flat, not responsive: Bitkit icons render a different SVG asset per size, so `BitkitButton`\n   * resolves `size` in JS and a `{ base, tablet }` object matches no key, falling through to a 24px\n   * icon in a 32px button. Since the header collapses in CSS from `tablet` up, a `sm` action is a\n   * little small in the expanded mobile layout — but the design draws no mobile frame for the\n   * collapsed variants, so `sm` is the closer of the two.\n   */\n  children?: ReactNode;\n  /**\n   * Shape of the title block, mirroring the design's `content` property. `title` is a page title\n   * with an optional subtitle; `app` and `user` are the tighter entity layouts — a larger avatar\n   * centred against a smaller title and 14px secondary text. They differ only in the gap between\n   * the avatar and the text, 16 and 12 respectively.\n   */\n  contentVariant?: 'title' | 'app' | 'user';\n  /**\n   * Lines the header's content up with the page content below it: pass the `BitkitContentWrapper`'s value. The title,\n   * the actions and the tabs are capped at that width and centred, while the background and the bottom border still run\n   * edge to edge. `'full'` keeps the same 32px inset without a cap. Without it the header keeps the default inset, which\n   * lines up with a sidebar below it.\n   */\n  contentWidth?: BitkitContentWidth;\n  /**\n   * Inline controls between the trail and the actions — a view switcher, filters, a settings menu.\n   * Their presence spreads the row into three groups instead of the usual trail-and-actions pair,\n   * which is the shape the design file calls `PageHeader-WFE`.\n   *\n   * Belongs to the collapsed row, so it is honoured by `variant=\"minimal\"` *and* by `isSticky` —\n   * the two produce the same row — and ignored in the expanded layouts, which the design draws no\n   * controls in.\n   */\n  controls?: ReactNode;\n  /**\n   * Renders the compact single-row layout used while the header is stuck to the top of the viewport.\n   * Appearance only — the consumer owns scroll detection and any portalling, since the sticky offset\n   * and header container are application concerns.\n   *\n   * Ignored below the `tablet` breakpoint, where the header always stays expanded.\n   *\n   * Pair it with `size=\"sm\"` actions — see `children`.\n   */\n  isSticky?: boolean;\n  /**\n   * Opens the page's sidebar on mobile. Its presence switches the header to the design's\n   * `hasSidebar` layout below `tablet`: the title shrinks beside a menu button, and the\n   * `sectionTitle` takes over as the large heading under a rule, with the actions below it. Wire it\n   * to a `BitkitPageSidebar`'s `open` / `onOpenChange`. From `tablet` the button is hidden and the\n   * header is the ordinary one — the sidebar is beside the page there.\n   */\n  onMenuClick?: () => void;\n  /**\n   * Descriptive text below the title. Hidden in the collapsed layout.\n   *\n   * A string, like `title`, so it can be truncated to one line and carried in full by the tooltip\n   * that appears when it does not fit.\n   */\n  secondaryText?: string;\n  /**\n   * Draws the line along the header's bottom edge. Set it to `false` for a header that flows\n   * straight into the page, and the bottom padding goes with the line: the header's background is\n   * the page's, so without the line that padding would only be a margin the page cannot shrink. The\n   * page spaces its content from the header itself.\n   *\n   * The collapsed row keeps its padding, which centres the row rather than spacing the page, and from\n   * `tablet` a header with `isSticky` keeps its line as well, since content scrolls under it. Below\n   * `tablet` `isSticky` is ignored, so there the line goes too.\n   *\n   * Ignored with `tabs`, whose list sits on that edge. That includes `variant=\"minimal\"`, which hides\n   * the tab list from `tablet`: the line stays although no tabs show above it.\n   */\n  showDivider?: boolean;\n  /**\n   * The sidebar section the page is showing, for the `hasSidebar` layout — see `onMenuClick`. It\n   * is the page's visible `h2` on mobile, where the sidebar that would name it is behind the menu\n   * button. Not rendered from `tablet`, and never without `onMenuClick`.\n   */\n  sectionTitle?: string;\n  /**\n   * Tab bar along the bottom edge — pass a `BitkitTabs.List`. Hidden in the collapsed layout.\n   *\n   * The node is rendered inside the header, so tab panels cannot be siblings of the row. To drive\n   * page content from it, put `BitkitTabs.Root` around the header *and* the content, and pass only\n   * the list here — `BitkitTabs.List` reads its Root from context and throws without an ancestor:\n   *\n   * ```tsx\n   * <BitkitTabs.Root defaultValue=\"overview\">\n   *   <BitkitPageHeader tabs={<BitkitTabs.List>…</BitkitTabs.List>} title=\"Build Hub\" />\n   *   <BitkitTabs.ContentGroup>\n   *     <BitkitTabs.Content padding=\"32\" value=\"overview\">…</BitkitTabs.Content>\n   *   </BitkitTabs.ContentGroup>\n   * </BitkitTabs.Root>\n   * ```\n   *\n   * Only the row is hidden when the header collapses — the panels live outside it and keep\n   * rendering, so the page never blanks.\n   */\n  tabs?: ReactNode;\n  /**\n   * The page title, as a string. Everything passed here lands inside the `h1`, so it is the\n   * heading's accessible name and nothing else belongs in it — the avatar, badge and secondary\n   * text each have their own slot. Required: it is what gives the header a page heading at every\n   * breakpoint.\n   *\n   * Truncated to a single line with an ellipsis. When it does not fit, hovering or focusing it\n   * shows the full string in a tooltip — so a long title never grows the header.\n   *\n   * In the collapsed layout (`minimal` or `isSticky`) *with* a `breadcrumb`, the design shows the\n   * title in the trail rather than as a heading, so end the breadcrumb with a\n   * `BitkitBreadcrumb.CurrentItem` carrying it — the title is then rendered as a visually hidden\n   * `h1`, since `Breadcrumb.CurrentLink` is a link and not a heading. Below `tablet` the header\n   * never collapses and the visible heading is used instead (`BitkitBreadcrumb` drops its\n   * `CurrentItem` on mobile).\n   */\n  title: string;\n  /**\n   * `minimal` collapses the header to the single breadcrumb row used by sub-pages that don't repeat\n   * their title as a heading. Like `isSticky`, it only collapses from `tablet` up, and expects\n   * `size=\"sm\"` actions — see `children`.\n   */\n  variant?: 'default' | 'minimal';\n}\n\nconst BitkitPageHeader = forwardRef<HTMLElement, BitkitPageHeaderProps>((props, ref) => {\n  const {\n    avatar,\n    badge,\n    breadcrumb,\n    children,\n    contentVariant,\n    contentWidth,\n    controls,\n    css,\n    isSticky,\n    onMenuClick,\n    secondaryText,\n    sectionTitle,\n    showDivider = true,\n    tabs,\n    title,\n    variant,\n    ...rest\n  } = props;\n\n  // Which slots the collapsed row drops, and whether it collapses at all, is decided entirely by\n  // the recipe's `tablet`-scoped styles. Nothing here branches on the viewport: a breakpoint hook\n  // would render the wrong layout on first paint, since Chakra's `useMediaQuery` returns its\n  // fallback until after mount.\n\n  // A slot's presence is its own toggle, so all of them share one emptiness test rather than plain\n  // truthiness: an array whose entries all render nothing — `items.map()` where every branch is\n  // `null` — is still truthy, and would otherwise render a wrapper that only contributes gap. For\n  // `controls` it would also spread the row into three groups around an empty middle one.\n  const hasAvatar = !isEmptyNode(avatar);\n  const hasBadge = !isEmptyNode(badge);\n  const hasBreadcrumb = !isEmptyNode(breadcrumb);\n  const hasActions = !isEmptyNode(children);\n  const hasSecondaryText = !isEmptyNode(secondaryText);\n  const hasSidebar = onMenuClick !== undefined;\n  const hasSectionTitle = hasSidebar && !isEmptyNode(sectionTitle);\n  const hasTabs = !isEmptyNode(tabs);\n\n  // `BitkitOverflowTooltip` does no measuring of its own — it shows the tooltip unless told not to,\n  // so each truncating text reports whether it is actually clipped and suppresses its own tooltip\n  // when it is not. Keyed on the text so a change re-measures without waiting for a resize.\n  const { isTruncated: isTitleTruncated, ref: titleRef } = useIsTruncated<HTMLHeadingElement>(title);\n  const { isTruncated: isSecondaryTruncated, ref: secondaryRef } = useIsTruncated<HTMLParagraphElement>(secondaryText);\n\n  // The design only draws inline controls in the collapsed row, so they are ignored in the\n  // expanded layouts rather than left to land somewhere undesigned. `minimal` and `isSticky`\n  // produce that row through the same `collapsedSlots`, so both have to honour them — gating on\n  // `minimal` alone left `isSticky` rendering the identical row with the middle group missing.\n  const isCollapsed = variant === 'minimal' || Boolean(isSticky);\n  const showControls = !isEmptyNode(controls) && isCollapsed;\n\n  // The collapsed row with a trail makes the title block `srOnly`, which is a 1px box — so the\n  // measurement reports \"truncated\" for a heading nobody can see. Left alone that puts a tab stop\n  // on an invisible element and opens a tooltip against it. The trail already carries the title as\n  // its current item in exactly that layout, so there is nothing to surface anyway.\n  const canShowTitleTooltip = isTitleTruncated && !(isCollapsed && hasBreadcrumb);\n\n  const capWidth = contentMaxWidth(contentWidth);\n\n  const recipe = useSlotRecipe({ key: 'pageHeader' });\n  const styles = recipe({\n    contentVariant,\n    hasBreadcrumb,\n    hasControls: showControls,\n    hasDivider: showDivider || hasTabs,\n    hasSidebar,\n    alignsToContent: Boolean(contentWidth),\n    isSticky,\n    variant,\n  });\n\n  // The controls are the middle of three groups, so they follow whichever element holds the left\n  // slot: the trail when there is one, otherwise the title — which lives inside `contentBlock`, so\n  // they have to go in there with it rather than beside it.\n  const controlsNode = showControls ? <Box css={styles.controls}>{controls}</Box> : null;\n\n  // With a sidebar the menu button shares the title's row, so the block gets a wrapper the content\n  // row treats as the title block. Other headers keep their DOM.\n  const titleBlock = (\n    <Box css={styles.titleBlock}>\n      {hasAvatar && <Box css={styles.avatar}>{avatar}</Box>}\n\n      <Box css={styles.textBlock}>\n        <Box css={styles.titleRow}>\n          {/*\n            `bottom-start` rather than the tooltip's default `right`: these texts are\n            full-width rows, so a right-hand tooltip lands over the actions. Opening below and\n            aligned to the text's start keeps it clear of them and lines it up with the text\n            it repeats.\n          */}\n          <BitkitOverflowTooltip disabled={!canShowTitleTooltip} placement=\"bottom-start\" text={title}>\n            {/*\n              `tabIndex` only while truncated: the tooltip trigger is rendered `asChild`, so an\n              `h1` stays unfocusable and the full title would be mouse-only. Adding the tab\n              stop unconditionally would put one in every header for no benefit.\n            */}\n            <Text as=\"h1\" css={styles.title} ref={titleRef} tabIndex={canShowTitleTooltip ? 0 : undefined}>\n              {title}\n            </Text>\n          </BitkitOverflowTooltip>\n          {hasBadge && <Box css={styles.badge}>{badge}</Box>}\n        </Box>\n\n        {hasSecondaryText && secondaryText !== undefined && (\n          <BitkitOverflowTooltip disabled={!isSecondaryTruncated} placement=\"bottom-start\" text={secondaryText}>\n            <Text css={styles.secondaryText} ref={secondaryRef} tabIndex={isSecondaryTruncated ? 0 : undefined}>\n              {secondaryText}\n            </Text>\n          </BitkitOverflowTooltip>\n        )}\n      </Box>\n    </Box>\n  );\n\n  return (\n    <Box as=\"header\" css={[styles.root, css]} ref={ref} {...rest}>\n      <Box css={styles.headerBlock} maxWidth={capWidth}>\n        {hasBreadcrumb && <Box css={styles.breadcrumb}>{breadcrumb}</Box>}\n\n        {hasBreadcrumb && controlsNode}\n\n        <Box css={styles.contentBlock}>\n          {hasSidebar ? (\n            <Box css={styles.titleBar}>\n              {titleBlock}\n              <Box css={styles.menuButton}>\n                <BitkitIconButton\n                  icon={IconMenuHamburger}\n                  label=\"Open navigation\"\n                  onClick={onMenuClick}\n                  size=\"sm\"\n                  variant=\"secondary\"\n                />\n              </Box>\n            </Box>\n          ) : (\n            titleBlock\n          )}\n\n          {hasSectionTitle && (\n            <Box css={styles.sectionBlock}>\n              <Text as=\"h2\" css={styles.sectionTitle}>\n                {sectionTitle}\n              </Text>\n            </Box>\n          )}\n\n          {!hasBreadcrumb && controlsNode}\n\n          {hasActions && <Box css={styles.actionBlock}>{children}</Box>}\n        </Box>\n      </Box>\n\n      {hasTabs && (\n        <Box css={styles.tabs} maxWidth={capWidth}>\n          {tabs}\n        </Box>\n      )}\n    </Box>\n  );\n});\n\nBitkitPageHeader.displayName = 'BitkitPageHeader';\n\nexport default BitkitPageHeader;\n"],"mappings":";;;;;;;;;;;;AAqKA,IAAM,mBAAmB,YAAgD,OAAO,QAAQ;CACtF,MAAM,EACJ,QACA,OACA,YACA,UACA,gBACA,cACA,UACA,KACA,UACA,aACA,eACA,cACA,cAAc,MACd,MACA,OACA,SACA,GAAG,SACD;CAWJ,MAAM,YAAY,CAAC,YAAY,MAAM;CACrC,MAAM,WAAW,CAAC,YAAY,KAAK;CACnC,MAAM,gBAAgB,CAAC,YAAY,UAAU;CAC7C,MAAM,aAAa,CAAC,YAAY,QAAQ;CACxC,MAAM,mBAAmB,CAAC,YAAY,aAAa;CACnD,MAAM,aAAa,gBAAgB,KAAA;CACnC,MAAM,kBAAkB,cAAc,CAAC,YAAY,YAAY;CAC/D,MAAM,UAAU,CAAC,YAAY,IAAI;CAKjC,MAAM,EAAE,aAAa,kBAAkB,KAAK,aAAa,eAAmC,KAAK;CACjG,MAAM,EAAE,aAAa,sBAAsB,KAAK,iBAAiB,eAAqC,aAAa;CAMnH,MAAM,cAAc,YAAY,aAAa,QAAQ,QAAQ;CAC7D,MAAM,eAAe,CAAC,YAAY,QAAQ,KAAK;CAM/C,MAAM,sBAAsB,oBAAoB,EAAE,eAAe;CAEjE,MAAM,WAAW,gBAAgB,YAAY;CAG7C,MAAM,SADS,cAAc,EAAE,KAAK,aAAa,CAClC,CAAA,CAAO;EACpB;EACA;EACA,aAAa;EACb,YAAY,eAAe;EAC3B;EACA,iBAAiB,QAAQ,YAAY;EACrC;EACA;CACF,CAAC;CAKD,MAAM,eAAe,eAAe,oBAAC,KAAD;EAAK,KAAK,OAAO;EAAW,UAAA;CAAc,CAAA,IAAI;CAIlF,MAAM,aACJ,qBAAC,KAAD;EAAK,KAAK,OAAO;EAAjB,UAAA,CACG,aAAa,oBAAC,KAAD;GAAK,KAAK,OAAO;GAAS,UAAA;EAAY,CAAA,GAEpD,qBAAC,KAAD;GAAK,KAAK,OAAO;GAAjB,UAAA,CACE,qBAAC,KAAD;IAAK,KAAK,OAAO;IAAjB,UAAA,CAOE,oBAAC,uBAAD;KAAuB,UAAU,CAAC;KAAqB,WAAU;KAAe,MAAM;KAMpF,UAAA,oBAAC,MAAD;MAAM,IAAG;MAAK,KAAK,OAAO;MAAO,KAAK;MAAU,UAAU,sBAAsB,IAAI,KAAA;MACjF,UAAA;KACG,CAAA;IACe,CAAA,GACtB,YAAY,oBAAC,KAAD;KAAK,KAAK,OAAO;KAAQ,UAAA;IAAW,CAAA,CAC9C;GAEJ,CAAA,GAAA,oBAAoB,kBAAkB,KAAA,KACrC,oBAAC,uBAAD;IAAuB,UAAU,CAAC;IAAsB,WAAU;IAAe,MAAM;IACrF,UAAA,oBAAC,MAAD;KAAM,KAAK,OAAO;KAAe,KAAK;KAAc,UAAU,uBAAuB,IAAI,KAAA;KACtF,UAAA;IACG,CAAA;GACe,CAAA,CAEtB;EACF,CAAA,CAAA;;CAGP,OACE,qBAAC,KAAD;EAAK,IAAG;EAAS,KAAK,CAAC,OAAO,MAAM,GAAG;EAAQ;EAAK,GAAI;EAAxD,UAAA,CACE,qBAAC,KAAD;GAAK,KAAK,OAAO;GAAa,UAAU;GAAxC,UAAA;IACG,iBAAiB,oBAAC,KAAD;KAAK,KAAK,OAAO;KAAa,UAAA;IAAgB,CAAA;IAE/D,iBAAiB;IAElB,qBAAC,KAAD;KAAK,KAAK,OAAO;KAAjB,UAAA;MACG,aACC,qBAAC,KAAD;OAAK,KAAK,OAAO;OAAjB,UAAA,CACG,YACD,oBAAC,KAAD;QAAK,KAAK,OAAO;QACf,UAAA,oBAAC,kBAAD;SACE,MAAM;SACN,OAAM;SACN,SAAS;SACT,MAAK;SACL,SAAQ;QACT,CAAA;OACE,CAAA,CACF;MAEL,CAAA,IAAA;MAGD,mBACC,oBAAC,KAAD;OAAK,KAAK,OAAO;OACf,UAAA,oBAAC,MAAD;QAAM,IAAG;QAAK,KAAK,OAAO;QACvB,UAAA;OACG,CAAA;MACH,CAAA;MAGN,CAAC,iBAAiB;MAElB,cAAc,oBAAC,KAAD;OAAK,KAAK,OAAO;OAAc;MAAc,CAAA;KACzD;;GACF;EAEJ,CAAA,GAAA,WACC,oBAAC,KAAD;GAAK,KAAK,OAAO;GAAM,UAAU;GAC9B,UAAA;EACE,CAAA,CAEJ;;AAET,CAAC;AAED,iBAAiB,cAAc"}

package/dist/components/BitkitPageSubheader/BitkitPageSubheader.d.ts

@@ -0,0 +1,18 @@
+import { BoxProps } from '@chakra-ui/react/box';
+import { ReactNode } from 'react';
+import { BitkitContentWidth } from '../BitkitContentWrapper/BitkitContentWrapper';
+export interface BitkitPageSubheaderProps extends Omit<BoxProps, 'title'> {
+    /** The actions, secondary first and primary last — mobile shows them the other way round. */
+    children?: ReactNode;
+    /** Caps the content at the page content column's width, so the title lines up with it. Use the `BitkitContentWrapper`'s value. */
+    contentWidth?: BitkitContentWidth;
+    /** One line under the title, inline content such as a "Learn more" link included. */
+    secondaryText?: ReactNode;
+    /** A `BitkitTabs.List`, rendered under the title; wrap the page in `BitkitTabs.Root` so the panels can live outside. */
+    tabs?: ReactNode;
+    /** The sub-page title, rendered as an `h2` under the page header's `h1`. */
+    title: string;
+}
+/** The title bar of a sub-page, under a page header whose sidebar sits beside the content. */
+declare const BitkitPageSubheader: import('react').ForwardRefExoticComponent<BitkitPageSubheaderProps & import('react').RefAttributes<HTMLDivElement>>;
+export default BitkitPageSubheader;

package/dist/components/BitkitPageSubheader/BitkitPageSubheader.js

@@ -0,0 +1,61 @@
+import { isEmptyNode } from "../../utilities/isEmptyNode.js";
+import BitkitOverflowTooltip from "../BitkitOverflowTooltip/BitkitOverflowTooltip.js";
+import useIsTruncated from "../../utilities/useIsTruncated.js";
+import { useSlotRecipe } from "@chakra-ui/react/styled-system";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Box } from "@chakra-ui/react/box";
+import { Text } from "@chakra-ui/react/text";
+//#region lib/components/BitkitPageSubheader/BitkitPageSubheader.tsx
+/** The title bar of a sub-page, under a page header whose sidebar sits beside the content. */
+var BitkitPageSubheader = forwardRef((props, ref) => {
+	const { children, contentWidth, css, secondaryText, tabs, title, ...rest } = props;
+	const hasActions = !isEmptyNode(children);
+	const hasSecondaryText = !isEmptyNode(secondaryText);
+	const hasTabs = !isEmptyNode(tabs);
+	const { isTruncated: isTitleTruncated, ref: titleRef } = useIsTruncated(title);
+	const styles = useSlotRecipe({ key: "pageSubheader" })({
+		contentWidth,
+		hasTabs
+	});
+	return /* @__PURE__ */ jsx(Box, {
+		css: [styles.root, css],
+		ref,
+		...rest,
+		children: /* @__PURE__ */ jsxs(Box, {
+			css: styles.contentBlock,
+			children: [/* @__PURE__ */ jsxs(Box, {
+				css: styles.headerBlock,
+				children: [/* @__PURE__ */ jsxs(Box, {
+					css: styles.textBlock,
+					children: [/* @__PURE__ */ jsx(BitkitOverflowTooltip, {
+						disabled: !isTitleTruncated,
+						placement: "bottom-start",
+						text: title,
+						children: /* @__PURE__ */ jsx(Text, {
+							as: "h2",
+							css: styles.title,
+							ref: titleRef,
+							tabIndex: isTitleTruncated ? 0 : void 0,
+							children: title
+						})
+					}), hasSecondaryText && /* @__PURE__ */ jsx(Text, {
+						css: styles.secondaryText,
+						children: secondaryText
+					})]
+				}), hasActions && /* @__PURE__ */ jsx(Box, {
+					css: styles.actionBlock,
+					children
+				})]
+			}), hasTabs && /* @__PURE__ */ jsx(Box, {
+				css: styles.tabs,
+				children: tabs
+			})]
+		})
+	});
+});
+BitkitPageSubheader.displayName = "BitkitPageSubheader";
+//#endregion
+export { BitkitPageSubheader as default };
+
+//# sourceMappingURL=BitkitPageSubheader.js.map

package/dist/components/BitkitPageSubheader/BitkitPageSubheader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BitkitPageSubheader.js","names":[],"sources":["../../../lib/components/BitkitPageSubheader/BitkitPageSubheader.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { forwardRef, type ReactNode } from 'react';\n\nimport { isEmptyNode } from '../../utilities/isEmptyNode';\nimport useIsTruncated from '../../utilities/useIsTruncated';\nimport { type BitkitContentWidth } from '../BitkitContentWrapper/BitkitContentWrapper';\nimport BitkitOverflowTooltip from '../BitkitOverflowTooltip/BitkitOverflowTooltip';\n\nexport interface BitkitPageSubheaderProps extends Omit<BoxProps, 'title'> {\n  /** The actions, secondary first and primary last — mobile shows them the other way round. */\n  children?: ReactNode;\n  /** Caps the content at the page content column's width, so the title lines up with it. Use the `BitkitContentWrapper`'s value. */\n  contentWidth?: BitkitContentWidth;\n  /** One line under the title, inline content such as a \"Learn more\" link included. */\n  secondaryText?: ReactNode;\n  /** A `BitkitTabs.List`, rendered under the title; wrap the page in `BitkitTabs.Root` so the panels can live outside. */\n  tabs?: ReactNode;\n  /** The sub-page title, rendered as an `h2` under the page header's `h1`. */\n  title: string;\n}\n\n/** The title bar of a sub-page, under a page header whose sidebar sits beside the content. */\nconst BitkitPageSubheader = forwardRef<HTMLDivElement, BitkitPageSubheaderProps>((props, ref) => {\n  const { children, contentWidth, css, secondaryText, tabs, title, ...rest } = props;\n\n  const hasActions = !isEmptyNode(children);\n  const hasSecondaryText = !isEmptyNode(secondaryText);\n  const hasTabs = !isEmptyNode(tabs);\n\n  const { isTruncated: isTitleTruncated, ref: titleRef } = useIsTruncated<HTMLHeadingElement>(title);\n\n  const recipe = useSlotRecipe({ key: 'pageSubheader' });\n  const styles = recipe({ contentWidth, hasTabs });\n\n  return (\n    <Box css={[styles.root, css]} ref={ref} {...rest}>\n      <Box css={styles.contentBlock}>\n        <Box css={styles.headerBlock}>\n          <Box css={styles.textBlock}>\n            <BitkitOverflowTooltip disabled={!isTitleTruncated} placement=\"bottom-start\" text={title}>\n              <Text as=\"h2\" css={styles.title} ref={titleRef} tabIndex={isTitleTruncated ? 0 : undefined}>\n                {title}\n              </Text>\n            </BitkitOverflowTooltip>\n\n            {hasSecondaryText && <Text css={styles.secondaryText}>{secondaryText}</Text>}\n          </Box>\n\n          {hasActions && <Box css={styles.actionBlock}>{children}</Box>}\n        </Box>\n\n        {hasTabs && <Box css={styles.tabs}>{tabs}</Box>}\n      </Box>\n    </Box>\n  );\n});\n\nBitkitPageSubheader.displayName = 'BitkitPageSubheader';\n\nexport default BitkitPageSubheader;\n"],"mappings":";;;;;;;;;;AAwBA,IAAM,sBAAsB,YAAsD,OAAO,QAAQ;CAC/F,MAAM,EAAE,UAAU,cAAc,KAAK,eAAe,MAAM,OAAO,GAAG,SAAS;CAE7E,MAAM,aAAa,CAAC,YAAY,QAAQ;CACxC,MAAM,mBAAmB,CAAC,YAAY,aAAa;CACnD,MAAM,UAAU,CAAC,YAAY,IAAI;CAEjC,MAAM,EAAE,aAAa,kBAAkB,KAAK,aAAa,eAAmC,KAAK;CAGjG,MAAM,SADS,cAAc,EAAE,KAAK,gBAAgB,CACrC,CAAA,CAAO;EAAE;EAAc;CAAQ,CAAC;CAE/C,OACE,oBAAC,KAAD;EAAK,KAAK,CAAC,OAAO,MAAM,GAAG;EAAQ;EAAK,GAAI;EAC1C,UAAA,qBAAC,KAAD;GAAK,KAAK,OAAO;GAAjB,UAAA,CACE,qBAAC,KAAD;IAAK,KAAK,OAAO;IAAjB,UAAA,CACE,qBAAC,KAAD;KAAK,KAAK,OAAO;KAAjB,UAAA,CACE,oBAAC,uBAAD;MAAuB,UAAU,CAAC;MAAkB,WAAU;MAAe,MAAM;MACjF,UAAA,oBAAC,MAAD;OAAM,IAAG;OAAK,KAAK,OAAO;OAAO,KAAK;OAAU,UAAU,mBAAmB,IAAI,KAAA;OAC9E,UAAA;MACG,CAAA;KACe,CAAA,GAEtB,oBAAoB,oBAAC,MAAD;MAAM,KAAK,OAAO;MAAgB,UAAA;KAAoB,CAAA,CACxE;IAEJ,CAAA,GAAA,cAAc,oBAAC,KAAD;KAAK,KAAK,OAAO;KAAc;IAAc,CAAA,CACzD;GAEJ,CAAA,GAAA,WAAW,oBAAC,KAAD;IAAK,KAAK,OAAO;IAAO,UAAA;GAAU,CAAA,CAC3C;;CACF,CAAA;AAET,CAAC;AAED,oBAAoB,cAAc"}

package/dist/components/BitkitSectionHeading/BitkitSectionHeading.d.ts

@@ -3,6 +3,8 @@ import { ReactNode } from 'react';
 import { BitkitIconComponent } from '../../icons';
 export interface BitkitSectionHeadingProps extends Omit<BoxProps, 'icon'> {
     children?: ReactNode;
+    /** `id` of the heading element itself, for a `<section aria-labelledby>` to take its name from the label alone. */
+    headingId?: string;
     /**
      * The heading tag the label renders as, so the section fits the page's outline. Only the tag
      * changes: the label keeps the `heading/h3` look at every level.

package/dist/components/BitkitSectionHeading/BitkitSectionHeading.js

@@ -8,7 +8,7 @@ import { Text } from "@chakra-ui/react/text";
 //#region lib/components/BitkitSectionHeading/BitkitSectionHeading.tsx
 var HELPER_DOT = "•";
 var BitkitSectionHeading = forwardRef((props, ref) => {
-	const { children, css, headingLevel = "h3", helperText, helperTooltip, icon: Icon, label, ...rest } = props;
+	const { children, css, headingId, headingLevel = "h3", helperText, helperTooltip, icon: Icon, label, ...rest } = props;
 	const styles = useSlotRecipe({ key: "sectionHeading" })();
 	const helperItems = Array.isArray(helperText) ? helperText : helperText ? [helperText] : [];
 	const hasHelper = helperItems.length > 0 || Boolean(helperTooltip);
@@ -26,6 +26,7 @@ var BitkitSectionHeading = forwardRef((props, ref) => {
 				}), /* @__PURE__ */ jsx(Text, {
 					as: headingLevel,
 					css: styles.label,
+					id: headingId,
 					children: label
 				})]
 			}), hasHelper && /* @__PURE__ */ jsxs(chakra.div, {

package/dist/components/BitkitSectionHeading/BitkitSectionHeading.js.map

@@ -1 +1 @@
-{"version":3,"file":"BitkitSectionHeading.js","names":[],"sources":["../../../lib/components/BitkitSectionHeading/BitkitSectionHeading.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { chakra, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { forwardRef, Fragment, type ReactNode } from 'react';\n\nimport { type BitkitIconComponent } from '../../icons';\nimport IconInfoCircle from '../../icons/IconInfoCircle';\nimport BitkitTooltip from '../BitkitTooltip/BitkitTooltip';\n\nexport interface BitkitSectionHeadingProps extends Omit<BoxProps, 'icon'> {\n  children?: ReactNode;\n  /**\n   * The heading tag the label renders as, so the section fits the page's outline. Only the tag\n   * changes: the label keeps the `heading/h3` look at every level.\n   */\n  headingLevel?: 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n  helperText?: ReactNode | ReactNode[];\n  helperTooltip?: string;\n  icon?: BitkitIconComponent;\n  label: string;\n}\n\nconst HELPER_DOT = '\\u2022';\n\nconst BitkitSectionHeading = forwardRef<HTMLDivElement, BitkitSectionHeadingProps>((props, ref) => {\n  const { children, css, headingLevel = 'h3', helperText, helperTooltip, icon: Icon, label, ...rest } = props;\n\n  const recipe = useSlotRecipe({ key: 'sectionHeading' });\n  const styles = recipe();\n\n  const helperItems = Array.isArray(helperText) ? helperText : helperText ? [helperText] : [];\n  const hasHelper = helperItems.length > 0 || Boolean(helperTooltip);\n\n  return (\n    <Box css={[styles.root, css]} ref={ref} {...rest}>\n      <chakra.div css={styles.contentBlock}>\n        <chakra.div css={styles.titleBlock}>\n          {Icon && <Icon css={styles.icon} size=\"24\" />}\n          <Text as={headingLevel} css={styles.label}>\n            {label}\n          </Text>\n        </chakra.div>\n        {hasHelper && (\n          <chakra.div css={styles.helperBlock}>\n            {helperItems.map((text, index) => (\n              <Fragment key={index}>\n                {index > 0 && (\n                  <chakra.span color=\"text/tertiary\" flexShrink={0} textStyle=\"body/md/regular\">\n                    {HELPER_DOT}\n                  </chakra.span>\n                )}\n                <chakra.span css={styles.helperText}>{text}</chakra.span>\n              </Fragment>\n            ))}\n            {helperTooltip && (\n              <BitkitTooltip text={helperTooltip}>\n                <IconInfoCircle color=\"icon/tertiary\" size=\"16\" />\n              </BitkitTooltip>\n            )}\n          </chakra.div>\n        )}\n      </chakra.div>\n      {children}\n    </Box>\n  );\n});\n\nBitkitSectionHeading.displayName = 'BitkitSectionHeading';\n\nexport default BitkitSectionHeading;\n"],"mappings":";;;;;;;;AAsBA,IAAM,aAAa;AAEnB,IAAM,uBAAuB,YAAuD,OAAO,QAAQ;CACjG,MAAM,EAAE,UAAU,KAAK,eAAe,MAAM,YAAY,eAAe,MAAM,MAAM,OAAO,GAAG,SAAS;CAGtG,MAAM,SADS,cAAc,EAAE,KAAK,iBAAiB,CACtC,CAAA,CAAO;CAEtB,MAAM,cAAc,MAAM,QAAQ,UAAU,IAAI,aAAa,aAAa,CAAC,UAAU,IAAI,CAAC;CAC1F,MAAM,YAAY,YAAY,SAAS,KAAK,QAAQ,aAAa;CAEjE,OACE,qBAAC,KAAD;EAAK,KAAK,CAAC,OAAO,MAAM,GAAG;EAAQ;EAAK,GAAI;EAA5C,UAAA,CACE,qBAAC,OAAO,KAAR;GAAY,KAAK,OAAO;GAAxB,UAAA,CACE,qBAAC,OAAO,KAAR;IAAY,KAAK,OAAO;IAAxB,UAAA,CACG,QAAQ,oBAAC,MAAD;KAAM,KAAK,OAAO;KAAM,MAAK;IAAM,CAAA,GAC5C,oBAAC,MAAD;KAAM,IAAI;KAAc,KAAK,OAAO;KACjC,UAAA;IACG,CAAA,CACI;GACX,CAAA,GAAA,aACC,qBAAC,OAAO,KAAR;IAAY,KAAK,OAAO;IAAxB,UAAA,CACG,YAAY,KAAK,MAAM,UACtB,qBAAC,UAAD,EAAA,UAAA,CACG,QAAQ,KACP,oBAAC,OAAO,MAAR;KAAa,OAAM;KAAgB,YAAY;KAAG,WAAU;KACzD,UAAA;IACU,CAAA,GAEf,oBAAC,OAAO,MAAR;KAAa,KAAK,OAAO;KAAa,UAAA;IAAkB,CAAA,CAChD,EAAA,GAPK,KAOL,CACX,GACA,iBACC,oBAAC,eAAD;KAAe,MAAM;KACnB,UAAA,oBAAC,gBAAD;MAAgB,OAAM;MAAgB,MAAK;KAAM,CAAA;IACpC,CAAA,CAEP;GAEJ,CAAA,CAAA;EACX,CAAA,GAAA,QACE;;AAET,CAAC;AAED,qBAAqB,cAAc"}
+{"version":3,"file":"BitkitSectionHeading.js","names":[],"sources":["../../../lib/components/BitkitSectionHeading/BitkitSectionHeading.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { chakra, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { forwardRef, Fragment, type ReactNode } from 'react';\n\nimport { type BitkitIconComponent } from '../../icons';\nimport IconInfoCircle from '../../icons/IconInfoCircle';\nimport BitkitTooltip from '../BitkitTooltip/BitkitTooltip';\n\nexport interface BitkitSectionHeadingProps extends Omit<BoxProps, 'icon'> {\n  children?: ReactNode;\n  /** `id` of the heading element itself, for a `<section aria-labelledby>` to take its name from the label alone. */\n  headingId?: string;\n  /**\n   * The heading tag the label renders as, so the section fits the page's outline. Only the tag\n   * changes: the label keeps the `heading/h3` look at every level.\n   */\n  headingLevel?: 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n  helperText?: ReactNode | ReactNode[];\n  helperTooltip?: string;\n  icon?: BitkitIconComponent;\n  label: string;\n}\n\nconst HELPER_DOT = '\\u2022';\n\nconst BitkitSectionHeading = forwardRef<HTMLDivElement, BitkitSectionHeadingProps>((props, ref) => {\n  const {\n    children,\n    css,\n    headingId,\n    headingLevel = 'h3',\n    helperText,\n    helperTooltip,\n    icon: Icon,\n    label,\n    ...rest\n  } = props;\n\n  const recipe = useSlotRecipe({ key: 'sectionHeading' });\n  const styles = recipe();\n\n  const helperItems = Array.isArray(helperText) ? helperText : helperText ? [helperText] : [];\n  const hasHelper = helperItems.length > 0 || Boolean(helperTooltip);\n\n  return (\n    <Box css={[styles.root, css]} ref={ref} {...rest}>\n      <chakra.div css={styles.contentBlock}>\n        <chakra.div css={styles.titleBlock}>\n          {Icon && <Icon css={styles.icon} size=\"24\" />}\n          <Text as={headingLevel} css={styles.label} id={headingId}>\n            {label}\n          </Text>\n        </chakra.div>\n        {hasHelper && (\n          <chakra.div css={styles.helperBlock}>\n            {helperItems.map((text, index) => (\n              <Fragment key={index}>\n                {index > 0 && (\n                  <chakra.span color=\"text/tertiary\" flexShrink={0} textStyle=\"body/md/regular\">\n                    {HELPER_DOT}\n                  </chakra.span>\n                )}\n                <chakra.span css={styles.helperText}>{text}</chakra.span>\n              </Fragment>\n            ))}\n            {helperTooltip && (\n              <BitkitTooltip text={helperTooltip}>\n                <IconInfoCircle color=\"icon/tertiary\" size=\"16\" />\n              </BitkitTooltip>\n            )}\n          </chakra.div>\n        )}\n      </chakra.div>\n      {children}\n    </Box>\n  );\n});\n\nBitkitSectionHeading.displayName = 'BitkitSectionHeading';\n\nexport default BitkitSectionHeading;\n"],"mappings":";;;;;;;;AAwBA,IAAM,aAAa;AAEnB,IAAM,uBAAuB,YAAuD,OAAO,QAAQ;CACjG,MAAM,EACJ,UACA,KACA,WACA,eAAe,MACf,YACA,eACA,MAAM,MACN,OACA,GAAG,SACD;CAGJ,MAAM,SADS,cAAc,EAAE,KAAK,iBAAiB,CACtC,CAAA,CAAO;CAEtB,MAAM,cAAc,MAAM,QAAQ,UAAU,IAAI,aAAa,aAAa,CAAC,UAAU,IAAI,CAAC;CAC1F,MAAM,YAAY,YAAY,SAAS,KAAK,QAAQ,aAAa;CAEjE,OACE,qBAAC,KAAD;EAAK,KAAK,CAAC,OAAO,MAAM,GAAG;EAAQ;EAAK,GAAI;EAA5C,UAAA,CACE,qBAAC,OAAO,KAAR;GAAY,KAAK,OAAO;GAAxB,UAAA,CACE,qBAAC,OAAO,KAAR;IAAY,KAAK,OAAO;IAAxB,UAAA,CACG,QAAQ,oBAAC,MAAD;KAAM,KAAK,OAAO;KAAM,MAAK;IAAM,CAAA,GAC5C,oBAAC,MAAD;KAAM,IAAI;KAAc,KAAK,OAAO;KAAO,IAAI;KAC5C,UAAA;IACG,CAAA,CACI;GACX,CAAA,GAAA,aACC,qBAAC,OAAO,KAAR;IAAY,KAAK,OAAO;IAAxB,UAAA,CACG,YAAY,KAAK,MAAM,UACtB,qBAAC,UAAD,EAAA,UAAA,CACG,QAAQ,KACP,oBAAC,OAAO,MAAR;KAAa,OAAM;KAAgB,YAAY;KAAG,WAAU;KACzD,UAAA;IACU,CAAA,GAEf,oBAAC,OAAO,MAAR;KAAa,KAAK,OAAO;KAAa,UAAA;IAAkB,CAAA,CAChD,EAAA,GAPK,KAOL,CACX,GACA,iBACC,oBAAC,eAAD;KAAe,MAAM;KACnB,UAAA,oBAAC,gBAAD;MAAgB,OAAM;MAAgB,MAAK;KAAM,CAAA;IACpC,CAAA,CAEP;GAEJ,CAAA,CAAA;EACX,CAAA,GAAA,QACE;;AAET,CAAC;AAED,qBAAqB,cAAc"}

package/dist/components/BitkitStepsCard/BitkitStepsCard.d.ts

@@ -13,6 +13,8 @@ export interface BitkitStepsCardBodyProps extends Omit<CardBodyProps, 'children'
 export interface BitkitStepsCardStepProps {
     children?: ReactNode;
     description?: ReactNode;
+    /** The tag the title renders as, so it fits the page's outline: `h2` when nothing but the page header is above it. */
+    headingLevel?: 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
     title?: ReactNode;
 }
 export interface BitkitStepsCardFooterProps extends Omit<CardFooterProps, 'children'> {

package/dist/components/BitkitStepsCard/BitkitStepsCard.js

@@ -51,7 +51,7 @@ var BitkitStepsCardBody = forwardRef((props, ref) => {
 BitkitStepsCardBody.displayName = "BitkitStepsCardBody";
 var hasContent = (node) => node !== null && node !== void 0 && node !== "";
 var BitkitStepsCardStep = (props) => {
-	const { _index = 0, children, description, title } = props;
+	const { _index = 0, children, description, headingLevel = "h3", title } = props;
 	const { step } = useStepCardContext() ?? { step: 0 };
 	const styles = useStepsCardStyles();
 	if (_index !== step) return null;
@@ -60,6 +60,7 @@ var BitkitStepsCardStep = (props) => {
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [(showTitle || showDescription) && /* @__PURE__ */ jsxs(Box, {
 		css: styles.titleGroup,
 		children: [showTitle && /* @__PURE__ */ jsx(Card.Title, {
+			as: headingLevel,
 			css: styles.title,
 			children: title
 		}), showDescription && /* @__PURE__ */ jsx(Card.Description, {

package/dist/components/BitkitStepsCard/BitkitStepsCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"BitkitStepsCard.js","names":["_Fragment"],"sources":["../../../lib/components/BitkitStepsCard/BitkitStepsCard.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport {\n  Card,\n  type CardBodyProps,\n  type CardFooterProps,\n  type CardHeaderProps,\n  type CardRootProps,\n} from '@chakra-ui/react/card';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Children, cloneElement, forwardRef, isValidElement, type ReactElement, type ReactNode } from 'react';\n\nimport { withSubComponents } from '../../utilities/withSubComponents';\nimport { StepCardProvider, useStepCardContext } from './StepCardContext';\n\nconst useStepsCardStyles = () => {\n  const recipe = useSlotRecipe({ key: 'stepsCard' });\n  return recipe();\n};\n\nexport interface BitkitStepsCardProps extends Omit<CardRootProps, 'children' | 'title'> {\n  children: ReactNode;\n  step: number;\n}\n\nconst BitkitStepsCard = forwardRef<HTMLDivElement, BitkitStepsCardProps>((props, ref) => {\n  const { children, css, step, ...rest } = props;\n  const styles = useStepsCardStyles();\n\n  return (\n    <StepCardProvider value={{ step }}>\n      <Card.Root ref={ref} css={[styles.root, css]} unstyled {...rest}>\n        {children}\n      </Card.Root>\n    </StepCardProvider>\n  );\n});\n\nBitkitStepsCard.displayName = 'BitkitStepsCard';\n\nexport interface BitkitStepsCardHeaderProps extends Omit<CardHeaderProps, 'children'> {\n  children: ReactNode;\n}\n\nconst BitkitStepsCardHeader = forwardRef<HTMLDivElement, BitkitStepsCardHeaderProps>((props, ref) => {\n  const { children, css, ...rest } = props;\n  const styles = useStepsCardStyles();\n\n  return (\n    <Card.Header ref={ref} css={[styles.header, css]} {...rest}>\n      {children}\n    </Card.Header>\n  );\n});\n\nBitkitStepsCardHeader.displayName = 'BitkitStepsCardHeader';\n\nexport interface BitkitStepsCardBodyProps extends Omit<CardBodyProps, 'children'> {\n  children: ReactNode;\n}\n\nconst BitkitStepsCardBody = forwardRef<HTMLDivElement, BitkitStepsCardBodyProps>((props, ref) => {\n  const { children, css, ...rest } = props;\n  const styles = useStepsCardStyles();\n\n  return (\n    <Card.Body ref={ref} css={[styles.body, css]} {...rest}>\n      {Children.map(children, (child, index) => {\n        if (isValidElement(child)) {\n          return cloneElement(child as ReactElement<{ _index?: number }>, { _index: index });\n        }\n        return child;\n      })}\n    </Card.Body>\n  );\n});\n\nBitkitStepsCardBody.displayName = 'BitkitStepsCardBody';\n\nconst hasContent = (node: ReactNode) => node !== null && node !== undefined && node !== '';\n\nexport interface BitkitStepsCardStepProps {\n  children?: ReactNode;\n  description?: ReactNode;\n  title?: ReactNode;\n}\n\ninterface BitkitStepsCardStepInternalProps extends BitkitStepsCardStepProps {\n  _index?: number;\n}\n\nconst BitkitStepsCardStep = (props: BitkitStepsCardStepProps) => {\n  const { _index = 0, children, description, title } = props as BitkitStepsCardStepInternalProps;\n  const { step } = useStepCardContext() ?? { step: 0 };\n  const styles = useStepsCardStyles();\n\n  if (_index !== step) return null;\n\n  const showTitle = hasContent(title);\n  const showDescription = hasContent(description);\n\n  return (\n    <>\n      {(showTitle || showDescription) && (\n        <Box css={styles.titleGroup}>\n          {showTitle && <Card.Title css={styles.title}>{title}</Card.Title>}\n          {showDescription && <Card.Description css={styles.description}>{description}</Card.Description>}\n        </Box>\n      )}\n      {children}\n    </>\n  );\n};\n\nBitkitStepsCardStep.displayName = 'BitkitStepsCardStep';\n\nexport interface BitkitStepsCardFooterProps extends Omit<CardFooterProps, 'children'> {\n  children: ReactNode;\n}\n\nconst BitkitStepsCardFooter = forwardRef<HTMLDivElement, BitkitStepsCardFooterProps>((props, ref) => {\n  const { children, css, ...rest } = props;\n  const styles = useStepsCardStyles();\n\n  return (\n    <Card.Footer ref={ref} css={[styles.footer, css]} {...rest}>\n      {children}\n    </Card.Footer>\n  );\n});\n\nBitkitStepsCardFooter.displayName = 'BitkitStepsCardFooter';\n\nexport default withSubComponents(BitkitStepsCard, {\n  Body: BitkitStepsCardBody,\n  Footer: BitkitStepsCardFooter,\n  Header: BitkitStepsCardHeader,\n  Step: BitkitStepsCardStep,\n});\n"],"mappings":";;;;;;;;AAcA,IAAM,2BAA2B;CAE/B,OADe,cAAc,EAAE,KAAK,YAAY,CACzC,CAAA,CAAO;AAChB;AAOA,IAAM,kBAAkB,YAAkD,OAAO,QAAQ;CACvF,MAAM,EAAE,UAAU,KAAK,MAAM,GAAG,SAAS;CACzC,MAAM,SAAS,mBAAmB;CAElC,OACE,oBAAC,kBAAD;EAAkB,OAAO,EAAE,KAAK;EAC9B,UAAA,oBAAC,KAAK,MAAN;GAAgB;GAAK,KAAK,CAAC,OAAO,MAAM,GAAG;GAAG,UAAA;GAAS,GAAI;GACxD;EACQ,CAAA;CACK,CAAA;AAEtB,CAAC;AAED,gBAAgB,cAAc;AAM9B,IAAM,wBAAwB,YAAwD,OAAO,QAAQ;CACnG,MAAM,EAAE,UAAU,KAAK,GAAG,SAAS;CACnC,MAAM,SAAS,mBAAmB;CAElC,OACE,oBAAC,KAAK,QAAN;EAAkB;EAAK,KAAK,CAAC,OAAO,QAAQ,GAAG;EAAG,GAAI;EACnD;CACU,CAAA;AAEjB,CAAC;AAED,sBAAsB,cAAc;AAMpC,IAAM,sBAAsB,YAAsD,OAAO,QAAQ;CAC/F,MAAM,EAAE,UAAU,KAAK,GAAG,SAAS;CACnC,MAAM,SAAS,mBAAmB;CAElC,OACE,oBAAC,KAAK,MAAN;EAAgB;EAAK,KAAK,CAAC,OAAO,MAAM,GAAG;EAAG,GAAI;EAC/C,UAAA,SAAS,IAAI,WAAW,OAAO,UAAU;GACxC,IAAI,eAAe,KAAK,GACtB,OAAO,aAAa,OAA4C,EAAE,QAAQ,MAAM,CAAC;GAEnF,OAAO;EACT,CAAC;CACQ,CAAA;AAEf,CAAC;AAED,oBAAoB,cAAc;AAElC,IAAM,cAAc,SAAoB,SAAS,QAAQ,SAAS,KAAA,KAAa,SAAS;AAYxF,IAAM,uBAAuB,UAAoC;CAC/D,MAAM,EAAE,SAAS,GAAG,UAAU,aAAa,UAAU;CACrD,MAAM,EAAE,SAAS,mBAAmB,KAAK,EAAE,MAAM,EAAE;CACnD,MAAM,SAAS,mBAAmB;CAElC,IAAI,WAAW,MAAM,OAAO;CAE5B,MAAM,YAAY,WAAW,KAAK;CAClC,MAAM,kBAAkB,WAAW,WAAW;CAE9C,OACE,qBAAAA,YAAA,EAAA,UAAA,EACI,aAAa,oBACb,qBAAC,KAAD;EAAK,KAAK,OAAO;EAAjB,UAAA,CACG,aAAa,oBAAC,KAAK,OAAN;GAAY,KAAK,OAAO;GAAQ,UAAA;EAAkB,CAAA,GAC/D,mBAAmB,oBAAC,KAAK,aAAN;GAAkB,KAAK,OAAO;GAAc,UAAA;EAA8B,CAAA,CAC3F;CAEN,CAAA,GAAA,QACD,EAAA,CAAA;AAEN;AAEA,oBAAoB,cAAc;AAMlC,IAAM,wBAAwB,YAAwD,OAAO,QAAQ;CACnG,MAAM,EAAE,UAAU,KAAK,GAAG,SAAS;CACnC,MAAM,SAAS,mBAAmB;CAElC,OACE,oBAAC,KAAK,QAAN;EAAkB;EAAK,KAAK,CAAC,OAAO,QAAQ,GAAG;EAAG,GAAI;EACnD;CACU,CAAA;AAEjB,CAAC;AAED,sBAAsB,cAAc;AAEpC,IAAA,0BAAe,kBAAkB,iBAAiB;CAChD,MAAM;CACN,QAAQ;CACR,QAAQ;CACR,MAAM;AACR,CAAC"}
+{"version":3,"file":"BitkitStepsCard.js","names":["_Fragment"],"sources":["../../../lib/components/BitkitStepsCard/BitkitStepsCard.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport {\n  Card,\n  type CardBodyProps,\n  type CardFooterProps,\n  type CardHeaderProps,\n  type CardRootProps,\n} from '@chakra-ui/react/card';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Children, cloneElement, forwardRef, isValidElement, type ReactElement, type ReactNode } from 'react';\n\nimport { withSubComponents } from '../../utilities/withSubComponents';\nimport { StepCardProvider, useStepCardContext } from './StepCardContext';\n\nconst useStepsCardStyles = () => {\n  const recipe = useSlotRecipe({ key: 'stepsCard' });\n  return recipe();\n};\n\nexport interface BitkitStepsCardProps extends Omit<CardRootProps, 'children' | 'title'> {\n  children: ReactNode;\n  step: number;\n}\n\nconst BitkitStepsCard = forwardRef<HTMLDivElement, BitkitStepsCardProps>((props, ref) => {\n  const { children, css, step, ...rest } = props;\n  const styles = useStepsCardStyles();\n\n  return (\n    <StepCardProvider value={{ step }}>\n      <Card.Root ref={ref} css={[styles.root, css]} unstyled {...rest}>\n        {children}\n      </Card.Root>\n    </StepCardProvider>\n  );\n});\n\nBitkitStepsCard.displayName = 'BitkitStepsCard';\n\nexport interface BitkitStepsCardHeaderProps extends Omit<CardHeaderProps, 'children'> {\n  children: ReactNode;\n}\n\nconst BitkitStepsCardHeader = forwardRef<HTMLDivElement, BitkitStepsCardHeaderProps>((props, ref) => {\n  const { children, css, ...rest } = props;\n  const styles = useStepsCardStyles();\n\n  return (\n    <Card.Header ref={ref} css={[styles.header, css]} {...rest}>\n      {children}\n    </Card.Header>\n  );\n});\n\nBitkitStepsCardHeader.displayName = 'BitkitStepsCardHeader';\n\nexport interface BitkitStepsCardBodyProps extends Omit<CardBodyProps, 'children'> {\n  children: ReactNode;\n}\n\nconst BitkitStepsCardBody = forwardRef<HTMLDivElement, BitkitStepsCardBodyProps>((props, ref) => {\n  const { children, css, ...rest } = props;\n  const styles = useStepsCardStyles();\n\n  return (\n    <Card.Body ref={ref} css={[styles.body, css]} {...rest}>\n      {Children.map(children, (child, index) => {\n        if (isValidElement(child)) {\n          return cloneElement(child as ReactElement<{ _index?: number }>, { _index: index });\n        }\n        return child;\n      })}\n    </Card.Body>\n  );\n});\n\nBitkitStepsCardBody.displayName = 'BitkitStepsCardBody';\n\nconst hasContent = (node: ReactNode) => node !== null && node !== undefined && node !== '';\n\nexport interface BitkitStepsCardStepProps {\n  children?: ReactNode;\n  description?: ReactNode;\n  /** The tag the title renders as, so it fits the page's outline: `h2` when nothing but the page header is above it. */\n  headingLevel?: 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n  title?: ReactNode;\n}\n\ninterface BitkitStepsCardStepInternalProps extends BitkitStepsCardStepProps {\n  _index?: number;\n}\n\nconst BitkitStepsCardStep = (props: BitkitStepsCardStepProps) => {\n  const { _index = 0, children, description, headingLevel = 'h3', title } = props as BitkitStepsCardStepInternalProps;\n  const { step } = useStepCardContext() ?? { step: 0 };\n  const styles = useStepsCardStyles();\n\n  if (_index !== step) return null;\n\n  const showTitle = hasContent(title);\n  const showDescription = hasContent(description);\n\n  return (\n    <>\n      {(showTitle || showDescription) && (\n        <Box css={styles.titleGroup}>\n          {showTitle && (\n            <Card.Title as={headingLevel} css={styles.title}>\n              {title}\n            </Card.Title>\n          )}\n          {showDescription && <Card.Description css={styles.description}>{description}</Card.Description>}\n        </Box>\n      )}\n      {children}\n    </>\n  );\n};\n\nBitkitStepsCardStep.displayName = 'BitkitStepsCardStep';\n\nexport interface BitkitStepsCardFooterProps extends Omit<CardFooterProps, 'children'> {\n  children: ReactNode;\n}\n\nconst BitkitStepsCardFooter = forwardRef<HTMLDivElement, BitkitStepsCardFooterProps>((props, ref) => {\n  const { children, css, ...rest } = props;\n  const styles = useStepsCardStyles();\n\n  return (\n    <Card.Footer ref={ref} css={[styles.footer, css]} {...rest}>\n      {children}\n    </Card.Footer>\n  );\n});\n\nBitkitStepsCardFooter.displayName = 'BitkitStepsCardFooter';\n\nexport default withSubComponents(BitkitStepsCard, {\n  Body: BitkitStepsCardBody,\n  Footer: BitkitStepsCardFooter,\n  Header: BitkitStepsCardHeader,\n  Step: BitkitStepsCardStep,\n});\n"],"mappings":";;;;;;;;AAcA,IAAM,2BAA2B;CAE/B,OADe,cAAc,EAAE,KAAK,YAAY,CACzC,CAAA,CAAO;AAChB;AAOA,IAAM,kBAAkB,YAAkD,OAAO,QAAQ;CACvF,MAAM,EAAE,UAAU,KAAK,MAAM,GAAG,SAAS;CACzC,MAAM,SAAS,mBAAmB;CAElC,OACE,oBAAC,kBAAD;EAAkB,OAAO,EAAE,KAAK;EAC9B,UAAA,oBAAC,KAAK,MAAN;GAAgB;GAAK,KAAK,CAAC,OAAO,MAAM,GAAG;GAAG,UAAA;GAAS,GAAI;GACxD;EACQ,CAAA;CACK,CAAA;AAEtB,CAAC;AAED,gBAAgB,cAAc;AAM9B,IAAM,wBAAwB,YAAwD,OAAO,QAAQ;CACnG,MAAM,EAAE,UAAU,KAAK,GAAG,SAAS;CACnC,MAAM,SAAS,mBAAmB;CAElC,OACE,oBAAC,KAAK,QAAN;EAAkB;EAAK,KAAK,CAAC,OAAO,QAAQ,GAAG;EAAG,GAAI;EACnD;CACU,CAAA;AAEjB,CAAC;AAED,sBAAsB,cAAc;AAMpC,IAAM,sBAAsB,YAAsD,OAAO,QAAQ;CAC/F,MAAM,EAAE,UAAU,KAAK,GAAG,SAAS;CACnC,MAAM,SAAS,mBAAmB;CAElC,OACE,oBAAC,KAAK,MAAN;EAAgB;EAAK,KAAK,CAAC,OAAO,MAAM,GAAG;EAAG,GAAI;EAC/C,UAAA,SAAS,IAAI,WAAW,OAAO,UAAU;GACxC,IAAI,eAAe,KAAK,GACtB,OAAO,aAAa,OAA4C,EAAE,QAAQ,MAAM,CAAC;GAEnF,OAAO;EACT,CAAC;CACQ,CAAA;AAEf,CAAC;AAED,oBAAoB,cAAc;AAElC,IAAM,cAAc,SAAoB,SAAS,QAAQ,SAAS,KAAA,KAAa,SAAS;AAcxF,IAAM,uBAAuB,UAAoC;CAC/D,MAAM,EAAE,SAAS,GAAG,UAAU,aAAa,eAAe,MAAM,UAAU;CAC1E,MAAM,EAAE,SAAS,mBAAmB,KAAK,EAAE,MAAM,EAAE;CACnD,MAAM,SAAS,mBAAmB;CAElC,IAAI,WAAW,MAAM,OAAO;CAE5B,MAAM,YAAY,WAAW,KAAK;CAClC,MAAM,kBAAkB,WAAW,WAAW;CAE9C,OACE,qBAAAA,YAAA,EAAA,UAAA,EACI,aAAa,oBACb,qBAAC,KAAD;EAAK,KAAK,OAAO;EAAjB,UAAA,CACG,aACC,oBAAC,KAAK,OAAN;GAAY,IAAI;GAAc,KAAK,OAAO;GACvC,UAAA;EACS,CAAA,GAEb,mBAAmB,oBAAC,KAAK,aAAN;GAAkB,KAAK,OAAO;GAAc,UAAA;EAA8B,CAAA,CAC3F;CAEN,CAAA,GAAA,QACD,EAAA,CAAA;AAEN;AAEA,oBAAoB,cAAc;AAMlC,IAAM,wBAAwB,YAAwD,OAAO,QAAQ;CACnG,MAAM,EAAE,UAAU,KAAK,GAAG,SAAS;CACnC,MAAM,SAAS,mBAAmB;CAElC,OACE,oBAAC,KAAK,QAAN;EAAkB;EAAK,KAAK,CAAC,OAAO,QAAQ,GAAG;EAAG,GAAI;EACnD;CACU,CAAA;AAEjB,CAAC;AAED,sBAAsB,cAAc;AAEpC,IAAA,0BAAe,kBAAkB,iBAAiB;CAChD,MAAM;CACN,QAAQ;CACR,QAAQ;CACR,MAAM;AACR,CAAC"}

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

@@ -36,8 +36,7 @@ export type BitkitTooltipProps = {
      * that cannot take focus — on a focusable one this adds a second, redundant tab stop for the same
      * control. A disabled `<button>` dispatches no pointer events and is out of the tab order, so
      * without a wrapper the tooltip never opens — in the one state whose explanation the user actually
-     * needs. For a disabled `BitkitButton` or `BitkitIconButton`, pass its `disabledReason` instead:
-     * the button stays focusable and announced as disabled, with no wrapper.
+     * needs.
      *
      * Chakra v2's `Tooltip` had this built in as `shouldWrapChildren`, rendering a
      * `<span display="inline-block" tabIndex={0}>` that carried the trigger props. Ark's tooltip has no
@@ -47,7 +46,8 @@ export type BitkitTooltipProps = {
      *
      * The wrapper is a plain focusable span, so focusing it announces the trigger's label and the
      * tooltip text, not the trigger's own state — a disabled button inside is not re-announced as
-     * disabled; that is what `disabledReason` on the buttons fixes.
+     * disabled. Conveying that would mean keeping the trigger focusable with `aria-disabled` instead
+     * of the native attribute, which is a change to what `disabled` means, not a tooltip concern.
      */
     wrapTrigger?: boolean;
 };

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

@@ -1 +1 @@
-{"version":3,"file":"BitkitTooltip.js","names":[],"sources":["../../../lib/components/BitkitTooltip/BitkitTooltip.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { Portal } from '@chakra-ui/react/portal';\nimport { Tooltip, type TooltipRootProps } from '@chakra-ui/react/tooltip';\nimport { isValidElement, type ReactNode, type Ref, useContext, useRef } from 'react';\n\nimport { type BitkitIconComponent } from '../../icons';\nimport BitkitPortalContext from '../../utilities/BitkitPortalContext';\n\nexport type BitkitTooltipProps = {\n  /**\n   * The trigger the tooltip is anchored to. Rendered via `asChild`, so it must accept a ref —\n   * unless `wrapTrigger` puts a wrapper in between.\n   */\n  children: ReactNode;\n  /** Dismiss the tooltip when the trigger is clicked. */\n  closeOnClick?: TooltipRootProps['closeOnClick'];\n  /**\n   * Render the tooltip inline instead of in a portal. Only needed when it must stay inside its\n   * parent's DOM subtree — a dialog already sets this for you.\n   */\n  disablePortal?: boolean;\n  /** Render the trigger without a tooltip — for hints that only apply in some states. */\n  disabled?: TooltipRootProps['disabled'];\n  /**\n   * Icon rendered after `text`, at size 16. Use it for the affordance the tooltip describes — an\n   * `IconArrowNortheast` when the trigger opens something in a new tab, for instance.\n   */\n  icon?: BitkitIconComponent;\n  /** Called when the tooltip opens or closes, including from hover and focus. */\n  onOpenChange?: TooltipRootProps['onOpenChange'];\n  /** Controlled open state. Leave unset to let hover and focus drive it. */\n  open?: TooltipRootProps['open'];\n  /** Delay in ms before an uncontrolled tooltip opens on hover. */\n  openDelay?: TooltipRootProps['openDelay'];\n  /** Where the tooltip sits relative to the trigger (default `top`). It flips if space is short. */\n  placement?: NonNullable<TooltipRootProps['positioning']>['placement'];\n  /** The tooltip's text. Plain string only — use `icon` for a glyph after it. */\n  text: string;\n  /**\n   * Render the trigger inside a focusable wrapper instead of on the trigger itself. Only for triggers\n   * that cannot take focus — on a focusable one this adds a second, redundant tab stop for the same\n   * control. A disabled `<button>` dispatches no pointer events and is out of the tab order, so\n   * without a wrapper the tooltip never opens — in the one state whose explanation the user actually\n   * needs. For a disabled `BitkitButton` or `BitkitIconButton`, pass its `disabledReason` instead:\n   * the button stays focusable and announced as disabled, with no wrapper.\n   *\n   * Chakra v2's `Tooltip` had this built in as `shouldWrapChildren`, rendering a\n   * `<span display=\"inline-block\" tabIndex={0}>` that carried the trigger props. Ark's tooltip has no\n   * equivalent, and Chakra's own v2->v3 codemod replaces it with a bare `<span>` — which restores\n   * hover but silently drops the tab stop, so the tooltip stays unreachable by keyboard. This prop is\n   * that escape hatch, `tabIndex` included.\n   *\n   * The wrapper is a plain focusable span, so focusing it announces the trigger's label and the\n   * tooltip text, not the trigger's own state — a disabled button inside is not re-announced as\n   * disabled; that is what `disabledReason` on the buttons fixes.\n   */\n  wrapTrigger?: boolean;\n};\n\n/**\n * A hover/focus tooltip anchored to its child: `text` carries the message and `icon` appends a\n * glyph after it. Text only — a tooltip closes when focus leaves its trigger and ignores touch, so a\n * link or a button inside one couldn't be reached. For those use `BitkitToggletip`, which looks the\n * same and opens on click.\n *\n * The content renders in a portal, so it escapes any ancestor that traps stacking (`isolation`,\n * `transform`, a `z-index`ed positioned box) or clips overflow. Dialogs turn that off through\n * `BitkitPortalContext`; `disablePortal` is the manual override.\n */\nconst BitkitTooltip = ({\n  children,\n  closeOnClick,\n  disablePortal,\n  disabled,\n  icon: Icon,\n  onOpenChange,\n  open,\n  openDelay,\n  placement = 'top',\n  text,\n  wrapTrigger,\n}: BitkitTooltipProps) => {\n  const { disablePortal: disablePortalFromContext } = useContext(BitkitPortalContext);\n\n  // Anchor positioning to the trigger node by ref rather than relying on Zag's\n  // id/data-scope lookup. When the trigger is also wrapped by another `asChild`\n  // trigger (e.g. Menu.Trigger), the outer trigger's id and data-scope/data-part\n  // overwrite ours on the shared node, so `getTriggerEl()` can't find it and the\n  // tooltip loses its anchor. `getAnchorElement` takes precedence over the id\n  // lookup, so this is safe in the standalone case too.\n  const triggerRef = useRef<HTMLElement>(null);\n\n  return (\n    <Tooltip.Root\n      closeOnClick={closeOnClick}\n      disabled={disabled}\n      onOpenChange={onOpenChange}\n      open={open}\n      openDelay={openDelay}\n      positioning={{ getAnchorElement: () => triggerRef.current, placement, offset: { mainAxis: 4, crossAxis: 0 } }}\n    >\n      <Tooltip.Trigger ref={triggerRef as Ref<HTMLButtonElement>} asChild>\n        {wrapTrigger || !isValidElement(children) ? (\n          // inline-flex so the wrapper shrink-wraps the trigger: a plain inline span adds descender\n          // space below it and shifts the alignment of whatever sits next to it.\n          <Box\n            as=\"span\"\n            display=\"inline-flex\"\n            tabIndex={0}\n            css={{\n              // The wrapper owns the tab stop, but the focus ring belongs on the trigger: an outline\n              // follows the border-radius of the element it is drawn on, and the wrapper has none —\n              // so leaving it here squares off a pill or a round trigger.\n              _focusVisible: {\n                outline: 'none',\n                '& > *': {\n                  outlineColor: 'var(--focus-ring-color)',\n                  outlineOffset: 'var(--focus-ring-offset, 2px)',\n                  outlineStyle: 'var(--focus-ring-style, solid)',\n                  outlineWidth: 'var(--focus-ring-width, 2px)',\n                },\n              },\n            }}\n          >\n            {children}\n          </Box>\n        ) : (\n          children\n        )}\n      </Tooltip.Trigger>\n      <Portal disabled={disablePortal || disablePortalFromContext}>\n        <Tooltip.Positioner>\n          <Tooltip.Content>\n            <Tooltip.Arrow>\n              <Tooltip.ArrowTip />\n            </Tooltip.Arrow>\n            <Box display=\"flex\" gap=\"8\">\n              {text}\n              {Icon && <Icon flexShrink=\"0\" size=\"16\" />}\n            </Box>\n          </Tooltip.Content>\n        </Tooltip.Positioner>\n      </Portal>\n    </Tooltip.Root>\n  );\n};\n\nBitkitTooltip.displayName = 'BitkitTooltip';\n\nexport default BitkitTooltip;\n"],"mappings":";;;;;;;;;;;;;;;;;AAqEA,IAAM,iBAAiB,EACrB,UACA,cACA,eACA,UACA,MAAM,MACN,cACA,MACA,WACA,YAAY,OACZ,MACA,kBACwB;CACxB,MAAM,EAAE,eAAe,6BAA6B,WAAW,mBAAmB;CAQlF,MAAM,aAAa,OAAoB,IAAI;CAE3C,OACE,qBAAC,QAAQ,MAAT;EACgB;EACJ;EACI;EACR;EACK;EACX,aAAa;GAAE,wBAAwB,WAAW;GAAS;GAAW,QAAQ;IAAE,UAAU;IAAG,WAAW;GAAE;EAAE;EAN9G,UAAA,CAQE,oBAAC,QAAQ,SAAT;GAAiB,KAAK;GAAsC,SAAA;GACzD,UAAA,eAAe,CAAC,eAAe,QAAQ,IAGtC,oBAAC,KAAD;IACE,IAAG;IACH,SAAQ;IACR,UAAU;IACV,KAAK,EAIH,eAAe;KACb,SAAS;KACT,SAAS;MACP,cAAc;MACd,eAAe;MACf,cAAc;MACd,cAAc;KAChB;IACF,EACF;IAEC;GACE,CAAA,IAEL;EAEa,CAAA,GACjB,oBAAC,QAAD;GAAQ,UAAU,iBAAiB;GACjC,UAAA,oBAAC,QAAQ,YAAT,EAAA,UACE,qBAAC,QAAQ,SAAT,EAAA,UAAA,CACE,oBAAC,QAAQ,OAAT,EAAA,UACE,oBAAC,QAAQ,UAAT,CAAmB,CAAA,EACN,CAAA,GACf,qBAAC,KAAD;IAAK,SAAQ;IAAO,KAAI;IAAxB,UAAA,CACG,MACA,QAAQ,oBAAC,MAAD;KAAM,YAAW;KAAI,MAAK;IAAM,CAAA,CACtC;GACU,CAAA,CAAA,EAAA,CAAA,EACC,CAAA;EACd,CAAA,CACI;;AAElB;AAEA,cAAc,cAAc"}
+{"version":3,"file":"BitkitTooltip.js","names":[],"sources":["../../../lib/components/BitkitTooltip/BitkitTooltip.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { Portal } from '@chakra-ui/react/portal';\nimport { Tooltip, type TooltipRootProps } from '@chakra-ui/react/tooltip';\nimport { isValidElement, type ReactNode, type Ref, useContext, useRef } from 'react';\n\nimport { type BitkitIconComponent } from '../../icons';\nimport BitkitPortalContext from '../../utilities/BitkitPortalContext';\n\nexport type BitkitTooltipProps = {\n  /**\n   * The trigger the tooltip is anchored to. Rendered via `asChild`, so it must accept a ref —\n   * unless `wrapTrigger` puts a wrapper in between.\n   */\n  children: ReactNode;\n  /** Dismiss the tooltip when the trigger is clicked. */\n  closeOnClick?: TooltipRootProps['closeOnClick'];\n  /**\n   * Render the tooltip inline instead of in a portal. Only needed when it must stay inside its\n   * parent's DOM subtree — a dialog already sets this for you.\n   */\n  disablePortal?: boolean;\n  /** Render the trigger without a tooltip — for hints that only apply in some states. */\n  disabled?: TooltipRootProps['disabled'];\n  /**\n   * Icon rendered after `text`, at size 16. Use it for the affordance the tooltip describes — an\n   * `IconArrowNortheast` when the trigger opens something in a new tab, for instance.\n   */\n  icon?: BitkitIconComponent;\n  /** Called when the tooltip opens or closes, including from hover and focus. */\n  onOpenChange?: TooltipRootProps['onOpenChange'];\n  /** Controlled open state. Leave unset to let hover and focus drive it. */\n  open?: TooltipRootProps['open'];\n  /** Delay in ms before an uncontrolled tooltip opens on hover. */\n  openDelay?: TooltipRootProps['openDelay'];\n  /** Where the tooltip sits relative to the trigger (default `top`). It flips if space is short. */\n  placement?: NonNullable<TooltipRootProps['positioning']>['placement'];\n  /** The tooltip's text. Plain string only — use `icon` for a glyph after it. */\n  text: string;\n  /**\n   * Render the trigger inside a focusable wrapper instead of on the trigger itself. Only for triggers\n   * that cannot take focus — on a focusable one this adds a second, redundant tab stop for the same\n   * control. A disabled `<button>` dispatches no pointer events and is out of the tab order, so\n   * without a wrapper the tooltip never opens — in the one state whose explanation the user actually\n   * needs.\n   *\n   * Chakra v2's `Tooltip` had this built in as `shouldWrapChildren`, rendering a\n   * `<span display=\"inline-block\" tabIndex={0}>` that carried the trigger props. Ark's tooltip has no\n   * equivalent, and Chakra's own v2->v3 codemod replaces it with a bare `<span>` — which restores\n   * hover but silently drops the tab stop, so the tooltip stays unreachable by keyboard. This prop is\n   * that escape hatch, `tabIndex` included.\n   *\n   * The wrapper is a plain focusable span, so focusing it announces the trigger's label and the\n   * tooltip text, not the trigger's own state — a disabled button inside is not re-announced as\n   * disabled. Conveying that would mean keeping the trigger focusable with `aria-disabled` instead\n   * of the native attribute, which is a change to what `disabled` means, not a tooltip concern.\n   */\n  wrapTrigger?: boolean;\n};\n\n/**\n * A hover/focus tooltip anchored to its child: `text` carries the message and `icon` appends a\n * glyph after it. Text only — a tooltip closes when focus leaves its trigger and ignores touch, so a\n * link or a button inside one couldn't be reached. For those use `BitkitToggletip`, which looks the\n * same and opens on click.\n *\n * The content renders in a portal, so it escapes any ancestor that traps stacking (`isolation`,\n * `transform`, a `z-index`ed positioned box) or clips overflow. Dialogs turn that off through\n * `BitkitPortalContext`; `disablePortal` is the manual override.\n */\nconst BitkitTooltip = ({\n  children,\n  closeOnClick,\n  disablePortal,\n  disabled,\n  icon: Icon,\n  onOpenChange,\n  open,\n  openDelay,\n  placement = 'top',\n  text,\n  wrapTrigger,\n}: BitkitTooltipProps) => {\n  const { disablePortal: disablePortalFromContext } = useContext(BitkitPortalContext);\n\n  // Anchor positioning to the trigger node by ref rather than relying on Zag's\n  // id/data-scope lookup. When the trigger is also wrapped by another `asChild`\n  // trigger (e.g. Menu.Trigger), the outer trigger's id and data-scope/data-part\n  // overwrite ours on the shared node, so `getTriggerEl()` can't find it and the\n  // tooltip loses its anchor. `getAnchorElement` takes precedence over the id\n  // lookup, so this is safe in the standalone case too.\n  const triggerRef = useRef<HTMLElement>(null);\n\n  return (\n    <Tooltip.Root\n      closeOnClick={closeOnClick}\n      disabled={disabled}\n      onOpenChange={onOpenChange}\n      open={open}\n      openDelay={openDelay}\n      positioning={{ getAnchorElement: () => triggerRef.current, placement, offset: { mainAxis: 4, crossAxis: 0 } }}\n    >\n      <Tooltip.Trigger ref={triggerRef as Ref<HTMLButtonElement>} asChild>\n        {wrapTrigger || !isValidElement(children) ? (\n          // inline-flex so the wrapper shrink-wraps the trigger: a plain inline span adds descender\n          // space below it and shifts the alignment of whatever sits next to it.\n          <Box\n            as=\"span\"\n            display=\"inline-flex\"\n            tabIndex={0}\n            css={{\n              // The wrapper owns the tab stop, but the focus ring belongs on the trigger: an outline\n              // follows the border-radius of the element it is drawn on, and the wrapper has none —\n              // so leaving it here squares off a pill or a round trigger.\n              _focusVisible: {\n                outline: 'none',\n                '& > *': {\n                  outlineColor: 'var(--focus-ring-color)',\n                  outlineOffset: 'var(--focus-ring-offset, 2px)',\n                  outlineStyle: 'var(--focus-ring-style, solid)',\n                  outlineWidth: 'var(--focus-ring-width, 2px)',\n                },\n              },\n            }}\n          >\n            {children}\n          </Box>\n        ) : (\n          children\n        )}\n      </Tooltip.Trigger>\n      <Portal disabled={disablePortal || disablePortalFromContext}>\n        <Tooltip.Positioner>\n          <Tooltip.Content>\n            <Tooltip.Arrow>\n              <Tooltip.ArrowTip />\n            </Tooltip.Arrow>\n            <Box display=\"flex\" gap=\"8\">\n              {text}\n              {Icon && <Icon flexShrink=\"0\" size=\"16\" />}\n            </Box>\n          </Tooltip.Content>\n        </Tooltip.Positioner>\n      </Portal>\n    </Tooltip.Root>\n  );\n};\n\nBitkitTooltip.displayName = 'BitkitTooltip';\n\nexport default BitkitTooltip;\n"],"mappings":";;;;;;;;;;;;;;;;;AAqEA,IAAM,iBAAiB,EACrB,UACA,cACA,eACA,UACA,MAAM,MACN,cACA,MACA,WACA,YAAY,OACZ,MACA,kBACwB;CACxB,MAAM,EAAE,eAAe,6BAA6B,WAAW,mBAAmB;CAQlF,MAAM,aAAa,OAAoB,IAAI;CAE3C,OACE,qBAAC,QAAQ,MAAT;EACgB;EACJ;EACI;EACR;EACK;EACX,aAAa;GAAE,wBAAwB,WAAW;GAAS;GAAW,QAAQ;IAAE,UAAU;IAAG,WAAW;GAAE;EAAE;EAN9G,UAAA,CAQE,oBAAC,QAAQ,SAAT;GAAiB,KAAK;GAAsC,SAAA;GACzD,UAAA,eAAe,CAAC,eAAe,QAAQ,IAGtC,oBAAC,KAAD;IACE,IAAG;IACH,SAAQ;IACR,UAAU;IACV,KAAK,EAIH,eAAe;KACb,SAAS;KACT,SAAS;MACP,cAAc;MACd,eAAe;MACf,cAAc;MACd,cAAc;KAChB;IACF,EACF;IAEC;GACE,CAAA,IAEL;EAEa,CAAA,GACjB,oBAAC,QAAD;GAAQ,UAAU,iBAAiB;GACjC,UAAA,oBAAC,QAAQ,YAAT,EAAA,UACE,qBAAC,QAAQ,SAAT,EAAA,UAAA,CACE,oBAAC,QAAQ,OAAT,EAAA,UACE,oBAAC,QAAQ,UAAT,CAAmB,CAAA,EACN,CAAA,GACf,qBAAC,KAAD;IAAK,SAAQ;IAAO,KAAI;IAAxB,UAAA,CACG,MACA,QAAQ,oBAAC,MAAD;KAAM,YAAW;KAAI,MAAK;IAAM,CAAA,CACtC;GACU,CAAA,CAAA,EAAA,CAAA,EACC,CAAA;EACd,CAAA,CACI;;AAElB;AAEA,cAAc,cAAc"}

package/dist/components/index.d.ts

@@ -15,6 +15,7 @@ export { default as BitkitCodeSnippet, type BitkitCodeSnippetProps } from './Bit
 export { default as BitkitCollapsible, type BitkitCollapsibleProps } from './BitkitCollapsible/BitkitCollapsible';
 export { default as BitkitColorButton, type BitkitColorButtonProps } from './BitkitColorButton/BitkitColorButton';
 export { default as BitkitCombobox, type BitkitComboboxProps } from './BitkitCombobox/BitkitCombobox';
+export { type BitkitContentWidth, default as BitkitContentWrapper, type BitkitContentWrapperProps, } from './BitkitContentWrapper/BitkitContentWrapper';
 export { default as BitkitControlButton, type BitkitControlButtonProps, } from './BitkitControlButton/BitkitControlButton';
 export { default as BitkitDataWidget, type BitkitDataWidgetProps } from './BitkitDataWidget/BitkitDataWidget';
 export { default as BitkitDatePicker, type BitkitDatePickerProps } from './BitkitDatePicker/BitkitDatePicker';
@@ -58,6 +59,7 @@ export { default as BitkitOverflowTooltip, type BitkitOverflowTooltipProps, } fr
 export { default as BitkitPageFooter, type BitkitPageFooterItemProps, type BitkitPageFooterProps, } from './BitkitPageFooter/BitkitPageFooter';
 export { default as BitkitPageHeader, type BitkitPageHeaderProps } from './BitkitPageHeader/BitkitPageHeader';
 export { default as BitkitPageSidebar, type BitkitPageSidebarBodyProps, type BitkitPageSidebarDividerProps, type BitkitPageSidebarDrawerHeaderProps, type BitkitPageSidebarFooterProps, type BitkitPageSidebarGroupHeadingProps, type BitkitPageSidebarItemProps, type BitkitPageSidebarProgressItemProps, type BitkitPageSidebarProjectProps, type BitkitPageSidebarProps, type BitkitPageSidebarTitleProps, } from './BitkitPageSidebar/BitkitPageSidebar';
+export { default as BitkitPageSubheader, type BitkitPageSubheaderProps, } from './BitkitPageSubheader/BitkitPageSubheader';
 export { default as BitkitPagination, type BitkitPaginationLabels, type BitkitPaginationProps, } from './BitkitPagination/BitkitPagination';
 export { default as BitkitPaginationLoadMore, type BitkitPaginationLoadMoreProps, } from './BitkitPaginationLoadMore/BitkitPaginationLoadMore';
 export { default as BitkitPopover, type BitkitPopoverProps } from './BitkitPopover/BitkitPopover';

package/dist/main.js

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

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

@@ -0,0 +1,20 @@
+/** The page content widths: a `layout/maxWidth` cap, padding included, or `full` for none. */
+declare const contentWidthStyles: {
+    readonly '640': {
+        readonly maxWidth: "layout/maxWidth/640";
+    };
+    readonly '960': {
+        readonly maxWidth: "layout/maxWidth/960";
+    };
+    readonly '1280': {
+        readonly maxWidth: "layout/maxWidth/1280";
+    };
+    readonly '1616': {
+        readonly maxWidth: "layout/maxWidth/1616";
+    };
+    readonly full: {};
+};
+export type ContentWidth = keyof typeof contentWidthStyles;
+/** The `maxWidth` token for a content width, or nothing for `full` and no width at all. */
+export declare const contentMaxWidth: (contentWidth?: ContentWidth) => "layout/maxWidth/640" | "layout/maxWidth/960" | "layout/maxWidth/1280" | "layout/maxWidth/1616" | undefined;
+export default contentWidthStyles;

package/dist/theme/common/ContentWidth.common.js

@@ -0,0 +1,15 @@
+//#region lib/theme/common/ContentWidth.common.ts
+/** The page content widths: a `layout/maxWidth` cap, padding included, or `full` for none. */
+var contentWidthStyles = {
+	"640": { maxWidth: "layout/maxWidth/640" },
+	"960": { maxWidth: "layout/maxWidth/960" },
+	"1280": { maxWidth: "layout/maxWidth/1280" },
+	"1616": { maxWidth: "layout/maxWidth/1616" },
+	full: {}
+};
+/** The `maxWidth` token for a content width, or nothing for `full` and no width at all. */
+var contentMaxWidth = (contentWidth) => contentWidth && contentWidth !== "full" ? contentWidthStyles[contentWidth].maxWidth : void 0;
+//#endregion
+export { contentMaxWidth, contentWidthStyles as default };
+
+//# sourceMappingURL=ContentWidth.common.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ContentWidth.common.js","names":[],"sources":["../../../lib/theme/common/ContentWidth.common.ts"],"sourcesContent":["/** The page content widths: a `layout/maxWidth` cap, padding included, or `full` for none. */\nconst contentWidthStyles = {\n  '640': { maxWidth: 'layout/maxWidth/640' },\n  '960': { maxWidth: 'layout/maxWidth/960' },\n  '1280': { maxWidth: 'layout/maxWidth/1280' },\n  '1616': { maxWidth: 'layout/maxWidth/1616' },\n  full: {},\n} as const;\n\nexport type ContentWidth = keyof typeof contentWidthStyles;\n\n/** The `maxWidth` token for a content width, or nothing for `full` and no width at all. */\nexport const contentMaxWidth = (contentWidth?: ContentWidth) =>\n  contentWidth && contentWidth !== 'full' ? contentWidthStyles[contentWidth].maxWidth : undefined;\n\nexport default contentWidthStyles;\n"],"mappings":";;AACA,IAAM,qBAAqB;CACzB,OAAO,EAAE,UAAU,sBAAsB;CACzC,OAAO,EAAE,UAAU,sBAAsB;CACzC,QAAQ,EAAE,UAAU,uBAAuB;CAC3C,QAAQ,EAAE,UAAU,uBAAuB;CAC3C,MAAM,CAAC;AACT;;AAKA,IAAa,mBAAmB,iBAC9B,gBAAgB,iBAAiB,SAAS,mBAAmB,aAAa,CAAC,WAAW,KAAA"}

package/dist/theme/recipes/ContentWrapper.recipe.d.ts

@@ -0,0 +1,18 @@
+declare const contentWrapperRecipe: import('@chakra-ui/react').RecipeDefinition<{
+    contentWidth: {
+        readonly '640': {
+            readonly maxWidth: "layout/maxWidth/640";
+        };
+        readonly '960': {
+            readonly maxWidth: "layout/maxWidth/960";
+        };
+        readonly '1280': {
+            readonly maxWidth: "layout/maxWidth/1280";
+        };
+        readonly '1616': {
+            readonly maxWidth: "layout/maxWidth/1616";
+        };
+        readonly full: {};
+    };
+}>;
+export default contentWrapperRecipe;

package/dist/theme/recipes/ContentWrapper.recipe.js

@@ -0,0 +1,29 @@
+import contentWidthStyles from "../common/ContentWidth.common.js";
+import { defineRecipe } from "@chakra-ui/react/styled-system";
+//#region lib/theme/recipes/ContentWrapper.recipe.ts
+var contentWrapperRecipe = defineRecipe({
+	className: "content-wrapper",
+	base: {
+		columnGap: {
+			base: "32",
+			desktop: "64"
+		},
+		display: "grid",
+		gridTemplateColumns: "minmax(0, 1fr)",
+		"& > *": { minWidth: 0 },
+		marginInline: "auto",
+		paddingBlockEnd: "48",
+		paddingBlockStart: "32",
+		paddingInline: {
+			base: "16",
+			tablet: "32"
+		},
+		rowGap: "32",
+		width: "100%"
+	},
+	variants: { contentWidth: contentWidthStyles }
+});
+//#endregion
+export { contentWrapperRecipe as default };
+
+//# sourceMappingURL=ContentWrapper.recipe.js.map

package/dist/theme/recipes/ContentWrapper.recipe.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContentWrapper.recipe.js","names":[],"sources":["../../../lib/theme/recipes/ContentWrapper.recipe.ts"],"sourcesContent":["import { defineRecipe } from '@chakra-ui/react/styled-system';\n\nimport contentWidthStyles from '../common/ContentWidth.common';\n\nconst contentWrapperRecipe = defineRecipe({\n  className: 'content-wrapper',\n  base: {\n    columnGap: { base: '32', desktop: '64' },\n    display: 'grid',\n    gridTemplateColumns: 'minmax(0, 1fr)',\n    // Lets a `1fr` column shrink below its content's width instead of overflowing the page.\n    '& > *': { minWidth: 0 },\n    marginInline: 'auto',\n    paddingBlockEnd: '48',\n    paddingBlockStart: '32',\n    paddingInline: { base: '16', tablet: '32' },\n    rowGap: '32',\n    width: '100%',\n  },\n  variants: {\n    contentWidth: contentWidthStyles,\n  },\n});\n\nexport default contentWrapperRecipe;\n"],"mappings":";;;AAIA,IAAM,uBAAuB,aAAa;CACxC,WAAW;CACX,MAAM;EACJ,WAAW;GAAE,MAAM;GAAM,SAAS;EAAK;EACvC,SAAS;EACT,qBAAqB;EAErB,SAAS,EAAE,UAAU,EAAE;EACvB,cAAc;EACd,iBAAiB;EACjB,mBAAmB;EACnB,eAAe;GAAE,MAAM;GAAM,QAAQ;EAAK;EAC1C,QAAQ;EACR,OAAO;CACT;CACA,UAAU,EACR,cAAc,mBAChB;AACF,CAAC"}

package/dist/theme/recipes/Separator.recipe.d.ts

@@ -1,5 +1,13 @@
 declare const separatorRecipe: import('@chakra-ui/react').RecipeDefinition<{
     variant: {};
+    colorVariant: {
+        minimal: {
+            borderColor: "border/minimal";
+        };
+        regular: {
+            borderColor: "border/regular";
+        };
+    };
     orientation: {
         horizontal: {
             borderTopWidth: "var(--separator-thickness)";

package/dist/theme/recipes/Separator.recipe.js

@@ -4,11 +4,14 @@ var separatorRecipe = defineRecipe({
 	className: "separator",
 	base: {
 		display: "block",
-		borderColor: "border/regular",
 		borderStyle: "solid"
 	},
 	variants: {
 		variant: {},
+		colorVariant: {
+			minimal: { borderColor: "border/minimal" },
+			regular: { borderColor: "border/regular" }
+		},
 		orientation: {
 			horizontal: {
 				borderTopWidth: "var(--separator-thickness)",
@@ -25,6 +28,7 @@ var separatorRecipe = defineRecipe({
 		}
 	},
 	defaultVariants: {
+		colorVariant: "regular",
 		size: "1",
 		orientation: "horizontal"
 	}

package/dist/theme/recipes/Separator.recipe.js.map

@@ -1 +1 @@
-{"version":3,"file":"Separator.recipe.js","names":[],"sources":["../../../lib/theme/recipes/Separator.recipe.ts"],"sourcesContent":["import { defineRecipe } from '@chakra-ui/react/styled-system';\n\nconst separatorRecipe = defineRecipe({\n  className: 'separator',\n  base: {\n    display: 'block',\n    borderColor: 'border/regular',\n    borderStyle: 'solid',\n  },\n  variants: {\n    variant: {},\n    orientation: {\n      horizontal: {\n        borderTopWidth: 'var(--separator-thickness)',\n        width: '100%',\n      },\n      vertical: {\n        borderInlineStartWidth: 'var(--separator-thickness)',\n        minHeight: '20',\n      },\n    },\n    size: {\n      '1': {\n        '--separator-thickness': '1px',\n      },\n      '2': {\n        '--separator-thickness': '2px',\n      },\n    },\n  },\n  defaultVariants: {\n    size: '1',\n    orientation: 'horizontal',\n  },\n});\n\nexport default separatorRecipe;\n"],"mappings":";;AAEA,IAAM,kBAAkB,aAAa;CACnC,WAAW;CACX,MAAM;EACJ,SAAS;EACT,aAAa;EACb,aAAa;CACf;CACA,UAAU;EACR,SAAS,CAAC;EACV,aAAa;GACX,YAAY;IACV,gBAAgB;IAChB,OAAO;GACT;GACA,UAAU;IACR,wBAAwB;IACxB,WAAW;GACb;EACF;EACA,MAAM;GACJ,KAAK,EACH,yBAAyB,MAC3B;GACA,KAAK,EACH,yBAAyB,MAC3B;EACF;CACF;CACA,iBAAiB;EACf,MAAM;EACN,aAAa;CACf;AACF,CAAC"}
+{"version":3,"file":"Separator.recipe.js","names":[],"sources":["../../../lib/theme/recipes/Separator.recipe.ts"],"sourcesContent":["import { defineRecipe } from '@chakra-ui/react/styled-system';\n\nconst separatorRecipe = defineRecipe({\n  className: 'separator',\n  base: {\n    display: 'block',\n    borderStyle: 'solid',\n  },\n  variants: {\n    variant: {},\n    // `minimal` is the quieter line, e.g. between the sections of a page.\n    colorVariant: {\n      minimal: {\n        borderColor: 'border/minimal',\n      },\n      regular: {\n        borderColor: 'border/regular',\n      },\n    },\n    orientation: {\n      horizontal: {\n        borderTopWidth: 'var(--separator-thickness)',\n        width: '100%',\n      },\n      vertical: {\n        borderInlineStartWidth: 'var(--separator-thickness)',\n        minHeight: '20',\n      },\n    },\n    size: {\n      '1': {\n        '--separator-thickness': '1px',\n      },\n      '2': {\n        '--separator-thickness': '2px',\n      },\n    },\n  },\n  defaultVariants: {\n    colorVariant: 'regular',\n    size: '1',\n    orientation: 'horizontal',\n  },\n});\n\nexport default separatorRecipe;\n"],"mappings":";;AAEA,IAAM,kBAAkB,aAAa;CACnC,WAAW;CACX,MAAM;EACJ,SAAS;EACT,aAAa;CACf;CACA,UAAU;EACR,SAAS,CAAC;EAEV,cAAc;GACZ,SAAS,EACP,aAAa,iBACf;GACA,SAAS,EACP,aAAa,iBACf;EACF;EACA,aAAa;GACX,YAAY;IACV,gBAAgB;IAChB,OAAO;GACT;GACA,UAAU;IACR,wBAAwB;IACxB,WAAW;GACb;EACF;EACA,MAAM;GACJ,KAAK,EACH,yBAAyB,MAC3B;GACA,KAAK,EACH,yBAAyB,MAC3B;EACF;CACF;CACA,iBAAiB;EACf,cAAc;EACd,MAAM;EACN,aAAa;CACf;AACF,CAAC"}