@webority/mobile-ui 0.9.1 → 0.10.0

package/lib/typescript/module/components/BarChart/BarChart.d.ts

@@ -0,0 +1,62 @@
+/**
+ * BarChart: a simple vertical bar chart for a dashboard.
+ *
+ * Zero is always on the axis, so a bar's length is its value. The point of the
+ * chart is readable without touching it: bars carry their value when there are
+ * few of them, and a summary line names the main message. Touching it adds
+ * detail: a tap picks a bar, and dragging along the plot picks the bar under
+ * the finger with one haptic tick per bar crossed. The picked bar's label and
+ * value are written above the plot.
+ *
+ * A screen reader gets one adjustable element: swipe up or down to move from
+ * bar to bar, each one read as "label, value". Bars are Views, not SVG, so the
+ * labels follow the app's font scale and nothing is drawn in a fixed pixel box.
+ *
+ * Values may be negative; the zero line then sits inside the plot.
+ */
+import type { View as RNView, StyleProp, ViewStyle } from 'react-native';
+import type { HapticType } from '../../utils/index.js';
+export type BarChartTone = 'primary' | 'success' | 'warning' | 'error' | 'info' | 'neutral';
+export interface BarChartDatum {
+    /** The full name of the bar, read aloud and written in the callout: "Mon 06-Oct-2026". */
+    label: string;
+    /** The bar's value. A value that is not a finite number draws as zero. */
+    value: number;
+    /** A shorter label drawn under the bar: "Mon". Default `label`. */
+    axisLabel?: string;
+    /** Replaces the spoken text of the bar. Default `"label, value"`. */
+    accessibilityLabel?: string;
+}
+export interface BarChartProps {
+    data: ReadonlyArray<BarChartDatum>;
+    /** Colour of the bars. Default `'primary'`. Drawn in the tone's text ink so it holds 3:1 on the page in light and dark. */
+    tone?: BarChartTone;
+    /** Bar colour override; wins over `tone`. */
+    color?: string;
+    /** Height of the plot in points. Default `160`. */
+    height?: number;
+    /** What the chart shows, read first by a screen reader: "Approvals per day". */
+    label?: string;
+    /** The main message in a sentence, visible while no bar is picked: "Approvals peaked on Thursday". Default: the highest bar. */
+    summary?: string;
+    /** Write a value in full, for the callout and the spoken text. Default: the house number format (Indian grouping). */
+    formatValue?: (value: number) => string;
+    /** Write a value short, for the axis and the figures on the bars. Default: compact Indian form (1.5L, 2.3Cr). */
+    formatTick?: (value: number) => string;
+    /** Draw each bar's value on it. Default: when there are 7 bars or fewer. */
+    showValues?: boolean;
+    /** Picked bar (controlled); `null` for none. */
+    selection?: number | null;
+    /** Picked bar when uncontrolled. Default none. */
+    defaultSelection?: number | null;
+    /** Called when a bar is picked, or `null` when the picked bar is tapped again. */
+    onSelect?: (index: number | null) => void;
+    /** Haptic tick for each bar a drag crosses and for a tap. `false` turns it off. Default `'tick'`. */
+    haptic?: HapticType | false;
+    style?: StyleProp<ViewStyle>;
+    testID?: string;
+}
+declare const BarChart: import("react").ForwardRefExoticComponent<BarChartProps & import("react").RefAttributes<RNView>>;
+export { BarChart };
+export default BarChart;
+//# sourceMappingURL=BarChart.d.ts.map

package/lib/typescript/module/components/BarChart/index.d.ts

@@ -0,0 +1,3 @@
+export type { BarChartDatum, BarChartProps, BarChartTone } from './BarChart.js';
+export { BarChart, default } from './BarChart.js';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/module/components/BarChart/scale.d.ts

@@ -0,0 +1,15 @@
+export interface BarScale {
+    /** Lowest value on the axis; never above zero. */
+    min: number;
+    /** Highest value on the axis; never below zero. */
+    max: number;
+    /** Axis ticks from `min` to `max`, on round steps (1, 2 or 5 times a power of ten). */
+    ticks: number[];
+}
+/**
+ * The axis of a bar chart: zero is always on it (a bar's length is its value),
+ * the other end rounds up to a familiar step (0, 5, 10 ...), and values that
+ * are not finite numbers are ignored.
+ */
+export declare const barScale: (values: ReadonlyArray<number>, targetTicks?: number) => BarScale;
+//# sourceMappingURL=scale.d.ts.map

package/lib/typescript/module/components/BottomNavigation/BottomNavigation.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import type { View as RNView, StyleProp, TextStyle, ViewStyle } from 'react-native';
+import type { ScrollDirection } from '../../hooks/useScrollDirection.js';
 import type { ShadowScale } from '../../theme/types.js';
 import type { HapticType } from '../../utils/index.js';
 import type { SlotIcon, SlotIconState } from '../AppIcon/index.js';
@@ -114,6 +115,11 @@ export interface BottomNavigationCenterAction {
     haptic?: HapticType | false;
     testID?: string;
 }
+/** What the bar tells a function `accessory` when it draws. */
+export interface BottomNavigationAccessoryState {
+    /** True while the bar is minimised: the accessory sits inline beside the tabs. */
+    minimized: boolean;
+}
 export interface BottomNavigationProps {
     tabs: TabConfig[];
     /** A pressable button in the middle of the bar, between the tabs. */
@@ -200,6 +206,32 @@ export interface BottomNavigationProps {
      * Off unless set.
      */
     border?: boolean;
+    /**
+     * Opt in to minimising the bar while the person scrolls down: the labels go
+     * and the bar shrinks to its icons (it never hides), and it restores on
+     * scroll up, on reaching the top, or on a tap on a tab. Needs
+     * `scrollDirection` from the scroll view's `useScrollDirection`. Stays
+     * expanded while a screen reader is on, and snaps with no animation under
+     * Reduce Motion. Off by default.
+     */
+    minimizeOnScroll?: boolean;
+    /**
+     * The scroll view's direction, from `useScrollDirection().direction`. Only
+     * read while `minimizeOnScroll` is set: `down` minimises, `up` and `idle`
+     * (at the top) restore. Default `idle`. A tap on a tab restores the bar
+     * until the direction next changes, so keep one hook per screen: sharing one
+     * across tab screens leaves `down` unchanged when the person returns to
+     * the top of another.
+     */
+    scrollDirection?: ScrollDirection;
+    /**
+     * A compact strip tied to the bar, such as a "clocked in" status. Expanded,
+     * it sits above the tabs across the bar's width; minimised, it moves inline
+     * to the left of the tabs, so keep it small there. Pass a function to draw
+     * a smaller version when `minimized`. Drawn whether or not
+     * `minimizeOnScroll` is set; `testID` gives it `${testID}-accessory`.
+     */
+    accessory?: React.ReactNode | ((state: BottomNavigationAccessoryState) => React.ReactNode);
     style?: StyleProp<ViewStyle>;
     /** Style applied to the active indicator of every variant (pill, line, bubble or expanded pill). */
     indicatorStyle?: StyleProp<ViewStyle>;

package/lib/typescript/module/components/BottomNavigation/index.d.ts

@@ -1,3 +1,3 @@
-export type { BottomNavigationCenterAction, BottomNavigationElevation, BottomNavigationIndicatorPosition, BottomNavigationIndicatorRadius, BottomNavigationProps, BottomNavigationRadius, BottomNavigationVariant, TabBadge, TabConfig, TabIcon, TabIconProps } from './BottomNavigation.js';
+export type { BottomNavigationAccessoryState, BottomNavigationCenterAction, BottomNavigationElevation, BottomNavigationIndicatorPosition, BottomNavigationIndicatorRadius, BottomNavigationProps, BottomNavigationRadius, BottomNavigationVariant, TabBadge, TabConfig, TabIcon, TabIconProps } from './BottomNavigation.js';
 export { BottomNavigation, default } from './BottomNavigation.js';
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/module/components/BottomNavigation/useScreenReaderEnabled.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Whether VoiceOver or TalkBack is running. Subscribes only while `active`, so
+ * a bar that never minimises keeps no listener. Always false on web: React
+ * Native Web's `isScreenReaderEnabled` resolves `true` unconditionally and
+ * fires no change event, so it cannot tell a reader from none.
+ */
+export declare const useScreenReaderEnabled: (active: boolean) => boolean;
+//# sourceMappingURL=useScreenReaderEnabled.d.ts.map

package/lib/typescript/module/components/BottomSheet/BottomSheet.d.ts

@@ -14,7 +14,8 @@
  * ref.current?.expand();   // open at first snap point (or `index` prop)
  * ref.current?.expand(2);  // open at specific index
  * ref.current?.collapse(); // animate to smallest snap point
- * ref.current?.close();    // dismiss
+ * ref.current?.close();    // dismiss (never asks `confirmDismiss`)
+ * ref.current?.requestClose(); // dismiss the way a drag or the scrim would: asks first
  */
 import type React from 'react';
 import type { LayoutChangeEvent, NativeScrollEvent, NativeSyntheticEvent, StyleProp, ViewStyle } from 'react-native';
@@ -49,6 +50,23 @@ export interface BottomSheetProps {
     onAfterClose?: () => void;
     enablePanDownToClose?: boolean;
     enableBackdropPress?: boolean;
+    /**
+     * Asked before the user dismisses the sheet: a handle drag past the close
+     * threshold or a fast swipe down, a tap on the scrim, hardware Back (Android)
+     * and Escape (web), and `requestClose()`. Return `true` (or resolve `true`)
+     * to let it close, `false` to keep it open. A refused drag springs back to
+     * the snap point it started from, and `onChange(-1)` does not fire.
+     *
+     * Show the question with a `Dialog` or `OptionSheet` rendered inside this
+     * sheet's children (a second native modal beside the sheet's own does not
+     * present on iOS), and resolve a Promise from its buttons. While a Promise
+     * is pending, further dismissals are ignored, so it must settle. A rejected
+     * Promise leaves the sheet open and surfaces as an unhandled rejection.
+     *
+     * `ref.close()`, `useBottomSheet().close` and a controlled `index={-1}` are
+     * the app's own decision (a Save button, say) and never ask.
+     */
+    confirmDismiss?: () => boolean | Promise<boolean>;
     /**
      * Wrap `children` in a vertical ScrollView sized to the space between header
      * and footer. Off by default; a plain View then holds the content. The sheet
@@ -130,7 +148,19 @@ export interface BottomSheetProps {
 export interface BottomSheetRef {
     expand: (index?: number) => void;
     collapse: () => void;
-    close: () => void;
+    /**
+     * Closes without asking `confirmDismiss`. Resolves once the close has
+     * finished (when `onAfterClose` fires); resolves at once on a sheet that is
+     * not open, and when a reopen overtakes the close or the sheet unmounts.
+     */
+    close: () => Promise<void>;
+    /**
+     * Closes the way a drag or the scrim would: asks `confirmDismiss` first.
+     * Resolves `true` once the sheet has closed (or was not open), `false` when
+     * the dismissal was refused, ignored while another is being decided, or
+     * overtaken by a reopen or unmount.
+     */
+    requestClose: () => Promise<boolean>;
 }
 /**
  * State + actions exposed to anything rendered inside a `<BottomSheet>` —
@@ -148,7 +178,8 @@ export interface BottomSheetContextValue {
     snapPoints: number[];
     expand: (index?: number) => void;
     collapse: () => void;
-    close: () => void;
+    close: () => Promise<void>;
+    requestClose: () => Promise<boolean>;
 }
 /**
  * Access the enclosing `<BottomSheet>`'s state and imperative actions.

package/lib/typescript/module/components/BottomSheet/index.d.ts

@@ -1,3 +1,5 @@
 export type { BottomSheetContextValue, BottomSheetPresentation, BottomSheetProps, BottomSheetRef, SnapPoint } from './BottomSheet.js';
 export { BottomSheet, default, useBottomSheet } from './BottomSheet.js';
+export type { SheetSwap, SheetSwapOptions } from './useSheetSwap.js';
+export { useSheetSwap } from './useSheetSwap.js';
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/module/components/BottomSheet/useSheetSwap.d.ts

@@ -0,0 +1,24 @@
+import type { RefObject } from 'react';
+import type { BottomSheetRef } from './BottomSheet.js';
+export interface SheetSwapOptions {
+    /** Snap index the next sheet opens at. Defaults to its first snap point. */
+    index?: number;
+    /** Ask the first sheet's `confirmDismiss` before closing it. Off by default (the app chose to swap). */
+    confirm?: boolean;
+}
+export type SheetSwap = (from: RefObject<BottomSheetRef | null>, to: RefObject<BottomSheetRef | null>, options?: SheetSwapOptions) => Promise<boolean>;
+/**
+ * Replaces one bottom sheet with another: closes `from`, waits until it is
+ * fully gone (on iOS, until its native modal window is dismissed, which UIKit
+ * needs before it presents another), then opens `to`. One sheet is on screen
+ * at a time and there is no window where both are mounted.
+ *
+ * Resolves `true` once `to` has been asked to open, `false` when nothing was
+ * swapped: the close was refused or overtaken by a reopen (`confirm: true`),
+ * the component unmounted, `to` is not mounted, or another swap is running.
+ *
+ * const swap = useSheetSwap();
+ * swap(listRef, detailRef, { index: 1 });
+ */
+export declare const useSheetSwap: () => SheetSwap;
+//# sourceMappingURL=useSheetSwap.d.ts.map

package/lib/typescript/module/components/Card/Card.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import type { GestureResponderEvent, ImageSourcePropType, PressableProps, View as RNView, StyleProp, ViewStyle } from 'react-native';
 import type { ColorPalette, GradientDefinition } from '../../theme/types.js';
 import type { HapticType } from '../../utils/hapticUtils.js';
+import type { ContextMenuConfig } from '../Menu/useContextMenu.js';
 export type CardVariant = 'elevated' | 'outlined' | 'filled' | 'flat';
 /** A text action in the card header, drawn with a 44 pt hit target. */
 export interface CardTextAction {
@@ -71,6 +72,14 @@ export interface CardProps extends Omit<PressableProps, 'style' | 'children'> {
     onPress?: (event: GestureResponderEvent) => void;
     /** Haptic feedback for interactions. Pass false to disable; pass a HapticType to override the default. */
     haptic?: HapticType | false;
+    /**
+     * A long-press menu. Long press (right-click or Shift+F10 on the web) lifts
+     * the card over a dimmed screen with the menu beside it, and every item is
+     * also a screen reader action on the card. Unavailable items are hidden
+     * unless `unavailable: 'disable'`. The menu takes the long press: an
+     * `onLongPress` passed beside it is not called.
+     */
+    contextMenu?: ContextMenuConfig;
     accessibilityLabel?: string;
     style?: StyleProp<ViewStyle>;
     /** Alias for `style` — applied to the outer card element. */

package/lib/typescript/module/components/Composer/Composer.d.ts

@@ -0,0 +1,61 @@
+import type React from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+import { TextInput } from 'react-native';
+import type { HapticType } from '../../utils/hapticUtils.js';
+export interface ComposerProps {
+    /** Called with the trimmed text; the box clears once it is handed over. */
+    onSend: (text: string) => unknown;
+    /** Controlled draft. Leave unset and the composer keeps its own. */
+    value?: string;
+    onChangeText?: (text: string) => void;
+    placeholder?: string;
+    /** The text box's screen-reader name. Default: `placeholder`. */
+    accessibilityLabel?: string;
+    /** The send button's screen-reader name. Default 'Send'. */
+    sendLabel?: string;
+    /** A reply is arriving: the person can type but not send, and send shows a spinner. */
+    busy?: boolean;
+    /** Nothing can be typed or sent. */
+    disabled?: boolean;
+    maxLength?: number;
+    /** The box grows to this many lines, then scrolls. Default 5. */
+    maxLines?: number;
+    /** Before the box, e.g. an attach button. */
+    leading?: React.ReactNode;
+    /** Between the box and send, e.g. a microphone button. */
+    trailing?: React.ReactNode;
+    /** Inside the bar, above the row: a banner, a "questions left" note. Rides the keyboard too. */
+    above?: React.ReactNode;
+    /** Inside the bar, below the row: a disclaimer. */
+    below?: React.ReactNode;
+    /**
+     * Rides the keyboard (react-native-keyboard-controller's `KeyboardStickyView`).
+     * Default true. Turn it off inside a sheet that already moves with the
+     * keyboard. Pair it with a `MessageList` given the same `keyboardOffset`.
+     */
+    keyboardAware?: boolean;
+    /**
+     * How far below the bar the keyboard's top edge starts: the bottom safe area
+     * the bar pads for, plus anything under it such as a tab bar. Default: the
+     * bottom safe-area inset when `safeArea` is on, else 0.
+     */
+    keyboardOffset?: number;
+    /** Pad the bar for the bottom safe area. Default true; off above a tab bar. */
+    safeArea?: boolean;
+    autoFocus?: boolean;
+    /** Send haptic. Default `'selection'`. */
+    haptic?: HapticType | false;
+    style?: StyleProp<ViewStyle>;
+    testID?: string;
+}
+/**
+ * The message box of a chat: a text box that grows to `maxLines` and then
+ * scrolls, a send button that is disabled while the trimmed text is empty,
+ * and slots for an attach or microphone button. The return key adds a line,
+ * as phone keyboards expect; only the button sends. By default the bar rides
+ * the keyboard and pads for the bottom safe area, so a chat screen is a
+ * `MessageList` above a `Composer` with no keyboard wiring of its own.
+ */
+export declare const Composer: React.ForwardRefExoticComponent<ComposerProps & React.RefAttributes<TextInput>>;
+export default Composer;
+//# sourceMappingURL=Composer.d.ts.map

package/lib/typescript/module/components/Composer/index.d.ts

@@ -0,0 +1,3 @@
+export type { ComposerProps } from './Composer.js';
+export { Composer, default } from './Composer.js';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/module/components/DateSeparator/DateSeparator.d.ts

@@ -0,0 +1,37 @@
+import { type DateValue } from '@webority/mobile-core';
+import type React from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+export interface DateSeparatorLabels {
+    today: string;
+    yesterday: string;
+}
+export declare const DEFAULT_DATE_SEPARATOR_LABELS: Readonly<DateSeparatorLabels>;
+export interface DateSeparatorProps {
+    /** The day to name. An instant is read in the configured zone (IST by default). */
+    date?: DateValue;
+    /** Draws this text instead of a day, e.g. "New messages" above the first unread. */
+    label?: string;
+    /** Draws the text and rules in the brand colour, for an unread divider. */
+    emphasis?: boolean;
+    labels?: Partial<DateSeparatorLabels>;
+    /** The reference for Today and Yesterday. Default: now. */
+    now?: Date;
+    style?: StyleProp<ViewStyle>;
+    testID?: string;
+}
+/**
+ * "Today", "Yesterday" or "10-Oct-2026" for a day, in the configured zone.
+ * Exported so a list can key its separators on the same text it shows.
+ */
+export declare const dayLabel: (date: DateValue, options?: {
+    now?: Date;
+    labels?: Partial<DateSeparatorLabels>;
+}) => string;
+/**
+ * A centred day name between two hairlines, for a message list. It is a
+ * header to screen readers, so a person can move through a conversation by
+ * day. With `label` and `emphasis` it draws an unread divider instead.
+ */
+export declare const DateSeparator: React.FC<DateSeparatorProps>;
+export default DateSeparator;
+//# sourceMappingURL=DateSeparator.d.ts.map

package/lib/typescript/module/components/DateSeparator/index.d.ts

@@ -0,0 +1,3 @@
+export type { DateSeparatorLabels, DateSeparatorProps } from './DateSeparator.js';
+export { DateSeparator, DEFAULT_DATE_SEPARATOR_LABELS, dayLabel, default } from './DateSeparator.js';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/module/components/FloatingActionButton/FloatingActionButton.d.ts

@@ -29,7 +29,8 @@ declare const FloatingActionButton: React.ForwardRefExoticComponent<FloatingActi
 export interface FloatingActionButtonGroupAction {
     key: string;
     icon: React.ReactNode;
-    label?: string;
+    /** Visible text beside the action. Required: an icon-only menu item is not allowed. */
+    label: string;
     onPress: () => void;
     tone?: FloatingActionButtonTone;
     accessibilityLabel: string;
@@ -37,6 +38,7 @@ export interface FloatingActionButtonGroupAction {
 export interface FloatingActionButtonGroupProps {
     primaryIcon: React.ReactNode;
     primaryActiveIcon?: React.ReactNode;
+    /** 2 to 6 actions, each with a visible label. Only the first 6 are drawn. */
     actions: FloatingActionButtonGroupAction[];
     open?: boolean;
     defaultOpen?: boolean;

package/lib/typescript/module/components/Input/Input.d.ts

@@ -108,8 +108,8 @@ export interface InputProps extends Omit<TextInputProps, 'style'> {
      * `'https://'`. The mirror of `unit`: the field's font size in the
      * placeholder colour, so it reads as part of the field rather than of what
      * was typed. Sits after `leftIcon` when both are set. A node (a symbol with
-     * a subscript) is drawn as is, on the same line and with the same gap; it
-     * owns its own type, and `prefixStyle` does not reach into it.
+     * a subscript) sits in the same Text on the same line with the same gap, so
+     * its base and subscript take that size and ink, and `prefixStyle` too.
      */
     prefix?: React.ReactNode;
     /** Style applied to the prefix text. */

package/lib/typescript/module/components/ListItem/ListItem.d.ts

@@ -4,6 +4,7 @@ import type { HapticType } from '../../utils/hapticUtils.js';
 import type { SlotIcon } from '../AppIcon/slotIcon.js';
 import type { ButtonProps } from '../Button/index.js';
 import type { IconBadgeTone } from '../IconBadge/index.js';
+import type { ContextMenuConfig } from '../Menu/useContextMenu.js';
 import type { SwipeableAction } from '../Swipeable/index.js';
 export type ListItemSize = 'sm' | 'md' | 'lg';
 /**
@@ -88,6 +89,14 @@ export interface ListItemProps {
     leftActions?: SwipeableAction[];
     /** Optional swipe-from-right actions. Wraps the row in a Swipeable when provided. */
     rightActions?: SwipeableAction[];
+    /**
+     * A long-press menu. Long press (right-click or Shift+F10 on the web) lifts
+     * the row over a dimmed screen with the menu beside it, and every item is
+     * also a screen reader action on the row. Unavailable items are hidden
+     * unless `unavailable: 'disable'`. Keep each action reachable elsewhere too.
+     * A disabled row has no menu.
+     */
+    contextMenu?: ContextMenuConfig;
     accessibilityLabel?: string;
     accessibilityHint?: string;
     style?: StyleProp<ViewStyle>;

package/lib/typescript/module/components/Menu/Menu.d.ts

@@ -0,0 +1,46 @@
+import React from 'react';
+import type { HapticType } from '../../utils/hapticUtils.js';
+import type { PlacementPreference } from '../../utils/placement.js';
+import type { MenuItem, MenuItems, MenuPresentation, MenuUnavailable } from './menuModel.js';
+export interface MenuProps {
+    /** A flat list, or a list of up to three groups split by dividers. */
+    items: MenuItems;
+    /**
+     * The element that opens the menu on press, usually an `IconButton` or a
+     * `Button`. Its own `onPress` still runs first.
+     */
+    trigger: React.ReactElement;
+    /** A short heading over the items; also the menu's accessible name. */
+    title?: string;
+    /** Up to three icon actions in a row above the list (the iOS "medium" layout). */
+    topActions?: ReadonlyArray<MenuItem>;
+    /** Preferred side of the trigger; flips when the other side has the room. Default `'bottom'`. */
+    placement?: PlacementPreference;
+    /** Default `'auto'`: a sheet on a phone past seven items or with a description. */
+    presentation?: MenuPresentation;
+    /** Default `'disable'`: unavailable items stay visible, dimmed and focusable. */
+    unavailable?: MenuUnavailable;
+    /** Controlled open state. */
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Haptic on choosing an item. Pass false to disable; a HapticType to override. */
+    haptic?: HapticType | false;
+    /** Accessible name of the menu when there is no `title`. */
+    accessibilityLabel?: string;
+    /** Accessible name of the tap-outside area. Default `'Close menu'`. */
+    closeLabel?: string;
+    /** Accessible name of a submenu's Back row. Default `'Back'`. */
+    backLabel?: string;
+    /** On the trigger wrapper; the open menu takes `<testID>-menu` and its scrim `<testID>-scrim`. */
+    testID?: string;
+}
+/**
+ * A menu opened from a button, anchored below it (above when there is no
+ * room) and closed by choosing an item, tapping outside, Back or Escape.
+ * Items run after the menu has closed. For a long-press menu on a row or a
+ * card, use their `contextMenu` prop.
+ */
+declare const Menu: React.FC<MenuProps>;
+export { Menu };
+export default Menu;
+//# sourceMappingURL=Menu.d.ts.map

package/lib/typescript/module/components/Menu/MenuSurface.d.ts

@@ -0,0 +1,30 @@
+import type React from 'react';
+import type { LayoutRectangle } from 'react-native';
+import type { HapticType } from '../../utils/hapticUtils.js';
+import type { PlacementPreference } from '../../utils/placement.js';
+import type { MenuItem, MenuItems, MenuPresentation, MenuUnavailable } from './menuModel.js';
+export interface MenuSurfaceProps {
+    open: boolean;
+    /** The trigger or the long-pressed view, in window coordinates. */
+    anchor: LayoutRectangle | null;
+    items: MenuItems;
+    title?: string;
+    topActions?: ReadonlyArray<MenuItem>;
+    placement: PlacementPreference;
+    presentation: MenuPresentation;
+    unavailable: MenuUnavailable;
+    /** A long-press menu: a dimmed scrim, the preview lifted, items reversed when it opens above. */
+    context?: boolean;
+    /** Drawn over the anchor while a context menu is open. */
+    preview?: React.ReactNode;
+    onClose: () => void;
+    /** Where focus goes back to when the menu closes without running an item. */
+    restoreFocusTo?: () => unknown;
+    haptic?: HapticType | false;
+    accessibilityLabel?: string;
+    closeLabel: string;
+    backLabel: string;
+    testID?: string;
+}
+export declare const MenuSurface: React.FC<MenuSurfaceProps>;
+//# sourceMappingURL=MenuSurface.d.ts.map

package/lib/typescript/module/components/Menu/focusHost.d.ts

@@ -0,0 +1,9 @@
+/** Delay before moving screen reader focus, so it lands after the surface has drawn. */
+export declare const FOCUS_DELAY_MS = 150;
+/**
+ * Moves focus to a host view: keyboard focus on the web, screen reader focus
+ * on iOS and Android. A ref that resolved to something other than a host
+ * view (a consumer component without a forwarded ref) is left alone.
+ */
+export declare const focusHost: (node: unknown) => void;
+//# sourceMappingURL=focusHost.d.ts.map

package/lib/typescript/module/components/Menu/index.d.ts

@@ -0,0 +1,5 @@
+export type { MenuProps } from './Menu.js';
+export { default, Menu } from './Menu.js';
+export type { MenuItem, MenuItems, MenuPresentation, MenuUnavailable } from './menuModel.js';
+export type { ContextMenuConfig } from './useContextMenu.js';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/module/components/Menu/menuModel.d.ts

@@ -0,0 +1,68 @@
+import type { SlotIcon } from '../AppIcon/slotIcon.js';
+/**
+ * One menu entry. Items are data, not children, so the same list can later
+ * be handed to a native menu (UIMenu, a Compose DropdownMenu) unchanged.
+ */
+export interface MenuItem {
+    /** Stable id; also names the item's screen reader action on a context menu. */
+    key: string;
+    /** A verb, in title case on iOS. End it with an ellipsis when the action asks for more. */
+    label: string;
+    /** Leading icon. Give every item in a group an icon, or none of them. */
+    icon?: SlotIcon;
+    /** A line under the label. On a phone any description presents the menu as a sheet. */
+    description?: string;
+    /** Short trailing text, such as a count. */
+    detail?: string;
+    /** Draws a check mark and reports the checked state; leave undefined for a plain action. */
+    checked?: boolean;
+    /** Draws the item in the error ink. Confirm the action in a Dialog from `onPress`. */
+    destructive?: boolean;
+    /** Unavailable now. Hidden or dimmed by the menu's `unavailable` mode. */
+    disabled?: boolean;
+    /** Never shown. */
+    hidden?: boolean;
+    /** One level of items that replaces the list, with a Back row, when this item is chosen. */
+    submenu?: ReadonlyArray<MenuItem>;
+    /** Runs after the menu has closed, so a Dialog or a native picker can open from it. */
+    onPress?: () => void;
+    accessibilityLabel?: string;
+    testID?: string;
+}
+/** A flat list is one group; a list of lists is groups split by dividers (at most 3). */
+export type MenuItems = ReadonlyArray<MenuItem> | ReadonlyArray<ReadonlyArray<MenuItem>>;
+/**
+ * `hide` drops a disabled item (the HIG rule for context menus); `disable`
+ * shows it dimmed and focusable but not selectable (the Material rule for a
+ * button menu).
+ */
+export type MenuUnavailable = 'hide' | 'disable';
+/**
+ * `popover` anchors the menu to its trigger; `sheet` lists it in an
+ * OptionSheet; `auto` uses the sheet on a phone when the menu has more than
+ * seven items or any description, and the popover otherwise.
+ */
+export type MenuPresentation = 'auto' | 'popover' | 'sheet';
+export declare const MAX_GROUPS = 3;
+export declare const MAX_TOP_ACTIONS = 3;
+export declare const SHEET_ITEM_THRESHOLD = 7;
+/** Prefixes a context menu's screen reader actions, so a key never collides with `activate`. */
+export declare const ACTION_PREFIX = "menu:";
+/** The groups to draw: hidden items and empty groups removed. */
+export declare const visibleGroups: (items: MenuItems, unavailable: MenuUnavailable) => ReadonlyArray<ReadonlyArray<MenuItem>>;
+/** The top row of the iOS "medium" layout, cut to three. */
+export declare const visibleTopActions: (topActions: ReadonlyArray<MenuItem> | undefined, unavailable: MenuUnavailable) => ReadonlyArray<MenuItem>;
+/** Whether `auto` presentation should use the sheet for these items on a phone. */
+export declare const wantsSheet: (groups: ReadonlyArray<ReadonlyArray<MenuItem>>, topActions: ReadonlyArray<MenuItem>) => boolean;
+export interface MenuAction {
+    name: string;
+    label: string;
+    item: MenuItem;
+}
+/**
+ * Every enabled leaf as a screen reader action: a context menu is reached by
+ * a long press, and the HIG wants its actions available without the gesture.
+ * A submenu item names its parent first.
+ */
+export declare const menuActions: (groups: ReadonlyArray<ReadonlyArray<MenuItem>>, topActions: ReadonlyArray<MenuItem>) => MenuAction[];
+//# sourceMappingURL=menuModel.d.ts.map