@arun-dev/headless 4.13.0 → 4.15.0

package/dist/menu/index.d.ts

@@ -68,8 +68,9 @@ type MenuPopupProps = MenuPopupOwnProps & Omit<ComponentPropsWithRef<'div'>, key
  * Popover's popup is (decision 12), and labelled by it.
  *
  * Opening moves focus to the first item — the last, when Up on the Trigger opened it. Up
- * and Down then move between items, wrapping, with Home and End; disabled items are skipped
- * unless the Root sets `focusableWhenDisabled`. Tab closes the menu and lets focus move on.
+ * and Down then move between items, wrapping, with Home and End; typing moves to the next item
+ * whose text starts with what was typed. Disabled items are skipped by both, unless the Root
+ * sets `focusableWhenDisabled`. Tab closes the menu and lets focus move on.
  *
  * Light dismiss and Esc close the element before anyone is asked; the `toggle` event
  * reports it through the Root, and the element reopens if the state stays open. Focus
@@ -83,6 +84,11 @@ type MenuItemOwnProps = {
      * `focusableWhenDisabled`.
      */
     disabled?: boolean;
+    /**
+     * The text typeahead matches. Defaults to the text in `children`; set it when that text is
+     * rendered by a component of your own, or differs from what should be typed.
+     */
+    textValue?: string;
     /** Element to render instead of the default `<button>`. Props and ref are merged onto it. */
     render?: ReactElement;
     /** Ref to the rendered element. Merged with any ref on the `render` element. */
@@ -94,17 +100,145 @@ type MenuItemProps = MenuItemOwnProps & Omit<ComponentPropsWithRef<'button'>, ke
  * handling here: put the action in `onClick`. Activating it closes the menu — call
  * `event.preventComponentHandler()` in your `onClick` to keep it open.
  *
- * `tabIndex={-1}`: the menu moves focus between items itself, and Tab leaves the menu.
+ * Disabled, your `onClick` is not attached, so an `aria-disabled` item under the Root's
+ * `focusableWhenDisabled` cannot run it either.
+ */
+declare function MenuItem({ disabled, textValue, onClick, className, children, render, ...rest }: MenuItemProps): ReactElement<unknown, string | react.JSXElementConstructor<any>>;
+
+type MenuCheckboxItemOwnProps = {
+    /**
+     * Controlled state. Provide `onCheckedChange` alongside it.
+     *
+     * Never `undefined` once mounted: the mode is latched at mount, as for Checkbox.
+     */
+    checked?: boolean;
+    /** Initial state when uncontrolled. Read once, at mount. */
+    defaultChecked?: boolean;
+    /** Called with the new state, in both controlled and uncontrolled modes. */
+    onCheckedChange?: (checked: boolean) => void;
+    /** Closes the menu when activated. Off by default: a setting is often changed with others. */
+    closeOnClick?: boolean;
+    /**
+     * Cannot be activated. Skipped by the arrow keys, unless the Root sets
+     * `focusableWhenDisabled`.
+     */
+    disabled?: boolean;
+    /** The text typeahead matches. Defaults to the text in `children`. */
+    textValue?: string;
+    /** Element to render instead of the default `<button>`. Props and ref are merged onto it. */
+    render?: ReactElement;
+    /** Ref to the rendered element. Merged with any ref on the `render` element. */
+    ref?: Ref<HTMLElement>;
+};
+type MenuCheckboxItemProps = MenuCheckboxItemOwnProps & Omit<ComponentPropsWithRef<'button'>, keyof MenuCheckboxItemOwnProps>;
+/**
+ * A setting that is on or off: `role="menuitemcheckbox"` with `aria-checked`, on a native
+ * `<button>`. Activating it toggles the state and leaves the menu open, unless `closeOnClick`.
+ * Your `onClick` runs first; `event.preventComponentHandler()` there stops the toggle.
  *
- * Disabled, it is a native `disabled` button, out of focus and activation. With the Root's
- * `focusableWhenDisabled` it is `aria-disabled` instead, which keeps it focusable, so the
- * activation a native `disabled` would block is blocked here: your `onClick` is not
- * attached while it is disabled.
+ * Holds its own state through `useControlled`; an ItemIndicator inside reads it.
+ */
+declare function MenuCheckboxItem({ checked: checkedProp, defaultChecked, onCheckedChange, closeOnClick, disabled, textValue, onClick, className, children, render, ...rest }: MenuCheckboxItemProps): react.JSX.Element;
+
+type MenuRadioGroupOwnProps = {
+    /**
+     * Controlled value — the `value` of the checked RadioItem, or `null` for none. Provide
+     * `onValueChange` alongside it.
+     *
+     * Never `undefined` once mounted: the mode is latched at mount, as for RadioGroup.
+     */
+    value?: string | null;
+    /** Initial value when uncontrolled. Read once, at mount. */
+    defaultValue?: string | null;
+    /** Called with the value of the RadioItem being checked, in both modes. */
+    onValueChange?: (value: string) => void;
+    /** Disables every RadioItem inside. */
+    disabled?: boolean;
+    /** Element to render instead of the default `<div>`. Props and ref are merged onto it. */
+    render?: ReactElement;
+    /** Ref to the rendered element. Merged with any ref on the `render` element. */
+    ref?: Ref<HTMLElement>;
+};
+type MenuRadioGroupProps = MenuRadioGroupOwnProps & Omit<ComponentPropsWithRef<'div'>, keyof MenuRadioGroupOwnProps | 'defaultValue'>;
+/**
+ * One choice among several: a `role="group"` that owns a value, and the RadioItems inside
+ * derive `checked` from it — as RadioGroup does for radios. Named by a GroupLabel inside, as a
+ * Group is.
+ */
+declare function MenuRadioGroup({ value: valueProp, defaultValue, onValueChange, disabled, className, children, render, ...rest }: MenuRadioGroupProps): react.JSX.Element;
+
+type MenuRadioItemOwnProps = {
+    /** This item's value in its RadioGroup. Checked while the group's `value` equals it. */
+    value: string;
+    /** Closes the menu when activated. Off by default, as for CheckboxItem. */
+    closeOnClick?: boolean;
+    /**
+     * Cannot be activated. Skipped by the arrow keys, unless the Root sets
+     * `focusableWhenDisabled`. The RadioGroup's `disabled` disables it too.
+     */
+    disabled?: boolean;
+    /** The text typeahead matches. Defaults to the text in `children`. */
+    textValue?: string;
+    /** Element to render instead of the default `<button>`. Props and ref are merged onto it. */
+    render?: ReactElement;
+    /** Ref to the rendered element. Merged with any ref on the `render` element. */
+    ref?: Ref<HTMLElement>;
+};
+type MenuRadioItemProps = MenuRadioItemOwnProps & Omit<ComponentPropsWithRef<'button'>, keyof MenuRadioItemOwnProps>;
+/**
+ * One choice in a RadioGroup: `role="menuitemradio"` with `aria-checked`, on a native
+ * `<button>`. Activating it checks it and leaves the menu open, unless `closeOnClick`; the
+ * checked item stays checked when activated again. Your `onClick` runs first;
+ * `event.preventComponentHandler()` there stops the change.
+ */
+declare function MenuRadioItem({ value, closeOnClick, disabled: disabledProp, textValue, onClick, className, children, render, ...rest }: MenuRadioItemProps): react.JSX.Element;
+
+type MenuItemIndicatorOwnProps = {
+    /** Element to render instead of the default `<span>`. Props and ref are merged onto it. */
+    render?: ReactElement;
+    /** Ref to the rendered element. Merged with any ref on the `render` element. */
+    ref?: Ref<HTMLElement>;
+};
+type MenuItemIndicatorProps = MenuItemIndicatorOwnProps & Omit<ComponentPropsWithRef<'span'>, keyof MenuItemIndicatorOwnProps>;
+/**
+ * Where the check goes, in a CheckboxItem or a RadioItem — one part for both, since it reads
+ * the same `checked` from either. Ships no glyph, as Checkbox.Indicator ships none: supply it as
+ * children, or draw it off the `data-*` attributes, which match the item's.
+ *
+ * Always rendered, in every state, so an unchecked item keeps its space and its label lines up
+ * with the checked ones. Hidden from assistive technology: the item announces `aria-checked`.
+ */
+declare function MenuItemIndicator({ className, children, render, ...rest }: MenuItemIndicatorProps): ReactElement<unknown, string | react.JSXElementConstructor<any>>;
+
+type MenuGroupOwnProps = {
+    /** Element to render instead of the default `<div>`. Props and ref are merged onto it. */
+    render?: ReactElement;
+    /** Ref to the rendered element. Merged with any ref on the `render` element. */
+    ref?: Ref<HTMLElement>;
+};
+type MenuGroupProps = MenuGroupOwnProps & Omit<ComponentPropsWithRef<'div'>, keyof MenuGroupOwnProps>;
+/**
+ * Items under a label: `role="group"`, named by its GroupLabel — the menu → group → item
+ * structure APG allows. The arrow keys and typeahead run through every group's items as one
+ * list, past the labels.
+ */
+declare function MenuGroup({ className, children, render, ...rest }: MenuGroupProps): react.JSX.Element;
+
+type MenuGroupLabelOwnProps = {
+    /** Element to render instead of the default `<div>`. Props and ref are merged onto it. */
+    render?: ReactElement;
+    /** Ref to the rendered element. Merged with any ref on the `render` element. */
+    ref?: Ref<HTMLElement>;
+};
+type MenuGroupLabelProps = MenuGroupLabelOwnProps & Omit<ComponentPropsWithRef<'div'>, keyof MenuGroupLabelOwnProps>;
+/**
+ * Names its Group or RadioGroup. Shown in the menu, but not an item: it cannot be activated,
+ * and the arrow keys and typeahead pass it.
  */
-declare function MenuItem({ disabled, onClick, className, children, render, ...rest }: MenuItemProps): ReactElement<unknown, string | react.JSXElementConstructor<any>>;
+declare function MenuGroupLabel({ className, children, render, ...rest }: MenuGroupLabelProps): ReactElement<unknown, string | react.JSXElementConstructor<any>>;
 
 declare namespace index_parts {
-  export { MenuItem as Item, MenuPopup as Popup, MenuRoot as Root, MenuTrigger as Trigger };
+  export { MenuCheckboxItem as CheckboxItem, MenuGroup as Group, MenuGroupLabel as GroupLabel, MenuItem as Item, MenuItemIndicator as ItemIndicator, MenuPopup as Popup, MenuRadioGroup as RadioGroup, MenuRadioItem as RadioItem, MenuRoot as Root, MenuTrigger as Trigger };
 }
 
 /** The state Menu.Root shares with its parts, and projects as `data-*` attributes. */
@@ -112,4 +246,4 @@ type MenuState = {
     open: boolean;
 };
 
-export { index_parts as Menu, type MenuAlign, type MenuItemProps, type MenuPopupProps, type MenuRootProps, type MenuSide, type MenuState, type MenuTriggerProps };
+export { index_parts as Menu, type MenuAlign, type MenuCheckboxItemProps, type MenuGroupLabelProps, type MenuGroupProps, type MenuItemIndicatorProps, type MenuItemProps, type MenuPopupProps, type MenuRadioGroupProps, type MenuRadioItemProps, type MenuRootProps, type MenuSide, type MenuState, type MenuTriggerProps };

package/dist/menu/index.js

@@ -1,12 +1,15 @@
 import {
-  byDocumentOrder,
-  rovingIndex
-} from "../chunk-2S4XG4VD.js";
+  fold
+} from "../chunk-ETNICT5M.js";
 import {
   anchorNameFor,
   anchoredDataAttributes,
   anchoredPopupStyle
 } from "../chunk-HCOCPQXS.js";
+import {
+  byDocumentOrder,
+  rovingIndex
+} from "../chunk-2S4XG4VD.js";
 import {
   useControlled
 } from "../chunk-UEIB3I3T.js";
@@ -18,8 +21,14 @@ import {
 // src/menu/index.parts.ts
 var index_parts_exports = {};
 __export(index_parts_exports, {
+  CheckboxItem: () => MenuCheckboxItem,
+  Group: () => MenuGroup,
+  GroupLabel: () => MenuGroupLabel,
   Item: () => MenuItem,
+  ItemIndicator: () => MenuItemIndicator,
   Popup: () => MenuPopup,
+  RadioGroup: () => MenuRadioGroup,
+  RadioItem: () => MenuRadioItem,
   Root: () => MenuRoot,
   Trigger: () => MenuTrigger
 });
@@ -98,9 +107,6 @@ function menuDataAttributes({ open }) {
     "data-closed": open ? void 0 : ""
   };
 }
-function menuItemDataAttributes(disabled) {
-  return { "data-disabled": disabled ? "" : void 0 };
-}
 
 // src/menu/MenuTrigger.tsx
 function MenuTrigger({ className, children, render, ...rest }) {
@@ -135,7 +141,51 @@ function MenuTrigger({ className, children, render, ...rest }) {
 }
 
 // src/menu/MenuPopup.tsx
-import { useEffect, useReducer, useRef as useRef2 } from "react";
+import { useEffect as useEffect2, useReducer, useRef as useRef3 } from "react";
+
+// src/core/typeahead.ts
+import { Children, isValidElement, useCallback as useCallback2, useEffect, useRef as useRef2 } from "react";
+var TYPEAHEAD_TIMEOUT = 500;
+function textOf(node) {
+  let text = "";
+  Children.forEach(node, (child) => {
+    if (typeof child === "string" || typeof child === "number") text += child;
+    else if (isValidElement(child)) text += textOf(child.props.children);
+  });
+  return text;
+}
+function typeaheadIndex(labels, current, search) {
+  const count = labels.length;
+  if (count === 0 || search === "") return null;
+  const [first = "", ...others] = [...search];
+  const repeated = others.every((char) => char === first);
+  const needle = fold(repeated ? first : search);
+  const start = current < 0 ? 0 : repeated ? current + 1 : current;
+  for (let step = 0; step < count; step += 1) {
+    const index = (start + step) % count;
+    if (fold(labels[index] ?? "").startsWith(needle)) return index;
+  }
+  return null;
+}
+function useTypeahead() {
+  const searchRef = useRef2("");
+  const timerRef = useRef2(void 0);
+  useEffect(() => () => clearTimeout(timerRef.current), []);
+  return useCallback2((event) => {
+    const { key } = event;
+    if (event.ctrlKey || event.metaKey || event.altKey) return null;
+    if ([...key].length !== 1) return null;
+    if (key === " " && searchRef.current === "") return null;
+    searchRef.current += key;
+    clearTimeout(timerRef.current);
+    timerRef.current = setTimeout(() => {
+      searchRef.current = "";
+    }, TYPEAHEAD_TIMEOUT);
+    return searchRef.current;
+  }, []);
+}
+
+// src/menu/MenuPopup.tsx
 function MenuPopup({
   side = "bottom",
   align = "start",
@@ -154,10 +204,11 @@ function MenuPopup({
     anchorName,
     triggerRef
   } = useMenuRootContext("Popup");
-  const elementRef = useRef2(null);
-  const focusPendingRef = useRef2(false);
+  const elementRef = useRef3(null);
+  const focusPendingRef = useRef3(false);
   const [, resync] = useReducer((n) => n + 1, 0);
-  useEffect(() => {
+  const typeahead = useTypeahead();
+  useEffect2(() => {
     const popup = elementRef.current;
     if (!popup || typeof popup.showPopover !== "function") return;
     const shown = popup.matches(":popover-open");
@@ -196,12 +247,18 @@ function MenuPopup({
         }
         const current = navigableItems.findIndex((i) => i.ref.current === event.target);
         if (current < 0 && event.target !== event.currentTarget) return;
-        const next = rovingIndex(event.key, {
+        const search = typeahead(event);
+        const next = search === null ? rovingIndex(event.key, {
           count: navigableItems.length,
           current,
           orientation: "vertical",
           rtl: false
-        });
+        }) : typeaheadIndex(
+          navigableItems.map((i) => i.textValue),
+          current,
+          search
+        );
+        if (search !== null) event.preventDefault();
         if (next === null) return;
         event.preventDefault();
         navigableItems[next]?.ref.current?.focus();
@@ -217,32 +274,62 @@ function MenuPopup({
   });
 }
 
+// src/menu/useMenuItem.ts
+import { createContext as createContext2, useContext as useContext2, useLayoutEffect, useRef as useRef4 } from "react";
+function useMenuItem(part, { disabled, textValue, children }) {
+  const { setOpen, focusableWhenDisabled, register } = useMenuRootContext(part);
+  const ref = useRef4(null);
+  const text = textValue ?? textOf(children);
+  useLayoutEffect(() => register({ disabled, textValue: text, ref }), [register, disabled, text]);
+  return {
+    setOpen,
+    itemProps: {
+      type: "button",
+      tabIndex: -1,
+      disabled: disabled && !focusableWhenDisabled || void 0,
+      "aria-disabled": disabled && focusableWhenDisabled || void 0,
+      "data-disabled": disabled ? "" : void 0,
+      ref
+    }
+  };
+}
+var MenuItemIndicatorContext = createContext2(null);
+function useMenuItemIndicatorContext() {
+  const context = useContext2(MenuItemIndicatorContext);
+  if (context === null) {
+    throw new Error(
+      "<Menu.ItemIndicator> must be rendered inside <Menu.CheckboxItem> or <Menu.RadioItem>."
+    );
+  }
+  return context;
+}
+function menuCheckableDataAttributes({ checked, disabled }) {
+  return {
+    "data-checked": checked ? "" : void 0,
+    "data-unchecked": checked ? void 0 : "",
+    "data-disabled": disabled ? "" : void 0
+  };
+}
+
 // src/menu/MenuItem.tsx
-import { useLayoutEffect, useRef as useRef3 } from "react";
 function MenuItem({
   disabled = false,
+  textValue,
   onClick,
   className,
   children,
   render,
   ...rest
 }) {
-  const { setOpen, focusableWhenDisabled, register } = useMenuRootContext("Item");
-  const elementRef = useRef3(null);
-  useLayoutEffect(() => register({ disabled, ref: elementRef }), [register, disabled]);
+  const { setOpen, itemProps } = useMenuItem("Item", { disabled, textValue, children });
   return useRender({
     render,
     defaultTagName: "button",
     props: {
-      type: "button",
+      ...itemProps,
       role: "menuitem",
-      tabIndex: -1,
-      disabled: disabled && !focusableWhenDisabled || void 0,
-      "aria-disabled": disabled && focusableWhenDisabled || void 0,
-      ...menuItemDataAttributes(disabled),
       className,
       children,
-      ref: elementRef,
       onClick() {
         if (!disabled) setOpen(false);
       }
@@ -250,6 +337,207 @@ function MenuItem({
     consumerProps: disabled ? rest : { ...rest, onClick }
   });
 }
+
+// src/menu/MenuCheckboxItem.tsx
+import { useMemo as useMemo2 } from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+function MenuCheckboxItem({
+  checked: checkedProp,
+  defaultChecked,
+  onCheckedChange,
+  closeOnClick = false,
+  disabled = false,
+  textValue,
+  onClick,
+  className,
+  children,
+  render,
+  ...rest
+}) {
+  const { setOpen, itemProps } = useMenuItem("CheckboxItem", { disabled, textValue, children });
+  const [checked, setChecked] = useControlled({
+    controlled: checkedProp,
+    default: defaultChecked ?? false,
+    name: "Menu.CheckboxItem",
+    state: "checked"
+  });
+  const state = useMemo2(() => ({ checked, disabled }), [checked, disabled]);
+  const element = useRender({
+    render,
+    defaultTagName: "button",
+    props: {
+      ...itemProps,
+      role: "menuitemcheckbox",
+      "aria-checked": checked,
+      ...menuCheckableDataAttributes(state),
+      className,
+      children,
+      onClick() {
+        if (disabled) return;
+        setChecked(!checked);
+        onCheckedChange?.(!checked);
+        if (closeOnClick) setOpen(false);
+      }
+    },
+    consumerProps: disabled ? rest : { ...rest, onClick }
+  });
+  return /* @__PURE__ */ jsx2(MenuItemIndicatorContext.Provider, { value: state, children: element });
+}
+
+// src/menu/MenuRadioGroup.tsx
+import { createContext as createContext4, useCallback as useCallback4, useContext as useContext4, useMemo as useMemo4 } from "react";
+
+// src/menu/MenuGroup.tsx
+import { createContext as createContext3, useCallback as useCallback3, useContext as useContext3, useId as useId2, useMemo as useMemo3, useState as useState2 } from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var MenuGroupContext = createContext3(null);
+function useMenuGroupContext() {
+  return useContext3(MenuGroupContext);
+}
+function useMenuGroupElement(part, {
+  render,
+  props,
+  consumerProps
+}) {
+  useMenuRootContext(part);
+  const labelId = `${useId2()}-label`;
+  const [hasLabel, setHasLabel] = useState2(false);
+  const registerLabel = useCallback3(() => {
+    setHasLabel(true);
+    return () => setHasLabel(false);
+  }, []);
+  const context = useMemo3(() => ({ labelId, registerLabel }), [labelId, registerLabel]);
+  const element = useRender({
+    render,
+    defaultTagName: "div",
+    props: { role: "group", "aria-labelledby": hasLabel ? labelId : void 0, ...props },
+    consumerProps
+  });
+  return /* @__PURE__ */ jsx3(MenuGroupContext.Provider, { value: context, children: element });
+}
+function MenuGroup({ className, children, render, ...rest }) {
+  return useMenuGroupElement("Group", {
+    render,
+    props: { className, children },
+    consumerProps: rest
+  });
+}
+
+// src/menu/MenuRadioGroup.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+var MenuRadioGroupContext = createContext4(null);
+function useMenuRadioGroupContext() {
+  const context = useContext4(MenuRadioGroupContext);
+  if (context === null) {
+    throw new Error("<Menu.RadioItem> must be rendered inside <Menu.RadioGroup>.");
+  }
+  return context;
+}
+function MenuRadioGroup({
+  value: valueProp,
+  defaultValue,
+  onValueChange,
+  disabled = false,
+  className,
+  children,
+  render,
+  ...rest
+}) {
+  const [value, setValue] = useControlled({
+    controlled: valueProp,
+    default: defaultValue ?? null,
+    name: "Menu.RadioGroup",
+    state: "value"
+  });
+  const select = useCallback4(
+    (next) => {
+      if (next === value) return;
+      setValue(next);
+      onValueChange?.(next);
+    },
+    [value, setValue, onValueChange]
+  );
+  const context = useMemo4(() => ({ value, disabled, select }), [value, disabled, select]);
+  const element = useMenuGroupElement("RadioGroup", {
+    render,
+    props: { "data-disabled": disabled ? "" : void 0, className, children },
+    consumerProps: rest
+  });
+  return /* @__PURE__ */ jsx4(MenuRadioGroupContext.Provider, { value: context, children: element });
+}
+
+// src/menu/MenuRadioItem.tsx
+import { useMemo as useMemo5 } from "react";
+import { jsx as jsx5 } from "react/jsx-runtime";
+function MenuRadioItem({
+  value,
+  closeOnClick = false,
+  disabled: disabledProp = false,
+  textValue,
+  onClick,
+  className,
+  children,
+  render,
+  ...rest
+}) {
+  const group = useMenuRadioGroupContext();
+  const disabled = disabledProp || group.disabled;
+  const { setOpen, itemProps } = useMenuItem("RadioItem", { disabled, textValue, children });
+  const checked = group.value === value;
+  const state = useMemo5(() => ({ checked, disabled }), [checked, disabled]);
+  const element = useRender({
+    render,
+    defaultTagName: "button",
+    props: {
+      ...itemProps,
+      role: "menuitemradio",
+      "aria-checked": checked,
+      ...menuCheckableDataAttributes(state),
+      className,
+      children,
+      onClick() {
+        if (disabled) return;
+        group.select(value);
+        if (closeOnClick) setOpen(false);
+      }
+    },
+    consumerProps: disabled ? rest : { ...rest, onClick }
+  });
+  return /* @__PURE__ */ jsx5(MenuItemIndicatorContext.Provider, { value: state, children: element });
+}
+
+// src/menu/MenuItemIndicator.tsx
+function MenuItemIndicator({
+  className,
+  children,
+  render,
+  ...rest
+}) {
+  const state = useMenuItemIndicatorContext();
+  return useRender({
+    render,
+    defaultTagName: "span",
+    props: { "aria-hidden": true, ...menuCheckableDataAttributes(state), className, children },
+    consumerProps: rest
+  });
+}
+
+// src/menu/MenuGroupLabel.tsx
+import { useLayoutEffect as useLayoutEffect2 } from "react";
+function MenuGroupLabel({ className, children, render, ...rest }) {
+  const group = useMenuGroupContext();
+  if (group === null) {
+    throw new Error("<Menu.GroupLabel> must be rendered inside <Menu.Group> or <Menu.RadioGroup>.");
+  }
+  const { labelId, registerLabel } = group;
+  useLayoutEffect2(registerLabel, [registerLabel]);
+  return useRender({
+    render,
+    defaultTagName: "div",
+    props: { id: labelId, className, children },
+    consumerProps: rest
+  });
+}
 export {
   index_parts_exports as Menu
 };

package/dist/rovingFocus-BZB3yicE.d.cts

@@ -0,0 +1,11 @@
+/**
+ * Roving focus for composite widgets — one Tab stop for the group, arrow keys within it.
+ * Tabs first; Menu and Toolbar reuse it. Internal: shared between components, not exported
+ * (decision 9).
+ *
+ * The caller owns the list of items and which are enabled — from component props, never
+ * read back from the DOM (decision 10). This only answers "where does this key go".
+ */
+type Orientation = 'horizontal' | 'vertical';
+
+export type { Orientation as O };

package/dist/rovingFocus-BZB3yicE.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Roving focus for composite widgets — one Tab stop for the group, arrow keys within it.
+ * Tabs first; Menu and Toolbar reuse it. Internal: shared between components, not exported
+ * (decision 9).
+ *
+ * The caller owns the list of items and which are enabled — from component props, never
+ * read back from the DOM (decision 10). This only answers "where does this key go".
+ */
+type Orientation = 'horizontal' | 'vertical';
+
+export type { Orientation as O };

package/dist/tabs/index.d.cts

@@ -1,15 +1,6 @@
 import * as react from 'react';
 import { ReactElement, Ref, ComponentPropsWithRef } from 'react';
-
-/**
- * Roving focus for composite widgets — one Tab stop for the group, arrow keys within it.
- * Tabs first; Menu and Toolbar reuse it. Internal: shared between components, not exported
- * (decision 9).
- *
- * The caller owns the list of items and which are enabled — from component props, never
- * read back from the DOM (decision 10). This only answers "where does this key go".
- */
-type Orientation = 'horizontal' | 'vertical';
+import { O as Orientation } from '../rovingFocus-BZB3yicE.cjs';
 
 type TabsActivationMode = 'automatic' | 'manual';
 /** The state Tabs.Root shares with its parts, and projects as `data-*` attributes. */

package/dist/tabs/index.d.ts

@@ -1,15 +1,6 @@
 import * as react from 'react';
 import { ReactElement, Ref, ComponentPropsWithRef } from 'react';
-
-/**
- * Roving focus for composite widgets — one Tab stop for the group, arrow keys within it.
- * Tabs first; Menu and Toolbar reuse it. Internal: shared between components, not exported
- * (decision 9).
- *
- * The caller owns the list of items and which are enabled — from component props, never
- * read back from the DOM (decision 10). This only answers "where does this key go".
- */
-type Orientation = 'horizontal' | 'vertical';
+import { O as Orientation } from '../rovingFocus-BZB3yicE.js';
 
 type TabsActivationMode = 'automatic' | 'manual';
 /** The state Tabs.Root shares with its parts, and projects as `data-*` attributes. */