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

package/dist/press/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","Insets","PressableProps","ViewStyle","useRef","useState","View","Animated","Easing","useAnimatedStyle","useReducedMotion","useSharedValue","withDelay","withTiming","useTheme","composeStyles","styles","stylesOf","Corners","Pick","Handlers","Point","x","y","PressFeedback","handlers","NonNullable","Name","hovered","layer","pressed","ring","PressFeedbackOptions","area","Size","color","corners","disabled","disableRipple","disc","pending","pressedColor","RippleGeometry","end","scale","size","start","RipplePhase","height","width","TARGET_SIZE","INITIAL_ORIGIN_SCALE","FADE_IN","FADE_OUT","NO_RIPPLE","hitSlop","vertical","Math","max","horizontal","undefined","bottom","left","right","top","usePressFeedback","t0","$","_c","t1","onBlur","onFocus","onHoverIn","onHoverOut","onPressIn","onPressOut","t2","theme","reduceMotion","setHovered","setPressed","ringShown","setRingShown","focused","pressedUnfocused","pressStarted","phase","geometry","grow","fade","motion","spacing","stateLayerOpacity","active","interactive","rippled","rippleMotion","get","progress","backgroundColor","borderRadius","opacity","position","transform","translateX","translateY","t3","ripple","origin","size_0","floor","set","hypot","sm","duration","durationLong1","easing","bezier","easingStandard","linear","current","Date","now","t4","release","shown","durationMedium1","t5","event","t6","event_0","t7","event_1","t8","event_2","t9","event_3","fixed","currentTarget","pageX","pageY","nativeEvent","measure","_x","_y","width_0","height_0","Number","isFinite","t10","event_4","t11","layerOpacity","focus","hover","t12","surface","t13","t14","state","t15","t16","t17","t18","t19","t20","t21","_c"],"sources":["../../src/press/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\nimport type { Insets, PressableProps, ViewStyle } from 'react-native'\n\nimport { useRef, useState } from 'react'\nimport { View } from 'react-native'\nimport Animated, {\n  Easing,\n  useAnimatedStyle,\n  useReducedMotion,\n  useSharedValue,\n  withDelay,\n  withTiming,\n} from 'react-native-reanimated'\n\nimport { useTheme } from '../theme/scope'\nimport { composeStyles } from '../theme/styles'\nimport { styles, stylesOf } from './styles'\n\n/** The corners a control is drawn with, which its feedback clips to. */\ntype Corners = Pick<\n  ViewStyle,\n  | 'borderBottomEndRadius'\n  | 'borderBottomStartRadius'\n  | 'borderRadius'\n  | 'borderTopEndRadius'\n  | 'borderTopStartRadius'\n>\n\n/** The handlers the feedback reads its states from. */\ntype Handlers = Pick<\n  PressableProps,\n  'onBlur' | 'onFocus' | 'onHoverIn' | 'onHoverOut' | 'onPressIn' | 'onPressOut'\n>\n\ntype Point = { readonly x: number; readonly y: number }\n\ntype PressFeedback = {\n  /**\n   * The handlers to hand the control's `Pressable`. Each calls the one of\n   * the same name it was given after its own.\n   */\n  readonly handlers: {\n    readonly [Name in keyof Handlers]-?: NonNullable<Handlers[Name]>\n  }\n  /**\n   * Whether a pointer is over the control, for a control that draws more\n   * than the layer while hovered. Never while disabled or pending.\n   */\n  readonly hovered: boolean\n  /** The state layer and the ripple, to render as the `Pressable`'s first child. */\n  readonly layer: ReactNode\n  /**\n   * Whether the control is pressed, for a control that draws more than the\n   * layer while pressed. Never while disabled or pending.\n   */\n  readonly pressed: boolean\n  /** The focus ring while it shows, to compose into the control's style. */\n  readonly ring: undefined | ViewStyle\n}\n\ntype PressFeedbackOptions = Handlers & {\n  /**\n   * The size of a layer drawn on a part of the control rather than across\n   * it, as a navigation destination draws its layer on the indicator behind\n   * its icon. The ripple then grows from that part's centre wherever the\n   * press lands, and nothing is measured, as for `disc`.\n   */\n  readonly area?: Size | undefined\n  /**\n   * The colour the layer and the ripple are drawn in: the theme's value for\n   * the control's content colour role.\n   */\n  readonly color: string\n  /** The control's corners, which the layer and the ripple clip to. */\n  readonly corners?: Corners | undefined\n  readonly disabled?: boolean | null | undefined\n  /**\n   * Draws no ripple and leaves the state layer, as `disableRipple` does on\n   * web's Button.\n   */\n  readonly disableRipple?: boolean | undefined\n  /**\n   * The side of a round layer of a fixed size, for a control whose state\n   * layer is a disc beside its label rather than the whole control: a\n   * checkbox's. The ripple then grows from the disc's centre wherever the\n   * press lands, and nothing is measured. Left out, the ripple grows from\n   * the press point across the control.\n   */\n  readonly disc?: number | undefined\n  /**\n   * Takes no press or hover while true, with no layer and no ripple for\n   * either, and keeps the focus and its ring, as a pending button does.\n   */\n  readonly pending?: boolean | undefined\n  /**\n   * The colour the pressed layer and the ripple are drawn in, where it\n   * differs from the hover and focus layers': a checkbox's swaps between\n   * primary and on surface once pressed. Defaults to `color`.\n   */\n  readonly pressedColor?: string | undefined\n}\n\n/** Where the ripple starts and ends, and how far it grows, for one press. */\ntype RippleGeometry = {\n  readonly end: Point\n  readonly scale: number\n  readonly size: number\n  readonly start: Point\n}\n\n// Where the ripple of the latest press is: waiting on the control's\n// measurement, shown, or released before the measurement arrived.\ntype RipplePhase = 'idle' | 'measuring' | 'released' | 'shown'\n\ntype Size = { readonly height: number; readonly width: number }\n\n/**\n * The least a touch target measures each way, from Material Design's\n * accessibility guidance. A floor rather than a token, as web's `TARGET_SIZE`\n * is: a theme changes how big a control is drawn, never how small a target\n * may be.\n */\nconst TARGET_SIZE = 48\n\n// The ripple starts as a disc a fifth of the control's longer side, as on web.\nconst INITIAL_ORIGIN_SCALE = 0.2\n\n// The fade, in milliseconds: quick in and slow out, so a tap reads as a ripple\n// rather than a flicker. These are web's, and deliberately not motion tokens:\n// the two are tuned as a ratio to each other, which snapping either to the\n// scale would undo. Linear for the same reason, since a fade to and from a\n// state layer wants no acceleration.\nconst FADE_IN = 105\nconst FADE_OUT = 375\n\nconst NO_RIPPLE: RippleGeometry = {\n  end: { x: 0, y: 0 },\n  scale: 1,\n  size: 0,\n  start: { x: 0, y: 0 },\n}\n\n/**\n * The `hitSlop` that brings a control smaller than 48dp up to a 48dp target,\n * centred on it, as web's controls draw their target with a `::before`.\n * Nothing for a control already that big. A width left out is taken to be\n * wide enough, as a labelled button's is.\n */\nfunction hitSlop(height: number, width = TARGET_SIZE): Insets | undefined {\n  const vertical = Math.max(0, (TARGET_SIZE - height) / 2)\n  const horizontal = Math.max(0, (TARGET_SIZE - width) / 2)\n\n  if (vertical === 0 && horizontal === 0) {\n    return undefined\n  }\n\n  return {\n    bottom: vertical,\n    left: horizontal,\n    right: horizontal,\n    top: vertical,\n  }\n}\n\n/**\n * The press feedback every interactive control draws: the state layer, the\n * ripple and the focus ring, as Material Design's state layers page sets them\n * out.\n *\n * The state layer is the control's content colour at the state's opacity\n * token, over the whole control: hover for an iPad pointer or an Android\n * mouse, focus while the ring shows, pressed while pressed. React Native has\n * no `color-mix()`, so it is a view of its own rather than a blended\n * background.\n *\n * The ripple grows from the press point to cover the control and fades out\n * once the press ends, held at least `durationMedium1` so a tap reads, and is\n * drawn the same on iOS and Android rather than through Android's own\n * `android_ripple`. It is a solid disc where web's has a soft edge, since\n * React Native draws a gradient only through an experimental style that React\n * Native Web ignores. It is not drawn while the device asks for reduced\n * motion, where the pressed layer alone marks the press.\n *\n * A control whose layer is a disc of its own beside its label, as a\n * checkbox's is, passes the disc's side as `disc`, and its ripple grows from\n * the disc's centre instead. One whose layer is drawn on a part of it of a\n * fixed size passes that size as `area`, with the same effect. One whose pressed layer takes another colour\n * passes it as `pressedColor`.\n *\n * The ring shows when focus arrives from a keyboard, and not when it arrives\n * with a press, which on web is a click focusing what it presses.\n *\n * ```tsx\n * const feedback = usePressFeedback({ color: colors.onPrimary, corners, onPressIn })\n *\n * <Pressable {...feedback.handlers} style={[styles.button, feedback.ring]}>\n *   {feedback.layer}\n *   <Text>Label</Text>\n * </Pressable>\n * ```\n */\nfunction usePressFeedback({\n  area,\n  color,\n  corners,\n  disabled,\n  disableRipple = false,\n  disc,\n  onBlur,\n  onFocus,\n  onHoverIn,\n  onHoverOut,\n  onPressIn,\n  onPressOut,\n  pending,\n  pressedColor = color,\n}: PressFeedbackOptions): PressFeedback {\n  const theme = useTheme()\n  const reduceMotion = useReducedMotion()\n  const [hovered, setHovered] = useState(false)\n  const [pressed, setPressed] = useState(false)\n  const [ringShown, setRingShown] = useState(false)\n  const focused = useRef(false)\n  // Whether the press in flight began while the control had no focus, which\n  // makes the focus that follows it a pointer's.\n  const pressedUnfocused = useRef(false)\n  const pressStarted = useRef(0)\n  const phase = useRef<RipplePhase>('idle')\n  const geometry = useSharedValue(NO_RIPPLE)\n  const grow = useSharedValue(0)\n  const fade = useSharedValue(0)\n\n  const { motion, spacing, stateLayerOpacity } = theme\n  const active = disabled !== true\n  const interactive = active && pending !== true\n  const rippled = interactive && !disableRipple && !reduceMotion\n\n  const rippleMotion = useAnimatedStyle(() => {\n    'worklet'\n    const { end, scale, size, start } = geometry.get()\n    const progress = grow.get()\n\n    // The whole style is the animation's, so the view takes the one object it\n    // hands back.\n    return {\n      backgroundColor: pressedColor,\n      borderRadius: size / 2,\n      height: size,\n      left: 0,\n      opacity: fade.get(),\n      position: 'absolute',\n      top: 0,\n      transform: [\n        { translateX: start.x + (end.x - start.x) * progress },\n        { translateY: start.y + (end.y - start.y) * progress },\n        { scale: 1 + (scale - 1) * progress },\n      ],\n      width: size,\n    }\n  })\n\n  // Grows a disc a fifth of the control's longer side from the press point\n  // to the centre, until it covers the control and `spacing.sm` beyond its\n  // corners, as web's does.\n  function ripple(width: number, height: number, origin: Point) {\n    const size = Math.max(\n      1,\n      Math.floor(Math.max(width, height) * INITIAL_ORIGIN_SCALE),\n    )\n\n    geometry.set({\n      end: { x: (width - size) / 2, y: (height - size) / 2 },\n      scale: (Math.hypot(width, height) + spacing.sm) / size,\n      size,\n      start: { x: origin.x - size / 2, y: origin.y - size / 2 },\n    })\n    grow.set(0)\n    grow.set(\n      withTiming(1, {\n        duration: motion.durationLong1,\n        easing: Easing.bezier(...motion.easingStandard),\n      }),\n    )\n    fade.set(\n      withTiming(stateLayerOpacity.pressed, {\n        duration: FADE_IN,\n        easing: Easing.linear,\n      }),\n    )\n    pressStarted.current = Date.now()\n  }\n\n  // Fades the ripple out, once it has been shown for `durationMedium1`.\n  function release() {\n    const shown = Date.now() - pressStarted.current\n\n    fade.set(\n      withDelay(\n        Math.max(0, motion.durationMedium1 - shown),\n        withTiming(0, { duration: FADE_OUT, easing: Easing.linear }),\n      ),\n    )\n  }\n\n  const handlers: PressFeedback['handlers'] = {\n    onBlur: (event) => {\n      focused.current = false\n      setRingShown(false)\n      onBlur?.(event)\n    },\n    onFocus: (event) => {\n      focused.current = true\n      setRingShown(!pressedUnfocused.current)\n      pressedUnfocused.current = false\n      onFocus?.(event)\n    },\n    onHoverIn: (event) => {\n      setHovered(true)\n      onHoverIn?.(event)\n    },\n    onHoverOut: (event) => {\n      setHovered(false)\n      onHoverOut?.(event)\n    },\n    onPressIn: (event) => {\n      pressedUnfocused.current = !focused.current\n      setPressed(true)\n\n      const fixed = disc === undefined ? area : { height: disc, width: disc }\n\n      if (rippled && fixed !== undefined) {\n        ripple(fixed.width, fixed.height, {\n          x: fixed.width / 2,\n          y: fixed.height / 2,\n        })\n        phase.current = 'shown'\n      } else if (rippled && typeof event.currentTarget !== 'number') {\n        const { pageX, pageY } = event.nativeEvent\n\n        // A touch's own location is measured from whichever child it landed\n        // on, so the point is taken from the page and the control measured\n        // there. A press from a key carries no point, and ripples from the\n        // centre. React Native Web measures a frame later, so a press can end\n        // first, and its ripple is then drawn whole. React Native types the\n        // target as a bare view tag too, which has nothing to measure.\n        phase.current = 'measuring'\n        event.currentTarget.measure((_x, _y, width, height, left, top) => {\n          ripple(width, height, {\n            x: Number.isFinite(pageX - left) ? pageX - left : width / 2,\n            y: Number.isFinite(pageY - top) ? pageY - top : height / 2,\n          })\n\n          if (phase.current === 'released') {\n            release()\n            phase.current = 'idle'\n          } else {\n            phase.current = 'shown'\n          }\n        })\n      }\n\n      onPressIn?.(event)\n    },\n    onPressOut: (event) => {\n      pressedUnfocused.current = false\n      setPressed(false)\n\n      if (phase.current === 'shown') {\n        release()\n      }\n      phase.current = phase.current === 'measuring' ? 'released' : 'idle'\n\n      onPressOut?.(event)\n    },\n  }\n\n  const layerOpacity = !active\n    ? 0\n    : interactive && pressed\n      ? stateLayerOpacity.pressed\n      : ringShown\n        ? stateLayerOpacity.focus\n        : interactive && hovered\n          ? stateLayerOpacity.hover\n          : 0\n  const surface = composeStyles<ViewStyle>(styles.surface, corners)\n  const state = composeStyles<ViewStyle>(styles.layer, {\n    backgroundColor: interactive && pressed ? pressedColor : color,\n    opacity: layerOpacity,\n  })\n\n  return {\n    handlers,\n    hovered: interactive && hovered,\n    layer: (\n      <View\n        accessibilityElementsHidden\n        importantForAccessibility=\"no-hide-descendants\"\n        style={surface}\n      >\n        <View style={state} />\n        {rippled ? <Animated.View style={rippleMotion} /> : null}\n      </View>\n    ),\n    pressed: interactive && pressed,\n    ring: active && ringShown ? stylesOf(theme).ring : undefined,\n  }\n}\n\nexport { hitSlop, TARGET_SIZE, usePressFeedback }\nexport type { Corners, PressFeedback, PressFeedbackOptions }\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ReactNode","Insets","PressableProps","ViewStyle","useRef","useState","View","Animated","Easing","useAnimatedStyle","useReducedMotion","useSharedValue","withDelay","withTiming","useTheme","composeStyles","styles","stylesOf","Corners","Pick","Handlers","Point","x","y","PressFeedback","handlers","NonNullable","Name","hovered","layer","pressed","ring","PressFeedbackOptions","area","Size","color","corners","disabled","disableRipple","disc","held","pending","pressedColor","RippleGeometry","end","scale","size","start","RipplePhase","height","width","TARGET_SIZE","INITIAL_ORIGIN_SCALE","FADE_IN","FADE_OUT","NO_RIPPLE","hitSlop","vertical","Math","max","horizontal","undefined","bottom","left","right","top","usePressFeedback","t0","$","_c","t1","t2","onBlur","onFocus","onHoverIn","onHoverOut","onPressIn","onPressOut","t3","theme","reduceMotion","setHovered","setPressed","ringShown","setRingShown","focused","pressedUnfocused","pressStarted","phase","geometry","grow","fade","motion","spacing","stateLayerOpacity","active","interactive","rippled","rippleMotion","get","progress","backgroundColor","borderRadius","opacity","position","transform","translateX","translateY","t4","ripple","origin","size_0","floor","set","hypot","sm","duration","durationLong1","easing","bezier","easingStandard","linear","current","Date","now","t5","release","shown","durationMedium1","t6","event","t7","event_0","t8","event_1","t9","event_2","t10","event_3","fixed","currentTarget","pageX","pageY","nativeEvent","measure","_x","_y","width_0","height_0","Number","isFinite","t11","event_4","t12","pressedLayer","layerOpacity","focus","hover","t13","surface","t14","t15","state","t16","t17","t18","t19","t20","t21","t22","_c"],"sources":["../../src/press/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\nimport type { Insets, PressableProps, ViewStyle } from 'react-native'\n\nimport { useRef, useState } from 'react'\nimport { View } from 'react-native'\nimport Animated, {\n  Easing,\n  useAnimatedStyle,\n  useReducedMotion,\n  useSharedValue,\n  withDelay,\n  withTiming,\n} from 'react-native-reanimated'\n\nimport { useTheme } from '../theme/scope'\nimport { composeStyles } from '../theme/styles'\nimport { styles, stylesOf } from './styles'\n\n/** The corners a control is drawn with, which its feedback clips to. */\ntype Corners = Pick<\n  ViewStyle,\n  | 'borderBottomEndRadius'\n  | 'borderBottomStartRadius'\n  | 'borderRadius'\n  | 'borderTopEndRadius'\n  | 'borderTopStartRadius'\n>\n\n/** The handlers the feedback reads its states from. */\ntype Handlers = Pick<\n  PressableProps,\n  'onBlur' | 'onFocus' | 'onHoverIn' | 'onHoverOut' | 'onPressIn' | 'onPressOut'\n>\n\ntype Point = { readonly x: number; readonly y: number }\n\ntype PressFeedback = {\n  /**\n   * The handlers to hand the control's `Pressable`. Each calls the one of\n   * the same name it was given after its own.\n   */\n  readonly handlers: {\n    readonly [Name in keyof Handlers]-?: NonNullable<Handlers[Name]>\n  }\n  /**\n   * Whether a pointer is over the control, for a control that draws more\n   * than the layer while hovered. Never while disabled or pending.\n   */\n  readonly hovered: boolean\n  /** The state layer and the ripple, to render as the `Pressable`'s first child. */\n  readonly layer: ReactNode\n  /**\n   * Whether the control is pressed, for a control that draws more than the\n   * layer while pressed. Never while disabled or pending.\n   */\n  readonly pressed: boolean\n  /** The focus ring while it shows, to compose into the control's style. */\n  readonly ring: undefined | ViewStyle\n}\n\ntype PressFeedbackOptions = Handlers & {\n  /**\n   * The size of a layer drawn on a part of the control rather than across\n   * it, as a navigation destination draws its layer on the indicator behind\n   * its icon. The ripple then grows from that part's centre wherever the\n   * press lands, and nothing is measured, as for `disc`.\n   */\n  readonly area?: Size | undefined\n  /**\n   * The colour the layer and the ripple are drawn in: the theme's value for\n   * the control's content colour role.\n   */\n  readonly color: string\n  /** The control's corners, which the layer and the ripple clip to. */\n  readonly corners?: Corners | undefined\n  readonly disabled?: boolean | null | undefined\n  /**\n   * Draws no ripple and leaves the state layer, as `disableRipple` does on\n   * web's Button.\n   */\n  readonly disableRipple?: boolean | undefined\n  /**\n   * The side of a round layer of a fixed size, for a control whose state\n   * layer is a disc beside its label rather than the whole control: a\n   * checkbox's. The ripple then grows from the disc's centre wherever the\n   * press lands, and nothing is measured. Left out, the ripple grows from\n   * the press point across the control.\n   */\n  readonly disc?: number | undefined\n  /**\n   * Draws the pressed layer while true, though nothing presses the control:\n   * a split button's menu half while its menu is open, as web's React Aria\n   * reports the trigger pressed for as long as its menu shows. It draws no\n   * ripple, and `pressed` stays false, since no press is in flight.\n   */\n  readonly held?: boolean | undefined\n  /**\n   * Takes no press or hover while true, with no layer and no ripple for\n   * either, and keeps the focus and its ring, as a pending button does.\n   */\n  readonly pending?: boolean | undefined\n  /**\n   * The colour the pressed layer and the ripple are drawn in, where it\n   * differs from the hover and focus layers': a checkbox's swaps between\n   * primary and on surface once pressed. Defaults to `color`.\n   */\n  readonly pressedColor?: string | undefined\n}\n\n/** Where the ripple starts and ends, and how far it grows, for one press. */\ntype RippleGeometry = {\n  readonly end: Point\n  readonly scale: number\n  readonly size: number\n  readonly start: Point\n}\n\n// Where the ripple of the latest press is: waiting on the control's\n// measurement, shown, or released before the measurement arrived.\ntype RipplePhase = 'idle' | 'measuring' | 'released' | 'shown'\n\ntype Size = { readonly height: number; readonly width: number }\n\n/**\n * The least a touch target measures each way, from Material Design's\n * accessibility guidance. A floor rather than a token, as web's `TARGET_SIZE`\n * is: a theme changes how big a control is drawn, never how small a target\n * may be.\n */\nconst TARGET_SIZE = 48\n\n// The ripple starts as a disc a fifth of the control's longer side, as on web.\nconst INITIAL_ORIGIN_SCALE = 0.2\n\n// The fade, in milliseconds: quick in and slow out, so a tap reads as a ripple\n// rather than a flicker. These are web's, and deliberately not motion tokens:\n// the two are tuned as a ratio to each other, which snapping either to the\n// scale would undo. Linear for the same reason, since a fade to and from a\n// state layer wants no acceleration.\nconst FADE_IN = 105\nconst FADE_OUT = 375\n\nconst NO_RIPPLE: RippleGeometry = {\n  end: { x: 0, y: 0 },\n  scale: 1,\n  size: 0,\n  start: { x: 0, y: 0 },\n}\n\n/**\n * The `hitSlop` that brings a control smaller than 48dp up to a 48dp target,\n * centred on it, as web's controls draw their target with a `::before`.\n * Nothing for a control already that big. A width left out is taken to be\n * wide enough, as a labelled button's is.\n */\nfunction hitSlop(height: number, width = TARGET_SIZE): Insets | undefined {\n  const vertical = Math.max(0, (TARGET_SIZE - height) / 2)\n  const horizontal = Math.max(0, (TARGET_SIZE - width) / 2)\n\n  if (vertical === 0 && horizontal === 0) {\n    return undefined\n  }\n\n  return {\n    bottom: vertical,\n    left: horizontal,\n    right: horizontal,\n    top: vertical,\n  }\n}\n\n/**\n * The press feedback every interactive control draws: the state layer, the\n * ripple and the focus ring, as Material Design's state layers page sets them\n * out.\n *\n * The state layer is the control's content colour at the state's opacity\n * token, over the whole control: hover for an iPad pointer or an Android\n * mouse, focus while the ring shows, pressed while pressed. React Native has\n * no `color-mix()`, so it is a view of its own rather than a blended\n * background.\n *\n * The ripple grows from the press point to cover the control and fades out\n * once the press ends, held at least `durationMedium1` so a tap reads, and is\n * drawn the same on iOS and Android rather than through Android's own\n * `android_ripple`. It is a solid disc where web's has a soft edge, since\n * React Native draws a gradient only through an experimental style that React\n * Native Web ignores. It is not drawn while the device asks for reduced\n * motion, where the pressed layer alone marks the press.\n *\n * A control whose layer is a disc of its own beside its label, as a\n * checkbox's is, passes the disc's side as `disc`, and its ripple grows from\n * the disc's centre instead. One whose layer is drawn on a part of it of a\n * fixed size passes that size as `area`, with the same effect. One whose pressed layer takes another colour\n * passes it as `pressedColor`.\n *\n * The ring shows when focus arrives from a keyboard, and not when it arrives\n * with a press, which on web is a click focusing what it presses.\n *\n * ```tsx\n * const feedback = usePressFeedback({ color: colors.onPrimary, corners, onPressIn })\n *\n * <Pressable {...feedback.handlers} style={[styles.button, feedback.ring]}>\n *   {feedback.layer}\n *   <Text>Label</Text>\n * </Pressable>\n * ```\n */\nfunction usePressFeedback({\n  area,\n  color,\n  corners,\n  disabled,\n  disableRipple = false,\n  disc,\n  held = false,\n  onBlur,\n  onFocus,\n  onHoverIn,\n  onHoverOut,\n  onPressIn,\n  onPressOut,\n  pending,\n  pressedColor = color,\n}: PressFeedbackOptions): PressFeedback {\n  const theme = useTheme()\n  const reduceMotion = useReducedMotion()\n  const [hovered, setHovered] = useState(false)\n  const [pressed, setPressed] = useState(false)\n  const [ringShown, setRingShown] = useState(false)\n  const focused = useRef(false)\n  // Whether the press in flight began while the control had no focus, which\n  // makes the focus that follows it a pointer's.\n  const pressedUnfocused = useRef(false)\n  const pressStarted = useRef(0)\n  const phase = useRef<RipplePhase>('idle')\n  const geometry = useSharedValue(NO_RIPPLE)\n  const grow = useSharedValue(0)\n  const fade = useSharedValue(0)\n\n  const { motion, spacing, stateLayerOpacity } = theme\n  const active = disabled !== true\n  const interactive = active && pending !== true\n  const rippled = interactive && !disableRipple && !reduceMotion\n\n  const rippleMotion = useAnimatedStyle(() => {\n    'worklet'\n    const { end, scale, size, start } = geometry.get()\n    const progress = grow.get()\n\n    // The whole style is the animation's, so the view takes the one object it\n    // hands back.\n    return {\n      backgroundColor: pressedColor,\n      borderRadius: size / 2,\n      height: size,\n      left: 0,\n      opacity: fade.get(),\n      position: 'absolute',\n      top: 0,\n      transform: [\n        { translateX: start.x + (end.x - start.x) * progress },\n        { translateY: start.y + (end.y - start.y) * progress },\n        { scale: 1 + (scale - 1) * progress },\n      ],\n      width: size,\n    }\n  })\n\n  // Grows a disc a fifth of the control's longer side from the press point\n  // to the centre, until it covers the control and `spacing.sm` beyond its\n  // corners, as web's does.\n  function ripple(width: number, height: number, origin: Point) {\n    const size = Math.max(\n      1,\n      Math.floor(Math.max(width, height) * INITIAL_ORIGIN_SCALE),\n    )\n\n    geometry.set({\n      end: { x: (width - size) / 2, y: (height - size) / 2 },\n      scale: (Math.hypot(width, height) + spacing.sm) / size,\n      size,\n      start: { x: origin.x - size / 2, y: origin.y - size / 2 },\n    })\n    grow.set(0)\n    grow.set(\n      withTiming(1, {\n        duration: motion.durationLong1,\n        easing: Easing.bezier(...motion.easingStandard),\n      }),\n    )\n    fade.set(\n      withTiming(stateLayerOpacity.pressed, {\n        duration: FADE_IN,\n        easing: Easing.linear,\n      }),\n    )\n    pressStarted.current = Date.now()\n  }\n\n  // Fades the ripple out, once it has been shown for `durationMedium1`.\n  function release() {\n    const shown = Date.now() - pressStarted.current\n\n    fade.set(\n      withDelay(\n        Math.max(0, motion.durationMedium1 - shown),\n        withTiming(0, { duration: FADE_OUT, easing: Easing.linear }),\n      ),\n    )\n  }\n\n  const handlers: PressFeedback['handlers'] = {\n    onBlur: (event) => {\n      focused.current = false\n      setRingShown(false)\n      onBlur?.(event)\n    },\n    onFocus: (event) => {\n      focused.current = true\n      setRingShown(!pressedUnfocused.current)\n      pressedUnfocused.current = false\n      onFocus?.(event)\n    },\n    onHoverIn: (event) => {\n      setHovered(true)\n      onHoverIn?.(event)\n    },\n    onHoverOut: (event) => {\n      setHovered(false)\n      onHoverOut?.(event)\n    },\n    onPressIn: (event) => {\n      pressedUnfocused.current = !focused.current\n      setPressed(true)\n\n      const fixed = disc === undefined ? area : { height: disc, width: disc }\n\n      if (rippled && fixed !== undefined) {\n        ripple(fixed.width, fixed.height, {\n          x: fixed.width / 2,\n          y: fixed.height / 2,\n        })\n        phase.current = 'shown'\n      } else if (rippled && typeof event.currentTarget !== 'number') {\n        const { pageX, pageY } = event.nativeEvent\n\n        // A touch's own location is measured from whichever child it landed\n        // on, so the point is taken from the page and the control measured\n        // there. A press from a key carries no point, and ripples from the\n        // centre. React Native Web measures a frame later, so a press can end\n        // first, and its ripple is then drawn whole. React Native types the\n        // target as a bare view tag too, which has nothing to measure.\n        phase.current = 'measuring'\n        event.currentTarget.measure((_x, _y, width, height, left, top) => {\n          ripple(width, height, {\n            x: Number.isFinite(pageX - left) ? pageX - left : width / 2,\n            y: Number.isFinite(pageY - top) ? pageY - top : height / 2,\n          })\n\n          if (phase.current === 'released') {\n            release()\n            phase.current = 'idle'\n          } else {\n            phase.current = 'shown'\n          }\n        })\n      }\n\n      onPressIn?.(event)\n    },\n    onPressOut: (event) => {\n      pressedUnfocused.current = false\n      setPressed(false)\n\n      if (phase.current === 'shown') {\n        release()\n      }\n      phase.current = phase.current === 'measuring' ? 'released' : 'idle'\n\n      onPressOut?.(event)\n    },\n  }\n\n  const pressedLayer = interactive && (pressed || held)\n  const layerOpacity = !active\n    ? 0\n    : pressedLayer\n      ? stateLayerOpacity.pressed\n      : ringShown\n        ? stateLayerOpacity.focus\n        : interactive && hovered\n          ? stateLayerOpacity.hover\n          : 0\n  const surface = composeStyles<ViewStyle>(styles.surface, corners)\n  const state = composeStyles<ViewStyle>(styles.layer, {\n    backgroundColor: pressedLayer ? pressedColor : color,\n    opacity: layerOpacity,\n  })\n\n  return {\n    handlers,\n    hovered: interactive && hovered,\n    layer: (\n      <View\n        accessibilityElementsHidden\n        importantForAccessibility=\"no-hide-descendants\"\n        style={surface}\n      >\n        <View style={state} />\n        {rippled ? <Animated.View style={rippleMotion} /> : null}\n      </View>\n    ),\n    pressed: interactive && pressed,\n    ring: active && ringShown ? stylesOf(theme).ring : undefined,\n  }\n}\n\nexport { hitSlop, TARGET_SIZE, usePressFeedback }\nexport type { Corners, PressFeedback, PressFeedbackOptions }\n"],"mappings":"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"}

package/dist/row/index.js

@@ -1,7 +1,7 @@
 import { IconStyleContext } from "../glyphs/icon-style.js";
 import { useTheme } from "../theme/scope.js";
 import { composeStyles } from "../theme/styles.js";
-import { useTypeRole } from "../typography/roles.js";
+import { nativeWeight, useTypeRole } from "../typography/roles.js";
 import { rowContentColor, rowStyles, rowStylesOf } from "./styles.js";
 import { c } from "react/compiler-runtime";
 import { Text, View } from "react-native";
@@ -9,6 +9,11 @@ import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/row/index.tsx
 const ICON_SIZE = 24;
+const SELECTED_CONTAINER = {
+	drawer: "selectedDrawer",
+	list: "selectedList",
+	menu: "selectedMenu"
+};
 /** Whether a slot was given something to draw. */
 function hasContent(node) {
 	return node !== void 0 && node !== null && node !== false && node !== "";
@@ -22,19 +27,20 @@ function hasContent(node) {
 * `useIconStyle()`. Not a component of the library's own and not exported.
 */
 function RowContent(t0) {
-	const $ = c(29);
-	const { children, isDisabled: t1, isSelected: t2, leading, overline, supporting, trailing, variant: t3 } = t0;
+	const $ = c(31);
+	const { children, isDisabled: t1, isEmphasized: t2, isSelected: t3, leading, overline, supporting, trailing, variant: t4 } = t0;
 	const isDisabled = t1 === void 0 ? false : t1;
-	const isSelected = t2 === void 0 ? false : t2;
-	const variant = t3 === void 0 ? "list" : t3;
+	const isEmphasized = t2 === void 0 ? false : t2;
+	const isSelected = t3 === void 0 ? false : t3;
+	const variant = t4 === void 0 ? "list" : t4;
 	const theme = useTheme();
 	const own = rowStylesOf(theme);
-	const headlineRole = useTypeRole(variant === "menu" ? "labelLarge" : "bodyLarge");
+	const headlineRole = useTypeRole(variant === "list" ? "bodyLarge" : "labelLarge");
 	const overlineRole = useTypeRole("labelSmall");
 	const supportingRole = useTypeRole("bodyMedium");
-	let t4;
+	let t5;
 	if ($[0] !== isDisabled || $[1] !== isSelected || $[2] !== theme || $[3] !== variant) {
-		t4 = rowContentColor(theme, {
+		t5 = rowContentColor(theme, {
 			isDisabled,
 			isSelected,
 			variant
@@ -43,101 +49,103 @@ function RowContent(t0) {
 		$[1] = isSelected;
 		$[2] = theme;
 		$[3] = variant;
-		$[4] = t4;
-	} else t4 = $[4];
-	const color = t4;
-	let t5;
+		$[4] = t5;
+	} else t5 = $[4];
+	const color = t5;
+	let t6;
 	if ($[5] !== color) {
-		t5 = {
+		t6 = {
 			color,
 			size: ICON_SIZE
 		};
 		$[5] = color;
-		$[6] = t5;
-	} else t5 = $[6];
-	const icons = t5;
+		$[6] = t6;
+	} else t6 = $[6];
+	const icons = t6;
 	const tone = isDisabled || isSelected ? { color } : own.muted;
 	const T0 = IconStyleContext;
-	let t6;
+	let t7;
 	if ($[7] !== leading) {
-		t6 = hasContent(leading) ? /* @__PURE__ */ jsx(View, {
+		t7 = hasContent(leading) ? /* @__PURE__ */ jsx(View, {
 			style: rowStyles.slot,
 			children: leading
 		}) : null;
 		$[7] = leading;
-		$[8] = t6;
-	} else t6 = $[8];
+		$[8] = t7;
+	} else t7 = $[8];
 	const T1 = View;
-	const t7 = own.main;
-	const t8 = hasContent(overline) ? /* @__PURE__ */ jsx(Text, {
+	const t8 = own.main;
+	const t9 = hasContent(overline) ? /* @__PURE__ */ jsx(Text, {
 		style: composeStyles(overlineRole, tone),
 		children: overline
 	}) : null;
-	let t9;
-	if ($[9] !== color || $[10] !== headlineRole) {
-		t9 = composeStyles(headlineRole, { color });
+	let t10;
+	if ($[9] !== color || $[10] !== headlineRole || $[11] !== isEmphasized || $[12] !== theme) {
+		t10 = composeStyles(headlineRole, { color }, isEmphasized ? { fontWeight: nativeWeight(theme.typography.weightBold) } : void 0);
 		$[9] = color;
 		$[10] = headlineRole;
-		$[11] = t9;
-	} else t9 = $[11];
-	let t10;
-	if ($[12] !== children || $[13] !== t9) {
-		t10 = /* @__PURE__ */ jsx(Text, {
-			style: t9,
+		$[11] = isEmphasized;
+		$[12] = theme;
+		$[13] = t10;
+	} else t10 = $[13];
+	let t11;
+	if ($[14] !== children || $[15] !== t10) {
+		t11 = /* @__PURE__ */ jsx(Text, {
+			style: t10,
 			children
 		});
-		$[12] = children;
-		$[13] = t9;
-		$[14] = t10;
-	} else t10 = $[14];
-	const t11 = hasContent(supporting) ? /* @__PURE__ */ jsx(Text, {
+		$[14] = children;
+		$[15] = t10;
+		$[16] = t11;
+	} else t11 = $[16];
+	const t12 = hasContent(supporting) ? /* @__PURE__ */ jsx(Text, {
 		style: composeStyles(supportingRole, tone),
 		children: supporting
 	}) : null;
-	let t12;
-	if ($[15] !== T1 || $[16] !== own || $[17] !== t10 || $[18] !== t11 || $[19] !== t8) {
-		t12 = /* @__PURE__ */ jsxs(T1, {
-			style: t7,
+	let t13;
+	if ($[17] !== T1 || $[18] !== own || $[19] !== t11 || $[20] !== t12 || $[21] !== t9) {
+		t13 = /* @__PURE__ */ jsxs(T1, {
+			style: t8,
 			children: [
-				t8,
-				t10,
-				t11
+				t9,
+				t11,
+				t12
 			]
 		});
-		$[15] = T1;
-		$[16] = own;
-		$[17] = t10;
-		$[18] = t11;
-		$[19] = t8;
+		$[17] = T1;
+		$[18] = own;
+		$[19] = t11;
 		$[20] = t12;
-	} else t12 = $[20];
-	let t13;
-	if ($[21] !== trailing) {
-		t13 = hasContent(trailing) ? /* @__PURE__ */ jsx(View, {
-			style: rowStyles.slot,
-			children: trailing
-		}) : null;
-		$[21] = trailing;
+		$[21] = t9;
 		$[22] = t13;
 	} else t13 = $[22];
 	let t14;
-	if ($[23] !== T0 || $[24] !== icons || $[25] !== t12 || $[26] !== t13 || $[27] !== t6) {
-		t14 = /* @__PURE__ */ jsxs(T0, {
+	if ($[23] !== trailing) {
+		t14 = hasContent(trailing) ? /* @__PURE__ */ jsx(View, {
+			style: rowStyles.slot,
+			children: trailing
+		}) : null;
+		$[23] = trailing;
+		$[24] = t14;
+	} else t14 = $[24];
+	let t15;
+	if ($[25] !== T0 || $[26] !== icons || $[27] !== t13 || $[28] !== t14 || $[29] !== t7) {
+		t15 = /* @__PURE__ */ jsxs(T0, {
 			value: icons,
 			children: [
-				t6,
-				t12,
-				t13
+				t7,
+				t13,
+				t14
 			]
 		});
-		$[23] = T0;
-		$[24] = icons;
-		$[25] = t12;
-		$[26] = t13;
-		$[27] = t6;
+		$[25] = T0;
+		$[26] = icons;
+		$[27] = t13;
 		$[28] = t14;
-	} else t14 = $[28];
-	return t14;
+		$[29] = t7;
+		$[30] = t15;
+	} else t15 = $[30];
+	return t15;
 }
 /**
 * The style of the view around a row's content: the padding and gap, the
@@ -150,7 +158,7 @@ function RowContent(t0) {
 function rowStyleOf(theme, { isSelected = false, overline, supporting, variant = "list" }) {
 	const own = rowStylesOf(theme);
 	const lines = (hasContent(overline) ? 1 : 0) + (hasContent(supporting) ? 1 : 0);
-	return composeStyles(own.base, own[variant], lines === 1 ? own.twoLine : void 0, lines === 2 ? own.threeLine : void 0, isSelected ? own[variant === "menu" ? "selectedMenu" : "selectedList"] : void 0);
+	return composeStyles(own.base, own[variant], lines === 1 ? own.twoLine : void 0, lines === 2 ? own.threeLine : void 0, isSelected ? own[SELECTED_CONTAINER[variant]] : void 0);
 }
 //#endregion
 export { RowContent, hasContent, rowContentColor, rowStyleOf, rowStyles };

package/dist/row/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","StyleProp","TextStyle","ViewStyle","useMemo","Text","NativeText","View","IconStyle","ResolvedTheme","RowVariant","IconStyleContext","useTheme","composeStyles","useTypeRole","rowContentColor","rowStyles","rowStylesOf","ICON_SIZE","RowContentProps","children","isDisabled","isSelected","leading","overline","supporting","trailing","variant","hasContent","node","undefined","RowContent","t0","$","_c","t1","t2","t3","theme","own","headlineRole","overlineRole","supportingRole","t4","color","t5","size","icons","tone","muted","T0","t6","slot","T1","t7","main","t8","t9","t10","t11","t12","t13","t14","rowStyleOf","Pick","lines","base","twoLine","threeLine","_c","NativeText"],"sources":["../../src/row/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\nimport type { StyleProp, TextStyle, ViewStyle } from 'react-native'\n\nimport { useMemo } from 'react'\nimport { Text as NativeText, View } from 'react-native'\n\nimport type { IconStyle } from '../glyphs/icon-style'\nimport type { ResolvedTheme } from '../theme/scope'\nimport type { RowVariant } from './styles'\n\nimport { IconStyleContext } from '../glyphs/icon-style'\nimport { useTheme } from '../theme/scope'\nimport { composeStyles } from '../theme/styles'\nimport { useTypeRole } from '../typography/roles'\nimport { rowContentColor, rowStyles, rowStylesOf } from './styles'\n\n// The size an icon in either slot is drawn at, the lists and menus pages'.\nconst ICON_SIZE = 24\n\ntype RowContentProps = {\n  /** The row's headline, the one thing it is mostly about. */\n  readonly children?: ReactNode\n  /**\n   * Whether the row is disabled. Its headline, slots and lines take the\n   * faded on-surface colour, the supporting line included.\n   * @default false\n   */\n  readonly isDisabled?: boolean\n  /**\n   * Whether the row is selected. Its headline, slots and lines take the\n   * selected container's own on-colour, since the muted role is not\n   * guaranteed to be readable over it.\n   * @default false\n   */\n  readonly isSelected?: boolean\n  /** Content before the headline: an avatar, an icon, a checkbox. */\n  readonly leading?: ReactNode\n  /** A line above the headline, in label small and the muted role. */\n  readonly overline?: ReactNode\n  /** A second line under the headline, in body medium and the muted role. */\n  readonly supporting?: ReactNode\n  /** Content after the headline, such as an amount or a control. */\n  readonly trailing?: ReactNode\n  /**\n   * Which spec page's row this is. A list item's headline is body large and\n   * a menu item's label large.\n   * @default 'list'\n   */\n  readonly variant?: RowVariant\n}\n\n/** Whether a slot was given something to draw. */\nfunction hasContent(node: ReactNode): boolean {\n  return node !== undefined && node !== null && node !== false && node !== ''\n}\n\n/**\n * The inside of a row: the leading slot, the headline with the lines beside\n * it, and the trailing slot, each drawn only when given. The view around it\n * is the caller's, ListItem's or a menu's item, and takes `rowStyleOf`; this\n * is what each of them puts inside it, so a list and a menu draw the same\n * row. Both slots hand an icon the row's content colour at 24dp, through\n * `useIconStyle()`. Not a component of the library's own and not exported.\n */\nfunction RowContent({\n  children,\n  isDisabled = false,\n  isSelected = false,\n  leading,\n  overline,\n  supporting,\n  trailing,\n  variant = 'list',\n}: RowContentProps) {\n  const theme = useTheme()\n  const own = rowStylesOf(theme)\n  const headlineRole = useTypeRole(\n    variant === 'menu' ? 'labelLarge' : 'bodyLarge',\n  )\n  const overlineRole = useTypeRole('labelSmall')\n  const supportingRole = useTypeRole('bodyMedium')\n  const color = rowContentColor(theme, { isDisabled, isSelected, variant })\n  const icons = useMemo<IconStyle>(() => ({ color, size: ICON_SIZE }), [color])\n  // The muted role on the surface; the row's own colour over a selected\n  // container, and on a disabled row, which fades the lines with the rest.\n  const tone = isDisabled || isSelected ? { color } : own.muted\n\n  return (\n    <IconStyleContext value={icons}>\n      {hasContent(leading) ? (\n        <View style={rowStyles.slot}>{leading}</View>\n      ) : null}\n      <View style={own.main}>\n        {hasContent(overline) ? (\n          <NativeText style={composeStyles<TextStyle>(overlineRole, tone)}>\n            {overline}\n          </NativeText>\n        ) : null}\n        <NativeText style={composeStyles<TextStyle>(headlineRole, { color })}>\n          {children}\n        </NativeText>\n        {hasContent(supporting) ? (\n          <NativeText style={composeStyles<TextStyle>(supportingRole, tone)}>\n            {supporting}\n          </NativeText>\n        ) : null}\n      </View>\n      {hasContent(trailing) ? (\n        <View style={rowStyles.slot}>{trailing}</View>\n      ) : null}\n    </IconStyleContext>\n  )\n}\n\n/**\n * The style of the view around a row's content: the padding and gap, the\n * variant's height, the taller item its lines make it, and the selected\n * container. Which of the lists page's three items a row is comes from its\n * content rather than a prop, so a row holding all three lines already says\n * it is the three-line item. A line that wraps grows the shorter item and\n * keeps its slots centred.\n */\nfunction rowStyleOf(\n  theme: ResolvedTheme,\n  {\n    isSelected = false,\n    overline,\n    supporting,\n    variant = 'list',\n  }: Pick<\n    RowContentProps,\n    'isSelected' | 'overline' | 'supporting' | 'variant'\n  >,\n): StyleProp<ViewStyle> {\n  const own = rowStylesOf(theme)\n  const lines =\n    (hasContent(overline) ? 1 : 0) + (hasContent(supporting) ? 1 : 0)\n\n  return composeStyles<ViewStyle>(\n    own.base,\n    own[variant],\n    lines === 1 ? own.twoLine : undefined,\n    lines === 2 ? own.threeLine : undefined,\n    isSelected\n      ? own[variant === 'menu' ? 'selectedMenu' : 'selectedList']\n      : undefined,\n  )\n}\n\nexport type { RowContentProps, RowVariant }\n\nexport { hasContent, RowContent, rowContentColor, rowStyleOf, rowStyles }\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ReactNode","StyleProp","TextStyle","ViewStyle","useMemo","Text","NativeText","View","IconStyle","ResolvedTheme","RowVariant","IconStyleContext","useTheme","composeStyles","nativeWeight","useTypeRole","rowContentColor","rowStyles","rowStylesOf","ICON_SIZE","SELECTED_CONTAINER","drawer","list","menu","const","Record","RowContentProps","children","isDisabled","isEmphasized","isSelected","leading","overline","supporting","trailing","variant","hasContent","node","undefined","RowContent","t0","$","_c","t1","t2","t3","t4","theme","own","headlineRole","overlineRole","supportingRole","t5","color","t6","size","icons","tone","muted","T0","t7","slot","T1","t8","main","t9","t10","fontWeight","typography","weightBold","t11","t12","t13","t14","t15","rowStyleOf","Pick","lines","base","twoLine","threeLine","_c","NativeText"],"sources":["../../src/row/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\nimport type { StyleProp, TextStyle, ViewStyle } from 'react-native'\n\nimport { useMemo } from 'react'\nimport { Text as NativeText, View } from 'react-native'\n\nimport type { IconStyle } from '../glyphs/icon-style'\nimport type { ResolvedTheme } from '../theme/scope'\nimport type { RowVariant } from './styles'\n\nimport { IconStyleContext } from '../glyphs/icon-style'\nimport { useTheme } from '../theme/scope'\nimport { composeStyles } from '../theme/styles'\nimport { nativeWeight, useTypeRole } from '../typography/roles'\nimport { rowContentColor, rowStyles, rowStylesOf } from './styles'\n\n// The size an icon in either slot is drawn at, the lists and menus pages'.\nconst ICON_SIZE = 24\n\n// The style of each variant's selected container.\nconst SELECTED_CONTAINER = {\n  drawer: 'selectedDrawer',\n  list: 'selectedList',\n  menu: 'selectedMenu',\n} as const satisfies Record<RowVariant, string>\n\ntype RowContentProps = {\n  /** The row's headline, the one thing it is mostly about. */\n  readonly children?: ReactNode\n  /**\n   * Whether the row is disabled. Its headline, slots and lines take the\n   * faded on-surface colour, the supporting line included.\n   * @default false\n   */\n  readonly isDisabled?: boolean\n  /**\n   * Whether the headline is drawn in the bold weight rather than its role's\n   * own, for a row marked without the container a selected one takes. The\n   * navigation drawer's trail to the current row is what asks for it.\n   * @default false\n   */\n  readonly isEmphasized?: boolean\n  /**\n   * Whether the row is selected. Its headline, slots and lines take the\n   * selected container's own on-colour, since the muted role is not\n   * guaranteed to be readable over it.\n   * @default false\n   */\n  readonly isSelected?: boolean\n  /** Content before the headline: an avatar, an icon, a checkbox. */\n  readonly leading?: ReactNode\n  /** A line above the headline, in label small and the muted role. */\n  readonly overline?: ReactNode\n  /** A second line under the headline, in body medium and the muted role. */\n  readonly supporting?: ReactNode\n  /** Content after the headline, such as an amount or a control. */\n  readonly trailing?: ReactNode\n  /**\n   * Which spec page's row this is. A list item's headline is body large, and\n   * a menu item's and a navigation drawer row's label large.\n   * @default 'list'\n   */\n  readonly variant?: RowVariant\n}\n\n/** Whether a slot was given something to draw. */\nfunction hasContent(node: ReactNode): boolean {\n  return node !== undefined && node !== null && node !== false && node !== ''\n}\n\n/**\n * The inside of a row: the leading slot, the headline with the lines beside\n * it, and the trailing slot, each drawn only when given. The view around it\n * is the caller's, ListItem's or a menu's item, and takes `rowStyleOf`; this\n * is what each of them puts inside it, so a list and a menu draw the same\n * row. Both slots hand an icon the row's content colour at 24dp, through\n * `useIconStyle()`. Not a component of the library's own and not exported.\n */\nfunction RowContent({\n  children,\n  isDisabled = false,\n  isEmphasized = false,\n  isSelected = false,\n  leading,\n  overline,\n  supporting,\n  trailing,\n  variant = 'list',\n}: RowContentProps) {\n  const theme = useTheme()\n  const own = rowStylesOf(theme)\n  const headlineRole = useTypeRole(\n    variant === 'list' ? 'bodyLarge' : 'labelLarge',\n  )\n  const overlineRole = useTypeRole('labelSmall')\n  const supportingRole = useTypeRole('bodyMedium')\n  const color = rowContentColor(theme, { isDisabled, isSelected, variant })\n  const icons = useMemo<IconStyle>(() => ({ color, size: ICON_SIZE }), [color])\n  // The muted role on the surface; the row's own colour over a selected\n  // container, and on a disabled row, which fades the lines with the rest.\n  const tone = isDisabled || isSelected ? { color } : own.muted\n\n  return (\n    <IconStyleContext value={icons}>\n      {hasContent(leading) ? (\n        <View style={rowStyles.slot}>{leading}</View>\n      ) : null}\n      <View style={own.main}>\n        {hasContent(overline) ? (\n          <NativeText style={composeStyles<TextStyle>(overlineRole, tone)}>\n            {overline}\n          </NativeText>\n        ) : null}\n        <NativeText\n          style={composeStyles<TextStyle>(\n            headlineRole,\n            { color },\n            isEmphasized\n              ? { fontWeight: nativeWeight(theme.typography.weightBold) }\n              : undefined,\n          )}\n        >\n          {children}\n        </NativeText>\n        {hasContent(supporting) ? (\n          <NativeText style={composeStyles<TextStyle>(supportingRole, tone)}>\n            {supporting}\n          </NativeText>\n        ) : null}\n      </View>\n      {hasContent(trailing) ? (\n        <View style={rowStyles.slot}>{trailing}</View>\n      ) : null}\n    </IconStyleContext>\n  )\n}\n\n/**\n * The style of the view around a row's content: the padding and gap, the\n * variant's height, the taller item its lines make it, and the selected\n * container. Which of the lists page's three items a row is comes from its\n * content rather than a prop, so a row holding all three lines already says\n * it is the three-line item. A line that wraps grows the shorter item and\n * keeps its slots centred.\n */\nfunction rowStyleOf(\n  theme: ResolvedTheme,\n  {\n    isSelected = false,\n    overline,\n    supporting,\n    variant = 'list',\n  }: Pick<\n    RowContentProps,\n    'isSelected' | 'overline' | 'supporting' | 'variant'\n  >,\n): StyleProp<ViewStyle> {\n  const own = rowStylesOf(theme)\n  const lines =\n    (hasContent(overline) ? 1 : 0) + (hasContent(supporting) ? 1 : 0)\n\n  return composeStyles<ViewStyle>(\n    own.base,\n    own[variant],\n    lines === 1 ? own.twoLine : undefined,\n    lines === 2 ? own.threeLine : undefined,\n    isSelected ? own[SELECTED_CONTAINER[variant]] : undefined,\n  )\n}\n\nexport type { RowContentProps, RowVariant }\n\nexport { hasContent, RowContent, rowContentColor, rowStyleOf, rowStyles }\n"],"mappings":"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"}

package/dist/row/styles.js

@@ -2,7 +2,12 @@ import { themedStyles } from "../theme/styles.js";
 import { withOpacity } from "../theme/color.js";
 import { StyleSheet } from "react-native";
 //#region src/row/styles.ts
-const rowStylesOf = themedStyles(({ colors, sizing, spacing }) => StyleSheet.create({
+const SELECTED_CONTENT = {
+	drawer: "onSecondaryContainer",
+	list: "onPrimaryContainer",
+	menu: "onTertiaryContainer"
+};
+const rowStylesOf = themedStyles(({ colors, radii, sizing, spacing }) => StyleSheet.create({
 	base: {
 		alignItems: "center",
 		flexDirection: "row",
@@ -10,6 +15,11 @@ const rowStylesOf = themedStyles(({ colors, sizing, spacing }) => StyleSheet.cre
 		paddingHorizontal: spacing.lg,
 		paddingVertical: spacing.md
 	},
+	drawer: {
+		borderRadius: radii.pill,
+		marginHorizontal: spacing.md,
+		minHeight: sizing.rowSm
+	},
 	list: { minHeight: sizing.rowSm },
 	main: {
 		flexGrow: 1,
@@ -19,6 +29,7 @@ const rowStylesOf = themedStyles(({ colors, sizing, spacing }) => StyleSheet.cre
 	},
 	menu: { minHeight: sizing.rowXs },
 	muted: { color: colors.onSurfaceVariant },
+	selectedDrawer: { backgroundColor: colors.secondaryContainer },
 	selectedList: { backgroundColor: colors.primaryContainer },
 	selectedMenu: { backgroundColor: colors.tertiaryContainer },
 	threeLine: {
@@ -42,7 +53,7 @@ const rowStyles = StyleSheet.create({
 */
 function rowContentColor({ colors, stateLayerOpacity }, { isDisabled = false, isSelected = false, variant = "list" }) {
 	if (isDisabled) return withOpacity(colors.onSurface, stateLayerOpacity.disabledContent);
-	if (isSelected) return variant === "menu" ? colors.onTertiaryContainer : colors.onPrimaryContainer;
+	if (isSelected) return colors[SELECTED_CONTENT[variant]];
 	return colors.onSurface;
 }
 //#endregion

package/dist/row/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","names":["StyleSheet","ResolvedTheme","withOpacity","themedStyles","RowVariant","rowStylesOf","colors","sizing","spacing","create","base","alignItems","flexDirection","gap","lg","paddingHorizontal","paddingVertical","md","list","minHeight","rowSm","main","flexGrow","flexShrink","xxs","minWidth","menu","rowXs","muted","color","onSurfaceVariant","selectedList","backgroundColor","primaryContainer","selectedMenu","tertiaryContainer","threeLine","rowLg","twoLine","rowMd","rowStyles","ring","outlineOffset","slot","justifyContent","rowContentColor","stateLayerOpacity","isDisabled","isSelected","variant","onSurface","disabledContent","onTertiaryContainer","onPrimaryContainer"],"sources":["../../src/row/styles.ts"],"sourcesContent":["import { StyleSheet } from 'react-native'\n\nimport type { ResolvedTheme } from '../theme/scope'\n\nimport { withOpacity } from '../theme/color'\nimport { themedStyles } from '../theme/styles'\n\n// The row every list and menu item draws, as web's src/row draws it: the\n// lists page's 16dp inline and 12dp block padding, 16dp between the slots\n// and the text, and a height per spec page and line count. Each height is a\n// `minHeight`, since the lines inside are set in type roles whose sizes are\n// tokens, and a larger OS text size grows the row rather than clipping it.\n\n/** Which spec page's row this is: the lists page's or the menus page's. */\ntype RowVariant = 'list' | 'menu'\n\nconst rowStylesOf = themedStyles(({ colors, sizing, spacing }: ResolvedTheme) =>\n  StyleSheet.create({\n    base: {\n      alignItems: 'center',\n      flexDirection: 'row',\n      gap: spacing.lg,\n      paddingHorizontal: spacing.lg,\n      paddingVertical: spacing.md,\n    },\n    // The lists page's one-line item.\n    list: {\n      minHeight: sizing.rowSm,\n    },\n    // The headline and the lines beside it take what the slots leave and\n    // wrap past it, so a long one never runs under the trailing slot.\n    // `minWidth: 0` is for React Native Web, where a text in a row keeps\n    // CSS's automatic minimum, the width of its longest word.\n    main: {\n      flexGrow: 1,\n      flexShrink: 1,\n      gap: spacing.xxs,\n      minWidth: 0,\n    },\n    // The menus page's item.\n    menu: {\n      minHeight: sizing.rowXs,\n    },\n    muted: {\n      color: colors.onSurfaceVariant,\n    },\n    selectedList: {\n      backgroundColor: colors.primaryContainer,\n    },\n    selectedMenu: {\n      backgroundColor: colors.tertiaryContainer,\n    },\n    // The three-line item, the only one whose slots move: they are held\n    // level with the overline rather than centred on the three lines.\n    threeLine: {\n      alignItems: 'flex-start',\n      minHeight: sizing.rowLg,\n    },\n    twoLine: {\n      minHeight: sizing.rowMd,\n    },\n  }),\n)\n\nconst rowStyles = StyleSheet.create({\n  // The focus ring, drawn inside the row as web's is, so a container that\n  // clips its rows, such as a menu's surface, leaves the whole ring showing.\n  ring: {\n    outlineOffset: -2,\n  },\n  slot: {\n    alignItems: 'center',\n    flexShrink: 0,\n    justifyContent: 'center',\n  },\n})\n\n/**\n * The colour a row's headline, slots and feedback are drawn in: on surface,\n * the selected container's own on-colour, or on surface faded to the\n * disabled content opacity, which wins over the selected one.\n */\nfunction rowContentColor(\n  { colors, stateLayerOpacity }: ResolvedTheme,\n  {\n    isDisabled = false,\n    isSelected = false,\n    variant = 'list',\n  }: {\n    readonly isDisabled?: boolean\n    readonly isSelected?: boolean\n    readonly variant?: RowVariant\n  },\n): string {\n  if (isDisabled) {\n    return withOpacity(colors.onSurface, stateLayerOpacity.disabledContent)\n  }\n  if (isSelected) {\n    return variant === 'menu'\n      ? colors.onTertiaryContainer\n      : colors.onPrimaryContainer\n  }\n  return colors.onSurface\n}\n\nexport type { RowVariant }\n\nexport { rowContentColor, rowStyles, rowStylesOf }\n"],"mappings":";;;;AAgBA,MAAMK,cAAcF,cAAc,EAAEG,QAAQC,QAAQC,cAClDR,WAAWS,OAAO;CAChBC,MAAM;EACJC,YAAY;EACZC,eAAe;EACfC,KAAKL,QAAQM;EACbC,mBAAmBP,QAAQM;EAC3BE,iBAAiBR,QAAQS;CAC3B;CAEAC,MAAM,EACJC,WAAWZ,OAAOa,MACpB;CAKAC,MAAM;EACJC,UAAU;EACVC,YAAY;EACZV,KAAKL,QAAQgB;EACbC,UAAU;CACZ;CAEAC,MAAM,EACJP,WAAWZ,OAAOoB,MACpB;CACAC,OAAO,EACLC,OAAOvB,OAAOwB,iBAChB;CACAC,cAAc,EACZC,iBAAiB1B,OAAO2B,iBAC1B;CACAC,cAAc,EACZF,iBAAiB1B,OAAO6B,kBAC1B;CAGAC,WAAW;EACTzB,YAAY;EACZQ,WAAWZ,OAAO8B;CACpB;CACAC,SAAS,EACPnB,WAAWZ,OAAOgC,MACpB;AACF,CAAC,CACH;AAEA,MAAMC,YAAYxC,WAAWS,OAAO;CAGlCgC,MAAM,EACJC,eAAe,GACjB;CACAC,MAAM;EACJhC,YAAY;EACZY,YAAY;EACZqB,gBAAgB;CAClB;AACF,CAAC;;;;;;AAOD,SAASC,gBACP,EAAEvC,QAAQwC,qBACV,EACEC,aAAa,OACbC,aAAa,OACbC,UAAU,UAMJ;CACR,IAAIF,YACF,OAAO7C,YAAYI,OAAO4C,WAAWJ,kBAAkBK,eAAe;CAExE,IAAIH,YACF,OAAOC,YAAY,SACf3C,OAAO8C,sBACP9C,OAAO+C;CAEb,OAAO/C,OAAO4C;AAChB"}
+{"version":3,"file":"styles.js","names":["StyleSheet","ResolvedTheme","withOpacity","themedStyles","RowVariant","SELECTED_CONTENT","drawer","list","menu","const","Record","rowStylesOf","colors","radii","sizing","spacing","create","base","alignItems","flexDirection","gap","lg","paddingHorizontal","paddingVertical","md","borderRadius","pill","marginHorizontal","minHeight","rowSm","main","flexGrow","flexShrink","xxs","minWidth","rowXs","muted","color","onSurfaceVariant","selectedDrawer","backgroundColor","secondaryContainer","selectedList","primaryContainer","selectedMenu","tertiaryContainer","threeLine","rowLg","twoLine","rowMd","rowStyles","ring","outlineOffset","slot","justifyContent","rowContentColor","stateLayerOpacity","isDisabled","isSelected","variant","onSurface","disabledContent"],"sources":["../../src/row/styles.ts"],"sourcesContent":["import { StyleSheet } from 'react-native'\n\nimport type { ResolvedTheme } from '../theme/scope'\n\nimport { withOpacity } from '../theme/color'\nimport { themedStyles } from '../theme/styles'\n\n// The row every list and menu item draws, as web's src/row draws it: the\n// lists page's 16dp inline and 12dp block padding, 16dp between the slots\n// and the text, and a height per spec page and line count. Each height is a\n// `minHeight`, since the lines inside are set in type roles whose sizes are\n// tokens, and a larger OS text size grows the row rather than clipping it.\n// The navigation drawer page gives its row the lists page's 56dp too, with a\n// menu's label large label, and marks the current one with a secondary\n// container pill held 12dp off each edge, as web's drawer row does.\n\n/**\n * Which spec page's row this is: the lists page's, the menus page's or the\n * navigation drawer page's.\n */\ntype RowVariant = 'drawer' | 'list' | 'menu'\n\n// The on-colour of each variant's selected container.\nconst SELECTED_CONTENT = {\n  drawer: 'onSecondaryContainer',\n  list: 'onPrimaryContainer',\n  menu: 'onTertiaryContainer',\n} as const satisfies Record<RowVariant, keyof ResolvedTheme['colors']>\n\nconst rowStylesOf = themedStyles(\n  ({ colors, radii, sizing, spacing }: ResolvedTheme) =>\n    StyleSheet.create({\n      base: {\n        alignItems: 'center',\n        flexDirection: 'row',\n        gap: spacing.lg,\n        paddingHorizontal: spacing.lg,\n        paddingVertical: spacing.md,\n      },\n      // The navigation drawer page's row: the lists page's floor, and a pill\n      // held off each edge, since what marks the current row there is a shape\n      // as much as a colour. The row hands the same corners to its state layer\n      // and ripple, which clip to them.\n      drawer: {\n        borderRadius: radii.pill,\n        marginHorizontal: spacing.md,\n        minHeight: sizing.rowSm,\n      },\n      // The lists page's one-line item.\n      list: {\n        minHeight: sizing.rowSm,\n      },\n      // The headline and the lines beside it take what the slots leave and\n      // wrap past it, so a long one never runs under the trailing slot.\n      // `minWidth: 0` is for React Native Web, where a text in a row keeps\n      // CSS's automatic minimum, the width of its longest word.\n      main: {\n        flexGrow: 1,\n        flexShrink: 1,\n        gap: spacing.xxs,\n        minWidth: 0,\n      },\n      // The menus page's item.\n      menu: {\n        minHeight: sizing.rowXs,\n      },\n      muted: {\n        color: colors.onSurfaceVariant,\n      },\n      // The drawer page's current row, on secondary container rather than the\n      // lists page's primary one, which keeps it apart from a selected row in\n      // a list beside it.\n      selectedDrawer: {\n        backgroundColor: colors.secondaryContainer,\n      },\n      selectedList: {\n        backgroundColor: colors.primaryContainer,\n      },\n      selectedMenu: {\n        backgroundColor: colors.tertiaryContainer,\n      },\n      // The three-line item, the only one whose slots move: they are held\n      // level with the overline rather than centred on the three lines.\n      threeLine: {\n        alignItems: 'flex-start',\n        minHeight: sizing.rowLg,\n      },\n      twoLine: {\n        minHeight: sizing.rowMd,\n      },\n    }),\n)\n\nconst rowStyles = StyleSheet.create({\n  // The focus ring, drawn inside the row as web's is, so a container that\n  // clips its rows, such as a menu's surface, leaves the whole ring showing.\n  ring: {\n    outlineOffset: -2,\n  },\n  slot: {\n    alignItems: 'center',\n    flexShrink: 0,\n    justifyContent: 'center',\n  },\n})\n\n/**\n * The colour a row's headline, slots and feedback are drawn in: on surface,\n * the selected container's own on-colour, or on surface faded to the\n * disabled content opacity, which wins over the selected one.\n */\nfunction rowContentColor(\n  { colors, stateLayerOpacity }: ResolvedTheme,\n  {\n    isDisabled = false,\n    isSelected = false,\n    variant = 'list',\n  }: {\n    readonly isDisabled?: boolean\n    readonly isSelected?: boolean\n    readonly variant?: RowVariant\n  },\n): string {\n  if (isDisabled) {\n    return withOpacity(colors.onSurface, stateLayerOpacity.disabledContent)\n  }\n  if (isSelected) {\n    return colors[SELECTED_CONTENT[variant]]\n  }\n  return colors.onSurface\n}\n\nexport type { RowVariant }\n\nexport { rowContentColor, rowStyles, rowStylesOf }\n"],"mappings":";;;;AAuBA,MAAMK,mBAAmB;CACvBC,QAAQ;CACRC,MAAM;CACNC,MAAM;AACR;AAEA,MAAMG,cAAcR,cACjB,EAAES,QAAQC,OAAOC,QAAQC,cACxBf,WAAWgB,OAAO;CAChBC,MAAM;EACJC,YAAY;EACZC,eAAe;EACfC,KAAKL,QAAQM;EACbC,mBAAmBP,QAAQM;EAC3BE,iBAAiBR,QAAQS;CAC3B;CAKAlB,QAAQ;EACNmB,cAAcZ,MAAMa;EACpBC,kBAAkBZ,QAAQS;EAC1BI,WAAWd,OAAOe;CACpB;CAEAtB,MAAM,EACJqB,WAAWd,OAAOe,MACpB;CAKAC,MAAM;EACJC,UAAU;EACVC,YAAY;EACZZ,KAAKL,QAAQkB;EACbC,UAAU;CACZ;CAEA1B,MAAM,EACJoB,WAAWd,OAAOqB,MACpB;CACAC,OAAO,EACLC,OAAOzB,OAAO0B,iBAChB;CAIAC,gBAAgB,EACdC,iBAAiB5B,OAAO6B,mBAC1B;CACAC,cAAc,EACZF,iBAAiB5B,OAAO+B,iBAC1B;CACAC,cAAc,EACZJ,iBAAiB5B,OAAOiC,kBAC1B;CAGAC,WAAW;EACT5B,YAAY;EACZU,WAAWd,OAAOiC;CACpB;CACAC,SAAS,EACPpB,WAAWd,OAAOmC,MACpB;AACF,CAAC,CACL;AAEA,MAAMC,YAAYlD,WAAWgB,OAAO;CAGlCmC,MAAM,EACJC,eAAe,GACjB;CACAC,MAAM;EACJnC,YAAY;EACZc,YAAY;EACZsB,gBAAgB;CAClB;AACF,CAAC;;;;;;AAOD,SAASC,gBACP,EAAE3C,QAAQ4C,qBACV,EACEC,aAAa,OACbC,aAAa,OACbC,UAAU,UAMJ;CACR,IAAIF,YACF,OAAOvD,YAAYU,OAAOgD,WAAWJ,kBAAkBK,eAAe;CAExE,IAAIH,YACF,OAAO9C,OAAOP,iBAAiBsD;CAEjC,OAAO/C,OAAOgD;AAChB"}