@tecsinapse/react-native-kit 3.4.2 → 3.5.0-beta.0

package/dist/esm/components/molecules/Select/hooks/useModal.js

@@ -0,0 +1,107 @@
+import React__default from 'react';
+import { getStyledModal } from '../styled.js';
+import Component from '../components/Option.js';
+import { useDebouncedState, getStatusBarHeight } from '@tecsinapse/react-core';
+import { isOptionChecked, multiBuilder, singleBuilder } from '../functions.js';
+
+const useModal = ({
+  keyExtractor,
+  labelExtractor,
+  focused,
+  type,
+  value,
+  onSelect,
+  onSearch,
+  close,
+  closeOnPick,
+  ...others
+}) => {
+  const [selectedValues, setSelectedValues] = React__default.useState([]);
+  const [searchArg, setSearchArg] = useDebouncedState("", onSearch);
+  const ModalComponent = React__default.useMemo(
+    () => getStyledModal(getStatusBarHeight(true)),
+    []
+  );
+  const _closeOnPick = closeOnPick && type === "single";
+  React__default.useEffect(() => {
+    setSelectedValues(
+      value ? type === "multi" ? value : [value] : []
+    );
+  }, [value, focused, setSelectedValues]);
+  const getData = React__default.useCallback(
+    (_options) => {
+      return _options.map((option, index) => {
+        return {
+          ...option,
+          _checked: isOptionChecked(
+            type,
+            option,
+            selectedValues,
+            keyExtractor,
+            index
+          )
+        };
+      });
+    },
+    [type, selectedValues, keyExtractor]
+  );
+  const handlePressItem = React__default.useCallback(
+    (option) => {
+      setSelectedValues(
+        (prev) => type === "multi" ? multiBuilder(option, prev, keyExtractor) : singleBuilder(option, prev, keyExtractor)
+      );
+    },
+    [keyExtractor, type]
+  );
+  React__default.useEffect(() => {
+    if (_closeOnPick && selectedValues[0] && selectedValues[0] !== value) {
+      handleConfirm();
+    }
+  }, [selectedValues[0], value, closeOnPick]);
+  const handleConfirm = React__default.useCallback(() => {
+    onSelect(
+      type === "single" ? selectedValues[0] : selectedValues
+    );
+    close?.();
+  }, [selectedValues]);
+  const renderItem = React__default.useCallback(
+    ({ item }) => /* @__PURE__ */ React__default.createElement(
+      Component,
+      {
+        item,
+        type,
+        handlePressItem: (t) => {
+          handlePressItem(t);
+        },
+        labelExtractor
+      }
+    ),
+    [type, handlePressItem, labelExtractor]
+  );
+  return {
+    /**
+     * Hook props
+     */
+    searchArg,
+    setSearchArg,
+    ModalComponent,
+    renderItem,
+    getData,
+    handleConfirm,
+    /**
+     * Component props
+     */
+    keyExtractor,
+    labelExtractor,
+    focused,
+    type,
+    value,
+    onSelect,
+    onSearch,
+    close,
+    closeOnPick: _closeOnPick,
+    ...others
+  };
+};
+
+export { useModal as default };

package/dist/esm/components/molecules/Select/hooks/useSelect.js

@@ -0,0 +1,145 @@
+import React__default, { useState, useEffect } from 'react';
+import 'react-native';
+import { useInputFocus } from '@tecsinapse/react-core';
+import 'react-native-safe-area-context';
+import '../../../atoms/Modal/ui/styled.js';
+import { useLazyModalManager } from '../../../atoms/Modal/useLazyModalManager.js';
+import { findValue, getMultiLabel, getSingleLabel } from '../functions.js';
+
+const useSelect = ({
+  value,
+  options,
+  keyExtractor,
+  type,
+  labelExtractor,
+  placeholder,
+  onFocus,
+  onBlur,
+  disabled,
+  onSearch,
+  label,
+  ...rest
+}) => {
+  const { focused, handleBlur, handleFocus } = useInputFocus(
+    onFocus,
+    onBlur,
+    !disabled
+  );
+  const [selectOptions, setSelectOptions] = useState([]);
+  const modal = useLazyModalManager();
+  const [loading, setLoading] = useState(false);
+  const onlyLabel = label && !placeholder;
+  const hasValue = type === "single" ? !!value : (value || []).length > 0;
+  const _placeholder = onlyLabel ? label : placeholder;
+  const _label = hasValue ? label : void 0;
+  useEffect(() => {
+    if (typeof options !== "function") {
+      setSelectOptions(options);
+    }
+  }, [options]);
+  const handleLazyFocus = React__default.useCallback(async () => {
+    if (typeof options === "function" && !onSearch) {
+      setLoading(true);
+      try {
+        const result = await options();
+        if (result) {
+          const _value = value;
+          if (_value && !(result instanceof Map) && !findValue(result, _value, keyExtractor)) {
+            setSelectOptions([_value, ...result]);
+          } else setSelectOptions(result);
+        }
+      } catch (e) {
+      } finally {
+        setLoading(false);
+      }
+    }
+  }, [options, value, setSelectOptions]);
+  const handleOnSearch = React__default.useCallback(
+    async (searchInput) => {
+      if (searchInput !== void 0 && onSearch) {
+        setLoading(true);
+        modal.requestUpdate();
+        try {
+          const result = await onSearch(searchInput);
+          if (result) {
+            if (type === "single") {
+              const _value = value;
+              if (_value && !(result instanceof Map) && !findValue(result, _value, keyExtractor)) {
+                setSelectOptions([_value, ...result]);
+              } else setSelectOptions(result);
+            } else {
+              const _value = value;
+              if (_value?.length && !(result instanceof Map)) {
+                const selected = _value.filter((it) => !findValue(result, it, keyExtractor)) ?? [];
+                setSelectOptions([...selected, ...result]);
+              } else {
+                setSelectOptions(result);
+              }
+            }
+          }
+        } catch (e) {
+        } finally {
+          modal.requestUpdate();
+          setLoading(false);
+        }
+      }
+    },
+    [options, value, keyExtractor]
+  );
+  const getDisplayValue = React__default.useCallback(() => {
+    if (Array.isArray(value)) {
+      return getMultiLabel(
+        value,
+        String(_placeholder),
+        selectOptions,
+        keyExtractor,
+        labelExtractor
+      );
+    } else {
+      return getSingleLabel(
+        value,
+        String(_placeholder),
+        selectOptions,
+        keyExtractor,
+        labelExtractor
+      );
+    }
+  }, [_placeholder, value, selectOptions]);
+  const handlePressInput = async () => {
+    modal.show();
+    handleFocus();
+    await handleLazyFocus();
+  };
+  return {
+    /**
+     * Hook props
+     */
+    focused,
+    handleBlur,
+    handlePressInput,
+    getDisplayValue,
+    handleOnSearch,
+    _label,
+    loading,
+    modal,
+    selectOptions,
+    setSelectOptions,
+    /**
+     * Component props
+     */
+    value,
+    options,
+    keyExtractor,
+    type,
+    labelExtractor,
+    placeholder,
+    onFocus,
+    onBlur,
+    disabled,
+    onSearch,
+    label,
+    ...rest
+  };
+};
+
+export { useSelect as default };

package/dist/esm/components/molecules/Select/styled.js

@@ -31,8 +31,6 @@ const SearchBarContainer = styled(View)`
   position: relative;
 `;
 const ListItem = styled(PressableSurface)`
-  border-bottom-width: ${RFValueStr("1px")};
-  border-color: ${({ theme }) => theme.color.secondary.light};
   padding-top: ${({ theme }) => theme.spacing.mili};
   padding-bottom: ${({ theme }) => theme.spacing.mili};
   padding-left: ${({ theme }) => theme.spacing.deca};
@@ -58,5 +56,15 @@ const TextTitleModal = styled(Text)`
 const StyledTextItemSelect = styled(Text)`
   width: 90%;
 `;
+const Divider = styled(View)`
+  height: ${RFValueStr("1px")};
+  display: flex;
+  flex: 1 1 auto;
+  background-color: ${({ theme }) => theme.color.secondary.light};
+`;
+const SectionHeader = styled(View)`
+  background-color: #fff;
+  padding: ${({ theme }) => theme.spacing.deca};
+`;
 
-export { FetchIndicator, ListItem, ModalFooter, SearchBarContainer, SelectIcon, StyledSelectionText, StyledTextItemSelect, TextTitleModal, getStyledModal };
+export { Divider, FetchIndicator, ListItem, ModalFooter, SearchBarContainer, SectionHeader, SelectIcon, StyledSelectionText, StyledTextItemSelect, TextTitleModal, getStyledModal };

package/dist/types/components/molecules/Select/Select.d.ts

@@ -1,25 +1,4 @@
 /// <reference types="react" />
-import { InputContainerProps } from '@tecsinapse/react-core';
-export interface SelectNativeProps<Data, Type extends 'single' | 'multi'> extends Omit<InputContainerProps, 'value' | 'onChange' | 'onChangeText'> {
-    options: ((searchInput?: string) => Promise<Data[]>) | Data[];
-    onSelect: (option: Type extends 'single' ? Data | undefined : Data[]) => never | void;
-    value: Type extends 'single' ? Data | null | undefined : Data[];
-    type: Type;
-    keyExtractor: (t: Data, index?: number) => string;
-    labelExtractor: (t: Data) => string;
-    groupKeyExtractor?: (t: Data) => string;
-    hideSearchBar?: boolean;
-    placeholder?: string;
-    onFocus?: () => void | never;
-    onBlur?: () => void | never;
-    onSearch?: ((searchArg: string) => void) | ((searchInput?: string) => Promise<Data[]>) | never;
-    searchBarPlaceholder?: string;
-    confirmButtonText?: string;
-    selectModalTitle?: string;
-    selectModalTitleComponent?: JSX.Element;
-    closeOnPick?: boolean;
-    controlComponent?: (onPress: () => void, displayValue?: string) => JSX.Element;
-    numberOfLines?: number;
-}
-declare function Select<Data, Type extends 'single' | 'multi'>({ value, options, keyExtractor, groupKeyExtractor, onSelect, type, labelExtractor, placeholder, onFocus, onBlur, disabled, onSearch, selectModalTitle, selectModalTitleComponent, searchBarPlaceholder, hideSearchBar, confirmButtonText, rightComponent, variant, hintComponent, hint, style, controlComponent, closeOnPick, label, numberOfLines, ...rest }: SelectNativeProps<Data, Type>): JSX.Element;
+import { SelectNativeProps, SelectType } from './types';
+declare function Select<Data, Type extends SelectType>(props: SelectNativeProps<Data, Type>): JSX.Element;
 export default Select;

package/dist/types/components/molecules/Select/components/Flat.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+declare const Flat: ({ options, keyExtractor, renderItem, getData }: {
+    options: any;
+    keyExtractor: any;
+    renderItem: any;
+    getData: any;
+}) => JSX.Element;
+export default Flat;

package/dist/types/components/molecules/Select/components/Modal.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { IBaseModal } from '../../../atoms/Modal';
+import { LoadingProps, SelectNativeProps, SelectType } from '../types';
+export declare const Modal: <Data, Type extends SelectType>(props: SelectNativeProps<Data, Type> & LoadingProps & IBaseModal) => JSX.Element;

package/dist/types/components/molecules/Select/components/Option.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { OptionData, SelectType } from '../types';
+interface IOption<Data> {
+    item: OptionData<Data>;
+    type: SelectType;
+    labelExtractor: (t: Data) => string;
+    handlePressItem: (t: Data) => void;
+}
+declare const Component: <Data>({ handlePressItem, labelExtractor, item, type, }: IOption<Data>) => JSX.Element;
+export default Component;

package/dist/types/components/molecules/Select/components/Section.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+declare const Section: ({ options, renderItem, getData, keyExtractor }: {
+    options: any;
+    renderItem: any;
+    getData: any;
+    keyExtractor: any;
+}) => JSX.Element;
+export default Section;

package/dist/types/components/molecules/Select/functions.d.ts

@@ -0,0 +1,9 @@
+import { Extractor, SelectType } from './types';
+export declare const findValue: <Data>(array: Data[], value: Data, keyExtractor: Extractor<Data>, idx?: number) => Data | undefined;
+export declare const isOptionChecked: <Data>(type: SelectType, option: Data, src: Data[], keyExtractor: Extractor<Data>, idx: number) => boolean;
+export declare const multiBuilder: <Data>(option: Data, src: Data[], keyExtractor: Extractor<Data>) => Data[];
+export declare const singleBuilder: <Data>(option: Data, src: Data[], keyExtractor: Extractor<Data>) => Data[];
+export declare const isMap: <Data>(value: Data[] | Map<string, Data[]>) => boolean;
+export declare const mapToArray: <Data>(map: Map<string, Data[]>) => Data[];
+export declare const getMultiLabel: <Data>(value: Data[], placeholder: string, options: Data[] | Map<string, Data[]>, keyExtractor: Extractor<Data>, labelExtractor: Extractor<Data>) => string;
+export declare const getSingleLabel: <Data>(value: Data, placeholder: string, options: Data[] | Map<string, Data[]>, keyExtractor: Extractor<Data>, labelExtractor: Extractor<Data>) => string;

package/dist/types/components/molecules/Select/hooks/useModal.d.ts

@@ -0,0 +1,66 @@
+import React from 'react';
+import { LoadingProps, OptionData, SelectNativeProps, SelectType } from '../types';
+import { ListRenderItemInfo } from 'react-native';
+import { IBaseModal } from '../../../atoms/Modal';
+declare const useModal: <Data, Type extends SelectType>({ keyExtractor, labelExtractor, focused, type, value, onSelect, onSearch, close, closeOnPick, ...others }: SelectNativeProps<Data, Type> & LoadingProps & IBaseModal) => {
+    options: ((searchInput?: string | undefined) => Promise<Data[] | Map<string, Data[]>>) | Data[] | Map<string, Data[]>;
+    groupKeyExtractor?: import("../types").Extractor<Data> | undefined;
+    hideSearchBar?: boolean | undefined;
+    placeholder?: string | undefined;
+    onFocus?: (() => void) | undefined;
+    onBlur?: (() => void) | undefined;
+    searchBarPlaceholder?: string | undefined;
+    confirmButtonText?: string | undefined;
+    selectModalTitle?: string | undefined;
+    selectModalTitleComponent?: JSX.Element | undefined;
+    controlComponent?: ((onPress: () => void, displayValue?: string | undefined) => JSX.Element) | undefined;
+    numberOfLines?: number | undefined;
+    label?: string | undefined;
+    style?: import("react-native").StyleProp<import("react-native").ViewStyle>;
+    testID?: string | undefined;
+    borderColor?: keyof import("@tecsinapse/react-core").Color | undefined;
+    disabled?: boolean | undefined;
+    variant?: import("@tecsinapse/react-core").InputVariantType | undefined;
+    labelColor?: keyof import("@tecsinapse/react-core").FontColor | undefined;
+    labelColorVariant?: keyof import("@tecsinapse/react-core").Color | undefined;
+    labelColorTone?: keyof import("@tecsinapse/react-core").ColorGradation | undefined;
+    labelTypography?: keyof import("@tecsinapse/react-core").TypographyVariation | undefined;
+    labelStack?: keyof import("@tecsinapse/react-core").FontStack | undefined;
+    LabelComponent?: React.FC<import("@tecsinapse/react-core").TextProps> | undefined;
+    labelWeight?: keyof import("@tecsinapse/react-core").FontWeight | undefined;
+    leftComponent?: JSX.Element | undefined;
+    rightComponent?: JSX.Element | undefined;
+    borderColorGradation?: keyof import("@tecsinapse/react-core").ColorGradation | undefined;
+    inputContainerStyle?: import("react-native").StyleProp<import("react-native").ViewStyle>;
+    hint?: string | undefined;
+    hintComponent?: JSX.Element | undefined;
+    loading?: boolean | undefined;
+    visible?: boolean | undefined;
+    BoxComponent?: React.FC<any> | undefined;
+    frozen?: boolean | undefined;
+    isLastShown?: boolean | undefined;
+    showCloseBar?: boolean | undefined;
+    onClose?: (() => void) | undefined;
+    children?: React.ReactNode;
+    searchArg: string;
+    setSearchArg: React.Dispatch<React.SetStateAction<string>>;
+    ModalComponent: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: React.ElementType<any> | undefined;
+    } & import("react-native").ModalBaseProps & import("react-native").ModalPropsIOS & import("react-native").ModalPropsAndroid & Partial<import("@tecsinapse/react-core").ThemeProviderProps>, {}, {
+        ref?: React.Ref<import("react-native").View> | undefined;
+    }>;
+    renderItem: ({ item }: ListRenderItemInfo<OptionData<Data>>) => JSX.Element;
+    getData: (_options: Data[]) => OptionData<Data>[];
+    handleConfirm: () => void;
+    keyExtractor: import("../types").Extractor<Data>;
+    labelExtractor: import("../types").Extractor<Data>;
+    focused: boolean | undefined;
+    type: Type;
+    value: Type extends "single" ? Data | null | undefined : Data[];
+    onSelect: (option: Type extends "single" ? Data | undefined : Data[]) => void;
+    onSearch: ((searchArg: string) => void) | ((searchInput?: string | undefined) => Promise<Data[] | Map<string, Data[]>>) | undefined;
+    close: (() => void) | undefined;
+    closeOnPick: boolean | undefined;
+};
+export default useModal;

package/dist/types/components/molecules/Select/hooks/useSelect.d.ts

@@ -0,0 +1,58 @@
+import React from 'react';
+import { SelectNativeProps, SelectType } from '../types';
+declare const useSelect: <Data, Type extends SelectType>({ value, options, keyExtractor, type, labelExtractor, placeholder, onFocus, onBlur, disabled, onSearch, label, ...rest }: SelectNativeProps<Data, Type>) => {
+    onSelect: (option: Type extends "single" ? Data | undefined : Data[]) => void;
+    groupKeyExtractor?: import("../types").Extractor<Data> | undefined;
+    hideSearchBar?: boolean | undefined;
+    searchBarPlaceholder?: string | undefined;
+    confirmButtonText?: string | undefined;
+    selectModalTitle?: string | undefined;
+    selectModalTitleComponent?: JSX.Element | undefined;
+    closeOnPick?: boolean | undefined;
+    controlComponent?: ((onPress: () => void, displayValue?: string | undefined) => JSX.Element) | undefined;
+    numberOfLines?: number | undefined;
+    style?: import("react-native").StyleProp<import("react-native").ViewStyle>;
+    testID?: string | undefined;
+    borderColor?: keyof import("@tecsinapse/react-core").Color | undefined;
+    variant?: import("@tecsinapse/react-core").InputVariantType | undefined;
+    labelColor?: keyof import("@tecsinapse/react-core").FontColor | undefined;
+    labelColorVariant?: keyof import("@tecsinapse/react-core").Color | undefined;
+    labelColorTone?: keyof import("@tecsinapse/react-core").ColorGradation | undefined;
+    labelTypography?: keyof import("@tecsinapse/react-core").TypographyVariation | undefined;
+    labelStack?: keyof import("@tecsinapse/react-core").FontStack | undefined;
+    LabelComponent?: React.FC<import("@tecsinapse/react-core").TextProps> | undefined;
+    labelWeight?: keyof import("@tecsinapse/react-core").FontWeight | undefined;
+    leftComponent?: JSX.Element | undefined;
+    rightComponent?: JSX.Element | undefined;
+    borderColorGradation?: keyof import("@tecsinapse/react-core").ColorGradation | undefined;
+    inputContainerStyle?: import("react-native").StyleProp<import("react-native").ViewStyle>;
+    focused: boolean;
+    hint?: string | undefined;
+    hintComponent?: JSX.Element | undefined;
+    handleBlur: () => void;
+    handlePressInput: () => Promise<void>;
+    getDisplayValue: () => string;
+    handleOnSearch: (searchInput: string | undefined) => Promise<void>;
+    _label: string | undefined;
+    loading: boolean;
+    modal: {
+        requestUpdate: () => void;
+        sync: (modal: React.ReactElement<import("../../../atoms/Modal").IBaseModal, string | React.JSXElementConstructor<any>>) => null;
+        show: () => void;
+        close: () => void;
+    };
+    selectOptions: Data[] | Map<string, Data[]>;
+    setSelectOptions: React.Dispatch<React.SetStateAction<Data[] | Map<string, Data[]>>>;
+    value: Type extends "single" ? Data | null | undefined : Data[];
+    options: ((searchInput?: string | undefined) => Promise<Data[] | Map<string, Data[]>>) | Data[] | Map<string, Data[]>;
+    keyExtractor: import("../types").Extractor<Data>;
+    type: Type;
+    labelExtractor: import("../types").Extractor<Data>;
+    placeholder: string | undefined;
+    onFocus: (() => void) | undefined;
+    onBlur: (() => void) | undefined;
+    disabled: boolean | undefined;
+    onSearch: ((searchArg: string) => void) | ((searchInput?: string | undefined) => Promise<Data[] | Map<string, Data[]>>) | undefined;
+    label: string | undefined;
+};
+export default useSelect;

package/dist/types/components/molecules/Select/index.d.ts

@@ -1,2 +1,2 @@
 export { default as Select } from './Select';
-export type { SelectNativeProps } from './Select';
+export type { SelectNativeProps } from './types';

package/dist/types/components/molecules/Select/styled.d.ts

@@ -51,3 +51,15 @@ export declare const StyledTextItemSelect: import("@emotion/native").StyledCompo
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, {}, {}>;
+export declare const Divider: import("@emotion/native").StyledComponent<ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & Partial<import("@tecsinapse/react-core").ThemeProviderProps>, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+export declare const SectionHeader: import("@emotion/native").StyledComponent<ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & Partial<import("@tecsinapse/react-core").ThemeProviderProps>, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;

package/dist/types/components/molecules/Select/types.d.ts

@@ -0,0 +1,33 @@
+/// <reference types="react" />
+import { InputContainerProps } from '@tecsinapse/react-core';
+export type OptionData<T> = T & {
+    _checked: boolean;
+};
+export type SelectType = 'single' | 'multi';
+export interface LoadingProps {
+    loading?: boolean;
+}
+type SearchFn<Data> = (searchInput?: string) => Promise<Data[] | Map<string, Data[]>>;
+export type Extractor<Data> = (t: Data, index?: number) => string;
+export interface SelectNativeProps<Data, Type extends SelectType> extends Omit<InputContainerProps, 'value' | 'onChange' | 'onChangeText'> {
+    options: SearchFn<Data> | Data[] | Map<string, Data[]>;
+    onSelect: (option: Type extends 'single' ? Data | undefined : Data[]) => never | void;
+    value: Type extends 'single' ? Data | null | undefined : Data[];
+    type: Type;
+    keyExtractor: Extractor<Data>;
+    labelExtractor: Extractor<Data>;
+    groupKeyExtractor?: Extractor<Data>;
+    hideSearchBar?: boolean;
+    placeholder?: string;
+    onFocus?: () => void | never;
+    onBlur?: () => void | never;
+    onSearch?: ((searchArg: string) => void) | SearchFn<Data> | never;
+    searchBarPlaceholder?: string;
+    confirmButtonText?: string;
+    selectModalTitle?: string;
+    selectModalTitleComponent?: JSX.Element;
+    closeOnPick?: boolean;
+    controlComponent?: (onPress: () => void, displayValue?: string) => JSX.Element;
+    numberOfLines?: number;
+}
+export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tecsinapse/react-native-kit",
-  "description": "TecSinapse React Native components",
-  "version": "3.4.2",
+  "description": "React Native components library",
+  "version": "3.5.0-beta.0",
   "license": "MIT",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",
@@ -20,9 +20,12 @@
   "dependencies": {
     "@emotion/native": "~11.11.0",
     "@emotion/react": "~11.11.0",
-    "@tecsinapse/react-core": "3.4.0",
+    "@tecsinapse/react-core": "3.4.1-beta.0",
     "react-native-linear-gradient": "~2.8.3"
   },
+  "devDependencies": {
+    "react-native-safe-area-context": "^4"
+  },
   "repository": {
     "type": "git",
     "directory": "packages/react-native-kit",
@@ -33,11 +36,11 @@
   },
   "homepage": "https://tecsinapse.github.io/design-system/",
   "peerDependencies": {
-    "react": "^18.0.0",
-    "react-native": "^0.71.0",
+    "react": ">=18.0.0",
+    "react-native": ">=0.71.0",
     "react-native-linear-gradient": "^2.5.6",
     "react-native-safe-area-context": "^4.0.0",
     "react-native-vector-icons": "^9.2.0"
   },
-  "gitHead": "73cc1951c6a97b8538232602506ccfdb2623c90b"
+  "gitHead": "1218e25f944ce08275fdb79e411883667a0a3e45"
 }