@ciridae/ui 1.0.3 → 1.0.4

package/dist/components/input.js

@@ -16,7 +16,7 @@ import { useCiridaeLocale } from "./locale.js";
 const fieldFace = {
     border: "1px solid token(colors.border.control)",
     borderRadius: "control",
-    background: "bg.field",
+    background: "bg.formField",
     color: "fg.primary",
     fontFamily: "sans",
     fontWeight: "medium",
@@ -34,13 +34,19 @@ const field = cva({
     base: { ...fieldFace, width: "100%", lineHeight: "tight" },
     variants: {
         size: {
-            /** Matches the small button, for forms and filters. */
+            /** The editor an inline-edit row opens in place of its value. */
+            inline: {
+                height: "field.inline",
+                paddingInline: "menu.itemInline",
+                fontSize: "body",
+            },
+            /** For a row of filters, beside compact selects and small buttons. */
             small: {
                 height: "control.compact",
                 paddingInline: "control.compactInline",
                 fontSize: "caption",
             },
-            /** The Round 2 field: the height of the default button. */
+            /** The field: the height of the default button. */
             medium: {
                 height: "control.default",
                 paddingInline: "control.compactInline",
@@ -55,9 +61,9 @@ const field = cva({
             },
         },
     },
-    defaultVariants: { size: "small" },
+    defaultVariants: { size: "medium" },
 });
-export function Input({ className, size = "small", ...props }) {
+export function Input({ className, size = "medium", ...props }) {
     const fieldIds = useFieldControl(props);
     return (_jsx(BaseInput, { ...props, ...fieldIds, className: cx(field({ size }), className), "data-ciridae-ui": "" }));
 }
@@ -179,12 +185,13 @@ export function SearchInput({ variant = "regular", size: ownSize, width = "fill"
                         onValueCommit(event.currentTarget.value);
                     }
                     onKeyDown?.(event);
-                }, className: cx(searchText({ variant, size }), className) }), shortcut && _jsx(ShortcutHint, { hotkey: shortcut })] }));
+                }, className: cx(searchText({ variant, size }), className) }), shortcut && _jsx(ShortcutHint, { boxed: true, hotkey: shortcut })] }));
 }
 /*
  * The Round 2 search field is an underline, not a box: an icon, the text, and a clear button on
- * one hairline. Focus turns that hairline into a 2px accent line, as the frames draw it, rather
- * than boxing a field that has no box.
+ * one hairline. Hovered it takes the hover wash, and focused the ring, both on its own nearly
+ * square corners. Quiet, in a menu or popover, the hairline is the sheet's divider and nothing
+ * else changes: the popup opens with the field focused, and its caret shows that.
  */
 const underline = cva({
     base: {
@@ -195,10 +202,6 @@ const underline = cva({
         paddingInline: "search.inline",
         borderBottom: "1px solid token(colors.border.control)",
         color: "fg.muted",
-        "&:has(:focus-visible)": {
-            borderBottomColor: "border.focus",
-            boxShadow: "inset 0 -1px 0 0 token(colors.border.focus)",
-        },
         "&:has(:disabled)": { opacity: "disabled" },
     },
     variants: {
@@ -206,8 +209,16 @@ const underline = cva({
             regular: { height: "control.default" },
             compact: { height: "control.compact" },
         },
+        quiet: {
+            false: {
+                borderRadius: "control",
+                _hover: { background: "bg.controlHover" },
+                "&:has(:focus-visible)": { focusRing: "outer" },
+            },
+            true: { paddingInline: "none", borderBottomColor: "border.divider" },
+        },
     },
-    defaultVariants: { size: "regular" },
+    defaultVariants: { size: "regular", quiet: false },
 });
 const underlineText = css({
     flex: "1",
@@ -242,9 +253,9 @@ const clear = css({
     _hover: { color: "fg.primary", background: "bg.hover" },
     _focusVisible: { focusRing: "inset" },
 });
-export function SearchField({ size: ownSize, onClear, shortcut, wrapperClassName, className, disabled, ...props }) {
+export function SearchField({ size: ownSize, onClear, quiet = false, shortcut, wrapperClassName, className, disabled, ...props }) {
     const inToolbar = useInToolbar();
     const { labels } = useCiridaeLocale();
     const size = ownSize ?? (inToolbar ? "compact" : "regular");
-    return (_jsxs("label", { className: cx(underline({ size }), wrapperClassName), "data-ciridae-ui": "", children: [_jsx(MagnifyingGlassIcon, { className: icon({ size: "small" }) }), _jsx(BaseInput, { ...props, type: "search", disabled: disabled, className: cx(underlineText, className) }), onClear && (_jsx("button", { type: "button", className: clear, "aria-label": labels.common.clear, disabled: disabled, onClick: onClear, children: _jsx(XIcon, { className: icon({ size: "small" }) }) })), shortcut && !onClear && _jsx(ShortcutHint, { hotkey: shortcut })] }));
+    return (_jsxs("label", { className: cx(underline({ size, quiet }), wrapperClassName), "data-ciridae-ui": "", children: [_jsx(MagnifyingGlassIcon, { className: icon({ size: "small" }) }), _jsx(BaseInput, { ...props, type: "search", disabled: disabled, className: cx(underlineText, className) }), onClear && (_jsx("button", { type: "button", className: clear, "aria-label": labels.common.clear, disabled: disabled, onClick: onClear, children: _jsx(XIcon, { className: icon({ size: "small" }) }) })), shortcut && !onClear && _jsx(ShortcutHint, { boxed: true, hotkey: shortcut })] }));
 }

package/dist/components/keycap.d.ts

@@ -1,12 +1,16 @@
 import { type Hotkey } from "./hotkeys.js";
 import type { ComponentProps } from "react";
-/** One key as a 24px cap, such as the `K` after a search field. */
-export declare function Keycap({ className, ...props }: ComponentProps<"kbd">): import("react").JSX.Element;
+/**
+ * One key as a 22px square cap, such as the `K` after a search field. A label of more than one
+ * character, such as `Esc`, takes the wider word cap on its own.
+ */
+export declare function Keycap({ className, children, ...props }: ComponentProps<"kbd">): import("react").JSX.Element;
 /**
  * A hotkey as one quiet line, as the hotkeys layer writes it: `Mod` is "⌘" on a Mac and "Ctrl"
- * elsewhere, and a sequence's steps are spaced ("G I"). `Keycap` is the boxed key for a place
- * that wants it.
+ * elsewhere, and a sequence's steps are spaced ("G I"). `boxed` sets each key in its own
+ * `Keycap`, 2px apart, as a menu row or a search field shows it.
  */
-export declare function ShortcutHint({ hotkey, className, ...props }: ComponentProps<"kbd"> & {
+export declare function ShortcutHint({ hotkey, boxed, className, ...props }: ComponentProps<"kbd"> & {
     hotkey: Hotkey;
+    boxed?: boolean;
 }): import("react").JSX.Element;

package/dist/components/keycap.js

@@ -1,18 +1,44 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { css, cx } from "#primitives/css";
+import { css, cva, cx } from "#primitives/css";
 import { detectPlatform, formatForDisplay } from "./hotkeys.js";
-const keycap = css({
-    display: "grid",
-    placeItems: "center",
-    width: "control.shortcut",
-    height: "control.shortcut",
-    border: "1px solid token(colors.border.glass)",
-    borderRadius: "keycap",
-    background: "bg.hover",
-    color: "fg.muted",
-    fontSize: "body",
-    fontFamily: "sans",
-    lineHeight: "tight",
+/*
+ * A key on the raised face: a glyph such as ⌘ or ↵ sits in a 22px square, and a word such as Esc
+ * in a wider cap. The edge is the canvas hairline.
+ */
+const keycap = cva({
+    base: {
+        display: "inline-grid",
+        placeItems: "center",
+        flexShrink: "0",
+        width: "control.chip",
+        height: "control.chip",
+        paddingInline: "none",
+        border: "1px solid token(colors.border.canvas)",
+        borderRadius: "keycap",
+        background: "token(gradients.raised)",
+        color: "fg.primary",
+        fontFamily: "sans",
+        fontSize: "code",
+        fontWeight: "medium",
+        letterSpacing: "compact",
+        lineHeight: "tight",
+        whiteSpace: "nowrap",
+        "& > svg": { fontSize: "icon.small" },
+    },
+    variants: {
+        // A longer word than Esc, such as Shift, still widens the cap rather than spilling out of it.
+        label: {
+            glyph: {},
+            word: { width: "auto", minWidth: "control.wordKeycap", paddingInline: "control.iconGap" },
+        },
+    },
+});
+const keycaps = css({
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "control.trackInset",
+    flexShrink: "0",
+    _phone: { display: "none" },
 });
 // A quiet inline hint, as a menu writes its shortcuts: no box, no extra height, and none on a
 // phone, which has no keyboard to press it on.
@@ -31,15 +57,27 @@ const shortcut = css({
 });
 // "⌘K" on a Mac, as a menu writes it; "Ctrl+K" elsewhere.
 const separatorToken = detectPlatform() === "mac" ? "" : undefined;
-/** One key as a 24px cap, such as the `K` after a search field. */
-export function Keycap({ className, ...props }) {
-    return _jsx("kbd", { ...props, className: cx(keycap, className), "data-ciridae-ui": "" });
+// Between the keys of a boxed hint, split apart again so each takes its own cap.
+const keySeparator = "\n";
+/**
+ * One key as a 22px square cap, such as the `K` after a search field. A label of more than one
+ * character, such as `Esc`, takes the wider word cap on its own.
+ */
+export function Keycap({ className, children, ...props }) {
+    const holdsWord = typeof children === "string" && Array.from(children).length > 1;
+    return (_jsx("kbd", { ...props, className: cx(keycap({ label: holdsWord ? "word" : "glyph" }), className), "data-ciridae-ui": "", children: children }));
 }
 /**
  * A hotkey as one quiet line, as the hotkeys layer writes it: `Mod` is "⌘" on a Mac and "Ctrl"
- * elsewhere, and a sequence's steps are spaced ("G I"). `Keycap` is the boxed key for a place
- * that wants it.
+ * elsewhere, and a sequence's steps are spaced ("G I"). `boxed` sets each key in its own
+ * `Keycap`, 2px apart, as a menu row or a search field shows it.
  */
-export function ShortcutHint({ hotkey, className, ...props }) {
+export function ShortcutHint({ hotkey, boxed = false, className, ...props }) {
+    if (boxed) {
+        const keys = formatForDisplay(hotkey, { separatorToken: keySeparator })
+            .split(/[\n ]/)
+            .filter((key) => key !== "");
+        return (_jsx("kbd", { ...props, dir: "ltr", "aria-label": formatForDisplay(hotkey, { useSymbols: false }), className: cx(keycaps, className), "data-ciridae-ui": "", children: keys.map((key, index) => (_jsx(Keycap, { "aria-hidden": "true", children: key }, index))) }));
+    }
     return (_jsx("kbd", { ...props, dir: "ltr", "aria-label": formatForDisplay(hotkey, { useSymbols: false }), className: cx(shortcut, className), "data-ciridae-ui": "", children: formatForDisplay(hotkey, { separatorToken }) }));
 }

package/dist/components/lightbox.js

@@ -58,7 +58,8 @@ const stage = css({
         height: "100%",
         border: "0",
         borderRadius: "action",
-        background: "bg.card",
+        // Solid, so a document with no background of its own does not show the scrim through it.
+        background: "bg.surface",
     },
 });
 const step = css({

package/dist/components/locale.d.ts

@@ -63,6 +63,9 @@ export declare const englishLabels: {
         label: string;
         previous: string;
         next: string;
+        /** The rows a page shows and the page size, from numbers already formatted. */
+        summary: (first: string, last: string, total: string) => string;
+        perPage: (count: string) => string;
     };
     calendar: {
         previousMonth: string;
@@ -76,6 +79,9 @@ export declare const englishLabels: {
     };
     commandMenu: {
         title: string;
+        /** The footer's key hints beside the close key. */
+        move: string;
+        open: string;
     };
     keyboard: {
         shortcuts: string;
@@ -230,6 +236,8 @@ export declare const englishLabels: {
         sendMessage: string;
         stopped: string;
         failed: string;
+        /** The title of a failed reply's notice. */
+        couldNotAnswer: string;
         notSent: string;
         typing: string;
         resize: string;
@@ -372,6 +380,8 @@ export declare const englishLabels: {
         runToGo: string;
         runDoneLabel: (count: number) => string;
         runToGoLabel: (count: number) => string;
+        /** The folded finished stages, with their count. */
+        runDoneShort: (count: number) => string;
         checklistProgress: (done: number, total: number) => string;
     };
     settings: {

package/dist/components/locale.js

@@ -50,7 +50,14 @@ export const englishLabels = {
         parentPages: "Parent pages",
         environment: (label) => `${label} environment`,
     },
-    pagination: { label: "Pagination", previous: "Previous", next: "Next" },
+    pagination: {
+        label: "Pagination",
+        previous: "Previous",
+        next: "Next",
+        /** The rows a page shows and the page size, from numbers already formatted. */
+        summary: (first, last, total) => `Showing ${first} to ${last} of ${total}`,
+        perPage: (count) => `${count} per page`,
+    },
     calendar: { previousMonth: "Previous month", nextMonth: "Next month" },
     select: {
         placeholder: "Select…",
@@ -58,7 +65,12 @@ export const englishLabels = {
         searchLabel: "Search options",
         filters: "Filters",
     },
-    commandMenu: { title: "Command menu" },
+    commandMenu: {
+        title: "Command menu",
+        /** The footer's key hints beside the close key. */
+        move: "Move",
+        open: "Open",
+    },
     keyboard: {
         shortcuts: "Keyboard shortcuts",
         /** The group of a shortcut registered without one. */
@@ -206,6 +218,8 @@ export const englishLabels = {
         sendMessage: "Send message",
         stopped: "Stopped",
         failed: "Failed",
+        /** The title of a failed reply's notice. */
+        couldNotAnswer: "Couldn't finish that answer",
         notSent: "Not sent",
         typing: "Typing",
         resize: "Resize",
@@ -342,6 +356,8 @@ export const englishLabels = {
         runToGo: "To go",
         runDoneLabel: (count) => `${count} stages done`,
         runToGoLabel: (count) => `${count} stages to go`,
+        /** The folded finished stages, with their count. */
+        runDoneShort: (count) => `${count} done`,
         checklistProgress: (done, total) => `${done} of ${total}`,
     },
     settings: { navigation: "Settings" },

package/dist/components/log-entry.d.ts

@@ -0,0 +1,40 @@
+import type { ComponentProps, ReactNode } from "react";
+export type LogEntryProps = Omit<ComponentProps<"div">, "children"> & {
+    /** When it happened, epoch milliseconds, written as the time of day. */
+    at: number;
+    /** Who did it: a person's avatar, or a system's or an agent's icon. */
+    actor: ReactNode;
+    /** What happened, such as "The agent drafted remittance advice for INV-4799". */
+    headline: ReactNode;
+    /** A line more about it, such as what it waits on. */
+    detail?: ReactNode;
+    /** At the end of the row, such as a badge naming whether a person, a model or an agent did it. */
+    badge?: ReactNode;
+    /** `comfortable` for a page's log, `compact` for one line per entry, `panel` in a drawer. */
+    density?: "comfortable" | "compact" | "panel";
+    selected?: boolean;
+    /** A hairline under the row, between it and the next. */
+    divider?: boolean;
+    /** Makes the row a button, such as one that opens the entry beside the log. */
+    onSelect?: () => void;
+};
+/** One thing that happened, as a row of a log. */
+export declare function LogEntry({ at, actor, headline, detail, badge, density, selected, divider, onSelect, className, ...props }: LogEntryProps): import("react").JSX.Element;
+export type LogGroupHeaderProps = Omit<ComponentProps<"div">, "children"> & {
+    /** What the group is, such as "Today". */
+    label: ReactNode;
+    /** Beside it, quieter, such as the date. */
+    meta?: ReactNode;
+};
+/** A log's heading over a group of its rows, such as a day's: "Today", then "Oct 6". */
+export declare function LogGroupHeader({ label, meta, className, ...props }: LogGroupHeaderProps): import("react").JSX.Element;
+export type LogActorProps = {
+    /** Who or what acted, read out in place of the mark. */
+    name: string;
+    /** A person's photo; their initials stand in without one. */
+    src?: string | null;
+    /** For an agent, a sync or a rule: its icon in place of a person's photo or initials. */
+    icon?: ReactNode;
+};
+/** Who did a log entry's thing, as the mark for its `actor`. */
+export declare function LogActor({ name, src, icon }: LogActorProps): import("react").JSX.Element;

package/dist/components/log-entry.js

@@ -0,0 +1,146 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * A record's activity as a log: a row per thing that happened, under a heading per day. A row is
+ * the time, who did it, what happened and a line more about it, and a trailing badge such as
+ * whether a person, a model or an agent did it. `comfortable` is a page's log, `compact` puts the
+ * line more beside what happened, and `panel` is the log in a drawer or side panel.
+ */
+import { css, cx } from "#primitives/css";
+import { Avatar } from "./data-display.js";
+import { useCiridaeLocale } from "./locale.js";
+const entry = css({
+    display: "flex",
+    alignItems: "flex-start",
+    gap: "layout.clusterGap",
+    width: "100%",
+    minWidth: "0",
+    paddingBlock: "log.entryBlock",
+    paddingInline: "log.entryInline",
+    color: "fg.primary",
+    _hover: { background: "token(gradients.rowHover)" },
+    "&[data-selected], &[data-selected]:hover": { background: "token(gradients.selected)" },
+    "&[role=button]": { cursor: "pointer" },
+    _focusVisible: { focusRing: "inset" },
+    "&[data-divider]": { borderBottom: "1px solid token(colors.border.divider)" },
+    "&[data-density=compact]": { alignItems: "center", paddingBlock: "log.entryCompactBlock" },
+    // A compact row's rule sits inside its padding, so it stays the kit's 40px with or without one.
+    "&[data-density=compact][data-divider]": {
+        paddingBottom: "calc(token(spacing.log.entryCompactBlock) - token(sizes.border.hairline))",
+    },
+    "&[data-density=panel]": {
+        paddingBlock: "log.entryPanelBlock",
+        paddingInline: "log.entryPanelInline",
+    },
+    // The time, the actor and the badge each sit in a line as tall as the actor, level with the
+    // headline beside them.
+    "& > [data-time], & > [data-actor], & > [data-badge]": {
+        display: "flex",
+        flexShrink: "0",
+        alignItems: "center",
+        height: "avatar.menu",
+    },
+    "& > [data-time]": {
+        width: "log.timeColumn",
+        color: "fg.subtle",
+        fontSize: "code",
+        fontWeight: "medium",
+        lineHeight: "tight",
+        fontVariantNumeric: "tabular-nums",
+        whiteSpace: "nowrap",
+    },
+    "& > [data-actor]": { justifyContent: "center", width: "avatar.menu" },
+    "& > [data-body]": {
+        display: "grid",
+        gridTemplateColumns: "minmax(0, 1fr)",
+        flex: "1",
+        minWidth: "0",
+    },
+    // One line as tall as the actor, ending in an ellipsis where the row is too narrow for it.
+    "& [data-headline]": {
+        display: "flex",
+        alignItems: "center",
+        minHeight: "avatar.menu",
+        fontSize: "body",
+        fontWeight: "medium",
+        lineHeight: "tight",
+        "& > span": {
+            minWidth: "0",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap",
+        },
+    },
+    "& [data-detail]": {
+        color: "fg.label",
+        fontSize: "code",
+        fontWeight: "medium",
+        lineHeight: "log",
+    },
+    "&[data-density=compact] > [data-body]": {
+        display: "flex",
+        alignItems: "center",
+        gap: "layout.controlGap",
+        "& > *": { minWidth: "0", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" },
+        // Block, so a long headline ends in an ellipsis; its own line height, so it centres with
+        // the detail.
+        "& > [data-headline]": { display: "block", minHeight: "auto" },
+        "& > [data-detail]": { flex: "1", lineHeight: "tight" },
+    },
+});
+// The log's actor mark: a person's photo or initials, or an icon for an agent, a sync or a rule,
+// on the raised glass circle. The icon is the small icon's size at every density.
+const actorIcon = css({
+    display: "inline-grid",
+    placeItems: "center",
+    flexShrink: "0",
+    width: "avatar.menu",
+    height: "avatar.menu",
+    borderRadius: "round",
+    background: "token(gradients.raised)",
+    color: "fg.label",
+    "--edge": "token(gradients.border.raised)",
+    "& > svg": { fontSize: "icon.small" },
+});
+// Initials sit in the label grey here, where the avatar's own are the primary text colour; the
+// extra attribute outranks the avatar's kind rule.
+const actorPerson = css({ "&[data-ciridae-ui][data-kind=user]": { color: "fg.label" } });
+const groupHeader = css({
+    display: "flex",
+    alignItems: "center",
+    gap: "layout.controlGap",
+    paddingTop: "panel.comfortable",
+    paddingInline: "panel.default",
+    paddingBottom: "layout.tightGap",
+    fontSize: "code",
+    fontWeight: "medium",
+    lineHeight: "tight",
+    "& > [data-label]": { color: "fg.primary" },
+    "& > [data-meta]": { color: "fg.subtle" },
+});
+/** One thing that happened, as a row of a log. */
+export function LogEntry({ at, actor, headline, detail, badge, density = "comfortable", selected = false, divider = true, onSelect, className, ...props }) {
+    const { formatTime } = useCiridaeLocale();
+    const selectOnKey = (event) => {
+        if (event.target !== event.currentTarget || (event.key !== "Enter" && event.key !== " "))
+            return;
+        event.preventDefault();
+        onSelect?.();
+    };
+    return (_jsxs("div", { ...props, ...(onSelect && {
+            role: "button",
+            tabIndex: 0,
+            "aria-pressed": selected,
+            onClick: onSelect,
+            onKeyDown: selectOnKey,
+        }), className: cx(entry, className), "data-ciridae-ui": "", "data-density": density, "data-selected": selected || undefined, "data-divider": divider || undefined, children: [_jsx("time", { "data-time": "", dateTime: new Date(at).toISOString(), children: formatTime(at) }), _jsx("span", { "data-actor": "", children: actor }), _jsxs("div", { "data-body": "", children: [_jsx("span", { "data-headline": "", children: _jsx("span", { children: headline }) }), detail && _jsx("span", { "data-detail": "", children: detail })] }), badge && _jsx("span", { "data-badge": "", children: badge })] }));
+}
+/** A log's heading over a group of its rows, such as a day's: "Today", then "Oct 6". */
+export function LogGroupHeader({ label, meta, className, ...props }) {
+    return (_jsxs("div", { ...props, className: cx(groupHeader, className), "data-ciridae-ui": "", children: [_jsx("span", { "data-label": "", children: label }), meta && _jsx("span", { "data-meta": "", children: meta })] }));
+}
+/** Who did a log entry's thing, as the mark for its `actor`. */
+export function LogActor({ name, src, icon }) {
+    if (icon)
+        return (_jsx("span", { role: "img", "aria-label": name, className: actorIcon, "data-ciridae-ui": "", "data-edge": "gradient", children: icon }));
+    return _jsx(Avatar, { label: name, src: src, size: "menu", className: actorPerson });
+}

package/dist/components/mention-input.js

@@ -244,7 +244,7 @@ const field = css({
     },
     "&[aria-disabled=true]": { cursor: "default", opacity: "0.5" },
 });
-/* The picker: a flush menu over the caret, its rows edge to edge. */
+/* The picker: a flush menu over the caret on the popovers' glass, its rows edge to edge. */
 const picker = css({
     zIndex: "popover",
     display: "grid",
@@ -254,9 +254,10 @@ const picker = css({
     overflowY: "auto",
     border: "1px solid token(colors.border.control)",
     borderRadius: "action",
-    background: "bg.card",
+    background: "bg.popover",
+    backdropFilter: "blur(token(blurs.popover))",
     color: "fg.primary",
-    boxShadow: "card",
+    boxShadow: "soft",
     outline: "none",
 });
 const pickerRow = css({

package/dist/components/menu.d.ts

@@ -12,7 +12,7 @@ export type MenuItem = {
     variant?: "default" | "danger";
     /** Shows a check mark, for the active choice in a set. */
     checked?: boolean;
-    /** Muted after the label, such as what a choice covers. */
+    /** Muted at the row's end, such as what a choice covers. */
     meta?: string;
     /** The hotkey that does what the item does, at the row's end; the host binds it. */
     shortcut?: Hotkey;
@@ -59,8 +59,12 @@ export type MenuProps = Omit<ComponentProps<typeof BaseMenu.Root>, "children"> &
     items: readonly MenuItem[];
     /** Which edge of the trigger the menu lines up with; `end` keeps a right-hand menu inside its container. */
     align?: "start" | "end";
+    /** How far the menu floats from its trigger, in px. Defaults to the kit's 4. */
+    sideOffset?: number;
+    /** Makes the menu exactly as wide as its trigger rather than at least `overlay.menu`. */
+    matchTriggerWidth?: boolean;
 };
-export declare function Menu({ trigger, items, align, ...rootProps }: MenuProps): import("react").JSX.Element;
+export declare function Menu({ trigger, items, align, sideOffset, matchTriggerWidth, ...rootProps }: MenuProps): import("react").JSX.Element;
 export type OverflowMenuProps = Omit<MenuProps, "trigger" | "align"> & {
     /** The button's accessible name, such as "Record actions" or "More for INV-4821". */
     label: string;