@kanso-labs/react-native-kanso-ui 0.1.1 → 0.3.0

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","Ref","StyleProp","ViewProps","ViewStyle","AnimatedStyle","ToggleState","useId","Pressable","StyleSheet","View","Animated","Easing","useAnimatedStyle","useReducedMotion","withTiming","useToggleState","ResolvedTheme","ControlLabel","ControlMessage","describedBy","LAYER_SIZE","messageOf","controlStylesOf","CheckGlyph","IndeterminateGlyph","hitSlop","usePressFeedback","withOpacity","useTheme","composeStyles","CheckboxProps","Omit","children","defaultSelected","description","error","isDisabled","isIndeterminate","isReadOnly","isSelected","onChange","ref","style","Tone","BOX_SIZE","BOX_CORNER","BOX_RULE","LAYERS","Readonly","Record","hover","pressed","marked","unmarked","styles","create","box","borderRadius","borderWidth","height","width","glyph","left","position","top","Checkbox","t0","$","_c","ariaLabel","props","t1","t2","t3","undefined","theme","t4","state","messageId","colors","radii","interactive","tone","t5","t6","circle","t7","t8","t9","color","corners","disabled","disc","pressedColor","feedback","active","hovered","ring","t10","paintOf","paint","useBoxColors","Glyph","t11","t12","t13","handlers","t14","Symbol","for","t15","toggleOf","t16","t17","row","t18","t19","layer","t20","t21","t22","t23","t24","t25","t26","t27","stateLayerOpacity","onSurface","disabledContent","fill","primary","surface","onError","onPrimary","rule","onSurfaceVariant","toggle","motion","reduceMotion","timing","duration","durationShort2","easing","bezier","easingStandard","backgroundColor","borderColor","_c"],"sources":["../../../src/components/checkbox/index.tsx"],"sourcesContent":["import type { ReactNode, Ref } from 'react'\nimport type { StyleProp, ViewProps, ViewStyle } from 'react-native'\nimport type { AnimatedStyle } from 'react-native-reanimated'\nimport type { ToggleState } from 'react-stately/useToggleState'\n\nimport { useId } from 'react'\nimport { Pressable, StyleSheet, View } from 'react-native'\nimport Animated, {\n  Easing,\n  useAnimatedStyle,\n  useReducedMotion,\n  withTiming,\n} from 'react-native-reanimated'\nimport { useToggleState } from 'react-stately/useToggleState'\n\nimport type { ResolvedTheme } from '../../theme/scope'\n\nimport {\n  ControlLabel,\n  ControlMessage,\n  describedBy,\n  LAYER_SIZE,\n  messageOf,\n} from '../../control'\nimport { controlStylesOf } from '../../control/styles'\nimport { CheckGlyph, IndeterminateGlyph } from '../../glyphs'\nimport { hitSlop, usePressFeedback } from '../../press'\nimport { withOpacity } from '../../theme/color'\nimport { useTheme } from '../../theme/scope'\nimport { composeStyles } from '../../theme/styles'\n\n// The checkbox page, as kanso-ui's Checkbox draws it: an 18dp box with a 2dp\n// corner and an 18dp glyph, inside a 40dp state layer, with a 48dp target.\n// Unselected, the box is a 2dp rule in on surface variant that turns on\n// surface while hovered, pressed or focused; selected or indeterminate, it\n// fills with primary and the glyph takes on primary. The error pair is error\n// and on error, and disabled is on surface at the disabled opacity for the\n// rule or the fill, with the glyph in surface. The state layer is on surface\n// over an unselected box and primary over a selected one while hovered, and\n// the two swap once pressed.\n//\n// The box eases between its colours over the motion tokens' short duration\n// on the standard curve, as web's transition does, and at once for a reader\n// who asks the device for reduced motion. The glyph arrives with the fill.\n//\n// The row, the label and the line under it are src/control's, which Radio\n// and Switch draw through as well. The whole row is the `Pressable`, so a\n// press on the label toggles the box, as a press on web's label does. The\n// line under it is outside the row, as web's is outside its label.\n//\n// The corner is a literal: the page's 2dp is a step the shape scale does not\n// carry.\n\ntype CheckboxProps = Omit<ViewProps, 'children' | 'style'> & {\n  /**\n   * The label, beside the box. A checkbox that a row labels some other way\n   * leaves it out and passes `aria-label` instead.\n   */\n  readonly children?: ReactNode\n  /**\n   * Whether the checkbox starts selected, when it keeps its own state.\n   * @default false\n   */\n  readonly defaultSelected?: boolean\n  /**\n   * A hint under the label. Replaced by `error` when there is one, so the\n   * two never stack.\n   */\n  readonly description?: string\n  /**\n   * The problem with the current value, in words. Its presence is what puts\n   * the checkbox in its error state: the message and the error colours both\n   * follow from it.\n   */\n  readonly error?: string\n  /**\n   * Draws the checkbox disabled, and takes no presses.\n   * @default false\n   */\n  readonly isDisabled?: boolean\n  /**\n   * Draws the dash for a box that stands for a partly selected set, and\n   * reports the box as mixed to a screen reader. It is the call site's to\n   * clear: a press still changes `isSelected` underneath.\n   * @default false\n   */\n  readonly isIndeterminate?: boolean\n  /**\n   * Shows the state without letting a press change it.\n   * @default false\n   */\n  readonly isReadOnly?: boolean\n  /**\n   * Whether the checkbox is selected, for a call site holding the state\n   * itself with `onChange`.\n   */\n  readonly isSelected?: boolean\n  /** Called with the new state whenever a press changes it. */\n  readonly onChange?: (isSelected: boolean) => void\n  readonly ref?: Ref<View>\n  readonly style?: StyleProp<ViewStyle>\n}\n\ntype Tone = 'error' | 'marked' | 'unmarked'\n\n// The box's side, its rule and its corner, from the page. The glyph is the\n// box's size and sits over the whole of it, rule included.\nconst BOX_SIZE = 18\nconst BOX_CORNER = 2\nconst BOX_RULE = 2\n\n// The state layer's colour roles, hovered or focused and pressed. Error is\n// error throughout; otherwise the two swap once pressed.\nconst LAYERS: Readonly<\n  Record<\n    Tone,\n    {\n      readonly hover: keyof ResolvedTheme['colors']\n      readonly pressed: keyof ResolvedTheme['colors']\n    }\n  >\n> = {\n  error: { hover: 'error', pressed: 'error' },\n  marked: { hover: 'primary', pressed: 'onSurface' },\n  unmarked: { hover: 'onSurface', pressed: 'primary' },\n}\n\nconst styles = StyleSheet.create({\n  box: {\n    borderRadius: BOX_CORNER,\n    borderWidth: BOX_RULE,\n    height: BOX_SIZE,\n    width: BOX_SIZE,\n  },\n  // Over the box rather than inside it, since a box's children are laid out\n  // inside its rule and the glyph covers the rule as well.\n  glyph: {\n    left: (LAYER_SIZE - BOX_SIZE) / 2,\n    position: 'absolute',\n    top: (LAYER_SIZE - BOX_SIZE) / 2,\n  },\n})\n\n/**\n * A checkbox with its label, and optionally a description or an error under\n * it. Its state is React Stately's, as web's is: pass `isSelected` with\n * `onChange` to control it, or `defaultSelected` to let it keep its own.\n * `isIndeterminate` draws the dash for a box that stands for a partly\n * selected set.\n *\n * ```tsx\n * <Checkbox defaultSelected description=\"Supporting line\">\n *   Label\n * </Checkbox>\n * ```\n *\n * A screen reader hears it as a checkbox named by its label, checked,\n * unchecked or mixed, followed by the line under it. A press anywhere on the\n * box or the label toggles it, and the row takes presses over the 48dp target\n * the page asks of the box. `style`, `ref` and `testID` land on the view\n * holding the row and the line under it, which is the element a layout\n * positions.\n */\nfunction Checkbox({\n  'aria-label': ariaLabel,\n  children,\n  defaultSelected,\n  description,\n  error,\n  isDisabled = false,\n  isIndeterminate = false,\n  isReadOnly = false,\n  isSelected,\n  onChange,\n  style,\n  ...props\n}: CheckboxProps) {\n  const theme = useTheme()\n  const state = useToggleState({\n    defaultSelected,\n    isReadOnly,\n    isSelected,\n    onChange,\n  })\n  const messageId = useId()\n\n  const { colors, radii } = theme\n  const marked = state.isSelected || isIndeterminate\n  const interactive = !isDisabled && !isReadOnly\n  const tone: Tone =\n    error === undefined ? (marked ? 'marked' : 'unmarked') : 'error'\n\n  const feedback = usePressFeedback({\n    color: colors[LAYERS[tone].hover],\n    corners: { borderRadius: radii.circle },\n    disabled: !interactive,\n    disc: LAYER_SIZE,\n    pressedColor: colors[LAYERS[tone].pressed],\n  })\n  const active =\n    feedback.hovered || feedback.pressed || feedback.ring !== undefined\n  const paint = paintOf(theme, { active, isDisabled, marked, tone })\n  const box = useBoxColors(paint)\n  const Glyph = isIndeterminate\n    ? IndeterminateGlyph\n    : state.isSelected\n      ? CheckGlyph\n      : null\n\n  return (\n    <View {...props} style={style}>\n      <Pressable\n        aria-checked={isIndeterminate ? 'mixed' : state.isSelected}\n        aria-label={ariaLabel}\n        role=\"checkbox\"\n        {...describedBy(messageId, messageOf(description, error))}\n        {...feedback.handlers}\n        disabled={isDisabled}\n        hitSlop={hitSlop(LAYER_SIZE, LAYER_SIZE)}\n        onPress={toggleOf(state)}\n        style={controlStylesOf(theme).row}\n      >\n        <View\n          style={composeStyles<ViewStyle>(\n            controlStylesOf(theme).disc,\n            feedback.ring,\n          )}\n        >\n          {feedback.layer}\n          <Animated.View\n            style={composeStyles<AnimatedStyle<ViewStyle>>(styles.box, box)}\n          />\n          {Glyph === null ? null : (\n            <Glyph color={paint.glyph} size={BOX_SIZE} style={styles.glyph} />\n          )}\n        </View>\n        <ControlLabel isDisabled={isDisabled}>{children}</ControlLabel>\n      </Pressable>\n      <ControlMessage description={description} error={error} id={messageId} />\n    </View>\n  )\n}\n\n/**\n * What the box is painted in: its fill, its rule and the glyph's colour.\n * Where the page draws no fill or no rule it is the colour beside it made\n * clear rather than plain transparent black, so the box eases through its\n * own colour rather than through grey.\n */\nfunction paintOf(\n  { colors, stateLayerOpacity }: ResolvedTheme,\n  {\n    active,\n    isDisabled,\n    marked,\n    tone,\n  }: {\n    readonly active: boolean\n    readonly isDisabled: boolean\n    readonly marked: boolean\n    readonly tone: Tone\n  },\n) {\n  const disabled = withOpacity(\n    colors.onSurface,\n    stateLayerOpacity.disabledContent,\n  )\n\n  if (marked) {\n    const fill = isDisabled\n      ? disabled\n      : tone === 'error'\n        ? colors.error\n        : colors.primary\n    const glyph = isDisabled\n      ? colors.surface\n      : tone === 'error'\n        ? colors.onError\n        : colors.onPrimary\n\n    return { fill, glyph, rule: withOpacity(fill, 0) }\n  }\n\n  const rule = isDisabled\n    ? disabled\n    : tone === 'error'\n      ? colors.error\n      : active\n        ? colors.onSurface\n        : colors.onSurfaceVariant\n\n  return { fill: withOpacity(rule, 0), glyph: colors.onPrimary, rule }\n}\n\n// A press's toggle. Built by a call rather than declared in the component,\n// which is what react-perf's jsx-no-new-function-as-prop is after; the React\n// Compiler memoises the result on its input.\nfunction toggleOf(state: ToggleState) {\n  return () => {\n    state.toggle()\n  }\n}\n\n// The box's fill and rule, eased to as the state changes.\nfunction useBoxColors({ fill, rule }: { fill: string; rule: string }) {\n  const { motion } = useTheme()\n  const reduceMotion = useReducedMotion()\n  const timing = {\n    duration: motion.durationShort2,\n    easing: Easing.bezier(...motion.easingStandard),\n  }\n\n  return useAnimatedStyle(() => {\n    'worklet'\n    return {\n      backgroundColor: reduceMotion ? fill : withTiming(fill, timing),\n      borderColor: reduceMotion ? rule : withTiming(rule, timing),\n    }\n  })\n}\n\nexport { Checkbox }\nexport type { CheckboxProps }\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ComponentRef","ReactNode","Ref","StyleProp","ViewProps","ViewStyle","AnimatedStyle","ToggleState","useId","Pressable","StyleSheet","View","Animated","Easing","useAnimatedStyle","useReducedMotion","withTiming","useToggleState","ResolvedTheme","ControlLabel","ControlMessage","describedBy","LAYER_SIZE","messageOf","controlStylesOf","CheckGlyph","IndeterminateGlyph","hitSlop","usePressFeedback","withOpacity","useTheme","composeStyles","CheckboxProps","Omit","children","defaultSelected","description","error","isDisabled","isIndeterminate","isReadOnly","isSelected","onChange","ref","style","Tone","BOX_SIZE","BOX_CORNER","BOX_RULE","LAYERS","Readonly","Record","hover","pressed","marked","unmarked","styles","create","box","borderRadius","borderWidth","height","width","glyph","left","position","top","Checkbox","t0","$","_c","ariaLabel","props","t1","t2","t3","undefined","theme","t4","state","messageId","colors","radii","interactive","tone","t5","t6","circle","t7","t8","t9","color","corners","disabled","disc","pressedColor","feedback","active","hovered","ring","t10","paintOf","paint","useBoxColors","Glyph","t11","t12","t13","handlers","t14","Symbol","for","t15","toggleOf","t16","t17","row","t18","t19","layer","t20","t21","t22","t23","t24","t25","t26","t27","stateLayerOpacity","onSurface","disabledContent","fill","primary","surface","onError","onPrimary","rule","onSurfaceVariant","toggle","motion","reduceMotion","timing","duration","durationShort2","easing","bezier","easingStandard","backgroundColor","borderColor","_c"],"sources":["../../../src/components/checkbox/index.tsx"],"sourcesContent":["import type { ComponentRef, ReactNode, Ref } from 'react'\nimport type { StyleProp, ViewProps, ViewStyle } from 'react-native'\nimport type { AnimatedStyle } from 'react-native-reanimated'\nimport type { ToggleState } from 'react-stately/useToggleState'\n\nimport { useId } from 'react'\nimport { Pressable, StyleSheet, View } from 'react-native'\nimport Animated, {\n  Easing,\n  useAnimatedStyle,\n  useReducedMotion,\n  withTiming,\n} from 'react-native-reanimated'\nimport { useToggleState } from 'react-stately/useToggleState'\n\nimport type { ResolvedTheme } from '../../theme/scope'\n\nimport {\n  ControlLabel,\n  ControlMessage,\n  describedBy,\n  LAYER_SIZE,\n  messageOf,\n} from '../../control'\nimport { controlStylesOf } from '../../control/styles'\nimport { CheckGlyph, IndeterminateGlyph } from '../../glyphs'\nimport { hitSlop, usePressFeedback } from '../../press'\nimport { withOpacity } from '../../theme/color'\nimport { useTheme } from '../../theme/scope'\nimport { composeStyles } from '../../theme/styles'\n\n// The checkbox page, as kanso-ui's Checkbox draws it: an 18dp box with a 2dp\n// corner and an 18dp glyph, inside a 40dp state layer, with a 48dp target.\n// Unselected, the box is a 2dp rule in on surface variant that turns on\n// surface while hovered, pressed or focused; selected or indeterminate, it\n// fills with primary and the glyph takes on primary. The error pair is error\n// and on error, and disabled is on surface at the disabled opacity for the\n// rule or the fill, with the glyph in surface. The state layer is on surface\n// over an unselected box and primary over a selected one while hovered, and\n// the two swap once pressed.\n//\n// The box eases between its colours over the motion tokens' short duration\n// on the standard curve, as web's transition does, and at once for a reader\n// who asks the device for reduced motion. The glyph arrives with the fill.\n//\n// The row, the label and the line under it are src/control's, which Radio\n// and Switch draw through as well. The whole row is the `Pressable`, so a\n// press on the label toggles the box, as a press on web's label does. The\n// line under it is outside the row, as web's is outside its label.\n//\n// The corner is a literal: the page's 2dp is a step the shape scale does not\n// carry.\n\ntype CheckboxProps = Omit<ViewProps, 'children' | 'style'> & {\n  /**\n   * The label, beside the box. A checkbox that a row labels some other way\n   * leaves it out and passes `aria-label` instead.\n   */\n  readonly children?: ReactNode\n  /**\n   * Whether the checkbox starts selected, when it keeps its own state.\n   * @default false\n   */\n  readonly defaultSelected?: boolean\n  /**\n   * A hint under the label. Replaced by `error` when there is one, so the\n   * two never stack.\n   */\n  readonly description?: string\n  /**\n   * The problem with the current value, in words. Its presence is what puts\n   * the checkbox in its error state: the message and the error colours both\n   * follow from it.\n   */\n  readonly error?: string\n  /**\n   * Draws the checkbox disabled, and takes no presses.\n   * @default false\n   */\n  readonly isDisabled?: boolean\n  /**\n   * Draws the dash for a box that stands for a partly selected set, and\n   * reports the box as mixed to a screen reader. It is the call site's to\n   * clear: a press still changes `isSelected` underneath.\n   * @default false\n   */\n  readonly isIndeterminate?: boolean\n  /**\n   * Shows the state without letting a press change it.\n   * @default false\n   */\n  readonly isReadOnly?: boolean\n  /**\n   * Whether the checkbox is selected, for a call site holding the state\n   * itself with `onChange`.\n   */\n  readonly isSelected?: boolean\n  /** Called with the new state whenever a press changes it. */\n  readonly onChange?: (isSelected: boolean) => void\n  readonly ref?: Ref<ComponentRef<typeof View>>\n  readonly style?: StyleProp<ViewStyle>\n}\n\ntype Tone = 'error' | 'marked' | 'unmarked'\n\n// The box's side, its rule and its corner, from the page. The glyph is the\n// box's size and sits over the whole of it, rule included.\nconst BOX_SIZE = 18\nconst BOX_CORNER = 2\nconst BOX_RULE = 2\n\n// The state layer's colour roles, hovered or focused and pressed. Error is\n// error throughout; otherwise the two swap once pressed.\nconst LAYERS: Readonly<\n  Record<\n    Tone,\n    {\n      readonly hover: keyof ResolvedTheme['colors']\n      readonly pressed: keyof ResolvedTheme['colors']\n    }\n  >\n> = {\n  error: { hover: 'error', pressed: 'error' },\n  marked: { hover: 'primary', pressed: 'onSurface' },\n  unmarked: { hover: 'onSurface', pressed: 'primary' },\n}\n\nconst styles = StyleSheet.create({\n  box: {\n    borderRadius: BOX_CORNER,\n    borderWidth: BOX_RULE,\n    height: BOX_SIZE,\n    width: BOX_SIZE,\n  },\n  // Over the box rather than inside it, since a box's children are laid out\n  // inside its rule and the glyph covers the rule as well.\n  glyph: {\n    left: (LAYER_SIZE - BOX_SIZE) / 2,\n    position: 'absolute',\n    top: (LAYER_SIZE - BOX_SIZE) / 2,\n  },\n})\n\n/**\n * A checkbox with its label, and optionally a description or an error under\n * it. Its state is React Stately's, as web's is: pass `isSelected` with\n * `onChange` to control it, or `defaultSelected` to let it keep its own.\n * `isIndeterminate` draws the dash for a box that stands for a partly\n * selected set.\n *\n * ```tsx\n * <Checkbox defaultSelected description=\"Supporting line\">\n *   Label\n * </Checkbox>\n * ```\n *\n * A screen reader hears it as a checkbox named by its label, checked,\n * unchecked or mixed, followed by the line under it. A press anywhere on the\n * box or the label toggles it, and the row takes presses over the 48dp target\n * the page asks of the box. `style`, `ref` and `testID` land on the view\n * holding the row and the line under it, which is the element a layout\n * positions.\n */\nfunction Checkbox({\n  'aria-label': ariaLabel,\n  children,\n  defaultSelected,\n  description,\n  error,\n  isDisabled = false,\n  isIndeterminate = false,\n  isReadOnly = false,\n  isSelected,\n  onChange,\n  style,\n  ...props\n}: CheckboxProps) {\n  const theme = useTheme()\n  const state = useToggleState({\n    defaultSelected,\n    isReadOnly,\n    isSelected,\n    onChange,\n  })\n  const messageId = useId()\n\n  const { colors, radii } = theme\n  const marked = state.isSelected || isIndeterminate\n  const interactive = !isDisabled && !isReadOnly\n  const tone: Tone =\n    error === undefined ? (marked ? 'marked' : 'unmarked') : 'error'\n\n  const feedback = usePressFeedback({\n    color: colors[LAYERS[tone].hover],\n    corners: { borderRadius: radii.circle },\n    disabled: !interactive,\n    disc: LAYER_SIZE,\n    pressedColor: colors[LAYERS[tone].pressed],\n  })\n  const active =\n    feedback.hovered || feedback.pressed || feedback.ring !== undefined\n  const paint = paintOf(theme, { active, isDisabled, marked, tone })\n  const box = useBoxColors(paint)\n  const Glyph = isIndeterminate\n    ? IndeterminateGlyph\n    : state.isSelected\n      ? CheckGlyph\n      : null\n\n  return (\n    <View {...props} style={style}>\n      <Pressable\n        aria-checked={isIndeterminate ? 'mixed' : state.isSelected}\n        aria-label={ariaLabel}\n        role=\"checkbox\"\n        {...describedBy(messageId, messageOf(description, error))}\n        {...feedback.handlers}\n        disabled={isDisabled}\n        hitSlop={hitSlop(LAYER_SIZE, LAYER_SIZE)}\n        onPress={toggleOf(state)}\n        style={controlStylesOf(theme).row}\n      >\n        <View\n          style={composeStyles<ViewStyle>(\n            controlStylesOf(theme).disc,\n            feedback.ring,\n          )}\n        >\n          {feedback.layer}\n          <Animated.View\n            style={composeStyles<AnimatedStyle<ViewStyle>>(styles.box, box)}\n          />\n          {Glyph === null ? null : (\n            <Glyph color={paint.glyph} size={BOX_SIZE} style={styles.glyph} />\n          )}\n        </View>\n        <ControlLabel isDisabled={isDisabled}>{children}</ControlLabel>\n      </Pressable>\n      <ControlMessage description={description} error={error} id={messageId} />\n    </View>\n  )\n}\n\n/**\n * What the box is painted in: its fill, its rule and the glyph's colour.\n * Where the page draws no fill or no rule it is the colour beside it made\n * clear rather than plain transparent black, so the box eases through its\n * own colour rather than through grey.\n */\nfunction paintOf(\n  { colors, stateLayerOpacity }: ResolvedTheme,\n  {\n    active,\n    isDisabled,\n    marked,\n    tone,\n  }: {\n    readonly active: boolean\n    readonly isDisabled: boolean\n    readonly marked: boolean\n    readonly tone: Tone\n  },\n) {\n  const disabled = withOpacity(\n    colors.onSurface,\n    stateLayerOpacity.disabledContent,\n  )\n\n  if (marked) {\n    const fill = isDisabled\n      ? disabled\n      : tone === 'error'\n        ? colors.error\n        : colors.primary\n    const glyph = isDisabled\n      ? colors.surface\n      : tone === 'error'\n        ? colors.onError\n        : colors.onPrimary\n\n    return { fill, glyph, rule: withOpacity(fill, 0) }\n  }\n\n  const rule = isDisabled\n    ? disabled\n    : tone === 'error'\n      ? colors.error\n      : active\n        ? colors.onSurface\n        : colors.onSurfaceVariant\n\n  return { fill: withOpacity(rule, 0), glyph: colors.onPrimary, rule }\n}\n\n// A press's toggle. Built by a call rather than declared in the component,\n// which is what react-perf's jsx-no-new-function-as-prop is after; the React\n// Compiler memoises the result on its input.\nfunction toggleOf(state: ToggleState) {\n  return () => {\n    state.toggle()\n  }\n}\n\n// The box's fill and rule, eased to as the state changes.\nfunction useBoxColors({ fill, rule }: { fill: string; rule: string }) {\n  const { motion } = useTheme()\n  const reduceMotion = useReducedMotion()\n  const timing = {\n    duration: motion.durationShort2,\n    easing: Easing.bezier(...motion.easingStandard),\n  }\n\n  return useAnimatedStyle(() => {\n    'worklet'\n    return {\n      backgroundColor: reduceMotion ? fill : withTiming(fill, timing),\n      borderColor: reduceMotion ? rule : withTiming(rule, timing),\n    }\n  })\n}\n\nexport { Checkbox }\nexport type { CheckboxProps }\n"],"mappings":"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"}

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

@@ -1,5 +1,5 @@
 import { PressableProps, StyleProp, View, ViewStyle } from "react-native";
-import { ReactNode, Ref } from "react";
+import { ComponentRef, ReactNode, Ref } from "react";
 //#region src/components/chip/index.d.ts
 /** An assist or suggestion chip: an action, drawn as a plain button. */
 type ChipActionProps = ChipBaseProps & {
@@ -37,7 +37,7 @@ type ChipBaseProps = Omit<PressableProps, 'children' | 'disabled' | 'style'> & {
    * @default false
    */
   readonly isDisabled?: boolean;
-  readonly ref?: Ref<View>;
+  readonly ref?: Ref<ComponentRef<typeof View>>;
   readonly style?: StyleProp<ViewStyle>;
 };
 /** A filter chip: a two-state button, the default. */

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","Ref","PressableProps","StyleProp","View","ViewStyle","AnimatedStyle","useState","AnimatedPressable","toggleState","useButtonAction","ChipGlyph","ChipLabel","measureThen","paintOf","targetOf","useEasedColors","shadowsOf","stylesOf","TARGET_SIZE","usePressFeedback","useTheme","composeStyles","ChipActionProps","ChipBaseProps","defaultSelected","isSelected","onChange","variant","Omit","children","elevated","icon","isDisabled","ref","style","ChipFilterProps","ChipProps","ChipVariant","Chip","t0","$","_c","hitSlop","onBlur","onFocus","onHoverIn","onHoverOut","onLayout","onPress","onPressIn","onPressOut","props","t1","t2","t3","undefined","theme","width","setWidth","isToggle","t4","href","type","action","t5","t6","selected","assist","disabled","paint","eased","t7","radii","sm","borderRadius","t8","layer","color","corners","feedback","t9","t10","handlers","t11","t12","t13","t14","container","hovered","ring","pill","t15","glyph","t16","label","t17","_c"],"sources":["../../../src/components/chip/index.tsx"],"sourcesContent":["import type { ReactNode, Ref } from 'react'\nimport type { PressableProps, StyleProp, View, ViewStyle } from 'react-native'\nimport type { AnimatedStyle } from 'react-native-reanimated'\n\nimport { useState } from 'react'\n\nimport { AnimatedPressable, toggleState, useButtonAction } from '../../button'\nimport {\n  ChipGlyph,\n  ChipLabel,\n  measureThen,\n  paintOf,\n  targetOf,\n  useEasedColors,\n} from '../../chip'\nimport { shadowsOf, stylesOf } from '../../chip/styles'\nimport { TARGET_SIZE, usePressFeedback } from '../../press'\nimport { useTheme } from '../../theme/scope'\nimport { composeStyles } from '../../theme/styles'\n\n// Three of the chips page's four chips, as kanso-ui's Chip draws them. The\n// pill is src/chip's, shared with ChipGroup's chip as on web, which sets out\n// its measurements, colours, motion and target. `variant` picks the chip:\n//\n// - **A filter chip**, the default, is a toggle that reports its state as a\n//   toggle Button does, and takes the secondary container pair and the check\n//   once selected.\n// - **An assist or suggestion chip** is an action, so nothing is reported as\n//   selected and nothing ever is. The two differ in the label alone: on\n//   surface on an assist chip, on surface variant on a suggestion chip as on\n//   a filter one.\n\n/** An assist or suggestion chip: an action, drawn as a plain button. */\ntype ChipActionProps = ChipBaseProps & {\n  readonly defaultSelected?: never\n  readonly isSelected?: never\n  readonly onChange?: never\n  /**\n   * `assist` for an action the chip's context suggests, and `suggestion`\n   * for one the product generates. Either is an action rather than a\n   * selection, so neither is ever selected.\n   */\n  readonly variant: 'assist' | 'suggestion'\n}\n\ntype ChipBaseProps = Omit<PressableProps, 'children' | 'disabled' | 'style'> & {\n  /**\n   * The chip's label. Required: the page draws no chip without one, and a\n   * chip with none is an empty button to a screen reader.\n   */\n  readonly children: ReactNode\n  /**\n   * Raises the chip off the page on a container of its own, at the page's\n   * elevation 1, in place of the outline. A selected filter chip keeps the\n   * secondary container.\n   * @default false\n   */\n  readonly elevated?: boolean\n  /**\n   * An icon before the label, in the page's 18dp slot and the primary role,\n   * which the slot hands it through `useIconStyle()`. A filter chip's check\n   * takes its place while the chip is selected, so the chip keeps its width.\n   */\n  readonly icon?: ReactNode\n  /**\n   * Draws the chip disabled, and takes no presses.\n   * @default false\n   */\n  readonly isDisabled?: boolean\n  readonly ref?: Ref<View>\n  readonly style?: StyleProp<ViewStyle>\n}\n\n/** A filter chip: a two-state button, the default. */\ntype ChipFilterProps = ChipBaseProps & {\n  /**\n   * Whether the chip starts selected, when it keeps its own state.\n   * @default false\n   */\n  readonly defaultSelected?: boolean\n  /**\n   * Whether the chip is selected, when the call site holds the state. Pass\n   * it with `onChange`.\n   */\n  readonly isSelected?: boolean\n  /** Called with the new state when the chip is pressed, after `onPress`. */\n  readonly onChange?: (isSelected: boolean) => void\n  /**\n   * A filter chip, a two-state button.\n   * @default 'filter'\n   */\n  readonly variant?: 'filter'\n}\n\ntype ChipProps = ChipActionProps | ChipFilterProps\n\n/** Which of the chips page's chips a Chip is. */\ntype ChipVariant = 'assist' | 'filter' | 'suggestion'\n\n/**\n * A chip. By default a filter chip, which is a two-state button reporting\n * its state as a toggle Button does: pass `isSelected` with `onChange` to\n * control it, or `defaultSelected` to let it keep its own state.\n *\n * ```tsx\n * <Chip defaultSelected>Label</Chip>\n * ```\n *\n * `variant=\"assist\"` and `variant=\"suggestion\"` draw the page's two action\n * chips instead: plain buttons, pressed with `onPress`, never selected.\n *\n * A column stretches a chip across it, as it does any view; a row of chips is\n * a row that wraps. `style`, `ref` and `testID` land on the `Pressable`.\n */\nfunction Chip({\n  children,\n  defaultSelected,\n  elevated = false,\n  hitSlop,\n  icon,\n  isDisabled = false,\n  isSelected,\n  onBlur,\n  onChange,\n  onFocus,\n  onHoverIn,\n  onHoverOut,\n  onLayout,\n  onPress,\n  onPressIn,\n  onPressOut,\n  style,\n  variant = 'filter',\n  ...props\n}: ChipProps) {\n  const theme = useTheme()\n  // Until the chip is measured it takes no reach across, rather than one\n  // sized for a chip of no width.\n  const [width, setWidth] = useState(TARGET_SIZE)\n\n  const isToggle = variant === 'filter'\n  const action = useButtonAction({\n    defaultSelected,\n    href: undefined,\n    isSelected,\n    isToggle,\n    onChange,\n    onPress,\n    type: undefined,\n  })\n  const paint = paintOf(theme, {\n    assist: variant === 'assist',\n    disabled: isDisabled,\n    elevated,\n    selected: action.selected,\n  })\n  const eased = useEasedColors(paint)\n\n  const feedback = usePressFeedback({\n    color: paint.layer,\n    corners: { borderRadius: theme.radii.sm },\n    disabled: isDisabled,\n    onBlur,\n    onFocus,\n    onHoverIn,\n    onHoverOut,\n    onPressIn,\n    onPressOut,\n  })\n\n  return (\n    <AnimatedPressable\n      role=\"button\"\n      {...(isToggle ? toggleState(action.selected) : undefined)}\n      {...props}\n      {...feedback.handlers}\n      disabled={isDisabled}\n      hitSlop={hitSlop ?? targetOf(width, theme)}\n      onLayout={measureThen(setWidth, onLayout)}\n      onPress={action.onPress}\n      style={composeStyles<AnimatedStyle<ViewStyle>>(\n        stylesOf(theme).pill,\n        eased.container,\n        elevated && !isDisabled\n          ? shadowsOf(theme)[feedback.hovered ? 'elevation2' : 'elevation1']\n          : undefined,\n        feedback.ring,\n        style,\n      )}\n    >\n      {feedback.layer}\n      <ChipGlyph color={paint.glyph} icon={icon} selected={action.selected} />\n      <ChipLabel color={eased.label}>{children}</ChipLabel>\n    </AnimatedPressable>\n  )\n}\n\nexport { Chip }\nexport type { ChipActionProps, ChipFilterProps, ChipProps, ChipVariant }\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ComponentRef","ReactNode","Ref","PressableProps","StyleProp","View","ViewStyle","AnimatedStyle","useState","AnimatedPressable","toggleState","useButtonAction","ChipGlyph","ChipLabel","measureThen","paintOf","targetOf","useEasedColors","shadowsOf","stylesOf","TARGET_SIZE","usePressFeedback","useTheme","composeStyles","ChipActionProps","ChipBaseProps","defaultSelected","isSelected","onChange","variant","Omit","children","elevated","icon","isDisabled","ref","style","ChipFilterProps","ChipProps","ChipVariant","Chip","t0","$","_c","hitSlop","onBlur","onFocus","onHoverIn","onHoverOut","onLayout","onPress","onPressIn","onPressOut","props","t1","t2","t3","undefined","theme","width","setWidth","isToggle","t4","href","type","action","t5","t6","selected","assist","disabled","paint","eased","t7","radii","sm","borderRadius","t8","layer","color","corners","feedback","t9","t10","handlers","t11","t12","t13","t14","container","hovered","ring","pill","t15","glyph","t16","label","t17","_c"],"sources":["../../../src/components/chip/index.tsx"],"sourcesContent":["import type { ComponentRef, ReactNode, Ref } from 'react'\nimport type { PressableProps, StyleProp, View, ViewStyle } from 'react-native'\nimport type { AnimatedStyle } from 'react-native-reanimated'\n\nimport { useState } from 'react'\n\nimport { AnimatedPressable, toggleState, useButtonAction } from '../../button'\nimport {\n  ChipGlyph,\n  ChipLabel,\n  measureThen,\n  paintOf,\n  targetOf,\n  useEasedColors,\n} from '../../chip'\nimport { shadowsOf, stylesOf } from '../../chip/styles'\nimport { TARGET_SIZE, usePressFeedback } from '../../press'\nimport { useTheme } from '../../theme/scope'\nimport { composeStyles } from '../../theme/styles'\n\n// Three of the chips page's four chips, as kanso-ui's Chip draws them. The\n// pill is src/chip's, shared with ChipGroup's chip as on web, which sets out\n// its measurements, colours, motion and target. `variant` picks the chip:\n//\n// - **A filter chip**, the default, is a toggle that reports its state as a\n//   toggle Button does, and takes the secondary container pair and the check\n//   once selected.\n// - **An assist or suggestion chip** is an action, so nothing is reported as\n//   selected and nothing ever is. The two differ in the label alone: on\n//   surface on an assist chip, on surface variant on a suggestion chip as on\n//   a filter one.\n\n/** An assist or suggestion chip: an action, drawn as a plain button. */\ntype ChipActionProps = ChipBaseProps & {\n  readonly defaultSelected?: never\n  readonly isSelected?: never\n  readonly onChange?: never\n  /**\n   * `assist` for an action the chip's context suggests, and `suggestion`\n   * for one the product generates. Either is an action rather than a\n   * selection, so neither is ever selected.\n   */\n  readonly variant: 'assist' | 'suggestion'\n}\n\ntype ChipBaseProps = Omit<PressableProps, 'children' | 'disabled' | 'style'> & {\n  /**\n   * The chip's label. Required: the page draws no chip without one, and a\n   * chip with none is an empty button to a screen reader.\n   */\n  readonly children: ReactNode\n  /**\n   * Raises the chip off the page on a container of its own, at the page's\n   * elevation 1, in place of the outline. A selected filter chip keeps the\n   * secondary container.\n   * @default false\n   */\n  readonly elevated?: boolean\n  /**\n   * An icon before the label, in the page's 18dp slot and the primary role,\n   * which the slot hands it through `useIconStyle()`. A filter chip's check\n   * takes its place while the chip is selected, so the chip keeps its width.\n   */\n  readonly icon?: ReactNode\n  /**\n   * Draws the chip disabled, and takes no presses.\n   * @default false\n   */\n  readonly isDisabled?: boolean\n  readonly ref?: Ref<ComponentRef<typeof View>>\n  readonly style?: StyleProp<ViewStyle>\n}\n\n/** A filter chip: a two-state button, the default. */\ntype ChipFilterProps = ChipBaseProps & {\n  /**\n   * Whether the chip starts selected, when it keeps its own state.\n   * @default false\n   */\n  readonly defaultSelected?: boolean\n  /**\n   * Whether the chip is selected, when the call site holds the state. Pass\n   * it with `onChange`.\n   */\n  readonly isSelected?: boolean\n  /** Called with the new state when the chip is pressed, after `onPress`. */\n  readonly onChange?: (isSelected: boolean) => void\n  /**\n   * A filter chip, a two-state button.\n   * @default 'filter'\n   */\n  readonly variant?: 'filter'\n}\n\ntype ChipProps = ChipActionProps | ChipFilterProps\n\n/** Which of the chips page's chips a Chip is. */\ntype ChipVariant = 'assist' | 'filter' | 'suggestion'\n\n/**\n * A chip. By default a filter chip, which is a two-state button reporting\n * its state as a toggle Button does: pass `isSelected` with `onChange` to\n * control it, or `defaultSelected` to let it keep its own state.\n *\n * ```tsx\n * <Chip defaultSelected>Label</Chip>\n * ```\n *\n * `variant=\"assist\"` and `variant=\"suggestion\"` draw the page's two action\n * chips instead: plain buttons, pressed with `onPress`, never selected.\n *\n * A column stretches a chip across it, as it does any view; a row of chips is\n * a row that wraps. `style`, `ref` and `testID` land on the `Pressable`.\n */\nfunction Chip({\n  children,\n  defaultSelected,\n  elevated = false,\n  hitSlop,\n  icon,\n  isDisabled = false,\n  isSelected,\n  onBlur,\n  onChange,\n  onFocus,\n  onHoverIn,\n  onHoverOut,\n  onLayout,\n  onPress,\n  onPressIn,\n  onPressOut,\n  style,\n  variant = 'filter',\n  ...props\n}: ChipProps) {\n  const theme = useTheme()\n  // Until the chip is measured it takes no reach across, rather than one\n  // sized for a chip of no width.\n  const [width, setWidth] = useState(TARGET_SIZE)\n\n  const isToggle = variant === 'filter'\n  const action = useButtonAction({\n    defaultSelected,\n    href: undefined,\n    isSelected,\n    isToggle,\n    onChange,\n    onPress,\n    type: undefined,\n  })\n  const paint = paintOf(theme, {\n    assist: variant === 'assist',\n    disabled: isDisabled,\n    elevated,\n    selected: action.selected,\n  })\n  const eased = useEasedColors(paint)\n\n  const feedback = usePressFeedback({\n    color: paint.layer,\n    corners: { borderRadius: theme.radii.sm },\n    disabled: isDisabled,\n    onBlur,\n    onFocus,\n    onHoverIn,\n    onHoverOut,\n    onPressIn,\n    onPressOut,\n  })\n\n  return (\n    <AnimatedPressable\n      role=\"button\"\n      {...(isToggle ? toggleState(action.selected) : undefined)}\n      {...props}\n      {...feedback.handlers}\n      disabled={isDisabled}\n      hitSlop={hitSlop ?? targetOf(width, theme)}\n      onLayout={measureThen(setWidth, onLayout)}\n      onPress={action.onPress}\n      style={composeStyles<AnimatedStyle<ViewStyle>>(\n        stylesOf(theme).pill,\n        eased.container,\n        elevated && !isDisabled\n          ? shadowsOf(theme)[feedback.hovered ? 'elevation2' : 'elevation1']\n          : undefined,\n        feedback.ring,\n        style,\n      )}\n    >\n      {feedback.layer}\n      <ChipGlyph color={paint.glyph} icon={icon} selected={action.selected} />\n      <ChipLabel color={eased.label}>{children}</ChipLabel>\n    </AnimatedPressable>\n  )\n}\n\nexport { Chip }\nexport type { ChipActionProps, ChipFilterProps, ChipProps, ChipVariant }\n"],"mappings":"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"}

package/dist/components/chip-group/index.d.ts

@@ -1,5 +1,5 @@
 import { PressableProps, StyleProp, View, ViewProps, ViewStyle } from "react-native";
-import { ReactElement, ReactNode, Ref } from "react";
+import { ComponentRef, ReactElement, ReactNode, Ref } from "react";
 import { Key, Selection, SelectionMode } from "react-stately";
 //#region src/components/chip-group/index.d.ts
 type ChipGroupChipProps = Omit<PressableProps, 'children' | 'disabled' | 'id' | 'style'> & {
@@ -22,7 +22,7 @@ type ChipGroupChipProps = Omit<PressableProps, 'children' | 'disabled' | 'id' |
    * @default false
    */
   readonly isDisabled?: boolean;
-  readonly ref?: Ref<View>;
+  readonly ref?: Ref<ComponentRef<typeof View>>;
   readonly style?: StyleProp<ViewStyle>;
   /**
    * The chip's text, which names its close target. Read off `children` when
@@ -73,7 +73,7 @@ type ChipGroupProps<T extends object = object> = Omit<ViewProps, 'children' | 's
   readonly onRemove?: (keys: Set<Key>) => void;
   /** Called with the selected keys whenever a press changes them. */
   readonly onSelectionChange?: (keys: Selection) => void;
-  readonly ref?: Ref<View>;
+  readonly ref?: Ref<ComponentRef<typeof View>>;
   /**
    * What the close target on each chip is called, for a screen reader. The
    * chip's own text follows it, so this is the verb rather than the whole

package/dist/components/chip-group/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactElement","ReactNode","Ref","GestureResponderEvent","Insets","PressableProps","StyleProp","TextStyle","ViewProps","ViewStyle","AnimatedStyle","Key","Node","Selection","SelectionMode","ListProps","ListState","useId","useState","Text","NativeText","Platform","Pressable","StyleSheet","View","Animated","useListState","AnimatedPressable","toggleState","ChipGlyph","ChipLabel","measureThen","paintOf","targetOf","useEasedColors","GLYPH_SIZE","RULE_WIDTH","stylesOf","CloseGlyph","TARGET_SIZE","usePressFeedback","useTheme","composeStyles","themedStyles","useTypeRole","ChipGroupChipProps","Omit","children","icon","id","isDisabled","ref","style","textValue","ChipGroupProps","item","T","defaultSelectedKeys","Iterable","description","disabledKeys","disallowEmptySelection","error","items","label","onRemove","keys","Set","onSelectionChange","removeLabel","renderEmptyState","selectedKeys","selectionMode","REMOVE_REACH","bottom","left","right","top","styles","create","chip","maxWidth","layer","position","groupStylesOf","colors","radii","sizing","spacing","stateLayerOpacity","color","onSurfaceVariant","labelError","list","alignItems","flexDirection","flexWrap","gap","sm","minHeight","controlXs","message","messageError","messageLine","marginTop","xs","removable","paddingEnd","lg","remove","borderRadius","circle","end","height","justifyContent","width","removeHovered","opacity","hover","removeLayer","removePressed","pressed","root","rowGap","ChipGroup","t0","$","_c","props","t1","t2","undefined","theme","t3","t4","state","labelId","messageId","labelRole","messageRole","t5","own","invalid","t6","collection","nodes","t7","lineOf","t8","length","map","node","key","ChipGroupChip","_props","getCollectionNode","hasChildNodes","rendered","type","GroupChip","hitSlop","onBlur","onFocus","onHoverIn","onHoverOut","onLayout","onPress","onPressIn","onPressOut","_id","_isDisabled","t9","t10","t11","t12","_textValue","t13","setWidth","selectionManager","selectable","selected","isSelected","assist","disabled","elevated","paint","eased","corners","feedback","container","ring","pill","glyph","content","target","handlers","selectThen","removeThen","OS","RemoveButton","disableRipple","T0","T1","hovered","ringOf","backgroundColor","outlineColor","outlineOffset","outlineStyle","outlineWidth","event","select","Chip","_c","NativeText"],"sources":["../../../src/components/chip-group/index.tsx"],"sourcesContent":["import type { ReactElement, ReactNode, Ref } from 'react'\nimport type {\n  GestureResponderEvent,\n  Insets,\n  PressableProps,\n  StyleProp,\n  TextStyle,\n  ViewProps,\n  ViewStyle,\n} from 'react-native'\nimport type { AnimatedStyle } from 'react-native-reanimated'\nimport type { Key, Node, Selection, SelectionMode } from 'react-stately'\nimport type { ListProps, ListState } from 'react-stately/useListState'\n\nimport { useId, useState } from 'react'\nimport {\n  Text as NativeText,\n  Platform,\n  Pressable,\n  StyleSheet,\n  View,\n} from 'react-native'\nimport Animated from 'react-native-reanimated'\nimport { useListState } from 'react-stately/useListState'\n\nimport { AnimatedPressable, toggleState } from '../../button'\nimport {\n  ChipGlyph,\n  ChipLabel,\n  measureThen,\n  paintOf,\n  targetOf,\n  useEasedColors,\n} from '../../chip'\nimport { GLYPH_SIZE, RULE_WIDTH, stylesOf } from '../../chip/styles'\nimport { CloseGlyph } from '../../glyphs'\nimport { TARGET_SIZE, usePressFeedback } from '../../press'\nimport { useTheme } from '../../theme/scope'\nimport { composeStyles, themedStyles } from '../../theme/styles'\nimport { useTypeRole } from '../../typography/roles'\n\n// The chips page's filter and input chips as a set, as kanso-ui's ChipGroup\n// draws them: one or more chosen from a row that wraps, each one removable.\n// The pill is src/chip's, shared with Chip, so the two cannot drift; what is\n// here is the group around them.\n//\n// **Selection is the group's, not each chip's.** It is React Stately's\n// `useListState`, as web's is React Aria's, so `selectionMode`,\n// `selectedKeys`, `defaultSelectedKeys`, `onSelectionChange` and\n// `disabledKeys` behave as they do there. A press on a chip selects it, or\n// clears it if it was selected; in a group that selects one, a press on\n// another moves the selection there. A chip in a group that selects nothing is\n// not a button at all, since a press there would change nothing.\n//\n// **A chip can be removed.** Give the group `onRemove` and each chip draws the\n// page's trailing close glyph, an 18dp glyph in the label's colour, in a\n// target of its own so a press there removes rather than selects. It is a\n// sibling of the chip's own button rather than a child, laid over the pill's\n// end: VoiceOver reaches nothing inside a button, so a close target inside one\n// could never be focused. Its target is WCAG's 24dp, as on web, since the chip\n// around it is no spacing to lean on when the group selects. It draws its\n// hover and pressed layers in the label's colour, and on focus from a key a\n// 2dp ring in the same colour, 1dp out, as web's does: a second ring in the\n// focus role inside a chip would read as two focus treatments for one focus.\n//\n// The label, the line under the chips and the gaps between them are the\n// field chrome's, as RadioGroup draws them: the label in label large and on\n// surface variant, or error while the group has one; the chips 8dp apart and\n// wrapping, from the start edge, so from the right under a right-to-left\n// layout; and the line under them in body small, 4dp further down. The row\n// keeps a chip's height while it is empty, so removing the last chip leaves\n// what sits under the group where it was.\n//\n// Three departures from web. Arrow keys do not move between the chips, and\n// Backspace and Delete do not remove one: each chip and each close target is\n// a stop of its own for a hardware keyboard. The close target is named\n// `Remove` and the chip's text in English unless `removeLabel` says\n// otherwise, where web's follows the reader's locale. And the close glyph\n// takes the label's colour at once rather than easing with it, as the check\n// does.\n\ntype ChipGroupChipProps = Omit<\n  PressableProps,\n  'children' | 'disabled' | 'id' | 'style'\n> & {\n  /** The chip's label. */\n  readonly children: ReactNode\n  /**\n   * An icon before the label, in the page's 18dp slot and the primary role,\n   * which the slot hands it through `useIconStyle()`. The check takes its\n   * place while the chip is chosen, so the chip keeps its width.\n   */\n  readonly icon?: ReactNode\n  /**\n   * The key selection and removal report the chip by. Without one, a chip\n   * drawn from `items` takes its item's `id` or `key`.\n   */\n  readonly id?: Key\n  /**\n   * Draws the chip disabled, and takes no presses on it or on its close\n   * target, as a key in the group's `disabledKeys` does.\n   * @default false\n   */\n  readonly isDisabled?: boolean\n  readonly ref?: Ref<View>\n  readonly style?: StyleProp<ViewStyle>\n  /**\n   * The chip's text, which names its close target. Read off `children` when\n   * they are a plain string, so a chip whose label is an element passes it.\n   */\n  readonly textValue?: string\n}\n\ntype ChipGroupProps<T extends object = object> = Omit<\n  ViewProps,\n  'children' | 'style'\n> & {\n  /**\n   * The chips, each a `ChipGroup.Chip` with an `id` of its own. With\n   * `items`, a function from an item to its chip, called for each item in\n   * turn.\n   */\n  readonly children?: ((item: T) => ReactElement) | ReactNode\n  /** The keys selected at first, when the group keeps its own selection. */\n  readonly defaultSelectedKeys?: 'all' | Iterable<Key>\n  /**\n   * A hint under the group. Replaced by `error` when there is one, so the\n   * two never stack.\n   */\n  readonly description?: string\n  /** The keys of the chips drawn disabled, which take no presses. */\n  readonly disabledKeys?: Iterable<Key>\n  /**\n   * Keeps the last selected chip selected, so a press on it changes\n   * nothing.\n   * @default false\n   */\n  readonly disallowEmptySelection?: boolean\n  /**\n   * The problem with the current selection, in words. Its presence is what\n   * puts the group in its error state: the message and the label's colour\n   * both follow from it.\n   */\n  readonly error?: string\n  /** The entries `children` draws a chip for, when it is a function. */\n  readonly items?: Iterable<T>\n  /**\n   * What the group is for. Required rather than optional: a set of chips\n   * with no name is a row a screen reader cannot introduce.\n   */\n  readonly label: string\n  /**\n   * Called with the key of the chip whose close target was pressed. Given\n   * this, every chip draws one; the call site removes the chip from what it\n   * renders.\n   */\n  readonly onRemove?: (keys: Set<Key>) => void\n  /** Called with the selected keys whenever a press changes them. */\n  readonly onSelectionChange?: (keys: Selection) => void\n  readonly ref?: Ref<View>\n  /**\n   * What the close target on each chip is called, for a screen reader. The\n   * chip's own text follows it, so this is the verb rather than the whole\n   * phrase: \"Remove\" becomes \"Remove First item\".\n   * @default 'Remove'\n   */\n  readonly removeLabel?: string\n  /** What the row draws once it holds no chips. */\n  readonly renderEmptyState?: () => ReactNode\n  /**\n   * The selected keys, for a call site holding the selection itself with\n   * `onSelectionChange`.\n   */\n  readonly selectedKeys?: 'all' | Iterable<Key>\n  /**\n   * Whether a press selects a chip: one at a time, several, or none, in\n   * which case the chips are not buttons.\n   * @default 'none'\n   */\n  readonly selectionMode?: SelectionMode\n  readonly style?: StyleProp<ViewStyle>\n}\n\n// The close target reaches 3dp past its 18dp glyph on every side, which is\n// WCAG's 24dp.\nconst REMOVE_REACH: Insets = { bottom: 3, left: 3, right: 3, top: 3 }\n\nconst styles = StyleSheet.create({\n  // Holds the pill and the close target laid over it, and is never wider\n  // than the row, so the pill inside has a width to cut its label at.\n  chip: {\n    maxWidth: '100%',\n  },\n  layer: {\n    bottom: 0,\n    left: 0,\n    position: 'absolute',\n    right: 0,\n    top: 0,\n  },\n})\n\nconst groupStylesOf = themedStyles(\n  ({ colors, radii, sizing, spacing, stateLayerOpacity }) =>\n    StyleSheet.create({\n      label: {\n        color: colors.onSurfaceVariant,\n      },\n      labelError: {\n        color: colors.error,\n      },\n      // The chips, 8dp apart and wrapping rather than running off the end,\n      // since a set is read all at once. A chip's height while empty.\n      list: {\n        alignItems: 'center',\n        flexDirection: 'row',\n        flexWrap: 'wrap',\n        gap: spacing.sm,\n        minHeight: sizing.controlXs,\n      },\n      message: {\n        color: colors.onSurfaceVariant,\n      },\n      messageError: {\n        color: colors.error,\n      },\n      messageLine: {\n        marginTop: spacing.xs,\n      },\n      // A removable pill leaves room at its end for the close target, its 8dp\n      // gap before it and the 8dp the page pads after it.\n      removable: {\n        paddingEnd: spacing.lg + GLYPH_SIZE,\n      },\n      // The close target, over the pill's end, where the pill's own padding\n      // would end: the page pads 8dp on the side the glyph is on, and the\n      // label keeps the chip's 8dp gap before it.\n      remove: {\n        alignItems: 'center',\n        borderRadius: radii.circle,\n        end: RULE_WIDTH + spacing.lg - spacing.sm,\n        height: GLYPH_SIZE,\n        justifyContent: 'center',\n        marginTop: -GLYPH_SIZE / 2,\n        position: 'absolute',\n        top: '50%',\n        width: GLYPH_SIZE,\n      },\n      removeHovered: {\n        opacity: stateLayerOpacity.hover,\n      },\n      removeLayer: {\n        borderRadius: radii.circle,\n        opacity: 0,\n      },\n      removePressed: {\n        opacity: stateLayerOpacity.pressed,\n      },\n      root: {\n        flexDirection: 'column',\n        rowGap: spacing.xs,\n      },\n    }),\n)\n\n/**\n * A labelled set of chips, one or more of which can be chosen, each of which\n * can be removed. Selection is React Stately's: set `selectionMode` to\n * `single` or `multiple`, and pass `selectedKeys` with `onSelectionChange` to\n * control it, or `defaultSelectedKeys` to let the group keep its own.\n *\n * ```tsx\n * <ChipGroup label=\"Label\" onRemove={remove} selectionMode=\"multiple\">\n *   <ChipGroup.Chip id=\"first\">First item</ChipGroup.Chip>\n * </ChipGroup>\n * ```\n *\n * Give the group `onRemove` and each chip draws a close target. A chip that\n * toggles nothing else is Chip; this is for a set that shares a value.\n *\n * A screen reader hears a group named by its label, and each chip as a button\n * named by its label, selected or not. On the web the line under the group\n * describes it, as web's does; on iOS and Android it is read after the chips,\n * where it sits. `style`, `ref` and `testID` land on the group as a whole,\n * which is the element a layout positions.\n */\nfunction ChipGroup<T extends object = object>({\n  children,\n  defaultSelectedKeys,\n  description,\n  disabledKeys,\n  disallowEmptySelection,\n  error,\n  items,\n  label,\n  onRemove,\n  onSelectionChange,\n  removeLabel = 'Remove',\n  renderEmptyState,\n  selectedKeys,\n  selectionMode = 'none',\n  style,\n  ...props\n}: ChipGroupProps<T>) {\n  const theme = useTheme()\n  const state = useListState<T>({\n    // Each chip builds its own entry in the collection; see\n    // `ChipGroupChip.getCollectionNode`. The collection skips what is not an\n    // element, as a ReactNode may be, and asks any element for its entry.\n    // oxlint-disable-next-line typescript/no-unsafe-type-assertion -- see above\n    children: children as ListProps<T>['children'],\n    defaultSelectedKeys,\n    disabledKeys,\n    disallowEmptySelection,\n    items,\n    onSelectionChange,\n    selectedKeys,\n    selectionMode,\n  })\n  const labelId = useId()\n  const messageId = useId()\n  const labelRole = useTypeRole('labelLarge')\n  const messageRole = useTypeRole('bodySmall')\n\n  const own = groupStylesOf(theme)\n  const invalid = error !== undefined\n  const message = error ?? description\n  const nodes = [...state.collection]\n\n  return (\n    <View\n      {...props}\n      aria-labelledby={labelId}\n      role=\"group\"\n      {...lineOf(messageId, message)}\n      style={composeStyles<ViewStyle>(own.root, style)}\n    >\n      <NativeText\n        id={labelId}\n        style={composeStyles<TextStyle>(\n          labelRole,\n          own.label,\n          invalid ? own.labelError : undefined,\n        )}\n      >\n        {label}\n      </NativeText>\n      <View style={own.list}>\n        {nodes.length === 0\n          ? renderEmptyState?.()\n          : nodes.map((node) => (\n              <GroupChip\n                key={node.key}\n                node={node}\n                onRemove={onRemove}\n                removeLabel={removeLabel}\n                state={state}\n              />\n            ))}\n      </View>\n      {message === undefined ? null : (\n        <View style={own.messageLine}>\n          <NativeText\n            id={messageId}\n            style={composeStyles<TextStyle>(\n              messageRole,\n              own.message,\n              invalid ? own.messageError : undefined,\n            )}\n          >\n            {message}\n          </NativeText>\n        </View>\n      )}\n    </View>\n  )\n}\n\n/**\n * One chip of a `ChipGroup`, which draws it: the group builds its set from\n * these, so one renders nothing on its own. Give every chip an `id`, which is\n * the key selection and removal report it by.\n */\nfunction ChipGroupChip(_props: ChipGroupChipProps): null {\n  return null\n}\n\n// The entry the group's collection holds for a chip, as React Stately's own\n// `Item` gives one: keyed by the chip's `id`, and carrying the props the group\n// draws it from.\nChipGroupChip.getCollectionNode = function* getCollectionNode(\n  props: ChipGroupChipProps,\n) {\n  yield {\n    'aria-label': props['aria-label'],\n    hasChildNodes: false,\n    key: props.id,\n    props,\n    rendered: props.children,\n    textValue:\n      props.textValue ??\n      (typeof props.children === 'string' ? props.children : ''),\n    type: 'item',\n  }\n}\n\n/**\n * A chip as the group draws it, from its entry in the collection: the pill,\n * which is a button while the group selects, and the close target over its\n * end while the group removes.\n */\nfunction GroupChip<T>({\n  node,\n  onRemove,\n  removeLabel,\n  state,\n}: {\n  readonly node: Node<T>\n  readonly onRemove: ((keys: Set<Key>) => void) | undefined\n  readonly removeLabel: string\n  readonly state: ListState<T>\n}) {\n  const theme = useTheme()\n  // A node carries the props its chip was written with, which\n  // `getCollectionNode` puts there and React Stately types as `any`.\n  // oxlint-disable-next-line typescript/no-unsafe-assignment -- see above\n  const {\n    children,\n    hitSlop,\n    icon,\n    id: _id,\n    isDisabled: _isDisabled,\n    onBlur,\n    onFocus,\n    onHoverIn,\n    onHoverOut,\n    onLayout,\n    onPress,\n    onPressIn,\n    onPressOut,\n    style,\n    textValue: _textValue,\n    ...props\n  }: ChipGroupChipProps = node.props\n  // Until the chip is measured it takes no reach across, rather than one\n  // sized for a chip of no width.\n  const [width, setWidth] = useState(TARGET_SIZE)\n\n  const { selectionManager } = state\n  // The selection manager reads a chip's own `isDisabled` off its node, beside\n  // the group's `disabledKeys`, so it answers for both.\n  const isDisabled = selectionManager.isDisabled(node.key)\n  const selectable = selectionManager.selectionMode !== 'none'\n  const selected = selectionManager.isSelected(node.key)\n  const paint = paintOf(theme, {\n    assist: false,\n    disabled: isDisabled,\n    elevated: false,\n    selected,\n  })\n  const eased = useEasedColors(paint)\n\n  const feedback = usePressFeedback({\n    color: paint.layer,\n    corners: { borderRadius: theme.radii.sm },\n    disabled: isDisabled,\n    onBlur,\n    onFocus,\n    onHoverIn,\n    onHoverOut,\n    onPressIn,\n    onPressOut,\n  })\n\n  const pill = composeStyles<AnimatedStyle<ViewStyle>>(\n    stylesOf(theme).pill,\n    eased.container,\n    onRemove === undefined ? undefined : groupStylesOf(theme).removable,\n    feedback.ring,\n    style,\n  )\n  const content = (\n    <>\n      {selectable ? feedback.layer : null}\n      <ChipGlyph color={paint.glyph} icon={icon} selected={selected} />\n      <ChipLabel color={eased.label}>{children}</ChipLabel>\n    </>\n  )\n  const target = hitSlop ?? targetOf(width, theme)\n\n  return (\n    // The view holding the two takes the chip's target too: iOS and Android\n    // hand a touch to a view only once its parent has taken it.\n    <View hitSlop={selectable ? target : undefined} style={styles.chip}>\n      {selectable ? (\n        <AnimatedPressable\n          role=\"button\"\n          {...toggleState(selected)}\n          {...props}\n          {...feedback.handlers}\n          disabled={isDisabled}\n          hitSlop={target}\n          onLayout={measureThen(setWidth, onLayout)}\n          onPress={selectThen(state, node.key, onPress)}\n          style={pill}\n        >\n          {content}\n        </AnimatedPressable>\n      ) : (\n        // A press here changes nothing, so the chip is a view, and takes the\n        // props a view has; a press handler among them is never called.\n        <Animated.View\n          {...props}\n          aria-disabled={isDisabled}\n          onLayout={onLayout ?? undefined}\n          style={pill}\n        >\n          {content}\n        </Animated.View>\n      )}\n      {onRemove === undefined ? null : (\n        <RemoveButton\n          color={paint.content}\n          isDisabled={isDisabled}\n          label={\n            node.textValue === ''\n              ? removeLabel\n              : `${removeLabel} ${node.textValue}`\n          }\n          onPress={removeThen(onRemove, node.key)}\n        />\n      )}\n    </View>\n  )\n}\n\n/**\n * How the group is described by the line under it. On the web it points at\n * the line with `aria-describedby`, as web's group does. iOS and Android\n * focus the chips rather than the group, so there the line is left where a\n * screen reader reaches it in order, after the last chip.\n */\nfunction lineOf(id: string, message: string | undefined) {\n  return Platform.OS === 'web' && message !== undefined\n    ? { 'aria-describedby': id }\n    : undefined\n}\n\n/**\n * A chip's close target: the close glyph in the label's colour, with a hover\n * and a pressed layer of its own and a ring for focus from a key, as the\n * header sets out.\n */\nfunction RemoveButton({\n  color,\n  isDisabled,\n  label,\n  onPress,\n}: {\n  readonly color: string\n  readonly isDisabled: boolean\n  readonly label: string\n  readonly onPress: () => void\n}) {\n  const theme = useTheme()\n  const feedback = usePressFeedback({\n    color,\n    disabled: isDisabled,\n    disableRipple: true,\n  })\n  const own = groupStylesOf(theme)\n\n  return (\n    <Pressable\n      aria-label={label}\n      role=\"button\"\n      {...feedback.handlers}\n      disabled={isDisabled}\n      hitSlop={REMOVE_REACH}\n      onPress={onPress}\n      style={composeStyles<ViewStyle>(\n        own.remove,\n        feedback.ring === undefined ? undefined : ringOf(color),\n      )}\n    >\n      <View\n        style={composeStyles<ViewStyle>(\n          styles.layer,\n          own.removeLayer,\n          { backgroundColor: color },\n          feedback.hovered ? own.removeHovered : undefined,\n          feedback.pressed ? own.removePressed : undefined,\n        )}\n      />\n      <CloseGlyph color={color} size={GLYPH_SIZE} />\n    </Pressable>\n  )\n}\n\n// What a press on a chip's close target reports. Built by a call rather than\n// declared in the component, which is what react-perf's\n// jsx-no-new-function-as-prop is after; the React Compiler memoises the\n// result on its inputs.\nfunction removeThen(onRemove: (keys: Set<Key>) => void, key: Key) {\n  return () => {\n    onRemove(new Set([key]))\n  }\n}\n\n// The close target's ring: 2dp in the label's colour, 1dp out, as web's.\nfunction ringOf(color: string): ViewStyle {\n  return {\n    outlineColor: color,\n    outlineOffset: 1,\n    outlineStyle: 'solid',\n    outlineWidth: 2,\n  }\n}\n\n// A press on a chip: the call site's own `onPress`, then the selection,\n// which selects the chip, or clears it if it was selected and the group\n// allows that.\nfunction selectThen<T>(\n  state: ListState<T>,\n  key: Key,\n  onPress: ((event: GestureResponderEvent) => void) | null | undefined,\n) {\n  return (event: GestureResponderEvent) => {\n    onPress?.(event)\n    state.selectionManager.select(key)\n  }\n}\n\nChipGroup.Chip = ChipGroupChip\n\nexport { ChipGroup, ChipGroupChip }\nexport type { ChipGroupChipProps, ChipGroupProps }\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ComponentRef","ReactElement","ReactNode","Ref","GestureResponderEvent","Insets","PressableProps","StyleProp","TextStyle","ViewProps","ViewStyle","AnimatedStyle","Key","Node","Selection","SelectionMode","ListProps","ListState","useId","useState","Text","NativeText","Platform","Pressable","StyleSheet","View","Animated","useListState","AnimatedPressable","toggleState","ChipGlyph","ChipLabel","measureThen","paintOf","targetOf","useEasedColors","GLYPH_SIZE","RULE_WIDTH","stylesOf","CloseGlyph","TARGET_SIZE","usePressFeedback","useTheme","composeStyles","themedStyles","useTypeRole","ChipGroupChipProps","Omit","children","icon","id","isDisabled","ref","style","textValue","ChipGroupProps","item","T","defaultSelectedKeys","Iterable","description","disabledKeys","disallowEmptySelection","error","items","label","onRemove","keys","Set","onSelectionChange","removeLabel","renderEmptyState","selectedKeys","selectionMode","REMOVE_REACH","bottom","left","right","top","styles","create","chip","maxWidth","layer","position","groupStylesOf","colors","radii","sizing","spacing","stateLayerOpacity","color","onSurfaceVariant","labelError","list","alignItems","flexDirection","flexWrap","gap","sm","minHeight","controlXs","message","messageError","messageLine","marginTop","xs","removable","paddingEnd","lg","remove","borderRadius","circle","end","height","justifyContent","width","removeHovered","opacity","hover","removeLayer","removePressed","pressed","root","rowGap","ChipGroup","t0","$","_c","props","t1","t2","undefined","theme","t3","t4","state","labelId","messageId","labelRole","messageRole","t5","own","invalid","t6","collection","nodes","t7","lineOf","t8","length","map","node","key","ChipGroupChip","_props","getCollectionNode","hasChildNodes","rendered","type","GroupChip","hitSlop","onBlur","onFocus","onHoverIn","onHoverOut","onLayout","onPress","onPressIn","onPressOut","_id","_isDisabled","t9","t10","t11","t12","_textValue","t13","setWidth","selectionManager","selectable","selected","isSelected","assist","disabled","elevated","paint","eased","corners","feedback","container","ring","pill","glyph","content","target","handlers","selectThen","removeThen","OS","RemoveButton","disableRipple","T0","T1","hovered","ringOf","backgroundColor","outlineColor","outlineOffset","outlineStyle","outlineWidth","event","select","Chip","_c","NativeText"],"sources":["../../../src/components/chip-group/index.tsx"],"sourcesContent":["import type { ComponentRef, ReactElement, ReactNode, Ref } from 'react'\nimport type {\n  GestureResponderEvent,\n  Insets,\n  PressableProps,\n  StyleProp,\n  TextStyle,\n  ViewProps,\n  ViewStyle,\n} from 'react-native'\nimport type { AnimatedStyle } from 'react-native-reanimated'\nimport type { Key, Node, Selection, SelectionMode } from 'react-stately'\nimport type { ListProps, ListState } from 'react-stately/useListState'\n\nimport { useId, useState } from 'react'\nimport {\n  Text as NativeText,\n  Platform,\n  Pressable,\n  StyleSheet,\n  View,\n} from 'react-native'\nimport Animated from 'react-native-reanimated'\nimport { useListState } from 'react-stately/useListState'\n\nimport { AnimatedPressable, toggleState } from '../../button'\nimport {\n  ChipGlyph,\n  ChipLabel,\n  measureThen,\n  paintOf,\n  targetOf,\n  useEasedColors,\n} from '../../chip'\nimport { GLYPH_SIZE, RULE_WIDTH, stylesOf } from '../../chip/styles'\nimport { CloseGlyph } from '../../glyphs'\nimport { TARGET_SIZE, usePressFeedback } from '../../press'\nimport { useTheme } from '../../theme/scope'\nimport { composeStyles, themedStyles } from '../../theme/styles'\nimport { useTypeRole } from '../../typography/roles'\n\n// The chips page's filter and input chips as a set, as kanso-ui's ChipGroup\n// draws them: one or more chosen from a row that wraps, each one removable.\n// The pill is src/chip's, shared with Chip, so the two cannot drift; what is\n// here is the group around them.\n//\n// **Selection is the group's, not each chip's.** It is React Stately's\n// `useListState`, as web's is React Aria's, so `selectionMode`,\n// `selectedKeys`, `defaultSelectedKeys`, `onSelectionChange` and\n// `disabledKeys` behave as they do there. A press on a chip selects it, or\n// clears it if it was selected; in a group that selects one, a press on\n// another moves the selection there. A chip in a group that selects nothing is\n// not a button at all, since a press there would change nothing.\n//\n// **A chip can be removed.** Give the group `onRemove` and each chip draws the\n// page's trailing close glyph, an 18dp glyph in the label's colour, in a\n// target of its own so a press there removes rather than selects. It is a\n// sibling of the chip's own button rather than a child, laid over the pill's\n// end: VoiceOver reaches nothing inside a button, so a close target inside one\n// could never be focused. Its target is WCAG's 24dp, as on web, since the chip\n// around it is no spacing to lean on when the group selects. It draws its\n// hover and pressed layers in the label's colour, and on focus from a key a\n// 2dp ring in the same colour, 1dp out, as web's does: a second ring in the\n// focus role inside a chip would read as two focus treatments for one focus.\n//\n// The label, the line under the chips and the gaps between them are the\n// field chrome's, as RadioGroup draws them: the label in label large and on\n// surface variant, or error while the group has one; the chips 8dp apart and\n// wrapping, from the start edge, so from the right under a right-to-left\n// layout; and the line under them in body small, 4dp further down. The row\n// keeps a chip's height while it is empty, so removing the last chip leaves\n// what sits under the group where it was.\n//\n// Three departures from web. Arrow keys do not move between the chips, and\n// Backspace and Delete do not remove one: each chip and each close target is\n// a stop of its own for a hardware keyboard. The close target is named\n// `Remove` and the chip's text in English unless `removeLabel` says\n// otherwise, where web's follows the reader's locale. And the close glyph\n// takes the label's colour at once rather than easing with it, as the check\n// does.\n\ntype ChipGroupChipProps = Omit<\n  PressableProps,\n  'children' | 'disabled' | 'id' | 'style'\n> & {\n  /** The chip's label. */\n  readonly children: ReactNode\n  /**\n   * An icon before the label, in the page's 18dp slot and the primary role,\n   * which the slot hands it through `useIconStyle()`. The check takes its\n   * place while the chip is chosen, so the chip keeps its width.\n   */\n  readonly icon?: ReactNode\n  /**\n   * The key selection and removal report the chip by. Without one, a chip\n   * drawn from `items` takes its item's `id` or `key`.\n   */\n  readonly id?: Key\n  /**\n   * Draws the chip disabled, and takes no presses on it or on its close\n   * target, as a key in the group's `disabledKeys` does.\n   * @default false\n   */\n  readonly isDisabled?: boolean\n  readonly ref?: Ref<ComponentRef<typeof View>>\n  readonly style?: StyleProp<ViewStyle>\n  /**\n   * The chip's text, which names its close target. Read off `children` when\n   * they are a plain string, so a chip whose label is an element passes it.\n   */\n  readonly textValue?: string\n}\n\ntype ChipGroupProps<T extends object = object> = Omit<\n  ViewProps,\n  'children' | 'style'\n> & {\n  /**\n   * The chips, each a `ChipGroup.Chip` with an `id` of its own. With\n   * `items`, a function from an item to its chip, called for each item in\n   * turn.\n   */\n  readonly children?: ((item: T) => ReactElement) | ReactNode\n  /** The keys selected at first, when the group keeps its own selection. */\n  readonly defaultSelectedKeys?: 'all' | Iterable<Key>\n  /**\n   * A hint under the group. Replaced by `error` when there is one, so the\n   * two never stack.\n   */\n  readonly description?: string\n  /** The keys of the chips drawn disabled, which take no presses. */\n  readonly disabledKeys?: Iterable<Key>\n  /**\n   * Keeps the last selected chip selected, so a press on it changes\n   * nothing.\n   * @default false\n   */\n  readonly disallowEmptySelection?: boolean\n  /**\n   * The problem with the current selection, in words. Its presence is what\n   * puts the group in its error state: the message and the label's colour\n   * both follow from it.\n   */\n  readonly error?: string\n  /** The entries `children` draws a chip for, when it is a function. */\n  readonly items?: Iterable<T>\n  /**\n   * What the group is for. Required rather than optional: a set of chips\n   * with no name is a row a screen reader cannot introduce.\n   */\n  readonly label: string\n  /**\n   * Called with the key of the chip whose close target was pressed. Given\n   * this, every chip draws one; the call site removes the chip from what it\n   * renders.\n   */\n  readonly onRemove?: (keys: Set<Key>) => void\n  /** Called with the selected keys whenever a press changes them. */\n  readonly onSelectionChange?: (keys: Selection) => void\n  readonly ref?: Ref<ComponentRef<typeof View>>\n  /**\n   * What the close target on each chip is called, for a screen reader. The\n   * chip's own text follows it, so this is the verb rather than the whole\n   * phrase: \"Remove\" becomes \"Remove First item\".\n   * @default 'Remove'\n   */\n  readonly removeLabel?: string\n  /** What the row draws once it holds no chips. */\n  readonly renderEmptyState?: () => ReactNode\n  /**\n   * The selected keys, for a call site holding the selection itself with\n   * `onSelectionChange`.\n   */\n  readonly selectedKeys?: 'all' | Iterable<Key>\n  /**\n   * Whether a press selects a chip: one at a time, several, or none, in\n   * which case the chips are not buttons.\n   * @default 'none'\n   */\n  readonly selectionMode?: SelectionMode\n  readonly style?: StyleProp<ViewStyle>\n}\n\n// The close target reaches 3dp past its 18dp glyph on every side, which is\n// WCAG's 24dp.\nconst REMOVE_REACH: Insets = { bottom: 3, left: 3, right: 3, top: 3 }\n\nconst styles = StyleSheet.create({\n  // Holds the pill and the close target laid over it, and is never wider\n  // than the row, so the pill inside has a width to cut its label at.\n  chip: {\n    maxWidth: '100%',\n  },\n  layer: {\n    bottom: 0,\n    left: 0,\n    position: 'absolute',\n    right: 0,\n    top: 0,\n  },\n})\n\nconst groupStylesOf = themedStyles(\n  ({ colors, radii, sizing, spacing, stateLayerOpacity }) =>\n    StyleSheet.create({\n      label: {\n        color: colors.onSurfaceVariant,\n      },\n      labelError: {\n        color: colors.error,\n      },\n      // The chips, 8dp apart and wrapping rather than running off the end,\n      // since a set is read all at once. A chip's height while empty.\n      list: {\n        alignItems: 'center',\n        flexDirection: 'row',\n        flexWrap: 'wrap',\n        gap: spacing.sm,\n        minHeight: sizing.controlXs,\n      },\n      message: {\n        color: colors.onSurfaceVariant,\n      },\n      messageError: {\n        color: colors.error,\n      },\n      messageLine: {\n        marginTop: spacing.xs,\n      },\n      // A removable pill leaves room at its end for the close target, its 8dp\n      // gap before it and the 8dp the page pads after it.\n      removable: {\n        paddingEnd: spacing.lg + GLYPH_SIZE,\n      },\n      // The close target, over the pill's end, where the pill's own padding\n      // would end: the page pads 8dp on the side the glyph is on, and the\n      // label keeps the chip's 8dp gap before it.\n      remove: {\n        alignItems: 'center',\n        borderRadius: radii.circle,\n        end: RULE_WIDTH + spacing.lg - spacing.sm,\n        height: GLYPH_SIZE,\n        justifyContent: 'center',\n        marginTop: -GLYPH_SIZE / 2,\n        position: 'absolute',\n        top: '50%',\n        width: GLYPH_SIZE,\n      },\n      removeHovered: {\n        opacity: stateLayerOpacity.hover,\n      },\n      removeLayer: {\n        borderRadius: radii.circle,\n        opacity: 0,\n      },\n      removePressed: {\n        opacity: stateLayerOpacity.pressed,\n      },\n      root: {\n        flexDirection: 'column',\n        rowGap: spacing.xs,\n      },\n    }),\n)\n\n/**\n * A labelled set of chips, one or more of which can be chosen, each of which\n * can be removed. Selection is React Stately's: set `selectionMode` to\n * `single` or `multiple`, and pass `selectedKeys` with `onSelectionChange` to\n * control it, or `defaultSelectedKeys` to let the group keep its own.\n *\n * ```tsx\n * <ChipGroup label=\"Label\" onRemove={remove} selectionMode=\"multiple\">\n *   <ChipGroup.Chip id=\"first\">First item</ChipGroup.Chip>\n * </ChipGroup>\n * ```\n *\n * Give the group `onRemove` and each chip draws a close target. A chip that\n * toggles nothing else is Chip; this is for a set that shares a value.\n *\n * A screen reader hears a group named by its label, and each chip as a button\n * named by its label, selected or not. On the web the line under the group\n * describes it, as web's does; on iOS and Android it is read after the chips,\n * where it sits. `style`, `ref` and `testID` land on the group as a whole,\n * which is the element a layout positions.\n */\nfunction ChipGroup<T extends object = object>({\n  children,\n  defaultSelectedKeys,\n  description,\n  disabledKeys,\n  disallowEmptySelection,\n  error,\n  items,\n  label,\n  onRemove,\n  onSelectionChange,\n  removeLabel = 'Remove',\n  renderEmptyState,\n  selectedKeys,\n  selectionMode = 'none',\n  style,\n  ...props\n}: ChipGroupProps<T>) {\n  const theme = useTheme()\n  const state = useListState<T>({\n    // Each chip builds its own entry in the collection; see\n    // `ChipGroupChip.getCollectionNode`. The collection skips what is not an\n    // element, as a ReactNode may be, and asks any element for its entry.\n    // oxlint-disable-next-line typescript/no-unsafe-type-assertion -- see above\n    children: children as ListProps<T>['children'],\n    defaultSelectedKeys,\n    disabledKeys,\n    disallowEmptySelection,\n    items,\n    onSelectionChange,\n    selectedKeys,\n    selectionMode,\n  })\n  const labelId = useId()\n  const messageId = useId()\n  const labelRole = useTypeRole('labelLarge')\n  const messageRole = useTypeRole('bodySmall')\n\n  const own = groupStylesOf(theme)\n  const invalid = error !== undefined\n  const message = error ?? description\n  const nodes = [...state.collection]\n\n  return (\n    <View\n      {...props}\n      aria-labelledby={labelId}\n      role=\"group\"\n      {...lineOf(messageId, message)}\n      style={composeStyles<ViewStyle>(own.root, style)}\n    >\n      <NativeText\n        id={labelId}\n        style={composeStyles<TextStyle>(\n          labelRole,\n          own.label,\n          invalid ? own.labelError : undefined,\n        )}\n      >\n        {label}\n      </NativeText>\n      <View style={own.list}>\n        {nodes.length === 0\n          ? renderEmptyState?.()\n          : nodes.map((node) => (\n              <GroupChip\n                key={node.key}\n                node={node}\n                onRemove={onRemove}\n                removeLabel={removeLabel}\n                state={state}\n              />\n            ))}\n      </View>\n      {message === undefined ? null : (\n        <View style={own.messageLine}>\n          <NativeText\n            id={messageId}\n            style={composeStyles<TextStyle>(\n              messageRole,\n              own.message,\n              invalid ? own.messageError : undefined,\n            )}\n          >\n            {message}\n          </NativeText>\n        </View>\n      )}\n    </View>\n  )\n}\n\n/**\n * One chip of a `ChipGroup`, which draws it: the group builds its set from\n * these, so one renders nothing on its own. Give every chip an `id`, which is\n * the key selection and removal report it by.\n */\nfunction ChipGroupChip(_props: ChipGroupChipProps): null {\n  return null\n}\n\n// The entry the group's collection holds for a chip, as React Stately's own\n// `Item` gives one: keyed by the chip's `id`, and carrying the props the group\n// draws it from.\nChipGroupChip.getCollectionNode = function* getCollectionNode(\n  props: ChipGroupChipProps,\n) {\n  yield {\n    'aria-label': props['aria-label'],\n    hasChildNodes: false,\n    key: props.id,\n    props,\n    rendered: props.children,\n    textValue:\n      props.textValue ??\n      (typeof props.children === 'string' ? props.children : ''),\n    type: 'item',\n  }\n}\n\n/**\n * A chip as the group draws it, from its entry in the collection: the pill,\n * which is a button while the group selects, and the close target over its\n * end while the group removes.\n */\nfunction GroupChip<T>({\n  node,\n  onRemove,\n  removeLabel,\n  state,\n}: {\n  readonly node: Node<T>\n  readonly onRemove: ((keys: Set<Key>) => void) | undefined\n  readonly removeLabel: string\n  readonly state: ListState<T>\n}) {\n  const theme = useTheme()\n  // A node carries the props its chip was written with, which\n  // `getCollectionNode` puts there and React Stately types as `any`.\n  // oxlint-disable-next-line typescript/no-unsafe-assignment -- see above\n  const {\n    children,\n    hitSlop,\n    icon,\n    id: _id,\n    isDisabled: _isDisabled,\n    onBlur,\n    onFocus,\n    onHoverIn,\n    onHoverOut,\n    onLayout,\n    onPress,\n    onPressIn,\n    onPressOut,\n    style,\n    textValue: _textValue,\n    ...props\n  }: ChipGroupChipProps = node.props\n  // Until the chip is measured it takes no reach across, rather than one\n  // sized for a chip of no width.\n  const [width, setWidth] = useState(TARGET_SIZE)\n\n  const { selectionManager } = state\n  // The selection manager reads a chip's own `isDisabled` off its node, beside\n  // the group's `disabledKeys`, so it answers for both.\n  const isDisabled = selectionManager.isDisabled(node.key)\n  const selectable = selectionManager.selectionMode !== 'none'\n  const selected = selectionManager.isSelected(node.key)\n  const paint = paintOf(theme, {\n    assist: false,\n    disabled: isDisabled,\n    elevated: false,\n    selected,\n  })\n  const eased = useEasedColors(paint)\n\n  const feedback = usePressFeedback({\n    color: paint.layer,\n    corners: { borderRadius: theme.radii.sm },\n    disabled: isDisabled,\n    onBlur,\n    onFocus,\n    onHoverIn,\n    onHoverOut,\n    onPressIn,\n    onPressOut,\n  })\n\n  const pill = composeStyles<AnimatedStyle<ViewStyle>>(\n    stylesOf(theme).pill,\n    eased.container,\n    onRemove === undefined ? undefined : groupStylesOf(theme).removable,\n    feedback.ring,\n    style,\n  )\n  const content = (\n    <>\n      {selectable ? feedback.layer : null}\n      <ChipGlyph color={paint.glyph} icon={icon} selected={selected} />\n      <ChipLabel color={eased.label}>{children}</ChipLabel>\n    </>\n  )\n  const target = hitSlop ?? targetOf(width, theme)\n\n  return (\n    // The view holding the two takes the chip's target too: iOS and Android\n    // hand a touch to a view only once its parent has taken it.\n    <View hitSlop={selectable ? target : undefined} style={styles.chip}>\n      {selectable ? (\n        <AnimatedPressable\n          role=\"button\"\n          {...toggleState(selected)}\n          {...props}\n          {...feedback.handlers}\n          disabled={isDisabled}\n          hitSlop={target}\n          onLayout={measureThen(setWidth, onLayout)}\n          onPress={selectThen(state, node.key, onPress)}\n          style={pill}\n        >\n          {content}\n        </AnimatedPressable>\n      ) : (\n        // A press here changes nothing, so the chip is a view, and takes the\n        // props a view has; a press handler among them is never called.\n        <Animated.View\n          {...props}\n          aria-disabled={isDisabled}\n          onLayout={onLayout ?? undefined}\n          style={pill}\n        >\n          {content}\n        </Animated.View>\n      )}\n      {onRemove === undefined ? null : (\n        <RemoveButton\n          color={paint.content}\n          isDisabled={isDisabled}\n          label={\n            node.textValue === ''\n              ? removeLabel\n              : `${removeLabel} ${node.textValue}`\n          }\n          onPress={removeThen(onRemove, node.key)}\n        />\n      )}\n    </View>\n  )\n}\n\n/**\n * How the group is described by the line under it. On the web it points at\n * the line with `aria-describedby`, as web's group does. iOS and Android\n * focus the chips rather than the group, so there the line is left where a\n * screen reader reaches it in order, after the last chip.\n */\nfunction lineOf(id: string, message: string | undefined) {\n  return Platform.OS === 'web' && message !== undefined\n    ? { 'aria-describedby': id }\n    : undefined\n}\n\n/**\n * A chip's close target: the close glyph in the label's colour, with a hover\n * and a pressed layer of its own and a ring for focus from a key, as the\n * header sets out.\n */\nfunction RemoveButton({\n  color,\n  isDisabled,\n  label,\n  onPress,\n}: {\n  readonly color: string\n  readonly isDisabled: boolean\n  readonly label: string\n  readonly onPress: () => void\n}) {\n  const theme = useTheme()\n  const feedback = usePressFeedback({\n    color,\n    disabled: isDisabled,\n    disableRipple: true,\n  })\n  const own = groupStylesOf(theme)\n\n  return (\n    <Pressable\n      aria-label={label}\n      role=\"button\"\n      {...feedback.handlers}\n      disabled={isDisabled}\n      hitSlop={REMOVE_REACH}\n      onPress={onPress}\n      style={composeStyles<ViewStyle>(\n        own.remove,\n        feedback.ring === undefined ? undefined : ringOf(color),\n      )}\n    >\n      <View\n        style={composeStyles<ViewStyle>(\n          styles.layer,\n          own.removeLayer,\n          { backgroundColor: color },\n          feedback.hovered ? own.removeHovered : undefined,\n          feedback.pressed ? own.removePressed : undefined,\n        )}\n      />\n      <CloseGlyph color={color} size={GLYPH_SIZE} />\n    </Pressable>\n  )\n}\n\n// What a press on a chip's close target reports. Built by a call rather than\n// declared in the component, which is what react-perf's\n// jsx-no-new-function-as-prop is after; the React Compiler memoises the\n// result on its inputs.\nfunction removeThen(onRemove: (keys: Set<Key>) => void, key: Key) {\n  return () => {\n    onRemove(new Set([key]))\n  }\n}\n\n// The close target's ring: 2dp in the label's colour, 1dp out, as web's.\nfunction ringOf(color: string): ViewStyle {\n  return {\n    outlineColor: color,\n    outlineOffset: 1,\n    outlineStyle: 'solid',\n    outlineWidth: 2,\n  }\n}\n\n// A press on a chip: the call site's own `onPress`, then the selection,\n// which selects the chip, or clears it if it was selected and the group\n// allows that.\nfunction selectThen<T>(\n  state: ListState<T>,\n  key: Key,\n  onPress: ((event: GestureResponderEvent) => void) | null | undefined,\n) {\n  return (event: GestureResponderEvent) => {\n    onPress?.(event)\n    state.selectionManager.select(key)\n  }\n}\n\nChipGroup.Chip = ChipGroupChip\n\nexport { ChipGroup, ChipGroupChip }\nexport type { ChipGroupChipProps, ChipGroupProps }\n"],"mappings":"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"}

package/dist/components/copy-field/index.d.ts

@@ -1,5 +1,5 @@
 import { View, ViewProps } from "react-native";
-import { Ref } from "react";
+import { ComponentRef, Ref } from "react";
 //#region src/components/copy-field/index.d.ts
 type CopyFieldProps = Omit<ViewProps, 'children'> & {
   /**
@@ -36,7 +36,7 @@ type CopyFieldProps = Omit<ViewProps, 'children'> & {
    * that wants to say more, in a snackbar say.
    */
   readonly onCopyFailed?: (error: unknown) => void;
-  readonly ref?: Ref<View>;
+  readonly ref?: Ref<ComponentRef<typeof View>>;
   /** The text shown, and the text copied. */
   readonly value: string;
 };

package/dist/components/copy-field/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["Ref","TextStyle","ViewProps","ViewStyle","useEffect","useRef","useState","AccessibilityInfo","Text","NativeText","Platform","StyleSheet","View","useClipboardAvailable","writeClipboard","useTheme","composeStyles","themedStyles","useFontFamily","useTypeRole","Button","COPIED_RESET_MS","RESERVE","accessibilityElementsHidden","importantForAccessibility","ATOMIC","const","styles","create","announcement","height","opacity","overflow","pointerEvents","position","width","button","alignSelf","reserve","alignItems","stylesOf","colors","radii","spacing","paddingHorizontal","md","root","backgroundColor","surface","borderColor","outline","borderRadius","sm","borderWidth","flexDirection","gap","paddingVertical","xs","value","flex","minWidth","valueText","color","onSurface","fontVariant","userSelect","writingDirection","CopyFieldProps","Omit","copiedLabel","copyLabel","label","onCopied","onCopyFailed","error","ref","CopyField","t0","$","_c","props","style","t1","t2","undefined","theme","themed","bodySmall","labelLarge","mono","typography","fontFamilyMono","available","t3","confirmation","onPress","useCopy","copied","shown","t4","t5","OS","fontFamily","reportCopied","thrown","setTimeout","copy","setCopy","timer","Symbol","for","clearTimeout","current","count","text","announceForAccessibility","confirm","then","t6","_c","NativeText"],"sources":["../../../src/components/copy-field/index.tsx"],"sourcesContent":["import type { Ref } from 'react'\nimport type { TextStyle, ViewProps, ViewStyle } from 'react-native'\n\nimport { useEffect, useRef, useState } from 'react'\nimport {\n  AccessibilityInfo,\n  Text as NativeText,\n  Platform,\n  StyleSheet,\n  View,\n} from 'react-native'\n\nimport { useClipboardAvailable, writeClipboard } from '../../clipboard'\nimport { useTheme } from '../../theme/scope'\nimport { composeStyles, themedStyles } from '../../theme/styles'\nimport { useFontFamily } from '../../typography/fonts'\nimport { useTypeRole } from '../../typography/roles'\nimport { Button } from '../button'\n\n// No Material Design page draws a read-only value with a copy control, so it\n// follows the outlined text field, as kanso-ui's CopyField does: the 1dp rule\n// in the outline role, the surface behind it, and the control at its end. The\n// value is body small beside a 32dp text button, so the box is shorter than\n// the field's 56, which suits a value that is read rather than edited, and\n// its corner is the shape scale's small step for the same reason. The box has\n// no height of its own: it is the button's, or the value's once that is\n// taller, so a larger OS text size grows it rather than running the value out\n// of it.\n//\n// The copy goes through expo-clipboard, an optional peer. In an app without\n// it the field shows the value and no button, since a button that could not\n// copy would be one that lies about what it does.\n\n// How long the confirmation stands before the button offers the copy again,\n// as on web: long enough to be read without leaving the button lying about\n// what it will do.\nconst COPIED_RESET_MS = 2000\n\n// The two labels the button is as wide as: laid out at no height, and kept\n// from a screen reader.\nconst RESERVE: ViewProps = {\n  accessibilityElementsHidden: true,\n  'aria-hidden': true,\n  importantForAccessibility: 'no-hide-descendants',\n}\n\n// What a web-only atomic live region adds, so a confirmation is read whole.\n// React Native's types carry no `aria-atomic`, which React Native Web takes.\nconst ATOMIC = { 'aria-atomic': true } as const\n\nconst styles = StyleSheet.create({\n  // Under React Native Web the confirmation is said through a live region, as\n  // web's `<output>` says it, which is drawn nowhere and still read.\n  announcement: {\n    height: 1,\n    opacity: 0,\n    overflow: 'hidden',\n    pointerEvents: 'none',\n    position: 'absolute',\n    width: 1,\n  },\n  // The button stretches to the width the column takes, which is the wider of\n  // the two labels below it, so a copy swaps the label rather than resizing\n  // the button. The button sits at the end of the row, so a width that grew\n  // on press would move it under the finger that had just pressed it.\n  button: {\n    alignSelf: 'stretch',\n  },\n  // Holds both labels for their width alone.\n  reserve: {\n    alignItems: 'center',\n    height: 0,\n    overflow: 'hidden',\n  },\n})\n\nconst stylesOf = themedStyles(({ colors, radii, spacing }) =>\n  StyleSheet.create({\n    // The button's own label padding at `xs`, so the reserve is exactly as\n    // wide as the button drawing the wider label.\n    reserve: {\n      paddingHorizontal: spacing.md,\n    },\n    root: {\n      alignItems: 'center',\n      backgroundColor: colors.surface,\n      borderColor: colors.outline,\n      borderRadius: radii.sm,\n      borderWidth: 1,\n      flexDirection: 'row',\n      gap: spacing.sm,\n      paddingHorizontal: spacing.md,\n      paddingVertical: spacing.xs,\n    },\n    // The column the value sits in, beside the button. `minWidth: 0` lets a\n    // long unbroken value wrap rather than push the button out of the box.\n    // The value keeps to the column's start, which is its left, or its right\n    // in a right-to-left layout.\n    value: {\n      alignItems: 'flex-start',\n      flex: 1,\n      minWidth: 0,\n    },\n    // The value in the mono face at the body small role, where a `0` and an\n    // `O`, an `l`, a `1` and an `I` have to be told apart, with ligatures off\n    // so what shows is each character that is copied. It reads left to right\n    // whatever the layout's direction, since it is a literal: a path, a flag\n    // or a command whose leading `/`, `--` or `$` would otherwise move to the\n    // other end. iOS and React Native Web take `writingDirection`; Android\n    // takes the direction of the value's first letter, which is the value's\n    // own. Under React Native Web one click selects the whole value, which is\n    // what someone copying it by hand wants, and on iOS and Android a long\n    // press offers the platform's own copy.\n    valueText: {\n      color: colors.onSurface,\n      fontVariant: [\n        'no-common-ligatures',\n        'no-contextual',\n        'no-discretionary-ligatures',\n        'no-historical-ligatures',\n      ],\n      userSelect: 'all',\n      writingDirection: 'ltr',\n    },\n  }),\n)\n\ntype CopyFieldProps = Omit<ViewProps, 'children'> & {\n  /**\n   * What the button says once the value has been copied, and what is\n   * announced. It reverts to `copyLabel` on its own after a couple of\n   * seconds.\n   * @default 'Copied'\n   */\n  readonly copiedLabel?: string\n  /**\n   * What the button says at rest.\n   * @default 'Copy'\n   */\n  readonly copyLabel?: string\n  /**\n   * What the value is, such as \"Repository URL\" or \"Access token\", for a\n   * screen with more than one field. It names the field as a group and joins\n   * the button's name, so a screen reader hears \"Copy Repository URL\" rather\n   * than one \"Copy\" after another; it is not shown. The value itself stays\n   * out of the button's name, since a token would be read aloud. Left out,\n   * the button is \"Copy\" alone.\n   */\n  readonly label?: string\n  /**\n   * Called with the value after it reaches the clipboard, never before.\n   * Named as web's is, where the root's own `onCopy` is taken.\n   */\n  readonly onCopied?: (value: string) => void\n  /**\n   * Called with the error when the value did not reach the clipboard: under\n   * React Native Web, where the browser refuses the write, and anywhere\n   * expo-clipboard turns out not to be installed after a press. Nothing is\n   * announced and the button keeps offering the copy, so this is for an app\n   * that wants to say more, in a snackbar say.\n   */\n  readonly onCopyFailed?: (error: unknown) => void\n  readonly ref?: Ref<View>\n  /** The text shown, and the text copied. */\n  readonly value: string\n}\n\n/**\n * A value to be read and taken away, such as a repository URL, a token or a\n * command. It shows the value in the mono face and copies it on request,\n * confirming on the button itself and to a screen reader.\n *\n * ```tsx\n * <CopyField label=\"Access token\" value=\"first.second.third\" />\n * ```\n *\n * The copy goes through expo-clipboard, which an app installs alongside the\n * library. Without it the field shows the value and no button.\n *\n * `style`, `ref` and `testID` land on the box.\n */\nfunction CopyField({\n  copiedLabel = 'Copied',\n  copyLabel = 'Copy',\n  label,\n  onCopied,\n  onCopyFailed,\n  style,\n  value,\n  ...props\n}: CopyFieldProps) {\n  const theme = useTheme()\n  const themed = stylesOf(theme)\n  const bodySmall = useTypeRole('bodySmall')\n  const labelLarge = useTypeRole('labelLarge')\n  const mono = useFontFamily(theme.typography.fontFamilyMono)\n  const available = useClipboardAvailable()\n  const { confirmation, onPress } = useCopy({\n    copiedLabel,\n    onCopied,\n    onCopyFailed,\n    value,\n  })\n  const copied = confirmation !== undefined\n  const shown = copied ? copiedLabel : copyLabel\n\n  return (\n    <View\n      {...(label === undefined ? undefined : { 'aria-label': label })}\n      role={label === undefined ? undefined : 'group'}\n      {...props}\n      style={composeStyles<ViewStyle>(themed.root, style)}\n    >\n      <View style={themed.value}>\n        <NativeText\n          style={composeStyles<TextStyle>(bodySmall, themed.valueText, {\n            fontFamily: mono,\n          })}\n        >\n          {value}\n        </NativeText>\n      </View>\n      {available ? (\n        <View>\n          <Button\n            aria-label={label === undefined ? undefined : `${shown} ${label}`}\n            onPress={onPress}\n            size=\"xs\"\n            style={styles.button}\n            variant=\"text\"\n          >\n            {shown}\n          </Button>\n          <View\n            {...RESERVE}\n            style={composeStyles<ViewStyle>(styles.reserve, themed.reserve)}\n          >\n            <NativeText style={labelLarge}>{copyLabel}</NativeText>\n            <NativeText style={labelLarge}>{copiedLabel}</NativeText>\n          </View>\n        </View>\n      ) : null}\n      {Platform.OS === 'web' ? (\n        <View aria-live=\"polite\" {...ATOMIC} style={styles.announcement}>\n          {copied ? (\n            <NativeText key={confirmation}>{copiedLabel}</NativeText>\n          ) : null}\n        </View>\n      ) : null}\n    </View>\n  )\n}\n\n/**\n * Hands the call site the value it copied. What its handler throws is raised\n * on its own, outside the copy, as a throw from a press handler is, so it\n * reaches the app's error reporting rather than rejecting a promise nothing\n * awaits, which React Native reports nowhere in a release build.\n */\nfunction reportCopied(\n  onCopied: ((value: string) => void) | undefined,\n  value: string,\n) {\n  if (onCopied === undefined) {\n    return\n  }\n\n  try {\n    onCopied(value)\n  } catch (thrown) {\n    setTimeout(() => {\n      throw thrown\n    }, 0)\n  }\n}\n\n/**\n * Copies the value on press and holds the confirmation for the dwell.\n * `confirmation` counts the copies while the button says Copied, and is\n * `undefined` otherwise.\n */\nfunction useCopy({\n  copiedLabel,\n  onCopied,\n  onCopyFailed,\n  value,\n}: {\n  readonly copiedLabel: string\n  readonly onCopied: ((value: string) => void) | undefined\n  readonly onCopyFailed: ((error: unknown) => void) | undefined\n  readonly value: string\n}) {\n  // What the last copy put on the clipboard, and how many copies there have\n  // been. The confirmation is that text still being the value shown, so a\n  // value that changes inside the dwell, a token regenerated say, takes the\n  // label back to the copy at once rather than confirming a copy of something\n  // else. The count gives each confirmation its own node in the live region,\n  // so a second copy inside the dwell is said again.\n  const [copy, setCopy] = useState<null | {\n    readonly count: number\n    readonly text: string\n  }>(null)\n  const timer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined)\n\n  // Without this, a field unmounted inside the dwell leaves a timer holding a\n  // state update for a tree that is gone.\n  useEffect(\n    () => () => {\n      clearTimeout(timer.current)\n    },\n    [],\n  )\n\n  // The field's own state first, the dwell and the announcement included, and\n  // the call site's handler after it, so a handler that throws cannot leave\n  // the button on Copied for good.\n  const confirm = () => {\n    clearTimeout(timer.current)\n    timer.current = setTimeout(() => {\n      setCopy(null)\n    }, COPIED_RESET_MS)\n    setCopy((current) => ({\n      count: (current?.count ?? 0) + 1,\n      text: value,\n    }))\n\n    // VoiceOver and TalkBack stay on the button, and a label changing under\n    // them is not reliably read, so the confirmation is said outright. Under\n    // React Native Web the field's live region says it.\n    if (Platform.OS === 'ios' || Platform.OS === 'android') {\n      AccessibilityInfo.announceForAccessibility(copiedLabel)\n    }\n\n    reportCopied(onCopied, value)\n  }\n\n  return {\n    confirmation: copy?.text === value ? copy.count : undefined,\n    onPress: () => {\n      void writeClipboard(value).then(confirm, (error: unknown) => {\n        onCopyFailed?.(error)\n      })\n    },\n  }\n}\n\nexport { CopyField }\nexport type { CopyFieldProps }\n"],"mappings":";;;;;;;;;;;AAoCA,MAAMqB,kBAAkB;AAIxB,MAAMC,UAAqB;CACzBC,6BAA6B;CAC7B,eAAe;CACfC,2BAA2B;AAC7B;AAIA,MAAMC,SAAS,EAAE,eAAe,KAAK;AAErC,MAAME,SAAShB,WAAWiB,OAAO;CAG/BC,cAAc;EACZC,QAAQ;EACRC,SAAS;EACTC,UAAU;EACVC,eAAe;EACfC,UAAU;EACVC,OAAO;CACT;CAKAC,QAAQ,EACNC,WAAW,UACb;CAEAC,SAAS;EACPC,YAAY;EACZT,QAAQ;EACRE,UAAU;CACZ;AACF,CAAC;AAED,MAAMQ,WAAWvB,cAAc,EAAEwB,QAAQC,OAAOC,cAC9ChC,WAAWiB,OAAO;CAGhBU,SAAS,EACPM,mBAAmBD,QAAQE,GAC7B;CACAC,MAAM;EACJP,YAAY;EACZQ,iBAAiBN,OAAOO;EACxBC,aAAaR,OAAOS;EACpBC,cAAcT,MAAMU;EACpBC,aAAa;EACbC,eAAe;EACfC,KAAKZ,QAAQS;EACbR,mBAAmBD,QAAQE;EAC3BW,iBAAiBb,QAAQc;CAC3B;CAKAC,OAAO;EACLnB,YAAY;EACZoB,MAAM;EACNC,UAAU;CACZ;CAWAC,WAAW;EACTC,OAAOrB,OAAOsB;EACdC,aAAa;GACX;GACA;GACA;GACA;EAAyB;EAE3BC,YAAY;EACZC,kBAAkB;CACpB;AACF,CAAC,CACH;;;;;;;;;;;;;;;AAwDA,SAAAU,UAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAR;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAO;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAzB;CAAA,IAAAoB,EAAA,OAAAD,IAAA;EAAmB,CAAA,CAAAR,aAAAa,IAAAZ,WAAAa,IAAAZ,OAAAC,UAAAC,cAAAQ,OAAAvB,OAAA,GAAAsB,SAAAH;EASFC,EAAA,KAAAD;EAAAC,EAAA,KAAAP;EAAAO,EAAA,KAAAN;EAAAM,EAAA,KAAAL;EAAAK,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;EAAAL,EAAA,KAAApB;CAAA,OAAA;EAAAa,QAAAO,EAAA;EAAAN,WAAAM,EAAA;EAAAL,eAAAK,EAAA;EAAAE,QAAAF,EAAA;EAAAG,QAAAH,EAAA;EAAAI,KAAAJ,EAAA;EAAAK,KAAAL,EAAA;EAAApB,QAAAoB,EAAA;CAAA;CARf,MAAAT,cAAAa,OAAAE,KAAAA,IAAA,WAAAF;CACA,MAAAZ,YAAAa,OAAAC,KAAAA,IAAA,SAAAD;CAQA,MAAAE,QAActE,SAAS;CACvB,MAAAuE,SAAe9C,SAAS6C,KAAK;CAC7B,MAAAE,YAAkBpE,YAAY,WAAW;CACzC,MAAAqE,aAAmBrE,YAAY,YAAY;CAC3C,MAAAsE,OAAavE,cAAcmE,MAAKK,WAAWC,cAAe;CAC1D,MAAAC,YAAkB/E,sBAAsB;CAAC,IAAAgF;CAAA,IAAAf,EAAA,OAAAT,eAAAS,EAAA,QAAAN,YAAAM,EAAA,QAAAL,gBAAAK,EAAA,QAAApB,OAAA;EACCmC,KAAA;GAAAxB;GAAAG;GAAAC;GAAAf;EAK1C;EAACoB,EAAA,KAAAT;EAAAS,EAAA,MAAAN;EAAAM,EAAA,MAAAL;EAAAK,EAAA,MAAApB;EAAAoB,EAAA,MAAAe;CAAA,OAAAA,KAAAf,EAAA;CALD,MAAA,EAAAgB,cAAAC,YAAkCC,QAAQH,EAKzC;CACD,MAAAI,SAAeH,iBAAiBV,KAAAA;CAChC,MAAAc,QAAcD,SAAA5B,cAAAC;CAAgC,IAAA6B;CAAA,IAAArB,EAAA,QAAAP,OAAA;EAIrC4B,KAAA5B,UAAUa,KAAAA,IAAVA,KAAAA,IAAA,EAAA,cAAkDb,MAAM;EAACO,EAAA,MAAAP;EAAAO,EAAA,MAAAqB;CAAA,OAAAA,KAAArB,EAAA;CAAA,IAAAsB;CAAA,IAAAtB,EAAA,QAAAgB,gBAAAhB,EAAA,QAAAmB,UAAAnB,EAAA,QAAAT,aAAA;EAkC7D+B,KAAA1F,SAAQ2F,OAAQ,QACf,oBAAC,MAAD;GAAgB,aAAA;GAAQ,GAAK5E;GAAe,OAAAE,OAAME;GAC/CoE,UAAAA,SACC,oBAACuB,MAAD,EAAA,UAAgCnD,YAArB,GAAMyB,YAAN,IADZ;EADE,CAAA,IADN;EAMOhB,EAAA,MAAAgB;EAAAhB,EAAA,MAAAmB;EAAAnB,EAAA,MAAAT;EAAAS,EAAA,MAAAsB;CAAA,OAAAA,KAAAtB,EAAA;CAAA,OAzCV,qBAAC,MAAD;EAAK,GACEqB;EACC,MAAA5B,UAAUa,KAAAA,IAAVA,KAAAA,IAAA;EAAyC,GAC3CJ;EACG,OAAAhE,cAAyBsE,OAAMxC,MAAOmC,KAAK;EAJpD,UAAA;GAME,oBAAC,MAAD;IAAa,OAAAK,OAAM5B;IACjB,UAAA,oBAAC8D,MAAD;KACS,OAAAxG,cAAyBuE,WAAWD,OAAMzB,WAAY,EAAAyC,YAC/Cb,KACd,CAAC;KAEA/B,UAAAA;IALQ,CAAA;GADR,CAAA;GASJkC,YACC,qBAAC,MAAD,EAAA,UAAA,CACE,oBAAC,QAAD;IACc,cAAArB,UAAUa,KAAAA,IAAVA,KAAAA,IAAA,GAAqCc,MAAK,GAAI3B;IACjDwB;IACJ,MAAA;IACE,OAAApE,OAAMS;IACL,SAAA;IAEP8D,UAAAA;GAPI,CAAA,GASP,qBAAC,MAAD;IAAK,GACC5E;IACG,OAAAN,cAAyBW,OAAMW,SAAUgD,OAAMhD,OAAQ;IAFhE,UAAA,CAIE,oBAACkF,MAAD;KAAmBhC,OAAAA;KAAalB,UAAAA;IAArB,CAAA,GACX,oBAACkD,MAAD;KAAmBhC,OAAAA;KAAanB,UAAAA;IAArB,CAAA,CALR;GAVF,CAAA,CAAA,EAAA,CAAA,IADN;GAoBA+B;EAnCE;;AA0CE;;;;;;;AAUX,SAASG,aACP/B,UACAd,OACA;CACA,IAAIc,aAAaY,KAAAA,GACf;CAGF,IAAI;EACFZ,SAASd,KAAK;CAChB,SAAS8C,QAAQ;EACfC,iBAAiB;GACf,MAAMD;EACR,GAAG,CAAC;CACN;AACF;;;;;;AAOA,SAAAR,QAAAnB,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAiB,MAAA,EAAAV,aAAAG,UAAAC,cAAAf,UAAAmB;CAiBf,MAAA,CAAA6B,MAAAC,WAAwBrG,SAGrB,IAAI;CACP,MAAAsG,QAAcvG,OAAkD+E,KAAAA,CAAS;CAAC,IAAAF;CAAA,IAAAC;CAAA,IAAAL,EAAA,OAAA+B,OAAAC,IAAA,2BAAA,GAAA;EAKxE5B,iBAAM;GACJ6B,aAAaH,MAAKI,OAAQ;EAAC;EAE7B7B,KAAA,CAAA;EAAEL,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;CAAA,OAAA;EAAAD,KAAAJ,EAAA;EAAAK,KAAAL,EAAA;CAAA;CAJJ1E,UACE8E,IAGAC,EACF;CAAC,IAAAU;CAAA,IAAAf,EAAA,OAAAT,eAAAS,EAAA,OAAAN,YAAAM,EAAA,OAAApB,OAAA;EAKemC,WAAA;GACdkB,aAAaH,MAAKI,OAAQ;GAC1BJ,MAAKI,UAAWP,iBAAW;IACzBE,QAAQ,IAAI;GAAC,GACZtF,eAAe;GAClBsF,SAAQK,aAAc;IAAAC,QACZD,SAAOC,SAAP,KAAuB;IAACC,MAC1BxD;GACR,EAAE;GAKF,IAAIhD,SAAQ2F,OAAQ,SAAS3F,SAAQ2F,OAAQ,WAC3C9F,kBAAiB4G,yBAA0B9C,WAAW;GAGxDkC,aAAa/B,UAAUd,KAAK;EAAC;EAC9BoB,EAAA,KAAAT;EAAAS,EAAA,KAAAN;EAAAM,EAAA,KAAApB;EAAAoB,EAAA,KAAAe;CAAA,OAAAA,KAAAf,EAAA;CAlBD,MAAAsC,UAAgBvB;CAqBA,MAAAM,KAAAO,MAAIQ,SAAWxD,QAAQgD,KAAIO,QAA3B7B,KAAAA;CAA6C,IAAAgB;CAAA,IAAAtB,EAAA,OAAAsC,WAAAtC,EAAA,OAAAL,gBAAAK,EAAA,OAAApB,OAAA;EAClD0C,WAAA;GACFtF,eAAe4C,KAAK,CAAC,CAAA2D,KAAMD,UAAS1C,UAAA;IACvCD,eAAeC,KAAK;GAAC,CACtB;EAAC;EACHI,EAAA,KAAAsC;EAAAtC,EAAA,KAAAL;EAAAK,EAAA,KAAApB;EAAAoB,EAAA,KAAAsB;CAAA,OAAAA,KAAAtB,EAAA;CAAA,IAAAwC;CAAA,IAAAxC,EAAA,QAAAqB,MAAArB,EAAA,QAAAsB,IAAA;EANIkB,KAAA;GAAAxB,cACSK;GAA6CJ,SAClDK;EAKX;EAACtB,EAAA,MAAAqB;EAAArB,EAAA,MAAAsB;EAAAtB,EAAA,MAAAwC;CAAA,OAAAA,KAAAxC,EAAA;CAAA,OAPMwC;AAON"}
+{"version":3,"file":"index.js","names":["ComponentRef","Ref","TextStyle","ViewProps","ViewStyle","useEffect","useRef","useState","AccessibilityInfo","Text","NativeText","Platform","StyleSheet","View","useClipboardAvailable","writeClipboard","useTheme","composeStyles","themedStyles","useFontFamily","useTypeRole","Button","COPIED_RESET_MS","RESERVE","accessibilityElementsHidden","importantForAccessibility","ATOMIC","const","styles","create","announcement","height","opacity","overflow","pointerEvents","position","width","button","alignSelf","reserve","alignItems","stylesOf","colors","radii","spacing","paddingHorizontal","md","root","backgroundColor","surface","borderColor","outline","borderRadius","sm","borderWidth","flexDirection","gap","paddingVertical","xs","value","flex","minWidth","valueText","color","onSurface","fontVariant","userSelect","writingDirection","CopyFieldProps","Omit","copiedLabel","copyLabel","label","onCopied","onCopyFailed","error","ref","CopyField","t0","$","_c","props","style","t1","t2","undefined","theme","themed","bodySmall","labelLarge","mono","typography","fontFamilyMono","available","t3","confirmation","onPress","useCopy","copied","shown","t4","t5","OS","fontFamily","reportCopied","thrown","setTimeout","copy","setCopy","timer","Symbol","for","clearTimeout","current","count","text","announceForAccessibility","confirm","then","t6","_c","NativeText"],"sources":["../../../src/components/copy-field/index.tsx"],"sourcesContent":["import type { ComponentRef, Ref } from 'react'\nimport type { TextStyle, ViewProps, ViewStyle } from 'react-native'\n\nimport { useEffect, useRef, useState } from 'react'\nimport {\n  AccessibilityInfo,\n  Text as NativeText,\n  Platform,\n  StyleSheet,\n  View,\n} from 'react-native'\n\nimport { useClipboardAvailable, writeClipboard } from '../../clipboard'\nimport { useTheme } from '../../theme/scope'\nimport { composeStyles, themedStyles } from '../../theme/styles'\nimport { useFontFamily } from '../../typography/fonts'\nimport { useTypeRole } from '../../typography/roles'\nimport { Button } from '../button'\n\n// No Material Design page draws a read-only value with a copy control, so it\n// follows the outlined text field, as kanso-ui's CopyField does: the 1dp rule\n// in the outline role, the surface behind it, and the control at its end. The\n// value is body small beside a 32dp text button, so the box is shorter than\n// the field's 56, which suits a value that is read rather than edited, and\n// its corner is the shape scale's small step for the same reason. The box has\n// no height of its own: it is the button's, or the value's once that is\n// taller, so a larger OS text size grows it rather than running the value out\n// of it.\n//\n// The copy goes through expo-clipboard, an optional peer. In an app without\n// it the field shows the value and no button, since a button that could not\n// copy would be one that lies about what it does.\n\n// How long the confirmation stands before the button offers the copy again,\n// as on web: long enough to be read without leaving the button lying about\n// what it will do.\nconst COPIED_RESET_MS = 2000\n\n// The two labels the button is as wide as: laid out at no height, and kept\n// from a screen reader.\nconst RESERVE: ViewProps = {\n  accessibilityElementsHidden: true,\n  'aria-hidden': true,\n  importantForAccessibility: 'no-hide-descendants',\n}\n\n// What a web-only atomic live region adds, so a confirmation is read whole.\n// React Native's types carry no `aria-atomic`, which React Native Web takes.\nconst ATOMIC = { 'aria-atomic': true } as const\n\nconst styles = StyleSheet.create({\n  // Under React Native Web the confirmation is said through a live region, as\n  // web's `<output>` says it, which is drawn nowhere and still read.\n  announcement: {\n    height: 1,\n    opacity: 0,\n    overflow: 'hidden',\n    pointerEvents: 'none',\n    position: 'absolute',\n    width: 1,\n  },\n  // The button stretches to the width the column takes, which is the wider of\n  // the two labels below it, so a copy swaps the label rather than resizing\n  // the button. The button sits at the end of the row, so a width that grew\n  // on press would move it under the finger that had just pressed it.\n  button: {\n    alignSelf: 'stretch',\n  },\n  // Holds both labels for their width alone.\n  reserve: {\n    alignItems: 'center',\n    height: 0,\n    overflow: 'hidden',\n  },\n})\n\nconst stylesOf = themedStyles(({ colors, radii, spacing }) =>\n  StyleSheet.create({\n    // The button's own label padding at `xs`, so the reserve is exactly as\n    // wide as the button drawing the wider label.\n    reserve: {\n      paddingHorizontal: spacing.md,\n    },\n    root: {\n      alignItems: 'center',\n      backgroundColor: colors.surface,\n      borderColor: colors.outline,\n      borderRadius: radii.sm,\n      borderWidth: 1,\n      flexDirection: 'row',\n      gap: spacing.sm,\n      paddingHorizontal: spacing.md,\n      paddingVertical: spacing.xs,\n    },\n    // The column the value sits in, beside the button. `minWidth: 0` lets a\n    // long unbroken value wrap rather than push the button out of the box.\n    // The value keeps to the column's start, which is its left, or its right\n    // in a right-to-left layout.\n    value: {\n      alignItems: 'flex-start',\n      flex: 1,\n      minWidth: 0,\n    },\n    // The value in the mono face at the body small role, where a `0` and an\n    // `O`, an `l`, a `1` and an `I` have to be told apart, with ligatures off\n    // so what shows is each character that is copied. It reads left to right\n    // whatever the layout's direction, since it is a literal: a path, a flag\n    // or a command whose leading `/`, `--` or `$` would otherwise move to the\n    // other end. iOS and React Native Web take `writingDirection`; Android\n    // takes the direction of the value's first letter, which is the value's\n    // own. Under React Native Web one click selects the whole value, which is\n    // what someone copying it by hand wants, and on iOS and Android a long\n    // press offers the platform's own copy.\n    valueText: {\n      color: colors.onSurface,\n      fontVariant: [\n        'no-common-ligatures',\n        'no-contextual',\n        'no-discretionary-ligatures',\n        'no-historical-ligatures',\n      ],\n      userSelect: 'all',\n      writingDirection: 'ltr',\n    },\n  }),\n)\n\ntype CopyFieldProps = Omit<ViewProps, 'children'> & {\n  /**\n   * What the button says once the value has been copied, and what is\n   * announced. It reverts to `copyLabel` on its own after a couple of\n   * seconds.\n   * @default 'Copied'\n   */\n  readonly copiedLabel?: string\n  /**\n   * What the button says at rest.\n   * @default 'Copy'\n   */\n  readonly copyLabel?: string\n  /**\n   * What the value is, such as \"Repository URL\" or \"Access token\", for a\n   * screen with more than one field. It names the field as a group and joins\n   * the button's name, so a screen reader hears \"Copy Repository URL\" rather\n   * than one \"Copy\" after another; it is not shown. The value itself stays\n   * out of the button's name, since a token would be read aloud. Left out,\n   * the button is \"Copy\" alone.\n   */\n  readonly label?: string\n  /**\n   * Called with the value after it reaches the clipboard, never before.\n   * Named as web's is, where the root's own `onCopy` is taken.\n   */\n  readonly onCopied?: (value: string) => void\n  /**\n   * Called with the error when the value did not reach the clipboard: under\n   * React Native Web, where the browser refuses the write, and anywhere\n   * expo-clipboard turns out not to be installed after a press. Nothing is\n   * announced and the button keeps offering the copy, so this is for an app\n   * that wants to say more, in a snackbar say.\n   */\n  readonly onCopyFailed?: (error: unknown) => void\n  readonly ref?: Ref<ComponentRef<typeof View>>\n  /** The text shown, and the text copied. */\n  readonly value: string\n}\n\n/**\n * A value to be read and taken away, such as a repository URL, a token or a\n * command. It shows the value in the mono face and copies it on request,\n * confirming on the button itself and to a screen reader.\n *\n * ```tsx\n * <CopyField label=\"Access token\" value=\"first.second.third\" />\n * ```\n *\n * The copy goes through expo-clipboard, which an app installs alongside the\n * library. Without it the field shows the value and no button.\n *\n * `style`, `ref` and `testID` land on the box.\n */\nfunction CopyField({\n  copiedLabel = 'Copied',\n  copyLabel = 'Copy',\n  label,\n  onCopied,\n  onCopyFailed,\n  style,\n  value,\n  ...props\n}: CopyFieldProps) {\n  const theme = useTheme()\n  const themed = stylesOf(theme)\n  const bodySmall = useTypeRole('bodySmall')\n  const labelLarge = useTypeRole('labelLarge')\n  const mono = useFontFamily(theme.typography.fontFamilyMono)\n  const available = useClipboardAvailable()\n  const { confirmation, onPress } = useCopy({\n    copiedLabel,\n    onCopied,\n    onCopyFailed,\n    value,\n  })\n  const copied = confirmation !== undefined\n  const shown = copied ? copiedLabel : copyLabel\n\n  return (\n    <View\n      {...(label === undefined ? undefined : { 'aria-label': label })}\n      role={label === undefined ? undefined : 'group'}\n      {...props}\n      style={composeStyles<ViewStyle>(themed.root, style)}\n    >\n      <View style={themed.value}>\n        <NativeText\n          style={composeStyles<TextStyle>(bodySmall, themed.valueText, {\n            fontFamily: mono,\n          })}\n        >\n          {value}\n        </NativeText>\n      </View>\n      {available ? (\n        <View>\n          <Button\n            aria-label={label === undefined ? undefined : `${shown} ${label}`}\n            onPress={onPress}\n            size=\"xs\"\n            style={styles.button}\n            variant=\"text\"\n          >\n            {shown}\n          </Button>\n          <View\n            {...RESERVE}\n            style={composeStyles<ViewStyle>(styles.reserve, themed.reserve)}\n          >\n            <NativeText style={labelLarge}>{copyLabel}</NativeText>\n            <NativeText style={labelLarge}>{copiedLabel}</NativeText>\n          </View>\n        </View>\n      ) : null}\n      {Platform.OS === 'web' ? (\n        <View aria-live=\"polite\" {...ATOMIC} style={styles.announcement}>\n          {copied ? (\n            <NativeText key={confirmation}>{copiedLabel}</NativeText>\n          ) : null}\n        </View>\n      ) : null}\n    </View>\n  )\n}\n\n/**\n * Hands the call site the value it copied. What its handler throws is raised\n * on its own, outside the copy, as a throw from a press handler is, so it\n * reaches the app's error reporting rather than rejecting a promise nothing\n * awaits, which React Native reports nowhere in a release build.\n */\nfunction reportCopied(\n  onCopied: ((value: string) => void) | undefined,\n  value: string,\n) {\n  if (onCopied === undefined) {\n    return\n  }\n\n  try {\n    onCopied(value)\n  } catch (thrown) {\n    setTimeout(() => {\n      throw thrown\n    }, 0)\n  }\n}\n\n/**\n * Copies the value on press and holds the confirmation for the dwell.\n * `confirmation` counts the copies while the button says Copied, and is\n * `undefined` otherwise.\n */\nfunction useCopy({\n  copiedLabel,\n  onCopied,\n  onCopyFailed,\n  value,\n}: {\n  readonly copiedLabel: string\n  readonly onCopied: ((value: string) => void) | undefined\n  readonly onCopyFailed: ((error: unknown) => void) | undefined\n  readonly value: string\n}) {\n  // What the last copy put on the clipboard, and how many copies there have\n  // been. The confirmation is that text still being the value shown, so a\n  // value that changes inside the dwell, a token regenerated say, takes the\n  // label back to the copy at once rather than confirming a copy of something\n  // else. The count gives each confirmation its own node in the live region,\n  // so a second copy inside the dwell is said again.\n  const [copy, setCopy] = useState<null | {\n    readonly count: number\n    readonly text: string\n  }>(null)\n  const timer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined)\n\n  // Without this, a field unmounted inside the dwell leaves a timer holding a\n  // state update for a tree that is gone.\n  useEffect(\n    () => () => {\n      clearTimeout(timer.current)\n    },\n    [],\n  )\n\n  // The field's own state first, the dwell and the announcement included, and\n  // the call site's handler after it, so a handler that throws cannot leave\n  // the button on Copied for good.\n  const confirm = () => {\n    clearTimeout(timer.current)\n    timer.current = setTimeout(() => {\n      setCopy(null)\n    }, COPIED_RESET_MS)\n    setCopy((current) => ({\n      count: (current?.count ?? 0) + 1,\n      text: value,\n    }))\n\n    // VoiceOver and TalkBack stay on the button, and a label changing under\n    // them is not reliably read, so the confirmation is said outright. Under\n    // React Native Web the field's live region says it.\n    if (Platform.OS === 'ios' || Platform.OS === 'android') {\n      AccessibilityInfo.announceForAccessibility(copiedLabel)\n    }\n\n    reportCopied(onCopied, value)\n  }\n\n  return {\n    confirmation: copy?.text === value ? copy.count : undefined,\n    onPress: () => {\n      void writeClipboard(value).then(confirm, (error: unknown) => {\n        onCopyFailed?.(error)\n      })\n    },\n  }\n}\n\nexport { CopyField }\nexport type { CopyFieldProps }\n"],"mappings":"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"}