@hero-design/rn 8.2.2 → 8.3.0

package/src/index.ts

@@ -21,6 +21,7 @@ import BottomSheet from './components/BottomSheet';
 import Box from './components/Box';
 import Button from './components/Button';
 import Calendar from './components/Calendar';
+import Carousel from './components/Carousel';
 import Card from './components/Card';
 import Collapse from './components/Collapse';
 import Checkbox from './components/Checkbox';
@@ -76,6 +77,7 @@ export {
   Button,
   Calendar,
   Card,
+  Carousel,
   Collapse,
   Checkbox,
   ContentNavigator,

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

@@ -253,6 +253,33 @@ Object {
         "indicatorWidth": 16,
       },
     },
+    "carousel": Object {
+      "colors": Object {
+        "paginatorBackgroundColor": "#401960",
+      },
+      "fontSizes": Object {
+        "heading": 32,
+      },
+      "fonts": Object {
+        "heading": "RebondGrotesque-SemiBold",
+      },
+      "lineHeights": Object {
+        "heading": 32,
+      },
+      "radii": Object {
+        "paginatorBorderRadius": 999,
+      },
+      "sizes": Object {
+        "indicatorWidth": 16,
+        "paginatorHeight": 8,
+        "paginatorWidth": 8,
+      },
+      "space": Object {
+        "headingMarginBottom": 16,
+        "headingMarginTop": 8,
+        "paginatorMarginHorizontal": 8,
+      },
+    },
     "checkbox": Object {
       "borderWidths": Object {
         "icon": 2,

package/src/theme/components/carousel.ts

@@ -0,0 +1,39 @@
+import type { GlobalTheme } from '../global';
+
+const getCarouselTheme = (theme: GlobalTheme) => {
+  const colors = {
+    paginatorBackgroundColor: theme.colors.primary,
+  };
+
+  const space = {
+    headingMarginTop: theme.space.small,
+    headingMarginBottom: theme.space.medium,
+    paginatorMarginHorizontal: theme.space.small,
+  };
+
+  const sizes = {
+    indicatorWidth: theme.sizes.medium,
+    paginatorHeight: theme.sizes.small,
+    paginatorWidth: theme.sizes.small,
+  };
+
+  const radii = {
+    paginatorBorderRadius: theme.radii.rounded,
+  };
+
+  const fontSizes = {
+    heading: theme.fontSizes.xxxxxlarge,
+  };
+
+  const fonts = {
+    heading: theme.fonts.playful.semiBold,
+  };
+
+  const lineHeights = {
+    heading: theme.lineHeights.xxxlarge,
+  };
+
+  return { colors, sizes, radii, space, fonts, fontSizes, lineHeights };
+};
+
+export default getCarouselTheme;

package/src/theme/getTheme.ts

@@ -10,6 +10,7 @@ import getBottomSheetTheme from './components/bottomSheet';
 import getButtonTheme from './components/button';
 import getCalendarTheme from './components/calendar';
 import getCardTheme from './components/card';
+import getCarouselTheme from './components/carousel';
 import getCheckboxTheme from './components/checkbox';
 import getContentNavigatorTheme from './components/contentNavigator';
 import getDatePickerTheme from './components/datePicker';
@@ -53,6 +54,7 @@ type Theme = GlobalTheme & {
     button: ReturnType<typeof getButtonTheme>;
     calendar: ReturnType<typeof getCalendarTheme>;
     card: ReturnType<typeof getCardTheme>;
+    carousel: ReturnType<typeof getCarouselTheme>;
     checkbox: ReturnType<typeof getCheckboxTheme>;
     contentNavigator: ReturnType<typeof getContentNavigatorTheme>;
     datePicker: ReturnType<typeof getDatePickerTheme>;
@@ -102,6 +104,7 @@ const getTheme = (
       button: getButtonTheme(globalTheme),
       calendar: getCalendarTheme(globalTheme),
       card: getCardTheme(globalTheme),
+      carousel: getCarouselTheme(globalTheme),
       checkbox: getCheckboxTheme(globalTheme),
       contentNavigator: getContentNavigatorTheme(globalTheme),
       datePicker: getDatePickerTheme(globalTheme),

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/Carousel/CarouselItem.d.ts

@@ -0,0 +1,7 @@
+import { CarouselData } from './types';
+interface CarouselItemProps extends Omit<CarouselData, 'background'> {
+    width: number;
+    minHeight: number;
+}
+declare const CarouselItem: ({ width, image, content, heading, body, minHeight, }: CarouselItemProps) => JSX.Element;
+export default CarouselItem;

package/types/components/Carousel/CarouselPaginator/StyledCarouselPaginator.d.ts

@@ -0,0 +1,16 @@
+import { Animated, View } from 'react-native';
+declare const StyledCarouselPaginator: 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 StyledCarouselPaginatorAnimatedView: import("@emotion/native").StyledComponent<Animated.AnimatedProps<import("react-native").ViewProps & import("react").RefAttributes<View>> & {
+    children?: import("react").ReactNode;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    indicatorWidth: Animated.AnimatedInterpolation;
+}, {}, {}>;
+export { StyledCarouselPaginator, StyledCarouselPaginatorAnimatedView };

package/types/components/Carousel/CarouselPaginator/index.d.ts

@@ -0,0 +1,7 @@
+import { Animated } from 'react-native';
+interface CarouselPaginatorProps {
+    numberOfSlides: number;
+    scrollX: Animated.Value;
+}
+declare const CarouselPaginator: ({ numberOfSlides, scrollX, }: CarouselPaginatorProps) => JSX.Element;
+export default CarouselPaginator;

package/types/components/Carousel/StyledCarousel.d.ts

@@ -0,0 +1,34 @@
+import { View } from 'react-native';
+declare const StyledCarousel: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    themeSlideBackground: string;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+declare const StyledCarouselView: 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 StyledCarouselHeading: import("@emotion/native").StyledComponent<import("../..").TextProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {}>;
+declare const StyledCarouselImage: import("@emotion/native").StyledComponent<import("../Image").ImageProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {}>;
+declare const StyledCarouselContentWrapper: import("@emotion/native").StyledComponent<import("../Box").BoxProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    width: number;
+}, {}, {}>;
+declare const StyledCarouselFooterWrapper: import("@emotion/native").StyledComponent<import("../Box").BoxProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {}>;
+export { StyledCarousel, StyledCarouselView, StyledCarouselHeading, StyledCarouselImage, StyledCarouselContentWrapper, StyledCarouselFooterWrapper, };

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

@@ -0,0 +1,46 @@
+import { StyleProp, ViewProps, ViewStyle } from 'react-native';
+import { CarouselData } from './types';
+interface CarouselProps extends ViewProps {
+    /**
+     * Additional style.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Testing id of the component.
+     */
+    testID?: string;
+    /**
+     * Callback to be called when the user slides to the next slide.
+     */
+    onSlideChange?: (currentSlide?: CarouselData) => void;
+    /**
+     * Callback to be called when the user skips the intro carousel.
+     */
+    onSkipPress?: (currentSlide?: CarouselData) => void;
+    /**
+     * Callback to be called when the user finishes the intro carousel.
+     */
+    onFinishPress?: (currentSlide?: CarouselData) => void;
+    /**
+     * Carousel data.
+     */
+    items: CarouselData[];
+    /**
+     * Finish button label.
+     */
+    finishButtonLabel?: string;
+    /**
+     * Skip button label.
+     */
+    skipButtonLabel?: string;
+    /**
+     * Footer height.
+     */
+    footerHeight?: number;
+    /**
+     * Min content height.
+     */
+    minContentHeight?: number;
+}
+declare const Carousel: ({ items, onFinishPress, onSkipPress, onSlideChange, finishButtonLabel, skipButtonLabel, footerHeight, minContentHeight, ...nativeProps }: CarouselProps) => JSX.Element;
+export default Carousel;

package/types/components/Carousel/types.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+import { ImageSourcePropType } from 'react-native';
+export declare type CarouselData = {
+    image: ImageSourcePropType | string;
+    content?: ReactNode;
+    heading: string;
+    body?: string;
+    background: string;
+};

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/index.d.ts

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