@bitrise/bitkit-v2 0.3.201 → 0.3.203

package/dist/components/BitkitCombobox/BitkitCombobox.d.ts

@@ -1,14 +1,16 @@
 import { ComboboxRootProps } from '@chakra-ui/react/combobox';
 import { BitkitFieldProps } from '../BitkitField/BitkitField';
-import { BitkitSelectContentProps, BitkitSelectMenuCreateItemProps, BitkitSelectMenuItemProps, BitkitSelectMenuSearchProps } from '../BitkitSelectMenu/BitkitSelectMenu';
+import { BitkitSelectMenuCreateItemProps, BitkitSelectMenuEmptyStateProps, BitkitSelectMenuItemProps, BitkitSelectMenuSearchProps } from '../BitkitSelectMenu/BitkitSelectMenu';
 export type BitkitComboboxProps = Omit<BitkitFieldProps, 'children' | 'state'> & {
-    comboboxProps?: ComboboxRootProps;
-    contentProps?: BitkitSelectContentProps;
+    comboboxProps?: Omit<ComboboxRootProps, 'collection' | 'defaultValue' | 'onValueChange' | 'value'>;
+    defaultValue?: string;
     isLoading?: boolean;
     items: Array<BitkitSelectMenuItemProps>;
+    onValueChange?: (newVal: string | undefined) => void;
     placeholder?: string;
     size?: 'md' | 'lg';
     state?: 'disabled' | 'error' | 'readOnly' | 'warning';
-} & BitkitSelectMenuCreateItemProps & BitkitSelectMenuSearchProps;
+    value?: string;
+} & BitkitSelectMenuCreateItemProps & BitkitSelectMenuSearchProps & BitkitSelectMenuEmptyStateProps;
 declare const BitkitCombobox: import('react').ForwardRefExoticComponent<BitkitComboboxProps & import('react').RefAttributes<HTMLDivElement>>;
 export default BitkitCombobox;

package/dist/components/BitkitCombobox/BitkitCombobox.js

@@ -4,8 +4,6 @@ import IconWarningYellow from "../../icons/IconWarningYellow.js";
 import BitkitCloseButton from "../BitkitCloseButton/BitkitCloseButton.js";
 import BitkitSelectMenu from "../BitkitSelectMenu/BitkitSelectMenu.js";
 import BitkitField from "../BitkitField/BitkitField.js";
-import { useSlotRecipe } from "@chakra-ui/react/styled-system";
-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";
@@ -14,13 +12,13 @@ import { useListCollection } from "@chakra-ui/react/hooks";
 import { useFilter } from "@chakra-ui/react/locale";
 //#region lib/components/BitkitCombobox/BitkitCombobox.tsx
 var BitkitCombobox = forwardRef((props, ref) => {
-	const { comboboxProps, contentProps, createItemHref, createItemLabel, createItemProps, hasSearch, isLoading, items, onCreateItem, onSearchChange, placeholder = "Enter a value or select", size, state, ...fieldProps } = props;
+	const { comboboxProps, createItemLabel, defaultValue, emptyHelperText, emptyLabel, hasSearch, isLoading, items, onCreateItem, onSearchChange, onValueChange, placeholder = "Enter a value or select", searchValue, size, state, value, ...fieldProps } = props;
 	const { contains } = useFilter({ sensitivity: "base" });
 	const { collection, filter } = useListCollection({
 		initialItems: items,
-		filter: (_itemText, filterText, item) => contains(item.label, filterText)
+		filter: (_itemText, filterText, item) => contains(item.label, filterText),
+		isItemDisabled: (item) => !!item.disabled
 	});
-	const styles = useSlotRecipe({ key: "combobox" })({ size });
 	const hasWarning = state === "warning" || !!fieldProps.warningText;
 	const isInvalid = state === "error" || !!fieldProps.errorText;
 	const iconSize = size === "md" ? "16" : "24";
@@ -37,13 +35,17 @@ var BitkitCombobox = forwardRef((props, ref) => {
 		children: /* @__PURE__ */ jsxs(Combobox.Root, {
 			...comboboxProps,
 			collection,
+			defaultValue: defaultValue ? [defaultValue] : void 0,
 			disabled: state === "disabled",
 			invalid: isInvalid,
 			onInputValueChange: (e) => {
 				filter(e.inputValue);
 			},
+			onValueChange: (details) => onValueChange?.(details.value[0]),
 			readOnly: state === "readOnly",
+			scrollToIndexFn: ({ getElement }) => getElement()?.scrollIntoView({ block: "nearest" }),
 			size,
+			value: value ? [value] : void 0,
 			children: [/* @__PURE__ */ jsxs(Combobox.Control, {
 				className: "group",
 				children: [/* @__PURE__ */ jsx(Combobox.Input, { placeholder }), /* @__PURE__ */ jsxs(Combobox.IndicatorGroup, { children: [
@@ -57,24 +59,21 @@ var BitkitCombobox = forwardRef((props, ref) => {
 						children: /* @__PURE__ */ jsx(AssetSelectChevron, {})
 					})
 				] })]
-			}), /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Combobox.Positioner, { children: /* @__PURE__ */ jsxs(Combobox.Content, { children: [/* @__PURE__ */ jsxs(Combobox.Empty, { children: ["No items found ", /* @__PURE__ */ jsx(Text, {
-				css: styles.emptyHelperText,
-				children: "Enter custom value"
-			})] }), /* @__PURE__ */ jsx(BitkitSelectMenu, {
+			}), /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Combobox.Positioner, { children: /* @__PURE__ */ jsx(BitkitSelectMenu, {
 				collection,
-				createItemHref,
 				createItemLabel,
-				createItemProps,
-				contentProps,
+				emptyHelperText,
+				emptyLabel,
 				isLoading,
 				onCreateItem,
 				size,
 				variant: "combobox",
 				...hasSearch ? {
 					hasSearch: true,
-					onSearchChange
+					onSearchChange,
+					searchValue
 				} : { hasSearch: false }
-			})] }) }) })]
+			}) }) })]
 		})
 	});
 });

package/dist/components/BitkitCombobox/BitkitCombobox.js.map

@@ -1 +1 @@
-{"version":3,"file":"BitkitCombobox.js","names":[],"sources":["../../../lib/components/BitkitCombobox/BitkitCombobox.tsx"],"sourcesContent":["import { Combobox, type ComboboxRootProps } from '@chakra-ui/react/combobox';\nimport { useListCollection } from '@chakra-ui/react/hooks';\nimport { useFilter } from '@chakra-ui/react/locale';\nimport { Portal } from '@chakra-ui/react/portal';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { forwardRef } from 'react';\n\nimport IconErrorCircleFilled from '../../icons/IconErrorCircleFilled';\nimport IconWarningYellow from '../../icons/IconWarningYellow';\nimport AssetSelectChevron from '../../utilities/AssetSelectChevron';\nimport BitkitCloseButton from '../BitkitCloseButton/BitkitCloseButton';\nimport BitkitField, { type BitkitFieldProps } from '../BitkitField/BitkitField';\nimport BitkitSelectMenu, {\n  type BitkitSelectContentProps,\n  type BitkitSelectMenuCreateItemProps,\n  type BitkitSelectMenuItemProps,\n  type BitkitSelectMenuSearchProps,\n} from '../BitkitSelectMenu/BitkitSelectMenu';\n\nexport type BitkitComboboxProps = Omit<BitkitFieldProps, 'children' | 'state'> & {\n  comboboxProps?: ComboboxRootProps;\n  contentProps?: BitkitSelectContentProps;\n  isLoading?: boolean;\n  items: Array<BitkitSelectMenuItemProps>;\n  placeholder?: string;\n  size?: 'md' | 'lg';\n  state?: 'disabled' | 'error' | 'readOnly' | 'warning';\n} & BitkitSelectMenuCreateItemProps &\n  BitkitSelectMenuSearchProps;\n\nconst BitkitCombobox = forwardRef<HTMLDivElement, BitkitComboboxProps>((props: BitkitComboboxProps, ref) => {\n  const {\n    comboboxProps,\n    contentProps,\n    createItemHref,\n    createItemLabel,\n    createItemProps,\n    hasSearch,\n    isLoading,\n    items,\n    onCreateItem,\n    onSearchChange,\n    placeholder = 'Enter a value or select',\n    size,\n    state,\n    ...fieldProps\n  } = props;\n\n  const { contains } = useFilter({ sensitivity: 'base' });\n  const { collection, filter } = useListCollection<BitkitSelectMenuItemProps>({\n    initialItems: items,\n    filter: (_itemText, filterText, item) => contains(item.label, filterText),\n  });\n\n  const comboboxRecipe = useSlotRecipe({ key: 'combobox' });\n  const styles = comboboxRecipe({ size });\n\n  const hasWarning = state === 'warning' || !!fieldProps.warningText;\n  const isInvalid = state === 'error' || !!fieldProps.errorText;\n  const iconSize = size === 'md' ? '16' : '24';\n\n  let statusIcon;\n  if (isInvalid) {\n    statusIcon = <IconErrorCircleFilled size={iconSize} color=\"icon/negative\" />;\n  } else if (hasWarning) {\n    statusIcon = <IconWarningYellow size={iconSize} />;\n  }\n\n  return (\n    <BitkitField ref={ref} state={state} {...fieldProps}>\n      <Combobox.Root\n        {...comboboxProps}\n        collection={collection}\n        disabled={state === 'disabled'}\n        invalid={isInvalid}\n        onInputValueChange={(e) => {\n          filter(e.inputValue);\n        }}\n        readOnly={state === 'readOnly'}\n        size={size}\n      >\n        <Combobox.Control className=\"group\">\n          <Combobox.Input placeholder={placeholder} />\n          <Combobox.IndicatorGroup>\n            <Combobox.ClearTrigger asChild>\n              <BitkitCloseButton size=\"sm\" />\n            </Combobox.ClearTrigger>\n            {statusIcon}\n            <Combobox.Trigger asChild>\n              <AssetSelectChevron />\n            </Combobox.Trigger>\n          </Combobox.IndicatorGroup>\n        </Combobox.Control>\n        <Portal>\n          <Combobox.Positioner>\n            <Combobox.Content>\n              <Combobox.Empty>\n                No items found <Text css={styles.emptyHelperText}>Enter custom value</Text>\n              </Combobox.Empty>\n              <BitkitSelectMenu\n                collection={collection}\n                createItemHref={createItemHref}\n                createItemLabel={createItemLabel}\n                createItemProps={createItemProps}\n                contentProps={contentProps}\n                isLoading={isLoading}\n                onCreateItem={onCreateItem}\n                size={size}\n                variant=\"combobox\"\n                {...(hasSearch ? { hasSearch: true, onSearchChange } : { hasSearch: false as const })}\n              />\n            </Combobox.Content>\n          </Combobox.Positioner>\n        </Portal>\n      </Combobox.Root>\n    </BitkitField>\n  );\n});\n\nBitkitCombobox.displayName = 'BitkitCombobox';\n\nexport default BitkitCombobox;\n"],"mappings":";;;;;;;;;;;;;;;AA+BA,IAAM,iBAAiB,YAAiD,OAA4B,QAAQ;CAC1G,MAAM,EACJ,eACA,cACA,gBACA,iBACA,iBACA,WACA,WACA,OACA,cACA,gBACA,cAAc,2BACd,MACA,OACA,GAAG,eACD;CAEJ,MAAM,EAAE,aAAa,UAAU,EAAE,aAAa,QAAQ,CAAC;CACvD,MAAM,EAAE,YAAY,WAAW,kBAA6C;EAC1E,cAAc;EACd,SAAS,WAAW,YAAY,SAAS,SAAS,KAAK,OAAO,WAAW;EAC1E,CAAC;CAGF,MAAM,SADiB,cAAc,EAAE,KAAK,YAAY,CAAC,CAC3B,EAAE,MAAM,CAAC;CAEvC,MAAM,aAAa,UAAU,aAAa,CAAC,CAAC,WAAW;CACvD,MAAM,YAAY,UAAU,WAAW,CAAC,CAAC,WAAW;CACpD,MAAM,WAAW,SAAS,OAAO,OAAO;CAExC,IAAI;AACJ,KAAI,UACF,cAAa,oBAAC,uBAAD;EAAuB,MAAM;EAAU,OAAM;EAAkB,CAAA;UACnE,WACT,cAAa,oBAAC,mBAAD,EAAmB,MAAM,UAAY,CAAA;AAGpD,QACE,oBAAC,aAAD;EAAkB;EAAY;EAAO,GAAI;YACvC,qBAAC,SAAS,MAAV;GACE,GAAI;GACQ;GACZ,UAAU,UAAU;GACpB,SAAS;GACT,qBAAqB,MAAM;AACzB,WAAO,EAAE,WAAW;;GAEtB,UAAU,UAAU;GACd;aATR,CAWE,qBAAC,SAAS,SAAV;IAAkB,WAAU;cAA5B,CACE,oBAAC,SAAS,OAAV,EAA6B,aAAe,CAAA,EAC5C,qBAAC,SAAS,gBAAV,EAAA,UAAA;KACE,oBAAC,SAAS,cAAV;MAAuB,SAAA;gBACrB,oBAAC,mBAAD,EAAmB,MAAK,MAAO,CAAA;MACT,CAAA;KACvB;KACD,oBAAC,SAAS,SAAV;MAAkB,SAAA;gBAChB,oBAAC,oBAAD,EAAsB,CAAA;MACL,CAAA;KACK,EAAA,CAAA,CACT;OACnB,oBAAC,QAAD,EAAA,UACE,oBAAC,SAAS,YAAV,EAAA,UACE,qBAAC,SAAS,SAAV,EAAA,UAAA,CACE,qBAAC,SAAS,OAAV,EAAA,UAAA,CAAgB,mBACC,oBAAC,MAAD;IAAM,KAAK,OAAO;cAAiB;IAAyB,CAAA,CAC5D,EAAA,CAAA,EACjB,oBAAC,kBAAD;IACc;IACI;IACC;IACA;IACH;IACH;IACG;IACR;IACN,SAAQ;IACR,GAAK,YAAY;KAAE,WAAW;KAAM;KAAgB,GAAG,EAAE,WAAW,OAAgB;IACpF,CAAA,CACe,EAAA,CAAA,EACC,CAAA,EACf,CAAA,CACK;;EACJ,CAAA;EAEhB;AAEF,eAAe,cAAc"}
+{"version":3,"file":"BitkitCombobox.js","names":[],"sources":["../../../lib/components/BitkitCombobox/BitkitCombobox.tsx"],"sourcesContent":["import { Combobox, type ComboboxRootProps } from '@chakra-ui/react/combobox';\nimport { useListCollection } from '@chakra-ui/react/hooks';\nimport { useFilter } from '@chakra-ui/react/locale';\nimport { Portal } from '@chakra-ui/react/portal';\nimport { forwardRef } from 'react';\n\nimport IconErrorCircleFilled from '../../icons/IconErrorCircleFilled';\nimport IconWarningYellow from '../../icons/IconWarningYellow';\nimport AssetSelectChevron from '../../utilities/AssetSelectChevron';\nimport BitkitCloseButton from '../BitkitCloseButton/BitkitCloseButton';\nimport BitkitField, { type BitkitFieldProps } from '../BitkitField/BitkitField';\nimport BitkitSelectMenu, {\n  type BitkitSelectMenuCreateItemProps,\n  type BitkitSelectMenuEmptyStateProps,\n  type BitkitSelectMenuItemProps,\n  type BitkitSelectMenuSearchProps,\n} from '../BitkitSelectMenu/BitkitSelectMenu';\n\nexport type BitkitComboboxProps = Omit<BitkitFieldProps, 'children' | 'state'> & {\n  comboboxProps?: Omit<ComboboxRootProps, 'collection' | 'defaultValue' | 'onValueChange' | 'value'>;\n  defaultValue?: string;\n  isLoading?: boolean;\n  items: Array<BitkitSelectMenuItemProps>;\n  onValueChange?: (newVal: string | undefined) => void;\n  placeholder?: string;\n  size?: 'md' | 'lg';\n  state?: 'disabled' | 'error' | 'readOnly' | 'warning';\n  value?: string;\n} & BitkitSelectMenuCreateItemProps &\n  BitkitSelectMenuSearchProps &\n  BitkitSelectMenuEmptyStateProps;\n\nconst BitkitCombobox = forwardRef<HTMLDivElement, BitkitComboboxProps>((props: BitkitComboboxProps, ref) => {\n  const {\n    comboboxProps,\n    createItemLabel,\n    defaultValue,\n    emptyHelperText,\n    emptyLabel,\n    hasSearch,\n    isLoading,\n    items,\n    onCreateItem,\n    onSearchChange,\n    onValueChange,\n    placeholder = 'Enter a value or select',\n    searchValue,\n    size,\n    state,\n    value,\n    ...fieldProps\n  } = props;\n\n  const { contains } = useFilter({ sensitivity: 'base' });\n  const { collection, filter } = useListCollection<BitkitSelectMenuItemProps>({\n    initialItems: items,\n    filter: (_itemText, filterText, item) => contains(item.label, filterText),\n    isItemDisabled: (item) => !!item.disabled,\n  });\n\n  const hasWarning = state === 'warning' || !!fieldProps.warningText;\n  const isInvalid = state === 'error' || !!fieldProps.errorText;\n  const iconSize = size === 'md' ? '16' : '24';\n\n  let statusIcon;\n  if (isInvalid) {\n    statusIcon = <IconErrorCircleFilled size={iconSize} color=\"icon/negative\" />;\n  } else if (hasWarning) {\n    statusIcon = <IconWarningYellow size={iconSize} />;\n  }\n\n  return (\n    <BitkitField ref={ref} state={state} {...fieldProps}>\n      <Combobox.Root\n        {...comboboxProps}\n        collection={collection}\n        defaultValue={defaultValue ? [defaultValue] : undefined}\n        disabled={state === 'disabled'}\n        invalid={isInvalid}\n        onInputValueChange={(e) => {\n          filter(e.inputValue);\n        }}\n        onValueChange={(details) => onValueChange?.(details.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        size={size}\n        value={value ? [value] : undefined}\n      >\n        <Combobox.Control className=\"group\">\n          <Combobox.Input placeholder={placeholder} />\n          <Combobox.IndicatorGroup>\n            <Combobox.ClearTrigger asChild>\n              <BitkitCloseButton size=\"sm\" />\n            </Combobox.ClearTrigger>\n            {statusIcon}\n            <Combobox.Trigger asChild>\n              <AssetSelectChevron />\n            </Combobox.Trigger>\n          </Combobox.IndicatorGroup>\n        </Combobox.Control>\n        <Portal>\n          <Combobox.Positioner>\n            <BitkitSelectMenu\n              collection={collection}\n              createItemLabel={createItemLabel}\n              emptyHelperText={emptyHelperText}\n              emptyLabel={emptyLabel}\n              isLoading={isLoading}\n              onCreateItem={onCreateItem}\n              size={size}\n              variant=\"combobox\"\n              {...(hasSearch\n                ? { hasSearch: true as const, onSearchChange, searchValue }\n                : { hasSearch: false as const })}\n            />\n          </Combobox.Positioner>\n        </Portal>\n      </Combobox.Root>\n    </BitkitField>\n  );\n});\n\nBitkitCombobox.displayName = 'BitkitCombobox';\n\nexport default BitkitCombobox;\n"],"mappings":";;;;;;;;;;;;;AAgCA,IAAM,iBAAiB,YAAiD,OAA4B,QAAQ;CAC1G,MAAM,EACJ,eACA,iBACA,cACA,iBACA,YACA,WACA,WACA,OACA,cACA,gBACA,eACA,cAAc,2BACd,aACA,MACA,OACA,OACA,GAAG,eACD;CAEJ,MAAM,EAAE,aAAa,UAAU,EAAE,aAAa,QAAQ,CAAC;CACvD,MAAM,EAAE,YAAY,WAAW,kBAA6C;EAC1E,cAAc;EACd,SAAS,WAAW,YAAY,SAAS,SAAS,KAAK,OAAO,WAAW;EACzE,iBAAiB,SAAS,CAAC,CAAC,KAAK;EAClC,CAAC;CAEF,MAAM,aAAa,UAAU,aAAa,CAAC,CAAC,WAAW;CACvD,MAAM,YAAY,UAAU,WAAW,CAAC,CAAC,WAAW;CACpD,MAAM,WAAW,SAAS,OAAO,OAAO;CAExC,IAAI;AACJ,KAAI,UACF,cAAa,oBAAC,uBAAD;EAAuB,MAAM;EAAU,OAAM;EAAkB,CAAA;UACnE,WACT,cAAa,oBAAC,mBAAD,EAAmB,MAAM,UAAY,CAAA;AAGpD,QACE,oBAAC,aAAD;EAAkB;EAAY;EAAO,GAAI;YACvC,qBAAC,SAAS,MAAV;GACE,GAAI;GACQ;GACZ,cAAc,eAAe,CAAC,aAAa,GAAG,KAAA;GAC9C,UAAU,UAAU;GACpB,SAAS;GACT,qBAAqB,MAAM;AACzB,WAAO,EAAE,WAAW;;GAEtB,gBAAgB,YAAY,gBAAgB,QAAQ,MAAM,GAAG;GAC7D,UAAU,UAAU;GAGpB,kBAAkB,EAAE,iBAAiB,YAAY,EAAE,eAAe,EAAE,OAAO,WAAW,CAAC;GACjF;GACN,OAAO,QAAQ,CAAC,MAAM,GAAG,KAAA;aAf3B,CAiBE,qBAAC,SAAS,SAAV;IAAkB,WAAU;cAA5B,CACE,oBAAC,SAAS,OAAV,EAA6B,aAAe,CAAA,EAC5C,qBAAC,SAAS,gBAAV,EAAA,UAAA;KACE,oBAAC,SAAS,cAAV;MAAuB,SAAA;gBACrB,oBAAC,mBAAD,EAAmB,MAAK,MAAO,CAAA;MACT,CAAA;KACvB;KACD,oBAAC,SAAS,SAAV;MAAkB,SAAA;gBAChB,oBAAC,oBAAD,EAAsB,CAAA;MACL,CAAA;KACK,EAAA,CAAA,CACT;OACnB,oBAAC,QAAD,EAAA,UACE,oBAAC,SAAS,YAAV,EAAA,UACE,oBAAC,kBAAD;IACc;IACK;IACA;IACL;IACD;IACG;IACR;IACN,SAAQ;IACR,GAAK,YACD;KAAE,WAAW;KAAe;KAAgB;KAAa,GACzD,EAAE,WAAW,OAAgB;IACjC,CAAA,EACkB,CAAA,EACf,CAAA,CACK;;EACJ,CAAA;EAEhB;AAEF,eAAe,cAAc"}

package/dist/components/BitkitMultiselect/BitkitMultiselect.d.ts

@@ -0,0 +1,20 @@
+import { SelectRootProps, SelectTriggerProps } from '@chakra-ui/react/select';
+import { BitkitFieldProps } from '../BitkitField/BitkitField';
+import { BitkitMultiselectMenuItemProps } from '../BitkitMultiselectMenu/BitkitMultiselectMenu';
+import { BitkitSelectMenuCreateItemProps, BitkitSelectMenuEmptyStateProps, BitkitSelectMenuSearchProps } from '../BitkitSelectMenu/BitkitSelectMenu';
+export type BitkitMultiselectTriggerProps = SelectTriggerProps;
+export type BitkitMultiselectProps = Omit<BitkitFieldProps, 'children' | 'state'> & {
+    constrained?: boolean;
+    defaultValue?: Array<string>;
+    isLoading?: boolean;
+    items: Array<BitkitMultiselectMenuItemProps>;
+    onValueChange?: (newVal: Array<string>) => void;
+    placeholder?: string;
+    selectProps?: Omit<SelectRootProps, 'collection' | 'defaultValue' | 'multiple' | 'onValueChange' | 'value'>;
+    size?: 'md' | 'lg';
+    state?: 'disabled' | 'error' | 'readOnly' | 'warning';
+    triggerProps?: BitkitMultiselectTriggerProps;
+    value?: Array<string>;
+} & BitkitSelectMenuCreateItemProps & BitkitSelectMenuSearchProps & BitkitSelectMenuEmptyStateProps;
+declare const BitkitMultiselect: import('react').ForwardRefExoticComponent<BitkitMultiselectProps & import('react').RefAttributes<HTMLDivElement>>;
+export default BitkitMultiselect;

package/dist/components/BitkitMultiselect/BitkitMultiselect.js

@@ -0,0 +1,183 @@
+import AssetSelectChevron from "../../utilities/AssetSelectChevron.js";
+import IconErrorCircleFilled from "../../icons/IconErrorCircleFilled.js";
+import IconWarningYellow from "../../icons/IconWarningYellow.js";
+import BitkitCloseButton from "../BitkitCloseButton/BitkitCloseButton.js";
+import BitkitField from "../BitkitField/BitkitField.js";
+import BitkitMultiselectMenu from "../BitkitMultiselectMenu/BitkitMultiselectMenu.js";
+import BitkitTag from "../BitkitTag/BitkitTag.js";
+import { Box } from "@chakra-ui/react/box";
+import { useSlotRecipe } from "@chakra-ui/react/styled-system";
+import { Text } from "@chakra-ui/react/text";
+import { forwardRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Portal } from "@chakra-ui/react/portal";
+import { createListCollection } from "@chakra-ui/react/collection";
+import { Select, useSelectContext } from "@chakra-ui/react/select";
+//#region lib/components/BitkitMultiselect/BitkitMultiselect.tsx
+var NON_INTERACTIVE_STATES = [
+	"disabled",
+	"readOnly",
+	"error",
+	"warning"
+];
+/** Whether the clear-all button should be rendered (and the overlay should reserve extra room for it). */
+var shouldShowClearButton = (constrained, selectionCount, state) => !constrained && selectionCount > 0 && !NON_INTERACTIVE_STATES.includes(state);
+var MultiselectOverlay = ({ constrained, placeholder, size, state }) => {
+	const select = useSelectContext();
+	const styles = useSlotRecipe({ key: "multiselect" })({
+		constrained,
+		size
+	});
+	const selectedItems = select.selectedItems;
+	const selectedValues = select.value;
+	const isDisabled = state === "disabled";
+	const isReadOnly = state === "readOnly";
+	const tagState = isDisabled ? "disabled" : void 0;
+	const overlayPaddingEnd = shouldShowClearButton(constrained, selectedValues.length, state) ? "96" : "48";
+	const resolvedPlaceholder = placeholder ?? (isReadOnly ? "(not selected)" : "Select options");
+	const canRemove = !isDisabled && !isReadOnly;
+	const hasSelection = selectedValues.length > 0;
+	const renderTags = () => {
+		if (constrained) return /* @__PURE__ */ jsxs(Fragment$1, { children: [hasSelection && /* @__PURE__ */ jsx(TagSlot, { children: /* @__PURE__ */ jsx(BitkitTag, {
+			size: "sm",
+			colorPalette: "neutral",
+			labelText: String(selectedValues.length),
+			state: tagState,
+			onRemove: canRemove ? () => select.clearValue() : void 0
+		}) }), /* @__PURE__ */ jsx(Text, {
+			as: "span",
+			css: styles.placeholderText,
+			"data-placeholder": hasSelection ? void 0 : "",
+			children: resolvedPlaceholder
+		})] });
+		if (selectedItems.length === 0) return /* @__PURE__ */ jsx(Text, {
+			as: "span",
+			css: styles.placeholderText,
+			"data-placeholder": "",
+			children: resolvedPlaceholder
+		});
+		return selectedItems.map((item) => /* @__PURE__ */ jsx(TagSlot, { children: /* @__PURE__ */ jsx(BitkitTag, {
+			size: "sm",
+			colorPalette: "neutral",
+			labelText: item.label,
+			state: tagState,
+			onRemove: canRemove ? () => select.setValue(selectedValues.filter((v) => v !== item.value)) : void 0
+		}) }, item.value));
+	};
+	return /* @__PURE__ */ jsx(Box, {
+		css: styles.overlay,
+		pointerEvents: "none",
+		paddingInlineEnd: overlayPaddingEnd,
+		children: /* @__PURE__ */ jsx(Box, {
+			css: styles.tagsBlock,
+			children: renderTags()
+		})
+	});
+};
+var TagSlot = ({ children }) => /* @__PURE__ */ jsx(Box, {
+	"data-slot": "tag",
+	display: "inline-flex",
+	pointerEvents: "auto",
+	children
+});
+var ClearAllButton = ({ state }) => {
+	const select = useSelectContext();
+	if (!shouldShowClearButton(false, select.value.length, state)) return null;
+	return /* @__PURE__ */ jsx(BitkitCloseButton, {
+		size: "sm",
+		colorPalette: "neutral",
+		"aria-label": "Clear all",
+		onClick: () => select.clearValue()
+	});
+};
+var BitkitMultiselect = forwardRef((props, ref) => {
+	const { constrained = false, createItemLabel, defaultValue, emptyHelperText, emptyLabel, hasSearch, isLoading, items, onCreateItem, onSearchChange, onValueChange, placeholder, searchValue, selectProps, size = "lg", state, triggerProps, value, ...fieldProps } = props;
+	const collection = createListCollection({
+		items,
+		groupBy: (item) => item.group || "",
+		isItemDisabled: (item) => !!item.disabled
+	});
+	const styles = useSlotRecipe({ key: "multiselect" })({
+		constrained,
+		size
+	});
+	const iconSize = size === "lg" ? "24" : "16";
+	const isInvalid = state === "error" || !!fieldProps.errorText;
+	return /* @__PURE__ */ jsx(BitkitField, {
+		ref,
+		state,
+		...fieldProps,
+		children: /* @__PURE__ */ jsxs(Select.Root, {
+			collection,
+			multiple: true,
+			...selectProps,
+			defaultValue,
+			disabled: state === "disabled",
+			invalid: isInvalid,
+			onValueChange: (details) => onValueChange?.(details.value),
+			readOnly: state === "readOnly",
+			scrollToIndexFn: ({ getElement }) => getElement()?.scrollIntoView({ block: "nearest" }),
+			value,
+			children: [
+				/* @__PURE__ */ jsx(Select.HiddenSelect, {}),
+				/* @__PURE__ */ jsxs(Select.Control, {
+					css: styles.control,
+					className: "group",
+					children: [
+						/* @__PURE__ */ jsx(Select.Trigger, {
+							css: styles.trigger,
+							...triggerProps
+						}),
+						/* @__PURE__ */ jsx(MultiselectOverlay, {
+							constrained,
+							placeholder,
+							size,
+							state
+						}),
+						/* @__PURE__ */ jsxs(Select.IndicatorGroup, {
+							css: styles.indicatorGroup,
+							children: [
+								!constrained && /* @__PURE__ */ jsx(ClearAllButton, { state }),
+								state === "error" && /* @__PURE__ */ jsx(Select.Indicator, {
+									css: styles.indicator,
+									children: /* @__PURE__ */ jsx(IconErrorCircleFilled, {
+										size: iconSize,
+										color: "icon/negative"
+									})
+								}),
+								state === "warning" && /* @__PURE__ */ jsx(Select.Indicator, {
+									css: styles.indicator,
+									children: /* @__PURE__ */ jsx(IconWarningYellow, { size: iconSize })
+								}),
+								/* @__PURE__ */ jsx(Select.Indicator, {
+									css: styles.indicator,
+									asChild: true,
+									children: /* @__PURE__ */ jsx(AssetSelectChevron, {})
+								})
+							]
+						})
+					]
+				}),
+				/* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Select.Positioner, { children: /* @__PURE__ */ jsx(BitkitMultiselectMenu, {
+					collection,
+					createItemLabel,
+					emptyHelperText,
+					emptyLabel,
+					isLoading,
+					onCreateItem,
+					...hasSearch ? {
+						hasSearch: true,
+						onSearchChange,
+						searchValue
+					} : { hasSearch: false },
+					size
+				}) }) })
+			]
+		})
+	});
+});
+BitkitMultiselect.displayName = "BitkitMultiselect";
+//#endregion
+export { BitkitMultiselect as default };
+
+//# sourceMappingURL=BitkitMultiselect.js.map

package/dist/components/BitkitMultiselect/BitkitMultiselect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BitkitMultiselect.js","names":[],"sources":["../../../lib/components/BitkitMultiselect/BitkitMultiselect.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 { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { forwardRef, type ReactNode } from 'react';\n\nimport { IconErrorCircleFilled, IconWarningYellow } from '../../icons';\nimport AssetSelectChevron from '../../utilities/AssetSelectChevron';\nimport BitkitCloseButton from '../BitkitCloseButton/BitkitCloseButton';\nimport BitkitField, { type BitkitFieldProps } from '../BitkitField/BitkitField';\nimport BitkitMultiselectMenu, {\n  type BitkitMultiselectMenuItemProps,\n} from '../BitkitMultiselectMenu/BitkitMultiselectMenu';\nimport {\n  type BitkitSelectMenuCreateItemProps,\n  type BitkitSelectMenuEmptyStateProps,\n  type BitkitSelectMenuSearchProps,\n} from '../BitkitSelectMenu/BitkitSelectMenu';\nimport BitkitTag from '../BitkitTag/BitkitTag';\n\nexport type BitkitMultiselectTriggerProps = SelectTriggerProps;\n\nexport type BitkitMultiselectProps = Omit<BitkitFieldProps, 'children' | 'state'> & {\n  constrained?: boolean;\n  defaultValue?: Array<string>;\n  isLoading?: boolean;\n  items: Array<BitkitMultiselectMenuItemProps>;\n  onValueChange?: (newVal: Array<string>) => void;\n  placeholder?: string;\n  selectProps?: Omit<SelectRootProps, 'collection' | 'defaultValue' | 'multiple' | 'onValueChange' | 'value'>;\n  size?: 'md' | 'lg';\n  state?: 'disabled' | 'error' | 'readOnly' | 'warning';\n  triggerProps?: BitkitMultiselectTriggerProps;\n  value?: Array<string>;\n} & BitkitSelectMenuCreateItemProps &\n  BitkitSelectMenuSearchProps &\n  BitkitSelectMenuEmptyStateProps;\n\ntype MultiselectState = BitkitMultiselectProps['state'];\n\nconst NON_INTERACTIVE_STATES: ReadonlyArray<MultiselectState> = ['disabled', 'readOnly', 'error', 'warning'];\n\n/** Whether the clear-all button should be rendered (and the overlay should reserve extra room for it). */\nconst shouldShowClearButton = (constrained: boolean, selectionCount: number, state: MultiselectState): boolean =>\n  !constrained && selectionCount > 0 && !NON_INTERACTIVE_STATES.includes(state);\n\ntype MultiselectOverlayProps = {\n  constrained: boolean;\n  placeholder?: string;\n  size: 'md' | 'lg';\n  state?: MultiselectState;\n};\n\nconst MultiselectOverlay = ({ constrained, placeholder, size, state }: MultiselectOverlayProps) => {\n  const select = useSelectContext();\n  const recipe = useSlotRecipe({ key: 'multiselect' });\n  const styles = recipe({ constrained, size });\n\n  const selectedItems = select.selectedItems as Array<BitkitMultiselectMenuItemProps>;\n  const selectedValues = select.value;\n  const isDisabled = state === 'disabled';\n  const isReadOnly = state === 'readOnly';\n  const tagState = isDisabled ? 'disabled' : undefined;\n  // Overlay reserves ~96px on the right when the clear-all is visible (to keep the chevron +\n  // clear button out of the tag row), otherwise ~48px (chevron only). Using spacing tokens\n  // because '80' (the minimum that fits both icons with gaps) isn't a valid token; '96' is\n  // the next one up.\n  const overlayPaddingEnd = shouldShowClearButton(constrained, selectedValues.length, state) ? '96' : '48';\n\n  const resolvedPlaceholder = placeholder ?? (isReadOnly ? '(not selected)' : 'Select options');\n  const canRemove = !isDisabled && !isReadOnly;\n\n  const hasSelection = selectedValues.length > 0;\n\n  const renderTags = () => {\n    if (constrained) {\n      return (\n        <>\n          {hasSelection && (\n            <TagSlot>\n              <BitkitTag\n                size=\"sm\"\n                colorPalette=\"neutral\"\n                labelText={String(selectedValues.length)}\n                state={tagState}\n                onRemove={canRemove ? () => select.clearValue() : undefined}\n              />\n            </TagSlot>\n          )}\n          <Text as=\"span\" css={styles.placeholderText} data-placeholder={hasSelection ? undefined : ''}>\n            {resolvedPlaceholder}\n          </Text>\n        </>\n      );\n    }\n\n    if (selectedItems.length === 0) {\n      return (\n        <Text as=\"span\" css={styles.placeholderText} data-placeholder=\"\">\n          {resolvedPlaceholder}\n        </Text>\n      );\n    }\n\n    return selectedItems.map((item) => (\n      <TagSlot key={item.value}>\n        <BitkitTag\n          size=\"sm\"\n          colorPalette=\"neutral\"\n          labelText={item.label}\n          state={tagState}\n          onRemove={canRemove ? () => select.setValue(selectedValues.filter((v) => v !== item.value)) : undefined}\n        />\n      </TagSlot>\n    ));\n  };\n\n  return (\n    <Box css={styles.overlay} pointerEvents=\"none\" paddingInlineEnd={overlayPaddingEnd}>\n      <Box css={styles.tagsBlock}>{renderTags()}</Box>\n    </Box>\n  );\n};\n\nconst TagSlot = ({ children }: { children: ReactNode }) => (\n  <Box data-slot=\"tag\" display=\"inline-flex\" pointerEvents=\"auto\">\n    {children}\n  </Box>\n);\n\ntype ClearAllButtonProps = {\n  state?: MultiselectState;\n};\n\nconst ClearAllButton = ({ state }: ClearAllButtonProps) => {\n  const select = useSelectContext();\n\n  // Constrained mode has its own inline clear-all on the counter tag; this is the non-constrained trigger-level clear.\n  if (!shouldShowClearButton(false, select.value.length, state)) return null;\n\n  return (\n    <BitkitCloseButton size=\"sm\" colorPalette=\"neutral\" aria-label=\"Clear all\" onClick={() => select.clearValue()} />\n  );\n};\n\nconst BitkitMultiselect = forwardRef<HTMLDivElement, BitkitMultiselectProps>((props, ref) => {\n  const {\n    constrained = false,\n    createItemLabel,\n    defaultValue,\n    emptyHelperText,\n    emptyLabel,\n    hasSearch,\n    isLoading,\n    items,\n    onCreateItem,\n    onSearchChange,\n    onValueChange,\n    placeholder,\n    searchValue,\n    selectProps,\n    size = 'lg',\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 recipe = useSlotRecipe({ key: 'multiselect' });\n  const styles = recipe({ constrained, size });\n\n  const iconSize = size === 'lg' ? '24' : '16';\n  const isInvalid = state === 'error' || !!fieldProps.errorText;\n\n  return (\n    <BitkitField ref={ref} state={state} {...fieldProps}>\n      <Select.Root\n        collection={collection}\n        multiple\n        {...selectProps}\n        defaultValue={defaultValue}\n        disabled={state === 'disabled'}\n        invalid={isInvalid}\n        onValueChange={(details) => onValueChange?.(details.value)}\n        readOnly={state === 'readOnly'}\n        // Zag's default scrollIntoView gates on `isScrollable(contentEl)`. Our content is\n        // overflow:hidden + flex column (so the sticky-bottom create row stays visible while\n        // the inner itemList Box scrolls). That gate fails, so keyboard highlight never\n        // scrolls the items into view. Providing scrollToIndexFn bypasses the gate and lets\n        // the browser's native scrollIntoView walk up to the real scroll container (itemList).\n        scrollToIndexFn={({ getElement }) => getElement()?.scrollIntoView({ block: 'nearest' })}\n        value={value}\n      >\n        <Select.HiddenSelect />\n        <Select.Control css={styles.control} className=\"group\">\n          <Select.Trigger css={styles.trigger} {...triggerProps} />\n          <MultiselectOverlay constrained={constrained} placeholder={placeholder} size={size} state={state} />\n          <Select.IndicatorGroup css={styles.indicatorGroup}>\n            {!constrained && <ClearAllButton state={state} />}\n            {state === 'error' && (\n              <Select.Indicator css={styles.indicator}>\n                <IconErrorCircleFilled size={iconSize} color=\"icon/negative\" />\n              </Select.Indicator>\n            )}\n            {state === 'warning' && (\n              <Select.Indicator css={styles.indicator}>\n                <IconWarningYellow size={iconSize} />\n              </Select.Indicator>\n            )}\n            <Select.Indicator css={styles.indicator} asChild>\n              <AssetSelectChevron />\n            </Select.Indicator>\n          </Select.IndicatorGroup>\n        </Select.Control>\n        <Portal>\n          <Select.Positioner>\n            <BitkitMultiselectMenu\n              collection={collection}\n              createItemLabel={createItemLabel}\n              emptyHelperText={emptyHelperText}\n              emptyLabel={emptyLabel}\n              isLoading={isLoading}\n              onCreateItem={onCreateItem}\n              {...(hasSearch\n                ? { hasSearch: true as const, onSearchChange, searchValue }\n                : { hasSearch: false as const })}\n              size={size}\n            />\n          </Select.Positioner>\n        </Portal>\n      </Select.Root>\n    </BitkitField>\n  );\n});\n\nBitkitMultiselect.displayName = 'BitkitMultiselect';\n\nexport default BitkitMultiselect;\n"],"mappings":"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"}

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

@@ -0,0 +1,17 @@
+import { ListCollection } from '@chakra-ui/react/collection';
+import { BitkitSelectMenuCreateItemProps, BitkitSelectMenuEmptyStateProps, BitkitSelectMenuSearchProps } from '../BitkitSelectMenu/BitkitSelectMenu';
+export type BitkitMultiselectMenuItemProps = {
+    value: string;
+    label: string;
+    group?: string;
+    helperText?: string;
+    disabled?: boolean;
+    loading?: boolean;
+};
+export type BitkitMultiselectMenuProps = {
+    collection: ListCollection<BitkitMultiselectMenuItemProps>;
+    isLoading?: boolean;
+    size?: 'md' | 'lg';
+} & BitkitSelectMenuCreateItemProps & BitkitSelectMenuSearchProps & BitkitSelectMenuEmptyStateProps;
+declare const BitkitMultiselectMenu: import('react').ForwardRefExoticComponent<BitkitMultiselectMenuProps & import('react').RefAttributes<HTMLDivElement>>;
+export default BitkitMultiselectMenu;

package/dist/components/BitkitMultiselectMenu/BitkitMultiselectMenu.js

@@ -0,0 +1,66 @@
+import IconCheck from "../../icons/IconCheck.js";
+import { SelectMenuShell } from "../BitkitSelectMenu/SelectMenuShell.js";
+import { Box } from "@chakra-ui/react/box";
+import { useSlotRecipe } from "@chakra-ui/react/styled-system";
+import { Text } from "@chakra-ui/react/text";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Spinner } from "@chakra-ui/react/spinner";
+import { Select } from "@chakra-ui/react/select";
+//#region lib/components/BitkitMultiselectMenu/BitkitMultiselectMenu.tsx
+var BitkitMultiselectMenu = forwardRef((props, ref) => {
+	const { collection, size, ...shellProps } = props;
+	const styles = useSlotRecipe({ key: "select" })({ size });
+	return /* @__PURE__ */ jsx(SelectMenuShell, {
+		NS: Select,
+		collection,
+		contentRef: ref,
+		iconSize: size === "md" ? "16" : "24",
+		renderItem: (item) => /* @__PURE__ */ jsx(MultiselectMenuItem, {
+			item,
+			styles
+		}, item.value),
+		size,
+		styles,
+		...shellProps
+	});
+});
+BitkitMultiselectMenu.displayName = "BitkitMultiselectMenu";
+var MultiselectMenuItem = ({ item, styles }) => {
+	if (item.loading) return /* @__PURE__ */ jsxs(Box, {
+		css: styles.item,
+		children: [/* @__PURE__ */ jsx(Spinner, {
+			variant: "purple",
+			css: styles.itemLoading
+		}), /* @__PURE__ */ jsx(Text, {
+			css: styles.itemLoadingLabel,
+			children: "Loading..."
+		})]
+	});
+	return /* @__PURE__ */ jsxs(Select.Item, {
+		css: styles.item,
+		item,
+		children: [/* @__PURE__ */ jsx(Box, {
+			css: styles.checkbox,
+			"data-slot": "checkbox",
+			children: /* @__PURE__ */ jsx(IconCheck, {
+				size: "16",
+				css: styles.checkmark,
+				"data-slot": "checkmark"
+			})
+		}), /* @__PURE__ */ jsxs(Box, {
+			css: styles.itemContent,
+			children: [/* @__PURE__ */ jsx(Text, {
+				css: styles.itemLabel,
+				children: item.label
+			}), item.helperText && /* @__PURE__ */ jsx(Text, {
+				css: styles.itemHelperText,
+				children: item.helperText
+			})]
+		})]
+	});
+};
+//#endregion
+export { BitkitMultiselectMenu as default };
+
+//# sourceMappingURL=BitkitMultiselectMenu.js.map

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

@@ -0,0 +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 } from 'react';\n\nimport { IconCheck } from '../../icons';\nimport {\n  type BitkitSelectMenuCreateItemProps,\n  type BitkitSelectMenuEmptyStateProps,\n  type BitkitSelectMenuSearchProps,\n} from '../BitkitSelectMenu/BitkitSelectMenu';\nimport { SelectMenuShell } from '../BitkitSelectMenu/SelectMenuShell';\n\nexport type BitkitMultiselectMenuItemProps = {\n  value: string;\n  label: string;\n  group?: string;\n  helperText?: string;\n  disabled?: boolean;\n  loading?: boolean;\n};\n\nexport type BitkitMultiselectMenuProps = {\n  collection: ListCollection<BitkitMultiselectMenuItemProps>;\n  isLoading?: boolean;\n  size?: 'md' | 'lg';\n} & BitkitSelectMenuCreateItemProps &\n  BitkitSelectMenuSearchProps &\n  BitkitSelectMenuEmptyStateProps;\n\nconst BitkitMultiselectMenu = forwardRef<HTMLDivElement, BitkitMultiselectMenuProps>((props, ref) => {\n  const { collection, size, ...shellProps } = props;\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={Select}\n      collection={collection}\n      contentRef={ref}\n      iconSize={iconSize}\n      renderItem={(item) => <MultiselectMenuItem key={item.value} item={item} styles={styles} />}\n      size={size}\n      styles={styles}\n      {...shellProps}\n    />\n  );\n});\n\nBitkitMultiselectMenu.displayName = 'BitkitMultiselectMenu';\n\ntype MultiselectMenuItemRenderProps = {\n  item: BitkitMultiselectMenuItemProps;\n  styles: Record<string, SystemStyleObject>;\n};\n\nconst MultiselectMenuItem = ({ item, 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\" 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=\"16\" 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":";;;;;;;;;;AAiCA,IAAM,wBAAwB,YAAwD,OAAO,QAAQ;CACnG,MAAM,EAAE,YAAY,MAAM,GAAG,eAAe;CAE5C,MAAM,SADS,cAAc,EAAE,KAAK,UAAU,CAAC,CACzB,EAAE,MAAM,CAAC;AAG/B,QACE,oBAAC,iBAAD;EACE,IAAI;EACQ;EACZ,YAAY;EACF,UAPG,SAAS,OAAO,OAAO;EAQpC,aAAa,SAAS,oBAAC,qBAAD;GAA4C;GAAc;GAAU,EAA1C,KAAK,MAAqC;EACpF;EACE;EACR,GAAI;EACJ,CAAA;EAEJ;AAEF,sBAAsB,cAAc;AAOpC,IAAM,uBAAuB,EAAE,MAAM,aAA6C;AAChF,KAAI,KAAK,QAGP,QACE,qBAAC,KAAD;EAAK,KAAK,OAAO;YAAjB,CACE,oBAAC,SAAD;GAAS,SAAQ;GAAS,KAAK,OAAO;GAAe,CAAA,EACrD,oBAAC,MAAD;GAAM,KAAK,OAAO;aAAkB;GAAiB,CAAA,CACjD;;AAIV,QACE,qBAAC,OAAO,MAAR;EAAa,KAAK,OAAO;EAAY;YAArC,CACE,oBAAC,KAAD;GAAK,KAAK,OAAO;GAAU,aAAU;aACnC,oBAAC,WAAD;IAAW,MAAK;IAAK,KAAK,OAAO;IAAW,aAAU;IAAc,CAAA;GAChE,CAAA,EACN,qBAAC,KAAD;GAAK,KAAK,OAAO;aAAjB,CACE,oBAAC,MAAD;IAAM,KAAK,OAAO;cAAY,KAAK;IAAa,CAAA,EAC/C,KAAK,cAAc,oBAAC,MAAD;IAAM,KAAK,OAAO;cAAiB,KAAK;IAAkB,CAAA,CAC1E;KACM"}

package/dist/components/BitkitNativeSelect/BitkitNativeSelect.js

@@ -48,7 +48,7 @@ var BitkitNativeSelect = forwardRef((props, ref) => {
 				statusIcon,
 				/* @__PURE__ */ jsx(NativeSelect.Indicator, {
 					asChild: true,
-					children: /* @__PURE__ */ jsx(AssetSelectChevron, {})
+					children: /* @__PURE__ */ jsx(AssetSelectChevron, { pointerEvents: "none" })
 				})
 			]
 		})

package/dist/components/BitkitNativeSelect/BitkitNativeSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"BitkitNativeSelect.js","names":[],"sources":["../../../lib/components/BitkitNativeSelect/BitkitNativeSelect.tsx"],"sourcesContent":["import { NativeSelect, type NativeSelectRootProps } from '@chakra-ui/react/native-select';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { splitProps } from '@zag-js/utils';\nimport { type ChangeEventHandler, forwardRef, type ReactNode } from 'react';\n\nimport { IconErrorCircleFilled, IconWarningYellow } from '../../icons';\nimport AssetSelectChevron from '../../utilities/AssetSelectChevron.tsx';\nimport BitkitField, { type BitkitFieldProps } from '../BitkitField/BitkitField.tsx';\n\nconst FIELD_PROPS = ['defaultValue', 'name', 'onChange', 'placeholder', 'value'] as const;\n\nexport interface BitkitNativeSelectProps extends Omit<\n  BitkitFieldProps,\n  'children' | 'disabled' | 'invalid' | 'onChange' | 'readOnly'\n> {\n  children: ReactNode;\n  defaultValue?: string;\n  name?: string;\n  onChange?: ChangeEventHandler<HTMLSelectElement>;\n  placeholder?: string;\n  selectProps?: NativeSelectRootProps;\n  size?: 'md' | 'lg';\n  state?: 'disabled' | 'error' | 'readOnly' | 'warning';\n  value?: string;\n}\n\nconst BitkitNativeSelect = forwardRef<HTMLSelectElement, BitkitNativeSelectProps>(\n  (props: BitkitNativeSelectProps, ref) => {\n    const { children, selectProps, size = 'md', state, ...rest } = props;\n    const [nativeFieldProps, bitkitFieldProps] = splitProps(rest, [...FIELD_PROPS]);\n\n    const recipe = useSlotRecipe({ key: 'nativeSelect' });\n    const styles = recipe();\n\n    const hasWarning = state === 'warning' || !!bitkitFieldProps.warningText;\n    const isInvalid = state === 'error' || !!bitkitFieldProps.errorText;\n\n    let statusIcon = undefined;\n    if (isInvalid) {\n      statusIcon = (\n        <IconErrorCircleFilled size={size === 'lg' ? '24' : '16'} css={styles.statusIcon} color=\"icon/negative\" />\n      );\n    } else if (hasWarning) {\n      statusIcon = (\n        <IconWarningYellow size={size === 'lg' ? '24' : '16'} css={styles.statusIcon} color=\"icon/warning\" />\n      );\n    }\n\n    return (\n      <BitkitField state={state} {...bitkitFieldProps}>\n        <NativeSelect.Root size={size} {...selectProps} className=\"group\">\n          <NativeSelect.Field ref={ref} {...nativeFieldProps}>\n            {children}\n          </NativeSelect.Field>\n          {statusIcon}\n          <NativeSelect.Indicator asChild>\n            <AssetSelectChevron />\n          </NativeSelect.Indicator>\n        </NativeSelect.Root>\n      </BitkitField>\n    );\n  },\n);\n\nBitkitNativeSelect.displayName = 'BitkitNativeSelect';\n\nexport default BitkitNativeSelect;\n"],"mappings":";;;;;;;;;;AASA,IAAM,cAAc;CAAC;CAAgB;CAAQ;CAAY;CAAe;CAAQ;AAiBhF,IAAM,qBAAqB,YACxB,OAAgC,QAAQ;CACvC,MAAM,EAAE,UAAU,aAAa,OAAO,MAAM,OAAO,GAAG,SAAS;CAC/D,MAAM,CAAC,kBAAkB,oBAAoB,WAAW,MAAM,CAAC,GAAG,YAAY,CAAC;CAG/E,MAAM,SADS,cAAc,EAAE,KAAK,gBAAgB,CAAC,EAC9B;CAEvB,MAAM,aAAa,UAAU,aAAa,CAAC,CAAC,iBAAiB;CAC7D,MAAM,YAAY,UAAU,WAAW,CAAC,CAAC,iBAAiB;CAE1D,IAAI,aAAa,KAAA;AACjB,KAAI,UACF,cACE,oBAAC,uBAAD;EAAuB,MAAM,SAAS,OAAO,OAAO;EAAM,KAAK,OAAO;EAAY,OAAM;EAAkB,CAAA;UAEnG,WACT,cACE,oBAAC,mBAAD;EAAmB,MAAM,SAAS,OAAO,OAAO;EAAM,KAAK,OAAO;EAAY,OAAM;EAAiB,CAAA;AAIzG,QACE,oBAAC,aAAD;EAAoB;EAAO,GAAI;YAC7B,qBAAC,aAAa,MAAd;GAAyB;GAAM,GAAI;GAAa,WAAU;aAA1D;IACE,oBAAC,aAAa,OAAd;KAAyB;KAAK,GAAI;KAC/B;KACkB,CAAA;IACpB;IACD,oBAAC,aAAa,WAAd;KAAwB,SAAA;eACtB,oBAAC,oBAAD,EAAsB,CAAA;KACC,CAAA;IACP;;EACR,CAAA;EAGnB;AAED,mBAAmB,cAAc"}
+{"version":3,"file":"BitkitNativeSelect.js","names":[],"sources":["../../../lib/components/BitkitNativeSelect/BitkitNativeSelect.tsx"],"sourcesContent":["import { NativeSelect, type NativeSelectRootProps } from '@chakra-ui/react/native-select';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { splitProps } from '@zag-js/utils';\nimport { type ChangeEventHandler, forwardRef, type ReactNode } from 'react';\n\nimport { IconErrorCircleFilled, IconWarningYellow } from '../../icons';\nimport AssetSelectChevron from '../../utilities/AssetSelectChevron.tsx';\nimport BitkitField, { type BitkitFieldProps } from '../BitkitField/BitkitField.tsx';\n\nconst FIELD_PROPS = ['defaultValue', 'name', 'onChange', 'placeholder', 'value'] as const;\n\nexport interface BitkitNativeSelectProps extends Omit<\n  BitkitFieldProps,\n  'children' | 'disabled' | 'invalid' | 'onChange' | 'readOnly'\n> {\n  children: ReactNode;\n  defaultValue?: string;\n  name?: string;\n  onChange?: ChangeEventHandler<HTMLSelectElement>;\n  placeholder?: string;\n  selectProps?: NativeSelectRootProps;\n  size?: 'md' | 'lg';\n  state?: 'disabled' | 'error' | 'readOnly' | 'warning';\n  value?: string;\n}\n\nconst BitkitNativeSelect = forwardRef<HTMLSelectElement, BitkitNativeSelectProps>(\n  (props: BitkitNativeSelectProps, ref) => {\n    const { children, selectProps, size = 'md', state, ...rest } = props;\n    const [nativeFieldProps, bitkitFieldProps] = splitProps(rest, [...FIELD_PROPS]);\n\n    const recipe = useSlotRecipe({ key: 'nativeSelect' });\n    const styles = recipe();\n\n    const hasWarning = state === 'warning' || !!bitkitFieldProps.warningText;\n    const isInvalid = state === 'error' || !!bitkitFieldProps.errorText;\n\n    let statusIcon = undefined;\n    if (isInvalid) {\n      statusIcon = (\n        <IconErrorCircleFilled size={size === 'lg' ? '24' : '16'} css={styles.statusIcon} color=\"icon/negative\" />\n      );\n    } else if (hasWarning) {\n      statusIcon = (\n        <IconWarningYellow size={size === 'lg' ? '24' : '16'} css={styles.statusIcon} color=\"icon/warning\" />\n      );\n    }\n\n    return (\n      <BitkitField state={state} {...bitkitFieldProps}>\n        <NativeSelect.Root size={size} {...selectProps} className=\"group\">\n          <NativeSelect.Field ref={ref} {...nativeFieldProps}>\n            {children}\n          </NativeSelect.Field>\n          {statusIcon}\n          <NativeSelect.Indicator asChild>\n            <AssetSelectChevron pointerEvents=\"none\" />\n          </NativeSelect.Indicator>\n        </NativeSelect.Root>\n      </BitkitField>\n    );\n  },\n);\n\nBitkitNativeSelect.displayName = 'BitkitNativeSelect';\n\nexport default BitkitNativeSelect;\n"],"mappings":";;;;;;;;;;AASA,IAAM,cAAc;CAAC;CAAgB;CAAQ;CAAY;CAAe;CAAQ;AAiBhF,IAAM,qBAAqB,YACxB,OAAgC,QAAQ;CACvC,MAAM,EAAE,UAAU,aAAa,OAAO,MAAM,OAAO,GAAG,SAAS;CAC/D,MAAM,CAAC,kBAAkB,oBAAoB,WAAW,MAAM,CAAC,GAAG,YAAY,CAAC;CAG/E,MAAM,SADS,cAAc,EAAE,KAAK,gBAAgB,CAAC,EAC9B;CAEvB,MAAM,aAAa,UAAU,aAAa,CAAC,CAAC,iBAAiB;CAC7D,MAAM,YAAY,UAAU,WAAW,CAAC,CAAC,iBAAiB;CAE1D,IAAI,aAAa,KAAA;AACjB,KAAI,UACF,cACE,oBAAC,uBAAD;EAAuB,MAAM,SAAS,OAAO,OAAO;EAAM,KAAK,OAAO;EAAY,OAAM;EAAkB,CAAA;UAEnG,WACT,cACE,oBAAC,mBAAD;EAAmB,MAAM,SAAS,OAAO,OAAO;EAAM,KAAK,OAAO;EAAY,OAAM;EAAiB,CAAA;AAIzG,QACE,oBAAC,aAAD;EAAoB;EAAO,GAAI;YAC7B,qBAAC,aAAa,MAAd;GAAyB;GAAM,GAAI;GAAa,WAAU;aAA1D;IACE,oBAAC,aAAa,OAAd;KAAyB;KAAK,GAAI;KAC/B;KACkB,CAAA;IACpB;IACD,oBAAC,aAAa,WAAd;KAAwB,SAAA;eACtB,oBAAC,oBAAD,EAAoB,eAAc,QAAS,CAAA;KACpB,CAAA;IACP;;EACR,CAAA;EAGnB;AAED,mBAAmB,cAAc"}

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

@@ -1,9 +1,8 @@
 import { SelectRootProps, SelectTriggerProps } from '@chakra-ui/react/select';
 import { BitkitFieldProps } from '../BitkitField/BitkitField.tsx';
-import { BitkitSelectContentProps, BitkitSelectMenuCreateItemProps, BitkitSelectMenuItemProps, BitkitSelectMenuSearchProps } from '../BitkitSelectMenu/BitkitSelectMenu.tsx';
+import { BitkitSelectMenuCreateItemProps, BitkitSelectMenuEmptyStateProps, BitkitSelectMenuItemProps, BitkitSelectMenuSearchProps } from '../BitkitSelectMenu/BitkitSelectMenu.tsx';
 export type BitkitSelectTriggerProps = SelectTriggerProps;
 export type BitkitSelectProps = Omit<BitkitFieldProps, 'children' | 'state'> & {
-    contentProps?: BitkitSelectContentProps;
     defaultValue?: string;
     isLoading?: boolean;
     items: Array<BitkitSelectMenuItemProps>;
@@ -14,6 +13,6 @@ export type BitkitSelectProps = Omit<BitkitFieldProps, 'children' | 'state'> & {
     state?: 'disabled' | 'error' | 'readOnly' | 'warning';
     triggerProps?: BitkitSelectTriggerProps;
     value?: string;
-} & BitkitSelectMenuCreateItemProps & BitkitSelectMenuSearchProps;
+} & BitkitSelectMenuCreateItemProps & BitkitSelectMenuSearchProps & BitkitSelectMenuEmptyStateProps;
 declare const BitkitSelect: import('react').ForwardRefExoticComponent<BitkitSelectProps & import('react').RefAttributes<HTMLDivElement>>;
 export default BitkitSelect;

package/dist/components/BitkitSelect/BitkitSelect.js

@@ -26,11 +26,13 @@ var SelectValue = ({ placeholder, state, size }) => {
 	}) : /* @__PURE__ */ jsx(Select.ValueText, { placeholder: placeholder ?? (state === "readOnly" ? "(not selected)" : "Select an option") });
 };
 var BitkitSelect = forwardRef((props, ref) => {
-	const { contentProps, createItemHref, createItemLabel, createItemProps, defaultValue, hasSearch, isLoading, items, onCreateItem, onSearchChange, onValueChange, placeholder, selectProps, size = "md", state, triggerProps, value, ...fieldProps } = props;
+	const { createItemLabel, defaultValue, emptyHelperText, emptyLabel, hasSearch, isLoading, items, onCreateItem, onSearchChange, onValueChange, searchValue, placeholder, selectProps, size = "md", state, triggerProps, value, ...fieldProps } = props;
 	const collection = createListCollection({
 		items,
-		groupBy: (item) => item.group || ""
+		groupBy: (item) => item.group || "",
+		isItemDisabled: (item) => !!item.disabled
 	});
+	const isInvalid = state === "error" || !!fieldProps.errorText;
 	return /* @__PURE__ */ jsx(BitkitField, {
 		ref,
 		state,
@@ -40,7 +42,11 @@ var BitkitSelect = forwardRef((props, ref) => {
 			size,
 			...selectProps,
 			defaultValue: defaultValue ? [defaultValue] : void 0,
+			disabled: state === "disabled",
+			invalid: isInvalid,
 			onValueChange: (newVal) => onValueChange?.(newVal.value[0]),
+			readOnly: state === "readOnly",
+			scrollToIndexFn: ({ getElement }) => getElement()?.scrollIntoView({ block: "nearest" }),
 			value: value ? [value] : void 0,
 			children: [
 				/* @__PURE__ */ jsx(Select.HiddenSelect, {}),
@@ -67,15 +73,15 @@ var BitkitSelect = forwardRef((props, ref) => {
 				}),
 				/* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Select.Positioner, { children: /* @__PURE__ */ jsx(BitkitSelectMenu, {
 					collection,
-					createItemHref,
 					createItemLabel,
-					createItemProps,
-					contentProps,
+					emptyHelperText,
+					emptyLabel,
 					isLoading,
 					onCreateItem,
 					...hasSearch ? {
 						hasSearch: true,
-						onSearchChange
+						onSearchChange,
+						searchValue
 					} : { hasSearch: false },
 					size
 				}) }) })

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 BitkitSelectContentProps,\n  type BitkitSelectMenuCreateItemProps,\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  contentProps?: BitkitSelectContentProps;\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\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    contentProps,\n    createItemHref,\n    createItemLabel,\n    createItemProps,\n    defaultValue,\n    hasSearch,\n    isLoading,\n    items,\n    onCreateItem,\n    onSearchChange,\n    onValueChange,\n    placeholder,\n    selectProps,\n    size = 'md',\n    state,\n    triggerProps,\n    value,\n    ...fieldProps\n  } = props;\n\n  const collection = createListCollection({\n    items,\n    groupBy: (item) => item.group || '',\n  });\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        onValueChange={(newVal) => onValueChange?.(newVal.value[0])}\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              createItemHref={createItemHref}\n              createItemLabel={createItemLabel}\n              createItemProps={createItemProps}\n              contentProps={contentProps}\n              isLoading={isLoading}\n              onCreateItem={onCreateItem}\n              {...(hasSearch ? { hasSearch: true, onSearchChange } : { hasSearch: false as const })}\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,kBAAkB,CACZ;CAErB,MAAM,OAAO,MAAM,IAAI;CACvB,MAAM,QAAQ,MAAM,IAAI;CAExB,MAAM,WAAW,SAAS,OAAO,OAAO;AAExC,QAAO,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,UAAY,CAAA,EAChC,MACG;;EACW,CAAA,GAEnB,oBAAC,OAAO,WAAR,EAAkB,aAAa,gBAAgB,UAAU,aAAa,mBAAmB,qBAAuB,CAAA;;AAIpH,IAAM,eAAe,YAA+C,OAA0B,QAAQ;CACpG,MAAM,EACJ,cACA,gBACA,iBACA,iBACA,cACA,WACA,WACA,OACA,cACA,gBACA,eACA,aACA,aACA,OAAO,MACP,OACA,cACA,OACA,GAAG,eACD;CAEJ,MAAM,aAAa,qBAAqB;EACtC;EACA,UAAU,SAAS,KAAK,SAAS;EAClC,CAAC;AAEF,QACE,oBAAC,aAAD;EAAkB;EAAY;EAAO,GAAI;YACvC,qBAAC,OAAO,MAAR;GACc;GACN;GACN,GAAI;GACJ,cAAc,eAAe,CAAC,aAAa,GAAG,KAAA;GAC9C,gBAAgB,WAAW,gBAAgB,OAAO,MAAM,GAAG;GAC3D,OAAO,QAAQ,CAAC,MAAM,GAAG,KAAA;aAN3B;IAQE,oBAAC,OAAO,cAAR,EAAuB,CAAA;IACvB,qBAAC,OAAO,SAAR;KAAgB,WAAU;eAA1B,CACE,oBAAC,OAAO,SAAR;MAAgB,GAAI;gBAClB,oBAAC,aAAD;OAA0B;OAAmB;OAAa;OAAS,CAAA;MACpD,CAAA,EACjB,qBAAC,OAAO,gBAAR,EAAA,UAAA;MACG,UAAU,WACT,oBAAC,OAAO,WAAR,EAAA,UACE,oBAAC,uBAAD;OAAuB,MAAM,SAAS,OAAO,OAAO;OAAM,OAAM;OAAkB,CAAA,EACjE,CAAA;MAEpB,UAAU,aACT,oBAAC,OAAO,WAAR,EAAA,UACE,oBAAC,mBAAD,EAAmB,MAAM,SAAS,OAAO,OAAO,MAAQ,CAAA,EACvC,CAAA;MAErB,oBAAC,OAAO,WAAR;OAAkB,SAAA;iBAChB,oBAAC,oBAAD,EAAsB,CAAA;OACL,CAAA;MACG,EAAA,CAAA,CACT;;IACjB,oBAAC,QAAD,EAAA,UACE,oBAAC,OAAO,YAAR,EAAA,UACE,oBAAC,kBAAD;KACc;KACI;KACC;KACA;KACH;KACH;KACG;KACd,GAAK,YAAY;MAAE,WAAW;MAAM;MAAgB,GAAG,EAAE,WAAW,OAAgB;KAC9E;KACN,CAAA,EACgB,CAAA,EACb,CAAA;IACG;;EACF,CAAA;EAEhB;AAEF,aAAa,cAAc"}
+{"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    hasSearch,\n    isLoading,\n    items,\n    onCreateItem,\n    onSearchChange,\n    onValueChange,\n    searchValue,\n    placeholder,\n    selectProps,\n    size = 'md',\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              {...(hasSearch\n                ? { hasSearch: true as const, onSearchChange, searchValue }\n                : { hasSearch: false as const })}\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,kBAAkB,CACZ;CAErB,MAAM,OAAO,MAAM,IAAI;CACvB,MAAM,QAAQ,MAAM,IAAI;CAExB,MAAM,WAAW,SAAS,OAAO,OAAO;AAExC,QAAO,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,UAAY,CAAA,EAChC,MACG;;EACW,CAAA,GAEnB,oBAAC,OAAO,WAAR,EAAkB,aAAa,gBAAgB,UAAU,aAAa,mBAAmB,qBAAuB,CAAA;;AAIpH,IAAM,eAAe,YAA+C,OAA0B,QAAQ;CACpG,MAAM,EACJ,iBACA,cACA,iBACA,YACA,WACA,WACA,OACA,cACA,gBACA,eACA,aACA,aACA,aACA,OAAO,MACP,OACA,cACA,OACA,GAAG,eACD;CAEJ,MAAM,aAAa,qBAAqB;EACtC;EACA,UAAU,SAAS,KAAK,SAAS;EACjC,iBAAiB,SAAS,CAAC,CAAC,KAAK;EAClC,CAAC;CAEF,MAAM,YAAY,UAAU,WAAW,CAAC,CAAC,WAAW;AAEpD,QACE,oBAAC,aAAD;EAAkB;EAAY;EAAO,GAAI;YACvC,qBAAC,OAAO,MAAR;GACc;GACN;GACN,GAAI;GACJ,cAAc,eAAe,CAAC,aAAa,GAAG,KAAA;GAC9C,UAAU,UAAU;GACpB,SAAS;GACT,gBAAgB,WAAW,gBAAgB,OAAO,MAAM,GAAG;GAC3D,UAAU,UAAU;GAGpB,kBAAkB,EAAE,iBAAiB,YAAY,EAAE,eAAe,EAAE,OAAO,WAAW,CAAC;GACvF,OAAO,QAAQ,CAAC,MAAM,GAAG,KAAA;aAZ3B;IAcE,oBAAC,OAAO,cAAR,EAAuB,CAAA;IACvB,qBAAC,OAAO,SAAR;KAAgB,WAAU;eAA1B,CACE,oBAAC,OAAO,SAAR;MAAgB,GAAI;gBAClB,oBAAC,aAAD;OAA0B;OAAmB;OAAa;OAAS,CAAA;MACpD,CAAA,EACjB,qBAAC,OAAO,gBAAR,EAAA,UAAA;MACG,UAAU,WACT,oBAAC,OAAO,WAAR,EAAA,UACE,oBAAC,uBAAD;OAAuB,MAAM,SAAS,OAAO,OAAO;OAAM,OAAM;OAAkB,CAAA,EACjE,CAAA;MAEpB,UAAU,aACT,oBAAC,OAAO,WAAR,EAAA,UACE,oBAAC,mBAAD,EAAmB,MAAM,SAAS,OAAO,OAAO,MAAQ,CAAA,EACvC,CAAA;MAErB,oBAAC,OAAO,WAAR;OAAkB,SAAA;iBAChB,oBAAC,oBAAD,EAAsB,CAAA;OACL,CAAA;MACG,EAAA,CAAA,CACT;;IACjB,oBAAC,QAAD,EAAA,UACE,oBAAC,OAAO,YAAR,EAAA,UACE,oBAAC,kBAAD;KACc;KACK;KACA;KACL;KACD;KACG;KACd,GAAK,YACD;MAAE,WAAW;MAAe;MAAgB;MAAa,GACzD,EAAE,WAAW,OAAgB;KAC3B;KACN,CAAA,EACgB,CAAA,EACb,CAAA;IACG;;EACF,CAAA;EAEhB;AAEF,aAAa,cAAc"}