@hero-design/rn 6.7.4-1 → 7.0.1

package/.eslintrc.json

@@ -23,7 +23,13 @@
     "import/resolver": {
       "node": {
         "extensions": [".js", ".jsx", ".ts", ".tsx"]
-      }
+      },
+      "eslint-import-resolver-custom-alias": {
+        "alias": {
+          "styled-components-native": "./src/styled-components.ts"
+        },
+        "extensions": [".ts",".tsx"]
+      }     
     }
   },
   "rules": {
@@ -35,12 +41,15 @@
       { "extensions": [".js", ".jsx", ".tsx"] }
     ],
     "import/prefer-default-export": 0,
-    "import/extensions": 0
+    "import/extensions": 0,
+    "no-use-before-define": 0,
+    "@typescript-eslint/no-use-before-define": 2
   },
   "overrides": [
     {
       "files": ["*.ts", "*.tsx"],
       "rules": {
+        "no-undef": 0,
         "consistent-return": 0,
         "default-case": 0,
         "no-underscore-dangle": [2, { "allow": ["__hd__"] }]

package/app.json

@@ -1,4 +1,8 @@
 {
   "name": "Mobile Hero Design Playground",
   "entryPoint": "expoEntry.js",
+  "owner": "thinkei",
+  "slug": "Mobile-Hero-Design-Playground"
+
+
 }

package/babel.config.js

@@ -1,8 +1,20 @@
-module.exports = function(api) {
+module.exports = function (api) {
   const isFromRollup = api.caller(
     caller => caller && caller.name === '@rollup/plugin-babel'
   );
 
+  const plugins = [
+    [
+      require.resolve('babel-plugin-module-resolver'),
+      {
+        root: ['.'],
+        alias: {
+          'styled-components-native': './src/styled-components.ts',
+        },
+      },
+    ],
+  ];
+
   if (isFromRollup) {
     return {
       presets: [
@@ -10,10 +22,12 @@ module.exports = function(api) {
         ['@babel/preset-typescript', { isTSX: true, allExtensions: true }],
         '@babel/preset-react',
       ],
+      plugins,
     };
   }
 
   return {
     presets: ['babel-preset-expo'],
+    plugins,
   };
 };

package/es/index.js

@@ -1,5 +1,5 @@
 import React, { useContext, useMemo, createElement } from 'react';
-import { View, Text } from 'react-native';
+import { View } from 'react-native';
 
 function ownKeys(object, enumerableOnly) {
   var keys = Object.keys(object);
@@ -9843,11 +9843,13 @@ var systemPalette = {
   warning: palette.orange,
   warningDark: palette.orangeDark15,
   warningBackground: palette.orangeLight90,
-  platformBackground: palette.greyLight95,
+  platformBackground: palette.white,
+  backgroundLight: palette.greyLight95,
   backgroundDark: palette.greyDark75,
   text: palette.greyDark75,
   disabledText: palette.greyDark15,
-  invertedText: palette.white
+  invertedText: palette.white,
+  outline: palette.greyLight60
 };
 
 var BASE$1 = 8;
@@ -9886,28 +9888,50 @@ var lineHeights = {
   xsmall: fontSizes.xsmall + 8
 };
 
+var borderWidths = {
+  base: 1
+};
+
 var globalTheme = {
   colors: _objectSpread2({}, systemPalette),
   space: space,
   fontSizes: fontSizes,
   fontWeights: fontWeights,
-  lineHeights: lineHeights
+  lineHeights: lineHeights,
+  borderWidths: borderWidths
 };
 
-var getExampleComponentTheme = function getExampleComponentTheme(theme) {
+var getDividerTheme = function getDividerTheme(theme) {
   var colors = {
-    primaryBg: theme.colors.primaryLight,
-    dangerBg: theme.colors.dangerBackground,
-    warningBg: theme.colors.warningBackground
+    "default": theme.colors.outline
   };
   var space = {
-    smallMargin: theme.space.xxsmall,
-    mediumMargin: theme.space.medium,
-    largeMargin: theme.space.xxxxlarge
+    xsmall: "".concat(theme.space.xsmall, "px"),
+    small: "".concat(theme.space.small, "px"),
+    medium: "".concat(theme.space.medium, "px"),
+    large: "".concat(theme.space.large, "px"),
+    xlarge: "".concat(theme.space.xlarge, "px")
+  };
+  var borderWiths = {
+    "default": "".concat(theme.borderWidths.base, "px")
   };
   return {
     colors: colors,
-    space: space
+    space: space,
+    borderWiths: borderWiths
+  };
+};
+
+var getCardTheme = function getCardTheme(theme) {
+  var radii = {
+    "default": "12px"
+  };
+  var padding = {
+    "default": "".concat(theme.space.medium, "px")
+  };
+  return {
+    radii: radii,
+    padding: padding
   };
 };
 
@@ -9915,67 +9939,89 @@ var getTheme = function getTheme() {
   var theme = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : globalTheme;
   return _objectSpread2(_objectSpread2({}, theme), {}, {
     __hd__: {
-      exampleComponent: getExampleComponentTheme(theme)
+      divider: getDividerTheme(theme),
+      card: getCardTheme(theme)
     }
   });
 };
 
 var theme = getTheme();
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
-var Square = styled(View)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  ", "\n\n  ", "\n\n  ", "\n"])), function (_ref) {
-  var themeSize = _ref.themeSize;
+var _templateObject$1, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
+var StyledDivider = styled(View)(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral(["\n  border-bottom-width: ", ";\n  border-bottom-color: ", ";\n  max-width: 100%;\n\n  ", "\n\n  ", "\n"])), function (_ref) {
+  var theme = _ref.theme;
+  return theme.__hd__.divider.borderWiths["default"];
+}, function (_ref2) {
+  var theme = _ref2.theme;
+  return theme.__hd__.divider.colors["default"];
+}, function (_ref3) {
+  var themeMarginHorizontal = _ref3.themeMarginHorizontal,
+      theme = _ref3.theme;
+
+  switch (themeMarginHorizontal) {
+    case undefined:
+      return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral([""])));
+
+    case 'xsmall':
+      return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n          margin-horizontal: ", ";\n        "])), theme.__hd__.divider.space.xsmall);
 
-  switch (themeSize) {
     case 'small':
-      return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n          height: 50px;\n          width: 200px;\n        "])));
+      return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n          margin-horizontal: ", ";\n        "])), theme.__hd__.divider.space.small);
 
     case 'medium':
-      return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n          height: 100px;\n          width: 250px;\n        "])));
+      return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n          margin-horizontal: ", ";\n        "])), theme.__hd__.divider.space.medium);
 
     case 'large':
-      return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n          height: 150px;\n          width: 300px;\n        "])));
+      return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n          margin-horizontal: ", ";\n        "])), theme.__hd__.divider.space.large);
+
+    case 'xlarge':
+      return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n          margin-horizontal: ", ";\n        "])), theme.__hd__.divider.space.xlarge);
   }
-}, function (_ref2) {
-  var themeMargin = _ref2.themeMargin,
-      theme = _ref2.theme;
+}, function (_ref4) {
+  var themeMarginVertical = _ref4.themeMarginVertical,
+      theme = _ref4.theme;
+
+  switch (themeMarginVertical) {
+    case undefined:
+      return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral([""])));
+
+    case 'xsmall':
+      return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n          margin-vertical: ", ";\n        "])), theme.__hd__.divider.space.xsmall);
 
-  switch (themeMargin) {
     case 'small':
-      return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n          margin: ", "px;\n        "])), theme.__hd__.exampleComponent.space.smallMargin);
+      return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n          margin-vertical: ", ";\n        "])), theme.__hd__.divider.space.small);
 
     case 'medium':
-      return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n          margin: ", "px;\n        "])), theme.__hd__.exampleComponent.space.mediumMargin);
+      return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n          margin-vertical: ", ";\n        "])), theme.__hd__.divider.space.medium);
 
     case 'large':
-      return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n          margin: ", "px;\n        "])), theme.__hd__.exampleComponent.space.largeMargin);
-  }
-}, function (_ref3) {
-  var themeBgColor = _ref3.themeBgColor,
-      theme = _ref3.theme;
+      return css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n          margin-vertical: ", ";\n        "])), theme.__hd__.divider.space.large);
 
-  switch (themeBgColor) {
-    case 'primary':
-      return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n          background-color: ", ";\n        "])), theme.__hd__.exampleComponent.colors.primaryBg);
+    case 'xlarge':
+      return css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n          margin-vertical: ", ";\n        "])), theme.__hd__.divider.space.xlarge);
+  }
+});
 
-    case 'danger':
-      return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n          background-color: ", ";\n        "])), theme.__hd__.exampleComponent.colors.dangerBg);
+var Divider = function Divider(_ref) {
+  var marginHorizontal = _ref.marginHorizontal,
+      marginVertical = _ref.marginVertical;
+  return /*#__PURE__*/React.createElement(StyledDivider, {
+    themeMarginHorizontal: marginHorizontal,
+    themeMarginVertical: marginVertical
+  });
+};
 
-    case 'warning':
-      return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n          background-color: ", ";\n        "])), theme.__hd__.exampleComponent.colors.warningBg);
-  }
+var _templateObject;
+var StyledCard = styled(View)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border-radius: ", ";\n  padding: ", ";\n"])), function (_ref) {
+  var theme = _ref.theme;
+  return theme.__hd__.card.radii["default"];
+}, function (_ref2) {
+  var theme = _ref2.theme;
+  return theme.__hd__.card.padding["default"];
 });
 
-var ExampleComponent = function ExampleComponent(_ref) {
-  var _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 'small' : _ref$size,
-      margin = _ref.margin,
-      bgColor = _ref.bgColor;
-  return /*#__PURE__*/React.createElement(Square, {
-    themeSize: size,
-    themeMargin: margin,
-    themeBgColor: bgColor
-  }, /*#__PURE__*/React.createElement(Text, null, "Square with ".concat(size, " size, ").concat(margin, " margin and ").concat(bgColor, " background.")));
+var Card = function Card(props) {
+  return /*#__PURE__*/React.createElement(StyledCard, props);
 };
 
-export { ExampleComponent, ThemeProvider, getTheme, theme, useTheme };
+export { Card, Divider, ThemeProvider, getTheme, theme, useTheme };

package/jest.config.js

@@ -15,4 +15,8 @@ module.exports = {
   testPathIgnorePatterns: ['\\.snap$', '<rootDir>/node_modules/'],
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
   setupFilesAfterEnv: ['<rootDir>/jest-setup.ts'],
+  roots: ['<rootDir>/src'],
+  moduleNameMapper: {
+    'styled-components-native': '<rootDir>/src/styled-components.ts',
+  },
 };

package/lib/index.js

@@ -9851,11 +9851,13 @@ var systemPalette = {
   warning: palette.orange,
   warningDark: palette.orangeDark15,
   warningBackground: palette.orangeLight90,
-  platformBackground: palette.greyLight95,
+  platformBackground: palette.white,
+  backgroundLight: palette.greyLight95,
   backgroundDark: palette.greyDark75,
   text: palette.greyDark75,
   disabledText: palette.greyDark15,
-  invertedText: palette.white
+  invertedText: palette.white,
+  outline: palette.greyLight60
 };
 
 var BASE$1 = 8;
@@ -9894,28 +9896,50 @@ var lineHeights = {
   xsmall: fontSizes.xsmall + 8
 };
 
+var borderWidths = {
+  base: 1
+};
+
 var globalTheme = {
   colors: _objectSpread2({}, systemPalette),
   space: space,
   fontSizes: fontSizes,
   fontWeights: fontWeights,
-  lineHeights: lineHeights
+  lineHeights: lineHeights,
+  borderWidths: borderWidths
 };
 
-var getExampleComponentTheme = function getExampleComponentTheme(theme) {
+var getDividerTheme = function getDividerTheme(theme) {
   var colors = {
-    primaryBg: theme.colors.primaryLight,
-    dangerBg: theme.colors.dangerBackground,
-    warningBg: theme.colors.warningBackground
+    "default": theme.colors.outline
   };
   var space = {
-    smallMargin: theme.space.xxsmall,
-    mediumMargin: theme.space.medium,
-    largeMargin: theme.space.xxxxlarge
+    xsmall: "".concat(theme.space.xsmall, "px"),
+    small: "".concat(theme.space.small, "px"),
+    medium: "".concat(theme.space.medium, "px"),
+    large: "".concat(theme.space.large, "px"),
+    xlarge: "".concat(theme.space.xlarge, "px")
+  };
+  var borderWiths = {
+    "default": "".concat(theme.borderWidths.base, "px")
   };
   return {
     colors: colors,
-    space: space
+    space: space,
+    borderWiths: borderWiths
+  };
+};
+
+var getCardTheme = function getCardTheme(theme) {
+  var radii = {
+    "default": "12px"
+  };
+  var padding = {
+    "default": "".concat(theme.space.medium, "px")
+  };
+  return {
+    radii: radii,
+    padding: padding
   };
 };
 
@@ -9923,70 +9947,93 @@ var getTheme = function getTheme() {
   var theme = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : globalTheme;
   return _objectSpread2(_objectSpread2({}, theme), {}, {
     __hd__: {
-      exampleComponent: getExampleComponentTheme(theme)
+      divider: getDividerTheme(theme),
+      card: getCardTheme(theme)
     }
   });
 };
 
 var theme = getTheme();
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
-var Square = styled(reactNative$1.View)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  ", "\n\n  ", "\n\n  ", "\n"])), function (_ref) {
-  var themeSize = _ref.themeSize;
+var _templateObject$1, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
+var StyledDivider = styled(reactNative$1.View)(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral(["\n  border-bottom-width: ", ";\n  border-bottom-color: ", ";\n  max-width: 100%;\n\n  ", "\n\n  ", "\n"])), function (_ref) {
+  var theme = _ref.theme;
+  return theme.__hd__.divider.borderWiths["default"];
+}, function (_ref2) {
+  var theme = _ref2.theme;
+  return theme.__hd__.divider.colors["default"];
+}, function (_ref3) {
+  var themeMarginHorizontal = _ref3.themeMarginHorizontal,
+      theme = _ref3.theme;
+
+  switch (themeMarginHorizontal) {
+    case undefined:
+      return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral([""])));
+
+    case 'xsmall':
+      return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n          margin-horizontal: ", ";\n        "])), theme.__hd__.divider.space.xsmall);
 
-  switch (themeSize) {
     case 'small':
-      return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n          height: 50px;\n          width: 200px;\n        "])));
+      return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n          margin-horizontal: ", ";\n        "])), theme.__hd__.divider.space.small);
 
     case 'medium':
-      return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n          height: 100px;\n          width: 250px;\n        "])));
+      return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n          margin-horizontal: ", ";\n        "])), theme.__hd__.divider.space.medium);
 
     case 'large':
-      return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n          height: 150px;\n          width: 300px;\n        "])));
+      return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n          margin-horizontal: ", ";\n        "])), theme.__hd__.divider.space.large);
+
+    case 'xlarge':
+      return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n          margin-horizontal: ", ";\n        "])), theme.__hd__.divider.space.xlarge);
   }
-}, function (_ref2) {
-  var themeMargin = _ref2.themeMargin,
-      theme = _ref2.theme;
+}, function (_ref4) {
+  var themeMarginVertical = _ref4.themeMarginVertical,
+      theme = _ref4.theme;
+
+  switch (themeMarginVertical) {
+    case undefined:
+      return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral([""])));
+
+    case 'xsmall':
+      return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n          margin-vertical: ", ";\n        "])), theme.__hd__.divider.space.xsmall);
 
-  switch (themeMargin) {
     case 'small':
-      return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n          margin: ", "px;\n        "])), theme.__hd__.exampleComponent.space.smallMargin);
+      return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n          margin-vertical: ", ";\n        "])), theme.__hd__.divider.space.small);
 
     case 'medium':
-      return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n          margin: ", "px;\n        "])), theme.__hd__.exampleComponent.space.mediumMargin);
+      return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n          margin-vertical: ", ";\n        "])), theme.__hd__.divider.space.medium);
 
     case 'large':
-      return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n          margin: ", "px;\n        "])), theme.__hd__.exampleComponent.space.largeMargin);
-  }
-}, function (_ref3) {
-  var themeBgColor = _ref3.themeBgColor,
-      theme = _ref3.theme;
+      return css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n          margin-vertical: ", ";\n        "])), theme.__hd__.divider.space.large);
 
-  switch (themeBgColor) {
-    case 'primary':
-      return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n          background-color: ", ";\n        "])), theme.__hd__.exampleComponent.colors.primaryBg);
+    case 'xlarge':
+      return css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n          margin-vertical: ", ";\n        "])), theme.__hd__.divider.space.xlarge);
+  }
+});
 
-    case 'danger':
-      return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n          background-color: ", ";\n        "])), theme.__hd__.exampleComponent.colors.dangerBg);
+var Divider = function Divider(_ref) {
+  var marginHorizontal = _ref.marginHorizontal,
+      marginVertical = _ref.marginVertical;
+  return /*#__PURE__*/React__default["default"].createElement(StyledDivider, {
+    themeMarginHorizontal: marginHorizontal,
+    themeMarginVertical: marginVertical
+  });
+};
 
-    case 'warning':
-      return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n          background-color: ", ";\n        "])), theme.__hd__.exampleComponent.colors.warningBg);
-  }
+var _templateObject;
+var StyledCard = styled(reactNative$1.View)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border-radius: ", ";\n  padding: ", ";\n"])), function (_ref) {
+  var theme = _ref.theme;
+  return theme.__hd__.card.radii["default"];
+}, function (_ref2) {
+  var theme = _ref2.theme;
+  return theme.__hd__.card.padding["default"];
 });
 
-var ExampleComponent = function ExampleComponent(_ref) {
-  var _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 'small' : _ref$size,
-      margin = _ref.margin,
-      bgColor = _ref.bgColor;
-  return /*#__PURE__*/React__default["default"].createElement(Square, {
-    themeSize: size,
-    themeMargin: margin,
-    themeBgColor: bgColor
-  }, /*#__PURE__*/React__default["default"].createElement(reactNative$1.Text, null, "Square with ".concat(size, " size, ").concat(margin, " margin and ").concat(bgColor, " background.")));
+var Card = function Card(props) {
+  return /*#__PURE__*/React__default["default"].createElement(StyledCard, props);
 };
 
-exports.ExampleComponent = ExampleComponent;
+exports.Card = Card;
+exports.Divider = Divider;
 exports.ThemeProvider = ThemeProvider;
 exports.getTheme = getTheme;
 exports.theme = theme;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "6.7.4-1",
+  "version": "7.0.1",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -9,14 +9,15 @@
     "lint": "eslint src playground --ext .js,.jsx,.ts,.tsx --ignore-path ../../.gitignore",
     "type-check": "tsc --noEmit",
     "dev": "expo start",
-    "test": "jest --runInBand",
+    "test": "jest --runInBand --watch",
+    "test:ci": "jest --runInBand --logHeapUsage",
     "build:js": "rollup -c",
     "build:types": "tsc --noEmit false --emitDeclarationOnly",
     "build": "yarn build:js && yarn build:types",
     "publish:npm": "yarn publish --access public"
   },
   "dependencies": {
-    "@hero-design/colors": "6.7.4-1",
+    "@hero-design/colors": "7.0.1",
     "styled-components": "6.0.0-alpha.5"
   },
   "peerDependencies": {
@@ -45,6 +46,7 @@
     "@types/styled-components-react-native": "^5.1.3",
     "@typescript-eslint/eslint-plugin": "^5.12.1",
     "@typescript-eslint/parser": "^5.12.1",
+    "babel-plugin-module-resolver": "^4.1.0",
     "eslint": "^8.9.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-prettier": "^8.5.0",
@@ -67,18 +69,26 @@
   },
   "nx": {
     "targets": {
+      "type-check": {
+        "dependsOn": [
+          {
+            "target": "build:types",
+            "projects": "dependencies"
+          }
+        ]
+      },
       "lint": {
         "dependsOn": [
           {
-            "target": "build",
+            "target": "build:js",
             "projects": "dependencies"
           }
         ]
       },
-      "type-check": {
+      "test:ci": {
         "dependsOn": [
           {
-            "target": "build:types",
+            "target": "build",
             "projects": "dependencies"
           }
         ]

package/playground/components/Card.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { View } from 'react-native';
+import { Card, useTheme } from '../../src/index';
+
+const CardPlayground = () => {
+  const theme = useTheme();
+  return (
+    <View
+      style={{
+        flex: 1,
+        marginVertical: theme.space.xxxxlarge,
+        marginHorizontal: theme.space.xxxxlarge,
+      }}
+    >
+      <Card
+        style={{
+          flex: 1,
+          backgroundColor: theme.colors.backgroundDark,
+          padding: theme.space.medium,
+        }}
+      >
+        <Card
+          style={{ flex: 1, backgroundColor: theme.colors.backgroundLight }}
+        />
+        <Card
+          style={{ flex: 1, backgroundColor: theme.colors.infoBackground }}
+        />
+        <Card style={{ flex: 1, backgroundColor: theme.colors.primaryLight }} />
+      </Card>
+
+      <Card
+        style={{
+          flex: 1,
+          backgroundColor: theme.colors.backgroundDark,
+          padding: theme.space.medium,
+          flexDirection: 'row',
+          marginTop: theme.space.large,
+        }}
+      >
+        <Card
+          style={{ flex: 1, backgroundColor: theme.colors.backgroundLight }}
+        />
+        <Card
+          style={{ flex: 1, backgroundColor: theme.colors.infoBackground }}
+        />
+        <Card style={{ flex: 1, backgroundColor: theme.colors.primaryLight }} />
+      </Card>
+    </View>
+  );
+};
+
+export default CardPlayground;

package/playground/components/Divider.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { View } from 'react-native';
+import { Divider } from '../../src/index';
+
+const DividerPlayground = () => (
+  <View>
+    <Divider marginHorizontal="xlarge" marginVertical="medium" />
+    <Divider marginHorizontal="large" marginVertical="large" />
+    <Divider marginHorizontal="medium" marginVertical="xlarge" />
+  </View>
+);
+
+export default DividerPlayground;

package/playground/index.tsx

@@ -3,14 +3,16 @@ import { NavigationContainer, DefaultTheme } from '@react-navigation/native'; //
 import { createNativeStackNavigator } from '@react-navigation/native-stack'; // eslint-disable-line import/no-extraneous-dependencies
 import { SafeAreaView, FlatList, Text, ListRenderItemInfo } from 'react-native';
 import { ThemeProvider, theme, useTheme } from '../src/index';
-import ExampleComponentPlayground from './components/ExampleComponent';
+import DividerPlayground from './components/Divider';
+import CardPlayground from './components/Card';
 
 type ComponentEntry = { name: string; component: React.FC };
 
 const Stack = createNativeStackNavigator();
 
 const components: ComponentEntry[] = [
-  { name: 'ExampleComponent', component: ExampleComponentPlayground },
+  { name: 'Divider', component: DividerPlayground },
+  { name: 'Card', component: CardPlayground },
 ];
 
 const ComponentItem = ({