@factorialco/f0-react-native 0.22.0 → 0.23.1

package/lib/typescript/styles/tokens/colors.d.ts

@@ -0,0 +1,246 @@
+export declare const baseColors: {
+    readonly white: {
+        readonly 3: "0 0% 100% / 0.03";
+        readonly 5: "0 0% 100% / 0.05";
+        readonly 10: "0 0% 100% / 0.1";
+        readonly 20: "0 0% 100% / 0.2";
+        readonly 30: "0 0% 100% / 0.3";
+        readonly 40: "0 0% 100% / 0.4";
+        readonly 50: "0 0% 100% / 0.5";
+        readonly 60: "0 0% 100% / 0.6";
+        readonly 70: "0 0% 100% / 0.7";
+        readonly 80: "0 0% 100% / 0.8";
+        readonly 90: "0 0% 100% / 0.9";
+        readonly 100: "0 0% 100%";
+    };
+    readonly current: "currentColor";
+    readonly transparent: "transparent";
+    readonly grey: {
+        readonly 0: "210 91% 22% / 0.02";
+        readonly 5: "220 88% 17% / 0.04";
+        readonly 10: "216 89% 18% / 0.06";
+        readonly 20: "214 70% 20% / 0.1";
+        readonly 30: "213 87% 15% / 0.20";
+        readonly 40: "219 97% 15% / 0.45";
+        readonly 50: "217 96% 11% / 0.61";
+        readonly 60: "220 88% 10% / 0.82";
+        readonly 70: "219 91% 8% / 0.88";
+        readonly 80: "219 94% 7% / 0.9";
+        readonly 90: "219 88% 6% / 0.92";
+        readonly 100: "218 48% 10%";
+        readonly solid: {
+            readonly 40: "219 18% 69%";
+            readonly 50: "218 14% 45%";
+        };
+    };
+    readonly lilac: {
+        readonly 50: "340 49% 60%";
+        readonly 60: "341 34% 50%";
+        readonly 70: "340 33% 41%";
+    };
+    readonly barbie: {
+        readonly 50: "331 84% 63%";
+        readonly 60: "331 55% 53%";
+        readonly 70: "330 49% 43%";
+    };
+    readonly smoke: {
+        readonly 50: "192 26% 54%";
+        readonly 60: "192 22% 45%";
+        readonly 70: "192 22% 37%";
+    };
+    readonly army: {
+        readonly 50: "162 44% 33%";
+        readonly 60: "163 45% 28%";
+        readonly 70: "162 44% 23%";
+    };
+    readonly flubber: {
+        readonly 50: "84 55% 53%";
+        readonly 60: "84 48% 45%";
+        readonly 70: "83 48% 33%";
+    };
+    readonly indigo: {
+        readonly 50: "239 91% 64%";
+        readonly 60: "239 59% 54%";
+        readonly 70: "239 51% 44%";
+    };
+    readonly camel: {
+        readonly 50: "25 46% 53%";
+        readonly 60: "25 42% 44%";
+        readonly 70: "25 42% 36%";
+    };
+    readonly radical: {
+        readonly 50: "348 80% 50%";
+        readonly 60: "348 80% 42%";
+        readonly 70: "347 80% 34%";
+    };
+    readonly viridian: {
+        readonly 50: "184 92% 35%";
+        readonly 60: "184 92% 28%";
+        readonly 70: "184 92% 24%";
+    };
+    readonly orange: {
+        readonly 50: "25 95% 53%";
+        readonly 60: "24 69% 49%";
+        readonly 70: "24 69% 40%";
+    };
+    readonly red: {
+        readonly 50: "5 100% 65%";
+        readonly 60: "4 61% 49%";
+        readonly 70: "3 71% 41%";
+    };
+    readonly grass: {
+        readonly 50: "160 84% 39%";
+        readonly 60: "160 85% 33%";
+        readonly 70: "161 84% 27%";
+    };
+    readonly malibu: {
+        readonly 50: "216 90% 65%";
+        readonly 60: "216 59% 55%";
+        readonly 70: "216 48% 44%";
+    };
+    readonly yellow: {
+        readonly 50: "38 92% 54%";
+        readonly 60: "38 79% 45%";
+        readonly 70: "38 80% 36%";
+    };
+    readonly purple: {
+        readonly 50: "258 88% 67%";
+        readonly 60: "258 56% 56%";
+        readonly 70: "258 43% 46%";
+    };
+};
+export type BaseColor = keyof typeof baseColors;
+export declare const f1Colors: {
+    readonly foreground: {
+        readonly DEFAULT: "hsl(var(--neutral-100))";
+        readonly secondary: "hsl(var(--neutral-50))";
+        readonly tertiary: "hsl(var(--neutral-40))";
+        readonly inverse: {
+            readonly DEFAULT: "hsl(var(--white-100))";
+            readonly secondary: "hsl(var(--white-80))";
+        };
+        readonly disabled: "hsl(var(--neutral-30))";
+        readonly accent: "hsl(var(--accent-70))";
+        readonly critical: "hsl(var(--critical-70))";
+        readonly info: "hsl(var(--info-70))";
+        readonly warning: "hsl(var(--warning-70))";
+        readonly positive: "hsl(var(--positive-70))";
+        readonly selected: "hsl(var(--selected-70))";
+    };
+    readonly background: {
+        readonly DEFAULT: "hsl(var(--neutral-0))";
+        readonly hover: "hsl(var(--neutral-5))";
+        readonly secondary: {
+            readonly DEFAULT: "hsl(var(--neutral-10))";
+            readonly hover: "hsl(var(--neutral-20))";
+        };
+        readonly tertiary: "hsl(var(--neutral-5))";
+        readonly inverse: {
+            readonly DEFAULT: "hsl(var(--neutral-90))";
+            readonly secondary: "hsl(var(--white-60))";
+        };
+        readonly bold: "hsl(var(--neutral-90))";
+        readonly accent: {
+            readonly DEFAULT: "hsl(var(--accent-50) / 0.05)";
+            readonly bold: {
+                readonly DEFAULT: "hsl(var(--accent-50))";
+                readonly hover: "hsl(var(--accent-60))";
+            };
+        };
+        readonly promote: {
+            readonly DEFAULT: "hsl(var(--promote-50) / 0.3)";
+            readonly hover: "hsl(var(--promote-50) / 0.4)";
+        };
+        readonly critical: {
+            readonly DEFAULT: "hsl(var(--critical-50) / 0.1)";
+            readonly bold: "hsl(var(--critical-60))";
+        };
+        readonly info: {
+            readonly DEFAULT: "hsl(var(--info-50) / 0.1)";
+            readonly bold: "hsl(var(--info-50))";
+        };
+        readonly warning: {
+            readonly DEFAULT: "hsl(var(--warning-50) / 0.1)";
+            readonly bold: "hsl(var(--warning-50))";
+        };
+        readonly positive: {
+            readonly DEFAULT: "hsl(var(--positive-50) / 0.1)";
+            readonly bold: "hsl(var(--positive-50))";
+        };
+        readonly selected: {
+            readonly DEFAULT: "hsl(var(--selected-50) / 0.1)";
+            readonly secondary: "hsl(var(--selected-50) / 0.05)";
+            readonly hover: "hsl(var(--selected-50) / 0.2)";
+            readonly bold: {
+                readonly DEFAULT: "hsl(var(--selected-60))";
+                readonly hover: "hsl(var(--selected-70))";
+            };
+        };
+        readonly overlay: {
+            readonly DEFAULT: "hsl(var(--neutral-40))";
+        };
+    };
+    readonly border: {
+        readonly DEFAULT: "hsl(var(--neutral-30))";
+        readonly hover: "hsl(var(--neutral-40))";
+        readonly secondary: "hsl(var(--neutral-10))";
+        readonly inverse: "hsl(var(--neutral-0) / 0.2)";
+        readonly bold: "hsl(var(--neutral-100))";
+        readonly promote: {
+            readonly DEFAULT: "hsl(var(--promote-50) / 0.4)";
+        };
+        readonly selected: {
+            readonly DEFAULT: "hsl(var(--selected-50) / 0.4)";
+            readonly bold: "hsl(var(--selected-50))";
+        };
+        readonly critical: {
+            readonly DEFAULT: "hsl(var(--critical-50) / 0.1)";
+            readonly bold: "hsl(var(--critical-50))";
+        };
+        readonly warning: {
+            readonly DEFAULT: "hsl(var(--warning-50) / 0.1)";
+            readonly bold: "hsl(var(--warning-50))";
+        };
+        readonly info: {
+            readonly DEFAULT: "hsl(var(--info-50) / 0.1)";
+            readonly bold: "hsl(var(--info-50))";
+        };
+        readonly positive: {
+            readonly DEFAULT: "hsl(var(--positive-50) / 0.1)";
+            readonly bold: "hsl(var(--positive-50))";
+        };
+    };
+    readonly icon: {
+        readonly DEFAULT: "hsl(var(--neutral-solid-50))";
+        readonly secondary: "hsl(var(--neutral-solid-40))";
+        readonly inverse: "hsl(var(--neutral-0))";
+        readonly bold: "hsl(var(--neutral-100))";
+        readonly critical: {
+            readonly DEFAULT: "hsl(var(--critical-50))";
+            readonly bold: "hsl(var(--critical-70))";
+        };
+        readonly accent: "hsl(var(--accent-50))";
+        readonly info: "hsl(var(--info-50))";
+        readonly warning: "hsl(var(--warning-50))";
+        readonly positive: "hsl(var(--positive-50))";
+        readonly promote: "hsl(var(--promote-50))";
+        readonly selected: {
+            readonly DEFAULT: "hsl(var(--selected-60))";
+            readonly hover: "hsl(var(--selected-70))";
+        };
+        readonly mood: {
+            readonly "super-negative": "hsl(var(--mood-super-negative))";
+            readonly negative: "hsl(var(--mood-negative))";
+            readonly neutral: "hsl(var(--mood-neutral))";
+            readonly positive: "hsl(var(--mood-positive))";
+            readonly "super-positive": "hsl(var(--mood-super-positive))";
+        };
+    };
+    readonly special: {
+        readonly ring: "hsl(var(--ring))";
+        readonly page: "hsl(var(--page))";
+        readonly highlight: "hsl(var(--accent-50))";
+    };
+};
+export type F1Color = keyof typeof f1Colors;
+//# sourceMappingURL=colors.d.ts.map

package/lib/typescript/styles/tokens/colors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../../../src/styles/tokens/colors.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8Gb,CAAA;AAEV,MAAM,MAAM,SAAS,GAAG,MAAM,OAAO,UAAU,CAAA;AAE/C,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmIX,CAAA;AAEV,MAAM,MAAM,OAAO,GAAG,MAAM,OAAO,QAAQ,CAAA"}

package/lib/typescript/styles/tokens/spacing.d.ts

@@ -0,0 +1,16 @@
+import type { Config } from "tailwindcss";
+/**
+ * Spacing for the tailwind config
+ * Provides scale in relative(rem) and absolute(px) units
+ *
+ * The pixel scale is used by default.
+ * All properties that do not explicitly set to use relative scale, use pixels.
+ *
+ * Relative scale is used for size definitions, like heights and widths.
+ */
+type ThemeSpacing = NonNullable<Config["theme"]>["spacing"];
+export declare const absoluteSpacing: ThemeSpacing;
+export declare const relativeSpacing: ThemeSpacing;
+export declare const betweenSpacing: ThemeSpacing;
+export {};
+//# sourceMappingURL=spacing.d.ts.map

package/lib/typescript/styles/tokens/spacing.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"spacing.d.ts","sourceRoot":"","sources":["../../../../src/styles/tokens/spacing.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAA;AAEzC;;;;;;;;GAQG;AAEH,KAAK,YAAY,GAAG,WAAW,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAA;AAE3D,eAAO,MAAM,eAAe,EAAE,YAqC7B,CAAA;AAED,eAAO,MAAM,eAAe,EAAE,YAqC7B,CAAA;AAOD,eAAO,MAAM,cAAc,EAAE,YAK5B,CAAA"}

package/lib/typescript/ui/avatar.d.ts

@@ -0,0 +1,20 @@
+import * as React from "react";
+import { View, Text } from "react-native";
+export declare const sizes: readonly ["xsmall", "small", "medium", "large", "xlarge"];
+export declare const type: readonly ["base", "rounded"];
+export declare const color: readonly ["viridian", "malibu", "yellow", "purple", "lilac", "barbie", "smoke", "army", "flubber", "indigo", "camel"];
+type AvatarProps = React.ComponentPropsWithoutRef<typeof View> & {
+    size?: (typeof sizes)[number];
+    type?: (typeof type)[number];
+    color?: (typeof color)[number];
+};
+declare const Avatar: ({ size, type, color, className, ...props }: AvatarProps) => React.JSX.Element;
+declare const AvatarImage: ({ className, alt, src, ...props }: React.ComponentPropsWithoutRef<typeof View> & {
+    src?: string;
+    alt: string;
+}) => React.JSX.Element;
+declare const AvatarFallback: ({ className, size, ...props }: React.ComponentPropsWithoutRef<typeof Text> & {
+    size?: (typeof sizes)[number];
+}) => React.JSX.Element;
+export { Avatar, AvatarFallback, AvatarImage };
+//# sourceMappingURL=avatar.d.ts.map

package/lib/typescript/ui/avatar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../../src/ui/avatar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,IAAI,EAAE,IAAI,EAAS,MAAM,cAAc,CAAC;AAEjD,eAAO,MAAM,KAAK,2DAA4D,CAAC;AAE/E,eAAO,MAAM,IAAI,8BAA+B,CAAC;AAEjD,eAAO,MAAM,KAAK,uHAYR,CAAC;AA6CX,KAAK,WAAW,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,IAAI,CAAC,GAAG;IAC/D,IAAI,CAAC,EAAE,CAAC,OAAO,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC;IAC9B,IAAI,CAAC,EAAE,CAAC,OAAO,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC;IAC7B,KAAK,CAAC,EAAE,CAAC,OAAO,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC;CAChC,CAAC;AAEF,QAAA,MAAM,MAAM,GAAI,4CAA4C,WAAW,sBAKtE,CAAC;AAEF,QAAA,MAAM,WAAW,GAAI,mCAKlB,KAAK,CAAC,wBAAwB,CAAC,OAAO,IAAI,CAAC,GAAG;IAC/C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;CACb,sBAUA,CAAC;AAEF,QAAA,MAAM,cAAc,GAAI,+BAIrB,KAAK,CAAC,wBAAwB,CAAC,OAAO,IAAI,CAAC,GAAG;IAC/C,IAAI,CAAC,EAAE,CAAC,OAAO,KAAK,EAAE,MAAM,CAAC,CAAC;CAC/B,sBAKA,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,WAAW,EAAE,CAAC"}

package/package.json

@@ -1,46 +1,69 @@
 {
   "name": "@factorialco/f0-react-native",
-  "version": "0.22.0",
+  "version": "0.23.1",
   "type": "module",
   "description": "React Native components for F0 Design System",
-  "main": "src/index.ts",
-  "module": "src/index.ts",
+  "main": "expo-router/entry",
+  "module": "./lib/module/index.js",
+  "types": "./lib/typescript/index.d.ts",
+  "source": "./src/index.ts",
+  "sideEffects": [
+    "**/*.css"
+  ],
   "exports": {
     ".": {
-      "import": "./src/index.ts",
-      "require": "./src/index.ts",
-      "react-native": "./src/index.ts",
-      "default": "./src/index.ts"
+      "source": "./src/index.ts",
+      "import": {
+        "types": "./lib/typescript/index.d.ts",
+        "default": "./lib/module/index.js"
+      },
+      "require": {
+        "types": "./lib/typescript/index.d.ts",
+        "default": "./lib/module/index.js"
+      },
+      "react-native": "./lib/module/index.js",
+      "default": "./lib/module/index.js"
     },
     "./icons": {
+      "types": "./src/icons/index.ts",
       "import": "./src/icons/index.ts",
       "require": "./src/icons/index.ts",
       "react-native": "./src/icons/index.ts",
       "default": "./src/icons/index.ts"
     },
     "./icons/app": {
+      "types": "./src/icons/app/index.ts",
       "import": "./src/icons/app/index.ts",
       "require": "./src/icons/app/index.ts",
       "react-native": "./src/icons/app/index.ts",
       "default": "./src/icons/app/index.ts"
     },
     "./icons/modules": {
+      "types": "./src/icons/modules/index.ts",
       "import": "./src/icons/modules/index.ts",
       "require": "./src/icons/modules/index.ts",
       "react-native": "./src/icons/modules/index.ts",
       "default": "./src/icons/modules/index.ts"
     },
     "./src/icons/app": {
+      "types": "./src/icons/app/index.ts",
       "import": "./src/icons/app/index.ts",
       "require": "./src/icons/app/index.ts",
       "react-native": "./src/icons/app/index.ts",
       "default": "./src/icons/app/index.ts"
     },
-    "./tailwind.config": "./tailwind.config.ts"
+    "./package.json": "./package.json",
+    "./styles": "./lib/module/styles/index.css",
+    "./expo-router/entry": {
+      "import": "./expo-router/entry.js",
+      "require": "./expo-router/entry.js",
+      "react-native": "./expo-router/entry.js",
+      "default": "./expo-router/entry.js"
+    }
   },
   "files": [
     "src",
-    "tailwind.config.ts"
+    "lib"
   ],
   "keywords": [
     "factorial",
@@ -52,14 +75,16 @@
   "license": "MIT",
   "peerDependencies": {
     "date-fns": "^3.6.0",
-    "nativewind": "^4.2.1",
     "react": "*",
     "react-native": "*",
     "react-native-reanimated": "^3.19.4",
     "react-native-safe-area-context": "^5.4.0",
     "react-native-svg": "^15.12.1",
     "react-native-worklets-core": "^1.6.2",
-    "tailwindcss": "^3.4.19",
+    "tailwind-merge": "^3.4.0",
+    "tailwind-variants": "^3.2.2",
+    "tailwindcss": "^4.1.18",
+    "uniwind": "^1.2.7",
     "twemoji-parser": "^14.0.0"
   },
   "peerDependenciesMeta": {
@@ -68,44 +93,105 @@
     }
   },
   "dependencies": {
-    "clsx": "^2.1.1",
-    "cva": "1.0.0-beta.3",
     "expo-clipboard": "~8.0.8",
     "lodash": "^4.17.21",
-    "tailwind-merge": "^2.6.0",
-    "@factorialco/f0-core": "1.42.1"
+    "tailwind-merge": "^3.4.0",
+    "tailwind-variants": "^3.2.2"
   },
   "devDependencies": {
     "@babel/core": "^7.28.0",
     "@svgr/cli": "^8.1.0",
-    "@testing-library/react-native": "^13.3.3",
-    "@types/jest": "^29.5.14",
     "@types/lodash": "^4.17.16",
-    "@types/react": "~19.1.17",
     "@types/twemoji-parser": "^13.1.4",
-    "babel-jest": "^29.7.0",
-    "babel-preset-expo": "^54.0.8",
+    "glob": "^11.0.0",
     "globals": "^16.0.0",
-    "jest": "^29.7.0",
-    "nativewind": "^4.2.1",
-    "npm-run-all2": "^7.0.1",
+    "npm-run-all2": "^8.0.4",
     "prettier": "^3.5.2",
     "prettier-plugin-tailwindcss": "^0.6.10",
-    "react": "^19.1.0",
-    "react-native": "^0.81.5",
-    "react-native-svg": "15.12.1",
-    "react-test-renderer": "19.1.0",
-    "tailwindcss": "^3.4.19",
+    "tailwind-merge": "^3.4.0",
+    "tailwind-variants": "^3.2.2",
+    "tailwindcss": "^4.1.18",
+    "uniwind": "^1.2.7",
     "tailwindcss-animate": "^1.0.7",
-    "typescript": "~5.9.3"
+    "@expo/vector-icons": "^15.0.3",
+    "@react-navigation/bottom-tabs": "^7.4.0",
+    "@react-navigation/elements": "^2.6.3",
+    "@react-navigation/native": "^7.1.8",
+    "expo": "~54.0.32",
+    "expo-clipboard": "^8.0.8",
+    "expo-constants": "~18.0.13",
+    "expo-font": "~14.0.11",
+    "expo-haptics": "~15.0.8",
+    "expo-image": "~3.0.11",
+    "expo-linking": "~8.0.11",
+    "expo-router": "~6.0.22",
+    "expo-splash-screen": "~31.0.13",
+    "expo-status-bar": "~3.0.9",
+    "expo-symbols": "~1.0.8",
+    "expo-system-ui": "~6.0.9",
+    "expo-web-browser": "~15.0.10",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
+    "react-native": "0.81.5",
+    "react-native-gesture-handler": "~2.28.0",
+    "react-native-reanimated": "~4.1.1",
+    "react-native-safe-area-context": "~5.6.0",
+    "react-native-screens": "~4.16.0",
+    "react-native-svg": "^15.15.1",
+    "react-native-web": "~0.21.0",
+    "react-native-worklets": "0.5.1",
+    "@babel/preset-typescript": "^7.28.5",
+    "@testing-library/react-native": "^13.3.3",
+    "@types/jest": "^30.0.0",
+    "@types/react": "~19.1.0",
+    "babel-jest": "^30.2.0",
+    "babel-preset-expo": "^54.0.10",
+    "@eslint/compat": "^1.2.4",
+    "@eslint/eslintrc": "^3.1.0",
+    "@eslint/js": "^9.18.0",
+    "@typescript-eslint/eslint-plugin": "^8.18.2",
+    "@typescript-eslint/parser": "^8.18.2",
+    "eslint": "^9.25.0",
+    "eslint-config-expo": "~10.0.0",
+    "eslint-plugin-react": "^7.37.3",
+    "eslint-plugin-react-hooks": "^5.1.0",
+    "expo-updates": "^29.0.16",
+    "jest": "^30.2.0",
+    "react-test-renderer": "^19.1.0",
+    "react-native-builder-bob": "^0.40.12",
+    "typescript": "~5.9.2"
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      [
+        "module",
+        {
+          "esm": true,
+          "configFile": true
+        }
+      ],
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
   },
   "scripts": {
-    "build": "echo 'we ship source code as is'; exit 0",
+    "prebuild": "node scripts/set-main.cjs build",
+    "build": "node scripts/build-with-fix.cjs",
+    "build:dev": "SKIP_TYPE_VALIDATION=true node scripts/build-with-fix.cjs --skip-type-validation",
+    "postbuild": "node scripts/set-main.cjs dev && test -d lib/typescript/react-native/package && rm -rf lib/typescript/react-native/package || true",
+    "dev:setup": "node scripts/set-main.cjs dev",
     "lint": "eslint -c eslint.config.mjs . --report-unused-disable-directives --max-warnings 0",
     "lint-fix": "eslint -c eslint.config.mjs . --fix --report-unused-disable-directives --max-warnings 0",
     "test": "jest",
     "test:watch": "jest --watch",
     "test:ci": "jest --ci --coverage --coverageReporters=text --coverageReporters=lcov",
+    "start:dev": "pnpm expo start -c",
     "generate-icons": "rm -fR src/icons/app/* src/icons/modules/* && run-p generate-app-icons generate-module-icons && find src/icons -name '*.tsx' -exec sed -i.bak 's/SVGSVGElement/Svg/g; s/ xmlns=\"http:\\/\\/www.w3.org\\/2000\\/svg\"//g; s/ strokeWidth={[^}]*}//g; s/ strokeWidth=\"[^\"]*\"//g' {} + && find src/icons -name '*.bak' -delete && pnpm run prettier:format",
     "generate-app-icons": "npx @svgr/cli --out-dir src/icons/app --native --svg-props className={props.className} ../../packages/core/assets/icons/app",
     "generate-module-icons": "npx @svgr/cli --out-dir src/icons/modules --native --svg-props className={props.className} ../../packages/core/assets/icons/modules",

package/src/components/Activity/ActivityItem/__snapshots__/index.spec.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`ActivityItem Snapshot 1`] = `
 <View

package/src/components/Avatars/CompanyAvatar/__snapshots__/index.spec.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`CompanyAvatar Snapshot 1`] = `
 <View
@@ -9,7 +9,7 @@ exports[`CompanyAvatar Snapshot 1`] = `
   >
     <View
       aria-hidden={true}
-      className="flex shrink-0 items-center justify-center overflow-hidden text-center font-semibold w-8 h-8 rounded bg-[hsl(theme(colors.viridian.50))]"
+      className="flex shrink-0 items-center justify-center overflow-hidden text-center font-semibold w-8 h-8 rounded bg-[hsl(theme(colors.viridian-50))]"
       data-a11y-color-contrast-ignore={true}
       role="img"
     >

package/src/components/Avatars/DateAvatar/__snapshots__/index.spec.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`DateAvatar Snapshot 1`] = `
 <View

package/src/components/Avatars/EmojiAvatar/__snapshots__/index.spec.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`EmojiAvatar Snapshot - different sizes text emoji and diferent size 1`] = `
 <View

package/src/components/Avatars/FileAvatar/__snapshots__/index.spec.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`FileAvatar Snapshot - different file types 1`] = `
 <View

package/src/components/Avatars/IconAvatar/__snapshots__/index.spec.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`IconAvatar Snapshot - different sizes 1`] = `
 <View
@@ -20,6 +20,9 @@ exports[`IconAvatar Snapshot - different sizes 1`] = `
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
+        [
+          {},
+        ],
         {
           "flex": 0,
           "height": "100%",
@@ -105,6 +108,9 @@ exports[`IconAvatar Snapshot - different sizes 2`] = `
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
+        [
+          {},
+        ],
         {
           "flex": 0,
           "height": "100%",
@@ -190,6 +196,9 @@ exports[`IconAvatar Snapshot - different sizes 3`] = `
           "backgroundColor": "transparent",
           "borderWidth": 0,
         },
+        [
+          {},
+        ],
         {
           "flex": 0,
           "height": "100%",

package/src/components/Avatars/ModuleAvatar/index.tsx

@@ -1,10 +1,10 @@
 import { View } from "react-native";
-import { cva, type VariantProps } from "cva";
+import { tv, type VariantProps } from "tailwind-variants";
 import { IconType, applyIconInterop } from "../../Icon";
 import Svg, { Defs, LinearGradient, Stop, Path } from "react-native-svg";
 import { ModuleId, modules } from "./modules";
 
-const moduleAvatarVariants = cva({
+const moduleAvatarVariants = tv({
   base: "relative flex shrink-0 items-center justify-center",
   variants: {
     size: {
@@ -19,7 +19,7 @@ const moduleAvatarVariants = cva({
   },
 });
 
-const iconContainerVariants = cva({
+const iconContainerVariants = tv({
   base: "absolute inset-0 items-center justify-center z-10",
   variants: {
     size: {
@@ -34,7 +34,7 @@ const iconContainerVariants = cva({
   },
 });
 
-const iconSizeVariants = cva({
+const iconSizeVariants = tv({
   base: "relative text-f1-foreground-inverse drop-shadow",
   variants: {
     size: {

package/src/components/Avatars/PersonAvatar/__snapshots__/index.spec.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`PersonAvatar Snapshot 1`] = `
 <View
@@ -9,7 +9,7 @@ exports[`PersonAvatar Snapshot 1`] = `
   >
     <View
       aria-hidden={true}
-      className="flex shrink-0 items-center justify-center overflow-hidden text-center font-semibold w-8 h-8 rounded-full bg-[hsl(theme(colors.flubber.50))]"
+      className="flex shrink-0 items-center justify-center overflow-hidden text-center font-semibold w-8 h-8 rounded-full bg-[hsl(theme(colors.flubber-50))]"
       data-a11y-color-contrast-ignore={true}
       role="img"
     >

package/src/components/Avatars/TeamAvatar/__snapshots__/index.spec.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`TeamAvatar Snapshot 1`] = `
 <View
@@ -9,7 +9,7 @@ exports[`TeamAvatar Snapshot 1`] = `
   >
     <View
       aria-hidden={true}
-      className="flex shrink-0 items-center justify-center overflow-hidden text-center font-semibold w-8 h-8 rounded bg-[hsl(theme(colors.army.50))]"
+      className="flex shrink-0 items-center justify-center overflow-hidden text-center font-semibold w-8 h-8 rounded bg-[hsl(theme(colors.army-50))]"
       data-a11y-color-contrast-ignore={true}
       role="img"
     >