@overmap-ai/blocks 1.0.34-command-menu.2 → 1.0.34-command-menu.4

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(
   [
@@ -1287,7 +1294,7 @@ const CommandMenuCheckboxItem = (props) => {
     },
     [checked, onCheckedChange, onSelect]
   );
-  return /* @__PURE__ */ jsx(CheckboxIndicatorContext, { value: checked, children: /* @__PURE__ */ jsx(CommandMenuItem, { ref, onSelect: handleSelect, "data-state": getCheckedState(checked), ...rest, children }) });
+  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 +1385,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 = memo((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,37 +1416,65 @@ 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 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 });
+});
+MultiSelectProvider.displayName = "MultiSelectProvider";
+const SingleSelectRequiredProvider = memo((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 });
+});
+SingleSelectRequiredProvider.displayName = "SingleSelectRequiredProvider";
+const SingleSelectNotRequiredProvider = memo((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);
+    },
+    [selected, setValue]
+  );
+  const contextValue = useMemo(() => ({ selected, selectValue }), [selected, selectValue]);
+  return /* @__PURE__ */ jsx(SelectContext, { value: contextValue, children });
+});
+SingleSelectNotRequiredProvider.displayName = "SingleSelectNotRequiredProvider";
+const CommandMenuMultiSelectGroup = (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 = (props) => {
   const { children, ref, value, onSelect, closeOnSelect = false, ...rest } = props;
-  const { selected, selectValue: handleSelectValue } = use(SelectContext$1);
-  const itemValueId = useId();
-  const { setItemValueMapping } = use(MultiSelectGroupContext);
+  const { selected, selectValue: handleSelectValue, registerValue } = use(MultiSelectContext);
   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]);
+    return registerValue(value);
+  }, [registerValue, value]);
   const handleSelect = useCallback(
     (value2) => {
       onSelect == null ? void 0 : onSelect(value2);
@@ -1437,7 +1488,7 @@ const CommandMenuMultiSelectItem = (props) => {
     {
       ref,
       onSelect: handleSelect,
-      "data-state": getSelectedState(isSelected),
+      "data-state": getSelectedState$1(isSelected),
       "aria-selected": isSelected,
       value,
       closeOnSelect,
@@ -1485,21 +1536,20 @@ 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 { children, ref, required, defaultValue, value, onValueChange, ...rest } = props;
+  return /* @__PURE__ */ jsx(CommandMenuGroup, { ref, role: "radiogroup", ...rest, children: required ? /* @__PURE__ */ jsx(SingleSelectRequiredProvider, { defaultValue, value, onValueChange, children }) : /* @__PURE__ */ jsx(
+    SingleSelectNotRequiredProvider,
+    {
+      defaultValue,
+      value,
+      onValueChange,
+      children
+    }
+  ) });
 };
 const CommandMenuRadioItem = (props) => {
   const { children, ref, value, onSelect, ...rest } = props;
-  const { selected, selectValue } = use(SelectContext$1);
+  const { selected, selectValue } = use(SelectContext);
   const handleSelect = useCallback(
     (value2) => {
       onSelect == null ? void 0 : onSelect(value2);
@@ -1513,7 +1563,7 @@ const CommandMenuRadioItem = (props) => {
     {
       ref,
       onSelect: handleSelect,
-      "data-state": getSelectedState(isSelected),
+      "data-state": getSelectedState$1(isSelected),
       value,
       ...rest,
       children
@@ -1534,41 +1584,45 @@ const CommandMenuRoot = memo((props) => {
 CommandMenuRoot.displayName = "CommandMenuRoot";
 const CommandMenuSelectAllItem = (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 { allSelected, someSelected, toggleSelectAll } = use(MultiSelectContext);
   const handleSelect = useCallback(
     (value) => {
       onSelect == null ? void 0 : onSelect(value);
-      setValues(selectedState !== true ? Array.from(itemValueMapping.values()) : []);
+      toggleSelectAll();
     },
-    [itemValueMapping, onSelect, selectedState, setValues]
+    [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 +2675,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 +2744,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 +2756,6 @@ const menuContent = cva(
     "ring-1",
     "ring-(--base-6)",
     "overflow-hidden"
-    // "[scrollbar-width:thin]",
-    // "[scrollbar-color:var(--base-6)_transparent]",
   ],
   {
     variants: {
@@ -2735,8 +2797,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 +2913,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 +3031,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 +3048,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,
@@ -3085,7 +3159,7 @@ const MenuItem = memo(
       onClick,
       onKeyDown,
       closeOnSelect = true,
-      disabled,
+      disabled = false,
       ...rest
     } = props;
     const { ref, index } = useListItem();
@@ -3122,7 +3196,7 @@ const MenuItem = memo(
         className: cx(className, menuItem({ size: size2, variant }), radiusCva({ radius, maxLarge: true })),
         ref: mergeRefs2,
         role: "menuitem",
-        "data-disabled": disabled ? "" : void 0,
+        "data-disabled": getBooleanState(disabled),
         "aria-disabled": disabled,
         "data-highlighted": isActive ? "" : void 0,
         ...getItemProps({
@@ -3154,9 +3228,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 +3245,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 +3255,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 +3293,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 +3309,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 +3330,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,86 +3354,53 @@ 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 });
-});
-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 { children, defaultValues, values, onValuesChange, ...rest } = props;
+    return /* @__PURE__ */ jsx(MenuGroup, { ref, ...rest, children: /* @__PURE__ */ jsx(MultiSelectProvider, { defaultValues, 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 { selected, selectValue, registerValue } = use(MultiSelectContext);
+    useLayoutEffect(() => {
+      return registerValue(value);
+    }, [registerValue, value]);
+    const isSelected = selected(value);
     const handleSelect = useCallback(() => {
-      if (!selected) {
-        handleValuesChange([...values, value]);
-      } else {
-        handleValuesChange(values.filter((currentValue) => currentValue !== value));
-      }
       if (onSelect) onSelect();
-    }, [handleValuesChange, onSelect, selected, value, values]);
+      selectValue(value);
+    }, [onSelect, selectValue, 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(
+      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-selected": selected ? "" : void 0,
+        "data-state": getSelectedState(isSelected),
         ...rest,
         children: computedChildren
       }
@@ -3407,71 +3450,72 @@ 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 { 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;
-      }
-    }
-  }, [allValues, handleValuesChange, onSelect, selected]);
+    toggleSelectAll();
+  }, [onSelect, toggleSelectAll]);
   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: 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
+    }
+  ) });
 });
 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 { 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 = 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 { selected, selectValue } = use(SelectContext);
+    const isSelected = useMemo(() => selected(value), [selected, value]);
     const handleSelect = useCallback(() => {
-      handleValueChange(!selected ? value : null);
       if (onSelect) onSelect();
-    }, [handleValueChange, onSelect, selected, value]);
+      selectValue(value);
+    }, [onSelect, selectValue, 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(
+      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-selected": selected ? "" : void 0,
+        "data-state": getSelectedState(isSelected),
         ...rest,
         children: computedChildren
       }
@@ -3548,7 +3592,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 +3616,7 @@ const MenuSubTrigger = memo(
         ref: mergedRefs,
         closeOnSelect: false,
         "aria-haspopup": "menu",
-        "data-open": open,
+        "data-state": getOpenState(open),
         disabled,
         ...getReferenceProps(rest),
         children
@@ -3624,7 +3668,6 @@ const Menu = {
   SelectAllItem: MenuSelectAllItem,
   CheckboxItem: MenuCheckboxItem,
   // indicators
-  SelectAllIndicator: MenuSelectAllIndicator,
   SelectedIndicator: MenuSelectedIndicator,
   CheckboxItemIndicator: MenuCheckboxItemIndicator,
   // input
@@ -5006,7 +5049,6 @@ export {
   MenuPages,
   MenuRoot,
   MenuScroll,
-  MenuSelectAllIndicator,
   MenuSelectAllItem,
   MenuSelectGroup,
   MenuSelectItem,
@@ -5065,6 +5107,7 @@ export {
   unsafeShowToast,
   useAlertDialog,
   useButtonGroup,
+  useControlledState,
   useLayoutContext,
   useMenuContentContext,
   useMenuContext,