@btndprojects/loam-ui-native 0.2.1 → 0.3.1

package/dist/{chunk-VAOAKWUK.js → chunk-KHZDNQQD.js}

@@ -1,7 +1,7 @@
 import { useLabels, useLoamLocale } from './chunk-APCWFOZW.js';
-import { Icon } from './chunk-UXGIW7OK.js';
+import { Icon } from './chunk-PCEFCOLN.js';
 import { useResolvedMotion } from './chunk-J64KGCGX.js';
-import 'react';
+import * as React from 'react';
 import { View, Text, Pressable, LayoutAnimation } from 'react-native';
 import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
 import { jsxs, jsx } from 'react/jsx-runtime';
@@ -10,7 +10,8 @@ var DEFAULT_LABELS = {
   items: "items",
   showing: (shown, total, noun) => `Showing ${shown} of ${total} ${noun}`,
   showAllName: (total, noun) => `Show all ${total} ${noun}`,
-  showAll: (total) => `Show all ${total}`
+  showAll: (total) => `Show all ${total}`,
+  dismiss: "Dismiss"
 };
 function TruncationNotice({
   shown,
@@ -21,6 +22,10 @@ function TruncationNotice({
   variant = "inline",
   size = "md",
   motion = "full",
+  tone = "neutral",
+  dismissible = false,
+  onDismiss,
+  icon,
   labels: labelsProp
 }) {
   const labels = useLabels("truncationNotice", DEFAULT_LABELS, labelsProp);
@@ -29,13 +34,21 @@ function TruncationNotice({
   const { styles } = useStyles(sheet, { variant, size });
   const theme = useLoamTheme("truncation-notice");
   const level = useResolvedMotion(motion, "truncation-notice");
-  if (shown >= total) return null;
+  const [dismissed, setDismissed] = React.useState(false);
+  if (shown >= total || dismissed) return null;
   const totalText = total.toLocaleString(locale);
   const message = labels.showing(shown.toLocaleString(locale), totalText, noun);
   const iconSize = size === "sm" ? theme.icon.xs : theme.icon.sm;
   const pad = variant === "bar" ? size === "sm" ? { paddingHorizontal: theme.space.s3, paddingVertical: theme.space.s2 } : { paddingHorizontal: theme.space.s4, paddingVertical: theme.space.s3 } : null;
-  return /* @__PURE__ */ jsxs(View, { style: [styles.base, pad], children: [
-    /* @__PURE__ */ jsx(Text, { style: styles.message, children: message }),
+  const toned = tone === "neutral" ? null : {
+    ink: theme.color[`${tone}OnSoft`],
+    fill: theme.color[`${tone}Soft`],
+    edge: theme.edge[tone]
+  };
+  const barTone = toned && variant === "bar" ? { backgroundColor: toned.fill, borderTopColor: toned.edge } : null;
+  return /* @__PURE__ */ jsxs(View, { style: [styles.base, pad, barTone], children: [
+    icon ? /* @__PURE__ */ jsx(Icon, { name: icon, size: iconSize, color: toned?.ink ?? theme.color.text2 }) : null,
+    /* @__PURE__ */ jsx(Text, { style: [styles.message, toned ? { color: toned.ink } : null], children: message }),
     onShowAll ? /* @__PURE__ */ jsxs(
       Pressable,
       {
@@ -56,10 +69,31 @@ function TruncationNotice({
         hitSlop: { top: theme.space.s2, bottom: theme.space.s2 },
         style: ({ pressed }) => [styles.action, pressed ? styles.pressed : null],
         children: [
-          /* @__PURE__ */ jsx(Text, { style: styles.actionLabel, children: labels.showAll(totalText) }),
-          actionIcon ? /* @__PURE__ */ jsx(Icon, { name: actionIcon, size: iconSize, color: theme.color.accentStrong }) : null
+          /* @__PURE__ */ jsx(Text, { style: [styles.actionLabel, toned ? { color: toned.ink } : null], children: labels.showAll(totalText) }),
+          actionIcon ? /* @__PURE__ */ jsx(
+            Icon,
+            {
+              name: actionIcon,
+              size: iconSize,
+              color: toned?.ink ?? theme.color.accentStrong
+            }
+          ) : null
         ]
       }
+    ) : null,
+    dismissible ? /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        accessibilityRole: "button",
+        accessibilityLabel: labels.dismiss,
+        hitSlop: theme.space.s2,
+        onPress: () => {
+          setDismissed(true);
+          onDismiss?.();
+        },
+        style: ({ pressed }) => [pressed ? styles.pressed : null],
+        children: /* @__PURE__ */ jsx(Icon, { name: "x", size: iconSize, color: toned?.ink ?? theme.color.text2 })
+      }
     ) : null
   ] });
 }

package/dist/chunk-KL4GDV4V.js

@@ -0,0 +1,131 @@
+import * as React from 'react';
+import { NativeModules, NativeEventEmitter, Platform } from 'react-native';
+
+// src/shortcuts-sheet/shortcuts-sheet.tsx
+var IOS_MOD = {
+  cmd: "command",
+  command: "command",
+  meta: "command",
+  mod: "command",
+  shift: "shift",
+  alt: "alternate",
+  option: "alternate",
+  opt: "alternate",
+  ctrl: "control",
+  control: "control"
+};
+var ANDROID_MOD = {
+  cmd: "CTRL",
+  command: "CTRL",
+  mod: "CTRL",
+  ctrl: "CTRL",
+  control: "CTRL",
+  meta: "META",
+  shift: "SHIFT",
+  alt: "ALT",
+  option: "ALT",
+  opt: "ALT"
+};
+var IOS_KEY = {
+  up: "UIKeyInputUpArrow",
+  down: "UIKeyInputDownArrow",
+  left: "UIKeyInputLeftArrow",
+  right: "UIKeyInputRightArrow",
+  esc: "UIKeyInputEscape",
+  escape: "UIKeyInputEscape",
+  enter: "\r",
+  return: "\r",
+  tab: "	",
+  space: " ",
+  backspace: "\b"
+};
+var ANDROID_KEY = {
+  up: "KEYCODE_DPAD_UP",
+  down: "KEYCODE_DPAD_DOWN",
+  left: "KEYCODE_DPAD_LEFT",
+  right: "KEYCODE_DPAD_RIGHT",
+  esc: "KEYCODE_ESCAPE",
+  escape: "KEYCODE_ESCAPE",
+  enter: "KEYCODE_ENTER",
+  return: "KEYCODE_ENTER",
+  tab: "KEYCODE_TAB",
+  space: "KEYCODE_SPACE",
+  backspace: "KEYCODE_DEL",
+  ",": "KEYCODE_COMMA",
+  ".": "KEYCODE_PERIOD",
+  "/": "KEYCODE_SLASH",
+  ";": "KEYCODE_SEMICOLON",
+  "[": "KEYCODE_LEFT_BRACKET",
+  "]": "KEYCODE_RIGHT_BRACKET",
+  "-": "KEYCODE_MINUS",
+  "=": "KEYCODE_EQUALS",
+  "+": "KEYCODE_PLUS"
+};
+function split(binding) {
+  if (/\s/.test(binding.trim())) return null;
+  const parts = binding.endsWith("++") ? [...binding.slice(0, -2).split("+"), "+"] : binding.split("+");
+  const key = parts.pop();
+  if (!key) return null;
+  return { mods: parts.map((m) => m.toLowerCase()), key };
+}
+function toKeyCommands(shortcuts) {
+  const out = [];
+  for (const s of shortcuts) {
+    const parsed = split(s.binding);
+    if (!parsed) continue;
+    const lower = parsed.key.toLowerCase();
+    out.push({
+      id: s.id,
+      input: IOS_KEY[lower] ?? (parsed.key.length === 1 ? lower : parsed.key),
+      modifierFlags: parsed.mods.flatMap((m) => IOS_MOD[m] ? [IOS_MOD[m]] : []),
+      discoverabilityTitle: s.label,
+      disabled: s.disabledReason !== void 0
+    });
+  }
+  return out;
+}
+function toKeyboardShortcutGroups(shortcuts, fallbackGroup = "General") {
+  const groups = /* @__PURE__ */ new Map();
+  for (const s of shortcuts) {
+    const parsed = split(s.binding);
+    if (!parsed) continue;
+    const lower = parsed.key.toLowerCase();
+    const keyCode = ANDROID_KEY[lower] ?? (/^[a-z0-9]$/.test(lower) ? `KEYCODE_${lower.toUpperCase()}` : `KEYCODE_${parsed.key.toUpperCase()}`);
+    const modifiers = [
+      ...new Set(parsed.mods.flatMap((m) => ANDROID_MOD[m] ? [ANDROID_MOD[m]] : []))
+    ];
+    const label = s.group ?? fallbackGroup;
+    const list = groups.get(label) ?? [];
+    list.push({
+      id: s.id,
+      label: s.label,
+      keyCode,
+      modifiers,
+      disabled: s.disabledReason !== void 0
+    });
+    groups.set(label, list);
+  }
+  return [...groups].map(([label, items]) => ({ label, items }));
+}
+function useKeyboardShortcuts(shortcuts, platform = Platform.OS === "android" ? "android" : "ios") {
+  const latest = React.useRef(shortcuts);
+  latest.current = shortcuts;
+  React.useEffect(() => {
+    const mod = NativeModules.LoamKeyCommands;
+    if (!mod) return;
+    if (platform === "android") mod.setShortcutGroups?.(toKeyboardShortcutGroups(shortcuts));
+    else mod.setKeyCommands?.(toKeyCommands(shortcuts));
+  }, [shortcuts, platform]);
+  React.useEffect(() => {
+    const mod = NativeModules.LoamKeyCommands;
+    if (!mod?.addListener) return;
+    const emitter = new NativeEventEmitter(mod);
+    const sub = emitter.addListener("onKeyCommand", (e) => {
+      const hit = latest.current.find((s) => s.id === e.id);
+      if (hit && hit.disabledReason === void 0) hit.run?.();
+    });
+    return () => sub.remove();
+  }, []);
+}
+
+export { toKeyCommands, toKeyboardShortcutGroups, useKeyboardShortcuts };

package/dist/{chunk-Q6NKEPRE.js → chunk-KNILMM4H.js}

@@ -1,6 +1,8 @@
-import { useColorTransition } from './chunk-7BUIKDD6.js';
+import { FieldMessage } from './chunk-BTRMA7GC.js';
+import { useColorTransition } from './chunk-KXLDK6HB.js';
 import { haptics } from './chunk-NY2U3PBI.js';
-import { Icon } from './chunk-UXGIW7OK.js';
+import { useFocusRing } from './chunk-2YKVID2V.js';
+import { Icon } from './chunk-PCEFCOLN.js';
 import { useResolvedMotion, springConfig } from './chunk-J64KGCGX.js';
 import * as React from 'react';
 import { Easing, Animated, Pressable, View, Text, Platform } from 'react-native';
@@ -10,6 +12,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 var BOX = { sm: 16, md: 24 };
 var GLYPH = { sm: 12, md: 14 };
 var CHECK_STROKE = 3.5;
+var HALO = 44;
 function nextChecked(current) {
   return current === true ? false : true;
 }
@@ -29,7 +32,10 @@ function Checkbox({
   disabled = false,
   motion = "full",
   accessibilityLabel,
-  label
+  label,
+  error = false,
+  tone = "accent",
+  hint
 }) {
   const isControlled = checked !== void 0;
   const [internal, setInternal] = React.useState(defaultChecked);
@@ -41,66 +47,90 @@ function Checkbox({
   const os = useResolvedPlatform(platform);
   const { styles } = useStyles(sheet, { shape: `${os}-${size}`, disabled });
   const hasLabel = label != null && label !== "";
+  const invalid = Boolean(error);
+  const onFill = theme.color[tone];
+  const onInk = theme.color[`${tone}Ink`];
+  const message = typeof error === "string" && error ? error : hint;
   const resolvedMotion = useResolvedMotion(motion, "checkbox");
   const animateColour = resolvedMotion !== "none";
   const animatePress = resolvedMotion === "full";
   const easing = React.useMemo(() => Easing.bezier(...theme.easing.base), [theme.easing.base]);
   const fillMs = isOn ? theme.spring.de.duration : theme.spring.fe.duration;
   const backgroundColor = useColorTransition(
-    isOn ? theme.color.accent : "transparent",
+    isOn ? onFill : "transparent",
     fillMs,
     easing,
     animateColour
   );
   const borderColor = useColorTransition(
-    isOn ? theme.color.accent : theme.color.borderStrong,
+    isOn ? onFill : invalid ? theme.color.danger : theme.color.text3,
     fillMs,
     easing,
     animateColour
   );
+  const android = os === "android";
+  const focusRing = useFocusRing(
+    hasLabel ? theme.radius.sm : android ? theme.radius.xs : theme.radius.full
+  );
   const scale = React.useRef(new Animated.Value(1)).current;
   const spring = (to) => Animated.spring(scale, {
     ...springConfig(theme, "fs"),
     toValue: to,
     useNativeDriver: true
   }).start();
+  const [pressed, setPressed] = React.useState(false);
+  const pressIn = disabled ? void 0 : android ? () => setPressed(true) : animatePress ? () => spring(0.97) : void 0;
+  const pressOut = disabled ? void 0 : android ? () => setPressed(false) : animatePress ? () => spring(1) : void 0;
   const handlePress = () => {
     const next = nextChecked(value);
     if (!isControlled) setInternal(next);
     haptics.impact("light");
     onCheckedChange?.(next);
   };
-  return /* @__PURE__ */ jsxs(
+  const control = /* @__PURE__ */ jsxs(
     Pressable,
     {
       accessibilityRole: "checkbox",
       accessibilityLabel: accessibilityLabel ?? label,
       accessibilityState: { checked: isIndeterminate ? "mixed" : isChecked, disabled },
       "aria-checked": isIndeterminate ? "mixed" : isChecked,
+      "aria-invalid": invalid || void 0,
       disabled,
       hitSlop: hasLabel ? void 0 : Math.max(0, (theme.tapMin - BOX[size]) / 2),
-      style: hasLabel ? [styles.row, { minHeight: theme.tapMin }] : void 0,
+      style: [hasLabel ? [styles.row, { minHeight: theme.tapMin }] : null, focusRing.style],
+      onFocus: focusRing.handlers.onFocus,
+      onBlur: focusRing.handlers.onBlur,
       onPress: disabled ? void 0 : handlePress,
-      onPressIn: disabled || !animatePress ? void 0 : () => spring(0.96),
-      onPressOut: disabled || !animatePress ? void 0 : () => spring(1),
+      onPressIn: pressIn,
+      onPressOut: pressOut,
       children: [
-        /* @__PURE__ */ jsx(
-          Animated.View,
-          {
-            testID: "checkbox-box",
-            style: [styles.box, { backgroundColor, borderColor, transform: [{ scale }] }],
-            children: isOn ? /* @__PURE__ */ jsx(
-              Glyph,
-              {
-                name: isIndeterminate ? "minus" : "check",
-                size: GLYPH[size],
-                color: theme.color.accentInk,
-                animate: animatePress
-              },
-              isIndeterminate ? "minus" : "check"
-            ) : null
-          }
-        ),
+        /* @__PURE__ */ jsxs(View, { style: styles.markWrap, children: [
+          android && pressed ? /* @__PURE__ */ jsx(
+            View,
+            {
+              testID: "checkbox-halo",
+              pointerEvents: "none",
+              style: [styles.halo, { backgroundColor: theme.state.pressed }]
+            }
+          ) : null,
+          /* @__PURE__ */ jsx(
+            Animated.View,
+            {
+              testID: "checkbox-box",
+              style: [styles.box, { backgroundColor, borderColor, transform: [{ scale }] }],
+              children: isOn ? /* @__PURE__ */ jsx(
+                Glyph,
+                {
+                  name: isIndeterminate ? "minus" : "check",
+                  size: GLYPH[size],
+                  color: onInk,
+                  animate: animatePress
+                },
+                isIndeterminate ? "minus" : "check"
+              ) : null
+            }
+          )
+        ] }),
         hasLabel ? (
           // Part of the control's name already — not a second element to reach.
           /* @__PURE__ */ jsx(View, { accessible: false, importantForAccessibility: "no", style: styles.labelWrap, children: /* @__PURE__ */ jsx(Text, { style: styles.label, children: label }) })
@@ -108,6 +138,11 @@ function Checkbox({
       ]
     }
   );
+  if (!message) return control;
+  return /* @__PURE__ */ jsxs(View, { style: styles.field, children: [
+    control,
+    /* @__PURE__ */ jsx(FieldMessage, { invalid: invalid && typeof error === "string", children: message })
+  ] });
 }
 function Glyph({
   name,
@@ -136,11 +171,21 @@ function boxStyle(os, size, radius) {
   return {
     width: BOX[size],
     height: BOX[size],
-    borderRadius: os === "ios" ? radius.full : radius.sm
+    borderRadius: os === "ios" ? radius.full : radius.xs
   };
 }
 var sheet = createStyleSheet((theme) => ({
-  row: { flexDirection: "row", alignItems: "center", gap: theme.space.s2 },
+  // Label 10 from the box (R10).
+  row: { flexDirection: "row", alignItems: "center", gap: theme.space[10] },
+  // Message under the control, aligned with the label's start (box + R10 gap).
+  field: { gap: theme.space.s1 },
+  markWrap: { alignItems: "center", justifyContent: "center" },
+  halo: {
+    position: "absolute",
+    width: HALO,
+    height: HALO,
+    borderRadius: HALO / 2
+  },
   labelWrap: { flexShrink: 1 },
   label: {
     fontFamily: theme.font.sans,

package/dist/chunk-KRBUZV45.js

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { TIMING } from '@btndprojects/loam-tokens';
+
+// src/lib/delayed-loading.ts
+function useDelayedLoading(loading, delay = TIMING.loadingFloor) {
+  const [visible, setVisible] = React.useState(false);
+  const shownAt = React.useRef(0);
+  React.useEffect(() => {
+    if (loading) {
+      if (visible) return;
+      const t2 = setTimeout(() => {
+        shownAt.current = Date.now();
+        setVisible(true);
+      }, delay);
+      return () => clearTimeout(t2);
+    }
+    if (!visible) return;
+    const remaining = Math.max(0, delay - (Date.now() - shownAt.current));
+    const t = setTimeout(() => setVisible(false), remaining);
+    return () => clearTimeout(t);
+  }, [loading, visible, delay]);
+  return visible;
+}
+
+export { useDelayedLoading };

package/dist/{chunk-7BUIKDD6.js → chunk-KXLDK6HB.js}

@@ -1,10 +1,11 @@
-import { NO_UA_FOCUS_RING } from './chunk-3NMD74ZU.js';
+import { fieldSurfaceFill } from './chunk-43K3BLXV.js';
 import { useLabels } from './chunk-APCWFOZW.js';
-import { Icon } from './chunk-UXGIW7OK.js';
+import { NO_UA_FOCUS_RING } from './chunk-2YKVID2V.js';
+import { Icon } from './chunk-PCEFCOLN.js';
 import { useResolvedMotion } from './chunk-J64KGCGX.js';
 import * as React2 from 'react';
-import { Animated, Easing, View, TextInput, ActivityIndicator, Text } from 'react-native';
-import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
+import { Animated, Platform, Easing, View, TextInput, ActivityIndicator, Pressable, Text } from 'react-native';
+import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
 function useFieldValidation({
@@ -58,25 +59,37 @@ function useColorTransition(target, duration, easing, animate = true) {
   }, [from, to, progress, duration, easing, animate]);
   return progress.interpolate({ inputRange: [0, 1], outputRange: [from, to] });
 }
+function useInputPlatform(explicit) {
+  const theme = useLoamTheme("input");
+  if (explicit) return explicit;
+  if (Platform.OS === "ios") return "ios";
+  if (Platform.OS === "android") return "android";
+  return theme.platform === "iOS" ? "ios" : "android";
+}
 var DEFAULT_LABELS = {
   validating: "Validating",
   valid: "Valid",
-  invalid: "Invalid"
+  invalid: "Invalid",
+  clear: "Clear"
 };
 function Input({
-  size = "md",
+  size = "lg",
+  platform,
   error = false,
   success = false,
   loading = false,
   leadingIcon,
   trailingIcon,
   validationState = "default",
+  surface = "filled",
+  clearable = false,
   message,
   showStatusIcon = true,
   motion = "full",
   editable = true,
   onFocus,
   onBlur,
+  onChangeText,
   style,
   containerStyle,
   labels: labelsProp,
@@ -84,24 +97,40 @@ function Input({
 }) {
   const labels = useLabels("input", DEFAULT_LABELS, labelsProp);
   const [focused, setFocused] = React2.useState(false);
+  const inputRef = React2.useRef(null);
+  const [typed, setTyped] = React2.useState(String(rest.defaultValue ?? ""));
+  const text = rest.value !== void 0 ? rest.value : typed;
+  const handleChangeText = (next) => {
+    setTyped(next);
+    onChangeText?.(next);
+  };
+  const clearText = () => {
+    inputRef.current?.clear();
+    handleChangeText("");
+    inputRef.current?.focus();
+  };
   const animateColour = useResolvedMotion(motion, "input") === "full";
   const disabled = editable === false;
   const isLoading = loading && !disabled;
   const valid = !isLoading && (validationState === "valid" || success);
   const invalid = !isLoading && (validationState === "invalid" || error);
+  const os = useInputPlatform(platform);
   const { styles } = useStyles(sheet, { size, disabled });
   const theme = useLoamTheme("input");
   const iconSize = theme.ctl.icon[size];
   const iconColor = theme.color.text3;
+  const valueFont = size === "lg" ? { fontSize: theme.fontSize[os === "ios" ? 17 : 16] } : null;
   const slopY = Math.max(0, (theme.hit[size] - theme.ctl[size]) / 2);
-  const tone = disabled ? { border: theme.color.border, fill: theme.color.surface3 } : isLoading ? { border: theme.focus.ringColor, fill: theme.color.surface } : invalid ? { border: theme.color.danger, fill: theme.color.dangerSoft } : valid ? { border: theme.color.good, fill: theme.color.goodSoft } : focused ? { border: theme.focus.ringColor, fill: theme.color.surface } : { border: theme.color.borderStrong, fill: theme.color.surface2 };
+  const restFill = fieldSurfaceFill(theme, surface);
+  const tone = disabled ? { border: theme.color.borderStrong, fill: restFill } : isLoading ? { border: theme.focus.ringColor, fill: theme.color.surface } : invalid ? { border: theme.color.danger, fill: focused ? theme.color.surface : restFill } : focused ? { border: theme.focus.ringColor, fill: theme.color.surface } : { border: theme.color.borderStrong, fill: restFill };
   const easing = React2.useMemo(() => Easing.bezier(...theme.easing.base), [theme.easing.base]);
   const borderColor = useColorTransition(tone.border, theme.duration.base, easing, animateColour);
   const backgroundColor = useColorTransition(tone.fill, theme.duration.base, easing, animateColour);
   const statusIconName = valid ? "check-circle" : invalid ? "alert-triangle" : void 0;
-  const statusColor = valid ? theme.color.goodOnSoft : theme.color.dangerOnSoft;
+  const statusColor = valid ? theme.color.good : theme.color.danger;
   const showStatus = showStatusIcon && statusIconName !== void 0;
-  const messageColor = invalid ? theme.color.danger : valid ? theme.color.goodOnSoft : theme.color.text2;
+  const showClear = clearable && !disabled && !isLoading && text.length > 0;
+  const messageColor = invalid ? theme.color.dangerOnSoft : valid ? theme.color.goodOnSoft : theme.color.text2;
   const showMessageRow = validationState !== "default" || message !== void 0;
   const statusOpacity = React2.useRef(new Animated.Value(0)).current;
   React2.useEffect(() => {
@@ -130,7 +159,18 @@ function Input({
       Animated.View,
       {
         testID: "input-container",
-        style: [styles.container, { borderColor, backgroundColor }],
+        style: [
+          styles.container,
+          // A multiline field wraps rather than clips: the ramp height becomes
+          // a floor and the box grows with its text.
+          rest.multiline ? {
+            height: "auto",
+            minHeight: theme.ctl.lg * 2,
+            alignItems: "flex-start",
+            paddingVertical: theme.space[8]
+          } : null,
+          { borderColor, backgroundColor }
+        ],
         accessibilityState: { disabled },
         children: [
           leadingIcon ? /* @__PURE__ */ jsx(Icon, { name: leadingIcon, size: iconSize, color: iconColor }) : null,
@@ -138,13 +178,18 @@ function Input({
             TextInput,
             {
               ...rest,
+              ref: inputRef,
+              numberOfLines: rest.numberOfLines ?? (rest.multiline ? 4 : void 0),
+              onChangeText: handleChangeText,
               editable,
+              "aria-disabled": disabled || void 0,
               "aria-busy": isLoading || void 0,
+              clearButtonMode: rest.clearButtonMode ?? (os === "ios" && !clearable ? "while-editing" : "never"),
               placeholderTextColor: theme.color.text3,
               onFocus: handleFocus,
               onBlur: handleBlur,
               hitSlop: { top: slopY, bottom: slopY },
-              style: [styles.input, NO_UA_FOCUS_RING, style]
+              style: [styles.input, valueFont, NO_UA_FOCUS_RING, style]
             }
           ),
           isLoading ? (
@@ -160,6 +205,17 @@ function Input({
               }
             )
           ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            showClear ? /* @__PURE__ */ jsx(
+              Pressable,
+              {
+                testID: "input-clear",
+                accessibilityRole: "button",
+                accessibilityLabel: labels.clear,
+                onPress: clearText,
+                hitSlop: Math.max(0, (theme.tapMin - iconSize) / 2),
+                children: /* @__PURE__ */ jsx(Icon, { name: "x", size: iconSize, color: iconColor })
+              }
+            ) : null,
             trailingIcon ? /* @__PURE__ */ jsx(Icon, { name: trailingIcon, size: iconSize, color: iconColor }) : null,
             showStatus ? /* @__PURE__ */ jsx(
               Animated.View,
@@ -189,7 +245,8 @@ function TextField({
   onChangeText,
   ...inputProps
 }) {
-  const { styles } = useStyles(fieldSheet);
+  const os = useInputPlatform(inputProps.platform);
+  const { styles } = useStyles(fieldSheet, { os });
   const { error, success, ...handlers } = useFieldValidation({
     validate,
     error: errorProp,
@@ -204,7 +261,7 @@ function TextField({
     // a helper line that did not follow the field's width would read as a
     // different control.
     /* @__PURE__ */ jsxs(View, { style: [styles.field, containerStyle], children: [
-      label ? /* @__PURE__ */ jsx(Text, { nativeID: labelId, style: styles.label, children: label }) : null,
+      label ? /* @__PURE__ */ jsx(Text, { nativeID: labelId, style: [styles.label, error ? styles.labelError : null], children: label }) : null,
       /* @__PURE__ */ jsx(
         Input,
         {
@@ -257,14 +314,11 @@ var sheet = createStyleSheet((theme) => ({
           borderRadius: theme.ctl.r.lg
         }
       },
-      // A blanket `opacity` here dimmed the value text with it: react-native-web
-      // renders `editable={false}` as `readonly` (not `disabled`, which WCAG
-      // exempts), so axe checks the text and the 0.38 opacity dropped it to
-      // ~2.2:1. The disabled state now reads from the muted `surface3` fill,
-      // plain `border` edge and `text2` value colour instead — all AA on their
-      // own, no opacity dim on the text. (Same shape as the launch-screen fix.)
+      // Final 02 R5: the whole shell, value included, sits at
+      // `state.disabledOpacity`; the field is announced disabled, which WCAG
+      // exempts from contrast.
       disabled: {
-        true: {},
+        true: { opacity: theme.state.disabledOpacity },
         false: {}
       }
     }
@@ -286,11 +340,11 @@ var sheet = createStyleSheet((theme) => ({
         xs: { fontSize: theme.fontSize[14] },
         sm: { fontSize: theme.fontSize[14] },
         md: { fontSize: theme.fontSize[16] },
-        lg: { fontSize: theme.fontSize[16] }
+        // The lg value is the platform body, set at the use site: 17 on iOS,
+        // 16 on Android.
+        lg: {}
       },
-      // Solid value colour for the locked field — the locked look reads from the
-      // `surface3` fill and plain edge, not a dimmed ink. `text2` measures only
-      // 4.4:1 on `surface3` (WCAG fail), so the value keeps primary `text`.
+      // The value keeps primary `text`; the shell's opacity does the dimming.
       disabled: {
         true: { color: theme.color.text },
         false: {}
@@ -304,13 +358,20 @@ var sheet = createStyleSheet((theme) => ({
   }
 }));
 var fieldSheet = createStyleSheet((theme) => ({
-  field: { gap: theme.space.s2 },
+  field: { gap: theme.space[6] },
+  // R11: the label sits in `text`, 6 above the shell — 13 / 600 on iOS,
+  // 14 / 500 on Android; it turns `dangerOnSoft` with the error.
   label: {
     fontFamily: theme.font.sans,
-    fontWeight: theme.fontWeight.semibold,
-    fontSize: theme.fontSize[14],
-    color: theme.color.text2
+    color: theme.color.text,
+    variants: {
+      os: {
+        ios: { fontSize: theme.fontSize[13], fontWeight: theme.fontWeight.semibold },
+        android: { fontSize: theme.fontSize[14], fontWeight: theme.fontWeight.medium }
+      }
+    }
   },
+  labelError: { color: theme.color.dangerOnSoft },
   hint: {
     fontFamily: theme.font.sans,
     fontSize: theme.fontSize[12],
@@ -319,8 +380,8 @@ var fieldSheet = createStyleSheet((theme) => ({
   error: {
     fontFamily: theme.font.sans,
     fontSize: theme.fontSize[12],
-    color: theme.color.danger
+    color: theme.color.dangerOnSoft
   }
 }));
 
-export { Input, TextField, useColorTransition, useFieldValidation };
+export { Input, TextField, useColorTransition, useFieldValidation, useInputPlatform };