@opengeni/react 6.5.2-canary.41607687019001 → 6.7.0

package/dist/chunk-3CPWWGNK.js

@@ -0,0 +1,920 @@
+"use client";
+import {
+  MENU_CHECK_CLASS,
+  MENU_LABEL_CLASS,
+  MENU_NOTE_CLASS,
+  MENU_SURFACE_CLASS
+} from "./chunk-5OTQA7CM.js";
+import {
+  useFieldControlProps
+} from "./chunk-MVW6HNPI.js";
+import {
+  inertProps
+} from "./chunk-USG4XNMA.js";
+import {
+  containedPortal
+} from "./chunk-UD6AAZSC.js";
+import {
+  cn
+} from "./chunk-TXS65BB2.js";
+
+// src/ui/select-menu.tsx
+import {
+  CheckIcon,
+  ChevronDownIcon,
+  CircleAlertIcon,
+  LoaderCircleIcon,
+  LockIcon,
+  SearchIcon
+} from "lucide-react";
+import { Popover } from "radix-ui";
+import {
+  useCallback,
+  useEffect,
+  useId,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var PopoverContainedPortal = containedPortal(Popover.Portal);
+function useControllableValue(value, defaultValue, onChange) {
+  const [inner, setInner] = useState(defaultValue ?? null);
+  const controlled = value !== void 0;
+  const current = controlled ? value : inner;
+  const setValue = useCallback(
+    (next) => {
+      if (!controlled) setInner(next);
+      onChange?.(next);
+    },
+    [controlled, onChange]
+  );
+  return [current, setValue];
+}
+function filterSelectOptions(options, query) {
+  const words = query.toLowerCase().trim().split(/\s+/).filter(Boolean);
+  if (words.length === 0) return [...options];
+  return options.filter((option) => {
+    const haystack = [
+      option.label,
+      option.meta,
+      typeof option.description === "string" ? option.description : "",
+      ...option.keywords ?? []
+    ].join(" ").toLowerCase();
+    return words.every((word) => haystack.includes(word));
+  });
+}
+function nextEnabledIndex(options, from, direction) {
+  const count = options.length;
+  if (count === 0) return -1;
+  for (let step = 1; step <= count; step += 1) {
+    const index = ((from + direction * step) % count + count) % count;
+    if (!options[index]?.disabled) return index;
+  }
+  return -1;
+}
+function firstEnabledIndex(options) {
+  return options.findIndex((option) => !option.disabled);
+}
+function lastEnabledIndex(options) {
+  for (let index = options.length - 1; index >= 0; index -= 1) {
+    if (!options[index]?.disabled) return index;
+  }
+  return -1;
+}
+function typeaheadIndex(options, buffer, from) {
+  const needle = buffer.toLowerCase();
+  if (!needle) return -1;
+  const repeated = needle.split("").every((char) => char === needle[0]);
+  const search = repeated ? needle[0] : needle;
+  const count = options.length;
+  const start = repeated ? from + 1 : Math.max(from, 0);
+  for (let step = 0; step < count; step += 1) {
+    const index = (start + step) % count;
+    const option = options[index];
+    if (option && !option.disabled && option.label.toLowerCase().startsWith(search)) return index;
+  }
+  return -1;
+}
+var TRIGGER_CLASS = "group/select-trigger inline-flex w-full min-w-0 items-center gap-2 rounded-[10px] border border-border bg-surface px-3 text-left text-sm text-fg transition-colors duration-[120ms] hover:border-border-strong focus-visible:border-brand aria-expanded:border-border-strong aria-expanded:focus-visible:border-brand disabled:cursor-not-allowed disabled:border-border disabled:bg-surface-2 disabled:text-fg-muted aria-invalid:border-danger aria-invalid:hover:border-danger pointer-coarse:h-11";
+var PANEL_CLASS = cn(
+  MENU_SURFACE_CLASS,
+  "z-50 flex max-h-[min(22rem,var(--radix-popover-content-available-height))] w-[max(var(--radix-popover-trigger-width),22rem)] max-w-[calc(100vw-24px)] flex-col overflow-hidden p-0 outline-hidden transition-opacity duration-[120ms] starting:opacity-0"
+);
+function TriggerValue({
+  option,
+  placeholder,
+  showMeta,
+  loading,
+  loadingLabel
+}) {
+  if (loading) {
+    return /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-fg-subtle", children: loadingLabel });
+  }
+  if (!option) {
+    return /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-fg-subtle", children: placeholder });
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    option.leading ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "flex shrink-0 items-center", children: option.leading }) : null,
+    /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1 truncate", children: [
+      option.label,
+      showMeta && option.meta ? /* @__PURE__ */ jsxs("span", { className: "text-fg-subtle group-disabled/select-trigger:text-fg-subtle", children: [
+        " ",
+        "\xB7 ",
+        option.meta
+      ] }) : null
+    ] })
+  ] });
+}
+function TriggerIcon({ loading }) {
+  return loading ? /* @__PURE__ */ jsx(
+    LoaderCircleIcon,
+    {
+      "aria-hidden": "true",
+      className: "size-4 shrink-0 animate-spin text-fg-subtle motion-reduce:animate-none"
+    }
+  ) : /* @__PURE__ */ jsx(
+    ChevronDownIcon,
+    {
+      "aria-hidden": "true",
+      className: "size-4 shrink-0 text-fg-subtle transition-transform duration-[120ms] group-aria-expanded/select-trigger:rotate-180"
+    }
+  );
+}
+function InlineDisabledReason({ id, children }) {
+  return /* @__PURE__ */ jsxs("span", { id, className: "flex min-w-0 items-start gap-1.5 text-xs leading-4.5 text-fg-muted", children: [
+    /* @__PURE__ */ jsx(LockIcon, { className: "mt-0.5 size-3.5 shrink-0 text-fg-subtle", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx("span", { className: "min-w-0", children })
+  ] });
+}
+function joinIds(...ids) {
+  const value = ids.filter(Boolean).join(" ");
+  return value || void 0;
+}
+function useSelectField({
+  id,
+  describedBy,
+  invalid,
+  disabled
+}) {
+  const field = useFieldControlProps();
+  return {
+    id: id ?? field.id,
+    describedBy: describedBy ?? field["aria-describedby"],
+    invalid: invalid ?? Boolean(field["aria-invalid"]),
+    disabled: Boolean(disabled || field.disabled)
+  };
+}
+function SelectMenuPanel({
+  options,
+  value,
+  activeIndex = -1,
+  onActiveIndexChange,
+  onSelect,
+  listboxId,
+  idPrefix,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  header,
+  loading,
+  loadingLabel = "Loading\u2026",
+  emptyMessage = "Nothing to choose from yet.",
+  preview,
+  className
+}) {
+  const fallbackPrefix = useId();
+  const prefix = idPrefix ?? fallbackPrefix;
+  const listRef = useRef(null);
+  useEffect(() => {
+    if (activeIndex < 0 || preview) return;
+    const element = listRef.current?.querySelector(
+      `[data-option-index="${activeIndex}"]`
+    );
+    element?.scrollIntoView?.({ block: "nearest" });
+  }, [activeIndex, preview]);
+  let previousGroup;
+  const rows = [];
+  options.forEach((option, index) => {
+    if (option.group && option.group !== previousGroup) {
+      rows.push(
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            role: "presentation",
+            className: cn(
+              MENU_LABEL_CLASS,
+              index === 0 ? null : "mt-1.5 border-t border-border pt-2.5"
+            ),
+            children: option.group
+          },
+          `group-${option.group}-${option.value}`
+        )
+      );
+    }
+    previousGroup = option.group;
+    const selected = option.value === value;
+    const active = index === activeIndex;
+    const reason = option.disabled ? option.disabledReason : void 0;
+    rows.push(
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          id: `${prefix}-${index}`,
+          role: "option",
+          "aria-selected": selected,
+          "aria-disabled": option.disabled || void 0,
+          "data-option-index": index,
+          "data-active": active || void 0,
+          "data-selected": selected || void 0,
+          onPointerDown: (event) => event.preventDefault(),
+          onPointerMove: () => {
+            if (!active && !option.disabled) onActiveIndexChange?.(index);
+          },
+          onClick: () => {
+            if (!option.disabled) onSelect?.(option.value);
+          },
+          className: cn(
+            "group/option flex min-h-8 min-w-0 cursor-pointer items-start gap-2.5 rounded-[10px] px-2.5 py-1.5 transition-colors duration-[120ms] pointer-coarse:min-h-11",
+            active ? "bg-hover" : null,
+            option.disabled ? "cursor-not-allowed" : null
+          ),
+          children: [
+            option.leading ? /* @__PURE__ */ jsx(
+              "span",
+              {
+                "aria-hidden": "true",
+                className: cn(
+                  "flex h-5 shrink-0 items-center text-fg-muted [&_svg]:size-4",
+                  option.disabled && "opacity-60"
+                ),
+                children: option.leading
+              }
+            ) : null,
+            /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
+              /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-wrap items-baseline gap-x-1.5", children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: cn(
+                      "min-w-0 text-sm [overflow-wrap:anywhere]",
+                      option.disabled ? "text-fg-muted" : "text-fg"
+                    ),
+                    children: option.label
+                  }
+                ),
+                option.meta && option.meta !== option.group ? /* @__PURE__ */ jsx("span", { className: "min-w-0 text-xs text-fg-muted", children: option.meta }) : null
+              ] }),
+              reason ? /* @__PURE__ */ jsxs("span", { className: "mt-0.5 flex min-w-0 items-start gap-1.5 text-xs leading-4.5 text-fg-muted", children: [
+                /* @__PURE__ */ jsx(LockIcon, { className: "mt-0.5 size-3.5 shrink-0 text-fg-subtle", "aria-hidden": "true" }),
+                /* @__PURE__ */ jsx("span", { className: "min-w-0", children: reason })
+              ] }) : option.description ? /* @__PURE__ */ jsx("span", { className: "mt-0.5 block text-xs leading-4.5 text-fg-muted", children: option.description }) : null
+            ] }),
+            /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "flex h-5 w-4 shrink-0 items-center", children: selected ? /* @__PURE__ */ jsx(CheckIcon, { className: MENU_CHECK_CLASS }) : null })
+          ]
+        },
+        option.value
+      )
+    );
+  });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "select-menu-panel",
+      "aria-hidden": preview || void 0,
+      ...inertProps(preview),
+      className: cn(
+        "flex min-h-0 min-w-0 flex-col",
+        preview && cn(MENU_SURFACE_CLASS, "p-0"),
+        className
+      ),
+      children: [
+        header,
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: listRef,
+            id: listboxId,
+            role: "listbox",
+            "aria-label": ariaLabel,
+            "aria-labelledby": ariaLabelledBy,
+            "aria-busy": loading || void 0,
+            className: "min-h-0 flex-1 overflow-y-auto overscroll-contain p-1.5",
+            children: loading ? /* @__PURE__ */ jsxs("div", { role: "presentation", className: cn(MENU_NOTE_CLASS, "flex items-center gap-2"), children: [
+              /* @__PURE__ */ jsx(
+                LoaderCircleIcon,
+                {
+                  className: "size-4 animate-spin text-fg-subtle motion-reduce:animate-none",
+                  "aria-hidden": "true"
+                }
+              ),
+              loadingLabel
+            ] }) : rows.length > 0 ? rows : /* @__PURE__ */ jsx("div", { role: "presentation", className: MENU_NOTE_CLASS, children: emptyMessage })
+          }
+        )
+      ]
+    }
+  );
+}
+function usePopoverAnchor() {
+  const anchorRef = useRef(null);
+  const closedOutside = useRef(false);
+  const onInteractOutside = useCallback((event) => {
+    const target = event.target;
+    if (target instanceof Node && anchorRef.current?.contains(target)) event.preventDefault();
+    else closedOutside.current = true;
+  }, []);
+  const onCloseAutoFocus = useCallback((event) => {
+    event.preventDefault();
+    if (!closedOutside.current) anchorRef.current?.focus();
+    closedOutside.current = false;
+  }, []);
+  return { anchorRef, onInteractOutside, onCloseAutoFocus };
+}
+function DisabledReasonWrapper({
+  reasonId,
+  reason,
+  className,
+  children
+}) {
+  if (!reason) return /* @__PURE__ */ jsx(Fragment, { children });
+  return /* @__PURE__ */ jsxs("span", { className: cn("flex w-full min-w-0 flex-col gap-1.5", className), children: [
+    children,
+    /* @__PURE__ */ jsx(InlineDisabledReason, { id: reasonId, children: reason })
+  ] });
+}
+function MenuSelect({
+  options,
+  value: valueProp,
+  defaultValue,
+  onValueChange,
+  placeholder = "Choose\u2026",
+  size = "md",
+  disabled: disabledProp,
+  disabledReason,
+  loading,
+  loadingLabel = "Loading\u2026",
+  invalid: invalidProp,
+  emptyMessage,
+  showMetaInTrigger = true,
+  align = "start",
+  id: idProp,
+  name,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedByProp,
+  className,
+  menuClassName
+}) {
+  const {
+    id,
+    describedBy: ariaDescribedBy,
+    invalid,
+    disabled
+  } = useSelectField({
+    id: idProp,
+    describedBy: ariaDescribedByProp,
+    invalid: invalidProp,
+    disabled: disabledProp
+  });
+  const [value, setValue] = useControllableValue(valueProp, defaultValue, onValueChange);
+  const [open, setOpen] = useState(false);
+  const [activeIndex, setActiveIndex] = useState(-1);
+  const { anchorRef, onInteractOutside, onCloseAutoFocus } = usePopoverAnchor();
+  const listboxId = useId();
+  const idPrefix = useId();
+  const reasonId = useId();
+  const typeahead = useRef({ buffer: "", timer: 0 });
+  const selectedIndex = options.findIndex((option) => option.value === value);
+  const selected = options[selectedIndex];
+  const blocked = Boolean(disabled || loading);
+  const showReason = Boolean(disabled && disabledReason);
+  const openMenu = useCallback(
+    (focus = "selected") => {
+      if (blocked) return;
+      const start = focus === "last" ? lastEnabledIndex(options) : focus === "first" ? firstEnabledIndex(options) : selectedIndex >= 0 && !options[selectedIndex]?.disabled ? selectedIndex : firstEnabledIndex(options);
+      setActiveIndex(start);
+      setOpen(true);
+    },
+    [blocked, options, selectedIndex]
+  );
+  const choose = useCallback(
+    (next) => {
+      setValue(next);
+      setOpen(false);
+      anchorRef.current?.focus();
+    },
+    [anchorRef, setValue]
+  );
+  const runTypeahead = (key) => {
+    const state = typeahead.current;
+    if (state.timer) clearTimeout(state.timer);
+    state.buffer += key;
+    state.timer = setTimeout(() => {
+      state.buffer = "";
+    }, 500);
+    const from = open ? activeIndex : selectedIndex;
+    const match = typeaheadIndex(options, state.buffer, from);
+    if (match < 0) return;
+    if (open) setActiveIndex(match);
+    else setValue(options[match].value);
+  };
+  const onKeyDown = (event) => {
+    if (blocked) return;
+    const { key } = event;
+    if (!open) {
+      if (key === "ArrowDown" || key === "Enter" || key === " ") {
+        event.preventDefault();
+        openMenu("selected");
+      } else if (key === "ArrowUp") {
+        event.preventDefault();
+        openMenu(selectedIndex >= 0 ? "selected" : "last");
+      } else if (key === "Home") {
+        event.preventDefault();
+        openMenu("first");
+      } else if (key === "End") {
+        event.preventDefault();
+        openMenu("last");
+      } else if (key.length === 1 && !event.metaKey && !event.ctrlKey && !event.altKey) {
+        runTypeahead(key);
+      }
+      return;
+    }
+    if (key === "ArrowDown" || key === "ArrowUp") {
+      event.preventDefault();
+      if (event.altKey && key === "ArrowUp") {
+        const option = options[activeIndex];
+        if (option && !option.disabled) choose(option.value);
+        return;
+      }
+      setActiveIndex(nextEnabledIndex(options, activeIndex, key === "ArrowDown" ? 1 : -1));
+    } else if (key === "Home") {
+      event.preventDefault();
+      setActiveIndex(firstEnabledIndex(options));
+    } else if (key === "End") {
+      event.preventDefault();
+      setActiveIndex(lastEnabledIndex(options));
+    } else if (key === "Enter" || key === " ") {
+      event.preventDefault();
+      const option = options[activeIndex];
+      if (option && !option.disabled) choose(option.value);
+    } else if (key === "Escape") {
+      event.preventDefault();
+      setOpen(false);
+    } else if (key === "Tab") {
+      setOpen(false);
+    } else if (key.length === 1 && !event.metaKey && !event.ctrlKey && !event.altKey) {
+      runTypeahead(key);
+    }
+  };
+  useEffect(() => {
+    const state = typeahead.current;
+    return () => {
+      if (state.timer) clearTimeout(state.timer);
+    };
+  }, []);
+  return /* @__PURE__ */ jsxs(DisabledReasonWrapper, { reasonId, reason: showReason ? disabledReason : null, children: [
+    /* @__PURE__ */ jsxs(Popover.Root, { open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ jsx(Popover.Anchor, { asChild: true, children: /* @__PURE__ */ jsxs(
+        "button",
+        {
+          ref: anchorRef,
+          id,
+          type: "button",
+          role: "combobox",
+          "aria-haspopup": "listbox",
+          "aria-expanded": open,
+          "aria-controls": open ? listboxId : void 0,
+          "aria-activedescendant": open && activeIndex >= 0 ? `${idPrefix}-${activeIndex}` : void 0,
+          "aria-label": ariaLabel,
+          "aria-labelledby": ariaLabelledBy,
+          "aria-describedby": joinIds(ariaDescribedBy, showReason && reasonId),
+          "aria-invalid": invalid || void 0,
+          "aria-busy": loading || void 0,
+          disabled: blocked,
+          "data-slot": "select-menu-trigger",
+          "data-size": size,
+          onClick: () => open ? setOpen(false) : openMenu("selected"),
+          onKeyDown,
+          className: cn(TRIGGER_CLASS, size === "sm" ? "h-8" : "h-9", className),
+          children: [
+            /* @__PURE__ */ jsx(
+              TriggerValue,
+              {
+                option: selected,
+                placeholder,
+                showMeta: showMetaInTrigger,
+                loading,
+                loadingLabel
+              }
+            ),
+            /* @__PURE__ */ jsx(TriggerIcon, { loading })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsx(PopoverContainedPortal, { children: /* @__PURE__ */ jsx(
+        Popover.Content,
+        {
+          role: "presentation",
+          align,
+          side: "bottom",
+          sideOffset: 6,
+          collisionPadding: 12,
+          onOpenAutoFocus: (event) => event.preventDefault(),
+          onCloseAutoFocus,
+          onInteractOutside,
+          className: cn(PANEL_CLASS, menuClassName),
+          children: /* @__PURE__ */ jsx(
+            SelectMenuPanel,
+            {
+              options,
+              value,
+              activeIndex,
+              onActiveIndexChange: setActiveIndex,
+              onSelect: choose,
+              listboxId,
+              idPrefix,
+              "aria-label": ariaLabel,
+              "aria-labelledby": ariaLabelledBy,
+              emptyMessage
+            }
+          )
+        }
+      ) })
+    ] }),
+    name ? /* @__PURE__ */ jsx("input", { type: "hidden", name, value: value ?? "" }) : null
+  ] });
+}
+function ComboboxSelect({
+  options,
+  value: valueProp,
+  defaultValue,
+  onValueChange,
+  placeholder = "Choose\u2026",
+  size = "md",
+  disabled: disabledProp,
+  disabledReason,
+  loading,
+  loadingLabel = "Loading\u2026",
+  invalid: invalidProp,
+  emptyMessage,
+  showMetaInTrigger = true,
+  searchPlaceholder = "Search",
+  onSearchChange,
+  filterLocally = true,
+  searching,
+  align = "start",
+  id: idProp,
+  name,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedByProp,
+  className,
+  menuClassName
+}) {
+  const {
+    id,
+    describedBy: ariaDescribedBy,
+    invalid,
+    disabled
+  } = useSelectField({
+    id: idProp,
+    describedBy: ariaDescribedByProp,
+    invalid: invalidProp,
+    disabled: disabledProp
+  });
+  const [value, setValue] = useControllableValue(valueProp, defaultValue, onValueChange);
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState("");
+  const [activeIndex, setActiveIndex] = useState(-1);
+  const { anchorRef, onInteractOutside, onCloseAutoFocus } = usePopoverAnchor();
+  const inputRef = useRef(null);
+  const listboxId = useId();
+  const idPrefix = useId();
+  const reasonId = useId();
+  const selected = options.find((option) => option.value === value);
+  const blocked = Boolean(disabled || loading);
+  const showReason = Boolean(disabled && disabledReason);
+  const visible = useMemo(
+    () => filterLocally ? filterSelectOptions(options, query) : [...options],
+    [filterLocally, options, query]
+  );
+  const setOpenState = (next) => {
+    if (next && blocked) return;
+    setOpen(next);
+    if (next) {
+      const selectedIndex = visible.findIndex((option) => option.value === value);
+      setActiveIndex(
+        selectedIndex >= 0 && !visible[selectedIndex]?.disabled ? selectedIndex : firstEnabledIndex(visible)
+      );
+    } else if (query) {
+      setQuery("");
+      onSearchChange?.("");
+    }
+  };
+  const choose = (next) => {
+    setValue(next);
+    setOpenState(false);
+    anchorRef.current?.focus();
+  };
+  const onQueryChange = (next) => {
+    setQuery(next);
+    onSearchChange?.(next);
+    const filtered = filterLocally ? filterSelectOptions(options, next) : [...options];
+    setActiveIndex(firstEnabledIndex(filtered));
+  };
+  const onInputKeyDown = (event) => {
+    const { key } = event;
+    if (key === "ArrowDown" || key === "ArrowUp") {
+      event.preventDefault();
+      setActiveIndex(nextEnabledIndex(visible, activeIndex, key === "ArrowDown" ? 1 : -1));
+    } else if (key === "Enter") {
+      event.preventDefault();
+      const option = visible[activeIndex];
+      if (option && !option.disabled) choose(option.value);
+    } else if (key === "Tab") {
+      setOpenState(false);
+    }
+  };
+  const busy = Boolean(searching);
+  return /* @__PURE__ */ jsxs(DisabledReasonWrapper, { reasonId, reason: showReason ? disabledReason : null, children: [
+    /* @__PURE__ */ jsxs(Popover.Root, { open, onOpenChange: setOpenState, children: [
+      /* @__PURE__ */ jsx(Popover.Anchor, { asChild: true, children: /* @__PURE__ */ jsxs(
+        "button",
+        {
+          ref: anchorRef,
+          id,
+          type: "button",
+          "aria-haspopup": "dialog",
+          "aria-expanded": open,
+          "aria-label": ariaLabel,
+          "aria-labelledby": ariaLabelledBy,
+          "aria-describedby": joinIds(ariaDescribedBy, showReason && reasonId),
+          "aria-invalid": invalid || void 0,
+          "aria-busy": loading || void 0,
+          disabled: blocked,
+          "data-slot": "select-menu-trigger",
+          "data-size": size,
+          onClick: () => setOpenState(!open),
+          onKeyDown: (event) => {
+            if (!open && (event.key === "ArrowDown" || event.key === "ArrowUp")) {
+              event.preventDefault();
+              setOpenState(true);
+            }
+          },
+          className: cn(TRIGGER_CLASS, size === "sm" ? "h-8" : "h-9", className),
+          children: [
+            /* @__PURE__ */ jsx(
+              TriggerValue,
+              {
+                option: selected,
+                placeholder,
+                showMeta: showMetaInTrigger,
+                loading,
+                loadingLabel
+              }
+            ),
+            /* @__PURE__ */ jsx(TriggerIcon, { loading })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsx(PopoverContainedPortal, { children: /* @__PURE__ */ jsx(
+        Popover.Content,
+        {
+          align,
+          side: "bottom",
+          sideOffset: 6,
+          collisionPadding: 12,
+          onOpenAutoFocus: (event) => {
+            event.preventDefault();
+            inputRef.current?.focus();
+          },
+          onEscapeKeyDown: (event) => {
+            if (!query) return;
+            event.preventDefault();
+            onQueryChange("");
+          },
+          onCloseAutoFocus,
+          onInteractOutside,
+          className: cn(PANEL_CLASS, menuClassName),
+          children: /* @__PURE__ */ jsx(
+            SelectMenuPanel,
+            {
+              options: visible,
+              value,
+              activeIndex,
+              onActiveIndexChange: setActiveIndex,
+              onSelect: choose,
+              listboxId,
+              idPrefix,
+              "aria-label": ariaLabel,
+              "aria-labelledby": ariaLabelledBy,
+              loading: busy,
+              loadingLabel: "Searching\u2026",
+              emptyMessage: query ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                "No matches for \u201C",
+                query.trim(),
+                "\u201D."
+              ] }) : emptyMessage ?? "Nothing to choose from yet.",
+              header: /* @__PURE__ */ jsx(
+                ComboboxSearch,
+                {
+                  inputRef,
+                  query,
+                  placeholder: searchPlaceholder,
+                  listboxId,
+                  activeId: activeIndex >= 0 ? `${idPrefix}-${activeIndex}` : void 0,
+                  onChange: onQueryChange,
+                  onKeyDown: onInputKeyDown
+                }
+              )
+            }
+          )
+        }
+      ) })
+    ] }),
+    name ? /* @__PURE__ */ jsx("input", { type: "hidden", name, value: value ?? "" }) : null
+  ] });
+}
+function ComboboxSearch({
+  inputRef,
+  query,
+  placeholder,
+  listboxId,
+  activeId,
+  onChange,
+  onKeyDown,
+  preview
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-11 shrink-0 items-center gap-2 border-b border-border px-3.5", children: [
+    /* @__PURE__ */ jsx(SearchIcon, { className: "size-4 shrink-0 text-fg-subtle", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: inputRef,
+        role: "combobox",
+        "aria-expanded": !preview,
+        "aria-controls": listboxId,
+        "aria-activedescendant": activeId,
+        "aria-autocomplete": "list",
+        "aria-label": placeholder,
+        autoComplete: "off",
+        spellCheck: false,
+        value: query,
+        readOnly: preview,
+        placeholder,
+        onChange: (event) => onChange?.(event.target.value),
+        onKeyDown,
+        className: "h-full min-w-0 flex-1 bg-transparent text-sm text-fg outline-hidden! placeholder:text-fg-subtle"
+      }
+    )
+  ] });
+}
+function ComboboxPanelPreview({
+  options,
+  value,
+  query = "",
+  searchPlaceholder = "Search",
+  activeValue,
+  className
+}) {
+  const visible = filterSelectOptions(options, query);
+  return /* @__PURE__ */ jsx(
+    SelectMenuPanel,
+    {
+      preview: true,
+      options: visible,
+      value,
+      activeIndex: activeValue ? visible.findIndex((option) => option.value === activeValue) : -1,
+      className,
+      emptyMessage: /* @__PURE__ */ jsxs(Fragment, { children: [
+        "No matches for \u201C",
+        query.trim(),
+        "\u201D."
+      ] }),
+      header: /* @__PURE__ */ jsx(ComboboxSearch, { preview: true, query, placeholder: searchPlaceholder })
+    }
+  );
+}
+function nativeOptionText(option) {
+  const base = option.meta ? `${option.label} \xB7 ${option.meta}` : option.label;
+  return option.disabled ? `${base} - unavailable` : base;
+}
+function NativeSelect({
+  options,
+  value: valueProp,
+  defaultValue,
+  onValueChange,
+  placeholder,
+  disabled: disabledProp,
+  disabledReason,
+  loading,
+  loadingLabel = "Loading\u2026",
+  invalid: invalidProp,
+  showSelectedDescription = true,
+  id: idProp,
+  name,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedByProp,
+  className
+}) {
+  const {
+    id,
+    describedBy: ariaDescribedBy,
+    invalid,
+    disabled
+  } = useSelectField({
+    id: idProp,
+    describedBy: ariaDescribedByProp,
+    invalid: invalidProp,
+    disabled: disabledProp
+  });
+  const [value, setValue] = useControllableValue(valueProp, defaultValue, onValueChange);
+  const descriptionId = useId();
+  const reasonId = useId();
+  const selected = options.find((option) => option.value === value);
+  const showReason = Boolean(disabled && disabledReason);
+  const selectedDescription = showSelectedDescription && selected?.description && !loading ? selected.description : null;
+  const groups = [];
+  for (const option of options) {
+    const last = groups[groups.length - 1];
+    if (last && last.label === option.group) last.options.push(option);
+    else groups.push({ label: option.group, options: [option] });
+  }
+  const renderOption = (option) => /* @__PURE__ */ jsx("option", { value: option.value, disabled: option.disabled, children: nativeOptionText(option) }, option.value);
+  return /* @__PURE__ */ jsxs("span", { "data-slot": "native-select", className: "flex w-full min-w-0 flex-col gap-1.5", children: [
+    /* @__PURE__ */ jsxs("span", { className: cn("relative block w-full min-w-0", className), children: [
+      /* @__PURE__ */ jsxs(
+        "select",
+        {
+          id,
+          name,
+          value: loading ? "" : value ?? "",
+          disabled: disabled || loading,
+          "aria-label": ariaLabel,
+          "aria-labelledby": ariaLabelledBy,
+          "aria-describedby": joinIds(
+            ariaDescribedBy,
+            selectedDescription ? descriptionId : null,
+            showReason && reasonId
+          ),
+          "aria-invalid": invalid || void 0,
+          "aria-busy": loading || void 0,
+          onChange: (event) => setValue(event.target.value),
+          className: cn(
+            "block h-8 w-full min-w-0 cursor-pointer appearance-none truncate rounded-[10px] border border-border bg-surface pr-8 pl-3 text-sm text-fg transition-colors duration-[120ms] hover:border-border-strong focus-visible:border-brand focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring/55 disabled:cursor-not-allowed disabled:border-border disabled:bg-surface-2 disabled:text-fg-muted aria-invalid:border-danger aria-invalid:hover:border-danger pointer-coarse:h-11",
+            !value && "text-fg-subtle"
+          ),
+          children: [
+            loading ? /* @__PURE__ */ jsx("option", { value: "", children: loadingLabel }) : placeholder || !value ? /* @__PURE__ */ jsx("option", { value: "", disabled: true, children: placeholder ?? "Choose\u2026" }) : null,
+            loading ? null : groups.map(
+              (group) => group.label ? /* @__PURE__ */ jsx("optgroup", { label: group.label, children: group.options.map(renderOption) }, `${group.label}-${group.options[0].value}`) : group.options.map(renderOption)
+            )
+          ]
+        }
+      ),
+      loading ? /* @__PURE__ */ jsx(
+        LoaderCircleIcon,
+        {
+          "aria-hidden": "true",
+          className: "pointer-events-none absolute top-1/2 right-2.5 size-4 -translate-y-1/2 animate-spin text-fg-subtle motion-reduce:animate-none"
+        }
+      ) : /* @__PURE__ */ jsx(
+        ChevronDownIcon,
+        {
+          "aria-hidden": "true",
+          className: "pointer-events-none absolute top-1/2 right-2.5 size-4 -translate-y-1/2 text-fg-subtle"
+        }
+      )
+    ] }),
+    selectedDescription ? /* @__PURE__ */ jsx("span", { id: descriptionId, className: "text-xs leading-4.5 text-fg-muted", children: selectedDescription }) : null,
+    showReason ? /* @__PURE__ */ jsx(InlineDisabledReason, { id: reasonId, children: disabledReason }) : null
+  ] });
+}
+function SelectMenu({ variant = "menu", ...props }) {
+  if (variant === "native") return /* @__PURE__ */ jsx(NativeSelect, { ...props });
+  if (variant === "combobox") return /* @__PURE__ */ jsx(ComboboxSelect, { ...props });
+  return /* @__PURE__ */ jsx(MenuSelect, { ...props });
+}
+function SelectError({ id, children }) {
+  return /* @__PURE__ */ jsxs("span", { id, className: "flex min-w-0 items-start gap-1.5 text-xs leading-4.5 text-danger", children: [
+    /* @__PURE__ */ jsx(CircleAlertIcon, { className: "mt-0.5 size-3.5 shrink-0", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx("span", { className: "min-w-0", children })
+  ] });
+}
+
+export {
+  filterSelectOptions,
+  nextEnabledIndex,
+  typeaheadIndex,
+  InlineDisabledReason,
+  SelectMenuPanel,
+  MenuSelect,
+  ComboboxSelect,
+  ComboboxPanelPreview,
+  nativeOptionText,
+  NativeSelect,
+  SelectMenu,
+  SelectError
+};
+//# sourceMappingURL=chunk-3CPWWGNK.js.map