beez-ui 2.7.1 → 3.0.0

package/dist/components/dropdown-menu.js

@@ -1,742 +1,107 @@
 "use client";
 import { c as _c } from "react/compiler-runtime";
-/**
-* Arc's Dropdown menu (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md) as beez-ui's composable Radix
-* menu: Arc's raised panel, item rows, danger tone, separators, placement defaults and staggered item entrance on its
-* tokens, keeping every subcomponent, prop and `data-slot` of the previous API. The surface keeps beez-ui's reveal
-* from the trigger edge and the highlight that glides between items with the keyboard.
-*/
-import * as React from "react";
-import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
-import { DROPDOWN_MENU_COLLISION_PADDING_PX, DROPDOWN_MENU_SIDE_OFFSET_PX } from "../constants/dropdown-menu.js";
-import { GlideSlot } from "../motion/glide-slot.js";
-import { MotionSlot } from "../motion/motion-slot.js";
-import { MotionPresence, MotionOpenProvider, useMotionOpenState } from "../motion/presence.js";
+import { ChevronDownIcon } from "lucide-react";
 import { cn } from "../lib/utils.js";
-import { CheckIcon, ChevronRightIcon } from "lucide-react";
+import { Button } from "./button.js";
+import { DropdownMenu as DropdownMenuRoot, DropdownMenuContent, DropdownMenuTrigger } from "./primitives/dropdown-menu.js";
+import { DropdownMenuItems } from "./primitives/dropdown-menu-items.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
-* Arc's menu panel on its tokens. It also sets the direction its items rise in from (`--menu-item-offset-*`, toward
-* the trigger), so a nested submenu staggers its own items from its own side.
-*/
-const menuSurfaceClassName = "relative z-50 overflow-x-hidden overflow-y-auto rounded-(--radius-panel) border border-border bg-surface-raised p-[5px] text-foreground shadow-(--shadow-floating) data-[state=closed]:pointer-events-none data-[state=closed]:overflow-hidden [--menu-item-offset-x:0px] [--menu-item-offset-y:-2px] data-[side=top]:[--menu-item-offset-y:2px] data-[side=left]:[--menu-item-offset-x:2px] data-[side=left]:[--menu-item-offset-y:0px] data-[side=right]:[--menu-item-offset-x:-2px] data-[side=right]:[--menu-item-offset-y:0px]";
-/**
-* Arc's item row: 36px tall, a muted fill when highlighted and a muted icon (icons with their own `text-*` color keep
-* it). Items fade and rise in once when the menu opens, staggered by 35ms up to the fifth row; reduced motion shows
-* them at once. Only color, opacity and translate transition, so the highlight fill paints instantly and the
-* keyboard glide owns its movement.
+* A focused list of actions anchored to a trigger.
+* @param props - The label, the items and optional trigger, selection, placement and open state.
+* @returns The trigger with its menu.
 */
-const menuItemClassName = "relative flex min-h-9 cursor-pointer items-center gap-2.5 rounded-[calc(var(--radius-panel)-6px)] px-[11px] text-sm text-foreground outline-hidden select-none [transition:color_var(--duration-fast)_var(--ease-standard),opacity_var(--duration-standard)_var(--ease-enter)_var(--menu-item-delay,0ms),translate_var(--duration-standard)_var(--ease-enter)_var(--menu-item-delay,0ms)] starting:opacity-0 starting:[translate:var(--menu-item-offset-x,0px)_var(--menu-item-offset-y,0px)] nth-2:[--menu-item-delay:35ms] nth-3:[--menu-item-delay:70ms] nth-4:[--menu-item-delay:105ms] nth-[n+5]:[--menu-item-delay:140ms] motion-reduce:transition-none data-highlighted:bg-surface-muted data-inset:pl-[38px] data-disabled:pointer-events-none data-disabled:cursor-default data-disabled:opacity-45 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[svg:not([class*='text-'])]:text-text-secondary";
-/** Room at the end of checkbox and radio rows for their check, as in Arc's select options. */
-const menuSelectableItemClassName = "pr-[34px]";
-/** Position and color of the check of checkbox and radio rows. */
-const menuItemIndicatorClassName = "pointer-events-none absolute right-2.5 flex items-center justify-center text-foreground";
 function DropdownMenu(t0) {
-	const $ = _c(9);
-	let props;
-	if ($[0] !== t0) {
-		({...props} = t0);
-		$[0] = t0;
-		$[1] = props;
-	} else {
-		props = $[1];
-	}
-	const [motionOpen, setMotionOpen] = useMotionOpenState(props);
+	const $ = _c(23);
+	const { label, items, icon, trigger, selection, side, align, contentClassName, contentLabel, className, open, defaultOpen, onOpenChange, modal } = t0;
 	let t1;
-	if ($[2] !== motionOpen || $[3] !== props || $[4] !== setMotionOpen) {
-		t1 = /* @__PURE__ */ _jsx(DropdownMenuPrimitive.Root, {
-			"data-slot": "dropdown-menu",
-			...props,
-			open: motionOpen,
-			onOpenChange: setMotionOpen
-		});
-		$[2] = motionOpen;
-		$[3] = props;
-		$[4] = setMotionOpen;
-		$[5] = t1;
-	} else {
-		t1 = $[5];
-	}
-	let t2;
-	if ($[6] !== motionOpen || $[7] !== t1) {
-		t2 = /* @__PURE__ */ _jsx(MotionOpenProvider, {
-			scope: "dropdown-menu",
-			open: motionOpen,
-			children: t1
-		});
-		$[6] = motionOpen;
-		$[7] = t1;
-		$[8] = t2;
-	} else {
-		t2 = $[8];
-	}
-	return t2;
-}
-function DropdownMenuPortal(t0) {
-	const $ = _c(4);
-	let props;
-	if ($[0] !== t0) {
-		({...props} = t0);
-		$[0] = t0;
-		$[1] = props;
-	} else {
-		props = $[1];
-	}
-	let t1;
-	if ($[2] !== props) {
-		t1 = /* @__PURE__ */ _jsx(DropdownMenuPrimitive.Portal, {
-			"data-slot": "dropdown-menu-portal",
-			...props
-		});
-		$[2] = props;
-		$[3] = t1;
-	} else {
-		t1 = $[3];
-	}
-	return t1;
-}
-function DropdownMenuTrigger(t0) {
-	const $ = _c(4);
-	let props;
-	if ($[0] !== t0) {
-		({...props} = t0);
-		$[0] = t0;
-		$[1] = props;
-	} else {
-		props = $[1];
-	}
-	let t1;
-	if ($[2] !== props) {
-		t1 = /* @__PURE__ */ _jsx(DropdownMenuPrimitive.Trigger, {
-			"data-slot": "dropdown-menu-trigger",
-			...props
-		});
-		$[2] = props;
-		$[3] = t1;
-	} else {
-		t1 = $[3];
-	}
-	return t1;
-}
-/**
-* Arc's menu panel. It sizes action menus by their content, at least 12rem unless the viewport is narrower, instead
-* of narrowing them to an icon trigger.
-* @param props - Primitive properties. Arc's defaults: `align="start"`, a 6px `sideOffset`, a 12px
-*   `collisionPadding` and `loop`, so arrow keys wrap from the last item to the first.
-* @returns The portaled menu, animated in and out with its open state.
-*/
-function DropdownMenuContent(t0) {
-	const $ = _c(19);
-	let className;
-	let props;
-	let t1;
-	let t2;
-	let t3;
-	let t4;
-	if ($[0] !== t0) {
-		({className, align: t1, sideOffset: t2, collisionPadding: t3, loop: t4, ...props} = t0);
-		$[0] = t0;
-		$[1] = className;
-		$[2] = props;
-		$[3] = t1;
-		$[4] = t2;
-		$[5] = t3;
-		$[6] = t4;
-	} else {
-		className = $[1];
-		props = $[2];
-		t1 = $[3];
-		t2 = $[4];
-		t3 = $[5];
-		t4 = $[6];
-	}
-	const align = t1 === undefined ? "start" : t1;
-	const sideOffset = t2 === undefined ? DROPDOWN_MENU_SIDE_OFFSET_PX : t2;
-	const collisionPadding = t3 === undefined ? DROPDOWN_MENU_COLLISION_PADDING_PX : t3;
-	const loop = t4 === undefined ? true : t4;
-	const t5 = props.forceMount;
-	let t6;
-	if ($[7] !== className) {
-		t6 = cn(menuSurfaceClassName, "max-h-(--radix-dropdown-menu-content-available-height) min-w-[min(12rem,var(--radix-dropdown-menu-content-available-width))] max-w-(--radix-dropdown-menu-content-available-width) origin-(--radix-dropdown-menu-content-transform-origin)", className);
-		$[7] = className;
-		$[8] = t6;
-	} else {
-		t6 = $[8];
-	}
-	let t7;
-	if ($[9] !== align || $[10] !== collisionPadding || $[11] !== loop || $[12] !== props || $[13] !== sideOffset || $[14] !== t6) {
-		t7 = /* @__PURE__ */ _jsx(MotionSlot, {
-			kind: "surface",
-			children: /* @__PURE__ */ _jsx(GlideSlot, {
-				preset: "menu",
-				children: /* @__PURE__ */ _jsx(DropdownMenuPrimitive.Content, {
-					forceMount: true,
-					"data-slot": "dropdown-menu-content",
-					sideOffset,
-					align,
-					collisionPadding,
-					loop,
-					className: t6,
-					...props
+	if ($[0] !== className || $[1] !== icon || $[2] !== label || $[3] !== trigger) {
+		t1 = trigger ?? /* @__PURE__ */ _jsxs(Button, {
+			variant: "secondary",
+			className: cn("max-w-full", className),
+			children: [
+				icon,
+				/* @__PURE__ */ _jsx("span", {
+					className: "min-w-0 truncate",
+					children: label
+				}),
+				/* @__PURE__ */ _jsx(ChevronDownIcon, {
+					"aria-hidden": "true",
+					strokeWidth: 1.75,
+					className: "text-text-muted"
 				})
-			})
+			]
 		});
-		$[9] = align;
-		$[10] = collisionPadding;
-		$[11] = loop;
-		$[12] = props;
-		$[13] = sideOffset;
-		$[14] = t6;
-		$[15] = t7;
-	} else {
-		t7 = $[15];
-	}
-	let t8;
-	if ($[16] !== props.forceMount || $[17] !== t7) {
-		t8 = /* @__PURE__ */ _jsx(DropdownMenuPrimitive.Portal, {
-			forceMount: true,
-			children: /* @__PURE__ */ _jsx(MotionPresence, {
-				scope: "dropdown-menu",
-				forceMount: t5,
-				children: t7
-			})
-		});
-		$[16] = props.forceMount;
-		$[17] = t7;
-		$[18] = t8;
-	} else {
-		t8 = $[18];
-	}
-	return t8;
-}
-function DropdownMenuGroup(t0) {
-	const $ = _c(4);
-	let props;
-	if ($[0] !== t0) {
-		({...props} = t0);
-		$[0] = t0;
-		$[1] = props;
-	} else {
-		props = $[1];
-	}
-	let t1;
-	if ($[2] !== props) {
-		t1 = /* @__PURE__ */ _jsx(DropdownMenuPrimitive.Group, {
-			"data-slot": "dropdown-menu-group",
-			...props
-		});
-		$[2] = props;
-		$[3] = t1;
-	} else {
-		t1 = $[3];
-	}
-	return t1;
-}
-/**
-* Renders an action row. `destructive` draws Arc's danger tone: danger text and icon over a faint danger fill when
-* highlighted.
-* @param props - Primitive properties, `inset` to align with rows that carry an icon, and the `variant`.
-* @returns The styled primitive with its original interaction contract.
-*/
-function DropdownMenuItem(t0) {
-	const $ = _c(12);
-	let className;
-	let inset;
-	let props;
-	let t1;
-	if ($[0] !== t0) {
-		({className, inset, variant: t1, ...props} = t0);
-		$[0] = t0;
-		$[1] = className;
-		$[2] = inset;
-		$[3] = props;
+		$[0] = className;
+		$[1] = icon;
+		$[2] = label;
+		$[3] = trigger;
 		$[4] = t1;
 	} else {
-		className = $[1];
-		inset = $[2];
-		props = $[3];
 		t1 = $[4];
 	}
-	const variant = t1 === undefined ? "default" : t1;
-	let t2;
-	if ($[5] !== className) {
-		t2 = cn("group/dropdown-menu-item", menuItemClassName, "data-[variant=destructive]:text-danger data-[variant=destructive]:*:[svg:not([class*='text-'])]:text-danger data-[variant=destructive]:data-highlighted:bg-[color-mix(in_oklab,var(--danger)_8%,var(--surface))]", className);
-		$[5] = className;
-		$[6] = t2;
-	} else {
-		t2 = $[6];
-	}
-	let t3;
-	if ($[7] !== inset || $[8] !== props || $[9] !== t2 || $[10] !== variant) {
-		t3 = /* @__PURE__ */ _jsx(DropdownMenuPrimitive.Item, {
-			"data-slot": "dropdown-menu-item",
-			"data-inset": inset,
-			"data-variant": variant,
-			className: t2,
-			...props
-		});
-		$[7] = inset;
-		$[8] = props;
-		$[9] = t2;
-		$[10] = variant;
-		$[11] = t3;
-	} else {
-		t3 = $[11];
-	}
-	return t3;
-}
-/**
-* Renders a selectable checkbox action with its check at the end of the row.
-* @param props - Primitive properties and `inset` to align with rows that carry an icon.
-* @returns The styled primitive with its original interaction contract.
-*/
-function DropdownMenuCheckboxItem(t0) {
-	const $ = _c(15);
-	let checked;
-	let children;
-	let className;
-	let inset;
-	let props;
-	if ($[0] !== t0) {
-		({className, children, checked, inset, ...props} = t0);
-		$[0] = t0;
-		$[1] = checked;
-		$[2] = children;
-		$[3] = className;
-		$[4] = inset;
-		$[5] = props;
-	} else {
-		checked = $[1];
-		children = $[2];
-		className = $[3];
-		inset = $[4];
-		props = $[5];
-	}
-	let t1;
-	if ($[6] !== className) {
-		t1 = cn(menuItemClassName, menuSelectableItemClassName, className);
-		$[6] = className;
-		$[7] = t1;
-	} else {
-		t1 = $[7];
-	}
 	let t2;
-	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
-		t2 = /* @__PURE__ */ _jsx("span", {
-			className: menuItemIndicatorClassName,
-			"data-slot": "dropdown-menu-checkbox-item-indicator",
-			children: /* @__PURE__ */ _jsx(MotionSlot, {
-				kind: "item-check",
-				children: /* @__PURE__ */ _jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ _jsx(CheckIcon, { strokeWidth: 1.75 }) })
-			})
-		});
-		$[8] = t2;
-	} else {
-		t2 = $[8];
-	}
-	let t3;
-	if ($[9] !== checked || $[10] !== children || $[11] !== inset || $[12] !== props || $[13] !== t1) {
-		t3 = /* @__PURE__ */ _jsxs(DropdownMenuPrimitive.CheckboxItem, {
-			"data-slot": "dropdown-menu-checkbox-item",
-			"data-inset": inset,
-			className: t1,
-			checked,
-			...props,
-			children: [t2, children]
-		});
-		$[9] = checked;
-		$[10] = children;
-		$[11] = inset;
-		$[12] = props;
-		$[13] = t1;
-		$[14] = t3;
-	} else {
-		t3 = $[14];
-	}
-	return t3;
-}
-function DropdownMenuRadioGroup(t0) {
-	const $ = _c(4);
-	let props;
-	if ($[0] !== t0) {
-		({...props} = t0);
-		$[0] = t0;
-		$[1] = props;
-	} else {
-		props = $[1];
-	}
-	let t1;
-	if ($[2] !== props) {
-		t1 = /* @__PURE__ */ _jsx(DropdownMenuPrimitive.RadioGroup, {
-			"data-slot": "dropdown-menu-radio-group",
-			...props
-		});
-		$[2] = props;
-		$[3] = t1;
-	} else {
-		t1 = $[3];
-	}
-	return t1;
-}
-/**
-* Renders a mutually exclusive action with its check at the end of the row.
-* @param props - Primitive properties and `inset` to align with rows that carry an icon.
-* @returns The styled primitive with its original interaction contract.
-*/
-function DropdownMenuRadioItem(t0) {
-	const $ = _c(13);
-	let children;
-	let className;
-	let inset;
-	let props;
-	if ($[0] !== t0) {
-		({className, children, inset, ...props} = t0);
-		$[0] = t0;
-		$[1] = children;
-		$[2] = className;
-		$[3] = inset;
-		$[4] = props;
-	} else {
-		children = $[1];
-		className = $[2];
-		inset = $[3];
-		props = $[4];
-	}
-	let t1;
-	if ($[5] !== className) {
-		t1 = cn(menuItemClassName, menuSelectableItemClassName, className);
-		$[5] = className;
-		$[6] = t1;
-	} else {
-		t1 = $[6];
-	}
-	let t2;
-	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
-		t2 = /* @__PURE__ */ _jsx("span", {
-			className: menuItemIndicatorClassName,
-			"data-slot": "dropdown-menu-radio-item-indicator",
-			children: /* @__PURE__ */ _jsx(MotionSlot, {
-				kind: "item-check",
-				children: /* @__PURE__ */ _jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ _jsx(CheckIcon, { strokeWidth: 1.75 }) })
-			})
-		});
-		$[7] = t2;
-	} else {
-		t2 = $[7];
-	}
-	let t3;
-	if ($[8] !== children || $[9] !== inset || $[10] !== props || $[11] !== t1) {
-		t3 = /* @__PURE__ */ _jsxs(DropdownMenuPrimitive.RadioItem, {
-			"data-slot": "dropdown-menu-radio-item",
-			"data-inset": inset,
-			className: t1,
-			...props,
-			children: [t2, children]
-		});
-		$[8] = children;
-		$[9] = inset;
-		$[10] = props;
-		$[11] = t1;
-		$[12] = t3;
-	} else {
-		t3 = $[12];
-	}
-	return t3;
-}
-/**
-* Renders a muted group label aligned with the item text.
-* @param props - Primitive properties and `inset` to align with rows that carry an icon.
-* @returns The styled primitive with its original interaction contract.
-*/
-function DropdownMenuLabel(t0) {
-	const $ = _c(10);
-	let className;
-	let inset;
-	let props;
-	if ($[0] !== t0) {
-		({className, inset, ...props} = t0);
-		$[0] = t0;
-		$[1] = className;
-		$[2] = inset;
-		$[3] = props;
-	} else {
-		className = $[1];
-		inset = $[2];
-		props = $[3];
-	}
-	let t1;
-	if ($[4] !== className) {
-		t1 = cn("px-[11px] py-1.5 text-xs font-medium text-text-muted data-inset:pl-[38px]", className);
-		$[4] = className;
-		$[5] = t1;
-	} else {
-		t1 = $[5];
-	}
-	let t2;
-	if ($[6] !== inset || $[7] !== props || $[8] !== t1) {
-		t2 = /* @__PURE__ */ _jsx(DropdownMenuPrimitive.Label, {
-			"data-slot": "dropdown-menu-label",
-			"data-inset": inset,
-			className: t1,
-			...props
-		});
-		$[6] = inset;
-		$[7] = props;
-		$[8] = t1;
-		$[9] = t2;
-	} else {
-		t2 = $[9];
-	}
-	return t2;
-}
-function DropdownMenuSeparator(t0) {
-	const $ = _c(8);
-	let className;
-	let props;
-	if ($[0] !== t0) {
-		({className, ...props} = t0);
-		$[0] = t0;
-		$[1] = className;
-		$[2] = props;
-	} else {
-		className = $[1];
-		props = $[2];
-	}
-	let t1;
-	if ($[3] !== className) {
-		t1 = cn("-mx-1 my-1 h-px bg-border-subtle", className);
-		$[3] = className;
-		$[4] = t1;
-	} else {
-		t1 = $[4];
-	}
-	let t2;
-	if ($[5] !== props || $[6] !== t1) {
-		t2 = /* @__PURE__ */ _jsx(DropdownMenuPrimitive.Separator, {
-			"data-slot": "dropdown-menu-separator",
-			className: t1,
-			...props
-		});
-		$[5] = props;
-		$[6] = t1;
-		$[7] = t2;
-	} else {
-		t2 = $[7];
-	}
-	return t2;
-}
-function DropdownMenuShortcut(t0) {
-	const $ = _c(8);
-	let className;
-	let props;
-	if ($[0] !== t0) {
-		({className, ...props} = t0);
-		$[0] = t0;
-		$[1] = className;
-		$[2] = props;
-	} else {
-		className = $[1];
-		props = $[2];
-	}
-	let t1;
-	if ($[3] !== className) {
-		t1 = cn("ml-auto text-xs text-text-muted group-data-highlighted/dropdown-menu-item:text-text-secondary", className);
-		$[3] = className;
-		$[4] = t1;
-	} else {
-		t1 = $[4];
-	}
-	let t2;
-	if ($[5] !== props || $[6] !== t1) {
-		t2 = /* @__PURE__ */ _jsx("span", {
-			"data-slot": "dropdown-menu-shortcut",
-			className: t1,
-			...props
-		});
-		$[5] = props;
-		$[6] = t1;
-		$[7] = t2;
-	} else {
-		t2 = $[7];
-	}
-	return t2;
-}
-function DropdownMenuSub(t0) {
-	const $ = _c(9);
-	let props;
-	if ($[0] !== t0) {
-		({...props} = t0);
-		$[0] = t0;
-		$[1] = props;
-	} else {
-		props = $[1];
-	}
-	const [motionOpen, setMotionOpen] = useMotionOpenState(props);
-	let t1;
-	if ($[2] !== motionOpen || $[3] !== props || $[4] !== setMotionOpen) {
-		t1 = /* @__PURE__ */ _jsx(DropdownMenuPrimitive.Sub, {
-			"data-slot": "dropdown-menu-sub",
-			...props,
-			open: motionOpen,
-			onOpenChange: setMotionOpen
-		});
-		$[2] = motionOpen;
-		$[3] = props;
-		$[4] = setMotionOpen;
-		$[5] = t1;
-	} else {
-		t1 = $[5];
-	}
-	let t2;
-	if ($[6] !== motionOpen || $[7] !== t1) {
-		t2 = /* @__PURE__ */ _jsx(MotionOpenProvider, {
-			scope: "dropdown-sub",
-			open: motionOpen,
+	if ($[5] !== t1) {
+		t2 = /* @__PURE__ */ _jsx(DropdownMenuTrigger, {
+			asChild: true,
 			children: t1
 		});
-		$[6] = motionOpen;
-		$[7] = t1;
-		$[8] = t2;
-	} else {
-		t2 = $[8];
-	}
-	return t2;
-}
-/**
-* Renders the row that opens a nested menu. It keeps the highlight fill while its submenu is open and nudges its
-* chevron toward it.
-* @param props - Primitive properties and `inset` to align with rows that carry an icon.
-* @returns The styled primitive with its original interaction contract.
-*/
-function DropdownMenuSubTrigger(t0) {
-	const $ = _c(13);
-	let children;
-	let className;
-	let inset;
-	let props;
-	if ($[0] !== t0) {
-		({className, inset, children, ...props} = t0);
-		$[0] = t0;
-		$[1] = children;
-		$[2] = className;
-		$[3] = inset;
-		$[4] = props;
-	} else {
-		children = $[1];
-		className = $[2];
-		inset = $[3];
-		props = $[4];
-	}
-	let t1;
-	if ($[5] !== className) {
-		t1 = cn(menuItemClassName, "data-[state=open]:bg-surface-muted data-open:*:data-[slot=dropdown-menu-sub-trigger-icon]:translate-x-0.5", className);
-		$[5] = className;
-		$[6] = t1;
-	} else {
-		t1 = $[6];
-	}
-	let t2;
-	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
-		t2 = /* @__PURE__ */ _jsx(ChevronRightIcon, {
-			"data-slot": "dropdown-menu-sub-trigger-icon",
-			strokeWidth: 1.75,
-			className: "ml-auto text-text-muted transition-transform duration-200 ease-out motion-reduce:transition-none"
-		});
-		$[7] = t2;
-	} else {
-		t2 = $[7];
-	}
-	let t3;
-	if ($[8] !== children || $[9] !== inset || $[10] !== props || $[11] !== t1) {
-		t3 = /* @__PURE__ */ _jsxs(DropdownMenuPrimitive.SubTrigger, {
-			"data-slot": "dropdown-menu-sub-trigger",
-			"data-inset": inset,
-			className: t1,
-			...props,
-			children: [children, t2]
-		});
-		$[8] = children;
-		$[9] = inset;
-		$[10] = props;
-		$[11] = t1;
-		$[12] = t3;
-	} else {
-		t3 = $[12];
-	}
-	return t3;
-}
-/**
-* Renders a nested menu on the same raised panel, at least 12rem wide.
-* @param props - Primitive properties. Arc's defaults: a 12px `collisionPadding` and `loop`.
-* @returns The submenu, animated in and out with its open state.
-*/
-function DropdownMenuSubContent(t0) {
-	const $ = _c(15);
-	let className;
-	let props;
-	let t1;
-	let t2;
-	if ($[0] !== t0) {
-		({className, collisionPadding: t1, loop: t2, ...props} = t0);
-		$[0] = t0;
-		$[1] = className;
-		$[2] = props;
-		$[3] = t1;
-		$[4] = t2;
+		$[5] = t1;
+		$[6] = t2;
 	} else {
-		className = $[1];
-		props = $[2];
-		t1 = $[3];
-		t2 = $[4];
+		t2 = $[6];
 	}
-	const collisionPadding = t1 === undefined ? DROPDOWN_MENU_COLLISION_PADDING_PX : t1;
-	const loop = t2 === undefined ? true : t2;
-	const t3 = props.forceMount;
+	const t3 = contentLabel ?? label;
 	let t4;
-	if ($[5] !== className) {
-		t4 = cn(menuSurfaceClassName, "min-w-48 origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden", className);
-		$[5] = className;
-		$[6] = t4;
+	if ($[7] !== items || $[8] !== selection) {
+		t4 = /* @__PURE__ */ _jsx(DropdownMenuItems, {
+			items,
+			selection
+		});
+		$[7] = items;
+		$[8] = selection;
+		$[9] = t4;
 	} else {
-		t4 = $[6];
+		t4 = $[9];
 	}
 	let t5;
-	if ($[7] !== collisionPadding || $[8] !== loop || $[9] !== props || $[10] !== t4) {
-		t5 = /* @__PURE__ */ _jsx(MotionSlot, {
-			kind: "surface",
-			children: /* @__PURE__ */ _jsx(GlideSlot, {
-				preset: "menu",
-				children: /* @__PURE__ */ _jsx(DropdownMenuPrimitive.SubContent, {
-					forceMount: true,
-					"data-slot": "dropdown-menu-sub-content",
-					collisionPadding,
-					loop,
-					className: t4,
-					...props
-				})
-			})
-		});
-		$[7] = collisionPadding;
-		$[8] = loop;
-		$[9] = props;
-		$[10] = t4;
-		$[11] = t5;
-	} else {
-		t5 = $[11];
+	if ($[10] !== align || $[11] !== contentClassName || $[12] !== side || $[13] !== t3 || $[14] !== t4) {
+		t5 = /* @__PURE__ */ _jsx(DropdownMenuContent, {
+			side,
+			align,
+			className: contentClassName,
+			"aria-label": t3,
+			"aria-labelledby": undefined,
+			children: t4
+		});
+		$[10] = align;
+		$[11] = contentClassName;
+		$[12] = side;
+		$[13] = t3;
+		$[14] = t4;
+		$[15] = t5;
+	} else {
+		t5 = $[15];
 	}
 	let t6;
-	if ($[12] !== props.forceMount || $[13] !== t5) {
-		t6 = /* @__PURE__ */ _jsx(MotionPresence, {
-			scope: "dropdown-sub",
-			forceMount: t3,
-			children: t5
-		});
-		$[12] = props.forceMount;
-		$[13] = t5;
-		$[14] = t6;
-	} else {
-		t6 = $[14];
+	if ($[16] !== defaultOpen || $[17] !== modal || $[18] !== onOpenChange || $[19] !== open || $[20] !== t2 || $[21] !== t5) {
+		t6 = /* @__PURE__ */ _jsxs(DropdownMenuRoot, {
+			open,
+			defaultOpen,
+			onOpenChange,
+			modal,
+			children: [t2, t5]
+		});
+		$[16] = defaultOpen;
+		$[17] = modal;
+		$[18] = onOpenChange;
+		$[19] = open;
+		$[20] = t2;
+		$[21] = t5;
+		$[22] = t6;
+	} else {
+		t6 = $[22];
 	}
 	return t6;
 }
-export { DropdownMenu, DropdownMenuPortal, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent };
+export { DropdownMenu };