@fangxinyan/lumina 0.6.18 → 0.8.0

package/dist/chunk-DU2DSERH.js

@@ -0,0 +1,190 @@
+import { cloneLuminaThemePreset } from './chunk-TSL3F2K3.js';
+import { normalizeComponentThemeInput, useComponentThemeRootRef, ComponentThemeBoundary } from './chunk-DRDDQCDD.js';
+import { useThemeOptional, mergeComponentThemeOverrides, ComponentOverridesProvider, ThemeProvider } from './chunk-ULTDRMGN.js';
+import './tokens-CEJVVA3G.css';
+import './shared-NJHRNLRH.css';
+import './Surface-CTN775GD.css';
+import * as React from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+function createSurfaceThemePreset(key) {
+  const preset = cloneLuminaThemePreset(key);
+  delete preset.density;
+  delete preset.font;
+  delete preset.label;
+  delete preset.description;
+  return preset;
+}
+var SURFACE_THEME_PRESETS = {
+  mist: createSurfaceThemePreset("light"),
+  porcelain: createSurfaceThemePreset("porcelain"),
+  graphite: createSurfaceThemePreset("graphite"),
+  ember: createSurfaceThemePreset("ember")
+};
+var surfacePresetMap = SURFACE_THEME_PRESETS;
+var isDefined = (value) => value !== void 0;
+var Surface = React.forwardRef(
+  ({
+    preset = "inherit",
+    tone = "base",
+    variant = "plain",
+    padding = "md",
+    radius = "lg",
+    height = "content",
+    bordered,
+    scrollable,
+    mode,
+    colorScheme,
+    accent,
+    baseColor,
+    density,
+    intensity,
+    themeRadius,
+    font,
+    tokens,
+    colors,
+    components,
+    theme,
+    themes,
+    className = "",
+    children,
+    style,
+    ...rest
+  }, ref) => {
+    const inherited = useThemeOptional();
+    const normalizedTheme = normalizeComponentThemeInput(theme);
+    const presetConfig = preset === "inherit" ? void 0 : surfacePresetMap[preset];
+    const effectiveSurfaceMode = mode ?? colorScheme ?? normalizedTheme?.colorScheme ?? presetConfig?.base ?? inherited?.mode ?? "light";
+    const [systemDark, setSystemDark] = React.useState(
+      () => typeof window !== "undefined" && window.matchMedia("(prefers-color-scheme: dark)").matches
+    );
+    React.useEffect(() => {
+      if (effectiveSurfaceMode !== "system" || typeof window === "undefined") return;
+      const media = window.matchMedia("(prefers-color-scheme: dark)");
+      setSystemDark(media.matches);
+      const handleChange = (event) => setSystemDark(event.matches);
+      media.addEventListener?.("change", handleChange);
+      return () => media.removeEventListener?.("change", handleChange);
+    }, [effectiveSurfaceMode]);
+    const registeredModePreset = effectiveSurfaceMode != null && effectiveSurfaceMode !== "light" && effectiveSurfaceMode !== "dark" && effectiveSurfaceMode !== "system" ? themes?.[effectiveSurfaceMode] ?? inherited?.themes[effectiveSurfaceMode] : void 0;
+    const localComponents = mergeComponentThemeOverrides(
+      normalizedTheme?.components,
+      components
+    );
+    const hasLocalComponentPalette = normalizedTheme != null && [
+      normalizedTheme.baseColor,
+      normalizedTheme.colorScheme,
+      normalizedTheme.accent,
+      normalizedTheme.intensity,
+      normalizedTheme.colors,
+      normalizedTheme.tokens
+    ].some(isDefined);
+    const usesLocalTheme = preset !== "inherit" || isDefined(mode) || isDefined(colorScheme) || isDefined(accent) || isDefined(baseColor) || isDefined(density) || isDefined(intensity) || isDefined(themeRadius) || isDefined(font) || isDefined(tokens) || isDefined(colors) || hasLocalComponentPalette || isDefined(themes);
+    const modeBaseColorScheme = effectiveSurfaceMode === "light" || effectiveSurfaceMode === "dark" ? effectiveSurfaceMode : effectiveSurfaceMode === "system" ? systemDark ? "dark" : "light" : void 0;
+    const localSurfaceColorScheme = modeBaseColorScheme ?? colorScheme ?? normalizedTheme?.colorScheme ?? presetConfig?.base ?? registeredModePreset?.base;
+    const hasLocalSurfacePalette = presetConfig != null || registeredModePreset != null || mode === "light" || mode === "dark" || [
+      colorScheme,
+      accent,
+      baseColor,
+      intensity,
+      tokens,
+      colors
+    ].some(isDefined) || hasLocalComponentPalette;
+    const localSurfaceTheme = hasLocalSurfacePalette ? {
+      colorScheme: localSurfaceColorScheme,
+      baseColor: baseColor ?? normalizedTheme?.baseColor ?? presetConfig?.baseColor ?? registeredModePreset?.baseColor,
+      accent: accent ?? normalizedTheme?.accent ?? presetConfig?.accent ?? registeredModePreset?.accent,
+      intensity: intensity ?? normalizedTheme?.intensity ?? presetConfig?.intensity ?? registeredModePreset?.intensity,
+      tokens: {
+        ...registeredModePreset?.tokens ?? {},
+        ...presetConfig?.tokens ?? {},
+        ...normalizedTheme?.tokens ?? {},
+        ...tokens ?? {}
+      },
+      colors: {
+        ...registeredModePreset?.colors ?? {},
+        ...presetConfig?.colors ?? {},
+        ...normalizedTheme?.colors ?? {},
+        ...colors ?? {}
+      },
+      scope: "self"
+    } : void 0;
+    const [themeRootElement, themeRootRef] = useComponentThemeRootRef(
+      ref,
+      { component: "Surface", theme: localSurfaceTheme }
+    );
+    const cls = [
+      "surface",
+      `tone-${tone}`,
+      variant,
+      `pad-${padding}`,
+      `radius-${radius}`,
+      `height-${height}`,
+      bordered && "bordered",
+      scrollable && "scrollable",
+      className
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsx(
+      ComponentThemeBoundary,
+      {
+        component: "Surface",
+        cssPrefix: "surface",
+        theme: localSurfaceTheme,
+        rootElement: themeRootElement,
+        children: (themeState) => {
+          const surfaceNode = /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: themeRootRef,
+              className: cls,
+              "data-surface-preset": preset === "inherit" ? void 0 : preset,
+              "data-surface-tone": tone,
+              ...themeState.rootDataAttributes,
+              ...rest,
+              style: { ...themeState.rootStyle, ...style },
+              children
+            }
+          );
+          return /* @__PURE__ */ jsx(ComponentOverridesProvider, { value: localComponents, children: /* @__PURE__ */ jsx(
+            ThemeProvider,
+            {
+              enabled: usesLocalTheme,
+              target: "scope",
+              asChild: true,
+              mode: effectiveSurfaceMode,
+              colorScheme: localSurfaceColorScheme ?? inherited?.colorScheme ?? "light",
+              baseColor: baseColor ?? normalizedTheme?.baseColor ?? presetConfig?.baseColor,
+              accent: accent ?? normalizedTheme?.accent ?? presetConfig?.accent,
+              density: density ?? presetConfig?.density ?? registeredModePreset?.density ?? inherited?.density ?? "comfortable",
+              intensity: intensity ?? normalizedTheme?.intensity ?? presetConfig?.intensity ?? registeredModePreset?.intensity ?? inherited?.intensity ?? 5,
+              radius: themeRadius ?? presetConfig?.radius ?? registeredModePreset?.radius ?? inherited?.radius ?? 20,
+              font: font ?? presetConfig?.font ?? registeredModePreset?.font ?? inherited?.font ?? "sf",
+              tokens: {
+                ...presetConfig?.tokens ?? {},
+                ...normalizedTheme?.tokens ?? {},
+                ...tokens ?? {}
+              },
+              colors: {
+                ...presetConfig?.colors ?? {},
+                ...normalizedTheme?.colors ?? {},
+                ...colors ?? {}
+              },
+              components: mergeComponentThemeOverrides(
+                presetConfig?.components,
+                localComponents
+              ),
+              themes: {
+                ...inherited?.themes ?? {},
+                ...themes ?? {}
+              },
+              children: surfaceNode
+            }
+          ) });
+        }
+      }
+    );
+  }
+);
+Surface.displayName = "Surface";
+
+export { SURFACE_THEME_PRESETS, Surface };

package/dist/chunk-DURKCGEM.js

@@ -0,0 +1,496 @@
+import { Tag } from './chunk-62VV5COT.js';
+import { useFloating } from './chunk-3QXP2ZNP.js';
+import { Input } from './chunk-UE4HFGJ6.js';
+import { useOverlayLayer } from './chunk-2A4GYSN4.js';
+import { Icon, renderIconSlot } from './chunk-LQMOYVQF.js';
+import { withComponentTheme, useComponentPortalTheme, InternalComponentThemePart } from './chunk-DRDDQCDD.js';
+import { usePortalContainer } from './chunk-ULTDRMGN.js';
+import './tokens-CEJVVA3G.css';
+import './shared-NJHRNLRH.css';
+import './Select-TU37MAHZ.css';
+import * as React from 'react';
+import { createPortal } from 'react-dom';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+var isGroup = (it) => Array.isArray(it.options);
+var flatten = (items) => items.flatMap((it) => isGroup(it) ? it.options : [it]);
+var defaultFilter = (input, opt, optionFilterProp) => {
+  const q = input.toLowerCase();
+  const propValue = optionFilterProp ? opt[optionFilterProp] : void 0;
+  const txt = propValue != null ? String(propValue) : opt.text ?? (typeof opt.label === "string" ? opt.label : String(opt.value));
+  return txt.toLowerCase().includes(q);
+};
+var getOptionAriaLabel = (option) => {
+  if (option.ariaLabel) return option.ariaLabel;
+  if (typeof option.label === "string" || typeof option.label === "number") {
+    return void 0;
+  }
+  return option.text ?? String(option.value);
+};
+var SelectInner = (props, forwardedRef) => {
+  const {
+    options,
+    placeholder = "\u8BF7\u9009\u62E9\u2026",
+    disabled,
+    size = "md",
+    invalid,
+    clearable,
+    allowClear,
+    searchable,
+    showSearch,
+    filterOption,
+    optionFilterProp,
+    loading,
+    emptyContent,
+    optionRender,
+    selectedRender,
+    listHeight = 260,
+    popupStyle,
+    getOptionDisabled,
+    open: openProp,
+    defaultOpen,
+    onOpenChange,
+    className = "",
+    menuClassName = "",
+    popupClassName = "",
+    dropdownClassName = "",
+    onKeyDown: onRootKeyDown,
+    onBlur: onRootBlur,
+    tabIndex: triggerTabIndex,
+    id: fieldId,
+    "aria-invalid": ariaInvalid,
+    "aria-describedby": ariaDescribedBy,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-label": ariaLabel,
+    "aria-required": ariaRequired,
+    multiple,
+    value: _value,
+    defaultValue: _defaultValue,
+    onChange: _selectionChange,
+    onClear: _onClear,
+    maxTagCount,
+    maxCount,
+    ...rest
+  } = props;
+  const isMulti = multiple === true;
+  const mergedClearable = clearable ?? !!allowClear;
+  const mergedClearIcon = typeof allowClear === "object" ? allowClear.clearIcon : void 0;
+  const mergedSearchable = searchable ?? !!showSearch;
+  const mergedListHeight = Number.isFinite(listHeight) && listHeight > 0 ? listHeight : 260;
+  const mergedMenuClassName = [menuClassName, popupClassName, dropdownClassName].filter(Boolean).join(" ");
+  const [innerSingle, setInnerSingle] = React.useState(
+    !isMulti ? props.defaultValue : void 0
+  );
+  const [innerMulti, setInnerMulti] = React.useState(
+    isMulti && Array.isArray(props.defaultValue) ? props.defaultValue : []
+  );
+  const [innerOpen, setInnerOpen] = React.useState(defaultOpen ?? false);
+  const [query, setQuery] = React.useState("");
+  const [activeIdx, setActiveIdx] = React.useState(-1);
+  const searchRef = React.useRef(null);
+  const portalContainer = usePortalContainer();
+  const portalTheme = useComponentPortalTheme([
+    "Select",
+    "Pagination",
+    "Table",
+    "TablePro"
+  ]);
+  const themedPopupStyle = portalTheme.styles.popup;
+  const hasCustomPopupWidth = [themedPopupStyle, popupStyle].some(
+    (styleValue) => styleValue?.width != null || styleValue?.minWidth != null || styleValue?.maxWidth != null
+  );
+  const resolvedPopupWidth = popupStyle?.width ?? themedPopupStyle?.width;
+  const listboxId = React.useId();
+  const openControlled = openProp !== void 0;
+  const requestedOpen = openControlled ? openProp : innerOpen;
+  const open = !disabled && requestedOpen;
+  const setOpen = (v) => {
+    if (disabled && v) return;
+    if (!openControlled) setInnerOpen(v);
+    onOpenChange?.(v);
+    if (!v) setQuery("");
+  };
+  React.useEffect(() => {
+    if (!disabled || openControlled || !innerOpen) return;
+    setInnerOpen(false);
+    onOpenChange?.(false);
+  }, [disabled, innerOpen, onOpenChange, openControlled]);
+  const { triggerRef, floatingRef: menuRef, floatingStyle, zIndex: menuZIndex } = useFloating({
+    open,
+    placement: "bottom",
+    matchTriggerWidth: !hasCustomPopupWidth,
+    panelWidth: typeof resolvedPopupWidth === "number" ? resolvedPopupWidth : 360,
+    panelHeight: mergedListHeight + (mergedSearchable ? 58 : 12)
+  });
+  useOverlayLayer({
+    open: open && portalContainer != null,
+    containerRef: menuRef,
+    ownerRef: triggerRef,
+    zIndex: menuZIndex,
+    onEscape: () => setOpen(false),
+    restoreFocus: true
+  });
+  const setTriggerRef = React.useCallback(
+    (node) => {
+      triggerRef.current = node;
+      if (typeof forwardedRef === "function") forwardedRef(node);
+      else if (forwardedRef) forwardedRef.current = node;
+    },
+    [forwardedRef, triggerRef]
+  );
+  const singleControlled = !isMulti && props.value !== void 0;
+  const multiControlled = isMulti && props.value !== void 0;
+  const singleValue = singleControlled ? props.value : innerSingle;
+  const controlledMultiValue = props.value;
+  const multiValue = multiControlled ? Array.isArray(controlledMultiValue) ? controlledMultiValue : [] : innerMulti;
+  const selectedValues = React.useMemo(
+    () => isMulti ? multiValue : singleValue !== void 0 ? [singleValue] : [],
+    [isMulti, multiValue, singleValue]
+  );
+  const selectionLimit = maxCount !== void 0 && Number.isFinite(maxCount) ? Math.max(0, Math.floor(maxCount)) : void 0;
+  const isOptionDisabled = React.useCallback((option) => {
+    const selected = selectedValues.includes(option.value);
+    return !!option.disabled || !!getOptionDisabled?.(option, selectedValues) || isMulti && !selected && selectionLimit !== void 0 && selectedValues.length >= selectionLimit;
+  }, [getOptionDisabled, isMulti, selectedValues, selectionLimit]);
+  React.useEffect(() => {
+    if (!open) return;
+    const h = (e) => {
+      const t = e.target;
+      if (triggerRef.current?.contains(t)) return;
+      if (menuRef.current?.contains(t)) return;
+      setOpen(false);
+    };
+    document.addEventListener("mousedown", h);
+    return () => document.removeEventListener("mousedown", h);
+  }, [open]);
+  React.useEffect(() => {
+    if (open && mergedSearchable) {
+      requestAnimationFrame(() => searchRef.current?.focus());
+    }
+    if (!open) setActiveIdx(-1);
+  }, [open, mergedSearchable]);
+  const allFlat = React.useMemo(() => flatten(options), [options]);
+  const filteredFlat = React.useMemo(() => {
+    if (!query.trim()) return allFlat;
+    if (filterOption === false) return allFlat;
+    const f = typeof filterOption === "function" ? filterOption : (input, option) => defaultFilter(input, option, optionFilterProp);
+    return allFlat.filter((o) => f(query, o));
+  }, [allFlat, query, filterOption, optionFilterProp]);
+  const filteredItems = React.useMemo(() => {
+    if (!query.trim()) return options;
+    return options.map((it) => {
+      if (!isGroup(it)) {
+        return filteredFlat.includes(it) ? it : null;
+      }
+      const kept = it.options.filter((o) => filteredFlat.includes(o));
+      return kept.length ? { label: it.label, options: kept } : null;
+    }).filter((x) => x !== null);
+  }, [options, filteredFlat, query]);
+  React.useEffect(() => {
+    setActiveIdx((current) => {
+      if (current >= 0 && current < filteredFlat.length && !isOptionDisabled(filteredFlat[current])) {
+        return current;
+      }
+      return filteredFlat.findIndex((option) => !isOptionDisabled(option));
+    });
+  }, [filteredFlat, isOptionDisabled]);
+  const pickSingle = (opt) => {
+    if (disabled || isOptionDisabled(opt)) return;
+    if (!singleControlled) setInnerSingle(opt.value);
+    props.onChange?.(opt.value);
+    setOpen(false);
+  };
+  const toggleMulti = (opt) => {
+    if (disabled || isOptionDisabled(opt)) return;
+    const cur = multiValue ?? [];
+    const next = cur.includes(opt.value) ? cur.filter((v) => v !== opt.value) : [...cur, opt.value];
+    if (!multiControlled) setInnerMulti(next);
+    props.onChange?.(next);
+  };
+  const clearAll = () => {
+    if (disabled) return;
+    if (isMulti) {
+      if (!multiControlled) setInnerMulti([]);
+      props.onChange?.([]);
+      props.onClear?.();
+    } else {
+      if (!singleControlled) setInnerSingle(void 0);
+      props.onChange?.(void 0);
+      props.onClear?.();
+    }
+  };
+  const isSelected = (val) => isMulti ? (multiValue ?? []).includes(val) : singleValue === val;
+  const onKeyDown = (e) => {
+    if ((e.key === "Backspace" || e.key === "Delete") && showClear) {
+      e.preventDefault();
+      clearAll();
+      return;
+    }
+    if (!open) {
+      if (e.key === "Enter" || e.key === " " || e.key === "ArrowDown") {
+        e.preventDefault();
+        setOpen(true);
+      }
+      return;
+    }
+    if (e.key === "Escape") {
+      e.preventDefault();
+      setOpen(false);
+      return;
+    }
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      setActiveIdx((i) => {
+        for (let step = 1; step <= filteredFlat.length; step++) {
+          const next = (Math.max(i, -1) + step) % filteredFlat.length;
+          if (filteredFlat[next] && !isOptionDisabled(filteredFlat[next])) return next;
+        }
+        return i;
+      });
+      return;
+    }
+    if (e.key === "ArrowUp") {
+      e.preventDefault();
+      setActiveIdx((i) => {
+        for (let step = 1; step <= filteredFlat.length; step++) {
+          const next = (i - step + filteredFlat.length) % filteredFlat.length;
+          if (filteredFlat[next] && !isOptionDisabled(filteredFlat[next])) return next;
+        }
+        return i;
+      });
+      return;
+    }
+    if (e.key === "Enter") {
+      e.preventDefault();
+      const opt = filteredFlat[activeIdx];
+      if (opt && !isOptionDisabled(opt)) {
+        if (isMulti) toggleMulti(opt);
+        else pickSingle(opt);
+      }
+      return;
+    }
+  };
+  const renderTrigger = () => {
+    if (isMulti) {
+      const selected = (multiValue ?? []).map((v) => allFlat.find((o) => o.value === v)).filter((o) => !!o);
+      const max = maxTagCount;
+      const shown = max != null ? selected.slice(0, max) : selected;
+      const overflow = selected.length - shown.length;
+      if (selected.length === 0) {
+        return /* @__PURE__ */ jsx("span", { className: "placeholder", children: placeholder });
+      }
+      return /* @__PURE__ */ jsx(InternalComponentThemePart, { components: "Tag", children: /* @__PURE__ */ jsxs("span", { className: "select-tags", children: [
+        shown.map((o) => /* @__PURE__ */ jsx(
+          Tag,
+          {
+            tone: "accent",
+            removable: !disabled,
+            onRemove: () => {
+              const cur = multiValue ?? [];
+              const next = cur.filter((v) => v !== o.value);
+              if (!multiControlled) setInnerMulti(next);
+              props.onChange?.(next);
+            },
+            onClick: (e) => e.stopPropagation(),
+            children: selectedRender?.(o, { value: o.value, multiple: true }) ?? o.label
+          },
+          String(o.value)
+        )),
+        overflow > 0 && /* @__PURE__ */ jsxs(Tag, { tone: "neutral", children: [
+          "+",
+          overflow
+        ] })
+      ] }) });
+    }
+    const current = allFlat.find((o) => o.value === singleValue);
+    if (!current) return /* @__PURE__ */ jsx("span", { className: "placeholder", children: placeholder });
+    if (selectedRender) {
+      return /* @__PURE__ */ jsx("span", { className: "select-value select-value-custom", children: selectedRender(current, { value: current.value, multiple: false }) });
+    }
+    return /* @__PURE__ */ jsxs("span", { className: "select-value", children: [
+      renderIconSlot(current.icon, { size: 14, className: "select-icon" }),
+      /* @__PURE__ */ jsx("span", { className: "select-value-label", children: current.label })
+    ] });
+  };
+  const hasSelection = isMulti ? multiValue.length > 0 : singleValue != null;
+  const showClear = mergedClearable && hasSelection && !disabled;
+  let renderIdx = -1;
+  const renderOption = (o) => {
+    renderIdx += 1;
+    const idx = renderIdx;
+    const sel = isSelected(o.value);
+    const active = idx === activeIdx;
+    const optionDisabled = isOptionDisabled(o);
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        id: `${listboxId}-option-${idx}`,
+        type: "button",
+        role: "option",
+        "aria-selected": sel,
+        "aria-label": getOptionAriaLabel(o),
+        disabled: optionDisabled,
+        className: `menu-item ${sel ? "active" : ""} ${active ? "highlight" : ""}`,
+        onMouseEnter: () => {
+          if (!optionDisabled) setActiveIdx(idx);
+        },
+        onClick: () => isMulti ? toggleMulti(o) : pickSingle(o),
+        children: [
+          isMulti && /* @__PURE__ */ jsx("span", { className: `menu-check ${sel ? "on" : ""}`, "aria-hidden": true, children: sel && /* @__PURE__ */ jsx(Icon, { name: "check", size: 11, stroke: 3 }) }),
+          optionRender ? /* @__PURE__ */ jsx("span", { className: "menu-item-custom", children: optionRender(o, { index: idx, selected: sel, active }) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            renderIconSlot(o.icon, { size: 14, className: "menu-item-icon" }),
+            /* @__PURE__ */ jsxs("span", { className: "menu-item-body", children: [
+              /* @__PURE__ */ jsx("span", { className: "menu-item-label", children: o.label }),
+              o.description && /* @__PURE__ */ jsx("span", { className: "menu-item-desc", children: o.description })
+            ] })
+          ] }),
+          !isMulti && /* @__PURE__ */ jsx("span", { className: "tick", children: /* @__PURE__ */ jsx(Icon, { name: "check", size: 12, stroke: 3 }) })
+        ]
+      },
+      String(o.value)
+    );
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: setTriggerRef,
+      ...rest,
+      className: `select ${size} ${isMulti ? "multi" : ""} ${open ? "open" : ""} ${disabled ? "disabled" : ""} ${invalid ? "invalid" : ""} ${className}`,
+      onKeyDown: (e) => {
+        onRootKeyDown?.(e);
+        if (!e.defaultPrevented && e.target.classList.contains("select-trigger")) onKeyDown(e);
+      },
+      onBlur: (event) => {
+        onRootBlur?.(event);
+        if (!open) return;
+        const nextTarget = event.relatedTarget;
+        if (nextTarget) {
+          if (!triggerRef.current?.contains(nextTarget) && !menuRef.current?.contains(nextTarget)) {
+            setOpen(false);
+          }
+          return;
+        }
+        const ownerDocument = event.currentTarget.ownerDocument;
+        window.requestAnimationFrame(() => {
+          const activeElement = ownerDocument.activeElement;
+          if (!triggerRef.current?.contains(activeElement) && !menuRef.current?.contains(activeElement)) {
+            setOpen(false);
+          }
+        });
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "select-trigger",
+            onClick: () => !disabled && setOpen(!open),
+            tabIndex: disabled ? -1 : triggerTabIndex ?? 0,
+            id: fieldId,
+            role: "combobox",
+            "aria-disabled": disabled || void 0,
+            "aria-label": ariaLabel,
+            "aria-labelledby": ariaLabelledBy,
+            "aria-invalid": ariaInvalid,
+            "aria-required": ariaRequired,
+            "aria-describedby": ariaDescribedBy,
+            "aria-haspopup": "listbox",
+            "aria-expanded": open,
+            "aria-controls": open ? listboxId : void 0,
+            "aria-activedescendant": open && activeIdx >= 0 ? `${listboxId}-option-${activeIdx}` : void 0,
+            children: [
+              renderTrigger(),
+              /* @__PURE__ */ jsx(Icon, { name: "chevDown", size: 14, className: "select-caret" })
+            ]
+          }
+        ),
+        showClear && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "select-clear",
+            "aria-label": "Clear",
+            onPointerDown: (event) => event.stopPropagation(),
+            onMouseDown: (event) => event.stopPropagation(),
+            onClick: (event) => {
+              event.stopPropagation();
+              clearAll();
+            },
+            children: mergedClearIcon ?? /* @__PURE__ */ jsx(Icon, { name: "x", size: 12 })
+          }
+        ),
+        open && portalContainer && createPortal(
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              ref: menuRef,
+              id: listboxId,
+              className: `menu ${mergedMenuClassName}`,
+              role: "listbox",
+              "aria-multiselectable": isMulti || void 0,
+              ...portalTheme.dataAttributes,
+              style: {
+                ...floatingStyle,
+                ...portalTheme.style,
+                ...portalTheme.styles.popup,
+                ...popupStyle
+              },
+              children: [
+                mergedSearchable && /* @__PURE__ */ jsx("div", { className: "menu-search", children: /* @__PURE__ */ jsx(InternalComponentThemePart, { components: "Input", children: /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    ref: searchRef,
+                    size: "sm",
+                    leadingIcon: "search",
+                    value: query,
+                    placeholder: "\u641C\u7D22...",
+                    role: "combobox",
+                    "aria-autocomplete": "list",
+                    "aria-expanded": open,
+                    "aria-controls": listboxId,
+                    "aria-activedescendant": activeIdx >= 0 ? `${listboxId}-option-${activeIdx}` : void 0,
+                    onValueChange: setQuery,
+                    onKeyDown: (e) => {
+                      if (e.key === "Escape" || e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "Enter") {
+                        e.preventDefault();
+                        onKeyDown(e);
+                      }
+                    }
+                  }
+                ) }) }),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "menu-options",
+                    style: { maxHeight: mergedListHeight },
+                    children: loading ? /* @__PURE__ */ jsxs("div", { className: "menu-state", children: [
+                      /* @__PURE__ */ jsx("span", { className: "menu-state-ico", children: /* @__PURE__ */ jsx("span", { className: "spinner" }) }),
+                      /* @__PURE__ */ jsx("span", { children: "\u52A0\u8F7D\u4E2D..." })
+                    ] }) : filteredItems.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "menu-state", children: [
+                      /* @__PURE__ */ jsx("span", { className: "menu-state-ico", children: /* @__PURE__ */ jsx(Icon, { name: "search", size: 16 }) }),
+                      /* @__PURE__ */ jsx("span", { children: emptyContent ?? "\u6682\u65E0\u5339\u914D\u9879" })
+                    ] }) : filteredItems.map(
+                      (it, gi) => isGroup(it) ? /* @__PURE__ */ jsxs(React.Fragment, { children: [
+                        /* @__PURE__ */ jsx("div", { className: "menu-group-label", children: it.label }),
+                        it.options.map(renderOption)
+                      ] }, `g-${gi}`) : renderOption(it)
+                    )
+                  }
+                )
+              ]
+            }
+          ),
+          portalContainer
+        )
+      ]
+    }
+  );
+};
+var SelectBase = React.forwardRef(SelectInner);
+SelectBase.displayName = "Select";
+var Select = withComponentTheme(
+  SelectBase,
+  "Select",
+  ["select", "input", "tag"]
+);
+
+export { Select };