@bitrise/bitkit-v2 0.3.466 → 0.3.468-beta.2968

package/dist/components/BitkitSelectMenu/SelectMenuShell.js

@@ -1,10 +1,11 @@
 import IconCross from "../../icons/IconCross.js";
+import IconCrossCircle from "../../icons/IconCrossCircle.js";
 import IconMagnifier from "../../icons/IconMagnifier.js";
 import BitkitGroupHeading from "../BitkitGroupHeading/BitkitGroupHeading.js";
 import { SelectMenuShellContextProvider } from "./BitkitSelectMenuAction.js";
 import { Box } from "@chakra-ui/react/box";
 import { chakra } from "@chakra-ui/react/styled-system";
-import { isValidElement, useRef } from "react";
+import { isValidElement, useEffect, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Text } from "@chakra-ui/react/text";
 import { Spinner } from "@chakra-ui/react/spinner";
@@ -21,9 +22,10 @@ var selectSizeMap = {
 		spinnerSize: "md"
 	}
 };
-var SelectMenuShell = ({ NS, children, collection, contentProps, contentRef, emptyHelperText, emptyLabel = "No matching options", iconSize, isLoading = false, onScrolledToBottom, onSearchChange, renderItem, searchValue, spinnerSize, styles }) => {
+var SelectMenuShell = ({ NS, children, collection, contentProps, contentRef, emptyHelperText, emptyLabel = "No matching options", errorHelperText, errorLabel, iconSize, isLoading = false, onScrolledToBottom, onSearchChange, renderItem, searchPlaceholder, searchValue, spinnerSize, styles }) => {
 	const { css: contentCss, ...restContentProps } = contentProps ?? {};
 	const isEmpty = collection.size === 0;
+	const hasError = !isLoading && !!errorLabel;
 	const hasAction = isValidElement(children);
 	const wasAtBottom = useRef(false);
 	const handleItemListScroll = (event) => {
@@ -49,11 +51,27 @@ var SelectMenuShell = ({ NS, children, collection, contentProps, contentRef, emp
 				}),
 				onSearchChange && /* @__PURE__ */ jsx(SelectMenuSearch, {
 					iconSize,
+					placeholder: searchPlaceholder,
 					styles,
 					value: searchValue ?? "",
 					onSearchChange
 				}),
-				/* @__PURE__ */ jsxs(Box, {
+				hasError ? /* @__PURE__ */ jsxs(Box, {
+					css: styles.errorState,
+					children: [/* @__PURE__ */ jsx(IconCrossCircle, {
+						css: styles.errorIcon,
+						size: iconSize
+					}), /* @__PURE__ */ jsxs(Box, {
+						css: styles.errorTextBlock,
+						children: [/* @__PURE__ */ jsx(Text, {
+							css: styles.errorLabel,
+							children: errorLabel
+						}), errorHelperText && /* @__PURE__ */ jsx(Text, {
+							css: styles.itemHelperText,
+							children: errorHelperText
+						})]
+					})]
+				}) : /* @__PURE__ */ jsxs(Box, {
 					css: styles.itemList,
 					onScroll: handleItemListScroll,
 					children: [
@@ -93,32 +111,44 @@ var SelectMenuShell = ({ NS, children, collection, contentProps, contentRef, emp
 		})
 	});
 };
-var SelectMenuSearch = ({ iconSize, onSearchChange, styles, value }) => /* @__PURE__ */ jsxs(Box, {
-	css: styles.searchInputGroup,
-	children: [
-		/* @__PURE__ */ jsx(IconMagnifier, {
-			size: iconSize,
-			color: "icon/tertiary"
-		}),
-		/* @__PURE__ */ jsx(chakra.input, {
-			"aria-label": "Search",
-			css: styles.searchInput,
-			placeholder: "Search...",
-			value,
-			onChange: (event) => onSearchChange(event.target.value),
-			onKeyDown: (event) => {
-				if (event.key === " ") event.stopPropagation();
-			}
-		}),
-		value && /* @__PURE__ */ jsx(chakra.button, {
-			type: "button",
-			css: styles.searchClear,
-			"aria-label": "Clear search",
-			onClick: () => onSearchChange(""),
-			children: /* @__PURE__ */ jsx(IconCross, { size: iconSize })
-		})
-	]
-});
+var SelectMenuSearch = ({ iconSize, onSearchChange, placeholder = "Search...", styles, value }) => {
+	const inputRef = useRef(null);
+	useEffect(() => {
+		const input = inputRef.current;
+		const content = input?.closest("[data-part=\"content\"]");
+		if (!input || content?.getAttribute("data-state") !== "open") return;
+		const focused = document.activeElement;
+		if (focused && focused !== content && content.contains(focused)) return;
+		input.focus();
+	}, []);
+	return /* @__PURE__ */ jsxs(Box, {
+		css: styles.searchInputGroup,
+		children: [
+			/* @__PURE__ */ jsx(IconMagnifier, {
+				size: iconSize,
+				color: "icon/tertiary"
+			}),
+			/* @__PURE__ */ jsx(chakra.input, {
+				"aria-label": "Search",
+				css: styles.searchInput,
+				placeholder,
+				ref: inputRef,
+				value,
+				onChange: (event) => onSearchChange(event.target.value),
+				onKeyDown: (event) => {
+					if (event.key === " ") event.stopPropagation();
+				}
+			}),
+			value && /* @__PURE__ */ jsx(chakra.button, {
+				type: "button",
+				css: styles.searchClear,
+				"aria-label": "Clear search",
+				onClick: () => onSearchChange(""),
+				children: /* @__PURE__ */ jsx(IconCross, { size: iconSize })
+			})
+		]
+	});
+};
 //#endregion
 export { SelectMenuShell, selectSizeMap };
 

package/dist/components/BitkitSelectMenu/SelectMenuShell.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectMenuShell.js","names":[],"sources":["../../../lib/components/BitkitSelectMenu/SelectMenuShell.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { type ListCollection } from '@chakra-ui/react/collection';\nimport { type Combobox } from '@chakra-ui/react/combobox';\nimport { type Select, type SelectContentProps } from '@chakra-ui/react/select';\nimport { Spinner } from '@chakra-ui/react/spinner';\nimport { chakra, type SystemStyleObject } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { type ChangeEvent, isValidElement, type ReactNode, type Ref, type UIEvent, useRef } from 'react';\n\nimport { IconCross, IconMagnifier } from '../../icons';\nimport BitkitGroupHeading from '../BitkitGroupHeading/BitkitGroupHeading';\nimport {\n  type BitkitSelectMenuEmptyStateProps,\n  type BitkitSelectMenuScrollProps,\n  type BitkitSelectMenuSearchProps,\n} from './BitkitSelectMenu';\nimport { type BitkitSelectMenuActionChild, SelectMenuShellContextProvider } from './BitkitSelectMenuAction';\n\nexport const selectSizeMap = {\n  lg: { avatarSize: '32', iconSize: '24', spinnerSize: 'lg' },\n  md: { avatarSize: '24', iconSize: '16', spinnerSize: 'md' },\n} as const;\n\nexport type SelectSizes = (typeof selectSizeMap)[keyof typeof selectSizeMap];\n\n/**\n * Internal shared shell for BitkitSelectMenu and BitkitMultiselectMenu.\n * Handles Content wrapper, search, loading, empty state, groups, and the action slot —\n * the caller only provides per-item rendering via renderItem and any sub-components\n * (e.g. <BitkitSelectMenu.Action />) via children.\n */\nexport type SelectMenuShellProps<T extends { value: string; group?: string }> = {\n  NS: typeof Select | typeof Combobox;\n  children?: BitkitSelectMenuActionChild;\n  collection: ListCollection<T>;\n  contentProps?: SelectContentProps;\n  contentRef?: Ref<HTMLDivElement>;\n  iconSize: SelectSizes['iconSize'];\n  isLoading?: boolean;\n  renderItem: (item: T) => ReactNode;\n  spinnerSize: SelectSizes['spinnerSize'];\n  styles: Record<string, SystemStyleObject>;\n} & BitkitSelectMenuSearchProps &\n  BitkitSelectMenuScrollProps &\n  BitkitSelectMenuEmptyStateProps;\n\nexport const SelectMenuShell = <T extends { value: string; group?: string }>({\n  NS,\n  children,\n  collection,\n  contentProps,\n  contentRef,\n  emptyHelperText,\n  emptyLabel = 'No matching options',\n  iconSize,\n  isLoading = false,\n  onScrolledToBottom,\n  onSearchChange,\n  renderItem,\n  searchValue,\n  spinnerSize,\n  styles,\n}: SelectMenuShellProps<T>) => {\n  const { css: contentCss, ...restContentProps } = contentProps ?? {};\n  const isEmpty = collection.size === 0;\n  const hasAction = isValidElement(children);\n\n  const wasAtBottom = useRef(false);\n  const handleItemListScroll = (event: UIEvent<HTMLDivElement>) => {\n    const list = event.currentTarget;\n    const atBottom = list.scrollTop >= list.scrollHeight - list.offsetHeight - 1;\n    // Only the transition into \"at the end\", so resting at the bottom doesn't keep asking.\n    if (atBottom && !wasAtBottom.current) onScrolledToBottom?.();\n    wasAtBottom.current = atBottom;\n  };\n\n  return (\n    <SelectMenuShellContextProvider value={{ iconSize, styles }}>\n      <NS.Content css={[styles.content, contentCss]} ref={contentRef} {...restContentProps}>\n        {/*\n          Without a search input, Zag's getInitialFocus (see @zag-js/dom-query) picks the first\n          tabbable descendant as the menu's initial focus target — which would be the action\n          slot, visually confusing. A hidden [data-autofocus] span wins over tabbables in\n          getInitialFocus's querySelector, so we focus an invisible element instead and Zag's\n          aria-activedescendant drives the highlight like a normal Select would.\n        */}\n        {!onSearchChange && hasAction && <span data-autofocus=\"\" tabIndex={-1} aria-hidden=\"true\" />}\n        {onSearchChange && (\n          <SelectMenuSearch\n            iconSize={iconSize}\n            styles={styles}\n            value={searchValue ?? ''}\n            onSearchChange={onSearchChange}\n          />\n        )}\n        <Box css={styles.itemList} onScroll={handleItemListScroll}>\n          {isLoading && (\n            <Box css={styles.item}>\n              <Spinner variant=\"purple\" size={spinnerSize} css={styles.itemLoading} />\n              <Text css={styles.itemLoadingLabel}>Loading...</Text>\n            </Box>\n          )}\n          {!isLoading && isEmpty && (\n            <Box css={styles.emptyState}>\n              <Text css={styles.itemLabel}>{emptyLabel}</Text>\n              {emptyHelperText && <Text css={styles.itemHelperText}>{emptyHelperText}</Text>}\n            </Box>\n          )}\n          {!isLoading &&\n            !isEmpty &&\n            collection.group().map(([type, group]) => (\n              <NS.ItemGroup key={type}>\n                {type && (\n                  <NS.ItemGroupLabel asChild>\n                    <BitkitGroupHeading label={type} paddingBlock=\"12\" paddingInline=\"16\" />\n                  </NS.ItemGroupLabel>\n                )}\n                {group.map(renderItem)}\n              </NS.ItemGroup>\n            ))}\n        </Box>\n        {children}\n      </NS.Content>\n    </SelectMenuShellContextProvider>\n  );\n};\n\ntype SelectMenuSearchProps = {\n  iconSize: '16' | '24';\n  onSearchChange: (searchText: string) => void;\n  styles: Record<string, SystemStyleObject>;\n  value: string;\n};\n\nconst SelectMenuSearch = ({ iconSize, onSearchChange, styles, value }: SelectMenuSearchProps) => (\n  <Box css={styles.searchInputGroup}>\n    <IconMagnifier size={iconSize} color=\"icon/tertiary\" />\n    <chakra.input\n      aria-label=\"Search\"\n      css={styles.searchInput}\n      placeholder=\"Search...\"\n      value={value}\n      onChange={(event: ChangeEvent<HTMLInputElement>) => onSearchChange(event.target.value)}\n      onKeyDown={(event) => {\n        // Zag's Select.Content keyDown listener fires ITEM.CLICK + preventDefault on Space\n        // regardless of which descendant is focused. That would eat the space before the\n        // input can type it. Enter is left alone so \"type-then-Enter-to-select\" still works.\n        if (event.key === ' ') event.stopPropagation();\n      }}\n    />\n    {value && (\n      <chakra.button\n        type=\"button\"\n        css={styles.searchClear}\n        aria-label=\"Clear search\"\n        onClick={() => onSearchChange('')}\n      >\n        <IconCross size={iconSize} />\n      </chakra.button>\n    )}\n  </Box>\n);\n"],"mappings":";;;;;;;;;;;AAkBA,IAAa,gBAAgB;CAC3B,IAAI;EAAE,YAAY;EAAM,UAAU;EAAM,aAAa;CAAK;CAC1D,IAAI;EAAE,YAAY;EAAM,UAAU;EAAM,aAAa;CAAK;AAC5D;AAyBA,IAAa,mBAAgE,EAC3E,IACA,UACA,YACA,cACA,YACA,iBACA,aAAa,uBACb,UACA,YAAY,OACZ,oBACA,gBACA,YACA,aACA,aACA,aAC6B;CAC7B,MAAM,EAAE,KAAK,YAAY,GAAG,qBAAqB,gBAAgB,CAAC;CAClE,MAAM,UAAU,WAAW,SAAS;CACpC,MAAM,YAAY,eAAe,QAAQ;CAEzC,MAAM,cAAc,OAAO,KAAK;CAChC,MAAM,wBAAwB,UAAmC;EAC/D,MAAM,OAAO,MAAM;EACnB,MAAM,WAAW,KAAK,aAAa,KAAK,eAAe,KAAK,eAAe;EAE3E,IAAI,YAAY,CAAC,YAAY,SAAS,qBAAqB;EAC3D,YAAY,UAAU;CACxB;CAEA,OACE,oBAAC,gCAAD;EAAgC,OAAO;GAAE;GAAU;EAAO;EACxD,UAAA,qBAAC,GAAG,SAAJ;GAAY,KAAK,CAAC,OAAO,SAAS,UAAU;GAAG,KAAK;GAAY,GAAI;GAApE,UAAA;IAQG,CAAC,kBAAkB,aAAa,oBAAC,QAAD;KAAM,kBAAe;KAAG,UAAU;KAAI,eAAY;IAAQ,CAAA;IAC1F,kBACC,oBAAC,kBAAD;KACY;KACF;KACR,OAAO,eAAe;KACN;IACjB,CAAA;IAEH,qBAAC,KAAD;KAAK,KAAK,OAAO;KAAU,UAAU;KAArC,UAAA;MACG,aACC,qBAAC,KAAD;OAAK,KAAK,OAAO;OAAjB,UAAA,CACE,oBAAC,SAAD;QAAS,SAAQ;QAAS,MAAM;QAAa,KAAK,OAAO;OAAc,CAAA,GACvE,oBAAC,MAAD;QAAM,KAAK,OAAO;QAAkB,UAAA;OAAgB,CAAA,CACjD;;MAEN,CAAC,aAAa,WACb,qBAAC,KAAD;OAAK,KAAK,OAAO;OAAjB,UAAA,CACE,oBAAC,MAAD;QAAM,KAAK,OAAO;QAAY,UAAA;OAAiB,CAAA,GAC9C,mBAAmB,oBAAC,MAAD;QAAM,KAAK,OAAO;QAAiB,UAAA;OAAsB,CAAA,CAC1E;;MAEN,CAAC,aACA,CAAC,WACD,WAAW,MAAM,CAAC,CAAC,KAAK,CAAC,MAAM,WAC7B,qBAAC,GAAG,WAAJ,EAAA,UAAA,CACG,QACC,oBAAC,GAAG,gBAAJ;OAAmB,SAAA;OACjB,UAAA,oBAAC,oBAAD;QAAoB,OAAO;QAAM,cAAa;QAAK,eAAc;OAAM,CAAA;MACtD,CAAA,GAEpB,MAAM,IAAI,UAAU,CACT,EAAA,GAPK,IAOL,CACf;KACA;;IACJ;GACS;;CACkB,CAAA;AAEpC;AASA,IAAM,oBAAoB,EAAE,UAAU,gBAAgB,QAAQ,YAC5D,qBAAC,KAAD;CAAK,KAAK,OAAO;CAAjB,UAAA;EACE,oBAAC,eAAD;GAAe,MAAM;GAAU,OAAM;EAAiB,CAAA;EACtD,oBAAC,OAAO,OAAR;GACE,cAAW;GACX,KAAK,OAAO;GACZ,aAAY;GACL;GACP,WAAW,UAAyC,eAAe,MAAM,OAAO,KAAK;GACrF,YAAY,UAAU;IAIpB,IAAI,MAAM,QAAQ,KAAK,MAAM,gBAAgB;GAC/C;EACD,CAAA;EACA,SACC,oBAAC,OAAO,QAAR;GACE,MAAK;GACL,KAAK,OAAO;GACZ,cAAW;GACX,eAAe,eAAe,EAAE;GAEhC,UAAA,oBAAC,WAAD,EAAW,MAAM,SAAW,CAAA;EACf,CAAA;CAEd"}
+{"version":3,"file":"SelectMenuShell.js","names":[],"sources":["../../../lib/components/BitkitSelectMenu/SelectMenuShell.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { type ListCollection } from '@chakra-ui/react/collection';\nimport { type Combobox } from '@chakra-ui/react/combobox';\nimport { type Select, type SelectContentProps } from '@chakra-ui/react/select';\nimport { Spinner } from '@chakra-ui/react/spinner';\nimport { chakra, type SystemStyleObject } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { type ChangeEvent, isValidElement, type ReactNode, type Ref, type UIEvent, useEffect, useRef } from 'react';\n\nimport { IconCross, IconCrossCircle, IconMagnifier } from '../../icons';\nimport BitkitGroupHeading from '../BitkitGroupHeading/BitkitGroupHeading';\nimport {\n  type BitkitSelectMenuEmptyStateProps,\n  type BitkitSelectMenuErrorStateProps,\n  type BitkitSelectMenuScrollProps,\n  type BitkitSelectMenuSearchProps,\n} from './BitkitSelectMenu';\nimport { type BitkitSelectMenuActionChild, SelectMenuShellContextProvider } from './BitkitSelectMenuAction';\n\nexport const selectSizeMap = {\n  lg: { avatarSize: '32', iconSize: '24', spinnerSize: 'lg' },\n  md: { avatarSize: '24', iconSize: '16', spinnerSize: 'md' },\n} as const;\n\nexport type SelectSizes = (typeof selectSizeMap)[keyof typeof selectSizeMap];\n\n/**\n * Internal shared shell for BitkitSelectMenu and BitkitMultiselectMenu.\n * Handles Content wrapper, search, loading, empty state, groups, and the action slot —\n * the caller only provides per-item rendering via renderItem and any sub-components\n * (e.g. <BitkitSelectMenu.Action />) via children.\n */\nexport type SelectMenuShellProps<T extends { value: string; group?: string }> = {\n  NS: typeof Select | typeof Combobox;\n  children?: BitkitSelectMenuActionChild;\n  collection: ListCollection<T>;\n  contentProps?: SelectContentProps;\n  contentRef?: Ref<HTMLDivElement>;\n  iconSize: SelectSizes['iconSize'];\n  isLoading?: boolean;\n  renderItem: (item: T) => ReactNode;\n  spinnerSize: SelectSizes['spinnerSize'];\n  styles: Record<string, SystemStyleObject>;\n} & BitkitSelectMenuSearchProps &\n  BitkitSelectMenuScrollProps &\n  BitkitSelectMenuEmptyStateProps &\n  BitkitSelectMenuErrorStateProps;\n\nexport const SelectMenuShell = <T extends { value: string; group?: string }>({\n  NS,\n  children,\n  collection,\n  contentProps,\n  contentRef,\n  emptyHelperText,\n  emptyLabel = 'No matching options',\n  errorHelperText,\n  errorLabel,\n  iconSize,\n  isLoading = false,\n  onScrolledToBottom,\n  onSearchChange,\n  renderItem,\n  searchPlaceholder,\n  searchValue,\n  spinnerSize,\n  styles,\n}: SelectMenuShellProps<T>) => {\n  const { css: contentCss, ...restContentProps } = contentProps ?? {};\n  const isEmpty = collection.size === 0;\n  const hasError = !isLoading && !!errorLabel;\n  const hasAction = isValidElement(children);\n\n  const wasAtBottom = useRef(false);\n  const handleItemListScroll = (event: UIEvent<HTMLDivElement>) => {\n    const list = event.currentTarget;\n    const atBottom = list.scrollTop >= list.scrollHeight - list.offsetHeight - 1;\n    // Only the transition into \"at the end\", so resting at the bottom doesn't keep asking.\n    if (atBottom && !wasAtBottom.current) onScrolledToBottom?.();\n    wasAtBottom.current = atBottom;\n  };\n\n  return (\n    <SelectMenuShellContextProvider value={{ iconSize, styles }}>\n      <NS.Content css={[styles.content, contentCss]} ref={contentRef} {...restContentProps}>\n        {/*\n          Without a search input, Zag's getInitialFocus (see @zag-js/dom-query) picks the first\n          tabbable descendant as the menu's initial focus target — which would be the action\n          slot, visually confusing. A hidden [data-autofocus] span wins over tabbables in\n          getInitialFocus's querySelector, so we focus an invisible element instead and Zag's\n          aria-activedescendant drives the highlight like a normal Select would. Zag picks that\n          target once, when the menu opens, so a search input that arrives later takes the focus\n          over from the span itself — see SelectMenuSearch below.\n        */}\n        {!onSearchChange && hasAction && <span data-autofocus=\"\" tabIndex={-1} aria-hidden=\"true\" />}\n        {onSearchChange && (\n          <SelectMenuSearch\n            iconSize={iconSize}\n            placeholder={searchPlaceholder}\n            styles={styles}\n            value={searchValue ?? ''}\n            onSearchChange={onSearchChange}\n          />\n        )}\n        {hasError ? (\n          <Box css={styles.errorState}>\n            <IconCrossCircle css={styles.errorIcon} size={iconSize} />\n            <Box css={styles.errorTextBlock}>\n              <Text css={styles.errorLabel}>{errorLabel}</Text>\n              {errorHelperText && <Text css={styles.itemHelperText}>{errorHelperText}</Text>}\n            </Box>\n          </Box>\n        ) : (\n          <Box css={styles.itemList} onScroll={handleItemListScroll}>\n            {isLoading && (\n              <Box css={styles.item}>\n                <Spinner variant=\"purple\" size={spinnerSize} css={styles.itemLoading} />\n                <Text css={styles.itemLoadingLabel}>Loading...</Text>\n              </Box>\n            )}\n            {!isLoading && isEmpty && (\n              <Box css={styles.emptyState}>\n                <Text css={styles.itemLabel}>{emptyLabel}</Text>\n                {emptyHelperText && <Text css={styles.itemHelperText}>{emptyHelperText}</Text>}\n              </Box>\n            )}\n            {!isLoading &&\n              !isEmpty &&\n              collection.group().map(([type, group]) => (\n                <NS.ItemGroup key={type}>\n                  {type && (\n                    <NS.ItemGroupLabel asChild>\n                      <BitkitGroupHeading label={type} paddingBlock=\"12\" paddingInline=\"16\" />\n                    </NS.ItemGroupLabel>\n                  )}\n                  {group.map(renderItem)}\n                </NS.ItemGroup>\n              ))}\n          </Box>\n        )}\n        {children}\n      </NS.Content>\n    </SelectMenuShellContextProvider>\n  );\n};\n\ntype SelectMenuSearchProps = {\n  iconSize: '16' | '24';\n  onSearchChange: (searchText: string) => void;\n  placeholder?: string;\n  styles: Record<string, SystemStyleObject>;\n  value: string;\n};\n\nconst SelectMenuSearch = ({\n  iconSize,\n  onSearchChange,\n  placeholder = 'Search...',\n  styles,\n  value,\n}: SelectMenuSearchProps) => {\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  useEffect(() => {\n    const input = inputRef.current;\n    const content = input?.closest('[data-part=\"content\"]');\n    if (!input || content?.getAttribute('data-state') !== 'open') return;\n    const focused = document.activeElement;\n    if (focused && focused !== content && content.contains(focused)) return;\n    input.focus();\n  }, []);\n\n  return (\n    <Box css={styles.searchInputGroup}>\n      <IconMagnifier size={iconSize} color=\"icon/tertiary\" />\n      <chakra.input\n        aria-label=\"Search\"\n        css={styles.searchInput}\n        placeholder={placeholder}\n        ref={inputRef}\n        value={value}\n        onChange={(event: ChangeEvent<HTMLInputElement>) => onSearchChange(event.target.value)}\n        onKeyDown={(event) => {\n          // Zag's Select.Content keyDown listener fires ITEM.CLICK + preventDefault on Space\n          // regardless of which descendant is focused. That would eat the space before the\n          // input can type it. Enter is left alone so \"type-then-Enter-to-select\" still works.\n          if (event.key === ' ') event.stopPropagation();\n        }}\n      />\n      {value && (\n        <chakra.button\n          type=\"button\"\n          css={styles.searchClear}\n          aria-label=\"Clear search\"\n          onClick={() => onSearchChange('')}\n        >\n          <IconCross size={iconSize} />\n        </chakra.button>\n      )}\n    </Box>\n  );\n};\n"],"mappings":"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"}

package/dist/components/BitkitUISideNav/BitkitUISideNav.d.ts

@@ -0,0 +1,38 @@
+import { BoxProps } from '@chakra-ui/react/box';
+import { ReactNode } from 'react';
+export interface BitkitUISideNavProps extends Omit<BoxProps, 'children'> {
+    children: ReactNode;
+    /**
+     * Forces the desktop rail open or shut, overriding the pointer and focus behaviour. Leave it
+     * unset for the normal rail. Set it to `true` while something the rail does not know about is
+     * anchored to it, such as a popover opened from the footer.
+     */
+    expanded?: boolean;
+    /** Mobile drawer visibility. Controlled, because the header's menu button is what opens it. */
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}
+export { uiSideNavRailWidth } from '../../theme/slot-recipes/UISideNav.recipe';
+export { type BitkitUISideNavBodyProps } from './UISideNavBody';
+export { type BitkitUISideNavFooterProps } from './UISideNavFooter';
+export { type BitkitUISideNavFooterHeadingProps } from './UISideNavFooterHeading';
+export { type BitkitUISideNavItemProps } from './UISideNavItem';
+export { type BitkitUISideNavLinkAsAnchorProps, type BitkitUISideNavLinkAsButtonProps, type BitkitUISideNavLinkProps, } from './UISideNavLink';
+export { type BitkitUISideNavWorkspaceProps, type BitkitUISideNavWorkspaceSelectorProps, } from './UISideNavWorkspaceSelector';
+declare const _default: import('react').ForwardRefExoticComponent<BitkitUISideNavProps & import('react').RefAttributes<HTMLElement>> & {
+    Body: import('react').ForwardRefExoticComponent<import('./UISideNavBody').BitkitUISideNavBodyProps & import('react').RefAttributes<HTMLDivElement>>;
+    Footer: import('react').ForwardRefExoticComponent<import('./UISideNavFooter').BitkitUISideNavFooterProps & import('react').RefAttributes<HTMLDivElement>>;
+    FooterHeading: import('react').ForwardRefExoticComponent<import('./UISideNavFooterHeading').BitkitUISideNavFooterHeadingProps & import('react').RefAttributes<HTMLParagraphElement>>;
+    Item: import('react').ForwardRefExoticComponent<import('./UISideNavItem').BitkitUISideNavItemProps & import('react').RefAttributes<HTMLAnchorElement>>;
+    Link: import('react').ForwardRefExoticComponent<import('./UISideNavLink').BitkitUISideNavLinkProps & import('react').RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+    WorkspaceSelector: import('react').ForwardRefExoticComponent<Omit<import('@chakra-ui/react').SelectTriggerProps, "children" | "onChange"> & {
+        children?: import('../BitkitSelectMenu/BitkitSelectMenuAction').BitkitSelectMenuActionChild;
+        isLoading?: boolean;
+        label?: string;
+        onOpenChange?: (open: boolean) => void;
+        onValueChange?: (value: string) => void;
+        value?: string;
+        workspaces: Array<import('./UISideNavWorkspaceSelector').BitkitUISideNavWorkspaceProps>;
+    } & Omit<import('../BitkitSelectMenu/BitkitSelectMenu').BitkitSelectMenuSearchProps, "searchPlaceholder"> & import('../BitkitSelectMenu/BitkitSelectMenu').BitkitSelectMenuScrollProps & import('../BitkitSelectMenu/BitkitSelectMenu').BitkitSelectMenuEmptyStateProps & import('../BitkitSelectMenu/BitkitSelectMenu').BitkitSelectMenuErrorStateProps & import('react').RefAttributes<HTMLButtonElement>>;
+};
+export default _default;

package/dist/components/BitkitUISideNav/BitkitUISideNav.js

@@ -0,0 +1,167 @@
+import { withSubComponents } from "../../utilities/withSubComponents.js";
+import BitkitCloseButton from "../BitkitCloseButton/BitkitCloseButton.js";
+import useResponsive from "../../hooks/useResponsive.js";
+import { UISideNavContextProvider } from "./UISideNavContext.js";
+import UISideNavBody from "./UISideNavBody.js";
+import UISideNavFooter from "./UISideNavFooter.js";
+import UISideNavFooterHeading from "./UISideNavFooterHeading.js";
+import UISideNavItem from "./UISideNavItem.js";
+import UISideNavLink from "./UISideNavLink.js";
+import UISideNavWorkspaceSelector from "./UISideNavWorkspaceSelector.js";
+import { uiSideNavRailWidth } from "../../theme/slot-recipes/UISideNav.recipe.js";
+import { Box } from "@chakra-ui/react/box";
+import { useSlotRecipe } from "@chakra-ui/react/styled-system";
+import { forwardRef, useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Portal } from "@chakra-ui/react/portal";
+import { mergeRefs } from "@chakra-ui/react";
+import { Drawer } from "@chakra-ui/react/drawer";
+//#region lib/components/BitkitUISideNav/BitkitUISideNav.tsx
+/**
+* The platform's primary navigation. It expects a workspace selector, a body of navigation
+* items, and an optional footer:
+*
+* ```tsx
+* <BitkitUISideNav open={open} onOpenChange={setOpen}>
+*   <BitkitUISideNav.WorkspaceSelector
+*     workspaces={workspaces}
+*     value={workspace}
+*     onValueChange={setWorkspace}
+*   />
+*   <BitkitUISideNav.Body>
+*     <BitkitUISideNav.Item href="/dashboard" icon={IconDashboard} selectedIcon={IconDashboardFilled} selected>
+*       Dashboard
+*     </BitkitUISideNav.Item>
+*   </BitkitUISideNav.Body>
+*   <BitkitUISideNav.Footer>…</BitkitUISideNav.Footer>
+* </BitkitUISideNav>
+* ```
+*
+* On desktop it is a 72px rail that widens to 256px under the pointer and while anything inside
+* it holds keyboard focus. The rows are always laid out at the full width and clipped, so the
+* labels appear without any text reflowing. It will not collapse while the workspace menu is
+* open. There is no pin: the rail is the resting state.
+*
+* Below the `tablet` breakpoint it becomes an overlay drawer instead, opened by the header rather
+* than by hovering. Pass `open` and `onOpenChange`; they are ignored on desktop.
+*
+* It does not position itself. The consumer decides where it sits and how tall it is, which is
+* what lets a page slot it under a header of any height. The expanded rail overlays the page
+* rather than pushing it, so give it a `position` of your own and reserve 72px beside it.
+*
+* Descendants can read the current state with `useUISideNav()`.
+*/
+var BitkitUISideNav = forwardRef((props, ref) => {
+	const { children, css, expanded: expandedProp, onBlur, onFocus, onOpenChange, onPointerEnter, onPointerLeave, open = false, ...rest } = props;
+	const { isMobile } = useResponsive();
+	const [pointerInside, setPointerInside] = useState(false);
+	const [focusInside, setFocusInside] = useState(false);
+	const [menuOpen, setMenuOpen] = useState(false);
+	const menuContainerRef = useRef(null);
+	const navRef = useRef(null);
+	const setNavRef = useMemo(() => mergeRefs(navRef, ref), [ref]);
+	const styles = useSlotRecipe({ key: "uiSideNav" })({ layout: isMobile ? "drawer" : "rail" });
+	const expanded = isMobile || (expandedProp ?? (pointerInside || focusInside || menuOpen));
+	const tracksPointer = !isMobile && expandedProp === void 0;
+	const isInsideNav = (event) => event.target instanceof Node && event.currentTarget.contains(event.target);
+	const handleFocus = (event) => {
+		onFocus?.(event);
+		if (!tracksPointer || !isInsideNav(event)) return;
+		if (!event.target.matches(":focus-visible")) return;
+		setFocusInside(true);
+	};
+	const handleBlur = (event) => {
+		onBlur?.(event);
+		if (!tracksPointer || event.currentTarget.contains(event.relatedTarget)) return;
+		setFocusInside(false);
+	};
+	const handlePointerEnter = (event) => {
+		onPointerEnter?.(event);
+		if (tracksPointer && isInsideNav(event)) setPointerInside(true);
+	};
+	const handlePointerLeave = (event) => {
+		onPointerLeave?.(event);
+		if (tracksPointer && isInsideNav(event)) setPointerInside(false);
+	};
+	useEffect(() => {
+		if (!tracksPointer || !focusInside) return void 0;
+		const syncFocusInside = () => {
+			if (!navRef.current?.contains(document.activeElement)) setFocusInside(false);
+		};
+		document.addEventListener("focusin", syncFocusInside);
+		return () => document.removeEventListener("focusin", syncFocusInside);
+	}, [focusInside, tracksPointer]);
+	useEffect(() => {
+		if (!tracksPointer || !pointerInside) return void 0;
+		const syncPointerInside = () => {
+			if (!navRef.current?.matches(":hover")) setPointerInside(false);
+		};
+		document.addEventListener("pointerover", syncPointerInside);
+		return () => document.removeEventListener("pointerover", syncPointerInside);
+	}, [pointerInside, tracksPointer]);
+	const nav = /* @__PURE__ */ jsx(Box, {
+		ref: setNavRef,
+		"aria-label": "Platform navigation",
+		asChild: true,
+		"data-expanded": expanded ? "" : void 0,
+		...rest,
+		css: [styles.root, css],
+		onBlur: handleBlur,
+		onFocus: handleFocus,
+		onPointerEnter: handlePointerEnter,
+		onPointerLeave: handlePointerLeave,
+		children: /* @__PURE__ */ jsx("nav", { children })
+	});
+	const context = useMemo(() => ({
+		expanded,
+		isMobile,
+		menuContainerRef,
+		setMenuOpen,
+		styles
+	}), [
+		expanded,
+		isMobile,
+		styles
+	]);
+	if (!isMobile) return /* @__PURE__ */ jsx(UISideNavContextProvider, {
+		value: context,
+		children: nav
+	});
+	return /* @__PURE__ */ jsx(UISideNavContextProvider, {
+		value: context,
+		children: /* @__PURE__ */ jsx(Drawer.Root, {
+			onOpenChange: (details) => onOpenChange?.(details.open),
+			open,
+			children: /* @__PURE__ */ jsxs(Portal, { children: [/* @__PURE__ */ jsx(Drawer.Backdrop, { css: styles.backdrop }), /* @__PURE__ */ jsx(Drawer.Positioner, {
+				css: styles.positioner,
+				children: /* @__PURE__ */ jsxs(Drawer.Content, {
+					ref: menuContainerRef,
+					"aria-label": "Navigation",
+					css: styles.content,
+					children: [nav, /* @__PURE__ */ jsx(Box, {
+						css: styles.closeButton,
+						children: /* @__PURE__ */ jsx(BitkitCloseButton, {
+							"aria-label": "Close navigation",
+							colorVariant: "white",
+							onClick: () => onOpenChange?.(false),
+							size: "md"
+						})
+					})]
+				})
+			})] })
+		})
+	});
+});
+BitkitUISideNav.displayName = "BitkitUISideNav";
+var BitkitUISideNav_default = withSubComponents(BitkitUISideNav, {
+	Body: UISideNavBody,
+	Footer: UISideNavFooter,
+	FooterHeading: UISideNavFooterHeading,
+	Item: UISideNavItem,
+	Link: UISideNavLink,
+	WorkspaceSelector: UISideNavWorkspaceSelector
+});
+//#endregion
+export { BitkitUISideNav_default as default, uiSideNavRailWidth };
+
+//# sourceMappingURL=BitkitUISideNav.js.map

package/dist/components/BitkitUISideNav/BitkitUISideNav.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BitkitUISideNav.js","names":[],"sources":["../../../lib/components/BitkitUISideNav/BitkitUISideNav.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 { Drawer } from '@chakra-ui/react/drawer';\nimport { Portal } from '@chakra-ui/react/portal';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { forwardRef, type ReactNode, useEffect, useMemo, useRef, useState } from 'react';\n\nimport useResponsive from '../../hooks/useResponsive';\nimport { withSubComponents } from '../../utilities/withSubComponents';\nimport BitkitCloseButton from '../BitkitCloseButton/BitkitCloseButton';\nimport UISideNavBody from './UISideNavBody';\nimport { UISideNavContextProvider } from './UISideNavContext';\nimport UISideNavFooter from './UISideNavFooter';\nimport UISideNavFooterHeading from './UISideNavFooterHeading';\nimport UISideNavItem from './UISideNavItem';\nimport UISideNavLink from './UISideNavLink';\nimport UISideNavWorkspaceSelector from './UISideNavWorkspaceSelector';\n\nexport interface BitkitUISideNavProps extends Omit<BoxProps, 'children'> {\n  children: ReactNode;\n  /**\n   * Forces the desktop rail open or shut, overriding the pointer and focus behaviour. Leave it\n   * unset for the normal rail. Set it to `true` while something the rail does not know about is\n   * anchored to it, such as a popover opened from the footer.\n   */\n  expanded?: boolean;\n  /** Mobile drawer visibility. Controlled, because the header's menu button is what opens it. */\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n}\n\n/**\n * The platform's primary navigation. It expects a workspace selector, a body of navigation\n * items, and an optional footer:\n *\n * ```tsx\n * <BitkitUISideNav open={open} onOpenChange={setOpen}>\n *   <BitkitUISideNav.WorkspaceSelector\n *     workspaces={workspaces}\n *     value={workspace}\n *     onValueChange={setWorkspace}\n *   />\n *   <BitkitUISideNav.Body>\n *     <BitkitUISideNav.Item href=\"/dashboard\" icon={IconDashboard} selectedIcon={IconDashboardFilled} selected>\n *       Dashboard\n *     </BitkitUISideNav.Item>\n *   </BitkitUISideNav.Body>\n *   <BitkitUISideNav.Footer>…</BitkitUISideNav.Footer>\n * </BitkitUISideNav>\n * ```\n *\n * On desktop it is a 72px rail that widens to 256px under the pointer and while anything inside\n * it holds keyboard focus. The rows are always laid out at the full width and clipped, so the\n * labels appear without any text reflowing. It will not collapse while the workspace menu is\n * open. There is no pin: the rail is the resting state.\n *\n * Below the `tablet` breakpoint it becomes an overlay drawer instead, opened by the header rather\n * than by hovering. Pass `open` and `onOpenChange`; they are ignored on desktop.\n *\n * It does not position itself. The consumer decides where it sits and how tall it is, which is\n * what lets a page slot it under a header of any height. The expanded rail overlays the page\n * rather than pushing it, so give it a `position` of your own and reserve 72px beside it.\n *\n * Descendants can read the current state with `useUISideNav()`.\n */\nconst BitkitUISideNav = forwardRef<HTMLElement, BitkitUISideNavProps>((props, ref) => {\n  const {\n    children,\n    css,\n    expanded: expandedProp,\n    onBlur,\n    onFocus,\n    onOpenChange,\n    onPointerEnter,\n    onPointerLeave,\n    open = false,\n    ...rest\n  } = props;\n\n  const { isMobile } = useResponsive();\n\n  const [pointerInside, setPointerInside] = useState(false);\n  const [focusInside, setFocusInside] = useState(false);\n  const [menuOpen, setMenuOpen] = useState(false);\n  const menuContainerRef = useRef<HTMLDivElement>(null);\n  const navRef = useRef<HTMLElement>(null);\n  const setNavRef = useMemo(() => mergeRefs(navRef, ref), [ref]);\n\n  const recipe = useSlotRecipe({ key: 'uiSideNav' });\n  const styles = recipe({ layout: isMobile ? 'drawer' : 'rail' });\n\n  const expanded = isMobile || (expandedProp ?? (pointerInside || focusInside || menuOpen));\n  const tracksPointer = !isMobile && expandedProp === undefined;\n\n  // React bubbles a portalled descendant's events through the React tree rather than the DOM\n  // tree, so a dialog opened from a footer row reaches these handlers while sitting under\n  // `body`. Only a target that is really a DOM descendant counts as being inside the rail.\n  const isInsideNav = (event: { currentTarget: Node; target: EventTarget | null }) =>\n    event.target instanceof Node && event.currentTarget.contains(event.target);\n\n  // The consumer's handlers run first and unconditionally: the rail listens on the same events,\n  // it does not own them.\n  const handleFocus: NonNullable<BitkitUISideNavProps['onFocus']> = (event) => {\n    onFocus?.(event);\n    if (!tracksPointer || !isInsideNav(event)) return;\n    if (!event.target.matches(':focus-visible')) return;\n    setFocusInside(true);\n  };\n\n  const handleBlur: NonNullable<BitkitUISideNavProps['onBlur']> = (event) => {\n    onBlur?.(event);\n    // `blur` also fires when focus moves between two rows. Only a target outside the nav counts.\n    if (!tracksPointer || event.currentTarget.contains(event.relatedTarget)) return;\n    setFocusInside(false);\n  };\n\n  const handlePointerEnter: NonNullable<BitkitUISideNavProps['onPointerEnter']> = (event) => {\n    onPointerEnter?.(event);\n    if (tracksPointer && isInsideNav(event)) setPointerInside(true);\n  };\n\n  const handlePointerLeave: NonNullable<BitkitUISideNavProps['onPointerLeave']> = (event) => {\n    onPointerLeave?.(event);\n    if (tracksPointer && isInsideNav(event)) setPointerInside(false);\n  };\n\n  // A blur does not always reach the nav. Focus can move into a portal, or the focused row can be\n  // unmounted, and then the rail would stay open with nothing to close it. While focus counts as\n  // inside, re-check every focus change against the document rather than trusting blur alone.\n  useEffect(() => {\n    if (!tracksPointer || !focusInside) return undefined;\n\n    const syncFocusInside = () => {\n      if (!navRef.current?.contains(document.activeElement)) setFocusInside(false);\n    };\n\n    document.addEventListener('focusin', syncFocusInside);\n    return () => document.removeEventListener('focusin', syncFocusInside);\n  }, [focusInside, tracksPointer]);\n\n  // React derives pointer enter and leave from the React tree too, so moving from a row onto a\n  // portalled descendant never counts as leaving and `onPointerLeave` never fires. While the\n  // pointer counts as inside, read the nav's own `:hover` on every pointer target change rather\n  // than waiting for a leave that may not come.\n  useEffect(() => {\n    if (!tracksPointer || !pointerInside) return undefined;\n\n    const syncPointerInside = () => {\n      if (!navRef.current?.matches(':hover')) setPointerInside(false);\n    };\n\n    document.addEventListener('pointerover', syncPointerInside);\n    return () => document.removeEventListener('pointerover', syncPointerInside);\n  }, [pointerInside, tracksPointer]);\n\n  const nav = (\n    <Box\n      ref={setNavRef}\n      aria-label=\"Platform navigation\"\n      asChild\n      data-expanded={expanded ? '' : undefined}\n      {...rest}\n      css={[styles.root, css]}\n      onBlur={handleBlur}\n      onFocus={handleFocus}\n      onPointerEnter={handlePointerEnter}\n      onPointerLeave={handlePointerLeave}\n    >\n      <nav>{children}</nav>\n    </Box>\n  );\n\n  const context = useMemo(\n    () => ({ expanded, isMobile, menuContainerRef, setMenuOpen, styles }),\n    [expanded, isMobile, styles],\n  );\n\n  if (!isMobile) {\n    return <UISideNavContextProvider value={context}>{nav}</UISideNavContextProvider>;\n  }\n\n  return (\n    <UISideNavContextProvider value={context}>\n      <Drawer.Root onOpenChange={(details) => onOpenChange?.(details.open)} open={open}>\n        <Portal>\n          <Drawer.Backdrop css={styles.backdrop} />\n          <Drawer.Positioner css={styles.positioner}>\n            <Drawer.Content ref={menuContainerRef} aria-label=\"Navigation\" css={styles.content}>\n              {nav}\n              <Box css={styles.closeButton}>\n                <BitkitCloseButton\n                  aria-label=\"Close navigation\"\n                  colorVariant=\"white\"\n                  onClick={() => onOpenChange?.(false)}\n                  size=\"md\"\n                />\n              </Box>\n            </Drawer.Content>\n          </Drawer.Positioner>\n        </Portal>\n      </Drawer.Root>\n    </UISideNavContextProvider>\n  );\n});\n\nexport { uiSideNavRailWidth } from '../../theme/slot-recipes/UISideNav.recipe';\nexport { type BitkitUISideNavBodyProps } from './UISideNavBody';\nexport { type BitkitUISideNavFooterProps } from './UISideNavFooter';\nexport { type BitkitUISideNavFooterHeadingProps } from './UISideNavFooterHeading';\nexport { type BitkitUISideNavItemProps } from './UISideNavItem';\nexport {\n  type BitkitUISideNavLinkAsAnchorProps,\n  type BitkitUISideNavLinkAsButtonProps,\n  type BitkitUISideNavLinkProps,\n} from './UISideNavLink';\nexport {\n  type BitkitUISideNavWorkspaceProps,\n  type BitkitUISideNavWorkspaceSelectorProps,\n} from './UISideNavWorkspaceSelector';\n\nBitkitUISideNav.displayName = 'BitkitUISideNav';\n\nexport default withSubComponents(BitkitUISideNav, {\n  Body: UISideNavBody,\n  Footer: UISideNavFooter,\n  FooterHeading: UISideNavFooterHeading,\n  Item: UISideNavItem,\n  Link: UISideNavLink,\n  WorkspaceSelector: UISideNavWorkspaceSelector,\n});\n"],"mappings":"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"}

package/dist/components/BitkitUISideNav/UISideNavBody.d.ts

@@ -0,0 +1,7 @@
+import { BoxProps } from '@chakra-ui/react/box';
+import { ReactNode } from 'react';
+export interface BitkitUISideNavBodyProps extends BoxProps {
+    children: ReactNode;
+}
+declare const UISideNavBody: import('react').ForwardRefExoticComponent<BitkitUISideNavBodyProps & import('react').RefAttributes<HTMLDivElement>>;
+export default UISideNavBody;

package/dist/components/BitkitUISideNav/UISideNavBody.js

@@ -0,0 +1,20 @@
+import { useUISideNavContext } from "./UISideNavContext.js";
+import { Box } from "@chakra-ui/react/box";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region lib/components/BitkitUISideNav/UISideNavBody.tsx
+var UISideNavBody = forwardRef((props, ref) => {
+	const { children, css, ...rest } = props;
+	const { styles } = useUISideNavContext();
+	return /* @__PURE__ */ jsx(Box, {
+		ref,
+		...rest,
+		css: [styles.body, css],
+		children
+	});
+});
+UISideNavBody.displayName = "BitkitUISideNav.Body";
+//#endregion
+export { UISideNavBody as default };
+
+//# sourceMappingURL=UISideNavBody.js.map

package/dist/components/BitkitUISideNav/UISideNavBody.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UISideNavBody.js","names":[],"sources":["../../../lib/components/BitkitUISideNav/UISideNavBody.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { forwardRef, type ReactNode } from 'react';\n\nimport { useUISideNavContext } from './UISideNavContext';\n\nexport interface BitkitUISideNavBodyProps extends BoxProps {\n  children: ReactNode;\n}\n\nconst UISideNavBody = forwardRef<HTMLDivElement, BitkitUISideNavBodyProps>((props, ref) => {\n  const { children, css, ...rest } = props;\n\n  const { styles } = useUISideNavContext();\n\n  return (\n    <Box ref={ref} {...rest} css={[styles.body, css]}>\n      {children}\n    </Box>\n  );\n});\n\nUISideNavBody.displayName = 'BitkitUISideNav.Body';\n\nexport default UISideNavBody;\n"],"mappings":";;;;;AASA,IAAM,gBAAgB,YAAsD,OAAO,QAAQ;CACzF,MAAM,EAAE,UAAU,KAAK,GAAG,SAAS;CAEnC,MAAM,EAAE,WAAW,oBAAoB;CAEvC,OACE,oBAAC,KAAD;EAAU;EAAK,GAAI;EAAM,KAAK,CAAC,OAAO,MAAM,GAAG;EAC5C;CACE,CAAA;AAET,CAAC;AAED,cAAc,cAAc"}

package/dist/components/BitkitUISideNav/UISideNavContext.d.ts

@@ -0,0 +1,32 @@
+import { SystemStyleObject } from '@chakra-ui/react/styled-system';
+import { RefObject } from 'react';
+export interface UISideNavContextValue {
+    /** True while the rail is showing its labels, and always true in the mobile drawer. */
+    expanded: boolean;
+    isMobile: boolean;
+    /**
+     * Where a menu opened inside the drawer has to be portalled: the panel itself. The panel
+     * scrolls, so a menu left in the flow would scroll with it and be clipped by it, and anywhere
+     * outside the panel is outside the dialog's focus trap.
+     */
+    menuContainerRef: RefObject<HTMLDivElement | null>;
+    /**
+     * How a descendant menu holds the rail open. The rail cannot collapse while a menu anchored
+     * inside it is open, or the menu would be left hanging beside a 72px strip.
+     */
+    setMenuOpen: (open: boolean) => void;
+    styles: Record<string, SystemStyleObject>;
+}
+declare const UISideNavContextProvider: import('react').Provider<UISideNavContextValue>, useUISideNavContext: () => UISideNavContextValue;
+export { UISideNavContextProvider, useUISideNavContext };
+/**
+ * Reads the side navigation's current state from inside it. Anything rendered in the footer that
+ * has to lay itself out differently in the collapsed rail should call this rather than have the
+ * state passed down to it.
+ *
+ * ```tsx
+ * const { expanded } = useUISideNav();
+ * return expanded ? <McpWidget /> : <McpWidgetIcon />;
+ * ```
+ */
+export declare const useUISideNav: () => Pick<UISideNavContextValue, "expanded" | "isMobile">;

package/dist/components/BitkitUISideNav/UISideNavContext.js

@@ -0,0 +1,28 @@
+import { createContext } from "@chakra-ui/react";
+//#region lib/components/BitkitUISideNav/UISideNavContext.tsx
+var [UISideNavContextProvider, useUISideNavContext] = createContext({
+	hookName: "useUISideNavContext",
+	name: "UISideNavContext",
+	providerName: "<BitkitUISideNav />"
+});
+/**
+* Reads the side navigation's current state from inside it. Anything rendered in the footer that
+* has to lay itself out differently in the collapsed rail should call this rather than have the
+* state passed down to it.
+*
+* ```tsx
+* const { expanded } = useUISideNav();
+* return expanded ? <McpWidget /> : <McpWidgetIcon />;
+* ```
+*/
+var useUISideNav = () => {
+	const { expanded, isMobile } = useUISideNavContext();
+	return {
+		expanded,
+		isMobile
+	};
+};
+//#endregion
+export { UISideNavContextProvider, useUISideNav, useUISideNavContext };
+
+//# sourceMappingURL=UISideNavContext.js.map

package/dist/components/BitkitUISideNav/UISideNavContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UISideNavContext.js","names":[],"sources":["../../../lib/components/BitkitUISideNav/UISideNavContext.tsx"],"sourcesContent":["// eslint-disable-next-line no-restricted-imports\nimport { createContext } from '@chakra-ui/react';\nimport { type SystemStyleObject } from '@chakra-ui/react/styled-system';\nimport { type RefObject } from 'react';\n\nexport interface UISideNavContextValue {\n  /** True while the rail is showing its labels, and always true in the mobile drawer. */\n  expanded: boolean;\n  isMobile: boolean;\n  /**\n   * Where a menu opened inside the drawer has to be portalled: the panel itself. The panel\n   * scrolls, so a menu left in the flow would scroll with it and be clipped by it, and anywhere\n   * outside the panel is outside the dialog's focus trap.\n   */\n  menuContainerRef: RefObject<HTMLDivElement | null>;\n  /**\n   * How a descendant menu holds the rail open. The rail cannot collapse while a menu anchored\n   * inside it is open, or the menu would be left hanging beside a 72px strip.\n   */\n  setMenuOpen: (open: boolean) => void;\n  styles: Record<string, SystemStyleObject>;\n}\n\nconst [UISideNavContextProvider, useUISideNavContext] = createContext<UISideNavContextValue>({\n  hookName: 'useUISideNavContext',\n  name: 'UISideNavContext',\n  providerName: '<BitkitUISideNav />',\n});\n\nexport { UISideNavContextProvider, useUISideNavContext };\n\n/**\n * Reads the side navigation's current state from inside it. Anything rendered in the footer that\n * has to lay itself out differently in the collapsed rail should call this rather than have the\n * state passed down to it.\n *\n * ```tsx\n * const { expanded } = useUISideNav();\n * return expanded ? <McpWidget /> : <McpWidgetIcon />;\n * ```\n */\nexport const useUISideNav = (): Pick<UISideNavContextValue, 'expanded' | 'isMobile'> => {\n  const { expanded, isMobile } = useUISideNavContext();\n  return { expanded, isMobile };\n};\n"],"mappings":";;AAuBA,IAAM,CAAC,0BAA0B,uBAAuB,cAAqC;CAC3F,UAAU;CACV,MAAM;CACN,cAAc;AAChB,CAAC;;;;;;;;;;;AAcD,IAAa,qBAA2E;CACtF,MAAM,EAAE,UAAU,aAAa,oBAAoB;CACnD,OAAO;EAAE;EAAU;CAAS;AAC9B"}

package/dist/components/BitkitUISideNav/UISideNavFooter.d.ts

@@ -0,0 +1,16 @@
+import { BoxProps } from '@chakra-ui/react/box';
+import { ReactNode } from 'react';
+export interface BitkitUISideNavFooterProps extends BoxProps {
+    /**
+     * The rows below the navigation. Drop a `FooterHeading` between them to start a further
+     * section, the way the mobile drawer parts its status row from its Help links.
+     */
+    children: ReactNode;
+    /**
+     * An uppercase heading for the whole block, e.g. `Help`, drawn under the footer's own rule.
+     * The desktop rail has nowhere to show one when collapsed, so it usually has none.
+     */
+    label?: string;
+}
+declare const UISideNavFooter: import('react').ForwardRefExoticComponent<BitkitUISideNavFooterProps & import('react').RefAttributes<HTMLDivElement>>;
+export default UISideNavFooter;

package/dist/components/BitkitUISideNav/UISideNavFooter.js

@@ -0,0 +1,28 @@
+import { useUISideNavContext } from "./UISideNavContext.js";
+import { Box } from "@chakra-ui/react/box";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Text } from "@chakra-ui/react/text";
+//#region lib/components/BitkitUISideNav/UISideNavFooter.tsx
+var UISideNavFooter = forwardRef((props, ref) => {
+	const { children, css, label, ...rest } = props;
+	const { styles } = useUISideNavContext();
+	return /* @__PURE__ */ jsxs(Box, {
+		ref,
+		...rest,
+		css: [styles.footer, css],
+		children: [
+			/* @__PURE__ */ jsx(Box, { css: styles.footerSeparator }),
+			label && /* @__PURE__ */ jsx(Text, {
+				css: styles.footerHeading,
+				children: label
+			}),
+			children
+		]
+	});
+});
+UISideNavFooter.displayName = "BitkitUISideNav.Footer";
+//#endregion
+export { UISideNavFooter as default };
+
+//# sourceMappingURL=UISideNavFooter.js.map

package/dist/components/BitkitUISideNav/UISideNavFooter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UISideNavFooter.js","names":[],"sources":["../../../lib/components/BitkitUISideNav/UISideNavFooter.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { Text } from '@chakra-ui/react/text';\nimport { forwardRef, type ReactNode } from 'react';\n\nimport { useUISideNavContext } from './UISideNavContext';\n\nexport interface BitkitUISideNavFooterProps extends BoxProps {\n  /**\n   * The rows below the navigation. Drop a `FooterHeading` between them to start a further\n   * section, the way the mobile drawer parts its status row from its Help links.\n   */\n  children: ReactNode;\n  /**\n   * An uppercase heading for the whole block, e.g. `Help`, drawn under the footer's own rule.\n   * The desktop rail has nowhere to show one when collapsed, so it usually has none.\n   */\n  label?: string;\n}\n\nconst UISideNavFooter = forwardRef<HTMLDivElement, BitkitUISideNavFooterProps>((props, ref) => {\n  const { children, css, label, ...rest } = props;\n\n  const { styles } = useUISideNavContext();\n\n  return (\n    <Box ref={ref} {...rest} css={[styles.footer, css]}>\n      {/* Always drawn: the design parts the footer from the navigation above it in both layouts. */}\n      <Box css={styles.footerSeparator} />\n      {label && <Text css={styles.footerHeading}>{label}</Text>}\n      {children}\n    </Box>\n  );\n});\n\nUISideNavFooter.displayName = 'BitkitUISideNav.Footer';\n\nexport default UISideNavFooter;\n"],"mappings":";;;;;;AAmBA,IAAM,kBAAkB,YAAwD,OAAO,QAAQ;CAC7F,MAAM,EAAE,UAAU,KAAK,OAAO,GAAG,SAAS;CAE1C,MAAM,EAAE,WAAW,oBAAoB;CAEvC,OACE,qBAAC,KAAD;EAAU;EAAK,GAAI;EAAM,KAAK,CAAC,OAAO,QAAQ,GAAG;EAAjD,UAAA;GAEE,oBAAC,KAAD,EAAK,KAAK,OAAO,gBAAkB,CAAA;GAClC,SAAS,oBAAC,MAAD;IAAM,KAAK,OAAO;IAAgB,UAAA;GAAY,CAAA;GACvD;EACE;;AAET,CAAC;AAED,gBAAgB,cAAc"}

package/dist/components/BitkitUISideNav/UISideNavFooterHeading.d.ts

@@ -0,0 +1,12 @@
+import { TextProps } from '@chakra-ui/react/text';
+export interface BitkitUISideNavFooterHeadingProps extends Omit<TextProps, 'children'> {
+    /** The heading, e.g. `Help`. Drawn uppercase, so write it in normal case. */
+    children: string;
+}
+/**
+ * Starts a further section inside a footer that already holds rows, bringing a rule of its own.
+ * A footer that is nothing but one titled section says the same thing with `label` — and without
+ * the second rule, since the footer already draws one at its top.
+ */
+declare const UISideNavFooterHeading: import('react').ForwardRefExoticComponent<BitkitUISideNavFooterHeadingProps & import('react').RefAttributes<HTMLParagraphElement>>;
+export default UISideNavFooterHeading;

package/dist/components/BitkitUISideNav/UISideNavFooterHeading.js

@@ -0,0 +1,26 @@
+import { useUISideNavContext } from "./UISideNavContext.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { Text } from "@chakra-ui/react/text";
+//#region lib/components/BitkitUISideNav/UISideNavFooterHeading.tsx
+/**
+* Starts a further section inside a footer that already holds rows, bringing a rule of its own.
+* A footer that is nothing but one titled section says the same thing with `label` — and without
+* the second rule, since the footer already draws one at its top.
+*/
+var UISideNavFooterHeading = forwardRef((props, ref) => {
+	const { children, css, ...rest } = props;
+	const { styles } = useUISideNavContext();
+	return /* @__PURE__ */ jsx(Text, {
+		ref,
+		"data-section": "",
+		...rest,
+		css: [styles.footerHeading, css],
+		children
+	});
+});
+UISideNavFooterHeading.displayName = "BitkitUISideNav.FooterHeading";
+//#endregion
+export { UISideNavFooterHeading as default };
+
+//# sourceMappingURL=UISideNavFooterHeading.js.map

package/dist/components/BitkitUISideNav/UISideNavFooterHeading.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UISideNavFooterHeading.js","names":[],"sources":["../../../lib/components/BitkitUISideNav/UISideNavFooterHeading.tsx"],"sourcesContent":["import { Text, type TextProps } from '@chakra-ui/react/text';\nimport { forwardRef } from 'react';\n\nimport { useUISideNavContext } from './UISideNavContext';\n\nexport interface BitkitUISideNavFooterHeadingProps extends Omit<TextProps, 'children'> {\n  /** The heading, e.g. `Help`. Drawn uppercase, so write it in normal case. */\n  children: string;\n}\n\n/**\n * Starts a further section inside a footer that already holds rows, bringing a rule of its own.\n * A footer that is nothing but one titled section says the same thing with `label` — and without\n * the second rule, since the footer already draws one at its top.\n */\nconst UISideNavFooterHeading = forwardRef<HTMLParagraphElement, BitkitUISideNavFooterHeadingProps>((props, ref) => {\n  const { children, css, ...rest } = props;\n\n  const { styles } = useUISideNavContext();\n\n  return (\n    <Text ref={ref} data-section=\"\" {...rest} css={[styles.footerHeading, css]}>\n      {children}\n    </Text>\n  );\n});\n\nUISideNavFooterHeading.displayName = 'BitkitUISideNav.FooterHeading';\n\nexport default UISideNavFooterHeading;\n"],"mappings":";;;;;;;;;;AAeA,IAAM,yBAAyB,YAAqE,OAAO,QAAQ;CACjH,MAAM,EAAE,UAAU,KAAK,GAAG,SAAS;CAEnC,MAAM,EAAE,WAAW,oBAAoB;CAEvC,OACE,oBAAC,MAAD;EAAW;EAAK,gBAAa;EAAG,GAAI;EAAM,KAAK,CAAC,OAAO,eAAe,GAAG;EACtE;CACG,CAAA;AAEV,CAAC;AAED,uBAAuB,cAAc"}