@cueplusplus/ui 0.13.0

package/dist/overlays/context-menu.js

@@ -0,0 +1,78 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { useCuePortalProps } from "../system/portal.js";
+import { menuPopupClasses, overlayPopupTransitionClasses, overlayPositionerClasses, overlaySurfaceClasses } from "./_surface.js";
+import { DropdownMenu } from "./dropdown-menu.js";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+import { ContextMenu } from "@base-ui/react/context-menu";
+//#region src/overlays/context-menu.tsx
+/** Groups the parts of a context menu and owns its open state. Renders no element. */
+function ContextMenuRoot(props) {
+	return /* @__PURE__ */ jsx(ContextMenu.Root, { ...props });
+}
+/**
+* The menu a right click raises: row actions on a cue list, fixture actions on
+* the patch grid, node actions on a canvas.
+*
+* Wraps Base UI's `ContextMenu`, whose row parts are literally the same
+* components as the dropdown's — so the rows here *are*
+* {@link DropdownMenu}'s rows, re-exported rather than restyled. That is the
+* point: a user should never be able to tell from a row whether they got to it
+* by clicking a button or by right-clicking a thing.
+*
+* A context menu is always a *shortcut*. Every command on it must also be
+* reachable some other way — a toolbar, a dropdown, a keyboard shortcut —
+* because right-click has no keyboard or touch equivalent worth relying on.
+*
+* @example
+* <ContextMenu.Root>
+*   <ContextMenu.Trigger render={<PatchCell />} />
+*   <ContextMenu.Content>
+*     <ContextMenu.Group>
+*       <ContextMenu.Label>Fixture</ContextMenu.Label>
+*       <ContextMenu.Item onClick={repatch}>Repatch</ContextMenu.Item>
+*     </ContextMenu.Group>
+*     <ContextMenu.Separator />
+*     <ContextMenu.CheckboxItem checked={highlight} onCheckedChange={setHighlight}>
+*       Highlight
+*     </ContextMenu.CheckboxItem>
+*   </ContextMenu.Content>
+* </ContextMenu.Root>
+*/
+const ContextMenu$1 = {
+	Root: ContextMenuRoot,
+	Trigger: React.forwardRef(function ContextMenuTrigger({ className, ...elementProps }, ref) {
+		return /* @__PURE__ */ jsx(ContextMenu.Trigger, {
+			ref,
+			"data-slot": "context-menu-trigger",
+			className: cn(className),
+			...elementProps
+		});
+	}),
+	Content: React.forwardRef(function ContextMenuContent({ className, positionerClassName, sideOffset = 0, keepMounted, children, ...popupProps }, ref) {
+		const portalProps = useCuePortalProps();
+		return /* @__PURE__ */ jsx(ContextMenu.Portal, {
+			keepMounted,
+			...portalProps,
+			children: /* @__PURE__ */ jsx(ContextMenu.Positioner, {
+				className: cn(overlayPositionerClasses, positionerClassName),
+				sideOffset,
+				children: /* @__PURE__ */ jsx(ContextMenu.Popup, {
+					ref,
+					"data-slot": "context-menu-popup",
+					className: cn(overlaySurfaceClasses, overlayPopupTransitionClasses, menuPopupClasses, "max-h-(--available-height) overflow-y-auto outline-none", className),
+					...popupProps,
+					children
+				})
+			})
+		});
+	}),
+	Group: DropdownMenu.Group,
+	Label: DropdownMenu.Label,
+	Item: DropdownMenu.Item,
+	CheckboxItem: DropdownMenu.CheckboxItem,
+	Separator: DropdownMenu.Separator
+};
+//#endregion
+export { ContextMenu$1 as ContextMenu };

package/dist/overlays/dialog.d.ts

@@ -0,0 +1,72 @@
+import { ClassProp, VariantProps } from "../lib/cva.js";
+import * as React from "react";
+import { Dialog } from "@base-ui/react/dialog";
+//#region src/overlays/dialog.d.ts
+/**
+ * The centred modal surface, one variant per width rung.
+ *
+ * Centring is `top/left 50%` plus a translate rather than a flex-centred
+ * wrapper: the popup owns its own position, so nothing else has to cover the
+ * viewport and steal pointer events from the scrim.
+ */
+declare const dialogPopupVariants: (props?: ({
+  width?: "sm" | "md" | "lg" | null | undefined;
+} & ClassProp) | undefined) => string;
+interface DialogRootProps extends Dialog.Root.Props {}
+/**
+ * Groups the parts of a dialog and owns its open state. Renders no element.
+ *
+ * @example
+ * <Dialog.Root open={open} onOpenChange={setOpen}>…</Dialog.Root>
+ */
+declare function DialogRoot(props: DialogRootProps): React.JSX.Element;
+interface DialogTriggerProps extends Dialog.Trigger.Props {}
+interface DialogContentProps extends Omit<Dialog.Popup.Props, "className">, VariantProps<typeof dialogPopupVariants> {
+  /** Extra classes for the popup surface. */
+  className?: string;
+  /** Extra classes for the scrim behind it. */
+  backdropClassName?: string;
+  /** Keep the popup mounted while closed, so its content is not re-created. */
+  keepMounted?: boolean;
+  /** Show the corner close affordance. Defaults to `true`. */
+  showCloseButton?: boolean;
+  /** Accessible name for the corner close affordance. Defaults to `"Close"`. */
+  closeLabel?: string;
+}
+interface DialogTitleProps extends Dialog.Title.Props {}
+interface DialogDescriptionProps extends Dialog.Description.Props {}
+interface DialogFooterProps extends React.ComponentPropsWithoutRef<"div"> {}
+interface DialogCloseProps extends Dialog.Close.Props {}
+/**
+ * A modal surface for a focused task: patching a fixture, renaming a cue,
+ * confirming an import.
+ *
+ * Wraps Base UI's `Dialog`, so every part of the behaviour contract — focus
+ * trap, focus restoration on close, Escape, outside press, scroll lock, the
+ * `aria-labelledby`/`aria-describedby` wiring — is the primitive's, and this
+ * layer supplies only the token-driven skin plus the portal theme stamp.
+ *
+ * @example
+ * <Dialog.Root>
+ *   <Dialog.Trigger render={<Button>Patch</Button>} />
+ *   <Dialog.Content>
+ *     <Dialog.Title>Patch fixture</Dialog.Title>
+ *     <Dialog.Description>Choose a universe and a start address.</Dialog.Description>
+ *     <Dialog.Footer>
+ *       <Dialog.Close render={<Button variant="ghost">Cancel</Button>} />
+ *       <Button variant="primary">Patch</Button>
+ *     </Dialog.Footer>
+ *   </Dialog.Content>
+ * </Dialog.Root>
+ */
+declare const Dialog$1: {
+  Root: typeof DialogRoot;
+  Trigger: React.ForwardRefExoticComponent<Omit<DialogTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+  Content: React.ForwardRefExoticComponent<Omit<DialogContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+  Title: React.ForwardRefExoticComponent<Omit<DialogTitleProps, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+  Description: React.ForwardRefExoticComponent<Omit<DialogDescriptionProps, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+  Footer: React.ForwardRefExoticComponent<DialogFooterProps & React.RefAttributes<HTMLDivElement>>;
+  Close: React.ForwardRefExoticComponent<Omit<DialogCloseProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+};
+//#endregion
+export { Dialog$1 as Dialog, DialogCloseProps, DialogContentProps, DialogDescriptionProps, DialogFooterProps, DialogRootProps, DialogTitleProps, DialogTriggerProps };

package/dist/overlays/dialog.js

@@ -0,0 +1,124 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { cva } from "../lib/cva.js";
+import { CrossGlyph } from "./_glyphs.js";
+import { useCuePortalProps } from "../system/portal.js";
+import { overlayDescriptionClasses, overlayFooterClasses, overlayModalTransitionClasses, overlaySurfaceClasses, overlayTitleClasses, scrimClasses } from "./_surface.js";
+import { IconButton } from "../primitives/icon-button.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Dialog } from "@base-ui/react/dialog";
+//#region src/overlays/dialog.tsx
+/**
+* The centred modal surface, one variant per width rung.
+*
+* Centring is `top/left 50%` plus a translate rather than a flex-centred
+* wrapper: the popup owns its own position, so nothing else has to cover the
+* viewport and steal pointer events from the scrim.
+*/
+const dialogPopupVariants = cva(`${overlaySurfaceClasses} ${overlayModalTransitionClasses} fixed top-1/2 left-1/2 z-50 flex max-h-[85vh] w-[calc(100vw-2rem)] -translate-x-1/2 -translate-y-1/2 flex-col gap-(--cue-space-4) overflow-y-auto p-(--cue-space-6) outline-none`, {
+	variants: { width: {
+		sm: "max-w-[20rem]",
+		md: "max-w-[28rem]",
+		lg: "max-w-[36rem]"
+	} },
+	defaultVariants: { width: "md" }
+});
+/**
+* Groups the parts of a dialog and owns its open state. Renders no element.
+*
+* @example
+* <Dialog.Root open={open} onOpenChange={setOpen}>…</Dialog.Root>
+*/
+function DialogRoot(props) {
+	return /* @__PURE__ */ jsx(Dialog.Root, { ...props });
+}
+/**
+* A modal surface for a focused task: patching a fixture, renaming a cue,
+* confirming an import.
+*
+* Wraps Base UI's `Dialog`, so every part of the behaviour contract — focus
+* trap, focus restoration on close, Escape, outside press, scroll lock, the
+* `aria-labelledby`/`aria-describedby` wiring — is the primitive's, and this
+* layer supplies only the token-driven skin plus the portal theme stamp.
+*
+* @example
+* <Dialog.Root>
+*   <Dialog.Trigger render={<Button>Patch</Button>} />
+*   <Dialog.Content>
+*     <Dialog.Title>Patch fixture</Dialog.Title>
+*     <Dialog.Description>Choose a universe and a start address.</Dialog.Description>
+*     <Dialog.Footer>
+*       <Dialog.Close render={<Button variant="ghost">Cancel</Button>} />
+*       <Button variant="primary">Patch</Button>
+*     </Dialog.Footer>
+*   </Dialog.Content>
+* </Dialog.Root>
+*/
+const Dialog$1 = {
+	Root: DialogRoot,
+	Trigger: React.forwardRef(function DialogTrigger({ className, ...elementProps }, ref) {
+		return /* @__PURE__ */ jsx(Dialog.Trigger, {
+			ref,
+			"data-slot": "dialog-trigger",
+			className: cn(className),
+			...elementProps
+		});
+	}),
+	Content: React.forwardRef(function DialogContent({ className, backdropClassName, keepMounted, width, showCloseButton = true, closeLabel = "Close", children, ...popupProps }, ref) {
+		const portalProps = useCuePortalProps();
+		return /* @__PURE__ */ jsxs(Dialog.Portal, {
+			keepMounted,
+			...portalProps,
+			children: [/* @__PURE__ */ jsx(Dialog.Backdrop, {
+				"data-slot": "dialog-backdrop",
+				className: cn(scrimClasses, backdropClassName)
+			}), /* @__PURE__ */ jsxs(Dialog.Popup, {
+				ref,
+				"data-slot": "dialog-popup",
+				className: cn(dialogPopupVariants({ width }), className),
+				...popupProps,
+				children: [children, showCloseButton ? /* @__PURE__ */ jsx(Dialog.Close, { render: /* @__PURE__ */ jsx(IconButton, {
+					"aria-label": closeLabel,
+					icon: CrossGlyph,
+					size: "sm",
+					className: "absolute top-(--cue-space-3) right-(--cue-space-3)"
+				}) }) : null]
+			})]
+		});
+	}),
+	Title: React.forwardRef(function DialogTitle({ className, ...elementProps }, ref) {
+		return /* @__PURE__ */ jsx(Dialog.Title, {
+			ref,
+			"data-slot": "dialog-title",
+			className: cn(overlayTitleClasses, className),
+			...elementProps
+		});
+	}),
+	Description: React.forwardRef(function DialogDescription({ className, ...elementProps }, ref) {
+		return /* @__PURE__ */ jsx(Dialog.Description, {
+			ref,
+			"data-slot": "dialog-description",
+			className: cn(overlayDescriptionClasses, className),
+			...elementProps
+		});
+	}),
+	Footer: React.forwardRef(function DialogFooter({ className, ...elementProps }, ref) {
+		return /* @__PURE__ */ jsx("div", {
+			ref,
+			"data-slot": "dialog-footer",
+			className: cn(overlayFooterClasses, className),
+			...elementProps
+		});
+	}),
+	Close: React.forwardRef(function DialogClose({ className, ...elementProps }, ref) {
+		return /* @__PURE__ */ jsx(Dialog.Close, {
+			ref,
+			"data-slot": "dialog-close",
+			className: cn(className),
+			...elementProps
+		});
+	})
+};
+//#endregion
+export { Dialog$1 as Dialog };

package/dist/overlays/drawer.d.ts

@@ -0,0 +1,75 @@
+import * as React from "react";
+import { Drawer } from "@base-ui/react/drawer";
+//#region src/overlays/drawer.d.ts
+/** Which edge the drawer lives on, named by the gesture that dismisses it. */
+type DrawerSwipeDirection = "down" | "up" | "left" | "right";
+interface DrawerRootProps extends Omit<Drawer.Root.Props, "swipeDirection"> {
+  /**
+   * Which way the drawer is dragged to dismiss it, which also decides the edge
+   * it lives on. Defaults to `"down"` — the bottom sheet.
+   */
+  swipeDirection?: DrawerSwipeDirection;
+}
+/**
+ * Groups the parts of a drawer and owns its open state. Renders no element.
+ *
+ * @example
+ * <Drawer.Root swipeDirection="right" open={open} onOpenChange={setOpen}>…</Drawer.Root>
+ */
+declare function DrawerRoot({ swipeDirection, ...rootProps }: DrawerRootProps): React.JSX.Element;
+interface DrawerTriggerProps extends Drawer.Trigger.Props {}
+interface DrawerContentProps extends Omit<Drawer.Popup.Props, "className"> {
+  /** Extra classes for the popup surface. */
+  className?: string;
+  /** Extra classes for the scrim behind it. */
+  backdropClassName?: string;
+  /** Extra classes for the full-viewport box that parks the popup on its edge. */
+  viewportClassName?: string;
+  /** Keep the popup mounted while closed, so its content is not re-created. */
+  keepMounted?: boolean;
+  /**
+   * Draw the grab bar that advertises the swipe. Defaults to `true`.
+   *
+   * Purely decorative — the whole popup is draggable — so it is `aria-hidden`
+   * and there is no keyboard equivalent to lose by turning it off.
+   */
+  grabHandle?: boolean;
+}
+interface DrawerTitleProps extends Drawer.Title.Props {}
+interface DrawerDescriptionProps extends Drawer.Description.Props {}
+interface DrawerFooterProps extends React.ComponentPropsWithoutRef<"div"> {}
+interface DrawerCloseProps extends Drawer.Close.Props {}
+/**
+ * A swipe-dismissable edge panel — the touch-first cousin of {@link Sheet}.
+ *
+ * Wraps Base UI's `Drawer`, so the drag tracking, the velocity-aware dismissal,
+ * the nested-drawer stacking and the focus trap are the primitive's. What this
+ * layer adds is the shared overlay surface, the portal theme stamp, and one
+ * decision the caller should not have to make twice: `swipeDirection` picks the
+ * edge *and* the gesture together, so a drawer can never be dragged in a
+ * direction that would push it further onto the screen.
+ *
+ * Prefer `Sheet` on a pointer-first console — a swipe is not discoverable with a
+ * mouse — and reach for this on touch, or wherever the panel is glanceable
+ * enough that dismissing it should cost one gesture.
+ *
+ * @example
+ * <Drawer.Root swipeDirection="down">
+ *   <Drawer.Trigger render={<Button>Cue stack</Button>} />
+ *   <Drawer.Content>
+ *     <Drawer.Title>Cue stack</Drawer.Title>
+ *     <Drawer.Footer><Drawer.Close render={<Button>Done</Button>} /></Drawer.Footer>
+ *   </Drawer.Content>
+ * </Drawer.Root>
+ */
+declare const Drawer$1: {
+  Root: typeof DrawerRoot;
+  Trigger: React.ForwardRefExoticComponent<Omit<DrawerTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+  Content: React.ForwardRefExoticComponent<Omit<DrawerContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+  Title: React.ForwardRefExoticComponent<Omit<DrawerTitleProps, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+  Description: React.ForwardRefExoticComponent<Omit<DrawerDescriptionProps, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+  Footer: React.ForwardRefExoticComponent<DrawerFooterProps & React.RefAttributes<HTMLDivElement>>;
+  Close: React.ForwardRefExoticComponent<Omit<DrawerCloseProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+};
+//#endregion
+export { Drawer$1 as Drawer, DrawerCloseProps, DrawerContentProps, DrawerDescriptionProps, DrawerFooterProps, DrawerRootProps, DrawerSwipeDirection, DrawerTitleProps, DrawerTriggerProps };

package/dist/overlays/drawer.js

@@ -0,0 +1,151 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { useCuePortalProps } from "../system/portal.js";
+import { overlayDescriptionClasses, overlayFooterClasses, overlaySurfaceClasses, overlayTitleClasses, scrimClasses } from "./_surface.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Drawer } from "@base-ui/react/drawer";
+//#region src/overlays/drawer.tsx
+/**
+* How the viewport parks the popup, per swipe direction.
+*
+* The viewport is a full-screen flex box and the popup is its only child, so
+* "which edge" is entirely an alignment decision — nothing is positioned
+* absolutely and nothing has to know the popup's size.
+*/
+const VIEWPORT_ALIGNMENT = {
+	down: "items-end justify-center",
+	up: "items-start justify-center",
+	left: "items-stretch justify-start",
+	right: "items-stretch justify-end"
+};
+/**
+* Resting geometry and the closed-state translate, per swipe direction.
+*
+* `--drawer-swipe-movement-x/y` is published by Base UI while a finger is down;
+* folding it into the same `translate` the transition animates is what makes the
+* sheet track the finger and then settle, rather than snapping when the gesture
+* ends.
+*/
+const POPUP_GEOMETRY = {
+	down: "max-h-[85vh] w-full max-w-[42rem] translate-y-(--drawer-swipe-movement-y) rounded-b-none border-x-0 border-b-0 data-[starting-style]:translate-y-full data-[ending-style]:translate-y-full",
+	up: "max-h-[85vh] w-full max-w-[42rem] translate-y-(--drawer-swipe-movement-y) rounded-t-none border-x-0 border-t-0 data-[starting-style]:-translate-y-full data-[ending-style]:-translate-y-full",
+	left: "h-full w-[min(28rem,calc(100vw-2rem))] translate-x-(--drawer-swipe-movement-x) rounded-l-none border-y-0 border-l-0 data-[starting-style]:-translate-x-full data-[ending-style]:-translate-x-full",
+	right: "h-full w-[min(28rem,calc(100vw-2rem))] translate-x-(--drawer-swipe-movement-x) rounded-r-none border-y-0 border-r-0 data-[starting-style]:translate-x-full data-[ending-style]:translate-x-full"
+};
+/** Publishes the root's swipe direction to {@link DrawerContent}, which paints it. */
+const DrawerDirectionContext = React.createContext("down");
+/**
+* Groups the parts of a drawer and owns its open state. Renders no element.
+*
+* @example
+* <Drawer.Root swipeDirection="right" open={open} onOpenChange={setOpen}>…</Drawer.Root>
+*/
+function DrawerRoot({ swipeDirection = "down", ...rootProps }) {
+	return /* @__PURE__ */ jsx(DrawerDirectionContext.Provider, {
+		value: swipeDirection,
+		children: /* @__PURE__ */ jsx(Drawer.Root, {
+			swipeDirection,
+			...rootProps
+		})
+	});
+}
+/**
+* A swipe-dismissable edge panel — the touch-first cousin of {@link Sheet}.
+*
+* Wraps Base UI's `Drawer`, so the drag tracking, the velocity-aware dismissal,
+* the nested-drawer stacking and the focus trap are the primitive's. What this
+* layer adds is the shared overlay surface, the portal theme stamp, and one
+* decision the caller should not have to make twice: `swipeDirection` picks the
+* edge *and* the gesture together, so a drawer can never be dragged in a
+* direction that would push it further onto the screen.
+*
+* Prefer `Sheet` on a pointer-first console — a swipe is not discoverable with a
+* mouse — and reach for this on touch, or wherever the panel is glanceable
+* enough that dismissing it should cost one gesture.
+*
+* @example
+* <Drawer.Root swipeDirection="down">
+*   <Drawer.Trigger render={<Button>Cue stack</Button>} />
+*   <Drawer.Content>
+*     <Drawer.Title>Cue stack</Drawer.Title>
+*     <Drawer.Footer><Drawer.Close render={<Button>Done</Button>} /></Drawer.Footer>
+*   </Drawer.Content>
+* </Drawer.Root>
+*/
+const Drawer$1 = {
+	Root: DrawerRoot,
+	Trigger: React.forwardRef(function DrawerTrigger({ className, ...elementProps }, ref) {
+		return /* @__PURE__ */ jsx(Drawer.Trigger, {
+			ref,
+			"data-slot": "drawer-trigger",
+			className: cn(className),
+			...elementProps
+		});
+	}),
+	Content: React.forwardRef(function DrawerContent({ className, backdropClassName, viewportClassName, keepMounted, grabHandle = true, children, ...popupProps }, ref) {
+		const portalProps = useCuePortalProps();
+		const direction = React.useContext(DrawerDirectionContext);
+		const vertical = direction === "down" || direction === "up";
+		return /* @__PURE__ */ jsxs(Drawer.Portal, {
+			keepMounted,
+			...portalProps,
+			children: [/* @__PURE__ */ jsx(Drawer.Backdrop, {
+				"data-slot": "drawer-backdrop",
+				className: cn(scrimClasses, backdropClassName)
+			}), /* @__PURE__ */ jsx(Drawer.Viewport, {
+				"data-slot": "drawer-viewport",
+				className: cn("fixed inset-0 z-50 flex", VIEWPORT_ALIGNMENT[direction], viewportClassName),
+				children: /* @__PURE__ */ jsxs(Drawer.Popup, {
+					ref,
+					"data-slot": "drawer-popup",
+					className: cn(overlaySurfaceClasses, "flex flex-col overflow-y-auto overscroll-contain outline-none transition-transform duration-200 ease-out data-[swiping]:duration-0 motion-reduce:transition-none", POPUP_GEOMETRY[direction], className),
+					...popupProps,
+					children: [grabHandle ? /* @__PURE__ */ jsx("div", {
+						"data-slot": "drawer-grab-handle",
+						"aria-hidden": "true",
+						className: cn("shrink-0 rounded-full bg-border-strong", vertical ? "mx-auto my-(--cue-space-2) h-1 w-9" : "my-auto mx-(--cue-space-2) h-9 w-1")
+					}) : null, /* @__PURE__ */ jsx(Drawer.Content, {
+						"data-slot": "drawer-content",
+						className: "flex min-h-0 flex-1 flex-col gap-(--cue-space-4) p-(--cue-space-6)",
+						children
+					})]
+				})
+			})]
+		});
+	}),
+	Title: React.forwardRef(function DrawerTitle({ className, ...elementProps }, ref) {
+		return /* @__PURE__ */ jsx(Drawer.Title, {
+			ref,
+			"data-slot": "drawer-title",
+			className: cn(overlayTitleClasses, className),
+			...elementProps
+		});
+	}),
+	Description: React.forwardRef(function DrawerDescription({ className, ...elementProps }, ref) {
+		return /* @__PURE__ */ jsx(Drawer.Description, {
+			ref,
+			"data-slot": "drawer-description",
+			className: cn(overlayDescriptionClasses, className),
+			...elementProps
+		});
+	}),
+	Footer: React.forwardRef(function DrawerFooter({ className, ...elementProps }, ref) {
+		return /* @__PURE__ */ jsx("div", {
+			ref,
+			"data-slot": "drawer-footer",
+			className: cn(overlayFooterClasses, "mt-auto", className),
+			...elementProps
+		});
+	}),
+	Close: React.forwardRef(function DrawerClose({ className, ...elementProps }, ref) {
+		return /* @__PURE__ */ jsx(Drawer.Close, {
+			ref,
+			"data-slot": "drawer-close",
+			className: cn(className),
+			...elementProps
+		});
+	})
+};
+//#endregion
+export { Drawer$1 as Drawer };

package/dist/overlays/dropdown-menu.d.ts

@@ -0,0 +1,79 @@
+import * as React from "react";
+import { Menu } from "@base-ui/react/menu";
+//#region src/overlays/dropdown-menu.d.ts
+interface DropdownMenuRootProps extends Menu.Root.Props {
+  /**
+   * Close the menu when the viewport moves under it — a wheel anywhere outside
+   * the popup, or a window resize. Defaults to `true`.
+   *
+   * The menu is positioned from its trigger's rect, and a canvas that pans by
+   * mutating a CSS transform fires no `scroll` event, so without this a menu
+   * over the patch grid detaches from its button the moment the user scrolls.
+   * A wheel *inside* the popup is left alone — that is a long menu scrolling.
+   */
+  closeOnWheel?: boolean;
+}
+/** Groups the parts of a menu and owns its open state. Renders no element. */
+declare function DropdownMenuRoot({ closeOnWheel, actionsRef, ...rootProps }: DropdownMenuRootProps): React.JSX.Element;
+interface DropdownMenuTriggerProps extends Menu.Trigger.Props {}
+interface DropdownMenuContentProps extends Omit<Menu.Popup.Props, "className"> {
+  /** Extra classes for the popup surface. */
+  className?: string;
+  /** Extra classes for the positioner that places the popup. */
+  positionerClassName?: string;
+  /** Preferred side of the trigger. Defaults to `"bottom"`. */
+  side?: Menu.Positioner.Props["side"];
+  /** Alignment along that side. Defaults to `"start"`. */
+  align?: Menu.Positioner.Props["align"];
+  /** Gap in px between trigger and popup. Defaults to `4`. */
+  sideOffset?: Menu.Positioner.Props["sideOffset"];
+  /** Nudge along the alignment axis, in px. */
+  alignOffset?: Menu.Positioner.Props["alignOffset"];
+  /** Keep the popup mounted while closed. */
+  keepMounted?: boolean;
+}
+interface DropdownMenuGroupProps extends Menu.Group.Props {}
+interface DropdownMenuLabelProps extends Menu.GroupLabel.Props {}
+interface DropdownMenuItemProps extends Menu.Item.Props {
+  /** Optional leading icon component, sized to the density icon token. */
+  icon?: React.ElementType;
+  /** Trailing slot — a `Kbd` shortcut hint, a count, a chevron. */
+  trailing?: React.ReactNode;
+}
+interface DropdownMenuCheckboxItemProps extends Menu.CheckboxItem.Props {}
+interface DropdownMenuSeparatorProps extends Menu.Separator.Props {}
+/**
+ * A command list hung off a button: row actions, view options, an account menu.
+ *
+ * Wraps Base UI's `Menu`, so roving focus, typeahead, submenu handling, Escape
+ * and outside-press dismissal are the primitive's. This layer adds the token
+ * skin, the portal theme stamp and the canvas-safe wheel dismissal
+ * (see {@link DropdownMenuRootProps.closeOnWheel}).
+ *
+ * @example
+ * <DropdownMenu.Root>
+ *   <DropdownMenu.Trigger render={<IconButton aria-label="Cue actions" icon={MoreVertical} />} />
+ *   <DropdownMenu.Content align="end">
+ *     <DropdownMenu.Group>
+ *       <DropdownMenu.Label>Playback</DropdownMenu.Label>
+ *       <DropdownMenu.Item onClick={go}>Go</DropdownMenu.Item>
+ *     </DropdownMenu.Group>
+ *     <DropdownMenu.Separator />
+ *     <DropdownMenu.CheckboxItem checked={follow} onCheckedChange={setFollow}>
+ *       Follow
+ *     </DropdownMenu.CheckboxItem>
+ *   </DropdownMenu.Content>
+ * </DropdownMenu.Root>
+ */
+declare const DropdownMenu: {
+  Root: typeof DropdownMenuRoot;
+  Trigger: React.ForwardRefExoticComponent<Omit<DropdownMenuTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+  Content: React.ForwardRefExoticComponent<Omit<DropdownMenuContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+  Group: React.ForwardRefExoticComponent<Omit<DropdownMenuGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+  Label: React.ForwardRefExoticComponent<Omit<DropdownMenuLabelProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+  Item: React.ForwardRefExoticComponent<Omit<DropdownMenuItemProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+  CheckboxItem: React.ForwardRefExoticComponent<Omit<DropdownMenuCheckboxItemProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+  Separator: React.ForwardRefExoticComponent<Omit<DropdownMenuSeparatorProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+};
+//#endregion
+export { DropdownMenu, DropdownMenuCheckboxItemProps, DropdownMenuContentProps, DropdownMenuGroupProps, DropdownMenuItemProps, DropdownMenuLabelProps, DropdownMenuRootProps, DropdownMenuSeparatorProps, DropdownMenuTriggerProps };