@kanso-labs/react-native-kanso-ui 0.8.0 → 0.9.0

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

@@ -0,0 +1,80 @@
+import { ButtonLinkForm, ButtonPressForm } from "../../button/index.js";
+import { FabSize, FabTone, FabVariant } from "../../fab/index.js";
+import { PressableProps, StyleProp, View, ViewStyle } from "react-native";
+import { ComponentRef, ReactNode, Ref } from "react";
+//#region src/components/fab/index.d.ts
+type FabNaming = {
+  /**
+   * What the FAB does, in words. A FAB without a `label` is an icon
+   * alone, which has no name of its own, so it needs this; with a
+   * `label` the label is its name.
+   */
+  readonly 'aria-label': string;
+  readonly label?: never;
+} | {
+  readonly 'aria-label'?: string;
+  /**
+   * A label after the icon, which makes this the extended FAB: as tall
+   * as the size, as wide as what it holds.
+   */
+  readonly label: ReactNode;
+};
+type FabPressForm = Omit<ButtonPressForm, 'isPending' | 'pendingLabel'> & {
+  readonly isPending?: never;
+  readonly pendingLabel?: never;
+};
+type FabProps = (ButtonLinkForm | FabPressForm) & FabNaming & Omit<PressableProps, 'aria-label' | 'children' | 'disabled' | 'style'> & {
+  /**
+   * The FAB's icon. The FAB hands it its colour and the size's icon size
+   * through `useIconStyle()`.
+   */
+  readonly children?: ReactNode;
+  /**
+   * Draws no press ripple. The state layers are unaffected.
+   * @default false
+   */
+  readonly disableRipple?: boolean;
+  /**
+   * Draws the FAB disabled, without its shadow, and takes no presses.
+   * @default false
+   */
+  readonly isDisabled?: boolean;
+  readonly ref?: Ref<ComponentRef<typeof View>>;
+  /**
+   * The pages' three sizes: `md` the FAB at 56dp, `lg` the medium FAB at
+   * 80dp and `xl` the large FAB at 96dp.
+   * @default 'md'
+   */
+  readonly size?: FabSize;
+  readonly style?: StyleProp<ViewStyle>;
+  /**
+   * The colour role the FAB is drawn in.
+   * @default 'primary'
+   */
+  readonly tone?: FabTone;
+  /**
+   * `tonal` draws the tone's container pair, the pages' default; `filled`
+   * draws the tone itself.
+   * @default 'tonal'
+   */
+  readonly variant?: FabVariant;
+};
+/**
+ * A screen's primary action, raised over its content. Its icon is its
+ * children; given a `label` it is the extended FAB, with the label after the
+ * icon. Given `href` it is a link with the same appearance.
+ *
+ * ```tsx
+ * <Fab aria-label="Label">
+ *   <PlusIcon />
+ * </Fab>
+ * ```
+ *
+ * Without a `label` it is an icon alone, so `aria-label` is required there.
+ * `style`, `ref` and `testID` land on the `Pressable`, which is what a call
+ * site positions over its screen.
+ */
+declare function Fab({ children, delayLongPress, disableRipple, href, isDisabled, label, onBlur, onFocus, onHoverIn, onHoverOut, onLongPress, onPress, onPressIn, onPressOut, ref, size, slot, style, tone, type, variant, ...props }: FabProps): import("react").JSX.Element;
+//#endregion
+export { Fab, type FabProps, type FabSize, type FabTone, type FabVariant };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/fab/index.js

@@ -0,0 +1,231 @@
+import { IconStyleContext } from "../../glyphs/icon-style.js";
+import { useTheme } from "../../theme/scope.js";
+import { composeStyles } from "../../theme/styles.js";
+import { usePressFeedback } from "../../press/index.js";
+import { useTypeRole } from "../../typography/roles.js";
+import { AnimatedPressable, buttonStyles, useButtonAction, useSlotTrigger } from "../../button/index.js";
+import { EXTENDED_FAB_ROLES, FAB_ICON_SIZES, extendedFabSizesOf, fabCornersOf, fabPalettesOf, fabShadowOf, fabSizesOf } from "../../fab/index.js";
+import { c } from "react/compiler-runtime";
+import { StyleSheet, Text, View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/fab/index.tsx
+const styles = StyleSheet.create({
+	base: {
+		alignItems: "center",
+		flexDirection: "row",
+		flexShrink: 0,
+		justifyContent: "center"
+	},
+	icon: {
+		alignItems: "center",
+		flexShrink: 0,
+		justifyContent: "center"
+	},
+	label: { flexShrink: 1 }
+});
+/**
+* A screen's primary action, raised over its content. Its icon is its
+* children; given a `label` it is the extended FAB, with the label after the
+* icon. Given `href` it is a link with the same appearance.
+*
+* ```tsx
+* <Fab aria-label="Label">
+*   <PlusIcon />
+* </Fab>
+* ```
+*
+* Without a `label` it is an icon alone, so `aria-label` is required there.
+* `style`, `ref` and `testID` land on the `Pressable`, which is what a call
+* site positions over its screen.
+*/
+function Fab(t0) {
+	const $ = c(41);
+	let children;
+	let delayLongPress;
+	let href;
+	let label;
+	let onBlur;
+	let onFocus;
+	let onHoverIn;
+	let onHoverOut;
+	let onLongPress;
+	let onPress;
+	let onPressIn;
+	let onPressOut;
+	let props;
+	let ref;
+	let slot;
+	let style;
+	let t1;
+	let t2;
+	let t3;
+	let t4;
+	let t5;
+	let type;
+	if ($[0] !== t0) {
+		({children, delayLongPress, disableRipple: t1, href, isDisabled: t2, label, onBlur, onFocus, onHoverIn, onHoverOut, onLongPress, onPress, onPressIn, onPressOut, ref, size: t3, slot, style, tone: t4, type, variant: t5, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = delayLongPress;
+		$[3] = href;
+		$[4] = label;
+		$[5] = onBlur;
+		$[6] = onFocus;
+		$[7] = onHoverIn;
+		$[8] = onHoverOut;
+		$[9] = onLongPress;
+		$[10] = onPress;
+		$[11] = onPressIn;
+		$[12] = onPressOut;
+		$[13] = props;
+		$[14] = ref;
+		$[15] = slot;
+		$[16] = style;
+		$[17] = t1;
+		$[18] = t2;
+		$[19] = t3;
+		$[20] = t4;
+		$[21] = t5;
+		$[22] = type;
+	} else {
+		children = $[1];
+		delayLongPress = $[2];
+		href = $[3];
+		label = $[4];
+		onBlur = $[5];
+		onFocus = $[6];
+		onHoverIn = $[7];
+		onHoverOut = $[8];
+		onLongPress = $[9];
+		onPress = $[10];
+		onPressIn = $[11];
+		onPressOut = $[12];
+		props = $[13];
+		ref = $[14];
+		slot = $[15];
+		style = $[16];
+		t1 = $[17];
+		t2 = $[18];
+		t3 = $[19];
+		t4 = $[20];
+		t5 = $[21];
+		type = $[22];
+	}
+	const disableRipple = t1 === void 0 ? false : t1;
+	const isDisabled = t2 === void 0 ? false : t2;
+	const size = t3 === void 0 ? "md" : t3;
+	const tone = t4 === void 0 ? "primary" : t4;
+	const variant = t5 === void 0 ? "tonal" : t5;
+	const theme = useTheme();
+	const role = useTypeRole(EXTENDED_FAB_ROLES[size]);
+	const t6 = slot ?? "default";
+	let t7;
+	if ($[23] !== href || $[24] !== onPress || $[25] !== t6 || $[26] !== type) {
+		t7 = {
+			defaultSelected: void 0,
+			href,
+			isSelected: void 0,
+			isToggle: false,
+			onChange: void 0,
+			onPress,
+			slot: t6,
+			type
+		};
+		$[23] = href;
+		$[24] = onPress;
+		$[25] = t6;
+		$[26] = type;
+		$[27] = t7;
+	} else t7 = $[27];
+	const action = useButtonAction(t7);
+	let t8;
+	if ($[28] !== delayLongPress || $[29] !== href || $[30] !== onHoverIn || $[31] !== onHoverOut || $[32] !== onLongPress || $[33] !== ref || $[34] !== slot) {
+		t8 = {
+			delayLongPress,
+			href,
+			onHoverIn,
+			onHoverOut,
+			onLongPress,
+			ref,
+			slot
+		};
+		$[28] = delayLongPress;
+		$[29] = href;
+		$[30] = onHoverIn;
+		$[31] = onHoverOut;
+		$[32] = onLongPress;
+		$[33] = ref;
+		$[34] = slot;
+		$[35] = t8;
+	} else t8 = $[35];
+	const t9 = useSlotTrigger(t8);
+	let hoverIn;
+	let hoverOut;
+	let longPress;
+	let triggerProps;
+	if ($[36] !== t9) {
+		({onHoverIn: hoverIn, onHoverOut: hoverOut, onLongPress: longPress, ...triggerProps} = t9);
+		$[36] = t9;
+		$[37] = hoverIn;
+		$[38] = hoverOut;
+		$[39] = longPress;
+		$[40] = triggerProps;
+	} else {
+		hoverIn = $[37];
+		hoverOut = $[38];
+		longPress = $[39];
+		triggerProps = $[40];
+	}
+	const palettes = fabPalettesOf(theme);
+	const colors = isDisabled ? palettes.disabled : palettes[variant][tone];
+	const feedback = usePressFeedback({
+		color: colors.content,
+		disabled: isDisabled,
+		disableRipple,
+		onBlur,
+		onFocus,
+		onHoverIn: hoverIn,
+		onHoverOut: hoverOut,
+		onPressIn,
+		onPressOut
+	});
+	const corner = fabCornersOf(theme)[size];
+	const isExtended = label !== void 0;
+	return /* @__PURE__ */ jsxs(AnimatedPressable, {
+		role: href === void 0 ? "button" : "link",
+		...props,
+		...triggerProps,
+		...feedback.handlers,
+		disabled: isDisabled,
+		onLongPress: longPress,
+		onPress: action.onPress,
+		style: composeStyles(styles.base, isExtended ? extendedFabSizesOf(theme)[size] : fabSizesOf(theme)[size], corner, colors.container, fabShadowOf(feedback, isDisabled, theme), feedback.ring, style),
+		children: [
+			/* @__PURE__ */ jsx(View, {
+				style: composeStyles(buttonStyles.clip, corner),
+				children: feedback.layer
+			}),
+			children === void 0 ? null : /* @__PURE__ */ jsx(View, {
+				style: styles.icon,
+				children: /* @__PURE__ */ jsx(IconStyleContext, {
+					value: iconStyleOf(colors.content, size),
+					children
+				})
+			}),
+			isExtended ? /* @__PURE__ */ jsx(Text, {
+				style: composeStyles(role, styles.label, colors.label),
+				children: label
+			}) : null
+		]
+	});
+}
+function iconStyleOf(color, size) {
+	return {
+		color,
+		size: FAB_ICON_SIZES[size]
+	};
+}
+//#endregion
+export { Fab };
+
+//# sourceMappingURL=index.js.map

package/dist/components/fab/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["ComponentRef","ReactNode","Ref","PressableProps","StyleProp","TextStyle","ViewStyle","AnimatedStyle","Text","NativeText","StyleSheet","View","ButtonLinkForm","ButtonPressForm","FabSize","FabTone","FabVariant","IconStyle","AnimatedPressable","buttonStyles","useButtonAction","useSlotTrigger","EXTENDED_FAB_ROLES","extendedFabSizesOf","FAB_ICON_SIZES","fabCornersOf","fabPalettesOf","fabShadowOf","fabSizesOf","IconStyleContext","usePressFeedback","useTheme","composeStyles","useTypeRole","FabNaming","label","FabPressForm","Omit","isPending","pendingLabel","FabProps","children","disableRipple","isDisabled","ref","size","style","tone","variant","styles","create","base","alignItems","flexDirection","flexShrink","justifyContent","icon","Fab","t0","$","_c","delayLongPress","href","onBlur","onFocus","onHoverIn","onHoverOut","onLongPress","onPress","onPressIn","onPressOut","props","slot","t1","t2","t3","t4","t5","type","undefined","theme","role","t6","t7","defaultSelected","isSelected","isToggle","onChange","action","t8","t9","hoverIn","hoverOut","longPress","triggerProps","palettes","colors","disabled","feedback","color","content","corner","isExtended","handlers","container","ring","clip","layer","iconStyleOf","_c","NativeText"],"sources":["../../../src/components/fab/index.tsx"],"sourcesContent":["import type { ComponentRef, ReactNode, Ref } from 'react'\nimport type {\n  PressableProps,\n  StyleProp,\n  TextStyle,\n  ViewStyle,\n} from 'react-native'\nimport type { AnimatedStyle } from 'react-native-reanimated'\n\nimport { Text as NativeText, StyleSheet, View } from 'react-native'\n\nimport type { ButtonLinkForm, ButtonPressForm } from '../../button'\nimport type { FabSize, FabTone, FabVariant } from '../../fab'\nimport type { IconStyle } from '../../glyphs/icon-style'\n\nimport {\n  AnimatedPressable,\n  buttonStyles,\n  useButtonAction,\n  useSlotTrigger,\n} from '../../button'\nimport {\n  EXTENDED_FAB_ROLES,\n  extendedFabSizesOf,\n  FAB_ICON_SIZES,\n  fabCornersOf,\n  fabPalettesOf,\n  fabShadowOf,\n  fabSizesOf,\n} from '../../fab'\nimport { IconStyleContext } from '../../glyphs/icon-style'\nimport { usePressFeedback } from '../../press'\nimport { useTheme } from '../../theme/scope'\nimport { composeStyles } from '../../theme/styles'\nimport { useTypeRole } from '../../typography/roles'\n\n// kanso-ui's Fab: the FAB page's floating action button, and the extended\n// FAB page's form of it with a label. A screen's primary action, raised over\n// the content on the pages' level 3 shadow and lifted to level 4 under a\n// hovering pointer, which is an iPad's or an Android mouse's, since a finger\n// never hovers.\n//\n// Three sizes, the pages' FAB, medium FAB and large FAB: `md` is 56dp with a\n// 24dp icon and a 16dp corner, `lg` 80dp with 28dp and 20dp, and `xl` 96dp\n// with 36dp and 28dp. The extended form keeps the size's height and corner\n// and sets a label after the icon in the size's type role, title medium,\n// title large and headline small, with 16dp, 26dp and 28dp of padding and\n// 8dp, 12dp and 16dp before the label. The 80dp size, the 20dp corner and\n// the 26dp and 28dp paddings fall between steps of their scales and are\n// written out. The pages' small FAB is gone from the newer set, so there is\n// no `xs`.\n//\n// Six colour pairs, by `tone` and `variant`: `tonal` draws the tone's\n// container pair, primary container being the pages' default, and `filled`\n// the tone itself, as Button's two variants of those names do.\n//\n// The hover, focus and pressed layers and the ripple are src/press's, in the\n// icon's colour over the container, as Button's are. The pages give no\n// disabled FAB; a disabled one takes the container every disabled button\n// takes, on-surface at the two disabled opacities, and drops its shadow.\n//\n// Unlike Button, the corner does not morph: the pages draw the FAB at one\n// shape in every state, as web does. Web's forced-colours rule has no\n// counterpart on iOS or Android and is not drawn.\n//\n// It is placed as any view is. A column stretches the extended form as it\n// does a Button, so a FAB floating over a screen takes its place from the\n// call site's `style`.\n//\n// What a press does, the link form and the slot it fills in an overlay are\n// src/button's, shared with Button and IconButton. The metrics and colours\n// are src/fab's, shared with FabMenu's FAB.\n\ntype FabNaming =\n  | {\n      /**\n       * What the FAB does, in words. A FAB without a `label` is an icon\n       * alone, which has no name of its own, so it needs this; with a\n       * `label` the label is its name.\n       */\n      readonly 'aria-label': string\n      readonly label?: never\n    }\n  | {\n      readonly 'aria-label'?: string\n      /**\n       * A label after the icon, which makes this the extended FAB: as tall\n       * as the size, as wide as what it holds.\n       */\n      readonly label: ReactNode\n    }\n\n// A plain button's form, without the pending state web's FAB leaves out.\n// The two are named `never`, so a FAB given them does not compile.\ntype FabPressForm = Omit<ButtonPressForm, 'isPending' | 'pendingLabel'> & {\n  readonly isPending?: never\n  readonly pendingLabel?: never\n}\n\ntype FabProps = (ButtonLinkForm | FabPressForm) &\n  FabNaming &\n  Omit<PressableProps, 'aria-label' | 'children' | 'disabled' | 'style'> & {\n    /**\n     * The FAB's icon. The FAB hands it its colour and the size's icon size\n     * through `useIconStyle()`.\n     */\n    readonly children?: ReactNode\n    /**\n     * Draws no press ripple. The state layers are unaffected.\n     * @default false\n     */\n    readonly disableRipple?: boolean\n    /**\n     * Draws the FAB disabled, without its shadow, and takes no presses.\n     * @default false\n     */\n    readonly isDisabled?: boolean\n    readonly ref?: Ref<ComponentRef<typeof View>>\n    /**\n     * The pages' three sizes: `md` the FAB at 56dp, `lg` the medium FAB at\n     * 80dp and `xl` the large FAB at 96dp.\n     * @default 'md'\n     */\n    readonly size?: FabSize\n    readonly style?: StyleProp<ViewStyle>\n    /**\n     * The colour role the FAB is drawn in.\n     * @default 'primary'\n     */\n    readonly tone?: FabTone\n    /**\n     * `tonal` draws the tone's container pair, the pages' default; `filled`\n     * draws the tone itself.\n     * @default 'tonal'\n     */\n    readonly variant?: FabVariant\n  }\n\nconst styles = StyleSheet.create({\n  // The icon and the label sit in the middle of the container, and a row\n  // never squeezes it.\n  base: {\n    alignItems: 'center',\n    flexDirection: 'row',\n    flexShrink: 0,\n    justifyContent: 'center',\n  },\n  icon: {\n    alignItems: 'center',\n    flexShrink: 0,\n    justifyContent: 'center',\n  },\n  label: {\n    flexShrink: 1,\n  },\n})\n\n/**\n * A screen's primary action, raised over its content. Its icon is its\n * children; given a `label` it is the extended FAB, with the label after the\n * icon. Given `href` it is a link with the same appearance.\n *\n * ```tsx\n * <Fab aria-label=\"Label\">\n *   <PlusIcon />\n * </Fab>\n * ```\n *\n * Without a `label` it is an icon alone, so `aria-label` is required there.\n * `style`, `ref` and `testID` land on the `Pressable`, which is what a call\n * site positions over its screen.\n */\nfunction Fab({\n  children,\n  delayLongPress,\n  disableRipple = false,\n  href,\n  isDisabled = false,\n  label,\n  onBlur,\n  onFocus,\n  onHoverIn,\n  onHoverOut,\n  onLongPress,\n  onPress,\n  onPressIn,\n  onPressOut,\n  ref,\n  size = 'md',\n  slot,\n  style,\n  tone = 'primary',\n  type,\n  variant = 'tonal',\n  ...props\n}: FabProps) {\n  const theme = useTheme()\n  const role = useTypeRole(EXTENDED_FAB_ROLES[size])\n  const action = useButtonAction({\n    defaultSelected: undefined,\n    href,\n    isSelected: undefined,\n    isToggle: false,\n    onChange: undefined,\n    onPress,\n    slot: slot ?? 'default',\n    type,\n  })\n  const {\n    onHoverIn: hoverIn,\n    onHoverOut: hoverOut,\n    onLongPress: longPress,\n    ...triggerProps\n  } = useSlotTrigger({\n    delayLongPress,\n    href,\n    onHoverIn,\n    onHoverOut,\n    onLongPress,\n    ref,\n    slot,\n  })\n  const palettes = fabPalettesOf(theme)\n  const colors = isDisabled ? palettes.disabled : palettes[variant][tone]\n  const feedback = usePressFeedback({\n    color: colors.content,\n    disabled: isDisabled,\n    disableRipple,\n    onBlur,\n    onFocus,\n    onHoverIn: hoverIn,\n    onHoverOut: hoverOut,\n    onPressIn,\n    onPressOut,\n  })\n  const corner = fabCornersOf(theme)[size]\n  const isExtended = label !== undefined\n\n  return (\n    <AnimatedPressable\n      role={href === undefined ? 'button' : 'link'}\n      {...props}\n      {...triggerProps}\n      {...feedback.handlers}\n      disabled={isDisabled}\n      onLongPress={longPress}\n      onPress={action.onPress}\n      style={composeStyles<AnimatedStyle<ViewStyle>>(\n        styles.base,\n        isExtended ? extendedFabSizesOf(theme)[size] : fabSizesOf(theme)[size],\n        corner,\n        colors.container,\n        fabShadowOf(feedback, isDisabled, theme),\n        feedback.ring,\n        style,\n      )}\n    >\n      <View style={composeStyles<ViewStyle>(buttonStyles.clip, corner)}>\n        {feedback.layer}\n      </View>\n      {children === undefined ? null : (\n        <View style={styles.icon}>\n          <IconStyleContext value={iconStyleOf(colors.content, size)}>\n            {children}\n          </IconStyleContext>\n        </View>\n      )}\n      {isExtended ? (\n        <NativeText\n          style={composeStyles<TextStyle>(role, styles.label, colors.label)}\n        >\n          {label}\n        </NativeText>\n      ) : null}\n    </AnimatedPressable>\n  )\n}\n\nfunction iconStyleOf(color: string, size: FabSize): IconStyle {\n  return { color, size: FAB_ICON_SIZES[size] }\n}\n\nexport { Fab }\nexport type { FabProps, FabSize, FabTone, FabVariant }\n"],"mappings":"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"}

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

@@ -0,0 +1,120 @@
+import { FabSize, FabTone } from "../../fab/index.js";
+import { HostInstance, PressableProps, StyleProp, View, ViewStyle } from "react-native";
+import { ComponentRef, ReactNode, Ref } from "react";
+import { Key } from "react-stately";
+//#region src/components/fab-menu/index.d.ts
+type FabMenuItemProps = Omit<PressableProps, 'children' | 'disabled' | 'id' | 'role' | 'style'> & {
+  /** The action's name, drawn as its label. */
+  readonly children: ReactNode;
+  /**
+   * An icon before the label, which takes the label's colour at the page's
+   * 24dp through `useIconStyle()`.
+   */
+  readonly icon?: ReactNode;
+  /**
+   * The key the action is reported by. Give one to every action the call
+   * site needs to tell apart.
+   */
+  readonly id?: Key;
+  /**
+   * Draws the action disabled, without its shadow, and takes no presses on
+   * it.
+   * @default false
+   */
+  readonly isDisabled?: boolean;
+  /**
+   * Called when a press runs the action, in place of the menu's `onAction`
+   * for this one.
+   */
+  readonly onAction?: () => void;
+  readonly ref?: Ref<HostInstance>;
+  readonly style?: StyleProp<ViewStyle>;
+  /**
+   * The action's text, read off `children` when they are a plain string, so
+   * an action whose label is an element passes it.
+   */
+  readonly textValue?: string;
+};
+type FabMenuProps = {
+  /**
+   * What the FAB does, in words: an icon alone has no name, and the menu
+   * takes its name from the FAB that opens it.
+   */
+  readonly 'aria-label': string;
+  /** The actions, as `FabMenu.Item`s. The page asks for two to six. */
+  readonly children: ReactNode;
+  /**
+   * Whether the menu starts open, when it keeps its own state.
+   * @default false
+   */
+  readonly defaultOpen?: boolean;
+  /**
+   * The FAB's icon while the menu is closed. The FAB hands it its colour and
+   * the size's icon size through `useIconStyle()`.
+   */
+  readonly icon: ReactNode;
+  /** Whether the menu is open, when the call site holds the state. */
+  readonly isOpen?: boolean;
+  /** Called with an action's `id` when a press runs it. */
+  readonly onAction?: (key: Key) => void;
+  /** Called with the new state as the menu opens or closes. */
+  readonly onOpenChange?: (isOpen: boolean) => void;
+  readonly ref?: Ref<ComponentRef<typeof View>>;
+  /**
+   * The FAB's size while the menu is closed, as Fab's: `md` 56dp, `lg` 80dp
+   * or `xl` 96dp. Open, it is the close button's 56dp whatever it was.
+   * @default 'md'
+   */
+  readonly size?: FabSize;
+  readonly style?: StyleProp<ViewStyle>;
+  readonly testID?: string;
+  /**
+   * The page's three colour sets: the close button takes the tone and the
+   * actions its container pair.
+   * @default 'primary'
+   */
+  readonly tone?: FabTone;
+};
+/**
+ * A FAB that opens a column of related actions above it, and closes them
+ * again. The actions are `FabMenu.Item`s.
+ *
+ * ```tsx
+ * <FabMenu aria-label="Label" icon={<PlusIcon />}>
+ *   <FabMenu.Item icon={<FirstIcon />} id="first">
+ *     First item
+ *   </FabMenu.Item>
+ *   <FabMenu.Item icon={<SecondIcon />} id="second">
+ *     Second item
+ *   </FabMenu.Item>
+ * </FabMenu>
+ * ```
+ *
+ * `style`, `ref` and `testID` land on the FAB, which is what a call site
+ * positions over its screen.
+ */
+declare function FabMenu({ 'aria-label': label, children, defaultOpen, icon, isOpen, onAction, onOpenChange, ref, size, style, testID, tone }: FabMenuProps): import("react").JSX.Element;
+declare namespace FabMenu {
+  var Item: typeof FabMenuItem;
+}
+/**
+ * One action: a pill holding an icon and a label, on the menu's tone. A press
+ * on it runs it and closes the menu.
+ *
+ * The menu draws it from its entry in the collection, so it renders nothing
+ * on its own. `style`, `ref` and `testID` land on the pill.
+ */
+declare function FabMenuItem(_props: FabMenuItemProps): null;
+declare namespace FabMenuItem {
+  var getCollectionNode: (props: FabMenuItemProps) => Generator<{
+    hasChildNodes: boolean;
+    key: Key | undefined;
+    props: FabMenuItemProps;
+    rendered: ReactNode;
+    textValue: string;
+    type: string;
+  }, void, unknown>;
+}
+//#endregion
+export { FabMenu, FabMenuItem, type FabMenuItemProps, type FabMenuProps };
+//# sourceMappingURL=index.d.ts.map