@bitrise/bitkit-v2 0.3.482-beta.3116 → 0.3.482

package/dist/components/BitkitUIHeader/UIHeaderNavButton.js

@@ -1,46 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,32 +0,0 @@
-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

@@ -1,121 +0,0 @@
-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("focusin", dismiss);
-		bar.addEventListener("pointerdown", dismiss);
-		return () => {
-			bar.removeEventListener("focusin", dismiss);
-			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",
-					...uiHeaderPart("search-clear")
-				})
-			]
-		})]
-	});
-});
-UIHeaderSearch.displayName = "BitkitUIHeader.Search";
-//#endregion
-export { UIHeaderSearch as default };
-
-//# sourceMappingURL=UIHeaderSearch.js.map

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

@@ -1 +0,0 @@
-{"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 what happens in the bar itself counts: 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  //\n  // Focus is what settles it for the keyboard. The open field lies over the controls beside it\n  // without taking them out of the tab order, so Shift+Tab out of the input lands on one of them,\n  // covered — and reaching a control with the keyboard never fires a pointer event. Both end with\n  // focus inside the bar and outside the search, which is the moment to close.\n  //\n  // The pointer still needs its own listener: Safari gives a button no focus when it is clicked.\n  useEffect(() => {\n    if (!open) return undefined;\n\n    const bar = barRef.current;\n    if (!bar) return undefined;\n\n    const dismiss = (event: Event) => {\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('focusin', dismiss);\n    bar.addEventListener('pointerdown', dismiss);\n    return () => {\n      bar.removeEventListener('focusin', dismiss);\n      bar.removeEventListener('pointerdown', dismiss);\n    };\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            {...uiHeaderPart('search-clear')}\n          />\n        )}\n      </Box>\n    </Box>\n  );\n});\n\nUIHeaderSearch.displayName = 'BitkitUIHeader.Search';\n\nexport default UIHeaderSearch;\n"],"mappings":"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"}

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

@@ -1,14 +0,0 @@
-/**
- * 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`.
- *
- * It is the marker Chakra and Ark put on their own parts, which is why it is not ours to drop: a
- * product's global styles use `[data-scope]` to tell a design system's internals from its own
- * markup — the platform's focus ring excludes them that way — and a hand-built component without
- * it is the one thing in the bar those rules would reach.
- */
-declare const uiHeaderPart: (name: string) => {
-    'data-part': string;
-    'data-scope': string;
-};
-export default uiHeaderPart;

package/dist/components/BitkitUIHeader/uiHeaderPart.js

@@ -1,18 +0,0 @@
-//#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`.
-*
-* It is the marker Chakra and Ark put on their own parts, which is why it is not ours to drop: a
-* product's global styles use `[data-scope]` to tell a design system's internals from its own
-* markup — the platform's focus ring excludes them that way — and a hand-built component without
-* it is the one thing in the bar those rules would reach.
-*/
-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

@@ -1 +0,0 @@
-{"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 *\n * It is the marker Chakra and Ark put on their own parts, which is why it is not ours to drop: a\n * product's global styles use `[data-scope]` to tell a design system's internals from its own\n * markup — the platform's focus ring excludes them that way — and a hand-built component without\n * it is the one thing in the bar those rules would reach.\n */\nconst uiHeaderPart = (name: string) => ({ 'data-part': name, 'data-scope': 'ui-header' });\n\nexport default uiHeaderPart;\n"],"mappings":";;;;;;;;;;AASA,IAAM,gBAAgB,UAAkB;CAAE,aAAa;CAAM,cAAc;AAAY"}

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

@@ -1,103 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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/slot-recipes/UIHeader.recipe.d.ts

@@ -1,14 +0,0 @@
-/** `uiHeaderHeight` as a number, for a layout that needs one rather than a token. */
-export declare const uiHeaderHeightPx = 48;
-/**
- * The height of the header's bar. A page that pins the header reserves this much room for it, and
- * anything anchored under the header starts here: a drawer's backdrop and positioner, a side
- * navigation's `insetBlockStart`.
- *
- * It is the bar alone. A `banner` sits below it inside the header, and its height is the
- * consumer's content, so a pinned header carrying one is taller than this — measure it rather than
- * assume it.
- */
-export declare const uiHeaderHeight: `${number}rem`;
-declare const uiHeaderSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"search" | "badge" | "banner" | "bar" | "root" | "indicator" | "spacer" | "control" | "searchInput" | "searchClear" | "actions" | "navButton" | "accountAvatar" | "accountIcon" | "navButtonBadge" | "navButtonIcon" | "searchButton" | "searchField" | "searchIcon" | "leading" | "logoBlock" | "logoLink", import('@chakra-ui/react').SlotRecipeVariantRecord<"search" | "badge" | "banner" | "bar" | "root" | "indicator" | "spacer" | "control" | "searchInput" | "searchClear" | "actions" | "navButton" | "accountAvatar" | "accountIcon" | "navButtonBadge" | "navButtonIcon" | "searchButton" | "searchField" | "searchIcon" | "leading" | "logoBlock" | "logoLink">>;
-export default uiHeaderSlotRecipe;

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

@@ -1,253 +0,0 @@
-import { colorVar, rem } from "../themeUtils.js";
-import { defineSlotRecipe } from "@chakra-ui/react/styled-system";
-//#region lib/theme/slot-recipes/UIHeader.recipe.ts
-/** `uiHeaderHeight` as a number, for a layout that needs one rather than a token. */
-var uiHeaderHeightPx = 48;
-/**
-* The height of the header's bar. A page that pins the header reserves this much room for it, and
-* anything anchored under the header starts here: a drawer's backdrop and positioner, a side
-* navigation's `insetBlockStart`.
-*
-* It is the bar alone. A `banner` sits below it inside the header, and its height is the
-* consumer's content, so a pinned header carrying one is taller than this — measure it rather than
-* assume it.
-*/
-var uiHeaderHeight = rem(48);
-var SEARCH_FIELD_WIDTH = rem(240);
-var SEARCH_FIELD_TINT = colorVar("color/white/20");
-var controlBase = {
-	background: "sys/ui/header/control/bg",
-	_hover: {
-		background: "sys/ui/header/control/bg-hover",
-		_active: { background: "sys/ui/header/control/bg-active" }
-	},
-	_active: { background: "sys/ui/header/control/bg-active" },
-	_selected: {
-		background: "sys/ui/header/control/bg-selected",
-		_hover: {
-			background: "sys/ui/header/control/bg-selected-hover",
-			_active: { background: "sys/ui/header/control/bg-selected" }
-		},
-		_active: { background: "sys/ui/header/control/bg-selected" }
-	},
-	alignItems: "center",
-	borderRadius: 0,
-	color: "icon/on-color",
-	cursor: "pointer",
-	display: "flex",
-	flexShrink: 0,
-	height: uiHeaderHeight,
-	justifyContent: "center",
-	position: "relative",
-	textDecoration: "none",
-	_focusVisible: { outlineOffset: "calc(var(--focus-ring-width) * -1)" }
-};
-var uiHeaderSlotRecipe = defineSlotRecipe({
-	className: "ui-header",
-	slots: [
-		"accountAvatar",
-		"accountIcon",
-		"actions",
-		"badge",
-		"banner",
-		"bar",
-		"control",
-		"indicator",
-		"leading",
-		"logoBlock",
-		"logoLink",
-		"navButton",
-		"navButtonBadge",
-		"navButtonIcon",
-		"root",
-		"search",
-		"searchButton",
-		"searchClear",
-		"searchField",
-		"searchIcon",
-		"searchInput",
-		"spacer"
-	],
-	base: {
-		root: {
-			background: "sys/ui/header/bg",
-			color: "text/on-color",
-			display: "flex",
-			flexDirection: "column",
-			width: "full"
-		},
-		bar: {
-			alignItems: "center",
-			display: "flex",
-			flexShrink: 0,
-			height: uiHeaderHeight,
-			position: "relative",
-			tablet: { paddingInlineStart: "20" }
-		},
-		leading: {
-			display: "flex",
-			flexShrink: 0,
-			tablet: { display: "none" }
-		},
-		spacer: {
-			flexShrink: 1,
-			width: "48",
-			tablet: { display: "none" }
-		},
-		logoBlock: {
-			alignItems: "center",
-			display: "flex",
-			flex: 1,
-			justifyContent: "center",
-			minWidth: 0,
-			tablet: { flex: "none" }
-		},
-		logoLink: {
-			borderRadius: "4",
-			color: "text/on-color",
-			display: "flex",
-			marginBlockEnd: rem(3)
-		},
-		actions: {
-			alignItems: "center",
-			display: "flex",
-			flexShrink: 0,
-			marginInlineStart: "auto",
-			tablet: { paddingInlineEnd: "32" }
-		},
-		banner: { width: "full" },
-		control: {
-			...controlBase,
-			width: "48"
-		},
-		accountAvatar: {
-			borderRadius: "full",
-			display: "none",
-			overflow: "hidden",
-			tablet: { display: "inline-flex" }
-		},
-		accountIcon: {
-			display: "block",
-			tablet: { display: "none" }
-		},
-		navButton: {
-			...controlBase,
-			paddingBlock: "8",
-			paddingInlineEnd: "8",
-			paddingInlineStart: "12"
-		},
-		navButtonBadge: {
-			alignItems: "flex-start",
-			background: "sys/ui/header/bg",
-			borderStartStartRadius: "2",
-			color: "icon/on-color",
-			display: "flex",
-			height: "12",
-			insetBlockEnd: "8",
-			insetInlineEnd: "8",
-			overflow: "hidden",
-			pointerEvents: "none",
-			position: "absolute",
-			width: "16"
-		},
-		navButtonIcon: {
-			flexShrink: 0,
-			marginBlockStart: rem(-1),
-			marginInlineStart: "1"
-		},
-		badge: {
-			background: "sys/ui/header/badge/red",
-			borderRadius: "full",
-			height: "8",
-			insetBlockStart: "12",
-			insetInlineStart: rem(28),
-			pointerEvents: "none",
-			position: "absolute",
-			width: "8",
-			"&[data-pulse]": { _after: {
-				animation: "ping",
-				background: "sys/ui/header/badge/red",
-				borderRadius: "full",
-				content: "\"\"",
-				inset: 0,
-				opacity: .5,
-				position: "absolute",
-				_motionReduce: { animation: "none" }
-			} }
-		},
-		indicator: {
-			background: "sys/ui/header/control/indicator",
-			height: "4",
-			insetBlockEnd: 0,
-			insetInline: 0,
-			pointerEvents: "none",
-			position: "absolute"
-		},
-		search: {
-			display: "flex",
-			flexShrink: 0,
-			position: "relative"
-		},
-		searchField: {
-			alignItems: "center",
-			backgroundColor: "sys/ui/header/bg",
-			backgroundImage: `linear-gradient(0deg, ${SEARCH_FIELD_TINT} 0%, ${SEARCH_FIELD_TINT} 100%)`,
-			borderColor: "border/strong",
-			borderRadius: "4",
-			borderStyle: "solid",
-			borderWidth: "1",
-			display: "none",
-			gap: "8",
-			height: "40",
-			insetBlockStart: "4",
-			insetInlineEnd: 0,
-			opacity: 0,
-			paddingInlineEnd: "12",
-			paddingInlineStart: "8",
-			position: "absolute",
-			transitionDuration: "fast",
-			transitionProperty: "opacity, visibility",
-			transitionTimingFunction: "ease-out",
-			visibility: "hidden",
-			width: SEARCH_FIELD_WIDTH,
-			"&:has(input:focus-visible)": { boxShadow: "0 0 0 var(--focus-ring-width) var(--focus-ring-color) inset" },
-			_open: {
-				opacity: 1,
-				visibility: "visible"
-			},
-			_motionReduce: { transitionProperty: "none" },
-			tablet: { display: "flex" }
-		},
-		searchButton: { tablet: { _open: { visibility: "hidden" } } },
-		searchClear: {
-			color: "icon/on-color",
-			flexShrink: 0
-		},
-		searchIcon: {
-			color: "icon/on-color",
-			flexShrink: 0
-		},
-		searchInput: {
-			background: "transparent",
-			borderWidth: 0,
-			color: "text/on-color",
-			flex: 1,
-			minWidth: 0,
-			padding: 0,
-			textStyle: "body/lg/regular",
-			"&::-webkit-search-cancel-button": { display: "none" },
-			_focusVisible: {
-				outline: "none",
-				outlineWidth: 0
-			},
-			_placeholder: {
-				color: "text/on-color",
-				opacity: .6
-			}
-		}
-	}
-});
-//#endregion
-export { uiHeaderSlotRecipe as default, uiHeaderHeight, uiHeaderHeightPx };
-
-//# sourceMappingURL=UIHeader.recipe.js.map