@sproutsocial/seeds-react-menu 1.12.2 → 1.13.0

package/dist/v3/index.js

@@ -30,6 +30,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/v3/index.ts
 var v3_exports = {};
 __export(v3_exports, {
+  ActionMenu: () => ActionMenu,
   ComboboxActionButtons: () => ComboboxActionButtons,
   ComboboxClear: () => ComboboxClear,
   ComboboxEmpty: () => ComboboxEmpty,
@@ -52,6 +53,11 @@ __export(v3_exports, {
   ComboboxTokenInput: () => ComboboxTokenInput,
   ComboboxTokenInputGroup: () => ComboboxTokenInputGroup,
   ComboboxTrigger: () => ComboboxTrigger,
+  MenuGroup: () => MenuGroup,
+  MenuItem: () => MenuItem,
+  MenuRadioGroup: () => MenuRadioGroup,
+  MenuSub: () => MenuSub,
+  MenuSubTrigger: () => MenuSubTrigger,
   MultiCombobox: () => MultiCombobox,
   MultiSearchableSelect: () => MultiSearchableSelect,
   MultiSelect: () => MultiSelect,
@@ -210,10 +216,10 @@ var import_select2 = require("@base-ui/react/select");
 var import_styled_components2 = __toESM(require("styled-components"));
 var import_seeds_react_mixins = require("@sproutsocial/seeds-react-mixins");
 var Field = import_styled_components2.default.div`
-  display: flex;
+  display: ${({ $fullWidth }) => $fullWidth === false ? "inline-flex" : "flex"};
   flex-direction: column;
   gap: ${({ theme }) => theme.space[200]};
-  width: 100%;
+  ${({ $fullWidth }) => $fullWidth !== false && "width: 100%;"}
 `;
 var SelectLabel = (0, import_styled_components2.default)(import_select2.Select.Label)`
   font-size: ${({ theme }) => theme.typography[200].fontSize};
@@ -363,7 +369,7 @@ var StyledValue = (0, import_styled_components4.default)(import_select3.Select.V
   }
 `;
 function SingleSelect(props) {
-  const { id, placeholder, includePlaceholderItem } = props;
+  const { id, placeholder, includePlaceholderItem, fullWidth = true } = props;
   const ariaDescribedBy = props["aria-describedby"];
   const isChildrenMode = "children" in props && props.children != null;
   const selectedItemId = props.selectedItemId;
@@ -411,7 +417,7 @@ function SingleSelect(props) {
       }
     }
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Field, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Field, { $fullWidth: fullWidth, children: [
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { ref: containerRef, style: { position: "relative" } }),
     /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
       import_select3.Select.Root,
@@ -493,7 +499,7 @@ var Placeholder = import_styled_components5.default.div`
   margin: 2px 8px 0px 0px;
 `;
 function MultiSelect(props) {
-  const { id, placeholder = "Select..." } = props;
+  const { id, placeholder = "Select...", fullWidth = true } = props;
   const ariaDescribedBy = props["aria-describedby"];
   const isChildrenMode = "children" in props && props.children != null;
   const data = isChildrenMode ? [] : props.data;
@@ -539,7 +545,7 @@ function MultiSelect(props) {
       onSelectedItemIdsChange(ids);
     }
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(Field, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(Field, { $fullWidth: fullWidth, children: [
     /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { ref: containerRef, style: { position: "relative" } }),
     /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
       import_select4.Select.Root,
@@ -1348,7 +1354,8 @@ function SingleCombobox(props) {
     id,
     placeholder = "Search...",
     emptyText = "No results found.",
-    filter
+    filter,
+    fullWidth = true
   } = props;
   const ariaDescribedBy = props["aria-describedby"];
   const isChildrenMode = "children" in props && props.children != null;
@@ -1390,7 +1397,7 @@ function SingleCombobox(props) {
     () => groupBy ? groupItems(data, groupBy) : null,
     [data, groupBy]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Field, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Field, { $fullWidth: fullWidth, children: [
     /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { ref: containerRef, style: { position: "relative" } }),
     /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
       import_combobox3.Combobox.Root,
@@ -1528,7 +1535,8 @@ function MultiCombobox(props) {
     loadingText = "Loading...",
     filter,
     inputValue,
-    onInputValueChange
+    onInputValueChange,
+    fullWidth = true
   } = props;
   const ariaDescribedBy = props["aria-describedby"];
   const isChildrenMode = "children" in props && props.children != null;
@@ -1743,7 +1751,7 @@ function MultiCombobox(props) {
   const rootItems = creatableSentinel && Array.isArray(baseItems) ? [...baseItems, creatableSentinel] : baseItems;
   const hasSentinels = selectAll || selectHeadings;
   const rootValue = hasSentinels ? [...value] : value;
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Field, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Field, { $fullWidth: fullWidth, children: [
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { ref: containerRef, style: { position: "relative" } }),
     /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
       import_combobox4.Combobox.Root,
@@ -1765,15 +1773,23 @@ function MultiCombobox(props) {
           const label = itemToString(item);
           return label.toLowerCase().includes(query.toLowerCase());
         } : filter,
-        inputValue: creatableProp ? currentInputValue : inputValue,
-        onInputValueChange: creatableProp ? (v) => {
-          if (skipNextInputChangeRef.current) {
-            skipNextInputChangeRef.current = false;
-            return;
+        inputValue: creatableProp ? currentInputValue : inputValue ?? internalInputValue,
+        onInputValueChange: (v, eventDetails) => {
+          if (eventDetails.reason === "input-clear" && open) return;
+          if (creatableProp) {
+            if (skipNextInputChangeRef.current) {
+              skipNextInputChangeRef.current = false;
+              return;
+            }
+            setInternalInputValue(v);
+            onInputValueChange?.(v);
+          } else {
+            if (inputValue === void 0) {
+              setInternalInputValue(v);
+            }
+            onInputValueChange?.(v);
           }
-          setInternalInputValue(v);
-          onInputValueChange?.(v);
-        } : onInputValueChange,
+        },
         onItemHighlighted: isVirtualized ? (item, { reason, index }) => {
           const virt = virtualizerRef.current;
           if (!item || !virt) return;
@@ -1948,7 +1964,8 @@ function SingleSearchableSelect(props) {
     emptyText = "No results found.",
     isLoading = false,
     loadingText = "Loading...",
-    filter
+    filter,
+    fullWidth = true
   } = props;
   const ariaDescribedBy = props["aria-describedby"];
   const isChildrenMode = "children" in props && props.children != null;
@@ -1990,7 +2007,7 @@ function SingleSearchableSelect(props) {
     () => groupBy ? groupItems(data, groupBy) : null,
     [data, groupBy]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Field, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Field, { $fullWidth: fullWidth, children: [
     /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { ref: containerRef, style: { position: "relative" } }),
     /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
       import_combobox5.Combobox.Root,
@@ -2122,6 +2139,7 @@ function SingleSearchableSelect(props) {
 var React11 = __toESM(require("react"));
 var import_combobox6 = require("@base-ui/react/combobox");
 var import_react_virtual5 = require("@tanstack/react-virtual");
+var import_seeds_react_icon4 = __toESM(require("@sproutsocial/seeds-react-icon"));
 var import_styled_components7 = __toESM(require("styled-components"));
 var import_jsx_runtime11 = require("react/jsx-runtime");
 var SelectionText2 = import_styled_components7.default.span`
@@ -2148,7 +2166,8 @@ function MultiSearchableSelect(props) {
     emptyText = "No results found.",
     isLoading = false,
     loadingText = "Loading...",
-    filter
+    filter,
+    fullWidth = true
   } = props;
   const ariaDescribedBy = props["aria-describedby"];
   const isChildrenMode = "children" in props && props.children != null;
@@ -2165,12 +2184,16 @@ function MultiSearchableSelect(props) {
   const selectHeadings = isChildrenMode ? false : props.selectHeadings ?? false;
   const selectAll = isChildrenMode ? false : props.selectAll ?? false;
   const isVirtualized = isChildrenMode ? false : props.isVirtualized ?? false;
+  const creatableProp = isChildrenMode ? false : props.creatable ?? false;
+  const onCreateProp = isChildrenMode ? void 0 : props.onCreate;
   const children = isChildrenMode ? props.children : void 0;
   const selectedItemIds = props.selectedItemIds;
   const defaultSelectedItemIds = props.defaultSelectedItemIds;
   const onSelectedItemIdsChange = props.onSelectedItemIdsChange;
   const { containerRef, portalContainer } = useSeedsPortalContainer();
   const [open, setOpen] = React11.useState(false);
+  const [internalInputValue, setInternalInputValue] = React11.useState("");
+  const skipNextInputChangeRef = React11.useRef(false);
   const virtualizerRef = React11.useRef(null);
   const isControlled = selectedItemIds !== void 0;
   const idsToItems = React11.useCallback(
@@ -2189,6 +2212,18 @@ function MultiSearchableSelect(props) {
     () => groupBy ? groupItems(visibleData, groupBy) : null,
     [visibleData, groupBy]
   );
+  const currentInputValue = internalInputValue;
+  const creatableSentinel = React11.useMemo(() => {
+    if (!creatableProp) return null;
+    const trimmed = currentInputValue.trim();
+    if (!trimmed) return null;
+    const lowered = trimmed.toLocaleLowerCase();
+    const exactExists = data.some(
+      (d) => itemToString(d).trim().toLocaleLowerCase() === lowered
+    );
+    if (exactExists) return null;
+    return makeCreatableSentinel(trimmed);
+  }, [creatableProp, currentInputValue, data, itemToString]);
   const flatItems = React11.useMemo(() => {
     if (!groups || !selectHeadings && !selectAll) return null;
     const rows = [];
@@ -2205,10 +2240,21 @@ function MultiSearchableSelect(props) {
       onSelectedItemIdsChange(items.map((item) => item.id));
   }
   function handleValueChange(next) {
+    const creatableClicked = next.find(isCreatableSentinel);
+    if (creatableClicked) {
+      const newItem = onCreateProp?.(creatableClicked.label);
+      const realItems2 = next.filter(
+        (v) => !isGroupHeaderSentinel3(v) && !isSelectAllSentinel3(v) && !isCreatableSentinel(v)
+      );
+      setSelectedItems(newItem ? [...realItems2, newItem] : realItems2);
+      skipNextInputChangeRef.current = true;
+      setInternalInputValue("");
+      return;
+    }
     const selectAllClicked = next.filter(isSelectAllSentinel3);
     const groupSentinels = next.filter(isGroupHeaderSentinel3);
     const realItems = next.filter(
-      (v) => !isGroupHeaderSentinel3(v) && !isSelectAllSentinel3(v)
+      (v) => !isGroupHeaderSentinel3(v) && !isSelectAllSentinel3(v) && !isCreatableSentinel(v)
     );
     if (selectAllClicked.length > 0) {
       const allSelected = data.every(
@@ -2242,6 +2288,15 @@ function MultiSearchableSelect(props) {
     setSelectedItems(updated);
   }
   function handleSimpleValueChange(newItems) {
+    const creatableClicked = newItems.find(isCreatableSentinel);
+    if (creatableClicked) {
+      const newItem = onCreateProp?.(creatableClicked.label);
+      const realItems = newItems.filter((v) => !isCreatableSentinel(v));
+      setSelectedItems(newItem ? [...realItems, newItem] : realItems);
+      skipNextInputChangeRef.current = true;
+      setInternalInputValue("");
+      return;
+    }
     setSelectedItems(newItems);
   }
   function renderSentinelRow(row) {
@@ -2272,6 +2327,9 @@ function MultiSearchableSelect(props) {
         renderGroupHeading ? renderGroupHeading(row.groupName) : row.groupName
       ] }, `__header-${row.groupName}`);
     }
+    if (isCreatableSentinel(row)) {
+      return renderCreatableItem(row);
+    }
     const item = row;
     return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       ComboboxItem_default,
@@ -2286,10 +2344,31 @@ function MultiSearchableSelect(props) {
       item.id
     );
   }
-  const rootItems = flatItems ?? groups ?? (isChildrenMode ? void 0 : visibleData);
+  function renderCreatableItem(sentinel, style, index, measureRef) {
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      ComboboxItem_default,
+      {
+        value: sentinel,
+        itemId: "__creatable",
+        label: `Create "${sentinel.label}"`,
+        inputType: "none",
+        renderItem: () => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_seeds_react_icon4.default, { name: "plus-outline", size: "mini" }),
+          `Create "${sentinel.label}"`
+        ] }),
+        style,
+        index,
+        "data-index": index,
+        ref: measureRef
+      },
+      "__creatable"
+    );
+  }
+  const baseItems = flatItems ?? groups ?? (isChildrenMode ? void 0 : visibleData);
+  const rootItems = creatableSentinel && Array.isArray(baseItems) ? [...baseItems, creatableSentinel] : baseItems;
   const hasSentinels = selectAll || selectHeadings;
   const rootValue = hasSentinels ? [...value] : value;
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Field, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Field, { $fullWidth: fullWidth, children: [
     /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { ref: containerRef, style: { position: "relative" } }),
     /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
       import_combobox6.Combobox.Root,
@@ -2297,7 +2376,23 @@ function MultiSearchableSelect(props) {
         multiple: true,
         id,
         virtualized: isVirtualized,
-        filter,
+        filter: creatableProp ? (item, query) => {
+          if (isCreatableSentinel(item)) return true;
+          if (filter) return filter(item, query);
+          if (isGroupHeaderSentinel3(item) || isSelectAllSentinel3(item))
+            return true;
+          const label = itemToString(item);
+          return label.toLowerCase().includes(query.toLowerCase());
+        } : filter,
+        inputValue: internalInputValue,
+        onInputValueChange: (v, eventDetails) => {
+          if (eventDetails.reason === "input-clear" && open) return;
+          if (skipNextInputChangeRef.current) {
+            skipNextInputChangeRef.current = false;
+            return;
+          }
+          setInternalInputValue(v);
+        },
         open,
         disabled: props.disabled,
         onOpenChange: setOpen,
@@ -2320,15 +2415,17 @@ function MultiSearchableSelect(props) {
           hasSentinels ? handleValueChange : handleSimpleValueChange
         ),
         itemToStringLabel: (item) => {
-          if (!item || isGroupHeaderSentinel3(item) || isSelectAllSentinel3(item))
+          if (!item || isGroupHeaderSentinel3(item) || isSelectAllSentinel3(item) || isCreatableSentinel(item))
             return "";
           return itemToString(item);
         },
         isItemEqualToValue: (a, b) => {
+          if (isCreatableSentinel(a) && isCreatableSentinel(b))
+            return a.label === b.label;
           if (isGroupHeaderSentinel3(a) && isGroupHeaderSentinel3(b))
             return a.groupName === b.groupName;
           if (isSelectAllSentinel3(a) && isSelectAllSentinel3(b)) return true;
-          if (!isGroupHeaderSentinel3(a) && !isSelectAllSentinel3(a) && !isGroupHeaderSentinel3(b) && !isSelectAllSentinel3(b))
+          if (!isGroupHeaderSentinel3(a) && !isSelectAllSentinel3(a) && !isCreatableSentinel(a) && !isGroupHeaderSentinel3(b) && !isSelectAllSentinel3(b) && !isCreatableSentinel(b))
             return a.id === b.id;
           return false;
         },
@@ -2391,37 +2488,55 @@ function MultiSearchableSelect(props) {
                         itemToString,
                         inputType,
                         renderItem,
-                        renderGroupHeading
+                        renderGroupHeading,
+                        renderCreatableItem: creatableProp ? (sentinel, style, index, measureRef) => renderCreatableItem(
+                          sentinel,
+                          style,
+                          index,
+                          measureRef
+                        ) : void 0
                       }
-                    ) : children ? children : flatItems ? (row) => renderSentinelRow(row) : groups ? (group, index) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(React11.Fragment, { children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(ComboboxGroup, { items: group.items, children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ComboboxGroupLabel, { children: renderGroupHeading ? renderGroupHeading(group.value) : group.value }),
-                        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_combobox6.Combobox.Collection, { children: (item) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-                          ComboboxItem_default,
-                          {
-                            value: item,
-                            itemId: String(item.id),
-                            label: itemToString(item),
-                            disabled: item.disabled,
-                            inputType,
-                            renderItem: renderItem ? () => renderItem(item) : () => itemToString(item)
-                          },
-                          item.id
-                        ) })
-                      ] }),
-                      index < groups.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ComboboxSeparator, {})
-                    ] }, group.value) : (item) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-                      ComboboxItem_default,
-                      {
-                        value: item,
-                        itemId: String(item.id),
-                        label: itemToString(item),
-                        disabled: item.disabled,
-                        inputType,
-                        renderItem: renderItem ? () => renderItem(item) : () => itemToString(item)
-                      },
-                      item.id
-                    )
+                    ) : children ? children : flatItems ? (row) => renderSentinelRow(row) : groups ? (group, index) => {
+                      if (isCreatableSentinel(group)) {
+                        return renderCreatableItem(group);
+                      }
+                      const g = group;
+                      return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(React11.Fragment, { children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(ComboboxGroup, { items: g.items, children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ComboboxGroupLabel, { children: renderGroupHeading ? renderGroupHeading(g.value) : g.value }),
+                          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_combobox6.Combobox.Collection, { children: (item) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                            ComboboxItem_default,
+                            {
+                              value: item,
+                              itemId: String(item.id),
+                              label: itemToString(item),
+                              disabled: item.disabled,
+                              inputType,
+                              renderItem: renderItem ? () => renderItem(item) : () => itemToString(item)
+                            },
+                            item.id
+                          ) })
+                        ] }),
+                        index < groups.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ComboboxSeparator, {})
+                      ] }, g.value);
+                    } : (item) => {
+                      if (isCreatableSentinel(item)) {
+                        return renderCreatableItem(item);
+                      }
+                      const dataItem = item;
+                      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                        ComboboxItem_default,
+                        {
+                          value: dataItem,
+                          itemId: String(dataItem.id),
+                          label: itemToString(dataItem),
+                          disabled: dataItem.disabled,
+                          inputType,
+                          renderItem: renderItem ? () => renderItem(dataItem) : () => itemToString(dataItem)
+                        },
+                        dataItem.id
+                      );
+                    }
                   }
                 )
               ]
@@ -2432,8 +2547,353 @@ function MultiSearchableSelect(props) {
     )
   ] });
 }
+
+// src/v3/ActionMenu.tsx
+var React12 = __toESM(require("react"));
+var import_menu2 = require("@base-ui/react/menu");
+var import_seeds_react_radio3 = __toESM(require("@sproutsocial/seeds-react-radio"));
+var import_seeds_react_checkbox4 = __toESM(require("@sproutsocial/seeds-react-checkbox"));
+var import_seeds_react_icon5 = require("@sproutsocial/seeds-react-icon");
+
+// src/v3/ActionMenuStyles.tsx
+var import_menu = require("@base-ui/react/menu");
+var import_styled_components8 = __toESM(require("styled-components"));
+var import_seeds_react_mixins3 = require("@sproutsocial/seeds-react-mixins");
+var ActionMenuTrigger = (0, import_styled_components8.default)(import_menu.Menu.Trigger)``;
+var ActionMenuPositioner = (0, import_styled_components8.default)(import_menu.Menu.Positioner)`
+  min-width: var(--anchor-width);
+  z-index: 7;
+`;
+var ActionMenuPopup = (0, import_styled_components8.default)(import_menu.Menu.Popup)`
+  font-family: ${({ theme }) => theme.fontFamily};
+  background: ${({ theme }) => theme.colors.container.background.base};
+  border: 1px solid ${({ theme }) => theme.colors.container.border.base};
+  border-radius: ${({ theme }) => theme.radii[500]};
+  box-shadow: ${({ theme }) => theme.shadows.low};
+  outline: none;
+  max-height: min(var(--base-ui-available-height, 400px), 400px);
+  overflow-y: auto;
+  padding: ${({ theme }) => theme.space[200]};
+
+  &[data-open] {
+    animation: action-menu-popup-in 120ms ease-out;
+  }
+
+  &[data-closed] {
+    animation: action-menu-popup-out 100ms ease-in;
+  }
+
+  @keyframes action-menu-popup-in {
+    from {
+      opacity: 0;
+      transform: scale(0.95);
+    }
+    to {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+
+  @keyframes action-menu-popup-out {
+    from {
+      opacity: 1;
+      transform: scale(1);
+    }
+    to {
+      opacity: 0;
+      transform: scale(0.95);
+    }
+  }
+`;
+var ActionMenuGroup = (0, import_styled_components8.default)(import_menu.Menu.Group)`
+  display: block;
+`;
+var ActionMenuGroupLabel = (0, import_styled_components8.default)(import_menu.Menu.GroupLabel)`
+  padding: ${({ theme }) => `${theme.space[300]} ${theme.space[300]} ${theme.space[200]}`};
+  font-size: ${({ theme }) => theme.typography[100].fontSize};
+  font-weight: ${({ theme }) => theme.fontWeights.semibold};
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: ${({ theme }) => theme.colors.text.subtext};
+`;
+var ActionMenuSeparator = (0, import_styled_components8.default)(import_menu.Menu.Separator)`
+  height: 1px;
+  margin: ${({ theme }) => `${theme.space[200]} ${theme.space[300]}`};
+  background: ${({ theme }) => theme.colors.container.border.base};
+`;
+var menuItemStyles = import_styled_components8.css`
+  box-sizing: border-box;
+  display: block;
+  width: 100%;
+  border-radius: ${({ theme }) => theme.radii[500]};
+  background-color: ${({ theme }) => theme.colors.listItem.background.base};
+  border: 1px solid ${({ theme }) => theme.colors.listItem.background.base};
+  color: ${({ theme }) => theme.colors.text.body};
+  font-family: ${({ theme }) => theme.fontFamily};
+  font-weight: ${({ theme }) => theme.fontWeights.normal};
+  text-align: left;
+  text-decoration: none;
+  padding: ${({ theme }) => theme.space[300]};
+  outline: 0;
+  ${({ theme }) => theme.typography[200]};
+  transition: all ${({ theme }) => theme.duration.fast};
+  cursor: pointer;
+  user-select: none;
+
+  &[data-highlighted] {
+    border-color: ${({ theme }) => theme.colors.listItem.border.base};
+    background-color: ${({ theme }) => theme.colors.listItem.background.hover};
+    color: ${({ theme }) => theme.colors.text.body};
+    text-decoration: none;
+  }
+
+  &[data-disabled] {
+    cursor: not-allowed;
+    opacity: 0.4;
+  }
+`;
+var StyledMenuItem = (0, import_styled_components8.default)(import_menu.Menu.Item)`
+  ${menuItemStyles}
+`;
+var StyledCheckboxItem = (0, import_styled_components8.default)(import_menu.Menu.CheckboxItem)`
+  ${menuItemStyles}
+  display: flex;
+  align-items: center;
+  gap: ${({ theme }) => theme.space[300]};
+`;
+var StyledRadioItem = (0, import_styled_components8.default)(import_menu.Menu.RadioItem)`
+  ${menuItemStyles}
+  display: flex;
+  align-items: center;
+  gap: ${({ theme }) => theme.space[300]};
+`;
+var StyledCheckboxItemIndicator = (0, import_styled_components8.default)(import_menu.Menu.CheckboxItemIndicator)`
+  display: flex;
+  align-items: center;
+  width: 16px;
+  color: ${({ theme }) => theme.colors.text.body};
+`;
+var StyledRadioItemIndicator = (0, import_styled_components8.default)(import_menu.Menu.RadioItemIndicator)`
+  display: flex;
+  align-items: center;
+  width: 16px;
+  color: ${({ theme }) => theme.colors.text.body};
+`;
+var StyledSubmenuTrigger = (0, import_styled_components8.default)(import_menu.Menu.SubmenuTrigger)`
+  ${menuItemStyles}
+  display: flex;
+  align-items: center;
+  gap: ${({ theme }) => theme.space[300]};
+  justify-content: space-between;
+
+  &[data-popup-open] {
+    border-color: ${({ theme }) => theme.colors.listItem.border.base};
+    background-color: ${({ theme }) => theme.colors.listItem.background.hover};
+  }
+`;
+var StyledLinkItem = (0, import_styled_components8.default)(import_menu.Menu.LinkItem)`
+  ${menuItemStyles}
+`;
+
+// src/v3/ActionMenu.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
+function ActionMenu({
+  trigger,
+  children,
+  open,
+  defaultOpen,
+  onOpenChange,
+  disabled
+}) {
+  const { containerRef, portalContainer } = useSeedsPortalContainer();
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+    import_menu2.Menu.Root,
+    {
+      open,
+      defaultOpen,
+      onOpenChange,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { ref: containerRef, style: { position: "relative" } }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ActionMenuTrigger, { render: trigger, disabled }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_menu2.Menu.Portal, { container: portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ActionMenuPositioner, { sideOffset: 8, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ActionMenuPopup, { children }) }) })
+      ]
+    }
+  );
+}
+function MenuGroup({
+  children,
+  label,
+  showSeparator = false
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(ActionMenuGroup, { children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ActionMenuGroupLabel, { children: label }),
+      children
+    ] }),
+    showSeparator && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ActionMenuSeparator, {})
+  ] });
+}
+function MenuRadioGroup({
+  children,
+  value,
+  defaultValue,
+  onValueChange
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    import_menu2.Menu.RadioGroup,
+    {
+      value,
+      defaultValue,
+      onValueChange,
+      children
+    }
+  );
+}
+function MenuItem(props) {
+  const generatedId = React12.useId();
+  if (props.type === "checkbox") {
+    const {
+      children: children2,
+      checked,
+      defaultChecked,
+      onCheckedChange,
+      disabled: disabled2,
+      closeOnClick: closeOnClick2 = false,
+      id
+    } = props;
+    const itemId = id ?? `checkbox-menu-item-${generatedId}`;
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+      StyledCheckboxItem,
+      {
+        checked,
+        defaultChecked,
+        onCheckedChange,
+        disabled: disabled2,
+        closeOnClick: closeOnClick2,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            StyledCheckboxItemIndicator,
+            {
+              keepMounted: true,
+              render: (_indicatorProps, state) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                import_seeds_react_checkbox4.default,
+                {
+                  checked: state.checked,
+                  onChange: () => {
+                  },
+                  tabIndex: -1,
+                  id: itemId,
+                  name: "menu-checkbox-item"
+                }
+              )
+            }
+          ),
+          children2
+        ]
+      }
+    );
+  }
+  if (props.type === "radio") {
+    const { children: children2, value, disabled: disabled2, closeOnClick: closeOnClick2 = false } = props;
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+      StyledRadioItem,
+      {
+        value,
+        disabled: disabled2,
+        closeOnClick: closeOnClick2,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            StyledRadioItemIndicator,
+            {
+              keepMounted: true,
+              render: (_indicatorProps, state) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                import_seeds_react_radio3.default,
+                {
+                  checked: state.checked,
+                  onChange: () => {
+                  },
+                  tabIndex: -1,
+                  id: `radio-menu-item-${value}`,
+                  name: "menu-radio-item"
+                }
+              )
+            }
+          ),
+          children2
+        ]
+      }
+    );
+  }
+  const {
+    children,
+    onClick,
+    disabled,
+    closeOnClick = true,
+    href,
+    target
+  } = props;
+  if (href) {
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(StyledLinkItem, { href, target, closeOnClick, children });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    StyledMenuItem,
+    {
+      onClick,
+      disabled,
+      closeOnClick,
+      children
+    }
+  );
+}
+function MenuSub({
+  trigger,
+  children,
+  open,
+  defaultOpen,
+  onOpenChange,
+  closeParentOnEsc = false
+}) {
+  const { containerRef, portalContainer } = useSeedsPortalContainer();
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+    import_menu2.Menu.SubmenuRoot,
+    {
+      open,
+      defaultOpen,
+      onOpenChange,
+      closeParentOnEsc,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { ref: containerRef, style: { position: "relative" } }),
+        trigger,
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_menu2.Menu.Portal, { container: portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ActionMenuPositioner, { sideOffset: getOffset, alignOffset: getOffset, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ActionMenuPopup, { children }) }) })
+      ]
+    }
+  );
+}
+function getOffset({ side }) {
+  return side === "top" || side === "bottom" ? 4 : -8;
+}
+function MenuSubTrigger({
+  children,
+  disabled,
+  label,
+  openOnHover = true
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+    StyledSubmenuTrigger,
+    {
+      disabled,
+      label,
+      openOnHover,
+      children: [
+        children,
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_seeds_react_icon5.Icon, { name: "chevron-right-outline", fixedWidth: true, "aria-hidden": true })
+      ]
+    }
+  );
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  ActionMenu,
   ComboboxActionButtons,
   ComboboxClear,
   ComboboxEmpty,
@@ -2456,6 +2916,11 @@ function MultiSearchableSelect(props) {
   ComboboxTokenInput,
   ComboboxTokenInputGroup,
   ComboboxTrigger,
+  MenuGroup,
+  MenuItem,
+  MenuRadioGroup,
+  MenuSub,
+  MenuSubTrigger,
   MultiCombobox,
   MultiSearchableSelect,
   MultiSelect,