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

package/dist/components/BitkitMultiselectMenu/BitkitMultiselectMenu.d.ts

@@ -1,6 +1,6 @@
 import { ListCollection } from '@chakra-ui/react/collection';
 import { ReactNode } from 'react';
-import { BitkitSelectMenuEmptyStateProps, BitkitSelectMenuScrollProps, BitkitSelectMenuSearchProps } from '../BitkitSelectMenu/BitkitSelectMenu';
+import { BitkitSelectMenuEmptyStateProps, BitkitSelectMenuErrorStateProps, BitkitSelectMenuScrollProps, BitkitSelectMenuSearchProps } from '../BitkitSelectMenu/BitkitSelectMenu';
 import { BitkitSelectMenuActionChild } from '../BitkitSelectMenu/BitkitSelectMenuAction';
 export type BitkitMultiselectMenuItemProps = {
     value: string;
@@ -15,11 +15,11 @@ export type BitkitMultiselectMenuProps = {
     collection: ListCollection<BitkitMultiselectMenuItemProps>;
     isLoading?: boolean;
     size?: 'md' | 'lg';
-} & BitkitSelectMenuSearchProps & BitkitSelectMenuScrollProps & BitkitSelectMenuEmptyStateProps;
+} & BitkitSelectMenuSearchProps & BitkitSelectMenuScrollProps & BitkitSelectMenuEmptyStateProps & BitkitSelectMenuErrorStateProps;
 declare const BitkitMultiselectMenu: import('react').ForwardRefExoticComponent<{
     children?: BitkitSelectMenuActionChild;
     collection: ListCollection<BitkitMultiselectMenuItemProps>;
     isLoading?: boolean;
     size?: "md" | "lg";
-} & BitkitSelectMenuSearchProps & BitkitSelectMenuScrollProps & BitkitSelectMenuEmptyStateProps & import('react').RefAttributes<HTMLDivElement>>;
+} & BitkitSelectMenuSearchProps & BitkitSelectMenuScrollProps & BitkitSelectMenuEmptyStateProps & BitkitSelectMenuErrorStateProps & import('react').RefAttributes<HTMLDivElement>>;
 export default BitkitMultiselectMenu;

package/dist/components/BitkitMultiselectMenu/BitkitMultiselectMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"BitkitMultiselectMenu.js","names":[],"sources":["../../../lib/components/BitkitMultiselectMenu/BitkitMultiselectMenu.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { type ListCollection } from '@chakra-ui/react/collection';\nimport { Select } from '@chakra-ui/react/select';\nimport { Spinner } from '@chakra-ui/react/spinner';\nimport { type SystemStyleObject, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { forwardRef, type ReactNode } from 'react';\n\nimport { IconCheck } from '../../icons';\nimport {\n  type BitkitSelectMenuEmptyStateProps,\n  type BitkitSelectMenuScrollProps,\n  type BitkitSelectMenuSearchProps,\n} from '../BitkitSelectMenu/BitkitSelectMenu';\nimport { type BitkitSelectMenuActionChild } from '../BitkitSelectMenu/BitkitSelectMenuAction';\nimport { SelectMenuShell, selectSizeMap, type SelectSizes } from '../BitkitSelectMenu/SelectMenuShell';\n\nexport type BitkitMultiselectMenuItemProps = {\n  value: string;\n  label: string;\n  group?: string;\n  helperText?: ReactNode;\n  disabled?: boolean;\n  loading?: boolean;\n};\n\nexport type BitkitMultiselectMenuProps = {\n  children?: BitkitSelectMenuActionChild;\n  collection: ListCollection<BitkitMultiselectMenuItemProps>;\n  isLoading?: boolean;\n  size?: 'md' | 'lg';\n} & BitkitSelectMenuSearchProps &\n  BitkitSelectMenuScrollProps &\n  BitkitSelectMenuEmptyStateProps;\n\nconst BitkitMultiselectMenu = forwardRef<HTMLDivElement, BitkitMultiselectMenuProps>((props, ref) => {\n  const { children, collection, size, ...shellProps } = props;\n  const recipe = useSlotRecipe({ key: 'select' });\n  const styles = recipe({ size });\n  const { iconSize, spinnerSize } = selectSizeMap[size ?? 'lg'];\n\n  return (\n    <SelectMenuShell\n      NS={Select}\n      collection={collection}\n      contentRef={ref}\n      iconSize={iconSize}\n      renderItem={(item) => (\n        <MultiselectMenuItem\n          key={item.value}\n          item={item}\n          iconSize={iconSize}\n          spinnerSize={spinnerSize}\n          styles={styles}\n        />\n      )}\n      spinnerSize={spinnerSize}\n      styles={styles}\n      {...shellProps}\n    >\n      {children}\n    </SelectMenuShell>\n  );\n});\n\nBitkitMultiselectMenu.displayName = 'BitkitMultiselectMenu';\n\ntype MultiselectMenuItemRenderProps = {\n  item: BitkitMultiselectMenuItemProps;\n  iconSize: SelectSizes['iconSize'];\n  spinnerSize: SelectSizes['spinnerSize'];\n  styles: Record<string, SystemStyleObject>;\n};\n\nconst MultiselectMenuItem = ({ item, iconSize, spinnerSize, styles }: MultiselectMenuItemRenderProps) => {\n  if (item.loading) {\n    // Rendered as a plain Box, not Select.Item — Zag's state machine won't track it\n    // as an option, so keyboard nav skips it and it can't be selected.\n    return (\n      <Box css={styles.item}>\n        <Spinner variant=\"purple\" size={spinnerSize} css={styles.itemLoading} />\n        <Text css={styles.itemLoadingLabel}>Loading...</Text>\n      </Box>\n    );\n  }\n\n  return (\n    <Select.Item css={styles.item} item={item}>\n      <Box css={styles.checkbox} data-slot=\"checkbox\">\n        <IconCheck size={iconSize} css={styles.checkmark} data-slot=\"checkmark\" />\n      </Box>\n      <Box css={styles.itemContent}>\n        <Text css={styles.itemLabel}>{item.label}</Text>\n        {item.helperText && <Text css={styles.itemHelperText}>{item.helperText}</Text>}\n      </Box>\n    </Select.Item>\n  );\n};\n\nexport default BitkitMultiselectMenu;\n"],"mappings":";;;;;;;;;;AAmCA,IAAM,wBAAwB,YAAwD,OAAO,QAAQ;CACnG,MAAM,EAAE,UAAU,YAAY,MAAM,GAAG,eAAe;CAEtD,MAAM,SADS,cAAc,EAAE,KAAK,SAAS,CAC9B,CAAA,CAAO,EAAE,KAAK,CAAC;CAC9B,MAAM,EAAE,UAAU,gBAAgB,cAAc,QAAQ;CAExD,OACE,oBAAC,iBAAD;EACE,IAAI;EACQ;EACZ,YAAY;EACF;EACV,aAAa,SACX,oBAAC,qBAAD;GAEQ;GACI;GACG;GACL;EACT,GALM,KAAK,KAKX;EAEU;EACL;EACR,GAAI;EAEH;CACc,CAAA;AAErB,CAAC;AAED,sBAAsB,cAAc;AASpC,IAAM,uBAAuB,EAAE,MAAM,UAAU,aAAa,aAA6C;CACvG,IAAI,KAAK,SAGP,OACE,qBAAC,KAAD;EAAK,KAAK,OAAO;EAAjB,UAAA,CACE,oBAAC,SAAD;GAAS,SAAQ;GAAS,MAAM;GAAa,KAAK,OAAO;EAAc,CAAA,GACvE,oBAAC,MAAD;GAAM,KAAK,OAAO;GAAkB,UAAA;EAAgB,CAAA,CACjD;;CAIT,OACE,qBAAC,OAAO,MAAR;EAAa,KAAK,OAAO;EAAY;EAArC,UAAA,CACE,oBAAC,KAAD;GAAK,KAAK,OAAO;GAAU,aAAU;GACnC,UAAA,oBAAC,WAAD;IAAW,MAAM;IAAU,KAAK,OAAO;IAAW,aAAU;GAAa,CAAA;EACtE,CAAA,GACL,qBAAC,KAAD;GAAK,KAAK,OAAO;GAAjB,UAAA,CACE,oBAAC,MAAD;IAAM,KAAK,OAAO;IAAY,UAAA,KAAK;GAAY,CAAA,GAC9C,KAAK,cAAc,oBAAC,MAAD;IAAM,KAAK,OAAO;IAAiB,UAAA,KAAK;GAAiB,CAAA,CAC1E;EACM,CAAA,CAAA;;AAEjB"}
+{"version":3,"file":"BitkitMultiselectMenu.js","names":[],"sources":["../../../lib/components/BitkitMultiselectMenu/BitkitMultiselectMenu.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { type ListCollection } from '@chakra-ui/react/collection';\nimport { Select } from '@chakra-ui/react/select';\nimport { Spinner } from '@chakra-ui/react/spinner';\nimport { type SystemStyleObject, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { forwardRef, type ReactNode } from 'react';\n\nimport { IconCheck } from '../../icons';\nimport {\n  type BitkitSelectMenuEmptyStateProps,\n  type BitkitSelectMenuErrorStateProps,\n  type BitkitSelectMenuScrollProps,\n  type BitkitSelectMenuSearchProps,\n} from '../BitkitSelectMenu/BitkitSelectMenu';\nimport { type BitkitSelectMenuActionChild } from '../BitkitSelectMenu/BitkitSelectMenuAction';\nimport { SelectMenuShell, selectSizeMap, type SelectSizes } from '../BitkitSelectMenu/SelectMenuShell';\n\nexport type BitkitMultiselectMenuItemProps = {\n  value: string;\n  label: string;\n  group?: string;\n  helperText?: ReactNode;\n  disabled?: boolean;\n  loading?: boolean;\n};\n\nexport type BitkitMultiselectMenuProps = {\n  children?: BitkitSelectMenuActionChild;\n  collection: ListCollection<BitkitMultiselectMenuItemProps>;\n  isLoading?: boolean;\n  size?: 'md' | 'lg';\n} & BitkitSelectMenuSearchProps &\n  BitkitSelectMenuScrollProps &\n  BitkitSelectMenuEmptyStateProps &\n  BitkitSelectMenuErrorStateProps;\n\nconst BitkitMultiselectMenu = forwardRef<HTMLDivElement, BitkitMultiselectMenuProps>((props, ref) => {\n  const { children, collection, size, ...shellProps } = props;\n  const recipe = useSlotRecipe({ key: 'select' });\n  const styles = recipe({ size });\n  const { iconSize, spinnerSize } = selectSizeMap[size ?? 'lg'];\n\n  return (\n    <SelectMenuShell\n      NS={Select}\n      collection={collection}\n      contentRef={ref}\n      iconSize={iconSize}\n      renderItem={(item) => (\n        <MultiselectMenuItem\n          key={item.value}\n          item={item}\n          iconSize={iconSize}\n          spinnerSize={spinnerSize}\n          styles={styles}\n        />\n      )}\n      spinnerSize={spinnerSize}\n      styles={styles}\n      {...shellProps}\n    >\n      {children}\n    </SelectMenuShell>\n  );\n});\n\nBitkitMultiselectMenu.displayName = 'BitkitMultiselectMenu';\n\ntype MultiselectMenuItemRenderProps = {\n  item: BitkitMultiselectMenuItemProps;\n  iconSize: SelectSizes['iconSize'];\n  spinnerSize: SelectSizes['spinnerSize'];\n  styles: Record<string, SystemStyleObject>;\n};\n\nconst MultiselectMenuItem = ({ item, iconSize, spinnerSize, styles }: MultiselectMenuItemRenderProps) => {\n  if (item.loading) {\n    // Rendered as a plain Box, not Select.Item — Zag's state machine won't track it\n    // as an option, so keyboard nav skips it and it can't be selected.\n    return (\n      <Box css={styles.item}>\n        <Spinner variant=\"purple\" size={spinnerSize} css={styles.itemLoading} />\n        <Text css={styles.itemLoadingLabel}>Loading...</Text>\n      </Box>\n    );\n  }\n\n  return (\n    <Select.Item css={styles.item} item={item}>\n      <Box css={styles.checkbox} data-slot=\"checkbox\">\n        <IconCheck size={iconSize} css={styles.checkmark} data-slot=\"checkmark\" />\n      </Box>\n      <Box css={styles.itemContent}>\n        <Text css={styles.itemLabel}>{item.label}</Text>\n        {item.helperText && <Text css={styles.itemHelperText}>{item.helperText}</Text>}\n      </Box>\n    </Select.Item>\n  );\n};\n\nexport default BitkitMultiselectMenu;\n"],"mappings":";;;;;;;;;;AAqCA,IAAM,wBAAwB,YAAwD,OAAO,QAAQ;CACnG,MAAM,EAAE,UAAU,YAAY,MAAM,GAAG,eAAe;CAEtD,MAAM,SADS,cAAc,EAAE,KAAK,SAAS,CAC9B,CAAA,CAAO,EAAE,KAAK,CAAC;CAC9B,MAAM,EAAE,UAAU,gBAAgB,cAAc,QAAQ;CAExD,OACE,oBAAC,iBAAD;EACE,IAAI;EACQ;EACZ,YAAY;EACF;EACV,aAAa,SACX,oBAAC,qBAAD;GAEQ;GACI;GACG;GACL;EACT,GALM,KAAK,KAKX;EAEU;EACL;EACR,GAAI;EAEH;CACc,CAAA;AAErB,CAAC;AAED,sBAAsB,cAAc;AASpC,IAAM,uBAAuB,EAAE,MAAM,UAAU,aAAa,aAA6C;CACvG,IAAI,KAAK,SAGP,OACE,qBAAC,KAAD;EAAK,KAAK,OAAO;EAAjB,UAAA,CACE,oBAAC,SAAD;GAAS,SAAQ;GAAS,MAAM;GAAa,KAAK,OAAO;EAAc,CAAA,GACvE,oBAAC,MAAD;GAAM,KAAK,OAAO;GAAkB,UAAA;EAAgB,CAAA,CACjD;;CAIT,OACE,qBAAC,OAAO,MAAR;EAAa,KAAK,OAAO;EAAY;EAArC,UAAA,CACE,oBAAC,KAAD;GAAK,KAAK,OAAO;GAAU,aAAU;GACnC,UAAA,oBAAC,WAAD;IAAW,MAAM;IAAU,KAAK,OAAO;IAAW,aAAU;GAAa,CAAA;EACtE,CAAA,GACL,qBAAC,KAAD;GAAK,KAAK,OAAO;GAAjB,UAAA,CACE,oBAAC,MAAD;IAAM,KAAK,OAAO;IAAY,UAAA,KAAK;GAAY,CAAA,GAC9C,KAAK,cAAc,oBAAC,MAAD;IAAM,KAAK,OAAO;IAAiB,UAAA,KAAK;GAAiB,CAAA,CAC1E;EACM,CAAA,CAAA;;AAEjB"}

package/dist/components/BitkitSelectMenu/BitkitSelectMenu.d.ts

@@ -8,6 +8,7 @@ export { type BitkitSelectMenuActionProps } from './BitkitSelectMenuAction';
 export type BitkitSelectMenuSearchProps = {
     /** When provided, a search input is rendered above the menu items. `searchValue` is required alongside. */
     onSearchChange?: (searchText: string) => void;
+    searchPlaceholder?: string;
     searchValue?: string;
 };
 export type BitkitSelectMenuScrollProps = {
@@ -33,6 +34,10 @@ export type BitkitSelectMenuEmptyStateProps = {
     emptyLabel?: string;
     emptyHelperText?: string;
 };
+export type BitkitSelectMenuErrorStateProps = {
+    errorLabel?: string;
+    errorHelperText?: string;
+};
 export type BitkitSelectMenuProps = {
     children?: BitkitSelectMenuActionChild;
     collection: ListCollection<BitkitSelectMenuItemProps>;
@@ -43,7 +48,7 @@ export type BitkitSelectMenuProps = {
     isLoading?: boolean;
     size?: 'md' | 'lg';
     variant?: 'select' | 'combobox';
-} & BitkitSelectMenuSearchProps & BitkitSelectMenuScrollProps & BitkitSelectMenuEmptyStateProps;
+} & BitkitSelectMenuSearchProps & BitkitSelectMenuScrollProps & BitkitSelectMenuEmptyStateProps & BitkitSelectMenuErrorStateProps;
 declare const BitkitSelectMenu: import('react').ForwardRefExoticComponent<{
     children?: BitkitSelectMenuActionChild;
     collection: ListCollection<BitkitSelectMenuItemProps>;
@@ -54,5 +59,5 @@ declare const BitkitSelectMenu: import('react').ForwardRefExoticComponent<{
     isLoading?: boolean;
     size?: "md" | "lg";
     variant?: "select" | "combobox";
-} & BitkitSelectMenuSearchProps & BitkitSelectMenuScrollProps & BitkitSelectMenuEmptyStateProps & import('react').RefAttributes<HTMLDivElement>>;
+} & BitkitSelectMenuSearchProps & BitkitSelectMenuScrollProps & BitkitSelectMenuEmptyStateProps & BitkitSelectMenuErrorStateProps & import('react').RefAttributes<HTMLDivElement>>;
 export default BitkitSelectMenu;

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

@@ -1 +1 @@
-{"version":3,"file":"BitkitSelectMenu.js","names":[],"sources":["../../../lib/components/BitkitSelectMenu/BitkitSelectMenu.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { type ListCollection } from '@chakra-ui/react/collection';\nimport { Combobox } from '@chakra-ui/react/combobox';\nimport { Select, type SelectContentProps } from '@chakra-ui/react/select';\nimport { Spinner } from '@chakra-ui/react/spinner';\nimport { type SystemStyleObject, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { cloneElement, forwardRef, type ReactElement, type ReactNode } from 'react';\n\nimport { type BitkitIconComponent, IconCheck } from '../../icons';\nimport BitkitAvatar from '../BitkitAvatar/BitkitAvatar';\nimport { type BitkitBadgeProps } from '../BitkitBadge/BitkitBadge';\nimport { type BitkitSelectMenuActionChild } from './BitkitSelectMenuAction';\nimport { SelectMenuShell, selectSizeMap, type SelectSizes } from './SelectMenuShell';\n\nexport { type BitkitSelectMenuActionProps } from './BitkitSelectMenuAction';\n\nexport type BitkitSelectMenuSearchProps = {\n  /** When provided, a search input is rendered above the menu items. `searchValue` is required alongside. */\n  onSearchChange?: (searchText: string) => void;\n  searchValue?: string;\n};\n\nexport type BitkitSelectMenuScrollProps = {\n  /** Fires when the item list reaches its end. Position only: keep your own loading and end-of-list guards. */\n  onScrolledToBottom?: () => void;\n};\n\nexport type BitkitSelectMenuItemProps = {\n  value: string;\n  label: string;\n  group?: string;\n  icon?: BitkitIconComponent;\n  /** The item's avatar. A URL renders that image; `null` renders the avatar with the initials\n   *  of `label`; omitting the prop renders no avatar and leaves the row's leading slot to\n   *  `icon`. */\n  avatar?: string | null;\n  helperText?: ReactNode;\n  /** A `BitkitBadge` after the label. Forced to `colorVariant=\"neutral\"` on a disabled item. */\n  badge?: ReactElement<BitkitBadgeProps>;\n  disabled?: boolean;\n  loading?: boolean;\n};\n\nexport type BitkitSelectMenuEmptyStateProps = {\n  emptyLabel?: string;\n  emptyHelperText?: string;\n};\n\nexport type BitkitSelectMenuProps = {\n  children?: BitkitSelectMenuActionChild;\n  collection: ListCollection<BitkitSelectMenuItemProps>;\n  /** Forwarded to the underlying Select/Combobox.Content. Kept for internal callers\n   *  (e.g. BitkitCalendar's in-grid selects that need to tweak max-height / width). The\n   *  public components (BitkitSelect, BitkitCombobox) do not expose this escape hatch. */\n  contentProps?: SelectContentProps;\n  isLoading?: boolean;\n  size?: 'md' | 'lg';\n  variant?: 'select' | 'combobox';\n} & BitkitSelectMenuSearchProps &\n  BitkitSelectMenuScrollProps &\n  BitkitSelectMenuEmptyStateProps;\n\nconst BitkitSelectMenu = forwardRef<HTMLDivElement, BitkitSelectMenuProps>((props, ref) => {\n  const { children, collection, variant = 'select', size, ...shellProps } = props;\n  const NS = variant === 'combobox' ? Combobox : Select;\n  const recipe = useSlotRecipe({ key: 'select' });\n  const styles = recipe({ size });\n  const { avatarSize, iconSize, spinnerSize } = selectSizeMap[size ?? 'lg'];\n\n  return (\n    <SelectMenuShell\n      NS={NS}\n      collection={collection}\n      contentRef={ref}\n      iconSize={iconSize}\n      renderItem={(item) => (\n        <SelectMenuItem\n          key={item.value}\n          NS={NS}\n          avatarSize={avatarSize}\n          item={item}\n          iconSize={iconSize}\n          spinnerSize={spinnerSize}\n          styles={styles}\n        />\n      )}\n      spinnerSize={spinnerSize}\n      styles={styles}\n      {...shellProps}\n    >\n      {children}\n    </SelectMenuShell>\n  );\n});\n\nBitkitSelectMenu.displayName = 'BitkitSelectMenu';\n\ntype SelectMenuItemRenderProps = {\n  NS: typeof Select | typeof Combobox;\n  avatarSize: SelectSizes['avatarSize'];\n  item: BitkitSelectMenuItemProps;\n  iconSize: SelectSizes['iconSize'];\n  spinnerSize: SelectSizes['spinnerSize'];\n  styles: Record<string, SystemStyleObject>;\n};\n\nconst SelectMenuItem = ({ NS, avatarSize, item, iconSize, spinnerSize, styles }: SelectMenuItemRenderProps) => {\n  const Icon = item.icon;\n  const showAvatar = item.avatar !== undefined;\n\n  if (item.loading) {\n    // Rendered as a plain Box, not NS.Item — Zag's state machine won't track it as\n    // an option, so keyboard nav skips it and it can't be selected.\n    return (\n      <Box css={styles.item}>\n        <Spinner variant=\"purple\" size={spinnerSize} css={styles.itemLoading} />\n        <Text css={styles.itemLoadingLabel}>Loading...</Text>\n      </Box>\n    );\n  }\n\n  return (\n    <NS.Item css={styles.item} item={item}>\n      {showAvatar && (\n        <Box data-slot=\"avatar\" css={styles.avatar}>\n          <BitkitAvatar variant=\"image\" src={item.avatar ?? ''} name={item.label} size={avatarSize} />\n        </Box>\n      )}\n      <Box css={styles.itemContent}>\n        <Box display=\"flex\" alignItems=\"center\" gap=\"8\">\n          {Icon && !showAvatar && <Icon css={styles.itemIcon} size={iconSize} />}\n          <Text css={styles.itemLabel}>{item.label}</Text>\n        </Box>\n        {item.helperText && <Text css={styles.itemHelperText}>{item.helperText}</Text>}\n      </Box>\n      {item.badge && (\n        <Box css={styles.itemBadge}>\n          {item.disabled ? cloneElement(item.badge, { colorVariant: 'neutral' }) : item.badge}\n        </Box>\n      )}\n      <NS.ItemIndicator asChild>\n        <IconCheck size={iconSize} css={styles.itemIndicator} />\n      </NS.ItemIndicator>\n    </NS.Item>\n  );\n};\n\nexport default BitkitSelectMenu;\n"],"mappings":";;;;;;;;;;;;AA+DA,IAAM,mBAAmB,YAAmD,OAAO,QAAQ;CACzF,MAAM,EAAE,UAAU,YAAY,UAAU,UAAU,MAAM,GAAG,eAAe;CAC1E,MAAM,KAAK,YAAY,aAAa,WAAW;CAE/C,MAAM,SADS,cAAc,EAAE,KAAK,SAAS,CAC9B,CAAA,CAAO,EAAE,KAAK,CAAC;CAC9B,MAAM,EAAE,YAAY,UAAU,gBAAgB,cAAc,QAAQ;CAEpE,OACE,oBAAC,iBAAD;EACM;EACQ;EACZ,YAAY;EACF;EACV,aAAa,SACX,oBAAC,gBAAD;GAEM;GACQ;GACN;GACI;GACG;GACL;EACT,GAPM,KAAK,KAOX;EAEU;EACL;EACR,GAAI;EAEH;CACc,CAAA;AAErB,CAAC;AAED,iBAAiB,cAAc;AAW/B,IAAM,kBAAkB,EAAE,IAAI,YAAY,MAAM,UAAU,aAAa,aAAwC;CAC7G,MAAM,OAAO,KAAK;CAClB,MAAM,aAAa,KAAK,WAAW,KAAA;CAEnC,IAAI,KAAK,SAGP,OACE,qBAAC,KAAD;EAAK,KAAK,OAAO;EAAjB,UAAA,CACE,oBAAC,SAAD;GAAS,SAAQ;GAAS,MAAM;GAAa,KAAK,OAAO;EAAc,CAAA,GACvE,oBAAC,MAAD;GAAM,KAAK,OAAO;GAAkB,UAAA;EAAgB,CAAA,CACjD;;CAIT,OACE,qBAAC,GAAG,MAAJ;EAAS,KAAK,OAAO;EAAY;EAAjC,UAAA;GACG,cACC,oBAAC,KAAD;IAAK,aAAU;IAAS,KAAK,OAAO;IAClC,UAAA,oBAAC,cAAD;KAAc,SAAQ;KAAQ,KAAK,KAAK,UAAU;KAAI,MAAM,KAAK;KAAO,MAAM;IAAa,CAAA;GACxF,CAAA;GAEP,qBAAC,KAAD;IAAK,KAAK,OAAO;IAAjB,UAAA,CACE,qBAAC,KAAD;KAAK,SAAQ;KAAO,YAAW;KAAS,KAAI;KAA5C,UAAA,CACG,QAAQ,CAAC,cAAc,oBAAC,MAAD;MAAM,KAAK,OAAO;MAAU,MAAM;KAAW,CAAA,GACrE,oBAAC,MAAD;MAAM,KAAK,OAAO;MAAY,UAAA,KAAK;KAAY,CAAA,CAC5C;IACJ,CAAA,GAAA,KAAK,cAAc,oBAAC,MAAD;KAAM,KAAK,OAAO;KAAiB,UAAA,KAAK;IAAiB,CAAA,CAC1E;;GACJ,KAAK,SACJ,oBAAC,KAAD;IAAK,KAAK,OAAO;IACd,UAAA,KAAK,WAAW,aAAa,KAAK,OAAO,EAAE,cAAc,UAAU,CAAC,IAAI,KAAK;GAC3E,CAAA;GAEP,oBAAC,GAAG,eAAJ;IAAkB,SAAA;IAChB,UAAA,oBAAC,WAAD;KAAW,MAAM;KAAU,KAAK,OAAO;IAAgB,CAAA;GACvC,CAAA;EACX;;AAEb"}
+{"version":3,"file":"BitkitSelectMenu.js","names":[],"sources":["../../../lib/components/BitkitSelectMenu/BitkitSelectMenu.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { type ListCollection } from '@chakra-ui/react/collection';\nimport { Combobox } from '@chakra-ui/react/combobox';\nimport { Select, type SelectContentProps } from '@chakra-ui/react/select';\nimport { Spinner } from '@chakra-ui/react/spinner';\nimport { type SystemStyleObject, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { cloneElement, forwardRef, type ReactElement, type ReactNode } from 'react';\n\nimport { type BitkitIconComponent, IconCheck } from '../../icons';\nimport BitkitAvatar from '../BitkitAvatar/BitkitAvatar';\nimport { type BitkitBadgeProps } from '../BitkitBadge/BitkitBadge';\nimport { type BitkitSelectMenuActionChild } from './BitkitSelectMenuAction';\nimport { SelectMenuShell, selectSizeMap, type SelectSizes } from './SelectMenuShell';\n\nexport { type BitkitSelectMenuActionProps } from './BitkitSelectMenuAction';\n\nexport type BitkitSelectMenuSearchProps = {\n  /** When provided, a search input is rendered above the menu items. `searchValue` is required alongside. */\n  onSearchChange?: (searchText: string) => void;\n  searchPlaceholder?: string;\n  searchValue?: string;\n};\n\nexport type BitkitSelectMenuScrollProps = {\n  /** Fires when the item list reaches its end. Position only: keep your own loading and end-of-list guards. */\n  onScrolledToBottom?: () => void;\n};\n\nexport type BitkitSelectMenuItemProps = {\n  value: string;\n  label: string;\n  group?: string;\n  icon?: BitkitIconComponent;\n  /** The item's avatar. A URL renders that image; `null` renders the avatar with the initials\n   *  of `label`; omitting the prop renders no avatar and leaves the row's leading slot to\n   *  `icon`. */\n  avatar?: string | null;\n  helperText?: ReactNode;\n  /** A `BitkitBadge` after the label. Forced to `colorVariant=\"neutral\"` on a disabled item. */\n  badge?: ReactElement<BitkitBadgeProps>;\n  disabled?: boolean;\n  loading?: boolean;\n};\n\nexport type BitkitSelectMenuEmptyStateProps = {\n  emptyLabel?: string;\n  emptyHelperText?: string;\n};\n\nexport type BitkitSelectMenuErrorStateProps = {\n  errorLabel?: string;\n  errorHelperText?: string;\n};\n\nexport type BitkitSelectMenuProps = {\n  children?: BitkitSelectMenuActionChild;\n  collection: ListCollection<BitkitSelectMenuItemProps>;\n  /** Forwarded to the underlying Select/Combobox.Content. Kept for internal callers\n   *  (e.g. BitkitCalendar's in-grid selects that need to tweak max-height / width). The\n   *  public components (BitkitSelect, BitkitCombobox) do not expose this escape hatch. */\n  contentProps?: SelectContentProps;\n  isLoading?: boolean;\n  size?: 'md' | 'lg';\n  variant?: 'select' | 'combobox';\n} & BitkitSelectMenuSearchProps &\n  BitkitSelectMenuScrollProps &\n  BitkitSelectMenuEmptyStateProps &\n  BitkitSelectMenuErrorStateProps;\n\nconst BitkitSelectMenu = forwardRef<HTMLDivElement, BitkitSelectMenuProps>((props, ref) => {\n  const { children, collection, variant = 'select', size, ...shellProps } = props;\n  const NS = variant === 'combobox' ? Combobox : Select;\n  const recipe = useSlotRecipe({ key: 'select' });\n  const styles = recipe({ size });\n  const { avatarSize, iconSize, spinnerSize } = selectSizeMap[size ?? 'lg'];\n\n  return (\n    <SelectMenuShell\n      NS={NS}\n      collection={collection}\n      contentRef={ref}\n      iconSize={iconSize}\n      renderItem={(item) => (\n        <SelectMenuItem\n          key={item.value}\n          NS={NS}\n          avatarSize={avatarSize}\n          item={item}\n          iconSize={iconSize}\n          spinnerSize={spinnerSize}\n          styles={styles}\n        />\n      )}\n      spinnerSize={spinnerSize}\n      styles={styles}\n      {...shellProps}\n    >\n      {children}\n    </SelectMenuShell>\n  );\n});\n\nBitkitSelectMenu.displayName = 'BitkitSelectMenu';\n\ntype SelectMenuItemRenderProps = {\n  NS: typeof Select | typeof Combobox;\n  avatarSize: SelectSizes['avatarSize'];\n  item: BitkitSelectMenuItemProps;\n  iconSize: SelectSizes['iconSize'];\n  spinnerSize: SelectSizes['spinnerSize'];\n  styles: Record<string, SystemStyleObject>;\n};\n\nconst SelectMenuItem = ({ NS, avatarSize, item, iconSize, spinnerSize, styles }: SelectMenuItemRenderProps) => {\n  const Icon = item.icon;\n  const showAvatar = item.avatar !== undefined;\n\n  if (item.loading) {\n    // Rendered as a plain Box, not NS.Item — Zag's state machine won't track it as\n    // an option, so keyboard nav skips it and it can't be selected.\n    return (\n      <Box css={styles.item}>\n        <Spinner variant=\"purple\" size={spinnerSize} css={styles.itemLoading} />\n        <Text css={styles.itemLoadingLabel}>Loading...</Text>\n      </Box>\n    );\n  }\n\n  return (\n    <NS.Item css={styles.item} item={item}>\n      {showAvatar && (\n        <Box data-slot=\"avatar\" css={styles.avatar}>\n          <BitkitAvatar variant=\"image\" src={item.avatar ?? ''} name={item.label} size={avatarSize} />\n        </Box>\n      )}\n      <Box css={styles.itemContent}>\n        <Box display=\"flex\" alignItems=\"center\" gap=\"8\">\n          {Icon && !showAvatar && <Icon css={styles.itemIcon} size={iconSize} />}\n          <Text css={styles.itemLabel}>{item.label}</Text>\n        </Box>\n        {item.helperText && <Text css={styles.itemHelperText}>{item.helperText}</Text>}\n      </Box>\n      {item.badge && (\n        <Box css={styles.itemBadge}>\n          {item.disabled ? cloneElement(item.badge, { colorVariant: 'neutral' }) : item.badge}\n        </Box>\n      )}\n      <NS.ItemIndicator asChild>\n        <IconCheck size={iconSize} css={styles.itemIndicator} />\n      </NS.ItemIndicator>\n    </NS.Item>\n  );\n};\n\nexport default BitkitSelectMenu;\n"],"mappings":";;;;;;;;;;;;AAsEA,IAAM,mBAAmB,YAAmD,OAAO,QAAQ;CACzF,MAAM,EAAE,UAAU,YAAY,UAAU,UAAU,MAAM,GAAG,eAAe;CAC1E,MAAM,KAAK,YAAY,aAAa,WAAW;CAE/C,MAAM,SADS,cAAc,EAAE,KAAK,SAAS,CAC9B,CAAA,CAAO,EAAE,KAAK,CAAC;CAC9B,MAAM,EAAE,YAAY,UAAU,gBAAgB,cAAc,QAAQ;CAEpE,OACE,oBAAC,iBAAD;EACM;EACQ;EACZ,YAAY;EACF;EACV,aAAa,SACX,oBAAC,gBAAD;GAEM;GACQ;GACN;GACI;GACG;GACL;EACT,GAPM,KAAK,KAOX;EAEU;EACL;EACR,GAAI;EAEH;CACc,CAAA;AAErB,CAAC;AAED,iBAAiB,cAAc;AAW/B,IAAM,kBAAkB,EAAE,IAAI,YAAY,MAAM,UAAU,aAAa,aAAwC;CAC7G,MAAM,OAAO,KAAK;CAClB,MAAM,aAAa,KAAK,WAAW,KAAA;CAEnC,IAAI,KAAK,SAGP,OACE,qBAAC,KAAD;EAAK,KAAK,OAAO;EAAjB,UAAA,CACE,oBAAC,SAAD;GAAS,SAAQ;GAAS,MAAM;GAAa,KAAK,OAAO;EAAc,CAAA,GACvE,oBAAC,MAAD;GAAM,KAAK,OAAO;GAAkB,UAAA;EAAgB,CAAA,CACjD;;CAIT,OACE,qBAAC,GAAG,MAAJ;EAAS,KAAK,OAAO;EAAY;EAAjC,UAAA;GACG,cACC,oBAAC,KAAD;IAAK,aAAU;IAAS,KAAK,OAAO;IAClC,UAAA,oBAAC,cAAD;KAAc,SAAQ;KAAQ,KAAK,KAAK,UAAU;KAAI,MAAM,KAAK;KAAO,MAAM;IAAa,CAAA;GACxF,CAAA;GAEP,qBAAC,KAAD;IAAK,KAAK,OAAO;IAAjB,UAAA,CACE,qBAAC,KAAD;KAAK,SAAQ;KAAO,YAAW;KAAS,KAAI;KAA5C,UAAA,CACG,QAAQ,CAAC,cAAc,oBAAC,MAAD;MAAM,KAAK,OAAO;MAAU,MAAM;KAAW,CAAA,GACrE,oBAAC,MAAD;MAAM,KAAK,OAAO;MAAY,UAAA,KAAK;KAAY,CAAA,CAC5C;IACJ,CAAA,GAAA,KAAK,cAAc,oBAAC,MAAD;KAAM,KAAK,OAAO;KAAiB,UAAA,KAAK;IAAiB,CAAA,CAC1E;;GACJ,KAAK,SACJ,oBAAC,KAAD;IAAK,KAAK,OAAO;IACd,UAAA,KAAK,WAAW,aAAa,KAAK,OAAO,EAAE,cAAc,UAAU,CAAC,IAAI,KAAK;GAC3E,CAAA;GAEP,oBAAC,GAAG,eAAJ;IAAkB,SAAA;IAChB,UAAA,oBAAC,WAAD;KAAW,MAAM;KAAU,KAAK,OAAO;IAAgB,CAAA;GACvC,CAAA;EACX;;AAEb"}

package/dist/components/BitkitSelectMenu/SelectMenuShell.d.ts

@@ -3,7 +3,7 @@ import { Combobox } from '@chakra-ui/react/combobox';
 import { Select, SelectContentProps } from '@chakra-ui/react/select';
 import { SystemStyleObject } from '@chakra-ui/react/styled-system';
 import { ReactNode, Ref } from 'react';
-import { BitkitSelectMenuEmptyStateProps, BitkitSelectMenuScrollProps, BitkitSelectMenuSearchProps } from './BitkitSelectMenu';
+import { BitkitSelectMenuEmptyStateProps, BitkitSelectMenuErrorStateProps, BitkitSelectMenuScrollProps, BitkitSelectMenuSearchProps } from './BitkitSelectMenu';
 import { BitkitSelectMenuActionChild } from './BitkitSelectMenuAction';
 export declare const selectSizeMap: {
     readonly lg: {
@@ -38,8 +38,8 @@ export type SelectMenuShellProps<T extends {
     renderItem: (item: T) => ReactNode;
     spinnerSize: SelectSizes['spinnerSize'];
     styles: Record<string, SystemStyleObject>;
-} & BitkitSelectMenuSearchProps & BitkitSelectMenuScrollProps & BitkitSelectMenuEmptyStateProps;
+} & BitkitSelectMenuSearchProps & BitkitSelectMenuScrollProps & BitkitSelectMenuEmptyStateProps & BitkitSelectMenuErrorStateProps;
 export declare const SelectMenuShell: <T extends {
     value: string;
     group?: string;
-}>({ NS, children, collection, contentProps, contentRef, emptyHelperText, emptyLabel, iconSize, isLoading, onScrolledToBottom, onSearchChange, renderItem, searchValue, spinnerSize, styles, }: SelectMenuShellProps<T>) => import('react').JSX.Element;
+}>({ NS, children, collection, contentProps, contentRef, emptyHelperText, emptyLabel, errorHelperText, errorLabel, iconSize, isLoading, onScrolledToBottom, onSearchChange, renderItem, searchPlaceholder, searchValue, spinnerSize, styles, }: SelectMenuShellProps<T>) => import('react').JSX.Element;

package/dist/components/BitkitSelectMenu/SelectMenuShell.js

@@ -1,4 +1,5 @@
 import IconCross from "../../icons/IconCross.js";
+import IconCrossCircle from "../../icons/IconCrossCircle.js";
 import IconMagnifier from "../../icons/IconMagnifier.js";
 import BitkitGroupHeading from "../BitkitGroupHeading/BitkitGroupHeading.js";
 import { SelectMenuShellContextProvider } from "./BitkitSelectMenuAction.js";
@@ -21,9 +22,10 @@ var selectSizeMap = {
 		spinnerSize: "md"
 	}
 };
-var SelectMenuShell = ({ NS, children, collection, contentProps, contentRef, emptyHelperText, emptyLabel = "No matching options", iconSize, isLoading = false, onScrolledToBottom, onSearchChange, renderItem, searchValue, spinnerSize, styles }) => {
+var SelectMenuShell = ({ NS, children, collection, contentProps, contentRef, emptyHelperText, emptyLabel = "No matching options", errorHelperText, errorLabel, iconSize, isLoading = false, onScrolledToBottom, onSearchChange, renderItem, searchPlaceholder, searchValue, spinnerSize, styles }) => {
 	const { css: contentCss, ...restContentProps } = contentProps ?? {};
 	const isEmpty = collection.size === 0;
+	const hasError = errorLabel !== void 0;
 	const hasAction = isValidElement(children);
 	const wasAtBottom = useRef(false);
 	const handleItemListScroll = (event) => {
@@ -49,12 +51,29 @@ var SelectMenuShell = ({ NS, children, collection, contentProps, contentRef, emp
 				}),
 				onSearchChange && /* @__PURE__ */ jsx(SelectMenuSearch, {
 					iconSize,
+					placeholder: searchPlaceholder,
 					styles,
 					value: searchValue ?? "",
 					onSearchChange
 				}),
-				/* @__PURE__ */ jsxs(Box, {
+				hasError ? /* @__PURE__ */ jsxs(Box, {
+					css: styles.errorState,
+					children: [/* @__PURE__ */ jsx(IconCrossCircle, {
+						css: styles.errorIcon,
+						size: iconSize
+					}), /* @__PURE__ */ jsxs(Box, {
+						css: styles.errorTextBlock,
+						children: [/* @__PURE__ */ jsx(Text, {
+							css: styles.errorLabel,
+							children: errorLabel
+						}), errorHelperText && /* @__PURE__ */ jsx(Text, {
+							css: styles.itemHelperText,
+							children: errorHelperText
+						})]
+					})]
+				}) : /* @__PURE__ */ jsxs(Box, {
 					css: styles.itemList,
+					"data-slot": "item-list",
 					onScroll: handleItemListScroll,
 					children: [
 						isLoading && /* @__PURE__ */ jsxs(Box, {
@@ -93,7 +112,7 @@ var SelectMenuShell = ({ NS, children, collection, contentProps, contentRef, emp
 		})
 	});
 };
-var SelectMenuSearch = ({ iconSize, onSearchChange, styles, value }) => /* @__PURE__ */ jsxs(Box, {
+var SelectMenuSearch = ({ iconSize, onSearchChange, placeholder = "Search...", styles, value }) => /* @__PURE__ */ jsxs(Box, {
 	css: styles.searchInputGroup,
 	children: [
 		/* @__PURE__ */ jsx(IconMagnifier, {
@@ -103,7 +122,7 @@ var SelectMenuSearch = ({ iconSize, onSearchChange, styles, value }) => /* @__PU
 		/* @__PURE__ */ jsx(chakra.input, {
 			"aria-label": "Search",
 			css: styles.searchInput,
-			placeholder: "Search...",
+			placeholder,
 			value,
 			onChange: (event) => onSearchChange(event.target.value),
 			onKeyDown: (event) => {

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

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

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

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

package/dist/components/BitkitUISideNav/BitkitUISideNav.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"BitkitUISideNav.js","names":[],"sources":["../../../lib/components/BitkitUISideNav/BitkitUISideNav.tsx"],"sourcesContent":["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, 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  // The drawer has no collapsed state to be in, so mobile is always expanded. On desktop an open\n  // menu counts alongside the pointer: letting the pointer alone decide would collapse the rail\n  // out from under an open workspace list.\n  const expanded = isMobile || (expandedProp ?? (pointerInside || focusInside || menuOpen));\n\n  const handleBlur = (event: FocusEvent<HTMLElement>) => {\n    // `blur` also fires when focus moves between two rows. Only a target outside the nav counts.\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={isMobile ? undefined : handleBlur}\n      onFocus={isMobile ? undefined : () => setFocusInside(true)}\n      onPointerEnter={isMobile ? undefined : () => setPointerInside(true)}\n      onPointerLeave={isMobile ? undefined : () => setPointerInside(false)}\n    >\n      <nav>{children}</nav>\n    </Box>\n  );\n\n  const context = { expanded, isMobile, menuContainerRef, setMenuOpen, styles };\n\n  if (!isMobile) {\n    return <UISideNavContextProvider value={context}>{nav}</UISideNavContextProvider>;\n  }\n\n  return (\n    <UISideNavContextProvider value={context}>\n      {/*\n        No `placement`: the drawer recipe carries no placement variant, so Chakra does not accept\n        the prop. Which edge the panel comes from is settled by the positioner and the slide\n        animations in this component's own recipe.\n      */}\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              {/*\n                Visually beside the panel, but still a child of the content so the dialog's focus\n                trap includes it — a close button the keyboard cannot reach is not a close button.\n\n                A plain button rather than `Drawer.CloseTrigger`: the trigger carries the drawer\n                recipe's own `closeTrigger` slot, which pins itself inside the panel and paints the\n                icon dark. The drawer is controlled anyway, so closing it is one call.\n              */}\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;CAK9D,MAAM,WAAW,aAAa,iBAAiB,iBAAiB,eAAe;CAE/E,MAAM,cAAc,UAAmC;EAErD,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,WAAW,KAAA,IAAY;EAC/B,SAAS,WAAW,KAAA,UAAkB,eAAe,IAAI;EACzD,gBAAgB,WAAW,KAAA,UAAkB,iBAAiB,IAAI;EAClE,gBAAgB,WAAW,KAAA,UAAkB,iBAAiB,KAAK;EAEnE,UAAA,oBAAC,OAAD,EAAM,SAAc,CAAA;CACjB,CAAA;CAGP,MAAM,UAAU;EAAE;EAAU;EAAU;EAAkB;EAAa;CAAO;CAE5E,IAAI,CAAC,UACH,OAAO,oBAAC,0BAAD;EAA0B,OAAO;EAAU,UAAA;CAA8B,CAAA;CAGlF,OACE,oBAAC,0BAAD;EAA0B,OAAO;EAM/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,KASD,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"}