@lotics/ui 12.1.2 → 13.7.1

package/src/inline_number_input.tsx

@@ -1,7 +1,7 @@
 import { useCallback } from "react";
 import type { KeyboardEvent } from "react";
 import { NumberInput } from "./number_input";
-import { type InlineEditBackground, InlineEditFrame, useInlineEdit, type InlineEditControls } from "./inline_edit";
+import { type InlineEditVariant, InlineEditFrame, useInlineEdit, type InlineEditControls } from "./inline_edit";
 
 export interface InlineNumberInputProps {
   value: number | null;
@@ -16,7 +16,7 @@ export interface InlineNumberInputProps {
   disabled?: boolean;
   accessibilityLabel?: string;
   /** Resting surface — "tint" (default, the zinc-50 chip) or "transparent". */
-  background?: InlineEditBackground;
+  variant?: InlineEditVariant;
 }
 
 /**
@@ -25,7 +25,7 @@ export interface InlineNumberInputProps {
  * the bare numeric field at the same height, so the form never reflows.
  */
 export function InlineNumberInput(props: InlineNumberInputProps) {
-  const { value, onSave, format, placeholder, min, max, controls = "blur", disabled, accessibilityLabel , background } = props;
+  const { value, onSave, format, placeholder, min, max, controls = "blur", disabled, accessibilityLabel , variant } = props;
   const edit = useInlineEdit<number | null>({ value, onSave });
 
   const onKeyDown = useCallback(
@@ -45,7 +45,7 @@ export function InlineNumberInput(props: InlineNumberInputProps) {
 
   return (
     <InlineEditFrame
-      background={background}
+      variant={variant}
       editing={edit.editing}
       display={display}
       placeholder={placeholder}

package/src/inline_select.tsx

@@ -1,125 +1,231 @@
-import { useCallback, useState } from "react";
-import { View } from "react-native";
+import { useState, type ReactNode } from "react";
+import { View, StyleSheet } from "react-native";
 import { Icon } from "./icon";
 import { Text } from "./text";
+import { Badge } from "./badge";
 import { colors } from "./colors";
 import { Popover, PopoverTrigger, PopoverContent } from "./popover";
 import { OptionList } from "./option_list";
 import type { PickerOption } from "./picker";
 import { ActivityIndicator } from "./activity_indicator";
-import { type InlineEditBackground, InlineEditView } from "./inline_edit";
+import { type InlineEditVariant, InlineEditView } from "./inline_edit";
 import { useLoticsLocale } from "./locale";
 
-export interface InlineSelectProps<T extends string, D = unknown> {
-  value: T | null;
-  onSave: (next: T) => void | Promise<void>;
-  /** Unset the field to empty. Provide it to make the value clearable: a compact
-   *  "Clear" button appears below the options whenever there IS a value. Kept
-   *  separate from `onSave` (whose next is a non-null `T`) so an app opts in
-   *  without every caller having to handle null. */
-  onClear?: () => void | Promise<void>;
+interface InlineSelectBaseProps<T extends string, D = unknown> {
   options: PickerOption<T, D>[];
   /** Custom option content in the dropdown (icon + label, two-line, a badge…).
    *  Omit for a plain label list — both render through the same `OptionList`. */
-  renderOptionContent?: (option: PickerOption<T, D>) => React.ReactNode;
-  /** Render the SELECTED value in the resting view as a node (an avatar chip, a
-   *  colored badge) instead of its plain label. Falls back to `renderOptionContent`
-   *  (so the trigger renders like the options), then the plain label, when omitted;
-   *  the empty state always shows the placeholder. */
-  renderSelected?: (selected: PickerOption<T, D>) => React.ReactNode;
-  placeholder?: string;
+  renderOptionContent?: (option: PickerOption<T, D>) => ReactNode;
+  /** Render ONE selected option as its resting chip — single: the value; multi:
+   *  each tag. Falls back to `renderOptionContent`, then the plain label (single) /
+   *  a zinc `Badge` (multi). The one seam for "how the selection looks". */
+  renderSelected?: (option: PickerOption<T, D>) => ReactNode;
+  /** Empty-state content: a string reads as muted placeholder text, a NODE renders
+   *  as-is (e.g. an avatar "add" ghost for an `avatarOnly` member cell). */
+  placeholder?: string | ReactNode;
   disabled?: boolean;
   accessibilityLabel?: string;
-  /** Resting surface — "tint" (default, the zinc-50 chip) or "transparent". */
-  background?: InlineEditBackground;
+  /** Form field (default) or grid cell — see {@link InlineEditVariant}. */
+  variant?: InlineEditVariant;
   /** Show an in-menu search box; default false. */
   searchable?: boolean;
+  /** Offer a "create" row when the query matches no option — picking it commits the
+   *  typed value (single) / adds it to the set (multi). Implies `searchable`. */
+  allowCustom?: boolean;
+  /** Label for the create row (default: `Add "<query>"`). */
+  customOptionLabel?: (query: string) => string | null;
 }
 
 /**
- * An inline-editable single-select. The selected value renders like its option
- * (`renderOptionContent`) — a badge stays a badge in the resting trigger, not just
- * text; clicking it floats the option list (an `OptionList`) in a popover anchored
- * to the view, so the row never changes height. Picking commits; dismissing reverts.
- * Pass `renderOptionContent` for rich options, or omit it for a plain label list.
+ * The inline-editable select — single by default, `multi` for a tag SET. Mirrors
+ * `Select`'s one-component/`multi` axis (there is no separate tag component). Value
+ * + `onSave` are typed by the mode: single is `T | null` and commits on pick; multi
+ * is `T[]` and commits the new set when the popover CLOSES (the inline blur-commit,
+ * applied to a set).
  */
-export function InlineSelect<T extends string, D = unknown>(props: InlineSelectProps<T, D>) {
-  const { value, onSave, onClear, options, renderOptionContent, renderSelected, placeholder, disabled, accessibilityLabel, searchable = false, background } = props;
-  const labels = useLoticsLocale().inline;
-  const [open, setOpen] = useState(false);
-  const [saving, setSaving] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  const selected = options.find((o) => o.value === value);
-
-  const pick = useCallback(
-    async (next: T) => {
-      setOpen(false);
-      if (next === value) return;
-      setSaving(true);
-      setError(null);
-      try {
-        await onSave(next);
-      } catch (e) {
-        setError(e instanceof Error && e.message ? e.message : labels.saveError);
-      } finally {
-        setSaving(false);
-      }
-    },
-    [value, onSave],
-  );
-
-  const clear = useCallback(async () => {
-    setOpen(false);
-    if (value == null || !onClear) return;
-    setSaving(true);
-    setError(null);
-    try {
-      await onClear();
-    } catch (e) {
-      setError(e instanceof Error && e.message ? e.message : labels.saveError);
-    } finally {
-      setSaving(false);
-    }
-  }, [value, onClear]);
+export type InlineSelectProps<T extends string, D = unknown> =
+  | (InlineSelectBaseProps<T, D> & {
+      multi?: false;
+      value: T | null;
+      onSave: (next: T) => void | Promise<void>;
+      /** Unset the field. Provide it for a "Clear" row whenever there IS a value —
+       *  kept separate from `onSave` (whose next is a non-null `T`). Single only. */
+      onClear?: () => void | Promise<void>;
+    })
+  | (InlineSelectBaseProps<T, D> & {
+      multi: true;
+      value: T[];
+      onSave: (next: T[]) => void | Promise<void>;
+    });
 
+/** The shared shell: the resting view (a `Popover` trigger) that floats an
+ *  `OptionList` — identical for single and multi; only the display + list differ. */
+function InlineSelectShell(props: {
+  open: boolean;
+  onOpenChange: (next: boolean) => void;
+  disabled?: boolean;
+  display: string | ReactNode;
+  placeholder?: string | ReactNode;
+  accessibilityLabel?: string;
+  variant?: InlineEditVariant;
+  saving: boolean;
+  error: string | null;
+  children: ReactNode;
+}) {
   return (
     <View>
-      <Popover open={open && !disabled} onOpenChange={setOpen} side="bottom" align="start" inheritTriggerWidth>
+      <Popover open={props.open && !props.disabled} onOpenChange={props.onOpenChange} side="bottom" align="start" inheritTriggerWidth>
         <PopoverTrigger>
           <InlineEditView
-            background={background}
-            display={selected ? (renderSelected ? renderSelected(selected) : renderOptionContent ? renderOptionContent(selected) : (selected.label ?? "")) : ""}
-            placeholder={placeholder}
-            disabled={disabled}
-            active={open && !disabled}
-            accessibilityLabel={accessibilityLabel}
+            variant={props.variant}
+            display={props.display}
+            placeholder={props.placeholder}
+            disabled={props.disabled}
+            active={props.open && !props.disabled}
+            accessibilityLabel={props.accessibilityLabel}
+            // A `cell` reads value-first: it drops the resting chevron (the column
+            // header + the uniformly-editable grid are the affordance), like the date
+            // cell drops its calendar glyph. A `form` field keeps the chevron. The
+            // saving spinner shows in both.
             trailing={
-              saving ? (
+              props.saving ? (
                 <ActivityIndicator size={16} color={colors.zinc[400]} />
-              ) : (
+              ) : props.variant === "cell" ? undefined : (
                 <Icon name="chevron-down" size={18} color={colors.zinc[400]} />
               )
             }
           />
         </PopoverTrigger>
-        <PopoverContent disableBodyScroll>
-          <OptionList
-            search={{ mode: searchable ? "internal" : "none" }}
-            options={options}
-            value={value}
-            onValueChange={(next) => void pick(next)}
-            onClear={onClear ? () => void clear() : undefined}
-            onRequestClose={() => setOpen(false)}
-            renderOptionContent={renderOptionContent}
-          />
-        </PopoverContent>
+        <PopoverContent disableBodyScroll>{props.children}</PopoverContent>
       </Popover>
-      {error ? (
-        <Text size="xs" color="danger" style={{ marginTop: 4 }}>
-          {error}
+      {props.error ? (
+        <Text size="xs" color="danger" style={styles.error}>
+          {props.error}
         </Text>
       ) : null}
     </View>
   );
 }
+
+export function InlineSelect<T extends string, D = unknown>(props: InlineSelectProps<T, D>) {
+  const { options, renderOptionContent, renderSelected, placeholder, disabled, accessibilityLabel, variant, searchable = false, allowCustom = false, customOptionLabel } = props;
+  const labels = useLoticsLocale().inline;
+  const [open, setOpen] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [draft, setDraft] = useState<T[]>(props.multi ? props.value : []);
+
+  const runSave = async (fn: () => void | Promise<void>) => {
+    setSaving(true);
+    setError(null);
+    try {
+      await fn();
+    } catch (e) {
+      setError(e instanceof Error && e.message ? e.message : labels.saveError);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const searchMode = searchable || allowCustom ? "internal" : "none";
+
+  if (props.multi) {
+    const { value, onSave } = props;
+    // Resolve each value to its option IN SELECTION ORDER; an `allowCustom` value not in
+    // `options` (a just-created tag) renders from a {value,label} fallback so it still shows
+    // (mirrors `Select`). Without allowCustom, an unknown value is dropped (→ nothing), as before.
+    const selected = value
+      .map((v) => options.find((o) => o.value === v) ?? (allowCustom ? { value: v, label: v } : null))
+      .filter((o): o is PickerOption<T, D> => o != null);
+    const chip = (o: PickerOption<T, D>) =>
+      renderSelected ? renderSelected(o) : renderOptionContent ? renderOptionContent(o) : <Badge label={o.label ?? String(o.value)} color="zinc" />;
+    const onOpenChange = (next: boolean) => {
+      if (next) {
+        setDraft(value);
+        setOpen(true);
+        return;
+      }
+      setOpen(false);
+      const changed = draft.length !== value.length || draft.some((v) => !value.includes(v));
+      if (changed) void runSave(() => onSave(draft));
+    };
+    return (
+      <InlineSelectShell
+        open={open}
+        onOpenChange={onOpenChange}
+        disabled={disabled}
+        display={selected.length > 0 ? <View style={styles.tags}>{selected.map((o) => <View key={o.value}>{chip(o)}</View>)}</View> : ""}
+        placeholder={placeholder}
+        accessibilityLabel={accessibilityLabel}
+        variant={variant}
+        saving={saving}
+        error={error}
+      >
+        <OptionList<T, true, D>
+          multi
+          search={{ mode: searchMode }}
+          options={options}
+          value={draft}
+          onValueChange={setDraft}
+          onRequestClose={() => onOpenChange(false)}
+          allowCustom={allowCustom}
+          customOptionLabel={customOptionLabel}
+          onCustomCommit={(raw) => {
+            const created = raw.trim() as T;
+            if (created && !draft.includes(created)) setDraft([...draft, created]);
+          }}
+          renderOptionContent={renderOptionContent ?? renderSelected}
+        />
+      </InlineSelectShell>
+    );
+  }
+
+  const { value, onSave, onClear } = props;
+  // An `allowCustom` value not in `options` renders from a fallback (like `Select`); a plain
+  // unknown value (a removed member/status) resolves to nothing → the placeholder shows.
+  const selected = options.find((o) => o.value === value) ?? (allowCustom && value != null ? { value, label: value } : undefined);
+  const pick = (next: T) => {
+    setOpen(false);
+    if (next === value) return;
+    void runSave(() => onSave(next));
+  };
+  const clear = () => {
+    setOpen(false);
+    if (value == null || !onClear) return;
+    void runSave(() => onClear());
+  };
+  return (
+    <InlineSelectShell
+      open={open}
+      onOpenChange={setOpen}
+      disabled={disabled}
+      display={selected ? (renderSelected ? renderSelected(selected) : renderOptionContent ? renderOptionContent(selected) : (selected.label ?? "")) : ""}
+      placeholder={placeholder}
+      accessibilityLabel={accessibilityLabel}
+      variant={variant}
+      saving={saving}
+      error={error}
+    >
+      <OptionList<T, false, D>
+        search={{ mode: searchMode }}
+        options={options}
+        value={value}
+        onValueChange={(next) => pick(next)}
+        onClear={onClear ? () => clear() : undefined}
+        onRequestClose={() => setOpen(false)}
+        allowCustom={allowCustom}
+        customOptionLabel={customOptionLabel}
+        onCustomCommit={(raw) => {
+          const created = raw.trim() as T;
+          if (created) pick(created);
+        }}
+        renderOptionContent={renderOptionContent}
+      />
+    </InlineSelectShell>
+  );
+}
+
+const styles = StyleSheet.create({
+  tags: { flexDirection: "row", alignItems: "center", flexWrap: "wrap", columnGap: 4, rowGap: 2 },
+  error: { marginTop: 4 },
+});

package/src/inline_text_input.tsx

@@ -1,7 +1,7 @@
 import { useCallback } from "react";
 import type { NativeSyntheticEvent, TextInputKeyPressEventData } from "react-native";
 import { TextInputField } from "./text_input_field";
-import { type InlineEditBackground, InlineEditFrame, useInlineEdit, type InlineEditControls } from "./inline_edit";
+import { type InlineEditVariant, InlineEditFrame, useInlineEdit, type InlineEditControls } from "./inline_edit";
 
 export interface InlineTextInputProps {
   value: string;
@@ -16,7 +16,7 @@ export interface InlineTextInputProps {
   /** Strike + mute the resting value (a completed item that stays editable). */
   struck?: boolean;
   /** Resting surface — "tint" (default, the zinc-50 chip) or "transparent". */
-  background?: InlineEditBackground;
+  variant?: InlineEditVariant;
   accessibilityLabel?: string;
 }
 
@@ -27,7 +27,7 @@ export interface InlineTextInputProps {
  * value in a dense record / detail surface.
  */
 export function InlineTextInput(props: InlineTextInputProps) {
-  const { value, onSave, placeholder, controls = "blur", disabled, struck, accessibilityLabel , background } = props;
+  const { value, onSave, placeholder, controls = "blur", disabled, struck, accessibilityLabel , variant } = props;
   const edit = useInlineEdit<string>({ value, onSave });
 
   const onKeyPress = useCallback(
@@ -49,7 +49,7 @@ export function InlineTextInput(props: InlineTextInputProps) {
 
   return (
     <InlineEditFrame
-      background={background}
+      variant={variant}
       editing={edit.editing}
       display={value}
       placeholder={placeholder}

package/src/inline_time_picker.tsx

@@ -3,7 +3,7 @@ import type { KeyboardEvent } from "react";
 import { Icon } from "./icon";
 import { colors } from "./colors";
 import { TimePicker } from "./time_picker";
-import { type InlineEditBackground, InlineEditFrame, useInlineEdit, type InlineEditControls } from "./inline_edit";
+import { type InlineEditVariant, InlineEditFrame, useInlineEdit, type InlineEditControls } from "./inline_edit";
 
 export interface InlineTimePickerProps {
   /** Canonical 24-hour "HH:mm", "" when empty. */
@@ -16,7 +16,7 @@ export interface InlineTimePickerProps {
   disabled?: boolean;
   accessibilityLabel?: string;
   /** Resting surface — "tint" (default, the zinc-50 chip) or "transparent". */
-  background?: InlineEditBackground;
+  variant?: InlineEditVariant;
 }
 
 /**
@@ -25,7 +25,7 @@ export interface InlineTimePickerProps {
  * field at the same height, so the form never reflows.
  */
 export function InlineTimePicker(props: InlineTimePickerProps) {
-  const { value, onSave, placeholder, controls = "blur", disabled, accessibilityLabel , background } = props;
+  const { value, onSave, placeholder, controls = "blur", disabled, accessibilityLabel , variant } = props;
   const edit = useInlineEdit<string>({ value, onSave });
 
   const onKeyDown = useCallback(
@@ -43,7 +43,7 @@ export function InlineTimePicker(props: InlineTimePickerProps) {
 
   return (
     <InlineEditFrame
-      background={background}
+      variant={variant}
       editing={edit.editing}
       display={value}
       placeholder={placeholder}

package/src/inset.tsx

@@ -0,0 +1,38 @@
+import { type ReactNode } from "react";
+import { View, StyleSheet } from "react-native";
+import { colors } from "./colors";
+
+interface InsetProps {
+  /** The grouped content — a sub-form's fields, an inline fill editor, a nested block. */
+  children: ReactNode;
+  /** Test id on the container. */
+  testID?: string;
+}
+
+/**
+ * A tinted, recessed content surface — the "well" INSIDE a Card or Section for a grouped
+ * sub-form, an inline fill editor, or a nested detail block. It carries the kit's
+ * nested-surface tokens (zinc-50 fill, 10 radius, 14 padding) and a 12 gap so stacked
+ * fields keep the form rhythm.
+ *
+ * `Inset` is NOT a `Callout`. A Callout is a status BAND — it announces a message, and
+ * for `warning`/`error` it is an ARIA `alert`. Wrapping form fields in an alert is wrong:
+ * a screen reader announces the whole form as one time-sensitive alert. The law is:
+ * **content + fields go in an `Inset`; a message goes in a `Callout`.**
+ */
+export function Inset({ children, testID }: InsetProps) {
+  return (
+    <View style={styles.inset} testID={testID}>
+      {children}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  inset: {
+    backgroundColor: colors.zinc[50],
+    borderRadius: 10,
+    padding: 14,
+    gap: 12,
+  },
+});

package/src/linked_record_box.tsx

@@ -0,0 +1,102 @@
+import { type ReactNode } from "react";
+import { View, Pressable, StyleSheet } from "react-native";
+import { PressableRow } from "./pressable_row";
+import { Text } from "./text";
+import { Icon, type IconName } from "./icon";
+import { colors } from "./colors";
+import { useFocusRing } from "./use_focus_ring";
+import { FOCUS_RING } from "./control_surface";
+
+interface LinkedRecordBoxProps {
+  /** The linked record's kind glyph (building-2 for a company, file-text for a record…). */
+  icon: IconName;
+  /** The linked record's display name. */
+  name: string;
+  /** A secondary identity line — a code, tax id, country, or "<desk> record". */
+  subtitle?: string;
+  /** Reference facts, stacked VERTICALLY (legible at any width, never squeezed). */
+  facts?: { label: string; value: string }[];
+  /** Width of the facts' label column (default 80). Widen for longer labels. */
+  factLabelWidth?: number;
+  /** Accessible name for opening the record (e.g. "Acme Corp — details"). */
+  doorLabel: string;
+  /** Opens the linked record's detail (drawer/page) — the WHOLE box presses this. */
+  onOpen: () => void;
+  /** The verbs, in a hairline-fenced footer at the bottom of the box, lifted above the door's
+   *  hit area. Convention: destructive LEFT, go-to RIGHT (a `<View style={{ flex: 1 }} />`
+   *  spacer between). The divider is drawn automatically when actions are present. Supplied by
+   *  the consumer so the labels stay localized and the verb set fits the link. */
+  actions?: ReactNode;
+}
+
+/**
+ * A LINKED RECORD shown for reference — a bordered box scoping ANOTHER record's data
+ * (identity glyph · name · facts), the WHOLE box a keyboard-accessible door into that record's
+ * detail. Use it wherever one record points at another (a shipment's customer, an invoice's
+ * party, a case's sibling); the picker / empty-state that REASSIGNS the link is the consumer's,
+ * shown in place of the box.
+ *
+ * The a11y contract it enforces (the error-prone part, hence a primitive): a container with
+ * interactive descendants must NEVER be `role="button"` (invalid HTML). So the box is a
+ * role-less `PressableRow`, an empty absolutely-positioned door sibling carries the tab stop /
+ * accessible name / focus ring, and the interior verbs lift above it via `zIndex`.
+ */
+export function LinkedRecordBox({ icon, name, subtitle, facts, factLabelWidth = 80, doorLabel, onOpen, actions }: LinkedRecordBoxProps) {
+  return (
+    <PressableRow onPress={onOpen} style={styles.box}>
+      <Door label={doorLabel} onPress={onOpen} />
+      <View style={styles.identity}>
+        <View style={styles.glyph}>
+          <Icon name={icon} size={17} color={colors.zinc[600]} />
+        </View>
+        <View style={{ flex: 1, minWidth: 0 }}>
+          <Text size="sm" weight="medium" numberOfLines={1}>{name}</Text>
+          {subtitle ? <Text size="xs" color="muted" numberOfLines={1}>{subtitle}</Text> : null}
+        </View>
+      </View>
+      {facts && facts.length > 0 ? (
+        <View style={{ gap: 6 }}>
+          {facts.map((f) => (
+            <View key={f.label} style={styles.fact}>
+              <Text size="sm" color="muted" style={{ width: factLabelWidth }}>{f.label}</Text>
+              <Text size="sm" style={{ flex: 1 }}>{f.value || "—"}</Text>
+            </View>
+          ))}
+        </View>
+      ) : null}
+      {actions ? (
+        <>
+          {/* full-bleed hairline fencing the verb footer off from the facts */}
+          <View style={styles.divider} />
+          <View style={styles.actions}>{actions}</View>
+        </>
+      ) : null}
+    </PressableRow>
+  );
+}
+
+// The keyboard DOOR: an empty absolutely-positioned sibling beneath the box content — a
+// button must NOT wrap the box's interactive descendants, so the door alone carries the tab
+// stop, accessible name, and focus ring; mouse presses ride the PressableRow surface.
+function Door({ label, onPress }: { label: string; onPress: () => void }) {
+  const { focusVisible, focusProps } = useFocusRing();
+  return (
+    <Pressable
+      accessibilityRole="button"
+      accessibilityLabel={label}
+      onPress={onPress}
+      {...focusProps}
+      style={[styles.door, focusVisible ? { boxShadow: FOCUS_RING } : null]}
+    />
+  );
+}
+
+const styles = StyleSheet.create({
+  box: { flexDirection: "column", alignItems: "stretch", borderWidth: 1, borderColor: colors.zinc[200], borderRadius: 10, paddingHorizontal: 16, paddingTop: 14, paddingBottom: 10, gap: 12 },
+  door: { position: "absolute", top: 0, right: 0, bottom: 0, left: 0, borderRadius: 10 },
+  identity: { flexDirection: "row", alignItems: "center", gap: 10 },
+  glyph: { width: 34, height: 34, borderRadius: 8, backgroundColor: colors.zinc[100], alignItems: "center", justifyContent: "center" },
+  fact: { flexDirection: "row", gap: 10 },
+  divider: { height: 1, backgroundColor: colors.zinc[100], marginHorizontal: -16 },
+  actions: { flexDirection: "row", alignItems: "center", flexWrap: "wrap", columnGap: 8, rowGap: 8, zIndex: 1 },
+});

package/src/number_input.tsx

@@ -28,7 +28,7 @@ export interface NumberInputProps {
 export function NumberInput(props: NumberInputProps) {
   const { value, onValueChange, min, max, disabled, onBlur, onKeyDown, autoFocus, testID, accessibilityLabel } = props;
   const binding = useFormField();
-  const describedBy = [binding?.descriptionId, binding?.errorId].filter(Boolean).join(" ") || undefined;
+  const describedBy = [binding?.descriptionId, binding?.warningId, binding?.errorId].filter(Boolean).join(" ") || undefined;
   const { focusVisible, focusProps } = useFocusRing({ always: true });
   const { hovered, hoverProps } = useHover();