@hero-design/rn 9.0.0-0 → 9.0.0-alpha.0

package/types/components/Portal/types.d.ts

@@ -0,0 +1,22 @@
+import type { ReactNode } from 'react';
+import type { ACTIONS } from './constants';
+export interface AddUpdatePortalAction {
+    type: ACTIONS;
+    hostName: string;
+    portalName: string;
+    node: ReactNode;
+}
+export interface RemovePortalAction {
+    type: ACTIONS;
+    hostName: string;
+    portalName: string;
+}
+export interface RegisterHostAction {
+    type: ACTIONS;
+    hostName: string;
+}
+export interface UnregisterHostAction {
+    type: ACTIONS;
+    hostName: string;
+}
+export declare type ActionTypes = AddUpdatePortalAction | RemovePortalAction | RegisterHostAction | UnregisterHostAction;

package/types/components/Portal/usePortal.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+export declare const usePortal: (hostName?: string) => {
+    registerHost: () => void;
+    deregisterHost: () => void;
+    addPortal: (name: string, node: ReactNode) => void;
+    updatePortal: (name: string, node: ReactNode) => void;
+    removePortal: (name: string) => void;
+};

package/types/components/Portal/usePortalState.d.ts

@@ -0,0 +1 @@
+export declare const usePortalState: (hostName: string) => import("./contexts").PortalType[];

package/types/components/Progress/StyledProgressBar.d.ts

@@ -1,20 +1,17 @@
-/// <reference types="react" />
 import { Animated, View } from 'react-native';
 import type { ViewProps } from 'react-native';
 import type { ThemeIntent } from './types';
 declare const StyledWrapper: import("@emotion/native").StyledComponent<ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & {
     themeIntent: ThemeIntent;
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
 declare const StyledInner: import("@emotion/native").StyledComponent<Animated.AnimatedProps<ViewProps & import("react").RefAttributes<View>> & {
-    children?: import("react").ReactNode;
-} & {
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & {
     themeIntent: ThemeIntent;
 }, {}, {}>;

package/types/components/Progress/StyledProgressCircle.d.ts

@@ -1,22 +1,21 @@
-/// <reference types="react" />
 import { View } from 'react-native';
 import type { ViewProps } from 'react-native';
 import type { ThemeIntent } from './types';
 declare const StyledContainer: import("@emotion/native").StyledComponent<ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
 declare const StyledHalfCircleWrapper: import("@emotion/native").StyledComponent<ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
 declare const StyledHalfCircleInnerFG: import("@emotion/native").StyledComponent<ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & {
     themeIntent: ThemeIntent;
 }, {}, {
@@ -24,7 +23,7 @@ declare const StyledHalfCircleInnerFG: import("@emotion/native").StyledComponent
 }>;
 declare const StyledHalfCircleInnerBG: import("@emotion/native").StyledComponent<ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & {
     themeIntent: ThemeIntent;
 }, {}, {
@@ -32,13 +31,13 @@ declare const StyledHalfCircleInnerBG: import("@emotion/native").StyledComponent
 }>;
 declare const StyledDonutCircle: import("@emotion/native").StyledComponent<ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
 declare const StyledStrokeEnd: import("@emotion/native").StyledComponent<ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & {
     themeIntent: ThemeIntent;
 }, {}, {

package/types/components/Radio/Radio.d.ts

@@ -1,5 +1,5 @@
-import type { ReactElement } from 'react';
-import type { StyleProp, ViewStyle } from 'react-native';
+import type { ReactElement, ReactNode } from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
 export interface RadioProps {
     /**
      * Whether the radio is checked.
@@ -17,10 +17,22 @@ export interface RadioProps {
      * Additional style.
      */
     style?: StyleProp<ViewStyle>;
+    /**
+     * Radio subtext.
+     */
+    subText?: string;
     /**
      * Testing id of the component.
      */
     testID?: string;
+    /**
+     * Idle background color of the Radio.
+     */
+    inactiveIntent?: 'light' | 'dark';
+    /**
+     * Children to be rendered inside the component.
+     */
+    children?: ReactNode;
 }
-declare const Radio: ({ text, checked, onPress, style, testID, }: RadioProps) => ReactElement;
+declare const Radio: ({ text, checked, onPress, style, subText, testID, inactiveIntent, children, }: RadioProps) => ReactElement;
 export default Radio;

package/types/components/Radio/RadioGroup.d.ts

@@ -27,6 +27,10 @@ export interface RadioGroupProps<T> {
      * Testing id of the component.
      */
     testID?: string;
+    /**
+     * Idle background color of the Radio.
+     */
+    inactiveIntent?: 'light' | 'dark';
 }
-declare const RadioGroup: <T>({ value, onPress, options, keyExtractor, style, testID, }: RadioGroupProps<T>) => ReactElement;
+declare const RadioGroup: <T>({ value, onPress, options, keyExtractor, style, testID, inactiveIntent, }: RadioGroupProps<T>) => ReactElement;
 export default RadioGroup;

package/types/components/Radio/StyledRadio.d.ts

@@ -1,21 +1,30 @@
-/// <reference types="react" />
 import { View } from 'react-native';
+declare type RadioIntent = 'light' | 'dark';
 declare const Circle: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
 declare const InnerCircle: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
 declare const Spacer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & {
+    themeIntent: RadioIntent;
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
-export { Circle, InnerCircle, Spacer };
+declare const StyledRadio: import("@emotion/native").StyledComponent<import("../List/ListItem").ListItemProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & {
+    themeIntent: RadioIntent;
+    themeChecked: boolean;
+}, {}, {}>;
+export { Circle, InnerCircle, Spacer, StyledRadio };

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

@@ -1,5 +1,4 @@
-/// <reference types="react" />
 declare const CompoundRadio: {
-    readonly Group: <T>({ value, onPress, options, keyExtractor, style, testID, }: import("./RadioGroup").RadioGroupProps<T>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    readonly Group: <T>({ value, onPress, options, keyExtractor, style, testID, inactiveIntent, }: import("./RadioGroup").RadioGroupProps<T>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
 };
 export default CompoundRadio;

package/types/components/Radio/types.d.ts

@@ -1,5 +1,8 @@
+import { ReactNode } from 'react';
 export declare type OptionType<T> = {
     value: T;
     text: string;
+    subText?: string;
     key?: string;
+    children?: ReactNode;
 };

package/types/components/Rate/StyledRate.d.ts

@@ -0,0 +1,10 @@
+import { Animated, View } from 'react-native';
+declare const StyledWrapper: import("@emotion/native").StyledComponent<import("../Box").BoxProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, {}, {}>;
+declare const StyledIconWrapper: import("@emotion/native").StyledComponent<Animated.AnimatedProps<import("react-native").ViewProps & import("react").RefAttributes<View>> & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, {}, {}>;
+export { StyledWrapper, StyledIconWrapper };

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

@@ -0,0 +1,29 @@
+import React from 'react';
+import { ViewProps } from 'react-native';
+export interface RateOption<T extends string | number> {
+    value: T;
+}
+export interface RateProps<T extends string | number> extends ViewProps {
+    /**
+     * Options for rate component.
+     */
+    options: RateOption<T>[];
+    /**
+     * Value of the component.
+     */
+    value?: T;
+    /**
+     * Callback when value changes.
+     */
+    onChange?: (value: T) => void;
+    /**
+     * Whether the component is readonly.
+     */
+    readonly?: boolean;
+    /**
+     * Whether the component is disabled.
+     */
+    disabled?: boolean;
+}
+declare const Rate: <T extends string | number>({ options, value, onChange, readonly, disabled, ...otherProps }: RateProps<T>) => React.JSX.Element;
+export default Rate;

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

@@ -1,4 +1,5 @@
+import React from 'react';
 import { RefreshControlProps as NativeRefreshControlProps } from 'react-native';
 export declare type RefreshControlProps = Omit<NativeRefreshControlProps, 'colors' | 'tintColor'>;
-declare const RefreshControl: ({ ...props }: RefreshControlProps) => JSX.Element;
+declare const RefreshControl: ({ ...props }: RefreshControlProps) => React.JSX.Element;
 export default RefreshControl;

package/types/components/RichTextEditor/EditorEvent.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="node" />
 import { EventEmitter } from 'events';
 declare const emitter: EventEmitter;
 export { emitter };

package/types/components/RichTextEditor/EditorToolbar.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { ToolbarButtonName } from './types';
 export interface EditorToolbarProps {
     /**
@@ -13,5 +14,5 @@ export interface EditorToolbarProps {
      */
     testID?: string;
 }
-declare const EditorToolbar: ({ name, buttons, testID, }: EditorToolbarProps) => JSX.Element | null;
+declare const EditorToolbar: ({ name, buttons, testID, }: EditorToolbarProps) => React.JSX.Element | null;
 export default EditorToolbar;

package/types/components/RichTextEditor/MentionList.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 interface OnSelectOptionsType<TMetaData> {
     highlighted: boolean;
     meta?: TMetaData;
@@ -12,5 +13,5 @@ export interface MentionListProps<TMetaData = unknown> {
      */
     render: (searchText: string, onSelect: (id: string, name: string, options?: OnSelectOptionsType<TMetaData>) => void) => JSX.Element;
 }
-declare const MentionList: <TMetaData>({ name: eventPrefix, render, }: MentionListProps<TMetaData>) => JSX.Element | null;
+declare const MentionList: <TMetaData>({ name: eventPrefix, render, }: MentionListProps<TMetaData>) => React.JSX.Element | null;
 export default MentionList;

package/types/components/RichTextEditor/RichTextEditor.d.ts

@@ -66,5 +66,5 @@ export interface RichTextEditorProps {
      */
     forwardedRef?: Ref<RichTextEditorRef>;
 }
-declare const _default: React.ForwardRefExoticComponent<Omit<RichTextEditorProps, "forwardedRef"> & React.RefAttributes<RichTextEditorRef>>;
-export default _default;
+declare const RichTextEditorWithRef: React.ForwardRefExoticComponent<Omit<RichTextEditorProps, "forwardedRef"> & React.RefAttributes<RichTextEditorRef>>;
+export default RichTextEditorWithRef;

package/types/components/RichTextEditor/StyledRichTextEditor.d.ts

@@ -1,15 +1,14 @@
-/// <reference types="react" />
 import { View } from 'react-native';
 import { WebView } from 'react-native-webview';
 export declare const StyledWrapper: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
 export declare const StyledWebView: import("@emotion/native").StyledComponent<import("react-native-webview/lib/WebViewTypes").IOSWebViewProps & import("react-native-webview/lib/WebViewTypes").AndroidWebViewProps & import("react-native-webview/lib/WebViewTypes").WindowsWebViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & {
     height: number | undefined;
 }, {}, {

package/types/components/RichTextEditor/StyledToolbar.d.ts

@@ -1,8 +1,7 @@
-/// <reference types="react" />
 import { TouchableOpacity, View } from 'react-native';
 export declare const StyledToolbarButton: import("@emotion/native").StyledComponent<import("react-native").TouchableOpacityProps & {
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & {
     selected: boolean;
 }, {}, {
@@ -10,13 +9,13 @@ export declare const StyledToolbarButton: import("@emotion/native").StyledCompon
 }>;
 export declare const StyledToolbar: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
 export declare const StyledSeparator: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;

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

@@ -1,8 +1,7 @@
-/// <reference types="react" />
 import type { RichTextEditorProps, RichTextEditorRef } from './RichTextEditor';
 export type { RichTextEditorProps, RichTextEditorRef };
 declare const _default: import("react").ForwardRefExoticComponent<Omit<RichTextEditorProps, "forwardedRef"> & import("react").RefAttributes<RichTextEditorRef>> & {
-    MentionList: <TMetaData>({ name: eventPrefix, render, }: import("./MentionList").MentionListProps<TMetaData>) => JSX.Element | null;
-    Toolbar: ({ name, buttons, testID, }: import("./EditorToolbar").EditorToolbarProps) => JSX.Element | null;
+    MentionList: <TMetaData>({ name: eventPrefix, render, }: import("./MentionList").MentionListProps<TMetaData>) => import("react").JSX.Element | null;
+    Toolbar: ({ name, buttons, testID, }: import("./EditorToolbar").EditorToolbarProps) => import("react").JSX.Element | null;
 };
 export default _default;

package/types/components/SectionHeading/StyledHeading.d.ts

@@ -1,20 +1,22 @@
-/// <reference types="react" />
 import { View } from 'react-native';
+declare type StyledHeadingProps = {
+    themeSize: 'small' | 'medium';
+};
 declare const StyledHeading: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, {}, {
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & StyledHeadingProps, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
 declare const StyledIconWrapper: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
 declare const StyledWrapper: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;

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

@@ -15,10 +15,12 @@ export interface SectionHeadingProps extends ViewProps {
      */
     rightChildren?: ReactElement;
     /**
+     * @deprecated fontSize will be removed in the next major release.
      * Size of the text.
      */
     fontSize?: 'small' | 'medium' | 'large' | 'xlarge';
     /**
+     * @deprecated fontWeight will be removed in the next major release.
      * Heading's font-weight.
      */
     fontWeight?: 'light' | 'regular' | 'semi-bold';
@@ -34,6 +36,10 @@ export interface SectionHeadingProps extends ViewProps {
      * Testing id of the component.
      */
     testID?: string;
+    /**
+     * Component size.
+     */
+    size?: 'small' | 'medium';
 }
-declare const SectionHeading: ({ icon, text, rightChildren, fontSize, intent, fontWeight, style, testID, }: SectionHeadingProps) => ReactElement;
+declare const SectionHeading: ({ icon, text, rightChildren, fontSize, intent, fontWeight, size, style, testID, }: SectionHeadingProps) => ReactElement;
 export default SectionHeading;

package/types/components/Select/BaseOptionList.d.ts

@@ -4,5 +4,5 @@ import type { OptionType, SelectProps, SectionType } from './types';
 export declare type BaseOptionListProps<V, T extends OptionType<V>> = Pick<SelectProps<V, T>, 'keyExtractor' | 'loading' | 'onEndReached' | 'onQueryChange'> & {
     sectionListRef?: React.RefObject<SectionList<T, SectionType>>;
 } & SectionListProps<T, SectionType>;
-declare const BaseOptionList: <V, T extends OptionType<V>>({ keyExtractor, loading, onEndReached, onQueryChange, sections, renderItem, sectionListRef, ...rest }: BaseOptionListProps<V, T>) => JSX.Element;
+declare const BaseOptionList: <V, T extends OptionType<V>>({ keyExtractor, loading, onEndReached, onQueryChange, sections, renderItem, sectionListRef, ...rest }: BaseOptionListProps<V, T>) => React.JSX.Element;
 export default BaseOptionList;

package/types/components/Select/Footer.d.ts

@@ -1,5 +1,6 @@
+import React from 'react';
 declare const Footer: ({ label, onPress }: {
     label: string;
     onPress: () => void;
-}) => JSX.Element;
+}) => React.JSX.Element;
 export default Footer;

package/types/components/Select/MultiSelect/Option.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { ReactElement } from 'react';
 declare const Option: ({ text, disabled, selected, onPress, highlighted, }: {
     text: string | ReactElement;
@@ -5,5 +6,5 @@ declare const Option: ({ text, disabled, selected, onPress, highlighted, }: {
     selected: boolean;
     onPress: () => void;
     highlighted?: boolean | undefined;
-}) => JSX.Element;
+}) => React.JSX.Element;
 export default Option;

package/types/components/Select/MultiSelect/OptionList.d.ts

@@ -1,8 +1,9 @@
+import React from 'react';
 import { BaseOptionListProps } from '../BaseOptionList';
 import type { MultiSelectProps } from '.';
 import type { OptionType } from '../types';
 declare type OptionListProps<V, T extends OptionType<V>> = Pick<MultiSelectProps<V, T>, 'keyExtractor' | 'loading' | 'onEndReached' | 'onQueryChange' | 'value' | 'renderOption'> & {
     onPress: (value: V[]) => void;
 } & BaseOptionListProps<V, T>;
-declare const OptionList: <V, T extends OptionType<V>>({ keyExtractor, loading, onEndReached, onPress, onQueryChange, sections, renderOption, value, sectionListRef, ...rest }: OptionListProps<V, T>) => JSX.Element;
+declare const OptionList: <V, T extends OptionType<V>>({ keyExtractor, loading, onEndReached, onPress, onQueryChange, sections, renderOption, value, sectionListRef, ...rest }: OptionListProps<V, T>) => React.JSX.Element;
 export default OptionList;

package/types/components/Select/MultiSelect/index.d.ts

@@ -22,5 +22,5 @@ export interface MultiSelectProps<V, T extends OptionType<V> = OptionType<V>> ex
      */
     renderSelectedValue?: (selectedValue: V[], inputProps: NativeTextInputProps) => React.ReactNode;
 }
-declare function MultiSelect<V, T extends OptionType<V>>({ footerLabel, label, loading, inputProps, onConfirm, onDismiss, onEndReached, onQueryChange, options, renderOption, renderSelectedValue, query, error, editable, disabled, required, style, testID, value, }: MultiSelectProps<V, T>): JSX.Element;
+declare function MultiSelect<V, T extends OptionType<V>>({ footerLabel, label, loading, inputProps, onConfirm, onDismiss, onEndReached, onQueryChange, options, renderOption, renderSelectedValue, query, error, editable, disabled, required, style, testID, value, }: MultiSelectProps<V, T>): React.JSX.Element;
 export default MultiSelect;

package/types/components/Select/SingleSelect/Option.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { ReactElement } from 'react';
 declare const Option: ({ text, disabled, selected, onPress, highlighted, }: {
     text: string | ReactElement;
@@ -5,5 +6,5 @@ declare const Option: ({ text, disabled, selected, onPress, highlighted, }: {
     selected: boolean;
     onPress: () => void;
     highlighted?: boolean | undefined;
-}) => JSX.Element;
+}) => React.JSX.Element;
 export default Option;

package/types/components/Select/SingleSelect/OptionList.d.ts

@@ -7,5 +7,5 @@ declare type OptionListProps<V, T extends OptionType<V>> = Pick<SingleSelectProp
     onPress: (value: V | null) => void;
     sectionListRef?: React.RefObject<SectionList<T, SectionType>>;
 } & BaseOptionListProps<V, T>;
-declare const OptionList: <V, T extends OptionType<V>>({ keyExtractor, loading, onEndReached, onPress, onQueryChange, sections, renderOption, value, sectionListRef, ...rest }: OptionListProps<V, T>) => JSX.Element;
+declare const OptionList: <V, T extends OptionType<V>>({ keyExtractor, loading, onEndReached, onPress, onQueryChange, sections, renderOption, value, sectionListRef, ...rest }: OptionListProps<V, T>) => React.JSX.Element;
 export default OptionList;

package/types/components/Select/SingleSelect/StyledSingleSelect.d.ts

@@ -1 +1 @@
-export declare const StyledOptionList: <V, T extends import("../types").OptionType<V>>({ keyExtractor, loading, onEndReached, onQueryChange, sections, renderItem, sectionListRef, ...rest }: import("../BaseOptionList").BaseOptionListProps<V, T>) => JSX.Element;
+export declare const StyledOptionList: <V, T extends import("../types").OptionType<V>>({ keyExtractor, loading, onEndReached, onQueryChange, sections, renderItem, sectionListRef, ...rest }: import("../BaseOptionList").BaseOptionListProps<V, T>) => import("react").JSX.Element;

package/types/components/Select/SingleSelect/index.d.ts

@@ -15,5 +15,5 @@ export interface SingleSelectProps<V, T extends OptionType<V> = OptionType<V>> e
      */
     renderSelectedValue?: (selectedValue: V | null, inputProps: NativeTextInputProps) => React.ReactNode;
 }
-declare const SingleSelect: <V, T extends OptionType<V>>({ label, loading, inputProps, onConfirm, onDismiss, onEndReached, onQueryChange, options, renderOption, renderSelectedValue, query, error, editable, disabled, required, style, testID, value, }: SingleSelectProps<V, T>) => JSX.Element;
+declare const SingleSelect: <V, T extends OptionType<V>>({ label, loading, inputProps, onConfirm, onDismiss, onEndReached, onQueryChange, options, renderOption, renderSelectedValue, query, error, editable, disabled, required, style, testID, value, }: SingleSelectProps<V, T>) => React.JSX.Element;
 export default SingleSelect;

package/types/components/Select/StyledSelect.d.ts

@@ -1,20 +1,19 @@
-/// <reference types="react" />
 import { SectionList, View } from 'react-native';
 declare const SectionSpacer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
 declare const OptionSpacer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
 declare const StyledSearchBar: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;

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

@@ -1,6 +1,5 @@
-/// <reference types="react" />
 import type { SectionData, CombinedOptionsType, OptionType } from './types';
-export declare const getKey: <V, T extends OptionType<V>>(option: T, index: number, keyExtractor?: ((opt: T, i?: number) => string) | undefined) => import("react").Key;
+export declare const getKey: <V, T extends OptionType<V>>(option: T, index: number, keyExtractor?: ((opt: T, i?: number) => string) | undefined) => string | number;
 export declare const isSections: <V, T extends OptionType<V>>(options: CombinedOptionsType<V, T>) => options is SectionData<V, T>[];
 export declare const toSections: <V, T extends OptionType<V>>(options: CombinedOptionsType<V, T>) => SectionData<V, T>[];
 export declare const toFlatOptions: <V, T extends OptionType<V>>(options: CombinedOptionsType<V, T>) => OptionType<V>[];

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

@@ -2,7 +2,7 @@ import MultiSelect from './MultiSelect';
 import type { MultiSelectProps } from './MultiSelect';
 import type { SingleSelectProps } from './SingleSelect';
 export type { MultiSelectProps, SingleSelectProps };
-declare const _default: (<V, T extends import("./types").OptionType<V>>({ label, loading, inputProps, onConfirm, onDismiss, onEndReached, onQueryChange, options, renderOption, renderSelectedValue, query, error, editable, disabled, required, style, testID, value, }: SingleSelectProps<V, T>) => JSX.Element) & {
+declare const _default: (<V, T extends import("./types").OptionType<V>>({ label, loading, inputProps, onConfirm, onDismiss, onEndReached, onQueryChange, options, renderOption, renderSelectedValue, query, error, editable, disabled, required, style, testID, value, }: SingleSelectProps<V, T>) => import("react").JSX.Element) & {
     Multi: typeof MultiSelect;
 };
 export default _default;

package/types/components/Skeleton/StyledSkeleton.d.ts

@@ -1,16 +1,15 @@
-/// <reference types="react" />
 declare type ThemeIntent = 'light' | 'dark';
 declare type ThemeVariant = 'circular' | 'rectangular' | 'rounded';
 declare const StyledContainer: import("@emotion/native").StyledComponent<import("../Box").BoxProps & {
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & {
     themeIntent: ThemeIntent;
     themeVariant: ThemeVariant;
 }, {}, {}>;
 declare const StyledGradientContainer: import("@emotion/native").StyledComponent<import("../Box").BoxProps & {
     theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & {
     themeVariant: ThemeVariant;
 }, {}, {}>;

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

@@ -1,3 +1,4 @@
+import React from 'react';
 import { ViewProps } from 'react-native';
 export interface SkeletonProps extends ViewProps {
     /**
@@ -9,5 +10,5 @@ export interface SkeletonProps extends ViewProps {
      */
     variant?: 'circular' | 'rectangular' | 'rounded';
 }
-declare const Skeleton: ({ intent, variant, style, onLayout, ...props }: SkeletonProps) => JSX.Element;
+declare const Skeleton: ({ intent, variant, style, onLayout, ...props }: SkeletonProps) => React.JSX.Element;
 export default Skeleton;