@hanwenbo/x-taro-ui 0.0.1

package/lib/components/select/select.js

@@ -0,0 +1,769 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/select/select.tsx
+var select_exports = {};
+__export(select_exports, {
+  Select: () => Select,
+  default: () => select_default
+});
+module.exports = __toCommonJS(select_exports);
+var import_react = __toESM(require("react"));
+var import_components = require("@tarojs/components");
+var import_miniapp = require("../../adapters/miniapp");
+var import_theme = require("../../theme");
+var import_utils = require("../../utils");
+var import_iconSlot = require("../../utils/iconSlot");
+var import_locale = require("../../utils/locale");
+var import_configProvider = require("../configProvider");
+var import_icon = require("../icon");
+var import_tokens = require("./tokens");
+var normalizeOptionValue = (value) => value && typeof value === "object" && "value" in value ? value.value : value;
+var areValuesEqual = (left, right) => String(normalizeOptionValue(left)) === String(normalizeOptionValue(right));
+var isPrimitiveNode = (node) => typeof node === "string" || typeof node === "number";
+var Select = (props) => {
+  var _a;
+  const hasValueProp = Object.prototype.hasOwnProperty.call(props, "value");
+  const config = (0, import_configProvider.useConfigProvider)();
+  const {
+    value,
+    defaultValue,
+    options = [],
+    placeholder = "请选择",
+    size: sizeProp,
+    variant = "default",
+    disabled: disabledProp,
+    error = false,
+    allowClear,
+    multiple = false,
+    mode,
+    autoClear,
+    showSearch,
+    autoClearSearchValue = true,
+    tagWrap = false,
+    onFocus,
+    loading = false,
+    searchable = false,
+    searchPlaceholder: searchPlaceholderProp,
+    searchValue,
+    onSearch,
+    filterOption = true,
+    emptySearchText: emptySearchTextProp,
+    maxTagCount = Infinity,
+    onChange,
+    onClear,
+    onOpenChange,
+    className,
+    style,
+    testID = "select",
+    ariaLabel
+  } = props;
+  const size = sizeProp ?? config.size;
+  const disabled = Boolean(disabledProp || config.disabled);
+  const searchPlaceholder = searchPlaceholderProp ?? `${(0, import_locale.resolveLocaleText)(config.locale, "common.search", "搜索")}...`;
+  const emptySearchText = emptySearchTextProp ?? (0, import_locale.resolveLocaleText)(config.locale, "common.empty", "暂无数据");
+  const clearLabel = (0, import_locale.resolveLocaleText)(config.locale, "select.clear", "清除选择");
+  const isMultiple = mode ? mode !== "single" : multiple;
+  const isSearchable = showSearch ?? searchable;
+  const mergedAllowClear = allowClear ?? autoClear ?? false;
+  const allowClearConfig = mergedAllowClear && typeof mergedAllowClear === "object" ? mergedAllowClear : void 0;
+  const [internalValue, setInternalValue] = (0, import_react.useState)(defaultValue !== void 0 ? defaultValue : isMultiple ? [] : void 0);
+  const [open, setOpen] = (0, import_react.useState)(false);
+  const [internalSearch, setInternalSearch] = (0, import_react.useState)("");
+  const [dropdownPosition, setDropdownPosition] = (0, import_react.useState)(null);
+  const reactId = (0, import_react.useId)();
+  const triggerId = (0, import_react.useMemo)(() => `x-select-${reactId.replace(/[^a-zA-Z0-9_-]/g, "")}`, [reactId]);
+  const { colors, motion } = (0, import_theme.useTokens)();
+  const tokens = (0, import_tokens.useSelectTokens)(size);
+  const selectColors = (0, import_tokens.useSelectColors)(variant, disabled, error, open);
+  const dropdownTokens = (0, import_tokens.useDropdownTokens)(size);
+  const isControlled = hasValueProp;
+  const currentValue = isControlled ? value : internalValue;
+  const currentSearch = searchValue !== void 0 ? searchValue : internalSearch;
+  const selectedValues = (0, import_react.useMemo)(() => {
+    if (Array.isArray(currentValue)) {
+      return isMultiple ? currentValue : currentValue.slice(0, 1);
+    }
+    return currentValue !== void 0 && currentValue !== null ? [currentValue] : [];
+  }, [currentValue, isMultiple]);
+  const selectedOptions = (0, import_react.useMemo)(
+    () => options.filter((option) => selectedValues.some((item) => areValuesEqual(item, option.value))),
+    [options, selectedValues]
+  );
+  const visibleOptions = (0, import_react.useMemo)(() => {
+    if (!isSearchable || !currentSearch.trim() || filterOption === false) {
+      return options;
+    }
+    const keyword = currentSearch.trim();
+    const defaultFilter = (option) => {
+      const labelText = isPrimitiveNode(option.label) ? String(option.label) : "";
+      return labelText.toLowerCase().includes(keyword.toLowerCase());
+    };
+    return options.filter(
+      (option) => typeof filterOption === "function" ? filterOption(keyword, option) : defaultFilter(option)
+    );
+  }, [currentSearch, filterOption, isSearchable, options]);
+  const setDropdownOpen = (0, import_react.useCallback)(
+    (nextOpen) => {
+      setOpen(nextOpen);
+      onOpenChange == null ? void 0 : onOpenChange(nextOpen);
+    },
+    [onOpenChange]
+  );
+  const updateDropdownPosition = (0, import_react.useCallback)(async () => {
+    const rect = await (0, import_miniapp.measureNode)(`#${triggerId}`);
+    if (!rect || rect.width <= 0) {
+      setDropdownPosition(null);
+      return;
+    }
+    const viewport = (0, import_miniapp.getViewport)();
+    const belowSpace = Math.max(0, viewport.height - rect.bottom - dropdownTokens.offset - 8);
+    const aboveSpace = Math.max(0, rect.top - dropdownTokens.offset - 8);
+    const openAbove = belowSpace < 160 && aboveSpace > belowSpace;
+    setDropdownPosition({
+      top: openAbove ? void 0 : rect.bottom + dropdownTokens.offset,
+      bottom: openAbove ? viewport.height - rect.top + dropdownTokens.offset : void 0,
+      left: rect.left,
+      width: rect.width,
+      maxHeight: Math.max(
+        96,
+        Math.min(dropdownTokens.maxHeight, openAbove ? aboveSpace : belowSpace)
+      )
+    });
+  }, [dropdownTokens.maxHeight, dropdownTokens.offset, triggerId]);
+  const handleOpen = (0, import_react.useCallback)(
+    async (event) => {
+      if (disabled || loading || open) {
+        return;
+      }
+      await updateDropdownPosition();
+      setDropdownOpen(true);
+      onFocus == null ? void 0 : onFocus(event);
+    },
+    [disabled, loading, onFocus, open, setDropdownOpen, updateDropdownPosition]
+  );
+  const handleClose = (0, import_react.useCallback)(() => {
+    setDropdownOpen(false);
+  }, [setDropdownOpen]);
+  const resetSearchAfterSelect = (0, import_react.useCallback)(() => {
+    if (!autoClearSearchValue) {
+      return;
+    }
+    if (searchValue === void 0) {
+      setInternalSearch("");
+    }
+  }, [autoClearSearchValue, searchValue]);
+  const handleSelect = (0, import_react.useCallback)(
+    (option) => {
+      if (option.disabled || disabled || loading) return;
+      if (isMultiple) {
+        const currentArray = Array.isArray(currentValue) ? currentValue : [];
+        const isSelected = currentArray.some((item) => areValuesEqual(item, option.value));
+        const newValue = isSelected ? currentArray.filter((item) => !areValuesEqual(item, option.value)) : [...currentArray, option.value];
+        if (!isControlled) {
+          setInternalValue(newValue);
+        }
+        onChange == null ? void 0 : onChange(newValue);
+        resetSearchAfterSelect();
+      } else {
+        if (!isControlled) {
+          setInternalValue(option.value);
+        }
+        onChange == null ? void 0 : onChange(option.value);
+        resetSearchAfterSelect();
+        handleClose();
+      }
+    },
+    [
+      currentValue,
+      disabled,
+      handleClose,
+      isControlled,
+      isMultiple,
+      loading,
+      onChange,
+      resetSearchAfterSelect
+    ]
+  );
+  const handleRemoveValue = (0, import_react.useCallback)(
+    (optionValue) => {
+      if (disabled || loading || !isMultiple) return;
+      const currentArray = Array.isArray(currentValue) ? currentValue : [];
+      const newValue = currentArray.filter((item) => !areValuesEqual(item, optionValue));
+      if (!isControlled) {
+        setInternalValue(newValue);
+      }
+      onChange == null ? void 0 : onChange(newValue);
+    },
+    [currentValue, disabled, isControlled, isMultiple, loading, onChange]
+  );
+  const handleClear = (0, import_react.useCallback)(
+    (event) => {
+      var _a2;
+      (_a2 = event == null ? void 0 : event.stopPropagation) == null ? void 0 : _a2.call(event);
+      if (disabled || loading) return;
+      const nextValue = isMultiple ? [] : void 0;
+      if (!isControlled) {
+        setInternalValue(nextValue);
+      }
+      onChange == null ? void 0 : onChange(nextValue);
+      onClear == null ? void 0 : onClear();
+    },
+    [disabled, isControlled, isMultiple, loading, onChange, onClear]
+  );
+  const handleSearch = (0, import_react.useCallback)(
+    (event) => {
+      const nextValue = event.detail.value;
+      if (searchValue === void 0) {
+        setInternalSearch(nextValue);
+      }
+      onSearch == null ? void 0 : onSearch(nextValue);
+    },
+    [onSearch, searchValue]
+  );
+  const getOptionLabel = (0, import_react.useCallback)(
+    (optionValue) => {
+      var _a2;
+      return ((_a2 = options.find((option) => areValuesEqual(option.value, optionValue))) == null ? void 0 : _a2.label) ?? String(optionValue);
+    },
+    [options]
+  );
+  const hasSelection = selectedValues.length > 0;
+  const showClearButton = Boolean(mergedAllowClear) && hasSelection && !disabled && !loading;
+  const defaultCollapsedTagCount = showClearButton ? 1 : 2;
+  const resolvedMaxTagCount = isMultiple && !tagWrap && maxTagCount === Infinity ? defaultCollapsedTagCount : maxTagCount;
+  const visibleTagValues = selectedValues.slice(0, resolvedMaxTagCount);
+  const hiddenTagCount = selectedValues.length - visibleTagValues.length;
+  const borderWidth = variant === "outline" ? 2 : variant === "underlined" ? 2 : ["ghost", "filled", "borderless"].includes(variant) ? 0 : tokens.borderWidth;
+  const isUnderlined = variant === "underlined";
+  const containerStyle = {
+    boxSizing: "border-box",
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    width: "100%",
+    minWidth: 0,
+    minHeight: isMultiple && tagWrap ? tokens.multipleMinHeight : tokens.height,
+    height: isMultiple && tagWrap ? void 0 : tokens.height,
+    paddingLeft: isUnderlined ? 0 : tokens.paddingX,
+    paddingRight: isUnderlined ? 0 : tokens.paddingX,
+    paddingTop: tokens.paddingY,
+    paddingBottom: tokens.paddingY,
+    gap: tokens.gap,
+    backgroundColor: selectColors.background,
+    borderRadius: isUnderlined ? 0 : tokens.borderRadius,
+    borderTopWidth: isUnderlined ? 0 : borderWidth,
+    borderRightWidth: isUnderlined ? 0 : borderWidth,
+    borderBottomWidth: borderWidth,
+    borderLeftWidth: isUnderlined ? 0 : borderWidth,
+    borderStyle: "solid",
+    borderColor: selectColors.border,
+    boxShadow: open ? `0 0 0 1px ${colors.ring}` : "none",
+    opacity: disabled ? 0.5 : 1,
+    transition: `border-color ${motion.durationsMs.emphasis}ms ${motion.easing.standard}, box-shadow ${motion.durationsMs.emphasis}ms ${motion.easing.standard}, background-color ${motion.durationsMs.emphasis}ms ${motion.easing.standard}`,
+    ...style
+  };
+  const tagStyle = {
+    boxSizing: "border-box",
+    display: "inline-flex",
+    flexDirection: "row",
+    alignItems: "center",
+    flexShrink: 0,
+    maxWidth: "100%",
+    height: tokens.tagHeight,
+    paddingTop: tokens.tagPaddingY,
+    paddingRight: tokens.tagPaddingX,
+    paddingBottom: tokens.tagPaddingY,
+    paddingLeft: tokens.tagPaddingX,
+    gap: tokens.tagGap,
+    borderWidth: 1,
+    borderStyle: "solid",
+    borderColor: colors.border,
+    borderRadius: "var(--x-select-tag-radius)",
+    backgroundColor: colors.secondary,
+    color: colors["secondary-foreground"]
+  };
+  const summaryStyle = {
+    boxSizing: "border-box",
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0,
+    height: tokens.summaryHeight,
+    paddingLeft: tokens.summaryPaddingX,
+    paddingRight: tokens.summaryPaddingX,
+    borderWidth: 1,
+    borderStyle: "solid",
+    borderColor: colors.border,
+    borderRadius: "var(--x-select-tag-radius)",
+    backgroundColor: colors.muted
+  };
+  const panelMaxHeight = (dropdownPosition == null ? void 0 : dropdownPosition.maxHeight) ?? dropdownTokens.maxHeight;
+  const searchAreaHeight = isSearchable ? dropdownTokens.searchInputHeight + dropdownTokens.searchPadding * 2 + 1 : 0;
+  const listMaxHeight = Math.max(88, panelMaxHeight - searchAreaHeight);
+  const dropdownStyle = dropdownPosition ? {
+    position: "fixed",
+    top: dropdownPosition.top,
+    bottom: dropdownPosition.bottom,
+    left: dropdownPosition.left,
+    width: dropdownPosition.width
+  } : {
+    position: "absolute",
+    top: `calc(100% + ${dropdownTokens.offset}px)`,
+    left: 0,
+    right: 0,
+    width: "100%"
+  };
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_components.View,
+    {
+      className: `${config.prefixCls}-select-root`,
+      "data-slot": "select-root",
+      "data-testid": testID,
+      style: { position: "relative", width: "100%", minWidth: 0 }
+    },
+    /* @__PURE__ */ import_react.default.createElement(
+      import_components.View,
+      {
+        id: triggerId,
+        role: "combobox",
+        ariaLabel: ariaLabel ?? placeholder,
+        "data-slot": "select-trigger",
+        "data-size": size,
+        "data-variant": variant,
+        "data-open": open ? "true" : "false",
+        "data-disabled": disabled ? "true" : "false",
+        "data-loading": loading ? "true" : "false",
+        "data-multiple": isMultiple ? "true" : "false",
+        className: (0, import_utils.classNames)(
+          `${config.prefixCls}-select`,
+          `${config.prefixCls}-select--${size}`,
+          `${config.prefixCls}-select--${variant}`,
+          open && `${config.prefixCls}-select--open`,
+          disabled && `${config.prefixCls}-select--disabled`,
+          error && `${config.prefixCls}-select--error`,
+          className
+        ),
+        style: containerStyle,
+        onClick: (event) => {
+          if (open) {
+            handleClose();
+          } else {
+            void handleOpen(event);
+          }
+        }
+      },
+      /* @__PURE__ */ import_react.default.createElement(
+        import_components.View,
+        {
+          className: `${config.prefixCls}-select__selection`,
+          style: {
+            flex: 1,
+            minWidth: 0,
+            overflow: "hidden",
+            display: "flex",
+            flexDirection: "row",
+            flexWrap: isMultiple && tagWrap ? "wrap" : "nowrap",
+            alignItems: "center",
+            gap: tokens.tagGap
+          }
+        },
+        !hasSelection ? /* @__PURE__ */ import_react.default.createElement(
+          import_components.Text,
+          {
+            className: `${config.prefixCls}-select__placeholder`,
+            style: {
+              flex: 1,
+              minWidth: 0,
+              fontSize: tokens.fontSize,
+              lineHeight: `${tokens.lineHeight}px`,
+              color: selectColors.placeholder,
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              whiteSpace: "nowrap"
+            }
+          },
+          placeholder
+        ) : isMultiple ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, visibleTagValues.map((selectedValue, index) => /* @__PURE__ */ import_react.default.createElement(
+          import_components.View,
+          {
+            key: `${String(normalizeOptionValue(selectedValue))}-${index}`,
+            className: `${config.prefixCls}-select__tag`,
+            "data-slot": "select-tag",
+            style: tagStyle
+          },
+          /* @__PURE__ */ import_react.default.createElement(
+            import_components.Text,
+            {
+              style: {
+                minWidth: 0,
+                maxWidth: "100%",
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap",
+                fontSize: tokens.tagFontSize,
+                lineHeight: `${tokens.tagLineHeight}px`,
+                color: colors["secondary-foreground"]
+              }
+            },
+            getOptionLabel(selectedValue)
+          ),
+          /* @__PURE__ */ import_react.default.createElement(
+            import_components.View,
+            {
+              role: "button",
+              ariaLabel: `移除${String(getOptionLabel(selectedValue))}`,
+              "data-slot": "select-tag-remove",
+              style: (0, import_iconSlot.iconSlot)(tokens.clearIconSize, { flexShrink: 0 }),
+              onClick: (event) => {
+                var _a2;
+                (_a2 = event == null ? void 0 : event.stopPropagation) == null ? void 0 : _a2.call(event);
+                handleRemoveValue(selectedValue);
+              }
+            },
+            /* @__PURE__ */ import_react.default.createElement(
+              import_icon.Icon,
+              {
+                name: "X",
+                size: tokens.clearIconSize,
+                color: colors["muted-foreground"],
+                block: true
+              }
+            )
+          )
+        )), tagWrap && hiddenTagCount > 0 ? /* @__PURE__ */ import_react.default.createElement(
+          import_components.View,
+          {
+            className: `${config.prefixCls}-select__summary`,
+            "data-slot": "select-summary",
+            style: summaryStyle
+          },
+          /* @__PURE__ */ import_react.default.createElement(
+            import_components.Text,
+            {
+              style: {
+                fontSize: tokens.tagFontSize,
+                lineHeight: `${tokens.tagLineHeight}px`,
+                color: colors["muted-foreground"]
+              }
+            },
+            "+",
+            hiddenTagCount
+          )
+        ) : null) : /* @__PURE__ */ import_react.default.createElement(
+          import_components.Text,
+          {
+            className: `${config.prefixCls}-select__value`,
+            style: {
+              flex: 1,
+              minWidth: 0,
+              fontSize: tokens.fontSize,
+              lineHeight: `${tokens.lineHeight}px`,
+              color: selectColors.color,
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              whiteSpace: "nowrap"
+            }
+          },
+          ((_a = selectedOptions[0]) == null ? void 0 : _a.label) ?? getOptionLabel(selectedValues[0])
+        )
+      ),
+      /* @__PURE__ */ import_react.default.createElement(
+        import_components.View,
+        {
+          className: `${config.prefixCls}-select__suffix`,
+          style: {
+            display: "flex",
+            flexDirection: "row",
+            alignItems: "center",
+            gap: tokens.tagGap,
+            flexShrink: 0
+          }
+        },
+        !tagWrap && hiddenTagCount > 0 ? /* @__PURE__ */ import_react.default.createElement(
+          import_components.View,
+          {
+            className: `${config.prefixCls}-select__summary`,
+            "data-slot": "select-summary",
+            style: summaryStyle
+          },
+          /* @__PURE__ */ import_react.default.createElement(
+            import_components.Text,
+            {
+              style: {
+                fontSize: tokens.tagFontSize,
+                lineHeight: `${tokens.tagLineHeight}px`,
+                color: colors["muted-foreground"]
+              }
+            },
+            "+",
+            hiddenTagCount
+          )
+        ) : null,
+        showClearButton ? /* @__PURE__ */ import_react.default.createElement(
+          import_components.View,
+          {
+            className: `${config.prefixCls}-select__clear`,
+            "data-slot": "clear-button",
+            role: "button",
+            ariaLabel: clearLabel,
+            style: (0, import_iconSlot.iconSlot)(tokens.clearSize),
+            onClick: handleClear
+          },
+          (allowClearConfig == null ? void 0 : allowClearConfig.clearIcon) ?? /* @__PURE__ */ import_react.default.createElement(
+            import_icon.Icon,
+            {
+              name: "X",
+              size: tokens.clearIconSize,
+              color: colors["muted-foreground"],
+              block: true
+            }
+          )
+        ) : null,
+        /* @__PURE__ */ import_react.default.createElement(
+          import_components.View,
+          {
+            className: `${config.prefixCls}-select__arrow`,
+            "data-slot": "select-arrow",
+            style: {
+              ...(0, import_iconSlot.iconSlot)(tokens.iconSize),
+              transform: open ? "rotate(180deg)" : "rotate(0deg)",
+              transition: `transform ${motion.durationsMs.emphasis}ms ${motion.easing.standard}`
+            }
+          },
+          /* @__PURE__ */ import_react.default.createElement(
+            import_icon.Icon,
+            {
+              name: "ChevronDown",
+              size: tokens.iconSize,
+              color: colors["muted-foreground"],
+              block: true
+            }
+          )
+        )
+      )
+    ),
+    open ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
+      import_components.View,
+      {
+        className: `${config.prefixCls}-select__backdrop`,
+        "data-slot": "select-backdrop",
+        catchMove: true,
+        onClick: handleClose,
+        style: {
+          position: "fixed",
+          top: 0,
+          right: 0,
+          bottom: 0,
+          left: 0,
+          zIndex: 1099,
+          backgroundColor: "transparent"
+        }
+      }
+    ), /* @__PURE__ */ import_react.default.createElement(
+      import_components.View,
+      {
+        className: `${config.prefixCls}-select__dropdown`,
+        "data-slot": "select-dropdown",
+        role: "listbox",
+        style: {
+          ...dropdownStyle,
+          boxSizing: "border-box",
+          zIndex: 1100,
+          maxHeight: panelMaxHeight,
+          overflow: "hidden",
+          borderRadius: dropdownTokens.borderRadius,
+          borderWidth: 1,
+          borderStyle: "solid",
+          borderColor: colors.border,
+          backgroundColor: colors.popover,
+          boxShadow: "var(--x-shadow-lg)"
+        }
+      },
+      isSearchable ? /* @__PURE__ */ import_react.default.createElement(
+        import_components.View,
+        {
+          className: `${config.prefixCls}-select__search`,
+          "data-slot": "select-search",
+          style: {
+            position: "relative",
+            padding: dropdownTokens.searchPadding,
+            borderBottomWidth: 1,
+            borderBottomStyle: "solid",
+            borderBottomColor: colors.border,
+            backgroundColor: colors.popover
+          }
+        },
+        /* @__PURE__ */ import_react.default.createElement(
+          import_components.View,
+          {
+            style: {
+              ...(0, import_iconSlot.iconSlot)(tokens.iconSize),
+              position: "absolute",
+              left: dropdownTokens.searchPadding * 2,
+              top: "50%",
+              transform: "translateY(-50%)",
+              zIndex: 1,
+              pointerEvents: "none"
+            }
+          },
+          /* @__PURE__ */ import_react.default.createElement(
+            import_icon.Icon,
+            {
+              name: "Search",
+              size: dropdownTokens.iconSize,
+              color: colors["muted-foreground"],
+              block: true
+            }
+          )
+        ),
+        /* @__PURE__ */ import_react.default.createElement(
+          import_components.Input,
+          {
+            value: currentSearch,
+            placeholder: searchPlaceholder,
+            ariaLabel: searchPlaceholder,
+            onInput: handleSearch,
+            style: {
+              boxSizing: "border-box",
+              width: "100%",
+              minHeight: 0,
+              height: dropdownTokens.searchInputHeight,
+              paddingTop: dropdownTokens.paddingY,
+              paddingRight: dropdownTokens.paddingX,
+              paddingBottom: dropdownTokens.paddingY,
+              paddingLeft: dropdownTokens.searchInputPaddingLeft,
+              fontSize: tokens.fontSize,
+              lineHeight: `${tokens.lineHeight}px`,
+              color: colors.foreground,
+              borderRadius: "var(--x-select-search-radius)",
+              borderWidth: 1,
+              borderStyle: "solid",
+              borderColor: colors.input,
+              backgroundColor: colors.background
+            }
+          }
+        )
+      ) : null,
+      /* @__PURE__ */ import_react.default.createElement(import_components.ScrollView, { scrollY: true, style: { maxHeight: listMaxHeight } }, /* @__PURE__ */ import_react.default.createElement(import_components.View, { style: { padding: 0 } }, visibleOptions.map((option, index) => {
+        const isSelected = selectedValues.some(
+          (item) => areValuesEqual(item, option.value)
+        );
+        const optionForeground = option.disabled ? colors["muted-foreground"] : isSelected ? colors["accent-foreground"] : colors["popover-foreground"];
+        return /* @__PURE__ */ import_react.default.createElement(
+          import_components.View,
+          {
+            key: `${String(option.value)}-${index}`,
+            className: (0, import_utils.classNames)(
+              `${config.prefixCls}-select__option`,
+              isSelected && `${config.prefixCls}-select__option--selected`,
+              option.disabled && `${config.prefixCls}-select__option--disabled`
+            ),
+            "data-slot": "select-option",
+            "data-selected": isSelected ? "true" : "false",
+            "data-disabled": option.disabled ? "true" : "false",
+            role: "option",
+            ariaLabel: `${String(option.label)}${isSelected ? "，已选中" : ""}${option.disabled ? "，已禁用" : ""}`,
+            style: {
+              boxSizing: "border-box",
+              minHeight: dropdownTokens.optionMinHeight,
+              paddingTop: dropdownTokens.paddingY,
+              paddingRight: dropdownTokens.paddingX,
+              paddingBottom: dropdownTokens.paddingY,
+              paddingLeft: dropdownTokens.paddingX,
+              display: "flex",
+              flexDirection: "row",
+              alignItems: "center",
+              justifyContent: "space-between",
+              gap: 8,
+              borderRadius: dropdownTokens.optionRadius,
+              backgroundColor: isSelected ? colors.accent : "transparent",
+              opacity: option.disabled ? 0.5 : 1
+            },
+            onClick: () => handleSelect(option)
+          },
+          isPrimitiveNode(option.label) ? /* @__PURE__ */ import_react.default.createElement(
+            import_components.Text,
+            {
+              style: {
+                minWidth: 0,
+                fontSize: dropdownTokens.fontSize,
+                lineHeight: `${dropdownTokens.lineHeight}px`,
+                color: optionForeground,
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap"
+              }
+            },
+            option.label
+          ) : /* @__PURE__ */ import_react.default.createElement(import_components.View, { style: { minWidth: 0, color: optionForeground } }, option.label),
+          isSelected ? /* @__PURE__ */ import_react.default.createElement(import_components.View, { style: (0, import_iconSlot.iconSlot)(tokens.iconSize, { flexShrink: 0 }) }, /* @__PURE__ */ import_react.default.createElement(
+            import_icon.Icon,
+            {
+              name: "Check",
+              size: dropdownTokens.iconSize,
+              color: optionForeground,
+              block: true
+            }
+          )) : null
+        );
+      }), visibleOptions.length === 0 ? /* @__PURE__ */ import_react.default.createElement(
+        import_components.View,
+        {
+          className: `${config.prefixCls}-select__empty`,
+          "data-slot": "select-empty",
+          style: {
+            paddingTop: 28,
+            paddingRight: dropdownTokens.paddingX,
+            paddingBottom: 28,
+            paddingLeft: dropdownTokens.paddingX,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center"
+          }
+        },
+        /* @__PURE__ */ import_react.default.createElement(
+          import_components.Text,
+          {
+            style: {
+              fontSize: dropdownTokens.fontSize,
+              lineHeight: `${dropdownTokens.lineHeight}px`,
+              color: colors["muted-foreground"]
+            }
+          },
+          emptySearchText
+        )
+      ) : null))
+    )) : null
+  );
+};
+var select_default = Select;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Select
+});