@dropi/react-native-design-system 0.1.0

package/lib/constants/colors.js

@@ -0,0 +1,296 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.colors = void 0;
+const colors = exports.colors = {
+  "Primary-50": {
+    light: "#FEF8F1",
+    dark: "#1A1006"
+  },
+  "Primary-100": {
+    light: "#FFECD4",
+    dark: "#26180A"
+  },
+  "Primary-200": {
+    light: "#FCDDBD",
+    dark: "#4D3013"
+  },
+  "Primary-300": {
+    light: "#FAC289",
+    dark: "#805020"
+  },
+  "Primary-400": {
+    light: "#F7B46F",
+    dark: "#82712D"
+  },
+  "Primary-500": {
+    light: "#F49A3D",
+    dark: "#D9842B"
+  },
+  "Primary-600": {
+    light: "#CC8133",
+    dark: "#E5A767"
+  },
+  "Primary-700": {
+    light: "#996027",
+    dark: "#EBB681"
+  },
+  "Primary-800": {
+    light: "#66401A",
+    dark: "#F0CEAD"
+  },
+  "Primary-900": {
+    light: "#33200D",
+    dark: "#F0DAC5"
+  },
+  "Secondary-50": {
+    light: "#F0FAFC",
+    dark: "#01161F"
+  },
+  "Secondary-100": {
+    light: "#CEE8F2",
+    dark: "#003042"
+  },
+  "Secondary-200": {
+    light: "#95D0E5",
+    dark: "#00455E"
+  },
+  "Secondary-300": {
+    light: "#62BAD9",
+    dark: "#005A7A"
+  },
+  "Secondary-400": {
+    light: "#33A4CC",
+    dark: "#00759E"
+  },
+  "Secondary-500": {
+    light: "#008BDF",
+    dark: "#2D8FB2"
+  },
+  "Secondary-600": {
+    light: "#007199",
+    dark: "#5BADC9"
+  },
+  "Secondary-700": {
+    light: "#005573",
+    dark: "#7CB9CF"
+  },
+  "Secondary-800": {
+    light: "#00384D",
+    dark: "#ABD2E0"
+  },
+  "Secondary-900": {
+    light: "#001C26",
+    dark: "#DAF1F7"
+  },
+  "Gray-50": {
+    light: "#F7F8FA",
+    dark: "#151A26"
+  },
+  "Gray-100": {
+    light: "#E6EAF2",
+    dark: "#222B40"
+  },
+  "Gray-200": {
+    light: "#C3C9D9",
+    dark: "#364059"
+  },
+  "Gray-300": {
+    light: "#A3ABBF",
+    dark: "#3E4966"
+  },
+  "Gray-400": {
+    light: "#858EA6",
+    dark: "#505A73"
+  },
+  "Gray-500": {
+    light: "#69738C",
+    dark: "#69738C"
+  },
+  "Gray-600": {
+    light: "#475066",
+    dark: "#858EA6"
+  },
+  "Gray-700": {
+    light: "#32394D",
+    dark: "#A3ABBF"
+  },
+  "Gray-800": {
+    light: "#1F2433",
+    dark: "#C3C9D9"
+  },
+  "Gray-900": {
+    light: "#0E111A",
+    dark: "#E6EAF2"
+  },
+  "White": {
+    light: "#FFFFFF",
+    dark: "#0E111A"
+  },
+  "Black": {
+    light: "#000000",
+    dark: "#FFFFFF"
+  },
+  "Success-50": {
+    light: "#E9FFFB",
+    dark: "#023524"
+  },
+  "Success-100": {
+    light: "#B7F3EA",
+    dark: "#064D39"
+  },
+  "Success-200": {
+    light: "#91E8DA",
+    dark: "#096B52"
+  },
+  "Success-300": {
+    light: "#66DDC8",
+    dark: "#0C8C6D"
+  },
+  "Success-400": {
+    light: "#3ADFB6",
+    dark: "#0FAF8B"
+  },
+  "Success-500": {
+    light: "#00D6A0",
+    dark: "#2AC5A7"
+  },
+  "Success-600": {
+    light: "#00B083",
+    dark: "#55D2BC"
+  },
+  "Success-700": {
+    light: "#008C68",
+    dark: "#7FE1D1"
+  },
+  "Success-800": {
+    light: "#00684E",
+    dark: "#B3F2E5"
+  },
+  "Success-900": {
+    light: "#004535",
+    dark: "#E0FBF6"
+  },
+  "Error-50": {
+    light: "#FFEFEF",
+    dark: "#472325"
+  },
+  "Error-100": {
+    light: "#FFCECE",
+    dark: "#662E30"
+  },
+  "Error-200": {
+    light: "#FFA3A3",
+    dark: "#8C3A3D"
+  },
+  "Error-300": {
+    light: "#FF7A7A",
+    dark: "#B34849"
+  },
+  "Error-400": {
+    light: "#FF5252",
+    dark: "#D25456"
+  },
+  "Error-500": {
+    light: "#FF3333",
+    dark: "#E17070"
+  },
+  "Error-600": {
+    light: "#CC2828",
+    dark: "#E89393"
+  },
+  "Error-700": {
+    light: "#991F1F",
+    dark: "#F0B7B7"
+  },
+  "Error-800": {
+    light: "#661515",
+    dark: "#F6DCDC"
+  },
+  "Error-900": {
+    light: "#330B0B",
+    dark: "#FBEFEF"
+  },
+  "Info-50": {
+    light: "#E6F0FE",
+    dark: "#1A3B73"
+  },
+  "Info-100": {
+    light: "#C2DAFC",
+    dark: "#224E92"
+  },
+  "Info-200": {
+    light: "#9CC4FB",
+    dark: "#2C64B3"
+  },
+  "Info-300": {
+    light: "#74AEFA",
+    dark: "#357BD6"
+  },
+  "Info-400": {
+    light: "#4B9AF8",
+    dark: "#4A92E8"
+  },
+  "Info-500": {
+    light: "#1E85F7",
+    dark: "#5AA2F0"
+  },
+  "Info-600": {
+    light: "#1867C5",
+    dark: "#7BB8F3"
+  },
+  "Info-700": {
+    light: "#124E96",
+    dark: "#9CCBF6"
+  },
+  "Info-800": {
+    light: "#0D3668",
+    dark: "#C2E0FA"
+  },
+  "Info-900": {
+    light: "#081C3A",
+    dark: "#E6F2FE"
+  },
+  "Warning-50": {
+    light: "#FFF8E0",
+    dark: "#7A5B00"
+  },
+  "Warning-100": {
+    light: "#FFEFC2",
+    dark: "#927300"
+  },
+  "Warning-200": {
+    light: "#FFE29C",
+    dark: "#AA8A00"
+  },
+  "Warning-300": {
+    light: "#FFD573",
+    dark: "#C2A100"
+  },
+  "Warning-400": {
+    light: "#FFC84C",
+    dark: "#DAB700"
+  },
+  "Warning-500": {
+    light: "#FFBA26",
+    dark: "#EAC432"
+  },
+  "Warning-600": {
+    light: "#D99A1F",
+    dark: "#F0D060"
+  },
+  "Warning-700": {
+    light: "#B37B19",
+    dark: "#F5DC8C"
+  },
+  "Warning-800": {
+    light: "#8C5D12",
+    dark: "#FAE8B9"
+  },
+  "Warning-900": {
+    light: "#663F0C",
+    dark: "#FEF5E0"
+  }
+};

package/lib/constants/index.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _colors = require("./colors");
+Object.keys(_colors).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _colors[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _colors[key];
+    }
+  });
+});
+var _radius = require("./radius");
+Object.keys(_radius).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _radius[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _radius[key];
+    }
+  });
+});
+var _text = require("./text");
+Object.keys(_text).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _text[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _text[key];
+    }
+  });
+});
+var _spacing = require("./spacing");
+Object.keys(_spacing).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _spacing[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _spacing[key];
+    }
+  });
+});

package/lib/constants/radius.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.radius = void 0;
+const radius = exports.radius = {
+  'none': 0,
+  'border-1': 4,
+  'border-2': 8,
+  'border-3': 12,
+  'border-4': 24,
+  'border-5': 32,
+  'circle': 50
+};

package/lib/constants/spacing.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.spacing = void 0;
+var _utils = require("../utils");
+const baseSpacing = {
+  'size-1': 4,
+  'size-2': 8,
+  'size-3': 12,
+  'size-4': 16,
+  'size-5': 24,
+  'size-6': 32,
+  'size-7': 40,
+  'size-8': 48,
+  'size-9': 56,
+  'size-10': 64
+};
+const spacing = exports.spacing = Object.fromEntries(Object.entries(baseSpacing).map(([key, value]) => [key, _utils.isTablet ? value + 8 : value]));

package/lib/constants/text.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.weights = exports.sizes = void 0;
+var _reactNative = require("react-native");
+const {
+  width
+} = _reactNative.Dimensions.get("window");
+const baseSizes = {
+  xxs: 10,
+  xs: 12,
+  s: 14,
+  m: 16,
+  l: 18,
+  xl: 20,
+  xxl: 24,
+  xxxl: 28,
+  xxxxl: 32
+};
+const BASE_WIDTH = 440;
+const rawScaleFactor = width / BASE_WIDTH;
+const multiplier = rawScaleFactor > 1 ? 1 + (rawScaleFactor - 1) * 0.3 : rawScaleFactor;
+const fontScale = _reactNative.PixelRatio.getFontScale();
+const sizes = exports.sizes = Object.fromEntries(Object.entries(baseSizes).map(([key, value]) => [key, Math.round(value * multiplier * fontScale)]));
+const weights = exports.weights = {
+  light: '300',
+  regular: '400',
+  medium: '500',
+  semibold: '600',
+  bold: '700'
+};

package/lib/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _constants = require("./constants/");
+Object.keys(_constants).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _constants[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _constants[key];
+    }
+  });
+});
+var _utils = require("./utils/");
+Object.keys(_utils).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _utils[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _utils[key];
+    }
+  });
+});

package/lib/utils/index.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isTablet = void 0;
+var _reactNative = require("react-native");
+const windowWidth = _reactNative.Dimensions.get("window").width;
+const isTablet = exports.isTablet = windowWidth >= 768;

package/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@dropi/react-native-design-system",
+  "version": "0.1.0",
+  "description": "A React Native package built from scratch",
+  "main": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "files": [
+    "lib"
+  ],
+  "scripts": {
+    "build": "babel src --extensions '.ts,.tsx,' --out-dir lib",
+    "prepare": "npm run build"
+  },
+  "keywords": [
+    "react-native",
+    "react",
+    "component",
+    "library"
+  ],
+  "license": "MIT",
+  "peerDependencies": {
+    "react": ">=19.0.0",
+    "react-native": ">=0.79.5"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.28.3",
+    "@babel/core": "^7.28.5",
+    "@babel/preset-env": "^7.28.5",
+    "@babel/preset-react": "^7.28.5",
+    "@babel/preset-typescript": "^7.28.5",
+    "typescript": "^5.6.0"
+  }
+}