@bitrise/bitkit-v2 0.3.414 → 0.3.416

package/dist/components/BitkitPageSidebar/BitkitPageSidebar.js

@@ -0,0 +1,263 @@
+import { withSubComponents } from "../../utilities/withSubComponents.js";
+import IconChevronLeft from "../../icons/IconChevronLeft.js";
+import BitkitControlButton from "../BitkitControlButton/BitkitControlButton.js";
+import BitkitGroupHeading from "../BitkitGroupHeading/BitkitGroupHeading.js";
+import BitkitOverflowTooltip from "../BitkitOverflowTooltip/BitkitOverflowTooltip.js";
+import useIsTruncated from "../../utilities/useIsTruncated.js";
+import { Box } from "@chakra-ui/react/box";
+import { chakra, useSlotRecipe } from "@chakra-ui/react/styled-system";
+import { forwardRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Separator } from "@chakra-ui/react/separator";
+import { Text } from "@chakra-ui/react/text";
+//#region lib/components/BitkitPageSidebar/BitkitPageSidebar.tsx
+var showAtDesktop = { display: {
+	base: "none",
+	tablet: "block"
+} };
+var showAtMobile = { display: {
+	base: "block",
+	tablet: "none"
+} };
+/**
+* Page-level navigation sidebar. It expects three children, in this order:
+*
+* ```tsx
+* <BitkitPageSidebar>
+*   <BitkitPageSidebar.Title>Title</BitkitPageSidebar.Title>
+*   <BitkitPageSidebar.Body>
+*     <BitkitPageSidebar.Item icon={IconWorkflow}>Workflows</BitkitPageSidebar.Item>
+*   </BitkitPageSidebar.Body>
+*   <BitkitPageSidebar.Footer>…</BitkitPageSidebar.Footer>
+* </BitkitPageSidebar>
+* ```
+*
+* `Title` and `Footer` are optional. The sidebar scrolls as a single block: when the navigation is
+* taller than the viewport the whole thing — footer included — grows and scrolls with the page,
+* which is why `Body` keeps a minimum gap above the footer so the two blocks never touch.
+*
+* The `<nav>` carries a default `aria-label` so it is not announced as an unnamed landmark. A page
+* with more than one sidebar should name each one — pass your own `aria-label` (or
+* `aria-labelledby`), which overrides the default.
+*
+* It stands at least viewport-tall by default. An embedded panel that should size to its content
+* opts out with `minHeight="auto"`.
+*
+* Below the `tablet` breakpoint it switches to the mobile design on its own — full width, 48px
+* rows, larger icons and labels, a squared-off selection edge. There is no prop for it: a sidebar
+* that narrow is a sidebar filling a phone.
+*/
+var BitkitPageSidebar = forwardRef((props, ref) => {
+	const { children, ...rest } = props;
+	const styles = useSlotRecipe({ key: "pageSidebar" })();
+	return /* @__PURE__ */ jsx(Box, {
+		ref,
+		"aria-label": "Page navigation",
+		asChild: true,
+		css: styles.root,
+		...rest,
+		children: /* @__PURE__ */ jsx("nav", { children })
+	});
+});
+BitkitPageSidebar.displayName = "BitkitPageSidebar";
+var BitkitPageSidebarItem = forwardRef((props, ref) => {
+	const { badge, children, icon: Icon, selected, state, suffixIcon: SuffixIcon, ...rest } = props;
+	const isDisabled = state === "disabled";
+	const isSelected = selected === true && !isDisabled;
+	const styles = useSlotRecipe({ key: "pageSidebar" })({
+		isDisabled,
+		selected: isSelected
+	});
+	const VisibleSuffixIcon = isSelected || isDisabled ? void 0 : SuffixIcon;
+	const { isTruncated, ref: labelRef } = useIsTruncated(children);
+	const itemContent = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		/* @__PURE__ */ jsxs(Box, {
+			as: "span",
+			css: styles.contentBlock,
+			children: [Icon && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Icon, {
+				css: [styles.itemIcon, showAtDesktop],
+				size: "16"
+			}), /* @__PURE__ */ jsx(Icon, {
+				css: [styles.itemIcon, showAtMobile],
+				size: "24"
+			})] }), /* @__PURE__ */ jsx(Text, {
+				as: "span",
+				css: styles.itemLabel,
+				ref: labelRef,
+				children
+			})]
+		}),
+		badge,
+		VisibleSuffixIcon && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(VisibleSuffixIcon, {
+			css: [styles.suffixIcon, showAtDesktop],
+			size: "16"
+		}), /* @__PURE__ */ jsx(VisibleSuffixIcon, {
+			css: [styles.suffixIcon, showAtMobile],
+			size: "24"
+		})] }),
+		isSelected && /* @__PURE__ */ jsx(Box, {
+			as: "span",
+			css: styles.selectionMarker
+		})
+	] });
+	const withTooltip = (row) => /* @__PURE__ */ jsx(BitkitOverflowTooltip, {
+		disabled: !isTruncated,
+		text: children,
+		children: row
+	});
+	if (rest.href !== void 0) {
+		const { className, href, onClick, onKeyDown, ...linkRest } = rest;
+		const handleClick = isDisabled ? (event) => {
+			event.preventDefault();
+			event.stopPropagation();
+		} : onClick;
+		const handleKeyDown = isDisabled ? (event) => {
+			if (event.key === "Enter" || event.key === " ") {
+				event.preventDefault();
+				event.stopPropagation();
+			}
+		} : onKeyDown;
+		return withTooltip(/* @__PURE__ */ jsx(chakra.a, {
+			ref,
+			...linkRest,
+			"aria-current": isSelected ? "page" : void 0,
+			"aria-disabled": isDisabled || void 0,
+			className: className ? `group ${className}` : "group",
+			css: styles.item,
+			href: isDisabled ? void 0 : href,
+			onClick: handleClick,
+			onKeyDown: handleKeyDown,
+			children: itemContent
+		}));
+	}
+	const { className, href: _href, ...buttonRest } = rest;
+	return withTooltip(/* @__PURE__ */ jsx(chakra.button, {
+		ref,
+		...buttonRest,
+		"aria-current": isSelected ? "page" : void 0,
+		className: className ? `group ${className}` : "group",
+		css: styles.item,
+		disabled: isDisabled,
+		type: "button",
+		children: itemContent
+	}));
+});
+BitkitPageSidebarItem.displayName = "BitkitPageSidebarItem";
+var BitkitPageSidebarTitle = forwardRef((props, ref) => {
+	const { backHref, backLabel = "Back", children, onBackClick, ...rest } = props;
+	const hasBack = backHref !== void 0 || onBackClick !== void 0;
+	const styles = useSlotRecipe({ key: "pageSidebar" })({ hasBack });
+	return /* @__PURE__ */ jsx(Box, {
+		ref,
+		css: styles.title,
+		...rest,
+		children: /* @__PURE__ */ jsxs(Box, {
+			css: styles.titleBlock,
+			children: [hasBack && (backHref !== void 0 ? /* @__PURE__ */ jsx(BitkitControlButton, {
+				href: backHref,
+				icon: IconChevronLeft,
+				label: backLabel,
+				size: "xs",
+				tooltipProps: { placement: "right" }
+			}) : /* @__PURE__ */ jsx(BitkitControlButton, {
+				icon: IconChevronLeft,
+				label: backLabel,
+				onClick: onBackClick,
+				size: "xs",
+				tooltipProps: { placement: "right" }
+			})), /* @__PURE__ */ jsx(Text, {
+				as: "span",
+				css: styles.titleText,
+				children
+			})]
+		})
+	});
+});
+BitkitPageSidebarTitle.displayName = "BitkitPageSidebarTitle";
+/**
+* Holds the navigation items. It absorbs the space left between `Title` and `Footer`, so the footer
+* sits at the bottom of the viewport on a short navigation, and keeps a minimum gap above the
+* footer so the two blocks stay visually separate however long the list gets.
+*/
+var BitkitPageSidebarBody = forwardRef((props, ref) => {
+	const { children, ...rest } = props;
+	const styles = useSlotRecipe({ key: "pageSidebar" })();
+	return /* @__PURE__ */ jsx(Box, {
+		ref,
+		css: styles.body,
+		...rest,
+		children
+	});
+});
+BitkitPageSidebarBody.displayName = "BitkitPageSidebarBody";
+var BitkitPageSidebarFooter = forwardRef((props, ref) => {
+	const { children, ...rest } = props;
+	const styles = useSlotRecipe({ key: "pageSidebar" })();
+	return /* @__PURE__ */ jsx(Box, {
+		ref,
+		css: styles.footer,
+		...rest,
+		children
+	});
+});
+BitkitPageSidebarFooter.displayName = "BitkitPageSidebarFooter";
+var BitkitPageSidebarProject = forwardRef((props, ref) => {
+	const { label, value, ...rest } = props;
+	const styles = useSlotRecipe({ key: "pageSidebar" })();
+	const { isTruncated, ref: valueRef } = useIsTruncated(value);
+	return /* @__PURE__ */ jsxs(Box, {
+		ref,
+		css: styles.project,
+		...rest,
+		children: [/* @__PURE__ */ jsx(Text, {
+			as: "span",
+			css: styles.projectLabel,
+			children: label
+		}), /* @__PURE__ */ jsx(BitkitOverflowTooltip, {
+			disabled: !isTruncated,
+			text: value,
+			children: /* @__PURE__ */ jsx(Box, {
+				css: styles.projectValueWrapper,
+				children: /* @__PURE__ */ jsx(Text, {
+					as: "span",
+					css: styles.projectValue,
+					ref: valueRef,
+					children: value
+				})
+			})
+		})]
+	});
+});
+BitkitPageSidebarProject.displayName = "BitkitPageSidebarProject";
+var BitkitPageSidebarGroupHeading = forwardRef((props, ref) => {
+	return /* @__PURE__ */ jsx(BitkitGroupHeading, {
+		ref,
+		paddingBlockEnd: "8",
+		paddingBlockStart: "16",
+		paddingInline: "24",
+		...props
+	});
+});
+BitkitPageSidebarGroupHeading.displayName = "BitkitPageSidebarGroupHeading";
+var BitkitPageSidebarDivider = forwardRef((props, ref) => {
+	const styles = useSlotRecipe({ key: "pageSidebar" })();
+	return /* @__PURE__ */ jsx(Separator, {
+		ref,
+		css: styles.divider,
+		...props
+	});
+});
+BitkitPageSidebarDivider.displayName = "BitkitPageSidebarDivider";
+var BitkitPageSidebar_default = withSubComponents(BitkitPageSidebar, {
+	Body: BitkitPageSidebarBody,
+	Divider: BitkitPageSidebarDivider,
+	Footer: BitkitPageSidebarFooter,
+	GroupHeading: BitkitPageSidebarGroupHeading,
+	Item: BitkitPageSidebarItem,
+	Project: BitkitPageSidebarProject,
+	Title: BitkitPageSidebarTitle
+});
+//#endregion
+export { BitkitPageSidebar_default as default };
+
+//# sourceMappingURL=BitkitPageSidebar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BitkitPageSidebar.js","names":[],"sources":["../../../lib/components/BitkitPageSidebar/BitkitPageSidebar.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { Separator, type SeparatorProps } from '@chakra-ui/react/separator';\nimport { chakra, type HTMLChakraProps, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { forwardRef, type KeyboardEvent, type MouseEvent, type ReactNode, type Ref } from 'react';\n\nimport { type BitkitIconComponent } from '../../icons';\nimport IconChevronLeft from '../../icons/IconChevronLeft';\nimport useIsTruncated from '../../utilities/useIsTruncated';\nimport { withSubComponents } from '../../utilities/withSubComponents';\nimport BitkitControlButton from '../BitkitControlButton/BitkitControlButton';\nimport BitkitGroupHeading, { type BitkitGroupHeadingProps } from '../BitkitGroupHeading/BitkitGroupHeading';\nimport BitkitOverflowTooltip from '../BitkitOverflowTooltip/BitkitOverflowTooltip';\n\n// The 16 and 24 icons are separate drawings, not one scaled to two sizes, so the breakpoint swap\n// cannot live in the recipe — both are rendered and one is hidden. A `useBreakpointValue` would\n// render a single icon, but it only re-reads on mount: resize a live page across `tablet` and the\n// row resizes underneath an icon that keeps its old size.\nconst showAtDesktop = { display: { base: 'none', tablet: 'block' } };\nconst showAtMobile = { display: { base: 'block', tablet: 'none' } };\n\n// ----- BitkitPageSidebar (Root) -----\n\nexport interface BitkitPageSidebarProps extends BoxProps {\n  children: ReactNode;\n}\n\n/**\n * Page-level navigation sidebar. It expects three children, in this order:\n *\n * ```tsx\n * <BitkitPageSidebar>\n *   <BitkitPageSidebar.Title>Title</BitkitPageSidebar.Title>\n *   <BitkitPageSidebar.Body>\n *     <BitkitPageSidebar.Item icon={IconWorkflow}>Workflows</BitkitPageSidebar.Item>\n *   </BitkitPageSidebar.Body>\n *   <BitkitPageSidebar.Footer>…</BitkitPageSidebar.Footer>\n * </BitkitPageSidebar>\n * ```\n *\n * `Title` and `Footer` are optional. The sidebar scrolls as a single block: when the navigation is\n * taller than the viewport the whole thing — footer included — grows and scrolls with the page,\n * which is why `Body` keeps a minimum gap above the footer so the two blocks never touch.\n *\n * The `<nav>` carries a default `aria-label` so it is not announced as an unnamed landmark. A page\n * with more than one sidebar should name each one — pass your own `aria-label` (or\n * `aria-labelledby`), which overrides the default.\n *\n * It stands at least viewport-tall by default. An embedded panel that should size to its content\n * opts out with `minHeight=\"auto\"`.\n *\n * Below the `tablet` breakpoint it switches to the mobile design on its own — full width, 48px\n * rows, larger icons and labels, a squared-off selection edge. There is no prop for it: a sidebar\n * that narrow is a sidebar filling a phone.\n */\nconst BitkitPageSidebar = forwardRef<HTMLElement, BitkitPageSidebarProps>((props, ref) => {\n  const { children, ...rest } = props;\n\n  const recipe = useSlotRecipe({ key: 'pageSidebar' });\n  const styles = recipe();\n\n  return (\n    <Box ref={ref} aria-label=\"Page navigation\" asChild css={styles.root} {...rest}>\n      <nav>{children}</nav>\n    </Box>\n  );\n});\n\nBitkitPageSidebar.displayName = 'BitkitPageSidebar';\n\n// ----- BitkitPageSidebar.Item -----\n\ninterface BitkitPageSidebarItemCommonProps {\n  badge?: ReactNode;\n  /**\n   * The item's label. Typed as a string rather than `ReactNode` because the row truncates it with\n   * an ellipsis, and the overflow tooltip needs the full text to reveal.\n   */\n  children: string;\n  icon?: BitkitIconComponent;\n  /**\n   * Marks the item as the current page. Mutually exclusive with `state=\"disabled\"` — you cannot be\n   * on a page whose nav item is unavailable — but the two are not type-checked against each other:\n   * the combination only ever arrives from a computed `selected`, which no union can catch, and\n   * checking it would break the ordinary `selected={item.id === currentId}` mapping. If both do\n   * turn up, disabled wins, since that is the one of the two the design actually defines.\n   */\n  selected?: boolean;\n  state?: 'disabled';\n  suffixIcon?: BitkitIconComponent;\n}\n\ninterface BitkitPageSidebarItemLinkProps\n  extends Omit<HTMLChakraProps<'a'>, 'children'>, BitkitPageSidebarItemCommonProps {\n  href: string;\n}\n\ninterface BitkitPageSidebarItemButtonProps\n  extends Omit<HTMLChakraProps<'button'>, 'children' | 'disabled'>, BitkitPageSidebarItemCommonProps {\n  href?: never;\n}\n\nexport type BitkitPageSidebarItemProps = BitkitPageSidebarItemButtonProps | BitkitPageSidebarItemLinkProps;\n\nconst BitkitPageSidebarItem = forwardRef<HTMLButtonElement | HTMLAnchorElement, BitkitPageSidebarItemProps>(\n  (props, ref) => {\n    const { badge, children, icon: Icon, selected, state, suffixIcon: SuffixIcon, ...rest } = props;\n\n    const isDisabled = state === 'disabled';\n    // `selected` and `state=\"disabled\"` are not checked against each other in the types, so this is\n    // the single place the overlap is resolved: disabled wins, and the two recipe variants can never\n    // both claim the same slot.\n    const isSelected = selected === true && !isDisabled;\n\n    const recipe = useSlotRecipe({ key: 'pageSidebar' });\n    const styles = recipe({ isDisabled, selected: isSelected });\n\n    // The design gives neither a selected row nor a disabled one a trailing icon — the desktop\n    // (`20014:6498`, `20014:6494`) and mobile (`9221:4417`) items drop it in those states.\n    const VisibleSuffixIcon = isSelected || isDisabled ? undefined : SuffixIcon;\n\n    const { isTruncated, ref: labelRef } = useIsTruncated<HTMLSpanElement>(children);\n\n    const itemContent = (\n      <>\n        {/* `span`, not the default `div`: in button mode these sit inside a `<button>`, whose\n            content model allows phrasing content only. */}\n        <Box as=\"span\" css={styles.contentBlock}>\n          {Icon && (\n            <>\n              <Icon css={[styles.itemIcon, showAtDesktop]} size=\"16\" />\n              <Icon css={[styles.itemIcon, showAtMobile]} size=\"24\" />\n            </>\n          )}\n          <Text as=\"span\" css={styles.itemLabel} ref={labelRef}>\n            {children}\n          </Text>\n        </Box>\n        {badge}\n        {VisibleSuffixIcon && (\n          <>\n            <VisibleSuffixIcon css={[styles.suffixIcon, showAtDesktop]} size=\"16\" />\n            <VisibleSuffixIcon css={[styles.suffixIcon, showAtMobile]} size=\"24\" />\n          </>\n        )}\n        {isSelected && <Box as=\"span\" css={styles.selectionMarker} />}\n      </>\n    );\n\n    // The overflow tooltip anchors to the row itself, which is the focusable element: anchored to an\n    // inner node it would only ever open on hover, leaving keyboard users unable to read a truncated\n    // label. `Tooltip.Trigger` renders `asChild` and composes refs, so the consumer's forwarded ref\n    // survives, and the ref measuring the truncation sits on the label further in.\n    const withTooltip = (row: ReactNode) => (\n      <BitkitOverflowTooltip disabled={!isTruncated} text={children}>\n        {row}\n      </BitkitOverflowTooltip>\n    );\n\n    // `chakra.a` / `chakra.button` rather than a named primitive: the item carries its own slot recipe,\n    // and Chakra's `Button`/`Link` would layer their own recipe styles on top of it.\n    if (rest.href !== undefined) {\n      const { className, href, onClick, onKeyDown, ...linkRest } = rest;\n      const handleClick = isDisabled\n        ? (event: MouseEvent<HTMLAnchorElement>) => {\n            event.preventDefault();\n            event.stopPropagation();\n          }\n        : onClick;\n      const handleKeyDown = isDisabled\n        ? (event: KeyboardEvent<HTMLAnchorElement>) => {\n            if (event.key === 'Enter' || event.key === ' ') {\n              event.preventDefault();\n              event.stopPropagation();\n            }\n          }\n        : onKeyDown;\n\n      return withTooltip(\n        <chakra.a\n          ref={ref as Ref<HTMLAnchorElement>}\n          {...linkRest}\n          aria-current={isSelected ? 'page' : undefined}\n          aria-disabled={isDisabled || undefined}\n          className={className ? `group ${className}` : 'group'}\n          css={styles.item}\n          // Dropping the attribute is what actually disables the link, the way `BitkitLink` and\n          // `BitkitControlButton` do it. The handlers below only block `click` and `Enter`/`Space`;\n          // a middle click fires `auxclick`, and \"Open link in new tab\" never reaches the page at\n          // all, so both would still navigate while an `href` is there to follow.\n          href={isDisabled ? undefined : href}\n          onClick={handleClick}\n          onKeyDown={handleKeyDown}\n        >\n          {itemContent}\n        </chakra.a>,\n      );\n    }\n\n    const { className, href: _href, ...buttonRest } = rest;\n\n    return withTooltip(\n      <chakra.button\n        ref={ref as Ref<HTMLButtonElement>}\n        {...buttonRest}\n        aria-current={isSelected ? 'page' : undefined}\n        className={className ? `group ${className}` : 'group'}\n        css={styles.item}\n        disabled={isDisabled}\n        type=\"button\"\n      >\n        {itemContent}\n      </chakra.button>,\n    );\n  },\n);\n\nBitkitPageSidebarItem.displayName = 'BitkitPageSidebarItem';\n\n// ----- BitkitPageSidebar.Title -----\n\ninterface BitkitPageSidebarTitleCommonProps extends BoxProps {\n  backLabel?: string;\n  children: ReactNode;\n}\n\ninterface BitkitPageSidebarTitleLinkProps extends BitkitPageSidebarTitleCommonProps {\n  backHref: string;\n  onBackClick?: never;\n}\n\ninterface BitkitPageSidebarTitleButtonProps extends BitkitPageSidebarTitleCommonProps {\n  backHref?: never;\n  onBackClick: () => void;\n}\n\ninterface BitkitPageSidebarTitlePlainProps extends BitkitPageSidebarTitleCommonProps {\n  backHref?: never;\n  onBackClick?: never;\n}\n\nexport type BitkitPageSidebarTitleProps =\n  | BitkitPageSidebarTitleButtonProps\n  | BitkitPageSidebarTitleLinkProps\n  | BitkitPageSidebarTitlePlainProps;\n\nconst BitkitPageSidebarTitle = forwardRef<HTMLDivElement, BitkitPageSidebarTitleProps>((props, ref) => {\n  const { backHref, backLabel = 'Back', children, onBackClick, ...rest } = props;\n\n  const hasBack = backHref !== undefined || onBackClick !== undefined;\n\n  const recipe = useSlotRecipe({ key: 'pageSidebar' });\n  const styles = recipe({ hasBack });\n\n  return (\n    <Box ref={ref} css={styles.title} {...rest}>\n      <Box css={styles.titleBlock}>\n        {/* The label tooltip opens to the right. Its default `top` has nowhere to go here — the\n            button sits at the very top of the sidebar, so the tooltip jams against the viewport\n            edge and covers the header instead of flipping. */}\n        {hasBack &&\n          (backHref !== undefined ? (\n            <BitkitControlButton\n              href={backHref}\n              icon={IconChevronLeft}\n              label={backLabel}\n              size=\"xs\"\n              tooltipProps={{ placement: 'right' }}\n            />\n          ) : (\n            <BitkitControlButton\n              icon={IconChevronLeft}\n              label={backLabel}\n              onClick={onBackClick}\n              size=\"xs\"\n              tooltipProps={{ placement: 'right' }}\n            />\n          ))}\n        <Text as=\"span\" css={styles.titleText}>\n          {children}\n        </Text>\n      </Box>\n    </Box>\n  );\n});\n\nBitkitPageSidebarTitle.displayName = 'BitkitPageSidebarTitle';\n\n// ----- BitkitPageSidebar.Body -----\n\nexport interface BitkitPageSidebarBodyProps extends BoxProps {\n  children: ReactNode;\n}\n\n/**\n * Holds the navigation items. It absorbs the space left between `Title` and `Footer`, so the footer\n * sits at the bottom of the viewport on a short navigation, and keeps a minimum gap above the\n * footer so the two blocks stay visually separate however long the list gets.\n */\nconst BitkitPageSidebarBody = forwardRef<HTMLDivElement, BitkitPageSidebarBodyProps>((props, ref) => {\n  const { children, ...rest } = props;\n\n  const recipe = useSlotRecipe({ key: 'pageSidebar' });\n  const styles = recipe();\n\n  return (\n    <Box ref={ref} css={styles.body} {...rest}>\n      {children}\n    </Box>\n  );\n});\n\nBitkitPageSidebarBody.displayName = 'BitkitPageSidebarBody';\n\n// ----- BitkitPageSidebar.Footer -----\n\nexport interface BitkitPageSidebarFooterProps extends BoxProps {\n  children: ReactNode;\n}\n\nconst BitkitPageSidebarFooter = forwardRef<HTMLDivElement, BitkitPageSidebarFooterProps>((props, ref) => {\n  const { children, ...rest } = props;\n\n  const recipe = useSlotRecipe({ key: 'pageSidebar' });\n  const styles = recipe();\n\n  return (\n    <Box ref={ref} css={styles.footer} {...rest}>\n      {children}\n    </Box>\n  );\n});\n\nBitkitPageSidebarFooter.displayName = 'BitkitPageSidebarFooter';\n\n// ----- BitkitPageSidebar.Project -----\n\nexport interface BitkitPageSidebarProjectProps extends BoxProps {\n  label: string;\n  value: string;\n}\n\nconst BitkitPageSidebarProject = forwardRef<HTMLDivElement, BitkitPageSidebarProjectProps>((props, ref) => {\n  const { label, value, ...rest } = props;\n\n  const recipe = useSlotRecipe({ key: 'pageSidebar' });\n  const styles = recipe();\n\n  const { isTruncated, ref: valueRef } = useIsTruncated<HTMLSpanElement>(value);\n\n  return (\n    <Box ref={ref} css={styles.project} {...rest}>\n      <Text as=\"span\" css={styles.projectLabel}>\n        {label}\n      </Text>\n      {/* Wrapper for the same reason as in Item: the trigger cannot be the element being measured. */}\n      <BitkitOverflowTooltip disabled={!isTruncated} text={value}>\n        <Box css={styles.projectValueWrapper}>\n          <Text as=\"span\" css={styles.projectValue} ref={valueRef}>\n            {value}\n          </Text>\n        </Box>\n      </BitkitOverflowTooltip>\n    </Box>\n  );\n});\n\nBitkitPageSidebarProject.displayName = 'BitkitPageSidebarProject';\n\n// ----- BitkitPageSidebar.GroupHeading -----\n\nexport type BitkitPageSidebarGroupHeadingProps = BitkitGroupHeadingProps;\n\nconst BitkitPageSidebarGroupHeading = forwardRef<HTMLDivElement, BitkitPageSidebarGroupHeadingProps>((props, ref) => {\n  return <BitkitGroupHeading ref={ref} paddingBlockEnd=\"8\" paddingBlockStart=\"16\" paddingInline=\"24\" {...props} />;\n});\n\nBitkitPageSidebarGroupHeading.displayName = 'BitkitPageSidebarGroupHeading';\n\n// ----- BitkitPageSidebar.Divider -----\n\nexport type BitkitPageSidebarDividerProps = SeparatorProps;\n\nconst BitkitPageSidebarDivider = forwardRef<HTMLDivElement, BitkitPageSidebarDividerProps>((props, ref) => {\n  const recipe = useSlotRecipe({ key: 'pageSidebar' });\n  const styles = recipe();\n\n  return <Separator ref={ref} css={styles.divider} {...props} />;\n});\n\nBitkitPageSidebarDivider.displayName = 'BitkitPageSidebarDivider';\n\nexport default withSubComponents(BitkitPageSidebar, {\n  Body: BitkitPageSidebarBody,\n  Divider: BitkitPageSidebarDivider,\n  Footer: BitkitPageSidebarFooter,\n  GroupHeading: BitkitPageSidebarGroupHeading,\n  Item: BitkitPageSidebarItem,\n  Project: BitkitPageSidebarProject,\n  Title: BitkitPageSidebarTitle,\n});\n"],"mappings":"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"}

package/dist/components/index.d.ts

@@ -49,6 +49,8 @@ export { default as BitkitNumberInput, type BitkitNumberInputProps } from './Bit
 export { default as BitkitOverflowContent, type BitkitOverflowContentProps, } from './BitkitOverflowContent/BitkitOverflowContent';
 export { default as BitkitOverflowTooltip, type BitkitOverflowTooltipProps, } from './BitkitOverflowTooltip/BitkitOverflowTooltip';
 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 BitkitPageSidebarFooterProps, type BitkitPageSidebarGroupHeadingProps, type BitkitPageSidebarItemProps, type BitkitPageSidebarProjectProps, type BitkitPageSidebarProps, type BitkitPageSidebarTitleProps, } from './BitkitPageSidebar/BitkitPageSidebar';
 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';
@@ -65,7 +67,6 @@ export { default as BitkitSelectableTag, type BitkitSelectableTagItemProps, type
 export { default as BitkitSelectMenu, type BitkitSelectMenuProps } from './BitkitSelectMenu/BitkitSelectMenu';
 export { default as BitkitSelectMenuAction, type BitkitSelectMenuActionProps, } from './BitkitSelectMenu/BitkitSelectMenuAction';
 export { default as BitkitSettingsCard, type BitkitSettingsCardContentProps, type BitkitSettingsCardProps, type BitkitSettingsCardStatusProps, } from './BitkitSettingsCard/BitkitSettingsCard';
-export { default as BitkitSidebar, type BitkitSidebarFooterProps, type BitkitSidebarGroupHeadingProps, type BitkitSidebarItemProps, type BitkitSidebarProjectProps, type BitkitSidebarProps, type BitkitSidebarTitleProps, } from './BitkitSidebar/BitkitSidebar';
 export { default as BitkitSkeletonGroup, type BitkitSkeletonGroupProps, } from './BitkitSkeletonGroup/BitkitSkeletonGroup';
 export { default as BitkitSpinner, type BitkitSpinnerProps } from './BitkitSpinner/BitkitSpinner';
 export { default as BitkitSplitButton, type BitkitSplitButtonProps } from './BitkitSplitButton/BitkitSplitButton';

package/dist/main.js

@@ -347,6 +347,8 @@ import BitkitNumberInput from "./components/BitkitNumberInput/BitkitNumberInput.
 import BitkitOverflowContent from "./components/BitkitOverflowContent/BitkitOverflowContent.js";
 import BitkitOverflowTooltip from "./components/BitkitOverflowTooltip/BitkitOverflowTooltip.js";
 import BitkitPageFooter_default from "./components/BitkitPageFooter/BitkitPageFooter.js";
+import BitkitPageHeader from "./components/BitkitPageHeader/BitkitPageHeader.js";
+import BitkitPageSidebar_default from "./components/BitkitPageSidebar/BitkitPageSidebar.js";
 import BitkitPagination from "./components/BitkitPagination/BitkitPagination.js";
 import BitkitPaginationLoadMore from "./components/BitkitPaginationLoadMore/BitkitPaginationLoadMore.js";
 import BitkitPopover from "./components/BitkitPopover/BitkitPopover.js";
@@ -362,7 +364,6 @@ import BitkitSegmentedControl_default from "./components/BitkitSegmentedControl/
 import BitkitSelect_default from "./components/BitkitSelect/BitkitSelect.js";
 import BitkitSelectableTag_default from "./components/BitkitSelectableTag/BitkitSelectableTag.js";
 import BitkitSettingsCard_default from "./components/BitkitSettingsCard/BitkitSettingsCard.js";
-import BitkitSidebar_default from "./components/BitkitSidebar/BitkitSidebar.js";
 import BitkitSkeletonGroup from "./components/BitkitSkeletonGroup/BitkitSkeletonGroup.js";
 import BitkitSpinner from "./components/BitkitSpinner/BitkitSpinner.js";
 import BitkitSplitButton_default from "./components/BitkitSplitButton/BitkitSplitButton.js";
@@ -381,4 +382,4 @@ import BitkitTreeView, { createTreeCollection } from "./components/BitkitTreeVie
 import useResponsive, { ResponsiveProvider } from "./hooks/useResponsive.js";
 import bitkitTheme from "./theme/index.js";
 import Provider from "./providers/BitkitProvider.js";
-export { BitkitAccordion_default as BitkitAccordion, BitkitActionBar, BitkitActionMenu_default as BitkitActionMenu, BitkitAlert, BitkitAvatar, BitkitBadge, BitkitBreadcrumb, BitkitButton, BitkitCalendar, BitkitCheckbox, BitkitCheckboxGroup, BitkitCloseButton, BitkitCodeSnippet, BitkitCollapsible, BitkitColorButton, BitkitCombobox_default as BitkitCombobox, BitkitControlButton, BitkitDataWidget, BitkitDatePicker, BitkitDefinitionTooltip, BitkitDialog_default as BitkitDialog, BitkitDraggableCard, BitkitDrawer, BitkitEmptyState, BitkitExpandableCard, BitkitField, BitkitFileInput, BitkitFormDialog_default as BitkitFormDialog, BitkitGroupHeading, BitkitHeading, BitkitIconButton, BitkitInlineLoading, BitkitLabel, BitkitLabelTooltip, BitkitLabeledData, BitkitLightbox, BitkitLink, BitkitLinkButton, BitkitList_default as BitkitList, BitkitMarkdown, BitkitMarkdownCard, BitkitMultiselect_default as BitkitMultiselect, BitkitMultiselectMenu, BitkitNativeSelect, BitkitNoteCard, BitkitNumberInput, BitkitOverflowContent, BitkitOverflowTooltip, BitkitPageFooter_default as BitkitPageFooter, 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, BitkitSidebar_default as BitkitSidebar, BitkitSkeletonGroup, BitkitSpinner, BitkitSplitButton_default as BitkitSplitButton, BitkitStat, BitkitSteps_default as BitkitSteps, BitkitStepsCard_default as BitkitStepsCard, BitkitStepsDialog_default as BitkitStepsDialog, BitkitSwitch, BitkitTable, BitkitTableCard, BitkitTabs, BitkitTag, BitkitTagsInput, BitkitTextArea, BitkitTextInput, BitkitToggleButton, BitkitTooltip, BitkitTour, BitkitTreeView, IconAbortCircle, IconAbortCircleFilled, IconAddons, IconAgent, IconAnchor, IconAndroid, IconApp, IconAppSettings, IconAppStore, IconAppStoreColor, IconApple, IconArchive, IconArchiveDelete, IconArchiveRestore, IconArrowBackAndDown, IconArrowBackAndUp, IconArrowDown, IconArrowForwardAndDown, IconArrowForwardAndUp, IconArrowLeft, IconArrowNortheast, IconArrowNorthwest, IconArrowRight, IconArrowUp, IconArrowsHorizontal, IconArrowsVertical, IconAutomation, IconAws, IconAwsColor, IconBadge3RdParty, IconBadgeBitrise, IconBadgeUpgrade, IconBadgeVersionOk, IconBazel, IconBell, IconBitbot, IconBitbotError, IconBitbucket, IconBitbucketColor, IconBitbucketNeutral, IconBitbucketWhite, IconBlockCircle, IconBook, IconBoxArrowDown, IconBoxDot, IconBoxLinesOverflow, IconBoxLinesWrap, IconBranch, IconBrowserstackColor, IconBug, IconBuild, IconBuildCache, IconBuildCacheFilled, IconBuildEnvSetup, IconBuildHub, IconBuildHubFilled, IconCalendar, IconChangePlan, IconChat, IconCheck, IconCheckCircle, IconCheckCircleFilled, IconChevronDown, IconChevronLeft, IconChevronRight, IconChevronUp, IconCi, IconCiFilled, IconCircle, IconCircleDashed, IconCircleHalfFilled, IconClaude, IconClaudeColor, IconClock, IconCode, IconCodePush, IconCodeSigning, IconCoffee, IconCommit, IconConfigure, IconConnectedAccounts, IconContainer, IconCopilot, IconCopy, IconCordova, IconCpu, IconCreditcard, IconCredits, IconCross, IconCrossCircle, IconCrossCircleFilled, IconCrown, IconCursor, IconCycle, IconDashboard, IconDashboardFilled, IconDeployment, IconDetails, IconDoc, IconDollar, IconDot, IconDotnet, IconDotnetColor, IconDotnetText, IconDotnetTextColor, IconDoubleCircle, IconDownload, IconDragHandle, IconEc2Ami, IconEnterprise, IconErrorCircle, IconErrorCircleFilled, IconExpand, IconExtraBuildCapacity, IconEye, IconEyeSlash, IconFastlane, IconFileDoc, IconFilePdf, IconFilePlist, IconFileYml, IconFileZip, IconFilter, IconFlag, IconFlutter, IconFolder, IconFullscreen, IconFullscreenExit, IconGauge, IconGit, IconGithub, IconGitlab, IconGitlabColor, IconGitlabWhite, IconGlobe, IconGo, IconGoogleColor, IconGooglePlay, IconGooglePlayColor, IconGradle, IconGroup, IconHashtag, IconHeadset, IconHeart, IconHistory, IconHourglass, IconImage, IconInfoCircle, IconInfoCircleFilled, IconInsights, IconInsightsFilled, IconInstall, IconInteraction, IconInvoice, IconIonic, IconJapanese, IconJava, IconJavaColor, IconJavaDuke, IconJavaDukeColor, IconKey, IconKiroColor, IconKotlin, IconKotlinColor, IconKotlinWhite, IconLaptop, IconLaunchdarkly, IconLegacyApp, IconLightbulb, IconLink, IconLinux, IconLock, IconLockOpen, IconLogin, IconLogout, IconMacos, IconMagicWand, IconMagnifier, IconMail, IconMcp, IconMedal, IconMemory, IconMenuGrid, IconMenuHamburger, IconMessage, IconMessageAlert, IconMessageQuestion, IconMicrophone, IconMinus, IconMinusCircle, IconMinusCircleFilled, IconMobile, IconMobileLandscape, IconMonitorChart, IconMoreHorizontal, IconMoreVertical, IconNews, IconNextjs, IconNodejs, IconOpenInNew, IconOther, IconOutsideContributor, IconOverview, IconPause, IconPencil, IconPeople, IconPercent, IconPerson, IconPersonWithDesk, 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, IconUpload, IconValidateShield, IconVideo, IconVsCode, IconWarning, IconWarningYellow, IconWebUi, IconWebhooks, IconWindsurf, IconWorkflow, IconWorkflowFlow, IconXTwitter, IconXamarin, IconXcode, ResponsiveProvider, bitkitIcon, bitkitTheme as bitriseTheme, createBitkitToast, createTreeCollection, dismissBitkitToast, rem, useBitkitTour, useResponsive, useStepsDialog };
+export { BitkitAccordion_default as BitkitAccordion, BitkitActionBar, BitkitActionMenu_default as BitkitActionMenu, BitkitAlert, BitkitAvatar, BitkitBadge, BitkitBreadcrumb, BitkitButton, BitkitCalendar, BitkitCheckbox, BitkitCheckboxGroup, BitkitCloseButton, BitkitCodeSnippet, BitkitCollapsible, BitkitColorButton, BitkitCombobox_default as BitkitCombobox, BitkitControlButton, BitkitDataWidget, BitkitDatePicker, BitkitDefinitionTooltip, BitkitDialog_default as BitkitDialog, BitkitDraggableCard, BitkitDrawer, BitkitEmptyState, BitkitExpandableCard, BitkitField, BitkitFileInput, BitkitFormDialog_default as BitkitFormDialog, BitkitGroupHeading, BitkitHeading, BitkitIconButton, BitkitInlineLoading, BitkitLabel, BitkitLabelTooltip, BitkitLabeledData, BitkitLightbox, BitkitLink, BitkitLinkButton, BitkitList_default as BitkitList, BitkitMarkdown, BitkitMarkdownCard, BitkitMultiselect_default as BitkitMultiselect, BitkitMultiselectMenu, BitkitNativeSelect, BitkitNoteCard, BitkitNumberInput, BitkitOverflowContent, BitkitOverflowTooltip, BitkitPageFooter_default as BitkitPageFooter, BitkitPageHeader, BitkitPageSidebar_default as BitkitPageSidebar, BitkitPagination, BitkitPaginationLoadMore, BitkitPopover, BitkitProgressBar, BitkitPromoBanner, Provider as BitkitProvider, BitkitRadio, BitkitRadioGroup, BitkitRibbon, BitkitSearchInput, BitkitSectionHeading, BitkitSegmentedControl_default as BitkitSegmentedControl, BitkitSelect_default as BitkitSelect, BitkitSelectMenu, BitkitSelectMenuAction, BitkitSelectableTag_default as BitkitSelectableTag, BitkitSettingsCard_default as BitkitSettingsCard, BitkitSkeletonGroup, BitkitSpinner, BitkitSplitButton_default as BitkitSplitButton, BitkitStat, BitkitSteps_default as BitkitSteps, BitkitStepsCard_default as BitkitStepsCard, BitkitStepsDialog_default as BitkitStepsDialog, BitkitSwitch, BitkitTable, BitkitTableCard, BitkitTabs, BitkitTag, BitkitTagsInput, BitkitTextArea, BitkitTextInput, BitkitToggleButton, BitkitTooltip, BitkitTour, BitkitTreeView, IconAbortCircle, IconAbortCircleFilled, IconAddons, IconAgent, IconAnchor, IconAndroid, IconApp, IconAppSettings, IconAppStore, IconAppStoreColor, IconApple, IconArchive, IconArchiveDelete, IconArchiveRestore, IconArrowBackAndDown, IconArrowBackAndUp, IconArrowDown, IconArrowForwardAndDown, IconArrowForwardAndUp, IconArrowLeft, IconArrowNortheast, IconArrowNorthwest, IconArrowRight, IconArrowUp, IconArrowsHorizontal, IconArrowsVertical, IconAutomation, IconAws, IconAwsColor, IconBadge3RdParty, IconBadgeBitrise, IconBadgeUpgrade, IconBadgeVersionOk, IconBazel, IconBell, IconBitbot, IconBitbotError, IconBitbucket, IconBitbucketColor, IconBitbucketNeutral, IconBitbucketWhite, IconBlockCircle, IconBook, IconBoxArrowDown, IconBoxDot, IconBoxLinesOverflow, IconBoxLinesWrap, IconBranch, IconBrowserstackColor, IconBug, IconBuild, IconBuildCache, IconBuildCacheFilled, IconBuildEnvSetup, IconBuildHub, IconBuildHubFilled, IconCalendar, IconChangePlan, IconChat, IconCheck, IconCheckCircle, IconCheckCircleFilled, IconChevronDown, IconChevronLeft, IconChevronRight, IconChevronUp, IconCi, IconCiFilled, IconCircle, IconCircleDashed, IconCircleHalfFilled, IconClaude, IconClaudeColor, IconClock, IconCode, IconCodePush, IconCodeSigning, IconCoffee, IconCommit, IconConfigure, IconConnectedAccounts, IconContainer, IconCopilot, IconCopy, IconCordova, IconCpu, IconCreditcard, IconCredits, IconCross, IconCrossCircle, IconCrossCircleFilled, IconCrown, IconCursor, IconCycle, IconDashboard, IconDashboardFilled, IconDeployment, IconDetails, IconDoc, IconDollar, IconDot, IconDotnet, IconDotnetColor, IconDotnetText, IconDotnetTextColor, IconDoubleCircle, IconDownload, IconDragHandle, IconEc2Ami, IconEnterprise, IconErrorCircle, IconErrorCircleFilled, IconExpand, IconExtraBuildCapacity, IconEye, IconEyeSlash, IconFastlane, IconFileDoc, IconFilePdf, IconFilePlist, IconFileYml, IconFileZip, IconFilter, IconFlag, IconFlutter, IconFolder, IconFullscreen, IconFullscreenExit, IconGauge, IconGit, IconGithub, IconGitlab, IconGitlabColor, IconGitlabWhite, IconGlobe, IconGo, IconGoogleColor, IconGooglePlay, IconGooglePlayColor, IconGradle, IconGroup, IconHashtag, IconHeadset, IconHeart, IconHistory, IconHourglass, IconImage, IconInfoCircle, IconInfoCircleFilled, IconInsights, IconInsightsFilled, IconInstall, IconInteraction, IconInvoice, IconIonic, IconJapanese, IconJava, IconJavaColor, IconJavaDuke, IconJavaDukeColor, IconKey, IconKiroColor, IconKotlin, IconKotlinColor, IconKotlinWhite, IconLaptop, IconLaunchdarkly, IconLegacyApp, IconLightbulb, IconLink, IconLinux, IconLock, IconLockOpen, IconLogin, IconLogout, IconMacos, IconMagicWand, IconMagnifier, IconMail, IconMcp, IconMedal, IconMemory, IconMenuGrid, IconMenuHamburger, IconMessage, IconMessageAlert, IconMessageQuestion, IconMicrophone, IconMinus, IconMinusCircle, IconMinusCircleFilled, IconMobile, IconMobileLandscape, IconMonitorChart, IconMoreHorizontal, IconMoreVertical, IconNews, IconNextjs, IconNodejs, IconOpenInNew, IconOther, IconOutsideContributor, IconOverview, IconPause, IconPencil, IconPeople, IconPercent, IconPerson, IconPersonWithDesk, 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, IconUpload, IconValidateShield, IconVideo, IconVsCode, IconWarning, IconWarningYellow, IconWebUi, IconWebhooks, IconWindsurf, IconWorkflow, IconWorkflowFlow, IconXTwitter, IconXamarin, IconXcode, ResponsiveProvider, bitkitIcon, bitkitTheme as bitriseTheme, createBitkitToast, createTreeCollection, dismissBitkitToast, rem, useBitkitTour, useResponsive, useStepsDialog };

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

@@ -34,7 +34,10 @@ var groupHeadingRecipe = defineSlotRecipe({
 			flexShrink: 0,
 			textStyle: "heading/h6"
 		},
-		separator: { flex: 1 }
+		separator: {
+			borderColor: "border/minimal",
+			flex: 1
+		}
 	}
 });
 //#endregion

package/dist/theme/slot-recipes/GroupHeading.recipe.js.map

@@ -1 +1 @@
-{"version":3,"file":"GroupHeading.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/GroupHeading.recipe.ts"],"sourcesContent":["import { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nconst groupHeadingRecipe = defineSlotRecipe({\n  className: 'group-heading',\n  slots: ['root', 'titleBlock', 'icon', 'label', 'separator'],\n  base: {\n    root: {\n      alignItems: 'center',\n      display: 'flex',\n      gap: '16',\n      overflow: 'clip',\n      paddingBlockEnd: '4',\n      paddingBlockStart: '8',\n      paddingInlineEnd: '8',\n    },\n    titleBlock: {\n      alignItems: 'center',\n      display: 'flex',\n      flexShrink: 0,\n      gap: '4',\n    },\n    icon: {\n      color: 'icon/tertiary',\n      flexShrink: 0,\n    },\n    label: {\n      color: 'text/tertiary',\n      flexShrink: 0,\n      textStyle: 'heading/h6',\n    },\n    separator: {\n      flex: 1,\n    },\n  },\n});\n\nexport default groupHeadingRecipe;\n"],"mappings":";;AAEA,IAAM,qBAAqB,iBAAiB;CAC1C,WAAW;CACX,OAAO;EAAC;EAAQ;EAAc;EAAQ;EAAS;CAAW;CAC1D,MAAM;EACJ,MAAM;GACJ,YAAY;GACZ,SAAS;GACT,KAAK;GACL,UAAU;GACV,iBAAiB;GACjB,mBAAmB;GACnB,kBAAkB;EACpB;EACA,YAAY;GACV,YAAY;GACZ,SAAS;GACT,YAAY;GACZ,KAAK;EACP;EACA,MAAM;GACJ,OAAO;GACP,YAAY;EACd;EACA,OAAO;GACL,OAAO;GACP,YAAY;GACZ,WAAW;EACb;EACA,WAAW,EACT,MAAM,EACR;CACF;AACF,CAAC"}
+{"version":3,"file":"GroupHeading.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/GroupHeading.recipe.ts"],"sourcesContent":["import { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nconst groupHeadingRecipe = defineSlotRecipe({\n  className: 'group-heading',\n  slots: ['root', 'titleBlock', 'icon', 'label', 'separator'],\n  base: {\n    root: {\n      alignItems: 'center',\n      display: 'flex',\n      gap: '16',\n      overflow: 'clip',\n      paddingBlockEnd: '4',\n      paddingBlockStart: '8',\n      paddingInlineEnd: '8',\n    },\n    titleBlock: {\n      alignItems: 'center',\n      display: 'flex',\n      flexShrink: 0,\n      gap: '4',\n    },\n    icon: {\n      color: 'icon/tertiary',\n      flexShrink: 0,\n    },\n    label: {\n      color: 'text/tertiary',\n      flexShrink: 0,\n      textStyle: 'heading/h6',\n    },\n    separator: {\n      // Lighter than the shared `Separator` recipe's `border/regular`, and that difference is in the\n      // design: Figma's general Separator component (`62:701`) is `border/regular` #dfdae1, while the\n      // Page sidebar's group header (`20014:6508`) draws its rule in `border/minimal` #efebef. A rule\n      // that trails a label is quieter than one that stands alone.\n      //\n      // It sits here rather than in the sidebar so every group heading matches — the select menu's\n      // group labels included. They render this same component, so a heading looks the same wherever\n      // it appears instead of the sidebar owning a private variant. It stays `border/minimal` at\n      // every breakpoint.\n      borderColor: 'border/minimal',\n      flex: 1,\n    },\n  },\n});\n\nexport default groupHeadingRecipe;\n"],"mappings":";;AAEA,IAAM,qBAAqB,iBAAiB;CAC1C,WAAW;CACX,OAAO;EAAC;EAAQ;EAAc;EAAQ;EAAS;CAAW;CAC1D,MAAM;EACJ,MAAM;GACJ,YAAY;GACZ,SAAS;GACT,KAAK;GACL,UAAU;GACV,iBAAiB;GACjB,mBAAmB;GACnB,kBAAkB;EACpB;EACA,YAAY;GACV,YAAY;GACZ,SAAS;GACT,YAAY;GACZ,KAAK;EACP;EACA,MAAM;GACJ,OAAO;GACP,YAAY;EACd;EACA,OAAO;GACL,OAAO;GACP,YAAY;GACZ,WAAW;EACb;EACA,WAAW;GAUT,aAAa;GACb,MAAM;EACR;CACF;AACF,CAAC"}

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

@@ -0,0 +1,202 @@
+declare const pageHeaderSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"title" | "badge" | "avatar" | "breadcrumb" | "tabs" | "root" | "secondaryText" | "controls" | "titleBlock" | "headerBlock" | "contentBlock" | "textBlock" | "titleRow" | "actionBlock", {
+    contentVariant: {
+        title: {
+            titleBlock: {
+                alignItems: "center";
+                gap: "12";
+            };
+            textBlock: {
+                gap: "4";
+            };
+        };
+        app: {
+            titleBlock: {
+                gap: "16";
+                alignItems: "center";
+            };
+            title: {
+                readonly textStyle: {
+                    readonly base: "heading/mobile/h2";
+                    readonly tablet: "heading/h2";
+                };
+            };
+            secondaryText: {
+                readonly textStyle: "body/md/regular";
+            };
+        };
+        user: {
+            titleBlock: {
+                gap: "12";
+                alignItems: "center";
+            };
+            title: {
+                readonly textStyle: {
+                    readonly base: "heading/mobile/h2";
+                    readonly tablet: "heading/h2";
+                };
+            };
+            secondaryText: {
+                readonly textStyle: "body/md/regular";
+            };
+        };
+    };
+    hasBreadcrumb: {
+        true: {
+            headerBlock: {
+                paddingBlockStart: "24";
+            };
+        };
+        false: {};
+    };
+    hasControls: {
+        true: {};
+        false: {};
+    };
+    isSticky: {
+        true: {
+            headerBlock: {
+                readonly tablet: {
+                    readonly alignItems: "center";
+                    readonly flexDirection: "row";
+                    readonly gap: "24";
+                    readonly minHeight: string;
+                    readonly paddingBlockEnd: "12";
+                    readonly paddingBlockStart: "12";
+                    readonly paddingInlineEnd: "32";
+                    readonly paddingInlineStart: "24";
+                };
+            };
+            breadcrumb: {
+                readonly tablet: {
+                    readonly flex: "0 1 auto";
+                    readonly minWidth: 0;
+                };
+            };
+            contentBlock: {
+                readonly tablet: {
+                    readonly alignItems: "center";
+                    readonly flex: "1 0 0";
+                    readonly gap: "24";
+                    readonly justifyContent: "flex-end";
+                    readonly minWidth: 0;
+                };
+            };
+            titleBlock: {
+                readonly tablet: {
+                    readonly alignItems: "center";
+                };
+            };
+            title: {
+                readonly tablet: {
+                    readonly textStyle: "heading/h3";
+                };
+            };
+            actionBlock: {
+                readonly tablet: {
+                    readonly alignItems: "center";
+                    readonly flexDirection: "row";
+                    readonly gap: "8";
+                    readonly width: "auto";
+                };
+            };
+            avatar: {
+                readonly tablet: {
+                    readonly display: "none";
+                };
+            };
+            badge: {
+                readonly tablet: {
+                    readonly display: "none";
+                };
+            };
+            secondaryText: {
+                readonly tablet: {
+                    readonly display: "none";
+                };
+            };
+            tabs: {
+                readonly tablet: {
+                    readonly display: "none";
+                };
+            };
+            root: {
+                tablet: {
+                    borderColor: "border/minimal";
+                    boxShadow: "elevation/sm";
+                };
+            };
+        };
+        false: {};
+    };
+    variant: {
+        default: {};
+        minimal: {
+            readonly headerBlock: {
+                readonly tablet: {
+                    readonly alignItems: "center";
+                    readonly flexDirection: "row";
+                    readonly gap: "24";
+                    readonly minHeight: string;
+                    readonly paddingBlockEnd: "12";
+                    readonly paddingBlockStart: "12";
+                    readonly paddingInlineEnd: "32";
+                    readonly paddingInlineStart: "24";
+                };
+            };
+            readonly breadcrumb: {
+                readonly tablet: {
+                    readonly flex: "0 1 auto";
+                    readonly minWidth: 0;
+                };
+            };
+            readonly contentBlock: {
+                readonly tablet: {
+                    readonly alignItems: "center";
+                    readonly flex: "1 0 0";
+                    readonly gap: "24";
+                    readonly justifyContent: "flex-end";
+                    readonly minWidth: 0;
+                };
+            };
+            readonly titleBlock: {
+                readonly tablet: {
+                    readonly alignItems: "center";
+                };
+            };
+            readonly title: {
+                readonly tablet: {
+                    readonly textStyle: "heading/h3";
+                };
+            };
+            readonly actionBlock: {
+                readonly tablet: {
+                    readonly alignItems: "center";
+                    readonly flexDirection: "row";
+                    readonly gap: "8";
+                    readonly width: "auto";
+                };
+            };
+            readonly avatar: {
+                readonly tablet: {
+                    readonly display: "none";
+                };
+            };
+            readonly badge: {
+                readonly tablet: {
+                    readonly display: "none";
+                };
+            };
+            readonly secondaryText: {
+                readonly tablet: {
+                    readonly display: "none";
+                };
+            };
+            readonly tabs: {
+                readonly tablet: {
+                    readonly display: "none";
+                };
+            };
+        };
+    };
+}>;
+export default pageHeaderSlotRecipe;