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

package/dist/components/drop-zone/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["ComponentRef","ReactNode","Ref","GestureResponderEvent","HostInstance","StyleProp","TextStyle","ViewStyle","View","ViewType","useEffect","useEffectEvent","useRef","useState","Platform","Pressable","StyleSheet","Text","ButtonSlots","DragTypes","DropEnterEvent","DropEvent","DropExitEvent","DropOperation","PickedFile","ButtonSlotContext","fileItemOf","isDropTarget","operationOf","typesOf","watchDrops","pickThen","preparePicker","usePressFeedback","refsOf","withOpacity","useTheme","composeStyles","themedStyles","useTypeRole","MIN_HEIGHT","stylesOf","colors","radii","spacing","stateLayerOpacity","disabled","onSurface","disabledContent","create","label","color","onSurfaceVariant","textAlign","labelBox","pointerEvents","labelDisabled","labelOver","onPrimaryContainer","press","borderRadius","md","ring","outlineOffset","root","alignItems","backgroundColor","surface","borderColor","outlineVariant","borderStyle","borderWidth","boxSizing","gap","justifyContent","minHeight","padding","xl","rootDisabled","rootOver","primaryContainer","primary","DropZoneProps","children","getDropOperation","types","allowedOperations","isDisabled","onDrop","event","onDropEnter","onDropExit","ref","style","testID","FileTriggerProps","acceptedFileTypes","allowsMultiple","defaultCamera","onSelect","files","DropZone","t0","$","_c","ariaLabel","t1","undefined","theme","styles","bodyMedium","isOver","setOver","node","web","OS","t2","t3","corners","feedback","t4","handlersNow","t5","disabledNow","name","over","t6","target","current","t7","Symbol","for","T0","t8","t9","t10","t11","t12","t13","handlers","pressOf","absoluteFill","layer","t14","t15","FileTrigger","pick","slotsOf","locationX","x","locationY","y","nativeEvent","dropOperation","map","file","type","items","default","_c"],"sources":["../../../src/components/drop-zone/index.tsx"],"sourcesContent":["import type { ComponentRef, ReactNode, Ref } from 'react'\nimport type {\n  GestureResponderEvent,\n  HostInstance,\n  StyleProp,\n  TextStyle,\n  ViewStyle,\n  View as ViewType,\n} from 'react-native'\n\nimport { useEffect, useEffectEvent, useRef, useState } from 'react'\nimport { Platform, Pressable, StyleSheet, Text, View } from 'react-native'\n\nimport type { ButtonSlots } from '../../button/slots'\nimport type {\n  DragTypes,\n  DropEnterEvent,\n  DropEvent,\n  DropExitEvent,\n  DropOperation,\n} from '../../drop'\nimport type { PickedFile } from '../../files'\n\nimport { ButtonSlotContext } from '../../button/slots'\nimport {\n  fileItemOf,\n  isDropTarget,\n  operationOf,\n  typesOf,\n  watchDrops,\n} from '../../drop'\nimport { pickThen, preparePicker } from '../../files'\nimport { usePressFeedback } from '../../press'\nimport { refsOf } from '../../ref'\nimport { withOpacity } from '../../theme/color'\nimport { useTheme } from '../../theme/scope'\nimport { composeStyles, themedStyles } from '../../theme/styles'\nimport { useTypeRole } from '../../typography/roles'\n\n// A place to drop files, and a way to open the file chooser from a button, as\n// kanso-ui's DropZone and FileTrigger are. Material Design carries no page for\n// either, so the target is drawn from the nearest thing it does carry, the\n// outlined card: the same surface, 1dp outline variant rule and medium\n// corner, at least 160dp tall with 24dp of padding and its label centred in\n// body medium. Web's two departures from that card are kept. **The rule is\n// dashed**, since a solid one reads as a card holding content and a dashed one\n// as a place to put something. **Something over it fills it** with primary\n// container, the rule turning primary and solid, the pair a selected row\n// takes, so \"this is the target\" looks like \"this is the one chosen\". It\n// switches at once rather than over web's short transition, as a card's\n// press colours do.\n//\n// What a drop is depends on the platform, since neither iOS nor Android hands\n// React Native a drag from another app. **Under React Native Web it is HTML5\n// drag and drop**, as on web, through src/drop. **On iOS and Android the\n// target is a press target** that opens the chooser and hands `onDrop` what\n// was picked, as file drop items, so a call site writes one handler for both.\n// The drop operation it reports is `copy`, which is true of a pick as it is\n// of a drop from the desktop: the chooser hands the app a copy in its cache,\n// and the person's own file stays where it was. So a call site reading the\n// operation is told nothing a pick does not do. The press target lies under\n// what the target holds, so a button inside it still takes its own presses,\n// and VoiceOver reaches both rather than one.\n//\n// Disabled is web's: the rule and the label in on surface at the disabled\n// content opacity, over the surface, so a dashed rule at full strength stops\n// reading as somewhere to aim at, and nothing is taken.\n//\n// FileTrigger renders nothing of its own. The Button, IconButton, Fab or Chip\n// it wraps opens the chooser through src/button's default slot, the way a\n// button opens the overlay around it, as web's React Aria hands its\n// FileTrigger's press to whatever it wraps.\n\n// The least height a target takes, from web: room enough to aim at.\nconst MIN_HEIGHT = 160\n\nconst stylesOf = themedStyles(\n  ({ colors, radii, spacing, stateLayerOpacity }) => {\n    const disabled = withOpacity(\n      colors.onSurface,\n      stateLayerOpacity.disabledContent,\n    )\n\n    return StyleSheet.create({\n      // The label, in the muted role, centred under the target's content.\n      label: {\n        color: colors.onSurfaceVariant,\n        textAlign: 'center',\n      },\n      labelBox: {\n        pointerEvents: 'none',\n      },\n      labelDisabled: {\n        color: disabled,\n      },\n      labelOver: {\n        color: colors.onPrimaryContainer,\n      },\n      // The press target fills the target under its content, inside the\n      // rule. Its ring is drawn over the target's edge rather than around\n      // it, as web's is, so a parent clipping its children never cuts the\n      // outer half away: set 1dp into the press target, it covers the rule\n      // and the 1dp inside it.\n      press: {\n        borderRadius: radii.md,\n      },\n      ring: {\n        outlineOffset: -1,\n      },\n      root: {\n        alignItems: 'center',\n        backgroundColor: colors.surface,\n        borderColor: colors.outlineVariant,\n        borderRadius: radii.md,\n        borderStyle: 'dashed',\n        borderWidth: 1,\n        boxSizing: 'border-box',\n        gap: spacing.md,\n        justifyContent: 'center',\n        minHeight: MIN_HEIGHT,\n        padding: spacing.xl,\n      },\n      rootDisabled: {\n        borderColor: disabled,\n      },\n      rootOver: {\n        backgroundColor: colors.primaryContainer,\n        borderColor: colors.primary,\n        borderStyle: 'solid',\n      },\n    })\n  },\n)\n\ntype DropZoneProps = {\n  /**\n   * Names the target without drawing anything, for a page that already says\n   * what it takes. Beats `label` as the name.\n   */\n  readonly 'aria-label'?: string\n  /** What the target holds beside its label, such as a FileTrigger. */\n  readonly children?: ReactNode\n  /**\n   * What a drop of these types would do, from the operations the drag\n   * allows: `cancel` refuses it. A pick on iOS and Android allows `copy`\n   * alone. Left out, the first the drag allows.\n   */\n  readonly getDropOperation?: (\n    types: DragTypes,\n    allowedOperations: readonly DropOperation[],\n  ) => DropOperation\n  /**\n   * Takes nothing: no drop, and on iOS and Android no press, drawn faded.\n   * @default false\n   */\n  readonly isDisabled?: boolean\n  /**\n   * What the target says it is for, drawn inside it and used as its name. A\n   * string rather than a node, since it is what names the target; anything\n   * richer goes in `children`.\n   */\n  readonly label?: string\n  /**\n   * Called with what landed: what was dropped under React Native Web, what\n   * was picked on iOS and Android.\n   */\n  readonly onDrop?: (event: DropEvent) => void\n  /** Called once something the target takes comes over it. Under React Native Web alone. */\n  readonly onDropEnter?: (event: DropEnterEvent) => void\n  /** Called once what came over it leaves, or lands. Under React Native Web alone. */\n  readonly onDropExit?: (event: DropExitEvent) => void\n  readonly ref?: Ref<ComponentRef<typeof ViewType>>\n  readonly style?: StyleProp<ViewStyle>\n  readonly testID?: string\n}\n\ntype FileTriggerProps = {\n  /** The MIME types the chooser offers, such as `image/png` or `image/*`. Every type when left out. */\n  readonly acceptedFileTypes?: readonly string[]\n  /** Whether more than one file can be picked. @default false */\n  readonly allowsMultiple?: boolean\n  /** The Button, IconButton, Fab or Chip that opens the chooser. */\n  readonly children?: ReactNode\n  /**\n   * Opens the camera rather than the chooser, facing away from the person\n   * for `environment` or towards them for `user`, as web's `capture` does.\n   * It takes one photo, or a video where `acceptedFileTypes` names a video\n   * type.\n   */\n  readonly defaultCamera?: 'environment' | 'user'\n  /** Called with what was picked. Not called when the person backs out. */\n  readonly onSelect?: (files: readonly PickedFile[]) => void\n}\n\n/**\n * A place to drop files. Under React Native Web it takes HTML5 drag and drop,\n * as kanso-ui's does; on iOS and Android, which hand an app no drag from\n * another, pressing it opens the file chooser, and `onDrop` is handed what\n * was picked. Either way `onDrop` is handed the items, which\n * `isFileDropItem` and `isTextDropItem` pick apart.\n *\n * ```tsx\n * <DropZone label=\"Drop here\" onDrop={handleDrop}>\n *   <FileTrigger onSelect={handleSelect}>\n *     <Button variant=\"outlined\">Label</Button>\n *   </FileTrigger>\n * </DropZone>\n * ```\n *\n * It is drawn from the outlined card, with a dashed rule rather than a solid\n * one, and fills with the primary container while something is over it.\n * `label` both draws the words and names the target; `aria-label` names it\n * without drawing anything.\n *\n * The chooser is expo-document-picker's, which an app installs alongside the\n * library. Without it a press writes to the console that the package is\n * missing, and nothing opens.\n *\n * `style`, `ref` and `testID` land on the target itself, which is what a\n * layout places.\n */\nfunction DropZone({\n  'aria-label': ariaLabel,\n  children,\n  getDropOperation,\n  isDisabled = false,\n  label,\n  onDrop,\n  onDropEnter,\n  onDropExit,\n  ref,\n  style,\n  testID,\n}: DropZoneProps) {\n  const theme = useTheme()\n  const { colors, radii } = theme\n  const styles = stylesOf(theme)\n  const bodyMedium = useTypeRole('bodyMedium')\n  const [isOver, setOver] = useState(false)\n  const node = useRef<HostInstance | null>(null)\n  const web = Platform.OS === 'web'\n  const feedback = usePressFeedback({\n    color: colors.onSurface,\n    corners: { borderRadius: radii.md },\n    disabled: isDisabled,\n  })\n  const handlersNow = useEffectEvent(() => ({\n    getDropOperation,\n    onDrop,\n    onDropEnter,\n    onDropExit,\n  }))\n  const disabledNow = useEffectEvent(() => isDisabled)\n  const name = ariaLabel ?? label\n  const over = isOver && !isDisabled\n\n  useEffect(() => {\n    if (!web) {\n      preparePicker({})\n      return undefined\n    }\n\n    const target = node.current\n\n    if (!isDropTarget(target)) {\n      return undefined\n    }\n    return watchDrops(\n      target,\n      () => handlersNow(),\n      () => disabledNow(),\n      setOver,\n    )\n  }, [web])\n\n  return (\n    <View\n      // Under React Native Web the target names itself, as a group, and says\n      // it is disabled, since there is no press target to carry either.\n      aria-disabled={web && isDisabled ? true : undefined}\n      aria-label={web ? name : undefined}\n      ref={refsOf<HostInstance>(ref, node)}\n      role={web && name !== undefined ? 'group' : undefined}\n      style={composeStyles<ViewStyle>(\n        styles.root,\n        over ? styles.rootOver : undefined,\n        isDisabled ? styles.rootDisabled : undefined,\n        style,\n      )}\n      testID={testID}\n    >\n      {web ? null : (\n        <Pressable\n          {...feedback.handlers}\n          aria-label={name}\n          disabled={isDisabled}\n          onPress={pressOf(getDropOperation, onDrop)}\n          role=\"button\"\n          style={composeStyles<ViewStyle>(\n            StyleSheet.absoluteFill,\n            styles.press,\n            feedback.ring,\n            feedback.ring === undefined ? undefined : styles.ring,\n          )}\n        >\n          {feedback.layer}\n        </Pressable>\n      )}\n      {label === undefined ? null : (\n        // Hidden from a screen reader, which hears it as the target's name,\n        // and from touches, which land on the press target under it.\n        <View aria-hidden style={styles.labelBox}>\n          <Text\n            style={composeStyles<TextStyle>(\n              bodyMedium,\n              styles.label,\n              over ? styles.labelOver : undefined,\n              isDisabled ? styles.labelDisabled : undefined,\n            )}\n          >\n            {label}\n          </Text>\n        </View>\n      )}\n      {children}\n    </View>\n  )\n}\n\n/**\n * Opens the file chooser from the button it wraps, and hands `onSelect`\n * what was picked.\n *\n * ```tsx\n * <FileTrigger acceptedFileTypes={['image/*']} onSelect={handleSelect}>\n *   <Button>Label</Button>\n * </FileTrigger>\n * ```\n *\n * It renders nothing of its own, so it takes no `style`: what is seen is the\n * Button, IconButton, Fab or Chip it wraps, which opens the chooser after its\n * own `onPress`. `allowsMultiple` takes more than one file, and `defaultCamera`\n * opens the camera instead. kanso-ui's `acceptDirectory` is not here, since\n * neither iOS's chooser nor Android's picks a folder.\n *\n * The chooser is expo-document-picker's and the camera expo-image-picker's,\n * which an app installs alongside the library, the second only for\n * `defaultCamera`. Without the one it needs, a press writes to the console\n * which package is missing, and nothing opens.\n */\nfunction FileTrigger({\n  acceptedFileTypes,\n  allowsMultiple,\n  children,\n  defaultCamera,\n  onSelect,\n}: FileTriggerProps) {\n  useEffect(() => {\n    preparePicker({ defaultCamera })\n  }, [defaultCamera])\n\n  const pick = () => {\n    void pickThen(\n      { acceptedFileTypes, allowsMultiple, defaultCamera },\n      (files) => {\n        onSelect?.(files)\n      },\n    )\n  }\n\n  return <ButtonSlotContext value={slotsOf(pick)}>{children}</ButtonSlotContext>\n}\n\n// What pressing the target does on iOS and Android: opens the chooser and\n// hands `onDrop` what was picked, as a drop that copies, where the call site\n// takes the copy. Built by a call rather than inline at the prop, which is\n// what react-perf's jsx-no-new-function-as-prop is after; the React Compiler\n// memoises the result on its inputs.\nfunction pressOf(\n  getDropOperation: DropZoneProps['getDropOperation'],\n  onDrop: DropZoneProps['onDrop'],\n) {\n  return (event: GestureResponderEvent) => {\n    const { locationX: x, locationY: y } = event.nativeEvent\n\n    void pickThen({ allowsMultiple: true }, (files) => {\n      const dropOperation = operationOf(\n        { getDropOperation },\n        typesOf(files.map((file) => file.type)),\n        ['copy'],\n      )\n\n      if (dropOperation !== 'cancel') {\n        onDrop?.({\n          dropOperation,\n          items: files.map(fileItemOf),\n          type: 'drop',\n          x,\n          y,\n        })\n      }\n    })\n  }\n}\n\n// The slots a FileTrigger hands its button: its press in the default slot,\n// in place of any overlay's around it. Built by a call rather than inline at\n// the prop, which is what react-perf's jsx-no-new-object-as-prop is after;\n// the React Compiler memoises the result on its inputs.\nfunction slotsOf(pick: () => void): ButtonSlots {\n  return { default: pick }\n}\n\nexport { DropZone, FileTrigger }\nexport type { DropZoneProps, FileTriggerProps }\n"],"mappings":"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"}

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

@@ -74,7 +74,7 @@ type FabProps = (ButtonLinkForm | FabPressForm) & FabNaming & Omit<PressableProp
  * `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;
+declare function Fab({ accessibilityHint, 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

@@ -39,7 +39,8 @@ const styles = StyleSheet.create({
 * site positions over its screen.
 */
 function Fab(t0) {
-	const $ = c(41);
+	const $ = c(47);
+	let accessibilityHint;
 	let children;
 	let delayLongPress;
 	let href;
@@ -63,53 +64,55 @@ function Fab(t0) {
 	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);
+		({accessibilityHint, 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;
+		$[1] = accessibilityHint;
+		$[2] = children;
+		$[3] = delayLongPress;
+		$[4] = href;
+		$[5] = label;
+		$[6] = onBlur;
+		$[7] = onFocus;
+		$[8] = onHoverIn;
+		$[9] = onHoverOut;
+		$[10] = onLongPress;
+		$[11] = onPress;
+		$[12] = onPressIn;
+		$[13] = onPressOut;
+		$[14] = props;
+		$[15] = ref;
+		$[16] = slot;
+		$[17] = style;
+		$[18] = t1;
+		$[19] = t2;
+		$[20] = t3;
+		$[21] = t4;
+		$[22] = t5;
+		$[23] = 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];
+		accessibilityHint = $[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 = $[23];
 	}
 	const disableRipple = t1 === void 0 ? false : t1;
 	const isDisabled = t2 === void 0 ? false : t2;
@@ -120,7 +123,7 @@ function Fab(t0) {
 	const role = useTypeRole(EXTENDED_FAB_ROLES[size]);
 	const t6 = slot ?? "default";
 	let t7;
-	if ($[23] !== href || $[24] !== onPress || $[25] !== t6 || $[26] !== type) {
+	if ($[24] !== href || $[25] !== onPress || $[26] !== t6 || $[27] !== type) {
 		t7 = {
 			defaultSelected: void 0,
 			href,
@@ -131,50 +134,62 @@ function Fab(t0) {
 			slot: t6,
 			type
 		};
-		$[23] = href;
-		$[24] = onPress;
-		$[25] = t6;
-		$[26] = type;
-		$[27] = t7;
-	} else t7 = $[27];
+		$[24] = href;
+		$[25] = onPress;
+		$[26] = t6;
+		$[27] = type;
+		$[28] = t7;
+	} else t7 = $[28];
 	const action = useButtonAction(t7);
 	let t8;
-	if ($[28] !== delayLongPress || $[29] !== href || $[30] !== onHoverIn || $[31] !== onHoverOut || $[32] !== onLongPress || $[33] !== ref || $[34] !== slot) {
+	if ($[29] !== accessibilityHint || $[30] !== delayLongPress || $[31] !== href || $[32] !== onHoverIn || $[33] !== onHoverOut || $[34] !== onLongPress || $[35] !== onPressIn || $[36] !== onPressOut || $[37] !== ref || $[38] !== slot) {
 		t8 = {
+			accessibilityHint,
 			delayLongPress,
 			href,
 			onHoverIn,
 			onHoverOut,
 			onLongPress,
+			onPressIn,
+			onPressOut,
 			ref,
 			slot
 		};
-		$[28] = delayLongPress;
-		$[29] = href;
-		$[30] = onHoverIn;
-		$[31] = onHoverOut;
-		$[32] = onLongPress;
-		$[33] = ref;
-		$[34] = slot;
-		$[35] = t8;
-	} else t8 = $[35];
+		$[29] = accessibilityHint;
+		$[30] = delayLongPress;
+		$[31] = href;
+		$[32] = onHoverIn;
+		$[33] = onHoverOut;
+		$[34] = onLongPress;
+		$[35] = onPressIn;
+		$[36] = onPressOut;
+		$[37] = ref;
+		$[38] = slot;
+		$[39] = t8;
+	} else t8 = $[39];
 	const t9 = useSlotTrigger(t8);
 	let hoverIn;
 	let hoverOut;
 	let longPress;
+	let pressIn;
+	let pressOut;
 	let triggerProps;
-	if ($[36] !== t9) {
-		({onHoverIn: hoverIn, onHoverOut: hoverOut, onLongPress: longPress, ...triggerProps} = t9);
-		$[36] = t9;
-		$[37] = hoverIn;
-		$[38] = hoverOut;
-		$[39] = longPress;
-		$[40] = triggerProps;
+	if ($[40] !== t9) {
+		({onHoverIn: hoverIn, onHoverOut: hoverOut, onLongPress: longPress, onPressIn: pressIn, onPressOut: pressOut, ...triggerProps} = t9);
+		$[40] = t9;
+		$[41] = hoverIn;
+		$[42] = hoverOut;
+		$[43] = longPress;
+		$[44] = pressIn;
+		$[45] = pressOut;
+		$[46] = triggerProps;
 	} else {
-		hoverIn = $[37];
-		hoverOut = $[38];
-		longPress = $[39];
-		triggerProps = $[40];
+		hoverIn = $[41];
+		hoverOut = $[42];
+		longPress = $[43];
+		pressIn = $[44];
+		pressOut = $[45];
+		triggerProps = $[46];
 	}
 	const palettes = fabPalettesOf(theme);
 	const colors = isDisabled ? palettes.disabled : palettes[variant][tone];
@@ -186,8 +201,8 @@ function Fab(t0) {
 		onFocus,
 		onHoverIn: hoverIn,
 		onHoverOut: hoverOut,
-		onPressIn,
-		onPressOut
+		onPressIn: pressIn,
+		onPressOut: pressOut
 	});
 	const corner = fabCornersOf(theme)[size];
 	const isExtended = label !== void 0;

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

@@ -1 +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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"}
+{"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","accessibilityHint","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","pressIn","pressOut","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  accessibilityHint,\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    onPressIn: pressIn,\n    onPressOut: pressOut,\n    ...triggerProps\n  } = useSlotTrigger({\n    accessibilityHint,\n    delayLongPress,\n    href,\n    onHoverIn,\n    onHoverOut,\n    onLongPress,\n    onPressIn,\n    onPressOut,\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: pressIn,\n    onPressOut: pressOut,\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":";;;;;;;;;;;AA0IA,MAAMiD,SAASvC,WAAWwC,OAAO;CAG/BC,MAAM;EACJC,YAAY;EACZC,eAAe;EACfC,YAAY;EACZC,gBAAgB;CAClB;CACAC,MAAM;EACJJ,YAAY;EACZE,YAAY;EACZC,gBAAgB;CAClB;CACApB,OAAO,EACLmB,YAAY,EACd;AACF,CAAC;;;;;;;;;;;;;;;;AAiBD,SAAAG,IAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;CAAA,IAAApB;CAAA,IAAAqB;CAAA,IAAAC;CAAA,IAAA5B;CAAA,IAAA6B;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAA5B;CAAA,IAAA6B;CAAA,IAAA3B;CAAA,IAAA4B;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAApB,EAAA,OAAAD,IAAA;EAAa,CAAA,CAAAG,mBAAApB,UAAAqB,gBAAApB,eAAAgC,IAAAX,MAAApB,YAAAgC,IAAAxC,OAAA6B,QAAAC,SAAAC,WAAAC,YAAAC,aAAAC,SAAAC,WAAAC,YAAA3B,KAAAC,MAAA+B,IAAAH,MAAA3B,OAAAC,MAAA8B,IAAAE,MAAA/B,SAAA8B,IAAA,GAAAN,SAAAd;EAwBFC,EAAA,KAAAD;EAAAC,EAAA,KAAAE;EAAAF,EAAA,KAAAlB;EAAAkB,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAxB;EAAAwB,EAAA,KAAAK;EAAAL,EAAA,KAAAM;EAAAN,EAAA,KAAAO;EAAAP,EAAA,KAAAQ;EAAAR,EAAA,MAAAS;EAAAT,EAAA,MAAAU;EAAAV,EAAA,MAAAW;EAAAX,EAAA,MAAAY;EAAAZ,EAAA,MAAAa;EAAAb,EAAA,MAAAf;EAAAe,EAAA,MAAAc;EAAAd,EAAA,MAAAb;EAAAa,EAAA,MAAAe;EAAAf,EAAA,MAAAgB;EAAAhB,EAAA,MAAAiB;EAAAjB,EAAA,MAAAkB;EAAAlB,EAAA,MAAAmB;EAAAnB,EAAA,MAAAoB;CAAA,OAAA;EAAAlB,oBAAAF,EAAA;EAAAlB,WAAAkB,EAAA;EAAAG,iBAAAH,EAAA;EAAAI,OAAAJ,EAAA;EAAAxB,QAAAwB,EAAA;EAAAK,SAAAL,EAAA;EAAAM,UAAAN,EAAA;EAAAO,YAAAP,EAAA;EAAAQ,aAAAR,EAAA;EAAAS,cAAAT,EAAA;EAAAU,UAAAV,EAAA;EAAAW,YAAAX,EAAA;EAAAY,aAAAZ,EAAA;EAAAa,QAAAb,EAAA;EAAAf,MAAAe,EAAA;EAAAc,OAAAd,EAAA;EAAAb,QAAAa,EAAA;EAAAe,KAAAf,EAAA;EAAAgB,KAAAhB,EAAA;EAAAiB,KAAAjB,EAAA;EAAAkB,KAAAlB,EAAA;EAAAmB,KAAAnB,EAAA;EAAAoB,OAAApB,EAAA;CAAA;CApBT,MAAAjB,gBAAAgC,OAAAM,KAAAA,IAAA,QAAAN;CAEA,MAAA/B,aAAAgC,OAAAK,KAAAA,IAAA,QAAAL;CAWA,MAAA9B,OAAA+B,OAAAI,KAAAA,IAAA,OAAAJ;CAGA,MAAA7B,OAAA8B,OAAAG,KAAAA,IAAA,YAAAH;CAEA,MAAA7B,UAAA8B,OAAAE,KAAAA,IAAA,UAAAF;CAGA,MAAAG,QAAclD,SAAS;CACvB,MAAAmD,OAAajD,YAAYX,mBAAmBuB,KAAK;CAQzC,MAAAsC,KAAAV,QAAA;CAAiB,IAAAW;CAAA,IAAAzB,EAAA,QAAAI,QAAAJ,EAAA,QAAAU,WAAAV,EAAA,QAAAwB,MAAAxB,EAAA,QAAAoB,MAAA;EAPMK,KAAA;GAAAC,iBACZL,KAAAA;GAASjB;GAAAuB,YAEdN,KAAAA;GAASO,UACX;GAAKC,UACLR,KAAAA;GAASX;GAAAI,MAEbU;GAAiBJ;EAEzB;EAACpB,EAAA,MAAAI;EAAAJ,EAAA,MAAAU;EAAAV,EAAA,MAAAwB;EAAAxB,EAAA,MAAAoB;EAAApB,EAAA,MAAAyB;CAAA,OAAAA,KAAAzB,EAAA;CATD,MAAA8B,SAAerE,gBAAgBgE,EAS9B;CAAC,IAAAM;CAAA,IAAA/B,EAAA,QAAAE,qBAAAF,EAAA,QAAAG,kBAAAH,EAAA,QAAAI,QAAAJ,EAAA,QAAAO,aAAAP,EAAA,QAAAQ,cAAAR,EAAA,QAAAS,eAAAT,EAAA,QAAAW,aAAAX,EAAA,QAAAY,cAAAZ,EAAA,QAAAf,OAAAe,EAAA,QAAAc,MAAA;EAQiBiB,KAAA;GAAA7B;GAAAC;GAAAC;GAAAG;GAAAC;GAAAC;GAAAE;GAAAC;GAAA3B;GAAA6B;EAWnB;EAACd,EAAA,MAAAE;EAAAF,EAAA,MAAAG;EAAAH,EAAA,MAAAI;EAAAJ,EAAA,MAAAO;EAAAP,EAAA,MAAAQ;EAAAR,EAAA,MAAAS;EAAAT,EAAA,MAAAW;EAAAX,EAAA,MAAAY;EAAAZ,EAAA,MAAAf;EAAAe,EAAA,MAAAc;EAAAd,EAAA,MAAA+B;CAAA,OAAAA,KAAA/B,EAAA;CAXG,MAAAgC,KAAAtE,eAAeqE,EAWlB;CAAC,IAAAE;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAtC,EAAA,QAAAgC,IAAA;EAlBF,CAAA,CAAAzB,WAAA0B,SAAAzB,YAAA0B,UAAAzB,aAAA0B,WAAAxB,WAAAyB,SAAAxB,YAAAyB,UAAA,GAAAC,gBAOIN;EAWFhC,EAAA,MAAAgC;EAAAhC,EAAA,MAAAiC;EAAAjC,EAAA,MAAAkC;EAAAlC,EAAA,MAAAmC;EAAAnC,EAAA,MAAAoC;EAAApC,EAAA,MAAAqC;EAAArC,EAAA,MAAAsC;CAAA,OAAA;EAAAL,UAAAjC,EAAA;EAAAkC,WAAAlC,EAAA;EAAAmC,YAAAnC,EAAA;EAAAoC,UAAApC,EAAA;EAAAqC,WAAArC,EAAA;EAAAsC,eAAAtC,EAAA;CAAA;CACF,MAAAuC,WAAiBxE,cAAcuD,KAAK;CACpC,MAAAkB,SAAexD,aAAauD,SAAQE,WAAYF,SAASlD,QAAQ,CAACD;CAClE,MAAAsD,WAAiBvE,iBAAiB;EAAAwE,OACzBH,OAAMI;EAAQH,UACXzD;EAAUD;EAAAsB;EAAAC;EAAAC,WAIT0B;EAAOzB,YACN0B;EAAQvB,WACTyB;EAAOxB,YACNyB;CACd,CAAC;CACD,MAAAQ,SAAe/E,aAAawD,KAAK,CAAC,CAACpC;CACnC,MAAA4D,aAAmBtE,UAAU6C,KAAAA;CAAS,OAGpC,qBAAC,mBAAD;EACQ,MAAAjB,SAASiB,KAAAA,IAAT,WAAA;EAAsC,GACxCR;EAAK,GACLyB;EAAY,GACZI,SAAQK;EACF/D,UAAAA;EACGmD,aAAAA;EACJ,SAAAL,OAAMpB;EACR,OAAArC,cACLiB,OAAME,MACNsD,aAAalF,mBAAmB0D,KAAK,CAAC,CAACpC,QAAQjB,WAAWqD,KAAK,CAAC,CAACpC,OACjE2D,QACAL,OAAMQ,WACNhF,YAAY0E,UAAU1D,YAAYsC,KAAK,GACvCoB,SAAQO,MACR9D,KACF;EAhBF,UAAA;GAkBE,oBAAC,MAAD;IAAa,OAAAd,cAAyBb,aAAY0F,MAAOL,MAAM;IAC5DH,UAAAA,SAAQS;GADN,CAAA;GAGJrE,aAAauC,KAAAA,IAAb,OACC,oBAAC,MAAD;IAAa,OAAA/B,OAAMO;IACjB,UAAA,oBAAC,kBAAD;KAAyB,OAAAuD,YAAYZ,OAAMI,SAAU1D,IAAI;KACtDJ;IADc,CAAA;GADd,CAAA;GAMNgE,aACC,oBAACQ,MAAD;IACS,OAAAjF,cAAyBkD,MAAMjC,OAAMd,OAAQgE,OAAMhE,KAAM;IAE/DA,UAAAA;GAHQ,CAAA,IADZ;EA5Be;;AAmCE;AAIxB,SAAS4E,YAAYT,OAAezD,MAA0B;CAC5D,OAAO;EAAEyD;EAAOzD,MAAMrB,eAAeqB;CAAM;AAC7C"}

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

@@ -17,8 +17,9 @@ type FormProps = {
    * Called with the values when the form is submitted: each field with a
    * `name` and not disabled, as the string a web form submits for it, so a
    * number field's value is its number written out, and an empty one is
-   * `''`. Under `native` it is not called while a field blocks the
-   * submission.
+   * `''`. A checkbox group's is the list of its ticked entries' values, an
+   * empty list while none is ticked. Under `native` it is not called while a
+   * field blocks the submission.
    */
   readonly onSubmit?: (values: FormValues) => void;
   readonly ref?: Ref<FormHandle>;

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","Ref","useImperativeHandle","useMemo","useState","FormValidationBehavior","FormValues","ValidationErrors","createRegistry","FIELD_VALIDATION_BEHAVIOR","FormContext","submitOf","FormHandle","requestSubmit","FormProps","children","onSubmit","values","ref","validationBehavior","validationErrors","NO_ERRORS","Form","t0","$","_c","t1","t2","undefined","registry","t3","t4","state","t5","t6","t7","_c"],"sources":["../../../src/components/form/index.tsx"],"sourcesContent":["import type { ReactNode, Ref } from 'react'\n\nimport { useImperativeHandle, useMemo, useState } from 'react'\n\nimport type {\n  FormValidationBehavior,\n  FormValues,\n  ValidationErrors,\n} from '../../form'\n\nimport {\n  createRegistry,\n  FIELD_VALIDATION_BEHAVIOR,\n  FormContext,\n  submitOf,\n} from '../../form'\n\n// No Material Design page of its own, as on web: a form is the fields inside\n// it, and the text fields page is what each of them draws. The error a form\n// reports lands in the field's supporting text, in the error role, under the\n// box.\n//\n// Native has no form element, so this is a context around its fields rather\n// than an element of its own. It draws nothing and lays nothing out; a Stack\n// inside it is what spaces the fields. It hands each field inside it two\n// things, as React Aria's Form does on web: `validationErrors`, keyed by each\n// field's `name`, which is how a server's answer reaches the fields without\n// any of them changing, and `validationBehavior`, which every field reads in\n// place of its own. And it reserves each field's message line, so an error\n// that arrives later moves nothing below the field.\n//\n// Native has no browser to validate or submit either, so the form does both.\n// A Button with `type=\"submit\"` inside it submits it, as does\n// `requestSubmit()` on its ref, which is how the keyboard's return key does.\n\n/** What a form's ref holds. */\ntype FormHandle = {\n  /**\n   * Submits the form, as a Button with `type=\"submit\"` inside it does: under\n   * `native` it is held back while a field blocks it, and otherwise\n   * `onSubmit` is handed the values. Named after the web form's method that\n   * does the same.\n   */\n  readonly requestSubmit: () => void\n}\n\ntype FormProps = {\n  readonly children?: ReactNode\n  /**\n   * Called with the values when the form is submitted: each field with a\n   * `name` and not disabled, as the string a web form submits for it, so a\n   * number field's value is its number written out, and an empty one is\n   * `''`. Under `native` it is not called while a field blocks the\n   * submission.\n   */\n  readonly onSubmit?: (values: FormValues) => void\n  readonly ref?: Ref<FormHandle>\n  /**\n   * How the fields inside validate. `aria` marks a field invalid and shows\n   * its error as soon as the field says so, through its `validate`, and\n   * lets the form submit regardless. `native` holds the submission back\n   * while a field is required and empty or rejected by its `validate`, shows\n   * each such field's error once submission is tried, and focuses the first\n   * of them.\n   *\n   * Under `aria`, moving focus after a server answers is the call site's.\n   * Each error is announced as it appears under its field, but nothing\n   * moves, because no part of the form knows a round trip happened:\n   * `validationErrors` is a prop rather than an event, so a form cannot tell\n   * a submission coming back from a first render that was given errors to\n   * begin with. Focus the first field that came back invalid through its\n   * `inputRef`, as the Async submit story does.\n   * @default 'aria'\n   */\n  readonly validationBehavior?: FormValidationBehavior\n  /**\n   * Errors to show under the fields, keyed by each field's `name`, such as\n   * what a server sent back: one message, or several shown as one line. A\n   * field's error stays until the field is edited, and a new object shows\n   * them all again.\n   */\n  readonly validationErrors?: ValidationErrors\n}\n\nconst NO_ERRORS: ValidationErrors = {}\n\n/**\n * A form: the fields inside it and what they are told about validation. Pass\n * `validationErrors`, an object keyed by field `name`, to show what a server\n * sent back under each field, and `validationBehavior=\"native\"` to hold the\n * submission back while a required field is empty or a field's `validate`\n * rejects its value. A Button with `type=\"submit\"` inside it submits it, and\n * `onSubmit` is handed the values by name.\n *\n * ```tsx\n * <Form onSubmit={(values) => save(values)}>\n *   <Stack gap=\"md\">\n *     <TextField label=\"Headline\" name=\"headline\" />\n *     <Button type=\"submit\">Save changes</Button>\n *   </Stack>\n * </Form>\n * ```\n *\n * Handing `validationErrors` back from a submission is where a reader has to\n * be told something arrived: see `validationBehavior` for what the form does\n * and what it leaves to the call site.\n *\n * A form also reserves each field's message line. A field on its own draws\n * that line only once it has something to say, so an error arriving after a\n * submit or an async check makes the field taller and moves everything below\n * it down the screen. Inside a form the line is there from the start, empty,\n * and nothing moves when it fills.\n *\n * It draws nothing, so it takes no `style`; its ref is a handle whose\n * `requestSubmit()` submits it.\n */\nfunction Form({\n  children,\n  onSubmit,\n  ref,\n  validationBehavior = FIELD_VALIDATION_BEHAVIOR,\n  validationErrors = NO_ERRORS,\n}: FormProps) {\n  const [registry] = useState(createRegistry)\n  const requestSubmit = submitOf(registry, validationBehavior, onSubmit)\n  const state = useMemo(\n    () => ({ registry, requestSubmit, validationBehavior, validationErrors }),\n    [registry, requestSubmit, validationBehavior, validationErrors],\n  )\n\n  useImperativeHandle(ref, () => ({ requestSubmit }), [requestSubmit])\n\n  return <FormContext value={state}>{children}</FormContext>\n}\n\nexport { Form }\nexport type { FormHandle, FormProps }\n"],"mappings":";;;;;AAoFA,MAAMqB,YAA8B,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgCrC,SAAAC,KAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAc,MAAA,EAAAV,UAAAC,UAAAE,KAAAC,oBAAAO,IAAAN,kBAAAO,OAAAJ;CAIZ,MAAAJ,qBAAAO,OAAAE,KAAAA,IAAAnB,4BAAAiB;CACA,MAAAN,mBAAAO,OAAAC,KAAAA,IAAAP,YAAAM;CAEA,MAAA,CAAAE,YAAmBzB,SAASI,cAAc;CAAC,IAAAsB;CAAA,IAAAN,EAAA,OAAAR,YAAAQ,EAAA,OAAAK,YAAAL,EAAA,OAAAL,oBAAA;EACrBW,KAAAnB,SAASkB,UAAUV,oBAAoBH,QAAQ;EAACQ,EAAA,KAAAR;EAAAQ,EAAA,KAAAK;EAAAL,EAAA,KAAAL;EAAAK,EAAA,KAAAM;CAAA,OAAAA,KAAAN,EAAA;CAAtE,MAAAX,gBAAsBiB;CAAgD,IAAAC;CAAA,IAAAP,EAAA,OAAAK,YAAAL,EAAA,OAAAX,iBAAAW,EAAA,OAAAL,sBAAAK,EAAA,OAAAJ,kBAAA;EAE7DW,KAAA;GAAAF;GAAAhB;GAAAM;GAAAC;EAAgE;EAACI,EAAA,KAAAK;EAAAL,EAAA,KAAAX;EAAAW,EAAA,KAAAL;EAAAK,EAAA,KAAAJ;EAAAI,EAAA,KAAAO;CAAA,OAAAA,KAAAP,EAAA;CAD1E,MAAAQ,QACSD;CAER,IAAAE;CAAA,IAAAC;CAAA,IAAAV,EAAA,OAAAX,eAAA;EAEwBoB,YAAO,EAAApB,cAAgB;EAAIqB,KAAA,CAACrB,aAAa;EAACW,EAAA,KAAAX;EAAAW,EAAA,MAAAS;EAAAT,EAAA,MAAAU;CAAA,OAAA;EAAAD,KAAAT,EAAA;EAAAU,KAAAV,EAAA;CAAA;CAAnEtB,oBAAoBgB,KAAKe,IAA2BC,EAAe;CAAC,IAAAC;CAAA,IAAAX,EAAA,QAAAT,YAAAS,EAAA,QAAAQ,OAAA;EAE7DG,KAAA,oBAAC,aAAD;GAAoBH,OAAAA;GAAQjB;EAAhB,CAAA;EAAuCS,EAAA,MAAAT;EAAAS,EAAA,MAAAQ;EAAAR,EAAA,MAAAW;CAAA,OAAAA,KAAAX,EAAA;CAAA,OAAnDW;AAAmD"}
+{"version":3,"file":"index.js","names":["ReactNode","Ref","useImperativeHandle","useMemo","useState","FormValidationBehavior","FormValues","ValidationErrors","createRegistry","FIELD_VALIDATION_BEHAVIOR","FormContext","submitOf","FormHandle","requestSubmit","FormProps","children","onSubmit","values","ref","validationBehavior","validationErrors","NO_ERRORS","Form","t0","$","_c","t1","t2","undefined","registry","t3","t4","state","t5","t6","t7","_c"],"sources":["../../../src/components/form/index.tsx"],"sourcesContent":["import type { ReactNode, Ref } from 'react'\n\nimport { useImperativeHandle, useMemo, useState } from 'react'\n\nimport type {\n  FormValidationBehavior,\n  FormValues,\n  ValidationErrors,\n} from '../../form'\n\nimport {\n  createRegistry,\n  FIELD_VALIDATION_BEHAVIOR,\n  FormContext,\n  submitOf,\n} from '../../form'\n\n// No Material Design page of its own, as on web: a form is the fields inside\n// it, and the text fields page is what each of them draws. The error a form\n// reports lands in the field's supporting text, in the error role, under the\n// box.\n//\n// Native has no form element, so this is a context around its fields rather\n// than an element of its own. It draws nothing and lays nothing out; a Stack\n// inside it is what spaces the fields. It hands each field inside it two\n// things, as React Aria's Form does on web: `validationErrors`, keyed by each\n// field's `name`, which is how a server's answer reaches the fields without\n// any of them changing, and `validationBehavior`, which every field reads in\n// place of its own. And it reserves each field's message line, so an error\n// that arrives later moves nothing below the field.\n//\n// Native has no browser to validate or submit either, so the form does both.\n// A Button with `type=\"submit\"` inside it submits it, as does\n// `requestSubmit()` on its ref, which is how the keyboard's return key does.\n\n/** What a form's ref holds. */\ntype FormHandle = {\n  /**\n   * Submits the form, as a Button with `type=\"submit\"` inside it does: under\n   * `native` it is held back while a field blocks it, and otherwise\n   * `onSubmit` is handed the values. Named after the web form's method that\n   * does the same.\n   */\n  readonly requestSubmit: () => void\n}\n\ntype FormProps = {\n  readonly children?: ReactNode\n  /**\n   * Called with the values when the form is submitted: each field with a\n   * `name` and not disabled, as the string a web form submits for it, so a\n   * number field's value is its number written out, and an empty one is\n   * `''`. A checkbox group's is the list of its ticked entries' values, an\n   * empty list while none is ticked. Under `native` it is not called while a\n   * field blocks the submission.\n   */\n  readonly onSubmit?: (values: FormValues) => void\n  readonly ref?: Ref<FormHandle>\n  /**\n   * How the fields inside validate. `aria` marks a field invalid and shows\n   * its error as soon as the field says so, through its `validate`, and\n   * lets the form submit regardless. `native` holds the submission back\n   * while a field is required and empty or rejected by its `validate`, shows\n   * each such field's error once submission is tried, and focuses the first\n   * of them.\n   *\n   * Under `aria`, moving focus after a server answers is the call site's.\n   * Each error is announced as it appears under its field, but nothing\n   * moves, because no part of the form knows a round trip happened:\n   * `validationErrors` is a prop rather than an event, so a form cannot tell\n   * a submission coming back from a first render that was given errors to\n   * begin with. Focus the first field that came back invalid through its\n   * `inputRef`, as the Async submit story does.\n   * @default 'aria'\n   */\n  readonly validationBehavior?: FormValidationBehavior\n  /**\n   * Errors to show under the fields, keyed by each field's `name`, such as\n   * what a server sent back: one message, or several shown as one line. A\n   * field's error stays until the field is edited, and a new object shows\n   * them all again.\n   */\n  readonly validationErrors?: ValidationErrors\n}\n\nconst NO_ERRORS: ValidationErrors = {}\n\n/**\n * A form: the fields inside it and what they are told about validation. Pass\n * `validationErrors`, an object keyed by field `name`, to show what a server\n * sent back under each field, and `validationBehavior=\"native\"` to hold the\n * submission back while a required field is empty or a field's `validate`\n * rejects its value. A Button with `type=\"submit\"` inside it submits it, and\n * `onSubmit` is handed the values by name.\n *\n * ```tsx\n * <Form onSubmit={(values) => save(values)}>\n *   <Stack gap=\"md\">\n *     <TextField label=\"Headline\" name=\"headline\" />\n *     <Button type=\"submit\">Save changes</Button>\n *   </Stack>\n * </Form>\n * ```\n *\n * Handing `validationErrors` back from a submission is where a reader has to\n * be told something arrived: see `validationBehavior` for what the form does\n * and what it leaves to the call site.\n *\n * A form also reserves each field's message line. A field on its own draws\n * that line only once it has something to say, so an error arriving after a\n * submit or an async check makes the field taller and moves everything below\n * it down the screen. Inside a form the line is there from the start, empty,\n * and nothing moves when it fills.\n *\n * It draws nothing, so it takes no `style`; its ref is a handle whose\n * `requestSubmit()` submits it.\n */\nfunction Form({\n  children,\n  onSubmit,\n  ref,\n  validationBehavior = FIELD_VALIDATION_BEHAVIOR,\n  validationErrors = NO_ERRORS,\n}: FormProps) {\n  const [registry] = useState(createRegistry)\n  const requestSubmit = submitOf(registry, validationBehavior, onSubmit)\n  const state = useMemo(\n    () => ({ registry, requestSubmit, validationBehavior, validationErrors }),\n    [registry, requestSubmit, validationBehavior, validationErrors],\n  )\n\n  useImperativeHandle(ref, () => ({ requestSubmit }), [requestSubmit])\n\n  return <FormContext value={state}>{children}</FormContext>\n}\n\nexport { Form }\nexport type { FormHandle, FormProps }\n"],"mappings":";;;;;AAqFA,MAAMqB,YAA8B,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgCrC,SAAAC,KAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAc,MAAA,EAAAV,UAAAC,UAAAE,KAAAC,oBAAAO,IAAAN,kBAAAO,OAAAJ;CAIZ,MAAAJ,qBAAAO,OAAAE,KAAAA,IAAAnB,4BAAAiB;CACA,MAAAN,mBAAAO,OAAAC,KAAAA,IAAAP,YAAAM;CAEA,MAAA,CAAAE,YAAmBzB,SAASI,cAAc;CAAC,IAAAsB;CAAA,IAAAN,EAAA,OAAAR,YAAAQ,EAAA,OAAAK,YAAAL,EAAA,OAAAL,oBAAA;EACrBW,KAAAnB,SAASkB,UAAUV,oBAAoBH,QAAQ;EAACQ,EAAA,KAAAR;EAAAQ,EAAA,KAAAK;EAAAL,EAAA,KAAAL;EAAAK,EAAA,KAAAM;CAAA,OAAAA,KAAAN,EAAA;CAAtE,MAAAX,gBAAsBiB;CAAgD,IAAAC;CAAA,IAAAP,EAAA,OAAAK,YAAAL,EAAA,OAAAX,iBAAAW,EAAA,OAAAL,sBAAAK,EAAA,OAAAJ,kBAAA;EAE7DW,KAAA;GAAAF;GAAAhB;GAAAM;GAAAC;EAAgE;EAACI,EAAA,KAAAK;EAAAL,EAAA,KAAAX;EAAAW,EAAA,KAAAL;EAAAK,EAAA,KAAAJ;EAAAI,EAAA,KAAAO;CAAA,OAAAA,KAAAP,EAAA;CAD1E,MAAAQ,QACSD;CAER,IAAAE;CAAA,IAAAC;CAAA,IAAAV,EAAA,OAAAX,eAAA;EAEwBoB,YAAO,EAAApB,cAAgB;EAAIqB,KAAA,CAACrB,aAAa;EAACW,EAAA,KAAAX;EAAAW,EAAA,MAAAS;EAAAT,EAAA,MAAAU;CAAA,OAAA;EAAAD,KAAAT,EAAA;EAAAU,KAAAV,EAAA;CAAA;CAAnEtB,oBAAoBgB,KAAKe,IAA2BC,EAAe;CAAC,IAAAC;CAAA,IAAAX,EAAA,QAAAT,YAAAS,EAAA,QAAAQ,OAAA;EAE7DG,KAAA,oBAAC,aAAD;GAAoBH,OAAAA;GAAQjB;EAAhB,CAAA;EAAuCS,EAAA,MAAAT;EAAAS,EAAA,MAAAQ;EAAAR,EAAA,MAAAW;CAAA,OAAAA,KAAAX,EAAA;CAAA,OAAnDW;AAAmD"}

package/dist/components/icon-button/index.d.ts

@@ -19,6 +19,8 @@ type IconButtonProps = (ButtonLinkForm | ButtonPressForm | ButtonToggleForm) & O
    * @default false
    */
   readonly disableRipple?: boolean;
+  /** The key a ButtonGroup that selects reports the button by. */
+  readonly id?: string;
   /**
    * Draws the button disabled, and takes no presses.
    * @default false
@@ -30,7 +32,7 @@ type IconButtonProps = (ButtonLinkForm | ButtonPressForm | ButtonToggleForm) & O
    * the icon buttons spec page's XS to XL, and the same heights `Button`
    * uses, so the two line up beside each other in a row. The icon is 20dp,
    * 24dp, 24dp, 32dp and 40dp in turn.
-   * @default 'md'
+   * @default the size of the ButtonGroup around it, else 'md'
    */
   readonly size?: IconButtonSize;
   readonly style?: StyleProp<ViewStyle>;
@@ -62,7 +64,7 @@ type IconButtonVariant = 'filled' | 'outlined' | 'standard' | 'tonal';
  * through `hitSlop`, which a `hitSlop` of the call site's own replaces.
  * `style`, `ref` and `testID` land on the `Pressable`.
  */
-declare function IconButton({ children, defaultSelected, delayLongPress, disableRipple, hitSlop: ownHitSlop, href, isDisabled, isPending, isSelected, onBlur, onChange, onFocus, onHoverIn, onHoverOut, onLayout, onLongPress, onPress, onPressIn, onPressOut, pendingLabel, ref, size, slot, style, type, variant, ...props }: IconButtonProps): import("react").JSX.Element;
+declare function IconButton({ accessibilityHint, children, defaultSelected, delayLongPress, disableRipple, hitSlop: ownHitSlop, href, id, isDisabled: ownDisabled, isPending, isSelected, onBlur, onChange, onFocus, onHoverIn, onHoverOut, onLayout, onLongPress, onPress, onPressIn, onPressOut, pendingLabel, ref, size: ownSize, slot, style, type, variant, ...props }: IconButtonProps): import("react").JSX.Element;
 //#endregion
 export { IconButton, type IconButtonProps, type IconButtonSize, type IconButtonVariant };
 //# sourceMappingURL=index.d.ts.map