@hero-design/rn 8.22.0 → 8.23.0

package/src/components/TextInput/__tests__/__snapshots__/index.spec.tsx.snap

@@ -2692,6 +2692,271 @@ exports[`TextInput max length renders correctly 1`] = `
 </View>
 `;
 
+exports[`TextInput max length renders correctly with hide character count 1`] = `
+<View
+  pointerEvents="auto"
+  style={
+    Array [
+      Object {
+        "marginTop": 8,
+        "width": "100%",
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    style={
+      Array [
+        Object {
+          "alignItems": "center",
+          "backgroundColor": "#ffffff",
+          "borderRadius": 8,
+          "flexDirection": "row",
+          "padding": 16,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "borderColor": "#de350b",
+            "borderRadius": 8,
+            "borderWidth": 1,
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+          Array [
+            Object {
+              "backgroundColor": "#ffffff",
+            },
+            undefined,
+          ],
+        ]
+      }
+      testID="text-input-border"
+      themeFocused={false}
+      themeVariant="error"
+    />
+    <View
+      pointerEvents="none"
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#ffffff",
+            "flexDirection": "row",
+            "left": 16,
+            "paddingHorizontal": 4,
+            "position": "absolute",
+            "top": -10,
+            "zIndex": 1,
+          },
+          Object {
+            "backgroundColor": "#ffffff",
+          },
+        ]
+      }
+      testID="label-container"
+    >
+      <Text
+        allowFontScaling={false}
+        style={
+          Array [
+            Object {
+              "color": "#001f23",
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 12,
+              "letterSpacing": 0.36,
+              "lineHeight": 20,
+            },
+            Array [
+              Object {
+                "color": "#de350b",
+              },
+              undefined,
+            ],
+          ]
+        }
+        themeFontSize="small"
+        themeFontWeight="regular"
+        themeIntent="body"
+        themeTypeface="neutral"
+        themeVariant="error"
+      >
+        *
+      </Text>
+      <Text
+        allowFontScaling={false}
+        style={
+          Array [
+            Object {
+              "color": "#001f23",
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 12,
+              "letterSpacing": 0.36,
+              "lineHeight": 20,
+            },
+            Array [
+              Object {
+                "color": "#001f23",
+              },
+              Object {
+                "backgroundColor": "#ffffff",
+              },
+            ],
+          ]
+        }
+        testID="input-label"
+        themeFontSize="small"
+        themeFontWeight="regular"
+        themeIntent="body"
+        themeTypeface="neutral"
+        themeVariant="error"
+      >
+        Shout out
+      </Text>
+    </View>
+    <View
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "alignSelf": "stretch",
+            "flexDirection": "row",
+            "flexGrow": 2,
+            "flexShrink": 1,
+          },
+          undefined,
+        ]
+      }
+    >
+      <TextInput
+        accessibilityState={
+          Object {
+            "disabled": false,
+          }
+        }
+        allowFontScaling={false}
+        editable={true}
+        maxLength={255}
+        multiline={true}
+        onBlur={[Function]}
+        onChangeText={[Function]}
+        onFocus={[Function]}
+        placeholder=" "
+        style={
+          Array [
+            Object {
+              "alignSelf": "stretch",
+              "flexGrow": 2,
+              "fontSize": 14,
+              "marginHorizontal": 8,
+              "paddingVertical": 0,
+              "textAlignVertical": "center",
+            },
+            Object {
+              "backgroundColor": "#ffffff",
+              "color": "#001f23",
+            },
+          ]
+        }
+        testID="text-input"
+        value="shout out Tung Van"
+      />
+    </View>
+  </View>
+  <View
+    style={
+      Array [
+        Object {
+          "minHeight": 16,
+          "paddingLeft": 16,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "flexDirection": "row",
+            "justifyContent": "space-between",
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        style={
+          Array [
+            Object {
+              "alignItems": "center",
+              "flex": 1,
+              "flexDirection": "row",
+              "flexGrow": 4,
+              "marginRight": 4,
+            },
+            undefined,
+          ]
+        }
+      >
+        <HeroIcon
+          name="circle-info"
+          style={
+            Array [
+              Object {
+                "color": "#de350b",
+                "fontSize": 16,
+              },
+              undefined,
+            ]
+          }
+          testID="input-error-icon"
+          themeIntent="danger"
+          themeSize="xsmall"
+        />
+        <Text
+          allowFontScaling={false}
+          style={
+            Array [
+              Object {
+                "color": "#001f23",
+                "fontFamily": "BeVietnamPro-Regular",
+                "fontSize": 14,
+                "letterSpacing": 0.42,
+                "lineHeight": 22,
+              },
+              Array [
+                Object {
+                  "color": "#de350b",
+                  "fontSize": 12,
+                  "marginLeft": 4,
+                },
+                undefined,
+              ],
+            ]
+          }
+          testID="input-error-message"
+          themeFontSize="medium"
+          themeFontWeight="regular"
+          themeIntent="body"
+          themeTypeface="neutral"
+        >
+          must not exceed character limit
+        </Text>
+      </View>
+    </View>
+  </View>
+</View>
+`;
+
 exports[`TextInput placeholder TextInput is idle renders correctly 1`] = `
 <View
   pointerEvents="auto"

package/src/components/TextInput/__tests__/index.spec.tsx

@@ -250,6 +250,35 @@ describe('TextInput', () => {
 
       expect(getByTestId('text-input')).not.toHaveProp('multiline', 'true');
     });
+
+    it('renders correctly with hide character count', () => {
+      const {
+        toJSON,
+        queryAllByTestId,
+        queryAllByText,
+        queryAllByDisplayValue,
+        getByTestId,
+      } = renderWithTheme(
+        <TextInput
+          label="Shout out"
+          value="shout out Tung Van"
+          required
+          maxLength={255}
+          multiline
+          error="must not exceed character limit"
+          hideCharacterCount
+        />
+      );
+
+      expect(toJSON()).toMatchSnapshot();
+      expect(queryAllByText('Shout out')).toHaveLength(1);
+      expect(queryAllByDisplayValue('shout out Tung Van')).toHaveLength(1);
+      expect(queryAllByText('18/255')).toHaveLength(0);
+      expect(queryAllByTestId('input-label')).toHaveLength(1);
+      expect(queryAllByTestId('text-input')).toHaveLength(1);
+
+      expect(getByTestId('text-input')).not.toHaveProp('multiline', 'true');
+    });
   });
 
   describe('disabled', () => {

package/src/components/TextInput/index.tsx

@@ -94,6 +94,10 @@ export interface TextInputProps extends NativeTextInputProps {
    * If the max length is set, the input will display the current length and the max length.
    * */
   maxLength?: number;
+  /**
+   * Whether to hide the character count.
+   * */
+  hideCharacterCount?: boolean;
   /**
    * The helper text to display.
    */
@@ -157,6 +161,7 @@ const TextInput = forwardRef<TextInputHandles, TextInputProps>(
       disabled = false,
       loading = false,
       maxLength,
+      hideCharacterCount = false,
       helpText,
       value,
       defaultValue,
@@ -181,7 +186,7 @@ const TextInput = forwardRef<TextInputHandles, TextInputProps>(
       isEmptyValue,
     });
 
-    const shouldShowMaxLength = maxLength !== undefined;
+    const shouldShowMaxLength = maxLength !== undefined && !hideCharacterCount;
 
     const theme = useTheme();
 

package/src/index.ts

@@ -46,6 +46,7 @@ import Radio from './components/Radio';
 import SectionHeading from './components/SectionHeading';
 import Select from './components/Select';
 import Skeleton from './components/Skeleton';
+import Success from './components/Success';
 import Switch from './components/Switch';
 import Tabs from './components/Tabs';
 import Tag from './components/Tag';
@@ -107,6 +108,7 @@ export {
   Radio,
   SectionHeading,
   Select,
+  Success,
   Switch,
   Tabs,
   Tag,

package/src/theme/__tests__/__snapshots__/index.spec.ts.snap

@@ -417,7 +417,7 @@ Object {
       },
       "space": Object {
         "imageMargin": 24,
-        "titleMargin": 16,
+        "titleMargin": 8,
         "wrapperPadding": 16,
       },
     },
@@ -446,7 +446,7 @@ Object {
           "wrapperHorizontalPadding": 16,
           "wrapperVerticalPadding": 48,
         },
-        "imageMarginBottom": 32,
+        "imageMarginBottom": 24,
         "titleMarginBottom": 8,
         "wrapperPadding": 24,
       },
@@ -793,6 +793,36 @@ Object {
         },
       },
     },
+    "success": Object {
+      "colors": Object {
+        "description": "#4d6265",
+        "fullScreenBackground": "#ccd2d3",
+        "inPageBackground": "#f6f6f7",
+        "title": "#001f23",
+      },
+      "fontSizes": Object {
+        "description": 18,
+        "title": 24,
+      },
+      "fonts": Object {
+        "description": "RebondGrotesque",
+        "title": "RebondGrotesque-SemiBold",
+      },
+      "sizes": Object {
+        "image": 176,
+      },
+      "space": Object {
+        "button": Object {
+          "margin": 16,
+          "padding": 16,
+          "wrapperHorizontalPadding": 16,
+          "wrapperVerticalPadding": 48,
+        },
+        "imageMarginBottom": 32,
+        "titleMarginBottom": 8,
+        "wrapperPadding": 24,
+      },
+    },
     "swipeable": Object {
       "colors": Object {
         "danger": "#f46363",
@@ -874,7 +904,7 @@ Object {
         "dangerBackground": "#fcebe7",
         "info": "#4568fb",
         "infoBackground": "#ecf0ff",
-        "primary": "#401960",
+        "primary": "#001f23",
         "primaryBackground": undefined,
         "success": "#017d6d",
         "successBackground": "#f0fef4",

package/src/theme/components/empty.ts

@@ -2,7 +2,7 @@ import type { GlobalTheme } from '../global';
 
 const getEmptyTheme = (theme: GlobalTheme) => {
   const space = {
-    titleMargin: theme.space.medium,
+    titleMargin: theme.space.small,
     imageMargin: theme.space.large,
     wrapperPadding: theme.space.medium,
   };

package/src/theme/components/error.ts

@@ -3,7 +3,7 @@ import type { GlobalTheme } from '../global';
 const getErrorTheme = (theme: GlobalTheme) => {
   const space = {
     titleMarginBottom: theme.space.small,
-    imageMarginBottom: theme.space.xlarge,
+    imageMarginBottom: theme.space.large,
     wrapperPadding: theme.space.large,
     button: {
       wrapperHorizontalPadding: theme.space.medium,

package/src/theme/components/success.ts

@@ -0,0 +1,40 @@
+import type { GlobalTheme } from '../global';
+
+const getSuccessTheme = (theme: GlobalTheme) => {
+  const space = {
+    titleMarginBottom: theme.space.small,
+    imageMarginBottom: theme.space.xlarge,
+    wrapperPadding: theme.space.large,
+    button: {
+      wrapperHorizontalPadding: theme.space.medium,
+      wrapperVerticalPadding: theme.space.xxxlarge,
+      margin: theme.space.medium,
+      padding: theme.space.medium,
+    },
+  };
+
+  const sizes = {
+    image: theme.sizes['19xlarge'],
+  };
+
+  const colors = {
+    title: theme.colors.onDefaultGlobalSurface,
+    description: theme.colors.mutedOnDefaultGlobalSurface,
+    fullScreenBackground: theme.colors.decorativePrimarySurface,
+    inPageBackground: theme.colors.neutralGlobalSurface,
+  };
+
+  const fontSizes = {
+    title: theme.fontSizes.xxxlarge,
+    description: theme.fontSizes.xlarge,
+  };
+
+  const fonts = {
+    title: theme.fonts.playful.semiBold,
+    description: theme.fonts.playful.regular,
+  };
+
+  return { fontSizes, colors, sizes, space, fonts };
+};
+
+export default getSuccessTheme;

package/src/theme/components/tag.ts

@@ -6,7 +6,7 @@ const getTagTheme = (theme: GlobalTheme) => {
   };
 
   const colors = {
-    primary: theme.colors.primary,
+    primary: theme.colors.onDefaultGlobalSurface,
     primaryBackground: undefined,
     info: theme.colors.onInfoSurface,
     infoBackground: theme.colors.infoSurface,

package/src/theme/getTheme.ts

@@ -34,6 +34,7 @@ import getSelectTheme from './components/select';
 import getSkeletonTheme from './components/skeleton';
 import getSliderTheme from './components/slider';
 import getSpinnerTheme from './components/spinner';
+import getSuccessTheme from './components/success';
 import getSwipeableTheme from './components/swipeable';
 import getSwitchTheme from './components/switch';
 import getTabsTheme from './components/tabs';
@@ -82,6 +83,7 @@ type Theme = GlobalTheme & {
     skeleton: ReturnType<typeof getSkeletonTheme>;
     slider: ReturnType<typeof getSliderTheme>;
     spinner: ReturnType<typeof getSpinnerTheme>;
+    success: ReturnType<typeof getSuccessTheme>;
     swipeable: ReturnType<typeof getSwipeableTheme>;
     switch: ReturnType<typeof getSwitchTheme>;
     tabs: ReturnType<typeof getTabsTheme>;
@@ -136,6 +138,7 @@ const getTheme = (
       skeleton: getSkeletonTheme(globalTheme),
       slider: getSliderTheme(globalTheme),
       spinner: getSpinnerTheme(globalTheme),
+      success: getSuccessTheme(globalTheme),
       swipeable: getSwipeableTheme(globalTheme),
       switch: getSwitchTheme(globalTheme),
       tabs: getTabsTheme(globalTheme),

package/src/utils/hooks.ts

@@ -23,7 +23,7 @@ export const useDeprecation = (message: string, cond = true) => {
   useEffect(() => {
     // eslint-disable-next-line no-console
     if (cond) {
-      console.error(message);
+      console.warn(message);
     }
   }, [message, cond]);
 };

package/types/components/Success/StyledSuccess.d.ts

@@ -0,0 +1,54 @@
+/// <reference types="react" />
+import { Modal, View } from 'react-native';
+declare type SuccessVariant = 'full-screen' | 'in-page';
+declare const StyledSuccessContainer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    themeVariant: SuccessVariant;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+declare const StyledSuccessImage: import("@emotion/native").StyledComponent<import("../Image").ImageProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {}>;
+declare const StyledSuccessContent: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+declare const StyledSuccessImageContainer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+declare const StyledSuccessTitle: import("@emotion/native").StyledComponent<import("../..").TextProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {}>;
+declare const StyledSuccessDescription: import("@emotion/native").StyledComponent<import("../..").TextProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {}>;
+declare const StyledSuccessButtonContainer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+declare const StyledSuccessButtonPrimary: import("@emotion/native").StyledComponent<import("../Button/Button").ButtonProps & {
+    children?: import("react").ReactNode;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {}>;
+declare const StyledSuccessModal: import("@emotion/native").StyledComponent<import("react-native").ModalBaseProps & import("react-native").ModalPropsIOS & import("react-native").ModalPropsAndroid & import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {
+    ref?: import("react").Ref<Modal> | undefined;
+}>;
+export { SuccessVariant, StyledSuccessImage, StyledSuccessContainer, StyledSuccessContent, StyledSuccessImageContainer, StyledSuccessTitle, StyledSuccessDescription, StyledSuccessButtonContainer, StyledSuccessButtonPrimary, StyledSuccessModal, };

package/types/components/Success/index.d.ts

@@ -0,0 +1,42 @@
+import { ReactElement } from 'react';
+import type { ViewProps, ImageSourcePropType, ImageProps as RNImageProps } from 'react-native';
+import { SuccessVariant } from './StyledSuccess';
+import { ImageProps } from '../Image';
+export interface SuccessProps extends ViewProps {
+    /**
+     * Image to be displayed.
+     */
+    image?: ReactElement<ImageProps | RNImageProps> | ImageSourcePropType | string;
+    /**
+     * Success's title.
+     */
+    title: string;
+    /**
+     * Success's description.
+     */
+    description?: string;
+    /**
+     * Success's variant.
+     */
+    variant?: SuccessVariant;
+    /**
+     * Action button text
+     */
+    ctaText?: string;
+    /**
+     * Callback when the action button is pressed.
+     */
+    onCtaPress?: () => void;
+    /**
+     * Testing id of the component.
+     */
+    testID?: string;
+}
+/**
+ * Renders success page
+ *
+ * @param {SuccessProps} props
+ * @return {*}  {ReactElement}
+ */
+declare const Success: (props: SuccessProps) => ReactElement;
+export default Success;

package/types/components/TextInput/index.d.ts

@@ -62,6 +62,10 @@ export interface TextInputProps extends NativeTextInputProps {
      * If the max length is set, the input will display the current length and the max length.
      * */
     maxLength?: number;
+    /**
+     * Whether to hide the character count.
+     * */
+    hideCharacterCount?: boolean;
     /**
      * The helper text to display.
      */
@@ -83,5 +87,5 @@ export declare const getVariant: ({ disabled, error, editable, loading, isEmptyV
     isFocused?: boolean | undefined;
     isEmptyValue?: boolean | undefined;
 }) => Variant;
-declare const TextInput: React.ForwardRefExoticComponent<Pick<TextInputProps, "children" | "label" | "style" | "hitSlop" | "onLayout" | "pointerEvents" | "removeClippedSubviews" | "testID" | "nativeID" | "collapsable" | "needsOffscreenAlphaCompositing" | "renderToHardwareTextureAndroid" | "focusable" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxProperties" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "onStartShouldSetResponder" | "onMoveShouldSetResponder" | "onResponderEnd" | "onResponderGrant" | "onResponderReject" | "onResponderMove" | "onResponderRelease" | "onResponderStart" | "onResponderTerminationRequest" | "onResponderTerminate" | "onStartShouldSetResponderCapture" | "onMoveShouldSetResponderCapture" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onTouchEndCapture" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "accessibilityRole" | "accessibilityState" | "accessibilityHint" | "accessibilityValue" | "onAccessibilityAction" | "accessibilityLiveRegion" | "importantForAccessibility" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "disabled" | "value" | "onBlur" | "onFocus" | "onPressIn" | "onPressOut" | "allowFontScaling" | "numberOfLines" | "maxFontSizeMultiplier" | "selectionColor" | "textBreakStrategy" | "loading" | "accessibilityLabelledBy" | "textAlign" | "error" | "textAlignVertical" | "onContentSizeChange" | "onScroll" | "scrollEnabled" | "onChange" | "autoCapitalize" | "autoCorrect" | "autoFocus" | "blurOnSubmit" | "caretHidden" | "contextMenuHidden" | "defaultValue" | "editable" | "keyboardType" | "maxLength" | "multiline" | "onChangeText" | "onEndEditing" | "onSelectionChange" | "onSubmitEditing" | "onTextInput" | "onKeyPress" | "placeholder" | "placeholderTextColor" | "returnKeyType" | "secureTextEntry" | "selectTextOnFocus" | "selection" | "inputAccessoryViewID" | "clearButtonMode" | "clearTextOnFocus" | "dataDetectorTypes" | "enablesReturnKeyAutomatically" | "keyboardAppearance" | "passwordRules" | "rejectResponderTermination" | "selectionState" | "spellCheck" | "textContentType" | "autoComplete" | "importantForAutofill" | "disableFullscreenUI" | "inlineImageLeft" | "inlineImagePadding" | "returnKeyLabel" | "underlineColorAndroid" | "showSoftInputOnFocus" | "prefix" | "suffix" | "textStyle" | "required" | "helpText" | "renderInputValue"> & React.RefAttributes<TextInputHandles>>;
+declare const TextInput: React.ForwardRefExoticComponent<Pick<TextInputProps, "children" | "label" | "style" | "hitSlop" | "onLayout" | "pointerEvents" | "removeClippedSubviews" | "testID" | "nativeID" | "collapsable" | "needsOffscreenAlphaCompositing" | "renderToHardwareTextureAndroid" | "focusable" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxProperties" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "onStartShouldSetResponder" | "onMoveShouldSetResponder" | "onResponderEnd" | "onResponderGrant" | "onResponderReject" | "onResponderMove" | "onResponderRelease" | "onResponderStart" | "onResponderTerminationRequest" | "onResponderTerminate" | "onStartShouldSetResponderCapture" | "onMoveShouldSetResponderCapture" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onTouchEndCapture" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "accessibilityRole" | "accessibilityState" | "accessibilityHint" | "accessibilityValue" | "onAccessibilityAction" | "accessibilityLiveRegion" | "importantForAccessibility" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "disabled" | "value" | "onBlur" | "onFocus" | "onPressIn" | "onPressOut" | "allowFontScaling" | "numberOfLines" | "maxFontSizeMultiplier" | "selectionColor" | "textBreakStrategy" | "loading" | "accessibilityLabelledBy" | "textAlign" | "error" | "textAlignVertical" | "onContentSizeChange" | "onScroll" | "scrollEnabled" | "onChange" | "autoCapitalize" | "autoCorrect" | "autoFocus" | "blurOnSubmit" | "caretHidden" | "contextMenuHidden" | "defaultValue" | "editable" | "keyboardType" | "maxLength" | "multiline" | "onChangeText" | "onEndEditing" | "onSelectionChange" | "onSubmitEditing" | "onTextInput" | "onKeyPress" | "placeholder" | "placeholderTextColor" | "returnKeyType" | "secureTextEntry" | "selectTextOnFocus" | "selection" | "inputAccessoryViewID" | "clearButtonMode" | "clearTextOnFocus" | "dataDetectorTypes" | "enablesReturnKeyAutomatically" | "keyboardAppearance" | "passwordRules" | "rejectResponderTermination" | "selectionState" | "spellCheck" | "textContentType" | "autoComplete" | "importantForAutofill" | "disableFullscreenUI" | "inlineImageLeft" | "inlineImagePadding" | "returnKeyLabel" | "underlineColorAndroid" | "showSoftInputOnFocus" | "prefix" | "suffix" | "textStyle" | "required" | "hideCharacterCount" | "helpText" | "renderInputValue"> & React.RefAttributes<TextInputHandles>>;
 export default TextInput;

package/types/index.d.ts

@@ -33,6 +33,7 @@ import Radio from './components/Radio';
 import SectionHeading from './components/SectionHeading';
 import Select from './components/Select';
 import Skeleton from './components/Skeleton';
+import Success from './components/Success';
 import Switch from './components/Switch';
 import Tabs from './components/Tabs';
 import Tag from './components/Tag';
@@ -44,5 +45,5 @@ import Typography from './components/Typography';
 import RefreshControl from './components/RefreshControl';
 import RichTextEditor from './components/RichTextEditor';
 import PageControl from './components/PageControl';
-export { theme, getTheme, useTheme, scale, ThemeProvider, ThemeSwitcher, withTheme, swagSystemPalette, swagDarkSystemPalette, workSystemPalette, jobsSystemPalette, walletSystemPalette, eBensSystemPalette, Accordion, Alert, Attachment, Avatar, useAvatarColors, Badge, BottomNavigation, BottomSheet, Box, Button, Calendar, Card, Carousel, Collapse, Checkbox, ContentNavigator, DatePicker, Divider, Drawer, Empty, Error, FAB, Icon, Image, List, PinInput, Progress, PageControl, Skeleton, Slider, Spinner, Swipeable, Radio, SectionHeading, Select, Switch, Tabs, Tag, TextInput, TimePicker, Toast, Toolbar, Typography, RefreshControl, RichTextEditor, };
+export { theme, getTheme, useTheme, scale, ThemeProvider, ThemeSwitcher, withTheme, swagSystemPalette, swagDarkSystemPalette, workSystemPalette, jobsSystemPalette, walletSystemPalette, eBensSystemPalette, Accordion, Alert, Attachment, Avatar, useAvatarColors, Badge, BottomNavigation, BottomSheet, Box, Button, Calendar, Card, Carousel, Collapse, Checkbox, ContentNavigator, DatePicker, Divider, Drawer, Empty, Error, FAB, Icon, Image, List, PinInput, Progress, PageControl, Skeleton, Slider, Spinner, Swipeable, Radio, SectionHeading, Select, Success, Switch, Tabs, Tag, TextInput, TimePicker, Toast, Toolbar, Typography, RefreshControl, RichTextEditor, };
 export * from './types';