@enonic/ui 0.12.0 → 0.12.1

package/dist/enonic-ui.es.js

@@ -1,6 +1,8 @@
 import { options, Fragment } from "preact";
-import { forwardRef, createContext, useId, useContext, createElement, useState, isValidElement, Children, useRef, useEffect, useCallback, createPortal, useMemo } from "react";
-import { Root } from "@radix-ui/react-slot";
+import { createContext, useContext, useId, forwardRef, useState, useCallback, 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";
 import { useState as useState$1 } from "preact/hooks";
 var f = 0;
 function u(e, t, n, o, i, u2) {
@@ -11,6 +13,56 @@ function u(e, t, n, o, i, u2) {
   if ("function" == typeof e && (a = e.defaultProps)) for (c in a) void 0 === p[c] && (p[c] = a[c]);
   return options.vnode && options.vnode(l), l;
 }
+const AvatarContext = createContext(null);
+const AvatarProvider = ({ value, children }) => {
+  return /* @__PURE__ */ u(AvatarContext.Provider, { value, children });
+};
+AvatarProvider.displayName = "AvatarProvider";
+const useAvatar = () => {
+  const ctx = useContext(AvatarContext);
+  if (!ctx) {
+    throw new Error("useAvatar must be used within an Avatar");
+  }
+  return ctx;
+};
+const DialogContext = createContext(void 0);
+const DialogProvider = ({ value, children }) => {
+  return /* @__PURE__ */ u(DialogContext.Provider, { value, children });
+};
+DialogProvider.displayName = "DialogProvider";
+const useDialog = () => {
+  const context = useContext(DialogContext);
+  if (!context) {
+    throw new Error("useDialog must be used within a DialogProvider");
+  }
+  return context;
+};
+const IdContext = createContext(void 0);
+const IdProvider = ({ children, prefix }) => {
+  return /* @__PURE__ */ u(IdContext.Provider, { value: { prefix }, children });
+};
+IdProvider.displayName = "IdProvider";
+const usePrefixedId = (providedId) => {
+  const baseId = useId();
+  const context = useContext(IdContext);
+  if (providedId) {
+    return providedId;
+  }
+  const id = context?.prefix ? `${context.prefix}-${baseId}` : baseId;
+  return id;
+};
+const ListboxContext = createContext(null);
+const ListboxProvider = ({ value, children }) => {
+  return /* @__PURE__ */ u(ListboxContext.Provider, { value, children });
+};
+ListboxProvider.displayName = "ListboxProvider";
+const useListbox = () => {
+  const ctx = useContext(ListboxContext);
+  if (!ctx) {
+    throw new Error("useListbox must be used within a Listbox");
+  }
+  return ctx;
+};
 function r(e) {
   var t, f2, n = "";
   if ("string" == typeof e || "number" == typeof e) n += e;
@@ -3024,6 +3076,125 @@ const cva = (base, config) => (props) => {
   }, []);
   return cx(base, getVariantClassNames, getCompoundVariantClassNames, props === null || props === void 0 ? void 0 : props.class, props === null || props === void 0 ? void 0 : props.className);
 };
+const avatarVariants = cva("relative flex shrink-0 overflow-hidden", {
+  variants: {
+    size: {
+      sm: "w-6 h-6 text-xs",
+      md: "w-8 h-8 text-sm",
+      lg: "w-12 h-12 text-base"
+    },
+    shape: {
+      circle: "rounded-full",
+      square: "rounded-md"
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    shape: "circle"
+  }
+});
+const AvatarRoot = forwardRef(
+  ({ children, className, size, shape, ...props }, ref) => {
+    const [imageLoadingStatus, setImageLoadingStatus] = useState("idle");
+    const handleImageLoadingStatusChange = useCallback((status) => {
+      setImageLoadingStatus(status);
+    }, []);
+    const contextValue = useMemo(
+      () => ({
+        imageLoadingStatus,
+        onImageLoadingStatusChange: handleImageLoadingStatusChange
+      }),
+      [imageLoadingStatus, handleImageLoadingStatusChange]
+    );
+    return /* @__PURE__ */ u(AvatarProvider, { value: contextValue, children: /* @__PURE__ */ u("span", { ref, className: cn(avatarVariants({ size, shape }), className), ...props, children }) });
+  }
+);
+AvatarRoot.displayName = "AvatarRoot";
+const AvatarImage = forwardRef(
+  ({ src, alt, className, onLoadingStatusChange, ...props }, ref) => {
+    const { imageLoadingStatus, onImageLoadingStatusChange } = useAvatar();
+    const [hasError, setHasError] = useState(false);
+    useEffect(() => {
+      setHasError(false);
+      if (!src) {
+        return;
+      }
+      onImageLoadingStatusChange("loading");
+      onLoadingStatusChange?.("loading");
+      const img = new Image();
+      const handleLoad = () => {
+        onImageLoadingStatusChange("loaded");
+        onLoadingStatusChange?.("loaded");
+      };
+      const handleError = () => {
+        setHasError(true);
+        onImageLoadingStatusChange("error");
+        onLoadingStatusChange?.("error");
+      };
+      img.addEventListener("load", handleLoad);
+      img.addEventListener("error", handleError);
+      img.src = src;
+      return () => {
+        img.removeEventListener("load", handleLoad);
+        img.removeEventListener("error", handleError);
+      };
+    }, [src, onImageLoadingStatusChange, onLoadingStatusChange]);
+    if (!src || hasError || imageLoadingStatus === "error") {
+      return null;
+    }
+    return /* @__PURE__ */ u(
+      "img",
+      {
+        ref,
+        src,
+        alt,
+        className: cn("aspect-square h-full w-full object-cover", className),
+        ...props
+      }
+    );
+  }
+);
+AvatarImage.displayName = "AvatarImage";
+const AvatarFallback = forwardRef(
+  ({ children, className, delayMs = 0, ...props }, ref) => {
+    const { imageLoadingStatus } = useAvatar();
+    const [canRender, setCanRender] = useState(delayMs === 0);
+    useEffect(() => {
+      if (delayMs === 0) {
+        return;
+      }
+      const timerId = setTimeout(() => {
+        setCanRender(true);
+      }, delayMs);
+      return () => {
+        clearTimeout(timerId);
+      };
+    }, [delayMs]);
+    const shouldRender = canRender && (imageLoadingStatus === "idle" || imageLoadingStatus === "error");
+    if (!shouldRender) {
+      return null;
+    }
+    return /* @__PURE__ */ u(
+      "span",
+      {
+        ref,
+        className: cn(
+          "flex h-full w-full items-center justify-center",
+          "bg-surface-secondary text-alt font-medium uppercase cursor-default",
+          className
+        ),
+        ...props,
+        children
+      }
+    );
+  }
+);
+AvatarFallback.displayName = "AvatarFallback";
+const Avatar = Object.assign(AvatarRoot, {
+  Root: AvatarRoot,
+  Image: AvatarImage,
+  Fallback: AvatarFallback
+});
 const buttonVariants = cva(
   [
     "inline-flex items-center justify-center",
@@ -3101,20 +3272,6 @@ const Button = forwardRef(
   }
 );
 Button.displayName = "Button";
-const IdContext = createContext(void 0);
-const IdProvider = ({ children, prefix }) => {
-  return /* @__PURE__ */ u(IdContext.Provider, { value: { prefix }, children });
-};
-IdProvider.displayName = "IdProvider";
-const usePrefixedId = (providedId) => {
-  const baseId = useId();
-  const context = useContext(IdContext);
-  if (providedId) {
-    return providedId;
-  }
-  const id = context?.prefix ? `${context.prefix}-${baseId}` : baseId;
-  return id;
-};
 /**
  * @license lucide-react v0.545.0 - ISC
  *
@@ -3487,6 +3644,324 @@ const IconButton = forwardRef(
   }
 );
 IconButton.displayName = "IconButton";
+const useScrollLock = (lock, element) => {
+  useEffect(() => {
+    if (!lock) {
+      return;
+    }
+    const target = element ?? document.body;
+    const originalOverflow = target.style.overflow;
+    target.style.overflow = "hidden";
+    return () => {
+      target.style.overflow = originalOverflow;
+    };
+  }, [lock, element]);
+};
+const DialogRoot = ({
+  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 value = useMemo(() => ({ open, setOpen }), [open, setOpen]);
+  return /* @__PURE__ */ u(DialogProvider, { value, children });
+};
+DialogRoot.displayName = "Dialog.Root";
+const DialogTrigger = forwardRef(
+  ({ 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 });
+  }
+);
+DialogTrigger.displayName = "Dialog.Trigger";
+const DialogPortal = ({ children, container, forceMount }) => {
+  const { open } = useDialog();
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+  if (!mounted || !forceMount && !open) {
+    return null;
+  }
+  return createPortal(children, container ?? document.body);
+};
+DialogPortal.displayName = "Dialog.Portal";
+const DialogOverlay = forwardRef(
+  ({ className, forceMount, ...props }, ref) => {
+    const { open } = useDialog();
+    if (!forceMount && !open) {
+      return null;
+    }
+    return /* @__PURE__ */ u(
+      "div",
+      {
+        ref,
+        "data-state": open ? "open" : "closed",
+        className: cn(
+          "fixed inset-0 z-30 bg-overlay backdrop-blur-xs",
+          "data-[state=open]:animate-in data-[state=closed]:animate-out",
+          "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+DialogOverlay.displayName = "Dialog.Overlay";
+const DialogContent = forwardRef(
+  ({
+    children,
+    className,
+    forceMount,
+    onEscapeKeyDown,
+    onPointerDownOutside,
+    onInteractOutside,
+    onOpenAutoFocus,
+    onCloseAutoFocus,
+    ...props
+  }, ref) => {
+    const { open, setOpen } = useDialog();
+    const contentRef = useRef(null);
+    const titleId = useId();
+    const descriptionId = useId();
+    useEffect(() => {
+      if (typeof ref === "function") {
+        ref(contentRef.current);
+      } else if (ref) {
+        ref.current = contentRef.current;
+      }
+    }, [ref]);
+    useScrollLock(open);
+    const handleEscapeKey = useCallback(
+      (e) => {
+        if (e.key === "Escape") {
+          onEscapeKeyDown?.(e);
+          if (!e.defaultPrevented) {
+            setOpen(false);
+          }
+        }
+      },
+      [onEscapeKeyDown, setOpen]
+    );
+    useEffect(() => {
+      if (!open) {
+        return;
+      }
+      document.addEventListener("keydown", handleEscapeKey);
+      return () => document.removeEventListener("keydown", handleEscapeKey);
+    }, [open, handleEscapeKey]);
+    const handlePointerDownOutside = useCallback(
+      (e) => {
+        const target = e.target;
+        if (contentRef.current && !contentRef.current.contains(target)) {
+          onPointerDownOutside?.(e);
+          onInteractOutside?.(e);
+          if (!e.defaultPrevented) {
+            setOpen(false);
+          }
+        }
+      },
+      [onPointerDownOutside, onInteractOutside, setOpen]
+    );
+    useEffect(() => {
+      if (!open) {
+        return;
+      }
+      document.addEventListener("pointerdown", handlePointerDownOutside);
+      return () => document.removeEventListener("pointerdown", handlePointerDownOutside);
+    }, [open, handlePointerDownOutside]);
+    if (!forceMount && !open) {
+      return null;
+    }
+    return /* @__PURE__ */ u(
+      FocusTrap,
+      {
+        active: open,
+        focusTrapOptions: {
+          initialFocus: false,
+          fallbackFocus: () => contentRef.current ?? document.body,
+          escapeDeactivates: false,
+          clickOutsideDeactivates: false,
+          returnFocusOnDeactivate: true,
+          allowOutsideClick: true,
+          preventScroll: false,
+          onActivate: () => {
+            requestAnimationFrame(() => {
+              const event = new Event("openautofocus");
+              onOpenAutoFocus?.(event);
+              if (!event.defaultPrevented && contentRef.current) {
+                contentRef.current.focus();
+              }
+            });
+          },
+          onDeactivate: () => {
+            requestAnimationFrame(() => {
+              const event = new Event("closeautofocus");
+              onCloseAutoFocus?.(event);
+            });
+          }
+        },
+        children: /* @__PURE__ */ u("div", { className: "fixed inset-0 z-40 flex items-center justify-center p-4", children: /* @__PURE__ */ u(
+          "div",
+          {
+            ref: contentRef,
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-labelledby": titleId,
+            "aria-describedby": descriptionId,
+            "data-state": open ? "open" : "closed",
+            tabIndex: -1,
+            className: cn(
+              "relative rounded-lg shadow-xl bg-surface-neutral",
+              "flex flex-col max-w-lg w-full max-h-[90vh] gap-10 p-10",
+              "border border-bdr-subtle outline-none overflow-hidden",
+              "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",
+              className
+            ),
+            ...props,
+            children
+          }
+        ) })
+      }
+    );
+  }
+);
+DialogContent.displayName = "Dialog.Content";
+const DialogHeader = forwardRef(
+  ({ className, children, ...props }, ref) => {
+    return /* @__PURE__ */ u("header", { ref, className: cn("relative grid gap-2.5 self-stretch", className), ...props, children });
+  }
+);
+DialogHeader.displayName = "Dialog.Header";
+const DialogClose = forwardRef(
+  ({ children, asChild, onClick, ...props }, ref) => {
+    const { setOpen } = useDialog();
+    const handleClick = useCallback(
+      (e) => {
+        onClick?.(e);
+        if (!e.defaultPrevented) {
+          setOpen(false);
+        }
+      },
+      [onClick, setOpen]
+    );
+    const Comp = asChild ? Slot : "button";
+    return /* @__PURE__ */ u(
+      Comp,
+      {
+        ref,
+        type: asChild ? void 0 : "button",
+        onClick: handleClick,
+        ...props,
+        children
+      }
+    );
+  }
+);
+DialogClose.displayName = "Dialog.Close";
+const DialogTitle = forwardRef(
+  ({ children, className, asChild, ...props }, ref) => {
+    const Comp = asChild ? Slot : "h2";
+    return /* @__PURE__ */ u(
+      Comp,
+      {
+        ref,
+        className: cn("text-2xl font-semibold", className),
+        ...props,
+        children
+      }
+    );
+  }
+);
+DialogTitle.displayName = "Dialog.Title";
+const DialogDescription = forwardRef(
+  ({ children, className, asChild, ...props }, ref) => {
+    const Comp = asChild ? Slot : "p";
+    return /* @__PURE__ */ u(
+      Comp,
+      {
+        ref,
+        className: cn("", className),
+        ...props,
+        children
+      }
+    );
+  }
+);
+DialogDescription.displayName = "Dialog.Description";
+const DialogBody = forwardRef(
+  ({ className, children, ...props }, ref) => {
+    return /* @__PURE__ */ u("div", { ref, className: cn("min-h-0 flex-1 overflow-y-auto", className), ...props, children });
+  }
+);
+DialogBody.displayName = "Dialog.Body";
+const DialogFooter = forwardRef(
+  ({ className, children, ...props }, ref) => {
+    return /* @__PURE__ */ u("footer", { ref, className: cn("flex justify-end gap-2.5", className), ...props, children });
+  }
+);
+DialogFooter.displayName = "Dialog.Footer";
+const DialogDefaultClose = forwardRef((props, ref) => {
+  return /* @__PURE__ */ u(DialogClose, { asChild: true, ref, ...props, children: /* @__PURE__ */ u(
+    IconButton,
+    {
+      "aria-label": "Close",
+      "data-area": "close",
+      icon: X,
+      size: "lg",
+      iconSize: 36,
+      iconStrokeWidth: 1,
+      shape: "round",
+      variant: "filled"
+    }
+  ) });
+});
+DialogDefaultClose.displayName = "Dialog.DefaultClose";
+const DialogDefaultHeader = forwardRef(
+  ({ title, description, withClose, className, children, ...props }, ref) => {
+    return /* @__PURE__ */ u(DialogHeader, { ref, className: cn(withClose && "grid-cols-[minmax(0,1fr)_auto]", className), ...props, children: [
+      /* @__PURE__ */ u(DialogTitle, { className: cn(withClose && "col-start-1 row-start-1 min-w-0"), children: title }),
+      withClose && /* @__PURE__ */ u(DialogDefaultClose, { className: "col-start-2 row-start-1 row-span-2 self-start justify-self-end" }),
+      description && /* @__PURE__ */ u(DialogDescription, { className: cn(withClose && "row-start-2"), children: description }),
+      children
+    ] });
+  }
+);
+DialogDefaultHeader.displayName = "Dialog.DefaultHeader";
+const Dialog = Object.assign(DialogRoot, {
+  Root: DialogRoot,
+  Trigger: DialogTrigger,
+  Portal: DialogPortal,
+  Overlay: DialogOverlay,
+  Content: DialogContent,
+  Header: DialogHeader,
+  Close: DialogClose,
+  Title: DialogTitle,
+  Description: DialogDescription,
+  Body: DialogBody,
+  Footer: DialogFooter,
+  DefaultClose: DialogDefaultClose,
+  DefaultHeader: DialogDefaultHeader
+});
 const inputContainerVariants = cva(
   [
     "relative flex rounded-sm overflow-hidden",
@@ -3686,49 +4161,420 @@ const ListItem = Object.assign(ListItemRoot, {
   DefaultContent: ListItemDefaultContent,
   Right: ListItemRight
 });
-const SelectableListItem = ({
-  className,
-  selected,
-  children,
-  label,
-  description,
-  metadata,
-  icon,
-  readOnly,
-  checked,
-  defaultChecked,
-  onCheckedChange,
-  ...props
-}) => {
-  return /* @__PURE__ */ u(
-    ListItem,
-    {
-      className: cn(!selected && "hover:bg-surface-primary-hover", className),
-      selected,
-      role: "row",
-      "aria-selected": selected,
-      ...props,
-      children: [
-        /* @__PURE__ */ u(ListItem.Left, { children: /* @__PURE__ */ u(
-          Checkbox,
-          {
-            checked,
-            defaultChecked,
-            onCheckedChange,
-            readOnly
-          }
-        ) }),
-        /* @__PURE__ */ u(ListItem.DefaultContent, { label, description, metadata, icon }),
-        /* @__PURE__ */ u(ListItem.Right, { children })
-      ]
+function setRef(ref, value) {
+  if (!ref) return;
+  if (typeof ref === "function") {
+    ref(value);
+  } else {
+    try {
+      ref.current = value;
+    } catch {
     }
-  );
-};
-SelectableListItem.displayName = "SelectableListItem";
-const oppositeSide = {
-  top: "bottom",
-  bottom: "top",
-  left: "right",
+  }
+}
+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 = ({
+  selection: controlledSelection,
+  defaultSelection = EMPTY_SELECTION,
+  onSelectionChange,
+  active: controlledActive,
+  defaultActive,
+  setActive,
+  selectionMode = "single",
+  disabled,
+  children
+}) => {
+  const listboxId = usePrefixedId();
+  const [uncontrolledSelection, setUncontrolledSelection] = useState(() => new Set(defaultSelection));
+  const isSelectionControlled = controlledSelection !== void 0;
+  const selectionSet = useMemo(
+    () => isSelectionControlled ? new Set(controlledSelection) : uncontrolledSelection,
+    [isSelectionControlled, controlledSelection, uncontrolledSelection]
+  );
+  const [uncontrolledActive, setUncontrolledActive] = useState(defaultActive);
+  const isActiveControlled = controlledActive !== void 0;
+  const active = isActiveControlled ? controlledActive : uncontrolledActive;
+  const updateActive = useCallback(
+    (id) => {
+      if (!isActiveControlled) {
+        setUncontrolledActive(id);
+      }
+      setActive?.(id);
+    },
+    [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);
+      const newSet = new Set(selectionSet);
+      if (selectionMode === "single") {
+        newSet.clear();
+        if (!isSelected) {
+          newSet.add(value);
+        }
+      } else {
+        if (isSelected) {
+          newSet.delete(value);
+        } else {
+          newSet.add(value);
+        }
+      }
+      if (!isSelectionControlled) {
+        setUncontrolledSelection(newSet);
+      }
+      onSelectionChange?.(Array.from(newSet));
+      updateActive(value);
+    },
+    [selectionSet, selectionMode, isSelectionControlled, onSelectionChange, updateActive]
+  );
+  const contextValue = useMemo(
+    () => ({
+      active,
+      selection: selectionSet,
+      selectionMode,
+      disabled,
+      setActive: updateActive,
+      toggleValue,
+      registerItem,
+      unregisterItem,
+      getItems,
+      listboxId
+    }),
+    [
+      active,
+      selectionSet,
+      selectionMode,
+      disabled,
+      updateActive,
+      toggleValue,
+      registerItem,
+      unregisterItem,
+      getItems,
+      listboxId
+    ]
+  );
+  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 innerRef = useRef(null);
+    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]);
+      },
+      [getItems, active, setActive]
+    );
+    const handleKeyDown = useCallback(
+      (e) => {
+        if (disabled) {
+          return;
+        }
+        const items = getItems();
+        if (!items.length) {
+          return;
+        }
+        if (e.key === "ArrowDown") {
+          e.preventDefault();
+          moveActive(1);
+        } else if (e.key === "ArrowUp") {
+          e.preventDefault();
+          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 === " " || e.key === "Enter") {
+          e.preventDefault();
+          if (active) {
+            toggleValue(active);
+          }
+        }
+      },
+      [disabled, getItems, active, moveActive, toggleValue, setActive]
+    );
+    useEffect(() => {
+      if (!active || !innerRef.current) {
+        return;
+      }
+      const el = innerRef.current.querySelector(`#${listboxId}-option-${active}`);
+      if (el) {
+        el.scrollIntoView({
+          block: "nearest",
+          behavior: "auto"
+        });
+      }
+    }, [active, listboxId]);
+    return /* @__PURE__ */ u(
+      "div",
+      {
+        ref: useComposedRefs(ref, innerRef),
+        id: listboxId,
+        className: cn(
+          "flex flex-col items-start grow shrink-0 basis-0",
+          "max-h-100 overflow-y-auto",
+          "focus-within:outline-none focus-within:ring-3 focus-within:ring-ring/50",
+          disabled && "pointer-events-none select-none opacity-30",
+          className
+        ),
+        role: "listbox",
+        "aria-disabled": disabled,
+        "aria-label": label,
+        "aria-activedescendant": active ? `${listboxId}-option-${active}` : void 0,
+        tabIndex: disabled ? -1 : 0,
+        onKeyDown: handleKeyDown,
+        ...props,
+        children
+      }
+    );
+  }
+);
+ListboxContent.displayName = "ListboxContent";
+const ListboxItem = ({ value, children, className, ...props }) => {
+  const ctx = useListbox();
+  const { disabled, toggleValue, registerItem, unregisterItem, listboxId } = 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);
+    }
+  }, [disabled, toggleValue, value]);
+  return (
+    // ARIA listbox pattern: options are not individually focusable
+    // Parent listbox handles all keyboard interactions via aria-activedescendant
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/interactive-supports-focus
+    /* @__PURE__ */ u(
+      "div",
+      {
+        id: `${listboxId}-option-${value}`,
+        className: cn(listboxItemVariants({ selected: isSelected, active: isActive }), className),
+        role: "option",
+        "aria-selected": isSelected,
+        "data-value": value,
+        "data-active": isActive || void 0,
+        onClick: handleClick,
+        ...props,
+        children
+      }
+    )
+  );
+};
+ListboxItem.displayName = "ListboxItem";
+const Listbox = Object.assign(ListboxRoot, {
+  Root: ListboxRoot,
+  Content: ListboxContent,
+  Item: ListboxItem
+});
+const SearchInput = forwardRef(
+  ({
+    className,
+    id,
+    value,
+    defaultValue = "",
+    placeholder = "Search",
+    clearLabel = "Clear",
+    onChange,
+    disabled,
+    readOnly,
+    ...props
+  }, ref) => {
+    const inputId = usePrefixedId(unwrap(id));
+    const [uncontrolledValue, setUncontrolledValue] = useState$1(defaultValue);
+    const isControlled = value !== void 0;
+    const inputValue = isControlled ? value : uncontrolledValue;
+    const isValueSet = inputValue.length > 0;
+    const canClear = isValueSet && !disabled && !readOnly;
+    const handleChange = (e) => {
+      const newValue = e.currentTarget.value;
+      if (!isControlled) {
+        setUncontrolledValue(newValue);
+      }
+      onChange?.(newValue);
+    };
+    const inputRef = useRef(null);
+    const handleClear = () => {
+      const newValue = "";
+      if (!isControlled) {
+        setUncontrolledValue(newValue);
+      }
+      onChange?.(newValue);
+      inputRef.current?.focus();
+    };
+    return /* @__PURE__ */ u(
+      "div",
+      {
+        className: cn(
+          "relative flex 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",
+          disabled && "pointer-events-none select-none opacity-30",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ u(
+            Search,
+            {
+              className: "absolute left-4.5 top-1/2 -translate-y-1/2 mt-0.25 text-subtle pointer-events-none",
+              size: 20,
+              strokeWidth: 1.5
+            }
+          ),
+          /* @__PURE__ */ u(
+            "input",
+            {
+              ref: useComposedRefs(ref, inputRef),
+              id: inputId,
+              className: cn(
+                "w-full text-base pr-1 px-12 border-0",
+                "text-main bg-surface-neutral",
+                "placeholder:text-subtle",
+                "focus:outline-none",
+                "read-only:bg-surface-primary"
+              ),
+              value: inputValue,
+              onChange: handleChange,
+              readOnly,
+              disabled,
+              placeholder,
+              "aria-label": "Search",
+              "aria-disabled": disabled,
+              ...props
+            }
+          ),
+          canClear && /* @__PURE__ */ u(
+            IconButton,
+            {
+              className: "absolute right-3 top-1/2 -translate-y-1/2 w-8 h-8 text-subtle",
+              size: "lg",
+              icon: X,
+              title: clearLabel,
+              onClick: handleClear,
+              disabled
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+SearchInput.displayName = "SearchInput";
+const SelectableListItem = ({
+  className,
+  selected,
+  children,
+  label,
+  description,
+  metadata,
+  icon,
+  readOnly,
+  checked,
+  defaultChecked,
+  onCheckedChange,
+  ...props
+}) => {
+  return /* @__PURE__ */ u(
+    ListItem,
+    {
+      className: cn(!selected && "hover:bg-surface-primary-hover", className),
+      selected,
+      role: "row",
+      "aria-selected": selected,
+      ...props,
+      children: [
+        /* @__PURE__ */ u(ListItem.Left, { children: /* @__PURE__ */ u(
+          Checkbox,
+          {
+            checked,
+            defaultChecked,
+            onCheckedChange,
+            readOnly
+          }
+        ) }),
+        /* @__PURE__ */ u(ListItem.DefaultContent, { label, description, metadata, icon }),
+        /* @__PURE__ */ u(ListItem.Right, { children })
+      ]
+    }
+  );
+};
+SelectableListItem.displayName = "SelectableListItem";
+const Separator = ({ className, label, decorative = false, ...props }) => {
+  const ariaHidden = decorative ? "true" : void 0;
+  if (!label) {
+    return /* @__PURE__ */ u("hr", { "aria-hidden": ariaHidden, className: cn("w-full border-bdr-subtle", className) });
+  }
+  return /* @__PURE__ */ u(
+    "div",
+    {
+      role: "separator",
+      "aria-orientation": "horizontal",
+      "aria-hidden": ariaHidden,
+      className: cn("inline-flex w-full gap-2.5", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ u("span", { className: "min-w-0 truncate text-subtle uppercase", children: label }),
+        /* @__PURE__ */ u("span", { className: "min-w-6 flex-1 border-b-1 border-bdr-subtle" })
+      ]
+    }
+  );
+};
+Separator.displayName = "Separator";
+const oppositeSide = {
+  top: "bottom",
+  bottom: "top",
+  left: "right",
   right: "left"
 };
 function useTooltipPosition(isOpen, side, triggerRef, tooltipRef) {
@@ -3924,7 +4770,7 @@ function Tooltip({
         children
       }
     ),
-    isOpen && hasContent && createPortal(
+    isOpen && hasContent && createPortal$1(
       /* @__PURE__ */ u(
         TooltipContent,
         {
@@ -3939,299 +4785,12 @@ function Tooltip({
     )
   ] });
 }
-const DialogContext = createContext(void 0);
-const DialogProvider = ({ value, children }) => {
-  return /* @__PURE__ */ u(DialogContext.Provider, { value, children });
-};
-DialogProvider.displayName = "DialogProvider";
-const useDialog = () => {
-  const context = useContext(DialogContext);
-  if (!context) {
-    throw new Error("useDialog must be used within a DialogProvider");
-  }
-  return context;
-};
-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 SearchInput = forwardRef(
-  ({
-    className,
-    id,
-    value,
-    defaultValue = "",
-    placeholder = "Search",
-    clearLabel = "Clear",
-    onChange,
-    disabled,
-    readOnly,
-    ...props
-  }, ref) => {
-    const inputId = usePrefixedId(unwrap(id));
-    const [uncontrolledValue, setUncontrolledValue] = useState$1(defaultValue);
-    const isControlled = value !== void 0;
-    const inputValue = isControlled ? value : uncontrolledValue;
-    const isValueSet = inputValue.length > 0;
-    const canClear = isValueSet && !disabled && !readOnly;
-    const handleChange = (e) => {
-      const newValue = e.currentTarget.value;
-      if (!isControlled) {
-        setUncontrolledValue(newValue);
-      }
-      onChange?.(newValue);
-    };
-    const inputRef = useRef(null);
-    const handleClear = () => {
-      const newValue = "";
-      if (!isControlled) {
-        setUncontrolledValue(newValue);
-      }
-      onChange?.(newValue);
-      inputRef.current?.focus();
-    };
-    return /* @__PURE__ */ u(
-      "div",
-      {
-        className: cn(
-          "relative flex 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",
-          disabled && "pointer-events-none select-none opacity-30",
-          className
-        ),
-        children: [
-          /* @__PURE__ */ u(
-            Search,
-            {
-              className: "absolute left-4.5 top-1/2 -translate-y-1/2 mt-0.25 text-subtle pointer-events-none",
-              size: 20,
-              strokeWidth: 1.5
-            }
-          ),
-          /* @__PURE__ */ u(
-            "input",
-            {
-              ref: useComposedRefs(ref, inputRef),
-              id: inputId,
-              className: cn(
-                "w-full text-base pr-1 px-12 border-0",
-                "text-main bg-surface-neutral",
-                "placeholder:text-subtle",
-                "focus:outline-none",
-                "read-only:bg-surface-primary"
-              ),
-              value: inputValue,
-              onChange: handleChange,
-              readOnly,
-              disabled,
-              placeholder,
-              "aria-label": "Search",
-              "aria-disabled": disabled,
-              ...props
-            }
-          ),
-          canClear && /* @__PURE__ */ u(
-            IconButton,
-            {
-              className: "absolute right-3 top-1/2 -translate-y-1/2 w-8 h-8 text-subtle",
-              size: "lg",
-              icon: X,
-              title: clearLabel,
-              onClick: handleClear,
-              disabled
-            }
-          )
-        ]
-      }
-    );
-  }
-);
-SearchInput.displayName = "SearchInput";
-function ListboxImpl({
-  className,
-  selection: controlledSelection,
-  selectionMode = "single",
-  disabled = false,
-  defaultSelection = /* @__PURE__ */ new Set(),
-  setSelection,
-  active: controlledActive,
-  defaultActive,
-  onActiveChange,
-  items,
-  renderItem,
-  getValue,
-  ...props
-}, ref) {
-  const listboxId = usePrefixedId();
-  const innerRef = useRef(null);
-  const [uncontrolledSelection, setUncontrolledSelection] = useState(defaultSelection);
-  const isSelectionControlled = controlledSelection !== void 0;
-  const selection = isSelectionControlled ? controlledSelection : uncontrolledSelection;
-  const [uncontrolledActive, setUncontrolledActive] = useState(
-    defaultActive ?? (items[0] ? getValue(items[0]) : void 0)
-  );
-  const isActiveControlled = controlledActive !== void 0;
-  const active = isActiveControlled ? controlledActive : uncontrolledActive;
-  const valueToIndexMap = useMemo(() => {
-    return new Map(items.map((item, idx) => [getValue(item), idx]));
-  }, [items, getValue]);
-  const updateActive = useCallback(
-    (newActive) => {
-      if (!isActiveControlled) {
-        setUncontrolledActive(newActive);
-      }
-      onActiveChange?.(newActive);
-    },
-    [isActiveControlled, onActiveChange]
-  );
-  useEffect(() => {
-    if (!active || !items.some((item) => getValue(item) === active)) {
-      updateActive(items[0] ? getValue(items[0]) : void 0);
-    }
-  }, [items, getValue, active, updateActive]);
-  useEffect(() => {
-    if (!active || !innerRef.current) return;
-    const el = innerRef.current.querySelector(`#${listboxId}-option-${active}`);
-    el?.scrollIntoView({ block: "nearest", behavior: "auto" });
-  }, [active, listboxId]);
-  const handleToggleValue = (value) => {
-    const isAlreadySelected = selection.has(value);
-    let newSelection;
-    if (selectionMode === "single") {
-      newSelection = isAlreadySelected ? /* @__PURE__ */ new Set() : /* @__PURE__ */ new Set([value]);
-    } else {
-      newSelection = new Set(selection);
-      if (isAlreadySelected) {
-        newSelection.delete(value);
-      } else {
-        newSelection.add(value);
-      }
-    }
-    if (!isSelectionControlled) {
-      setUncontrolledSelection(newSelection);
-    }
-    setSelection?.(newSelection);
-    updateActive(value);
-  };
-  const handleClickItem = ({ target }) => {
-    const li = target instanceof Element ? target.closest("li") : null;
-    const value = li?.getAttribute("data-value");
-    if (value) {
-      handleToggleValue(value);
-    }
-  };
-  const moveActive = (delta) => {
-    const activeIndex = active ? valueToIndexMap.get(active) ?? 0 : 0;
-    const newIndex = Math.max(0, Math.min(items.length - 1, activeIndex + delta));
-    updateActive(getValue(items[newIndex]));
-  };
-  const handleKeyDown = (e) => {
-    if (disabled) {
-      return;
-    }
-    if (e.key === "ArrowDown") {
-      e.preventDefault();
-      moveActive(1);
-    } else if (e.key === "ArrowUp") {
-      e.preventDefault();
-      moveActive(-1);
-    } else if (e.key === "Home") {
-      e.preventDefault();
-      const firstItem = items[0];
-      updateActive(firstItem && getValue(firstItem));
-    } else if (e.key === "End") {
-      e.preventDefault();
-      const lastItem = items.at(-1);
-      updateActive(lastItem && getValue(lastItem));
-    } else if (e.key === " " || e.key === "Enter") {
-      e.preventDefault();
-      if (active) {
-        handleToggleValue(active);
-      }
-    }
-  };
-  return /* @__PURE__ */ u(
-    "ul",
-    {
-      id: listboxId,
-      ref: useComposedRefs(ref, innerRef),
-      tabIndex: disabled ? -1 : 0,
-      className: cn(
-        "flex flex-col items-start grow-1 shrink-0 basis-0",
-        "max-h-100 px-0 overflow-y-auto",
-        "focus-within:border-bdr-solid focus-within:outline-none focus-within:ring-3 focus-within:ring-ring/50 focus-within:ring-offset-0",
-        "focus-within:[&>li[data-active=true]]:bg-surface-primary-hover",
-        "focus-within:[&>li[data-active=true][aria-selected=true]]:bg-surface-primary-selected-hover",
-        "transition-highlight",
-        disabled && "pointer-events-none select-none opacity-30",
-        className
-      ),
-      role: "listbox",
-      "aria-activedescendant": active ? `${listboxId}-option-${active}` : void 0,
-      "aria-disabled": disabled,
-      "aria-multiselectable": selectionMode === "multiple",
-      "aria-label": props.label ?? void 0,
-      "aria-orientation": "vertical",
-      onKeyDown: handleKeyDown,
-      onClick: handleClickItem,
-      children: items.map((item) => {
-        const value = getValue(item);
-        const selected = selection.has(value);
-        const isActive = value === active;
-        return /* @__PURE__ */ u(
-          "li",
-          {
-            id: `${listboxId}-option-${value}`,
-            "data-value": value,
-            "data-active": isActive ? "true" : "false",
-            tabIndex: -1,
-            className: cn(
-              "flex items-center w-full px-4.5 py-1 gap-x-2.5",
-              !disabled && "cursor-pointer",
-              selected ? "bg-surface-primary-selected text-alt hover:bg-surface-primary-selected-hover" : "hover:bg-surface-primary-hover"
-            ),
-            role: "option",
-            "aria-selected": selected,
-            children: renderItem(item, selected, isActive)
-          },
-          value
-        );
-      })
-    }
-  );
-}
-const Listbox = forwardRef(ListboxImpl);
-Listbox.displayName = "Listbox";
-const useScrollLock = (lock, element) => {
-  useEffect(() => {
-    if (!lock) {
-      return;
-    }
-    const target = element ?? document.body;
-    const originalOverflow = target.style.overflow;
-    target.style.overflow = "hidden";
-    return () => {
-      target.style.overflow = originalOverflow;
-    };
-  }, [lock, element]);
-};
 export {
+  Avatar,
+  AvatarProvider,
   Button,
   Checkbox,
+  Dialog,
   DialogProvider,
   IconButton,
   IdProvider,
@@ -4239,12 +4798,16 @@ export {
   Link,
   ListItem,
   Listbox,
+  ListboxProvider,
   SearchInput,
   SelectableListItem,
+  Separator,
   Tooltip,
   cn,
   unwrap,
+  useAvatar,
   useDialog,
+  useListbox,
   usePrefixedId,
   useScrollLock
 };