@webority-technologies/mobile 0.0.20 → 0.0.21

package/lib/commonjs/components/FieldBase/FieldBase.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.resolveVariantColors = exports.resolveFieldTextStyle = exports.resolveFieldSize = exports.default = exports.FieldBase = void 0;
+exports.resolveVariantColors = exports.resolveFieldTextStyle = exports.resolveFieldSize = exports.pickRepresentativeBorderColor = exports.default = exports.FieldBase = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _index = require("../../theme/index.js");
@@ -33,6 +33,66 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
  *   - Shake-on-error or any cross-field animation.
  */
 
+const SIDES = ['top', 'right', 'bottom', 'left'];
+
+/** 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
+  };
+};
+
+/** Are all four sides of a per-side record equal? Used to collapse to shorthand. */
+const allSidesEqual = sides => sides.top === sides.right && sides.right === sides.bottom && sides.bottom === sides.left;
+
+/**
+ * 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.
+ */
+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,
@@ -41,7 +101,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
  * same place. OTPInput intentionally overrides this with its own semibold
  * display weight.
  */
-
+exports.pickRepresentativeBorderColor = pickRepresentativeBorderColor;
 /**
  * Resolve the canonical text style chunk for a field's value. Reads from
  * `theme.components.field.{textColor,disabledTextColor,placeholderColor,fontWeight}`
@@ -122,31 +182,70 @@ const DEFAULT_SIZES = {
 
 /**
  * Strict, fully-resolved colour set used internally. Mirrors `FieldVariantTokens`
- * but every field is non-optional — every state has a concrete colour by the
- * time the box renders, so downstream code can rely on string-typed fills.
+ * 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.
+ * 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`.
  */
 const resolveVariantColors = (theme, variant, override) => {
   const tokenSet = theme.components.field?.[variant];
-  const isOutlined = variant === 'outlined';
-  const idleEmpty = isOutlined ? theme.colors.background.primary : theme.colors.background.secondary;
-  const borderIdle = isOutlined ? theme.colors.border.primary : 'transparent';
-  const borderWidth = isOutlined ? theme.colors.border.width : 0;
+
+  // Variant-specific defaults for resting fill + border treatment. `outlined`
+  // draws all four sides; `filled` draws nothing (fill-only); `underline`
+  // draws only the bottom edge — Material-style single-line inputs.
+  let idleEmpty;
+  let borderIdleDefault;
+  let borderWidthDefault;
+  if (variant === 'outlined') {
+    idleEmpty = theme.colors.background.primary;
+    borderIdleDefault = theme.colors.border.primary;
+    borderWidthDefault = theme.colors.border.width;
+  } else if (variant === 'underline') {
+    idleEmpty = 'transparent';
+    borderIdleDefault = {
+      bottom: theme.colors.border.primary
+    };
+    borderWidthDefault = {
+      bottom: theme.colors.border.width
+    };
+  } else {
+    idleEmpty = theme.colors.background.secondary;
+    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: colors.border.focus }` 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(theme.colors.border.focus));
+  const borderError = expandColorSides(override?.borderError ?? tokenSet?.borderError ?? wrapToIdleShape(theme.colors.border.error));
+  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 ?? undefined,
     backgroundError: override?.backgroundError ?? tokenSet?.backgroundError ?? undefined,
     backgroundDisabled: override?.backgroundDisabled ?? tokenSet?.backgroundDisabled ?? theme.colors.surface.disabled,
-    borderIdle: override?.borderIdle ?? tokenSet?.borderIdle ?? borderIdle,
-    borderFocused: override?.borderFocused ?? tokenSet?.borderFocused ?? theme.colors.border.focus,
-    borderError: override?.borderError ?? tokenSet?.borderError ?? theme.colors.border.error,
-    borderDisabled: override?.borderDisabled ?? tokenSet?.borderDisabled ?? borderIdle,
-    borderWidth: override?.borderWidth ?? tokenSet?.borderWidth ?? borderWidth
+    borderIdle,
+    borderFocused,
+    borderError,
+    borderDisabled,
+    borderWidth,
+    borderFocusedRepresentative: pickRepresentativeBorderColor(borderFocused)
   };
 };
 exports.resolveVariantColors = resolveVariantColors;
@@ -169,7 +268,15 @@ const FieldBase = props => {
     paddingHorizontal: paddingHorizontalProp,
     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,
@@ -208,13 +315,6 @@ const FieldBase = props => {
   const idleFill = filled ? colors.backgroundIdleFilled : colors.backgroundIdleEmpty;
   const focusedFill = colors.backgroundFocused ?? idleFill;
   const errorFill = colors.backgroundError ?? idleFill;
-  const animatedBorderColor = disabled ? colors.borderDisabled : error ? errorAnim.interpolate({
-    inputRange: [0, 1],
-    outputRange: [colors.borderIdle, colors.borderError]
-  }) : focusAnim.interpolate({
-    inputRange: [0, 1],
-    outputRange: [colors.borderIdle, colors.borderFocused]
-  });
   const animatedBackgroundColor = disabled ? colors.backgroundDisabled : error ? errorAnim.interpolate({
     inputRange: [0, 1],
     outputRange: [idleFill, errorFill]
@@ -222,17 +322,105 @@ const FieldBase = props => {
     inputRange: [0, 1],
     outputRange: [idleFill, focusedFill]
   });
+
+  // Per-side border colour. For each side we resolve the "from" (idle) and
+  // "to" (focused or error, depending on state) colour, then drive a single
+  // animated interpolation. When all four sides share the same from+to pair
+  // we collapse to one `borderColor` key — the common case stays cheap.
+  const activeColors = error ? colors.borderError : colors.borderFocused;
+  const activeAnim = error ? errorAnim : focusAnim;
+  const sideFrom = disabled ? colors.borderDisabled : colors.borderIdle;
+  const sideTo = disabled ? colors.borderDisabled : activeColors;
+
+  // 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,
-    borderRadius: borderRadiusProp ?? sizeTokens.borderRadius,
-    borderWidth: borderWidthProp ?? colors.borderWidth,
-    borderColor: animatedBorderColor,
     backgroundColor: animatedBackgroundColor,
     columnGap: gapProp ?? theme.spacing.sm
   };
+
+  // Radius: per-corner prop wins over shorthand prop wins over size token.
+  // Collapse to single `borderRadius` when all four corners match.
+  const radiusShorthand = borderRadiusProp ?? sizeTokens.borderRadius;
+  const corners = {
+    tl: borderTopLeftRadiusProp ?? radiusShorthand,
+    tr: borderTopRightRadiusProp ?? radiusShorthand,
+    bl: borderBottomLeftRadiusProp ?? radiusShorthand,
+    br: borderBottomRightRadiusProp ?? radiusShorthand
+  };
+  if (corners.tl === corners.tr && corners.tr === corners.bl && corners.bl === corners.br) {
+    boxStyle.borderRadius = corners.tl;
+  } else {
+    boxStyle.borderTopLeftRadius = corners.tl;
+    boxStyle.borderTopRightRadius = corners.tr;
+    boxStyle.borderBottomLeftRadius = corners.bl;
+    boxStyle.borderBottomRightRadius = corners.br;
+  }
+
+  // Width: collapse to single `borderWidth` when all four sides match.
+  if (resolvedWidths.top === resolvedWidths.right && resolvedWidths.right === resolvedWidths.bottom && resolvedWidths.bottom === resolvedWidths.left) {
+    boxStyle.borderWidth = resolvedWidths.top;
+  } else {
+    boxStyle.borderTopWidth = resolvedWidths.top;
+    boxStyle.borderRightWidth = resolvedWidths.right;
+    boxStyle.borderBottomWidth = resolvedWidths.bottom;
+    boxStyle.borderLeftWidth = resolvedWidths.left;
+  }
+
+  // Colour: collapse to single `borderColor` only when both endpoints are
+  // identical across all sides. Otherwise emit four `borderXColor`
+  // interpolations. Disabled state is static (no animation needed).
+  const fromAllEqual = allSidesEqual(sideFrom);
+  const toAllEqual = allSidesEqual(sideTo);
+  if (disabled) {
+    if (fromAllEqual) {
+      boxStyle.borderColor = sideFrom.top;
+    } else {
+      boxStyle.borderTopColor = sideFrom.top;
+      boxStyle.borderRightColor = sideFrom.right;
+      boxStyle.borderBottomColor = sideFrom.bottom;
+      boxStyle.borderLeftColor = sideFrom.left;
+    }
+  } else if (fromAllEqual && toAllEqual && sideFrom.top === sideFrom.right && sideTo.top === sideTo.right) {
+    // Common case: shorthand on both ends → single interpolation.
+    boxStyle.borderColor = activeAnim.interpolate({
+      inputRange: [0, 1],
+      outputRange: [sideFrom.top, sideTo.top]
+    });
+  } else {
+    boxStyle.borderTopColor = activeAnim.interpolate({
+      inputRange: [0, 1],
+      outputRange: [sideFrom.top, sideTo.top]
+    });
+    boxStyle.borderRightColor = activeAnim.interpolate({
+      inputRange: [0, 1],
+      outputRange: [sideFrom.right, sideTo.right]
+    });
+    boxStyle.borderBottomColor = activeAnim.interpolate({
+      inputRange: [0, 1],
+      outputRange: [sideFrom.bottom, sideTo.bottom]
+    });
+    boxStyle.borderLeftColor = activeAnim.interpolate({
+      inputRange: [0, 1],
+      outputRange: [sideFrom.left, sideTo.left]
+    });
+  }
   if (width !== undefined) boxStyle.width = width;
   if (height !== undefined) boxStyle.height = height;
   const a11yState = {

package/lib/commonjs/components/Input/Input.js

@@ -168,7 +168,7 @@ const Input = exports.Input = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =
   // Selection / caret / handle colour walks the same resolution chain as the
   // focused border so brands that override `components.field.<variant>.borderFocused`
   // get a matching selection tint without also having to update root `border.focus`.
-  const selectionColor = (0, _react.useMemo)(() => (0, _FieldBase.resolveVariantColors)(theme, variant, fillOverrides).borderFocused, [theme, variant, fillOverrides]);
+  const selectionColor = (0, _react.useMemo)(() => (0, _FieldBase.resolveVariantColors)(theme, variant, fillOverrides).borderFocusedRepresentative, [theme, variant, fillOverrides]);
   const borderRadiusOverride = borderRadiusProp ?? theme.components.input?.borderRadius;
 
   // Floating label styles

package/lib/commonjs/components/SearchBar/SearchBar.js

@@ -40,7 +40,13 @@ const SearchBar = exports.SearchBar = /*#__PURE__*/(0, _react.forwardRef)((props
   // field-family token (`components.field.defaultVariant`) → library default.
   // Library default stays `'filled'` so SearchBar reads as the traditional
   // pill-shaped, borderless search box when no theme opinion is expressed.
-  const variant = variantProp ?? theme.components.searchBar?.defaultVariant ?? theme.components.field?.defaultVariant ?? 'filled';
+  // SearchBar deliberately only supports 'filled' and 'outlined' — an
+  // underline-only pill makes no visual sense. If the shared field default is
+  // 'underline', fall through to 'filled' rather than carry an unsupported
+  // value down to the variant token lookup.
+  const sharedDefault = theme.components.field?.defaultVariant;
+  const sharedFallback = sharedDefault === 'outlined' || sharedDefault === 'filled' ? sharedDefault : 'filled';
+  const variant = variantProp ?? theme.components.searchBar?.defaultVariant ?? sharedFallback;
   const fieldTokens = (0, _FieldBase.resolveFieldSize)(theme, size);
   const sizeStyles = {
     ...fieldTokens,
@@ -184,7 +190,7 @@ const SearchBar = exports.SearchBar = /*#__PURE__*/(0, _react.forwardRef)((props
           autoFocus: autoFocus,
           editable: !disabled,
           returnKeyType: "search",
-          selectionColor: (0, _FieldBase.resolveVariantColors)(theme, variant).borderFocused,
+          selectionColor: (0, _FieldBase.resolveVariantColors)(theme, variant).borderFocusedRepresentative,
           accessibilityLabel: accessibilityLabel ?? placeholder,
           accessibilityState: {
             disabled

package/lib/commonjs/components/Select/Select.js

@@ -326,7 +326,7 @@ const Select = exports.Select = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
               onChangeText: setQuery,
               placeholder: "Search\u2026",
               placeholderTextColor: theme.colors.text.tertiary,
-              selectionColor: (0, _FieldBase.resolveVariantColors)(theme, theme.components.field?.defaultVariant ?? 'outlined').borderFocused,
+              selectionColor: (0, _FieldBase.resolveVariantColors)(theme, theme.components.field?.defaultVariant ?? 'outlined').borderFocusedRepresentative,
               accessibilityLabel: "Search options",
               style: [styles.searchInput, {
                 color: theme.colors.text.primary,

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

@@ -27,6 +27,66 @@
 import React, { useEffect, useMemo, useRef } from 'react';
 import { Animated, Easing, Pressable, StyleSheet, View } from 'react-native';
 import { useTheme, createAnimatedValue, fontFor } from "../../theme/index.js";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const SIDES = ['top', 'right', 'bottom', 'left'];
+
+/** 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
+  };
+};
+
+/** Are all four sides of a per-side record equal? Used to collapse to shorthand. */
+const allSidesEqual = sides => sides.top === sides.right && sides.right === sides.bottom && sides.bottom === sides.left;
+
+/**
+ * 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.
@@ -36,7 +96,7 @@ import { useTheme, createAnimatedValue, fontFor } from "../../theme/index.js";
  * same place. OTPInput intentionally overrides this with its own semibold
  * display weight.
  */
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+
 /**
  * Resolve the canonical text style chunk for a field's value. Reads from
  * `theme.components.field.{textColor,disabledTextColor,placeholderColor,fontWeight}`
@@ -115,31 +175,70 @@ const DEFAULT_SIZES = {
 
 /**
  * Strict, fully-resolved colour set used internally. Mirrors `FieldVariantTokens`
- * but every field is non-optional — every state has a concrete colour by the
- * time the box renders, so downstream code can rely on string-typed fills.
+ * 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.
+ * 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 isOutlined = variant === 'outlined';
-  const idleEmpty = isOutlined ? theme.colors.background.primary : theme.colors.background.secondary;
-  const borderIdle = isOutlined ? theme.colors.border.primary : 'transparent';
-  const borderWidth = isOutlined ? theme.colors.border.width : 0;
+
+  // Variant-specific defaults for resting fill + border treatment. `outlined`
+  // draws all four sides; `filled` draws nothing (fill-only); `underline`
+  // draws only the bottom edge — Material-style single-line inputs.
+  let idleEmpty;
+  let borderIdleDefault;
+  let borderWidthDefault;
+  if (variant === 'outlined') {
+    idleEmpty = theme.colors.background.primary;
+    borderIdleDefault = theme.colors.border.primary;
+    borderWidthDefault = theme.colors.border.width;
+  } else if (variant === 'underline') {
+    idleEmpty = 'transparent';
+    borderIdleDefault = {
+      bottom: theme.colors.border.primary
+    };
+    borderWidthDefault = {
+      bottom: theme.colors.border.width
+    };
+  } else {
+    idleEmpty = theme.colors.background.secondary;
+    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: colors.border.focus }` 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(theme.colors.border.focus));
+  const borderError = expandColorSides(override?.borderError ?? tokenSet?.borderError ?? wrapToIdleShape(theme.colors.border.error));
+  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 ?? undefined,
     backgroundError: override?.backgroundError ?? tokenSet?.backgroundError ?? undefined,
     backgroundDisabled: override?.backgroundDisabled ?? tokenSet?.backgroundDisabled ?? theme.colors.surface.disabled,
-    borderIdle: override?.borderIdle ?? tokenSet?.borderIdle ?? borderIdle,
-    borderFocused: override?.borderFocused ?? tokenSet?.borderFocused ?? theme.colors.border.focus,
-    borderError: override?.borderError ?? tokenSet?.borderError ?? theme.colors.border.error,
-    borderDisabled: override?.borderDisabled ?? tokenSet?.borderDisabled ?? borderIdle,
-    borderWidth: override?.borderWidth ?? tokenSet?.borderWidth ?? borderWidth
+    borderIdle,
+    borderFocused,
+    borderError,
+    borderDisabled,
+    borderWidth,
+    borderFocusedRepresentative: pickRepresentativeBorderColor(borderFocused)
   };
 };
 export const FieldBase = props => {
@@ -161,7 +260,15 @@ export const FieldBase = props => {
     paddingHorizontal: paddingHorizontalProp,
     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,
@@ -200,13 +307,6 @@ export const FieldBase = props => {
   const idleFill = filled ? colors.backgroundIdleFilled : colors.backgroundIdleEmpty;
   const focusedFill = colors.backgroundFocused ?? idleFill;
   const errorFill = colors.backgroundError ?? idleFill;
-  const animatedBorderColor = disabled ? colors.borderDisabled : error ? errorAnim.interpolate({
-    inputRange: [0, 1],
-    outputRange: [colors.borderIdle, colors.borderError]
-  }) : focusAnim.interpolate({
-    inputRange: [0, 1],
-    outputRange: [colors.borderIdle, colors.borderFocused]
-  });
   const animatedBackgroundColor = disabled ? colors.backgroundDisabled : error ? errorAnim.interpolate({
     inputRange: [0, 1],
     outputRange: [idleFill, errorFill]
@@ -214,17 +314,105 @@ export const FieldBase = props => {
     inputRange: [0, 1],
     outputRange: [idleFill, focusedFill]
   });
+
+  // Per-side border colour. For each side we resolve the "from" (idle) and
+  // "to" (focused or error, depending on state) colour, then drive a single
+  // animated interpolation. When all four sides share the same from+to pair
+  // we collapse to one `borderColor` key — the common case stays cheap.
+  const activeColors = error ? colors.borderError : colors.borderFocused;
+  const activeAnim = error ? errorAnim : focusAnim;
+  const sideFrom = disabled ? colors.borderDisabled : colors.borderIdle;
+  const sideTo = disabled ? colors.borderDisabled : activeColors;
+
+  // 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,
-    borderRadius: borderRadiusProp ?? sizeTokens.borderRadius,
-    borderWidth: borderWidthProp ?? colors.borderWidth,
-    borderColor: animatedBorderColor,
     backgroundColor: animatedBackgroundColor,
     columnGap: gapProp ?? theme.spacing.sm
   };
+
+  // Radius: per-corner prop wins over shorthand prop wins over size token.
+  // Collapse to single `borderRadius` when all four corners match.
+  const radiusShorthand = borderRadiusProp ?? sizeTokens.borderRadius;
+  const corners = {
+    tl: borderTopLeftRadiusProp ?? radiusShorthand,
+    tr: borderTopRightRadiusProp ?? radiusShorthand,
+    bl: borderBottomLeftRadiusProp ?? radiusShorthand,
+    br: borderBottomRightRadiusProp ?? radiusShorthand
+  };
+  if (corners.tl === corners.tr && corners.tr === corners.bl && corners.bl === corners.br) {
+    boxStyle.borderRadius = corners.tl;
+  } else {
+    boxStyle.borderTopLeftRadius = corners.tl;
+    boxStyle.borderTopRightRadius = corners.tr;
+    boxStyle.borderBottomLeftRadius = corners.bl;
+    boxStyle.borderBottomRightRadius = corners.br;
+  }
+
+  // Width: collapse to single `borderWidth` when all four sides match.
+  if (resolvedWidths.top === resolvedWidths.right && resolvedWidths.right === resolvedWidths.bottom && resolvedWidths.bottom === resolvedWidths.left) {
+    boxStyle.borderWidth = resolvedWidths.top;
+  } else {
+    boxStyle.borderTopWidth = resolvedWidths.top;
+    boxStyle.borderRightWidth = resolvedWidths.right;
+    boxStyle.borderBottomWidth = resolvedWidths.bottom;
+    boxStyle.borderLeftWidth = resolvedWidths.left;
+  }
+
+  // Colour: collapse to single `borderColor` only when both endpoints are
+  // identical across all sides. Otherwise emit four `borderXColor`
+  // interpolations. Disabled state is static (no animation needed).
+  const fromAllEqual = allSidesEqual(sideFrom);
+  const toAllEqual = allSidesEqual(sideTo);
+  if (disabled) {
+    if (fromAllEqual) {
+      boxStyle.borderColor = sideFrom.top;
+    } else {
+      boxStyle.borderTopColor = sideFrom.top;
+      boxStyle.borderRightColor = sideFrom.right;
+      boxStyle.borderBottomColor = sideFrom.bottom;
+      boxStyle.borderLeftColor = sideFrom.left;
+    }
+  } else if (fromAllEqual && toAllEqual && sideFrom.top === sideFrom.right && sideTo.top === sideTo.right) {
+    // Common case: shorthand on both ends → single interpolation.
+    boxStyle.borderColor = activeAnim.interpolate({
+      inputRange: [0, 1],
+      outputRange: [sideFrom.top, sideTo.top]
+    });
+  } else {
+    boxStyle.borderTopColor = activeAnim.interpolate({
+      inputRange: [0, 1],
+      outputRange: [sideFrom.top, sideTo.top]
+    });
+    boxStyle.borderRightColor = activeAnim.interpolate({
+      inputRange: [0, 1],
+      outputRange: [sideFrom.right, sideTo.right]
+    });
+    boxStyle.borderBottomColor = activeAnim.interpolate({
+      inputRange: [0, 1],
+      outputRange: [sideFrom.bottom, sideTo.bottom]
+    });
+    boxStyle.borderLeftColor = activeAnim.interpolate({
+      inputRange: [0, 1],
+      outputRange: [sideFrom.left, sideTo.left]
+    });
+  }
   if (width !== undefined) boxStyle.width = width;
   if (height !== undefined) boxStyle.height = height;
   const a11yState = {

package/lib/module/components/Input/Input.js

@@ -163,7 +163,7 @@ const Input = /*#__PURE__*/forwardRef((props, ref) => {
   // Selection / caret / handle colour walks the same resolution chain as the
   // focused border so brands that override `components.field.<variant>.borderFocused`
   // get a matching selection tint without also having to update root `border.focus`.
-  const selectionColor = useMemo(() => resolveVariantColors(theme, variant, fillOverrides).borderFocused, [theme, variant, fillOverrides]);
+  const selectionColor = useMemo(() => resolveVariantColors(theme, variant, fillOverrides).borderFocusedRepresentative, [theme, variant, fillOverrides]);
   const borderRadiusOverride = borderRadiusProp ?? theme.components.input?.borderRadius;
 
   // Floating label styles

package/lib/module/components/SearchBar/SearchBar.js

@@ -35,7 +35,13 @@ const SearchBar = /*#__PURE__*/forwardRef((props, ref) => {
   // field-family token (`components.field.defaultVariant`) → library default.
   // Library default stays `'filled'` so SearchBar reads as the traditional
   // pill-shaped, borderless search box when no theme opinion is expressed.
-  const variant = variantProp ?? theme.components.searchBar?.defaultVariant ?? theme.components.field?.defaultVariant ?? 'filled';
+  // SearchBar deliberately only supports 'filled' and 'outlined' — an
+  // underline-only pill makes no visual sense. If the shared field default is
+  // 'underline', fall through to 'filled' rather than carry an unsupported
+  // value down to the variant token lookup.
+  const sharedDefault = theme.components.field?.defaultVariant;
+  const sharedFallback = sharedDefault === 'outlined' || sharedDefault === 'filled' ? sharedDefault : 'filled';
+  const variant = variantProp ?? theme.components.searchBar?.defaultVariant ?? sharedFallback;
   const fieldTokens = resolveFieldSize(theme, size);
   const sizeStyles = {
     ...fieldTokens,
@@ -179,7 +185,7 @@ const SearchBar = /*#__PURE__*/forwardRef((props, ref) => {
           autoFocus: autoFocus,
           editable: !disabled,
           returnKeyType: "search",
-          selectionColor: resolveVariantColors(theme, variant).borderFocused,
+          selectionColor: resolveVariantColors(theme, variant).borderFocusedRepresentative,
           accessibilityLabel: accessibilityLabel ?? placeholder,
           accessibilityState: {
             disabled

package/lib/module/components/Select/Select.js

@@ -321,7 +321,7 @@ const Select = /*#__PURE__*/forwardRef((props, ref) => {
               onChangeText: setQuery,
               placeholder: "Search\u2026",
               placeholderTextColor: theme.colors.text.tertiary,
-              selectionColor: resolveVariantColors(theme, theme.components.field?.defaultVariant ?? 'outlined').borderFocused,
+              selectionColor: resolveVariantColors(theme, theme.components.field?.defaultVariant ?? 'outlined').borderFocusedRepresentative,
               accessibilityLabel: "Search options",
               style: [styles.searchInput, {
                 color: theme.colors.text.primary,

package/lib/typescript/commonjs/components/FieldBase/FieldBase.d.ts

@@ -23,9 +23,17 @@
  */
 import React from 'react';
 import type { AccessibilityRole, AccessibilityState, StyleProp, TextStyle, ViewStyle } from 'react-native';
-import type { FieldSizeTokens, FieldVariantTokens, Theme } from '../../theme/types';
+import type { FieldSide, FieldSizeTokens, FieldVariantTokens, Theme } from '../../theme/types';
 export type FieldBaseSize = 'sm' | 'md' | 'lg';
-export type FieldBaseVariant = 'outlined' | 'filled';
+export type FieldBaseVariant = 'outlined' | 'filled' | 'underline';
+/**
+ * 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 declare const pickRepresentativeBorderColor: (sides: Record<FieldSide, string>) => string;
 export interface FieldBaseProps {
     /** Resolves to dimension tokens at `theme.components.field[size]`. Default `'md'`. */
     size?: FieldBaseSize;
@@ -65,10 +73,26 @@ export interface FieldBaseProps {
     paddingHorizontal?: number;
     /** Override vertical padding (single-line). Multiline parents usually leave this default. */
     paddingVertical?: number;
-    /** Override corner radius. SearchBar pill uses this to apply `radius.full`. */
+    /** Override corner radius (shorthand — all four corners). SearchBar pill uses this to apply `radius.full`. */
     borderRadius?: number;
-    /** Override border width. OTP uses 1.5; everything else inherits `colors.border.width`. */
+    /** Top-left corner radius. Wins over `borderRadius`. */
+    borderTopLeftRadius?: number;
+    /** Top-right corner radius. Wins over `borderRadius`. */
+    borderTopRightRadius?: number;
+    /** Bottom-left corner radius. Wins over `borderRadius`. */
+    borderBottomLeftRadius?: number;
+    /** Bottom-right corner radius. Wins over `borderRadius`. */
+    borderBottomRightRadius?: number;
+    /** Override border width (shorthand — all four sides). OTP uses 1.5; everything else inherits `colors.border.width`. */
     borderWidth?: number;
+    /** Top border width. Wins over `borderWidth`. */
+    borderTopWidth?: number;
+    /** Right border width. Wins over `borderWidth`. */
+    borderRightWidth?: number;
+    /** Bottom border width. Wins over `borderWidth`. */
+    borderBottomWidth?: number;
+    /** Left border width. Wins over `borderWidth`. */
+    borderLeftWidth?: number;
     /** Gap between leading / children / trailing. Defaults to `theme.spacing.sm`. */
     gap?: number;
     fillOverrides?: Partial<FieldVariantTokens>;
@@ -114,8 +138,11 @@ export declare const resolveFieldTextStyle: (theme: Theme, options?: FieldTextSt
 export declare const resolveFieldSize: (theme: Theme, size: FieldBaseSize) => FieldSizeTokens;
 /**
  * Strict, fully-resolved colour set used internally. Mirrors `FieldVariantTokens`
- * but every field is non-optional — every state has a concrete colour by the
- * time the box renders, so downstream code can rely on string-typed fills.
+ * 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.
  */
 interface ResolvedFieldColors {
     backgroundIdleEmpty: string;
@@ -125,15 +152,19 @@ interface ResolvedFieldColors {
     /** Optional override fill while in error — when undefined, error animates from idle to idle. */
     backgroundError: string | undefined;
     backgroundDisabled: string;
-    borderIdle: string;
-    borderFocused: string;
-    borderError: string;
-    borderDisabled: string;
-    borderWidth: number;
+    borderIdle: Record<FieldSide, string>;
+    borderFocused: Record<FieldSide, string>;
+    borderError: Record<FieldSide, string>;
+    borderDisabled: Record<FieldSide, string>;
+    borderWidth: Record<FieldSide, number>;
+    /** Single representative colour from `borderFocused` — first non-transparent side, bottom-priority. */
+    borderFocusedRepresentative: string;
 }
 /**
  * Resolve the full set of state-aware fill + border colours for a given
- * variant. Order: explicit override → theme token → library default.
+ * 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 declare const resolveVariantColors: (theme: Theme, variant: FieldBaseVariant, override?: Partial<FieldVariantTokens>) => ResolvedFieldColors;
 export declare const FieldBase: React.FC<FieldBaseProps>;

package/lib/typescript/commonjs/components/Input/Input.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { TextInput } from 'react-native';
 import type { BlurEvent, FocusEvent, StyleProp, TextInputProps, TextStyle, ViewStyle } from 'react-native';
 export type InputSize = 'sm' | 'md' | 'lg';
-export type InputVariant = 'outlined' | 'filled';
+export type InputVariant = 'outlined' | 'filled' | 'underline';
 export type InputLabelMode = 'float' | 'top';
 export interface InputProps extends Omit<TextInputProps, 'style'> {
     label?: string;

package/lib/typescript/commonjs/theme/types.d.ts

@@ -391,12 +391,33 @@ export interface FieldSizeTokens {
     borderRadius: number;
     iconSize: number;
 }
+/**
+ * One of the four field-box sides. Used everywhere the library accepts
+ * per-side overrides for border width / colour.
+ */
+export type FieldSide = 'top' | 'right' | 'bottom' | 'left';
+/**
+ * Shorthand-or-longhand value. A bare `T` means "apply to all four sides";
+ * an object form lets a consumer set specific sides while the others fall
+ * through to whatever the resolver decided. Mirrors how React Native's
+ * `borderWidth` + `borderXWidth` (and CSS `border` + `border-X`) compose.
+ */
+export type FieldPerSide<T> = T | Partial<Record<FieldSide, T>>;
+/** Border colour value: a single colour string or a per-side colour map. */
+export type FieldBorderColor = FieldPerSide<string>;
+/** Border width value: a single width or a per-side width map. */
+export type FieldBorderWidth = FieldPerSide<number>;
 /**
  * State-aware fill + border colours for a field variant. Resolution order
  * inside FieldBase: variant token → library default. Idle distinguishes
  * empty vs filled so consumers can tint the resting field differently once
  * the user has typed. When focused/error/disabled fills are omitted, the
  * box animates from the current idle fill to itself (no fill change).
+ *
+ * Border colour + width are `FieldPerSide` values — pass a bare string /
+ * number to set all four sides (the common case), or an object like
+ * `{ bottom: '#1A73E8' }` to draw only one side. Sides not specified in the
+ * object fall through to the shorthand default.
  */
 export interface FieldVariantTokens {
     backgroundIdleEmpty: string;
@@ -404,18 +425,20 @@ export interface FieldVariantTokens {
     backgroundFocused?: string;
     backgroundError?: string;
     backgroundDisabled: string;
-    borderIdle: string;
-    borderFocused: string;
-    borderError: string;
-    borderDisabled: string;
-    borderWidth: number;
+    borderIdle: FieldBorderColor;
+    borderFocused: FieldBorderColor;
+    borderError: FieldBorderColor;
+    borderDisabled: FieldBorderColor;
+    borderWidth: FieldBorderWidth;
 }
 export interface FieldTokens extends Partial<Record<'sm' | 'md' | 'lg', FieldSizeTokens>> {
     /** Default `variant` when caller doesn't pass one. Library default: 'outlined'. */
-    defaultVariant?: 'outlined' | 'filled';
+    defaultVariant?: 'outlined' | 'filled' | 'underline';
     /** State-aware fill + border colours per variant. */
     outlined?: Partial<FieldVariantTokens>;
     filled?: Partial<FieldVariantTokens>;
+    /** Bottom-border-only variant — Material-style underline inputs. */
+    underline?: Partial<FieldVariantTokens>;
     /** Text colour for the editable / displayed value. Defaults to `colors.text.primary`. */
     textColor?: string;
     /** Text colour when the field is disabled. Defaults to `colors.text.disabled`. */
@@ -439,7 +462,7 @@ export interface InputFillTokens {
 }
 export interface InputComponentTokens extends Partial<Record<ComponentSizeKey, InputSizeTokens>> {
     /** Default `variant` when caller doesn't pass one. Library default: 'outlined'. */
-    defaultVariant?: 'outlined' | 'filled';
+    defaultVariant?: 'outlined' | 'filled' | 'underline';
     /** Default `labelMode` when caller doesn't pass one. Library default: 'float'. */
     defaultLabelMode?: 'float' | 'top';
     /** Corner radius in pixels for the field wrapper. Library default: size-driven (sm=10, md=12, lg=14). */
@@ -468,6 +491,7 @@ export interface InputComponentTokens extends Partial<Record<ComponentSizeKey, I
     fillColors?: {
         outlined?: InputFillTokens;
         filled?: InputFillTokens;
+        underline?: InputFillTokens;
     };
 }
 export interface BottomSheetTokens {

package/lib/typescript/module/components/FieldBase/FieldBase.d.ts

@@ -23,9 +23,17 @@
  */
 import React from 'react';
 import type { AccessibilityRole, AccessibilityState, StyleProp, TextStyle, ViewStyle } from 'react-native';
-import type { FieldSizeTokens, FieldVariantTokens, Theme } from '../../theme/types';
+import type { FieldSide, FieldSizeTokens, FieldVariantTokens, Theme } from '../../theme/types';
 export type FieldBaseSize = 'sm' | 'md' | 'lg';
-export type FieldBaseVariant = 'outlined' | 'filled';
+export type FieldBaseVariant = 'outlined' | 'filled' | 'underline';
+/**
+ * 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 declare const pickRepresentativeBorderColor: (sides: Record<FieldSide, string>) => string;
 export interface FieldBaseProps {
     /** Resolves to dimension tokens at `theme.components.field[size]`. Default `'md'`. */
     size?: FieldBaseSize;
@@ -65,10 +73,26 @@ export interface FieldBaseProps {
     paddingHorizontal?: number;
     /** Override vertical padding (single-line). Multiline parents usually leave this default. */
     paddingVertical?: number;
-    /** Override corner radius. SearchBar pill uses this to apply `radius.full`. */
+    /** Override corner radius (shorthand — all four corners). SearchBar pill uses this to apply `radius.full`. */
     borderRadius?: number;
-    /** Override border width. OTP uses 1.5; everything else inherits `colors.border.width`. */
+    /** Top-left corner radius. Wins over `borderRadius`. */
+    borderTopLeftRadius?: number;
+    /** Top-right corner radius. Wins over `borderRadius`. */
+    borderTopRightRadius?: number;
+    /** Bottom-left corner radius. Wins over `borderRadius`. */
+    borderBottomLeftRadius?: number;
+    /** Bottom-right corner radius. Wins over `borderRadius`. */
+    borderBottomRightRadius?: number;
+    /** Override border width (shorthand — all four sides). OTP uses 1.5; everything else inherits `colors.border.width`. */
     borderWidth?: number;
+    /** Top border width. Wins over `borderWidth`. */
+    borderTopWidth?: number;
+    /** Right border width. Wins over `borderWidth`. */
+    borderRightWidth?: number;
+    /** Bottom border width. Wins over `borderWidth`. */
+    borderBottomWidth?: number;
+    /** Left border width. Wins over `borderWidth`. */
+    borderLeftWidth?: number;
     /** Gap between leading / children / trailing. Defaults to `theme.spacing.sm`. */
     gap?: number;
     fillOverrides?: Partial<FieldVariantTokens>;
@@ -114,8 +138,11 @@ export declare const resolveFieldTextStyle: (theme: Theme, options?: FieldTextSt
 export declare const resolveFieldSize: (theme: Theme, size: FieldBaseSize) => FieldSizeTokens;
 /**
  * Strict, fully-resolved colour set used internally. Mirrors `FieldVariantTokens`
- * but every field is non-optional — every state has a concrete colour by the
- * time the box renders, so downstream code can rely on string-typed fills.
+ * 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.
  */
 interface ResolvedFieldColors {
     backgroundIdleEmpty: string;
@@ -125,15 +152,19 @@ interface ResolvedFieldColors {
     /** Optional override fill while in error — when undefined, error animates from idle to idle. */
     backgroundError: string | undefined;
     backgroundDisabled: string;
-    borderIdle: string;
-    borderFocused: string;
-    borderError: string;
-    borderDisabled: string;
-    borderWidth: number;
+    borderIdle: Record<FieldSide, string>;
+    borderFocused: Record<FieldSide, string>;
+    borderError: Record<FieldSide, string>;
+    borderDisabled: Record<FieldSide, string>;
+    borderWidth: Record<FieldSide, number>;
+    /** Single representative colour from `borderFocused` — first non-transparent side, bottom-priority. */
+    borderFocusedRepresentative: string;
 }
 /**
  * Resolve the full set of state-aware fill + border colours for a given
- * variant. Order: explicit override → theme token → library default.
+ * 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 declare const resolveVariantColors: (theme: Theme, variant: FieldBaseVariant, override?: Partial<FieldVariantTokens>) => ResolvedFieldColors;
 export declare const FieldBase: React.FC<FieldBaseProps>;

package/lib/typescript/module/components/Input/Input.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { TextInput } from 'react-native';
 import type { BlurEvent, FocusEvent, StyleProp, TextInputProps, TextStyle, ViewStyle } from 'react-native';
 export type InputSize = 'sm' | 'md' | 'lg';
-export type InputVariant = 'outlined' | 'filled';
+export type InputVariant = 'outlined' | 'filled' | 'underline';
 export type InputLabelMode = 'float' | 'top';
 export interface InputProps extends Omit<TextInputProps, 'style'> {
     label?: string;

package/lib/typescript/module/theme/types.d.ts

@@ -391,12 +391,33 @@ export interface FieldSizeTokens {
     borderRadius: number;
     iconSize: number;
 }
+/**
+ * One of the four field-box sides. Used everywhere the library accepts
+ * per-side overrides for border width / colour.
+ */
+export type FieldSide = 'top' | 'right' | 'bottom' | 'left';
+/**
+ * Shorthand-or-longhand value. A bare `T` means "apply to all four sides";
+ * an object form lets a consumer set specific sides while the others fall
+ * through to whatever the resolver decided. Mirrors how React Native's
+ * `borderWidth` + `borderXWidth` (and CSS `border` + `border-X`) compose.
+ */
+export type FieldPerSide<T> = T | Partial<Record<FieldSide, T>>;
+/** Border colour value: a single colour string or a per-side colour map. */
+export type FieldBorderColor = FieldPerSide<string>;
+/** Border width value: a single width or a per-side width map. */
+export type FieldBorderWidth = FieldPerSide<number>;
 /**
  * State-aware fill + border colours for a field variant. Resolution order
  * inside FieldBase: variant token → library default. Idle distinguishes
  * empty vs filled so consumers can tint the resting field differently once
  * the user has typed. When focused/error/disabled fills are omitted, the
  * box animates from the current idle fill to itself (no fill change).
+ *
+ * Border colour + width are `FieldPerSide` values — pass a bare string /
+ * number to set all four sides (the common case), or an object like
+ * `{ bottom: '#1A73E8' }` to draw only one side. Sides not specified in the
+ * object fall through to the shorthand default.
  */
 export interface FieldVariantTokens {
     backgroundIdleEmpty: string;
@@ -404,18 +425,20 @@ export interface FieldVariantTokens {
     backgroundFocused?: string;
     backgroundError?: string;
     backgroundDisabled: string;
-    borderIdle: string;
-    borderFocused: string;
-    borderError: string;
-    borderDisabled: string;
-    borderWidth: number;
+    borderIdle: FieldBorderColor;
+    borderFocused: FieldBorderColor;
+    borderError: FieldBorderColor;
+    borderDisabled: FieldBorderColor;
+    borderWidth: FieldBorderWidth;
 }
 export interface FieldTokens extends Partial<Record<'sm' | 'md' | 'lg', FieldSizeTokens>> {
     /** Default `variant` when caller doesn't pass one. Library default: 'outlined'. */
-    defaultVariant?: 'outlined' | 'filled';
+    defaultVariant?: 'outlined' | 'filled' | 'underline';
     /** State-aware fill + border colours per variant. */
     outlined?: Partial<FieldVariantTokens>;
     filled?: Partial<FieldVariantTokens>;
+    /** Bottom-border-only variant — Material-style underline inputs. */
+    underline?: Partial<FieldVariantTokens>;
     /** Text colour for the editable / displayed value. Defaults to `colors.text.primary`. */
     textColor?: string;
     /** Text colour when the field is disabled. Defaults to `colors.text.disabled`. */
@@ -439,7 +462,7 @@ export interface InputFillTokens {
 }
 export interface InputComponentTokens extends Partial<Record<ComponentSizeKey, InputSizeTokens>> {
     /** Default `variant` when caller doesn't pass one. Library default: 'outlined'. */
-    defaultVariant?: 'outlined' | 'filled';
+    defaultVariant?: 'outlined' | 'filled' | 'underline';
     /** Default `labelMode` when caller doesn't pass one. Library default: 'float'. */
     defaultLabelMode?: 'float' | 'top';
     /** Corner radius in pixels for the field wrapper. Library default: size-driven (sm=10, md=12, lg=14). */
@@ -468,6 +491,7 @@ export interface InputComponentTokens extends Partial<Record<ComponentSizeKey, I
     fillColors?: {
         outlined?: InputFillTokens;
         filled?: InputFillTokens;
+        underline?: InputFillTokens;
     };
 }
 export interface BottomSheetTokens {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority-technologies/mobile",
-  "version": "0.0.20",
+  "version": "0.0.21",
   "description": "Beautiful, animated, accessible React Native components plus API/auth/logging/network/storage utilities for Webority projects.",
   "keywords": [
     "react-native",