react-native-ui-lib 7.35.1 → 7.36.0

package/lib/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uilib-native",
-  "version": "4.5.0",
+  "version": "4.5.1",
   "homepage": "https://github.com/wix/react-native-ui-lib",
   "description": "uilib native components (separated from js components)",
   "main": "components/index",
@@ -10,14 +10,14 @@
   "author": "Ethan Sharabi <ethan.shar@gmail.com>",
   "license": "MIT",
   "dependencies": {
-    "lodash": "^4.0.0",
+    "lodash": "^4.17.21",
     "prop-types": "^15.5.10"
   },
   "devDependencies": {
     "shell-utils": "^1.0.10"
   },
   "peerDependencies": {
-    "react": "^16.0.0",
-    "react-native": "^0.51.0"
+    "react": ">=17.0.1",
+    "react-native": ">=0.64.1"
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-ui-lib",
-  "version": "7.35.1",
+  "version": "7.36.0",
   "main": "src/index.js",
   "types": "src/index.d.ts",
   "author": "Ethan Sharabi <ethan.shar@gmail.com>",

package/pieChart.d.ts

@@ -0,0 +1,2 @@
+import {PieChart} from './src';
+export default PieChart;

package/pieChart.js

@@ -0,0 +1 @@
+module.exports = require('./src/components/pieChart').default;

package/src/components/button/index.d.ts

@@ -403,7 +403,7 @@ declare const _default: React.ForwardRefExoticComponent<((import("../touchableOp
     color?: string | undefined;
     iconSource?: import("../image").ImageSourceType | ((iconStyle?: StyleProp<ImageStyle>[] | undefined) => JSX.Element) | null;
     iconStyle?: StyleProp<ImageStyle>;
-    iconProps?: Partial<import("../image").ImageProps> | undefined;
+    iconProps?: Partial<import("../icon").IconProps> | undefined;
     iconOnRight?: boolean | undefined;
     supportRTL?: boolean | undefined;
     backgroundColor?: string | undefined;
@@ -433,7 +433,7 @@ declare const _default: React.ForwardRefExoticComponent<((import("../touchableOp
     color?: string | undefined;
     iconSource?: import("../image").ImageSourceType | ((iconStyle?: StyleProp<ImageStyle>[] | undefined) => JSX.Element) | null;
     iconStyle?: StyleProp<ImageStyle>;
-    iconProps?: Partial<import("../image").ImageProps> | undefined;
+    iconProps?: Partial<import("../icon").IconProps> | undefined;
     iconOnRight?: boolean | undefined;
     supportRTL?: boolean | undefined;
     backgroundColor?: string | undefined;
@@ -463,7 +463,7 @@ declare const _default: React.ForwardRefExoticComponent<((import("../touchableOp
     color?: string | undefined;
     iconSource?: import("../image").ImageSourceType | ((iconStyle?: StyleProp<ImageStyle>[] | undefined) => JSX.Element) | null;
     iconStyle?: StyleProp<ImageStyle>;
-    iconProps?: Partial<import("../image").ImageProps> | undefined;
+    iconProps?: Partial<import("../icon").IconProps> | undefined;
     iconOnRight?: boolean | undefined;
     supportRTL?: boolean | undefined;
     backgroundColor?: string | undefined;
@@ -493,7 +493,7 @@ declare const _default: React.ForwardRefExoticComponent<((import("../touchableOp
     color?: string | undefined;
     iconSource?: import("../image").ImageSourceType | ((iconStyle?: StyleProp<ImageStyle>[] | undefined) => JSX.Element) | null;
     iconStyle?: StyleProp<ImageStyle>;
-    iconProps?: Partial<import("../image").ImageProps> | undefined;
+    iconProps?: Partial<import("../icon").IconProps> | undefined;
     iconOnRight?: boolean | undefined;
     supportRTL?: boolean | undefined;
     backgroundColor?: string | undefined;

package/src/components/button/types.d.ts

@@ -4,6 +4,7 @@ import { BaseComponentInjectedProps, ForwardRefInjectedProps, TypographyModifier
 import { TouchableOpacityProps } from '../touchableOpacity';
 import { TextProps } from '../text';
 import { ImageProps } from '../image';
+import type { IconProps } from '../icon';
 export declare enum ButtonSize {
     xSmall = "xSmall",
     small = "small",
@@ -38,7 +39,7 @@ export type ButtonProps = TouchableOpacityProps & TypographyModifiers & ColorsMo
     /**
      * Other image props that will be passed to the image
      */
-    iconProps?: Partial<ImageProps>;
+    iconProps?: Partial<IconProps>;
     /**
      * Should the icon be right to the label
      */

package/src/components/picker/PickerItemsList.js

@@ -34,7 +34,8 @@ const PickerItemsList = props => {
     mode,
     testID,
     showLoader,
-    customLoaderElement
+    customLoaderElement,
+    renderCustomTopElement
   } = props;
   const context = useContext(PickerContext);
   const [wheelPickerValue, setWheelPickerValue] = useState(context.value ?? items?.[0]?.value);
@@ -126,6 +127,7 @@ const PickerItemsList = props => {
   const renderContent = () => {
     return useWheelPicker ? renderWheel() : <>
         {renderSearchInput()}
+        {renderCustomTopElement?.(context.value)}
         {renderList()}
       </>;
   };

package/src/components/picker/api/picker.api.json

@@ -47,6 +47,11 @@
       "type": "(value, {{...props, isSelected}}, itemLabel) => void",
       "description": "Render custom picker item"
     },
+    {
+      "name": "renderCustomTopElement",
+      "type": "(value?: PickerValue) => React.ReactElement",
+      "description": "Render custom top element"
+    },
     {
       "name": "renderCustomModal",
       "type": "({visible, children, toggleModal}) => void)",

package/src/components/picker/index.js

@@ -57,6 +57,7 @@ const Picker = React.forwardRef((props, ref) => {
     items: propItems,
     showLoader,
     customLoaderElement,
+    renderCustomTopElement,
     ...others
   } = themeProps;
   const {
@@ -200,7 +201,7 @@ const Picker = React.forwardRef((props, ref) => {
       ...topBarProps,
       onCancel: cancelSelect,
       onDone: mode === PickerModes.MULTI ? () => onDoneSelecting(multiDraftValue) : undefined
-    }} showSearch={showSearch} searchStyle={searchStyle} searchPlaceholder={searchPlaceholder} onSearchChange={_onSearchChange} renderCustomSearch={renderCustomSearch} renderHeader={renderHeader} listProps={listProps} useSafeArea={useSafeArea} showLoader={showLoader} customLoaderElement={customLoaderElement}>
+    }} showSearch={showSearch} searchStyle={searchStyle} searchPlaceholder={searchPlaceholder} onSearchChange={_onSearchChange} renderCustomSearch={renderCustomSearch} renderHeader={renderHeader} listProps={listProps} useSafeArea={useSafeArea} showLoader={showLoader} customLoaderElement={customLoaderElement} renderCustomTopElement={renderCustomTopElement}>
         {filteredItems}
       </PickerItemsList>;
   }, [testID, mode, useDialog, selectedItemPosition, topBarProps, cancelSelect, onDoneSelecting, multiDraftValue, showSearch, searchStyle, searchPlaceholder, _onSearchChange, renderCustomSearch, renderHeader, listProps, filteredItems, useSafeArea, useWheelPicker, items, showLoader]);

package/src/components/picker/types.d.ts

@@ -189,6 +189,10 @@ export type PickerBaseProps = Omit<TextFieldProps, 'value' | 'onChange'> & Picke
         isSelected: boolean;
         isItemDisabled: boolean;
     }, label?: string) => React.ReactElement;
+    /**
+     * Render custom top element
+     */
+    renderCustomTopElement?: (value?: PickerValue) => React.ReactElement;
     /**
      * Add onPress callback for when pressing the picker
      */
@@ -283,7 +287,7 @@ export interface PickerContextProps extends Pick<PickerProps, 'migrate' | 'value
     onSelectedLayout: (event: any) => any;
     selectionLimit: PickerProps['selectionLimit'];
 }
-export type PickerItemsListProps = Pick<PropsWithChildren<PickerProps>, 'topBarProps' | 'listProps' | 'renderHeader' | 'useSafeArea' | 'showLoader' | 'customLoaderElement' | 'showSearch' | 'searchStyle' | 'searchPlaceholder' | 'onSearchChange' | 'renderCustomSearch' | 'children' | 'useWheelPicker' | 'useDialog' | 'mode' | 'testID'> & {
+export type PickerItemsListProps = Pick<PropsWithChildren<PickerProps>, 'topBarProps' | 'listProps' | 'renderHeader' | 'useSafeArea' | 'showLoader' | 'customLoaderElement' | 'renderCustomTopElement' | 'showSearch' | 'searchStyle' | 'searchPlaceholder' | 'onSearchChange' | 'renderCustomSearch' | 'children' | 'useWheelPicker' | 'useDialog' | 'mode' | 'testID'> & {
     items?: {
         value: any;
         label: any;

package/src/components/pieChart/PieChart.api.json

@@ -0,0 +1,15 @@
+{
+  "name": "PieChart",
+  "category": "charts",
+  "description": "Pie Chart",
+  "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/PieChartScreen.tsx",
+  "props": [
+    {"name": "segments", "type": "PieChartSegmentProps[]", "description": "Pie chart segments array"},
+    {"name": "diameter", "type": "number", "description": "Pie chart diameter"},
+    {"name": "dividerWidth", "type": "number", "description": "The width of the divider between the segments"},
+    {"name": "dividerColor", "type": "ColorValue", "description": "The color of the divider between the segments"}
+  ],
+  "snippet": [
+    "<PieChart segments={[{percentage: 50, color: Colors.blue30}, {percentage: 30, color: Colors.red30}, {percentage: 20, color: Colors.green30}]} diameter={144}/>"
+  ]
+}

package/src/components/pieChart/PieSegment.d.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+import { ColorValue } from 'react-native';
+export type PieSegmentProps = {
+    /**
+     * The percentage of pie the segment should cover
+     */
+    percentage: number;
+    /**
+     * The radius of the containing pie
+     */
+    radius: number;
+    /**
+     * The color of the segment
+     */
+    color: string;
+    /**
+     * The start angle of the segment
+     */
+    startAngle?: number;
+    /**
+     * The padding between the segments and the container of the pie.
+     */
+    padding?: number;
+    /**
+     * The width of the divider between the segments
+     */
+    dividerWidth?: number;
+    /**
+     * The color of the divider between the segments
+     */
+    dividerColor?: ColorValue;
+};
+declare const PieSegment: (props: PieSegmentProps) => React.JSX.Element;
+export default PieSegment;

package/src/components/pieChart/PieSegment.js

@@ -0,0 +1,58 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import View from "../view";
+import { SvgPackage } from "../../optionalDependencies";
+import { Colors } from "../../style";
+const {
+  Svg,
+  Path
+} = SvgPackage;
+const PieSegment = props => {
+  const {
+    percentage,
+    radius,
+    color,
+    startAngle = 0,
+    padding = 0,
+    dividerWidth = 4,
+    dividerColor = Colors.$backgroundDefault
+  } = props;
+  const actualRadius = radius - padding;
+  const centerXAndY = radius;
+  const amountToCover = percentage / 100 * 360;
+  const angleFromTop = startAngle - 90;
+  const startRad = angleFromTop * Math.PI / 180;
+  const endRad = startRad + amountToCover * Math.PI / 180;
+  const startX = centerXAndY + Math.cos(startRad) * actualRadius;
+  const startY = centerXAndY + Math.sin(startRad) * actualRadius;
+  const endX = centerXAndY + Math.cos(endRad) * actualRadius;
+  const endY = centerXAndY + Math.sin(endRad) * actualRadius;
+  const largeArcFlag = amountToCover > 180 ? 1 : 0;
+  const sweepFlag = 1;
+  const arcPath = `
+    M ${centerXAndY} ${centerXAndY}
+    L ${startX} ${startY}
+    A ${actualRadius} ${actualRadius} 0 ${largeArcFlag} ${sweepFlag} ${endX} ${endY}
+    Z
+  `;
+  const startBorderLine = `M ${centerXAndY} ${centerXAndY} L ${startX} ${startY}`;
+  const endBorderLine = `M ${centerXAndY} ${centerXAndY} L ${endX} ${endY}`;
+  const arc = <Path d={arcPath} fill={color} />;
+  const borders = <Path d={`${startBorderLine} ${endBorderLine}`} fill="none" stroke={dividerColor} strokeWidth={dividerWidth / 2} strokeLinejoin="round" />;
+  const totalSize = radius * 2 + padding;
+  return <View style={styles.container}>
+      <Svg width={totalSize} height={totalSize} viewBox={`0 0 ${totalSize} ${totalSize}`} style={styles.svg}>
+        {arc}
+        {borders}
+      </Svg>
+    </View>;
+};
+export default PieSegment;
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute'
+  },
+  svg: {
+    position: 'absolute'
+  }
+});

package/src/components/pieChart/index.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { PieSegmentProps } from './PieSegment';
+export type PieChartSegmentProps = Pick<PieSegmentProps, 'percentage' | 'color'>;
+export type PieChartProps = {
+    /**
+     * Pie chart segments array
+     */
+    segments: PieChartSegmentProps[];
+    /**
+     * Pie chart diameter
+     */
+    diameter?: number;
+} & Pick<PieSegmentProps, 'dividerWidth' | 'dividerColor'>;
+declare const PieChart: (props: PieChartProps) => React.JSX.Element | null;
+export default PieChart;

package/src/components/pieChart/index.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import View from "../view";
+import PieSegment from "./PieSegment";
+import { SvgPackage } from "../../optionalDependencies";
+const {
+  Svg,
+  Path
+} = SvgPackage;
+const DEFAULT_DIAMETER = 144;
+const PieChart = props => {
+  const {
+    segments,
+    diameter = DEFAULT_DIAMETER,
+    ...others
+  } = props;
+  if (!Svg || !Path) {
+    console.error(`RNUILib PieChart requires installing "@react-native-svg" dependency`);
+    return null;
+  }
+  const renderPieSegments = () => {
+    let currentStartAngle = 0;
+    return segments.map((segment, index) => {
+      const startAngle = currentStartAngle;
+      currentStartAngle += segment.percentage / 100 * 360;
+      return <PieSegment key={index} {...segment} {...others} startAngle={startAngle} radius={diameter / 2} />;
+    });
+  };
+  return <View width={diameter} height={diameter}>
+      {renderPieSegments()}
+    </View>;
+};
+export default PieChart;

package/src/components/textField/ClearButton.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
-import { TextFieldProps } from './types';
-declare const ClearButton: ({ testID, onClear, onChangeText }: Pick<TextFieldProps, 'onClear' | 'testID' | 'onChangeText'>) => React.JSX.Element;
+import { ClearButtonProps } from './types';
+declare const ClearButton: ({ testID, onClear, onChangeText, clearButtonStyle }: ClearButtonProps) => React.JSX.Element;
 export default ClearButton;

package/src/components/textField/ClearButton.js

@@ -3,7 +3,7 @@ import { StyleSheet } from 'react-native';
 import { useAnimatedStyle, useSharedValue, withTiming, Easing } from 'react-native-reanimated';
 import { useDidUpdate } from "../../hooks";
 import Assets from "../../assets";
-import { Spacings, Colors } from "../../style";
+import { Colors } from "../../style";
 import View from "../view";
 import Button from "../button";
 import FieldContext from "./FieldContext";
@@ -22,7 +22,8 @@ const TIMING_CONFIG = {
 const ClearButton = ({
   testID,
   onClear,
-  onChangeText
+  onChangeText,
+  clearButtonStyle
 }) => {
   const {
     hasValue
@@ -39,7 +40,7 @@ const ClearButton = ({
       opacity: animatedOpacity.value
     };
   });
-  const style = useMemo(() => [styles.container, animatedStyle], [animatedStyle]);
+  const style = useMemo(() => [clearButtonStyle, animatedStyle], [clearButtonStyle, animatedStyle]);
   const animate = useCallback(() => {
     const toValue = hasValue ? VISIBLE_POSITION : NON_VISIBLE_POSITION;
     animatedValue.value = withTiming(toValue, TIMING_CONFIG);
@@ -57,9 +58,6 @@ const ClearButton = ({
     </View>;
 };
 const styles = StyleSheet.create({
-  container: {
-    marginHorizontal: Spacings.s3
-  },
   clearIcon: {
     tintColor: Colors.$textNeutralLight
   }

package/src/components/textField/index.d.ts

@@ -6,13 +6,12 @@ interface StaticMembers {
     presets: typeof Presets;
 }
 export { TextFieldProps, FieldContextType, StaticMembers as TextFieldStaticMembers, TextFieldMethods, TextFieldRef, ValidationMessagePosition as TextFieldValidationMessagePosition, Validator as TextFieldValidator, ValidationMessagePositionType as TextFieldValidationMessagePositionType, MandatoryIndication as TextFieldMandatoryIndication, TextFieldValidators };
-declare const _default: React.ForwardRefExoticComponent<((Partial<Record<"margin" | "marginL" | "marginT" | "marginR" | "marginB" | "marginH" | "marginV", boolean>> & Partial<Record<"padding" | "paddingL" | "paddingT" | "paddingR" | "paddingB" | "paddingH" | "paddingV", boolean>> & Partial<Record<"text10" | "text20" | "text30" | "text40" | "text50" | "text60" | "text65" | "text70" | "text80" | "text90" | "text100" | "text10T" | "text10L" | "text10R" | "text10M" | "text10BO" | "text10H" | "text10BL" | "text20T" | "text20L" | "text20R" | "text20M" | "text20BO" | "text20H" | "text20BL" | "text30T" | "text30L" | "text30R" | "text30M" | "text30BO" | "text30H" | "text30BL" | "text40T" | "text40L" | "text40R" | "text40M" | "text40BO" | "text40H" | "text40BL" | "text50T" | "text50L" | "text50R" | "text50M" | "text50BO" | "text50H" | "text50BL" | "text60T" | "text60L" | "text60R" | "text60M" | "text60BO" | "text60H" | "text60BL" | "text65T" | "text65L" | "text65R" | "text65M" | "text65BO" | "text65H" | "text65BL" | "text70T" | "text70L" | "text70R" | "text70M" | "text70BO" | "text70H" | "text70BL" | "text80T" | "text80L" | "text80R" | "text80M" | "text80BO" | "text80H" | "text80BL" | "text90T" | "text90L" | "text90R" | "text90M" | "text90BO" | "text90H" | "text90BL" | "text100T" | "text100L" | "text100R" | "text100M" | "text100BO" | "text100H" | "text100BL", boolean>> & Partial<Record<"transparent" | "black" | "white" | "dark" | "$backgroundDefault" | "$backgroundElevated" | "$backgroundElevatedLight" | "$backgroundNeutralHeavy" | "$backgroundNeutralIdle" | "$backgroundNeutralMedium" | "$backgroundNeutral" | "$backgroundNeutralLight" | "$backgroundPrimaryHeavy" | "$backgroundPrimaryMedium" | "$backgroundPrimaryLight" | "$backgroundGeneralHeavy" | "$backgroundGeneralMedium" | "$backgroundGeneralLight" | "$backgroundSuccessHeavy" | "$backgroundSuccessLight" | "$backgroundWarningHeavy" | "$backgroundWarningLight" | "$backgroundMajorLight" | "$backgroundMajorHeavy" | "$backgroundDangerHeavy" | "$backgroundDangerLight" | "$backgroundDisabled" | "$backgroundDark" | "$backgroundDarkElevated" | "$backgroundDarkActive" | "$backgroundInverted" | "$textDisabled" | "$textDefault" | "$textNeutralHeavy" | "$textNeutral" | "$textNeutralLight" | "$textDefaultLight" | "$textPrimary" | "$textGeneral" | "$textSuccess" | "$textSuccessLight" | "$textMajor" | "$textDanger" | "$textDangerLight" | "$iconDefault" | "$iconNeutral" | "$iconDefaultLight" | "$iconPrimary" | "$iconPrimaryLight" | "$iconGeneral" | "$iconGeneralLight" | "$iconSuccess" | "$iconSuccessLight" | "$iconMajor" | "$iconDanger" | "$iconDangerLight" | "$iconDisabled" | "$outlineDefault" | "$outlineDisabled" | "$outlineDisabledHeavy" | "$outlineNeutral" | "$outlineNeutralHeavy" | "$outlinePrimary" | "$outlinePrimaryMedium" | "$outlineGeneral" | "$outlineWarning" | "$outlineDanger" | "$outlineInverted" | "$black" | "$white" | "grey1" | "grey5" | "grey10" | "grey20" | "grey30" | "grey40" | "grey50" | "grey60" | "grey70" | "grey80" | "blue1" | "blue5" | "blue10" | "blue20" | "blue30" | "blue40" | "blue50" | "blue60" | "blue70" | "blue80" | "cyan10" | "cyan20" | "cyan30" | "cyan40" | "cyan50" | "cyan60" | "cyan70" | "cyan80" | "green1" | "green5" | "green10" | "green20" | "green30" | "green40" | "green50" | "green60" | "green70" | "green80" | "yellow1" | "yellow5" | "yellow10" | "yellow20" | "yellow30" | "yellow40" | "yellow50" | "yellow60" | "yellow70" | "yellow80" | "orange1" | "orange5" | "orange10" | "orange20" | "orange30" | "orange40" | "orange50" | "orange60" | "orange70" | "orange80" | "red1" | "red5" | "red10" | "red20" | "red30" | "red40" | "red50" | "red60" | "red70" | "red80" | "purple1" | "purple5" | "purple10" | "purple20" | "purple30" | "purple40" | "purple50" | "purple60" | "purple70" | "purple80" | "violet1" | "violet5" | "violet10" | "violet20" | "violet30" | "violet40" | "violet50" | "violet60" | "violet70" | "violet80", boolean>> & import("./types").InputProps & import("./types").LabelProps & Omit<import("./types").FloatingPlaceholderProps, "testID"> & MandatoryIndication & import("./types").ValidationMessageProps & Omit<import("./types").CharCounterProps, "testID" | "maxLength"> & {
+declare const _default: React.ForwardRefExoticComponent<((Partial<Record<"margin" | "marginL" | "marginT" | "marginR" | "marginB" | "marginH" | "marginV", boolean>> & Partial<Record<"padding" | "paddingL" | "paddingT" | "paddingR" | "paddingB" | "paddingH" | "paddingV", boolean>> & Partial<Record<"text10" | "text20" | "text30" | "text40" | "text50" | "text60" | "text65" | "text70" | "text80" | "text90" | "text100" | "text10T" | "text10L" | "text10R" | "text10M" | "text10BO" | "text10H" | "text10BL" | "text20T" | "text20L" | "text20R" | "text20M" | "text20BO" | "text20H" | "text20BL" | "text30T" | "text30L" | "text30R" | "text30M" | "text30BO" | "text30H" | "text30BL" | "text40T" | "text40L" | "text40R" | "text40M" | "text40BO" | "text40H" | "text40BL" | "text50T" | "text50L" | "text50R" | "text50M" | "text50BO" | "text50H" | "text50BL" | "text60T" | "text60L" | "text60R" | "text60M" | "text60BO" | "text60H" | "text60BL" | "text65T" | "text65L" | "text65R" | "text65M" | "text65BO" | "text65H" | "text65BL" | "text70T" | "text70L" | "text70R" | "text70M" | "text70BO" | "text70H" | "text70BL" | "text80T" | "text80L" | "text80R" | "text80M" | "text80BO" | "text80H" | "text80BL" | "text90T" | "text90L" | "text90R" | "text90M" | "text90BO" | "text90H" | "text90BL" | "text100T" | "text100L" | "text100R" | "text100M" | "text100BO" | "text100H" | "text100BL", boolean>> & Partial<Record<"transparent" | "black" | "white" | "dark" | "$backgroundDefault" | "$backgroundElevated" | "$backgroundElevatedLight" | "$backgroundNeutralHeavy" | "$backgroundNeutralIdle" | "$backgroundNeutralMedium" | "$backgroundNeutral" | "$backgroundNeutralLight" | "$backgroundPrimaryHeavy" | "$backgroundPrimaryMedium" | "$backgroundPrimaryLight" | "$backgroundGeneralHeavy" | "$backgroundGeneralMedium" | "$backgroundGeneralLight" | "$backgroundSuccessHeavy" | "$backgroundSuccessLight" | "$backgroundWarningHeavy" | "$backgroundWarningLight" | "$backgroundMajorLight" | "$backgroundMajorHeavy" | "$backgroundDangerHeavy" | "$backgroundDangerLight" | "$backgroundDisabled" | "$backgroundDark" | "$backgroundDarkElevated" | "$backgroundDarkActive" | "$backgroundInverted" | "$textDisabled" | "$textDefault" | "$textNeutralHeavy" | "$textNeutral" | "$textNeutralLight" | "$textDefaultLight" | "$textPrimary" | "$textGeneral" | "$textSuccess" | "$textSuccessLight" | "$textMajor" | "$textDanger" | "$textDangerLight" | "$iconDefault" | "$iconNeutral" | "$iconDefaultLight" | "$iconPrimary" | "$iconPrimaryLight" | "$iconGeneral" | "$iconGeneralLight" | "$iconSuccess" | "$iconSuccessLight" | "$iconMajor" | "$iconDanger" | "$iconDangerLight" | "$iconDisabled" | "$outlineDefault" | "$outlineDisabled" | "$outlineDisabledHeavy" | "$outlineNeutral" | "$outlineNeutralHeavy" | "$outlinePrimary" | "$outlinePrimaryMedium" | "$outlineGeneral" | "$outlineWarning" | "$outlineDanger" | "$outlineInverted" | "$black" | "$white" | "grey1" | "grey5" | "grey10" | "grey20" | "grey30" | "grey40" | "grey50" | "grey60" | "grey70" | "grey80" | "blue1" | "blue5" | "blue10" | "blue20" | "blue30" | "blue40" | "blue50" | "blue60" | "blue70" | "blue80" | "cyan10" | "cyan20" | "cyan30" | "cyan40" | "cyan50" | "cyan60" | "cyan70" | "cyan80" | "green1" | "green5" | "green10" | "green20" | "green30" | "green40" | "green50" | "green60" | "green70" | "green80" | "yellow1" | "yellow5" | "yellow10" | "yellow20" | "yellow30" | "yellow40" | "yellow50" | "yellow60" | "yellow70" | "yellow80" | "orange1" | "orange5" | "orange10" | "orange20" | "orange30" | "orange40" | "orange50" | "orange60" | "orange70" | "orange80" | "red1" | "red5" | "red10" | "red20" | "red30" | "red40" | "red50" | "red60" | "red70" | "red80" | "purple1" | "purple5" | "purple10" | "purple20" | "purple30" | "purple40" | "purple50" | "purple60" | "purple70" | "purple80" | "violet1" | "violet5" | "violet10" | "violet20" | "violet30" | "violet40" | "violet50" | "violet60" | "violet70" | "violet80", boolean>> & import("./types").InputProps & import("./types").LabelProps & Omit<import("./types").FloatingPlaceholderProps, "testID"> & MandatoryIndication & Omit<import("./types").ClearButtonProps, "testID" | "onChangeText"> & import("./types").ValidationMessageProps & Omit<import("./types").CharCounterProps, "testID" | "maxLength"> & {
     leadingAccessory?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
     trailingAccessory?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
     topTrailingAccessory?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
     bottomAccessory?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
     showClearButton?: boolean | undefined;
-    onClear?: (() => void) | undefined;
     helperText?: string | undefined;
     floatingPlaceholder?: boolean | undefined;
     floatingPlaceholderStyle?: import("react-native").TextStyle | undefined;
@@ -33,13 +32,12 @@ declare const _default: React.ForwardRefExoticComponent<((Partial<Record<"margin
     preset?: string | null | undefined;
     centered?: boolean | undefined;
     innerFlexBehavior?: boolean | undefined;
-}) | Omit<Partial<Record<"margin" | "marginL" | "marginT" | "marginR" | "marginB" | "marginH" | "marginV", boolean>> & Partial<Record<"padding" | "paddingL" | "paddingT" | "paddingR" | "paddingB" | "paddingH" | "paddingV", boolean>> & import("../../commons/modifiers").CustomModifier & import("./types").InputProps & import("./types").LabelProps & Omit<import("./types").FloatingPlaceholderProps, "testID"> & MandatoryIndication & import("./types").ValidationMessageProps & Omit<import("./types").CharCounterProps, "testID" | "maxLength"> & {
+}) | Omit<Partial<Record<"margin" | "marginL" | "marginT" | "marginR" | "marginB" | "marginH" | "marginV", boolean>> & Partial<Record<"padding" | "paddingL" | "paddingT" | "paddingR" | "paddingB" | "paddingH" | "paddingV", boolean>> & import("../../commons/modifiers").CustomModifier & import("./types").InputProps & import("./types").LabelProps & Omit<import("./types").FloatingPlaceholderProps, "testID"> & MandatoryIndication & Omit<import("./types").ClearButtonProps, "testID" | "onChangeText"> & import("./types").ValidationMessageProps & Omit<import("./types").CharCounterProps, "testID" | "maxLength"> & {
     leadingAccessory?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
     trailingAccessory?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
     topTrailingAccessory?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
     bottomAccessory?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
     showClearButton?: boolean | undefined;
-    onClear?: (() => void) | undefined;
     helperText?: string | undefined;
     floatingPlaceholder?: boolean | undefined;
     floatingPlaceholderStyle?: import("react-native").TextStyle | undefined;
@@ -60,13 +58,12 @@ declare const _default: React.ForwardRefExoticComponent<((Partial<Record<"margin
     preset?: string | null | undefined;
     centered?: boolean | undefined;
     innerFlexBehavior?: boolean | undefined;
-}, "ref"> | Omit<Partial<Record<"margin" | "marginL" | "marginT" | "marginR" | "marginB" | "marginH" | "marginV", boolean>> & Partial<Record<"padding" | "paddingL" | "paddingT" | "paddingR" | "paddingB" | "paddingH" | "paddingV", boolean>> & import("../../commons/modifiers").CustomModifier & Partial<Record<"transparent" | "black" | "white" | "dark" | "$backgroundDefault" | "$backgroundElevated" | "$backgroundElevatedLight" | "$backgroundNeutralHeavy" | "$backgroundNeutralIdle" | "$backgroundNeutralMedium" | "$backgroundNeutral" | "$backgroundNeutralLight" | "$backgroundPrimaryHeavy" | "$backgroundPrimaryMedium" | "$backgroundPrimaryLight" | "$backgroundGeneralHeavy" | "$backgroundGeneralMedium" | "$backgroundGeneralLight" | "$backgroundSuccessHeavy" | "$backgroundSuccessLight" | "$backgroundWarningHeavy" | "$backgroundWarningLight" | "$backgroundMajorLight" | "$backgroundMajorHeavy" | "$backgroundDangerHeavy" | "$backgroundDangerLight" | "$backgroundDisabled" | "$backgroundDark" | "$backgroundDarkElevated" | "$backgroundDarkActive" | "$backgroundInverted" | "$textDisabled" | "$textDefault" | "$textNeutralHeavy" | "$textNeutral" | "$textNeutralLight" | "$textDefaultLight" | "$textPrimary" | "$textGeneral" | "$textSuccess" | "$textSuccessLight" | "$textMajor" | "$textDanger" | "$textDangerLight" | "$iconDefault" | "$iconNeutral" | "$iconDefaultLight" | "$iconPrimary" | "$iconPrimaryLight" | "$iconGeneral" | "$iconGeneralLight" | "$iconSuccess" | "$iconSuccessLight" | "$iconMajor" | "$iconDanger" | "$iconDangerLight" | "$iconDisabled" | "$outlineDefault" | "$outlineDisabled" | "$outlineDisabledHeavy" | "$outlineNeutral" | "$outlineNeutralHeavy" | "$outlinePrimary" | "$outlinePrimaryMedium" | "$outlineGeneral" | "$outlineWarning" | "$outlineDanger" | "$outlineInverted" | "$black" | "$white" | "grey1" | "grey5" | "grey10" | "grey20" | "grey30" | "grey40" | "grey50" | "grey60" | "grey70" | "grey80" | "blue1" | "blue5" | "blue10" | "blue20" | "blue30" | "blue40" | "blue50" | "blue60" | "blue70" | "blue80" | "cyan10" | "cyan20" | "cyan30" | "cyan40" | "cyan50" | "cyan60" | "cyan70" | "cyan80" | "green1" | "green5" | "green10" | "green20" | "green30" | "green40" | "green50" | "green60" | "green70" | "green80" | "yellow1" | "yellow5" | "yellow10" | "yellow20" | "yellow30" | "yellow40" | "yellow50" | "yellow60" | "yellow70" | "yellow80" | "orange1" | "orange5" | "orange10" | "orange20" | "orange30" | "orange40" | "orange50" | "orange60" | "orange70" | "orange80" | "red1" | "red5" | "red10" | "red20" | "red30" | "red40" | "red50" | "red60" | "red70" | "red80" | "purple1" | "purple5" | "purple10" | "purple20" | "purple30" | "purple40" | "purple50" | "purple60" | "purple70" | "purple80" | "violet1" | "violet5" | "violet10" | "violet20" | "violet30" | "violet40" | "violet50" | "violet60" | "violet70" | "violet80", boolean>> & import("./types").InputProps & import("./types").LabelProps & Omit<import("./types").FloatingPlaceholderProps, "testID"> & MandatoryIndication & import("./types").ValidationMessageProps & Omit<import("./types").CharCounterProps, "testID" | "maxLength"> & {
+}, "ref"> | Omit<Partial<Record<"margin" | "marginL" | "marginT" | "marginR" | "marginB" | "marginH" | "marginV", boolean>> & Partial<Record<"padding" | "paddingL" | "paddingT" | "paddingR" | "paddingB" | "paddingH" | "paddingV", boolean>> & import("../../commons/modifiers").CustomModifier & Partial<Record<"transparent" | "black" | "white" | "dark" | "$backgroundDefault" | "$backgroundElevated" | "$backgroundElevatedLight" | "$backgroundNeutralHeavy" | "$backgroundNeutralIdle" | "$backgroundNeutralMedium" | "$backgroundNeutral" | "$backgroundNeutralLight" | "$backgroundPrimaryHeavy" | "$backgroundPrimaryMedium" | "$backgroundPrimaryLight" | "$backgroundGeneralHeavy" | "$backgroundGeneralMedium" | "$backgroundGeneralLight" | "$backgroundSuccessHeavy" | "$backgroundSuccessLight" | "$backgroundWarningHeavy" | "$backgroundWarningLight" | "$backgroundMajorLight" | "$backgroundMajorHeavy" | "$backgroundDangerHeavy" | "$backgroundDangerLight" | "$backgroundDisabled" | "$backgroundDark" | "$backgroundDarkElevated" | "$backgroundDarkActive" | "$backgroundInverted" | "$textDisabled" | "$textDefault" | "$textNeutralHeavy" | "$textNeutral" | "$textNeutralLight" | "$textDefaultLight" | "$textPrimary" | "$textGeneral" | "$textSuccess" | "$textSuccessLight" | "$textMajor" | "$textDanger" | "$textDangerLight" | "$iconDefault" | "$iconNeutral" | "$iconDefaultLight" | "$iconPrimary" | "$iconPrimaryLight" | "$iconGeneral" | "$iconGeneralLight" | "$iconSuccess" | "$iconSuccessLight" | "$iconMajor" | "$iconDanger" | "$iconDangerLight" | "$iconDisabled" | "$outlineDefault" | "$outlineDisabled" | "$outlineDisabledHeavy" | "$outlineNeutral" | "$outlineNeutralHeavy" | "$outlinePrimary" | "$outlinePrimaryMedium" | "$outlineGeneral" | "$outlineWarning" | "$outlineDanger" | "$outlineInverted" | "$black" | "$white" | "grey1" | "grey5" | "grey10" | "grey20" | "grey30" | "grey40" | "grey50" | "grey60" | "grey70" | "grey80" | "blue1" | "blue5" | "blue10" | "blue20" | "blue30" | "blue40" | "blue50" | "blue60" | "blue70" | "blue80" | "cyan10" | "cyan20" | "cyan30" | "cyan40" | "cyan50" | "cyan60" | "cyan70" | "cyan80" | "green1" | "green5" | "green10" | "green20" | "green30" | "green40" | "green50" | "green60" | "green70" | "green80" | "yellow1" | "yellow5" | "yellow10" | "yellow20" | "yellow30" | "yellow40" | "yellow50" | "yellow60" | "yellow70" | "yellow80" | "orange1" | "orange5" | "orange10" | "orange20" | "orange30" | "orange40" | "orange50" | "orange60" | "orange70" | "orange80" | "red1" | "red5" | "red10" | "red20" | "red30" | "red40" | "red50" | "red60" | "red70" | "red80" | "purple1" | "purple5" | "purple10" | "purple20" | "purple30" | "purple40" | "purple50" | "purple60" | "purple70" | "purple80" | "violet1" | "violet5" | "violet10" | "violet20" | "violet30" | "violet40" | "violet50" | "violet60" | "violet70" | "violet80", boolean>> & import("./types").InputProps & import("./types").LabelProps & Omit<import("./types").FloatingPlaceholderProps, "testID"> & MandatoryIndication & Omit<import("./types").ClearButtonProps, "testID" | "onChangeText"> & import("./types").ValidationMessageProps & Omit<import("./types").CharCounterProps, "testID" | "maxLength"> & {
     leadingAccessory?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
     trailingAccessory?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
     topTrailingAccessory?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
     bottomAccessory?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
     showClearButton?: boolean | undefined;
-    onClear?: (() => void) | undefined;
     helperText?: string | undefined;
     floatingPlaceholder?: boolean | undefined;
     floatingPlaceholderStyle?: import("react-native").TextStyle | undefined;
@@ -87,13 +84,12 @@ declare const _default: React.ForwardRefExoticComponent<((Partial<Record<"margin
     preset?: string | null | undefined;
     centered?: boolean | undefined;
     innerFlexBehavior?: boolean | undefined;
-}, "ref"> | Omit<Partial<Record<"margin" | "marginL" | "marginT" | "marginR" | "marginB" | "marginH" | "marginV", boolean>> & Partial<Record<"padding" | "paddingL" | "paddingT" | "paddingR" | "paddingB" | "paddingH" | "paddingV", boolean>> & Partial<Record<"text10" | "text20" | "text30" | "text40" | "text50" | "text60" | "text65" | "text70" | "text80" | "text90" | "text100" | "text10T" | "text10L" | "text10R" | "text10M" | "text10BO" | "text10H" | "text10BL" | "text20T" | "text20L" | "text20R" | "text20M" | "text20BO" | "text20H" | "text20BL" | "text30T" | "text30L" | "text30R" | "text30M" | "text30BO" | "text30H" | "text30BL" | "text40T" | "text40L" | "text40R" | "text40M" | "text40BO" | "text40H" | "text40BL" | "text50T" | "text50L" | "text50R" | "text50M" | "text50BO" | "text50H" | "text50BL" | "text60T" | "text60L" | "text60R" | "text60M" | "text60BO" | "text60H" | "text60BL" | "text65T" | "text65L" | "text65R" | "text65M" | "text65BO" | "text65H" | "text65BL" | "text70T" | "text70L" | "text70R" | "text70M" | "text70BO" | "text70H" | "text70BL" | "text80T" | "text80L" | "text80R" | "text80M" | "text80BO" | "text80H" | "text80BL" | "text90T" | "text90L" | "text90R" | "text90M" | "text90BO" | "text90H" | "text90BL" | "text100T" | "text100L" | "text100R" | "text100M" | "text100BO" | "text100H" | "text100BL", boolean>> & import("../../commons/modifiers").CustomModifier & import("./types").InputProps & import("./types").LabelProps & Omit<import("./types").FloatingPlaceholderProps, "testID"> & MandatoryIndication & import("./types").ValidationMessageProps & Omit<import("./types").CharCounterProps, "testID" | "maxLength"> & {
+}, "ref"> | Omit<Partial<Record<"margin" | "marginL" | "marginT" | "marginR" | "marginB" | "marginH" | "marginV", boolean>> & Partial<Record<"padding" | "paddingL" | "paddingT" | "paddingR" | "paddingB" | "paddingH" | "paddingV", boolean>> & Partial<Record<"text10" | "text20" | "text30" | "text40" | "text50" | "text60" | "text65" | "text70" | "text80" | "text90" | "text100" | "text10T" | "text10L" | "text10R" | "text10M" | "text10BO" | "text10H" | "text10BL" | "text20T" | "text20L" | "text20R" | "text20M" | "text20BO" | "text20H" | "text20BL" | "text30T" | "text30L" | "text30R" | "text30M" | "text30BO" | "text30H" | "text30BL" | "text40T" | "text40L" | "text40R" | "text40M" | "text40BO" | "text40H" | "text40BL" | "text50T" | "text50L" | "text50R" | "text50M" | "text50BO" | "text50H" | "text50BL" | "text60T" | "text60L" | "text60R" | "text60M" | "text60BO" | "text60H" | "text60BL" | "text65T" | "text65L" | "text65R" | "text65M" | "text65BO" | "text65H" | "text65BL" | "text70T" | "text70L" | "text70R" | "text70M" | "text70BO" | "text70H" | "text70BL" | "text80T" | "text80L" | "text80R" | "text80M" | "text80BO" | "text80H" | "text80BL" | "text90T" | "text90L" | "text90R" | "text90M" | "text90BO" | "text90H" | "text90BL" | "text100T" | "text100L" | "text100R" | "text100M" | "text100BO" | "text100H" | "text100BL", boolean>> & import("../../commons/modifiers").CustomModifier & import("./types").InputProps & import("./types").LabelProps & Omit<import("./types").FloatingPlaceholderProps, "testID"> & MandatoryIndication & Omit<import("./types").ClearButtonProps, "testID" | "onChangeText"> & import("./types").ValidationMessageProps & Omit<import("./types").CharCounterProps, "testID" | "maxLength"> & {
     leadingAccessory?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
     trailingAccessory?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
     topTrailingAccessory?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
     bottomAccessory?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
     showClearButton?: boolean | undefined;
-    onClear?: (() => void) | undefined;
     helperText?: string | undefined;
     floatingPlaceholder?: boolean | undefined;
     floatingPlaceholderStyle?: import("react-native").TextStyle | undefined;

package/src/components/textField/index.js

@@ -77,6 +77,7 @@ const TextField = props => {
     centered,
     readonly = false,
     showMandatoryIndication,
+    clearButtonStyle,
     ...others
   } = usePreset(props);
   const {
@@ -160,7 +161,7 @@ const TextField = props => {
               {floatingPlaceholder && <FloatingPlaceholder defaultValue={others.defaultValue} placeholder={placeholder} floatingPlaceholderStyle={_floatingPlaceholderStyle} floatingPlaceholderColor={floatingPlaceholderColor} floatOnFocus={floatOnFocus} validationMessagePosition={validationMessagePosition} extraOffset={leadingAccessoryMeasurements?.width} testID={`${props.testID}.floatingPlaceholder`} showMandatoryIndication={showMandatoryIndication} />}
               <Input placeholderTextColor={hidePlaceholder ? 'transparent' : placeholderTextColor} value={fieldState.value} {...others} readonly={readonly} style={inputStyle} onFocus={onFocus} onBlur={onBlur} onChangeText={onChangeText} placeholder={placeholder} hint={hint} showMandatoryIndication={showMandatoryIndication && !label} />
             </View>}
-          {showClearButton && <ClearButton onClear={onClear} testID={`${props.testID}.clearButton`} onChangeText={onChangeText} />}
+          {showClearButton && <ClearButton onClear={onClear} testID={`${props.testID}.clearButton`} onChangeText={onChangeText} clearButtonStyle={clearButtonStyle} />}
           {trailingAccessory}
           {/* </View> */}
         </View>

package/src/components/textField/presets/outline.d.ts

@@ -1,4 +1,7 @@
 declare const _default: {
+    clearButtonStyle: {
+        marginLeft: number;
+    };
     fieldStyle: {
         borderWidth: number;
         borderColor: string;

package/src/components/textField/presets/outline.js

@@ -2,6 +2,9 @@ import { StyleSheet } from 'react-native';
 import { BorderRadiuses, Colors, Spacings } from "../../../style";
 import underline from "./underline";
 const styles = StyleSheet.create({
+  clearButtonStyle: {
+    marginLeft: Spacings.s3
+  },
   field: {
     borderWidth: 1,
     borderColor: Colors.$outlineDisabled,
@@ -12,5 +15,6 @@ const styles = StyleSheet.create({
 });
 export default {
   ...underline,
+  clearButtonStyle: styles.clearButtonStyle,
   fieldStyle: styles.field
 };

package/src/components/textField/presets/underline.d.ts

@@ -346,6 +346,9 @@ declare const _default: {
         verticalAlign?: "auto" | "top" | "bottom" | "middle" | undefined;
         includeFontPadding?: boolean | undefined;
     };
+    clearButtonStyle: {
+        marginHorizontal: number;
+    };
     floatingPlaceholderStyle: {
         color?: import("react-native").ColorValue | undefined;
         fontFamily?: string | undefined;

package/src/components/textField/presets/underline.js

@@ -23,6 +23,9 @@ const styles = StyleSheet.create({
     lineHeight: undefined,
     height: Typography?.text70?.lineHeight
   },
+  clearButtonStyle: {
+    marginHorizontal: Spacings.s3
+  },
   floatingPlaceholder: {
     ...Typography.text70
   }
@@ -35,5 +38,6 @@ export default {
   labelColor: colorByState,
   fieldStyle: styles.field,
   style: styles.input,
+  clearButtonStyle: styles.clearButtonStyle,
   floatingPlaceholderStyle: styles.floatingPlaceholder
 };

package/src/components/textField/types.d.ts

@@ -52,6 +52,16 @@ export interface MandatoryIndication {
      */
     showMandatoryIndication?: boolean;
 }
+export interface ClearButtonProps extends Pick<TextInputProps, 'testID' | 'onChangeText'> {
+    /**
+     * On clear button callback
+     */
+    onClear?: () => void;
+    /**
+     * The style of the clear button
+     */
+    clearButtonStyle?: StyleProp<ViewStyle>;
+}
 export interface LabelProps extends MandatoryIndication, Pick<ValidationMessageProps, 'enableErrors'> {
     /**
      * Field label
@@ -157,7 +167,7 @@ export interface InputProps extends Omit<TextInputProps, 'placeholderTextColor'>
      */
     readonly?: boolean;
 }
-export type TextFieldProps = MarginModifiers & PaddingModifiers & TypographyModifiers & ColorsModifiers & InputProps & LabelProps & Omit<FloatingPlaceholderProps, 'testID'> & MandatoryIndication & ValidationMessageProps & Omit<CharCounterProps, 'maxLength' | 'testID'> & {
+export type TextFieldProps = MarginModifiers & PaddingModifiers & TypographyModifiers & ColorsModifiers & InputProps & LabelProps & Omit<FloatingPlaceholderProps, 'testID'> & MandatoryIndication & Omit<ClearButtonProps, 'testID' | 'onChangeText'> & ValidationMessageProps & Omit<CharCounterProps, 'maxLength' | 'testID'> & {
     /**
      * Pass to render a leading element
      */
@@ -178,10 +188,6 @@ export type TextFieldProps = MarginModifiers & PaddingModifiers & TypographyModi
      * Should show a clear button when there is a value
      */
     showClearButton?: boolean;
-    /**
-     * On clear button callback
-     */
-    onClear?: () => void;
     /**
      * Text to display under the input
      */

package/src/components/textField/usePreset.d.ts

@@ -188,6 +188,8 @@ export default function usePreset({ preset, ...props }: InternalTextFieldProps):
     floatingPlaceholderStyle?: ((false | import("react-native/types").TextStyle | import("react-native/types").RegisteredStyle<import("react-native/types").TextStyle> | import("react-native/types").RecursiveArray<import("react-native/types").TextStyle | import("react-native/types").Falsy | import("react-native/types").RegisteredStyle<import("react-native/types").TextStyle>> | null) & import("react-native/types").TextStyle) | undefined;
     floatOnFocus?: boolean | undefined;
     extraOffset?: number | undefined;
+    onClear?: (() => void) | undefined;
+    clearButtonStyle?: import("react-native/types").StyleProp<import("react-native/types").ViewStyle>;
     validationMessage?: string | string[] | undefined;
     validationMessageStyle?: import("react-native/types").StyleProp<import("react-native/types").TextStyle>;
     validationIcon?: import("../icon").IconProps | undefined;
@@ -200,7 +202,6 @@ export default function usePreset({ preset, ...props }: InternalTextFieldProps):
     topTrailingAccessory?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
     bottomAccessory?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
     showClearButton?: boolean | undefined;
-    onClear?: (() => void) | undefined;
     helperText?: string | undefined;
     validateOnStart?: boolean | undefined;
     validateOnChange?: boolean | undefined;
@@ -651,6 +652,8 @@ export default function usePreset({ preset, ...props }: InternalTextFieldProps):
     floatingPlaceholderStyle?: ((false | import("react-native/types").TextStyle | import("react-native/types").RegisteredStyle<import("react-native/types").TextStyle> | import("react-native/types").RecursiveArray<import("react-native/types").TextStyle | import("react-native/types").Falsy | import("react-native/types").RegisteredStyle<import("react-native/types").TextStyle>> | null) & import("react-native/types").TextStyle) | undefined;
     floatOnFocus?: boolean | undefined;
     extraOffset?: number | undefined;
+    onClear?: (() => void) | undefined;
+    clearButtonStyle?: import("react-native/types").StyleProp<import("react-native/types").ViewStyle>;
     validationMessage?: string | string[] | undefined;
     validationMessageStyle?: import("react-native/types").StyleProp<import("react-native/types").TextStyle>;
     validationIcon?: import("../icon").IconProps | undefined;
@@ -663,7 +666,6 @@ export default function usePreset({ preset, ...props }: InternalTextFieldProps):
     topTrailingAccessory?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
     bottomAccessory?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
     showClearButton?: boolean | undefined;
-    onClear?: (() => void) | undefined;
     helperText?: string | undefined;
     validateOnStart?: boolean | undefined;
     validateOnChange?: boolean | undefined;
@@ -1140,6 +1142,10 @@ export default function usePreset({ preset, ...props }: InternalTextFieldProps):
     floatingPlaceholderStyle: (false | import("react-native/types").TextStyle | import("react-native/types").RegisteredStyle<import("react-native/types").TextStyle> | import("react-native/types").RecursiveArray<import("react-native/types").TextStyle | import("react-native/types").Falsy | import("react-native/types").RegisteredStyle<import("react-native/types").TextStyle>> | null) & import("react-native/types").TextStyle;
     floatOnFocus?: boolean | undefined;
     extraOffset?: number | undefined;
+    onClear?: (() => void) | undefined;
+    clearButtonStyle: false | import("react-native/types").ViewStyle | import("react-native/types").RegisteredStyle<import("react-native/types").ViewStyle> | import("react-native/types").RecursiveArray<import("react-native/types").ViewStyle | import("react-native/types").Falsy | import("react-native/types").RegisteredStyle<import("react-native/types").ViewStyle>> | {
+        marginHorizontal: number;
+    } | null;
     validationMessage?: string | string[] | undefined;
     validationMessageStyle?: import("react-native/types").StyleProp<import("react-native/types").TextStyle>;
     validationIcon?: import("../icon").IconProps | undefined;
@@ -1152,7 +1158,497 @@ export default function usePreset({ preset, ...props }: InternalTextFieldProps):
     topTrailingAccessory?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
     bottomAccessory?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
     showClearButton?: boolean | undefined;
+    helperText?: string | undefined;
+    validateOnStart?: boolean | undefined;
+    validateOnChange?: boolean | undefined;
+    validationDebounceTime?: number | undefined;
+    validateOnBlur: boolean;
+    onValidationFailed?: ((failedValidatorIndex: number) => void) | undefined;
+    onChangeValidity?: ((isValid: boolean) => void) | undefined;
+    dynamicFieldStyle?: ((context: import("./types").FieldContextType, props: {
+        preset: string | null | undefined;
+    }) => import("react-native/types").StyleProp<import("react-native/types").ViewStyle>) | undefined;
+    containerProps?: Omit<import("../view").ViewProps, "style"> | undefined;
+    containerStyle?: import("react-native/types").StyleProp<import("react-native/types").ViewStyle>;
+    centered?: boolean | undefined;
+    innerFlexBehavior?: boolean | undefined;
+    modifiers: import("../../commons/modifiers").ExtractedStyle;
+    forwardedRef: import("react").ForwardedRef<any>;
+} | {
+    fieldStyle: (import("react-native/types").StyleProp<import("react-native/types").ViewStyle> | {
+        borderBottomWidth: number;
+        borderBottomColor: string;
+        paddingBottom: number;
+    } | {
+        borderWidth: number;
+        borderColor: string;
+        borderRadius: number;
+        paddingHorizontal: number;
+        paddingVertical: number;
+    })[];
+    margin?: boolean | undefined;
+    marginL?: boolean | undefined;
+    marginT?: boolean | undefined;
+    marginR?: boolean | undefined;
+    marginB?: boolean | undefined;
+    marginH?: boolean | undefined;
+    marginV?: boolean | undefined;
+    padding?: boolean | undefined;
+    paddingL?: boolean | undefined;
+    paddingT?: boolean | undefined;
+    paddingR?: boolean | undefined;
+    paddingB?: boolean | undefined;
+    paddingH?: boolean | undefined;
+    paddingV?: boolean | undefined;
+    text10?: boolean | undefined;
+    text20?: boolean | undefined;
+    text30?: boolean | undefined;
+    text40?: boolean | undefined;
+    text50?: boolean | undefined;
+    text60?: boolean | undefined;
+    text65?: boolean | undefined;
+    text70?: boolean | undefined;
+    text80?: boolean | undefined;
+    text90?: boolean | undefined;
+    text100?: boolean | undefined;
+    text10T?: boolean | undefined;
+    text10L?: boolean | undefined;
+    text10R?: boolean | undefined;
+    text10M?: boolean | undefined;
+    text10BO?: boolean | undefined;
+    text10H?: boolean | undefined;
+    text10BL?: boolean | undefined;
+    text20T?: boolean | undefined;
+    text20L?: boolean | undefined;
+    text20R?: boolean | undefined;
+    text20M?: boolean | undefined;
+    text20BO?: boolean | undefined;
+    text20H?: boolean | undefined;
+    text20BL?: boolean | undefined;
+    text30T?: boolean | undefined;
+    text30L?: boolean | undefined;
+    text30R?: boolean | undefined;
+    text30M?: boolean | undefined;
+    text30BO?: boolean | undefined;
+    text30H?: boolean | undefined;
+    text30BL?: boolean | undefined;
+    text40T?: boolean | undefined;
+    text40L?: boolean | undefined;
+    text40R?: boolean | undefined;
+    text40M?: boolean | undefined;
+    text40BO?: boolean | undefined;
+    text40H?: boolean | undefined;
+    text40BL?: boolean | undefined;
+    text50T?: boolean | undefined;
+    text50L?: boolean | undefined;
+    text50R?: boolean | undefined;
+    text50M?: boolean | undefined;
+    text50BO?: boolean | undefined;
+    text50H?: boolean | undefined;
+    text50BL?: boolean | undefined;
+    text60T?: boolean | undefined;
+    text60L?: boolean | undefined;
+    text60R?: boolean | undefined;
+    text60M?: boolean | undefined;
+    text60BO?: boolean | undefined;
+    text60H?: boolean | undefined;
+    text60BL?: boolean | undefined;
+    text65T?: boolean | undefined;
+    text65L?: boolean | undefined;
+    text65R?: boolean | undefined;
+    text65M?: boolean | undefined;
+    text65BO?: boolean | undefined;
+    text65H?: boolean | undefined;
+    text65BL?: boolean | undefined;
+    text70T?: boolean | undefined;
+    text70L?: boolean | undefined;
+    text70R?: boolean | undefined;
+    text70M?: boolean | undefined;
+    text70BO?: boolean | undefined;
+    text70H?: boolean | undefined;
+    text70BL?: boolean | undefined;
+    text80T?: boolean | undefined;
+    text80L?: boolean | undefined;
+    text80R?: boolean | undefined;
+    text80M?: boolean | undefined;
+    text80BO?: boolean | undefined;
+    text80H?: boolean | undefined;
+    text80BL?: boolean | undefined;
+    text90T?: boolean | undefined;
+    text90L?: boolean | undefined;
+    text90R?: boolean | undefined;
+    text90M?: boolean | undefined;
+    text90BO?: boolean | undefined;
+    text90H?: boolean | undefined;
+    text90BL?: boolean | undefined;
+    text100T?: boolean | undefined;
+    text100L?: boolean | undefined;
+    text100R?: boolean | undefined;
+    text100M?: boolean | undefined;
+    text100BO?: boolean | undefined;
+    text100H?: boolean | undefined;
+    text100BL?: boolean | undefined;
+    transparent?: boolean | undefined;
+    black?: boolean | undefined;
+    white?: boolean | undefined;
+    dark?: boolean | undefined;
+    $backgroundDefault?: boolean | undefined;
+    $backgroundElevated?: boolean | undefined;
+    $backgroundElevatedLight?: boolean | undefined;
+    $backgroundNeutralHeavy?: boolean | undefined;
+    $backgroundNeutralIdle?: boolean | undefined;
+    $backgroundNeutralMedium?: boolean | undefined;
+    $backgroundNeutral?: boolean | undefined;
+    $backgroundNeutralLight?: boolean | undefined;
+    $backgroundPrimaryHeavy?: boolean | undefined;
+    $backgroundPrimaryMedium?: boolean | undefined;
+    $backgroundPrimaryLight?: boolean | undefined;
+    $backgroundGeneralHeavy?: boolean | undefined;
+    $backgroundGeneralMedium?: boolean | undefined;
+    $backgroundGeneralLight?: boolean | undefined;
+    $backgroundSuccessHeavy?: boolean | undefined;
+    $backgroundSuccessLight?: boolean | undefined;
+    $backgroundWarningHeavy?: boolean | undefined;
+    $backgroundWarningLight?: boolean | undefined;
+    $backgroundMajorLight?: boolean | undefined;
+    $backgroundMajorHeavy?: boolean | undefined;
+    $backgroundDangerHeavy?: boolean | undefined;
+    $backgroundDangerLight?: boolean | undefined;
+    $backgroundDisabled?: boolean | undefined;
+    $backgroundDark?: boolean | undefined;
+    $backgroundDarkElevated?: boolean | undefined;
+    $backgroundDarkActive?: boolean | undefined;
+    $backgroundInverted?: boolean | undefined;
+    $textDisabled?: boolean | undefined;
+    $textDefault?: boolean | undefined;
+    $textNeutralHeavy?: boolean | undefined;
+    $textNeutral?: boolean | undefined;
+    $textNeutralLight?: boolean | undefined;
+    $textDefaultLight?: boolean | undefined;
+    $textPrimary?: boolean | undefined;
+    $textGeneral?: boolean | undefined;
+    $textSuccess?: boolean | undefined;
+    $textSuccessLight?: boolean | undefined;
+    $textMajor?: boolean | undefined;
+    $textDanger?: boolean | undefined;
+    $textDangerLight?: boolean | undefined;
+    $iconDefault?: boolean | undefined;
+    $iconNeutral?: boolean | undefined;
+    $iconDefaultLight?: boolean | undefined;
+    $iconPrimary?: boolean | undefined;
+    $iconPrimaryLight?: boolean | undefined;
+    $iconGeneral?: boolean | undefined;
+    $iconGeneralLight?: boolean | undefined;
+    $iconSuccess?: boolean | undefined;
+    $iconSuccessLight?: boolean | undefined;
+    $iconMajor?: boolean | undefined;
+    $iconDanger?: boolean | undefined;
+    $iconDangerLight?: boolean | undefined;
+    $iconDisabled?: boolean | undefined;
+    $outlineDefault?: boolean | undefined;
+    $outlineDisabled?: boolean | undefined;
+    $outlineDisabledHeavy?: boolean | undefined;
+    $outlineNeutral?: boolean | undefined;
+    $outlineNeutralHeavy?: boolean | undefined;
+    $outlinePrimary?: boolean | undefined;
+    $outlinePrimaryMedium?: boolean | undefined;
+    $outlineGeneral?: boolean | undefined;
+    $outlineWarning?: boolean | undefined;
+    $outlineDanger?: boolean | undefined;
+    $outlineInverted?: boolean | undefined;
+    $black?: boolean | undefined;
+    $white?: boolean | undefined;
+    grey1?: boolean | undefined;
+    grey5?: boolean | undefined;
+    grey10?: boolean | undefined;
+    grey20?: boolean | undefined;
+    grey30?: boolean | undefined;
+    grey40?: boolean | undefined;
+    grey50?: boolean | undefined;
+    grey60?: boolean | undefined;
+    grey70?: boolean | undefined;
+    grey80?: boolean | undefined;
+    blue1?: boolean | undefined;
+    blue5?: boolean | undefined;
+    blue10?: boolean | undefined;
+    blue20?: boolean | undefined;
+    blue30?: boolean | undefined;
+    blue40?: boolean | undefined;
+    blue50?: boolean | undefined;
+    blue60?: boolean | undefined;
+    blue70?: boolean | undefined;
+    blue80?: boolean | undefined;
+    cyan10?: boolean | undefined;
+    cyan20?: boolean | undefined;
+    cyan30?: boolean | undefined;
+    cyan40?: boolean | undefined;
+    cyan50?: boolean | undefined;
+    cyan60?: boolean | undefined;
+    cyan70?: boolean | undefined;
+    cyan80?: boolean | undefined;
+    green1?: boolean | undefined;
+    green5?: boolean | undefined;
+    green10?: boolean | undefined;
+    green20?: boolean | undefined;
+    green30?: boolean | undefined;
+    green40?: boolean | undefined;
+    green50?: boolean | undefined;
+    green60?: boolean | undefined;
+    green70?: boolean | undefined;
+    green80?: boolean | undefined;
+    yellow1?: boolean | undefined;
+    yellow5?: boolean | undefined;
+    yellow10?: boolean | undefined;
+    yellow20?: boolean | undefined;
+    yellow30?: boolean | undefined;
+    yellow40?: boolean | undefined;
+    yellow50?: boolean | undefined;
+    yellow60?: boolean | undefined;
+    yellow70?: boolean | undefined;
+    yellow80?: boolean | undefined;
+    orange1?: boolean | undefined;
+    orange5?: boolean | undefined;
+    orange10?: boolean | undefined;
+    orange20?: boolean | undefined;
+    orange30?: boolean | undefined;
+    orange40?: boolean | undefined;
+    orange50?: boolean | undefined;
+    orange60?: boolean | undefined;
+    orange70?: boolean | undefined;
+    orange80?: boolean | undefined;
+    red1?: boolean | undefined;
+    red5?: boolean | undefined;
+    red10?: boolean | undefined;
+    red20?: boolean | undefined;
+    red30?: boolean | undefined;
+    red40?: boolean | undefined;
+    red50?: boolean | undefined;
+    red60?: boolean | undefined;
+    red70?: boolean | undefined;
+    red80?: boolean | undefined;
+    purple1?: boolean | undefined;
+    purple5?: boolean | undefined;
+    purple10?: boolean | undefined;
+    purple20?: boolean | undefined;
+    purple30?: boolean | undefined;
+    purple40?: boolean | undefined;
+    purple50?: boolean | undefined;
+    purple60?: boolean | undefined;
+    purple70?: boolean | undefined;
+    purple80?: boolean | undefined;
+    violet1?: boolean | undefined;
+    violet5?: boolean | undefined;
+    violet10?: boolean | undefined;
+    violet20?: boolean | undefined;
+    violet30?: boolean | undefined;
+    violet40?: boolean | undefined;
+    violet50?: boolean | undefined;
+    violet60?: boolean | undefined;
+    violet70?: boolean | undefined;
+    violet80?: boolean | undefined;
+    hint?: string | undefined;
+    color?: import("./types").ColorType | undefined;
+    placeholderTextColor: import("./types").ColorType | {
+        default: string;
+        error: string;
+        focus: string;
+        disabled: string;
+    };
+    formatter?: ((value?: string | undefined) => string | undefined) | undefined;
+    useGestureHandlerInput?: boolean | undefined;
+    readonly?: boolean | undefined;
+    value?: string | undefined;
+    textAlign?: "left" | "right" | "center" | undefined;
+    pointerEvents?: "auto" | "none" | "box-none" | "box-only" | undefined;
+    textAlignVertical?: "auto" | "center" | "top" | "bottom" | undefined;
+    verticalAlign?: "auto" | "top" | "bottom" | "middle" | undefined;
+    selection?: {
+        start: number;
+        end?: number | undefined;
+    } | undefined;
+    children?: import("react").ReactNode;
+    style: false | import("react-native/types").TextStyle | import("react-native/types").RegisteredStyle<import("react-native/types").TextStyle> | import("react-native/types").RecursiveArray<import("react-native/types").TextStyle | import("react-native/types").Falsy | import("react-native/types").RegisteredStyle<import("react-native/types").TextStyle>> | null;
+    testID?: string | undefined;
+    removeClippedSubviews?: boolean | undefined;
+    onLayout?: ((event: import("react-native/types").LayoutChangeEvent) => void) | undefined;
+    onContentSizeChange?: ((e: import("react-native/types").NativeSyntheticEvent<import("react-native/types").TextInputContentSizeChangeEventData>) => void) | undefined;
+    onScroll?: ((e: import("react-native/types").NativeSyntheticEvent<import("react-native/types").TextInputScrollEventData>) => void) | undefined;
+    scrollEnabled?: boolean | undefined;
+    hitSlop?: import("react-native/types").Insets | undefined;
+    id?: string | undefined;
+    nativeID?: string | undefined;
+    collapsable?: boolean | undefined;
+    needsOffscreenAlphaCompositing?: boolean | undefined;
+    renderToHardwareTextureAndroid?: boolean | undefined;
+    focusable?: boolean | undefined;
+    shouldRasterizeIOS?: boolean | undefined;
+    isTVSelectable?: boolean | undefined;
+    hasTVPreferredFocus?: boolean | undefined;
+    tvParallaxProperties?: import("react-native/types").TVParallaxProperties | undefined;
+    tvParallaxShiftDistanceX?: number | undefined;
+    tvParallaxShiftDistanceY?: number | undefined;
+    tvParallaxTiltAngle?: number | undefined;
+    tvParallaxMagnification?: number | undefined;
+    onStartShouldSetResponder?: ((event: import("react-native/types").GestureResponderEvent) => boolean) | undefined;
+    onMoveShouldSetResponder?: ((event: import("react-native/types").GestureResponderEvent) => boolean) | undefined;
+    onResponderEnd?: ((event: import("react-native/types").GestureResponderEvent) => void) | undefined;
+    onResponderGrant?: ((event: import("react-native/types").GestureResponderEvent) => void) | undefined;
+    onResponderReject?: ((event: import("react-native/types").GestureResponderEvent) => void) | undefined;
+    onResponderMove?: ((event: import("react-native/types").GestureResponderEvent) => void) | undefined;
+    onResponderRelease?: ((event: import("react-native/types").GestureResponderEvent) => void) | undefined;
+    onResponderStart?: ((event: import("react-native/types").GestureResponderEvent) => void) | undefined;
+    onResponderTerminationRequest?: ((event: import("react-native/types").GestureResponderEvent) => boolean) | undefined;
+    onResponderTerminate?: ((event: import("react-native/types").GestureResponderEvent) => void) | undefined;
+    onStartShouldSetResponderCapture?: ((event: import("react-native/types").GestureResponderEvent) => boolean) | undefined;
+    onMoveShouldSetResponderCapture?: ((event: import("react-native/types").GestureResponderEvent) => boolean) | undefined;
+    onTouchStart?: ((event: import("react-native/types").GestureResponderEvent) => void) | undefined;
+    onTouchMove?: ((event: import("react-native/types").GestureResponderEvent) => void) | undefined;
+    onTouchEnd?: ((event: import("react-native/types").GestureResponderEvent) => void) | undefined;
+    onTouchCancel?: ((event: import("react-native/types").GestureResponderEvent) => void) | undefined;
+    onTouchEndCapture?: ((event: import("react-native/types").GestureResponderEvent) => void) | undefined;
+    onPointerEnter?: ((event: import("react-native/types").PointerEvent) => void) | undefined;
+    onPointerEnterCapture?: ((event: import("react-native/types").PointerEvent) => void) | undefined;
+    onPointerLeave?: ((event: import("react-native/types").PointerEvent) => void) | undefined;
+    onPointerLeaveCapture?: ((event: import("react-native/types").PointerEvent) => void) | undefined;
+    onPointerMove?: ((event: import("react-native/types").PointerEvent) => void) | undefined;
+    onPointerMoveCapture?: ((event: import("react-native/types").PointerEvent) => void) | undefined;
+    onPointerCancel?: ((event: import("react-native/types").PointerEvent) => void) | undefined;
+    onPointerCancelCapture?: ((event: import("react-native/types").PointerEvent) => void) | undefined;
+    onPointerDown?: ((event: import("react-native/types").PointerEvent) => void) | undefined;
+    onPointerDownCapture?: ((event: import("react-native/types").PointerEvent) => void) | undefined;
+    onPointerUp?: ((event: import("react-native/types").PointerEvent) => void) | undefined;
+    onPointerUpCapture?: ((event: import("react-native/types").PointerEvent) => void) | undefined;
+    accessible?: boolean | undefined;
+    accessibilityActions?: readonly Readonly<{
+        name: string;
+        label?: string | undefined;
+    }>[] | undefined;
+    accessibilityLabel?: string | undefined;
+    'aria-label'?: string | undefined;
+    accessibilityRole?: import("react-native/types").AccessibilityRole | undefined;
+    accessibilityState?: import("react-native/types").AccessibilityState | undefined;
+    'aria-busy'?: boolean | undefined;
+    'aria-checked'?: boolean | "mixed" | undefined;
+    'aria-disabled'?: boolean | undefined;
+    'aria-expanded'?: boolean | undefined;
+    'aria-selected'?: boolean | undefined;
+    'aria-labelledby'?: string | undefined;
+    accessibilityHint?: string | undefined;
+    accessibilityValue?: import("react-native/types").AccessibilityValue | undefined;
+    'aria-valuemax'?: number | undefined;
+    'aria-valuemin'?: number | undefined;
+    'aria-valuenow'?: number | undefined;
+    'aria-valuetext'?: string | undefined;
+    onAccessibilityAction?: ((event: import("react-native/types").AccessibilityActionEvent) => void) | undefined;
+    importantForAccessibility?: "auto" | "yes" | "no" | "no-hide-descendants" | undefined;
+    'aria-hidden'?: boolean | undefined;
+    'aria-live'?: "polite" | "assertive" | "off" | undefined;
+    'aria-modal'?: boolean | undefined;
+    role?: import("react-native/types").Role | undefined;
+    accessibilityLiveRegion?: "none" | "polite" | "assertive" | undefined;
+    accessibilityLabelledBy?: string | string[] | undefined;
+    accessibilityElementsHidden?: boolean | undefined;
+    accessibilityViewIsModal?: boolean | undefined;
+    onAccessibilityEscape?: (() => void) | undefined;
+    onAccessibilityTap?: (() => void) | undefined;
+    onMagicTap?: (() => void) | undefined;
+    accessibilityIgnoresInvertColors?: boolean | undefined;
+    accessibilityLanguage?: string | undefined;
+    onPressIn?: ((e: import("react-native/types").NativeSyntheticEvent<import("react-native/types").NativeTouchEvent>) => void) | undefined;
+    onPressOut?: ((e: import("react-native/types").NativeSyntheticEvent<import("react-native/types").NativeTouchEvent>) => void) | undefined;
+    onBlur?: ((e: import("react-native/types").NativeSyntheticEvent<import("react-native/types").TextInputFocusEventData>) => void) | undefined;
+    onFocus?: ((e: import("react-native/types").NativeSyntheticEvent<import("react-native/types").TextInputFocusEventData>) => void) | undefined;
+    allowFontScaling?: boolean | undefined;
+    numberOfLines?: number | undefined;
+    maxFontSizeMultiplier?: number | null | undefined;
+    lineBreakStrategyIOS?: "none" | "standard" | "hangul-word" | "push-out" | undefined;
+    selectionColor?: import("react-native/types").ColorValue | undefined;
+    textBreakStrategy?: "simple" | "highQuality" | "balanced" | undefined;
+    autoCapitalize?: "none" | "sentences" | "words" | "characters" | undefined;
+    autoComplete?: "name" | "off" | "email" | "url" | "additional-name" | "address-line1" | "address-line2" | "birthdate-day" | "birthdate-full" | "birthdate-month" | "birthdate-year" | "cc-csc" | "cc-exp" | "cc-exp-day" | "cc-exp-month" | "cc-exp-year" | "cc-number" | "cc-name" | "cc-given-name" | "cc-middle-name" | "cc-family-name" | "cc-type" | "country" | "current-password" | "family-name" | "gender" | "given-name" | "honorific-prefix" | "honorific-suffix" | "name-family" | "name-given" | "name-middle" | "name-middle-initial" | "name-prefix" | "name-suffix" | "new-password" | "nickname" | "one-time-code" | "organization" | "organization-title" | "password" | "password-new" | "postal-address" | "postal-address-country" | "postal-address-extended" | "postal-address-extended-postal-code" | "postal-address-locality" | "postal-address-region" | "postal-code" | "street-address" | "sms-otp" | "tel" | "tel-country-code" | "tel-national" | "tel-device" | "username" | "username-new" | undefined;
+    autoCorrect?: boolean | undefined;
+    autoFocus?: boolean | undefined;
+    blurOnSubmit?: boolean | undefined;
+    caretHidden?: boolean | undefined;
+    contextMenuHidden?: boolean | undefined;
+    defaultValue?: string | undefined;
+    editable?: boolean | undefined;
+    keyboardType?: import("react-native/types").KeyboardTypeOptions | undefined;
+    inputMode?: import("react-native/types").InputModeOptions | undefined;
+    maxLength?: number | undefined;
+    multiline?: boolean | undefined;
+    onChange?: ((e: import("react-native/types").NativeSyntheticEvent<import("react-native/types").TextInputChangeEventData>) => void) | undefined;
+    onChangeText?: ((text: string) => void) | undefined;
+    onEndEditing?: ((e: import("react-native/types").NativeSyntheticEvent<import("react-native/types").TextInputEndEditingEventData>) => void) | undefined;
+    onSelectionChange?: ((e: import("react-native/types").NativeSyntheticEvent<import("react-native/types").TextInputSelectionChangeEventData>) => void) | undefined;
+    onSubmitEditing?: ((e: import("react-native/types").NativeSyntheticEvent<import("react-native/types").TextInputSubmitEditingEventData>) => void) | undefined;
+    onTextInput?: ((e: import("react-native/types").NativeSyntheticEvent<import("react-native/types").TextInputTextInputEventData>) => void) | undefined;
+    onKeyPress?: ((e: import("react-native/types").NativeSyntheticEvent<import("react-native/types").TextInputKeyPressEventData>) => void) | undefined;
+    placeholder?: string | undefined;
+    readOnly?: boolean | undefined;
+    returnKeyType?: import("react-native/types").ReturnKeyTypeOptions | undefined;
+    enterKeyHint?: import("react-native/types").EnterKeyHintTypeOptions | undefined;
+    secureTextEntry?: boolean | undefined;
+    selectTextOnFocus?: boolean | undefined;
+    inputAccessoryViewID?: string | undefined;
+    clearButtonMode?: "always" | "never" | "while-editing" | "unless-editing" | undefined;
+    clearTextOnFocus?: boolean | undefined;
+    dataDetectorTypes?: import("react-native/types").DataDetectorTypes | import("react-native/types").DataDetectorTypes[] | undefined;
+    enablesReturnKeyAutomatically?: boolean | undefined;
+    keyboardAppearance?: "default" | "light" | "dark" | undefined;
+    passwordRules?: string | null | undefined;
+    rejectResponderTermination?: boolean | null | undefined;
+    selectionState?: import("react-native/types").DocumentSelectionState | undefined;
+    spellCheck?: boolean | undefined;
+    textContentType?: "none" | "name" | "nickname" | "password" | "username" | "URL" | "addressCity" | "addressCityAndState" | "addressState" | "countryName" | "creditCardNumber" | "creditCardExpiration" | "creditCardExpirationMonth" | "creditCardExpirationYear" | "creditCardSecurityCode" | "creditCardType" | "creditCardName" | "creditCardGivenName" | "creditCardMiddleName" | "creditCardFamilyName" | "emailAddress" | "familyName" | "fullStreetAddress" | "givenName" | "jobTitle" | "location" | "middleName" | "namePrefix" | "nameSuffix" | "organizationName" | "postalCode" | "streetAddressLine1" | "streetAddressLine2" | "sublocality" | "telephoneNumber" | "newPassword" | "oneTimeCode" | "birthdate" | "birthdateDay" | "birthdateMonth" | "birthdateYear" | undefined;
+    smartInsertDelete?: boolean | undefined;
+    cursorColor?: import("react-native/types").ColorValue | null | undefined;
+    importantForAutofill?: "auto" | "yes" | "no" | "noExcludeDescendants" | "yesExcludeDescendants" | undefined;
+    disableFullscreenUI?: boolean | undefined;
+    inlineImageLeft?: string | undefined;
+    inlineImagePadding?: number | undefined;
+    returnKeyLabel?: string | undefined;
+    underlineColorAndroid?: import("react-native/types").ColorValue | undefined;
+    showSoftInputOnFocus?: boolean | undefined;
+    showMandatoryIndication?: boolean | undefined;
+    recorderTag?: import("../../typings/recorderTypes").RecorderTag | undefined;
+    label?: string | undefined;
+    labelColor: import("./types").ColorType | {
+        focus: string;
+        error: string;
+        disabled: string;
+        readonly: string;
+    };
+    labelStyle?: import("react-native/types").StyleProp<import("react-native/types").TextStyle>;
+    labelProps?: import("../text").TextProps | undefined;
+    validationMessagePosition?: import("./types").ValidationMessagePositionType | undefined;
+    floatingPlaceholder?: boolean | undefined;
+    enableErrors: boolean;
+    floatingPlaceholderColor: import("./types").ColorType | {
+        focus: string;
+        error: string;
+        disabled: string;
+        readonly: string;
+    };
+    floatingPlaceholderStyle: (false | import("react-native/types").TextStyle | import("react-native/types").RegisteredStyle<import("react-native/types").TextStyle> | import("react-native/types").RecursiveArray<import("react-native/types").TextStyle | import("react-native/types").Falsy | import("react-native/types").RegisteredStyle<import("react-native/types").TextStyle>> | null) & import("react-native/types").TextStyle;
+    floatOnFocus?: boolean | undefined;
+    extraOffset?: number | undefined;
     onClear?: (() => void) | undefined;
+    clearButtonStyle: false | import("react-native/types").ViewStyle | import("react-native/types").RegisteredStyle<import("react-native/types").ViewStyle> | import("react-native/types").RecursiveArray<import("react-native/types").ViewStyle | import("react-native/types").Falsy | import("react-native/types").RegisteredStyle<import("react-native/types").ViewStyle>> | {
+        marginLeft: number;
+    } | null;
+    validationMessage?: string | string[] | undefined;
+    validationMessageStyle?: import("react-native/types").StyleProp<import("react-native/types").TextStyle>;
+    validationIcon?: import("../icon").IconProps | undefined;
+    retainValidationSpace?: boolean | undefined;
+    validate?: import("./types").Validator | import("./types").Validator[] | undefined;
+    showCharCounter?: boolean | undefined;
+    charCounterStyle?: import("react-native/types").TextStyle | undefined;
+    leadingAccessory?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+    trailingAccessory?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+    topTrailingAccessory?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+    bottomAccessory?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+    showClearButton?: boolean | undefined;
     helperText?: string | undefined;
     validateOnStart?: boolean | undefined;
     validateOnChange?: boolean | undefined;

package/src/index.d.ts

@@ -68,6 +68,7 @@ export { default as PanningProvider, PanningDirections, PanLocationProps, PanAmo
 export { default as PanResponderView, PanResponderViewProps } from './components/panningViews/panResponderView';
 export { default as asPanViewConsumer } from './components/panningViews/asPanViewConsumer';
 export { default as Picker, PickerProps, PickerItemProps, PickerValue, PickerModes, PickerFieldTypes, PickerSearchStyle, RenderCustomModalProps, PickerItemsListProps, PickerMethods } from './components/picker';
+export { default as PieChart, PieChartSegmentProps } from './components/pieChart';
 export { default as ProgressBar, ProgressBarProps } from './components/progressBar';
 export { default as ProgressiveImage, ProgressiveImageProps } from './components/progressiveImage';
 export { default as RadioButton, RadioButtonProps } from './components/radioButton';

package/src/index.js

@@ -166,6 +166,8 @@ var _exportNames = {
   RenderCustomModalProps: true,
   PickerItemsListProps: true,
   PickerMethods: true,
+  PieChart: true,
+  PieChartSegmentProps: true,
   ProgressBar: true,
   ProgressBarProps: true,
   ProgressiveImage: true,
@@ -1114,6 +1116,18 @@ Object.defineProperty(exports, "PickerValue", {
     return _picker().PickerValue;
   }
 });
+Object.defineProperty(exports, "PieChart", {
+  enumerable: true,
+  get: function () {
+    return _pieChart().default;
+  }
+});
+Object.defineProperty(exports, "PieChartSegmentProps", {
+  enumerable: true,
+  get: function () {
+    return _pieChart().PieChartSegmentProps;
+  }
+});
 Object.defineProperty(exports, "Profiler", {
   enumerable: true,
   get: function () {
@@ -2137,6 +2151,13 @@ function _picker() {
   };
   return data;
 }
+function _pieChart() {
+  const data = _interopRequireWildcard(require("./components/pieChart"));
+  _pieChart = function () {
+    return data;
+  };
+  return data;
+}
 function _progressBar() {
   const data = _interopRequireWildcard(require("./components/progressBar"));
   _progressBar = function () {