@hero-design/rn 7.5.0 → 7.6.1-alpha.0

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,11 +1,10 @@
 {
   "name": "@hero-design/rn",
-  "version": "7.5.0",
+  "version": "7.6.1-alpha.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
   "react-native": "src/index.ts",
-  "types": "types/index.d.ts",
   "scripts": {
     "lint": "eslint src --ext .js,.jsx,.ts,.tsx --ignore-path ../../.gitignore",
     "type-check": "tsc --noEmit",
@@ -25,7 +24,7 @@
   "dependencies": {
     "@emotion/native": "^11.9.3",
     "@emotion/react": "^11.9.3",
-    "@hero-design/colors": "7.5.0"
+    "@hero-design/colors": "7.6.0"
   },
   "peerDependencies": {
     "react": "17.0.2",
@@ -39,7 +38,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.5.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.5.0",
-    "@hero-design/rn": "7.5.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/App.tsx

@@ -34,6 +34,8 @@ import ProgressPlayground from './Progress';
 import SpinnerPlayground from './Spinner';
 import SectionHeadingPlayground from './SectionHeading';
 import RadioPlayground from './Radio';
+import SelectPlayground from './Select';
+import SwitchPlayground from './Switch';
 import TabsPlayground from './Tabs';
 import TagPlayground from './Tag';
 import TextInputPlayground from './TextInput';
@@ -65,6 +67,8 @@ type RootStackParamList = {
   Spinner: undefined;
   Radio: undefined;
   SectionHeading: undefined;
+  Select: undefined;
+  Switch: undefined;
   Tabs: undefined;
   Tag: undefined;
   TextInput: undefined;
@@ -95,6 +99,8 @@ const components = [
   { name: 'Spinner', component: SpinnerPlayground },
   { name: 'Radio', component: RadioPlayground },
   { name: 'SectionHeading', component: SectionHeadingPlayground },
+  { name: 'Select', component: SelectPlayground },
+  { name: 'Switch', component: SwitchPlayground },
   { name: 'Tabs', component: TabsPlayground },
   { name: 'Tag', component: TagPlayground },
   { name: 'TextInput', component: TextInputPlayground },

package/playground/src/ContentNavigator.tsx

@@ -24,22 +24,15 @@ function formatDate(date: Date) {
 }
 
 const ContentNavigatorPlayground = (): JSX.Element => {
-  const {
-    space: { medium },
-  } = useTheme();
+  const theme = useTheme();
   const [age, setAge] = useState(20);
   const [date, setDate] = useState(new Date());
   const { monday, sunday } = getMondayAndSunday(date);
 
   return (
-    <View
-      style={{
-        marginVertical: medium,
-        marginHorizontal: medium,
-      }}
-    >
+    <View style={{ margin: theme.space.medium }}>
       <View style={{ flexDirection: 'row' }}>
-        <Typography.Text style={{ paddingRight: medium }}>
+        <Typography.Text style={{ paddingRight: theme.space.medium }}>
           Age (18 to 25):
         </Typography.Text>
         <ContentNavigator

package/playground/src/Select.tsx

@@ -0,0 +1,32 @@
+import React, { useState } from 'react';
+import { View } from 'react-native';
+import { Select, useTheme } from '@hero-design/rn';
+
+const SelectPlayground = (): JSX.Element => {
+  const theme = useTheme();
+  const options = [
+    { text: 'Monday', value: 'mon' },
+    { text: 'Tuesday', value: 'tue' },
+    { text: 'Wednesday', value: 'wed' },
+    { text: 'Thursday', value: 'thu' },
+    { text: 'Friday', value: 'fri' },
+    { text: 'Saturday', value: 'sat' },
+    { text: 'Sunday', value: 'sun' },
+  ];
+  const [value, setValue] = useState(['mon', 'tue']);
+
+  return (
+    <View style={{ margin: theme.space.medium }}>
+      <Select.Multi
+        label="Allow notifications"
+        footerLabel="Confirm"
+        options={options}
+        value={value}
+        onPress={setValue}
+        keyExtractor={opt => opt.value}
+      />
+    </View>
+  );
+};
+
+export default SelectPlayground;