dhre-ui-kit 0.0.134 → 0.0.135

package/lib/index.d.ts

@@ -17,7 +17,7 @@ interface CustomTextProps extends TextProps {
     style?: StyleProp<TextStyle>;
     textColor?: string;
 }
-declare const _default$e: (props: CustomTextProps) => React$1.JSX.Element;
+declare const _default$h: (props: CustomTextProps) => React$1.JSX.Element;
 
 interface BadgeProps {
     text?: string;
@@ -27,7 +27,7 @@ interface BadgeProps {
     iconStyle?: ViewStyle;
     handleIconPress: () => void;
 }
-declare const _default$d: (props: BadgeProps) => React$1.JSX.Element;
+declare const _default$g: (props: BadgeProps) => React$1.JSX.Element;
 
 interface BottomDrawerProps {
     isModalVisible: boolean;
@@ -49,6 +49,7 @@ interface BottomDrawerProps {
     titleStyle?: TextStyle;
     titleVariant?: string;
     showHeader?: boolean;
+    blurType?: 'dark' | 'light' | 'xlight';
 }
 
 declare const BottomDrawer: React$1.FC<BottomDrawerProps>;
@@ -70,7 +71,7 @@ interface CustomButtonProps {
     disableButtonTitleColor?: string;
 }
 
-declare const _default$c: (props: CustomButtonProps) => React$1.JSX.Element;
+declare const _default$f: (props: CustomButtonProps) => React$1.JSX.Element;
 
 interface CardsProps {
     topLeftTitle?: string;
@@ -317,7 +318,7 @@ interface Props {
     onSelectionChange?: (selected: string[]) => void;
     style?: ViewStyle;
 }
-declare const _default$b: (props: Props) => React$1.JSX.Element;
+declare const _default$e: (props: Props) => React$1.JSX.Element;
 
 interface TagsProps {
     tags: string[];
@@ -354,9 +355,10 @@ interface AccordionProps {
     disabled?: boolean;
     icon: React$1.ReactElement;
     onHeaderPress?: () => void;
+    titleVariant?: string;
 }
 
-declare const Accordion: ({ title, testId, containerStyle, titleStyle, headerStyle, children, isOpen, onToggle, optionalElement, headerComponent, disabled, icon, onHeaderPress, }: AccordionProps) => React$1.JSX.Element;
+declare const _default$d: (props: AccordionProps) => React$1.JSX.Element;
 
 interface ToastProps {
     sucessIcon: React$1.ReactElement;
@@ -409,7 +411,7 @@ interface CustomHeaderProps {
     onRightPress?: () => void;
 }
 
-declare const CustomHeader: ({ title, testId, leftIcon, rightIcon, showLeftIcon, showRightIcon, onLeftPress, onRightPress, }: CustomHeaderProps) => React$1.JSX.Element;
+declare const _default$c: (props: CustomHeaderProps) => React$1.JSX.Element;
 
 interface ListItem {
     id: string;
@@ -479,7 +481,7 @@ interface CustomLoaderProps {
 
 declare const CustomLoader: ({ loading }: CustomLoaderProps) => React$1.JSX.Element | null;
 
-declare const _default$a: (props: {
+declare const _default$b: (props: {
     style?: ViewStyle;
 }) => React$1.JSX.Element;
 
@@ -493,7 +495,7 @@ interface OurOfficesButtonProps$1 {
     time?: string;
     subTitleStyle?: TextStyle;
 }
-declare const _default$9: (props: OurOfficesButtonProps$1) => React$1.JSX.Element;
+declare const _default$a: (props: OurOfficesButtonProps$1) => React$1.JSX.Element;
 
 interface ContactModalProps {
     phoneNumber: string;
@@ -502,13 +504,13 @@ interface ContactModalProps {
     isMailOpen: boolean;
     data: string;
 }
-declare const _default$8: (props: ContactModalProps) => React$1.JSX.Element;
+declare const _default$9: (props: ContactModalProps) => React$1.JSX.Element;
 
 interface DateRangePickerProps extends CalendarProps {
     onButtonPress: (startDate: string, endDate: string) => void;
 }
 
-declare const DateRangePicker: (props: DateRangePickerProps) => React$1.JSX.Element;
+declare const _default$8: (props: DateRangePickerProps) => React$1.JSX.Element;
 
 interface OurOfficesButtonProps {
     leftIcon?: ReactElement<SvgProps>;
@@ -1050,4 +1052,4 @@ interface PropertyDetailsProps {
 
 declare const _default: (props: PropertyDetailsProps) => React$1.JSX.Element;
 
-export { Accordion, _default$1 as AppointmentCard, _default$d as Badge, BottomDrawer, _default$c as Button, Cards, _default$6 as Category, Checkbox as CheckBox, _default$8 as ContactModel, CountryDropDown as CountryPicker, _default$5 as CustomDocumentPicker, CustomDropdown$1 as CustomDropdown, CustomHeader, type CustomHeaderProps, CustomIcon, CustomLoader, CustomProgressBar, CustomSearchBar, _default$2 as CustomSlideButton, CustomSwitchBtn, _default$e 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, _default$a as Line, NotificationBandge, _default$4 as OTPInput, _default$7 as OurOfficesButton, PdfView, PopUp, _default as PropertyDetails, ShapeType, TagsComponent as SingleSelectionTags, Star as StarRating, _default$3 as Stepper, SwipableList, _default$b as Tabs, Tags, TextDirectType, CommonTextInput as TextInput, Theme, Toast, type ToastRef, CustomSwitch as ToggleButton, ToggleButtonType, ToggleTextType, _default$9 as Topic, copyToClipboard, theme as default, height, horizontalScale, moderateScale, toastService, verticalScale, width };
+export { _default$d as Accordion, _default$1 as AppointmentCard, _default$g as Badge, BottomDrawer, _default$f as Button, Cards, _default$6 as Category, Checkbox as CheckBox, _default$9 as ContactModel, CountryDropDown as CountryPicker, _default$5 as CustomDocumentPicker, CustomDropdown$1 as CustomDropdown, _default$c as CustomHeader, type CustomHeaderProps, CustomIcon, CustomLoader, CustomProgressBar, CustomSearchBar, _default$2 as CustomSlideButton, CustomSwitchBtn, _default$h as CustomText, CustomTextInput, CustomTooltip, CustomTypography, DHRE_COLORS_ALERT, DHRE_COLORS_BG, DHRE_COLORS_PRIMARY, DHRE_COLORS_SECONDARY, DHRE_COLORS_TEXT, DHRE_DEFAULT, _default$8 as DateRangePicker, CustomDropdown as DropDown, FONT_STYLES, FeedbackForm, FileUpload, FontStyle, _default$b as Line, NotificationBandge, _default$4 as OTPInput, _default$7 as OurOfficesButton, PdfView, PopUp, _default as PropertyDetails, ShapeType, TagsComponent as SingleSelectionTags, Star as StarRating, _default$3 as Stepper, SwipableList, _default$e as Tabs, Tags, TextDirectType, CommonTextInput as TextInput, Theme, Toast, type ToastRef, CustomSwitch as ToggleButton, ToggleButtonType, ToggleTextType, _default$a as Topic, copyToClipboard, theme as default, height, horizontalScale, moderateScale, toastService, verticalScale, width };

package/lib/index.js

@@ -10,6 +10,8 @@ var blur = require('@react-native-community/blur');
 var Tooltip = require('rn-tooltip');
 var Pdf = require('react-native-pdf');
 var Progress = require('react-native-progress');
+var ThemeContext$1 = require('src/theme/ThemeContext');
+var withThemeProvider$1 = require('src/theme/withThemeProvider');
 var reactNativeCalendars = require('react-native-calendars');
 var CountryPicker = require('react-native-country-picker-modal');
 var reactNativePaper = require('react-native-paper');
@@ -668,7 +670,8 @@ const BottomDrawer = ({
   onLeftIconPress,
   titleStyle,
   titleVariant = "B2_REGULAR",
-  showHeader = true
+  showHeader = true,
+  blurType = "light"
 }) => {
   const onSwipDown = (event) => {
     const { translationY } = event.nativeEvent;
@@ -694,7 +697,7 @@ const BottomDrawer = ({
         blur.BlurView,
         {
           style: [styles$D.blurView, blurViewStyle],
-          blurType: "light",
+          blurType,
           blurAmount
         }
       ) : null, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [styles$D.modalContainer, modalContainerStyle] }, showHeader && /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$D.separator }), /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$D.headerContainer }, showLeftIcon && leftIcon ? React__default["default"].cloneElement(leftIcon, {
@@ -1890,8 +1893,7 @@ const CustomSwitch = ({
 const styles$p = reactNative.StyleSheet.create({
   container: {
     paddingVertical: verticalScale(24),
-    borderBottomWidth: moderateScale(1),
-    borderBottomColor: "#282828"
+    borderBottomWidth: moderateScale(1)
   },
   header: {
     flexDirection: "row",
@@ -1899,7 +1901,7 @@ const styles$p = reactNative.StyleSheet.create({
     alignItems: "center",
     paddingHorizontal: horizontalScale(24)
   },
-  title: { flex: 1, color: "#FFFFFF" },
+  title: { flex: 1 },
   iconStyle: { marginLeft: horizontalScale(20) },
   content: {
     overflow: "scroll",
@@ -1921,11 +1923,13 @@ const Accordion = ({
   headerComponent,
   disabled = false,
   icon,
-  onHeaderPress
+  onHeaderPress,
+  titleVariant = "B4_REGULAR"
 }) => {
   const contentRef = React.useRef(null);
   const [animation] = React.useState(new reactNative.Animated.Value(0));
   const [contentHeight, setContentHeight] = React.useState(0);
+  const { theme } = ThemeContext$1.useTheme();
   React.useEffect(() => {
     if (contentRef.current) {
       contentRef.current.measure((x, y, width, height) => {
@@ -1944,28 +1948,46 @@ const Accordion = ({
     inputRange: [0, 1],
     outputRange: [0, contentHeight]
   });
-  return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [styles$p.container, containerStyle], testID: testId }, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [styles$p.header, headerStyle, disabled && { opacity: 0.5 }] }, headerComponent ? headerComponent() : /* @__PURE__ */ React__default["default"].createElement(reactNative.Pressable, { onPress: onHeaderPress }, /* @__PURE__ */ React__default["default"].createElement(
-    CustomTypography,
-    {
-      variant: "B4_REGULAR",
-      text: title,
-      style: [styles$p.title, titleStyle]
-    }
-  )), /* @__PURE__ */ React__default["default"].createElement(reactNative.Pressable, { onPress: !disabled ? onToggle : void 0 }, React__default["default"].cloneElement(icon, {
-    width: moderateScale(20),
-    height: moderateScale(20),
-    style: styles$p.iconStyle
-  }))), optionalElement ? optionalElement() : null, isOpen && /* @__PURE__ */ React__default["default"].createElement(reactNative.Animated.View, { style: [styles$p.content, { height: cardHeight }] }, /* @__PURE__ */ React__default["default"].createElement(
+  return /* @__PURE__ */ React__default["default"].createElement(
     reactNative.View,
     {
-      ref: contentRef,
-      onLayout: (event) => {
-        setContentHeight(event.nativeEvent.layout.height);
-      }
+      style: {
+        ...styles$p.container,
+        borderBottomColor: theme.BORDER_SEPRATOR,
+        ...containerStyle
+      },
+      testID: testId
     },
-    children
-  )));
+    /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [styles$p.header, headerStyle, disabled && { opacity: 0.5 }] }, headerComponent ? headerComponent() : /* @__PURE__ */ React__default["default"].createElement(reactNative.Pressable, { onPress: onHeaderPress }, /* @__PURE__ */ React__default["default"].createElement(
+      CustomTypography,
+      {
+        variant: titleVariant,
+        text: title,
+        style: {
+          ...styles$p.title,
+          color: theme.CONTENT_PRIMARY,
+          ...titleStyle
+        }
+      }
+    )), /* @__PURE__ */ React__default["default"].createElement(reactNative.Pressable, { onPress: !disabled ? onToggle : void 0 }, React__default["default"].cloneElement(icon, {
+      width: moderateScale(20),
+      height: moderateScale(20),
+      style: styles$p.iconStyle
+    }))),
+    optionalElement ? optionalElement() : null,
+    isOpen && /* @__PURE__ */ React__default["default"].createElement(reactNative.Animated.View, { style: [styles$p.content, { height: cardHeight }] }, /* @__PURE__ */ React__default["default"].createElement(
+      reactNative.View,
+      {
+        ref: contentRef,
+        onLayout: (event) => {
+          setContentHeight(event.nativeEvent.layout.height);
+        }
+      },
+      children
+    ))
+  );
 };
+var Accordion$1 = withThemeProvider$1.withThemeProvider(Accordion);
 
 const styles$o = reactNative.StyleSheet.create({
   container: {
@@ -2199,17 +2221,12 @@ const styles$m = reactNative.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) }
 });
@@ -2224,25 +2241,39 @@ const CustomHeader = ({
   onLeftPress,
   onRightPress
 }) => {
-  return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$m.container, testID: testId }, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$m.headderContainer }, showLeftIcon && leftIcon ? React__default["default"].cloneElement(leftIcon, {
-    width: moderateScale(24),
-    height: moderateScale(24),
-    onPress: onLeftPress,
-    style: styles$m.leftIconStyle
-  }) : null, /* @__PURE__ */ React__default["default"].createElement(
-    CustomTypography,
+  const { theme } = ThemeContext$1.useTheme();
+  return /* @__PURE__ */ React__default["default"].createElement(
+    reactNative.View,
     {
-      variant: "B2_REGULAR",
-      text: title,
-      style: styles$m.headerTitle
-    }
-  )), showRightIcon && rightIcon ? React__default["default"].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__default["default"].createElement(reactNative.View, { style: styles$m.headderContainer }, showLeftIcon && leftIcon ? React__default["default"].cloneElement(leftIcon, {
+      width: moderateScale(24),
+      height: moderateScale(24),
+      onPress: onLeftPress,
+      style: styles$m.leftIconStyle
+    }) : null, /* @__PURE__ */ React__default["default"].createElement(
+      CustomTypography,
+      {
+        variant: "B2_REGULAR",
+        text: title,
+        style: { color: theme.CONTENT_PRIMARY }
+      }
+    )),
+    showRightIcon && rightIcon ? React__default["default"].cloneElement(rightIcon, {
+      width: moderateScale(24),
+      height: moderateScale(24),
+      onPress: onRightPress,
+      style: styles$m.rightIconStyle
+    }) : null
+  );
 };
+var CustomHeader$1 = withThemeProvider$1.withThemeProvider(CustomHeader);
 
 const styles$l = reactNative.StyleSheet.create({
   container: {
@@ -2251,21 +2282,14 @@ const styles$l = reactNative.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)
@@ -2317,7 +2341,7 @@ const SwipableList = (props) => {
       }
     )
   );
-  const leftActionHandle = (item, leftPrimaryActionIcon, leftPrimaryActionTitle, leftSecondaryActionIcon, leftSecondaryActionTitle) => /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [styles$l.leftActions, leftPrimaryActionStyle] }, leftPrimaryActionIcon && /* @__PURE__ */ React__default["default"].createElement(
+  const leftActionHandle = (item, leftPrimaryActionIcon, leftPrimaryActionTitle, leftSecondaryActionIcon, leftSecondaryActionTitle) => /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$l.actionBtn }, leftPrimaryActionIcon && /* @__PURE__ */ React__default["default"].createElement(
     ActionButton,
     {
       icon: leftPrimaryActionIcon,
@@ -2336,7 +2360,7 @@ const SwipableList = (props) => {
       testID: `${testId}-LEFT-SECONDARY-${item.id}`
     }
   ));
-  const rightActionHandle = (item) => /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [styles$l.rightActions, rightPrimaryActionStyle] }, rightPrimaryActionIcon && /* @__PURE__ */ React__default["default"].createElement(
+  const rightActionHandle = (item) => /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [styles$l.actionBtn, rightPrimaryActionStyle] }, rightPrimaryActionIcon && /* @__PURE__ */ React__default["default"].createElement(
     ActionButton,
     {
       icon: rightPrimaryActionIcon,
@@ -2697,11 +2721,9 @@ const styles$f = reactNative.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
   }
 });
@@ -2712,6 +2734,7 @@ const DateRangePicker = (props) => {
     startDate: "",
     endDate: ""
   });
+  const { theme } = useTheme();
   const onDayPress = (day) => {
     const { dateString } = day;
     const { startDate, endDate } = selectedRange;
@@ -2731,15 +2754,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) {
@@ -2748,8 +2771,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
         };
       }
     }
@@ -2764,14 +2787,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
@@ -2783,12 +2806,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,
@@ -4191,7 +4218,7 @@ const AppointmentCard = ({
 }) => {
   const { theme } = useTheme();
   return /* @__PURE__ */ React__default["default"].createElement(
-    Accordion,
+    Accordion$1,
     {
       title,
       isOpen,
@@ -4383,7 +4410,7 @@ const PropertyDetails = ({
 };
 var index = withThemeProvider(PropertyDetails);
 
-exports.Accordion = Accordion;
+exports.Accordion = Accordion$1;
 exports.AppointmentCard = index$1;
 exports.Badge = Badge$1;
 exports.BottomDrawer = BottomDrawer;
@@ -4395,7 +4422,7 @@ exports.ContactModel = ContactModel;
 exports.CountryPicker = CountryDropDown;
 exports.CustomDocumentPicker = CustomDocumentPicker$1;
 exports.CustomDropdown = CustomDropdown$1;
-exports.CustomHeader = CustomHeader;
+exports.CustomHeader = CustomHeader$1;
 exports.CustomIcon = CustomIcon;
 exports.CustomLoader = CustomLoader;
 exports.CustomProgressBar = CustomProgressBar;
@@ -4412,7 +4439,7 @@ exports.DHRE_COLORS_PRIMARY = DHRE_COLORS_PRIMARY;
 exports.DHRE_COLORS_SECONDARY = DHRE_COLORS_SECONDARY;
 exports.DHRE_COLORS_TEXT = DHRE_COLORS_TEXT;
 exports.DHRE_DEFAULT = DHRE_DEFAULT;
-exports.DateRangePicker = DateRangePicker;
+exports.DateRangePicker = DateRangePicker$1;
 exports.DropDown = CustomDropdown;
 exports.FONT_STYLES = FONT_STYLES;
 exports.FeedbackForm = FeedbackForm;