@viraui/react 1.0.13 → 1.0.14

package/dist/components/fit-text/fit-text.css

@@ -1 +1 @@
-@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-fit-text-captured-length{syntax:"<length>";inherits:true;initial-value:0}@property --vui-fit-text-max-font-size{syntax:"<length>";inherits:true;initial-value:calc(infinity * 1px)}.viraui__fit-text-module__FitText_CdAvq{--vui-fit-text-captured-length:initial;display:flex;container-type:inline-size;.viraui__fit-text-module__Container_bawpR{--vui-fit-text-captured-length:100cqi;--vui-fit-text-available-space:var(--vui-fit-text-captured-length);flex-grow:1;container-type:inline-size}.viraui__fit-text-module__Display_Hraif{--vui-fit-text-captured-length:100cqi;--vui-fit-text-ratio:tan(atan2(var(--vui-fit-text-available-space),var(--vui-fit-text-available-space) - var(--vui-fit-text-captured-length)));display:block;inline-size:var(--vui-fit-text-available-space);font-size:clamp(0px,1em * var(--vui-fit-text-ratio),var(--vui-fit-text-max-font-size));>*{font-size:1em;max-inline-size:none}}.viraui__fit-text-module__Reference_6wCx7{visibility:hidden;>*{font-size:inherit;max-inline-size:none}}}}
+@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --__fit-text-captured-length{syntax:"<length>";inherits:true;initial-value:0}@property --vui-fit-text-max-font-size{syntax:"<length>";inherits:true;initial-value:calc(infinity * 1px)}@property --__fit-text-available-space{syntax:"<length>";inherits:true;initial-value:0}@property --__fit-text-ratio{syntax:"<number>";inherits:false;initial-value:1}.viraui__fit-text-module__FitText_CdAvq{--__fit-text-captured-length:initial;display:flex;container-type:inline-size;.viraui__fit-text-module__Container_bawpR{--__fit-text-captured-length:100cqi;--__fit-text-available-space:var(--__fit-text-captured-length);flex-grow:1;container-type:inline-size}.viraui__fit-text-module__Display_Hraif{--__fit-text-captured-length:100cqi;--__fit-text-ratio:tan(atan2(var(--__fit-text-available-space),var(--__fit-text-available-space) - var(--__fit-text-captured-length)));inline-size:var(--__fit-text-available-space);font-size:clamp(0px,1em * var(--__fit-text-ratio),var(--vui-fit-text-max-font-size));>*{font-size:1em;max-inline-size:none}}.viraui__fit-text-module__Reference_6wCx7{visibility:hidden;>*{font-size:inherit;max-inline-size:none}}}}

package/dist/components/fit-text/fit-text.guide.json

@@ -26,14 +26,12 @@
   "properties": {
     "react": {
       "maxFontSize": {
-        "description": "Caps the fitted font size using any valid CSS length string.",
-        "refCss": "max-font-size"
+        "description": "Caps the fitted font size using any valid CSS length string."
       }
     },
     "css": {
       "max-font-size": {
-        "description": "Upper bound for the fitted font size on the display slot.",
-        "refReact": "maxFontSize"
+        "description": "Upper bound for the fitted font size on the display slot."
       }
     }
   }

package/dist/components/icon-button/icon-button-link.guide.json

@@ -21,5 +21,56 @@
     "Passing children, addon, or addonPosition — not part of the public API",
     "Using IconButton with render={<a />} instead of IconButtonLink"
   ],
-  "related": ["IconButton", "ButtonLink", "Button", "Icon", "Spinner"]
+  "related": ["IconButton", "ButtonLink", "Button", "Icon", "Spinner"],
+  "properties": {
+    "react": {
+      "disabled": {
+        "description": "Marks the link inert via `aria-disabled` and prevents activation."
+      },
+      "icon": {
+        "description": "Icon rendered as the sole visible control content."
+      },
+      "loading": {
+        "description": "Shows a centered spinner overlay while preserving the original content width."
+      },
+      "pill": {
+        "description": "Applies a fully rounded pill shape."
+      },
+      "render": {
+        "description": "Replaces the default `a` root using Base UI render semantics (e.g. Next.js `Link`)."
+      },
+      "size": {
+        "description": "Controls the visual button size."
+      },
+      "variant": {
+        "description": "Selects the visual treatment matching Button."
+      }
+    },
+    "css": {
+      "background": {
+        "description": "Button fill; variant and state selectors preset this."
+      },
+      "color": {
+        "description": "Button label and icon color."
+      },
+      "height": {
+        "description": "Button block size; size prop presets via data attributes."
+      },
+      "icon-size": {
+        "description": "Addon icon size inside the button."
+      },
+      "padding-block": {
+        "description": "Vertical padding inside the button."
+      },
+      "padding-inline": {
+        "description": "Horizontal padding inside the button."
+      },
+      "radius": {
+        "description": "Corner radius; pill sets infinite radius via data-pill."
+      },
+      "spinner-color": {
+        "description": "Loading spinner color on the root."
+      }
+    }
+  }
 }

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

@@ -3,9 +3,9 @@ import { jsx } from "react/jsx-runtime";
 import "react";
 //#region src/components/icon-button/icon-button-link.tsx
 var IconButtonLink = ({ icon, size = "medium", ...otherProps }) => /* @__PURE__ */ jsx(ButtonLink, {
-	addon: icon,
 	size,
-	...otherProps
+	...otherProps,
+	addon: icon
 });
 //#endregion
 export { IconButtonLink };

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

@@ -13,7 +13,7 @@ type AccessibleNameProps = {
  * Typed wrapper over `Button` for icon-only actions. Requires an accessible name
  * via `aria-label` or `aria-labelledby`.
  */
-export type IconButtonProps = Omit<ButtonProps, 'children' | 'addonPosition' | 'size'> & AccessibleNameProps & {
+export type IconButtonProps = Omit<ButtonProps, 'children' | 'addon' | 'addonPosition' | 'size'> & AccessibleNameProps & {
     /**
      * Controls the visual button size.
      *

package/dist/components/icon-button/icon-button.guide.json

@@ -1,7 +1,7 @@
 {
   "name": "IconButton",
   "structure": "<IconButton icon={<Plus />} aria-label=\"Add\" />",
-  "summary": "Icon-only button that requires an accessible name through aria-label or aria-labelledby.",
+  "summary": "Icon-only button that shares Button visual chrome (--vui-button-* CSS) and requires an accessible name through aria-label or aria-labelledby.",
   "whenToUse": [
     "Compact toolbar or chrome actions identified only by icon",
     "Same size, variant, and loading model as Button without visible label",
@@ -18,9 +18,54 @@
     "Keep the accessible name stable when loading state changes"
   ],
   "antiPatterns": [
-    "Passing children or addonPosition — not part of the public API",
+    "Passing children, addon, or addonPosition — not part of the public API",
     "Using icon-only Button instead of IconButton",
     "Using IconButton with render={<a />} for links — use IconButtonLink"
   ],
-  "related": ["Button", "ButtonLink", "IconButtonLink", "Icon", "Spinner"]
+  "related": ["Button", "ButtonLink", "IconButtonLink", "Icon", "Spinner"],
+  "properties": {
+    "react": {
+      "icon": {
+        "description": "Icon rendered as the sole visible control content."
+      },
+      "loading": {
+        "description": "Shows a centered spinner overlay while preserving the original content width."
+      },
+      "pill": {
+        "description": "Applies a fully rounded pill shape to the button."
+      },
+      "size": {
+        "description": "Controls the visual button size."
+      },
+      "variant": {
+        "description": "Selects the visual treatment for the button."
+      }
+    },
+    "css": {
+      "background": {
+        "description": "Button fill; variant and state selectors preset this."
+      },
+      "color": {
+        "description": "Button label and icon color."
+      },
+      "height": {
+        "description": "Button block size; size prop presets via data attributes."
+      },
+      "icon-size": {
+        "description": "Addon icon size inside the button."
+      },
+      "padding-block": {
+        "description": "Vertical padding inside the button."
+      },
+      "padding-inline": {
+        "description": "Horizontal padding inside the button."
+      },
+      "radius": {
+        "description": "Corner radius; pill sets infinite radius via data-pill."
+      },
+      "spinner-color": {
+        "description": "Loading spinner color on the root."
+      }
+    }
+  }
 }

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

@@ -2,9 +2,9 @@ import { Button } from "../button/button.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/icon-button/icon-button.tsx
 var IconButton = ({ icon, size = "medium", ...otherProps }) => /* @__PURE__ */ jsx(Button, {
-	addon: icon,
 	size,
-	...otherProps
+	...otherProps,
+	addon: icon
 });
 //#endregion
 export { IconButton };

package/dist/components/index.d.ts

@@ -15,6 +15,7 @@ export * from './fit-text';
 export * from './icon-button';
 export * from './linear-progress';
 export * from './masonry';
+export * from './menu';
 export * from './meter';
 export * from './popover';
 export * from './progressive-blur';

package/dist/components/linear-progress/linear-progress.guide.json

@@ -24,17 +24,28 @@
     "Do not model disabled progress; Base UI Progress does not expose a disabled state.",
     "Do not hide the task label when multiple progress indicators are visible."
   ],
-  "related": ["Slider", "Spinner", "Skeleton", "Text"],
+  "related": ["Slider", "Spinner", "Skeleton", "Text", "Meter"],
   "properties": {
+    "react": {
+      "description": {
+        "description": "Static helper copy rendered with `Text` below the progress track."
+      },
+      "label": {
+        "description": "Visible label rendered through `Progress.Label` with shared internal `FieldLabel`."
+      },
+      "showValue": {
+        "description": "Renders the formatted current value via `Progress.Value` and `Text`."
+      }
+    },
     "css": {
-      "track-size": {
-        "description": "Progress track thickness on the root."
+      "indicator-color": {
+        "description": "Progress indicator color for determinate fill and indeterminate sweep."
       },
       "track-background": {
         "description": "Progress track background color."
       },
-      "indicator-color": {
-        "description": "Determinate progress indicator color."
+      "track-size": {
+        "description": "Progress track thickness on the root."
       }
     }
   }

package/dist/components/linear-progress/linear-progress.js

@@ -44,7 +44,6 @@ var LinearProgress = ({ className, description, label, showValue = false, value,
 			children: /* @__PURE__ */ jsx(Progress.Indicator, { className: linear_progress_module_default.Indicator })
 		}),
 		description && /* @__PURE__ */ jsx(Text, {
-			className: linear_progress_module_default.Description,
 			size: "small",
 			tone: "muted",
 			children: description

package/dist/components/masonry/masonry.d.ts

@@ -29,7 +29,7 @@ export type MasonryProps = React.ComponentPropsWithRef<'div'> & {
      */
     render?: useRender.RenderProp;
     /**
-     * Sets the gap between columns and the block-end spacing on each `Masonry.Item`.
+     * Sets the gap between columns (`--vui-masonry-gap`) and the `rowGap` on each column `Stack`.
      *
      * @default 'large'
      */

package/dist/components/masonry/masonry.guide.json

@@ -1,11 +1,12 @@
 {
   "name": "Masonry",
   "structure": "<Masonry>\n  <Masonry.Item>…</Masonry.Item>\n</Masonry>",
-  "summary": "Responsive React-column layout primitive for read-only mixed-height content walls.",
+  "summary": "Responsive React-column layout primitive for read-only mixed-height content walls; root is a named CSS container query context (`masonry` / inline-size).",
   "whenToUse": [
     "Card walls, gallery-like collections, and editorial layouts with uneven item heights",
     "Presentational walls where responsive column count matters more than source-order reading",
-    "Read-only collections composed from Surface, Stack, Text, and similar content primitives"
+    "Read-only collections composed from Surface, Stack, Text, and similar content primitives",
+    "Style descendants with @container masonry queries when layout should respond to the Masonry root's inline-size (peer Surface/Stack named containers)"
   ],
   "whenNotToUse": [
     "Interactive collections where keyboard tab order must match source order",
@@ -19,23 +20,24 @@
   ],
   "antiPatterns": [
     "Treating React columns as a true interactive grid with predictable source-order keyboard traversal",
-    "Using arbitrary child margins instead of the component gap contract for item spacing"
+    "Using arbitrary child margins instead of the gap contract (column flex gap + Stack rowGap)"
   ],
   "related": ["Stack", "Surface", "Text"],
   "properties": {
     "react": {
+      "breakpointCols": {
+        "description": "Sets the mobile-first column count at each CSS px container breakpoint. Each non-`default` key is a unitless `min-width` in px against the Masonry root's content-box inline size. Keys may be in any order; the largest matching breakpoint wins. Non-finite keys are ignored."
+      },
       "gap": {
-        "description": "Gap between rendered columns and items within each column.",
-        "refCss": "gap"
+        "description": "Sets the gap between columns (`--vui-masonry-gap`) and the `rowGap` on each column `Stack`."
       },
-      "breakpointCols": {
-        "description": "Mobile-first column counts keyed by unitless CSS px min-width breakpoints against the Masonry root content-box inline size; keys may be in any order, the largest matching breakpoint wins, and non-finite keys are ignored."
+      "render": {
+        "description": "Replaces the default `div` root using Base UI render semantics."
       }
     },
     "css": {
       "gap": {
-        "description": "Gap between columns and items within each column.",
-        "refReact": "gap"
+        "description": "Column gap only (`--vui-masonry-gap` on the flex root). Within-column item spacing uses Stack `rowGap`, not this custom property."
       }
     }
   }

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

@@ -0,0 +1,11 @@
+export { Menu, MenuCheckboxItem, MenuGroup, MenuItem, MenuLinkItem, MenuPopup, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuSubmenu, MenuSubmenuTrigger, MenuTrigger, } from './menu';
+export type { MenuProps, MenuSubmenuProps, MenuTriggerProps } from './menu';
+export type { MenuCheckboxItemProps } from './menu-checkbox-item';
+export type { MenuGroupProps } from './menu-group';
+export type { MenuItemProps } from './menu-item';
+export type { MenuLinkItemProps } from './menu-link-item';
+export type { MenuPopupProps } from './menu-popup';
+export type { MenuRadioGroupProps } from './menu-radio-group';
+export type { MenuRadioItemProps } from './menu-radio-item';
+export type { MenuSeparatorProps } from './menu-separator';
+export type { MenuSubmenuTriggerProps } from './menu-submenu-trigger';

package/dist/components/menu/menu-checkbox-item.d.ts

@@ -0,0 +1,42 @@
+import { MenuCheckboxItem as MenuCheckboxItemPrimitive } from '@base-ui/react/menu';
+import { StackProps } from '../stack';
+import type * as React from 'react';
+/**
+ * Public Menu.CheckboxItem props.
+ *
+ * @default `closeOnClick` is `false`.
+ */
+export type MenuCheckboxItemProps = MenuCheckboxItemPrimitive.Props & {
+    /**
+     * Decorative leading node rendered before the item label.
+     *
+     * @default No addon is rendered.
+     */
+    addon?: React.ReactNode;
+    /**
+     * Vertical alignment of the addon relative to the label row.
+     *
+     * @default 'center'
+     */
+    addonAlign?: StackProps['vAlign'];
+    /**
+     * Custom indicator node when checked.
+     *
+     * @default Built-in Check chrome SVG at size 16
+     */
+    indicator?: React.ReactNode;
+    /**
+     * End-aligned secondary text (e.g. keyboard shortcut) before the check indicator.
+     * Rendered muted `x-small`.
+     *
+     * @default No note is rendered.
+     */
+    note?: React.ReactNode;
+    /**
+     * Visual sentiment. `destructive` uses highlight-red wash + text.
+     *
+     * @default Neutral item styling.
+     */
+    sentiment?: 'destructive';
+};
+export declare const MenuCheckboxItem: React.FC<MenuCheckboxItemProps>;

package/dist/components/menu/menu-checkbox-item.js

@@ -0,0 +1,28 @@
+import { clsx } from "../../core/clsx.js";
+import { ChromeCheck } from "../../internal/chrome-icons/chrome-icons.js";
+import { Surface } from "../surface/surface.js";
+import menu_module_default from "./menu.module.js";
+import { MenuIndicatorSlot } from "./menu-indicator-slot.js";
+import { MenuItemRow } from "./menu-item-row.js";
+import { jsx } from "react/jsx-runtime";
+import { Menu } from "@base-ui/react/menu";
+//#region src/components/menu/menu-checkbox-item.tsx
+var MenuCheckboxItem = ({ addon, addonAlign = "center", children, className, closeOnClick = false, indicator, note, sentiment, ...otherProps }) => /* @__PURE__ */ jsx(Menu.CheckboxItem, {
+	...otherProps,
+	className: clsx(menu_module_default.Item, className),
+	closeOnClick,
+	...sentiment && { "data-sentiment": sentiment },
+	render: /* @__PURE__ */ jsx(Surface, { radius: "auto" }),
+	children: /* @__PURE__ */ jsx(MenuItemRow, {
+		addon,
+		addonAlign,
+		note,
+		trailing: /* @__PURE__ */ jsx(MenuIndicatorSlot, {
+			kind: "checkbox",
+			children: indicator ?? /* @__PURE__ */ jsx(ChromeCheck, { size: 16 })
+		}),
+		children
+	})
+});
+//#endregion
+export { MenuCheckboxItem };

package/dist/components/menu/menu-group.d.ts

@@ -0,0 +1,12 @@
+import { MenuGroup as MenuGroupPrimitive } from '@base-ui/react/menu';
+import type * as React from 'react';
+/**
+ * Public Menu.Group props.
+ */
+export type MenuGroupProps = MenuGroupPrimitive.Props & {
+    /**
+     * Accessible group label rendered with `Menu.GroupLabel`.
+     */
+    label: React.ReactNode;
+};
+export declare const MenuGroup: React.FC<MenuGroupProps>;

package/dist/components/menu/menu-group.js

@@ -0,0 +1,36 @@
+import { clsx } from "../../core/clsx.js";
+import { Text } from "../text/text.js";
+import { Stack } from "../stack/stack.js";
+import menu_module_default from "./menu.module.js";
+import { MenuIndicatorSlot } from "./menu-indicator-slot.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Menu } from "@base-ui/react/menu";
+//#region src/components/menu/menu-group.tsx
+var MenuGroup = ({ children, className, label, ...otherProps }) => /* @__PURE__ */ jsxs(Menu.Group, {
+	...otherProps,
+	className: clsx(menu_module_default.Group, className),
+	render: /* @__PURE__ */ jsx(Stack, {
+		direction: "column",
+		fillChildren: false,
+		rowGap: "2x-small",
+		vPadding: "2x-small"
+	}),
+	children: [/* @__PURE__ */ jsxs(Menu.GroupLabel, {
+		render: /* @__PURE__ */ jsx(Stack, {
+			columnGap: "small",
+			direction: "row",
+			fillChildren: false,
+			hPadding: "small",
+			vAlign: "center",
+			vPadding: ["small", "x-small"]
+		}),
+		children: [/* @__PURE__ */ jsx(Text, {
+			size: "x-small",
+			tone: "muted",
+			weight: "semibold",
+			children: label
+		}), /* @__PURE__ */ jsx(MenuIndicatorSlot, {})]
+	}), children]
+});
+//#endregion
+export { MenuGroup };

package/dist/components/menu/menu-indicator-slot.d.ts

@@ -0,0 +1,15 @@
+import type * as React from 'react';
+export type MenuIndicatorSlotKind = 'spacer' | 'checkbox' | 'radio' | 'chevron';
+export type MenuIndicatorSlotProps = {
+    children?: React.ReactNode;
+    /**
+     * Trailing footprint kind.
+     * - `spacer`: empty matching footprint (Item / LinkItem)
+     * - `checkbox` / `radio`: Base UI indicator with `keepMounted`
+     * - `chevron`: always-visible submenu end chevron
+     *
+     * @default 'spacer'
+     */
+    kind?: MenuIndicatorSlotKind;
+};
+export declare const MenuIndicatorSlot: React.FC<MenuIndicatorSlotProps>;

package/dist/components/menu/menu-indicator-slot.js

@@ -0,0 +1,52 @@
+import { Stack } from "../stack/stack.js";
+import menu_module_default from "./menu.module.js";
+import { jsx } from "react/jsx-runtime";
+import { Menu } from "@base-ui/react/menu";
+//#region src/components/menu/menu-indicator-slot.tsx
+var indicatorStackRender = /* @__PURE__ */ jsx(Stack, {
+	"data-shrink": "false",
+	fillChildren: false,
+	hAlign: "center",
+	inline: true,
+	vAlign: "center"
+});
+var MenuIndicatorSlot = ({ children, kind = "spacer" }) => {
+	if (kind === "checkbox") return /* @__PURE__ */ jsx(Menu.CheckboxItemIndicator, {
+		className: menu_module_default.Indicator,
+		"data-grow": "false",
+		keepMounted: true,
+		render: indicatorStackRender,
+		children
+	});
+	if (kind === "radio") return /* @__PURE__ */ jsx(Menu.RadioItemIndicator, {
+		className: menu_module_default.Indicator,
+		"data-grow": "false",
+		keepMounted: true,
+		render: indicatorStackRender,
+		children
+	});
+	if (kind === "chevron") return /* @__PURE__ */ jsx(Stack, {
+		"aria-hidden": true,
+		className: menu_module_default.Indicator,
+		"data-grow": "false",
+		"data-kind": "chevron",
+		"data-shrink": "false",
+		fillChildren: false,
+		hAlign: "center",
+		inline: true,
+		vAlign: "center",
+		children
+	});
+	return /* @__PURE__ */ jsx(Stack, {
+		"aria-hidden": true,
+		className: menu_module_default.Indicator,
+		"data-grow": "false",
+		"data-shrink": "false",
+		fillChildren: false,
+		hAlign: "center",
+		inline: true,
+		vAlign: "center"
+	});
+};
+//#endregion
+export { MenuIndicatorSlot };

package/dist/components/menu/menu-item-row.d.ts

@@ -0,0 +1,18 @@
+import { StackProps } from '../stack';
+import type * as React from 'react';
+export type MenuItemRowProps = {
+    addon?: React.ReactNode;
+    addonAlign?: StackProps['vAlign'];
+    children?: React.ReactNode;
+    /**
+     * Optional muted note (shortcut / secondary label) at the end of the content row,
+     * immediately before any trailing indicator.
+     */
+    note?: React.ReactNode;
+    trailing?: React.ReactNode;
+};
+/**
+ * Shared internal row layout for all Menu item kinds (addon + label + optional note + trailing).
+ * Not a public export.
+ */
+export declare const MenuItemRow: React.FC<MenuItemRowProps>;

package/dist/components/menu/menu-item-row.js

@@ -0,0 +1,47 @@
+import { Text } from "../text/text.js";
+import { Stack } from "../stack/stack.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/menu/menu-item-row.tsx
+/**
+* Shared internal row layout for all Menu item kinds (addon + label + optional note + trailing).
+* Not a public export.
+*/
+var MenuItemRow = ({ addon, addonAlign = "center", children, note, trailing }) => /* @__PURE__ */ jsxs(Stack, {
+	columnGap: "medium",
+	direction: "row",
+	fillChildren: false,
+	hPadding: "small",
+	vPadding: "small",
+	vAlign: "center",
+	children: [
+		/* @__PURE__ */ jsxs(Stack, {
+			columnGap: "small",
+			"data-grow": "true",
+			"data-shrink": "true",
+			direction: "row",
+			fillChildren: false,
+			vAlign: addonAlign,
+			children: [addon && /* @__PURE__ */ jsx(Stack, {
+				"aria-hidden": "true",
+				"data-grow": "false",
+				"data-shrink": "false",
+				children: addon
+			}), /* @__PURE__ */ jsx(Text, {
+				lineHeight: "small",
+				size: "small",
+				children
+			})]
+		}),
+		note && /* @__PURE__ */ jsx(Text, {
+			whiteSpace: "nowrap",
+			"data-shrink": "false",
+			lineHeight: "small",
+			size: "x-small",
+			tone: "muted",
+			children: note
+		}),
+		trailing
+	]
+});
+//#endregion
+export { MenuItemRow };

package/dist/components/menu/menu-item.d.ts

@@ -0,0 +1,36 @@
+import { MenuItem as MenuItemPrimitive } from '@base-ui/react/menu';
+import { StackProps } from '../stack';
+import type * as React from 'react';
+/**
+ * Public Menu.Item props.
+ *
+ * @default Base UI pass-through props keep upstream defaults.
+ */
+export type MenuItemProps = MenuItemPrimitive.Props & {
+    /**
+     * Decorative leading node rendered before the item label.
+     *
+     * @default No addon is rendered.
+     */
+    addon?: React.ReactNode;
+    /**
+     * Vertical alignment of the addon relative to the label row.
+     *
+     * @default 'center'
+     */
+    addonAlign?: StackProps['vAlign'];
+    /**
+     * End-aligned secondary text (e.g. keyboard shortcut). Rendered muted `x-small`
+     * at the end of the row (replaces the empty indicator spacer when set).
+     *
+     * @default No note is rendered.
+     */
+    note?: React.ReactNode;
+    /**
+     * Visual sentiment. `destructive` uses highlight-red wash + text.
+     *
+     * @default Neutral item styling.
+     */
+    sentiment?: 'destructive';
+};
+export declare const MenuItem: React.FC<MenuItemProps>;

package/dist/components/menu/menu-item.js

@@ -0,0 +1,23 @@
+import { clsx } from "../../core/clsx.js";
+import { Surface } from "../surface/surface.js";
+import menu_module_default from "./menu.module.js";
+import { MenuIndicatorSlot } from "./menu-indicator-slot.js";
+import { MenuItemRow } from "./menu-item-row.js";
+import { jsx } from "react/jsx-runtime";
+import { Menu } from "@base-ui/react/menu";
+//#region src/components/menu/menu-item.tsx
+var MenuItem = ({ addon, addonAlign = "center", children, className, note, sentiment, ...otherProps }) => /* @__PURE__ */ jsx(Menu.Item, {
+	...otherProps,
+	className: clsx(menu_module_default.Item, className),
+	...sentiment && { "data-sentiment": sentiment },
+	render: /* @__PURE__ */ jsx(Surface, { radius: "auto" }),
+	children: /* @__PURE__ */ jsx(MenuItemRow, {
+		addon,
+		addonAlign,
+		note,
+		...!note && { trailing: /* @__PURE__ */ jsx(MenuIndicatorSlot, {}) },
+		children
+	})
+});
+//#endregion
+export { MenuItem };