@btndprojects/loam-ui-native 0.2.1 → 0.3.1

package/dist/chunk-6KSUS7DF.js

@@ -0,0 +1,690 @@
+import { announce } from './chunk-W23G6JLF.js';
+import { SegmentedControl } from './chunk-NZG75DGA.js';
+import { FieldMessage } from './chunk-BTRMA7GC.js';
+import { useInputPlatform } from './chunk-KXLDK6HB.js';
+import { fieldSurfaceFill } from './chunk-43K3BLXV.js';
+import { useLabels } from './chunk-APCWFOZW.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 { Platform, View, Pressable, TextInput, Text, ScrollView, Animated, ActivityIndicator, Easing } from 'react-native';
+import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+function sizeStyle(theme, size) {
+  return size ? { height: theme.ctl[size], borderRadius: theme.ctl.r[size] } : null;
+}
+function verdictStyle(theme, { error, success, loading }) {
+  if (loading) return null;
+  if (error) return { borderColor: theme.color.danger };
+  if (success) return { borderColor: theme.color.good };
+  return null;
+}
+function ShellLabel({
+  label,
+  error
+}) {
+  const { styles } = useStyles(sheet);
+  if (!label) return null;
+  return /* @__PURE__ */ jsx(Text, { style: [styles.label, error ? styles.labelError : null], children: label });
+}
+function ShellMessage({
+  error,
+  hint
+}) {
+  if (error) return /* @__PURE__ */ jsx(FieldMessage, { invalid: true, children: error });
+  if (hint) return /* @__PURE__ */ jsx(FieldMessage, { children: hint });
+  return null;
+}
+function ShellTrailing({
+  loading,
+  success,
+  error,
+  trailing
+}) {
+  const theme = useLoamTheme("search-field");
+  if (!loading && !success && !error && trailing == null) return null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    loading ? /* @__PURE__ */ jsx(ActivityIndicator, { size: "small", color: theme.color.accent, accessibilityLabel: "Searching" }) : error ? /* @__PURE__ */ jsx(Icon, { name: "alert-triangle", size: theme.icon.sm, color: theme.color.danger }) : success ? /* @__PURE__ */ jsx(Icon, { name: "check-circle", size: theme.icon.sm, color: theme.color.good }) : null,
+    trailing != null ? /* @__PURE__ */ jsx(View, { children: trailing }) : null
+  ] });
+}
+var sheet = createStyleSheet((theme) => ({
+  label: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[14],
+    fontWeight: theme.fontWeight.medium,
+    color: theme.color.text
+  },
+  labelError: { color: theme.color.dangerOnSoft }
+}));
+var LEADING_ICON = 18;
+var CANCEL_WIDTH = 64;
+var RECENTS_MAX_H = 120;
+var DEFAULT_LABELS = {
+  placeholder: "Search",
+  clear: "Clear search",
+  recent: "Recent",
+  noMatches: "No matches",
+  noMatchesFor: (query) => `No matches for "${query}"`,
+  tryRecent: "Try a recent search",
+  results: (count) => `${count} ${count === 1 ? "result" : "results"}`,
+  cancel: "Cancel",
+  back: "Close search"
+};
+function SearchField({
+  data,
+  recents = [],
+  surface = "filled",
+  onSelect,
+  placeholder: placeholderProp,
+  value,
+  defaultValue = "",
+  onChangeText,
+  onCancel,
+  scopes,
+  scope,
+  onScopeChange,
+  disabled = false,
+  motion,
+  platform,
+  labels: labelsProp,
+  size,
+  label,
+  hint,
+  error,
+  success = false,
+  loading = false,
+  readOnly = false,
+  trailing
+}) {
+  const os = useInputPlatform(platform);
+  const { styles } = useStyles(sheet2, { os });
+  const labels = useLabels("searchField", DEFAULT_LABELS, labelsProp);
+  const placeholder = placeholderProp ?? labels.placeholder;
+  const theme = useLoamTheme("search-field");
+  const iconColor = theme.color.text3;
+  const [focused, setFocused] = React2.useState(false);
+  const [engaged, setEngaged] = React2.useState(false);
+  const inputRef = React2.useRef(null);
+  const isControlled = value !== void 0;
+  const [internal, setInternal] = React2.useState(defaultValue);
+  const query = isControlled ? value : internal;
+  const queryRef = React2.useRef(query);
+  queryRef.current = query;
+  const handleChangeText = (text) => {
+    if (!isControlled) setInternal(text);
+    onChangeText?.(text);
+  };
+  const clear = () => handleChangeText("");
+  const dismiss = () => {
+    clear();
+    inputRef.current?.blur();
+    setFocused(false);
+    setEngaged(false);
+    onCancel?.();
+  };
+  const glyph = os === "ios" ? theme.icon.sm : LEADING_ICON;
+  const slop = Math.max(0, (theme.tapMin - glyph) / 2);
+  const recentIcon = os === "android" ? "clock" : "more-horizontal";
+  const isEmpty = query.length === 0;
+  const needle = query.toLowerCase();
+  const matches = isEmpty ? [] : data.filter((item) => item.toLowerCase().includes(needle));
+  const renderRow = (item, leading) => /* @__PURE__ */ jsxs(
+    Pressable,
+    {
+      accessibilityRole: "button",
+      accessibilityLabel: item,
+      onPress: onSelect ? () => onSelect(item) : void 0,
+      style: ({ pressed }) => [styles.row, pressed ? styles.rowPressed : null],
+      children: [
+        /* @__PURE__ */ jsx(Icon, { name: leading, size: LEADING_ICON, color: iconColor }),
+        /* @__PURE__ */ jsx(Text, { style: styles.rowLabel, numberOfLines: 1, children: item }),
+        /* @__PURE__ */ jsx(View, { style: styles.goIcon, children: /* @__PURE__ */ jsx(Icon, { name: "arrow-right", size: theme.icon.sm, color: iconColor }) })
+      ]
+    },
+    item
+  );
+  const countText = isEmpty ? "" : matches.length === 0 ? labels.noMatches : labels.results(matches.length);
+  React2.useEffect(() => {
+    if (Platform.OS === "web" || !countText) return;
+    const t = setTimeout(() => announce(countText), 600);
+    return () => clearTimeout(t);
+  }, [countText]);
+  return /* @__PURE__ */ jsxs(View, { style: styles.container, children: [
+    /* @__PURE__ */ jsx(ShellLabel, { label, error }),
+    /* @__PURE__ */ jsxs(View, { style: styles.bar, children: [
+      /* @__PURE__ */ jsxs(
+        View,
+        {
+          style: [
+            styles.field,
+            sizeStyle(theme, size),
+            { backgroundColor: fieldSurfaceFill(theme, surface) },
+            // Ghost keeps an edge so the field still has a boundary at rest.
+            surface === "ghost" ? { borderColor: theme.color.borderStrong } : null,
+            verdictStyle(theme, { error, success, loading }),
+            focused ? styles.fieldFocused : null,
+            disabled ? { opacity: theme.state.disabledOpacity } : null
+          ],
+          "aria-disabled": disabled || void 0,
+          children: [
+            os === "android" && engaged ? /* @__PURE__ */ jsx(
+              Pressable,
+              {
+                accessibilityRole: "button",
+                accessibilityLabel: labels.back,
+                onPress: dismiss,
+                disabled,
+                hitSlop: slop,
+                children: /* @__PURE__ */ jsx(Icon, { name: "arrow-left", size: glyph, color: theme.color.text2 })
+              }
+            ) : /* @__PURE__ */ jsx(Icon, { name: "search", size: glyph, color: iconColor }),
+            /* @__PURE__ */ jsx(
+              TextInput,
+              {
+                ref: inputRef,
+                editable: !disabled && !readOnly,
+                readOnly: readOnly || void 0,
+                "aria-busy": loading || void 0,
+                style: [styles.input, NO_UA_FOCUS_RING],
+                value: query,
+                onChangeText: handleChangeText,
+                onFocus: () => {
+                  setFocused(true);
+                  setEngaged(true);
+                },
+                onBlur: () => {
+                  setFocused(false);
+                  setTimeout(() => {
+                    if (!queryRef.current) setEngaged(false);
+                  }, 150);
+                },
+                placeholder,
+                placeholderTextColor: theme.color.text3,
+                returnKeyType: "search",
+                ...Platform.OS === "web" ? { role: "searchbox" } : { accessibilityRole: "search" },
+                accessibilityLabel: placeholder,
+                onSubmitEditing: () => {
+                  const top = matches[0];
+                  if (top !== void 0) onSelect?.(top);
+                },
+                onKeyPress: (e) => {
+                  if (e.nativeEvent.key === "Escape" && !isEmpty) clear();
+                }
+              }
+            ),
+            isEmpty || readOnly || loading ? null : /* @__PURE__ */ jsx(
+              Pressable,
+              {
+                accessibilityRole: "button",
+                accessibilityLabel: labels.clear,
+                onPress: clear,
+                disabled,
+                hitSlop: Math.max(0, (theme.tapMin - theme.icon.sm) / 2),
+                children: /* @__PURE__ */ jsx(Icon, { name: "x", size: theme.icon.sm, color: iconColor })
+              }
+            ),
+            /* @__PURE__ */ jsx(ShellTrailing, { loading, success, error, trailing })
+          ]
+        }
+      ),
+      os === "ios" && engaged ? /* @__PURE__ */ jsx(
+        Pressable,
+        {
+          accessibilityRole: "button",
+          accessibilityLabel: labels.cancel,
+          onPress: dismiss,
+          disabled,
+          hitSlop: { top: slop, bottom: slop },
+          children: /* @__PURE__ */ jsx(Text, { style: styles.cancel, children: labels.cancel })
+        }
+      ) : null
+    ] }),
+    /* @__PURE__ */ jsx(ShellMessage, { error, hint }),
+    scopes && scopes.length > 0 ? /* @__PURE__ */ jsx(
+      SegmentedControl,
+      {
+        items: scopes,
+        ...scope !== void 0 ? { value: scope } : null,
+        ...onScopeChange ? { onValueChange: onScopeChange } : null,
+        ...os === "ios" ? { size: "sm" } : null,
+        ...motion !== void 0 ? { motion } : null
+      }
+    ) : null,
+    Platform.OS === "web" ? /* @__PURE__ */ jsx(Text, { accessibilityLiveRegion: "polite", style: styles.liveCount, children: countText }) : null,
+    /* @__PURE__ */ jsx(ScrollView, { style: styles.results, contentContainerStyle: styles.resultsContent, children: isEmpty ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      recents.length > 0 ? /* @__PURE__ */ jsx(Text, { style: styles.recentHeader, children: labels.recent }) : null,
+      recents.map((item) => renderRow(item, recentIcon))
+    ] }) : matches.length > 0 ? matches.map((item) => renderRow(item, "search")) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Text, { style: styles.empty, children: labels.noMatchesFor(query) }),
+      recents.length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Text, { style: styles.recentHeader, children: labels.tryRecent }),
+        recents.map((item) => renderRow(item, recentIcon))
+      ] }) : null
+    ] }) })
+  ] });
+}
+function ExpandingSearchField({
+  recents = [],
+  surface = "filled",
+  placeholder: placeholderProp,
+  value,
+  defaultValue = "",
+  onChangeText,
+  onCancel,
+  onSelectRecent,
+  disabled = false,
+  motion = "full",
+  platform,
+  labels: labelsProp,
+  size,
+  label,
+  hint,
+  error,
+  success = false,
+  loading = false,
+  readOnly = false,
+  trailing,
+  defaultFocused = false
+}) {
+  const os = useInputPlatform(platform);
+  const { styles: sx } = useStyles(expandSheet, { os });
+  const labels = useLabels("searchField", DEFAULT_LABELS, labelsProp);
+  const placeholder = placeholderProp ?? labels.placeholder;
+  const theme = useLoamTheme("search-field");
+  const resolved = useResolvedMotion(motion, "search-field");
+  const animateTravel = resolved === "full";
+  const animateFade = resolved !== "none";
+  const isControlled = value !== void 0;
+  const [internal, setInternal] = React2.useState(defaultValue);
+  const query = isControlled ? value : internal;
+  const handleChangeText = (text) => {
+    if (!isControlled) setInternal(text);
+    onChangeText?.(text);
+  };
+  const [focused, setFocused] = React2.useState(defaultFocused);
+  const cancelWidth = React2.useRef(new Animated.Value(defaultFocused ? CANCEL_WIDTH : 0)).current;
+  const cancelOpacity = React2.useRef(new Animated.Value(defaultFocused ? 1 : 0)).current;
+  const recentsHeight = React2.useRef(new Animated.Value(defaultFocused ? RECENTS_MAX_H : 0)).current;
+  const recentsOpacity = React2.useRef(new Animated.Value(defaultFocused ? 1 : 0)).current;
+  const drive = (val, to, kind, useNativeDriver) => {
+    const enabled = kind === "fade" ? animateFade : animateTravel;
+    if (!enabled) {
+      val.setValue(to);
+      return null;
+    }
+    return Animated.timing(val, {
+      toValue: to,
+      duration: theme.motion.toggle.duration,
+      easing: Easing.bezier(...theme.motion.toggle.easing),
+      useNativeDriver
+    });
+  };
+  const runToggle = (open) => {
+    const anims = [
+      drive(cancelWidth, open ? CANCEL_WIDTH : 0, "travel", false),
+      drive(cancelOpacity, open ? 1 : 0, "fade", true),
+      drive(recentsHeight, open ? RECENTS_MAX_H : 0, "travel", false),
+      drive(recentsOpacity, open ? 1 : 0, "fade", true)
+    ].filter((a) => a !== null);
+    if (anims.length > 0) Animated.parallel(anims).start();
+  };
+  const openAnim = () => runToggle(true);
+  const closeAnim = () => runToggle(false);
+  const inputRef = React2.useRef(null);
+  const handleFocus = () => {
+    setFocused(true);
+    openAnim();
+  };
+  const handleBlur = () => {
+    setTimeout(() => {
+      if (!query) {
+        setFocused(false);
+        closeAnim();
+      }
+    }, 150);
+  };
+  const handleCancel = () => {
+    if (!isControlled) setInternal("");
+    onChangeText?.("");
+    inputRef.current?.blur();
+    setFocused(false);
+    closeAnim();
+    onCancel?.();
+  };
+  const handleChipPress = (label2) => {
+    if (!isControlled) setInternal(label2);
+    onChangeText?.(label2);
+    onSelectRecent?.(label2);
+  };
+  return /* @__PURE__ */ jsxs(View, { style: sx.wrapper, children: [
+    /* @__PURE__ */ jsx(ShellLabel, { label, error }),
+    /* @__PURE__ */ jsxs(View, { style: sx.barRow, children: [
+      /* @__PURE__ */ jsxs(
+        View,
+        {
+          style: [
+            sx.bar,
+            sizeStyle(theme, size),
+            { backgroundColor: fieldSurfaceFill(theme, surface) },
+            surface === "ghost" ? { borderColor: theme.color.borderStrong } : null,
+            verdictStyle(theme, { error, success, loading }),
+            focused ? sx.barFocused : null,
+            disabled ? { opacity: theme.state.disabledOpacity } : null
+          ],
+          "aria-disabled": disabled || void 0,
+          accessibilityRole: "search",
+          children: [
+            os === "android" && focused ? /* @__PURE__ */ jsx(
+              Pressable,
+              {
+                accessibilityRole: "button",
+                accessibilityLabel: labels.back,
+                onPress: handleCancel,
+                disabled,
+                hitSlop: Math.max(0, (theme.tapMin - LEADING_ICON) / 2),
+                children: /* @__PURE__ */ jsx(Icon, { name: "arrow-left", size: LEADING_ICON, color: theme.color.text2 })
+              }
+            ) : /* @__PURE__ */ jsx(
+              Icon,
+              {
+                name: "search",
+                size: os === "ios" ? theme.icon.sm : LEADING_ICON,
+                color: theme.color.text3
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              TextInput,
+              {
+                ref: inputRef,
+                editable: !disabled && !readOnly,
+                readOnly: readOnly || void 0,
+                "aria-busy": loading || void 0,
+                style: [sx.input, NO_UA_FOCUS_RING],
+                value: query,
+                onChangeText: handleChangeText,
+                onFocus: handleFocus,
+                onBlur: handleBlur,
+                placeholder,
+                placeholderTextColor: theme.color.text3,
+                returnKeyType: "search",
+                accessibilityLabel: placeholder
+              }
+            ),
+            /* @__PURE__ */ jsx(ShellTrailing, { loading, success, error, trailing })
+          ]
+        }
+      ),
+      os === "ios" ? /* @__PURE__ */ jsx(
+        Animated.View,
+        {
+          style: {
+            width: cancelWidth,
+            overflow: "hidden",
+            pointerEvents: focused ? "auto" : "none"
+          },
+          accessibilityElementsHidden: !focused,
+          importantForAccessibility: focused ? "auto" : "no-hide-descendants",
+          ...focused ? null : { "aria-hidden": true },
+          children: /* @__PURE__ */ jsx(Animated.View, { style: { opacity: cancelOpacity }, children: /* @__PURE__ */ jsx(
+            Pressable,
+            {
+              accessibilityRole: "button",
+              accessibilityLabel: labels.cancel,
+              focusable: focused,
+              tabIndex: focused ? 0 : -1,
+              onPress: handleCancel,
+              disabled,
+              style: sx.cancelBtn,
+              children: /* @__PURE__ */ jsx(Text, { style: sx.cancelText, children: labels.cancel })
+            }
+          ) })
+        }
+      ) : null
+    ] }),
+    /* @__PURE__ */ jsx(ShellMessage, { error, hint }),
+    /* @__PURE__ */ jsx(
+      Animated.View,
+      {
+        style: [
+          sx.recentsWrap,
+          {
+            height: recentsHeight,
+            opacity: recentsOpacity,
+            pointerEvents: focused ? "auto" : "none"
+          }
+        ],
+        accessibilityElementsHidden: !focused,
+        importantForAccessibility: focused ? "auto" : "no-hide-descendants",
+        ...focused ? null : { "aria-hidden": true },
+        children: /* @__PURE__ */ jsx(View, { style: sx.chipsRow, children: recents.map((label2) => /* @__PURE__ */ jsxs(
+          Pressable,
+          {
+            accessibilityRole: "button",
+            accessibilityLabel: label2,
+            focusable: focused,
+            tabIndex: focused ? 0 : -1,
+            hitSlop: { top: theme.space[6], bottom: theme.space[6] },
+            onPress: () => handleChipPress(label2),
+            style: sx.chip,
+            children: [
+              /* @__PURE__ */ jsx(Icon, { name: "search", size: 13, color: theme.color.text3 }),
+              /* @__PURE__ */ jsx(Text, { style: sx.chipText, children: label2 })
+            ]
+          },
+          label2
+        )) })
+      }
+    )
+  ] });
+}
+var sheet2 = createStyleSheet((theme) => ({
+  container: { gap: theme.space.s3 },
+  bar: { flexDirection: "row", alignItems: "center", gap: theme.space.s3 },
+  field: {
+    flex: 1,
+    flexDirection: "row",
+    alignItems: "center",
+    backgroundColor: theme.color.surface2,
+    // Transparent at rest rather than absent, so gaining focus tints the edge
+    // instead of growing the field by 1.5px and nudging the row below.
+    borderWidth: theme.borderWidth.thick,
+    borderColor: "transparent",
+    variants: {
+      os: {
+        // UISearchBar: md 36, r 8, a 16 glyph (F72).
+        ios: {
+          height: theme.ctl.md,
+          paddingHorizontal: theme.space.s2,
+          gap: theme.space[6],
+          borderRadius: theme.ctl.r.md
+        },
+        // Material search bar on the lg tier: 44, r 12.
+        android: {
+          height: theme.ctl.lg,
+          paddingHorizontal: theme.ctl.px.lg,
+          gap: theme.space.s3,
+          borderRadius: theme.ctl.r.lg
+        }
+      }
+    }
+  },
+  // The iOS Cancel link: body 17 / 400 in the reading accent.
+  cancel: {
+    color: theme.color.accentStrong,
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[17],
+    fontWeight: theme.fontWeight.regular
+  },
+  // Same focused treatment as `ExpandingSearchField`: the two sit in the same product.
+  // The edge is the *measured* ring colour, not the raw
+  // accent. `NO_UA_FOCUS_RING` removes the browser's own outline, so this edge
+  // is the **only** focus affordance the field has — which makes it a focus
+  // indicator under SC 1.4.11 and holds it to 3:1 against both the fill inside
+  // it and the ground outside. The raw accent misses that in 10 of the 42
+  // palette x mode x ground cases (worst 1.98:1 on `surface2`, four palettes).
+  // `focus.ringColor` is the same accent lifted only where it could not clear
+  // 3:1, so it is byte-identical in 9 of the 14 palette x mode combos and moves
+  // exactly the five that were failing.
+  fieldFocused: { borderColor: theme.focus.ringColor, backgroundColor: theme.color.surface },
+  input: {
+    flex: 1,
+    padding: 0,
+    color: theme.color.text,
+    fontFamily: theme.font.sans,
+    backgroundColor: "transparent",
+    variants: {
+      os: {
+        ios: { fontSize: theme.fontSize[17] },
+        android: { fontSize: theme.fontSize[16] }
+      }
+    }
+  },
+  results: { alignSelf: "stretch" },
+  liveCount: { position: "absolute", width: 1, height: 1, opacity: 0, overflow: "hidden" },
+  resultsContent: { gap: theme.space.s1 },
+  recentHeader: {
+    ...theme.type.overline,
+    fontFamily: theme.font.mono,
+    color: theme.color.text3,
+    paddingHorizontal: theme.space.s3,
+    paddingVertical: theme.space.s2
+  },
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space.s3,
+    paddingHorizontal: theme.space.s3,
+    paddingVertical: theme.space.s3,
+    borderRadius: theme.radius.md,
+    backgroundColor: "transparent"
+  },
+  rowPressed: { backgroundColor: theme.color.surface2 },
+  rowLabel: {
+    flex: 1,
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[16],
+    color: theme.color.text
+  },
+  goIcon: { transform: [{ rotate: "-45deg" }] },
+  empty: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[14],
+    color: theme.color.text3,
+    textAlign: "center",
+    paddingHorizontal: theme.space.s5,
+    paddingVertical: theme.space.s6
+  }
+}));
+var expandSheet = createStyleSheet((theme) => ({
+  wrapper: {
+    gap: theme.space[12]
+    // reference: `gap:12px` (line 2399)
+  },
+  barRow: { flexDirection: "row", alignItems: "center" },
+  // Bar — resting state: surface2, no visible border (transparent), so focus
+  // tints the edge without growing the bar.
+  bar: {
+    flex: 1,
+    flexDirection: "row",
+    alignItems: "center",
+    backgroundColor: theme.color.surface2,
+    borderWidth: theme.borderWidth.thick,
+    borderColor: "transparent",
+    variants: {
+      os: {
+        ios: {
+          height: theme.ctl.md,
+          paddingHorizontal: theme.space.s2,
+          gap: theme.space[6],
+          borderRadius: theme.ctl.r.md
+        },
+        android: {
+          height: theme.ctl.lg,
+          paddingHorizontal: theme.ctl.px.lg,
+          gap: theme.space.s3,
+          borderRadius: theme.ctl.r.lg
+        }
+      }
+    }
+  },
+  // Focused state: accent border + surface background (reference line 2407),
+  // through `focus.ringColor` for the reason given on `fieldFocused` above.
+  barFocused: {
+    borderColor: theme.focus.ringColor,
+    backgroundColor: theme.color.surface
+  },
+  input: {
+    flex: 1,
+    minWidth: 0,
+    padding: 0,
+    color: theme.color.text,
+    fontFamily: theme.font.sans,
+    backgroundColor: "transparent",
+    variants: {
+      os: {
+        ios: { fontSize: theme.fontSize[17] },
+        android: { fontSize: theme.fontSize[16] }
+      }
+    }
+  },
+  // The iOS Cancel link, sitting beside the bar.
+  cancelBtn: {
+    alignItems: "center",
+    justifyContent: "center",
+    paddingHorizontal: theme.space[4],
+    marginStart: theme.space[4]
+  },
+  // The label is real text at body 17, so it is held to AA's 4.5:1 — not
+  // the 3:1 a glyph gets — against the `surface` the bar paints while focused
+  // (the only time Cancel is visible). The raw accent the reference names here
+  // misses 4.5:1 in 40 of the 56 palette x mode x ground cases, bottoming out at
+  // 1.75:1, so this takes `accentStrong`, which is measured against exactly the
+  // reading grounds `surface`/`bg`/`surface-2` and clears AA on all of them by
+  // construction. Unlike a chart mark or a knob glyph, there is no polarity
+  // trap here: the bar's ground follows the colour mode.
+  cancelText: {
+    color: theme.color.accentStrong,
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.regular,
+    fontSize: theme.fontSize[17],
+    whiteSpace: "nowrap"
+  },
+  // Recents chip row — hidden by default, revealed via animated height.
+  // Reference: `display:flex;flex-wrap:wrap;gap:8px` (line 2405).
+  recentsWrap: {
+    overflow: "hidden"
+  },
+  chipsRow: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: theme.space[8]
+    // reference: `gap:8px`
+  },
+  // Each chip: `padding:8px 14px`, `border-radius:999px`, `font-size:13px`,
+  // `font-weight:600`, `border:1px solid var(--border-strong)`, `color:var(--text-2)`
+  // (reference line 2406).
+  chip: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space[7],
+    // reference: `gap:7px`
+    paddingVertical: theme.space[8],
+    paddingHorizontal: theme.space[14],
+    borderRadius: theme.radius.full,
+    borderWidth: theme.borderWidth.thin,
+    borderColor: theme.color.borderStrong,
+    backgroundColor: "transparent"
+  },
+  chipText: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.semibold,
+    fontSize: theme.fontSize[13],
+    // reference: `font-size:13px`
+    color: theme.color.text2
+  }
+}));
+
+export { ExpandingSearchField, SearchField };