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

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

@@ -0,0 +1,26 @@
+import { HTMLChakraProps } from '@chakra-ui/react/styled-system';
+import { BitkitIconComponent } from '../../icons';
+export interface BitkitUISideNavItemProps extends Omit<HTMLChakraProps<'a'>, 'children'> {
+    /**
+     * The destination. Always an anchor: the platform navigation moves between server-rendered
+     * product areas, so every row is a real link rather than a button with a handler.
+     */
+    href: string;
+    /**
+     * The row's label. A string rather than `ReactNode` because the collapsed rail clips it and
+     * the expanded rail truncates it, neither of which survives arbitrary markup.
+     */
+    children: string;
+    /** Shown at rest. In the collapsed rail this is the only thing visible. */
+    icon: BitkitIconComponent;
+    /** Marks the row as the current product area. The consumer decides what counts as current. */
+    selected?: boolean;
+    /**
+     * Swapped in for `icon` while selected. The design pairs an outline icon with its filled
+     * counterpart, e.g. `IconDashboard` with `IconDashboardFilled`. Without it the outline icon
+     * stays and only the row's colour and marker change.
+     */
+    selectedIcon?: BitkitIconComponent;
+}
+declare const UISideNavItem: import('react').ForwardRefExoticComponent<BitkitUISideNavItemProps & import('react').RefAttributes<HTMLAnchorElement>>;
+export default UISideNavItem;

package/dist/components/BitkitUISideNav/UISideNavItem.js

@@ -0,0 +1,33 @@
+import { useUISideNavContext } from "./UISideNavContext.js";
+import { Box } from "@chakra-ui/react/box";
+import { chakra } from "@chakra-ui/react/styled-system";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Text } from "@chakra-ui/react/text";
+//#region lib/components/BitkitUISideNav/UISideNavItem.tsx
+var UISideNavItem = forwardRef((props, ref) => {
+	const { children, css, icon: Icon, selected, selectedIcon: SelectedIcon, ...rest } = props;
+	const { styles } = useUISideNavContext();
+	const RowIcon = selected && SelectedIcon ? SelectedIcon : Icon;
+	return /* @__PURE__ */ jsxs(chakra.a, {
+		ref,
+		"aria-current": selected ? "page" : void 0,
+		"data-selected": selected ? "" : void 0,
+		...rest,
+		css: [styles.item, css],
+		children: [
+			/* @__PURE__ */ jsx(RowIcon, { css: styles.itemIcon }),
+			/* @__PURE__ */ jsx(Text, {
+				as: "span",
+				css: styles.itemLabel,
+				children
+			}),
+			selected && /* @__PURE__ */ jsx(Box, { css: styles.itemIndicator })
+		]
+	});
+});
+UISideNavItem.displayName = "BitkitUISideNav.Item";
+//#endregion
+export { UISideNavItem as default };
+
+//# sourceMappingURL=UISideNavItem.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"UISideNavItem.js","names":[],"sources":["../../../lib/components/BitkitUISideNav/UISideNavItem.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { chakra, type HTMLChakraProps } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { forwardRef } from 'react';\n\nimport { type BitkitIconComponent } from '../../icons';\nimport { useUISideNavContext } from './UISideNavContext';\n\nexport interface BitkitUISideNavItemProps extends Omit<HTMLChakraProps<'a'>, 'children'> {\n  /**\n   * The destination. Always an anchor: the platform navigation moves between server-rendered\n   * product areas, so every row is a real link rather than a button with a handler.\n   */\n  href: string;\n  /**\n   * The row's label. A string rather than `ReactNode` because the collapsed rail clips it and\n   * the expanded rail truncates it, neither of which survives arbitrary markup.\n   */\n  children: string;\n  /** Shown at rest. In the collapsed rail this is the only thing visible. */\n  icon: BitkitIconComponent;\n  /** Marks the row as the current product area. The consumer decides what counts as current. */\n  selected?: boolean;\n  /**\n   * Swapped in for `icon` while selected. The design pairs an outline icon with its filled\n   * counterpart, e.g. `IconDashboard` with `IconDashboardFilled`. Without it the outline icon\n   * stays and only the row's colour and marker change.\n   */\n  selectedIcon?: BitkitIconComponent;\n}\n\nconst UISideNavItem = forwardRef<HTMLAnchorElement, BitkitUISideNavItemProps>((props, ref) => {\n  const { children, css, icon: Icon, selected, selectedIcon: SelectedIcon, ...rest } = props;\n\n  const { styles } = useUISideNavContext();\n\n  const RowIcon = selected && SelectedIcon ? SelectedIcon : Icon;\n\n  // `chakra.a` rather than `Link`: the row is styled entirely by the nav's own `item` slot, and\n  // `Link` would layer its own recipe over it.\n  return (\n    <chakra.a\n      ref={ref}\n      aria-current={selected ? 'page' : undefined}\n      data-selected={selected ? '' : undefined}\n      {...rest}\n      css={[styles.item, css]}\n    >\n      <RowIcon css={styles.itemIcon} />\n      <Text as=\"span\" css={styles.itemLabel}>\n        {children}\n      </Text>\n      {selected && <Box css={styles.itemIndicator} />}\n    </chakra.a>\n  );\n});\n\nUISideNavItem.displayName = 'BitkitUISideNav.Item';\n\nexport default UISideNavItem;\n"],"mappings":";;;;;;;AA+BA,IAAM,gBAAgB,YAAyD,OAAO,QAAQ;CAC5F,MAAM,EAAE,UAAU,KAAK,MAAM,MAAM,UAAU,cAAc,cAAc,GAAG,SAAS;CAErF,MAAM,EAAE,WAAW,oBAAoB;CAEvC,MAAM,UAAU,YAAY,eAAe,eAAe;CAI1D,OACE,qBAAC,OAAO,GAAR;EACO;EACL,gBAAc,WAAW,SAAS,KAAA;EAClC,iBAAe,WAAW,KAAK,KAAA;EAC/B,GAAI;EACJ,KAAK,CAAC,OAAO,MAAM,GAAG;EALxB,UAAA;GAOE,oBAAC,SAAD,EAAS,KAAK,OAAO,SAAW,CAAA;GAChC,oBAAC,MAAD;IAAM,IAAG;IAAO,KAAK,OAAO;IACzB;GACG,CAAA;GACL,YAAY,oBAAC,KAAD,EAAK,KAAK,OAAO,cAAgB,CAAA;EACtC;;AAEd,CAAC;AAED,cAAc,cAAc"}

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

@@ -0,0 +1,30 @@
+import { HTMLChakraProps } from '@chakra-ui/react/styled-system';
+import { BitkitIconComponent } from '../../icons';
+interface UISideNavLinkCommonProps {
+    children: string;
+    icon: BitkitIconComponent;
+    /**
+     * A second line under the label, for a row that reports something rather than just naming a
+     * destination. It steps the row up to 56px and the label down to the smaller semibold size.
+     */
+    secondaryText?: string;
+    /**
+     * A coloured dot on the icon's trailing bottom corner. Use it with `secondaryText`, which is
+     * what spells the state out; the dot alone only carries colour.
+     */
+    status?: 'critical' | 'neutral' | 'success';
+}
+export interface BitkitUISideNavLinkAsAnchorProps extends UISideNavLinkCommonProps, Omit<HTMLChakraProps<'a'>, 'children'> {
+    href: string;
+    /** Adds the north-east arrow and the usual `target`/`rel` pair for a link leaving the app. */
+    isExternal?: boolean;
+}
+export interface BitkitUISideNavLinkAsButtonProps extends UISideNavLinkCommonProps, Omit<HTMLChakraProps<'button'>, 'children'> {
+    href?: undefined;
+    isExternal?: undefined;
+    /** Makes the row a button instead of a link — for one that opens a dialog rather than navigating. */
+    onClick: NonNullable<HTMLChakraProps<'button'>['onClick']>;
+}
+export type BitkitUISideNavLinkProps = BitkitUISideNavLinkAsAnchorProps | BitkitUISideNavLinkAsButtonProps;
+declare const UISideNavLink: import('react').ForwardRefExoticComponent<BitkitUISideNavLinkProps & import('react').RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+export default UISideNavLink;

package/dist/components/BitkitUISideNav/UISideNavLink.js

@@ -0,0 +1,58 @@
+import IconArrowNortheast from "../../icons/IconArrowNortheast.js";
+import { useUISideNavContext } from "./UISideNavContext.js";
+import { Box } from "@chakra-ui/react/box";
+import { chakra } from "@chakra-ui/react/styled-system";
+import { forwardRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Text } from "@chakra-ui/react/text";
+//#region lib/components/BitkitUISideNav/UISideNavLink.tsx
+var UISideNavLink = forwardRef((props, ref) => {
+	const { children, css, href, icon: Icon, isExternal, rel, secondaryText, status, target, ...rest } = props;
+	const { styles } = useUISideNavContext();
+	const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		/* @__PURE__ */ jsxs(Box, {
+			css: styles.linkIconBlock,
+			children: [/* @__PURE__ */ jsx(Icon, { css: styles.linkIcon }), status && /* @__PURE__ */ jsx(Box, {
+				css: styles.linkStatusDot,
+				"data-status": status
+			})]
+		}),
+		/* @__PURE__ */ jsxs(Box, {
+			css: styles.linkTextBlock,
+			children: [/* @__PURE__ */ jsx(Text, {
+				as: "span",
+				css: styles.linkLabel,
+				children
+			}), secondaryText && /* @__PURE__ */ jsx(Text, {
+				as: "span",
+				css: styles.linkSecondaryText,
+				children: secondaryText
+			})]
+		}),
+		isExternal && /* @__PURE__ */ jsx(IconArrowNortheast, { css: styles.linkIcon })
+	] });
+	const rootProps = {
+		"data-with-secondary": secondaryText ? "" : void 0,
+		...rest,
+		css: [styles.link, css]
+	};
+	if (href === void 0) return /* @__PURE__ */ jsx(chakra.button, {
+		ref,
+		type: "button",
+		...rootProps,
+		children: content
+	});
+	return /* @__PURE__ */ jsx(chakra.a, {
+		ref,
+		href,
+		rel: isExternal ? rel ? `${rel} noreferrer noopener` : "noreferrer noopener" : rel,
+		target: isExternal ? "_blank" : target,
+		...rootProps,
+		children: content
+	});
+});
+UISideNavLink.displayName = "BitkitUISideNav.Link";
+//#endregion
+export { UISideNavLink as default };
+
+//# sourceMappingURL=UISideNavLink.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"UISideNavLink.js","names":[],"sources":["../../../lib/components/BitkitUISideNav/UISideNavLink.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { chakra, type HTMLChakraProps } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { forwardRef, type Ref } from 'react';\n\nimport { type BitkitIconComponent, IconArrowNortheast } from '../../icons';\nimport { useUISideNavContext } from './UISideNavContext';\n\ninterface UISideNavLinkCommonProps {\n  children: string;\n  icon: BitkitIconComponent;\n  /**\n   * A second line under the label, for a row that reports something rather than just naming a\n   * destination. It steps the row up to 56px and the label down to the smaller semibold size.\n   */\n  secondaryText?: string;\n  /**\n   * A coloured dot on the icon's trailing bottom corner. Use it with `secondaryText`, which is\n   * what spells the state out; the dot alone only carries colour.\n   */\n  status?: 'critical' | 'neutral' | 'success';\n}\n\nexport interface BitkitUISideNavLinkAsAnchorProps\n  extends UISideNavLinkCommonProps, Omit<HTMLChakraProps<'a'>, 'children'> {\n  href: string;\n  /** Adds the north-east arrow and the usual `target`/`rel` pair for a link leaving the app. */\n  isExternal?: boolean;\n}\n\nexport interface BitkitUISideNavLinkAsButtonProps\n  extends UISideNavLinkCommonProps, Omit<HTMLChakraProps<'button'>, 'children'> {\n  href?: undefined;\n  isExternal?: undefined;\n  /** Makes the row a button instead of a link — for one that opens a dialog rather than navigating. */\n  onClick: NonNullable<HTMLChakraProps<'button'>['onClick']>;\n}\n\nexport type BitkitUISideNavLinkProps = BitkitUISideNavLinkAsAnchorProps | BitkitUISideNavLinkAsButtonProps;\n\nconst UISideNavLink = forwardRef<HTMLAnchorElement | HTMLButtonElement, BitkitUISideNavLinkProps>((props, ref) => {\n  const {\n    children,\n    css,\n    href,\n    icon: Icon,\n    isExternal,\n    rel,\n    secondaryText,\n    status,\n    target,\n    ...rest\n  } = props as BitkitUISideNavLinkAsAnchorProps;\n\n  const { styles } = useUISideNavContext();\n\n  const content = (\n    <>\n      <Box css={styles.linkIconBlock}>\n        <Icon css={styles.linkIcon} />\n        {status && <Box css={styles.linkStatusDot} data-status={status} />}\n      </Box>\n      <Box css={styles.linkTextBlock}>\n        <Text as=\"span\" css={styles.linkLabel}>\n          {children}\n        </Text>\n        {secondaryText && (\n          <Text as=\"span\" css={styles.linkSecondaryText}>\n            {secondaryText}\n          </Text>\n        )}\n      </Box>\n      {isExternal && <IconArrowNortheast css={styles.linkIcon} />}\n    </>\n  );\n\n  const rootProps = {\n    'data-with-secondary': secondaryText ? '' : undefined,\n    ...rest,\n    css: [styles.link, css],\n  };\n\n  // `chakra.button` / `chakra.a` rather than `Button` / `Link`: the row is styled entirely by the\n  // nav's own `link` slot, and either named primitive would layer its own recipe over it.\n  if (href === undefined) {\n    return (\n      <chakra.button ref={ref as Ref<HTMLButtonElement>} type=\"button\" {...(rootProps as HTMLChakraProps<'button'>)}>\n        {content}\n      </chakra.button>\n    );\n  }\n\n  return (\n    <chakra.a\n      ref={ref as Ref<HTMLAnchorElement>}\n      href={href}\n      rel={isExternal ? (rel ? `${rel} noreferrer noopener` : 'noreferrer noopener') : rel}\n      target={isExternal ? '_blank' : target}\n      {...rootProps}\n    >\n      {content}\n    </chakra.a>\n  );\n});\n\nUISideNavLink.displayName = 'BitkitUISideNav.Link';\n\nexport default UISideNavLink;\n"],"mappings":";;;;;;;;AAwCA,IAAM,gBAAgB,YAA6E,OAAO,QAAQ;CAChH,MAAM,EACJ,UACA,KACA,MACA,MAAM,MACN,YACA,KACA,eACA,QACA,QACA,GAAG,SACD;CAEJ,MAAM,EAAE,WAAW,oBAAoB;CAEvC,MAAM,UACJ,qBAAA,YAAA,EAAA,UAAA;EACE,qBAAC,KAAD;GAAK,KAAK,OAAO;GAAjB,UAAA,CACE,oBAAC,MAAD,EAAM,KAAK,OAAO,SAAW,CAAA,GAC5B,UAAU,oBAAC,KAAD;IAAK,KAAK,OAAO;IAAe,eAAa;GAAS,CAAA,CAC9D;;EACL,qBAAC,KAAD;GAAK,KAAK,OAAO;GAAjB,UAAA,CACE,oBAAC,MAAD;IAAM,IAAG;IAAO,KAAK,OAAO;IACzB;GACG,CAAA,GACL,iBACC,oBAAC,MAAD;IAAM,IAAG;IAAO,KAAK,OAAO;IACzB,UAAA;GACG,CAAA,CAEL;;EACJ,cAAc,oBAAC,oBAAD,EAAoB,KAAK,OAAO,SAAW,CAAA;CAC1D,EAAA,CAAA;CAGJ,MAAM,YAAY;EAChB,uBAAuB,gBAAgB,KAAK,KAAA;EAC5C,GAAG;EACH,KAAK,CAAC,OAAO,MAAM,GAAG;CACxB;CAIA,IAAI,SAAS,KAAA,GACX,OACE,oBAAC,OAAO,QAAR;EAAoB;EAA+B,MAAK;EAAS,GAAK;EACnE,UAAA;CACY,CAAA;CAInB,OACE,oBAAC,OAAO,GAAR;EACO;EACC;EACN,KAAK,aAAc,MAAM,GAAG,IAAI,wBAAwB,wBAAyB;EACjF,QAAQ,aAAa,WAAW;EAChC,GAAI;EAEH,UAAA;CACO,CAAA;AAEd,CAAC;AAED,cAAc,cAAc"}

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

@@ -0,0 +1,55 @@
+import { Select, SelectTriggerProps } from '@chakra-ui/react/select';
+import { BitkitSelectMenuEmptyStateProps, BitkitSelectMenuErrorStateProps, BitkitSelectMenuItemProps, BitkitSelectMenuScrollProps, BitkitSelectMenuSearchProps } from '../BitkitSelectMenu/BitkitSelectMenu';
+import { BitkitSelectMenuActionChild } from '../BitkitSelectMenu/BitkitSelectMenuAction';
+export type BitkitUISideNavWorkspaceProps = Pick<BitkitSelectMenuItemProps, 'label' | 'value'> & {
+    /**
+     * The workspace's logo. Leave it off and the avatar falls back to the initials of `label` —
+     * a workspace always has one, unlike a plain menu item.
+     */
+    avatar?: string;
+};
+/**
+ * The list length at which the design adds the search input. Below it the menu is short enough
+ * to read at a glance and a search field would only be in the way. Exported for the stories,
+ * which label each list by the side of this it falls on — not part of the package's surface.
+ */
+export declare const searchableFrom = 6;
+export type BitkitUISideNavWorkspaceSelectorProps = Omit<SelectTriggerProps, 'children' | 'onChange'> & {
+    /**
+     * A single `BitkitSelectMenuAction` shown under the list, typically "Create workspace". Its
+     * presence is the toggle — there is no boolean for it.
+     */
+    children?: BitkitSelectMenuActionChild;
+    isLoading?: boolean;
+    /** The small uppercase caption above the workspace name. */
+    label?: string;
+    /**
+     * Fires when the menu opens and when it closes — where a list loaded on demand belongs. The
+     * menu also opens from the keyboard, which fires no click on the trigger.
+     */
+    onOpenChange?: (open: boolean) => void;
+    onValueChange?: (value: string) => void;
+    /** The selected workspace's `value`. Leave it off to let the selector track the choice itself. */
+    value?: string;
+    workspaces: Array<BitkitUISideNavWorkspaceProps>;
+} & Omit<BitkitSelectMenuSearchProps, 'searchPlaceholder'> & BitkitSelectMenuScrollProps & BitkitSelectMenuEmptyStateProps & BitkitSelectMenuErrorStateProps;
+declare const UISideNavWorkspaceSelector: import('react').ForwardRefExoticComponent<Omit<Select.TriggerProps, "children" | "onChange"> & {
+    /**
+     * A single `BitkitSelectMenuAction` shown under the list, typically "Create workspace". Its
+     * presence is the toggle — there is no boolean for it.
+     */
+    children?: BitkitSelectMenuActionChild;
+    isLoading?: boolean;
+    /** The small uppercase caption above the workspace name. */
+    label?: string;
+    /**
+     * Fires when the menu opens and when it closes — where a list loaded on demand belongs. The
+     * menu also opens from the keyboard, which fires no click on the trigger.
+     */
+    onOpenChange?: (open: boolean) => void;
+    onValueChange?: (value: string) => void;
+    /** The selected workspace's `value`. Leave it off to let the selector track the choice itself. */
+    value?: string;
+    workspaces: Array<BitkitUISideNavWorkspaceProps>;
+} & Omit<BitkitSelectMenuSearchProps, "searchPlaceholder"> & BitkitSelectMenuScrollProps & BitkitSelectMenuEmptyStateProps & BitkitSelectMenuErrorStateProps & import('react').RefAttributes<HTMLButtonElement>>;
+export default UISideNavWorkspaceSelector;

package/dist/components/BitkitUISideNav/UISideNavWorkspaceSelector.js

@@ -0,0 +1,127 @@
+import IconChevronDown from "../../icons/IconChevronDown.js";
+import BitkitAvatar from "../BitkitAvatar/BitkitAvatar.js";
+import BitkitSelectMenu from "../BitkitSelectMenu/BitkitSelectMenu.js";
+import { useUISideNavContext } from "./UISideNavContext.js";
+import { Box } from "@chakra-ui/react/box";
+import { forwardRef, useId, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Portal } from "@chakra-ui/react/portal";
+import { Text } from "@chakra-ui/react/text";
+import { useControllableState } from "@chakra-ui/react/hooks";
+import { createListCollection } from "@chakra-ui/react/collection";
+import { Select } from "@chakra-ui/react/select";
+import { useFilter } from "@chakra-ui/react/locale";
+var UISideNavWorkspaceSelector = forwardRef((props, ref) => {
+	const { children, css, emptyHelperText, emptyLabel, errorHelperText, errorLabel, isLoading, label = "Workspace", onOpenChange, onScrolledToBottom, onSearchChange, onValueChange, searchValue, value, workspaces, ...rest } = props;
+	const { isMobile, menuContainerRef, setMenuOpen, styles } = useUISideNavContext();
+	const id = useId();
+	const labelId = `${id}-label`;
+	const valueId = `${id}-value`;
+	const { contains } = useFilter({ sensitivity: "base" });
+	const [ownQuery, setOwnQuery] = useState("");
+	const [currentValue, setCurrentValue] = useControllableState({
+		defaultValue: void 0,
+		value
+	});
+	const isSearchDelegated = onSearchChange !== void 0;
+	const query = isSearchDelegated ? searchValue : ownQuery;
+	const hasSearch = isSearchDelegated || workspaces.length >= 6;
+	const collection = useMemo(() => {
+		const items = (ownQuery ? workspaces.filter((workspace) => contains(workspace.label, ownQuery)) : workspaces).map((workspace) => ({
+			...workspace,
+			avatar: workspace.avatar ?? null
+		}));
+		return createListCollection({ items });
+	}, [
+		contains,
+		ownQuery,
+		workspaces
+	]);
+	const lastSelected = useRef(void 0);
+	const matched = workspaces.find((workspace) => workspace.value === currentValue);
+	if (matched) lastSelected.current = matched;
+	const selected = matched ?? (lastSelected.current?.value === currentValue ? lastSelected.current : void 0);
+	return /* @__PURE__ */ jsxs(Select.Root, {
+		collection,
+		css: styles.workspaceRoot,
+		ids: { label: labelId },
+		onOpenChange: (details) => {
+			setMenuOpen(details.open);
+			if (!details.open) setOwnQuery("");
+			onOpenChange?.(details.open);
+		},
+		onValueChange: (details) => {
+			setCurrentValue(details.value[0]);
+			onValueChange?.(details.value[0]);
+		},
+		positioning: isMobile ? {
+			gutter: 0,
+			offset: { crossAxis: 16 },
+			overflowPadding: 16
+		} : {
+			gutter: -8,
+			offset: { crossAxis: 16 },
+			placement: "bottom-start"
+		},
+		size: "lg",
+		value: currentValue === void 0 ? [] : [currentValue],
+		children: [/* @__PURE__ */ jsxs(Select.Control, {
+			css: styles.workspaceControl,
+			children: [/* @__PURE__ */ jsx(Select.HiddenSelect, {}), /* @__PURE__ */ jsxs(Select.Trigger, {
+				ref,
+				unstyled: true,
+				"aria-labelledby": `${labelId} ${valueId}`,
+				...rest,
+				css: [styles.workspace, css],
+				children: [
+					/* @__PURE__ */ jsx(BitkitAvatar, {
+						borderColor: "border/minimal",
+						borderWidth: "1",
+						name: selected?.label ?? "",
+						size: "40",
+						src: selected?.avatar ?? "",
+						variant: "image"
+					}),
+					/* @__PURE__ */ jsxs(Box, {
+						css: styles.workspaceTextBlock,
+						children: [/* @__PURE__ */ jsx(Text, {
+							css: styles.workspaceLabel,
+							id: labelId,
+							children: label
+						}), /* @__PURE__ */ jsx(Text, {
+							css: styles.workspaceValue,
+							id: valueId,
+							children: selected?.label
+						})]
+					}),
+					/* @__PURE__ */ jsx(Select.Indicator, {
+						css: styles.workspaceChevron,
+						children: /* @__PURE__ */ jsx(IconChevronDown, {})
+					})
+				]
+			})]
+		}), /* @__PURE__ */ jsx(Portal, {
+			container: isMobile ? menuContainerRef : void 0,
+			children: /* @__PURE__ */ jsx(Select.Positioner, { children: /* @__PURE__ */ jsx(BitkitSelectMenu, {
+				collection,
+				contentProps: { css: styles.workspaceMenu },
+				emptyHelperText,
+				emptyLabel,
+				errorHelperText,
+				errorLabel,
+				isLoading,
+				onScrolledToBottom,
+				onSearchChange: hasSearch ? onSearchChange ?? setOwnQuery : void 0,
+				searchPlaceholder: "Search your workspaces",
+				searchValue: query,
+				size: "lg",
+				children
+			}) })
+		})]
+	});
+});
+UISideNavWorkspaceSelector.displayName = "BitkitUISideNav.WorkspaceSelector";
+//#endregion
+export { UISideNavWorkspaceSelector as default };
+
+//# sourceMappingURL=UISideNavWorkspaceSelector.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"UISideNavWorkspaceSelector.js","names":[],"sources":["../../../lib/components/BitkitUISideNav/UISideNavWorkspaceSelector.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { createListCollection } from '@chakra-ui/react/collection';\nimport { useControllableState } from '@chakra-ui/react/hooks';\nimport { useFilter } from '@chakra-ui/react/locale';\nimport { Portal } from '@chakra-ui/react/portal';\nimport { Select, type SelectTriggerProps } from '@chakra-ui/react/select';\nimport { Text } from '@chakra-ui/react/text';\nimport { forwardRef, useId, useMemo, useRef, useState } from 'react';\n\nimport { IconChevronDown } from '../../icons';\nimport BitkitAvatar from '../BitkitAvatar/BitkitAvatar';\nimport BitkitSelectMenu, {\n  type BitkitSelectMenuEmptyStateProps,\n  type BitkitSelectMenuErrorStateProps,\n  type BitkitSelectMenuItemProps,\n  type BitkitSelectMenuScrollProps,\n  type BitkitSelectMenuSearchProps,\n} from '../BitkitSelectMenu/BitkitSelectMenu';\nimport { type BitkitSelectMenuActionChild } from '../BitkitSelectMenu/BitkitSelectMenuAction';\nimport { useUISideNavContext } from './UISideNavContext';\n\nexport type BitkitUISideNavWorkspaceProps = Pick<BitkitSelectMenuItemProps, 'label' | 'value'> & {\n  /**\n   * The workspace's logo. Leave it off and the avatar falls back to the initials of `label` —\n   * a workspace always has one, unlike a plain menu item.\n   */\n  avatar?: string;\n};\n\n/**\n * The list length at which the design adds the search input. Below it the menu is short enough\n * to read at a glance and a search field would only be in the way. Exported for the stories,\n * which label each list by the side of this it falls on — not part of the package's surface.\n */\nexport const searchableFrom = 6;\n\nexport type BitkitUISideNavWorkspaceSelectorProps = Omit<SelectTriggerProps, 'children' | 'onChange'> & {\n  /**\n   * A single `BitkitSelectMenuAction` shown under the list, typically \"Create workspace\". Its\n   * presence is the toggle — there is no boolean for it.\n   */\n  children?: BitkitSelectMenuActionChild;\n  isLoading?: boolean;\n  /** The small uppercase caption above the workspace name. */\n  label?: string;\n  /**\n   * Fires when the menu opens and when it closes — where a list loaded on demand belongs. The\n   * menu also opens from the keyboard, which fires no click on the trigger.\n   */\n  onOpenChange?: (open: boolean) => void;\n  onValueChange?: (value: string) => void;\n  /** The selected workspace's `value`. Leave it off to let the selector track the choice itself. */\n  value?: string;\n  workspaces: Array<BitkitUISideNavWorkspaceProps>;\n  // The copy is the design's, not the consumer's, so the placeholder is not on the way through.\n} & Omit<BitkitSelectMenuSearchProps, 'searchPlaceholder'> &\n  BitkitSelectMenuScrollProps &\n  BitkitSelectMenuEmptyStateProps &\n  BitkitSelectMenuErrorStateProps;\n\nconst UISideNavWorkspaceSelector = forwardRef<HTMLButtonElement, BitkitUISideNavWorkspaceSelectorProps>(\n  (props, ref) => {\n    const {\n      children,\n      css,\n      emptyHelperText,\n      emptyLabel,\n      errorHelperText,\n      errorLabel,\n      isLoading,\n      label = 'Workspace',\n      onOpenChange,\n      onScrolledToBottom,\n      onSearchChange,\n      onValueChange,\n      searchValue,\n      value,\n      workspaces,\n      ...rest\n    } = props;\n\n    const { isMobile, menuContainerRef, setMenuOpen, styles } = useUISideNavContext();\n    const id = useId();\n    const labelId = `${id}-label`;\n    const valueId = `${id}-value`;\n    const { contains } = useFilter({ sensitivity: 'base' });\n\n    const [ownQuery, setOwnQuery] = useState('');\n    const [currentValue, setCurrentValue] = useControllableState<string | undefined>({\n      defaultValue: undefined,\n      value,\n    });\n\n    // A consumer that passes `onSearchChange` is searching somewhere we cannot see — a server, a\n    // paged list — so `workspaces` is already the result and its length says nothing about how\n    // many there are. They keep the input and the filtering; otherwise both are ours.\n    const isSearchDelegated = onSearchChange !== undefined;\n    const query = isSearchDelegated ? searchValue : ownQuery;\n    const hasSearch = isSearchDelegated || workspaces.length >= searchableFrom;\n\n    const collection = useMemo(() => {\n      const matches = ownQuery ? workspaces.filter((workspace) => contains(workspace.label, ownQuery)) : workspaces;\n\n      // `null` rather than nothing for a workspace without a logo: that is what tells the menu to\n      // draw the initials, where an absent `avatar` would leave the row with no avatar at all.\n      const items: Array<BitkitSelectMenuItemProps> = matches.map((workspace) => ({\n        ...workspace,\n        avatar: workspace.avatar ?? null,\n      }));\n\n      return createListCollection({ items });\n    }, [contains, ownQuery, workspaces]);\n\n    // `workspaces` is the search result while the search is delegated, so the selected workspace\n    // can drop out of it mid-query. The cell keeps naming the workspace you are actually in.\n    const lastSelected = useRef<BitkitUISideNavWorkspaceProps>(undefined);\n    const matched = workspaces.find((workspace) => workspace.value === currentValue);\n    if (matched) lastSelected.current = matched;\n    const selected = matched ?? (lastSelected.current?.value === currentValue ? lastSelected.current : undefined);\n\n    return (\n      <Select.Root\n        collection={collection}\n        css={styles.workspaceRoot}\n        ids={{ label: labelId }}\n        onOpenChange={(details) => {\n          setMenuOpen(details.open);\n          if (!details.open) setOwnQuery('');\n          onOpenChange?.(details.open);\n        }}\n        onValueChange={(details) => {\n          setCurrentValue(details.value[0]);\n          onValueChange?.(details.value[0]);\n        }}\n        // Tucked into the rail rather than hung off it: inset from the rail's edge and lapping\n        // over the workspace cell, so the menu reads as the cell unfolding.\n        positioning={\n          isMobile\n            ? { gutter: 0, offset: { crossAxis: 16 }, overflowPadding: 16 }\n            : { gutter: -8, offset: { crossAxis: 16 }, placement: 'bottom-start' }\n        }\n        size=\"lg\"\n        value={currentValue === undefined ? [] : [currentValue]}\n      >\n        <Select.Control css={styles.workspaceControl}>\n          <Select.HiddenSelect />\n          <Select.Trigger\n            ref={ref}\n            unstyled\n            aria-labelledby={`${labelId} ${valueId}`}\n            {...rest}\n            css={[styles.workspace, css]}\n          >\n            <BitkitAvatar\n              borderColor=\"border/minimal\"\n              borderWidth=\"1\"\n              name={selected?.label ?? ''}\n              size=\"40\"\n              src={selected?.avatar ?? ''}\n              variant=\"image\"\n            />\n            <Box css={styles.workspaceTextBlock}>\n              <Text css={styles.workspaceLabel} id={labelId}>\n                {label}\n              </Text>\n              <Text css={styles.workspaceValue} id={valueId}>\n                {selected?.label}\n              </Text>\n            </Box>\n            <Select.Indicator css={styles.workspaceChevron}>\n              <IconChevronDown />\n            </Select.Indicator>\n          </Select.Trigger>\n        </Select.Control>\n        {/*\n          In the drawer the menu goes to the panel rather than the document: the panel scrolls\n          under its own header, so a menu left in the flow would travel with the rows and be\n          clipped by them, and anywhere outside the panel is outside the dialog's focus trap.\n        */}\n        <Portal container={isMobile ? menuContainerRef : undefined}>\n          <Select.Positioner>\n            <BitkitSelectMenu\n              collection={collection}\n              contentProps={{ css: styles.workspaceMenu }}\n              emptyHelperText={emptyHelperText}\n              emptyLabel={emptyLabel}\n              errorHelperText={errorHelperText}\n              errorLabel={errorLabel}\n              isLoading={isLoading}\n              onScrolledToBottom={onScrolledToBottom}\n              onSearchChange={hasSearch ? (onSearchChange ?? setOwnQuery) : undefined}\n              searchPlaceholder=\"Search your workspaces\"\n              searchValue={query}\n              size=\"lg\"\n            >\n              {children}\n            </BitkitSelectMenu>\n          </Select.Positioner>\n        </Portal>\n      </Select.Root>\n    );\n  },\n);\n\nUISideNavWorkspaceSelector.displayName = 'BitkitUISideNav.WorkspaceSelector';\n\nexport default UISideNavWorkspaceSelector;\n"],"mappings":";;;;;;;;;;;;;AA4DA,IAAM,6BAA6B,YAChC,OAAO,QAAQ;CACd,MAAM,EACJ,UACA,KACA,iBACA,YACA,iBACA,YACA,WACA,QAAQ,aACR,cACA,oBACA,gBACA,eACA,aACA,OACA,YACA,GAAG,SACD;CAEJ,MAAM,EAAE,UAAU,kBAAkB,aAAa,WAAW,oBAAoB;CAChF,MAAM,KAAK,MAAM;CACjB,MAAM,UAAU,GAAG,GAAG;CACtB,MAAM,UAAU,GAAG,GAAG;CACtB,MAAM,EAAE,aAAa,UAAU,EAAE,aAAa,OAAO,CAAC;CAEtD,MAAM,CAAC,UAAU,eAAe,SAAS,EAAE;CAC3C,MAAM,CAAC,cAAc,mBAAmB,qBAAyC;EAC/E,cAAc,KAAA;EACd;CACF,CAAC;CAKD,MAAM,oBAAoB,mBAAmB,KAAA;CAC7C,MAAM,QAAQ,oBAAoB,cAAc;CAChD,MAAM,YAAY,qBAAqB,WAAW,UAAA;CAElD,MAAM,aAAa,cAAc;EAK/B,MAAM,SAJU,WAAW,WAAW,QAAQ,cAAc,SAAS,UAAU,OAAO,QAAQ,CAAC,IAAI,WAAA,CAI3C,KAAK,eAAe;GAC1E,GAAG;GACH,QAAQ,UAAU,UAAU;EAC9B,EAAE;EAEF,OAAO,qBAAqB,EAAE,MAAM,CAAC;CACvC,GAAG;EAAC;EAAU;EAAU;CAAU,CAAC;CAInC,MAAM,eAAe,OAAsC,KAAA,CAAS;CACpE,MAAM,UAAU,WAAW,MAAM,cAAc,UAAU,UAAU,YAAY;CAC/E,IAAI,SAAS,aAAa,UAAU;CACpC,MAAM,WAAW,YAAY,aAAa,SAAS,UAAU,eAAe,aAAa,UAAU,KAAA;CAEnG,OACE,qBAAC,OAAO,MAAR;EACc;EACZ,KAAK,OAAO;EACZ,KAAK,EAAE,OAAO,QAAQ;EACtB,eAAe,YAAY;GACzB,YAAY,QAAQ,IAAI;GACxB,IAAI,CAAC,QAAQ,MAAM,YAAY,EAAE;GACjC,eAAe,QAAQ,IAAI;EAC7B;EACA,gBAAgB,YAAY;GAC1B,gBAAgB,QAAQ,MAAM,EAAE;GAChC,gBAAgB,QAAQ,MAAM,EAAE;EAClC;EAGA,aACE,WACI;GAAE,QAAQ;GAAG,QAAQ,EAAE,WAAW,GAAG;GAAG,iBAAiB;EAAG,IAC5D;GAAE,QAAQ;GAAI,QAAQ,EAAE,WAAW,GAAG;GAAG,WAAW;EAAe;EAEzE,MAAK;EACL,OAAO,iBAAiB,KAAA,IAAY,CAAC,IAAI,CAAC,YAAY;EArBxD,UAAA,CAuBE,qBAAC,OAAO,SAAR;GAAgB,KAAK,OAAO;GAA5B,UAAA,CACE,oBAAC,OAAO,cAAR,CAAsB,CAAA,GACtB,qBAAC,OAAO,SAAR;IACO;IACL,UAAA;IACA,mBAAiB,GAAG,QAAQ,GAAG;IAC/B,GAAI;IACJ,KAAK,CAAC,OAAO,WAAW,GAAG;IAL7B,UAAA;KAOE,oBAAC,cAAD;MACE,aAAY;MACZ,aAAY;MACZ,MAAM,UAAU,SAAS;MACzB,MAAK;MACL,KAAK,UAAU,UAAU;MACzB,SAAQ;KACT,CAAA;KACD,qBAAC,KAAD;MAAK,KAAK,OAAO;MAAjB,UAAA,CACE,oBAAC,MAAD;OAAM,KAAK,OAAO;OAAgB,IAAI;OACnC,UAAA;MACG,CAAA,GACN,oBAAC,MAAD;OAAM,KAAK,OAAO;OAAgB,IAAI;OACnC,UAAA,UAAU;MACP,CAAA,CACH;;KACL,oBAAC,OAAO,WAAR;MAAkB,KAAK,OAAO;MAC5B,UAAA,oBAAC,iBAAD,CAAkB,CAAA;KACF,CAAA;IACJ;GACF,CAAA,CAAA;EAMhB,CAAA,GAAA,oBAAC,QAAD;GAAQ,WAAW,WAAW,mBAAmB,KAAA;GAC/C,UAAA,oBAAC,OAAO,YAAR,EAAA,UACE,oBAAC,kBAAD;IACc;IACZ,cAAc,EAAE,KAAK,OAAO,cAAc;IACzB;IACL;IACK;IACL;IACD;IACS;IACpB,gBAAgB,YAAa,kBAAkB,cAAe,KAAA;IAC9D,mBAAkB;IAClB,aAAa;IACb,MAAK;IAEJ;GACe,CAAA,EACD,CAAA;EACb,CAAA,CACG;;AAEjB,CACF;AAEA,2BAA2B,cAAc"}

package/dist/components/index.d.ts

@@ -94,3 +94,5 @@ 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 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

@@ -384,6 +384,9 @@ import BitkitToggleButton from "./components/BitkitToggleButton/BitkitToggleButt
 import BitkitTour, { useBitkitTour } from "./components/BitkitTour/BitkitTour.js";
 import BitkitTreeView, { createTreeCollection } from "./components/BitkitTreeView/BitkitTreeView.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, 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, useBitkitTour, useResponsive, useStepsDialog };
+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 };

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

@@ -39,8 +39,8 @@ declare const datePickerSelectSlotRecipe: import('@chakra-ui/react').SlotRecipeD
                     textStyle: "body/md/semibold";
                 };
             } | undefined;
-            itemList?: {
-                maxHeight: `${number}rem`;
+            content?: {
+                '--select-menu-list-max-height': `${number}rem`;
             } | undefined;
             itemLabel?: {
                 textStyle: "body/md/regular";
@@ -52,6 +52,18 @@ declare const datePickerSelectSlotRecipe: import('@chakra-ui/react').SlotRecipeD
             emptyState?: {
                 paddingBlock: "8";
             } | undefined;
+            errorState?: {
+                paddingBlock: "4";
+            } | undefined;
+            errorLabel?: {
+                textStyle: "body/md/regular";
+            } | undefined;
+            errorIcon?: {
+                marginBlockStart: "4";
+            } | undefined;
+            errorTextBlock?: {
+                paddingBlock: "2";
+            } | undefined;
             action?: {
                 minHeight: "40";
                 paddingBlock: "8";

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

@@ -1,6 +1,12 @@
 declare const drawerSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "body" | "footer" | "header" | "title" | "trigger" | "positioner" | "closeTrigger" | "description" | "backdrop", {
     variant: {
         docked: {
+            body: {
+                padding: {
+                    base: "16";
+                    tablet: "24";
+                };
+            };
             closeTrigger: {
                 insetEnd: `${number}rem`;
                 top: "12";
@@ -11,14 +17,38 @@ declare const drawerSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<
                     tablet: `${number}rem`;
                 };
             };
+            footer: {
+                paddingInline: {
+                    base: "16";
+                    tablet: "24";
+                };
+            };
+            header: {
+                paddingInline: {
+                    base: "16";
+                    tablet: "24";
+                };
+                '& :has(> [role=tablist])': {
+                    marginInline: {
+                        base: "-8";
+                        tablet: "-16";
+                    };
+                };
+            };
         };
         floating: {
             body: {
+                paddingBlockStart: "8";
                 paddingInline: "24";
+                '.chakra-drawer__header:has([role=tablist]) ~ &': {
+                    paddingBlockStart: "24";
+                };
             };
             closeTrigger: {
-                insetEnd: "24";
-                top: "24";
+                height: "32";
+                insetEnd: "20";
+                top: "20";
+                width: "32";
             };
             positioner: {
                 padding: "32";
@@ -27,11 +57,15 @@ declare const drawerSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<
                 borderRadius: "12";
                 boxShadow: "elevation/lg";
                 maxWidth: `${number}rem`;
+                minWidth: `min(100%, ${number}rem)`;
             };
             header: {
                 paddingBlockEnd: "16";
                 paddingBlockStart: "24";
                 paddingInline: "24";
+                '& :has(> [role=tablist])': {
+                    marginInline: "-16";
+                };
             };
             footer: {
                 borderBlockStartColor: "transparent";
@@ -42,9 +76,16 @@ declare const drawerSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<
             };
             title: {
                 color: "text/primary";
-                textStyle: "heading/h2";
+                textStyle: "heading/h3";
             };
         };
     };
+    size: {
+        xxs: {};
+        xs: {};
+        sm: {};
+        md: {};
+        lg: {};
+    };
 }>;
 export default drawerSlotRecipe;