@bitrise/bitkit-v2 0.3.200 → 0.3.202

package/dist/components/BitkitSelectMenu/BitkitSelectMenu.js

@@ -1,90 +1,98 @@
 import IconCheck from "../../icons/IconCheck.js";
+import IconCross from "../../icons/IconCross.js";
 import IconMagnifier from "../../icons/IconMagnifier.js";
 import IconPlus from "../../icons/IconPlus.js";
+import BitkitAvatar from "../BitkitAvatar/BitkitAvatar.js";
 import { Box } from "@chakra-ui/react/box";
-import { useSlotRecipe } from "@chakra-ui/react/styled-system";
+import { chakra, 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 { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Spinner } from "@chakra-ui/react/spinner";
 import { Select } from "@chakra-ui/react/select";
 import { Combobox } from "@chakra-ui/react/combobox";
-import { Input } from "@chakra-ui/react/input";
-import { InputGroup } from "@chakra-ui/react/input-group";
 import { Separator } from "@chakra-ui/react/separator";
 //#region lib/components/BitkitSelectMenu/BitkitSelectMenu.tsx
+/**
+* Zag's Select.Content keyDown handler fires ITEM.CLICK (selecting the highlighted item) and
+* preventDefaults on Enter/Space regardless of which descendant is focused. For the create
+* row (a real <button>/<a> 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 BitkitSelectMenu = forwardRef((props, ref) => {
-	const { collection, contentProps = {}, createItemHref, createItemLabel = "Create item", createItemProps, hasSearch = false, isLoading = false, onCreateItem, onSearchChange, size, variant = "select" } = props;
+	const { collection, contentProps = {}, createItemLabel = "Create item", emptyHelperText, emptyLabel = "No matching options", hasSearch = false, isLoading = false, multiple = false, onCreateItem, onSearchChange, searchValue, size, variant = "select" } = props;
 	const NS = variant === "combobox" ? Combobox : Select;
 	const styles = useSlotRecipe({ key: "select" })({ size });
 	const iconSize = size === "md" ? "16" : "24";
+	const isEmpty = collection.size === 0;
+	const hasCreate = !!onCreateItem;
 	return /* @__PURE__ */ jsxs(NS.Content, {
 		css: styles.content,
 		ref,
 		...contentProps,
 		children: [
-			hasSearch && /* @__PURE__ */ jsx(InputGroup, {
-				startElement: /* @__PURE__ */ jsx(IconMagnifier, {
-					size: iconSize,
-					color: "icon/tertiary"
-				}),
-				css: styles.searchInputGroup,
-				children: /* @__PURE__ */ jsx(Input, {
-					placeholder: "Search...",
-					css: styles.searchInput,
-					onChange: (e) => onSearchChange?.(e.target.value)
-				})
+			!hasSearch && hasCreate && /* @__PURE__ */ jsx("span", {
+				"data-autofocus": "",
+				tabIndex: -1,
+				"aria-hidden": "true"
 			}),
-			/* @__PURE__ */ jsx(Box, {
-				overflowY: "auto",
-				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: "body/md/regular",
-						children: "Loading..."
-					})]
-				}) : collection.group().map(([type, group]) => /* @__PURE__ */ jsxs(NS.ItemGroup, { children: [type && /* @__PURE__ */ jsxs(NS.ItemGroupLabel, {
-					css: styles.itemGroupLabel,
-					children: [/* @__PURE__ */ jsx(Text, {
-						color: "text/tertiary",
-						flexShrink: "0",
-						textStyle: "heading/h6",
-						children: type
-					}), /* @__PURE__ */ jsx(Separator, { flex: "1" })]
-				}), group.map((item) => {
-					const Icon = item.icon;
-					return /* @__PURE__ */ jsxs(NS.Item, {
+			hasSearch && searchValue !== void 0 && 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,
-						item,
-						children: [/* @__PURE__ */ jsxs(Box, {
-							display: "flex",
-							alignItems: "center",
-							gap: "8",
-							children: [Icon && /* @__PURE__ */ jsx(Icon, {
-								color: "icon/primary",
-								size: iconSize
-							}), item.label]
-						}), /* @__PURE__ */ jsx(NS.ItemIndicator, {
-							asChild: true,
-							children: /* @__PURE__ */ jsx(IconCheck, {
-								size: iconSize,
-								css: styles.itemIndicator
-							})
+						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
 						})]
-					}, item.value);
-				})] }, type))
+					}),
+					!isLoading && !isEmpty && collection.group().map(([type, group]) => /* @__PURE__ */ jsxs(NS.ItemGroup, { children: [type && /* @__PURE__ */ jsxs(NS.ItemGroupLabel, {
+						css: styles.itemGroupLabel,
+						children: [/* @__PURE__ */ jsx(Text, {
+							color: "text/tertiary",
+							flexShrink: "0",
+							textStyle: "heading/h6",
+							children: type
+						}), /* @__PURE__ */ jsx(Separator, { flex: "1" })]
+					}), group.map((item) => /* @__PURE__ */ jsx(SelectMenuItem, {
+						NS,
+						item,
+						multiple,
+						iconSize,
+						styles
+					}, item.value))] }, type))
+				]
 			}),
-			(createItemHref || onCreateItem) && /* @__PURE__ */ jsxs(Box, {
-				as: createItemHref ? "a" : "button",
+			onCreateItem && /* @__PURE__ */ jsxs(chakra.button, {
+				type: "button",
 				css: styles.createItem,
-				...createItemHref ? { href: createItemHref } : {},
 				onClick: onCreateItem,
-				...createItemProps,
+				onKeyDown: stopMenuSelectionKeys,
 				children: [/* @__PURE__ */ jsx(IconPlus, {
 					size: iconSize,
 					color: "button/secondary/icon"
@@ -94,6 +102,92 @@ var BitkitSelectMenu = forwardRef((props, ref) => {
 	});
 });
 BitkitSelectMenu.displayName = "BitkitSelectMenu";
+var SelectMenuItem = ({ NS, item, multiple, iconSize, styles }) => {
+	const Icon = item.icon;
+	const isLoading = !!item.loading;
+	return /* @__PURE__ */ jsx(NS.Item, {
+		css: styles.item,
+		item,
+		children: isLoading ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Spinner, {
+			variant: "purple",
+			css: styles.itemLoading
+		}), /* @__PURE__ */ jsx(Text, {
+			css: styles.itemLoadingLabel,
+			children: "Loading..."
+		})] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			multiple && /* @__PURE__ */ jsx(Box, {
+				css: styles.checkbox,
+				"data-slot": "checkbox",
+				children: /* @__PURE__ */ jsx(IconCheck, {
+					size: "16",
+					css: styles.checkmark,
+					"data-slot": "checkmark"
+				})
+			}),
+			!multiple && item.avatar && /* @__PURE__ */ jsx(Box, {
+				"data-slot": "avatar",
+				css: { "[data-disabled] &": { opacity: .5 } },
+				children: /* @__PURE__ */ jsx(BitkitAvatar, {
+					variant: "image",
+					src: item.avatar,
+					name: item.label,
+					size: iconSize === "24" ? "32" : "24"
+				})
+			}),
+			/* @__PURE__ */ jsxs(Box, {
+				css: styles.itemContent,
+				children: [/* @__PURE__ */ jsxs(Box, {
+					display: "flex",
+					alignItems: "center",
+					gap: "8",
+					children: [!multiple && !item.avatar && Icon && /* @__PURE__ */ jsx(Icon, {
+						color: "icon/primary",
+						size: iconSize
+					}), /* @__PURE__ */ jsx(Text, {
+						css: styles.itemLabel,
+						children: item.label
+					})]
+				}), item.helperText && /* @__PURE__ */ jsx(Text, {
+					css: styles.itemHelperText,
+					children: item.helperText
+				})]
+			}),
+			!multiple && /* @__PURE__ */ jsx(NS.ItemIndicator, {
+				asChild: true,
+				children: /* @__PURE__ */ jsx(IconCheck, {
+					size: iconSize,
+					css: styles.itemIndicator
+				})
+			})
+		] })
+	});
+};
+var SelectMenuSearch = ({ iconSize, onSearchChange, styles, value }) => /* @__PURE__ */ jsxs(Box, {
+	css: styles.searchInputGroup,
+	children: [
+		/* @__PURE__ */ jsx(IconMagnifier, {
+			size: iconSize,
+			color: "icon/tertiary"
+		}),
+		/* @__PURE__ */ jsx(chakra.input, {
+			"aria-label": "Search",
+			css: styles.searchInput,
+			placeholder: "Search...",
+			value,
+			onChange: (event) => onSearchChange(event.target.value),
+			onKeyDown: (event) => {
+				if (event.key === " ") event.stopPropagation();
+			}
+		}),
+		value && /* @__PURE__ */ jsx(chakra.button, {
+			type: "button",
+			css: styles.searchClear,
+			"aria-label": "Clear search",
+			onClick: () => onSearchChange(""),
+			children: /* @__PURE__ */ jsx(IconCross, { size: iconSize })
+		})
+	]
+});
 //#endregion
 export { BitkitSelectMenu as default };
 

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 { Input } from '@chakra-ui/react/input';\nimport { InputGroup } from '@chakra-ui/react/input-group';\nimport { Select, type SelectContentProps } from '@chakra-ui/react/select';\nimport { Separator } from '@chakra-ui/react/separator';\nimport { Spinner } from '@chakra-ui/react/spinner';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { type AnchorHTMLAttributes, forwardRef, type HTMLAttributes } from 'react';\n\nimport { type BitkitIconComponent, IconCheck, IconMagnifier, IconPlus } from '../../icons';\n\nexport type BitkitSelectMenuCreateItemProps = {\n  createItemHref?: string;\n  createItemLabel?: string;\n  createItemProps?: AnchorHTMLAttributes<HTMLAnchorElement>;\n  onCreateItem?: () => void;\n};\n\nexport type BitkitSelectMenuSearchProps = {\n  hasSearch?: boolean;\n} & (\n  | {\n      hasSearch: true;\n      onSearchChange?: (searchText: string) => void;\n    }\n  | {\n      hasSearch?: false;\n      onSearchChange?: never;\n    }\n);\n\nexport type BitkitSelectMenuItemProps = {\n  value: string;\n  label: string;\n  group?: string;\n  icon?: BitkitIconComponent;\n};\n\nexport type BitkitSelectMenuProps = {\n  collection: ListCollection<BitkitSelectMenuItemProps>;\n  contentProps?: BitkitSelectContentProps;\n  isLoading?: boolean;\n  size?: 'md' | 'lg';\n  variant?: 'select' | 'combobox';\n} & BitkitSelectMenuCreateItemProps &\n  BitkitSelectMenuSearchProps;\n\nexport type BitkitSelectContentProps = SelectContentProps;\n\nconst BitkitSelectMenu = forwardRef<HTMLDivElement, BitkitSelectMenuProps>((props: BitkitSelectMenuProps, ref) => {\n  const {\n    collection,\n    contentProps = {},\n    createItemHref,\n    createItemLabel = 'Create item',\n    createItemProps,\n    hasSearch = false,\n    isLoading = false,\n    onCreateItem,\n    onSearchChange,\n    size,\n    variant = 'select',\n  } = props;\n\n  const NS = variant === 'combobox' ? Combobox : Select;\n\n  const recipe = useSlotRecipe({ key: 'select' });\n  const styles = recipe({ size });\n\n  const iconSize = size === 'md' ? '16' : '24';\n\n  return (\n    <NS.Content css={styles.content} ref={ref} {...contentProps}>\n      {hasSearch && (\n        <InputGroup\n          startElement={<IconMagnifier size={iconSize} color=\"icon/tertiary\" />}\n          css={styles.searchInputGroup}\n        >\n          <Input placeholder=\"Search...\" css={styles.searchInput} onChange={(e) => onSearchChange?.(e.target.value)} />\n        </InputGroup>\n      )}\n      <Box overflowY=\"auto\">\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=\"body/md/regular\">\n              Loading...\n            </Text>\n          </Box>\n        ) : (\n          collection.group().map(([type, group]) => (\n            <NS.ItemGroup key={type}>\n              {type && (\n                <NS.ItemGroupLabel css={styles.itemGroupLabel}>\n                  <Text color=\"text/tertiary\" flexShrink=\"0\" textStyle=\"heading/h6\">\n                    {type}\n                  </Text>\n                  <Separator flex=\"1\" />\n                </NS.ItemGroupLabel>\n              )}\n              {group.map((item) => {\n                const Icon = item.icon;\n                return (\n                  <NS.Item key={item.value} css={styles.item} item={item}>\n                    <Box display=\"flex\" alignItems=\"center\" gap=\"8\">\n                      {Icon && <Icon color=\"icon/primary\" size={iconSize} />}\n                      {item.label}\n                    </Box>\n                    <NS.ItemIndicator asChild>\n                      <IconCheck size={iconSize} css={styles.itemIndicator} />\n                    </NS.ItemIndicator>\n                  </NS.Item>\n                );\n              })}\n            </NS.ItemGroup>\n          ))\n        )}\n      </Box>\n      {(createItemHref || onCreateItem) && (\n        <Box\n          as={createItemHref ? 'a' : 'button'}\n          css={styles.createItem}\n          {...(createItemHref ? { href: createItemHref } : {})}\n          onClick={onCreateItem}\n          {...(createItemProps as HTMLAttributes<HTMLDivElement>)}\n        >\n          <IconPlus size={iconSize} color=\"button/secondary/icon\" />\n          {createItemLabel}\n        </Box>\n      )}\n    </NS.Content>\n  );\n});\n\nBitkitSelectMenu.displayName = 'BitkitSelectMenu';\n\nexport default BitkitSelectMenu;\n"],"mappings":";;;;;;;;;;;;;;;AAoDA,IAAM,mBAAmB,YAAmD,OAA8B,QAAQ;CAChH,MAAM,EACJ,YACA,eAAe,EAAE,EACjB,gBACA,kBAAkB,eAClB,iBACA,YAAY,OACZ,YAAY,OACZ,cACA,gBACA,MACA,UAAU,aACR;CAEJ,MAAM,KAAK,YAAY,aAAa,WAAW;CAG/C,MAAM,SADS,cAAc,EAAE,KAAK,UAAU,CAAC,CACzB,EAAE,MAAM,CAAC;CAE/B,MAAM,WAAW,SAAS,OAAO,OAAO;AAExC,QACE,qBAAC,GAAG,SAAJ;EAAY,KAAK,OAAO;EAAc;EAAK,GAAI;YAA/C;GACG,aACC,oBAAC,YAAD;IACE,cAAc,oBAAC,eAAD;KAAe,MAAM;KAAU,OAAM;KAAkB,CAAA;IACrE,KAAK,OAAO;cAEZ,oBAAC,OAAD;KAAO,aAAY;KAAY,KAAK,OAAO;KAAa,WAAW,MAAM,iBAAiB,EAAE,OAAO,MAAM;KAAI,CAAA;IAClG,CAAA;GAEf,oBAAC,KAAD;IAAK,WAAU;cACZ,YACC,qBAAC,KAAD;KAAK,SAAQ;KAAO,YAAW;KAAS,KAAI;KAAK,gBAAe;KAAO,KAAK,OAAO;eAAnF,CACE,oBAAC,SAAD,EAAS,SAAQ,UAAW,CAAA,EAC5B,oBAAC,MAAD;MAAM,OAAM;MAAiB,WAAU;gBAAkB;MAElD,CAAA,CACH;SAEN,WAAW,OAAO,CAAC,KAAK,CAAC,MAAM,WAC7B,qBAAC,GAAG,WAAJ,EAAA,UAAA,CACG,QACC,qBAAC,GAAG,gBAAJ;KAAmB,KAAK,OAAO;eAA/B,CACE,oBAAC,MAAD;MAAM,OAAM;MAAgB,YAAW;MAAI,WAAU;gBAClD;MACI,CAAA,EACP,oBAAC,WAAD,EAAW,MAAK,KAAM,CAAA,CACJ;QAErB,MAAM,KAAK,SAAS;KACnB,MAAM,OAAO,KAAK;AAClB,YACE,qBAAC,GAAG,MAAJ;MAA0B,KAAK,OAAO;MAAY;gBAAlD,CACE,qBAAC,KAAD;OAAK,SAAQ;OAAO,YAAW;OAAS,KAAI;iBAA5C,CACG,QAAQ,oBAAC,MAAD;QAAM,OAAM;QAAe,MAAM;QAAY,CAAA,EACrD,KAAK,MACF;UACN,oBAAC,GAAG,eAAJ;OAAkB,SAAA;iBAChB,oBAAC,WAAD;QAAW,MAAM;QAAU,KAAK,OAAO;QAAiB,CAAA;OACvC,CAAA,CACX;QARI,KAAK,MAQT;MAEZ,CACW,EAAA,EAvBI,KAuBJ,CACf;IAEA,CAAA;IACJ,kBAAkB,iBAClB,qBAAC,KAAD;IACE,IAAI,iBAAiB,MAAM;IAC3B,KAAK,OAAO;IACZ,GAAK,iBAAiB,EAAE,MAAM,gBAAgB,GAAG,EAAE;IACnD,SAAS;IACT,GAAK;cALP,CAOE,oBAAC,UAAD;KAAU,MAAM;KAAU,OAAM;KAA0B,CAAA,EACzD,gBACG;;GAEG;;EAEf;AAEF,iBAAiB,cAAc"}
+{"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 { Separator } from '@chakra-ui/react/separator';\nimport { Spinner } from '@chakra-ui/react/spinner';\nimport { chakra, type SystemStyleObject, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { type ChangeEvent, forwardRef, type KeyboardEvent as ReactKeyboardEvent } from 'react';\n\nimport { type BitkitIconComponent, IconCheck, IconCross, IconMagnifier, IconPlus } from '../../icons';\nimport BitkitAvatar from '../BitkitAvatar/BitkitAvatar';\n\n/**\n * Zag's Select.Content keyDown handler fires ITEM.CLICK (selecting the highlighted item) and\n * preventDefaults on Enter/Space regardless of which descendant is focused. For the create\n * row (a real <button>/<a> sibling of the items list), that hijacks its native activation.\n * Stopping propagation at the element keeps its own onClick firing via the browser's native\n * keyboard-activation path.\n */\nconst stopMenuSelectionKeys = (event: ReactKeyboardEvent) => {\n  if (event.key === 'Enter' || event.key === ' ') {\n    event.stopPropagation();\n  }\n};\n\nexport type BitkitSelectMenuCreateItemProps = {\n  createItemLabel?: string;\n  onCreateItem?: () => void;\n};\n\nexport type BitkitSelectMenuSearchProps = {\n  hasSearch?: boolean;\n} & (\n  | {\n      hasSearch: true;\n      onSearchChange: (searchText: string) => void;\n      searchValue: string;\n    }\n  | {\n      hasSearch?: false;\n      onSearchChange?: never;\n      searchValue?: never;\n    }\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   *  three public components (BitkitSelect, BitkitCombobox, BitkitMultiselect) intentionally\n   *  do not expose this escape hatch. */\n  contentProps?: SelectContentProps;\n  isLoading?: boolean;\n  multiple?: boolean;\n  size?: 'md' | 'lg';\n  variant?: 'select' | 'combobox';\n} & BitkitSelectMenuCreateItemProps &\n  BitkitSelectMenuSearchProps &\n  BitkitSelectMenuEmptyStateProps;\n\nconst BitkitSelectMenu = forwardRef<HTMLDivElement, BitkitSelectMenuProps>((props: BitkitSelectMenuProps, ref) => {\n  const {\n    collection,\n    contentProps = {},\n    createItemLabel = 'Create item',\n    emptyHelperText,\n    emptyLabel = 'No matching options',\n    hasSearch = false,\n    isLoading = false,\n    multiple = false,\n    onCreateItem,\n    onSearchChange,\n    searchValue,\n    size,\n    variant = 'select',\n  } = props;\n\n  const NS = variant === 'combobox' ? Combobox : Select;\n\n  const recipe = useSlotRecipe({ key: 'select' });\n  const styles = recipe({ size });\n\n  const iconSize = size === 'md' ? '16' : '24';\n  const isEmpty = collection.size === 0;\n\n  const hasCreate = !!onCreateItem;\n\n  return (\n    <NS.Content css={styles.content} ref={ref} {...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. When search\n        is present, the search input naturally takes initial focus and this sentinel is\n        unnecessary.\n      */}\n      {!hasSearch && hasCreate && <span data-autofocus=\"\" tabIndex={-1} aria-hidden=\"true\" />}\n      {hasSearch && searchValue !== undefined && onSearchChange && (\n        <SelectMenuSearch iconSize={iconSize} styles={styles} value={searchValue} onSearchChange={onSearchChange} />\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 css={styles.itemGroupLabel}>\n                  <Text color=\"text/tertiary\" flexShrink=\"0\" textStyle=\"heading/h6\">\n                    {type}\n                  </Text>\n                  <Separator flex=\"1\" />\n                </NS.ItemGroupLabel>\n              )}\n              {group.map((item) => (\n                <SelectMenuItem\n                  key={item.value}\n                  NS={NS}\n                  item={item}\n                  multiple={multiple}\n                  iconSize={iconSize}\n                  styles={styles}\n                />\n              ))}\n            </NS.ItemGroup>\n          ))}\n      </Box>\n      {onCreateItem && (\n        <chakra.button type=\"button\" css={styles.createItem} onClick={onCreateItem} onKeyDown={stopMenuSelectionKeys}>\n          <IconPlus size={iconSize} color=\"button/secondary/icon\" />\n          {createItemLabel}\n        </chakra.button>\n      )}\n    </NS.Content>\n  );\n});\n\nBitkitSelectMenu.displayName = 'BitkitSelectMenu';\n\ntype SelectMenuItemRenderProps = {\n  NS: typeof Select | typeof Combobox;\n  item: BitkitSelectMenuItemProps;\n  multiple: boolean;\n  iconSize: '16' | '24';\n  styles: Record<string, SystemStyleObject>;\n};\n\nconst SelectMenuItem = ({ NS, item, multiple, iconSize, styles }: SelectMenuItemRenderProps) => {\n  const Icon = item.icon;\n  const isLoading = !!item.loading;\n\n  return (\n    <NS.Item css={styles.item} item={item}>\n      {isLoading ? (\n        <>\n          <Spinner variant=\"purple\" css={styles.itemLoading} />\n          <Text css={styles.itemLoadingLabel}>Loading...</Text>\n        </>\n      ) : (\n        <>\n          {multiple && (\n            <Box css={styles.checkbox} data-slot=\"checkbox\">\n              <IconCheck size=\"16\" css={styles.checkmark} data-slot=\"checkmark\" />\n            </Box>\n          )}\n          {!multiple && item.avatar && (\n            <Box data-slot=\"avatar\" css={{ '[data-disabled] &': { opacity: 0.5 } }}>\n              <BitkitAvatar\n                variant=\"image\"\n                src={item.avatar}\n                name={item.label}\n                size={iconSize === '24' ? '32' : '24'}\n              />\n            </Box>\n          )}\n          <Box css={styles.itemContent}>\n            <Box display=\"flex\" alignItems=\"center\" gap=\"8\">\n              {!multiple && !item.avatar && Icon && <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          {!multiple && (\n            <NS.ItemIndicator asChild>\n              <IconCheck size={iconSize} css={styles.itemIndicator} />\n            </NS.ItemIndicator>\n          )}\n        </>\n      )}\n    </NS.Item>\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\nexport default BitkitSelectMenu;\n"],"mappings":"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"}

package/dist/components/index.d.ts

@@ -37,6 +37,7 @@ export { default as BitkitLink, type BitkitLinkProps } from './BitkitLink/Bitkit
 export { default as BitkitLinkButton, type BitkitLinkButtonProps } from './BitkitLinkButton/BitkitLinkButton';
 export { default as BitkitMarkdown, type BitkitMarkdownProps } from './BitkitMarkdown/BitkitMarkdown';
 export { default as BitkitMarkdownCard, type BitkitMarkdownCardProps } from './BitkitMarkdownCard/BitkitMarkdownCard';
+export { default as BitkitMultiselect, type BitkitMultiselectProps } from './BitkitMultiselect/BitkitMultiselect';
 export { default as BitkitNativeSelect, type BitkitNativeSelectProps } from './BitkitNativeSelect/BitkitNativeSelect';
 export { default as BitkitNoteCard, type BitkitNoteCardProps } from './BitkitNoteCard/BitkitNoteCard';
 export { default as BitkitNumberInput, type BitkitNumberInputProps } from './BitkitNumberInput/BitkitNumberInput';

package/dist/main.js

@@ -322,6 +322,8 @@ import BitkitOrderedList_default from "./components/BitkitOrderedList/BitkitOrde
 import BitkitUnorderedList_default from "./components/BitkitUnorderedList/BitkitUnorderedList.js";
 import BitkitMarkdown from "./components/BitkitMarkdown/BitkitMarkdown.js";
 import BitkitMarkdownCard from "./components/BitkitMarkdownCard/BitkitMarkdownCard.js";
+import BitkitTag from "./components/BitkitTag/BitkitTag.js";
+import BitkitMultiselect from "./components/BitkitMultiselect/BitkitMultiselect.js";
 import BitkitNativeSelect from "./components/BitkitNativeSelect/BitkitNativeSelect.js";
 import BitkitNoteCard from "./components/BitkitNoteCard/BitkitNoteCard.js";
 import BitkitNumberInput from "./components/BitkitNumberInput/BitkitNumberInput.js";
@@ -345,7 +347,6 @@ import BitkitStat from "./components/BitkitStat/BitkitStat.js";
 import BitkitSteps_default from "./components/BitkitSteps/BitkitSteps.js";
 import BitkitStepsCard_default from "./components/BitkitStepsCard/BitkitStepsCard.js";
 import BitkitTabs from "./components/BitkitTabs/BitkitTabs.js";
-import BitkitTag from "./components/BitkitTag/BitkitTag.js";
 import BitkitTagsInput from "./components/BitkitTagsInput/BitkitTagsInput.js";
 import BitkitTextInput from "./components/BitkitTextInput/BitkitTextInput.js";
 import createBitkitToast from "./components/BitkitToast/BitkitToast.js";
@@ -354,4 +355,4 @@ import BitkitToggleButton from "./components/BitkitToggleButton/BitkitToggleButt
 import BitkitTreeView, { createTreeCollection } from "./components/BitkitTreeView/BitkitTreeView.js";
 import bitkitTheme from "./theme/index.js";
 import Provider from "./providers/BitkitProvider.js";
-export { BitkitAccordion, BitkitActionBar, BitkitAlert, BitkitAvatar, BitkitBadge, BitkitButton, BitkitCalendar, BitkitCard, BitkitCheckbox, BitkitCheckboxGroup, BitkitCloseButton, BitkitCodeSnippet, BitkitCollapsible, BitkitColorButton, BitkitCombobox, BitkitControlButton, BitkitDefinitionTooltip, BitkitDialog, BitkitDialogBody, BitkitDialogButtons, BitkitDialogContent, BitkitDialogRoot, BitkitDraggableCard, BitkitDrawer, BitkitEmptyState, BitkitExpandableCard, BitkitExplainerList_default as BitkitExplainerList, BitkitField, BitkitFileInput, BitkitGroupHeading, BitkitIconButton, BitkitInlineLoading, BitkitLabel, BitkitLabelTooltip, BitkitLabeledData, BitkitLink, BitkitLinkButton, BitkitMarkdown, BitkitMarkdownCard, BitkitNativeSelect, BitkitNoteCard, BitkitNumberInput, BitkitOrderedList_default as BitkitOrderedList, BitkitOverflowContent, BitkitOverflowTooltip, BitkitPageFooter_default as BitkitPageFooter, BitkitPagination, BitkitPaginationLoadMore, Provider as BitkitProvider, BitkitRadio, BitkitRadioGroup, BitkitRibbon, BitkitSearchInput, BitkitSectionHeading, BitkitSegmentedControl_default as BitkitSegmentedControl, BitkitSelect, BitkitSelectMenu, BitkitSelectableTag_default as BitkitSelectableTag, BitkitSettingsCard_default as BitkitSettingsCard, BitkitSidebar_default as BitkitSidebar, BitkitSplitButton_default as BitkitSplitButton, BitkitStat, BitkitSteps_default as BitkitSteps, BitkitStepsCard_default as BitkitStepsCard, BitkitTabs, BitkitTag, BitkitTagsInput, BitkitTextInput, BitkitToggle, BitkitToggleButton, BitkitTooltip, BitkitTreeView, BitkitUnorderedList_default as BitkitUnorderedList, IconAbortCircle, IconAbortCircleFilled, IconAddons, IconAgent, IconAnchor, IconAndroid, IconApp, IconAppSettings, IconAppStore, IconAppStoreColor, IconApple, IconArchive, IconArchiveDelete, IconArchiveRestore, IconArrowBackAndDown, IconArrowBackAndUp, IconArrowDown, IconArrowForwardAndDown, IconArrowForwardAndUp, IconArrowLeft, IconArrowNortheast, IconArrowNorthwest, IconArrowRight, IconArrowUp, IconArrowsHorizontal, IconArrowsVertical, IconAutomation, IconAws, IconAwsColor, IconBadge3RdParty, IconBadgeBitrise, IconBadgeUpgrade, IconBadgeVersionOk, IconBazel, IconBell, IconBitbot, IconBitbotError, IconBitbucket, IconBitbucketColor, IconBitbucketNeutral, IconBitbucketWhite, IconBlockCircle, IconBook, IconBoxArrowDown, IconBoxDot, IconBoxLinesOverflow, IconBoxLinesWrap, IconBranch, IconBrowserstackColor, IconBug, IconBuild, IconBuildCache, IconBuildCacheFilled, IconBuildEnvSetup, IconCalendar, IconChangePlan, IconChat, IconCheck, IconCheckCircle, IconCheckCircleFilled, IconChevronDown, IconChevronLeft, IconChevronRight, IconChevronUp, IconCi, IconCiFilled, IconCircle, IconCircleDashed, IconCircleHalfFilled, IconClaude, IconClaudeColor, IconClock, IconCode, IconCodePush, IconCodeSigning, IconCoffee, IconCommit, IconConfigure, IconConnectedAccounts, IconContainer, IconCopy, IconCordova, IconCpu, IconCreditcard, IconCredits, IconCross, IconCrossCircle, IconCrossCircleFilled, IconCrown, IconCycle, IconDashboard, IconDashboardFilled, IconDeployment, IconDetails, IconDoc, IconDollar, IconDot, IconDotnet, IconDotnetColor, IconDotnetText, IconDotnetTextColor, IconDoubleCircle, IconDownload, IconDragHandle, IconEc2Ami, IconEnterprise, IconErrorCircle, IconErrorCircleFilled, IconExpand, IconExtraBuildCapacity, IconEye, IconEyeSlash, IconFastlane, IconFileDoc, IconFilePdf, IconFilePlist, IconFileZip, IconFilter, IconFlag, IconFlutter, IconFolder, IconFullscreen, IconFullscreenExit, IconGauge, IconGit, IconGithub, IconGitlab, IconGitlabColor, IconGitlabWhite, IconGlobe, IconGo, IconGoogleColor, IconGooglePlay, IconGooglePlayColor, IconGradle, IconGroup, IconHashtag, IconHeadset, IconHeart, IconHistory, IconHourglass, IconImage, IconInfoCircle, IconInfoCircleFilled, IconInsights, IconInsightsFilled, IconInstall, IconInteraction, IconInvoice, IconIonic, IconJapanese, IconJava, IconJavaColor, IconJavaDuke, IconJavaDukeColor, IconKey, IconKotlin, IconKotlinColor, IconKotlinWhite, IconLaptop, IconLaunchdarkly, IconLegacyApp, IconLightbulb, IconLink, IconLinux, IconLock, IconLockOpen, IconLogin, IconLogout, IconMacos, IconMagicWand, IconMagnifier, IconMail, IconMedal, IconMemory, IconMenuGrid, IconMenuHamburger, IconMessage, IconMessageAlert, IconMessageQuestion, IconMicrophone, IconMinus, IconMinusCircle, IconMinusCircleFilled, IconMobile, IconMobileLandscape, IconMonitorChart, IconMoreHorizontal, IconMoreVertical, IconNews, IconNextjs, IconNodejs, IconOpenInNew, IconOther, IconOutsideContributor, IconOverview, IconPause, IconPencil, IconPeople, IconPercent, IconPerson, IconPersonWithDesk, IconPlay, IconPlus, IconPlusCircle, IconPlusCircleFilled, IconPower, IconProject, IconProjectSettings, IconPull, IconPush, IconPuzzle, IconPython, IconPythonColor, IconQuestionCircle, IconQuestionCircleFilled, IconReact, IconRefresh, IconRegex, IconRelease, IconReleaseFilled, IconRemoteAccess, IconReplace, IconResponsiveness, IconReviewerApproved, IconReviewerAssigned, IconReviewerRejected, IconRuby, IconRubyColor, IconSave, IconSecurityShield, IconSettings, IconSettingsFilled, IconShuffle, IconSiren, IconSkip, IconSkipCircle, IconSkipCircleFilled, IconSlack, IconSlackColor, IconSparkle, IconSparkleFilled, IconSpinnerOnDisabled, IconSpinnerPurple, IconSpinnerPurpleDouble, IconSpinnerWhite, IconStability, IconStack, IconStar, IconStep, IconStop, IconStopwatch, IconTag, IconTasks, IconTeams, IconTeamsColor, IconTemplateCode, IconTerminal, IconTestQuarantine, IconThemeDarkToggle, IconThumbDown, IconThumbUp, IconTools, IconTrash, IconTrigger, IconUbuntu, IconUbuntuColor, IconUnity3D, IconUpload, IconValidateShield, IconVideo, IconWarning, IconWarningYellow, IconWebUi, IconWebhooks, IconWorkflow, IconWorkflowFlow, IconXTwitter, IconXamarin, IconXcode, bitkitIcon, bitkitTheme as bitriseTheme, createBitkitToast, createTreeCollection };
+export { BitkitAccordion, BitkitActionBar, BitkitAlert, BitkitAvatar, BitkitBadge, BitkitButton, BitkitCalendar, BitkitCard, BitkitCheckbox, BitkitCheckboxGroup, BitkitCloseButton, BitkitCodeSnippet, BitkitCollapsible, BitkitColorButton, BitkitCombobox, BitkitControlButton, BitkitDefinitionTooltip, BitkitDialog, BitkitDialogBody, BitkitDialogButtons, BitkitDialogContent, BitkitDialogRoot, BitkitDraggableCard, BitkitDrawer, BitkitEmptyState, BitkitExpandableCard, BitkitExplainerList_default as BitkitExplainerList, BitkitField, BitkitFileInput, BitkitGroupHeading, BitkitIconButton, BitkitInlineLoading, BitkitLabel, BitkitLabelTooltip, BitkitLabeledData, BitkitLink, BitkitLinkButton, BitkitMarkdown, BitkitMarkdownCard, BitkitMultiselect, BitkitNativeSelect, BitkitNoteCard, BitkitNumberInput, BitkitOrderedList_default as BitkitOrderedList, BitkitOverflowContent, BitkitOverflowTooltip, BitkitPageFooter_default as BitkitPageFooter, BitkitPagination, BitkitPaginationLoadMore, Provider as BitkitProvider, BitkitRadio, BitkitRadioGroup, BitkitRibbon, BitkitSearchInput, BitkitSectionHeading, BitkitSegmentedControl_default as BitkitSegmentedControl, BitkitSelect, BitkitSelectMenu, BitkitSelectableTag_default as BitkitSelectableTag, BitkitSettingsCard_default as BitkitSettingsCard, BitkitSidebar_default as BitkitSidebar, BitkitSplitButton_default as BitkitSplitButton, BitkitStat, BitkitSteps_default as BitkitSteps, BitkitStepsCard_default as BitkitStepsCard, BitkitTabs, BitkitTag, BitkitTagsInput, BitkitTextInput, BitkitToggle, BitkitToggleButton, BitkitTooltip, BitkitTreeView, BitkitUnorderedList_default as BitkitUnorderedList, IconAbortCircle, IconAbortCircleFilled, IconAddons, IconAgent, IconAnchor, IconAndroid, IconApp, IconAppSettings, IconAppStore, IconAppStoreColor, IconApple, IconArchive, IconArchiveDelete, IconArchiveRestore, IconArrowBackAndDown, IconArrowBackAndUp, IconArrowDown, IconArrowForwardAndDown, IconArrowForwardAndUp, IconArrowLeft, IconArrowNortheast, IconArrowNorthwest, IconArrowRight, IconArrowUp, IconArrowsHorizontal, IconArrowsVertical, IconAutomation, IconAws, IconAwsColor, IconBadge3RdParty, IconBadgeBitrise, IconBadgeUpgrade, IconBadgeVersionOk, IconBazel, IconBell, IconBitbot, IconBitbotError, IconBitbucket, IconBitbucketColor, IconBitbucketNeutral, IconBitbucketWhite, IconBlockCircle, IconBook, IconBoxArrowDown, IconBoxDot, IconBoxLinesOverflow, IconBoxLinesWrap, IconBranch, IconBrowserstackColor, IconBug, IconBuild, IconBuildCache, IconBuildCacheFilled, IconBuildEnvSetup, IconCalendar, IconChangePlan, IconChat, IconCheck, IconCheckCircle, IconCheckCircleFilled, IconChevronDown, IconChevronLeft, IconChevronRight, IconChevronUp, IconCi, IconCiFilled, IconCircle, IconCircleDashed, IconCircleHalfFilled, IconClaude, IconClaudeColor, IconClock, IconCode, IconCodePush, IconCodeSigning, IconCoffee, IconCommit, IconConfigure, IconConnectedAccounts, IconContainer, IconCopy, IconCordova, IconCpu, IconCreditcard, IconCredits, IconCross, IconCrossCircle, IconCrossCircleFilled, IconCrown, IconCycle, IconDashboard, IconDashboardFilled, IconDeployment, IconDetails, IconDoc, IconDollar, IconDot, IconDotnet, IconDotnetColor, IconDotnetText, IconDotnetTextColor, IconDoubleCircle, IconDownload, IconDragHandle, IconEc2Ami, IconEnterprise, IconErrorCircle, IconErrorCircleFilled, IconExpand, IconExtraBuildCapacity, IconEye, IconEyeSlash, IconFastlane, IconFileDoc, IconFilePdf, IconFilePlist, IconFileZip, IconFilter, IconFlag, IconFlutter, IconFolder, IconFullscreen, IconFullscreenExit, IconGauge, IconGit, IconGithub, IconGitlab, IconGitlabColor, IconGitlabWhite, IconGlobe, IconGo, IconGoogleColor, IconGooglePlay, IconGooglePlayColor, IconGradle, IconGroup, IconHashtag, IconHeadset, IconHeart, IconHistory, IconHourglass, IconImage, IconInfoCircle, IconInfoCircleFilled, IconInsights, IconInsightsFilled, IconInstall, IconInteraction, IconInvoice, IconIonic, IconJapanese, IconJava, IconJavaColor, IconJavaDuke, IconJavaDukeColor, IconKey, IconKotlin, IconKotlinColor, IconKotlinWhite, IconLaptop, IconLaunchdarkly, IconLegacyApp, IconLightbulb, IconLink, IconLinux, IconLock, IconLockOpen, IconLogin, IconLogout, IconMacos, IconMagicWand, IconMagnifier, IconMail, IconMedal, IconMemory, IconMenuGrid, IconMenuHamburger, IconMessage, IconMessageAlert, IconMessageQuestion, IconMicrophone, IconMinus, IconMinusCircle, IconMinusCircleFilled, IconMobile, IconMobileLandscape, IconMonitorChart, IconMoreHorizontal, IconMoreVertical, IconNews, IconNextjs, IconNodejs, IconOpenInNew, IconOther, IconOutsideContributor, IconOverview, IconPause, IconPencil, IconPeople, IconPercent, IconPerson, IconPersonWithDesk, IconPlay, IconPlus, IconPlusCircle, IconPlusCircleFilled, IconPower, IconProject, IconProjectSettings, IconPull, IconPush, IconPuzzle, IconPython, IconPythonColor, IconQuestionCircle, IconQuestionCircleFilled, IconReact, IconRefresh, IconRegex, IconRelease, IconReleaseFilled, IconRemoteAccess, IconReplace, IconResponsiveness, IconReviewerApproved, IconReviewerAssigned, IconReviewerRejected, IconRuby, IconRubyColor, IconSave, IconSecurityShield, IconSettings, IconSettingsFilled, IconShuffle, IconSiren, IconSkip, IconSkipCircle, IconSkipCircleFilled, IconSlack, IconSlackColor, IconSparkle, IconSparkleFilled, IconSpinnerOnDisabled, IconSpinnerPurple, IconSpinnerPurpleDouble, IconSpinnerWhite, IconStability, IconStack, IconStar, IconStep, IconStop, IconStopwatch, IconTag, IconTasks, IconTeams, IconTeamsColor, IconTemplateCode, IconTerminal, IconTestQuarantine, IconThemeDarkToggle, IconThumbDown, IconThumbUp, IconTools, IconTrash, IconTrigger, IconUbuntu, IconUbuntuColor, IconUnity3D, IconUpload, IconValidateShield, IconVideo, IconWarning, IconWarningYellow, IconWebUi, IconWebhooks, IconWorkflow, IconWorkflowFlow, IconXTwitter, IconXamarin, IconXcode, bitkitIcon, bitkitTheme as bitriseTheme, createBitkitToast, createTreeCollection };

package/dist/theme/slot-recipes/CodeSnippet.recipe.d.ts

@@ -1,4 +1,4 @@
-declare const codeSnippetSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "root" | "copyButton" | "showMoreContainer" | "showMoreGradient" | "showMoreButton", {
+declare const codeSnippetSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "root" | "copyButton" | "copyButtonWrapper" | "showMoreContainer" | "showMoreGradient" | "showMoreButton", {
     variant: {
         inline: {
             root: {
@@ -62,6 +62,10 @@ declare const codeSnippetSlotRecipe: import('@chakra-ui/react').SlotRecipeDefini
                 borderRadius: "4";
                 overflow: "hidden";
                 padding: "8";
+            };
+            copyButtonWrapper: {
+                background: "background/secondary";
+                padding: "4";
                 position: "absolute";
                 right: number;
                 top: number;
@@ -88,6 +92,7 @@ declare const codeSnippetSlotRecipe: import('@chakra-ui/react').SlotRecipeDefini
                 color: "text/secondary";
                 cursor: "pointer";
                 display: "flex";
+                fontFamily: "body";
                 gap: "4";
                 justifyContent: "center";
                 minWidth: "64";

package/dist/theme/slot-recipes/CodeSnippet.recipe.js

@@ -6,6 +6,7 @@ var codeSnippetSlotRecipe = defineSlotRecipe({
 		"root",
 		"content",
 		"copyButton",
+		"copyButtonWrapper",
 		"showMoreContainer",
 		"showMoreGradient",
 		"showMoreButton"
@@ -96,7 +97,11 @@ var codeSnippetSlotRecipe = defineSlotRecipe({
 				copyButton: {
 					borderRadius: "4",
 					overflow: "hidden",
-					padding: "8",
+					padding: "8"
+				},
+				copyButtonWrapper: {
+					background: "background/secondary",
+					padding: "4",
 					position: "absolute",
 					right: 0,
 					top: 0
@@ -123,6 +128,7 @@ var codeSnippetSlotRecipe = defineSlotRecipe({
 					color: "text/secondary",
 					cursor: "pointer",
 					display: "flex",
+					fontFamily: "body",
 					gap: "4",
 					justifyContent: "center",
 					minWidth: "64",
@@ -178,8 +184,8 @@ var codeSnippetSlotRecipe = defineSlotRecipe({
 			css: { root: {
 				cursor: "pointer",
 				userSelect: "none",
-				_hover: { background: "background/hover" },
-				_active: { background: "background/active" }
+				"&:hover:not(:active)": { background: "background/hover" },
+				"&:active": { background: "background/active" }
 			} }
 		},
 		{

package/dist/theme/slot-recipes/CodeSnippet.recipe.js.map

@@ -1 +1 @@
-{"version":3,"file":"CodeSnippet.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/CodeSnippet.recipe.ts"],"sourcesContent":["import { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nconst codeSnippetSlotRecipe = defineSlotRecipe({\n  className: 'code-snippet',\n  slots: ['root', 'content', 'copyButton', 'showMoreContainer', 'showMoreGradient', 'showMoreButton'],\n  base: {\n    root: {\n      background: 'background/secondary',\n    },\n    content: {\n      flex: '1',\n      minWidth: 0,\n    },\n    copyButton: {\n      background: 'background/secondary',\n      color: 'icon/secondary',\n      cursor: 'pointer',\n      _hover: {\n        background: 'background/hover',\n        color: 'icon/primary',\n        _active: {\n          background: 'background/active',\n          color: 'icon/primary',\n        },\n      },\n      _active: {\n        background: 'background/active',\n        color: 'icon/primary',\n      },\n      _focusVisible: {\n        outlineOffset: '-3px',\n      },\n    },\n  },\n  variants: {\n    variant: {\n      inline: {\n        root: {\n          alignItems: 'center',\n          borderRadius: '2',\n          color: 'text/body',\n          display: 'inline-flex',\n          paddingBlock: '2',\n          paddingInline: '6',\n          whiteSpace: 'nowrap',\n        },\n      },\n      single: {\n        root: {\n          alignItems: 'center',\n          borderRadius: '4',\n          display: 'flex',\n          height: '40',\n          isolation: 'isolate',\n          overflow: 'hidden',\n          whiteSpace: 'nowrap',\n        },\n        content: {\n          alignItems: 'center',\n          display: 'flex',\n          height: '40',\n          overflow: 'hidden',\n          paddingInlineStart: '16',\n          position: 'relative',\n          _after: {\n            background: 'linear-gradient(to left, var(--colors-background-secondary), transparent)',\n            content: '\"\"',\n            height: '40',\n            pointerEvents: 'none',\n            position: 'absolute',\n            right: 0,\n            top: 0,\n            width: '8',\n          },\n        },\n        copyButton: {\n          flexShrink: '0',\n          padding: '12',\n        },\n      },\n      multi: {\n        root: {\n          borderRadius: '4',\n          display: 'flex',\n          flexDirection: 'column',\n          padding: '16',\n          position: 'relative',\n        },\n        content: {\n          color: 'text/body',\n          overflowY: 'auto',\n          transition: 'max-height 0.3s ease',\n          whiteSpace: 'pre-wrap',\n        },\n        copyButton: {\n          borderRadius: '4',\n          overflow: 'hidden',\n          padding: '8',\n          position: 'absolute',\n          right: 0,\n          top: 0,\n        },\n        showMoreContainer: {\n          alignItems: 'center',\n          display: 'flex',\n          justifyContent: 'flex-end',\n        },\n        showMoreGradient: {\n          background: 'linear-gradient(to top, var(--colors-background-secondary) 33%, transparent)',\n          borderBottomRadius: '4',\n          bottom: 0,\n          height: '40',\n          left: 0,\n          pointerEvents: 'none',\n          position: 'absolute',\n          right: 0,\n        },\n        showMoreButton: {\n          alignItems: 'center',\n          background: 'background/secondary',\n          borderRadius: '4',\n          color: 'text/secondary',\n          cursor: 'pointer',\n          display: 'flex',\n          gap: '4',\n          justifyContent: 'center',\n          minWidth: '64',\n          paddingBlock: '8',\n          paddingInline: '12',\n          position: 'relative',\n          textStyle: 'comp/button/md',\n          _hover: {\n            background: 'background/hover',\n            color: 'text/primary',\n            _active: {\n              background: 'background/active',\n              color: 'text/primary',\n              overflow: 'hidden',\n            },\n          },\n          _active: {\n            background: 'background/active',\n            color: 'text/primary',\n            overflow: 'hidden',\n          },\n          _focusVisible: {\n            outlineOffset: '-3px',\n          },\n        },\n      },\n    },\n    size: {\n      md: {\n        root: { textStyle: 'code/md' },\n        content: { textStyle: 'code/md' },\n      },\n      lg: {\n        root: { textStyle: 'code/lg' },\n        content: { textStyle: 'code/lg' },\n      },\n    },\n    interactive: {\n      true: {},\n      false: {},\n    },\n    hasShowMore: {\n      true: {},\n      false: {},\n    },\n    isExpanded: {\n      true: {},\n      false: {},\n    },\n  },\n  compoundVariants: [\n    {\n      variant: 'inline',\n      interactive: true,\n      css: {\n        root: {\n          cursor: 'pointer',\n          userSelect: 'none',\n          _hover: {\n            background: 'background/hover',\n          },\n          _active: {\n            background: 'background/active',\n          },\n        },\n      },\n    },\n    {\n      variant: 'multi',\n      hasShowMore: true,\n      css: {\n        root: { paddingBlockEnd: 0, paddingInlineEnd: '8' },\n      },\n    },\n    {\n      variant: 'multi',\n      hasShowMore: true,\n      isExpanded: false,\n      css: {\n        showMoreContainer: { bottom: 0, left: 0, position: 'absolute', right: 0 },\n      },\n    },\n    {\n      variant: 'multi',\n      hasShowMore: true,\n      isExpanded: true,\n      css: {\n        root: { padding: 0, paddingInlineEnd: 0 },\n        content: { overflow: 'auto', padding: '16', paddingBlockEnd: 0 },\n        showMoreContainer: { position: 'relative' },\n      },\n    },\n  ],\n  defaultVariants: {\n    interactive: false,\n    size: 'lg',\n    variant: 'single',\n  },\n});\n\nexport default codeSnippetSlotRecipe;\n"],"mappings":"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"}
+{"version":3,"file":"CodeSnippet.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/CodeSnippet.recipe.ts"],"sourcesContent":["import { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nconst codeSnippetSlotRecipe = defineSlotRecipe({\n  className: 'code-snippet',\n  slots: [\n    'root',\n    'content',\n    'copyButton',\n    'copyButtonWrapper',\n    'showMoreContainer',\n    'showMoreGradient',\n    'showMoreButton',\n  ],\n  base: {\n    root: {\n      background: 'background/secondary',\n    },\n    content: {\n      flex: '1',\n      minWidth: 0,\n    },\n    copyButton: {\n      background: 'background/secondary',\n      color: 'icon/secondary',\n      cursor: 'pointer',\n      _hover: {\n        background: 'background/hover',\n        color: 'icon/primary',\n        _active: {\n          background: 'background/active',\n          color: 'icon/primary',\n        },\n      },\n      _active: {\n        background: 'background/active',\n        color: 'icon/primary',\n      },\n      _focusVisible: {\n        outlineOffset: '-3px',\n      },\n    },\n  },\n  variants: {\n    variant: {\n      inline: {\n        root: {\n          alignItems: 'center',\n          borderRadius: '2',\n          color: 'text/body',\n          display: 'inline-flex',\n          paddingBlock: '2',\n          paddingInline: '6',\n          whiteSpace: 'nowrap',\n        },\n      },\n      single: {\n        root: {\n          alignItems: 'center',\n          borderRadius: '4',\n          display: 'flex',\n          height: '40',\n          isolation: 'isolate',\n          overflow: 'hidden',\n          whiteSpace: 'nowrap',\n        },\n        content: {\n          alignItems: 'center',\n          display: 'flex',\n          height: '40',\n          overflow: 'hidden',\n          paddingInlineStart: '16',\n          position: 'relative',\n          _after: {\n            background: 'linear-gradient(to left, var(--colors-background-secondary), transparent)',\n            content: '\"\"',\n            height: '40',\n            pointerEvents: 'none',\n            position: 'absolute',\n            right: 0,\n            top: 0,\n            width: '8',\n          },\n        },\n        copyButton: {\n          flexShrink: '0',\n          padding: '12',\n        },\n      },\n      multi: {\n        root: {\n          borderRadius: '4',\n          display: 'flex',\n          flexDirection: 'column',\n          padding: '16',\n          position: 'relative',\n        },\n        content: {\n          color: 'text/body',\n          overflowY: 'auto',\n          transition: 'max-height 0.3s ease',\n          whiteSpace: 'pre-wrap',\n        },\n        copyButton: {\n          borderRadius: '4',\n          overflow: 'hidden',\n          padding: '8',\n        },\n        copyButtonWrapper: {\n          background: 'background/secondary',\n          padding: '4',\n          position: 'absolute',\n          right: 0,\n          top: 0,\n        },\n        showMoreContainer: {\n          alignItems: 'center',\n          display: 'flex',\n          justifyContent: 'flex-end',\n        },\n        showMoreGradient: {\n          background: 'linear-gradient(to top, var(--colors-background-secondary) 33%, transparent)',\n          borderBottomRadius: '4',\n          bottom: 0,\n          height: '40',\n          left: 0,\n          pointerEvents: 'none',\n          position: 'absolute',\n          right: 0,\n        },\n        showMoreButton: {\n          alignItems: 'center',\n          background: 'background/secondary',\n          borderRadius: '4',\n          color: 'text/secondary',\n          cursor: 'pointer',\n          display: 'flex',\n          fontFamily: 'body',\n          gap: '4',\n          justifyContent: 'center',\n          minWidth: '64',\n          paddingBlock: '8',\n          paddingInline: '12',\n          position: 'relative',\n          textStyle: 'comp/button/md',\n          _hover: {\n            background: 'background/hover',\n            color: 'text/primary',\n            _active: {\n              background: 'background/active',\n              color: 'text/primary',\n              overflow: 'hidden',\n            },\n          },\n          _active: {\n            background: 'background/active',\n            color: 'text/primary',\n            overflow: 'hidden',\n          },\n          _focusVisible: {\n            outlineOffset: '-3px',\n          },\n        },\n      },\n    },\n    size: {\n      md: {\n        root: { textStyle: 'code/md' },\n        content: { textStyle: 'code/md' },\n      },\n      lg: {\n        root: { textStyle: 'code/lg' },\n        content: { textStyle: 'code/lg' },\n      },\n    },\n    interactive: {\n      true: {},\n      false: {},\n    },\n    hasShowMore: {\n      true: {},\n      false: {},\n    },\n    isExpanded: {\n      true: {},\n      false: {},\n    },\n  },\n  compoundVariants: [\n    {\n      variant: 'inline',\n      interactive: true,\n      css: {\n        root: {\n          cursor: 'pointer',\n          userSelect: 'none',\n          '&:hover:not(:active)': {\n            background: 'background/hover',\n          },\n          '&:active': {\n            background: 'background/active',\n          },\n        },\n      },\n    },\n    {\n      variant: 'multi',\n      hasShowMore: true,\n      css: {\n        root: { paddingBlockEnd: 0, paddingInlineEnd: '8' },\n      },\n    },\n    {\n      variant: 'multi',\n      hasShowMore: true,\n      isExpanded: false,\n      css: {\n        showMoreContainer: { bottom: 0, left: 0, position: 'absolute', right: 0 },\n      },\n    },\n    {\n      variant: 'multi',\n      hasShowMore: true,\n      isExpanded: true,\n      css: {\n        root: { padding: 0, paddingInlineEnd: 0 },\n        content: { overflow: 'auto', padding: '16', paddingBlockEnd: 0 },\n        showMoreContainer: { position: 'relative' },\n      },\n    },\n  ],\n  defaultVariants: {\n    interactive: false,\n    size: 'lg',\n    variant: 'single',\n  },\n});\n\nexport default codeSnippetSlotRecipe;\n"],"mappings":"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"}

package/dist/theme/slot-recipes/Combobox.recipe.d.ts

@@ -1,4 +1,4 @@
-declare const comboboxSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "input" | "label" | "list" | "root" | "item" | "itemIndicator" | "trigger" | "positioner" | "clearTrigger" | "control" | "itemText" | "itemGroup" | "itemGroupLabel" | "indicatorGroup" | "empty" | "emptyHelperText", {
+declare const comboboxSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "input" | "label" | "list" | "root" | "item" | "itemIndicator" | "trigger" | "positioner" | "clearTrigger" | "control" | "emptyHelperText" | "itemText" | "itemGroup" | "itemGroupLabel" | "indicatorGroup" | "empty", {
     size: {
         md: {
             input: import('@chakra-ui/react').SystemStyleObject;

package/dist/theme/slot-recipes/Multiselect.recipe.d.ts

@@ -0,0 +1,48 @@
+export declare const multiselectSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"overlay" | "trigger" | "indicator" | "control" | "indicatorGroup" | "tagsBlock" | "placeholderText", {
+    constrained: {
+        true: {
+            overlay: {
+                overflow: "hidden";
+            };
+            tagsBlock: {
+                flexWrap: "nowrap";
+            };
+        };
+        false: {};
+    };
+    size: {
+        lg: {
+            overlay: {
+                minHeight: "48";
+                paddingBlock: string;
+            };
+            trigger: {
+                textStyle: "body/lg/regular";
+            };
+            placeholderText: {
+                textStyle: "body/lg/regular";
+                lineHeight: string;
+            };
+        };
+        md: {
+            indicatorGroup: {
+                height: "40";
+            };
+            overlay: {
+                minHeight: "40";
+                paddingBlock: string;
+                '&:has([data-slot="tag"])': {
+                    paddingInlineStart: string;
+                };
+            };
+            trigger: {
+                textStyle: "body/md/regular";
+            };
+            placeholderText: {
+                textStyle: "body/md/regular";
+                lineHeight: string;
+            };
+        };
+    };
+}>;
+export default multiselectSlotRecipe;