@chem-po/react-native 0.0.7 → 0.0.9

package/lib/typescript/{src/components → components}/loading/LoadingImage.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { DimensionValue, ViewStyle } from 'react-native';
 export interface LoadingImageProps {
     src?: string | null;
@@ -9,5 +10,5 @@ export interface LoadingImageProps {
     width?: DimensionValue;
     height?: DimensionValue;
 }
-export declare const LoadingImage: ({ src, loadingOverride, onLoad, width, height, noFullView, buttonFullView, style, }: LoadingImageProps) => import("react/jsx-runtime").JSX.Element;
+export declare const LoadingImage: ({ src, loadingOverride, onLoad, width, height, noFullView, buttonFullView, style, }: LoadingImageProps) => React.JSX.Element;
 //# sourceMappingURL=LoadingImage.d.ts.map

package/lib/typescript/components/loading/LoadingImage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingImage.d.ts","sourceRoot":"","sources":["../../../../src/components/loading/LoadingImage.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4D,MAAM,OAAO,CAAA;AAChF,OAAO,EAAE,cAAc,EAA6C,SAAS,EAAE,MAAM,cAAc,CAAA;AAInG,MAAM,WAAW,iBAAiB;IAChC,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACnB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAA;IACzB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,KAAK,CAAC,EAAE,cAAc,CAAA;IACtB,MAAM,CAAC,EAAE,cAAc,CAAA;CACxB;AAKD,eAAO,MAAM,YAAY,GAAI,qFAS1B,iBAAiB,sBA+EnB,CAAA"}

package/lib/typescript/{src/components → components}/loading/LoadingSwitch.d.ts

@@ -1,6 +1,7 @@
+import React from 'react';
 export declare const LoadingSwitch: ({ value, label, onChange, }: {
     value: boolean;
     label: string;
     onChange: (updated: boolean) => Promise<void>;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => React.JSX.Element;
 //# sourceMappingURL=LoadingSwitch.d.ts.map

package/lib/typescript/components/loading/LoadingSwitch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingSwitch.d.ts","sourceRoot":"","sources":["../../../../src/components/loading/LoadingSwitch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgC,MAAM,OAAO,CAAA;AAIpD,eAAO,MAAM,aAAa,GAAI,6BAI3B;IACD,KAAK,EAAE,OAAO,CAAA;IACd,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;CAC9C,sBAwDA,CAAA"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/loading/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAA;AAClC,cAAc,WAAW,CAAA;AACzB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,iBAAiB,CAAA"}

package/lib/typescript/{src/components → components}/overlay/ImageViewOverlay.d.ts

@@ -1,5 +1,6 @@
+import React from 'react';
 export declare const ImageViewOverlay: ({ src, onClose }: {
     src: string;
     onClose: () => void;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => React.JSX.Element;
 //# sourceMappingURL=ImageViewOverlay.d.ts.map

package/lib/typescript/components/overlay/ImageViewOverlay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageViewOverlay.d.ts","sourceRoot":"","sources":["../../../../src/components/overlay/ImageViewOverlay.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAyC,MAAM,OAAO,CAAA;AAI7D,eAAO,MAAM,gBAAgB,GAAI,kBAAkB;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,IAAI,CAAA;CAAE,sBA4DtF,CAAA"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/overlay/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAA"}

package/lib/typescript/{src/components → components}/text/AnimatedText.d.ts

@@ -1,4 +1,4 @@
-import { PropsWithChildren } from 'react';
+import React, { PropsWithChildren } from 'react';
 import { StyleProp, TextStyle } from 'react-native';
 export interface AnimatedTextProps {
     show: boolean;
@@ -7,5 +7,5 @@ export interface AnimatedTextProps {
     marginBottom: number;
     style?: StyleProp<TextStyle>;
 }
-export declare const AnimatedText: ({ show, color: colorProp, height: heightProp, marginBottom: marginBottomProp, style, children, }: PropsWithChildren<AnimatedTextProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const AnimatedText: ({ show, color: colorProp, height: heightProp, marginBottom: marginBottomProp, style, children, }: PropsWithChildren<AnimatedTextProps>) => React.JSX.Element;
 //# sourceMappingURL=AnimatedText.d.ts.map

package/lib/typescript/components/text/AnimatedText.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnimatedText.d.ts","sourceRoot":"","sources":["../../../../src/components/text/AnimatedText.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,iBAAiB,EAA8B,MAAM,OAAO,CAAA;AAC5E,OAAO,EAAY,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAE7D,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,OAAO,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;IACd,YAAY,EAAE,MAAM,CAAA;IACpB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;CAC7B;AAqCD,eAAO,MAAM,YAAY,GAAI,kGAO1B,iBAAiB,CAAC,iBAAiB,CAAC,sBAYtC,CAAA"}

package/lib/typescript/{src/components → components}/text/Txt.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { TextProps } from 'react-native';
-export declare const Txt: ({ children, ...props }: TextProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Txt: ({ children, ...props }: TextProps) => React.JSX.Element;
 //# sourceMappingURL=Txt.d.ts.map

package/lib/typescript/components/text/Txt.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Txt.d.ts","sourceRoot":"","sources":["../../../../src/components/text/Txt.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAQ,SAAS,EAAE,MAAM,cAAc,CAAA;AAE9C,eAAO,MAAM,GAAG,GAAI,wBAAwB,SAAS,sBAOpD,CAAA"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/text/index.ts"],"names":[],"mappings":"AAAA,cAAc,OAAO,CAAA"}

package/lib/typescript/components/theme/colorMode/DarkModeToggle.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const DarkModeToggle: () => React.JSX.Element;
+export declare const AbsoluteDarkModeToggle: () => React.JSX.Element;
+//# sourceMappingURL=DarkModeToggle.d.ts.map

package/lib/typescript/components/theme/colorMode/DarkModeToggle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DarkModeToggle.d.ts","sourceRoot":"","sources":["../../../../../src/components/theme/colorMode/DarkModeToggle.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,eAAO,MAAM,cAAc,yBAmB1B,CAAA;AAED,eAAO,MAAM,sBAAsB,yBAIlC,CAAA"}

package/lib/typescript/components/theme/colorMode/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/theme/colorMode/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAA"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/theme/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA"}

package/lib/typescript/constants/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/constants/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAA"}

package/lib/typescript/constants/toast.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast.d.ts","sourceRoot":"","sources":["../../../src/constants/toast.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAA;AAMnD,eAAO,MAAM,WAAW,EAAE,kBAgBzB,CAAA"}

package/lib/typescript/contexts/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/contexts/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAA"}

package/lib/typescript/{src/contexts → contexts}/root.d.ts

@@ -1,9 +1,9 @@
 import { BackendAdapterInterface, ColorMode, Theme } from '@chem-po/core';
 import { ChempoProps } from '@chem-po/react';
-import { PropsWithChildren } from 'react';
+import React, { PropsWithChildren } from 'react';
 export interface ChempoNativeProviderProps extends PropsWithChildren<Pick<ChempoProps<BackendAdapterInterface>, 'backendAdapter' | 'assets'>> {
     theme?: Theme;
     initialColorMode?: ColorMode;
 }
-export declare const ChempoNativeProvider: ({ theme: themeProp, initialColorMode, ...props }: ChempoNativeProviderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ChempoNativeProvider: ({ theme: themeProp, initialColorMode, ...props }: ChempoNativeProviderProps) => React.JSX.Element;
 //# sourceMappingURL=root.d.ts.map

package/lib/typescript/contexts/root.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"root.d.ts","sourceRoot":"","sources":["../../../src/contexts/root.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AACzE,OAAO,EAAE,WAAW,EAAkB,MAAM,gBAAgB,CAAA;AAC5D,OAAO,KAAK,EAAE,EAAE,iBAAiB,EAAW,MAAM,OAAO,CAAA;AASzD,MAAM,WAAW,yBACf,SAAQ,iBAAiB,CACvB,IAAI,CAAC,WAAW,CAAC,uBAAuB,CAAC,EAAE,gBAAgB,GAAG,QAAQ,CAAC,CACxE;IACD,KAAK,CAAC,EAAE,KAAK,CAAA;IACb,gBAAgB,CAAC,EAAE,SAAS,CAAA;CAC7B;AACD,eAAO,MAAM,oBAAoB,GAAI,kDAIlC,yBAAyB,sBAgB3B,CAAA"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAA"}

package/lib/typescript/hooks/useThemeState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useThemeState.d.ts","sourceRoot":"","sources":["../../../src/hooks/useThemeState.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AAChD,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAA;AAG3C,MAAM,WAAW,aAAa;IAC5B,gBAAgB,CAAC,EAAE,SAAS,CAAA;IAC5B,KAAK,CAAC,EAAE,KAAK,CAAA;CACd;AAED,eAAO,MAAM,aAAa,GAAI,QAAQ,aAAa,eAQlD,CAAA"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA;AAC5B,cAAc,aAAa,CAAA;AAC3B,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA"}

package/lib/typescript/store/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/store/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA"}

package/lib/typescript/store/useScreen.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useScreen.d.ts","sourceRoot":"","sources":["../../../src/store/useScreen.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,gBAAgB,kBAqB5B,CAAA"}

package/lib/typescript/{src/styles → styles}/fill.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"fill.d.ts","sourceRoot":"","sources":["../../../../src/styles/fill.ts"],"names":[],"mappings":"AASA,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CASf,CAAA"}
+{"version":3,"file":"fill.d.ts","sourceRoot":"","sources":["../../../src/styles/fill.ts"],"names":[],"mappings":"AASA,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CASf,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chem-po/react-native",
-  "version": "0.0.7",
+  "version": "0.0.9",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
   "types": "lib/typescript/index.d.ts",
@@ -60,8 +60,8 @@
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-native": "0.77.2",
-    "@chem-po/react": "0.0.7",
-    "@chem-po/core": "0.0.7"
+    "@chem-po/react": "0.0.9",
+    "@chem-po/core": "0.0.9"
   },
   "devDependencies": {
     "@babel/core": "^7.26.0",

package/src/components/box/Center.tsx

@@ -1,4 +1,4 @@
-import { forwardRef } from 'react'
+import React, { forwardRef } from 'react'
 import { Animated, StyleSheet, View, ViewProps } from 'react-native'
 
 export type CenterProps = ViewProps

package/src/components/box/CollapseHorizontal.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useRef } from 'react'
+import React, { useEffect, useMemo, useRef } from 'react'
 import { Animated, StyleProp, ViewStyle } from 'react-native'
 import { AnimatedCenter, CenterProps } from './Center'
 

package/src/components/box/ContentBox.tsx

@@ -1,4 +1,4 @@
-import { forwardRef } from 'react'
+import React, { forwardRef } from 'react'
 import { StyleSheet, View, ViewProps } from 'react-native'
 
 const ContentBoxBase = (props: ViewProps, ref: any) => {

package/src/components/box/DropShadow.tsx

@@ -1,4 +1,4 @@
-import { PropsWithChildren } from 'react'
+import React, { PropsWithChildren } from 'react'
 import { Platform, StyleProp, View, ViewStyle } from 'react-native'
 
 // Method 1: Wrapping in a View

package/src/components/box/ExpandOnMount.tsx

@@ -1,4 +1,4 @@
-import { FC, useEffect, useMemo, useRef, useState } from 'react'
+import React, { FC, useEffect, useMemo, useRef, useState } from 'react'
 import { Animated, View, ViewProps } from 'react-native'
 
 export const ExpandOnMount: FC<

package/src/components/box/FullSizeContainer.tsx

@@ -1,4 +1,4 @@
-import { createContext, FC, useCallback, useContext, useMemo, useRef, useState } from 'react'
+import React, { createContext, FC, useCallback, useContext, useMemo, useRef, useState } from 'react'
 import { View, ViewProps } from 'react-native'
 
 export const FullSizeContainer = ({

package/src/components/button/Toggle.tsx

@@ -1,5 +1,5 @@
 import { useTheme, useToast } from '@chem-po/react'
-import { JSX, useCallback } from 'react'
+import React, { JSX, useCallback } from 'react'
 import { StyleSheet, TouchableOpacity, View } from 'react-native'
 
 export interface ToggleOption<Option extends string = string> {

package/src/components/feed/FeedContentPane.tsx

@@ -1,6 +1,6 @@
 import { AnyObject, WithId } from '@chem-po/core'
 import { PanelStatus, useDocument, useScreen } from '@chem-po/react'
-import { JSX, useEffect, useMemo, useRef } from 'react'
+import React, { JSX, useEffect, useMemo, useRef } from 'react'
 // import { motion, MotionValue, useMotionValue, useSpring, useTransform } from 'framer-motion'
 import { Animated } from 'react-native'
 

package/src/components/feed/MediaFeedRefresh.tsx

@@ -1,5 +1,5 @@
 import Icon from '@expo/vector-icons/MaterialCommunityIcons' // or your preferred icon set
-import { useEffect, useRef } from 'react'
+import React, { useEffect, useRef } from 'react'
 import { Animated, StyleSheet, View } from 'react-native'
 import { DropShadow } from '../box/DropShadow'
 import { CircularProgress } from '../loading'

package/src/components/feed/context.tsx

@@ -1,5 +1,5 @@
 import { AnyObject, WithId } from '@chem-po/core'
-import { createContext, PropsWithChildren, useContext, useMemo } from 'react'
+import React, { createContext, PropsWithChildren, useContext, useMemo } from 'react'
 
 interface MediaFeedContextValue<T extends AnyObject = AnyObject> {
   curr: WithId<T> | null

package/src/components/form/Condition.tsx

@@ -1,4 +1,4 @@
-import { PropsWithChildren, useMemo } from 'react'
+import React, { PropsWithChildren, useMemo } from 'react'
 import { useWatch } from 'react-hook-form'
 import { Animated } from 'react-native'
 

package/src/components/form/Field.tsx

@@ -1,6 +1,6 @@
 import { InputRef, getFieldValidate } from '@chem-po/core'
 import { Field, useField } from '@chem-po/react'
-import { ForwardedRef, forwardRef, useMemo } from 'react'
+import React, { ForwardedRef, forwardRef, useMemo } from 'react'
 import { ChangeHandler, Controller } from 'react-hook-form'
 import { Input } from './input/input'
 

package/src/components/form/Form.tsx

@@ -15,7 +15,7 @@ import {
   useFormSubmit,
   UseFormSubmitProps,
 } from '@chem-po/react'
-import { FC, useMemo, useState } from 'react'
+import React, { FC, useMemo, useState } from 'react'
 import { useFieldArray, useFormContext } from 'react-hook-form'
 import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'
 import { Expandable } from '../box/Expandable'

package/src/components/form/FormFooter.tsx

@@ -5,7 +5,7 @@ import {
   useButtonColor,
   usePlaceholderColor,
 } from '@chem-po/react'
-import { FC, PropsWithChildren, useEffect, useMemo, useRef } from 'react'
+import React, { FC, PropsWithChildren, useEffect, useMemo, useRef } from 'react'
 import { useFormContext, useFormState } from 'react-hook-form'
 import { ActivityIndicator, Animated, StyleSheet, Text, TouchableOpacity, View } from 'react-native'
 import { UploadProgress } from './UploadProgress'

package/src/components/form/UploadProgress/index.tsx

@@ -1,5 +1,5 @@
 import { UploadsState } from '@chem-po/core'
-import { useMemo } from 'react'
+import React, { useMemo } from 'react'
 import { Animated, StyleSheet, Text, View } from 'react-native'
 
 const styles = StyleSheet.create({

package/src/components/form/input/Editable.tsx

@@ -1,7 +1,7 @@
 import { palette } from '@chem-po/core'
 import { EditableProps, Field, useColorModeValue, useEditable } from '@chem-po/react'
 import { Ionicons } from '@expo/vector-icons'
-import { useEffect, useMemo } from 'react'
+import React, { useEffect, useMemo } from 'react'
 import { StyleSheet, TouchableOpacity, View, ViewStyle } from 'react-native'
 import { LoadingOverlay } from '../../loading/Loading'
 import { UploadProgress } from '../UploadProgress'

package/src/components/form/input/InputSlider.tsx

@@ -1,5 +1,6 @@
 import { Gradient } from '@chem-po/core'
 import Slider from '@react-native-community/slider'
+import React from 'react'
 import { StyleSheet, Text, View } from 'react-native'
 
 type SliderProps = React.ComponentProps<typeof Slider>

package/src/components/form/input/OptionalTag.tsx

@@ -1,5 +1,5 @@
 import { Field } from '@chem-po/react'
-import { useMemo } from 'react'
+import React, { useMemo } from 'react'
 import { StyleSheet, Text, View } from 'react-native'
 
 export const OptionalTag = <T extends Field>({

package/src/components/form/input/StandaloneInput.tsx

@@ -1,6 +1,6 @@
 import { InputRef } from '@chem-po/core'
 import { Field, useStandaloneInput } from '@chem-po/react'
-import { ForwardedRef, forwardRef } from 'react'
+import React, { ForwardedRef, forwardRef } from 'react'
 import { StyleProp, ViewStyle } from 'react-native'
 import { Input } from './input'
 

package/src/components/form/input/boolean/index.tsx

@@ -1,6 +1,6 @@
 import { InputRef } from '@chem-po/core'
 import { BooleanField } from '@chem-po/react'
-import { ForwardedRef, forwardRef, useImperativeHandle } from 'react'
+import React, { ForwardedRef, forwardRef, useImperativeHandle } from 'react'
 import { Switch, Text, View } from 'react-native'
 import { FieldProps } from '../../types'
 

package/src/components/form/input/color/index.tsx

@@ -1,6 +1,6 @@
 import { colorValueToHex, Gradient, gradients, InputRef } from '@chem-po/core'
 import { ColorField } from '@chem-po/react'
-import { forwardRef, useCallback, useMemo } from 'react'
+import React, { forwardRef, useCallback, useMemo } from 'react'
 import { StyleSheet, Text, View } from 'react-native'
 import { FieldProps } from '../../types'
 import { InputSlider } from '../InputSlider'

package/src/components/form/input/common/InputClearButton.tsx

@@ -1,5 +1,6 @@
 import { useBorderColor, useIconColor } from '@chem-po/react'
 import { Ionicons } from '@expo/vector-icons'
+import React from 'react'
 import { StyleSheet, TouchableOpacity } from 'react-native'
 
 export const InputClearButton = ({

package/src/components/form/input/date/index.tsx

@@ -1,7 +1,7 @@
 import { getDateString, InputRef } from '@chem-po/core'
 import { DateField, useIconColor } from '@chem-po/react'
 import { Ionicons } from '@expo/vector-icons'
-import { forwardRef, useImperativeHandle, useMemo } from 'react'
+import React, { forwardRef, useImperativeHandle, useMemo } from 'react'
 import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'
 import { Portal } from 'react-native-paper'
 import { DatePickerModal } from 'react-native-paper-dates'

package/src/components/form/input/datetime/index.tsx

@@ -1,7 +1,7 @@
 import { getDateTimeString, InputRef } from '@chem-po/core'
 import { DateTimeField, useIconColor } from '@chem-po/react'
 import { Ionicons } from '@expo/vector-icons'
-import { forwardRef, useCallback, useImperativeHandle, useMemo, useState } from 'react'
+import React, { forwardRef, useCallback, useImperativeHandle, useMemo, useState } from 'react'
 import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'
 import { Portal } from 'react-native-paper'
 import { DatePickerModal, TimePickerModal } from 'react-native-paper-dates'

package/src/components/form/input/file/index.tsx

@@ -9,7 +9,7 @@ import {
 import { Ionicons } from '@expo/vector-icons'
 import * as DocumentPicker from 'expo-document-picker'
 import * as ImagePicker from 'expo-image-picker'
-import { forwardRef, useCallback, useImperativeHandle, useMemo, useState } from 'react'
+import React, { forwardRef, useCallback, useImperativeHandle, useMemo, useState } from 'react'
 import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'
 import { LoadingImage } from '../../../loading/LoadingImage'
 import { FieldProps } from '../../types'

package/src/components/form/input/input.tsx

@@ -6,7 +6,13 @@ import {
   usePlaceholderColor,
   useThemeValue,
 } from '@chem-po/react'
-import { ForwardedRef, forwardRef, ForwardRefExoticComponent, useEffect, useMemo } from 'react'
+import React, {
+  ForwardedRef,
+  forwardRef,
+  ForwardRefExoticComponent,
+  useEffect,
+  useMemo,
+} from 'react'
 import { Animated, StyleSheet, Text, View, ViewStyle } from 'react-native'
 import { AnimatedText } from '../../text/AnimatedText'
 import { FieldProps } from '../types'

package/src/components/form/input/multipleSelect/index.tsx

@@ -1,6 +1,6 @@
 import { InputRef } from '@chem-po/core'
 import { MultipleSelectField, useColorMode, usePlaceholderColor } from '@chem-po/react'
-import { forwardRef, useImperativeHandle } from 'react'
+import React, { forwardRef, useImperativeHandle } from 'react'
 import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'
 import { FieldProps } from '../../types'
 

package/src/components/form/input/number/index.tsx

@@ -1,6 +1,6 @@
 import { InputRef } from '@chem-po/core'
 import { CurrencyAmountField, NumberField, usePlaceholderColor, useTextColor } from '@chem-po/react'
-import { ForwardedRef, forwardRef, useImperativeHandle, useRef, useState } from 'react'
+import React, { ForwardedRef, forwardRef, useImperativeHandle, useRef, useState } from 'react'
 import { StyleSheet, Text, TextInput, View } from 'react-native'
 import { FieldProps } from '../../types'
 import { InputSlider } from '../InputSlider'

package/src/components/form/input/select/index.tsx

@@ -7,7 +7,14 @@ import {
   usePlaceholderColor,
 } from '@chem-po/react'
 import { Ionicons } from '@expo/vector-icons'
-import { ForwardedRef, forwardRef, useImperativeHandle, useMemo, useRef, useState } from 'react'
+import React, {
+  ForwardedRef,
+  forwardRef,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
 import { Modal, ScrollView, StyleSheet, Text, TouchableOpacity, View } from 'react-native'
 import { Txt } from '../../../text/Txt'
 import { FieldProps } from '../../types'

package/src/components/form/input/socialMedia/index.tsx

@@ -1,6 +1,6 @@
 import { getHandle, InputRef, SocialMediaSites } from '@chem-po/core'
 import { SocialMediaField } from '@chem-po/react'
-import {
+import React, {
   FC,
   ForwardedRef,
   forwardRef,

package/src/components/form/input/text/index.tsx

@@ -1,7 +1,7 @@
 import { InputRef } from '@chem-po/core'
 import { TextField, usePlaceholderColor, useTextColor } from '@chem-po/react'
 import { Ionicons } from '@expo/vector-icons'
-import { forwardRef, useImperativeHandle, useRef, useState } from 'react'
+import React, { forwardRef, useImperativeHandle, useRef, useState } from 'react'
 import { StyleSheet, TextInput, TouchableOpacity, View } from 'react-native'
 import { FieldProps } from '../../types'
 import { TextAreaComponent } from './textarea'

package/src/components/form/input/text/textarea.tsx

@@ -1,6 +1,6 @@
 import { InputRef } from '@chem-po/core'
 import { TextField, usePlaceholderColor, useTextColor } from '@chem-po/react'
-import { forwardRef, useImperativeHandle, useRef } from 'react'
+import React, { forwardRef, useImperativeHandle, useRef } from 'react'
 import { StyleSheet, TextInput } from 'react-native'
 import { FieldProps } from '../../types'
 

package/src/components/form/input/time/index.tsx

@@ -1,7 +1,7 @@
 import { InputRef, padZeros } from '@chem-po/core'
 import { TimeField, useIconColor } from '@chem-po/react'
 import { Ionicons } from '@expo/vector-icons'
-import { forwardRef, useImperativeHandle, useMemo, useState } from 'react'
+import React, { forwardRef, useImperativeHandle, useMemo, useState } from 'react'
 import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'
 import { Portal } from 'react-native-paper'
 import { TimePickerModal } from 'react-native-paper-dates'

package/src/components/form/view/file.tsx

@@ -1,6 +1,6 @@
 import { ImageViewOptions } from '@chem-po/core'
 import { FileField } from '@chem-po/react'
-import { useMemo } from 'react'
+import React, { useMemo } from 'react'
 import { StyleSheet, Text, View, ViewStyle } from 'react-native'
 import { FileView } from '../input/file'
 

package/src/components/form/view/index.tsx

@@ -1,6 +1,6 @@
 import { formatField } from '@chem-po/core'
 import { Field } from '@chem-po/react'
-import { useMemo } from 'react'
+import React, { useMemo } from 'react'
 import { StyleSheet, Text, View, ViewStyle } from 'react-native'
 import { FileFieldView } from './file'
 import { MultipleSelectFieldView } from './multipleSelect'

package/src/components/form/view/multipleSelect.tsx

@@ -1,5 +1,5 @@
 import { MultipleSelectField } from '@chem-po/react'
-import { StyleSheet, Text, useColorScheme, View, ViewStyle } from 'react-native'
+import React, { StyleSheet, Text, useColorScheme, View, ViewStyle } from 'react-native'
 
 const styles = StyleSheet.create({
   container: {

package/src/components/form/view/select.tsx

@@ -1,4 +1,5 @@
 import { SelectField, usePlaceholderColor } from '@chem-po/react'
+import React from 'react'
 import { StyleSheet, Text, useColorScheme, View, ViewStyle } from 'react-native'
 import { Txt } from '../../text'
 

package/src/components/icons/index.tsx

@@ -1,4 +1,4 @@
-import { FC } from 'react'
+import React, { FC } from 'react'
 import { Path, Svg } from 'react-native-svg'
 
 interface IconProps {

package/src/components/loading/CircularProgress.tsx

@@ -1,5 +1,5 @@
 import { useColorModeValue } from '@chem-po/react'
-import { useEffect, useRef } from 'react'
+import React, { useEffect, useRef } from 'react'
 import {
   ActivityIndicator,
   ActivityIndicatorProps,

package/src/components/loading/Loading.tsx

@@ -1,6 +1,6 @@
 import { ThemedAsset, useAppAssets, useTheme } from '@chem-po/react'
 import LottieView from 'lottie-react-native'
-import { useMemo } from 'react'
+import React, { useMemo } from 'react'
 import { Image, StyleSheet, Text, View, ViewStyle } from 'react-native'
 
 export const LottieLoadingLogo = ({

package/src/components/loading/LoadingImage.tsx

@@ -1,6 +1,6 @@
 import { useMounted } from '@chem-po/react'
 import { Ionicons } from '@expo/vector-icons'
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { DimensionValue, Image, StyleSheet, TouchableOpacity, View, ViewStyle } from 'react-native'
 import { ImageViewOverlay } from '../overlay/ImageViewOverlay'
 import { LoadingLogo } from './Loading'

package/src/components/loading/LoadingSwitch.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useState } from 'react'
+import React, { useCallback, useState } from 'react'
 import { Animated, StyleSheet, Switch, Text, View } from 'react-native'
 import { Loading } from './Loading'
 

package/src/components/overlay/ImageViewOverlay.tsx

@@ -1,6 +1,6 @@
 import { useScreen } from '@chem-po/react'
 import { Ionicons } from '@expo/vector-icons'
-import { useCallback, useMemo, useState } from 'react'
+import React, { useCallback, useMemo, useState } from 'react'
 import { Image, Modal, StyleSheet, TouchableOpacity, View } from 'react-native'
 import { LoadingLogo } from '../loading/Loading'
 

package/src/components/text/AnimatedText.tsx

@@ -1,4 +1,4 @@
-import { PropsWithChildren, useEffect, useMemo, useRef } from 'react'
+import React, { PropsWithChildren, useEffect, useMemo, useRef } from 'react'
 import { Animated, StyleProp, TextStyle } from 'react-native'
 
 export interface AnimatedTextProps {

package/src/components/text/Txt.tsx

@@ -1,4 +1,5 @@
 import { useTextColor } from '@chem-po/react'
+import React from 'react'
 import { Text, TextProps } from 'react-native'
 
 export const Txt = ({ children, ...props }: TextProps) => {

package/src/components/theme/colorMode/DarkModeToggle.tsx

@@ -1,5 +1,6 @@
 import { useBackgroundColor, useIconColor, useTheme } from '@chem-po/react'
 import { Ionicons } from '@expo/vector-icons'
+import React from 'react'
 import { StyleSheet, TouchableOpacity, View } from 'react-native'
 
 export const DarkModeToggle = () => {

package/src/contexts/root.tsx

@@ -1,6 +1,6 @@
 import { BackendAdapterInterface, ColorMode, Theme } from '@chem-po/core'
 import { ChempoProps, ChempoProvider } from '@chem-po/react'
-import { PropsWithChildren, useMemo } from 'react'
+import React, { PropsWithChildren, useMemo } from 'react'
 import { NotifierWrapper } from 'react-native-notifier'
 import { en, registerTranslation } from 'react-native-paper-dates'
 import { nativeToast } from '../constants/toast'