@bitrise/bitkit-v2 0.3.462-beta.2927 → 0.3.463

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

@@ -1,6 +1,6 @@
 import { SelectRootProps, SelectTriggerProps } from '@chakra-ui/react/select';
 import { BitkitFieldProps } from '../BitkitField/BitkitField.tsx';
-import { BitkitSelectMenuEmptyStateProps, BitkitSelectMenuErrorStateProps, BitkitSelectMenuItemProps, BitkitSelectMenuScrollProps, BitkitSelectMenuSearchProps } from '../BitkitSelectMenu/BitkitSelectMenu.tsx';
+import { BitkitSelectMenuEmptyStateProps, BitkitSelectMenuItemProps, BitkitSelectMenuScrollProps, BitkitSelectMenuSearchProps } from '../BitkitSelectMenu/BitkitSelectMenu.tsx';
 import { BitkitSelectMenuActionChild } from '../BitkitSelectMenu/BitkitSelectMenuAction.tsx';
 export type BitkitSelectTriggerProps = SelectTriggerProps;
 export type BitkitSelectProps = Omit<BitkitFieldProps, 'children' | 'onChange' | 'state'> & {
@@ -16,7 +16,7 @@ export type BitkitSelectProps = Omit<BitkitFieldProps, 'children' | 'onChange' |
     state?: 'disabled' | 'error' | 'readOnly' | 'warning';
     triggerProps?: BitkitSelectTriggerProps;
     value?: string;
-} & BitkitSelectMenuSearchProps & BitkitSelectMenuScrollProps & BitkitSelectMenuEmptyStateProps & BitkitSelectMenuErrorStateProps;
+} & BitkitSelectMenuSearchProps & BitkitSelectMenuScrollProps & BitkitSelectMenuEmptyStateProps;
 declare const _default: import('react').ForwardRefExoticComponent<Omit<BitkitFieldProps, "children" | "onChange" | "state"> & {
     children?: BitkitSelectMenuActionChild;
     defaultValue?: string;
@@ -30,7 +30,7 @@ declare const _default: import('react').ForwardRefExoticComponent<Omit<BitkitFie
     state?: "disabled" | "error" | "readOnly" | "warning";
     triggerProps?: BitkitSelectTriggerProps;
     value?: string;
-} & BitkitSelectMenuSearchProps & BitkitSelectMenuScrollProps & BitkitSelectMenuEmptyStateProps & BitkitSelectMenuErrorStateProps & import('react').RefAttributes<HTMLDivElement>> & {
+} & BitkitSelectMenuSearchProps & BitkitSelectMenuScrollProps & BitkitSelectMenuEmptyStateProps & import('react').RefAttributes<HTMLDivElement>> & {
     Action: {
         (props: import('../index.ts').BitkitSelectMenuActionProps): import('react').JSX.Element;
         displayName: string;

package/dist/components/BitkitSelect/BitkitSelect.js

@@ -57,7 +57,7 @@ var SelectValue = ({ placeholder, state, size }) => {
 	});
 };
 var BitkitSelect = forwardRef((props, ref) => {
-	const { children, defaultValue, emptyHelperText, emptyLabel, errorHelperText, errorLabel, isLoading, items, onScrolledToBottom, onSearchChange, onValueChange, placeholder, disablePortal, searchPlaceholder, searchValue, selectProps, size = "lg", state, triggerProps, value, ...fieldProps } = props;
+	const { children, defaultValue, emptyHelperText, emptyLabel, isLoading, items, onScrolledToBottom, onSearchChange, onValueChange, placeholder, disablePortal, searchValue, selectProps, size = "lg", state, triggerProps, value, ...fieldProps } = props;
 	const collection = createListCollection({
 		items,
 		groupBy: (item) => item.group || "",
@@ -112,12 +112,9 @@ var BitkitSelect = forwardRef((props, ref) => {
 					collection,
 					emptyHelperText,
 					emptyLabel,
-					errorHelperText,
-					errorLabel,
 					isLoading,
 					onScrolledToBottom,
 					onSearchChange,
-					searchPlaceholder,
 					searchValue,
 					size,
 					children

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

@@ -1 +1 @@
-{"version":3,"file":"BitkitSelect.js","names":[],"sources":["../../../lib/components/BitkitSelect/BitkitSelect.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { createListCollection } from '@chakra-ui/react/collection';\nimport { Portal } from '@chakra-ui/react/portal';\nimport { Select, type SelectRootProps, type SelectTriggerProps, useSelectContext } from '@chakra-ui/react/select';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { forwardRef, useContext } from 'react';\n\nimport { IconErrorCircleFilled, IconWarningYellow } from '../../icons';\nimport AssetSelectChevron from '../../utilities/AssetSelectChevron.tsx';\nimport BitkitPortalContext from '../../utilities/BitkitPortalContext';\nimport { withSubComponents } from '../../utilities/withSubComponents.ts';\nimport BitkitAvatar from '../BitkitAvatar/BitkitAvatar';\nimport BitkitField, { type BitkitFieldProps } from '../BitkitField/BitkitField.tsx';\nimport BitkitSelectMenu, {\n  type BitkitSelectMenuEmptyStateProps,\n  type BitkitSelectMenuErrorStateProps,\n  type BitkitSelectMenuItemProps,\n  type BitkitSelectMenuScrollProps,\n  type BitkitSelectMenuSearchProps,\n} from '../BitkitSelectMenu/BitkitSelectMenu.tsx';\nimport BitkitSelectMenuAction, {\n  type BitkitSelectMenuActionChild,\n} from '../BitkitSelectMenu/BitkitSelectMenuAction.tsx';\nimport { selectSizeMap } from '../BitkitSelectMenu/SelectMenuShell.tsx';\n\nexport type BitkitSelectTriggerProps = SelectTriggerProps;\n\nexport type BitkitSelectProps = Omit<BitkitFieldProps, 'children' | 'onChange' | 'state'> & {\n  children?: BitkitSelectMenuActionChild;\n  defaultValue?: string;\n  isLoading?: boolean;\n  items: Array<BitkitSelectMenuItemProps>;\n  onValueChange?: (newVal: string) => void;\n  placeholder?: string;\n  disablePortal?: boolean;\n  selectProps?: Omit<SelectRootProps, 'collection' | 'defaultValue' | 'onValueChange' | 'size' | 'value'>;\n  size?: 'md' | 'lg';\n  state?: 'disabled' | 'error' | 'readOnly' | 'warning';\n  triggerProps?: BitkitSelectTriggerProps;\n  value?: string;\n} & BitkitSelectMenuSearchProps &\n  BitkitSelectMenuScrollProps &\n  BitkitSelectMenuEmptyStateProps &\n  BitkitSelectMenuErrorStateProps;\n\ntype SelectValueProps = {\n  placeholder?: string;\n  size: NonNullable<BitkitSelectProps['size']>;\n  state?: BitkitSelectProps['state'];\n};\n\nconst SelectValue = ({ placeholder, state, size }: SelectValueProps) => {\n  const select = useSelectContext();\n  const items = select.selectedItems as Array<BitkitSelectMenuItemProps>;\n\n  const Icon = items[0]?.icon;\n  const avatar = items[0]?.avatar;\n  const label = items[0]?.label;\n  const showAvatar = avatar !== undefined;\n\n  const { avatarSize, iconSize } = selectSizeMap[size];\n\n  const recipe = useSlotRecipe({ key: 'select' });\n  const styles = recipe({ size });\n\n  return items[0] ? (\n    <Select.ValueText placeholder={placeholder ?? (state === 'readOnly' ? '(not selected)' : 'Select an option')}>\n      {showAvatar ? (\n        // Same avatar handling as the menu item (see BitkitSelectMenu.tsx). The `data-slot`\n        // lets the trigger recipe shrink its vertical padding so the avatar row keeps the\n        // 48/40 trigger height (see the `&:has([data-slot=\"avatar\"])` rule in Select.recipe.ts).\n        <Box data-slot=\"avatar\" css={styles.avatar}>\n          <BitkitAvatar variant=\"image\" src={avatar ?? ''} name={label} size={avatarSize} />\n        </Box>\n      ) : (\n        Icon && <Icon css={styles.valueIcon} size={iconSize} flexShrink={0} />\n      )}\n      <Text as=\"span\" overflow=\"hidden\" textOverflow=\"ellipsis\" whiteSpace=\"nowrap\" minWidth=\"0\">\n        {label}\n      </Text>\n    </Select.ValueText>\n  ) : (\n    <Select.ValueText\n      placeholder={placeholder ?? (state === 'readOnly' ? '(not selected)' : 'Select an option')}\n      display=\"block\"\n      overflow=\"hidden\"\n      textOverflow=\"ellipsis\"\n      whiteSpace=\"nowrap\"\n    />\n  );\n};\n\nconst BitkitSelect = forwardRef<HTMLDivElement, BitkitSelectProps>((props: BitkitSelectProps, ref) => {\n  const {\n    children,\n    defaultValue,\n    emptyHelperText,\n    emptyLabel,\n    errorHelperText,\n    errorLabel,\n    isLoading,\n    items,\n    onScrolledToBottom,\n    onSearchChange,\n    onValueChange,\n    placeholder,\n    disablePortal,\n    searchPlaceholder,\n    searchValue,\n    selectProps,\n    size = 'lg',\n    state,\n    triggerProps,\n    value,\n    ...fieldProps\n  } = props;\n\n  const collection = createListCollection({\n    items,\n    groupBy: (item) => item.group || '',\n    isItemDisabled: (item) => !!item.disabled,\n  });\n\n  const { disablePortal: disablePortalFromContext } = useContext(BitkitPortalContext);\n  const isInvalid = state === 'error' || !!fieldProps.errorText;\n\n  return (\n    <BitkitField ref={ref} state={state} {...fieldProps}>\n      <Select.Root\n        collection={collection}\n        size={size}\n        {...selectProps}\n        defaultValue={defaultValue ? [defaultValue] : undefined}\n        disabled={state === 'disabled'}\n        hasStatusIcon={state === 'error' || state === 'warning'}\n        invalid={isInvalid}\n        onValueChange={(newVal) => onValueChange?.(newVal.value[0])}\n        readOnly={state === 'readOnly'}\n        // Bypass Zag's isScrollable(contentEl) gate — our Content is overflow:hidden flex\n        // column, so the real scroll container is itemList. See BitkitMultiselect for why.\n        scrollToIndexFn={({ getElement }) => getElement()?.scrollIntoView({ block: 'nearest' })}\n        // Stay controlled whenever `value` is provided — including `''` (\"nothing selected\"). A\n        // truthiness check (`value ? … : undefined`) passes `undefined` for `''`, which flips\n        // Select.Root to uncontrolled: it then ignores `value`, so resets don't take and\n        // onValueChange stops firing when the same option is re-selected.\n        value={value === undefined ? undefined : value ? [value] : []}\n      >\n        <Select.Control className=\"group\">\n          <Select.HiddenSelect />\n          <Select.Trigger {...triggerProps} aria-readonly={state === 'readOnly' || undefined}>\n            <SelectValue placeholder={placeholder} size={size} state={state} />\n          </Select.Trigger>\n          <Select.IndicatorGroup>\n            {state === 'error' && (\n              <Select.Indicator>\n                <IconErrorCircleFilled size={size === 'lg' ? '24' : '16'} color=\"icon/negative\" />\n              </Select.Indicator>\n            )}\n            {state === 'warning' && (\n              <Select.Indicator>\n                <IconWarningYellow size={size === 'lg' ? '24' : '16'} />\n              </Select.Indicator>\n            )}\n            <Select.Indicator asChild>\n              <AssetSelectChevron />\n            </Select.Indicator>\n          </Select.IndicatorGroup>\n        </Select.Control>\n        <Portal disabled={disablePortal || disablePortalFromContext}>\n          <Select.Positioner>\n            <BitkitSelectMenu\n              collection={collection}\n              emptyHelperText={emptyHelperText}\n              emptyLabel={emptyLabel}\n              errorHelperText={errorHelperText}\n              errorLabel={errorLabel}\n              isLoading={isLoading}\n              onScrolledToBottom={onScrolledToBottom}\n              onSearchChange={onSearchChange}\n              searchPlaceholder={searchPlaceholder}\n              searchValue={searchValue}\n              size={size}\n            >\n              {children}\n            </BitkitSelectMenu>\n          </Select.Positioner>\n        </Portal>\n      </Select.Root>\n    </BitkitField>\n  );\n});\n\nBitkitSelect.displayName = 'BitkitSelect';\n\nexport default withSubComponents(BitkitSelect, { Action: BitkitSelectMenuAction });\n"],"mappings":"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"}
+{"version":3,"file":"BitkitSelect.js","names":[],"sources":["../../../lib/components/BitkitSelect/BitkitSelect.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { createListCollection } from '@chakra-ui/react/collection';\nimport { Portal } from '@chakra-ui/react/portal';\nimport { Select, type SelectRootProps, type SelectTriggerProps, useSelectContext } from '@chakra-ui/react/select';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { forwardRef, useContext } from 'react';\n\nimport { IconErrorCircleFilled, IconWarningYellow } from '../../icons';\nimport AssetSelectChevron from '../../utilities/AssetSelectChevron.tsx';\nimport BitkitPortalContext from '../../utilities/BitkitPortalContext';\nimport { withSubComponents } from '../../utilities/withSubComponents.ts';\nimport BitkitAvatar from '../BitkitAvatar/BitkitAvatar';\nimport BitkitField, { type BitkitFieldProps } from '../BitkitField/BitkitField.tsx';\nimport BitkitSelectMenu, {\n  type BitkitSelectMenuEmptyStateProps,\n  type BitkitSelectMenuItemProps,\n  type BitkitSelectMenuScrollProps,\n  type BitkitSelectMenuSearchProps,\n} from '../BitkitSelectMenu/BitkitSelectMenu.tsx';\nimport BitkitSelectMenuAction, {\n  type BitkitSelectMenuActionChild,\n} from '../BitkitSelectMenu/BitkitSelectMenuAction.tsx';\nimport { selectSizeMap } from '../BitkitSelectMenu/SelectMenuShell.tsx';\n\nexport type BitkitSelectTriggerProps = SelectTriggerProps;\n\nexport type BitkitSelectProps = Omit<BitkitFieldProps, 'children' | 'onChange' | 'state'> & {\n  children?: BitkitSelectMenuActionChild;\n  defaultValue?: string;\n  isLoading?: boolean;\n  items: Array<BitkitSelectMenuItemProps>;\n  onValueChange?: (newVal: string) => void;\n  placeholder?: string;\n  disablePortal?: boolean;\n  selectProps?: Omit<SelectRootProps, 'collection' | 'defaultValue' | 'onValueChange' | 'size' | 'value'>;\n  size?: 'md' | 'lg';\n  state?: 'disabled' | 'error' | 'readOnly' | 'warning';\n  triggerProps?: BitkitSelectTriggerProps;\n  value?: string;\n} & BitkitSelectMenuSearchProps &\n  BitkitSelectMenuScrollProps &\n  BitkitSelectMenuEmptyStateProps;\n\ntype SelectValueProps = {\n  placeholder?: string;\n  size: NonNullable<BitkitSelectProps['size']>;\n  state?: BitkitSelectProps['state'];\n};\n\nconst SelectValue = ({ placeholder, state, size }: SelectValueProps) => {\n  const select = useSelectContext();\n  const items = select.selectedItems as Array<BitkitSelectMenuItemProps>;\n\n  const Icon = items[0]?.icon;\n  const avatar = items[0]?.avatar;\n  const label = items[0]?.label;\n  const showAvatar = avatar !== undefined;\n\n  const { avatarSize, iconSize } = selectSizeMap[size];\n\n  const recipe = useSlotRecipe({ key: 'select' });\n  const styles = recipe({ size });\n\n  return items[0] ? (\n    <Select.ValueText placeholder={placeholder ?? (state === 'readOnly' ? '(not selected)' : 'Select an option')}>\n      {showAvatar ? (\n        // Same avatar handling as the menu item (see BitkitSelectMenu.tsx). The `data-slot`\n        // lets the trigger recipe shrink its vertical padding so the avatar row keeps the\n        // 48/40 trigger height (see the `&:has([data-slot=\"avatar\"])` rule in Select.recipe.ts).\n        <Box data-slot=\"avatar\" css={styles.avatar}>\n          <BitkitAvatar variant=\"image\" src={avatar ?? ''} name={label} size={avatarSize} />\n        </Box>\n      ) : (\n        Icon && <Icon css={styles.valueIcon} size={iconSize} flexShrink={0} />\n      )}\n      <Text as=\"span\" overflow=\"hidden\" textOverflow=\"ellipsis\" whiteSpace=\"nowrap\" minWidth=\"0\">\n        {label}\n      </Text>\n    </Select.ValueText>\n  ) : (\n    <Select.ValueText\n      placeholder={placeholder ?? (state === 'readOnly' ? '(not selected)' : 'Select an option')}\n      display=\"block\"\n      overflow=\"hidden\"\n      textOverflow=\"ellipsis\"\n      whiteSpace=\"nowrap\"\n    />\n  );\n};\n\nconst BitkitSelect = forwardRef<HTMLDivElement, BitkitSelectProps>((props: BitkitSelectProps, ref) => {\n  const {\n    children,\n    defaultValue,\n    emptyHelperText,\n    emptyLabel,\n    isLoading,\n    items,\n    onScrolledToBottom,\n    onSearchChange,\n    onValueChange,\n    placeholder,\n    disablePortal,\n    searchValue,\n    selectProps,\n    size = 'lg',\n    state,\n    triggerProps,\n    value,\n    ...fieldProps\n  } = props;\n\n  const collection = createListCollection({\n    items,\n    groupBy: (item) => item.group || '',\n    isItemDisabled: (item) => !!item.disabled,\n  });\n\n  const { disablePortal: disablePortalFromContext } = useContext(BitkitPortalContext);\n  const isInvalid = state === 'error' || !!fieldProps.errorText;\n\n  return (\n    <BitkitField ref={ref} state={state} {...fieldProps}>\n      <Select.Root\n        collection={collection}\n        size={size}\n        {...selectProps}\n        defaultValue={defaultValue ? [defaultValue] : undefined}\n        disabled={state === 'disabled'}\n        hasStatusIcon={state === 'error' || state === 'warning'}\n        invalid={isInvalid}\n        onValueChange={(newVal) => onValueChange?.(newVal.value[0])}\n        readOnly={state === 'readOnly'}\n        // Bypass Zag's isScrollable(contentEl) gate — our Content is overflow:hidden flex\n        // column, so the real scroll container is itemList. See BitkitMultiselect for why.\n        scrollToIndexFn={({ getElement }) => getElement()?.scrollIntoView({ block: 'nearest' })}\n        // Stay controlled whenever `value` is provided — including `''` (\"nothing selected\"). A\n        // truthiness check (`value ? … : undefined`) passes `undefined` for `''`, which flips\n        // Select.Root to uncontrolled: it then ignores `value`, so resets don't take and\n        // onValueChange stops firing when the same option is re-selected.\n        value={value === undefined ? undefined : value ? [value] : []}\n      >\n        <Select.Control className=\"group\">\n          <Select.HiddenSelect />\n          <Select.Trigger {...triggerProps} aria-readonly={state === 'readOnly' || undefined}>\n            <SelectValue placeholder={placeholder} size={size} state={state} />\n          </Select.Trigger>\n          <Select.IndicatorGroup>\n            {state === 'error' && (\n              <Select.Indicator>\n                <IconErrorCircleFilled size={size === 'lg' ? '24' : '16'} color=\"icon/negative\" />\n              </Select.Indicator>\n            )}\n            {state === 'warning' && (\n              <Select.Indicator>\n                <IconWarningYellow size={size === 'lg' ? '24' : '16'} />\n              </Select.Indicator>\n            )}\n            <Select.Indicator asChild>\n              <AssetSelectChevron />\n            </Select.Indicator>\n          </Select.IndicatorGroup>\n        </Select.Control>\n        <Portal disabled={disablePortal || disablePortalFromContext}>\n          <Select.Positioner>\n            <BitkitSelectMenu\n              collection={collection}\n              emptyHelperText={emptyHelperText}\n              emptyLabel={emptyLabel}\n              isLoading={isLoading}\n              onScrolledToBottom={onScrolledToBottom}\n              onSearchChange={onSearchChange}\n              searchValue={searchValue}\n              size={size}\n            >\n              {children}\n            </BitkitSelectMenu>\n          </Select.Positioner>\n        </Portal>\n      </Select.Root>\n    </BitkitField>\n  );\n});\n\nBitkitSelect.displayName = 'BitkitSelect';\n\nexport default withSubComponents(BitkitSelect, { Action: BitkitSelectMenuAction });\n"],"mappings":"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"}

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

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

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

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

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

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

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/BitkitTable/BitkitDefinitionColumnHeader.d.ts

@@ -13,7 +13,7 @@ export interface BitkitDefinitionColumnHeaderProps extends Omit<Table.ColumnHead
  * demand. It is `BitkitDefinitionTooltip` for a table header — same props, same behaviour, except the
  * title keeps the header's own type (`heading/h5`) instead of the body type that component pins.
  *
- * That type is also why it composes `BitkitTooltip` rather than rendering a `BitkitDefinitionTooltip`:
+ * That type is also why it composes `BitkitToggletip` / `BitkitTooltip` rather than rendering a `BitkitDefinitionTooltip`:
  * the latter's recipe always applies a `textSize`, and there is no value for it that means "inherit".
  *
  * Only the title is the trigger, so the rest of the header stays inert. Everything else a

package/dist/components/BitkitTable/BitkitDefinitionColumnHeader.js

@@ -1,6 +1,7 @@
 import BitkitTooltip from "../BitkitTooltip/BitkitTooltip.js";
+import BitkitToggletip from "../BitkitToggletip/BitkitToggletip.js";
 import { chakra } from "@chakra-ui/react/styled-system";
-import { forwardRef, useState } from "react";
+import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
 import { Table, useTableStyles } from "@chakra-ui/react/table";
 //#region lib/components/BitkitTable/BitkitDefinitionColumnHeader.tsx
@@ -9,7 +10,7 @@ import { Table, useTableStyles } from "@chakra-ui/react/table";
 * demand. It is `BitkitDefinitionTooltip` for a table header — same props, same behaviour, except the
 * title keeps the header's own type (`heading/h5`) instead of the body type that component pins.
 *
-* That type is also why it composes `BitkitTooltip` rather than rendering a `BitkitDefinitionTooltip`:
+* That type is also why it composes `BitkitToggletip` / `BitkitTooltip` rather than rendering a `BitkitDefinitionTooltip`:
 * the latter's recipe always applies a `textSize`, and there is no value for it that means "inherit".
 *
 * Only the title is the trigger, so the rest of the header stays inert. Everything else a
@@ -17,32 +18,28 @@ import { Table, useTableStyles } from "@chakra-ui/react/table";
 */
 var BitkitDefinitionColumnHeader = forwardRef(({ button, children, disablePortal, learnMoreTarget, learnMoreUrl, method = "click", placement, text, ...rest }, ref) => {
 	const styles = useTableStyles();
-	const [open, setOpen] = useState(false);
-	const isClick = method === "click";
+	const title = /* @__PURE__ */ jsx(chakra.button, {
+		css: styles.definitionTrigger,
+		truncate: true,
+		type: "button",
+		children
+	});
 	return /* @__PURE__ */ jsx(Table.ColumnHeader, {
 		ref,
 		...rest,
-		children: /* @__PURE__ */ jsx(BitkitTooltip, {
+		children: method === "hover" ? /* @__PURE__ */ jsx(BitkitTooltip, {
+			disablePortal,
+			placement,
+			text,
+			children: title
+		}) : /* @__PURE__ */ jsx(BitkitToggletip, {
 			button,
-			closeOnClick: isClick ? false : void 0,
 			disablePortal,
 			learnMoreTarget,
 			learnMoreUrl,
-			onOpenChange: isClick ? ({ open: nextOpen }) => {
-				if (!nextOpen) setOpen(false);
-			} : void 0,
-			open: isClick ? open : void 0,
-			openDelay: isClick ? Infinity : void 0,
 			placement,
 			text,
-			children: /* @__PURE__ */ jsx(chakra.button, {
-				"aria-expanded": isClick ? open : void 0,
-				css: styles.definitionTrigger,
-				onClick: isClick ? () => setOpen(!open) : void 0,
-				truncate: true,
-				type: "button",
-				children
-			})
+			children: title
 		})
 	});
 });

package/dist/components/BitkitTable/BitkitDefinitionColumnHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"BitkitDefinitionColumnHeader.js","names":[],"sources":["../../../lib/components/BitkitTable/BitkitDefinitionColumnHeader.tsx"],"sourcesContent":["import { chakra } from '@chakra-ui/react/styled-system';\nimport { Table, useTableStyles } from '@chakra-ui/react/table';\nimport { forwardRef, useState } from 'react';\n\nimport { type BitkitDefinitionTooltipProps } from '../BitkitDefinitionTooltip/BitkitDefinitionTooltip';\nimport BitkitTooltip from '../BitkitTooltip/BitkitTooltip';\n\n/**\n * Everything `BitkitDefinitionTooltip` takes — `children` is the column title, `text` the definition\n * — on top of everything a `BitkitTable.ColumnHeader` takes. The two the header owns are gone: `textSize`,\n * because the point is to keep the header's own type, and the tooltip's `truncate`, because the title\n * always truncates and `truncate` stays the header cell's own style prop.\n */\nexport interface BitkitDefinitionColumnHeaderProps\n  extends Omit<Table.ColumnHeaderProps, 'children'>, Omit<BitkitDefinitionTooltipProps, 'textSize' | 'truncate'> {}\n\n/**\n * A column header whose title is a glossary term: underlined, and revealing what the column means on\n * demand. It is `BitkitDefinitionTooltip` for a table header — same props, same behaviour, except the\n * title keeps the header's own type (`heading/h5`) instead of the body type that component pins.\n *\n * That type is also why it composes `BitkitTooltip` rather than rendering a `BitkitDefinitionTooltip`:\n * the latter's recipe always applies a `textSize`, and there is no value for it that means \"inherit\".\n *\n * Only the title is the trigger, so the rest of the header stays inert. Everything else a\n * `BitkitTable.ColumnHeader` takes — `textAlign`, `width`, `colSpan` — still applies.\n */\nconst BitkitDefinitionColumnHeader = forwardRef<HTMLTableCellElement, BitkitDefinitionColumnHeaderProps>(\n  (\n    { button, children, disablePortal, learnMoreTarget, learnMoreUrl, method = 'click', placement, text, ...rest },\n    ref,\n  ) => {\n    const styles = useTableStyles();\n    const [open, setOpen] = useState(false);\n    const isClick = method === 'click';\n\n    return (\n      <Table.ColumnHeader ref={ref} {...rest}>\n        <BitkitTooltip\n          button={button}\n          closeOnClick={isClick ? false : undefined}\n          disablePortal={disablePortal}\n          learnMoreTarget={learnMoreTarget}\n          learnMoreUrl={learnMoreUrl}\n          onOpenChange={\n            isClick\n              ? ({ open: nextOpen }) => {\n                  if (!nextOpen) setOpen(false);\n                }\n              : undefined\n          }\n          open={isClick ? open : undefined}\n          openDelay={isClick ? Infinity : undefined}\n          placement={placement}\n          text={text}\n        >\n          {/* chakra.button: no named primitive attaches a recipe slot to a bare trigger button */}\n          <chakra.button\n            aria-expanded={isClick ? open : undefined}\n            css={styles.definitionTrigger}\n            onClick={isClick ? () => setOpen(!open) : undefined}\n            truncate\n            type=\"button\"\n          >\n            {children}\n          </chakra.button>\n        </BitkitTooltip>\n      </Table.ColumnHeader>\n    );\n  },\n);\n\nBitkitDefinitionColumnHeader.displayName = 'BitkitTable.DefinitionColumnHeader';\n\nexport default BitkitDefinitionColumnHeader;\n"],"mappings":";;;;;;;;;;;;;;;;;AA2BA,IAAM,+BAA+B,YAEjC,EAAE,QAAQ,UAAU,eAAe,iBAAiB,cAAc,SAAS,SAAS,WAAW,MAAM,GAAG,QACxG,QACG;CACH,MAAM,SAAS,eAAe;CAC9B,MAAM,CAAC,MAAM,WAAW,SAAS,KAAK;CACtC,MAAM,UAAU,WAAW;CAE3B,OACE,oBAAC,MAAM,cAAP;EAAyB;EAAK,GAAI;EAChC,UAAA,oBAAC,eAAD;GACU;GACR,cAAc,UAAU,QAAQ,KAAA;GACjB;GACE;GACH;GACd,cACE,WACK,EAAE,MAAM,eAAe;IACtB,IAAI,CAAC,UAAU,QAAQ,KAAK;GAC9B,IACA,KAAA;GAEN,MAAM,UAAU,OAAO,KAAA;GACvB,WAAW,UAAU,WAAW,KAAA;GACrB;GACL;GAGN,UAAA,oBAAC,OAAO,QAAR;IACE,iBAAe,UAAU,OAAO,KAAA;IAChC,KAAK,OAAO;IACZ,SAAS,gBAAgB,QAAQ,CAAC,IAAI,IAAI,KAAA;IAC1C,UAAA;IACA,MAAK;IAEJ;GACY,CAAA;EACF,CAAA;CACG,CAAA;AAExB,CACF;AAEA,6BAA6B,cAAc"}
+{"version":3,"file":"BitkitDefinitionColumnHeader.js","names":[],"sources":["../../../lib/components/BitkitTable/BitkitDefinitionColumnHeader.tsx"],"sourcesContent":["import { chakra } from '@chakra-ui/react/styled-system';\nimport { Table, useTableStyles } from '@chakra-ui/react/table';\nimport { forwardRef } from 'react';\n\nimport { type BitkitDefinitionTooltipProps } from '../BitkitDefinitionTooltip/BitkitDefinitionTooltip';\nimport BitkitToggletip from '../BitkitToggletip/BitkitToggletip';\nimport BitkitTooltip from '../BitkitTooltip/BitkitTooltip';\n\n/**\n * Everything `BitkitDefinitionTooltip` takes — `children` is the column title, `text` the definition\n * — on top of everything a `BitkitTable.ColumnHeader` takes. The two the header owns are gone: `textSize`,\n * because the point is to keep the header's own type, and the tooltip's `truncate`, because the title\n * always truncates and `truncate` stays the header cell's own style prop.\n */\nexport interface BitkitDefinitionColumnHeaderProps\n  extends Omit<Table.ColumnHeaderProps, 'children'>, Omit<BitkitDefinitionTooltipProps, 'textSize' | 'truncate'> {}\n\n/**\n * A column header whose title is a glossary term: underlined, and revealing what the column means on\n * demand. It is `BitkitDefinitionTooltip` for a table header — same props, same behaviour, except the\n * title keeps the header's own type (`heading/h5`) instead of the body type that component pins.\n *\n * That type is also why it composes `BitkitToggletip` / `BitkitTooltip` rather than rendering a `BitkitDefinitionTooltip`:\n * the latter's recipe always applies a `textSize`, and there is no value for it that means \"inherit\".\n *\n * Only the title is the trigger, so the rest of the header stays inert. Everything else a\n * `BitkitTable.ColumnHeader` takes — `textAlign`, `width`, `colSpan` — still applies.\n */\nconst BitkitDefinitionColumnHeader = forwardRef<HTMLTableCellElement, BitkitDefinitionColumnHeaderProps>(\n  (\n    { button, children, disablePortal, learnMoreTarget, learnMoreUrl, method = 'click', placement, text, ...rest },\n    ref,\n  ) => {\n    const styles = useTableStyles();\n\n    const title = (\n      // chakra.button: no named primitive attaches a recipe slot to a bare trigger button\n      <chakra.button css={styles.definitionTrigger} truncate type=\"button\">\n        {children}\n      </chakra.button>\n    );\n\n    return (\n      <Table.ColumnHeader ref={ref} {...rest}>\n        {method === 'hover' ? (\n          <BitkitTooltip disablePortal={disablePortal} placement={placement} text={text}>\n            {title}\n          </BitkitTooltip>\n        ) : (\n          <BitkitToggletip\n            button={button}\n            disablePortal={disablePortal}\n            learnMoreTarget={learnMoreTarget}\n            learnMoreUrl={learnMoreUrl}\n            placement={placement}\n            text={text}\n          >\n            {title}\n          </BitkitToggletip>\n        )}\n      </Table.ColumnHeader>\n    );\n  },\n);\n\nBitkitDefinitionColumnHeader.displayName = 'BitkitTable.DefinitionColumnHeader';\n\nexport default BitkitDefinitionColumnHeader;\n"],"mappings":";;;;;;;;;;;;;;;;;;AA4BA,IAAM,+BAA+B,YAEjC,EAAE,QAAQ,UAAU,eAAe,iBAAiB,cAAc,SAAS,SAAS,WAAW,MAAM,GAAG,QACxG,QACG;CACH,MAAM,SAAS,eAAe;CAE9B,MAAM,QAEJ,oBAAC,OAAO,QAAR;EAAe,KAAK,OAAO;EAAmB,UAAA;EAAS,MAAK;EACzD;CACY,CAAA;CAGjB,OACE,oBAAC,MAAM,cAAP;EAAyB;EAAK,GAAI;EAC/B,UAAA,WAAW,UACV,oBAAC,eAAD;GAA8B;GAA0B;GAAiB;GACtE,UAAA;EACY,CAAA,IAEf,oBAAC,iBAAD;GACU;GACO;GACE;GACH;GACH;GACL;GAEL,UAAA;EACc,CAAA;CAED,CAAA;AAExB,CACF;AAEA,6BAA6B,cAAc"}

package/dist/components/BitkitToggletip/BitkitToggletip.d.ts

@@ -0,0 +1,59 @@
+import { PopoverRootProps } from '@ark-ui/react/popover';
+import { ReactNode } from 'react';
+import { BitkitIconComponent } from '../../icons';
+import { BitkitColorButtonProps } from '../BitkitColorButton/BitkitColorButton';
+export type BitkitToggletipProps = {
+    /** Action button at the end of the toggletip. Defaults to the `white` colour variant, the one that reads on its dark background. */
+    button?: BitkitColorButtonProps;
+    /**
+     * The trigger the toggletip opens from. Rendered via `asChild`, so it must be a focusable control
+     * that accepts a ref — unless `wrapTrigger` puts a button in between.
+     */
+    children: ReactNode;
+    /** Open on first render, for an uncontrolled toggletip. */
+    defaultOpen?: PopoverRootProps['defaultOpen'];
+    /**
+     * Render the toggletip inline instead of in a portal. Only needed when it must stay inside its
+     * parent's DOM subtree — a dialog already sets this for you.
+     */
+    disablePortal?: boolean;
+    /** Render the trigger without a toggletip — for hints that only apply in some states. */
+    disabled?: boolean;
+    /** Icon after the text — `IconArrowNortheast` when the trigger opens something in a new tab, for instance. */
+    icon?: BitkitIconComponent;
+    /** Target for the "Learn more" link. `_blank` also sets `rel="noopener noreferrer"`. */
+    learnMoreTarget?: HTMLAnchorElement['target'];
+    /** Adds a "Learn more" link pointing here, for the fuller explanation. */
+    learnMoreUrl?: string;
+    /** Called when the toggletip opens or closes. */
+    onOpenChange?: PopoverRootProps['onOpenChange'];
+    /** Controls the open state. */
+    open?: PopoverRootProps['open'];
+    /** Where the toggletip sits relative to the trigger (default `top`). It flips if space is short. */
+    placement?: NonNullable<PopoverRootProps['positioning']>['placement'];
+    /** The toggletip's text. */
+    text: string;
+    /** Accessible name of the `wrapTrigger` button, for a trigger with no text of its own, like an icon. */
+    triggerAriaLabel?: string;
+    /**
+     * Put the trigger inside a button instead of rendering on it — for a trigger that is not a control
+     * itself, like a badge or an icon. The button takes the click, the tap and the keyboard.
+     */
+    wrapTrigger?: boolean;
+};
+/**
+ * A tooltip's bubble that opens on click, tap or Enter and stays open, so what it carries — a "Learn
+ * more" link, an action button — can be reached by pointer, touch and keyboard alike. It is a
+ * popover, not a tooltip: a tooltip closes as soon as focus leaves its trigger and ignores touch, so
+ * anything clickable inside one can't be reached.
+ *
+ * Reach for `BitkitTooltip` when the hint is text only; this component when it links or acts.
+ *
+ * The content renders in a portal, so it escapes any ancestor that traps stacking or clips overflow.
+ * Dialogs turn that off through `BitkitPortalContext`; `disablePortal` is the manual override.
+ */
+declare const BitkitToggletip: {
+    ({ button, children, defaultOpen, disablePortal, disabled, icon: Icon, learnMoreTarget, learnMoreUrl, onOpenChange, open, placement, text, triggerAriaLabel, wrapTrigger, }: BitkitToggletipProps): import('react').JSX.Element;
+    displayName: string;
+};
+export default BitkitToggletip;

package/dist/components/BitkitToggletip/BitkitToggletip.js

@@ -0,0 +1,107 @@
+import BitkitPortalContext from "../../utilities/BitkitPortalContext.js";
+import BitkitColorButton from "../BitkitColorButton/BitkitColorButton.js";
+import { Box } from "@chakra-ui/react/box";
+import { createSlotRecipeContext } from "@chakra-ui/react/styled-system";
+import { isValidElement, useContext } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Portal } from "@chakra-ui/react/portal";
+import { Popover } from "@ark-ui/react/popover";
+import { Link } from "@chakra-ui/react/link";
+//#region lib/components/BitkitToggletip/BitkitToggletip.tsx
+var { withRootProvider, withContext } = createSlotRecipeContext({ key: "toggletip" });
+var Root = withRootProvider(Popover.Root);
+var Trigger = withContext(Popover.Trigger, "trigger", { forwardAsChild: true });
+var Positioner = withContext(Popover.Positioner, "positioner", { forwardAsChild: true });
+var Content = withContext(Popover.Content, "content", { forwardAsChild: true });
+var Title = withContext(Popover.Title, "title", { forwardAsChild: true });
+var Arrow = withContext(Popover.Arrow, "arrow", { forwardAsChild: true });
+var ArrowTip = withContext(Popover.ArrowTip, "arrowTip", { forwardAsChild: true });
+/**
+* A tooltip's bubble that opens on click, tap or Enter and stays open, so what it carries — a "Learn
+* more" link, an action button — can be reached by pointer, touch and keyboard alike. It is a
+* popover, not a tooltip: a tooltip closes as soon as focus leaves its trigger and ignores touch, so
+* anything clickable inside one can't be reached.
+*
+* Reach for `BitkitTooltip` when the hint is text only; this component when it links or acts.
+*
+* The content renders in a portal, so it escapes any ancestor that traps stacking or clips overflow.
+* Dialogs turn that off through `BitkitPortalContext`; `disablePortal` is the manual override.
+*/
+var BitkitToggletip = ({ button, children, defaultOpen, disablePortal, disabled, icon: Icon, learnMoreTarget, learnMoreUrl, onOpenChange, open, placement = "top", text, triggerAriaLabel, wrapTrigger }) => {
+	const { disablePortal: disablePortalFromContext } = useContext(BitkitPortalContext);
+	const hasActions = !!learnMoreUrl || !!button;
+	if (disabled) return /* @__PURE__ */ jsx(Fragment$1, { children });
+	return /* @__PURE__ */ jsxs(Root, {
+		defaultOpen,
+		onOpenChange,
+		open,
+		positioning: {
+			placement,
+			offset: {
+				mainAxis: 4,
+				crossAxis: 0
+			}
+		},
+		children: [wrapTrigger || !isValidElement(children) ? /* @__PURE__ */ jsx(Trigger, {
+			"aria-label": triggerAriaLabel,
+			css: {
+				alignItems: "center",
+				appearance: "none",
+				background: "none",
+				border: 0,
+				color: "inherit",
+				display: "inline-flex",
+				font: "inherit",
+				padding: 0,
+				_focusVisible: {
+					outline: "none",
+					"& > *": {
+						outlineColor: "var(--focus-ring-color)",
+						outlineOffset: "var(--focus-ring-offset, 2px)",
+						outlineStyle: "var(--focus-ring-style, solid)",
+						outlineWidth: "var(--focus-ring-width, 2px)"
+					}
+				}
+			},
+			children
+		}) : /* @__PURE__ */ jsx(Trigger, {
+			asChild: true,
+			children
+		}), /* @__PURE__ */ jsx(Portal, {
+			disabled: disablePortal || disablePortalFromContext,
+			children: /* @__PURE__ */ jsx(Positioner, { children: /* @__PURE__ */ jsxs(Content, { children: [
+				/* @__PURE__ */ jsx(Arrow, { children: /* @__PURE__ */ jsx(ArrowTip, {}) }),
+				/* @__PURE__ */ jsxs(Box, {
+					display: "flex",
+					gap: "8",
+					children: [/* @__PURE__ */ jsx(Title, { children: text }), Icon && /* @__PURE__ */ jsx(Icon, {
+						flexShrink: "0",
+						size: "16"
+					})]
+				}),
+				hasActions && /* @__PURE__ */ jsxs(Box, {
+					alignItems: "center",
+					display: "flex",
+					gap: "16",
+					marginBlockStart: "16",
+					children: [learnMoreUrl && /* @__PURE__ */ jsx(Link, {
+						color: "color/purple/highlight",
+						href: learnMoreUrl,
+						rel: learnMoreTarget === "_blank" ? "noopener noreferrer" : void 0,
+						target: learnMoreTarget,
+						children: "Learn more"
+					}), button && /* @__PURE__ */ jsx(BitkitColorButton, {
+						colorVariant: "white",
+						marginInlineStart: "auto",
+						...button
+					})]
+				})
+			] }) })
+		})]
+	});
+};
+BitkitToggletip.displayName = "BitkitToggletip";
+//#endregion
+export { BitkitToggletip as default };
+
+//# sourceMappingURL=BitkitToggletip.js.map

package/dist/components/BitkitToggletip/BitkitToggletip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BitkitToggletip.js","names":[],"sources":["../../../lib/components/BitkitToggletip/BitkitToggletip.tsx"],"sourcesContent":["import { Popover as ArkPopover, type PopoverRootProps } from '@ark-ui/react/popover';\nimport { Box } from '@chakra-ui/react/box';\nimport { Link } from '@chakra-ui/react/link';\nimport {\n  type PopoverArrowProps,\n  type PopoverArrowTipProps,\n  type PopoverContentProps,\n  type PopoverPositionerProps,\n  type PopoverTitleProps,\n  type PopoverTriggerProps,\n} from '@chakra-ui/react/popover';\nimport { Portal } from '@chakra-ui/react/portal';\nimport { createSlotRecipeContext } from '@chakra-ui/react/styled-system';\nimport { isValidElement, type ReactNode, useContext } from 'react';\n\nimport { type BitkitIconComponent } from '../../icons';\nimport BitkitPortalContext from '../../utilities/BitkitPortalContext';\nimport BitkitColorButton, { type BitkitColorButtonProps } from '../BitkitColorButton/BitkitColorButton';\n\n// Chakra's own Popover is Ark's popover under the `popover` recipe; this is the same composition\n// under `toggletip`, so the bubble can share the tooltip's surface instead of the popover's card.\nconst { withRootProvider, withContext } = createSlotRecipeContext({ key: 'toggletip' });\nconst Root = withRootProvider<PopoverRootProps>(ArkPopover.Root);\nconst Trigger = withContext<HTMLButtonElement, PopoverTriggerProps>(ArkPopover.Trigger, 'trigger', {\n  forwardAsChild: true,\n});\nconst Positioner = withContext<HTMLDivElement, PopoverPositionerProps>(ArkPopover.Positioner, 'positioner', {\n  forwardAsChild: true,\n});\nconst Content = withContext<HTMLDivElement, PopoverContentProps>(ArkPopover.Content, 'content', {\n  forwardAsChild: true,\n});\n// The text is the popover's title, which is what names its dialog for assistive technology.\nconst Title = withContext<HTMLDivElement, PopoverTitleProps>(ArkPopover.Title, 'title', { forwardAsChild: true });\nconst Arrow = withContext<HTMLDivElement, PopoverArrowProps>(ArkPopover.Arrow, 'arrow', { forwardAsChild: true });\nconst ArrowTip = withContext<HTMLDivElement, PopoverArrowTipProps>(ArkPopover.ArrowTip, 'arrowTip', {\n  forwardAsChild: true,\n});\n\nexport type BitkitToggletipProps = {\n  /** Action button at the end of the toggletip. Defaults to the `white` colour variant, the one that reads on its dark background. */\n  button?: BitkitColorButtonProps;\n  /**\n   * The trigger the toggletip opens from. Rendered via `asChild`, so it must be a focusable control\n   * that accepts a ref — unless `wrapTrigger` puts a button in between.\n   */\n  children: ReactNode;\n  /** Open on first render, for an uncontrolled toggletip. */\n  defaultOpen?: PopoverRootProps['defaultOpen'];\n  /**\n   * Render the toggletip inline instead of in a portal. Only needed when it must stay inside its\n   * parent's DOM subtree — a dialog already sets this for you.\n   */\n  disablePortal?: boolean;\n  /** Render the trigger without a toggletip — for hints that only apply in some states. */\n  disabled?: boolean;\n  /** Icon after the text — `IconArrowNortheast` when the trigger opens something in a new tab, for instance. */\n  icon?: BitkitIconComponent;\n  /** Target for the \"Learn more\" link. `_blank` also sets `rel=\"noopener noreferrer\"`. */\n  learnMoreTarget?: HTMLAnchorElement['target'];\n  /** Adds a \"Learn more\" link pointing here, for the fuller explanation. */\n  learnMoreUrl?: string;\n  /** Called when the toggletip opens or closes. */\n  onOpenChange?: PopoverRootProps['onOpenChange'];\n  /** Controls the open state. */\n  open?: PopoverRootProps['open'];\n  /** Where the toggletip sits relative to the trigger (default `top`). It flips if space is short. */\n  placement?: NonNullable<PopoverRootProps['positioning']>['placement'];\n  /** The toggletip's text. */\n  text: string;\n  /** Accessible name of the `wrapTrigger` button, for a trigger with no text of its own, like an icon. */\n  triggerAriaLabel?: string;\n  /**\n   * Put the trigger inside a button instead of rendering on it — for a trigger that is not a control\n   * itself, like a badge or an icon. The button takes the click, the tap and the keyboard.\n   */\n  wrapTrigger?: boolean;\n};\n\n/**\n * A tooltip's bubble that opens on click, tap or Enter and stays open, so what it carries — a \"Learn\n * more\" link, an action button — can be reached by pointer, touch and keyboard alike. It is a\n * popover, not a tooltip: a tooltip closes as soon as focus leaves its trigger and ignores touch, so\n * anything clickable inside one can't be reached.\n *\n * Reach for `BitkitTooltip` when the hint is text only; this component when it links or acts.\n *\n * The content renders in a portal, so it escapes any ancestor that traps stacking or clips overflow.\n * Dialogs turn that off through `BitkitPortalContext`; `disablePortal` is the manual override.\n */\nconst BitkitToggletip = ({\n  button,\n  children,\n  defaultOpen,\n  disablePortal,\n  disabled,\n  icon: Icon,\n  learnMoreTarget,\n  learnMoreUrl,\n  onOpenChange,\n  open,\n  placement = 'top',\n  text,\n  triggerAriaLabel,\n  wrapTrigger,\n}: BitkitToggletipProps) => {\n  const { disablePortal: disablePortalFromContext } = useContext(BitkitPortalContext);\n  const hasActions = !!learnMoreUrl || !!button;\n\n  if (disabled) {\n    return <>{children}</>;\n  }\n\n  return (\n    <Root\n      defaultOpen={defaultOpen}\n      onOpenChange={onOpenChange}\n      open={open}\n      positioning={{ placement, offset: { mainAxis: 4, crossAxis: 0 } }}\n    >\n      {wrapTrigger || !isValidElement(children) ? (\n        <Trigger\n          aria-label={triggerAriaLabel}\n          css={{\n            alignItems: 'center',\n            appearance: 'none',\n            background: 'none',\n            border: 0,\n            color: 'inherit',\n            display: 'inline-flex',\n            font: 'inherit',\n            padding: 0,\n            // The button owns the tab stop, but the focus ring belongs on the trigger inside it: an\n            // outline follows the border-radius of the element it is drawn on, and the button has\n            // none — so leaving it here squares off a pill or a round trigger.\n            _focusVisible: {\n              outline: 'none',\n              '& > *': {\n                outlineColor: 'var(--focus-ring-color)',\n                outlineOffset: 'var(--focus-ring-offset, 2px)',\n                outlineStyle: 'var(--focus-ring-style, solid)',\n                outlineWidth: 'var(--focus-ring-width, 2px)',\n              },\n            },\n          }}\n        >\n          {children}\n        </Trigger>\n      ) : (\n        <Trigger asChild>{children}</Trigger>\n      )}\n      <Portal disabled={disablePortal || disablePortalFromContext}>\n        <Positioner>\n          <Content>\n            <Arrow>\n              <ArrowTip />\n            </Arrow>\n            <Box display=\"flex\" gap=\"8\">\n              <Title>{text}</Title>\n              {Icon && <Icon flexShrink=\"0\" size=\"16\" />}\n            </Box>\n            {hasActions && (\n              <Box alignItems=\"center\" display=\"flex\" gap=\"16\" marginBlockStart=\"16\">\n                {learnMoreUrl && (\n                  <Link\n                    color=\"color/purple/highlight\"\n                    href={learnMoreUrl}\n                    rel={learnMoreTarget === '_blank' ? 'noopener noreferrer' : undefined}\n                    target={learnMoreTarget}\n                  >\n                    Learn more\n                  </Link>\n                )}\n                {button && <BitkitColorButton colorVariant=\"white\" marginInlineStart=\"auto\" {...button} />}\n              </Box>\n            )}\n          </Content>\n        </Positioner>\n      </Portal>\n    </Root>\n  );\n};\n\nBitkitToggletip.displayName = 'BitkitToggletip';\n\nexport default BitkitToggletip;\n"],"mappings":";;;;;;;;;;AAqBA,IAAM,EAAE,kBAAkB,gBAAgB,wBAAwB,EAAE,KAAK,YAAY,CAAC;AACtF,IAAM,OAAO,iBAAmC,QAAW,IAAI;AAC/D,IAAM,UAAU,YAAoD,QAAW,SAAS,WAAW,EACjG,gBAAgB,KAClB,CAAC;AACD,IAAM,aAAa,YAAoD,QAAW,YAAY,cAAc,EAC1G,gBAAgB,KAClB,CAAC;AACD,IAAM,UAAU,YAAiD,QAAW,SAAS,WAAW,EAC9F,gBAAgB,KAClB,CAAC;AAED,IAAM,QAAQ,YAA+C,QAAW,OAAO,SAAS,EAAE,gBAAgB,KAAK,CAAC;AAChH,IAAM,QAAQ,YAA+C,QAAW,OAAO,SAAS,EAAE,gBAAgB,KAAK,CAAC;AAChH,IAAM,WAAW,YAAkD,QAAW,UAAU,YAAY,EAClG,gBAAgB,KAClB,CAAC;;;;;;;;;;;;AAqDD,IAAM,mBAAmB,EACvB,QACA,UACA,aACA,eACA,UACA,MAAM,MACN,iBACA,cACA,cACA,MACA,YAAY,OACZ,MACA,kBACA,kBAC0B;CAC1B,MAAM,EAAE,eAAe,6BAA6B,WAAW,mBAAmB;CAClF,MAAM,aAAa,CAAC,CAAC,gBAAgB,CAAC,CAAC;CAEvC,IAAI,UACF,OAAO,oBAAA,YAAA,EAAG,SAAW,CAAA;CAGvB,OACE,qBAAC,MAAD;EACe;EACC;EACR;EACN,aAAa;GAAE;GAAW,QAAQ;IAAE,UAAU;IAAG,WAAW;GAAE;EAAE;EAJlE,UAAA,CAMG,eAAe,CAAC,eAAe,QAAQ,IACtC,oBAAC,SAAD;GACE,cAAY;GACZ,KAAK;IACH,YAAY;IACZ,YAAY;IACZ,YAAY;IACZ,QAAQ;IACR,OAAO;IACP,SAAS;IACT,MAAM;IACN,SAAS;IAIT,eAAe;KACb,SAAS;KACT,SAAS;MACP,cAAc;MACd,eAAe;MACf,cAAc;MACd,cAAc;KAChB;IACF;GACF;GAEC;EACM,CAAA,IAET,oBAAC,SAAD;GAAS,SAAA;GAAS;EAAkB,CAAA,GAEtC,oBAAC,QAAD;GAAQ,UAAU,iBAAiB;GACjC,UAAA,oBAAC,YAAD,EAAA,UACE,qBAAC,SAAD,EAAA,UAAA;IACE,oBAAC,OAAD,EAAA,UACE,oBAAC,UAAD,CAAW,CAAA,EACN,CAAA;IACP,qBAAC,KAAD;KAAK,SAAQ;KAAO,KAAI;KAAxB,UAAA,CACE,oBAAC,OAAD,EAAA,UAAQ,KAAY,CAAA,GACnB,QAAQ,oBAAC,MAAD;MAAM,YAAW;MAAI,MAAK;KAAM,CAAA,CACtC;;IACJ,cACC,qBAAC,KAAD;KAAK,YAAW;KAAS,SAAQ;KAAO,KAAI;KAAK,kBAAiB;KAAlE,UAAA,CACG,gBACC,oBAAC,MAAD;MACE,OAAM;MACN,MAAM;MACN,KAAK,oBAAoB,WAAW,wBAAwB,KAAA;MAC5D,QAAQ;MACT,UAAA;KAEK,CAAA,GAEP,UAAU,oBAAC,mBAAD;MAAmB,cAAa;MAAQ,mBAAkB;MAAO,GAAI;KAAS,CAAA,CACtF;;GAEA,EAAA,CAAA,EACC,CAAA;EACN,CAAA,CACJ;;AAEV;AAEA,gBAAgB,cAAc"}