plass-ui 0.0.1 → 1.0.0

package/dist/components/icon/PlIcon.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { iconSizeClasses } from '../../internal/styles.js';
+/**
+ * The same five lengths as `iconSizeClasses`, as a font size.
+ *
+ * Written out rather than inherited: an icon set hands back an `<svg>` sized in
+ * `em` about as often as one sized in `px`, and the only way both come out right
+ * is for the box's own font size to *be* the box. `text-[length:inherit]` would
+ * take the surrounding paragraph's, which is the one size the box deliberately
+ * is not.
+ */
+const glyphFontClasses = {
+    xs: 'text-[0.875rem]',
+    sm: 'text-[1rem]',
+    md: 'text-[1.25rem]',
+    lg: 'text-[1.5rem]',
+    xl: 'text-[1.75rem]'
+};
+/**
+ * A glyph at a known size, in a known colour.
+ *
+ * The library draws no icons of its own beyond the handful its components need —
+ * an icon set is a decision that belongs to the app, not to the component
+ * library it installs. What this does is give whatever icon the app chose the
+ * same two axes everything else here has.
+ *
+ * The box is `inline-flex` with the glyph told to fill it, and `font-size` is
+ * set to the same length — so an `<svg>` with its own `width`, an `<svg>` sized
+ * in `em`, and a bare character all come out the same size. That is the whole
+ * component: a box, a length written twice, and a colour.
+ *
+ * There is no `variant` and no `elevation`. An icon is not a surface: it is ink,
+ * and the only thing the design language has to say about ink is which family it
+ * is drawn in.
+ */
+export const PlIcon = /* @__PURE__ */ React.forwardRef(function PlIcon({ icon, size = 'md', color = 'inherit', label, className, style, ...props }, ref) {
+    const classNames = [
+        'inline-flex shrink-0 items-center justify-center align-middle',
+        iconSizeClasses[size],
+        // The glyph fills the box however it was authored. `[font-size:100%]` on the
+        // box itself would be a no-op; what makes an em-sized drawing come out right
+        // is the box being an em, which `size-*` and this pair together arrange.
+        '[&>svg]:block [&>svg]:size-full [&>img]:block [&>img]:size-full',
+        `leading-none ${glyphFontClasses[size]}`,
+        color === 'inherit' ? '' : 'text-(--p-accent)',
+        className ?? ''
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return (_jsx("span", { ref: ref, className: classNames, style: (color === 'inherit'
+            ? style
+            : { '--p-accent': `var(--plass-${color}-accent)`, ...style }), 
+        // An icon with something to say is an `img` with a name; one without is
+        // furniture. There is no third case, and `role="img"` on a decorative glyph
+        // is the most common way a screen reader ends up saying "graphic".
+        role: label ? 'img' : undefined, "aria-label": label, "aria-hidden": label ? undefined : true, ...props, children: icon }));
+});

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

@@ -0,0 +1,2 @@
+export { PlIcon } from './PlIcon.js';
+export type { PlIconProps } from './PlIcon.js';

package/dist/components/icon/index.js

@@ -0,0 +1 @@
+export { PlIcon } from './PlIcon.js';

package/dist/components/icon-button/PlIconButton.d.ts

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { type PlButtonProps } from '../button/PlButton.js';
+export interface PlIconButtonProps extends Omit<PlButtonProps, 'children' | 'startIcon' | 'endIcon'> {
+    /**
+     * The glyph. Wrap it in a `PlIcon` when it needs a size of its own; passed
+     * bare it is sized in `em` against the button, exactly as a `startIcon` is.
+     */
+    icon: React.ReactNode;
+    /**
+     * What the button does, in words.
+     *
+     * Required, and the one prop here that is. A button whose whole label is a
+     * drawing has no accessible name at all, and "an icon button with no
+     * `aria-label`" is the single most common accessibility defect a component
+     * library ships. Making it required is the only fix that survives review.
+     */
+    label: string;
+}
+/**
+ * A round button with a glyph in it and nothing else.
+ *
+ * A `PlButton` with an icon and no children already goes square — the same
+ * height, the same width, the house fillet cut off it. This is the other shape:
+ * a disc.
+ *
+ * That disc is a deliberate exception to the radius rule, which holds every
+ * corner well short of the 50% that would make a control a pill, because the
+ * flat run along the top and bottom edge is what still reads as a sheet with its
+ * corners cut. The rule is about *labelled* controls: the flat run is there for
+ * the line of text to sit on, and a glyph has no line of text. A circle with a
+ * single mark centred in it is a punched token rather than a moulded key, so it
+ * says the thing the rule exists to protect by a different route.
+ *
+ * Everything else is `PlButton`'s, unchanged and on purpose: the three
+ * materials, the elevation ladder, the pointer light, `loading`, `readOnly` and
+ * `disabled`. Two components that draw the same surface out of two copies of the
+ * same table are two components that will eventually disagree.
+ */
+export declare const PlIconButton: React.ForwardRefExoticComponent<PlIconButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/icon-button/PlIconButton.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { PlButton } from '../button/PlButton.js';
+/**
+ * A round button with a glyph in it and nothing else.
+ *
+ * A `PlButton` with an icon and no children already goes square — the same
+ * height, the same width, the house fillet cut off it. This is the other shape:
+ * a disc.
+ *
+ * That disc is a deliberate exception to the radius rule, which holds every
+ * corner well short of the 50% that would make a control a pill, because the
+ * flat run along the top and bottom edge is what still reads as a sheet with its
+ * corners cut. The rule is about *labelled* controls: the flat run is there for
+ * the line of text to sit on, and a glyph has no line of text. A circle with a
+ * single mark centred in it is a punched token rather than a moulded key, so it
+ * says the thing the rule exists to protect by a different route.
+ *
+ * Everything else is `PlButton`'s, unchanged and on purpose: the three
+ * materials, the elevation ladder, the pointer light, `loading`, `readOnly` and
+ * `disabled`. Two components that draw the same surface out of two copies of the
+ * same table are two components that will eventually disagree.
+ */
+export const PlIconButton = /* @__PURE__ */ React.forwardRef(function PlIconButton({ icon, label, style, ...props }, ref) {
+    return (_jsx(PlButton, { ref: ref, "aria-label": label, 
+        // The icon goes in `startIcon` rather than in `children`, which is what
+        // puts PlButton on its icon-only path: square footprint, no horizontal
+        // padding, and the spinner taking the glyph's place while `loading`.
+        startIcon: icon, 
+        // An inline style rather than a `rounded-full`, and for once not as a
+        // shortcut. PlButton already writes a `rounded-*` utility of its own, and
+        // two utilities setting the same property resolve by their order in the
+        // generated stylesheet — which is not something a component may depend
+        // on. An inline declaration is the one form that wins deterministically,
+        // and it still leaves the caller's own `style` free to override it below.
+        style: { borderRadius: '9999px', ...style }, ...props }));
+});

package/dist/components/icon-button/index.d.ts

@@ -0,0 +1,2 @@
+export { PlIconButton } from './PlIconButton.js';
+export type { PlIconButtonProps } from './PlIconButton.js';

package/dist/components/icon-button/index.js

@@ -0,0 +1 @@
+export { PlIconButton } from './PlIconButton.js';

package/dist/components/list/PlList.d.ts

@@ -0,0 +1,82 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { PlassElevation, PlassStyleProps } from '../../types.js';
+export interface PlListProps extends PlassStyleProps, Omit<React.ComponentPropsWithoutRef<'ul'>, 'color'> {
+    /**
+     * Drop shadow depth. `0` is the default — a list is a sheet lying flat, not a
+     * key resting on one.
+     * @default 0
+     */
+    elevation?: PlassElevation;
+    /**
+     * Separates the rows with a hairline instead of with space.
+     *
+     * It changes more than it sounds like: with dividers the rules have to reach
+     * both edges of the sheet, so the list gives up its inner padding and the rows
+     * give up their rounded corners. A row cannot be a floating tile and a ruled
+     * line at the same time.
+     * @default false
+     */
+    dividers?: boolean;
+    /**
+     * Renders something other than a `<ul>` — `render={<ol />}` for a list where
+     * the order is the point. Base UI's own escape hatch.
+     */
+    render?: useRender.RenderProp;
+    children?: React.ReactNode;
+}
+export interface PlListItemProps extends Omit<React.ComponentPropsWithoutRef<'li'>, 'color' | 'onClick'> {
+    /**
+     * Passing it is what turns the row into a real `<button>`. It lands on that
+     * button rather than on the `<li>`, which is why the type is loosened from the
+     * list item the shell actually is.
+     */
+    onClick?: React.MouseEventHandler<HTMLElement>;
+    /** Content before the label — an icon, an avatar, a status dot. */
+    startIcon?: React.ReactNode;
+    /** Content after the label, inside the pressable area. */
+    endIcon?: React.ReactNode;
+    /** A second line under the label, one step down the type scale and muted. */
+    description?: React.ReactNode;
+    /**
+     * A control pinned to the end of the row — a switch, a menu button.
+     *
+     * Deliberately outside the pressable area: a row that both navigates and holds
+     * a toggle has two things to press, and nesting one button inside another is
+     * markup the browser rewrites on parse.
+     */
+    action?: React.ReactNode;
+    /** Renders the row as a link. Mutually exclusive with `onClick` in practice. */
+    href?: string;
+    /** Marks the row as the chosen one — the open page, the current filter. */
+    selected?: boolean;
+    /** Unavailable. The light goes out, the same way it does everywhere else. */
+    disabled?: boolean;
+    /** The label. */
+    children?: React.ReactNode;
+}
+/**
+ * A stack of rows.
+ *
+ * The list is a sheet and the rows are what is on it, which is the whole reason
+ * the two are separate components: `size` and `density` are properties of the
+ * stack, not of any one line in it, and a context is what carries them down.
+ *
+ * There is no Base UI primitive under this on purpose. A list is not a composite
+ * widget — it has no roving focus, no selection model, no keyboard contract of
+ * its own. Reaching for a menu or a listbox primitive to get one would hand
+ * every consumer's plain list of links the semantics of a menu, which is the
+ * most common way a component library breaks a screen reader.
+ */
+export declare const PlList: React.ForwardRefExoticComponent<PlListProps & React.RefAttributes<HTMLUListElement>>;
+/**
+ * One row.
+ *
+ * The shell is always an `<li>`. What changes is what is inside it: a plain run
+ * of content, or — when `onClick` or `href` is given — a real `<button>` or
+ * `<a>` wrapping that content, with `action` sitting outside it as a separate
+ * control. This is the same shape a `PlChip` uses, for the same two reasons: a
+ * `<span>` carrying a click handler is invisible to a keyboard, and a
+ * `<button>` inside a `<button>` is markup the browser silently un-nests.
+ */
+export declare const PlListItem: React.ForwardRefExoticComponent<PlListItemProps & React.RefAttributes<HTMLLIElement>>;

package/dist/components/list/PlList.js

@@ -0,0 +1,160 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import { focusRingClasses, gapClasses, glassClasses, hasContent, iconClasses, metaTextClasses, paddingXClasses, radiusClasses, sheetBodyClasses, surfaceSlots, transitionClasses } from '../../internal/styles.js';
+const ListContext = /* @__PURE__ */ React.createContext({
+    size: 'md',
+    density: 'default',
+    dividers: false
+});
+/**
+ * The three materials, said the way a *container* says them — the sheet is never
+ * dyed, exactly as on a `PlCard`. A list holds other people's content, and that
+ * content arrives with its own colours.
+ *
+ * `ghost` is the one to reach for inside a card: the card is already a sheet,
+ * and a second bordered rectangle inside it is a second rectangle.
+ */
+const variantClasses = {
+    solid: /* @__PURE__ */ [
+        glassClasses,
+        'text-(--plass-fg) bg-(--plass-glass-press)',
+        '[box-shadow:var(--p-elev),var(--plass-gloss-glass)]'
+    ].join(' '),
+    glass: /* @__PURE__ */ [
+        glassClasses,
+        'border text-(--plass-fg) bg-(--plass-glass)',
+        '[border-color:var(--plass-glass-line)]',
+        '[box-shadow:var(--p-elev),var(--plass-gloss-glass)]'
+    ].join(' '),
+    ghost: 'text-(--plass-fg) bg-transparent'
+};
+/**
+ * A row's vertical padding. Its own ladder rather than a sheet's, because a row
+ * is a line of text in a stack of them and a sheet is a container: the same `md`
+ * that gives a card 20px of air would give a list of eight rows the height of a
+ * page.
+ */
+const rowPaddingYClasses = {
+    default: { xs: 'py-1', sm: 'py-1.5', md: 'py-2', lg: 'py-2.5', xl: 'py-3' },
+    compact: { xs: 'py-0.5', sm: 'py-0.5', md: 'py-1', lg: 'py-1.5', xl: 'py-2' }
+};
+/**
+ * A row's horizontal padding: a control's, not a sheet's. The words in a row are
+ * a label on a line rather than a paragraph inside a container, and a sheet's
+ * inset would push every row's text a third of the way across a narrow list.
+ */
+const rowPaddingXClasses = paddingXClasses;
+/**
+ * A row sits one step down the radius ladder from the sheet it is inside — a
+ * tile cut out of a sheet cannot have the same corner as the sheet, or the two
+ * curves fight along the edge.
+ */
+const rowRadiusClasses = {
+    xs: radiusClasses.xs,
+    sm: radiusClasses.xs,
+    md: radiusClasses.sm,
+    lg: radiusClasses.sm,
+    xl: radiusClasses.md
+};
+/**
+ * The rule between two rows, and the rule that makes the sheet give up its
+ * padding: `>li+li` rather than a class on each item, so it holds however the
+ * caller composed the rows — through a `.map()`, through fragments, through a
+ * component of their own that renders a `PlListItem`.
+ *
+ * `--plass-divider` and not the sheet's white hairline, for the reason a
+ * checkbox's edge takes a neutral one: white light on a translucent pane is
+ * invisible the moment the list is set on something opaque. It is the same ink
+ * a PlCard is scored with and a PlTable rules its rows in, so a list on a card
+ * inside a table cell is one family of lines rather than three.
+ */
+const dividerClasses = '[&>li+li]:border-t [&>li+li]:[border-color:var(--plass-divider)]';
+/**
+ * A stack of rows.
+ *
+ * The list is a sheet and the rows are what is on it, which is the whole reason
+ * the two are separate components: `size` and `density` are properties of the
+ * stack, not of any one line in it, and a context is what carries them down.
+ *
+ * There is no Base UI primitive under this on purpose. A list is not a composite
+ * widget — it has no roving focus, no selection model, no keyboard contract of
+ * its own. Reaching for a menu or a listbox primitive to get one would hand
+ * every consumer's plain list of links the semantics of a menu, which is the
+ * most common way a component library breaks a screen reader.
+ */
+export const PlList = /* @__PURE__ */ React.forwardRef(function PlList({ variant = 'glass', size = 'md', color = 'primary', density = 'default', elevation = 0, dividers = false, render, className, style, children, ...props }, ref) {
+    const context = React.useMemo(() => ({ size, density, dividers }), [size, density, dividers]);
+    const classNames = [
+        'flex flex-col',
+        radiusClasses[size],
+        variantClasses[variant],
+        transitionClasses,
+        // Without dividers the rows are tiles and the sheet keeps a hair of padding
+        // so a hovered row does not run into the edge. With them the rules have to
+        // reach the edge, so the padding goes and the rows square off.
+        dividers ? `overflow-hidden ${dividerClasses}` : 'p-1',
+        className ?? ''
+    ]
+        .filter(Boolean)
+        .join(' ');
+    const element = useRender({
+        render,
+        ref,
+        props: {
+            // Tailwind's reset takes the bullets off every `<ul>`, and Safari takes
+            // the list semantics off with them. Saying `role="list"` out loud is the
+            // one-line fix, and it costs nothing when the reset is not there.
+            role: 'list',
+            className: classNames,
+            style: { ...surfaceSlots(color, elevation), ...style },
+            children,
+            ...props
+        }
+    });
+    return _jsx(ListContext.Provider, { value: context, children: element });
+});
+/**
+ * One row.
+ *
+ * The shell is always an `<li>`. What changes is what is inside it: a plain run
+ * of content, or — when `onClick` or `href` is given — a real `<button>` or
+ * `<a>` wrapping that content, with `action` sitting outside it as a separate
+ * control. This is the same shape a `PlChip` uses, for the same two reasons: a
+ * `<span>` carrying a click handler is invisible to a keyboard, and a
+ * `<button>` inside a `<button>` is markup the browser silently un-nests.
+ */
+export const PlListItem = /* @__PURE__ */ React.forwardRef(function PlListItem({ startIcon, endIcon, description, action, href, selected = false, disabled = false, className, children, onClick, ...props }, ref) {
+    const { size, density, dividers } = React.useContext(ListContext);
+    const interactive = Boolean(onClick || href) && !disabled;
+    const padX = rowPaddingXClasses[density][size];
+    const padY = rowPaddingYClasses[density][size];
+    const bodyClassNames = [
+        'flex min-w-0 flex-1 items-center text-start',
+        padX,
+        padY,
+        gapClasses[size],
+        sheetBodyClasses[size],
+        transitionClasses,
+        iconClasses,
+        // Squared off when the rows are ruled, for the reason `dividerClasses`
+        // exists: a tile and a line are two different ideas about what a row is.
+        dividers ? '' : rowRadiusClasses[size],
+        // An if/else rather than stacked variants: two Tailwind classes of equal
+        // specificity resolve by their order in the generated stylesheet.
+        disabled
+            ? 'cursor-not-allowed opacity-50 saturate-[0.35]'
+            : selected
+                ? 'bg-(--p-soft-press) font-medium text-(--p-accent)'
+                : '',
+        interactive ? `cursor-pointer ${focusRingClasses}` : '',
+        // Hover deepens the same tint `selected` already uses, one step down, so a
+        // hovered row and the chosen row are the same idea at two strengths.
+        interactive && !selected ? 'hover:bg-(--p-soft)' : '',
+        interactive && selected ? 'hover:bg-(--p-soft-press)' : ''
+    ]
+        .filter(Boolean)
+        .join(' ');
+    const body = (_jsxs(_Fragment, { children: [hasContent(startIcon) ? (_jsx("span", { className: "flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)", children: startIcon })) : null, _jsxs("span", { className: "flex min-w-0 flex-1 flex-col", children: [hasContent(children) ? _jsx("span", { className: "truncate", children: children }) : null, hasContent(description) ? (_jsx("span", { className: `truncate text-(--plass-muted-fg) ${metaTextClasses[size]}`, children: description })) : null] }), hasContent(endIcon) ? (_jsx("span", { className: "flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)", children: endIcon })) : null] }));
+    return (_jsxs("li", { ref: ref, className: ['flex w-full items-center', className ?? ''].filter(Boolean).join(' '), ...props, children: [interactive && href ? (_jsx("a", { href: href, className: bodyClassNames, "aria-current": selected ? 'page' : undefined, onClick: onClick, children: body })) : interactive ? (_jsx("button", { type: "button", className: bodyClassNames, "aria-current": selected ? true : undefined, onClick: onClick, children: body })) : (_jsx("div", { className: bodyClassNames, "aria-disabled": disabled || undefined, children: body })), hasContent(action) ? (_jsx("div", { className: `flex shrink-0 items-center ${padX}`, children: action })) : null] }));
+});

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

@@ -0,0 +1,2 @@
+export { PlList, PlListItem } from './PlList.js';
+export type { PlListItemProps, PlListProps } from './PlList.js';

package/dist/components/list/index.js

@@ -0,0 +1 @@
+export { PlList, PlListItem } from './PlList.js';

package/dist/components/menu/PlMenu.d.ts

@@ -0,0 +1,210 @@
+import * as React from 'react';
+import type { PlassAlign, PlassColor, PlassSide, PlassStyleProps } from '../../types.js';
+/**
+ * A menu takes `size`, `color` and `density` and stops there.
+ *
+ * There is no `variant`, for the reason `PlModal` has none: the three materials
+ * answer "how much does this surface assert itself against the page", and a
+ * popup that has taken the pointer has already answered it. There is no
+ * `elevation` either — a menu genuinely floats, which is the one case the
+ * ladder exists for, so it is fixed at its top rung.
+ */
+interface MenuSurfaceProps extends Pick<PlassStyleProps, 'size' | 'color' | 'density'> {
+    className?: string;
+    style?: React.CSSProperties;
+}
+export interface PlMenuProps extends MenuSurfaceProps {
+    /**
+     * The element that opens the menu, wired up by Base UI. Optional — a
+     * controlled menu opened from elsewhere needs no trigger of its own.
+     */
+    trigger?: React.ReactElement;
+    /** Whether the menu is open. Use with `onOpenChange` for a controlled menu. */
+    open?: boolean;
+    /** Whether it starts open, for an uncontrolled one. */
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Which edge of the trigger it hangs off. @default 'bottom' */
+    side?: PlassSide;
+    /** Where it sits along that edge. @default 'start' */
+    align?: PlassAlign;
+    /** Distance from the trigger, in pixels. @default 6 */
+    sideOffset?: number;
+    /** Whether the page behind is taken away while the menu is open. @default true */
+    modal?: boolean;
+    /**
+     * Opens on hover as well as on click. For a menu bar, where crossing the row
+     * with an open menu should walk through the others rather than close them.
+     * @default false
+     */
+    openOnHover?: boolean;
+    /** Whether the arrow keys wrap from the last row back to the first. @default true */
+    loopFocus?: boolean;
+    /** Unavailable. The trigger stops opening anything. */
+    disabled?: boolean;
+    /** The rows. */
+    children?: React.ReactNode;
+}
+export interface PlContextMenuProps extends MenuSurfaceProps {
+    /** The rows, exactly as they are written inside a `PlMenu`. */
+    content: React.ReactNode;
+    /**
+     * The area that answers a right-click or a long press. Rendered inside a
+     * `<div>` of Base UI's, which is what listens for the gesture.
+     */
+    children: React.ReactNode;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** @default true */
+    loopFocus?: boolean;
+    disabled?: boolean;
+}
+export interface PlMenuItemProps {
+    /** What the row does. Not given, and not a link, the row is a label. */
+    onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+    /** Renders the row as a real `<a>`. A menu of links has to be links. */
+    href?: string;
+    /** Where the link opens — `_blank` and the rest. Ignored without `href`. */
+    target?: string;
+    /** Content before the label — an icon, a swatch, a check. */
+    startIcon?: React.ReactNode;
+    /** Content after the label, before any `shortcut`. */
+    endIcon?: React.ReactNode;
+    /**
+     * The keystroke that does the same thing, set at the end of the row and
+     * muted. Text only — the row does not bind it, the application does.
+     */
+    shortcut?: React.ReactNode;
+    /** A second line under the label, one step down the type scale and muted. */
+    description?: React.ReactNode;
+    /**
+     * Re-points the row's colour family — `danger` for the one that deletes.
+     * Defaults to the menu's own.
+     */
+    color?: PlassColor;
+    /** Whether picking the row closes the menu. @default true */
+    closeOnClick?: boolean;
+    /** Unavailable. Still listed, and still found by typeahead. */
+    disabled?: boolean;
+    /** What typeahead matches against, when the label is not a plain string. */
+    label?: string;
+    /** The label. */
+    children?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export interface PlMenuSubmenuProps {
+    /** The label on the row that opens it. */
+    label?: React.ReactNode;
+    startIcon?: React.ReactNode;
+    disabled?: boolean;
+    /** Which edge of the parent row it opens against. @default 'right' */
+    side?: PlassSide;
+    /** Distance from the parent menu, in pixels. @default 4 */
+    sideOffset?: number;
+    /** The nested rows. */
+    children?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export interface PlMenuGroupProps {
+    /** The heading over the group. Wired to it by Base UI. */
+    label?: React.ReactNode;
+    children?: React.ReactNode;
+    className?: string;
+}
+export interface PlMenuCheckboxItemProps extends Omit<PlMenuItemProps, 'href' | 'target' | 'startIcon' | 'onClick'> {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+    /**
+     * Whether ticking the row closes the menu. `false` here, against the `true` a
+     * plain row takes: a list of things to tick is a list you tick more than one
+     * of.
+     * @default false
+     */
+    closeOnClick?: boolean;
+}
+export interface PlMenuRadioGroupProps {
+    value?: string | number;
+    defaultValue?: string | number;
+    onValueChange?: (value: string | number) => void;
+    disabled?: boolean;
+    children?: React.ReactNode;
+    className?: string;
+}
+export interface PlMenuRadioItemProps extends Omit<PlMenuItemProps, 'href' | 'target' | 'startIcon' | 'onClick'> {
+    /** What this row sets the group to. */
+    value: string | number;
+    /** @default false */
+    closeOnClick?: boolean;
+}
+export type PlMenuSeparatorProps = React.ComponentPropsWithoutRef<'div'>;
+/**
+ * One row of a menu.
+ *
+ * Renders a real `<a>` when it is given an `href` and Base UI's own item
+ * otherwise — the same split `PlListItem` makes, for the same reason. A menu of
+ * links that are not links cannot be opened in a new tab, cannot be copied, and
+ * tells a screen reader the wrong thing about every one of them.
+ */
+export declare function PlMenuItem({ onClick, href, target, startIcon, endIcon, shortcut, description, color, closeOnClick, disabled, label, children, className, style }: PlMenuItemProps): React.JSX.Element;
+/** A row that ticks. The tick lands in the same slot a `startIcon` would. */
+export declare function PlMenuCheckboxItem({ checked, defaultChecked, onCheckedChange, endIcon, shortcut, description, color, closeOnClick, disabled, label, children, className, style }: PlMenuCheckboxItemProps): React.JSX.Element;
+/** One choice out of a set. Wraps the rows that make up the set. */
+export declare function PlMenuRadioGroup({ value, defaultValue, onValueChange, disabled, children, className }: PlMenuRadioGroupProps): React.JSX.Element;
+/**
+ * A row inside a `PlMenuRadioGroup`.
+ *
+ * Marked with a dot rather than a tick, which is the same distinction
+ * `PlCheckbox` and `PlRadioGroup` make everywhere else: a tick says "and", a dot
+ * says "instead of".
+ */
+export declare function PlMenuRadioItem({ value, endIcon, shortcut, description, color, closeOnClick, disabled, label, children, className, style }: PlMenuRadioItemProps): React.JSX.Element;
+/** A named run of rows. The label is a heading, not a row — it cannot be picked. */
+export declare function PlMenuGroup({ label, children, className }: PlMenuGroupProps): React.JSX.Element;
+/** The hairline between two runs of rows. */
+export declare function PlMenuSeparator({ className, ...props }: PlMenuSeparatorProps): React.JSX.Element;
+/**
+ * A menu inside a menu.
+ *
+ * The row that opens it is the same row every other item is, wearing a chevron —
+ * and it opens on hover, on <kbd>Enter</kbd> and on the arrow key that points at
+ * it, all of which is Base UI's. What is here is the surface and the glyph.
+ *
+ * Nesting is unlimited: a `PlMenuSubmenu` renders its children inside a popup
+ * that is itself a menu, so a submenu of a submenu needs no different component.
+ */
+export declare function PlMenuSubmenu({ label, startIcon, disabled, side, sideOffset, children, className, style }: PlMenuSubmenuProps): React.JSX.Element;
+/**
+ * A list of actions that appears when something is pressed.
+ *
+ * Everything that makes a menu a menu rather than a floating list of `<div>`s is
+ * Base UI's: roving focus with the arrow keys, <kbd>Home</kbd> and
+ * <kbd>End</kbd>, typeahead, <kbd>Esc</kbd>, closing on an outside click,
+ * restoring focus to the trigger, submenus opening on hover with the safe
+ * triangle so a diagonal reach does not close them, and the `menu` / `menuitem`
+ * roles that make any of it mean something to a screen reader. What is here is
+ * the surface, the ladders and the row layout.
+ *
+ * The rows are **composed rather than passed as data** — the opposite of
+ * `PlSelect`, and deliberately. A select's options are values from a list a
+ * caller already has; a menu's rows are *code*, each one a different handler, a
+ * different icon, sometimes a submenu. Data would mean an `items` type with a
+ * variant for every shape a row can take, which is a component tree spelled as a
+ * discriminated union.
+ */
+export declare function PlMenu({ size, color, density, trigger, open, defaultOpen, onOpenChange, side, align, sideOffset, modal, openOnHover, loopFocus, disabled, className, style, children }: PlMenuProps): React.JSX.Element;
+/**
+ * The same menu, opened by a right-click or a long press instead of by a button.
+ *
+ * It takes the rows as `content` and the area as `children`, which is
+ * `PlTooltip`'s shape rather than `PlMenu`'s — because here the trigger is not
+ * one element you hand over, it is a region of the page, and the region is the
+ * thing being wrapped. Base UI positions the popup at the pointer rather than
+ * against an anchor, and the long press is what makes it reachable on a touch
+ * screen at all.
+ */
+export declare function PlContextMenu({ size, color, density, content, children, open, defaultOpen, onOpenChange, loopFocus, disabled, className, style }: PlContextMenuProps): React.JSX.Element;
+export {};