@hero-design/rn 7.18.1 → 7.20.0

package/types/components/Accordion/AccordionItem.d.ts

@@ -1,6 +1,6 @@
-import { ReactElement } from 'react';
-import { StyleProp, ViewStyle } from 'react-native';
-import { Variant } from './StyledAccordion';
+import type { ReactElement } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+import type { Variant } from './StyledAccordion';
 export declare type AccordionItemProps = {
     header: string | ReactElement;
     content: ReactElement;

package/types/components/Accordion/StyledAccordion.d.ts

@@ -1,32 +1,32 @@
 import { TouchableOpacity, View } from 'react-native';
 export declare type Variant = 'default' | 'card';
 export declare const StyledWrapper: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any>;
 }, {}, {
-    ref?: import("react").Ref<View> | undefined;
+    ref?: import("react").Ref<View>;
 }>;
 export declare const StyledItemWrapper: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any>;
 } & {
     themeVariant: Variant;
 }, {}, {
-    ref?: import("react").Ref<View> | undefined;
+    ref?: import("react").Ref<View>;
 }>;
 export declare const StyledHeaderWrapper: import("@emotion/native").StyledComponent<import("react-native").TouchableOpacityProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any>;
 }, {}, {
-    ref?: import("react").Ref<TouchableOpacity> | undefined;
+    ref?: import("react").Ref<TouchableOpacity>;
 }>;
 export declare const StyledCollapse: import("@emotion/native").StyledComponent<import("../Collapse").CollapseProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any>;
 }, {}, {}>;
 export declare const Spacer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any>;
 }, {}, {
-    ref?: import("react").Ref<View> | undefined;
+    ref?: import("react").Ref<View>;
 }>;

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

@@ -1,5 +1,6 @@
-import React, { Key, ReactElement } from 'react';
-import { StyleProp, ViewStyle } from 'react-native';
+import React from 'react';
+import type { Key, ReactElement } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
 export interface AccordionProps<K extends Key> {
     /**
      * List of accordion items to be rendered. Each item must have an unique key.

package/types/components/Alert/StyledAlert.d.ts

@@ -1,37 +1,38 @@
-import { TouchableOpacity, View, ViewProps } from 'react-native';
+import { TouchableOpacity, View } from 'react-native';
+import type { ViewProps } from 'react-native';
 declare const Container: import("@emotion/native").StyledComponent<ViewProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any>;
 } & {
     themeVariant: 'default' | 'round';
-    themeIntent: 'success' | 'info' | 'warning' | 'error';
+    themeIntent: 'success' | 'info' | 'warning' | 'error' | 'notification';
 }, {}, {
-    ref?: import("react").Ref<View> | undefined;
+    ref?: import("react").Ref<View>;
 }>;
 declare const IconContainer: import("@emotion/native").StyledComponent<ViewProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any>;
 }, {}, {
-    ref?: import("react").Ref<View> | undefined;
+    ref?: import("react").Ref<View>;
 }>;
 declare const TextContainer: import("@emotion/native").StyledComponent<ViewProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any>;
 }, {}, {
-    ref?: import("react").Ref<View> | undefined;
+    ref?: import("react").Ref<View>;
 }>;
 declare const ContentContainer: import("@emotion/native").StyledComponent<ViewProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any>;
 } & {
     showDivider: boolean;
 }, {}, {
-    ref?: import("react").Ref<View> | undefined;
+    ref?: import("react").Ref<View>;
 }>;
 declare const CTAWrapper: import("@emotion/native").StyledComponent<import("react-native").TouchableOpacityProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any>;
 }, {}, {
-    ref?: import("react").Ref<TouchableOpacity> | undefined;
+    ref?: import("react").Ref<TouchableOpacity>;
 }>;
 export { Container, ContentContainer, TextContainer, IconContainer, CTAWrapper, };

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

@@ -1,6 +1,6 @@
-import { ReactElement } from 'react';
-import { StyleProp, ViewStyle } from 'react-native';
-import { IconName } from '../Icon';
+import type { ReactElement } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+import type { IconName } from '../Icon';
 interface AlertProps {
     /**
      * Alert title.
@@ -20,7 +20,7 @@ interface AlertProps {
     /**
      * Visual intent color to apply to alert.
      */
-    intent?: 'success' | 'info' | 'warning' | 'error';
+    intent?: 'success' | 'info' | 'warning' | 'error' | 'notification';
     /**
      * Closing callback. When onClose is available, an X button will be rendered on the right side of alert. The callback will be called when user clicks on X button.
      */

package/types/components/Avatar/StyledAvatar.d.ts

@@ -1,45 +1,45 @@
 import { View, Image, TouchableOpacity, Text } from 'react-native';
-declare type ThemeSize = 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | 'xxxlarge' | 'xxxxlarge';
+declare type ThemeSize = 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | 'xxxlarge' | 'xxxxlarge' | 'xxxxxlarge';
 declare type ThemeIntent = 'primary' | 'info' | 'danger' | 'success' | 'warning';
 declare const StyledPressable: import("@emotion/native").StyledComponent<import("react-native").TouchableOpacityProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any>;
 } & {
     themeSize: ThemeSize;
     themeIntent: ThemeIntent;
 }, {}, {
-    ref?: import("react").Ref<TouchableOpacity> | undefined;
+    ref?: import("react").Ref<TouchableOpacity>;
 }>;
 declare const StyledView: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any>;
 } & {
     themeSize: ThemeSize;
     themeIntent: ThemeIntent;
 }, {}, {
-    ref?: import("react").Ref<View> | undefined;
+    ref?: import("react").Ref<View>;
 }>;
 declare const StyledTextWrapper: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any>;
 }, {}, {
-    ref?: import("react").Ref<View> | undefined;
+    ref?: import("react").Ref<View>;
 }>;
 declare const StyledText: import("@emotion/native").StyledComponent<import("react-native").TextProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any>;
 } & {
     themeSize: ThemeSize;
     themeIntent: ThemeIntent;
 }, {}, {
-    ref?: import("react").Ref<Text> | undefined;
+    ref?: import("react").Ref<Text>;
 }>;
 declare const StyledImage: import("@emotion/native").StyledComponent<import("react-native").ImageProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any>;
 } & {
     themeSize: ThemeSize;
 }, {}, {
-    ref?: import("react").Ref<Image> | undefined;
+    ref?: import("react").Ref<Image>;
 }>;
 export { StyledPressable, StyledView, StyledImage, StyledTextWrapper, StyledText, };

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

@@ -1,4 +1,4 @@
-import { ImageSourcePropType, StyleProp, ViewProps, ViewStyle } from 'react-native';
+import type { ImageSourcePropType, StyleProp, ViewProps, ViewStyle } from 'react-native';
 interface AvatarProps extends ViewProps {
     /** Callback function when pressing component. */
     onPress?: () => void;
@@ -11,7 +11,7 @@ interface AvatarProps extends ViewProps {
      */
     intent?: 'primary' | 'info' | 'danger' | 'success' | 'warning';
     /** Size of the avatar. */
-    size?: 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | 'xxxlarge' | 'xxxxlarge';
+    size?: 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | 'xxxlarge' | 'xxxxlarge' | 'xxxxxlarge';
     /**
      * Additional style.
      */
@@ -21,5 +21,5 @@ interface AvatarProps extends ViewProps {
      */
     testID?: string;
 }
-declare const Avatar: ({ onPress, source, testID, style, title, size, intent, }: AvatarProps) => JSX.Element | null;
+declare const Avatar: ({ onPress, source, testID, style, title, size, intent, }: AvatarProps) => JSX.Element;
 export default Avatar;

package/types/components/Badge/Status.d.ts

@@ -1,5 +1,5 @@
-import { StyleProp, ViewStyle, ViewProps } from 'react-native';
-import { ReactNode } from 'react';
+import type { StyleProp, ViewStyle, ViewProps } from 'react-native';
+import type { ReactNode } from 'react';
 export interface StatusProps extends ViewProps {
     children: ReactNode;
     /**

package/types/components/Badge/StyledBadge.d.ts

@@ -4,23 +4,23 @@ declare type ThemePadding = 'narrowContent' | 'wideContent';
 declare const StyledView: import("@emotion/native").StyledComponent<Animated.AnimatedProps<import("react-native").ViewProps & import("react").RefAttributes<import("react-native").View>> & {
     children?: import("react").ReactNode;
 } & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any>;
 } & {
     themeIntent: ThemeIntent;
     themePadding: ThemePadding;
 }, {}, {}>;
 declare const StyledText: import("@emotion/native").StyledComponent<import("react-native").TextProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any>;
 }, {}, {
-    ref?: import("react").Ref<Text> | undefined;
+    ref?: import("react").Ref<Text>;
 }>;
 declare const StyledStatus: import("@emotion/native").StyledComponent<Animated.AnimatedProps<import("react-native").ViewProps & import("react").RefAttributes<import("react-native").View>> & {
     children?: import("react").ReactNode;
 } & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any>;
 } & {
     themeIntent: ThemeIntent;
 }, {}, {}>;

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

@@ -1,5 +1,6 @@
-import { Animated, StyleProp, ViewStyle } from 'react-native';
+import { Animated } from 'react-native';
 import React from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
 interface BadgeProps extends React.ComponentProps<typeof Animated.View> {
     /**
      * Content of the Badge.

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

@@ -1,27 +1,27 @@
 import { View } from 'react-native';
 declare const BottomNavigationTab: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any>;
 } & {
-    themeVisibility?: boolean | undefined;
+    themeVisibility?: boolean;
 }, {}, {
-    ref?: import("react").Ref<View> | undefined;
+    ref?: import("react").Ref<View>;
 }>;
 declare const BottomNavigationContainer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any>;
 }, {}, {
-    ref?: import("react").Ref<View> | undefined;
+    ref?: import("react").Ref<View>;
 }>;
 declare const ContentWrapper: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any>;
 }, {}, {
-    ref?: import("react").Ref<View> | undefined;
+    ref?: import("react").Ref<View>;
 }>;
 declare const BottomBarWrapper: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any>;
 } & {
     themeInsets: {
         top: number;
@@ -30,22 +30,22 @@ declare const BottomBarWrapper: import("@emotion/native").StyledComponent<import
         left: number;
     };
 }, {}, {
-    ref?: import("react").Ref<View> | undefined;
+    ref?: import("react").Ref<View>;
 }>;
 declare const BottomBar: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any>;
 }, {}, {
-    ref?: import("react").Ref<View> | undefined;
+    ref?: import("react").Ref<View>;
 }>;
 declare const BottomBarItem: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any>;
 }, {}, {
-    ref?: import("react").Ref<View> | undefined;
+    ref?: import("react").Ref<View>;
 }>;
 declare const StyledBottomBarText: import("@emotion/native").StyledComponent<import("../Typography/Text").TextProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any>;
 }, {}, {}>;
 export { BottomBar, BottomBarItem, BottomNavigationTab, BottomNavigationContainer, BottomBarWrapper, ContentWrapper, StyledBottomBarText, };

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

@@ -1,6 +1,6 @@
-import { ReactNode } from 'react';
-import { StyleProp, ViewStyle, ViewProps } from 'react-native';
-import { IconName } from '../Icon';
+import type { ReactNode } from 'react';
+import type { StyleProp, ViewStyle, ViewProps } from 'react-native';
+import type { IconName } from '../Icon';
 export declare type BottomNavigationTabType = {
     key: string;
     title?: string;

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

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
 declare const Footer: ({ children, showDivider, }: {
     children: ReactNode;
     showDivider: boolean;

package/types/components/BottomSheet/Header.d.ts

@@ -1,8 +1,8 @@
-import { ReactElement } from 'react';
+import type { ReactElement } from 'react';
 declare const Header: ({ content, showDivider, onRequestClose, showCloseButton, }: {
     content: string | ReactElement;
     showDivider: boolean;
-    onRequestClose?: (() => void) | undefined;
+    onRequestClose?: () => void;
     showCloseButton: boolean;
 }) => JSX.Element;
 export default Header;

package/types/components/BottomSheet/StyledBottomSheet.d.ts

@@ -1,44 +1,45 @@
-import { Animated, SafeAreaView, View, ViewProps } from 'react-native';
+import { Animated, SafeAreaView, View } from 'react-native';
+import type { ViewProps } from 'react-native';
 declare const StyledWrapper: import("@emotion/native").StyledComponent<ViewProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any>;
 }, {}, {
-    ref?: import("react").Ref<View> | undefined;
+    ref?: import("react").Ref<View>;
 }>;
 declare const StyledBottomSheet: import("@emotion/native").StyledComponent<Animated.AnimatedProps<ViewProps & import("react").RefAttributes<SafeAreaView>> & {
     children?: import("react").ReactNode;
 } & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any>;
 }, {}, {}>;
 declare const StyledBackdrop: import("@emotion/native").StyledComponent<Animated.AnimatedProps<import("react-native").PressableProps & import("react").RefAttributes<View>> & {
     children?: import("react").ReactNode;
 } & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any>;
 }, {}, {}>;
 declare const StyledHeaderWrapper: import("@emotion/native").StyledComponent<ViewProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any>;
 }, {}, {
-    ref?: import("react").Ref<View> | undefined;
+    ref?: import("react").Ref<View>;
 }>;
 declare const StyledHeader: import("@emotion/native").StyledComponent<ViewProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any>;
 }, {}, {
-    ref?: import("react").Ref<View> | undefined;
+    ref?: import("react").Ref<View>;
 }>;
 declare const StyledFooter: import("@emotion/native").StyledComponent<ViewProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any>;
 }, {}, {
-    ref?: import("react").Ref<View> | undefined;
+    ref?: import("react").Ref<View>;
 }>;
 declare const StyledIconWrapper: import("@emotion/native").StyledComponent<ViewProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any>;
 }, {}, {
-    ref?: import("react").Ref<View> | undefined;
+    ref?: import("react").Ref<View>;
 }>;
 export { StyledWrapper, StyledHeaderWrapper, StyledHeader, StyledFooter, StyledIconWrapper, StyledBottomSheet, StyledBackdrop, };

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

@@ -1,5 +1,5 @@
-import { ReactElement, ReactNode } from 'react';
-import { StyleProp, ViewStyle } from 'react-native';
+import type { ReactElement, ReactNode } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
 interface BottomSheetProps {
     /**
      * Bottom sheet open state.

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

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