@bigbinary/neetoui-rn 0.0.123 → 0.0.126

package/src/components/index.js

@@ -1,4 +1,5 @@
 export { Button } from "./Button";
+export { SocialButton } from "./SocialButton";
 export { Container } from "./Container";
 export { Typography } from "./Typography";
 export { Input } from "./Input";
@@ -25,3 +26,8 @@ export { MultiSelect } from "./MultiSelect";
 export { Divider } from "./Divider";
 export { FlatList } from "./FlatList";
 export { ScrollView } from "./ScrollView";
+export { SegmentPicker } from "./SegmentPicker";
+export { ListItem } from "./ListItem";
+export { Carousel } from "./Carousel";
+export { OnBoarding } from "./OnBoarding";
+export { SearchBar } from "./SearchBar";

package/src/config/toasterConfig.js

@@ -121,12 +121,12 @@ const styles = StyleSheet.create({
   },
   text1Style: {
     fontSize: 15,
-    fontFamily: theme.fonts.inter700,
+    fontFamily: theme.fonts.sf700,
     color: theme.colors.font.white,
   },
   text2Style: {
     fontSize: 16,
-    fontFamily: theme.fonts.inter700,
+    fontFamily: theme.fonts.sf700,
     color: theme.colors.font.white,
   },
   closeButtonStyle: {

package/src/hooks/index.js

@@ -1 +1,2 @@
 export { useKeyboard } from "./useKeyboard";
+export { useDebounce } from "./useDebounce";

package/src/hooks/useDebounce.js

@@ -0,0 +1,16 @@
+import { useState, useEffect } from "react";
+
+export function useDebounce(value, delay) {
+  const [debouncedValue, setDebouncedValue] = useState(value);
+
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [value, delay]);
+
+  return debouncedValue;
+}

package/src/theme/index.js

@@ -1,19 +1,19 @@
 const defaultColors = {
   white: "#ffffff",
   black: "#000000",
-  base: "#2f3941",
+  base: "#4557F8",
   danger: "#ff6969",
-  menubackground: "#f4f5f7",
+  menubackground: "#F6F6FA",
 };
 
 const toastBorderColors = {
-  success: "#5cb85c",
-  error: "#d9534f",
-  info: "#5bc0de",
-  warning: "#f0ad4e",
+  success: "#00BA88",
+  error: "#F56A58",
+  info: "#276EF1",
+  warning: "#F3CD82",
 };
 
-const greyVarients = {
+const greyVariants = {
   grey: "#828282",
   grey100: "#f8f9f9",
   grey200: "#e9ebed",
@@ -21,27 +21,48 @@ const greyVarients = {
   grey400: "#c2c8cc",
   grey500: "#87929d",
   grey600: "#68737d",
+  grey700: "#49545C",
   grey800: "#2f3941",
 };
 
+const purpleVariants = {
+  purple800: "#342DF4",
+  purple700: "#4557F8",
+  purple600: "#7280FA",
+  purple500: "#5E5CE6",
+};
+
+const greenVariants = {
+  green800: "#00956D",
+  green700: "#00BA88",
+  green600: "#33C8A0",
+  green500: "#34C759",
+};
+
 const colors = {
   font: {
-    primary: "#1b1f23",
-    secondary: "#828282",
+    primary: "#2F3941",
+    secondary: "#49545C",
     ...defaultColors,
-    ...greyVarients,
+    ...greyVariants,
+    ...purpleVariants,
+    ...greenVariants,
   },
   background: {
     parentView: "#ffffff",
     primary: "#ffffff",
-    secondary: "#e4e4e7",
+    secondary: "#F6F6FA",
     ...defaultColors,
-    ...greyVarients,
+    ...greyVariants,
+    ...purpleVariants,
+    ...greenVariants,
   },
   border: {
-    primary: "#e4e4e7",
-    ...greyVarients,
+    primary: "#E9EBED",
+    secondary: "#C2C8CC",
+    ...greyVariants,
     ...defaultColors,
+    ...purpleVariants,
   },
   toast: {
     ...toastBorderColors,
@@ -54,25 +75,30 @@ const baseTheme = {
     // We can add below commented fonts later as follows. Also add font faces in index.web.js for the web.
     // https://www.bigbinary.com/learn-react-native/adding-custom-fonats
 
-    // inter100: "Inter-Thin",
-    // inter200: "Inter-ExtraLight",
-    // inter300: "Inter-Light",
-    // inter500: "Inter-Medium",
-    // inter600: "Inter-SemiBold",
-    // inter800: "Inter-ExtraBold",
-    // inter900: "Inter-Black",
+    // sf100: "SFProText-Thin",
+    // sf200: "SFProText-ExtraLight",
+    // sf300: "SFProText-Light",
+    // sf800: "SFProText-ExtraBold",
+    // sf900: "SFProText-Black",
 
-    inter400: "Inter-Regular",
-    inter700: "Inter-Bold",
+    sf400: "SFProText-Regular",
+    sf500: "SFProText-Medium",
+    sf600: "SFProText-Semibold",
+    sf700: "SFProText-Bold",
   },
   lineHeights: [24],
   fontSizes: {
-    xs: 10,
-    s: 12,
-    m: 14,
-    l: 18,
-    xl: 24,
-    xxl: 32,
+    "3xs": 10,
+    "2xs": 12,
+    xs: 13,
+    s: 14,
+    m: 15,
+    l: 16,
+    xl: 17,
+    "2xl": 18,
+    "3xl": 20,
+    "4xl": 22,
+    "5xl": 30,
   },
 };
 
@@ -87,16 +113,21 @@ export const theme = {
     },
     header: {
       color: baseTheme.colors.font.primary,
-      fontSize: baseTheme.fontSizes.l,
-      fontFamily: baseTheme.fonts.inter700,
+      fontSize: baseTheme.fontSizes["3xl"],
+      fontFamily: baseTheme.fonts.sf700,
+    },
+    modalHeader: {
+      color: baseTheme.colors.font.black,
+      fontSize: baseTheme.fontSizes["xl"],
+      fontFamily: baseTheme.fonts.sf600,
     },
     body: {
-      color: baseTheme.colors.font.primary,
-      fontSize: baseTheme.fontSizes.m,
+      color: baseTheme.colors.font.grey500,
+      fontSize: baseTheme.fontSizes.s,
     },
     subtext: {
       color: baseTheme.colors.font.primary,
-      fontSize: baseTheme.fontSizes.s,
+      fontSize: baseTheme.fontSizes["2xs"],
     },
 
     // buttonTextStyles