@arcfusionz/arc-primitive-ui 0.1.0 → 0.2.0

package/dist/components/Menu/Menu.d.ts

@@ -0,0 +1,212 @@
+import { ComponentPropsWithoutRef, HTMLAttributes } from "react";
+import { Menu } from "@base-ui/react/menu";
+//#region src/components/Menu/Menu.d.ts
+/**
+ * Groups the menu parts and owns the open state. A menu lists **actions**
+ * (role `menu`); to pick a value that a field keeps showing, use Select.
+ * This is Base UI's `Menu.Root` re-exported unchanged, so every root feature
+ * is available: `open`/`defaultOpen`/`onOpenChange(open, details)`,
+ * `modal` (defaults `true` — page scroll locks while open), `disabled`,
+ * `loopFocus`, `orientation`, `highlightItemOnHover`, and
+ * `handle`/`triggerId` for detached triggers.
+ */
+declare const Menu$1: <Payload>(props: Menu.Root.Props<Payload>) => import("react").JSX.Element;
+type MenuProps = ComponentPropsWithoutRef<typeof Menu.Root>;
+/**
+ * Creates a handle that links `Menu` with `MenuTrigger`s rendered elsewhere
+ * in the tree (toolbars, table rows). Triggers may attach a `payload`, which
+ * the `Menu` children render function receives.
+ */
+declare const createMenuHandle: typeof Menu.createHandle;
+type MenuHandle<Payload = unknown> = Menu.Handle<Payload>;
+interface MenuTriggerProps extends Omit<ComponentPropsWithoutRef<typeof Menu.Trigger>, "className"> {
+  className?: string;
+}
+/**
+ * The button that opens the menu. Ships unstyled so the visual comes from
+ * composition — render the design system's Button:
+ *
+ *   <MenuTrigger render={<Button variant="outline" />}>Options</MenuTrigger>
+ *
+ * For the kebab/ellipsis pattern, Button's icon-only form already enforces
+ * the accessible name:
+ *
+ *   <MenuTrigger render={<Button variant="ghost" iconOnly aria-label="Row actions" />}>
+ *     <EllipsisIcon />
+ *   </MenuTrigger>
+ *
+ * While its menu is open the element carries `data-popup-open`, the hook for
+ * a pressed look (e.g. `className="data-popup-open:bg-muted"`). `openOnHover`
+ * with `delay`/`closeDelay` (100/0ms defaults) is available but click-to-open
+ * is the reliable default for action menus — hover menus misfire on the way
+ * to other targets.
+ */
+declare const MenuTrigger: import("react").ForwardRefExoticComponent<MenuTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+type BasePositionerProps = ComponentPropsWithoutRef<typeof Menu.Positioner>;
+type MenuSide = NonNullable<BasePositionerProps["side"]>;
+type MenuAlign = NonNullable<BasePositionerProps["align"]>;
+interface MenuPopupProps extends Omit<ComponentPropsWithoutRef<typeof Menu.Popup>, "className"> {
+  /**
+   * Side of the anchor to place the popup on; flips automatically when there
+   * is no room. When omitted, Base UI picks the menu default: `bottom` for a
+   * top-level menu, the inline end (submenu convention) inside a
+   * `MenuSubmenuRoot` — so leave it unset unless the layout demands a side.
+   */
+  side?: MenuSide;
+  /**
+   * How the popup lines up along the chosen side. When omitted, top-level
+   * menus center on the trigger and submenus align `start` so their panel
+   * tracks the trigger row.
+   */
+  align?: MenuAlign;
+  /**
+   * Gap between anchor and popup in pixels. Defaults adapt to the resolved
+   * side: 4px below/above a trigger, and a 4px *overlap* for submenus so the
+   * pointer never crosses a dead zone between panels.
+   */
+  sideOffset?: BasePositionerProps["sideOffset"];
+  /**
+   * Additional shift along the alignment axis in pixels. Defaults adapt: 0
+   * for top-level menus, -4px for submenus so the first item lines up with
+   * the submenu trigger's row.
+   */
+  alignOffset?: BasePositionerProps["alignOffset"];
+  /** Minimum space kept from the viewport (or collision boundary) edges when repositioning. */
+  collisionPadding?: BasePositionerProps["collisionPadding"];
+  /** Position against this element instead of the trigger (e.g. the whole toolbar while a button opens the menu). */
+  anchor?: BasePositionerProps["anchor"];
+  /** Keep the popup in the DOM while closed — for SEO or measuring; closed popups normally unmount. */
+  keepMounted?: boolean;
+  /** Portal destination. Defaults to `document.body`. */
+  container?: ComponentPropsWithoutRef<typeof Menu.Portal>["container"];
+  /**
+   * Applied to the popup panel. Width hooks: the panel is content-sized from
+   * 8rem up — set `w-*`/`max-w-*` for a fixed width or
+   * `min-w-[var(--anchor-width)]` to never be narrower than the trigger.
+   * Long menus scroll inside the panel; cap them earlier with `max-h-*`.
+   */
+  className?: string;
+}
+/**
+ * The floating list of menu items, with the portal and positioning plumbing
+ * folded in. Anchored to its trigger by default; opens with a motion-safe
+ * scale/fade from the anchor-facing corner. The same component nests inside
+ * `MenuSubmenuRoot`, where its placement defaults switch to the submenu
+ * conventions (inline-end side, overlapped edge, trigger-row alignment).
+ */
+declare const MenuPopup: import("react").ForwardRefExoticComponent<MenuPopupProps & import("react").RefAttributes<HTMLDivElement>>;
+type MenuItemVariant = "default" | "destructive";
+interface MenuItemVariantsOptions {
+  variant?: MenuItemVariant;
+  inset?: boolean;
+  className?: string;
+}
+/**
+ * Class list for an element styled as a menu item — for menu-shaped rows
+ * that don't come from Base UI (command palettes, custom listboxes) so every
+ * item row in the product shares one look.
+ */
+declare function menuItemVariants({ variant, inset, className }?: MenuItemVariantsOptions): string;
+interface MenuItemProps extends Omit<ComponentPropsWithoutRef<typeof Menu.Item>, "className"> {
+  /** Visual tone: `destructive` marks irreversible actions (delete, revoke) in the error hue. */
+  variant?: MenuItemVariant;
+  /** Indent the label into the indicator column so it aligns with checkbox/radio items in the same menu. */
+  inset?: boolean;
+  className?: string;
+}
+/**
+ * One action in the menu. Children are free-form — a leading `<svg>` icon is
+ * sized and muted automatically. Set `label` when children aren't plain text
+ * so keyboard typeahead still matches, `disabled` for unavailable actions
+ * (keep them visible so users can see what exists), and `closeOnClick={false}`
+ * to keep the menu open after the action runs.
+ */
+declare const MenuItem: import("react").ForwardRefExoticComponent<MenuItemProps & import("react").RefAttributes<HTMLDivElement>>;
+interface MenuLinkItemProps extends Omit<ComponentPropsWithoutRef<typeof Menu.LinkItem>, "className"> {
+  /** Indent the label into the indicator column so it aligns with checkbox/radio items in the same menu. */
+  inset?: boolean;
+  className?: string;
+}
+/**
+ * A navigation entry that keeps link semantics — it renders a real `<a>`
+ * (never a button styled as one), so it supports open-in-new-tab, copy link,
+ * and middle-click. Pass `href` directly, or compose a client-side router
+ * link via `render={<Link to="…" />}`.
+ */
+declare const MenuLinkItem: import("react").ForwardRefExoticComponent<MenuLinkItemProps & import("react").RefAttributes<HTMLAnchorElement>>;
+type MenuShortcutProps = HTMLAttributes<HTMLSpanElement>;
+/**
+ * Right-aligned keyboard hint inside an item (`⌘N`, `Ctrl+D`). Purely
+ * visual — it does not register the shortcut; wire the actual key handling
+ * in the app. Helper text mirrors Typography caption.
+ */
+declare const MenuShortcut: import("react").ForwardRefExoticComponent<MenuShortcutProps & import("react").RefAttributes<HTMLSpanElement>>;
+interface MenuGroupProps extends Omit<ComponentPropsWithoutRef<typeof Menu.Group>, "className"> {
+  className?: string;
+}
+/** Groups related items under a `MenuGroupLabel`, announced together by assistive technology. */
+declare const MenuGroup: import("react").ForwardRefExoticComponent<MenuGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+interface MenuGroupLabelProps extends Omit<ComponentPropsWithoutRef<typeof Menu.GroupLabel>, "className"> {
+  /** Indent the label into the indicator column so it aligns with checkbox/radio items in the same menu. */
+  inset?: boolean;
+  className?: string;
+}
+/** Heading for a `MenuGroup` (or `MenuRadioGroup`) — visually a meta caption, wired to the group via `aria-labelledby`. */
+declare const MenuGroupLabel: import("react").ForwardRefExoticComponent<MenuGroupLabelProps & import("react").RefAttributes<HTMLDivElement>>;
+interface MenuSeparatorProps extends Omit<ComponentPropsWithoutRef<typeof Menu.Separator>, "className"> {
+  className?: string;
+}
+/** Divider between item groups, exposed to screen readers as a separator. */
+declare const MenuSeparator: import("react").ForwardRefExoticComponent<MenuSeparatorProps & import("react").RefAttributes<HTMLDivElement>>;
+interface MenuCheckboxItemProps extends Omit<ComponentPropsWithoutRef<typeof Menu.CheckboxItem>, "className"> {
+  className?: string;
+}
+/**
+ * An item that toggles a setting on or off — a check mark fills the leading
+ * indicator column while `checked`. Control it with
+ * `checked`/`defaultChecked`/`onCheckedChange`. It keeps the menu open on
+ * click by default (Base UI's `closeOnClick={false}`) so several settings
+ * can be flipped in one visit.
+ */
+declare const MenuCheckboxItem: import("react").ForwardRefExoticComponent<MenuCheckboxItemProps & import("react").RefAttributes<HTMLDivElement>>;
+interface MenuRadioGroupProps extends Omit<ComponentPropsWithoutRef<typeof Menu.RadioGroup>, "className"> {
+  className?: string;
+}
+/**
+ * Groups `MenuRadioItem`s into a single-choice set and owns its value:
+ * `value`/`defaultValue`/`onValueChange(value, details)`. Label the set with
+ * a `MenuGroupLabel` inside the group.
+ */
+declare const MenuRadioGroup: import("react").ForwardRefExoticComponent<MenuRadioGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+interface MenuRadioItemProps extends Omit<ComponentPropsWithoutRef<typeof Menu.RadioItem>, "className"> {
+  className?: string;
+}
+/**
+ * One option of a `MenuRadioGroup` — a dot fills the leading indicator
+ * column while selected. `value` is required; the menu stays open on click
+ * by default so the choice can be reconsidered without reopening.
+ */
+declare const MenuRadioItem: import("react").ForwardRefExoticComponent<MenuRadioItemProps & import("react").RefAttributes<HTMLDivElement>>;
+/**
+ * Groups the parts of a nested menu; renders no HTML. Place it among the
+ * parent's items with a `MenuSubmenuTrigger` and a nested `MenuPopup`
+ * inside. Keep nesting to one level — deeper trees are hard to steer
+ * (and to reach on touch screens). Accepts Base UI's SubmenuRoot props
+ * (`open`/`defaultOpen`/`onOpenChange`, `disabled`, `closeParentOnEsc`).
+ */
+declare const MenuSubmenuRoot: typeof Menu.SubmenuRoot;
+type MenuSubmenuRootProps = ComponentPropsWithoutRef<typeof Menu.SubmenuRoot>;
+interface MenuSubmenuTriggerProps extends Omit<ComponentPropsWithoutRef<typeof Menu.SubmenuTrigger>, "className"> {
+  /** Indent the label into the indicator column so it aligns with checkbox/radio items in the same menu. */
+  inset?: boolean;
+  className?: string;
+}
+/**
+ * The item that opens a submenu — a trailing chevron is appended
+ * automatically, and the row stays tinted (`data-popup-open`) while its
+ * submenu is open. Opens on hover after a short delay, on click, and with
+ * the right arrow key.
+ */
+declare const MenuSubmenuTrigger: import("react").ForwardRefExoticComponent<MenuSubmenuTriggerProps & import("react").RefAttributes<HTMLDivElement>>;
+//#endregion
+export { Menu$1 as Menu, MenuAlign, MenuCheckboxItem, MenuCheckboxItemProps, MenuGroup, MenuGroupLabel, MenuGroupLabelProps, MenuGroupProps, MenuHandle, MenuItem, MenuItemProps, MenuItemVariant, MenuItemVariantsOptions, MenuLinkItem, MenuLinkItemProps, MenuPopup, MenuPopupProps, MenuProps, MenuRadioGroup, MenuRadioGroupProps, MenuRadioItem, MenuRadioItemProps, MenuSeparator, MenuSeparatorProps, MenuShortcut, MenuShortcutProps, MenuSide, MenuSubmenuRoot, MenuSubmenuRootProps, MenuSubmenuTrigger, MenuSubmenuTriggerProps, MenuTrigger, MenuTriggerProps, createMenuHandle, menuItemVariants };

package/dist/components/Menu/Menu.js

@@ -0,0 +1,255 @@
+import { cn } from "../../lib/cn.js";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Menu } from "@base-ui/react/menu";
+//#region src/components/Menu/Menu.tsx
+/**
+* Groups the menu parts and owns the open state. A menu lists **actions**
+* (role `menu`); to pick a value that a field keeps showing, use Select.
+* This is Base UI's `Menu.Root` re-exported unchanged, so every root feature
+* is available: `open`/`defaultOpen`/`onOpenChange(open, details)`,
+* `modal` (defaults `true` — page scroll locks while open), `disabled`,
+* `loopFocus`, `orientation`, `highlightItemOnHover`, and
+* `handle`/`triggerId` for detached triggers.
+*/
+const Menu$1 = Menu.Root;
+/**
+* Creates a handle that links `Menu` with `MenuTrigger`s rendered elsewhere
+* in the tree (toolbars, table rows). Triggers may attach a `payload`, which
+* the `Menu` children render function receives.
+*/
+const createMenuHandle = Menu.createHandle;
+function CheckIcon(props) {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 2,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		...props,
+		children: /* @__PURE__ */ jsx("path", { d: "m5 13 4 4L19 7" })
+	});
+}
+function CircleIcon(props) {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 24 24",
+		fill: "currentColor",
+		"aria-hidden": "true",
+		...props,
+		children: /* @__PURE__ */ jsx("circle", {
+			cx: "12",
+			cy: "12",
+			r: "6"
+		})
+	});
+}
+function ChevronRightIcon(props) {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 2,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		...props,
+		children: /* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6" })
+	});
+}
+/**
+* The button that opens the menu. Ships unstyled so the visual comes from
+* composition — render the design system's Button:
+*
+*   <MenuTrigger render={<Button variant="outline" />}>Options</MenuTrigger>
+*
+* For the kebab/ellipsis pattern, Button's icon-only form already enforces
+* the accessible name:
+*
+*   <MenuTrigger render={<Button variant="ghost" iconOnly aria-label="Row actions" />}>
+*     <EllipsisIcon />
+*   </MenuTrigger>
+*
+* While its menu is open the element carries `data-popup-open`, the hook for
+* a pressed look (e.g. `className="data-popup-open:bg-muted"`). `openOnHover`
+* with `delay`/`closeDelay` (100/0ms defaults) is available but click-to-open
+* is the reliable default for action menus — hover menus misfire on the way
+* to other targets.
+*/
+const MenuTrigger = forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ jsx(Menu.Trigger, {
+	ref,
+	className,
+	...rest
+}));
+MenuTrigger.displayName = "MenuTrigger";
+const popupSurfaceClasses = "rounded-md border border-border bg-background p-1 font-sans text-sm text-foreground shadow-md outline-none";
+const popupBehaviorClasses = "min-w-32 max-h-[var(--available-height)] max-w-[var(--available-width)] overflow-y-auto scroll-py-1 origin-[var(--transform-origin)] motion-safe:transition-[scale,opacity] motion-safe:duration-150 motion-safe:ease-out data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0 data-instant:transition-none!";
+const adaptiveSideOffset = ({ side }) => side === "top" || side === "bottom" ? 4 : -4;
+const adaptiveAlignOffset = ({ side }) => side === "top" || side === "bottom" ? 0 : -4;
+/**
+* The floating list of menu items, with the portal and positioning plumbing
+* folded in. Anchored to its trigger by default; opens with a motion-safe
+* scale/fade from the anchor-facing corner. The same component nests inside
+* `MenuSubmenuRoot`, where its placement defaults switch to the submenu
+* conventions (inline-end side, overlapped edge, trigger-row alignment).
+*/
+const MenuPopup = forwardRef(({ side, align, sideOffset = side === void 0 ? adaptiveSideOffset : 4, alignOffset = side === void 0 ? adaptiveAlignOffset : 0, collisionPadding, anchor, keepMounted = false, container, className, children, ...rest }, ref) => /* @__PURE__ */ jsx(Menu.Portal, {
+	container,
+	keepMounted,
+	children: /* @__PURE__ */ jsx(Menu.Positioner, {
+		side,
+		align,
+		sideOffset,
+		alignOffset,
+		collisionPadding,
+		anchor,
+		className: "z-50 select-none outline-none",
+		children: /* @__PURE__ */ jsx(Menu.Popup, {
+			ref,
+			className: cn(popupSurfaceClasses, popupBehaviorClasses, className),
+			...rest,
+			children
+		})
+	})
+}));
+MenuPopup.displayName = "MenuPopup";
+const itemBaseClasses = "relative flex cursor-default items-center gap-2 rounded-md px-2 py-1.5 font-sans text-sm outline-none select-none scroll-my-1 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4";
+const itemVariantClasses = {
+	default: "text-foreground data-highlighted:bg-primary-50 [&_svg:not([class*='text-'])]:text-muted-foreground",
+	destructive: "text-error-700 data-highlighted:bg-error-50"
+};
+/**
+* Class list for an element styled as a menu item — for menu-shaped rows
+* that don't come from Base UI (command palettes, custom listboxes) so every
+* item row in the product shares one look.
+*/
+function menuItemVariants({ variant = "default", inset = false, className } = {}) {
+	return cn(itemBaseClasses, itemVariantClasses[variant], inset && "pl-8", className);
+}
+/**
+* One action in the menu. Children are free-form — a leading `<svg>` icon is
+* sized and muted automatically. Set `label` when children aren't plain text
+* so keyboard typeahead still matches, `disabled` for unavailable actions
+* (keep them visible so users can see what exists), and `closeOnClick={false}`
+* to keep the menu open after the action runs.
+*/
+const MenuItem = forwardRef(({ variant = "default", inset = false, className, ...rest }, ref) => /* @__PURE__ */ jsx(Menu.Item, {
+	ref,
+	className: cn(menuItemVariants({
+		variant,
+		inset
+	}), className),
+	...rest
+}));
+MenuItem.displayName = "MenuItem";
+/**
+* A navigation entry that keeps link semantics — it renders a real `<a>`
+* (never a button styled as one), so it supports open-in-new-tab, copy link,
+* and middle-click. Pass `href` directly, or compose a client-side router
+* link via `render={<Link to="…" />}`.
+*/
+const MenuLinkItem = forwardRef(({ inset = false, className, ...rest }, ref) => /* @__PURE__ */ jsx(Menu.LinkItem, {
+	ref,
+	className: cn(menuItemVariants({ inset }), className),
+	...rest
+}));
+MenuLinkItem.displayName = "MenuLinkItem";
+/**
+* Right-aligned keyboard hint inside an item (`⌘N`, `Ctrl+D`). Purely
+* visual — it does not register the shortcut; wire the actual key handling
+* in the app. Helper text mirrors Typography caption.
+*/
+const MenuShortcut = forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ jsx("span", {
+	ref,
+	className: cn("ml-auto pl-4 font-sans text-xs tracking-widest text-muted-foreground", className),
+	...rest
+}));
+MenuShortcut.displayName = "MenuShortcut";
+/** Groups related items under a `MenuGroupLabel`, announced together by assistive technology. */
+const MenuGroup = forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ jsx(Menu.Group, {
+	ref,
+	className,
+	...rest
+}));
+MenuGroup.displayName = "MenuGroup";
+/** Heading for a `MenuGroup` (or `MenuRadioGroup`) — visually a meta caption, wired to the group via `aria-labelledby`. */
+const MenuGroupLabel = forwardRef(({ inset = false, className, ...rest }, ref) => /* @__PURE__ */ jsx(Menu.GroupLabel, {
+	ref,
+	className: cn("px-2 py-1.5 font-sans text-xs font-medium text-muted-foreground", inset && "pl-8", className),
+	...rest
+}));
+MenuGroupLabel.displayName = "MenuGroupLabel";
+/** Divider between item groups, exposed to screen readers as a separator. */
+const MenuSeparator = forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ jsx(Menu.Separator, {
+	ref,
+	className: cn("-mx-1 my-1 h-px bg-border", className),
+	...rest
+}));
+MenuSeparator.displayName = "MenuSeparator";
+/**
+* An item that toggles a setting on or off — a check mark fills the leading
+* indicator column while `checked`. Control it with
+* `checked`/`defaultChecked`/`onCheckedChange`. It keeps the menu open on
+* click by default (Base UI's `closeOnClick={false}`) so several settings
+* can be flipped in one visit.
+*/
+const MenuCheckboxItem = forwardRef(({ className, children, ...rest }, ref) => /* @__PURE__ */ jsxs(Menu.CheckboxItem, {
+	ref,
+	className: cn(itemBaseClasses, itemVariantClasses.default, "pl-8", className),
+	...rest,
+	children: [/* @__PURE__ */ jsx(Menu.CheckboxItemIndicator, {
+		className: "absolute left-2 flex size-4 items-center justify-center text-primary",
+		children: /* @__PURE__ */ jsx(CheckIcon, {})
+	}), children]
+}));
+MenuCheckboxItem.displayName = "MenuCheckboxItem";
+/**
+* Groups `MenuRadioItem`s into a single-choice set and owns its value:
+* `value`/`defaultValue`/`onValueChange(value, details)`. Label the set with
+* a `MenuGroupLabel` inside the group.
+*/
+const MenuRadioGroup = forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ jsx(Menu.RadioGroup, {
+	ref,
+	className,
+	...rest
+}));
+MenuRadioGroup.displayName = "MenuRadioGroup";
+/**
+* One option of a `MenuRadioGroup` — a dot fills the leading indicator
+* column while selected. `value` is required; the menu stays open on click
+* by default so the choice can be reconsidered without reopening.
+*/
+const MenuRadioItem = forwardRef(({ className, children, ...rest }, ref) => /* @__PURE__ */ jsxs(Menu.RadioItem, {
+	ref,
+	className: cn(itemBaseClasses, itemVariantClasses.default, "pl-8", className),
+	...rest,
+	children: [/* @__PURE__ */ jsx(Menu.RadioItemIndicator, {
+		className: "absolute left-2 flex size-4 items-center justify-center text-primary",
+		children: /* @__PURE__ */ jsx(CircleIcon, { className: "size-2" })
+	}), children]
+}));
+MenuRadioItem.displayName = "MenuRadioItem";
+/**
+* Groups the parts of a nested menu; renders no HTML. Place it among the
+* parent's items with a `MenuSubmenuTrigger` and a nested `MenuPopup`
+* inside. Keep nesting to one level — deeper trees are hard to steer
+* (and to reach on touch screens). Accepts Base UI's SubmenuRoot props
+* (`open`/`defaultOpen`/`onOpenChange`, `disabled`, `closeParentOnEsc`).
+*/
+const MenuSubmenuRoot = Menu.SubmenuRoot;
+/**
+* The item that opens a submenu — a trailing chevron is appended
+* automatically, and the row stays tinted (`data-popup-open`) while its
+* submenu is open. Opens on hover after a short delay, on click, and with
+* the right arrow key.
+*/
+const MenuSubmenuTrigger = forwardRef(({ inset = false, className, children, ...rest }, ref) => /* @__PURE__ */ jsxs(Menu.SubmenuTrigger, {
+	ref,
+	className: cn(menuItemVariants({ inset }), "data-popup-open:bg-primary-50", className),
+	...rest,
+	children: [children, /* @__PURE__ */ jsx(ChevronRightIcon, { className: "ml-auto size-4 text-muted-foreground" })]
+}));
+MenuSubmenuTrigger.displayName = "MenuSubmenuTrigger";
+//#endregion
+export { Menu$1 as Menu, MenuCheckboxItem, MenuGroup, MenuGroupLabel, MenuItem, MenuLinkItem, MenuPopup, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuShortcut, MenuSubmenuRoot, MenuSubmenuTrigger, MenuTrigger, createMenuHandle, menuItemVariants, popupBehaviorClasses, popupSurfaceClasses };

package/dist/components/Menu/index.d.ts

@@ -0,0 +1,2 @@
+import { Menu, MenuAlign, MenuCheckboxItem, MenuCheckboxItemProps, MenuGroup, MenuGroupLabel, MenuGroupLabelProps, MenuGroupProps, MenuHandle, MenuItem, MenuItemProps, MenuItemVariant, MenuItemVariantsOptions, MenuLinkItem, MenuLinkItemProps, MenuPopup, MenuPopupProps, MenuProps, MenuRadioGroup, MenuRadioGroupProps, MenuRadioItem, MenuRadioItemProps, MenuSeparator, MenuSeparatorProps, MenuShortcut, MenuShortcutProps, MenuSide, MenuSubmenuRoot, MenuSubmenuRootProps, MenuSubmenuTrigger, MenuSubmenuTriggerProps, MenuTrigger, MenuTriggerProps, createMenuHandle, menuItemVariants } from "./Menu.js";
+export { Menu, type MenuAlign, MenuCheckboxItem, type MenuCheckboxItemProps, MenuGroup, MenuGroupLabel, type MenuGroupLabelProps, type MenuGroupProps, type MenuHandle, MenuItem, type MenuItemProps, type MenuItemVariant, type MenuItemVariantsOptions, MenuLinkItem, type MenuLinkItemProps, MenuPopup, type MenuPopupProps, type MenuProps, MenuRadioGroup, type MenuRadioGroupProps, MenuRadioItem, type MenuRadioItemProps, MenuSeparator, type MenuSeparatorProps, MenuShortcut, type MenuShortcutProps, type MenuSide, MenuSubmenuRoot, type MenuSubmenuRootProps, MenuSubmenuTrigger, type MenuSubmenuTriggerProps, MenuTrigger, type MenuTriggerProps, createMenuHandle, menuItemVariants };

package/dist/components/Menu/index.js

@@ -0,0 +1,2 @@
+import { Menu, MenuCheckboxItem, MenuGroup, MenuGroupLabel, MenuItem, MenuLinkItem, MenuPopup, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuShortcut, MenuSubmenuRoot, MenuSubmenuTrigger, MenuTrigger, createMenuHandle, menuItemVariants } from "./Menu.js";
+export { Menu, MenuCheckboxItem, MenuGroup, MenuGroupLabel, MenuItem, MenuLinkItem, MenuPopup, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuShortcut, MenuSubmenuRoot, MenuSubmenuTrigger, MenuTrigger, createMenuHandle, menuItemVariants };

package/dist/components/Popover/Popover.d.ts

@@ -0,0 +1,122 @@
+import { ComponentPropsWithoutRef } from "react";
+import { Popover } from "@base-ui/react/popover";
+//#region src/components/Popover/Popover.d.ts
+/**
+ * Groups the popover parts and owns the open state. Accepts Base UI's Root
+ * props: `open`/`defaultOpen`/`onOpenChange` for control, `modal` to lock
+ * scroll or trap focus, and `handle`/`triggerId` for detached triggers.
+ */
+declare const Popover$1: typeof Popover.Root;
+type PopoverProps = ComponentPropsWithoutRef<typeof Popover.Root>;
+/**
+ * Creates a handle that links `Popover` with `PopoverTrigger`s rendered
+ * elsewhere in the tree (toolbars, table rows). Triggers may attach a
+ * `payload`, which the `Popover` children render function receives.
+ */
+declare const createPopoverHandle: typeof Popover.createHandle;
+type PopoverHandle<Payload = unknown> = Popover.Handle<Payload>;
+interface PopoverTriggerProps extends Omit<ComponentPropsWithoutRef<typeof Popover.Trigger>, "className"> {
+  className?: string;
+}
+/**
+ * The button that opens the popover. Ships unstyled so the visual comes from
+ * composition — render the design system's Button:
+ *
+ *   <PopoverTrigger render={<Button variant="outline" />}>Filters</PopoverTrigger>
+ *
+ * While its popup is open the element carries `data-popup-open`, the hook for
+ * a pressed look (e.g. `className="data-popup-open:bg-muted"`). Hover-card
+ * behavior comes from `openOnHover` with its `delay`/`closeDelay` (300/0ms
+ * defaults) — reserve it for previews; interactive content should open on
+ * click so it can't vanish mid-interaction.
+ */
+declare const PopoverTrigger: import("react").ForwardRefExoticComponent<PopoverTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+type BasePositionerProps = ComponentPropsWithoutRef<typeof Popover.Positioner>;
+type PopoverSide = NonNullable<BasePositionerProps["side"]>;
+type PopoverAlign = NonNullable<BasePositionerProps["align"]>;
+interface PopoverPopupVariantsOptions {
+  className?: string;
+}
+/**
+ * Class list for an element styled as the popover panel — for floating
+ * surfaces that don't come from Base UI (static previews, custom
+ * floating-ui popups) so every popup in the product shares one look.
+ */
+declare function popoverPopupVariants({ className }?: PopoverPopupVariantsOptions): string;
+interface PopoverPopupProps extends Omit<ComponentPropsWithoutRef<typeof Popover.Popup>, "className"> {
+  /** Side of the anchor to place the popup on; flips automatically when there is no room. */
+  side?: PopoverSide;
+  /** How the popup lines up along the chosen side. */
+  align?: PopoverAlign;
+  /** Gap between anchor and popup in pixels. The default 8px leaves room for the `arrow`. */
+  sideOffset?: BasePositionerProps["sideOffset"];
+  /** Additional shift along the alignment axis in pixels. */
+  alignOffset?: BasePositionerProps["alignOffset"];
+  /** Minimum space kept from the viewport (or collision boundary) edges when repositioning. */
+  collisionPadding?: BasePositionerProps["collisionPadding"];
+  /** Position against this element instead of the trigger (e.g. an input while a toolbar button opens the popup). */
+  anchor?: BasePositionerProps["anchor"];
+  /** Keep the popup in the DOM while closed — for SEO or measuring; closed popups normally unmount. */
+  keepMounted?: boolean;
+  /**
+   * Portal destination. Defaults to `document.body`. When the popover renders
+   * open on first paint (`defaultOpen`) and the container mounts in the same
+   * commit, pass the element via callback-ref state — a `RefObject` to an
+   * ancestor is not attached yet when the portal first resolves, and it would
+   * silently fall back to `document.body`.
+   */
+  container?: ComponentPropsWithoutRef<typeof Popover.Portal>["container"];
+  /** Show a caret pointing at the anchor. */
+  arrow?: boolean;
+  /**
+   * Applied to the popup panel. Sizing hooks: the panel is content-sized up
+   * to 20rem — set `w-*`/`max-w-*` to change that, `w-[var(--anchor-width)]`
+   * to match the trigger width, or an inner `max-h-* overflow-y-auto`
+   * wrapper for scrollable content (the panel itself must not clip — the
+   * arrow hangs outside it).
+   */
+  className?: string;
+}
+/**
+ * The floating panel, with the portal and positioning plumbing folded in.
+ * Anchored to its trigger by default; opens with a motion-safe scale/fade
+ * from the anchor-facing corner. When the popover holds no `PopoverTitle`,
+ * name the panel for assistive tech with `aria-label`.
+ */
+declare const PopoverPopup: import("react").ForwardRefExoticComponent<PopoverPopupProps & import("react").RefAttributes<HTMLDivElement>>;
+interface PopoverTitleProps extends Omit<ComponentPropsWithoutRef<typeof Popover.Title>, "className"> {
+  className?: string;
+}
+/**
+ * Heading that names the popup — Base UI wires it to the panel via
+ * `aria-labelledby` automatically. An `<h2>` by default; pick the level from
+ * the surrounding outline with `render`, e.g. `render={<h3 />}`.
+ */
+declare const PopoverTitle: import("react").ForwardRefExoticComponent<PopoverTitleProps & import("react").RefAttributes<HTMLHeadingElement>>;
+interface PopoverDescriptionProps extends Omit<ComponentPropsWithoutRef<typeof Popover.Description>, "className"> {
+  className?: string;
+}
+/**
+ * Supporting copy announced with the popup — Base UI wires it via
+ * `aria-describedby` automatically.
+ */
+declare const PopoverDescription: import("react").ForwardRefExoticComponent<PopoverDescriptionProps & import("react").RefAttributes<HTMLParagraphElement>>;
+interface PopoverCloseProps extends Omit<ComponentPropsWithoutRef<typeof Popover.Close>, "className"> {
+  className?: string;
+}
+/**
+ * A button that closes the popup. Unstyled, like the trigger — compose the
+ * design system's Button for footer actions:
+ *
+ *   <PopoverClose render={<Button size="sm" variant="outline" />}>Done</PopoverClose>
+ *
+ * or borrow its classes for a corner icon dismiss, which needs an accessible
+ * name:
+ *
+ *   <PopoverClose aria-label="Close" className={buttonVariants({ variant: "ghost", size: "sm", iconOnly: true })}>
+ *     <XIcon />
+ *   </PopoverClose>
+ */
+declare const PopoverClose: import("react").ForwardRefExoticComponent<PopoverCloseProps & import("react").RefAttributes<HTMLButtonElement>>;
+//#endregion
+export { Popover$1 as Popover, PopoverAlign, PopoverClose, PopoverCloseProps, PopoverDescription, PopoverDescriptionProps, PopoverHandle, PopoverPopup, PopoverPopupProps, PopoverPopupVariantsOptions, PopoverProps, PopoverSide, PopoverTitle, PopoverTitleProps, PopoverTrigger, PopoverTriggerProps, createPopoverHandle, popoverPopupVariants };