@kanso-labs/react-native-kanso-ui 0.0.0-stage → 0.1.1

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["ReactNode","Ref","BlurEvent","Insets","KeyboardTypeOptions","StyleProp","TextInput","TextInputProps","TextInputSubmitEditingEvent","ViewStyle","NumberFormatter","useEffect","useId","useImperativeHandle","useRef","useState","AccessibilityInfo","Platform","Pressable","StyleSheet","useWindowDimensions","View","FieldVariant","ValidationResult","IconStyle","NumberFieldState","ResolvedTheme","describedBy","FieldBox","FieldInput","FieldMessage","useFieldFocus","useFieldValidation","MinusGlyph","PlusGlyph","IconStyleContext","useNumberFieldState","hitSlop","usePressFeedback","withOpacity","useTheme","composeStyles","themedStyles","IconButton","NumberFieldProps","Omit","decrementLabel","defaultValue","description","error","floatingLabel","formatOptions","Intl","NumberFormatOptions","incrementLabel","inputRef","isDisabled","isReadOnly","isRequired","label","locale","maxValue","minValue","name","numeric","onChange","value","ref","step","steppers","style","validate","variant","Spin","onPress","onPressIn","onPressOut","StepperProps","children","half","onBlur","onFocus","outlined","place","SteppersProps","canDecrement","canIncrement","inline","onDecrement","onIncrement","STEPPER_WIDTH","GLYPH_SIZE","SPIN_DELAY","SPIN_INTERVAL","deviceLocale","stylesOf","radii","spacing","create","stepper","alignItems","flexBasis","flexGrow","justifyContent","width","stepperBottomOutlined","borderBottomEndRadius","xs","stepperRing","outlineOffset","alignSelf","flexDirection","marginEnd","lg","marginStart","sm","marginVertical","steppersInline","gap","md","steppersOutlined","stepperTop","borderTopEndRadius","blurThen","then","event","commitBefore","state","handler","Event","commit","editInto","onEdit","text","setInputValue","glyphOf","color","size","halfOf","typography","fontScale","bodyLargeLineHeight","bodySmallLineHeight","keyboardOf","hasDecimals","hasNegative","undefined","Number","isNaN","OS","localeOf","NumberFormat","supportedLocalesOf","resolvedOptions","marginVerticalOf","margin","NumberField","t0","$","_c","onSubmitEditing","props","t1","t2","t3","t4","t5","t6","t7","t8","returnKeyType","id","control","writtenIn","t9","numberValue","empty","t10","String","t11","isEmpty","submitted","validation","shownError","t12","t13","focus","maximumFractionDigits","announced","useStepAnnouncement","inputValue","stepperFocused","setStepperFocused","t14","t15","Symbol","for","current","t16","t17","t18","t19","t20","decrement","increment","t21","steppersOf","stepThen","focused","t22","t23","t24","handlers","t25","t26","t27","t28","t29","t30","t31","t32","t33","outwardSlop","slop","reach","top","bottom","Stepper","ariaLabel","theme","styles","colors","stateLayerOpacity","corner","feedback","onSurfaceVariant","corners","disabled","T0","ring","layer","onSurface","disabledContent","Steppers","sizing","up","useSpin","down","controlXs","canStep","latest","timer","spun","clearTimeout","tick","setTimeout","pending","announceForAccessibility","_c"],"sources":["../../../src/components/number-field/index.tsx"],"sourcesContent":["import type { ReactNode, Ref } from 'react'\nimport type {\n  BlurEvent,\n  Insets,\n  KeyboardTypeOptions,\n  StyleProp,\n  TextInput,\n  TextInputProps,\n  TextInputSubmitEditingEvent,\n  ViewStyle,\n} from 'react-native'\n\nimport { NumberFormatter } from '@internationalized/number'\nimport { useEffect, useId, useImperativeHandle, useRef, useState } from 'react'\nimport {\n  AccessibilityInfo,\n  Platform,\n  Pressable,\n  StyleSheet,\n  useWindowDimensions,\n  View,\n} from 'react-native'\n\nimport type { FieldVariant } from '../../field'\nimport type { ValidationResult } from '../../form'\nimport type { IconStyle } from '../../glyphs/icon-style'\nimport type { NumberFieldState } from '../../number/state'\nimport type { ResolvedTheme } from '../../theme/scope'\n\nimport {\n  describedBy,\n  FieldBox,\n  FieldInput,\n  FieldMessage,\n  useFieldFocus,\n} from '../../field'\nimport { useFieldValidation } from '../../form'\nimport { MinusGlyph, PlusGlyph } from '../../glyphs'\nimport { IconStyleContext } from '../../glyphs/icon-style'\nimport { useNumberFieldState } from '../../number/state'\nimport { hitSlop, usePressFeedback } from '../../press'\nimport { withOpacity } from '../../theme/color'\nimport { useTheme } from '../../theme/scope'\nimport { composeStyles, themedStyles } from '../../theme/styles'\nimport { IconButton } from '../icon-button'\n\n// kanso-ui's NumberField: the text fields page's field holding a number,\n// drawn through the field chrome in src/field as TextField is, with the value\n// in the mono face and tabular figures by default and two steppers at the\n// box's end.\n//\n// The steppers come in web's two layouts. Stacked, the plus over the minus,\n// they are a column flush with the box's top, end and bottom, each half of\n// the box and 32dp wide, drawing the icon buttons page's 20dp glyph in on\n// surface variant with the state layer and the ripple every control draws.\n// The top one takes the box's top-end corner, and the bottom one the outlined\n// box's bottom-end corner, so the column reads as the box's own edge. Side by\n// side, they are extra-small icon buttons, 8dp apart and 12dp from the end\n// where the page puts a field's icons, centred on the box. Either way a tap\n// steps once, on release, and a hold keeps stepping until the press ends or\n// the value reaches its bound, as React Aria's steppers do for a touch, and\n// the box shows focus while a stepper has it, as web's does.\n//\n// **The stacked pair reaches 48dp outward**, through `hitSlop`: the top one\n// up and the bottom one down, each 8dp to either side. Web keeps the pair to\n// its drawn size, since two 48dp targets inside the column would overlap;\n// reaching away from each other, the two never meet.\n//\n// The value is React Stately's, through src/number: a keystroke is kept only\n// where the text could still become a number in the field's locale and\n// format, and the text is read, clamped to the range, snapped to the step\n// and written back formatted when the field loses focus or the return key is\n// pressed, as web's is on blur and Enter. The keyboard is the one that types\n// what the field takes: a minus where the range reaches below zero, and a\n// decimal separator where the format shows a fraction. On iOS a minus is on\n// the numbers and punctuation keyboard alone, so a field that takes one gets\n// that.\n//\n// **The locale is a prop**, defaulting to the device's, where web reads it\n// from React Aria's `I18nProvider`. It decides how the value is written and\n// read, so a field in a German app reads \"1.234,5\" as 1234.5.\n//\n// A stepper press is announced on iOS and Android, by the value it leaves,\n// since VoiceOver and TalkBack stay on the stepper rather than reading the\n// field again.\n\ntype NumberFieldProps = Omit<\n  TextInputProps,\n  | 'accessibilityHint'\n  | 'accessibilityLabel'\n  | 'aria-disabled'\n  | 'aria-label'\n  | 'autoComplete'\n  | 'autoCorrect'\n  | 'children'\n  | 'cursorColor'\n  | 'defaultValue'\n  | 'editable'\n  | 'inputMode'\n  | 'keyboardType'\n  | 'maxLength'\n  | 'multiline'\n  | 'numberOfLines'\n  | 'onChange'\n  | 'onChangeText'\n  | 'placeholder'\n  | 'placeholderTextColor'\n  | 'readOnly'\n  | 'selectionColor'\n  | 'spellCheck'\n  | 'style'\n  | 'underlineColorAndroid'\n  | 'value'\n> & {\n  /**\n   * The name of the stepper that lowers the value, for a screen reader. Left\n   * out, it is the English \"Decrease\" followed by the field's own label.\n   */\n  readonly decrementLabel?: string\n  /** The value the field opens with, when it keeps its own. */\n  readonly defaultValue?: number\n  /**\n   * A hint shown under the field. Replaced by `error` when there is one, so\n   * the 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 field in its error state: the message, the error colours, and the\n   * invalid state a screen reader reads all follow from it. The line under\n   * the field arrives with the message, so the field grows when this does,\n   * unless it is inside a `Form`, which keeps the line drawn. It wins over\n   * what `validate` and the form say, and holds a `native` form back.\n   */\n  readonly error?: string\n  /**\n   * Whether the label sits in the empty box and floats to the top once the\n   * field is focused or holds a value, as the text fields page draws it.\n   * `false` keeps it small at the top in every state.\n   * @default true\n   */\n  readonly floatingLabel?: boolean\n  /**\n   * How the value is written and read: a currency, a percentage, a unit, a\n   * number of fraction digits. It also decides what can be typed.\n   */\n  readonly formatOptions?: Intl.NumberFormatOptions\n  /**\n   * The name of the stepper that raises the value, for a screen reader. Left\n   * out, it is the English \"Increase\" followed by the field's own label.\n   */\n  readonly incrementLabel?: string\n  /**\n   * A ref to the field's own `TextInput`, which is what a call site moves\n   * focus to, after a server's error, say. `ref` is the field as a whole.\n   */\n  readonly inputRef?: Ref<TextInput>\n  /**\n   * Draws the field disabled: it takes no focus, no input and no steps.\n   * @default false\n   */\n  readonly isDisabled?: boolean\n  /**\n   * Shows the value and takes focus, but takes no input and no steps.\n   * @default false\n   */\n  readonly isReadOnly?: boolean\n  /**\n   * Marks the label with an asterisk, as the text fields page marks a field\n   * that must be filled.\n   * @default false\n   */\n  readonly isRequired?: boolean\n  /**\n   * What the field is for, and the name a screen reader reads for it.\n   * Required, since a field with no label is a box nobody can name.\n   */\n  readonly label: string\n  /**\n   * The BCP 47 locale the value is written and read in. Defaults to the\n   * device's.\n   */\n  readonly locale?: string\n  /** The highest value the field takes. A committed value is clamped to it. */\n  readonly maxValue?: number\n  /** The lowest value the field takes. A committed value is clamped to it. */\n  readonly minValue?: number\n  /**\n   * The name the value is submitted under by the `Form` around the field,\n   * and the key its `validationErrors` reach the field by. The form submits\n   * the number written out, such as `1234.5`, and `''` for an empty field.\n   */\n  readonly name?: string\n  /**\n   * Renders the value in the mono face with tabular figures, for amounts and\n   * other numbers meant to be compared down a column. On by default, since a\n   * number field holds nothing else.\n   * @default true\n   */\n  readonly numeric?: boolean\n  /**\n   * Called with the committed value, once it is read from what was typed or\n   * stepped to. `NaN` is an empty field.\n   */\n  readonly onChange?: (value: number) => void\n  readonly ref?: Ref<View>\n  /**\n   * The amount the steppers move the value by, and the multiple of it, from\n   * `minValue`, that a committed value snaps to.\n   */\n  readonly step?: number\n  /**\n   * How the two steppers sit at the end of the box: stacked, the plus over\n   * the minus, flush with the box's edge, or side by side as extra-small\n   * icon buttons.\n   * @default 'vertical'\n   */\n  readonly steppers?: 'horizontal' | 'vertical'\n  /** Positions and sizes the field as a whole. */\n  readonly style?: StyleProp<ViewStyle>\n  /**\n   * Checks the value, `NaN` for an empty field, and returns its problem in\n   * words, or several, where there is one, and `true`, `null` or `undefined`\n   * where there is none. Under the default `aria` validation the error shows\n   * as the value changes; inside a `native` form it shows once a submission\n   * is tried, or once the field loses focus after an edit, and holds the form\n   * back.\n   */\n  readonly validate?: (value: number) => ValidationResult\n  /** The value, when the call site keeps it. `NaN` is an empty field. */\n  readonly value?: number\n  /**\n   * The filled box, or the outlined one: no fill, an outline that thickens\n   * and takes the primary role while focused, and the label cutting it once\n   * it floats, the text fields page's two fields.\n   * @default 'filled'\n   */\n  readonly variant?: FieldVariant\n}\n\n// What a stepper hands its control so a tap steps once and a hold keeps\n// stepping.\ntype Spin = {\n  readonly onPress: () => void\n  readonly onPressIn: () => void\n  readonly onPressOut: () => void\n}\n\ntype StepperProps = Spin & {\n  readonly 'aria-label': string\n  readonly children: ReactNode\n  readonly half: number\n  readonly isDisabled: boolean\n  readonly onBlur: () => void\n  readonly onFocus: () => void\n  readonly outlined: boolean\n  readonly place: 'bottom' | 'top'\n}\n\ntype SteppersProps = {\n  readonly canDecrement: boolean\n  readonly canIncrement: boolean\n  readonly decrementLabel: string\n  readonly incrementLabel: string\n  readonly inline: boolean\n  readonly onBlur: () => void\n  readonly onDecrement: () => void\n  readonly onFocus: () => void\n  readonly onIncrement: () => void\n  readonly outlined: boolean\n}\n\n// A stacked stepper's width, and the glyph it draws: the icon buttons page's\n// 20dp, for the extra-small size the pair stands in for.\nconst STEPPER_WIDTH = 32\nconst GLYPH_SIZE = 20\n\n// How long a stepper is held before it starts stepping on its own, and how\n// often it steps after that: React Aria's timings for a stepper held by\n// touch.\nconst SPIN_DELAY = 600\nconst SPIN_INTERVAL = 60\n\nlet deviceLocale: string | undefined\n\nconst stylesOf = themedStyles(({ radii, spacing }) =>\n  StyleSheet.create({\n    // One stacked stepper: half the column, its glyph in the middle.\n    stepper: {\n      alignItems: 'center',\n      flexBasis: 0,\n      flexGrow: 1,\n      justifyContent: 'center',\n      width: STEPPER_WIDTH,\n    },\n    stepperBottomOutlined: {\n      borderBottomEndRadius: radii.xs,\n    },\n    // The ring inside the stepper, as web draws it, since outside it would\n    // fall over the box's edge and the other stepper.\n    stepperRing: {\n      outlineOffset: -2,\n    },\n    // Stacked: the column reaches out of the box's padding to sit flush with\n    // its top, end and bottom, 8dp after the value rather than the box's 16.\n    steppers: {\n      alignSelf: 'stretch',\n      flexDirection: 'column',\n      marginEnd: -spacing.lg,\n      marginStart: spacing.sm - spacing.lg,\n      marginVertical: -spacing.sm,\n    },\n    // Side by side: 12dp from the end, as the page places a field's icons,\n    // and 8dp apart, which is how far each button's target reaches past it,\n    // so neither target falls over the other's glyph. They centre on the\n    // box, as the page centres a trailing icon and as web draws them, and\n    // take no more of its height than the value's line, so the outlined\n    // box, whose content is that line alone, is not made taller by them.\n    // The margins that do it are worked out where they render, since the\n    // line follows the device's text size.\n    steppersInline: {\n      alignSelf: 'center',\n      flexDirection: 'row',\n      gap: spacing.sm,\n      marginEnd: spacing.md - spacing.lg,\n      marginStart: spacing.sm - spacing.lg,\n    },\n    // In the outlined box the column has 16dp to reach rather than 8.\n    steppersOutlined: {\n      marginVertical: -spacing.lg,\n    },\n    stepperTop: {\n      borderTopEndRadius: radii.xs,\n    },\n  }),\n)\n\n// The field's own blur handling, then the call site's.\nfunction blurThen(\n  onBlur: () => void,\n  then: ((event: BlurEvent) => void) | undefined,\n) {\n  return (event: BlurEvent) => {\n    onBlur()\n    then?.(event)\n  }\n}\n\n// Reads the text as the field's value, then hands the event on.\nfunction commitBefore<Event>(\n  state: NumberFieldState,\n  handler: ((event: Event) => void) | undefined,\n) {\n  return (event: Event) => {\n    state.commit()\n    handler?.(event)\n  }\n}\n\n// The text typed, kept only where it could still become a number, and\n// reported to the field's validation as an edit.\nfunction editInto(state: NumberFieldState, onEdit: () => void) {\n  return (text: string) => {\n    if (state.validate(text)) {\n      state.setInputValue(text)\n      onEdit()\n    }\n  }\n}\n\nfunction glyphOf(color: string): IconStyle {\n  return { color, size: GLYPH_SIZE }\n}\n\n// A stacked stepper's half of the box: the box's padding above and below\n// and the lines it holds, at the device's text size, halved.\nfunction halfOf(\n  { spacing, typography }: ResolvedTheme,\n  outlined: boolean,\n  fontScale: number,\n) {\n  return outlined\n    ? spacing.lg + (typography.bodyLargeLineHeight * fontScale) / 2\n    : spacing.sm +\n        ((typography.bodySmallLineHeight + typography.bodyLargeLineHeight) *\n          fontScale) /\n          2\n}\n\n// The keyboard that types what the field takes. React Aria's own choice of\n// input mode, in React Native's keyboards.\nfunction keyboardOf(\n  minValue: number | undefined,\n  hasDecimals: boolean,\n): KeyboardTypeOptions {\n  const hasNegative =\n    minValue === undefined || Number.isNaN(minValue) || minValue < 0\n\n  if (hasNegative) {\n    return Platform.OS === 'ios' ? 'numbers-and-punctuation' : 'numeric'\n  }\n\n  return hasDecimals ? 'decimal-pad' : 'number-pad'\n}\n\n// The locale the field writes in: the one given, where the runtime takes it\n// as a locale at all, or the device's.\nfunction localeOf(locale: string | undefined) {\n  if (locale !== undefined) {\n    try {\n      Intl.NumberFormat.supportedLocalesOf(locale)\n      return locale\n    } catch {\n      // A malformed tag, which falls back to the device's.\n    }\n  }\n\n  deviceLocale ??= new Intl.NumberFormat().resolvedOptions().locale\n  return deviceLocale\n}\n\n// The margin that gives a side-by-side stepper the value's line in the\n// box's height: half the difference between the two, negative where the\n// button is taller.\nfunction marginVerticalOf(margin: number): ViewStyle {\n  return { marginVertical: margin }\n}\n\n/**\n * A labelled number input with steppers, the text fields page's filled or\n * outlined field. Pass `value` with `onChange` to control it, or\n * `defaultValue` to let it keep its own; `onChange` is handed the committed\n * number, `NaN` for an empty field. `minValue`, `maxValue` and `step` shape\n * it, and `formatOptions` says how it reads, in `locale`: a currency, a\n * percentage, a unit.\n *\n * React Native's own `TextInput` props, the return key among them, reach the\n * control; `style` and `ref` are the field as a whole, and `inputRef` the\n * control.\n *\n * ```tsx\n * <NumberField defaultValue={1234.5} label=\"Label\" />\n * ```\n */\nfunction NumberField({\n  decrementLabel,\n  defaultValue,\n  description,\n  error,\n  floatingLabel = true,\n  formatOptions,\n  incrementLabel,\n  inputRef,\n  isDisabled = false,\n  isReadOnly = false,\n  isRequired = false,\n  label,\n  locale,\n  maxValue,\n  minValue,\n  name,\n  numeric = true,\n  onBlur,\n  onChange,\n  onFocus,\n  onSubmitEditing,\n  ref,\n  returnKeyType = 'done',\n  step,\n  steppers = 'vertical',\n  style,\n  validate,\n  value,\n  variant = 'filled',\n  ...props\n}: NumberFieldProps) {\n  const id = useId()\n  const control = useRef<TextInput>(null)\n  const writtenIn = localeOf(locale)\n  const state = useNumberFieldState({\n    defaultValue,\n    formatOptions,\n    isDisabled,\n    isReadOnly,\n    locale: writtenIn,\n    maxValue,\n    minValue,\n    onChange,\n    step,\n    value,\n  })\n  const empty = Number.isNaN(state.numberValue)\n  const validation = useFieldValidation({\n    control,\n    error,\n    isDisabled,\n    isEmpty: empty,\n    isReadOnly,\n    isRequired,\n    name,\n    submitted: empty ? '' : String(state.numberValue),\n    validate,\n    value: state.numberValue,\n  })\n  const shownError = validation.error\n  const focus = useFieldFocus({\n    onBlur: commitBefore<BlurEvent>(state, blurThen(validation.onBlur, onBlur)),\n    onFocus,\n  })\n  const hasDecimals =\n    (new NumberFormatter(writtenIn, formatOptions).resolvedOptions()\n      .maximumFractionDigits ?? 0) > 0\n  const announced = useStepAnnouncement(state.inputValue)\n  // The box is focused while focus is anywhere in it, a stepper's included,\n  // as web's is through `:focus-within`.\n  const [stepperFocused, setStepperFocused] = useState(false)\n\n  useImperativeHandle<null | TextInput, null | TextInput>(\n    inputRef,\n    () => control.current,\n    [],\n  )\n\n  return (\n    <View ref={ref} style={style}>\n      <FieldBox\n        control={control}\n        end={steppersOf({\n          canDecrement: state.canDecrement,\n          canIncrement: state.canIncrement,\n          decrementLabel: decrementLabel ?? `Decrease ${label}`,\n          incrementLabel: incrementLabel ?? `Increase ${label}`,\n          inline: steppers === 'horizontal',\n          onBlur: () => {\n            setStepperFocused(false)\n          },\n          onDecrement: announced(stepThen(state.decrement, validation.onEdit)),\n          onFocus: () => {\n            setStepperFocused(true)\n          },\n          onIncrement: announced(stepThen(state.increment, validation.onEdit)),\n          outlined: variant === 'outlined',\n        })}\n        floatingLabel={floatingLabel}\n        isDisabled={isDisabled}\n        isFocused={focus.focused || stepperFocused}\n        isInvalid={shownError !== undefined}\n        isPopulated={state.inputValue !== ''}\n        isRequired={isRequired}\n        label={label}\n        variant={variant}\n      >\n        <FieldInput\n          {...props}\n          {...focus.handlers}\n          aria-label={label}\n          autoComplete=\"off\"\n          autoCorrect={false}\n          described={describedBy(id, { description, error: shownError })}\n          editable={!isDisabled && !isReadOnly}\n          keyboardType={keyboardOf(minValue, hasDecimals)}\n          numeric={numeric}\n          onChangeText={editInto(state, validation.onEdit)}\n          onSubmitEditing={commitBefore<TextInputSubmitEditingEvent>(\n            state,\n            onSubmitEditing,\n          )}\n          ref={control}\n          returnKeyType={returnKeyType}\n          spellCheck={false}\n          value={state.inputValue}\n        />\n      </FieldBox>\n      <FieldMessage description={description} error={shownError} id={id} />\n    </View>\n  )\n}\n\n// The 48dp target a stacked stepper reaches to, all of its height on the\n// side away from the other stepper, and its width either side.\nfunction outwardSlop(\n  half: number,\n  place: 'bottom' | 'top',\n): Insets | undefined {\n  const slop = hitSlop(half, STEPPER_WIDTH)\n  if (slop === undefined) {\n    return undefined\n  }\n\n  const reach = (slop.top ?? 0) + (slop.bottom ?? 0)\n  return place === 'top'\n    ? { ...slop, bottom: 0, top: reach }\n    : { ...slop, bottom: reach, top: 0 }\n}\n\n/**\n * One of the stacked pair: half the column, the glyph in on surface\n * variant, and the state layer, the ripple and the ring every control\n * draws, the ring inside it. Disabled at the end of the range, where the\n * glyph takes on surface at the disabled opacity.\n */\nfunction Stepper({\n  'aria-label': ariaLabel,\n  children,\n  half,\n  isDisabled,\n  onBlur,\n  onFocus,\n  onPress,\n  onPressIn,\n  onPressOut,\n  outlined,\n  place,\n}: StepperProps) {\n  const theme = useTheme()\n  const styles = stylesOf(theme)\n  const { colors, stateLayerOpacity } = theme\n  const corner =\n    place === 'top'\n      ? styles.stepperTop\n      : outlined\n        ? styles.stepperBottomOutlined\n        : undefined\n  const feedback = usePressFeedback({\n    color: colors.onSurfaceVariant,\n    corners: corner,\n    disabled: isDisabled,\n    onBlur,\n    onFocus,\n    onPressIn,\n    onPressOut,\n  })\n\n  return (\n    <Pressable\n      {...feedback.handlers}\n      aria-label={ariaLabel}\n      disabled={isDisabled}\n      hitSlop={outwardSlop(half, place)}\n      onPress={onPress}\n      role=\"button\"\n      style={composeStyles<ViewStyle>(\n        styles.stepper,\n        corner,\n        feedback.ring,\n        feedback.ring === undefined ? undefined : styles.stepperRing,\n      )}\n    >\n      {feedback.layer}\n      <IconStyleContext\n        value={glyphOf(\n          isDisabled\n            ? withOpacity(colors.onSurface, stateLayerOpacity.disabledContent)\n            : colors.onSurfaceVariant,\n        )}\n      >\n        {children}\n      </IconStyleContext>\n    </Pressable>\n  )\n}\n\n/**\n * The two steppers at the box's end, stacked or side by side, each\n * disabled where it would not move the value.\n */\nfunction Steppers({\n  canDecrement,\n  canIncrement,\n  decrementLabel,\n  incrementLabel,\n  inline,\n  onBlur,\n  onDecrement,\n  onFocus,\n  onIncrement,\n  outlined,\n}: SteppersProps) {\n  const theme = useTheme()\n  const styles = stylesOf(theme)\n  const { fontScale } = useWindowDimensions()\n  const { sizing, typography } = theme\n  const up = useSpin(onIncrement, canIncrement)\n  const down = useSpin(onDecrement, canDecrement)\n\n  if (inline) {\n    return (\n      <View\n        style={composeStyles<ViewStyle>(\n          styles.steppersInline,\n          marginVerticalOf(\n            (typography.bodyLargeLineHeight * fontScale - sizing.controlXs) / 2,\n          ),\n        )}\n      >\n        <IconButton\n          {...down}\n          aria-label={decrementLabel}\n          isDisabled={!canDecrement}\n          onBlur={onBlur}\n          onFocus={onFocus}\n          size=\"xs\"\n        >\n          <MinusGlyph />\n        </IconButton>\n        <IconButton\n          {...up}\n          aria-label={incrementLabel}\n          isDisabled={!canIncrement}\n          onBlur={onBlur}\n          onFocus={onFocus}\n          size=\"xs\"\n        >\n          <PlusGlyph />\n        </IconButton>\n      </View>\n    )\n  }\n\n  const half = halfOf(theme, outlined, fontScale)\n\n  return (\n    <View\n      style={composeStyles<ViewStyle>(\n        styles.steppers,\n        outlined ? styles.steppersOutlined : undefined,\n      )}\n    >\n      <Stepper\n        {...up}\n        aria-label={incrementLabel}\n        half={half}\n        isDisabled={!canIncrement}\n        onBlur={onBlur}\n        onFocus={onFocus}\n        outlined={outlined}\n        place=\"top\"\n      >\n        <PlusGlyph />\n      </Stepper>\n      <Stepper\n        {...down}\n        aria-label={decrementLabel}\n        half={half}\n        isDisabled={!canDecrement}\n        onBlur={onBlur}\n        onFocus={onFocus}\n        outlined={outlined}\n        place=\"bottom\"\n      >\n        <MinusGlyph />\n      </Stepper>\n    </View>\n  )\n}\n\n// The steppers as the box's end, built by a call rather than written at the\n// prop, which is what react-perf's no-jsx-as-prop is after.\nfunction steppersOf(props: SteppersProps) {\n  return <Steppers {...props} />\n}\n\n/**\n * A stepper's press handlers: a tap steps once, when it is released, and a\n * hold keeps stepping, from `SPIN_DELAY` on and every `SPIN_INTERVAL` after,\n * until the press ends or the value reaches its bound. A hold steps nothing\n * more on release, and a press the finger slides off steps nothing at all,\n * as React Aria's stepper does for a touch.\n */\n// A stepper's step, reported to the field's validation as an edit.\nfunction stepThen(step: () => void, onEdit: () => void) {\n  return () => {\n    step()\n    onEdit()\n  }\n}\n\nfunction useSpin(step: () => void, canStep: boolean): Spin {\n  // The step and whether it can move, as of the last render, since a hold\n  // steps from timers that outlive the render that started them.\n  const latest = useRef({ canStep, step })\n  const timer = useRef<ReturnType<typeof setTimeout>>(undefined)\n  const spun = useRef(false)\n\n  useEffect(() => {\n    latest.current = { canStep, step }\n  })\n  useEffect(\n    () => () => {\n      clearTimeout(timer.current)\n    },\n    [],\n  )\n\n  const tick = () => {\n    if (!latest.current.canStep) {\n      return\n    }\n    spun.current = true\n    latest.current.step()\n    timer.current = setTimeout(tick, SPIN_INTERVAL)\n  }\n\n  return {\n    onPress: () => {\n      if (!spun.current) {\n        latest.current.step()\n      }\n    },\n    onPressIn: () => {\n      clearTimeout(timer.current)\n      spun.current = false\n      timer.current = setTimeout(tick, SPIN_DELAY)\n    },\n    onPressOut: () => {\n      clearTimeout(timer.current)\n    },\n  }\n}\n\n/**\n * Says the field's text after a stepper press, once the field has written\n * it, on iOS and Android, where the screen reader stays on the stepper.\n * Wrap each step in what it returns.\n */\nfunction useStepAnnouncement(text: string) {\n  const pending = useRef(false)\n\n  useEffect(() => {\n    if (pending.current) {\n      pending.current = false\n      AccessibilityInfo.announceForAccessibility(text)\n    }\n  }, [text])\n\n  return (step: () => void) => () => {\n    pending.current = Platform.OS === 'ios' || Platform.OS === 'android'\n    step()\n  }\n}\n\nexport { NumberField }\nexport type { NumberFieldProps }\n"],"mappings":"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"}

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

@@ -0,0 +1,70 @@
+import { MarkImageProps } from "../../mark/index.js";
+import { StyleProp, View, ViewProps, ViewStyle } from "react-native";
+import { Ref } from "react";
+//#region src/components/product-icon/index.d.ts
+type ProductIconProps = Omit<ViewProps, 'children' | 'style'> & {
+  /**
+   * Hides the mark from screen readers, for one beside the name of what it
+   * identifies, where it would otherwise announce the name a second time.
+   * `name` still supplies the initial, and is not announced.
+   * @default false
+   */
+  readonly decorative?: boolean;
+  /**
+   * Props for the mark's own `Image`: `crossOrigin` and `referrerPolicy` for
+   * where it is served from, and `resizeMethod`, `fadeDuration` and
+   * `progressiveRenderingEnabled` for how Android decodes and shows it.
+   */
+  readonly imgProps?: MarkImageProps;
+  /**
+   * What this identifies. Supplies both the fallback initial and the
+   * accessible name, so a screen reader announces the thing rather than
+   * reading a letter aloud. The initial is the name's first letter, number or
+   * emoji, passing over punctuation it opens with: a handle's at sign, a
+   * channel's hash or a bracket.
+   */
+  readonly name: string;
+  readonly ref?: Ref<View>;
+  /**
+   * Edge length: `sm` 36dp, `md` 40dp, `lg` 56dp. The same three Avatar
+   * uses, so the two are interchangeable wherever one leads a row or a card.
+   * @default 'md'
+   */
+  readonly size?: 'lg' | 'md' | 'sm';
+  /**
+   * The mark to show in place of the initial. The initial stays until it has
+   * loaded, and comes back if it fails.
+   */
+  readonly src?: string;
+  readonly style?: StyleProp<ViewStyle>;
+  /**
+   * Which container and on-container colour pair to tint the fallback with.
+   * It is the fallback's own background, so it is gone once `src` has loaded
+   * rather than sitting behind the mark.
+   * @default 'primary'
+   */
+  readonly tone?: 'negative' | 'positive' | 'primary' | 'secondary' | 'tertiary';
+};
+/**
+ * A small square mark identifying something that is not a person, such as
+ * an application, a service or a brand. Reach for Avatar when it is a
+ * person.
+ *
+ * ```tsx
+ * <ProductIcon name="First item" src={logo} />
+ * ```
+ *
+ * The mark is letterboxed rather than cropped, so a logo of any aspect ratio
+ * can be handed over as it was drawn.
+ *
+ * It is announced as an image named by `name`. When the thing's name is
+ * already written next to the mark, mark it `decorative`, so a screen reader
+ * reads the name once.
+ *
+ * The initial is taken in the device's locale. `style`, `ref` and `testID`
+ * land on the square.
+ */
+declare function ProductIcon({ size, tone, ...props }: ProductIconProps): import("react").JSX.Element;
+//#endregion
+export { ProductIcon, type ProductIconProps };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/product-icon/index.js

@@ -0,0 +1,60 @@
+import { Mark } from "../../mark/index.js";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/product-icon/index.tsx
+/**
+* A small square mark identifying something that is not a person, such as
+* an application, a service or a brand. Reach for Avatar when it is a
+* person.
+*
+* ```tsx
+* <ProductIcon name="First item" src={logo} />
+* ```
+*
+* The mark is letterboxed rather than cropped, so a logo of any aspect ratio
+* can be handed over as it was drawn.
+*
+* It is announced as an image named by `name`. When the thing's name is
+* already written next to the mark, mark it `decorative`, so a screen reader
+* reads the name once.
+*
+* The initial is taken in the device's locale. `style`, `ref` and `testID`
+* land on the square.
+*/
+function ProductIcon(t0) {
+	const $ = c(8);
+	let props;
+	let t1;
+	let t2;
+	if ($[0] !== t0) {
+		({size: t1, tone: t2, ...props} = t0);
+		$[0] = t0;
+		$[1] = props;
+		$[2] = t1;
+		$[3] = t2;
+	} else {
+		props = $[1];
+		t1 = $[2];
+		t2 = $[3];
+	}
+	const size = t1 === void 0 ? "md" : t1;
+	const tone = t2 === void 0 ? "primary" : t2;
+	let t3;
+	if ($[4] !== props || $[5] !== size || $[6] !== tone) {
+		t3 = /* @__PURE__ */ jsx(Mark, {
+			...props,
+			kind: "thing",
+			size,
+			tone
+		});
+		$[4] = props;
+		$[5] = size;
+		$[6] = tone;
+		$[7] = t3;
+	} else t3 = $[7];
+	return t3;
+}
+//#endregion
+export { ProductIcon };
+
+//# sourceMappingURL=index.js.map

package/dist/components/product-icon/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["Ref","StyleProp","View","ViewProps","ViewStyle","MarkImageProps","Mark","ProductIconProps","Omit","decorative","imgProps","name","ref","size","src","style","tone","ProductIcon","t0","$","_c","props","t1","t2","undefined","t3","_c"],"sources":["../../../src/components/product-icon/index.tsx"],"sourcesContent":["import type { Ref } from 'react'\nimport type { StyleProp, View, ViewProps, ViewStyle } from 'react-native'\n\nimport type { MarkImageProps } from '../../mark'\n\nimport { Mark } from '../../mark'\n\n// The counterpart to Avatar: Avatar stands for a person, this stands for\n// everything else, such as an application, a service or a brand. It is drawn\n// as a rounded square with the mark letterboxed, and its tone tints the\n// fallback rather than the square. The header of `src/mark/styles.ts` says\n// why on all three counts.\n//\n// The box, the sizes, the tones, the mark's loading and the labelling are\n// the mark's in `src/mark`, which Avatar draws a person through as well. No\n// Material Design page draws a product mark, so its sizes are Avatar's, 36,\n// 40 and 56, which is what lets a mark and a person fill the same slot, and\n// its corner is the small one from the radius scale, as web's is.\n\ntype ProductIconProps = Omit<ViewProps, 'children' | 'style'> & {\n  /**\n   * Hides the mark from screen readers, for one beside the name of what it\n   * identifies, where it would otherwise announce the name a second time.\n   * `name` still supplies the initial, and is not announced.\n   * @default false\n   */\n  readonly decorative?: boolean\n  /**\n   * Props for the mark's own `Image`: `crossOrigin` and `referrerPolicy` for\n   * where it is served from, and `resizeMethod`, `fadeDuration` and\n   * `progressiveRenderingEnabled` for how Android decodes and shows it.\n   */\n  readonly imgProps?: MarkImageProps\n  /**\n   * What this identifies. Supplies both the fallback initial and the\n   * accessible name, so a screen reader announces the thing rather than\n   * reading a letter aloud. The initial is the name's first letter, number or\n   * emoji, passing over punctuation it opens with: a handle's at sign, a\n   * channel's hash or a bracket.\n   */\n  readonly name: string\n  readonly ref?: Ref<View>\n  /**\n   * Edge length: `sm` 36dp, `md` 40dp, `lg` 56dp. The same three Avatar\n   * uses, so the two are interchangeable wherever one leads a row or a card.\n   * @default 'md'\n   */\n  readonly size?: 'lg' | 'md' | 'sm'\n  /**\n   * The mark to show in place of the initial. The initial stays until it has\n   * loaded, and comes back if it fails.\n   */\n  readonly src?: string\n  readonly style?: StyleProp<ViewStyle>\n  /**\n   * Which container and on-container colour pair to tint the fallback with.\n   * It is the fallback's own background, so it is gone once `src` has loaded\n   * rather than sitting behind the mark.\n   * @default 'primary'\n   */\n  readonly tone?: 'negative' | 'positive' | 'primary' | 'secondary' | 'tertiary'\n}\n\n/**\n * A small square mark identifying something that is not a person, such as\n * an application, a service or a brand. Reach for Avatar when it is a\n * person.\n *\n * ```tsx\n * <ProductIcon name=\"First item\" src={logo} />\n * ```\n *\n * The mark is letterboxed rather than cropped, so a logo of any aspect ratio\n * can be handed over as it was drawn.\n *\n * It is announced as an image named by `name`. When the thing's name is\n * already written next to the mark, mark it `decorative`, so a screen reader\n * reads the name once.\n *\n * The initial is taken in the device's locale. `style`, `ref` and `testID`\n * land on the square.\n */\nfunction ProductIcon({\n  size = 'md',\n  tone = 'primary',\n  ...props\n}: ProductIconProps) {\n  return <Mark {...props} kind=\"thing\" size={size} tone={tone} />\n}\n\nexport type { ProductIconProps }\n\nexport { ProductIcon }\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAkFA,SAAAiB,YAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,CAAA;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAJ,EAAA,OAAAD,IAAA;EAAqB,CAAA,CAAAL,MAAAS,IAAAN,MAAAO,IAAA,GAAAF,SAAAH;EAIFC,EAAA,KAAAD;EAAAC,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,KAAAI;CAAA,OAAA;EAAAF,QAAAF,EAAA;EAAAG,KAAAH,EAAA;EAAAI,KAAAJ,EAAA;CAAA;CAHjB,MAAAN,OAAAS,OAAAE,KAAAA,IAAA,OAAAF;CACA,MAAAN,OAAAO,OAAAC,KAAAA,IAAA,YAAAD;CAAgB,IAAAE;CAAA,IAAAN,EAAA,OAAAE,SAAAF,EAAA,OAAAN,QAAAM,EAAA,OAAAH,MAAA;EAGTS,KAAA,oBAAC,MAAD;GAAK,GAAKJ;GAAY,MAAA;GAAcR;GAAYG;EAAI,CAAA;EAAIG,EAAA,KAAAE;EAAAF,EAAA,KAAAN;EAAAM,EAAA,KAAAH;EAAAG,EAAA,KAAAM;CAAA,OAAAA,KAAAN,EAAA;CAAA,OAAxDM;AAAwD"}

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

@@ -0,0 +1,105 @@
+import { StyleProp, View, ViewProps, ViewStyle } from "react-native";
+import { ReactNode, Ref } from "react";
+//#region src/components/radio-group/index.d.ts
+/** Which way a `RadioGroup` lays out its buttons. */
+type RadioGroupOrientation = 'horizontal' | 'vertical';
+type RadioGroupProps = Omit<ViewProps, 'children' | 'style'> & {
+  /** The radio buttons, each with a `value` of its own. */
+  readonly children?: ReactNode;
+  /** The value selected at first, when the group keeps its own state. */
+  readonly defaultValue?: null | string;
+  /**
+   * A hint under the group. Replaced by `error` when there is one, so the
+   * two never stack.
+   */
+  readonly description?: string;
+  /**
+   * The problem with the current selection, in words. Its presence is what
+   * puts the group in its error state: the message and the label's colour
+   * both follow from it.
+   */
+  readonly error?: string;
+  /**
+   * Draws every button disabled, and takes no presses.
+   * @default false
+   */
+  readonly isDisabled?: boolean;
+  /**
+   * Shows the selection without letting a press change it.
+   * @default false
+   */
+  readonly isReadOnly?: boolean;
+  /**
+   * What the group is for. Required rather than optional: a set of radio
+   * buttons with no name is a set a screen reader cannot introduce.
+   */
+  readonly label: string;
+  /** Called with the newly selected value whenever a press changes it. */
+  readonly onChange?: (value: string) => void;
+  /**
+   * Lays the buttons one under another, or along a line that wraps.
+   * @default 'vertical'
+   */
+  readonly orientation?: RadioGroupOrientation;
+  readonly ref?: Ref<View>;
+  readonly style?: StyleProp<ViewStyle>;
+  /**
+   * The selected value, for a call site holding the state itself with
+   * `onChange`. `null` selects nothing.
+   */
+  readonly value?: null | string;
+};
+type RadioProps = Omit<ViewProps, 'children' | 'style'> & {
+  /**
+   * The label, beside the button. A button that a row labels some other way
+   * leaves it out and passes `aria-label` instead.
+   */
+  readonly children?: ReactNode;
+  /** A hint under the label, read with the button. */
+  readonly description?: string;
+  /**
+   * Draws this button disabled, and takes no presses on it.
+   * @default false
+   */
+  readonly isDisabled?: boolean;
+  readonly ref?: Ref<View>;
+  readonly style?: StyleProp<ViewStyle>;
+  /** The entry this button stands for, which the group reports when chosen. */
+  readonly value: string;
+};
+/**
+ * One option of a `RadioGroup`, with its label and optionally a description
+ * under it. It names the entry it stands for with `value`; the selection is
+ * the group's, so a `Radio` is only ever drawn inside one.
+ *
+ * A screen reader hears it as a radio button named by its label, checked or
+ * not, followed by the line under it. A press anywhere on the button or the
+ * label selects it, and the row takes presses over the 48dp target the page
+ * asks of the button. `style`, `ref` and `testID` land on the view holding
+ * the row and the line under it, which is the element a layout positions.
+ */
+declare function Radio({ 'aria-label': ariaLabel, children, description, isDisabled: ownDisabled, style, value, ...props }: RadioProps): import("react").JSX.Element;
+/**
+ * A labelled set of radio buttons with one selected value between them. The
+ * value is React Stately's, as web's is: pass `value` with `onChange` to
+ * control it, or `defaultValue` to let the group keep its own, and each
+ * `Radio` inside names the entry it stands for. Disabled, read-only and the
+ * error state reach every button from here, and `orientation="horizontal"`
+ * lays the buttons along a line.
+ *
+ * ```tsx
+ * <RadioGroup defaultValue="first" label="Label">
+ *   <Radio value="first">First item</Radio>
+ *   <Radio value="second">Second item</Radio>
+ * </RadioGroup>
+ * ```
+ *
+ * A screen reader hears it as a radio group named by its label. On the web
+ * the line under it describes the group, as web's does; on iOS and Android
+ * it is read after the buttons, where it sits. `style`, `ref` and `testID`
+ * land on the group as a whole, which is the element a layout positions.
+ */
+declare function RadioGroup({ children, defaultValue, description, error, isDisabled, isReadOnly, label, onChange, orientation, style, value, ...props }: RadioGroupProps): import("react").JSX.Element;
+//#endregion
+export { Radio, RadioGroup, type RadioGroupOrientation, type RadioGroupProps, type RadioProps };
+//# sourceMappingURL=index.d.ts.map