@justanarthur/modo-ui 0.5.0 → 0.6.0-canary.0

package/dist/components/overlays/dropdown/index.d.ts

@@ -1,6 +1,6 @@
 import { MenuTriggerProps } from "@base-ui/react/menu";
-import { Menu } from "@base-ui/react/menu";
-import { ComponentProps, ForwardRefExoticComponent, HTMLAttributes as HTMLAttributes3, ReactNode as ReactNode3, RefAttributes, RefObject as RefObject2 } from "react";
+import { Menu as Menu2 } from "@base-ui/react/menu";
+import { ComponentProps as ComponentProps2, ForwardRefExoticComponent, HTMLAttributes as HTMLAttributes4, ReactNode as ReactNode4, RefAttributes, RefObject as RefObject5 } from "react";
 type SizeVariant = "default" | "compact";
 import { HTMLAttributes, InputHTMLAttributes } from "react";
 import { ForwardRefExoticComponent as ForwardRefExoticComponent_tcubfn } from "react";
@@ -44,10 +44,11 @@ interface MenuItemRenderOptions {
 	checkbox: boolean;
 	/** The item's checked state (radio and checkbox items). */
 	checked?: boolean;
-	/** The item's index — doubles as the radio value. */
-	value: number;
+	/** The radio value: the item's index, or a `Dropdown.RadioItem`'s own value. */
+	value: unknown;
 	disabled?: boolean;
-	label: string;
+	/** Typeahead text. Undefined for a children-based row: the primitive reads its text content. */
+	label?: string;
 	closeOnClick: boolean;
 	/** The row's activation. It goes on the primitive, not on `element`: Base
 	*  UI's Enter/Space activation calls the primitive's own `onClick` prop and
@@ -80,35 +81,215 @@ interface DropdownContextValue {
 	/** Local addition. Toggles the row at an AUTHORED index (see
 	*  `sourceIndex`). Present with `selfManaged`. */
 	toggleIndex?: (sourceIndex: number) => void;
+	/** Local addition. Keeps the highlight on a row while its submenu is open. */
+	pin?: (index: number, on: boolean) => void;
+	/** Local addition. A value-checked row (`Dropdown.CheckboxItem`,
+	*  `Dropdown.RadioItem`) reports itself for the merged selection background. */
+	reportChecked?: (index: number, on: boolean) => void;
 }
 declare function useDropdown(): DropdownContextValue;
 /** Null-safe context read for callers that render outside a provider. */
 declare function useDropdownMaybe(): DropdownContextValue | null;
-interface MenuItemProps extends HTMLAttributes2<HTMLDivElement> {
+interface MenuItemProps extends Omit<HTMLAttributes2<HTMLDivElement>, "onSelect"> {
 	/** Optional leading icon. When omitted, the row renders text-only with no
 	*  reserved icon column. */
 	icon?: IconComponent;
-	label: string;
-	index: number;
+	/** The row text, also its typeahead text and what a `Dropdown.Search filter` matches. Omit it to pass the row's content as `children`. */
+	label?: string;
+	/** Position among the panel's rows, for the index-based selection (`checkedIndex`). Omitted, the row takes its place in document order. */
+	index?: number;
+	/** The row's content when there is no `label`: text, or any nodes (an svg among them takes the icon size). */
+	children?: ReactNode2;
 	/** When a boolean, the item is a radio-style option (role="menuitemradio"
 	*  with aria-checked). When undefined, it is a plain action item
 	*  (role="menuitem"), unless the panel owns the selection — then the row
 	*  reads its checked state off the panel and toggles it on activation. */
 	checked?: boolean;
-	onSelect?: () => void;
+	/** Called when the row is picked, by pointer or keyboard. Call `event.preventDefault()` to keep the menu open. */
+	onSelect?: (event: Event) => void;
+	/** Dims the row; the pointer and the keyboard skip it. Defaults to `false`. */
 	disabled?: boolean;
 	/** Popup-only (inside DropdownContent): whether activating the item closes
-	*  the menu. Ignored in the inline Dropdown panel. @default true */
+	*  the menu. Ignored in the inline Dropdown panel. Defaults to `true` (`false` in multiple selection). */
 	closeOnClick?: boolean;
+	/** Indents the row to the label column of rows with an icon. Defaults to `false`. */
+	inset?: boolean;
+	/** A keyboard shortcut shown muted at the row's end, e.g. `⌘K` (see Dropdown.Shortcut). */
+	shortcut?: ReactNode2;
 	/** Internal: the row's authored index, stamped by a filtering panel that
 	*  re-indexed the visible rows. Selection is keyed on it. */
 	sourceIndex?: number;
+	/** Internal: the selection primitive a `Dropdown.CheckboxItem` / `Dropdown.RadioItem` forces. */
+	kind?: "checkbox" | "radio";
+	/** Internal: a `Dropdown.RadioItem`'s value. */
+	value?: unknown;
+	/** Internal: keeps the panel's highlight on the row (a `Dropdown.SubTrigger` whose submenu is open). */
+	pinned?: boolean;
+}
+interface DropdownShortcutProps extends HTMLAttributes2<HTMLElement> {
+	/** The keys, e.g. `⇧⌘P`. */
+	children?: ReactNode2;
+	/** Extra classes. */
+	className?: string;
 }
+/** A muted caption at the end of a row: the row's keyboard shortcut. */
+declare const DropdownShortcut: ForwardRefExoticComponent_tcubfn2<DropdownShortcutProps & RefAttributes_miuf562<HTMLElement>>;
 declare const MenuItem: ForwardRefExoticComponent_tcubfn2<MenuItemProps & RefAttributes_miuf562<HTMLDivElement>>;
+import { Menu } from "@base-ui/react/menu";
+import { ComponentProps, HTMLAttributes as HTMLAttributes3, ReactNode as ReactNode3, RefObject as RefObject4 } from "react";
 import { JSX as JSX_1kxb2 } from "react";
-interface DropdownProps extends HTMLAttributes3<HTMLDivElement> {
-	/** `Dropdown.Item` rows, plus `Dropdown.Label` and `Dropdown.Separator`. */
+import { ForwardRefExoticComponent as ForwardRefExoticComponent_tcubfn3 } from "react";
+import { RefAttributes as RefAttributes_miuf563 } from "react";
+type MenuPositionerProps = ComponentProps<typeof Menu.Positioner>;
+type Element_12xgc2 = JSX_1kxb2["Element"];
+interface DropdownGroupProps extends HTMLAttributes3<HTMLDivElement> {
+	/** Rows, with an optional `Dropdown.Label` first: it becomes the group's accessible name. */
+	children?: ReactNode3;
+	/** Extra classes. */
+	className?: string;
+}
+/** A run of related rows (role="group"), named by the `Dropdown.Label` inside it. */
+declare const DropdownGroup: ForwardRefExoticComponent_tcubfn3<DropdownGroupProps & RefAttributes_miuf563<HTMLDivElement>>;
+interface DropdownCheckboxItemProps extends Omit<HTMLAttributes3<HTMLDivElement>, "onSelect" | "defaultChecked"> {
+	/** Whether the row is checked. Pair with `onCheckedChange`. */
+	checked?: boolean;
+	/** Initial checked state, for an uncontrolled row. Defaults to `false`. */
+	defaultChecked?: boolean;
+	/** Called with the new state when the row is toggled. */
+	onCheckedChange?: (checked: boolean) => void;
+	/** Optional leading icon. */
+	icon?: IconComponent;
+	/** The row text. Omit it to pass the row's content as `children`. */
+	label?: string;
+	/** The row's content when there is no `label`. */
+	children?: ReactNode3;
+	/** Position among the panel's rows. Omitted, the row takes its place in document order. */
+	index?: number;
+	/** Called when the row is picked, before it toggles. With `closeOnClick`, `event.preventDefault()` keeps the menu open. */
+	onSelect?: (event: Event) => void;
+	/** Dims the row; the pointer and the keyboard skip it. Defaults to `false`. */
+	disabled?: boolean;
+	/** Whether toggling closes the menu. Defaults to `false`. */
+	closeOnClick?: boolean;
+	/** Indents the row to the label column of rows with an icon. Defaults to `false`. */
+	inset?: boolean;
+	/** A keyboard shortcut shown muted at the row's end. */
+	shortcut?: ReactNode3;
+	/** Extra classes for the row. */
+	className?: string;
+}
+/** A row that toggles on and off by itself (role="menuitemcheckbox"), keyed on its own state rather than an index. */
+declare const DropdownCheckboxItem: ForwardRefExoticComponent_tcubfn3<DropdownCheckboxItemProps & RefAttributes_miuf563<HTMLDivElement>>;
+interface DropdownRadioGroupProps extends Omit<HTMLAttributes3<HTMLDivElement>, "defaultValue" | "onChange"> {
+	/** The picked row's value. Pair with `onValueChange`. */
+	value?: string;
+	/** Initial value, for an uncontrolled group. */
+	defaultValue?: string;
+	/** Called with the picked row's value. */
+	onValueChange?: (value: string) => void;
+	/** `Dropdown.RadioItem` rows, plus an optional `Dropdown.Label`. */
+	children?: ReactNode3;
+	/** Extra classes. */
+	className?: string;
+}
+/** One choice among its `Dropdown.RadioItem` rows, keyed on their `value`. */
+declare const DropdownRadioGroup: ForwardRefExoticComponent_tcubfn3<DropdownRadioGroupProps & RefAttributes_miuf563<HTMLDivElement>>;
+interface DropdownRadioItemProps extends Omit<HTMLAttributes3<HTMLDivElement>, "onSelect"> {
+	/** The value this row stands for in its `Dropdown.RadioGroup`. */
+	value: string;
+	/** Optional leading icon. */
+	icon?: IconComponent;
+	/** The row text. Omit it to pass the row's content as `children`. */
+	label?: string;
+	/** The row's content when there is no `label`. */
+	children?: ReactNode3;
+	/** Position among the panel's rows. Omitted, the row takes its place in document order. */
+	index?: number;
+	/** Called when the row is picked, before the group's value changes. Call `event.preventDefault()` to keep the menu open. */
+	onSelect?: (event: Event) => void;
+	/** Dims the row; the pointer and the keyboard skip it. Defaults to `false`. */
+	disabled?: boolean;
+	/** Whether picking the row closes the menu. Defaults to `true`. */
+	closeOnClick?: boolean;
+	/** Indents the row to the label column of rows with an icon. Defaults to `false`. */
+	inset?: boolean;
+	/** A keyboard shortcut shown muted at the row's end. */
+	shortcut?: ReactNode3;
+	/** Extra classes for the row. */
+	className?: string;
+}
+/** A row of a `Dropdown.RadioGroup` (role="menuitemradio"), checked while the group's value is its `value`. */
+declare const DropdownRadioItem: ForwardRefExoticComponent_tcubfn3<DropdownRadioItemProps & RefAttributes_miuf563<HTMLDivElement>>;
+interface DropdownSubProps {
+	/** `Dropdown.SubTrigger` and `Dropdown.SubContent`. */
 	children: ReactNode3;
+	/** Controlled open state. Pair with `onOpenChange`. */
+	open?: boolean;
+	/** Initial open state, for an uncontrolled submenu. Defaults to `false`. */
+	defaultOpen?: boolean;
+	/** Called when the submenu opens or closes. */
+	onOpenChange?: (open: boolean) => void;
+	/** Disables the submenu. Defaults to `false`. */
+	disabled?: boolean;
+}
+/** A submenu: its trigger row and its panel. Lives inside `Dropdown.Content` (or another submenu). */
+declare function DropdownSub({ children, open, defaultOpen, onOpenChange, disabled }: DropdownSubProps): Element_12xgc2;
+interface DropdownSubTriggerProps extends Omit<HTMLAttributes3<HTMLDivElement>, "onSelect"> {
+	/** Optional leading icon. */
+	icon?: IconComponent;
+	/** The row text. Omit it to pass the row's content as `children`. */
+	label?: string;
+	/** The row's content when there is no `label`. */
+	children?: ReactNode3;
+	/** Position among the panel's rows. Omitted, the row takes its place in document order. */
+	index?: number;
+	/** Dims the row; the pointer and the keyboard skip it. Defaults to `false`. */
+	disabled?: boolean;
+	/** Indents the row to the label column of rows with an icon. Defaults to `false`. */
+	inset?: boolean;
+	/** Open the submenu when the pointer rests on the row. Defaults to `true`. */
+	openOnHover?: boolean;
+	/** How long the pointer rests before it opens, in ms. Defaults to `100`. */
+	delay?: number;
+	/** How long before a hover-opened submenu closes once the pointer leaves, in ms. Defaults to `0`. */
+	closeDelay?: number;
+	/** Extra classes for the row. */
+	className?: string;
+}
+/**
+* The row that opens a submenu, with a trailing chevron: ArrowRight, a press
+* or a resting pointer opens it, ArrowLeft closes it. Its row stays lit while
+* the submenu is open.
+*/
+declare const DropdownSubTrigger: ForwardRefExoticComponent_tcubfn3<DropdownSubTriggerProps & RefAttributes_miuf563<HTMLDivElement>>;
+interface DropdownSubContentProps {
+	/** Rows: `Dropdown.Item`, `Dropdown.CheckboxItem`, `Dropdown.RadioGroup`, `Dropdown.Group`, `Dropdown.Label`, `Dropdown.Separator`, another `Dropdown.Sub`. */
+	children: ReactNode3;
+	/** Extra classes for the submenu surface — it is 14rem wide by default. */
+	className?: string;
+	/** Side of the trigger row the submenu prefers. Defaults to `"inline-end"`. */
+	side?: MenuPositionerProps["side"];
+	/** Alignment against the trigger row. Defaults to `"start"`. */
+	align?: MenuPositionerProps["align"];
+	/** Gap to the parent menu, in px: the goo neck's length. Defaults to `8`. */
+	sideOffset?: number;
+	/** Shift along the trigger row, in px; `-4` lines the first row up with the trigger. Defaults to `-4`. */
+	alignOffset?: number;
+	/** Where the submenu grows from (see Morph): its trigger row, its own center, a viewport edge, or a ref to any element. Defaults to `'trigger'`. */
+	from?: "trigger" | "center" | "top" | "right" | "bottom" | "left" | RefObject4<HTMLElement | null>;
+	/** How it grows (see Morph): with the liquid goo neck, a plain morph, a slide or a fade. Defaults to `'goo'`. */
+	effect?: "goo" | "morph" | "slide" | "fade";
+	/** Spring tier of a plain morph, slide or fade; goo runs on its own `spring.goo`. Defaults to `'moderate'`. */
+	tier?: "moderate" | "slow";
+	/** Keep the rows mounted (hidden) while the submenu is closed, so rows that run their own state keep it across opens. Defaults to `false`. */
+	keepMounted?: boolean;
+}
+/** The submenu's panel: the same rows and systems as `Dropdown.Content`, lifted 2 levels above the menu it came from. */
+declare const DropdownSubContent: ForwardRefExoticComponent_tcubfn3<DropdownSubContentProps & RefAttributes_miuf563<HTMLDivElement>>;
+import { JSX as JSX_1kxb3 } from "react";
+interface DropdownProps extends HTMLAttributes4<HTMLDivElement> {
+	/** `Dropdown.Item` rows, plus `Dropdown.Label` and `Dropdown.Separator`. */
+	children: ReactNode4;
 	/** The checked row: drives the animated selected background and the rows' radio semantics. */
 	checkedIndex?: number;
 	/** Uncontrolled twin of `checkedIndex`: the panel owns the selection, so rows need no `checked` or `onSelect` of their own. */
@@ -127,7 +308,7 @@ interface DropdownProps extends HTMLAttributes3<HTMLDivElement> {
 	className?: string;
 }
 type DropdownComponent = ForwardRefExoticComponent<DropdownProps & RefAttributes<HTMLDivElement>> & {
-	Menu: typeof DropdownMenu;
+	Menu2: typeof DropdownMenu;
 	Trigger: typeof DropdownTrigger;
 	Content: typeof DropdownContent;
 	Item: typeof MenuItem;
@@ -135,6 +316,14 @@ type DropdownComponent = ForwardRefExoticComponent<DropdownProps & RefAttributes
 	Separator: typeof DropdownSeparator;
 	Search: typeof DropdownSearch;
 	Empty: typeof DropdownEmpty;
+	Group: typeof DropdownGroup;
+	Shortcut: typeof DropdownShortcut;
+	CheckboxItem: typeof DropdownCheckboxItem;
+	RadioGroup: typeof DropdownRadioGroup;
+	RadioItem: typeof DropdownRadioItem;
+	Sub: typeof DropdownSub;
+	SubTrigger: typeof DropdownSubTrigger;
+	SubContent: typeof DropdownSubContent;
 };
 /**
 * A menu in two forms: an inline panel that sits in the page, or a popup on
@@ -153,18 +342,42 @@ type DropdownComponent = ForwardRefExoticComponent<DropdownProps & RefAttributes
 * the query too, keeping only the rows whose `label` matches and showing
 * `Dropdown.Empty` when none do.
 *
-* Statics: Dropdown.Menu (the popup root: open, defaultOpen, onOpenChange,
-* disabled), Dropdown.Trigger (render), Dropdown.Content (the popup panel:
-* side, align, sideOffset and the morph options from, effect, hideSource, tier),
-* Dropdown.Item (a row: index, label, icon, checked, onSelect, disabled),
-* Dropdown.Label, Dropdown.Separator, Dropdown.Search and Dropdown.Empty.
+* Rows also come shadcn-style: children instead of a `label`, no `index` (a
+* row takes its place in document order, so the hover, the keyboard ring and
+* the selection backgrounds still find it, inside groups and behind
+* conditions alike), `inset` to line up with rows that have an icon and a
+* trailing `shortcut`. `Dropdown.CheckboxItem` and `Dropdown.RadioGroup` /
+* `Dropdown.RadioItem` select by their own state and value instead of by
+* index, their checked rows melting into one background like a multiple
+* selection. A `Dropdown.Sub` opens a submenu from its trigger row (ArrowRight,
+* a press, or a resting pointer) that grows out of that row and lifts above
+* the menu, with a highlight and a keyboard ring of its own. Every popup
+* lifts 2 surface levels off whatever it opens over, a Dialog included.
+*
+* Statics:
+* - `Dropdown.Menu` — the popup root: `open`, `defaultOpen`, `onOpenChange`, `disabled`, `size`.
+* - `Dropdown.Trigger` — the trigger: `render` or `asChild`.
+* - `Dropdown.Content` — the popup panel: `side`, `align`, `sideOffset`, the
+*   index selection, and the morph options `from`, `effect`, `hideSource`, `tier`.
+* - `Dropdown.Item` — a row: `label` or `children`, `index`, `icon`, `inset`,
+*   `shortcut`, `checked`, `onSelect`, `closeOnClick`, `disabled`.
+* - `Dropdown.CheckboxItem` — a row toggling itself: `checked`, `defaultChecked`, `onCheckedChange`.
+* - `Dropdown.RadioGroup` / `Dropdown.RadioItem` — one choice by value: `value`,
+*   `defaultValue`, `onValueChange` on the group, `value` on each row.
+* - `Dropdown.Group` / `Dropdown.Label` — a named run of rows and its caption (`inset`).
+* - `Dropdown.Separator` — a rule between runs.
+* - `Dropdown.Shortcut` — a muted caption at a row's end.
+* - `Dropdown.Sub` / `Dropdown.SubTrigger` / `Dropdown.SubContent` — a submenu:
+*   its state, its trigger row (`openOnHover`, `delay`), its panel (`side`,
+*   `align`, `sideOffset`, `alignOffset`, `from`, `effect`, `tier`).
+* - `Dropdown.Search` / `Dropdown.Empty` — a filter field and its no-match row.
 *
 * @example {@include ./examples.mdx}
 */
 declare const Dropdown: DropdownComponent;
 interface DropdownMenuProps {
 	/** `Dropdown.Trigger` and `Dropdown.Content`. */
-	children: ReactNode3;
+	children: ReactNode4;
 	/** Controlled open state. Pair with `onOpenChange`. */
 	open?: boolean;
 	/** Initial open state — uncontrolled. Defaults to `false`. */
@@ -176,14 +389,17 @@ interface DropdownMenuProps {
 	/** Pins trigger-side content and the portalled popup rows to one step of the size ladder (default 36px, compact 28px — see Sizes). Omitted, they follow the surrounding SizeProvider. */
 	size?: SizeVariant;
 }
-type Element_12xgc2 = JSX_1kxb2["Element"];
-declare function DropdownMenu({ children, open: openProp, defaultOpen, onOpenChange, disabled, size }: DropdownMenuProps): Element_12xgc2;
-type DropdownTriggerProps = MenuTriggerProps;
-declare const DropdownTrigger: Menu.Trigger;
-type MenuPositionerProps = ComponentProps<typeof Menu.Positioner>;
+type Element_12xgc3 = JSX_1kxb3["Element"];
+declare function DropdownMenu({ children, open: openProp, defaultOpen, onOpenChange, disabled, size }: DropdownMenuProps): Element_12xgc3;
+type DropdownTriggerProps = MenuTriggerProps & {
+	/** Compose onto the single child instead of `render`. Defaults to `false`. */
+	asChild?: boolean;
+};
+declare const DropdownTrigger: ForwardRefExoticComponent<Omit<DropdownTriggerProps, "ref"> & RefAttributes<HTMLButtonElement>>;
+type MenuPositionerProps2 = ComponentProps2<typeof Menu2.Positioner>;
 interface DropdownContentProps {
 	/** `Dropdown.Item` rows, plus `Dropdown.Label`, `Dropdown.Separator`, `Dropdown.Search`, `Dropdown.Empty`. */
-	children: ReactNode3;
+	children: ReactNode4;
 	/** Extra classes for the popup surface. */
 	className?: string;
 	/** Index of the checked item. Drives the animated selected background and
@@ -202,21 +418,31 @@ interface DropdownContentProps {
 	/** Called with every checked row after a toggle. */
 	onCheckedIndicesChange?: (indices: number[]) => void;
 	/** Side of the trigger the popup prefers. Defaults to `"bottom"`. */
-	side?: MenuPositionerProps["side"];
+	side?: MenuPositionerProps2["side"];
 	/** Alignment against the trigger. Defaults to `"start"`. */
-	align?: MenuPositionerProps["align"];
+	align?: MenuPositionerProps2["align"];
 	/** Gap to the trigger, in px. Ignored when the menu opens in place over its trigger (`effect="morph"` with `hideSource`). Defaults to `6`. */
 	sideOffset?: number;
 	/** Where the menu grows from (see Morph): the trigger, the pointer, its own center, a viewport edge, or a ref to any element. Defaults to `'trigger'`. */
-	from?: "trigger" | "pointer" | "center" | "top" | "right" | "bottom" | "left" | RefObject2<HTMLElement | null>;
+	from?: "trigger" | "pointer" | "center" | "top" | "right" | "bottom" | "left" | RefObject5<HTMLElement | null>;
 	/** How it grows (see Morph): with the liquid goo neck, a plain morph, a slide or a fade. Defaults to `'goo'`. */
 	effect?: "goo" | "morph" | "slide" | "fade";
 	/** Hide the trigger while open, so it reads as turning into the menu. Defaults to `false`. */
 	hideSource?: boolean;
 	/** Spring tier of a plain morph, slide or fade; goo runs on its own `spring.goo`. Defaults to `'moderate'`. */
 	tier?: "moderate" | "slow";
+	/** Keep the rows mounted (hidden) while the menu is closed, so rows that run their own state — `Dropdown.CheckboxItem defaultChecked`, `Dropdown.RadioGroup defaultValue`, an uncontrolled `Dropdown.Sub` — keep it across opens. Defaults to `false`. */
+	keepMounted?: boolean;
 }
 declare const DropdownContent: ForwardRefExoticComponent<DropdownContentProps & RefAttributes<HTMLDivElement>>;
-declare const DropdownLabel: ForwardRefExoticComponent<HTMLAttributes3<HTMLDivElement> & RefAttributes<HTMLDivElement>>;
-declare const DropdownSeparator: ForwardRefExoticComponent<HTMLAttributes3<HTMLDivElement> & RefAttributes<HTMLDivElement>>;
-export { Dropdown, DropdownContent, DropdownContentProps, DropdownContextValue, DropdownEmpty, DropdownLabel, DropdownMenu, DropdownMenuProps, DropdownProps, DropdownSearch, DropdownSearchProps, DropdownSeparator, DropdownTrigger, DropdownTriggerProps, MenuItem, MenuItemRenderOptions, Dropdown as default, useDropdown, useDropdownMaybe };
+interface DropdownLabelProps extends HTMLAttributes4<HTMLDivElement> {
+	/** The caption. */
+	children?: ReactNode4;
+	/** Indents the caption to the label column of rows with an icon. Defaults to `false`. */
+	inset?: boolean;
+	/** Extra classes. */
+	className?: string;
+}
+declare const DropdownLabel: ForwardRefExoticComponent<DropdownLabelProps & RefAttributes<HTMLDivElement>>;
+declare const DropdownSeparator: ForwardRefExoticComponent<HTMLAttributes4<HTMLDivElement> & RefAttributes<HTMLDivElement>>;
+export { Dropdown, DropdownCheckboxItem, DropdownCheckboxItemProps, DropdownContent, DropdownContentProps, DropdownContextValue, DropdownEmpty, DropdownGroup, DropdownGroupProps, DropdownLabel, DropdownLabelProps, DropdownMenu, DropdownMenuProps, DropdownProps, DropdownRadioGroup, DropdownRadioGroupProps, DropdownRadioItem, DropdownRadioItemProps, DropdownSearch, DropdownSearchProps, DropdownSeparator, DropdownShortcut, DropdownShortcutProps, DropdownSub, DropdownSubContent, DropdownSubContentProps, DropdownSubProps, DropdownSubTrigger, DropdownSubTriggerProps, DropdownTrigger, DropdownTriggerProps, MenuItem, MenuItemProps, MenuItemRenderOptions, Dropdown as default, useDropdown, useDropdownMaybe };

package/dist/components/overlays/dropdown/index.js

@@ -3,7 +3,15 @@ import {
   DropdownEmpty2,
   useDropdown2,
   useDropdownMaybe2,
+  DropdownShortcut2,
   MenuItem2,
+  DropdownGroup2,
+  DropdownCheckboxItem2,
+  DropdownRadioGroup2,
+  DropdownRadioItem2,
+  DropdownSub2,
+  DropdownSubTrigger2,
+  DropdownSubContent2,
   Dropdown2,
   DropdownMenu2,
   DropdownTrigger2,
@@ -11,31 +19,48 @@ import {
   DropdownLabel2,
   DropdownSeparator2,
   dropdown_default
-} from "../../../shared/components-a86dytt0.js";
-import"../../../shared/components-5xc2j8jz.js";
-import"../../../shared/components-zrkzcayz.js";
-import"../../../shared/components-0q0sqfh4.js";
-import"../../../shared/components-kvr7f9hy.js";
-import"../../../shared/components-chacnk61.js";
-import"../../../shared/components-59efxjd9.js";
-import"../../../shared/components-hqeq3w9q.js";
-import"../../../shared/components-jjw69c4c.js";
-import"../../../shared/components-n7mjr357.js";
-import"../../../shared/components-men63rwj.js";
-import"../../../shared/components-0sn7ypjw.js";
-import"../../../shared/components-hawvy2qz.js";
-import"../../../shared/components-cv16mryv.js";
-import"../../../shared/components-vc7vq5nz.js";
-import"../../../shared/components-zx6b6yby.js";
-import"../../../shared/components-ezxhrmer.js";
+} from "../../../shared/components-c96g82th.js";
+import"../../../shared/components-8tt3xbb5.js";
+import"../../../shared/components-4bwsd46w.js";
+import"../../../shared/components-tz4gaf1v.js";
+import"../../../shared/components-8nwsqjn8.js";
+import"../../../shared/components-9as3rf68.js";
+import"../../../shared/components-h6p86be3.js";
+import"../../../shared/components-vf45j12c.js";
+import"../../../shared/components-dhgk6mbt.js";
+import"../../../shared/components-4y816hwp.js";
+import"../../../shared/components-b1e239g3.js";
+import"../../../shared/components-jqpefjsn.js";
+import"../../../shared/components-qdm3yh26.js";
+import"../../../shared/components-pw06rbxq.js";
+import"../../../shared/components-yhgq0qxx.js";
+import"../../../shared/components-awra5sff.js";
+import"../../../shared/components-dcc02hs2.js";
+import"../../../shared/components-tz1fv35x.js";
+import"../../../shared/components-2z48g4fp.js";
+import"../../../shared/components-drxrtnp2.js";
+import"../../../shared/components-de99ykt7.js";
+import"../../../shared/components-3ey0hzpb.js";
+import"../../../shared/components-h83az0bz.js";
+import"../../../shared/components-34txk9rj.js";
+import"../../../shared/components-78x40gee.js";
+import"../../../shared/components-jcnjay5g.js";
 export {
   Dropdown2 as Dropdown,
+  DropdownCheckboxItem2 as DropdownCheckboxItem,
   DropdownContent2 as DropdownContent,
   DropdownEmpty2 as DropdownEmpty,
+  DropdownGroup2 as DropdownGroup,
   DropdownLabel2 as DropdownLabel,
   DropdownMenu2 as DropdownMenu,
+  DropdownRadioGroup2 as DropdownRadioGroup,
+  DropdownRadioItem2 as DropdownRadioItem,
   DropdownSearch2 as DropdownSearch,
   DropdownSeparator2 as DropdownSeparator,
+  DropdownShortcut2 as DropdownShortcut,
+  DropdownSub2 as DropdownSub,
+  DropdownSubContent2 as DropdownSubContent,
+  DropdownSubTrigger2 as DropdownSubTrigger,
   DropdownTrigger2 as DropdownTrigger,
   MenuItem2 as MenuItem,
   dropdown_default as default,

package/dist/components/overlays/popover/index.d.ts

@@ -1,4 +1,5 @@
-import { HTMLAttributes, ReactNode as ReactNode2, RefObject } from "react";
+import { Popover as PopoverPrimitive } from "@base-ui/react/popover";
+import { ComponentProps, HTMLAttributes, ReactNode as ReactNode2, RefObject } from "react";
 import { ButtonHTMLAttributes, ReactElement, ReactNode } from "react";
 interface SlotProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 	/** The element that becomes the control, e.g. a Button. */
@@ -21,14 +22,30 @@ interface PopoverTriggerProps extends SlotProps {
 }
 declare const PopoverTrigger: ForwardRefExoticComponent_tcubfn<PopoverTriggerProps & RefAttributes_miuf56<HTMLButtonElement>>;
 declare const PopoverClose: ForwardRefExoticComponent_tcubfn<SlotProps & RefAttributes_miuf56<HTMLButtonElement>>;
+type PositionerProps = ComponentProps<typeof PopoverPrimitive.Positioner>;
+type PopupProps = ComponentProps<typeof PopoverPrimitive.Popup>;
+/** What the panel is positioned against: an element, a ref to one, a virtual element (`{ getBoundingClientRect }`), or a function returning either. */
+type PopoverAnchor = PositionerProps["anchor"];
 interface PopoverContentProps extends HTMLAttributes<HTMLDivElement> {
-	/** Side of the trigger the panel opens on; it flips when there is no room. Defaults to `'bottom'`. */
+	/** Side of the anchor the panel opens on; it flips when there is no room. Defaults to `'bottom'`. */
 	side?: "top" | "right" | "bottom" | "left";
 	/** Alignment along that side. Defaults to `'center'`, or `'start'` when the panel opens in place (`effect="morph"` with `hideSource`). */
 	align?: "start" | "center" | "end";
-	/** Gap between trigger and panel in px — the length of the goo neck. Ignored when the panel opens in place over its trigger (`effect="morph"` with `hideSource`). Defaults to `12`. */
+	/** Gap between anchor and panel in px — the length of the goo neck. Ignored when the panel opens in place over its trigger (`effect="morph"` with `hideSource`). Defaults to `12`. */
 	sideOffset?: number;
-	/** Where the panel grows from (see Morph): the pressed trigger, the press point, its own center, a viewport edge, or a ref to any element. Defaults to `'trigger'`. */
+	/** Shift along the aligned edge in px, after `align` (a number, or Base UI's function of side, align and sizes). Defaults to `0`. */
+	alignOffset?: PositionerProps["alignOffset"];
+	/** What the panel is positioned against instead of the trigger: an element, a ref to one, a virtual element (`{ getBoundingClientRect }`) or a function returning either. An element anchor is also where the panel grows from, and sets `--anchor-width` / `--anchor-height` for sizing the panel to it. Defaults to the trigger. */
+	anchor?: PopoverAnchor;
+	/** Space kept between the panel and the edge of its collision boundary, in px or per side. Defaults to `5`. */
+	collisionPadding?: PositionerProps["collisionPadding"];
+	/** The area the panel must stay inside: an element, several, or a rect. Defaults to `'clipping-ancestors'`. */
+	collisionBoundary?: PositionerProps["collisionBoundary"];
+	/** Where focus goes when the panel opens: a ref, `false` to leave it, `true` for the default, or a function of how it opened (`'mouse'`, `'touch'`, `'pen'`, `'keyboard'`). Defaults to the panel itself. */
+	initialFocus?: PopupProps["initialFocus"];
+	/** Where focus goes when the panel closes: a ref, `false` to leave it, `true` for the default, or a function of how it closed. Defaults to the trigger. */
+	finalFocus?: PopupProps["finalFocus"];
+	/** Where the panel grows from (see Morph): the pressed trigger, the press point, its own center, a viewport edge, or a ref to any element. Defaults to the `anchor` when it is an element, otherwise `'trigger'`. */
 	from?: "trigger" | "pointer" | "center" | "top" | "right" | "bottom" | "left" | RefObject<HTMLElement | null>;
 	/** How it grows (see Morph): with the liquid goo neck, a plain morph, a slide or a fade. Defaults to `'goo'`. */
 	effect?: "goo" | "morph" | "slide" | "fade";
@@ -46,13 +63,15 @@ interface PopoverContentProps extends HTMLAttributes<HTMLDivElement> {
 declare const PopoverContent: ForwardRefExoticComponent_tcubfn<PopoverContentProps & RefAttributes_miuf56<HTMLDivElement>>;
 declare const PopoverTitle: ForwardRefExoticComponent_tcubfn<HTMLAttributes<HTMLHeadingElement> & RefAttributes_miuf56<HTMLHeadingElement>>;
 declare const PopoverDescription: ForwardRefExoticComponent_tcubfn<HTMLAttributes<HTMLParagraphElement> & RefAttributes_miuf56<HTMLParagraphElement>>;
+/** What `onOpenChange` receives besides the open state: Base UI's Popover change details. */
+type PopoverOpenChangeDetails = PopoverPrimitive.Root.ChangeEventDetails;
 interface PopoverProps {
 	/** Controlled open state. Pair with `onOpenChange`. */
 	open?: boolean;
 	/** Initial open state, for an uncontrolled popover. Defaults to `false`. */
 	defaultOpen?: boolean;
-	/** Called when the popover opens or closes. */
-	onOpenChange?: (open: boolean) => void;
+	/** Called when the popover opens or closes, with Base UI's change details: `reason` (`'escape-key'`, `'outside-press'`, `'trigger-press'`, …), the `event`, and `cancel()` to keep it as it is. */
+	onOpenChange?: (open: boolean, details: PopoverOpenChangeDetails) => void;
 	/** Trap focus and block page interaction while open. Defaults to `false`. */
 	modal?: boolean;
 	/** The trigger and the panel — `Popover.Trigger` plus a `Popover.Content`. */
@@ -70,13 +89,16 @@ type Element_12xgc = JSX_1kxb["Element"];
 * off its substrate and re-provides that level. Built on Base UI's Popover:
 * it opens on press, or on hover too with `openOnHover`; it flips to the
 * other side when there is no room; Escape and an outside press close it.
+* `onOpenChange` hears why (`details.reason`) and can `details.cancel()` it.
 *
 * Statics:
 * - `Popover.Trigger` — the control that opens it: `render={<Button/>}` or
 *   `asChild`; `openOnHover`, `delay`, `closeDelay`.
 * - `Popover.Content` — the panel: `side`, `align` (the trigger's `start`,
-*   `center` or `end`), `sideOffset` and the morph options `from`,
-*   `effect`, `hideSource`, `tier`.
+*   `center` or `end`), `sideOffset`, `alignOffset`, `anchor` (position it
+*   against another element than the trigger, which it then grows from),
+*   `collisionPadding`, `collisionBoundary`, `initialFocus`, `finalFocus`
+*   and the morph options `from`, `effect`, `hideSource`, `tier`.
 * - `Popover.Title` / `Popover.Description` — its labelled heading and
 *   supporting line, wired for screen readers.
 * - `Popover.Close` — closes it; same `render` / `asChild` shape.
@@ -84,4 +106,4 @@ type Element_12xgc = JSX_1kxb["Element"];
 * @example {@include ./examples.mdx}
 */
 declare function Popover({ open, defaultOpen, onOpenChange, modal, children }: PopoverProps): Element_12xgc;
-export { Popover, PopoverClose, PopoverContent, PopoverContentProps, PopoverDescription, PopoverProps, PopoverTitle, PopoverTrigger, PopoverTriggerProps, Popover as default };
+export { Popover, PopoverClose, PopoverContent, PopoverContentProps, PopoverDescription, PopoverOpenChangeDetails, PopoverProps, PopoverTitle, PopoverTrigger, PopoverTriggerProps, Popover as default };

package/dist/components/overlays/popover/index.js

@@ -6,15 +6,18 @@ import {
   PopoverDescription2,
   Popover2,
   popover_default
-} from "../../../shared/components-gc5vtq2f.js";
-import"../../../shared/components-3ky44908.js";
-import"../../../shared/components-0q0sqfh4.js";
-import"../../../shared/components-hqeq3w9q.js";
-import"../../../shared/components-n7mjr357.js";
-import"../../../shared/components-men63rwj.js";
-import"../../../shared/components-cv16mryv.js";
-import"../../../shared/components-zx6b6yby.js";
-import"../../../shared/components-ezxhrmer.js";
+} from "../../../shared/components-gh0qeey3.js";
+import"../../../shared/components-vf45j12c.js";
+import"../../../shared/components-dhgk6mbt.js";
+import"../../../shared/components-vfjc9jzz.js";
+import"../../../shared/components-4y816hwp.js";
+import"../../../shared/components-b1e239g3.js";
+import"../../../shared/components-awra5sff.js";
+import"../../../shared/components-tz1fv35x.js";
+import"../../../shared/components-de99ykt7.js";
+import"../../../shared/components-3ey0hzpb.js";
+import"../../../shared/components-78x40gee.js";
+import"../../../shared/components-jcnjay5g.js";
 export {
   Popover2 as Popover,
   PopoverClose2 as PopoverClose,

package/dist/components/overlays/preview-card/index.js

@@ -3,14 +3,17 @@ import {
   PreviewCardContent2,
   PreviewCard2,
   preview_card_default
-} from "../../../shared/components-3mkepka5.js";
-import"../../../shared/components-0q0sqfh4.js";
-import"../../../shared/components-hqeq3w9q.js";
-import"../../../shared/components-n7mjr357.js";
-import"../../../shared/components-men63rwj.js";
-import"../../../shared/components-cv16mryv.js";
-import"../../../shared/components-zx6b6yby.js";
-import"../../../shared/components-ezxhrmer.js";
+} from "../../../shared/components-0jmqhx2k.js";
+import"../../../shared/components-vf45j12c.js";
+import"../../../shared/components-dhgk6mbt.js";
+import"../../../shared/components-4y816hwp.js";
+import"../../../shared/components-b1e239g3.js";
+import"../../../shared/components-awra5sff.js";
+import"../../../shared/components-tz1fv35x.js";
+import"../../../shared/components-de99ykt7.js";
+import"../../../shared/components-3ey0hzpb.js";
+import"../../../shared/components-78x40gee.js";
+import"../../../shared/components-jcnjay5g.js";
 export {
   PreviewCard2 as PreviewCard,
   PreviewCardContent2 as PreviewCardContent,