npm - @bitrise/bitkit-v2 - Versions diffs - 0.3.473 → 0.3.475-beta.3009 - Mend

@bitrise/bitkit-v2 0.3.473 → 0.3.475-beta.3009

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (41) hide show

package/dist/components/BitkitUIHeader/UIHeaderNavButton.js ADDED Viewed

@@ -0,0 +1,47 @@
+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,
+			size: "32",
+			...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 ADDED Viewed

@@ -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'> {\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} size=\"32\" {...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,MAAK;GAAK,GAAI;EAAc,CAAA,GACtD,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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -0,0 +1,96 @@
+import IconMagnifier from "../../icons/IconMagnifier.js";
+import BitkitCloseButton from "../BitkitCloseButton/BitkitCloseButton.js";
+import { useUIHeaderContext } from "./UIHeaderContext.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 { 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 { rootRef, styles } = useUIHeaderContext();
+	const buttonElementRef = useRef(null);
+	const inputElementRef = useRef(null);
+	const searchElementRef = useRef(null);
+	const setInputRef = useMemo(() => mergeRefs(inputElementRef, inputRef), [inputRef]);
+	const setSearchRef = useMemo(() => mergeRefs(searchElementRef, ref), [ref]);
+	useEffect(() => {
+		if (open) inputElementRef.current?.focus();
+	}, [open]);
+	useEffect(() => {
+		if (!open) return void 0;
+		const dismiss = (event) => {
+			const target = event.target instanceof Node ? event.target : null;
+			if (!target || !rootRef.current?.contains(target)) return;
+			if (searchElementRef.current?.contains(target)) return;
+			onOpenChange?.(false);
+		};
+		document.addEventListener("pointerdown", dismiss);
+		return () => document.removeEventListener("pointerdown", dismiss);
+	}, [
+		onOpenChange,
+		open,
+		rootRef
+	]);
+	const handleKeyDown = (event) => {
+		if (event.key !== "Escape") return;
+		event.stopPropagation();
+		buttonElementRef.current?.focus();
+		onOpenChange?.(false);
+	};
+	const handleClear = () => {
+		onValueChange?.("");
+		inputElementRef.current?.focus();
+	};
+	return /* @__PURE__ */ jsxs(Box, {
+		ref: setSearchRef,
+		css: [styles.search, css],
+		...rest,
+		children: [/* @__PURE__ */ jsx(UIHeaderControlBase, {
+			ref: buttonElementRef,
+			css: styles.searchButton,
+			"data-open": open ? "" : void 0,
+			footprint: "control",
+			label,
+			onClick: () => onOpenChange?.(!open),
+			selected,
+			children: /* @__PURE__ */ jsx(IconMagnifier, {})
+		}), /* @__PURE__ */ jsxs(Box, {
+			css: styles.searchField,
+			"data-open": open ? "" : void 0,
+			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),
+					onKeyDown: handleKeyDown,
+					placeholder,
+					tabIndex: open ? void 0 : -1,
+					type: "search",
+					value
+				}),
+				!!value && /* @__PURE__ */ jsx(BitkitCloseButton, {
+					"aria-label": "Clear search",
+					colorVariant: "white",
+					onClick: handleClear,
+					size: "md"
+				})
+			]
+		})]
+	});
+});
+UIHeaderSearch.displayName = "BitkitUIHeader.Search";
+//#endregion
+export { UIHeaderSearch as default };
+//# sourceMappingURL=UIHeaderSearch.js.map

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

@@ -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 { chakra } from '@chakra-ui/react/styled-system';\nimport { forwardRef, type KeyboardEvent, 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';\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 { rootRef, styles } = useUIHeaderContext();\n\n const buttonElementRef = useRef<HTMLButtonElement>(null);\n const inputElementRef = useRef<HTMLInputElement>(null);\n const searchElementRef = useRef<HTMLDivElement>(null);\n const setInputRef = useMemo(() => mergeRefs(inputElementRef, inputRef), [inputRef]);\n const setSearchRef = useMemo(() => mergeRefs(searchElementRef, ref), [ref]);\n\n useEffect(() => {\n if (open) inputElementRef.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 inside the header count: a results panel is rendered\n // by the consumer, somewhere else entirely, and choosing from it must not close the search.\n useEffect(() => {\n if (!open) return undefined;\n\n const dismiss = (event: PointerEvent) => {\n const target = event.target instanceof Node ? event.target : null;\n if (!target || !rootRef.current?.contains(target)) return;\n if (searchElementRef.current?.contains(target)) return;\n onOpenChange?.(false);\n };\n\n document.addEventListener('pointerdown', dismiss);\n return () => document.removeEventListener('pointerdown', dismiss);\n }, [onOpenChange, open, rootRef]);\n\n const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n if (event.key !== 'Escape') return;\n event.stopPropagation();\n // Escape leaves the field without going anywhere else, so focus belongs back on the button that\n // opened it. A press on another control moves focus by itself and takes no help.\n buttonElementRef.current?.focus();\n onOpenChange?.(false);\n };\n\n const handleClear = () => {\n onValueChange?.('');\n inputElementRef.current?.focus();\n };\n\n return (\n <Box ref={setSearchRef} css={[styles.search, css]} {...rest}>\n <UIHeaderControlBase\n ref={buttonElementRef}\n css={styles.searchButton}\n data-open={open ? '' : undefined}\n footprint=\"control\"\n label={label}\n onClick={() => onOpenChange?.(!open)}\n selected={selected}\n >\n <IconMagnifier />\n </UIHeaderControlBase>\n <Box css={styles.searchField} data-open={open ? '' : undefined}>\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 onKeyDown={handleKeyDown}\n placeholder={placeholder}\n // A closed field is invisible but still in the DOM, so keep it out of the tab order.\n tabIndex={open ? undefined : -1}\n type=\"search\"\n value={value}\n />\n {!!value && (\n <BitkitCloseButton aria-label=\"Clear search\" colorVariant=\"white\" onClick={handleClear} size=\"md\" />\n )}\n </Box>\n </Box>\n );\n});\n\nUIHeaderSearch.displayName = 'BitkitUIHeader.Search';\n\nexport default UIHeaderSearch;\n"],"mappings":";;;;;;;;;;;;;;;;AAwCA,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,SAAS,WAAW,mBAAmB;CAE/C,MAAM,mBAAmB,OAA0B,IAAI;CACvD,MAAM,kBAAkB,OAAyB,IAAI;CACrD,MAAM,mBAAmB,OAAuB,IAAI;CACpD,MAAM,cAAc,cAAc,UAAU,iBAAiB,QAAQ,GAAG,CAAC,QAAQ,CAAC;CAClF,MAAM,eAAe,cAAc,UAAU,kBAAkB,GAAG,GAAG,CAAC,GAAG,CAAC;CAE1E,gBAAgB;EACd,IAAI,MAAM,gBAAgB,SAAS,MAAM;CAC3C,GAAG,CAAC,IAAI,CAAC;CAKT,gBAAgB;EACd,IAAI,CAAC,MAAM,OAAO,KAAA;EAElB,MAAM,WAAW,UAAwB;GACvC,MAAM,SAAS,MAAM,kBAAkB,OAAO,MAAM,SAAS;GAC7D,IAAI,CAAC,UAAU,CAAC,QAAQ,SAAS,SAAS,MAAM,GAAG;GACnD,IAAI,iBAAiB,SAAS,SAAS,MAAM,GAAG;GAChD,eAAe,KAAK;EACtB;EAEA,SAAS,iBAAiB,eAAe,OAAO;EAChD,aAAa,SAAS,oBAAoB,eAAe,OAAO;CAClE,GAAG;EAAC;EAAc;EAAM;CAAO,CAAC;CAEhC,MAAM,iBAAiB,UAA2C;EAChE,IAAI,MAAM,QAAQ,UAAU;EAC5B,MAAM,gBAAgB;EAGtB,iBAAiB,SAAS,MAAM;EAChC,eAAe,KAAK;CACtB;CAEA,MAAM,oBAAoB;EACxB,gBAAgB,EAAE;EAClB,gBAAgB,SAAS,MAAM;CACjC;CAEA,OACE,qBAAC,KAAD;EAAK,KAAK;EAAc,KAAK,CAAC,OAAO,QAAQ,GAAG;EAAG,GAAI;EAAvD,UAAA,CACE,oBAAC,qBAAD;GACE,KAAK;GACL,KAAK,OAAO;GACZ,aAAW,OAAO,KAAK,KAAA;GACvB,WAAU;GACH;GACP,eAAe,eAAe,CAAC,IAAI;GACzB;GAEV,UAAA,oBAAC,eAAD,CAAgB,CAAA;EACG,CAAA,GACrB,qBAAC,KAAD;GAAK,KAAK,OAAO;GAAa,aAAW,OAAO,KAAK,KAAA;GAArD,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,WAAW;KACE;KAEb,UAAU,OAAO,KAAA,IAAY;KAC7B,MAAK;KACE;IACR,CAAA;IACA,CAAC,CAAC,SACD,oBAAC,mBAAD;KAAmB,cAAW;KAAe,cAAa;KAAQ,SAAS;KAAa,MAAK;IAAM,CAAA;GAElG;EACF,CAAA,CAAA;;AAET,CAAC;AAED,eAAe,cAAc"}

package/dist/components/index.d.ts CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -383,10 +383,12 @@ 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 { uiHeaderHeight } from "./theme/slot-recipes/UIHeader.recipe.js";
+import BitkitUIHeader_default from "./components/BitkitUIHeader/BitkitUIHeader.js";
 import useResponsive, { ResponsiveProvider } from "./hooks/useResponsive.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 ADDED Viewed

@@ -0,0 +1,111 @@
+import { rem } from "../themeUtils.js";
+import { defineRecipe } from "@chakra-ui/react/styled-system";
+//#region lib/theme/recipes/UIHeaderButton.recipe.ts
+/**
+* Only the secondary button is drawn with an outline. The other two keep a transparent border of
+* the same width so every variant is the same size.
+*/
+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"
+		}
+	};
+};
+/**
+* An unread marker centred on the button's trailing top corner: a dot with a ring behind it. The
+* design draws both inside a 12px box, and neither radius lands on the size scale.
+*/
+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",
+		_notLast: { 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 ADDED Viewed

@@ -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\n/**\n * Only the secondary button is drawn with an outline. The other two keep a transparent border of\n * the same width so every variant is the same size.\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\n/**\n * An unread marker centred on the button's trailing top corner: a dot with a ring behind it. The\n * design draws both inside a 12px box, and neither radius lands on the size scale.\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 // The icon controls beside it carry their own padding and sit flush against each other, but a\n // labelled button needs room. A trailing button takes none: the bar's own inset is its room.\n _notLast: {\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":";;;;;;;AAUA,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;;;;;AAMA,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;EAGZ,UAAU,EACR,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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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~~"}
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';\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/Drawer.recipe.d.ts CHANGED Viewed

@@ -38,6 +38,7 @@ declare const drawerSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<
         };
         floating: {
             body: {
+                paddingBlockEnd: "24";
                 paddingBlockStart: "8";
                 paddingInline: "24";
                 '.chakra-drawer__header:has([role=tablist]) ~ &': {
@@ -71,7 +72,7 @@ declare const drawerSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<
                 borderBlockStartColor: "transparent";
                 borderBlockStartWidth: number;
                 paddingBlockEnd: "24";
-                paddingBlockStart: "32";
+                paddingBlockStart: "8";
                 paddingInline: "24";
             };
             title: {

package/dist/theme/slot-recipes/Drawer.recipe.js CHANGED Viewed

@@ -121,6 +121,7 @@ var drawerSlotRecipe = defineSlotRecipe({
 			},
 			floating: {
 				body: {
+					paddingBlockEnd: "24",
 					paddingBlockStart: "8",
 					paddingInline: "24",
 					".chakra-drawer__header:has([role=tablist]) ~ &": { paddingBlockStart: "24" }
@@ -148,7 +149,7 @@ var drawerSlotRecipe = defineSlotRecipe({
 					borderBlockStartColor: "transparent",
 					borderBlockStartWidth: 0,
 					paddingBlockEnd: "24",
-					paddingBlockStart: "32",
+					paddingBlockStart: "8",
 					paddingInline: "24"
 				},
 				title: {

package/dist/theme/slot-recipes/Drawer.recipe.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Drawer.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/Drawer.recipe.ts"],"sourcesContent":["import { drawerAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { rem } from '../themeUtils';\n\nconst drawerSlotRecipe = defineSlotRecipe({\n className: 'drawer',\n slots: drawerAnatomy.keys(),\n base: {\n backdrop: {\n background: 'utilities/overlay-light',\n inset: 0,\n position: 'fixed',\n zIndex: 'calc({zIndex.dialogOverlay} + var(--layer-index, 0))',\n _open: {\n animationName: 'fade-in',\n animationDuration: 'slow',\n },\n _closed: {\n animationName: 'fade-out',\n animationDuration: 'moderate',\n },\n },\n positioner: {\n alignItems: 'stretch',\n display: 'flex',\n inset: 0,\n justifyContent: 'flex-end',\n overscrollBehaviorY: 'none',\n position: 'fixed',\n zIndex: 'calc({zIndex.dialog} + var(--layer-index, 0))',\n },\n content: {\n background: 'background/primary',\n display: 'flex',\n flexDirection: 'column',\n maxHeight: '100dvh',\n outline: 'none',\n position: 'relative',\n _open: {\n animationDuration: 'slowest',\n animationName: {\n base: 'slide-from-right-full, fade-in',\n _rtl: 'slide-from-left-full, fade-in',\n },\n animationTimingFunction: 'ease-in-smooth',\n },\n _closed: {\n animationDuration: 'slower',\n animationName: {\n base: 'slide-to-right-full, fade-out',\n _rtl: 'slide-to-left-full, fade-out',\n },\n animationTimingFunction: 'ease-in-smooth',\n },\n },\n header: {\n paddingBlockEnd: '8',\n paddingBlockStart: '24',\n paddingInline: '24',\n // A tab list in the header closes it off with its own baseline.\n '&:has([role=tablist])': {\n paddingBlockEnd: 0,\n },\n },\n body: {\n flex: '1',\n overflow: 'auto',\n },\n footer: {\n borderBlockStartColor: 'border/regular',\n borderBlockStartWidth: '1',\n paddingBlock: '12',\n },\n title: {\n color: 'text/tertiary',\n flex: '1',\n // The close button is absolutely positioned, so the title keeps clear of it.\n paddingInlineEnd: '48',\n textStyle: 'heading/h6',\n },\n description: {},\n closeTrigger: {\n alignItems: 'center',\n borderRadius: '4',\n color: 'icon/primary',\n cursor: 'pointer',\n display: 'inline-flex',\n height: '40',\n justifyContent: 'center',\n position: 'absolute',\n width: '40',\n _hover: {\n backgroundColor: 'color/neutral/subtle',\n },\n _active: {\n backgroundColor: 'color/neutral/moderate',\n },\n },\n },\n variants: {\n variant: {\n // One inline padding for header, body and footer, so their content lines up: 16 on mobile, 24 from tablet.\n docked: {\n body: {\n padding: { base: '16', tablet: '24' },\n },\n closeTrigger: {\n insetEnd: rem(18),\n top: '12',\n },\n content: {\n width: { base: '100vw', tablet: rem(320) },\n },\n footer: {\n paddingInline: { base: '16', tablet: '24' },\n },\n header: {\n paddingInline: { base: '16', tablet: '24' },\n // Tabs sit 8px from the edge, so their baseline runs nearly full width.\n '& :has(> [role=tablist])': {\n marginInline: { base: '-8', tablet: '-16' },\n },\n },\n },\n floating: {\n body: {\n paddingBlockStart: '8',\n paddingInline: '24',\n '.chakra-drawer__header:has([role=tablist]) ~ &': {\n paddingBlockStart: '24',\n },\n },\n closeTrigger: {\n height: '32',\n insetEnd: '20',\n top: '20',\n width: '32',\n },\n positioner: {\n padding: '32',\n },\n content: {\n borderRadius: '12',\n boxShadow: 'elevation/lg',\n // A size lifts this cap through the variable, which also reaches a responsive `variant`'s tablet-scoped rule.\n maxWidth: `var(--drawer-floating-max-width, ${rem(700)})`,\n // 480 is the floating drawer's smallest step, so xxs and xs land on it too; on narrow screens it gives way to the viewport.\n minWidth: `min(100%, ${rem(480)})`,\n },\n header: {\n paddingBlockEnd: '16',\n paddingBlockStart: '24',\n paddingInline: '24',\n '& :has(> [role=tablist])': {\n marginInline: '-16',\n },\n },\n footer: {\n borderBlockStartColor: 'transparent',\n borderBlockStartWidth: 0,\n paddingBlockEnd: '24',\n paddingBlockStart: '32',\n paddingInline: '24',\n },\n title: {\n color: 'text/primary',\n textStyle: 'heading/h3',\n },\n },\n },\n // Plain variants rather than compounds, so a size also works with a responsive `variant`, which compound variants\n // never match. Widths apply from tablet up; below that the variant's own width stays (docked: full width,\n // floating: sized to content).\n size: {\n xxs: { content: { '--drawer-floating-max-width': '100%', width: { tablet: rem(320) } } },\n xs: { content: { '--drawer-floating-max-width': '100%', width: { tablet: rem(360) } } },\n sm: { content: { '--drawer-floating-max-width': '100%', width: { tablet: rem(480) } } },\n md: { content: { '--drawer-floating-max-width': '100%', width: { tablet: rem(640) } } },\n lg: { content: { '--drawer-floating-max-width': '100%', width: { tablet: rem(800) } } },\n },\n },\n defaultVariants: {\n variant: 'docked',\n },\n});\n\nexport default drawerSlotRecipe;\n"],"mappings":";;;;AAKA,IAAM,mBAAmB,iBAAiB;CACxC,WAAW;CACX,OAAO,cAAc,KAAK;CAC1B,MAAM;EACJ,UAAU;GACR,YAAY;GACZ,OAAO;GACP,UAAU;GACV,QAAQ;GACR,OAAO;IACL,eAAe;IACf,mBAAmB;GACrB;GACA,SAAS;IACP,eAAe;IACf,mBAAmB;GACrB;EACF;EACA,YAAY;GACV,YAAY;GACZ,SAAS;GACT,OAAO;GACP,gBAAgB;GAChB,qBAAqB;GACrB,UAAU;GACV,QAAQ;EACV;EACA,SAAS;GACP,YAAY;GACZ,SAAS;GACT,eAAe;GACf,WAAW;GACX,SAAS;GACT,UAAU;GACV,OAAO;IACL,mBAAmB;IACnB,eAAe;KACb,MAAM;KACN,MAAM;IACR;IACA,yBAAyB;GAC3B;GACA,SAAS;IACP,mBAAmB;IACnB,eAAe;KACb,MAAM;KACN,MAAM;IACR;IACA,yBAAyB;GAC3B;EACF;EACA,QAAQ;GACN,iBAAiB;GACjB,mBAAmB;GACnB,eAAe;GAEf,yBAAyB,EACvB,iBAAiB,EACnB;EACF;EACA,MAAM;GACJ,MAAM;GACN,UAAU;EACZ;EACA,QAAQ;GACN,uBAAuB;GACvB,uBAAuB;GACvB,cAAc;EAChB;EACA,OAAO;GACL,OAAO;GACP,MAAM;GAEN,kBAAkB;GAClB,WAAW;EACb;EACA,aAAa,CAAC;EACd,cAAc;GACZ,YAAY;GACZ,cAAc;GACd,OAAO;GACP,QAAQ;GACR,SAAS;GACT,QAAQ;GACR,gBAAgB;GAChB,UAAU;GACV,OAAO;GACP,QAAQ,EACN,iBAAiB,uBACnB;GACA,SAAS,EACP,iBAAiB,yBACnB;EACF;CACF;CACA,UAAU;EACR,SAAS;GAEP,QAAQ;IACN,MAAM,EACJ,SAAS;KAAE,MAAM;KAAM,QAAQ;IAAK,EACtC;IACA,cAAc;KACZ,UAAU,IAAI,EAAE;KAChB,KAAK;IACP;IACA,SAAS,EACP,OAAO;KAAE,MAAM;KAAS,QAAQ,IAAI,GAAG;IAAE,EAC3C;IACA,QAAQ,EACN,eAAe;KAAE,MAAM;KAAM,QAAQ;IAAK,EAC5C;IACA,QAAQ;KACN,eAAe;MAAE,MAAM;MAAM,QAAQ;KAAK;KAE1C,4BAA4B,EAC1B,cAAc;MAAE,MAAM;MAAM,QAAQ;KAAM,EAC5C;IACF;GACF;GACA,UAAU;IACR,MAAM;~~KACJ~~,mBAAmB;KACnB,eAAe;KACf,kDAAkD,EAChD,mBAAmB,KACrB;IACF;IACA,cAAc;KACZ,QAAQ;KACR,UAAU;KACV,KAAK;KACL,OAAO;IACT;IACA,YAAY,EACV,SAAS,KACX;IACA,SAAS;KACP,cAAc;KACd,WAAW;KAEX,UAAU,oCAAoC,IAAI,GAAG,EAAE;KAEvD,UAAU,aAAa,IAAI,GAAG,EAAE;IAClC;IACA,QAAQ;KACN,iBAAiB;KACjB,mBAAmB;KACnB,eAAe;KACf,4BAA4B,EAC1B,cAAc,MAChB;IACF;IACA,QAAQ;KACN,uBAAuB;KACvB,uBAAuB;KACvB,iBAAiB;~~KACjB~~,mBAAmB;KACnB,eAAe;IACjB;IACA,OAAO;KACL,OAAO;KACP,WAAW;IACb;GACF;EACF;EAIA,MAAM;GACJ,KAAK,EAAE,SAAS;IAAE,+BAA+B;IAAQ,OAAO,EAAE,QAAQ,IAAI,GAAG,EAAE;GAAE,EAAE;GACvF,IAAI,EAAE,SAAS;IAAE,+BAA+B;IAAQ,OAAO,EAAE,QAAQ,IAAI,GAAG,EAAE;GAAE,EAAE;GACtF,IAAI,EAAE,SAAS;IAAE,+BAA+B;IAAQ,OAAO,EAAE,QAAQ,IAAI,GAAG,EAAE;GAAE,EAAE;GACtF,IAAI,EAAE,SAAS;IAAE,+BAA+B;IAAQ,OAAO,EAAE,QAAQ,IAAI,GAAG,EAAE;GAAE,EAAE;GACtF,IAAI,EAAE,SAAS;IAAE,+BAA+B;IAAQ,OAAO,EAAE,QAAQ,IAAI,GAAG,EAAE;GAAE,EAAE;EACxF;CACF;CACA,iBAAiB,EACf,SAAS,SACX;AACF,CAAC"}
1	+ {"version":3,"file":"Drawer.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/Drawer.recipe.ts"],"sourcesContent":["import { drawerAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { rem } from '../themeUtils';\n\nconst drawerSlotRecipe = defineSlotRecipe({\n className: 'drawer',\n slots: drawerAnatomy.keys(),\n base: {\n backdrop: {\n background: 'utilities/overlay-light',\n inset: 0,\n position: 'fixed',\n zIndex: 'calc({zIndex.dialogOverlay} + var(--layer-index, 0))',\n _open: {\n animationName: 'fade-in',\n animationDuration: 'slow',\n },\n _closed: {\n animationName: 'fade-out',\n animationDuration: 'moderate',\n },\n },\n positioner: {\n alignItems: 'stretch',\n display: 'flex',\n inset: 0,\n justifyContent: 'flex-end',\n overscrollBehaviorY: 'none',\n position: 'fixed',\n zIndex: 'calc({zIndex.dialog} + var(--layer-index, 0))',\n },\n content: {\n background: 'background/primary',\n display: 'flex',\n flexDirection: 'column',\n maxHeight: '100dvh',\n outline: 'none',\n position: 'relative',\n _open: {\n animationDuration: 'slowest',\n animationName: {\n base: 'slide-from-right-full, fade-in',\n _rtl: 'slide-from-left-full, fade-in',\n },\n animationTimingFunction: 'ease-in-smooth',\n },\n _closed: {\n animationDuration: 'slower',\n animationName: {\n base: 'slide-to-right-full, fade-out',\n _rtl: 'slide-to-left-full, fade-out',\n },\n animationTimingFunction: 'ease-in-smooth',\n },\n },\n header: {\n paddingBlockEnd: '8',\n paddingBlockStart: '24',\n paddingInline: '24',\n // A tab list in the header closes it off with its own baseline.\n '&:has([role=tablist])': {\n paddingBlockEnd: 0,\n },\n },\n body: {\n flex: '1',\n overflow: 'auto',\n },\n footer: {\n borderBlockStartColor: 'border/regular',\n borderBlockStartWidth: '1',\n paddingBlock: '12',\n },\n title: {\n color: 'text/tertiary',\n flex: '1',\n // The close button is absolutely positioned, so the title keeps clear of it.\n paddingInlineEnd: '48',\n textStyle: 'heading/h6',\n },\n description: {},\n closeTrigger: {\n alignItems: 'center',\n borderRadius: '4',\n color: 'icon/primary',\n cursor: 'pointer',\n display: 'inline-flex',\n height: '40',\n justifyContent: 'center',\n position: 'absolute',\n width: '40',\n _hover: {\n backgroundColor: 'color/neutral/subtle',\n },\n _active: {\n backgroundColor: 'color/neutral/moderate',\n },\n },\n },\n variants: {\n variant: {\n // One inline padding for header, body and footer, so their content lines up: 16 on mobile, 24 from tablet.\n docked: {\n body: {\n padding: { base: '16', tablet: '24' },\n },\n closeTrigger: {\n insetEnd: rem(18),\n top: '12',\n },\n content: {\n width: { base: '100vw', tablet: rem(320) },\n },\n footer: {\n paddingInline: { base: '16', tablet: '24' },\n },\n header: {\n paddingInline: { base: '16', tablet: '24' },\n // Tabs sit 8px from the edge, so their baseline runs nearly full width.\n '& :has(> [role=tablist])': {\n marginInline: { base: '-8', tablet: '-16' },\n },\n },\n },\n floating: {\n body: {\n // The bottom 24 is the body's, not the footer's, so a drawer without a footer still ends on it.\n paddingBlockEnd: '24',\n paddingBlockStart: '8',\n paddingInline: '24',\n '.chakra-drawer__header:has([role=tablist]) ~ &': {\n paddingBlockStart: '24',\n },\n },\n closeTrigger: {\n height: '32',\n insetEnd: '20',\n top: '20',\n width: '32',\n },\n positioner: {\n padding: '32',\n },\n content: {\n borderRadius: '12',\n boxShadow: 'elevation/lg',\n // A size lifts this cap through the variable, which also reaches a responsive `variant`'s tablet-scoped rule.\n maxWidth: `var(--drawer-floating-max-width, ${rem(700)})`,\n // 480 is the floating drawer's smallest step, so xxs and xs land on it too; on narrow screens it gives way to the viewport.\n minWidth: `min(100%, ${rem(480)})`,\n },\n header: {\n paddingBlockEnd: '16',\n paddingBlockStart: '24',\n paddingInline: '24',\n '& :has(> [role=tablist])': {\n marginInline: '-16',\n },\n },\n footer: {\n borderBlockStartColor: 'transparent',\n borderBlockStartWidth: 0,\n paddingBlockEnd: '24',\n // With the body's bottom 24, the gap above the footer stays 32.\n paddingBlockStart: '8',\n paddingInline: '24',\n },\n title: {\n color: 'text/primary',\n textStyle: 'heading/h3',\n },\n },\n },\n // Plain variants rather than compounds, so a size also works with a responsive `variant`, which compound variants\n // never match. Widths apply from tablet up; below that the variant's own width stays (docked: full width,\n // floating: sized to content).\n size: {\n xxs: { content: { '--drawer-floating-max-width': '100%', width: { tablet: rem(320) } } },\n xs: { content: { '--drawer-floating-max-width': '100%', width: { tablet: rem(360) } } },\n sm: { content: { '--drawer-floating-max-width': '100%', width: { tablet: rem(480) } } },\n md: { content: { '--drawer-floating-max-width': '100%', width: { tablet: rem(640) } } },\n lg: { content: { '--drawer-floating-max-width': '100%', width: { tablet: rem(800) } } },\n },\n },\n defaultVariants: {\n variant: 'docked',\n },\n});\n\nexport default drawerSlotRecipe;\n"],"mappings":";;;;AAKA,IAAM,mBAAmB,iBAAiB;CACxC,WAAW;CACX,OAAO,cAAc,KAAK;CAC1B,MAAM;EACJ,UAAU;GACR,YAAY;GACZ,OAAO;GACP,UAAU;GACV,QAAQ;GACR,OAAO;IACL,eAAe;IACf,mBAAmB;GACrB;GACA,SAAS;IACP,eAAe;IACf,mBAAmB;GACrB;EACF;EACA,YAAY;GACV,YAAY;GACZ,SAAS;GACT,OAAO;GACP,gBAAgB;GAChB,qBAAqB;GACrB,UAAU;GACV,QAAQ;EACV;EACA,SAAS;GACP,YAAY;GACZ,SAAS;GACT,eAAe;GACf,WAAW;GACX,SAAS;GACT,UAAU;GACV,OAAO;IACL,mBAAmB;IACnB,eAAe;KACb,MAAM;KACN,MAAM;IACR;IACA,yBAAyB;GAC3B;GACA,SAAS;IACP,mBAAmB;IACnB,eAAe;KACb,MAAM;KACN,MAAM;IACR;IACA,yBAAyB;GAC3B;EACF;EACA,QAAQ;GACN,iBAAiB;GACjB,mBAAmB;GACnB,eAAe;GAEf,yBAAyB,EACvB,iBAAiB,EACnB;EACF;EACA,MAAM;GACJ,MAAM;GACN,UAAU;EACZ;EACA,QAAQ;GACN,uBAAuB;GACvB,uBAAuB;GACvB,cAAc;EAChB;EACA,OAAO;GACL,OAAO;GACP,MAAM;GAEN,kBAAkB;GAClB,WAAW;EACb;EACA,aAAa,CAAC;EACd,cAAc;GACZ,YAAY;GACZ,cAAc;GACd,OAAO;GACP,QAAQ;GACR,SAAS;GACT,QAAQ;GACR,gBAAgB;GAChB,UAAU;GACV,OAAO;GACP,QAAQ,EACN,iBAAiB,uBACnB;GACA,SAAS,EACP,iBAAiB,yBACnB;EACF;CACF;CACA,UAAU;EACR,SAAS;GAEP,QAAQ;IACN,MAAM,EACJ,SAAS;KAAE,MAAM;KAAM,QAAQ;IAAK,EACtC;IACA,cAAc;KACZ,UAAU,IAAI,EAAE;KAChB,KAAK;IACP;IACA,SAAS,EACP,OAAO;KAAE,MAAM;KAAS,QAAQ,IAAI,GAAG;IAAE,EAC3C;IACA,QAAQ,EACN,eAAe;KAAE,MAAM;KAAM,QAAQ;IAAK,EAC5C;IACA,QAAQ;KACN,eAAe;MAAE,MAAM;MAAM,QAAQ;KAAK;KAE1C,4BAA4B,EAC1B,cAAc;MAAE,MAAM;MAAM,QAAQ;KAAM,EAC5C;IACF;GACF;GACA,UAAU;IACR,MAAM;KAEJ,iBAAiB;KACjB,mBAAmB;KACnB,eAAe;KACf,kDAAkD,EAChD,mBAAmB,KACrB;IACF;IACA,cAAc;KACZ,QAAQ;KACR,UAAU;KACV,KAAK;KACL,OAAO;IACT;IACA,YAAY,EACV,SAAS,KACX;IACA,SAAS;KACP,cAAc;KACd,WAAW;KAEX,UAAU,oCAAoC,IAAI,GAAG,EAAE;KAEvD,UAAU,aAAa,IAAI,GAAG,EAAE;IAClC;IACA,QAAQ;KACN,iBAAiB;KACjB,mBAAmB;KACnB,eAAe;KACf,4BAA4B,EAC1B,cAAc,MAChB;IACF;IACA,QAAQ;KACN,uBAAuB;KACvB,uBAAuB;KACvB,iBAAiB;KAEjB,mBAAmB;KACnB,eAAe;IACjB;IACA,OAAO;KACL,OAAO;KACP,WAAW;IACb;GACF;EACF;EAIA,MAAM;GACJ,KAAK,EAAE,SAAS;IAAE,+BAA+B;IAAQ,OAAO,EAAE,QAAQ,IAAI,GAAG,EAAE;GAAE,EAAE;GACvF,IAAI,EAAE,SAAS;IAAE,+BAA+B;IAAQ,OAAO,EAAE,QAAQ,IAAI,GAAG,EAAE;GAAE,EAAE;GACtF,IAAI,EAAE,SAAS;IAAE,+BAA+B;IAAQ,OAAO,EAAE,QAAQ,IAAI,GAAG,EAAE;GAAE,EAAE;GACtF,IAAI,EAAE,SAAS;IAAE,+BAA+B;IAAQ,OAAO,EAAE,QAAQ,IAAI,GAAG,EAAE;GAAE,EAAE;GACtF,IAAI,EAAE,SAAS;IAAE,+BAA+B;IAAQ,OAAO,EAAE,QAAQ,IAAI,GAAG,EAAE;GAAE,EAAE;EACxF;CACF;CACA,iBAAiB,EACf,SAAS,SACX;AACF,CAAC"}

package/dist/theme/slot-recipes/UIHeader.recipe.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+/**
+ * The height of the header bar — the banner slot below it is not counted, since its height is the
+ * consumer's content.
+ *
+ * A page that pins the header reserves exactly this much room for it, and anything anchored under
+ * the header starts here: a drawer's backdrop and positioner, a side navigation's
+ * `insetBlockStart`.
+ */
+export declare const uiHeaderHeight: `${number}rem`;
+declare const uiHeaderSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"search" | "badge" | "banner" | "bar" | "root" | "indicator" | "spacer" | "control" | "searchInput" | "actions" | "account" | "navButton" | "accountAvatar" | "accountIcon" | "navButtonBadge" | "navButtonIcon" | "searchButton" | "searchField" | "searchIcon" | "leading" | "logoLink" | "logoBlock", import('@chakra-ui/react').SlotRecipeVariantRecord<"search" | "badge" | "banner" | "bar" | "root" | "indicator" | "spacer" | "control" | "searchInput" | "actions" | "account" | "navButton" | "accountAvatar" | "accountIcon" | "navButtonBadge" | "navButtonIcon" | "searchButton" | "searchField" | "searchIcon" | "leading" | "logoLink" | "logoBlock">>;
+export default uiHeaderSlotRecipe;