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

package/dist/blocks.umd.cjs

@@ -1026,30 +1026,37 @@
     );
   });
   const CommandMenuContext = React.createContext({});
-  const SelectContext$1 = React.createContext({});
-  const MultiSelectGroupContext = React.createContext({});
   const SelectedIndicatorContext$1 = React.createContext(false);
   const CheckboxIndicatorContext = React.createContext(false);
   const CommandMenuPageContext = React.createContext({});
   const CommandMenuDialogContext = React.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 = React.use(CheckboxIndicatorContext);
     const computedChildren = React.useMemo(() => {
       return typeof children === "function" ? children(checkedState) : children;
     }, [checkedState, children]);
-    const render = alwaysRender || !!checkedState;
-    if (!render) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx("span", { ref, "data-state": getCheckedState(checkedState), className: "size-max", ...rest, children: computedChildren });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        ref,
+        "data-state": getCheckedState$1(checkedState),
+        className: classVarianceAuthority.cx(className, "inline-block size-max", {
+          invisible: checkedState === false
+        }),
+        ...rest,
+        children: computedChildren
+      }
+    );
   };
   const commandMenuContentCva = classVarianceAuthority.cva(
     [
@@ -1260,24 +1267,22 @@
     }
   );
   const CommandMenuItem = React.memo((props) => {
-    const { className, ref, closeOnSelect = true, onSelect, ...rest } = props;
+    const { className, ref, closeOnSelect = true, onSelect, filterValue, ...rest } = props;
     const { size, variant, radius } = React.use(CommandMenuContext);
     const { setOpen } = React.use(CommandMenuDialogContext);
-    const handleSelect = React.useCallback(
-      (value) => {
-        onSelect == null ? void 0 : onSelect(value);
-        if (closeOnSelect) {
-          setOpen(false);
-        }
-      },
-      [closeOnSelect, onSelect, setOpen]
-    );
+    const handleSelect = React.useCallback(() => {
+      onSelect == null ? void 0 : onSelect();
+      if (closeOnSelect) {
+        setOpen(false);
+      }
+    }, [closeOnSelect, onSelect, setOpen]);
     return /* @__PURE__ */ jsxRuntime.jsx(
       cmdk.CommandItem,
       {
         className: classVarianceAuthority.cx(className, commandMenuItemCva({ size, variant, radius })),
         ref,
         onSelect: handleSelect,
+        value: filterValue,
         ...rest
       }
     );
@@ -1285,14 +1290,11 @@
   CommandMenuItem.displayName = "CommandMenuItem";
   const CommandMenuCheckboxItem = (props) => {
     const { children, ref, checked, onCheckedChange, onSelect, ...rest } = props;
-    const handleSelect = React.useCallback(
-      (value) => {
-        onSelect == null ? void 0 : onSelect(value);
-        onCheckedChange(checked !== true);
-      },
-      [checked, onCheckedChange, onSelect]
-    );
-    return /* @__PURE__ */ jsxRuntime.jsx(CheckboxIndicatorContext, { value: checked, children: /* @__PURE__ */ jsxRuntime.jsx(CommandMenuItem, { ref, onSelect: handleSelect, "data-state": getCheckedState(checked), ...rest, children }) });
+    const handleSelect = React.useCallback(() => {
+      onSelect == null ? void 0 : onSelect();
+      onCheckedChange(checked !== true);
+    }, [checked, onCheckedChange, onSelect]);
+    return /* @__PURE__ */ jsxRuntime.jsx(CheckboxIndicatorContext, { value: checked, children: /* @__PURE__ */ jsxRuntime.jsx(CommandMenuItem, { ref, onSelect: handleSelect, "data-state": getCheckedState$1(checked), ...rest, children }) });
   };
   const CommandMenuContent = React.memo((props) => {
     const providerContext = useProvider();
@@ -1383,10 +1385,26 @@
     );
   });
   CommandMenuList.displayName = "CommandMenuList";
-  const CommandMenuMultiSelectGroup = (props) => {
-    const { children, ref, defaultValues = [], values: controlledValues, onValuesChange, ...rest } = props;
-    const [itemValueMapping, setItemValueMapping] = React.useState(/* @__PURE__ */ new Map());
-    const [values, setValues] = useControlledState(defaultValues, controlledValues, onValuesChange);
+  const SelectContext = React.createContext({});
+  const MultiSelectContext = React.createContext({});
+  const MultiSelectProvider = genericMemo(function MultiSelectProvider2(props) {
+    const { children, defaultValues, values: controlledValues, onValuesChange } = props;
+    const [itemValueMapping, setItemValueMapping] = React.useState(/* @__PURE__ */ new Set());
+    const [values, setValues] = useControlledState(defaultValues ?? [], controlledValues, onValuesChange);
+    const registerValue = React.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 = React.useCallback((value) => values.includes(value), [values]);
     const selectValue = React.useCallback(
       (value) => {
@@ -1398,59 +1416,84 @@
       },
       [selected, setValues, values]
     );
-    const selectContextValue = React.useMemo(() => {
-      return {
-        selected,
-        selectValue
-      };
-    }, [selectValue, selected]);
-    const contextValue = React.useMemo(() => {
-      return {
-        itemValueMapping,
-        setItemValueMapping,
-        values,
-        setValues
-      };
-    }, [itemValueMapping, setValues, values]);
-    return /* @__PURE__ */ jsxRuntime.jsx(SelectContext$1, { value: selectContextValue, children: /* @__PURE__ */ jsxRuntime.jsx(MultiSelectGroupContext, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(CommandMenuGroup, { ref, "aria-multiselectable": true, ...rest, children }) }) });
-  };
-  const CommandMenuMultiSelectItem = (props) => {
-    const { children, ref, value, onSelect, closeOnSelect = false, ...rest } = props;
-    const { selected, selectValue: handleSelectValue } = React.use(SelectContext$1);
-    const itemValueId = React.useId();
-    const { setItemValueMapping } = React.use(MultiSelectGroupContext);
-    React.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 = React.useCallback(
-      (value2) => {
-        onSelect == null ? void 0 : onSelect(value2);
-        handleSelectValue(value2);
+    const allSelected = React.useMemo(() => {
+      return Array.from(itemValueMapping.values()).every((value) => values.includes(value));
+    }, [itemValueMapping, values]);
+    const someSelected = React.useMemo(() => {
+      return Array.from(itemValueMapping.values()).some((value) => values.includes(value));
+    }, [itemValueMapping, values]);
+    const toggleSelectAll = React.useCallback(() => {
+      if (allSelected) {
+        setValues([]);
+      } else {
+        setValues(Array.from(itemValueMapping.values()));
+      }
+    }, [allSelected, itemValueMapping, setValues]);
+    const contextValue = React.useMemo(
+      () => ({ selected, selectValue, allSelected, someSelected, toggleSelectAll, registerValue }),
+      [allSelected, registerValue, selectValue, selected, someSelected, toggleSelectAll]
+    );
+    return /* @__PURE__ */ jsxRuntime.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 = React.useCallback((v) => v === controlledValue, [controlledValue]);
+    const selectValue = React.useCallback(
+      (v) => {
+        if (selected(v)) return;
+        setControlledValue(v);
+      },
+      [selected, setControlledValue]
+    );
+    const contextValue = React.useMemo(() => ({ selected, selectValue }), [selectValue, selected]);
+    return /* @__PURE__ */ jsxRuntime.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 = React.useCallback((v) => v === value, [value]);
+    const selectValue = React.useCallback(
+      (v) => {
+        setValue(selected(v) ? null : v);
       },
-      [handleSelectValue, onSelect]
+      [selected, setValue]
     );
+    const contextValue = React.useMemo(() => ({ selected, selectValue }), [selected, selectValue]);
+    return /* @__PURE__ */ jsxRuntime.jsx(SelectContext, { value: contextValue, children });
+  });
+  const CommandMenuMultiSelectGroup = genericMemo(function CommandMenuMultiSelectGroup2(props) {
+    const { children, ref, defaultValues, values, onValuesChange, ...rest } = props;
+    return /* @__PURE__ */ jsxRuntime.jsx(MultiSelectProvider, { values, onValuesChange, defaultValues, children: /* @__PURE__ */ jsxRuntime.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
+    } = React.use(MultiSelectContext);
+    React.useLayoutEffect(() => {
+      return registerValue(value);
+    }, [registerValue, value]);
+    const handleSelect = React.useCallback(() => {
+      onSelect == null ? void 0 : onSelect();
+      handleSelectValue(value);
+    }, [handleSelectValue, onSelect, value]);
     const isSelected = selected(value);
     return /* @__PURE__ */ jsxRuntime.jsx(SelectedIndicatorContext$1, { value: isSelected, children: /* @__PURE__ */ jsxRuntime.jsx(
       CommandMenuItem,
       {
         ref,
         onSelect: handleSelect,
-        "data-state": getSelectedState(isSelected),
+        "data-state": getSelectedState$1(isSelected),
         "aria-selected": isSelected,
-        value,
         closeOnSelect,
         ...rest,
         children
       }
     ) });
-  };
+  });
   const CommandMenuOverlay = React.memo((props) => {
     const { container, className, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(RadixDialog.DialogPortal, { container, children: /* @__PURE__ */ jsxRuntime.jsx(RadixDialog.DialogOverlay, { className: classVarianceAuthority.cx(className, commandMenuOverlayCva()), "data-floating-content": "", ...rest }) });
@@ -1471,13 +1514,10 @@
     const { ref, page, onSelect, closeOnSelect = false, ...rest } = props;
     const { page: activePage, setPage } = React.use(CommandMenuPageContext);
     const isActive = React.useMemo(() => page === activePage, [page, activePage]);
-    const handleSelect = React.useCallback(
-      (value) => {
-        onSelect == null ? void 0 : onSelect(value);
-        setPage(page);
-      },
-      [onSelect, page, setPage]
-    );
+    const handleSelect = React.useCallback(() => {
+      onSelect == null ? void 0 : onSelect();
+      setPage(page);
+    }, [onSelect, page, setPage]);
     return /* @__PURE__ */ jsxRuntime.jsx(SelectedIndicatorContext$1, { value: isActive, children: /* @__PURE__ */ jsxRuntime.jsx(
       CommandMenuItem,
       {
@@ -1489,42 +1529,36 @@
       }
     ) });
   };
-  const CommandMenuRadioGroup = (props) => {
-    const { children, ref, defaultValue = null, value: controlledValue, onValueChange, ...rest } = props;
-    const [value, setValue] = useControlledState(defaultValue, controlledValue, onValueChange);
-    const selected = React.useCallback((v) => v === value, [value]);
-    const selectValue = React.useCallback(
-      (v) => {
-        setValue(selected(v) ? null : v);
-      },
-      [selected, setValue]
-    );
-    const contextValue = React.useMemo(() => ({ selected, selectValue }), [selected, selectValue]);
-    return /* @__PURE__ */ jsxRuntime.jsx(CommandMenuGroup, { ref, role: "radiogroup", ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(SelectContext$1, { value: contextValue, children }) });
-  };
-  const CommandMenuRadioItem = (props) => {
-    const { children, ref, value, onSelect, ...rest } = props;
-    const { selected, selectValue } = React.use(SelectContext$1);
-    const handleSelect = React.useCallback(
-      (value2) => {
-        onSelect == null ? void 0 : onSelect(value2);
-        selectValue(value2);
-      },
-      [onSelect, selectValue]
-    );
-    const isSelected = selected(value);
-    return /* @__PURE__ */ jsxRuntime.jsx(SelectedIndicatorContext$1, { value: isSelected, children: /* @__PURE__ */ jsxRuntime.jsx(
-      CommandMenuItem,
+  const CommandMenuRadioGroup = genericMemo(function CommandMenuRadioGroup2(props) {
+    const { children, ref, required, defaultValue, value, onValueChange, ...rest } = props;
+    return /* @__PURE__ */ jsxRuntime.jsx(CommandMenuGroup, { ref, role: "radiogroup", ...rest, children: required ? /* @__PURE__ */ jsxRuntime.jsx(
+      SingleSelectRequiredProvider,
       {
-        ref,
-        onSelect: handleSelect,
-        "data-state": getSelectedState(isSelected),
+        defaultValue,
         value,
-        ...rest,
+        onValueChange,
+        children
+      }
+    ) : /* @__PURE__ */ jsxRuntime.jsx(
+      SingleSelectNotRequiredProvider,
+      {
+        defaultValue,
+        value,
+        onValueChange,
         children
       }
     ) });
-  };
+  });
+  const CommandMenuRadioItem = genericMemo(function(props) {
+    const { children, ref, value, onSelect, ...rest } = props;
+    const { selected, selectValue } = React.use(SelectContext);
+    const handleSelect = React.useCallback(() => {
+      onSelect == null ? void 0 : onSelect();
+      selectValue(value);
+    }, [onSelect, selectValue, value]);
+    const isSelected = selected(value);
+    return /* @__PURE__ */ jsxRuntime.jsx(SelectedIndicatorContext$1, { value: isSelected, children: /* @__PURE__ */ jsxRuntime.jsx(CommandMenuItem, { ref, onSelect: handleSelect, "data-state": getSelectedState$1(isSelected), ...rest, children }) });
+  });
   const CommandMenuRoot = React.memo((props) => {
     const { children, defaultOpen, open: controlledOpen, onOpenChange } = props;
     const [open, setOpen] = useControlledState(defaultOpen ?? false, controlledOpen, onOpenChange);
@@ -1537,43 +1571,44 @@
     return /* @__PURE__ */ jsxRuntime.jsx(RadixDialog.Dialog, { open, onOpenChange: setOpen, ...props, children: /* @__PURE__ */ jsxRuntime.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 } = React.use(MultiSelectGroupContext);
-    const selectedState = React.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 = React.useCallback(
-      (value) => {
-        onSelect == null ? void 0 : onSelect(value);
-        setValues(selectedState !== true ? Array.from(itemValueMapping.values()) : []);
-      },
-      [itemValueMapping, onSelect, selectedState, setValues]
-    );
+    const { allSelected, someSelected, toggleSelectAll } = React.use(MultiSelectContext);
+    const handleSelect = React.useCallback(() => {
+      onSelect == null ? void 0 : onSelect();
+      toggleSelectAll();
+    }, [onSelect, toggleSelectAll]);
+    const selectedState = allSelected ? true : someSelected ? "indeterminate" : false;
     return /* @__PURE__ */ jsxRuntime.jsx(CheckboxIndicatorContext, { value: selectedState, children: /* @__PURE__ */ jsxRuntime.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 = React.use(SelectedIndicatorContext$1);
     const computedChildren = React.useMemo(() => {
       return typeof children === "function" ? children(isSelected) : children;
     }, [isSelected, children]);
-    const render = alwaysRender || isSelected;
-    if (!render) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx("span", { ref, "data-state": getSelectedState(isSelected), className: "inline-block size-max", ...rest, children: computedChildren });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        ref,
+        "data-state": getSelectedState$1(isSelected),
+        className: classVarianceAuthority.cx(className, "inline-block size-max", {
+          invisible: !isSelected
+        }),
+        ...rest,
+        children: computedChildren
+      }
+    );
   };
   const CommandMenuSeparator = React.memo((props) => {
     const { className, ref, spacing = false, ...rest } = props;
@@ -2626,29 +2661,53 @@
   Link.displayName = "Link";
   const CheckedIndicatorContext = React.createContext({});
   const CheckedIndicator = (props) => {
-    const { children } = props;
+    const { children, ref, className, ...rest } = props;
     const checked = React.useContext(CheckedIndicatorContext);
     const computedChildren = typeof children === "function" ? children(checked === "indeterminate") : children;
-    return checked !== false ? computedChildren : null;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        ref,
+        className: classVarianceAuthority.cx(className, {
+          invisible: checked === false
+        }),
+        "data-state": getCheckedState$1(checked),
+        ...rest,
+        children: computedChildren
+      }
+    );
   };
   const menuItem = classVarianceAuthority.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: {
@@ -2671,20 +2730,6 @@
       size: "md"
     }
   });
-  const menuSelectedIndicator = classVarianceAuthority.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 = classVarianceAuthority.cva(
     [
       "flex",
@@ -2697,8 +2742,6 @@
       "ring-1",
       "ring-(--base-6)",
       "overflow-hidden"
-      // "[scrollbar-width:thin]",
-      // "[scrollbar-color:var(--base-6)_transparent]",
     ],
     {
       variants: {
@@ -2740,8 +2783,8 @@
       "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)"
@@ -2856,6 +2899,37 @@
     ) });
   };
   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 = React.createContext({});
   const useMenuContentContext = () => React.useContext(MenuContentContext);
   const MenuContent = React.memo(
@@ -2943,7 +3017,7 @@
                         "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,
@@ -2960,25 +3034,6 @@
   );
   const SubContext = React.createContext({});
   const useSubContext = () => React.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,
@@ -3078,69 +3133,69 @@
   };
   MenuSub.displayName = "SubMenu";
   const TRIGGER_SELECT_KEYS = ["Enter", " "];
-  const MenuItem = React.memo(
-    React.forwardRef((props, forwardedRef) => {
-      const rootMenuContext = useMenuContext();
-      const { getItemProps, activeIndex, setOpen, size, variant, radius } = useMenuContentContext();
-      const { closeRoot } = useSubContext();
-      const {
-        className,
-        children,
-        onSelect,
-        onClick,
-        onKeyDown,
-        closeOnSelect = true,
-        disabled,
-        ...rest
-      } = props;
-      const { ref, index } = react.useListItem();
-      const mergeRefs2 = react.useMergeRefs([ref, forwardedRef]);
-      const handleClick = React.useCallback(
-        (e) => {
-          e.stopPropagation();
-          if (disabled) return;
-          if (onClick) onClick(e);
+  const MenuItem = React.memo((props) => {
+    const rootMenuContext = useMenuContext();
+    const { getItemProps, activeIndex, setOpen, size, variant, radius } = useMenuContentContext();
+    const { closeRoot } = useSubContext();
+    const {
+      ref: forwardedRef,
+      className,
+      children,
+      onSelect,
+      onClick,
+      onKeyDown,
+      closeOnSelect = true,
+      disabled = false,
+      ...rest
+    } = props;
+    const { ref, index } = react.useListItem();
+    const mergeRefs2 = react.useMergeRefs([ref, forwardedRef]);
+    const handleClick = React.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 = React.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 = React.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 = React.useMemo(() => index === activeIndex, [activeIndex, index]);
-      const computedChildren = React.useMemo(() => {
-        return typeof children === "function" ? children({ active: isActive, selected: false }) : children;
-      }, [children, isActive]);
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          className: classVarianceAuthority.cx(className, menuItem({ size, 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 = React.useMemo(() => index === activeIndex, [activeIndex, index]);
+    const computedChildren = React.useMemo(() => {
+      return typeof children === "function" ? children({ active: isActive, selected: false }) : children;
+    }, [children, isActive]);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: classVarianceAuthority.cx(className, menuItem({ size, 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 = React.forwardRef((props, ref) => {
     const { checked, onCheckedChange, onSelect, ...rest } = props;
     const handleSelect = React.useCallback(() => {
@@ -3159,9 +3214,8 @@
   });
   MenuCheckboxItem.displayName = "MenuCheckboxItem";
   const MenuCheckboxItemIndicator = React.forwardRef((props, ref) => {
-    const { className, children, ...rest } = props;
-    const { size } = useMenuContentContext();
-    return /* @__PURE__ */ jsxRuntime.jsx("span", { ref, className: classVarianceAuthority.cx(className, menuSelectedIndicator({ size })), ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(CheckedIndicator, { children }) });
+    const { children, ...rest } = props;
+    return /* @__PURE__ */ jsxRuntime.jsx(CheckedIndicator, { ref, ...rest, children });
   });
   MenuCheckboxItemIndicator.displayName = "MenuCheckboxItemIndicator";
   const MenuClickTrigger = React.memo(
@@ -3177,8 +3231,8 @@
         {
           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
         }
@@ -3187,9 +3241,9 @@
   );
   const MenuContextTrigger = React.memo(
     React.forwardRef((props, forwardedRef) => {
-      const { children, disabled } = props;
+      const { children, disabled = false } = props;
       const ref = React.useRef(null);
-      const { setOpen, refs, setTriggerType } = useMenuContext();
+      const { setOpen, refs, setTriggerType, open } = useMenuContext();
       const mergedRefs = react.useMergeRefs([forwardedRef, ref]);
       React.useEffect(() => {
         setTriggerType("context");
@@ -3225,7 +3279,8 @@
           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
         }
@@ -3240,7 +3295,7 @@
   );
   const MenuInputField = React.memo(
     React.forwardRef((props, forwardedRef) => {
-      const { className, onValueChange, onChange, ...rest } = props;
+      const { className, onValueChange, onChange, disabled = false, ...rest } = props;
       const { activeIndex, getItemProps } = useMenuContentContext();
       const { index, ref } = react.useListItem();
       const mergedRefs = react.useMergeRefs([ref, forwardedRef]);
@@ -3261,6 +3316,8 @@
         {
           className: classVarianceAuthority.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,
@@ -3283,92 +3340,55 @@
       return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classVarianceAuthority.cx(className, "flex", "items-center", "text-(--base-a11)"), ref, ...rest });
     })
   );
-  const SelectContext = React.createContext({});
-  function useSelectContext() {
-    return React.useContext(SelectContext);
-  }
-  const SelectContextProvider = React.memo((props) => {
-    const { type, children } = props;
-    const [controlledValue, setControlledValue] = React.useState(
-      type === "single" ? (props == null ? void 0 : props.defaultValue) ?? null : null
-    );
-    const [controlledValues, setControlledValues] = React.useState(
-      type === "multi" ? (props == null ? void 0 : props.defaultValues) ?? [] : []
-    );
-    const onValuesChange = React.useCallback(
-      (values) => {
-        setControlledValues(values);
-        if (type === "multi" && (props == null ? void 0 : props.onValuesChange)) props.onValuesChange(values);
-      },
-      [props, type]
-    );
-    const onValueChange = React.useCallback(
-      (value2) => {
-        setControlledValue(value2);
-        if (type === "single" && (props == null ? void 0 : props.onValueChange)) props.onValueChange(value2);
-      },
-      [props, type]
-    );
-    const value = React.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__ */ jsxRuntime.jsx(SelectContext.Provider, { value, children });
+  const MenuMultiSelectGroup = genericMemo(function MenuMultiSelectGroup2(props) {
+    const { ref, children, defaultValues, values, onValuesChange, ...rest } = props;
+    return /* @__PURE__ */ jsxRuntime.jsx(MenuGroup, { ref, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(MultiSelectProvider, { defaultValues, values, onValuesChange, children }) });
   });
-  SelectContextProvider.displayName = "SelectContextProvider";
-  const MenuMultiSelectGroup = React.memo(
-    React.forwardRef((props, ref) => {
-      const { children, values, onValuesChange, ...rest } = props;
-      return /* @__PURE__ */ jsxRuntime.jsx(MenuGroup, { ref, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(SelectContextProvider, { type: "multi", values, onValuesChange, children }) });
-    })
-  );
-  const SelectedIndicatorContext = React.createContext({});
+  const SelectedIndicatorContext = React.createContext(false);
   const useSelectedIndicatorContext = () => React.useContext(SelectedIndicatorContext);
   const MenuSelectedIndicator = React.forwardRef((props, ref) => {
     const { children } = props;
-    const { selected } = useSelectedIndicatorContext();
-    const { size } = useMenuContentContext();
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: menuSelectedIndicator({ size }), children: selected ? children : null });
+    const isSelected = useSelectedIndicatorContext();
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        ref,
+        className: classVarianceAuthority.cx({
+          invisible: !isSelected
+        }),
+        "data-state": getSelectedState(isSelected),
+        children
+      }
+    );
   });
   MenuSelectedIndicator.displayName = "SelectedIndicator";
-  const MenuMultiSelectItem = React.memo(
-    React.forwardRef((props, ref) => {
-      const { onSelect, children, closeOnSelect = false, value, ...rest } = props;
-      const { values, handleValuesChange } = useSelectContext();
-      const selected = React.useMemo(() => values.includes(value), [value, values]);
-      const handleSelect = React.useCallback(() => {
-        if (!selected) {
-          handleValuesChange([...values, value]);
-        } else {
-          handleValuesChange(values.filter((currentValue) => currentValue !== value));
-        }
-        if (onSelect) onSelect();
-      }, [handleValuesChange, onSelect, selected, value, values]);
-      const computedChildren = React.useMemo(() => {
-        return typeof children === "function" ? ({ active }) => children({ selected, active }) : children;
-      }, [children, selected]);
-      return /* @__PURE__ */ jsxRuntime.jsx(SelectedIndicatorContext.Provider, { value: { selected }, children: /* @__PURE__ */ jsxRuntime.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 } = React.use(MultiSelectContext);
+    React.useLayoutEffect(() => {
+      return registerValue(value);
+    }, [registerValue, value]);
+    const isSelected = selected(value);
+    const handleSelect = React.useCallback(() => {
+      if (onSelect) onSelect();
+      selectValue(value);
+    }, [onSelect, selectValue, value]);
+    const computedChildren = React.useMemo(() => {
+      return typeof children === "function" ? ({ active }) => children({ selected: isSelected, active }) : children;
+    }, [children, isSelected]);
+    return /* @__PURE__ */ jsxRuntime.jsx(SelectedIndicatorContext.Provider, { value: isSelected, children: /* @__PURE__ */ jsxRuntime.jsx(
+      MenuItem,
+      {
+        ref,
+        role: "menuitemcheckbox",
+        onSelect: handleSelect,
+        closeOnSelect,
+        "data-state": getSelectedState(isSelected),
+        ...rest,
+        children: computedChildren
+      }
+    ) });
+  });
   const PagesContext = React.createContext({});
   const usePagesContext = () => React.useContext(PagesContext);
   const MenuPages = (props) => {
@@ -3412,77 +3432,65 @@
     );
   });
   MenuScroll.displayName = "MenuScroll";
-  const SelectAllContext = React.createContext({});
-  const MenuSelectAllIndicator = React.forwardRef((props, ref) => {
-    const { className, children, ...rest } = props;
-    const { size } = useMenuContentContext();
-    const { selected } = React.useContext(SelectAllContext);
-    const computedChildren = React.useMemo(() => {
-      return typeof children === "function" ? children(selected === "indeterminate") : children;
-    }, [children, selected]);
-    return /* @__PURE__ */ jsxRuntime.jsx("span", { ref, className: classVarianceAuthority.cx(className, menuSelectedIndicator({ size })), ...rest, children: selected ? computedChildren : null });
-  });
-  MenuSelectAllIndicator.displayName = "SelectAllIndicator";
-  const MenuSelectAllItem = React.forwardRef((props, ref) => {
-    const { children, allValues, onSelect, closeOnSelect = false, ...rest } = props;
-    const { values, handleValuesChange } = useSelectContext();
-    const selected = React.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 } = React.use(MultiSelectContext);
+    const selectedState = allSelected ? true : someSelected ? "indeterminate" : false;
     const handleSelect = React.useCallback(() => {
       onSelect == null ? void 0 : onSelect();
-      switch (selected) {
-        case true:
-          handleValuesChange([]);
-          break;
-        case "indeterminate":
-        case false: {
-          handleValuesChange(allValues);
-          break;
-        }
+      toggleSelectAll();
+    }, [onSelect, toggleSelectAll]);
+    const computedChildren = React.useMemo(() => {
+      return typeof children === "function" ? ({ active }) => children({ selected: selectedState, active }) : children;
+    }, [children, selectedState]);
+    return /* @__PURE__ */ jsxRuntime.jsx(CheckedIndicatorContext, { value: selectedState, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(MenuGroup, { ref, ...rest, children: required ? /* @__PURE__ */ jsxRuntime.jsx(SingleSelectRequiredProvider, { defaultValue, value, onValueChange, children }) : /* @__PURE__ */ jsxRuntime.jsx(
+      SingleSelectNotRequiredProvider,
+      {
+        defaultValue,
+        value,
+        onValueChange,
+        children
+      }
+    ) });
+  });
+  const MenuSelectItem = genericMemo(function(props) {
+    const { ref, value, onSelect, children, closeOnSelect = true, ...rest } = props;
+    const { selected, selectValue } = React.use(SelectContext);
+    const isSelected = React.useMemo(() => selected(value), [selected, value]);
+    const handleSelect = React.useCallback(() => {
+      if (onSelect) onSelect();
+      selectValue(value);
+    }, [onSelect, selectValue, value]);
     const computedChildren = React.useMemo(() => {
-      return typeof children === "function" ? ({ active }) => children({ selected, active }) : children;
-    }, [children, selected]);
-    return /* @__PURE__ */ jsxRuntime.jsx(SelectAllContext.Provider, { value: { selected }, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(SelectedIndicatorContext.Provider, { value: isSelected, children: /* @__PURE__ */ jsxRuntime.jsx(
+      MenuItem,
+      {
+        ref,
+        role: "menuitemcheckbox",
+        onSelect: handleSelect,
+        closeOnSelect,
+        "data-state": getSelectedState(isSelected),
+        ...rest,
+        children: computedChildren
+      }
+    ) });
   });
-  MenuSelectAllItem.displayName = "SelectAllItem";
-  const MenuSelectGroup = React.memo(
-    React.forwardRef((props, ref) => {
-      const { children, value, onValueChange } = props;
-      return /* @__PURE__ */ jsxRuntime.jsx(SelectContextProvider, { type: "single", value, onValueChange, children: /* @__PURE__ */ jsxRuntime.jsx(MenuGroup, { ref, children }) });
-    })
-  );
-  const MenuSelectItem = React.memo(
-    React.forwardRef((props, ref) => {
-      const { value, onSelect, children, closeOnSelect = true, ...rest } = props;
-      const { value: currentValue, handleValueChange } = useSelectContext();
-      const selected = React.useMemo(() => value === currentValue, [currentValue, value]);
-      const handleSelect = React.useCallback(() => {
-        handleValueChange(!selected ? value : null);
-        if (onSelect) onSelect();
-      }, [handleValueChange, onSelect, selected, value]);
-      const computedChildren = React.useMemo(() => {
-        return typeof children === "function" ? ({ active }) => children({ selected, active }) : children;
-      }, [children, selected]);
-      return /* @__PURE__ */ jsxRuntime.jsx(SelectedIndicatorContext.Provider, { value: { selected }, children: /* @__PURE__ */ jsxRuntime.jsx(
-        MenuItem,
-        {
-          ref,
-          role: "menuitemcheckbox",
-          onSelect: handleSelect,
-          closeOnSelect,
-          "data-selected": selected ? "" : void 0,
-          ...rest,
-          children: computedChildren
-        }
-      ) });
-    })
-  );
   const MenuSeparator = React.memo(
     React.forwardRef((props, ref) => {
       const { className, ...rest } = props;
@@ -3553,7 +3561,7 @@
                     "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,
@@ -3577,7 +3585,7 @@
           ref: mergedRefs,
           closeOnSelect: false,
           "aria-haspopup": "menu",
-          "data-open": open,
+          "data-state": getOpenState(open),
           disabled,
           ...getReferenceProps(rest),
           children
@@ -3629,7 +3637,6 @@
     SelectAllItem: MenuSelectAllItem,
     CheckboxItem: MenuCheckboxItem,
     // indicators
-    SelectAllIndicator: MenuSelectAllIndicator,
     SelectedIndicator: MenuSelectedIndicator,
     CheckboxItemIndicator: MenuCheckboxItemIndicator,
     // input
@@ -5010,7 +5017,6 @@
   exports2.MenuPages = MenuPages;
   exports2.MenuRoot = MenuRoot;
   exports2.MenuScroll = MenuScroll;
-  exports2.MenuSelectAllIndicator = MenuSelectAllIndicator;
   exports2.MenuSelectAllItem = MenuSelectAllItem;
   exports2.MenuSelectGroup = MenuSelectGroup;
   exports2.MenuSelectItem = MenuSelectItem;