@webority/mobile-ui 0.0.0-stage → 0.0.33

package/lib/module/components/FieldBase/FieldBase.js

@@ -0,0 +1,790 @@
+"use strict";
+
+/**
+ * FieldBase — the unified field-box primitive.
+ *
+ * Every input-like control in the library (Input, Select, SearchBar,
+ * NumberInput, OTPInput cell, PickerTrigger) composes FieldBase so the
+ * height / radius / padding / border / fill / focus + disabled + error
+ * states stay identical across the library. Differences (pill SearchBar,
+ * OTP underline, NumberInput steppers) become explicit overrides via
+ * props or via theme tokens — never accidental drift.
+ *
+ * Responsibilities:
+ *   - Resolve size / variant dimensions from `theme.components.field`.
+ *   - Animate the border + background between idle / focused / error.
+ *   - Render leading + trailing slots either side of `children`.
+ *   - Become Pressable when `onPress` is set (Select, PickerTrigger).
+ *   - Apply disabled fill + cursor semantics.
+ *
+ * Non-responsibilities (the parent owns these):
+ *   - The actual TextInput / Text / nested editor.
+ *   - Floating / static labels rendered above the field.
+ *   - Helper / error / counter text rendered below the field.
+ *   - Shake-on-error or any cross-field animation.
+ */
+
+import React, { useEffect, useMemo, useRef } from 'react';
+import { Animated, Easing, Pressable, StyleSheet, Text, View } from 'react-native';
+import { createAnimatedValue, fontFor, useTheme } from "../../theme/index.js";
+import { smoothCorners } from "../../utils/corners.js";
+import { defaultIcons } from "../AppIcon/defaultIcons.js";
+import { SquircleFill, useSquircle } from "../SquircleFill/SquircleFill.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/** Map a single colour string to all four sides (shorthand expansion). */
+const expandColorSides = value => {
+  if (typeof value === 'string') {
+    return {
+      top: value,
+      right: value,
+      bottom: value,
+      left: value
+    };
+  }
+  // Object form: any side the consumer omitted falls through to 'transparent'.
+  // Rationale: if a consumer says `{ bottom: '#000' }`, they want only the
+  // bottom drawn — the other sides should be invisible, not inherit some
+  // unrelated colour.
+  return {
+    top: value.top ?? 'transparent',
+    right: value.right ?? 'transparent',
+    bottom: value.bottom ?? 'transparent',
+    left: value.left ?? 'transparent'
+  };
+};
+
+/** Map a single width number to all four sides (shorthand expansion). */
+const expandWidthSides = value => {
+  if (typeof value === 'number') {
+    return {
+      top: value,
+      right: value,
+      bottom: value,
+      left: value
+    };
+  }
+  return {
+    top: value.top ?? 0,
+    right: value.right ?? 0,
+    bottom: value.bottom ?? 0,
+    left: value.left ?? 0
+  };
+};
+
+/**
+ * Pick the most "representative" side colour from a 4-side record. Used by
+ * consumers (Input's selectionColor, focus rings, etc.) that need a single
+ * colour to mirror the visible focus indicator. Priority: bottom → top →
+ * left → right, skipping `'transparent'`. The bottom-first order means
+ * underline variants pick their underline colour automatically.
+ */
+export const pickRepresentativeBorderColor = sides => {
+  for (const side of ['bottom', 'top', 'left', 'right']) {
+    const c = sides[side];
+    if (c && c !== 'transparent') {
+      return c;
+    }
+  }
+  return sides.bottom;
+};
+
+/**
+ * Resolved text styling for the editable / displayed content inside a field.
+ * Single source of truth so every field component (Input, NumberInput,
+ * Select, SearchBar, PickerTrigger) renders identical colour + weight +
+ * fontFamily for value text — and reads the placeholder colour from the
+ * same place. OTPInput intentionally overrides this with its own semibold
+ * display weight.
+ */
+
+/**
+ * Resolve the canonical text style chunk for a field's value. Reads from
+ * `theme.components.field.{textColor,disabledTextColor,placeholderColor,fontWeight}`
+ * first, then the field palette (`theme.colors.field`); brand fonts wired via
+ * `typography.fontFamily` apply via the shared `fontFor` helper.
+ */
+export const resolveFieldTextStyle = (theme, options = {}) => {
+  const {
+    disabled = false
+  } = options;
+  const tokens = theme.components.field;
+  const palette = theme.colors.field;
+  // Disabled: value, placeholder and icons all drop to the same dimmed ink.
+  const color = disabled ? tokens?.disabledTextColor ?? palette.textDisabled : tokens?.textColor ?? palette.text;
+  // The spec dims the placeholder a second step when the field is disabled.
+  const placeholderColor = tokens?.placeholderColor ?? (disabled ? palette.placeholderDisabled : palette.placeholder);
+
+  // If a consumer sets `field.fontWeight` directly (raw RN weight string),
+  // honour it verbatim — they've opted out of the brand-font path. Otherwise
+  // resolve weight through `fontFor` so `typography.fontFamily.<weight>`
+  // takes precedence when a custom face is registered. Value text is regular
+  // weight: the label above carries the emphasis.
+  const weightStyle = tokens?.fontWeight ? {
+    fontWeight: tokens.fontWeight
+  } : fontFor(theme, 'normal');
+  return {
+    color,
+    placeholderColor,
+    weightStyle
+  };
+};
+
+/**
+ * The required-field marker appended to a field's label. Single source of
+ * truth for the whole field family (Input, Select, FormField, PickerTrigger →
+ * Date/Time/DateRange pickers). Themeable via
+ * `theme.components.field.{requiredMarker,requiredMarkerColor}`; font family /
+ * weight / size are inherited from the parent label `<Text>`.
+ */
+export const RequiredMark = () => {
+  const theme = useTheme();
+  const tokens = theme.components.field;
+  return /*#__PURE__*/_jsx(Text, {
+    style: {
+      color: tokens?.requiredMarkerColor ?? theme.colors.error
+    },
+    children: ` ${tokens?.requiredMarker ?? '*'}`
+  });
+};
+
+/**
+ * The placeholder of a required field that has no static label, drawn by the
+ * field itself with the required marker after it ("Enter your email *"). It
+ * is laid over the empty TextInput, whose own placeholder the field
+ * suppresses, in the same type as the input text, and the field removes it
+ * the moment it has a value: the star belongs to the hint, so it leaves with
+ * the hint rather than standing beside what the user typed. Inert to touch.
+ */
+export const RequiredPlaceholder = ({
+  text,
+  color,
+  fontSize,
+  weightStyle,
+  align = 'center',
+  paddingTop,
+  textAlign
+}) => /*#__PURE__*/_jsx(View, {
+  pointerEvents: "none",
+  style: [StyleSheet.absoluteFill, {
+    justifyContent: align === 'top' ? 'flex-start' : 'center',
+    paddingTop
+  }],
+  children: /*#__PURE__*/_jsxs(Text, {
+    accessible: false,
+    numberOfLines: 1,
+    style: {
+      color,
+      fontSize,
+      ...weightStyle,
+      includeFontPadding: false,
+      textAlign
+    },
+    children: [text, /*#__PURE__*/_jsx(RequiredMark, {})]
+  })
+});
+
+/**
+ * The circled-exclamation glyph that leads a field's error message. Uses the
+ * theme's `icons.error` renderer when one is registered; otherwise draws a
+ * ring-and-bang from views so the message never renders bare. Shared by
+ * every field component that shows an error line (Input, Select, FormField,
+ * the pickers) so the message row reads identically across the family.
+ */
+export const FieldErrorGlyph = ({
+  size,
+  color
+}) => {
+  const theme = useTheme();
+  const renderer = theme.icons?.error ?? defaultIcons.error;
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: renderer({
+      size,
+      color
+    })
+  });
+};
+
+/**
+ * The static label above a field, per the design spec: `field.label` ink,
+ * the size ladder's `labelFontSize`, semibold, `labelGap` below. It stays on
+ * that ink through focus and error (the ring and the message row carry the
+ * error). Shared by Select, PickerTrigger, NumberInput; Input renders the
+ * same styling inline because it also owns the floating-label variant.
+ */
+export const FieldLabel = ({
+  children,
+  size = 'md',
+  required = false,
+  style
+}) => {
+  const theme = useTheme();
+  const sizeTokens = resolveFieldSize(theme, size);
+  return /*#__PURE__*/_jsxs(Text, {
+    style: [familyStyles.label, {
+      color: theme.colors.field.label,
+      fontSize: sizeTokens.labelFontSize,
+      ...fontFor(theme, 'semibold'),
+      marginBottom: sizeTokens.labelGap
+    }, style],
+    children: [children, required ? /*#__PURE__*/_jsx(RequiredMark, {}) : null]
+  });
+};
+
+/**
+ * The helper / error line under a field: `messageFontSize`, `messageGap`
+ * from the box, `field.message` red with the circled-exclamation glyph when
+ * `error`, `text.secondary` otherwise. Renders nothing without text.
+ */
+export const FieldMessage = ({
+  text,
+  error = false,
+  size = 'md',
+  style
+}) => {
+  const theme = useTheme();
+  const sizeTokens = resolveFieldSize(theme, size);
+  if (!text) {
+    return null;
+  }
+  const color = error ? theme.colors.field.message : theme.colors.text.secondary;
+  return /*#__PURE__*/_jsxs(View, {
+    style: [familyStyles.messageRow, {
+      marginTop: sizeTokens.messageGap,
+      columnGap: theme.spacing.xs + 2
+    }],
+    accessibilityLiveRegion: error ? 'polite' : 'none',
+    children: [error ? /*#__PURE__*/_jsx(FieldErrorGlyph, {
+      size: sizeTokens.messageFontSize,
+      color: color
+    }) : null, /*#__PURE__*/_jsx(Text, {
+      style: [familyStyles.messageText, {
+        color,
+        fontSize: sizeTokens.messageFontSize,
+        ...fontFor(theme, 'normal')
+      }, style],
+      children: text
+    })]
+  });
+};
+const familyStyles = StyleSheet.create({
+  label: {
+    includeFontPadding: false
+  },
+  messageRow: {
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  messageText: {
+    flexShrink: 1,
+    includeFontPadding: false
+  }
+});
+
+/**
+ * Public re-export of the resolved size tokens — components that need to
+ * compute their own padding adjustments (e.g. multiline Input, icon-slot
+ * sizing) read from this rather than re-hardcoding the size table.
+ */
+export const resolveFieldSize = (theme, size) => {
+  const sizeFromTheme = theme.components.field?.[size];
+  const fallback = DEFAULT_SIZES[size];
+  return {
+    paddingHorizontal: sizeFromTheme?.paddingHorizontal ?? fallback.paddingHorizontal,
+    paddingVertical: sizeFromTheme?.paddingVertical ?? fallback.paddingVertical,
+    minHeight: sizeFromTheme?.minHeight ?? fallback.minHeight,
+    fontSize: sizeFromTheme?.fontSize ?? fallback.fontSize,
+    borderRadius: sizeFromTheme?.borderRadius ?? fallback.borderRadius,
+    iconSize: sizeFromTheme?.iconSize ?? fallback.iconSize,
+    labelFontSize: sizeFromTheme?.labelFontSize ?? fallback.labelFontSize,
+    labelGap: sizeFromTheme?.labelGap ?? fallback.labelGap,
+    messageFontSize: sizeFromTheme?.messageFontSize ?? fallback.messageFontSize,
+    messageGap: sizeFromTheme?.messageGap ?? fallback.messageGap
+  };
+};
+
+// Library defaults for when consumers haven't supplied per-size tokens. The
+// numbers here MUST stay in sync with the `fieldSizes` table in tokens.ts —
+// these are the same values, duplicated so resolveFieldSize works even when
+// the consumer passes a custom theme without `components.field` set.
+const DEFAULT_SIZES = {
+  sm: {
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    minHeight: 38,
+    fontSize: 13,
+    borderRadius: 10,
+    iconSize: 14,
+    labelFontSize: 11,
+    labelGap: 4,
+    messageFontSize: 11,
+    messageGap: 2
+  },
+  md: {
+    paddingHorizontal: 14,
+    paddingVertical: 13,
+    minHeight: 44,
+    fontSize: 14,
+    borderRadius: 10,
+    iconSize: 16,
+    labelFontSize: 12,
+    labelGap: 4,
+    messageFontSize: 12,
+    messageGap: 2
+  },
+  lg: {
+    paddingHorizontal: 16,
+    paddingVertical: 15,
+    minHeight: 52,
+    fontSize: 16,
+    borderRadius: 10,
+    iconSize: 18,
+    labelFontSize: 13,
+    labelGap: 4,
+    messageFontSize: 13,
+    messageGap: 2
+  }
+};
+
+/**
+ * Strict, fully-resolved colour set used internally. Mirrors `FieldVariantTokens`
+ * but every border colour / width is expanded to a 4-side record by the time
+ * the box renders, so the animation pipeline can treat per-side and shorthand
+ * the same way. `borderFocusedRepresentative` is a single colour pulled from
+ * the focused sides — exposed for consumers (Input's selectionColor) that
+ * need to mirror the visible focus indicator without re-resolving per side.
+ */
+
+/**
+ * Resolve the full set of state-aware fill + border colours for a given
+ * variant. Order: explicit override → theme token → library default. Border
+ * colour + width are normalized to per-side records here; callers that need
+ * a single colour read `borderFocusedRepresentative`.
+ */
+export const resolveVariantColors = (theme, variant, override) => {
+  const tokenSet = theme.components.field?.[variant];
+  const palette = theme.colors.field;
+
+  // Variant-specific defaults for resting fill + border treatment, all from
+  // the field palette. `outlined` is the spec's box: hairline border on the
+  // resting fill, white while focused. `filled` is the same box without the
+  // hairline. `underline` draws only the bottom rule on a transparent
+  // background — the spec's second row.
+  let idleEmpty;
+  let focusedDefault;
+  let disabledDefault;
+  let borderIdleDefault;
+  let borderWidthDefault;
+  if (variant === 'outlined') {
+    idleEmpty = palette.background;
+    focusedDefault = palette.backgroundFocused;
+    disabledDefault = palette.backgroundDisabled;
+    borderIdleDefault = palette.border;
+    borderWidthDefault = theme.colors.border.width;
+  } else if (variant === 'underline') {
+    // No box to dim: the underline row stays transparent while disabled too,
+    // only its rule, text and icons drop to the disabled ink.
+    idleEmpty = 'transparent';
+    focusedDefault = undefined;
+    disabledDefault = 'transparent';
+    borderIdleDefault = {
+      bottom: palette.border
+    };
+    borderWidthDefault = {
+      bottom: theme.colors.border.width
+    };
+  } else {
+    // Filled has no hairline, so the fill IS the box: it must stay put on
+    // focus (the outlined box goes white because its ring still shows the
+    // edge; a borderless box going white would vanish into the page).
+    idleEmpty = palette.background;
+    focusedDefault = undefined;
+    disabledDefault = palette.backgroundDisabled;
+    borderIdleDefault = 'transparent';
+    borderWidthDefault = 0;
+  }
+
+  // For focused/error/disabled we expand using the same per-side shape as
+  // idle. If `borderIdle` ended up bottom-only (underline), an unset
+  // `borderFocused` defaults to `{ bottom: field.borderFocused }` so the
+  // focus indicator stays on the same edge. Same logic for error.
+  const wrapToIdleShape = colour => typeof borderIdleDefault === 'string' ? colour : {
+    bottom: colour
+  };
+  const borderIdle = expandColorSides(override?.borderIdle ?? tokenSet?.borderIdle ?? borderIdleDefault);
+  const borderFocused = expandColorSides(override?.borderFocused ?? tokenSet?.borderFocused ?? wrapToIdleShape(palette.borderFocused));
+  const borderError = expandColorSides(override?.borderError ?? tokenSet?.borderError ?? wrapToIdleShape(palette.borderError));
+  // The spec keeps the resting hairline while disabled; only the fill and the
+  // placeholder dim.
+  const borderDisabled = expandColorSides(override?.borderDisabled ?? tokenSet?.borderDisabled ?? borderIdleDefault);
+  const borderWidth = expandWidthSides(override?.borderWidth ?? tokenSet?.borderWidth ?? borderWidthDefault);
+  return {
+    backgroundIdleEmpty: override?.backgroundIdleEmpty ?? tokenSet?.backgroundIdleEmpty ?? idleEmpty,
+    backgroundIdleFilled: override?.backgroundIdleFilled ?? tokenSet?.backgroundIdleFilled ?? override?.backgroundIdleEmpty ?? tokenSet?.backgroundIdleEmpty ?? idleEmpty,
+    backgroundFocused: override?.backgroundFocused ?? tokenSet?.backgroundFocused ?? focusedDefault,
+    backgroundError: override?.backgroundError ?? tokenSet?.backgroundError ?? undefined,
+    backgroundDisabled: override?.backgroundDisabled ?? tokenSet?.backgroundDisabled ?? disabledDefault,
+    borderIdle,
+    borderFocused,
+    borderError,
+    borderDisabled,
+    borderWidth,
+    borderFocusedRepresentative: pickRepresentativeBorderColor(borderFocused)
+  };
+};
+export const FieldBase = props => {
+  const {
+    size = 'md',
+    variant: variantProp,
+    focused = false,
+    disabled = false,
+    error = false,
+    filled = false,
+    leading,
+    leadingDivider = false,
+    trailing,
+    slotAlign = 'center',
+    slotLineHeight,
+    topNotch,
+    children,
+    onPress,
+    pressFeedback = true,
+    minHeight: minHeightProp,
+    maxHeight,
+    width,
+    height,
+    paddingHorizontal: paddingHorizontalProp,
+    paddingLeft: paddingLeftProp,
+    paddingRight: paddingRightProp,
+    paddingVertical: paddingVerticalProp,
+    borderRadius: borderRadiusProp,
+    borderTopLeftRadius: borderTopLeftRadiusProp,
+    borderTopRightRadius: borderTopRightRadiusProp,
+    borderBottomLeftRadius: borderBottomLeftRadiusProp,
+    borderBottomRightRadius: borderBottomRightRadiusProp,
+    borderWidth: borderWidthProp,
+    borderTopWidth: borderTopWidthProp,
+    borderRightWidth: borderRightWidthProp,
+    borderBottomWidth: borderBottomWidthProp,
+    borderLeftWidth: borderLeftWidthProp,
+    gap: gapProp,
+    fillOverrides,
+    style,
+    testID,
+    accessibilityRole,
+    accessibilityLabel,
+    accessibilityState,
+    accessibilityHint
+  } = props;
+  const theme = useTheme();
+  const styles = useMemo(() => buildStyles(), []);
+  const variant = variantProp ?? theme.components.field?.defaultVariant ?? 'outlined';
+  const sizeTokens = resolveFieldSize(theme, size);
+  const colors = useMemo(() => resolveVariantColors(theme, variant, fillOverrides), [theme, variant, fillOverrides]);
+
+  // ONE animated value carries the visual state: 0 idle, 1 focused, 2 error
+  // (error wins over focus). Every colour below is a single three-stop
+  // interpolation of this value, so the Animated node driving `borderColor`
+  // is created once and never swapped for one on a different source. The
+  // earlier two-value design (focusAnim, errorAnim) re-pointed the style at a
+  // fresh interpolation when `error` flipped, and Android painted the border
+  // transparent from that moment: the ring vanished exactly in the error
+  // state, while the JS-side style still said pink.
+  const IDLE = 0;
+  const FOCUSED = 1;
+  const ERROR = 2;
+  const targetState = error ? ERROR : focused ? FOCUSED : IDLE;
+  const stateAnim = useRef(createAnimatedValue(targetState)).current;
+  useEffect(() => {
+    const anim = Animated.timing(stateAnim, {
+      toValue: targetState,
+      duration: theme.motion.duration.fast,
+      easing: Easing.bezier(...theme.motion.easing.standard),
+      useNativeDriver: false
+    });
+    anim.start();
+    return () => anim.stop();
+  }, [targetState, stateAnim, theme.motion.duration.fast, theme.motion.easing.standard]);
+  const STATE_RANGE = [IDLE, FOCUSED, ERROR];
+
+  // Resting border + fill (pre-animation).
+  const idleFill = filled ? colors.backgroundIdleFilled : colors.backgroundIdleEmpty;
+  const focusedFill = colors.backgroundFocused ?? idleFill;
+  const errorFill = colors.backgroundError ?? idleFill;
+  const animatedBackgroundColor = disabled ? colors.backgroundDisabled : stateAnim.interpolate({
+    inputRange: STATE_RANGE,
+    outputRange: [idleFill, focusedFill, errorFill]
+  });
+
+  // Per-side border colour: idle → focused → error stops for each side, all
+  // driven by `stateAnim`. When all four sides agree at every stop we
+  // collapse to one `borderColor` key — the common case stays cheap.
+  const sideIdle = colors.borderIdle;
+  const sideFocused = colors.borderFocused;
+  const sideError = colors.borderError;
+
+  // Per-side widths: longhand prop wins over shorthand prop wins over
+  // resolved variant token. Each side independently.
+  const propWidth = {
+    top: borderTopWidthProp,
+    right: borderRightWidthProp,
+    bottom: borderBottomWidthProp,
+    left: borderLeftWidthProp
+  };
+  const resolvedWidths = {
+    top: propWidth.top ?? borderWidthProp ?? colors.borderWidth.top,
+    right: propWidth.right ?? borderWidthProp ?? colors.borderWidth.right,
+    bottom: propWidth.bottom ?? borderWidthProp ?? colors.borderWidth.bottom,
+    left: propWidth.left ?? borderWidthProp ?? colors.borderWidth.left
+  };
+  const boxStyle = {
+    minHeight: height ?? minHeightProp ?? sizeTokens.minHeight,
+    maxHeight,
+    paddingHorizontal: paddingHorizontalProp ?? sizeTokens.paddingHorizontal,
+    paddingVertical: paddingVerticalProp ?? sizeTokens.paddingVertical,
+    paddingLeft: paddingLeftProp ?? paddingHorizontalProp ?? sizeTokens.paddingHorizontal,
+    paddingRight: paddingRightProp ?? paddingHorizontalProp ?? sizeTokens.paddingHorizontal,
+    backgroundColor: animatedBackgroundColor,
+    columnGap: gapProp ?? theme.spacing.md,
+    alignItems: slotAlign === 'top' ? 'flex-start' : 'center'
+  };
+
+  // Radius: per-corner prop wins over shorthand prop wins over size token.
+  // Underline variant draws ONLY the bottom edge — a non-zero radius arcs the
+  // bottom border up around the corners, so the visible line stops short of
+  // both ends ("cut" outline). Underline is therefore always square: radius
+  // props and tokens are ignored on it, so a consumer switching variants
+  // never has to zero the radius by hand.
+  const isUnderlineVariant = variant === 'underline';
+  const radiusShorthand = isUnderlineVariant ? 0 : borderRadiusProp ?? sizeTokens.borderRadius;
+  const corners = isUnderlineVariant ? {
+    tl: 0,
+    tr: 0,
+    bl: 0,
+    br: 0
+  } : {
+    tl: borderTopLeftRadiusProp ?? radiusShorthand,
+    tr: borderTopRightRadiusProp ?? radiusShorthand,
+    bl: borderBottomLeftRadiusProp ?? radiusShorthand,
+    br: borderBottomRightRadiusProp ?? radiusShorthand
+  };
+  // Every radius / width / colour key below is emitted in its per-corner or
+  // per-side LONGHAND form on every render, whatever the variant. The key set
+  // therefore never changes when `variant` flips (outlined → underline →
+  // outlined): only values do. The earlier code collapsed to the shorthand
+  // (`borderWidth`, `borderColor`) whenever all sides agreed, so a variant
+  // switch added and removed keys; on Android the removed longhand sides
+  // stayed cleared and the freshly added shorthand never painted, leaving the
+  // box with no border at all (and no focus ring) until remount. Measured on
+  // the showcase, not inferred.
+  boxStyle.borderTopLeftRadius = corners.tl;
+  boxStyle.borderTopRightRadius = corners.tr;
+  boxStyle.borderBottomLeftRadius = corners.bl;
+  boxStyle.borderBottomRightRadius = corners.br;
+  // Apple's continuous curve on iOS; Android ignores the key (see utils/corners).
+  boxStyle.borderCurve = smoothCorners.borderCurve;
+  boxStyle.borderTopWidth = resolvedWidths.top;
+  boxStyle.borderRightWidth = resolvedWidths.right;
+  boxStyle.borderBottomWidth = resolvedWidths.bottom;
+  boxStyle.borderLeftWidth = resolvedWidths.left;
+
+  // Colour: four `borderXColor` interpolations of the one state value.
+  // Disabled state is static (no animation needed).
+  const sideColor = side => stateAnim.interpolate({
+    inputRange: STATE_RANGE,
+    outputRange: [sideIdle[side], sideFocused[side], sideError[side]]
+  });
+
+  // Android smooth corners: when the box is one shape (four equal corners,
+  // one border width and one border colour all round, in every state) its
+  // fill and border are drawn as an SVG squircle over a transparent host.
+  // Per-side or per-corner styling and the underline variant keep the native
+  // box: the shape has no per-side form, and the underline has no corner.
+  const sameOnEverySide = sides => sides.top === sides.right && sides.top === sides.bottom && sides.top === sides.left;
+  const oneShape = !isUnderlineVariant && corners.tl === corners.tr && corners.tl === corners.bl && corners.tl === corners.br && sameOnEverySide(resolvedWidths) && sameOnEverySide(sideIdle) && sameOnEverySide(sideFocused) && sameOnEverySide(sideError) && sameOnEverySide(colors.borderDisabled);
+  const squircle = useSquircle(oneShape, corners.tl);
+  if (squircle.active) {
+    // The widths stay (layout must not move by a pixel); the paint moves to
+    // the squircle, whose stroke follows the same state interpolation.
+    boxStyle.backgroundColor = 'transparent';
+    boxStyle.borderTopColor = 'transparent';
+    boxStyle.borderRightColor = 'transparent';
+    boxStyle.borderBottomColor = 'transparent';
+    boxStyle.borderLeftColor = 'transparent';
+  } else if (disabled) {
+    const sideDisabled = colors.borderDisabled;
+    boxStyle.borderTopColor = sideDisabled.top;
+    boxStyle.borderRightColor = sideDisabled.right;
+    boxStyle.borderBottomColor = sideDisabled.bottom;
+    boxStyle.borderLeftColor = sideDisabled.left;
+  } else {
+    boxStyle.borderTopColor = sideColor('top');
+    boxStyle.borderRightColor = sideColor('right');
+    boxStyle.borderBottomColor = sideColor('bottom');
+    boxStyle.borderLeftColor = sideColor('left');
+  }
+  const squircleStroke = disabled ? colors.borderDisabled.top : sideColor('top');
+
+  // When the colour records themselves change (variant or theme switch), the
+  // interpolation nodes above are new objects. Re-assert the current state
+  // value so Animated pushes their values to the native view straight away
+  // instead of waiting for the next focus / error transition.
+  const targetStateRef = useRef(targetState);
+  targetStateRef.current = targetState;
+  // biome-ignore lint/correctness/useExhaustiveDependencies: `colors` is deliberately a dependency without being read: the effect must re-run when the colour set changes so the new interpolation nodes are pushed to native, and reading it would add nothing.
+  useEffect(() => {
+    // `colors` is the identity that changes with variant / theme / overrides.
+    // Read the target through a ref so a plain state change (which the timing
+    // effect above animates) does not also snap the value here.
+    stateAnim.setValue(targetStateRef.current);
+  }, [colors, stateAnim]);
+  if (width !== undefined) {
+    boxStyle.width = width;
+  }
+  if (height !== undefined) {
+    boxStyle.height = height;
+  }
+  const a11yState = {
+    disabled,
+    ...accessibilityState
+  };
+
+  // Top-aligned slots: the row stops centring, and each slot (and the divider)
+  // is nudged down so its centre lands on the first line's centre.
+  const slotsOnTop = slotAlign === 'top';
+  const slotTopStyle = slotsOnTop ? {
+    alignSelf: 'flex-start',
+    marginTop: Math.max(0, ((slotLineHeight ?? sizeTokens.iconSize) - sizeTokens.iconSize) / 2)
+  } : null;
+  // The notch is a strip of the box's own fill laid over the top border, so
+  // the rule visibly stops either side of the label. Absolute children sit
+  // inside the border, hence the border-width offsets.
+  // When the notch starts inside the top-left corner's arc (a pill, whose
+  // radius is wider than the padding the label floats at), the rule there
+  // has already curved below the top edge, so a one-line strip would leave
+  // it running under the label's left end. Deepen the strip to the arc's
+  // depth at the notch's left, so the rule stops with the same air on that
+  // side as on the right.
+  const boxMinHeight = height ?? minHeightProp ?? sizeTokens.minHeight;
+  const notchArcDepth = (() => {
+    if (!topNotch) {
+      return 0;
+    }
+    const r = Math.min(corners.tl, boxMinHeight / 2);
+    const x = topNotch.left;
+    if (r <= 0 || x >= r) {
+      return 0;
+    }
+    return Math.ceil(r - Math.sqrt(r * r - (r - x) * (r - x)));
+  })();
+  const notch = topNotch && resolvedWidths.top > 0 ? /*#__PURE__*/_jsx(Animated.View, {
+    pointerEvents: "none",
+    style: {
+      position: 'absolute',
+      top: -resolvedWidths.top,
+      left: topNotch.left - resolvedWidths.left,
+      width: topNotch.width,
+      height: resolvedWidths.top + notchArcDepth,
+      backgroundColor: animatedBackgroundColor
+    }
+  }) : null;
+  const renderInner = pressed => /*#__PURE__*/_jsxs(_Fragment, {
+    children: [squircle.active && squircle.size ? /*#__PURE__*/_jsx(SquircleFill, {
+      width: squircle.size.width,
+      height: squircle.size.height,
+      radius: corners.tl,
+      fill: pressed && !disabled ? theme.colors.surface.pressed : animatedBackgroundColor,
+      stroke: squircleStroke,
+      strokeWidth: resolvedWidths.top,
+      outset: resolvedWidths.top
+    }) : null, notch, leading != null ? /*#__PURE__*/_jsx(View, {
+      style: [styles.slot, slotTopStyle],
+      children: leading
+    }) : null, leading != null && leadingDivider ? /*#__PURE__*/_jsx(View, {
+      pointerEvents: "none",
+      style: [styles.divider, slotTopStyle, {
+        height: sizeTokens.iconSize,
+        backgroundColor: theme.colors.field.border
+      }]
+    }) : null, /*#__PURE__*/_jsx(View, {
+      style: [styles.content, slotsOnTop ? styles.contentTop : null],
+      children: children
+    }), trailing != null ? /*#__PURE__*/_jsx(View, {
+      style: [styles.slot, slotTopStyle],
+      children: trailing
+    }) : null]
+  });
+  const box = /*#__PURE__*/_jsx(Animated.View, {
+    onLayout: squircle.onLayout,
+    style: [styles.box, boxStyle, style],
+    accessibilityRole: accessibilityRole,
+    accessibilityLabel: accessibilityLabel,
+    accessibilityHint: accessibilityHint,
+    accessibilityState: a11yState,
+    testID: testID,
+    children: renderInner(false)
+  });
+  if (onPress && !pressFeedback) {
+    // A tap anywhere on the box (padding, icon, gap) reaches the parent's
+    // handler, which focuses the hosted TextInput. The input's own touches
+    // never get here: it takes the responder first. `accessible={false}`
+    // keeps this wrapper out of the accessibility tree, and the child is a
+    // plain node, so press state changes re-render nothing.
+    return /*#__PURE__*/_jsx(Pressable, {
+      onPress: onPress,
+      disabled: disabled,
+      accessible: false,
+      children: box
+    });
+  }
+  if (onPress) {
+    return /*#__PURE__*/_jsx(Pressable, {
+      onPress: onPress,
+      disabled: disabled
+      // No android_ripple: the ripple paints on this square Pressable, not
+      // the rounded box inside it, so its corners showed outside the field's
+      // radius. The box's own pressed fill below is the feedback instead.
+      ,
+      accessibilityRole: accessibilityRole ?? 'button',
+      accessibilityLabel: accessibilityLabel,
+      accessibilityHint: accessibilityHint,
+      accessibilityState: a11yState,
+      testID: testID,
+      children: ({
+        pressed
+      }) => /*#__PURE__*/_jsx(Animated.View, {
+        onLayout: squircle.onLayout,
+        style: [styles.box, boxStyle, pressed && !disabled && !squircle.active ? {
+          backgroundColor: theme.colors.surface.pressed
+        } : null, style],
+        children: renderInner(pressed)
+      })
+    });
+  }
+  return box;
+};
+FieldBase.displayName = 'FieldBase';
+const buildStyles = () => StyleSheet.create({
+  box: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    overflow: 'visible'
+  },
+  slot: {
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  divider: {
+    width: 1,
+    alignSelf: 'center'
+  },
+  content: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  contentTop: {
+    alignItems: 'flex-start'
+  }
+});
+export default FieldBase;
+//# sourceMappingURL=FieldBase.js.map