@vritti/quantum-ui 0.2.10 → 0.3.0

package/dist/components/Select.js

@@ -1,1358 +1,8 @@
-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";
+import { a as MultiSelectActions$1, b as MultiSelectContent$1, c as MultiSelectEmpty$1, d as MultiSelectGroup$1, e as MultiSelectGroupLabel$1, f as MultiSelectList$1, g as MultiSelectRoot$1, h as MultiSelectRow$1, i as MultiSelectSearch$1, j as MultiSelectTrigger$1 } from '../Select.js';
+export { M as MultiSelect, S as Select, u as useSelect } from '../Select.js';
+export { M as MultiSelectFilter, S as SelectFilter, a as SingleSelectFilter } from '../SelectFilter.js';
+import { a as SingleSelectClear$1, b as SingleSelectContent$1, c as SingleSelectEmpty$1, d as SingleSelectGroup$1, e as SingleSelectGroupLabel$1, f as SingleSelectList$1, g as SingleSelectRoot$1, h as SingleSelectRow$1, i as SingleSelectSearch$1, j as SingleSelectTrigger$1 } from '../SingleSelect.js';
+export { S as SingleSelect } from '../SingleSelect.js';
 
 const MultiSelectRoot = MultiSelectRoot$1;
 const MultiSelectTrigger = MultiSelectTrigger$1;
@@ -1375,5 +25,5 @@ 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 };
+export { MultiSelectActions, MultiSelectContent, MultiSelectEmpty, MultiSelectGroup, MultiSelectGroupLabel, MultiSelectList, MultiSelectRoot, MultiSelectRow, MultiSelectSearch, MultiSelectTrigger, SingleSelectClear, SingleSelectContent, SingleSelectEmpty, SingleSelectGroup, SingleSelectGroupLabel, SingleSelectList, SingleSelectRoot, SingleSelectRow, SingleSelectSearch, SingleSelectTrigger };
 //# sourceMappingURL=Select.js.map