@enonic/ui 0.12.1 → 0.13.0

package/dist/enonic-ui.es.js

@@ -1,5 +1,5 @@
 import { options, Fragment } from "preact";
-import { createContext, useContext, useId, forwardRef, useState, useCallback, useMemo, useEffect, createElement, useRef, isValidElement, Children, createPortal as createPortal$1 } from "react";
+import { createContext, useContext, useId, useCallback, forwardRef, useState, useMemo, useEffect, createElement, useRef, isValidElement, Children, createPortal as createPortal$1 } from "react";
 import { Slot, Root } from "@radix-ui/react-slot";
 import { FocusTrap } from "focus-trap-react";
 import { createPortal } from "react-dom";
@@ -25,6 +25,18 @@ const useAvatar = () => {
   }
   return ctx;
 };
+const ComboboxContext = createContext(null);
+const ComboboxProvider = ({ value, children }) => {
+  return /* @__PURE__ */ u(ComboboxContext.Provider, { value, children });
+};
+ComboboxProvider.displayName = "ComboboxProvider";
+const useCombobox = () => {
+  const ctx = useContext(ComboboxContext);
+  if (!ctx) {
+    throw new Error("useCombobox must be used within a ComboboxProvider");
+  }
+  return ctx;
+};
 const DialogContext = createContext(void 0);
 const DialogProvider = ({ value, children }) => {
   return /* @__PURE__ */ u(DialogContext.Provider, { value, children });
@@ -42,14 +54,10 @@ const IdProvider = ({ children, prefix }) => {
   return /* @__PURE__ */ u(IdContext.Provider, { value: { prefix }, children });
 };
 IdProvider.displayName = "IdProvider";
-const usePrefixedId = (providedId) => {
-  const baseId = useId();
+const usePrefixedId = (providedId, prefix) => {
+  const baseId = providedId ?? useId();
   const context = useContext(IdContext);
-  if (providedId) {
-    return providedId;
-  }
-  const id = context?.prefix ? `${context.prefix}-${baseId}` : baseId;
-  return id;
+  return [context?.prefix, prefix, baseId].filter(Boolean).join("-");
 };
 const ListboxContext = createContext(null);
 const ListboxProvider = ({ value, children }) => {
@@ -63,6 +71,17 @@ const useListbox = () => {
   }
   return ctx;
 };
+const MenuContext = createContext(void 0);
+const MenuProvider = ({ value, children }) => {
+  return /* @__PURE__ */ u(MenuContext.Provider, { value, children });
+};
+const useMenu = () => {
+  const context = useContext(MenuContext);
+  if (!context) {
+    throw new Error("useMenu must be used within a MenuProvider");
+  }
+  return context;
+};
 function r(e) {
   var t, f2, n = "";
   if ("string" == typeof e || "number" == typeof e) n += e;
@@ -3030,6 +3049,22 @@ const twMerge = /* @__PURE__ */ createTailwindMerge(getDefaultConfig);
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
+function setRef(ref, value) {
+  if (!ref) return;
+  if (typeof ref === "function") {
+    ref(value);
+  } else {
+    try {
+      ref.current = value;
+    } catch {
+    }
+  }
+}
+function useComposedRefs(...refs) {
+  return useCallback((node) => {
+    refs.forEach((ref) => setRef(ref, node));
+  }, refs);
+}
 function isSignal(v) {
   return !!(v && typeof v === "object" && "value" in v && "peek" in v && typeof v.peek === "function" && "subscribe" in v && typeof v.subscribe === "function");
 }
@@ -3207,10 +3242,10 @@ const buttonVariants = cva(
   {
     variants: {
       variant: {
-        text: "bg-btn-primary hover:bg-btn-primary-hover active:bg-btn-active active:text-rev dark:active:text-main",
-        filled: "bg-btn-secondary hover:bg-btn-secondary-hover active:bg-btn-active active:text-rev dark:active:text-main",
-        solid: "bg-btn-tertiary text-alt hover:bg-btn-tertiary-hover active:bg-btn-active dark:active:text-main",
-        outline: "bg-btn-primary hover:bg-btn-primary-hover active:bg-btn-active active:text-rev dark:active:text-main border border-bdr-strong"
+        text: "bg-btn-primary hover:bg-btn-primary-hover active:bg-btn-active active:text-alt",
+        filled: "bg-btn-secondary hover:bg-btn-secondary-hover active:bg-btn-active active:text-alt",
+        solid: "bg-btn-tertiary text-alt hover:bg-btn-tertiary-hover active:bg-btn-active",
+        outline: "bg-btn-primary hover:bg-btn-primary-hover active:bg-btn-active active:text-alt border border-bdr-strong"
       },
       size: {
         sm: "h-9 px-3.5 gap-2 text-sm",
@@ -3377,19 +3412,27 @@ const createLucideIcon = (iconName, iconNode) => {
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$7 = [
+const __iconNode$8 = [
   ["path", { d: "M5 12h14", key: "1ays0h" }],
   ["path", { d: "m12 5 7 7-7 7", key: "xquz4c" }]
 ];
-const ArrowRight = createLucideIcon("arrow-right", __iconNode$7);
+const ArrowRight = createLucideIcon("arrow-right", __iconNode$8);
+/**
+ * @license lucide-react v0.545.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$7 = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]];
+const Check = createLucideIcon("check", __iconNode$7);
 /**
  * @license lucide-react v0.545.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$6 = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]];
-const Check = createLucideIcon("check", __iconNode$6);
+const __iconNode$6 = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
+const ChevronDown = createLucideIcon("chevron-down", __iconNode$6);
 /**
  * @license lucide-react v0.545.0 - ISC
  *
@@ -3644,6 +3687,328 @@ const IconButton = forwardRef(
   }
 );
 IconButton.displayName = "IconButton";
+const ComboboxRoot = ({
+  children,
+  open: controlledOpen,
+  onOpenChange,
+  closeOnBlur = true,
+  value,
+  onChange,
+  disabled = false,
+  error = false,
+  selectionMode = "single",
+  selection: controlledSelection,
+  onSelectionChange
+}) => {
+  const baseId = usePrefixedId();
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(false);
+  const isOpenControlled = controlledOpen !== void 0;
+  const open = isOpenControlled ? controlledOpen : uncontrolledOpen;
+  const setOpen = useCallback(
+    (next) => {
+      if (!isOpenControlled) {
+        setUncontrolledOpen(next);
+      }
+      onOpenChange?.(next);
+    },
+    [isOpenControlled, onOpenChange]
+  );
+  const [uncontrolledSelection, setUncontrolledSelection] = useState([]);
+  const isSelectionControlled = controlledSelection !== void 0;
+  const selectedItems = isSelectionControlled ? controlledSelection : uncontrolledSelection;
+  const onSelectionChangeInner = useCallback(
+    (newSelection) => {
+      if (!isSelectionControlled) {
+        setUncontrolledSelection(newSelection);
+      }
+      onSelectionChange?.(newSelection);
+      if (selectionMode === "single") {
+        setOpen(false);
+      }
+    },
+    [isSelectionControlled, selectionMode, setOpen, onSelectionChange, selectedItems]
+  );
+  const [uncontrolledInput, setUncontrolledInput] = useState("");
+  const isInputControlled = value !== void 0;
+  const inputValue = isInputControlled ? value : uncontrolledInput;
+  const setInputValue = useCallback(
+    (next) => {
+      if (!isInputControlled) {
+        setUncontrolledInput(next);
+      }
+      onChange?.(next);
+      setOpen(true);
+    },
+    [isInputControlled, onChange, setOpen]
+  );
+  const toggleValueSelection = useCallback(
+    (value2) => {
+      let newSelection = [];
+      if (selectionMode === "multiple") {
+        if (selectedItems.includes(value2)) {
+          newSelection = selectedItems.filter((item) => item !== value2);
+        } else {
+          newSelection = [...selectedItems, value2];
+        }
+      } else {
+        newSelection = [value2];
+      }
+      onSelectionChangeInner(newSelection);
+    },
+    [selectionMode, selectedItems, onSelectionChangeInner]
+  );
+  const [active, setActive] = useState(void 0);
+  const innerRef = useRef(null);
+  const getItems = useCallback(() => {
+    const container = innerRef.current;
+    if (!container) {
+      return [];
+    }
+    const optionNodes = container.querySelectorAll('[role="option"][data-value]');
+    return Array.from(optionNodes).map((node) => node.dataset.value).filter((v) => v !== void 0);
+  }, []);
+  const moveActive = useCallback(
+    (delta) => {
+      const items = getItems();
+      if (!items.length) {
+        return;
+      }
+      const currentIndex = active ? items.indexOf(active) : -1;
+      const newIndex = Math.max(0, Math.min(items.length - 1, currentIndex + delta));
+      setActive(items[newIndex]);
+    },
+    [active, setActive, getItems]
+  );
+  const keyHandler = useCallback(
+    (e) => {
+      if (disabled) {
+        return;
+      }
+      const items = getItems();
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        setOpen(true);
+        moveActive(1);
+      } else if (e.key === "ArrowUp") {
+        setOpen(true);
+        moveActive(-1);
+      } else if (e.key === "Home") {
+        e.preventDefault();
+        setActive(items[0]);
+      } else if (e.key === "End") {
+        e.preventDefault();
+        setActive(items[items.length - 1]);
+      } else if (e.key === "Enter") {
+        if (open) {
+          e.preventDefault();
+          if (active) {
+            toggleValueSelection(active);
+          }
+          setOpen(false);
+          setActive(items[0]);
+        }
+      } else if (e.key === "Escape") {
+        setOpen(false);
+        setActive(items[0]);
+      }
+    },
+    [disabled, moveActive, setOpen, toggleValueSelection, open]
+  );
+  useEffect(() => {
+    if (open && active === void 0) {
+      const items = getItems();
+      if (items.length > 0) {
+        setActive(items[0]);
+      }
+    }
+  }, [open, active, getItems]);
+  const context = useMemo(
+    () => ({
+      open,
+      setOpen,
+      inputValue,
+      setInputValue,
+      baseId,
+      active,
+      disabled,
+      error,
+      closeOnBlur,
+      keyHandler,
+      selection: selectedItems
+    }),
+    [open, setOpen, closeOnBlur, keyHandler, inputValue, setInputValue, active, baseId, disabled, error, selectedItems]
+  );
+  return /* @__PURE__ */ u("div", { ref: innerRef, children: /* @__PURE__ */ u(ComboboxProvider, { value: context, children: /* @__PURE__ */ u(
+    Listbox.Root,
+    {
+      selectionMode,
+      selection: selectedItems,
+      onSelectionChange: onSelectionChangeInner,
+      disabled,
+      active,
+      focusable: false,
+      baseId,
+      setActive,
+      keyHandler,
+      children
+    }
+  ) }) });
+};
+ComboboxRoot.displayName = "Combobox.Root";
+const ComboboxContent = forwardRef(
+  ({ className, children }, ref) => {
+    const { setOpen, baseId, closeOnBlur } = useCombobox();
+    const innerRef = useRef(null);
+    const handleFocusOut = closeOnBlur ? useCallback(
+      (e) => {
+        const nextTarget = e.relatedTarget;
+        if (nextTarget && innerRef.current?.contains(nextTarget)) {
+          return;
+        }
+        setOpen(false);
+      },
+      [baseId, setOpen]
+    ) : void 0;
+    return (
+      // eslint-disable-next-line react/no-unknown-property
+      /* @__PURE__ */ u("div", { onFocusOut: handleFocusOut, ref: useComposedRefs(ref, innerRef), className, children })
+    );
+  }
+);
+const comboboxControlVariants = cva(
+  [
+    "flex items-center",
+    "h-12 rounded-sm border bg-surface-neutral",
+    "focus-within:outline-none focus-within:ring-3 focus-within:ring-ring/50 focus-within:ring-offset-0",
+    "transition-highlight"
+  ],
+  {
+    variants: {
+      error: {
+        true: "border-error focus-within:border-error focus-within:ring-error/50",
+        false: "border-bdr-subtle focus-within:border-bdr-strong"
+      },
+      open: {
+        true: "border-bdr-strong",
+        false: null
+      },
+      disabled: {
+        true: "pointer-events-none select-none opacity-30",
+        false: null
+      }
+    },
+    defaultVariants: {
+      error: false,
+      open: false,
+      disabled: false
+    }
+  }
+);
+const ComboboxControl = ({ children, className }) => {
+  const { open, disabled, error } = useCombobox();
+  return /* @__PURE__ */ u(
+    "div",
+    {
+      className: cn(
+        comboboxControlVariants({
+          error,
+          open,
+          disabled
+        }),
+        className
+      ),
+      "data-open": open ? "true" : void 0,
+      children
+    }
+  );
+};
+ComboboxControl.displayName = "Combobox.Control";
+const ComboboxInput = forwardRef(
+  ({ className, placeholder, ...props }, ref) => {
+    const { inputValue, setInputValue, open, keyHandler, selection, baseId, active, disabled } = useCombobox();
+    const innerRef = useRef(null);
+    useEffect(() => {
+      if (open && !disabled) {
+        innerRef.current?.focus();
+      }
+    }, [open, selection, disabled]);
+    return /* @__PURE__ */ u(
+      SearchInput,
+      {
+        ref: useComposedRefs(ref, innerRef),
+        id: `${baseId}-input`,
+        className: "border-none focus:outline-none focus-within:outline-none h-auto focus-within:ring-0 grow",
+        value: inputValue,
+        onChange: setInputValue,
+        onKeyDown: keyHandler,
+        placeholder,
+        disabled,
+        "aria-disabled": disabled,
+        role: "combobox",
+        "aria-autocomplete": "list",
+        "aria-expanded": open,
+        "aria-haspopup": "listbox",
+        "aria-controls": `${baseId}-listbox`,
+        "aria-activedescendant": active ? `${baseId}-listbox-option-${active}` : void 0,
+        showClearButton: false,
+        ...props
+      }
+    );
+  }
+);
+ComboboxInput.displayName = "Combobox.Input";
+const ComboboxToggle = ({ className }) => {
+  const { open, setOpen, disabled } = useCombobox();
+  return /* @__PURE__ */ u(
+    IconButton,
+    {
+      type: "button",
+      variant: "text",
+      size: "md",
+      icon: ChevronDown,
+      "aria-label": "Toggle",
+      onClick: () => {
+        if (disabled) {
+          return;
+        }
+        setOpen(!open);
+      },
+      disabled,
+      tabIndex: -1,
+      className: cn(
+        "h-10 w-10 text-subtle transition-transform hover:bg-surface-primary-hover mr-1",
+        open && "rotate-180",
+        className
+      )
+    }
+  );
+};
+ComboboxToggle.displayName = "Combobox.Toggle";
+const ComboboxPopup = ({ children, className }) => {
+  const { open } = useCombobox();
+  if (!open) {
+    return null;
+  }
+  return /* @__PURE__ */ u(
+    "div",
+    {
+      className: cn(
+        "absolute left-0 right-0 z-50 mt-1 rounded-sm bg-surface-neutral shadow-lg ring-1 ring-bdr-subtle",
+        className
+      ),
+      children
+    }
+  );
+};
+ComboboxPopup.displayName = "Combobox.Popup";
+const Combobox = Object.assign(ComboboxRoot, {
+  Root: ComboboxRoot,
+  Content: ComboboxContent,
+  Control: ComboboxControl,
+  Input: ComboboxInput,
+  Toggle: ComboboxToggle,
+  Popup: ComboboxPopup
+});
 const useScrollLock = (lock, element) => {
   useEffect(() => {
     if (!lock) {
@@ -3680,13 +4045,23 @@ const DialogRoot = ({
 };
 DialogRoot.displayName = "Dialog.Root";
 const DialogTrigger = forwardRef(
-  ({ children, onClick, ...props }, ref) => {
+  ({ asChild, children, onClick, ...props }, ref) => {
     const { setOpen } = useDialog();
     const handleClick = (e) => {
       onClick?.(e);
       setOpen(true);
     };
-    return /* @__PURE__ */ u("button", { ref, type: "button", onClick: handleClick, ...props, children });
+    const Comp = asChild ? Slot : "button";
+    return /* @__PURE__ */ u(
+      Comp,
+      {
+        ref,
+        type: asChild ? void 0 : "button",
+        onClick: handleClick,
+        ...props,
+        children
+      }
+    );
   }
 );
 DialogTrigger.displayName = "Dialog.Trigger";
@@ -4161,47 +4536,9 @@ const ListItem = Object.assign(ListItemRoot, {
   DefaultContent: ListItemDefaultContent,
   Right: ListItemRight
 });
-function setRef(ref, value) {
-  if (!ref) return;
-  if (typeof ref === "function") {
-    ref(value);
-  } else {
-    try {
-      ref.current = value;
-    } catch {
-    }
-  }
-}
-function useComposedRefs(...refs) {
-  return useCallback((node) => {
-    refs.forEach((ref) => setRef(ref, node));
-  }, refs);
-}
 const EMPTY_SELECTION = [];
-const listboxItemVariants = cva("flex w-full items-center px-4.5 py-1 gap-x-2.5 cursor-pointer", {
-  variants: {
-    selected: {
-      true: "bg-surface-primary-selected text-alt hover:bg-surface-primary-selected-hover",
-      false: "hover:bg-surface-primary-hover"
-    },
-    active: {
-      true: "bg-surface-primary-hover",
-      false: ""
-    }
-  },
-  compoundVariants: [
-    {
-      selected: true,
-      active: true,
-      class: "bg-surface-primary-selected-hover"
-    }
-  ],
-  defaultVariants: {
-    selected: false,
-    active: false
-  }
-});
 const ListboxRoot = ({
+  baseId,
   selection: controlledSelection,
   defaultSelection = EMPTY_SELECTION,
   onSelectionChange,
@@ -4209,10 +4546,12 @@ const ListboxRoot = ({
   defaultActive,
   setActive,
   selectionMode = "single",
+  focusable = true,
   disabled,
-  children
+  children,
+  keyHandler
 }) => {
-  const listboxId = usePrefixedId();
+  const listboxBaseId = baseId ?? usePrefixedId();
   const [uncontrolledSelection, setUncontrolledSelection] = useState(() => new Set(defaultSelection));
   const isSelectionControlled = controlledSelection !== void 0;
   const selectionSet = useMemo(
@@ -4231,14 +4570,6 @@ const ListboxRoot = ({
     },
     [isActiveControlled, setActive]
   );
-  const itemsRef = useRef(/* @__PURE__ */ new Set());
-  const registerItem = useCallback((value) => {
-    itemsRef.current.add(value);
-  }, []);
-  const unregisterItem = useCallback((value) => {
-    itemsRef.current.delete(value);
-  }, []);
-  const getItems = useCallback(() => Array.from(itemsRef.current), []);
   const toggleValue = useCallback(
     (value) => {
       const isSelected = selectionSet.has(value);
@@ -4268,34 +4599,39 @@ const ListboxRoot = ({
       active,
       selection: selectionSet,
       selectionMode,
+      focusable,
       disabled,
       setActive: updateActive,
       toggleValue,
-      registerItem,
-      unregisterItem,
-      getItems,
-      listboxId
+      baseId: listboxBaseId,
+      keyHandler
     }),
-    [
-      active,
-      selectionSet,
-      selectionMode,
-      disabled,
-      updateActive,
-      toggleValue,
-      registerItem,
-      unregisterItem,
-      getItems,
-      listboxId
-    ]
+    [active, selectionSet, selectionMode, focusable, disabled, updateActive, toggleValue, listboxBaseId, keyHandler]
   );
   return /* @__PURE__ */ u(ListboxProvider, { value: contextValue, children });
 };
 ListboxRoot.displayName = "ListboxRoot";
 const ListboxContent = forwardRef(
   ({ className, label, children, ...props }, ref) => {
-    const { active, disabled, getItems, setActive, toggleValue, listboxId } = useListbox();
+    const {
+      active,
+      disabled,
+      setActive,
+      toggleValue,
+      baseId,
+      selectionMode,
+      keyHandler,
+      focusable = true
+    } = useListbox();
     const innerRef = useRef(null);
+    const getItems = useCallback(() => {
+      const container = innerRef.current;
+      if (!container) {
+        return [];
+      }
+      const optionNodes = container.querySelectorAll('[role="option"][data-value]');
+      return Array.from(optionNodes).map((node) => node.dataset.value).filter((v) => v !== void 0);
+    }, []);
     const moveActive = useCallback(
       (delta) => {
         const items = getItems();
@@ -4306,9 +4642,9 @@ const ListboxContent = forwardRef(
         const newIndex = Math.max(0, Math.min(items.length - 1, currentIndex + delta));
         setActive(items[newIndex]);
       },
-      [getItems, active, setActive]
+      [active, setActive, getItems]
     );
-    const handleKeyDown = useCallback(
+    const handleKeyDown = keyHandler ?? useCallback(
       (e) => {
         if (disabled) {
           return;
@@ -4342,19 +4678,19 @@ const ListboxContent = forwardRef(
       if (!active || !innerRef.current) {
         return;
       }
-      const el = innerRef.current.querySelector(`#${listboxId}-option-${active}`);
+      const el = innerRef.current.querySelector(`#${baseId}-listbox-option-${active}`);
       if (el) {
         el.scrollIntoView({
           block: "nearest",
           behavior: "auto"
         });
       }
-    }, [active, listboxId]);
+    }, [active, baseId]);
     return /* @__PURE__ */ u(
       "div",
       {
         ref: useComposedRefs(ref, innerRef),
-        id: listboxId,
+        id: `${baseId}-listbox`,
         className: cn(
           "flex flex-col items-start grow shrink-0 basis-0",
           "max-h-100 overflow-y-auto",
@@ -4365,8 +4701,9 @@ const ListboxContent = forwardRef(
         role: "listbox",
         "aria-disabled": disabled,
         "aria-label": label,
-        "aria-activedescendant": active ? `${listboxId}-option-${active}` : void 0,
-        tabIndex: disabled ? -1 : 0,
+        "aria-multiselectable": selectionMode === "multiple" ? true : void 0,
+        "aria-activedescendant": active ? `${baseId}-listbox-option-${active}` : void 0,
+        tabIndex: focusable && !disabled ? 0 : -1,
         onKeyDown: handleKeyDown,
         ...props,
         children
@@ -4375,17 +4712,34 @@ const ListboxContent = forwardRef(
   }
 );
 ListboxContent.displayName = "ListboxContent";
+const listboxItemVariants = cva("flex w-full items-center px-4.5 py-1 gap-x-2.5 cursor-pointer", {
+  variants: {
+    selected: {
+      true: "bg-surface-primary-selected text-alt hover:bg-surface-primary-selected-hover",
+      false: "hover:bg-surface-primary-hover"
+    },
+    active: {
+      true: "bg-surface-primary-hover",
+      false: ""
+    }
+  },
+  compoundVariants: [
+    {
+      selected: true,
+      active: true,
+      class: "bg-surface-primary-selected-hover"
+    }
+  ],
+  defaultVariants: {
+    selected: false,
+    active: false
+  }
+});
 const ListboxItem = ({ value, children, className, ...props }) => {
   const ctx = useListbox();
-  const { disabled, toggleValue, registerItem, unregisterItem, listboxId } = ctx;
+  const { disabled, toggleValue, baseId } = ctx;
   const isSelected = ctx.selection.has(value);
   const isActive = ctx.active === value;
-  useEffect(() => {
-    registerItem(value);
-    return () => {
-      unregisterItem(value);
-    };
-  }, [value, registerItem, unregisterItem]);
   const handleClick = useCallback(() => {
     if (!disabled) {
       toggleValue(value);
@@ -4398,7 +4752,7 @@ const ListboxItem = ({ value, children, className, ...props }) => {
     /* @__PURE__ */ u(
       "div",
       {
-        id: `${listboxId}-option-${value}`,
+        id: `${baseId}-listbox-option-${value}`,
         className: cn(listboxItemVariants({ selected: isSelected, active: isActive }), className),
         role: "option",
         "aria-selected": isSelected,
@@ -4417,9 +4771,448 @@ const Listbox = Object.assign(ListboxRoot, {
   Content: ListboxContent,
   Item: ListboxItem
 });
-const SearchInput = forwardRef(
+const MenuRoot = ({
+  open: controlledOpen,
+  defaultOpen = false,
+  onOpenChange,
+  children
+}) => {
+  const isControlled = controlledOpen !== void 0;
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+  const open = isControlled ? controlledOpen : uncontrolledOpen;
+  const setOpen = useCallback(
+    (next) => {
+      if (!isControlled) {
+        setUncontrolledOpen(next);
+      }
+      onOpenChange?.(next);
+    },
+    [isControlled, onOpenChange]
+  );
+  const [active, setActive] = useState(void 0);
+  const itemsRef = useRef(/* @__PURE__ */ new Map());
+  const triggerRef = useRef(null);
+  const triggerId = usePrefixedId(void 0, "menu-trigger");
+  const menuId = usePrefixedId(void 0, "menu");
+  const registerItem = useCallback((id, disabled = false) => {
+    itemsRef.current.set(id, { disabled });
+  }, []);
+  const unregisterItem = useCallback((id) => {
+    itemsRef.current.delete(id);
+  }, []);
+  const getItems = useCallback(() => {
+    return Array.from(itemsRef.current.keys());
+  }, []);
+  const isItemDisabled = useCallback((id) => {
+    return itemsRef.current.get(id)?.disabled ?? false;
+  }, []);
+  const value = useMemo(
+    () => ({
+      open,
+      setOpen,
+      active,
+      setActive,
+      registerItem,
+      unregisterItem,
+      getItems,
+      isItemDisabled,
+      triggerId,
+      menuId,
+      triggerRef
+    }),
+    [open, setOpen, active, setActive, registerItem, unregisterItem, getItems, isItemDisabled, triggerId, menuId]
+  );
+  useEffect(() => {
+    if (!open && triggerRef.current) {
+      triggerRef.current.focus();
+    }
+  }, [open]);
+  return /* @__PURE__ */ u(MenuProvider, { value, children });
+};
+MenuRoot.displayName = "Menu.Root";
+const MenuTrigger = forwardRef(
+  ({ asChild, onClick, onKeyDown, className, children, ...props }, ref) => {
+    const { open, setOpen, triggerId, menuId, triggerRef } = useMenu();
+    const handleClick = (e) => {
+      onClick?.(e);
+      setOpen(!open);
+    };
+    const handleKeyDown = (e) => {
+      onKeyDown?.(e);
+      if (e.key === "ArrowDown" && !open) {
+        e.preventDefault();
+        setOpen(true);
+      }
+    };
+    const Comp = asChild ? Slot : "button";
+    return /* @__PURE__ */ u(
+      Comp,
+      {
+        ref: useComposedRefs(ref, triggerRef),
+        id: triggerId,
+        type: asChild ? void 0 : "button",
+        "aria-haspopup": "menu",
+        "aria-expanded": open,
+        "aria-controls": open ? menuId : void 0,
+        onClick: handleClick,
+        onKeyDown: handleKeyDown,
+        className,
+        ...props,
+        children
+      }
+    );
+  }
+);
+MenuTrigger.displayName = "Menu.Trigger";
+const MenuPortal = ({ container, forceMount, children }) => {
+  const { open } = useMenu();
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+  if (!mounted || !forceMount && !open) {
+    return null;
+  }
+  return createPortal(children, container ?? document.body);
+};
+MenuPortal.displayName = "Menu.Portal";
+const VIEWPORT_PADDING = 10;
+const MenuContent = forwardRef(
   ({
+    forceMount,
+    align = "start",
+    loop = true,
+    onEscapeKeyDown,
+    onPointerDownOutside,
+    onInteractOutside,
     className,
+    children,
+    ...props
+  }, ref) => {
+    const { open, setOpen, active, setActive, getItems, isItemDisabled, menuId, triggerRef } = useMenu();
+    const contentRef = useRef(null);
+    const composedRefs = useComposedRefs(ref, contentRef);
+    const [position, setPosition] = useState(
+      null
+    );
+    useEffect(() => {
+      if (!open || !triggerRef?.current || !contentRef.current) {
+        return;
+      }
+      const updatePosition = () => {
+        if (!triggerRef.current || !contentRef.current) return;
+        const triggerRect = triggerRef.current.getBoundingClientRect();
+        const contentRect = contentRef.current.getBoundingClientRect();
+        const viewportWidth = window.innerWidth;
+        const viewportHeight = window.innerHeight;
+        let top = triggerRect.bottom;
+        if (top + contentRect.height > viewportHeight) {
+          top = triggerRect.top - contentRect.height;
+        }
+        if (top < 0) {
+          top = VIEWPORT_PADDING;
+        }
+        if (align === "start") {
+          let left = triggerRect.left;
+          if (left + contentRect.width > viewportWidth) {
+            left = triggerRect.right - contentRect.width;
+          }
+          if (left < 0) {
+            left = VIEWPORT_PADDING;
+          }
+          setPosition({ top, left });
+        } else {
+          let right = viewportWidth - triggerRect.right;
+          if (triggerRect.right - contentRect.width < 0) {
+            right = viewportWidth - (triggerRect.left + contentRect.width);
+          }
+          if (right < 0) {
+            right = VIEWPORT_PADDING;
+          }
+          setPosition({ top, right });
+        }
+      };
+      updatePosition();
+      window.addEventListener("resize", updatePosition);
+      window.addEventListener("scroll", updatePosition, true);
+      return () => {
+        window.removeEventListener("resize", updatePosition);
+        window.removeEventListener("scroll", updatePosition, true);
+      };
+    }, [open, triggerRef, align]);
+    useEffect(() => {
+      if (open && contentRef.current) {
+        contentRef.current.focus();
+        const items = getItems();
+        const firstSelectableItem = items.find((itemId) => !isItemDisabled(itemId));
+        if (firstSelectableItem) {
+          setActive(firstSelectableItem);
+        }
+      }
+    }, [open, getItems, isItemDisabled, setActive]);
+    const moveActive = useCallback(
+      (delta) => {
+        const items = getItems();
+        if (!items.length) {
+          return;
+        }
+        const currentIndex = active ? items.indexOf(active) : -1;
+        let newIndex;
+        let attempts = 0;
+        const maxAttempts = items.length;
+        if (currentIndex === -1) {
+          newIndex = delta > 0 ? 0 : items.length - 1;
+        } else {
+          newIndex = currentIndex + delta;
+        }
+        while (attempts < maxAttempts) {
+          if (loop) {
+            if (newIndex < 0) {
+              newIndex = items.length - 1;
+            } else if (newIndex >= items.length) {
+              newIndex = 0;
+            }
+          } else {
+            if (newIndex < 0 || newIndex >= items.length) {
+              return;
+            }
+          }
+          if (!isItemDisabled(items[newIndex])) {
+            setActive(items[newIndex]);
+            return;
+          }
+          newIndex += delta;
+          attempts++;
+        }
+      },
+      [getItems, active, setActive, loop, isItemDisabled]
+    );
+    const handleKeyDown = useCallback(
+      (e) => {
+        const items = getItems();
+        if (!items.length) {
+          return;
+        }
+        switch (e.key) {
+          case "ArrowDown":
+            e.preventDefault();
+            moveActive(1);
+            break;
+          case "ArrowUp":
+            e.preventDefault();
+            moveActive(-1);
+            break;
+          case "Home":
+            e.preventDefault();
+            {
+              const firstEnabled = items.find((id) => !isItemDisabled(id));
+              if (firstEnabled) {
+                setActive(firstEnabled);
+              }
+            }
+            break;
+          case "End":
+            e.preventDefault();
+            {
+              const lastEnabled = [...items].reverse().find((id) => !isItemDisabled(id));
+              if (lastEnabled) {
+                setActive(lastEnabled);
+              }
+            }
+            break;
+          case "Enter":
+          case " ":
+            e.preventDefault();
+            if (active && !isItemDisabled(active)) {
+              const itemElement = document.getElementById(active);
+              if (itemElement) {
+                itemElement.click();
+              }
+            }
+            break;
+          case "Escape":
+            e.preventDefault();
+            onEscapeKeyDown?.(e);
+            setOpen(false);
+            break;
+          case "Tab":
+            setOpen(false);
+            break;
+        }
+      },
+      [getItems, active, moveActive, setActive, isItemDisabled, onEscapeKeyDown, setOpen]
+    );
+    const handlePointerDownOutside = useCallback(
+      (e) => {
+        const target = e.target;
+        if (triggerRef?.current?.contains(target)) {
+          return;
+        }
+        if (contentRef.current && !contentRef.current.contains(target)) {
+          onPointerDownOutside?.(e);
+          onInteractOutside?.(e);
+          if (!e.defaultPrevented) {
+            setOpen(false);
+          }
+        }
+      },
+      [onPointerDownOutside, onInteractOutside, setOpen, triggerRef]
+    );
+    useEffect(() => {
+      if (!open) {
+        return;
+      }
+      document.addEventListener("pointerdown", handlePointerDownOutside);
+      return () => document.removeEventListener("pointerdown", handlePointerDownOutside);
+    }, [open, handlePointerDownOutside]);
+    useEffect(() => {
+      if (!active || !contentRef.current) {
+        return;
+      }
+      const el = contentRef.current.querySelector(`#${active}`);
+      if (el) {
+        el.scrollIntoView({
+          block: "nearest",
+          behavior: "auto"
+        });
+      }
+    }, [active]);
+    if (!forceMount && !open) {
+      return null;
+    }
+    return /* @__PURE__ */ u(
+      "div",
+      {
+        ref: composedRefs,
+        id: menuId,
+        role: "menu",
+        "aria-orientation": "vertical",
+        "aria-activedescendant": active,
+        tabIndex: -1,
+        "data-state": open ? "open" : "closed",
+        className: cn(
+          "fixed z-40 flex flex-col items-start w-fit py-2.5 mt-2.5 overflow-hidden",
+          "rounded-sm border border-bdr-subtle bg-surface-neutral shadow-lg outline-none",
+          "data-[state=open]:animate-in data-[state=closed]:animate-out",
+          "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+          "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+          !position && "opacity-0 pointer-events-none",
+          className
+        ),
+        style: { ...position },
+        onKeyDown: handleKeyDown,
+        ...props,
+        children
+      }
+    );
+  }
+);
+MenuContent.displayName = "Menu.Content";
+const menuItemVariants = cva("flex w-full items-center px-4.5 py-2.5 gap-x-1.25 cursor-pointer text-sm outline-none", {
+  variants: {
+    active: {
+      true: "bg-surface-primary-selected",
+      false: ""
+    },
+    disabled: {
+      true: "hover:bg-transparent opacity-30 select-none pointer-events-none",
+      false: ""
+    }
+  },
+  compoundVariants: [
+    {
+      active: true,
+      disabled: false,
+      class: "text-alt outline-none ring-3 ring-inset ring-bdr-strong"
+    }
+  ],
+  defaultVariants: {
+    active: false,
+    disabled: false
+  }
+});
+const MenuItem = ({
+  id: providedId,
+  asChild = false,
+  disabled = false,
+  onSelect,
+  className,
+  children,
+  ...props
+}) => {
+  const id = usePrefixedId(providedId, providedId ? void 0 : "menu-item");
+  const { active, setActive, setOpen, registerItem, unregisterItem } = useMenu();
+  const isActive = active === id;
+  const isDisabled = disabled;
+  useEffect(() => {
+    registerItem(id, disabled);
+    return () => unregisterItem(id);
+  }, [id, disabled, registerItem, unregisterItem]);
+  const handleClick = useCallback(() => {
+    if (isDisabled) {
+      return;
+    }
+    const event = new Event("select", { bubbles: true, cancelable: true });
+    onSelect?.(event);
+    if (!event.defaultPrevented) {
+      setOpen(false);
+    }
+  }, [isDisabled, onSelect, setOpen]);
+  const handlePointerMove = useCallback(() => {
+    if (!isActive) {
+      setActive(id);
+    }
+  }, [isActive, setActive, id]);
+  const handlePointerLeave = useCallback(() => {
+    setActive(void 0);
+  }, [setActive]);
+  const Comp = asChild ? Slot : "div";
+  return /* @__PURE__ */ u(
+    Comp,
+    {
+      id,
+      role: "menuitem",
+      "aria-disabled": isDisabled,
+      "data-active": isActive || void 0,
+      "data-disabled": isDisabled || void 0,
+      className: cn(menuItemVariants({ active: isActive, disabled: isDisabled }), className),
+      onClick: handleClick,
+      onPointerMove: handlePointerMove,
+      onPointerLeave: handlePointerLeave,
+      ...props,
+      children
+    }
+  );
+};
+MenuItem.displayName = "Menu.Item";
+const MenuLabel = forwardRef(({ className, children, ...props }, ref) => {
+  return /* @__PURE__ */ u("div", { ref, className: cn("px-3 py-1.5 text-xs font-semibold text-subtle", className), ...props, children });
+});
+MenuLabel.displayName = "Menu.Label";
+const MenuSeparator = forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ u(
+    "div",
+    {
+      ref,
+      role: "separator",
+      "aria-orientation": "horizontal",
+      className: cn("my-1 h-px bg-bdr-subtle", className),
+      ...props
+    }
+  );
+});
+MenuSeparator.displayName = "Menu.Separator";
+const Menu = Object.assign(MenuRoot, {
+  Root: MenuRoot,
+  Trigger: MenuTrigger,
+  Portal: MenuPortal,
+  Content: MenuContent,
+  Item: MenuItem,
+  Label: MenuLabel,
+  Separator: MenuSeparator
+});
+const SearchInput = forwardRef(
+  ({
     id,
     value,
     defaultValue = "",
@@ -4428,6 +5221,9 @@ const SearchInput = forwardRef(
     onChange,
     disabled,
     readOnly,
+    showSearchIcon = true,
+    showClearButton = true,
+    className,
     ...props
   }, ref) => {
     const inputId = usePrefixedId(unwrap(id));
@@ -4435,7 +5231,7 @@ const SearchInput = forwardRef(
     const isControlled = value !== void 0;
     const inputValue = isControlled ? value : uncontrolledValue;
     const isValueSet = inputValue.length > 0;
-    const canClear = isValueSet && !disabled && !readOnly;
+    const canClear = showClearButton && isValueSet && !disabled && !readOnly;
     const handleChange = (e) => {
       const newValue = e.currentTarget.value;
       if (!isControlled) {
@@ -4456,7 +5252,7 @@ const SearchInput = forwardRef(
       "div",
       {
         className: cn(
-          "relative flex rounded-sm overflow-hidden",
+          "relative flex items-center rounded-sm overflow-hidden",
           "h-12 border border-bdr-subtle focus-within:border-bdr-strong",
           "focus-within:outline-none focus-within:ring-3 focus-within:ring-ring/50 focus-within:ring-offset-0",
           "transition-highlight",
@@ -4464,10 +5260,10 @@ const SearchInput = forwardRef(
           className
         ),
         children: [
-          /* @__PURE__ */ u(
+          showSearchIcon && /* @__PURE__ */ u(
             Search,
             {
-              className: "absolute left-4.5 top-1/2 -translate-y-1/2 mt-0.25 text-subtle pointer-events-none",
+              className: "flex items-center justify-center shrink-0 w-10 text-subtle pointer-events-none",
               size: 20,
               strokeWidth: 1.5
             }
@@ -4478,11 +5274,13 @@ const SearchInput = forwardRef(
               ref: useComposedRefs(ref, inputRef),
               id: inputId,
               className: cn(
-                "w-full text-base pr-1 px-12 border-0",
+                "w-full text-base border-0",
                 "text-main bg-surface-neutral",
                 "placeholder:text-subtle",
                 "focus:outline-none",
-                "read-only:bg-surface-primary"
+                "read-only:bg-surface-primary",
+                !showSearchIcon && "pl-4.5",
+                "pr-4"
               ),
               value: inputValue,
               onChange: handleChange,
@@ -4497,7 +5295,7 @@ const SearchInput = forwardRef(
           canClear && /* @__PURE__ */ u(
             IconButton,
             {
-              className: "absolute right-3 top-1/2 -translate-y-1/2 w-8 h-8 text-subtle",
+              className: "flex items-center justify-center shrink-0 h-10 w-10 mr-1 text-subtle",
               size: "lg",
               icon: X,
               title: clearLabel,
@@ -4790,6 +5588,8 @@ export {
   AvatarProvider,
   Button,
   Checkbox,
+  Combobox,
+  ComboboxProvider,
   Dialog,
   DialogProvider,
   IconButton,
@@ -4799,15 +5599,21 @@ export {
   ListItem,
   Listbox,
   ListboxProvider,
+  Menu,
+  MenuProvider,
   SearchInput,
   SelectableListItem,
   Separator,
   Tooltip,
   cn,
+  setRef,
   unwrap,
   useAvatar,
+  useCombobox,
+  useComposedRefs,
   useDialog,
   useListbox,
+  useMenu,
   usePrefixedId,
   useScrollLock
 };