@holper/react-native-holper-storybook 0.7.1 → 0.7.2

package/lib/components/DonutCountdown/style.ts

@@ -1,8 +1,9 @@
-import { StyleSheet } from 'react-native';
+import { Platform, StyleSheet } from 'react-native';
 
 export default StyleSheet.create({
   center: {
     justifyContent: 'center',
     alignItems: 'center',
+    top: Platform.OS === 'android' ? 4 : 0,
   },
 });

package/lib/components/Input/style.ts

@@ -1,4 +1,4 @@
-import { Dimensions, StyleSheet } from 'react-native';
+import { Dimensions, Platform, StyleSheet } from 'react-native';
 
 import { borderRadius, Colors } from '../../configs/constants';
 
@@ -27,6 +27,7 @@ export default StyleSheet.create({
     fontFamily: 'poppins_regular',
     backgroundColor: Colors.white,
     marginVertical: 6,
+    paddingTop: Platform.OS === 'android' ? 14 : 0,
   },
   fixedSize: {
     width: width - 60,

package/lib/components/Select/index.tsx

@@ -29,6 +29,7 @@ const Select = ({
       Icon={() => <Feather name="chevron-down" size={24} style={style.iconStyle} />}
       useNativeAndroidPickerStyle={false}
       pickerProps={{ mode: 'dropdown', enabled: !disabled, itemStyle: style.itemStyle }}
+      dropdownItemStyle={style.dropdownStyle}
       style={{
         inputIOSContainer: { pointerEvents: 'none', ...style.basicStyle, ...style[`${variant}Container`] },
         inputAndroidContainer: { ...style.basicStyle, ...style[`${variant}Container`] },

package/lib/components/Select/style.ts

@@ -1,4 +1,4 @@
-import { Dimensions, StyleSheet } from 'react-native';
+import { Dimensions, Platform, StyleSheet } from 'react-native';
 
 import { borderRadius, Colors } from '../../configs/constants';
 
@@ -42,6 +42,7 @@ export default StyleSheet.create({
     flex: 1,
     color: Colors.darkblue,
     fontFamily: 'poppins_regular',
+    top: Platform.OS === 'android' ? 2 : 0,
   },
   errorFontStyle: {
     color: Colors.red,
@@ -56,6 +57,10 @@ export default StyleSheet.create({
     marginTop: 12,
     color: Colors.darkblue,
   },
+  dropdownStyle: {
+    backgroundColor: Colors.white,
+    color: Colors.darkblue,
+  },
   itemStyle: {
     color: Colors.darkblue,
     fontFamily: 'poppins_regular',

package/lib/components/Toast/index.tsx

@@ -1,4 +1,5 @@
 import { Ionicons } from '@expo/vector-icons';
+import { useColorScheme } from 'react-native';
 import { toast, Toaster } from 'sonner-native';
 
 import { Colors } from '../../configs/constants';
@@ -6,26 +7,39 @@ import style from './style';
 
 import type { ToastMessageProps } from '../../configs/types';
 
-const Toast = () => (
-  <Toaster
-    autoWiggleOnUpdate="toast-change"
-    closeButton
-    duration={3000}
-    icons={{
-      error: <Ionicons name="alert-circle-outline" color={Colors.darkred} size={30} />,
-      success: <Ionicons name="checkmark-circle-outline" color={Colors.darkgreen} size={30} />,
-    }}
-    pauseWhenPageIsHidden
-    position="top-center"
-    richColors
-    swipeToDismissDirection="up"
-    visibleToasts={4}
-    toastOptions={{
-      titleStyle: style.titleStyle,
-      descriptionStyle: style.descriptionStyle,
-    }}
-  />
-);
+const Toast = () => {
+  const colorScheme = useColorScheme();
+  const isDarkMode = colorScheme === 'dark';
+
+  return (
+    <Toaster
+      autoWiggleOnUpdate="toast-change"
+      closeButton
+      duration={3000}
+      icons={{
+        error: (
+          <Ionicons name="alert-circle-outline" color={isDarkMode ? Colors.brightred : Colors.darkred} size={30} />
+        ),
+        success: (
+          <Ionicons
+            name="checkmark-circle-outline"
+            color={isDarkMode ? Colors.brightgreen : Colors.darkgreen}
+            size={30}
+          />
+        ),
+      }}
+      pauseWhenPageIsHidden
+      position="top-center"
+      richColors
+      swipeToDismissDirection="up"
+      visibleToasts={4}
+      toastOptions={{
+        titleStyle: style.titleStyle,
+        descriptionStyle: style.descriptionStyle,
+      }}
+    />
+  );
+};
 
 export const sendMessage = ({ variant, message, description }: ToastMessageProps) => {
   toast[variant](message, { description });

package/lib/configs/constants.ts

@@ -8,6 +8,7 @@ export const Colors = {
   whiteice: '#E7EAEE',
   whitepearl: '#F7F8F9',
   // Greens
+  brightgreen: '#8AE8AD',
   darkgreen: '#008A2E',
   green: '#3FE384',
   lightergreen: '#F5FEFA',
@@ -28,6 +29,7 @@ export const Colors = {
   placeboPurple: '#F0ECFE',
   violet: '#300049',
   // Reds
+  brightred: '#E6A3A6',
   darkred: '#E60606',
   lightred: '#FFC1C1',
   red: '#FD4C4C',

package/package.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.7.1",
   "main": "lib/index.js",
+  "version": "0.7.2",
   "name": "@holper/react-native-holper-storybook",
   "description": "A component library for Holper projects",
   "license": "MIT",