@bitrise/bitkit-v2 0.3.462-beta.2923 → 0.3.462

package/dist/components/BitkitSelectMenu/SelectMenuShell.js

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

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

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

package/dist/components/BitkitTreeView/BitkitTreeView.js

@@ -90,7 +90,10 @@ var Nodes = ({ indentGuide, render, renderBranchFooter, variant }) => {
 * - Enter on a node selects it and does not fire a DOM click, so open things from
 *   `onSelectionChange`. Activating the selected leaf again changes nothing, so a leaf that should
 *   reopen needs its own `onClick` and `onKeyDown` for that case.
-* - A node with `children: []` renders as a leaf, not as an empty branch.
+* - A node with `children: []` renders as a leaf, not as an empty branch. For an empty folder, give the
+*   collection a `nodeToChildrenCount` that returns `0` for it, and put `disabled: true` on the node itself:
+*   Zag reads `node.disabled` and ignores the collection's `isNodeDisabled`. The folder then renders in the
+*   disabled colours, cannot be opened, and keeps its actions.
 * - The `navigation` design has no badges, no actions and no subtext on leaves; those slots are drawn
 *   for `files`.
 */

package/dist/components/BitkitTreeView/BitkitTreeView.js.map

@@ -1 +1 @@
-{"version":3,"file":"BitkitTreeView.js","names":[],"sources":["../../../lib/components/BitkitTreeView/BitkitTreeView.tsx"],"sourcesContent":["// eslint-disable-next-line no-restricted-imports\nimport { createContext } from '@chakra-ui/react';\nimport { Box } from '@chakra-ui/react/box';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport {\n  TreeView,\n  type TreeViewBranchControlProps,\n  type TreeViewItemProps,\n  type TreeViewNodeRenderProps,\n  type TreeViewRootProps,\n  useTreeViewContext,\n} from '@chakra-ui/react/tree-view';\nimport { VisuallyHidden } from '@chakra-ui/react/visually-hidden';\nimport { cloneElement, forwardRef, type ReactElement, type ReactNode } from 'react';\n\nimport { type BitkitIconComponent, IconChevronRight, IconFolder, IconWarningYellow } from '../../icons';\nimport { type BitkitColorToken } from '../../theme/themeUtils';\nimport { withSubComponents } from '../../utilities/withSubComponents';\nimport BitkitTooltip from '../BitkitTooltip/BitkitTooltip';\n\n// Re-export for consumer convenience\nexport { createTreeCollection } from '@chakra-ui/react/collection';\n\n// Re-export useful types\nexport type {\n  TreeViewExpandedChangeDetails as BitkitTreeViewExpandedChangeDetails,\n  TreeViewNodeRenderProps as BitkitTreeViewNodeRenderProps,\n  TreeViewSelectionChangeDetails as BitkitTreeViewSelectionChangeDetails,\n} from '@chakra-ui/react/tree-view';\n\n// --- Variant context ---\n\nexport type BitkitTreeViewVariant = 'files' | 'navigation';\n\nconst [VariantProvider, useVariant] = createContext<{ variant: BitkitTreeViewVariant }>({\n  name: 'BitkitTreeViewVariantContext',\n  defaultValue: { variant: 'files' },\n});\n\nconst useCustomSlotStyles = (variant: BitkitTreeViewVariant) => {\n  const recipe = useSlotRecipe({ key: 'treeView' });\n  return recipe({ variant });\n};\n\n// --- Root ---\n\nexport interface BitkitTreeViewRootProps extends Omit<TreeViewRootProps, 'children'> {\n  children?: ReactNode;\n  render: (props: TreeViewNodeRenderProps) => ReactNode;\n  /**\n   * Content after a branch's children, indented like them: a `BitkitPaginationLoadMore` with\n   * `size=\"xs\"` for a directory that loads its files in pages. Called for branch nodes only;\n   * return `null` for a branch that needs nothing. Designed for the `files` variant.\n   */\n  renderBranchFooter?: (props: TreeViewNodeRenderProps) => ReactNode;\n  variant?: BitkitTreeViewVariant;\n}\n\ninterface NodesProps extends Pick<BitkitTreeViewRootProps, 'render' | 'renderBranchFooter'> {\n  indentGuide?: ReactElement;\n  variant: BitkitTreeViewVariant;\n}\n\n// Chakra's TreeView.Node, which has no slot after a branch's children.\nconst Nodes = ({ indentGuide, render, renderBranchFooter, variant }: NodesProps) => {\n  const tree = useTreeViewContext();\n  const styles = useCustomSlotStyles(variant);\n\n  const renderNode = (node: unknown, indexPath: number[]): ReactNode => (\n    <TreeView.NodeProvider key={indexPath.join('.')} indexPath={indexPath} node={node}>\n      <TreeView.NodeContext>\n        {(nodeState) => {\n          if (!nodeState.isBranch) {\n            return render({ indexPath, node, nodeState });\n          }\n\n          const footer = renderBranchFooter?.({ indexPath, node, nodeState });\n\n          return (\n            <TreeView.Branch>\n              {render({ indexPath, node, nodeState })}\n              <TreeView.BranchContent>\n                {indentGuide}\n                {tree.collection.getNodeChildren(node).map((child, index) => renderNode(child, [...indexPath, index]))}\n                {footer && <Box css={[styles.footer, { '--depth': indexPath.length + 1 }]}>{footer}</Box>}\n              </TreeView.BranchContent>\n            </TreeView.Branch>\n          );\n        }}\n      </TreeView.NodeContext>\n    </TreeView.NodeProvider>\n  );\n\n  return tree.collection.getNodeChildren(tree.collection.rootNode).map((node, index) => renderNode(node, [index]));\n};\n\n/**\n * A tree of collapsible branches and leaves, in a `files` or a `navigation` look. The tree is data,\n * not JSX: build `collection` with `createTreeCollection` (re-exported from here), and `render`\n * returns `BitkitTreeView.Branch` when `nodeState.isBranch` and `BitkitTreeView.Leaf` otherwise.\n *\n * Root also takes Chakra's `TreeView.Root` props: `defaultExpandedValue` / `expandedValue` /\n * `onExpandedChange`, `selectionMode`, `defaultSelectedValue` / `selectedValue` /\n * `onSelectionChange`, `lazyMount` (keeps unopened branches out of the DOM), and\n * `translations={{ treeLabel }}` for the tree's accessible name. `children` renders after the whole\n * tree, indented like the top-level nodes, and `renderBranchFooter` after one branch's children,\n * indented like them: both take a `BitkitPaginationLoadMore size=\"xs\"` for trees that load in pages.\n *\n * `BitkitTreeView.Branch` (a `TreeView.BranchControl`) and `BitkitTreeView.Leaf` (a `TreeView.Item`,\n * so it takes `onClick` and `onKeyDown`) share these props:\n *\n * | Prop | Type | Notes |\n * | --- | --- | --- |\n * | `label` | `string` | Required. |\n * | `subtext` | `ReactNode` | A second line under the label. |\n * | `suffixText` | `string` | Trailing text, e.g. a count or a duration. |\n * | `suffixIcon` | `BitkitIconComponent` | Trailing icon, before `suffixText`. |\n * | `hasWarning` | `boolean` | A warning icon at the start of the suffix. |\n * | `actions` | `ReactElement[]` | Buttons shown in place of the suffix on hover, forced to `size=\"xs\"`. Their clicks do not reach the row. |\n *\n * Leaf only:\n *\n * | Prop | Type | Notes |\n * | --- | --- | --- |\n * | `icon` | `BitkitIconComponent` | Before the label. Branches draw their own folder or chevron. |\n * | `iconColor` | `icon/*` token | For an icon that carries a status. Wins over hover and selection. |\n * | `badge` | `ReactElement` | Before the label, forced to `size=\"xs\"`. |\n * | `badgeTooltip` | `string` | Shown when the badge is hovered, and read out after the label. Pass it here rather than wrapping `badge` in a tooltip, which would take the `size` instead of the badge. |\n *\n * Behaviour worth knowing:\n * - Enter on a node selects it and does not fire a DOM click, so open things from\n *   `onSelectionChange`. Activating the selected leaf again changes nothing, so a leaf that should\n *   reopen needs its own `onClick` and `onKeyDown` for that case.\n * - A node with `children: []` renders as a leaf, not as an empty branch.\n * - The `navigation` design has no badges, no actions and no subtext on leaves; those slots are drawn\n *   for `files`.\n */\nconst Root = forwardRef<HTMLDivElement, BitkitTreeViewRootProps>(\n  ({ children, render, renderBranchFooter, variant = 'files', ...props }, ref) => {\n    const indentGuide = variant === 'files' ? <TreeView.BranchIndentGuide /> : undefined;\n    const styles = useCustomSlotStyles(variant);\n\n    return (\n      <VariantProvider value={{ variant }}>\n        <TreeView.Root ref={ref} variant={variant} {...props}>\n          <TreeView.Tree>\n            <Nodes\n              indentGuide={indentGuide}\n              render={render}\n              renderBranchFooter={renderBranchFooter}\n              variant={variant}\n            />\n            {children && <Box css={[styles.footer, { '--depth': 1 }]}>{children}</Box>}\n          </TreeView.Tree>\n        </TreeView.Root>\n      </VariantProvider>\n    );\n  },\n);\nRoot.displayName = 'BitkitTreeView';\n\n// --- Actions ---\n\n// The buttons sit inside the row, so a click that bubbled up would also toggle the branch or select the leaf.\nconst Actions = ({ actions, variant }: { actions: ReactElement[]; variant: BitkitTreeViewVariant }) => {\n  const styles = useCustomSlotStyles(variant);\n\n  return (\n    <Box css={styles.actionGroup} onClick={(event) => event.stopPropagation()}>\n      {actions.map((action) => cloneElement(action, { size: 'xs' }))}\n    </Box>\n  );\n};\n\n// --- Branch ---\n\nexport interface BitkitTreeViewBranchProps extends Omit<TreeViewBranchControlProps, 'children'> {\n  actions?: ReactElement[];\n  hasWarning?: boolean;\n  label: string;\n  subtext?: ReactNode;\n  suffixIcon?: BitkitIconComponent;\n  suffixText?: string;\n}\n\nconst Branch = forwardRef<HTMLDivElement, BitkitTreeViewBranchProps>((props, ref) => {\n  const { actions, hasWarning, label, subtext, suffixIcon: SuffixIcon, suffixText, ...rest } = props;\n  const { variant } = useVariant();\n  const styles = useCustomSlotStyles(variant);\n  const hasSuffix = hasWarning || SuffixIcon || suffixText;\n  const hasActions = actions && actions.length > 0;\n\n  const BranchIcon = variant === 'navigation' ? IconChevronRight : IconFolder;\n\n  return (\n    <TreeView.BranchControl ref={ref} className={hasActions ? 'group' : undefined} {...rest}>\n      <TreeView.BranchIndicator>\n        <BranchIcon size=\"16\" />\n      </TreeView.BranchIndicator>\n      <TreeView.BranchText>\n        {label}\n        {subtext && <Text css={styles.secondaryText}>{subtext}</Text>}\n      </TreeView.BranchText>\n      {hasSuffix && (\n        <Box css={styles.suffixGroup}>\n          {hasWarning && <IconWarningYellow size=\"16\" />}\n          {SuffixIcon && <SuffixIcon size=\"16\" />}\n          {suffixText && <span>{suffixText}</span>}\n        </Box>\n      )}\n      {hasActions && <Actions actions={actions} variant={variant} />}\n    </TreeView.BranchControl>\n  );\n});\nBranch.displayName = 'BitkitTreeView.Branch';\n\n// --- Leaf ---\n\nexport interface BitkitTreeViewLeafProps extends Omit<TreeViewItemProps, 'children'> {\n  actions?: ReactElement[];\n  badge?: ReactElement;\n  /** Explains the badge on hover, e.g. what its letter stands for. */\n  badgeTooltip?: string;\n  hasWarning?: boolean;\n  icon?: BitkitIconComponent;\n  /** An `icon/*` token for the icon when it carries meaning of its own, such as a test result's status. */\n  iconColor?: BitkitColorToken<'icon'>;\n  label: string;\n  subtext?: ReactNode;\n  suffixIcon?: BitkitIconComponent;\n  suffixText?: string;\n}\n\nconst Leaf = forwardRef<HTMLDivElement, BitkitTreeViewLeafProps>((props, ref) => {\n  const {\n    actions,\n    badge,\n    badgeTooltip,\n    hasWarning,\n    icon: Icon,\n    iconColor,\n    label,\n    subtext,\n    suffixIcon: SuffixIcon,\n    suffixText,\n    ...rest\n  } = props;\n  const { variant } = useVariant();\n  const styles = useCustomSlotStyles(variant);\n  const hasSuffix = hasWarning || SuffixIcon || suffixText;\n  const hasActions = actions && actions.length > 0;\n  const sizedBadge = badge && cloneElement(badge, { size: 'xs' });\n  const badgeDescription = sizedBadge ? badgeTooltip : undefined;\n\n  return (\n    <TreeView.Item ref={ref} className={hasActions ? 'group' : undefined} {...rest}>\n      {Icon && <Icon color={iconColor} size=\"16\" />}\n      {badgeDescription ? <BitkitTooltip text={badgeDescription}>{sizedBadge}</BitkitTooltip> : sizedBadge}\n      <TreeView.ItemText>\n        {label}\n        {/* A tree has a single Tab stop, so the badge takes no focus: its tooltip is read out with the label instead. */}\n        {badgeDescription && <VisuallyHidden>{`, ${badgeDescription}`}</VisuallyHidden>}\n        {subtext && <Text css={styles.secondaryText}>{subtext}</Text>}\n      </TreeView.ItemText>\n      {hasSuffix && (\n        <Box css={styles.suffixGroup}>\n          {hasWarning && <IconWarningYellow size=\"16\" />}\n          {SuffixIcon && <SuffixIcon size=\"16\" />}\n          {suffixText && <span>{suffixText}</span>}\n        </Box>\n      )}\n      {hasActions && <Actions actions={actions} variant={variant} />}\n    </TreeView.Item>\n  );\n});\nLeaf.displayName = 'BitkitTreeView.Leaf';\n\n// --- Main export ---\n\nconst BitkitTreeView = withSubComponents(Root, {\n  Branch,\n  Leaf,\n});\n\nexport default BitkitTreeView;\n"],"mappings":"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"}
+{"version":3,"file":"BitkitTreeView.js","names":[],"sources":["../../../lib/components/BitkitTreeView/BitkitTreeView.tsx"],"sourcesContent":["// eslint-disable-next-line no-restricted-imports\nimport { createContext } from '@chakra-ui/react';\nimport { Box } from '@chakra-ui/react/box';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport {\n  TreeView,\n  type TreeViewBranchControlProps,\n  type TreeViewItemProps,\n  type TreeViewNodeRenderProps,\n  type TreeViewRootProps,\n  useTreeViewContext,\n} from '@chakra-ui/react/tree-view';\nimport { VisuallyHidden } from '@chakra-ui/react/visually-hidden';\nimport { cloneElement, forwardRef, type ReactElement, type ReactNode } from 'react';\n\nimport { type BitkitIconComponent, IconChevronRight, IconFolder, IconWarningYellow } from '../../icons';\nimport { type BitkitColorToken } from '../../theme/themeUtils';\nimport { withSubComponents } from '../../utilities/withSubComponents';\nimport BitkitTooltip from '../BitkitTooltip/BitkitTooltip';\n\n// Re-export for consumer convenience\nexport { createTreeCollection } from '@chakra-ui/react/collection';\n\n// Re-export useful types\nexport type {\n  TreeViewExpandedChangeDetails as BitkitTreeViewExpandedChangeDetails,\n  TreeViewNodeRenderProps as BitkitTreeViewNodeRenderProps,\n  TreeViewSelectionChangeDetails as BitkitTreeViewSelectionChangeDetails,\n} from '@chakra-ui/react/tree-view';\n\n// --- Variant context ---\n\nexport type BitkitTreeViewVariant = 'files' | 'navigation';\n\nconst [VariantProvider, useVariant] = createContext<{ variant: BitkitTreeViewVariant }>({\n  name: 'BitkitTreeViewVariantContext',\n  defaultValue: { variant: 'files' },\n});\n\nconst useCustomSlotStyles = (variant: BitkitTreeViewVariant) => {\n  const recipe = useSlotRecipe({ key: 'treeView' });\n  return recipe({ variant });\n};\n\n// --- Root ---\n\nexport interface BitkitTreeViewRootProps extends Omit<TreeViewRootProps, 'children'> {\n  children?: ReactNode;\n  render: (props: TreeViewNodeRenderProps) => ReactNode;\n  /**\n   * Content after a branch's children, indented like them: a `BitkitPaginationLoadMore` with\n   * `size=\"xs\"` for a directory that loads its files in pages. Called for branch nodes only;\n   * return `null` for a branch that needs nothing. Designed for the `files` variant.\n   */\n  renderBranchFooter?: (props: TreeViewNodeRenderProps) => ReactNode;\n  variant?: BitkitTreeViewVariant;\n}\n\ninterface NodesProps extends Pick<BitkitTreeViewRootProps, 'render' | 'renderBranchFooter'> {\n  indentGuide?: ReactElement;\n  variant: BitkitTreeViewVariant;\n}\n\n// Chakra's TreeView.Node, which has no slot after a branch's children.\nconst Nodes = ({ indentGuide, render, renderBranchFooter, variant }: NodesProps) => {\n  const tree = useTreeViewContext();\n  const styles = useCustomSlotStyles(variant);\n\n  const renderNode = (node: unknown, indexPath: number[]): ReactNode => (\n    <TreeView.NodeProvider key={indexPath.join('.')} indexPath={indexPath} node={node}>\n      <TreeView.NodeContext>\n        {(nodeState) => {\n          if (!nodeState.isBranch) {\n            return render({ indexPath, node, nodeState });\n          }\n\n          const footer = renderBranchFooter?.({ indexPath, node, nodeState });\n\n          return (\n            <TreeView.Branch>\n              {render({ indexPath, node, nodeState })}\n              <TreeView.BranchContent>\n                {indentGuide}\n                {tree.collection.getNodeChildren(node).map((child, index) => renderNode(child, [...indexPath, index]))}\n                {footer && <Box css={[styles.footer, { '--depth': indexPath.length + 1 }]}>{footer}</Box>}\n              </TreeView.BranchContent>\n            </TreeView.Branch>\n          );\n        }}\n      </TreeView.NodeContext>\n    </TreeView.NodeProvider>\n  );\n\n  return tree.collection.getNodeChildren(tree.collection.rootNode).map((node, index) => renderNode(node, [index]));\n};\n\n/**\n * A tree of collapsible branches and leaves, in a `files` or a `navigation` look. The tree is data,\n * not JSX: build `collection` with `createTreeCollection` (re-exported from here), and `render`\n * returns `BitkitTreeView.Branch` when `nodeState.isBranch` and `BitkitTreeView.Leaf` otherwise.\n *\n * Root also takes Chakra's `TreeView.Root` props: `defaultExpandedValue` / `expandedValue` /\n * `onExpandedChange`, `selectionMode`, `defaultSelectedValue` / `selectedValue` /\n * `onSelectionChange`, `lazyMount` (keeps unopened branches out of the DOM), and\n * `translations={{ treeLabel }}` for the tree's accessible name. `children` renders after the whole\n * tree, indented like the top-level nodes, and `renderBranchFooter` after one branch's children,\n * indented like them: both take a `BitkitPaginationLoadMore size=\"xs\"` for trees that load in pages.\n *\n * `BitkitTreeView.Branch` (a `TreeView.BranchControl`) and `BitkitTreeView.Leaf` (a `TreeView.Item`,\n * so it takes `onClick` and `onKeyDown`) share these props:\n *\n * | Prop | Type | Notes |\n * | --- | --- | --- |\n * | `label` | `string` | Required. |\n * | `subtext` | `ReactNode` | A second line under the label. |\n * | `suffixText` | `string` | Trailing text, e.g. a count or a duration. |\n * | `suffixIcon` | `BitkitIconComponent` | Trailing icon, before `suffixText`. |\n * | `hasWarning` | `boolean` | A warning icon at the start of the suffix. |\n * | `actions` | `ReactElement[]` | Buttons shown in place of the suffix on hover, forced to `size=\"xs\"`. Their clicks do not reach the row. |\n *\n * Leaf only:\n *\n * | Prop | Type | Notes |\n * | --- | --- | --- |\n * | `icon` | `BitkitIconComponent` | Before the label. Branches draw their own folder or chevron. |\n * | `iconColor` | `icon/*` token | For an icon that carries a status. Wins over hover and selection. |\n * | `badge` | `ReactElement` | Before the label, forced to `size=\"xs\"`. |\n * | `badgeTooltip` | `string` | Shown when the badge is hovered, and read out after the label. Pass it here rather than wrapping `badge` in a tooltip, which would take the `size` instead of the badge. |\n *\n * Behaviour worth knowing:\n * - Enter on a node selects it and does not fire a DOM click, so open things from\n *   `onSelectionChange`. Activating the selected leaf again changes nothing, so a leaf that should\n *   reopen needs its own `onClick` and `onKeyDown` for that case.\n * - A node with `children: []` renders as a leaf, not as an empty branch. For an empty folder, give the\n *   collection a `nodeToChildrenCount` that returns `0` for it, and put `disabled: true` on the node itself:\n *   Zag reads `node.disabled` and ignores the collection's `isNodeDisabled`. The folder then renders in the\n *   disabled colours, cannot be opened, and keeps its actions.\n * - The `navigation` design has no badges, no actions and no subtext on leaves; those slots are drawn\n *   for `files`.\n */\nconst Root = forwardRef<HTMLDivElement, BitkitTreeViewRootProps>(\n  ({ children, render, renderBranchFooter, variant = 'files', ...props }, ref) => {\n    const indentGuide = variant === 'files' ? <TreeView.BranchIndentGuide /> : undefined;\n    const styles = useCustomSlotStyles(variant);\n\n    return (\n      <VariantProvider value={{ variant }}>\n        <TreeView.Root ref={ref} variant={variant} {...props}>\n          <TreeView.Tree>\n            <Nodes\n              indentGuide={indentGuide}\n              render={render}\n              renderBranchFooter={renderBranchFooter}\n              variant={variant}\n            />\n            {children && <Box css={[styles.footer, { '--depth': 1 }]}>{children}</Box>}\n          </TreeView.Tree>\n        </TreeView.Root>\n      </VariantProvider>\n    );\n  },\n);\nRoot.displayName = 'BitkitTreeView';\n\n// --- Actions ---\n\n// The buttons sit inside the row, so a click that bubbled up would also toggle the branch or select the leaf.\nconst Actions = ({ actions, variant }: { actions: ReactElement[]; variant: BitkitTreeViewVariant }) => {\n  const styles = useCustomSlotStyles(variant);\n\n  return (\n    <Box css={styles.actionGroup} onClick={(event) => event.stopPropagation()}>\n      {actions.map((action) => cloneElement(action, { size: 'xs' }))}\n    </Box>\n  );\n};\n\n// --- Branch ---\n\nexport interface BitkitTreeViewBranchProps extends Omit<TreeViewBranchControlProps, 'children'> {\n  actions?: ReactElement[];\n  hasWarning?: boolean;\n  label: string;\n  subtext?: ReactNode;\n  suffixIcon?: BitkitIconComponent;\n  suffixText?: string;\n}\n\nconst Branch = forwardRef<HTMLDivElement, BitkitTreeViewBranchProps>((props, ref) => {\n  const { actions, hasWarning, label, subtext, suffixIcon: SuffixIcon, suffixText, ...rest } = props;\n  const { variant } = useVariant();\n  const styles = useCustomSlotStyles(variant);\n  const hasSuffix = hasWarning || SuffixIcon || suffixText;\n  const hasActions = actions && actions.length > 0;\n\n  const BranchIcon = variant === 'navigation' ? IconChevronRight : IconFolder;\n\n  return (\n    <TreeView.BranchControl ref={ref} className={hasActions ? 'group' : undefined} {...rest}>\n      <TreeView.BranchIndicator>\n        <BranchIcon size=\"16\" />\n      </TreeView.BranchIndicator>\n      <TreeView.BranchText>\n        {label}\n        {subtext && <Text css={styles.secondaryText}>{subtext}</Text>}\n      </TreeView.BranchText>\n      {hasSuffix && (\n        <Box css={styles.suffixGroup}>\n          {hasWarning && <IconWarningYellow size=\"16\" />}\n          {SuffixIcon && <SuffixIcon size=\"16\" />}\n          {suffixText && <span>{suffixText}</span>}\n        </Box>\n      )}\n      {hasActions && <Actions actions={actions} variant={variant} />}\n    </TreeView.BranchControl>\n  );\n});\nBranch.displayName = 'BitkitTreeView.Branch';\n\n// --- Leaf ---\n\nexport interface BitkitTreeViewLeafProps extends Omit<TreeViewItemProps, 'children'> {\n  actions?: ReactElement[];\n  badge?: ReactElement;\n  /** Explains the badge on hover, e.g. what its letter stands for. */\n  badgeTooltip?: string;\n  hasWarning?: boolean;\n  icon?: BitkitIconComponent;\n  /** An `icon/*` token for the icon when it carries meaning of its own, such as a test result's status. */\n  iconColor?: BitkitColorToken<'icon'>;\n  label: string;\n  subtext?: ReactNode;\n  suffixIcon?: BitkitIconComponent;\n  suffixText?: string;\n}\n\nconst Leaf = forwardRef<HTMLDivElement, BitkitTreeViewLeafProps>((props, ref) => {\n  const {\n    actions,\n    badge,\n    badgeTooltip,\n    hasWarning,\n    icon: Icon,\n    iconColor,\n    label,\n    subtext,\n    suffixIcon: SuffixIcon,\n    suffixText,\n    ...rest\n  } = props;\n  const { variant } = useVariant();\n  const styles = useCustomSlotStyles(variant);\n  const hasSuffix = hasWarning || SuffixIcon || suffixText;\n  const hasActions = actions && actions.length > 0;\n  const sizedBadge = badge && cloneElement(badge, { size: 'xs' });\n  const badgeDescription = sizedBadge ? badgeTooltip : undefined;\n\n  return (\n    <TreeView.Item ref={ref} className={hasActions ? 'group' : undefined} {...rest}>\n      {Icon && <Icon color={iconColor} size=\"16\" />}\n      {badgeDescription ? <BitkitTooltip text={badgeDescription}>{sizedBadge}</BitkitTooltip> : sizedBadge}\n      <TreeView.ItemText>\n        {label}\n        {/* A tree has a single Tab stop, so the badge takes no focus: its tooltip is read out with the label instead. */}\n        {badgeDescription && <VisuallyHidden>{`, ${badgeDescription}`}</VisuallyHidden>}\n        {subtext && <Text css={styles.secondaryText}>{subtext}</Text>}\n      </TreeView.ItemText>\n      {hasSuffix && (\n        <Box css={styles.suffixGroup}>\n          {hasWarning && <IconWarningYellow size=\"16\" />}\n          {SuffixIcon && <SuffixIcon size=\"16\" />}\n          {suffixText && <span>{suffixText}</span>}\n        </Box>\n      )}\n      {hasActions && <Actions actions={actions} variant={variant} />}\n    </TreeView.Item>\n  );\n});\nLeaf.displayName = 'BitkitTreeView.Leaf';\n\n// --- Main export ---\n\nconst BitkitTreeView = withSubComponents(Root, {\n  Branch,\n  Leaf,\n});\n\nexport default BitkitTreeView;\n"],"mappings":"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"}

package/dist/components/index.d.ts

@@ -93,5 +93,3 @@ export { default as BitkitToggleButton, type BitkitToggleButtonProps } from './B
 export { default as BitkitTooltip, type BitkitTooltipProps } from './BitkitTooltip/BitkitTooltip';
 export { default as BitkitTour, type BitkitTourInstance, type BitkitTourOptions, type BitkitTourProps, type BitkitTourSecondaryAction, type BitkitTourStep, useBitkitTour, } from './BitkitTour/BitkitTour';
 export { default as BitkitTreeView, type BitkitTreeViewBranchProps, type BitkitTreeViewExpandedChangeDetails, type BitkitTreeViewLeafProps, type BitkitTreeViewNodeRenderProps, type BitkitTreeViewRootProps, type BitkitTreeViewSelectionChangeDetails, createTreeCollection, } from './BitkitTreeView/BitkitTreeView';
-export { default as BitkitUISideNav, type BitkitUISideNavBodyProps, type BitkitUISideNavFooterHeadingProps, type BitkitUISideNavFooterProps, type BitkitUISideNavItemProps, type BitkitUISideNavLinkAsAnchorProps, type BitkitUISideNavLinkAsButtonProps, type BitkitUISideNavLinkProps, type BitkitUISideNavProps, type BitkitUISideNavWorkspaceProps, type BitkitUISideNavWorkspaceSelectorProps, uiSideNavRailWidth, } from './BitkitUISideNav/BitkitUISideNav';
-export { useUISideNav } from './BitkitUISideNav/UISideNavContext';

package/dist/main.js

@@ -383,9 +383,6 @@ import BitkitToggleButton from "./components/BitkitToggleButton/BitkitToggleButt
 import BitkitTour, { useBitkitTour } from "./components/BitkitTour/BitkitTour.js";
 import BitkitTreeView, { createTreeCollection } from "./components/BitkitTreeView/BitkitTreeView.js";
 import useResponsive, { ResponsiveProvider } from "./hooks/useResponsive.js";
-import { useUISideNav } from "./components/BitkitUISideNav/UISideNavContext.js";
-import { uiSideNavRailWidth } from "./theme/slot-recipes/UISideNav.recipe.js";
-import BitkitUISideNav_default from "./components/BitkitUISideNav/BitkitUISideNav.js";
 import bitkitTheme from "./theme/index.js";
 import Provider from "./providers/BitkitProvider.js";
-export { BitkitAccordion_default as BitkitAccordion, BitkitActionBar, BitkitActionMenu_default as BitkitActionMenu, BitkitAlert, BitkitAvatar, BitkitBadge, BitkitBreadcrumb, BitkitButton, BitkitCalendar, BitkitCheckbox, BitkitCheckboxGroup, BitkitCloseButton, BitkitCodeSnippet, BitkitCollapsible, BitkitColorButton, BitkitCombobox_default as BitkitCombobox, BitkitControlButton, BitkitDataWidget, BitkitDatePicker, BitkitDefinitionTooltip, BitkitDialog_default as BitkitDialog, BitkitDraggableCard, BitkitDrawer, BitkitEmptyState, BitkitExpandableCard, BitkitField, BitkitFileInput, BitkitFormDialog_default as BitkitFormDialog, BitkitGroupHeading, BitkitHeading, BitkitIconButton, BitkitInlineLoading, BitkitLabel, BitkitLabelTooltip, BitkitLabeledData, BitkitLightbox, BitkitLink, BitkitLinkButton, BitkitList_default as BitkitList, BitkitMarkdown, BitkitMarkdownCard, BitkitMultiselect_default as BitkitMultiselect, BitkitMultiselectMenu, BitkitNativeSelect, BitkitNoteCard, BitkitNumberInput, BitkitOverflowContent, BitkitOverflowTooltip, BitkitPageFooter_default as BitkitPageFooter, BitkitPageHeader, BitkitPageSidebar_default as BitkitPageSidebar, BitkitPagination, BitkitPaginationLoadMore, BitkitPopover, BitkitProgressBar, BitkitPromoBanner, Provider as BitkitProvider, BitkitRadio, BitkitRadioGroup, BitkitRibbon, BitkitSearchInput, BitkitSectionHeading, BitkitSegmentedControl_default as BitkitSegmentedControl, BitkitSelect_default as BitkitSelect, BitkitSelectMenu, BitkitSelectMenuAction, BitkitSelectableTag_default as BitkitSelectableTag, BitkitSettingsCard_default as BitkitSettingsCard, BitkitSkeletonGroup, BitkitSpinner, BitkitSplitButton_default as BitkitSplitButton, BitkitStat, BitkitSteps_default as BitkitSteps, BitkitStepsCard_default as BitkitStepsCard, BitkitStepsDialog_default as BitkitStepsDialog, BitkitSwitch, BitkitTable, BitkitTableCard, BitkitTabs, BitkitTag, BitkitTagsInput, BitkitTextArea, BitkitTextInput, BitkitToggleButton, BitkitTooltip, BitkitTour, BitkitTreeView, BitkitUISideNav_default as BitkitUISideNav, 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, IconBuildHub, IconBuildHubFilled, 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, IconCopilot, IconCopy, IconCordova, IconCpu, IconCreditcard, IconCredits, IconCross, IconCrossCircle, IconCrossCircleFilled, IconCrown, IconCursor, IconCycle, IconDashboard, IconDashboardFilled, IconDeployment, IconDetails, IconDoc, IconDollar, IconDot, IconDotnet, IconDotnetColor, IconDotnetText, IconDotnetTextColor, IconDoubleCircle, IconDownload, IconDragHandle, IconEc2Ami, IconEnterprise, IconErrorCircle, IconErrorCircleFilled, IconExpand, IconExtraBuildCapacity, IconEye, IconEyeSlash, IconFastlane, IconFile, IconFileDoc, IconFilePdf, IconFilePlist, IconFileYml, 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, IconKiroColor, IconKotlin, IconKotlinColor, IconKotlinWhite, IconLaptop, IconLaunchdarkly, IconLegacyApp, IconLightbulb, IconLink, IconLinux, IconLock, IconLockOpen, IconLogin, IconLogout, IconMacos, IconMagicWand, IconMagnifier, IconMail, IconMcp, 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, IconPin, 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, IconTabPlus, IconTag, IconTasks, IconTeams, IconTeamsColor, IconTemplateCode, IconTerminal, IconTerminalFilled, IconTestQuarantine, IconThemeDarkToggle, IconThumbDown, IconThumbUp, IconTools, IconTrash, IconTrigger, IconUbuntu, IconUbuntuColor, IconUnity3D, IconUnpin, IconUpload, IconValidateShield, IconVideo, IconVsCode, IconWarning, IconWarningYellow, IconWebUi, IconWebhooks, IconWindsurf, IconWorkflow, IconWorkflowFlow, IconXTwitter, IconXamarin, IconXcode, ResponsiveProvider, bitkitIcon, bitkitTheme as bitriseTheme, createBitkitToast, createTreeCollection, dismissBitkitToast, rem, uiSideNavRailWidth, useBitkitTour, useResponsive, useStepsDialog, useUISideNav };
+export { BitkitAccordion_default as BitkitAccordion, BitkitActionBar, BitkitActionMenu_default as BitkitActionMenu, BitkitAlert, BitkitAvatar, BitkitBadge, BitkitBreadcrumb, BitkitButton, BitkitCalendar, BitkitCheckbox, BitkitCheckboxGroup, BitkitCloseButton, BitkitCodeSnippet, BitkitCollapsible, BitkitColorButton, BitkitCombobox_default as BitkitCombobox, BitkitControlButton, BitkitDataWidget, BitkitDatePicker, BitkitDefinitionTooltip, BitkitDialog_default as BitkitDialog, BitkitDraggableCard, BitkitDrawer, BitkitEmptyState, BitkitExpandableCard, BitkitField, BitkitFileInput, BitkitFormDialog_default as BitkitFormDialog, BitkitGroupHeading, BitkitHeading, BitkitIconButton, BitkitInlineLoading, BitkitLabel, BitkitLabelTooltip, BitkitLabeledData, BitkitLightbox, BitkitLink, BitkitLinkButton, BitkitList_default as BitkitList, BitkitMarkdown, BitkitMarkdownCard, BitkitMultiselect_default as BitkitMultiselect, BitkitMultiselectMenu, BitkitNativeSelect, BitkitNoteCard, BitkitNumberInput, BitkitOverflowContent, BitkitOverflowTooltip, BitkitPageFooter_default as BitkitPageFooter, BitkitPageHeader, BitkitPageSidebar_default as BitkitPageSidebar, BitkitPagination, BitkitPaginationLoadMore, BitkitPopover, BitkitProgressBar, BitkitPromoBanner, Provider as BitkitProvider, BitkitRadio, BitkitRadioGroup, BitkitRibbon, BitkitSearchInput, BitkitSectionHeading, BitkitSegmentedControl_default as BitkitSegmentedControl, BitkitSelect_default as BitkitSelect, BitkitSelectMenu, BitkitSelectMenuAction, BitkitSelectableTag_default as BitkitSelectableTag, BitkitSettingsCard_default as BitkitSettingsCard, BitkitSkeletonGroup, BitkitSpinner, BitkitSplitButton_default as BitkitSplitButton, BitkitStat, BitkitSteps_default as BitkitSteps, BitkitStepsCard_default as BitkitStepsCard, BitkitStepsDialog_default as BitkitStepsDialog, BitkitSwitch, BitkitTable, BitkitTableCard, BitkitTabs, BitkitTag, BitkitTagsInput, BitkitTextArea, BitkitTextInput, BitkitToggleButton, BitkitTooltip, BitkitTour, BitkitTreeView, 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, IconBuildHub, IconBuildHubFilled, 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, IconCopilot, IconCopy, IconCordova, IconCpu, IconCreditcard, IconCredits, IconCross, IconCrossCircle, IconCrossCircleFilled, IconCrown, IconCursor, IconCycle, IconDashboard, IconDashboardFilled, IconDeployment, IconDetails, IconDoc, IconDollar, IconDot, IconDotnet, IconDotnetColor, IconDotnetText, IconDotnetTextColor, IconDoubleCircle, IconDownload, IconDragHandle, IconEc2Ami, IconEnterprise, IconErrorCircle, IconErrorCircleFilled, IconExpand, IconExtraBuildCapacity, IconEye, IconEyeSlash, IconFastlane, IconFile, IconFileDoc, IconFilePdf, IconFilePlist, IconFileYml, 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, IconKiroColor, IconKotlin, IconKotlinColor, IconKotlinWhite, IconLaptop, IconLaunchdarkly, IconLegacyApp, IconLightbulb, IconLink, IconLinux, IconLock, IconLockOpen, IconLogin, IconLogout, IconMacos, IconMagicWand, IconMagnifier, IconMail, IconMcp, 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, IconPin, 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, IconTabPlus, IconTag, IconTasks, IconTeams, IconTeamsColor, IconTemplateCode, IconTerminal, IconTerminalFilled, IconTestQuarantine, IconThemeDarkToggle, IconThumbDown, IconThumbUp, IconTools, IconTrash, IconTrigger, IconUbuntu, IconUbuntuColor, IconUnity3D, IconUnpin, IconUpload, IconValidateShield, IconVideo, IconVsCode, IconWarning, IconWarningYellow, IconWebUi, IconWebhooks, IconWindsurf, IconWorkflow, IconWorkflowFlow, IconXTwitter, IconXamarin, IconXcode, ResponsiveProvider, bitkitIcon, bitkitTheme as bitriseTheme, createBitkitToast, createTreeCollection, dismissBitkitToast, rem, useBitkitTour, useResponsive, useStepsDialog };

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

@@ -39,8 +39,8 @@ declare const datePickerSelectSlotRecipe: import('@chakra-ui/react').SlotRecipeD
                     textStyle: "body/md/semibold";
                 };
             } | undefined;
-            content?: {
-                '--select-menu-list-max-height': `${number}rem`;
+            itemList?: {
+                maxHeight: `${number}rem`;
             } | undefined;
             itemLabel?: {
                 textStyle: "body/md/regular";
@@ -52,18 +52,6 @@ declare const datePickerSelectSlotRecipe: import('@chakra-ui/react').SlotRecipeD
             emptyState?: {
                 paddingBlock: "8";
             } | undefined;
-            errorState?: {
-                paddingBlock: "4";
-            } | undefined;
-            errorLabel?: {
-                textStyle: "body/md/regular";
-            } | undefined;
-            errorIcon?: {
-                marginBlockStart: "4";
-            } | undefined;
-            errorTextBlock?: {
-                paddingBlock: "2";
-            } | undefined;
             action?: {
                 minHeight: "40";
                 paddingBlock: "8";

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

@@ -1,4 +1,4 @@
-export declare const selectSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "label" | "checkbox" | "list" | "avatar" | "emptyState" | "root" | "item" | "itemContent" | "itemIndicator" | "trigger" | "positioner" | "indicator" | "itemGroup" | "itemGroupLabel" | "itemText" | "valueText" | "action" | "clearTrigger" | "control" | "actionContainer" | "errorLabel" | "searchInputGroup" | "searchInput" | "searchClear" | "errorState" | "itemList" | "errorIcon" | "errorTextBlock" | "itemHelperText" | "itemLoading" | "itemLoadingLabel" | "itemLabel" | "indicatorGroup" | "checkmark" | "itemBadge" | "itemIcon" | "valueIcon", {
+export declare const selectSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "label" | "checkbox" | "list" | "avatar" | "emptyState" | "root" | "item" | "itemContent" | "itemIndicator" | "trigger" | "positioner" | "indicator" | "itemGroup" | "itemGroupLabel" | "itemText" | "valueText" | "action" | "clearTrigger" | "control" | "actionContainer" | "searchInputGroup" | "searchInput" | "searchClear" | "itemList" | "itemLoading" | "itemLoadingLabel" | "itemLabel" | "itemHelperText" | "indicatorGroup" | "checkmark" | "itemBadge" | "itemIcon" | "valueIcon", {
     hasStatusIcon: {
         true: {
             trigger: {
@@ -39,8 +39,8 @@ export declare const selectSlotRecipe: import('@chakra-ui/react').SlotRecipeDefi
                     textStyle: "body/lg/semibold";
                 };
             };
-            content: {
-                '--select-menu-list-max-height': `${number}rem`;
+            itemList: {
+                maxHeight: `${number}rem`;
             };
             itemLabel: {
                 textStyle: "body/lg/regular";
@@ -52,12 +52,6 @@ export declare const selectSlotRecipe: import('@chakra-ui/react').SlotRecipeDefi
             emptyState: {
                 paddingBlock: "12";
             };
-            errorState: {
-                paddingBlock: "8";
-            };
-            errorLabel: {
-                textStyle: "body/lg/regular";
-            };
             action: {
                 minHeight: "48";
                 paddingBlock: "12";
@@ -104,8 +98,8 @@ export declare const selectSlotRecipe: import('@chakra-ui/react').SlotRecipeDefi
                     textStyle: "body/md/semibold";
                 };
             };
-            content: {
-                '--select-menu-list-max-height': `${number}rem`;
+            itemList: {
+                maxHeight: `${number}rem`;
             };
             itemLabel: {
                 textStyle: "body/md/regular";
@@ -117,18 +111,6 @@ export declare const selectSlotRecipe: import('@chakra-ui/react').SlotRecipeDefi
             emptyState: {
                 paddingBlock: "8";
             };
-            errorState: {
-                paddingBlock: "4";
-            };
-            errorLabel: {
-                textStyle: "body/md/regular";
-            };
-            errorIcon: {
-                marginBlockStart: "4";
-            };
-            errorTextBlock: {
-                paddingBlock: "2";
-            };
             action: {
                 minHeight: "40";
                 paddingBlock: "8";

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

@@ -24,11 +24,7 @@ var selectSlotRecipe = defineSlotRecipe({
 		"itemHelperText",
 		"itemLoading",
 		"itemLoadingLabel",
-		"emptyState",
-		"errorState",
-		"errorIcon",
-		"errorTextBlock",
-		"errorLabel"
+		"emptyState"
 	],
 	base: {
 		trigger: {
@@ -119,7 +115,6 @@ var selectSlotRecipe = defineSlotRecipe({
 		},
 		itemList: {
 			flex: "1 1 auto",
-			maxHeight: "var(--select-menu-list-max-height)",
 			minHeight: 0,
 			overflowY: "auto",
 			paddingBlock: "8"
@@ -149,29 +144,6 @@ var selectSlotRecipe = defineSlotRecipe({
 			alignItems: "flex-start",
 			paddingInline: "16"
 		},
-		errorState: {
-			display: "flex",
-			alignItems: "flex-start",
-			gap: "12",
-			paddingInlineStart: "16",
-			paddingInlineEnd: "24"
-		},
-		errorIcon: {
-			color: "icon/negative",
-			flexShrink: 0
-		},
-		errorTextBlock: {
-			display: "flex",
-			flexDirection: "column",
-			flex: 1,
-			minWidth: 0
-		},
-		errorLabel: {
-			color: "text/body",
-			maxWidth: "100%",
-			minWidth: 0,
-			truncate: true
-		},
 		itemIcon: {
 			color: "icon/secondary",
 			"[data-state=\"checked\"] &": { color: "icon/interactive" }
@@ -327,15 +299,13 @@ var selectSlotRecipe = defineSlotRecipe({
 						gap: "12"
 					}
 				},
-				content: { "--select-menu-list-max-height": rem(280) },
+				itemList: { maxHeight: rem(280) },
 				itemLabel: {
 					textStyle: "body/lg/regular",
 					lineHeight: "normal"
 				},
 				itemLoadingLabel: { textStyle: "body/lg/regular" },
 				emptyState: { paddingBlock: "12" },
-				errorState: { paddingBlock: "8" },
-				errorLabel: { textStyle: "body/lg/regular" },
 				action: {
 					minHeight: "48",
 					paddingBlock: "12",
@@ -370,17 +340,13 @@ var selectSlotRecipe = defineSlotRecipe({
 						gap: "12"
 					}
 				},
-				content: { "--select-menu-list-max-height": rem(236) },
+				itemList: { maxHeight: rem(236) },
 				itemLabel: {
 					textStyle: "body/md/regular",
 					lineHeight: "normal"
 				},
 				itemLoadingLabel: { textStyle: "body/md/regular" },
 				emptyState: { paddingBlock: "8" },
-				errorState: { paddingBlock: "4" },
-				errorLabel: { textStyle: "body/md/regular" },
-				errorIcon: { marginBlockStart: "4" },
-				errorTextBlock: { paddingBlock: "2" },
 				action: {
 					minHeight: "40",
 					paddingBlock: "8",

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

@@ -1 +1 @@
-{"version":3,"file":"Select.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/Select.recipe.ts"],"sourcesContent":["import { selectAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { base, variants } from '../common/ComboboxAndSelect.common';\nimport { rem } from '../themeUtils';\n\nexport const selectSlotRecipe = defineSlotRecipe({\n  className: 'select',\n  slots: [\n    ...selectAnatomy.keys(),\n    'searchInputGroup',\n    'searchInput',\n    'searchClear',\n    'actionContainer',\n    'action',\n    'checkbox',\n    'checkmark',\n    'itemList',\n    'itemContent',\n    'itemBadge',\n    'itemIcon',\n    'valueIcon',\n    'avatar',\n    'itemLabel',\n    'itemHelperText',\n    'itemLoading',\n    'itemLoadingLabel',\n    'emptyState',\n    'errorState',\n    'errorIcon',\n    'errorTextBlock',\n    'errorLabel',\n  ],\n  base: {\n    trigger: {\n      display: 'flex',\n      alignItems: 'center',\n      borderWidth: '1',\n      borderColor: 'border/strong',\n      background: 'background/primary',\n      color: 'input/text/inputValue',\n      gap: '8',\n      justifyContent: 'space-between',\n      // 15px + the 1px border = the spec's 16px, measured from the trigger's outer edge.\n      // The indicator group below is offset the same way on the end side.\n      paddingInlineStart: rem(15),\n      paddingInlineEnd: '48',\n      paddingBlock: rem(11),\n      borderRadius: '4',\n      cursor: 'pointer',\n      userSelect: 'none',\n      textAlign: 'start',\n      focusVisibleRing: 'inside',\n      width: '100%',\n      _open: {\n        borderColor: 'border/focus',\n      },\n      _placeholderShown: {\n        color: 'text/secondary',\n      },\n      _disabled: {\n        color: 'text/disabled',\n        background: 'background/disabled',\n        cursor: 'not-allowed',\n      },\n      _invalid: {\n        borderColor: 'border/error',\n      },\n      _readOnly: {\n        background: 'background/disabled',\n        cursor: 'default',\n      },\n    },\n    indicatorGroup: {\n      display: 'flex',\n      alignItems: 'center',\n      gap: '8',\n      position: 'absolute',\n      insetEnd: 0,\n      top: 0,\n      bottom: 0,\n      paddingInlineStart: '16',\n      paddingInlineEnd: rem(15),\n      pointerEvents: 'none',\n    },\n    indicator: {\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      color: 'icon/secondary',\n      _disabled: {\n        color: 'icon/disabled',\n      },\n      _readOnly: {\n        color: 'icon/on-disabled',\n      },\n    },\n    ...base,\n    content: {\n      ...base.content,\n      overflow: 'hidden',\n      display: 'flex',\n      flexDirection: 'column',\n      // Zag's popper sets `--reference-width` (the trigger width) on the positioner, so the\n      // menu is never narrower than the Select input — but can grow wider for long items.\n      minWidth: 'var(--reference-width)',\n      maxWidth: rem(800),\n      focusVisibleRing: 'none',\n    },\n    item: {\n      ...base.item,\n      _active: {\n        background: 'background/active',\n      },\n      _selected: {\n        background: 'background/selected',\n        _highlighted: {\n          background: 'background/selected-hover',\n        },\n      },\n      _disabled: {\n        cursor: 'not-allowed',\n        color: 'text/disabled',\n        _highlighted: {\n          background: 'transparent',\n        },\n      },\n    },\n    control: {\n      position: 'relative',\n      width: '100%',\n    },\n    valueText: {\n      display: 'flex',\n      alignItems: 'center',\n      gap: '8',\n      flex: '1 1 0',\n      minWidth: 0,\n      overflow: 'hidden',\n    },\n    itemList: {\n      flex: '1 1 auto',\n      maxHeight: 'var(--select-menu-list-max-height)',\n      minHeight: 0,\n      overflowY: 'auto',\n      paddingBlock: '8',\n    },\n    itemContent: {\n      display: 'flex',\n      flexDirection: 'column',\n      flex: '1 0 0',\n      minWidth: 0,\n    },\n    itemBadge: {\n      display: 'inline-flex',\n      flexShrink: 0,\n    },\n    itemLoading: {\n      flexShrink: 0,\n    },\n    itemLoadingLabel: {\n      color: 'text/secondary',\n      flex: '1 0 0',\n      minWidth: 0,\n      overflow: 'hidden',\n      textOverflow: 'ellipsis',\n      whiteSpace: 'nowrap',\n    },\n    emptyState: {\n      display: 'flex',\n      flexDirection: 'column',\n      alignItems: 'flex-start',\n      paddingInline: '16',\n    },\n    errorState: {\n      display: 'flex',\n      alignItems: 'flex-start',\n      gap: '12',\n      paddingInlineStart: '16',\n      paddingInlineEnd: '24',\n    },\n    errorIcon: {\n      color: 'icon/negative',\n      flexShrink: 0,\n    },\n    errorTextBlock: {\n      display: 'flex',\n      flexDirection: 'column',\n      flex: 1,\n      minWidth: 0,\n    },\n    errorLabel: {\n      color: 'text/body',\n      maxWidth: '100%',\n      minWidth: 0,\n      truncate: true,\n    },\n    itemIcon: {\n      color: 'icon/secondary',\n      '[data-state=\"checked\"] &': {\n        color: 'icon/interactive',\n      },\n    },\n    // The selected value's icon in the trigger. Mirrors the `indicator` (chevron) state colors —\n    // the trigger exposes `data-disabled` / `data-readonly`, so the icon reacts via ancestors.\n    valueIcon: {\n      color: 'icon/secondary',\n      '[data-disabled] &': { color: 'icon/disabled' },\n      '[data-readonly] &': { color: 'icon/on-disabled' },\n    },\n    avatar: {\n      flexShrink: 0,\n      '[data-disabled] &': { opacity: 0.5 },\n    },\n    itemLabel: {\n      color: 'text/body',\n      whiteSpace: 'nowrap',\n      overflow: 'hidden',\n      textOverflow: 'ellipsis',\n      maxWidth: '100%',\n      minWidth: 0,\n      '[data-disabled] &': {\n        color: 'text/disabled',\n      },\n    },\n    itemHelperText: {\n      color: 'text/helper',\n      textStyle: 'body/sm/regular',\n      whiteSpace: 'nowrap',\n      overflow: 'hidden',\n      textOverflow: 'ellipsis',\n      maxWidth: '100%',\n      minWidth: 0,\n      '[data-disabled] &': {\n        color: 'text/disabled',\n      },\n    },\n    checkbox: {\n      position: 'relative',\n      display: 'inline-flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      flexShrink: 0,\n      borderWidth: '1',\n      borderColor: 'border/regular',\n      borderRadius: '4',\n      background: 'background/primary',\n      boxShadow: 'inset/field',\n      color: 'icon/on-color',\n      '[data-state=checked] &': {\n        background: 'input/checkbox/selection',\n        borderColor: 'input/checkbox/selection',\n        boxShadow: 'none',\n      },\n      '[data-disabled] &': {\n        background: 'background/disabled',\n        borderColor: 'border/disabled',\n      },\n    },\n    checkmark: {\n      opacity: 0,\n      color: 'icon/on-color',\n      '[data-state=checked] &': {\n        opacity: 1,\n      },\n    },\n    searchInputGroup: {\n      borderBottom: '1px solid',\n      borderColor: 'border/minimal',\n      background: 'background/primary',\n      display: 'flex',\n      alignItems: 'center',\n      gap: '12',\n      paddingInlineStart: '16',\n      paddingInlineEnd: '12',\n      overflow: 'hidden',\n      flexShrink: 0,\n      _hover: {\n        background: 'background/secondary',\n      },\n      _focusWithin: {\n        background: 'background/primary',\n      },\n    },\n    searchInput: {\n      flex: '1 0 0',\n      minWidth: 0,\n      border: 'none',\n      outline: 'none',\n      background: 'transparent',\n      color: 'input/text/inputValue',\n      paddingInline: 0,\n      paddingBlock: 0,\n      _placeholder: {\n        color: 'input/text/placeholder',\n      },\n    },\n    searchClear: {\n      display: 'inline-flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      borderRadius: '4',\n      color: 'icon/primary',\n      cursor: 'pointer',\n      flexShrink: 0,\n      _hover: {\n        background: 'background/hover',\n      },\n    },\n    actionContainer: {\n      borderTop: '1px solid',\n      borderColor: 'border/minimal',\n      paddingBlock: '8',\n      flexShrink: 0,\n    },\n    action: {\n      display: 'flex',\n      alignItems: 'center',\n      gap: '12',\n      paddingInlineEnd: '24',\n      paddingInlineStart: '16',\n      color: 'text/primary',\n      width: '100%',\n      cursor: 'pointer',\n      textAlign: 'start',\n      _icon: {\n        color: 'icon/secondary',\n      },\n      _hover: {\n        background: 'button/secondary/bg-hover',\n        _active: {\n          background: 'button/secondary/bg-active',\n        },\n      },\n      _active: {\n        background: 'button/secondary/bg-active',\n      },\n      _disabled: {\n        color: 'text/disabled',\n        cursor: 'not-allowed',\n        _icon: {\n          color: 'icon/disabled',\n        },\n      },\n      _focusVisible: {\n        outlineOffset: '-3px',\n      },\n    },\n  },\n\n  variants: {\n    hasStatusIcon: {\n      true: {\n        trigger: {\n          paddingInlineEnd: '96',\n        },\n      },\n      false: {},\n    },\n    size: {\n      lg: {\n        ...variants.size.lg,\n        trigger: {\n          '&:has([data-slot=\"avatar\"])': { paddingBlock: rem(7), paddingInlineStart: rem(11) },\n        },\n        checkbox: {\n          width: '24',\n          height: '24',\n        },\n        item: {\n          ...variants.size.lg.item,\n          '&:has([data-slot=\"avatar\"])': {\n            paddingInlineStart: '12',\n            paddingInlineEnd: '24',\n            paddingBlock: '8',\n            gap: '8',\n          },\n          '&:has([data-slot=\"checkbox\"])': {\n            minHeight: '48',\n            paddingInlineEnd: '24',\n            paddingBlock: '12',\n            gap: '12',\n          },\n        },\n        content: {\n          // 5.5 × 48px item + 16px paddingBlock\n          '--select-menu-list-max-height': rem(280),\n        },\n        itemLabel: {\n          textStyle: 'body/lg/regular',\n          lineHeight: 'normal',\n        },\n        itemLoadingLabel: {\n          textStyle: 'body/lg/regular',\n        },\n        emptyState: {\n          paddingBlock: '12',\n        },\n        errorState: {\n          paddingBlock: '8',\n        },\n        errorLabel: {\n          textStyle: 'body/lg/regular',\n        },\n        action: {\n          minHeight: '48',\n          paddingBlock: '12',\n          textStyle: 'body/lg/regular',\n          lineHeight: 'normal',\n        },\n        searchInputGroup: {\n          height: rem(56),\n          paddingBlock: '16',\n        },\n        searchInput: {\n          textStyle: 'body/lg/regular',\n        },\n        searchClear: {\n          padding: '8',\n        },\n      },\n      md: {\n        ...variants.size.md,\n        checkbox: {\n          width: '20',\n          height: '20',\n        },\n        item: {\n          ...variants.size.md.item,\n          '&:has([data-slot=\"avatar\"])': {\n            paddingInlineStart: '12',\n            paddingInlineEnd: '24',\n            paddingBlock: '4',\n            gap: '8',\n          },\n          '&:has([data-slot=\"checkbox\"])': {\n            minHeight: '40',\n            paddingInlineEnd: '24',\n            paddingBlock: '8',\n            gap: '12',\n          },\n        },\n        content: {\n          // 5.5 × 40px item (checkbox/avatar row) + 16px paddingBlock\n          '--select-menu-list-max-height': rem(236),\n        },\n        itemLabel: {\n          textStyle: 'body/md/regular',\n          lineHeight: 'normal',\n        },\n        itemLoadingLabel: {\n          textStyle: 'body/md/regular',\n        },\n        emptyState: {\n          paddingBlock: '8',\n        },\n        errorState: {\n          paddingBlock: '4',\n        },\n        errorLabel: {\n          textStyle: 'body/md/regular',\n        },\n        errorIcon: {\n          marginBlockStart: '4',\n        },\n        errorTextBlock: {\n          paddingBlock: '2',\n        },\n        action: {\n          minHeight: '40',\n          paddingBlock: '8',\n          textStyle: 'body/md/regular',\n          lineHeight: 'normal',\n        },\n        trigger: {\n          textStyle: 'body/md/regular',\n          paddingBlock: rem(9),\n          '&:has([data-slot=\"avatar\"])': { paddingBlock: rem(7), paddingInlineStart: rem(11) },\n        },\n        searchInputGroup: {\n          height: '48',\n          paddingBlock: '12',\n        },\n        searchInput: {\n          textStyle: 'body/md/regular',\n        },\n        searchClear: {\n          padding: '4',\n        },\n      },\n    },\n  },\n  defaultVariants: {\n    size: 'lg',\n  },\n});\n"],"mappings":"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"}
+{"version":3,"file":"Select.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/Select.recipe.ts"],"sourcesContent":["import { selectAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { base, variants } from '../common/ComboboxAndSelect.common';\nimport { rem } from '../themeUtils';\n\nexport const selectSlotRecipe = defineSlotRecipe({\n  className: 'select',\n  slots: [\n    ...selectAnatomy.keys(),\n    'searchInputGroup',\n    'searchInput',\n    'searchClear',\n    'actionContainer',\n    'action',\n    'checkbox',\n    'checkmark',\n    'itemList',\n    'itemContent',\n    'itemBadge',\n    'itemIcon',\n    'valueIcon',\n    'avatar',\n    'itemLabel',\n    'itemHelperText',\n    'itemLoading',\n    'itemLoadingLabel',\n    'emptyState',\n  ],\n  base: {\n    trigger: {\n      display: 'flex',\n      alignItems: 'center',\n      borderWidth: '1',\n      borderColor: 'border/strong',\n      background: 'background/primary',\n      color: 'input/text/inputValue',\n      gap: '8',\n      justifyContent: 'space-between',\n      // 15px + the 1px border = the spec's 16px, measured from the trigger's outer edge.\n      // The indicator group below is offset the same way on the end side.\n      paddingInlineStart: rem(15),\n      paddingInlineEnd: '48',\n      paddingBlock: rem(11),\n      borderRadius: '4',\n      cursor: 'pointer',\n      userSelect: 'none',\n      textAlign: 'start',\n      focusVisibleRing: 'inside',\n      width: '100%',\n      _open: {\n        borderColor: 'border/focus',\n      },\n      _placeholderShown: {\n        color: 'text/secondary',\n      },\n      _disabled: {\n        color: 'text/disabled',\n        background: 'background/disabled',\n        cursor: 'not-allowed',\n      },\n      _invalid: {\n        borderColor: 'border/error',\n      },\n      _readOnly: {\n        background: 'background/disabled',\n        cursor: 'default',\n      },\n    },\n    indicatorGroup: {\n      display: 'flex',\n      alignItems: 'center',\n      gap: '8',\n      position: 'absolute',\n      insetEnd: 0,\n      top: 0,\n      bottom: 0,\n      paddingInlineStart: '16',\n      paddingInlineEnd: rem(15),\n      pointerEvents: 'none',\n    },\n    indicator: {\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      color: 'icon/secondary',\n      _disabled: {\n        color: 'icon/disabled',\n      },\n      _readOnly: {\n        color: 'icon/on-disabled',\n      },\n    },\n    ...base,\n    content: {\n      ...base.content,\n      overflow: 'hidden',\n      display: 'flex',\n      flexDirection: 'column',\n      // Zag's popper sets `--reference-width` (the trigger width) on the positioner, so the\n      // menu is never narrower than the Select input — but can grow wider for long items.\n      minWidth: 'var(--reference-width)',\n      maxWidth: rem(800),\n      focusVisibleRing: 'none',\n    },\n    item: {\n      ...base.item,\n      _active: {\n        background: 'background/active',\n      },\n      _selected: {\n        background: 'background/selected',\n        _highlighted: {\n          background: 'background/selected-hover',\n        },\n      },\n      _disabled: {\n        cursor: 'not-allowed',\n        color: 'text/disabled',\n        _highlighted: {\n          background: 'transparent',\n        },\n      },\n    },\n    control: {\n      position: 'relative',\n      width: '100%',\n    },\n    valueText: {\n      display: 'flex',\n      alignItems: 'center',\n      gap: '8',\n      flex: '1 1 0',\n      minWidth: 0,\n      overflow: 'hidden',\n    },\n    itemList: {\n      flex: '1 1 auto',\n      minHeight: 0,\n      overflowY: 'auto',\n      paddingBlock: '8',\n    },\n    itemContent: {\n      display: 'flex',\n      flexDirection: 'column',\n      flex: '1 0 0',\n      minWidth: 0,\n    },\n    itemBadge: {\n      display: 'inline-flex',\n      flexShrink: 0,\n    },\n    itemLoading: {\n      flexShrink: 0,\n    },\n    itemLoadingLabel: {\n      color: 'text/secondary',\n      flex: '1 0 0',\n      minWidth: 0,\n      overflow: 'hidden',\n      textOverflow: 'ellipsis',\n      whiteSpace: 'nowrap',\n    },\n    emptyState: {\n      display: 'flex',\n      flexDirection: 'column',\n      alignItems: 'flex-start',\n      paddingInline: '16',\n    },\n    itemIcon: {\n      color: 'icon/secondary',\n      '[data-state=\"checked\"] &': {\n        color: 'icon/interactive',\n      },\n    },\n    // The selected value's icon in the trigger. Mirrors the `indicator` (chevron) state colors —\n    // the trigger exposes `data-disabled` / `data-readonly`, so the icon reacts via ancestors.\n    valueIcon: {\n      color: 'icon/secondary',\n      '[data-disabled] &': { color: 'icon/disabled' },\n      '[data-readonly] &': { color: 'icon/on-disabled' },\n    },\n    avatar: {\n      flexShrink: 0,\n      '[data-disabled] &': { opacity: 0.5 },\n    },\n    itemLabel: {\n      color: 'text/body',\n      whiteSpace: 'nowrap',\n      overflow: 'hidden',\n      textOverflow: 'ellipsis',\n      maxWidth: '100%',\n      minWidth: 0,\n      '[data-disabled] &': {\n        color: 'text/disabled',\n      },\n    },\n    itemHelperText: {\n      color: 'text/helper',\n      textStyle: 'body/sm/regular',\n      whiteSpace: 'nowrap',\n      overflow: 'hidden',\n      textOverflow: 'ellipsis',\n      maxWidth: '100%',\n      minWidth: 0,\n      '[data-disabled] &': {\n        color: 'text/disabled',\n      },\n    },\n    checkbox: {\n      position: 'relative',\n      display: 'inline-flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      flexShrink: 0,\n      borderWidth: '1',\n      borderColor: 'border/regular',\n      borderRadius: '4',\n      background: 'background/primary',\n      boxShadow: 'inset/field',\n      color: 'icon/on-color',\n      '[data-state=checked] &': {\n        background: 'input/checkbox/selection',\n        borderColor: 'input/checkbox/selection',\n        boxShadow: 'none',\n      },\n      '[data-disabled] &': {\n        background: 'background/disabled',\n        borderColor: 'border/disabled',\n      },\n    },\n    checkmark: {\n      opacity: 0,\n      color: 'icon/on-color',\n      '[data-state=checked] &': {\n        opacity: 1,\n      },\n    },\n    searchInputGroup: {\n      borderBottom: '1px solid',\n      borderColor: 'border/minimal',\n      background: 'background/primary',\n      display: 'flex',\n      alignItems: 'center',\n      gap: '12',\n      paddingInlineStart: '16',\n      paddingInlineEnd: '12',\n      overflow: 'hidden',\n      flexShrink: 0,\n      _hover: {\n        background: 'background/secondary',\n      },\n      _focusWithin: {\n        background: 'background/primary',\n      },\n    },\n    searchInput: {\n      flex: '1 0 0',\n      minWidth: 0,\n      border: 'none',\n      outline: 'none',\n      background: 'transparent',\n      color: 'input/text/inputValue',\n      paddingInline: 0,\n      paddingBlock: 0,\n      _placeholder: {\n        color: 'input/text/placeholder',\n      },\n    },\n    searchClear: {\n      display: 'inline-flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      borderRadius: '4',\n      color: 'icon/primary',\n      cursor: 'pointer',\n      flexShrink: 0,\n      _hover: {\n        background: 'background/hover',\n      },\n    },\n    actionContainer: {\n      borderTop: '1px solid',\n      borderColor: 'border/minimal',\n      paddingBlock: '8',\n      flexShrink: 0,\n    },\n    action: {\n      display: 'flex',\n      alignItems: 'center',\n      gap: '12',\n      paddingInlineEnd: '24',\n      paddingInlineStart: '16',\n      color: 'text/primary',\n      width: '100%',\n      cursor: 'pointer',\n      textAlign: 'start',\n      _icon: {\n        color: 'icon/secondary',\n      },\n      _hover: {\n        background: 'button/secondary/bg-hover',\n        _active: {\n          background: 'button/secondary/bg-active',\n        },\n      },\n      _active: {\n        background: 'button/secondary/bg-active',\n      },\n      _disabled: {\n        color: 'text/disabled',\n        cursor: 'not-allowed',\n        _icon: {\n          color: 'icon/disabled',\n        },\n      },\n      _focusVisible: {\n        outlineOffset: '-3px',\n      },\n    },\n  },\n\n  variants: {\n    hasStatusIcon: {\n      true: {\n        trigger: {\n          paddingInlineEnd: '96',\n        },\n      },\n      false: {},\n    },\n    size: {\n      lg: {\n        ...variants.size.lg,\n        trigger: {\n          '&:has([data-slot=\"avatar\"])': { paddingBlock: rem(7), paddingInlineStart: rem(11) },\n        },\n        checkbox: {\n          width: '24',\n          height: '24',\n        },\n        item: {\n          ...variants.size.lg.item,\n          '&:has([data-slot=\"avatar\"])': {\n            paddingInlineStart: '12',\n            paddingInlineEnd: '24',\n            paddingBlock: '8',\n            gap: '8',\n          },\n          '&:has([data-slot=\"checkbox\"])': {\n            minHeight: '48',\n            paddingInlineEnd: '24',\n            paddingBlock: '12',\n            gap: '12',\n          },\n        },\n        itemList: {\n          // 5.5 × 48px item + 16px paddingBlock\n          maxHeight: rem(280),\n        },\n        itemLabel: {\n          textStyle: 'body/lg/regular',\n          lineHeight: 'normal',\n        },\n        itemLoadingLabel: {\n          textStyle: 'body/lg/regular',\n        },\n        emptyState: {\n          paddingBlock: '12',\n        },\n        action: {\n          minHeight: '48',\n          paddingBlock: '12',\n          textStyle: 'body/lg/regular',\n          lineHeight: 'normal',\n        },\n        searchInputGroup: {\n          height: rem(56),\n          paddingBlock: '16',\n        },\n        searchInput: {\n          textStyle: 'body/lg/regular',\n        },\n        searchClear: {\n          padding: '8',\n        },\n      },\n      md: {\n        ...variants.size.md,\n        checkbox: {\n          width: '20',\n          height: '20',\n        },\n        item: {\n          ...variants.size.md.item,\n          '&:has([data-slot=\"avatar\"])': {\n            paddingInlineStart: '12',\n            paddingInlineEnd: '24',\n            paddingBlock: '4',\n            gap: '8',\n          },\n          '&:has([data-slot=\"checkbox\"])': {\n            minHeight: '40',\n            paddingInlineEnd: '24',\n            paddingBlock: '8',\n            gap: '12',\n          },\n        },\n        itemList: {\n          // 5.5 × 40px item (checkbox/avatar row) + 16px paddingBlock\n          maxHeight: rem(236),\n        },\n        itemLabel: {\n          textStyle: 'body/md/regular',\n          lineHeight: 'normal',\n        },\n        itemLoadingLabel: {\n          textStyle: 'body/md/regular',\n        },\n        emptyState: {\n          paddingBlock: '8',\n        },\n        action: {\n          minHeight: '40',\n          paddingBlock: '8',\n          textStyle: 'body/md/regular',\n          lineHeight: 'normal',\n        },\n        trigger: {\n          textStyle: 'body/md/regular',\n          paddingBlock: rem(9),\n          '&:has([data-slot=\"avatar\"])': { paddingBlock: rem(7), paddingInlineStart: rem(11) },\n        },\n        searchInputGroup: {\n          height: '48',\n          paddingBlock: '12',\n        },\n        searchInput: {\n          textStyle: 'body/md/regular',\n        },\n        searchClear: {\n          padding: '4',\n        },\n      },\n    },\n  },\n  defaultVariants: {\n    size: 'lg',\n  },\n});\n"],"mappings":"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"}

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

@@ -32,16 +32,14 @@ var baseItemStyle = {
 		},
 		_active: { background: "background/selected-hover" }
 	},
-	_disabled: {
-		opacity: .4,
-		cursor: "not-allowed"
-	}
+	_disabled: { cursor: "not-allowed" }
 };
 var baseTextStyle = {
 	flex: 1,
 	minWidth: 0,
 	display: "flex",
-	flexDirection: "column"
+	flexDirection: "column",
+	_disabled: { color: "text/tertiary" }
 };
 var treeViewSlotRecipe = defineSlotRecipe({
 	className: "bitkit-tree-view",
@@ -88,7 +86,8 @@ var treeViewSlotRecipe = defineSlotRecipe({
 		branchIndicator: {
 			display: "flex",
 			justifyContent: "center",
-			color: "icon/secondary"
+			color: "icon/secondary",
+			_disabled: { color: "icon/disabled" }
 		},
 		branchTrigger: {
 			display: "inline-flex",
@@ -106,6 +105,10 @@ var treeViewSlotRecipe = defineSlotRecipe({
 			_selected: {
 				...baseItemStyle._selected,
 				"& > svg": { color: "icon/primary" }
+			},
+			_disabled: {
+				...baseItemStyle._disabled,
+				"& > svg": { color: "icon/disabled" }
 			}
 		},
 		branchText: baseTextStyle,