@overmap-ai/blocks 1.0.33 → 1.0.34-command-menu.0

package/dist/blocks.js

@@ -2,15 +2,17 @@ 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, useRef } from "react";
+import React__default, { createContext, useContext, useMemo, forwardRef, memo, useState, useCallback, useLayoutEffect, useEffect, use, useId, 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";
 import { useMediaQuery } from "react-responsive";
+import { CommandItem, CommandRoot, CommandEmpty, CommandGroup, CommandInput, useCommandState, CommandList, CommandSeparator } from "cmdk";
+import * as RadixDialog from "@radix-ui/react-dialog";
+import { DialogPortal, DialogContent as DialogContent$1, DialogTitle, DialogDescription, DialogOverlay as DialogOverlay$1, Dialog as Dialog$1, DialogTrigger } from "@radix-ui/react-dialog";
 import { DayPicker as DayPicker$1 } from "react-day-picker";
 import * as RiIcons from "react-icons/ri";
 import { RiArrowRightSLine, RiArrowLeftSLine, RiArrowDownSLine, RiArrowUpSLine, RiQuestionMark } from "react-icons/ri";
-import * as RadixDialog from "@radix-ui/react-dialog";
 import { HiX } from "react-icons/hi";
 import * as RadixHoverCard from "@radix-ui/react-hover-card";
 import { CSSTransition } from "react-transition-group";
@@ -132,12 +134,13 @@ const dialogContent = cva(
     "[scrollbar-width:thin]",
     "[scrollbar-color:var(--base-6)_transparent]",
     "max-h-3/4",
+    "shadow-md",
     "overflow-hidden",
     "w-full",
     "bg-(--color-background)",
     "dark:bg-(--base-2)",
     "ring-1",
-    "ring-(--base-6)",
+    "ring-(--base-a6)",
     "fixed",
     "left-[50%]",
     "top-[50%]",
@@ -890,8 +893,7 @@ const useSize = (target) => {
   return size2;
 };
 const genericMemo = memo;
-function useControlledState(args) {
-  const { state, setState, initialState } = args;
+function useControlledState(initialState, state, setState) {
   const [uncontrolledState, setUncontrolledState] = useState(initialState);
   return [state !== void 0 ? state : uncontrolledState, setState !== void 0 ? setState : setUncontrolledState];
 }
@@ -1018,6 +1020,592 @@ 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) {
+  return selected ? "selected" : "unselected";
+}
+function getCheckedState(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 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 });
+};
+const commandMenuContentCva = cva(
+  [
+    "ring",
+    "ring-(--base-a6)",
+    "shadow-md",
+    "fixed",
+    "max-w-lg",
+    "size-full",
+    "h-max",
+    "overflow-hidden",
+    "bg-(--color-background)",
+    "dark:bg-(--base-2)",
+    "outline-none",
+    "top-[15%]",
+    "left-1/2",
+    "-translate-x-1/2",
+    "data-[state='open']:animate-in",
+    "data-[state='open']:fade-in-0",
+    "data-[state='closed']:animate-out",
+    "data-[state='closed']:fade-out-0"
+  ],
+  {
+    variants: {
+      size: {
+        xs: ["text-sm"],
+        sm: ["text-base"],
+        md: ["text-base"],
+        lg: ["text-lg"],
+        xl: ["text-lg"]
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+const commandMenuOverlayCva = cva([
+  "fixed",
+  "inset-0",
+  "duration-200",
+  "bg-(--black-a6)",
+  "dark:bg-(--black-a8)",
+  "data-[state='open']:animate-in",
+  "data-[state='open']:fade-in-0",
+  "data-[state='closed']:animate-out",
+  "data-[state='closed']:fade-out-0"
+]);
+const commandMenuListCva = cva(
+  ["[scrollbar-width:thin]", "[scrollbar-color:var(--base-6)_transparent]", "overflow-auto", "h-max", "max-h-100"],
+  {
+    variants: {
+      size: {
+        xs: ["py-1.75", "scroll-py-1.75"],
+        sm: ["py-2", "scroll-py-2"],
+        md: ["py-2.25", "scroll-py-2.25"],
+        lg: ["py-2.5", "scroll-py-2.5"],
+        xl: ["py-2.75", "scroll-py-2.75"]
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+const commandMenuInputCva = cva(["outline-none", "w-full"], {
+  variants: {
+    size: {
+      xs: ["h-12", "px-5.25", "text-base"],
+      sm: ["h-13", "px-6", "text-lg"],
+      md: ["h-14", "px-6.75", "text-lg"],
+      lg: ["h-15", "px-8.5", "text-xl"],
+      xl: ["h-16", "px-9.25", "text-xl"]
+    }
+  }
+});
+const commandMenuSeparatorCva = cva(["h-px", "bg-(--base-a6)", "w-full"], {
+  variants: {
+    spacing: {
+      true: [],
+      false: []
+    },
+    size: {
+      xs: [],
+      sm: [],
+      md: [],
+      lg: [],
+      xl: []
+    }
+  },
+  compoundVariants: [
+    { spacing: true, size: "xs", className: ["my-1.75"] },
+    { spacing: true, size: "sm", className: ["my-2"] },
+    { spacing: true, size: "md", className: ["my-2.25"] },
+    { spacing: true, size: "lg", className: ["my-2.5"] },
+    { spacing: true, size: "xl", className: ["my-2.75"] }
+  ]
+});
+const commandMenuItemCva = cva(
+  [
+    "relative",
+    "flex",
+    "items-center",
+    "outline-none",
+    // select
+    "select-none",
+    // cursor
+    "cursor-pointer",
+    // disabled
+    "data-[disabled=true]:text-(--base-a8)",
+    "data-[disabled=true]:pointer-events-none",
+    // after
+    "after:absolute",
+    "after:bg-transparent",
+    "after:z-[-1]",
+    "after:inset-y-0"
+  ],
+  {
+    variants: {
+      size: {
+        xs: ["h-10", "gap-3.5", "px-5.25", "after:inset-x-1.75"],
+        sm: ["h-11", "gap-4", "px-6", "after:inset-x-2"],
+        md: ["h-12", "gap-4.5", "px-6.75", "after:inset-x-2.25"],
+        lg: ["h-13", "gap-5", "px-7.5", "after:inset-x-2.5"],
+        xl: ["h-14", "gap-5.5", "px-8.25", "after:inset-x-2.75"]
+      },
+      variant: {
+        solid: [
+          "text-(--base-12)",
+          "data-[selected=true]:text-(--accent-contrast)",
+          "data-[selected=true]:after:bg-(--accent-a9)",
+          "data-[selected=true]:active:after:brightness-110"
+        ],
+        soft: [
+          "text-(--base-12)",
+          "data-[selected=true]:after:bg-(--accent-a3)",
+          "data-[selected=true]:active:after:bg-(--accent-a4)"
+        ]
+      },
+      radius: {
+        none: ["after:rounded-none"],
+        xs: ["after:rounded-xs"],
+        sm: ["after:rounded-sm"],
+        md: ["after:rounded-md"],
+        lg: ["after:rounded-lg"],
+        xl: ["after:rounded-xl"],
+        full: ["after:rounded-full"]
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      variant: "soft"
+    }
+  }
+);
+const commandMenuEmptyCva = cva(["flex", "justify-center", "text-(--base-a11)"], {
+  variants: {
+    size: {
+      xs: ["py-3.5"],
+      sm: ["py-4"],
+      md: ["py-4.5"],
+      lg: ["py-5"],
+      xl: ["py-5.5"]
+    }
+  }
+});
+const commandMenuGroupCva = cva(
+  [
+    "[&_[cmdk-group-heading]]:text-(--base-a10)",
+    "[&_[cmdk-group-heading]]:flex",
+    "[&_[cmdk-group-heading]]:items-center"
+  ],
+  {
+    variants: {
+      size: {
+        xs: [
+          "[&_[cmdk-group-heading]]:px-2.5",
+          "[&_[cmdk-group-heading]]:h-6",
+          "[&_[cmdk-group-heading]]:text-xs",
+          "[&_[cmdk-group-heading]]:gap-2.5"
+        ],
+        sm: [
+          "[&_[cmdk-group-heading]]:px-2.75",
+          "[&_[cmdk-group-heading]]:h-6.5",
+          "[&_[cmdk-group-heading]]:text-sm",
+          "[&_[cmdk-group-heading]]:gap-2.75"
+        ],
+        md: [
+          "[&_[cmdk-group-heading]]:px-3",
+          "[&_[cmdk-group-heading]]:h-7",
+          "[&_[cmdk-group-heading]]:text-sm",
+          "[&_[cmdk-group-heading]]:gap-3"
+        ],
+        lg: [
+          "[&_[cmdk-group-heading]]:px-3.25",
+          "[&_[cmdk-group-heading]]:h-7.5",
+          "[&_[cmdk-group-heading]]:text-base",
+          "[&_[cmdk-group-heading]]:gap-3.25"
+        ],
+        xl: [
+          "[&_[cmdk-group-heading]]:px-3.5",
+          "[&_[cmdk-group-heading]]:h-8",
+          "[&_[cmdk-group-heading]]:text-base",
+          "[&_[cmdk-group-heading]]:gap-3.5"
+        ]
+      }
+    }
+  }
+);
+const CommandMenuItem = memo((props) => {
+  const { className, ref, closeOnSelect = true, onSelect, ...rest } = props;
+  const { size: size2, variant, radius } = use(CommandMenuContext);
+  const { setOpen } = use(CommandMenuDialogContext);
+  const handleSelect = useCallback(
+    (value) => {
+      onSelect == null ? void 0 : onSelect(value);
+      if (closeOnSelect) {
+        setOpen(false);
+      }
+    },
+    [closeOnSelect, onSelect, setOpen]
+  );
+  return /* @__PURE__ */ jsx(
+    CommandItem,
+    {
+      className: cx(className, commandMenuItemCva({ size: size2, variant, radius })),
+      ref,
+      onSelect: handleSelect,
+      ...rest
+    }
+  );
+});
+CommandMenuItem.displayName = "CommandMenuItem";
+const CommandMenuCheckboxItem = (props) => {
+  const { children, ref, checked, onCheckedChange, onSelect, ...rest } = props;
+  const handleSelect = useCallback(
+    (value) => {
+      onSelect == null ? void 0 : onSelect(value);
+      onCheckedChange(checked !== true);
+    },
+    [checked, onCheckedChange, onSelect]
+  );
+  return /* @__PURE__ */ jsx(CheckboxIndicatorContext, { value: checked, children: /* @__PURE__ */ jsx(CommandMenuItem, { ref, onSelect: handleSelect, "data-state": getCheckedState(checked), ...rest, children }) });
+};
+const CommandMenuContent = memo((props) => {
+  const providerContext = useProvider();
+  const {
+    children,
+    className,
+    ref,
+    // DialogContent props
+    forceMount,
+    onOpenAutoFocus,
+    onCloseAutoFocus,
+    onEscapeKeyDown,
+    onPointerDownOutside,
+    onInteractOutside,
+    // CommandMenuVariantProps
+    variant = "soft",
+    size: size2 = "md",
+    accentColor = "base",
+    radius = providerContext.radius,
+    ...rest
+  } = props;
+  const contextValue = useMemo(() => {
+    return {
+      variant,
+      size: size2,
+      radius
+    };
+  }, [radius, size2, variant]);
+  return /* @__PURE__ */ jsx(DialogPortal, { children: /* @__PURE__ */ jsx(
+    DialogContent$1,
+    {
+      forceMount,
+      onOpenAutoFocus,
+      onCloseAutoFocus,
+      onEscapeKeyDown,
+      onPointerDownOutside,
+      onInteractOutside,
+      asChild: true,
+      children: /* @__PURE__ */ jsxs(
+        CommandRoot,
+        {
+          className: cx(className, commandMenuContentCva({ size: size2 }), radiusCva({ radius, maxLarge: true })),
+          ref,
+          "data-accent-color": accentColor,
+          ...rest,
+          children: [
+            /* @__PURE__ */ jsx(DialogTitle, { className: "sr-only", children: props.label }),
+            /* @__PURE__ */ jsx(DialogDescription, { className: "sr-only", children: "Use the command menu to trigger commands." }),
+            /* @__PURE__ */ jsx(CommandMenuContext, { value: contextValue, children })
+          ]
+        }
+      )
+    }
+  ) });
+});
+CommandMenuContent.displayName = "CommandMenuContent";
+const CommandMenuEmpty = memo((props) => {
+  const { className, ref, ...rest } = props;
+  const { size: size2 } = use(CommandMenuContext);
+  return /* @__PURE__ */ jsx(CommandEmpty, { className: cx(className, commandMenuEmptyCva({ size: size2 })), ref, ...rest });
+});
+CommandMenuEmpty.displayName = "CommandMenuEmpty";
+const CommandMenuGroup = memo((props) => {
+  const { className, ref, ...rest } = props;
+  const { size: size2 } = use(CommandMenuContext);
+  return /* @__PURE__ */ jsx(CommandGroup, { className: cx(className, commandMenuGroupCva({ size: size2 })), ref, ...rest });
+});
+CommandMenuGroup.displayName = "CommandMenuGroup";
+const CommandMenuInput = memo((props) => {
+  const { className, ref, ...rest } = props;
+  const { size: size2 } = use(CommandMenuContext);
+  return /* @__PURE__ */ jsx(CommandInput, { className: cx(className, commandMenuInputCva({ size: size2 })), ref, ...rest });
+});
+CommandMenuInput.displayName = "CommandMenuInput";
+const CommandMenuList = memo((props) => {
+  const { className, ref, ...rest } = props;
+  const { size: size2 } = use(CommandMenuContext);
+  const filterCount = useCommandState((state) => state.filtered.count);
+  return /* @__PURE__ */ jsx(
+    CommandList,
+    {
+      className: cx(className, commandMenuListCva({ size: size2 })),
+      ref,
+      hidden: filterCount === 0,
+      ...rest
+    }
+  );
+});
+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 selected = useCallback((value) => values.includes(value), [values]);
+  const selectValue = useCallback(
+    (value) => {
+      if (selected(value)) {
+        setValues(values.filter((v) => v !== value));
+      } else {
+        setValues([...values, value]);
+      }
+    },
+    [selected, setValues, values]
+  );
+  const selectContextValue = useMemo(() => {
+    return {
+      selected,
+      selectValue
+    };
+  }, [selectValue, selected]);
+  const contextValue = useMemo(() => {
+    return {
+      itemValueMapping,
+      setItemValueMapping,
+      values,
+      setValues
+    };
+  }, [itemValueMapping, setValues, values]);
+  return /* @__PURE__ */ jsx(SelectContext$1, { value: selectContextValue, children: /* @__PURE__ */ jsx(MultiSelectGroupContext, { value: contextValue, children: /* @__PURE__ */ jsx(CommandMenuGroup, { ref, "aria-multiselectable": true, ...rest, children }) }) });
+};
+const CommandMenuMultiSelectItem = (props) => {
+  const { children, ref, value, onSelect, closeOnSelect = false, ...rest } = props;
+  const { selected, selectValue: handleSelectValue } = use(SelectContext$1);
+  const itemValueId = useId();
+  const { setItemValueMapping } = use(MultiSelectGroupContext);
+  useLayoutEffect(() => {
+    setItemValueMapping((prev) => new Map(prev).set(itemValueId, value));
+    return () => {
+      setItemValueMapping((prev) => {
+        const next = new Map(prev);
+        next.delete(itemValueId);
+        return next;
+      });
+    };
+  }, [itemValueId, setItemValueMapping, value]);
+  const handleSelect = useCallback(
+    (value2) => {
+      onSelect == null ? void 0 : onSelect(value2);
+      handleSelectValue(value2);
+    },
+    [handleSelectValue, onSelect]
+  );
+  const isSelected = selected(value);
+  return /* @__PURE__ */ jsx(SelectedIndicatorContext$1, { value: isSelected, children: /* @__PURE__ */ jsx(
+    CommandMenuItem,
+    {
+      ref,
+      onSelect: handleSelect,
+      "data-state": getSelectedState(isSelected),
+      "aria-selected": isSelected,
+      value,
+      closeOnSelect,
+      ...rest,
+      children
+    }
+  ) });
+};
+const CommandMenuOverlay = memo((props) => {
+  const { container, className, ...rest } = props;
+  return /* @__PURE__ */ jsx(DialogPortal, { container, children: /* @__PURE__ */ jsx(DialogOverlay$1, { className: cx(className, commandMenuOverlayCva()), ...rest }) });
+});
+CommandMenuOverlay.displayName = "CommandMenuOverlay";
+const CommandMenuPage = (props) => {
+  const { children, ref, page, ...rest } = props;
+  const { page: activePage } = use(CommandMenuPageContext);
+  const isActive = useMemo(() => page === activePage, [page, activePage]);
+  return /* @__PURE__ */ jsx("div", { ref, "data-active": getActiveState(isActive), hidden: !isActive, ...rest, children: isActive ? children : null });
+};
+const CommandMenuPages = (props) => {
+  const { children, defaultPage = "", page: controlledPage, onPageChange } = props;
+  const [page, setPage] = useControlledState(defaultPage, controlledPage, onPageChange);
+  return /* @__PURE__ */ jsx(CommandMenuPageContext, { value: { page, setPage }, children });
+};
+const CommandMenuPageTriggerItem = (props) => {
+  const { ref, page, onSelect, closeOnSelect = false, ...rest } = props;
+  const { page: activePage, setPage } = use(CommandMenuPageContext);
+  const isActive = useMemo(() => page === activePage, [page, activePage]);
+  const handleSelect = useCallback(
+    (value) => {
+      onSelect == null ? void 0 : onSelect(value);
+      setPage(page);
+    },
+    [onSelect, page, setPage]
+  );
+  return /* @__PURE__ */ jsx(SelectedIndicatorContext$1, { value: isActive, children: /* @__PURE__ */ jsx(
+    CommandMenuItem,
+    {
+      ref,
+      onSelect: handleSelect,
+      "data-state": getActiveState(isActive),
+      closeOnSelect,
+      ...rest
+    }
+  ) });
+};
+const CommandMenuRadioGroup = (props) => {
+  const { children, ref, defaultValue = null, value: controlledValue, onValueChange, ...rest } = props;
+  const [value, setValue] = useControlledState(defaultValue, controlledValue, onValueChange);
+  const selected = useCallback((v) => v === value, [value]);
+  const selectValue = useCallback(
+    (v) => {
+      setValue(selected(v) ? null : v);
+    },
+    [selected, setValue]
+  );
+  const contextValue = useMemo(() => ({ selected, selectValue }), [selected, selectValue]);
+  return /* @__PURE__ */ jsx(CommandMenuGroup, { ref, role: "radiogroup", ...rest, children: /* @__PURE__ */ jsx(SelectContext$1, { value: contextValue, children }) });
+};
+const CommandMenuRadioItem = (props) => {
+  const { children, ref, value, onSelect, ...rest } = props;
+  const { selected, selectValue } = use(SelectContext$1);
+  const handleSelect = useCallback(
+    (value2) => {
+      onSelect == null ? void 0 : onSelect(value2);
+      selectValue(value2);
+    },
+    [onSelect, selectValue]
+  );
+  const isSelected = selected(value);
+  return /* @__PURE__ */ jsx(SelectedIndicatorContext$1, { value: isSelected, children: /* @__PURE__ */ jsx(
+    CommandMenuItem,
+    {
+      ref,
+      onSelect: handleSelect,
+      "data-state": getSelectedState(isSelected),
+      value,
+      ...rest,
+      children
+    }
+  ) });
+};
+const CommandMenuRoot = memo((props) => {
+  const { children, defaultOpen, open: controlledOpen, onOpenChange } = props;
+  const [open, setOpen] = useControlledState(defaultOpen ?? false, controlledOpen, onOpenChange);
+  const contextValue = useMemo(() => {
+    return {
+      open,
+      setOpen
+    };
+  }, [open, setOpen]);
+  return /* @__PURE__ */ jsx(Dialog$1, { open, onOpenChange: setOpen, ...props, children: /* @__PURE__ */ jsx(CommandMenuDialogContext, { value: contextValue, children }) });
+});
+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 handleSelect = useCallback(
+    (value) => {
+      onSelect == null ? void 0 : onSelect(value);
+      setValues(selectedState !== true ? Array.from(itemValueMapping.values()) : []);
+    },
+    [itemValueMapping, onSelect, selectedState, setValues]
+  );
+  return /* @__PURE__ */ jsx(CheckboxIndicatorContext, { value: selectedState, children: /* @__PURE__ */ jsx(
+    CommandMenuItem,
+    {
+      ref,
+      role: "menuitemcheckbox",
+      onSelect: handleSelect,
+      "data-state": getCheckedState(selectedState),
+      closeOnSelect,
+      ...rest
+    }
+  ) });
+};
+const CommandMenuSelectedIndicator = (props) => {
+  const { ref, alwaysRender = false, 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 });
+};
+const CommandMenuSeparator = memo((props) => {
+  const { className, ref, spacing = false, ...rest } = props;
+  const { size: size2 } = use(CommandMenuContext);
+  return /* @__PURE__ */ jsx(CommandSeparator, { ref, className: cx(className, commandMenuSeparatorCva({ size: size2, spacing })), ...rest });
+});
+CommandMenuSeparator.displayName = "CommandMenuSeparator";
+const CommandMenuTrigger = memo((props) => {
+  return /* @__PURE__ */ jsx(DialogTrigger, { ...props });
+});
+CommandMenuTrigger.displayName = "CommandMenuTrigger";
+const CommandMenu = {
+  Root: CommandMenuRoot,
+  Overlay: CommandMenuOverlay,
+  Content: CommandMenuContent,
+  Trigger: CommandMenuTrigger,
+  Input: CommandMenuInput,
+  List: CommandMenuList,
+  Group: CommandMenuGroup,
+  Item: CommandMenuItem,
+  Separator: CommandMenuSeparator,
+  Empty: CommandMenuEmpty,
+  // Multi select
+  MultiSelectGroup: CommandMenuMultiSelectGroup,
+  MultiSelectItem: CommandMenuMultiSelectItem,
+  SelectAllItem: CommandMenuSelectAllItem,
+  SelectedIndicator: CommandMenuSelectedIndicator,
+  // Radio / single select
+  RadioGroup: CommandMenuRadioGroup,
+  RadioItem: CommandMenuRadioItem,
+  // Checkbox
+  CheckboxItem: CommandMenuCheckboxItem,
+  CheckboxIndicator: CommandMenuCheckboxIndicator,
+  // Pages
+  Pages: CommandMenuPages,
+  Page: CommandMenuPage,
+  PageTriggerItem: CommandMenuPageTriggerItem
+};
 const Chevron = (props) => {
   const { orientation, ...rest } = props;
   switch (orientation) {
@@ -2186,11 +2774,7 @@ const MenuRoot = (props) => {
     onOpenChange,
     defaultOpen
   } = props;
-  const [open, setOpen] = useControlledState({
-    state: controlledOpen,
-    initialState: defaultOpen ?? false,
-    setState: onOpenChange
-  });
+  const [open, setOpen] = useControlledState(defaultOpen ?? false, controlledOpen, onOpenChange);
   const [activeIndex, setActiveIndex] = useState(null);
   const [triggerType, setTriggerType] = useState(null);
   const elementsRef = useRef([]);
@@ -2403,11 +2987,7 @@ const MenuSub = (props) => {
     onOpenChange,
     defaultOpen
   } = props;
-  const [open, setOpen] = useControlledState({
-    initialState: defaultOpen ?? false,
-    state: controlledOpen,
-    setState: onOpenChange
-  });
+  const [open, setOpen] = useControlledState(defaultOpen ?? false, controlledOpen, onOpenChange);
   const nodeId = useFloatingNodeId();
   const { refs, floatingStyles, context } = useFloating({
     nodeId,
@@ -2787,11 +3367,7 @@ const PagesContext = createContext({});
 const usePagesContext = () => useContext(PagesContext);
 const MenuPages = (props) => {
   const { children, defaultPage, page, onPageChange } = props;
-  const [activePage, setActivePage] = useControlledState({
-    state: page,
-    initialState: defaultPage ?? "",
-    setState: onPageChange
-  });
+  const [activePage, setActivePage] = useControlledState(defaultPage ?? "", page, onPageChange);
   return /* @__PURE__ */ jsx(PagesContext.Provider, { value: { activePage, setActivePage }, children });
 };
 const MenuPageContent = (props) => {
@@ -4370,6 +4946,28 @@ export {
   CheckboxIndicator,
   CheckboxRoot,
   CollapsibleTree,
+  CommandMenu,
+  CommandMenuCheckboxIndicator,
+  CommandMenuCheckboxItem,
+  CommandMenuContent,
+  CommandMenuEmpty,
+  CommandMenuGroup,
+  CommandMenuInput,
+  CommandMenuItem,
+  CommandMenuList,
+  CommandMenuMultiSelectGroup,
+  CommandMenuMultiSelectItem,
+  CommandMenuOverlay,
+  CommandMenuPage,
+  CommandMenuPageTriggerItem,
+  CommandMenuPages,
+  CommandMenuRadioGroup,
+  CommandMenuRadioItem,
+  CommandMenuRoot,
+  CommandMenuSelectAllItem,
+  CommandMenuSelectedIndicator,
+  CommandMenuSeparator,
+  CommandMenuTrigger,
   DayPicker,
   Dialog,
   DialogContent,