@webority/mobile-ui 0.0.39 → 0.2.0

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

@@ -1,790 +1 @@
-"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
+"use strict";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";const expandColorSides=e=>"string"==typeof e?{top:e,right:e,bottom:e,left:e}:{top:e.top??"transparent",right:e.right??"transparent",bottom:e.bottom??"transparent",left:e.left??"transparent"},expandWidthSides=e=>"number"==typeof e?{top:e,right:e,bottom:e,left:e}:{top:e.top??0,right:e.right??0,bottom:e.bottom??0,left:e.left??0};export const pickRepresentativeBorderColor=e=>{for(const t of["bottom","top","left","right"]){const o=e[t];if(o&&"transparent"!==o)return o}return e.bottom};export const resolveFieldTextStyle=(e,t={})=>{const{disabled:o=!1}=t,r=e.components.field,i=e.colors.field;return{color:o?r?.disabledTextColor??i.textDisabled:r?.textColor??i.text,placeholderColor:r?.placeholderColor??(o?i.placeholderDisabled:i.placeholder),weightStyle:r?.fontWeight?{fontWeight:r.fontWeight}:fontFor(e,"normal")}};export const RequiredMark=()=>{const e=useTheme(),t=e.components.field;return _jsx(Text,{style:{color:t?.requiredMarkerColor??e.colors.error},children:` ${t?.requiredMarker??"*"}`})};export const RequiredPlaceholder=({text:e,color:t,fontSize:o,weightStyle:r,align:i="center",paddingTop:l,textAlign:n})=>_jsx(View,{pointerEvents:"none",style:[StyleSheet.absoluteFill,{justifyContent:"top"===i?"flex-start":"center",paddingTop:l}],children:_jsxs(Text,{accessible:!1,numberOfLines:1,style:{color:t,fontSize:o,...r,includeFontPadding:!1,textAlign:n},children:[e,_jsx(RequiredMark,{})]})});export const FieldErrorGlyph=({size:e,color:t})=>{const o=useTheme(),r=o.icons?.error??defaultIcons.error;return _jsx(_Fragment,{children:r({size:e,color:t})})};export const hasFieldText=e=>null!=e&&!1!==e&&!0!==e&&""!==e;export const fieldTextAsString=e=>"string"==typeof e?e:void 0;export const FieldLabel=({children:e,size:t="md",required:o=!1,help:r,color:i,style:l})=>{const n=useTheme(),s=resolveFieldSize(n,t),d=hasFieldText(r),a=_jsxs(Text,{style:[familyStyles.label,{color:i??n.colors.field.label,fontSize:s.labelFontSize,...fontFor(n,"semibold"),marginBottom:d?0:s.labelGap},d?familyStyles.labelShrink:null,l],children:[e,o?_jsx(RequiredMark,{}):null]});return d?_jsxs(View,{style:[familyStyles.labelRow,{marginBottom:s.labelGap}],children:[a,_jsx(View,{style:[familyStyles.help,{marginLeft:n.spacing.xs}],children:r})]}):a};export const FieldMessage=({text:e,error:t=!1,size:o="md",style:r})=>{const i=useTheme(),l=resolveFieldSize(i,o);if(!hasFieldText(e))return null;const n=t?i.colors.field.message:i.colors.text.secondary;return _jsxs(View,{style:[familyStyles.messageRow,{marginTop:l.messageGap,columnGap:i.spacing.xs+2}],accessibilityLiveRegion:t?"polite":"none",children:[t?_jsx(FieldErrorGlyph,{size:l.messageFontSize,color:n}):null,_jsx(Text,{style:[familyStyles.messageText,{color:n,fontSize:l.messageFontSize,...fontFor(i,"normal")},r],children:e})]})};const familyStyles=StyleSheet.create({label:{includeFontPadding:!1},labelShrink:{flexShrink:1},labelRow:{flexDirection:"row",alignItems:"center"},help:{flexShrink:0,alignItems:"center",justifyContent:"center"},messageRow:{flexDirection:"row",alignItems:"center"},messageText:{flexShrink:1,includeFontPadding:!1}});export const resolveFieldSize=(e,t)=>{const o=e.components.field?.[t],r=DEFAULT_SIZES[t];return{paddingHorizontal:o?.paddingHorizontal??r.paddingHorizontal,paddingVertical:o?.paddingVertical??r.paddingVertical,minHeight:o?.minHeight??r.minHeight,fontSize:o?.fontSize??r.fontSize,borderRadius:o?.borderRadius??r.borderRadius,iconSize:o?.iconSize??r.iconSize,labelFontSize:o?.labelFontSize??r.labelFontSize,labelGap:o?.labelGap??r.labelGap,messageFontSize:o?.messageFontSize??r.messageFontSize,messageGap:o?.messageGap??r.messageGap}};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}};export const resolveVariantColors=(e,t,o)=>{const r=e.components.field?.[t],i=e.colors.field;let l,n,s,d,a;"outlined"===t?(l=i.background,n=i.backgroundFocused,s=i.backgroundDisabled,d=i.border,a=e.colors.border.width):"underline"===t?(l="transparent",n=void 0,s="transparent",d={bottom:i.border},a={bottom:e.colors.border.width}):(l=i.background,n=void 0,s=i.backgroundDisabled,d="transparent",a=0);const wrapToIdleShape=e=>"string"==typeof d?e:{bottom:e},c=expandColorSides(o?.borderIdle??r?.borderIdle??d),b=expandColorSides(o?.borderFocused??r?.borderFocused??wrapToIdleShape(i.borderFocused)),p=expandColorSides(o?.borderError??r?.borderError??wrapToIdleShape(i.borderError)),g=expandColorSides(o?.borderDisabled??r?.borderDisabled??d),u=expandWidthSides(o?.borderWidth??r?.borderWidth??a);return{backgroundIdleEmpty:o?.backgroundIdleEmpty??r?.backgroundIdleEmpty??l,backgroundIdleFilled:o?.backgroundIdleFilled??r?.backgroundIdleFilled??o?.backgroundIdleEmpty??r?.backgroundIdleEmpty??l,backgroundFocused:o?.backgroundFocused??r?.backgroundFocused??n,backgroundError:o?.backgroundError??r?.backgroundError??void 0,backgroundDisabled:o?.backgroundDisabled??r?.backgroundDisabled??s,borderIdle:c,borderFocused:b,borderError:p,borderDisabled:g,borderWidth:u,borderFocusedRepresentative:pickRepresentativeBorderColor(b)}};export const FieldBase=e=>{const{size:t="md",variant:o,focused:r=!1,disabled:i=!1,error:l=!1,filled:n=!1,leading:s,leadingDivider:d=!1,trailing:a,slotAlign:c="center",slotLineHeight:b,topNotch:p,children:g,onPress:u,pressFeedback:m=!0,minHeight:h,maxHeight:f,width:x,height:S,paddingHorizontal:y,paddingLeft:F,paddingRight:z,paddingVertical:R,borderRadius:k,borderTopLeftRadius:C,borderTopRightRadius:T,borderBottomLeftRadius:j,borderBottomRightRadius:v,borderWidth:w,borderTopWidth:I,borderRightWidth:_,borderBottomWidth:E,borderLeftWidth:V,gap:H,fillOverrides:D,style:L,testID:W,accessibilityRole:G,accessibilityLabel:B,accessibilityState:q,accessibilityHint:A}=e,M=useTheme(),P=useMemo(()=>buildStyles(),[]),N=o??M.components.field?.defaultVariant??"outlined",O=resolveFieldSize(M,t),U=useMemo(()=>resolveVariantColors(M,N,D),[M,N,D]),Z=l?2:r?1:0,$=useRef(createAnimatedValue(Z)).current;useEffect(()=>{const e=Animated.timing($,{toValue:Z,duration:M.motion.duration.fast,easing:Easing.bezier(...M.motion.easing.standard),useNativeDriver:!1});return e.start(),()=>e.stop()},[Z,$,M.motion.duration.fast,M.motion.easing.standard]);const J=[0,1,2],K=n?U.backgroundIdleFilled:U.backgroundIdleEmpty,Q=U.backgroundFocused??K,X=U.backgroundError??K,Y=i?U.backgroundDisabled:$.interpolate({inputRange:J,outputRange:[K,Q,X]}),ee=U.borderIdle,te=U.borderFocused,oe=U.borderError,re={top:I,right:_,bottom:E,left:V},ie={top:re.top??w??U.borderWidth.top,right:re.right??w??U.borderWidth.right,bottom:re.bottom??w??U.borderWidth.bottom,left:re.left??w??U.borderWidth.left},le={minHeight:S??h??O.minHeight,maxHeight:f,paddingHorizontal:y??O.paddingHorizontal,paddingVertical:R??O.paddingVertical,paddingLeft:F??y??O.paddingHorizontal,paddingRight:z??y??O.paddingHorizontal,backgroundColor:Y,columnGap:H??M.spacing.md,alignItems:"top"===c?"flex-start":"center"},ne="underline"===N,se=ne?0:k??O.borderRadius,de=ne?{tl:0,tr:0,bl:0,br:0}:{tl:C??se,tr:T??se,bl:j??se,br:v??se};le.borderTopLeftRadius=de.tl,le.borderTopRightRadius=de.tr,le.borderBottomLeftRadius=de.bl,le.borderBottomRightRadius=de.br,le.borderCurve=smoothCorners.borderCurve,le.borderTopWidth=ie.top,le.borderRightWidth=ie.right,le.borderBottomWidth=ie.bottom,le.borderLeftWidth=ie.left;const sideColor=e=>$.interpolate({inputRange:J,outputRange:[ee[e],te[e],oe[e]]}),sameOnEverySide=e=>e.top===e.right&&e.top===e.bottom&&e.top===e.left,ae=!ne&&de.tl===de.tr&&de.tl===de.bl&&de.tl===de.br&&sameOnEverySide(ie)&&sameOnEverySide(ee)&&sameOnEverySide(te)&&sameOnEverySide(oe)&&sameOnEverySide(U.borderDisabled),ce=useSquircle(ae,de.tl);if(ce.active)le.backgroundColor="transparent",le.borderTopColor="transparent",le.borderRightColor="transparent",le.borderBottomColor="transparent",le.borderLeftColor="transparent";else if(i){const e=U.borderDisabled;le.borderTopColor=e.top,le.borderRightColor=e.right,le.borderBottomColor=e.bottom,le.borderLeftColor=e.left}else le.borderTopColor=sideColor("top"),le.borderRightColor=sideColor("right"),le.borderBottomColor=sideColor("bottom"),le.borderLeftColor=sideColor("left");const be=i?U.borderDisabled.top:sideColor("top"),pe=useRef(Z);pe.current=Z,useEffect(()=>{$.setValue(pe.current)},[U,$]),void 0!==x&&(le.width=x),void 0!==S&&(le.height=S);const ge={disabled:i,...q},ue="top"===c,me=ue?{alignSelf:"flex-start",marginTop:Math.max(0,((b??O.iconSize)-O.iconSize)/2)}:null,he=S??h??O.minHeight,fe=(()=>{if(!p)return 0;const e=Math.min(de.tl,he/2),t=p.left;return e<=0||t>=e?0:Math.ceil(e-Math.sqrt(e*e-(e-t)*(e-t)))})(),xe=p&&ie.top>0?_jsx(Animated.View,{pointerEvents:"none",style:{position:"absolute",top:-ie.top,left:p.left-ie.left,width:p.width,height:ie.top+fe,backgroundColor:Y}}):null,renderInner=e=>_jsxs(_Fragment,{children:[ce.active&&ce.size?_jsx(SquircleFill,{width:ce.size.width,height:ce.size.height,radius:de.tl,fill:e&&!i?M.colors.surface.pressed:Y,stroke:be,strokeWidth:ie.top,outset:ie.top}):null,xe,null!=s?_jsx(View,{style:[P.slot,me],children:s}):null,null!=s&&d?_jsx(View,{pointerEvents:"none",style:[P.divider,me,{height:O.iconSize,backgroundColor:M.colors.field.border}]}):null,_jsx(View,{style:[P.content,ue?P.contentTop:null],children:g}),null!=a?_jsx(View,{style:[P.slot,me],children:a}):null]}),Se=_jsx(Animated.View,{onLayout:ce.onLayout,style:[P.box,le,L],accessibilityRole:G,accessibilityLabel:B,accessibilityHint:A,accessibilityState:ge,testID:W,children:renderInner(!1)});return u&&!m?_jsx(Pressable,{onPress:u,disabled:i,accessible:!1,children:Se}):u?_jsx(Pressable,{onPress:u,disabled:i,accessibilityRole:G??"button",accessibilityLabel:B,accessibilityHint:A,accessibilityState:ge,testID:W,children:({pressed:e})=>_jsx(Animated.View,{onLayout:ce.onLayout,style:[P.box,le,!e||i||ce.active?null:{backgroundColor:M.colors.surface.pressed},L],children:renderInner(e)})}):Se};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;