@bitrise/bitkit-v2 0.3.478 → 0.3.480-beta.3050

package/dist/components/BitkitUIHeader/UIHeaderNavButton.js

@@ -0,0 +1,46 @@
+import IconMenuHamburger from "../../icons/IconMenuHamburger.js";
+import BitkitAvatar from "../BitkitAvatar/BitkitAvatar.js";
+import { useUIHeaderContext } from "./UIHeaderContext.js";
+import { UIHeaderControlBase } from "./UIHeaderControl.js";
+import { Box } from "@chakra-ui/react/box";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region lib/components/BitkitUIHeader/UIHeaderNavButton.tsx
+/**
+* Opens `BitkitUISideNav` on mobile, where the navigation is a drawer rather than a rail. It sits
+* in the header's `leading` slot, which is hidden from the `tablet` breakpoint up.
+*
+* The two components do not know about each other: this button's `onClick` sets the navigation's
+* `open`, and the navigation asks to close through its own `onOpenChange`.
+*
+* It shows the current workspace, so switching workspaces is one tap away from anywhere.
+*/
+var UIHeaderNavButton = forwardRef((props, ref) => {
+	const { label = "Open navigation", name, src, ...rest } = props;
+	const { styles } = useUIHeaderContext();
+	const avatarProps = src ? {
+		src,
+		variant: "image"
+	} : { variant: "letters" };
+	return /* @__PURE__ */ jsxs(UIHeaderControlBase, {
+		ref,
+		footprint: "navButton",
+		label,
+		...rest,
+		children: [/* @__PURE__ */ jsx(BitkitAvatar, {
+			name,
+			...avatarProps
+		}), /* @__PURE__ */ jsx(Box, {
+			css: styles.navButtonBadge,
+			children: /* @__PURE__ */ jsx(IconMenuHamburger, {
+				css: styles.navButtonIcon,
+				size: "16"
+			})
+		})]
+	});
+});
+UIHeaderNavButton.displayName = "BitkitUIHeader.NavButton";
+//#endregion
+export { UIHeaderNavButton as default };
+
+//# sourceMappingURL=UIHeaderNavButton.js.map

package/dist/components/BitkitUIHeader/UIHeaderNavButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UIHeaderNavButton.js","names":[],"sources":["../../../lib/components/BitkitUIHeader/UIHeaderNavButton.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { type HTMLChakraProps } from '@chakra-ui/react/styled-system';\nimport { forwardRef } from 'react';\n\nimport { IconMenuHamburger } from '../../icons';\nimport BitkitAvatar from '../BitkitAvatar/BitkitAvatar';\nimport { useUIHeaderContext } from './UIHeaderContext';\nimport { UIHeaderControlBase } from './UIHeaderControl';\n\nexport interface BitkitUIHeaderNavButtonProps extends Omit<HTMLChakraProps<'button'>, 'children' | 'disabled'> {\n  /** The accessible name. */\n  label?: string;\n  /** The current workspace. Shown as the avatar's initials when it has no logo. */\n  name: string;\n  /** The workspace's logo. Without one the avatar falls back to its initials. */\n  src?: string;\n}\n\n/**\n * Opens `BitkitUISideNav` on mobile, where the navigation is a drawer rather than a rail. It sits\n * in the header's `leading` slot, which is hidden from the `tablet` breakpoint up.\n *\n * The two components do not know about each other: this button's `onClick` sets the navigation's\n * `open`, and the navigation asks to close through its own `onOpenChange`.\n *\n * It shows the current workspace, so switching workspaces is one tap away from anywhere.\n */\nconst UIHeaderNavButton = forwardRef<HTMLButtonElement, BitkitUIHeaderNavButtonProps>((props, ref) => {\n  const { label = 'Open navigation', name, src, ...rest } = props;\n\n  const { styles } = useUIHeaderContext();\n\n  const avatarProps = src ? ({ src, variant: 'image' } as const) : ({ variant: 'letters' } as const);\n\n  return (\n    <UIHeaderControlBase ref={ref} footprint=\"navButton\" label={label} {...rest}>\n      <BitkitAvatar name={name} {...avatarProps} />\n      <Box css={styles.navButtonBadge}>\n        <IconMenuHamburger css={styles.navButtonIcon} size=\"16\" />\n      </Box>\n    </UIHeaderControlBase>\n  );\n});\n\nUIHeaderNavButton.displayName = 'BitkitUIHeader.NavButton';\n\nexport default UIHeaderNavButton;\n"],"mappings":";;;;;;;;;;;;;;;;;AA2BA,IAAM,oBAAoB,YAA6D,OAAO,QAAQ;CACpG,MAAM,EAAE,QAAQ,mBAAmB,MAAM,KAAK,GAAG,SAAS;CAE1D,MAAM,EAAE,WAAW,mBAAmB;CAEtC,MAAM,cAAc,MAAO;EAAE;EAAK,SAAS;CAAQ,IAAe,EAAE,SAAS,UAAU;CAEvF,OACE,qBAAC,qBAAD;EAA0B;EAAK,WAAU;EAAmB;EAAO,GAAI;EAAvE,UAAA,CACE,oBAAC,cAAD;GAAoB;GAAM,GAAI;EAAc,CAAA,GAC5C,oBAAC,KAAD;GAAK,KAAK,OAAO;GACf,UAAA,oBAAC,mBAAD;IAAmB,KAAK,OAAO;IAAe,MAAK;GAAM,CAAA;EACtD,CAAA,CACc;;AAEzB,CAAC;AAED,kBAAkB,cAAc"}

package/dist/components/BitkitUIHeader/UIHeaderSearch.d.ts

@@ -0,0 +1,32 @@
+import { BoxProps } from '@chakra-ui/react/box';
+import { Ref } from 'react';
+export interface BitkitUIHeaderSearchProps extends Omit<BoxProps, 'children' | 'onChange'> {
+    /**
+     * The search field, for anchoring the results to it. The component owns no results list: what a
+     * search turns up differs per product, so the consumer renders its own panel against this.
+     */
+    inputRef?: Ref<HTMLInputElement>;
+    /** The accessible name of both the button and the field. */
+    label?: string;
+    /**
+     * Called when the button is pressed, and when Escape closes the field.
+     *
+     * From `tablet` up this opens the field in place. Below it there is no inline field — the button
+     * is a plain trigger, and what it opens is the consumer's to render.
+     */
+    onOpenChange?: (open: boolean) => void;
+    onValueChange?: (value: string) => void;
+    open?: boolean;
+    placeholder?: string;
+    /** Marks the button as the one whose panel is open. Meant for the mobile trigger. */
+    selected?: boolean;
+    value?: string;
+}
+/**
+ * Search in the header bar: a button that opens a field lying over it, so opening the search moves
+ * nothing else in the bar.
+ *
+ * It is controlled. Hold `open` and `value` yourself, and render the results against `inputRef`.
+ */
+declare const UIHeaderSearch: import('react').ForwardRefExoticComponent<BitkitUIHeaderSearchProps & import('react').RefAttributes<HTMLDivElement>>;
+export default UIHeaderSearch;

package/dist/components/BitkitUIHeader/UIHeaderSearch.js

@@ -0,0 +1,116 @@
+import IconMagnifier from "../../icons/IconMagnifier.js";
+import BitkitCloseButton from "../BitkitCloseButton/BitkitCloseButton.js";
+import { useUIHeaderContext } from "./UIHeaderContext.js";
+import uiHeaderPart from "./uiHeaderPart.js";
+import { UIHeaderControlBase } from "./UIHeaderControl.js";
+import { Box } from "@chakra-ui/react/box";
+import { chakra } from "@chakra-ui/react/styled-system";
+import { forwardRef, useEffect, useMemo, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallbackRef } from "@chakra-ui/react/hooks";
+import { mergeRefs } from "@chakra-ui/react";
+//#region lib/components/BitkitUIHeader/UIHeaderSearch.tsx
+/**
+* Search in the header bar: a button that opens a field lying over it, so opening the search moves
+* nothing else in the bar.
+*
+* It is controlled. Hold `open` and `value` yourself, and render the results against `inputRef`.
+*/
+var UIHeaderSearch = forwardRef((props, ref) => {
+	const { css, inputRef, label = "Search", onOpenChange, onValueChange, open = false, placeholder, selected, value = "", ...rest } = props;
+	const { barRef, styles } = useUIHeaderContext();
+	const buttonElementRef = useRef(null);
+	const inputElementRef = useRef(null);
+	const searchElementRef = useRef(null);
+	const restoreFocusRef = useRef(false);
+	const setInputRef = useMemo(() => mergeRefs(inputElementRef, inputRef), [inputRef]);
+	const setSearchRef = useMemo(() => mergeRefs(searchElementRef, ref), [ref]);
+	const handleOpenChange = useCallbackRef(onOpenChange);
+	useEffect(() => {
+		if (open) {
+			inputElementRef.current?.focus();
+			return;
+		}
+		if (!restoreFocusRef.current) return;
+		restoreFocusRef.current = false;
+		buttonElementRef.current?.focus();
+	}, [open]);
+	useEffect(() => {
+		if (!open) return void 0;
+		const bar = barRef.current;
+		if (!bar) return void 0;
+		const dismiss = (event) => {
+			const target = event.target instanceof Node ? event.target : null;
+			if (!target || searchElementRef.current?.contains(target)) return;
+			handleOpenChange?.(false);
+		};
+		bar.addEventListener("pointerdown", dismiss);
+		return () => bar.removeEventListener("pointerdown", dismiss);
+	}, [
+		barRef,
+		handleOpenChange,
+		open
+	]);
+	useEffect(() => {
+		if (!open) return void 0;
+		const close = (event) => {
+			if (event.key !== "Escape") return;
+			if (event.target === inputElementRef.current) event.preventDefault();
+			restoreFocusRef.current = true;
+			handleOpenChange?.(false);
+		};
+		document.addEventListener("keydown", close);
+		return () => document.removeEventListener("keydown", close);
+	}, [handleOpenChange, open]);
+	const handleClear = () => {
+		onValueChange?.("");
+		inputElementRef.current?.focus();
+	};
+	return /* @__PURE__ */ jsxs(Box, {
+		ref: setSearchRef,
+		css: [styles.search, css],
+		...uiHeaderPart("search"),
+		...rest,
+		children: [/* @__PURE__ */ jsx(UIHeaderControlBase, {
+			ref: buttonElementRef,
+			"aria-expanded": selected ?? open,
+			css: styles.searchButton,
+			"data-open": open ? "" : void 0,
+			footprint: "control",
+			label,
+			onClick: () => onOpenChange?.(!open),
+			selected,
+			...uiHeaderPart("search-button"),
+			children: /* @__PURE__ */ jsx(IconMagnifier, {})
+		}), /* @__PURE__ */ jsxs(Box, {
+			css: styles.searchField,
+			"data-open": open ? "" : void 0,
+			...uiHeaderPart("search-field"),
+			children: [
+				/* @__PURE__ */ jsx(IconMagnifier, { css: styles.searchIcon }),
+				/* @__PURE__ */ jsx(chakra.input, {
+					ref: setInputRef,
+					"aria-label": label,
+					css: styles.searchInput,
+					onChange: (event) => onValueChange?.(event.target.value),
+					...uiHeaderPart("search-input"),
+					placeholder,
+					type: "search",
+					value
+				}),
+				!!value && /* @__PURE__ */ jsx(BitkitCloseButton, {
+					"aria-label": "Clear search",
+					colorVariant: "white",
+					css: styles.searchClear,
+					onClick: handleClear,
+					size: "sm"
+				})
+			]
+		})]
+	});
+});
+UIHeaderSearch.displayName = "BitkitUIHeader.Search";
+//#endregion
+export { UIHeaderSearch as default };
+
+//# sourceMappingURL=UIHeaderSearch.js.map

package/dist/components/BitkitUIHeader/UIHeaderSearch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UIHeaderSearch.js","names":[],"sources":["../../../lib/components/BitkitUIHeader/UIHeaderSearch.tsx"],"sourcesContent":["// eslint-disable-next-line no-restricted-imports\nimport { mergeRefs } from '@chakra-ui/react';\nimport { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { useCallbackRef } from '@chakra-ui/react/hooks';\nimport { chakra } from '@chakra-ui/react/styled-system';\nimport { forwardRef, type Ref, useEffect, useMemo, useRef } from 'react';\n\nimport { IconMagnifier } from '../../icons';\nimport BitkitCloseButton from '../BitkitCloseButton/BitkitCloseButton';\nimport { useUIHeaderContext } from './UIHeaderContext';\nimport { UIHeaderControlBase } from './UIHeaderControl';\nimport uiHeaderPart from './uiHeaderPart';\n\nexport interface BitkitUIHeaderSearchProps extends Omit<BoxProps, 'children' | 'onChange'> {\n  /**\n   * The search field, for anchoring the results to it. The component owns no results list: what a\n   * search turns up differs per product, so the consumer renders its own panel against this.\n   */\n  inputRef?: Ref<HTMLInputElement>;\n  /** The accessible name of both the button and the field. */\n  label?: string;\n  /**\n   * Called when the button is pressed, and when Escape closes the field.\n   *\n   * From `tablet` up this opens the field in place. Below it there is no inline field — the button\n   * is a plain trigger, and what it opens is the consumer's to render.\n   */\n  onOpenChange?: (open: boolean) => void;\n  onValueChange?: (value: string) => void;\n  open?: boolean;\n  placeholder?: string;\n  /** Marks the button as the one whose panel is open. Meant for the mobile trigger. */\n  selected?: boolean;\n  value?: string;\n}\n\n/**\n * Search in the header bar: a button that opens a field lying over it, so opening the search moves\n * nothing else in the bar.\n *\n * It is controlled. Hold `open` and `value` yourself, and render the results against `inputRef`.\n */\nconst UIHeaderSearch = forwardRef<HTMLDivElement, BitkitUIHeaderSearchProps>((props, ref) => {\n  const {\n    css,\n    inputRef,\n    label = 'Search',\n    onOpenChange,\n    onValueChange,\n    open = false,\n    placeholder,\n    selected,\n    value = '',\n    ...rest\n  } = props;\n\n  const { barRef, styles } = useUIHeaderContext();\n\n  const buttonElementRef = useRef<HTMLButtonElement>(null);\n  const inputElementRef = useRef<HTMLInputElement>(null);\n  const searchElementRef = useRef<HTMLDivElement>(null);\n  const restoreFocusRef = useRef(false);\n  const setInputRef = useMemo(() => mergeRefs(inputElementRef, inputRef), [inputRef]);\n  const setSearchRef = useMemo(() => mergeRefs(searchElementRef, ref), [ref]);\n\n  // The field is controlled, so `onOpenChange` is usually a fresh arrow on every keystroke. Held\n  // by a ref, the dismiss listener below is subscribed once per opening rather than per character.\n  const handleOpenChange = useCallbackRef(onOpenChange);\n\n  // Escape hands focus back to the button that opened the field, but only once the field is closed:\n  // while it is open the button is `visibility: hidden`, and a hidden element cannot take focus.\n  useEffect(() => {\n    if (open) {\n      inputElementRef.current?.focus();\n      return;\n    }\n\n    if (!restoreFocusRef.current) return;\n    restoreFocusRef.current = false;\n    buttonElementRef.current?.focus();\n  }, [open]);\n\n  // Reaching for another control in the bar is as much a way out of the search as Escape, so the\n  // open field gives way to it. Only presses in the bar itself count: the results are the\n  // consumer's to render — in the `banner` slot as readily as anywhere else — and choosing from\n  // them must not close the search.\n  useEffect(() => {\n    if (!open) return undefined;\n\n    const bar = barRef.current;\n    if (!bar) return undefined;\n\n    const dismiss = (event: PointerEvent) => {\n      const target = event.target instanceof Node ? event.target : null;\n      if (!target || searchElementRef.current?.contains(target)) return;\n      handleOpenChange?.(false);\n    };\n\n    bar.addEventListener('pointerdown', dismiss);\n    return () => bar.removeEventListener('pointerdown', dismiss);\n  }, [barRef, handleOpenChange, open]);\n\n  useEffect(() => {\n    if (!open) return undefined;\n\n    const close = (event: globalThis.KeyboardEvent) => {\n      if (event.key !== 'Escape') return;\n      if (event.target === inputElementRef.current) event.preventDefault();\n      restoreFocusRef.current = true;\n      handleOpenChange?.(false);\n    };\n\n    document.addEventListener('keydown', close);\n    return () => document.removeEventListener('keydown', close);\n  }, [handleOpenChange, open]);\n\n  const handleClear = () => {\n    onValueChange?.('');\n    inputElementRef.current?.focus();\n  };\n\n  return (\n    <Box ref={setSearchRef} css={[styles.search, css]} {...uiHeaderPart('search')} {...rest}>\n      <UIHeaderControlBase\n        ref={buttonElementRef}\n        aria-expanded={selected ?? open}\n        css={styles.searchButton}\n        data-open={open ? '' : undefined}\n        footprint=\"control\"\n        label={label}\n        onClick={() => onOpenChange?.(!open)}\n        selected={selected}\n        {...uiHeaderPart('search-button')}\n      >\n        <IconMagnifier />\n      </UIHeaderControlBase>\n      <Box css={styles.searchField} data-open={open ? '' : undefined} {...uiHeaderPart('search-field')}>\n        <IconMagnifier css={styles.searchIcon} />\n        {/* No named primitive fits: Chakra's `Input` carries its own recipe, and this field is\n            styled entirely by the header's own slot. */}\n        <chakra.input\n          ref={setInputRef}\n          aria-label={label}\n          css={styles.searchInput}\n          onChange={(event) => onValueChange?.(event.target.value)}\n          {...uiHeaderPart('search-input')}\n          placeholder={placeholder}\n          type=\"search\"\n          value={value}\n        />\n        {!!value && (\n          <BitkitCloseButton\n            aria-label=\"Clear search\"\n            colorVariant=\"white\"\n            css={styles.searchClear}\n            onClick={handleClear}\n            size=\"sm\"\n          />\n        )}\n      </Box>\n    </Box>\n  );\n});\n\nUIHeaderSearch.displayName = 'BitkitUIHeader.Search';\n\nexport default UIHeaderSearch;\n"],"mappings":";;;;;;;;;;;;;;;;;;AA0CA,IAAM,iBAAiB,YAAuD,OAAO,QAAQ;CAC3F,MAAM,EACJ,KACA,UACA,QAAQ,UACR,cACA,eACA,OAAO,OACP,aACA,UACA,QAAQ,IACR,GAAG,SACD;CAEJ,MAAM,EAAE,QAAQ,WAAW,mBAAmB;CAE9C,MAAM,mBAAmB,OAA0B,IAAI;CACvD,MAAM,kBAAkB,OAAyB,IAAI;CACrD,MAAM,mBAAmB,OAAuB,IAAI;CACpD,MAAM,kBAAkB,OAAO,KAAK;CACpC,MAAM,cAAc,cAAc,UAAU,iBAAiB,QAAQ,GAAG,CAAC,QAAQ,CAAC;CAClF,MAAM,eAAe,cAAc,UAAU,kBAAkB,GAAG,GAAG,CAAC,GAAG,CAAC;CAI1E,MAAM,mBAAmB,eAAe,YAAY;CAIpD,gBAAgB;EACd,IAAI,MAAM;GACR,gBAAgB,SAAS,MAAM;GAC/B;EACF;EAEA,IAAI,CAAC,gBAAgB,SAAS;EAC9B,gBAAgB,UAAU;EAC1B,iBAAiB,SAAS,MAAM;CAClC,GAAG,CAAC,IAAI,CAAC;CAMT,gBAAgB;EACd,IAAI,CAAC,MAAM,OAAO,KAAA;EAElB,MAAM,MAAM,OAAO;EACnB,IAAI,CAAC,KAAK,OAAO,KAAA;EAEjB,MAAM,WAAW,UAAwB;GACvC,MAAM,SAAS,MAAM,kBAAkB,OAAO,MAAM,SAAS;GAC7D,IAAI,CAAC,UAAU,iBAAiB,SAAS,SAAS,MAAM,GAAG;GAC3D,mBAAmB,KAAK;EAC1B;EAEA,IAAI,iBAAiB,eAAe,OAAO;EAC3C,aAAa,IAAI,oBAAoB,eAAe,OAAO;CAC7D,GAAG;EAAC;EAAQ;EAAkB;CAAI,CAAC;CAEnC,gBAAgB;EACd,IAAI,CAAC,MAAM,OAAO,KAAA;EAElB,MAAM,SAAS,UAAoC;GACjD,IAAI,MAAM,QAAQ,UAAU;GAC5B,IAAI,MAAM,WAAW,gBAAgB,SAAS,MAAM,eAAe;GACnE,gBAAgB,UAAU;GAC1B,mBAAmB,KAAK;EAC1B;EAEA,SAAS,iBAAiB,WAAW,KAAK;EAC1C,aAAa,SAAS,oBAAoB,WAAW,KAAK;CAC5D,GAAG,CAAC,kBAAkB,IAAI,CAAC;CAE3B,MAAM,oBAAoB;EACxB,gBAAgB,EAAE;EAClB,gBAAgB,SAAS,MAAM;CACjC;CAEA,OACE,qBAAC,KAAD;EAAK,KAAK;EAAc,KAAK,CAAC,OAAO,QAAQ,GAAG;EAAG,GAAI,aAAa,QAAQ;EAAG,GAAI;EAAnF,UAAA,CACE,oBAAC,qBAAD;GACE,KAAK;GACL,iBAAe,YAAY;GAC3B,KAAK,OAAO;GACZ,aAAW,OAAO,KAAK,KAAA;GACvB,WAAU;GACH;GACP,eAAe,eAAe,CAAC,IAAI;GACzB;GACV,GAAI,aAAa,eAAe;GAEhC,UAAA,oBAAC,eAAD,CAAgB,CAAA;EACG,CAAA,GACrB,qBAAC,KAAD;GAAK,KAAK,OAAO;GAAa,aAAW,OAAO,KAAK,KAAA;GAAW,GAAI,aAAa,cAAc;GAA/F,UAAA;IACE,oBAAC,eAAD,EAAe,KAAK,OAAO,WAAa,CAAA;IAGxC,oBAAC,OAAO,OAAR;KACE,KAAK;KACL,cAAY;KACZ,KAAK,OAAO;KACZ,WAAW,UAAU,gBAAgB,MAAM,OAAO,KAAK;KACvD,GAAI,aAAa,cAAc;KAClB;KACb,MAAK;KACE;IACR,CAAA;IACA,CAAC,CAAC,SACD,oBAAC,mBAAD;KACE,cAAW;KACX,cAAa;KACb,KAAK,OAAO;KACZ,SAAS;KACT,MAAK;IACN,CAAA;GAEA;EACF,CAAA,CAAA;;AAET,CAAC;AAED,eAAe,cAAc"}

package/dist/components/BitkitUIHeader/uiHeaderPart.d.ts

@@ -0,0 +1,9 @@
+/**
+ * The `data-scope` / `data-part` pair every element in the header carries, so a consumer's
+ * stylesheet or spec can address one without a generated class name. Spread it before `...rest`.
+ */
+declare const uiHeaderPart: (name: string) => {
+    'data-part': string;
+    'data-scope': string;
+};
+export default uiHeaderPart;

package/dist/components/BitkitUIHeader/uiHeaderPart.js

@@ -0,0 +1,13 @@
+//#region lib/components/BitkitUIHeader/uiHeaderPart.ts
+/**
+* The `data-scope` / `data-part` pair every element in the header carries, so a consumer's
+* stylesheet or spec can address one without a generated class name. Spread it before `...rest`.
+*/
+var uiHeaderPart = (name) => ({
+	"data-part": name,
+	"data-scope": "ui-header"
+});
+//#endregion
+export { uiHeaderPart as default };
+
+//# sourceMappingURL=uiHeaderPart.js.map

package/dist/components/BitkitUIHeader/uiHeaderPart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"uiHeaderPart.js","names":[],"sources":["../../../lib/components/BitkitUIHeader/uiHeaderPart.ts"],"sourcesContent":["/**\n * The `data-scope` / `data-part` pair every element in the header carries, so a consumer's\n * stylesheet or spec can address one without a generated class name. Spread it before `...rest`.\n */\nconst uiHeaderPart = (name: string) => ({ 'data-part': name, 'data-scope': 'ui-header' });\n\nexport default uiHeaderPart;\n"],"mappings":";;;;;AAIA,IAAM,gBAAgB,UAAkB;CAAE,aAAa;CAAM,cAAc;AAAY"}

package/dist/components/index.d.ts

@@ -50,7 +50,7 @@ export { default as BitkitOverflowContent, type BitkitOverflowContentProps, } fr
 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 BitkitPageSidebarProgressItemProps, type BitkitPageSidebarProjectProps, type BitkitPageSidebarProps, type BitkitPageSidebarTitleProps, } from './BitkitPageSidebar/BitkitPageSidebar';
+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 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';
@@ -94,5 +94,6 @@ export { default as BitkitToggletip, type BitkitToggletipProps } from './BitkitT
 export { default as BitkitTooltip, type BitkitTooltipProps } from './BitkitTooltip/BitkitTooltip';
 export { default as BitkitTour, type BitkitTourInstance, type BitkitTourOptions, type BitkitTourProps, type BitkitTourSecondaryAction, type BitkitTourStep, useBitkitTour, } from './BitkitTour/BitkitTour';
 export { default as BitkitTreeView, type BitkitTreeViewBranchProps, type BitkitTreeViewExpandedChangeDetails, type BitkitTreeViewLeafProps, type BitkitTreeViewNodeRenderProps, type BitkitTreeViewRootProps, type BitkitTreeViewSelectionChangeDetails, createTreeCollection, } from './BitkitTreeView/BitkitTreeView';
+export { default as BitkitUIHeader, type BitkitUIHeaderAccountProps, type BitkitUIHeaderButtonProps, type BitkitUIHeaderControlAsAnchorProps, type BitkitUIHeaderControlAsButtonProps, type BitkitUIHeaderControlProps, type BitkitUIHeaderNavButtonProps, type BitkitUIHeaderProps, type BitkitUIHeaderSearchProps, uiHeaderHeight, } from './BitkitUIHeader/BitkitUIHeader';
 export { default as BitkitUISideNav, type BitkitUISideNavBodyProps, type BitkitUISideNavFooterHeadingProps, type BitkitUISideNavFooterProps, type BitkitUISideNavItemProps, type BitkitUISideNavLinkAsAnchorProps, type BitkitUISideNavLinkAsButtonProps, type BitkitUISideNavLinkProps, type BitkitUISideNavProps, type BitkitUISideNavWorkspaceProps, type BitkitUISideNavWorkspaceSelectorProps, uiSideNavRailWidth, } from './BitkitUISideNav/BitkitUISideNav';
 export { useUISideNav } from './BitkitUISideNav/UISideNavContext';

package/dist/main.js

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

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

@@ -0,0 +1,103 @@
+import { rem } from "../themeUtils.js";
+import { defineRecipe } from "@chakra-ui/react/styled-system";
+//#region lib/theme/recipes/UIHeaderButton.recipe.ts
+var borderColors = (variant) => variant === "secondary" ? {
+	base: "sys/ui/header/button/secondary/border",
+	disabled: "sys/ui/header/button/secondary/border-disabled"
+} : {
+	base: "transparent",
+	disabled: "transparent"
+};
+var variantStyles = (variant) => {
+	const border = borderColors(variant);
+	return {
+		background: `sys/ui/header/button/${variant}/bg`,
+		borderColor: border.base,
+		color: `sys/ui/header/button/${variant}/fg`,
+		_hover: {
+			background: `sys/ui/header/button/${variant}/bg-hover`,
+			_active: { background: `sys/ui/header/button/${variant}/bg-active` }
+		},
+		_active: { background: `sys/ui/header/button/${variant}/bg-active` },
+		_selected: {
+			background: `sys/ui/header/button/${variant}/bg-active`,
+			_hover: { background: `sys/ui/header/button/${variant}/bg-active` }
+		},
+		_disabled: {
+			background: `sys/ui/header/button/${variant}/bg-disabled`,
+			borderColor: border.disabled,
+			color: `sys/ui/header/button/${variant}/fg-disabled`,
+			cursor: "not-allowed"
+		}
+	};
+};
+var badgeDot = {
+	background: "sys/ui/header/badge/indigo",
+	borderRadius: "full",
+	content: "\"\"",
+	pointerEvents: "none",
+	position: "absolute"
+};
+var badgeStyles = {
+	_before: {
+		...badgeDot,
+		height: "8",
+		insetBlockStart: "-4",
+		insetInlineEnd: "-4",
+		width: "8"
+	},
+	_after: {
+		...badgeDot,
+		height: rem(10),
+		insetBlockStart: rem(-5),
+		insetInlineEnd: rem(-5),
+		opacity: .5,
+		width: rem(10)
+	}
+};
+var uiHeaderButtonRecipe = defineRecipe({
+	className: "ui-header-button",
+	base: {
+		alignItems: "center",
+		borderRadius: "4",
+		borderStyle: "solid",
+		borderWidth: "1",
+		cursor: "pointer",
+		display: "inline-flex",
+		flexShrink: 0,
+		gap: "4",
+		height: "32",
+		justifyContent: "center",
+		minWidth: "48",
+		paddingInline: "8",
+		position: "relative",
+		textDecoration: "none",
+		textStyle: "comp/button/sm",
+		whiteSpace: "nowrap",
+		"&:not(:last-child)": { marginInlineEnd: "8" },
+		_disabled: { cursor: "not-allowed" }
+	},
+	variants: {
+		variant: {
+			primary: variantStyles("primary"),
+			secondary: variantStyles("secondary"),
+			tertiary: variantStyles("tertiary")
+		},
+		badge: {
+			idle: badgeStyles,
+			pulse: {
+				...badgeStyles,
+				_after: {
+					...badgeStyles._after,
+					animation: "ping",
+					_motionReduce: { animation: "none" }
+				}
+			}
+		}
+	},
+	defaultVariants: { variant: "primary" }
+});
+//#endregion
+export { uiHeaderButtonRecipe as default };
+
+//# sourceMappingURL=UIHeaderButton.recipe.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"UIHeaderButton.recipe.js","names":[],"sources":["../../../lib/theme/recipes/UIHeaderButton.recipe.ts"],"sourcesContent":["import { defineRecipe, type SystemStyleObject } from '@chakra-ui/react/styled-system';\n\nimport { rem } from '../themeUtils';\n\ntype Variant = 'primary' | 'secondary' | 'tertiary';\n\nconst borderColors = (variant: Variant) =>\n  variant === 'secondary'\n    ? { base: 'sys/ui/header/button/secondary/border', disabled: 'sys/ui/header/button/secondary/border-disabled' }\n    : { base: 'transparent', disabled: 'transparent' };\n\nconst variantStyles = (variant: Variant): SystemStyleObject => {\n  const border = borderColors(variant);\n\n  return {\n    background: `sys/ui/header/button/${variant}/bg`,\n    borderColor: border.base,\n    color: `sys/ui/header/button/${variant}/fg`,\n    // `_hover`/`_active` compile to `:not(:disabled, [data-disabled])`, so they never match a\n    // disabled button and `_disabled` wins without `!important`.\n    _hover: {\n      background: `sys/ui/header/button/${variant}/bg-hover`,\n      // Repeat active under hover so clicking while hovering keeps the active styles.\n      _active: {\n        background: `sys/ui/header/button/${variant}/bg-active`,\n      },\n    },\n    _active: {\n      background: `sys/ui/header/button/${variant}/bg-active`,\n    },\n    // A button that holds a panel open stays pressed while the panel is, hover included — letting\n    // hover lighten it would read as the panel having closed.\n    _selected: {\n      background: `sys/ui/header/button/${variant}/bg-active`,\n      _hover: {\n        background: `sys/ui/header/button/${variant}/bg-active`,\n      },\n    },\n    _disabled: {\n      background: `sys/ui/header/button/${variant}/bg-disabled`,\n      borderColor: border.disabled,\n      color: `sys/ui/header/button/${variant}/fg-disabled`,\n      cursor: 'not-allowed',\n    },\n  };\n};\n\nconst badgeDot: SystemStyleObject = {\n  background: 'sys/ui/header/badge/indigo',\n  borderRadius: 'full',\n  content: '\"\"',\n  pointerEvents: 'none',\n  position: 'absolute',\n};\n\nconst badgeStyles: SystemStyleObject = {\n  _before: {\n    ...badgeDot,\n    height: '8',\n    insetBlockStart: '-4',\n    insetInlineEnd: '-4',\n    width: '8',\n  },\n  _after: {\n    ...badgeDot,\n    height: rem(10),\n    insetBlockStart: rem(-5),\n    insetInlineEnd: rem(-5),\n    opacity: 0.5,\n    width: rem(10),\n  },\n};\n\nconst uiHeaderButtonRecipe = defineRecipe({\n  className: 'ui-header-button',\n  base: {\n    alignItems: 'center',\n    borderRadius: '4',\n    borderStyle: 'solid',\n    borderWidth: '1',\n    cursor: 'pointer',\n    display: 'inline-flex',\n    flexShrink: 0,\n    gap: '4',\n    height: '32',\n    justifyContent: 'center',\n    minWidth: '48',\n    paddingInline: '8',\n    position: 'relative',\n    textDecoration: 'none',\n    textStyle: 'comp/button/sm',\n    whiteSpace: 'nowrap',\n    '&:not(:last-child)': {\n      marginInlineEnd: '8',\n    },\n    _disabled: {\n      cursor: 'not-allowed',\n    },\n  },\n  variants: {\n    variant: {\n      primary: variantStyles('primary'),\n      secondary: variantStyles('secondary'),\n      tertiary: variantStyles('tertiary'),\n    },\n    badge: {\n      idle: badgeStyles,\n      pulse: {\n        ...badgeStyles,\n        _after: {\n          ...badgeStyles._after,\n          // The system's own ping: the ring expands past the dot and fades out.\n          animation: 'ping',\n          _motionReduce: {\n            animation: 'none',\n          },\n        },\n      },\n    },\n  },\n  defaultVariants: {\n    variant: 'primary',\n  },\n});\n\nexport default uiHeaderButtonRecipe;\n"],"mappings":";;;AAMA,IAAM,gBAAgB,YACpB,YAAY,cACR;CAAE,MAAM;CAAyC,UAAU;AAAiD,IAC5G;CAAE,MAAM;CAAe,UAAU;AAAc;AAErD,IAAM,iBAAiB,YAAwC;CAC7D,MAAM,SAAS,aAAa,OAAO;CAEnC,OAAO;EACL,YAAY,wBAAwB,QAAQ;EAC5C,aAAa,OAAO;EACpB,OAAO,wBAAwB,QAAQ;EAGvC,QAAQ;GACN,YAAY,wBAAwB,QAAQ;GAE5C,SAAS,EACP,YAAY,wBAAwB,QAAQ,YAC9C;EACF;EACA,SAAS,EACP,YAAY,wBAAwB,QAAQ,YAC9C;EAGA,WAAW;GACT,YAAY,wBAAwB,QAAQ;GAC5C,QAAQ,EACN,YAAY,wBAAwB,QAAQ,YAC9C;EACF;EACA,WAAW;GACT,YAAY,wBAAwB,QAAQ;GAC5C,aAAa,OAAO;GACpB,OAAO,wBAAwB,QAAQ;GACvC,QAAQ;EACV;CACF;AACF;AAEA,IAAM,WAA8B;CAClC,YAAY;CACZ,cAAc;CACd,SAAS;CACT,eAAe;CACf,UAAU;AACZ;AAEA,IAAM,cAAiC;CACrC,SAAS;EACP,GAAG;EACH,QAAQ;EACR,iBAAiB;EACjB,gBAAgB;EAChB,OAAO;CACT;CACA,QAAQ;EACN,GAAG;EACH,QAAQ,IAAI,EAAE;EACd,iBAAiB,IAAI,EAAE;EACvB,gBAAgB,IAAI,EAAE;EACtB,SAAS;EACT,OAAO,IAAI,EAAE;CACf;AACF;AAEA,IAAM,uBAAuB,aAAa;CACxC,WAAW;CACX,MAAM;EACJ,YAAY;EACZ,cAAc;EACd,aAAa;EACb,aAAa;EACb,QAAQ;EACR,SAAS;EACT,YAAY;EACZ,KAAK;EACL,QAAQ;EACR,gBAAgB;EAChB,UAAU;EACV,eAAe;EACf,UAAU;EACV,gBAAgB;EAChB,WAAW;EACX,YAAY;EACZ,sBAAsB,EACpB,iBAAiB,IACnB;EACA,WAAW,EACT,QAAQ,cACV;CACF;CACA,UAAU;EACR,SAAS;GACP,SAAS,cAAc,SAAS;GAChC,WAAW,cAAc,WAAW;GACpC,UAAU,cAAc,UAAU;EACpC;EACA,OAAO;GACL,MAAM;GACN,OAAO;IACL,GAAG;IACH,QAAQ;KACN,GAAG,YAAY;KAEf,WAAW;KACX,eAAe,EACb,WAAW,OACb;IACF;GACF;EACF;CACF;CACA,iBAAiB,EACf,SAAS,UACX;AACF,CAAC"}

package/dist/theme/recipes/index.js

@@ -15,6 +15,7 @@ import separatorRecipe from "./Separator.recipe.js";
 import skeletonRecipe from "./Skeleton.recipe.js";
 import spinnerRecipe from "./Spinner.recipe.js";
 import toggleButtonRecipe from "./ToggleButton.recipe.js";
+import uiHeaderButtonRecipe from "./UIHeaderButton.recipe.js";
 //#region lib/theme/recipes/index.ts
 var recipes = {
 	badge: badgeRecipe,
@@ -33,7 +34,8 @@ var recipes = {
 	skeleton: skeletonRecipe,
 	spinner: spinnerRecipe,
 	textarea: textareaRecipe,
-	toggleButton: toggleButtonRecipe
+	toggleButton: toggleButtonRecipe,
+	uiHeaderButton: uiHeaderButtonRecipe
 };
 //#endregion
 export { recipes as default };

package/dist/theme/recipes/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../lib/theme/recipes/index.ts"],"sourcesContent":["import badgeRecipe from './Badge.recipe';\nimport buttonRecipe from './Button.recipe';\nimport closeButtonRecipe from './CloseButton.recipe';\nimport colorButtonRecipe from './ColorButton.recipe';\nimport controlButtonRecipe from './ControlButton.recipe';\nimport definitionTooltipRecipe from './DefinitionTooltip.recipe';\nimport iconRecipe from './Icon.recipe';\nimport inputRecipe from './Input.recipe';\nimport inputAddonRecipe from './InputAddon.recipe';\nimport linkRecipe from './Link.recipe';\nimport linkButtonRecipe from './LinkButton.recipe';\nimport selectableTagRecipe from './SelectableTag.recipe';\nimport separatorRecipe from './Separator.recipe';\nimport skeletonRecipe from './Skeleton.recipe';\nimport spinnerRecipe from './Spinner.recipe';\nimport textareaRecipe from './Textarea.recipe';\nimport toggleButtonRecipe from './ToggleButton.recipe';\n\nconst recipes = {\n  badge: badgeRecipe,\n  button: buttonRecipe,\n  closeButton: closeButtonRecipe,\n  controlButton: controlButtonRecipe,\n  colorButton: colorButtonRecipe,\n  definitionTooltip: definitionTooltipRecipe,\n  icon: iconRecipe,\n  input: inputRecipe,\n  inputAddon: inputAddonRecipe,\n  link: linkRecipe,\n  linkButton: linkButtonRecipe,\n  selectableTag: selectableTagRecipe,\n  separator: separatorRecipe,\n  skeleton: skeletonRecipe,\n  spinner: spinnerRecipe,\n  textarea: textareaRecipe,\n  toggleButton: toggleButtonRecipe,\n};\n\nexport default recipes;\n"],"mappings":";;;;;;;;;;;;;;;;;;AAkBA,IAAM,UAAU;CACd,OAAO;CACP,QAAQ;CACR,aAAa;CACb,eAAe;CACf,aAAa;CACb,mBAAmB;CACnB,MAAM;CACN,OAAO;CACP,YAAY;CACZ,MAAM;CACN,YAAY;CACZ,eAAe;CACf,WAAW;CACX,UAAU;CACV,SAAS;CACT,UAAU;CACV,cAAc;AAChB"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../lib/theme/recipes/index.ts"],"sourcesContent":["import badgeRecipe from './Badge.recipe';\nimport buttonRecipe from './Button.recipe';\nimport closeButtonRecipe from './CloseButton.recipe';\nimport colorButtonRecipe from './ColorButton.recipe';\nimport controlButtonRecipe from './ControlButton.recipe';\nimport definitionTooltipRecipe from './DefinitionTooltip.recipe';\nimport iconRecipe from './Icon.recipe';\nimport inputRecipe from './Input.recipe';\nimport inputAddonRecipe from './InputAddon.recipe';\nimport linkRecipe from './Link.recipe';\nimport linkButtonRecipe from './LinkButton.recipe';\nimport selectableTagRecipe from './SelectableTag.recipe';\nimport separatorRecipe from './Separator.recipe';\nimport skeletonRecipe from './Skeleton.recipe';\nimport spinnerRecipe from './Spinner.recipe';\nimport textareaRecipe from './Textarea.recipe';\nimport toggleButtonRecipe from './ToggleButton.recipe';\nimport uiHeaderButtonRecipe from './UIHeaderButton.recipe';\n\nconst recipes = {\n  badge: badgeRecipe,\n  button: buttonRecipe,\n  closeButton: closeButtonRecipe,\n  controlButton: controlButtonRecipe,\n  colorButton: colorButtonRecipe,\n  definitionTooltip: definitionTooltipRecipe,\n  icon: iconRecipe,\n  input: inputRecipe,\n  inputAddon: inputAddonRecipe,\n  link: linkRecipe,\n  linkButton: linkButtonRecipe,\n  selectableTag: selectableTagRecipe,\n  separator: separatorRecipe,\n  skeleton: skeletonRecipe,\n  spinner: spinnerRecipe,\n  textarea: textareaRecipe,\n  toggleButton: toggleButtonRecipe,\n  uiHeaderButton: uiHeaderButtonRecipe,\n};\n\nexport default recipes;\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAmBA,IAAM,UAAU;CACd,OAAO;CACP,QAAQ;CACR,aAAa;CACb,eAAe;CACf,aAAa;CACb,mBAAmB;CACnB,MAAM;CACN,OAAO;CACP,YAAY;CACZ,MAAM;CACN,YAAY;CACZ,eAAe;CACf,WAAW;CACX,UAAU;CACV,SAAS;CACT,UAAU;CACV,cAAc;CACd,gBAAgB;AAClB"}

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

@@ -1,4 +1,4 @@
-declare const pageHeaderSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"title" | "badge" | "avatar" | "breadcrumb" | "tabs" | "root" | "secondaryText" | "controls" | "titleBlock" | "headerBlock" | "contentBlock" | "textBlock" | "titleRow" | "actionBlock", {
+declare const pageHeaderSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"title" | "badge" | "avatar" | "breadcrumb" | "tabs" | "root" | "secondaryText" | "controls" | "titleBlock" | "sectionTitle" | "headerBlock" | "contentBlock" | "titleBar" | "textBlock" | "titleRow" | "actionBlock" | "menuButton" | "sectionBlock", {
     contentVariant: {
         title: {
             titleBlock: {
@@ -52,6 +52,28 @@ declare const pageHeaderSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinit
         true: {};
         false: {};
     };
+    /**
+     * From the component's `onMenuClick`: the mobile layout for a page with a sidebar
+     * (`PageHeader - mobile`, `hasSidebar=true`). The title row tightens up — 12 above, 8 to the
+     * trail — and the title steps down to leave the section name as the page's large heading. All
+     * `base`: from `tablet` the header is the ordinary one.
+     */
+    hasSidebar: {
+        true: {
+            headerBlock: {
+                base: {
+                    gap: "8";
+                    paddingBlockStart: "12";
+                };
+            };
+            title: {
+                base: {
+                    textStyle: "heading/mobile/h3";
+                };
+            };
+        };
+        false: {};
+    };
     /**
      * From the component's `showDivider`. The header's background is the page's, so without the line
      * the bottom padding reads as nothing but a margin -- one the page cannot shrink -- and it goes

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

@@ -119,6 +119,7 @@ var pageHeaderSlotRecipe = defineSlotRecipe({
 		"breadcrumb",
 		"controls",
 		"contentBlock",
+		"titleBar",
 		"titleBlock",
 		"avatar",
 		"textBlock",
@@ -127,6 +128,9 @@ var pageHeaderSlotRecipe = defineSlotRecipe({
 		"badge",
 		"secondaryText",
 		"actionBlock",
+		"menuButton",
+		"sectionBlock",
+		"sectionTitle",
 		"tabs"
 	],
 	base: {
@@ -191,6 +195,16 @@ var pageHeaderSlotRecipe = defineSlotRecipe({
 			},
 			width: "100%"
 		},
+		titleBar: {
+			alignItems: "center",
+			display: {
+				base: "flex",
+				tablet: "contents"
+			},
+			gap: "12",
+			minWidth: 0,
+			width: "100%"
+		},
 		titleBlock: {
 			display: "flex",
 			flex: "1 0 0",
@@ -252,6 +266,32 @@ var pageHeaderSlotRecipe = defineSlotRecipe({
 				tablet: "auto"
 			}
 		},
+		menuButton: {
+			display: {
+				base: "flex",
+				tablet: "none"
+			},
+			flexShrink: 0
+		},
+		sectionBlock: {
+			alignSelf: "stretch",
+			borderBlockStartColor: "border/minimal",
+			borderBlockStartStyle: "solid",
+			borderBlockStartWidth: "1",
+			display: {
+				base: "flex",
+				tablet: "none"
+			},
+			flexDirection: "column",
+			marginInline: "-16",
+			paddingBlockStart: "16",
+			paddingInline: "16"
+		},
+		sectionTitle: {
+			color: "text/primary",
+			textStyle: "heading/mobile/h1",
+			truncate: true
+		},
 		tabs: {
 			marginBlockEnd: rem(-1),
 			paddingInlineEnd: {
@@ -266,6 +306,12 @@ var pageHeaderSlotRecipe = defineSlotRecipe({
 		}
 	},
 	compoundVariants: [
+		{
+			contentVariant: "title",
+			hasBreadcrumb: true,
+			hasSidebar: true,
+			css: { title: { base: { textStyle: "heading/mobile/h2" } } }
+		},
 		{
 			hasBreadcrumb: true,
 			variant: "minimal",
@@ -344,6 +390,22 @@ var pageHeaderSlotRecipe = defineSlotRecipe({
 			false: {}
 		},
 		/**
+		* From the component's `onMenuClick`: the mobile layout for a page with a sidebar
+		* (`PageHeader - mobile`, `hasSidebar=true`). The title row tightens up — 12 above, 8 to the
+		* trail — and the title steps down to leave the section name as the page's large heading. All
+		* `base`: from `tablet` the header is the ordinary one.
+		*/
+		hasSidebar: {
+			true: {
+				headerBlock: { base: {
+					gap: "8",
+					paddingBlockStart: "12"
+				} },
+				title: { base: { textStyle: "heading/mobile/h3" } }
+			},
+			false: {}
+		},
+		/**
 		* From the component's `showDivider`. The header's background is the page's, so without the line
 		* the bottom padding reads as nothing but a margin -- one the page cannot shrink -- and it goes
 		* with the line. Flat values, so the collapsed row's `tablet` padding still centres it, and
@@ -407,6 +469,7 @@ var pageHeaderSlotRecipe = defineSlotRecipe({
 		hasBreadcrumb: false,
 		hasControls: false,
 		hasDivider: true,
+		hasSidebar: false,
 		isSticky: false,
 		variant: "default"
 	}