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

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

@@ -0,0 +1 @@
+{"version":3,"file":"BitkitUISideNav.js","names":[],"sources":["../../../lib/components/BitkitUISideNav/BitkitUISideNav.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { Drawer } from '@chakra-ui/react/drawer';\nimport { Portal } from '@chakra-ui/react/portal';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { type FocusEvent, forwardRef, type ReactNode, useMemo, useRef, useState } from 'react';\n\nimport useResponsive from '../../hooks/useResponsive';\nimport { withSubComponents } from '../../utilities/withSubComponents';\nimport BitkitCloseButton from '../BitkitCloseButton/BitkitCloseButton';\nimport UISideNavBody from './UISideNavBody';\nimport { UISideNavContextProvider } from './UISideNavContext';\nimport UISideNavFooter from './UISideNavFooter';\nimport UISideNavFooterHeading from './UISideNavFooterHeading';\nimport UISideNavItem from './UISideNavItem';\nimport UISideNavLink from './UISideNavLink';\nimport UISideNavWorkspaceSelector from './UISideNavWorkspaceSelector';\n\nexport interface BitkitUISideNavProps extends Omit<BoxProps, 'children'> {\n  children: ReactNode;\n  /**\n   * Forces the desktop rail open or shut, overriding the pointer and focus behaviour. Leave it\n   * unset for the normal rail. Set it to `true` while something the rail does not know about is\n   * anchored to it, such as a popover opened from the footer.\n   */\n  expanded?: boolean;\n  /** Mobile drawer visibility. Controlled, because the header's menu button is what opens it. */\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n}\n\n/**\n * The platform's primary navigation. It expects a workspace selector, a body of navigation\n * items, and an optional footer:\n *\n * ```tsx\n * <BitkitUISideNav open={open} onOpenChange={setOpen}>\n *   <BitkitUISideNav.WorkspaceSelector\n *     workspaces={workspaces}\n *     value={workspace}\n *     onValueChange={setWorkspace}\n *   />\n *   <BitkitUISideNav.Body>\n *     <BitkitUISideNav.Item href=\"/dashboard\" icon={IconDashboard} selectedIcon={IconDashboardFilled} selected>\n *       Dashboard\n *     </BitkitUISideNav.Item>\n *   </BitkitUISideNav.Body>\n *   <BitkitUISideNav.Footer>…</BitkitUISideNav.Footer>\n * </BitkitUISideNav>\n * ```\n *\n * On desktop it is a 72px rail that widens to 256px under the pointer and while anything inside\n * it holds keyboard focus. The rows are always laid out at the full width and clipped, so the\n * labels appear without any text reflowing. It will not collapse while the workspace menu is\n * open. There is no pin: the rail is the resting state.\n *\n * Below the `tablet` breakpoint it becomes an overlay drawer instead, opened by the header rather\n * than by hovering. Pass `open` and `onOpenChange`; they are ignored on desktop.\n *\n * It does not position itself. The consumer decides where it sits and how tall it is, which is\n * what lets a page slot it under a header of any height. The expanded rail overlays the page\n * rather than pushing it, so give it a `position` of your own and reserve 72px beside it.\n *\n * Descendants can read the current state with `useUISideNav()`.\n */\nconst BitkitUISideNav = forwardRef<HTMLElement, BitkitUISideNavProps>((props, ref) => {\n  const { children, css, expanded: expandedProp, onOpenChange, open = false, ...rest } = props;\n\n  const { isMobile } = useResponsive();\n\n  const [pointerInside, setPointerInside] = useState(false);\n  const [focusInside, setFocusInside] = useState(false);\n  const [menuOpen, setMenuOpen] = useState(false);\n  const menuContainerRef = useRef<HTMLDivElement>(null);\n\n  const recipe = useSlotRecipe({ key: 'uiSideNav' });\n  const styles = recipe({ layout: isMobile ? 'drawer' : 'rail' });\n\n  const expanded = isMobile || (expandedProp ?? (pointerInside || focusInside || menuOpen));\n  const tracksPointer = !isMobile && expandedProp === undefined;\n\n  const handleFocus = (event: FocusEvent<HTMLElement>) => {\n    if (!event.target.matches(':focus-visible')) return;\n    setFocusInside(true);\n  };\n\n  const handleBlur = (event: FocusEvent<HTMLElement>) => {\n    if (event.currentTarget.contains(event.relatedTarget)) return;\n    setFocusInside(false);\n  };\n\n  const nav = (\n    <Box\n      ref={ref}\n      aria-label=\"Platform navigation\"\n      asChild\n      data-expanded={expanded ? '' : undefined}\n      {...rest}\n      css={[styles.root, css]}\n      onBlur={tracksPointer ? handleBlur : undefined}\n      onFocus={tracksPointer ? handleFocus : undefined}\n      onPointerEnter={tracksPointer ? () => setPointerInside(true) : undefined}\n      onPointerLeave={tracksPointer ? () => setPointerInside(false) : undefined}\n    >\n      <nav>{children}</nav>\n    </Box>\n  );\n\n  const context = useMemo(\n    () => ({ expanded, isMobile, menuContainerRef, setMenuOpen, styles }),\n    [expanded, isMobile, styles],\n  );\n\n  if (!isMobile) {\n    return <UISideNavContextProvider value={context}>{nav}</UISideNavContextProvider>;\n  }\n\n  return (\n    <UISideNavContextProvider value={context}>\n      <Drawer.Root onOpenChange={(details) => onOpenChange?.(details.open)} open={open}>\n        <Portal>\n          <Drawer.Backdrop css={styles.backdrop} />\n          <Drawer.Positioner css={styles.positioner}>\n            <Drawer.Content ref={menuContainerRef} css={styles.content}>\n              {nav}\n              <Box css={styles.closeButton}>\n                <BitkitCloseButton\n                  aria-label=\"Close navigation\"\n                  colorVariant=\"white\"\n                  onClick={() => onOpenChange?.(false)}\n                  size=\"md\"\n                />\n              </Box>\n            </Drawer.Content>\n          </Drawer.Positioner>\n        </Portal>\n      </Drawer.Root>\n    </UISideNavContextProvider>\n  );\n});\n\nexport { uiSideNavRailWidth } from '../../theme/slot-recipes/UISideNav.recipe';\nexport { type BitkitUISideNavBodyProps } from './UISideNavBody';\nexport { type BitkitUISideNavFooterProps } from './UISideNavFooter';\nexport { type BitkitUISideNavFooterHeadingProps } from './UISideNavFooterHeading';\nexport { type BitkitUISideNavItemProps } from './UISideNavItem';\nexport {\n  type BitkitUISideNavLinkAsAnchorProps,\n  type BitkitUISideNavLinkAsButtonProps,\n  type BitkitUISideNavLinkProps,\n} from './UISideNavLink';\nexport {\n  type BitkitUISideNavWorkspaceProps,\n  type BitkitUISideNavWorkspaceSelectorProps,\n} from './UISideNavWorkspaceSelector';\n\nBitkitUISideNav.displayName = 'BitkitUISideNav';\n\nexport default withSubComponents(BitkitUISideNav, {\n  Body: UISideNavBody,\n  Footer: UISideNavFooter,\n  FooterHeading: UISideNavFooterHeading,\n  Item: UISideNavItem,\n  Link: UISideNavLink,\n  WorkspaceSelector: UISideNavWorkspaceSelector,\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgEA,IAAM,kBAAkB,YAA+C,OAAO,QAAQ;CACpF,MAAM,EAAE,UAAU,KAAK,UAAU,cAAc,cAAc,OAAO,OAAO,GAAG,SAAS;CAEvF,MAAM,EAAE,aAAa,cAAc;CAEnC,MAAM,CAAC,eAAe,oBAAoB,SAAS,KAAK;CACxD,MAAM,CAAC,aAAa,kBAAkB,SAAS,KAAK;CACpD,MAAM,CAAC,UAAU,eAAe,SAAS,KAAK;CAC9C,MAAM,mBAAmB,OAAuB,IAAI;CAGpD,MAAM,SADS,cAAc,EAAE,KAAK,YAAY,CACjC,CAAA,CAAO,EAAE,QAAQ,WAAW,WAAW,OAAO,CAAC;CAE9D,MAAM,WAAW,aAAa,iBAAiB,iBAAiB,eAAe;CAC/E,MAAM,gBAAgB,CAAC,YAAY,iBAAiB,KAAA;CAEpD,MAAM,eAAe,UAAmC;EACtD,IAAI,CAAC,MAAM,OAAO,QAAQ,gBAAgB,GAAG;EAC7C,eAAe,IAAI;CACrB;CAEA,MAAM,cAAc,UAAmC;EACrD,IAAI,MAAM,cAAc,SAAS,MAAM,aAAa,GAAG;EACvD,eAAe,KAAK;CACtB;CAEA,MAAM,MACJ,oBAAC,KAAD;EACO;EACL,cAAW;EACX,SAAA;EACA,iBAAe,WAAW,KAAK,KAAA;EAC/B,GAAI;EACJ,KAAK,CAAC,OAAO,MAAM,GAAG;EACtB,QAAQ,gBAAgB,aAAa,KAAA;EACrC,SAAS,gBAAgB,cAAc,KAAA;EACvC,gBAAgB,sBAAsB,iBAAiB,IAAI,IAAI,KAAA;EAC/D,gBAAgB,sBAAsB,iBAAiB,KAAK,IAAI,KAAA;EAEhE,UAAA,oBAAC,OAAD,EAAM,SAAc,CAAA;CACjB,CAAA;CAGP,MAAM,UAAU,eACP;EAAE;EAAU;EAAU;EAAkB;EAAa;CAAO,IACnE;EAAC;EAAU;EAAU;CAAM,CAC7B;CAEA,IAAI,CAAC,UACH,OAAO,oBAAC,0BAAD;EAA0B,OAAO;EAAU,UAAA;CAA8B,CAAA;CAGlF,OACE,oBAAC,0BAAD;EAA0B,OAAO;EAC/B,UAAA,oBAAC,OAAO,MAAR;GAAa,eAAe,YAAY,eAAe,QAAQ,IAAI;GAAS;GAC1E,UAAA,qBAAC,QAAD,EAAA,UAAA,CACE,oBAAC,OAAO,UAAR,EAAiB,KAAK,OAAO,SAAW,CAAA,GACxC,oBAAC,OAAO,YAAR;IAAmB,KAAK,OAAO;IAC7B,UAAA,qBAAC,OAAO,SAAR;KAAgB,KAAK;KAAkB,KAAK,OAAO;KAAnD,UAAA,CACG,KACD,oBAAC,KAAD;MAAK,KAAK,OAAO;MACf,UAAA,oBAAC,mBAAD;OACE,cAAW;OACX,cAAa;OACb,eAAe,eAAe,KAAK;OACnC,MAAK;MACN,CAAA;KACE,CAAA,CACS;;GACC,CAAA,CACb,EAAA,CAAA;EACG,CAAA;CACW,CAAA;AAE9B,CAAC;AAiBD,gBAAgB,cAAc;AAE9B,IAAA,0BAAe,kBAAkB,iBAAiB;CAChD,MAAM;CACN,QAAQ;CACR,eAAe;CACf,MAAM;CACN,MAAM;CACN,mBAAmB;AACrB,CAAC"}

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

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

package/dist/components/BitkitUISideNav/UISideNavBody.js

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

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

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

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

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

package/dist/components/BitkitUISideNav/UISideNavContext.js

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

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

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

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

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

package/dist/components/BitkitUISideNav/UISideNavFooter.js

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

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

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

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

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

package/dist/components/BitkitUISideNav/UISideNavFooterHeading.js

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

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

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

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,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`. 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;
+    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,119 @@
+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, 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", onScrolledToBottom, onSearchChange, onValueChange, searchValue, value, workspaces, ...rest } = props;
+	const { isMobile, menuContainerRef, setMenuOpen, styles } = useUISideNavContext();
+	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,
+		onOpenChange: (details) => {
+			setMenuOpen(details.open);
+			if (!details.open) setOwnQuery("");
+		},
+		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,
+				...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,
+							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 { 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, 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  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      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 { 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        onOpenChange={(details) => {\n          setMenuOpen(details.open);\n          if (!details.open) setOwnQuery('');\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 ref={ref} unstyled {...rest} css={[styles.workspace, css]}>\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}>{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":";;;;;;;;;;;;;AAuDA,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;CAChF,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,eAAe,YAAY;GACzB,YAAY,QAAQ,IAAI;GACxB,IAAI,CAAC,QAAQ,MAAM,YAAY,EAAE;EACnC;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;EAnBxD,UAAA,CAqBE,qBAAC,OAAO,SAAR;GAAgB,KAAK,OAAO;GAA5B,UAAA,CACE,oBAAC,OAAO,cAAR,CAAsB,CAAA,GACtB,qBAAC,OAAO,SAAR;IAAqB;IAAK,UAAA;IAAS,GAAI;IAAM,KAAK,CAAC,OAAO,WAAW,GAAG;IAAxE,UAAA;KACE,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;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';