@ctrl-ui/react 0.8.0

package/dist/ui/dockable-panel.js

@@ -0,0 +1,366 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { Button } from "./button.js";
+import { useIsMobile } from "../hooks/use-mobile.js";
+import { clampDockablePanelPosition, dockablePanelSideAt, oppositeDockablePanelSide } from "./dockable-panel-geometry.js";
+import { Drawer, DrawerContent } from "./drawer.js";
+import { createContext, use, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/ui/dockable-panel.tsx
+const DockablePanelContext = createContext(null);
+function useDockablePanelContext() {
+	const context = use(DockablePanelContext);
+	if (!context) throw new Error("DockablePanel parts must be used inside DockablePanel.");
+	return context;
+}
+function useControllableState(controlled, defaultValue, onChange) {
+	const [uncontrolled, setUncontrolled] = useState(defaultValue);
+	const value = controlled ?? uncontrolled;
+	function setValue(next) {
+		if (controlled === void 0) setUncontrolled(next);
+		onChange?.(next);
+	}
+	return [value, setValue];
+}
+function DockablePanel({ open: openProp, defaultOpen = true, onOpenChange, placement: placementProp, defaultPlacement = "right", onPlacementChange, className, style, children, "aria-label": ariaLabel = "Dockable panel", ...props }) {
+	const [open, setOpen] = useControllableState(openProp, defaultOpen, onOpenChange);
+	const [placement, setPlacementState] = useControllableState(placementProp, defaultPlacement, onPlacementChange);
+	const [dragging, setDragging] = useState(false);
+	const [potentialDock, setPotentialDock] = useState(placement);
+	const [dragPosition, setDragPosition] = useState(null);
+	const [dragHeight, setDragHeight] = useState(0);
+	const isMobile = useIsMobile();
+	const panelRef = useRef(null);
+	const potentialDockRef = useRef(placement);
+	const dragRef = useRef(null);
+	function setPlacement(next) {
+		setPlacementState(next);
+	}
+	function togglePlacement() {
+		setPlacement(oppositeDockablePanelSide(placement));
+	}
+	function close() {
+		setOpen(false);
+	}
+	function finishDrag(event, shouldDock) {
+		if (dragRef.current?.pointerId !== event.pointerId) return;
+		if (event.currentTarget.hasPointerCapture(event.pointerId)) event.currentTarget.releasePointerCapture(event.pointerId);
+		if (shouldDock) setPlacement(potentialDockRef.current);
+		dragRef.current = null;
+		setDragPosition(null);
+		setDragHeight(0);
+		setDragging(false);
+	}
+	function onPointerDown(event) {
+		if (event.button !== 0 || isMobile) return;
+		const panel = panelRef.current;
+		const container = panel?.offsetParent;
+		if (!(container instanceof HTMLElement) || !panel) return;
+		event.preventDefault();
+		event.currentTarget.setPointerCapture(event.pointerId);
+		const panelRect = panel.getBoundingClientRect();
+		const containerRect = container.getBoundingClientRect();
+		dragRef.current = {
+			pointerId: event.pointerId,
+			offsetX: event.clientX - panelRect.left,
+			offsetY: event.clientY - panelRect.top
+		};
+		potentialDockRef.current = placement;
+		setPotentialDock(placement);
+		setDragPosition({
+			x: panelRect.left - containerRect.left,
+			y: panelRect.top - containerRect.top
+		});
+		setDragHeight(panelRect.height);
+		setDragging(true);
+	}
+	function onPointerMove(event) {
+		const drag = dragRef.current;
+		const panel = panelRef.current;
+		const container = panel?.offsetParent;
+		if (!drag || drag.pointerId !== event.pointerId || !(container instanceof HTMLElement) || !panel) return;
+		const bounds = container.getBoundingClientRect();
+		const nextDock = dockablePanelSideAt(event.clientX - bounds.left, bounds.width);
+		potentialDockRef.current = nextDock;
+		setPotentialDock(nextDock);
+		setDragPosition(clampDockablePanelPosition({
+			x: event.clientX - bounds.left - drag.offsetX,
+			y: event.clientY - bounds.top - drag.offsetY
+		}, {
+			width: bounds.width,
+			height: bounds.height
+		}, {
+			width: panel.offsetWidth,
+			height: panel.offsetHeight
+		}));
+	}
+	function onPointerUp(event) {
+		finishDrag(event, true);
+	}
+	function onPointerCancel(event) {
+		finishDrag(event, false);
+	}
+	const context = {
+		close,
+		dragging,
+		isMobile,
+		placement,
+		setPlacement,
+		togglePlacement,
+		dragHandleProps: {
+			onPointerDown,
+			onPointerMove,
+			onPointerUp,
+			onPointerCancel
+		}
+	};
+	const dropZoneStyle = dragging ? {
+		height: dragHeight,
+		"--cui-dockable-panel-drop-zone-active-background": style?.["--cui-dockable-panel-drop-zone-active-background"],
+		"--cui-dockable-panel-drop-zone-active-border-color": style?.["--cui-dockable-panel-drop-zone-active-border-color"]
+	} : void 0;
+	if (isMobile) return /* @__PURE__ */ jsx(DockablePanelContext.Provider, {
+		value: context,
+		children: /* @__PURE__ */ jsx(Drawer, {
+			open,
+			onOpenChange: setOpen,
+			side: "bottom",
+			children: /* @__PURE__ */ jsx(DrawerContent, {
+				"data-dockable-panel-root": "",
+				"data-placement": placement,
+				padding: "none",
+				variant: "floating",
+				surface: "card",
+				"aria-label": ariaLabel,
+				className: cn("max-h-[min(82vh,42rem)] gap-0 overflow-hidden", className),
+				style,
+				...props,
+				children
+			})
+		})
+	});
+	if (!open) return null;
+	return /* @__PURE__ */ jsxs(DockablePanelContext.Provider, {
+		value: context,
+		children: [dragging ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(DockablePanelDropZone, {
+			side: "left",
+			active: potentialDock === "left",
+			style: dropZoneStyle
+		}), /* @__PURE__ */ jsx(DockablePanelDropZone, {
+			side: "right",
+			active: potentialDock === "right",
+			style: dropZoneStyle
+		})] }) : null, /* @__PURE__ */ jsxs("aside", {
+			ref: panelRef,
+			"data-control-ui": "dockable-panel",
+			"data-control-family": "dockable-panel",
+			"data-slot": "root",
+			"data-surface": "panel",
+			"data-placement": placement,
+			"data-dragging": dragging ? "true" : void 0,
+			"aria-label": ariaLabel,
+			className: cn("absolute z-30 flex w-[min(22rem,calc(50%_-_1.125rem))] flex-col overflow-hidden", !dragging && placement === "left" && "top-3 left-3 max-h-[calc(100%_-_1.5rem)]", !dragging && placement === "right" && "top-3 right-3 max-h-[calc(100%_-_1.5rem)]", dragging && "top-0 left-0 max-h-[calc(100%_-_1.5rem)]", dragging && "select-none", className),
+			style: dragging && dragPosition ? {
+				...style,
+				transform: `translate3d(${dragPosition.x}px, ${dragPosition.y}px, 0)`
+			} : style,
+			...props,
+			children: [children, /* @__PURE__ */ jsxs("span", {
+				className: "sr-only",
+				"aria-live": "polite",
+				children: [
+					"Panel docked ",
+					placement,
+					"."
+				]
+			})]
+		})]
+	});
+}
+function DockablePanelHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "dockable-panel",
+		"data-control-family": "dockable-panel",
+		"data-slot": "header",
+		className: cn("flex shrink-0 items-center", className),
+		...props
+	});
+}
+function DockablePanelDragHandle({ className, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, children, ...props }) {
+	const context = useDockablePanelContext();
+	if (context.isMobile) return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "dockable-panel",
+		"data-control-family": "dockable-panel",
+		"data-slot": "drag-handle",
+		className: cn("flex min-w-0 flex-1 items-center self-stretch", className),
+		children
+	});
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"data-control-ui": "dockable-panel",
+		"data-control-family": "dockable-panel",
+		"data-slot": "drag-handle",
+		"aria-label": "Drag panel",
+		"aria-pressed": context.dragging,
+		className: cn("flex min-w-0 flex-1 cursor-grab touch-none items-center self-stretch active:cursor-grabbing", className),
+		onPointerDown: (event) => {
+			onPointerDown?.(event);
+			if (!event.defaultPrevented) context.dragHandleProps.onPointerDown(event);
+		},
+		onPointerMove: (event) => {
+			onPointerMove?.(event);
+			if (!event.defaultPrevented) context.dragHandleProps.onPointerMove(event);
+		},
+		onPointerUp: (event) => {
+			onPointerUp?.(event);
+			if (!event.defaultPrevented) context.dragHandleProps.onPointerUp(event);
+		},
+		onPointerCancel: (event) => {
+			onPointerCancel?.(event);
+			if (!event.defaultPrevented) context.dragHandleProps.onPointerCancel(event);
+		},
+		...props,
+		children
+	});
+}
+function DockablePanelTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx("h2", {
+		"data-control-ui": "dockable-panel",
+		"data-control-family": "dockable-panel",
+		"data-slot": "title",
+		className: cn("truncate", className),
+		...props
+	});
+}
+function DockablePanelActions({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "dockable-panel",
+		"data-control-family": "dockable-panel",
+		"data-slot": "actions",
+		className: cn("ml-auto flex shrink-0 items-center", className),
+		...props
+	});
+}
+function DockablePanelToggle({ className, children, "aria-label": ariaLabel, onClick, ...props }) {
+	const { isMobile, placement, togglePlacement } = useDockablePanelContext();
+	if (isMobile) return null;
+	const target = oppositeDockablePanelSide(placement);
+	const label = `Move panel to ${target}`;
+	return /* @__PURE__ */ jsx(Button, {
+		type: "button",
+		variant: "ghost",
+		size: "sm",
+		iconOnly: true,
+		"aria-label": ariaLabel ?? label,
+		title: label,
+		className,
+		onClick: (event) => {
+			onClick?.(event);
+			if (!event.defaultPrevented) togglePlacement();
+		},
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(DockPanelIcon, { side: target })
+	});
+}
+function DockablePanelDock({ placement: nextPlacement, className, children, "aria-label": ariaLabel, onClick, ...props }) {
+	const { isMobile, placement, setPlacement } = useDockablePanelContext();
+	if (isMobile) return null;
+	const label = `Dock panel ${nextPlacement}`;
+	return /* @__PURE__ */ jsx(Button, {
+		type: "button",
+		variant: "ghost",
+		size: "sm",
+		iconOnly: true,
+		active: placement === nextPlacement,
+		"aria-pressed": placement === nextPlacement,
+		"aria-label": ariaLabel ?? label,
+		title: label,
+		className,
+		onClick: (event) => {
+			onClick?.(event);
+			if (!event.defaultPrevented) setPlacement(nextPlacement);
+		},
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(PlacementIcon, { placement: nextPlacement })
+	});
+}
+function DockablePanelClose({ className, children, "aria-label": ariaLabel = "Close panel", onClick, ...props }) {
+	const { close } = useDockablePanelContext();
+	return /* @__PURE__ */ jsx(Button, {
+		type: "button",
+		variant: "ghost",
+		size: "sm",
+		iconOnly: true,
+		"aria-label": ariaLabel,
+		title: ariaLabel,
+		className,
+		onClick: (event) => {
+			onClick?.(event);
+			if (!event.defaultPrevented) close();
+		},
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(CloseIcon, {})
+	});
+}
+function DockablePanelContent({ padding = "default", className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "dockable-panel",
+		"data-control-family": "dockable-panel",
+		"data-slot": "content",
+		"data-padding": padding,
+		className: cn("min-h-0 flex-1 overflow-y-auto", className),
+		...props
+	});
+}
+function DockablePanelDropZone({ side, active, style }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "dockable-panel",
+		"data-control-family": "dockable-panel",
+		"data-slot": "drop-zone",
+		"data-surface": "panel",
+		"data-side": side,
+		"data-active": active ? "true" : void 0,
+		className: cn("pointer-events-none absolute top-3 z-20 w-[min(22rem,calc(50%_-_1.125rem))]", side === "left" ? "left-3" : "right-3"),
+		style
+	});
+}
+function PlacementIcon({ placement }) {
+	return /* @__PURE__ */ jsx(DockPanelIcon, { side: placement });
+}
+function DockPanelIcon({ side = "right" }) {
+	return /* @__PURE__ */ jsxs("svg", {
+		viewBox: "0 0 16 16",
+		className: "size-4",
+		fill: "none",
+		"aria-hidden": "true",
+		children: [/* @__PURE__ */ jsx("rect", {
+			x: "2.25",
+			y: "2.25",
+			width: "11.5",
+			height: "11.5",
+			rx: "2",
+			stroke: "currentColor",
+			strokeWidth: "1.25"
+		}), /* @__PURE__ */ jsx("path", {
+			d: side === "left" ? "M6 2.75v10.5" : "M10 2.75v10.5",
+			stroke: "currentColor",
+			strokeWidth: "1.25"
+		})]
+	});
+}
+function CloseIcon() {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 16 16",
+		className: "size-4",
+		fill: "none",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("path", {
+			d: "m4.5 4.5 7 7m0-7-7 7",
+			stroke: "currentColor",
+			strokeWidth: "1.4",
+			strokeLinecap: "round"
+		})
+	});
+}
+//#endregion
+export { DockablePanel, DockablePanelActions, DockablePanelClose, DockablePanelContent, DockablePanelDock, DockablePanelDragHandle, DockablePanelHeader, DockablePanelTitle, DockablePanelToggle };

package/dist/ui/drawer.d.ts

@@ -0,0 +1,42 @@
+import { PopupKnobStyle } from "../knob-contracts/popup-knobs.js";
+import { CSSProperties, ComponentProps } from "react";
+import { Drawer as Drawer$1 } from "@base-ui/react/drawer";
+//#region src/ui/drawer.d.ts
+declare const drawerSides: readonly ["bottom", "top", "right", "left"];
+type DrawerSide = (typeof drawerSides)[number];
+declare const drawerContentPaddings: readonly ["default", "none"];
+type DrawerContentPadding = (typeof drawerContentPaddings)[number];
+declare const drawerContentSurfaces: readonly ["background", "card"];
+type DrawerContentSurface = (typeof drawerContentSurfaces)[number];
+declare const drawerContentVariants: readonly ["edge", "floating"];
+type DrawerContentVariant = (typeof drawerContentVariants)[number];
+declare function Drawer(props: ComponentProps<typeof Drawer$1.Root> & {
+  side?: DrawerSide;
+}): import("react").JSX.Element;
+declare function DrawerTrigger({ className, ...props }: ComponentProps<typeof Drawer$1.Trigger> & {
+  style?: CSSProperties & PopupKnobStyle;
+}): import("react").JSX.Element;
+declare function DrawerClose({ className, ...props }: ComponentProps<typeof Drawer$1.Close> & {
+  style?: CSSProperties & PopupKnobStyle;
+}): import("react").JSX.Element;
+declare function DrawerContent({ className, children, side, padding, surface, variant, style, ...props }: Omit<ComponentProps<typeof Drawer$1.Popup>, "style"> & {
+  side?: DrawerSide;
+  padding?: DrawerContentPadding;
+  surface?: DrawerContentSurface;
+  variant?: DrawerContentVariant;
+  style?: CSSProperties & PopupKnobStyle;
+}): import("react").JSX.Element;
+declare function DrawerHeader({ className, ...props }: ComponentProps<"div"> & {
+  style?: CSSProperties & PopupKnobStyle;
+}): import("react").JSX.Element;
+declare function DrawerFooter({ className, ...props }: ComponentProps<"div"> & {
+  style?: CSSProperties & PopupKnobStyle;
+}): import("react").JSX.Element;
+declare function DrawerTitle({ className, ...props }: Omit<ComponentProps<typeof Drawer$1.Title>, "style"> & {
+  style?: CSSProperties & PopupKnobStyle;
+}): import("react").JSX.Element;
+declare function DrawerDescription({ className, ...props }: Omit<ComponentProps<typeof Drawer$1.Description>, "style"> & {
+  style?: CSSProperties & PopupKnobStyle;
+}): import("react").JSX.Element;
+//#endregion
+export { Drawer, DrawerClose, DrawerContent, DrawerContentPadding, DrawerContentSurface, DrawerContentVariant, DrawerDescription, DrawerFooter, DrawerHeader, DrawerSide, DrawerTitle, DrawerTrigger, drawerContentPaddings, drawerContentSurfaces, drawerContentVariants, drawerSides };

package/dist/ui/drawer.js

@@ -0,0 +1,182 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { skinEffects, skinId } from "../skin.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Drawer as Drawer$1 } from "@base-ui/react/drawer";
+//#region src/ui/drawer.tsx
+const drawerSides = [
+	"bottom",
+	"top",
+	"right",
+	"left"
+];
+const drawerContentPaddings = ["default", "none"];
+const drawerContentSurfaces = ["background", "card"];
+const drawerContentVariants = ["edge", "floating"];
+const swipeFor = {
+	bottom: "down",
+	top: "up",
+	right: "right",
+	left: "left"
+};
+const placement = {
+	edge: {
+		bottom: {
+			viewport: "items-end justify-center",
+			popup: "w-full max-h-[85vh]"
+		},
+		top: {
+			viewport: "items-start justify-center",
+			popup: "w-full max-h-[85vh]"
+		},
+		right: {
+			viewport: "items-stretch justify-end",
+			popup: "h-full w-3/4 max-w-sm"
+		},
+		left: {
+			viewport: "items-stretch justify-start",
+			popup: "h-full w-3/4 max-w-sm"
+		}
+	},
+	floating: {
+		bottom: {
+			viewport: "items-end justify-center pb-[var(--_drawer-float-gap)] [--_drawer-float-gap:max(--spacing(2),env(safe-area-inset-bottom))]",
+			popup: "w-full max-h-[85vh]"
+		},
+		top: {
+			viewport: "items-start justify-center pt-[var(--_drawer-float-gap)] [--_drawer-float-gap:max(--spacing(2),env(safe-area-inset-top))]",
+			popup: "w-full max-h-[85vh]"
+		},
+		right: {
+			viewport: "items-stretch justify-end pr-[var(--_drawer-float-gap)] [--_drawer-float-gap:max(--spacing(2),env(safe-area-inset-right))]",
+			popup: "w-3/4 max-w-sm"
+		},
+		left: {
+			viewport: "items-stretch justify-start pl-[var(--_drawer-float-gap)] [--_drawer-float-gap:max(--spacing(2),env(safe-area-inset-left))]",
+			popup: "w-3/4 max-w-sm"
+		}
+	}
+};
+function Drawer(props) {
+	const { side = "bottom", swipeDirection, ...rest } = props;
+	return /* @__PURE__ */ jsx(Drawer$1.Root, {
+		swipeDirection: swipeDirection ?? swipeFor[side],
+		...rest
+	});
+}
+function DrawerTrigger({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Drawer$1.Trigger, {
+		"data-control-ui": "drawer",
+		"data-popup-kind": "drawer",
+		"data-slot": "trigger",
+		className,
+		...props
+	});
+}
+function DrawerClose({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Drawer$1.Close, {
+		"data-control-ui": "drawer",
+		"data-control-family": "popup",
+		"data-popup-kind": "drawer",
+		"data-slot": "close",
+		className,
+		...props
+	});
+}
+function DrawerContent({ className, children, side = "bottom", padding = "default", surface = "background", variant = "edge", style, ...props }) {
+	const place = placement[variant][side];
+	const grabbable = side === "bottom" || side === "top";
+	const backdropStyle = style ? { "--cui-popup-backdrop-background": style["--cui-popup-backdrop-background"] } : void 0;
+	return /* @__PURE__ */ jsxs(Drawer$1.Portal, { children: [/* @__PURE__ */ jsx(Drawer$1.Backdrop, {
+		"data-control-ui": "drawer",
+		"data-control-family": "popup",
+		"data-popup-kind": "drawer",
+		"data-popup-part": "backdrop",
+		"data-slot": "backdrop",
+		"data-skin": skinId(),
+		"data-effects": skinEffects(),
+		className: "fixed inset-0 z-[70]",
+		style: backdropStyle
+	}), /* @__PURE__ */ jsx(Drawer$1.Viewport, {
+		"data-control-ui": "drawer",
+		"data-control-family": "popup",
+		"data-popup-kind": "drawer",
+		"data-slot": "viewport",
+		"data-side": side,
+		"data-variant": variant,
+		"data-skin": skinId(),
+		"data-effects": skinEffects(),
+		className: cn("fixed inset-0 z-[71] flex", place.viewport),
+		children: /* @__PURE__ */ jsxs(Drawer$1.Popup, {
+			"data-control-ui": "drawer",
+			"data-control-family": "popup",
+			"data-popup-kind": "drawer",
+			"data-popup-part": "surface",
+			"data-slot": "content",
+			"data-side": side,
+			"data-surface": "modal",
+			"data-padding": padding,
+			"data-surface-variant": surface,
+			"data-variant": variant,
+			className: cn("flex flex-col", place.popup, className),
+			style,
+			...props,
+			children: [grabbable ? /* @__PURE__ */ jsx("div", {
+				"data-control-ui": "drawer",
+				"data-control-family": "popup",
+				"data-popup-kind": "drawer",
+				"data-slot": "handle",
+				className: "shrink-0"
+			}) : null, /* @__PURE__ */ jsx(Drawer$1.Content, {
+				"data-control-ui": "drawer",
+				"data-control-family": "popup",
+				"data-popup-kind": "drawer",
+				"data-slot": "scroll",
+				className: "flex min-h-0 flex-1 flex-col overflow-y-auto",
+				children
+			})]
+		})
+	})] });
+}
+function DrawerHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "drawer",
+		"data-control-family": "popup",
+		"data-popup-kind": "drawer",
+		"data-slot": "header",
+		className: cn("flex flex-col", className),
+		...props
+	});
+}
+function DrawerFooter({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "drawer",
+		"data-control-family": "popup",
+		"data-popup-kind": "drawer",
+		"data-slot": "footer",
+		className: cn("mt-auto flex flex-col", className),
+		...props
+	});
+}
+function DrawerTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Drawer$1.Title, {
+		"data-control-ui": "drawer",
+		"data-control-family": "popup",
+		"data-popup-kind": "drawer",
+		"data-slot": "title",
+		className,
+		...props
+	});
+}
+function DrawerDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Drawer$1.Description, {
+		"data-control-ui": "drawer",
+		"data-control-family": "popup",
+		"data-popup-kind": "drawer",
+		"data-slot": "description",
+		className,
+		...props
+	});
+}
+//#endregion
+export { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, drawerContentPaddings, drawerContentSurfaces, drawerContentVariants, drawerSides };

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

@@ -0,0 +1,46 @@
+import { OpenChangeEventDetails } from "../control-props.js";
+import { ControlSize } from "../control-variants.js";
+import { ButtonKnobStyle } from "../knob-contracts/button-knobs.js";
+import { PopupKnobStyle } from "../knob-contracts/popup-knobs.js";
+import { CSSProperties, ComponentProps, MouseEvent, ReactNode } from "react";
+import { Menu } from "@base-ui/react/menu";
+//#region src/ui/dropdown-menu.d.ts
+type DropdownMenuProps = {
+  children?: ReactNode;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean, eventDetails: OpenChangeEventDetails) => void;
+};
+declare const dropdownMenuTriggerVariants: readonly ["surface", "ghost"];
+type DropdownMenuTriggerVariant = (typeof dropdownMenuTriggerVariants)[number];
+type DropdownMenuTriggerProps = Omit<ComponentProps<"button">, "style"> & {
+  style?: CSSProperties & ButtonKnobStyle;
+} & {
+  size?: ControlSize;
+  iconOnly?: boolean;
+  variant?: DropdownMenuTriggerVariant;
+};
+type DropdownMenuContentProps = Omit<ComponentProps<"div">, "style"> & {
+  style?: CSSProperties & PopupKnobStyle;
+};
+type DropdownMenuItemProps = Omit<Omit<ComponentProps<"div">, "onClick">, "style"> & {
+  style?: CSSProperties & PopupKnobStyle;
+} & {
+  disabled?: boolean;
+  onClick?: (event: MouseEvent) => void;
+};
+type DropdownMenuSeparatorProps = Omit<ComponentProps<"div">, "style"> & {
+  style?: CSSProperties & PopupKnobStyle;
+};
+type DropdownMenuLabelProps = Omit<ComponentProps<"div">, "style"> & {
+  style?: CSSProperties & PopupKnobStyle;
+};
+type RefinedDropdownMenuTriggerProps = DropdownMenuTriggerProps & Pick<ComponentProps<typeof Menu.Trigger>, "nativeButton" | "render">;
+declare function DropdownMenu({ children, ...props }: DropdownMenuProps): import("react").JSX.Element;
+declare function DropdownMenuTrigger({ size, iconOnly, variant, className, children, disabled, ...props }: RefinedDropdownMenuTriggerProps): import("react").JSX.Element;
+declare function DropdownMenuContent({ className, children, ...props }: DropdownMenuContentProps): import("react").JSX.Element;
+declare function DropdownMenuItem({ className, ...props }: DropdownMenuItemProps): import("react").JSX.Element;
+declare function DropdownMenuSeparator({ className, ...props }: DropdownMenuSeparatorProps): import("react").JSX.Element;
+declare function DropdownMenuLabel({ className, ...props }: DropdownMenuLabelProps): import("react").JSX.Element;
+//#endregion
+export { DropdownMenu, DropdownMenuContent, DropdownMenuContentProps, DropdownMenuItem, DropdownMenuItemProps, DropdownMenuLabel, DropdownMenuLabelProps, DropdownMenuProps, DropdownMenuSeparator, DropdownMenuSeparatorProps, DropdownMenuTrigger, DropdownMenuTriggerProps, DropdownMenuTriggerVariant, dropdownMenuTriggerVariants };