@viraui/react 1.0.12 → 1.0.14

package/dist/components/dialog/dialog.guide.json

@@ -27,9 +27,33 @@
   "related": ["Surface", "Button", "IconButton", "Stack", "Elevator"],
   "properties": {
     "react": {
+      "Sheet.children": {
+        "description": "Optional body content rendered below the description."
+      },
+      "Sheet.description": {
+        "description": "Supporting copy announced with the title."
+      },
+      "Sheet.fitContent": {
+        "description": "Centers the sheet horizontally within the viewport."
+      },
+      "Sheet.headerAlign": {
+        "description": "Aligns the header content."
+      },
+      "Sheet.maxContentWidth": {
+        "description": "Optional maximum width of the content area."
+      },
       "Sheet.maxHeight": {
         "description": "Maximum block size of the sheet panel.",
         "refCss": "max-block-size"
+      },
+      "Sheet.showCloseButton": {
+        "description": "Whether to show the close button."
+      },
+      "Sheet.showHandle": {
+        "description": "Whether to show the drag handle above the sheet header."
+      },
+      "Sheet.title": {
+        "description": "Accessible dialog title rendered as the modal heading."
       }
     },
     "css": {

package/dist/components/dialog/dialog.module.js

@@ -2,7 +2,6 @@
 var Backdrop = "viraui__dialog-module__Backdrop_xgFhs";
 var Viewport = "viraui__dialog-module__Viewport_kmZN1";
 var Popup = "viraui__dialog-module__Popup_5qIyj";
-var Handle = "viraui__dialog-module__Handle_nd9SN";
 var HandleShape = "viraui__dialog-module__HandleShape_mEg8R";
 var Header = "viraui__dialog-module__Header_WnBly";
 var Body = "viraui__dialog-module__Body_9-UgN";
@@ -14,7 +13,6 @@ var dialog_module_default = {
 	Backdrop,
 	Viewport,
 	Popup,
-	Handle,
 	HandleShape,
 	Header,
 	Body,
@@ -24,4 +22,4 @@ var dialog_module_default = {
 	CloseButton
 };
 //#endregion
-export { Backdrop, Body, CloseButton, Content, Handle, HandleShape, Header, Indent, IndentBackground, Popup, Viewport, dialog_module_default as default };
+export { Backdrop, Body, CloseButton, Content, HandleShape, Header, Indent, IndentBackground, Popup, Viewport, dialog_module_default as default };

package/dist/components/elevator/elevator.guide.json

@@ -20,5 +20,27 @@
     "Wrapping invalid or non-element nodes",
     "Overwriting child transition shorthand without composing box-shadow"
   ],
-  "related": ["Surface"]
+  "related": ["Surface"],
+  "properties": {
+    "react": {
+      "children": {
+        "description": "Element or elements that receive elevation hooks on their rendered root."
+      },
+      "direction": {
+        "description": "Shadow cast direction mapped to `data-elevation-direction`."
+      },
+      "extraShadow": {
+        "description": "Additional shadow layer mapped to the `--extra-shadow` custom property."
+      },
+      "hover": {
+        "description": "Hover elevation level mapped to `data-elevation-hover`."
+      },
+      "resting": {
+        "description": "Resting elevation level mapped to `data-elevation`."
+      },
+      "shadowColor": {
+        "description": "Shadow color mapped to the `--shadow-color` custom property."
+      }
+    }
+  }
 }

package/dist/components/fieldset/fieldset.guide.json

@@ -7,7 +7,7 @@
     "Choice groups that need a shared legend, group description, or group error — Field.Root > Fieldset render={<RadioGroup<Value> />} or render={<CheckboxGroup />}",
     "Group validation and helper copy that require a Field.Root ancestor plus Fieldset description or error",
     "Type-safe radio unions via RadioGroup<'ssd' | 'hdd'> merged through Fieldset render",
-    "Visual section chrome (legend + bordered content) for a form block"
+    "Shared legend plus optional group description/error for a form block — border/section chrome belongs on Surface or the consumer"
   ],
   "whenNotToUse": [
     "Every RadioGroup or CheckboxGroup by default — Fieldset is optional when options already have labels and no group copy is needed",
@@ -18,12 +18,25 @@
   "accessibility": [
     "Map visible label to Fieldset.Legend so grouped controls share an accessible section name",
     "Keep group invalid state on Field.Root and surface group error copy through Fieldset error",
-    "Pass disabled to Fieldset.Root when the whole section should ignore interaction"
+    "Pass disabled to `<Fieldset disabled>` when the whole section should ignore interaction"
   ],
   "antiPatterns": [
     "Wrapping Fieldset.Root in Stack render — breaks Base UI render merge with RadioGroup or CheckboxGroup",
     "Expecting description or error on Fieldset without a Field.Root ancestor",
     "Omitting RadioGroup<Value> generics when option values are a restricted union"
   ],
-  "related": ["RadioGroup", "CheckboxGroup", "Textfield", "Textarea", "Select", "Stack"]
+  "related": ["RadioGroup", "CheckboxGroup", "Textfield", "Textarea", "Select", "Stack"],
+  "properties": {
+    "react": {
+      "description": {
+        "description": "Group helper copy rendered below the legend while valid. Requires a `Field.Root` ancestor for `FieldHelperCopy`."
+      },
+      "error": {
+        "description": "Group error copy rendered below the legend when invalid. Requires a `Field.Root` ancestor."
+      },
+      "label": {
+        "description": "Visible legend copy rendered with shared internal `FieldLabel`."
+      }
+    }
+  }
 }

package/dist/components/fieldset/fieldset.js

@@ -4,20 +4,20 @@ import { Stack } from "../stack/stack.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Fieldset } from "@base-ui/react";
 //#region src/components/fieldset/fieldset.tsx
-var Fieldset$1 = ({ children, className, description, disabled, error, label, ...fieldsetRootProps }) => /* @__PURE__ */ jsxs(Fieldset.Root, {
-	...fieldsetRootProps,
+var Fieldset$1 = ({ children, className, description, disabled, error, label, ...otherProps }) => /* @__PURE__ */ jsxs(Fieldset.Root, {
+	...otherProps,
 	className,
 	disabled,
-	children: [/* @__PURE__ */ jsxs(Stack, {
+	children: [(label || description || error) && /* @__PURE__ */ jsxs(Stack, {
 		vPadding: [0, "small"],
 		rowGap: "small",
-		children: [label ? /* @__PURE__ */ jsx(Fieldset.Legend, {
+		children: [label && /* @__PURE__ */ jsx(Fieldset.Legend, {
 			render: /* @__PURE__ */ jsx(FieldLabel, {}),
 			children: label
-		}) : null, description || error ? /* @__PURE__ */ jsx(FieldHelperCopy, {
+		}), (description || error) && /* @__PURE__ */ jsx(FieldHelperCopy, {
 			description,
 			error
-		}) : null]
+		})]
 	}), children]
 });
 //#endregion

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

@@ -2,6 +2,7 @@ export * from './accordion';
 export * from './annotate';
 export * from './avatar';
 export * from './avatar-group';
+export * from './badge';
 export * from './bleed';
 export * from './button';
 export * from './checkbox';
@@ -14,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/masonry/masonry.js

@@ -6,8 +6,8 @@ import { Stack } from "../stack/stack.js";
 import masonry_module_default from "./masonry.module.js";
 import { MasonryItem } from "./masonry-item.js";
 import { jsx } from "react/jsx-runtime";
-import { useRender } from "@base-ui/react/use-render";
 import { Children, useEffect, useRef, useState } from "react";
+import { useRender } from "@base-ui/react/use-render";
 //#region src/components/masonry/masonry.tsx
 var DEFAULT_BREAKPOINT_COLS = {
 	default: 1,

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>;