nx-react-native-cli 2.7.0 → 3.0.0

package/templates/shared/apps/mobile/src/components/atoms/DateTextInput/date-text-input.component.tsx

@@ -0,0 +1,218 @@
+import dayjs from 'dayjs';
+import customParseFormat from 'dayjs/plugin/customParseFormat';
+import React, { ReactNode, Ref, useCallback, useEffect, useRef, useState } from 'react';
+import { Pressable, StyleProp, TextInput, ViewStyle } from 'react-native';
+
+import { Typography } from '@/components/atoms/Typography';
+import CONFIG from '@/config';
+import {
+  defaultInputContainerStyle,
+  defaultInputTextStyle,
+  focusedInputStyle,
+  tw,
+} from '@/tailwind';
+
+dayjs.extend(customParseFormat);
+
+const DATE_FORMAT = 'MM/DD/YYYY';
+const GUIDE_TEMPLATE = 'MM/DD/YYYY';
+const MAX_DIGITS = 8;
+const MONTH_SEPARATOR_INDEX = 2;
+const DAY_SEPARATOR_INDEX = 4;
+
+const fontFamily = CONFIG.IS_IOS ? { fontFamily: 'Menlo' } : { fontFamily: 'monospace' };
+
+type Props = {
+  error?: string;
+  onChange: (date: Date | undefined) => void;
+  onValidationError?: (error: string | undefined) => void;
+  ref?: Ref<TextInput>;
+  renderRight?: (date: Date) => ReactNode;
+  value: Date | undefined;
+};
+
+const MONTH_FIRST_DIGIT_INDEX = 0;
+const MONTH_SECOND_DIGIT_INDEX = 1;
+const DAY_FIRST_DIGIT_INDEX = 2;
+const DAY_SECOND_DIGIT_INDEX = 3;
+const YEAR_FIRST_DIGIT_INDEX = 4;
+const MAX_MONTH_FIRST_DIGIT = 1;
+const MAX_DAY_FIRST_DIGIT = 3;
+
+function isDigitValid(digit: string, index: number, previous: string): boolean {
+  const d = Number(digit);
+
+  if (index === MONTH_FIRST_DIGIT_INDEX) {
+    return d <= MAX_MONTH_FIRST_DIGIT;
+  }
+
+  if (index === MONTH_SECOND_DIGIT_INDEX) {
+    return previous[0] === '0' ? d >= 1 : d <= MONTH_SEPARATOR_INDEX;
+  }
+
+  if (index === DAY_FIRST_DIGIT_INDEX) {
+    return d <= MAX_DAY_FIRST_DIGIT;
+  }
+
+  if (index === DAY_SECOND_DIGIT_INDEX) {
+    return previous[MONTH_SEPARATOR_INDEX] === '3' ? d <= 1 : d >= 0;
+  }
+
+  if (index === YEAR_FIRST_DIGIT_INDEX) {
+    return d === 1 || d === MONTH_SEPARATOR_INDEX;
+  }
+
+  return true;
+}
+
+function filterValidDigits(raw: string): string {
+  let result = '';
+
+  for (let i = 0; i < raw.length && result.length < MAX_DIGITS; i += 1) {
+    if (isDigitValid(raw[i], result.length, result)) {
+      result += raw[i];
+    }
+  }
+
+  return result;
+}
+
+function extractDigits(date: Date | undefined): string {
+  if (!date) {
+    return '';
+  }
+
+  return dayjs(date).format(DATE_FORMAT).replace(/\D/g, '');
+}
+
+function buildFilledPortion(digits: string): string {
+  let result = '';
+
+  for (let i = 0; i < digits.length && i < MAX_DIGITS; i += 1) {
+    if (i === MONTH_SEPARATOR_INDEX || i === DAY_SEPARATOR_INDEX) {
+      result += '/';
+    }
+    result += digits[i];
+  }
+
+  return result;
+}
+
+function buildGuideSuffix(digits: string): string {
+  const filled = buildFilledPortion(digits);
+
+  return GUIDE_TEMPLATE.slice(filled.length);
+}
+
+function parseDate(digits: string): Date | undefined {
+  if (digits.length !== MAX_DIGITS) {
+    return undefined;
+  }
+
+  const masked = buildFilledPortion(digits);
+  const parsed = dayjs(masked, DATE_FORMAT, true);
+
+  if (parsed.isValid()) {
+    return parsed.toDate();
+  }
+
+  return undefined;
+}
+
+export function DateTextInput(props: Props) {
+  const { error, onChange, onValidationError, ref, renderRight, value } = props;
+  const [digits, setDigits] = useState(() => extractDigits(value));
+  const [isFocused, setIsFocused] = useState(false);
+  const [invalidDateError, setInvalidDateError] = useState<string | undefined>();
+  const inputRef = useRef<TextInput>(null);
+
+  useEffect(() => {
+    if (!ref) {
+      return;
+    }
+
+    if (typeof ref === 'function') {
+      ref(inputRef.current);
+    } else {
+      (ref as React.MutableRefObject<TextInput | null>).current = inputRef.current;
+    }
+  }, [ref]);
+
+  const filledPortion = buildFilledPortion(digits);
+  const guideSuffix = buildGuideSuffix(digits);
+  const parsedDate = parseDate(digits);
+  const displayError = invalidDateError || error;
+
+  const containerStyle: StyleProp<ViewStyle> = [
+    defaultInputContainerStyle,
+    tw`dark:border-divider dark:bg-surface items-center`,
+    focusedInputStyle(isFocused),
+    displayError && tw`border-red-500`,
+  ];
+
+  const handleChangeText = useCallback(
+    (text: string) => {
+      const rawDigits = text.replace(/\D/g, '');
+      const newDigits = filterValidDigits(rawDigits);
+      setDigits(newDigits);
+
+      if (newDigits.length === MAX_DIGITS) {
+        const masked = buildFilledPortion(newDigits);
+        const parsed = dayjs(masked, DATE_FORMAT, true);
+
+        if (parsed.isValid()) {
+          setInvalidDateError(undefined);
+          onValidationError?.(undefined);
+          onChange(parsed.toDate());
+
+          return;
+        }
+
+        const errorMsg = 'Please enter a valid date';
+        setInvalidDateError(errorMsg);
+        onValidationError?.(errorMsg);
+      } else {
+        setInvalidDateError(undefined);
+        onValidationError?.(undefined);
+      }
+
+      onChange(undefined);
+    },
+    [onChange, onValidationError],
+  );
+
+  const handleBlur = useCallback(() => {
+    setIsFocused(false);
+  }, []);
+
+  const handleFocus = useCallback(() => {
+    setIsFocused(true);
+  }, []);
+
+  const handlePress = useCallback(() => {
+    inputRef.current?.focus();
+  }, []);
+
+  return (
+    <Pressable style={containerStyle} onPress={handlePress}>
+      <TextInput
+        ref={inputRef}
+        keyboardType="number-pad"
+        style={[
+          defaultInputTextStyle,
+          tw`dark:text-foreground`,
+          { ...fontFamily, opacity: 0, position: 'absolute' },
+        ]}
+        value={digits}
+        onBlur={handleBlur}
+        onChangeText={handleChangeText}
+        onFocus={handleFocus}
+      />
+      <Typography style={[defaultInputTextStyle, tw`dark:text-foreground`, fontFamily]}>
+        {filledPortion}
+        <Typography style={[tw`text-placeholder`, { ...fontFamily }]}>{guideSuffix}</Typography>
+      </Typography>
+      {parsedDate && renderRight?.(parsedDate)}
+    </Pressable>
+  );
+}

package/templates/shared/apps/mobile/src/components/atoms/DateTextInput/index.ts

@@ -0,0 +1 @@
+export * from './date-text-input.component';

package/templates/shared/apps/mobile/src/components/atoms/Divider/divider-component.tsx

@@ -9,5 +9,5 @@ type Props = DefaultComponentProps & {};
 export function Divider(props: Props) {
   const { style } = props;
 
-  return <View style={[tw`h-[1px] w-full bg-gray-200`, style]}></View>;
+  return <View style={[tw`dark:bg-divider h-[1px] w-full bg-gray-200`, style]}></View>;
 }

package/templates/shared/apps/mobile/src/components/atoms/GradientBackground/gradient-background.component.tsx

@@ -0,0 +1,45 @@
+/* eslint-disable no-magic-numbers */
+import { Canvas, Fill, LinearGradient, vec } from '@shopify/react-native-skia';
+import React from 'react';
+import { StyleSheet, useWindowDimensions } from 'react-native';
+
+import { useLocalStorageStore } from '@/stores';
+import { colors } from '@/tailwind';
+
+type Props = {
+  variant?: 'bottomSheet' | 'login' | 'welcome';
+};
+
+const DARK_GRADIENTS: Record<string, string[]> = {
+  bottomSheet: [colors.sheet, colors.background],
+  login: [colors.secondary[950], colors.background, colors.secondary[950]],
+  welcome: [colors.background, colors.secondary[950], colors.background],
+};
+
+const LIGHT_GRADIENTS: Record<string, string[]> = {
+  bottomSheet: [colors.gray[100], colors.white],
+  login: [colors.gray[50], colors.white, colors.gray[50]],
+  welcome: [colors.white, colors.gray[50], colors.white],
+};
+
+export function GradientBackground(props: Props) {
+  const { variant = 'login' } = props;
+  const colorScheme = useLocalStorageStore((s) => s.colorScheme);
+  const isDark = colorScheme === 'dark';
+  const { height, width } = useWindowDimensions();
+
+  const gradientColors = isDark ? DARK_GRADIENTS[variant] : LIGHT_GRADIENTS[variant];
+
+  return (
+    <Canvas style={StyleSheet.absoluteFill}>
+      {/* Base linear gradient */}
+      <Fill>
+        <LinearGradient
+          colors={gradientColors}
+          end={vec(width / 2, height)}
+          start={vec(width / 2, 0)}
+        />
+      </Fill>
+    </Canvas>
+  );
+}

package/templates/shared/apps/mobile/src/components/atoms/GradientBackground/index.ts

@@ -0,0 +1 @@
+export * from './gradient-background.component';

package/templates/shared/apps/mobile/src/components/atoms/InputLayout/input-layout.component.tsx

@@ -9,24 +9,32 @@ type Props = DefaultComponentProps & {
   children?: React.ReactNode;
   isRequired?: boolean;
   label?: string;
+  subtitle?: string;
   textStyle?: StyleProp<TextStyle>;
 };
 
 export function InputLayout(props: Props) {
-  const { children, error, isRequired, label, style, textStyle } = props;
+  const { children, error, isRequired, label, style, subtitle, textStyle } = props;
 
   return (
     <View style={[style]}>
       {label && (
-        <Typography style={[tw`mb-2 text-gray-600`, textStyle]}>
+        <Typography style={[tw`mb-2 text-gray-600 dark:text-gray-300`, textStyle]}>
           {label}
           {isRequired && <Typography style={tw`text-red-600`}>{isRequired && '*'}</Typography>}
         </Typography>
       )}
       {children}
       {!!error && (
-        <View style={tw`items-end`}>
-          <Typography style={tw`text-right text-red-500`}>{error}</Typography>
+        <View style={tw`mt-1 items-start`}>
+          <Typography style={tw`text-right text-xs text-red-500`}>{error}</Typography>
+        </View>
+      )}
+      {!!subtitle && !error && (
+        <View style={tw`mt-1 items-start`}>
+          <Typography style={tw`dark:text-subtitle text-right text-xs text-gray-400`}>
+            {subtitle}
+          </Typography>
         </View>
       )}
     </View>

package/templates/shared/apps/mobile/src/components/atoms/KeyboardAccessory/keyboard-accessory.component.tsx

@@ -15,9 +15,12 @@ export function KeyboardAccessory(props: Props) {
 
   return (
     <InputAccessoryView nativeID={nativeID}>
-      <View style={tw`flex-row items-center justify-end bg-[#313132] px-2`}>
-        <Button buttonStyle={tw`my-2 rounded-lg bg-[#717172]`} onPress={() => Keyboard.dismiss()}>
-          <KeyboardHideIcon style={tw`text-white`} />
+      <View style={tw`flex-row items-center justify-end bg-gray-100 px-2 dark:bg-[#313132]`}>
+        <Button
+          buttonStyle={tw`my-2 rounded-lg bg-gray-200 dark:bg-[#717172]`}
+          onPress={() => Keyboard.dismiss()}
+        >
+          <KeyboardHideIcon style={tw`text-gray-600 dark:text-white`} />
         </Button>
       </View>
     </InputAccessoryView>

package/templates/shared/apps/mobile/src/components/atoms/KeyboardAwareScrollView/keyboard-aware-scroll-view.component.tsx

@@ -67,6 +67,7 @@ export function KeyboardAwareScrollView(props: Props) {
       refreshControl={refreshControl}
       scrollEventThrottle={16}
       ScrollViewComponent={ScrollViewComponent}
+      showsVerticalScrollIndicator={false}
       style={style}
       onScroll={onScroll}
       {...rest}

package/templates/shared/apps/mobile/src/components/atoms/Modal/modal.component.tsx

@@ -30,6 +30,8 @@ function IOSModal(props: ModalProps) {
 
   return (
     <RNModal
+      hideModalContentWhileAnimating
+      useNativeDriver
       animationIn="fadeIn"
       animationInTiming={FADE_IN_DURATION}
       animationOut="fadeOut"

package/templates/shared/apps/mobile/src/components/atoms/ScreenLoader/screen-loader.component.tsx

@@ -10,7 +10,12 @@ export function ScreenLoader(props: Props) {
   const { style } = props;
 
   return (
-    <View style={[tw`h-full w-full items-center justify-center bg-gray-50 p-8`, style]}>
+    <View
+      style={[
+        tw`dark:bg-background h-full w-full items-center justify-center bg-gray-50 p-8`,
+        style,
+      ]}
+    >
       <ActivityIndicator color={colors.primary[400]} />
     </View>
   );

package/templates/shared/apps/mobile/src/components/atoms/SelectDropdown/index.ts

@@ -0,0 +1 @@
+export * from './select-dropdown.component';

package/templates/shared/apps/mobile/src/components/atoms/SelectDropdown/select-dropdown.component.tsx

@@ -0,0 +1,223 @@
+/* eslint-disable max-params */
+/* eslint-disable no-magic-numbers */
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Dimensions, Pressable, ScrollView, View } from 'react-native';
+
+import { Modal, Typography } from '@/components';
+import { ChevronDownIcon, ChevronRightIcon } from '@/icons';
+import { colors, defaultInputContainerStyle, defaultInputTextStyle, tw } from '@/tailwind';
+import { DefaultComponentProps } from '@/types';
+
+const DROPDOWN_OFFSET = 8;
+const MAX_MENU_HEIGHT = 320;
+const OPTION_ROW_HEIGHT = 48;
+
+type DropdownOption = {
+  id: string;
+  label: string;
+};
+
+type DropdownLayout = {
+  height: number;
+  width: number;
+  x: number;
+  y: number;
+};
+
+type Props = DefaultComponentProps & {
+  label?: string;
+  options: DropdownOption[];
+  placeholder?: string;
+  selectedId?: string;
+  onSelect: (id: string) => void;
+};
+
+type OptionItemProps = {
+  isLast: boolean;
+  isSelected: boolean;
+  label: string;
+  onPress: () => void;
+};
+
+function OptionItem(props: OptionItemProps) {
+  const { isLast, isSelected, label, onPress } = props;
+
+  return (
+    <Pressable
+      style={[
+        tw`flex-row items-center justify-between px-4 py-3`,
+        !isLast && tw`dark:border-divider border-b border-gray-200`,
+      ]}
+      onPress={onPress}
+    >
+      <View style={tw`flex-1`}>
+        <Typography
+          style={[
+            tw`text-base`,
+            isSelected ? tw`text-primary-500 font-medium` : tw`dark:text-foreground text-gray-800`,
+          ]}
+        >
+          {label}
+        </Typography>
+      </View>
+    </Pressable>
+  );
+}
+
+export function SelectDropdown(props: Props) {
+  const { label, onSelect, options, placeholder = 'Select', selectedId, style } = props;
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const [dropdownLayout, setDropdownLayout] = useState<DropdownLayout | null>(null);
+  const triggerRef = useRef<View>(null);
+
+  const selectedOption = useMemo(
+    () => options.find((option) => option.id === selectedId),
+    [options, selectedId],
+  );
+  const selectedLabel = selectedOption?.label ?? placeholder;
+  const lastIndex = options.length - 1;
+
+  const handleToggle = useCallback(() => {
+    setIsOpen((prev) => !prev);
+  }, []);
+
+  const handleClose = useCallback(() => {
+    setIsOpen(false);
+  }, []);
+
+  const handleSelect = useCallback(
+    (optionId: string) => {
+      onSelect(optionId);
+      setIsOpen(false);
+    },
+    [onSelect],
+  );
+
+  useEffect(() => {
+    if (!isOpen) {
+      return;
+    }
+
+    triggerRef.current?.measureInWindow((x, y, width, height) => {
+      setDropdownLayout({ height, width, x, y });
+    });
+  }, [isOpen]);
+
+  const optionPressHandlers = useMemo(() => {
+    const handlers: Record<string, () => void> = {};
+
+    options.forEach((option) => {
+      handlers[option.id] = () => handleSelect(option.id);
+    });
+
+    return handlers;
+  }, [handleSelect, options]);
+
+  function renderOption(option: DropdownOption, index: number) {
+    const handlePress = optionPressHandlers[option.id];
+
+    return (
+      <OptionItem
+        key={option.id}
+        isLast={index === lastIndex}
+        isSelected={option.id === selectedId}
+        label={option.label}
+        onPress={handlePress}
+      />
+    );
+  }
+
+  function renderMenu() {
+    if (!dropdownLayout) {
+      return null;
+    }
+
+    const screenHeight = Dimensions.get('window').height;
+    const estimatedMenuHeight = Math.min(MAX_MENU_HEIGHT, options.length * OPTION_ROW_HEIGHT);
+    const spaceBelow = screenHeight - (dropdownLayout.y + dropdownLayout.height) - DROPDOWN_OFFSET;
+    const spaceAbove = dropdownLayout.y - DROPDOWN_OFFSET;
+    const canOpenBelow = spaceBelow >= estimatedMenuHeight;
+    const canOpenAbove = spaceAbove >= estimatedMenuHeight;
+    const shouldOpenBelow =
+      canOpenBelow || (!canOpenBelow && !canOpenAbove && spaceBelow >= spaceAbove);
+    const preferredTop = shouldOpenBelow
+      ? dropdownLayout.y + dropdownLayout.height + DROPDOWN_OFFSET
+      : dropdownLayout.y - estimatedMenuHeight - DROPDOWN_OFFSET;
+    const clampedTop = Math.min(
+      Math.max(0, preferredTop),
+      Math.max(0, screenHeight - estimatedMenuHeight - DROPDOWN_OFFSET),
+    );
+
+    return (
+      <View
+        style={[
+          tw`dark:border-divider dark:bg-sheet absolute z-50 max-h-80 rounded-xl border border-gray-200 bg-white`,
+          {
+            elevation: 5,
+            left: dropdownLayout.x,
+            shadowColor: colors.gray[900],
+            shadowOffset: {
+              height: 2,
+              width: 0,
+            },
+            shadowOpacity: 0.15,
+            shadowRadius: 4,
+            top: clampedTop,
+            width: dropdownLayout.width,
+          },
+        ]}
+      >
+        <ScrollView showsVerticalScrollIndicator={false} style={tw`max-h-80`}>
+          {options.map(renderOption)}
+        </ScrollView>
+      </View>
+    );
+  }
+
+  return (
+    <>
+      {label && (
+        <Typography style={tw`mb-1 text-sm font-medium text-gray-700 dark:text-gray-300`}>
+          {label}
+        </Typography>
+      )}
+      <Pressable
+        ref={triggerRef}
+        style={[
+          defaultInputContainerStyle,
+          tw`dark:border-divider dark:bg-surface items-center justify-between`,
+          style,
+        ]}
+        onPress={handleToggle}
+      >
+        <View style={tw`flex-1`}>
+          <Typography
+            style={[
+              defaultInputTextStyle,
+              tw`dark:text-foreground`,
+              !selectedOption && tw`dark:text-placeholder text-gray-400`,
+            ]}
+          >
+            {selectedLabel}
+          </Typography>
+        </View>
+        {isOpen ? (
+          <ChevronDownIcon height={20} style={tw`dark:text-subtitle text-gray-500`} width={20} />
+        ) : (
+          <ChevronRightIcon height={20} style={tw`dark:text-subtitle text-gray-500`} width={20} />
+        )}
+      </Pressable>
+
+      <Modal
+        containerStyle={tw`flex-1 p-0`}
+        isVisible={isOpen}
+        onBackButtonPress={handleClose}
+        onBackdropPress={handleClose}
+      >
+        <View pointerEvents="box-none" style={tw`flex-1`}>
+          {renderMenu()}
+        </View>
+      </Modal>
+    </>
+  );
+}

package/templates/shared/apps/mobile/src/components/atoms/Skeleton/skeleton.component.tsx

@@ -36,7 +36,7 @@ export function Skeleton(props: Props) {
   }
 
   return (
-    <Animated.View style={[tw`rounded-lg bg-gray-200`, animatedStyle, style]}>
+    <Animated.View style={[tw`dark:bg-surface rounded-lg bg-gray-200`, animatedStyle, style]}>
       <View style={tw`opacity-0`}>{children}</View>
     </Animated.View>
   );

package/templates/shared/apps/mobile/src/components/atoms/TextInput/bottom-sheet-text-input.component.tsx

@@ -88,6 +88,7 @@ export function BottomSheetTextInput(props: BottomSheetTextInputProps) {
     <View
       style={[
         defaultInputContainerStyle,
+        tw`dark:border-divider dark:bg-surface`,
         focusedInputStyle(isFocused),
         disabledInputStyle(isDisabled),
         style,
@@ -100,8 +101,8 @@ export function BottomSheetTextInput(props: BottomSheetTextInputProps) {
         multiline={multiline}
         placeholder={placeholder}
         placeholderTextColor={colors.gray[500]}
-        selectionColor={colors.primary}
-        style={[defaultInputTextStyle, textStyle]}
+        selectionColor={colors.primary[400]}
+        style={[defaultInputTextStyle, tw`dark:text-foreground`, textStyle]}
         value={value}
         onBlur={(e) => handleOnBlur(e as NativeSyntheticEvent<TextInputFocusEventData>)}
         onChangeText={handleOnChangeText}
@@ -115,7 +116,7 @@ export function BottomSheetTextInput(props: BottomSheetTextInputProps) {
           testID="clear-button"
           onPress={handleOnClearPress}
         >
-          <CrossIcon />
+          <CrossIcon style={tw`text-subtitle`} />
         </Pressable>
       )}
     </View>

package/templates/shared/apps/mobile/src/components/atoms/TextInput/text-input.component.tsx

@@ -11,6 +11,7 @@ import {
 import { DefaultNameInputProps } from './constants';
 
 import { CrossIcon } from '@/icons';
+import { useLocalStorageStore } from '@/stores';
 import {
   colors,
   defaultInputContainerStyle,
@@ -43,6 +44,7 @@ export function TextInput(props: TextInputProps) {
     value,
     ...extraProps
   } = props;
+  const colorScheme = useLocalStorageStore((s) => s.colorScheme);
   const [isClearButtonVisible, setIsClearButtonVisible] = useState<boolean>(false);
   const [isFocused, setFocused] = useState<boolean>(false);
 
@@ -81,6 +83,7 @@ export function TextInput(props: TextInputProps) {
     <View
       style={[
         defaultInputContainerStyle,
+        tw`dark:border-divider dark:bg-surface`,
         focusedInputStyle(isFocused),
         disabledInputStyle(isDisabled),
         style,
@@ -89,12 +92,13 @@ export function TextInput(props: TextInputProps) {
       <RNTextInput
         {...DefaultNameInputProps}
         ref={textInputRef}
+        cursorColor={colors.primary[400]}
         editable={!isDisabled}
         multiline={multiline}
         placeholder={placeholder}
-        placeholderTextColor={colors.gray[500]}
-        selectionColor={colors.primary}
-        style={[defaultInputTextStyle, textStyle]}
+        placeholderTextColor={colorScheme === 'dark' ? colors.placeholder : colors.gray[400]}
+        selectionColor={colors.primary[400]}
+        style={[defaultInputTextStyle, tw`dark:text-foreground`, textStyle]}
         value={value}
         onBlur={handleOnBlur}
         onChangeText={handleOnChangeText}
@@ -108,7 +112,7 @@ export function TextInput(props: TextInputProps) {
           testID="clear-button"
           onPress={handleOnClearPress}
         >
-          <CrossIcon style={tw`text-gray-400`} />
+          <CrossIcon style={tw`dark:text-subtitle text-gray-400`} />
         </Pressable>
       )}
     </View>

package/templates/shared/apps/mobile/src/components/atoms/ThemeManager/index.ts

@@ -0,0 +1 @@
+export * from './theme-manager.component';