@grupalia/rn-ui-kit 0.0.1

package/lib/typescript/module/styles/gradients.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"gradients.d.ts","sourceRoot":"","sources":["../../../../src/styles/gradients.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,wBAiiDE"}

package/lib/typescript/module/styles/text-colors.d.ts

@@ -0,0 +1,92 @@
+declare const _default: {
+    'text-primary': {
+        light: string;
+        dark: string;
+    };
+    'text-primary_on-brand': {
+        light: string;
+        dark: string;
+    };
+    'text-secondary': {
+        light: string;
+        dark: string;
+    };
+    'text-secondary_hover': {
+        light: string;
+        dark: string;
+    };
+    'text-secondary_on-brand': {
+        light: string;
+        dark: string;
+    };
+    'text-tertiary': {
+        light: string;
+        dark: string;
+    };
+    'text-tertiary_hover': {
+        light: string;
+        dark: string;
+    };
+    'text-tertiary_on-brand': {
+        light: string;
+        dark: string;
+    };
+    'text-quaternary': {
+        light: string;
+        dark: string;
+    };
+    'text-quaternary_on-brand': {
+        light: string;
+        dark: string;
+    };
+    'text-white': {
+        light: string;
+        dark: string;
+    };
+    'text-disabled': {
+        light: string;
+        dark: string;
+    };
+    'text-placeholder': {
+        light: string;
+        dark: string;
+    };
+    'text-placeholder_subtle': {
+        light: string;
+        dark: string;
+    };
+    'text-brand-primary': {
+        light: string;
+        dark: string;
+    };
+    'text-brand-secondary': {
+        light: string;
+        dark: string;
+    };
+    'text-brand-secondary_hover': {
+        light: string;
+        dark: string;
+    };
+    'text-brand-tertiary': {
+        light: string;
+        dark: string;
+    };
+    'text-brand-tertiary_alt': {
+        light: string;
+        dark: string;
+    };
+    'text-error-primary': {
+        light: string;
+        dark: string;
+    };
+    'text-warning-primary': {
+        light: string;
+        dark: string;
+    };
+    'text-success-primary': {
+        light: string;
+        dark: string;
+    };
+};
+export default _default;
+//# sourceMappingURL=text-colors.d.ts.map

package/lib/typescript/module/styles/text-colors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-colors.d.ts","sourceRoot":"","sources":["../../../../src/styles/text-colors.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,wBAyFE"}

package/package.json

@@ -0,0 +1,89 @@
+{
+  "name": "@grupalia/rn-ui-kit",
+  "version": "0.0.1",
+  "description": "Grupalia React Native UI Kit",
+  "main": "./lib/module/index.js",
+  "types": "./lib/typescript/module/index.d.ts",
+  "files": [
+    "lib",
+    "src/preset.ts",
+    "src/styles"
+  ],
+  "scripts": {
+    "dev": "chokidar \"src/**/*\" -c \"yarn bob build\"",
+    "build": "bob build",
+    "typecheck": "tsc --noEmit",
+    "prepare": "bob build"
+  },
+  "peerDependencies": {
+    "clsx": "^2.1.1",
+    "nativewind": "^2.0.11",
+    "react": "*",
+    "react-native": "*",
+    "tailwindcss": "3.3.2"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.20.0",
+    "@types/react": "~18.2.45",
+    "@typescript-eslint/eslint-plugin": "^7.10.0",
+    "@typescript-eslint/parser": "^7.10.0",
+    "chokidar-cli": "^3.0.0",
+    "clsx": "^2.1.1",
+    "eslint": "^8.29.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-jsx-a11y": "^6.8.0",
+    "eslint-plugin-react": "^7.34.1",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-tailwindcss": "^3.17.4",
+    "nativewind": "^2.0.11",
+    "react": "18.2.0",
+    "react-native": "0.74.5",
+    "react-native-builder-bob": "^0.40.6",
+    "tailwindcss": "3.3.2",
+    "typescript": "~5.3.3"
+  },
+  "exports": {
+    ".": {
+      "require": {
+        "types": "./lib/typescript/commonjs/index.d.ts",
+        "default": "./lib/commonjs/index.js"
+      },
+      "import": {
+        "types": "./lib/typescript/module/index.d.ts",
+        "default": "./lib/module/index.js"
+      }
+    },
+    "./preset": {
+      "require": "./lib/commonjs/preset.js",
+      "import": "./lib/module/preset.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      [
+        "commonjs",
+        {
+          "babelrc": false
+        }
+      ],
+      [
+        "module",
+        {
+          "esm": true
+        }
+      ],
+      "typescript"
+    ]
+  },
+  "eslintIgnore": [
+    "node_modules/",
+    "lib/"
+  ],
+  "dependencies": {
+    "@grupalia/rn-ui-kit": "file:.yalc/@grupalia/rn-ui-kit"
+  }
+}

package/src/preset.ts

@@ -0,0 +1,32 @@
+import type { Config } from 'tailwindcss';
+
+import backgroundColors from './styles/background-colors';
+import borderColors from './styles/border-colors';
+import textColors from './styles/text-colors';
+
+type SemanticColorObject = Record<string, { light: string; dark?: string }>;
+
+function mapLightColors(
+  semanticObject: SemanticColorObject,
+  prefix: string,
+): Record<string, string> {
+  return Object.entries(semanticObject).reduce((acc, [key, value]) => {
+    const name = key.replace(`${prefix}-`, '');
+    acc[name] = value.light;
+    return acc;
+  }, {} as Record<string, string>);
+}
+
+const preset: Config = {
+  content: [],
+  theme: {
+    extend: {
+      backgroundColor: mapLightColors(backgroundColors, 'bg'),
+      textColor: mapLightColors(textColors, 'text'),
+      borderColor: mapLightColors(borderColors, 'border'),
+    },
+  },
+  plugins: [],
+};
+
+export default preset;

package/src/styles/background-colors.ts

@@ -0,0 +1,128 @@
+import colors from './colors';
+
+export default {
+  'bg-primary': {
+    light: colors.base.white,
+    dark: colors.gray_dark['950'],
+  },
+  'bg-primary_alt': {
+    light: colors.base.white,
+    dark: colors.gray_dark['900'],
+  },
+  'bg-primary_hover': {
+    light: colors.gray_light['50'],
+    dark: colors.gray_dark['800'],
+  },
+  'bg-primary_solid': {
+    light: colors.gray_light['950'],
+    dark: colors.gray_dark['900'],
+  },
+  'bg-secondary': {
+    light: colors.gray_light['50'],
+    dark: colors.gray_dark['900'],
+  },
+  'bg-secondary_alt': {
+    light: colors.gray_light['50'],
+    dark: colors.gray_dark['950'],
+  },
+  'bg-secondary_hover': {
+    light: colors.gray_light['100'],
+    dark: colors.gray_dark['800'],
+  },
+  'bg-secondary_subtle': {
+    light: colors.gray_light['25'],
+    dark: colors.gray_dark['900'],
+  },
+  'bg-secondary_solid': {
+    light: colors.gray_light['600'],
+    dark: colors.gray_dark['600'],
+  },
+  'bg-tertiary': {
+    light: colors.gray_light['100'],
+    dark: colors.gray_dark['800'],
+  },
+  'bg-quaternary': {
+    light: colors.gray_light['200'],
+    dark: colors.gray_dark['700'],
+  },
+  'bg-active': {
+    light: colors.gray_light['50'],
+    dark: colors.gray_dark['800'],
+  },
+  'bg-disabled': {
+    light: colors.gray_light['100'],
+    dark: colors.gray_dark['800'],
+  },
+  'bg-disabled_subtle': {
+    light: colors.gray_light['50'],
+    dark: colors.gray_dark['900'],
+  },
+  'bg-overlay': {
+    light: colors.gray_light['950'],
+    dark: colors.gray_dark['800'],
+  },
+  'bg-brand_primary': {
+    light: colors.brand['50'],
+    dark: colors.brand['500'],
+  },
+  'bg-brand_primary_alt': {
+    light: colors.brand['50'],
+    dark: colors.gray_dark['800'],
+  },
+  'bg-brand_secondary': {
+    light: colors.brand['100'],
+    dark: colors.brand['600'],
+  },
+  'bg-brand_solid': {
+    light: colors.brand['600'],
+    dark: colors.brand['600'],
+  },
+  'bg-brand_solid_hover': {
+    light: colors.brand['700'],
+    dark: colors.brand['500'],
+  },
+  'bg-brand_section': {
+    light: colors.brand['800'],
+    dark: colors.gray_dark['800'],
+  },
+  'bg-brand_section_subtle': {
+    light: colors.brand['700'],
+    dark: colors.gray_dark['950'],
+  },
+  'bg-error_primary': {
+    light: colors.error['50'],
+    dark: colors.error['950'],
+  },
+  'bg-error_secondary': {
+    light: colors.error['100'],
+    dark: colors.error['600'],
+  },
+  'bg-error_solid': {
+    light: colors.error['600'],
+    dark: colors.error['600'],
+  },
+  'bg-warning_primary': {
+    light: colors.warning['50'],
+    dark: colors.warning['950'],
+  },
+  'bg-warning_secondary': {
+    light: colors.warning['100'],
+    dark: colors.warning['600'],
+  },
+  'bg-warning_solid': {
+    light: colors.warning['600'],
+    dark: colors.warning['600'],
+  },
+  'bg-success_primary': {
+    light: colors.success['50'],
+    dark: colors.success['950'],
+  },
+  'bg-success_secondary': {
+    light: colors.success['100'],
+    dark: colors.success['600'],
+  },
+  'bg-success_solid': {
+    light: colors.success['600'],
+    dark: colors.success['600'],
+  },
+};

package/src/styles/border-colors.ts

@@ -0,0 +1,44 @@
+import colors from './colors';
+
+export default {
+  'border-primary': {
+    light: colors.gray_light['300'],
+    dark: colors.gray_dark['700'],
+  },
+  'border-secondary': {
+    light: colors.gray_light['200'],
+    dark: colors.gray_dark['800'],
+  },
+  'border-secondary_alt': {
+    light: '#00000014',
+    dark: colors.gray_dark['800'],
+  },
+  'border-tertiary': {
+    light: colors.gray_light['100'],
+    dark: colors.gray_dark['800'],
+  },
+  'border-disabled': {
+    light: colors.gray_light['300'],
+    dark: colors.gray_dark['700'],
+  },
+  'border-disabled_subtle': {
+    light: colors.gray_light['200'],
+    dark: colors.gray_dark['800'],
+  },
+  'border-brand': {
+    light: colors.brand['500'],
+    dark: colors.brand['400'],
+  },
+  'border-brand_alt': {
+    light: colors.brand['600'],
+    dark: colors.gray_dark['700'],
+  },
+  'border-error': {
+    light: colors.error['500'],
+    dark: colors.error['400'],
+  },
+  'border-error_subtle': {
+    light: colors.error['300'],
+    dark: colors.error['500'],
+  },
+};