@grupalia/rn-ui-kit 0.14.1 → 0.16.0

package/lib/typescript/module/components/PhotoPickerModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PhotoPickerModal.d.ts","sourceRoot":"","sources":["../../../../src/components/PhotoPickerModal.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAuB,MAAM,OAAO,CAAC;AAE5D,OAAO,EACe,YAAY,EAAE,KAAK,EACxC,MAAM,2BAA2B,CAAC;AAInC,OAAO,EAAQ,KAAK,EAAS,MAAM,mBAAmB,CAAC;AAGvD,MAAM,MAAM,qBAAqB,GAAG,KAAK,GAAG;IAAE,GAAG,EAAE,MAAM,CAAA;CAAE,CAAC;AAE5D,UAAU,KAAM,SAAQ,cAAc,CAAC,OAAO,KAAK,CAAC;IAClD,WAAW,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;IACpD,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,YAAY,CAAC,EAAE;QACb,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,OAAO,CAAC,EAAE,YAAY,CAAC;QACvB,aAAa,CAAC,EAAE,OAAO,CAAC;KACzB,CAAC;CACH;;AA4FD,wBAAyC"}

package/lib/typescript/module/components/Toasts.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export default function Toasts(): React.JSX.Element;
+//# sourceMappingURL=Toasts.d.ts.map

package/lib/typescript/module/components/Toasts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toasts.d.ts","sourceRoot":"","sources":["../../../../src/components/Toasts.tsx"],"names":[],"mappings":"AACA,OAAO,KAAsC,MAAM,OAAO,CAAC;AA6K3D,MAAM,CAAC,OAAO,UAAU,MAAM,sBAyB7B"}

package/lib/typescript/module/components/index.d.ts

@@ -17,4 +17,10 @@ export { default as FormikDateInput } from './FormikDateInput';
 export { default as BaseSwitch } from './BaseSwitch';
 export { default as PressableOpacity } from './PressableOpacity';
 export { default as BaseText } from './BaseText';
+export { default as Toasts } from './Toasts';
+export { default as CameraWrapperModal, CameraWrapperModalImage } from './CameraWrapperModal';
+export { default as ImagePickerBottomSheet, ImagePickerBottomSheetImage } from './ImagePickerBottomSheet';
+export { default as PhotoPickerModal } from './PhotoPickerModal';
+export { default as CameraImageInput, CameraImageInputProps, CameraImage } from './CameraImageInput';
+export { default as FormikCameraImageInput } from './FormikCameraImageInput';
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/module/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,GAAG,EAAE,MAAM,sBAAsB,CAAC;AAC1E,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,GAAG,EAAE,MAAM,sBAAsB,CAAC;AAC1E,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;AAC9F,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,2BAA2B,EAAE,MAAM,0BAA0B,CAAC;AAC1G,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,qBAAqB,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AACrG,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,0BAA0B,CAAC"}

package/lib/typescript/module/components/svgs/Camera.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+declare const _default: import("react").ForwardRefExoticComponent<import("react-native-svg").SvgProps & {
+    className?: string | undefined;
+    tw?: string | undefined;
+    baseClassName?: string | undefined;
+    baseTw?: string | undefined;
+} & import("react").RefAttributes<unknown>>;
+export default _default;
+//# sourceMappingURL=Camera.d.ts.map

package/lib/typescript/module/components/svgs/Camera.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Camera.d.ts","sourceRoot":"","sources":["../../../../../src/components/svgs/Camera.tsx"],"names":[],"mappings":";;;;;;;AAaA,wBAA8B"}

package/lib/typescript/module/hooks/index.d.ts

@@ -0,0 +1,4 @@
+export * from './useBreakpoints';
+export * from './useIsAboveBreakpoint';
+export { default as useInternetConnectionStatus } from './useInternetConnectionStatus';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/module/hooks/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,wBAAwB,CAAC;AACvC,OAAO,EAAE,OAAO,IAAI,2BAA2B,EAAE,MAAM,+BAA+B,CAAC"}

package/lib/typescript/module/hooks/useInternetConnectionStatus.d.ts

@@ -0,0 +1,20 @@
+export interface InternetConnectionStatus {
+    isConnected: boolean | null;
+    isLoading: boolean;
+    lastChecked: Date | null;
+    isWeakConnection: boolean;
+}
+export interface InternetConnectionStatusProps {
+    checkInterval?: number;
+    timeout?: number;
+    checkHealth: () => Promise<{
+        ok: boolean;
+    }>;
+}
+export default function useInternetConnectionStatus(props: InternetConnectionStatusProps): {
+    isConnected: boolean | null;
+    isLoading: boolean;
+    lastChecked: Date | null;
+    isWeakConnection: boolean | 0 | null;
+};
+//# sourceMappingURL=useInternetConnectionStatus.d.ts.map

package/lib/typescript/module/hooks/useInternetConnectionStatus.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useInternetConnectionStatus.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useInternetConnectionStatus.ts"],"names":[],"mappings":"AAQA,MAAM,WAAW,wBAAwB;IACvC,WAAW,EAAE,OAAO,GAAG,IAAI,CAAC;IAC5B,SAAS,EAAE,OAAO,CAAC;IACnB,WAAW,EAAE,IAAI,GAAG,IAAI,CAAC;IACzB,gBAAgB,EAAE,OAAO,CAAC;CAC3B;AAED,MAAM,WAAW,6BAA6B;IAC5C,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,MAAM,OAAO,CAAC;QAAE,EAAE,EAAE,OAAO,CAAA;KAAE,CAAC,CAAC;CAC7C;AA8DD,MAAM,CAAC,OAAO,UAAU,2BAA2B,CAAC,KAAK,EAAE,6BAA6B;;;;;EA2IvF"}

package/lib/typescript/module/utils/fileDirectoryUtils.d.ts

@@ -0,0 +1,3 @@
+declare const ensureDirExists: (dirPath: string) => Promise<string>;
+export { ensureDirExists };
+//# sourceMappingURL=fileDirectoryUtils.d.ts.map

package/lib/typescript/module/utils/fileDirectoryUtils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fileDirectoryUtils.d.ts","sourceRoot":"","sources":["../../../../src/utils/fileDirectoryUtils.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,eAAe,YAAmB,MAAM,oBAO7C,CAAC;AAEF,OAAO,EAAE,eAAe,EAAE,CAAC"}

package/lib/typescript/module/utils/index.d.ts

@@ -1,2 +1,4 @@
 export * from './clabe';
+export * from './fileDirectoryUtils';
+export * from './timeConstants';
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/module/utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,sBAAsB,CAAC;AACrC,cAAc,iBAAiB,CAAC"}

package/lib/typescript/module/utils/timeConstants.d.ts

@@ -0,0 +1,10 @@
+declare const MS_IN_A_SECOND = 1000;
+declare const HOURS_IN_A_DAY = 24;
+declare const MINUTES_IN_A_HOUR = 60;
+declare const SECONDS_IN_A_MINUTE = 60;
+declare const DAYS_IN_A_WEEK = 7;
+declare const MS_IN_A_DAY: number;
+declare const MS_IN_A_MINUTE: number;
+declare const MS_IN_A_WEEK: number;
+export { MS_IN_A_SECOND, HOURS_IN_A_DAY, MINUTES_IN_A_HOUR, SECONDS_IN_A_MINUTE, DAYS_IN_A_WEEK, MS_IN_A_DAY, MS_IN_A_MINUTE, MS_IN_A_WEEK, };
+//# sourceMappingURL=timeConstants.d.ts.map

package/lib/typescript/module/utils/timeConstants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"timeConstants.d.ts","sourceRoot":"","sources":["../../../../src/utils/timeConstants.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,cAAc,OAAQ,CAAC;AAC7B,QAAA,MAAM,cAAc,KAAK,CAAC;AAC1B,QAAA,MAAM,iBAAiB,KAAK,CAAC;AAC7B,QAAA,MAAM,mBAAmB,KAAK,CAAC;AAC/B,QAAA,MAAM,cAAc,IAAI,CAAC;AACzB,QAAA,MAAM,WAAW,QAA4E,CAAC;AAC9F,QAAA,MAAM,cAAc,QAAuC,CAAC;AAC5D,QAAA,MAAM,YAAY,QAA+B,CAAC;AAElD,OAAO,EACL,cAAc,EACd,cAAc,EACd,iBAAiB,EACjB,mBAAmB,EACnB,cAAc,EACd,WAAW,EACX,cAAc,EACd,YAAY,GACb,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grupalia/rn-ui-kit",
-  "version": "0.14.1",
+  "version": "0.16.0",
   "description": "Grupalia React Native UI Kit",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/module/index.d.ts",
@@ -10,7 +10,8 @@
     "src/preset.cjs",
     "src/styles",
     "src/components",
-    "src/utils"
+    "src/utils",
+    "src/hooks"
   ],
   "scripts": {
     "dev": "chokidar \"src/**/*\" -c \"yarn bob build\"",
@@ -23,21 +24,39 @@
   },
   "peerDependencies": {
     "@gorhom/bottom-sheet": "^5",
+    "@react-native-async-storage/async-storage": "1.23.1",
+    "@react-native-community/hooks": "^100.1.0",
+    "@react-native-community/netinfo": "11.3.1",
+    "@react-navigation/native": "^6.1.18",
+    "@sentry/react-native": "^6.9.1",
+    "@tanstack/react-query": "^5.63.0",
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
+    "expo-constants": "~16.0.1",
+    "expo-file-system": "17",
     "formik": "^2",
     "nativewind": "^2.0.11",
     "react": "*",
+    "react-hot-toast": "^2.5.1",
     "react-native": "*",
     "react-native-date-picker": "^5.0.12",
     "react-native-gesture-handler": "2.16.1",
     "react-native-heroicons": "^4.0.0",
+    "react-native-image-modal": "^3.0.13",
+    "react-native-image-picker": "^7.2.3",
     "react-native-svg": "*",
+    "react-native-vision-camera": "^4.6.3",
     "tailwindcss": "3.3.2"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
     "@gorhom/bottom-sheet": "^5",
+    "@react-native-async-storage/async-storage": "1.23.1",
+    "@react-native-community/hooks": "^100.1.0",
+    "@react-native-community/netinfo": "11.3.1",
+    "@react-navigation/native": "^6.1.18",
+    "@sentry/react-native": "^6.9.1",
+    "@tanstack/react-query": "^5.63.0",
     "@types/react": "~18.2.45",
     "@typescript-eslint/eslint-plugin": "^7.10.0",
     "@typescript-eslint/parser": "^7.10.0",
@@ -51,15 +70,21 @@
     "eslint-plugin-react": "^7.34.1",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-tailwindcss": "^3.17.4",
+    "expo-constants": "~16.0.1",
+    "expo-file-system": "17",
     "formik": "^2",
     "nativewind": "^2.0.11",
     "react": "18.2.0",
+    "react-hot-toast": "^2.5.1",
     "react-native": "0.74.5",
     "react-native-builder-bob": "^0.40.6",
     "react-native-date-picker": "^5.0.12",
     "react-native-gesture-handler": "2.16.1",
     "react-native-heroicons": "^4.0.0",
+    "react-native-image-modal": "^3.0.13",
+    "react-native-image-picker": "^7.2.3",
     "react-native-svg": "^15.11.2",
+    "react-native-vision-camera": "^4.6.3",
     "tailwindcss": "3.3.2",
     "typescript": "~5.3.3"
   },

package/src/components/BaseBottomSheetModal.tsx

@@ -5,7 +5,6 @@ import {
   BottomSheetModalProps,
   BottomSheetView,
 } from '@gorhom/bottom-sheet';
-import { styled } from 'nativewind';
 import { forwardRef, ReactNode } from 'react';
 import { StyleSheet } from 'react-native';
 
@@ -48,4 +47,4 @@ const BaseBottomSheetModal = forwardRef<
   </BottomSheetModal>
 ));
 
-export default styled(BaseBottomSheetModal);
+export default BaseBottomSheetModal;

package/src/components/BaseConfirmationModal.tsx

@@ -1,3 +1,5 @@
+import { styled } from 'nativewind';
+
 import { View, Modal } from '../hoc-components';
 import BaseButton from './BaseButton';
 import BaseText from './BaseText';
@@ -14,7 +16,7 @@ interface Props extends React.ComponentProps<typeof Modal> {
   loading?: boolean;
 }
 
-export default function BaseConfirmationModal({
+function BaseConfirmationModal({
   visible,
   title,
   body,
@@ -60,3 +62,5 @@ export default function BaseConfirmationModal({
     </Modal>
   );
 }
+
+export default styled(BaseConfirmationModal);

package/src/components/BaseDateInput.tsx

@@ -1,5 +1,6 @@
 import clsx from 'clsx';
 import { format } from 'date-fns';
+import { styled } from 'nativewind';
 import React, { useState, useCallback } from 'react';
 import { ViewProps } from 'react-native';
 import DatePicker, { DatePickerProps } from 'react-native-date-picker';
@@ -28,7 +29,7 @@ interface BaseDateInputProps extends Omit<DatePickerProps, 'open' | 'date' | 'on
   touched?: boolean;
 }
 
-export default function BaseDateInput({
+function BaseDateInput({
   value,
   onChange,
   label,
@@ -148,3 +149,5 @@ export default function BaseDateInput({
     </View>
   );
 }
+
+export default styled(BaseDateInput);

package/src/components/BaseIconBox.tsx

@@ -1,5 +1,9 @@
+import clsx from 'clsx';
+import { styled } from 'nativewind';
+
 import { View } from '../hoc-components';
-import { HeroIconProps } from '../types/heroicons';
+import BaseIcon, { BaseIconProps } from './BaseIcon';
+import { HeroIcon, HeroIconProps } from '../types/heroicons';
 
 type ColorType = 'primary' | 'white' | 'light-blue' | 'green';
 type SizeType = 'xxs' | 'xs' | 'sm' | 'md' | 'lg';
@@ -7,58 +11,65 @@ type SizeType = 'xxs' | 'xs' | 'sm' | 'md' | 'lg';
 interface BaseIconBoxProps extends HeroIconProps {
   color?: ColorType;
   size?: SizeType;
-  Icon: React.ComponentType;
+  Icon: HeroIcon;
 }
 
-function getColorClasses(color: ColorType): { box: string; icon: string } {
+function getColorClasses(color: ColorType): { box: string; icon: BaseIconProps['color'] } {
   switch (color) {
     case 'primary':
-      return { box: 'bg-brand-solid', icon: 'text-primary_on-brand' };
+      return { box: 'bg-brand-solid', icon: 'fg-white' };
     case 'light-blue':
-      return { box: 'bg-utility-blue-100', icon: 'text-utility-blue-700' };
+      return { box: 'bg-utility-blue-100', icon: 'utility-blue-700' };
     case 'green':
-      return { box: 'bg-success-primary', icon: 'text-success-primary' };
+      return { box: 'bg-success-primary', icon: 'fg-success-primary' };
     case 'white':
     default:
-      return { box: 'bg-transparent', icon: 'text-primary' };
+      return { box: 'bg-transparent', icon: 'fg-primary' };
   }
 }
 
-function getSizeClasses(size: SizeType): { box: string } {
+function getSizeClasses(size: SizeType): { box: string, icon: number } {
   switch (size) {
     case 'xxs':
-      return { box: 'h-6 w-6' };
+      return { box: 'h-6 w-6', icon: 18 };
     case 'xs':
-      return { box: 'w-8 h-8' };
+      return { box: 'w-7 h-7', icon: 20 };
     case 'sm':
-      return { box: 'w-12 h-12' };
-    case 'lg':
-      return { box: 'w-16 h-16' };
+      return { box: 'w-8 h-8', icon: 24 };
     case 'md':
+      return { box: 'w-9 h-9', icon: 28 };
+    case 'lg':
     default:
-      return { box: 'w-20 h-20' };
+      return { box: 'w-10 h-10', icon: 32 };
   }
 }
 
-export default function BaseIconBox({
+function BaseIconBox({
   color = 'primary',
   size = 'sm',
   Icon,
   style = {},
-  ...iconProps
 }: BaseIconBoxProps) {
   const colorClasses = getColorClasses(color);
   const sizeClasses = getSizeClasses(size);
 
   return (
     <View
-      className={`${colorClasses.box} ${sizeClasses.box} flex shrink-0 items-center justify-center rounded-md p-1`}
+      className={clsx(
+        colorClasses.box,
+        sizeClasses.box,
+        'flex shrink-0 items-center justify-center rounded-md p-1',
+      )}
       style={style}
     >
-      <Icon
-        className={colorClasses.icon}
-        {...iconProps}
+      <BaseIcon
+        size={sizeClasses.icon}
+        strokeWidth={1.5}
+        color={colorClasses.icon}
+        icon={Icon}
       />
     </View>
   );
 }
+
+export default styled(BaseIconBox);

package/src/components/BaseSpinner.tsx

@@ -1,3 +1,4 @@
+import { styled } from 'nativewind';
 import { ComponentProps } from 'react';
 
 import { ActivityIndicator } from '../hoc-components';
@@ -7,7 +8,7 @@ interface BaseSpinnerProps extends ComponentProps<typeof ActivityIndicator> {
   size?: 'small' | 'large' | number;
 }
 
-export default function BaseSpinner({ size = 'large', ...props }: BaseSpinnerProps) {
+function BaseSpinner({ size = 'large', ...props }: BaseSpinnerProps) {
   return (
     <ActivityIndicator
       size={size}
@@ -16,3 +17,5 @@ export default function BaseSpinner({ size = 'large', ...props }: BaseSpinnerPro
     />
   );
 }
+
+export default styled(BaseSpinner);

package/src/components/BaseSwitch.tsx

@@ -1,3 +1,4 @@
+import { styled } from 'nativewind';
 import { useMemo } from 'react';
 import { SwitchProps } from 'react-native';
 
@@ -44,4 +45,4 @@ function BaseSwitch({
   );
 }
 
-export default BaseSwitch;
+export default styled(BaseSwitch);