@oxyhq/services 6.9.13 → 6.9.15

package/src/ui/components/TextField/Addons/Outline.d.ts

@@ -0,0 +1,15 @@
+import { type ColorValue, type StyleProp, type ViewStyle } from 'react-native';
+import type { TextInputLabelProp } from '../types';
+type OutlineProps = {
+    isV3: boolean;
+    activeColor: string;
+    backgroundColor: ColorValue;
+    hasActiveOutline?: boolean;
+    focused?: boolean;
+    outlineColor?: string;
+    roundness?: number;
+    label?: TextInputLabelProp;
+    style?: StyleProp<ViewStyle>;
+};
+export declare const Outline: ({ isV3, label, activeColor, backgroundColor, hasActiveOutline, focused, outlineColor, roundness, style, }: OutlineProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/src/ui/components/TextField/Addons/Outline.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Outline = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_native_1 = require("react-native");
+const Outline = ({ isV3, label, activeColor, backgroundColor, hasActiveOutline, focused, outlineColor, roundness, style, }) => ((0, jsx_runtime_1.jsx)(react_native_1.View, { testID: "text-input-outline", pointerEvents: "none", style: [
+        styles.outline,
+        !label && styles.noLabelOutline,
+        // eslint-disable-next-line react-native/no-inline-styles
+        {
+            backgroundColor,
+            borderRadius: roundness,
+            borderWidth: (isV3 ? hasActiveOutline : focused) ? 2 : 1,
+            borderColor: hasActiveOutline ? activeColor : outlineColor,
+        },
+        style,
+    ] }));
+exports.Outline = Outline;
+const styles = react_native_1.StyleSheet.create({
+    outline: {
+        position: 'absolute',
+        left: 0,
+        right: 0,
+        top: 6,
+        bottom: 0,
+    },
+    noLabelOutline: {
+        top: 0,
+    },
+});

package/src/ui/components/TextField/Addons/Underline.d.ts

@@ -0,0 +1,18 @@
+import { type StyleProp, type ViewStyle } from 'react-native';
+import type { ThemeProp } from '../../types';
+type UnderlineProps = {
+    parentState: {
+        focused: boolean;
+    };
+    error?: boolean;
+    colors?: {
+        error?: string;
+    };
+    activeColor: string;
+    underlineColorCustom?: string;
+    hasActiveOutline?: boolean;
+    style?: StyleProp<ViewStyle>;
+    theme?: ThemeProp;
+};
+export declare const Underline: ({ parentState, error, colors, activeColor, underlineColorCustom, hasActiveOutline, style, theme: themeOverrides, }: UnderlineProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/src/ui/components/TextField/Addons/Underline.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Underline = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_native_1 = require("react-native");
+const theming_1 = require("../../theming");
+const Underline = ({ parentState, error, colors, activeColor, underlineColorCustom, hasActiveOutline, style, theme: themeOverrides, }) => {
+    const { isV3 } = (0, theming_1.useInternalTheme)(themeOverrides);
+    let backgroundColor = parentState.focused
+        ? activeColor
+        : underlineColorCustom;
+    if (error)
+        backgroundColor = colors?.error;
+    const activeScale = isV3 ? 2 : 1;
+    return ((0, jsx_runtime_1.jsx)(react_native_1.Animated.View, { testID: "text-input-underline", style: [
+            styles.underline,
+            isV3 && styles.md3Underline,
+            {
+                backgroundColor,
+                // Underlines is thinner when input is not focused
+                transform: [
+                    {
+                        scaleY: (isV3 ? hasActiveOutline : parentState.focused)
+                            ? activeScale
+                            : 0.5,
+                    },
+                ],
+            },
+            style,
+        ] }));
+};
+exports.Underline = Underline;
+const styles = react_native_1.StyleSheet.create({
+    underline: {
+        position: 'absolute',
+        left: 0,
+        right: 0,
+        bottom: 0,
+        height: 2,
+        zIndex: 1,
+    },
+    md3Underline: {
+        height: 1,
+    },
+});

package/src/ui/components/TextField/Adornment/TextFieldAdornment.d.ts

@@ -0,0 +1,44 @@
+import React from 'react';
+import type { LayoutChangeEvent, TextStyle, StyleProp, Animated, DimensionValue } from 'react-native';
+import type { ThemeProp } from '../../types';
+import { AdornmentSide, AdornmentType } from './enums';
+import type { AdornmentConfig, AdornmentStyleAdjustmentForNativeInput } from './types';
+export declare function getAdornmentConfig({ left, right, }: {
+    left?: React.ReactNode;
+    right?: React.ReactNode;
+}): Array<AdornmentConfig>;
+export declare function getAdornmentStyleAdjustmentForNativeInput({ adornmentConfig, leftAffixWidth, rightAffixWidth, paddingHorizontal, inputOffset, mode, isV3, }: {
+    inputOffset?: number;
+    adornmentConfig: AdornmentConfig[];
+    leftAffixWidth: number;
+    rightAffixWidth: number;
+    mode?: 'outlined' | 'flat';
+    paddingHorizontal?: DimensionValue;
+    isV3?: boolean;
+}): AdornmentStyleAdjustmentForNativeInput | {};
+export interface TextFieldAdornmentProps {
+    forceFocus: () => void;
+    adornmentConfig: AdornmentConfig[];
+    topPosition: {
+        [AdornmentType.Affix]: {
+            [AdornmentSide.Left]: number | null;
+            [AdornmentSide.Right]: number | null;
+        };
+        [AdornmentType.Icon]: number;
+    };
+    onAffixChange: {
+        [AdornmentSide.Left]: (event: LayoutChangeEvent) => void;
+        [AdornmentSide.Right]: (event: LayoutChangeEvent) => void;
+    };
+    left?: React.ReactNode;
+    right?: React.ReactNode;
+    textStyle?: StyleProp<TextStyle>;
+    visible?: Animated.Value;
+    isTextInputFocused: boolean;
+    paddingHorizontal?: DimensionValue;
+    maxFontSizeMultiplier?: number | undefined | null;
+    theme?: ThemeProp;
+    disabled?: boolean;
+}
+declare const TextFieldAdornment: React.FunctionComponent<TextFieldAdornmentProps>;
+export default TextFieldAdornment;

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

@@ -0,0 +1,132 @@
+"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 });
+exports.getAdornmentConfig = getAdornmentConfig;
+exports.getAdornmentStyleAdjustmentForNativeInput = getAdornmentStyleAdjustmentForNativeInput;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = __importDefault(require("react"));
+const enums_1 = require("./enums");
+const TextFieldAffix_1 = __importStar(require("./TextFieldAffix"));
+const TextFieldIcon_1 = __importStar(require("./TextFieldIcon"));
+const helpers_1 = require("../helpers");
+function getAdornmentConfig({ left, right, }) {
+    const adornmentConfig = [];
+    if (left || right) {
+        [
+            { side: enums_1.AdornmentSide.Left, adornment: left },
+            { side: enums_1.AdornmentSide.Right, adornment: right },
+        ].forEach(({ side, adornment }) => {
+            if (adornment && react_2.default.isValidElement(adornment)) {
+                let type;
+                if (adornment.type === TextFieldAffix_1.default) {
+                    type = enums_1.AdornmentType.Affix;
+                }
+                else if (adornment.type === TextFieldIcon_1.default) {
+                    type = enums_1.AdornmentType.Icon;
+                }
+                adornmentConfig.push({
+                    side,
+                    type,
+                });
+            }
+        });
+    }
+    return adornmentConfig;
+}
+function getAdornmentStyleAdjustmentForNativeInput({ adornmentConfig, leftAffixWidth, rightAffixWidth, paddingHorizontal, inputOffset = 0, mode, isV3, }) {
+    const { OUTLINED_INPUT_OFFSET, ADORNMENT_OFFSET } = (0, helpers_1.getConstants)(isV3);
+    if (adornmentConfig.length) {
+        const adornmentStyleAdjustmentForNativeInput = adornmentConfig.map(({ type, side }) => {
+            const isLeftSide = side === enums_1.AdornmentSide.Left;
+            const inputModeAdornemntOffset = mode === enums_1.InputMode.Outlined
+                ? ADORNMENT_OFFSET + OUTLINED_INPUT_OFFSET
+                : ADORNMENT_OFFSET;
+            const paddingKey = `padding${captalize(side)}`;
+            const affixWidth = isLeftSide ? leftAffixWidth : rightAffixWidth;
+            const padding = typeof paddingHorizontal === 'number'
+                ? paddingHorizontal
+                : inputModeAdornemntOffset;
+            const offset = affixWidth + padding;
+            const isAffix = type === enums_1.AdornmentType.Affix;
+            const marginKey = `margin${captalize(side)}`;
+            return {
+                [marginKey]: isAffix ? 0 : offset,
+                [paddingKey]: isAffix ? offset : inputOffset,
+            };
+        });
+        const allStyleAdjustmentsMerged = adornmentStyleAdjustmentForNativeInput.reduce((mergedStyles, currentStyle) => {
+            return {
+                ...mergedStyles,
+                ...currentStyle,
+            };
+        }, {});
+        return allStyleAdjustmentsMerged;
+    }
+    return [{}];
+}
+const captalize = (text) => text.charAt(0).toUpperCase() + text.slice(1);
+const TextFieldAdornment = ({ adornmentConfig, left, right, onAffixChange, textStyle, visible, topPosition, isTextInputFocused, forceFocus, paddingHorizontal, maxFontSizeMultiplier, theme, disabled, }) => {
+    if (adornmentConfig.length) {
+        return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: adornmentConfig.map(({ type, side }) => {
+                let inputAdornmentComponent;
+                if (side === enums_1.AdornmentSide.Left) {
+                    inputAdornmentComponent = left;
+                }
+                else if (side === enums_1.AdornmentSide.Right) {
+                    inputAdornmentComponent = right;
+                }
+                const commonProps = {
+                    side: side,
+                    testID: `${side}-${type}-adornment`,
+                    isTextInputFocused,
+                    paddingHorizontal,
+                    disabled,
+                };
+                if (type === enums_1.AdornmentType.Icon) {
+                    return ((0, react_1.createElement)(TextFieldIcon_1.IconAdornment, { ...commonProps, theme: theme, key: side, icon: inputAdornmentComponent, topPosition: topPosition[enums_1.AdornmentType.Icon], forceFocus: forceFocus }));
+                }
+                if (type === enums_1.AdornmentType.Affix) {
+                    return ((0, react_1.createElement)(TextFieldAffix_1.AffixAdornment, { ...commonProps, key: side, topPosition: topPosition[enums_1.AdornmentType.Affix][side], affix: inputAdornmentComponent, textStyle: textStyle, onLayout: onAffixChange[side], visible: visible, maxFontSizeMultiplier: maxFontSizeMultiplier }));
+                }
+                return null;
+            }) }));
+    }
+    return null;
+};
+exports.default = TextFieldAdornment;

package/src/ui/components/TextField/Adornment/TextFieldAffix.d.ts

@@ -0,0 +1,72 @@
+import React from 'react';
+import { Animated, type DimensionValue, type GestureResponderEvent, type LayoutChangeEvent, type StyleProp, type TextStyle } from 'react-native';
+import { AdornmentSide } from './enums';
+import type { ThemeProp } from "../../types";
+export type Props = {
+    /**
+     * Text to show.
+     */
+    text: string;
+    onLayout?: (event: LayoutChangeEvent) => void;
+    /**
+     * Function to execute on press.
+     */
+    onPress?: (e: GestureResponderEvent) => void;
+    /**
+     * Accessibility label for the affix. This is read by the screen reader when the user taps the affix.
+     */
+    accessibilityLabel?: string;
+    /**
+     * Style that is passed to the Text element.
+     */
+    textStyle?: StyleProp<TextStyle>;
+    /**
+     * @optional
+     */
+    theme?: ThemeProp;
+};
+type ContextState = {
+    topPosition: number | null;
+    onLayout?: (event: LayoutChangeEvent) => void;
+    visible?: Animated.Value;
+    textStyle?: StyleProp<TextStyle>;
+    side: AdornmentSide;
+    paddingHorizontal?: DimensionValue;
+    maxFontSizeMultiplier?: number | undefined | null;
+    testID?: string;
+    disabled?: boolean;
+};
+declare const AffixAdornment: React.FunctionComponent<{
+    affix: React.ReactNode;
+    testID: string;
+} & ContextState>;
+/**
+ * A component to render a leading / trailing text in the TextInput
+ *
+ * ## Usage
+ * ```js
+ * import * as React from 'react';
+ * import { TextInput } from 'react-native-paper';
+ *
+ * const MyComponent = () => {
+ *   const [text, setText] = React.useState('');
+ *
+ *   return (
+ *     <TextInput
+ *       mode="outlined"
+ *       label="Outlined input"
+ *       placeholder="Type something"
+ *       right={<TextInput.Affix text="/100" />}
+ *     />
+ *   );
+ * };
+ *
+ * export default MyComponent;
+ * ```
+ */
+declare const TextFieldAffix: {
+    ({ text, textStyle: labelStyle, theme: themeOverrides, onLayout: onTextLayout, onPress, accessibilityLabel, }: Props): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default TextFieldAffix;
+export { TextFieldAffix, AffixAdornment };

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

@@ -0,0 +1,88 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AffixAdornment = exports.TextFieldAffix = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+const enums_1 = require("./enums");
+const utils_1 = require("./utils");
+const theming_1 = require("../../theming");
+const helpers_1 = require("../helpers");
+const AffixContext = react_1.default.createContext({
+    textStyle: { fontFamily: '', color: '' },
+    topPosition: null,
+    side: enums_1.AdornmentSide.Left,
+});
+const AffixAdornment = ({ affix, side, textStyle, topPosition, onLayout, visible, paddingHorizontal, maxFontSizeMultiplier, testID, disabled, }) => {
+    return ((0, jsx_runtime_1.jsx)(AffixContext.Provider, { value: {
+            side,
+            textStyle,
+            topPosition,
+            onLayout,
+            visible,
+            paddingHorizontal,
+            maxFontSizeMultiplier,
+            testID,
+            disabled,
+        }, children: affix }));
+};
+exports.AffixAdornment = AffixAdornment;
+/**
+ * A component to render a leading / trailing text in the TextInput
+ *
+ * ## Usage
+ * ```js
+ * import * as React from 'react';
+ * import { TextInput } from 'react-native-paper';
+ *
+ * const MyComponent = () => {
+ *   const [text, setText] = React.useState('');
+ *
+ *   return (
+ *     <TextInput
+ *       mode="outlined"
+ *       label="Outlined input"
+ *       placeholder="Type something"
+ *       right={<TextInput.Affix text="/100" />}
+ *     />
+ *   );
+ * };
+ *
+ * export default MyComponent;
+ * ```
+ */
+const TextFieldAffix = ({ text, textStyle: labelStyle, theme: themeOverrides, onLayout: onTextLayout, onPress, accessibilityLabel = text, }) => {
+    const theme = (0, theming_1.useInternalTheme)(themeOverrides);
+    const { AFFIX_OFFSET } = (0, helpers_1.getConstants)(theme.isV3);
+    const { textStyle, onLayout, topPosition, side, visible, paddingHorizontal, maxFontSizeMultiplier, testID, disabled, } = react_1.default.useContext(AffixContext);
+    const offset = typeof paddingHorizontal === 'number' ? paddingHorizontal : AFFIX_OFFSET;
+    const style = {
+        top: topPosition,
+        [side]: offset,
+    };
+    const textColor = (0, utils_1.getTextColor)({ theme, disabled });
+    const content = ((0, jsx_runtime_1.jsx)(react_native_1.Text, { maxFontSizeMultiplier: maxFontSizeMultiplier, style: [{ color: textColor }, textStyle, labelStyle], onLayout: onTextLayout, testID: `${testID}-text`, children: text }));
+    return ((0, jsx_runtime_1.jsx)(react_native_1.Animated.View, { style: [
+            styles.container,
+            style,
+            {
+                opacity: visible?.interpolate({
+                    inputRange: [0, 1],
+                    outputRange: [1, 0],
+                }) || 1,
+            },
+        ], onLayout: onLayout, testID: testID, children: onPress ? ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { onPress: onPress, accessibilityRole: "button", accessibilityLabel: accessibilityLabel, children: content })) : (content) }));
+};
+exports.TextFieldAffix = TextFieldAffix;
+TextFieldAffix.displayName = 'TextField.Affix';
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        position: 'absolute',
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+});
+exports.default = TextFieldAffix;

package/src/ui/components/TextField/Adornment/TextFieldIcon.d.ts

@@ -0,0 +1,77 @@
+import React from 'react';
+import { type ColorValue, type GestureResponderEvent, type StyleProp, type ViewStyle } from 'react-native';
+import type { $Omit, ThemeProp } from "../../types";
+import type { IconSource } from '../../Icon';
+import IconButton from '../../IconButton/IconButton';
+export type Props = $Omit<React.ComponentProps<typeof IconButton>, 'icon' | 'theme' | 'color' | 'iconColor'> & {
+    /**
+     * @renamed Renamed from 'name' to 'icon` in v5.x
+     * Icon to show.
+     */
+    icon: IconSource;
+    /**
+     * Function to execute on press.
+     */
+    onPress?: (e: GestureResponderEvent) => void;
+    /**
+     * Whether the TextInput will focus after onPress.
+     */
+    forceTextInputFocus?: boolean;
+    /**
+     * Color of the icon or a function receiving a boolean indicating whether the TextInput is focused and returning the color.
+     */
+    color?: ((isTextInputFocused: boolean) => string | undefined) | string;
+    /**
+     * Color of the ripple effect.
+     */
+    rippleColor?: ColorValue;
+    style?: StyleProp<ViewStyle>;
+    /**
+     * @optional
+     */
+    theme?: ThemeProp;
+};
+type StyleContextType = {
+    style: StyleProp<ViewStyle>;
+    isTextInputFocused: boolean;
+    forceFocus: () => void;
+    testID: string;
+    disabled?: boolean;
+};
+declare const IconAdornment: React.FunctionComponent<{
+    testID: string;
+    icon: React.ReactNode;
+    topPosition: number;
+    side: 'left' | 'right';
+    theme?: ThemeProp;
+    disabled?: boolean;
+} & Omit<StyleContextType, 'style'>>;
+/**
+ * A component to render a leading / trailing icon in the TextInput
+ *
+ * ## Usage
+ * ```js
+ * import * as React from 'react';
+ * import { TextInput } from 'react-native-paper';
+ *
+ * const MyComponent = () => {
+ *   const [text, setText] = React.useState('');
+ *
+ *   return (
+ *     <TextInput
+ *       label="Password"
+ *       secureTextEntry
+ *       right={<TextInput.Icon icon="eye" />}
+ *     />
+ *   );
+ * };
+ *
+ * export default MyComponent;
+ * ```
+ */
+declare const TextFieldIcon: {
+    ({ icon, onPress, forceTextInputFocus, color: customColor, theme: themeOverrides, rippleColor, ...rest }: Props): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default TextFieldIcon;
+export { IconAdornment };

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

@@ -0,0 +1,91 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IconAdornment = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+const utils_1 = require("./utils");
+const theming_1 = require("../../theming");
+const IconButton_1 = __importDefault(require("../../IconButton/IconButton"));
+const constants_1 = require("../constants");
+const helpers_1 = require("../helpers");
+const StyleContext = react_1.default.createContext({
+    style: {},
+    isTextInputFocused: false,
+    forceFocus: () => { },
+    testID: '',
+});
+const IconAdornment = ({ icon, topPosition, side, isTextInputFocused, forceFocus, testID, theme: themeOverrides, disabled, }) => {
+    const { isV3 } = (0, theming_1.useInternalTheme)(themeOverrides);
+    const { ICON_OFFSET } = (0, helpers_1.getConstants)(isV3);
+    const style = {
+        top: topPosition,
+        [side]: ICON_OFFSET,
+    };
+    const contextState = {
+        style,
+        isTextInputFocused,
+        forceFocus,
+        testID,
+        disabled,
+    };
+    return ((0, jsx_runtime_1.jsx)(StyleContext.Provider, { value: contextState, children: icon }));
+};
+exports.IconAdornment = IconAdornment;
+/**
+ * A component to render a leading / trailing icon in the TextInput
+ *
+ * ## Usage
+ * ```js
+ * import * as React from 'react';
+ * import { TextInput } from 'react-native-paper';
+ *
+ * const MyComponent = () => {
+ *   const [text, setText] = React.useState('');
+ *
+ *   return (
+ *     <TextInput
+ *       label="Password"
+ *       secureTextEntry
+ *       right={<TextInput.Icon icon="eye" />}
+ *     />
+ *   );
+ * };
+ *
+ * export default MyComponent;
+ * ```
+ */
+const TextFieldIcon = ({ icon, onPress, forceTextInputFocus = true, color: customColor, theme: themeOverrides, rippleColor, ...rest }) => {
+    const { style, isTextInputFocused, forceFocus, testID, disabled } = react_1.default.useContext(StyleContext);
+    const onPressWithFocusControl = react_1.default.useCallback((e) => {
+        if (forceTextInputFocus && !isTextInputFocused) {
+            forceFocus();
+        }
+        onPress?.(e);
+    }, [forceTextInputFocus, forceFocus, isTextInputFocused, onPress]);
+    const theme = (0, theming_1.useInternalTheme)(themeOverrides);
+    const iconColor = (0, utils_1.getIconColor)({
+        theme,
+        disabled,
+        isTextInputFocused,
+        customColor,
+    });
+    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.container, style], children: (0, jsx_runtime_1.jsx)(IconButton_1.default, { icon: icon, style: styles.iconButton, size: constants_1.ICON_SIZE, onPress: onPressWithFocusControl, iconColor: iconColor, testID: testID, theme: themeOverrides, rippleColor: rippleColor, ...rest }) }));
+};
+TextFieldIcon.displayName = 'TextField.Icon';
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        position: 'absolute',
+        width: constants_1.ICON_SIZE,
+        height: constants_1.ICON_SIZE,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    iconButton: {
+        margin: 0,
+    },
+});
+exports.default = TextFieldIcon;

package/src/ui/components/TextField/Adornment/enums.d.ts

@@ -0,0 +1,12 @@
+export declare enum AdornmentType {
+    Icon = "icon",
+    Affix = "affix"
+}
+export declare enum AdornmentSide {
+    Right = "right",
+    Left = "left"
+}
+export declare enum InputMode {
+    Outlined = "outlined",
+    Flat = "flat"
+}

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

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InputMode = exports.AdornmentSide = exports.AdornmentType = void 0;
+var AdornmentType;
+(function (AdornmentType) {
+    AdornmentType["Icon"] = "icon";
+    AdornmentType["Affix"] = "affix";
+})(AdornmentType || (exports.AdornmentType = AdornmentType = {}));
+var AdornmentSide;
+(function (AdornmentSide) {
+    AdornmentSide["Right"] = "right";
+    AdornmentSide["Left"] = "left";
+})(AdornmentSide || (exports.AdornmentSide = AdornmentSide = {}));
+var InputMode;
+(function (InputMode) {
+    InputMode["Outlined"] = "outlined";
+    InputMode["Flat"] = "flat";
+})(InputMode || (exports.InputMode = InputMode = {}));

package/src/ui/components/TextField/Adornment/types.d.ts

@@ -0,0 +1,11 @@
+import type { AdornmentSide, AdornmentType } from './enums';
+export type AdornmentConfig = {
+    side: AdornmentSide;
+    type: AdornmentType;
+};
+export type AdornmentStyleAdjustmentForNativeInput = {
+    adornmentStyleAdjustmentForNativeInput: Array<{
+        paddingRight: number;
+        paddingLeft: number;
+    } | Record<string, never>>;
+};

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

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/src/ui/components/TextField/Adornment/utils.d.ts

@@ -0,0 +1,11 @@
+import type { InternalTheme } from "../../types";
+type BaseProps = {
+    theme: InternalTheme;
+    disabled?: boolean;
+};
+export declare function getTextColor({ theme, disabled }: BaseProps): string;
+export declare function getIconColor({ theme, isTextInputFocused, disabled, customColor, }: BaseProps & {
+    isTextInputFocused: boolean;
+    customColor?: ((isTextInputFocused: boolean) => string | undefined) | string;
+}): string | undefined;
+export {};