@ratio-ui/core 0.1.1 → 0.3.0

package/dist/components/date-picker/DatePicker.js

@@ -0,0 +1,104 @@
+import { Icon } from "../icon/Icon.js";
+import { Button } from "../button/Button.js";
+import { FORMAT, formatDate, formatIsoDate, parseDate } from "../../lib/format.js";
+import { Calendar } from "../calendar/Calendar.js";
+import { InputGroup, InputGroupAddon, InputGroupInput } from "../input-group/InputGroup.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../popover/Popover.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+// src/components/date-picker/DatePicker.tsx
+/**
+* A field that shows a day as DD/MM/YYYY, reads a typed date through the format module and opens a calendar in a popover
+* from the button at its end. Text that is not a date is marked invalid when the field loses focus, and reports nothing.
+* Under a name, a form submits the day as YYYY-MM-DD (empty when there is none), never the text on screen.
+*/
+function DatePicker({ value, defaultValue = null, onValueChange, disabledDays, startMonth, endMonth, size = 36, placeholder = FORMAT.datePattern, readOnly, disabled, onBlur, ref, name, "aria-invalid": ariaInvalid, ...rest }) {
+	const controlled = value !== void 0;
+	const [inner, setInner] = useState(defaultValue);
+	const day = controlled ? value : inner;
+	const [text, setText] = useState(() => day === null ? "" : formatDate(day));
+	const [seen, setSeen] = useState(day);
+	const [malformed, setMalformed] = useState(false);
+	const [open, setOpen] = useState(false);
+	if ((seen?.getTime() ?? null) !== (day?.getTime() ?? null)) {
+		setSeen(day);
+		if ((day?.getTime() ?? null) !== (parseDate(text)?.getTime() ?? null)) setText(day === null ? "" : formatDate(day));
+		setMalformed(false);
+	}
+	const commit = (next) => {
+		setSeen(next);
+		if (!controlled) setInner(next);
+		onValueChange?.(next);
+	};
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(InputGroup, {
+		size,
+		children: [/* @__PURE__ */ jsx(InputGroupInput, {
+			...rest,
+			ref,
+			type: "text",
+			autoComplete: "off",
+			placeholder,
+			readOnly,
+			disabled,
+			"aria-invalid": ariaInvalid ?? (malformed ? true : void 0),
+			value: text,
+			onChange: (event) => {
+				const next = event.target.value;
+				setText(next);
+				setMalformed(false);
+				if (next.trim() === "") return commit(null);
+				const parsed = parseDate(next);
+				if (parsed !== null) commit(parsed);
+			},
+			onBlur: (event) => {
+				onBlur?.(event);
+				const parsed = parseDate(text);
+				if (text.trim() === "") setMalformed(false);
+				else if (parsed === null) setMalformed(true);
+				else setText(formatDate(parsed));
+			}
+		}), readOnly ? null : /* @__PURE__ */ jsx(InputGroupAddon, {
+			align: "end",
+			children: /* @__PURE__ */ jsxs(Popover, {
+				open,
+				onOpenChange: setOpen,
+				children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+					disabled,
+					render: /* @__PURE__ */ jsx(Button, {
+						variant: "ghost",
+						iconOnly: true,
+						"aria-label": "Open calendar",
+						children: /* @__PURE__ */ jsx(Icon, {
+							name: "calendar",
+							size: 12
+						})
+					})
+				}), /* @__PURE__ */ jsx(PopoverContent, {
+					align: "end",
+					children: /* @__PURE__ */ jsx(Calendar, {
+						mode: "single",
+						required: true,
+						selected: day ?? void 0,
+						defaultMonth: day ?? void 0,
+						onSelect: (picked) => {
+							setText(formatDate(picked));
+							setMalformed(false);
+							commit(picked);
+							setOpen(false);
+						},
+						disabled: disabledDays,
+						startMonth,
+						endMonth
+					})
+				})]
+			})
+		})]
+	}), name !== void 0 && /* @__PURE__ */ jsx("input", {
+		type: "hidden",
+		name,
+		form: rest.form,
+		value: day === null ? "" : formatIsoDate(day),
+		disabled
+	})] });
+}
+export { DatePicker };

package/dist/components/date-picker/index.d.ts

@@ -0,0 +1,2 @@
+import { DatePicker, DatePickerProps } from "./DatePicker.js";
+export { DatePicker, type DatePickerProps };

package/dist/components/date-picker/index.js

@@ -0,0 +1 @@
+export { DatePicker } from "./DatePicker.js";

package/dist/components/date-range-picker/DateRangePicker.d.ts

@@ -0,0 +1,39 @@
+import { CalendarProps } from "../calendar/Calendar.js";
+import "../calendar/index.js";
+import { InputGroupSize } from "../input-group/InputGroup.js";
+import "../input-group/index.js";
+import { InputHTMLAttributes, JSX, Ref } from "react";
+/** A complete range of days, the first day and the last day (the same day for a range of one). */
+export type DateRangeValue = {
+  from: Date;
+  to: Date;
+};
+/**
+ * The props of DateRangePicker: the HTML attributes of an input, except className, style, size and the ones the field sets
+ * itself, with the range as a first and a last day in and out. Mark an invalid field with aria-invalid.
+ */
+export type DateRangePickerProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'style' | 'size' | 'type' | 'value' | 'defaultValue' | 'onChange' | 'min' | 'max'> & {
+  /** The range, or null for an empty field. Pass it to control the field. */
+  value?: DateRangeValue | null;
+  /** The starting range when the field is not controlled. Defaults to empty. */
+  defaultValue?: DateRangeValue | null;
+  /** Called with the range when a typed range is complete or two days are picked, and with null when the text is cleared. */
+  onValueChange?: (value: DateRangeValue | null) => void;
+  /** The days that cannot be picked in the calendar, for example { after: new Date() } for an analytics period. */
+  disabledDays?: CalendarProps['disabled'];
+  /** The first month the calendar can show. */
+  startMonth?: Date;
+  /** The last month the calendar can show. */
+  endMonth?: Date;
+  /** The height in px: 36 for forms, 32 for fields inside a table. Defaults to 36. */
+  size?: InputGroupSize;
+  /** Receives the input element. */
+  ref?: Ref<HTMLInputElement>;
+};
+/**
+ * A field that shows a range as two DD/MM/YYYY days, reads a typed range through the format module and opens a calendar in
+ * a popover from the button at its end, for analytics periods. Pick the first day, then the last. Text that is not a range
+ * in order is marked invalid when the field loses focus, and reports nothing. Under a name, a form submits two fields,
+ * `name.from` and `name.to`, each as YYYY-MM-DD (empty when there is no range), never the text on screen.
+ */
+export declare function DateRangePicker({ value, defaultValue, onValueChange, disabledDays, startMonth, endMonth, size, placeholder, readOnly, disabled, onBlur, ref, name, 'aria-invalid': ariaInvalid, ...rest }: DateRangePickerProps): JSX.Element;

package/dist/components/date-range-picker/DateRangePicker.js

@@ -0,0 +1,142 @@
+import { Icon } from "../icon/Icon.js";
+import { Button } from "../button/Button.js";
+import { FORMAT, formatDate, formatIsoDate, parseDate } from "../../lib/format.js";
+import { Calendar } from "../calendar/Calendar.js";
+import { InputGroup, InputGroupAddon, InputGroupInput } from "../input-group/InputGroup.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../popover/Popover.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+// src/components/date-range-picker/DateRangePicker.tsx
+const SEPARATOR = " – ";
+const SPLIT = /\s+[-–—]\s+|\s*[–—]\s*/;
+const same = (a, b) => a === null || b === null ? a === b : a.from.getTime() === b.from.getTime() && a.to.getTime() === b.to.getTime();
+const write = (range) => range === null ? "" : `${formatDate(range.from)}${SEPARATOR}${formatDate(range.to)}`;
+/** Reads "28/10/2026 – 03/11/2026" (a dash, en dash or em dash between) as a range, or null when it is not a range in order. */
+function parseRange(text) {
+	const parts = text.trim().split(SPLIT);
+	if (parts.length !== 2) return null;
+	const from = parseDate(parts[0] ?? "");
+	const to = parseDate(parts[1] ?? "");
+	return from === null || to === null || to < from ? null : {
+		from,
+		to
+	};
+}
+/**
+* A field that shows a range as two DD/MM/YYYY days, reads a typed range through the format module and opens a calendar in
+* a popover from the button at its end, for analytics periods. Pick the first day, then the last. Text that is not a range
+* in order is marked invalid when the field loses focus, and reports nothing. Under a name, a form submits two fields,
+* `name.from` and `name.to`, each as YYYY-MM-DD (empty when there is no range), never the text on screen.
+*/
+function DateRangePicker({ value, defaultValue = null, onValueChange, disabledDays, startMonth, endMonth, size = 36, placeholder = `${FORMAT.datePattern}${SEPARATOR}${FORMAT.datePattern}`, readOnly, disabled, onBlur, ref, name, "aria-invalid": ariaInvalid, ...rest }) {
+	const controlled = value !== void 0;
+	const [inner, setInner] = useState(defaultValue);
+	const range = controlled ? value : inner;
+	const [text, setText] = useState(() => write(range));
+	const [seen, setSeen] = useState(range);
+	const [malformed, setMalformed] = useState(false);
+	const [open, setOpen] = useState(false);
+	const [draft, setDraft] = useState();
+	if (!same(seen, range)) {
+		setSeen(range);
+		if (!same(range, parseRange(text))) setText(write(range));
+		setMalformed(false);
+	}
+	const commit = (next) => {
+		setSeen(next);
+		if (!controlled) setInner(next);
+		onValueChange?.(next);
+	};
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(InputGroup, {
+		size,
+		children: [/* @__PURE__ */ jsx(InputGroupInput, {
+			...rest,
+			ref,
+			type: "text",
+			autoComplete: "off",
+			placeholder,
+			readOnly,
+			disabled,
+			"aria-invalid": ariaInvalid ?? (malformed ? true : void 0),
+			value: text,
+			onChange: (event) => {
+				const next = event.target.value;
+				setText(next);
+				setMalformed(false);
+				if (next.trim() === "") return commit(null);
+				const parsed = parseRange(next);
+				if (parsed !== null) commit(parsed);
+			},
+			onBlur: (event) => {
+				onBlur?.(event);
+				const parsed = parseRange(text);
+				if (text.trim() === "") setMalformed(false);
+				else if (parsed === null) setMalformed(true);
+				else setText(write(parsed));
+			}
+		}), readOnly ? null : /* @__PURE__ */ jsx(InputGroupAddon, {
+			align: "end",
+			children: /* @__PURE__ */ jsxs(Popover, {
+				open,
+				onOpenChange: (next) => {
+					setDraft(void 0);
+					setOpen(next);
+				},
+				children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+					disabled,
+					render: /* @__PURE__ */ jsx(Button, {
+						variant: "ghost",
+						iconOnly: true,
+						"aria-label": "Open calendar",
+						children: /* @__PURE__ */ jsx(Icon, {
+							name: "calendar",
+							size: 12
+						})
+					})
+				}), /* @__PURE__ */ jsx(PopoverContent, {
+					align: "end",
+					children: /* @__PURE__ */ jsx(Calendar, {
+						mode: "range",
+						selected: draft ?? range ?? void 0,
+						defaultMonth: range?.from,
+						onSelect: (_picked, triggerDate) => {
+							if (draft?.from === void 0) {
+								setDraft({
+									from: triggerDate,
+									to: void 0
+								});
+								return;
+							}
+							const [from, to] = triggerDate < draft.from ? [triggerDate, draft.from] : [draft.from, triggerDate];
+							const next = {
+								from,
+								to
+							};
+							setText(write(next));
+							setMalformed(false);
+							commit(next);
+							setDraft(void 0);
+							setOpen(false);
+						},
+						disabled: disabledDays,
+						startMonth,
+						endMonth
+					})
+				})]
+			})
+		})]
+	}), name !== void 0 && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("input", {
+		type: "hidden",
+		name: `${name}.from`,
+		form: rest.form,
+		value: range === null ? "" : formatIsoDate(range.from),
+		disabled
+	}), /* @__PURE__ */ jsx("input", {
+		type: "hidden",
+		name: `${name}.to`,
+		form: rest.form,
+		value: range === null ? "" : formatIsoDate(range.to),
+		disabled
+	})] })] });
+}
+export { DateRangePicker };

package/dist/components/date-range-picker/index.d.ts

@@ -0,0 +1,2 @@
+import { DateRangePicker, DateRangePickerProps, DateRangeValue } from "./DateRangePicker.js";
+export { DateRangePicker, type DateRangePickerProps, type DateRangeValue };

package/dist/components/date-range-picker/index.js

@@ -0,0 +1 @@
+export { DateRangePicker } from "./DateRangePicker.js";

package/dist/components/definition/Definition.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from "react";
+/** The props of Definition. */
+export type DefinitionProps = {
+  /** The term, shown in the text with a dotted underline. */
+  children: ReactNode;
+  /** The explanation shown when the term is opened. Keep it to a sentence. */
+  definition: ReactNode;
+};
+/**
+ * A term that explains itself. It is a span with the button role and a dotted underline, so it takes the font of the text around it, so keyboard users reach it with Tab and open it with
+ * Enter or Space, touch users open it with a tap, and mouse users with hover or click. It does not use the browser's own
+ * title tooltip, which keyboard and touch users cannot open. Escape closes it.
+ */
+export declare function Definition({ children, definition }: DefinitionProps): import("react").JSX.Element;

package/dist/components/definition/Definition.js

@@ -0,0 +1,29 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Popover } from "@base-ui/react/popover";
+// src/components/definition/Definition.tsx
+/**
+* A term that explains itself. It is a span with the button role and a dotted underline, so it takes the font of the text around it, so keyboard users reach it with Tab and open it with
+* Enter or Space, touch users open it with a tap, and mouse users with hover or click. It does not use the browser's own
+* title tooltip, which keyboard and touch users cannot open. Escape closes it.
+*/
+function Definition({ children, definition }) {
+	return /* @__PURE__ */ jsxs(Popover.Root, { children: [/* @__PURE__ */ jsx(Popover.Trigger, {
+		openOnHover: true,
+		nativeButton: false,
+		render: /* @__PURE__ */ jsx("span", {}),
+		tabIndex: 0,
+		delay: 100,
+		className: "rt:cursor-help rt:rounded-sm rt:bg-transparent rt:p-0 rt:text-inherit rt:underline rt:decoration-dotted rt:decoration-1 rt:underline-offset-4 rt:focus-visible:focus-ring",
+		children
+	}), /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(Popover.Positioner, {
+		side: "top",
+		sideOffset: 4,
+		className: "rt:isolate rt:z-50",
+		children: /* @__PURE__ */ jsx(Popover.Popup, {
+			"aria-label": "Definition",
+			className: "rt:max-w-72 rt:rounded-md rt:border rt:border-border rt:bg-popover rt:px-3 rt:py-1.5 rt:text-b1 rt:text-popover-foreground rt:outline-hidden",
+			children: definition
+		})
+	}) })] });
+}
+export { Definition };

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

@@ -0,0 +1,2 @@
+import { Definition, DefinitionProps } from "./Definition.js";
+export { Definition, type DefinitionProps };

package/dist/components/definition/index.js

@@ -0,0 +1 @@
+export { Definition } from "./Definition.js";

package/dist/components/dialog/Dialog.d.ts

@@ -0,0 +1,44 @@
+import { ComponentProps, JSX } from "react";
+import { Dialog } from "@base-ui/react/dialog";
+/**
+ * The root of a dialog. It holds the open state and renders nothing itself. Pass `open` and `onOpenChange` to control it,
+ * or `defaultOpen` to leave it uncontrolled. The page behind is inert while it is open, with no scrim over it.
+ */
+declare function Dialog$1(props: Dialog.Root.Props): JSX.Element;
+/** Props of DialogTrigger. */
+export type DialogTriggerProps = Omit<Dialog.Trigger.Props, 'className' | 'style'>;
+/** The button that opens the dialog. */
+export declare function DialogTrigger(props: DialogTriggerProps): JSX.Element;
+/** Props of DialogClose. */
+export type DialogCloseProps = Omit<Dialog.Close.Props, 'className' | 'style'>;
+/** A button that closes the dialog, such as Cancel in the footer. */
+export declare function DialogClose(props: DialogCloseProps): JSX.Element;
+/** Props of DialogContent. */
+export interface DialogContentProps extends Omit<Dialog.Popup.Props, 'className' | 'style'> {
+  /** Whether the corner close button shows. Defaults to true. */
+  showCloseButton?: boolean;
+  /** The accessible name of the corner close button. Defaults to Close. */
+  closeLabel?: string;
+}
+/**
+ * The panel: 480px wide, white, drawn with the ring outline and no shadow, with no scrim behind it. Put DialogHeader,
+ * the form and DialogFooter inside.
+ */
+export declare function DialogContent({ children, showCloseButton, closeLabel, ...props }: DialogContentProps): JSX.Element;
+/** Props of DialogHeader. */
+export type DialogHeaderProps = Omit<ComponentProps<'div'>, 'className' | 'style'>;
+/** The title and description, stacked. */
+export declare function DialogHeader(props: DialogHeaderProps): JSX.Element;
+/** Props of DialogFooter. */
+export type DialogFooterProps = Omit<ComponentProps<'div'>, 'className' | 'style'>;
+/** The row of actions at the bottom, aligned to the end. */
+export declare function DialogFooter(props: DialogFooterProps): JSX.Element;
+/** Props of DialogTitle. */
+export type DialogTitleProps = Omit<Dialog.Title.Props, 'className' | 'style'>;
+/** The dialog's name, in the b4 style. It names the dialog for assistive technology. */
+export declare function DialogTitle(props: DialogTitleProps): JSX.Element;
+/** Props of DialogDescription. */
+export type DialogDescriptionProps = Omit<Dialog.Description.Props, 'className' | 'style'>;
+/** One line that says what the dialog is for, in subdued body text. */
+export declare function DialogDescription(props: DialogDescriptionProps): JSX.Element;
+export { Dialog$1 as Dialog };

package/dist/components/dialog/Dialog.js

@@ -0,0 +1,79 @@
+import { cn } from "../../lib/cn.js";
+import { Icon } from "../icon/Icon.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Dialog } from "@base-ui/react/dialog";
+// src/components/dialog/Dialog.tsx
+/**
+* The root of a dialog. It holds the open state and renders nothing itself. Pass `open` and `onOpenChange` to control it,
+* or `defaultOpen` to leave it uncontrolled. The page behind is inert while it is open, with no scrim over it.
+*/
+function Dialog$1(props) {
+	return /* @__PURE__ */ jsx(Dialog.Root, { ...props });
+}
+/** The button that opens the dialog. */
+function DialogTrigger(props) {
+	return /* @__PURE__ */ jsx(Dialog.Trigger, {
+		"data-slot": "dialog-trigger",
+		...props
+	});
+}
+/** A button that closes the dialog, such as Cancel in the footer. */
+function DialogClose(props) {
+	return /* @__PURE__ */ jsx(Dialog.Close, {
+		"data-slot": "dialog-close",
+		...props
+	});
+}
+/**
+* The panel: 480px wide, white, drawn with the ring outline and no shadow, with no scrim behind it. Put DialogHeader,
+* the form and DialogFooter inside.
+*/
+function DialogContent({ children, showCloseButton = true, closeLabel = "Close", ...props }) {
+	return /* @__PURE__ */ jsx(Dialog.Portal, { children: /* @__PURE__ */ jsxs(Dialog.Popup, {
+		"data-slot": "dialog-content",
+		className: "rt:fixed rt:inset-0 rt:z-50 rt:m-auto rt:flex rt:h-fit rt:max-h-full rt:w-120 rt:max-w-full rt:overflow-y-auto rt:flex-col rt:gap-6 rt:rounded-lg rt:bg-popover rt:p-6 rt:text-b3 rt:text-popover-foreground rt:shadow-ring-strong rt:forced-outline rt:focus-visible:focus-ring",
+		...props,
+		children: [children, showCloseButton && /* @__PURE__ */ jsx(Dialog.Close, {
+			"data-slot": "dialog-close",
+			"aria-label": closeLabel,
+			className: "rt:absolute rt:top-4 rt:right-4 rt:flex rt:size-7 rt:items-center rt:justify-center rt:rounded-md rt:text-icon rt:transition-colors rt:hover:bg-primary-tint rt:focus-visible:focus-ring",
+			children: /* @__PURE__ */ jsx(Icon, {
+				name: "x",
+				size: 12
+			})
+		})]
+	}) });
+}
+/** The title and description, stacked. */
+function DialogHeader(props) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "dialog-header",
+		className: "rt:flex rt:flex-col rt:gap-1",
+		...props
+	});
+}
+/** The row of actions at the bottom, aligned to the end. */
+function DialogFooter(props) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "dialog-footer",
+		className: "rt:flex rt:items-center rt:justify-end rt:gap-2",
+		...props
+	});
+}
+/** The dialog's name, in the b4 style. It names the dialog for assistive technology. */
+function DialogTitle(props) {
+	return /* @__PURE__ */ jsx(Dialog.Title, {
+		"data-slot": "dialog-title",
+		className: cn("rt:text-b4 rt:text-foreground-strong"),
+		...props
+	});
+}
+/** One line that says what the dialog is for, in subdued body text. */
+function DialogDescription(props) {
+	return /* @__PURE__ */ jsx(Dialog.Description, {
+		"data-slot": "dialog-description",
+		className: "rt:text-b3 rt:text-foreground-subdued",
+		...props
+	});
+}
+export { Dialog$1 as Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger };

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

@@ -0,0 +1,2 @@
+import { Dialog, DialogClose, DialogCloseProps, DialogContent, DialogContentProps, DialogDescription, DialogDescriptionProps, DialogFooter, DialogFooterProps, DialogHeader, DialogHeaderProps, DialogTitle, DialogTitleProps, DialogTrigger, DialogTriggerProps } from "./Dialog.js";
+export { Dialog, DialogClose, type DialogCloseProps, DialogContent, type DialogContentProps, DialogDescription, type DialogDescriptionProps, DialogFooter, type DialogFooterProps, DialogHeader, type DialogHeaderProps, DialogTitle, type DialogTitleProps, DialogTrigger, type DialogTriggerProps };

package/dist/components/dialog/index.js

@@ -0,0 +1 @@
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "./Dialog.js";

package/dist/components/dropdown-menu/DropdownMenu.d.ts

@@ -0,0 +1,73 @@
+import { JSX, ReactNode } from "react";
+import { Menu } from "@base-ui/react/menu";
+/** Props of DropdownMenu, the root that holds the open state. It renders no element. */
+export type DropdownMenuProps = Menu.Root.Props;
+/** The root of a menu of actions that opens from a trigger. Compose it with DropdownMenuTrigger and DropdownMenuContent. */
+export declare function DropdownMenu(props: DropdownMenuProps): JSX.Element;
+/** Props of DropdownMenuTrigger. The trigger is a button; pass `render` to draw another element. */
+export type DropdownMenuTriggerProps = Omit<Menu.Trigger.Props, 'className' | 'style'>;
+/** The control that opens the menu. It is a button, and carries aria-expanded and aria-haspopup. */
+export declare function DropdownMenuTrigger(props: DropdownMenuTriggerProps): JSX.Element;
+/** Props of DropdownMenuContent. */
+export interface DropdownMenuContentProps extends Omit<Menu.Popup.Props, 'className' | 'style'> {
+  /** Which side of the trigger the menu opens on. Defaults to bottom. */
+  side?: Menu.Positioner.Props['side'];
+  /** How the menu lines up with the trigger along that side. Defaults to start. */
+  align?: Menu.Positioner.Props['align'];
+  /** The gap between the trigger and the menu in px. Defaults to 4. */
+  sideOffset?: number;
+  /** A shift along the side in px. Defaults to 0. */
+  alignOffset?: number;
+}
+/** The menu panel: a white popup with a hairline ring, 8px corners and no shadow. It opens in a portal. */
+export declare function DropdownMenuContent({ side, align, sideOffset, alignOffset, ...props }: DropdownMenuContentProps): JSX.Element;
+/** Props of DropdownMenuGroup: Base UI's group props, except className and style. */
+export type DropdownMenuGroupProps = Omit<Menu.Group.Props, 'className' | 'style'>;
+/** Groups items under one DropdownMenuLabel, so assistive technology announces the label with the group. */
+export declare function DropdownMenuGroup(props: DropdownMenuGroupProps): JSX.Element;
+/** Props of DropdownMenuLabel. */
+export type DropdownMenuLabelProps = Omit<Menu.GroupLabel.Props, 'className' | 'style'>;
+/** The caption of a group, in the design system's label style: 12px, uppercase, subdued. Place it inside DropdownMenuGroup. */
+export declare function DropdownMenuLabel(props: DropdownMenuLabelProps): JSX.Element;
+/** Props of DropdownMenuItem. */
+export interface DropdownMenuItemProps extends Omit<Menu.Item.Props, 'className' | 'style'> {
+  /** What the item means. destructive is drawn in the destructive token; a delete action also needs a confirm step. Defaults to default. */
+  variant?: 'default' | 'destructive';
+}
+/** One action in the menu. It runs onClick and closes the menu; disabled is drawn at half opacity and cannot be chosen. */
+export declare function DropdownMenuItem({ variant, ...props }: DropdownMenuItemProps): JSX.Element;
+/** Props of DropdownMenuShortcut. */
+export interface DropdownMenuShortcutProps {
+  /** The key hint, such as ⌘E. It is text only and does not bind a key. */
+  children: ReactNode;
+}
+/** A key hint pushed to the end of an item. It is a hint only: the host binds the key. */
+export declare function DropdownMenuShortcut({ children }: DropdownMenuShortcutProps): JSX.Element;
+/** Props of DropdownMenuSeparator. */
+export type DropdownMenuSeparatorProps = Omit<Menu.Separator.Props, 'className' | 'style'>;
+/** A hairline between groups of items. */
+export declare function DropdownMenuSeparator(props: DropdownMenuSeparatorProps): JSX.Element;
+/** Props of DropdownMenuSub, the root of a submenu. It renders no element. */
+export type DropdownMenuSubProps = Menu.SubmenuRoot.Props;
+/** The root of a nested menu. Hold a DropdownMenuSubTrigger and a DropdownMenuSubContent. */
+export declare function DropdownMenuSub(props: DropdownMenuSubProps): JSX.Element;
+/** Props of DropdownMenuSubTrigger. */
+export type DropdownMenuSubTriggerProps = Omit<Menu.SubmenuTrigger.Props, 'className' | 'style'>;
+/** The item that opens a submenu, on hover, click or ArrowRight. A chevron at its end marks it. */
+export declare function DropdownMenuSubTrigger({ children, ...props }: DropdownMenuSubTriggerProps): JSX.Element;
+/** Props of DropdownMenuSubContent. */
+export type DropdownMenuSubContentProps = DropdownMenuContentProps;
+/** The panel of a submenu. It opens to the side of its trigger. */
+export declare function DropdownMenuSubContent({ side, alignOffset, sideOffset, ...props }: DropdownMenuSubContentProps): JSX.Element;
+/** Props of DropdownMenuCheckboxItem. */
+export type DropdownMenuCheckboxItemProps = Omit<Menu.CheckboxItem.Props, 'className' | 'style'>;
+/** An item that toggles an option. A check shows at its start while it is on and keeps the menu open, so several options can be changed in one visit. */
+export declare function DropdownMenuCheckboxItem({ children, ...props }: DropdownMenuCheckboxItemProps): JSX.Element;
+/** Props of DropdownMenuRadioGroup: Base UI's radio group props, except className and style. */
+export type DropdownMenuRadioGroupProps = Omit<Menu.RadioGroup.Props, 'className' | 'style'>;
+/** Holds radio items and the one chosen value. */
+export declare function DropdownMenuRadioGroup(props: DropdownMenuRadioGroupProps): JSX.Element;
+/** Props of DropdownMenuRadioItem. */
+export type DropdownMenuRadioItemProps = Omit<Menu.RadioItem.Props, 'className' | 'style'>;
+/** One choice of a DropdownMenuRadioGroup. A dot shows at its start while it is the chosen value. */
+export declare function DropdownMenuRadioItem({ children, ...props }: DropdownMenuRadioItemProps): JSX.Element;