@grupalia/rn-ui-kit 0.0.3 → 0.0.41

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

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

package/lib/typescript/module/types/heroicons.d.ts

@@ -0,0 +1,9 @@
+import { NumberProp, SvgProps } from 'react-native-svg';
+interface HeroIconProps extends SvgProps {
+    size?: NumberProp;
+}
+export interface HeroIcon {
+    (props: HeroIconProps): JSX.Element;
+}
+export {};
+//# sourceMappingURL=heroicons.d.ts.map

package/lib/typescript/module/types/heroicons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"heroicons.d.ts","sourceRoot":"","sources":["../../../../src/types/heroicons.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAExD,UAAU,aAAc,SAAQ,QAAQ;IACpC,IAAI,CAAC,EAAE,UAAU,CAAC;CACrB;AAED,MAAM,WAAW,QAAQ;IACvB,CAAC,KAAK,EAAE,aAAa,GAAG,GAAG,CAAC,OAAO,CAAC;CACrC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grupalia/rn-ui-kit",
-  "version": "0.0.3",
+  "version": "0.0.41",
   "description": "Grupalia React Native UI Kit",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/module/index.d.ts",
@@ -14,7 +14,8 @@
     "dev": "chokidar \"src/**/*\" -c \"yarn bob build\"",
     "build": "bob build",
     "typecheck": "tsc --noEmit",
-    "prepare": "bob build"
+    "prepare": "bob build",
+    "publish-local": "npx yalc publish"
   },
   "peerDependencies": {
     "clsx": "^2.1.1",
@@ -41,6 +42,7 @@
     "react": "18.2.0",
     "react-native": "0.74.5",
     "react-native-builder-bob": "^0.40.6",
+    "react-native-svg": "^15.11.2",
     "tailwindcss": "3.3.2",
     "typescript": "~5.3.3"
   },
@@ -83,5 +85,6 @@
   "eslintIgnore": [
     "node_modules/",
     "lib/"
-  ]
+  ],
+  "dependencies": {}
 }

package/src/styles/background-colors.ts

@@ -1,6 +1,16 @@
 import colors from './colors';
+import utilityColors from './utility-colors';
 
-export default {
+type ColorObject = {
+  light: string;
+  dark: string;
+};
+
+type BackgroundColorsType = {
+  [key: string]: ColorObject;
+};
+
+const backgroundColors: BackgroundColorsType = {
   'bg-primary': {
     light: colors.base.white,
     dark: colors.gray_dark['950'],
@@ -13,7 +23,7 @@ export default {
     light: colors.gray_light['50'],
     dark: colors.gray_dark['800'],
   },
-  'bg-primary_solid': {
+  'bg-primary-solid': {
     light: colors.gray_light['950'],
     dark: colors.gray_dark['900'],
   },
@@ -33,7 +43,7 @@ export default {
     light: colors.gray_light['25'],
     dark: colors.gray_dark['900'],
   },
-  'bg-secondary_solid': {
+  'bg-secondary-solid': {
     light: colors.gray_light['600'],
     dark: colors.gray_dark['600'],
   },
@@ -61,68 +71,77 @@ export default {
     light: colors.gray_light['950'],
     dark: colors.gray_dark['800'],
   },
-  'bg-brand_primary': {
+  'bg-brand-primary': {
     light: colors.brand['50'],
     dark: colors.brand['500'],
   },
-  'bg-brand_primary_alt': {
+  'bg-brand-primary_alt': {
     light: colors.brand['50'],
     dark: colors.gray_dark['800'],
   },
-  'bg-brand_secondary': {
+  'bg-brand-secondary': {
     light: colors.brand['100'],
     dark: colors.brand['600'],
   },
-  'bg-brand_solid': {
+  'bg-brand-solid': {
     light: colors.brand['600'],
     dark: colors.brand['600'],
   },
-  'bg-brand_solid_hover': {
+  'bg-brand-solid_hover': {
     light: colors.brand['700'],
     dark: colors.brand['500'],
   },
-  'bg-brand_section': {
+  'bg-brand-section': {
     light: colors.brand['800'],
     dark: colors.gray_dark['800'],
   },
-  'bg-brand_section_subtle': {
+  'bg-brand-section_subtle': {
     light: colors.brand['700'],
     dark: colors.gray_dark['950'],
   },
-  'bg-error_primary': {
+  'bg-error-primary': {
     light: colors.error['50'],
     dark: colors.error['950'],
   },
-  'bg-error_secondary': {
+  'bg-error-secondary': {
     light: colors.error['100'],
     dark: colors.error['600'],
   },
-  'bg-error_solid': {
+  'bg-error-solid': {
     light: colors.error['600'],
     dark: colors.error['600'],
   },
-  'bg-warning_primary': {
+  'bg-warning-primary': {
     light: colors.warning['50'],
     dark: colors.warning['950'],
   },
-  'bg-warning_secondary': {
+  'bg-warning-secondary': {
     light: colors.warning['100'],
     dark: colors.warning['600'],
   },
-  'bg-warning_solid': {
+  'bg-warning-solid': {
     light: colors.warning['600'],
     dark: colors.warning['600'],
   },
-  'bg-success_primary': {
+  'bg-success-primary': {
     light: colors.success['50'],
     dark: colors.success['950'],
   },
-  'bg-success_secondary': {
+  'bg-success-secondary': {
     light: colors.success['100'],
     dark: colors.success['600'],
   },
-  'bg-success_solid': {
+  'bg-success-solid': {
     light: colors.success['600'],
     dark: colors.success['600'],
   },
 };
+
+Object.entries(utilityColors).forEach(([key, value]) => {
+  backgroundColors[`bg-utility-${key}`] = {
+    light: value.light,
+    dark: value.dark,
+  };
+});
+
+export default backgroundColors;

package/src/styles/border-colors.ts

@@ -1,6 +1,16 @@
 import colors from './colors';
+import utilityColors from './utility-colors';
 
-export default {
+type ColorObject = {
+  light: string;
+  dark?: string;
+};
+
+type BorderColorsType = {
+  [key: string]: ColorObject;
+};
+
+const borderColors: BorderColorsType = {
   'border-primary': {
     light: colors.gray_light['300'],
     dark: colors.gray_dark['700'],
@@ -42,3 +52,12 @@ export default {
     dark: colors.error['500'],
   },
 };
+
+Object.entries(utilityColors).forEach(([key, value]) => {
+  borderColors[`border-utility-${key}`] = {
+    light: value.light,
+    dark: value.dark,
+  };
+});
+
+export default borderColors;

package/src/styles/colors.ts

@@ -380,4 +380,46 @@ export default {
     900: '#852F99',
     950: '#4A1957',
   },
+  orange_dark: {
+    25: '#FFF9F5',
+    50: '#FFF4ED',
+    100: '#FFE6D5',
+    200: '#FFD6AE',
+    300: '#FF9C66',
+    400: '#FF692E',
+    500: '#FF4405',
+    600: '#E62E05',
+    700: '#BC1B06',
+    800: '#97180C',
+    900: '#771A0D',
+    950: '#57130A',
+  },
+  orange: {
+    25: '#FEFAF5',
+    50: '#FEF6EE',
+    100: '#FDEAD7',
+    200: '#F9DBAF',
+    300: '#F7B27A',
+    400: '#F38744',
+    500: '#EF6820',
+    600: '#E04F16',
+    700: '#B93815',
+    800: '#932F19',
+    900: '#772917',
+    950: '#511C10',
+  },
+  yellow: {
+    25: '#FEFDF0',
+    50: '#FEFBE8',
+    100: '#FEF7C3',
+    200: '#FEEE95',
+    300: '#FDE272',
+    400: '#FAC515',
+    500: '#EAAA08',
+    600: '#CA8504',
+    700: '#A15C07',
+    800: '#854A0E',
+    900: '#713B12',
+    950: '#542C0D',
+  },
 };

package/src/styles/text-colors.ts

@@ -1,17 +1,27 @@
 import colors from './colors';
+import utilityColors from './utility-colors';
 
-export default {
+type ColorObject = {
+  light: string;
+  dark?: string;
+};
+
+type TextColorsType = {
+  [key: string]: ColorObject;
+};
+
+const textColors: TextColorsType = {
   'text-primary': {
     light: colors.gray_light['900'],
-    dark: colors.gray_light['50'],
+    dark: colors.base.white,
   },
   'text-primary_on-brand': {
     light: colors.base.white,
     dark: colors.gray_light['50'],
   },
   'text-secondary': {
-    light: colors.gray_light['700'],
-    dark: colors.gray_light['300'],
+    light: colors.gray_light['600'],
+    dark: colors.gray_light['400'],
   },
   'text-secondary_hover': {
     light: colors.gray_light['800'],
@@ -22,8 +32,8 @@ export default {
     dark: colors.gray_light['300'],
   },
   'text-tertiary': {
-    light: colors.gray_light['600'],
-    dark: colors.gray_light['400'],
+    light: colors.gray_light['400'],
+    dark: colors.gray_light['500'],
   },
   'text-tertiary_hover': {
     light: colors.gray_light['700'],
@@ -46,8 +56,8 @@ export default {
     dark: colors.base.white,
   },
   'text-disabled': {
-    light: colors.gray_light['500'],
-    dark: colors.gray_light['500'],
+    light: colors.gray_light['400'],
+    dark: colors.gray_light['600'],
   },
   'text-placeholder': {
     light: colors.gray_light['500'],
@@ -89,4 +99,29 @@ export default {
     light: colors.success['600'],
     dark: colors.success['400'],
   },
+  'text-brand': {
+    light: colors.brand['600'],
+    dark: colors.brand['400'],
+  },
+  'text-brand_alt': {
+    light: colors.base.white,
+    dark: colors.base.white,
+  },
+  'text-error': {
+    light: colors.error['500'],
+    dark: colors.error['400'],
+  },
+  'text-success': {
+    light: colors.success['500'],
+    dark: colors.success['400'],
+  },
 };
+
+Object.entries(utilityColors).forEach(([key, value]) => {
+  textColors[`text-utility-${key}`] = {
+    light: value.light,
+    dark: value.dark,
+  };
+});
+
+export default textColors;