@webority-technologies/mobile-ui 0.0.1

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

@@ -0,0 +1,511 @@
+"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 { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } 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
+  };
+};
+
+/** 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.
+ * 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}`
+ * with library-default fallbacks; 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 color = disabled ? tokens?.disabledTextColor ?? theme.colors.text.disabled : tokens?.textColor ?? theme.colors.text.primary;
+  const placeholderColor = tokens?.placeholderColor ?? theme.colors.text.tertiary;
+
+  // 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.
+  const weightStyle = tokens?.fontWeight ? {
+    fontWeight: tokens.fontWeight
+  } : fontFor(theme, 'medium');
+  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 ?? '*'}`
+  });
+};
+
+/**
+ * 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];
+  return {
+    paddingHorizontal: sizeFromTheme?.paddingHorizontal ?? DEFAULT_SIZES[size].paddingHorizontal,
+    paddingVertical: sizeFromTheme?.paddingVertical ?? DEFAULT_SIZES[size].paddingVertical,
+    minHeight: sizeFromTheme?.minHeight ?? DEFAULT_SIZES[size].minHeight,
+    fontSize: sizeFromTheme?.fontSize ?? DEFAULT_SIZES[size].fontSize,
+    borderRadius: sizeFromTheme?.borderRadius ?? DEFAULT_SIZES[size].borderRadius,
+    iconSize: sizeFromTheme?.iconSize ?? DEFAULT_SIZES[size].iconSize
+  };
+};
+
+// 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: 8,
+    minHeight: 38,
+    fontSize: 13,
+    borderRadius: 10,
+    iconSize: 16
+  },
+  md: {
+    paddingHorizontal: 14,
+    paddingVertical: 11,
+    minHeight: 46,
+    fontSize: 15,
+    borderRadius: 12,
+    iconSize: 18
+  },
+  lg: {
+    paddingHorizontal: 16,
+    paddingVertical: 14,
+    minHeight: 54,
+    fontSize: 16,
+    borderRadius: 14,
+    iconSize: 20
+  }
+};
+
+/**
+ * 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];
+
+  // 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,
+    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,
+    trailing,
+    children,
+    onPress,
+    minHeight: minHeightProp,
+    maxHeight,
+    width,
+    height,
+    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,
+    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]);
+  const focusAnim = useRef(createAnimatedValue(focused ? 1 : 0)).current;
+  const errorAnim = useRef(createAnimatedValue(error ? 1 : 0)).current;
+  useEffect(() => {
+    const anim = Animated.timing(focusAnim, {
+      toValue: focused ? 1 : 0,
+      duration: theme.motion.duration.fast,
+      easing: Easing.bezier(...theme.motion.easing.standard),
+      useNativeDriver: false
+    });
+    anim.start();
+    return () => anim.stop();
+  }, [focused, focusAnim, theme.motion.duration.fast, theme.motion.easing.standard]);
+  useEffect(() => {
+    const anim = Animated.timing(errorAnim, {
+      toValue: error ? 1 : 0,
+      duration: theme.motion.duration.fast,
+      easing: Easing.bezier(...theme.motion.easing.standard),
+      useNativeDriver: false
+    });
+    anim.start();
+    return () => anim.stop();
+  }, [error, errorAnim, theme.motion.duration.fast, theme.motion.easing.standard]);
+
+  // Resting border + fill (pre-animation). Error wins over focus when both
+  // happen at once; we drive a single interpolation between blurred ↔ active.
+  const idleFill = filled ? colors.backgroundIdleFilled : colors.backgroundIdleEmpty;
+  const focusedFill = colors.backgroundFocused ?? idleFill;
+  const errorFill = colors.backgroundError ?? idleFill;
+  const animatedBackgroundColor = disabled ? colors.backgroundDisabled : error ? errorAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: [idleFill, errorFill]
+  }) : focusAnim.interpolate({
+    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,
+    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 = {
+    disabled,
+    ...accessibilityState
+  };
+  const innerContent = /*#__PURE__*/_jsxs(_Fragment, {
+    children: [leading != null ? /*#__PURE__*/_jsx(View, {
+      style: styles.slot,
+      children: leading
+    }) : null, /*#__PURE__*/_jsx(View, {
+      style: styles.content,
+      children: children
+    }), trailing != null ? /*#__PURE__*/_jsx(View, {
+      style: styles.slot,
+      children: trailing
+    }) : null]
+  });
+  if (onPress) {
+    return /*#__PURE__*/_jsx(Pressable, {
+      onPress: onPress,
+      disabled: disabled,
+      android_ripple: {
+        color: theme.colors.surface.pressed,
+        borderless: false
+      },
+      accessibilityRole: accessibilityRole ?? 'button',
+      accessibilityLabel: accessibilityLabel,
+      accessibilityHint: accessibilityHint,
+      accessibilityState: a11yState,
+      testID: testID,
+      children: ({
+        pressed
+      }) => /*#__PURE__*/_jsx(Animated.View, {
+        style: [styles.box, boxStyle, pressed && !disabled ? {
+          backgroundColor: theme.colors.surface.pressed
+        } : null, style],
+        children: innerContent
+      })
+    });
+  }
+  return /*#__PURE__*/_jsx(Animated.View, {
+    style: [styles.box, boxStyle, style],
+    accessibilityRole: accessibilityRole,
+    accessibilityLabel: accessibilityLabel,
+    accessibilityHint: accessibilityHint,
+    accessibilityState: a11yState,
+    testID: testID,
+    children: innerContent
+  });
+};
+FieldBase.displayName = 'FieldBase';
+const buildStyles = () => StyleSheet.create({
+  box: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    overflow: 'visible'
+  },
+  slot: {
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  content: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center'
+  }
+});
+export default FieldBase;
+//# sourceMappingURL=FieldBase.js.map

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

@@ -0,0 +1,4 @@
+"use strict";
+
+export { default, FieldBase, RequiredMark, resolveFieldSize, resolveFieldTextStyle } from "./FieldBase.js";
+//# sourceMappingURL=index.js.map