@oxyhq/services 6.9.13 → 6.9.15

package/src/ui/components/TextField/Adornment/utils.js

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getTextColor = getTextColor;
+exports.getIconColor = getIconColor;
+// Simple hex to rgba conversion
+const hexToRgba = (hex, alpha) => {
+    // Handle rgba strings
+    if (hex.startsWith('rgba')) {
+        return hex;
+    }
+    // Handle rgb strings
+    if (hex.startsWith('rgb')) {
+        const match = hex.match(/\d+/g);
+        if (match && match.length >= 3) {
+            return `rgba(${match[0]}, ${match[1]}, ${match[2]}, ${alpha})`;
+        }
+    }
+    // Handle hex strings
+    const r = Number.parseInt(hex.slice(1, 3), 16);
+    const g = Number.parseInt(hex.slice(3, 5), 16);
+    const b = Number.parseInt(hex.slice(5, 7), 16);
+    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+};
+function getTextColor({ theme, disabled }) {
+    if (theme.isV3) {
+        if (disabled) {
+            return theme.colors.onSurfaceDisabled;
+        }
+        return theme.colors.onSurfaceVariant;
+    }
+    // For non-V3 themes, apply opacity to text color
+    const textColor = theme?.colors?.onSurface || theme?.colors?.text || '#000000';
+    const opacity = theme.dark ? 0.7 : 0.54;
+    return hexToRgba(textColor, opacity);
+}
+function getIconColor({ theme, isTextInputFocused, disabled, customColor, }) {
+    if (typeof customColor === 'function') {
+        return customColor(isTextInputFocused);
+    }
+    if (customColor) {
+        return customColor;
+    }
+    if (!theme.isV3) {
+        return theme.colors.text || theme.colors.onSurface;
+    }
+    if (disabled) {
+        return theme.colors.onSurfaceDisabled;
+    }
+    return theme.colors.onSurfaceVariant;
+}

package/src/ui/components/TextField/Label/InputLabel.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { InputLabelProps } from '../types';
+declare const _default: React.MemoExoticComponent<(props: InputLabelProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

package/src/ui/components/TextField/Label/InputLabel.js

@@ -0,0 +1,125 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+const AnimatedText_1 = __importDefault(require("../../Typography/AnimatedText"));
+const helpers_1 = require("../helpers");
+const InputLabel = (props) => {
+    const { labeled, wiggle, error, focused, opacity, labelLayoutWidth, labelLayoutHeight, labelBackground, label, labelError, onLayoutAnimatedText, onLabelTextLayout, hasActiveOutline, activeColor, placeholderStyle, baseLabelTranslateX, baseLabelTranslateY, font, fontSize, lineHeight, fontWeight, placeholderOpacity, wiggleOffsetX, labelScale, topPosition, paddingLeft, paddingRight, backgroundColor, roundness, placeholderColor, errorColor, labelTranslationXOffset, maxFontSizeMultiplier, testID, isV3, inputContainerLayout, scaledLabel, } = props;
+    const { INPUT_PADDING_HORIZONTAL } = (0, helpers_1.getConstants)(isV3);
+    const { width } = (0, react_native_1.useWindowDimensions)();
+    const isWeb = react_native_1.Platform.OS === 'web';
+    const paddingOffset = paddingLeft && paddingRight ? { paddingLeft, paddingRight } : {};
+    const labelTranslationX = {
+        transform: [
+            {
+                // Offset label scale since RN doesn't support transform origin
+                translateX: labeled.interpolate({
+                    inputRange: [0, 1],
+                    outputRange: [baseLabelTranslateX, labelTranslationXOffset || 0],
+                }),
+            },
+        ],
+    };
+    const labelStyle = {
+        ...font,
+        fontSize,
+        lineHeight,
+        fontWeight,
+        opacity: labeled.interpolate({
+            inputRange: [0, 1],
+            outputRange: [hasActiveOutline ? 1 : 0, 0],
+        }),
+        transform: [
+            {
+                // Wiggle the label when there's an error
+                translateX: wiggle
+                    ? error.interpolate({
+                        inputRange: [0, 0.5, 1],
+                        outputRange: [0, wiggleOffsetX, 0],
+                    })
+                    : 0,
+            },
+            {
+                // Move label to top
+                translateY: baseLabelTranslateY !== 0
+                    ? labeled.interpolate({
+                        inputRange: [0, 1],
+                        outputRange: [baseLabelTranslateY, 0],
+                    })
+                    : 0,
+            },
+            {
+                // Make label smaller
+                scale: labelScale !== 0
+                    ? labeled.interpolate({
+                        inputRange: [0, 1],
+                        outputRange: [labelScale, 1],
+                    })
+                    : labeled,
+            },
+        ],
+    };
+    const labelWidth = (inputContainerLayout.width + INPUT_PADDING_HORIZONTAL / 2) /
+        (scaledLabel ? labelScale : 1);
+    const commonStyles = [
+        placeholderStyle,
+        {
+            top: topPosition,
+        },
+        {
+            maxWidth: labelWidth,
+        },
+        labelStyle,
+        paddingOffset || {},
+    ];
+    const textColor = (labelError && errorColor ? errorColor : placeholderColor);
+    return (
+    // Position colored placeholder and gray placeholder on top of each other and crossfade them
+    // This gives the effect of animating the color, but allows us to use native driver
+    (0, jsx_runtime_1.jsx)(react_native_1.View, { pointerEvents: "none", style: [react_native_1.StyleSheet.absoluteFill, styles.overflow, styles.labelContainer], children: (0, jsx_runtime_1.jsx)(react_native_1.Animated.View, { pointerEvents: "none", style: [
+                react_native_1.StyleSheet.absoluteFill,
+                !isWeb && { width },
+                { opacity },
+                labelTranslationX,
+            ], children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: {
+                    width: labelWidth,
+                }, children: [labelBackground?.({
+                        labeled,
+                        labelLayoutWidth,
+                        labelLayoutHeight,
+                        labelStyle,
+                        placeholderStyle,
+                        baseLabelTranslateX,
+                        topPosition,
+                        label,
+                        backgroundColor,
+                        roundness,
+                        maxFontSizeMultiplier: maxFontSizeMultiplier,
+                        testID,
+                    }), (0, jsx_runtime_1.jsx)(AnimatedText_1.default, { variant: "bodySmall", onLayout: onLayoutAnimatedText, onTextLayout: onLabelTextLayout, style: [
+                            commonStyles,
+                            {
+                                color: activeColor,
+                            },
+                        ], numberOfLines: 1, maxFontSizeMultiplier: maxFontSizeMultiplier, testID: `${testID}-label-active`, children: label }), (0, jsx_runtime_1.jsx)(AnimatedText_1.default, { variant: focused ? 'bodyLarge' : 'bodySmall', style: [
+                            commonStyles,
+                            {
+                                color: textColor,
+                                opacity: placeholderOpacity,
+                            },
+                        ], numberOfLines: 1, maxFontSizeMultiplier: maxFontSizeMultiplier, testID: `${testID}-label-inactive`, children: label })] }) }) }));
+};
+const styles = react_native_1.StyleSheet.create({
+    overflow: {
+        overflow: 'hidden',
+    },
+    labelContainer: {
+        zIndex: 3,
+    },
+});
+exports.default = react_1.default.memo(InputLabel);

package/src/ui/components/TextField/Label/LabelBackground.d.ts

@@ -0,0 +1,3 @@
+import type { LabelBackgroundProps } from '../types';
+declare const LabelBackground: ({ labeled, labelLayoutWidth, labelLayoutHeight, placeholderStyle, baseLabelTranslateX, topPosition, backgroundColor, roundness, labelStyle, maxFontSizeMultiplier, testID, }: LabelBackgroundProps) => (import("react/jsx-runtime").JSX.Element | null)[];
+export default LabelBackground;

package/src/ui/components/TextField/Label/LabelBackground.js

@@ -0,0 +1,71 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_native_1 = require("react-native");
+const AnimatedText_1 = __importDefault(require("../../Typography/AnimatedText"));
+const LabelBackground = ({ labeled, labelLayoutWidth, labelLayoutHeight, placeholderStyle, baseLabelTranslateX, topPosition, backgroundColor, roundness, labelStyle, maxFontSizeMultiplier, testID, }) => {
+    const opacity = labeled.interpolate({
+        inputRange: [0, 0.6],
+        outputRange: [1, 0],
+    });
+    const labelTranslationX = {
+        translateX: labeled.interpolate({
+            inputRange: [0, 1],
+            outputRange: [-baseLabelTranslateX, 0],
+        }),
+    };
+    const labelTextScaleY = {
+        scaleY: labeled.interpolate({
+            inputRange: [0, 1],
+            outputRange: [0.2, 1],
+        }),
+    };
+    const labelTextTransform = [...labelStyle.transform, labelTextScaleY];
+    const isRounded = roundness > 6;
+    const roundedEdgeCover = isRounded ? ((0, jsx_runtime_1.jsx)(react_native_1.Animated.View, { pointerEvents: "none", style: [
+            react_native_1.StyleSheet.absoluteFill,
+            styles.view,
+            {
+                backgroundColor,
+                maxHeight: Math.max(roundness / 3, 2),
+                bottom: Math.max(roundness, 2),
+                transform: [labelTranslationX],
+                opacity,
+            },
+        ] }, "labelBackground-view")) : null;
+    return [
+        roundedEdgeCover,
+        (0, jsx_runtime_1.jsx)(AnimatedText_1.default, { testID: `${testID}-label-background`, style: [
+                placeholderStyle,
+                labelStyle,
+                styles.outlinedLabel,
+                {
+                    top: topPosition + 1,
+                    width: labelLayoutWidth - placeholderStyle.paddingHorizontal,
+                    height: labelLayoutHeight,
+                    backgroundColor,
+                    opacity,
+                    transform: labelTextTransform,
+                },
+            ], numberOfLines: 1, maxFontSizeMultiplier: maxFontSizeMultiplier }, "labelBackground-text"),
+    ];
+};
+exports.default = LabelBackground;
+const styles = react_native_1.StyleSheet.create({
+    view: {
+        position: 'absolute',
+        top: 6,
+        left: 10,
+        width: 12,
+    },
+    // eslint-disable-next-line react-native/no-color-literals
+    outlinedLabel: {
+        position: 'absolute',
+        left: 8,
+        paddingHorizontal: 0,
+        color: 'transparent',
+    },
+});

package/src/ui/components/TextField/TextFieldFlat.d.ts

@@ -0,0 +1,3 @@
+import type { ChildTextInputProps } from './types';
+declare const TextInputFlat: ({ disabled, editable, label, error, selectionColor: customSelectionColor, cursorColor, underlineColor, underlineStyle, activeUnderlineColor, textColor, dense, style, theme, render, multiline, parentState, innerRef, onFocus, forceFocus, onBlur, onChangeText, onLayoutAnimatedText, onLabelTextLayout, onLeftAffixLayoutChange, onRightAffixLayoutChange, onInputLayout, left, right, placeholderTextColor, testID, contentStyle, scaledLabel, ...rest }: ChildTextInputProps) => import("react/jsx-runtime").JSX.Element;
+export default TextInputFlat;

package/src/ui/components/TextField/TextFieldFlat.js

@@ -0,0 +1,347 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const useThemeColors_1 = require("../../hooks/useThemeColors");
+const Underline_1 = require("./Addons/Underline");
+const enums_1 = require("./Adornment/enums");
+const TextFieldAdornment_1 = __importDefault(require("./Adornment/TextFieldAdornment"));
+const TextFieldAdornment_2 = require("./Adornment/TextFieldAdornment");
+const constants_1 = require("./constants");
+const helpers_1 = require("./helpers");
+const InputLabel_1 = __importDefault(require("./Label/InputLabel"));
+const TextInputFlat = ({ disabled = false, editable = true, label, error = false, selectionColor: customSelectionColor, cursorColor, underlineColor, underlineStyle, activeUnderlineColor, textColor, dense, style, theme, render = (props) => (0, jsx_runtime_1.jsx)(react_native_1.TextInput, { ...props }), multiline = false, parentState, innerRef, onFocus, forceFocus, onBlur, onChangeText, onLayoutAnimatedText, onLabelTextLayout, onLeftAffixLayoutChange, onRightAffixLayoutChange, onInputLayout, left, right, placeholderTextColor, testID = 'text-input-flat', contentStyle, scaledLabel, ...rest }) => {
+    const isAndroid = react_native_1.Platform.OS === 'android';
+    const { isV3, roundness } = theme;
+    const font = isV3 ? theme.fonts.bodyLarge : theme.fonts.default;
+    const hasActiveOutline = parentState.focused || error;
+    const { LABEL_PADDING_TOP, FLAT_INPUT_OFFSET, MIN_HEIGHT, MIN_WIDTH } = (0, helpers_1.getConstants)(isV3);
+    const { fontSize: fontSizeStyle, lineHeight: lineHeightStyle, fontWeight, height, paddingHorizontal, textAlign, ...viewStyle } = (react_native_1.StyleSheet.flatten(style) || {});
+    const fontSize = fontSizeStyle || constants_1.MAXIMIZED_LABEL_FONT_SIZE;
+    // Always set a minimum lineHeight to prevent text cutoff
+    // Use at least 1.4x fontSize for better text spacing
+    const lineHeight = lineHeightStyle || fontSize * 1.4;
+    const isPaddingHorizontalPassed = paddingHorizontal !== undefined && typeof paddingHorizontal === 'number';
+    const adornmentConfig = (0, TextFieldAdornment_2.getAdornmentConfig)({
+        left,
+        right,
+    });
+    let { paddingLeft, paddingRight } = (0, helpers_1.calculateFlatInputHorizontalPadding)({
+        adornmentConfig,
+        isV3,
+    });
+    if (isPaddingHorizontalPassed) {
+        paddingLeft = paddingHorizontal;
+        paddingRight = paddingHorizontal;
+    }
+    const { leftLayout, rightLayout } = parentState;
+    const rightAffixWidth = right
+        ? rightLayout.width || constants_1.ADORNMENT_SIZE
+        : constants_1.ADORNMENT_SIZE;
+    const leftAffixWidth = left
+        ? leftLayout.width || constants_1.ADORNMENT_SIZE
+        : constants_1.ADORNMENT_SIZE;
+    const adornmentStyleAdjustmentForNativeInput = (0, TextFieldAdornment_2.getAdornmentStyleAdjustmentForNativeInput)({
+        adornmentConfig,
+        rightAffixWidth,
+        leftAffixWidth,
+        paddingHorizontal,
+        inputOffset: FLAT_INPUT_OFFSET,
+        mode: enums_1.InputMode.Flat,
+        isV3,
+    });
+    const { inputTextColor, activeColor, underlineColorCustom, placeholderColor, errorColor, backgroundColor, selectionColor, } = (0, helpers_1.getFlatInputColors)({
+        underlineColor,
+        activeUnderlineColor,
+        customSelectionColor,
+        textColor,
+        disabled,
+        error,
+        theme,
+    });
+    const themeColors = (0, useThemeColors_1.useThemeColors)();
+    const containerStyle = {
+        backgroundColor: themeColors.inputBackground,
+        borderTopLeftRadius: theme.roundness,
+        borderTopRightRadius: theme.roundness,
+    };
+    // Override text color with theme color (unless custom textColor prop is provided)
+    // If disabled, keep the original inputTextColor which handles opacity correctly
+    const finalInputTextColor = textColor ?? (disabled ? inputTextColor : themeColors.text);
+    const labelScale = constants_1.MINIMIZED_LABEL_FONT_SIZE / fontSize;
+    const fontScale = constants_1.MAXIMIZED_LABEL_FONT_SIZE / fontSize;
+    const labelWidth = parentState.labelLayout.width;
+    const labelHeight = parentState.labelLayout.height;
+    const labelHalfWidth = labelWidth / 2;
+    const labelHalfHeight = labelHeight / 2;
+    const baseLabelTranslateX = (react_native_1.I18nManager.getConstants().isRTL ? 1 : -1) *
+        (labelHalfWidth - (labelScale * labelWidth) / 2) +
+        (1 - labelScale) *
+            (react_native_1.I18nManager.getConstants().isRTL ? -1 : 1) *
+            paddingLeft;
+    const minInputHeight = dense
+        ? (label ? constants_1.MIN_DENSE_HEIGHT_WL : constants_1.MIN_DENSE_HEIGHT) - constants_1.LABEL_PADDING_TOP_DENSE
+        : MIN_HEIGHT - LABEL_PADDING_TOP;
+    const inputHeight = (0, helpers_1.calculateInputHeight)(labelHeight, height, minInputHeight);
+    const topPosition = (0, helpers_1.calculateLabelTopPosition)(labelHeight, inputHeight, multiline && height ? 0 : !height ? minInputHeight / 2 : 0);
+    if (height && typeof height !== 'number') {
+        // eslint-disable-next-line
+        console.warn('Currently we support only numbers in height prop');
+    }
+    const paddingSettings = {
+        height: height ? +height : null,
+        labelHalfHeight,
+        offset: FLAT_INPUT_OFFSET,
+        multiline: multiline ? multiline : null,
+        dense: dense ? dense : null,
+        topPosition,
+        fontSize,
+        lineHeight,
+        label,
+        scale: fontScale,
+        isAndroid,
+        styles: react_native_1.StyleSheet.flatten(dense ? styles.inputFlatDense : styles.inputFlat),
+    };
+    const pad = (0, helpers_1.calculatePadding)(paddingSettings);
+    const paddingFlat = (0, helpers_1.adjustPaddingFlat)({
+        ...paddingSettings,
+        pad,
+    });
+    const baseLabelTranslateY = -labelHalfHeight - (topPosition + constants_1.MINIMIZED_LABEL_Y_OFFSET);
+    const { current: placeholderOpacityAnims } = React.useRef([
+        new react_native_1.Animated.Value(0),
+        new react_native_1.Animated.Value(1),
+    ]);
+    const placeholderOpacity = hasActiveOutline
+        ? parentState.labeled
+        : placeholderOpacityAnims[parentState.labelLayout.measured ? 1 : 0];
+    // We don't want to show placeholder if label is displayed, because they overlap.
+    // Before it was done by setting placeholder's value to " ", but inputs have the same props
+    // what causes broken styles due to: https://github.com/facebook/react-native/issues/48249
+    const placeholderTextColorBasedOnState = parentState.displayPlaceholder
+        ? placeholderTextColor ?? placeholderColor
+        : 'transparent';
+    const minHeight = height ||
+        (dense ? (label ? constants_1.MIN_DENSE_HEIGHT_WL : constants_1.MIN_DENSE_HEIGHT) : MIN_HEIGHT);
+    const flatHeight = inputHeight +
+        (!height ? (dense ? constants_1.LABEL_PADDING_TOP_DENSE : LABEL_PADDING_TOP) : 0);
+    const iconTopPosition = (flatHeight - constants_1.ADORNMENT_SIZE) / 2;
+    const leftAffixTopPosition = leftLayout.height
+        ? (0, helpers_1.calculateFlatAffixTopPosition)({
+            height: flatHeight,
+            ...paddingFlat,
+            affixHeight: leftLayout.height,
+        })
+        : null;
+    const rightAffixTopPosition = rightLayout.height
+        ? (0, helpers_1.calculateFlatAffixTopPosition)({
+            height: flatHeight,
+            ...paddingFlat,
+            affixHeight: rightLayout.height,
+        })
+        : null;
+    const labelProps = {
+        label,
+        onLayoutAnimatedText,
+        onLabelTextLayout,
+        placeholderOpacity,
+        labelError: error,
+        placeholderStyle: styles.placeholder,
+        baseLabelTranslateY,
+        baseLabelTranslateX,
+        font,
+        fontSize,
+        lineHeight,
+        fontWeight,
+        labelScale,
+        wiggleOffsetX: constants_1.LABEL_WIGGLE_X_OFFSET,
+        topPosition,
+        paddingLeft: isAndroid
+            ? react_native_1.I18nManager.isRTL
+                ? paddingRight
+                : paddingLeft
+            : paddingLeft,
+        paddingRight: isAndroid
+            ? react_native_1.I18nManager.isRTL
+                ? paddingLeft
+                : paddingRight
+            : paddingRight,
+        hasActiveOutline,
+        activeColor,
+        placeholderColor,
+        errorColor,
+        roundness,
+        maxFontSizeMultiplier: rest.maxFontSizeMultiplier,
+        testID,
+        contentStyle,
+        inputContainerLayout: parentState.inputContainerLayout,
+        labelTextLayout: parentState.labelTextLayout,
+        opacity: parentState.value || parentState.focused
+            ? parentState.labelLayout.measured
+                ? 1
+                : 0
+            : 1,
+        isV3,
+    };
+    const affixTopPosition = {
+        [enums_1.AdornmentSide.Left]: leftAffixTopPosition,
+        [enums_1.AdornmentSide.Right]: rightAffixTopPosition,
+    };
+    const onAffixChange = {
+        [enums_1.AdornmentSide.Left]: onLeftAffixLayoutChange,
+        [enums_1.AdornmentSide.Right]: onRightAffixLayoutChange,
+    };
+    let adornmentProps = {
+        paddingHorizontal,
+        adornmentConfig,
+        forceFocus,
+        topPosition: {
+            [enums_1.AdornmentType.Affix]: affixTopPosition,
+            [enums_1.AdornmentType.Icon]: iconTopPosition,
+        },
+        onAffixChange,
+        isTextInputFocused: parentState.focused,
+        maxFontSizeMultiplier: rest.maxFontSizeMultiplier,
+        disabled,
+    };
+    if (adornmentConfig.length) {
+        adornmentProps = {
+            ...adornmentProps,
+            left,
+            right,
+            textStyle: { ...font, fontSize, lineHeight, fontWeight },
+            visible: parentState.labeled,
+        };
+    }
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [containerStyle, viewStyle], children: [(0, jsx_runtime_1.jsx)(Underline_1.Underline, { style: underlineStyle, hasActiveOutline: hasActiveOutline, parentState: parentState, underlineColorCustom: underlineColorCustom, error: error, colors: { error: errorColor }, activeColor: activeColor, theme: theme }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { onLayout: onInputLayout, style: [
+                    styles.labelContainer,
+                    {
+                        minHeight,
+                        flex: 1,
+                        flexShrink: 1,
+                    },
+                ], children: [!isAndroid && multiline && !!label && !disabled && (
+                    // Workaround for: https://github.com/callstack/react-native-paper/issues/2799
+                    // Patch for a multiline TextInput with fixed height, which allow to avoid covering input label with its value.
+                    (0, jsx_runtime_1.jsx)(react_native_1.View, { testID: "patch-container", pointerEvents: "none", style: [
+                            react_native_1.StyleSheet.absoluteFill,
+                            dense ? styles.densePatchContainer : styles.patchContainer,
+                            {
+                                backgroundColor: viewStyle.backgroundColor || containerStyle.backgroundColor,
+                                left: paddingLeft,
+                                right: paddingRight,
+                            },
+                        ] })), label ? ((0, jsx_runtime_1.jsx)(InputLabel_1.default, { labeled: parentState.labeled, error: parentState.error, focused: parentState.focused, scaledLabel: scaledLabel, wiggle: Boolean(parentState.value && labelProps.labelError), labelLayoutMeasured: parentState.labelLayout.measured, labelLayoutWidth: parentState.labelLayout.width, labelLayoutHeight: parentState.labelLayout.height, ...labelProps })) : null, render?.({
+                        ...rest,
+                        ref: innerRef,
+                        onChangeText,
+                        placeholder: rest.placeholder,
+                        editable: !disabled && editable,
+                        selectionColor,
+                        cursorColor: typeof cursorColor === 'undefined' ? activeColor : cursorColor,
+                        placeholderTextColor: placeholderTextColorBasedOnState,
+                        onFocus,
+                        onBlur,
+                        underlineColorAndroid: 'transparent',
+                        multiline,
+                        style: [
+                            styles.input,
+                            multiline && height ? { height: flatHeight } : {},
+                            paddingFlat,
+                            {
+                                paddingLeft,
+                                paddingRight,
+                                ...font,
+                                fontSize,
+                                lineHeight,
+                                fontWeight,
+                                color: finalInputTextColor,
+                                textAlignVertical: multiline ? 'top' : 'center',
+                                textAlign: textAlign
+                                    ? textAlign
+                                    : react_native_1.I18nManager.getConstants().isRTL
+                                        ? 'right'
+                                        : 'left',
+                                flex: 1,
+                                flexShrink: 1,
+                                minWidth: 0,
+                            },
+                            react_native_1.Platform.OS === 'web' ? { outline: 'none', outlineWidth: 0, outlineStyle: 'none' } : undefined,
+                            adornmentStyleAdjustmentForNativeInput,
+                            contentStyle,
+                        ],
+                        testID,
+                    })] }), (0, jsx_runtime_1.jsx)(TextFieldAdornment_1.default, { ...adornmentProps })] }));
+};
+exports.default = TextInputFlat;
+const styles = react_native_1.StyleSheet.create({
+    placeholder: {
+        position: 'absolute',
+        left: 0,
+    },
+    labelContainer: {
+        paddingTop: 0,
+        paddingBottom: 0,
+        flexGrow: 1,
+        overflow: 'visible',
+    },
+    input: {
+        margin: 0,
+        flexGrow: 1,
+        flexShrink: 1,
+        minWidth: 0,
+    },
+    inputFlat: {
+        paddingTop: 24,
+        paddingBottom: 12,
+    },
+    inputFlatDense: {
+        paddingTop: 22,
+        paddingBottom: 10,
+    },
+    patchContainer: {
+        height: 24,
+        zIndex: 2,
+    },
+    densePatchContainer: {
+        height: 22,
+        zIndex: 2,
+    },
+});

package/src/ui/components/TextField/TextFieldOutlined.d.ts

@@ -0,0 +1,3 @@
+import type { ChildTextInputProps } from './types';
+declare const TextInputOutlined: ({ disabled, editable, label, error, selectionColor: customSelectionColor, cursorColor, underlineColor: _underlineColor, outlineColor: customOutlineColor, activeOutlineColor, outlineStyle, textColor, dense, style, theme, render, multiline, parentState, innerRef, onFocus, forceFocus, onBlur, onChangeText, onLayoutAnimatedText, onLabelTextLayout, onLeftAffixLayoutChange, onRightAffixLayoutChange, onInputLayout, onLayout, left, right, placeholderTextColor, testID, contentStyle, scaledLabel, ...rest }: ChildTextInputProps) => import("react/jsx-runtime").JSX.Element;
+export default TextInputOutlined;