@bitrise/bitkit-v2 0.3.459 → 0.3.460-beta.2893

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"}

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  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;CAE1D,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,60 @@
+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, icon: Icon, secondaryText, status } = 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
+			})]
+		}),
+		props.isExternal && /* @__PURE__ */ jsx(IconArrowNortheast, { css: styles.linkIcon })
+	] });
+	if (props.href === void 0) {
+		const { children: _children, css, href: _href, icon: _icon, isExternal: _isExternal, secondaryText: _secondaryText, status: _status, ...rest } = props;
+		return /* @__PURE__ */ jsx(chakra.button, {
+			ref,
+			"data-with-secondary": secondaryText ? "" : void 0,
+			type: "button",
+			...rest,
+			css: [styles.link, css],
+			children: content
+		});
+	}
+	const { children: _children, css, icon: _icon, isExternal, secondaryText: _secondaryText, status: _status, ...rest } = props;
+	return /* @__PURE__ */ jsx(chakra.a, {
+		ref,
+		"data-with-secondary": secondaryText ? "" : void 0,
+		rel: isExternal ? "noopener noreferrer" : void 0,
+		target: isExternal ? "_blank" : void 0,
+		...rest,
+		css: [styles.link, css],
+		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 { children, icon: Icon, secondaryText, status } = props;\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      {props.isExternal && <IconArrowNortheast css={styles.linkIcon} />}\n    </>\n  );\n\n  if (props.href === undefined) {\n    const {\n      children: _children,\n      css,\n      href: _href,\n      icon: _icon,\n      isExternal: _isExternal,\n      secondaryText: _secondaryText,\n      status: _status,\n      ...rest\n    } = props;\n\n    return (\n      <chakra.button\n        ref={ref as Ref<HTMLButtonElement>}\n        data-with-secondary={secondaryText ? '' : undefined}\n        type=\"button\"\n        {...rest}\n        css={[styles.link, css]}\n      >\n        {content}\n      </chakra.button>\n    );\n  }\n\n  const {\n    children: _children,\n    css,\n    icon: _icon,\n    isExternal,\n    secondaryText: _secondaryText,\n    status: _status,\n    ...rest\n  } = props;\n\n  return (\n    <chakra.a\n      ref={ref as Ref<HTMLAnchorElement>}\n      data-with-secondary={secondaryText ? '' : undefined}\n      rel={isExternal ? 'noopener noreferrer' : undefined}\n      target={isExternal ? '_blank' : undefined}\n      {...rest}\n      css={[styles.link, css]}\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,EAAE,UAAU,MAAM,MAAM,eAAe,WAAW;CAExD,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,MAAM,cAAc,oBAAC,oBAAD,EAAoB,KAAK,OAAO,SAAW,CAAA;CAChE,EAAA,CAAA;CAGJ,IAAI,MAAM,SAAS,KAAA,GAAW;EAC5B,MAAM,EACJ,UAAU,WACV,KACA,MAAM,OACN,MAAM,OACN,YAAY,aACZ,eAAe,gBACf,QAAQ,SACR,GAAG,SACD;EAEJ,OACE,oBAAC,OAAO,QAAR;GACO;GACL,uBAAqB,gBAAgB,KAAK,KAAA;GAC1C,MAAK;GACL,GAAI;GACJ,KAAK,CAAC,OAAO,MAAM,GAAG;GAErB,UAAA;EACY,CAAA;CAEnB;CAEA,MAAM,EACJ,UAAU,WACV,KACA,MAAM,OACN,YACA,eAAe,gBACf,QAAQ,SACR,GAAG,SACD;CAEJ,OACE,oBAAC,OAAO,GAAR;EACO;EACL,uBAAqB,gBAAgB,KAAK,KAAA;EAC1C,KAAK,aAAa,wBAAwB,KAAA;EAC1C,QAAQ,aAAa,WAAW,KAAA;EAChC,GAAI;EACJ,KAAK,CAAC,OAAO,MAAM,GAAG;EAErB,UAAA;CACO,CAAA;AAEd,CAAC;AAED,cAAc,cAAc"}

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

@@ -0,0 +1,45 @@
+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;
+    onValueChange?: (value: string) => void;
+    /** The selected workspace's `value`. */
+    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;
+    onValueChange?: (value: string) => void;
+    /** The selected workspace's `value`. */
+    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,105 @@
+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, 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 { createListCollection } from "@chakra-ui/react/collection";
+import { Select } from "@chakra-ui/react/select";
+var UISideNavWorkspaceSelector = forwardRef((props, ref) => {
+	const { children, css, emptyHelperText, emptyLabel, errorHelperText, errorLabel, isLoading, label = "Workspace", onScrolledToBottom, onSearchChange, onValueChange, searchValue, value, workspaces, ...rest } = props;
+	const { isMobile, menuContainerRef, setMenuOpen, styles } = useUISideNavContext();
+	const [ownQuery, setOwnQuery] = useState("");
+	const isSearchDelegated = onSearchChange !== void 0;
+	const query = isSearchDelegated ? searchValue : ownQuery;
+	const hasSearch = isSearchDelegated || workspaces.length >= 6;
+	const items = (isSearchDelegated || !ownQuery ? workspaces : workspaces.filter((workspace) => workspace.label.toLowerCase().includes(ownQuery.toLowerCase()))).map((workspace) => ({
+		...workspace,
+		avatar: workspace.avatar ?? null
+	}));
+	const collection = createListCollection({ items });
+	const selected = workspaces.find((workspace) => workspace.value === value);
+	return /* @__PURE__ */ jsxs(Select.Root, {
+		collection,
+		css: styles.workspaceRoot,
+		onOpenChange: (details) => {
+			setMenuOpen(details.open);
+			if (!details.open) setOwnQuery("");
+		},
+		onValueChange: (details) => onValueChange?.(details.value[0]),
+		positioning: isMobile ? {
+			gutter: 0,
+			offset: { crossAxis: 16 },
+			overflowPadding: 16
+		} : {
+			gutter: -8,
+			offset: { crossAxis: 16 },
+			placement: "bottom-start"
+		},
+		size: "lg",
+		value: value === void 0 ? void 0 : [value],
+		children: [/* @__PURE__ */ jsxs(Select.Control, {
+			css: styles.workspaceControl,
+			children: [/* @__PURE__ */ jsx(Select.HiddenSelect, {}), /* @__PURE__ */ jsxs(Select.Trigger, {
+				ref,
+				...rest,
+				css: [styles.workspace, css],
+				children: [
+					selected?.avatar ? /* @__PURE__ */ jsx(BitkitAvatar, {
+						borderColor: "border/minimal",
+						borderWidth: "1",
+						name: selected.label,
+						size: "40",
+						src: selected.avatar,
+						variant: "image"
+					}) : /* @__PURE__ */ jsx(BitkitAvatar, {
+						borderColor: "border/minimal",
+						borderWidth: "1",
+						name: selected?.label ?? "",
+						size: "40",
+						variant: "letters"
+					}),
+					/* @__PURE__ */ jsxs(Box, {
+						css: styles.workspaceTextBlock,
+						children: [/* @__PURE__ */ jsx(Text, {
+							css: styles.workspaceLabel,
+							children: label
+						}), /* @__PURE__ */ jsx(Text, {
+							css: styles.workspaceValue,
+							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 { Portal } from '@chakra-ui/react/portal';\nimport { Select, type SelectTriggerProps } from '@chakra-ui/react/select';\nimport { Text } from '@chakra-ui/react/text';\nimport { forwardRef, 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  onValueChange?: (value: string) => void;\n  /** The selected workspace's `value`. */\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      onScrolledToBottom,\n      onSearchChange,\n      onValueChange,\n      searchValue,\n      value,\n      workspaces,\n      ...rest\n    } = props;\n\n    const { isMobile, menuContainerRef, setMenuOpen, styles } = useUISideNavContext();\n\n    const [ownQuery, setOwnQuery] = useState('');\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 matches =\n      isSearchDelegated || !ownQuery\n        ? workspaces\n        : workspaces.filter((workspace) => workspace.label.toLowerCase().includes(ownQuery.toLowerCase()));\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    const collection = createListCollection({ items });\n    const selected = workspaces.find((workspace) => workspace.value === value);\n\n    return (\n      <Select.Root\n        collection={collection}\n        css={styles.workspaceRoot}\n        onOpenChange={(details) => {\n          setMenuOpen(details.open);\n          if (!details.open) setOwnQuery('');\n        }}\n        onValueChange={(details) => onValueChange?.(details.value[0])}\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={value === undefined ? undefined : [value]}\n      >\n        <Select.Control css={styles.workspaceControl}>\n          <Select.HiddenSelect />\n          <Select.Trigger ref={ref} {...rest} css={[styles.workspace, css]}>\n            {selected?.avatar ? (\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            ) : (\n              <BitkitAvatar\n                borderColor=\"border/minimal\"\n                borderWidth=\"1\"\n                name={selected?.label ?? ''}\n                size=\"40\"\n                variant=\"letters\"\n              />\n            )}\n            <Box css={styles.workspaceTextBlock}>\n              <Text css={styles.workspaceLabel}>{label}</Text>\n              <Text css={styles.workspaceValue}>{selected?.label}</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":";;;;;;;;;;;AAqDA,IAAM,6BAA6B,YAChC,OAAO,QAAQ;CACd,MAAM,EACJ,UACA,KACA,iBACA,YACA,iBACA,YACA,WACA,QAAQ,aACR,oBACA,gBACA,eACA,aACA,OACA,YACA,GAAG,SACD;CAEJ,MAAM,EAAE,UAAU,kBAAkB,aAAa,WAAW,oBAAoB;CAEhF,MAAM,CAAC,UAAU,eAAe,SAAS,EAAE;CAK3C,MAAM,oBAAoB,mBAAmB,KAAA;CAC7C,MAAM,QAAQ,oBAAoB,cAAc;CAChD,MAAM,YAAY,qBAAqB,WAAW,UAAA;CASlD,MAAM,SANJ,qBAAqB,CAAC,WAClB,aACA,WAAW,QAAQ,cAAc,UAAU,MAAM,YAAY,CAAC,CAAC,SAAS,SAAS,YAAY,CAAC,CAAC,EAAA,CAI7C,KAAK,eAAe;EAC1E,GAAG;EACH,QAAQ,UAAU,UAAU;CAC9B,EAAE;CAEF,MAAM,aAAa,qBAAqB,EAAE,MAAM,CAAC;CACjD,MAAM,WAAW,WAAW,MAAM,cAAc,UAAU,UAAU,KAAK;CAEzE,OACE,qBAAC,OAAO,MAAR;EACc;EACZ,KAAK,OAAO;EACZ,eAAe,YAAY;GACzB,YAAY,QAAQ,IAAI;GACxB,IAAI,CAAC,QAAQ,MAAM,YAAY,EAAE;EACnC;EACA,gBAAgB,YAAY,gBAAgB,QAAQ,MAAM,EAAE;EAG5D,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,UAAU,KAAA,IAAY,KAAA,IAAY,CAAC,KAAK;EAhBjD,UAAA,CAkBE,qBAAC,OAAO,SAAR;GAAgB,KAAK,OAAO;GAA5B,UAAA,CACE,oBAAC,OAAO,cAAR,CAAsB,CAAA,GACtB,qBAAC,OAAO,SAAR;IAAqB;IAAK,GAAI;IAAM,KAAK,CAAC,OAAO,WAAW,GAAG;IAA/D,UAAA;KACG,UAAU,SACT,oBAAC,cAAD;MACE,aAAY;MACZ,aAAY;MACZ,MAAM,SAAS;MACf,MAAK;MACL,KAAK,SAAS;MACd,SAAQ;KACT,CAAA,IAED,oBAAC,cAAD;MACE,aAAY;MACZ,aAAY;MACZ,MAAM,UAAU,SAAS;MACzB,MAAK;MACL,SAAQ;KACT,CAAA;KAEH,qBAAC,KAAD;MAAK,KAAK,OAAO;MAAjB,UAAA,CACE,oBAAC,MAAD;OAAM,KAAK,OAAO;OAAiB,UAAA;MAAY,CAAA,GAC/C,oBAAC,MAAD;OAAM,KAAK,OAAO;OAAiB,UAAA,UAAU;MAAY,CAAA,CACtD;;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

@@ -93,3 +93,5 @@ export { default as BitkitToggleButton, type BitkitToggleButtonProps } from './B
 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

@@ -383,6 +383,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, 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, 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/semantic-tokens/index.d.ts

@@ -1591,12 +1591,12 @@ declare const semanticTokens: {
                 base: string;
             };
         };
-        'sys/ui/header/indicator/badge': {
+        'sys/ui/header/badge/red': {
             value: {
                 base: string;
             };
         };
-        'sys/ui/header/indicator/badge-ai': {
+        'sys/ui/header/badge/indigo': {
             value: {
                 base: string;
             };
@@ -1646,6 +1646,21 @@ declare const semanticTokens: {
                 base: string;
             };
         };
+        'sys/ui/sidenav/badge/neutral': {
+            value: {
+                base: string;
+            };
+        };
+        'sys/ui/sidenav/badge/green': {
+            value: {
+                base: string;
+            };
+        };
+        'sys/ui/sidenav/badge/red': {
+            value: {
+                base: string;
+            };
+        };
         'input/text/label': {
             value: {
                 base: string;

package/dist/theme/semantic-tokens/semanticColors.d.ts

@@ -1590,12 +1590,12 @@ declare const semanticColors: {
             base: string;
         };
     };
-    'sys/ui/header/indicator/badge': {
+    'sys/ui/header/badge/red': {
         value: {
             base: string;
         };
     };
-    'sys/ui/header/indicator/badge-ai': {
+    'sys/ui/header/badge/indigo': {
         value: {
             base: string;
         };
@@ -1645,6 +1645,21 @@ declare const semanticColors: {
             base: string;
         };
     };
+    'sys/ui/sidenav/badge/neutral': {
+        value: {
+            base: string;
+        };
+    };
+    'sys/ui/sidenav/badge/green': {
+        value: {
+            base: string;
+        };
+    };
+    'sys/ui/sidenav/badge/red': {
+        value: {
+            base: string;
+        };
+    };
     'input/text/label': {
         value: {
             base: string;

package/dist/theme/semantic-tokens/semanticColors.js

@@ -336,8 +336,8 @@ var semanticColors = defineSemanticTokens.colors({
 	"sys/ui/header/button/tertiary/bg-disabled": { value: { base: "{colors.color/transparent}" } },
 	"sys/ui/header/button/tertiary/fg": { value: { base: "{colors.color/white/100}" } },
 	"sys/ui/header/button/tertiary/fg-disabled": { value: { base: "{colors.color/white/50}" } },
-	"sys/ui/header/indicator/badge": { value: { base: "{colors.red.60}" } },
-	"sys/ui/header/indicator/badge-ai": { value: { base: "{colors.indigo.90}" } },
+	"sys/ui/header/badge/red": { value: { base: "{colors.red.60}" } },
+	"sys/ui/header/badge/indigo": { value: { base: "{colors.indigo.90}" } },
 	"sys/ui/sidenav/bg": { value: { base: "{colors.purple.10}" } },
 	"sys/ui/sidenav/item/bg": { value: { base: "{colors.color/transparent}" } },
 	"sys/ui/sidenav/item/bg-hover": { value: { base: "{colors.color/white/10}" } },
@@ -347,6 +347,9 @@ var semanticColors = defineSemanticTokens.colors({
 	"sys/ui/sidenav/item/fg-hover": { value: { base: "{colors.color/white/100}" } },
 	"sys/ui/sidenav/item/fg-active": { value: { base: "{colors.color/white/100}" } },
 	"sys/ui/sidenav/item/indicator": { value: { base: "{colors.color/white/80}" } },
+	"sys/ui/sidenav/badge/neutral": { value: { base: "{colors.neutral.40}" } },
+	"sys/ui/sidenav/badge/green": { value: { base: "{colors.green.60}" } },
+	"sys/ui/sidenav/badge/red": { value: { base: "{colors.red.60}" } },
 	"input/text/label": { value: { base: "{colors.sys/fg/primary}" } },
 	"input/text/inputValue": { value: { base: "{colors.sys/fg/base}" } },
 	"input/text/placeholder": { value: { base: "{colors.sys/fg/subtle}" } },