@ecohouse/ui 0.1.2 → 0.1.4

package/src/components/Select/Select.tsx

@@ -0,0 +1,851 @@
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ComponentRef,
+  type ReactNode,
+} from "react";
+import {
+  Platform,
+  Pressable,
+  ScrollView,
+  StyleSheet,
+  Text,
+  TextInput,
+  View,
+  type LayoutChangeEvent,
+  type StyleProp,
+  type TextStyle,
+  type ViewProps,
+  type ViewStyle,
+} from "react-native";
+import { Checkbox } from "../Checkbox";
+import { ChevronDownIcon, SearchIcon, UserIcon } from "../../icons";
+import { colors, selectTypography } from "../../theme";
+import { mergeRefs } from "../../utils/mergeRefs";
+import { useApplyWebClassName } from "../../utils/useApplyWebClassName";
+
+export type SelectOption = {
+  label: string;
+  value: string;
+};
+
+type SelectBaseProps = Omit<ViewProps, "style" | "children"> & {
+  label?: string;
+  showLabel?: boolean;
+  hint?: string;
+  showHint?: boolean;
+  placeholder?: string;
+  options: SelectOption[];
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  disabled?: boolean;
+  error?: boolean;
+  leftIcon?: ReactNode;
+  showLeftIcon?: boolean;
+  showSearch?: boolean;
+  searchPlaceholder?: string;
+  /**
+   * Called with the raw query on every keystroke. When provided, the parent owns
+   * filtering (e.g. server search) and the options prop is rendered as-is;
+   * when omitted, options are filtered locally by label.
+   */
+  onSearchChange?: (query: string) => void;
+  /** Shows a loading row in the menu while the parent fetches options. */
+  loading?: boolean;
+  /** Text shown when no options match. */
+  emptyText?: string;
+  style?: StyleProp<ViewStyle>;
+  className?: string;
+};
+
+export type SelectSingleProps = SelectBaseProps & {
+  multiple?: false;
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+};
+
+export type SelectMultipleProps = SelectBaseProps & {
+  multiple: true;
+  value?: string[];
+  defaultValue?: string[];
+  onValueChange?: (value: string[]) => void;
+};
+
+export type SelectProps = SelectSingleProps | SelectMultipleProps;
+
+const DEFAULT_WIDTH = 308;
+const TRIGGER_HEIGHT = 44;
+const TRIGGER_RADIUS = 60;
+const MENU_RADIUS = 24;
+const MENU_MAX_LIST_HEIGHT = 248;
+const ITEM_RADIUS = 12;
+const ICON_SIZE = 20;
+const CHIP_GAP = 6;
+const FALLBACK_ELLIPSIS_WIDTH = 20;
+
+type ItemVisualState = "default" | "hover" | "selected";
+
+function itemBackground(state: ItemVisualState): string {
+  switch (state) {
+    case "hover":
+      return colors.grey600;
+    case "selected":
+      return colors.primaryMuted;
+    default:
+      return "transparent";
+  }
+}
+
+function toArray(value: string | string[] | undefined): string[] {
+  if (value == null || value === "") return [];
+  return Array.isArray(value) ? value : [value];
+}
+
+function resolveVisibleOptions(
+  options: SelectOption[],
+  containerWidth: number,
+  chipWidths: Record<string, number>,
+  ellipsisWidth: number,
+): { visible: SelectOption[]; hasOverflow: boolean } {
+  if (options.length === 0) return { visible: [], hasOverflow: false };
+  if (containerWidth <= 0) return { visible: options.slice(0, 1), hasOverflow: options.length > 1 };
+
+  const visible: SelectOption[] = [];
+  let used = 0;
+
+  for (let index = 0; index < options.length; index += 1) {
+    const option = options[index];
+    const chipWidth = chipWidths[option.value];
+    if (chipWidth == null) {
+      if (visible.length === 0) visible.push(option);
+      break;
+    }
+
+    const remainingAfter = options.length - index - 1;
+    const gap = visible.length > 0 ? CHIP_GAP : 0;
+    const reserve = remainingAfter > 0 ? CHIP_GAP + ellipsisWidth : 0;
+    const nextUsed = used + gap + chipWidth;
+
+    if (visible.length > 0 && nextUsed + reserve > containerWidth) {
+      return { visible, hasOverflow: true };
+    }
+
+    visible.push(option);
+    used = nextUsed;
+  }
+
+  return { visible, hasOverflow: visible.length < options.length };
+}
+
+type MultiValueChipsProps = {
+  options: SelectOption[];
+  disabled?: boolean;
+  onRemove: (value: string) => void;
+};
+
+function MultiValueChips({ options, disabled, onRemove }: MultiValueChipsProps) {
+  const [containerWidth, setContainerWidth] = useState(0);
+  const [chipWidths, setChipWidths] = useState<Record<string, number>>({});
+  const [ellipsisWidth, setEllipsisWidth] = useState(FALLBACK_ELLIPSIS_WIDTH);
+
+  useEffect(() => {
+    setChipWidths((current) => {
+      const validValues = new Set(options.map((option) => option.value));
+      const keys = Object.keys(current);
+      if (keys.every((key) => validValues.has(key))) return current;
+
+      const next: Record<string, number> = {};
+      for (const key of keys) {
+        if (validValues.has(key)) next[key] = current[key];
+      }
+      return next;
+    });
+  }, [options]);
+
+  const { visible, hasOverflow } = useMemo(
+    () => resolveVisibleOptions(options, containerWidth, chipWidths, ellipsisWidth),
+    [chipWidths, containerWidth, ellipsisWidth, options],
+  );
+
+  const handleContainerLayout = (event: LayoutChangeEvent) => {
+    const next = Math.floor(event.nativeEvent.layout.width);
+    setContainerWidth((current) => (current === next ? current : next));
+  };
+
+  const handleChipLayout = (value: string, event: LayoutChangeEvent) => {
+    const next = Math.ceil(event.nativeEvent.layout.width);
+    setChipWidths((current) => (current[value] === next ? current : { ...current, [value]: next }));
+  };
+
+  const handleEllipsisLayout = (event: LayoutChangeEvent) => {
+    const next = Math.ceil(event.nativeEvent.layout.width);
+    setEllipsisWidth((current) => (current === next ? current : next));
+  };
+
+  return (
+    <View style={styles.multiValueRoot}>
+      {/* Hidden copy of every chip; RN has no synchronous text measurement. */}
+      <View pointerEvents="none" style={styles.measureRow}>
+        {options.map((option) => (
+          <View
+            key={`measure-${option.value}`}
+            style={styles.chip}
+            onLayout={(event) => handleChipLayout(option.value, event)}
+          >
+            <Text style={styles.chipLabel} numberOfLines={1}>
+              {option.label}
+            </Text>
+            <Text style={styles.chipRemove}>×</Text>
+          </View>
+        ))}
+        <View style={styles.ellipsis} onLayout={handleEllipsisLayout}>
+          <Text style={styles.ellipsisText}>...</Text>
+        </View>
+      </View>
+
+      <View style={styles.chipsRow} onLayout={handleContainerLayout}>
+        {visible.map((option) => (
+          <View key={option.value} style={styles.chip}>
+            <Text style={styles.chipLabel} numberOfLines={1}>
+              {option.label}
+            </Text>
+            <Pressable
+              onPress={(event) => {
+                // Keep the surrounding trigger Pressable from toggling the menu.
+                event?.stopPropagation?.();
+                onRemove(option.value);
+              }}
+              disabled={disabled}
+              hitSlop={6}
+              accessibilityRole="button"
+              accessibilityLabel={`Remove ${option.label}`}
+            >
+              <Text style={styles.chipRemove}>×</Text>
+            </Pressable>
+          </View>
+        ))}
+
+        {hasOverflow ? (
+          <View style={styles.ellipsis}>
+            <Text style={styles.ellipsisText}>...</Text>
+          </View>
+        ) : null}
+      </View>
+    </View>
+  );
+}
+
+export const Select = forwardRef<ComponentRef<typeof View>, SelectProps>(
+  function Select(props, forwardedRef) {
+    const {
+      label = "Label",
+      showLabel = true,
+      hint,
+      showHint = false,
+      placeholder = "placeholder",
+      options,
+      open: openProp,
+      defaultOpen = false,
+      onOpenChange,
+      disabled = false,
+      error = false,
+      leftIcon,
+      showLeftIcon = true,
+      showSearch = true,
+      searchPlaceholder = "Search...",
+      onSearchChange,
+      loading = false,
+      emptyText = "No results",
+      style,
+      className,
+      accessibilityLabel,
+      // Pulled out only to keep them off `rest` (which is spread onto the root View);
+      // the real values are read from `props` directly below to preserve discriminated typing.
+      multiple: _multiple,
+      value: _value,
+      defaultValue: _defaultValue,
+      onValueChange: _onValueChange,
+      ...rest
+    } = props;
+
+    const multiple = props.multiple === true;
+    const valueProp = props.value;
+    const rootRef = useRef<ComponentRef<typeof View>>(null);
+    const triggerRef = useRef<ComponentRef<typeof Pressable>>(null);
+    const searchInputRef = useRef<ComponentRef<typeof TextInput>>(null);
+    const setRootRef = useMemo(() => mergeRefs(rootRef, forwardedRef), [forwardedRef]);
+    const isOpenControlled = typeof openProp === "boolean";
+    const isValueControlled = valueProp !== undefined;
+
+    const [uncontrolledSingle, setUncontrolledSingle] = useState(
+      !multiple ? ((props as SelectSingleProps).defaultValue ?? "") : "",
+    );
+    const [uncontrolledMultiple, setUncontrolledMultiple] = useState<string[]>(
+      multiple ? ((props as SelectMultipleProps).defaultValue ?? []) : [],
+    );
+    const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+    const [searchQuery, setSearchQuery] = useState("");
+    const [hoveredValue, setHoveredValue] = useState<string | null>(null);
+
+    const selectedValues = useMemo(() => {
+      const current = isValueControlled
+        ? valueProp
+        : multiple
+          ? uncontrolledMultiple
+          : uncontrolledSingle;
+      return toArray(current);
+    }, [isValueControlled, multiple, valueProp, uncontrolledMultiple, uncontrolledSingle]);
+
+    const isOpen = isOpenControlled ? openProp : uncontrolledOpen;
+
+    // Mapped from selectedValues (not filtered from options) to preserve selection order.
+    const selectedOptions = useMemo(
+      () =>
+        selectedValues
+          .map((value) => options.find((option) => option.value === value))
+          .filter((option): option is SelectOption => option != null),
+      [options, selectedValues],
+    );
+    const hasValue = selectedOptions.length > 0;
+
+    const isExternalSearch = onSearchChange != null;
+
+    const filteredOptions = useMemo(() => {
+      if (isExternalSearch) return options;
+      const query = searchQuery.trim().toLowerCase();
+      if (!query) return options;
+      return options.filter((option) => option.label.toLowerCase().includes(query));
+    }, [isExternalSearch, options, searchQuery]);
+
+    useApplyWebClassName(rootRef, className);
+
+    const setOpen = useCallback(
+      (next: boolean) => {
+        if (!isOpenControlled) setUncontrolledOpen(next);
+        onOpenChange?.(next);
+        if (next) {
+          // Seed keyboard highlight from the current selection so Arrow keys
+          // start from a sensible position.
+          setHoveredValue(selectedValues[0] ?? null);
+        } else {
+          setSearchQuery("");
+          setHoveredValue(null);
+          // Let the parent reset its externally fetched options.
+          onSearchChange?.("");
+        }
+      },
+      [isOpenControlled, onOpenChange, onSearchChange, selectedValues],
+    );
+
+    const handleSearchChange = (text: string) => {
+      setSearchQuery(text);
+      onSearchChange?.(text);
+    };
+
+    // Close on outside click (web only; native has no document-level events).
+    useEffect(() => {
+      if (Platform.OS !== "web" || !isOpen) return;
+
+      const handlePointerDown = (event: MouseEvent | TouchEvent) => {
+        const root = rootRef.current as unknown as { contains?: (node: Node) => boolean } | null;
+        const target = event.target;
+        if (root?.contains && target instanceof Node && !root.contains(target)) {
+          setOpen(false);
+        }
+      };
+
+      document.addEventListener("mousedown", handlePointerDown);
+      document.addEventListener("touchstart", handlePointerDown);
+      return () => {
+        document.removeEventListener("mousedown", handlePointerDown);
+        document.removeEventListener("touchstart", handlePointerDown);
+      };
+    }, [isOpen, setOpen]);
+
+    const commitValues = useCallback(
+      (nextValues: string[]) => {
+        if (multiple) {
+          if (!isValueControlled) setUncontrolledMultiple(nextValues);
+          (props as SelectMultipleProps).onValueChange?.(nextValues);
+          return;
+        }
+
+        const nextValue = nextValues[0] ?? "";
+        if (!isValueControlled) setUncontrolledSingle(nextValue);
+        (props as SelectSingleProps).onValueChange?.(nextValue);
+      },
+      [isValueControlled, multiple, props],
+    );
+
+    const handleTriggerPress = () => {
+      if (disabled) return;
+      setOpen(!isOpen);
+    };
+
+    const handleSelect = useCallback(
+      (optionValue: string) => {
+        if (disabled) return;
+        if (multiple) {
+          const exists = selectedValues.includes(optionValue);
+          const nextValues = exists
+            ? selectedValues.filter((value) => value !== optionValue)
+            : [...selectedValues, optionValue];
+          commitValues(nextValues);
+          return;
+        }
+
+        commitValues([optionValue]);
+        setOpen(false);
+      },
+      [commitValues, disabled, multiple, selectedValues, setOpen],
+    );
+
+    const handleRemoveChip = (optionValue: string) => {
+      if (disabled || !multiple) return;
+      commitValues(selectedValues.filter((value) => value !== optionValue));
+    };
+
+    const focusTrigger = useCallback(() => {
+      const node = triggerRef.current as unknown as { focus?: () => void } | null;
+      node?.focus?.();
+    }, []);
+
+    const closeAndFocusTrigger = useCallback(() => {
+      setOpen(false);
+      focusTrigger();
+    }, [focusTrigger, setOpen]);
+
+    // ARIA combobox keyboard pattern (web only): Arrow keys move the highlighted
+    // option, Enter/Space selects it, Escape closes and returns focus to the trigger.
+    useEffect(() => {
+      if (Platform.OS !== "web") return;
+
+      const isTriggerFocused = () => document.activeElement === triggerRef.current;
+      const isSearchFocused = () => document.activeElement === searchInputRef.current;
+
+      const handleKeyDown = (event: KeyboardEvent) => {
+        if (!isOpen) {
+          if (!isTriggerFocused() || disabled) return;
+          if (event.key === "ArrowDown" || event.key === "ArrowUp" || event.key === "Enter") {
+            event.preventDefault();
+            setOpen(true);
+          }
+          return;
+        }
+
+        if (event.key === "Escape") {
+          event.preventDefault();
+          closeAndFocusTrigger();
+          return;
+        }
+
+        if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+          event.preventDefault();
+          setHoveredValue((current) => {
+            if (filteredOptions.length === 0) return current;
+            const currentIndex = filteredOptions.findIndex((option) => option.value === current);
+            const delta = event.key === "ArrowDown" ? 1 : -1;
+            const nextIndex =
+              currentIndex === -1
+                ? delta === 1
+                  ? 0
+                  : filteredOptions.length - 1
+                : Math.min(Math.max(currentIndex + delta, 0), filteredOptions.length - 1);
+            return filteredOptions[nextIndex]?.value ?? current;
+          });
+          return;
+        }
+
+        // Home/End and Space are left alone while typing in the search field
+        // (text-cursor navigation and literal spaces must keep working).
+        if (
+          isSearchFocused() &&
+          (event.key === "Home" || event.key === "End" || event.key === " ")
+        ) {
+          return;
+        }
+
+        if (event.key === "Home" || event.key === "End") {
+          if (filteredOptions.length === 0) return;
+          event.preventDefault();
+          setHoveredValue(
+            event.key === "Home"
+              ? filteredOptions[0].value
+              : filteredOptions[filteredOptions.length - 1].value,
+          );
+          return;
+        }
+
+        if (event.key === "Enter" || event.key === " ") {
+          if (hoveredValue == null) return;
+          event.preventDefault();
+          handleSelect(hoveredValue);
+          if (!multiple) focusTrigger();
+        }
+      };
+
+      document.addEventListener("keydown", handleKeyDown);
+      return () => document.removeEventListener("keydown", handleKeyDown);
+    }, [
+      isOpen,
+      disabled,
+      filteredOptions,
+      hoveredValue,
+      multiple,
+      closeAndFocusTrigger,
+      focusTrigger,
+      handleSelect,
+      setOpen,
+    ]);
+
+    const leftIconNode = leftIcon ?? (
+      <UserIcon
+        size={ICON_SIZE}
+        color={error ? colors.red : isOpen ? colors.primary : colors.grey100}
+      />
+    );
+    const hasLeftIcon = showLeftIcon || leftIcon != null;
+
+    const triggerBorderColor = error
+      ? colors.redMuted
+      : isOpen
+        ? colors.primaryMuted
+        : colors.grey700;
+    const triggerTextColor = hasValue
+      ? error
+        ? colors.red
+        : colors.white
+      : error
+        ? colors.red
+        : colors.grey100;
+    const labelColor = error ? colors.red : colors.white;
+    const hintColor = error ? colors.red : colors.grey100;
+
+    const singleLabel = selectedOptions[0]?.label ?? placeholder;
+    const resolvedAccessibilityLabel =
+      accessibilityLabel ?? (typeof label === "string" ? label : undefined);
+
+    return (
+      <View
+        {...rest}
+        ref={setRootRef}
+        style={[styles.root, isOpen && styles.rootOpen, disabled && styles.disabled, style]}
+        accessibilityState={{ disabled, expanded: isOpen }}
+      >
+        {showLabel && label ? (
+          <Text style={[styles.label, { color: labelColor }]}>{label}</Text>
+        ) : null}
+
+        <View style={[styles.triggerWrap, isOpen && styles.triggerWrapOpen]}>
+          <Pressable
+            ref={triggerRef}
+            onPress={handleTriggerPress}
+            disabled={disabled}
+            accessibilityRole="combobox"
+            accessibilityLabel={resolvedAccessibilityLabel}
+            accessibilityState={{ disabled, expanded: isOpen }}
+            style={[
+              styles.trigger,
+              {
+                borderColor: triggerBorderColor,
+                backgroundColor: colors.grey700,
+              },
+            ]}
+          >
+            {hasLeftIcon ? <View style={styles.iconSlot}>{leftIconNode}</View> : null}
+
+            <View style={styles.triggerContent}>
+              {multiple && hasValue ? (
+                <MultiValueChips
+                  options={selectedOptions}
+                  disabled={disabled}
+                  onRemove={handleRemoveChip}
+                />
+              ) : (
+                <Text style={[styles.triggerText, { color: triggerTextColor }]} numberOfLines={1}>
+                  {multiple ? placeholder : singleLabel}
+                </Text>
+              )}
+            </View>
+
+            <View style={[styles.iconSlot, isOpen && styles.chevronOpen]}>
+              <ChevronDownIcon size={ICON_SIZE} color={isOpen ? colors.primary : colors.grey100} />
+            </View>
+          </Pressable>
+
+          {isOpen ? (
+            <View style={styles.menu}>
+              {showSearch ? (
+                <View style={styles.searchField}>
+                  <View style={styles.iconSlot}>
+                    <SearchIcon size={ICON_SIZE} color={colors.grey100} />
+                  </View>
+                  <TextInput
+                    ref={searchInputRef}
+                    value={searchQuery}
+                    onChangeText={handleSearchChange}
+                    editable={!disabled}
+                    placeholder={searchPlaceholder}
+                    placeholderTextColor={colors.grey100}
+                    style={[
+                      styles.searchInput,
+                      Platform.OS === "web" ? styles.searchInputWeb : null,
+                      Platform.OS === "android" ? styles.searchInputAndroid : null,
+                    ]}
+                    accessibilityLabel={searchPlaceholder}
+                  />
+                </View>
+              ) : null}
+
+              <ScrollView
+                style={styles.optionList}
+                contentContainerStyle={styles.optionListContent}
+                keyboardShouldPersistTaps="handled"
+                showsVerticalScrollIndicator={false}
+              >
+                {loading ? (
+                  <View style={styles.statusRow}>
+                    <Text style={styles.statusText}>Loading...</Text>
+                  </View>
+                ) : filteredOptions.length === 0 ? (
+                  <View style={styles.statusRow}>
+                    <Text style={styles.statusText}>{emptyText}</Text>
+                  </View>
+                ) : null}
+
+                {!loading &&
+                  filteredOptions.map((option) => {
+                    const isSelected = selectedValues.includes(option.value);
+                    const isHovered = hoveredValue === option.value;
+                    const visualState: ItemVisualState = isSelected
+                      ? "selected"
+                      : isHovered
+                        ? "hover"
+                        : "default";
+
+                    return (
+                      <Pressable
+                        key={option.value}
+                        onPress={() => handleSelect(option.value)}
+                        disabled={disabled}
+                        onHoverIn={() => setHoveredValue(option.value)}
+                        onHoverOut={() =>
+                          setHoveredValue((current) => (current === option.value ? null : current))
+                        }
+                        onPressIn={() => setHoveredValue(option.value)}
+                        onPressOut={() =>
+                          setHoveredValue((current) => (current === option.value ? null : current))
+                        }
+                        accessibilityRole={multiple ? "checkbox" : "button"}
+                        accessibilityState={{ selected: isSelected, checked: isSelected, disabled }}
+                        style={[
+                          styles.item,
+                          {
+                            backgroundColor: itemBackground(visualState),
+                          },
+                        ]}
+                      >
+                        {multiple ? (
+                          <View pointerEvents="none" style={styles.itemCheckbox}>
+                            <Checkbox value={isSelected} variant="light" />
+                          </View>
+                        ) : null}
+                        <Text style={styles.itemLabel} numberOfLines={1}>
+                          {option.label}
+                        </Text>
+                      </Pressable>
+                    );
+                  })}
+              </ScrollView>
+            </View>
+          ) : null}
+        </View>
+
+        {showHint && hint ? <Text style={[styles.hint, { color: hintColor }]}>{hint}</Text> : null}
+      </View>
+    );
+  },
+);
+
+const styles = StyleSheet.create({
+  root: {
+    width: DEFAULT_WIDTH,
+    gap: 8,
+    alignSelf: "flex-start",
+  },
+  rootOpen: {
+    zIndex: 30,
+  },
+  disabled: {
+    opacity: 0.6,
+  },
+  label: {
+    ...selectTypography.label,
+  },
+  triggerWrap: {
+    position: "relative",
+    zIndex: 1,
+  },
+  triggerWrapOpen: {
+    zIndex: 20,
+  },
+  trigger: {
+    height: TRIGGER_HEIGHT,
+    borderRadius: TRIGGER_RADIUS,
+    borderWidth: 1,
+    paddingVertical: 12,
+    paddingHorizontal: 16,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 10,
+    overflow: "hidden",
+  },
+  triggerContent: {
+    flex: 1,
+    justifyContent: "center",
+    minWidth: 0,
+    overflow: "hidden",
+  },
+  triggerText: {
+    ...selectTypography.field,
+  },
+  multiValueRoot: {
+    width: "100%",
+    position: "relative",
+  },
+  measureRow: {
+    position: "absolute",
+    left: 0,
+    top: 0,
+    flexDirection: "row",
+    opacity: 0,
+    zIndex: -1,
+  },
+  chipsRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: CHIP_GAP,
+    overflow: "hidden",
+  },
+  chip: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 4,
+    paddingVertical: 2,
+    paddingHorizontal: 8,
+    borderRadius: 999,
+    backgroundColor: colors.grey600,
+    flexShrink: 0,
+  },
+  chipLabel: {
+    ...selectTypography.hint,
+    color: colors.white,
+    maxWidth: 120,
+  },
+  chipRemove: {
+    color: colors.grey100,
+    fontSize: 14,
+    lineHeight: 14,
+  },
+  ellipsis: {
+    flexShrink: 0,
+    paddingHorizontal: 2,
+  },
+  ellipsisText: {
+    ...selectTypography.field,
+    color: colors.white,
+    lineHeight: 16,
+  },
+  iconSlot: {
+    width: ICON_SIZE,
+    height: ICON_SIZE,
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0,
+  },
+  chevronOpen: {
+    transform: [{ rotate: "180deg" }],
+  },
+  menu: {
+    position: "absolute",
+    top: "100%",
+    left: 0,
+    right: 0,
+    marginTop: 8,
+    zIndex: 10,
+    borderRadius: MENU_RADIUS,
+    padding: 12,
+    gap: 8,
+    backgroundColor: colors.grey700,
+    ...Platform.select({
+      web: {
+        boxShadow: `0 8px 24px ${colors.black}73`,
+      },
+      default: {
+        elevation: 8,
+      },
+    }),
+  },
+  optionList: {
+    maxHeight: MENU_MAX_LIST_HEIGHT,
+  },
+  optionListContent: {
+    gap: 8,
+  },
+  statusRow: {
+    minHeight: 43,
+    padding: 12,
+    justifyContent: "center",
+  },
+  statusText: {
+    ...selectTypography.field,
+    color: colors.grey100,
+  },
+  searchField: {
+    height: 40,
+    borderRadius: ITEM_RADIUS,
+    paddingHorizontal: 12,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    backgroundColor: colors.grey800,
+  },
+  searchInput: {
+    ...selectTypography.field,
+    flex: 1,
+    color: colors.white,
+    paddingVertical: 0,
+    margin: 0,
+  },
+  searchInputWeb: {
+    outlineStyle: "none",
+  } as TextStyle,
+  searchInputAndroid: {
+    includeFontPadding: false,
+  },
+  item: {
+    minHeight: 43,
+    borderRadius: ITEM_RADIUS,
+    padding: 12,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+  },
+  itemCheckbox: {
+    flexShrink: 0,
+  },
+  itemLabel: {
+    ...selectTypography.field,
+    color: colors.white,
+    flex: 1,
+  },
+  hint: {
+    ...selectTypography.hint,
+  },
+});