@bitrise/bitkit-v2 0.3.226 → 0.3.227

package/dist/components/BitkitSelect/BitkitSelect.d.ts

@@ -1,8 +1,10 @@
 import { SelectRootProps, SelectTriggerProps } from '@chakra-ui/react/select';
 import { BitkitFieldProps } from '../BitkitField/BitkitField.tsx';
-import { BitkitSelectMenuCreateItemProps, BitkitSelectMenuEmptyStateProps, BitkitSelectMenuItemProps, BitkitSelectMenuSearchProps } from '../BitkitSelectMenu/BitkitSelectMenu.tsx';
+import { BitkitSelectMenuEmptyStateProps, BitkitSelectMenuItemProps, BitkitSelectMenuSearchProps } from '../BitkitSelectMenu/BitkitSelectMenu.tsx';
+import { BitkitSelectMenuActionChild } from '../BitkitSelectMenu/BitkitSelectMenuAction.tsx';
 export type BitkitSelectTriggerProps = SelectTriggerProps;
 export type BitkitSelectProps = Omit<BitkitFieldProps, 'children' | 'state'> & {
+    children?: BitkitSelectMenuActionChild;
     defaultValue?: string;
     isLoading?: boolean;
     items: Array<BitkitSelectMenuItemProps>;
@@ -13,8 +15,9 @@ export type BitkitSelectProps = Omit<BitkitFieldProps, 'children' | 'state'> & {
     state?: 'disabled' | 'error' | 'readOnly' | 'warning';
     triggerProps?: BitkitSelectTriggerProps;
     value?: string;
-} & BitkitSelectMenuCreateItemProps & BitkitSelectMenuSearchProps & BitkitSelectMenuEmptyStateProps;
-declare const BitkitSelect: import('react').ForwardRefExoticComponent<Omit<BitkitFieldProps, "children" | "state"> & {
+} & BitkitSelectMenuSearchProps & BitkitSelectMenuEmptyStateProps;
+declare const _default: import('react').ForwardRefExoticComponent<Omit<BitkitFieldProps, "children" | "state"> & {
+    children?: BitkitSelectMenuActionChild;
     defaultValue?: string;
     isLoading?: boolean;
     items: Array<BitkitSelectMenuItemProps>;
@@ -25,5 +28,10 @@ declare const BitkitSelect: import('react').ForwardRefExoticComponent<Omit<Bitki
     state?: "disabled" | "error" | "readOnly" | "warning";
     triggerProps?: BitkitSelectTriggerProps;
     value?: string;
-} & BitkitSelectMenuCreateItemProps & BitkitSelectMenuSearchProps & BitkitSelectMenuEmptyStateProps & import('react').RefAttributes<HTMLDivElement>>;
-export default BitkitSelect;
+} & BitkitSelectMenuSearchProps & BitkitSelectMenuEmptyStateProps & import('react').RefAttributes<HTMLDivElement>> & {
+    Action: {
+        (props: import('../index.ts').BitkitSelectMenuActionProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+};
+export default _default;

package/dist/components/BitkitSelect/BitkitSelect.js

@@ -1,9 +1,11 @@
 import AssetSelectChevron from "../../utilities/AssetSelectChevron.js";
 import IconErrorCircleFilled from "../../icons/IconErrorCircleFilled.js";
 import IconWarningYellow from "../../icons/IconWarningYellow.js";
+import { withSubComponents } from "../../utilities/withSubComponents.js";
+import BitkitSelectMenuAction from "../BitkitSelectMenu/BitkitSelectMenuAction.js";
 import BitkitSelectMenu from "../BitkitSelectMenu/BitkitSelectMenu.js";
 import BitkitField from "../BitkitField/BitkitField.js";
-import { Box } from "@chakra-ui/react/box";
+import { Text } from "@chakra-ui/react/text";
 import { forwardRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Portal } from "@chakra-ui/react/portal";
@@ -15,18 +17,23 @@ var SelectValue = ({ placeholder, state, size }) => {
 	const Icon = items[0]?.icon;
 	const label = items[0]?.label;
 	const iconSize = size === "md" ? "16" : "24";
-	return items[0] ? /* @__PURE__ */ jsx(Select.ValueText, {
-		placeholder: placeholder || state === "readOnly" ? "(not selected)" : "Select an option",
-		children: /* @__PURE__ */ jsxs(Box, {
-			display: "flex",
-			alignItems: "center",
-			gap: "8",
-			children: [Icon && /* @__PURE__ */ jsx(Icon, { size: iconSize }), label]
-		})
+	return items[0] ? /* @__PURE__ */ jsxs(Select.ValueText, {
+		placeholder: placeholder ?? (state === "readOnly" ? "(not selected)" : "Select an option"),
+		children: [Icon && /* @__PURE__ */ jsx(Icon, {
+			size: iconSize,
+			flexShrink: 0
+		}), /* @__PURE__ */ jsx(Text, {
+			as: "span",
+			overflow: "hidden",
+			textOverflow: "ellipsis",
+			whiteSpace: "nowrap",
+			minWidth: 0,
+			children: label
+		})]
 	}) : /* @__PURE__ */ jsx(Select.ValueText, { placeholder: placeholder ?? (state === "readOnly" ? "(not selected)" : "Select an option") });
 };
 var BitkitSelect = forwardRef((props, ref) => {
-	const { createItemLabel, defaultValue, emptyHelperText, emptyLabel, isLoading, items, onCreateItem, onSearchChange, onValueChange, searchValue, placeholder, selectProps, size, state, triggerProps, value, ...fieldProps } = props;
+	const { children, defaultValue, emptyHelperText, emptyLabel, isLoading, items, onSearchChange, onValueChange, searchValue, placeholder, selectProps, size, state, triggerProps, value, ...fieldProps } = props;
 	const collection = createListCollection({
 		items,
 		groupBy: (item) => item.group || "",
@@ -43,6 +50,7 @@ var BitkitSelect = forwardRef((props, ref) => {
 			...selectProps,
 			defaultValue: defaultValue ? [defaultValue] : void 0,
 			disabled: state === "disabled",
+			hasStatusIcon: state === "error" || state === "warning",
 			invalid: isInvalid,
 			onValueChange: (newVal) => onValueChange?.(newVal.value[0]),
 			readOnly: state === "readOnly",
@@ -73,21 +81,21 @@ var BitkitSelect = forwardRef((props, ref) => {
 				}),
 				/* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Select.Positioner, { children: /* @__PURE__ */ jsx(BitkitSelectMenu, {
 					collection,
-					createItemLabel,
 					emptyHelperText,
 					emptyLabel,
 					isLoading,
-					onCreateItem,
 					onSearchChange,
 					searchValue,
-					size
+					size,
+					children
 				}) }) })
 			]
 		})
 	});
 });
 BitkitSelect.displayName = "BitkitSelect";
+var BitkitSelect_default = withSubComponents(BitkitSelect, { Action: BitkitSelectMenuAction });
 //#endregion
-export { BitkitSelect as default };
+export { BitkitSelect_default as default };
 
 //# sourceMappingURL=BitkitSelect.js.map

package/dist/components/BitkitSelect/BitkitSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"BitkitSelect.js","names":[],"sources":["../../../lib/components/BitkitSelect/BitkitSelect.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { createListCollection } from '@chakra-ui/react/collection';\nimport { Portal } from '@chakra-ui/react/portal';\nimport { Select, type SelectRootProps, type SelectTriggerProps, useSelectContext } from '@chakra-ui/react/select';\nimport { forwardRef } from 'react';\n\nimport { IconErrorCircleFilled, IconWarningYellow } from '../../icons';\nimport AssetSelectChevron from '../../utilities/AssetSelectChevron.tsx';\nimport BitkitField, { type BitkitFieldProps } from '../BitkitField/BitkitField.tsx';\nimport BitkitSelectMenu, {\n  type BitkitSelectMenuCreateItemProps,\n  type BitkitSelectMenuEmptyStateProps,\n  type BitkitSelectMenuItemProps,\n  type BitkitSelectMenuSearchProps,\n} from '../BitkitSelectMenu/BitkitSelectMenu.tsx';\n\nexport type BitkitSelectTriggerProps = SelectTriggerProps;\n\nexport type BitkitSelectProps = Omit<BitkitFieldProps, 'children' | 'state'> & {\n  defaultValue?: string;\n  isLoading?: boolean;\n  items: Array<BitkitSelectMenuItemProps>;\n  onValueChange?: (newVal: string) => void;\n  placeholder?: string;\n  selectProps?: Omit<SelectRootProps, 'collection' | 'defaultValue' | 'onValueChange' | 'value'>;\n  size?: 'md' | 'lg';\n  state?: 'disabled' | 'error' | 'readOnly' | 'warning';\n  triggerProps?: BitkitSelectTriggerProps;\n  value?: string;\n} & BitkitSelectMenuCreateItemProps &\n  BitkitSelectMenuSearchProps &\n  BitkitSelectMenuEmptyStateProps;\n\ntype SelectValueProps = {\n  placeholder?: string;\n  size: BitkitSelectProps['size'];\n  state?: BitkitSelectProps['state'];\n};\n\nconst SelectValue = ({ placeholder, state, size }: SelectValueProps) => {\n  const select = useSelectContext();\n  const items = select.selectedItems as Array<BitkitSelectMenuItemProps>;\n\n  const Icon = items[0]?.icon;\n  const label = items[0]?.label;\n\n  const iconSize = size === 'md' ? '16' : '24';\n\n  return items[0] ? (\n    <Select.ValueText placeholder={placeholder || state === 'readOnly' ? '(not selected)' : 'Select an option'}>\n      <Box display=\"flex\" alignItems=\"center\" gap=\"8\">\n        {Icon && <Icon size={iconSize} />}\n        {label}\n      </Box>\n    </Select.ValueText>\n  ) : (\n    <Select.ValueText placeholder={placeholder ?? (state === 'readOnly' ? '(not selected)' : 'Select an option')} />\n  );\n};\n\nconst BitkitSelect = forwardRef<HTMLDivElement, BitkitSelectProps>((props: BitkitSelectProps, ref) => {\n  const {\n    createItemLabel,\n    defaultValue,\n    emptyHelperText,\n    emptyLabel,\n    isLoading,\n    items,\n    onCreateItem,\n    onSearchChange,\n    onValueChange,\n    searchValue,\n    placeholder,\n    selectProps,\n    size,\n    state,\n    triggerProps,\n    value,\n    ...fieldProps\n  } = props;\n\n  const collection = createListCollection({\n    items,\n    groupBy: (item) => item.group || '',\n    isItemDisabled: (item) => !!item.disabled,\n  });\n\n  const isInvalid = state === 'error' || !!fieldProps.errorText;\n\n  return (\n    <BitkitField ref={ref} state={state} {...fieldProps}>\n      <Select.Root\n        collection={collection}\n        size={size}\n        {...selectProps}\n        defaultValue={defaultValue ? [defaultValue] : undefined}\n        disabled={state === 'disabled'}\n        invalid={isInvalid}\n        onValueChange={(newVal) => onValueChange?.(newVal.value[0])}\n        readOnly={state === 'readOnly'}\n        // Bypass Zag's isScrollable(contentEl) gate — our Content is overflow:hidden flex\n        // column, so the real scroll container is itemList. See BitkitMultiselect for why.\n        scrollToIndexFn={({ getElement }) => getElement()?.scrollIntoView({ block: 'nearest' })}\n        value={value ? [value] : undefined}\n      >\n        <Select.HiddenSelect />\n        <Select.Control className=\"group\">\n          <Select.Trigger {...triggerProps}>\n            <SelectValue placeholder={placeholder} size={size} state={state} />\n          </Select.Trigger>\n          <Select.IndicatorGroup>\n            {state === 'error' && (\n              <Select.Indicator>\n                <IconErrorCircleFilled size={size === 'lg' ? '24' : '16'} color=\"icon/negative\" />\n              </Select.Indicator>\n            )}\n            {state === 'warning' && (\n              <Select.Indicator>\n                <IconWarningYellow size={size === 'lg' ? '24' : '16'} />\n              </Select.Indicator>\n            )}\n            <Select.Indicator asChild>\n              <AssetSelectChevron />\n            </Select.Indicator>\n          </Select.IndicatorGroup>\n        </Select.Control>\n        <Portal>\n          <Select.Positioner>\n            <BitkitSelectMenu\n              collection={collection}\n              createItemLabel={createItemLabel}\n              emptyHelperText={emptyHelperText}\n              emptyLabel={emptyLabel}\n              isLoading={isLoading}\n              onCreateItem={onCreateItem}\n              onSearchChange={onSearchChange}\n              searchValue={searchValue}\n              size={size}\n            />\n          </Select.Positioner>\n        </Portal>\n      </Select.Root>\n    </BitkitField>\n  );\n});\n\nBitkitSelect.displayName = 'BitkitSelect';\n\nexport default BitkitSelect;\n"],"mappings":";;;;;;;;;;;;AAuCA,IAAM,eAAe,EAAE,aAAa,OAAO,WAA6B;CAEtE,MAAM,QADS,iBACD,EAAO;CAErB,MAAM,OAAO,MAAM,IAAI;CACvB,MAAM,QAAQ,MAAM,IAAI;CAExB,MAAM,WAAW,SAAS,OAAO,OAAO;CAExC,OAAO,MAAM,KACX,oBAAC,OAAO,WAAR;EAAkB,aAAa,eAAe,UAAU,aAAa,mBAAmB;YACtF,qBAAC,KAAD;GAAK,SAAQ;GAAO,YAAW;GAAS,KAAI;aAA5C,CACG,QAAQ,oBAAC,MAAD,EAAM,MAAM,SAAW,CAAA,GAC/B,KACE;;CACW,CAAA,IAElB,oBAAC,OAAO,WAAR,EAAkB,aAAa,gBAAgB,UAAU,aAAa,mBAAmB,oBAAsB,CAAA;AAEnH;AAEA,IAAM,eAAe,YAA+C,OAA0B,QAAQ;CACpG,MAAM,EACJ,iBACA,cACA,iBACA,YACA,WACA,OACA,cACA,gBACA,eACA,aACA,aACA,aACA,MACA,OACA,cACA,OACA,GAAG,eACD;CAEJ,MAAM,aAAa,qBAAqB;EACtC;EACA,UAAU,SAAS,KAAK,SAAS;EACjC,iBAAiB,SAAS,CAAC,CAAC,KAAK;CACnC,CAAC;CAED,MAAM,YAAY,UAAU,WAAW,CAAC,CAAC,WAAW;CAEpD,OACE,oBAAC,aAAD;EAAkB;EAAY;EAAO,GAAI;YACvC,qBAAC,OAAO,MAAR;GACc;GACN;GACN,GAAI;GACJ,cAAc,eAAe,CAAC,YAAY,IAAI,KAAA;GAC9C,UAAU,UAAU;GACpB,SAAS;GACT,gBAAgB,WAAW,gBAAgB,OAAO,MAAM,EAAE;GAC1D,UAAU,UAAU;GAGpB,kBAAkB,EAAE,iBAAiB,WAAW,GAAG,eAAe,EAAE,OAAO,UAAU,CAAC;GACtF,OAAO,QAAQ,CAAC,KAAK,IAAI,KAAA;aAZ3B;IAcE,oBAAC,OAAO,cAAR,CAAsB,CAAA;IACtB,qBAAC,OAAO,SAAR;KAAgB,WAAU;eAA1B,CACE,oBAAC,OAAO,SAAR;MAAgB,GAAI;gBAClB,oBAAC,aAAD;OAA0B;OAAmB;OAAa;MAAQ,CAAA;KACpD,CAAA,GAChB,qBAAC,OAAO,gBAAR,EAAA,UAAA;MACG,UAAU,WACT,oBAAC,OAAO,WAAR,EAAA,UACE,oBAAC,uBAAD;OAAuB,MAAM,SAAS,OAAO,OAAO;OAAM,OAAM;MAAiB,CAAA,EACjE,CAAA;MAEnB,UAAU,aACT,oBAAC,OAAO,WAAR,EAAA,UACE,oBAAC,mBAAD,EAAmB,MAAM,SAAS,OAAO,OAAO,KAAO,CAAA,EACvC,CAAA;MAEpB,oBAAC,OAAO,WAAR;OAAkB,SAAA;iBAChB,oBAAC,oBAAD,CAAqB,CAAA;MACL,CAAA;KACG,EAAA,CAAA,CACT;;IAChB,oBAAC,QAAD,EAAA,UACE,oBAAC,OAAO,YAAR,EAAA,UACE,oBAAC,kBAAD;KACc;KACK;KACA;KACL;KACD;KACG;KACE;KACH;KACP;IACP,CAAA,EACgB,CAAA,EACb,CAAA;GACG;;CACF,CAAA;AAEjB,CAAC;AAED,aAAa,cAAc"}
+{"version":3,"file":"BitkitSelect.js","names":[],"sources":["../../../lib/components/BitkitSelect/BitkitSelect.tsx"],"sourcesContent":["import { createListCollection } from '@chakra-ui/react/collection';\nimport { Portal } from '@chakra-ui/react/portal';\nimport { Select, type SelectRootProps, type SelectTriggerProps, useSelectContext } from '@chakra-ui/react/select';\nimport { Text } from '@chakra-ui/react/text';\nimport { forwardRef } from 'react';\n\nimport { IconErrorCircleFilled, IconWarningYellow } from '../../icons';\nimport AssetSelectChevron from '../../utilities/AssetSelectChevron.tsx';\nimport { withSubComponents } from '../../utilities/withSubComponents.ts';\nimport BitkitField, { type BitkitFieldProps } from '../BitkitField/BitkitField.tsx';\nimport BitkitSelectMenu, {\n  type BitkitSelectMenuEmptyStateProps,\n  type BitkitSelectMenuItemProps,\n  type BitkitSelectMenuSearchProps,\n} from '../BitkitSelectMenu/BitkitSelectMenu.tsx';\nimport BitkitSelectMenuAction, {\n  type BitkitSelectMenuActionChild,\n} from '../BitkitSelectMenu/BitkitSelectMenuAction.tsx';\n\nexport type BitkitSelectTriggerProps = SelectTriggerProps;\n\nexport type BitkitSelectProps = Omit<BitkitFieldProps, 'children' | 'state'> & {\n  children?: BitkitSelectMenuActionChild;\n  defaultValue?: string;\n  isLoading?: boolean;\n  items: Array<BitkitSelectMenuItemProps>;\n  onValueChange?: (newVal: string) => void;\n  placeholder?: string;\n  selectProps?: Omit<SelectRootProps, 'collection' | 'defaultValue' | 'onValueChange' | 'value'>;\n  size?: 'md' | 'lg';\n  state?: 'disabled' | 'error' | 'readOnly' | 'warning';\n  triggerProps?: BitkitSelectTriggerProps;\n  value?: string;\n} & BitkitSelectMenuSearchProps &\n  BitkitSelectMenuEmptyStateProps;\n\ntype SelectValueProps = {\n  placeholder?: string;\n  size: BitkitSelectProps['size'];\n  state?: BitkitSelectProps['state'];\n};\n\nconst SelectValue = ({ placeholder, state, size }: SelectValueProps) => {\n  const select = useSelectContext();\n  const items = select.selectedItems as Array<BitkitSelectMenuItemProps>;\n\n  const Icon = items[0]?.icon;\n  const label = items[0]?.label;\n\n  const iconSize = size === 'md' ? '16' : '24';\n\n  return items[0] ? (\n    <Select.ValueText placeholder={placeholder ?? (state === 'readOnly' ? '(not selected)' : 'Select an option')}>\n      {Icon && <Icon size={iconSize} flexShrink={0} />}\n      <Text as=\"span\" overflow=\"hidden\" textOverflow=\"ellipsis\" whiteSpace=\"nowrap\" minWidth={0}>\n        {label}\n      </Text>\n    </Select.ValueText>\n  ) : (\n    <Select.ValueText placeholder={placeholder ?? (state === 'readOnly' ? '(not selected)' : 'Select an option')} />\n  );\n};\n\nconst BitkitSelect = forwardRef<HTMLDivElement, BitkitSelectProps>((props: BitkitSelectProps, ref) => {\n  const {\n    children,\n    defaultValue,\n    emptyHelperText,\n    emptyLabel,\n    isLoading,\n    items,\n    onSearchChange,\n    onValueChange,\n    searchValue,\n    placeholder,\n    selectProps,\n    size,\n    state,\n    triggerProps,\n    value,\n    ...fieldProps\n  } = props;\n\n  const collection = createListCollection({\n    items,\n    groupBy: (item) => item.group || '',\n    isItemDisabled: (item) => !!item.disabled,\n  });\n\n  const isInvalid = state === 'error' || !!fieldProps.errorText;\n\n  return (\n    <BitkitField ref={ref} state={state} {...fieldProps}>\n      <Select.Root\n        collection={collection}\n        size={size}\n        {...selectProps}\n        defaultValue={defaultValue ? [defaultValue] : undefined}\n        disabled={state === 'disabled'}\n        hasStatusIcon={state === 'error' || state === 'warning'}\n        invalid={isInvalid}\n        onValueChange={(newVal) => onValueChange?.(newVal.value[0])}\n        readOnly={state === 'readOnly'}\n        // Bypass Zag's isScrollable(contentEl) gate — our Content is overflow:hidden flex\n        // column, so the real scroll container is itemList. See BitkitMultiselect for why.\n        scrollToIndexFn={({ getElement }) => getElement()?.scrollIntoView({ block: 'nearest' })}\n        value={value ? [value] : undefined}\n      >\n        <Select.HiddenSelect />\n        <Select.Control className=\"group\">\n          <Select.Trigger {...triggerProps}>\n            <SelectValue placeholder={placeholder} size={size} state={state} />\n          </Select.Trigger>\n          <Select.IndicatorGroup>\n            {state === 'error' && (\n              <Select.Indicator>\n                <IconErrorCircleFilled size={size === 'lg' ? '24' : '16'} color=\"icon/negative\" />\n              </Select.Indicator>\n            )}\n            {state === 'warning' && (\n              <Select.Indicator>\n                <IconWarningYellow size={size === 'lg' ? '24' : '16'} />\n              </Select.Indicator>\n            )}\n            <Select.Indicator asChild>\n              <AssetSelectChevron />\n            </Select.Indicator>\n          </Select.IndicatorGroup>\n        </Select.Control>\n        <Portal>\n          <Select.Positioner>\n            <BitkitSelectMenu\n              collection={collection}\n              emptyHelperText={emptyHelperText}\n              emptyLabel={emptyLabel}\n              isLoading={isLoading}\n              onSearchChange={onSearchChange}\n              searchValue={searchValue}\n              size={size}\n            >\n              {children}\n            </BitkitSelectMenu>\n          </Select.Positioner>\n        </Portal>\n      </Select.Root>\n    </BitkitField>\n  );\n});\n\nBitkitSelect.displayName = 'BitkitSelect';\n\nexport default withSubComponents(BitkitSelect, { Action: BitkitSelectMenuAction });\n"],"mappings":";;;;;;;;;;;;;;AA0CA,IAAM,eAAe,EAAE,aAAa,OAAO,WAA6B;CAEtE,MAAM,QADS,iBACD,EAAO;CAErB,MAAM,OAAO,MAAM,IAAI;CACvB,MAAM,QAAQ,MAAM,IAAI;CAExB,MAAM,WAAW,SAAS,OAAO,OAAO;CAExC,OAAO,MAAM,KACX,qBAAC,OAAO,WAAR;EAAkB,aAAa,gBAAgB,UAAU,aAAa,mBAAmB;YAAzF,CACG,QAAQ,oBAAC,MAAD;GAAM,MAAM;GAAU,YAAY;EAAI,CAAA,GAC/C,oBAAC,MAAD;GAAM,IAAG;GAAO,UAAS;GAAS,cAAa;GAAW,YAAW;GAAS,UAAU;aACrF;EACG,CAAA,CACU;MAElB,oBAAC,OAAO,WAAR,EAAkB,aAAa,gBAAgB,UAAU,aAAa,mBAAmB,oBAAsB,CAAA;AAEnH;AAEA,IAAM,eAAe,YAA+C,OAA0B,QAAQ;CACpG,MAAM,EACJ,UACA,cACA,iBACA,YACA,WACA,OACA,gBACA,eACA,aACA,aACA,aACA,MACA,OACA,cACA,OACA,GAAG,eACD;CAEJ,MAAM,aAAa,qBAAqB;EACtC;EACA,UAAU,SAAS,KAAK,SAAS;EACjC,iBAAiB,SAAS,CAAC,CAAC,KAAK;CACnC,CAAC;CAED,MAAM,YAAY,UAAU,WAAW,CAAC,CAAC,WAAW;CAEpD,OACE,oBAAC,aAAD;EAAkB;EAAY;EAAO,GAAI;YACvC,qBAAC,OAAO,MAAR;GACc;GACN;GACN,GAAI;GACJ,cAAc,eAAe,CAAC,YAAY,IAAI,KAAA;GAC9C,UAAU,UAAU;GACpB,eAAe,UAAU,WAAW,UAAU;GAC9C,SAAS;GACT,gBAAgB,WAAW,gBAAgB,OAAO,MAAM,EAAE;GAC1D,UAAU,UAAU;GAGpB,kBAAkB,EAAE,iBAAiB,WAAW,GAAG,eAAe,EAAE,OAAO,UAAU,CAAC;GACtF,OAAO,QAAQ,CAAC,KAAK,IAAI,KAAA;aAb3B;IAeE,oBAAC,OAAO,cAAR,CAAsB,CAAA;IACtB,qBAAC,OAAO,SAAR;KAAgB,WAAU;eAA1B,CACE,oBAAC,OAAO,SAAR;MAAgB,GAAI;gBAClB,oBAAC,aAAD;OAA0B;OAAmB;OAAa;MAAQ,CAAA;KACpD,CAAA,GAChB,qBAAC,OAAO,gBAAR,EAAA,UAAA;MACG,UAAU,WACT,oBAAC,OAAO,WAAR,EAAA,UACE,oBAAC,uBAAD;OAAuB,MAAM,SAAS,OAAO,OAAO;OAAM,OAAM;MAAiB,CAAA,EACjE,CAAA;MAEnB,UAAU,aACT,oBAAC,OAAO,WAAR,EAAA,UACE,oBAAC,mBAAD,EAAmB,MAAM,SAAS,OAAO,OAAO,KAAO,CAAA,EACvC,CAAA;MAEpB,oBAAC,OAAO,WAAR;OAAkB,SAAA;iBAChB,oBAAC,oBAAD,CAAqB,CAAA;MACL,CAAA;KACG,EAAA,CAAA,CACT;;IAChB,oBAAC,QAAD,EAAA,UACE,oBAAC,OAAO,YAAR,EAAA,UACE,oBAAC,kBAAD;KACc;KACK;KACL;KACD;KACK;KACH;KACP;KAEL;IACe,CAAA,EACD,CAAA,EACb,CAAA;GACG;;CACF,CAAA;AAEjB,CAAC;AAED,aAAa,cAAc;AAE3B,IAAA,uBAAe,kBAAkB,cAAc,EAAE,QAAQ,uBAAuB,CAAC"}

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

@@ -1,10 +1,8 @@
 import { ListCollection } from '@chakra-ui/react/collection';
 import { SelectContentProps } from '@chakra-ui/react/select';
 import { BitkitIconComponent } from '../../icons';
-export type BitkitSelectMenuCreateItemProps = {
-    createItemLabel?: string;
-    onCreateItem?: () => void;
-};
+import { BitkitSelectMenuActionChild } from './BitkitSelectMenuAction';
+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;
@@ -25,6 +23,7 @@ export type BitkitSelectMenuEmptyStateProps = {
     emptyHelperText?: string;
 };
 export type BitkitSelectMenuProps = {
+    children?: BitkitSelectMenuActionChild;
     collection: ListCollection<BitkitSelectMenuItemProps>;
     /** Forwarded to the underlying Select/Combobox.Content. Kept for internal callers
      *  (e.g. BitkitCalendar's in-grid selects that need to tweak max-height / width). The
@@ -33,8 +32,9 @@ export type BitkitSelectMenuProps = {
     isLoading?: boolean;
     size?: 'md' | 'lg';
     variant?: 'select' | 'combobox';
-} & BitkitSelectMenuCreateItemProps & BitkitSelectMenuSearchProps & BitkitSelectMenuEmptyStateProps;
+} & BitkitSelectMenuSearchProps & BitkitSelectMenuEmptyStateProps;
 declare const BitkitSelectMenu: import('react').ForwardRefExoticComponent<{
+    children?: BitkitSelectMenuActionChild;
     collection: ListCollection<BitkitSelectMenuItemProps>;
     /** Forwarded to the underlying Select/Combobox.Content. Kept for internal callers
      *  (e.g. BitkitCalendar's in-grid selects that need to tweak max-height / width). The
@@ -43,5 +43,5 @@ declare const BitkitSelectMenu: import('react').ForwardRefExoticComponent<{
     isLoading?: boolean;
     size?: "md" | "lg";
     variant?: "select" | "combobox";
-} & BitkitSelectMenuCreateItemProps & BitkitSelectMenuSearchProps & BitkitSelectMenuEmptyStateProps & import('react').RefAttributes<HTMLDivElement>>;
+} & BitkitSelectMenuSearchProps & BitkitSelectMenuEmptyStateProps & import('react').RefAttributes<HTMLDivElement>>;
 export default BitkitSelectMenu;

package/dist/components/BitkitSelectMenu/BitkitSelectMenu.js

@@ -11,7 +11,7 @@ import { Select } from "@chakra-ui/react/select";
 import { Combobox } from "@chakra-ui/react/combobox";
 //#region lib/components/BitkitSelectMenu/BitkitSelectMenu.tsx
 var BitkitSelectMenu = forwardRef((props, ref) => {
-	const { collection, variant = "select", size, ...shellProps } = props;
+	const { children, collection, variant = "select", size, ...shellProps } = props;
 	const NS = variant === "combobox" ? Combobox : Select;
 	const styles = useSlotRecipe({ key: "select" })({ size });
 	const iconSize = size === "md" ? "16" : "24";
@@ -28,7 +28,8 @@ var BitkitSelectMenu = forwardRef((props, ref) => {
 		}, item.value),
 		size,
 		styles,
-		...shellProps
+		...shellProps,
+		children
 	});
 });
 BitkitSelectMenu.displayName = "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 { forwardRef } from 'react';\n\nimport { type BitkitIconComponent, IconCheck } from '../../icons';\nimport BitkitAvatar from '../BitkitAvatar/BitkitAvatar';\nimport { SelectMenuShell } from './SelectMenuShell';\n\nexport type BitkitSelectMenuCreateItemProps = {\n  createItemLabel?: string;\n  onCreateItem?: () => void;\n};\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 BitkitSelectMenuItemProps = {\n  value: string;\n  label: string;\n  group?: string;\n  icon?: BitkitIconComponent;\n  avatar?: string;\n  helperText?: string;\n  disabled?: boolean;\n  loading?: boolean;\n};\n\nexport type BitkitSelectMenuEmptyStateProps = {\n  emptyLabel?: string;\n  emptyHelperText?: string;\n};\n\nexport type BitkitSelectMenuProps = {\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} & BitkitSelectMenuCreateItemProps &\n  BitkitSelectMenuSearchProps &\n  BitkitSelectMenuEmptyStateProps;\n\nconst BitkitSelectMenu = forwardRef<HTMLDivElement, BitkitSelectMenuProps>((props, ref) => {\n  const { 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 iconSize = size === 'md' ? '16' : '24';\n\n  return (\n    <SelectMenuShell\n      NS={NS}\n      collection={collection}\n      contentRef={ref}\n      iconSize={iconSize}\n      renderItem={(item) => <SelectMenuItem key={item.value} NS={NS} item={item} iconSize={iconSize} styles={styles} />}\n      size={size}\n      styles={styles}\n      {...shellProps}\n    />\n  );\n});\n\nBitkitSelectMenu.displayName = 'BitkitSelectMenu';\n\ntype SelectMenuItemRenderProps = {\n  NS: typeof Select | typeof Combobox;\n  item: BitkitSelectMenuItemProps;\n  iconSize: '16' | '24';\n  styles: Record<string, SystemStyleObject>;\n};\n\nconst SelectMenuItem = ({ NS, item, iconSize, styles }: SelectMenuItemRenderProps) => {\n  const Icon = item.icon;\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\" 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      {item.avatar && (\n        <Box data-slot=\"avatar\" css={{ '[data-disabled] &': { opacity: 0.5 } }}>\n          <BitkitAvatar variant=\"image\" src={item.avatar} name={item.label} size={iconSize === '24' ? '32' : '24'} />\n        </Box>\n      )}\n      <Box css={styles.itemContent}>\n        <Box display=\"flex\" alignItems=\"center\" gap=\"8\">\n          {Icon && !item.avatar && <Icon color=\"icon/primary\" 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      <NS.ItemIndicator asChild>\n        <IconCheck size={iconSize} css={styles.itemIndicator} />\n      </NS.ItemIndicator>\n    </NS.Item>\n  );\n};\n\nexport default BitkitSelectMenu;\n"],"mappings":";;;;;;;;;;;;AAqDA,IAAM,mBAAmB,YAAmD,OAAO,QAAQ;CACzF,MAAM,EAAE,YAAY,UAAU,UAAU,MAAM,GAAG,eAAe;CAChE,MAAM,KAAK,YAAY,aAAa,WAAW;CAE/C,MAAM,SADS,cAAc,EAAE,KAAK,SAAS,CAC9B,EAAO,EAAE,KAAK,CAAC;CAC9B,MAAM,WAAW,SAAS,OAAO,OAAO;CAExC,OACE,oBAAC,iBAAD;EACM;EACQ;EACZ,YAAY;EACF;EACV,aAAa,SAAS,oBAAC,gBAAD;GAAqC;GAAU;GAAgB;GAAkB;EAAS,GAArE,KAAK,KAAgE;EAC1G;EACE;EACR,GAAI;CACL,CAAA;AAEL,CAAC;AAED,iBAAiB,cAAc;AAS/B,IAAM,kBAAkB,EAAE,IAAI,MAAM,UAAU,aAAwC;CACpF,MAAM,OAAO,KAAK;CAElB,IAAI,KAAK,SAGP,OACE,qBAAC,KAAD;EAAK,KAAK,OAAO;YAAjB,CACE,oBAAC,SAAD;GAAS,SAAQ;GAAS,KAAK,OAAO;EAAc,CAAA,GACpD,oBAAC,MAAD;GAAM,KAAK,OAAO;aAAkB;EAAgB,CAAA,CACjD;;CAIT,OACE,qBAAC,GAAG,MAAJ;EAAS,KAAK,OAAO;EAAY;YAAjC;GACG,KAAK,UACJ,oBAAC,KAAD;IAAK,aAAU;IAAS,KAAK,EAAE,qBAAqB,EAAE,SAAS,GAAI,EAAE;cACnE,oBAAC,cAAD;KAAc,SAAQ;KAAQ,KAAK,KAAK;KAAQ,MAAM,KAAK;KAAO,MAAM,aAAa,OAAO,OAAO;IAAO,CAAA;GACvG,CAAA;GAEP,qBAAC,KAAD;IAAK,KAAK,OAAO;cAAjB,CACE,qBAAC,KAAD;KAAK,SAAQ;KAAO,YAAW;KAAS,KAAI;eAA5C,CACG,QAAQ,CAAC,KAAK,UAAU,oBAAC,MAAD;MAAM,OAAM;MAAe,MAAM;KAAW,CAAA,GACrE,oBAAC,MAAD;MAAM,KAAK,OAAO;gBAAY,KAAK;KAAY,CAAA,CAC5C;QACJ,KAAK,cAAc,oBAAC,MAAD;KAAM,KAAK,OAAO;eAAiB,KAAK;IAAiB,CAAA,CAC1E;;GACL,oBAAC,GAAG,eAAJ;IAAkB,SAAA;cAChB,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 { forwardRef } from 'react';\n\nimport { type BitkitIconComponent, IconCheck } from '../../icons';\nimport BitkitAvatar from '../BitkitAvatar/BitkitAvatar';\nimport { type BitkitSelectMenuActionChild } from './BitkitSelectMenuAction';\nimport { SelectMenuShell } 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 BitkitSelectMenuItemProps = {\n  value: string;\n  label: string;\n  group?: string;\n  icon?: BitkitIconComponent;\n  avatar?: string;\n  helperText?: string;\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  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 iconSize = size === 'md' ? '16' : '24';\n\n  return (\n    <SelectMenuShell\n      NS={NS}\n      collection={collection}\n      contentRef={ref}\n      iconSize={iconSize}\n      renderItem={(item) => <SelectMenuItem key={item.value} NS={NS} item={item} iconSize={iconSize} styles={styles} />}\n      size={size}\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  item: BitkitSelectMenuItemProps;\n  iconSize: '16' | '24';\n  styles: Record<string, SystemStyleObject>;\n};\n\nconst SelectMenuItem = ({ NS, item, iconSize, styles }: SelectMenuItemRenderProps) => {\n  const Icon = item.icon;\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\" 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      {item.avatar && (\n        <Box data-slot=\"avatar\" css={{ '[data-disabled] &': { opacity: 0.5 } }}>\n          <BitkitAvatar variant=\"image\" src={item.avatar} name={item.label} size={iconSize === '24' ? '32' : '24'} />\n        </Box>\n      )}\n      <Box css={styles.itemContent}>\n        <Box display=\"flex\" alignItems=\"center\" gap=\"8\">\n          {Icon && !item.avatar && <Icon color=\"icon/primary\" 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      <NS.ItemIndicator asChild>\n        <IconCheck size={iconSize} css={styles.itemIndicator} />\n      </NS.ItemIndicator>\n    </NS.Item>\n  );\n};\n\nexport default BitkitSelectMenu;\n"],"mappings":";;;;;;;;;;;;AAmDA,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,EAAO,EAAE,KAAK,CAAC;CAC9B,MAAM,WAAW,SAAS,OAAO,OAAO;CAExC,OACE,oBAAC,iBAAD;EACM;EACQ;EACZ,YAAY;EACF;EACV,aAAa,SAAS,oBAAC,gBAAD;GAAqC;GAAU;GAAgB;GAAkB;EAAS,GAArE,KAAK,KAAgE;EAC1G;EACE;EACR,GAAI;EAEH;CACc,CAAA;AAErB,CAAC;AAED,iBAAiB,cAAc;AAS/B,IAAM,kBAAkB,EAAE,IAAI,MAAM,UAAU,aAAwC;CACpF,MAAM,OAAO,KAAK;CAElB,IAAI,KAAK,SAGP,OACE,qBAAC,KAAD;EAAK,KAAK,OAAO;YAAjB,CACE,oBAAC,SAAD;GAAS,SAAQ;GAAS,KAAK,OAAO;EAAc,CAAA,GACpD,oBAAC,MAAD;GAAM,KAAK,OAAO;aAAkB;EAAgB,CAAA,CACjD;;CAIT,OACE,qBAAC,GAAG,MAAJ;EAAS,KAAK,OAAO;EAAY;YAAjC;GACG,KAAK,UACJ,oBAAC,KAAD;IAAK,aAAU;IAAS,KAAK,EAAE,qBAAqB,EAAE,SAAS,GAAI,EAAE;cACnE,oBAAC,cAAD;KAAc,SAAQ;KAAQ,KAAK,KAAK;KAAQ,MAAM,KAAK;KAAO,MAAM,aAAa,OAAO,OAAO;IAAO,CAAA;GACvG,CAAA;GAEP,qBAAC,KAAD;IAAK,KAAK,OAAO;cAAjB,CACE,qBAAC,KAAD;KAAK,SAAQ;KAAO,YAAW;KAAS,KAAI;eAA5C,CACG,QAAQ,CAAC,KAAK,UAAU,oBAAC,MAAD;MAAM,OAAM;MAAe,MAAM;KAAW,CAAA,GACrE,oBAAC,MAAD;MAAM,KAAK,OAAO;gBAAY,KAAK;KAAY,CAAA,CAC5C;QACJ,KAAK,cAAc,oBAAC,MAAD;KAAM,KAAK,OAAO;eAAiB,KAAK;IAAiB,CAAA,CAC1E;;GACL,oBAAC,GAAG,eAAJ;IAAkB,SAAA;cAChB,oBAAC,WAAD;KAAW,MAAM;KAAU,KAAK,OAAO;IAAgB,CAAA;GACvC,CAAA;EACX;;AAEb"}

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

@@ -0,0 +1,32 @@
+import { SystemStyleObject } from '@chakra-ui/react/styled-system';
+import { ReactElement } from 'react';
+import { BitkitIconComponent } from '../../icons';
+type BitkitSelectMenuActionCommonProps = {
+    icon: BitkitIconComponent;
+    label: string;
+};
+export type BitkitSelectMenuActionAsButtonProps = BitkitSelectMenuActionCommonProps & {
+    href?: undefined;
+    isExternal?: undefined;
+    onClick: () => void;
+};
+export type BitkitSelectMenuActionAsAnchorProps = BitkitSelectMenuActionCommonProps & {
+    href: string;
+    isExternal?: boolean;
+    onClick?: () => void;
+    rel?: string;
+    target?: string;
+};
+export type BitkitSelectMenuActionProps = BitkitSelectMenuActionAsButtonProps | BitkitSelectMenuActionAsAnchorProps;
+export type BitkitSelectMenuActionChild = ReactElement<BitkitSelectMenuActionProps> | false | null;
+type SelectMenuShellContext = {
+    iconSize: '16' | '24';
+    styles: Record<string, SystemStyleObject>;
+};
+declare const SelectMenuShellContextProvider: import('react').Provider<SelectMenuShellContext>;
+export { SelectMenuShellContextProvider };
+declare const BitkitSelectMenuAction: {
+    (props: BitkitSelectMenuActionProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default BitkitSelectMenuAction;

package/dist/components/BitkitSelectMenu/BitkitSelectMenuAction.js

@@ -0,0 +1,49 @@
+import { Box } from "@chakra-ui/react/box";
+import { chakra } from "@chakra-ui/react/styled-system";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext } from "@chakra-ui/react";
+//#region lib/components/BitkitSelectMenu/BitkitSelectMenuAction.tsx
+var [SelectMenuShellContextProvider, useSelectMenuShellContext] = createContext({
+	name: "SelectMenuShellContext",
+	hookName: "useSelectMenuShellContext",
+	providerName: "<BitkitSelectMenu />, <BitkitMultiselectMenu />, <BitkitSelect />, <BitkitMultiselect />, or <BitkitCombobox />"
+});
+var stopMenuSelectionKeys = (event) => {
+	if (event.key === "Enter" || event.key === " ") event.stopPropagation();
+};
+var BitkitSelectMenuAction = (props) => {
+	const { href, icon: Icon, label, onClick } = props;
+	const { iconSize, styles } = useSelectMenuShellContext();
+	if (href !== void 0) {
+		const { isExternal, rel, target } = props;
+		const effectiveTarget = isExternal ? "_blank" : target;
+		const effectiveRel = isExternal ? rel ? `${rel} noreferrer noopener` : "noreferrer noopener" : rel;
+		return /* @__PURE__ */ jsx(Box, {
+			css: styles.actionContainer,
+			children: /* @__PURE__ */ jsxs(chakra.a, {
+				href,
+				target: effectiveTarget,
+				rel: effectiveRel,
+				css: styles.action,
+				onClick,
+				onKeyDown: stopMenuSelectionKeys,
+				children: [/* @__PURE__ */ jsx(Icon, { size: iconSize }), label]
+			})
+		});
+	}
+	return /* @__PURE__ */ jsx(Box, {
+		css: styles.actionContainer,
+		children: /* @__PURE__ */ jsxs(chakra.button, {
+			type: "button",
+			css: styles.action,
+			onClick,
+			onKeyDown: stopMenuSelectionKeys,
+			children: [/* @__PURE__ */ jsx(Icon, { size: iconSize }), label]
+		})
+	});
+};
+BitkitSelectMenuAction.displayName = "BitkitSelectMenu.Action";
+//#endregion
+export { SelectMenuShellContextProvider, BitkitSelectMenuAction as default };
+
+//# sourceMappingURL=BitkitSelectMenuAction.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BitkitSelectMenuAction.js","names":[],"sources":["../../../lib/components/BitkitSelectMenu/BitkitSelectMenuAction.tsx"],"sourcesContent":["// eslint-disable-next-line no-restricted-imports\nimport { createContext } from '@chakra-ui/react';\nimport { Box } from '@chakra-ui/react/box';\nimport { chakra, type SystemStyleObject } from '@chakra-ui/react/styled-system';\nimport { type KeyboardEvent as ReactKeyboardEvent, type ReactElement } from 'react';\n\nimport { type BitkitIconComponent } from '../../icons';\n\ntype BitkitSelectMenuActionCommonProps = {\n  icon: BitkitIconComponent;\n  label: string;\n};\n\nexport type BitkitSelectMenuActionAsButtonProps = BitkitSelectMenuActionCommonProps & {\n  href?: undefined;\n  isExternal?: undefined;\n  onClick: () => void;\n};\n\nexport type BitkitSelectMenuActionAsAnchorProps = BitkitSelectMenuActionCommonProps & {\n  href: string;\n  isExternal?: boolean;\n  onClick?: () => void;\n  rel?: string;\n  target?: string;\n};\n\nexport type BitkitSelectMenuActionProps = BitkitSelectMenuActionAsButtonProps | BitkitSelectMenuActionAsAnchorProps;\n\nexport type BitkitSelectMenuActionChild = ReactElement<BitkitSelectMenuActionProps> | false | null;\n\ntype SelectMenuShellContext = {\n  iconSize: '16' | '24';\n  styles: Record<string, SystemStyleObject>;\n};\n\nconst [SelectMenuShellContextProvider, useSelectMenuShellContext] = createContext<SelectMenuShellContext>({\n  name: 'SelectMenuShellContext',\n  hookName: 'useSelectMenuShellContext',\n  providerName:\n    '<BitkitSelectMenu />, <BitkitMultiselectMenu />, <BitkitSelect />, <BitkitMultiselect />, or <BitkitCombobox />',\n});\n\nexport { SelectMenuShellContextProvider };\n\nconst stopMenuSelectionKeys = (event: ReactKeyboardEvent) => {\n  if (event.key === 'Enter' || event.key === ' ') {\n    event.stopPropagation();\n  }\n};\n\nconst BitkitSelectMenuAction = (props: BitkitSelectMenuActionProps) => {\n  const { href, icon: Icon, label, onClick } = props;\n  const { iconSize, styles } = useSelectMenuShellContext();\n\n  if (href !== undefined) {\n    const { isExternal, rel, target } = props;\n    const effectiveTarget = isExternal ? '_blank' : target;\n    const effectiveRel = isExternal ? (rel ? `${rel} noreferrer noopener` : 'noreferrer noopener') : rel;\n\n    return (\n      <Box css={styles.actionContainer}>\n        <chakra.a\n          href={href}\n          target={effectiveTarget}\n          rel={effectiveRel}\n          css={styles.action}\n          onClick={onClick}\n          onKeyDown={stopMenuSelectionKeys}\n        >\n          <Icon size={iconSize} />\n          {label}\n        </chakra.a>\n      </Box>\n    );\n  }\n\n  return (\n    <Box css={styles.actionContainer}>\n      <chakra.button type=\"button\" css={styles.action} onClick={onClick} onKeyDown={stopMenuSelectionKeys}>\n        <Icon size={iconSize} />\n        {label}\n      </chakra.button>\n    </Box>\n  );\n};\n\nBitkitSelectMenuAction.displayName = 'BitkitSelectMenu.Action';\n\nexport default BitkitSelectMenuAction;\n"],"mappings":";;;;;AAoCA,IAAM,CAAC,gCAAgC,6BAA6B,cAAsC;CACxG,MAAM;CACN,UAAU;CACV,cACE;AACJ,CAAC;AAID,IAAM,yBAAyB,UAA8B;CAC3D,IAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KACzC,MAAM,gBAAgB;AAE1B;AAEA,IAAM,0BAA0B,UAAuC;CACrE,MAAM,EAAE,MAAM,MAAM,MAAM,OAAO,YAAY;CAC7C,MAAM,EAAE,UAAU,WAAW,0BAA0B;CAEvD,IAAI,SAAS,KAAA,GAAW;EACtB,MAAM,EAAE,YAAY,KAAK,WAAW;EACpC,MAAM,kBAAkB,aAAa,WAAW;EAChD,MAAM,eAAe,aAAc,MAAM,GAAG,IAAI,wBAAwB,wBAAyB;EAEjG,OACE,oBAAC,KAAD;GAAK,KAAK,OAAO;aACf,qBAAC,OAAO,GAAR;IACQ;IACN,QAAQ;IACR,KAAK;IACL,KAAK,OAAO;IACH;IACT,WAAW;cANb,CAQE,oBAAC,MAAD,EAAM,MAAM,SAAW,CAAA,GACtB,KACO;;EACP,CAAA;CAET;CAEA,OACE,oBAAC,KAAD;EAAK,KAAK,OAAO;YACf,qBAAC,OAAO,QAAR;GAAe,MAAK;GAAS,KAAK,OAAO;GAAiB;GAAS,WAAW;aAA9E,CACE,oBAAC,MAAD,EAAM,MAAM,SAAW,CAAA,GACtB,KACY;;CACZ,CAAA;AAET;AAEA,uBAAuB,cAAc"}

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

@@ -3,17 +3,20 @@ 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 { BitkitSelectMenuCreateItemProps, BitkitSelectMenuEmptyStateProps, BitkitSelectMenuSearchProps } from './BitkitSelectMenu';
+import { BitkitSelectMenuEmptyStateProps, BitkitSelectMenuSearchProps } from './BitkitSelectMenu';
+import { BitkitSelectMenuActionChild } from './BitkitSelectMenuAction';
 /**
  * Internal shared shell for BitkitSelectMenu and BitkitMultiselectMenu.
- * Handles Content wrapper, search, loading, empty state, groups, and create button —
- * the caller only provides per-item rendering via renderItem.
+ * Handles Content wrapper, search, loading, empty state, groups, and the action slot —
+ * the caller only provides per-item rendering via renderItem and any sub-components
+ * (e.g. <BitkitSelectMenu.Action />) via children.
  */
 export type SelectMenuShellProps<T extends {
     value: string;
     group?: string;
 }> = {
     NS: typeof Select | typeof Combobox;
+    children?: BitkitSelectMenuActionChild;
     collection: ListCollection<T>;
     contentProps?: SelectContentProps;
     contentRef?: Ref<HTMLDivElement>;
@@ -22,8 +25,8 @@ export type SelectMenuShellProps<T extends {
     renderItem: (item: T) => ReactNode;
     size?: 'md' | 'lg';
     styles: Record<string, SystemStyleObject>;
-} & BitkitSelectMenuCreateItemProps & BitkitSelectMenuSearchProps & BitkitSelectMenuEmptyStateProps;
+} & BitkitSelectMenuSearchProps & BitkitSelectMenuEmptyStateProps;
 export declare const SelectMenuShell: <T extends {
     value: string;
     group?: string;
-}>({ NS, collection, contentProps, contentRef, createItemLabel, emptyHelperText, emptyLabel, iconSize, isLoading, onCreateItem, onSearchChange, renderItem, searchValue, size, styles, }: SelectMenuShellProps<T>) => import("react/jsx-runtime").JSX.Element;
+}>({ NS, children, collection, contentProps, contentRef, emptyHelperText, emptyLabel, iconSize, isLoading, onSearchChange, renderItem, searchValue, size, styles, }: SelectMenuShellProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/BitkitSelectMenu/SelectMenuShell.js

@@ -1,88 +1,78 @@
 import IconCross from "../../icons/IconCross.js";
 import IconMagnifier from "../../icons/IconMagnifier.js";
-import IconPlus from "../../icons/IconPlus.js";
 import BitkitGroupHeading from "../BitkitGroupHeading/BitkitGroupHeading.js";
+import { SelectMenuShellContextProvider } from "./BitkitSelectMenuAction.js";
 import { Box } from "@chakra-ui/react/box";
 import { chakra } from "@chakra-ui/react/styled-system";
 import { Text } from "@chakra-ui/react/text";
+import { isValidElement } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Spinner } from "@chakra-ui/react/spinner";
 //#region lib/components/BitkitSelectMenu/SelectMenuShell.tsx
-var SelectMenuShell = ({ NS, collection, contentProps, contentRef, createItemLabel = "Create item", emptyHelperText, emptyLabel = "No matching options", iconSize, isLoading = false, onCreateItem, onSearchChange, renderItem, searchValue, size, styles }) => {
+var SelectMenuShell = ({ NS, children, collection, contentProps, contentRef, emptyHelperText, emptyLabel = "No matching options", iconSize, isLoading = false, onSearchChange, renderItem, searchValue, size, styles }) => {
 	const isEmpty = collection.size === 0;
-	return /* @__PURE__ */ jsxs(NS.Content, {
-		css: styles.content,
-		ref: contentRef,
-		...contentProps,
-		children: [
-			!onSearchChange && onCreateItem && /* @__PURE__ */ jsx("span", {
-				"data-autofocus": "",
-				tabIndex: -1,
-				"aria-hidden": "true"
-			}),
-			onSearchChange && /* @__PURE__ */ jsx(SelectMenuSearch, {
-				iconSize,
-				styles,
-				value: searchValue ?? "",
-				onSearchChange
-			}),
-			/* @__PURE__ */ jsxs(Box, {
-				css: styles.itemList,
-				children: [
-					isLoading && /* @__PURE__ */ jsxs(Box, {
-						display: "flex",
-						alignItems: "center",
-						gap: "12",
-						justifyContent: "left",
-						css: styles.item,
-						children: [/* @__PURE__ */ jsx(Spinner, { variant: "purple" }), /* @__PURE__ */ jsx(Text, {
-							color: "text/secondary",
-							textStyle: size === "md" ? "body/md/regular" : "body/lg/regular",
-							children: "Loading..."
-						})]
-					}),
-					!isLoading && isEmpty && /* @__PURE__ */ jsxs(Box, {
-						css: styles.emptyState,
-						children: [/* @__PURE__ */ jsx(Text, {
-							css: styles.itemLabel,
-							children: emptyLabel
-						}), emptyHelperText && /* @__PURE__ */ jsx(Text, {
-							css: styles.itemHelperText,
-							children: emptyHelperText
-						})]
-					}),
-					!isLoading && !isEmpty && collection.group().map(([type, group]) => /* @__PURE__ */ jsxs(NS.ItemGroup, { children: [type && /* @__PURE__ */ jsx(NS.ItemGroupLabel, {
-						asChild: true,
-						children: /* @__PURE__ */ jsx(BitkitGroupHeading, {
-							label: type,
-							paddingBlock: "12",
-							paddingInline: "16"
-						})
-					}), group.map(renderItem)] }, type))
-				]
-			}),
-			onCreateItem && /* @__PURE__ */ jsx(Box, {
-				css: styles.createItemContainer,
-				children: /* @__PURE__ */ jsxs(chakra.button, {
-					type: "button",
-					css: styles.createItem,
-					onClick: onCreateItem,
-					onKeyDown: stopMenuSelectionKeys,
-					children: [/* @__PURE__ */ jsx(IconPlus, { size: iconSize }), createItemLabel]
-				})
-			})
-		]
+	const hasAction = isValidElement(children);
+	return /* @__PURE__ */ jsx(SelectMenuShellContextProvider, {
+		value: {
+			iconSize,
+			styles
+		},
+		children: /* @__PURE__ */ jsxs(NS.Content, {
+			css: styles.content,
+			ref: contentRef,
+			...contentProps,
+			children: [
+				!onSearchChange && hasAction && /* @__PURE__ */ jsx("span", {
+					"data-autofocus": "",
+					tabIndex: -1,
+					"aria-hidden": "true"
+				}),
+				onSearchChange && /* @__PURE__ */ jsx(SelectMenuSearch, {
+					iconSize,
+					styles,
+					value: searchValue ?? "",
+					onSearchChange
+				}),
+				/* @__PURE__ */ jsxs(Box, {
+					css: styles.itemList,
+					children: [
+						isLoading && /* @__PURE__ */ jsxs(Box, {
+							display: "flex",
+							alignItems: "center",
+							gap: "12",
+							justifyContent: "left",
+							css: styles.item,
+							children: [/* @__PURE__ */ jsx(Spinner, { variant: "purple" }), /* @__PURE__ */ jsx(Text, {
+								color: "text/secondary",
+								textStyle: size === "md" ? "body/md/regular" : "body/lg/regular",
+								children: "Loading..."
+							})]
+						}),
+						!isLoading && isEmpty && /* @__PURE__ */ jsxs(Box, {
+							css: styles.emptyState,
+							children: [/* @__PURE__ */ jsx(Text, {
+								css: styles.itemLabel,
+								children: emptyLabel
+							}), emptyHelperText && /* @__PURE__ */ jsx(Text, {
+								css: styles.itemHelperText,
+								children: emptyHelperText
+							})]
+						}),
+						!isLoading && !isEmpty && collection.group().map(([type, group]) => /* @__PURE__ */ jsxs(NS.ItemGroup, { children: [type && /* @__PURE__ */ jsx(NS.ItemGroupLabel, {
+							asChild: true,
+							children: /* @__PURE__ */ jsx(BitkitGroupHeading, {
+								label: type,
+								paddingBlock: "12",
+								paddingInline: "16"
+							})
+						}), group.map(renderItem)] }, type))
+					]
+				}),
+				children
+			]
+		})
 	});
 };
-/**
-* Zag's Select.Content keyDown handler fires ITEM.CLICK and preventDefaults on Enter/Space
-* regardless of which descendant is focused. For the create row (a real <button> sibling of
-* the items list), that hijacks its native activation. Stopping propagation at the element
-* keeps its own onClick firing via the browser's native keyboard-activation path.
-*/
-var stopMenuSelectionKeys = (event) => {
-	if (event.key === "Enter" || event.key === " ") event.stopPropagation();
-};
 var SelectMenuSearch = ({ iconSize, onSearchChange, styles, value }) => /* @__PURE__ */ jsxs(Box, {
 	css: styles.searchInputGroup,
 	children: [

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, type KeyboardEvent as ReactKeyboardEvent, type ReactNode, type Ref } from 'react';\n\nimport { IconCross, IconMagnifier, IconPlus } from '../../icons';\nimport BitkitGroupHeading from '../BitkitGroupHeading/BitkitGroupHeading';\nimport {\n  type BitkitSelectMenuCreateItemProps,\n  type BitkitSelectMenuEmptyStateProps,\n  type BitkitSelectMenuSearchProps,\n} from './BitkitSelectMenu';\n\n/**\n * Internal shared shell for BitkitSelectMenu and BitkitMultiselectMenu.\n * Handles Content wrapper, search, loading, empty state, groups, and create button —\n * the caller only provides per-item rendering via renderItem.\n */\nexport type SelectMenuShellProps<T extends { value: string; group?: string }> = {\n  NS: typeof Select | typeof Combobox;\n  collection: ListCollection<T>;\n  contentProps?: SelectContentProps;\n  contentRef?: Ref<HTMLDivElement>;\n  iconSize: '16' | '24';\n  isLoading?: boolean;\n  renderItem: (item: T) => ReactNode;\n  size?: 'md' | 'lg';\n  styles: Record<string, SystemStyleObject>;\n} & BitkitSelectMenuCreateItemProps &\n  BitkitSelectMenuSearchProps &\n  BitkitSelectMenuEmptyStateProps;\n\nexport const SelectMenuShell = <T extends { value: string; group?: string }>({\n  NS,\n  collection,\n  contentProps,\n  contentRef,\n  createItemLabel = 'Create item',\n  emptyHelperText,\n  emptyLabel = 'No matching options',\n  iconSize,\n  isLoading = false,\n  onCreateItem,\n  onSearchChange,\n  renderItem,\n  searchValue,\n  size,\n  styles,\n}: SelectMenuShellProps<T>) => {\n  const isEmpty = collection.size === 0;\n\n  return (\n    <NS.Content css={styles.content} ref={contentRef} {...contentProps}>\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 create\n        button, 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 && onCreateItem && <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}>\n        {isLoading && (\n          <Box display=\"flex\" alignItems=\"center\" gap=\"12\" justifyContent=\"left\" css={styles.item}>\n            <Spinner variant=\"purple\" />\n            <Text color=\"text/secondary\" textStyle={size === 'md' ? 'body/md/regular' : 'body/lg/regular'}>\n              Loading...\n            </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      {onCreateItem && (\n        <Box css={styles.createItemContainer}>\n          <chakra.button type=\"button\" css={styles.createItem} onClick={onCreateItem} onKeyDown={stopMenuSelectionKeys}>\n            <IconPlus size={iconSize} />\n            {createItemLabel}\n          </chakra.button>\n        </Box>\n      )}\n    </NS.Content>\n  );\n};\n\n/**\n * Zag's Select.Content keyDown handler fires ITEM.CLICK and preventDefaults on Enter/Space\n * regardless of which descendant is focused. For the create row (a real <button> sibling of\n * the items list), that hijacks its native activation. Stopping propagation at the element\n * keeps its own onClick firing via the browser's native keyboard-activation path.\n */\nconst stopMenuSelectionKeys = (event: ReactKeyboardEvent) => {\n  if (event.key === 'Enter' || event.key === ' ') {\n    event.stopPropagation();\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":";;;;;;;;;;AAoCA,IAAa,mBAAgE,EAC3E,IACA,YACA,cACA,YACA,kBAAkB,eAClB,iBACA,aAAa,uBACb,UACA,YAAY,OACZ,cACA,gBACA,YACA,aACA,MACA,aAC6B;CAC7B,MAAM,UAAU,WAAW,SAAS;CAEpC,OACE,qBAAC,GAAG,SAAJ;EAAY,KAAK,OAAO;EAAS,KAAK;EAAY,GAAI;YAAtD;GAQG,CAAC,kBAAkB,gBAAgB,oBAAC,QAAD;IAAM,kBAAe;IAAG,UAAU;IAAI,eAAY;GAAQ,CAAA;GAC7F,kBACC,oBAAC,kBAAD;IACY;IACF;IACR,OAAO,eAAe;IACN;GACjB,CAAA;GAEH,qBAAC,KAAD;IAAK,KAAK,OAAO;cAAjB;KACG,aACC,qBAAC,KAAD;MAAK,SAAQ;MAAO,YAAW;MAAS,KAAI;MAAK,gBAAe;MAAO,KAAK,OAAO;gBAAnF,CACE,oBAAC,SAAD,EAAS,SAAQ,SAAU,CAAA,GAC3B,oBAAC,MAAD;OAAM,OAAM;OAAiB,WAAW,SAAS,OAAO,oBAAoB;iBAAmB;MAEzF,CAAA,CACH;;KAEN,CAAC,aAAa,WACb,qBAAC,KAAD;MAAK,KAAK,OAAO;gBAAjB,CACE,oBAAC,MAAD;OAAM,KAAK,OAAO;iBAAY;MAAiB,CAAA,GAC9C,mBAAmB,oBAAC,MAAD;OAAM,KAAK,OAAO;iBAAiB;MAAsB,CAAA,CAC1E;;KAEN,CAAC,aACA,CAAC,WACD,WAAW,MAAM,EAAE,KAAK,CAAC,MAAM,WAC7B,qBAAC,GAAG,WAAJ,EAAA,UAAA,CACG,QACC,oBAAC,GAAG,gBAAJ;MAAmB,SAAA;gBACjB,oBAAC,oBAAD;OAAoB,OAAO;OAAM,cAAa;OAAK,eAAc;MAAM,CAAA;KACtD,CAAA,GAEpB,MAAM,IAAI,UAAU,CACT,EAAA,GAPK,IAOL,CACf;IACA;;GACJ,gBACC,oBAAC,KAAD;IAAK,KAAK,OAAO;cACf,qBAAC,OAAO,QAAR;KAAe,MAAK;KAAS,KAAK,OAAO;KAAY,SAAS;KAAc,WAAW;eAAvF,CACE,oBAAC,UAAD,EAAU,MAAM,SAAW,CAAA,GAC1B,eACY;;GACZ,CAAA;EAEG;;AAEhB;;;;;;;AAQA,IAAM,yBAAyB,UAA8B;CAC3D,IAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KACzC,MAAM,gBAAgB;AAE1B;AASA,IAAM,oBAAoB,EAAE,UAAU,gBAAgB,QAAQ,YAC5D,qBAAC,KAAD;CAAK,KAAK,OAAO;WAAjB;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;aAEhC,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 } from 'react';\n\nimport { IconCross, IconMagnifier } from '../../icons';\nimport BitkitGroupHeading from '../BitkitGroupHeading/BitkitGroupHeading';\nimport { type BitkitSelectMenuEmptyStateProps, type BitkitSelectMenuSearchProps } from './BitkitSelectMenu';\nimport { type BitkitSelectMenuActionChild, SelectMenuShellContextProvider } from './BitkitSelectMenuAction';\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: '16' | '24';\n  isLoading?: boolean;\n  renderItem: (item: T) => ReactNode;\n  size?: 'md' | 'lg';\n  styles: Record<string, SystemStyleObject>;\n} & BitkitSelectMenuSearchProps &\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  onSearchChange,\n  renderItem,\n  searchValue,\n  size,\n  styles,\n}: SelectMenuShellProps<T>) => {\n  const isEmpty = collection.size === 0;\n  const hasAction = isValidElement(children);\n\n  return (\n    <SelectMenuShellContextProvider value={{ iconSize, styles }}>\n      <NS.Content css={styles.content} ref={contentRef} {...contentProps}>\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}>\n          {isLoading && (\n            <Box display=\"flex\" alignItems=\"center\" gap=\"12\" justifyContent=\"left\" css={styles.item}>\n              <Spinner variant=\"purple\" />\n              <Text color=\"text/secondary\" textStyle={size === 'md' ? 'body/md/regular' : 'body/lg/regular'}>\n                Loading...\n              </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":";;;;;;;;;;;AAkCA,IAAa,mBAAgE,EAC3E,IACA,UACA,YACA,cACA,YACA,iBACA,aAAa,uBACb,UACA,YAAY,OACZ,gBACA,YACA,aACA,MACA,aAC6B;CAC7B,MAAM,UAAU,WAAW,SAAS;CACpC,MAAM,YAAY,eAAe,QAAQ;CAEzC,OACE,oBAAC,gCAAD;EAAgC,OAAO;GAAE;GAAU;EAAO;YACxD,qBAAC,GAAG,SAAJ;GAAY,KAAK,OAAO;GAAS,KAAK;GAAY,GAAI;aAAtD;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;eAAjB;MACG,aACC,qBAAC,KAAD;OAAK,SAAQ;OAAO,YAAW;OAAS,KAAI;OAAK,gBAAe;OAAO,KAAK,OAAO;iBAAnF,CACE,oBAAC,SAAD,EAAS,SAAQ,SAAU,CAAA,GAC3B,oBAAC,MAAD;QAAM,OAAM;QAAiB,WAAW,SAAS,OAAO,oBAAoB;kBAAmB;OAEzF,CAAA,CACH;;MAEN,CAAC,aAAa,WACb,qBAAC,KAAD;OAAK,KAAK,OAAO;iBAAjB,CACE,oBAAC,MAAD;QAAM,KAAK,OAAO;kBAAY;OAAiB,CAAA,GAC9C,mBAAmB,oBAAC,MAAD;QAAM,KAAK,OAAO;kBAAiB;OAAsB,CAAA,CAC1E;;MAEN,CAAC,aACA,CAAC,WACD,WAAW,MAAM,EAAE,KAAK,CAAC,MAAM,WAC7B,qBAAC,GAAG,WAAJ,EAAA,UAAA,CACG,QACC,oBAAC,GAAG,gBAAJ;OAAmB,SAAA;iBACjB,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;WAAjB;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;aAEhC,oBAAC,WAAD,EAAW,MAAM,SAAW,CAAA;EACf,CAAA;CAEd"}

package/dist/components/BitkitSelectableTag/BitkitSelectableTag.js

@@ -1,3 +1,4 @@
+import { withSubComponents } from "../../utilities/withSubComponents.js";
 import { useRecipe } from "@chakra-ui/react/styled-system";
 import { forwardRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -35,7 +36,7 @@ var BitkitSelectableTagItem = forwardRef((props, ref) => {
 	});
 });
 BitkitSelectableTagItem.displayName = "BitkitSelectableTagItem";
-var BitkitSelectableTag_default = Object.assign(BitkitSelectableTag, { Item: BitkitSelectableTagItem });
+var BitkitSelectableTag_default = withSubComponents(BitkitSelectableTag, { Item: BitkitSelectableTagItem });
 //#endregion
 export { BitkitSelectableTag_default as default };
 

package/dist/components/BitkitSelectableTag/BitkitSelectableTag.js.map

@@ -1 +1 @@
-{"version":3,"file":"BitkitSelectableTag.js","names":[],"sources":["../../../lib/components/BitkitSelectableTag/BitkitSelectableTag.tsx"],"sourcesContent":["import { Checkbox, type CheckboxCheckedChangeDetails, type CheckboxGroupProps } from '@chakra-ui/react/checkbox';\nimport { useRecipe } from '@chakra-ui/react/styled-system';\nimport { forwardRef } from 'react';\n\nimport { type BitkitIconComponent } from '../../icons';\n\n// --- Root (Group) ---\n\nexport interface BitkitSelectableTagProps extends Omit<CheckboxGroupProps, 'disabled'> {\n  state?: 'disabled';\n}\n\nconst BitkitSelectableTag = forwardRef<HTMLDivElement, BitkitSelectableTagProps>((props, ref) => {\n  const { children, state, ...rest } = props;\n  const disabled = state === 'disabled';\n\n  return (\n    <Checkbox.Group ref={ref} disabled={disabled} gap=\"8\" flexDirection=\"row\" flexWrap=\"wrap\" {...rest}>\n      {children}\n    </Checkbox.Group>\n  );\n});\n\nBitkitSelectableTag.displayName = 'BitkitSelectableTag';\n\n// --- Item ---\n\nexport interface BitkitSelectableTagItemProps {\n  children: string;\n  defaultChecked?: boolean;\n  disabled?: boolean;\n  icon?: BitkitIconComponent;\n  onCheckedChange?: (details: CheckboxCheckedChangeDetails) => void;\n  value: string;\n}\n\nconst BitkitSelectableTagItem = forwardRef<HTMLInputElement, BitkitSelectableTagItemProps>((props, ref) => {\n  const { children, defaultChecked, disabled, icon: Icon, onCheckedChange, value } = props;\n  const style = useRecipe({ key: 'selectableTag' })();\n\n  return (\n    <Checkbox.Root\n      css={style}\n      defaultChecked={defaultChecked}\n      disabled={disabled}\n      onCheckedChange={onCheckedChange}\n      unstyled\n      value={value}\n    >\n      <Checkbox.HiddenInput ref={ref} />\n      {!!Icon && <Icon size=\"16\" />}\n      {children}\n    </Checkbox.Root>\n  );\n});\n\nBitkitSelectableTagItem.displayName = 'BitkitSelectableTagItem';\n\nexport default Object.assign(BitkitSelectableTag, {\n  Item: BitkitSelectableTagItem,\n});\n"],"mappings":";;;;;AAYA,IAAM,sBAAsB,YAAsD,OAAO,QAAQ;CAC/F,MAAM,EAAE,UAAU,OAAO,GAAG,SAAS;CACrC,MAAM,WAAW,UAAU;CAE3B,OACE,oBAAC,SAAS,OAAV;EAAqB;EAAe;EAAU,KAAI;EAAI,eAAc;EAAM,UAAS;EAAO,GAAI;EAC3F;CACa,CAAA;AAEpB,CAAC;AAED,oBAAoB,cAAc;AAalC,IAAM,0BAA0B,YAA4D,OAAO,QAAQ;CACzG,MAAM,EAAE,UAAU,gBAAgB,UAAU,MAAM,MAAM,iBAAiB,UAAU;CACnF,MAAM,QAAQ,UAAU,EAAE,KAAK,gBAAgB,CAAC,EAAE;CAElD,OACE,qBAAC,SAAS,MAAV;EACE,KAAK;EACW;EACN;EACO;EACjB,UAAA;EACO;YANT;GAQE,oBAAC,SAAS,aAAV,EAA2B,IAAM,CAAA;GAChC,CAAC,CAAC,QAAQ,oBAAC,MAAD,EAAM,MAAK,KAAM,CAAA;GAC3B;EACY;;AAEnB,CAAC;AAED,wBAAwB,cAAc;AAEtC,IAAA,8BAAe,OAAO,OAAO,qBAAqB,EAChD,MAAM,wBACR,CAAC"}
+{"version":3,"file":"BitkitSelectableTag.js","names":[],"sources":["../../../lib/components/BitkitSelectableTag/BitkitSelectableTag.tsx"],"sourcesContent":["import { Checkbox, type CheckboxCheckedChangeDetails, type CheckboxGroupProps } from '@chakra-ui/react/checkbox';\nimport { useRecipe } from '@chakra-ui/react/styled-system';\nimport { forwardRef } from 'react';\n\nimport { type BitkitIconComponent } from '../../icons';\nimport { withSubComponents } from '../../utilities/withSubComponents';\n\n// --- Root (Group) ---\n\nexport interface BitkitSelectableTagProps extends Omit<CheckboxGroupProps, 'disabled'> {\n  state?: 'disabled';\n}\n\nconst BitkitSelectableTag = forwardRef<HTMLDivElement, BitkitSelectableTagProps>((props, ref) => {\n  const { children, state, ...rest } = props;\n  const disabled = state === 'disabled';\n\n  return (\n    <Checkbox.Group ref={ref} disabled={disabled} gap=\"8\" flexDirection=\"row\" flexWrap=\"wrap\" {...rest}>\n      {children}\n    </Checkbox.Group>\n  );\n});\n\nBitkitSelectableTag.displayName = 'BitkitSelectableTag';\n\n// --- Item ---\n\nexport interface BitkitSelectableTagItemProps {\n  children: string;\n  defaultChecked?: boolean;\n  disabled?: boolean;\n  icon?: BitkitIconComponent;\n  onCheckedChange?: (details: CheckboxCheckedChangeDetails) => void;\n  value: string;\n}\n\nconst BitkitSelectableTagItem = forwardRef<HTMLInputElement, BitkitSelectableTagItemProps>((props, ref) => {\n  const { children, defaultChecked, disabled, icon: Icon, onCheckedChange, value } = props;\n  const style = useRecipe({ key: 'selectableTag' })();\n\n  return (\n    <Checkbox.Root\n      css={style}\n      defaultChecked={defaultChecked}\n      disabled={disabled}\n      onCheckedChange={onCheckedChange}\n      unstyled\n      value={value}\n    >\n      <Checkbox.HiddenInput ref={ref} />\n      {!!Icon && <Icon size=\"16\" />}\n      {children}\n    </Checkbox.Root>\n  );\n});\n\nBitkitSelectableTagItem.displayName = 'BitkitSelectableTagItem';\n\nexport default withSubComponents(BitkitSelectableTag, {\n  Item: BitkitSelectableTagItem,\n});\n"],"mappings":";;;;;;AAaA,IAAM,sBAAsB,YAAsD,OAAO,QAAQ;CAC/F,MAAM,EAAE,UAAU,OAAO,GAAG,SAAS;CACrC,MAAM,WAAW,UAAU;CAE3B,OACE,oBAAC,SAAS,OAAV;EAAqB;EAAe;EAAU,KAAI;EAAI,eAAc;EAAM,UAAS;EAAO,GAAI;EAC3F;CACa,CAAA;AAEpB,CAAC;AAED,oBAAoB,cAAc;AAalC,IAAM,0BAA0B,YAA4D,OAAO,QAAQ;CACzG,MAAM,EAAE,UAAU,gBAAgB,UAAU,MAAM,MAAM,iBAAiB,UAAU;CACnF,MAAM,QAAQ,UAAU,EAAE,KAAK,gBAAgB,CAAC,EAAE;CAElD,OACE,qBAAC,SAAS,MAAV;EACE,KAAK;EACW;EACN;EACO;EACjB,UAAA;EACO;YANT;GAQE,oBAAC,SAAS,aAAV,EAA2B,IAAM,CAAA;GAChC,CAAC,CAAC,QAAQ,oBAAC,MAAD,EAAM,MAAK,KAAM,CAAA;GAC3B;EACY;;AAEnB,CAAC;AAED,wBAAwB,cAAc;AAEtC,IAAA,8BAAe,kBAAkB,qBAAqB,EACpD,MAAM,wBACR,CAAC"}