@factorialco/f0-react-native 0.20.1 → 0.21.0

package/README.md

@@ -1,54 +1,133 @@
-# F0 React Native
+# F0 React Native 🎨
 
 React Native implementation of the F0 Design System.
 
-## Installation
+## 🚀 Quick Setup
+
+### 1️⃣ Install Dependencies
 
 ```bash
-npm install @factorialco/f0-react-native
-# or
-yarn add @factorialco/f0-react-native
-# or
-pnpm add @factorialco/f0-react-native
+# Install package and peer dependencies
+pnpm add @factorialco/f0-react-native \
+  date-fns@^3.6.0 \
+  nativewind@^4.2.1 \
+  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 \
+  twemoji-parser@^14.0.0
+
+# Install dev dependencies
+pnpm add -D tailwindcss@^3.4.19
 ```
 
-## Usage
+### 2️⃣ Configure Babel
+
+**`babel.config.js`:**
+
+```javascript
+module.exports = function (api) {
+  api.cache(true);
+  return {
+    presets: [
+      ["babel-preset-expo", { jsxImportSource: "nativewind" }], // Expo only
+      "nativewind/babel",
+    ],
+    plugins: [
+      "react-native-worklets-core/plugin",
+      "react-native-reanimated/plugin", // MUST be last
+    ],
+  };
+};
+```
 
-```tsx
-import { ExampleComponent } from "@factorialco/f0-react-native";
+### 3️⃣ Configure Metro
 
-export default function App() {
-  return <ExampleComponent text="Hello from F0!" />;
-}
+**`metro.config.js`:**
+
+```javascript
+const { getDefaultConfig } = require("expo/metro-config");
+const { withNativeWind } = require("nativewind/metro");
+
+const config = getDefaultConfig(__dirname);
+module.exports = withNativeWind(config, { input: "./global.css" });
 ```
 
-## Icons
+### 4️⃣ Configure Tailwind
 
-The package includes a set of icons that can be imported and used in your React Native application.
+**`tailwind.config.js`:**
 
-```tsx
-import { Icon, AppIcons } from "@factorialco/f0-react-native";
+```javascript
+const f0Config = require("@factorialco/f0-react-native/tailwind.config");
 
-// Basic usage
-<Icon icon={AppIcons.Calendar} size="sm" />;
-<Icon icon={AppIcons.Calendar} size="md" />;
-<Icon icon={AppIcons.Calendar} size="lg" />;
+module.exports = {
+  ...f0Config,
+  content: [
+    ...(f0Config.content || []),
+    "./app/**/*.{js,jsx,ts,tsx}",
+    "./src/**/*.{js,jsx,ts,tsx}",
+  ],
+  presets: [require("nativewind/preset"), ...(f0Config.presets || [])],
+};
 ```
 
-## Development
+### 5️⃣ Create Global CSS
 
-### Building
+**`global.css` (root):**
 
-```bash
-pnpm build
+```css
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 ```
 
-### Testing
+**Import in your entry file (`App.tsx` or `index.js`):**
+
+```typescript
+import "./global.css";
+```
+
+### 6️⃣ TypeScript Support (Optional)
+
+**`nativewind-env.d.ts` (root):**
+
+```typescript
+/// <reference types="nativewind/types" />
+```
+
+## 📦 Usage
+
+```tsx
+import { Button, Icon, AppIcons } from "@factorialco/f0-react-native";
+
+export default function App() {
+  return (
+    <>
+      <Button>Click me</Button>
+      <Icon icon={AppIcons.Calendar} size="md" />
+    </>
+  );
+}
+```
+
+## 🔧 Development
 
 ```bash
+# Run tests
 pnpm test
+
+# Type check
+pnpm tsc-check
+
+# Lint
+pnpm lint
 ```
 
-## License
+## 📚 Documentation
+
+For detailed installation guide, see [docs/INSTALLATION.md](./docs/INSTALLATION.md).
+
+## 📄 License
 
 MIT

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@factorialco/f0-react-native",
-  "version": "0.20.1",
+  "version": "0.21.0",
   "type": "module",
   "description": "React Native components for F0 Design System",
   "main": "src/index.ts",
@@ -30,6 +30,12 @@
       "react-native": "./src/icons/modules/index.ts",
       "default": "./src/icons/modules/index.ts"
     },
+    "./src/icons/app": {
+      "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"
   },
   "files": [
@@ -46,52 +52,64 @@
   "license": "MIT",
   "peerDependencies": {
     "date-fns": "^3.6.0",
-    "nativewind": "^4.1.23",
-    "react": "^18.2.0",
-    "react-native": "^0.76.6",
-    "react-native-svg": "^15.8.0",
-    "tailwindcss": "^3.4.3",
-    "twemoji-parser": "^14.0.0",
-    "typescript": "^5.7.2"
+    "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",
+    "twemoji-parser": "^14.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react-native-worklets-core": {
+      "optional": true
+    }
   },
   "dependencies": {
     "clsx": "^2.1.1",
     "cva": "1.0.0-beta.3",
-    "expo-clipboard": "^7.1.4",
+    "expo-clipboard": "~8.0.8",
     "lodash": "^4.17.21",
-    "react-native-safe-area-context": "4.12.0",
     "tailwind-merge": "^2.6.0",
-    "@factorialco/f0-core": "1.29.0"
+    "@factorialco/f0-core": "1.42.1"
   },
   "devDependencies": {
+    "@babel/core": "^7.28.0",
     "@svgr/cli": "^8.1.0",
-    "@testing-library/react-native": "^12.9.0",
+    "@testing-library/react-native": "^13.3.3",
     "@types/jest": "^29.5.14",
     "@types/lodash": "^4.17.16",
-    "@types/react": "^18.2.0",
-    "@types/react-native": "^0.73.0",
+    "@types/react": "~19.1.17",
     "@types/twemoji-parser": "^13.1.4",
+    "babel-jest": "^29.7.0",
+    "babel-preset-expo": "^54.0.8",
     "globals": "^16.0.0",
     "jest": "^29.7.0",
-    "nativewind": "^4.1.23",
-    "npm-run-all": "^4.1.5",
+    "nativewind": "^4.2.1",
+    "npm-run-all2": "^7.0.1",
     "prettier": "^3.5.2",
     "prettier-plugin-tailwindcss": "^0.6.10",
-    "react": "^18.2.0",
-    "react-native": "^0.76.6",
-    "react-native-svg": "^15.8.0",
-    "tailwindcss": "^3.4.3",
+    "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",
     "tailwindcss-animate": "^1.0.7",
-    "typescript": "^5.7.2",
-    "babel-jest": "^29.7.0"
+    "typescript": "~5.9.3"
   },
   "scripts": {
     "build": "echo 'we ship source code as is'; exit 0",
     "lint": "eslint -c eslint.config.mjs . --report-unused-disable-directives --max-warnings 0",
-    "lint-fix": "pnpm run lint -- --fix",
+    "lint-fix": "eslint -c eslint.config.mjs . --fix --report-unused-disable-directives --max-warnings 0",
     "test": "jest",
-    "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 '' 's/SVGSVGElement/Svg/g; s/ xmlns=\"http:\\/\\/www.w3.org\\/2000\\/svg\"//g; s/ strokeWidth={[^}]*}//g; s/ strokeWidth=\"[^\"]*\"//g' {} +",
+    "test:watch": "jest --watch",
+    "test:ci": "jest --ci --coverage --coverageReporters=text --coverageReporters=lcov",
+    "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"
+    "generate-module-icons": "npx @svgr/cli --out-dir src/icons/modules --native --svg-props className={props.className} ../../packages/core/assets/icons/modules",
+    "prettier:format": "prettier --write \"src/**/*.{ts,tsx}\"",
+    "tsc": "tsc --noEmit"
   }
 }

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

@@ -5,7 +5,7 @@ exports[`DateAvatar Snapshot 1`] = `
   className="flex h-10 w-10 flex-col items-center justify-center rounded border border-solid border-f1-border-secondary bg-f1-background-inverse-secondary"
 >
   <Text
-    className="pt-0.5 text-xs font-semibold uppercase leading-3 text-f1-special-highlight dark:text-f1-foreground-inverse-secondary"
+    className="dark:text-f1-foreground-inverse-secondary pt-0.5 text-xs font-semibold uppercase leading-3 text-f1-special-highlight"
   >
     Jan
   </Text>

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

@@ -11,7 +11,7 @@ export const DateAvatar = ({ date }: Props) => {
 
   return (
     <View className="flex h-10 w-10 flex-col items-center justify-center rounded border border-solid border-f1-border-secondary bg-f1-background-inverse-secondary">
-      <Text className="pt-0.5 text-xs font-semibold uppercase leading-3 text-f1-special-highlight dark:text-f1-foreground-inverse-secondary">
+      <Text className="dark:text-f1-foreground-inverse-secondary pt-0.5 text-xs font-semibold uppercase leading-3 text-f1-special-highlight">
         {month}
       </Text>
       <Text className="flex items-center justify-center text-lg font-medium leading-tight text-f1-foreground">

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

@@ -2,7 +2,7 @@
 
 exports[`EmojiAvatar Snapshot - different sizes text emoji and diferent size 1`] = `
 <View
-  className="w-6 h-6 rounded-sm flex aspect-square items-center justify-center border border-solid border-f1-border-secondary bg-f1-background dark:bg-f1-background-inverse-secondary"
+  className="w-6 h-6 rounded-sm dark:bg-f1-background-inverse-secondary flex aspect-square items-center justify-center border border-solid border-f1-border-secondary bg-f1-background"
 >
   <Text
     className="text-xs"
@@ -14,7 +14,7 @@ exports[`EmojiAvatar Snapshot - different sizes text emoji and diferent size 1`]
 
 exports[`EmojiAvatar Snapshot - different sizes text emoji and diferent size 2`] = `
 <View
-  className="w-9 h-9 rounded-md flex aspect-square items-center justify-center border border-solid border-f1-border-secondary bg-f1-background dark:bg-f1-background-inverse-secondary"
+  className="w-9 h-9 rounded-md dark:bg-f1-background-inverse-secondary flex aspect-square items-center justify-center border border-solid border-f1-border-secondary bg-f1-background"
 >
   <Text
     className="text-sm"
@@ -26,7 +26,7 @@ exports[`EmojiAvatar Snapshot - different sizes text emoji and diferent size 2`]
 
 exports[`EmojiAvatar Snapshot - different sizes text emoji and diferent size 3`] = `
 <View
-  className="w-10 h-10 rounded-lg flex aspect-square items-center justify-center border border-solid border-f1-border-secondary bg-f1-background dark:bg-f1-background-inverse-secondary"
+  className="w-10 h-10 rounded-lg dark:bg-f1-background-inverse-secondary flex aspect-square items-center justify-center border border-solid border-f1-border-secondary bg-f1-background"
 >
   <Text
     className="text-md"

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

@@ -26,7 +26,7 @@ export const EmojiAvatar = ({ emoji, size = "md", className }: Props) => {
       className={cn(
         className,
         sizes[size],
-        "flex aspect-square items-center justify-center border border-solid border-f1-border-secondary bg-f1-background dark:bg-f1-background-inverse-secondary",
+        "dark:bg-f1-background-inverse-secondary flex aspect-square items-center justify-center border border-solid border-f1-border-secondary bg-f1-background",
       )}
     >
       <EmojiImage emoji={emoji} size={emojiSize[size]} />

package/src/components/__tests__/ExampleComponent.spec.tsx

@@ -1,16 +1,16 @@
-import { render } from "@testing-library/react-native"
-import React from "react"
-import { ExampleComponent } from "../ExampleComponent"
+import { render } from "@testing-library/react-native";
+import React from "react";
+import { ExampleComponent } from "../ExampleComponent";
 
 describe("ExampleComponent", () => {
   it("renders correctly with default text", () => {
-    const { getByText } = render(<ExampleComponent />)
-    expect(getByText("Hello World")).toBeTruthy()
-  })
+    const { getByText } = render(<ExampleComponent />);
+    expect(getByText("Hello World")).toBeTruthy();
+  });
 
   it("renders correctly with custom text", () => {
-    const customText = "Custom Hello Text"
-    const { getByText } = render(<ExampleComponent text={customText} />)
-    expect(getByText(customText)).toBeTruthy()
-  })
-})
+    const customText = "Custom Hello Text";
+    const { getByText } = render(<ExampleComponent text={customText} />);
+    expect(getByText(customText)).toBeTruthy();
+  });
+});

package/src/icons/app/Ascending.tsx

@@ -0,0 +1,19 @@
+import Svg, { Path } from "react-native-svg";
+import type { SvgProps } from "react-native-svg";
+import { Ref, forwardRef } from "react";
+const SvgAscending = (props: SvgProps, ref: Ref<Svg>) => (
+  <Svg
+    fill="none"
+    viewBox="0 0 24 24"
+    className={props.className}
+    ref={ref}
+    {...props}
+  >
+    <Path
+      fill="currentColor"
+      d="M6.19 5.19a.65.65 0 0 1 .92 0l.014.014.007.008.034.034.008.007.007.007.007.007.013.014.008.007.007.007.007.008.007.006.007.007.007.008.028.028.008.007.007.008.007.007.008.007.007.008.007.006.007.008.088.088.008.007.007.008.022.022.008.007.007.008.008.008.008.007.006.007.008.008.008.007.007.008.015.015.008.007.007.008.008.008.008.007.008.008.006.007.016.016.008.007.007.008.023.023.008.007.008.008.007.008.03.03.009.008.015.015.007.008.07.07.008.007.149.149.007.008.094.094.009.008.031.031.008.009.07.07.01.008.023.024.007.008.086.086.01.008.046.047.008.009.133.133.007.006.032.032.007.007.054.055.008.007.008.008.007.008.03.03.009.008.008.008.006.007.024.024.008.007.006.007.016.016.008.007.007.008.015.015.008.007.007.008.008.008.008.007.006.007.008.008.008.007.007.008.008.008.008.007.006.007.008.008.008.007.007.008.008.007.007.007.022.023.008.007.007.008.007.006.007.008.008.007.007.008.008.007.007.008.021.021.008.007.007.008.021.021L9 7.08l.007.008.014.013.007.007.007.008.007.007.008.007.007.007.006.007.014.014.008.007.007.007.007.008.04.04.008.007.035.035.006.006.04.041.007.006.007.007.006.007.014.014.007.006.005.006.046.046.007.006.006.007.007.006.006.007.025.025.007.006.006.007.007.006.005.006.006.006.007.006.006.007.006.006.007.006.006.007.017.017.007.006.006.007.082.082.006.005.006.006.005.005.011.012.006.005.005.006.006.006.006.005.005.006.043.042.005.005.005.006.006.005.005.006.01.01.006.005.005.005.01.01.005.005.01.01.005.006.03.029.004.004.005.005.004.005.01.01.004.003.005.005.004.005.005.005.005.004.004.005.005.004.004.005.017.017.005.004.004.005.005.004.004.005.008.008.005.003q0 .003.003.005l.012.012.005.004.02.02.002.003.016.016.004.003.003.004.004.004.004.003.003.004.004.004.004.002.002.004.004.003.003.004.004.003.003.004.003.003.004.003.003.004.006.006.004.003.003.004.029.029.003.002.002.003.006.006q0 0 .003.002 0 .001.002.002l.002.002.002.003.01.01.003.002.002.003.002.002.003.002.002.002.002.003.02.02h.001l.002.002.001.002.002.002.002.001.001.002.002.001.001.002h.002l.001.003h.002v.003h.002l.002.002v.002l.005.004h.002l.002.003.004.004v.001l.002.001v.001h.001v.001h.001v.001h.001v.001h.001l.083.103a.651.651 0 0 1-.9.9L9.19 9.11v-.002h-.002v-.002h-.001l-.001-.002h-.001L9.18 9.1H9.18l-.002-.002-.001-.002-.004-.004-.002-.001-.001-.002-.001-.001-.002-.001-.001-.002-.002-.001v-.002L9.16 9.08v-.002l-.003-.001v-.002l-.003-.002h-.002l-.002-.003V9.07l-.02-.02-.003-.001-.002-.002-.002-.003-.002-.002-.003-.002-.002-.003-.01-.01-.002-.002-.002-.003q-.002 0-.003-.002l-.002-.003-.006-.005-.003-.002-.002-.003-.03-.03-.003-.002-.003-.004-.006-.006-.004-.003-.003-.004-.003-.003-.004-.003-.003-.004-.004-.003-.003-.004-.003-.003-.003-.004-.004-.003-.004-.003-.003-.004L9 8.919l-.004-.003-.003-.004-.015-.016q-.003 0-.004-.003l-.02-.02-.004-.004-.012-.012-.004-.004q-.003-.001-.004-.004l-.008-.008-.005-.004-.004-.005-.005-.004-.004-.005-.017-.017-.005-.004-.004-.005-.005-.004-.004-.005-.005-.005-.005-.004-.005-.005-.003-.005-.01-.01q-.003 0-.005-.003L8.83 8.75l-.004-.005-.03-.03-.005-.004-.01-.01-.005-.006-.01-.01-.005-.004-.005-.006-.01-.01-.006-.005-.005-.006-.006-.005-.004-.006-.043-.043-.006-.004-.005-.006-.006-.006-.006-.005-.005-.006-.011-.012-.006-.004-.006-.006-.005-.006-.082-.082-.007-.006-.006-.007-.017-.018-.007-.005-.006-.007-.006-.006-.007-.006-.006-.007-.005-.006-.007-.005-.006-.007-.007-.006-.006-.007-.025-.025-.007-.006-.006-.007-.007-.006-.006-.007-.046-.046-.006-.006-.006-.006-.014-.014-.007-.006-.007-.007-.005-.007-.041-.04-.007-.006-.034-.035-.007-.007-.041-.041-.008-.007-.007-.007-.007-.008-.013-.014-.008-.006-.007-.007-.007-.008-.007-.007-.008-.007-.006-.008-.014-.013L8.08 8l-.007-.008-.021-.021-.008-.007-.007-.008-.021-.022-.008-.006L8 7.92l-.008-.007-.007-.008-.007-.007-.007-.007-.008-.007-.007-.008-.022-.023-.008-.006-.007-.008-.008-.007-.007-.008-.008-.008-.007-.007-.007-.007-.008-.008-.008-.007-.007-.008-.007-.008-.008-.006-.007-.008-.008-.008-.008-.007-.007-.008L7.8 7.72l-.008-.007-.007-.008-.015-.016-.008-.006-.007-.008-.024-.024-.007-.007-.008-.007-.007-.008-.031-.031-.008-.007-.008-.008-.007-.008-.054-.055-.008-.006-.031-.032-.007-.007-.133-.133-.009-.008-.047-.047-.008-.009-.057-.057v11.43a.651.651 0 0 1-1.287.131L6 18.651V7.22l-.058.057-.007.009-.047.047-.01.008-.132.133-.007.007-.031.032-.008.006-.054.055-.007.008-.008.008-.008.007-.031.03-.007.009-.008.007-.008.007-.023.024-.007.008-.008.006-.015.016-.007.008-.008.007-.016.015-.006.008-.008.007-.008.008-.007.008-.008.006-.008.008-.006.008-.008.007-.008.008-.007.007-.008.007-.007.008-.007.008-.008.007-.007.008-.008.006-.022.023-.007.008-.008.007-.007.007-.008.007-.006.008-.008.007-.007.008-.008.006-.021.022-.007.008-.008.007-.021.021L5.22 8l-.008.007-.014.013-.007.008-.007.007-.007.007-.007.008-.007.007-.008.006-.013.014-.007.008-.007.007-.008.007-.04.04-.008.008-.034.035-.007.005-.04.041-.007.007-.006.007-.007.006-.014.014-.006.006-.007.006-.046.046-.005.007-.007.006-.006.007-.007.006-.025.025-.006.007-.007.006-.006.007-.007.005-.006.006-.005.007-.007.006-.006.006-.006.007-.007.005-.017.018-.006.007-.007.006-.082.082-.005.006-.006.006-.006.004-.011.012-.005.006-.006.005-.006.006-.005.006-.006.004-.043.043-.005.006-.006.005-.004.006-.006.005-.01.01-.005.006-.006.004-.01.01-.004.006-.01.01-.006.005-.03.029-.003.005-.005.005-.005.004-.01.01-.004.004-.005.005-.004.004-.005.005-.004.005-.005.004-.004.005-.005.004-.018.017q0 .003-.003.005l-.005.004-.004.005-.005.004-.008.008-.004.004-.005.004-.011.012-.004.005-.02.02-.004.002-.015.016-.003.004-.004.003-.004.004-.003.004-.004.003-.004.003q0 .003-.003.004l-.004.003-.003.004-.004.003-.002.004-.004.003-.003.003-.003.004-.004.003-.006.006-.003.004-.004.002-.03.03-.001.003q0 0-.003.002l-.006.005-.002.003-.003.002-.002.003-.003.002-.01.01-.001.003-.003.002-.002.002-.002.003-.002.002-.003.002-.02.02v.001l-.003.002-.001.001-.002.002-.001.002-.002.001-.001.002h-.002l-.001.003h-.002l-.001.003h-.002l-.001.002-.001.002h-.002l-.004.005v.002L4.12 9.1l-.005.003v.001l-.002.001v.002h-.002v.002H4.11v.001l-.102.083a.65.65 0 0 1-.9-.9l.082-.103h.002v-.002h.002v-.002h.002v-.002h.001l.004-.003V8.18l.002-.002.002-.001.004-.004.001-.002.002-.001v-.001l.002-.002.002-.001v-.002l.003-.001v-.002h.003v-.003h.003l.002-.003v-.002l.002-.002h.002l.02-.02.002-.003.002-.002.003-.002.002-.002.002-.003.003-.002.01-.01.001-.003q.002 0 .003-.002l.002-.002.003-.002.006-.006.002-.003.003-.002.03-.03.002-.003.004-.003.006-.006.003-.004.004-.003.003-.003.003-.004.004-.003.002-.004q.003 0 .004-.003l.003-.004.004-.002.004-.004.003-.004.004-.003L3.382 8l.003-.004.004-.003.015-.016.003-.003.02-.02.005-.004.011-.012.004-.005q.003 0 .005-.003l.008-.008.004-.005.005-.004.004-.005.005-.004.017-.017.004-.005.005-.004.004-.005.005-.004.005-.005.003-.005.005-.005.005-.004.01-.01.004-.004.005-.005.005-.004.029-.03q.003-.001.005-.005l.01-.01.005-.005.01-.01.005-.005.006-.005.01-.01.005-.006.006-.005.004-.006.006-.005.043-.042.005-.006.006-.005.006-.006.005-.006.006-.005.011-.012.005-.005.006-.006.006-.005.082-.082.006-.007.007-.006.017-.017.006-.007.007-.006.006-.006.006-.007.006-.006.006-.006.006-.006.007-.006.006-.007.007-.006.025-.025.006-.007.007-.006.006-.007.006-.006.046-.046.006-.006.007-.006.014-.014.006-.007.006-.007.007-.006.041-.04.006-.007.034-.035.008-.006.041-.041.007-.008.007-.007.008-.007.013-.014.007-.007.007-.007.008-.007.007-.007.006-.008.008-.007.014-.013.007-.008.008-.007.021-.021.007-.008.008-.007.021-.021.007-.008L4.381 7l.007-.008.008-.007.006-.008.008-.006.007-.008.008-.007.022-.023.007-.007.008-.007.007-.008.008-.007.007-.008.007-.007.008-.007.008-.008.007-.008.007-.007.008-.008.007-.007.008-.007.008-.008.007-.008.007-.007.016-.015.007-.008.008-.007.015-.016.007-.007.008-.007.023-.024.007-.007.008-.008.008-.007.031-.031.007-.008.008-.008.008-.007.054-.055.007-.007.031-.032.008-.006.133-.133.008-.009.047-.047.008-.008.086-.086.008-.008.024-.024.008-.008.07-.07.009-.009.03-.031.01-.008.093-.094.008-.008.149-.149.007-.007.07-.07.008-.008.015-.015.008-.007.031-.032.007-.007.008-.008.008-.007.023-.023.007-.008.008-.007.015-.016.007-.007.008-.008.008-.007.008-.008.007-.008.007-.007.016-.015.007-.008.008-.007.007-.008.007-.007.008-.007.008-.008.007-.008.008-.007.022-.022.007-.008.008-.007.088-.088.006-.008.008-.006L6 5.38l.008-.007.007-.007.006-.008.008-.007.029-.028.006-.008.008-.007.007-.006.007-.008.007-.007.008-.007.013-.014.007-.007.007-.007.008-.007.034-.034.007-.008zm14.088 12.184a.65.65 0 0 1 0 1.273l-.131.014h-6.868a.651.651 0 0 1 0-1.3h6.868zm-1.717-3.91a.65.65 0 0 1 0 1.273l-.131.014h-5.15a.65.65 0 0 1 0-1.3h5.15zm-1.717-3.91a.65.65 0 0 1 0 1.273l-.131.014h-3.434a.65.65 0 0 1 0-1.301h3.434zM15.127 5.65a.65.65 0 0 1 0 1.274l-.13.013h-1.718a.65.65 0 0 1 0-1.3h1.717z"
+    />
+  </Svg>
+);
+const ForwardRef = forwardRef(SvgAscending);
+export default ForwardRef;

package/src/icons/app/Balance.tsx

@@ -0,0 +1,28 @@
+import Svg, { Path, Circle } from "react-native-svg";
+import type { SvgProps } from "react-native-svg";
+import { Ref, forwardRef } from "react";
+const SvgBalance = (props: SvgProps, ref: Ref<Svg>) => (
+  <Svg
+    fill="none"
+    viewBox="0 0 24 24"
+    className={props.className}
+    ref={ref}
+    {...props}
+  >
+    <Path
+      stroke="currentColor"
+      strokeLinecap="round"
+      d="M10 19h4M12 13v6M5 12.5l14 1"
+    />
+    <Circle cx={7.5} cy={6.5} r={2.5} stroke="currentColor" />
+    <Circle
+      cx={17}
+      cy={7.5}
+      r={2.5}
+      fill="currentColor"
+      stroke="currentColor"
+    />
+  </Svg>
+);
+const ForwardRef = forwardRef(SvgBalance);
+export default ForwardRef;

package/src/icons/app/CardPin.tsx

@@ -0,0 +1,24 @@
+import Svg, { Path } from "react-native-svg";
+import type { SvgProps } from "react-native-svg";
+import { Ref, forwardRef } from "react";
+const SvgCardPin = (props: SvgProps, ref: Ref<Svg>) => (
+  <Svg
+    fill="none"
+    viewBox="0 0 24 24"
+    className={props.className}
+    ref={ref}
+    {...props}
+  >
+    <Path
+      stroke="currentColor"
+      d="M7 6h10a3 3 0 0 1 3 3v6a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3V9a3 3 0 0 1 3-3Z"
+    />
+    <Path
+      stroke="currentColor"
+      strokeLinecap="round"
+      d="M8 12v.1M12 12v.1M16 12v.1"
+    />
+  </Svg>
+);
+const ForwardRef = forwardRef(SvgCardPin);
+export default ForwardRef;

package/src/icons/app/Chip.tsx

@@ -0,0 +1,21 @@
+import Svg, { Rect, Path } from "react-native-svg";
+import type { SvgProps } from "react-native-svg";
+import { Ref, forwardRef } from "react";
+const SvgChip = (props: SvgProps, ref: Ref<Svg>) => (
+  <Svg
+    fill="none"
+    viewBox="0 0 24 24"
+    className={props.className}
+    ref={ref}
+    {...props}
+  >
+    <Rect width={12} height={12} x={6} y={6} stroke="currentColor" rx={3} />
+    <Path
+      stroke="currentColor"
+      strokeLinecap="round"
+      d="M9 6V4M9 20v-2M18 9h2M4 9h2M15 6V4M15 20v-2M18 15h2M4 15h2M12 9l-3 3M15 12l-3 3"
+    />
+  </Svg>
+);
+const ForwardRef = forwardRef(SvgChip);
+export default ForwardRef;

package/src/icons/app/ClockBack.tsx

@@ -0,0 +1,19 @@
+import Svg, { Path } from "react-native-svg";
+import type { SvgProps } from "react-native-svg";
+import { Ref, forwardRef } from "react";
+const SvgClockBack = (props: SvgProps, ref: Ref<Svg>) => (
+  <Svg
+    fill="none"
+    viewBox="0 0 24 24"
+    className={props.className}
+    ref={ref}
+    {...props}
+  >
+    <Path
+      fill="currentColor"
+      d="M10.508 4.497A7.65 7.65 0 1 1 6.591 17.41a.65.65 0 0 1 .919-.919 6.352 6.352 0 0 0 10.566-2.646 6.352 6.352 0 0 0-7.315-8.071A6.35 6.35 0 0 0 5.679 11.4l.861-.86.103-.083a.65.65 0 0 1 .9.9l-.083.103-2 2a.65.65 0 0 1-.817.083l-.103-.083-2-2-.083-.103a.65.65 0 0 1 .9-.9l.103.083.91.91a7.65 7.65 0 0 1 6.138-6.953M12 8.35a.65.65 0 0 1 .65.65v2.623l3.172 1.813.108.076a.65.65 0 0 1-.632 1.106l-.12-.053-3.5-2A.65.65 0 0 1 11.35 12V9a.65.65 0 0 1 .65-.65"
+    />
+  </Svg>
+);
+const ForwardRef = forwardRef(SvgClockBack);
+export default ForwardRef;

package/src/icons/app/ClockPlus.tsx

@@ -0,0 +1,27 @@
+import Svg, { Path } from "react-native-svg";
+import type { SvgProps } from "react-native-svg";
+import { Ref, forwardRef } from "react";
+const SvgClockPlus = (props: SvgProps, ref: Ref<Svg>) => (
+  <Svg
+    fill="none"
+    viewBox="0 0 24 24"
+    className={props.className}
+    ref={ref}
+    {...props}
+  >
+    <Path
+      stroke="currentColor"
+      strokeLinecap="round"
+      d="M13 19.938Q12.508 20 12 20a8 8 0 1 1 7.91-6.793"
+    />
+    <Path
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M12 9v3l3.5 2"
+    />
+    <Path stroke="currentColor" strokeLinecap="round" d="M16 18h4M18 16v4" />
+  </Svg>
+);
+const ForwardRef = forwardRef(SvgClockPlus);
+export default ForwardRef;

package/src/icons/app/Cloud.tsx

@@ -0,0 +1,20 @@
+import Svg, { Path } from "react-native-svg";
+import type { SvgProps } from "react-native-svg";
+import { Ref, forwardRef } from "react";
+const SvgCloud = (props: SvgProps, ref: Ref<Svg>) => (
+  <Svg
+    fill="none"
+    viewBox="0 0 24 24"
+    className={props.className}
+    ref={ref}
+    {...props}
+  >
+    <Path
+      stroke="currentColor"
+      strokeLinejoin="round"
+      d="M12 6a4 4 0 0 1 4 4 4 4 0 0 1 0 8H8a4 4 0 0 1 0-8 4 4 0 0 1 4-4Z"
+    />
+  </Svg>
+);
+const ForwardRef = forwardRef(SvgCloud);
+export default ForwardRef;

package/src/icons/app/Command.tsx

@@ -0,0 +1,31 @@
+import Svg, { Path } from "react-native-svg";
+import type { SvgProps } from "react-native-svg";
+import { Ref, forwardRef } from "react";
+const SvgCommand = (props: SvgProps, ref: Ref<Svg>) => (
+  <Svg
+    fill="none"
+    viewBox="0 0 24 24"
+    className={props.className}
+    ref={ref}
+    {...props}
+  >
+    <Path
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="m8 9 3 3-3 3"
+    />
+    <Path
+      stroke="currentColor"
+      d="M7 6h10a3 3 0 0 1 3 3v6a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3V9a3 3 0 0 1 3-3Z"
+    />
+    <Path
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M13 15h3"
+    />
+  </Svg>
+);
+const ForwardRef = forwardRef(SvgCommand);
+export default ForwardRef;

package/src/icons/app/Computer.tsx

@@ -0,0 +1,25 @@
+import Svg, { Path } from "react-native-svg";
+import type { SvgProps } from "react-native-svg";
+import { Ref, forwardRef } from "react";
+const SvgComputer = (props: SvgProps, ref: Ref<Svg>) => (
+  <Svg
+    fill="none"
+    viewBox="0 0 24 24"
+    className={props.className}
+    ref={ref}
+    {...props}
+  >
+    <Path
+      stroke="currentColor"
+      strokeLinecap="round"
+      d="M5 18h8M9 15v3M12.5 7H6.2c-1.12 0-1.68 0-2.108.218a2 2 0 0 0-.874.874C3 8.52 3 9.08 3 10.2v1.6c0 1.12 0 1.68.218 2.108a2 2 0 0 0 .874.874C4.52 15 5.08 15 6.2 15h6.3"
+    />
+    <Path
+      stroke="currentColor"
+      d="M15 8c0-.932 0-1.398.152-1.765a2 2 0 0 1 1.083-1.083C16.602 5 17.068 5 18 5s1.398 0 1.765.152a2 2 0 0 1 1.083 1.083C21 6.602 21 7.068 21 8v7c0 .932 0 1.398-.152 1.765a2 2 0 0 1-1.083 1.083C19.398 18 18.932 18 18 18s-1.398 0-1.765-.152a2 2 0 0 1-1.083-1.083C15 16.398 15 15.932 15 15z"
+    />
+    <Path stroke="currentColor" strokeLinecap="round" d="M18 15v.1" />
+  </Svg>
+);
+const ForwardRef = forwardRef(SvgComputer);
+export default ForwardRef;

package/src/icons/app/Contactless.tsx

@@ -0,0 +1,21 @@
+import Svg, { Path } from "react-native-svg";
+import type { SvgProps } from "react-native-svg";
+import { Ref, forwardRef } from "react";
+const SvgContactless = (props: SvgProps, ref: Ref<Svg>) => (
+  <Svg
+    fill="none"
+    viewBox="0 0 24 24"
+    className={props.className}
+    ref={ref}
+    {...props}
+  >
+    <Path stroke="currentColor" strokeLinecap="round" d="M6.5 12v.1" />
+    <Path
+      stroke="currentColor"
+      strokeLinecap="round"
+      d="M15 5a8.95 8.95 0 0 1 3.363 7A8.95 8.95 0 0 1 15 19M11 7.517A5.73 5.73 0 0 1 13.154 12c0 1.814-.841 3.43-2.154 4.483"
+    />
+  </Svg>
+);
+const ForwardRef = forwardRef(SvgContactless);
+export default ForwardRef;

package/src/icons/app/CornerHandle.tsx

@@ -0,0 +1,21 @@
+import Svg, { Path } from "react-native-svg";
+import type { SvgProps } from "react-native-svg";
+import { Ref, forwardRef } from "react";
+const SvgCornerHandle = (props: SvgProps, ref: Ref<Svg>) => (
+  <Svg
+    fill="none"
+    viewBox="0 0 24 24"
+    className={props.className}
+    ref={ref}
+    {...props}
+  >
+    <Path
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M16 6 6 16m11-4.5L11.5 17"
+    />
+  </Svg>
+);
+const ForwardRef = forwardRef(SvgCornerHandle);
+export default ForwardRef;