@webority-technologies/mobile 0.0.20 → 0.0.22

package/lib/typescript/module/components/BottomSheet/index.d.ts

@@ -1,3 +1,3 @@
-export { BottomSheet, default } from './BottomSheet';
-export type { BottomSheetProps, BottomSheetRef, SnapPoint } from './BottomSheet';
+export { BottomSheet, default, useBottomSheet } from './BottomSheet';
+export type { BottomSheetContextValue, BottomSheetProps, BottomSheetRef, SnapPoint } from './BottomSheet';
 //# sourceMappingURL=index.d.ts.map

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/components/index.d.ts

@@ -8,8 +8,8 @@ export { Banner } from './Banner';
 export type { BannerProps, BannerVariant, BannerAction } from './Banner';
 export { BottomNavigation } from './BottomNavigation';
 export type { BottomNavigationProps, TabConfig } from './BottomNavigation';
-export { BottomSheet } from './BottomSheet';
-export type { BottomSheetProps, BottomSheetRef } from './BottomSheet';
+export { BottomSheet, useBottomSheet } from './BottomSheet';
+export type { BottomSheetContextValue, BottomSheetProps, BottomSheetRef } from './BottomSheet';
 export { Button } from './Button';
 export type { ButtonProps, ButtonVariant, ButtonTone, ButtonSize } from './Button';
 export { Card } from './Card';

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.22",
   "description": "Beautiful, animated, accessible React Native components plus API/auth/logging/network/storage utilities for Webority projects.",
   "keywords": [
     "react-native",