@bitrise/bitkit-v2 0.3.479 → 0.3.480-beta.3052

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

@@ -0,0 +1,37 @@
+import { BoxProps } from '@chakra-ui/react/box';
+import { ReactNode } from 'react';
+export interface BitkitUIHeaderProps extends Omit<BoxProps, 'children'> {
+    /**
+     * Content below the bar, inside the header itself — account-wide notices and the like. It is
+     * part of the header rather than the page, so a pinned header keeps it pinned too, and a page
+     * reserving room for the header has one element to measure.
+     */
+    banner?: ReactNode;
+    /** The trailing controls, in the order they should appear. */
+    children?: ReactNode;
+    /**
+     * The slot before the logo, shown only below the `tablet` breakpoint. It takes a
+     * `BitkitUIHeader.NavButton`, which opens the navigation drawer, or a `BitkitUIHeader.Control`
+     * for an account with no workspace to navigate yet.
+     *
+     * It is a slot rather than a child because the design fixes where it goes: children all land in
+     * the trailing cluster, on the far side of the logo.
+     */
+    leading?: ReactNode;
+    /** Where the logo links to. */
+    logoHref?: string;
+}
+export { uiHeaderHeight, uiHeaderHeightPx } from '../../theme/slot-recipes/UIHeader.recipe';
+export { type BitkitUIHeaderAccountProps } from './UIHeaderAccount';
+export { type BitkitUIHeaderButtonProps } from './UIHeaderButton';
+export { type BitkitUIHeaderControlAsAnchorProps, type BitkitUIHeaderControlAsButtonProps, type BitkitUIHeaderControlProps, } from './UIHeaderControl';
+export { type BitkitUIHeaderNavButtonProps } from './UIHeaderNavButton';
+export { type BitkitUIHeaderSearchProps } from './UIHeaderSearch';
+declare const _default: import('react').ForwardRefExoticComponent<BitkitUIHeaderProps & import('react').RefAttributes<HTMLElement>> & {
+    Account: import('react').ForwardRefExoticComponent<import('./UIHeaderAccount').BitkitUIHeaderAccountProps & import('react').RefAttributes<HTMLButtonElement>>;
+    Button: import('react').ForwardRefExoticComponent<import('./UIHeaderButton').BitkitUIHeaderButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
+    Control: import('react').ForwardRefExoticComponent<import('./UIHeaderControl').BitkitUIHeaderControlProps & import('react').RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+    NavButton: import('react').ForwardRefExoticComponent<import('./UIHeaderNavButton').BitkitUIHeaderNavButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
+    Search: import('react').ForwardRefExoticComponent<import('./UIHeaderSearch').BitkitUIHeaderSearchProps & import('react').RefAttributes<HTMLDivElement>>;
+};
+export default _default;

package/dist/components/BitkitUIHeader/BitkitUIHeader.js

@@ -0,0 +1,112 @@
+import { withSubComponents } from "../../utilities/withSubComponents.js";
+import BitriseLogo from "./BitriseLogo.js";
+import { UIHeaderContextProvider } from "./UIHeaderContext.js";
+import uiHeaderPart from "./uiHeaderPart.js";
+import UIHeaderControl from "./UIHeaderControl.js";
+import UIHeaderAccount from "./UIHeaderAccount.js";
+import UIHeaderButton from "./UIHeaderButton.js";
+import UIHeaderNavButton from "./UIHeaderNavButton.js";
+import UIHeaderSearch from "./UIHeaderSearch.js";
+import { uiHeaderHeight } from "../../theme/slot-recipes/UIHeader.recipe.js";
+import { Box } from "@chakra-ui/react/box";
+import { useSlotRecipe } from "@chakra-ui/react/styled-system";
+import { forwardRef, useMemo, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region lib/components/BitkitUIHeader/BitkitUIHeader.tsx
+/**
+* The platform's top bar: the Bitrise logo, and the controls for everything that is not navigation
+* — search, changelog, help, notifications, the account.
+*
+* ```tsx
+* <BitkitUIHeader leading={<BitkitUIHeader.NavButton name={workspace} onClick={openNav} />}>
+*   <BitkitUIHeader.Button icon={IconSparkle} onClick={askAI} variant="secondary">Ask AI</BitkitUIHeader.Button>
+*   <BitkitUIHeader.Search onOpenChange={setSearchOpen} onValueChange={setQuery} open={searchOpen} value={query} />
+*   <BitkitUIHeader.Control icon={IconBell} label="Notifications" onClick={toggleNotifications} selected={isOpen} />
+*   <BitkitUIHeader.Account name={user.name} onClick={toggleAccount} src={user.avatar} />
+* </BitkitUIHeader>
+* ```
+*
+* It does not position itself. The consumer decides whether it scrolls with the page or is pinned
+* to the top of it, which is what lets a page put its own chrome above the header. Pin it with the
+* style props the root forwards, and reserve `uiHeaderHeight` for it in the page below.
+*
+* The panels the controls open are the consumer's: a control takes a `selected` flag and paints
+* itself as the open one, and nothing more. That keeps a drawer's content, placement and state
+* where the product can see them.
+*
+* It carries its own responsive behaviour and needs no breakpoint hook. Below `tablet` the
+* `leading` slot appears, the logo centres, the account button becomes an icon, and search stops
+* opening a field in the bar.
+*/
+var BitkitUIHeader = forwardRef((props, ref) => {
+	const { banner, children, css, leading, logoHref = "/", ...rest } = props;
+	const styles = useSlotRecipe({ key: "uiHeader" })();
+	const barRef = useRef(null);
+	const context = useMemo(() => ({
+		barRef,
+		styles
+	}), [styles]);
+	return /* @__PURE__ */ jsx(UIHeaderContextProvider, {
+		value: context,
+		children: /* @__PURE__ */ jsx(Box, {
+			ref,
+			asChild: true,
+			...rest,
+			css: [styles.root, css],
+			children: /* @__PURE__ */ jsxs("header", {
+				...uiHeaderPart("root"),
+				children: [/* @__PURE__ */ jsxs(Box, {
+					ref: barRef,
+					css: styles.bar,
+					...uiHeaderPart("bar"),
+					children: [
+						/* @__PURE__ */ jsx(Box, {
+							css: styles.leading,
+							...uiHeaderPart("leading"),
+							children: leading
+						}),
+						/* @__PURE__ */ jsx(Box, {
+							css: styles.spacer,
+							...uiHeaderPart("spacer")
+						}),
+						/* @__PURE__ */ jsx(Box, {
+							css: styles.logoBlock,
+							...uiHeaderPart("logo-block"),
+							children: /* @__PURE__ */ jsx(Box, {
+								asChild: true,
+								css: styles.logoLink,
+								children: /* @__PURE__ */ jsx("a", {
+									"aria-label": "Bitrise",
+									href: logoHref,
+									...uiHeaderPart("logo-link"),
+									children: /* @__PURE__ */ jsx(BitriseLogo, {})
+								})
+							})
+						}),
+						/* @__PURE__ */ jsx(Box, {
+							css: styles.actions,
+							...uiHeaderPart("actions"),
+							children
+						})
+					]
+				}), !!banner && /* @__PURE__ */ jsx(Box, {
+					css: styles.banner,
+					...uiHeaderPart("banner"),
+					children: banner
+				})]
+			})
+		})
+	});
+});
+BitkitUIHeader.displayName = "BitkitUIHeader";
+var BitkitUIHeader_default = withSubComponents(BitkitUIHeader, {
+	Account: UIHeaderAccount,
+	Button: UIHeaderButton,
+	Control: UIHeaderControl,
+	NavButton: UIHeaderNavButton,
+	Search: UIHeaderSearch
+});
+//#endregion
+export { BitkitUIHeader_default as default, uiHeaderHeight };
+
+//# sourceMappingURL=BitkitUIHeader.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BitkitUIHeader.js","names":[],"sources":["../../../lib/components/BitkitUIHeader/BitkitUIHeader.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { forwardRef, type ReactNode, useMemo, useRef } from 'react';\n\nimport { withSubComponents } from '../../utilities/withSubComponents';\nimport BitriseLogo from './BitriseLogo';\nimport UIHeaderAccount from './UIHeaderAccount';\nimport UIHeaderButton from './UIHeaderButton';\nimport { UIHeaderContextProvider } from './UIHeaderContext';\nimport UIHeaderControl from './UIHeaderControl';\nimport UIHeaderNavButton from './UIHeaderNavButton';\nimport uiHeaderPart from './uiHeaderPart';\nimport UIHeaderSearch from './UIHeaderSearch';\n\nexport interface BitkitUIHeaderProps extends Omit<BoxProps, 'children'> {\n  /**\n   * Content below the bar, inside the header itself — account-wide notices and the like. It is\n   * part of the header rather than the page, so a pinned header keeps it pinned too, and a page\n   * reserving room for the header has one element to measure.\n   */\n  banner?: ReactNode;\n  /** The trailing controls, in the order they should appear. */\n  children?: ReactNode;\n  /**\n   * The slot before the logo, shown only below the `tablet` breakpoint. It takes a\n   * `BitkitUIHeader.NavButton`, which opens the navigation drawer, or a `BitkitUIHeader.Control`\n   * for an account with no workspace to navigate yet.\n   *\n   * It is a slot rather than a child because the design fixes where it goes: children all land in\n   * the trailing cluster, on the far side of the logo.\n   */\n  leading?: ReactNode;\n  /** Where the logo links to. */\n  logoHref?: string;\n}\n\n/**\n * The platform's top bar: the Bitrise logo, and the controls for everything that is not navigation\n * — search, changelog, help, notifications, the account.\n *\n * ```tsx\n * <BitkitUIHeader leading={<BitkitUIHeader.NavButton name={workspace} onClick={openNav} />}>\n *   <BitkitUIHeader.Button icon={IconSparkle} onClick={askAI} variant=\"secondary\">Ask AI</BitkitUIHeader.Button>\n *   <BitkitUIHeader.Search onOpenChange={setSearchOpen} onValueChange={setQuery} open={searchOpen} value={query} />\n *   <BitkitUIHeader.Control icon={IconBell} label=\"Notifications\" onClick={toggleNotifications} selected={isOpen} />\n *   <BitkitUIHeader.Account name={user.name} onClick={toggleAccount} src={user.avatar} />\n * </BitkitUIHeader>\n * ```\n *\n * It does not position itself. The consumer decides whether it scrolls with the page or is pinned\n * to the top of it, which is what lets a page put its own chrome above the header. Pin it with the\n * style props the root forwards, and reserve `uiHeaderHeight` for it in the page below.\n *\n * The panels the controls open are the consumer's: a control takes a `selected` flag and paints\n * itself as the open one, and nothing more. That keeps a drawer's content, placement and state\n * where the product can see them.\n *\n * It carries its own responsive behaviour and needs no breakpoint hook. Below `tablet` the\n * `leading` slot appears, the logo centres, the account button becomes an icon, and search stops\n * opening a field in the bar.\n */\nconst BitkitUIHeader = forwardRef<HTMLElement, BitkitUIHeaderProps>((props, ref) => {\n  const { banner, children, css, leading, logoHref = '/', ...rest } = props;\n\n  const recipe = useSlotRecipe({ key: 'uiHeader' });\n  const styles = recipe();\n\n  const barRef = useRef<HTMLDivElement>(null);\n\n  const context = useMemo(() => ({ barRef, styles }), [styles]);\n\n  return (\n    <UIHeaderContextProvider value={context}>\n      <Box ref={ref} asChild {...rest} css={[styles.root, css]}>\n        <header {...uiHeaderPart('root')}>\n          <Box ref={barRef} css={styles.bar} {...uiHeaderPart('bar')}>\n            <Box css={styles.leading} {...uiHeaderPart('leading')}>\n              {leading}\n            </Box>\n            <Box css={styles.spacer} {...uiHeaderPart('spacer')} />\n            <Box css={styles.logoBlock} {...uiHeaderPart('logo-block')}>\n              <Box asChild css={styles.logoLink}>\n                <a aria-label=\"Bitrise\" href={logoHref} {...uiHeaderPart('logo-link')}>\n                  <BitriseLogo />\n                </a>\n              </Box>\n            </Box>\n            <Box css={styles.actions} {...uiHeaderPart('actions')}>\n              {children}\n            </Box>\n          </Box>\n          {!!banner && (\n            <Box css={styles.banner} {...uiHeaderPart('banner')}>\n              {banner}\n            </Box>\n          )}\n        </header>\n      </Box>\n    </UIHeaderContextProvider>\n  );\n});\n\nexport { uiHeaderHeight, uiHeaderHeightPx } from '../../theme/slot-recipes/UIHeader.recipe';\nexport { type BitkitUIHeaderAccountProps } from './UIHeaderAccount';\nexport { type BitkitUIHeaderButtonProps } from './UIHeaderButton';\nexport {\n  type BitkitUIHeaderControlAsAnchorProps,\n  type BitkitUIHeaderControlAsButtonProps,\n  type BitkitUIHeaderControlProps,\n} from './UIHeaderControl';\nexport { type BitkitUIHeaderNavButtonProps } from './UIHeaderNavButton';\nexport { type BitkitUIHeaderSearchProps } from './UIHeaderSearch';\n\nBitkitUIHeader.displayName = 'BitkitUIHeader';\n\nexport default withSubComponents(BitkitUIHeader, {\n  Account: UIHeaderAccount,\n  Button: UIHeaderButton,\n  Control: UIHeaderControl,\n  NavButton: UIHeaderNavButton,\n  Search: UIHeaderSearch,\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6DA,IAAM,iBAAiB,YAA8C,OAAO,QAAQ;CAClF,MAAM,EAAE,QAAQ,UAAU,KAAK,SAAS,WAAW,KAAK,GAAG,SAAS;CAGpE,MAAM,SADS,cAAc,EAAE,KAAK,WAAW,CAChC,CAAA,CAAO;CAEtB,MAAM,SAAS,OAAuB,IAAI;CAE1C,MAAM,UAAU,eAAe;EAAE;EAAQ;CAAO,IAAI,CAAC,MAAM,CAAC;CAE5D,OACE,oBAAC,yBAAD;EAAyB,OAAO;EAC9B,UAAA,oBAAC,KAAD;GAAU;GAAK,SAAA;GAAQ,GAAI;GAAM,KAAK,CAAC,OAAO,MAAM,GAAG;GACrD,UAAA,qBAAC,UAAD;IAAQ,GAAI,aAAa,MAAM;IAA/B,UAAA,CACE,qBAAC,KAAD;KAAK,KAAK;KAAQ,KAAK,OAAO;KAAK,GAAI,aAAa,KAAK;KAAzD,UAAA;MACE,oBAAC,KAAD;OAAK,KAAK,OAAO;OAAS,GAAI,aAAa,SAAS;OACjD,UAAA;MACE,CAAA;MACL,oBAAC,KAAD;OAAK,KAAK,OAAO;OAAQ,GAAI,aAAa,QAAQ;MAAI,CAAA;MACtD,oBAAC,KAAD;OAAK,KAAK,OAAO;OAAW,GAAI,aAAa,YAAY;OACvD,UAAA,oBAAC,KAAD;QAAK,SAAA;QAAQ,KAAK,OAAO;QACvB,UAAA,oBAAC,KAAD;SAAG,cAAW;SAAU,MAAM;SAAU,GAAI,aAAa,WAAW;SAClE,UAAA,oBAAC,aAAD,CAAc,CAAA;QACb,CAAA;OACA,CAAA;MACF,CAAA;MACL,oBAAC,KAAD;OAAK,KAAK,OAAO;OAAS,GAAI,aAAa,SAAS;OACjD;MACE,CAAA;KACF;IACJ,CAAA,GAAA,CAAC,CAAC,UACD,oBAAC,KAAD;KAAK,KAAK,OAAO;KAAQ,GAAI,aAAa,QAAQ;KAC/C,UAAA;IACE,CAAA,CAED;;EACL,CAAA;CACkB,CAAA;AAE7B,CAAC;AAaD,eAAe,cAAc;AAE7B,IAAA,yBAAe,kBAAkB,gBAAgB;CAC/C,SAAS;CACT,QAAQ;CACR,SAAS;CACT,WAAW;CACX,QAAQ;AACV,CAAC"}

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

@@ -0,0 +1,10 @@
+import { SVGProps } from 'react';
+/**
+ * The Bitrise wordmark, at the one size the header draws it. It is monochrome and follows the
+ * surrounding `color`.
+ *
+ * It is hand-maintained rather than generated: the icon pipeline only emits 16 and 24 square
+ * icons, and this is neither.
+ */
+declare const BitriseLogo: (props: SVGProps<SVGSVGElement>) => import('react').JSX.Element;
+export default BitriseLogo;

package/dist/components/BitkitUIHeader/BitriseLogo.js

@@ -0,0 +1,86 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region lib/components/BitkitUIHeader/BitriseLogo.tsx
+/**
+* The Bitrise wordmark, at the one size the header draws it. It is monochrome and follows the
+* surrounding `color`.
+*
+* It is hand-maintained rather than generated: the icon pipeline only emits 16 and 24 square
+* icons, and this is neither.
+*/
+var BitriseLogo = (props) => /* @__PURE__ */ jsxs("svg", {
+	"aria-hidden": "true",
+	fill: "none",
+	height: "24",
+	viewBox: "0 0 84.2553 24",
+	width: "84.2553",
+	xmlns: "http://www.w3.org/2000/svg",
+	...props,
+	children: [
+		/* @__PURE__ */ jsx("path", {
+			d: "M16.055 1.24337C16.055 1.92998 15.4915 2.4866 14.7962 2.4866C14.101 2.4866 13.5374 1.92998 13.5374 1.24337C13.5374 0.556762 14.101 0 14.7962 0C15.4915 0 16.055 0.556762 16.055 1.24337Z",
+			fill: "currentColor"
+		}),
+		/* @__PURE__ */ jsx("path", {
+			d: "M5.40952 14.0537C5.40952 12.9456 6.31909 12.0471 7.44126 12.0471C8.56343 12.0471 9.47301 12.9456 9.47301 14.0537H5.40952Z",
+			fill: "currentColor"
+		}),
+		/* @__PURE__ */ jsx("path", {
+			d: "M11.5057 16.0605C11.5057 17.8552 12.9789 19.3103 14.7963 19.3103C16.6135 19.3103 18.0868 17.8552 18.0868 16.0605H11.5057Z",
+			fill: "currentColor"
+		}),
+		/* @__PURE__ */ jsx("path", {
+			d: "M22.1651 12.0475C21.0429 12.0475 20.1333 12.946 20.1333 14.0541H24.1968C24.1968 12.946 23.2873 12.0475 22.1651 12.0475Z",
+			fill: "currentColor"
+		}),
+		/* @__PURE__ */ jsx("path", {
+			clipRule: "evenodd",
+			d: "M29.0271 13.7727C28.6855 11.4818 28.1742 9.16488 27.8054 7.62488C27.3658 5.7897 25.7901 4.47799 23.8847 4.36079C22.014 4.24563 18.9187 4.10822 14.7962 4.10822C10.6735 4.10822 7.57817 4.24563 5.70779 4.36079C3.80207 4.47799 2.22644 5.7897 1.78696 7.62488C1.41816 9.16415 0.906981 11.4802 0.565118 13.7727C0.33397 15.3226 0.147138 17.1531 0.00962665 19.2132C-0.0672263 20.3612 0.318069 21.4661 1.09411 22.3243C1.87132 23.1837 2.94138 23.6865 4.10742 23.7404C6.66875 23.8588 10.6022 24 14.7962 24C18.9898 24 22.9234 23.8588 25.4849 23.7404C26.651 23.6865 27.721 23.1837 28.4981 22.3243C29.2741 21.4663 29.6594 20.3613 29.5826 19.2132C29.4452 17.1531 29.2582 15.3226 29.0271 13.7727ZM26.9827 20.9878C26.572 21.4417 26.0064 21.7074 25.3899 21.736C22.85 21.8534 18.9503 21.9932 14.796 21.9932C10.6415 21.9932 6.7419 21.8534 4.20222 21.736C3.58563 21.7074 3.01998 21.4417 2.60921 20.9876C2.19962 20.5347 1.9963 19.9513 2.03679 19.3452C2.17077 17.3385 2.35186 15.5621 2.57505 14.0649C2.90632 11.8433 3.40454 9.58787 3.76407 8.08669C3.99595 7.11785 4.82794 6.42542 5.83395 6.36362C7.67562 6.25021 10.7256 6.11498 14.796 6.11498C18.8661 6.11498 21.9162 6.25021 23.7582 6.36362C24.7642 6.42542 25.5959 7.11785 25.8279 8.08669C26.1878 9.58845 26.6858 11.8447 27.0168 14.0649C27.24 15.5621 27.4212 17.3385 27.5552 19.3452C27.5956 19.9514 27.3922 20.5348 26.9827 20.9878Z",
+			fill: "currentColor",
+			fillRule: "evenodd"
+		}),
+		/* @__PURE__ */ jsx("path", {
+			clipRule: "evenodd",
+			d: "M40.174 19.5834C42.3057 19.5834 44.1815 17.7307 44.1815 15.2885C44.1815 12.8464 42.3057 10.9939 40.174 10.9939C38.554 10.9939 37.7013 12.1727 37.7013 12.1727V7.62542H35.3991V19.415H37.7013V18.4044C37.7013 18.4044 38.554 19.5834 40.174 19.5834ZM39.7479 13.0148C40.8562 13.0148 41.7942 13.9412 41.7942 15.2885C41.7942 16.636 40.8562 17.5624 39.7479 17.5624C38.6394 17.5624 37.7014 16.636 37.7014 15.2885C37.7014 13.9412 38.6394 13.0148 39.7479 13.0148Z",
+			fill: "currentColor",
+			fillRule: "evenodd"
+		}),
+		/* @__PURE__ */ jsx("path", {
+			d: "M45.9719 19.415H48.2741V11.1623H45.9719V19.415Z",
+			fill: "currentColor"
+		}),
+		/* @__PURE__ */ jsx("path", {
+			d: "M47.0803 10.0675C46.313 10.0675 45.8014 9.56222 45.8014 8.80421C45.8014 8.04621 46.313 7.54107 47.0803 7.54107C47.9329 7.54107 48.4447 8.04621 48.4447 8.80421C48.4447 9.56222 47.9329 10.0675 47.0803 10.0675Z",
+			fill: "currentColor"
+		}),
+		/* @__PURE__ */ jsx("path", {
+			d: "M53.646 8.72005H51.5995V10.2359C51.5995 10.9096 51.1731 11.3307 50.6615 11.3307H49.8942V13.3517H51.3438V16.7202C51.3438 18.6571 52.2816 19.5834 53.987 19.5834C54.8397 19.5834 55.5218 19.3308 55.5218 19.3308V17.3939C55.5218 17.3939 55.1807 17.5624 54.6692 17.5624C54.0722 17.5624 53.646 17.1413 53.646 16.6358V13.3517H55.3512V11.3307H53.646V8.72005Z",
+			fill: "currentColor"
+		}),
+		/* @__PURE__ */ jsx("path", {
+			d: "M62.513 13.3516C62.513 13.3516 62.2571 13.2676 61.7457 13.2676C60.5518 13.2676 59.7844 14.0255 59.7844 15.457V19.4149H57.4822V11.1622H59.7844V12.1728C59.7844 12.1728 60.6372 11.0779 62.1719 11.0779H62.513V13.3516Z",
+			fill: "currentColor"
+		}),
+		/* @__PURE__ */ jsx("path", {
+			d: "M66.1792 19.415H63.877V11.1623H66.1792V19.415Z",
+			fill: "currentColor"
+		}),
+		/* @__PURE__ */ jsx("path", {
+			d: "M63.7067 8.80421C63.7067 9.56222 64.2183 10.0675 64.9857 10.0675C65.8384 10.0675 66.35 9.56222 66.35 8.80421C66.35 8.04621 65.8384 7.54107 64.9857 7.54107C64.2183 7.54107 63.7067 8.04621 63.7067 8.80421Z",
+			fill: "currentColor"
+		}),
+		/* @__PURE__ */ jsx("path", {
+			d: "M73.086 13.6044C73.086 13.6044 72.5744 12.9307 71.7218 12.9307C71.0397 12.9307 70.6986 13.2676 70.6986 13.6044C70.6986 14.0693 71.2955 14.2592 72.0184 14.4892C73.1285 14.8423 74.5356 15.29 74.5356 16.9729C74.5356 18.4044 73.3418 19.5834 71.2102 19.5834C68.8226 19.5834 67.7995 18.0675 67.7995 18.0675L69.0785 16.8045C69.0785 16.8045 69.7607 17.7307 70.8691 17.7307C71.6366 17.7307 71.9776 17.394 71.9776 16.9729C71.9776 16.4614 71.3485 16.2592 70.5998 16.0185C69.4994 15.6648 68.1407 15.2281 68.1407 13.6044C68.1407 12.3411 69.5049 10.9939 71.3807 10.9939C73.3418 10.9939 74.2798 12.2569 74.2798 12.2569L73.086 13.6044Z",
+			fill: "currentColor"
+		}),
+		/* @__PURE__ */ jsx("path", {
+			clipRule: "evenodd",
+			d: "M80.333 17.6466C79.054 17.6466 78.2865 16.8887 78.1161 16.0465H84.1701C84.1701 16.0465 84.2553 15.7097 84.2553 15.1201C84.2553 12.7623 82.4647 10.9939 80.0771 10.9939C77.6897 10.9939 75.7286 12.9307 75.7286 15.2885C75.7286 17.6466 77.6897 19.5834 80.1624 19.5834C82.4647 19.5834 83.7437 18.1517 83.7437 18.1517L82.55 16.636C82.55 16.636 81.7825 17.6466 80.333 17.6466ZM81.9533 14.4464H78.1162C78.3719 13.6044 79.0542 12.9307 80.0773 12.9307C81.1005 12.9307 81.7826 13.6044 81.9533 14.4464Z",
+			fill: "currentColor",
+			fillRule: "evenodd"
+		})
+	]
+});
+//#endregion
+export { BitriseLogo as default };
+
+//# sourceMappingURL=BitriseLogo.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BitriseLogo.js","names":[],"sources":["../../../lib/components/BitkitUIHeader/BitriseLogo.tsx"],"sourcesContent":["import { type SVGProps } from 'react';\n\n/**\n * The Bitrise wordmark, at the one size the header draws it. It is monochrome and follows the\n * surrounding `color`.\n *\n * It is hand-maintained rather than generated: the icon pipeline only emits 16 and 24 square\n * icons, and this is neither.\n */\nconst BitriseLogo = (props: SVGProps<SVGSVGElement>) => (\n  <svg\n    aria-hidden=\"true\"\n    fill=\"none\"\n    height=\"24\"\n    viewBox=\"0 0 84.2553 24\"\n    width=\"84.2553\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    {...props}\n  >\n    <path\n      d=\"M16.055 1.24337C16.055 1.92998 15.4915 2.4866 14.7962 2.4866C14.101 2.4866 13.5374 1.92998 13.5374 1.24337C13.5374 0.556762 14.101 0 14.7962 0C15.4915 0 16.055 0.556762 16.055 1.24337Z\"\n      fill=\"currentColor\"\n    />\n    <path\n      d=\"M5.40952 14.0537C5.40952 12.9456 6.31909 12.0471 7.44126 12.0471C8.56343 12.0471 9.47301 12.9456 9.47301 14.0537H5.40952Z\"\n      fill=\"currentColor\"\n    />\n    <path\n      d=\"M11.5057 16.0605C11.5057 17.8552 12.9789 19.3103 14.7963 19.3103C16.6135 19.3103 18.0868 17.8552 18.0868 16.0605H11.5057Z\"\n      fill=\"currentColor\"\n    />\n    <path\n      d=\"M22.1651 12.0475C21.0429 12.0475 20.1333 12.946 20.1333 14.0541H24.1968C24.1968 12.946 23.2873 12.0475 22.1651 12.0475Z\"\n      fill=\"currentColor\"\n    />\n    <path\n      clipRule=\"evenodd\"\n      d=\"M29.0271 13.7727C28.6855 11.4818 28.1742 9.16488 27.8054 7.62488C27.3658 5.7897 25.7901 4.47799 23.8847 4.36079C22.014 4.24563 18.9187 4.10822 14.7962 4.10822C10.6735 4.10822 7.57817 4.24563 5.70779 4.36079C3.80207 4.47799 2.22644 5.7897 1.78696 7.62488C1.41816 9.16415 0.906981 11.4802 0.565118 13.7727C0.33397 15.3226 0.147138 17.1531 0.00962665 19.2132C-0.0672263 20.3612 0.318069 21.4661 1.09411 22.3243C1.87132 23.1837 2.94138 23.6865 4.10742 23.7404C6.66875 23.8588 10.6022 24 14.7962 24C18.9898 24 22.9234 23.8588 25.4849 23.7404C26.651 23.6865 27.721 23.1837 28.4981 22.3243C29.2741 21.4663 29.6594 20.3613 29.5826 19.2132C29.4452 17.1531 29.2582 15.3226 29.0271 13.7727ZM26.9827 20.9878C26.572 21.4417 26.0064 21.7074 25.3899 21.736C22.85 21.8534 18.9503 21.9932 14.796 21.9932C10.6415 21.9932 6.7419 21.8534 4.20222 21.736C3.58563 21.7074 3.01998 21.4417 2.60921 20.9876C2.19962 20.5347 1.9963 19.9513 2.03679 19.3452C2.17077 17.3385 2.35186 15.5621 2.57505 14.0649C2.90632 11.8433 3.40454 9.58787 3.76407 8.08669C3.99595 7.11785 4.82794 6.42542 5.83395 6.36362C7.67562 6.25021 10.7256 6.11498 14.796 6.11498C18.8661 6.11498 21.9162 6.25021 23.7582 6.36362C24.7642 6.42542 25.5959 7.11785 25.8279 8.08669C26.1878 9.58845 26.6858 11.8447 27.0168 14.0649C27.24 15.5621 27.4212 17.3385 27.5552 19.3452C27.5956 19.9514 27.3922 20.5348 26.9827 20.9878Z\"\n      fill=\"currentColor\"\n      fillRule=\"evenodd\"\n    />\n    <path\n      clipRule=\"evenodd\"\n      d=\"M40.174 19.5834C42.3057 19.5834 44.1815 17.7307 44.1815 15.2885C44.1815 12.8464 42.3057 10.9939 40.174 10.9939C38.554 10.9939 37.7013 12.1727 37.7013 12.1727V7.62542H35.3991V19.415H37.7013V18.4044C37.7013 18.4044 38.554 19.5834 40.174 19.5834ZM39.7479 13.0148C40.8562 13.0148 41.7942 13.9412 41.7942 15.2885C41.7942 16.636 40.8562 17.5624 39.7479 17.5624C38.6394 17.5624 37.7014 16.636 37.7014 15.2885C37.7014 13.9412 38.6394 13.0148 39.7479 13.0148Z\"\n      fill=\"currentColor\"\n      fillRule=\"evenodd\"\n    />\n    <path d=\"M45.9719 19.415H48.2741V11.1623H45.9719V19.415Z\" fill=\"currentColor\" />\n    <path\n      d=\"M47.0803 10.0675C46.313 10.0675 45.8014 9.56222 45.8014 8.80421C45.8014 8.04621 46.313 7.54107 47.0803 7.54107C47.9329 7.54107 48.4447 8.04621 48.4447 8.80421C48.4447 9.56222 47.9329 10.0675 47.0803 10.0675Z\"\n      fill=\"currentColor\"\n    />\n    <path\n      d=\"M53.646 8.72005H51.5995V10.2359C51.5995 10.9096 51.1731 11.3307 50.6615 11.3307H49.8942V13.3517H51.3438V16.7202C51.3438 18.6571 52.2816 19.5834 53.987 19.5834C54.8397 19.5834 55.5218 19.3308 55.5218 19.3308V17.3939C55.5218 17.3939 55.1807 17.5624 54.6692 17.5624C54.0722 17.5624 53.646 17.1413 53.646 16.6358V13.3517H55.3512V11.3307H53.646V8.72005Z\"\n      fill=\"currentColor\"\n    />\n    <path\n      d=\"M62.513 13.3516C62.513 13.3516 62.2571 13.2676 61.7457 13.2676C60.5518 13.2676 59.7844 14.0255 59.7844 15.457V19.4149H57.4822V11.1622H59.7844V12.1728C59.7844 12.1728 60.6372 11.0779 62.1719 11.0779H62.513V13.3516Z\"\n      fill=\"currentColor\"\n    />\n    <path d=\"M66.1792 19.415H63.877V11.1623H66.1792V19.415Z\" fill=\"currentColor\" />\n    <path\n      d=\"M63.7067 8.80421C63.7067 9.56222 64.2183 10.0675 64.9857 10.0675C65.8384 10.0675 66.35 9.56222 66.35 8.80421C66.35 8.04621 65.8384 7.54107 64.9857 7.54107C64.2183 7.54107 63.7067 8.04621 63.7067 8.80421Z\"\n      fill=\"currentColor\"\n    />\n    <path\n      d=\"M73.086 13.6044C73.086 13.6044 72.5744 12.9307 71.7218 12.9307C71.0397 12.9307 70.6986 13.2676 70.6986 13.6044C70.6986 14.0693 71.2955 14.2592 72.0184 14.4892C73.1285 14.8423 74.5356 15.29 74.5356 16.9729C74.5356 18.4044 73.3418 19.5834 71.2102 19.5834C68.8226 19.5834 67.7995 18.0675 67.7995 18.0675L69.0785 16.8045C69.0785 16.8045 69.7607 17.7307 70.8691 17.7307C71.6366 17.7307 71.9776 17.394 71.9776 16.9729C71.9776 16.4614 71.3485 16.2592 70.5998 16.0185C69.4994 15.6648 68.1407 15.2281 68.1407 13.6044C68.1407 12.3411 69.5049 10.9939 71.3807 10.9939C73.3418 10.9939 74.2798 12.2569 74.2798 12.2569L73.086 13.6044Z\"\n      fill=\"currentColor\"\n    />\n    <path\n      clipRule=\"evenodd\"\n      d=\"M80.333 17.6466C79.054 17.6466 78.2865 16.8887 78.1161 16.0465H84.1701C84.1701 16.0465 84.2553 15.7097 84.2553 15.1201C84.2553 12.7623 82.4647 10.9939 80.0771 10.9939C77.6897 10.9939 75.7286 12.9307 75.7286 15.2885C75.7286 17.6466 77.6897 19.5834 80.1624 19.5834C82.4647 19.5834 83.7437 18.1517 83.7437 18.1517L82.55 16.636C82.55 16.636 81.7825 17.6466 80.333 17.6466ZM81.9533 14.4464H78.1162C78.3719 13.6044 79.0542 12.9307 80.0773 12.9307C81.1005 12.9307 81.7826 13.6044 81.9533 14.4464Z\"\n      fill=\"currentColor\"\n      fillRule=\"evenodd\"\n    />\n  </svg>\n);\n\nexport default BitriseLogo;\n"],"mappings":";;;;;;;;;AASA,IAAM,eAAe,UACnB,qBAAC,OAAD;CACE,eAAY;CACZ,MAAK;CACL,QAAO;CACP,SAAQ;CACR,OAAM;CACN,OAAM;CACN,GAAI;CAPN,UAAA;EASE,oBAAC,QAAD;GACE,GAAE;GACF,MAAK;EACN,CAAA;EACD,oBAAC,QAAD;GACE,GAAE;GACF,MAAK;EACN,CAAA;EACD,oBAAC,QAAD;GACE,GAAE;GACF,MAAK;EACN,CAAA;EACD,oBAAC,QAAD;GACE,GAAE;GACF,MAAK;EACN,CAAA;EACD,oBAAC,QAAD;GACE,UAAS;GACT,GAAE;GACF,MAAK;GACL,UAAS;EACV,CAAA;EACD,oBAAC,QAAD;GACE,UAAS;GACT,GAAE;GACF,MAAK;GACL,UAAS;EACV,CAAA;EACD,oBAAC,QAAD;GAAM,GAAE;GAAkD,MAAK;EAAgB,CAAA;EAC/E,oBAAC,QAAD;GACE,GAAE;GACF,MAAK;EACN,CAAA;EACD,oBAAC,QAAD;GACE,GAAE;GACF,MAAK;EACN,CAAA;EACD,oBAAC,QAAD;GACE,GAAE;GACF,MAAK;EACN,CAAA;EACD,oBAAC,QAAD;GAAM,GAAE;GAAiD,MAAK;EAAgB,CAAA;EAC9E,oBAAC,QAAD;GACE,GAAE;GACF,MAAK;EACN,CAAA;EACD,oBAAC,QAAD;GACE,GAAE;GACF,MAAK;EACN,CAAA;EACD,oBAAC,QAAD;GACE,UAAS;GACT,GAAE;GACF,MAAK;GACL,UAAS;EACV,CAAA;CACE"}

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

@@ -0,0 +1,23 @@
+import { HTMLChakraProps } from '@chakra-ui/react/styled-system';
+import { BitkitUIHeaderBadge } from './UIHeaderControl';
+export interface BitkitUIHeaderAccountProps extends Omit<HTMLChakraProps<'button'>, 'children' | 'disabled'> {
+    /** Marks the account as carrying something unread, like the other controls. */
+    badge?: BitkitUIHeaderBadge;
+    /**
+     * The accessible name. Defaults to `Account: ` and the signed-in person's name — the name alone
+     * would announce as a person rather than as what the button opens.
+     */
+    label?: string;
+    /** Who is signed in. Shown as the avatar's initials when there is no picture. */
+    name: string;
+    /** Marks the account panel as open. */
+    selected?: boolean;
+    /** The signed-in person's picture. Without one the avatar falls back to their initials. */
+    src?: string;
+}
+/**
+ * The account button at the trailing end of the bar. It shows the signed-in person's avatar on
+ * desktop and a plain icon on mobile, where the bar has no room for a picture.
+ */
+declare const UIHeaderAccount: import('react').ForwardRefExoticComponent<BitkitUIHeaderAccountProps & import('react').RefAttributes<HTMLButtonElement>>;
+export default UIHeaderAccount;

package/dist/components/BitkitUIHeader/UIHeaderAccount.js

@@ -0,0 +1,40 @@
+import IconPerson from "../../icons/IconPerson.js";
+import BitkitAvatar from "../BitkitAvatar/BitkitAvatar.js";
+import { useUIHeaderContext } from "./UIHeaderContext.js";
+import uiHeaderPart from "./uiHeaderPart.js";
+import { UIHeaderControlBase } from "./UIHeaderControl.js";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region lib/components/BitkitUIHeader/UIHeaderAccount.tsx
+/**
+* The account button at the trailing end of the bar. It shows the signed-in person's avatar on
+* desktop and a plain icon on mobile, where the bar has no room for a picture.
+*/
+var UIHeaderAccount = forwardRef((props, ref) => {
+	const { badge, label, name, selected, src, ...rest } = props;
+	const { styles } = useUIHeaderContext();
+	const avatarProps = src ? {
+		src,
+		variant: "user"
+	} : { variant: "letters" };
+	return /* @__PURE__ */ jsxs(UIHeaderControlBase, {
+		ref,
+		badge,
+		footprint: "control",
+		label: label ?? `Account: ${name}`,
+		selected,
+		...uiHeaderPart("account"),
+		...rest,
+		children: [/* @__PURE__ */ jsx(BitkitAvatar, {
+			css: styles.accountAvatar,
+			name,
+			size: "32",
+			...avatarProps
+		}), /* @__PURE__ */ jsx(IconPerson, { css: styles.accountIcon })]
+	});
+});
+UIHeaderAccount.displayName = "BitkitUIHeader.Account";
+//#endregion
+export { UIHeaderAccount as default };
+
+//# sourceMappingURL=UIHeaderAccount.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"UIHeaderAccount.js","names":[],"sources":["../../../lib/components/BitkitUIHeader/UIHeaderAccount.tsx"],"sourcesContent":["import { type HTMLChakraProps } from '@chakra-ui/react/styled-system';\nimport { forwardRef } from 'react';\n\nimport { IconPerson } from '../../icons';\nimport BitkitAvatar from '../BitkitAvatar/BitkitAvatar';\nimport { useUIHeaderContext } from './UIHeaderContext';\nimport { type BitkitUIHeaderBadge, UIHeaderControlBase } from './UIHeaderControl';\nimport uiHeaderPart from './uiHeaderPart';\n\nexport interface BitkitUIHeaderAccountProps extends Omit<HTMLChakraProps<'button'>, 'children' | 'disabled'> {\n  /** Marks the account as carrying something unread, like the other controls. */\n  badge?: BitkitUIHeaderBadge;\n  /**\n   * The accessible name. Defaults to `Account: ` and the signed-in person's name — the name alone\n   * would announce as a person rather than as what the button opens.\n   */\n  label?: string;\n  /** Who is signed in. Shown as the avatar's initials when there is no picture. */\n  name: string;\n  /** Marks the account panel as open. */\n  selected?: boolean;\n  /** The signed-in person's picture. Without one the avatar falls back to their initials. */\n  src?: string;\n}\n\n/**\n * The account button at the trailing end of the bar. It shows the signed-in person's avatar on\n * desktop and a plain icon on mobile, where the bar has no room for a picture.\n */\nconst UIHeaderAccount = forwardRef<HTMLButtonElement, BitkitUIHeaderAccountProps>((props, ref) => {\n  const { badge, label, name, selected, src, ...rest } = props;\n\n  const { styles } = useUIHeaderContext();\n\n  const avatarProps = src ? ({ src, variant: 'user' } as const) : ({ variant: 'letters' } as const);\n\n  return (\n    <UIHeaderControlBase\n      ref={ref}\n      badge={badge}\n      footprint=\"control\"\n      label={label ?? `Account: ${name}`}\n      selected={selected}\n      {...uiHeaderPart('account')}\n      {...rest}\n    >\n      <BitkitAvatar css={styles.accountAvatar} name={name} size=\"32\" {...avatarProps} />\n      <IconPerson css={styles.accountIcon} />\n    </UIHeaderControlBase>\n  );\n});\n\nUIHeaderAccount.displayName = 'BitkitUIHeader.Account';\n\nexport default UIHeaderAccount;\n"],"mappings":";;;;;;;;;;;;AA6BA,IAAM,kBAAkB,YAA2D,OAAO,QAAQ;CAChG,MAAM,EAAE,OAAO,OAAO,MAAM,UAAU,KAAK,GAAG,SAAS;CAEvD,MAAM,EAAE,WAAW,mBAAmB;CAEtC,MAAM,cAAc,MAAO;EAAE;EAAK,SAAS;CAAO,IAAe,EAAE,SAAS,UAAU;CAEtF,OACE,qBAAC,qBAAD;EACO;EACE;EACP,WAAU;EACV,OAAO,SAAS,YAAY;EAClB;EACV,GAAI,aAAa,SAAS;EAC1B,GAAI;EAPN,UAAA,CASE,oBAAC,cAAD;GAAc,KAAK,OAAO;GAAqB;GAAM,MAAK;GAAK,GAAI;EAAc,CAAA,GACjF,oBAAC,YAAD,EAAY,KAAK,OAAO,YAAc,CAAA,CACnB;;AAEzB,CAAC;AAED,gBAAgB,cAAc"}

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

@@ -0,0 +1,32 @@
+import { HTMLChakraProps } from '@chakra-ui/react/styled-system';
+import { ReactNode } from 'react';
+import { BitkitIconComponent } from '../../icons';
+import { BitkitUIHeaderBadge } from './UIHeaderControl';
+export interface BitkitUIHeaderButtonProps extends Omit<HTMLChakraProps<'button'>, 'children' | 'disabled'> {
+    /**
+     * An unread marker on the button's trailing top corner. `pulse` animates it, for something that
+     * has just arrived and is worth looking at now; `idle` and `true` are the same marker at rest.
+     */
+    badge?: BitkitUIHeaderBadge;
+    /** The button's label. */
+    children: ReactNode;
+    /** Leading icon. */
+    icon?: BitkitIconComponent;
+    /**
+     * Marks the button as the one whose panel is open, which keeps it pressed. The consumer owns the
+     * panel, so it owns this too.
+     */
+    selected?: boolean;
+    state?: 'disabled';
+    /** Trailing icon, for a button that opens a menu. */
+    suffixIcon?: BitkitIconComponent;
+    variant?: 'primary' | 'secondary' | 'tertiary';
+}
+/**
+ * A labelled button in the header bar, for an action that needs more than an icon — the Ask AI
+ * entry point is the one in the design.
+ *
+ * It comes in one size: the bar is 48px tall and leaves room for nothing else.
+ */
+declare const UIHeaderButton: import('react').ForwardRefExoticComponent<BitkitUIHeaderButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
+export default UIHeaderButton;

package/dist/components/BitkitUIHeader/UIHeaderButton.js

@@ -0,0 +1,41 @@
+import { chakra, useRecipe } from "@chakra-ui/react/styled-system";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Text } from "@chakra-ui/react/text";
+//#region lib/components/BitkitUIHeader/UIHeaderButton.tsx
+/**
+* A labelled button in the header bar, for an action that needs more than an icon — the Ask AI
+* entry point is the one in the design.
+*
+* It comes in one size: the bar is 48px tall and leaves room for nothing else.
+*/
+var UIHeaderButton = forwardRef((props, ref) => {
+	const { badge, children, css, icon: Icon, selected, state, suffixIcon: SuffixIcon, variant = "primary", ...rest } = props;
+	const recipe = useRecipe({ key: "uiHeaderButton" });
+	return /* @__PURE__ */ jsxs(chakra.button, {
+		ref,
+		"aria-expanded": selected,
+		"data-selected": selected ? "" : void 0,
+		disabled: state === "disabled",
+		type: "button",
+		...rest,
+		css: [recipe({
+			badge: badge === true ? "idle" : badge || void 0,
+			variant
+		}), css],
+		children: [
+			!!Icon && /* @__PURE__ */ jsx(Icon, { size: "16" }),
+			/* @__PURE__ */ jsx(Text, {
+				as: "span",
+				paddingInline: "4",
+				children
+			}),
+			!!SuffixIcon && /* @__PURE__ */ jsx(SuffixIcon, { size: "16" })
+		]
+	});
+});
+UIHeaderButton.displayName = "BitkitUIHeader.Button";
+//#endregion
+export { UIHeaderButton as default };
+
+//# sourceMappingURL=UIHeaderButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"UIHeaderButton.js","names":[],"sources":["../../../lib/components/BitkitUIHeader/UIHeaderButton.tsx"],"sourcesContent":["import { chakra, type HTMLChakraProps, useRecipe } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { forwardRef, type ReactNode } from 'react';\n\nimport { type BitkitIconComponent } from '../../icons';\nimport { type BitkitUIHeaderBadge } from './UIHeaderControl';\n\nexport interface BitkitUIHeaderButtonProps extends Omit<HTMLChakraProps<'button'>, 'children' | 'disabled'> {\n  /**\n   * An unread marker on the button's trailing top corner. `pulse` animates it, for something that\n   * has just arrived and is worth looking at now; `idle` and `true` are the same marker at rest.\n   */\n  badge?: BitkitUIHeaderBadge;\n  /** The button's label. */\n  children: ReactNode;\n  /** Leading icon. */\n  icon?: BitkitIconComponent;\n  /**\n   * Marks the button as the one whose panel is open, which keeps it pressed. The consumer owns the\n   * panel, so it owns this too.\n   */\n  selected?: boolean;\n  state?: 'disabled';\n  /** Trailing icon, for a button that opens a menu. */\n  suffixIcon?: BitkitIconComponent;\n  variant?: 'primary' | 'secondary' | 'tertiary';\n}\n\n/**\n * A labelled button in the header bar, for an action that needs more than an icon — the Ask AI\n * entry point is the one in the design.\n *\n * It comes in one size: the bar is 48px tall and leaves room for nothing else.\n */\nconst UIHeaderButton = forwardRef<HTMLButtonElement, BitkitUIHeaderButtonProps>((props, ref) => {\n  const {\n    badge,\n    children,\n    css,\n    icon: Icon,\n    selected,\n    state,\n    suffixIcon: SuffixIcon,\n    variant = 'primary',\n    ...rest\n  } = props;\n\n  const recipe = useRecipe({ key: 'uiHeaderButton' });\n\n  return (\n    <chakra.button\n      ref={ref}\n      aria-expanded={selected}\n      data-selected={selected ? '' : undefined}\n      disabled={state === 'disabled'}\n      // An action in the header, not a form submit. Before the spread, so a consumer can still opt\n      // into `type=\"submit\"`.\n      type=\"button\"\n      {...rest}\n      css={[recipe({ badge: badge === true ? 'idle' : badge || undefined, variant }), css]}\n    >\n      {!!Icon && <Icon size=\"16\" />}\n      <Text as=\"span\" paddingInline=\"4\">\n        {children}\n      </Text>\n      {!!SuffixIcon && <SuffixIcon size=\"16\" />}\n    </chakra.button>\n  );\n});\n\nUIHeaderButton.displayName = 'BitkitUIHeader.Button';\n\nexport default UIHeaderButton;\n"],"mappings":";;;;;;;;;;;AAkCA,IAAM,iBAAiB,YAA0D,OAAO,QAAQ;CAC9F,MAAM,EACJ,OACA,UACA,KACA,MAAM,MACN,UACA,OACA,YAAY,YACZ,UAAU,WACV,GAAG,SACD;CAEJ,MAAM,SAAS,UAAU,EAAE,KAAK,iBAAiB,CAAC;CAElD,OACE,qBAAC,OAAO,QAAR;EACO;EACL,iBAAe;EACf,iBAAe,WAAW,KAAK,KAAA;EAC/B,UAAU,UAAU;EAGpB,MAAK;EACL,GAAI;EACJ,KAAK,CAAC,OAAO;GAAE,OAAO,UAAU,OAAO,SAAS,SAAS,KAAA;GAAW;EAAQ,CAAC,GAAG,GAAG;EATrF,UAAA;GAWG,CAAC,CAAC,QAAQ,oBAAC,MAAD,EAAM,MAAK,KAAM,CAAA;GAC5B,oBAAC,MAAD;IAAM,IAAG;IAAO,eAAc;IAC3B;GACG,CAAA;GACL,CAAC,CAAC,cAAc,oBAAC,YAAD,EAAY,MAAK,KAAM,CAAA;EAC3B;;AAEnB,CAAC;AAED,eAAe,cAAc"}

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

@@ -0,0 +1,13 @@
+import { SystemStyleObject } from '@chakra-ui/react/styled-system';
+import { RefObject } from 'react';
+export interface UIHeaderContextValue {
+    /**
+     * The bar itself, without the banner below it. The search reads it to tell a press on another
+     * control — which dismisses the open field — from one on anything the consumer rendered, whether
+     * that is elsewhere on the page or in the header's own banner.
+     */
+    barRef: RefObject<HTMLDivElement | null>;
+    styles: Record<string, SystemStyleObject>;
+}
+declare const UIHeaderContextProvider: import('react').Provider<UIHeaderContextValue>, useUIHeaderContext: () => UIHeaderContextValue;
+export { UIHeaderContextProvider, useUIHeaderContext };

package/dist/components/BitkitUIHeader/UIHeaderContext.js

@@ -0,0 +1,11 @@
+import { createContext } from "@chakra-ui/react";
+//#region lib/components/BitkitUIHeader/UIHeaderContext.tsx
+var [UIHeaderContextProvider, useUIHeaderContext] = createContext({
+	hookName: "useUIHeaderContext",
+	name: "UIHeaderContext",
+	providerName: "<BitkitUIHeader />"
+});
+//#endregion
+export { UIHeaderContextProvider, useUIHeaderContext };
+
+//# sourceMappingURL=UIHeaderContext.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"UIHeaderContext.js","names":[],"sources":["../../../lib/components/BitkitUIHeader/UIHeaderContext.tsx"],"sourcesContent":["// eslint-disable-next-line no-restricted-imports\nimport { createContext } from '@chakra-ui/react';\nimport { type SystemStyleObject } from '@chakra-ui/react/styled-system';\nimport { type RefObject } from 'react';\n\nexport interface UIHeaderContextValue {\n  /**\n   * The bar itself, without the banner below it. The search reads it to tell a press on another\n   * control — which dismisses the open field — from one on anything the consumer rendered, whether\n   * that is elsewhere on the page or in the header's own banner.\n   */\n  barRef: RefObject<HTMLDivElement | null>;\n  styles: Record<string, SystemStyleObject>;\n}\n\nconst [UIHeaderContextProvider, useUIHeaderContext] = createContext<UIHeaderContextValue>({\n  hookName: 'useUIHeaderContext',\n  name: 'UIHeaderContext',\n  providerName: '<BitkitUIHeader />',\n});\n\nexport { UIHeaderContextProvider, useUIHeaderContext };\n"],"mappings":";;AAeA,IAAM,CAAC,yBAAyB,sBAAsB,cAAoC;CACxF,UAAU;CACV,MAAM;CACN,cAAc;AAChB,CAAC"}

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

@@ -0,0 +1,65 @@
+import { HTMLChakraProps } from '@chakra-ui/react/styled-system';
+import { ReactNode } from 'react';
+import { BitkitIconComponent } from '../../icons';
+export type BitkitUIHeaderBadge = boolean | 'idle' | 'pulse';
+interface ControlCommonProps {
+    /** Marks the control as carrying something unread. */
+    badge?: BitkitUIHeaderBadge;
+    /**
+     * The control's accessible name. It shows no text of its own, so this is what a screen reader
+     * announces.
+     */
+    label: string;
+    /**
+     * Marks the control as the one whose panel is open: a lighter background and an indicator along
+     * the bottom edge of the bar. The consumer owns the panel, so it owns this too.
+     *
+     * It says nothing about where the user is. A control that is a link stays a link to somewhere
+     * else, so this paints it without claiming it is the current page.
+     */
+    selected?: boolean;
+}
+interface ControlBaseCommonProps extends ControlCommonProps {
+    children: ReactNode;
+    /**
+     * Which of the bar's control footprints to wear: the 48px square the icon controls and the
+     * account button share, or the wider mobile navigation button. Named around the slot it picks
+     * rather than `slot`, which is a native attribute every DOM element already takes.
+     */
+    footprint: 'control' | 'navButton';
+}
+interface ControlBaseAsButtonProps extends ControlBaseCommonProps, Omit<HTMLChakraProps<'button'>, 'children' | 'disabled'> {
+    href?: undefined;
+    isExternal?: undefined;
+}
+interface ControlBaseAsAnchorProps extends ControlBaseCommonProps, Omit<HTMLChakraProps<'a'>, 'children'> {
+    href: string;
+    isExternal?: boolean;
+}
+type ControlBaseProps = ControlBaseAsButtonProps | ControlBaseAsAnchorProps;
+/**
+ * The chrome every control in the bar shares: the hover and selected backgrounds, the unread dot,
+ * the indicator, and the choice between a button and a link. What sits inside it — an icon, an
+ * avatar — is the caller's.
+ */
+export declare const UIHeaderControlBase: import('react').ForwardRefExoticComponent<ControlBaseProps & import('react').RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+export interface BitkitUIHeaderControlAsButtonProps extends ControlCommonProps, Omit<HTMLChakraProps<'button'>, 'children' | 'disabled'> {
+    href?: undefined;
+    icon: BitkitIconComponent;
+    isExternal?: undefined;
+}
+export interface BitkitUIHeaderControlAsAnchorProps extends ControlCommonProps, Omit<HTMLChakraProps<'a'>, 'children'> {
+    href: string;
+    icon: BitkitIconComponent;
+    isExternal?: boolean;
+}
+export type BitkitUIHeaderControlProps = BitkitUIHeaderControlAsButtonProps | BitkitUIHeaderControlAsAnchorProps;
+/**
+ * One icon button in the header bar — changelog, help, notifications, the mobile navigation
+ * opener. It is a link when given an `href` and a button otherwise.
+ *
+ * The icon carries no label of its own, so `label` is required. There is no tooltip: the design
+ * does not draw one.
+ */
+declare const UIHeaderControl: import('react').ForwardRefExoticComponent<BitkitUIHeaderControlProps & import('react').RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+export default UIHeaderControl;

package/dist/components/BitkitUIHeader/UIHeaderControl.js

@@ -0,0 +1,71 @@
+import { useUIHeaderContext } from "./UIHeaderContext.js";
+import uiHeaderPart from "./uiHeaderPart.js";
+import { Box } from "@chakra-ui/react/box";
+import { chakra } from "@chakra-ui/react/styled-system";
+import { forwardRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region lib/components/BitkitUIHeader/UIHeaderControl.tsx
+/**
+* The chrome every control in the bar shares: the hover and selected backgrounds, the unread dot,
+* the indicator, and the choice between a button and a link. What sits inside it — an icon, an
+* avatar — is the caller's.
+*/
+var UIHeaderControlBase = forwardRef((props, ref) => {
+	const { styles } = useUIHeaderContext();
+	const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		props.children,
+		!!props.badge && /* @__PURE__ */ jsx(Box, {
+			css: styles.badge,
+			"data-pulse": props.badge === "pulse" ? "" : void 0
+		}),
+		props.selected && /* @__PURE__ */ jsx(Box, { css: styles.indicator })
+	] });
+	if (props.href !== void 0) {
+		const { badge: _badge, children: _children, css, footprint, isExternal, label, rel, selected, target, ...anchorRest } = props;
+		return /* @__PURE__ */ jsx(chakra.a, {
+			ref,
+			"aria-label": label,
+			"data-selected": selected ? "" : void 0,
+			rel: isExternal ? rel ? `${rel} noreferrer noopener` : "noreferrer noopener" : rel,
+			target: isExternal ? "_blank" : target,
+			...uiHeaderPart(footprint === "navButton" ? "nav-button" : "control"),
+			...anchorRest,
+			css: [styles[footprint], css],
+			children: content
+		});
+	}
+	const { badge: _badge, children: _children, css, footprint, href: _href, isExternal: _isExternal, label, selected, ...buttonRest } = props;
+	return /* @__PURE__ */ jsx(chakra.button, {
+		ref,
+		"aria-expanded": selected,
+		"aria-label": label,
+		"data-selected": selected ? "" : void 0,
+		type: "button",
+		...uiHeaderPart(footprint === "navButton" ? "nav-button" : "control"),
+		...buttonRest,
+		css: [styles[footprint], css],
+		children: content
+	});
+});
+UIHeaderControlBase.displayName = "UIHeaderControlBase";
+/**
+* One icon button in the header bar — changelog, help, notifications, the mobile navigation
+* opener. It is a link when given an `href` and a button otherwise.
+*
+* The icon carries no label of its own, so `label` is required. There is no tooltip: the design
+* does not draw one.
+*/
+var UIHeaderControl = forwardRef((props, ref) => {
+	const { icon: Icon, ...rest } = props;
+	return /* @__PURE__ */ jsx(UIHeaderControlBase, {
+		ref,
+		footprint: "control",
+		...rest,
+		children: /* @__PURE__ */ jsx(Icon, {})
+	});
+});
+UIHeaderControl.displayName = "BitkitUIHeader.Control";
+//#endregion
+export { UIHeaderControlBase, UIHeaderControl as default };
+
+//# sourceMappingURL=UIHeaderControl.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"UIHeaderControl.js","names":["_Fragment"],"sources":["../../../lib/components/BitkitUIHeader/UIHeaderControl.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { chakra, type HTMLChakraProps } from '@chakra-ui/react/styled-system';\nimport { forwardRef, type ReactNode, type Ref } from 'react';\n\nimport { type BitkitIconComponent } from '../../icons';\nimport { useUIHeaderContext } from './UIHeaderContext';\nimport uiHeaderPart from './uiHeaderPart';\n\nexport type BitkitUIHeaderBadge = boolean | 'idle' | 'pulse';\n\ninterface ControlCommonProps {\n  /** Marks the control as carrying something unread. */\n  badge?: BitkitUIHeaderBadge;\n  /**\n   * The control's accessible name. It shows no text of its own, so this is what a screen reader\n   * announces.\n   */\n  label: string;\n  /**\n   * Marks the control as the one whose panel is open: a lighter background and an indicator along\n   * the bottom edge of the bar. The consumer owns the panel, so it owns this too.\n   *\n   * It says nothing about where the user is. A control that is a link stays a link to somewhere\n   * else, so this paints it without claiming it is the current page.\n   */\n  selected?: boolean;\n}\n\ninterface ControlBaseCommonProps extends ControlCommonProps {\n  children: ReactNode;\n  /**\n   * Which of the bar's control footprints to wear: the 48px square the icon controls and the\n   * account button share, or the wider mobile navigation button. Named around the slot it picks\n   * rather than `slot`, which is a native attribute every DOM element already takes.\n   */\n  footprint: 'control' | 'navButton';\n}\n\n// The bar draws no disabled control, so there is no `state` prop and no `disabled` either — a\n// control with nothing to do is one the consumer leaves out.\ninterface ControlBaseAsButtonProps\n  extends ControlBaseCommonProps, Omit<HTMLChakraProps<'button'>, 'children' | 'disabled'> {\n  href?: undefined;\n  isExternal?: undefined;\n}\n\ninterface ControlBaseAsAnchorProps extends ControlBaseCommonProps, Omit<HTMLChakraProps<'a'>, 'children'> {\n  href: string;\n  isExternal?: boolean;\n}\n\ntype ControlBaseProps = ControlBaseAsButtonProps | ControlBaseAsAnchorProps;\n\n/**\n * The chrome every control in the bar shares: the hover and selected backgrounds, the unread dot,\n * the indicator, and the choice between a button and a link. What sits inside it — an icon, an\n * avatar — is the caller's.\n */\nexport const UIHeaderControlBase = forwardRef<HTMLButtonElement | HTMLAnchorElement, ControlBaseProps>((props, ref) => {\n  const { styles } = useUIHeaderContext();\n\n  const content = (\n    <>\n      {props.children}\n      {!!props.badge && <Box css={styles.badge} data-pulse={props.badge === 'pulse' ? '' : undefined} />}\n      {props.selected && <Box css={styles.indicator} />}\n    </>\n  );\n\n  if (props.href !== undefined) {\n    const {\n      badge: _badge,\n      children: _children,\n      css,\n      footprint,\n      isExternal,\n      label,\n      rel,\n      selected,\n      target,\n      ...anchorRest\n    } = props;\n\n    return (\n      // `chakra.a` rather than `Link`, which carries a recipe of its own: a control is styled\n      // entirely by the header's own slot.\n      <chakra.a\n        ref={ref as Ref<HTMLAnchorElement>}\n        aria-label={label}\n        data-selected={selected ? '' : undefined}\n        rel={isExternal ? (rel ? `${rel} noreferrer noopener` : 'noreferrer noopener') : rel}\n        target={isExternal ? '_blank' : target}\n        {...uiHeaderPart(footprint === 'navButton' ? 'nav-button' : 'control')}\n        {...anchorRest}\n        css={[styles[footprint], css]}\n      >\n        {content}\n      </chakra.a>\n    );\n  }\n\n  const {\n    badge: _badge,\n    children: _children,\n    css,\n    footprint,\n    href: _href,\n    isExternal: _isExternal,\n    label,\n    selected,\n    ...buttonRest\n  } = props;\n\n  return (\n    // `chakra.button` rather than `Button`, which carries a recipe of its own: a control is styled\n    // entirely by the header's own slot.\n    <chakra.button\n      ref={ref as Ref<HTMLButtonElement>}\n      aria-expanded={selected}\n      aria-label={label}\n      data-selected={selected ? '' : undefined}\n      // A header control is an action, not a form submit. Before the spread, so a consumer can\n      // still opt into `type=\"submit\"`.\n      type=\"button\"\n      {...uiHeaderPart(footprint === 'navButton' ? 'nav-button' : 'control')}\n      {...buttonRest}\n      css={[styles[footprint], css]}\n    >\n      {content}\n    </chakra.button>\n  );\n});\n\nUIHeaderControlBase.displayName = 'UIHeaderControlBase';\n\nexport interface BitkitUIHeaderControlAsButtonProps\n  extends ControlCommonProps, Omit<HTMLChakraProps<'button'>, 'children' | 'disabled'> {\n  href?: undefined;\n  icon: BitkitIconComponent;\n  isExternal?: undefined;\n}\n\nexport interface BitkitUIHeaderControlAsAnchorProps extends ControlCommonProps, Omit<HTMLChakraProps<'a'>, 'children'> {\n  href: string;\n  icon: BitkitIconComponent;\n  isExternal?: boolean;\n}\n\nexport type BitkitUIHeaderControlProps = BitkitUIHeaderControlAsButtonProps | BitkitUIHeaderControlAsAnchorProps;\n\n/**\n * One icon button in the header bar — changelog, help, notifications, the mobile navigation\n * opener. It is a link when given an `href` and a button otherwise.\n *\n * The icon carries no label of its own, so `label` is required. There is no tooltip: the design\n * does not draw one.\n */\nconst UIHeaderControl = forwardRef<HTMLButtonElement | HTMLAnchorElement, BitkitUIHeaderControlProps>((props, ref) => {\n  const { icon: Icon, ...rest } = props;\n\n  return (\n    <UIHeaderControlBase ref={ref} footprint=\"control\" {...rest}>\n      <Icon />\n    </UIHeaderControlBase>\n  );\n});\n\nUIHeaderControl.displayName = 'BitkitUIHeader.Control';\n\nexport default UIHeaderControl;\n"],"mappings":";;;;;;;;;;;;AA0DA,IAAa,sBAAsB,YAAqE,OAAO,QAAQ;CACrH,MAAM,EAAE,WAAW,mBAAmB;CAEtC,MAAM,UACJ,qBAAAA,YAAA,EAAA,UAAA;EACG,MAAM;EACN,CAAC,CAAC,MAAM,SAAS,oBAAC,KAAD;GAAK,KAAK,OAAO;GAAO,cAAY,MAAM,UAAU,UAAU,KAAK,KAAA;EAAY,CAAA;EAChG,MAAM,YAAY,oBAAC,KAAD,EAAK,KAAK,OAAO,UAAY,CAAA;CAChD,EAAA,CAAA;CAGJ,IAAI,MAAM,SAAS,KAAA,GAAW;EAC5B,MAAM,EACJ,OAAO,QACP,UAAU,WACV,KACA,WACA,YACA,OACA,KACA,UACA,QACA,GAAG,eACD;EAEJ,OAGE,oBAAC,OAAO,GAAR;GACO;GACL,cAAY;GACZ,iBAAe,WAAW,KAAK,KAAA;GAC/B,KAAK,aAAc,MAAM,GAAG,IAAI,wBAAwB,wBAAyB;GACjF,QAAQ,aAAa,WAAW;GAChC,GAAI,aAAa,cAAc,cAAc,eAAe,SAAS;GACrE,GAAI;GACJ,KAAK,CAAC,OAAO,YAAY,GAAG;GAE3B,UAAA;EACO,CAAA;CAEd;CAEA,MAAM,EACJ,OAAO,QACP,UAAU,WACV,KACA,WACA,MAAM,OACN,YAAY,aACZ,OACA,UACA,GAAG,eACD;CAEJ,OAGE,oBAAC,OAAO,QAAR;EACO;EACL,iBAAe;EACf,cAAY;EACZ,iBAAe,WAAW,KAAK,KAAA;EAG/B,MAAK;EACL,GAAI,aAAa,cAAc,cAAc,eAAe,SAAS;EACrE,GAAI;EACJ,KAAK,CAAC,OAAO,YAAY,GAAG;EAE3B,UAAA;CACY,CAAA;AAEnB,CAAC;AAED,oBAAoB,cAAc;;;;;;;;AAwBlC,IAAM,kBAAkB,YAA+E,OAAO,QAAQ;CACpH,MAAM,EAAE,MAAM,MAAM,GAAG,SAAS;CAEhC,OACE,oBAAC,qBAAD;EAA0B;EAAK,WAAU;EAAU,GAAI;EACrD,UAAA,oBAAC,MAAD,CAAO,CAAA;CACY,CAAA;AAEzB,CAAC;AAED,gBAAgB,cAAc"}