ikualo-ui-kit-mobile 1.3.4 → 1.3.6

package/assets/styles/elements/buttons.ts

@@ -221,10 +221,32 @@ const getStylesButtonCircle = (theme: ITheme) =>
     },
   });
 
+const getStylesButtonActionCircle = (theme: ITheme) =>
+  StyleSheet.create({
+    'btn-container-item': {
+      display: 'flex',
+      width: 48,
+      height: 48,
+      justifyContent: 'center',
+      borderRadius: 50,
+      alignItems: 'center',
+      backgroundColor: theme?.colors.primary_50,
+    },
+
+    'btn-text-item': {
+      fontFamily: 'MontserratSemiBold',
+      fontSize: 10,
+      lineHeight: 15,
+      color: theme?.colors.text_p,
+      textAlign: 'center',
+    },
+  });
+
 export {
   getStylesButtonContained,
   getStylesButtonOutlined,
   getStylesButtonText,
   getStylesBtnLightSmall,
   getStylesButtonCircle,
+  getStylesButtonActionCircle,
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ikualo-ui-kit-mobile",
-  "version": "1.3.4",
+  "version": "1.3.6",
   "main": "src/index.ts",
   "scripts": {
     "start": "expo start",
@@ -14,7 +14,7 @@
     "@react-navigation/bottom-tabs": "^6.5.20",
     "@react-navigation/native": "^6.1.17",
     "@react-navigation/stack": "^6.3.29",
-    "expo": "52.0.24",
+    "expo": "~52.0.20",
     "expo-application": "~6.0.1",
     "expo-linear-gradient": "~14.0.1",
     "expo-updates": "~0.26.10",
@@ -25,7 +25,6 @@
     "react-native-gesture-handler": "~2.20.2",
     "react-native-paper": "^5.12.3",
     "react-native-screens": "~4.4.0",
-    "react-native-svg": "15.8.0",
     "react-native-web": "~0.19.13",
     "zustand": "^5.0.2"
   },

package/src/elements/buttons/BtnActionCircle.tsx

@@ -0,0 +1,21 @@
+import { getStylesBtnLightSmall, getStylesButtonActionCircle } from '../../../assets/styles/elements/buttons';
+import { View } from 'react-native';
+import { Text } from '../..';
+import { IFBtnActionCircleItem } from '../../models';
+import { TouchableWithoutFeedback } from 'react-native-gesture-handler';
+import useStore from '../../store';
+
+export const BtnLightSmall = (props: { item: IFBtnActionCircleItem }) => {
+  const { item } = props;
+  const theme = useStore().theme;
+  const stylesCards = getStylesButtonActionCircle(theme);
+
+  return (
+    <TouchableWithoutFeedback onPress={item.action}>
+      <View style={{ width: 80, display: 'flex', alignItems: 'center' }}>
+        <View style={stylesCards['btn-container-item']}>{item.icon}</View>
+        <Text style={stylesCards['btn-text-item']}>{item.nameItem}</Text>
+      </View>
+    </TouchableWithoutFeedback>
+  );
+};

package/src/models/interfaces.models.ts

@@ -329,3 +329,9 @@ export interface ICardAds {
   iconBtn: ReactElement;
   textBtn: string;
 }
+
+export interface IFBtnActionCircleItem {
+  icon: JSX.Element;
+  nameItem: string;
+  action: () => void;
+}

package/.expo/devices.json

@@ -1,3 +0,0 @@
-{
-  "devices": []
-}