NumberStepper

A field is typed into and this is not. It has no keyboard, no caret, no parse, no isInvalid and no bounds to apply late — a value that can only be pressed into existence is inside its range at every moment.

What the two share is the arithmetic, and nothing else. stepNumber, clampNumber and their rounding live in utils/number.ts, so neither component owns them and both read the same answers.

It is out of flow and painted behind everything after it, so its place in the JSX is what puts it under the rest rather than over it. Slider.Track's arrangement, and its reason: a ground a caller cannot leave out is a ground a caller cannot replace either.

The inset is the shape. The buttons are the control's full height and the pill is shorter, so the two circles stand proud of the ground between them. A pill as tall as its buttons is a segmented control, which says "pick one" rather than "more of it".

It takes no touches and is hidden from the accessibility tree — a ground is not a control.

Two buttons on one control are two targets: pressing the plus must not light the minus. That is why the recipe has no bgPressed and the press is the shared PressableFeedback treatment instead — the CloseButton's arrangement, for the CloseButton's reason.

A spent button fades its mark and keeps its fill, and stops taking presses. The mark and not the box, because a button dimmed whole goes translucent — and a translucent button stops hiding the pill it is raised off, so the ground reads straight through the circle. It is also the wrong thing to say: the affordance is gone, the button is still there.

Which end is spent is asked of the result rather than of the bound: a value half a step short of the ceiling can still reach it, and a button dead at that point strands the reader.

With no children each draws its own mark — one bar, or two a quarter turn apart — so a stepper works in a project that has installed no icon set.

<NumberStepper.Decrement
  accessibilityLabel={quantity === 1 ? 'Retirer du panier' : 'Un de moins'}
  onPress={quantity === 1 ? remove : undefined}
>
  {quantity === 1 ? <Icon as={TrashIcon} color={theme.colors.danger} /> : undefined}
</NumberStepper.Decrement>

Not a prop of its own. The condition is the caller's — it is a basket row's rule, not a stepper's — and both halves of it are already props this slot has.

A caller's own onPress replaces the step rather than running beside it: removing the row is not also decrementing it.

With no children it is the number written through formatOptions, and an em dash while there is none — an em dash and not a zero, because a stepper that has never been pressed is holding nothing rather than holding none.

A function child is given the number itself, for a unit, a plural, or a word in place of a digit:

<NumberStepper.Value>
  {value => `${value ?? 0} ${value === 1 ? 'convive' : 'convives'}`}
</NumberStepper.Value>

It keeps the page's own ink whatever the buttons are painted, because it sits on the pill rather than on a button.

Value shrinks and then truncates: it is the part of the control that can afford to lose room, because the buttons are touch targets. And the buttons carry a zIndex above it, so a number that has run out of room can never end up painted on top of the leading circle — which it otherwise would, since it is written between the two.

One line, always. A second line is a row taller than its own buttons. Pass numberOfLines={0} if a Value of yours really has to wrap.

There is no fullWidth. The root hugs its content, and alignSelf is a style prop (R14) like any other:

<NumberStepper alignSelf="stretch">
  <NumberStepper.Track />
  <NumberStepper.Decrement accessibilityLabel="Un de moins" />
  <NumberStepper.Value flex={1} />
  <NumberStepper.Increment accessibilityLabel="Un de plus" />
</NumberStepper>