Add Typescript type definitions

README.md

@@ -388,10 +388,6 @@ StyleSheets.
 If you enjoy using pre-styled components for your text, you can easily
 define them and just supply the desired styles from this library! 🙂
 
-## Roadmap
-
-* Type with [Flow](https://flow.org/)
-
 ## Versioning
 
 We use [SemVer](http://semver.org/) for versioning. For the versions available,

package.json

@@ -4,12 +4,14 @@
   "description":
     "Pixel–perfect, native–looking typographic styles for React Native",
   "main": "dist/index.js",
+  "types": "dist/index.d.ts",
   "files": ["src/", "dist/"],
   "directories": {
     "example": "example"
   },
   "scripts": {
-    "build": "rm -rf dist && babel src --out-dir dist",
+    "build":
+      "rm -rf dist && babel src --out-dir dist && cp ./src/index.d.ts ./dist",
     "format": "prettier --write '**/*.js'",
     "precommit": "lint-staged",
     "test": "echo \\\"Error: no test specified\\\" && exit 1"

src/index.d.ts

@@ -0,0 +1,226 @@
+import { StyleProp, TextStyle } from "react-native";
+type Style = StyleProp<TextStyle>;
+
+export var material: {
+  display4: Style;
+  display4Object: TextStyle;
+  display3: Style;
+  display3Object: TextStyle;
+  display2: Style;
+  display2Object: TextStyle;
+  display1: Style;
+  display1Object: TextStyle;
+  headline: Style;
+  headlineObject: TextStyle;
+  title: Style;
+  titleObject: TextStyle;
+  subheading: Style;
+  subheadingObject: TextStyle;
+  body2: Style;
+  body2Object: TextStyle;
+  body1: Style;
+  body1Object: TextStyle;
+  caption: Style;
+  captionObject: TextStyle;
+  button: Style;
+  buttonObject: TextStyle;
+
+  display4White: Style;
+  display4WhiteObject: TextStyle;
+  display3White: Style;
+  display3WhiteObject: TextStyle;
+  display2White: Style;
+  display2WhiteObject: TextStyle;
+  display1White: Style;
+  display1WhiteObject: TextStyle;
+  headlineWhite: Style;
+  headlineWhiteObject: TextStyle;
+  titleWhite: Style;
+  titleWhiteObject: TextStyle;
+  subheadingWhite: Style;
+  subheadingWhiteObject: TextStyle;
+  body2White: Style;
+  body2WhiteObject: TextStyle;
+  body1White: Style;
+  body1WhiteObject: TextStyle;
+  captionWhite: Style;
+  captionWhiteObject: TextStyle;
+  buttonWhite: Style;
+  buttonWhiteObject: TextStyle;
+};
+
+export var human: {
+  largeTitle: Style;
+  largeTitleObject: TextStyle;
+  title1: Style;
+  title1Object: TextStyle;
+  title2: Style;
+  title2Object: TextStyle;
+  title3: Style;
+  title3Object: TextStyle;
+  headline: Style;
+  headlineObject: TextStyle;
+  body: Style;
+  bodyObject: TextStyle;
+  callout: Style;
+  calloutObject: TextStyle;
+  subhead: Style;
+  subheadObject: TextStyle;
+  footnote: Style;
+  footnoteObject: TextStyle;
+  caption1: Style;
+  caption1Object: TextStyle;
+  caption2: Style;
+  caption2Object: TextStyle;
+
+  largeTitleWhite: Style;
+  largeTitleWhiteObject: TextStyle;
+  title1White: Style;
+  title1WhiteObject: TextStyle;
+  title2White: Style;
+  title2WhiteObject: TextStyle;
+  title3White: Style;
+  title3WhiteObject: TextStyle;
+  headlineWhite: Style;
+  headlineWhiteObject: TextStyle;
+  bodyWhite: Style;
+  bodyWhiteObject: TextStyle;
+  calloutWhite: Style;
+  calloutWhiteObject: TextStyle;
+  subheadWhite: Style;
+  subheadWhiteObject: TextStyle;
+  footnoteWhite: Style;
+  footnoteWhiteObject: TextStyle;
+  caption1White: Style;
+  caption1WhiteObject: TextStyle;
+  caption2White: Style;
+  caption2WhiteObject: TextStyle;
+};
+
+export var iOSUIKit: {
+  largeTitleEmphasized: Style;
+  largeTitleEmphasizedObject: TextStyle;
+  title3Emphasized: Style;
+  title3EmphasizedObject: TextStyle;
+  title3: Style;
+  title3Object: TextStyle;
+  bodyEmphasized: Style;
+  bodyEmphasizedObject: TextStyle;
+  body: Style;
+  bodyObject: TextStyle;
+  subheadEmphasized: Style;
+  subheadEmphasizedObject: TextStyle;
+  subhead: Style;
+  subheadObject: TextStyle;
+  subheadShort: Style;
+  subheadShortObject: TextStyle;
+  callout: Style;
+  calloutObject: TextStyle;
+  footnoteEmphasized: Style;
+  footnoteEmphasizedObject: TextStyle;
+  footnote: Style;
+  footnoteObject: TextStyle;
+  caption2Emphasized: Style;
+  caption2EmphasizedObject: TextStyle;
+  caption2: Style;
+  caption2Object: TextStyle;
+
+  largeTitleEmphasizedWhite: Style;
+  largeTitleEmphasizedWhiteObject: TextStyle;
+  title3EmphasizedWhite: Style;
+  title3EmphasizedWhiteObject: TextStyle;
+  title3White: Style;
+  title3WhiteObject: TextStyle;
+  bodyEmphasizedWhite: Style;
+  bodyEmphasizedWhiteObject: TextStyle;
+  bodyWhite: Style;
+  bodyWhiteObject: TextStyle;
+  subheadEmphasizedWhite: Style;
+  subheadEmphasizedWhiteObject: TextStyle;
+  subheadWhite: Style;
+  subheadWhiteObject: TextStyle;
+  subheadShortWhite: Style;
+  subheadShortWhiteObject: TextStyle;
+  calloutWhite: Style;
+  calloutWhiteObject: TextStyle;
+  footnoteEmphasizedWhite: Style;
+  footnoteEmphasizedWhiteObject: TextStyle;
+  footnoteWhite: Style;
+  footnoteWhiteObject: TextStyle;
+  caption2EmphasizedWhite: Style;
+  caption2EmphasizedWhiteObject: TextStyle;
+  caption2White: Style;
+  caption2WhiteObject: TextStyle;
+};
+
+export var systemWeights: {
+  thin: TextStyle;
+  light: TextStyle;
+  regular: TextStyle;
+  semibold: TextStyle;
+  bold: TextStyle;
+};
+
+export var sanFranciscoWeights: {
+  thin: TextStyle;
+  ultraLight: TextStyle;
+  light: TextStyle;
+  regular: TextStyle;
+  medium: TextStyle;
+  semibold: TextStyle;
+  bold: TextStyle;
+  heavy: TextStyle;
+  black: TextStyle;
+};
+
+export var robotoWeights: {
+  thin: TextStyle;
+  light: TextStyle;
+  regular: TextStyle;
+  medium: TextStyle;
+  bold: TextStyle;
+  condensed: TextStyle;
+  condensedBold: TextStyle;
+};
+
+export var webWeights: {
+  thin: TextStyle;
+  ultraLight: TextStyle;
+  light: TextStyle;
+  regular: TextStyle;
+  medium: TextStyle;
+  semibold: TextStyle;
+  bold: TextStyle;
+  heavy: TextStyle;
+  black: TextStyle;
+};
+
+export var iOSColors: {
+  red: string;
+  orange: string;
+  yellow: string;
+  green: string;
+  tealBlue: string;
+  blue: string;
+  purple: string;
+  pink: string;
+
+  white: string;
+  customGray: string;
+  lightGray: string;
+  lightGray2: string;
+  midGray: string;
+  gray: string;
+  black: string;
+};
+
+export var materialColors: {
+  blackPrimary: string;
+  blackSecondary: string;
+  blackTertiary: string;
+  whitePrimary: string;
+  whiteSecondary: string;
+  whiteTertiary: string;
+};
+
+export function sanFranciscoSpacing(fontSize: number): number;