@hero-design/rn 7.4.0 → 7.5.0

package/playground/src/Button.tsx~origin_master

@@ -1,170 +0,0 @@
-import React from 'react';
-import { ScrollView, View } from 'react-native';
-
-import { Button, Typography, useTheme } from '../../src/index';
-
-const ButtonPlayground = (): JSX.Element => {
-  const theme = useTheme();
-  return (
-    <ScrollView style={{ padding: theme.space.small }}>
-      <Typography.Text style={{ marginBottom: theme.space.xsmall }}>
-        Variants
-      </Typography.Text>
-      <View
-        style={{
-          flexDirection: 'column',
-          marginBottom: theme.space.large,
-        }}
-      >
-        <View
-          style={{
-            backgroundColor: theme.colors.primary,
-            paddingVertical: theme.space.large,
-            marginBottom: theme.space.medium,
-          }}
-        >
-          <Button
-            text="Basic Transparent"
-            variant="basic-transparent"
-            onPress={() => {}}
-          />
-        </View>
-        <Button
-          text="Primary (Filled)"
-          variant="filled"
-          intent="primary"
-          onPress={() => {}}
-          style={{ marginBottom: theme.space.medium }}
-        />
-        <Button
-          text="Secondary (Filled)"
-          variant="filled"
-          intent="secondary"
-          onPress={() => {}}
-          style={{ marginBottom: theme.space.medium }}
-        />
-        <Button
-          text="Primary (Outlined)"
-          variant="outlined"
-          intent="primary"
-          onPress={() => {}}
-          style={{ marginBottom: theme.space.medium }}
-        />
-        <Button
-          text="Secondary (Outlined)"
-          variant="outlined"
-          intent="secondary"
-          onPress={() => {}}
-          style={{ marginBottom: theme.space.medium }}
-        />
-      </View>
-      <Typography.Text style={{ marginBottom: theme.space.xsmall }}>
-        With Icon
-      </Typography.Text>
-      <View
-        style={{
-          flexDirection: 'column',
-          marginBottom: theme.space.large,
-        }}
-      >
-        <Button
-          text="Add Item"
-          variant="filled"
-          intent="primary"
-          icon="add"
-          onPress={() => {}}
-          style={{ marginBottom: theme.space.medium }}
-        />
-        <Button
-          text="Delete"
-          variant="filled"
-          intent="primary"
-          icon="trash-bin-outlined"
-          onPress={() => {}}
-          style={{ marginBottom: theme.space.medium }}
-        />
-        <Button
-          text="More"
-          variant="outlined"
-          intent="secondary"
-          rightIcon="arrow-down"
-          onPress={() => {}}
-          style={{ marginBottom: theme.space.medium }}
-        />
-      </View>
-      <Typography.Text style={{ marginBottom: theme.space.xsmall }}>
-        Loading
-      </Typography.Text>
-      <View
-        style={{
-          flexDirection: 'column',
-          marginBottom: theme.space.large,
-        }}
-      >
-        <View
-          style={{
-            backgroundColor: theme.colors.primary,
-            paddingVertical: theme.space.large,
-            marginBottom: theme.space.medium,
-          }}
-        >
-          <Button
-            text="Basic Transparent (Loading)"
-            variant="basic-transparent"
-            onPress={() => {}}
-            loading
-          />
-        </View>
-        <Button
-          text="Filled (Loading)"
-          variant="filled"
-          intent="primary"
-          onPress={() => {}}
-          style={{ marginBottom: theme.space.medium }}
-          loading
-        />
-        <Button
-          text="Outlined (Loading)"
-          variant="outlined"
-          intent="primary"
-          onPress={() => {}}
-          style={{ marginBottom: theme.space.medium }}
-          loading
-        />
-      </View>
-      <Typography.Text style={{ marginBottom: theme.space.xsmall }}>
-        Disabled
-      </Typography.Text>
-      <View
-        style={{
-          flexDirection: 'column',
-          marginBottom: theme.space.large,
-        }}
-      >
-        <Button
-          text="Basic Transparent (Disabled)"
-          variant="basic-transparent"
-          onPress={() => {}}
-          style={{ marginBottom: theme.space.medium }}
-          disabled
-        />
-        <Button
-          text="Filled (Disabled)"
-          variant="filled"
-          onPress={() => {}}
-          style={{ marginBottom: theme.space.medium }}
-          disabled
-        />
-        <Button
-          text="Outlined (Disabled)"
-          variant="outlined"
-          onPress={() => {}}
-          style={{ marginBottom: theme.space.medium }}
-          disabled
-        />
-      </View>
-    </ScrollView>
-  );
-};
-
-export default ButtonPlayground;

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

@@ -1,2 +0,0 @@
-declare const AvatarPlayground: () => JSX.Element;
-export default AvatarPlayground;

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

@@ -1,2 +0,0 @@
-declare const BadgePlayground: () => JSX.Element;
-export default BadgePlayground;

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

@@ -1,2 +0,0 @@
-declare const BottomNavigationPlayground: () => JSX.Element;
-export default BottomNavigationPlayground;

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

@@ -1,2 +0,0 @@
-declare const ButtonPlayground: () => JSX.Element;
-export default ButtonPlayground;

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

@@ -1,2 +0,0 @@
-declare const CardPlayground: () => JSX.Element;
-export default CardPlayground;

package/types/playground/components/Collapse.d.ts

@@ -1,2 +0,0 @@
-declare const CollapsePlayground: () => JSX.Element;
-export default CollapsePlayground;

package/types/playground/components/Divider.d.ts

@@ -1,2 +0,0 @@
-declare const DividerPlayground: () => JSX.Element;
-export default DividerPlayground;

package/types/playground/components/Drawer.d.ts

@@ -1,2 +0,0 @@
-declare const DrawerPlayground: () => JSX.Element;
-export default DrawerPlayground;

package/types/playground/components/FAB.d.ts

@@ -1,2 +0,0 @@
-declare const FABPlayground: () => JSX.Element;
-export default FABPlayground;

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

@@ -1,2 +0,0 @@
-declare const IconPlayground: () => JSX.Element;
-export default IconPlayground;

package/types/playground/components/IconButton.d.ts

@@ -1,2 +0,0 @@
-declare const IconButtonPlayground: () => JSX.Element;
-export default IconButtonPlayground;

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

@@ -1,2 +0,0 @@
-declare const ProgressPlayground: () => JSX.Element;
-export default ProgressPlayground;

package/types/playground/components/Tabs.d.ts

@@ -1,2 +0,0 @@
-declare const TabsPlayground: () => JSX.Element;
-export default TabsPlayground;

package/types/playground/components/Tag.d.ts

@@ -1,2 +0,0 @@
-declare const TagPlayground: () => JSX.Element;
-export default TagPlayground;

package/types/playground/components/Typography.d.ts

@@ -1,2 +0,0 @@
-declare const TypographyPlayground: () => JSX.Element;
-export default TypographyPlayground;

package/types/playground/index.d.ts

@@ -1,2 +0,0 @@
-declare const App: () => JSX.Element | null;
-export default App;

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

@@ -1,46 +0,0 @@
-/// <reference types="react" />
-import { View, Image, TouchableOpacity, Text } from 'react-native';
-declare type ThemeSize = 'small' | 'medium' | 'large' | 'xlarge';
-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;
-} & {
-    themeSize: ThemeSize;
-    themeIntent: ThemeIntent;
-}, {}, {
-    ref?: import("react").Ref<TouchableOpacity> | undefined;
-}>;
-declare const StyledView: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & {
-    themeSize: ThemeSize;
-    themeIntent: ThemeIntent;
-}, {}, {
-    ref?: import("react").Ref<View> | undefined;
-}>;
-declare const StyledTextWrapper: 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 StyledText: import("@emotion/native").StyledComponent<import("react-native").TextProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & {
-    themeSize: ThemeSize;
-    themeIntent: ThemeIntent;
-}, {}, {
-    ref?: import("react").Ref<Text> | undefined;
-}>;
-declare const StyledImage: import("@emotion/native").StyledComponent<import("react-native").ImageProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & {
-    themeSize: ThemeSize;
-}, {}, {
-    ref?: import("react").Ref<Image> | undefined;
-}>;
-export { StyledPressable, StyledView, StyledImage, StyledTextWrapper, StyledText, };

package/types/src/components/Avatar/__tests__/StyledAvatar.spec.d.ts

@@ -1 +0,0 @@
-export {};

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

@@ -1,25 +0,0 @@
-import { ImageSourcePropType, StyleProp, ViewProps, ViewStyle } from 'react-native';
-interface AvatarProps extends ViewProps {
-    /** Callback function when pressing component. */
-    onPress?: () => void;
-    /** Image source to be displayed on avatar. */
-    source?: ImageSourcePropType;
-    /** Renders title in the placeholder. */
-    title?: string;
-    /**
-     * Intent of the Icon.
-     */
-    intent?: 'primary' | 'info' | 'danger' | 'success' | 'warning';
-    /** Size of the avatar. */
-    size?: 'small' | 'medium' | 'large' | 'xlarge';
-    /**
-     * Addditional style.
-     */
-    style?: StyleProp<ViewStyle>;
-    /**
-     * Testing id of the component.
-     */
-    testID?: string;
-}
-declare const Avatar: ({ onPress, source, testID, style, title, size, intent, }: AvatarProps) => JSX.Element | null;
-export default Avatar;

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

@@ -1,24 +0,0 @@
-import { StyleProp, ViewStyle, ViewProps } from 'react-native';
-import { ReactNode } from 'react';
-export interface StatusProps extends ViewProps {
-    children: ReactNode;
-    /**
-     * Whether the Status Badge is visible.
-     */
-    visible?: boolean;
-    /**
-    /**
-     * Visual intent color to apply to Status Badge.
-     */
-    intent?: 'success' | 'warning' | 'danger' | 'info' | 'archived';
-    /**
-     * Additional style.
-     */
-    style?: StyleProp<ViewStyle>;
-    /**
-     * Testing id of the component.
-     */
-    testID?: string;
-}
-declare const Status: ({ children, visible, intent, style, testID, ...nativeProps }: StatusProps) => JSX.Element;
-export default Status;

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

@@ -1,28 +0,0 @@
-/// <reference types="react" />
-import { Animated, Text } from 'react-native';
-declare type ThemeIntent = 'success' | 'warning' | 'danger' | 'info' | 'archived';
-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;
-} & {
-    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;
-}, {}, {
-    ref?: import("react").Ref<Text> | undefined;
-}>;
-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;
-} & {
-    themeIntent: ThemeIntent;
-}, {}, {}>;
-export { StyledView, StyledText, StyledStatus };

package/types/src/components/Badge/__tests__/Badge.spec.d.ts

@@ -1 +0,0 @@
-export {};

package/types/src/components/Badge/__tests__/Status.spec.d.ts

@@ -1 +0,0 @@
-export {};

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

@@ -1,32 +0,0 @@
-import { Animated, StyleProp, ViewStyle } from 'react-native';
-import React from 'react';
-interface BadgeProps extends React.ComponentProps<typeof Animated.View> {
-    /**
-     * Content of the Badge.
-     */
-    content: string | number;
-    /**
-     * Whether the Badge is visible.
-     */
-    visible?: boolean;
-    /**
-     * The maximum number displayed on the badge. If number exceeds this value, `${max}+` are displayed instead. (Only applied when content is number.)
-     */
-    max?: number;
-    /**
-     * Visual intent color to apply to Badge.
-     */
-    intent?: 'success' | 'warning' | 'danger' | 'info' | 'archived';
-    /**
-     * Additional style.
-     */
-    style?: StyleProp<ViewStyle>;
-    /**
-     * Testing id of the component.
-     */
-    testID?: string;
-}
-declare const _default: (({ content: originalContent, visible, max, intent, style, testID, ...nativeProps }: BadgeProps) => JSX.Element) & {
-    Status: ({ children, visible, intent, style, testID, ...nativeProps }: import("./Status").StatusProps) => JSX.Element;
-};
-export default _default;

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

@@ -1,52 +0,0 @@
-/// <reference types="react" />
-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;
-} & {
-    themeVisibility?: boolean | undefined;
-}, {}, {
-    ref?: import("react").Ref<View> | undefined;
-}>;
-declare const BottomNavigationContainer: 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 ContentWrapper: 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 BottomBarWrapper: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & {
-    themeInsets: {
-        top: number;
-        right: number;
-        bottom: number;
-        left: number;
-    };
-}, {}, {
-    ref?: import("react").Ref<View> | undefined;
-}>;
-declare const BottomBar: 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 BottomBarItem: 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 StyledBottomBarText: import("@emotion/native").StyledComponent<import("../Typography/Text").TextProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, {}, {}>;
-export { BottomBar, BottomBarItem, BottomNavigationTab, BottomNavigationContainer, BottomBarWrapper, ContentWrapper, StyledBottomBarText, };

package/types/src/components/BottomNavigation/__tests__/index.spec.d.ts

@@ -1 +0,0 @@
-export {};

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

@@ -1,45 +0,0 @@
-import { ReactNode } from 'react';
-import { StyleProp, ViewStyle, ViewProps } from 'react-native';
-import { IconName } from '../Icon';
-export declare type BottomNavigationTabType = {
-    key: string;
-    title?: string;
-    icon: IconName;
-    component: ReactNode;
-    testID?: string;
-};
-interface BottomNavigationProps extends ViewProps {
-    /**
-     * Callback which is called on tab press, receiving key of upcoming active Tab.
-     */
-    onTabPress: (key: string) => void;
-    /**
-     * Whether inactive tabs should be removed and unmounted in React.
-     * Defaults to `false`.
-     */
-    renderActiveTabOnly?: boolean;
-    /**
-     * Current selected tab key.
-     */
-    selectedTabKey: string;
-    /**
-     * List of Tabs to be rendered. Each Tab must have an unique key.
-     */
-    tabs: {
-        key: string;
-        title?: string;
-        icon: IconName;
-        component: ReactNode;
-        testID?: string;
-    }[];
-    /**
-     * Additional style.
-     */
-    style?: StyleProp<ViewStyle>;
-    /**
-     * Testing id of the component.
-     */
-    testID?: string;
-}
-declare const BottomNavigation: ({ onTabPress, renderActiveTabOnly, selectedTabKey, tabs, ...nativeProps }: BottomNavigationProps) => JSX.Element;
-export default BottomNavigation;

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

@@ -1,57 +0,0 @@
-import { ReactChild } from 'react';
-import { StyleProp, ViewStyle } from 'react-native';
-import { IconName } from '../Icon';
-import { Intent, ThemeVariant } from './StyledButton';
-export interface ButtonProps {
-    /**
-     * Helps users understand what will happen when they perform an action on the accessibility element when that result is not clear from the accessibility label.
-     */
-    accessibilityHint?: string;
-    /**
-     * A succinct label in a localized string that identifies the accessibility element
-     */
-    accessibilityLabel?: string;
-    /**
-     * Disable state of button.
-     */
-    disabled?: boolean;
-    /**
-     * Places an icon within the button, before the button's text
-     */
-    icon?: IconName;
-    /**
-     * Visual intent color to apply to button. It is required for `filled`, `outlined` and `text` variants.
-     */
-    intent?: 'primary' | 'secondary';
-    /**
-     * Loading state of button.
-     */
-    loading?: boolean;
-    /**
-     * Set the handler to handle press event.
-     */
-    onPress: () => void;
-    /**
-     * Places an icon within the button, after the button's text
-     */
-    rightIcon?: IconName;
-    /**
-     * Addditional style.
-     */
-    style?: StyleProp<ViewStyle>;
-    /**
-     * Testing id of the component.
-     */
-    testID?: string;
-    /**
-     * Button label.
-     */
-    text: ReactChild;
-    /**
-     * Button type.
-     */
-    variant?: 'basic-transparent' | 'filled' | 'outlined';
-}
-export declare const getThemeVariant: (variant: 'basic-transparent' | 'filled' | 'outlined', intent: Intent) => ThemeVariant;
-declare const Button: ({ accessibilityHint, accessibilityLabel, disabled, icon, intent, loading, onPress, rightIcon, style, testID, text, variant, }: ButtonProps) => JSX.Element;
-export default Button;

package/types/src/components/Button/IconButton.d.ts

@@ -1,34 +0,0 @@
-import { StyleProp, ViewStyle, TouchableOpacityProps } from 'react-native';
-import { IconProps, IconName } from '../Icon';
-export interface IconButtonProps {
-    /**
-     * Set how far you can touch from the button.
-     */
-    hitSlop?: TouchableOpacityProps['hitSlop'];
-    /**
-     * Name of the Icon.
-     */
-    icon: IconName;
-    /**
-     * Intent of the Icon.
-     */
-    intent?: IconProps['intent'];
-    /**
-     * Set the handler to handle press event.
-     */
-    onPress: () => void;
-    /**
-     * Size of the Icon.
-     */
-    size?: IconProps['size'];
-    /**
-     * Additional style.
-     */
-    style?: StyleProp<ViewStyle>;
-    /**
-     * Testing id of component.
-     */
-    testID?: string;
-}
-declare const IconButton: ({ hitSlop, onPress, icon, testID, style, size, intent, }: IconButtonProps) => JSX.Element;
-export default IconButton;

package/types/src/components/Button/LoadingIndicator/StyledLoadingIndicator.d.ts

@@ -1,20 +0,0 @@
-/// <reference types="react" />
-import { View, ViewProps } from 'react-native';
-import { Theme } from '@emotion/react';
-declare type ThemeVariant = 'basic-transparent' | 'filled-primary' | 'filled-secondary' | 'outlined-primary' | 'outlined-secondary';
-declare const StyledLoadingIndicatorWrapper: import("@emotion/native").StyledComponent<ViewProps & {
-    theme?: Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, {}, {
-    ref?: import("react").Ref<View> | undefined;
-}>;
-declare const StyledLoadingDot: import("@emotion/native").StyledComponent<ViewProps & {
-    theme?: Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & {
-    size?: number | undefined;
-    themeVariant: ThemeVariant;
-}, {}, {
-    ref?: import("react").Ref<View> | undefined;
-}>;
-export { StyledLoadingIndicatorWrapper, StyledLoadingDot };

package/types/src/components/Button/LoadingIndicator/__tests__/StyledLoadingIndicator.spec.d.ts

@@ -1 +0,0 @@
-export {};

package/types/src/components/Button/LoadingIndicator/__tests__/index.spec.d.ts

@@ -1 +0,0 @@
-export {};

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

@@ -1,26 +0,0 @@
-import { StyleProp, ViewStyle, ViewProps } from 'react-native';
-declare type ThemeVariant = 'basic-transparent' | 'filled-primary' | 'filled-secondary' | 'outlined-primary' | 'outlined-secondary';
-interface LoadingIndicatorProps extends ViewProps {
-    /**
-     * Size of the loading dot.
-     */
-    count?: number;
-    /**
-     * Size of the loading dot.
-     */
-    size?: number;
-    /**
-     * Additional style.
-     */
-    style?: StyleProp<ViewStyle>;
-    /**
-     * Testing id of the component.
-     */
-    testID?: string;
-    /**
-     * Testing id of the component.
-     */
-    themeVariant: ThemeVariant;
-}
-declare const LoadingIndicator: ({ count, size, testID, themeVariant, ...nativeProps }: LoadingIndicatorProps) => JSX.Element;
-export default LoadingIndicator;