@hero-design/rn 8.2.2 → 8.2.3

package/src/components/Toolbar/__tests__/__snapshots__/ToolbarGroup.spec.tsx.snap

@@ -34,6 +34,7 @@ exports[`ToolbarGroup renders correctly with when align is center 1`] = `
     style={
       Object {
         "alignItems": "center",
+        "maxWidth": "50%",
         "opacity": 1,
         "paddingHorizontal": 12,
         "paddingVertical": 8,
@@ -56,6 +57,7 @@ exports[`ToolbarGroup renders correctly with when align is center 1`] = `
       themeSize="medium"
     />
     <Text
+      maxFontSizeMultiplier={2}
       style={
         Array [
           Object {
@@ -95,6 +97,7 @@ exports[`ToolbarGroup renders correctly with when align is center 1`] = `
     style={
       Object {
         "alignItems": "center",
+        "maxWidth": "50%",
         "opacity": 1,
         "paddingHorizontal": 12,
         "paddingVertical": 8,
@@ -117,6 +120,7 @@ exports[`ToolbarGroup renders correctly with when align is center 1`] = `
       themeSize="medium"
     />
     <Text
+      maxFontSizeMultiplier={2}
       style={
         Array [
           Object {
@@ -174,6 +178,7 @@ exports[`ToolbarGroup renders correctly with when align is left 1`] = `
     style={
       Object {
         "alignItems": "center",
+        "maxWidth": "50%",
         "opacity": 1,
         "paddingHorizontal": 12,
         "paddingVertical": 8,
@@ -196,6 +201,7 @@ exports[`ToolbarGroup renders correctly with when align is left 1`] = `
       themeSize="medium"
     />
     <Text
+      maxFontSizeMultiplier={2}
       style={
         Array [
           Object {
@@ -235,6 +241,7 @@ exports[`ToolbarGroup renders correctly with when align is left 1`] = `
     style={
       Object {
         "alignItems": "center",
+        "maxWidth": "50%",
         "opacity": 1,
         "paddingHorizontal": 12,
         "paddingVertical": 8,
@@ -257,6 +264,7 @@ exports[`ToolbarGroup renders correctly with when align is left 1`] = `
       themeSize="medium"
     />
     <Text
+      maxFontSizeMultiplier={2}
       style={
         Array [
           Object {
@@ -314,6 +322,7 @@ exports[`ToolbarGroup renders correctly with when align is right 1`] = `
     style={
       Object {
         "alignItems": "center",
+        "maxWidth": "50%",
         "opacity": 1,
         "paddingHorizontal": 12,
         "paddingVertical": 8,
@@ -336,6 +345,7 @@ exports[`ToolbarGroup renders correctly with when align is right 1`] = `
       themeSize="medium"
     />
     <Text
+      maxFontSizeMultiplier={2}
       style={
         Array [
           Object {
@@ -375,6 +385,7 @@ exports[`ToolbarGroup renders correctly with when align is right 1`] = `
     style={
       Object {
         "alignItems": "center",
+        "maxWidth": "50%",
         "opacity": 1,
         "paddingHorizontal": 12,
         "paddingVertical": 8,
@@ -397,6 +408,7 @@ exports[`ToolbarGroup renders correctly with when align is right 1`] = `
       themeSize="medium"
     />
     <Text
+      maxFontSizeMultiplier={2}
       style={
         Array [
           Object {

package/src/components/Toolbar/__tests__/__snapshots__/ToolbarItem.spec.tsx.snap

@@ -42,6 +42,7 @@ exports[`ToolbarItems renders correctly when disabled 1`] = `
     themeSize="medium"
   />
   <Text
+    maxFontSizeMultiplier={2}
     style={
       Array [
         Object {
@@ -106,6 +107,7 @@ exports[`ToolbarItems renders correctly when intent is danger 1`] = `
     themeSize="medium"
   />
   <Text
+    maxFontSizeMultiplier={2}
     style={
       Array [
         Object {
@@ -170,6 +172,7 @@ exports[`ToolbarItems renders correctly when intent is info 1`] = `
     themeSize="medium"
   />
   <Text
+    maxFontSizeMultiplier={2}
     style={
       Array [
         Object {
@@ -234,6 +237,7 @@ exports[`ToolbarItems renders correctly when intent is primary 1`] = `
     themeSize="medium"
   />
   <Text
+    maxFontSizeMultiplier={2}
     style={
       Array [
         Object {
@@ -298,6 +302,7 @@ exports[`ToolbarItems renders correctly when intent is success 1`] = `
     themeSize="medium"
   />
   <Text
+    maxFontSizeMultiplier={2}
     style={
       Array [
         Object {
@@ -362,6 +367,7 @@ exports[`ToolbarItems renders correctly when intent is warning 1`] = `
     themeSize="medium"
   />
   <Text
+    maxFontSizeMultiplier={2}
     style={
       Array [
         Object {

package/src/types.ts

@@ -2,7 +2,7 @@ import type { BottomNavigationTabType } from './components/BottomNavigation';
 import type { IconName } from './components/Icon';
 import type { SingleSelectProps, MultiSelectProps } from './components/Select';
 import type { TabType } from './components/Tabs';
-import type { TextInputProps } from './components/TextInput';
+import type { TextInputProps, TextInputHandles } from './components/TextInput';
 import type {
   RichTextEditorRef,
   RichTextEditorProps,
@@ -13,6 +13,7 @@ import type {
   SectionListRenderOptionInfo,
 } from './components/Select/types';
 import { SwipeableProps } from './components/Swipeable';
+import { TextProps } from './components/Typography/Text';
 
 export type {
   BottomNavigationTabType,
@@ -26,5 +27,7 @@ export type {
   RichTextEditorRef,
   TabType,
   TextInputProps,
+  TextProps,
+  TextInputHandles,
   Theme,
 };

package/src/utils/__tests__/helpers.spec.ts

@@ -2,10 +2,19 @@ import { omit, pick } from '../helpers';
 
 describe('pick', () => {
   it('works', () => {
-    const keys = ['a', 'b', 'f'];
     const props = { a: 1, b: true, c: 'outline', d: null, f: 'whatever' };
 
-    expect(pick(keys, props)).toEqual({
+    expect(pick(['a', 'b', 'f'], props)).toEqual({
+      a: 1,
+      b: true,
+      f: 'whatever',
+    });
+  });
+
+  it('work with any', () => {
+    const props: any = { a: 1, b: true, c: 'outline', d: null, f: 'whatever' };
+
+    expect(pick(['a', 'b', 'f'], props)).toEqual({
       a: 1,
       b: true,
       f: 'whatever',
@@ -15,10 +24,19 @@ describe('pick', () => {
 
 describe('omit', () => {
   it('works', () => {
-    const keys = ['a', 'b'];
     const props = { a: 1, b: true, c: 'outline', d: null, f: 'whatever' };
 
-    expect(omit(keys, props)).toEqual({
+    expect(omit(['a', 'b'], props)).toEqual({
+      c: 'outline',
+      d: null,
+      f: 'whatever',
+    });
+  });
+
+  it('work with any', () => {
+    const props: any = { a: 1, b: true, c: 'outline', d: null, f: 'whatever' };
+
+    expect(omit(['a', 'b'], props)).toEqual({
       c: 'outline',
       d: null,
       f: 'whatever',

package/src/utils/helpers.ts

@@ -3,23 +3,24 @@ import { Platform } from 'react-native';
 export const isIOS = Platform.OS === 'ios';
 export const isAndroid = Platform.OS === 'android';
 
-export const pick = (keys: Array<string>, props: Record<string, any>) =>
-  keys
-    .filter((key) => key in props)
-    .reduce(
+export function pick<O, T extends keyof O>(keys: T[], obj: O): Pick<O, T> {
+  return keys
+    .filter((key) => key in obj)
+    .reduce<Partial<O>>(
       (result, cur) => ({
         ...result,
-        [cur]: props[cur],
+        [cur]: obj[cur],
       }),
       {}
-    );
+    ) as Pick<O, T>;
+}
 
-export const omit = (keys: Array<string>, props: Record<string, any>) => {
-  const result = props;
+export function omit<O, T extends keyof O>(keys: T[], obj: O): Omit<O, T> {
+  const result = obj;
 
   keys.forEach((key) => {
     delete result[key];
   });
 
   return result;
-};
+}

package/types/components/BottomNavigation/StyledBottomNavigation.d.ts

@@ -44,7 +44,7 @@ declare const BottomBarItem: import("@emotion/native").StyledComponent<import("r
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
-declare const StyledBottomBarText: import("@emotion/native").StyledComponent<import("../Typography/Text").TextProps & {
+declare const StyledBottomBarText: import("@emotion/native").StyledComponent<import("../..").TextProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, {}, {}>;

package/types/components/Box/StyledBox.d.ts

@@ -1,6 +1,6 @@
 import { Theme } from '@emotion/react';
 import { View } from 'react-native';
-import { StyleProps } from './types';
+import { FlexStyleProps, StyleProps } from './types';
 export declare const getThemeValue: (theme: Theme, key: keyof StyleProps, props: StyleProps) => {
     [x: string]: string;
 } | {
@@ -9,7 +9,7 @@ export declare const getThemeValue: (theme: Theme, key: keyof StyleProps, props:
 declare const StyledBox: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
     theme?: Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
-} & StyleProps, {}, {
+} & StyleProps & FlexStyleProps, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
 export { StyledBox };

package/types/components/Button/StyledButton.d.ts

@@ -11,7 +11,7 @@ declare const StyledButtonContainer: import("@emotion/native").StyledComponent<i
 }, {}, {
     ref?: import("react").Ref<TouchableOpacity> | undefined;
 }>;
-declare const StyledButtonText: import("@emotion/native").StyledComponent<import("../Typography/Text").TextProps & {
+declare const StyledButtonText: import("@emotion/native").StyledComponent<import("../..").TextProps & {
     theme?: Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 } & {

package/types/components/Button/UtilityButton/StyledUtilityButton.d.ts

@@ -11,7 +11,7 @@ export declare const IconWrapper: import("@emotion/native").StyledComponent<impo
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
-export declare const ButtonText: import("@emotion/native").StyledComponent<import("../../Typography/Text").TextProps & {
+export declare const ButtonText: import("@emotion/native").StyledComponent<import("../../..").TextProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, {}, {}>;

package/types/components/Card/StyledCard.d.ts

@@ -3,7 +3,7 @@ declare const StyledCard: import("@emotion/native").StyledComponent<import("reac
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 } & {
-    themeIntent?: "primary" | "success" | "warning" | undefined;
+    themeIntent?: "primary" | "success" | "warning" | "danger" | "archived" | undefined;
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;

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

@@ -8,7 +8,7 @@ interface CardProps extends ViewProps {
     /**
      * Visual intent color to apply to card.
      */
-    intent?: 'primary' | 'success' | 'warning';
+    intent?: 'primary' | 'success' | 'warning' | 'danger' | 'archived';
     /**
      * Additional style.
      */

package/types/components/Checkbox/StyledCheckbox.d.ts

@@ -8,7 +8,7 @@ export declare const StyledWrapper: import("@emotion/native").StyledComponent<im
 }, {}, {
     ref?: import("react").Ref<TouchableOpacity> | undefined;
 }>;
-export declare const StyledDescription: import("@emotion/native").StyledComponent<import("../Typography/Text").TextProps & {
+export declare const StyledDescription: import("@emotion/native").StyledComponent<import("../..").TextProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, {}, {}>;

package/types/components/ContentNavigator/StyledContentNavigator.d.ts

@@ -5,7 +5,7 @@ declare const Wrapper: import("@emotion/native").StyledComponent<import("react-n
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
-declare const Value: import("@emotion/native").StyledComponent<import("../Typography/Text").TextProps & {
+declare const Value: import("@emotion/native").StyledComponent<import("../..").TextProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, {}, {}>;

package/types/components/FAB/ActionGroup/StyledActionItem.d.ts

@@ -7,7 +7,7 @@ declare const StyledActionItem: import("@emotion/native").StyledComponent<Toucha
 }, {}, {
     ref?: import("react").Ref<TouchableOpacity> | undefined;
 }>;
-declare const StyledActionItemText: import("@emotion/native").StyledComponent<import("../../Typography/Text").TextProps & {
+declare const StyledActionItemText: import("@emotion/native").StyledComponent<import("../../..").TextProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 } & TouchableOpacityProps, {}, {}>;

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

@@ -1,7 +1,7 @@
-import type { StyleProp, TextStyle } from 'react-native';
+import type { AccessibilityProps, StyleProp, TextStyle } from 'react-native';
 import IconList from './IconList';
 export declare type IconName = typeof IconList[number];
-export interface IconProps {
+export interface IconProps extends AccessibilityProps {
     /**
      * Name of the Icon.
      */
@@ -28,7 +28,7 @@ export interface IconProps {
     testID?: string;
 }
 declare const Icon: {
-    ({ icon, style, size, intent, testID, spin, }: IconProps): JSX.Element;
+    ({ icon, style, size, intent, testID, spin, accessibilityLabel, accessibilityHint, accessibilityRole, accessibilityState, accessibilityValue, accessibilityLiveRegion, accessibilityElementsHidden, accessible, accessibilityIgnoresInvertColors, accessibilityViewIsModal, accessibilityActions, }: IconProps): JSX.Element;
     List: readonly ["activate", "add-emoji", "add-person", "adjustment", "alignment", "antenna", "archive", "assignment-warning", "bank", "bell", "billing", "bookmark", "box-check", "box", "buildings", "cake", "calendar-clock", "calendar", "candy-box-menu", "caret-down-small", "caret-down", "caret-left-small", "caret-left", "caret-right-small", "caret-right", "caret-up-small", "caret-up", "check-radio", "circle-add", "circle-cancel", "circle-check", "circle-down", "circle-info", "circle-left", "circle-ok", "circle-pencil", "circle-question", "circle-remove", "circle-right", "circle-up", "circle-warning", "clock-3", "clock", "cloud-download", "cloud-upload", "cog", "coin", "contacts", "credit-card", "diamond", "direction-arrows", "directory", "document", "dollar-coin-shine", "double-buildings", "edit-template", "envelope", "expense", "eye-circle", "eye-invisible", "eye", "face-meh", "face-sad", "face-smiley", "feed", "feedbacks", "file-certified", "file-clone", "file-copy", "file-csv", "file-dispose", "file-doc", "file-excel", "file-export", "file-lock", "file-pdf", "file-powerpoint", "file-search", "file-secured", "file-sheets", "file-slide", "file-verified", "file-word", "file", "filter", "folder-user", "folder", "format-bold", "format-heading1", "format-heading2", "format-italic", "format-list-bulleted", "format-list-numbered", "format-underlined", "funnel-filter", "global-dollar", "globe", "graduation-cap", "graph", "happy-sun", "health-bag", "heart", "home", "image", "import", "incident-siren", "instapay", "list", "loading-2", "loading", "location", "lock", "looks-one", "looks-two", "media-content", "menu", "moneybag", "moon", "multiple-stars", "multiple-users", "node", "open-folder", "paperclip", "payment-summary", "pencil", "phone", "piggy-bank", "plane", "play-circle", "print", "raising-hands", "reply-arrow", "reply", "reschedule", "rostering", "save", "schedule-send", "schedule", "search-person", "send", "speaker-active", "speaker", "star-award", "star-badge", "star-medal", "star", "steps-circle", "stopwatch", "suitcase", "survey", "swag", "switch", "tag", "target", "teams", "timesheet", "touch-id", "trash-bin", "unlock", "user", "video-1", "video-2", "wallet", "warning", "activate-outlined", "add-credit-card-outlined", "add-person-outlined", "add-section-outlined", "add-time-outlined", "add", "adjustment-outlined", "alignment-2-outlined", "alignment-outlined", "all-caps", "arrow-down", "arrow-downwards", "arrow-left", "arrow-leftwards", "arrow-right", "arrow-rightwards", "arrow-up", "arrow-upwards", "at-sign", "bell-active-outlined", "bell-outlined", "bell-slash-outlined", "billing-outlined", "body-outlined", "bold", "bookmark-added-outlined", "bookmark-outlined", "box-check-outlined", "box-outlined", "bullet-points", "cake-outlined", "calendar-dates-outlined", "calendar-star-outlined", "camera-outlined", "cancel", "chat-bubble-outlined", "chat-unread-outlined", "checkmark", "circle-add-outlined", "circle-cancel-outlined", "circle-down-outlined", "circle-info-outlined", "circle-left-outlined", "circle-ok-outlined", "circle-question-outlined", "circle-remove-outlined", "circle-right-outlined", "circle-up-outlined", "circle-warning-outlined", "clock-2-outlined", "clock-outlined", "cog-outlined", "coin-outlined", "comment-outlined", "contacts-outlined", "credit-card-outlined", "cup-outlined", "direction-arrows-outlined", "directory-outlined", "document-outlined", "dollar-card-outlined", "dollar-coin-shine-outlined", "dollar-sign", "double-buildings-outlined", "double-left-arrows", "double-right-arrows", "download-outlined", "edit-template-outlined", "email-outlined", "enter-arrow", "envelope-outlined", "expense-outlined", "explore-outlined", "external-link", "eye-invisible-outlined", "eye-outlined", "face-id", "face-meh-outlined", "face-open-smiley-outlined", "face-sad-outlined", "face-smiley-outlined", "feed-outlined", "file-certified-outlined", "file-clone-outlined", "file-copy-outlined", "file-dispose-outlined", "file-dollar-outlined", "file-download-outlined", "file-export-outlined", "file-lock-outlined", "file-outlined", "file-search-outlined", "file-secured-outlined", "file-verified-outlined", "filter-outlined", "folder-outlined", "folder-user-outlined", "funnel-filter-outline", "graph-outlined", "hand-holding-user-outlined", "happy-sun-outlined", "health-bag-outlined", "heart-outlined", "home-active-outlined", "home-outlined", "id-card-outlined", "image-outlined", "import-outlined", "instapay-outlined", "italic", "link-1", "link-2", "list-outlined", "live-help-outlined", "location-outlined", "lock-outlined", "locked-file-outlined", "log-out", "media-content-outlined", "menu-close", "menu-expand", "menu-fold-outlined", "menu-unfold-outlined", "moneybag-outlined", "moon-outlined", "more-horizontal", "more-vertical", "multiple-folders-outlined", "multiple-users-outlined", "near-me-outlined", "node-outlined", "number-points", "number", "payment-summary-outlined", "payslip-outlined", "pencil-outlined", "percentage", "phone-outlined", "piggy-bank-outlined", "plane-outlined", "play-circle-outlined", "print-outlined", "qr-code-outlined", "qualification-outlined", "re-assign", "redeem", "refresh", "remove", "reply-outlined", "restart", "return-arrow", "rostering-outlined", "save-outlined", "schedule-outlined", "search-outlined", "search-secured-outlined", "send-outlined", "share-1", "share-2", "share-outlined", "single-down-arrow", "single-left-arrow", "single-right-arrow", "single-up-arrow", "speaker-active-outlined", "speaker-outlined", "star-outlined", "stopwatch-outlined", "strikethrough", "suitcase-clock-outlined", "suitcase-outlined", "survey-outlined", "switch-outlined", "sync", "target-outlined", "timesheet-outlined", "today-outlined", "transfer", "trash-bin-outlined", "umbrela-outlined", "unavailable", "underline", "unlock-outlined", "upload-outlined", "user-circle-outlined", "user-gear-outlined", "user-outlined", "user-rectangle-outlined", "video-1-outlined", "video-2-outlined", "wallet-outlined"];
 };
 export default Icon;

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

@@ -12,13 +12,13 @@ declare const StyledLabelContainer: import("@emotion/native").StyledComponent<im
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
-declare const StyledLabel: import("@emotion/native").StyledComponent<import("../Typography/Text").TextProps & {
+declare const StyledLabel: import("@emotion/native").StyledComponent<import("../..").TextProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 } & {
     themeVariant: Variant;
 }, {}, {}>;
-declare const StyledAsteriskLabel: import("@emotion/native").StyledComponent<import("../Typography/Text").TextProps & {
+declare const StyledAsteriskLabel: import("@emotion/native").StyledComponent<import("../..").TextProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 } & {
@@ -30,13 +30,13 @@ declare const StyledLabelContainerInsideTextInput: import("@emotion/native").Sty
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
-declare const StyledLabelInsideTextInput: import("@emotion/native").StyledComponent<import("../Typography/Text").TextProps & {
+declare const StyledLabelInsideTextInput: import("@emotion/native").StyledComponent<import("../..").TextProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 } & {
     themeVariant: Variant;
 }, {}, {}>;
-declare const StyledAsteriskLabelInsideTextInput: import("@emotion/native").StyledComponent<import("../Typography/Text").TextProps & {
+declare const StyledAsteriskLabelInsideTextInput: import("@emotion/native").StyledComponent<import("../..").TextProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 } & {
@@ -48,17 +48,17 @@ declare const StyledErrorContainer: import("@emotion/native").StyledComponent<im
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
-declare const StyledError: import("@emotion/native").StyledComponent<import("../Typography/Text").TextProps & {
+declare const StyledError: import("@emotion/native").StyledComponent<import("../..").TextProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, {}, {}>;
-declare const StyledMaxLengthMessage: import("@emotion/native").StyledComponent<import("../Typography/Text").TextProps & {
+declare const StyledMaxLengthMessage: import("@emotion/native").StyledComponent<import("../..").TextProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 } & {
     themeVariant: Variant;
 }, {}, {}>;
-declare const StyledHelperText: import("@emotion/native").StyledComponent<import("../Typography/Text").TextProps & {
+declare const StyledHelperText: import("@emotion/native").StyledComponent<import("../..").TextProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, {}, {}>;

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

@@ -1,7 +1,9 @@
 import React from 'react';
+import { TextInput as RNTextInput } from 'react-native';
 import type { TextInputProps as NativeTextInputProps, StyleProp, ViewStyle, TextStyle } from 'react-native';
 import type { Variant } from './StyledTextInput';
 import type { IconName } from '../Icon';
+export declare type TextInputHandles = Pick<RNTextInput, 'focus' | 'clear' | 'blur' | 'isFocused' | 'setNativeProps'>;
 export interface TextInputProps extends NativeTextInputProps {
     /**
      * Field label.
@@ -37,7 +39,7 @@ export interface TextInputProps extends NativeTextInputProps {
     error?: string;
     /**
      *  Whether the input is required, if true, an asterisk will be appended to the label.
-     * */
+     */
     required?: boolean;
     /**
      *  Placeholder text to display.
@@ -47,11 +49,31 @@ export interface TextInputProps extends NativeTextInputProps {
      * Whether the input is editable.
      * */
     editable?: boolean;
+    /**
+     * Whether the input is disabled.
+     */
     disabled?: boolean;
+    /**
+     * Whether the input is loading.
+     */
     loading?: boolean;
+    /**
+     * The max length of the input.
+     * If the max length is set, the input will display the current length and the max length.
+     * */
     maxLength?: number;
+    /**
+     * The helper text to display.
+     */
     helpText?: string;
+    /**
+     * Customise input value renderer
+     */
     renderInputValue?: (inputProps: NativeTextInputProps) => React.ReactNode;
+    /**
+     * Component ref.
+     */
+    ref?: React.Ref<TextInputHandles>;
 }
 export declare const getVariant: ({ disabled, error, editable, loading, isEmptyValue, }: {
     disabled?: boolean | undefined;
@@ -61,5 +83,5 @@ export declare const getVariant: ({ disabled, error, editable, loading, isEmptyV
     isFocused?: boolean | undefined;
     isEmptyValue?: boolean | undefined;
 }) => Variant;
-declare const TextInput: ({ label, prefix, suffix, style, textStyle, testID, accessibilityLabelledBy, error, required, editable, disabled, loading, maxLength, helpText, value, defaultValue, renderInputValue, ...nativeProps }: TextInputProps) => JSX.Element;
-export default TextInput;
+declare const _default: 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" | "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" | "accessibilityLabelledBy" | "required" | "helpText" | "renderInputValue"> & React.RefAttributes<TextInputHandles>>;
+export default _default;

package/types/components/Toolbar/ToolbarItem.d.ts

@@ -1,3 +1,4 @@
+import { StyleProp, ViewStyle } from 'react-native';
 import type { IconName } from '../Icon';
 export interface ToolbarItemProps {
     /**
@@ -20,6 +21,10 @@ export interface ToolbarItemProps {
      * Whether the toolbar item is disabled.
      */
     disabled?: boolean;
+    /**
+     * Addtitional style.
+     */
+    style?: StyleProp<ViewStyle>;
 }
-declare const ToolbarItem: ({ icon, label, onPress, intent, disabled, }: ToolbarItemProps) => JSX.Element;
+declare const ToolbarItem: ({ icon, label, onPress, intent, disabled, style, }: ToolbarItemProps) => JSX.Element;
 export default ToolbarItem;

package/types/types.d.ts

@@ -2,9 +2,10 @@ import type { BottomNavigationTabType } from './components/BottomNavigation';
 import type { IconName } from './components/Icon';
 import type { SingleSelectProps, MultiSelectProps } from './components/Select';
 import type { TabType } from './components/Tabs';
-import type { TextInputProps } from './components/TextInput';
+import type { TextInputProps, TextInputHandles } from './components/TextInput';
 import type { RichTextEditorRef, RichTextEditorProps } from './components/RichTextEditor';
 import type { Theme } from './theme';
 import type { ListRenderOptionInfo, SectionListRenderOptionInfo } from './components/Select/types';
 import { SwipeableProps } from './components/Swipeable';
-export type { BottomNavigationTabType, IconName, SingleSelectProps, MultiSelectProps, ListRenderOptionInfo, SectionListRenderOptionInfo, SwipeableProps, RichTextEditorProps, RichTextEditorRef, TabType, TextInputProps, Theme, };
+import { TextProps } from './components/Typography/Text';
+export type { BottomNavigationTabType, IconName, SingleSelectProps, MultiSelectProps, ListRenderOptionInfo, SectionListRenderOptionInfo, SwipeableProps, RichTextEditorProps, RichTextEditorRef, TabType, TextInputProps, TextProps, TextInputHandles, Theme, };

package/types/utils/helpers.d.ts

@@ -1,4 +1,4 @@
 export declare const isIOS: boolean;
 export declare const isAndroid: boolean;
-export declare const pick: (keys: Array<string>, props: Record<string, any>) => {};
-export declare const omit: (keys: Array<string>, props: Record<string, any>) => Record<string, any>;
+export declare function pick<O, T extends keyof O>(keys: T[], obj: O): Pick<O, T>;
+export declare function omit<O, T extends keyof O>(keys: T[], obj: O): Omit<O, T>;