import { jsx, jsxs, Fragment } from "react/jsx-runtime";
import * as React from "react";
import { X, ChevronDown } from "lucide-react";
import { cn } from "../../lib/utils.js";
import { nakedCellRowModeAlign, fieldWrapperStyles, EMPTY_DISPLAY, fieldDisplayTextClass } from "../Field/field-wrapper.js";
import { useResolvedFieldSize, useResolvedFieldDisabled, useResolvedFieldVariant, useResolvedFieldMode, useFieldContext, useResolvedFieldInvalid } from "../Field/field-context.js";
import { Tag } from "../Tag/tag.js";
import { ItemSuffix, ItemInlineAction, ICON_SIZE } from "../../patterns/element-anatomy/item-anatomy.js";
import { OverflowIndicator } from "../OverflowIndicator/overflow-indicator.js";
import { SelectMenu } from "../SelectMenu/select-menu.js";
import { useIsTouchDevice } from "../../hooks/use-is-touch-device.js";
const GAP = 4;
const tagPadding = {
  sm: "px-[calc((var(--field-height-sm)_-_1.25rem)_/_2)]",
  md: "px-[calc((var(--field-height-md)_-_1.5rem)_/_2)]",
  lg: "px-[calc((var(--field-height-lg)_-_1.5rem)_/_2)]"
};
function useOverflowCount(containerRef, tagEls, overflowEl, totalCount, enabled, gap = GAP, visibleCountOverride) {
  const [state, setState] = React.useState({ visibleCount: totalCount, ready: !enabled });
  const lastOverflowWRef = React.useRef(60);
  React.useEffect(() => {
    if (!enabled || totalCount === 0) {
      setState({ visibleCount: totalCount, ready: true });
      return;
    }
    if (visibleCountOverride !== void 0) {
      for (let i = 0; i < tagEls.current.length; i++) {
        const el = tagEls.current[i];
        if (el) el.hidden = i >= visibleCountOverride;
      }
      const ofEl = overflowEl.current;
      if (ofEl) ofEl.hidden = visibleCountOverride >= totalCount;
      setState({ visibleCount: visibleCountOverride, ready: true });
      return;
    }
    if (totalCount === 1) {
      for (let i = 0; i < tagEls.current.length; i++) {
        const el = tagEls.current[i];
        if (el) el.hidden = i >= 1;
      }
      const ofEl = overflowEl.current;
      if (ofEl) ofEl.hidden = true;
      setState({ visibleCount: 1, ready: true });
      return;
    }
    const container = containerRef.current;
    if (!container) return;
    const calc = () => {
      const cs = getComputedStyle(container);
      const available = container.clientWidth - (parseFloat(cs.paddingLeft) || 0) - (parseFloat(cs.paddingRight) || 0);
      container.style.setProperty("--combobox-tag-area-inline-size", `${available}px`);
      for (const el of tagEls.current) if (el) el.hidden = false;
      const ofEl = overflowEl.current;
      if (ofEl) ofEl.hidden = false;
      const measuredOverflowW = (ofEl == null ? void 0 : ofEl.offsetWidth) || 0;
      if (measuredOverflowW > 0) lastOverflowWRef.current = measuredOverflowW;
      const overflowW = lastOverflowWRef.current;
      let used = 0, count = 0;
      for (let i = 0; i < totalCount; i++) {
        const el = tagEls.current[i];
        if (!el) continue;
        const tagRoot = el.querySelector("[data-tag-root]");
        const w = tagRoot ? tagRoot.getBoundingClientRect().width : el.offsetWidth;
        const next = used + (count > 0 ? gap : 0) + w;
        const remaining = totalCount - count - 1;
        if (remaining > 0 && next + gap + overflowW > available) break;
        if (remaining === 0 && next > available) break;
        used = next;
        count++;
      }
      for (let i = 0; i < tagEls.current.length; i++) {
        const el = tagEls.current[i];
        if (el) el.hidden = i >= count;
      }
      if (ofEl) ofEl.hidden = count >= totalCount;
      const containerRect = container.getBoundingClientRect();
      while (count > 0) {
        const lastEl = tagEls.current[count - 1];
        const tagRoot = lastEl == null ? void 0 : lastEl.querySelector("[data-tag-root]");
        if (!tagRoot) break;
        const tagRect = tagRoot.getBoundingClientRect();
        if (tagRect.right <= containerRect.right + 0.5) break;
        count--;
        if (lastEl) lastEl.hidden = true;
      }
      if (ofEl) ofEl.hidden = count >= totalCount;
      setState((prev) => prev.visibleCount === count && prev.ready ? prev : { visibleCount: count, ready: true });
    };
    calc();
    let rafId1 = 0, rafId2 = 0;
    const scheduleCalc = () => {
      if (rafId1) {
        cancelAnimationFrame(rafId1);
        rafId1 = 0;
      }
      if (rafId2) {
        cancelAnimationFrame(rafId2);
        rafId2 = 0;
      }
      rafId1 = requestAnimationFrame(() => {
        rafId1 = 0;
        rafId2 = requestAnimationFrame(() => {
          rafId2 = 0;
          calc();
        });
      });
    };
    scheduleCalc();
    const containerObs = new ResizeObserver(scheduleCalc);
    containerObs.observe(container);
    const itemObs = new ResizeObserver(scheduleCalc);
    for (const el of tagEls.current) {
      if (el) itemObs.observe(el);
    }
    return () => {
      if (rafId1) cancelAnimationFrame(rafId1);
      if (rafId2) cancelAnimationFrame(rafId2);
      containerObs.disconnect();
      itemObs.disconnect();
    };
  }, [containerRef, totalCount, enabled, gap, visibleCountOverride]);
  return state;
}
function OverflowTagList({ containerRef, items, size, wrap, renderTag, renderHiddenTag, onRemove, trailing, tagWrapperClassName, overflowWrapperClassName, gap = GAP, overflowShape = "tag", visibleCountOverride }) {
  const tagEls = React.useRef([]);
  const overflowEl = React.useRef(null);
  const { visibleCount, ready } = useOverflowCount(containerRef, tagEls, overflowEl, items.length, !wrap, gap, visibleCountOverride);
  tagEls.current.length = items.length;
  if (wrap) return /* @__PURE__ */ jsxs(Fragment, { children: [
    items.map((item, i) => renderTag(item, i)),
    trailing
  ] });
  const overflow = items.length - visibleCount;
  const hiddenItems = items.slice(visibleCount);
  return /* @__PURE__ */ jsxs("span", { className: "contents", children: [
    items.map((item, i) => (
      // 2026-05-14 I5 fix(per codex M31 verdict + user 抓「avatar stack 堆疊方向不一致」):
      // 加 z-index per-index — 前 item z 高(對齊 MultiPersonDisplay zIndex: visible.length - i
      // canonical + MUI AvatarGroup surplus pattern)。display + edit stack 堆疊方向統一。
      /* @__PURE__ */ jsx("div", { ref: (el) => {
        tagEls.current[i] = el;
      }, className: cn("shrink-0 max-w-full", tagWrapperClassName), style: { zIndex: items.length - i }, children: renderTag(item, i) }, item.value)
    )),
    /* @__PURE__ */ jsx("div", { ref: overflowEl, className: cn("shrink-0", overflowWrapperClassName), children: /* @__PURE__ */ jsx(OverflowIndicator, { count: overflow, shape: overflowShape, size, children: hiddenItems.map((item) => renderHiddenTag ? /* @__PURE__ */ jsx(React.Fragment, { children: renderHiddenTag(item) }, item.value) : /* @__PURE__ */ jsx(Tag, { size: "sm", onRemove: onRemove ? () => onRemove(item.value) : void 0, children: item.label }, item.value)) }) }),
    trailing
  ] });
}
function ComboboxTagStack({
  value,
  options,
  tagSize = "md",
  wrap = false,
  containerRef: externalRef,
  disabled = false
}) {
  const ownRef = React.useRef(null);
  if (!value || value.length === 0) return /* @__PURE__ */ jsx("span", { className: "text-fg-muted", children: EMPTY_DISPLAY });
  const items = value.map((v) => {
    var _a;
    return { value: v, label: ((_a = options == null ? void 0 : options.find((o) => o.value === v)) == null ? void 0 : _a.label) ?? v };
  });
  const disabledClass = disabled ? "bg-disabled text-fg-disabled" : void 0;
  const content = /* @__PURE__ */ jsx(
    OverflowTagList,
    {
      containerRef: externalRef ?? ownRef,
      items,
      size: tagSize,
      wrap,
      renderTag: (item) => /* @__PURE__ */ jsx(Tag, { size: tagSize, className: cn("shrink-0", disabledClass), children: item.label })
    }
  );
  if (externalRef) return content;
  return /* @__PURE__ */ jsx("div", { ref: ownRef, className: cn("flex-1 min-w-0 flex items-center", nakedCellRowModeAlign, wrap ? "flex-wrap" : "overflow-hidden"), style: { gap: GAP }, children: content });
}
const getIconSize = (size) => ICON_SIZE[size];
function ReadonlyMultiSelect({
  mode,
  variant: variantProp,
  size,
  options,
  value,
  wrap,
  className,
  showDisplayEndIcon = false
}) {
  const resolvedMode = mode ?? "readonly";
  const variant = variantProp ?? "default";
  const sz = size ?? "md";
  const iconSize = sz === "lg" ? 20 : 16;
  const containerRef = React.useRef(null);
  const hasTags = ((value == null ? void 0 : value.length) ?? 0) > 0;
  if (resolvedMode === "display") {
    if (!showDisplayEndIcon) {
      if (!hasTags) return /* @__PURE__ */ jsx("span", { className: cn(fieldDisplayTextClass(sz), "text-fg-muted", className), children: EMPTY_DISPLAY });
      return /* @__PURE__ */ jsx(ComboboxTagStack, { value, options, tagSize: sz, wrap });
    }
    return /* @__PURE__ */ jsxs(
      "div",
      {
        className: cn(fieldWrapperStyles({ mode: "display", variant, size: sz }), hasTags && tagPadding[sz], className),
        "data-field-mode": "display",
        children: [
          hasTags ? /* @__PURE__ */ jsx(ComboboxTagStack, { value, options, tagSize: sz, wrap }) : /* @__PURE__ */ jsx("span", { className: cn("flex-1 min-w-0", "text-fg-muted"), children: EMPTY_DISPLAY }),
          /* @__PURE__ */ jsx(ItemSuffix, { className: "pointer-events-none", children: /* @__PURE__ */ jsx(ChevronDown, { size: iconSize, className: "shrink-0 text-fg-muted", "aria-hidden": true }) })
        ]
      }
    );
  }
  return /* @__PURE__ */ jsxs(
    "div",
    {
      ref: containerRef,
      className: cn(
        fieldWrapperStyles({ mode: resolvedMode, variant, size: sz }),
        hasTags && tagPadding[sz],
        // 2026-05-18 #6A Round 1 Step 1/4(per user 拍板「決策6選a」+ codex M31 Step 5 verdict cite combobox.tsx:451):
        // readonly/disabled path 對齊 L293 display wrapper 已 ship 的 overflow-hidden fix。
        // M10 propagation:原 overflow-visible 讓 readonly tag 越界蓋 indicator,跟 display 不對稱。
        wrap ? "flex-wrap py-1" : "overflow-hidden",
        className
      ),
      style: { gap: GAP, ...wrap ? { height: "auto" } : void 0 },
      "data-field-mode": resolvedMode,
      "aria-disabled": resolvedMode === "disabled" ? true : void 0,
      children: [
        hasTags ? /* @__PURE__ */ jsx(
          ComboboxTagStack,
          {
            value,
            options,
            tagSize: sz,
            wrap,
            containerRef,
            disabled: resolvedMode === "disabled"
          }
        ) : /* @__PURE__ */ jsx("span", { className: "text-fg-muted", children: EMPTY_DISPLAY }),
        (variant === "naked" ? !!showDisplayEndIcon : true) && /* @__PURE__ */ jsx(ItemSuffix, { className: "pointer-events-none", children: /* @__PURE__ */ jsx(ChevronDown, { size: iconSize, className: cn("shrink-0", resolvedMode === "disabled" ? "text-fg-disabled" : "text-fg-muted"), "aria-hidden": true }) })
      ]
    }
  );
}
function NativeCombobox({
  mode,
  variant: variantProp,
  error = false,
  size = "md",
  options,
  value = [],
  onChange,
  placeholder,
  className,
  disabled: disabledProp,
  wrap = false,
  clearable = false,
  showDisplayEndIcon = false,
  __triggerRef
}) {
  const disabled = useResolvedFieldDisabled(disabledProp);
  const variant = useResolvedFieldVariant(variantProp);
  const resolvedMode = useResolvedFieldMode({ mode, disabled });
  const iconSize = getIconSize(size);
  const showClear = clearable && value.length > 0 && resolvedMode === "edit";
  const handleRemove = (v) => onChange == null ? void 0 : onChange(value.filter((x) => x !== v));
  const handleAdd = (v) => {
    if (!value.includes(v)) onChange == null ? void 0 : onChange([...value, v]);
  };
  if (resolvedMode !== "edit") {
    return /* @__PURE__ */ jsx(ReadonlyMultiSelect, { mode: resolvedMode, variant, size, options, value, wrap, className, showDisplayEndIcon });
  }
  const items = value.map((v) => {
    var _a;
    return { value: v, label: ((_a = options.find((o) => o.value === v)) == null ? void 0 : _a.label) ?? v };
  });
  const unselected = options.filter((o) => !value.includes(o.value));
  const selectRef = React.useRef(null);
  const tagAreaRef = React.useRef(null);
  const tagHeight = size === "sm" ? 20 : 24;
  const selectDropdown = unselected.length > 0 ? /* @__PURE__ */ jsxs(
    "select",
    {
      ref: selectRef,
      value: "",
      onChange: (e) => handleAdd(e.target.value),
      className: cn(
        "bg-transparent outline-none border-none p-0 text-[inherit] font-[inherit] leading-[inherit] text-fg-muted cursor-pointer appearance-none",
        value.length > 0 ? "absolute inset-0 w-full h-full opacity-0 z-0 cursor-pointer" : "relative z-10 flex-1 min-w-20"
      ),
      children: [
        /* @__PURE__ */ jsx("option", { value: "", disabled: true, children: placeholder ?? "選擇..." }),
        unselected.map((opt) => /* @__PURE__ */ jsx("option", { value: opt.value, children: opt.label }, opt.value))
      ]
    }
  ) : null;
  return /* @__PURE__ */ jsxs(
    "div",
    {
      ref: __triggerRef,
      className: cn(
        fieldWrapperStyles({ mode: "edit", variant, size }),
        value.length > 0 && tagPadding[size],
        "relative",
        wrap && "items-start py-1",
        error && ["border-error hover:border-error-hover", "focus-within:border-error focus-within:hover:border-error"],
        className
      ),
      style: { paddingRight: "0.75rem", ...wrap ? { height: "auto" } : void 0 },
      "data-field-mode": "edit",
      "data-error": error ? "" : void 0,
      onClick: (e) => {
        var _a, _b, _c;
        if (e.target === e.currentTarget) {
          (_b = (_a = selectRef.current) == null ? void 0 : _a.showPicker) == null ? void 0 : _b.call(_a);
          (_c = selectRef.current) == null ? void 0 : _c.focus();
        }
      },
      children: [
        /* @__PURE__ */ jsx(
          "div",
          {
            ref: tagAreaRef,
            className: cn("flex-1 min-w-0 flex items-center relative", nakedCellRowModeAlign, wrap ? "flex-wrap" : "overflow-hidden"),
            style: { gap: GAP },
            onClick: (e) => {
              var _a, _b, _c;
              if (e.target === e.currentTarget) {
                (_b = (_a = selectRef.current) == null ? void 0 : _a.showPicker) == null ? void 0 : _b.call(_a);
                (_c = selectRef.current) == null ? void 0 : _c.focus();
              }
            },
            children: /* @__PURE__ */ jsx(
              OverflowTagList,
              {
                containerRef: tagAreaRef,
                items,
                size,
                wrap,
                renderTag: (item) => /* @__PURE__ */ jsx(
                  Tag,
                  {
                    size,
                    className: "shrink-0 relative z-10",
                    onClick: () => {
                      var _a, _b, _c;
                      (_b = (_a = selectRef.current) == null ? void 0 : _a.showPicker) == null ? void 0 : _b.call(_a);
                      (_c = selectRef.current) == null ? void 0 : _c.focus();
                    },
                    onRemove: () => handleRemove(item.value),
                    children: item.label
                  }
                ),
                onRemove: handleRemove,
                trailing: value.length === 0 ? selectDropdown : void 0
              }
            )
          }
        ),
        value.length > 0 && selectDropdown,
        /* @__PURE__ */ jsxs(
          ItemSuffix,
          {
            className: cn("relative z-10 pointer-events-none", wrap && "self-start"),
            style: wrap ? { height: tagHeight } : void 0,
            children: [
              showClear && /* @__PURE__ */ jsx("span", { className: "pointer-events-auto", children: /* @__PURE__ */ jsx(
                ItemInlineAction,
                {
                  size: size ?? "md",
                  action: { icon: X, label: "清除全部", onClick: () => onChange == null ? void 0 : onChange([]) }
                }
              ) }),
              /* @__PURE__ */ jsx(ChevronDown, { size: iconSize, className: "shrink-0 text-fg-muted pointer-events-none", "aria-hidden": true })
            ]
          }
        )
      ]
    }
  );
}
function CustomCombobox({
  mode,
  variant: variantProp,
  error: errorProp = false,
  size = "md",
  options,
  value = [],
  onChange,
  placeholder,
  className,
  disabled: disabledProp,
  wrap = false,
  clearable = false,
  searchable = false,
  loading,
  searchIn = "menu",
  searchPlaceholder = "搜尋…",
  // i18n-allow: DS default
  searchAriaLabel = "搜尋選項",
  // i18n-allow: DS default
  emptyPlaceholder = "選擇…",
  // i18n-allow: DS default
  defaultOpen = false,
  onOpenChange,
  __triggerRef,
  tagRenderer,
  renderHiddenTag,
  tagWrapperClassName,
  overflowWrapperClassName,
  tagAreaGapPx,
  visibleCountOverride,
  tagAreaPaddingLeftPx,
  overflowShape,
  showDisplayEndIcon = false,
  "aria-label": ariaLabel
}) {
  const tagAreaGap = tagAreaGapPx ?? GAP;
  const fieldCtx = useFieldContext();
  const error = useResolvedFieldInvalid(errorProp);
  const disabled = useResolvedFieldDisabled(disabledProp);
  const resolvedMode = useResolvedFieldMode({ mode, disabled });
  const variant = useResolvedFieldVariant(variantProp);
  const iconSize = getIconSize(size);
  const showClear = clearable && value.length > 0 && resolvedMode === "edit";
  const [open, setOpen] = React.useState(defaultOpen);
  const [search, setSearch] = React.useState("");
  const inputRef = React.useRef(null);
  const listboxId = React.useId();
  React.useEffect(() => {
    if (!open) setSearch("");
  }, [open]);
  if (resolvedMode !== "edit") {
    return /* @__PURE__ */ jsx(ReadonlyMultiSelect, { mode: resolvedMode, variant, size, options, value, wrap, className, showDisplayEndIcon });
  }
  const items = React.useMemo(
    () => value.map((v) => {
      var _a;
      return { value: v, label: ((_a = options.find((o) => o.value === v)) == null ? void 0 : _a.label) ?? v };
    }),
    [value, options]
  );
  const tagAreaRef = React.useRef(null);
  const tagHeight = size === "sm" ? 20 : 24;
  const handleRemove = (v) => onChange == null ? void 0 : onChange(value.filter((x) => x !== v));
  const filteredOptions = React.useMemo(
    () => searchable && searchIn === "trigger" && search ? options.filter((o) => o.label.toLowerCase().includes(search.toLowerCase())) : options,
    [searchable, searchIn, search, options]
  );
  const menuOptions = React.useMemo(
    () => filteredOptions.map((opt) => ({
      value: opt.value,
      label: opt.label,
      icon: opt.icon,
      avatar: opt.avatar,
      description: opt.description,
      disabled: opt.disabled,
      group: opt.group
    })),
    [filteredOptions]
  );
  const chevronEl = /* @__PURE__ */ jsx(ChevronDown, { size: iconSize, className: cn("shrink-0 text-fg-muted transition-transform", open && "rotate-180"), "aria-hidden": true });
  const trigger = /* @__PURE__ */ jsxs(
    "div",
    {
      ref: __triggerRef,
      id: fieldCtx == null ? void 0 : fieldCtx.id,
      role: "combobox",
      "aria-expanded": open,
      "aria-haspopup": "listbox",
      "aria-controls": listboxId,
      tabIndex: 0,
      "aria-label": ariaLabel,
      "aria-invalid": error || void 0,
      "aria-required": (fieldCtx == null ? void 0 : fieldCtx.required) || void 0,
      "aria-describedby": fieldCtx == null ? void 0 : fieldCtx.descriptionId,
      "aria-errormessage": error ? fieldCtx == null ? void 0 : fieldCtx.errorId : void 0,
      className: cn(
        fieldWrapperStyles({ mode: "edit", variant, size }),
        value.length > 0 && tagPadding[size],
        "relative cursor-pointer",
        wrap && "items-start py-1",
        // 2026-05-06 v13.3 SSOT retire:per-control `open && 'border-primary'` 移除。Field default
        // 統一處理 — open=灰深(data-state)/ focus=藍(focus-within !important)。改一處全 control 跟動。
        error && ["border-error hover:border-error-hover", "focus-within:border-error focus-within:hover:border-error"],
        className
      ),
      style: { paddingRight: "0.75rem", ...wrap ? { height: "auto" } : void 0 },
      "data-field-mode": "edit",
      "data-error": error ? "" : void 0,
      onKeyDown: (e) => {
        if (e.key === "Enter" || e.key === " ") {
          if (!open) {
            e.preventDefault();
            setOpen(true);
          }
        }
        if (e.key === "ArrowDown" && !open) {
          e.preventDefault();
          setOpen(true);
        }
        if (e.key === "Escape") setOpen(false);
      },
      children: [
        /* @__PURE__ */ jsx("div", { ref: tagAreaRef, className: cn("flex-1 min-w-0 flex items-center relative", nakedCellRowModeAlign, wrap ? "flex-wrap" : "overflow-hidden"), style: { gap: tagAreaGap, paddingLeft: tagAreaPaddingLeftPx }, children: value.length > 0 ? /* @__PURE__ */ jsx(
          OverflowTagList,
          {
            containerRef: tagAreaRef,
            items,
            size,
            wrap,
            tagWrapperClassName,
            overflowWrapperClassName,
            gap: tagAreaGap,
            overflowShape,
            visibleCountOverride,
            renderTag: (item) => tagRenderer ? tagRenderer(item, () => handleRemove(item.value)) : /* @__PURE__ */ jsx(
              Tag,
              {
                size,
                className: "shrink-0 relative z-10",
                onRemove: () => handleRemove(item.value),
                children: item.label
              }
            ),
            renderHiddenTag,
            onRemove: handleRemove,
            trailing: searchable && searchIn === "trigger" ? /* @__PURE__ */ jsx(
              "input",
              {
                ref: inputRef,
                value: search,
                onChange: (e) => setSearch(e.target.value),
                placeholder: items.length === 0 ? placeholder : "",
                onClick: (e) => {
                  e.stopPropagation();
                  setOpen(true);
                },
                "aria-label": searchAriaLabel,
                className: "flex-1 min-w-[60px] bg-transparent outline-none text-body leading-compact relative z-10"
              }
            ) : void 0
          }
        ) : (
          /* 2026-05-12 Stream C Issue 3 fix(codex Q3 Cluster C):placeholder span 必 flex-1 min-w-0
             truncate,narrow container 時單行省略(對齊 Combobox text-tag truncate canonical)。
             原 hardcode wraps in narrow trigger → user 抓「placeholder 文字 wrap multi-line」。 */
          /* @__PURE__ */ jsx("span", { className: "flex-1 min-w-0 truncate text-fg-muted", children: placeholder ?? emptyPlaceholder })
        ) }),
        /* @__PURE__ */ jsxs(
          ItemSuffix,
          {
            className: cn("relative z-10 pointer-events-none", wrap && "self-start"),
            style: wrap ? { height: tagHeight } : void 0,
            children: [
              showClear && /* @__PURE__ */ jsx("span", { className: "pointer-events-auto", children: /* @__PURE__ */ jsx(
                ItemInlineAction,
                {
                  size: size ?? "md",
                  action: {
                    icon: X,
                    label: "清除全部",
                    // i18n-allow: DS default inline-action label
                    onClick: (e) => {
                      e == null ? void 0 : e.stopPropagation();
                      onChange == null ? void 0 : onChange([]);
                    }
                  }
                }
              ) }),
              chevronEl
            ]
          }
        )
      ]
    }
  );
  return /* @__PURE__ */ jsx(
    SelectMenu,
    {
      loading,
      options: menuOptions,
      value,
      onValueChange: onChange,
      multiple: true,
      searchable: searchable && searchIn === "menu",
      searchPlaceholder,
      size,
      open,
      onOpenChange: (o) => {
        setOpen(o);
        onOpenChange == null ? void 0 : onOpenChange(o);
      },
      onOpenAutoFocus: searchIn === "trigger" ? (e) => {
        var _a;
        e.preventDefault();
        (_a = inputRef.current) == null ? void 0 : _a.focus();
      } : void 0,
      contentId: listboxId,
      children: trigger
    }
  );
}
const Combobox = React.forwardRef(
  ({ size: sizeProp, ...props }, ref) => {
    const size = useResolvedFieldSize(sizeProp);
    const isMobile = useIsTouchDevice();
    if (isMobile) return /* @__PURE__ */ jsx(NativeCombobox, { ...props, size, __triggerRef: ref });
    return /* @__PURE__ */ jsx(CustomCombobox, { ...props, size, __triggerRef: ref });
  }
);
Combobox.displayName = "Combobox";
const comboboxMeta = {
  component: "Combobox",
  family: 4,
  variants: {},
  sizes: {},
  states: ["default", "hover", "active", "focus-visible", "disabled"],
  tokens: {
    bg: ["bg-disabled", "bg-transparent"],
    fg: ["text-fg-disabled", "text-fg-muted"],
    ring: []
  }
};
export {
  Combobox,
  comboboxMeta
};
//# sourceMappingURL=combobox.js.map
