diff --git a/.github/assets/app-icons.png b/.github/assets/app-icons.png
new file mode 100644
index 00000000..6bcdce7a
Binary files /dev/null and b/.github/assets/app-icons.png differ
diff --git a/.github/workflows/eas-build.yml b/.github/workflows/eas-build.yml
index ee8af8e4..c2d7acc2 100644
--- a/.github/workflows/eas-build.yml
+++ b/.github/workflows/eas-build.yml
@@ -6,8 +6,17 @@ env:
EXPO_PUBLIC_OPENAPI_URL: ${{ vars.OPENAPI_URL }}
on:
- push:
- branches: [main]
+ workflow_dispatch:
+ inputs:
+ profile:
+ description: EAS build profile
+ required: true
+ default: production
+ type: choice
+ options:
+ - development
+ - staging
+ - production
jobs:
build:
@@ -32,4 +41,4 @@ jobs:
run: pnpm install
- name: 🚀 Build app
- run: eas build --non-interactive
+ run: eas build --profile ${{ github.event.inputs.profile }} --non-interactive
diff --git a/.github/workflows/eas-development-build.yml b/.github/workflows/eas-development-build.yml
new file mode 100644
index 00000000..8de6cd33
--- /dev/null
+++ b/.github/workflows/eas-development-build.yml
@@ -0,0 +1,33 @@
+name: 🔨 EAS Development build
+
+env:
+ EXPO_PUBLIC_API_URL: ${{ vars.API_URL }}
+ EXPO_PUBLIC_AUTH_URL: ${{ vars.AUTH_URL }}
+ EXPO_PUBLIC_OPENAPI_URL: ${{ vars.OPENAPI_URL }}
+
+on: workflow_dispatch
+
+jobs:
+ build:
+ runs-on: ubuntu-latest
+ steps:
+ - name: 🏗 Setup repo
+ uses: actions/checkout@v5
+
+ - name: 🏗 Setup Node
+ uses: actions/setup-node@v5
+ with:
+ node-version: 'lts/*'
+ cache: 'pnpm'
+
+ - name: 🏗 Setup EAS
+ uses: expo/expo-github-action@v8
+ with:
+ eas-version: latest
+ token: ${{ secrets.EXPO_TOKEN }}
+
+ - name: 📦 Install dependencies
+ run: pnpm install
+
+ - name: 🚀 Build development client
+ run: eas build --profile development --non-interactive
diff --git a/.github/workflows/eas-update.yml b/.github/workflows/eas-update.yml
index e180ef52..b421952d 100644
--- a/.github/workflows/eas-update.yml
+++ b/.github/workflows/eas-update.yml
@@ -6,8 +6,17 @@ env:
EXPO_PUBLIC_OPENAPI_URL: ${{ vars.OPENAPI_URL }}
on:
- push:
- branches: [main]
+ workflow_dispatch:
+ inputs:
+ channel:
+ description: EAS Update channel (matches build profile)
+ required: true
+ default: production
+ type: choice
+ options:
+ - development
+ - staging
+ - production
jobs:
update:
@@ -31,5 +40,5 @@ jobs:
- name: 📦 Install dependencies
run: pnpm install
- - name: 🚀 Create update
- run: eas update --auto --non-interactive
+ - name: 🚀 Publish update
+ run: eas update --branch ${{ github.event.inputs.channel }} --non-interactive
diff --git a/.github/workflows/prepare-production.yml b/.github/workflows/prepare-production.yml
new file mode 100644
index 00000000..02571bdf
--- /dev/null
+++ b/.github/workflows/prepare-production.yml
@@ -0,0 +1,43 @@
+name: 🚀 Release Production
+
+env:
+ EXPO_PUBLIC_API_URL: ${{ vars.API_URL }}
+ EXPO_PUBLIC_AUTH_URL: ${{ vars.AUTH_URL }}
+ EXPO_PUBLIC_OPENAPI_URL: ${{ vars.OPENAPI_URL }}
+
+on: workflow_dispatch
+
+jobs:
+ prepare-production:
+ runs-on: ubuntu-latest
+ steps:
+ - name: 🏗 Setup repo
+ uses: actions/checkout@v5
+
+ - name: 🏗 Setup Node
+ uses: actions/setup-node@v5
+ with:
+ node-version: 'lts/*'
+ cache: 'pnpm'
+
+ - name: 🏗 Setup EAS
+ uses: expo/expo-github-action@v8
+ with:
+ eas-version: latest
+ token: ${{ secrets.EXPO_TOKEN }}
+
+ - name: 📦 Install dependencies
+ run: pnpm install
+
+ - name: 🚀 Build production
+ run: eas build --profile production --platform all --non-interactive
+
+ - name: Setup App Store Connect API key
+ run: |
+ echo "$APP_STORE_CONNECT_API_KEY" | base64 -d > "$ASC_API_KEY_PATH"
+ env:
+ APP_STORE_CONNECT_API_KEY: ${{ secrets.APP_STORE_CONNECT_API_KEY }}
+ ASC_API_KEY_PATH: AuthKey_${{ vars.ASC_API_KEY_ID }}.p8
+
+ - name: 🚀 Submit on stores
+ run: eas submit --profile production --platform all --latest --non-interactive
diff --git a/.prettierrc.cjs b/.prettierrc.cjs
index 94367863..2a3f4eb5 100644
--- a/.prettierrc.cjs
+++ b/.prettierrc.cjs
@@ -1,14 +1,16 @@
// Prettier configuration. Please avoid changing the current configuration.
-// But if you do so, please run the `npm run pretty` command.
+// But if you do so, please run the `pnpm pretty` command.
/** @type {import("prettier").Options} */
const config = {
+ plugins: ['prettier-plugin-tailwindcss'],
endOfLine: 'lf',
semi: true,
singleQuote: true,
tabWidth: 2,
trailingComma: 'es5',
arrowParens: 'always',
+ tailwindStylesheet: './src/app.css',
+ tailwindFunctions: ['cn', 'tv'],
};
-// eslint-disable-next-line no-undef
module.exports = config;
diff --git a/.rnstorybook/storybook.requires.ts b/.rnstorybook/storybook.requires.ts
index 0a4c1d9b..d5259c94 100644
--- a/.rnstorybook/storybook.requires.ts
+++ b/.rnstorybook/storybook.requires.ts
@@ -36,22 +36,23 @@ const normalizedStories = [
declare global {
var view: View;
var STORIES: typeof normalizedStories;
+ var STORYBOOK_WEBSOCKET: { host: string; port: number } | undefined;
}
const annotations = [require('@storybook/react-native/preview')];
-global.STORIES = normalizedStories;
+globalThis.STORIES = normalizedStories;
// @ts-ignore
module?.hot?.accept?.();
-if (!global.view) {
- global.view = start({
+if (!globalThis.view) {
+ globalThis.view = start({
annotations,
storyEntries: normalizedStories,
});
} else {
- updateView(global.view, annotations, normalizedStories);
+ updateView(globalThis.view, annotations, normalizedStories);
}
-export const view: View = global.view;
+export const view: View = globalThis.view;
diff --git a/README.md b/README.md
index a681c297..ddaa2390 100644
--- a/README.md
+++ b/README.md
@@ -3,17 +3,14 @@
🚀 Start UI [native] is an opinionated native starter repository created & maintained by the [BearStudio Team](https://www.bearstudio.fr/team) and other contributors.
It represents our team's up-to-date stack that we use when creating native apps for our clients.
-
# Technologies
-
-
-[⚙️ Node.js](https://nodejs.org), [🟦 TypeScript](https://www.typescriptlang.org/), [⚛️ React](https://react.dev/), [📱 React Native](https://reactnative.dev/), [🚀 Expo](https://docs.expo.dev/), [🔐 Better Auth](https://www.better-auth.com/), [🌿 Ficus UI](https://ficus-ui.com/), [🌴 Tanstack Form](https://tanstack.com/form/), [🌴 Tanstack Query](https://tanstack.com/query/), [👋 Hey API](https://heyapi.dev/)
+[⚙️ Node.js](https://nodejs.org), [🟦 TypeScript](https://www.typescriptlang.org/), [⚛️ React](https://react.dev/), [📱 React Native](https://reactnative.dev/), [🚀 Expo](https://docs.expo.dev/), [🔐 Better Auth](https://www.better-auth.com/), [🖌️ Uniwind](https://uniwind.dev), [🧱 React Native Reusables](https://reactnativereusables.com), [🌴 Tanstack Form](https://tanstack.com/form/), [🌴 Tanstack Query](https://tanstack.com/query/), [👋 Hey API](https://heyapi.dev/)
# Requirements
-* [Node.js](https://nodejs.org) >= 22
-* [pnpm](https://pnpm.io/)
+- [Node.js](https://nodejs.org) >= 22
+- [pnpm](https://pnpm.io/)
# Getting Started
@@ -21,7 +18,7 @@ It represents our team's up-to-date stack that we use when creating native apps
pnpm create start-ui -t native myApp
```
-That will scaffold a new folder with the latest version of 🚀 Start UI [native] 🎉
+That will scaffold a new folder with the latest version of 🚀 Start UI [native] 🎉
# Installation
@@ -33,7 +30,6 @@ pnpm install # Install dependencies
## Environment variables
-
> [!TIP]
> Using Expo Go, local development urls should not be `localhost`, use public IP instead
@@ -54,6 +50,7 @@ pnpm gen:api
A new folder `/src/lib/hey-api/generated` will be created with stuff like to combine use Tanstack Query to fetch data, based on env variables.
For example
+
```ts
import { api } from '@/lib/hey-api/api';
@@ -62,22 +59,43 @@ useQuery(api.bookGetByIdOptions({ path: { id: props.bookId } }));
# Run
-
### Expo Go
```bash
pnpm dev
```
-### Local build
+### Local builds
+
+App name and bundle ID come from `app.config.ts`, evaluated at **prebuild** time. Each script runs `prebuild --clean` with the appropriate `APP_ENV`, then builds.
+
+
+| Script | App name | Build type | Need |
+| --------------------------------------------------- | --------------------------- | ---------- | ----------------------------------------- |
+| `dev:build:ios` / `dev:build:android` | Start UI [native] [Dev] | Dev/Debug | Local development, replacement of Expo Go |
+| `build:staging:ios` / `build:staging:android` | Start UI [native] [Staging] | Release | Install staging release version locally |
+| `build:production:ios` / `build:production:android` | Start UI [native] | Release | Install production version locally |
+
```bash
-pnpm prebuild # To generate local builds
+# Development (debug build, dev client)
+pnpm dev:build:ios
+pnpm dev:build:android
+
+# Staging (release build, internal testing)
+pnpm build:staging:ios
+pnpm build:staging:android
-pnpm dev:ios # To run with local ios build
-pnpm dev:android # To run with local android build
+# Production (release build, store-like)
+pnpm build:production:ios
+pnpm build:production:android
```
+> [!TIP]
+> If the app name is wrong, the native project was generated with the wrong `APP_ENV`. Re-run the same build script — it includes `--clean` to regenerate the native project.
+
+['sf'];
+ iosIconSf: string;
}[];
export default function TabLayout() {
@@ -61,17 +58,13 @@ export default function TabLayout() {
if (WITH_NATIVE_TABS) {
return (
-
+
{TABS.map((tab) => (
-
- {t(tab.translationKey)}
-
+
+ {t(tab.translationKey)}
+
+
))}
@@ -98,8 +91,14 @@ export default function TabLayout() {
title: t(tab.translationKey),
headerShown: tab.headerShown,
tabBarIcon: (props) => {
- const Icon = props.focused ? tab.iconFocused : tab.icon;
- return
-
- {t('layout:notFound.title')}
-
+
+ {t('layout:notFound.title')}
+
{t('layout:notFound.backInSafety')}
-
+
{process.env.NODE_ENV === 'development' && (
- {path}
+ {path}
)}
-
+
);
}
diff --git a/src/app/_layout.tsx b/src/app/_layout.tsx
index 519fa1db..9e9e1ad4 100644
--- a/src/app/_layout.tsx
+++ b/src/app/_layout.tsx
@@ -2,45 +2,49 @@ import { BottomSheetModalProvider } from '@gorhom/bottom-sheet';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { Slot } from 'expo-router';
import * as SplashScreen from 'expo-splash-screen';
-import { FicusProvider } from 'react-native-ficus-ui';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
-import {
- initialWindowMetrics,
- SafeAreaProvider,
-} from 'react-native-safe-area-context';
+import { SafeAreaListener } from 'react-native-safe-area-context';
+import { Uniwind } from 'uniwind';
import 'react-native-reanimated';
import '@/lib/i18n';
-import theme from '@/lib/ficus-ui/theme';
+import '../app.css';
-import { ThemeManager } from '@/components/theme-manager';
+import { ThemedStatusBar } from '@/components/themed-status-bar';
import { Sonner } from '@/components/ui/sonner';
import { DevTools } from '@/features/devtools/devtools';
+import { useThemeSync } from '@/features/theme/use-theme-sync';
import { SplashScreenManager } from '@/layout/splash-screen-manager';
export const queryClient = new QueryClient();
-// SplashScreen hide management in on src/app/index.tsx
+// SplashScreen hide management in splash-screen-manager.tsx
SplashScreen.preventAutoHideAsync();
export default function RootLayout() {
+ useThemeSync();
+
return (
-
-
-
-
-
-
-
-
-
-
+ {
+ Uniwind.updateInsets(insets);
+ }}
+ >
+
+
+
+
+
+
+
);
}
diff --git a/src/app/index.tsx b/src/app/index.tsx
index 5f08ade1..3b21cf6a 100644
--- a/src/app/index.tsx
+++ b/src/app/index.tsx
@@ -1,32 +1,12 @@
import Constants from 'expo-constants';
-import { Redirect, router, useFocusEffect } from 'expo-router';
-import { useCallback } from 'react';
+import { Redirect } from 'expo-router';
import { FullLoader } from '@/components/ui/full-loader';
-import { useOnboardingStore } from '@/features/app-onboarding/store';
-import { ViewOnboarding } from '@/features/app-onboarding/view-app-onboarding';
import { authClient } from '@/features/auth/client';
export default function Index() {
const session = authClient.useSession();
- const isOnboarded = useOnboardingStore((state) => state.done);
-
- // Manage first app redirection
- useFocusEffect(
- useCallback(() => {
- if (!isOnboarded || session.isPending) {
- return;
- }
- router.replace(
- session.data?.user?.id ? '/(logged)/(tabs)/home' : '/(public)/sign-in'
- );
- }, [session.data, session.isPending, isOnboarded])
- );
-
- if (!isOnboarded) {
- return
-
-
+
+
{(field) => (
@@ -28,8 +28,8 @@ export const AllFields = () => {
)}
-
-
+
+
);
};
diff --git a/src/components/form/field-otp.tsx b/src/components/form/field-otp.tsx
index ef53b15c..91ed7120 100644
--- a/src/components/form/field-otp.tsx
+++ b/src/components/form/field-otp.tsx
@@ -1,27 +1,21 @@
import { useStore } from '@tanstack/react-form';
-import {
- ComponentProps,
- ComponentRef,
- useCallback,
- useEffect,
- useRef,
-} from 'react';
-import { Box, BoxProps, PinInput } from 'react-native-ficus-ui';
+import { View, type ViewProps } from 'react-native';
import { FormFieldError } from '@/lib/tanstack-form/components';
import { FieldContextMeta } from '@/lib/tanstack-form/components/form-field';
import { useFieldContext } from '@/lib/tanstack-form/context';
-export default function FieldOtp(
- props: Omit, 'children'> & {
- autoSubmit?: boolean;
- containerProps?: BoxProps;
- codeLength: number;
- }
-) {
+import { PinInput } from '@/components/ui/pin-input';
+
+type FieldOtpProps = React.ComponentProps & {
+ autoSubmit?: boolean;
+ containerProps?: ViewProps;
+ codeLength: number;
+};
+
+export default function FieldOtp(props: FieldOtpProps) {
const { containerProps, autoSubmit = true, codeLength, ...rest } = props;
- const containerRef = useRef>(null);
const field = useFieldContext();
const meta = useStore(field.store, (state) => {
@@ -34,23 +28,8 @@ export default function FieldOtp(
};
});
- const shouldAutoSubmit =
- autoSubmit && field.state.value?.length === codeLength;
-
- const submitForm = useCallback(() => {
- if (!field.form.state.isSubmitted) {
- field.form.handleSubmit();
- }
- }, [field.form]);
-
- useEffect(() => {
- if (shouldAutoSubmit) {
- submitForm();
- }
- }, [shouldAutoSubmit, submitForm]);
-
return (
-
+
{
- field.handleChange(value);
+ onChangeText={(text) => {
+ field.handleChange(text);
+ if (
+ autoSubmit &&
+ text.length === codeLength &&
+ !field.form.state.isSubmitted
+ ) {
+ field.form.handleSubmit();
+ }
}}
onBlur={(e) => {
field.handleBlur();
@@ -73,6 +59,6 @@ export default function FieldOtp(
}}
/>
+
);
}
diff --git a/src/components/form/field-text.tsx b/src/components/form/field-text.tsx
index 6c8e0fc8..81a398e5 100644
--- a/src/components/form/field-text.tsx
+++ b/src/components/form/field-text.tsx
@@ -3,15 +3,19 @@ import {
useBottomSheetInternal,
} from '@gorhom/bottom-sheet';
import { useStore } from '@tanstack/react-form';
-import { Box, BoxProps, Input, InputProps } from 'react-native-ficus-ui';
+import { View, type ViewProps } from 'react-native';
import { FormFieldError } from '@/lib/tanstack-form/components';
import { FieldContextMeta } from '@/lib/tanstack-form/components/form-field';
import { useFieldContext } from '@/lib/tanstack-form/context';
-export default function FieldText(
- props: InputProps & { containerProps?: BoxProps }
-) {
+import { Input } from '@/components/ui/input';
+
+type FieldTextProps = React.ComponentProps & {
+ containerProps?: ViewProps;
+};
+
+export default function FieldText(props: FieldTextProps) {
const field = useFieldContext();
const meta = useStore(field.store, (state) => {
@@ -29,7 +33,7 @@ export default function FieldText(
const isBottomSheet = useBottomSheetInternal(true);
return (
-
+
+
);
}
diff --git a/src/components/icons/docs.stories.tsx b/src/components/icons/docs.stories.tsx
index 36ab5938..b22789e7 100644
--- a/src/components/icons/docs.stories.tsx
+++ b/src/components/icons/docs.stories.tsx
@@ -1,5 +1,7 @@
import { ReactElement } from 'react';
-import { Button, ScrollBox, Stack } from 'react-native-ficus-ui';
+import { ScrollView, View } from 'react-native';
+
+import { Button } from '@/components/ui/button';
import * as icons from './generated';
@@ -8,15 +10,15 @@ export default {
};
export const AllIcons = () => (
-
-
+
+
{Object.entries(icons).map(([name, Icon]) => (
))}
-
-
+
+
);
const CustomIcon = ({
@@ -27,7 +29,7 @@ const CustomIcon = ({
name: string;
}) => {
return (
-
+
{children}
{name}
diff --git a/src/components/icons/generated/IconAlertCircle.tsx b/src/components/icons/generated/IconAlertCircle.tsx
index 81b17c72..43d0910b 100644
--- a/src/components/icons/generated/IconAlertCircle.tsx
+++ b/src/components/icons/generated/IconAlertCircle.tsx
@@ -1,9 +1,8 @@
// Autogenerated file, DO NOT MODIFY or it will be overwritten;
import * as React from 'react';
-import { ficus } from 'react-native-ficus-ui';
import type { SvgProps } from 'react-native-svg';
import Svg, { Path } from 'react-native-svg';
-const _Svg = (props: SvgProps) => (
+const IconAlertCircle = (props: SvgProps) => (
(
/>
);
-const IconAlertCircle = ficus(_Svg);
export default IconAlertCircle;
diff --git a/src/components/icons/generated/IconAlertTriangle.tsx b/src/components/icons/generated/IconAlertTriangle.tsx
index 52c72c4e..cb6855dc 100644
--- a/src/components/icons/generated/IconAlertTriangle.tsx
+++ b/src/components/icons/generated/IconAlertTriangle.tsx
@@ -1,9 +1,8 @@
// Autogenerated file, DO NOT MODIFY or it will be overwritten;
import * as React from 'react';
-import { ficus } from 'react-native-ficus-ui';
import type { SvgProps } from 'react-native-svg';
import Svg, { Path } from 'react-native-svg';
-const _Svg = (props: SvgProps) => (
+const IconAlertTriangle = (props: SvgProps) => (
(
/>
);
-const IconAlertTriangle = ficus(_Svg);
export default IconAlertTriangle;
diff --git a/src/components/icons/generated/IconArrowDown.tsx b/src/components/icons/generated/IconArrowDown.tsx
index dd9fb63e..645d627e 100644
--- a/src/components/icons/generated/IconArrowDown.tsx
+++ b/src/components/icons/generated/IconArrowDown.tsx
@@ -1,9 +1,8 @@
// Autogenerated file, DO NOT MODIFY or it will be overwritten;
import * as React from 'react';
-import { ficus } from 'react-native-ficus-ui';
import type { SvgProps } from 'react-native-svg';
import Svg, { Path } from 'react-native-svg';
-const _Svg = (props: SvgProps) => (
+const IconArrowDown = (props: SvgProps) => (
(
/>
);
-const IconArrowDown = ficus(_Svg);
export default IconArrowDown;
diff --git a/src/components/icons/generated/IconArrowLeft.tsx b/src/components/icons/generated/IconArrowLeft.tsx
index 2ed470c1..bbbaaf24 100644
--- a/src/components/icons/generated/IconArrowLeft.tsx
+++ b/src/components/icons/generated/IconArrowLeft.tsx
@@ -1,9 +1,8 @@
// Autogenerated file, DO NOT MODIFY or it will be overwritten;
import * as React from 'react';
-import { ficus } from 'react-native-ficus-ui';
import type { SvgProps } from 'react-native-svg';
import Svg, { Path } from 'react-native-svg';
-const _Svg = (props: SvgProps) => (
+const IconArrowLeft = (props: SvgProps) => (
(
/>
);
-const IconArrowLeft = ficus(_Svg);
export default IconArrowLeft;
diff --git a/src/components/icons/generated/IconArrowRight.tsx b/src/components/icons/generated/IconArrowRight.tsx
index fc8a0388..c32cec0d 100644
--- a/src/components/icons/generated/IconArrowRight.tsx
+++ b/src/components/icons/generated/IconArrowRight.tsx
@@ -1,9 +1,8 @@
// Autogenerated file, DO NOT MODIFY or it will be overwritten;
import * as React from 'react';
-import { ficus } from 'react-native-ficus-ui';
import type { SvgProps } from 'react-native-svg';
import Svg, { Path } from 'react-native-svg';
-const _Svg = (props: SvgProps) => (
+const IconArrowRight = (props: SvgProps) => (
(
/>
);
-const IconArrowRight = ficus(_Svg);
export default IconArrowRight;
diff --git a/src/components/icons/generated/IconArrowUp.tsx b/src/components/icons/generated/IconArrowUp.tsx
index 0a8394ae..526dac44 100644
--- a/src/components/icons/generated/IconArrowUp.tsx
+++ b/src/components/icons/generated/IconArrowUp.tsx
@@ -1,9 +1,8 @@
// Autogenerated file, DO NOT MODIFY or it will be overwritten;
import * as React from 'react';
-import { ficus } from 'react-native-ficus-ui';
import type { SvgProps } from 'react-native-svg';
import Svg, { Path } from 'react-native-svg';
-const _Svg = (props: SvgProps) => (
+const IconArrowUp = (props: SvgProps) => (
(
/>
);
-const IconArrowUp = ficus(_Svg);
export default IconArrowUp;
diff --git a/src/components/icons/generated/IconBookOpen.tsx b/src/components/icons/generated/IconBookOpen.tsx
index 1598f2ef..a4df1ee0 100644
--- a/src/components/icons/generated/IconBookOpen.tsx
+++ b/src/components/icons/generated/IconBookOpen.tsx
@@ -1,9 +1,8 @@
// Autogenerated file, DO NOT MODIFY or it will be overwritten;
import * as React from 'react';
-import { ficus } from 'react-native-ficus-ui';
import type { SvgProps } from 'react-native-svg';
import Svg, { Path } from 'react-native-svg';
-const _Svg = (props: SvgProps) => (
+const IconBookOpen = (props: SvgProps) => (
(
/>
);
-const IconBookOpen = ficus(_Svg);
export default IconBookOpen;
diff --git a/src/components/icons/generated/IconBookOpenDuotone.tsx b/src/components/icons/generated/IconBookOpenDuotone.tsx
index e762394a..2d7bea54 100644
--- a/src/components/icons/generated/IconBookOpenDuotone.tsx
+++ b/src/components/icons/generated/IconBookOpenDuotone.tsx
@@ -1,9 +1,8 @@
// Autogenerated file, DO NOT MODIFY or it will be overwritten;
import * as React from 'react';
-import { ficus } from 'react-native-ficus-ui';
import type { SvgProps } from 'react-native-svg';
import Svg, { Path } from 'react-native-svg';
-const _Svg = (props: SvgProps) => (
+const IconBookOpenDuotone = (props: SvgProps) => (
(
/>
);
-const IconBookOpenDuotone = ficus(_Svg);
export default IconBookOpenDuotone;
diff --git a/src/components/icons/generated/IconBookOpenFill.tsx b/src/components/icons/generated/IconBookOpenFill.tsx
index 933eeb0d..ad12761b 100644
--- a/src/components/icons/generated/IconBookOpenFill.tsx
+++ b/src/components/icons/generated/IconBookOpenFill.tsx
@@ -1,9 +1,8 @@
// Autogenerated file, DO NOT MODIFY or it will be overwritten;
import * as React from 'react';
-import { ficus } from 'react-native-ficus-ui';
import type { SvgProps } from 'react-native-svg';
import Svg, { Path } from 'react-native-svg';
-const _Svg = (props: SvgProps) => (
+const IconBookOpenFill = (props: SvgProps) => (
(
/>
);
-const IconBookOpenFill = ficus(_Svg);
export default IconBookOpenFill;
diff --git a/src/components/icons/generated/IconCalendar.tsx b/src/components/icons/generated/IconCalendar.tsx
index 10e0057f..a9dffa2b 100644
--- a/src/components/icons/generated/IconCalendar.tsx
+++ b/src/components/icons/generated/IconCalendar.tsx
@@ -1,9 +1,8 @@
// Autogenerated file, DO NOT MODIFY or it will be overwritten;
import * as React from 'react';
-import { ficus } from 'react-native-ficus-ui';
import type { SvgProps } from 'react-native-svg';
import Svg, { Path } from 'react-native-svg';
-const _Svg = (props: SvgProps) => (
+const IconCalendar = (props: SvgProps) => (
(
/>
);
-const IconCalendar = ficus(_Svg);
export default IconCalendar;
diff --git a/src/components/icons/generated/IconCheck.tsx b/src/components/icons/generated/IconCheck.tsx
index 8e31e264..91da70a4 100644
--- a/src/components/icons/generated/IconCheck.tsx
+++ b/src/components/icons/generated/IconCheck.tsx
@@ -1,9 +1,8 @@
// Autogenerated file, DO NOT MODIFY or it will be overwritten;
import * as React from 'react';
-import { ficus } from 'react-native-ficus-ui';
import type { SvgProps } from 'react-native-svg';
import Svg, { Path } from 'react-native-svg';
-const _Svg = (props: SvgProps) => (
+const IconCheck = (props: SvgProps) => (
(
/>
);
-const IconCheck = ficus(_Svg);
export default IconCheck;
diff --git a/src/components/icons/generated/IconCheckCircle.tsx b/src/components/icons/generated/IconCheckCircle.tsx
index 3ee8137e..57cc73ac 100644
--- a/src/components/icons/generated/IconCheckCircle.tsx
+++ b/src/components/icons/generated/IconCheckCircle.tsx
@@ -1,9 +1,8 @@
// Autogenerated file, DO NOT MODIFY or it will be overwritten;
import * as React from 'react';
-import { ficus } from 'react-native-ficus-ui';
import type { SvgProps } from 'react-native-svg';
import Svg, { Path } from 'react-native-svg';
-const _Svg = (props: SvgProps) => (
+const IconCheckCircle = (props: SvgProps) => (
(
/>
);
-const IconCheckCircle = ficus(_Svg);
export default IconCheckCircle;
diff --git a/src/components/icons/generated/IconChevronDown.tsx b/src/components/icons/generated/IconChevronDown.tsx
index 7dab9f0a..2707637d 100644
--- a/src/components/icons/generated/IconChevronDown.tsx
+++ b/src/components/icons/generated/IconChevronDown.tsx
@@ -1,9 +1,8 @@
// Autogenerated file, DO NOT MODIFY or it will be overwritten;
import * as React from 'react';
-import { ficus } from 'react-native-ficus-ui';
import type { SvgProps } from 'react-native-svg';
import Svg, { Path } from 'react-native-svg';
-const _Svg = (props: SvgProps) => (
+const IconChevronDown = (props: SvgProps) => (
(
/>
);
-const IconChevronDown = ficus(_Svg);
export default IconChevronDown;
diff --git a/src/components/icons/generated/IconChevronLeft.tsx b/src/components/icons/generated/IconChevronLeft.tsx
index 90fadcea..636b0b37 100644
--- a/src/components/icons/generated/IconChevronLeft.tsx
+++ b/src/components/icons/generated/IconChevronLeft.tsx
@@ -1,9 +1,8 @@
// Autogenerated file, DO NOT MODIFY or it will be overwritten;
import * as React from 'react';
-import { ficus } from 'react-native-ficus-ui';
import type { SvgProps } from 'react-native-svg';
import Svg, { Path } from 'react-native-svg';
-const _Svg = (props: SvgProps) => (
+const IconChevronLeft = (props: SvgProps) => (
(
/>
);
-const IconChevronLeft = ficus(_Svg);
export default IconChevronLeft;
diff --git a/src/components/icons/generated/IconChevronRight.tsx b/src/components/icons/generated/IconChevronRight.tsx
index bc493244..b767c9f2 100644
--- a/src/components/icons/generated/IconChevronRight.tsx
+++ b/src/components/icons/generated/IconChevronRight.tsx
@@ -1,9 +1,8 @@
// Autogenerated file, DO NOT MODIFY or it will be overwritten;
import * as React from 'react';
-import { ficus } from 'react-native-ficus-ui';
import type { SvgProps } from 'react-native-svg';
import Svg, { Path } from 'react-native-svg';
-const _Svg = (props: SvgProps) => (
+const IconChevronRight = (props: SvgProps) => (
(
/>
);
-const IconChevronRight = ficus(_Svg);
export default IconChevronRight;
diff --git a/src/components/icons/generated/IconChevronUp.tsx b/src/components/icons/generated/IconChevronUp.tsx
index 3d665792..6ee64c45 100644
--- a/src/components/icons/generated/IconChevronUp.tsx
+++ b/src/components/icons/generated/IconChevronUp.tsx
@@ -1,9 +1,8 @@
// Autogenerated file, DO NOT MODIFY or it will be overwritten;
import * as React from 'react';
-import { ficus } from 'react-native-ficus-ui';
import type { SvgProps } from 'react-native-svg';
import Svg, { Path } from 'react-native-svg';
-const _Svg = (props: SvgProps) => (
+const IconChevronUp = (props: SvgProps) => (
(
/>
);
-const IconChevronUp = ficus(_Svg);
export default IconChevronUp;
diff --git a/src/components/icons/generated/IconChevronsLeft.tsx b/src/components/icons/generated/IconChevronsLeft.tsx
index cc2b6491..536da761 100644
--- a/src/components/icons/generated/IconChevronsLeft.tsx
+++ b/src/components/icons/generated/IconChevronsLeft.tsx
@@ -1,9 +1,8 @@
// Autogenerated file, DO NOT MODIFY or it will be overwritten;
import * as React from 'react';
-import { ficus } from 'react-native-ficus-ui';
import type { SvgProps } from 'react-native-svg';
import Svg, { Path } from 'react-native-svg';
-const _Svg = (props: SvgProps) => (
+const IconChevronsLeft = (props: SvgProps) => (
(
/>
);
-const IconChevronsLeft = ficus(_Svg);
export default IconChevronsLeft;
diff --git a/src/components/icons/generated/IconChevronsRight.tsx b/src/components/icons/generated/IconChevronsRight.tsx
index 18913426..6fd4ff21 100644
--- a/src/components/icons/generated/IconChevronsRight.tsx
+++ b/src/components/icons/generated/IconChevronsRight.tsx
@@ -1,9 +1,8 @@
// Autogenerated file, DO NOT MODIFY or it will be overwritten;
import * as React from 'react';
-import { ficus } from 'react-native-ficus-ui';
import type { SvgProps } from 'react-native-svg';
import Svg, { Path } from 'react-native-svg';
-const _Svg = (props: SvgProps) => (
+const IconChevronsRight = (props: SvgProps) => (
(
/>
);
-const IconChevronsRight = ficus(_Svg);
export default IconChevronsRight;
diff --git a/src/components/icons/generated/IconChevronsUpDown.tsx b/src/components/icons/generated/IconChevronsUpDown.tsx
index 19f1fd1b..f71146e3 100644
--- a/src/components/icons/generated/IconChevronsUpDown.tsx
+++ b/src/components/icons/generated/IconChevronsUpDown.tsx
@@ -1,9 +1,8 @@
// Autogenerated file, DO NOT MODIFY or it will be overwritten;
import * as React from 'react';
-import { ficus } from 'react-native-ficus-ui';
import type { SvgProps } from 'react-native-svg';
import Svg, { Path } from 'react-native-svg';
-const _Svg = (props: SvgProps) => (
+const IconChevronsUpDown = (props: SvgProps) => (
(
/>
);
-const IconChevronsUpDown = ficus(_Svg);
export default IconChevronsUpDown;
diff --git a/src/components/icons/generated/IconCircleUserRound.tsx b/src/components/icons/generated/IconCircleUserRound.tsx
index 9c87015d..31bebcd3 100644
--- a/src/components/icons/generated/IconCircleUserRound.tsx
+++ b/src/components/icons/generated/IconCircleUserRound.tsx
@@ -1,9 +1,8 @@
// Autogenerated file, DO NOT MODIFY or it will be overwritten;
import * as React from 'react';
-import { ficus } from 'react-native-ficus-ui';
import type { SvgProps } from 'react-native-svg';
import Svg, { Path } from 'react-native-svg';
-const _Svg = (props: SvgProps) => (
+const IconCircleUserRound = (props: SvgProps) => (
(
/>
);
-const IconCircleUserRound = ficus(_Svg);
export default IconCircleUserRound;
diff --git a/src/components/icons/generated/IconClock.tsx b/src/components/icons/generated/IconClock.tsx
index 96260330..5593bbdf 100644
--- a/src/components/icons/generated/IconClock.tsx
+++ b/src/components/icons/generated/IconClock.tsx
@@ -1,9 +1,8 @@
// Autogenerated file, DO NOT MODIFY or it will be overwritten;
import * as React from 'react';
-import { ficus } from 'react-native-ficus-ui';
import type { SvgProps } from 'react-native-svg';
import Svg, { Path } from 'react-native-svg';
-const _Svg = (props: SvgProps) => (
+const IconClock = (props: SvgProps) => (
(
/>
);
-const IconClock = ficus(_Svg);
export default IconClock;
diff --git a/src/components/icons/generated/IconCopy.tsx b/src/components/icons/generated/IconCopy.tsx
index 033e96c7..7c410408 100644
--- a/src/components/icons/generated/IconCopy.tsx
+++ b/src/components/icons/generated/IconCopy.tsx
@@ -1,9 +1,8 @@
// Autogenerated file, DO NOT MODIFY or it will be overwritten;
import * as React from 'react';
-import { ficus } from 'react-native-ficus-ui';
import type { SvgProps } from 'react-native-svg';
import Svg, { Path } from 'react-native-svg';
-const _Svg = (props: SvgProps) => (
+const IconCopy = (props: SvgProps) => (
(
/>
);
-const IconCopy = ficus(_Svg);
export default IconCopy;
diff --git a/src/components/icons/generated/IconCreditCard.tsx b/src/components/icons/generated/IconCreditCard.tsx
index 5e9f1511..5083e97a 100644
--- a/src/components/icons/generated/IconCreditCard.tsx
+++ b/src/components/icons/generated/IconCreditCard.tsx
@@ -1,9 +1,8 @@
// Autogenerated file, DO NOT MODIFY or it will be overwritten;
import * as React from 'react';
-import { ficus } from 'react-native-ficus-ui';
import type { SvgProps } from 'react-native-svg';
import Svg, { Path } from 'react-native-svg';
-const _Svg = (props: SvgProps) => (
+const IconCreditCard = (props: SvgProps) => (
(
/>
);
-const IconCreditCard = ficus(_Svg);
export default IconCreditCard;
diff --git a/src/components/icons/generated/IconDashboard.tsx b/src/components/icons/generated/IconDashboard.tsx
index 7adfe4d3..b6d0e5c6 100644
--- a/src/components/icons/generated/IconDashboard.tsx
+++ b/src/components/icons/generated/IconDashboard.tsx
@@ -1,9 +1,8 @@
// Autogenerated file, DO NOT MODIFY or it will be overwritten;
import * as React from 'react';
-import { ficus } from 'react-native-ficus-ui';
import type { SvgProps } from 'react-native-svg';
import Svg, { Path } from 'react-native-svg';
-const _Svg = (props: SvgProps) => (
+const IconDashboard = (props: SvgProps) => (
(
/>
);
-const IconDashboard = ficus(_Svg);
export default IconDashboard;
diff --git a/src/components/icons/generated/IconDatabase.tsx b/src/components/icons/generated/IconDatabase.tsx
index 296a7a1b..63adbcf3 100644
--- a/src/components/icons/generated/IconDatabase.tsx
+++ b/src/components/icons/generated/IconDatabase.tsx
@@ -1,9 +1,8 @@
// Autogenerated file, DO NOT MODIFY or it will be overwritten;
import * as React from 'react';
-import { ficus } from 'react-native-ficus-ui';
import type { SvgProps } from 'react-native-svg';
import Svg, { Path } from 'react-native-svg';
-const _Svg = (props: SvgProps) => (
+const IconDatabase = (props: SvgProps) => (
(
/>
);
-const IconDatabase = ficus(_Svg);
export default IconDatabase;
diff --git a/src/components/icons/generated/IconDevices.tsx b/src/components/icons/generated/IconDevices.tsx
index 9311e1e9..d6a087f5 100644
--- a/src/components/icons/generated/IconDevices.tsx
+++ b/src/components/icons/generated/IconDevices.tsx
@@ -1,9 +1,8 @@
// Autogenerated file, DO NOT MODIFY or it will be overwritten;
import * as React from 'react';
-import { ficus } from 'react-native-ficus-ui';
import type { SvgProps } from 'react-native-svg';
import Svg, { Path } from 'react-native-svg';
-const _Svg = (props: SvgProps) => (
+const IconDevices = (props: SvgProps) => (
(
/>
);
-const IconDevices = ficus(_Svg);
export default IconDevices;
diff --git a/src/components/icons/generated/IconDownload.tsx b/src/components/icons/generated/IconDownload.tsx
index bd028a17..75fc5bfd 100644
--- a/src/components/icons/generated/IconDownload.tsx
+++ b/src/components/icons/generated/IconDownload.tsx
@@ -1,9 +1,8 @@
// Autogenerated file, DO NOT MODIFY or it will be overwritten;
import * as React from 'react';
-import { ficus } from 'react-native-ficus-ui';
import type { SvgProps } from 'react-native-svg';
import Svg, { Path } from 'react-native-svg';
-const _Svg = (props: SvgProps) => (
+const IconDownload = (props: SvgProps) => (
(
/>
);
-const IconDownload = ficus(_Svg);
export default IconDownload;
diff --git a/src/components/icons/generated/IconEdit3.tsx b/src/components/icons/generated/IconEdit3.tsx
index 1e48f415..3a42151e 100644
--- a/src/components/icons/generated/IconEdit3.tsx
+++ b/src/components/icons/generated/IconEdit3.tsx
@@ -1,9 +1,8 @@
// Autogenerated file, DO NOT MODIFY or it will be overwritten;
import * as React from 'react';
-import { ficus } from 'react-native-ficus-ui';
import type { SvgProps } from 'react-native-svg';
import Svg, { Path } from 'react-native-svg';
-const _Svg = (props: SvgProps) => (
+const IconEdit3 = (props: SvgProps) => (
(
/>
);
-const IconEdit3 = ficus(_Svg);
export default IconEdit3;
diff --git a/src/components/icons/generated/IconExternalLink.tsx b/src/components/icons/generated/IconExternalLink.tsx
index 1638f617..34d77295 100644
--- a/src/components/icons/generated/IconExternalLink.tsx
+++ b/src/components/icons/generated/IconExternalLink.tsx
@@ -1,9 +1,8 @@
// Autogenerated file, DO NOT MODIFY or it will be overwritten;
import * as React from 'react';
-import { ficus } from 'react-native-ficus-ui';
import type { SvgProps } from 'react-native-svg';
import Svg, { Path } from 'react-native-svg';
-const _Svg = (props: SvgProps) => (
+const IconExternalLink = (props: SvgProps) => (
(
/>
);
-const IconExternalLink = ficus(_Svg);
export default IconExternalLink;
diff --git a/src/components/icons/generated/IconEye.tsx b/src/components/icons/generated/IconEye.tsx
index d61a5c61..7ef7efcf 100644
--- a/src/components/icons/generated/IconEye.tsx
+++ b/src/components/icons/generated/IconEye.tsx
@@ -1,9 +1,8 @@
// Autogenerated file, DO NOT MODIFY or it will be overwritten;
import * as React from 'react';
-import { ficus } from 'react-native-ficus-ui';
import type { SvgProps } from 'react-native-svg';
import Svg, { Path } from 'react-native-svg';
-const _Svg = (props: SvgProps) => (
+const IconEye = (props: SvgProps) => (
(
/>
);
-const IconEye = ficus(_Svg);
export default IconEye;
diff --git a/src/components/icons/generated/IconEyeClosed.tsx b/src/components/icons/generated/IconEyeClosed.tsx
index 2565e339..858ca284 100644
--- a/src/components/icons/generated/IconEyeClosed.tsx
+++ b/src/components/icons/generated/IconEyeClosed.tsx
@@ -1,9 +1,8 @@
// Autogenerated file, DO NOT MODIFY or it will be overwritten;
import * as React from 'react';
-import { ficus } from 'react-native-ficus-ui';
import type { SvgProps } from 'react-native-svg';
import Svg, { Path } from 'react-native-svg';
-const _Svg = (props: SvgProps) => (
+const IconEyeClosed = (props: SvgProps) => (
(
/>
);
-const IconEyeClosed = ficus(_Svg);
export default IconEyeClosed;
diff --git a/src/components/icons/generated/IconFile.tsx b/src/components/icons/generated/IconFile.tsx
index 1e292297..8c2b70af 100644
--- a/src/components/icons/generated/IconFile.tsx
+++ b/src/components/icons/generated/IconFile.tsx
@@ -1,9 +1,8 @@
// Autogenerated file, DO NOT MODIFY or it will be overwritten;
import * as React from 'react';
-import { ficus } from 'react-native-ficus-ui';
import type { SvgProps } from 'react-native-svg';
import Svg, { Path } from 'react-native-svg';
-const _Svg = (props: SvgProps) => (
+const IconFile = (props: SvgProps) => (
(
/>
);
-const IconFile = ficus(_Svg);
export default IconFile;
diff --git a/src/components/icons/generated/IconFolder.tsx b/src/components/icons/generated/IconFolder.tsx
index eaa4c827..12cc9c71 100644
--- a/src/components/icons/generated/IconFolder.tsx
+++ b/src/components/icons/generated/IconFolder.tsx
@@ -1,9 +1,8 @@
// Autogenerated file, DO NOT MODIFY or it will be overwritten;
import * as React from 'react';
-import { ficus } from 'react-native-ficus-ui';
import type { SvgProps } from 'react-native-svg';
import Svg, { Path } from 'react-native-svg';
-const _Svg = (props: SvgProps) => (
+const IconFolder = (props: SvgProps) => (
(
/>
);
-const IconFolder = ficus(_Svg);
export default IconFolder;
diff --git a/src/components/icons/generated/IconFolderGit2.tsx b/src/components/icons/generated/IconFolderGit2.tsx
index 5809cf87..447e543e 100644
--- a/src/components/icons/generated/IconFolderGit2.tsx
+++ b/src/components/icons/generated/IconFolderGit2.tsx
@@ -1,9 +1,8 @@
// Autogenerated file, DO NOT MODIFY or it will be overwritten;
import * as React from 'react';
-import { ficus } from 'react-native-ficus-ui';
import type { SvgProps } from 'react-native-svg';
import Svg, { Path } from 'react-native-svg';
-const _Svg = (props: SvgProps) => (
+const IconFolderGit2 = (props: SvgProps) => (
(
/>
);
-const IconFolderGit2 = ficus(_Svg);
export default IconFolderGit2;
diff --git a/src/components/icons/generated/IconGitBranch.tsx b/src/components/icons/generated/IconGitBranch.tsx
index ce31d124..8235e84e 100644
--- a/src/components/icons/generated/IconGitBranch.tsx
+++ b/src/components/icons/generated/IconGitBranch.tsx
@@ -1,9 +1,8 @@
// Autogenerated file, DO NOT MODIFY or it will be overwritten;
import * as React from 'react';
-import { ficus } from 'react-native-ficus-ui';
import type { SvgProps } from 'react-native-svg';
import Svg, { Path } from 'react-native-svg';
-const _Svg = (props: SvgProps) => (
+const IconGitBranch = (props: SvgProps) => (
(
/>
);
-const IconGitBranch = ficus(_Svg);
export default IconGitBranch;
diff --git a/src/components/icons/generated/IconGitBranchDuotone.tsx b/src/components/icons/generated/IconGitBranchDuotone.tsx
index 739ca558..cd73758f 100644
--- a/src/components/icons/generated/IconGitBranchDuotone.tsx
+++ b/src/components/icons/generated/IconGitBranchDuotone.tsx
@@ -1,9 +1,8 @@
// Autogenerated file, DO NOT MODIFY or it will be overwritten;
import * as React from 'react';
-import { ficus } from 'react-native-ficus-ui';
import type { SvgProps } from 'react-native-svg';
import Svg, { Path } from 'react-native-svg';
-const _Svg = (props: SvgProps) => (
+const IconGitBranchDuotone = (props: SvgProps) => (
(
/>
);
-const IconGitBranchDuotone = ficus(_Svg);
export default IconGitBranchDuotone;
diff --git a/src/components/icons/generated/IconGitBranchFill.tsx b/src/components/icons/generated/IconGitBranchFill.tsx
index d1730250..af76257a 100644
--- a/src/components/icons/generated/IconGitBranchFill.tsx
+++ b/src/components/icons/generated/IconGitBranchFill.tsx
@@ -1,9 +1,8 @@
// Autogenerated file, DO NOT MODIFY or it will be overwritten;
import * as React from 'react';
-import { ficus } from 'react-native-ficus-ui';
import type { SvgProps } from 'react-native-svg';
import Svg, { Path } from 'react-native-svg';
-const _Svg = (props: SvgProps) => (
+const IconGitBranchFill = (props: SvgProps) => (
(
/>
);
-const IconGitBranchFill = ficus(_Svg);
export default IconGitBranchFill;
diff --git a/src/components/icons/generated/IconGithub.tsx b/src/components/icons/generated/IconGithub.tsx
index 6e18ea44..d9ace045 100644
--- a/src/components/icons/generated/IconGithub.tsx
+++ b/src/components/icons/generated/IconGithub.tsx
@@ -1,9 +1,8 @@
// Autogenerated file, DO NOT MODIFY or it will be overwritten;
import * as React from 'react';
-import { ficus } from 'react-native-ficus-ui';
import type { SvgProps } from 'react-native-svg';
import Svg, { Path } from 'react-native-svg';
-const _Svg = (props: SvgProps) => (
+const IconGithub = (props: SvgProps) => (
(
/>
);
-const IconGithub = ficus(_Svg);
export default IconGithub;
diff --git a/src/components/icons/generated/IconHash.tsx b/src/components/icons/generated/IconHash.tsx
index 04b2fec7..5d1c3a71 100644
--- a/src/components/icons/generated/IconHash.tsx
+++ b/src/components/icons/generated/IconHash.tsx
@@ -1,9 +1,8 @@
// Autogenerated file, DO NOT MODIFY or it will be overwritten;
import * as React from 'react';
-import { ficus } from 'react-native-ficus-ui';
import type { SvgProps } from 'react-native-svg';
import Svg, { Path } from 'react-native-svg';
-const _Svg = (props: SvgProps) => (
+const IconHash = (props: SvgProps) => (
(
/>
);
-const IconHash = ficus(_Svg);
export default IconHash;
diff --git a/src/components/icons/generated/IconHome.tsx b/src/components/icons/generated/IconHome.tsx
index 508c1b43..6986767d 100644
--- a/src/components/icons/generated/IconHome.tsx
+++ b/src/components/icons/generated/IconHome.tsx
@@ -1,9 +1,8 @@
// Autogenerated file, DO NOT MODIFY or it will be overwritten;
import * as React from 'react';
-import { ficus } from 'react-native-ficus-ui';
import type { SvgProps } from 'react-native-svg';
import Svg, { Path } from 'react-native-svg';
-const _Svg = (props: SvgProps) => (
+const IconHome = (props: SvgProps) => (
(
/>
);
-const IconHome = ficus(_Svg);
export default IconHome;
diff --git a/src/components/icons/generated/IconHouse.tsx b/src/components/icons/generated/IconHouse.tsx
index d53d33c9..cf464520 100644
--- a/src/components/icons/generated/IconHouse.tsx
+++ b/src/components/icons/generated/IconHouse.tsx
@@ -1,9 +1,8 @@
// Autogenerated file, DO NOT MODIFY or it will be overwritten;
import * as React from 'react';
-import { ficus } from 'react-native-ficus-ui';
import type { SvgProps } from 'react-native-svg';
import Svg, { Path } from 'react-native-svg';
-const _Svg = (props: SvgProps) => (
+const IconHouse = (props: SvgProps) => (
(
/>
);
-const IconHouse = ficus(_Svg);
export default IconHouse;
diff --git a/src/components/icons/generated/IconHouseDuotone.tsx b/src/components/icons/generated/IconHouseDuotone.tsx
index a4c25609..9172f649 100644
--- a/src/components/icons/generated/IconHouseDuotone.tsx
+++ b/src/components/icons/generated/IconHouseDuotone.tsx
@@ -1,9 +1,8 @@
// Autogenerated file, DO NOT MODIFY or it will be overwritten;
import * as React from 'react';
-import { ficus } from 'react-native-ficus-ui';
import type { SvgProps } from 'react-native-svg';
import Svg, { Path } from 'react-native-svg';
-const _Svg = (props: SvgProps) => (
+const IconHouseDuotone = (props: SvgProps) => (
(
/>
);
-const IconHouseDuotone = ficus(_Svg);
export default IconHouseDuotone;
diff --git a/src/components/icons/generated/IconHouseFill.tsx b/src/components/icons/generated/IconHouseFill.tsx
index d5fc3bcb..71823ef4 100644
--- a/src/components/icons/generated/IconHouseFill.tsx
+++ b/src/components/icons/generated/IconHouseFill.tsx
@@ -1,9 +1,8 @@
// Autogenerated file, DO NOT MODIFY or it will be overwritten;
import * as React from 'react';
-import { ficus } from 'react-native-ficus-ui';
import type { SvgProps } from 'react-native-svg';
import Svg, { Path } from 'react-native-svg';
-const _Svg = (props: SvgProps) => (
+const IconHouseFill = (props: SvgProps) => (
(
/>
);
-const IconHouseFill = ficus(_Svg);
export default IconHouseFill;
diff --git a/src/components/icons/generated/IconKey.tsx b/src/components/icons/generated/IconKey.tsx
index 6a4a0fc8..a683c939 100644
--- a/src/components/icons/generated/IconKey.tsx
+++ b/src/components/icons/generated/IconKey.tsx
@@ -1,9 +1,8 @@
// Autogenerated file, DO NOT MODIFY or it will be overwritten;
import * as React from 'react';
-import { ficus } from 'react-native-ficus-ui';
import type { SvgProps } from 'react-native-svg';
import Svg, { Path } from 'react-native-svg';
-const _Svg = (props: SvgProps) => (
+const IconKey = (props: SvgProps) => (
(
/>
);
-const IconKey = ficus(_Svg);
export default IconKey;
diff --git a/src/components/icons/generated/IconLanguages.tsx b/src/components/icons/generated/IconLanguages.tsx
index a746466c..923f0f17 100644
--- a/src/components/icons/generated/IconLanguages.tsx
+++ b/src/components/icons/generated/IconLanguages.tsx
@@ -1,9 +1,8 @@
// Autogenerated file, DO NOT MODIFY or it will be overwritten;
import * as React from 'react';
-import { ficus } from 'react-native-ficus-ui';
import type { SvgProps } from 'react-native-svg';
import Svg, { Path } from 'react-native-svg';
-const _Svg = (props: SvgProps) => (
+const IconLanguages = (props: SvgProps) => (
(
/>
);
-const IconLanguages = ficus(_Svg);
export default IconLanguages;
diff --git a/src/components/icons/generated/IconLink.tsx b/src/components/icons/generated/IconLink.tsx
index beab9d44..f6bf2686 100644
--- a/src/components/icons/generated/IconLink.tsx
+++ b/src/components/icons/generated/IconLink.tsx
@@ -1,9 +1,8 @@
// Autogenerated file, DO NOT MODIFY or it will be overwritten;
import * as React from 'react';
-import { ficus } from 'react-native-ficus-ui';
import type { SvgProps } from 'react-native-svg';
import Svg, { Path } from 'react-native-svg';
-const _Svg = (props: SvgProps) => (
+const IconLink = (props: SvgProps) => (
(
/>
);
-const IconLink = ficus(_Svg);
export default IconLink;
diff --git a/src/components/icons/generated/IconLock.tsx b/src/components/icons/generated/IconLock.tsx
index 84ed9b4f..ec33a93a 100644
--- a/src/components/icons/generated/IconLock.tsx
+++ b/src/components/icons/generated/IconLock.tsx
@@ -1,9 +1,8 @@
// Autogenerated file, DO NOT MODIFY or it will be overwritten;
import * as React from 'react';
-import { ficus } from 'react-native-ficus-ui';
import type { SvgProps } from 'react-native-svg';
import Svg, { Path } from 'react-native-svg';
-const _Svg = (props: SvgProps) => (
+const IconLock = (props: SvgProps) => (
(
/>
);
-const IconLock = ficus(_Svg);
export default IconLock;
diff --git a/src/components/icons/generated/IconLogIn.tsx b/src/components/icons/generated/IconLogIn.tsx
index ad500658..52b886ed 100644
--- a/src/components/icons/generated/IconLogIn.tsx
+++ b/src/components/icons/generated/IconLogIn.tsx
@@ -1,9 +1,8 @@
// Autogenerated file, DO NOT MODIFY or it will be overwritten;
import * as React from 'react';
-import { ficus } from 'react-native-ficus-ui';
import type { SvgProps } from 'react-native-svg';
import Svg, { Path } from 'react-native-svg';
-const _Svg = (props: SvgProps) => (
+const IconLogIn = (props: SvgProps) => (
(
/>
);
-const IconLogIn = ficus(_Svg);
export default IconLogIn;
diff --git a/src/components/icons/generated/IconLogOut.tsx b/src/components/icons/generated/IconLogOut.tsx
index c9474589..2ca28011 100644
--- a/src/components/icons/generated/IconLogOut.tsx
+++ b/src/components/icons/generated/IconLogOut.tsx
@@ -1,9 +1,8 @@
// Autogenerated file, DO NOT MODIFY or it will be overwritten;
import * as React from 'react';
-import { ficus } from 'react-native-ficus-ui';
import type { SvgProps } from 'react-native-svg';
import Svg, { Path } from 'react-native-svg';
-const _Svg = (props: SvgProps) => (
+const IconLogOut = (props: SvgProps) => (
(
/>
);
-const IconLogOut = ficus(_Svg);
export default IconLogOut;
diff --git a/src/components/icons/generated/IconMail.tsx b/src/components/icons/generated/IconMail.tsx
index e2f27219..ed9e6976 100644
--- a/src/components/icons/generated/IconMail.tsx
+++ b/src/components/icons/generated/IconMail.tsx
@@ -1,9 +1,8 @@
// Autogenerated file, DO NOT MODIFY or it will be overwritten;
import * as React from 'react';
-import { ficus } from 'react-native-ficus-ui';
import type { SvgProps } from 'react-native-svg';
import Svg, { Path } from 'react-native-svg';
-const _Svg = (props: SvgProps) => (
+const IconMail = (props: SvgProps) => (
(
/>
);
-const IconMail = ficus(_Svg);
export default IconMail;
diff --git a/src/components/icons/generated/IconMoon.tsx b/src/components/icons/generated/IconMoon.tsx
index 63ede1cc..17170848 100644
--- a/src/components/icons/generated/IconMoon.tsx
+++ b/src/components/icons/generated/IconMoon.tsx
@@ -1,9 +1,8 @@
// Autogenerated file, DO NOT MODIFY or it will be overwritten;
import * as React from 'react';
-import { ficus } from 'react-native-ficus-ui';
import type { SvgProps } from 'react-native-svg';
import Svg, { Path } from 'react-native-svg';
-const _Svg = (props: SvgProps) => (
+const IconMoon = (props: SvgProps) => (
(
/>
);
-const IconMoon = ficus(_Svg);
export default IconMoon;
diff --git a/src/components/icons/generated/IconMoreVertical.tsx b/src/components/icons/generated/IconMoreVertical.tsx
index 14f5ef78..19bf9d06 100644
--- a/src/components/icons/generated/IconMoreVertical.tsx
+++ b/src/components/icons/generated/IconMoreVertical.tsx
@@ -1,9 +1,8 @@
// Autogenerated file, DO NOT MODIFY or it will be overwritten;
import * as React from 'react';
-import { ficus } from 'react-native-ficus-ui';
import type { SvgProps } from 'react-native-svg';
import Svg, { Path } from 'react-native-svg';
-const _Svg = (props: SvgProps) => (
+const IconMoreVertical = (props: SvgProps) => (
(
/>
);
-const IconMoreVertical = ficus(_Svg);
export default IconMoreVertical;
diff --git a/src/components/icons/generated/IconPanel.tsx b/src/components/icons/generated/IconPanel.tsx
index ac19ec40..35521b65 100644
--- a/src/components/icons/generated/IconPanel.tsx
+++ b/src/components/icons/generated/IconPanel.tsx
@@ -1,9 +1,8 @@
// Autogenerated file, DO NOT MODIFY or it will be overwritten;
import * as React from 'react';
-import { ficus } from 'react-native-ficus-ui';
import type { SvgProps } from 'react-native-svg';
import Svg, { Path } from 'react-native-svg';
-const _Svg = (props: SvgProps) => (
+const IconPanel = (props: SvgProps) => (
(
/>
);
-const IconPanel = ficus(_Svg);
export default IconPanel;
diff --git a/src/components/icons/generated/IconPlay.tsx b/src/components/icons/generated/IconPlay.tsx
index 75ab3a29..a2c6dd5e 100644
--- a/src/components/icons/generated/IconPlay.tsx
+++ b/src/components/icons/generated/IconPlay.tsx
@@ -1,9 +1,8 @@
// Autogenerated file, DO NOT MODIFY or it will be overwritten;
import * as React from 'react';
-import { ficus } from 'react-native-ficus-ui';
import type { SvgProps } from 'react-native-svg';
import Svg, { Path } from 'react-native-svg';
-const _Svg = (props: SvgProps) => (
+const IconPlay = (props: SvgProps) => (
(
/>
);
-const IconPlay = ficus(_Svg);
export default IconPlay;
diff --git a/src/components/icons/generated/IconPlus.tsx b/src/components/icons/generated/IconPlus.tsx
index 563f8636..8f38811f 100644
--- a/src/components/icons/generated/IconPlus.tsx
+++ b/src/components/icons/generated/IconPlus.tsx
@@ -1,9 +1,8 @@
// Autogenerated file, DO NOT MODIFY or it will be overwritten;
import * as React from 'react';
-import { ficus } from 'react-native-ficus-ui';
import type { SvgProps } from 'react-native-svg';
import Svg, { Path } from 'react-native-svg';
-const _Svg = (props: SvgProps) => (
+const IconPlus = (props: SvgProps) => (
(
/>
);
-const IconPlus = ficus(_Svg);
export default IconPlus;
diff --git a/src/components/icons/generated/IconPower.tsx b/src/components/icons/generated/IconPower.tsx
index a185c105..65180c36 100644
--- a/src/components/icons/generated/IconPower.tsx
+++ b/src/components/icons/generated/IconPower.tsx
@@ -1,9 +1,8 @@
// Autogenerated file, DO NOT MODIFY or it will be overwritten;
import * as React from 'react';
-import { ficus } from 'react-native-ficus-ui';
import type { SvgProps } from 'react-native-svg';
import Svg, { Path } from 'react-native-svg';
-const _Svg = (props: SvgProps) => (
+const IconPower = (props: SvgProps) => (
(
/>
);
-const IconPower = ficus(_Svg);
export default IconPower;
diff --git a/src/components/icons/generated/IconRefreshCw.tsx b/src/components/icons/generated/IconRefreshCw.tsx
index 0f75e1c9..096ea33e 100644
--- a/src/components/icons/generated/IconRefreshCw.tsx
+++ b/src/components/icons/generated/IconRefreshCw.tsx
@@ -1,9 +1,8 @@
// Autogenerated file, DO NOT MODIFY or it will be overwritten;
import * as React from 'react';
-import { ficus } from 'react-native-ficus-ui';
import type { SvgProps } from 'react-native-svg';
import Svg, { ClipPath, Defs, G, Path, Rect } from 'react-native-svg';
-const _Svg = (props: SvgProps) => (
+const IconRefreshCw = (props: SvgProps) => (
(
);
-const IconRefreshCw = ficus(_Svg);
export default IconRefreshCw;
diff --git a/src/components/icons/generated/IconRepositories.tsx b/src/components/icons/generated/IconRepositories.tsx
index 5b4a736f..e5739416 100644
--- a/src/components/icons/generated/IconRepositories.tsx
+++ b/src/components/icons/generated/IconRepositories.tsx
@@ -1,9 +1,8 @@
// Autogenerated file, DO NOT MODIFY or it will be overwritten;
import * as React from 'react';
-import { ficus } from 'react-native-ficus-ui';
import type { SvgProps } from 'react-native-svg';
import Svg, { Path } from 'react-native-svg';
-const _Svg = (props: SvgProps) => (
+const IconRepositories = (props: SvgProps) => (
(
/>
);
-const IconRepositories = ficus(_Svg);
export default IconRepositories;
diff --git a/src/components/icons/generated/IconRepository.tsx b/src/components/icons/generated/IconRepository.tsx
index 970d3009..a5c4a139 100644
--- a/src/components/icons/generated/IconRepository.tsx
+++ b/src/components/icons/generated/IconRepository.tsx
@@ -1,9 +1,8 @@
// Autogenerated file, DO NOT MODIFY or it will be overwritten;
import * as React from 'react';
-import { ficus } from 'react-native-ficus-ui';
import type { SvgProps } from 'react-native-svg';
import Svg, { Path } from 'react-native-svg';
-const _Svg = (props: SvgProps) => (
+const IconRepository = (props: SvgProps) => (
(
/>
);
-const IconRepository = ficus(_Svg);
export default IconRepository;
diff --git a/src/components/icons/generated/IconSearch.tsx b/src/components/icons/generated/IconSearch.tsx
index 03a66214..779dabe3 100644
--- a/src/components/icons/generated/IconSearch.tsx
+++ b/src/components/icons/generated/IconSearch.tsx
@@ -1,9 +1,8 @@
// Autogenerated file, DO NOT MODIFY or it will be overwritten;
import * as React from 'react';
-import { ficus } from 'react-native-ficus-ui';
import type { SvgProps } from 'react-native-svg';
import Svg, { Path } from 'react-native-svg';
-const _Svg = (props: SvgProps) => (
+const IconSearch = (props: SvgProps) => (
(
/>
);
-const IconSearch = ficus(_Svg);
export default IconSearch;
diff --git a/src/components/icons/generated/IconShare.tsx b/src/components/icons/generated/IconShare.tsx
index 16c3620c..f62d4911 100644
--- a/src/components/icons/generated/IconShare.tsx
+++ b/src/components/icons/generated/IconShare.tsx
@@ -1,9 +1,8 @@
// Autogenerated file, DO NOT MODIFY or it will be overwritten;
import * as React from 'react';
-import { ficus } from 'react-native-ficus-ui';
import type { SvgProps } from 'react-native-svg';
import Svg, { Path } from 'react-native-svg';
-const _Svg = (props: SvgProps) => (
+const IconShare = (props: SvgProps) => (
(
/>
);
-const IconShare = ficus(_Svg);
export default IconShare;
diff --git a/src/components/icons/generated/IconShare2.tsx b/src/components/icons/generated/IconShare2.tsx
index cab741e1..15ac4812 100644
--- a/src/components/icons/generated/IconShare2.tsx
+++ b/src/components/icons/generated/IconShare2.tsx
@@ -1,9 +1,8 @@
// Autogenerated file, DO NOT MODIFY or it will be overwritten;
import * as React from 'react';
-import { ficus } from 'react-native-ficus-ui';
import type { SvgProps } from 'react-native-svg';
import Svg, { Path } from 'react-native-svg';
-const _Svg = (props: SvgProps) => (
+const IconShare2 = (props: SvgProps) => (
(
/>
);
-const IconShare2 = ficus(_Svg);
export default IconShare2;
diff --git a/src/components/icons/generated/IconShoppingCart.tsx b/src/components/icons/generated/IconShoppingCart.tsx
index eece7f7b..76f0c7e7 100644
--- a/src/components/icons/generated/IconShoppingCart.tsx
+++ b/src/components/icons/generated/IconShoppingCart.tsx
@@ -1,9 +1,8 @@
// Autogenerated file, DO NOT MODIFY or it will be overwritten;
import * as React from 'react';
-import { ficus } from 'react-native-ficus-ui';
import type { SvgProps } from 'react-native-svg';
import Svg, { ClipPath, Defs, G, Path, Rect } from 'react-native-svg';
-const _Svg = (props: SvgProps) => (
+const IconShoppingCart = (props: SvgProps) => (
(
);
-const IconShoppingCart = ficus(_Svg);
export default IconShoppingCart;
diff --git a/src/components/icons/generated/IconSliders.tsx b/src/components/icons/generated/IconSliders.tsx
index f426debb..7e8a7f6b 100644
--- a/src/components/icons/generated/IconSliders.tsx
+++ b/src/components/icons/generated/IconSliders.tsx
@@ -1,9 +1,8 @@
// Autogenerated file, DO NOT MODIFY or it will be overwritten;
import * as React from 'react';
-import { ficus } from 'react-native-ficus-ui';
import type { SvgProps } from 'react-native-svg';
import Svg, { Path } from 'react-native-svg';
-const _Svg = (props: SvgProps) => (
+const IconSliders = (props: SvgProps) => (
(
/>
);
-const IconSliders = ficus(_Svg);
export default IconSliders;
diff --git a/src/components/icons/generated/IconSun.tsx b/src/components/icons/generated/IconSun.tsx
index c887e1ba..96fa8a93 100644
--- a/src/components/icons/generated/IconSun.tsx
+++ b/src/components/icons/generated/IconSun.tsx
@@ -1,9 +1,8 @@
// Autogenerated file, DO NOT MODIFY or it will be overwritten;
import * as React from 'react';
-import { ficus } from 'react-native-ficus-ui';
import type { SvgProps } from 'react-native-svg';
import Svg, { Path } from 'react-native-svg';
-const _Svg = (props: SvgProps) => (
+const IconSun = (props: SvgProps) => (
(
/>
);
-const IconSun = ficus(_Svg);
export default IconSun;
diff --git a/src/components/icons/generated/IconTag.tsx b/src/components/icons/generated/IconTag.tsx
index aca95330..35e6b69e 100644
--- a/src/components/icons/generated/IconTag.tsx
+++ b/src/components/icons/generated/IconTag.tsx
@@ -1,9 +1,8 @@
// Autogenerated file, DO NOT MODIFY or it will be overwritten;
import * as React from 'react';
-import { ficus } from 'react-native-ficus-ui';
import type { SvgProps } from 'react-native-svg';
import Svg, { Path } from 'react-native-svg';
-const _Svg = (props: SvgProps) => (
+const IconTag = (props: SvgProps) => (
(
/>
);
-const IconTag = ficus(_Svg);
export default IconTag;
diff --git a/src/components/icons/generated/IconTrash2.tsx b/src/components/icons/generated/IconTrash2.tsx
index 5f64b456..e16964d7 100644
--- a/src/components/icons/generated/IconTrash2.tsx
+++ b/src/components/icons/generated/IconTrash2.tsx
@@ -1,9 +1,8 @@
// Autogenerated file, DO NOT MODIFY or it will be overwritten;
import * as React from 'react';
-import { ficus } from 'react-native-ficus-ui';
import type { SvgProps } from 'react-native-svg';
import Svg, { Path } from 'react-native-svg';
-const _Svg = (props: SvgProps) => (
+const IconTrash2 = (props: SvgProps) => (
(
/>
);
-const IconTrash2 = ficus(_Svg);
export default IconTrash2;
diff --git a/src/components/icons/generated/IconUnlock.tsx b/src/components/icons/generated/IconUnlock.tsx
index 322ee9f7..b8e476f0 100644
--- a/src/components/icons/generated/IconUnlock.tsx
+++ b/src/components/icons/generated/IconUnlock.tsx
@@ -1,9 +1,8 @@
// Autogenerated file, DO NOT MODIFY or it will be overwritten;
import * as React from 'react';
-import { ficus } from 'react-native-ficus-ui';
import type { SvgProps } from 'react-native-svg';
import Svg, { Path } from 'react-native-svg';
-const _Svg = (props: SvgProps) => (
+const IconUnlock = (props: SvgProps) => (
(
/>
);
-const IconUnlock = ficus(_Svg);
export default IconUnlock;
diff --git a/src/components/icons/generated/IconUpload.tsx b/src/components/icons/generated/IconUpload.tsx
index 233a0331..78822fb0 100644
--- a/src/components/icons/generated/IconUpload.tsx
+++ b/src/components/icons/generated/IconUpload.tsx
@@ -1,9 +1,8 @@
// Autogenerated file, DO NOT MODIFY or it will be overwritten;
import * as React from 'react';
-import { ficus } from 'react-native-ficus-ui';
import type { SvgProps } from 'react-native-svg';
import Svg, { Path } from 'react-native-svg';
-const _Svg = (props: SvgProps) => (
+const IconUpload = (props: SvgProps) => (
(
/>
);
-const IconUpload = ficus(_Svg);
export default IconUpload;
diff --git a/src/components/icons/generated/IconUser.tsx b/src/components/icons/generated/IconUser.tsx
index 3c93dec6..14e4872b 100644
--- a/src/components/icons/generated/IconUser.tsx
+++ b/src/components/icons/generated/IconUser.tsx
@@ -1,9 +1,8 @@
// Autogenerated file, DO NOT MODIFY or it will be overwritten;
import * as React from 'react';
-import { ficus } from 'react-native-ficus-ui';
import type { SvgProps } from 'react-native-svg';
import Svg, { Path } from 'react-native-svg';
-const _Svg = (props: SvgProps) => (
+const IconUser = (props: SvgProps) => (
(
/>
);
-const IconUser = ficus(_Svg);
export default IconUser;
diff --git a/src/components/icons/generated/IconUserCircle.tsx b/src/components/icons/generated/IconUserCircle.tsx
index 7bce3ba5..aceb46c7 100644
--- a/src/components/icons/generated/IconUserCircle.tsx
+++ b/src/components/icons/generated/IconUserCircle.tsx
@@ -1,9 +1,8 @@
// Autogenerated file, DO NOT MODIFY or it will be overwritten;
import * as React from 'react';
-import { ficus } from 'react-native-ficus-ui';
import type { SvgProps } from 'react-native-svg';
import Svg, { Path } from 'react-native-svg';
-const _Svg = (props: SvgProps) => (
+const IconUserCircle = (props: SvgProps) => (
(
/>
);
-const IconUserCircle = ficus(_Svg);
export default IconUserCircle;
diff --git a/src/components/icons/generated/IconUserCircleDuotone.tsx b/src/components/icons/generated/IconUserCircleDuotone.tsx
index baafdf2c..d6aba117 100644
--- a/src/components/icons/generated/IconUserCircleDuotone.tsx
+++ b/src/components/icons/generated/IconUserCircleDuotone.tsx
@@ -1,9 +1,8 @@
// Autogenerated file, DO NOT MODIFY or it will be overwritten;
import * as React from 'react';
-import { ficus } from 'react-native-ficus-ui';
import type { SvgProps } from 'react-native-svg';
import Svg, { Path } from 'react-native-svg';
-const _Svg = (props: SvgProps) => (
+const IconUserCircleDuotone = (props: SvgProps) => (
(
/>
);
-const IconUserCircleDuotone = ficus(_Svg);
export default IconUserCircleDuotone;
diff --git a/src/components/icons/generated/IconUserCircleFill.tsx b/src/components/icons/generated/IconUserCircleFill.tsx
index ded7c94d..866a9e11 100644
--- a/src/components/icons/generated/IconUserCircleFill.tsx
+++ b/src/components/icons/generated/IconUserCircleFill.tsx
@@ -1,9 +1,8 @@
// Autogenerated file, DO NOT MODIFY or it will be overwritten;
import * as React from 'react';
-import { ficus } from 'react-native-ficus-ui';
import type { SvgProps } from 'react-native-svg';
import Svg, { Path } from 'react-native-svg';
-const _Svg = (props: SvgProps) => (
+const IconUserCircleFill = (props: SvgProps) => (
(
/>
);
-const IconUserCircleFill = ficus(_Svg);
export default IconUserCircleFill;
diff --git a/src/components/icons/generated/IconUsers.tsx b/src/components/icons/generated/IconUsers.tsx
index 773f3c7c..f9f9fbbb 100644
--- a/src/components/icons/generated/IconUsers.tsx
+++ b/src/components/icons/generated/IconUsers.tsx
@@ -1,9 +1,8 @@
// Autogenerated file, DO NOT MODIFY or it will be overwritten;
import * as React from 'react';
-import { ficus } from 'react-native-ficus-ui';
import type { SvgProps } from 'react-native-svg';
import Svg, { Path } from 'react-native-svg';
-const _Svg = (props: SvgProps) => (
+const IconUsers = (props: SvgProps) => (
(
/>
);
-const IconUsers = ficus(_Svg);
export default IconUsers;
diff --git a/src/components/icons/generated/IconX.tsx b/src/components/icons/generated/IconX.tsx
index c4ad5503..b685e894 100644
--- a/src/components/icons/generated/IconX.tsx
+++ b/src/components/icons/generated/IconX.tsx
@@ -1,9 +1,8 @@
// Autogenerated file, DO NOT MODIFY or it will be overwritten;
import * as React from 'react';
-import { ficus } from 'react-native-ficus-ui';
import type { SvgProps } from 'react-native-svg';
import Svg, { Path } from 'react-native-svg';
-const _Svg = (props: SvgProps) => (
+const IconX = (props: SvgProps) => (
(
/>
);
-const IconX = ficus(_Svg);
export default IconX;
diff --git a/src/components/icons/generated/IconXCircle.tsx b/src/components/icons/generated/IconXCircle.tsx
index 9fe06f41..c5845a7d 100644
--- a/src/components/icons/generated/IconXCircle.tsx
+++ b/src/components/icons/generated/IconXCircle.tsx
@@ -1,9 +1,8 @@
// Autogenerated file, DO NOT MODIFY or it will be overwritten;
import * as React from 'react';
-import { ficus } from 'react-native-ficus-ui';
import type { SvgProps } from 'react-native-svg';
import Svg, { Path } from 'react-native-svg';
-const _Svg = (props: SvgProps) => (
+const IconXCircle = (props: SvgProps) => (
(
/>
);
-const IconXCircle = ficus(_Svg);
export default IconXCircle;
diff --git a/src/components/icons/generated/Logo.tsx b/src/components/icons/generated/Logo.tsx
index 37b16760..a33b2104 100644
--- a/src/components/icons/generated/Logo.tsx
+++ b/src/components/icons/generated/Logo.tsx
@@ -1,9 +1,8 @@
// Autogenerated file, DO NOT MODIFY or it will be overwritten;
import * as React from 'react';
-import { ficus } from 'react-native-ficus-ui';
import type { SvgProps } from 'react-native-svg';
import Svg, { Path } from 'react-native-svg';
-const _Svg = (props: SvgProps) => (
+const Logo = (props: SvgProps) => (
(
/>
);
-const Logo = ficus(_Svg);
export default Logo;
diff --git a/src/components/icons/icon.tsx b/src/components/icons/icon.tsx
index 682b1d34..69136fc5 100644
--- a/src/components/icons/icon.tsx
+++ b/src/components/icons/icon.tsx
@@ -1,20 +1,31 @@
-import { LucideIcon } from 'lucide-react-native';
-import { ficus, StyleProps } from 'react-native-ficus-ui';
+import type { StyleProp, ViewStyle } from 'react-native';
+import { useResolveClassNames } from 'uniwind';
+
+import { cn } from '@/lib/tailwind/utils';
+
+type IconProps = {
+ icon: React.ComponentType<
+ {
+ style?: StyleProp;
+ width?: number;
+ height?: number;
+ } & Record
+ >;
+ className?: string;
+};
+
+export const Icon = ({ icon: IconComponent, className }: IconProps) => {
+ const resolved = useResolveClassNames(
+ cn('size-4 text-foreground', className)
+ ) as ViewStyle;
+
+ const { width, height, ...style } = resolved;
-export const Icon = ({
- icon,
- size,
- ...props
-}: StyleProps & {
- icon: LucideIcon | ReturnType;
- color?: string;
- size?: number;
-}) => {
- const FicusLucideIcon = ficus(icon);
return (
- ;
+
+function Avatar({ className, ...props }: AvatarRootProps) {
+ return (
+ ) {
+ return (
+ ) {
+ return (
+ & {
+ name: string;
+ size?: keyof typeof sizeClasses;
+ image?: string | null;
+};
+
+function AvatarWithFallback({
+ name,
+ size = 'sm',
+ image,
+ className,
+ ...props
+}: AvatarWithFallbackProps) {
+ const sizeClass = sizeClasses[size];
+ return (
+
+ {image ?
+
+ {getInitials(name)}
+
+
+
+ );
+}
+
+export { Avatar, AvatarFallback, AvatarImage, AvatarWithFallback };
diff --git a/src/components/ui/badge.tsx b/src/components/ui/badge.tsx
new file mode 100644
index 00000000..86e6231c
--- /dev/null
+++ b/src/components/ui/badge.tsx
@@ -0,0 +1,74 @@
+import * as Slot from '@rn-primitives/slot';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { Platform, View, ViewProps } from 'react-native';
+
+import { cn } from '@/lib/tailwind/utils';
+
+import { TextClassContext } from '@/components/ui/text';
+
+const badgeVariants = cva(
+ cn(
+ 'group shrink-0 flex-row items-center justify-center gap-1 overflow-hidden rounded-full border border-border px-2 py-0.5',
+ Platform.select({
+ web: 'w-fit whitespace-nowrap transition-colors transition-shadow focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/30 [&>svg]:pointer-events-none [&>svg]:size-3',
+ })
+ ),
+ {
+ variants: {
+ variant: {
+ default: cn(
+ 'border-transparent bg-primary',
+ Platform.select({ web: '[a&]:hover:bg-primary/90' })
+ ),
+ secondary: cn(
+ 'border-transparent bg-secondary',
+ Platform.select({ web: '[a&]:hover:bg-secondary/90' })
+ ),
+ destructive: cn(
+ 'border-transparent bg-destructive',
+ Platform.select({ web: '[a&]:hover:bg-destructive/90' })
+ ),
+ outline: Platform.select({
+ web: '[a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
+ }),
+ },
+ },
+ defaultVariants: {
+ variant: 'default',
+ },
+ }
+);
+
+const badgeTextVariants = cva('text-xs font-medium', {
+ variants: {
+ variant: {
+ default: 'text-primary-foreground',
+ secondary: 'text-secondary-foreground',
+ destructive: 'text-white',
+ outline: 'text-foreground',
+ },
+ },
+ defaultVariants: {
+ variant: 'default',
+ },
+});
+
+type BadgeProps = ViewProps &
+ React.RefAttributes & {
+ asChild?: boolean;
+ } & VariantProps;
+
+function Badge({ className, variant, asChild, ...props }: BadgeProps) {
+ const Component = asChild ? Slot.View : View;
+ return (
+
+
+ );
+}
+
+export { Badge, badgeTextVariants, badgeVariants };
+export type { BadgeProps };
diff --git a/src/components/ui/bottom-sheet.tsx b/src/components/ui/bottom-sheet.tsx
index e5b8e052..7e678ccc 100644
--- a/src/components/ui/bottom-sheet.tsx
+++ b/src/components/ui/bottom-sheet.tsx
@@ -1,25 +1,26 @@
import {
BottomSheetBackdrop,
BottomSheetBackdropProps,
+ BottomSheetHandle,
BottomSheetModal,
BottomSheetModalProps,
BottomSheetView,
} from '@gorhom/bottom-sheet';
import { useEffect, useMemo, useRef } from 'react';
-import { ficus, useColorModeValue, useDisclosure } from 'react-native-ficus-ui';
+import { withUniwind } from 'uniwind';
-import theme from '@/lib/ficus-ui/theme';
+import { cn } from '@/lib/tailwind/utils';
-const FicusBottomSheet = ficus(BottomSheetModal, {
- baseStyle: { flex: 1, borderRadius: 'md' },
-});
+const SheetBackdrop = withUniwind(BottomSheetBackdrop);
+const SheetModal = withUniwind(BottomSheetModal);
+const SheetView = withUniwind(BottomSheetView);
+const SheetHandle = withUniwind(BottomSheetHandle);
export const BottomSheet = ({
isOpen,
onClose,
...props
-}: BottomSheetModalProps &
- Pick, 'isOpen' | 'onClose'>) => {
+}: BottomSheetModalProps & { isOpen?: boolean; onClose?: () => void }) => {
const ref = useRef(null);
useEffect(() => {
@@ -40,15 +41,9 @@ export const BottomSheet = ({
}
};
- const backgroundColor = useColorModeValue('white', theme.colors.neutral[900]);
- const handleColor = useColorModeValue(
- theme.colors.neutral[200],
- theme.colors.neutral[500]
- );
-
const renderBackdrop = useMemo(
() => (backdropProps: BottomSheetBackdropProps) => (
- & {
+ className?: string;
+};
+
+export const BottomSheetContent = ({
+ className,
+ style,
+ ...props
+}: BottomSheetContentProps) => (
+ &
+ React.RefAttributes &
+ VariantProps;
+
+function Button({
+ className,
+ variant,
+ size,
+ children,
+ style,
+ ...props
+}: ButtonProps) {
+ const content = getUiState((set) => {
+ if (typeof children === 'function') return set('function', { children });
+ if (!children) return set('empty');
+ if (Array.isArray(children))
+ return set('array', {
+ children: children.map((child) =>
+ typeof child === 'string' || typeof child === 'number' ? (
+ {child}
+ ) : (
+ child
+ )
+ ),
+ });
+ if (typeof children === 'string' || typeof children === 'number')
+ return set('text', { children });
+
+ return set('default', { children });
+ });
+ return (
+
+ [
+ pressed && { opacity: 0.7 },
+ typeof style === 'function'
+ ? style({
+ pressed,
+ hovered: false,
+ })
+ : style,
+ ]}
+ role="button"
+ {...props}
+ >
+ {content
+ .match('function', ({ children }) => children)
+ .match('text', ({ children }) => {children} )
+ .match('array', ({ children }) =>
+ children.map((child, index) =>
+ typeof child === 'string' || typeof child === 'number' ? (
+ // eslint-disable-next-line @eslint-react/no-array-index-key
+ {child}
+ ) : (
+ child
+ )
+ )
+ )
+ .match('empty', () => null)
+ .match('default', ({ children }) => children)
+ .exhaustive()}
+
+
+ );
+}
+
+export { Button, buttonTextVariants, buttonVariants };
+export type { ButtonProps };
diff --git a/src/components/ui/card.stories.tsx b/src/components/ui/card.stories.tsx
index 3375905a..4300b023 100644
--- a/src/components/ui/card.stories.tsx
+++ b/src/components/ui/card.stories.tsx
@@ -1,35 +1,23 @@
import type { Meta, StoryObj } from '@storybook/react-native';
-import { Box, Button, HStack, Text, VStack } from 'react-native-ficus-ui';
+import { View } from 'react-native';
+
+import { Button } from '@/components/ui/button';
+import { Text } from '@/components/ui/text';
import { Card, CardBody, CardHeader, CardTitle } from './card';
const meta: Meta = {
title: 'UI/Card',
component: Card,
- argTypes: {
- borderRadius: {
- control: 'select',
- options: ['xs', 'sm', 'md', 'lg', 'xl', '2xl', 'full'],
- },
- borderWidth: { control: 'number' },
- borderColor: { control: 'text' },
- bg: { control: 'text' },
- },
- args: {
- borderRadius: 'md',
- borderWidth: 1,
- borderColor: 'pink.200',
- bg: 'white',
- },
parameters: {
notes:
- 'Card basique basé sur react-native-ficus-ui. Utilise `_dark` pour le thème sombre.',
+ 'Card component using View and Text. Supports dark mode via Tailwind.',
},
decorators: [
(Story) => (
-
+
+
),
],
};
@@ -56,28 +44,28 @@ export const WithHeaderAndBody: Story = {
Payment method
-
+
Edit
-
+
-
-
- Card holder
- Aziz Ouertani
-
-
- Number
- **** **** **** 4242
-
-
- Expires
- 12/27
-
-
+
+
+ Card holder
+ Aziz Ouertani
+
+
+ Number
+ **** **** **** 4242
+
+
+ Expires
+ 12/27
+
+
),
@@ -89,39 +77,39 @@ export const PressableHeaderActions: Story = {
Team
-
+
Invite
New
-
+
-
+
- Hugo Pérard
- Nicolas Troion
- Aziz Ouertani
- Omar Borji
-
+
),
};
export const DarkModeHint: Story = {
- name: 'Dark mode (via `_dark`)',
+ name: 'Dark mode',
render: (args) => (
-
-
+
+
- Dark mode preview
+ Dark mode preview
-
- Surround with a dark container to preview the `_dark` styles.
+
+ Surround with a dark container to preview dark styles.
-
+
),
};
diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx
index 58718030..6f6a3ea0 100644
--- a/src/components/ui/card.tsx
+++ b/src/components/ui/card.tsx
@@ -1,33 +1,24 @@
-import {
- Box,
- BoxProps,
- HStack,
- StackProps,
- Text,
- TextProps,
-} from 'react-native-ficus-ui';
+import { View, type ViewProps } from 'react-native';
-export const Card = (props: BoxProps) => {
+import { Text } from '@/components/ui/text';
+
+export const Card = (props: ViewProps) => {
return (
- ) => {
+ return }) => (
+
+
+
);
};
diff --git a/src/components/ui/image.tsx b/src/components/ui/image.tsx
index 779231fa..4e170681 100644
--- a/src/components/ui/image.tsx
+++ b/src/components/ui/image.tsx
@@ -1,5 +1,10 @@
import { Image as ExpoImage, ImageProps } from 'expo-image';
+import { StyleSheet } from 'react-native';
+
+const imageStyles = StyleSheet.create({
+ flex: { flex: 1 },
+});
export const Image = (props: ImageProps) => {
- return ;
+ className?: string;
+ 'aria-invalid'?: boolean;
+};
+
+const Input = ({
+ ref,
+ className,
+ as: Component = TextInput,
+ 'aria-invalid': ariaInvalid,
+ onFocus,
+ onBlur,
+ ...props
+}: InputProps & { ref?: React.RefObject }) => {
+ const hasError = ariaInvalid === true;
+ const [isFocused, setIsFocused] = React.useState(false);
+ const resolvedForeground = useResolveClassNames('text-foreground') as {
+ color?: string;
+ };
+ const resolvedDestructive = useResolveClassNames('text-destructive') as {
+ color?: string;
+ };
+ const Comp = Component as React.ComponentType<
+ TextInputProps & React.RefAttributes
+ >;
+
+ const getFocusBorderColor = () => {
+ if (hasError) return resolvedDestructive.color;
+ return resolvedForeground.color;
+ };
+
+ const focusStyle =
+ Platform.OS !== 'web' && isFocused
+ ? { borderColor: getFocusBorderColor() }
+ : undefined;
+
+ return (
+ {
+ setIsFocused(true);
+ onFocus?.(e);
+ }}
+ onBlur={(e) => {
+ setIsFocused(false);
+ onBlur?.(e);
+ }}
+ className={cn(
+ 'flex h-10 w-full min-w-0 flex-row items-center rounded-md border border-input bg-background px-3 py-1 text-base leading-5 text-foreground shadow-sm shadow-black/5 sm:h-9',
+ props.editable === false &&
+ cn(
+ 'opacity-50',
+ Platform.select({
+ web: 'disabled:pointer-events-none disabled:cursor-not-allowed',
+ })
+ ),
+ hasError && 'border-destructive',
+ Platform.select({
+ web: cn(
+ 'transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground md:text-sm',
+ 'focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50',
+ 'aria-invalid:ring-destructive/30'
+ ),
+ native: 'placeholder:text-muted-foreground/50',
+ }),
+ className
+ )}
+ style={focusStyle}
+ {...props}
+ />
+ );
+};
+
+Input.displayName = 'Input';
+
+export { Input };
diff --git a/src/components/ui/locale-switcher.tsx b/src/components/ui/locale-switcher.tsx
index 1650c440..e5398164 100644
--- a/src/components/ui/locale-switcher.tsx
+++ b/src/components/ui/locale-switcher.tsx
@@ -1,21 +1,18 @@
import { useTranslation } from 'react-i18next';
-import {
- Box,
- Button,
- HStack,
- Pressable,
- Text,
- useDisclosure,
-} from 'react-native-ficus-ui';
+import { Pressable, View } from 'react-native';
import { AVAILABLE_LANGUAGES } from '@/lib/i18n/constants';
+import { useDisclosure } from '@/hooks/use-disclosure';
import {
IconCheck,
IconChevronsUpDown,
IconLanguages,
} from '@/components/icons/generated';
-import { BottomSheet, BottomSheetBox } from '@/components/ui/bottom-sheet';
+import { Icon } from '@/components/icons/icon';
+import { BottomSheet, BottomSheetContent } from '@/components/ui/bottom-sheet';
+import { Button } from '@/components/ui/button';
+import { Text } from '@/components/ui/text';
export const LocaleSwitcher = () => {
const { t, i18n } = useTranslation(['common']);
@@ -23,43 +20,46 @@ export const LocaleSwitcher = () => {
return (
<>
-
-
+ {t(`common:languages.values.${i18n.language}`)}
-
-
-
+
+
{AVAILABLE_LANGUAGES.map((language) => (
- {
i18n.changeLanguage(language.key);
sheet.onClose();
}}
- py={4}
+ className="flex flex-row items-center py-1"
>
-
+
{language.key === i18n.language && (
-
-
-
+
+
+
{t(`common:languages.values.${language.key}`)}
{language.key !== i18n.language && (
-
+
{t(`common:languages.values.${language.key}`, {
lng: language.key,
})}
)}
-
-
+
+
))}
-
+
);
diff --git a/src/components/ui/pin-input.tsx b/src/components/ui/pin-input.tsx
new file mode 100644
index 00000000..3d301326
--- /dev/null
+++ b/src/components/ui/pin-input.tsx
@@ -0,0 +1,112 @@
+import * as React from 'react';
+import { Platform, Pressable, TextInput, View } from 'react-native';
+import { useResolveClassNames } from 'uniwind';
+
+import { cn } from '@/lib/tailwind/utils';
+
+import { Input } from '@/components/ui/input';
+import { Text } from '@/components/ui/text';
+
+type PinInputProps = React.ComponentProps & {
+ /** Number of pin cells */
+ cellCount?: number;
+};
+
+const PinInput = ({
+ cellCount = 6,
+ className,
+ value = '',
+ onChangeText,
+ keyboardType = 'number-pad',
+ textContentType = 'oneTimeCode',
+ editable = true,
+ autoFocus,
+ ref,
+ ...props
+}: PinInputProps) => {
+ const innerRef = React.useRef(null);
+ const [isFocused, setIsFocused] = React.useState(false);
+ const resolvedForeground = useResolveClassNames('text-foreground') as {
+ color?: string;
+ };
+ const resolvedDestructive = useResolveClassNames('text-destructive') as {
+ color?: string;
+ };
+ const hasError = props['aria-invalid'] === true;
+
+ React.useImperativeHandle(ref, () => innerRef.current as TextInput, []);
+
+ const cells = React.useMemo(() => {
+ const digits = value.padEnd(cellCount, ' ').split('').slice(0, cellCount);
+ return digits.map((digit, i) => ({
+ id: `pin-cell-${i}` as const,
+ digit,
+ }));
+ }, [value, cellCount]);
+
+ const activeIndex = Math.min(value.length, cellCount - 1);
+
+ const getFocusBorderColor = () => {
+ if (hasError) return resolvedDestructive.color;
+ return resolvedForeground.color;
+ };
+
+ return (
+ {
+ innerRef.current?.blur();
+ setTimeout(() => innerRef.current?.focus(), 0);
+ }}
+ >
+ {cells.map(({ id, digit }, index) => (
+
+
+ {digit === ' ' ? '\u200B' : digit}
+
+
+ ))}
+ setIsFocused(true)}
+ onBlur={() => setIsFocused(false)}
+ onChangeText={(text) => {
+ const filtered = text.replace(/\D/g, '').slice(0, cellCount);
+ onChangeText?.(filtered);
+ }}
+ keyboardType={keyboardType}
+ textContentType={textContentType}
+ maxLength={cellCount}
+ editable={editable}
+ caretHidden
+ style={{
+ position: 'absolute',
+ opacity: 0,
+ width: 1,
+ height: 1,
+ }}
+ />
+
+ );
+};
+
+PinInput.displayName = 'PinInput';
+
+export { PinInput };
+export type { PinInputProps };
diff --git a/src/components/ui/skeleton.tsx b/src/components/ui/skeleton.tsx
new file mode 100644
index 00000000..b8b50b4b
--- /dev/null
+++ b/src/components/ui/skeleton.tsx
@@ -0,0 +1,42 @@
+'use no memo';
+
+import * as React from 'react';
+import { View } from 'react-native';
+import Animated, {
+ useAnimatedStyle,
+ useSharedValue,
+ withRepeat,
+ withTiming,
+} from 'react-native-reanimated';
+
+import { cn } from '@/lib/tailwind/utils';
+
+const duration = 1000;
+
+function useSkeletonPulse() {
+ const sv = useSharedValue(1);
+
+ React.useEffect(() => {
+ sv.value = withRepeat(withTiming(0.5, { duration }), -1, true);
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, []);
+ return useAnimatedStyle(() => ({ opacity: sv.value }), [sv]);
+}
+
+function Skeleton({
+ className,
+ style,
+ ...props
+}: React.ComponentProps & React.RefAttributes) {
+ const animatedStyle = useSkeletonPulse();
+
+ return (
+ ) => {
- const scheme = useColorScheme();
+ const { theme, hasAdaptiveThemes } = useUniwind();
+ const toastTheme = hasAdaptiveThemes ? 'system' : (theme as 'light' | 'dark');
+
return (
;
+
+type TextVariant = NonNullable;
+
+const ROLE: Partial> = {
+ h1: 'heading',
+ h2: 'heading',
+ h3: 'heading',
+ h4: 'heading',
+ blockquote: Platform.select({ web: 'blockquote' as Role }),
+ code: Platform.select({ web: 'code' as Role }),
+};
+
+const ARIA_LEVEL: Partial> = {
+ h1: '1',
+ h2: '2',
+ h3: '3',
+ h4: '4',
+};
+
+const TextClassContext = React.createContext(undefined);
+
+function Text({
+ className,
+ asChild = false,
+ variant = 'default',
+ ...props
+}: React.ComponentProps &
+ TextVariantProps &
+ React.RefAttributes & {
+ asChild?: boolean;
+ }) {
+ const textClass = React.use(TextClassContext);
+ const Component = asChild ? Slot.Text : RNText;
+
+ return (
+
+ {hasAdaptiveThemes ? (
+
) : (
-
- {t(`common:themes.values.${currentTheme}`)}
- {!!currentTheme && (
-
+ {hasAdaptiveThemes ? (
+
+ {t(`common:themes.values.${hasAdaptiveThemes ? 'system' : theme}`)}
+
+ {!!theme && (
+
)}
-
-
+
+
{(['system', 'light', 'dark'] as const).map((mode) => (
- {
updateColorMode(mode);
sheet.onClose();
}}
- py={4}
+ className="flex flex-row items-center py-1"
>
-
- {mode === currentTheme && (
-
+ {((hasAdaptiveThemes && mode === 'system') ||
+ (!hasAdaptiveThemes && mode === theme)) && (
+
-
-
+
+
+
{t(`common:themes.values.${mode}`)}
-
-
+
+
))}
-
+
);
diff --git a/src/components/version.tsx b/src/components/version.tsx
index c2178546..d7370fd6 100644
--- a/src/components/version.tsx
+++ b/src/components/version.tsx
@@ -1,9 +1,10 @@
import { nativeApplicationVersion, nativeBuildVersion } from 'expo-application';
-import { Text, TextProps } from 'react-native-ficus-ui';
-export const Version = (props: TextProps) => {
+import { Text } from '@/components/ui/text';
+
+export const Version = (props: React.ComponentProps) => {
return (
-
+
Version {nativeApplicationVersion} • {nativeBuildVersion}
);
diff --git a/src/constants/device.ts b/src/constants/device.ts
index dc5a9f5e..19e36d87 100644
--- a/src/constants/device.ts
+++ b/src/constants/device.ts
@@ -1,4 +1,10 @@
import * as Device from 'expo-device';
+import { Dimensions } from 'react-native';
+
+export const deviceScreen =
+ Device.deviceType === Device.DeviceType['DESKTOP']
+ ? Dimensions.get('window')
+ : Dimensions.get('screen');
export const isApple = Device.brand === 'Apple';
diff --git a/src/features/account/view-account.tsx b/src/features/account/view-account.tsx
index 3caa3c30..dcbf9a02 100644
--- a/src/features/account/view-account.tsx
+++ b/src/features/account/view-account.tsx
@@ -1,25 +1,23 @@
import { getUiState } from '@bearstudio/ui-state';
import { useQueryClient } from '@tanstack/react-query';
import { useTranslation } from 'react-i18next';
-import {
- Avatar,
- Button,
- Divider,
- HStack,
- Stack,
- Text,
- useDisclosure,
-} from 'react-native-ficus-ui';
+import { View } from 'react-native';
import { toast } from 'sonner-native';
import z from 'zod';
import { useAppForm } from '@/lib/tanstack-form/config';
+import { useDisclosure } from '@/hooks/use-disclosure';
import { IconEdit3, IconLogOut } from '@/components/icons/generated';
-import { BottomSheet, BottomSheetBox } from '@/components/ui/bottom-sheet';
+import { Icon } from '@/components/icons/icon';
+import { AvatarWithFallback } from '@/components/ui/avatar';
+import { BottomSheet, BottomSheetContent } from '@/components/ui/bottom-sheet';
+import { Button } from '@/components/ui/button';
import { Card, CardBody, CardHeader, CardTitle } from '@/components/ui/card';
+import { Divider } from '@/components/ui/divider';
import { FullLoader } from '@/components/ui/full-loader';
import { LocaleSwitcher } from '@/components/ui/locale-switcher';
+import { Text } from '@/components/ui/text';
import { ThemeSwitcher } from '@/components/ui/theme-switcher';
import { Version } from '@/components/version';
@@ -50,10 +48,15 @@ export const ViewAccount = () => {
},
}
);
- updateNameSheet.onClose();
+ handleCloseNameSheet();
},
});
+ const handleCloseNameSheet = () => {
+ updateNameForm.reset();
+ updateNameSheet.onClose();
+ };
+
const ui = getUiState((set) => {
if (session.isPending) return set('pending');
if (session.error) return set('error', { error: session.error });
@@ -67,7 +70,7 @@ export const ViewAccount = () => {
return (
-
+
{ui
.match('pending', () =>
-
-
+ {data.user.name}
-
- signoutSheet.onOpen()}>
-
+ signoutSheet.onOpen()}>
+
-
-
-
+
+
+
{t('auth:signOut.confirm.title')}
-
+
{t('auth:signOut.confirm.description')}
-
+
signoutSheet.onClose()}
>
{t('auth:signOut.confirm.cancel')}
@@ -112,37 +113,37 @@ export const ViewAccount = () => {
queryClient.clear();
authClient.signOut();
}}
- full
- gap={8}
>
-
-
+
-
-
+
+
{t('account:user.name')}
updateNameSheet.onOpen()}
+ className="-mx-3 self-start"
>
- {data.user.name}{' '}
-
-
-
+
+
{t('account:user.updateName.title')}
@@ -159,9 +160,9 @@ export const ViewAccount = () => {
updateNameSheet.onClose()}
+ variant="secondary"
+ className="w-full"
+ onPress={() => handleCloseNameSheet()}
>
{t('account:user.updateName.cancel')}
@@ -169,20 +170,18 @@ export const ViewAccount = () => {
{t('account:user.updateName.save')}
-
+
-
+
-
-
+
+
{t('account:user.email')}
-
- {data.user.email}
-
-
+ {data.user.email}
+
))
@@ -192,26 +191,26 @@ export const ViewAccount = () => {
{t('account:displayPreferences.title')}
-
-
+
+
+
{t('account:displayPreferences.theme')}
+
-
-
+
+
+
{t('account:displayPreferences.language')}
+
-
+
);
};
diff --git a/src/features/app-onboarding/app-onboarding-screens.tsx b/src/features/app-onboarding/app-onboarding-screens.tsx
index f7497f67..8b6caef5 100644
--- a/src/features/app-onboarding/app-onboarding-screens.tsx
+++ b/src/features/app-onboarding/app-onboarding-screens.tsx
@@ -1,25 +1,26 @@
import { PropsWithChildren } from 'react';
import { useTranslation } from 'react-i18next';
-import {
- Badge,
- Box,
- Center,
- HStack,
- Stack,
- Text,
- WINDOW_HEIGHT,
- WINDOW_WIDTH,
-} from 'react-native-ficus-ui';
+import { View } from 'react-native';
import { IconCheck } from '@/components/icons/generated';
import { Icon } from '@/components/icons/icon';
+import { Badge } from '@/components/ui/badge';
+import { Text } from '@/components/ui/text';
+
+import { deviceScreen } from '@/constants/device';
const OnboardingScreenContainer = (props: PropsWithChildren) => (
-
-
+
+
{props.children}
-
-
+
+
);
export const AppOnboardingScreenWelcome = () => {
@@ -27,15 +28,11 @@ export const AppOnboardingScreenWelcome = () => {
return (
-
+
{t('appOnboarding:welcome.title')}
-
- Start UI
-
-
- Native
-
+ Start UI
+ Native
);
};
@@ -53,32 +50,34 @@ export const AppOnboardingScreenFeatures = () => {
];
return (
-
-
-
+
+
+
{t('appOnboarding:features.titleOne')}
-
+
{t('appOnboarding:features.titleTwo')}
-
-
-
+
+
+
{features.map((feature) => (
-
-
-
-
- {t(`appOnboarding:features.${feature}`)}
+
+
+ {t(`appOnboarding:features.${feature}`)}
+
))}
-
-
+
+
{t('appOnboarding:features.more')}
-
-
+
+
);
};
diff --git a/src/features/app-onboarding/index.ts b/src/features/app-onboarding/index.ts
new file mode 100644
index 00000000..5e23affe
--- /dev/null
+++ b/src/features/app-onboarding/index.ts
@@ -0,0 +1,9 @@
+import {
+ AppOnboardingScreenFeatures,
+ AppOnboardingScreenWelcome,
+} from '@/features/app-onboarding/app-onboarding-screens';
+
+export const appOnboardingScreens = [
+ { name: 'welcome', Component: AppOnboardingScreenWelcome },
+ { name: 'features', Component: AppOnboardingScreenFeatures },
+];
diff --git a/src/features/app-onboarding/use-background-animated-style.tsx b/src/features/app-onboarding/use-background-animated-style.tsx
index 823aef08..683a6436 100644
--- a/src/features/app-onboarding/use-background-animated-style.tsx
+++ b/src/features/app-onboarding/use-background-animated-style.tsx
@@ -1,22 +1,22 @@
-import { WINDOW_WIDTH } from '@gorhom/bottom-sheet';
import {
interpolate,
SharedValue,
useAnimatedStyle,
} from 'react-native-reanimated';
-import { appOnboardingScreens } from '@/features/app-onboarding/view-app-onboarding';
+import { deviceScreen } from '@/constants/device';
+import { appOnboardingScreens } from '@/features/app-onboarding';
const backgroundImageSize = { width: 1536, height: 1024 };
export const useBackgroundAnimatedStyle = (scrollX: SharedValue) => {
return useAnimatedStyle(() => {
- const maxScrollX = WINDOW_WIDTH * (appOnboardingScreens.length - 1);
+ const maxScrollX = deviceScreen.width * (appOnboardingScreens.length - 1);
const right = interpolate(
scrollX.value,
[0, maxScrollX],
- [650, Math.min(750, backgroundImageSize.width - WINDOW_WIDTH)]
+ [650, Math.min(750, backgroundImageSize.width - deviceScreen.width)]
);
return { right };
diff --git a/src/features/app-onboarding/use-mascot-animated-style.tsx b/src/features/app-onboarding/use-mascot-animated-style.tsx
index 4b778247..99377c1d 100644
--- a/src/features/app-onboarding/use-mascot-animated-style.tsx
+++ b/src/features/app-onboarding/use-mascot-animated-style.tsx
@@ -1,18 +1,18 @@
-import { WINDOW_HEIGHT, WINDOW_WIDTH } from '@gorhom/bottom-sheet';
import {
interpolate,
SharedValue,
useAnimatedStyle,
} from 'react-native-reanimated';
-import { appOnboardingScreens } from '@/features/app-onboarding/view-app-onboarding';
+import { deviceScreen } from '@/constants/device';
+import { appOnboardingScreens } from '@/features/app-onboarding';
export const useMascotAnimatedStyle = (scrollX: SharedValue) => {
return useAnimatedStyle(() => {
- const maxScrollX = WINDOW_WIDTH * (appOnboardingScreens.length - 1);
+ const maxScrollX = deviceScreen.width * (appOnboardingScreens.length - 1);
- const leftStart = WINDOW_WIDTH / 3.5;
- const topStart = WINDOW_HEIGHT / 2.5;
+ const leftStart = deviceScreen.width / 3.5;
+ const topStart = deviceScreen.height / 2.5;
const left = interpolate(
scrollX.value,
diff --git a/src/features/app-onboarding/view-app-onboarding.tsx b/src/features/app-onboarding/view-app-onboarding.tsx
index 8ca23b46..d7607a96 100644
--- a/src/features/app-onboarding/view-app-onboarding.tsx
+++ b/src/features/app-onboarding/view-app-onboarding.tsx
@@ -1,26 +1,26 @@
+'use no memo';
+
import { StatusBar } from 'expo-status-bar';
-import { useRef, useState } from 'react';
+import { useCallback, useRef, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { FlatList } from 'react-native';
-import {
- Box,
- Button,
- HStack,
- WINDOW_HEIGHT,
- WINDOW_WIDTH,
-} from 'react-native-ficus-ui';
+import { View } from 'react-native';
import Animated, {
+ interpolate,
useAnimatedScrollHandler,
+ useAnimatedStyle,
useSharedValue,
+ withTiming,
} from 'react-native-reanimated';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { scheduleOnRN } from 'react-native-worklets';
+import { ScopedTheme } from 'uniwind';
import { AnimatedStepIndicator } from '@/components/ui/animated-step-indicator';
+import { Button } from '@/components/ui/button';
-import {
- AppOnboardingScreenFeatures,
- AppOnboardingScreenWelcome,
-} from '@/features/app-onboarding/app-onboarding-screens';
+import { deviceScreen } from '@/constants/device';
+import { appOnboardingScreens } from '@/features/app-onboarding';
// @ts-expect-error fix image import
import backgroundImage from '@/features/app-onboarding/layout-login-image.jpg';
// @ts-expect-error fix image import
@@ -30,10 +30,32 @@ import { useBackgroundAnimatedStyle } from '@/features/app-onboarding/use-backgr
import { useMascotAnimatedStyle } from '@/features/app-onboarding/use-mascot-animated-style';
import { ViewSafeContent } from '@/layout/view-safe-content';
-export const appOnboardingScreens = [
- { name: 'welcome', Component: AppOnboardingScreenWelcome },
- { name: 'features', Component: AppOnboardingScreenFeatures },
-];
+function useScrollHandler() {
+ const scrollX = useSharedValue(0);
+
+ const scrollHandler = useAnimatedScrollHandler({
+ onScroll: (event) => {
+ scrollX.value = event.contentOffset.x;
+ },
+ });
+
+ return { scrollX, scrollHandler };
+}
+
+function useExitAnimation(doneOnboarding: () => void) {
+ const exitProgress = useSharedValue(0);
+ const exitAnimatedStyle = useAnimatedStyle(() => ({
+ opacity: interpolate(exitProgress.value, [0, 1], [1, 0]),
+ }));
+ const handleDone = useCallback(() => {
+ exitProgress.value = withTiming(1, { duration: 400 }, (finished) => {
+ if (finished) {
+ scheduleOnRN(doneOnboarding);
+ }
+ });
+ }, [doneOnboarding, exitProgress]);
+ return { exitAnimatedStyle, handleDone };
+}
export const ViewOnboarding = () => {
const { t } = useTranslation(['appOnboarding']);
@@ -43,111 +65,118 @@ export const ViewOnboarding = () => {
const listRef = useRef(null);
- const scrollX = useSharedValue(0);
- const scrollHandler = useAnimatedScrollHandler({
- onScroll: (event) => {
- scrollX.value = event.contentOffset.x;
- },
- });
-
+ const { scrollX, scrollHandler } = useScrollHandler();
const backgroundAnimatedStyle = useBackgroundAnimatedStyle(scrollX);
const mascotAnimatedStyle = useMascotAnimatedStyle(scrollX);
const doneOnboarding = useOnboardingStore((state) => state.setDone);
+ const { exitAnimatedStyle, handleDone } = useExitAnimation(doneOnboarding);
+
+ const onViewableItemsChanged = useCallback(
+ ({ viewableItems }: { viewableItems: { index: number | null }[] }) => {
+ const lastViewableIndex = viewableItems.at(-1)?.index;
+ if (lastViewableIndex !== undefined && lastViewableIndex !== null) {
+ setCurrentScreenIndex(lastViewableIndex);
+ }
+ },
+ []
+ );
+
+ const [viewabilityConfig] = useState({
+ viewAreaCoveragePercentThreshold: 30,
+ });
+
+ const renderItem = useCallback(
+ ({ item }: { item: (typeof appOnboardingScreens)[number] }) => (
+
-
-
-
+
+
-
- {appOnboardingScreens.map((screen, index) => (
-
- {
- if (currentScreenIndex === appOnboardingScreens.length - 1) {
- doneOnboarding();
- } else {
- listRef.current?.scrollToIndex({
- index: currentScreenIndex + 1,
- });
- }
+
- {t(
- `appOnboarding:${currentScreenIndex === appOnboardingScreens.length - 1 ? 'end' : 'continue'}`
+ />
+
+
+ index * deviceScreen.width
)}
-
-
-
-
+ viewabilityConfig={viewabilityConfig}
+ onViewableItemsChanged={onViewableItemsChanged}
+ onScroll={scrollHandler}
+ />
+
+
+ {appOnboardingScreens.map((screen, index) => (
+
+ {
+ if (currentScreenIndex === appOnboardingScreens.length - 1) {
+ handleDone();
+ } else {
+ listRef.current?.scrollToIndex({
+ index: currentScreenIndex + 1,
+ });
+ }
+ }}
+ >
+ {t(
+ `appOnboarding:${currentScreenIndex === appOnboardingScreens.length - 1 ? 'end' : 'continue'}`
+ )}
+
+
+
+
+
);
};
diff --git a/src/features/auth/auth-header.tsx b/src/features/auth/auth-header.tsx
index ae5216c2..d442aa47 100644
--- a/src/features/auth/auth-header.tsx
+++ b/src/features/auth/auth-header.tsx
@@ -1,5 +1,6 @@
-import { HStack } from 'react-native-ficus-ui';
+import { View } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useResolveClassNames } from 'uniwind';
import { Logo } from '@/components/icons/generated';
import { LocaleSwitcher } from '@/components/ui/locale-switcher';
@@ -8,21 +9,19 @@ import { ThemeSwitcher } from '@/components/ui/theme-switcher';
export const AuthHeader = () => {
const insets = useSafeAreaInsets();
+ const mutedStyle = useResolveClassNames('text-primary');
+ const logoColor = mutedStyle.color;
+
return (
-
-
+
-
+
+
);
};
diff --git a/src/features/auth/view-auth-onboarding.tsx b/src/features/auth/view-auth-onboarding.tsx
index b039fbbc..4ef3b6cc 100644
--- a/src/features/auth/view-auth-onboarding.tsx
+++ b/src/features/auth/view-auth-onboarding.tsx
@@ -1,9 +1,11 @@
import { useTranslation } from 'react-i18next';
-import { Center, Stack, Text } from 'react-native-ficus-ui';
+import { View } from 'react-native';
import z from 'zod';
import { useAppForm } from '@/lib/tanstack-form/config';
+import { Text } from '@/components/ui/text';
+
import { AuthHeader } from '@/features/auth/auth-header';
import { authClient } from '@/features/auth/client';
import { ViewSafeContent } from '@/layout/view-safe-content';
@@ -26,19 +28,19 @@ export const ViewAuthOnboarding = () => {
return (
-
-
-
+
+
+
+
{t('auth:onboarding.title')}
-
+
{t('auth:onboarding.subtitle')}
-
+
-
-
+
+
{(field) => (
@@ -53,12 +55,12 @@ export const ViewAuthOnboarding = () => {
)}
-
+
{t('auth:onboarding.continue')}
-
+
-
-
+
+
);
};
diff --git a/src/features/auth/view-otp-verification.tsx b/src/features/auth/view-otp-verification.tsx
index 58decc70..0878d4b6 100644
--- a/src/features/auth/view-otp-verification.tsx
+++ b/src/features/auth/view-otp-verification.tsx
@@ -1,12 +1,15 @@
import { useLocalSearchParams, useRouter } from 'expo-router';
import { useTranslation } from 'react-i18next';
-import { Button, Center, Stack, Text } from 'react-native-ficus-ui';
+import { View } from 'react-native';
import { toast } from 'sonner-native';
import { z } from 'zod';
import { useAppForm } from '@/lib/tanstack-form/config';
import { IconArrowLeft } from '@/components/icons/generated';
+import { Icon } from '@/components/icons/icon';
+import { Button } from '@/components/ui/button';
+import { Text } from '@/components/ui/text';
import { AuthHeader } from '@/features/auth/auth-header';
import { authClient } from '@/features/auth/client';
@@ -48,45 +51,48 @@ export const ViewOtpVerification = () => {
return (
+
-
-
-
+
+
-
-
+
+
{t('auth:verification.title')}
-
+
{t('auth:verification.description')}
- {email} .{' '}
+ {email} .{' '}
{t('auth:verification.enterItBelow')}
-
-
-
+
+
+
{(field) => (
{t('auth:verification.verificationCode.label')}
-
{t('auth:verification.expireHint')}
)}
-
+
{t('auth:verification.confirm')}
-
+
+
);
};
diff --git a/src/features/auth/view-sign-in.tsx b/src/features/auth/view-sign-in.tsx
index 36d4a4a7..3032e4a1 100644
--- a/src/features/auth/view-sign-in.tsx
+++ b/src/features/auth/view-sign-in.tsx
@@ -2,7 +2,7 @@ import { useMutation } from '@tanstack/react-query';
import appConfig from 'app.config';
import { useRouter } from 'expo-router';
import { useTranslation } from 'react-i18next';
-import { Center, HStack, Stack, Text } from 'react-native-ficus-ui';
+import { View } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { toast } from 'sonner-native';
import { z } from 'zod';
@@ -10,8 +10,11 @@ import { z } from 'zod';
import { Form } from '@/lib/tanstack-form/components';
import { useAppForm } from '@/lib/tanstack-form/config';
+import { Text } from '@/components/ui/text';
import { Version } from '@/components/version';
+import { useOnboardingStore } from '@/features/app-onboarding/store';
+import { ViewOnboarding } from '@/features/app-onboarding/view-app-onboarding';
import { AuthHeader } from '@/features/auth/auth-header';
import { authClient } from '@/features/auth/client';
import { LoginEmailHint } from '@/features/devtools/login-hint';
@@ -59,44 +62,46 @@ export const ViewSignIn = () => {
},
});
+ const isOnboarded = useOnboardingStore((state) => state.done);
+
return (
-
-
-
-
-
-
-
+
+
+
+
);
};
diff --git a/src/features/books/book-cover.tsx b/src/features/books/book-cover.tsx
index 6146aa3a..3a0a1b48 100644
--- a/src/features/books/book-cover.tsx
+++ b/src/features/books/book-cover.tsx
@@ -1,33 +1,36 @@
-import { Box, BoxProps, Text } from 'react-native-ficus-ui';
+import { View, type ViewProps } from 'react-native';
import { BookGetByIdResponse } from '@/lib/hey-api/generated';
+import { cn } from '@/lib/tailwind/utils';
-export type BookCoverProps = BoxProps & { book: BookGetByIdResponse };
+import { Text } from '@/components/ui/text';
-const COVER_HEIGHT = 240;
+export type BookCoverProps = ViewProps & {
+ book: BookGetByIdResponse;
+};
+
+export const COVER_HEIGHT = 240;
export const BookCover = ({
book,
- h = COVER_HEIGHT,
+ className,
+ style,
...props
}: BookCoverProps) => {
return (
-
-
- {book.title}
-
-
- {book.author}
-
-
+ {book.title}
+ {book.author}
+
);
};
diff --git a/src/features/books/view-book.tsx b/src/features/books/view-book.tsx
index 59252ffb..c4fba0c1 100644
--- a/src/features/books/view-book.tsx
+++ b/src/features/books/view-book.tsx
@@ -1,12 +1,14 @@
import { getUiState } from '@bearstudio/ui-state';
import { useQuery } from '@tanstack/react-query';
import { useTranslation } from 'react-i18next';
-import { Center, Divider, HStack, Stack, Text } from 'react-native-ficus-ui';
+import { View } from 'react-native';
import { api } from '@/lib/hey-api/api';
import { Card, CardBody } from '@/components/ui/card';
+import { Divider } from '@/components/ui/divider';
import { FullLoader } from '@/components/ui/full-loader';
+import { Text } from '@/components/ui/text';
import { BookCover } from '@/features/books/book-cover';
import { ViewTabContent } from '@/layout/view-tab-content';
@@ -31,70 +33,50 @@ export const ViewBook = (props: { bookId: string }) => {
.match('pending', () =>
+
-
-
-
+
+
+
{t('books:common.title')}
-
+
{data.title}
-
+
-
+
+
{t('books:common.author')}
-
+
{data.author}
-
+
-
+
+
{t('books:common.genre')}
-
+
{data.genre?.name ?? 'Unknown'}
-
+
-
+
+
{t('books:common.publisher')}
-
+
{data.publisher?.toString() ?? 'Unknown'}
-
+
-
-
-
+
+
+
))
.exhaustive()}
diff --git a/src/features/books/view-books.tsx b/src/features/books/view-books.tsx
index 6ced6737..04758e80 100644
--- a/src/features/books/view-books.tsx
+++ b/src/features/books/view-books.tsx
@@ -1,14 +1,17 @@
import { getUiState } from '@bearstudio/ui-state';
+import { FlashList } from '@shopify/flash-list';
import { useInfiniteQuery } from '@tanstack/react-query';
import { Link } from 'expo-router';
-import { ActivityIndicator } from 'react-native';
-import { FlashList, Text } from 'react-native-ficus-ui';
+import { useCallback } from 'react';
+import { ActivityIndicator, View } from 'react-native';
import { api } from '@/lib/hey-api/api';
+import { BookGetByIdResponse } from '@/lib/hey-api/generated';
-import { FullLoader } from '@/components/ui/full-loader';
+import { Skeleton } from '@/components/ui/skeleton';
+import { Text } from '@/components/ui/text';
-import { BookCover } from '@/features/books/book-cover';
+import { BookCover, COVER_HEIGHT } from '@/features/books/book-cover';
import { ViewTabContent } from '@/layout/view-tab-content';
export const ViewBooks = () => {
@@ -29,10 +32,39 @@ export const ViewBooks = () => {
});
});
+ const renderItem = useCallback(
+ ({ item }: { item: BookGetByIdResponse }) => (
+
+
+
{ui
- .match('pending', () =>
+ {Array.from({ length: 4 }, (_, i) => i).map((index) => (
+
+
+ ))}
+
+ ))
.match('error', () => <>)
.match('empty', () => There is no books )
.match('default', ({ data }) => (
@@ -41,20 +73,7 @@ export const ViewBooks = () => {
keyExtractor={(item) => item.id}
numColumns={2}
horizontal={false}
- renderItem={({ item }) => (
-
-
- form.setFieldValue('email', mockedEmail)}>
-
+
- {env.data?.isDev ? 'Dev mode' : 'Demo mode'}
-
-
+
+
You can login with{' '}
-
- {mockedEmail}
-
+ {mockedEmail}
@@ -67,29 +57,18 @@ export const LoginOtpHint = () => {
return (
form.setFieldValue('code', mockedOtp)}>
-
+
- {env.data?.isDev ? 'Dev mode' : 'Demo mode'}
-
-
+
+
Use the code{' '}
-
- {mockedOtp}
-
+ {mockedOtp}
diff --git a/src/features/home/view-home.tsx b/src/features/home/view-home.tsx
index 446623d9..5841225d 100644
--- a/src/features/home/view-home.tsx
+++ b/src/features/home/view-home.tsx
@@ -1,11 +1,14 @@
import appConfig from 'app.config';
import { Link } from 'expo-router';
import { useTranslation } from 'react-i18next';
-import { Button, HStack, Stack, Text } from 'react-native-ficus-ui';
+import { View } from 'react-native';
import { useShare } from '@/hooks/use-share';
import { IconShare2 } from '@/components/icons/generated';
+import { Icon } from '@/components/icons/icon';
+import { Button } from '@/components/ui/button';
+import { Text } from '@/components/ui/text';
import { MarketingBento } from '@/features/marketing/marketing-bento';
import { ViewTabContent } from '@/layout/view-tab-content';
@@ -16,39 +19,41 @@ export const ViewHome = () => {
const share = useShare();
return (
-
-
-
+
+
+
{t('home:welcome.title')}
- {t('home:welcome.description')}
-
-
+
+ {t('home:welcome.description')}
+
+
+
+
GitHub
+
{t('home:welcome.openIssue')}
share.open({
title: 'Github • Start UI [native]',
message: appConfig.githubUrl,
})
}
- isLoading={share.isPending}
>
-
-
+
);
diff --git a/src/features/marketing/marketing-bento.tsx b/src/features/marketing/marketing-bento.tsx
index 6a01019c..60b14ae1 100644
--- a/src/features/marketing/marketing-bento.tsx
+++ b/src/features/marketing/marketing-bento.tsx
@@ -1,7 +1,16 @@
-import { Linking, TouchableOpacity } from 'react-native';
-import { Box, Stack, Text } from 'react-native-ficus-ui';
+import { Linking, Pressable, StyleSheet, View } from 'react-native';
import { Image } from '@/components/ui/image';
+import { Text } from '@/components/ui/text';
+
+const tileStyles = StyleSheet.create({
+ base: {
+ width: '100%',
+ borderRadius: 8,
+ overflow: 'hidden',
+ backgroundColor: 'rgba(0,0,0,0.2)',
+ },
+});
const MarketingTile = ({
href,
@@ -21,34 +30,23 @@ const MarketingTile = ({
}
};
return (
- handleOpenUrl(href)}
accessibilityRole="link"
- style={{
- aspectRatio,
- width: '100%',
- borderRadius: 8,
- overflow: 'hidden',
- backgroundColor: 'rgba(0,0,0,0.2)',
- }}
+ style={[tileStyles.base, { aspectRatio }]}
>
-
+
);
};
export const MarketingBento = () => (
-
-
+
+
Shameless plug 😅 Remember that 🚀 Start UI is free and Open Source 😉
-
-
+
+
(
aspectRatio={1.45}
blurhash="L36kL=$|4TEQ~UxV4:NL=@oIIoWs"
/>
-
+
-
+
(
aspectRatio={0.7}
blurhash="SC8zlJs:0nxZ~6s,E2WB"
/>
-
-
-
-
-
+
+
+
);
diff --git a/src/features/theme/constants.ts b/src/features/theme/constants.ts
new file mode 100644
index 00000000..7e8170cc
--- /dev/null
+++ b/src/features/theme/constants.ts
@@ -0,0 +1,3 @@
+import appConfig from 'app.config';
+
+export const STORAGE_KEY_THEME = `${appConfig.scheme}-theme`;
diff --git a/src/features/theme/use-theme-sync.tsx b/src/features/theme/use-theme-sync.tsx
new file mode 100644
index 00000000..8477ceea
--- /dev/null
+++ b/src/features/theme/use-theme-sync.tsx
@@ -0,0 +1,22 @@
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import { useEffect } from 'react';
+import { Uniwind } from 'uniwind';
+
+import { STORAGE_KEY_THEME } from '@/features/theme/constants';
+
+/**
+ * Sync the theme from the AsyncStorage to the Uniwind theme
+ * @returns void
+ */
+export const useThemeSync = () => {
+ useEffect(() => {
+ AsyncStorage.getItem(STORAGE_KEY_THEME).then((stored) => {
+ const theme = (
+ stored === 'light' || stored === 'dark' || stored === 'system'
+ ? stored
+ : 'system'
+ ) as 'light' | 'dark' | 'system';
+ Uniwind.setTheme(theme);
+ });
+ }, []);
+};
diff --git a/src/features/theme/use-themed-style.tsx b/src/features/theme/use-themed-style.tsx
new file mode 100644
index 00000000..8b01bb5e
--- /dev/null
+++ b/src/features/theme/use-themed-style.tsx
@@ -0,0 +1,16 @@
+import { useUniwind } from 'uniwind';
+
+const neutral50 = '#fafafa';
+const neutral900 = '#171717';
+const neutral950 = '#0a0a0a';
+
+export const useThemedStyle = () => {
+ const { theme } = useUniwind();
+ const isDark = theme === 'dark';
+
+ return {
+ backgroundColor: isDark ? neutral950 : 'white',
+ color: isDark ? 'white' : neutral950,
+ sceneBackgroundColor: isDark ? neutral900 : neutral50,
+ };
+};
diff --git a/src/hooks/use-browser/docs.stories.tsx b/src/hooks/use-browser/docs.stories.tsx
index a73cecd4..0f5f5f0d 100644
--- a/src/hooks/use-browser/docs.stories.tsx
+++ b/src/hooks/use-browser/docs.stories.tsx
@@ -1,7 +1,7 @@
-import { Button } from 'react-native-ficus-ui';
-
import { useBrowser } from '@/hooks/use-browser';
+import { Button } from '@/components/ui/button';
+
export default {
title: 'Hooks/useBrowser',
};
diff --git a/src/hooks/use-disclosure.ts b/src/hooks/use-disclosure.ts
new file mode 100644
index 00000000..bc51fc78
--- /dev/null
+++ b/src/hooks/use-disclosure.ts
@@ -0,0 +1,11 @@
+import { useCallback, useState } from 'react';
+
+export function useDisclosure(defaultIsOpen = false) {
+ const [isOpen, setIsOpen] = useState(defaultIsOpen);
+
+ const onOpen = useCallback(() => setIsOpen(true), []);
+ const onClose = useCallback(() => setIsOpen(false), []);
+ const onToggle = useCallback(() => setIsOpen((prev) => !prev), []);
+
+ return { isOpen, onOpen, onClose, onToggle };
+}
diff --git a/src/hooks/use-share/docs.stories.tsx b/src/hooks/use-share/docs.stories.tsx
index 094cae95..c85c35b4 100644
--- a/src/hooks/use-share/docs.stories.tsx
+++ b/src/hooks/use-share/docs.stories.tsx
@@ -1,7 +1,7 @@
-import { Button } from 'react-native-ficus-ui';
-
import { useShare } from '@/hooks/use-share';
+import { Button } from '@/components/ui/button';
+
export default {
title: 'Hooks/useShare',
};
diff --git a/src/hooks/use-theme-mode.tsx b/src/hooks/use-theme-mode.tsx
deleted file mode 100644
index 0447aef7..00000000
--- a/src/hooks/use-theme-mode.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import AsyncStorage from '@react-native-async-storage/async-storage';
-import { useQuery } from '@tanstack/react-query';
-import z from 'zod';
-
-import { STORAGE_KEY_THEME } from '@/lib/ficus-ui/theme';
-
-export const themeQueryKey = ['app-theme', STORAGE_KEY_THEME];
-
-const zTheme = () => z.enum(['system', 'light', 'dark']).default('system');
-
-export const useThemeMode = () => {
- return useQuery({
- queryKey: themeQueryKey,
- queryFn: () =>
- AsyncStorage.getItem(STORAGE_KEY_THEME).then((value) =>
- zTheme().parse(value)
- ),
- });
-};
diff --git a/src/hooks/use-themed-style.tsx b/src/hooks/use-themed-style.tsx
deleted file mode 100644
index 5f6f043c..00000000
--- a/src/hooks/use-themed-style.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { useColorModeValue } from 'react-native-ficus-ui';
-
-import theme from '@/lib/ficus-ui/theme';
-
-export const useThemedStyle = () => {
- return useColorModeValue(
- {
- backgroundColor: 'white',
- color: theme.colors.neutral[950],
- sceneBackgroundColor: theme.colors.neutral[50],
- },
- {
- backgroundColor: theme.colors.neutral[950],
- color: 'white',
- sceneBackgroundColor: theme.colors.neutral[900],
- }
- );
-};
diff --git a/src/layout/view-safe-content.tsx b/src/layout/view-safe-content.tsx
index 493532c4..ffba395d 100644
--- a/src/layout/view-safe-content.tsx
+++ b/src/layout/view-safe-content.tsx
@@ -1,11 +1,15 @@
-import { ComponentProps } from 'react';
-import { ficus } from 'react-native-ficus-ui';
import { SafeAreaView } from 'react-native-safe-area-context';
+import { withUniwind } from 'uniwind';
-const FicusSafeAreaView = ficus(SafeAreaView);
+import { cn } from '@/lib/tailwind/utils';
-export const ViewSafeContent = (
- props: ComponentProps
-) => {
- return ;
+
+const UniwindSafeAreaView = withUniwind(SafeAreaView);
+
+export const ViewSafeContent = ({
+ className,
+ ...props
+}: ViewSafeContentProps) => {
+ return & {
+ withHeader?: boolean;
+ gap?: number;
+};
+
export const ViewTabContent = ({
withHeader = isApple && WITH_NATIVE_TABS,
children,
+ contentContainerStyle,
+ gap = 8,
...props
-}: BoxProps & { withHeader?: boolean }) => {
+}: ViewTabContentProps) => {
const insets = useSafeAreaInsets();
return (
-
{children}
-
+ ,
- Dict
->({
- defaultProps: { variant: '@primary', size: 'md' },
- sizes: {
- xs: { h: 16, fontSize: '2xs', fontWeight: 'medium' },
- sm: { h: 20, fontSize: 'xs', fontWeight: 'medium' },
- md: { h: 24, fontSize: 'sm', fontWeight: 'medium' },
- lg: { h: 32, fontSize: 'md', fontWeight: 'medium' },
- },
- baseStyle: {
- px: 8,
- textTransform: 'none',
- borderRadius: 'md',
- },
- variants: {
- '@primary': {
- backgroundColor: 'brand.900',
- color: 'white',
- _dark: {
- backgroundColor: 'brand.50',
- color: 'brand.900',
- },
- },
- '@secondary': {
- backgroundColor: 'white',
- color: 'brand.950',
- _dark: {
- backgroundColor: 'brand.800',
- color: 'brand.50',
- },
- },
- '@error': {
- backgroundColor: 'negative.100',
- color: 'negative.800',
- },
- '@warning': {
- backgroundColor: 'warning.100',
- color: 'warning.800',
- },
- '@success': {
- backgroundColor: 'positive.100',
- color: 'positive.600',
- },
- },
-});
diff --git a/src/lib/ficus-ui/components/button.ts b/src/lib/ficus-ui/components/button.ts
deleted file mode 100644
index 0a9b523e..00000000
--- a/src/lib/ficus-ui/components/button.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-import { ButtonProps, defineStyleConfig, Dict } from 'react-native-ficus-ui';
-
-export default defineStyleConfig<
- ButtonProps,
- Dict,
- Dict
->({
- defaultProps: { variant: '@primary', size: 'lg' },
- sizes: {
- xs: { h: 28, fontSize: 'xs', fontWeight: 'medium' },
- sm: { h: 32, fontSize: 'sm', fontWeight: 'medium' },
- md: { h: 36, fontSize: 'sm', fontWeight: 'medium' },
- lg: { h: 40, fontSize: 'sm', fontWeight: 'medium' },
- },
- baseStyle: {
- gap: 4,
- borderRadius: 'md',
- borderColor: 'brand.200',
- _disabled: { opacity: 0.7 },
- _dark: {
- borderColor: 'brand.600',
- },
- },
- variants: {
- '@primary': {
- backgroundColor: 'brand.900',
- color: 'white',
- _dark: {
- backgroundColor: 'brand.50',
- color: 'brand.900',
- },
- },
- '@secondary': {
- backgroundColor: 'white',
- color: 'brand.950',
- borderWidth: 1,
- _dark: {
- backgroundColor: 'brand.800',
- color: 'brand.50',
- },
- },
- '@destructive': {
- backgroundColor: 'negative.600',
- color: 'white',
- },
- '@ghost': {
- backgroundColor: 'transparent',
- color: 'neutral.950',
- _dark: { color: 'neutral.100' },
- },
- '@link': {
- px: 0,
- backgroundColor: 'transparent',
- color: 'neutral.950',
- _dark: { color: 'neutral.100' },
- },
- },
-});
diff --git a/src/lib/ficus-ui/components/divider.ts b/src/lib/ficus-ui/components/divider.ts
deleted file mode 100644
index fe4f4856..00000000
--- a/src/lib/ficus-ui/components/divider.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { defineStyleConfig, Dict, DividerProps } from 'react-native-ficus-ui';
-
-export default defineStyleConfig<
- DividerProps,
- Dict,
- Dict
->({
- baseStyle: { color: 'neutral.200', _dark: { color: 'neutral.800' } },
- defaultProps: {},
- variants: {},
- sizes: {},
-});
diff --git a/src/lib/ficus-ui/components/index.ts b/src/lib/ficus-ui/components/index.ts
deleted file mode 100644
index 036d343d..00000000
--- a/src/lib/ficus-ui/components/index.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import Badge from './badge';
-import Button from './button';
-import Divider from './divider';
-import Input from './input';
-import { pinInputFieldTheme, pinInputTheme } from './pin-input';
-import Text from './text';
-
-export default {
- Badge,
- Button,
- Divider,
- Input,
- Text,
- PinInput: pinInputTheme,
- PinInputField: pinInputFieldTheme,
-};
diff --git a/src/lib/ficus-ui/components/input.ts b/src/lib/ficus-ui/components/input.ts
deleted file mode 100644
index 5f94210d..00000000
--- a/src/lib/ficus-ui/components/input.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { defineStyleConfig, Dict, InputProps } from 'react-native-ficus-ui';
-
-export default defineStyleConfig<
- InputProps,
- Dict,
- Dict
->({
- defaultProps: { variant: 'default', size: 'lg' },
- baseStyle: {
- borderRadius: 'md',
- _disabled: { opacity: 0.7 },
- _focused: { borderWidth: 2 },
- },
- sizes: { sm: { h: 32 }, md: { h: 36 }, lg: { h: 40 } },
- variants: {
- default: {
- borderWidth: 1,
- borderColor: 'neutral.300',
- placeholderTextColor: 'neutral.600',
- backgroundColor: 'white',
- _dark: {
- borderColor: 'neutral.600',
- backgroundColor: 'neutral.950',
- placeholderTextColor: 'neutral.300',
- },
- },
- },
-});
diff --git a/src/lib/ficus-ui/components/pin-input.ts b/src/lib/ficus-ui/components/pin-input.ts
deleted file mode 100644
index c9f05de4..00000000
--- a/src/lib/ficus-ui/components/pin-input.ts
+++ /dev/null
@@ -1,69 +0,0 @@
-import {
- defineStyle,
- defineStyleConfig,
- PinInputProps,
-} from 'react-native-ficus-ui';
-
-const baseStyle = defineStyle({
- alignSelf: 'flex-start',
- justifyContent: 'flex-start',
-});
-
-const variantOutline = defineStyle(() => {
- return {};
-});
-
-const variants = { outline: variantOutline };
-
-export const pinInputTheme = defineStyleConfig({
- baseStyle,
- variants,
- defaultProps: { variant: 'outline' },
-});
-
-const fieldBaseStyle = defineStyle({
- borderRadius: 'md',
- alignSelf: 'flex-start',
- fontWeight: 'bold',
- fontSize: 'md',
- bg: 'white',
- color: 'neutral.600',
- shadow: 0,
- mr: 'sm',
- justifyContent: 'center',
- alignItems: 'center',
- _disabled: { opacity: 0.6 },
- _dark: { bg: 'neutral.950', color: 'neutral.300' },
-});
-
-const fieldVariantOutline = defineStyle(() => {
- return {
- borderWidth: 1,
- borderStyle: 'solid',
- borderColor: 'neutral.300',
- colorScheme: 'neutral',
- _focused: {
- borderWidth: 2,
- borderStyle: 'solid',
- borderColor: 'neutral.300',
- _dark: { borderColor: 'neutral.600' },
- },
- _dark: { borderColor: 'neutral.600' },
- };
-});
-
-const fieldVariants = { outline: fieldVariantOutline };
-
-const sizes = {
- xs: defineStyle({ width: 24, height: 24 }),
- sm: defineStyle({ width: 32, height: 32 }),
- md: defineStyle({ width: 40, height: 40 }),
- lg: defineStyle({ width: 48, height: 48 }),
-};
-
-export const pinInputFieldTheme = defineStyleConfig({
- baseStyle: fieldBaseStyle,
- variants: fieldVariants,
- sizes,
- defaultProps: { variant: 'outline', size: 'md' },
-});
diff --git a/src/lib/ficus-ui/components/text.ts b/src/lib/ficus-ui/components/text.ts
deleted file mode 100644
index c0782414..00000000
--- a/src/lib/ficus-ui/components/text.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { defineStyleConfig, Dict, TextProps } from 'react-native-ficus-ui';
-
-export default defineStyleConfig, Dict>({
- baseStyle: { color: 'neutral.900', _dark: { color: 'neutral.100' } },
- variants: {
- muted: {
- color: 'neutral.600',
- _dark: { color: 'neutral.400' },
- },
- },
-});
diff --git a/src/lib/ficus-ui/foundations/colors.ts b/src/lib/ficus-ui/foundations/colors.ts
deleted file mode 100644
index b71b76aa..00000000
--- a/src/lib/ficus-ui/foundations/colors.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import tailwindColors from './tailwind-colors';
-
-export default {
- // Update me with other Tailwind colors or with https://smart-swatch.netlify.app/
- brand: tailwindColors.neutral,
- neutral: tailwindColors.neutral,
- positive: tailwindColors.green,
- negative: tailwindColors.red,
- warning: tailwindColors.amber,
- info: tailwindColors.sky,
-};
diff --git a/src/lib/ficus-ui/foundations/font-sizes.ts b/src/lib/ficus-ui/foundations/font-sizes.ts
deleted file mode 100644
index 9af0ac4b..00000000
--- a/src/lib/ficus-ui/foundations/font-sizes.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-export default {
- '3xs': 8,
- '2xs': 10,
- xs: 12,
- sm: 14,
- md: 16,
- lg: 18,
- xl: 20,
- '2xl': 24,
- '3xl': 30,
- '4xl': 36,
- '5xl': 48,
- '6xl': 60,
-};
diff --git a/src/lib/ficus-ui/foundations/fonts.ts b/src/lib/ficus-ui/foundations/fonts.ts
deleted file mode 100644
index 3601abd2..00000000
--- a/src/lib/ficus-ui/foundations/fonts.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-export default {
- fontFamily: {},
- fontWeights: {
- hairline: 100,
- thin: 200,
- light: 300,
- normal: 400,
- medium: 500,
- semibold: 600,
- bold: 700,
- extrabold: 800,
- black: 900,
- },
-};
diff --git a/src/lib/ficus-ui/foundations/index.ts b/src/lib/ficus-ui/foundations/index.ts
deleted file mode 100644
index f6f5ab76..00000000
--- a/src/lib/ficus-ui/foundations/index.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Dict, Theme } from 'react-native-ficus-ui';
-
-import colors from '@/lib/ficus-ui/foundations/colors';
-import fontSizes from '@/lib/ficus-ui/foundations/font-sizes';
-import fonts from '@/lib/ficus-ui/foundations/fonts';
-
-export default {
- colors,
- fonts,
- fontSizes,
-} satisfies {
- colors: Dict;
- fonts: Theme['fonts'];
- fontSizes: Theme['fontSizes'];
-};
diff --git a/src/lib/ficus-ui/foundations/tailwind-colors.ts b/src/lib/ficus-ui/foundations/tailwind-colors.ts
deleted file mode 100644
index 89c676f6..00000000
--- a/src/lib/ficus-ui/foundations/tailwind-colors.ts
+++ /dev/null
@@ -1,288 +0,0 @@
-export default {
- rose: {
- '50': '#fff1f2',
- '100': '#ffe4e6',
- '200': '#ffccd3',
- '300': '#ffa1ad',
- '400': '#ff637e',
- '500': '#ff2056',
- '600': '#ec003f',
- '700': '#c70036',
- '800': '#a50036',
- '900': '#8b0836',
- '950': '#4d0218',
- },
- pink: {
- '50': '#fdf2f8',
- '100': '#fce7f3',
- '200': '#fccee8',
- '300': '#fda5d5',
- '400': '#fb64b6',
- '500': '#f6339a',
- '600': '#e60076',
- '700': '#c6005c',
- '800': '#a3004c',
- '900': '#861043',
- '950': '#510424',
- },
- fuchsia: {
- '50': '#fdf4ff',
- '100': '#fae8ff',
- '200': '#f6cfff',
- '300': '#f4a8ff',
- '400': '#ed6aff',
- '500': '#e12afb',
- '600': '#c800de',
- '700': '#a800b7',
- '800': '#8a0194',
- '900': '#721378',
- '950': '#4b004f',
- },
- purple: {
- '50': '#faf5ff',
- '100': '#f3e8ff',
- '200': '#e9d4ff',
- '300': '#dab2ff',
- '400': '#c27aff',
- '500': '#ad46ff',
- '600': '#9810fa',
- '700': '#8200db',
- '800': '#6e11b0',
- '900': '#59168b',
- '950': '#3c0366',
- },
- violet: {
- '50': '#f5f3ff',
- '100': '#ede9fe',
- '200': '#ddd6ff',
- '300': '#c4b4ff',
- '400': '#a684ff',
- '500': '#8e51ff',
- '600': '#7f22fe',
- '700': '#7008e7',
- '800': '#5d0ec0',
- '900': '#4d179a',
- '950': '#2f0d68',
- },
- indigo: {
- '50': '#eef2ff',
- '100': '#e0e7ff',
- '200': '#c6d2ff',
- '300': '#a3b3ff',
- '400': '#7c86ff',
- '500': '#615fff',
- '600': '#4f39f6',
- '700': '#432dd7',
- '800': '#372aac',
- '900': '#312c85',
- '950': '#1e1a4d',
- },
- blue: {
- '50': '#eff6ff',
- '100': '#dbeafe',
- '200': '#bedbff',
- '300': '#8ec5ff',
- '400': '#51a2ff',
- '500': '#2b7fff',
- '600': '#155dfc',
- '700': '#1447e6',
- '800': '#193cb8',
- '900': '#1c398e',
- '950': '#162456',
- },
- sky: {
- '50': '#f0f9ff',
- '100': '#dff2fe',
- '200': '#b8e6fe',
- '300': '#74d4ff',
- '400': '#00bcff',
- '500': '#00a6f4',
- '600': '#0084d1',
- '700': '#0069a8',
- '800': '#00598a',
- '900': '#024a70',
- '950': '#052f4a',
- },
- cyan: {
- '50': '#ecfeff',
- '100': '#cefafe',
- '200': '#a2f4fd',
- '300': '#53eafd',
- '400': '#00d3f2',
- '500': '#00b8db',
- '600': '#0092b8',
- '700': '#007595',
- '800': '#005f78',
- '900': '#104e64',
- '950': '#053345',
- },
- teal: {
- '50': '#f0fdfa',
- '100': '#cbfbf1',
- '200': '#96f7e4',
- '300': '#46ecd5',
- '400': '#00d5be',
- '500': '#00bba7',
- '600': '#009689',
- '700': '#00786f',
- '800': '#005f5a',
- '900': '#0b4f4a',
- '950': '#022f2e',
- },
- emerald: {
- '50': '#ecfdf5',
- '100': '#d0fae5',
- '200': '#a4f4cf',
- '300': '#5ee9b5',
- '400': '#00d492',
- '500': '#00bc7d',
- '600': '#009966',
- '700': '#007a55',
- '800': '#006045',
- '900': '#004f3b',
- '950': '#002c22',
- },
- green: {
- '50': '#f0fdf4',
- '100': '#dcfce7',
- '200': '#b9f8cf',
- '300': '#7bf1a8',
- '400': '#05df72',
- '500': '#00c950',
- '600': '#00a63e',
- '700': '#008236',
- '800': '#016630',
- '900': '#0d542b',
- '950': '#032e15',
- },
- lime: {
- '50': '#f7fee7',
- '100': '#ecfcca',
- '200': '#d8f999',
- '300': '#bbf451',
- '400': '#9ae600',
- '500': '#7ccf00',
- '600': '#5ea500',
- '700': '#497d00',
- '800': '#3c6300',
- '900': '#35530e',
- '950': '#192e03',
- },
- yellow: {
- '50': '#fefce8',
- '100': '#fef9c2',
- '200': '#fff085',
- '300': '#ffdf20',
- '400': '#fdc700',
- '500': '#f0b100',
- '600': '#d08700',
- '700': '#a65f00',
- '800': '#894b00',
- '900': '#733e0a',
- '950': '#432004',
- },
- amber: {
- '50': '#fffbeb',
- '100': '#fef3c6',
- '200': '#fee685',
- '300': '#ffd230',
- '400': '#ffb900',
- '500': '#fe9a00',
- '600': '#e17100',
- '700': '#bb4d00',
- '800': '#973c00',
- '900': '#7b3306',
- '950': '#461901',
- },
- orange: {
- '50': '#fff7ed',
- '100': '#ffedd4',
- '200': '#ffd6a7',
- '300': '#ffb86a',
- '400': '#ff8904',
- '500': '#ff6900',
- '600': '#f54900',
- '700': '#ca3500',
- '800': '#9f2d00',
- '900': '#7e2a0c',
- '950': '#441306',
- },
- red: {
- '50': '#fef2f2',
- '100': '#ffe2e2',
- '200': '#ffc9c9',
- '300': '#ffa2a2',
- '400': '#ff6467',
- '500': '#fb2c36',
- '600': '#e7000b',
- '700': '#c10007',
- '800': '#9f0712',
- '900': '#82181a',
- '950': '#460809',
- },
- slate: {
- '50': '#f8fafc',
- '100': '#f1f5f9',
- '200': '#e2e8f0',
- '300': '#cad5e2',
- '400': '#90a1b9',
- '500': '#62748e',
- '600': '#45556c',
- '700': '#314158',
- '800': '#1d293d',
- '900': '#0f172b',
- '950': '#020618',
- },
- gray: {
- '50': '#f9fafb',
- '100': '#f3f4f6',
- '200': '#e5e7eb',
- '300': '#d1d5dc',
- '400': '#99a1af',
- '500': '#6a7282',
- '600': '#4a5565',
- '700': '#364153',
- '800': '#1e2939',
- '900': '#101828',
- '950': '#030712',
- },
- zinc: {
- '50': '#fafafa',
- '100': '#f4f4f5',
- '200': '#e4e4e7',
- '300': '#d4d4d8',
- '400': '#9f9fa9',
- '500': '#71717b',
- '600': '#52525c',
- '700': '#3f3f46',
- '800': '#27272a',
- '900': '#18181b',
- '950': '#09090b',
- },
- neutral: {
- '50': '#fafafa',
- '100': '#f5f5f5',
- '200': '#e5e5e5',
- '300': '#d4d4d4',
- '400': '#a1a1a1',
- '500': '#737373',
- '600': '#525252',
- '700': '#404040',
- '800': '#262626',
- '900': '#171717',
- '950': '#0a0a0a',
- },
- stone: {
- '50': '#fafaf9',
- '100': '#f5f5f4',
- '200': '#e7e5e4',
- '300': '#d6d3d1',
- '400': '#a6a09b',
- '500': '#79716b',
- '600': '#57534d',
- '700': '#44403b',
- '800': '#292524',
- '900': '#1c1917',
- '950': '#0c0a09',
- },
-};
diff --git a/src/lib/ficus-ui/theme.ts b/src/lib/ficus-ui/theme.ts
deleted file mode 100644
index 4f2a4ecc..00000000
--- a/src/lib/ficus-ui/theme.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import appConfig from 'app.config';
-
-import components from '@/lib/ficus-ui/components';
-import foundations from '@/lib/ficus-ui/foundations';
-
-export const STORAGE_KEY_THEME = `${appConfig.scheme}-theme`;
-
-export default {
- name: STORAGE_KEY_THEME,
- ...foundations,
- components,
-};
diff --git a/src/lib/tailwind/utils.ts b/src/lib/tailwind/utils.ts
new file mode 100644
index 00000000..9ad0df42
--- /dev/null
+++ b/src/lib/tailwind/utils.ts
@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+ return twMerge(clsx(inputs));
+}
diff --git a/src/lib/tanstack-form/components/form-field-error.tsx b/src/lib/tanstack-form/components/form-field-error.tsx
index ce3bf584..5de4178f 100644
--- a/src/lib/tanstack-form/components/form-field-error.tsx
+++ b/src/lib/tanstack-form/components/form-field-error.tsx
@@ -1,12 +1,14 @@
import { useStore } from '@tanstack/react-form';
-import { HStack, Text, TextProps } from 'react-native-ficus-ui';
+import { View } from 'react-native';
import { FieldContextMeta } from '@/lib/tanstack-form/components/form-field';
import { useFieldContext } from '@/lib/tanstack-form/context';
import { IconAlertCircle } from '@/components/icons/generated';
+import { Icon } from '@/components/icons/icon';
+import { Text } from '@/components/ui/text';
-export const FormFieldError = (props: TextProps) => {
+export const FormFieldError = (props: React.ComponentProps) => {
const field = useFieldContext();
const meta = useStore(field.store, (state) => {
@@ -22,18 +24,11 @@ export const FormFieldError = (props: TextProps) => {
}
return (
-
-
+
+
{meta.errorMessage}
-
+
);
};
diff --git a/src/lib/tanstack-form/components/form-field-helper.tsx b/src/lib/tanstack-form/components/form-field-helper.tsx
index f76393df..9684187e 100644
--- a/src/lib/tanstack-form/components/form-field-helper.tsx
+++ b/src/lib/tanstack-form/components/form-field-helper.tsx
@@ -1,13 +1,7 @@
-import { Text, TextProps } from 'react-native-ficus-ui';
+import { Text } from '@/components/ui/text';
-export const FormFieldHelper = (props: TextProps) => {
+export const FormFieldHelper = (props: React.ComponentProps) => {
return (
- ;
export const FormFieldLabel = (props: FormFieldLabelProps) => {
- return (
- {props.children} ;
+ return {props.children} ;
};
diff --git a/src/lib/tanstack-form/components/form-submit.tsx b/src/lib/tanstack-form/components/form-submit.tsx
index 9ca14363..f57968ec 100644
--- a/src/lib/tanstack-form/components/form-submit.tsx
+++ b/src/lib/tanstack-form/components/form-submit.tsx
@@ -1,16 +1,21 @@
import { ActivityIndicator } from 'react-native';
-import { Button, ButtonProps } from 'react-native-ficus-ui';
+import { cn } from '@/lib/tailwind/utils';
import { useFormContext } from '@/lib/tanstack-form/context';
+import { Button, type ButtonProps } from '@/components/ui/button';
+
export default function FormSubmit({
submitting,
children,
+ full,
+ className,
...props
}: Readonly<
ButtonProps & {
submitting?: React.ReactElement;
children: React.ReactNode;
+ full?: boolean;
}
>) {
const form = useFormContext();
@@ -18,10 +23,10 @@ export default function FormSubmit({
[state.canSubmit, state.isSubmitting]}>
{([canSubmit, isSubmitting]) => (
form.handleSubmit()}
+ {...props}
>
{isSubmitting ? (submitting ??
diff --git a/src/locales/en/auth.json b/src/locales/en/auth.json
index ec24b957..891dbbef 100644
--- a/src/locales/en/auth.json
+++ b/src/locales/en/auth.json
@@ -3,7 +3,7 @@
"title": "Login to your account",
"subtitle": "Enter your email to login to your account",
"email": { "placeholder": "Email" },
- "loginWithEmail": "Login with email",
+ "loginWithEmail": "Continue with email",
"or": "or",
"loginWithGithub": "Login with GitHub"
},
diff --git a/tailwind.config.ts b/tailwind.config.ts
new file mode 100644
index 00000000..5a6afb61
--- /dev/null
+++ b/tailwind.config.ts
@@ -0,0 +1,5 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+ content: ['./src/**/*.{js,jsx,ts,tsx}'],
+ plugins: [],
+};
diff --git a/tsconfig.json b/tsconfig.json
index 258eb210..34faa577 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -18,7 +18,8 @@
"plugins": [
{
"name": "ts-plugin-sort-import-suggestions",
- "moveUpPatterns": ["@/", "\\.{1,2}/"]
+ "moveUpPatterns": ["@/", "\\.{1,2}/"],
+ "moveDownPatterns": ["lucide-react-native"]
}
]
},
diff --git a/uniwind-types.d.ts b/uniwind-types.d.ts
new file mode 100644
index 00000000..cc099419
--- /dev/null
+++ b/uniwind-types.d.ts
@@ -0,0 +1,10 @@
+// NOTE: This file is generated by uniwind and it should not be edited manually.
+/// 
