@hero-design/rn 7.0.4 → 7.1.0

package/types/components/Card/__tests__/Card.spec.d.ts

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

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

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

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

@@ -0,0 +1,5 @@
+import { ViewProps } from 'react-native';
+interface CardProps extends ViewProps {
+}
+declare const Card: (props: CardProps) => JSX.Element;
+export default Card;

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

@@ -0,0 +1,7 @@
+import { View } from 'react-native';
+declare type MarginSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+declare const StyledDivider: import("styled-components").StyledComponent<typeof View, import("../../theme").Theme, {
+    themeMarginHorizontal?: MarginSize | undefined;
+    themeMarginVertical?: MarginSize | undefined;
+}, never>;
+export { StyledDivider };

package/types/components/Divider/__tests__/StyledDivider.spec.d.ts

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

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

@@ -0,0 +1,12 @@
+interface DividerProps {
+    /**
+     * Horizontal margin size. There is no margin by default.
+     */
+    marginHorizontal?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+    /**
+     * Vertical margin size. There is no margin by default.
+     */
+    marginVertical?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+}
+declare const Divider: ({ marginHorizontal, marginVertical }: DividerProps) => JSX.Element;
+export default Divider;

package/types/index.d.ts

@@ -1,4 +1,5 @@
-import { ThemeProvider, useTheme } from './styled-components';
+import { ThemeProvider, useTheme } from 'styled-components-native';
 import theme, { getTheme } from './theme';
-import ExampleComponent from './components/ExampleComponent';
-export { theme, getTheme, useTheme, ThemeProvider, ExampleComponent };
+import Divider from './components/Divider';
+import Card from './components/Card';
+export { theme, getTheme, useTheme, ThemeProvider, Divider, Card };

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

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

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

@@ -1,16 +1,16 @@
-import { StyleProp, ViewStyle } from 'react-native';
+import { StyleProp, ViewStyle, ViewProps } from 'react-native';
 import { ReactElement } from 'react';
-interface BadgeProps {
+interface BadgeProps extends ViewProps {
     /**
-     * Content of the `Badge`.
+     * Content of the Badge.
      */
     content: string;
     /**
-     * Visual intent color to apply to `Badge`.
+     * Visual intent color to apply to Badge.
      */
     intent?: 'success' | 'warning' | 'danger' | 'info';
     /**
-     * Addditional style to be applied for `Badge`.
+     * Addditional style.
      */
     style?: StyleProp<ViewStyle>;
     /**
@@ -18,5 +18,5 @@ interface BadgeProps {
      */
     testID?: string;
 }
-declare const Badge: ({ content, intent, style, testID, }: BadgeProps) => ReactElement;
+declare const Badge: ({ content, intent, style, testID, ...nativeProps }: BadgeProps) => ReactElement;
 export default Badge;

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

@@ -1,5 +1,18 @@
-import { ViewProps } from 'react-native';
+import { ReactNode } from 'react';
+import { StyleProp, ViewStyle, ViewProps } from 'react-native';
 interface CardProps extends ViewProps {
+    /**
+     * Card's content.
+     */
+    children?: ReactNode;
+    /**
+     * Addditional style.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Testing id of the component.
+     */
+    testID?: string;
 }
 declare const Card: (props: CardProps) => JSX.Element;
 export default Card;

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

@@ -1,4 +1,5 @@
-interface DividerProps {
+import { StyleProp, ViewStyle, ViewProps } from 'react-native';
+interface DividerProps extends ViewProps {
     /**
      * Horizontal margin size. There is no margin by default.
      */
@@ -7,6 +8,14 @@ interface DividerProps {
      * Vertical margin size. There is no margin by default.
      */
     marginVertical?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+    /**
+     * Addditional style.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Testing id of the component.
+     */
+    testID?: string;
 }
-declare const Divider: ({ marginHorizontal, marginVertical }: DividerProps) => JSX.Element;
+declare const Divider: ({ marginHorizontal, marginVertical, style, testID, ...nativeProps }: DividerProps) => JSX.Element;
 export default Divider;

package/types/src/components/FAB/AnimatedFABIcon.d.ts

@@ -0,0 +1,6 @@
+import { IconProps } from '../Icon';
+declare type Props = {
+    active?: boolean;
+} & IconProps;
+declare const AnimatedFABIcon: ({ active, ...iconProps }: Props) => JSX.Element;
+export { AnimatedFABIcon };

package/types/src/components/FAB/StyledFABContainer.d.ts

@@ -0,0 +1,3 @@
+import { TouchableHighlight, TouchableHighlightProps } from 'react-native';
+declare const StyledFABContainer: import("styled-components").StyledComponent<typeof TouchableHighlight, import("../../theme").Theme, TouchableHighlightProps, never>;
+export { StyledFABContainer };

package/types/src/components/FAB/StyledFABIcon.d.ts

@@ -0,0 +1,3 @@
+import { IconProps } from '../Icon';
+declare const StyledFABIcon: import("styled-components").StyledComponent<({ icon, style, size, intent, testID, }: IconProps) => JSX.Element, import("../../theme").Theme, IconProps, never>;
+export { StyledFABIcon };

package/types/src/components/FAB/__tests__/AnimatedFABIcon.spec.d.ts

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

package/types/src/components/FAB/__tests__/StyledFABContainer.spec.d.ts

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

package/types/src/components/FAB/__tests__/StyledFABIcon.spec.d.ts

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

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

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

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

@@ -0,0 +1,30 @@
+import { StyleProp, ViewStyle } from 'react-native';
+import { IconProps } from '../Icon';
+interface FABProps {
+    /**
+     * Name of the Icon.
+     */
+    icon: IconProps['icon'];
+    /**
+     * This function is called on pressing the button.
+     * */
+    onPress?: () => void;
+    /**
+     * Specify if the button is animated.
+     */
+    animated?: boolean;
+    /**
+     * Specify if the button is in active state. It only works if animated is true.
+     */
+    active?: boolean;
+    /**
+     * Addditional style.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Testing id of the component.
+     */
+    testID?: string;
+}
+declare const FAB: ({ onPress, icon, animated, testID, active, style }: FABProps) => JSX.Element;
+export default FAB;

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

@@ -1,23 +1,23 @@
-import { StyleProp, ViewStyle } from 'react-native';
+import { StyleProp, TextStyle } from 'react-native';
 import IconList from './IconList';
 declare type IconName = typeof IconList[number];
-interface IconProps {
+export interface IconProps {
     /**
-     * Name of the `Icon`.
+     * Name of the Icon.
      */
     icon: IconName;
     /**
-     * Addditional style to be applied for `Icon`.
+     * Intent of the Icon.
      */
-    style?: StyleProp<ViewStyle>;
+    intent?: 'text' | 'primary' | 'info' | 'danger' | 'success' | 'warning';
     /**
-     * Size of the `Icon`.
+     * Size of the Icon.
      */
     size?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
     /**
-     * Intent of the `Icon`.
+     * Addditional style.
      */
-    intent?: 'text' | 'primary' | 'info' | 'danger' | 'success' | 'warning';
+    style?: StyleProp<TextStyle>;
     /**
      * Testing id of the component.
      */

package/types/src/components/Typography/Text/__tests__/StyledText.spec.d.ts

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

package/types/src/components/Typography/Text/__tests__/index.spec.d.ts

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

package/types/src/components/Typography/Text/index.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { TextProps as NativeTextProps } from 'react-native';
+import { TextProps as NativeTextProps, StyleProp, TextStyle } from 'react-native';
 interface TextProps extends NativeTextProps {
     /**
      * Text content.
@@ -17,6 +17,14 @@ interface TextProps extends NativeTextProps {
      * Visual intent color to apply to the text.
      */
     intent?: 'body' | 'subdued';
+    /**
+     * Addditional style.
+     */
+    style?: StyleProp<TextStyle>;
+    /**
+     * Testing id of the component.
+     */
+    testID?: string;
 }
 declare const Text: ({ children, fontSize, fontWeight, intent, ...nativeProps }: TextProps) => JSX.Element;
 export default Text;

package/types/src/index.d.ts

@@ -1,8 +1,10 @@
 import { ThemeProvider, useTheme } from 'styled-components-native';
 import theme, { getTheme } from './theme';
+import { scale } from './utils/scale';
 import Badge from './components/Badge';
 import Card from './components/Card';
 import Divider from './components/Divider';
 import Icon from './components/Icon';
 import Typography from './components/Typography';
-export { theme, getTheme, useTheme, ThemeProvider, Badge, Card, Divider, Icon, Typography, };
+import FAB from './components/FAB';
+export { theme, getTheme, useTheme, scale, ThemeProvider, Badge, Card, Divider, Icon, Typography, FAB, };

package/types/src/theme/components/divider.d.ts

@@ -10,7 +10,7 @@ declare const getDividerTheme: (theme: GlobalTheme) => {
         large: string;
         xlarge: string;
     };
-    borderWiths: {
+    borderWidths: {
         default: string;
     };
 };

package/types/src/theme/components/fab.d.ts

@@ -0,0 +1,15 @@
+import { GlobalTheme } from '../global';
+declare const getFABTheme: (theme: GlobalTheme) => {
+    fontSizes: {
+        default: string;
+    };
+    colors: {
+        buttonBackground: string;
+        icon: string;
+    };
+    sizes: {
+        width: string;
+        height: string;
+    };
+};
+export default getFABTheme;

package/types/src/theme/index.d.ts

@@ -4,6 +4,7 @@ import getCardTheme from './components/card';
 import getDividerTheme from './components/divider';
 import getIconTheme from './components/icon';
 import getTypographyTheme from './components/typography';
+import getFABTheme from './components/fab';
 declare type Theme = GlobalTheme & {
     __hd__: {
         badge: ReturnType<typeof getBadgeTheme>;
@@ -11,6 +12,7 @@ declare type Theme = GlobalTheme & {
         divider: ReturnType<typeof getDividerTheme>;
         icon: ReturnType<typeof getIconTheme>;
         typography: ReturnType<typeof getTypographyTheme>;
+        fab: ReturnType<typeof getFABTheme>;
     };
 };
 declare const getTheme: (theme?: GlobalTheme) => Theme;

package/types/src/utils/__tests__/scale.spec.d.ts

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

package/types/src/utils/scale.d.ts

@@ -0,0 +1,2 @@
+export declare const BASE_WIDTH = 390;
+export declare const scale: (size: number) => number;

package/types/theme/__tests__/index.spec.d.ts

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

package/types/theme/components/card.d.ts

@@ -0,0 +1,10 @@
+import { GlobalTheme } from '../global';
+declare const getCardTheme: (theme: GlobalTheme) => {
+    radii: {
+        default: string;
+    };
+    padding: {
+        default: string;
+    };
+};
+export default getCardTheme;

package/types/theme/components/divider.d.ts

@@ -0,0 +1,17 @@
+import { GlobalTheme } from '../global';
+declare const getDividerTheme: (theme: GlobalTheme) => {
+    colors: {
+        default: string;
+    };
+    space: {
+        xsmall: string;
+        small: string;
+        medium: string;
+        large: string;
+        xlarge: string;
+    };
+    borderWiths: {
+        default: string;
+    };
+};
+export default getDividerTheme;

package/types/theme/global/borders.d.ts

@@ -0,0 +1,4 @@
+declare const borderWidths: {
+    base: number;
+};
+export { borderWidths };

package/types/theme/global/colors.d.ts

@@ -16,9 +16,11 @@ declare const systemPalette: {
     warningDark: string;
     warningBackground: string;
     platformBackground: string;
+    backgroundLight: string;
     backgroundDark: string;
     text: string;
     disabledText: string;
     invertedText: string;
+    outline: string;
 };
 export { palette, systemPalette };

package/types/theme/global/index.d.ts

@@ -16,10 +16,12 @@ declare const globalTheme: {
         warningDark: string;
         warningBackground: string;
         platformBackground: string;
+        backgroundLight: string;
         backgroundDark: string;
         text: string;
         disabledText: string;
         invertedText: string;
+        outline: string;
     };
     space: {
         xxsmall: number;
@@ -52,6 +54,9 @@ declare const globalTheme: {
         small: number;
         xsmall: number;
     };
+    borderWidths: {
+        base: number;
+    };
 };
 declare type GlobalTheme = typeof globalTheme;
 export { GlobalTheme };

package/types/theme/index.d.ts

@@ -1,8 +1,10 @@
 import { GlobalTheme } from './global';
-import getExampleComponentTheme from './components/exampleComponent';
+import getDividerTheme from './components/divider';
+import getCardTheme from './components/card';
 declare type Theme = GlobalTheme & {
     __hd__: {
-        exampleComponent: ReturnType<typeof getExampleComponentTheme>;
+        divider: ReturnType<typeof getDividerTheme>;
+        card: ReturnType<typeof getCardTheme>;
     };
 };
 declare const getTheme: (theme?: GlobalTheme) => Theme;

package/types/theme/colors.d.ts

@@ -1,24 +0,0 @@
-import { palette } from '@hero-design/colors';
-declare const systemPalette: {
-    primary: string;
-    primaryLight: string;
-    info: string;
-    infoLight: string;
-    infoBackground: string;
-    success: string;
-    successDark: string;
-    successLight: string;
-    successBackground: string;
-    danger: string;
-    dangerLight: string;
-    dangerBackground: string;
-    warning: string;
-    warningDark: string;
-    warningBackground: string;
-    platformBackground: string;
-    backgroundDark: string;
-    text: string;
-    disabledText: string;
-    invertedText: string;
-};
-export { palette, systemPalette };

package/types/theme/components/demoStyle.d.ts

@@ -1,11 +0,0 @@
-declare const demoStyleColors: {
-    primaryBg: string;
-    dangerBg: string;
-    warningBg: string;
-};
-declare const demoStyleSpace: {
-    smallMargin: number;
-    mediumMargin: number;
-    largeMargin: number;
-};
-export { demoStyleColors, demoStyleSpace };

package/types/theme/space.d.ts

@@ -1,12 +0,0 @@
-declare const space: {
-    xxsmall: number;
-    xsmall: number;
-    small: number;
-    medium: number;
-    large: number;
-    xlarge: number;
-    xxlarge: number;
-    xxxlarge: number;
-    xxxxlarge: number;
-};
-export { space };

package/types/theme/typography.d.ts

@@ -1,21 +0,0 @@
-declare const fontSizes: {
-    xlarge: number;
-    large: number;
-    medium: number;
-    small: number;
-    xsmall: number;
-};
-declare const fontWeights: {
-    light: number;
-    regular: number;
-    semiBold: number;
-    bold: number;
-};
-declare const lineHeights: {
-    xlarge: number;
-    large: number;
-    medium: number;
-    small: number;
-    xsmall: number;
-};
-export { fontSizes, fontWeights, lineHeights };