@overmap-ai/blocks 1.0.34-command-menu.3 → 1.0.34-command-menu.5

package/dist/blocks.js

@@ -2,7 +2,7 @@ import * as RadixAlertDialog from "@radix-ui/react-alert-dialog";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { cva, cx } from "class-variance-authority";
 import * as React from "react";
-import React__default, { createContext, useContext, useMemo, forwardRef, memo, useState, useCallback, useLayoutEffect, useEffect, use, useId, useRef } from "react";
+import React__default, { createContext, useContext, useMemo, forwardRef, memo, useState, useCallback, useLayoutEffect, useEffect, use, useRef } from "react";
 import * as RadixAvatar from "@radix-ui/react-avatar";
 import * as RadixCheckbox from "@radix-ui/react-checkbox";
 import * as RadixPrimitiveCollapsible from "@radix-ui/react-collapsible";
@@ -1021,30 +1021,37 @@ const CollapsibleTree = genericMemo(function(props) {
   );
 });
 const CommandMenuContext = createContext({});
-const SelectContext$1 = createContext({});
-const MultiSelectGroupContext = createContext({});
 const SelectedIndicatorContext$1 = createContext(false);
 const CheckboxIndicatorContext = createContext(false);
 const CommandMenuPageContext = createContext({});
 const CommandMenuDialogContext = createContext({});
-function getSelectedState(selected) {
+function getSelectedState$1(selected) {
   return selected ? "selected" : "unselected";
 }
-function getCheckedState(checked) {
+function getCheckedState$1(checked) {
   return checked === true ? "checked" : checked === false ? "unchecked" : "indeterminate";
 }
 function getActiveState(active) {
   return active ? "active" : "inactive";
 }
 const CommandMenuCheckboxIndicator = (props) => {
-  const { ref, alwaysRender = false, children, ...rest } = props;
+  const { ref, className, children, ...rest } = props;
   const checkedState = use(CheckboxIndicatorContext);
   const computedChildren = useMemo(() => {
     return typeof children === "function" ? children(checkedState) : children;
   }, [checkedState, children]);
-  const render = alwaysRender || !!checkedState;
-  if (!render) return null;
-  return /* @__PURE__ */ jsx("span", { ref, "data-state": getCheckedState(checkedState), className: "size-max", ...rest, children: computedChildren });
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ref,
+      "data-state": getCheckedState$1(checkedState),
+      className: cx(className, "inline-block size-max", {
+        invisible: checkedState === false
+      }),
+      ...rest,
+      children: computedChildren
+    }
+  );
 };
 const commandMenuContentCva = cva(
   [
@@ -1255,24 +1262,22 @@ const commandMenuGroupCva = cva(
   }
 );
 const CommandMenuItem = memo((props) => {
-  const { className, ref, closeOnSelect = true, onSelect, ...rest } = props;
+  const { className, ref, closeOnSelect = true, onSelect, filterValue, ...rest } = props;
   const { size: size2, variant, radius } = use(CommandMenuContext);
   const { setOpen } = use(CommandMenuDialogContext);
-  const handleSelect = useCallback(
-    (value) => {
-      onSelect == null ? void 0 : onSelect(value);
-      if (closeOnSelect) {
-        setOpen(false);
-      }
-    },
-    [closeOnSelect, onSelect, setOpen]
-  );
+  const handleSelect = useCallback(() => {
+    onSelect == null ? void 0 : onSelect();
+    if (closeOnSelect) {
+      setOpen(false);
+    }
+  }, [closeOnSelect, onSelect, setOpen]);
   return /* @__PURE__ */ jsx(
     CommandItem,
     {
       className: cx(className, commandMenuItemCva({ size: size2, variant, radius })),
       ref,
       onSelect: handleSelect,
+      value: filterValue,
       ...rest
     }
   );
@@ -1280,14 +1285,11 @@ const CommandMenuItem = memo((props) => {
 CommandMenuItem.displayName = "CommandMenuItem";
 const CommandMenuCheckboxItem = (props) => {
   const { children, ref, checked, onCheckedChange, onSelect, ...rest } = props;
-  const handleSelect = useCallback(
-    (value) => {
-      onSelect == null ? void 0 : onSelect(value);
-      onCheckedChange(checked !== true);
-    },
-    [checked, onCheckedChange, onSelect]
-  );
-  return /* @__PURE__ */ jsx(CheckboxIndicatorContext, { value: checked, children: /* @__PURE__ */ jsx(CommandMenuItem, { ref, onSelect: handleSelect, "data-state": getCheckedState(checked), ...rest, children }) });
+  const handleSelect = useCallback(() => {
+    onSelect == null ? void 0 : onSelect();
+    onCheckedChange(checked !== true);
+  }, [checked, onCheckedChange, onSelect]);
+  return /* @__PURE__ */ jsx(CheckboxIndicatorContext, { value: checked, children: /* @__PURE__ */ jsx(CommandMenuItem, { ref, onSelect: handleSelect, "data-state": getCheckedState$1(checked), ...rest, children }) });
 };
 const CommandMenuContent = memo((props) => {
   const providerContext = useProvider();
@@ -1378,10 +1380,26 @@ const CommandMenuList = memo((props) => {
   );
 });
 CommandMenuList.displayName = "CommandMenuList";
-const CommandMenuMultiSelectGroup = (props) => {
-  const { children, ref, defaultValues = [], values: controlledValues, onValuesChange, ...rest } = props;
-  const [itemValueMapping, setItemValueMapping] = useState(/* @__PURE__ */ new Map());
-  const [values, setValues] = useControlledState(defaultValues, controlledValues, onValuesChange);
+const SelectContext = createContext({});
+const MultiSelectContext = createContext({});
+const MultiSelectProvider = genericMemo(function MultiSelectProvider2(props) {
+  const { children, defaultValues, values: controlledValues, onValuesChange } = props;
+  const [itemValueMapping, setItemValueMapping] = useState(/* @__PURE__ */ new Set());
+  const [values, setValues] = useControlledState(defaultValues ?? [], controlledValues, onValuesChange);
+  const registerValue = useCallback((value) => {
+    setItemValueMapping((prev) => {
+      const newSet = new Set(prev);
+      newSet.add(value);
+      return newSet;
+    });
+    return () => {
+      setItemValueMapping((prev) => {
+        const newSet = new Set(prev);
+        newSet.delete(value);
+        return newSet;
+      });
+    };
+  }, []);
   const selected = useCallback((value) => values.includes(value), [values]);
   const selectValue = useCallback(
     (value) => {
@@ -1393,59 +1411,84 @@ const CommandMenuMultiSelectGroup = (props) => {
     },
     [selected, setValues, values]
   );
-  const selectContextValue = useMemo(() => {
-    return {
-      selected,
-      selectValue
-    };
-  }, [selectValue, selected]);
-  const contextValue = useMemo(() => {
-    return {
-      itemValueMapping,
-      setItemValueMapping,
-      values,
-      setValues
-    };
-  }, [itemValueMapping, setValues, values]);
-  return /* @__PURE__ */ jsx(SelectContext$1, { value: selectContextValue, children: /* @__PURE__ */ jsx(MultiSelectGroupContext, { value: contextValue, children: /* @__PURE__ */ jsx(CommandMenuGroup, { ref, "aria-multiselectable": true, ...rest, children }) }) });
-};
-const CommandMenuMultiSelectItem = (props) => {
-  const { children, ref, value, onSelect, closeOnSelect = false, ...rest } = props;
-  const { selected, selectValue: handleSelectValue } = use(SelectContext$1);
-  const itemValueId = useId();
-  const { setItemValueMapping } = use(MultiSelectGroupContext);
-  useLayoutEffect(() => {
-    setItemValueMapping((prev) => new Map(prev).set(itemValueId, value));
-    return () => {
-      setItemValueMapping((prev) => {
-        const next = new Map(prev);
-        next.delete(itemValueId);
-        return next;
-      });
-    };
-  }, [itemValueId, setItemValueMapping, value]);
-  const handleSelect = useCallback(
-    (value2) => {
-      onSelect == null ? void 0 : onSelect(value2);
-      handleSelectValue(value2);
+  const allSelected = useMemo(() => {
+    return Array.from(itemValueMapping.values()).every((value) => values.includes(value));
+  }, [itemValueMapping, values]);
+  const someSelected = useMemo(() => {
+    return Array.from(itemValueMapping.values()).some((value) => values.includes(value));
+  }, [itemValueMapping, values]);
+  const toggleSelectAll = useCallback(() => {
+    if (allSelected) {
+      setValues([]);
+    } else {
+      setValues(Array.from(itemValueMapping.values()));
+    }
+  }, [allSelected, itemValueMapping, setValues]);
+  const contextValue = useMemo(
+    () => ({ selected, selectValue, allSelected, someSelected, toggleSelectAll, registerValue }),
+    [allSelected, registerValue, selectValue, selected, someSelected, toggleSelectAll]
+  );
+  return /* @__PURE__ */ jsx(MultiSelectContext, { value: contextValue, children });
+});
+const SingleSelectRequiredProvider = genericMemo(function SingleSelectRequiredProvider2(props) {
+  const { children, defaultValue, value, onValueChange } = props;
+  const [controlledValue, setControlledValue] = useControlledState(defaultValue, value, onValueChange);
+  const selected = useCallback((v) => v === controlledValue, [controlledValue]);
+  const selectValue = useCallback(
+    (v) => {
+      if (selected(v)) return;
+      setControlledValue(v);
+    },
+    [selected, setControlledValue]
+  );
+  const contextValue = useMemo(() => ({ selected, selectValue }), [selectValue, selected]);
+  return /* @__PURE__ */ jsx(SelectContext, { value: contextValue, children });
+});
+const SingleSelectNotRequiredProvider = genericMemo(function SingleSelectNotRequiredProvider2(props) {
+  const { children, defaultValue = null, value: controlledValue, onValueChange } = props;
+  const [value, setValue] = useControlledState(defaultValue, controlledValue, onValueChange);
+  const selected = useCallback((v) => v === value, [value]);
+  const selectValue = useCallback(
+    (v) => {
+      setValue(selected(v) ? null : v);
     },
-    [handleSelectValue, onSelect]
+    [selected, setValue]
   );
+  const contextValue = useMemo(() => ({ selected, selectValue }), [selected, selectValue]);
+  return /* @__PURE__ */ jsx(SelectContext, { value: contextValue, children });
+});
+const CommandMenuMultiSelectGroup = genericMemo(function CommandMenuMultiSelectGroup2(props) {
+  const { children, ref, defaultValues, values, onValuesChange, ...rest } = props;
+  return /* @__PURE__ */ jsx(MultiSelectProvider, { values, onValuesChange, defaultValues, children: /* @__PURE__ */ jsx(CommandMenuGroup, { ref, "aria-multiselectable": true, ...rest, children }) });
+});
+const CommandMenuMultiSelectItem = genericMemo(function(props) {
+  const { children, ref, value, onSelect, closeOnSelect = false, ...rest } = props;
+  const {
+    selected,
+    selectValue: handleSelectValue,
+    registerValue
+  } = use(MultiSelectContext);
+  useLayoutEffect(() => {
+    return registerValue(value);
+  }, [registerValue, value]);
+  const handleSelect = useCallback(() => {
+    onSelect == null ? void 0 : onSelect();
+    handleSelectValue(value);
+  }, [handleSelectValue, onSelect, value]);
   const isSelected = selected(value);
   return /* @__PURE__ */ jsx(SelectedIndicatorContext$1, { value: isSelected, children: /* @__PURE__ */ jsx(
     CommandMenuItem,
     {
       ref,
       onSelect: handleSelect,
-      "data-state": getSelectedState(isSelected),
+      "data-state": getSelectedState$1(isSelected),
       "aria-selected": isSelected,
-      value,
       closeOnSelect,
       ...rest,
       children
     }
   ) });
-};
+});
 const CommandMenuOverlay = memo((props) => {
   const { container, className, ...rest } = props;
   return /* @__PURE__ */ jsx(DialogPortal, { container, children: /* @__PURE__ */ jsx(DialogOverlay$1, { className: cx(className, commandMenuOverlayCva()), "data-floating-content": "", ...rest }) });
@@ -1466,13 +1509,10 @@ const CommandMenuPageTriggerItem = (props) => {
   const { ref, page, onSelect, closeOnSelect = false, ...rest } = props;
   const { page: activePage, setPage } = use(CommandMenuPageContext);
   const isActive = useMemo(() => page === activePage, [page, activePage]);
-  const handleSelect = useCallback(
-    (value) => {
-      onSelect == null ? void 0 : onSelect(value);
-      setPage(page);
-    },
-    [onSelect, page, setPage]
-  );
+  const handleSelect = useCallback(() => {
+    onSelect == null ? void 0 : onSelect();
+    setPage(page);
+  }, [onSelect, page, setPage]);
   return /* @__PURE__ */ jsx(SelectedIndicatorContext$1, { value: isActive, children: /* @__PURE__ */ jsx(
     CommandMenuItem,
     {
@@ -1484,42 +1524,36 @@ const CommandMenuPageTriggerItem = (props) => {
     }
   ) });
 };
-const CommandMenuRadioGroup = (props) => {
-  const { children, ref, defaultValue = null, value: controlledValue, onValueChange, ...rest } = props;
-  const [value, setValue] = useControlledState(defaultValue, controlledValue, onValueChange);
-  const selected = useCallback((v) => v === value, [value]);
-  const selectValue = useCallback(
-    (v) => {
-      setValue(selected(v) ? null : v);
-    },
-    [selected, setValue]
-  );
-  const contextValue = useMemo(() => ({ selected, selectValue }), [selected, selectValue]);
-  return /* @__PURE__ */ jsx(CommandMenuGroup, { ref, role: "radiogroup", ...rest, children: /* @__PURE__ */ jsx(SelectContext$1, { value: contextValue, children }) });
-};
-const CommandMenuRadioItem = (props) => {
-  const { children, ref, value, onSelect, ...rest } = props;
-  const { selected, selectValue } = use(SelectContext$1);
-  const handleSelect = useCallback(
-    (value2) => {
-      onSelect == null ? void 0 : onSelect(value2);
-      selectValue(value2);
-    },
-    [onSelect, selectValue]
-  );
-  const isSelected = selected(value);
-  return /* @__PURE__ */ jsx(SelectedIndicatorContext$1, { value: isSelected, children: /* @__PURE__ */ jsx(
-    CommandMenuItem,
+const CommandMenuRadioGroup = genericMemo(function CommandMenuRadioGroup2(props) {
+  const { children, ref, required, defaultValue, value, onValueChange, ...rest } = props;
+  return /* @__PURE__ */ jsx(CommandMenuGroup, { ref, role: "radiogroup", ...rest, children: required ? /* @__PURE__ */ jsx(
+    SingleSelectRequiredProvider,
     {
-      ref,
-      onSelect: handleSelect,
-      "data-state": getSelectedState(isSelected),
+      defaultValue,
       value,
-      ...rest,
+      onValueChange,
+      children
+    }
+  ) : /* @__PURE__ */ jsx(
+    SingleSelectNotRequiredProvider,
+    {
+      defaultValue,
+      value,
+      onValueChange,
       children
     }
   ) });
-};
+});
+const CommandMenuRadioItem = genericMemo(function(props) {
+  const { children, ref, value, onSelect, ...rest } = props;
+  const { selected, selectValue } = use(SelectContext);
+  const handleSelect = useCallback(() => {
+    onSelect == null ? void 0 : onSelect();
+    selectValue(value);
+  }, [onSelect, selectValue, value]);
+  const isSelected = selected(value);
+  return /* @__PURE__ */ jsx(SelectedIndicatorContext$1, { value: isSelected, children: /* @__PURE__ */ jsx(CommandMenuItem, { ref, onSelect: handleSelect, "data-state": getSelectedState$1(isSelected), ...rest, children }) });
+});
 const CommandMenuRoot = memo((props) => {
   const { children, defaultOpen, open: controlledOpen, onOpenChange } = props;
   const [open, setOpen] = useControlledState(defaultOpen ?? false, controlledOpen, onOpenChange);
@@ -1532,43 +1566,44 @@ const CommandMenuRoot = memo((props) => {
   return /* @__PURE__ */ jsx(Dialog$1, { open, onOpenChange: setOpen, ...props, children: /* @__PURE__ */ jsx(CommandMenuDialogContext, { value: contextValue, children }) });
 });
 CommandMenuRoot.displayName = "CommandMenuRoot";
-const CommandMenuSelectAllItem = (props) => {
+const CommandMenuSelectAllItem = genericMemo(function(props) {
   const { ref, onSelect, closeOnSelect = false, ...rest } = props;
-  const { itemValueMapping, values, setValues } = use(MultiSelectGroupContext);
-  const selectedState = useMemo(() => {
-    const allValues = Array.from(itemValueMapping.values());
-    if (allValues.every((value) => values.includes(value))) return true;
-    if (allValues.some((value) => values.includes(value))) return "indeterminate";
-    return false;
-  }, [itemValueMapping, values]);
-  const handleSelect = useCallback(
-    (value) => {
-      onSelect == null ? void 0 : onSelect(value);
-      setValues(selectedState !== true ? Array.from(itemValueMapping.values()) : []);
-    },
-    [itemValueMapping, onSelect, selectedState, setValues]
-  );
+  const { allSelected, someSelected, toggleSelectAll } = use(MultiSelectContext);
+  const handleSelect = useCallback(() => {
+    onSelect == null ? void 0 : onSelect();
+    toggleSelectAll();
+  }, [onSelect, toggleSelectAll]);
+  const selectedState = allSelected ? true : someSelected ? "indeterminate" : false;
   return /* @__PURE__ */ jsx(CheckboxIndicatorContext, { value: selectedState, children: /* @__PURE__ */ jsx(
     CommandMenuItem,
     {
       ref,
       role: "menuitemcheckbox",
       onSelect: handleSelect,
-      "data-state": getCheckedState(selectedState),
+      "data-state": getCheckedState$1(selectedState),
       closeOnSelect,
       ...rest
     }
   ) });
-};
+});
 const CommandMenuSelectedIndicator = (props) => {
-  const { ref, alwaysRender = false, children, ...rest } = props;
+  const { ref, className, children, ...rest } = props;
   const isSelected = use(SelectedIndicatorContext$1);
   const computedChildren = useMemo(() => {
     return typeof children === "function" ? children(isSelected) : children;
   }, [isSelected, children]);
-  const render = alwaysRender || isSelected;
-  if (!render) return null;
-  return /* @__PURE__ */ jsx("span", { ref, "data-state": getSelectedState(isSelected), className: "inline-block size-max", ...rest, children: computedChildren });
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ref,
+      "data-state": getSelectedState$1(isSelected),
+      className: cx(className, "inline-block size-max", {
+        invisible: !isSelected
+      }),
+      ...rest,
+      children: computedChildren
+    }
+  );
 };
 const CommandMenuSeparator = memo((props) => {
   const { className, ref, spacing = false, ...rest } = props;
@@ -2621,29 +2656,53 @@ const Link = forwardRef((props, ref) => {
 Link.displayName = "Link";
 const CheckedIndicatorContext = createContext({});
 const CheckedIndicator = (props) => {
-  const { children } = props;
+  const { children, ref, className, ...rest } = props;
   const checked = useContext(CheckedIndicatorContext);
   const computedChildren = typeof children === "function" ? children(checked === "indeterminate") : children;
-  return checked !== false ? computedChildren : null;
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ref,
+      className: cx(className, {
+        invisible: checked === false
+      }),
+      "data-state": getCheckedState$1(checked),
+      ...rest,
+      children: computedChildren
+    }
+  );
 };
 const menuItem = cva(
-  ["select-none", "relative", "flex", "items-center", "rounded", "outline-none", "data-disabled:text-(--base-a8)"],
+  [
+    "select-none",
+    "relative",
+    "flex",
+    "items-center",
+    "rounded",
+    "outline-none",
+    "data-[disabled=true]:text-(--base-a8)"
+  ],
   {
     variants: {
       size: {
-        xs: ["h-5", "text-xs", "gap-1.5", "px-1.5"],
-        sm: ["h-6", "text-sm", "gap-2.25", "px-2.25"],
-        md: ["h-7", "text-base", "gap-3", "px-3"],
-        lg: ["h-8", "text-lg", "gap-3.75", "px-3.75"],
-        xl: ["h-9", "text-xl", "gap-4.5", "px-4.5"]
+        xs: ["h-5", "gap-1.5", "px-1.5"],
+        sm: ["h-6", "gap-2.25", "px-2.25"],
+        md: ["h-7", "gap-3", "px-3"],
+        lg: ["h-8", "gap-3.75", "px-3.75"],
+        xl: ["h-9", "gap-4.5", "px-4.5"]
       },
       variant: {
         solid: [
           "text-(--base-12)",
-          "data-highlighted:not-data-disabled:text-(--accent-contrast)",
-          "data-highlighted:not-data-disabled:bg-(--accent-a9)"
+          "data-highlighted:not-data-[disabled=true]:text-(--accent-contrast)",
+          "data-highlighted:not-data-[disabled=true]:bg-(--accent-a9)",
+          "data-highlighted:not-data-[disabled=true]:active:brightness-110"
         ],
-        soft: ["text-(--base-12)", "data-highlighted:not-data-disabled:bg-(--accent-a4)"]
+        soft: [
+          "text-(--base-12)",
+          "data-highlighted:not-data-[disabled=true]:bg-(--accent-a3)",
+          "data-highlighted:not-data-[disabled=true]:active:bg-(--accent-a4)"
+        ]
       }
     },
     defaultVariants: {
@@ -2666,20 +2725,6 @@ const menuSeparator = cva(["h-px", "bg-(--base-a6)", "w-auto", "shrink-0"], {
     size: "md"
   }
 });
-const menuSelectedIndicator = cva(["flex", "items-center", "justify-center"], {
-  variants: {
-    size: {
-      xs: ["w-4", "h-4"],
-      sm: ["w-5", "h-5"],
-      md: ["w-6", "h-6"],
-      lg: ["w-7", "h-7"],
-      xl: ["w-8", "h-8"]
-    }
-  },
-  defaultVariants: {
-    size: "md"
-  }
-});
 const menuContent = cva(
   [
     "flex",
@@ -2692,8 +2737,6 @@ const menuContent = cva(
     "ring-1",
     "ring-(--base-6)",
     "overflow-hidden"
-    // "[scrollbar-width:thin]",
-    // "[scrollbar-color:var(--base-6)_transparent]",
   ],
   {
     variants: {
@@ -2735,8 +2778,8 @@ const inputRoot = cva(
     "flex",
     "items-stretch",
     "transition-colors",
-    "has-[:disabled]:opacity-50",
-    "has-[:disabled]:pointer-events-none",
+    "data-[disabled=true]:opacity-50",
+    "data-[disabled=true]:pointer-events-none",
     "box-border",
     "bg-transparent",
     "text-(--base-12)"
@@ -2851,6 +2894,37 @@ const MenuRoot = (props) => {
   ) });
 };
 MenuRoot.displayName = "Root";
+const computeOffsets = (side, alignment) => {
+  switch (side) {
+    case "right":
+      if (alignment === "start") {
+        return { mainAxis: MENU_CONTENT_PADDING + 1, crossAxis: -8 };
+      } else if (alignment === "end") {
+        return { mainAxis: MENU_CONTENT_PADDING + 1, crossAxis: MENU_CONTENT_PADDING };
+      }
+      break;
+    case "left":
+      if (alignment === "start") {
+        return { mainAxis: MENU_CONTENT_PADDING + 1, crossAxis: -8 };
+      } else if (alignment === "end") {
+        return { mainAxis: MENU_CONTENT_PADDING + 1, crossAxis: MENU_CONTENT_PADDING };
+      }
+      break;
+  }
+  return { mainAxis: MENU_CONTENT_PADDING + 1, crossAxis: 0 };
+};
+function getSelectedState(selected) {
+  return selected ? "selected" : "unselected";
+}
+function getCheckedState(checked) {
+  return checked === true ? "checked" : checked === false ? "unchecked" : "indeterminate";
+}
+function getBooleanState(value) {
+  return value ? "true" : "false";
+}
+function getOpenState(open) {
+  return open ? "open" : "closed";
+}
 const MenuContentContext = createContext({});
 const useMenuContentContext = () => useContext(MenuContentContext);
 const MenuContent = memo(
@@ -2938,7 +3012,7 @@ const MenuContent = memo(
                       "max-h-(--overmap-menu-available-height)"
                     ),
                     ref: forwardedRef,
-                    "data-state": open ? "open" : "closed",
+                    "data-state": getOpenState(open),
                     "data-side": side,
                     "data-accent-color": accentColor,
                     ...rest,
@@ -2955,25 +3029,6 @@ const MenuContent = memo(
 );
 const SubContext = createContext({});
 const useSubContext = () => useContext(SubContext);
-const computeOffsets = (side, alignment) => {
-  switch (side) {
-    case "right":
-      if (alignment === "start") {
-        return { mainAxis: MENU_CONTENT_PADDING + 1, crossAxis: -8 };
-      } else if (alignment === "end") {
-        return { mainAxis: MENU_CONTENT_PADDING + 1, crossAxis: MENU_CONTENT_PADDING };
-      }
-      break;
-    case "left":
-      if (alignment === "start") {
-        return { mainAxis: MENU_CONTENT_PADDING + 1, crossAxis: -8 };
-      } else if (alignment === "end") {
-        return { mainAxis: MENU_CONTENT_PADDING + 1, crossAxis: MENU_CONTENT_PADDING };
-      }
-      break;
-  }
-  return { mainAxis: MENU_CONTENT_PADDING + 1, crossAxis: 0 };
-};
 const MenuSub = (props) => {
   const {
     children,
@@ -3073,69 +3128,69 @@ const MenuSub = (props) => {
 };
 MenuSub.displayName = "SubMenu";
 const TRIGGER_SELECT_KEYS = ["Enter", " "];
-const MenuItem = memo(
-  forwardRef((props, forwardedRef) => {
-    const rootMenuContext = useMenuContext();
-    const { getItemProps, activeIndex, setOpen, size: size2, variant, radius } = useMenuContentContext();
-    const { closeRoot } = useSubContext();
-    const {
-      className,
-      children,
-      onSelect,
-      onClick,
-      onKeyDown,
-      closeOnSelect = true,
-      disabled,
-      ...rest
-    } = props;
-    const { ref, index } = useListItem();
-    const mergeRefs2 = useMergeRefs([ref, forwardedRef]);
-    const handleClick = useCallback(
-      (e) => {
-        e.stopPropagation();
-        if (disabled) return;
-        if (onClick) onClick(e);
+const MenuItem = memo((props) => {
+  const rootMenuContext = useMenuContext();
+  const { getItemProps, activeIndex, setOpen, size: size2, variant, radius } = useMenuContentContext();
+  const { closeRoot } = useSubContext();
+  const {
+    ref: forwardedRef,
+    className,
+    children,
+    onSelect,
+    onClick,
+    onKeyDown,
+    closeOnSelect = true,
+    disabled = false,
+    ...rest
+  } = props;
+  const { ref, index } = useListItem();
+  const mergeRefs2 = useMergeRefs([ref, forwardedRef]);
+  const handleClick = useCallback(
+    (e) => {
+      e.stopPropagation();
+      if (disabled) return;
+      if (onClick) onClick(e);
+      if (onSelect) onSelect();
+      if (closeOnSelect) setOpen(false);
+      if (closeRoot) rootMenuContext.setOpen(false);
+    },
+    [closeOnSelect, closeRoot, disabled, rootMenuContext, onClick, onSelect, setOpen]
+  );
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (disabled) return;
+      if (onKeyDown) onKeyDown(e);
+      if (TRIGGER_SELECT_KEYS.includes(e.key)) {
         if (onSelect) onSelect();
         if (closeOnSelect) setOpen(false);
-        if (closeRoot) rootMenuContext.setOpen(false);
-      },
-      [closeOnSelect, closeRoot, disabled, rootMenuContext, onClick, onSelect, setOpen]
-    );
-    const handleKeyDown = useCallback(
-      (e) => {
-        if (disabled) return;
-        if (onKeyDown) onKeyDown(e);
-        if (TRIGGER_SELECT_KEYS.includes(e.key)) {
-          if (onSelect) onSelect();
-          if (closeOnSelect) setOpen(false);
-        }
-      },
-      [closeOnSelect, disabled, onKeyDown, onSelect, setOpen]
-    );
-    const isActive = useMemo(() => index === activeIndex, [activeIndex, index]);
-    const computedChildren = useMemo(() => {
-      return typeof children === "function" ? children({ active: isActive, selected: false }) : children;
-    }, [children, isActive]);
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: cx(className, menuItem({ size: size2, variant }), radiusCva({ radius, maxLarge: true })),
-        ref: mergeRefs2,
-        role: "menuitem",
-        "data-disabled": disabled ? "" : void 0,
-        "aria-disabled": disabled,
-        "data-highlighted": isActive ? "" : void 0,
-        ...getItemProps({
-          onClick: handleClick,
-          onKeyDown: handleKeyDown,
-          tabIndex: isActive ? 0 : -1,
-          ...rest
-        }),
-        children: computedChildren
       }
-    );
-  })
-);
+    },
+    [closeOnSelect, disabled, onKeyDown, onSelect, setOpen]
+  );
+  const isActive = useMemo(() => index === activeIndex, [activeIndex, index]);
+  const computedChildren = useMemo(() => {
+    return typeof children === "function" ? children({ active: isActive, selected: false }) : children;
+  }, [children, isActive]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cx(className, menuItem({ size: size2, variant }), radiusCva({ radius, maxLarge: true })),
+      ref: mergeRefs2,
+      role: "menuitem",
+      "data-disabled": getBooleanState(disabled),
+      "aria-disabled": disabled,
+      "data-highlighted": isActive ? "" : void 0,
+      ...getItemProps({
+        onClick: handleClick,
+        onKeyDown: handleKeyDown,
+        tabIndex: isActive ? 0 : -1,
+        ...rest
+      }),
+      children: computedChildren
+    }
+  );
+});
+MenuItem.displayName = "MenuItem";
 const MenuCheckboxItem = forwardRef((props, ref) => {
   const { checked, onCheckedChange, onSelect, ...rest } = props;
   const handleSelect = useCallback(() => {
@@ -3154,9 +3209,8 @@ const MenuCheckboxItem = forwardRef((props, ref) => {
 });
 MenuCheckboxItem.displayName = "MenuCheckboxItem";
 const MenuCheckboxItemIndicator = forwardRef((props, ref) => {
-  const { className, children, ...rest } = props;
-  const { size: size2 } = useMenuContentContext();
-  return /* @__PURE__ */ jsx("span", { ref, className: cx(className, menuSelectedIndicator({ size: size2 })), ...rest, children: /* @__PURE__ */ jsx(CheckedIndicator, { children }) });
+  const { children, ...rest } = props;
+  return /* @__PURE__ */ jsx(CheckedIndicator, { ref, ...rest, children });
 });
 MenuCheckboxItemIndicator.displayName = "MenuCheckboxItemIndicator";
 const MenuClickTrigger = memo(
@@ -3172,8 +3226,8 @@ const MenuClickTrigger = memo(
       {
         ref: mergedRefs,
         "aria-disabled": disabled,
-        "data-disabled": disabled ? "" : void 0,
-        "data-state": open ? "open" : "closed",
+        "data-disabled": getBooleanState(disabled),
+        "data-state": getOpenState(open),
         ...getReferenceProps({ disabled }),
         children
       }
@@ -3182,9 +3236,9 @@ const MenuClickTrigger = memo(
 );
 const MenuContextTrigger = memo(
   forwardRef((props, forwardedRef) => {
-    const { children, disabled } = props;
+    const { children, disabled = false } = props;
     const ref = useRef(null);
-    const { setOpen, refs, setTriggerType } = useMenuContext();
+    const { setOpen, refs, setTriggerType, open } = useMenuContext();
     const mergedRefs = useMergeRefs([forwardedRef, ref]);
     useEffect(() => {
       setTriggerType("context");
@@ -3220,7 +3274,8 @@ const MenuContextTrigger = memo(
         ref: mergedRefs,
         style: { WebkitTouchCallout: disabled ? "none" : "unset" },
         "aria-disabled": disabled,
-        "data-disabled": disabled ? "" : void 0,
+        "data-disabled": getBooleanState(disabled),
+        "data-state": getOpenState(open),
         onContextMenu: handleContextMenu,
         children
       }
@@ -3235,7 +3290,7 @@ const MenuGroup = memo(
 );
 const MenuInputField = memo(
   forwardRef((props, forwardedRef) => {
-    const { className, onValueChange, onChange, ...rest } = props;
+    const { className, onValueChange, onChange, disabled = false, ...rest } = props;
     const { activeIndex, getItemProps } = useMenuContentContext();
     const { index, ref } = useListItem();
     const mergedRefs = useMergeRefs([ref, forwardedRef]);
@@ -3256,6 +3311,8 @@ const MenuInputField = memo(
       {
         className: cx(className, "placeholder-(--base-a9)", "selection:bg-(--accent-a5)", "outline-none"),
         ref: mergedRefs,
+        disabled,
+        "data-disabled": getBooleanState(disabled),
         ...getItemProps({
           ...rest,
           tabIndex: index === activeIndex ? 0 : -1,
@@ -3278,92 +3335,55 @@ const MenuInputSlot = memo(
     return /* @__PURE__ */ jsx("div", { className: cx(className, "flex", "items-center", "text-(--base-a11)"), ref, ...rest });
   })
 );
-const SelectContext = createContext({});
-function useSelectContext() {
-  return useContext(SelectContext);
-}
-const SelectContextProvider = memo((props) => {
-  const { type, children } = props;
-  const [controlledValue, setControlledValue] = useState(
-    type === "single" ? (props == null ? void 0 : props.defaultValue) ?? null : null
-  );
-  const [controlledValues, setControlledValues] = useState(
-    type === "multi" ? (props == null ? void 0 : props.defaultValues) ?? [] : []
-  );
-  const onValuesChange = useCallback(
-    (values) => {
-      setControlledValues(values);
-      if (type === "multi" && (props == null ? void 0 : props.onValuesChange)) props.onValuesChange(values);
-    },
-    [props, type]
-  );
-  const onValueChange = useCallback(
-    (value2) => {
-      setControlledValue(value2);
-      if (type === "single" && (props == null ? void 0 : props.onValueChange)) props.onValueChange(value2);
-    },
-    [props, type]
-  );
-  const value = useMemo(
-    () => type === "multi" ? {
-      type,
-      values: (props == null ? void 0 : props.values) ?? controlledValues,
-      handleValuesChange: onValuesChange
-    } : {
-      type,
-      value: props.value ?? controlledValue,
-      handleValueChange: onValueChange
-    },
-    [controlledValue, controlledValues, onValueChange, onValuesChange, props, type]
-  );
-  return /* @__PURE__ */ jsx(SelectContext.Provider, { value, children });
+const MenuMultiSelectGroup = genericMemo(function MenuMultiSelectGroup2(props) {
+  const { ref, children, defaultValues, values, onValuesChange, ...rest } = props;
+  return /* @__PURE__ */ jsx(MenuGroup, { ref, ...rest, children: /* @__PURE__ */ jsx(MultiSelectProvider, { defaultValues, values, onValuesChange, children }) });
 });
-SelectContextProvider.displayName = "SelectContextProvider";
-const MenuMultiSelectGroup = memo(
-  forwardRef((props, ref) => {
-    const { children, values, onValuesChange, ...rest } = props;
-    return /* @__PURE__ */ jsx(MenuGroup, { ref, ...rest, children: /* @__PURE__ */ jsx(SelectContextProvider, { type: "multi", values, onValuesChange, children }) });
-  })
-);
-const SelectedIndicatorContext = createContext({});
+const SelectedIndicatorContext = createContext(false);
 const useSelectedIndicatorContext = () => useContext(SelectedIndicatorContext);
 const MenuSelectedIndicator = forwardRef((props, ref) => {
   const { children } = props;
-  const { selected } = useSelectedIndicatorContext();
-  const { size: size2 } = useMenuContentContext();
-  return /* @__PURE__ */ jsx("div", { ref, className: menuSelectedIndicator({ size: size2 }), children: selected ? children : null });
+  const isSelected = useSelectedIndicatorContext();
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ref,
+      className: cx({
+        invisible: !isSelected
+      }),
+      "data-state": getSelectedState(isSelected),
+      children
+    }
+  );
 });
 MenuSelectedIndicator.displayName = "SelectedIndicator";
-const MenuMultiSelectItem = memo(
-  forwardRef((props, ref) => {
-    const { onSelect, children, closeOnSelect = false, value, ...rest } = props;
-    const { values, handleValuesChange } = useSelectContext();
-    const selected = useMemo(() => values.includes(value), [value, values]);
-    const handleSelect = useCallback(() => {
-      if (!selected) {
-        handleValuesChange([...values, value]);
-      } else {
-        handleValuesChange(values.filter((currentValue) => currentValue !== value));
-      }
-      if (onSelect) onSelect();
-    }, [handleValuesChange, onSelect, selected, value, values]);
-    const computedChildren = useMemo(() => {
-      return typeof children === "function" ? ({ active }) => children({ selected, active }) : children;
-    }, [children, selected]);
-    return /* @__PURE__ */ jsx(SelectedIndicatorContext.Provider, { value: { selected }, children: /* @__PURE__ */ jsx(
-      MenuItem,
-      {
-        ref,
-        role: "menuitemcheckbox",
-        onSelect: handleSelect,
-        closeOnSelect,
-        "data-selected": selected ? "" : void 0,
-        ...rest,
-        children: computedChildren
-      }
-    ) });
-  })
-);
+const MenuMultiSelectItem = genericMemo(function(props) {
+  const { ref, onSelect, children, closeOnSelect = false, value, ...rest } = props;
+  const { selected, selectValue, registerValue } = use(MultiSelectContext);
+  useLayoutEffect(() => {
+    return registerValue(value);
+  }, [registerValue, value]);
+  const isSelected = selected(value);
+  const handleSelect = useCallback(() => {
+    if (onSelect) onSelect();
+    selectValue(value);
+  }, [onSelect, selectValue, value]);
+  const computedChildren = useMemo(() => {
+    return typeof children === "function" ? ({ active }) => children({ selected: isSelected, active }) : children;
+  }, [children, isSelected]);
+  return /* @__PURE__ */ jsx(SelectedIndicatorContext.Provider, { value: isSelected, children: /* @__PURE__ */ jsx(
+    MenuItem,
+    {
+      ref,
+      role: "menuitemcheckbox",
+      onSelect: handleSelect,
+      closeOnSelect,
+      "data-state": getSelectedState(isSelected),
+      ...rest,
+      children: computedChildren
+    }
+  ) });
+});
 const PagesContext = createContext({});
 const usePagesContext = () => useContext(PagesContext);
 const MenuPages = (props) => {
@@ -3407,77 +3427,65 @@ const MenuScroll = forwardRef((props, ref) => {
   );
 });
 MenuScroll.displayName = "MenuScroll";
-const SelectAllContext = createContext({});
-const MenuSelectAllIndicator = forwardRef((props, ref) => {
-  const { className, children, ...rest } = props;
-  const { size: size2 } = useMenuContentContext();
-  const { selected } = useContext(SelectAllContext);
-  const computedChildren = useMemo(() => {
-    return typeof children === "function" ? children(selected === "indeterminate") : children;
-  }, [children, selected]);
-  return /* @__PURE__ */ jsx("span", { ref, className: cx(className, menuSelectedIndicator({ size: size2 })), ...rest, children: selected ? computedChildren : null });
-});
-MenuSelectAllIndicator.displayName = "SelectAllIndicator";
-const MenuSelectAllItem = forwardRef((props, ref) => {
-  const { children, allValues, onSelect, closeOnSelect = false, ...rest } = props;
-  const { values, handleValuesChange } = useSelectContext();
-  const selected = useMemo(() => {
-    const selectValuesSet = new Set(values);
-    if (allValues.every((value) => selectValuesSet.has(value))) return true;
-    if (values.length > 0) return "indeterminate";
-    return false;
-  }, [allValues, values]);
+const MenuSelectAllItem = genericMemo((props) => {
+  const { ref, children, onSelect, closeOnSelect = false, ...rest } = props;
+  const { allSelected, someSelected, toggleSelectAll } = use(MultiSelectContext);
+  const selectedState = allSelected ? true : someSelected ? "indeterminate" : false;
   const handleSelect = useCallback(() => {
     onSelect == null ? void 0 : onSelect();
-    switch (selected) {
-      case true:
-        handleValuesChange([]);
-        break;
-      case "indeterminate":
-      case false: {
-        handleValuesChange(allValues);
-        break;
-      }
+    toggleSelectAll();
+  }, [onSelect, toggleSelectAll]);
+  const computedChildren = useMemo(() => {
+    return typeof children === "function" ? ({ active }) => children({ selected: selectedState, active }) : children;
+  }, [children, selectedState]);
+  return /* @__PURE__ */ jsx(CheckedIndicatorContext, { value: selectedState, children: /* @__PURE__ */ jsx(
+    MenuItem,
+    {
+      onSelect: handleSelect,
+      ref,
+      "data-state": getCheckedState(selectedState),
+      closeOnSelect,
+      ...rest,
+      children: computedChildren
     }
-  }, [allValues, handleValuesChange, onSelect, selected]);
+  ) });
+});
+const MenuSelectGroup = genericMemo(function MenuSelectGroup2(props) {
+  const { ref, children, required, defaultValue, value, onValueChange, ...rest } = props;
+  return /* @__PURE__ */ jsx(MenuGroup, { ref, ...rest, children: required ? /* @__PURE__ */ jsx(SingleSelectRequiredProvider, { defaultValue, value, onValueChange, children }) : /* @__PURE__ */ jsx(
+    SingleSelectNotRequiredProvider,
+    {
+      defaultValue,
+      value,
+      onValueChange,
+      children
+    }
+  ) });
+});
+const MenuSelectItem = genericMemo(function(props) {
+  const { ref, value, onSelect, children, closeOnSelect = true, ...rest } = props;
+  const { selected, selectValue } = use(SelectContext);
+  const isSelected = useMemo(() => selected(value), [selected, value]);
+  const handleSelect = useCallback(() => {
+    if (onSelect) onSelect();
+    selectValue(value);
+  }, [onSelect, selectValue, value]);
   const computedChildren = useMemo(() => {
-    return typeof children === "function" ? ({ active }) => children({ selected, active }) : children;
-  }, [children, selected]);
-  return /* @__PURE__ */ jsx(SelectAllContext.Provider, { value: { selected }, children: /* @__PURE__ */ jsx(MenuItem, { onSelect: handleSelect, ref, "data-state": selected, closeOnSelect, ...rest, children: computedChildren }) });
+    return typeof children === "function" ? ({ active }) => children({ selected: isSelected, active }) : children;
+  }, [children, isSelected]);
+  return /* @__PURE__ */ jsx(SelectedIndicatorContext.Provider, { value: isSelected, children: /* @__PURE__ */ jsx(
+    MenuItem,
+    {
+      ref,
+      role: "menuitemcheckbox",
+      onSelect: handleSelect,
+      closeOnSelect,
+      "data-state": getSelectedState(isSelected),
+      ...rest,
+      children: computedChildren
+    }
+  ) });
 });
-MenuSelectAllItem.displayName = "SelectAllItem";
-const MenuSelectGroup = memo(
-  forwardRef((props, ref) => {
-    const { children, value, onValueChange } = props;
-    return /* @__PURE__ */ jsx(SelectContextProvider, { type: "single", value, onValueChange, children: /* @__PURE__ */ jsx(MenuGroup, { ref, children }) });
-  })
-);
-const MenuSelectItem = memo(
-  forwardRef((props, ref) => {
-    const { value, onSelect, children, closeOnSelect = true, ...rest } = props;
-    const { value: currentValue, handleValueChange } = useSelectContext();
-    const selected = useMemo(() => value === currentValue, [currentValue, value]);
-    const handleSelect = useCallback(() => {
-      handleValueChange(!selected ? value : null);
-      if (onSelect) onSelect();
-    }, [handleValueChange, onSelect, selected, value]);
-    const computedChildren = useMemo(() => {
-      return typeof children === "function" ? ({ active }) => children({ selected, active }) : children;
-    }, [children, selected]);
-    return /* @__PURE__ */ jsx(SelectedIndicatorContext.Provider, { value: { selected }, children: /* @__PURE__ */ jsx(
-      MenuItem,
-      {
-        ref,
-        role: "menuitemcheckbox",
-        onSelect: handleSelect,
-        closeOnSelect,
-        "data-selected": selected ? "" : void 0,
-        ...rest,
-        children: computedChildren
-      }
-    ) });
-  })
-);
 const MenuSeparator = memo(
   forwardRef((props, ref) => {
     const { className, ...rest } = props;
@@ -3548,7 +3556,7 @@ const MenuSubContent = memo(
                   "max-h-(--overmap-menu-available-height)"
                 ),
                 ref: forwardedRef,
-                "data-state": open ? "open" : "closed",
+                "data-state": getOpenState(open),
                 "data-side": side,
                 "data-accent-color": accentColor,
                 ...rest,
@@ -3572,7 +3580,7 @@ const MenuSubTrigger = memo(
         ref: mergedRefs,
         closeOnSelect: false,
         "aria-haspopup": "menu",
-        "data-open": open,
+        "data-state": getOpenState(open),
         disabled,
         ...getReferenceProps(rest),
         children
@@ -3624,7 +3632,6 @@ const Menu = {
   SelectAllItem: MenuSelectAllItem,
   CheckboxItem: MenuCheckboxItem,
   // indicators
-  SelectAllIndicator: MenuSelectAllIndicator,
   SelectedIndicator: MenuSelectedIndicator,
   CheckboxItemIndicator: MenuCheckboxItemIndicator,
   // input
@@ -5006,7 +5013,6 @@ export {
   MenuPages,
   MenuRoot,
   MenuScroll,
-  MenuSelectAllIndicator,
   MenuSelectAllItem,
   MenuSelectGroup,
   MenuSelectItem,