@hero-design/rn 8.82.0-alpha.0 → 8.82.1

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

@@ -0,0 +1,48 @@
+import { TouchableHighlight, View } from 'react-native';
+import type { Theme } from '@emotion/react';
+declare type Intent = 'primary' | 'secondary' | 'danger';
+declare type ThemeVariant = 'filled-primary' | 'filled-secondary' | 'filled-danger' | 'outlined-primary' | 'outlined-secondary' | 'outlined-danger' | 'text-primary' | 'text-secondary' | 'text-danger';
+declare const StyledButtonContainer: import("@emotion/native").StyledComponent<import("react-native").TouchableHighlightProps & {
+    theme?: Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & {
+    disabled?: boolean | undefined;
+    themeButtonVariant: ThemeVariant;
+    loading?: boolean | undefined;
+    themeInlineText?: boolean | undefined;
+}, {}, {
+    ref?: import("react").Ref<TouchableHighlight> | undefined;
+}>;
+declare const StyledButtonText: import("@emotion/native").StyledComponent<import("../Typography/Title").TitleProps & {
+    theme?: Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & {
+    disabled?: boolean | undefined;
+    themeButtonVariant: ThemeVariant;
+}, {}, {}>;
+declare const StyledButtonTitleOfVariantText: import("@emotion/native").StyledComponent<import("../Typography/Body").BodyProps & {
+    theme?: Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & {
+    disabled?: boolean | undefined;
+    themeButtonVariant: 'text-primary' | 'text-secondary' | 'text-danger';
+    themeIsPressed?: boolean | undefined;
+}, {}, {}>;
+declare const StyledButtonIconWrapper: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & {
+    themePosition: 'left' | 'right';
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+declare const StyledButtonIcon: import("@emotion/native").StyledComponent<import("../Icon").IconProps & {
+    theme?: Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & {
+    disabled?: boolean | undefined;
+    themeButtonVariant: ThemeVariant;
+    themeIsPressed?: boolean | undefined;
+}, {}, {}>;
+export { StyledButtonContainer, StyledButtonText, StyledButtonIconWrapper, StyledButtonIcon, StyledButtonTitleOfVariantText, };
+export type { Intent, ThemeVariant };

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

@@ -0,0 +1,17 @@
+import { View, TouchableOpacity } from 'react-native';
+export declare const ButtonContainer: import("@emotion/native").StyledComponent<import("react-native").TouchableOpacityProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, {}, {
+    ref?: import("react").Ref<TouchableOpacity> | undefined;
+}>;
+export declare const IconWrapper: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+export declare const ButtonText: import("@emotion/native").StyledComponent<import("../../Typography/Body").BodyProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, {}, {}>;

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import type { ReactChild } from 'react';
+import type { ViewProps } from 'react-native';
+import type { IconName } from '../../Icon';
+export interface UtilityButtonProps extends ViewProps {
+    /**
+     * Places an icon within the button, before the button's text
+     */
+    icon: IconName;
+    /**
+     * Set the handler to handle press event.
+     */
+    onPress: () => void;
+    /**
+     * Button label.
+     */
+    text: ReactChild;
+    /**
+     * Visual intent color to apply to button.
+     */
+    intent?: 'primary' | 'text';
+}
+declare const UtilityButton: ({ icon, onPress, text, testID, intent, style, hitSlop, }: UtilityButtonProps) => React.JSX.Element;
+export default UtilityButton;

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

@@ -0,0 +1,10 @@
+import type { FunctionComponent } from 'react';
+import IconButton from './IconButton';
+import UtilityButton from './UtilityButton';
+import type { ButtonProps } from './Button';
+interface CompoundButtonProps extends FunctionComponent<ButtonProps> {
+    Icon: typeof IconButton;
+    Utility: typeof UtilityButton;
+}
+declare const CompoundButton: CompoundButtonProps;
+export default CompoundButton;

package/types/components/Calendar/CalendarRowItem.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+export interface CalendarRowItemProps {
+    date?: Date;
+    onPress?: () => void;
+    isCurrent?: boolean;
+    isSelected?: boolean;
+    textIntent?: 'body' | 'subdued';
+    marked?: boolean;
+    itemWidth?: number;
+}
+declare const CalendarRowItem: ({ date, onPress, isCurrent, isSelected, textIntent, marked, itemWidth, }: CalendarRowItemProps) => React.JSX.Element;
+export default CalendarRowItem;

package/types/components/Calendar/StyledCalendar.d.ts

@@ -0,0 +1,62 @@
+import { TouchableOpacity, View } from 'react-native';
+import type { ViewProps } from 'react-native';
+declare const StyledContainer: import("@emotion/native").StyledComponent<ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+declare const StyledCalendarHeader: import("@emotion/native").StyledComponent<ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+declare const StyledCalendarDayNameCell: import("@emotion/native").StyledComponent<ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & {
+    themeItemWidth?: number | undefined;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+declare const StyledCalendarCell: import("@emotion/native").StyledComponent<import("react-native").TouchableOpacityProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & {
+    variant?: "selected" | "default" | "current" | undefined;
+    themeItemWidth?: number | undefined;
+}, {}, {
+    ref?: import("react").Ref<TouchableOpacity> | undefined;
+}>;
+declare const StyledCalendarRow: import("@emotion/native").StyledComponent<ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+declare const StyledCalendarRowItem: import("@emotion/native").StyledComponent<ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & {
+    themeItemWidth?: number | undefined;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+declare const StyledDisabledCalendarRowItem: import("@emotion/native").StyledComponent<ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & {
+    themeItemWidth?: number | undefined;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+declare const StyledMark: import("@emotion/native").StyledComponent<ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & {
+    variant: 'primary' | 'inverted';
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+export { StyledContainer, StyledCalendarHeader, StyledCalendarRow, StyledCalendarRowItem, StyledDisabledCalendarRowItem, StyledCalendarDayNameCell, StyledCalendarCell, StyledMark, };

package/types/components/Calendar/helpers.d.ts

@@ -0,0 +1,3 @@
+export declare const initArray: <T>(length: number, func: (value: number) => T) => T[];
+export declare const isEqDate: (dateA?: Date, dateB?: Date) => boolean;
+export declare const getValidDate: (date: Date, minDate?: Date, maxDate?: Date) => Date | undefined;

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

@@ -0,0 +1,58 @@
+import React from 'react';
+export interface CalendarProps {
+    /**
+     * Selected date value.
+     */
+    value?: Date;
+    /**
+     * Visible date of month that calendar opens to display. Default is now.
+     */
+    visibleDate: Date;
+    /**
+     * Mininum date. Restrict the range of possible date values.
+     */
+    minDate?: Date;
+    /**
+     * Maximum date. Restrict the range of possible date values.
+     */
+    maxDate?: Date;
+    /**
+     * Callback is called when selected date value is changed.
+     */
+    onChange?: (date: Date) => void;
+    /**
+     * Handler to be called when the user taps the previous button.
+     */
+    onPreviousPress?: () => void;
+    /**
+     * Handler to be called when the user taps the next button.
+     */
+    onNextPress?: () => void;
+    /**
+     * Handler to be called when the user taps the title.
+     */
+    onTitlePress?: () => void;
+    /**
+     * Mark dates to display on calendar.
+     */
+    markedDates?: Date[];
+    /**
+     * Testing id of the component.
+     */
+    testID?: string;
+    /**
+     * Callback when header month is changed, passing this prop will disable onTitlePress.
+     */
+    onMonthChange?: (date: Date) => void;
+    onToggleMonthPicker?: (visible: boolean) => void;
+    /**
+     * Label for the confirm button of the month picker, Android only.
+     */
+    monthPickerConfirmLabel?: string;
+    /**
+     * Label for the cancel button of the month picker, Android only.
+     */
+    monthPickerCancelLabel?: string;
+}
+declare const Calendar: ({ value, visibleDate, onChange, onPreviousPress, onNextPress, onTitlePress, minDate, maxDate, markedDates, testID, onMonthChange, onToggleMonthPicker, monthPickerConfirmLabel, monthPickerCancelLabel, }: CalendarProps) => React.JSX.Element;
+export default Calendar;

package/types/components/Card/DataCard/StyledDataCard.d.ts

@@ -0,0 +1,16 @@
+import { View } from 'react-native';
+declare const StyledDataCard: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+declare const Indicator: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & {
+    themeIntent: 'success' | 'info' | 'warning' | 'danger' | 'archived' | 'primary';
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+export { StyledDataCard, Indicator };

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

@@ -0,0 +1,22 @@
+import type { ReactNode } from 'react';
+import type { StyleProp, ViewStyle, ViewProps } from 'react-native';
+export interface DataCardProps extends ViewProps {
+    /**
+     * Card's content.
+     */
+    children?: ReactNode;
+    /**
+     * Visual intent color to apply to card.
+     */
+    intent?: 'primary' | 'info' | 'success' | 'warning' | 'danger' | 'archived';
+    /**
+     * Additional style.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Testing id of the component.
+     */
+    testID?: string;
+}
+declare const DataCard: ({ intent, children, ...nativeProps }: DataCardProps) => JSX.Element;
+export default DataCard;

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

@@ -0,0 +1,11 @@
+import { View } from 'react-native';
+declare const StyledCard: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & {
+    themeIntent?: "neutral" | "primary" | "success" | "warning" | "danger" | "archived" | undefined;
+    themeVariant?: "basic" | "super-round" | undefined;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+export { StyledCard };

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

@@ -0,0 +1,25 @@
+import type { ReactNode } from 'react';
+import type { StyleProp, ViewProps, ViewStyle } from 'react-native';
+export interface CardProps extends ViewProps {
+    /**
+     * Card's content.
+     */
+    children?: ReactNode;
+    /**
+     * Visual intent color to apply to card.
+     */
+    intent?: 'primary' | 'success' | 'warning' | 'danger' | 'archived' | 'neutral';
+    /**
+     * Additional style.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Testing id of the component.
+     */
+    testID?: string;
+    variant?: 'basic' | 'super-round';
+}
+declare const _default: (({ intent, children, variant, ...nativeProps }: CardProps) => JSX.Element) & {
+    Data: ({ intent, children, ...nativeProps }: import("./DataCard").DataCardProps) => JSX.Element;
+};
+export default _default;

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

@@ -0,0 +1,42 @@
+import React from 'react';
+import { LayoutChangeEvent, StyleProp, ViewStyle } from 'react-native';
+export declare type CardCarouselHandles = {
+    snapToIndex: (index: number) => void;
+};
+export interface CardCarouselProps {
+    /**
+     * Whether to scroll automatically.
+     */
+    autoPlay?: boolean;
+    /**
+     * Set interval of each slide.
+     */
+    autoPlayInterval?: number;
+    /**
+     * onItemIndexChange event handler receiving index of selected Item.
+     */
+    onItemIndexChange?: (index: number) => void;
+    /**
+     * Carousel items.
+     */
+    items: React.ReactNode[];
+    /**
+     * Indicates hide or show page control.
+     */
+    hidePageControl?: boolean;
+    /**
+     * Additional styles
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Testing id of the component.
+     */
+    testID?: string;
+    /**
+     * Component ref.
+     */
+    ref?: React.Ref<CardCarouselHandles>;
+    onLayout?: (event: LayoutChangeEvent) => void;
+}
+export declare const getCardCarouselValidIndex: (index: number, length: number) => number;
+export declare const CardCarousel: React.ForwardRefExoticComponent<Omit<CardCarouselProps, "ref"> & React.RefAttributes<CardCarouselHandles>>;

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

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

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

@@ -0,0 +1,24 @@
+import { View, ViewProps } from 'react-native';
+import { CardProps } from '../Card';
+import { PageControlProps } from '../PageControl';
+declare const StyledPageControl: import("@emotion/native").StyledComponent<PageControlProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, {}, {}>;
+declare const StyledWrapper: import("@emotion/native").StyledComponent<ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+declare const StyledCard: import("@emotion/native").StyledComponent<CardProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, {}, {}>;
+declare const StyledItemWrapper: import("@emotion/native").StyledComponent<ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+export { StyledCard, StyledItemWrapper, StyledWrapper, StyledPageControl };

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

@@ -0,0 +1,54 @@
+import { View, ImageResizeMode } from 'react-native';
+declare const StyledBackDrop: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | 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, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+declare const StyledCarouselHeading: import("@emotion/native").StyledComponent<import("../Typography/Title").TitleProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, {}, {}>;
+declare const StyledCarouselImage: import("@emotion/native").StyledComponent<import("../Image").ImageProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, {}, {}>;
+declare const StyledCustomSizeCarouselImage: import("@emotion/native").StyledComponent<import("../Image").ImageProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & {
+    themeHeight?: number | `${number}%` | undefined;
+    themeWidth?: number | `${number}%` | undefined;
+    themeResizeMode?: ImageResizeMode | undefined;
+}, {}, {}>;
+declare const StyledCarouselContentWrapper: import("@emotion/native").StyledComponent<import("../Box").BoxProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & {
+    width: number;
+}, {}, {}>;
+declare const StyledCarouselFooterWrapper: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+declare const StyledPageControl: import("@emotion/native").StyledComponent<import("../PageControl").PageControlProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, {}, {}>;
+declare const StyledPageControlWrapper: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+export { StyledBackDrop, StyledCarouselView, StyledCarouselHeading, StyledCarouselImage, StyledCarouselContentWrapper, StyledCarouselFooterWrapper, StyledCustomSizeCarouselImage, StyledPageControl, StyledPageControlWrapper, };

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

@@ -0,0 +1,2 @@
+export declare const ITEM_WIDTH_RATE = 0.85;
+export declare const VIEW_POSITION_CENTER = 0.5;

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

@@ -0,0 +1,44 @@
+import React, { Dispatch, SetStateAction } from 'react';
+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;
+    /**
+     * onItemIndexChange event handler receiving index of selected Item.
+     */
+    onItemIndexChange?: Dispatch<SetStateAction<number>>;
+    /**
+     * Carousel data.
+     */
+    items: CarouselData[];
+    /**
+     * Render action elements function.
+     */
+    renderActions?: (pageIndex: number) => JSX.Element;
+    /**
+     * @deprecated will be removed in 9.0.0
+     *
+     * Should show paginations
+     */
+    shouldShowPagination?: (pageIndex: number) => boolean;
+    /**
+     * Current selected item index.
+     */
+    selectedItemIndex?: number;
+    /**
+     * position of the page control
+     */
+    pageControlPosition?: 'top' | 'bottom';
+}
+export declare function useStateFromProp<T>(initialValue: T): [T, Dispatch<SetStateAction<T>>];
+declare const _default: (({ items, onItemIndexChange, renderActions, selectedItemIndex, style, shouldShowPagination, testID, pageControlPosition, ...nativeProps }: CarouselProps) => React.JSX.Element) & {
+    Card: React.ForwardRefExoticComponent<Omit<import("./CardCarousel").CardCarouselProps, "ref"> & React.RefAttributes<import("./CardCarousel").CardCarouselHandles>>;
+};
+export default _default;

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

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+import { ImageSourcePropType, ImageResizeMode } from 'react-native';
+export declare type CarouselImageProps = ImageSourcePropType & {
+    height?: number | `${number}%`;
+    width?: number | `${number}%`;
+    resizeMode?: ImageResizeMode;
+};
+export declare type CarouselData = {
+    image?: CarouselImageProps | string;
+    content?: ReactNode;
+    heading?: string;
+    body?: string;
+    background: string;
+};

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

@@ -0,0 +1,35 @@
+import { TouchableOpacity, View } from 'react-native';
+declare type CheckboxThemeState = 'default' | 'disabled' | 'readonly';
+export declare const StyledWrapper: import("@emotion/native").StyledComponent<import("react-native").TouchableOpacityProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & {
+    themeState: CheckboxThemeState;
+}, {}, {
+    ref?: import("react").Ref<TouchableOpacity> | undefined;
+}>;
+export declare const StyledDescription: import("@emotion/native").StyledComponent<import("../Typography/Body").BodyProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, {}, {}>;
+export declare const StyledCheckboxContainer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+export declare const StyledCheckbox: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & {
+    themeState: CheckboxThemeState;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+export declare const StyledCheckMark: import("@emotion/native").StyledComponent<import("../Icon").IconProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & {
+    themeState: CheckboxThemeState;
+}, {}, {}>;
+export {};

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

@@ -0,0 +1,44 @@
+import React from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+export interface CheckboxProps {
+    /**
+     * Control whether the switch is checked
+     */
+    checked?: boolean;
+    /**
+     * Checkbox's description.
+     */
+    description?: string;
+    /**
+     * @deprecated This prop will be removed in the next major release. Checkboxes will always have border.
+     * Whether the border is shown.
+     */
+    withBorder?: boolean;
+    /**
+     * Whether the switch is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Event handler.
+     */
+    onPress?: () => void;
+    /**
+     * Additional style.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Testing id of the component.
+     */
+    testID?: string;
+    /**
+     * Readonly of the checkbox.
+     */
+    readonly?: boolean;
+}
+declare type getStateType = {
+    disabled: boolean;
+    readonly: boolean;
+};
+export declare const getThemeState: ({ disabled, readonly }: getStateType) => "default" | "disabled" | "readonly";
+declare const Checkbox: ({ checked, description, withBorder, disabled, onPress, style, testID, readonly, }: CheckboxProps) => React.JSX.Element;
+export default Checkbox;

package/types/components/Chip/StyledChip.d.ts

@@ -0,0 +1,16 @@
+import { TouchableOpacity } from 'react-native';
+declare type StyledChipWrapperProps = {
+    themeVariant?: 'outlined' | 'filled' | 'compact' | 'compact-outlined';
+    themeSelected?: boolean;
+};
+declare const StyledChipWrapper: import("@emotion/native").StyledComponent<import("react-native").TouchableOpacityProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & StyledChipWrapperProps, {}, {
+    ref?: import("react").Ref<TouchableOpacity> | undefined;
+}>;
+declare const StyledChipIcon: import("@emotion/native").StyledComponent<import("../Icon").IconProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, {}, {}>;
+export { StyledChipWrapper, StyledChipIcon };

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

@@ -0,0 +1,31 @@
+import React, { ReactNode } from 'react';
+import { ViewProps } from 'react-native';
+import { IconName } from '../Icon';
+export interface ChipProps extends ViewProps {
+    /**
+     * The label of the chip.
+     */
+    label: string | ReactNode;
+    /**
+     * Variant of the chip.
+     */
+    variant?: 'outlined' | 'filled' | 'compact' | 'compact-outlined';
+    /**
+     * Whether the chip is selected.
+     */
+    selected?: boolean;
+    /**
+     * Icon of the chip.
+     */
+    icon?: IconName;
+    /**
+     * Callback when the chip is pressed.
+     */
+    onPress?: () => void;
+    /**
+     * Whether to show the selected icon when using outlined variant.
+     */
+    showSelectedIcon?: boolean;
+}
+declare const Chip: ({ label, variant, selected, icon, onPress, showSelectedIcon, ...otherProps }: ChipProps) => React.JSX.Element;
+export default Chip;