@vritti/quantum-ui 0.2.8 → 0.2.10

package/dist/components/Select.js

@@ -0,0 +1,1379 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import * as React from 'react';
+import { useState, useMemo, useRef, useId, useCallback, useEffect } from 'react';
+import { F as Field, e as FieldLabel, b as FieldDescription, c as FieldError } from '../field.js';
+import { c as cn } from '../utils2.js';
+import { P as Popover, a as PopoverTrigger, C as ChevronDown, b as PopoverContent } from '../popover.js';
+import { c as createLucideIcon } from '../createLucideIcon.js';
+import { C as Checkbox } from '../Checkbox2.js';
+import { L as LoaderCircle } from '../loader-circle.js';
+import { B as Badge } from '../Badge2.js';
+import { X } from '../x.js';
+import { C as Check } from '../check.js';
+import { useQuery, keepPreviousData, useInfiniteQuery } from '@tanstack/react-query';
+import { axios } from '../utils/axios.js';
+
+/**
+ * @license lucide-react v0.562.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+
+const __iconNode = [
+  ["path", { d: "m21 21-4.34-4.34", key: "14j7rj" }],
+  ["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }]
+];
+const Search = createLucideIcon("search", __iconNode);
+
+function MultiSelectRoot$1({ open, onOpenChange, disabled, children }) {
+  return /* @__PURE__ */ jsx(Popover, { "data-slot": "multi-select", open: disabled ? false : open, onOpenChange: disabled ? void 0 : onOpenChange, children });
+}
+const MultiSelectTrigger$1 = React.forwardRef(
+  ({ className, children, disabled, open, listboxId, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref,
+        type: "button",
+        "data-slot": "multi-select-trigger",
+        role: "combobox",
+        "aria-expanded": open ?? false,
+        "aria-haspopup": "listbox",
+        "aria-controls": listboxId,
+        disabled,
+        className: cn(
+          "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-full items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+          "min-h-9",
+          className
+        ),
+        ...props,
+        children: [
+          children,
+          /* @__PURE__ */ jsx(ChevronDown, { className: "size-4 shrink-0 opacity-50" })
+        ]
+      }
+    ) });
+  }
+);
+MultiSelectTrigger$1.displayName = "MultiSelectTrigger";
+function MultiSelectContent$1({ className, children, align = "start", ...props }) {
+  return /* @__PURE__ */ jsx(
+    PopoverContent,
+    {
+      "data-slot": "multi-select-content",
+      align,
+      className: cn("w-[var(--radix-popover-trigger-width)] p-0", className),
+      ...props,
+      children
+    }
+  );
+}
+function MultiSelectSearch$1({ value, onValueChange, placeholder = "Search...", className }) {
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "multi-select-search", className: cn("flex items-center gap-2 border-b px-3", className), children: [
+    /* @__PURE__ */ jsx(Search, { className: "size-4 shrink-0 text-muted-foreground" }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "text",
+        "aria-label": "Search options",
+        value,
+        onChange: (e) => onValueChange(e.target.value),
+        placeholder,
+        className: "flex h-9 w-full bg-transparent py-2 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50"
+      }
+    )
+  ] });
+}
+function MultiSelectActions$1({ onSelectAll, onClear, disabled, className }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "multi-select-actions",
+      className: cn("flex items-center justify-between border-t px-3 py-1.5", className),
+      children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            disabled,
+            className: "text-xs font-medium text-primary hover:text-primary/80 disabled:pointer-events-none disabled:opacity-50",
+            onClick: onSelectAll,
+            children: "Select All"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            disabled,
+            className: "text-xs font-medium text-muted-foreground hover:text-foreground disabled:pointer-events-none disabled:opacity-50",
+            onClick: onClear,
+            children: "Clear"
+          }
+        )
+      ]
+    }
+  );
+}
+function MultiSelectList$1({ className, children, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "multi-select-list",
+      role: "listbox",
+      "aria-multiselectable": "true",
+      className: cn("max-h-60 overflow-y-auto p-1", className),
+      ...props,
+      children
+    }
+  );
+}
+const MultiSelectRow$1 = React.memo(function MultiSelectRow2({
+  name,
+  checked,
+  onToggle,
+  disabled,
+  className
+}) {
+  function handleClick() {
+    if (!disabled) {
+      onToggle();
+    }
+  }
+  function handleKeyDown(e) {
+    if (disabled) return;
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      onToggle();
+    }
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "multi-select-row",
+      role: "option",
+      "aria-selected": checked,
+      "aria-disabled": disabled,
+      tabIndex: disabled ? void 0 : 0,
+      className: cn(
+        "relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none",
+        "hover:bg-accent hover:text-accent-foreground",
+        "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        className
+      ),
+      "data-disabled": disabled ? "" : void 0,
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      children: [
+        /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            checked,
+            onCheckedChange: () => onToggle(),
+            disabled,
+            tabIndex: -1,
+            "aria-hidden": "true"
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "truncate", children: name })
+      ]
+    }
+  );
+});
+function MultiSelectGroup$1({ className, children, ...props }) {
+  return /* @__PURE__ */ jsx("div", { "data-slot": "multi-select-group", role: "group", className: cn(className), ...props, children });
+}
+function MultiSelectGroupLabel$1({ className, children, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "multi-select-group-label",
+      className: cn("text-muted-foreground px-2 py-1.5 text-xs", className),
+      ...props,
+      children
+    }
+  );
+}
+function MultiSelectEmpty$1({ children, className }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "multi-select-empty",
+      className: cn("flex items-center justify-center py-6 text-sm text-muted-foreground", className),
+      children: children ?? "No options found."
+    }
+  );
+}
+
+function useMultiSelect({
+  options,
+  groups,
+  value: controlledValue,
+  onChange,
+  defaultValue,
+  remoteSearch
+}) {
+  const isControlled = controlledValue !== void 0;
+  const [internalValue, setInternalValue] = useState(defaultValue ?? []);
+  const selectedValues = isControlled ? controlledValue : internalValue;
+  const selectedSet = useMemo(() => new Set(selectedValues), [selectedValues]);
+  const selectedValuesRef = useRef(selectedValues);
+  selectedValuesRef.current = selectedValues;
+  const [open, setOpen] = useState(false);
+  const [searchQuery, setSearchQuery] = useState("");
+  const listboxId = useId();
+  const optionMap = useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const option of options) {
+      map.set(option.value, option);
+    }
+    return map;
+  }, [options]);
+  const filteredOptions = useMemo(() => {
+    if (remoteSearch || !searchQuery) return options;
+    const lower = searchQuery.toLowerCase();
+    return options.filter((option) => option.label.toLowerCase().includes(lower));
+  }, [options, searchQuery, remoteSearch]);
+  const updateSelection = useCallback(
+    (nextValues) => {
+      if (!isControlled) {
+        setInternalValue(nextValues);
+      }
+      onChange?.(nextValues);
+    },
+    [isControlled, onChange]
+  );
+  const toggleOption = useCallback(
+    (optionValue) => {
+      const option = optionMap.get(optionValue);
+      if (option?.disabled) return;
+      const current = selectedValuesRef.current;
+      const nextValues = current.includes(optionValue) ? current.filter((v) => v !== optionValue) : [...current, optionValue];
+      updateSelection(nextValues);
+    },
+    [optionMap, updateSelection]
+  );
+  const selectAll = useCallback(() => {
+    const enabledValues = options.filter((o) => !o.disabled).map((o) => o.value);
+    const currentDisabledValues = selectedValuesRef.current.filter((v) => optionMap.get(v)?.disabled);
+    updateSelection([.../* @__PURE__ */ new Set([...currentDisabledValues, ...enabledValues])]);
+  }, [options, optionMap, updateSelection]);
+  const clearAll = useCallback(() => {
+    const currentDisabledValues = selectedValuesRef.current.filter((v) => optionMap.get(v)?.disabled);
+    updateSelection(currentDisabledValues);
+  }, [optionMap, updateSelection]);
+  useEffect(() => {
+    if (!open) {
+      setSearchQuery("");
+    }
+  }, [open]);
+  const selectedOptions = useMemo(
+    () => selectedValues.map((v) => optionMap.get(v)).filter(Boolean),
+    [selectedValues, optionMap]
+  );
+  const grouped = useMemo(() => {
+    if (!groups || groups.length === 0) return null;
+    const buckets = /* @__PURE__ */ new Map();
+    for (const g of groups) {
+      buckets.set(g.id, []);
+    }
+    const ungrouped = [];
+    for (const option of filteredOptions) {
+      const bucket = option.groupId != null ? buckets.get(option.groupId) : void 0;
+      if (bucket) {
+        bucket.push(option);
+      } else {
+        ungrouped.push(option);
+      }
+    }
+    const entries = [];
+    for (const g of groups) {
+      const bucket = buckets.get(g.id);
+      if (!bucket || bucket.length === 0) continue;
+      entries.push({ name: g.name, options: bucket });
+    }
+    return { ungrouped, entries };
+  }, [filteredOptions, groups]);
+  return {
+    selectedValues,
+    selectedSet,
+    selectedOptions,
+    open,
+    setOpen,
+    searchQuery,
+    setSearchQuery,
+    listboxId,
+    filteredOptions,
+    grouped,
+    toggleOption,
+    selectAll,
+    clearAll
+  };
+}
+
+const MultiSelect = React.forwardRef(
+  ({
+    label,
+    description,
+    error,
+    placeholder = "Select options",
+    options,
+    groups,
+    value: controlledValue,
+    onChange,
+    onBlur,
+    name,
+    disabled = false,
+    required,
+    className,
+    id,
+    defaultValue,
+    maxDisplayedItems = 3,
+    searchable = false,
+    searchPlaceholder = "Search...",
+    asyncState
+  }, ref) => {
+    const state = useMultiSelect({
+      options: options ?? [],
+      groups,
+      value: controlledValue,
+      onChange,
+      defaultValue,
+      remoteSearch: !!asyncState
+    });
+    const searchValue = asyncState ? asyncState.searchQuery : state.searchQuery;
+    const setSearchValue = asyncState ? asyncState.setSearchQuery : state.setSearchQuery;
+    const showSearch = !!asyncState || searchable;
+    function renderRow(option) {
+      return /* @__PURE__ */ jsx(
+        MultiSelectRow$1,
+        {
+          name: option.label,
+          checked: state.selectedSet.has(option.value),
+          onToggle: () => {
+            state.toggleOption(option.value);
+          },
+          disabled: option.disabled
+        },
+        String(option.value)
+      );
+    }
+    function renderOptions() {
+      if (asyncState?.loading) {
+        return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-2 py-6", children: [
+          /* @__PURE__ */ jsx(LoaderCircle, { className: "size-4 animate-spin text-muted-foreground" }),
+          /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: "Loading..." })
+        ] });
+      }
+      if (state.filteredOptions.length === 0) {
+        return /* @__PURE__ */ jsx(MultiSelectEmpty$1, {});
+      }
+      if (!state.grouped) {
+        return state.filteredOptions.map(renderRow);
+      }
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        state.grouped.ungrouped.map(renderRow),
+        state.grouped.entries.map((entry) => /* @__PURE__ */ jsxs(MultiSelectGroup$1, { children: [
+          /* @__PURE__ */ jsx(MultiSelectGroupLabel$1, { children: entry.name }),
+          entry.options.map(renderRow)
+        ] }, entry.name))
+      ] });
+    }
+    function renderTriggerContent() {
+      if (state.selectedOptions.length === 0) {
+        return /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: placeholder });
+      }
+      if (state.selectedOptions.length > maxDisplayedItems) {
+        return /* @__PURE__ */ jsxs("span", { className: "text-sm", children: [
+          state.selectedOptions.length,
+          " items selected"
+        ] });
+      }
+      return /* @__PURE__ */ jsx("span", { className: "flex flex-wrap items-center gap-1", children: state.selectedOptions.map((option) => /* @__PURE__ */ jsxs(Badge, { variant: "secondary", className: "gap-1 pr-1", children: [
+        option.label,
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": `Remove ${option.label}`,
+            className: "rounded-full outline-none ring-offset-background focus:ring-2 focus:ring-ring focus:ring-offset-2",
+            onMouseDown: (e) => e.preventDefault(),
+            onClick: (e) => {
+              e.stopPropagation();
+              state.toggleOption(option.value);
+            },
+            children: /* @__PURE__ */ jsx(X, { className: "size-3 text-muted-foreground hover:text-foreground" })
+          }
+        )
+      ] }, String(option.value))) });
+    }
+    return /* @__PURE__ */ jsxs(Field, { children: [
+      label && /* @__PURE__ */ jsx(FieldLabel, { children: label }),
+      /* @__PURE__ */ jsxs(MultiSelectRoot$1, { open: state.open, onOpenChange: state.setOpen, disabled, children: [
+        /* @__PURE__ */ jsx(
+          MultiSelectTrigger$1,
+          {
+            ref,
+            id,
+            open: state.open,
+            listboxId: state.listboxId,
+            "aria-invalid": !!error,
+            "aria-required": required,
+            disabled,
+            onBlur,
+            className,
+            children: /* @__PURE__ */ jsx("span", { className: "flex flex-1 flex-wrap items-center gap-1 overflow-hidden", children: renderTriggerContent() })
+          }
+        ),
+        /* @__PURE__ */ jsxs(MultiSelectContent$1, { children: [
+          showSearch && /* @__PURE__ */ jsx(MultiSelectSearch$1, { value: searchValue, onValueChange: setSearchValue, placeholder: searchPlaceholder }),
+          /* @__PURE__ */ jsxs(MultiSelectList$1, { id: state.listboxId, children: [
+            renderOptions(),
+            asyncState?.hasMore && /* @__PURE__ */ jsx("div", { ref: asyncState.sentinelRef, className: "h-1" }),
+            asyncState?.loadingMore && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-2 py-2", children: [
+              /* @__PURE__ */ jsx(LoaderCircle, { className: "size-3 animate-spin text-muted-foreground" }),
+              /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "Loading more..." })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(MultiSelectActions$1, { onSelectAll: state.selectAll, onClear: state.clearAll, disabled })
+        ] })
+      ] }),
+      name && state.selectedValues.map((v) => /* @__PURE__ */ jsx("input", { type: "hidden", name, value: String(v) }, String(v))),
+      description && !error && /* @__PURE__ */ jsx(FieldDescription, { children: description }),
+      error && /* @__PURE__ */ jsx(FieldError, { children: error })
+    ] });
+  }
+);
+MultiSelect.displayName = "MultiSelect";
+
+const MultiSelectFilter = React.forwardRef(
+  ({
+    label,
+    placeholder,
+    options,
+    groups,
+    value: controlledValue,
+    onChange,
+    onBlur,
+    name,
+    disabled = false,
+    required,
+    className,
+    id,
+    defaultValue,
+    searchPlaceholder = "Search...",
+    asyncState
+  }, ref) => {
+    const state = useMultiSelect({
+      options: options ?? [],
+      groups,
+      value: controlledValue,
+      onChange,
+      defaultValue,
+      remoteSearch: !!asyncState
+    });
+    const searchValue = asyncState ? asyncState.searchQuery : state.searchQuery;
+    const setSearchValue = asyncState ? asyncState.setSearchQuery : state.setSearchQuery;
+    function renderRow(option) {
+      return /* @__PURE__ */ jsx(
+        MultiSelectRow$1,
+        {
+          name: option.label,
+          checked: state.selectedSet.has(option.value),
+          onToggle: () => {
+            state.toggleOption(option.value);
+          },
+          disabled: option.disabled
+        },
+        String(option.value)
+      );
+    }
+    function renderOptions() {
+      if (asyncState?.loading) {
+        return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-2 py-6", children: [
+          /* @__PURE__ */ jsx(LoaderCircle, { className: "size-4 animate-spin text-muted-foreground" }),
+          /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: "Loading..." })
+        ] });
+      }
+      if (state.filteredOptions.length === 0) {
+        return /* @__PURE__ */ jsx(MultiSelectEmpty$1, {});
+      }
+      if (!state.grouped) {
+        return state.filteredOptions.map(renderRow);
+      }
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        state.grouped.ungrouped.map(renderRow),
+        state.grouped.entries.map((entry) => /* @__PURE__ */ jsxs(MultiSelectGroup$1, { children: [
+          /* @__PURE__ */ jsx(MultiSelectGroupLabel$1, { children: entry.name }),
+          entry.options.map(renderRow)
+        ] }, entry.name))
+      ] });
+    }
+    const hasValues = state.selectedValues.length > 0;
+    const triggerText = hasValues ? `${label} = ${state.selectedValues.length} selected` : label ?? placeholder;
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(MultiSelectRoot$1, { open: state.open, onOpenChange: state.setOpen, disabled, children: [
+        /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+          "button",
+          {
+            ref,
+            id,
+            type: "button",
+            role: "combobox",
+            "aria-expanded": state.open,
+            "aria-haspopup": "listbox",
+            "aria-controls": state.listboxId,
+            "aria-required": required,
+            disabled,
+            onBlur,
+            className: cn(
+              "inline-flex items-center gap-2 rounded-md border px-3 py-2 text-sm whitespace-nowrap shadow-xs outline-none transition-colors disabled:cursor-not-allowed disabled:opacity-50",
+              hasValues ? "bg-primary text-primary-foreground border-primary hover:bg-primary/90" : "border-input bg-transparent hover:bg-accent hover:text-accent-foreground",
+              className
+            ),
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "truncate", children: triggerText }),
+              /* @__PURE__ */ jsx(ChevronDown, { className: "size-4 shrink-0 opacity-50" })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsxs(MultiSelectContent$1, { className: "w-[250px]", children: [
+          /* @__PURE__ */ jsx(MultiSelectSearch$1, { value: searchValue, onValueChange: setSearchValue, placeholder: searchPlaceholder }),
+          /* @__PURE__ */ jsxs(MultiSelectList$1, { id: state.listboxId, children: [
+            renderOptions(),
+            asyncState?.hasMore && /* @__PURE__ */ jsx("div", { ref: asyncState.sentinelRef, className: "h-1" }),
+            asyncState?.loadingMore && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-2 py-2", children: [
+              /* @__PURE__ */ jsx(LoaderCircle, { className: "size-3 animate-spin text-muted-foreground" }),
+              /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "Loading more..." })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(MultiSelectActions$1, { onSelectAll: state.selectAll, onClear: state.clearAll, disabled })
+        ] })
+      ] }),
+      name && state.selectedValues.map((v) => /* @__PURE__ */ jsx("input", { type: "hidden", name, value: String(v) }, String(v)))
+    ] });
+  }
+);
+MultiSelectFilter.displayName = "MultiSelectFilter";
+
+function SingleSelectRoot$1({ open, onOpenChange, disabled, children }) {
+  return /* @__PURE__ */ jsx(
+    Popover,
+    {
+      "data-slot": "single-select",
+      open: disabled ? false : open,
+      onOpenChange: disabled ? void 0 : onOpenChange,
+      children
+    }
+  );
+}
+const SingleSelectTrigger$1 = React.forwardRef(
+  ({ className, children, disabled, open, listboxId, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref,
+        type: "button",
+        "data-slot": "single-select-trigger",
+        role: "combobox",
+        "aria-expanded": open ?? false,
+        "aria-haspopup": "listbox",
+        "aria-controls": listboxId,
+        disabled,
+        className: cn(
+          "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-full items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+          "min-h-9",
+          className
+        ),
+        ...props,
+        children: [
+          children,
+          /* @__PURE__ */ jsx(ChevronDown, { className: "size-4 shrink-0 opacity-50" })
+        ]
+      }
+    ) });
+  }
+);
+SingleSelectTrigger$1.displayName = "SingleSelectTrigger";
+function SingleSelectContent$1({ className, children, align = "start", ...props }) {
+  return /* @__PURE__ */ jsx(
+    PopoverContent,
+    {
+      "data-slot": "single-select-content",
+      align,
+      className: cn("w-[var(--radix-popover-trigger-width)] p-0", className),
+      ...props,
+      children
+    }
+  );
+}
+function SingleSelectSearch$1({ value, onValueChange, placeholder = "Search...", className }) {
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "single-select-search", className: cn("flex items-center gap-2 border-b px-3", className), children: [
+    /* @__PURE__ */ jsx(Search, { className: "size-4 shrink-0 text-muted-foreground" }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "text",
+        "aria-label": "Search options",
+        value,
+        onChange: (e) => onValueChange(e.target.value),
+        placeholder,
+        className: "flex h-9 w-full bg-transparent py-2 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50"
+      }
+    )
+  ] });
+}
+function SingleSelectClear$1({ onClear, disabled, className }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "single-select-clear",
+      className: cn("flex items-center justify-end border-t px-3 py-1.5", className),
+      children: /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          disabled,
+          className: "text-xs font-medium text-muted-foreground hover:text-foreground disabled:pointer-events-none disabled:opacity-50",
+          onClick: onClear,
+          children: "Clear"
+        }
+      )
+    }
+  );
+}
+function SingleSelectList$1({ className, children, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "single-select-list",
+      role: "listbox",
+      className: cn("max-h-60 overflow-y-auto p-1", className),
+      ...props,
+      children
+    }
+  );
+}
+const SingleSelectRow$1 = React.memo(function SingleSelectRow2({
+  name,
+  selected,
+  onSelect,
+  disabled,
+  className
+}) {
+  function handleClick() {
+    if (!disabled) {
+      onSelect();
+    }
+  }
+  function handleKeyDown(e) {
+    if (disabled) return;
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      onSelect();
+    }
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "single-select-row",
+      role: "option",
+      "aria-selected": selected,
+      "aria-disabled": disabled,
+      tabIndex: disabled ? void 0 : 0,
+      className: cn(
+        "relative flex w-full cursor-default items-center rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none",
+        "hover:bg-accent hover:text-accent-foreground",
+        "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        className
+      ),
+      "data-disabled": disabled ? "" : void 0,
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "truncate", children: name }),
+        /* @__PURE__ */ jsx("span", { className: "absolute right-2 flex size-3.5 items-center justify-center", children: selected && /* @__PURE__ */ jsx(Check, { className: "size-4" }) })
+      ]
+    }
+  );
+});
+function SingleSelectGroup$1({ className, children, ...props }) {
+  return /* @__PURE__ */ jsx("div", { "data-slot": "single-select-group", role: "group", className: cn(className), ...props, children });
+}
+function SingleSelectGroupLabel$1({ className, children, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "single-select-group-label",
+      className: cn("text-muted-foreground px-2 py-1.5 text-xs", className),
+      ...props,
+      children
+    }
+  );
+}
+function SingleSelectEmpty$1({ children, className }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "single-select-empty",
+      className: cn("flex items-center justify-center py-6 text-sm text-muted-foreground", className),
+      children: children ?? "No options found."
+    }
+  );
+}
+
+function useSingleSelect({
+  options,
+  groups,
+  value: controlledValue,
+  onChange,
+  defaultValue,
+  remoteSearch
+}) {
+  const isControlled = controlledValue !== void 0;
+  const [internalValue, setInternalValue] = useState(defaultValue ?? "");
+  const selectedValue = isControlled ? controlledValue : internalValue;
+  const [open, setOpen] = useState(false);
+  const [searchQuery, setSearchQuery] = useState("");
+  const listboxId = useId();
+  const optionMap = useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const option of options) {
+      map.set(option.value, option);
+    }
+    return map;
+  }, [options]);
+  const filteredOptions = useMemo(() => {
+    if (remoteSearch || !searchQuery) return options;
+    const lower = searchQuery.toLowerCase();
+    return options.filter((o) => o.label.toLowerCase().includes(lower));
+  }, [options, searchQuery, remoteSearch]);
+  const updateSelection = useCallback(
+    (nextValue) => {
+      if (!isControlled) {
+        setInternalValue(nextValue);
+      }
+      onChange?.(nextValue);
+    },
+    [isControlled, onChange]
+  );
+  const selectOption = useCallback(
+    (optionValue) => {
+      const option = optionMap.get(optionValue);
+      if (option?.disabled) return;
+      updateSelection(optionValue);
+      setOpen(false);
+    },
+    [optionMap, updateSelection]
+  );
+  const clearSelection = useCallback(() => {
+    updateSelection("");
+    setOpen(false);
+  }, [updateSelection]);
+  useEffect(() => {
+    if (!open) {
+      setSearchQuery("");
+    }
+  }, [open]);
+  const selectedOption = selectedValue ? optionMap.get(selectedValue) : void 0;
+  const grouped = useMemo(() => {
+    if (!groups || groups.length === 0) return null;
+    const buckets = /* @__PURE__ */ new Map();
+    for (const g of groups) {
+      buckets.set(g.id, []);
+    }
+    const ungrouped = [];
+    for (const option of filteredOptions) {
+      const bucket = option.groupId != null ? buckets.get(option.groupId) : void 0;
+      if (bucket) {
+        bucket.push(option);
+      } else {
+        ungrouped.push(option);
+      }
+    }
+    const entries = [];
+    for (const g of groups) {
+      const bucket = buckets.get(g.id);
+      if (!bucket || bucket.length === 0) continue;
+      entries.push({ name: g.name, options: bucket });
+    }
+    return { ungrouped, entries };
+  }, [filteredOptions, groups]);
+  return {
+    selectedValue,
+    selectedOption,
+    open,
+    setOpen,
+    searchQuery,
+    setSearchQuery,
+    listboxId,
+    filteredOptions,
+    grouped,
+    selectOption,
+    clearSelection
+  };
+}
+
+const SingleSelect = React.forwardRef(
+  ({
+    label,
+    description,
+    error,
+    placeholder = "Select an option",
+    options,
+    groups,
+    value: controlledValue,
+    onChange,
+    onBlur,
+    name,
+    disabled = false,
+    required,
+    className,
+    id,
+    defaultValue,
+    searchable = false,
+    searchPlaceholder = "Search...",
+    clearable = false,
+    asyncState
+  }, ref) => {
+    const state = useSingleSelect({
+      options: options ?? [],
+      groups,
+      value: controlledValue,
+      onChange,
+      defaultValue,
+      remoteSearch: !!asyncState
+    });
+    const searchValue = asyncState ? asyncState.searchQuery : state.searchQuery;
+    const setSearchValue = asyncState ? asyncState.setSearchQuery : state.setSearchQuery;
+    const showSearch = !!asyncState || searchable;
+    function renderRow(option) {
+      return /* @__PURE__ */ jsx(
+        SingleSelectRow$1,
+        {
+          name: option.label,
+          selected: state.selectedValue === option.value,
+          onSelect: () => {
+            state.selectOption(option.value);
+          },
+          disabled: option.disabled
+        },
+        String(option.value)
+      );
+    }
+    function renderOptions() {
+      if (asyncState?.loading) {
+        return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-2 py-6", children: [
+          /* @__PURE__ */ jsx(LoaderCircle, { className: "size-4 animate-spin text-muted-foreground" }),
+          /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: "Loading..." })
+        ] });
+      }
+      if (state.filteredOptions.length === 0) {
+        return /* @__PURE__ */ jsx(SingleSelectEmpty$1, {});
+      }
+      if (!state.grouped) {
+        return state.filteredOptions.map(renderRow);
+      }
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        state.grouped.ungrouped.map(renderRow),
+        state.grouped.entries.map((entry) => /* @__PURE__ */ jsxs(SingleSelectGroup$1, { children: [
+          /* @__PURE__ */ jsx(SingleSelectGroupLabel$1, { children: entry.name }),
+          entry.options.map(renderRow)
+        ] }, entry.name))
+      ] });
+    }
+    return /* @__PURE__ */ jsxs(Field, { children: [
+      label && /* @__PURE__ */ jsx(FieldLabel, { children: label }),
+      /* @__PURE__ */ jsxs(SingleSelectRoot$1, { open: state.open, onOpenChange: state.setOpen, disabled, children: [
+        /* @__PURE__ */ jsx(
+          SingleSelectTrigger$1,
+          {
+            ref,
+            id,
+            open: state.open,
+            listboxId: state.listboxId,
+            "aria-invalid": !!error,
+            "aria-required": required,
+            disabled,
+            onBlur,
+            className: cn("w-full", className),
+            children: /* @__PURE__ */ jsx("span", { className: "flex flex-1 items-center overflow-hidden", children: state.selectedOption ? /* @__PURE__ */ jsx("span", { className: "truncate", children: state.selectedOption.label }) : /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: placeholder }) })
+          }
+        ),
+        /* @__PURE__ */ jsxs(SingleSelectContent$1, { children: [
+          showSearch && /* @__PURE__ */ jsx(SingleSelectSearch$1, { value: searchValue, onValueChange: setSearchValue, placeholder: searchPlaceholder }),
+          /* @__PURE__ */ jsxs(SingleSelectList$1, { id: state.listboxId, children: [
+            renderOptions(),
+            asyncState?.hasMore && /* @__PURE__ */ jsx("div", { ref: asyncState.sentinelRef, className: "h-1" }),
+            asyncState?.loadingMore && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-2 py-2", children: [
+              /* @__PURE__ */ jsx(LoaderCircle, { className: "size-3 animate-spin text-muted-foreground" }),
+              /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "Loading more..." })
+            ] })
+          ] }),
+          clearable && /* @__PURE__ */ jsx(SingleSelectClear$1, { onClear: state.clearSelection, disabled: !state.selectedValue })
+        ] })
+      ] }),
+      name && state.selectedValue && /* @__PURE__ */ jsx("input", { type: "hidden", name, value: String(state.selectedValue) }),
+      description && !error && /* @__PURE__ */ jsx(FieldDescription, { children: description }),
+      error && /* @__PURE__ */ jsx(FieldError, { children: error })
+    ] });
+  }
+);
+SingleSelect.displayName = "SingleSelect";
+
+const SingleSelectFilter = React.forwardRef(
+  ({
+    label,
+    placeholder,
+    options,
+    groups,
+    value: controlledValue,
+    onChange,
+    onBlur,
+    name,
+    disabled = false,
+    required,
+    className,
+    id,
+    defaultValue,
+    searchPlaceholder = "Search...",
+    asyncState
+  }, ref) => {
+    const state = useSingleSelect({
+      options: options ?? [],
+      groups,
+      value: controlledValue,
+      onChange,
+      defaultValue,
+      remoteSearch: !!asyncState
+    });
+    const searchValue = asyncState ? asyncState.searchQuery : state.searchQuery;
+    const setSearchValue = asyncState ? asyncState.setSearchQuery : state.setSearchQuery;
+    function renderRow(option) {
+      return /* @__PURE__ */ jsx(
+        SingleSelectRow$1,
+        {
+          name: option.label,
+          selected: state.selectedValue === option.value,
+          onSelect: () => {
+            state.selectOption(option.value);
+          },
+          disabled: option.disabled
+        },
+        String(option.value)
+      );
+    }
+    function renderOptions() {
+      if (asyncState?.loading) {
+        return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-2 py-6", children: [
+          /* @__PURE__ */ jsx(LoaderCircle, { className: "size-4 animate-spin text-muted-foreground" }),
+          /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: "Loading..." })
+        ] });
+      }
+      if (state.filteredOptions.length === 0) {
+        return /* @__PURE__ */ jsx(SingleSelectEmpty$1, {});
+      }
+      if (!state.grouped) {
+        return state.filteredOptions.map(renderRow);
+      }
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        state.grouped.ungrouped.map(renderRow),
+        state.grouped.entries.map((entry) => /* @__PURE__ */ jsxs(SingleSelectGroup$1, { children: [
+          /* @__PURE__ */ jsx(SingleSelectGroupLabel$1, { children: entry.name }),
+          entry.options.map(renderRow)
+        ] }, entry.name))
+      ] });
+    }
+    const triggerText = state.selectedOption ? `${label} = ${state.selectedOption.label}` : label ?? placeholder;
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(SingleSelectRoot$1, { open: state.open, onOpenChange: state.setOpen, disabled, children: [
+        /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+          "button",
+          {
+            ref,
+            id,
+            type: "button",
+            role: "combobox",
+            "aria-expanded": state.open,
+            "aria-haspopup": "listbox",
+            "aria-controls": state.listboxId,
+            "aria-required": required,
+            disabled,
+            onBlur,
+            className: cn(
+              "inline-flex items-center gap-2 rounded-md border px-3 py-2 text-sm whitespace-nowrap shadow-xs outline-none transition-colors disabled:cursor-not-allowed disabled:opacity-50",
+              state.selectedOption ? "bg-primary text-primary-foreground border-primary hover:bg-primary/90" : "border-input bg-transparent hover:bg-accent hover:text-accent-foreground",
+              className
+            ),
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "truncate", children: triggerText }),
+              /* @__PURE__ */ jsx(ChevronDown, { className: "size-4 shrink-0 opacity-50" })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsxs(SingleSelectContent$1, { className: "w-[250px]", children: [
+          /* @__PURE__ */ jsx(SingleSelectSearch$1, { value: searchValue, onValueChange: setSearchValue, placeholder: searchPlaceholder }),
+          /* @__PURE__ */ jsxs(SingleSelectList$1, { id: state.listboxId, children: [
+            renderOptions(),
+            asyncState?.hasMore && /* @__PURE__ */ jsx("div", { ref: asyncState.sentinelRef, className: "h-1" }),
+            asyncState?.loadingMore && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-2 py-2", children: [
+              /* @__PURE__ */ jsx(LoaderCircle, { className: "size-3 animate-spin text-muted-foreground" }),
+              /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "Loading more..." })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(SingleSelectClear$1, { onClear: state.clearSelection, disabled: !state.selectedValue })
+        ] })
+      ] }),
+      name && state.selectedValue && /* @__PURE__ */ jsx("input", { type: "hidden", name, value: String(state.selectedValue) })
+    ] });
+  }
+);
+SingleSelectFilter.displayName = "SingleSelectFilter";
+
+// src/observe.ts
+var observerMap = /* @__PURE__ */ new Map();
+var RootIds = /* @__PURE__ */ new WeakMap();
+var rootId = 0;
+var unsupportedValue;
+function getRootId(root) {
+  if (!root) return "0";
+  if (RootIds.has(root)) return RootIds.get(root);
+  rootId += 1;
+  RootIds.set(root, rootId.toString());
+  return RootIds.get(root);
+}
+function optionsToId(options) {
+  return Object.keys(options).sort().filter(
+    (key) => options[key] !== void 0
+  ).map((key) => {
+    return `${key}_${key === "root" ? getRootId(options.root) : options[key]}`;
+  }).toString();
+}
+function createObserver(options) {
+  const id = optionsToId(options);
+  let instance = observerMap.get(id);
+  if (!instance) {
+    const elements = /* @__PURE__ */ new Map();
+    let thresholds;
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach((entry) => {
+        var _a2;
+        const inView = entry.isIntersecting && thresholds.some((threshold) => entry.intersectionRatio >= threshold);
+        if (options.trackVisibility && typeof entry.isVisible === "undefined") {
+          entry.isVisible = inView;
+        }
+        (_a2 = elements.get(entry.target)) == null ? void 0 : _a2.forEach((callback) => {
+          callback(inView, entry);
+        });
+      });
+    }, options);
+    thresholds = observer.thresholds || (Array.isArray(options.threshold) ? options.threshold : [options.threshold || 0]);
+    instance = {
+      id,
+      observer,
+      elements
+    };
+    observerMap.set(id, instance);
+  }
+  return instance;
+}
+function observe(element, callback, options = {}, fallbackInView = unsupportedValue) {
+  if (typeof window.IntersectionObserver === "undefined" && fallbackInView !== void 0) {
+    const bounds = element.getBoundingClientRect();
+    callback(fallbackInView, {
+      isIntersecting: fallbackInView,
+      target: element,
+      intersectionRatio: typeof options.threshold === "number" ? options.threshold : 0,
+      time: 0,
+      boundingClientRect: bounds,
+      intersectionRect: bounds,
+      rootBounds: bounds
+    });
+    return () => {
+    };
+  }
+  const { id, observer, elements } = createObserver(options);
+  const callbacks = elements.get(element) || [];
+  if (!elements.has(element)) {
+    elements.set(element, callbacks);
+  }
+  callbacks.push(callback);
+  observer.observe(element);
+  return function unobserve() {
+    callbacks.splice(callbacks.indexOf(callback), 1);
+    if (callbacks.length === 0) {
+      elements.delete(element);
+      observer.unobserve(element);
+    }
+    if (elements.size === 0) {
+      observer.disconnect();
+      observerMap.delete(id);
+    }
+  };
+}
+function useInView({
+  threshold,
+  delay,
+  trackVisibility,
+  rootMargin,
+  root,
+  triggerOnce,
+  skip,
+  initialInView,
+  fallbackInView,
+  onChange
+} = {}) {
+  var _a2;
+  const [ref, setRef] = React.useState(null);
+  const callback = React.useRef(onChange);
+  const lastInViewRef = React.useRef(initialInView);
+  const [state, setState] = React.useState({
+    inView: !!initialInView,
+    entry: void 0
+  });
+  callback.current = onChange;
+  React.useEffect(
+    () => {
+      if (lastInViewRef.current === void 0) {
+        lastInViewRef.current = initialInView;
+      }
+      if (skip || !ref) return;
+      let unobserve;
+      unobserve = observe(
+        ref,
+        (inView, entry) => {
+          const previousInView = lastInViewRef.current;
+          lastInViewRef.current = inView;
+          if (previousInView === void 0 && !inView) {
+            return;
+          }
+          setState({
+            inView,
+            entry
+          });
+          if (callback.current) callback.current(inView, entry);
+          if (entry.isIntersecting && triggerOnce && unobserve) {
+            unobserve();
+            unobserve = void 0;
+          }
+        },
+        {
+          root,
+          rootMargin,
+          threshold,
+          // @ts-expect-error
+          trackVisibility,
+          delay
+        },
+        fallbackInView
+      );
+      return () => {
+        if (unobserve) {
+          unobserve();
+        }
+      };
+    },
+    // We break the rule here, because we aren't including the actual `threshold` variable
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+      // If the threshold is an array, convert it to a string, so it won't change between renders.
+      Array.isArray(threshold) ? threshold.toString() : threshold,
+      ref,
+      root,
+      rootMargin,
+      triggerOnce,
+      skip,
+      trackVisibility,
+      fallbackInView,
+      delay
+    ]
+  );
+  const entryTarget = (_a2 = state.entry) == null ? void 0 : _a2.target;
+  const previousEntryTarget = React.useRef(void 0);
+  if (!ref && entryTarget && !triggerOnce && !skip && previousEntryTarget.current !== entryTarget) {
+    previousEntryTarget.current = entryTarget;
+    setState({
+      inView: !!initialInView,
+      entry: void 0
+    });
+    lastInViewRef.current = initialInView;
+  }
+  const result = [setRef, state.inView, state.entry];
+  result.ref = result[0];
+  result.inView = result[1];
+  result.entry = result[2];
+  return result;
+}
+
+const NOOP_REF = () => {
+};
+function stableStringify(obj) {
+  if (!obj) return "";
+  return JSON.stringify(obj, Object.keys(obj).sort());
+}
+function useSelect({
+  options: staticOptions,
+  groups: staticGroups,
+  optionsEndpoint,
+  searchDebounceMs = 300,
+  limit = 20,
+  fieldKeys,
+  params,
+  selectedValues
+}) {
+  const isAsync = !!optionsEndpoint;
+  const instanceId = useId();
+  const [searchQuery, setSearchQuery] = useState("");
+  const [debouncedSearch, setDebouncedSearch] = useState("");
+  const debounceRef = useRef(null);
+  useEffect(() => {
+    if (!isAsync) return;
+    if (debounceRef.current) clearTimeout(debounceRef.current);
+    debounceRef.current = setTimeout(() => {
+      setDebouncedSearch(searchQuery);
+    }, searchDebounceMs);
+    return () => {
+      if (debounceRef.current) clearTimeout(debounceRef.current);
+    };
+  }, [searchQuery, searchDebounceMs, isAsync]);
+  const serializedValues = useMemo(
+    () => selectedValues && selectedValues.length > 0 ? selectedValues.filter((v) => typeof v !== "boolean").join(",") : void 0,
+    [selectedValues]
+  );
+  const { data: resolvedSelected } = useQuery({
+    queryKey: ["select-resolve", instanceId, optionsEndpoint, JSON.stringify(selectedValues)],
+    queryFn: () => axios.get(optionsEndpoint ?? "", {
+      params: { values: serializedValues, ...fieldKeys, ...params },
+      showSuccessToast: false,
+      showErrorToast: false
+    }).then((r) => r.data),
+    enabled: isAsync && (selectedValues?.length ?? 0) > 0,
+    staleTime: 5 * 6e4,
+    placeholderData: keepPreviousData
+  });
+  const { data, isFetching, isFetchingNextPage, fetchNextPage, hasNextPage } = useInfiniteQuery({
+    queryKey: [
+      "select-search",
+      instanceId,
+      optionsEndpoint,
+      debouncedSearch,
+      stableStringify(fieldKeys),
+      stableStringify(params)
+    ],
+    queryFn: ({ pageParam = 0 }) => axios.get(optionsEndpoint ?? "", {
+      params: {
+        search: debouncedSearch || void 0,
+        limit,
+        offset: pageParam,
+        excludeIds: serializedValues,
+        ...fieldKeys,
+        ...params
+      },
+      showSuccessToast: false,
+      showErrorToast: false
+    }).then((r) => r.data),
+    getNextPageParam: (lastPage, _allPages, lastPageParam) => lastPage.hasMore ? lastPageParam + limit : void 0,
+    initialPageParam: 0,
+    enabled: isAsync,
+    placeholderData: keepPreviousData
+  });
+  const fetchedOptions = useMemo(() => {
+    const searchResults = data?.pages.flatMap((p) => p.options) ?? [];
+    const selected = resolvedSelected?.options ?? [];
+    if (selected.length === 0) return searchResults;
+    const selectedIdSet = new Set(selected.map((o) => o.value));
+    const dedupedSearch = searchResults.filter((o) => !selectedIdSet.has(o.value));
+    return [...selected, ...dedupedSearch];
+  }, [resolvedSelected, data]);
+  const fetchedGroups = data?.pages[0]?.groups ?? staticGroups ?? [];
+  const { ref: sentinelRef, inView } = useInView();
+  useEffect(() => {
+    if (inView && hasNextPage && !isFetchingNextPage) {
+      fetchNextPage();
+    }
+  }, [inView, hasNextPage, isFetchingNextPage, fetchNextPage]);
+  if (!isAsync) {
+    return {
+      options: staticOptions ?? [],
+      groups: staticGroups ?? [],
+      loading: false,
+      loadingMore: false,
+      hasMore: false,
+      searchQuery,
+      setSearchQuery,
+      sentinelRef: NOOP_REF
+    };
+  }
+  return {
+    options: fetchedOptions,
+    groups: fetchedGroups,
+    loading: isFetching && !isFetchingNextPage,
+    loadingMore: isFetchingNextPage,
+    hasMore: hasNextPage ?? false,
+    searchQuery,
+    setSearchQuery,
+    sentinelRef
+  };
+}
+
+const Select = React.forwardRef((props, ref) => {
+  const { multiple, type = "default", optionsEndpoint, searchDebounceMs, limit, fieldKeys, params, ...rest } = props;
+  const selectData = useSelect({
+    options: rest.options,
+    groups: rest.groups,
+    optionsEndpoint,
+    searchDebounceMs,
+    limit,
+    fieldKeys,
+    params,
+    selectedValues: rest.value != null ? Array.isArray(rest.value) ? rest.value : [rest.value] : void 0
+  });
+  const isAsync = !!optionsEndpoint;
+  const asyncState = isAsync ? {
+    loading: selectData.loading,
+    loadingMore: selectData.loadingMore,
+    hasMore: selectData.hasMore,
+    searchQuery: selectData.searchQuery,
+    setSearchQuery: selectData.setSearchQuery,
+    sentinelRef: selectData.sentinelRef
+  } : void 0;
+  const childProps = {
+    ...rest,
+    options: selectData.options,
+    groups: selectData.groups,
+    asyncState
+  };
+  if (multiple) {
+    if (type === "filter") return /* @__PURE__ */ jsx(MultiSelectFilter, { ref, ...childProps });
+    return /* @__PURE__ */ jsx(MultiSelect, { ref, ...childProps });
+  }
+  if (type === "filter") return /* @__PURE__ */ jsx(SingleSelectFilter, { ref, ...childProps });
+  return /* @__PURE__ */ jsx(SingleSelect, { ref, ...childProps });
+});
+Select.displayName = "Select";
+
+const MultiSelectRoot = MultiSelectRoot$1;
+const MultiSelectTrigger = MultiSelectTrigger$1;
+const MultiSelectContent = MultiSelectContent$1;
+const MultiSelectSearch = MultiSelectSearch$1;
+const MultiSelectActions = MultiSelectActions$1;
+const MultiSelectGroup = MultiSelectGroup$1;
+const MultiSelectGroupLabel = MultiSelectGroupLabel$1;
+const MultiSelectList = MultiSelectList$1;
+const MultiSelectRow = MultiSelectRow$1;
+const MultiSelectEmpty = MultiSelectEmpty$1;
+const SingleSelectRoot = SingleSelectRoot$1;
+const SingleSelectTrigger = SingleSelectTrigger$1;
+const SingleSelectContent = SingleSelectContent$1;
+const SingleSelectSearch = SingleSelectSearch$1;
+const SingleSelectClear = SingleSelectClear$1;
+const SingleSelectGroup = SingleSelectGroup$1;
+const SingleSelectGroupLabel = SingleSelectGroupLabel$1;
+const SingleSelectList = SingleSelectList$1;
+const SingleSelectRow = SingleSelectRow$1;
+const SingleSelectEmpty = SingleSelectEmpty$1;
+
+export { MultiSelect, MultiSelectActions, MultiSelectContent, MultiSelectEmpty, MultiSelectFilter, MultiSelectGroup, MultiSelectGroupLabel, MultiSelectList, MultiSelectRoot, MultiSelectRow, MultiSelectSearch, MultiSelectTrigger, Select, SingleSelect, SingleSelectClear, SingleSelectContent, SingleSelectEmpty, SingleSelectFilter, SingleSelectGroup, SingleSelectGroupLabel, SingleSelectList, SingleSelectRoot, SingleSelectRow, SingleSelectSearch, SingleSelectTrigger, useSelect };
+//# sourceMappingURL=Select.js.map