dhre-ui-kit 2.0.5 → 2.0.7

package/lib/index.d.ts

@@ -590,6 +590,7 @@ interface ScrollableListProps {
     activeTab?: string;
     errorStyle?: object;
     activeTextStyle?: TextStyle;
+    enableTextWrap?: boolean;
 }
 declare const _default$7: (props: ScrollableListProps) => React$1.JSX.Element;
 
@@ -1084,6 +1085,10 @@ declare const DHRE_COLORS_BG: {
     DH_BG_GREY_900: string;
     DH_BG_GREY: string;
 };
+declare const NAKHEEL_DEFAULT: {
+    NAKHEEL_BACKGROUND_SANDY: string;
+    NAKHEEL_TEXT_COLOR: string;
+};
 declare const DHRE_DEFAULT: {
     DH_LINE_GREY_0: string;
     DH_LINE_GREY_100: string;
@@ -1195,5 +1200,5 @@ interface RadioButtonGroupProps {
 
 declare const RadioButtonGroup: React$1.FC<RadioButtonGroupProps>;
 
-export { _default$g as Accordion, AnimationWithImperativeApi as AnimationLoitte, _default$1 as AppointmentCard, _default$j as Badge, BottomDrawer, _default$i as Button, Cards, _default$7 as Category, Checkbox as CheckBox, _default$a as ContactModel, CountryDropDown as CountryPicker, _default$4 as CustomDocumentPicker, CustomDropdown$1 as CustomDropdown, _default$f as CustomHeader, CustomIcon, _default$d as CustomLoader, CustomProgressBar, CustomSearchBar, _default$2 as CustomSlideButton, CustomSwitchBtn, _default$k as CustomText, CustomTextInput, CustomTooltip, CustomTypography, DHRE_COLORS_ALERT, DHRE_COLORS_BG, DHRE_COLORS_PRIMARY, DHRE_COLORS_SECONDARY, DHRE_COLORS_TEXT, DHRE_DEFAULT, _default$9 as DateRangePicker, CustomDropdown as DropDown, FONT_STYLES, _default$6 as FeedbackForm, FileUpload, FontStyle, _default$c as Line, NotificationBandge, OTPInput, _default$8 as OurOfficesButton, PdfView, PopUp, _default as PropertyDetails, RadioButtonGroup, ShapeType, _default$5 as SingleSelectionTags, Star as StarRating, _default$3 as Stepper, _default$e as SwipableList, _default$h as Tabs, Tags, TextDirectType, CommonTextInput as TextInput, Theme, Toast, CustomSwitch as ToggleButton, ToggleButtonType, ToggleTextType, _default$b as Topic, copyToClipboard, theme as default, height, horizontalScale, moderateScale, toastService, verticalScale, width };
+export { _default$g as Accordion, AnimationWithImperativeApi as AnimationLoitte, _default$1 as AppointmentCard, _default$j as Badge, BottomDrawer, _default$i as Button, Cards, _default$7 as Category, Checkbox as CheckBox, _default$a as ContactModel, CountryDropDown as CountryPicker, _default$4 as CustomDocumentPicker, CustomDropdown$1 as CustomDropdown, _default$f as CustomHeader, CustomIcon, _default$d as CustomLoader, CustomProgressBar, CustomSearchBar, _default$2 as CustomSlideButton, CustomSwitchBtn, _default$k as CustomText, CustomTextInput, CustomTooltip, CustomTypography, DHRE_COLORS_ALERT, DHRE_COLORS_BG, DHRE_COLORS_PRIMARY, DHRE_COLORS_SECONDARY, DHRE_COLORS_TEXT, DHRE_DEFAULT, _default$9 as DateRangePicker, CustomDropdown as DropDown, FONT_STYLES, _default$6 as FeedbackForm, FileUpload, FontStyle, _default$c as Line, NAKHEEL_DEFAULT, NotificationBandge, OTPInput, _default$8 as OurOfficesButton, PdfView, PopUp, _default as PropertyDetails, RadioButtonGroup, ShapeType, _default$5 as SingleSelectionTags, Star as StarRating, _default$3 as Stepper, _default$e as SwipableList, _default$h as Tabs, Tags, TextDirectType, CommonTextInput as TextInput, Theme, Toast, CustomSwitch as ToggleButton, ToggleButtonType, ToggleTextType, _default$b as Topic, copyToClipboard, theme as default, height, horizontalScale, moderateScale, toastService, verticalScale, width };
 export type { CustomHeaderProps, SlideButtonHandle, ToastRef };

package/lib/index.js

@@ -573,6 +573,10 @@ const DHRE_COLORS_BG = {
   DH_BG_GREY_900: "#6F7387",
   DH_BG_GREY: "#F2F3F8"
 };
+const NAKHEEL_DEFAULT = {
+  NAKHEEL_BACKGROUND_SANDY: "#E7DBB9",
+  NAKHEEL_TEXT_COLOR: "#686868"
+};
 const DHRE_DEFAULT = {
   DH_LINE_GREY_0: "#FAFAFA",
   DH_LINE_GREY_100: "#F6F6F6",
@@ -7416,7 +7420,7 @@ const DateRangePicker = (props) => {
     startDate: "",
     endDate: ""
   });
-  const { theme: theme$1, mode } = useTheme();
+  const { theme, mode } = useTheme();
   const onDayPress = (day) => {
     const { dateString } = day;
     const { startDate, endDate } = selectedRange;
@@ -7439,35 +7443,35 @@ const DateRangePicker = (props) => {
       while (start < end) {
         start.setDate(start.getDate() + 1);
         markedDates[start.toISOString().split("T")[0]] = {
-          color: theme.SUCCESS.dark,
-          textColor: theme$1.CONTENT_INVERTED
+          color: NAKHEEL_DEFAULT.NAKHEEL_BACKGROUND_SANDY,
+          textColor: NAKHEEL_DEFAULT.NAKHEEL_TEXT_COLOR
         };
       }
     }
     if (startDate) {
       markedDates[startDate] = {
         startingDay: true,
-        textColor: theme$1.CONTENT_INVERTED,
-        customContainerStyle: mode === "dark" ? { backgroundColor: theme$1.SURFACE_INVERTED } : {
-          backgroundColor: theme$1.SURFACE_INVERTED
+        textColor: theme.SURFACE_STATIC,
+        customContainerStyle: mode === "dark" ? { backgroundColor: theme.SURFACE_INVERTED } : {
+          backgroundColor: theme.SURFACE_INVERTED
         }
       };
     }
     if (endDate) {
       markedDates[endDate] = {
         endingDay: true,
-        color: theme.SUCCESS.dark,
-        textColor: theme$1.CONTENT_INVERTED,
-        customContainerStyle: mode === "dark" ? { backgroundColor: theme$1.SURFACE_INVERTED } : {
-          backgroundColor: theme$1.SURFACE_INVERTED
+        color: NAKHEEL_DEFAULT.NAKHEEL_BACKGROUND_SANDY,
+        textColor: theme.SURFACE_STATIC,
+        customContainerStyle: mode === "dark" ? { backgroundColor: theme.SURFACE_INVERTED } : {
+          backgroundColor: theme.SURFACE_INVERTED
         }
       };
       markedDates[startDate] = {
         startingDay: true,
-        color: theme.SUCCESS.dark,
-        textColor: theme$1.CONTENT_INVERTED,
-        customContainerStyle: mode === "dark" ? { backgroundColor: theme$1.SURFACE_INVERTED } : {
-          backgroundColor: theme$1.SURFACE_INVERTED
+        color: NAKHEEL_DEFAULT.NAKHEEL_BACKGROUND_SANDY,
+        textColor: theme.SURFACE_STATIC,
+        customContainerStyle: mode === "dark" ? { backgroundColor: theme.SURFACE_INVERTED } : {
+          backgroundColor: theme.SURFACE_INVERTED
         }
       };
     }
@@ -7482,15 +7486,15 @@ const DateRangePicker = (props) => {
       markingType: "period",
       theme: {
         calendarBackground: "transparent",
-        arrowColor: theme$1.CONTENT_PRIMARY,
-        monthTextColor: theme$1.CONTENT_PRIMARY,
-        dayTextColor: theme$1.CONTENT_SECONDRY,
-        todayTextColor: theme$1.SUCCESS,
-        textDisabledColor: theme$1.CONTENT_DISABLE
+        arrowColor: theme.CONTENT_PRIMARY,
+        monthTextColor: theme.CONTENT_PRIMARY,
+        dayTextColor: theme.CONTENT_SECONDRY,
+        todayTextColor: NAKHEEL_DEFAULT.NAKHEEL_BACKGROUND_SANDY,
+        textDisabledColor: theme.CONTENT_DISABLE
       },
       style: {
-        backgroundColor: theme$1.SURFACE_SECONDARY,
-        color: theme$1.CONTENT_SECONDRY,
+        backgroundColor: theme.SURFACE_SECONDARY,
+        color: theme.CONTENT_SECONDRY,
         borderRadius: 0
       },
       onDayPress,
@@ -7506,9 +7510,9 @@ const DateRangePicker = (props) => {
       },
       containerStyle: {
         ...styles$d.applyButton,
-        backgroundColor: theme$1.SURFACE_INVERTED
+        backgroundColor: theme.SURFACE_INVERTED
       },
-      textStyle: { color: theme$1.CONTENT_INVERTED },
+      textStyle: { color: theme.CONTENT_INVERTED },
       disabled: isButtonDisabled
     }
   ));
@@ -7626,7 +7630,8 @@ const ScrollableList = ({
   defaultItemTextColor = "CONTENT_SECONDRY",
   activeTab,
   errorStyle,
-  activeTextStyle
+  activeTextStyle,
+  enableTextWrap
 }) => {
   const [selectedItem, setSelectedItem] = React.useState(
     data && data.length > 0 ? data[0].name : null
@@ -7660,7 +7665,7 @@ const ScrollableList = ({
           handleSelectCategory(item.name, item.value);
         }
       },
-      /* @__PURE__ */ React__default["default"].createElement(
+      /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [enableTextWrap && styles.enableTextWrapStyle] }, /* @__PURE__ */ React__default["default"].createElement(
         CustomText$1,
         {
           text: item.name,
@@ -7668,7 +7673,7 @@ const ScrollableList = ({
           textColor: (activeTab ?? selectedItem) === item.name ? selectedItemTextColor : defaultItemTextColor,
           style: (activeTab ?? selectedItem) === item.name ? activeTextStyle ? activeTextStyle : {} : {}
         }
-      ),
+      )),
       item?.isError ? /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: [styles.errorViewStyle, errorStyle] }, item?.errorText ? /* @__PURE__ */ React__default["default"].createElement(
         CustomText$1,
         {
@@ -7696,7 +7701,12 @@ const createStyles$2 = (theme) => {
       gap: 8,
       padding: 12,
       borderBottomWidth: 1,
-      borderBottomColor: theme[Theme.BORDER_SEPERATOR_HEADER]
+      borderBottomColor: theme[Theme.BORDER_SEPERATOR_HEADER],
+      flexShrink: 1
+    },
+    enableTextWrapStyle: {
+      flexShrink: 1,
+      flexGrow: 1
     },
     selectedItem: {
       borderBottomWidth: 2,
@@ -7999,10 +8009,27 @@ const CommonTextInput = (props) => {
       secureTextEntry: isSecureTextEntry,
       keyboardType,
       theme: {
+        ...reactNativePaper.MD3LightTheme,
         colors: {
+          ...reactNativePaper.MD3LightTheme.colors,
           onSurfaceVariant: currentBorderColor,
           error: errorMessage?.length || onlyErrorBorderLabel ? DHRE_DEFAULT.DH_SEMENTIC_ERROR : currentBorderColor,
           primary: errorMessage?.length || onlyErrorBorderLabel ? DHRE_DEFAULT.DH_SEMENTIC_ERROR : currentBorderColor
+        },
+        fonts: {
+          ...reactNativePaper.MD3LightTheme.fonts,
+          bodyLarge: {
+            ...reactNativePaper.MD3LightTheme.fonts.bodyLarge,
+            fontFamily: "Nakheel-TextRegular"
+          },
+          bodyMedium: {
+            ...reactNativePaper.MD3LightTheme.fonts.bodyMedium,
+            fontFamily: "Nakheel-TextRegular"
+          },
+          labelLarge: {
+            ...reactNativePaper.MD3LightTheme.fonts.labelLarge,
+            fontFamily: "Nakheel-TextRegular"
+          }
         }
       },
       style: [
@@ -8011,6 +8038,9 @@ const CommonTextInput = (props) => {
         multiline && styles$9.multilineInput
         // Apply multiline style if true
       ],
+      contentStyle: {
+        fontFamily: "Nakheel-TextRegular"
+      },
       maxLength,
       textColor,
       placeholder: placeholderText,
@@ -8170,7 +8200,7 @@ const CustomDropdown = (props) => {
       dropdownPosition: "bottom",
       renderItem,
       itemTextStyle,
-      containerStyle: menuContainerStyle,
+      containerStyle: [{ marginTop: verticalScale(5) }, menuContainerStyle],
       activeColor,
       itemContainerStyle: [styles$8.itemListStyle, itemContainerStyle],
       disable,
@@ -8413,7 +8443,7 @@ const createStyles = (theme) => {
       alignItems: "center",
       paddingVertical: 8,
       paddingHorizontal: 12,
-      borderRadius: 20,
+      borderRadius: 0,
       marginHorizontal: 8
     },
     selectedTagButton: {
@@ -9587,6 +9617,7 @@ exports.FeedbackForm = feedback;
 exports.FileUpload = FileUpload;
 exports.FontStyle = FontStyle;
 exports.Line = Line;
+exports.NAKHEEL_DEFAULT = NAKHEEL_DEFAULT;
 exports.NotificationBandge = NotificationBandge;
 exports.OTPInput = OTPInput;
 exports.OurOfficesButton = OurOffices;