@kanso-labs/react-native-kanso-ui 0.4.0 → 0.6.0

package/dist/components/list-item/index.js

@@ -0,0 +1,275 @@
+import { useTheme } from "../../theme/scope.js";
+import { composeStyles } from "../../theme/styles.js";
+import { usePressFeedback } from "../../press/index.js";
+import { rowContentColor, rowStyles } from "../../row/styles.js";
+import { RowContent, rowStyleOf } from "../../row/index.js";
+import { c } from "react/compiler-runtime";
+import { Pressable, View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/list-item/index.tsx
+function InteractiveListItem(t0) {
+	const $ = c(47);
+	let children;
+	let leading;
+	let onBlur;
+	let onFocus;
+	let onHoverIn;
+	let onHoverOut;
+	let onPressIn;
+	let onPressOut;
+	let overline;
+	let props;
+	let style;
+	let supporting;
+	let t1;
+	let trailing;
+	if ($[0] !== t0) {
+		const { children: t2, interactive: _interactive, isDisabled: t3, leading: t4, onBlur: t5, onFocus: t6, onHoverIn: t7, onHoverOut: t8, onPressIn: t9, onPressOut: t10, overline: t11, style: t12, supporting: t13, trailing: t14, ...t15 } = t0;
+		children = t2;
+		t1 = t3;
+		leading = t4;
+		onBlur = t5;
+		onFocus = t6;
+		onHoverIn = t7;
+		onHoverOut = t8;
+		onPressIn = t9;
+		onPressOut = t10;
+		overline = t11;
+		style = t12;
+		supporting = t13;
+		trailing = t14;
+		props = t15;
+		$[0] = t0;
+		$[1] = children;
+		$[2] = leading;
+		$[3] = onBlur;
+		$[4] = onFocus;
+		$[5] = onHoverIn;
+		$[6] = onHoverOut;
+		$[7] = onPressIn;
+		$[8] = onPressOut;
+		$[9] = overline;
+		$[10] = props;
+		$[11] = style;
+		$[12] = supporting;
+		$[13] = t1;
+		$[14] = trailing;
+	} else {
+		children = $[1];
+		leading = $[2];
+		onBlur = $[3];
+		onFocus = $[4];
+		onHoverIn = $[5];
+		onHoverOut = $[6];
+		onPressIn = $[7];
+		onPressOut = $[8];
+		overline = $[9];
+		props = $[10];
+		style = $[11];
+		supporting = $[12];
+		t1 = $[13];
+		trailing = $[14];
+	}
+	const isDisabled = t1 === void 0 ? false : t1;
+	const theme = useTheme();
+	let t2;
+	if ($[15] !== isDisabled || $[16] !== theme) {
+		t2 = rowContentColor(theme, { isDisabled });
+		$[15] = isDisabled;
+		$[16] = theme;
+		$[17] = t2;
+	} else t2 = $[17];
+	let t3;
+	if ($[18] !== isDisabled || $[19] !== onBlur || $[20] !== onFocus || $[21] !== onHoverIn || $[22] !== onHoverOut || $[23] !== onPressIn || $[24] !== onPressOut || $[25] !== t2) {
+		t3 = {
+			color: t2,
+			disabled: isDisabled,
+			onBlur,
+			onFocus,
+			onHoverIn,
+			onHoverOut,
+			onPressIn,
+			onPressOut
+		};
+		$[18] = isDisabled;
+		$[19] = onBlur;
+		$[20] = onFocus;
+		$[21] = onHoverIn;
+		$[22] = onHoverOut;
+		$[23] = onPressIn;
+		$[24] = onPressOut;
+		$[25] = t2;
+		$[26] = t3;
+	} else t3 = $[26];
+	const feedback = usePressFeedback(t3);
+	const t4 = feedback.handlers;
+	let t5;
+	if ($[27] !== feedback.ring || $[28] !== overline || $[29] !== style || $[30] !== supporting || $[31] !== theme) {
+		t5 = composeStyles(rowStyleOf(theme, {
+			overline,
+			supporting
+		}), feedback.ring, feedback.ring === void 0 ? void 0 : rowStyles.ring, style);
+		$[27] = feedback.ring;
+		$[28] = overline;
+		$[29] = style;
+		$[30] = supporting;
+		$[31] = theme;
+		$[32] = t5;
+	} else t5 = $[32];
+	let t6;
+	if ($[33] !== children || $[34] !== isDisabled || $[35] !== leading || $[36] !== overline || $[37] !== supporting || $[38] !== trailing) {
+		t6 = /* @__PURE__ */ jsx(RowContent, {
+			isDisabled,
+			leading,
+			overline,
+			supporting,
+			trailing,
+			children
+		});
+		$[33] = children;
+		$[34] = isDisabled;
+		$[35] = leading;
+		$[36] = overline;
+		$[37] = supporting;
+		$[38] = trailing;
+		$[39] = t6;
+	} else t6 = $[39];
+	let t7;
+	if ($[40] !== feedback.handlers || $[41] !== feedback.layer || $[42] !== isDisabled || $[43] !== props || $[44] !== t5 || $[45] !== t6) {
+		t7 = /* @__PURE__ */ jsxs(Pressable, {
+			role: "button",
+			...props,
+			...t4,
+			disabled: isDisabled,
+			style: t5,
+			children: [feedback.layer, t6]
+		});
+		$[40] = feedback.handlers;
+		$[41] = feedback.layer;
+		$[42] = isDisabled;
+		$[43] = props;
+		$[44] = t5;
+		$[45] = t6;
+		$[46] = t7;
+	} else t7 = $[46];
+	return t7;
+}
+/**
+* A row of a list, with a headline and up to two lines beside it, and
+* content before and after.
+*
+* ```tsx
+* <ListItem interactive leading={<Avatar name="Ada Lovelace" />} onPress={open} supporting="Supporting line">
+*   Headline
+* </ListItem>
+* ```
+*
+* Which of the lists page's three items it is comes from what it holds: a
+* `supporting` line or an `overline` makes it the two-line item, and both
+* the three-line one. It is a `View` with no role unless `interactive`,
+* when it is a `Pressable` announced as a button. The press props belong to
+* an interactive row alone. `style`, `ref` and `testID` land on the row's
+* own view.
+*/
+function ListItem(props) {
+	const $ = c(2);
+	let t0;
+	if ($[0] !== props) {
+		t0 = props.interactive === true ? /* @__PURE__ */ jsx(InteractiveListItem, { ...props }) : /* @__PURE__ */ jsx(StaticListItem, { ...props });
+		$[0] = props;
+		$[1] = t0;
+	} else t0 = $[1];
+	return t0;
+}
+function StaticListItem(t0) {
+	const $ = c(26);
+	let children;
+	let leading;
+	let overline;
+	let props;
+	let style;
+	let supporting;
+	let t1;
+	let trailing;
+	if ($[0] !== t0) {
+		const { children: t2, interactive: _interactive, isDisabled: t3, leading: t4, overline: t5, style: t6, supporting: t7, trailing: t8, ...t9 } = t0;
+		children = t2;
+		t1 = t3;
+		leading = t4;
+		overline = t5;
+		style = t6;
+		supporting = t7;
+		trailing = t8;
+		props = t9;
+		$[0] = t0;
+		$[1] = children;
+		$[2] = leading;
+		$[3] = overline;
+		$[4] = props;
+		$[5] = style;
+		$[6] = supporting;
+		$[7] = t1;
+		$[8] = trailing;
+	} else {
+		children = $[1];
+		leading = $[2];
+		overline = $[3];
+		props = $[4];
+		style = $[5];
+		supporting = $[6];
+		t1 = $[7];
+		trailing = $[8];
+	}
+	const isDisabled = t1 === void 0 ? false : t1;
+	const theme = useTheme();
+	const t2 = isDisabled || void 0;
+	let t3;
+	if ($[9] !== overline || $[10] !== style || $[11] !== supporting || $[12] !== theme) {
+		t3 = composeStyles(rowStyleOf(theme, {
+			overline,
+			supporting
+		}), style);
+		$[9] = overline;
+		$[10] = style;
+		$[11] = supporting;
+		$[12] = theme;
+		$[13] = t3;
+	} else t3 = $[13];
+	let t4;
+	if ($[14] !== children || $[15] !== isDisabled || $[16] !== leading || $[17] !== overline || $[18] !== supporting || $[19] !== trailing) {
+		t4 = /* @__PURE__ */ jsx(RowContent, {
+			isDisabled,
+			leading,
+			overline,
+			supporting,
+			trailing,
+			children
+		});
+		$[14] = children;
+		$[15] = isDisabled;
+		$[16] = leading;
+		$[17] = overline;
+		$[18] = supporting;
+		$[19] = trailing;
+		$[20] = t4;
+	} else t4 = $[20];
+	let t5;
+	if ($[21] !== props || $[22] !== t2 || $[23] !== t3 || $[24] !== t4) {
+		t5 = /* @__PURE__ */ jsx(View, {
+			"aria-disabled": t2,
+			...props,
+			style: t3,
+			children: t4
+		});
+		$[21] = props;
+		$[22] = t2;
+		$[23] = t3;
+		$[24] = t4;
+		$[25] = t5;
+	} else t5 = $[25];
+	return t5;
+}
+//#endregion
+export { ListItem };
+
+//# sourceMappingURL=index.js.map

package/dist/components/list-item/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["ComponentRef","ReactNode","Ref","PressableProps","StyleProp","ViewProps","ViewStyle","Pressable","View","usePressFeedback","RowContent","rowContentColor","rowStyleOf","rowStyles","useTheme","composeStyles","InteractiveListItemForm","Omit","interactive","ListItemBaseProps","children","isDisabled","leading","overline","ref","style","supporting","trailing","ListItemProps","StaticListItemForm","onPress","InteractiveListItem","t0","$","_c","onBlur","onFocus","onHoverIn","onHoverOut","onPressIn","onPressOut","props","t1","t2","_interactive","t3","t4","t5","t6","t7","t8","t9","t10","t11","t12","t13","t14","t15","undefined","theme","color","disabled","feedback","handlers","ring","layer","ListItem","StaticListItem","_c"],"sources":["../../../src/components/list-item/index.tsx"],"sourcesContent":["import type { ComponentRef, ReactNode, Ref } from 'react'\nimport type {\n  PressableProps,\n  StyleProp,\n  ViewProps,\n  ViewStyle,\n} from 'react-native'\n\nimport { Pressable, View } from 'react-native'\n\nimport { usePressFeedback } from '../../press'\nimport { RowContent, rowContentColor, rowStyleOf, rowStyles } from '../../row'\nimport { useTheme } from '../../theme/scope'\nimport { composeStyles } from '../../theme/styles'\n\n// kanso-ui's ListItem, from the lists page: the one-line item's 56dp\n// container with a body-large headline, the two-line item's 72dp with a\n// body-medium supporting line, and the three-line item's 88dp, where an\n// overline joins them and the slots are held at the top rather than\n// centred. The heights are minimums, so a larger OS text size grows the\n// row. The layout is src/row's, shared with every menu item; what is here\n// is the view around it, a `View` that presents or a `Pressable` that\n// ripples, and the props that fill the slots. Both slots lie along the\n// writing direction, so they swap sides under right-to-left.\n\ntype InteractiveListItemForm = Omit<\n  PressableProps,\n  'children' | 'disabled' | 'style'\n> & {\n  /**\n   * Makes the row the thing you press: a `Pressable` announced as a button,\n   * with the state layers, the ripple and the focus ring. Leave it off for a\n   * row that only presents.\n   */\n  readonly interactive: true\n}\n\ntype ListItemBaseProps = {\n  /** The row's headline, the one thing it is mostly about. */\n  readonly children?: ReactNode\n  /**\n   * Draws the row disabled: its headline, slots and lines fade to on surface\n   * at the disabled content opacity. An interactive row takes no press and\n   * is announced as disabled; a row that only presents has nothing to\n   * disable, and says it is disabled so the state it draws is announced too.\n   * @default false\n   */\n  readonly isDisabled?: boolean\n  /** Content before the headline: an avatar, an icon, a checkbox. */\n  readonly leading?: ReactNode\n  /**\n   * A line above the headline, in label small and the muted role. Given\n   * beside `supporting`, it makes the row the three-line item.\n   */\n  readonly overline?: ReactNode\n  readonly ref?: Ref<ComponentRef<typeof View>>\n  readonly style?: StyleProp<ViewStyle>\n  /** A second line under the headline, in body medium and the muted role. */\n  readonly supporting?: ReactNode\n  /** Content after the headline, such as an amount or a control. */\n  readonly trailing?: ReactNode\n}\n\ntype ListItemProps = (InteractiveListItemForm | StaticListItemForm) &\n  ListItemBaseProps\n\n/** A row that presents and takes no press: a `View` with no role. */\ntype StaticListItemForm = Omit<ViewProps, 'children' | 'style'> & {\n  readonly interactive?: false\n  readonly onPress?: never\n}\n\nfunction InteractiveListItem({\n  children,\n  interactive: _interactive,\n  isDisabled = false,\n  leading,\n  onBlur,\n  onFocus,\n  onHoverIn,\n  onHoverOut,\n  onPressIn,\n  onPressOut,\n  overline,\n  style,\n  supporting,\n  trailing,\n  ...props\n}: InteractiveListItemForm & ListItemBaseProps) {\n  const theme = useTheme()\n  const feedback = usePressFeedback({\n    color: rowContentColor(theme, { isDisabled }),\n    disabled: isDisabled,\n    onBlur,\n    onFocus,\n    onHoverIn,\n    onHoverOut,\n    onPressIn,\n    onPressOut,\n  })\n\n  return (\n    <Pressable\n      role=\"button\"\n      {...props}\n      {...feedback.handlers}\n      disabled={isDisabled}\n      style={composeStyles<ViewStyle>(\n        rowStyleOf(theme, { overline, supporting }),\n        feedback.ring,\n        feedback.ring === undefined ? undefined : rowStyles.ring,\n        style,\n      )}\n    >\n      {feedback.layer}\n      <RowContent\n        isDisabled={isDisabled}\n        leading={leading}\n        overline={overline}\n        supporting={supporting}\n        trailing={trailing}\n      >\n        {children}\n      </RowContent>\n    </Pressable>\n  )\n}\n\n/**\n * A row of a list, with a headline and up to two lines beside it, and\n * content before and after.\n *\n * ```tsx\n * <ListItem interactive leading={<Avatar name=\"Ada Lovelace\" />} onPress={open} supporting=\"Supporting line\">\n *   Headline\n * </ListItem>\n * ```\n *\n * Which of the lists page's three items it is comes from what it holds: a\n * `supporting` line or an `overline` makes it the two-line item, and both\n * the three-line one. It is a `View` with no role unless `interactive`,\n * when it is a `Pressable` announced as a button. The press props belong to\n * an interactive row alone. `style`, `ref` and `testID` land on the row's\n * own view.\n */\nfunction ListItem(props: ListItemProps) {\n  return props.interactive === true ? (\n    <InteractiveListItem {...props} />\n  ) : (\n    <StaticListItem {...props} />\n  )\n}\n\nfunction StaticListItem({\n  children,\n  interactive: _interactive,\n  isDisabled = false,\n  leading,\n  overline,\n  style,\n  supporting,\n  trailing,\n  ...props\n}: ListItemBaseProps & StaticListItemForm) {\n  const theme = useTheme()\n\n  return (\n    <View\n      aria-disabled={isDisabled || undefined}\n      {...props}\n      style={composeStyles<ViewStyle>(\n        rowStyleOf(theme, { overline, supporting }),\n        style,\n      )}\n    >\n      <RowContent\n        isDisabled={isDisabled}\n        leading={leading}\n        overline={overline}\n        supporting={supporting}\n        trailing={trailing}\n      >\n        {children}\n      </RowContent>\n    </View>\n  )\n}\n\nexport type { ListItemProps }\n\nexport { ListItem }\n"],"mappings":"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"}

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

@@ -0,0 +1,309 @@
+import { OverlayAlign, OverlaySide } from "../../overlay/placement.js";
+import "../../overlay/index.js";
+import { HostInstance, PressableProps, StyleProp, ViewProps, ViewStyle } from "react-native";
+import { ReactElement, ReactNode, Ref } from "react";
+import { Key, Selection, SelectionMode } from "react-stately";
+//#region src/components/menu/index.d.ts
+type ItemNodeProps = MenuItemProps & {
+  readonly submenu?: ReactElement<MenuContentProps>;
+};
+type MenuAlign = OverlayAlign;
+type MenuContentProps<T extends object = object> = Omit<ViewProps, 'children' | 'role' | 'style'> & {
+  /**
+   * Where the menu lines up along the side it opens on. On `top` and
+   * `bottom`, `start` and `end` follow a right-to-left layout.
+   * @default 'start'
+   */
+  readonly align?: MenuAlign;
+  /**
+   * Moves the menu along that side, in dp: right or down when positive.
+   * Left out, a submenu moves up by the surface's own padding, which puts
+   * its first item level with the one that opened it.
+   */
+  readonly alignOffset?: number;
+  /**
+   * The items, each a `Menu.Item`, `Menu.Section`, `Menu.Separator`,
+   * `Menu.Submenu` or `Menu.LoadMore`. With `items`, a function from an item
+   * to its part, called for each item in turn.
+   */
+  readonly children?: ((item: T) => ReactElement) | ReactNode;
+  /** The keys selected at first, when the menu keeps its own selection. */
+  readonly defaultSelectedKeys?: 'all' | Iterable<Key>;
+  /** The keys of the items drawn disabled, which take no presses. */
+  readonly disabledKeys?: Iterable<Key>;
+  /**
+   * Keeps the last selected item selected, so a press on it changes
+   * nothing.
+   * @default false
+   */
+  readonly disallowEmptySelection?: boolean;
+  /** The entries `children` draws a part for, when it is a function. */
+  readonly items?: Iterable<T>;
+  /** Called with an item's key when a press on it runs its action. */
+  readonly onAction?: (key: Key) => void;
+  /** Called when a press on an item closes the menu. */
+  readonly onClose?: () => void;
+  /** Called with the selected keys whenever a press changes them. */
+  readonly onSelectionChange?: (keys: Selection) => void;
+  readonly ref?: Ref<HostInstance>;
+  /**
+   * What the menu shows when nothing is in it. Left out, it is a muted row
+   * saying "No results" in the device's language, so the menu keeps a row's
+   * height.
+   */
+  readonly renderEmptyState?: () => ReactNode;
+  /**
+   * The selected keys, for a call site holding the selection itself with
+   * `onSelectionChange`.
+   */
+  readonly selectedKeys?: 'all' | Iterable<Key>;
+  /**
+   * Whether a press selects an item: one at a time, several, or none, in
+   * which case a press runs the item's action alone.
+   * @default 'none'
+   */
+  readonly selectionMode?: SelectionMode;
+  /**
+   * Whether a press on an item closes the menu. Left out, it does unless the
+   * menu selects several items at once, or the item has an `href`.
+   */
+  readonly shouldCloseOnSelect?: boolean;
+  /**
+   * Which side of the trigger the menu opens on. It flips to the opposite
+   * side when there is no room. Left out, a menu opens below its trigger and
+   * a submenu at the inline end of the item that opens it.
+   */
+  readonly side?: MenuSide;
+  /**
+   * The gap between the trigger and the menu, in dp. Left out, a menu sits
+   * `spacing.sm` from its trigger and a submenu against its item.
+   */
+  readonly sideOffset?: number;
+  readonly style?: StyleProp<ViewStyle>;
+};
+type MenuItemProps = Omit<PressableProps, 'children' | 'disabled' | 'id' | 'role' | 'style'> & {
+  /** The item's label: what it does. */
+  readonly children?: ReactNode;
+  /**
+   * Where a press on the item leads, through the app's router as Button's
+   * `href` does. An item with one closes the menu whatever the selection.
+   */
+  readonly href?: string;
+  /**
+   * The key the item is selected and reported by. Give one to every item
+   * the call site needs to tell apart.
+   */
+  readonly id?: Key;
+  /**
+   * Draws the item disabled, and takes no presses on it, as a key in the
+   * menu's `disabledKeys` does.
+   * @default false
+   */
+  readonly isDisabled?: boolean;
+  /**
+   * Content before the label, usually an icon, which takes the label's
+   * colour at 24dp. A selected item draws the check here in its place.
+   */
+  readonly leading?: ReactNode;
+  /**
+   * Called when a press runs the item's action, in place of the menu's
+   * `onAction` for this item.
+   */
+  readonly onAction?: () => void;
+  readonly ref?: Ref<HostInstance>;
+  readonly style?: StyleProp<ViewStyle>;
+  /**
+   * The item's text, read off `children` when they are a plain string, so
+   * an item whose label is an element passes it.
+   */
+  readonly textValue?: string;
+  /** Content after the label. */
+  readonly trailing?: ReactNode;
+};
+type MenuLoadMoreProps = {
+  /**
+   * Draws the ring in a row of its own while more items are being fetched.
+   * @default false
+   */
+  readonly isLoading?: boolean;
+  /**
+   * What a screen reader calls the ring while it shows. Left out, it is the
+   * word for it in the device's language, "Loading more" in English.
+   */
+  readonly label?: string;
+  /**
+   * Called when the row comes within `scrollOffset` of the menu's visible
+   * end, while nothing is loading.
+   */
+  readonly onLoadMore?: () => void;
+  /**
+   * How far past the visible end of the menu the row starts loading, as a
+   * share of the menu's visible height.
+   * @default 1
+   */
+  readonly scrollOffset?: number;
+  readonly style?: StyleProp<ViewStyle>;
+  readonly testID?: string;
+};
+type MenuProps = {
+  /** The trigger, then the `Menu.Content` it opens. */
+  readonly children?: ReactNode;
+  /** Whether the menu starts open, when it keeps its own state. */
+  readonly defaultOpen?: boolean;
+  /** Whether the menu is open, when the call site holds the state. */
+  readonly isOpen?: boolean;
+  /** Called with the new state as the menu opens or closes. */
+  readonly onOpenChange?: (isOpen: boolean) => void;
+  /**
+   * What opens the menu: a press on the trigger, or a press held on it, in
+   * which case a plain press runs the trigger's own `onPress`.
+   * @default 'press'
+   */
+  readonly trigger?: MenuTrigger;
+};
+type MenuSectionProps = {
+  readonly 'aria-label'?: string;
+  /** The items in the section. */
+  readonly children?: ReactNode;
+  /**
+   * The section's heading, which names the group. A section without one is
+   * a group with no name, and takes `aria-label` for one instead.
+   */
+  readonly header?: ReactNode;
+  readonly id?: Key;
+};
+type MenuSeparatorProps = {
+  readonly style?: StyleProp<ViewStyle>;
+  readonly testID?: string;
+};
+type MenuSide = OverlaySide;
+type MenuSubmenuProps = {
+  /**
+   * The item that opens the submenu, then the `Menu.Content` it opens.
+   * Exactly those two, in that order.
+   */
+  readonly children: readonly [trigger: ReactElement<MenuItemProps>, content: ReactElement<MenuContentProps>];
+};
+type MenuTrigger = 'longPress' | 'press';
+/**
+ * A list of actions or choices opened from a control. Pass `isOpen` with
+ * `onOpenChange` to hold the open state, or `defaultOpen` to let it keep its
+ * own.
+ *
+ * ```tsx
+ * <Menu>
+ *   <Button variant="outlined">Open</Button>
+ *   <Menu.Content>
+ *     <Menu.Item id="first">First item</Menu.Item>
+ *   </Menu.Content>
+ * </Menu>
+ * ```
+ *
+ * A `Button` or `IconButton` placed directly inside `Menu` is its trigger,
+ * and a press on it toggles the menu. Everything the menu shows goes in
+ * `Menu.Content`, since the trigger lives in the screen while the menu is
+ * drawn above it.
+ */
+declare function Menu({ children, defaultOpen, isOpen, onOpenChange, trigger }: MenuProps): import("react").JSX.Element;
+declare namespace Menu {
+  var Content: typeof MenuContent;
+  var Item: typeof MenuItem;
+  var LoadMore: typeof MenuLoadMore;
+  var Section: typeof MenuSection;
+  var Separator: typeof MenuSeparator;
+  var Submenu: typeof MenuSubmenu;
+}
+/**
+ * The menu itself, and the surface it is drawn on. Its items scroll when they
+ * run past the room the window leaves on the side it opened on.
+ *
+ * A menu with nothing in it shows a muted "No results" row in place of its
+ * items; pass `renderEmptyState` to draw something else.
+ *
+ * `style`, `ref` and `testID` land on the surface.
+ */
+declare function MenuContent<T extends object = object>(props: MenuContentProps<T>): import("react").JSX.Element | null;
+/**
+ * One action or choice. Its slots are the row's: `leading` before the label,
+ * the label as children, and `trailing` after it. A selected item draws the
+ * check, in place of `leading` where it has one and at the end of the row
+ * where it has none, so choosing an item moves nothing in the menu. An item
+ * that opens a submenu draws the chevron itself.
+ *
+ * The menu draws it from its entry in the collection, so it renders nothing
+ * on its own. `style`, `ref` and `testID` land on the row.
+ */
+declare function MenuItem(_props: MenuItemProps): null;
+declare namespace MenuItem {
+  var getCollectionNode: (props: ItemNodeProps) => Generator<{
+    'aria-label': string | undefined;
+    hasChildNodes: boolean;
+    key: Key | undefined;
+    props: ItemNodeProps;
+    rendered: ReactNode;
+    textValue: string;
+    type: string;
+  }, void, unknown>;
+}
+/**
+ * The row shown while more items are being fetched. `onLoadMore` is called
+ * when it comes near the visible end of the menu, and the ring is drawn only
+ * while `isLoading`. It goes last, after the items it loads more of.
+ */
+declare function MenuLoadMore(_props: MenuLoadMoreProps): null;
+declare namespace MenuLoadMore {
+  var getCollectionNode: (props: MenuLoadMoreProps) => Generator<{
+    hasChildNodes: boolean;
+    props: MenuLoadMoreProps;
+    rendered: null;
+    type: string;
+  }, void, unknown>;
+}
+/**
+ * A named group of items. `header` names it, and is what a screen reader
+ * reads before the items inside.
+ */
+declare function MenuSection(_props: MenuSectionProps): null;
+declare namespace MenuSection {
+  var getCollectionNode: (props: MenuSectionProps) => Generator<{
+    'aria-label': string | undefined;
+    childNodes(): Generator<{
+      element: ReactNode;
+    }, void, unknown>;
+    hasChildNodes: boolean;
+    key: Key | undefined;
+    props: MenuSectionProps;
+    rendered: ReactNode;
+    type: string;
+  }, void, unknown>;
+}
+/** A rule between groups of items, with the menus page's 8dp either side. */
+declare function MenuSeparator(_props: MenuSeparatorProps): null;
+declare namespace MenuSeparator {
+  var getCollectionNode: (props: MenuSeparatorProps) => Generator<{
+    hasChildNodes: boolean;
+    props: MenuSeparatorProps;
+    rendered: null;
+    type: string;
+  }, void, unknown>;
+}
+/**
+ * An item that opens a menu of its own. Takes exactly two children: the
+ * `Menu.Item` that opens it, then the `Menu.Content` it opens. A press on
+ * the item opens it, and a second press closes it.
+ */
+declare function MenuSubmenu(_props: MenuSubmenuProps): null;
+declare namespace MenuSubmenu {
+  var getCollectionNode: (props: MenuSubmenuProps) => Generator<{
+    'aria-label': string | undefined;
+    hasChildNodes: boolean;
+    key: Key | undefined;
+    props: ItemNodeProps;
+    rendered: ReactNode;
+    textValue: string;
+    type: string;
+  }, void, unknown>;
+}
+//#endregion
+export { Menu, type MenuAlign, MenuContent, type MenuContentProps, MenuItem, type MenuItemProps, MenuLoadMore, type MenuLoadMoreProps, type MenuProps, MenuSection, type MenuSectionProps, MenuSeparator, type MenuSeparatorProps, type MenuSide, MenuSubmenu, type MenuSubmenuProps, type MenuTrigger };
+//# sourceMappingURL=index.d.ts.map