@hero-design/rn 7.4.0 → 7.6.1-alpha

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

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

package/lib/theme/components/avatar.d.ts

@@ -0,0 +1,32 @@
+import { GlobalTheme } from '../global';
+declare const getAvatarTheme: (theme: GlobalTheme) => {
+    colors: {
+        primary: string;
+        info: string;
+        danger: string;
+        success: string;
+        warning: string;
+    };
+    sizes: {
+        small: number;
+        medium: number;
+        large: number;
+        xlarge: number;
+    };
+    radii: {
+        small: number;
+        medium: number;
+        large: number;
+        xlarge: number;
+    };
+    borderWidths: {
+        default: number;
+    };
+    fontSizes: {
+        small: number;
+        medium: number;
+        large: number;
+        xlarge: number;
+    };
+};
+export default getAvatarTheme;

package/lib/theme/components/badge.d.ts

@@ -0,0 +1,29 @@
+import { GlobalTheme } from '../global';
+declare const getBadgeTheme: (theme: GlobalTheme) => {
+    colors: {
+        danger: string;
+        info: string;
+        success: string;
+        warning: string;
+        archived: string;
+        text: string;
+    };
+    fonts: {
+        default: string;
+    };
+    fontSizes: {
+        default: number;
+    };
+    sizes: {
+        height: number;
+        minWidth: number;
+        statusHeight: number;
+        statusWidth: number;
+    };
+    space: {
+        horizontalPadding: number;
+        statusPositionTop: number;
+        statusPositionRight: number;
+    };
+};
+export default getBadgeTheme;

package/lib/theme/components/bottomNavigation.d.ts

@@ -0,0 +1,23 @@
+import { GlobalTheme } from '../global';
+declare const getBottomNavigationTheme: (theme: GlobalTheme) => {
+    colors: {
+        shadow: string;
+        background: string;
+    };
+    shadows: {
+        offset: {
+            width: number;
+            height: number;
+        };
+        opacity: number;
+        radius: number;
+        elevation: number;
+    };
+    sizes: {
+        height: number;
+    };
+    space: {
+        titleMarginTop: number;
+    };
+};
+export default getBottomNavigationTheme;

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

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

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

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

package/lib/theme/components/drawer.d.ts

@@ -0,0 +1,21 @@
+import { GlobalTheme } from '../global';
+declare const getDrawerTheme: (theme: GlobalTheme) => {
+    colors: {
+        shadow: string;
+        background: string;
+        backdrop: string;
+    };
+    radii: {
+        default: number;
+    };
+    shadows: {
+        offset: {
+            width: number;
+            height: number;
+        };
+        opacity: number;
+        radius: number;
+        elevation: number;
+    };
+};
+export default getDrawerTheme;

package/lib/theme/components/fab.d.ts

@@ -0,0 +1,51 @@
+import { GlobalTheme } from '../global';
+declare const getFABTheme: (theme: GlobalTheme) => {
+    radii: {
+        actionItem: number;
+    };
+    fonts: {
+        header: string;
+        actionItemText: string;
+        title: string;
+    };
+    fontSizes: {
+        header: number;
+        actionItemText: number;
+        title: number;
+    };
+    colors: {
+        buttonBackground: string;
+        icon: string;
+        headerText: string;
+        actionItemBackground: string;
+        backdropBackground: string;
+        titleText: string;
+    };
+    sizes: {
+        width: number;
+        height: number;
+    };
+    lineHeights: {
+        header: number;
+        actionItemText: number;
+        title: number;
+        icon: number;
+    };
+    space: {
+        actionItemPaddingLeft: number;
+        actionItemPaddingRight: number;
+        actionItemPaddingTop: number;
+        actionItemPaddingBottom: number;
+        actionItemMargin: number;
+        actionItemMarginRight: number;
+        actionItemTextPaddingLeft: number;
+        buttonMarginTop: number;
+        buttonMarginRight: number;
+        headerTextMarginRight: number;
+        headerTextMarginBottom: number;
+        containerPaddingHorizontal: number;
+        containerPaddingVertical: number;
+        titleMarginHorizontal: number;
+    };
+};
+export default getFABTheme;

package/lib/theme/components/icon.d.ts

@@ -0,0 +1,19 @@
+import { GlobalTheme } from '../global';
+declare const getIconTheme: (theme: GlobalTheme) => {
+    colors: {
+        text: string;
+        primary: string;
+        info: string;
+        danger: string;
+        success: string;
+        warning: string;
+    };
+    sizes: {
+        xsmall: number;
+        small: number;
+        medium: number;
+        large: number;
+        xlarge: number;
+    };
+};
+export default getIconTheme;

package/lib/theme/components/progress.d.ts

@@ -0,0 +1,21 @@
+import { GlobalTheme } from '../global';
+declare const getProgressTheme: (theme: GlobalTheme) => {
+    colors: {
+        primary: string;
+        success: string;
+        warning: string;
+        danger: string;
+        info: string;
+        background: string;
+        innerBackground: string;
+    };
+    sizes: {
+        radius: number;
+        strokeWidth: number;
+        barHeight: number;
+    };
+    radii: {
+        default: number;
+    };
+};
+export default getProgressTheme;

package/lib/theme/components/tabs.d.ts

@@ -0,0 +1,27 @@
+import { GlobalTheme } from '../global';
+declare const getTabsTheme: (theme: GlobalTheme) => {
+    borderWidths: {
+        headerBottom: number;
+    };
+    colors: {
+        active: string;
+        inactive: string;
+        activeBackground: string;
+        headerBottom: string;
+        text: string;
+    };
+    space: {
+        flatListHorizontalPadding: number;
+        itemHorizontalPadding: number;
+        itemVerticalPadding: number;
+        outlineHorizontalPadding: number;
+        outlineVerticalPadding: number;
+    };
+    radii: {
+        outline: number;
+    };
+    sizes: {
+        indicator: number;
+    };
+};
+export default getTabsTheme;

package/lib/theme/components/tag.d.ts

@@ -0,0 +1,30 @@
+import { GlobalTheme } from '../global';
+declare const getTagTheme: (theme: GlobalTheme) => {
+    borderWidths: {
+        default: number;
+    };
+    colors: {
+        danger: string;
+        dangerBackground: string;
+        info: string;
+        infoBackground: string;
+        success: string;
+        successBackground: string;
+        warning: string;
+        warningBackground: string;
+    };
+    fonts: {
+        default: string;
+    };
+    fontSizes: {
+        default: number;
+    };
+    space: {
+        horizontalPadding: number;
+        verticalPadding: number;
+    };
+    radii: {
+        default: number;
+    };
+};
+export default getTagTheme;

package/lib/theme/components/typography.d.ts

@@ -0,0 +1,26 @@
+import { GlobalTheme } from '../global';
+declare const getTypographyTheme: (theme: GlobalTheme) => {
+    colors: {
+        body: string;
+        subdued: string;
+        primary: string;
+    };
+    fonts: {
+        light: string;
+        regular: string;
+        semiBold: string;
+    };
+    fontSizes: {
+        small: number;
+        medium: number;
+        large: number;
+        xlarge: number;
+    };
+    lineHeights: {
+        small: number;
+        medium: number;
+        large: number;
+        xlarge: number;
+    };
+};
+export default getTypographyTheme;

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

@@ -0,0 +1,11 @@
+interface BorderWidths {
+    base: number;
+}
+interface Radii {
+    rounded: number;
+    base: number;
+    medium: number;
+}
+declare const getBorderWidths: (baseBorderWidth: number) => BorderWidths;
+declare const getRadii: (baseRadius: number) => Radii;
+export { BorderWidths, getBorderWidths, Radii, getRadii };

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

@@ -0,0 +1,29 @@
+declare const systemPalette: {
+    primary: string;
+    primaryLight: string;
+    primaryDark: string;
+    primaryBackground: 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;
+    backgroundLight: string;
+    backgroundDark: string;
+    text: string;
+    disabledText: string;
+    invertedText: string;
+    outline: string;
+    archived: string;
+};
+declare type SystemPalette = typeof systemPalette;
+export { systemPalette, SystemPalette };

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

@@ -0,0 +1,39 @@
+import { scale as defaultScale, Scale } from './scale';
+import { systemPalette as defaultSystemPalette, SystemPalette } from './colors';
+declare const getGlobalTheme: (scale: Scale, systemPalette: SystemPalette) => {
+    colors: {
+        primary: string;
+        primaryLight: string;
+        primaryDark: string;
+        primaryBackground: 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;
+        backgroundLight: string;
+        backgroundDark: string;
+        text: string;
+        disabledText: string;
+        invertedText: string;
+        outline: string;
+        archived: string;
+    };
+    fonts: import("./typography").Fonts;
+    fontSizes: import("./typography").FontSizes;
+    lineHeights: import("./typography").FontSizes;
+    borderWidths: import("./borders").BorderWidths;
+    space: import("./space").Space;
+    radii: import("./borders").Radii;
+};
+declare type GlobalTheme = ReturnType<typeof getGlobalTheme>;
+export { GlobalTheme, Scale, SystemPalette, getGlobalTheme, defaultScale, defaultSystemPalette, };

package/lib/theme/global/scale.d.ts

@@ -0,0 +1,9 @@
+declare const scale: {
+    borderWidth: number;
+    space: number;
+    font: string;
+    fontSize: number;
+    radius: number;
+};
+declare type Scale = typeof scale;
+export { scale, Scale };

package/lib/theme/global/space.d.ts

@@ -0,0 +1,13 @@
+interface Space {
+    large: number;
+    medium: number;
+    small: number;
+    xlarge: number;
+    xsmall: number;
+    xxlarge: number;
+    xxsmall: number;
+    xxxlarge: number;
+    xxxxlarge: number;
+}
+declare const getSpace: (baseSpace: number) => Space;
+export { Space, getSpace };

package/lib/theme/global/typography.d.ts

@@ -0,0 +1,21 @@
+interface Fonts {
+    light: string;
+    regular: string;
+    semiBold: string;
+}
+interface FontSizes {
+    xxxxxlarge: number;
+    xxxxlarge: number;
+    xxxlarge: number;
+    xxlarge: number;
+    xlarge: number;
+    large: number;
+    medium: number;
+    small: number;
+    xsmall: number;
+}
+declare type LineHeights = FontSizes;
+declare const getFonts: (baseFont: string) => Fonts;
+declare const getFontSizes: (baseFontSize: number) => FontSizes;
+declare const getLineHeights: (fontSizes: FontSizes) => LineHeights;
+export { Fonts, FontSizes, LineHeights, getFonts, getFontSizes, getLineHeights, };

package/lib/theme/index.d.ts

@@ -0,0 +1,33 @@
+import { GlobalTheme, Scale, SystemPalette } from './global';
+import getBadgeTheme from './components/badge';
+import getBottomNavigationTheme from './components/bottomNavigation';
+import getCardTheme from './components/card';
+import getDividerTheme from './components/divider';
+import getDrawerTheme from './components/drawer';
+import getTabsTheme from './components/tabs';
+import getTagTheme from './components/tag';
+import getIconTheme from './components/icon';
+import getProgressTheme from './components/progress';
+import getTypographyTheme from './components/typography';
+import getFABTheme from './components/fab';
+import getAvatarTheme from './components/avatar';
+declare type Theme = GlobalTheme & {
+    __hd__: {
+        avatar: ReturnType<typeof getAvatarTheme>;
+        badge: ReturnType<typeof getBadgeTheme>;
+        bottomNavigation: ReturnType<typeof getBottomNavigationTheme>;
+        card: ReturnType<typeof getCardTheme>;
+        divider: ReturnType<typeof getDividerTheme>;
+        drawer: ReturnType<typeof getDrawerTheme>;
+        icon: ReturnType<typeof getIconTheme>;
+        progress: ReturnType<typeof getProgressTheme>;
+        tabs: ReturnType<typeof getTabsTheme>;
+        tag: ReturnType<typeof getTagTheme>;
+        typography: ReturnType<typeof getTypographyTheme>;
+        fab: ReturnType<typeof getFABTheme>;
+    };
+};
+declare const getTheme: (scale?: Scale, systemPallete?: SystemPalette) => Theme;
+declare const theme: Theme;
+export { Theme, getTheme };
+export default theme;

package/lib/types.d.ts

@@ -0,0 +1,5 @@
+import { BottomNavigationTabType } from './components/BottomNavigation';
+import { IconName } from './components/Icon';
+import { TabType } from './components/Tabs';
+import { Theme } from './theme';
+export type { BottomNavigationTabType, IconName, TabType, Theme };

package/lib/utils/__tests__/scale.spec.d.ts

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

package/lib/utils/helpers.d.ts

@@ -0,0 +1,2 @@
+export declare const isIOS: boolean;
+export declare const isAndroid: boolean;

package/lib/utils/hooks.d.ts

@@ -0,0 +1 @@
+export declare const usePrevious: <T>(value: T) => T | undefined;

package/lib/utils/scale.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "7.4.0",
+  "version": "7.6.1-alpha",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -25,7 +25,7 @@
   "dependencies": {
     "@emotion/native": "^11.9.3",
     "@emotion/react": "^11.9.3",
-    "@hero-design/colors": "7.4.0"
+    "@hero-design/colors": "7.6.0"
   },
   "peerDependencies": {
     "react": "17.0.2",
@@ -39,7 +39,6 @@
     "@babel/preset-env": "^7.16.11",
     "@babel/preset-react": "^7.16.7",
     "@babel/preset-typescript": "^7.17.12",
-    "@babel/runtime": "^7.18.9",
     "@emotion/jest": "^11.9.3",
     "@rollup/plugin-babel": "^5.3.1",
     "@rollup/plugin-commonjs": "^21.0.1",

package/playground/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hero-design/playground",
   "private": true,
-  "version": "7.4.0",
+  "version": "7.6.0",
   "license": "MIT",
   "scripts": {
     "lint": "eslint src expoEntry.js --ext .js,.jsx,.ts,.tsx --ignore-path ../../../.gitignore",
@@ -13,8 +13,8 @@
     "visual-test": "detox build -c ios.sim.release && detox test -c ios.sim.release"
   },
   "dependencies": {
-    "@hero-design/colors": "7.4.0",
-    "@hero-design/rn": "7.4.0",
+    "@hero-design/colors": "7.6.0",
+    "@hero-design/rn": "7.6.0",
     "@react-native-community/masked-view": "^0.1.11",
     "@react-navigation/core": "^6.3.0",
     "@react-navigation/native": "^6.0.12",

package/playground/src/Alert.tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import { ScrollView, View } from 'react-native';
+import { Alert, Typography, useTheme } from '@hero-design/rn';
+
+const AlertPlayground = (): JSX.Element => {
+  const theme = useTheme();
+
+  return (
+    <ScrollView style={{ flex: 1, padding: theme.space.medium }}>
+      <Typography.Text>Default variant</Typography.Text>
+      <View style={{ paddingVertical: theme.space.medium }}>
+        <Alert
+          title="Title"
+          content="Success"
+          intent="success"
+          style={{ marginBottom: theme.space.small }}
+          onClose={() => alert('Closed')}
+        />
+        <Alert
+          title="Title"
+          content="Info"
+          intent="info"
+          style={{ marginBottom: theme.space.small }}
+          onClose={() => alert('Closed')}
+        />
+        <Alert
+          title="Title"
+          content="Warning"
+          intent="warning"
+          style={{ marginBottom: theme.space.small }}
+          onClose={() => alert('Closed')}
+        />
+        <Alert
+          title="Title"
+          content="Error"
+          intent="error"
+          style={{ marginBottom: theme.space.small }}
+          onClose={() => alert('Closed')}
+        />
+      </View>
+      <Typography.Text>Round variant</Typography.Text>
+      <View style={{ paddingVertical: theme.space.medium }}>
+        <Alert
+          title="Title"
+          content="Success"
+          intent="success"
+          variant="round"
+          style={{ marginBottom: theme.space.small }}
+          onClose={() => alert('Closed')}
+        />
+        <Alert
+          title="Title"
+          content="Info"
+          intent="info"
+          variant="round"
+          style={{ marginBottom: theme.space.small }}
+          onClose={() => alert('Closed')}
+        />
+        <Alert
+          title="Title"
+          content="Warning"
+          intent="warning"
+          variant="round"
+          style={{ marginBottom: theme.space.small }}
+          onClose={() => alert('Closed')}
+        />
+        <Alert
+          title="Title"
+          content="Error"
+          intent="error"
+          variant="round"
+          style={{ marginBottom: theme.space.small }}
+          onClose={() => alert('Closed')}
+        />
+      </View>
+    </ScrollView>
+  );
+};
+
+export default AlertPlayground;