dhre-ui-kit 0.0.134 → 0.0.135

package/lib/index.mjs

@@ -6,6 +6,8 @@ import { BlurView } from '@react-native-community/blur';
 import Tooltip from 'rn-tooltip';
 import Pdf from 'react-native-pdf';
 import * as Progress from 'react-native-progress';
+import { useTheme as useTheme$1 } from 'src/theme/ThemeContext';
+import { withThemeProvider as withThemeProvider$1 } from 'src/theme/withThemeProvider';
 import { Calendar } from 'react-native-calendars';
 import CountryPicker from 'react-native-country-picker-modal';
 import { TextInput as TextInput$1 } from 'react-native-paper';
@@ -635,7 +637,8 @@ const BottomDrawer = ({
   onLeftIconPress,
   titleStyle,
   titleVariant = "B2_REGULAR",
-  showHeader = true
+  showHeader = true,
+  blurType = "light"
 }) => {
   const onSwipDown = (event) => {
     const { translationY } = event.nativeEvent;
@@ -661,7 +664,7 @@ const BottomDrawer = ({
         BlurView,
         {
           style: [styles$D.blurView, blurViewStyle],
-          blurType: "light",
+          blurType,
           blurAmount
         }
       ) : null, /* @__PURE__ */ React.createElement(View, { style: [styles$D.modalContainer, modalContainerStyle] }, showHeader && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(View, { style: styles$D.separator }), /* @__PURE__ */ React.createElement(View, { style: styles$D.headerContainer }, showLeftIcon && leftIcon ? React.cloneElement(leftIcon, {
@@ -1857,8 +1860,7 @@ const CustomSwitch = ({
 const styles$p = StyleSheet.create({
   container: {
     paddingVertical: verticalScale(24),
-    borderBottomWidth: moderateScale(1),
-    borderBottomColor: "#282828"
+    borderBottomWidth: moderateScale(1)
   },
   header: {
     flexDirection: "row",
@@ -1866,7 +1868,7 @@ const styles$p = StyleSheet.create({
     alignItems: "center",
     paddingHorizontal: horizontalScale(24)
   },
-  title: { flex: 1, color: "#FFFFFF" },
+  title: { flex: 1 },
   iconStyle: { marginLeft: horizontalScale(20) },
   content: {
     overflow: "scroll",
@@ -1888,11 +1890,13 @@ const Accordion = ({
   headerComponent,
   disabled = false,
   icon,
-  onHeaderPress
+  onHeaderPress,
+  titleVariant = "B4_REGULAR"
 }) => {
   const contentRef = useRef(null);
   const [animation] = useState(new Animated.Value(0));
   const [contentHeight, setContentHeight] = useState(0);
+  const { theme } = useTheme$1();
   useEffect(() => {
     if (contentRef.current) {
       contentRef.current.measure((x, y, width, height) => {
@@ -1911,28 +1915,46 @@ const Accordion = ({
     inputRange: [0, 1],
     outputRange: [0, contentHeight]
   });
-  return /* @__PURE__ */ React.createElement(View, { style: [styles$p.container, containerStyle], testID: testId }, /* @__PURE__ */ React.createElement(View, { style: [styles$p.header, headerStyle, disabled && { opacity: 0.5 }] }, headerComponent ? headerComponent() : /* @__PURE__ */ React.createElement(Pressable, { onPress: onHeaderPress }, /* @__PURE__ */ React.createElement(
-    CustomTypography,
-    {
-      variant: "B4_REGULAR",
-      text: title,
-      style: [styles$p.title, titleStyle]
-    }
-  )), /* @__PURE__ */ React.createElement(Pressable, { onPress: !disabled ? onToggle : void 0 }, React.cloneElement(icon, {
-    width: moderateScale(20),
-    height: moderateScale(20),
-    style: styles$p.iconStyle
-  }))), optionalElement ? optionalElement() : null, isOpen && /* @__PURE__ */ React.createElement(Animated.View, { style: [styles$p.content, { height: cardHeight }] }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(
     View,
     {
-      ref: contentRef,
-      onLayout: (event) => {
-        setContentHeight(event.nativeEvent.layout.height);
-      }
+      style: {
+        ...styles$p.container,
+        borderBottomColor: theme.BORDER_SEPRATOR,
+        ...containerStyle
+      },
+      testID: testId
     },
-    children
-  )));
+    /* @__PURE__ */ React.createElement(View, { style: [styles$p.header, headerStyle, disabled && { opacity: 0.5 }] }, headerComponent ? headerComponent() : /* @__PURE__ */ React.createElement(Pressable, { onPress: onHeaderPress }, /* @__PURE__ */ React.createElement(
+      CustomTypography,
+      {
+        variant: titleVariant,
+        text: title,
+        style: {
+          ...styles$p.title,
+          color: theme.CONTENT_PRIMARY,
+          ...titleStyle
+        }
+      }
+    )), /* @__PURE__ */ React.createElement(Pressable, { onPress: !disabled ? onToggle : void 0 }, React.cloneElement(icon, {
+      width: moderateScale(20),
+      height: moderateScale(20),
+      style: styles$p.iconStyle
+    }))),
+    optionalElement ? optionalElement() : null,
+    isOpen && /* @__PURE__ */ React.createElement(Animated.View, { style: [styles$p.content, { height: cardHeight }] }, /* @__PURE__ */ React.createElement(
+      View,
+      {
+        ref: contentRef,
+        onLayout: (event) => {
+          setContentHeight(event.nativeEvent.layout.height);
+        }
+      },
+      children
+    ))
+  );
 };
+var Accordion$1 = withThemeProvider$1(Accordion);
 
 const styles$o = StyleSheet.create({
   container: {
@@ -2166,17 +2188,12 @@ const styles$m = StyleSheet.create({
     paddingHorizontal: horizontalScale(16),
     paddingTop: verticalScale(74),
     paddingBottom: verticalScale(16),
-    backgroundColor: "#212121",
-    borderBottomWidth: 1,
-    borderBottomColor: "#282828"
+    borderBottomWidth: 1
   },
   headderContainer: {
     flexDirection: "row",
     alignItems: "center"
   },
-  headerTitle: {
-    color: "#FFFFFF"
-  },
   leftIconStyle: { marginRight: horizontalScale(9) },
   rightIconStyle: { marginLeft: horizontalScale(8) }
 });
@@ -2191,25 +2208,39 @@ const CustomHeader = ({
   onLeftPress,
   onRightPress
 }) => {
-  return /* @__PURE__ */ React.createElement(View, { style: styles$m.container, testID: testId }, /* @__PURE__ */ React.createElement(View, { style: styles$m.headderContainer }, showLeftIcon && leftIcon ? React.cloneElement(leftIcon, {
-    width: moderateScale(24),
-    height: moderateScale(24),
-    onPress: onLeftPress,
-    style: styles$m.leftIconStyle
-  }) : null, /* @__PURE__ */ React.createElement(
-    CustomTypography,
+  const { theme } = useTheme$1();
+  return /* @__PURE__ */ React.createElement(
+    View,
     {
-      variant: "B2_REGULAR",
-      text: title,
-      style: styles$m.headerTitle
-    }
-  )), showRightIcon && rightIcon ? React.cloneElement(rightIcon, {
-    width: moderateScale(24),
-    height: moderateScale(24),
-    onPress: onRightPress,
-    style: styles$m.rightIconStyle
-  }) : null);
+      style: {
+        ...styles$m.container,
+        backgroundColor: theme.SURFACE_SECONDARY,
+        borderBottomColor: theme.BORDER_SEPERATOR_HEADER
+      },
+      testID: testId
+    },
+    /* @__PURE__ */ React.createElement(View, { style: styles$m.headderContainer }, showLeftIcon && leftIcon ? React.cloneElement(leftIcon, {
+      width: moderateScale(24),
+      height: moderateScale(24),
+      onPress: onLeftPress,
+      style: styles$m.leftIconStyle
+    }) : null, /* @__PURE__ */ React.createElement(
+      CustomTypography,
+      {
+        variant: "B2_REGULAR",
+        text: title,
+        style: { color: theme.CONTENT_PRIMARY }
+      }
+    )),
+    showRightIcon && rightIcon ? React.cloneElement(rightIcon, {
+      width: moderateScale(24),
+      height: moderateScale(24),
+      onPress: onRightPress,
+      style: styles$m.rightIconStyle
+    }) : null
+  );
 };
+var CustomHeader$1 = withThemeProvider$1(CustomHeader);
 
 const styles$l = StyleSheet.create({
   container: {
@@ -2218,21 +2249,14 @@ const styles$l = StyleSheet.create({
   swippableContainer: { paddingVertical: verticalScale(16) },
   actionButton: {
     justifyContent: "center",
-    alignItems: "center"
+    alignItems: "center",
+    paddingHorizontal: horizontalScale(24)
   },
   titleStyle: {
     color: "#fff"
   },
-  leftActions: {
-    flexDirection: "row",
-    justifyContent: "center",
-    alignItems: "center",
-    width: horizontalScale(150),
-    gap: horizontalScale(24)
-  },
-  rightActions: {
-    flexDirection: "row",
-    paddingHorizontal: horizontalScale(24)
+  actionBtn: {
+    flexDirection: "row"
   },
   seprator: {
     height: verticalScale(16)
@@ -2284,7 +2308,7 @@ const SwipableList = (props) => {
       }
     )
   );
-  const leftActionHandle = (item, leftPrimaryActionIcon, leftPrimaryActionTitle, leftSecondaryActionIcon, leftSecondaryActionTitle) => /* @__PURE__ */ React.createElement(View, { style: [styles$l.leftActions, leftPrimaryActionStyle] }, leftPrimaryActionIcon && /* @__PURE__ */ React.createElement(
+  const leftActionHandle = (item, leftPrimaryActionIcon, leftPrimaryActionTitle, leftSecondaryActionIcon, leftSecondaryActionTitle) => /* @__PURE__ */ React.createElement(View, { style: styles$l.actionBtn }, leftPrimaryActionIcon && /* @__PURE__ */ React.createElement(
     ActionButton,
     {
       icon: leftPrimaryActionIcon,
@@ -2303,7 +2327,7 @@ const SwipableList = (props) => {
       testID: `${testId}-LEFT-SECONDARY-${item.id}`
     }
   ));
-  const rightActionHandle = (item) => /* @__PURE__ */ React.createElement(View, { style: [styles$l.rightActions, rightPrimaryActionStyle] }, rightPrimaryActionIcon && /* @__PURE__ */ React.createElement(
+  const rightActionHandle = (item) => /* @__PURE__ */ React.createElement(View, { style: [styles$l.actionBtn, rightPrimaryActionStyle] }, rightPrimaryActionIcon && /* @__PURE__ */ React.createElement(
     ActionButton,
     {
       icon: rightPrimaryActionIcon,
@@ -2664,11 +2688,9 @@ const styles$f = StyleSheet.create({
     marginTop: verticalScale(24),
     height: verticalScale(48),
     alignItems: "center",
-    borderRadius: moderateScale(25),
-    backgroundColor: "#fff"
+    borderRadius: moderateScale(25)
   },
   applyButtonText: {
-    color: "#000",
     ...FONT_STYLES.L1_REGULAR
   }
 });
@@ -2679,6 +2701,7 @@ const DateRangePicker = (props) => {
     startDate: "",
     endDate: ""
   });
+  const { theme } = useTheme();
   const onDayPress = (day) => {
     const { dateString } = day;
     const { startDate, endDate } = selectedRange;
@@ -2698,15 +2721,15 @@ const DateRangePicker = (props) => {
     if (startDate) {
       markedDates[startDate] = {
         startingDay: true,
-        color: "#2DE3A6",
-        textColor: "#000000"
+        color: theme.SUCCESS,
+        textColor: theme.CONTENT_PRIMARY
       };
     }
     if (endDate) {
       markedDates[endDate] = {
         endingDay: true,
-        color: "#2DE3A6",
-        textColor: "#000000"
+        color: theme.SUCCESS,
+        textColor: theme.CONTENT_PRIMARY
       };
     }
     if (startDate && endDate) {
@@ -2715,8 +2738,8 @@ const DateRangePicker = (props) => {
       while (start < end) {
         start.setDate(start.getDate() + 1);
         markedDates[start.toISOString().split("T")[0]] = {
-          color: "#2DE3A6",
-          textColor: "#000000"
+          color: theme.SUCCESS,
+          textColor: theme.CONTENT_PRIMARY
         };
       }
     }
@@ -2731,14 +2754,14 @@ const DateRangePicker = (props) => {
       markingType: "period",
       theme: {
         calendarBackground: "transparent",
-        arrowColor: "#fff",
-        monthTextColor: "#FFFFFF",
-        dayTextColor: "#A7A7A7",
-        todayTextColor: "#2DE3A6"
+        arrowColor: theme.CONTENT_PRIMARY,
+        monthTextColor: theme.CONTENT_PRIMARY,
+        dayTextColor: theme.CONTENT_SECONDRY,
+        todayTextColor: theme.SUCCESS
       },
       style: {
         backgroundColor: "transparent",
-        color: "#A7A7A7"
+        color: theme.CONTENT_SECONDRY
       },
       onDayPress,
       ...props
@@ -2750,12 +2773,16 @@ const DateRangePicker = (props) => {
       onPress: () => {
         onButtonPress(selectedRange?.startDate, selectedRange?.endDate);
       },
-      containerStyle: styles$f.applyButton,
-      textStyle: styles$f.applyButtonText,
+      containerStyle: {
+        ...styles$f.applyButton,
+        backgroundColor: theme.SURFACE_INVERTED
+      },
+      textStyle: { color: theme.CONTENT_PRIMARY },
       disabled: isButtonDisabled
     }
   ));
 };
+var DateRangePicker$1 = withThemeProvider(DateRangePicker);
 
 const OurOfficesButton = ({
   leftIcon,
@@ -4158,7 +4185,7 @@ const AppointmentCard = ({
 }) => {
   const { theme } = useTheme();
   return /* @__PURE__ */ React.createElement(
-    Accordion,
+    Accordion$1,
     {
       title,
       isOpen,
@@ -4350,5 +4377,5 @@ const PropertyDetails = ({
 };
 var index = withThemeProvider(PropertyDetails);
 
-export { Accordion, index$1 as AppointmentCard, Badge$1 as Badge, BottomDrawer, CustomButton$1 as Button, Cards, category as Category, Checkbox as CheckBox, ContactModel, CountryDropDown as CountryPicker, CustomDocumentPicker$1 as CustomDocumentPicker, CustomDropdown$1 as CustomDropdown, CustomHeader, CustomIcon, CustomLoader, CustomProgressBar, CustomSearchBar, index$2 as CustomSlideButton, CustomSwitchBtn, CustomText$1 as CustomText, CustomTextInput, CustomTooltip, CustomTypography, DHRE_COLORS_ALERT, DHRE_COLORS_BG, DHRE_COLORS_PRIMARY, DHRE_COLORS_SECONDARY, DHRE_COLORS_TEXT, DHRE_DEFAULT, DateRangePicker, CustomDropdown as DropDown, FONT_STYLES, FeedbackForm, FileUpload, FontStyle, Line, NotificationBandge, index$4 as OTPInput, OurOffices as OurOfficesButton, PdfView, PopUp, index as PropertyDetails, ShapeType, TagsComponent as SingleSelectionTags, Star as StarRating, index$3 as Stepper, SwipableList, Tabs$1 as Tabs, Tags, TextDirectType, CommonTextInput as TextInput, Theme, Toast, CustomSwitch as ToggleButton, ToggleButtonType, ToggleTextType, Topic$1 as Topic, copyToClipboard, theme as default, height, horizontalScale, moderateScale, toastService, verticalScale, width };
+export { Accordion$1 as Accordion, index$1 as AppointmentCard, Badge$1 as Badge, BottomDrawer, CustomButton$1 as Button, Cards, category as Category, Checkbox as CheckBox, ContactModel, CountryDropDown as CountryPicker, CustomDocumentPicker$1 as CustomDocumentPicker, CustomDropdown$1 as CustomDropdown, CustomHeader$1 as CustomHeader, CustomIcon, CustomLoader, CustomProgressBar, CustomSearchBar, index$2 as CustomSlideButton, CustomSwitchBtn, CustomText$1 as CustomText, CustomTextInput, CustomTooltip, CustomTypography, DHRE_COLORS_ALERT, DHRE_COLORS_BG, DHRE_COLORS_PRIMARY, DHRE_COLORS_SECONDARY, DHRE_COLORS_TEXT, DHRE_DEFAULT, DateRangePicker$1 as DateRangePicker, CustomDropdown as DropDown, FONT_STYLES, FeedbackForm, FileUpload, FontStyle, Line, NotificationBandge, index$4 as OTPInput, OurOffices as OurOfficesButton, PdfView, PopUp, index as PropertyDetails, ShapeType, TagsComponent as SingleSelectionTags, Star as StarRating, index$3 as Stepper, SwipableList, Tabs$1 as Tabs, Tags, TextDirectType, CommonTextInput as TextInput, Theme, Toast, CustomSwitch as ToggleButton, ToggleButtonType, ToggleTextType, Topic$1 as Topic, copyToClipboard, theme as default, height, horizontalScale, moderateScale, toastService, verticalScale, width };
 //# sourceMappingURL=index.mjs.map