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

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(
     [
@@ -1292,7 +1299,7 @@
       },
       [checked, onCheckedChange, onSelect]
     );
-    return /* @__PURE__ */ jsxRuntime.jsx(CheckboxIndicatorContext, { value: checked, children: /* @__PURE__ */ jsxRuntime.jsx(CommandMenuItem, { ref, onSelect: handleSelect, "data-state": getCheckedState(checked), ...rest, children }) });
+    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 +1390,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 = React.memo((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,37 +1421,65 @@
       },
       [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 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 });
+  });
+  MultiSelectProvider.displayName = "MultiSelectProvider";
+  const SingleSelectRequiredProvider = React.memo((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 });
+  });
+  SingleSelectRequiredProvider.displayName = "SingleSelectRequiredProvider";
+  const SingleSelectNotRequiredProvider = React.memo((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);
+      },
+      [selected, setValue]
+    );
+    const contextValue = React.useMemo(() => ({ selected, selectValue }), [selected, selectValue]);
+    return /* @__PURE__ */ jsxRuntime.jsx(SelectContext, { value: contextValue, children });
+  });
+  SingleSelectNotRequiredProvider.displayName = "SingleSelectNotRequiredProvider";
+  const CommandMenuMultiSelectGroup = (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 = (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);
+    const { selected, selectValue: handleSelectValue, registerValue } = React.use(MultiSelectContext);
     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]);
+      return registerValue(value);
+    }, [registerValue, value]);
     const handleSelect = React.useCallback(
       (value2) => {
         onSelect == null ? void 0 : onSelect(value2);
@@ -1442,7 +1493,7 @@
       {
         ref,
         onSelect: handleSelect,
-        "data-state": getSelectedState(isSelected),
+        "data-state": getSelectedState$1(isSelected),
         "aria-selected": isSelected,
         value,
         closeOnSelect,
@@ -1490,21 +1541,20 @@
     ) });
   };
   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 { children, ref, required, defaultValue, value, onValueChange, ...rest } = props;
+    return /* @__PURE__ */ jsxRuntime.jsx(CommandMenuGroup, { ref, role: "radiogroup", ...rest, children: required ? /* @__PURE__ */ jsxRuntime.jsx(SingleSelectRequiredProvider, { defaultValue, value, onValueChange, children }) : /* @__PURE__ */ jsxRuntime.jsx(
+      SingleSelectNotRequiredProvider,
+      {
+        defaultValue,
+        value,
+        onValueChange,
+        children
+      }
+    ) });
   };
   const CommandMenuRadioItem = (props) => {
     const { children, ref, value, onSelect, ...rest } = props;
-    const { selected, selectValue } = React.use(SelectContext$1);
+    const { selected, selectValue } = React.use(SelectContext);
     const handleSelect = React.useCallback(
       (value2) => {
         onSelect == null ? void 0 : onSelect(value2);
@@ -1518,7 +1568,7 @@
       {
         ref,
         onSelect: handleSelect,
-        "data-state": getSelectedState(isSelected),
+        "data-state": getSelectedState$1(isSelected),
         value,
         ...rest,
         children
@@ -1539,41 +1589,45 @@
   CommandMenuRoot.displayName = "CommandMenuRoot";
   const CommandMenuSelectAllItem = (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 { allSelected, someSelected, toggleSelectAll } = React.use(MultiSelectContext);
     const handleSelect = React.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__ */ 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 +2680,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 +2749,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 +2761,6 @@
       "ring-1",
       "ring-(--base-6)",
       "overflow-hidden"
-      // "[scrollbar-width:thin]",
-      // "[scrollbar-color:var(--base-6)_transparent]",
     ],
     {
       variants: {
@@ -2740,8 +2802,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 +2918,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 +3036,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 +3053,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,
@@ -3090,7 +3164,7 @@
         onClick,
         onKeyDown,
         closeOnSelect = true,
-        disabled,
+        disabled = false,
         ...rest
       } = props;
       const { ref, index } = react.useListItem();
@@ -3127,7 +3201,7 @@
           className: classVarianceAuthority.cx(className, menuItem({ size, 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({
@@ -3159,9 +3233,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 +3250,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 +3260,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 +3298,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 +3314,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 +3335,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,86 +3359,53 @@
       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 });
-  });
-  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 { children, defaultValues, values, onValuesChange, ...rest } = props;
+      return /* @__PURE__ */ jsxRuntime.jsx(MenuGroup, { ref, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(MultiSelectProvider, { defaultValues, 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 { selected, selectValue, registerValue } = React.use(MultiSelectContext);
+      React.useLayoutEffect(() => {
+        return registerValue(value);
+      }, [registerValue, value]);
+      const isSelected = selected(value);
       const handleSelect = React.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 = 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(
+        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-selected": selected ? "" : void 0,
+          "data-state": getSelectedState(isSelected),
           ...rest,
           children: computedChildren
         }
@@ -3412,71 +3455,72 @@
     );
   });
   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 { 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;
-        }
-      }
-    }, [allValues, handleValuesChange, onSelect, selected]);
+      toggleSelectAll();
+    }, [onSelect, toggleSelectAll]);
     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: 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
+      }
+    ) });
   });
   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 { 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 = 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 { selected, selectValue } = React.use(SelectContext);
+      const isSelected = React.useMemo(() => selected(value), [selected, value]);
       const handleSelect = React.useCallback(() => {
-        handleValueChange(!selected ? value : null);
         if (onSelect) onSelect();
-      }, [handleValueChange, onSelect, selected, value]);
+        selectValue(value);
+      }, [onSelect, selectValue, 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(
+        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-selected": selected ? "" : void 0,
+          "data-state": getSelectedState(isSelected),
           ...rest,
           children: computedChildren
         }
@@ -3553,7 +3597,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 +3621,7 @@
           ref: mergedRefs,
           closeOnSelect: false,
           "aria-haspopup": "menu",
-          "data-open": open,
+          "data-state": getOpenState(open),
           disabled,
           ...getReferenceProps(rest),
           children
@@ -3629,7 +3673,6 @@
     SelectAllItem: MenuSelectAllItem,
     CheckboxItem: MenuCheckboxItem,
     // indicators
-    SelectAllIndicator: MenuSelectAllIndicator,
     SelectedIndicator: MenuSelectedIndicator,
     CheckboxItemIndicator: MenuCheckboxItemIndicator,
     // input
@@ -5010,7 +5053,6 @@
   exports2.MenuPages = MenuPages;
   exports2.MenuRoot = MenuRoot;
   exports2.MenuScroll = MenuScroll;
-  exports2.MenuSelectAllIndicator = MenuSelectAllIndicator;
   exports2.MenuSelectAllItem = MenuSelectAllItem;
   exports2.MenuSelectGroup = MenuSelectGroup;
   exports2.MenuSelectItem = MenuSelectItem;