dhre-ui-kit 0.0.17 → 0.0.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dhre-ui-kit",
-  "version": "0.0.17",
+  "version": "0.0.19",
   "main": "src/index.ts",
   "files": [
     "src",

package/src/App.tsx

@@ -1,42 +1,14 @@
 import React from 'react';
 import {ThemeProvider} from './theme/ThemeContext';
-import {Badge, Line} from './index';
+import {Badge, DateRangePicker, Line} from './index';
 import {ArrowLeft, CalenderDots} from './assets';
 import {View} from 'react-native';
 import CustomButton from './components/button/Button';
 
 const App = () => {
   return (
-    <ThemeProvider>
-      <View style={{marginTop: 50}}>
-        <Badge
-          handleIconPress={function (): void {}}
-          text="gggsdfghjhgf"
-          style={{margin: 20}}
-          iconName={<CalenderDots width={20} height={20} />}
-          textStyle={{color: 'black'}}
-          iconStyle={{}}
-        />
-        <Line />
-        <CustomButton
-          title="Yes"
-          onPress={() => console.log('Yes Button Pressed')}
-          leftIcon={<ArrowLeft />}
-          // titleColor={color.CONTENT_SECONDRY[currentTheme]}
-          titleVariant="L2_REGULAR"
-          containerStyle={[
-            {
-              borderWidth: 1,
-              borderRadius: 20,
+      <DateRangePicker onPress={() => {}} />
 
-              height: 40,
-            },
-          ]}
-          // iconStyle={styles.iconStyle}
-          imagePosition="left"
-        />
-      </View>
-    </ThemeProvider>
   );
 };
 

package/src/components/button/Button.tsx

@@ -5,6 +5,7 @@ import {
   View,
   ViewStyle,
   StyleProp,
+  TextStyle,
 } from 'react-native';
 import {SvgProps} from 'react-native-svg';
 import CustomText from '../customText';
@@ -13,7 +14,7 @@ interface CustomButtonProps {
   title: string;
   onPress: () => void;
   containerStyle?: StyleProp<ViewStyle>;
-  textStyle?: ViewStyle;
+  textStyle?: TextStyle;
   leftIcon?: ReactElement<SvgProps>;
   rightIcon?: ReactElement<SvgProps>;
   iconStyle?: ViewStyle;

package/src/components/checkBox/CheckBox.interface.ts

@@ -1,3 +1,5 @@
+import {TextStyle, ViewStyle} from 'react-native';
+
 export interface CheckBoxProps {
   isChecked: boolean;
   onCheck?: (checked: boolean) => void;
@@ -7,4 +9,7 @@ export interface CheckBoxProps {
   testID?: string;
   checkedIcon: React.ReactElement;
   uncheckedIcon: React.ReactElement;
+  titleVariant?: string;
+  titleStyle?: TextStyle;
+  containerStyle?: ViewStyle;
 }

package/src/components/checkBox/CheckBox.tsx

@@ -12,6 +12,9 @@ const Checkbox: React.FC<CheckBoxProps> = ({
   testID,
   checkedIcon,
   uncheckedIcon,
+  titleVariant = 'L1_REGULAR',
+  titleStyle,
+  containerStyle,
 }) => {
   const [checked, setChecked] = useState(isChecked || false);
 
@@ -21,7 +24,7 @@ const Checkbox: React.FC<CheckBoxProps> = ({
   };
 
   return (
-    <View testID={testID}>
+    <View testID={testID} style={containerStyle}>
       <Pressable
         testID={'Checkbox-Press'}
         onPress={handlePress}
@@ -33,7 +36,11 @@ const Checkbox: React.FC<CheckBoxProps> = ({
         <View style={styles.checkboxContainer}>
           {React.cloneElement(checked ? checkedIcon : uncheckedIcon)}
         </View>
-        <CustomTypography variant="H8medium" text={labelName} />
+        <CustomTypography
+          variant={titleVariant}
+          text={labelName}
+          style={titleStyle}
+        />
       </Pressable>
     </View>
   );

package/src/components/dateRangePicker/DateRangePicker.styles.ts

@@ -3,8 +3,8 @@ import {FONT_STYLES} from '../../theme/fonts';
 import {verticalScale, moderateScale} from '../../utils/stylehelper';
 
 const styles = StyleSheet.create({
-  container: {marginTop: verticalScale(8)},
   applyButton: {
+    marginTop: verticalScale(40),
     height: verticalScale(48),
     alignItems: 'center',
     borderRadius: moderateScale(25),

package/src/components/dateRangePicker/DateRangePicker.tsx

@@ -60,15 +60,16 @@ const DateRangePicker = ({onPress}: DateRangePickerProps) => {
         };
       }
     }
-
+    
     return markedDates;
   };
 
   return (
-    <View style={styles.container}>
+    <View>
       <Calendar
         markedDates={getMarkedDates()}
         mode="date"
+        markingType={'period'}
         theme={{
           calendarBackground: 'transparent',
           arrowColor: '#fff',

package/src/components/toast/Toast.styles.ts

@@ -9,8 +9,9 @@ import {
 const styles = StyleSheet.create({
   container: {
     position: 'absolute',
+    alignSelf: 'center',
     height: verticalScale(72),
-    width: width - horizontalScale(48),
+    width: width - horizontalScale(32),
     top: 56,
     borderRadius: moderateScale(8),
     overflow: 'hidden',

package/src/theme/ThemeContext.tsx

@@ -14,8 +14,8 @@ interface ThemeProviderProps {
 
 export const ThemeProvider: React.FC<ThemeProviderProps> = ({children}) => {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const mode = useSelector((state: any) => state.theme.currentTheme);
-  // const mode = 'light'
+  // const mode = useSelector((state: any) => state.theme.currentTheme);
+  const mode = 'light'
   // Filter the theme based on the mode (light or dark)
   const filteredTheme = Object.keys(theme).reduce((acc, key) => {
     acc[key] = theme[key][mode];