@cueplusplus/ui 0.13.0

package/dist/overlays/dropdown-menu.js

@@ -0,0 +1,156 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { useComposedRefs } from "../lib/compose.js";
+import { TickGlyph } from "./_glyphs.js";
+import { useCuePortalProps } from "../system/portal.js";
+import { menuItemClasses, menuLabelClasses, menuPopupClasses, menuSeparatorClasses, overlayPopupTransitionClasses, overlayPositionerClasses, overlaySurfaceClasses } from "./_surface.js";
+import { useCloseOnWheel } from "./_wheel.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Menu } from "@base-ui/react/menu";
+//#region src/overlays/dropdown-menu.tsx
+const MenuDismissContext = React.createContext({
+	closeOnWheel: false,
+	close: () => {}
+});
+/** Groups the parts of a menu and owns its open state. Renders no element. */
+function DropdownMenuRoot({ closeOnWheel = true, actionsRef, ...rootProps }) {
+	const fallbackActions = React.useRef(null);
+	const actions = actionsRef ?? fallbackActions;
+	const close = React.useCallback(() => {
+		actions.current?.close();
+	}, [actions]);
+	const dismiss = React.useMemo(() => ({
+		closeOnWheel,
+		close
+	}), [closeOnWheel, close]);
+	return /* @__PURE__ */ jsx(MenuDismissContext.Provider, {
+		value: dismiss,
+		children: /* @__PURE__ */ jsx(Menu.Root, {
+			actionsRef: actions,
+			...rootProps
+		})
+	});
+}
+/**
+* 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>
+*/
+const DropdownMenu = {
+	Root: DropdownMenuRoot,
+	Trigger: React.forwardRef(function DropdownMenuTrigger({ className, ...elementProps }, ref) {
+		return /* @__PURE__ */ jsx(Menu.Trigger, {
+			ref,
+			"data-slot": "dropdown-menu-trigger",
+			className: cn(className),
+			...elementProps
+		});
+	}),
+	Content: React.forwardRef(function DropdownMenuContent({ className, positionerClassName, side, align = "start", sideOffset = 4, alignOffset, keepMounted, children, ...popupProps }, ref) {
+		const portalProps = useCuePortalProps();
+		const { closeOnWheel, close } = React.useContext(MenuDismissContext);
+		const popupRef = React.useRef(null);
+		const composedRef = useComposedRefs(ref, popupRef);
+		useCloseOnWheel(closeOnWheel, close, popupRef);
+		return /* @__PURE__ */ jsx(Menu.Portal, {
+			keepMounted,
+			...portalProps,
+			children: /* @__PURE__ */ jsx(Menu.Positioner, {
+				className: cn(overlayPositionerClasses, positionerClassName),
+				side,
+				align,
+				sideOffset,
+				alignOffset,
+				children: /* @__PURE__ */ jsx(Menu.Popup, {
+					ref: composedRef,
+					"data-slot": "dropdown-menu-popup",
+					className: cn(overlaySurfaceClasses, overlayPopupTransitionClasses, menuPopupClasses, "max-h-(--available-height) overflow-y-auto outline-none", className),
+					...popupProps,
+					children
+				})
+			})
+		});
+	}),
+	Group: React.forwardRef(function DropdownMenuGroup({ className, ...elementProps }, ref) {
+		return /* @__PURE__ */ jsx(Menu.Group, {
+			ref,
+			"data-slot": "dropdown-menu-group",
+			className: cn(className),
+			...elementProps
+		});
+	}),
+	Label: React.forwardRef(function DropdownMenuLabel({ className, ...elementProps }, ref) {
+		return /* @__PURE__ */ jsx(Menu.GroupLabel, {
+			ref,
+			"data-slot": "dropdown-menu-label",
+			className: cn(menuLabelClasses, className),
+			...elementProps
+		});
+	}),
+	Item: React.forwardRef(function DropdownMenuItem({ className, icon: Icon, trailing, children, ...elementProps }, ref) {
+		return /* @__PURE__ */ jsxs(Menu.Item, {
+			ref,
+			"data-slot": "dropdown-menu-item",
+			className: cn(menuItemClasses, className),
+			...elementProps,
+			children: [
+				Icon === void 0 ? null : /* @__PURE__ */ jsx(Icon, {
+					"aria-hidden": "true",
+					className: "size-icon-sm shrink-0 text-fg-subtle"
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "flex-1 truncate",
+					children
+				}),
+				trailing === void 0 ? null : /* @__PURE__ */ jsx("span", {
+					className: "shrink-0 text-fg-subtle",
+					children: trailing
+				})
+			]
+		});
+	}),
+	CheckboxItem: React.forwardRef(function DropdownMenuCheckboxItem({ className, children, ...elementProps }, ref) {
+		return /* @__PURE__ */ jsxs(Menu.CheckboxItem, {
+			ref,
+			"data-slot": "dropdown-menu-checkbox-item",
+			className: cn(menuItemClasses, "data-[checked]:text-accent", className),
+			...elementProps,
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "flex size-icon-sm shrink-0 items-center justify-center",
+				children: /* @__PURE__ */ jsx(Menu.CheckboxItemIndicator, { children: /* @__PURE__ */ jsx(TickGlyph, { className: "size-icon-sm" }) })
+			}), /* @__PURE__ */ jsx("span", {
+				className: "flex-1 truncate",
+				children
+			})]
+		});
+	}),
+	Separator: React.forwardRef(function DropdownMenuSeparator({ className, ...elementProps }, ref) {
+		return /* @__PURE__ */ jsx(Menu.Separator, {
+			ref,
+			"data-slot": "dropdown-menu-separator",
+			className: cn(menuSeparatorClasses, className),
+			...elementProps
+		});
+	})
+};
+//#endregion
+export { DropdownMenu };

package/dist/overlays/hover-card.d.ts

@@ -0,0 +1,58 @@
+import * as React from "react";
+import { PreviewCard } from "@base-ui/react/preview-card";
+//#region src/overlays/hover-card.d.ts
+interface HoverCardRootProps extends PreviewCard.Root.Props {
+  /**
+   * Close the card when the viewport moves under it — a wheel anywhere outside
+   * the popup, or a window resize. Defaults to `true`, for the same reason as
+   * `Popover`: an anchored popup is placed from its trigger's rect, and a canvas
+   * that pans by CSS transform fires no `scroll` event.
+   */
+  closeOnWheel?: boolean;
+}
+/** Groups the parts of a hover card and owns its open state. Renders no element. */
+declare function HoverCardRoot({ closeOnWheel, actionsRef, ...rootProps }: HoverCardRootProps): React.JSX.Element;
+interface HoverCardTriggerProps extends PreviewCard.Trigger.Props {}
+interface HoverCardContentProps extends Omit<PreviewCard.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?: PreviewCard.Positioner.Props["side"];
+  /** Alignment along that side. Defaults to `"center"`. */
+  align?: PreviewCard.Positioner.Props["align"];
+  /** Gap in px between trigger and popup. Defaults to `4`. */
+  sideOffset?: PreviewCard.Positioner.Props["sideOffset"];
+  /** Nudge along the alignment axis, in px. */
+  alignOffset?: PreviewCard.Positioner.Props["alignOffset"];
+  /** Keep the popup mounted while closed. */
+  keepMounted?: boolean;
+}
+/**
+ * A richer preview than a tooltip, revealed by hovering a link or a name: the
+ * fixture behind a profile string, the operator behind an initial.
+ *
+ * Wraps Base UI's `PreviewCard`, which is the right primitive precisely because
+ * it is *not* a tooltip: the card is reachable — the pointer can travel into it
+ * and interact — and its content is not announced as the trigger's description.
+ *
+ * Hover is the only way in, so the content here must always be a *convenience*.
+ * Anything a keyboard or touch user genuinely needs belongs in a `Popover`
+ * (a real trigger) or an `InfoTip` (a focusable badge).
+ *
+ * @example
+ * <HoverCard.Root>
+ *   <HoverCard.Trigger href="/fixtures/mac-aura">MAC Aura XIP</HoverCard.Trigger>
+ *   <HoverCard.Content>
+ *     <Stat label="Channels" value="21" />
+ *   </HoverCard.Content>
+ * </HoverCard.Root>
+ */
+declare const HoverCard: {
+  Root: typeof HoverCardRoot;
+  Trigger: React.ForwardRefExoticComponent<Omit<HoverCardTriggerProps, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
+  Content: React.ForwardRefExoticComponent<Omit<HoverCardContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+};
+//#endregion
+export { HoverCard, HoverCardContentProps, HoverCardRootProps, HoverCardTriggerProps };

package/dist/overlays/hover-card.js

@@ -0,0 +1,91 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { useComposedRefs } from "../lib/compose.js";
+import { useCuePortalProps } from "../system/portal.js";
+import { overlayPopupTransitionClasses, overlayPositionerClasses, overlaySurfaceClasses } from "./_surface.js";
+import { useCloseOnWheel } from "./_wheel.js";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+import { PreviewCard } from "@base-ui/react/preview-card";
+//#region src/overlays/hover-card.tsx
+const HoverCardDismissContext = React.createContext({
+	closeOnWheel: false,
+	close: () => {}
+});
+/** Groups the parts of a hover card and owns its open state. Renders no element. */
+function HoverCardRoot({ closeOnWheel = true, actionsRef, ...rootProps }) {
+	const fallbackActions = React.useRef(null);
+	const actions = actionsRef ?? fallbackActions;
+	const close = React.useCallback(() => {
+		actions.current?.close();
+	}, [actions]);
+	const dismiss = React.useMemo(() => ({
+		closeOnWheel,
+		close
+	}), [closeOnWheel, close]);
+	return /* @__PURE__ */ jsx(HoverCardDismissContext.Provider, {
+		value: dismiss,
+		children: /* @__PURE__ */ jsx(PreviewCard.Root, {
+			actionsRef: actions,
+			...rootProps
+		})
+	});
+}
+/**
+* A richer preview than a tooltip, revealed by hovering a link or a name: the
+* fixture behind a profile string, the operator behind an initial.
+*
+* Wraps Base UI's `PreviewCard`, which is the right primitive precisely because
+* it is *not* a tooltip: the card is reachable — the pointer can travel into it
+* and interact — and its content is not announced as the trigger's description.
+*
+* Hover is the only way in, so the content here must always be a *convenience*.
+* Anything a keyboard or touch user genuinely needs belongs in a `Popover`
+* (a real trigger) or an `InfoTip` (a focusable badge).
+*
+* @example
+* <HoverCard.Root>
+*   <HoverCard.Trigger href="/fixtures/mac-aura">MAC Aura XIP</HoverCard.Trigger>
+*   <HoverCard.Content>
+*     <Stat label="Channels" value="21" />
+*   </HoverCard.Content>
+* </HoverCard.Root>
+*/
+const HoverCard = {
+	Root: HoverCardRoot,
+	Trigger: React.forwardRef(function HoverCardTrigger({ className, ...elementProps }, ref) {
+		return /* @__PURE__ */ jsx(PreviewCard.Trigger, {
+			ref,
+			"data-slot": "hover-card-trigger",
+			className: cn(className),
+			...elementProps
+		});
+	}),
+	Content: React.forwardRef(function HoverCardContent({ className, positionerClassName, side, align, sideOffset = 4, alignOffset, keepMounted, children, ...popupProps }, ref) {
+		const portalProps = useCuePortalProps();
+		const { closeOnWheel, close } = React.useContext(HoverCardDismissContext);
+		const popupRef = React.useRef(null);
+		const composedRef = useComposedRefs(ref, popupRef);
+		useCloseOnWheel(closeOnWheel, close, popupRef);
+		return /* @__PURE__ */ jsx(PreviewCard.Portal, {
+			keepMounted,
+			...portalProps,
+			children: /* @__PURE__ */ jsx(PreviewCard.Positioner, {
+				className: cn(overlayPositionerClasses, positionerClassName),
+				side,
+				align,
+				sideOffset,
+				alignOffset,
+				children: /* @__PURE__ */ jsx(PreviewCard.Popup, {
+					ref: composedRef,
+					"data-slot": "hover-card-popup",
+					className: cn(overlaySurfaceClasses, overlayPopupTransitionClasses, "flex w-[min(20rem,calc(100vw-2rem))] flex-col gap-(--cue-space-2) p-(--cue-space-4) font-mono text-(length:--cue-text-ui) text-fg-muted outline-none", className),
+					...popupProps,
+					children
+				})
+			})
+		});
+	})
+};
+//#endregion
+export { HoverCard };

package/dist/overlays/index.d.ts

@@ -0,0 +1,15 @@
+import { OVERLAY_SIDE_OFFSET, menuItemClasses, menuLabelClasses, menuPopupClasses, menuSeparatorClasses, overlayDescriptionClasses, overlayFooterClasses, overlayModalTransitionClasses, overlayPopupTransitionClasses, overlayPositionerClasses, overlaySurfaceClasses, overlayTextClasses, overlayTitleClasses, scrimClasses } from "./_surface.js";
+import { AlertDialog, AlertDialogActionProps, AlertDialogCancelProps, AlertDialogContentProps, AlertDialogDescriptionProps, AlertDialogFooterProps, AlertDialogRootProps, AlertDialogTitleProps, AlertDialogTriggerProps } from "./alert-dialog.js";
+import { CommandPalette, CommandPaletteItem, CommandPaletteProps } from "./command-palette.js";
+import { DropdownMenu, DropdownMenuCheckboxItemProps, DropdownMenuContentProps, DropdownMenuGroupProps, DropdownMenuItemProps, DropdownMenuLabelProps, DropdownMenuRootProps, DropdownMenuSeparatorProps, DropdownMenuTriggerProps } from "./dropdown-menu.js";
+import { ContextMenu, ContextMenuContentProps, ContextMenuRootProps, ContextMenuTriggerProps } from "./context-menu.js";
+import { Dialog, DialogCloseProps, DialogContentProps, DialogDescriptionProps, DialogFooterProps, DialogRootProps, DialogTitleProps, DialogTriggerProps } from "./dialog.js";
+import { Drawer, DrawerCloseProps, DrawerContentProps, DrawerDescriptionProps, DrawerFooterProps, DrawerRootProps, DrawerSwipeDirection, DrawerTitleProps, DrawerTriggerProps } from "./drawer.js";
+import { HoverCard, HoverCardContentProps, HoverCardRootProps, HoverCardTriggerProps } from "./hover-card.js";
+import { Tooltip, TooltipContentProps, TooltipProviderProps, TooltipRootProps, TooltipTriggerProps } from "./tooltip.js";
+import { InfoTip, InfoTipProps } from "./info-tip.js";
+import { Menubar, MenubarContentProps, MenubarMenuProps, MenubarRootProps, MenubarTriggerProps } from "./menubar.js";
+import { Popover, PopoverCloseProps, PopoverContentProps, PopoverDescriptionProps, PopoverRootProps, PopoverTitleProps, PopoverTriggerProps } from "./popover.js";
+import { Sheet, SheetCloseProps, SheetContentProps, SheetDescriptionProps, SheetFooterProps, SheetRootProps, SheetTitleProps, SheetTriggerProps } from "./sheet.js";
+import { Toast, ToastManager, ToastOptions, ToastProviderProps, ToastTone, ToastViewportProps, useToast } from "./toast.js";
+export { AlertDialog, type AlertDialogActionProps, type AlertDialogCancelProps, type AlertDialogContentProps, type AlertDialogDescriptionProps, type AlertDialogFooterProps, type AlertDialogRootProps, type AlertDialogTitleProps, type AlertDialogTriggerProps, CommandPalette, type CommandPaletteItem, type CommandPaletteProps, ContextMenu, type ContextMenuContentProps, type ContextMenuRootProps, type ContextMenuTriggerProps, Dialog, type DialogCloseProps, type DialogContentProps, type DialogDescriptionProps, type DialogFooterProps, type DialogRootProps, type DialogTitleProps, type DialogTriggerProps, Drawer, type DrawerCloseProps, type DrawerContentProps, type DrawerDescriptionProps, type DrawerFooterProps, type DrawerRootProps, type DrawerSwipeDirection, type DrawerTitleProps, type DrawerTriggerProps, DropdownMenu, type DropdownMenuCheckboxItemProps, type DropdownMenuContentProps, type DropdownMenuGroupProps, type DropdownMenuItemProps, type DropdownMenuLabelProps, type DropdownMenuRootProps, type DropdownMenuSeparatorProps, type DropdownMenuTriggerProps, HoverCard, type HoverCardContentProps, type HoverCardRootProps, type HoverCardTriggerProps, InfoTip, type InfoTipProps, Menubar, type MenubarContentProps, type MenubarMenuProps, type MenubarRootProps, type MenubarTriggerProps, OVERLAY_SIDE_OFFSET, Popover, type PopoverCloseProps, type PopoverContentProps, type PopoverDescriptionProps, type PopoverRootProps, type PopoverTitleProps, type PopoverTriggerProps, Sheet, type SheetCloseProps, type SheetContentProps, type SheetDescriptionProps, type SheetFooterProps, type SheetRootProps, type SheetTitleProps, type SheetTriggerProps, Toast, type ToastManager, type ToastOptions, type ToastProviderProps, type ToastTone, type ToastViewportProps, Tooltip, type TooltipContentProps, type TooltipProviderProps, type TooltipRootProps, type TooltipTriggerProps, menuItemClasses, menuLabelClasses, menuPopupClasses, menuSeparatorClasses, overlayDescriptionClasses, overlayFooterClasses, overlayModalTransitionClasses, overlayPopupTransitionClasses, overlayPositionerClasses, overlaySurfaceClasses, overlayTextClasses, overlayTitleClasses, scrimClasses, useToast };

package/dist/overlays/index.js

@@ -0,0 +1,15 @@
+import { OVERLAY_SIDE_OFFSET, menuItemClasses, menuLabelClasses, menuPopupClasses, menuSeparatorClasses, overlayDescriptionClasses, overlayFooterClasses, overlayModalTransitionClasses, overlayPopupTransitionClasses, overlayPositionerClasses, overlaySurfaceClasses, overlayTextClasses, overlayTitleClasses, scrimClasses } from "./_surface.js";
+import { Drawer } from "./drawer.js";
+import { AlertDialog } from "./alert-dialog.js";
+import { CommandPalette } from "./command-palette.js";
+import { DropdownMenu } from "./dropdown-menu.js";
+import { ContextMenu } from "./context-menu.js";
+import { Dialog } from "./dialog.js";
+import { HoverCard } from "./hover-card.js";
+import { Tooltip } from "./tooltip.js";
+import { InfoTip } from "./info-tip.js";
+import { Menubar } from "./menubar.js";
+import { Popover } from "./popover.js";
+import { Sheet } from "./sheet.js";
+import { Toast, useToast } from "./toast.js";
+export { AlertDialog, CommandPalette, ContextMenu, Dialog, Drawer, DropdownMenu, HoverCard, InfoTip, Menubar, OVERLAY_SIDE_OFFSET, Popover, Sheet, Toast, Tooltip, menuItemClasses, menuLabelClasses, menuPopupClasses, menuSeparatorClasses, overlayDescriptionClasses, overlayFooterClasses, overlayModalTransitionClasses, overlayPopupTransitionClasses, overlayPositionerClasses, overlaySurfaceClasses, overlayTextClasses, overlayTitleClasses, scrimClasses, useToast };

package/dist/overlays/info-tip.d.ts

@@ -0,0 +1,41 @@
+import { Tooltip } from "./tooltip.js";
+import * as React from "react";
+//#region src/overlays/info-tip.d.ts
+interface InfoTipProps {
+  /** The explanation to reveal. One or two sentences; longer belongs in a `Popover`. */
+  text: React.ReactNode;
+  /**
+   * Width of the revealed panel in px, applied as rem so it scales with the
+   * root font size. Defaults to `224`.
+   */
+  width?: number;
+  /** Accessible name for the badge. Defaults to `"More information"`. */
+  label?: string;
+  /** Preferred side of the badge. Defaults to `"top"`. */
+  side?: React.ComponentProps<typeof Tooltip.Content>["side"];
+  /** Alignment along that side. Defaults to `"center"`. */
+  align?: React.ComponentProps<typeof Tooltip.Content>["align"];
+  /** Hover delay in ms before the panel appears. Defaults to `200`. */
+  delay?: number;
+  /** Extra classes for the badge. */
+  className?: string;
+}
+/**
+ * The 13px circular "i" badge: a footnote marker for a field, a column or a
+ * number whose definition is not obvious.
+ *
+ * A real focusable `<button>`, not a bare `<span>` with a hover handler — the
+ * explanation has to be reachable from the keyboard, and the badge's own
+ * `cursor-help` is the only hint sighted users get that it is there at all.
+ * Everything else (portal theme stamping, `role="tooltip"`, dismissal) comes
+ * from {@link Tooltip}.
+ *
+ * The badge stays 13px across densities on purpose: it is a punctuation mark
+ * sitting in a line of text, so it tracks the text, not the control ladder.
+ *
+ * @example
+ * <FieldLabel>Pace <InfoTip text="Where usage should be by today, pro-rated." /></FieldLabel>
+ */
+declare function InfoTip({ text, width, label, side, align, delay, className }: InfoTipProps): React.JSX.Element;
+//#endregion
+export { InfoTip, InfoTipProps };

package/dist/overlays/info-tip.js

@@ -0,0 +1,45 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { Tooltip } from "./tooltip.js";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/overlays/info-tip.tsx
+/** px the `width` prop is expressed in, converted to rem so it tracks the root size. */
+const PX_PER_REM = 16;
+/**
+* The 13px circular "i" badge: a footnote marker for a field, a column or a
+* number whose definition is not obvious.
+*
+* A real focusable `<button>`, not a bare `<span>` with a hover handler — the
+* explanation has to be reachable from the keyboard, and the badge's own
+* `cursor-help` is the only hint sighted users get that it is there at all.
+* Everything else (portal theme stamping, `role="tooltip"`, dismissal) comes
+* from {@link Tooltip}.
+*
+* The badge stays 13px across densities on purpose: it is a punctuation mark
+* sitting in a line of text, so it tracks the text, not the control ladder.
+*
+* @example
+* <FieldLabel>Pace <InfoTip text="Where usage should be by today, pro-rated." /></FieldLabel>
+*/
+function InfoTip({ text, width = 224, label = "More information", side = "top", align, delay = 200, className }) {
+	return /* @__PURE__ */ jsxs(Tooltip.Root, { children: [/* @__PURE__ */ jsx(Tooltip.Trigger, {
+		delay,
+		"aria-label": label,
+		"data-slot": "info-tip-trigger",
+		className: cn("inline-flex size-[0.8125rem] shrink-0 cursor-help items-center justify-center rounded-full border border-border-strong bg-transparent font-mono text-(length:--cue-text-micro) leading-none font-bold text-fg-muted italic outline-none select-none hover:border-accent hover:text-accent focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-1 focus-visible:outline-accent", className),
+		children: "i"
+	}), /* @__PURE__ */ jsx(Tooltip.Content, {
+		side,
+		align,
+		"data-slot": "info-tip-content",
+		className: "not-italic",
+		style: {
+			width: `${width / PX_PER_REM}rem`,
+			maxWidth: "calc(100vw - 2rem)"
+		},
+		children: text
+	})] });
+}
+//#endregion
+export { InfoTip };

package/dist/overlays/menubar.d.ts

@@ -0,0 +1,72 @@
+import { DropdownMenuCheckboxItemProps, DropdownMenuGroupProps, DropdownMenuItemProps, DropdownMenuLabelProps, DropdownMenuSeparatorProps } from "./dropdown-menu.js";
+import * as React from "react";
+import { Menu } from "@base-ui/react/menu";
+import { Menubar } from "@base-ui/react/menubar";
+//#region src/overlays/menubar.d.ts
+interface MenubarRootProps extends Omit<Menubar.Props, "className"> {
+  /** Extra classes for the bar. */
+  className?: string;
+}
+interface MenubarMenuProps extends Menu.Root.Props {}
+/**
+ * One menu of the bar — its trigger and its content. Renders no element.
+ *
+ * Base UI reads the enclosing menubar from context: once one menu is open,
+ * hovering a sibling trigger switches to it without a second click, and the
+ * arrow keys walk the bar. None of that needs wiring here.
+ */
+declare function MenubarMenu(props: MenubarMenuProps): React.JSX.Element;
+interface MenubarTriggerProps extends Omit<Menu.Trigger.Props, "className"> {
+  /** Extra classes for the trigger. */
+  className?: string;
+}
+interface MenubarContentProps 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;
+  /** Alignment along the bottom of the trigger. Defaults to `"start"`. */
+  align?: Menu.Positioner.Props["align"];
+  /** Gap in px between trigger and popup. Defaults to `4`. */
+  sideOffset?: Menu.Positioner.Props["sideOffset"];
+  /** Keep the popup mounted while closed. */
+  keepMounted?: boolean;
+}
+/**
+ * The desktop-application menu bar: a row of words, each dropping a menu.
+ *
+ * Wraps Base UI's `Menubar` around the same `Menu` parts {@link DropdownMenu}
+ * uses, so the rows here *are* the dropdown's rows — one menu language across
+ * the whole system — and the bar-level behaviour (hover to switch menus once one
+ * is open, arrow keys across the bar, typeahead inside a menu) is the
+ * primitive's.
+ *
+ * Use it for an application shell that genuinely has a dozen-plus commands to
+ * file away. A view with six actions wants a `Toolbar`; a menubar with two words
+ * on it is a toolbar wearing a costume.
+ *
+ * @example
+ * <Menubar.Root>
+ *   <Menubar.Menu>
+ *     <Menubar.Trigger>Show</Menubar.Trigger>
+ *     <Menubar.Content>
+ *       <Menubar.Item onClick={newShow}>New show</Menubar.Item>
+ *       <Menubar.Separator />
+ *       <Menubar.Item trailing={<Kbd>⌘S</Kbd>} onClick={save}>Save</Menubar.Item>
+ *     </Menubar.Content>
+ *   </Menubar.Menu>
+ * </Menubar.Root>
+ */
+declare const Menubar$1: {
+  Root: React.ForwardRefExoticComponent<Omit<MenubarRootProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+  Menu: typeof MenubarMenu;
+  Trigger: React.ForwardRefExoticComponent<Omit<MenubarTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+  Content: React.ForwardRefExoticComponent<Omit<MenubarContentProps, "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 { Menubar$1 as Menubar, MenubarContentProps, MenubarMenuProps, MenubarRootProps, MenubarTriggerProps };

package/dist/overlays/menubar.js

@@ -0,0 +1,100 @@
+"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 { Menu } from "@base-ui/react/menu";
+import { Menubar } from "@base-ui/react/menubar";
+//#region src/overlays/menubar.tsx
+/**
+* The bar itself: chrome-toolbar tall, hairline underneath, surface fill.
+*
+* Sized from `--cue-chrome-toolbar` rather than the control ladder, exactly like
+* `Toolbar` and `TitleBar` — a menubar is window furniture, and window furniture
+* keeps its own rung of the density scale so it stays legible when the controls
+* inside the view shrink.
+*/
+const MenubarRoot = React.forwardRef(function MenubarRoot({ className, ...elementProps }, ref) {
+	return /* @__PURE__ */ jsx(Menubar, {
+		ref,
+		"data-slot": "menubar",
+		className: cn("flex h-(--cue-chrome-toolbar) w-full shrink-0 items-center gap-(--cue-space-1) border-b border-border bg-surface-1 px-(--cue-space-2)", className),
+		...elementProps
+	});
+});
+/**
+* One menu of the bar — its trigger and its content. Renders no element.
+*
+* Base UI reads the enclosing menubar from context: once one menu is open,
+* hovering a sibling trigger switches to it without a second click, and the
+* arrow keys walk the bar. None of that needs wiring here.
+*/
+function MenubarMenu(props) {
+	return /* @__PURE__ */ jsx(Menu.Root, { ...props });
+}
+/**
+* The desktop-application menu bar: a row of words, each dropping a menu.
+*
+* Wraps Base UI's `Menubar` around the same `Menu` parts {@link DropdownMenu}
+* uses, so the rows here *are* the dropdown's rows — one menu language across
+* the whole system — and the bar-level behaviour (hover to switch menus once one
+* is open, arrow keys across the bar, typeahead inside a menu) is the
+* primitive's.
+*
+* Use it for an application shell that genuinely has a dozen-plus commands to
+* file away. A view with six actions wants a `Toolbar`; a menubar with two words
+* on it is a toolbar wearing a costume.
+*
+* @example
+* <Menubar.Root>
+*   <Menubar.Menu>
+*     <Menubar.Trigger>Show</Menubar.Trigger>
+*     <Menubar.Content>
+*       <Menubar.Item onClick={newShow}>New show</Menubar.Item>
+*       <Menubar.Separator />
+*       <Menubar.Item trailing={<Kbd>⌘S</Kbd>} onClick={save}>Save</Menubar.Item>
+*     </Menubar.Content>
+*   </Menubar.Menu>
+* </Menubar.Root>
+*/
+const Menubar$1 = {
+	Root: MenubarRoot,
+	Menu: MenubarMenu,
+	Trigger: React.forwardRef(function MenubarTrigger({ className, ...elementProps }, ref) {
+		return /* @__PURE__ */ jsx(Menu.Trigger, {
+			ref,
+			"data-slot": "menubar-trigger",
+			className: cn("inline-flex h-control-sm shrink-0 cursor-default items-center rounded-(--radius-control) px-(--cue-space-3) font-mono text-(length:--cue-text-ui) whitespace-nowrap text-fg-muted transition-colors duration-150 outline-none select-none hover:text-fg focus-visible:outline-2 focus-visible:outline-solid focus-visible:-outline-offset-1 focus-visible:outline-accent data-[popup-open]:bg-accent-soft data-[popup-open]:text-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-40", className),
+			...elementProps
+		});
+	}),
+	Content: React.forwardRef(function MenubarContent({ className, positionerClassName, align = "start", sideOffset = 4, keepMounted, children, ...popupProps }, ref) {
+		const portalProps = useCuePortalProps();
+		return /* @__PURE__ */ jsx(Menu.Portal, {
+			keepMounted,
+			...portalProps,
+			children: /* @__PURE__ */ jsx(Menu.Positioner, {
+				className: cn(overlayPositionerClasses, positionerClassName),
+				side: "bottom",
+				align,
+				sideOffset,
+				children: /* @__PURE__ */ jsx(Menu.Popup, {
+					ref,
+					"data-slot": "menubar-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 { Menubar$1 as Menubar };